diff --git a/packages/components/src/resizable-box/styles/resizable-box.styles.js b/.cache/.gitkeep
similarity index 100%
rename from packages/components/src/resizable-box/styles/resizable-box.styles.js
rename to .cache/.gitkeep
diff --git a/.eslintrc.js b/.eslintrc.js
index 22cb9209b2e9e8..d0c22090b93e87 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,14 +36,130 @@ const typedFiles = glob( 'packages/*/package.json' )
 	.filter( ( fileName ) => require( join( __dirname, fileName ) ).types )
 	.map( ( fileName ) => fileName.replace( 'package.json', '**/*.js' ) );
 
+const restrictedImports = [
+	{
+		name: 'framer-motion',
+		message:
+			'Please use the Framer Motion API through `@wordpress/components` instead.',
+	},
+	{
+		name: 'lodash',
+		message: 'Please use native functionality instead.',
+	},
+	{
+		name: '@ariakit/react',
+		message:
+			'Please use Ariakit API through `@wordpress/components` instead.',
+	},
+	{
+		name: 'redux',
+		importNames: [ 'combineReducers' ],
+		message: 'Please use `combineReducers` from `@wordpress/data` instead.',
+	},
+	{
+		name: '@emotion/css',
+		message:
+			'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support. As a replacement for the `cx` function, please use the `useCx` hook defined in `@wordpress/components` instead.',
+	},
+	{
+		name: '@wordpress/edit-post',
+		message:
+			"edit-post is a WordPress top level package that shouldn't be imported into other packages",
+	},
+	{
+		name: '@wordpress/edit-site',
+		message:
+			"edit-site is a WordPress top level package that shouldn't be imported into other packages",
+	},
+	{
+		name: '@wordpress/edit-widgets',
+		message:
+			"edit-widgets is a WordPress top level package that shouldn't be imported into other packages",
+	},
+	{
+		name: 'classnames',
+		message:
+			"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
+	},
+];
+
+const restrictedSyntax = [
+	// NOTE: We can't include the forward slash in our regex or
+	// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
+	// here. That's why we use \\u002F in the regexes below.
+	{
+		selector:
+			'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
+		message: 'Path access on WordPress dependencies is not allowed.',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
+			majorMinorRegExp +
+			'/]',
+		message:
+			'Deprecated functions must be removed before releasing this version.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
+		message:
+			'This method is deprecated. You should use the more explicit API methods available.',
+	},
+	{
+		selector:
+			'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
+		message: 'Prefer page.waitForSelector instead.',
+	},
+	{
+		selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
+		message:
+			'Do not use string literals for IDs; use withInstanceId instead.',
+	},
+	{
+		// Discourage the usage of `Math.random()` as it's a code smell
+		// for UUID generation, for which we already have a higher-order
+		// component: `withInstanceId`.
+		selector:
+			'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
+		message:
+			'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
+	},
+	{
+		selector:
+			'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
+		message:
+			'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
+	},
+	{
+		selector:
+			'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
+		message:
+			'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
+	},
+];
+
+/** `no-restricted-syntax` rules for components. */
+const restrictedSyntaxComponents = [
+	{
+		selector:
+			'JSXOpeningElement[name.name="Button"]:not(:has(JSXAttribute[name.name="accessibleWhenDisabled"])) JSXAttribute[name.name="disabled"]',
+		message:
+			'`disabled` used without the `accessibleWhenDisabled` prop. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or preventing focus from returning to a trigger element. (Ignore this error if you truly mean to disable.)',
+	},
+];
+
 module.exports = {
 	root: true,
 	extends: [
 		'plugin:@wordpress/eslint-plugin/recommended',
 		'plugin:eslint-comments/recommended',
+		'plugin:storybook/recommended',
 	],
+	plugins: [ 'react-compiler' ],
 	globals: {
 		wp: 'off',
+		globalThis: 'readonly',
 	},
 	settings: {
 		jsdoc: {
@@ -54,9 +170,16 @@ module.exports = {
 	},
 	rules: {
 		'jest/expect-expect': 'off',
+		'react/jsx-boolean-value': 'error',
+		'react/jsx-curly-brace-presence': [
+			'error',
+			{ props: 'never', children: 'never' },
+		],
 		'@wordpress/dependency-group': 'error',
-		'@wordpress/is-gutenberg-plugin': 'error',
+		'@wordpress/wp-global-usage': 'error',
 		'@wordpress/react-no-unsafe-timeout': 'error',
+		'@wordpress/i18n-hyphenated-range': 'error',
+		'@wordpress/i18n-no-flanking-whitespace': 'error',
 		'@wordpress/i18n-text-domain': [
 			'error',
 			{
@@ -70,137 +193,7 @@ module.exports = {
 		'no-restricted-imports': [
 			'error',
 			{
-				paths: [
-					{
-						name: 'framer-motion',
-						message:
-							'Please use the Framer Motion API through `@wordpress/components` instead.',
-					},
-					{
-						name: 'lodash',
-						importNames: [
-							'camelCase',
-							'capitalize',
-							'castArray',
-							'chunk',
-							'clamp',
-							'cloneDeep',
-							'compact',
-							'concat',
-							'countBy',
-							'debounce',
-							'deburr',
-							'defaults',
-							'defaultTo',
-							'delay',
-							'difference',
-							'differenceWith',
-							'dropRight',
-							'each',
-							'escape',
-							'escapeRegExp',
-							'every',
-							'extend',
-							'findIndex',
-							'findKey',
-							'findLast',
-							'first',
-							'flatMap',
-							'flatten',
-							'flattenDeep',
-							'flow',
-							'flowRight',
-							'forEach',
-							'fromPairs',
-							'has',
-							'identity',
-							'includes',
-							'invoke',
-							'isArray',
-							'isBoolean',
-							'isFinite',
-							'isFunction',
-							'isMatch',
-							'isNil',
-							'isNumber',
-							'isObject',
-							'isObjectLike',
-							'isPlainObject',
-							'isString',
-							'isUndefined',
-							'keyBy',
-							'keys',
-							'last',
-							'lowerCase',
-							'mapKeys',
-							'maxBy',
-							'memoize',
-							'negate',
-							'noop',
-							'nth',
-							'omitBy',
-							'once',
-							'overEvery',
-							'partial',
-							'partialRight',
-							'random',
-							'reduce',
-							'reject',
-							'repeat',
-							'reverse',
-							'size',
-							'snakeCase',
-							'some',
-							'sortBy',
-							'startCase',
-							'startsWith',
-							'stubFalse',
-							'stubTrue',
-							'sum',
-							'sumBy',
-							'take',
-							'throttle',
-							'times',
-							'toString',
-							'trim',
-							'truncate',
-							'unionBy',
-							'uniq',
-							'uniqBy',
-							'uniqueId',
-							'uniqWith',
-							'upperFirst',
-							'values',
-							'without',
-							'words',
-							'xor',
-							'zip',
-						],
-						message:
-							'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
-					},
-					{
-						name: 'reakit',
-						message:
-							'Please use Reakit API through `@wordpress/components` instead.',
-					},
-					{
-						name: 'redux',
-						importNames: [ 'combineReducers' ],
-						message:
-							'Please use `combineReducers` from `@wordpress/data` instead.',
-					},
-					{
-						name: 'puppeteer-testing-library',
-						message:
-							'`puppeteer-testing-library` is still experimental.',
-					},
-					{
-						name: '@emotion/css',
-						message:
-							'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support. As a replacement for the `cx` function, please use the `useCx` hook defined in `@wordpress/components` instead.',
-					},
-				],
+				paths: restrictedImports,
 			},
 		],
 		'@typescript-eslint/no-restricted-imports': [
@@ -216,61 +209,27 @@ module.exports = {
 				],
 			},
 		],
-		'no-restricted-syntax': [
+		'@typescript-eslint/consistent-type-imports': [
 			'error',
-			// NOTE: We can't include the forward slash in our regex or
-			// we'll get a `SyntaxError` (Invalid regular expression: \ at end of pattern)
-			// here. That's why we use \\u002F in the regexes below.
-			{
-				selector:
-					'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
-				message:
-					'Path access on WordPress dependencies is not allowed.',
-			},
-			{
-				selector:
-					'CallExpression[callee.name="deprecated"] Property[key.name="version"][value.value=/' +
-					majorMinorRegExp +
-					'/]',
-				message:
-					'Deprecated functions must be removed before releasing this version.',
-			},
 			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitFor"]',
-				message:
-					'This method is deprecated. You should use the more explicit API methods available.',
-			},
-			{
-				selector:
-					'CallExpression[callee.object.name="page"][callee.property.name="waitForTimeout"]',
-				message: 'Prefer page.waitForSelector instead.',
-			},
-			{
-				selector: 'JSXAttribute[name.name="id"][value.type="Literal"]',
-				message:
-					'Do not use string literals for IDs; use withInstanceId instead.',
-			},
-			{
-				// Discourage the usage of `Math.random()` as it's a code smell
-				// for UUID generation, for which we already have a higher-order
-				// component: `withInstanceId`.
-				selector:
-					'CallExpression[callee.object.name="Math"][callee.property.name="random"]',
-				message:
-					'Do not use Math.random() to generate unique IDs; use withInstanceId instead. (If you’re not generating unique IDs: ignore this message.)',
+				prefer: 'type-imports',
+				disallowTypeAnnotations: false,
 			},
+		],
+		'no-restricted-syntax': [ 'error', ...restrictedSyntax ],
+		'jsdoc/check-tag-names': [
+			'error',
 			{
-				selector:
-					'CallExpression[callee.name="withDispatch"] > :function > BlockStatement > :not(VariableDeclaration,ReturnStatement)',
-				message:
-					'withDispatch must return an object with consistent keys. Avoid performing logic in `mapDispatchToProps`.',
+				definedTags: [ 'jest-environment' ],
 			},
+		],
+		'react-compiler/react-compiler': [
+			'error',
 			{
-				selector:
-					'LogicalExpression[operator="&&"][left.property.name="length"][right.type="JSXElement"]',
-				message:
-					'Avoid truthy checks on length property rendering, as zero length is rendered verbatim.',
+				environment: {
+					enableTreatRefLikeIdentifiersAsRefs: true,
+					validateRefAccessDuringRender: false,
+				},
 			},
 		],
 	},
@@ -287,6 +246,7 @@ module.exports = {
 				'import/no-unresolved': 'off',
 				'import/named': 'off',
 				'@wordpress/data-no-store-string-literals': 'off',
+				'react-compiler/react-compiler': 'off',
 			},
 		},
 		{
@@ -323,15 +283,93 @@ module.exports = {
 			},
 		},
 		{
-			files: [ 'packages/components/src/**/*.[tj]s?(x)' ],
-			excludedFiles: [ ...developmentFiles ],
+			files: [
+				'packages/*/src/**/*.[tj]s?(x)',
+				'storybook/stories/**/*.[tj]s?(x)',
+			],
+			excludedFiles: [ '**/*.native.js' ],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+				],
+			},
+		},
+		{
+			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
+			excludedFiles: [
+				'packages/*/src/**/@(test|stories)/**',
+				'**/*.@(native|ios|android).js',
+			],
 			rules: {
-				'react-hooks/exhaustive-deps': 'error',
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					// Temporary rules until we're ready to officially deprecate the bottom margins.
+					...[
+						'BaseControl',
+						'CheckboxControl',
+						'ComboboxControl',
+						'DimensionControl',
+						'FocalPointPicker',
+						'RangeControl',
+						'SearchControl',
+						'SelectControl',
+						'TextControl',
+						'TextareaControl',
+						'ToggleControl',
+						'ToggleGroupControl',
+						'TreeSelect',
+					].map( ( componentName ) => ( {
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,
+						message:
+							componentName +
+							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
+					} ) ),
+					// Temporary rules until we're ready to officially default to the new size.
+					...[
+						'BorderBoxControl',
+						'BorderControl',
+						'BoxControl',
+						'Button',
+						'ComboboxControl',
+						'CustomSelectControl',
+						'DimensionControl',
+						'FontAppearanceControl',
+						'FontFamilyControl',
+						'FontSizePicker',
+						'FormTokenField',
+						'InputControl',
+						'LetterSpacingControl',
+						'LineHeightControl',
+						'NumberControl',
+						'RangeControl',
+						'SelectControl',
+						'TextControl',
+						'ToggleGroupControl',
+						'UnitControl',
+					].map( ( componentName ) => ( {
+						// Falsy `__next40pxDefaultSize` without a non-default `size` prop.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="size"][value.value!="default"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop when using the default size.',
+					} ) ),
+					{
+						// Falsy `__next40pxDefaultSize` without a `render` prop.
+						selector:
+							'JSXOpeningElement[name.name="FormFileUpload"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"][value.expression.value!=false])):not(:has(JSXAttribute[name.name="render"]))',
+						message:
+							'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					},
+				],
 			},
 		},
 		{
 			files: [ 'packages/jest*/**/*.js', '**/test/**/*.js' ],
-			excludedFiles: [ 'test/e2e/**/*.js' ],
+			excludedFiles: [ 'test/e2e/**/*.js', 'test/performance/**/*.js' ],
 			extends: [ 'plugin:@wordpress/eslint-plugin/test-unit' ],
 		},
 		{
@@ -341,15 +379,14 @@ module.exports = {
 				'packages/react-native-*/**/*.[tj]s?(x)',
 				'test/native/**/*.[tj]s?(x)',
 				'test/e2e/**/*.[tj]s?(x)',
+				'test/performance/**/*.[tj]s?(x)',
+				'test/storybook-playwright/**/*.[tj]s?(x)',
 			],
 			extends: [
 				'plugin:jest-dom/recommended',
 				'plugin:testing-library/react',
+				'plugin:jest/recommended',
 			],
-			rules: {
-				'testing-library/no-container': 'off',
-				'testing-library/no-node-access': 'off',
-			},
 		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
@@ -362,9 +399,21 @@ module.exports = {
 		{
 			files: [
 				'test/e2e/**/*.[tj]s',
+				'test/performance/**/*.[tj]s',
 				'packages/e2e-test-utils-playwright/**/*.[tj]s',
 			],
-			extends: [ 'plugin:eslint-plugin-playwright/playwright-test' ],
+			extends: [
+				'plugin:@wordpress/eslint-plugin/test-playwright',
+				'plugin:@typescript-eslint/base',
+			],
+			parserOptions: {
+				tsconfigRootDir: __dirname,
+				project: [
+					'./test/e2e/tsconfig.json',
+					'./test/performance/tsconfig.json',
+					'./packages/e2e-test-utils-playwright/tsconfig.json',
+				],
+			},
 			rules: {
 				'@wordpress/no-global-active-element': 'off',
 				'@wordpress/no-global-get-selection': 'off',
@@ -386,6 +435,10 @@ module.exports = {
 						message: 'Prefer page.locator instead.',
 					},
 				],
+				'playwright/no-conditional-in-test': 'off',
+				'@typescript-eslint/await-thenable': 'error',
+				'@typescript-eslint/no-floating-promises': 'error',
+				'@typescript-eslint/no-misused-promises': 'error',
 			},
 		},
 		{
@@ -412,11 +465,106 @@ module.exports = {
 				'jsdoc/require-param': 'off',
 			},
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			excludedFiles: [
+				'packages/components/src/utils/colors-values.js',
+				'packages/components/src/theme/**',
+			],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					{
+						selector:
+							':matches(Literal[value=/--wp-admin-theme-/],TemplateElement[value.cooked=/--wp-admin-theme-/])',
+						message:
+							'--wp-admin-theme-* variables do not support component theming. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
+					},
+					{
+						selector:
+							// Allow overriding definitions, but not access with var()
+							':matches(Literal[value=/var\\(\\s*--wp-components-color-/],TemplateElement[value.cooked=/var\\(\\s*--wp-components-color-/])',
+						message:
+							'To ensure proper fallbacks, --wp-components-color-* variables should not be used directly. Use variables from the COLORS object in packages/components/src/utils/colors-values.js instead.',
+					},
+				],
+			},
+		},
 		{
 			files: [ 'packages/components/src/**' ],
 			excludedFiles: [ 'packages/components/src/**/@(test|stories)/**' ],
 			plugins: [ 'ssr-friendly' ],
 			extends: [ 'plugin:ssr-friendly/recommended' ],
 		},
+		{
+			files: [ 'packages/components/src/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					// The `ariakit` and `framer-motion` APIs are meant to be consumed via
+					// the `@wordpress/components` package, hence why importing those
+					// dependencies should be allowed in the components package.
+					{
+						paths: restrictedImports.filter(
+							( { name } ) =>
+								! [
+									'@ariakit/react',
+									'framer-motion',
+								].includes( name )
+						),
+					},
+				],
+			},
+		},
+		{
+			files: [ 'packages/block-editor/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						paths: [
+							...restrictedImports,
+							{
+								name: '@wordpress/api-fetch',
+								message:
+									"block-editor is a generic package that doesn't depend on a server or WordPress backend. To provide WordPress integration, consider passing settings to the BlockEditorProvider components.",
+							},
+							{
+								name: '@wordpress/core-data',
+								message:
+									"block-editor is a generic package that doesn't depend on a server or WordPress backend. To provide WordPress integration, consider passing settings to the BlockEditorProvider components.",
+							},
+						],
+					},
+				],
+			},
+		},
+		{
+			files: [ 'packages/edit-post/**', 'packages/edit-site/**' ],
+			rules: {
+				'no-restricted-imports': [
+					'error',
+					{
+						paths: [
+							...restrictedImports,
+							{
+								name: '@wordpress/interface',
+								message:
+									'The edit-post and edit-site package should not directly import the interface package. They should import them from the private APIs of the editor package instead.',
+							},
+						],
+					},
+				],
+			},
+		},
+		{
+			files: [ 'packages/interactivity*/src/**' ],
+			rules: {
+				'react-compiler/react-compiler': 'off',
+				'react/react-in-jsx-scope': 'error',
+			},
+		},
 	],
 };
diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
index 6e5072a91b0018..477cd4fbacb400 100644
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
@@ -6,3 +6,18 @@ f63053cace3c02e284f00918e1854284c85b9132
 
 # Prettier upgrade to 2.6.2.
 33d84b036592a5bf31af05b7710f3b2b14163dc4
+
+# Prettier upgrade to 2.8.5.
+c56e8a1910ed74f405b74bbb12fe81dea974e5c3
+
+# Prettier upgrade to 3.0.3.
+0bee15148fe4330c20cf372cb46a33693e45cb5f
+
+# ESLint: Enable react/jsx-boolean-value
+9a34927870df80ac3b2da14d71f81d20ec23e2b6
+
+# Autofix eslint curly rule.
+0221522f253e094b277a1485b7a2d186cb172632
+
+# ESLint: Enable react/jsx-curly-brace-presence
+5d4baa9ab5f57d207cc3a048003216a8574574d9
diff --git a/.gitattributes b/.gitattributes
index aaaedda10d2dc0..1dc48620d8b67c 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -11,3 +11,15 @@
 *.jpg binary
 *.png binary
 *.ttf binary
+
+# Directories with vendored code.
+packages/edit-site/lib/** linguist-vendored
+
+# The changelog.txt file is authored as markdown.
+changelog.txt linguist-language=Markdown
+
+# Flag docs directory as documentation for GitHub stats.
+docs/** linguist-documentation
+
+# TSConfig files use jsonc.
+tsconfig*.json linguist-language=jsonc
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 2cc7b0ce34bd1e..2ec03cba722c6b 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,8 +1,9 @@
 # Documentation
-/docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy
+/docs                                           @ajitbohra @juanmaguitar @fabiankaegy @ndiego
+/packages/interactivity/docs                    @juanmaguitar
 
 # Schemas
-/schemas/json                                   @ajlende
+/schemas/json
 
 # Data
 /packages/api-fetch                             @nerrad @mmtr
@@ -14,24 +15,23 @@
 # Blocks
 /packages/block-library                         @ajitbohra
 /packages/block-library/src/gallery             @geriux
-/packages/block-library/src/navigation          @tellthemachines
-/packages/block-library/src/navigation-link     @tellthemachines
-/packages/block-library/src/navigation-submenu  @tellthemachines
-/packages/block-library/src/page-list           @tellthemachines
 /packages/block-library/src/comment-template    @michalczaplinski
 /packages/block-library/src/comments            @michalczaplinski
 /packages/block-library/src/table-of-contents   @ZebulanStanphill
+/packages/block-library/src/image               @artemiomorales
 
 # Duotone
-/lib/block-supports/duotone.php                       @ajlende
-/packages/block-editor/src/components/duotone-control @ajlende
-/packages/block-editor/src/hooks/duotone.js           @ajlende
-/packages/components/src/duotone-picker               @ajlende
+/lib/block-supports/duotone.php
+/packages/block-editor/src/components/duotone-control
+/packages/block-editor/src/hooks/duotone.js
+/packages/components/src/duotone-picker
 
 # Editor
 /packages/annotations                           @atimmer
 /packages/autop
 /packages/block-editor                          @ellatrix
+/packages/block-editor/src/hooks                @tellthemachines
+/packages/block-editor/src/layouts              @tellthemachines
 /packages/block-serialization-spec-parser       @dmsnell
 /packages/block-serialization-default-parser    @dmsnell
 /packages/blocks
@@ -44,50 +44,51 @@
 /packages/interface
 /packages/media-utils
 /packages/server-side-render
+/packages/block-editor/src/components/link-control  @getdave
 
 # Widgets
-/packages/edit-widgets                          @draganescu @talldan @noisysocks @tellthemachines @adamziel @kevin940726
-/packages/customize-widgets                     @noisysocks
-/packages/widgets                               @noisysocks
-
-# Navigation
-/packages/edit-navigation                       @draganescu @talldan @tellthemachines @adamziel @kevin940726 @getdave
+/packages/edit-widgets                          @draganescu @adamziel @kevin940726
+/packages/customize-widgets
+/packages/widgets
 
 # Full Site Editing
 /packages/edit-site
 
+# Interactivity API
+/packages/interactivity                         @luisherranz @darerodz
+
 # Tooling
 /bin                                            @ntwb @nerrad @ajitbohra
 /bin/api-docs                                   @ntwb @nerrad @ajitbohra
-/docs/tool                                      @ajitbohra
+/docs/tool                                      @ajitbohra @ndiego
 /packages/babel-plugin-import-jsx-pragma        @ntwb @nerrad @ajitbohra
 /packages/babel-plugin-makepot                  @ntwb @nerrad @ajitbohra
 /packages/babel-preset-default                  @gziolo @ntwb @nerrad @ajitbohra
 /packages/browserslist-config                   @ntwb @nerrad @ajitbohra
 /packages/create-block                          @gziolo @ryanwelcher
 /packages/create-block-tutorial-template        @gziolo @ryanwelcher
-/packages/custom-templated-path-webpack-plugin  @ntwb @nerrad @ajitbohra
 /packages/dependency-extraction-webpack-plugin  @gziolo
 /packages/docgen
 /packages/e2e-test-utils                        @ntwb @nerrad @ajitbohra
 /packages/e2e-tests                             @ntwb @nerrad @ajitbohra
+/packages/e2e-test-utils-playwright             @kevin940726
 /packages/eslint-plugin                         @gziolo @ntwb @nerrad @ajitbohra
 /packages/jest-console                          @gziolo @ntwb @nerrad @ajitbohra
 /packages/jest-preset-default                   @gziolo @ntwb @nerrad @ajitbohra
 /packages/jest-puppeteer-axe                    @gziolo @ntwb @nerrad @ajitbohra
-/packages/library-export-default-webpack-plugin @ntwb @nerrad @ajitbohra
 /packages/npm-package-json-lint-config          @gziolo @ntwb @nerrad @ajitbohra
 /packages/postcss-themes                        @ntwb @nerrad @ajitbohra
 /packages/prettier-config                       @ntwb @gziolo
 /packages/scripts                               @gziolo @ntwb @nerrad @ajitbohra @ryanwelcher
 /packages/stylelint-config                      @ntwb
+/test/php/gutenberg-coding-standards            @anton-vlasenko
 
 # UI Components
 /packages/components                            @ajitbohra
 /packages/compose                               @ajitbohra
 /packages/element                               @ajitbohra
 /packages/notices                               @ajitbohra
-/packages/nux                                   @ajitbohra
+/packages/nux                                   @ajitbohra @peterwilsoncc
 /packages/viewport                              @ajitbohra
 /packages/base-styles
 /packages/icons
@@ -118,19 +119,23 @@
 /packages/plugins                               @gziolo @adamsilverstein
 
 # Rich Text
-/packages/format-library                        @ellatrix @fluiddot
-/packages/rich-text                             @ellatrix @fluiddot
-/packages/block-editor/src/components/rich-text @ellatrix @fluiddot
+/packages/format-library                        @ellatrix
+/packages/rich-text                             @ellatrix
+/packages/block-editor/src/components/rich-text @ellatrix
 
 # Project Management
-/.github
+/.github                                        @desrosj
 /packages/project-management-automation
+/packages/report-flaky-tests                    @kevin940726
 
 # wp-env
-/packages/env                                   @noahtallen
+/packages/env                                   @ObliviousHarmony @t-hamano
 
 # PHP
 /lib                                            @spacedmonkey
+/lib/block-supports/layout.php                  @tellthemachines
+/lib/class-wp-theme-json-gutenberg.php          @tellthemachines
+/lib/compat/*/html-api                          @dmsnell
 /lib/experimental/rest-api.php                  @timothybjacobs
 /lib/experimental/class-wp-rest-*               @timothybjacobs
 /lib/experimental/class-wp-rest-block-editor-settings-controller.php @timothybjacobs @spacedmonkey @geriux
diff --git a/.github/ISSUE_TEMPLATE/Bug_report.yml b/.github/ISSUE_TEMPLATE/Bug_report.yml
index ab001b41ff793e..41bb6f1c9ba108 100644
--- a/.github/ISSUE_TEMPLATE/Bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/Bug_report.yml
@@ -1,5 +1,6 @@
 name: Bug report
 description: Report a bug with the WordPress block editor or Gutenberg plugin
+labels: ['[Type] Bug']
 body:
     - type: markdown
       attributes:
@@ -48,25 +49,29 @@ body:
       validations:
           required: false
 
-    - type: dropdown
+    - type: checkboxes
       id: existing
       attributes:
           label: Please confirm that you have searched existing issues in the repo.
           description: You can do this by searching https://github.com/WordPress/gutenberg/issues and making sure the bug is not related to another plugin.
-          multiple: true
           options:
-              - 'Yes'
-              - 'No'
-      validations:
-          required: true
+              - label: 'Yes'
+                required: true
 
-    - type: dropdown
+    - type: checkboxes
       id: plugins
       attributes:
           label: Please confirm that you have tested with all plugins deactivated except Gutenberg.
-          multiple: true
           options:
-              - 'Yes'
-              - 'No'
-      validations:
-          required: true
+              - label: 'Yes'
+                required: true
+
+    - type: checkboxes
+      id: themes
+      attributes:
+          label: Please confirm which theme type you used for testing.
+          options:
+              - label: 'Block'
+              - label: 'Classic'
+              - label: 'Hybrid (e.g. classic with theme.json)'
+              - label: 'Not sure'
diff --git a/.github/ISSUE_TEMPLATE/Feature_request.md b/.github/ISSUE_TEMPLATE/Feature_request.md
index cfae99f42ff9ea..66bd0943c31b45 100644
--- a/.github/ISSUE_TEMPLATE/Feature_request.md
+++ b/.github/ISSUE_TEMPLATE/Feature_request.md
@@ -1,6 +1,7 @@
 ---
 name: Feature request
 about: Propose an idea for a feature or an enhancement
+labels: "[Type] Enhancement"
 
 ---
 
diff --git a/.github/ISSUE_TEMPLATE/New_release.md b/.github/ISSUE_TEMPLATE/New_release.md
new file mode 100644
index 00000000000000..c07dcfa3c466c6
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/New_release.md
@@ -0,0 +1,53 @@
+---
+name: Gutenberg Release
+about: A checklist for the Gutenberg plugin release process
+labels: Gutenberg Plugin, [Type] Project Management
+---
+
+This issue is to provide visibility on the progress of the release process of Gutenberg VERSION_NUMBER and to centralize any conversations about it. The ultimate goal of this issue is to keep the reference of the steps, resources, work, and conversations about this release so it can be helpful for the next contributors releasing a new Gutenberg version.
+
+-   Gutenberg version to release: VERSION_NUMBER ([milestone](ADD_LINK))
+-   Release Manager (a.k.a. Release Lead):
+-   Release Date VERSION_NUMBER RC: ADD DATE
+-   Release Date VERSION_NUMBER: ADD DATE
+-   Previous version change log (as a reference): [15.3](https://github.com/WordPress/gutenberg/releases/tag/v15.3.0)
+
+## Resources
+
+-   📖 Read: [Gutenberg Release Process](https://developer.wordpress.org/block-editor/contributors/code/release/)
+-   📽 Watch: [Gutenberg Plugin: New Release Workflow](https://www.youtube.com/watch?v=TnSgJd3zpJY)
+-   📽 Watch: [Creating the Gutenberg plugin v12.0 Release Candidate](https://www.youtube.com/watch?v=FLkLHKecxWg)
+-   📽 Watch: [Gutenberg plugin v12.0.0 Release Party!](https://www.youtube.com/watch?v=4SDtpVPDsLc)
+
+## Checklist
+
+### RC Day - {Weekday, Month, Date}
+
+-   [ ] Post a message in `#core-editor` channel to let folks know you are starting the RC release process
+-   [ ] Organize and Label PRs on the relevant milestone
+-   [ ] Start the release process by triggering the `rc` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
+-   [ ] [Update the created Draft Release accordingly](https://developer.wordpress.org/block-editor/contributors/code/release/#view-the-release-draft)
+-   [ ] [Curate the changelog](https://developer.wordpress.org/block-editor/contributors/code/release/#1-curating-the-changelog) before publishing
+-   [ ] Publish Release
+-   [ ] Announce in `#core-editor` channel that RC1 has been released and is ready for testing
+-   [ ] Ping any other relevant channels announcing that the RC is available
+-   [ ] Create Draft of Release post on Make Core blog _(initial draft in [Google doc](https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit))_
+
+### Between RC and Release
+
+-   [ ] Post a reminder in #core-editor for backporting PRs to RC (~Label Backport to Gutenberg RC)
+-   [ ] If there are any PRs marked as [Backport to RC](https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+label%3A%22Backport+to+Gutenberg+RC%22+is%3Aclosed), run the [cherry-pick command to apply them](https://developer.wordpress.org/block-editor/contributors/code/release/auto-cherry-picking/#how-can-i-use-it-for-a-gutenberg-plugin-release) to the release branch. **This needs to be run locally**
+-   [ ] [Draft Release Post Highlights and Change Log](https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit)
+-   [ ] Get assets from [Design Team](https://make.wordpress.org/design/) for the post
+-   [ ] Reach out to Highlight Authors to draft sections (if necessary)
+
+### Release Day - {Weekday, Month, Date}
+
+-   [ ] Post a message in `#core-editor` channel to let folks know you are starting the release process
+-   [ ] Start the release process by triggering the `stable` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
+-   [ ] Update the created Draft Release accordingly. Typically by copy/pasting the last RC release notes and add any changes/updates as needed.
+-   [ ] Publish Release
+-   [ ] Trigger the update to the plugin directory. _(Get approval from a member of [Gutenberg Release team](https://github.com/orgs/WordPress/teams/gutenberg-release/members) if necessary)_
+-   [ ] Announce in `#core-editor` channel that the plugin has been released
+-   [ ] Reach out to other contributors to help get the post reviewed
+-   [ ] Publish Release post on Make Core blog
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 51bfb0d1bb7c13..a3abc5ece034ce 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -6,6 +6,3 @@ contact_links:
     - name: Technical help request
       url: https://wordpress.org/support/forum/wp-advanced/
       about: For more technical help requests, create a new topic in the Developing with WordPress Forum
-    - name: Development help request
-      url: https://wordpress.stackexchange.com/
-      about: For questions about WordPress development, ask a question in the WordPress Development Stack Exchange
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 2ac98e4c82aef5..69fd34d709bdc5 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,8 +12,17 @@ https://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->
 
 ## Testing Instructions
 <!-- Please include step by step instructions on how to test this PR. -->
-<!-- 1. Open a Post or Page. -->
-<!-- 2. Insert a Heading Block. -->
+<!-- 1. Open a post or page. -->
+<!-- 2. Insert a heading block. -->
 <!-- 3. etc. -->
 
+### Testing Instructions for Keyboard
+<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->
+
 ## Screenshots or screencast <!-- if applicable -->
+
+<!-- If you would like to upload screenshots, feel free to use the table below when it is useful to show the difference between before and after the change. -->
+
+|Before|After|
+|-|-|
+|<!-- Before screenshot here -->|<!-- After screenshot here -->|
diff --git a/.github/SUPPORT.md b/.github/SUPPORT.md
index 02165e02a7f955..ce1a0a1acffa54 100644
--- a/.github/SUPPORT.md
+++ b/.github/SUPPORT.md
@@ -5,8 +5,8 @@ Welcome to Gutenberg, a WordPress project. We hope you join us in creating the f
 
 * Please see the [Contributing Guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/CONTRIBUTING.md) for additional information on how to contribute.
 
-* As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](https://github.com/WordPress/gutenberg/blob/HEAD/CODE_OF_CONDUCT.md).
+* As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](https://make.wordpress.org/handbook/community-code-of-conduct/).
 
 * Join us on Slack for real-time communication, it is where maintainers coordinate around the project. To get started using Slack, see: https://make.wordpress.org/chat/
 
-* For general WordPress support with the core editor, see the [WordPress.org support forums](https://wordpress.org/support/) — it is highly active and well maintained.
+* For general WordPress support with the core editor, see the [WordPress.org support forums](https://wordpress.org/support/forums/) — it is highly active and well maintained.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index f6202ef81dea89..76d1e45e3c6ce8 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -10,5 +10,17 @@ updates:
       open-pull-requests-limit: 10
       labels:
           - 'GitHub Actions'
-          - 'Automated Testing'
           - '[Type] Build Tooling'
+      groups:
+          github-actions:
+              patterns:
+                  - '*'
+              exclude-patterns:
+                  - 'actions/setup-java'
+                  - 'gradle/*'
+                  - 'reactivecircus/*'
+          react-native:
+              patterns:
+                  - 'actions/setup-java'
+                  - 'gradle/*'
+                  - 'reactivecircus/*'
diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml
new file mode 100644
index 00000000000000..a17adfe5f50071
--- /dev/null
+++ b/.github/setup-node/action.yml
@@ -0,0 +1,54 @@
+name: 'Setup Node.js and install npm dependencies'
+description: 'Configure Node.js and install npm dependencies while managing all aspects of caching.'
+inputs:
+    node-version:
+        description: 'Optional. The Node.js version to use. When not specified, the version specified in .nvmrc will be used.'
+        required: false
+        type: string
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Use desired version of Node.js
+          uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+          with:
+              node-version-file: '.nvmrc'
+              node-version: ${{ inputs.node-version }}
+              check-latest: true
+              cache: npm
+
+        - name: Get Node.js and npm version
+          id: node-version
+          run: |
+              echo "NODE_VERSION=$(node -v)" >> $GITHUB_OUTPUT
+          shell: bash
+
+        - name: Cache node_modules
+          id: cache-node_modules
+          uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+          with:
+              path: '**/node_modules'
+              key: node_modules-${{ runner.os }}-${{ runner.arch }}-${{ steps.node-version.outputs.NODE_VERSION }}-${{ hashFiles('package-lock.json') }}
+
+        - name: Install npm dependencies
+          if: ${{ steps.cache-node_modules.outputs.cache-hit != 'true' }}
+          run: |
+              npm ci
+          shell: bash
+        - name: Upload npm logs as an artifact on failure
+          uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+          if: failure()
+          with:
+              name: npm-logs
+              path: C:\npm\cache\_logs
+
+        # On cache hit, we run the post-install script to match the native `npm ci` behavior.
+        # An example of this is to patch `node_modules` using patch-package.
+        - name: Post-install
+          if: ${{ steps.cache-node_modules.outputs.cache-hit == 'true' }}
+          run: |
+              # Run the post-install script for the root project.
+              npm run postinstall
+              # Run the post-install scripts for workspaces.
+              npx lerna run postinstall
+          shell: bash
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index c7380265293153..7ed57c5c5865ac 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -3,7 +3,10 @@ name: Build Gutenberg Plugin Zip
 on:
     pull_request:
     push:
-        branches: [trunk]
+        branches:
+            - trunk
+            - 'release/**'
+            - 'wp/**'
     workflow_dispatch:
         inputs:
             version:
@@ -56,7 +59,7 @@ jobs:
                 github.event.inputs.version == 'rc' ||
                 github.event.inputs.version == 'stable'
               ) || (
-                endsWith( github.ref, needs.compute-stable-branches.outputs.current_stable_branch ) &&
+                startsWith( github.ref, 'refs/heads/release/' ) &&
                 github.event.inputs.version == 'stable'
               )
             )
@@ -69,9 +72,10 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Compute old and new version
               id: get_version
@@ -122,7 +126,7 @@ jobs:
                   VERSION: ${{ steps.get_version.outputs.new_version }}
               run: |
                   cat <<< $(jq --tab --arg version "${VERSION}" '.version = $version' package.json) > package.json
-                  cat <<< $(jq --tab --arg version "${VERSION}" '.version = $version' package-lock.json) > package-lock.json
+                  cat <<< $(jq --tab --arg version "${VERSION}" '.version = $version | .packages[""].version = $version' package-lock.json) > package-lock.json
                   sed -i "s/${{ steps.get_version.outputs.old_version }}/${VERSION}/g" gutenberg.php
 
             - name: Commit the version bump to the release branch
@@ -164,14 +168,16 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Use desired version of Node.js
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
             - name: Build Gutenberg plugin ZIP file
@@ -180,7 +186,7 @@ jobs:
                   NO_CHECKS: 'true'
 
             - name: Upload artifact
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: gutenberg-plugin
                   path: ./gutenberg.zip
@@ -203,7 +209,7 @@ jobs:
 
             - name: Upload release notes artifact
               if: ${{ needs.bump-version.outputs.new_version }}
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: release-notes
                   path: ./release-notes.txt
@@ -219,11 +225,12 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   fetch-depth: 2
                   ref: ${{ needs.bump-version.outputs.release_branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Configure git user name and email
               run: |
@@ -266,12 +273,12 @@ jobs:
               run: echo "version=$(echo $VERSION | cut -d / -f 3 | sed 's/-rc./ RC/' )" >> $GITHUB_OUTPUT
 
             - name: Download Plugin Zip Artifact
-              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: gutenberg-plugin
 
             - name: Download Release Notes Artifact
-              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: release-notes
 
@@ -307,18 +314,20 @@ jobs:
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   path: main
                   ref: trunk
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
                   ref: trunk
                   token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Configure git user name and email (for publishing)
               run: |
@@ -326,11 +335,12 @@ jobs:
                   git config user.name "Gutenberg Repository Automation"
                   git config user.email gutenberg@wordpress.org
 
-            - name: Setup Node (for CLI)
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Setup Node.js
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
               with:
                   node-version-file: 'main/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
 
             - name: Publish packages to npm ("latest" dist-tag)
               run: |
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 5a07b367ffa114..3d95e7aa92bc16 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -37,18 +37,20 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   fetch-depth: 1
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Use desired version of Node.js
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
-            - uses: preactjs/compressed-size-action@8119d3d31b6e57b167e09c81dfa877eada3bcb35 # v2.5.0
+            - uses: preactjs/compressed-size-action@6fa0e7ca017120c754863b31123c5ee2860fd434 # v2.7.0
               with:
                   repo-token: '${{ secrets.GITHUB_TOKEN }}'
-                  pattern: '{build/**/*.min.js,build/**/*.css}'
+                  pattern: '{build/**/*.min.js,build/**/*.css,build-module/**/*.min.js}'
                   clean-script: 'distclean'
diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml
new file mode 100644
index 00000000000000..48fb56b425be39
--- /dev/null
+++ b/.github/workflows/check-backport-changelog.yml
@@ -0,0 +1,54 @@
+name: Verify Core Backport Changelog
+
+on:
+    pull_request:
+        types: [opened, synchronize, labeled, unlabeled]
+        branches:
+            - trunk
+        paths:
+            - 'lib/**'
+            - '!lib/load.php'
+            - '!lib/experiments-page.php'
+            - '!lib/experimental/**'
+            - 'phpunit/**'
+            - '!phpunit/experimental/**'
+            - '!phpunit/blocks/**'
+            - 'packages/**/*.php'
+            - '!packages/block-library/**'
+            - '!packages/e2e-tests/**'
+jobs:
+    check:
+        name: Check for a Core backport changelog entry
+        runs-on: ubuntu-latest
+        if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
+        steps:
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  ref: ${{ github.event.pull_request.head.ref }}
+                  repository: ${{ github.event.pull_request.head.repo.full_name }}
+            - name: Check the changelog folder
+              env:
+                  PR_NUMBER: ${{ github.event.number }}
+              run: |
+                  changelog_folder="backport-changelog"
+
+                  # Find any changelog file that contains the Gutenberg PR link
+                  gutenberg_pr_url="https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}"
+                  changelog_file=$(grep -rl "[-*] ${gutenberg_pr_url}" "${changelog_folder}" | head -n 1)
+
+                  # Confirm that there is an entry containing the Gutenberg PR link
+                  if [[ -z "${changelog_file}" ]]; then
+                    echo "Please create a core backport PR and add a file with the path <wp-release-number>/<core-pr-number>.md in the $changelog_folder folder with the core backport PR URL and a list item with this PR URL."
+                    echo "If changes are related to an existing, open core PR, you may add this PR URL to the core PR's file."
+                    echo "See $changelog_folder/readme.md for more information."
+                    exit 1
+                  fi
+
+                  core_pr_number=$(basename "${changelog_file}" .md)
+                  core_pr_url="https://github\.com/WordPress/wordpress-develop/pull/${core_pr_number}"
+
+                  # Confirm that the entry has the correct core backport PR URL.
+                  if ! grep -q -e "${core_pr_url}" "${changelog_file}"; then
+                    echo "Please update the content of ${changelog_file} to include the core backport PR URL, or update the file name to match the core backport PR number."
+                    exit 1
+                  fi
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
new file mode 100644
index 00000000000000..373a782d5d6ddf
--- /dev/null
+++ b/.github/workflows/check-components-changelog.yml
@@ -0,0 +1,68 @@
+name: OPTIONAL - Verify @wordpress/components CHANGELOG update
+
+on:
+    pull_request:
+        types: [opened, synchronize]
+        branches:
+            - trunk
+        paths:
+            - 'packages/components/**'
+            - '!packages/components/src/**/stories/**'
+            - '!packages/components/src/**/test/**'
+            - '!packages/components/src/**/*.android.js'
+            - '!packages/components/src/**/*.ios.js'
+            - '!packages/components/src/**/*.native.js'
+            - '!packages/components/src/**/*.native.scss'
+            - '!packages/components/src/**/react-native-*'
+jobs:
+    check:
+        name: Check CHANGELOG diff
+        runs-on: ubuntu-latest
+        steps:
+            - name: 'Get PR commit count'
+              run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
+            - name: Checkout code
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  ref: ${{ github.event.pull_request.head.ref }}
+                  repository: ${{ github.event.pull_request.head.repo.full_name }}
+                  fetch-depth: ${{ env.PR_COMMIT_COUNT }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+            - name: 'Fetch relevant history from origin'
+              run: git fetch origin ${{ github.event.pull_request.base.ref }}
+            - name: Check CHANGELOG status
+              env:
+                  PR_NUMBER: ${{ github.event.number }}
+              run: |
+                  changelog_path="packages/components/CHANGELOG.md"
+                  optional_check_notice="This isn't a required check, so if you think your changes are small enough that they don't warrant a CHANGELOG entry, please go ahead and merge without one."
+
+                  # Fail if the PR doesn't touch the changelog
+                  if git diff --quiet ${{ github.event.pull_request.base.sha }} HEAD -- "$changelog_path"; then
+                    echo "Please add a CHANGELOG entry to $changelog_path"
+                    echo
+                    echo "${optional_check_notice}"
+                    exit 1
+                  fi
+
+                  pr_link_pattern="\[#${PR_NUMBER}\]\(https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}\)"
+                  pr_link_grep_pattern="\[#${PR_NUMBER}\](https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER})"
+
+                  unreleased_section=$(sed -n '/^## Unreleased$/,/^## /p' "${changelog_path}")
+
+                  # Confirm that the CHANGELOG has an entry for the current PR
+                  if ! grep -nq -e "${pr_link_grep_pattern}" "${changelog_path}"; then
+                      echo "Please add a CHANGELOG entry to $changelog_path, and make sure your CHANGELOG entry has a link to the current PR."
+                      echo
+                        echo "${optional_check_notice}"
+                      exit 1
+                  fi
+
+                  # Confirm that there is an 'Unreleased' section and that the relevant entry is in that section
+                  if ! grep -nq -e '^## Unreleased' "${changelog_path}" || \
+                    ! [[ $unreleased_section = *${pr_link_pattern}* ]]; then
+                      echo "Please make sure your CHANGELOG entry is in the \`## Unreleased\` section"
+                      echo
+                      echo "${optional_check_notice}"
+                      exit 1
+                  fi
diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml
new file mode 100644
index 00000000000000..14bee71c90c909
--- /dev/null
+++ b/.github/workflows/cherry-pick-wp-release.yml
@@ -0,0 +1,184 @@
+name: Auto Cherry-Pick
+
+on:
+    push:
+        branches:
+            - trunk
+    # We also want to attempt cherry-picking when a PR is labeled after the PR
+    # is merged.
+    pull_request:
+        types: [labeled]
+        branches:
+            - trunk
+
+# Ensure that new jobs wait for the previous job to finish.
+concurrency:
+    group: ${{ github.workflow }}
+    cancel-in-progress: false
+
+jobs:
+    cherry-pick:
+        runs-on: ubuntu-latest
+        # When in the context of a PR, ensure the PR is merged.
+        if: github.event.pull_request == null || github.event.pull_request.merged == true
+        steps:
+            - name: Determine if label should trigger cherry-pick
+              id: label-check
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              with:
+                  script: |
+                      const commit_sha = context.payload.pull_request ? context.payload.pull_request.merge_commit_sha : context.sha;
+                      console.log(`Commit SHA: ${commit_sha}`);
+                      core.exportVariable('commit_sha', commit_sha);
+                      const prs = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        commit_sha,
+                      });
+                      if (prs.data.length === 0) {
+                        console.log(`No PR found for commit ${context.sha}.`);
+                        return;
+                      }
+                      const pr_number = prs.data[0].number;
+                      console.log(`PR: ${pr_number}`);
+                      core.exportVariable('pr_number', pr_number);
+
+                      const pr = await github.rest.pulls.get({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        pull_number: pr_number,
+                      });
+                      const labels = pr.data.labels.map(label => label.name);
+                      console.log(`Labels: ${labels}`);
+                      const regex = /^Backport to WP ([0-9]+\.[0-9]+) Beta\/RC$/;
+                      let matched = false;
+                      for (const label of labels) {
+                        const match = label.match(regex);
+                        if (match) {
+                          const version = match[1];
+                          console.log(`Matched label: ${label}`);
+                          console.log(`Extracted version: ${version}`);
+                          core.exportVariable('cherry_pick', 'true');
+                          core.exportVariable('version', version);
+                          matched = true;
+                          break;
+                        }
+                      }
+                      if (!matched) {
+                        core.exportVariable('cherry_pick', 'false');
+                      }
+
+            - name: Checkout repository
+              if: env.cherry_pick == 'true'
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  token: ${{ secrets.GUTENBERG_TOKEN }}
+                  fetch-depth: 0
+
+            - name: Set up Git
+              if: env.cherry_pick == 'true'
+              run: |
+                  git config --global user.name "Gutenberg Repository Automation"
+                  git config --global user.email "gutenberg@wordpress.org"
+
+            - name: Cherry-pick the commit
+              id: cherry-pick
+              if: env.cherry_pick == 'true'
+              run: |
+                  TARGET_BRANCH="wp/${{ env.version }}"
+                  COMMIT_SHA="${{ env.commit_sha }}"
+                  echo "Target branch: $TARGET_BRANCH"
+                  echo "Commit SHA: $COMMIT_SHA"
+                  git checkout $TARGET_BRANCH
+                  git cherry-pick $COMMIT_SHA || echo "cherry-pick-failed" > result
+                  if [ -f result ] && grep -q "cherry-pick-failed" result; then
+                    echo "conflict=true" >> $GITHUB_ENV
+                    git cherry-pick --abort
+                  else
+                    CHERRY_PICK_SHA=$(git rev-parse HEAD)
+                    echo "conflict=false" >> $GITHUB_ENV
+                    echo "cherry_pick_sha=$CHERRY_PICK_SHA" >> $GITHUB_ENV
+                    git push origin $TARGET_BRANCH
+                  fi
+
+            - name: Remove cherry-pick label
+              if: env.cherry_pick == 'true' && env.conflict == 'false'
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              with:
+                  script: |
+                      const prNumber = process.env.pr_number;
+                      const version = process.env.version;
+                      console.log(`prNumber: ${prNumber}`);
+                      console.log(`version: ${version}`);
+                      const oldLabel = `Backport to WP ${version} Beta/RC`;
+                      const newLabel = `Backported to WP Core`;
+                      await github.rest.issues.removeLabel({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        issue_number: prNumber,
+                        name: oldLabel
+                      });
+                      await github.rest.issues.addLabels({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        issue_number: prNumber,
+                        labels: [newLabel]
+                      });
+
+            - name: Comment on the PR
+              if: env.cherry_pick == 'true' && env.conflict == 'false'
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              with:
+                  script: |
+                      const prNumber = process.env.pr_number;
+                      const cherryPickSha = process.env.cherry_pick_sha;
+                      const targetBranch = `wp/${process.env.version}`;
+                      console.log(`prNumber: ${prNumber}`);
+                      console.log(`cherryPickSha: ${cherryPickSha}`);
+                      console.log(`targetBranch: ${targetBranch}`);
+                      await github.rest.issues.createComment({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        issue_number: prNumber,
+                        body: `I just cherry-picked this PR to the ${targetBranch} branch to get it included in the next release: ${cherryPickSha}`
+                      });
+
+            - name: Comment on the PR about conflict
+              if: env.cherry_pick == 'true' && env.conflict == 'true'
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              with:
+                  script: |
+                      const prNumber = process.env.pr_number;
+                      const commitSha = process.env.commit_sha;
+                      const targetBranch = `wp/${process.env.version}`;
+                      console.log(`prNumber: ${prNumber}`);
+                      console.log(`targetBranch: ${targetBranch}`);
+                      await github.rest.issues.createComment({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        issue_number: prNumber,
+                        body: `There was a conflict while trying to cherry-pick the commit to the ${targetBranch} branch. Please resolve the conflict manually and create a PR to the ${targetBranch} branch.
+
+                        PRs to ${targetBranch} are similar to PRs to trunk, but you should base your PR on the ${targetBranch} branch instead of trunk.
+
+                        \`\`\`
+                        # Checkout the ${targetBranch} branch instead of trunk.
+                        git checkout ${targetBranch}
+                        # Create a new branch for your PR.
+                        git checkout -b my-branch
+                        # Cherry-pick the commit.
+                        git cherry-pick ${commitSha}
+                        # Check which files have conflicts.
+                        git status
+                        # Resolve the conflict...
+                        # Add the resolved files to the staging area.
+                        git status
+                        git add .
+                        git cherry-pick --continue
+                        # Push the branch to the repository
+                        git push origin my-branch
+                        # Create a PR and set the base to the ${targetBranch} branch.
+                        # See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.
+                        \`\`\`
+                        `
+                      });
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 9b98d3d9d41165..1cb40466abe1ef 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -14,26 +14,25 @@ concurrency:
 
 jobs:
     checks:
-        name: Checks
+        name: Checks w/Node.js ${{ matrix.node }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
             matrix:
-                node: [14]
-                os: [macos-latest, ubuntu-latest, windows-latest]
+                node: ['20', '22']
+                os: ['macos-latest', 'ubuntu-latest', 'windows-latest']
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
               with:
                   node-version: ${{ matrix.node }}
-                  cache: npm
 
-            - name: npm install, build, format and lint
+            - name: Create block
               shell: bash
-              run: |
-                  npm ci
-                  bash ./bin/test-create-block.sh
+              run: bash ./bin/test-create-block.sh
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..ea85a8949573f3 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -16,50 +16,114 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    admin:
-        name: Admin - ${{ matrix.part }}
+    e2e-playwright:
+        name: Playwright - ${{ matrix.part }}
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
             matrix:
-                part: [1, 2, 3, 4]
+                part: [1, 2, 3, 4, 5, 6, 7, 8]
+                totalParts: [8]
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Npm build
+              run: npm run build
 
-            - name: Npm install and build
+            - name: Install Playwright dependencies
               run: |
-                  npm ci
-                  npm run build
+                  npx playwright install chromium firefox webkit --with-deps
 
-            - name: Install WordPress
+            - name: Install WordPress and start the server
               run: |
                   npm run wp-env start
 
-            - name: Running the tests
+            - name: Run the tests
+              env:
+                  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
               run: |
-                  $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
-                  $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e -- --shard=${{ matrix.part }}/${{ matrix.totalParts }}
 
-            - name: Archive debug artifacts (screenshots, HTML snapshots)
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
+            - name: Archive debug artifacts (screenshots, traces)
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+              if: ${{ !cancelled() }}
               with:
-                  name: failures-artifacts
-                  path: artifacts
+                  name: failures-artifacts--${{ matrix.part }}
+                  path: artifacts/test-results
                   if-no-files-found: ignore
 
             - name: Archive flaky tests report
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
-              if: always()
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+              if: ${{ !cancelled() }}
               with:
-                  name: flaky-tests-report-${{ matrix.part }}
+                  name: flaky-tests-report--${{ matrix.part }}
                   path: flaky-tests
                   if-no-files-found: ignore
+
+    merge-artifacts:
+        name: Merge Artifacts
+        if: ${{ !cancelled() }}
+        needs: [e2e-playwright]
+        runs-on: ubuntu-latest
+        outputs:
+            has-flaky-test-report: ${{ !!steps.merge-flaky-tests-reports.outputs.artifact-id }}
+        steps:
+            - name: Merge failures artifacts
+              uses: actions/upload-artifact/merge@v4
+              # Don't fail the job if there aren't any artifacts to merge.
+              continue-on-error: true
+              with:
+                  name: failures-artifacts
+                  # Retain the merged artifacts in case of a rerun.
+                  pattern: failures-artifacts*
+                  delete-merged: true
+
+            - name: Merge flaky tests reports
+              id: merge-flaky-tests-reports
+              uses: actions/upload-artifact/merge@v4
+              continue-on-error: true
+              with:
+                  name: flaky-tests-report
+                  pattern: flaky-tests-report*
+                  delete-merged: true
+
+    report-to-issues:
+        name: Report to GitHub
+        needs: [merge-artifacts]
+        if: ${{ needs.merge-artifacts.outputs.has-flaky-test-report == 'true' }}
+        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@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  ref: trunk
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - uses: actions/download-artifact@v4.1.8
+              # 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: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Npm build
+              # TODO: We don't have to build the entire project, just the action itself.
+              run: npm run build:packages
+
+            - name: Report flaky tests
+              uses: ./packages/report-flaky-tests
+              with:
+                  repo-token: '${{ secrets.GITHUB_TOKEN }}'
+                  label: '[Type] Flaky Test'
+                  artifact-path: flaky-tests
diff --git a/.github/workflows/enforce-pr-labels.yml b/.github/workflows/enforce-pr-labels.yml
new file mode 100644
index 00000000000000..7493459a6ff35c
--- /dev/null
+++ b/.github/workflows/enforce-pr-labels.yml
@@ -0,0 +1,18 @@
+name: Enforce labels on Pull Request
+on:
+    pull_request_target:
+        types: [labeled, unlabeled, ready_for_review, review_requested]
+jobs:
+    type-related-labels:
+        runs-on: ubuntu-latest
+        permissions:
+            pull-requests: write
+        steps:
+            - uses: mheap/github-action-required-labels@v5
+              with:
+                  mode: exactly
+                  count: 1
+                  labels: '[Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin'
+                  add_comment: true
+                  message: "**Warning: Type of PR label mismatch**\n\n To merge this PR, it requires {{ errorString }} {{ count }} label indicating the type of PR. Other labels are optional and not being checked here. \n- **Type-related labels to choose from**: {{ provided }}.\n- **Labels found**: {{ applied }}.\n\nRead more about [Type labels in Gutenberg](https://github.com/WordPress/gutenberg/labels?q=type). Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task."
+                  exit_type: failure
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/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
new file mode 100644
index 00000000000000..2bb5676ae9ed66
--- /dev/null
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -0,0 +1,14 @@
+name: 'Validate Gradle Wrapper'
+on: [push, pull_request]
+
+jobs:
+    validation:
+        name: 'Validation'
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+            - name: Validate checksums
+              uses: gradle/actions/wrapper-validation@cc4fc85e6b35bafd578d5ffbc76a5518407e1af0 # v4.2.1
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 675642df3c26c9..4a5b576b424b53 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -6,6 +6,15 @@ on:
         types: [published]
     push:
         branches: [trunk]
+    workflow_dispatch:
+        inputs:
+            branches:
+                description: 'branches or commits to compare (comma separated)'
+                required: true
+            wpversion:
+                description: 'The base WP version to use for the tests (latest or 6.0, 6.1...)'
+                required: false
+                default: 'latest'
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 concurrency:
@@ -16,26 +25,31 @@ concurrency:
 
 jobs:
     performance:
+        timeout-minutes: 60
         name: Run performance tests
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' }}
+        env:
+            WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Npm install
+            - name: Install NVM
               run: |
-                  npm ci
+                  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+                  export NVM_DIR="$HOME/.nvm"
+                  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+                  nvm -v
 
-            - name: Compare performance with trunk
+            - name: Compare performance with base branch
               if: github.event_name == 'pull_request'
-              run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA
+              run: ./bin/plugin/cli.js perf $GITHUB_SHA ${{ github.base_ref }} --tests-branch $GITHUB_SHA
 
             - name: Compare performance with current WordPress Core and previous Gutenberg versions
               if: github.event_name == 'release'
@@ -50,31 +64,49 @@ jobs:
                   WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
 
             - name: Compare performance with base branch
               if: github.event_name == 'push'
               # The base hash used here need to be a commit that is compatible with the current WP version
-              # The current one is debd225d007f4e441ceec80fbd6fa96653f94737 and it needs to be updated every WP major release.
+              # The current one is c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 and it needs to be updated every WP major release.
               # It is used as a base comparison point to avoid fluctuation in the performance metrics.
               run: |
                   WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf $GITHUB_SHA debd225d007f4e441ceec80fbd6fa96653f94737 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf $GITHUB_SHA c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
 
-            - uses: actions/github-script@d556feaca394842dc55e4734bf3bb9f685482fa0 # v6.3.3
-              if: github.event_name == 'push'
-              id: commit-timestamp
+            - name: Compare performance with custom branches
+              if: github.event_name == 'workflow_dispatch'
+              env:
+                  BRANCHES: ${{ github.event.inputs.branches }}
+                  WP_VERSION: ${{ github.event.inputs.wpversion }}
+              run: |
+                  ./bin/plugin/cli.js perf $(echo $BRANCHES | tr ',' ' ') --tests-branch $GITHUB_SHA --wp-version "$WP_VERSION"
+
+            - name: Add workflow summary
+              run: cat ${{ env.WP_ARTIFACTS_PATH }}/summary.md >> $GITHUB_STEP_SUMMARY
+
+            - name: Archive performance results
+              if: success()
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
-                  github-token: ${{secrets.GITHUB_TOKEN}}
-                  script: |
-                      const commit_details = await github.rest.git.getCommit({owner: context.repo.owner, repo: context.repo.repo, commit_sha: context.sha});
-                      return parseInt((new Date( commit_details.data.author.date ).getTime() / 1000).toFixed(0))
+                  name: performance-results
+                  path: ${{ env.WP_ARTIFACTS_PATH }}/*.performance-results*.json
 
             - name: Publish performance results
               if: github.event_name == 'push'
               env:
-                  COMMITTED_AT: ${{ steps.commit-timestamp.outputs.result }}
                   CODEHEALTH_PROJECT_TOKEN: ${{ secrets.CODEHEALTH_PROJECT_TOKEN }}
-              run: ./bin/log-perormance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA debd225d007f4e441ceec80fbd6fa96653f94737 $COMMITTED_AT
+              run: |
+                  COMMITTED_AT=$(git show -s $GITHUB_SHA --format="%cI")
+                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 $COMMITTED_AT
+
+            - name: Archive debug artifacts (screenshots, HTML snapshots)
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+              if: failure()
+              with:
+                  name: failures-artifacts
+                  path: ${{ env.WP_ARTIFACTS_PATH }}
+                  if-no-files-found: ignore
diff --git a/.github/workflows/props-bot.yml b/.github/workflows/props-bot.yml
new file mode 100644
index 00000000000000..b2332aabb816c7
--- /dev/null
+++ b/.github/workflows/props-bot.yml
@@ -0,0 +1,88 @@
+name: Props Bot
+
+on:
+    # This event runs anytime a PR is (re)opened, updated, marked ready for review, or labeled.
+    # GitHub does not allow filtering the `labeled` event by a specific label.
+    # However, the logic below will short-circuit the workflow when the `props-bot` label is not the one being added.
+    # Note: The pull_request_target event is used instead of pull_request because this workflow needs permission to comment
+    # on the pull request. Because this event grants extra permissions to `GITHUB_TOKEN`, any code changes within the PR
+    # should be considered untrusted. See https://securitylab.github.com/research/github-actions-preventing-pwn-requests/.
+    pull_request_target:
+        types:
+            - opened
+            - synchronize
+            - reopened
+            - labeled
+            - ready_for_review
+    # This event runs anytime a comment is added or deleted.
+    # You cannot filter this event for PR comments only.
+    # However, the logic below does short-circuit the workflow for issues.
+    issue_comment:
+        types:
+            - created
+    # This event will run everytime a new PR review is initially submitted.
+    pull_request_review:
+        types:
+            - submitted
+    # This event runs anytime a PR review comment is created or deleted.
+    pull_request_review_comment:
+        types:
+            - created
+
+# 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 }}-${{ contains( fromJSON( '["pull_request_target", "pull_request_review", "pull_request_review_comment"]' ), github.event_name ) && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
+jobs:
+    # Compiles a list of props for a pull request.
+    #
+    # Performs the following steps:
+    # - Collects a list of contributor props and leaves a comment.
+    # - Removes the props-bot label, if necessary.
+    props-bot:
+        name: Generate a list of props
+        runs-on: ubuntu-latest
+        permissions:
+            # The action needs permission `write` permission for PRs in order to add a comment.
+            pull-requests: write
+            contents: read
+        timeout-minutes: 20
+        # The job will run when pull requests are open, ready for review and:
+        #
+        # - A comment is added to the pull request.
+        # - A review is created or commented on.
+        # - The pull request is opened, synchronized, marked ready for review, or reopened.
+        # - The `props-bot` label is added to the pull request.
+        if: |
+            (
+              github.event_name == 'issue_comment' && github.event.issue.pull_request ||
+              contains( fromJSON( '["pull_request_review", "pull_request_review_comment"]' ), github.event_name ) ||
+              github.event_name == 'pull_request_target' && github.event.action != 'labeled' ||
+              'props-bot' == github.event.label.name
+            ) &&
+            ( ! github.event.pull_request.draft && github.event.pull_request.state == 'open' || ! github.event.issue.draft && github.event.issue.state == 'open' )
+
+        steps:
+            - name: Gather a list of contributors
+              uses: WordPress/props-bot-action@trunk
+
+            - name: Remove the props-bot label
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              if: ${{ github.event.action == 'labeled' && 'props-bot' == github.event.label.name }}
+              with:
+                  retries: 2
+                  retry-exempt-status-codes: 418
+                  script: |
+                      github.rest.issues.removeLabel({
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        issue_number: '${{ github.event.number }}',
+                        name: 'props-bot'
+                      });
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 5a8249e1d1be9c..11cff85f4717a7 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -30,18 +30,34 @@ jobs:
         environment: WordPress packages
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              if: ${{ github.event.inputs.release_type != 'wp' }}
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
-                  path: main
+                  path: cli
                   ref: trunk
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              if: ${{ github.event.inputs.release_type != 'wp' }}
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
                   ref: trunk
                   token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Checkout (for publishing WP major version)
+              if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  path: publish
+                  ref: wp/${{ github.event.inputs.wp_version }}
+                  # We need to ensure that Lerna can read the commit created during the previous npm publishing.
+                  # Lerna assumes that all packages need publishing if it can't access the necessary information.
+                  fetch-depth: 999
+                  token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Configure git user name and email (for publishing)
               run: |
@@ -49,16 +65,26 @@ jobs:
                   git config user.name "Gutenberg Repository Automation"
                   git config user.email gutenberg@wordpress.org
 
-            - name: Setup Node (for CLI)
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Setup Node.js
+              if: ${{ github.event.inputs.release_type != 'wp' }}
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
               with:
-                  node-version-file: 'main/.nvmrc'
+                  node-version-file: 'cli/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
+
+            - name: Setup Node.js (for WP major version)
+              if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+              with:
+                  node-version-file: 'publish/.nvmrc'
+                  registry-url: 'https://registry.npmjs.org'
+                  check-latest: true
 
             - name: Publish development packages to npm ("next" dist-tag)
               if: ${{ github.event.inputs.release_type == 'development' }}
               run: |
-                  cd main
+                  cd cli
                   npm ci
                   ./bin/plugin/cli.js npm-next --ci --repository-path ../publish
               env:
@@ -67,17 +93,17 @@ jobs:
             - name: Publish packages to npm with bug fixes ("latest" dist-tag)
               if: ${{ github.event.inputs.release_type == 'bugfix' }}
               run: |
-                  cd main
+                  cd cli
                   npm ci
                   ./bin/plugin/cli.js npm-bugfix --ci --repository-path ../publish
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-            - name: Publish packages to npm for WP major ("wp/${{ github.event.inputs.wp_version || 'X.Y' }}" dist-tag)
+            - name: Publish packages to npm for WP major version ("wp/${{ github.event.inputs.wp_version || 'X.Y' }}" dist-tag)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
               run: |
-                  cd main
+                  cd publish
                   npm ci
-                  ./bin/plugin/cli.js npm-wp --wp-version=${{ github.event.inputs.wp_version }} --ci --repository-path ../publish
+                  npx lerna publish patch --dist-tag wp-${{ github.event.inputs.wp_version }} --no-private --yes --no-verify-access
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index e6e4f1bdfb84ec..e1a3defc641aa3 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -8,34 +8,17 @@ jobs:
     pull-request-automation:
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' }}
-        strategy:
-            matrix:
-                node: ['14']
 
         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
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   ref: trunk
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version: ${{ matrix.node }}
-
-            - name: Cache NPM packages
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
-              with:
-                  # npm cache files are stored in `~/.npm` on Linux/macOS
-                  path: ~/.npm
-                  key: ${{ runner.os }}-node-${{ matrix.node }}-npm-pr-automation-cache-${{ hashFiles('**/package-lock.json') }}
-
-            # Changing into the action's directory and running `npm install` is much
-            # faster than a full project-wide `npm ci`.
-            - name: Install NPM dependencies
-              run: npm install
-              working-directory: packages/project-management-automation
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - uses: ./packages/project-management-automation
               with:
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 093c2a99ad4a07..f8ff0441a95b7b 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -18,53 +18,62 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             matrix:
-                native-test-name: [gutenberg-editor-initial-html]
+                native-test-name: [gutenberg-editor-rendering]
                 api-level: [29]
 
         steps:
             - name: checkout
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Java
-              uses: actions/setup-java@de1bb2b0c5634f0fc4438d7aa9944e68f9bf86cc # v3.6.0
+              uses: actions/setup-java@8df1039502a15bceb9433410b1a100fbe190c53b # v4.5.0
               with:
-                  distribution: 'temurin'
-                  java-version: '11'
+                  distribution: 'corretto'
+                  java-version: '17'
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Restore tests setup cache
+              uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  path: |
+                      ~/.appium
+                  key: ${{ runner.os }}-tests-setup-${{ hashFiles('package-lock.json') }}
 
-            - run: npm ci
+            - name: Prepare tests setup
+              run: npm run native test:e2e:setup
 
             - name: Gradle cache
-              uses: gradle/gradle-build-action@3fbe033aaae657f011f88f29be9e65ed26bd29ef # v2.3.3
-
-            - name: AVD cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
-              id: avd-cache
-              with:
-                  path: |
-                      ~/.android/avd/*
-                      ~/.android/adb*
-                  key: avd-${{ matrix.api-level }}
+              uses: gradle/actions/setup-gradle@cc4fc85e6b35bafd578d5ffbc76a5518407e1af0 # v4.2.1
 
-            - name: Create AVD and generate snapshot for caching
-              if: steps.avd-cache.outputs.cache-hit != 'true'
-              uses: reactivecircus/android-emulator-runner@50986b1464923454c95e261820bc626f38490ec0 # v2.27.0
-              with:
-                  api-level: ${{ matrix.api-level }}
-                  force-avd-creation: false
-                  emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
-                  disable-animations: false
-                  arch: x86_64
-                  profile: Nexus 6
-                  script: echo "Generated AVD snapshot for caching."
+            # AVD cache disabled as it caused emulator termination to hang indefinitely.
+            # https://github.com/ReactiveCircus/android-emulator-runner/issues/385
+            # - name: AVD cache
+            #   uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+            #   id: avd-cache
+            #   with:
+            #       path: |
+            #           ~/.android/avd/*
+            #           ~/.android/adb*
+            #       key: avd-${{ matrix.api-level }}
+            #
+            # - name: Create AVD and generate snapshot for caching
+            #   if: steps.avd-cache.outputs.cache-hit != 'true'
+            #   uses: reactivecircus/android-emulator-runner@62dbb605bba737720e10b196cb4220d374026a6d # v2.33.0
+            #   with:
+            #       api-level: ${{ matrix.api-level }}
+            #       force-avd-creation: false
+            #       emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+            #       disable-animations: false
+            #       arch: x86_64
+            #       profile: Nexus 6
+            #       script: echo "Generated AVD snapshot for caching."
 
             - name: Run tests
-              uses: reactivecircus/android-emulator-runner@50986b1464923454c95e261820bc626f38490ec0 # v2.27.0
+              uses: reactivecircus/android-emulator-runner@62dbb605bba737720e10b196cb4220d374026a6d # v2.33.0
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
@@ -74,13 +83,13 @@ jobs:
                   profile: Nexus 6
                   script: npm run native test:e2e:android:local ${{ matrix.native-test-name }}
 
-            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+            - uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               if: always()
               with:
                   name: android-screen-recordings
                   path: packages/react-native-editor/android-screen-recordings
 
-            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+            - uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               if: always()
               with:
                   name: appium-logs
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 36dc3a5dc30c9e..d28ee65c719e43 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -14,30 +14,48 @@ concurrency:
 
 jobs:
     test:
-        runs-on: macos-11
+        runs-on: macos-12
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             matrix:
-                xcode: ['13.2.1']
-                device: ['iPhone 13']
-                native-test-name: [gutenberg-editor-initial-html]
+                xcode: ['14.2']
+                device: ['iPhone 14']
+                native-test-name: [gutenberg-editor-rendering]
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - uses: ruby/setup-ruby@a2bbe5b1b236842c1cb7dd11e8e3b51e0a616acc # v1.202.0
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  # `.ruby-version` file location
+                  working-directory: packages/react-native-editor/ios
+
+            - name: Switch Xcode version to ${{ matrix.xcode }}
+              run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app
 
-            - run: npm ci
+            - name: Launch simulator
+              run: (open -a Simulator && xcrun simctl boot '${{ matrix.device }}') &
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Restore tests setup cache
+              uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+              with:
+                  path: |
+                      ~/.appium
+                  key: ${{ runner.os }}-tests-setup-${{ hashFiles('package-lock.json') }}
+
+            - name: Prepare tests setup
+              run: npm run native test:e2e:setup
 
             - name: Prepare build cache key
               run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt
 
             - name: Restore build cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
               with:
                   path: |
                       packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app
@@ -45,7 +63,7 @@ jobs:
                   key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }}
 
             - name: Restore pods cache
-              uses: actions/cache@9b0c1fce7a93df8e3bb8926b0d6e9d89e92f20a7 # v3.0.11
+              uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
               with:
                   path: |
                       packages/react-native-editor/ios/Pods
@@ -57,18 +75,12 @@ jobs:
             - name: Bundle iOS
               run: npm run native test:e2e:bundle:ios
 
-            - name: Switch Xcode version to ${{ matrix.xcode }}
-              run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app
-
             - name: Build (if needed)
               run: test -e packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/GutenbergDemo || npm run native test:e2e:build-app:ios
 
             - name: Build Web Driver Agent (if needed)
               run: test -d packages/react-native-editor/ios/build/WDA || npm run native test:e2e:build-wda
 
-            - name: Force update Launch Database to prevent issues when opening the Simulator app
-              run: /System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -f /Applications/Xcode_${{ matrix.xcode }}.app/Contents/Developer/Applications/Simulator.app
-
             - name: Run iOS Device Tests
               run: TEST_RN_PLATFORM=ios npm run native device-tests:local  ${{ matrix.native-test-name }}
 
@@ -77,13 +89,13 @@ jobs:
                   rm packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle
                   rm -rf packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/assets
 
-            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+            - uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               if: always()
               with:
                   name: ios-screen-recordings
                   path: packages/react-native-editor/ios-screen-recordings
 
-            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+            - uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               if: always()
               with:
                   name: appium-logs
diff --git a/.github/workflows/stale-issue-gardening.yml b/.github/workflows/stale-issue-gardening.yml
index bcf72182262ba1..c73fe7a19b24b3 100644
--- a/.github/workflows/stale-issue-gardening.yml
+++ b/.github/workflows/stale-issue-gardening.yml
@@ -27,22 +27,16 @@ jobs:
                       remove-stale-when-updated: true
                       stale-issue-label: '[Status] Stale'
                     - name: 'Flaky test issues without activity'
-                      message: 'This issue has gone 30 days without any activity.'
-                      days-before-stale: 30
+                      message: 'This issue has gone 15 days without any activity.'
+                      days-before-stale: 15
                       days-before-close: 1
                       only-labels: '[Type] Flaky Test'
                       remove-stale-when-updated: true
                       stale-issue-label: '[Status] Stale'
-                    - name: 'Issues without recent updates that need confirmation'
-                      message: "Hi,\nThis issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.\nThanks for helping out."
-                      days-before-stale: 180
-                      days-before-close: -1
-                      remove-stale-when-updated: false
-                      stale-issue-label: 'Needs Testing'
 
         steps:
             - name: Update issues
-              uses: actions/stale@5ebf00ea0e4c1561e9b43a292ed34424fb1d4578 # v6.0.1
+              uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
               with:
                   repo-token: ${{ secrets.GITHUB_TOKEN }}
                   stale-issue-message: ${{ matrix.message }}
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 4abc1f1a354d8e..baf97e8d390e91 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,12 +22,15 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Use desired version of Node.js
+              uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
               with:
                   node-version-file: '.nvmrc'
+                  check-latest: true
                   cache: npm
 
             - name: Npm install
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index e0ce7283b28bad..4af4934cf0325b 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,24 +12,19 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   ref: trunk
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
-              with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
-
-            - name: Install Dependencies
-              run: npm ci
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
             - name: Build Storybook
               run: npm run storybook:build
 
             - name: Deploy
-              uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935 # v3.9.0
+              uses: peaceiris/actions-gh-pages@4f9cc6602d3f66b9c108549d475ec49e8ef4d45e # v4.0.0
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   publish_dir: ./storybook/build
diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml
new file mode 100644
index 00000000000000..e530ca667de3d7
--- /dev/null
+++ b/.github/workflows/sync-backport-changelog.yml
@@ -0,0 +1,91 @@
+name: Sync Core Backport Issue
+
+on:
+    push:
+        branches:
+            - trunk
+    issues:
+        types: [labeled]
+
+jobs:
+    sync-backport-changelog:
+        name: Sync Core Backport Issue
+        runs-on: ubuntu-latest
+        if: >
+            github.event_name == 'push' ||
+            (
+                github.event_name == 'issues' &&
+                github.event.action == 'labeled' &&
+                github.event.label.name == '🤖 Sync Backport Changelog'
+            )
+        steps:
+            - name: Checkout
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  fetch-depth: 2 # Fetch the last two commits to compare changes
+            - name: Check for changes in backport-changelog
+              if: github.event_name == 'push'
+              run: |
+                  if git diff --quiet HEAD^ HEAD -- backport-changelog; then
+                      echo "skip_sync=true" >> "$GITHUB_ENV"
+                  fi
+            - name: Sync Issue
+              if: ${{ ! env.skip_sync }}
+              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+              with:
+                  script: |
+                      const labelName = '🤖 Sync Backport Changelog';
+                      const issues = await github.paginate(github.rest.issues.listForRepo, {
+                        owner: context.repo.owner,
+                        repo: context.repo.repo,
+                        labels: [labelName],
+                        state: 'open',
+                        per_page: 1,
+                      });
+
+                      if (issues.length === 0) {
+                        console.log(`No issues found with the "${labelName}" label.`);
+                        return;
+                      }
+
+                      const [latestIssue] = issues;
+                      const versionMatch = latestIssue.title.match(/(\d+\.\d+)/);
+                      if (!versionMatch) {
+                        console.log('Could not find a version number in the latest issue title.');
+                        return;
+                      }
+
+                      const version = versionMatch[1];
+                      console.log(`Latest version: ${version}`);
+
+                      const { execSync } = require('child_process');
+                      const processedChangelog = execSync(`awk '/./ {print ($0 ~ /^[-*]/ ? "  " : "- ") $0}' backport-changelog/${version}/*.md`).toString().trim();
+
+                      const startDelimiter = '<!-- START TRUNK BACKPORT CHANGELOG -->';
+                      const endDelimiter = '<!-- END TRUNK BACKPORT CHANGELOG -->';
+                      const autoGeneratedContent = `${startDelimiter}\n${processedChangelog}\n${endDelimiter}`;
+
+                      const existingBody = latestIssue.body ?? '';
+
+                      let newBody;
+
+                      const regex = new RegExp(`${startDelimiter}[\\s\\S]*${endDelimiter}`);
+                      if (regex.test(existingBody)) {
+                        // If delimiters exist, replace the content between them
+                        newBody = existingBody.replace(regex, autoGeneratedContent);
+                      } else {
+                        // If delimiters don't exist, append the new content at the end
+                        newBody = `${existingBody}\n\n${autoGeneratedContent}`;
+                      }
+
+                      if (newBody.trim() !== existingBody.trim()) {
+                        await github.rest.issues.update({
+                          owner: context.repo.owner,
+                          repo: context.repo.repo,
+                          issue_number: latestIssue.number,
+                          body: newBody
+                        });
+                        console.log('Issue description updated successfully.');
+                      } else {
+                        console.log('Issue description is already up to date.');
+                      }
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index c1fd9850191da7..46aa109c23e658 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -9,6 +9,8 @@ on:
             - trunk
             - 'release/**'
             - 'wp/**'
+    # Allow manually triggering the workflow.
+    workflow_dispatch:
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 concurrency:
@@ -19,71 +21,325 @@ concurrency:
 
 jobs:
     unit-js:
-        name: JavaScript
+        name: JavaScript (Node.js ${{ matrix.node }}) ${{ matrix.shard }}
         runs-on: ubuntu-latest
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        strategy:
+            fail-fast: false
+            matrix:
+                node: ['20', '22']
+                shard: ['1/4', '2/4', '3/4', '4/4']
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+              with:
+                  node-version: ${{ matrix.node }}
+
+            - name: Determine the number of CPU cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
+              id: cpu-cores
 
+            - name: Run build scripts
+              # It's not necessary to run the full build, since Jest can interpret
+              # source files with `babel-jest`. Some packages have their own custom
+              # build tasks, however. These must be run.
+              run: npx lerna run build
+
+            - name: Running the tests
+              run: |
+                  npm run test:unit -- \
+                    --ci \
+                    --maxWorkers="${{ steps.cpu-cores.outputs.count }}" \
+                    --shard="${{ matrix.shard }}" \
+                    --cacheDirectory="$HOME/.jest-cache"
+
+    unit-js-date:
+        name: JavaScript Date Tests (Node.js ${{ matrix.node }})
+        runs-on: ubuntu-latest
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
             matrix:
-                node: ['14']
+                node: ['20', '22']
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
               with:
                   node-version: ${{ matrix.node }}
-                  cache: npm
 
-            - name: Npm install and build
+            - name: Determine the number of CPU cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
+              id: cpu-cores
+
+            - name: Run build scripts
               # It's not necessary to run the full build, since Jest can interpret
               # source files with `babel-jest`. Some packages have their own custom
               # build tasks, however. These must be run.
+              run: npx lerna run build
+
+            - name: Run the date tests
+              run: npm run test:unit:date -- --ci --maxWorkers=${{ steps.cpu-cores.outputs.count }} --cacheDirectory="$HOME/.jest-cache"
+
+    compute-previous-wordpress-version:
+        name: Compute previous WordPress version
+        runs-on: ubuntu-latest
+        outputs:
+            previous-wordpress-version: ${{ steps.get-previous-wordpress-version.outputs.previous-wordpress-version }}
+
+        steps:
+            - name: Get previous WordPress version
+              id: get-previous-wordpress-version
               run: |
-                  npm ci
-                  npx lerna run build
+                  curl \
+                    -H "Accept: application/json" \
+                    -o versions.json \
+                    "http://api.wordpress.org/core/stable-check/1.0/"
+                  LATEST_WP_VERSION=$(jq --raw-output 'with_entries(select(.value=="latest"))|keys[]' versions.json)
+                  IFS='.' read LATEST_WP_MAJOR LATEST_WP_MINOR LATEST_WP_PATCH <<< "${LATEST_WP_VERSION}"
+                  if [[ ${LATEST_WP_MINOR} == "0" ]]; then
+                    PREVIOUS_WP_SERIES="$((LATEST_WP_MAJOR - 1)).9"
+                  else
+                    PREVIOUS_WP_SERIES="${LATEST_WP_MAJOR}.$((LATEST_WP_MINOR - 1))"
+                  fi
+                  PREVIOUS_WP_VERSION=$(jq --raw-output --arg series "${PREVIOUS_WP_SERIES}" 'with_entries(select(.key|startswith($series)))|keys[-1]' versions.json)
+                  echo "previous-wordpress-version=${PREVIOUS_WP_VERSION}" >> $GITHUB_OUTPUT
+                  rm versions.json
 
-            - name: Running the tests
-              run: npm run test:unit -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+    build-assets:
+        name: Build JavaScript assets for PHP unit tests
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - name: Running the date tests
-              run: npm run test:unit:date -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-    unit-php:
-        name: PHP
+            - name: Run build scripts
+              run: npm run build
+
+            - name: Upload built JavaScript assets
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
+              with:
+                  name: build-assets
+                  path: |
+                      ./build/
+                      ./build-module/
+
+    test-php:
+        name: PHP ${{ matrix.php }}${{ matrix.multisite && ' multisite' || '' }}${{ matrix.wordpress != '' && format( ' (WP {0}) ', matrix.wordpress ) || '' }} on ubuntu-latest
+        needs: [compute-previous-wordpress-version, build-assets]
         runs-on: ubuntu-latest
+        timeout-minutes: 20
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        strategy:
+            fail-fast: true
+            matrix:
+                php:
+                    - '7.2'
+                    - '7.3'
+                    - '7.4'
+                    - '8.0'
+                    - '8.1'
+                    - '8.2'
+                    - '8.3'
+                multisite: [false, true]
+                wordpress: [''] # Latest WordPress version.
+                include:
+                    # Test with the previous WP version.
+                    - php: '7.2'
+                      wordpress: 'previous major version'
+                    - php: '7.4'
+                      wordpress: 'previous major version'
+                    - php: '8.3'
+                      wordpress: 'previous major version'
+
+        env:
+            WP_ENV_PHP_VERSION: ${{ matrix.php }}
+            WP_ENV_CORE: ${{ matrix.wordpress == '' && 'WordPress/WordPress' || format( 'https://wordpress.org/wordpress-{0}.zip', needs.compute-previous-wordpress-version.outputs.previous-wordpress-version ) }}
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
 
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            ##
+            # This allows Composer dependencies to be installed using a single step.
+            #
+            # Since the tests are currently run within the Docker containers where the PHP version varies,
+            # the same PHP version needs to be configured for the action runner machine so that the correct
+            # dependency versions are installed and cached.
+            ##
+            - name: Set up PHP
+              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  php-version: '${{ matrix.php }}'
+                  ini-file: development
+                  coverage: none
 
-            - name: Npm install and build
+            # Ensure that Composer installs the correct versions of packages.
+            - name: Override PHP version in composer.json
+              run: composer config platform.php ${{ matrix.php }}
+
+            # Since Composer dependencies are installed using `composer update` and no lock file is in version control,
+            # passing a custom cache suffix ensures that the cache is flushed at least once per week.
+            - name: Install Composer dependencies
+              uses: ramsey/composer-install@57532f8be5bda426838819c5ee9afb8af389d51a # v3.0.0
+              with:
+                  custom-cache-suffix: $(/bin/date -u --date='last Mon' "+%F")
+
+            - name: Download built JavaScript assets
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
+              with:
+                  name: build-assets
+
+            - name: Docker debug information
               run: |
-                  npm ci
-                  npm run build
+                  docker -v
 
-            - name: Install WordPress
+            - name: General debug information
               run: |
-                  npm run wp-env start
+                  npm --version
+                  node --version
+                  curl --version
+                  git --version
+                  locale -a
 
-            - name: Running lint check
-              run: npm run lint:php
+            - name: Start Docker environment
+              run: npm run wp-env start
+
+            - name: Log running Docker containers
+              run: docker ps -a
+
+            - name: Docker container debug information
+              run: |
+                  npm run wp-env run tests-mysql mysql -- --version
+                  npm run wp-env run tests-wordpress php -- --version
+                  npm run wp-env run tests-wordpress php -m
+                  npm run wp-env run tests-wordpress php -i
+                  npm run wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -- --version
+                  npm run wp-env run tests-wordpress locale -a
+                  npm run wp-env run tests-cli wp core version
 
             - name: Running single site unit tests
-              run: npm run test:unit:php
-              if: ${{ success() || failure() }}
+              if: ${{ ! matrix.multisite }}
+              run: |
+                  set -o pipefail
+                  npm run test:unit:php | tee phpunit.log
 
             - name: Running multisite unit tests
-              run: npm run test:unit:php:multisite
-              if: ${{ success() || failure() }}
+              if: ${{ matrix.multisite }}
+              run: |
+                  set -o pipefail
+                  npm run test:unit:php:multisite | tee phpunit.log
+
+            # Verifies that PHPUnit actually runs in the first place. We want visibility
+            # into issues which can cause it to fail silently, so we check the output
+            # to verify that at least 500 tests have passed. This is an arbitrary
+            # number, but makes sure a drastic change doesn't happen without us noticing.
+            - name: Check number of passed tests
+              run: |
+                  # Note: relies on PHPUnit execution to fail on test failure.
+                  # Extract the number of executed tests from the log file.
+                  if ! num_tests=$(grep -Eo 'OK \([0-9]+ tests' phpunit.log) ; then
+                    if ! num_tests=$(grep -Eo 'Tests: [0-9]+, Assertions:' phpunit.log) ; then
+                      echo "PHPUnit failed or did not run. Check the PHPUnit output in the previous step to debug." && exit 1
+                    fi
+                  fi
+                  # Extract just the number of tests from the string.
+                  num_tests=$(echo "$num_tests" | grep -Eo '[0-9]+')
+                  if [ $num_tests -lt 500 ] ; then
+                    echo "Only $num_tests tests passed, which is much fewer than expected." && exit 1
+                  fi
+                  echo "$num_tests tests passed."
+
+    phpcs:
+        name: PHP coding standards
+        runs-on: ubuntu-latest
+        timeout-minutes: 20
+        if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Set up PHP
+              uses: shivammathur/setup-php@c541c155eee45413f5b09a52248675b1a2575231 # v2.31.1
+              with:
+                  php-version: '7.4'
+                  coverage: none
+                  tools: cs2pr
+
+            # This date is used to ensure that the PHPCS cache is cleared at least once every week.
+            # http://man7.org/linux/man-pages/man1/date.1.html
+            - name: "Get last Monday's date"
+              id: get-date
+              run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT
+
+            - name: Cache PHPCS scan cache
+              uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+              with:
+                  path: .cache/phpcs.json
+                  key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }}
+
+            # Since Composer dependencies are installed using `composer update` and no lock file is in version control,
+            # passing a custom cache suffix ensures that the cache is flushed at least once per week.
+            - name: Install Composer dependencies
+              uses: ramsey/composer-install@57532f8be5bda426838819c5ee9afb8af389d51a # v3.0.0
+              with:
+                  custom-cache-suffix: ${{ steps.get-date.outputs.date }}
+
+            - name: Make Composer packages available globally
+              run: echo "${PWD}/vendor/bin" >> $GITHUB_PATH
+
+            - name: Run PHPCS on all Gutenberg files
+              id: phpcs-gutenberg
+              run: phpcs --report-full --report-checkstyle=./.cache/phpcs-report.xml
+
+            - name: Show PHPCS results in PR
+              if: ${{ always() && steps.phpcs-gutenberg.outcome == 'failure' }}
+              run: cs2pr ./.cache/phpcs-report.xml
+
+            - name: Ensure version-controlled files are not modified during the tests
+              run: git diff --exit-code
+
+    # This job is deprecated but be present for compatibility reasons.
+    unit-php:
+        name: PHP
+        runs-on: ubuntu-latest
+        needs: [test-php, phpcs]
+        if: ${{ always() }}
+        steps:
+            - name: Fail the job if the PHPUnit tests fail
+              if: ${{ needs.test-php.result != 'success' }}
+              run: exit 1
+
+            - name: "Fail the job if the code doesn't conform to the coding standards"
+              if: ${{ needs.phpcs.result != 'success' }}
+              run: exit 1
+
+            - name: Mark the job as passed if all the checks pass
+              if: ${{ needs.test-php.result == 'success' && needs.phpcs.result == 'success' }}
+              run: exit 0
 
     mobile-unit-js:
         name: Mobile
@@ -91,21 +347,23 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
-
-            - name: Use desired version of NodeJS
-              uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
-                  node-version-file: '.nvmrc'
-                  cache: npm
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            - name: Determine the number of CPU cores
+              uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
+              id: cpu-cores
 
-            - name: Npm install and build
+            - name: Setup Node.js and install dependencies
+              uses: ./.github/setup-node
+
+            - name: Run build scripts
               # It's not necessary to run the full build, since Jest can interpret
               # source files with `babel-jest`. Some packages have their own custom
               # build tasks, however. These must be run.
-              run: |
-                  npm ci
-                  npx lerna run build
+              run: npx lerna run build
 
             - name: Running the tests
-              run: npm run native test -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+              run: npm run test:native -- --ci --maxWorkers=${{ steps.cpu-cores.outputs.count }} --cacheDirectory="$HOME/.jest-cache"
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index a09a27be328cc3..e866964e69b2d1 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -5,10 +5,66 @@ on:
         types: [published]
 
 jobs:
+    compute-should-update-trunk:
+        name: Decide if trunk or tag
+        runs-on: ubuntu-latest
+        # Skip this job if the release is a release candidate. This will in turn skip
+        # the upload jobs, which are only relevant for non-RC releases.
+        # We first check if the release is a prerelease, and then if the ref contains
+        # the string "rc". The latter is fallback in case the deployer accidentally
+        # unchecks the "This is a pre-release" checkbox in the release UI.
+        if: |
+            !github.event.release.prerelease && !contains(github.ref, 'rc')
+
+        outputs:
+            should_update_trunk: ${{ steps.compute_should_update_trunk.outputs.should_update_trunk }}
+
+        steps:
+            - name: Fetch latest version in the WP core repo
+              id: compute_latest_version_in_core_repo
+              run: |
+                  latest_version_in_core_repo=$(curl -s 'https://api.wordpress.org/plugins/info/1.2/?action=plugin_information&request\[slug\]=gutenberg' | jq -r '.version')
+                  echo "Latest Core Repo version: $latest_version_in_core_repo"
+                  echo "version=$latest_version_in_core_repo" >> $GITHUB_OUTPUT
+
+            - name: Decide if it is a trunk or tag update
+              id: compute_should_update_trunk
+              env:
+                  GITHUB_REF: ${{ github.ref }}
+              run: |
+                  latestPublishedVersion=$(echo "$GITHUB_REF" | sed -E 's/refs\/tags\/(v?)([0-9.]+)/\2/')
+                  latestVersionInCoreRepo="${{ steps.compute_latest_version_in_core_repo.outputs.version }}"
+
+                  # Determines if the first version string is greater than the second version string.
+                  #
+                  # Params:
+                  #   $1 - The first version string to compare, which may have an optional leading "v".
+                  #   $2 - The second version string to compare, which may have an optional leading "v".
+                  #
+                  # Return values:
+                  #   0 - The first version string is greater than the second version string.
+                  #   1 - The first version string is less than or equal to the second version string.
+                  is_first_version_greater_than_second() {
+                    v1=${1#v}
+                    v2=${2#v}
+                    dpkg --compare-versions "$v1" gt "$v2"
+                    return $?
+                  }
+
+                  # Only update trunk *if* the published release's version in GitHub is GREATER
+                  # than the version currently published in the WP plugins repo. If not, then it
+                  # will upload it as a new tag.
+                  shouldUpdateTrunk=false
+                  if is_first_version_greater_than_second "$latestPublishedVersion" "$latestVersionInCoreRepo"; then
+                     shouldUpdateTrunk=true
+                  fi
+
+                  echo "Should update trunk: $shouldUpdateTrunk"
+                  echo "should_update_trunk=$shouldUpdateTrunk" >> $GITHUB_OUTPUT
+
     get-release-branch:
         name: Get release branch name
         runs-on: ubuntu-latest
-        if: github.event.release.assets[0]
         outputs:
             release_branch: ${{ steps.get_release_branch.outputs.release_branch }}
 
@@ -25,7 +81,8 @@ jobs:
     update-changelog:
         name: Update Changelog on ${{ matrix.branch }} branch
         runs-on: ubuntu-latest
-        if: github.event.release.assets[0]
+        if: |
+            github.event.release.assets[0]
         needs: get-release-branch
         env:
             TAG: ${{ github.event.release.tag_name }}
@@ -39,10 +96,11 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Update the Changelog to include the release notes
               run: |
@@ -89,17 +147,18 @@ jobs:
                   fi
 
             - name: Upload Changelog artifact
-              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
+              uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: changelog ${{ matrix.label }}
                   path: ./changelog.txt
 
     upload:
-        name: Upload Gutenberg Plugin
+        name: Publish as trunk (and tag)
         runs-on: ubuntu-latest
         environment: wp.org plugin
-        needs: update-changelog
-        if: ${{ !github.event.release.prerelease && github.event.release.assets[0] }}
+        needs: [compute-should-update-trunk, update-changelog]
+        if: |
+            needs.compute-should-update-trunk.outputs.should_update_trunk == 'true' && github.event.release.assets[0]
         env:
             PLUGIN_REPO_URL: 'https://plugins.svn.wordpress.org/gutenberg'
             STABLE_VERSION_REGEX: '[0-9]\+\.[0-9]\+\.[0-9]\+\s*'
@@ -109,11 +168,7 @@ jobs:
 
         steps:
             - name: Check out Gutenberg trunk from WP.org plugin repo
-              run: svn checkout "$PLUGIN_REPO_URL/trunk"
-
-            - name: Get previous stable version
-              id: get_previous_stable_version
-              run: echo "stable_version=$(awk -F ':\ ' '$1 == "Stable tag" {print $2}' ./trunk/readme.txt)" >> $GITHUB_OUTPUT
+              run: svn checkout "$PLUGIN_REPO_URL/trunk" --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
 
             - name: Delete everything
               working-directory: ./trunk
@@ -130,11 +185,11 @@ jobs:
             - name: Replace the stable tag placeholder with the existing stable tag on the SVN repository
               env:
                   STABLE_TAG_PLACEHOLDER: 'Stable tag: V\.V\.V'
-                  STABLE_TAG: 'Stable tag: ${{ steps.get_previous_stable_version.outputs.stable_version }}'
-              run: sed -i "s/${STABLE_TAG_PLACEHOLDER}/${STABLE_TAG}/g" ./trunk/readme.txt
+              run: |
+                  sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" ./trunk/readme.txt
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: changelog trunk
                   path: trunk
@@ -145,7 +200,8 @@ jobs:
                   svn st | grep '^?' | awk '{print $2}' | xargs -r svn add
                   svn st | grep '^!' | awk '{print $2}' | xargs -r svn rm
                   svn commit -m "Committing version $VERSION" \
-                   --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
+                   --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD" \
+                   --config-option=servers:global:http-timeout=300
 
             - name: Create the SVN tag
               working-directory: ./trunk
@@ -159,3 +215,45 @@ jobs:
                   sed -i "s/Stable tag: ${STABLE_VERSION_REGEX}/Stable tag: ${VERSION}/g" ./readme.txt
                   svn commit -m "Releasing version $VERSION" \
                    --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
+
+    upload-tag:
+        name: Publish as tag
+        runs-on: ubuntu-latest
+        environment: wp.org plugin
+        needs: [compute-should-update-trunk, update-changelog]
+        if: |
+            needs.compute-should-update-trunk.outputs.should_update_trunk == 'false' && github.event.release.assets[0]
+        env:
+            PLUGIN_REPO_URL: 'https://plugins.svn.wordpress.org/gutenberg'
+            STABLE_VERSION_REGEX: '[0-9]\+\.[0-9]\+\.[0-9]\+\s*'
+            SVN_USERNAME: ${{ secrets.svn_username }}
+            SVN_PASSWORD: ${{ secrets.svn_password }}
+            VERSION: ${{ github.event.release.name }}
+
+        steps:
+            - name: Download and unzip Gutenberg plugin asset into tags folder
+              env:
+                  PLUGIN_URL: ${{ github.event.release.assets[0].browser_download_url }}
+              run: |
+                  # do the magic here
+                  curl -L -o gutenberg.zip $PLUGIN_URL
+                  unzip gutenberg.zip -d "$VERSION"
+                  rm gutenberg.zip
+
+            - name: Replace the stable tag placeholder with the existing stable tag on the SVN repository
+              env:
+                  STABLE_TAG_PLACEHOLDER: 'Stable tag: V\.V\.V'
+              run: |
+                  sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" "$VERSION/readme.txt"
+
+            - name: Download Changelog Artifact
+              uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
+              with:
+                  name: changelog trunk
+                  path: ${{ github.event.release.name }}
+
+            - name: Add the new version directory and commit changes to the SVN repository
+              run: |
+                  svn import "$VERSION" "$PLUGIN_REPO_URL/tags/$VERSION" -m "Committing version $VERSION" \
+                  --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD" \
+                  --config-option=servers:global:http-timeout=300
diff --git a/.gitignore b/.gitignore
index aebfcd623ad2f0..1d75f9f429d869 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,20 +3,31 @@ build
 build-module
 build-style
 build-types
+build-wp
 node_modules
 gutenberg.zip
 coverage
-*-performance-results.json
 .phpunit.result.cache
+.reassure
+
 
 # Directories/files that may appear in your environment
 *.log
 yarn.lock
+results
 /artifacts
+/test/e2e/artifacts
 /perf-envs
 /composer.lock
 
+# The /.cache folder is needed for phpcs to cache results between runs, while other .cache folders must be ignored
+# It is not possible to re-include a file if a parent directory of that file is excluded
+# So, both /.cache and /.cache./.gitkeep must be re-included
 .cache
+!/.cache/
+/.cache/**
+!/.cache/.gitkeep
+
 .eslintcache
 *.tsbuildinfo
 
@@ -25,13 +36,19 @@ yarn.lock
 Thumbs.db
 
 # Report generated from jest-junit
-test/native/junit.xml
+junit.xml
 
 # Local overrides
 .wp-env.override.json
+playwright.config.override.ts
 phpcs.xml
 phpunit.xml
 phpunit-watcher.yml
 .tool-versions
 test/storybook-playwright/test-results
 test/storybook-playwright/specs/__snapshots__
+test/storybook-playwright/specs/*-snapshots/**
+test/gutenberg-test-themes/twentytwentyone
+test/gutenberg-test-themes/twentytwentythree
+test/gutenberg-test-themes/twentytwentyfour
+packages/react-native-editor/src/setup-local.js
diff --git a/.npmpackagejsonlintrc.json b/.npmpackagejsonlintrc.json
index 5c240bf5c3bf40..43c2e4552edbc8 100644
--- a/.npmpackagejsonlintrc.json
+++ b/.npmpackagejsonlintrc.json
@@ -29,6 +29,14 @@
 				"require-repository-directory": "off",
 				"prefer-no-devDependencies": "off"
 			}
+		},
+		{
+			"patterns": [ "./platform-docs/package.json" ],
+			"rules": {
+				"require-publishConfig": "off",
+				"require-repository-directory": "off",
+				"prefer-no-devDependencies": "off"
+			}
 		}
 	]
 }
diff --git a/.npmrc b/.npmrc
index aafab1669bf724..84662ee5b78b78 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,5 @@
 save-exact = true
 engine-strict = true
+legacy-peer-deps = true
+prefer-dedupe = true
+lockfile-version = 3
diff --git a/.nvmrc b/.nvmrc
index 8351c19397f4fc..209e3ef4b6247c 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14
+20
diff --git a/.prettierignore b/.prettierignore
index 0b73d70681dbb0..d50079e4ef71ef 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,7 +3,7 @@ build
 build-module
 build-types
 packages/block-serialization-spec-parser/parser.js
-packages/e2e-tests/plugins
+packages/edit-site/lib
 packages/react-native-editor/bundle
 packages/url/src/test/fixtures
 vendor
diff --git a/.prettierrc.js b/.prettierrc.js
index 51b8aeb41505a6..0a95f2da679606 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,3 +1,11 @@
 // Import the default config file and expose it in the project root.
 // Useful for editor integrations.
-module.exports = require( '@wordpress/prettier-config' );
+module.exports = {
+	...require( '@wordpress/prettier-config' ),
+	overrides: [
+		{
+			files: [ 'changelog.txt' ],
+			options: { parser: 'markdown' },
+		},
+	],
+};
diff --git a/.stylelintrc.json b/.stylelintrc.json
index c7a2d1db18a460..557376e02c4062 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,18 +1,40 @@
 {
-	"extends": "@wordpress/stylelint-config/scss",
+	"extends": "@wordpress/stylelint-config/scss-stylistic",
 	"rules": {
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
 		"comment-empty-line-before": null,
+		"declaration-property-value-allowed-list": [
+			{
+				"flex-direction": "/^(?!(row|column)-reverse).*$/"
+			},
+			{
+				"message": "Avoid the flex-direction reverse values. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction."
+			}
+		],
+		"declaration-property-value-disallowed-list": [
+			{
+				"/.*/": [ "/--wp-components-color-/" ]
+			},
+			{
+				"message": "--wp-components-color-* variables are not ready to be used outside of the components package."
+			}
+		],
 		"font-weight-notation": null,
-		"max-line-length": null,
+		"@stylistic/max-line-length": null,
 		"no-descending-specificity": null,
+		"property-disallowed-list": [
+			[ "order" ],
+			{
+				"message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction."
+			}
+		],
 		"rule-empty-line-before": null,
 		"selector-class-pattern": null,
 		"value-keyword-case": null,
 		"scss/operator-no-unspaced": null,
 		"scss/selector-no-redundant-nesting-selector": null,
-		"scss/at-import-partial-extension": null,
+		"scss/load-partial-extension": null,
 		"scss/no-global-function-names": null,
 		"scss/comment-no-empty": null,
 		"scss/at-extend-no-missing-placeholder": null,
@@ -21,5 +43,6 @@
 		"scss/at-else-empty-line-before": null,
 		"scss/at-if-closing-brace-space-after": null,
 		"no-invalid-position-at-import-rule": null
-	}
+	},
+	"reportDescriptionlessDisables": true
 }
diff --git a/.wp-env.json b/.wp-env.json
index aa8dfaf3c0c4ab..05ea05b2809f9c 100644
--- a/.wp-env.json
+++ b/.wp-env.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "./schemas/json/wp-env.json",
 	"core": "WordPress/WordPress",
 	"plugins": [ "." ],
 	"themes": [ "./test/emptytheme" ],
@@ -8,7 +9,10 @@
 				"wp-content/plugins/gutenberg": ".",
 				"wp-content/mu-plugins": "./packages/e2e-tests/mu-plugins",
 				"wp-content/plugins/gutenberg-test-plugins": "./packages/e2e-tests/plugins",
-				"wp-content/themes/gutenberg-test-themes": "./test/gutenberg-test-themes"
+				"wp-content/themes/gutenberg-test-themes": "./test/gutenberg-test-themes",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyone": "https://downloads.wordpress.org/theme/twentytwentyone.2.1.zip",
+				"wp-content/themes/gutenberg-test-themes/twentytwentythree": "https://downloads.wordpress.org/theme/twentytwentythree.1.3.zip",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyfour": "https://downloads.wordpress.org/theme/twentytwentyfour.1.0.zip"
 			}
 		}
 	}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
deleted file mode 100644
index f9afa872a60842..00000000000000
--- a/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,11 +0,0 @@
-This project comes under the WordPress [Etiquette](https://wordpress.org/about/etiquette/):
-
-In the WordPress open source project, we realize that our biggest asset is the community that we foster. The project, as a whole, follows these basic philosophical principles from The Cathedral and The Bazaar.
-
--   Contributions to the WordPress open source project are for the benefit of the WordPress community as a whole, not specific businesses or individuals. All actions taken as a contributor should be made with the best interests of the community in mind.
--   Participation in the WordPress open source project is open to all who wish to join, regardless of ability, skill, financial status, or any other criteria.
--   The WordPress open source project is a volunteer-run community. Even in cases where contributors are sponsored by companies, that time is donated for the benefit of the entire open source community.
--   Any member of the community can donate their time and contribute to the project in any form including design, code, documentation, community building, etc. For more information, go to make.wordpress.org.
--   The WordPress open source community cares about diversity. We strive to maintain a welcoming environment where everyone can feel included, by keeping communication free of discrimination, incitement to violence, promotion of hate, and unwelcoming behavior.
-
-The team involved will block any user who causes any breach in this.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cd137ea37201c9..8eb4b77dbfcca9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -16,7 +16,7 @@ To learn all about contributing to the Gutenberg project, see the [Contributor G
 
 ## Guidelines
 
--   As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](/CODE_OF_CONDUCT.md).
+-   As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](https://make.wordpress.org/handbook/community-code-of-conduct/).
 
 -   Contributors should review the [overall process and best practices for pull requests](https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/repository-management.md#pull-requests), adhering to WordPress' [JavaScript coding standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/) and [accessibility coding standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/).
 
diff --git a/LICENSE.md b/LICENSE.md
index 89ae0ff923d468..983294723c4806 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2022 by the contributors
+    Copyright 2016-2024 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 
diff --git a/README.md b/README.md
index 126368cb207745..87db481b5b6b4f 100644
--- a/README.md
+++ b/README.md
@@ -7,19 +7,21 @@
 [![React Native E2E Tests (iOS)](<https://github.com/WordPress/gutenberg/workflows/React%20Native%20E2E%20Tests%20(iOS)/badge.svg>)](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28iOS%29%22+branch%3Atrunk)
 [![React Native E2E Tests (Android)](<https://github.com/WordPress/gutenberg/workflows/React%20Native%20E2E%20Tests%20(Android)/badge.svg>)](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28Android%29%22+branch%3Atrunk)
 
+<a href="https://wordpress.github.io/gutenberg/" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" alt="Storybook Badge" /></a>
+
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org)
 
 ![Screenshot of the Gutenberg Editor, editing a post in WordPress](https://user-images.githubusercontent.com/1204802/100067796-fc3e8700-2e36-11eb-993b-6b80b4310b87.png)
 
 Welcome to the development hub for the WordPress Gutenberg project!
 
-"Gutenberg" is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. Right now, the project is in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, **Customization** (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual -- and is focused on a new editing experience, the block editor.
+"Gutenberg" is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. Right now, the project is in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, Customization, **Collaboration** (which includes [Real-time collaboration](https://make.wordpress.org/core/2023/07/03/real-time-collaboration/), [Asynchronous collaboration](https://make.wordpress.org/core/2023/07/04/workflows/), [Publishing flows](https://make.wordpress.org/core/2023/07/04/workflows/), [Post revisions interface](https://make.wordpress.org/core/2023/07/05/revisions/), [Admin design](https://make.wordpress.org/core/2023/07/12/admin-design/), [Library](https://make.wordpress.org/core/2023/07/10/block-library/)), and Multilingual -- and is focused on a new editing experience, the block editor.
 
 The block editor introduces a modular approach to pages and posts: each piece of content in the editor, from a paragraph to an image gallery to a headline, is its own block. And just like physical blocks, WordPress blocks can be added, arranged, and rearranged, allowing WordPress users to create media-rich pages in a visually intuitive way -- and without work-arounds like shortcodes or custom HTML.
 
-The block editor first became available in December 2018, and we're still hard at work refining the experience, creating more and better blocks, and laying the groundwork for the next three phases of work. The Gutenberg plugin gives you the latest version of the block editor so you can join us in testing bleeding-edge features, start playing with blocks, and maybe get inspired to build your own.
+The block editor first became available in December 2018, and we're still hard at work refining the experience, creating more and better blocks, and laying the groundwork for the next three phases of work. The Gutenberg plugin gives you the latest version of the block editor, so you can join us in testing bleeding-edge features, start playing with blocks, and maybe get inspired to build your own.
 
-Check out the [Ways to keep up with Gutenberg & Full Site Editing (FSE)](https://make.wordpress.org/core/2020/05/20/ways-to-keep-up-with-full-site-editing-fse/)
+Check out the [Keeping up with Gutenberg Index](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/)
 
 ## Getting Started
 
@@ -29,34 +31,32 @@ Get hands on: check out the [block editor live demo](https://wordpress.org/guten
 
 -   **Download:** To use the latest release of the Gutenberg plugin on your WordPress site: install from the plugins page in wp-admin, or [download from the WordPress.org plugins repository](https://wordpress.org/plugins/gutenberg/).
 
--   **User Documentation:** See the [WordPress Editor documentation](https://wordpress.org/support/article/wordpress-editor/) for detailed docs on using the editor as an author creating posts and pages.
+-   **User Documentation:** See the [WordPress Editor documentation](https://wordpress.org/documentation/article/wordpress-block-editor/) for detailed docs on using the editor as an author creating posts and pages.
 
--   **User Support:** If you have run into an issue, you should check the [Support Forums first](https://wordpress.org/support/forums/). The forums are a great place to get help. If you have a bug to report, please [submit it to the Gutenberg repository](https://github.com/wordpress/gutenberg/issues). Please search prior to creating a new bug to confirm its not a duplicate.
+-   **User Support:** If you have run into an issue, you should check the [Support Forums first](https://wordpress.org/support/forums/). The forums are a great place to get help. If you have a bug to report, please [submit it to the Gutenberg repository](https://github.com/wordpress/gutenberg/issues). Please search prior to creating a new bug to confirm it's not a duplicate.
 
 ### Developing for Gutenberg
 
 Extending and customizing is at the heart of the WordPress platform, this is no different for the Gutenberg project. The editor and future products can be extended by third-party developers using plugins.
 
-Review the [Create a Block tutorial](/docs/getting-started/create-block/README.md) for the fastest way to get started extending the block editor. See the [Developer Documentation](https://developer.wordpress.org/block-editor/#develop-for-the-block-editor) for extensive tutorials, documentation, and API references.
+Review the [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/) for the fastest way to get started extending the block editor. See the [Block Editor Handbook](https://developer.wordpress.org/block-editor/) for extensive tutorials, documentation, and API references. Also, check the [WordPress Developer Blog](https://developer.wordpress.org/blog/) for great articles about block development, among other topics.
 
 ### Contribute to Gutenberg
 
-Gutenberg is an open-source project and welcomes all contributors from code to design, and from documentation to triage. The project is built by many contributors and volunteers and we'd love your help building it.
+Gutenberg is an open-source project and welcomes all contributors from code to design, and from documentation to triage. The project is built by many contributors and volunteers, and we'd love your help building it.
 
-See the [Contributors Handbook](https://developer.wordpress.org/block-editor/contributors/) for all the details on how you can contribute. 
+See the [Contributors Handbook](https://developer.wordpress.org/block-editor/contributors/) for all the details on how you can contribute.
 
 To get up and running quickly with **code contribution** see [Getting Started With Code Contribution](/docs/contributors/code/getting-started-with-code-contribution.md). Also check out the other resources available on the [Code Contributions](/docs/contributors/code/README.md) page.
 
 In whichever way you wish to contribute please be sure to read the [Contributing Guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/CONTRIBUTING.md) first.
 
-As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](https://github.com/WordPress/gutenberg/blob/HEAD/CODE_OF_CONDUCT.md).
+As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our [Code of Conduct](https://make.wordpress.org/handbook/community-code-of-conduct/).
 
 ## Get Involved
 
 You can join us in the `#core-editor` channel in Slack, see the [WordPress Slack page](https://make.wordpress.org/chat/) for signup information; it is free to join.
 
-**Weekly meetings** The Editor Team meets weekly on Wednesdays at 14:00 UTC in Slack. If you can not join the meeting, [agenda](https://make.wordpress.org/core/tag/core-editor-agenda/) and [notes](https://make.wordpress.org/core/tag/core-editor-summary/) are posted to the [Make WordPress Blog](https://make.wordpress.org/core/).
-
 ## License
 
 WordPress is free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See [LICENSE.md](LICENSE.md) for complete license.
diff --git a/backport-changelog/6.6/6279.md b/backport-changelog/6.6/6279.md
new file mode 100644
index 00000000000000..f372c33d339b8a
--- /dev/null
+++ b/backport-changelog/6.6/6279.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6279
+
+* https://github.com/WordPress/gutenberg/pull/60063
diff --git a/backport-changelog/6.6/6522.md b/backport-changelog/6.6/6522.md
new file mode 100644
index 00000000000000..172464cf664de9
--- /dev/null
+++ b/backport-changelog/6.6/6522.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/6522
+
+* https://github.com/WordPress/gutenberg/pull/60106
+* https://github.com/WordPress/gutenberg/pull/60228
+* https://github.com/WordPress/gutenberg/pull/61638
diff --git a/backport-changelog/6.6/6559.md b/backport-changelog/6.6/6559.md
new file mode 100644
index 00000000000000..176a2e04f02574
--- /dev/null
+++ b/backport-changelog/6.6/6559.md
@@ -0,0 +1,6 @@
+https://github.com/WordPress/wordpress-develop/pull/6559
+
+* https://github.com/WordPress/gutenberg/pull/60349
+* https://github.com/WordPress/gutenberg/pull/60464
+* https://github.com/WordPress/gutenberg/pull/60491
+* https://github.com/WordPress/gutenberg/pull/61757
diff --git a/backport-changelog/6.6/6567.md b/backport-changelog/6.6/6567.md
new file mode 100644
index 00000000000000..8f200bed3b5c09
--- /dev/null
+++ b/backport-changelog/6.6/6567.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6567
+
+* https://github.com/WordPress/gutenberg/pull/47271
+* https://github.com/WordPress/gutenberg/pull/61774
diff --git a/backport-changelog/6.6/6590.md b/backport-changelog/6.6/6590.md
new file mode 100644
index 00000000000000..47ef89e0db40cb
--- /dev/null
+++ b/backport-changelog/6.6/6590.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/6590
+
+* https://github.com/WordPress/gutenberg/pull/59531
+* https://github.com/WordPress/gutenberg/pull/61182
+* https://github.com/WordPress/gutenberg/pull/61717
diff --git a/backport-changelog/6.6/6605.md b/backport-changelog/6.6/6605.md
new file mode 100644
index 00000000000000..c45a37d77e660b
--- /dev/null
+++ b/backport-changelog/6.6/6605.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6605
+
+* https://github.com/WordPress/gutenberg/pull/61851
diff --git a/backport-changelog/6.6/6616.md b/backport-changelog/6.6/6616.md
new file mode 100644
index 00000000000000..bb35d6c74493cf
--- /dev/null
+++ b/backport-changelog/6.6/6616.md
@@ -0,0 +1,7 @@
+https://github.com/WordPress/wordpress-develop/pull/6616
+
+* https://github.com/WordPress/gutenberg/pull/58409
+* https://github.com/WordPress/gutenberg/pull/61328
+* https://github.com/WordPress/gutenberg/pull/61842
+* https://github.com/WordPress/gutenberg/pull/62199
+* https://github.com/WordPress/gutenberg/pull/62252
diff --git a/backport-changelog/6.6/6656.md b/backport-changelog/6.6/6656.md
new file mode 100644
index 00000000000000..f0bf8900335f49
--- /dev/null
+++ b/backport-changelog/6.6/6656.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6656
+
+* https://github.com/WordPress/gutenberg/pull/60715
\ No newline at end of file
diff --git a/backport-changelog/6.6/6662.md b/backport-changelog/6.6/6662.md
new file mode 100644
index 00000000000000..5b25fc99304919
--- /dev/null
+++ b/backport-changelog/6.6/6662.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6662
+
+* https://github.com/WordPress/gutenberg/pull/57908
+* https://github.com/WordPress/gutenberg/pull/62125
diff --git a/backport-changelog/6.6/6694.md b/backport-changelog/6.6/6694.md
new file mode 100644
index 00000000000000..a9eb5a7f37ef5b
--- /dev/null
+++ b/backport-changelog/6.6/6694.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6694
+
+* https://github.com/WordPress/gutenberg/pull/60694
diff --git a/backport-changelog/6.6/6731.md b/backport-changelog/6.6/6731.md
new file mode 100644
index 00000000000000..b8671873251659
--- /dev/null
+++ b/backport-changelog/6.6/6731.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6731
+
+* https://github.com/WordPress/gutenberg/pull/62299
diff --git a/backport-changelog/6.6/6737.md b/backport-changelog/6.6/6737.md
new file mode 100644
index 00000000000000..84e2234ca4e79a
--- /dev/null
+++ b/backport-changelog/6.6/6737.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6737
+
+* https://github.com/WordPress/gutenberg/pull/62305
diff --git a/backport-changelog/6.6/6744.md b/backport-changelog/6.6/6744.md
new file mode 100644
index 00000000000000..032f5420cb7184
--- /dev/null
+++ b/backport-changelog/6.6/6744.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6744
+
+* https://github.com/WordPress/gutenberg/pull/62355
\ No newline at end of file
diff --git a/backport-changelog/6.6/6756.md b/backport-changelog/6.6/6756.md
new file mode 100644
index 00000000000000..688b258c095faa
--- /dev/null
+++ b/backport-changelog/6.6/6756.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6756
+
+* https://github.com/WordPress/gutenberg/pull/62461
+* https://github.com/WordPress/gutenberg/pull/62495
diff --git a/backport-changelog/6.6/6785.md b/backport-changelog/6.6/6785.md
new file mode 100644
index 00000000000000..ad26227bf12565
--- /dev/null
+++ b/backport-changelog/6.6/6785.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6785
+
+* https://github.com/WordPress/gutenberg/pull/62459
diff --git a/backport-changelog/6.6/6797.md b/backport-changelog/6.6/6797.md
new file mode 100644
index 00000000000000..630b677655ddce
--- /dev/null
+++ b/backport-changelog/6.6/6797.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6797
+
+* https://github.com/WordPress/gutenberg/pull/62526
\ No newline at end of file
diff --git a/backport-changelog/6.6/6824.md b/backport-changelog/6.6/6824.md
new file mode 100644
index 00000000000000..7dc6e090f01498
--- /dev/null
+++ b/backport-changelog/6.6/6824.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6824
+
+* https://github.com/WordPress/gutenberg/pull/62550
diff --git a/backport-changelog/6.6/6825.md b/backport-changelog/6.6/6825.md
new file mode 100644
index 00000000000000..73e5f46600d892
--- /dev/null
+++ b/backport-changelog/6.6/6825.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6825
+
+* https://github.com/WordPress/gutenberg/pull/62552
diff --git a/backport-changelog/6.6/6827.md b/backport-changelog/6.6/6827.md
new file mode 100644
index 00000000000000..bfe177c4cac0e5
--- /dev/null
+++ b/backport-changelog/6.6/6827.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6827
+
+* https://github.com/WordPress/gutenberg/pull/62465
diff --git a/backport-changelog/6.6/6837.md b/backport-changelog/6.6/6837.md
new file mode 100644
index 00000000000000..2fffba68b53a10
--- /dev/null
+++ b/backport-changelog/6.6/6837.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6837
+
+* https://github.com/WordPress/gutenberg/pull/62529
+* https://github.com/WordPress/gutenberg/pull/62610
diff --git a/backport-changelog/6.6/6841.md b/backport-changelog/6.6/6841.md
new file mode 100644
index 00000000000000..36e715c48f52e0
--- /dev/null
+++ b/backport-changelog/6.6/6841.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6841
+
+* https://github.com/WordPress/gutenberg/pull/62598
diff --git a/backport-changelog/6.6/6844.md b/backport-changelog/6.6/6844.md
new file mode 100644
index 00000000000000..f735d96b9a051c
--- /dev/null
+++ b/backport-changelog/6.6/6844.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6844
+
+* https://github.com/WordPress/gutenberg/pull/62640
diff --git a/backport-changelog/6.6/6854.md b/backport-changelog/6.6/6854.md
new file mode 100644
index 00000000000000..78003f24ca9e41
--- /dev/null
+++ b/backport-changelog/6.6/6854.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6854
+
+* https://github.com/WordPress/gutenberg/pull/62670
\ No newline at end of file
diff --git a/backport-changelog/6.6/6864.md b/backport-changelog/6.6/6864.md
new file mode 100644
index 00000000000000..10bf9cce4d6576
--- /dev/null
+++ b/backport-changelog/6.6/6864.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6864
+
+* https://github.com/WordPress/gutenberg/pull/62488
+* https://github.com/WordPress/gutenberg/pull/62696
\ No newline at end of file
diff --git a/backport-changelog/6.6/6873.md b/backport-changelog/6.6/6873.md
new file mode 100644
index 00000000000000..745966d0dc0407
--- /dev/null
+++ b/backport-changelog/6.6/6873.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6873
+
+* https://github.com/WordPress/gutenberg/pull/62712
diff --git a/backport-changelog/6.6/6959.md b/backport-changelog/6.6/6959.md
new file mode 100644
index 00000000000000..3232414bc22b11
--- /dev/null
+++ b/backport-changelog/6.6/6959.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/6959
+
+* https://github.com/WordPress/gutenberg/pull/63071
+
diff --git a/backport-changelog/6.6/6987.md b/backport-changelog/6.6/6987.md
new file mode 100644
index 00000000000000..c3bf36f8f9933d
--- /dev/null
+++ b/backport-changelog/6.6/6987.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6987
+
+* https://github.com/WordPress/gutenberg/pull/63207
\ No newline at end of file
diff --git a/backport-changelog/6.6/6989.md b/backport-changelog/6.6/6989.md
new file mode 100644
index 00000000000000..3d236938ff74a5
--- /dev/null
+++ b/backport-changelog/6.6/6989.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6989
+
+* https://github.com/WordPress/gutenberg/pull/63172
diff --git a/backport-changelog/6.6/7012.md b/backport-changelog/6.6/7012.md
new file mode 100644
index 00000000000000..265f3dad981e44
--- /dev/null
+++ b/backport-changelog/6.6/7012.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7012
+
+* https://github.com/WordPress/gutenberg/pull/63403
diff --git a/backport-changelog/6.6/7036.md b/backport-changelog/6.6/7036.md
new file mode 100644
index 00000000000000..afc4d16bf011b7
--- /dev/null
+++ b/backport-changelog/6.6/7036.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7036
+
+* https://github.com/WordPress/gutenberg/pull/63436
diff --git a/backport-changelog/6.6/7061.md b/backport-changelog/6.6/7061.md
new file mode 100644
index 00000000000000..307e6575cf38d8
--- /dev/null
+++ b/backport-changelog/6.6/7061.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7061
+
+* https://github.com/WordPress/gutenberg/pull/63726
diff --git a/backport-changelog/6.6/7088.md b/backport-changelog/6.6/7088.md
new file mode 100644
index 00000000000000..46bd1147464846
--- /dev/null
+++ b/backport-changelog/6.6/7088.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7088
+
+* https://github.com/WordPress/gutenberg/pull/63918
+
diff --git a/backport-changelog/6.6/7097.md b/backport-changelog/6.6/7097.md
new file mode 100644
index 00000000000000..e674d5ea76ba6f
--- /dev/null
+++ b/backport-changelog/6.6/7097.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7097
+
+* https://github.com/WordPress/gutenberg/pull/63980
diff --git a/backport-changelog/6.6/7145.md b/backport-changelog/6.6/7145.md
new file mode 100644
index 00000000000000..386f765cb22fa8
--- /dev/null
+++ b/backport-changelog/6.6/7145.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7145
+
+* https://github.com/WordPress/gutenberg/pull/64076
diff --git a/backport-changelog/6.7/6668.md b/backport-changelog/6.7/6668.md
new file mode 100644
index 00000000000000..7653dd8d8294ee
--- /dev/null
+++ b/backport-changelog/6.7/6668.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6668
+
+* https://github.com/WordPress/gutenberg/pull/62092
diff --git a/backport-changelog/6.7/6750.md b/backport-changelog/6.7/6750.md
new file mode 100644
index 00000000000000..257ebe3a5aa698
--- /dev/null
+++ b/backport-changelog/6.7/6750.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6750
+
+* https://github.com/WordPress/gutenberg/pull/62357
\ No newline at end of file
diff --git a/backport-changelog/6.7/6836.md b/backport-changelog/6.7/6836.md
new file mode 100644
index 00000000000000..feaa0f909f1f6f
--- /dev/null
+++ b/backport-changelog/6.7/6836.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6836
+
+* https://github.com/WordPress/gutenberg/pull/60100
diff --git a/backport-changelog/6.7/6991.md b/backport-changelog/6.7/6991.md
new file mode 100644
index 00000000000000..4d5f1f85ec7686
--- /dev/null
+++ b/backport-changelog/6.7/6991.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/6991
+
+* https://github.com/WordPress/gutenberg/pull/61382
diff --git a/backport-changelog/6.7/7020.md b/backport-changelog/6.7/7020.md
new file mode 100644
index 00000000000000..8eacb220d340e5
--- /dev/null
+++ b/backport-changelog/6.7/7020.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7020
+
+* https://github.com/WordPress/gutenberg/pull/63470
diff --git a/backport-changelog/6.7/7125.md b/backport-changelog/6.7/7125.md
new file mode 100644
index 00000000000000..341e0415cc61a2
--- /dev/null
+++ b/backport-changelog/6.7/7125.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7125
+
+* https://github.com/WordPress/gutenberg/pull/61577
+* https://github.com/WordPress/gutenberg/pull/64610
diff --git a/backport-changelog/6.7/7137.md b/backport-changelog/6.7/7137.md
new file mode 100644
index 00000000000000..00771b8bc6c21d
--- /dev/null
+++ b/backport-changelog/6.7/7137.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/7137
+
+* https://github.com/WordPress/gutenberg/pull/64128
+* https://github.com/WordPress/gutenberg/pull/64192
+* https://github.com/WordPress/gutenberg/pull/64328
diff --git a/backport-changelog/6.7/7139.md b/backport-changelog/6.7/7139.md
new file mode 100644
index 00000000000000..b5b0090fbaa563
--- /dev/null
+++ b/backport-changelog/6.7/7139.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7139
+
+* https://github.com/WordPress/gutenberg/pull/64504
+* https://github.com/WordPress/gutenberg/pull/65280
diff --git a/backport-changelog/6.7/7179.md b/backport-changelog/6.7/7179.md
new file mode 100644
index 00000000000000..d777eace2cb05e
--- /dev/null
+++ b/backport-changelog/6.7/7179.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/7179
+
+* https://github.com/WordPress/gutenberg/pull/64401
+* https://github.com/WordPress/gutenberg/pull/64459
+* https://github.com/WordPress/gutenberg/pull/64477
diff --git a/backport-changelog/6.7/7200.md b/backport-changelog/6.7/7200.md
new file mode 100644
index 00000000000000..520b3d6054cc18
--- /dev/null
+++ b/backport-changelog/6.7/7200.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7200
+
+* https://github.com/WordPress/gutenberg/pull/64511
diff --git a/backport-changelog/6.7/7247.md b/backport-changelog/6.7/7247.md
new file mode 100644
index 00000000000000..d0b1de25872344
--- /dev/null
+++ b/backport-changelog/6.7/7247.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7247
+
+* https://github.com/WordPress/gutenberg/pull/64790
diff --git a/backport-changelog/6.7/7258.md b/backport-changelog/6.7/7258.md
new file mode 100644
index 00000000000000..6714b13b70b8d2
--- /dev/null
+++ b/backport-changelog/6.7/7258.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7258
+
+* https://github.com/WordPress/gutenberg/pull/64570
\ No newline at end of file
diff --git a/backport-changelog/6.7/7270.md b/backport-changelog/6.7/7270.md
new file mode 100644
index 00000000000000..358b0d7c9a9674
--- /dev/null
+++ b/backport-changelog/6.7/7270.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7270
+
+* https://github.com/WordPress/gutenberg/pull/64890
diff --git a/backport-changelog/6.7/7298.md b/backport-changelog/6.7/7298.md
new file mode 100644
index 00000000000000..4c01ef5d4f46e6
--- /dev/null
+++ b/backport-changelog/6.7/7298.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7298
+
+* https://github.com/WordPress/gutenberg/pull/65099
\ No newline at end of file
diff --git a/backport-changelog/6.7/7314.md b/backport-changelog/6.7/7314.md
new file mode 100644
index 00000000000000..7d75cdff0f9075
--- /dev/null
+++ b/backport-changelog/6.7/7314.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7314
+
+* https://github.com/WordPress/gutenberg/pull/64167
diff --git a/backport-changelog/6.7/7336.md b/backport-changelog/6.7/7336.md
new file mode 100644
index 00000000000000..7cb2e26d7eeb95
--- /dev/null
+++ b/backport-changelog/6.7/7336.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7336
+
+* https://github.com/WordPress/gutenberg/pull/65071
diff --git a/backport-changelog/6.7/7360.md b/backport-changelog/6.7/7360.md
new file mode 100644
index 00000000000000..b2fb8efd624b93
--- /dev/null
+++ b/backport-changelog/6.7/7360.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7360
+
+* https://github.com/WordPress/gutenberg/pull/65460
diff --git a/backport-changelog/6.7/7543.md b/backport-changelog/6.7/7543.md
new file mode 100644
index 00000000000000..7dcb74354ac813
--- /dev/null
+++ b/backport-changelog/6.7/7543.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7543
+
+* https://github.com/WordPress/gutenberg/pull/65958
diff --git a/backport-changelog/6.7/7552.md b/backport-changelog/6.7/7552.md
new file mode 100644
index 00000000000000..d304162b3cae67
--- /dev/null
+++ b/backport-changelog/6.7/7552.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7552
+
+* https://github.com/WordPress/gutenberg/pull/66058
diff --git a/backport-changelog/6.7/7561.md b/backport-changelog/6.7/7561.md
new file mode 100644
index 00000000000000..43fcffa41c02a5
--- /dev/null
+++ b/backport-changelog/6.7/7561.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7561
+
+* https://github.com/WordPress/gutenberg/pull/66084
diff --git a/backport-changelog/6.7/7661.md b/backport-changelog/6.7/7661.md
new file mode 100644
index 00000000000000..711d03595162ca
--- /dev/null
+++ b/backport-changelog/6.7/7661.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7661
+
+* https://github.com/WordPress/gutenberg/pull/66468
+* https://github.com/WordPress/gutenberg/pull/66543
diff --git a/backport-changelog/6.7/7676.md b/backport-changelog/6.7/7676.md
new file mode 100644
index 00000000000000..19d9dc59048457
--- /dev/null
+++ b/backport-changelog/6.7/7676.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7676
+
+* https://github.com/WordPress/gutenberg/pull/66359
diff --git a/backport-changelog/6.8/6910.md b/backport-changelog/6.8/6910.md
new file mode 100644
index 00000000000000..24b59bce87ee60
--- /dev/null
+++ b/backport-changelog/6.8/6910.md
@@ -0,0 +1,7 @@
+https://github.com/WordPress/wordpress-develop/pull/6910
+
+* https://github.com/WordPress/gutenberg/pull/59483
+* https://github.com/WordPress/gutenberg/pull/60652
+* https://github.com/WordPress/gutenberg/pull/62777
+* https://github.com/WordPress/gutenberg/pull/63108
+* https://github.com/WordPress/gutenberg/pull/63464
\ No newline at end of file
diff --git a/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md
new file mode 100644
index 00000000000000..3e734637ddbb2f
--- /dev/null
+++ b/backport-changelog/6.8/7069.md
@@ -0,0 +1,6 @@
+https://github.com/WordPress/wordpress-develop/pull/7069
+
+* https://github.com/WordPress/gutenberg/pull/63401
+* https://github.com/WordPress/gutenberg/pull/66918
+* https://github.com/WordPress/gutenberg/pull/67018
+* https://github.com/WordPress/gutenberg/pull/67552
diff --git a/backport-changelog/6.8/7129.md b/backport-changelog/6.8/7129.md
new file mode 100644
index 00000000000000..90c9168cdc6f8a
--- /dev/null
+++ b/backport-changelog/6.8/7129.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7129
+
+* https://github.com/WordPress/gutenberg/pull/62304
diff --git a/backport-changelog/6.8/7265.md b/backport-changelog/6.8/7265.md
new file mode 100644
index 00000000000000..44ba36053aa0d9
--- /dev/null
+++ b/backport-changelog/6.8/7265.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7265
+
+* https://github.com/WordPress/gutenberg/pull/66850
+* https://github.com/WordPress/gutenberg/pull/66947
diff --git a/backport-changelog/6.8/7488.md b/backport-changelog/6.8/7488.md
new file mode 100644
index 00000000000000..a588bef0e01796
--- /dev/null
+++ b/backport-changelog/6.8/7488.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7488
+
+* https://github.com/WordPress/gutenberg/pull/60622
\ No newline at end of file
diff --git a/backport-changelog/6.8/7498.md b/backport-changelog/6.8/7498.md
new file mode 100644
index 00000000000000..6c903246166b64
--- /dev/null
+++ b/backport-changelog/6.8/7498.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7498
+
+* https://github.com/WordPress/gutenberg/pull/60622
\ No newline at end of file
diff --git a/backport-changelog/6.8/7575.md b/backport-changelog/6.8/7575.md
new file mode 100644
index 00000000000000..f1c6a84da1368e
--- /dev/null
+++ b/backport-changelog/6.8/7575.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7575
+
+* https://github.com/WordPress/gutenberg/pull/66154
diff --git a/backport-changelog/6.8/7604.md b/backport-changelog/6.8/7604.md
new file mode 100644
index 00000000000000..0ab47698103409
--- /dev/null
+++ b/backport-changelog/6.8/7604.md
@@ -0,0 +1,5 @@
+https://github.com/WordPress/wordpress-develop/pull/7604
+
+* https://github.com/WordPress/gutenberg/pull/66285
+* https://github.com/WordPress/gutenberg/pull/66302
+* https://github.com/WordPress/gutenberg/pull/66306
diff --git a/backport-changelog/6.8/7643.md b/backport-changelog/6.8/7643.md
new file mode 100644
index 00000000000000..f83aa411f9fff3
--- /dev/null
+++ b/backport-changelog/6.8/7643.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7643
+
+* https://github.com/WordPress/gutenberg/pull/66432
+* https://github.com/WordPress/gutenberg/pull/66556
diff --git a/backport-changelog/6.8/7681.md b/backport-changelog/6.8/7681.md
new file mode 100644
index 00000000000000..b8cffc70c68561
--- /dev/null
+++ b/backport-changelog/6.8/7681.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7681
+
+* https://github.com/WordPress/gutenberg/pull/66541
diff --git a/backport-changelog/6.8/7687.md b/backport-changelog/6.8/7687.md
new file mode 100644
index 00000000000000..0b5af190964df1
--- /dev/null
+++ b/backport-changelog/6.8/7687.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7687
+
+* https://github.com/WordPress/gutenberg/pull/66488
+* https://github.com/WordPress/gutenberg/pull/67497
diff --git a/backport-changelog/6.8/7695.md b/backport-changelog/6.8/7695.md
new file mode 100644
index 00000000000000..08b780e2afb0d7
--- /dev/null
+++ b/backport-changelog/6.8/7695.md
@@ -0,0 +1,7 @@
+https://github.com/WordPress/wordpress-develop/pull/7695
+
+* https://github.com/WordPress/gutenberg/pull/66631
+* https://github.com/WordPress/gutenberg/pull/67465
+* https://github.com/WordPress/gutenberg/pull/66579
+* https://github.com/WordPress/gutenberg/pull/66654
+* https://github.com/WordPress/gutenberg/pull/67518
diff --git a/backport-changelog/6.8/7697.md b/backport-changelog/6.8/7697.md
new file mode 100644
index 00000000000000..e53fbf4bdb8ae5
--- /dev/null
+++ b/backport-changelog/6.8/7697.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7697
+
+* https://github.com/WordPress/gutenberg/pull/66656
diff --git a/backport-changelog/6.8/7698.md b/backport-changelog/6.8/7698.md
new file mode 100644
index 00000000000000..3ded160e7ec449
--- /dev/null
+++ b/backport-changelog/6.8/7698.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7698
+
+* https://github.com/WordPress/gutenberg/pull/66662
diff --git a/backport-changelog/6.8/7759.md b/backport-changelog/6.8/7759.md
new file mode 100644
index 00000000000000..a0ad85b06e6b05
--- /dev/null
+++ b/backport-changelog/6.8/7759.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7759
+
+* https://github.com/WordPress/gutenberg/pull/66896
+
diff --git a/backport-changelog/6.8/7784.md b/backport-changelog/6.8/7784.md
new file mode 100644
index 00000000000000..b18dca88112a71
--- /dev/null
+++ b/backport-changelog/6.8/7784.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7784
+
+* https://github.com/WordPress/gutenberg/pull/66948
diff --git a/backport-changelog/6.8/7825.md b/backport-changelog/6.8/7825.md
new file mode 100644
index 00000000000000..42d09c86b7f3ba
--- /dev/null
+++ b/backport-changelog/6.8/7825.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7825
+
+* https://github.com/WordPress/gutenberg/pull/67061
diff --git a/backport-changelog/6.8/7848.md b/backport-changelog/6.8/7848.md
new file mode 100644
index 00000000000000..84600eb4847cdb
--- /dev/null
+++ b/backport-changelog/6.8/7848.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7848
+
+* https://github.com/WordPress/gutenberg/pull/67154
diff --git a/backport-changelog/6.8/7895.md b/backport-changelog/6.8/7895.md
new file mode 100644
index 00000000000000..4750ab545ada3b
--- /dev/null
+++ b/backport-changelog/6.8/7895.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7895
+
+* https://github.com/WordPress/gutenberg/pull/66459
diff --git a/backport-changelog/6.8/7903.md b/backport-changelog/6.8/7903.md
new file mode 100644
index 00000000000000..cb20d8d2dd2b1b
--- /dev/null
+++ b/backport-changelog/6.8/7903.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7903
+
+* https://github.com/WordPress/gutenberg/pull/67199
diff --git a/backport-changelog/6.8/7909.md b/backport-changelog/6.8/7909.md
new file mode 100644
index 00000000000000..32a441ef296a2d
--- /dev/null
+++ b/backport-changelog/6.8/7909.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7909
+
+* https://github.com/WordPress/gutenberg/pull/67330
diff --git a/backport-changelog/readme.md b/backport-changelog/readme.md
new file mode 100644
index 00000000000000..8066cc6a6fca24
--- /dev/null
+++ b/backport-changelog/readme.md
@@ -0,0 +1,63 @@
+# Core Backport Changelog
+
+If you've changed or added files to the Gutenberg plugin, you'll need to confirm whether the changes are to be backported to [WordPress Core](https://github.com/WordPress/wordpress-develop), and therefore featured in the next release of WordPress.
+
+On open Gutenberg PRs, changes to certain files are flagged as requiring backporting to WordPress Core, for example, PHP files in `/lib` and PHP unit tests. 
+
+These changes must have a corresponding Core PR before they can be merged to Gutenberg trunk.
+
+To create a Core PR, first create a [new Trac ticket](https://core.trac.wordpress.org/newticket) and submit a pull request to the [WordPress Core GitHub repository](https://github.com/WordPress/wordpress-develop).
+
+The Core PR can remain open as long as is required.
+
+For more information on how to create a Core PR, see the [WordPress Core Handbook](https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/).
+
+## How to add a Core Backport PR to the changelog
+
+After you create Core PR, you'll need to create a corresponding markdown file, and place it within the appropriate release subdirectory.
+
+The filename is the Core PR number.
+
+For example, if your Core PR number is `1234` and is slated to be part of the WordPress 6.9 release, the filename will be `1234.md`, and will be placed in the `/backport-changelog/6.9` directory.
+
+The content of the markdown file should be the Github URL of the Core PR, followed by a list of Gutenberg PR Github URLs whose changes are backported in the Core PR.
+
+A single Core PR may contain changes from one or multiple Gutenberg PRs.
+
+### Examples
+
+Let's say the next WordPress release is 6.9. You have two Gutenberg PRs — `1111` and `2222` — whose changes are backported in a single Core PR, number `1234`.
+
+First you would create a file named `1234.md` in the `/6.9` folder. 
+
+If the `/6.9` folder doesn't exist, create it. 
+
+Then you would add the following content to your new file:
+
+```md
+https://github.com/WordPress/wordpress-develop/pull/1234
+
+* https://github.com/WordPress/gutenberg/pull/1111
+* https://github.com/WordPress/gutenberg/pull/2222
+```
+
+If `1234.md` already exists, you would add the Gutenberg PRs to the list in the existing file.
+
+## Why use individual files?
+
+For the backport changelog, Gutenberg uses individual files as opposed to a single changelog file to avoid rebase conflicts.
+
+## Exceptions
+
+Some Gutenberg PRs may be flagged as needing a core backport PR when they don't, for example when the PR contains minor comment changes, or the changes already exist in Core.
+
+For individual PRs, there are two Github labels that can be used to exclude a PR from the backport changelog CI check:
+
+- `Backport from WordPress Core` - Indicates that the PR is a backport from WordPress Core and doesn't need a Core PR.
+- `No Core Sync Required` - Indicates that any changes do not need to be synced to WordPress Core.
+
+If there are specific file or directory changes that should **never** be flagged as requiring a Core backport PR, you can add it to the list of exceptions in [.github/workflows/check-backport-changelog.yml](https://github.com/WordPress/gutenberg/tree/trunk/.github/workflows/check-backport-changelog.yml).
+
+## Where to get help
+
+If you're unsure, you can always ask the Gutenberg Core team for help on the Gutenberg PR `@WordPress/gutenberg-core` or via the #core-editor channel in [WordPress Slack](https://make.wordpress.org/chat/).
diff --git a/bin/api-docs/gen-block-lib-list.js b/bin/api-docs/gen-block-lib-list.js
index 60b0a99b096ab8..0c79def1989992 100644
--- a/bin/api-docs/gen-block-lib-list.js
+++ b/bin/api-docs/gen-block-lib-list.js
@@ -148,23 +148,58 @@ function getSourceFromFile( filename ) {
  */
 function readBlockJSON( filename ) {
 	const blockjson = require( filename );
-
+	const {
+		name,
+		category,
+		supports,
+		attributes,
+		parent,
+		ancestor,
+		__experimental,
+		allowedBlocks,
+	} = blockjson;
 	const sourcefile = getSourceFromFile( filename );
-	const supportsList =
-		blockjson.supports !== undefined
-			? processObjWithInnerKeys( augmentSupports( blockjson.supports ) )
-			: [];
-	const attributes = getTruthyKeys( blockjson.attributes );
+	const blockInfoList = [ `-	**Name:** ${ name }` ];
+
+	if ( __experimental ) {
+		blockInfoList.push( `-	**Experimental:** ${ __experimental }` );
+	}
+	if ( category?.length > 0 ) {
+		blockInfoList.push( `-	**Category:** ${ category }` );
+	}
+	if ( parent?.length > 0 ) {
+		blockInfoList.push( `-	**Parent:** ${ parent.join( ', ' ) }` );
+	}
+	if ( ancestor?.length > 0 ) {
+		blockInfoList.push( `-	**Ancestor:** ${ ancestor.join( ', ' ) }` );
+	}
+	if ( allowedBlocks?.length > 0 ) {
+		blockInfoList.push(
+			`-	**Allowed Blocks:** ${ allowedBlocks.join( ', ' ) }`
+		);
+	}
+	if ( supports ) {
+		blockInfoList.push(
+			`-	**Supports:** ${ processObjWithInnerKeys(
+				augmentSupports( supports )
+			)
+				.sort()
+				.join( ', ' ) }`
+		);
+	}
+	const truthyAttributes = getTruthyKeys( attributes );
+	if ( truthyAttributes.length ) {
+		blockInfoList.push(
+			`-	**Attributes:** ${ truthyAttributes.sort().join( ', ' ) }`
+		);
+	}
 
 	return `
 ## ${ blockjson.title }
 
 ${ blockjson.description } ([Source](${ sourcefile }))
 
--	**Name:** ${ blockjson.name }
--	**Category:** ${ blockjson.category }
--	**Supports:** ${ supportsList.sort().join( ', ' ) }
--	**Attributes:** ${ attributes.sort().join( ', ' ) }
+${ blockInfoList.join( '\n' ) }
 `;
 }
 
diff --git a/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs b/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs
new file mode 100644
index 00000000000000..4bb82652f1737a
--- /dev/null
+++ b/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import fs from 'node:fs/promises';
+import babel from '@babel/core';
+import { parse as commentParser } from 'comment-parser';
+
+/**
+ * Try to get subcomponent descriptions from the main component Object.assign() call.
+ */
+export async function getDescriptionsForSubcomponents(
+	filePath,
+	mainComponentName
+) {
+	const fileContent = await fs.readFile( filePath, 'utf8' );
+	const parsedFile = babel.parse( fileContent, {
+		filename: filePath,
+	} );
+	const mainComponent = parsedFile.program.body
+		.filter( ( node ) => node.type === 'ExportNamedDeclaration' )
+		.flatMap( ( node ) => node.declaration?.declarations )
+		.find( ( node ) => node?.id.name === mainComponentName );
+
+	if (
+		! (
+			// If the main component export has `Object.assign( ... )`
+			(
+				mainComponent?.init?.type === 'CallExpression' &&
+				mainComponent?.init?.callee?.object?.name === 'Object' &&
+				mainComponent?.init?.callee?.property?.name === 'assign'
+			)
+		)
+	) {
+		return;
+	}
+
+	const properties = mainComponent?.init?.arguments[ 1 ]?.properties.map(
+		( node ) => [
+			node.key.name,
+			commentParser( `/*${ node.leadingComments?.[ 0 ].value }*/`, {
+				spacing: 'preserve',
+			} )?.[ 0 ]?.description,
+		]
+	);
+	return Object.fromEntries( properties );
+}
diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs
new file mode 100644
index 00000000000000..c7109dc4982c36
--- /dev/null
+++ b/bin/api-docs/gen-components-docs/index.mjs
@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import docgen from 'react-docgen-typescript';
+import glob from 'glob';
+import fs from 'node:fs/promises';
+import path from 'path';
+
+/**
+ * Internal dependencies
+ */
+import { generateMarkdownDocs } from './markdown/index.mjs';
+import { getDescriptionsForSubcomponents } from './get-subcomponent-descriptions.mjs';
+
+const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json';
+
+// For consistency, options should generally match the options used in Storybook.
+const OPTIONS = {
+	shouldExtractLiteralValuesFromEnum: true,
+	shouldRemoveUndefinedFromOptional: true,
+	propFilter: ( prop ) =>
+		prop.parent ? ! /node_modules/.test( prop.parent.fileName ) : true,
+	savePropValueAsString: true,
+};
+
+function getTypeDocsForComponent( {
+	manifestPath,
+	componentFilePath,
+	displayName,
+} ) {
+	const resolvedPath = path.resolve(
+		path.dirname( manifestPath ),
+		componentFilePath
+	);
+
+	const typeDocs = docgen.parse( resolvedPath, OPTIONS );
+
+	if ( typeDocs.length === 0 ) {
+		throw new Error(
+			`react-docgen-typescript could not generate any type docs from ${ resolvedPath }`
+		);
+	}
+
+	const matchingTypeDoc = typeDocs.find(
+		( obj ) => obj.displayName === displayName
+	);
+
+	if ( typeof matchingTypeDoc === 'undefined' ) {
+		const unmatchedTypeDocs = typeDocs
+			.map( ( obj ) => `\`${ obj.displayName }\`` )
+			.join( ', ' );
+
+		throw new Error(
+			`react-docgen-typescript could not find type docs for ${ displayName } in ${ resolvedPath }. (Found ${ unmatchedTypeDocs })`
+		);
+	}
+
+	return matchingTypeDoc;
+}
+
+async function parseManifest( manifestPath ) {
+	try {
+		return JSON.parse( await fs.readFile( manifestPath, 'utf8' ) );
+	} catch ( e ) {
+		throw new Error(
+			`Error parsing docs manifest at ${ manifestPath }: ${ e.message }`
+		);
+	}
+}
+
+const manifests = glob.sync( MANIFEST_GLOB );
+
+await Promise.all(
+	manifests.map( async ( manifestPath ) => {
+		const manifest = await parseManifest( manifestPath );
+
+		const typeDocs = getTypeDocsForComponent( {
+			manifestPath,
+			componentFilePath: manifest.filePath,
+			displayName: manifest.displayName,
+		} );
+
+		let subcomponentDescriptions;
+
+		const subcomponentTypeDocs = await Promise.all(
+			manifest.subcomponents?.map( async ( subcomponent ) => {
+				const docs = getTypeDocsForComponent( {
+					manifestPath,
+					componentFilePath: subcomponent.filePath,
+					displayName: subcomponent.displayName,
+				} );
+
+				if ( subcomponent.preferredDisplayName ) {
+					docs.displayName = subcomponent.preferredDisplayName;
+				}
+
+				if ( ! subcomponent.description ) {
+					subcomponentDescriptions ??=
+						getDescriptionsForSubcomponents(
+							path.resolve(
+								path.dirname( manifestPath ),
+								manifest.filePath
+							),
+							manifest.displayName
+						);
+
+					docs.description = ( await subcomponentDescriptions )?.[
+						subcomponent.displayName
+					];
+				}
+
+				return docs;
+			} ) ?? []
+		);
+
+		const docs = generateMarkdownDocs( {
+			typeDocs,
+			subcomponentTypeDocs,
+		} );
+		const outputFile = path.resolve(
+			path.dirname( manifestPath ),
+			'./README.md'
+		);
+
+		try {
+			console.log( `Writing docs to ${ outputFile }` );
+			return fs.writeFile( outputFile, docs );
+		} catch ( e ) {
+			throw new Error(
+				`Error writing docs to ${ outputFile }: ${ e.message }`
+			);
+		}
+	} )
+);
diff --git a/bin/api-docs/gen-components-docs/markdown/index.mjs b/bin/api-docs/gen-components-docs/markdown/index.mjs
new file mode 100644
index 00000000000000..126fdf0057b6e5
--- /dev/null
+++ b/bin/api-docs/gen-components-docs/markdown/index.mjs
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import json2md from 'json2md';
+
+/**
+ * Internal dependencies
+ */
+import { generateMarkdownPropsJson } from './props.mjs';
+
+export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) {
+	const mainDocsJson = [
+		{ h1: typeDocs.displayName },
+		'<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->',
+		{
+			p: `<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-${ typeDocs.displayName.toLowerCase() }--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>`,
+		},
+		typeDocs.description,
+		...generateMarkdownPropsJson( typeDocs.props ),
+	];
+
+	const subcomponentDocsJson = subcomponentTypeDocs?.length
+		? [
+				{ h2: 'Subcomponents' },
+				...subcomponentTypeDocs.flatMap( ( subcomponentTypeDoc ) => [
+					{
+						h3: subcomponentTypeDoc.displayName,
+					},
+					subcomponentTypeDoc.description,
+					...generateMarkdownPropsJson( subcomponentTypeDoc.props, {
+						headingLevel: 4,
+					} ),
+				] ),
+		  ]
+		: [];
+
+	return json2md(
+		[ ...mainDocsJson, ...subcomponentDocsJson ].filter( Boolean )
+	);
+}
diff --git a/bin/api-docs/gen-components-docs/markdown/props.mjs b/bin/api-docs/gen-components-docs/markdown/props.mjs
new file mode 100644
index 00000000000000..9d019c4240f008
--- /dev/null
+++ b/bin/api-docs/gen-components-docs/markdown/props.mjs
@@ -0,0 +1,51 @@
+function renderPropType( type ) {
+	const MAX_ENUM_VALUES = 10;
+
+	switch ( type.name ) {
+		case 'enum': {
+			const string = type.value
+				.slice( 0, MAX_ENUM_VALUES )
+				.map( ( { value } ) => value )
+				.join( ' | ' );
+
+			if ( type.value.length > MAX_ENUM_VALUES ) {
+				return `${ string } | ...`;
+			}
+			return string;
+		}
+		default:
+			return type.name;
+	}
+}
+
+export function generateMarkdownPropsJson( props, { headingLevel = 2 } = {} ) {
+	const sortedKeys = Object.keys( props ).sort( ( [ a ], [ b ] ) =>
+		a.localeCompare( b )
+	);
+
+	const propsJson = sortedKeys
+		.flatMap( ( key ) => {
+			const prop = props[ key ];
+
+			if ( prop.description?.includes( '@ignore' ) ) {
+				return null;
+			}
+
+			return [
+				{ [ `h${ headingLevel + 1 }` ]: `\`${ key }\`` },
+				prop.description,
+				{
+					ul: [
+						`Type: \`${ renderPropType( prop.type ) }\``,
+						`Required: ${ prop.required ? 'Yes' : 'No' }`,
+						prop.defaultValue &&
+							`Default: \`${ prop.defaultValue.value }\``,
+					].filter( Boolean ),
+				},
+			];
+		} )
+		.filter( Boolean );
+
+	return [ { [ `h${ headingLevel }` ]: 'Props' }, ...propsJson ];
+}
+
diff --git a/bin/api-docs/gen-theme-reference.js b/bin/api-docs/gen-theme-reference.js
deleted file mode 100644
index d051261963daf4..00000000000000
--- a/bin/api-docs/gen-theme-reference.js
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Generates theme.json documentation using theme.json schema.
- * Reads from  : schemas/json/theme.json
- * Publishes to: docs/reference-guides/theme-json-reference/theme-json-living.md
- */
-
-/**
- * External dependencies
- */
-const path = require( 'path' );
-const fs = require( 'fs' );
-/**
- * Path to root project directory.
- *
- * @type {string}
- */
-const ROOT_DIR = path.resolve( __dirname, '../..' );
-
-/**
- * Path to theme json schema file.
- *
- * @type {string}
- */
-const THEME_JSON_SCHEMA_FILE = path.resolve(
-	ROOT_DIR,
-	path.join( 'schemas', 'json', 'theme.json' )
-);
-
-/**
- * Path to docs file.
- *
- * @type {string}
- */
-const THEME_JSON_REF_DOC = path.resolve(
-	ROOT_DIR,
-	'docs/reference-guides/theme-json-reference/theme-json-living.md'
-);
-
-/**
- * Start token for matching string in doc file.
- *
- * @type {string}
- */
-const START_TOKEN = '<!-- START TOKEN Autogenerated - DO NOT EDIT -->';
-
-/**
- * Start token for matching string in doc file.
- *
- * @type {string}
- */
-const END_TOKEN = '<!-- END TOKEN Autogenerated - DO NOT EDIT -->';
-
-/**
- * Regular expression using tokens for matching in doc file.
- * Note: `.` does not match new lines, so [^] is used.
- *
- * @type {RegExp}
- */
-const TOKEN_PATTERN = new RegExp( START_TOKEN + '[^]*' + END_TOKEN );
-
-const themejson = require( THEME_JSON_SCHEMA_FILE );
-
-/**
- * Convert object keys to an array.
- * Gracefully handles non-object values.
- *
- * @param {*} maybeObject
- * @return {Array} Object keys
- */
-const keys = ( maybeObject ) => {
-	if ( typeof maybeObject !== 'object' ) {
-		return [];
-	}
-	return Object.keys( maybeObject );
-};
-
-/**
- * Convert settings properties to markup.
- *
- * @param {Object} struct
- * @return {string} markup
- */
-const getSettingsPropertiesMarkup = ( struct ) => {
-	if ( ! ( 'properties' in struct ) ) {
-		return '';
-	}
-	const props = struct.properties;
-	const ks = keys( props );
-	if ( ks.length < 1 ) {
-		return '';
-	}
-
-	let markup = '| Property  | Type   | Default | Props  |\n';
-	markup += '| ---       | ---    | ---    |---   |\n';
-	ks.forEach( ( key ) => {
-		const def = 'default' in props[ key ] ? props[ key ].default : '';
-		const ps =
-			props[ key ].type === 'array'
-				? keys( props[ key ].items.properties ).sort().join( ', ' )
-				: '';
-		markup += `| ${ key } | ${ props[ key ].type } | ${ def } | ${ ps } |\n`;
-	} );
-
-	return markup;
-};
-
-/**
- * Convert style properties to markup.
- *
- * @param {Object} struct
- * @return {string} markup
- */
-const getStylePropertiesMarkup = ( struct ) => {
-	if ( ! ( 'properties' in struct ) ) {
-		return '';
-	}
-	const props = struct.properties;
-	const ks = keys( props );
-	if ( ks.length < 1 ) {
-		return '';
-	}
-
-	let markup = '| Property  | Type   |  Props  |\n';
-	markup += '| ---       | ---    |---   |\n';
-	ks.forEach( ( key ) => {
-		const ps =
-			props[ key ].type === 'object'
-				? keys( props[ key ].properties ).sort().join( ', ' )
-				: '';
-		markup += `| ${ key } | ${ props[ key ].type } | ${ ps } |\n`;
-	} );
-
-	return markup;
-};
-
-/**
- * Parses a section for description and properties and
- * returns a marked up version.
- *
- * @param {string} title
- * @param {Object} data
- * @param {string} type  settings|style
- * @return {string} markup
- */
-const getSectionMarkup = ( title, data, type ) => {
-	const markupFn =
-		type === 'settings'
-			? getSettingsPropertiesMarkup
-			: getStylePropertiesMarkup;
-
-	return `
-### ${ title }
-
-${ data.description }
-
-${ markupFn( data ) }
----
-`;
-};
-
-let autogen = '';
-
-// Settings
-const settings = Object.entries( themejson.definitions )
-	.filter( ( [ settingsKey ] ) =>
-		/^settingsProperties(?!Complete)\w+$/.test( settingsKey )
-	)
-	.reduce(
-		( settingsObj, [ , { properties } ] ) =>
-			Object.assign( settingsObj, properties ),
-		{}
-	);
-const settingSections = keys( settings );
-autogen += '## Settings' + '\n\n';
-settingSections.forEach( ( section ) => {
-	autogen += getSectionMarkup( section, settings[ section ], 'settings' );
-} );
-
-// Styles
-const styles = themejson.definitions.stylesProperties.properties;
-const styleSections = keys( styles );
-autogen += '## Styles' + '\n\n';
-styleSections.forEach( ( section ) => {
-	autogen += getSectionMarkup( section, styles[ section ], 'styles' );
-} );
-
-// Read existing file to wrap auto generated content.
-let docsContent = fs.readFileSync( THEME_JSON_REF_DOC, {
-	encoding: 'utf8',
-	flag: 'r',
-} );
-
-// Replace auto generated part with new generated docs.
-autogen = START_TOKEN + '\n' + autogen + '\n' + END_TOKEN;
-docsContent = docsContent.replace( TOKEN_PATTERN, autogen );
-
-// Write back out.
-fs.writeFileSync( THEME_JSON_REF_DOC, docsContent, { encoding: 'utf8' } );
diff --git a/bin/api-docs/gen-theme-reference.mjs b/bin/api-docs/gen-theme-reference.mjs
new file mode 100644
index 00000000000000..f50d194c17ee79
--- /dev/null
+++ b/bin/api-docs/gen-theme-reference.mjs
@@ -0,0 +1,295 @@
+/**
+ * Generates theme.json documentation using theme.json schema.
+ * Reads from  : schemas/json/theme.json
+ * Publishes to: docs/reference-guides/theme-json-reference/theme-json-living.md
+ */
+
+/**
+ * External dependencies
+ */
+import fs from 'node:fs/promises';
+import $RefParser from '@apidevtools/json-schema-ref-parser';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * @typedef {import('@apidevtools/json-schema-ref-parser').JSONSchema} JSONSchema
+ */
+
+/**
+ * Path to theme json schema file.
+ *
+ * @type {URL}
+ */
+const THEME_JSON_SCHEMA_PATH = fileURLToPath(
+	new URL( '../../schemas/json/theme.json', import.meta.url )
+);
+
+/**
+ * Path to docs file.
+ *
+ * @type {URL}
+ */
+const REFERENCE_DOC_PATH = fileURLToPath(
+	new URL(
+		'../../docs/reference-guides/theme-json-reference/theme-json-living.md',
+		import.meta.url
+	)
+);
+
+/**
+ * Start token for matching string in doc file.
+ *
+ * @type {string}
+ */
+const START_TOKEN = '<!-- START TOKEN Autogenerated - DO NOT EDIT -->';
+
+/**
+ * Start token for matching string in doc file.
+ *
+ * @type {string}
+ */
+const END_TOKEN = '<!-- END TOKEN Autogenerated - DO NOT EDIT -->';
+
+/**
+ * @typedef {(schema: JSONSchema) => boolean} PredicateFunction
+ */
+
+/**
+ * @typedef {(schema: JSONSchema) => string} SerializerFunction
+ */
+
+/**
+ * Create a serializer function for a type. Supports merging one level of anyOf and oneOf subschemas.
+ *
+ * @see {@link https://json-schema.org/understanding-json-schema/reference/combining.html}
+ *
+ * @param {PredicateFunction}  predicate  Type predicate function to match a type.
+ * @param {SerializerFunction} serializer Serializer function to format a type.
+ * @return {SerializerFunction} Serializer function for the give type.
+ */
+function createSerializer( predicate, serializer ) {
+	return ( schema ) => {
+		const schemas = predicate( schema )
+			? [ schema ]
+			: schema.anyOf || schema.oneOf || [];
+		const formatted = schemas.filter( predicate ).map( serializer );
+		return [ ...new Set( formatted ) ].join( ', ' );
+	};
+}
+
+/**
+ * Serialize primitive types.
+ *
+ * @type {SerializerFunction}
+ */
+const serializePrimitiveTypes = createSerializer(
+	( schema ) =>
+		schema.type && ! [ 'object', 'array' ].includes( schema.type ),
+	( schema ) => `\`${ schema.type }\``
+);
+
+/**
+ * Serialize object types.
+ *
+ * @type {SerializerFunction}
+ */
+const serializeObjectTypes = createSerializer(
+	( schema ) => schema.properties,
+	( schema ) => `\`{ ${ Object.keys( schema.properties ).join( ', ' ) } }\``
+);
+
+/**
+ * Serialize object array types.
+ *
+ * @type {SerializerFunction}
+ */
+const serializeObjectArrayTypes = createSerializer(
+	( schema ) => schema.items && schema.items.properties,
+	( schema ) =>
+		`\`[ { ${ Object.keys( schema.items.properties ).join( ', ' ) } } ]\``
+);
+
+/**
+ * Serialize primitive array types.
+ *
+ * @type {SerializerFunction}
+ */
+const serializePrimitiveArrayTypes = createSerializer(
+	( schema ) =>
+		schema.items &&
+		schema.items.type &&
+		! [ 'object', 'array' ].includes( schema.items.type ),
+	( schema ) => `\`[ ${ schema.items.type } ]\``
+);
+
+/**
+ * Generate types from schema.
+ *
+ * @param {JSONSchema} schema JSON schema
+ * @return {string} serialized types
+ */
+function generateTypes( schema ) {
+	return [
+		serializePrimitiveTypes( schema ),
+		serializeObjectTypes( schema ),
+		serializePrimitiveArrayTypes( schema ),
+		serializeObjectArrayTypes( schema ),
+	]
+		.filter( Boolean )
+		.join( ', ' );
+}
+
+/**
+ * Generate documentation from theme.json schema.
+ *
+ * @param {JSONSchema} themeJson theme.json JSON schema
+ * @return {string} generated documentation
+ */
+function generateDocs( themeJson ) {
+	/** Markdown content. */
+	let md = '';
+
+	/* --------------- *
+	 * Settings        *
+	 * --------------- */
+	md += '## settings\n\n';
+	md += `${ themeJson.properties.settings.description }\n\n`;
+	const settings = [
+		// Top-level only properties.
+		...Object.entries( themeJson.properties.settings.allOf[ 1 ].properties )
+			.filter( ( [ property ] ) => property !== 'blocks' )
+			.map( ( [ property, subschema ] ) => [
+				property,
+				{
+					...subschema,
+					description: `${ subschema.description }\n\n**Note:** Top-level only property. Not available in blocks.`,
+				},
+			] ),
+		// Top-level and blocks properties.
+		...themeJson.properties.settings.allOf[ 0 ].allOf.flatMap(
+			( subschema ) => Object.entries( subschema.properties )
+		),
+	];
+	for ( const [ section, schema ] of settings ) {
+		md += `### ${ section }\n\n`;
+		md += `${ schema.description }\n\n`;
+		if ( schema.properties ) {
+			md += '| Property | Description | Type | Default |\n';
+			md += '| -------- | ----------- | ---- | ------- |\n';
+			const properties = Object.entries( schema.properties );
+			for ( const [ property, subschema ] of properties ) {
+				const description =
+					subschema.description?.split( '\n', 1 )[ 0 ] ?? '';
+				const types = generateTypes( subschema );
+				const defaultValue =
+					'default' in subschema
+						? `\`${ JSON.stringify( subschema.default ) }\``
+						: '';
+				md += `| ${ property } | ${ description } | ${ types } | ${ defaultValue } |\n`;
+			}
+			md += '\n';
+		}
+		md += `---\n\n`;
+	}
+
+	/* --------------- *
+	 * Styles          *
+	 * --------------- */
+	md += '## styles\n\n';
+	md += `${ themeJson.properties.styles.description }\n\n`;
+	const styles = Object.entries(
+		themeJson.properties.styles.allOf[ 0 ].properties
+	);
+	for ( const [ section, schema ] of styles ) {
+		md += `### ${ section }\n\n`;
+		md += `${ schema.description }\n\n`;
+		if ( schema.properties ) {
+			md += '| Property | Description | Type |\n';
+			md += '| -------- | ----------- | ---- |\n';
+			const properties = Object.entries( schema.properties );
+			for ( const [ property, subschema ] of properties ) {
+				// Assuming that the first line of a description is a summary.
+				const description =
+					subschema.description?.split( '\n', 1 )[ 0 ] ?? '';
+				const types = generateTypes( subschema );
+				md += `| ${ property } | ${ description } | ${ types } |\n`;
+			}
+			md += '\n';
+		}
+		md += `---\n\n`;
+	}
+
+	/* --------------- *
+	 * customTemplates *
+	 * --------------- */
+	md += '## customTemplates\n\n';
+	md += `${ themeJson.properties.customTemplates.description }\n\n`;
+	md += '| Property | Description | Type |\n';
+	md += '| -------- | ----------- | ---- |\n';
+	const customTemplatesProperties = Object.entries(
+		themeJson.properties.customTemplates.items.properties
+	);
+	for ( const [ property, subschema ] of customTemplatesProperties ) {
+		const { description } = subschema;
+		const types = generateTypes( subschema );
+		md += `| ${ property } | ${ description } | ${ types } |\n`;
+	}
+	md += '\n';
+
+	/* --------------- *
+	 * templateParts   *
+	 * --------------- */
+	md += '## templateParts\n\n';
+	md += `${ themeJson.properties.templateParts.description }\n\n`;
+	md += '| Property | Description | Type |\n';
+	md += '| -------- | ----------- | ---- |\n';
+	const templatePartsProperties = Object.entries(
+		themeJson.properties.templateParts.items.properties
+	);
+	for ( const [ property, subschema ] of templatePartsProperties ) {
+		const { description } = subschema;
+		const types = generateTypes( subschema );
+		md += `| ${ property } | ${ description } | ${ types } |\n`;
+	}
+	md += '\n';
+
+	/* --------------- *
+	 * patterns        *
+	 * --------------- */
+	md += '## patterns\n\n';
+	md += themeJson.properties.patterns.description + '\n\n';
+	md += `Type: ${ generateTypes( themeJson.properties.patterns ) }.\n`;
+
+	return md;
+}
+
+/**
+ * Main function.
+ */
+async function main() {
+	const themeJson = await $RefParser.dereference( THEME_JSON_SCHEMA_PATH, {
+		parse: { binary: false, text: false, yaml: false },
+		resolve: { external: false },
+	} );
+
+	const themeJsonReference = await fs.readFile( REFERENCE_DOC_PATH, {
+		encoding: 'utf8',
+		flag: 'r',
+	} );
+
+	const generatedDocs = generateDocs( themeJson );
+	const updatedThemeJsonReference = themeJsonReference.replace(
+		// `.` does not match new lines, but `[^]` will.
+		new RegExp( `${ START_TOKEN }[^]*${ END_TOKEN }` ),
+		`${ START_TOKEN }\n${ generatedDocs }\n${ END_TOKEN }`
+	);
+
+	await fs.writeFile( REFERENCE_DOC_PATH, updatedThemeJsonReference, {
+		encoding: 'utf8',
+	} );
+}
+
+main().catch( ( error ) => {
+	console.error( error );
+	process.exit( 1 );
+} );
diff --git a/bin/build-plugin-zip.sh b/bin/build-plugin-zip.sh
index 4ba931c4a4aeb6..c823ca6a8017f1 100755
--- a/bin/build-plugin-zip.sh
+++ b/bin/build-plugin-zip.sh
@@ -78,26 +78,16 @@ npm run build
 php bin/generate-gutenberg-php.php > gutenberg.tmp.php
 mv gutenberg.tmp.php gutenberg.php
 
-build_files=$(
-	ls build/*/*.{js,js.map,css,asset.php} \
-	build/block-library/blocks/*.php \
-	build/block-library/blocks/*/block.json \
-	build/block-library/blocks/*/*.{js,js.map,css,asset.php} \
-	build/edit-widgets/blocks/*/block.json \
-	build/widgets/blocks/*.php \
-	build/widgets/blocks/*/block.json \
-	build/style-engine/*.php \
-)
-
-
 # Generate the plugin zip file.
 status "Creating archive... 🎁"
-zip -r gutenberg.zip \
+zip --recurse-paths --no-dir-entries \
+	gutenberg.zip \
 	gutenberg.php \
 	lib \
 	packages/block-serialization-default-parser/*.php \
 	post-content.php \
-	$build_files \
+	build \
+	build-module \
 	readme.txt \
 	changelog.txt \
 	README.md
diff --git a/bin/check-latest-npm.js b/bin/check-latest-npm.js
deleted file mode 100644
index 8b9f86e95dd567..00000000000000
--- a/bin/check-latest-npm.js
+++ /dev/null
@@ -1,134 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-const { green, red, yellow } = require( 'chalk' );
-const { get } = require( 'https' );
-const { spawn } = require( 'child_process' );
-const semver = require( 'semver' );
-
-/**
- * Internal dependencies
- */
-const {
-	engines: { npm: npmRange },
-	// Ignore reason: `package.json` exists outside `bin` `rootDir`.
-	// @ts-ignore
-} = require( '../package.json' );
-
-/**
- * Returns a promise resolving with the version number of the latest available
- * version of npm.
- *
- * @return {Promise<string>} Promise resolving with latest npm version.
- */
-async function getLatestNPMVersion() {
-	return new Promise( ( resolve, reject ) => {
-		get(
-			'https://registry.npmjs.org/npm',
-			{
-				headers: {
-					// By passing a specialized `Accept` header, the registry
-					// will return an abbreviated form of the package data which
-					// includes enough detail to determine the latest version.
-					//
-					// See: https://github.com/npm/registry/blob/HEAD/docs/responses/package-metadata.md
-					Accept: 'application/vnd.npm.install-v1+json',
-				},
-			},
-			async ( response ) => {
-				if ( response.statusCode !== 200 ) {
-					return reject(
-						new Error( 'Package data for npm not found' )
-					);
-				}
-
-				let body = '';
-				for await ( const chunk of response ) {
-					body += chunk.toString();
-				}
-
-				let data;
-				try {
-					data = JSON.parse( body );
-				} catch {
-					return reject(
-						new Error(
-							'Package data for npm returned invalid response body'
-						)
-					);
-				}
-
-				const versions = Object.values( data[ 'dist-tags' ] );
-
-				resolve( semver.maxSatisfying( versions, npmRange ) );
-			}
-		).on( 'error', ( error ) => {
-			if (
-				/** @type {NodeJS.ErrnoException} */ ( error ).code ===
-				'ENOTFOUND'
-			) {
-				error =
-					new Error( `Could not contact the npm registry to determine latest version.
-
-This could be due to an intermittent outage of the service, or because you are not connected to the internet.
-
-Because it is important that \`package-lock.json\` files only be committed while running the latest version of npm, this commit has been blocked.
-
-If you are certain of your changes and desire to commit anyways, you should either connect to the internet or bypass commit verification using ${ yellow(
-						'git commit --no-verify'
-					) } .` );
-			}
-
-			reject( error );
-		} );
-	} );
-}
-
-/**
- * Returns a promise resolving with the version number of the local installed
- * version of npm.
- *
- * @return {Promise<string>} Promise resolving with local installed npm version.
- */
-async function getLocalNPMVersion() {
-	return new Promise( async ( resolve ) => {
-		// 'npm' doesn't work correctly on Windows.
-		// https://github.com/WordPress/gutenberg/issues/22484
-		const command = process.platform === 'win32' ? 'npm.cmd' : 'npm';
-		const childProcess = spawn( command, [ '-v' ] );
-
-		let output = '';
-		for await ( const chunk of childProcess.stdout ) {
-			output += chunk.toString();
-		}
-
-		resolve( output.trim() );
-	} );
-}
-
-Promise.all( [ getLatestNPMVersion(), getLocalNPMVersion() ] )
-	.then( ( [ latest, local ] ) => {
-		if ( latest !== local ) {
-			throw new Error(
-				`The local npm version does not match the expected latest version. Expected ${ green(
-					latest
-				) }, found ${ red( local ) }.
-
-It is required that you have the expected latest version of npm installed in order to commit a change to the package-lock.json file.
-
-Run ${ yellow(
-					`npm install --global npm@${ latest }`
-				) } to install the expected latest version of npm. Before retrying your commit, run ${ yellow(
-					'npm install'
-				) } once more to ensure the package-lock.json contents are correct. If there are any changes to the file, they should be included in your commit.`
-			);
-		}
-	} )
-	.catch( ( error ) => {
-		console.error(
-			'Latest npm check failed!\n\n' + error.toString() + '\n'
-		);
-		process.exitCode = 1;
-	} );
diff --git a/bin/check-licenses.mjs b/bin/check-licenses.mjs
new file mode 100755
index 00000000000000..458590e696a9fd
--- /dev/null
+++ b/bin/check-licenses.mjs
@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+import { spawnSync } from 'node:child_process';
+
+/**
+ * Internal dependencies
+ */
+import { checkDepsInTree } from '../packages/scripts/utils/license.js';
+
+const ignored = [ '@ampproject/remapping' ];
+
+/*
+ * `wp-scripts check-licenses` uses prod and dev dependencies of the package to scan for dependencies. With npm workspaces, workspace packages (the @wordpress/* packages) are not listed in the main package json and this approach does not work.
+ *
+ * Instead, work from an npm query that uses some custom information in package.json files to declare packages that are shipped with WordPress (and must be GPLv2 compatible) or other files that may use more permissive licenses.
+ */
+
+/**
+ * @typedef PackageInfo
+ * @property {string} name Package name.
+ */
+
+/** @type {ReadonlyArray<PackageInfo>} */
+const workspacePackages = JSON.parse(
+	spawnSync(
+		'npm',
+		[
+			'query',
+			'.workspace:attr([wpScript]), .workspace:attr([wpScriptModuleExports])',
+		],
+		/*
+		 * Set the max buffer to ~157MB, since the output size for
+		 * prod is ~21 MB and dev is ~110 MB
+		 */
+		{ maxBuffer: 1024 * 1024 * 150 }
+	).stdout
+);
+
+const packageNames = workspacePackages.map( ( { name } ) => name );
+
+const dependenciesToProcess = JSON.parse(
+	spawnSync(
+		'npm',
+		[
+			'ls',
+			'--json',
+			'--long',
+			'--all',
+			'--lockfile-only',
+			'--omit=dev',
+			...packageNames.map(
+				( packageName ) => `--workspace=${ packageName }`
+			),
+		],
+		/*
+		 * Set the max buffer to ~157MB, since the output size for
+		 * prod is ~21 MB and dev is ~110 MB
+		 */
+		{ maxBuffer: 1024 * 1024 * 150 }
+	).stdout
+).dependencies;
+
+checkDepsInTree( dependenciesToProcess, {
+	ignored,
+	gpl2: true,
+} );
diff --git a/bin/cherry-pick.mjs b/bin/cherry-pick.mjs
index 44bf05d2304029..b8661e696d7bd3 100644
--- a/bin/cherry-pick.mjs
+++ b/bin/cherry-pick.mjs
@@ -6,11 +6,13 @@ import readline from 'readline';
 
 import { spawnSync } from 'node:child_process';
 
-const LABEL = process.argv[ 2 ] || 'Backport to WP Minor Release';
+const REPO = 'WordPress/gutenberg';
+const LABEL = process.argv[ 2 ] || 'Backport to WP Beta/RC';
+const BACKPORT_COMPLETED_LABEL = 'Backported to WP Core';
 const BRANCH = getCurrentBranch();
 const GITHUB_CLI_AVAILABLE = spawnSync( 'gh', [ 'auth', 'status' ] )
-	?.stderr?.toString()
-	.includes( '✓ Logged in to github.com as' );
+	?.stdout?.toString()
+	.includes( '✓ Logged in to github.com' );
 
 const AUTO_PROPAGATE_RESULTS_TO_GITHUB = GITHUB_CLI_AVAILABLE;
 
@@ -112,14 +114,28 @@ function cli( command, args, pipe = false ) {
  */
 async function fetchPRs() {
 	const { items } = await GitHubFetch(
-		`/search/issues?q=is:pr state:closed sort:updated label:"${ LABEL }" repo:WordPress/gutenberg`
+		`/search/issues?per_page=100&q=is:pr state:closed sort:updated label:"${ LABEL }" repo:${ REPO }`
+	);
+	const PRs = items
+		// eslint-disable-next-line camelcase
+		.map( ( { id, number, title, pull_request } ) => ( {
+			id,
+			number,
+			title,
+			// eslint-disable-next-line camelcase
+			pull_request,
+		} ) )
+		// eslint-disable-next-line camelcase
+		.filter( ( { pull_request } ) => !! pull_request?.merged_at )
+		.sort(
+			( a, b ) =>
+				new Date( a?.pull_request?.merged_at ) -
+				new Date( b?.pull_request?.merged_at )
+		);
+
+	console.log(
+		'Found the following PRs to cherry-pick (sorted by closed date in ascending order): '
 	);
-	const PRs = items.map( ( { id, number, title } ) => ( {
-		id,
-		number,
-		title,
-	} ) );
-	console.log( 'Found the following PRs to cherry-pick: ' );
 	PRs.forEach( ( { number, title } ) =>
 		console.log( indent( `#${ number } – ${ title }` ) )
 	);
@@ -128,7 +144,7 @@ async function fetchPRs() {
 	const PRsWithMergeCommit = [];
 	for ( const PR of PRs ) {
 		const { merge_commit_sha: mergeCommitHash } = await GitHubFetch(
-			'/repos/WordPress/Gutenberg/pulls/' + PR.number
+			`/repos/${ REPO }/pulls/` + PR.number
 		);
 		PRsWithMergeCommit.push( {
 			...PR,
@@ -155,14 +171,25 @@ async function fetchPRs() {
  * @return {Promise<Object>} Parsed response JSON.
  */
 async function GitHubFetch( path ) {
+	const token = getGitHubAuthToken();
 	const response = await fetch( 'https://api.github.com' + path, {
 		headers: {
 			Accept: 'application/vnd.github.v3+json',
+			Authorization: `Bearer ${ token }`,
 		},
 	} );
 	return await response.json();
 }
 
+/**
+ * Retrieves the GitHub authentication token using `gh auth token`.
+ *
+ * @return {string} The GitHub authentication token.
+ */
+function getGitHubAuthToken() {
+	return cli( 'gh', [ 'auth', 'token' ] );
+}
+
 /**
  * Attempts to cherry-pick given PRs using `git` CLI command.
  *
@@ -323,6 +350,11 @@ function reportSummaryNextSteps( successes, failures ) {
 		nextSteps.push( 'Push this branch' );
 		nextSteps.push( 'Go to each of the cherry-picked Pull Requests' );
 		nextSteps.push( `Remove the ${ LABEL } label` );
+
+		if ( LABEL === 'Backport to WP Beta/RC' ) {
+			nextSteps.push( `Add the "${ BACKPORT_COMPLETED_LABEL }" label` );
+		}
+
 		nextSteps.push( 'Request a backport to wordpress-develop if required' );
 		nextSteps.push( 'Comment, say that PR just got cherry-picked' );
 	}
@@ -349,9 +381,22 @@ function reportSummaryNextSteps( successes, failures ) {
 function GHcommentAndRemoveLabel( pr ) {
 	const { number, cherryPickHash } = pr;
 	const comment = prComment( cherryPickHash );
+	const repo = [ '--repo', REPO ];
 	try {
-		cli( 'gh', [ 'pr', 'comment', number, '--body', comment ] );
-		cli( 'gh', [ 'pr', 'edit', number, '--remove-label', LABEL ] );
+		cli( 'gh', [ 'pr', 'comment', number, ...repo, '--body', comment ] );
+		cli( 'gh', [ 'pr', 'edit', number, ...repo, '--remove-label', LABEL ] );
+
+		if ( LABEL === 'Backport to WP Beta/RC' ) {
+			cli( 'gh', [
+				'pr',
+				'edit',
+				number,
+				...repo,
+				'--add-label',
+				BACKPORT_COMPLETED_LABEL,
+			] );
+		}
+
 		console.log( `✅ ${ number }: ${ comment }` );
 	} catch ( e ) {
 		console.log( `❌ ${ number }. ${ comment } ` );
@@ -402,7 +447,7 @@ function reportFailure( { number, title, error, mergeCommitHash } ) {
  * @return {string} PR URL.
  */
 function prUrl( number ) {
-	return `https://github.com/WordPress/gutenberg/pull/${ number } `;
+	return `https://github.com/${ REPO }/pull/${ number } `;
 }
 
 /**
@@ -435,7 +480,7 @@ function getCurrentBranch() {
  */
 async function reportGhUnavailable() {
 	console.log(
-		'Github CLI is not setup. This script will not be able to automatically'
+		'GitHub CLI is not setup. This script will not be able to automatically'
 	);
 	console.log(
 		'comment on the processed PRs and remove the backport label from them.'
diff --git a/bin/docker-compose.override.yml.template b/bin/docker-compose.override.yml.template
deleted file mode 100644
index 465211fe7a4a63..00000000000000
--- a/bin/docker-compose.override.yml.template
+++ /dev/null
@@ -1,17 +0,0 @@
-services:
-  wordpress-develop:
-    volumes:
-      - %PLUGIN_MOUNT_DIR%:/var/www/${LOCAL_DIR-src}/wp-content/plugins/%PLUGIN_INSTALL_DIR%
-      - %PLUGIN_MOUNT_DIR%/packages/e2e-tests/plugins:/var/www/${LOCAL_DIR-src}/wp-content/plugins/gutenberg-test-plugins
-      - %PLUGIN_MOUNT_DIR%/packages/e2e-tests/mu-plugins:/var/www/${LOCAL_DIR-src}/wp-content/mu-plugins
-  php:
-    volumes:
-      - %PLUGIN_MOUNT_DIR%:/var/www/${LOCAL_DIR-src}/wp-content/plugins/%PLUGIN_INSTALL_DIR%
-      - %PLUGIN_MOUNT_DIR%/packages/e2e-tests/plugins:/var/www/${LOCAL_DIR-src}/wp-content/plugins/gutenberg-test-plugins
-      - %PLUGIN_MOUNT_DIR%/packages/e2e-tests/mu-plugins:/var/www/${LOCAL_DIR-src}/wp-content/mu-plugins
-  cli:
-    volumes:
-      - %PLUGIN_MOUNT_DIR%:/var/www/${LOCAL_DIR-src}/wp-content/plugins/%PLUGIN_INSTALL_DIR%
-  phpunit:
-    volumes:
-      - %PLUGIN_MOUNT_DIR%:/var/www/${LOCAL_DIR-src}/wp-content/plugins/%PLUGIN_INSTALL_DIR%
diff --git a/bin/generate-php-sync-issue.mjs b/bin/generate-php-sync-issue.mjs
new file mode 100644
index 00000000000000..bd627aeb65107c
--- /dev/null
+++ b/bin/generate-php-sync-issue.mjs
@@ -0,0 +1,467 @@
+/**
+ * External dependencies
+ */
+
+import Octokit from '@octokit/rest';
+import fs from 'fs';
+
+import { fileURLToPath } from 'url';
+import nodePath, { dirname } from 'path';
+
+function getArg( argName ) {
+	const arg = process.argv.find( ( _arg ) =>
+		_arg.startsWith( `--${ argName }=` )
+	);
+	return arg ? arg.split( '=' )[ 1 ] : null;
+}
+
+const OWNER = 'wordpress';
+const REPO = 'gutenberg';
+const MAX_MONTHS_TO_QUERY = 4;
+
+// The following paths will be ignored when generating the issue content.
+const IGNORED_PATHS = [
+	'init.php', // plugin specific code.
+	'lib/load.php', // plugin specific code.
+	'lib/experiments-page.php', // experiments are plugin specific.
+	'packages/e2e-tests/plugins', // PHP files related to e2e tests only.
+	'packages/block-library', // packages are synced to WP Core via npm packages.
+];
+
+// PRs containing the following labels will be ignored when generating the issue content.
+const LABELS_TO_IGNORE = [
+	'Backport from WordPress Core', // PRs made "upstream" in Core that were synced back into Gutenberg.
+	'Backported to WP Core', // PRs that were synced into Core during a previous release.
+];
+
+const MAX_NESTING_LEVEL = 3;
+
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = dirname( __filename );
+
+const authToken = getArg( 'token' );
+const stableWPRelease = getArg( 'wpstable' );
+
+async function main() {
+	if ( ! authToken ) {
+		console.error(
+			'Error. The --token argument is required. See: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token'
+		);
+		process.exit( 1 );
+	}
+
+	if ( ! stableWPRelease ) {
+		console.error(
+			'Error. The --wpstable argument is required. It should be the current stable WordPress release (e.g. 6.4).'
+		);
+		process.exit( 1 );
+	}
+
+	const sinceArg = getArg( 'since' );
+	let since;
+
+	if ( sinceArg ) {
+		if ( validateDate( sinceArg ) ) {
+			since = sinceArg;
+		} else {
+			console.error(
+				`Error: The --since argument cannot be more than ${ MAX_MONTHS_TO_QUERY } months from the current date.`
+			);
+			process.exit( 1 );
+		}
+	} else {
+		console.error(
+			`Error. The --since argument is required (e.g. YYYY-MM-DD). This should be the date of the final Gutenberg release that was included in the last stable WP Core release (see https://developer.wordpress.org/block-editor/contributors/versions-in-wordpress/).`
+		);
+		process.exit( 1 );
+	}
+
+	console.log( 'Welcome to the PHP Sync Issue Generator!' );
+
+	console.log( '--------------------------------' );
+	console.log( '• Running script...' );
+
+	// These should be paths where we expect to find PHP files that
+	// will require syncing to WordPress Core. This list should be
+	// extremely selective.
+	const paths = [ '/lib', '/phpunit' ];
+
+	console.log( `• Fetching all commits made to ${ REPO } since: ${ since }` );
+	let commits = await fetchAllCommitsFromPaths( since, paths );
+
+	// Remove identical commits based on sha
+	commits = commits.reduce( ( acc, current ) => {
+		const x = acc.find( ( item ) => item.sha === current.sha );
+		if ( ! x ) {
+			return acc.concat( [ current ] );
+		}
+		return acc;
+	}, [] );
+
+	// Fetch the full commit data for each of the commits.
+	// This is because the /commits endpoint does not include the
+	// information about the `files` modified in the commit.
+	console.log(
+		`• Fetching full commit data for ${ commits.length } commits`
+	);
+	const commitsWithCommitData = await Promise.all(
+		commits.map( async ( commit ) => {
+			const commitData = await fetchCommit( commit.sha );
+
+			const fullPRData = await getPullRequestDataForCommit( commit.sha );
+
+			// Our Issue links to the PRs associated with the commits so we must
+			// provide this data. We could also get the PR data from the commit data,
+			// using getPullRequestDataForCommit, but that requires yet another
+			// network request. Therefore we optimise for trying to build
+			// the PR URL from the commit data we have available.
+			commitData.pullRequest = {
+				url: fullPRData?.html_url || buildPRURL( commit ),
+				creator:
+					fullPRData?.user?.login ||
+					commit?.author?.login ||
+					'unknown',
+				labels: fullPRData?.labels || [],
+			};
+
+			// if the PR labels contain any of the labels to ignore, skip this commit
+			// by returning null.
+			if (
+				commitData.pullRequest.labels.some( ( label ) =>
+					LABELS_TO_IGNORE.includes( label.name )
+				)
+			) {
+				return null;
+			}
+
+			return commitData;
+		} )
+	);
+
+	const processResult = pipe(
+		processCommits,
+		reduceNesting,
+		dedupePRsPerLevel,
+		removeEmptyLevels,
+		sortLevels
+	);
+
+	console.log( `• Processing ${ commitsWithCommitData.length } commits` );
+	const result = processResult( commitsWithCommitData );
+
+	console.log( `• Generating Issue content` );
+	const content = generateIssueContent( result );
+
+	// Write the Markdown content to a file
+	fs.writeFileSync( nodePath.join( __dirname, 'issueContent.md' ), content );
+}
+
+/**
+ * Checks if the first date is after the second date.
+ *
+ * @param {string} date1 - The first date.
+ * @param {string} date2 - The second date.
+ * @return {boolean} - Returns true if the first date is after the second date, false otherwise.
+ */
+function isAfter( date1, date2 ) {
+	return new Date( date1 ) > new Date( date2 );
+}
+
+function validateDate( sinceArg ) {
+	const sinceDate = new Date( sinceArg );
+	const maxPreviousDate = new Date();
+	maxPreviousDate.setMonth(
+		maxPreviousDate.getMonth() - MAX_MONTHS_TO_QUERY
+	);
+
+	return sinceDate >= maxPreviousDate;
+}
+
+async function octokitPaginate( method, params ) {
+	return octokitRequest( method, params, { paginate: true } );
+}
+
+async function octokitRequest( method = '', params = {}, settings = {} ) {
+	const octokit = new Octokit( { auth: authToken } );
+	params.owner = OWNER;
+	params.repo = REPO;
+
+	const requestType = settings?.paginate ? 'paginate' : 'request';
+
+	try {
+		const result = await octokit[ requestType ]( method, params );
+
+		if ( requestType === 'paginate' ) {
+			return result;
+		}
+		return result.data;
+	} catch ( error ) {
+		console.error(
+			`Error making request to ${ method }: ${ error.message }`
+		);
+		process.exit( 1 );
+	}
+}
+
+async function fetchAllCommitsFromPaths( since, paths ) {
+	let commits = [];
+
+	for ( const path of paths ) {
+		const pathCommits = await fetchAllCommits( since, path );
+		commits = [ ...commits, ...pathCommits ];
+	}
+
+	return commits;
+}
+
+function buildPRURL( commit ) {
+	const prIdMatch = commit.commit.message.match( /\(#(\d+)\)/ );
+	const prId = prIdMatch ? prIdMatch[ 1 ] : null;
+	return prId
+		? `https://github.com/WordPress/gutenberg/pull/${ prId }`
+		: `[Commit](${ commit.html_url })`;
+}
+
+function sortLevels( data ) {
+	function processLevel( levelData ) {
+		const processedData = {};
+
+		// Separate directories and files
+		const directories = {};
+		const files = {};
+
+		for ( const [ key, value ] of Object.entries( levelData ) ) {
+			if ( key.endsWith( '.php' ) ) {
+				files[ key ] = Array.isArray( value )
+					? value
+					: processLevel( value );
+			} else {
+				directories[ key ] = Array.isArray( value )
+					? value
+					: processLevel( value );
+			}
+		}
+
+		// Combine directories and files
+		Object.assign( processedData, directories, files );
+
+		return processedData;
+	}
+
+	return processLevel( data );
+}
+
+function removeEmptyLevels( data ) {
+	function processLevel( levelData ) {
+		const processedData = {};
+
+		for ( const [ key, value ] of Object.entries( levelData ) ) {
+			if ( Array.isArray( value ) ) {
+				if ( value.length > 0 ) {
+					processedData[ key ] = value;
+				}
+			} else {
+				const processedLevel = processLevel( value );
+				if ( Object.keys( processedLevel ).length > 0 ) {
+					processedData[ key ] = processedLevel;
+				}
+			}
+		}
+
+		return processedData;
+	}
+
+	return processLevel( data );
+}
+
+function dedupePRsPerLevel( data ) {
+	function processLevel( levelData ) {
+		const processedData = {};
+		const prSet = new Set();
+
+		for ( const [ key, value ] of Object.entries( levelData ) ) {
+			if ( Array.isArray( value ) ) {
+				processedData[ key ] = value.filter( ( commit ) => {
+					if ( ! prSet.has( commit.pullRequest.url ) ) {
+						prSet.add( commit.pullRequest.url );
+						return true;
+					}
+					return false;
+				} );
+			} else {
+				processedData[ key ] = processLevel( value );
+			}
+		}
+
+		return processedData;
+	}
+
+	return processLevel( data );
+}
+
+function reduceNesting( data ) {
+	function processLevel( levelData, level = 1 ) {
+		const processedData = {};
+
+		for ( const [ key, value ] of Object.entries( levelData ) ) {
+			if ( Array.isArray( value ) ) {
+				processedData[ key ] = value;
+			} else if ( level < MAX_NESTING_LEVEL ) {
+				processedData[ key ] = processLevel( value, level + 1 );
+			} else {
+				processedData[ key ] = flattenData( value );
+			}
+		}
+
+		return processedData;
+	}
+
+	function flattenData( nestedData ) {
+		let flatData = [];
+
+		for ( const value of Object.values( nestedData ) ) {
+			if ( Array.isArray( value ) ) {
+				flatData = [ ...flatData, ...value ];
+			} else {
+				flatData = [ ...flatData, ...flattenData( value ) ];
+			}
+		}
+
+		return flatData;
+	}
+
+	return processLevel( data );
+}
+
+function processCommits( commits ) {
+	const result = {};
+
+	// This dir sholud be ignored, since whatever is in there is already in core.
+	// It exists to provide compatibility for older releases, because we have to
+	// support the current and the previous WP versions.
+	// See: https://github.com/WordPress/gutenberg/pull/57890#pullrequestreview-1828994247.
+	const prevReleaseCompatDirToIgnore = `lib/compat/wordpress-${ stableWPRelease }`;
+
+	commits.forEach( ( commit ) => {
+		// Skip commits without an associated pull request
+		if ( ! commit?.pullRequest ) {
+			return;
+		}
+		commit.files.forEach( ( file ) => {
+			// Skip files that are not PHP files.
+			if ( ! file.filename.endsWith( '.php' ) ) {
+				return;
+			}
+
+			if (
+				[ ...IGNORED_PATHS, prevReleaseCompatDirToIgnore ].some(
+					( path ) =>
+						file.filename.startsWith( path ) ||
+						file.filename === path
+				)
+			) {
+				// Skip files within specific packages.
+				return;
+			}
+
+			const parts = file.filename.split( '/' );
+
+			let current = result;
+
+			// If the file is under 'phpunit', always add it to the 'phpunit' key
+			// as it's helpful to have a full list of commits that modify tests.
+			if ( parts.includes( 'phpunit' ) ) {
+				current.phpunit = current.phpunit || [];
+				current.phpunit = [ ...current.phpunit, commit ];
+			}
+
+			for ( let i = 0; i < parts.length; i++ ) {
+				const part = parts[ i ];
+
+				if ( i === parts.length - 1 ) {
+					current[ part ] = current[ part ] || [];
+					current[ part ] = [ ...current[ part ], commit ];
+				} else {
+					current[ part ] = current[ part ] || {};
+					current = current[ part ];
+				}
+			}
+		} );
+	} );
+
+	return result;
+}
+
+function formatPRLine( { pullRequest: pr } ) {
+	return `- [ ] ${ pr.url } - @${ pr.creator } | Trac ticket | Core backport PR \n`;
+}
+
+function formatHeading( level, key ) {
+	const emoji = key.endsWith( '.php' ) ? '📄' : '📁';
+	return `${ '#'.repeat( level ) } ${ emoji } ${ key }\n\n`;
+}
+
+function generateIssueContent( result, level = 1 ) {
+	let issueContent = '';
+	let isFirstSection = true;
+
+	for ( const [ key, value ] of Object.entries( result ) ) {
+		// Add horizontal rule divider between sections, but not before the first section
+		if ( level <= 2 && ! isFirstSection ) {
+			issueContent += '\n---\n';
+		}
+
+		issueContent += formatHeading( level, key );
+
+		if ( Array.isArray( value ) ) {
+			value.forEach( ( commit ) => {
+				issueContent += formatPRLine( commit );
+			} );
+		} else {
+			issueContent += generateIssueContent( value, level + 1 );
+		}
+
+		isFirstSection = false;
+	}
+
+	return issueContent;
+}
+
+async function fetchAllCommits( since, path ) {
+	return octokitPaginate( 'GET /repos/{owner}/{repo}/commits', {
+		since,
+		per_page: 30,
+		path,
+	} );
+}
+
+async function fetchCommit( sha ) {
+	return octokitRequest( 'GET /repos/{owner}/{repo}/commits/{sha}', {
+		sha,
+	} );
+}
+
+// eslint-disable-next-line no-unused-vars
+async function getPullRequestDataForCommit( commitSha ) {
+	const pullRequests = await octokitRequest(
+		'GET /repos/{owner}/{repo}/commits/{commit_sha}/pulls',
+		{
+			commit_sha: commitSha,
+		}
+	);
+
+	// If a related Pull Request is found, return its URL and creator
+	if ( pullRequests.length > 0 ) {
+		const pullRequest = pullRequests[ 0 ];
+		return pullRequest;
+	}
+
+	return null;
+}
+
+const pipe =
+	( ...fns ) =>
+	( x ) =>
+		fns.reduce( ( v, f ) => f( v ), x );
+
+main();
diff --git a/bin/generate-public-grammar.js b/bin/generate-public-grammar.js
deleted file mode 100755
index d66577adbc4d02..00000000000000
--- a/bin/generate-public-grammar.js
+++ /dev/null
@@ -1,121 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Internal dependencies
- */
-const parser = require( '../node_modules/pegjs/lib/parser.js' );
-
-/**
- * External dependencies
- */
-const fs = require( 'fs' );
-const path = require( 'path' );
-const grammarSource = fs.readFileSync(
-	'./packages/block-serialization-spec-parser/grammar.pegjs',
-	'utf8'
-);
-const grammar = parser.parse( grammarSource );
-
-function escape( text ) {
-	return text
-		.replace( /\t/g, '\\t' )
-		.replace( /\r/g, '\\r' )
-		.replace( /\n/g, '\\n' )
-		.replace( /\&/g, '&amp;' )
-		.replace( /</g, '&lt;' );
-}
-
-function isGroup( expression ) {
-	return (
-		[ 'choice', 'action', 'labeled', 'sequence' ].indexOf(
-			expression.type
-		) >= 0
-	);
-}
-
-function flattenUnary( expression ) {
-	const shouldWrap = isGroup( expression );
-	const inner = flatten( expression );
-	return shouldWrap ? '(' + inner + ')' : inner;
-}
-
-function flatten( expression ) {
-	switch ( expression.type ) {
-		// Terminal
-		case 'any':
-			return '.';
-		case 'rule_ref':
-			return expression.name;
-		case 'literal':
-			return '"' + escape( expression.value ) + '"';
-		case 'class':
-			return (
-				'[' +
-				( expression.inverted ? '^' : '' ) +
-				expression.parts
-					.map( ( part ) =>
-						escape(
-							Array.isArray( part ) ? part.join( '-' ) : part
-						)
-					)
-					.join( '' ) +
-				']' +
-				( expression.ignoreCase ? 'i' : '' )
-			);
-
-		// Unary
-		case 'zero_or_more':
-			return flattenUnary( expression.expression ) + '*';
-		case 'one_or_more':
-			return flattenUnary( expression.expression ) + '+';
-		case 'optional':
-			return flattenUnary( expression.expression ) + '?';
-		case 'simple_not':
-			return '!' + flattenUnary( expression.expression );
-
-		// Other groups
-		case 'sequence':
-			return expression.elements.map( flatten ).join( ' ' );
-		case 'choice':
-			const sep = expression.isRuleTop ? '\n  / ' : ' / ';
-			return expression.alternatives.map( flatten ).join( sep );
-		case 'group':
-			return '(' + flatten( expression.expression ) + ')';
-		case 'text':
-			// Avoid double parentheses
-			const inner = flatten( expression.expression );
-			const shouldWrap = inner.indexOf( '(' ) !== 0;
-			return shouldWrap ? '$(' + inner + ')' : '$' + inner;
-		case 'action':
-		case 'labeled':
-		case 'named':
-			return flatten( expression.expression );
-
-		// Top-level formatting
-		case 'grammar':
-			return `<dl>${ expression.rules.map( flatten ).join( '' ) }</dl>`;
-		case 'rule':
-			expression.expression.isRuleTop = true;
-			const displayName =
-				expression.expression.type === 'named'
-					? expression.expression.name
-					: '';
-			return (
-				`<dt>${ displayName }</dt>` +
-				`<dd><pre><header>${ expression.name }</header>  = ` +
-				`${ flatten( expression.expression ) }</pre></dd>`
-			);
-
-		default:
-			throw new Error( JSON.stringify( expression ) );
-	}
-}
-
-fs.writeFileSync(
-	path.join( __dirname, '..', 'docs', 'contributors', 'grammar.md' ),
-	`
-# Block Grammar
-
-${ flatten( grammar ) }
-`
-);
diff --git a/bin/list-experimental-api-matches.sh b/bin/list-experimental-api-matches.sh
new file mode 100755
index 00000000000000..d9399e63e5cf64
--- /dev/null
+++ b/bin/list-experimental-api-matches.sh
@@ -0,0 +1,65 @@
+#!/bin/sh
+
+# Generate a Markdown-formatted list of experimental APIs found across our
+# packages and lib, providing GitHub search links for each match.
+#
+# Experimental APIs must be regularly audited, particularly in the context of
+# major WordPress releases. This script allows release leads to generate a list
+# to share in release issues.
+#
+# @see example audit issue for WordPress 6.2:
+# https://github.com/WordPress/gutenberg/issues/47196
+
+# Exit if any command fails.
+set -e
+
+# Change to the root directory.
+cd "$(dirname "$0")"
+cd ..
+
+# POSIX: prefer standard grep over rg. Git is assumed present (ls-files), but
+# could be replaced with find.
+grep_experimental_apis() {
+	git ls-files packages/* lib \
+		| grep -E '\.(js|ts|jsx|tsx|php)$' \
+		| grep -v __tests__ \
+		| xargs grep -Eo '__experimental\w+'
+}
+
+# For each line as `<filepath>:<match>`, rewrite as `<package> <match>`.
+namespace() {
+	awk -F: '
+		{ print module($1), $2 }
+		function module(path) {
+			split(path, parts, "/")
+			if (parts[1] == "lib") return "lib"
+			return parts[1] "/" parts[2]
+		}'
+}
+
+# Like uniq, but applied across packages: if `__experimentalFoo` appears in
+# packages A and B, only keep the occurrence under A.
+compact() {
+	sort | uniq | awk '{
+		if (known_api[$2]) next
+		known_api[$2] = 1
+		print
+	}'
+}
+
+# Output a heading for each package and a link for each experimental API.
+format() {
+	awk '{
+		if (prev_dir != $1) {
+			if (NR > 1) print ""
+			printf "## `%s`\n", $1
+			prev_dir = $1
+		}
+		printf "[`%s`](/WordPress/gutenberg/search?q=%s)\n", $2, $2
+	}'
+}
+
+grep_experimental_apis \
+	| namespace \
+	| compact \
+	| format
diff --git a/bin/log-performance-results.js b/bin/log-performance-results.js
new file mode 100755
index 00000000000000..da22253546eb61
--- /dev/null
+++ b/bin/log-performance-results.js
@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' );
+const path = require( 'path' );
+const https = require( 'https' );
+const [ token, branch, hash, baseHash, timestamp ] = process.argv.slice( 2 );
+
+const resultsFiles = [
+	{
+		file: 'post-editor.performance-results.json',
+		metricsPrefix: '',
+	},
+	{
+		file: 'site-editor.performance-results.json',
+		metricsPrefix: 'site-editor-',
+	},
+	{
+		file: 'front-end-block-theme.performance-results.json',
+		metricsPrefix: 'block-theme-',
+	},
+	{
+		file: 'front-end-classic-theme.performance-results.json',
+		metricsPrefix: 'classic-theme-',
+	},
+];
+
+const performanceResults = resultsFiles.map( ( { file } ) =>
+	JSON.parse(
+		fs.readFileSync(
+			path.join( process.env.WP_ARTIFACTS_PATH, file ),
+			'utf8'
+		)
+	)
+);
+
+const data = new TextEncoder().encode(
+	JSON.stringify( {
+		branch,
+		hash,
+		baseHash,
+		timestamp,
+		metrics: resultsFiles.reduce( ( result, { metricsPrefix }, index ) => {
+			return {
+				...result,
+				...Object.fromEntries(
+					Object.entries(
+						performanceResults[ index ][ hash ] ?? {}
+					).map( ( [ key, value ] ) => [
+						metricsPrefix + key,
+						typeof value === 'object' ? value.q50 : value,
+					] )
+				),
+			};
+		}, {} ),
+		baseMetrics: resultsFiles.reduce(
+			( result, { metricsPrefix }, index ) => {
+				return {
+					...result,
+					...Object.fromEntries(
+						Object.entries(
+							performanceResults[ index ][ baseHash ] ?? {}
+						).map( ( [ key, value ] ) => [
+							metricsPrefix + key,
+							typeof value === 'object' ? value.q50 : value,
+						] )
+					),
+				};
+			},
+			{}
+		),
+	} )
+);
+
+const options = {
+	hostname: 'codehealth.vercel.app',
+	port: 443,
+	path: '/api/log?token=' + token,
+	method: 'POST',
+	headers: {
+		'Content-Type': 'application/json',
+		'Content-Length': data.length,
+	},
+};
+
+const req = https.request( options, ( res ) => {
+	console.log( `statusCode: ${ res.statusCode }` );
+
+	res.on( 'data', ( d ) => {
+		process.stdout.write( d );
+	} );
+} );
+
+req.on( 'error', ( error ) => {
+	console.error( error );
+} );
+
+req.write( data );
+req.end();
diff --git a/bin/log-perormance-results.js b/bin/log-perormance-results.js
deleted file mode 100755
index 0405b69791bdd0..00000000000000
--- a/bin/log-perormance-results.js
+++ /dev/null
@@ -1,53 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * External dependencies
- */
-const fs = require( 'fs' );
-const path = require( 'path' );
-const https = require( 'https' );
-const [ token, branch, hash, baseHash, timestamp ] = process.argv.slice( 2 );
-
-const performanceResults = JSON.parse(
-	fs.readFileSync(
-		path.join( __dirname, '../post-editor-performance-results.json' ),
-		'utf8'
-	)
-);
-
-const data = new TextEncoder().encode(
-	JSON.stringify( {
-		branch,
-		hash,
-		baseHash,
-		timestamp: parseInt( timestamp, 10 ),
-		metrics: performanceResults[ hash ],
-		baseMetrics: performanceResults[ baseHash ],
-	} )
-);
-
-const options = {
-	hostname: 'codehealth.vercel.app',
-	port: 443,
-	path: '/api/log?token=' + token,
-	method: 'POST',
-	headers: {
-		'Content-Type': 'application/json',
-		'Content-Length': data.length,
-	},
-};
-
-const req = https.request( options, ( res ) => {
-	console.log( `statusCode: ${ res.statusCode }` );
-
-	res.on( 'data', ( d ) => {
-		process.stdout.write( d );
-	} );
-} );
-
-req.on( 'error', ( error ) => {
-	console.error( error );
-} );
-
-req.write( data );
-req.end();
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index e82091ff843749..06e30efc6c6dc9 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -13,6 +13,8 @@ const postcss = require( 'postcss' );
  */
 const getBabelConfig = require( './get-babel-config' );
 
+const isDev = process.env.NODE_ENV === 'development';
+
 /**
  * Path to packages directory.
  *
@@ -27,10 +29,12 @@ const PACKAGES_DIR = path
  *
  * @type {Object}
  */
-const JS_ENVIRONMENTS = {
-	main: 'build',
-	module: 'build-module',
-};
+const JS_ENVIRONMENTS = isDev
+	? { module: 'build-module' }
+	: {
+			main: 'build',
+			module: 'build-module',
+	  };
 
 /**
  * Promisified fs.readFile.
@@ -103,9 +107,13 @@ async function buildCSS( file ) {
 		'animations',
 		'z-index',
 	]
-		// Editor styles should be excluded from the default CSS vars output.
+		// Editor and component styles should be excluded from the default CSS vars output.
 		.concat(
-			file.includes( 'common.scss' ) || ! file.includes( 'block-library' )
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
 				? [ 'default-custom-properties' ]
 				: []
 		)
@@ -118,9 +126,10 @@ async function buildCSS( file ) {
 		data: ''.concat( '@use "sass:math";', importLists, contents ),
 	} );
 
-	const result = await postcss(
-		require( '@wordpress/postcss-plugins-preset' )
-	).process( builtSass.css, {
+	const result = await postcss( [
+		require( 'postcss-local-keyframes' ),
+		...require( '@wordpress/postcss-plugins-preset' ),
+	] ).process( builtSass.css, {
 		from: 'src/app.css',
 		to: 'dest/app.css',
 	} );
diff --git a/bin/packages/build.js b/bin/packages/build.js
index f4597d4f1425fa..61914bab5700a7 100755
--- a/bin/packages/build.js
+++ b/bin/packages/build.js
@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 /**
  * External dependencies
  */
diff --git a/bin/packages/check-build-type-declaration-files.js b/bin/packages/check-build-type-declaration-files.js
new file mode 100644
index 00000000000000..ffc68c83b8da8e
--- /dev/null
+++ b/bin/packages/check-build-type-declaration-files.js
@@ -0,0 +1,124 @@
+/**
+ * This script verifies the published index.d.ts file for every package which both
+ * builds types and also sets checkJs to false in its tsconfig.json. (This scenario
+ * can cause unchecked errors in JS files to be included in the compiled types.)
+ *
+ * We do so by running `tsc --noEmit` on the $package/build-types/index.d.ts file.
+ * This also verifies everything index.d.ts references, so it checks the entire
+ * public api of the type declarations for that package.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/49650 for more discussion.
+ */
+
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' ).promises;
+const path = require( 'path' );
+const { exec } = require( 'child_process' );
+const chalk = require( 'chalk' );
+
+/**
+ * Returns whether a package needs its compiled types to be double-checked. This
+ * needs to happen when both of these are true:
+ * 1. The package compiles types. (It has a tsconfig file.)
+ * 2. The tsconfig sets checkJs to false.
+ *
+ * NOTE: In the future, if we run into issues parsing JSON, we should migrate to
+ * a proper json5 parser, such as the json5 npm package. The current regex just
+ * handles comments, which at the time is the only thing we use from JSON5.
+ *
+ * @param {string} packagePath Path to the package.
+ * @return {boolean} whether or not the package checksJs.
+ */
+async function packageNeedsExtraCheck( packagePath ) {
+	const configPath = path.join( packagePath, 'tsconfig.json' );
+
+	try {
+		const tsconfigRaw = await fs.readFile( configPath, 'utf-8' );
+		// Removes comments from the JSON5 string to convert it to plain JSON.
+		const jsonString = tsconfigRaw.replace( /\s+\/\/.*$/gm, '' );
+		const config = JSON.parse( jsonString );
+
+		// If checkJs both exists and is false, then we need the extra check.
+		return config.compilerOptions?.checkJs === false;
+	} catch ( e ) {
+		if ( e.code !== 'ENOENT' ) {
+			throw e;
+		}
+
+		// No tsconfig means no checkJs
+		return false;
+	}
+}
+
+// Returns the path to the build-types declaration file for a package if it exists.
+// Throws an error and exits the script otherwise.
+async function getDecFile( packagePath ) {
+	const decFile = path.join( packagePath, 'build-types', 'index.d.ts' );
+	try {
+		await fs.access( decFile );
+		return decFile;
+	} catch ( err ) {
+		console.error(
+			`Cannot access this declaration file. You may need to run tsc again: ${ decFile }`
+		);
+		process.exit( 1 );
+	}
+}
+
+async function typecheckDeclarations( file ) {
+	return new Promise( ( resolve, reject ) => {
+		exec(
+			`npx tsc --target esnext --moduleResolution node --noEmit --skipLibCheck "${ file }"`,
+			( error, stdout, stderr ) => {
+				if ( error ) {
+					reject( { file, error, stderr, stdout } );
+				} else {
+					resolve( { file, stdout } );
+				}
+			}
+		);
+	} );
+}
+
+async function checkUnverifiedDeclarationFiles() {
+	const packageDir = path.resolve( 'packages' );
+	const packageDirs = (
+		await fs.readdir( packageDir, { withFileTypes: true } )
+	)
+		.filter( ( dirent ) => dirent.isDirectory() )
+		.map( ( dirent ) => path.join( packageDir, dirent.name ) );
+
+	// Finds the compiled type declarations for each package which both checks
+	// types and has checkJs disabled.
+	const declarations = (
+		await Promise.all(
+			packageDirs.map( async ( pkg ) =>
+				( await packageNeedsExtraCheck( pkg ) )
+					? getDecFile( pkg )
+					: null
+			)
+		)
+	).filter( Boolean );
+
+	const tscResults = await Promise.allSettled(
+		declarations.map( typecheckDeclarations )
+	);
+
+	tscResults.forEach( ( { status, reason } ) => {
+		if ( status !== 'fulfilled' ) {
+			console.error(
+				chalk.red(
+					`Incorrect published types for ${ reason.file }:\n`
+				),
+				reason.stdout
+			);
+		}
+	} );
+
+	if ( tscResults.some( ( { status } ) => status !== 'fulfilled' ) ) {
+		process.exit( 1 );
+	}
+}
+checkUnverifiedDeclarationFiles();
diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js
index 91fe4b07d325e6..9427549cafaba6 100644
--- a/bin/packages/get-babel-config.js
+++ b/bin/packages/get-babel-config.js
@@ -11,6 +11,8 @@ module.exports = ( environment = '', file ) => {
 			name: `WP_BUILD_${ environment.toUpperCase() }`,
 		},
 	};
+	// Add `/* wp:polyfill */` magic comment where needed.
+	callerOpts.caller.addPolyfillComments = true;
 	switch ( environment ) {
 		case 'main':
 			// To be merged as a presetEnv option.
diff --git a/bin/packages/get-packages.js b/bin/packages/get-packages.js
index 695eee03c440e2..42ba08afed6f68 100644
--- a/bin/packages/get-packages.js
+++ b/bin/packages/get-packages.js
@@ -3,7 +3,6 @@
  */
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { isEmpty } = require( 'lodash' );
 
 /**
  * Absolute path to packages directory.
@@ -43,7 +42,7 @@ function hasModuleField( file ) {
 		return false;
 	}
 
-	return ! isEmpty( pkg.module );
+	return !! pkg.module;
 }
 
 /**
diff --git a/bin/packages/lint-staged-typecheck.js b/bin/packages/lint-staged-typecheck.js
index 30c513ec983c5e..8e656755134f18 100644
--- a/bin/packages/lint-staged-typecheck.js
+++ b/bin/packages/lint-staged-typecheck.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const _ = require( 'lodash' );
 const path = require( 'path' );
 const fs = require( 'fs' );
 const execa = require( 'execa' );
@@ -18,18 +17,22 @@ const tscPath = path.join( repoRoot, 'node_modules', '.bin', 'tsc' );
 const changedFiles = process.argv.slice( 2 );
 
 // Transform changed files to package directories containing tsconfig.json.
-const changedPackages = _.uniq(
-	changedFiles.map( ( fullPath ) => {
-		const relativePath = path.relative( repoRoot, fullPath );
-		return path.join( ...relativePath.split( path.sep ).slice( 0, 2 ) );
-	} )
-).filter( ( packageRoot ) =>
+const changedPackages = [
+	...new Set(
+		changedFiles.map( ( fullPath ) => {
+			const relativePath = path.relative( repoRoot, fullPath );
+			return path.join( ...relativePath.split( path.sep ).slice( 0, 2 ) );
+		} )
+	),
+].filter( ( packageRoot ) =>
 	fs.existsSync( path.join( packageRoot, 'tsconfig.json' ) )
 );
 
-try {
-	execa.sync( tscPath, [ '--build', ...changedPackages ] );
-} catch ( err ) {
-	console.error( err.stdout );
-	process.exitCode = 1;
+if ( changedPackages.length > 0 ) {
+	try {
+		execa.sync( tscPath, [ '--build', ...changedPackages ] );
+	} catch ( err ) {
+		console.error( err.stdout );
+		process.exitCode = 1;
+	}
 }
diff --git a/bin/plugin/commands/changelog.js b/bin/plugin/commands/changelog.js
index e6fb8c7054b16e..eac0f7b268d5bf 100644
--- a/bin/plugin/commands/changelog.js
+++ b/bin/plugin/commands/changelog.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { groupBy } = require( 'lodash' );
 const Octokit = require( '@octokit/rest' );
 const { sprintf } = require( 'sprintf-js' );
 const semver = require( 'semver' );
@@ -62,8 +61,7 @@ const UNKNOWN_FEATURE_FALLBACK_NAME = 'Uncategorized';
  * @type {Record<string,string>}
  */
 const LABEL_TYPE_MAPPING = {
-	'[Feature] Navigation Screen': 'Experiments',
-	'[Package] Dependency Extraction Webpack Plugin': 'Tools',
+	'[Type] Developer Documentation': 'Documentation',
 	'[Package] Jest Puppeteer aXe': 'Tools',
 	'[Package] E2E Tests': 'Tools',
 	'[Package] E2E Test Utils': 'Tools',
@@ -74,17 +72,19 @@ const LABEL_TYPE_MAPPING = {
 	'[Type] Project Management': 'Tools',
 	'[Package] Scripts': 'Tools',
 	'[Type] Build Tooling': 'Tools',
-	'Automated Testing': 'Tools',
+	'[Type] Automated Testing': 'Tools',
+	'[Package] Dependency Extraction Webpack Plugin': 'Tools',
+	'[Type] Code Quality': 'Code Quality',
+	'[Focus] Accessibility (a11y)': 'Accessibility',
+	'[Type] Performance': 'Performance',
+	'[Type] Security': 'Security',
+	'[Feature] Navigation Screen': 'Experiments',
 	'[Type] Experimental': 'Experiments',
 	'[Type] Bug': 'Bug Fixes',
 	'[Type] Regression': 'Bug Fixes',
-	'[Type] Feature': 'Features',
 	'[Type] Enhancement': 'Enhancements',
 	'[Type] New API': 'New APIs',
-	'[Type] Performance': 'Performance',
-	'[Type] Developer Documentation': 'Documentation',
-	'[Type] Code Quality': 'Code Quality',
-	'[Type] Security': 'Security',
+	'[Type] Feature': 'Features',
 };
 
 /**
@@ -108,32 +108,30 @@ const LABEL_FEATURE_MAPPING = {
 	'[Feature] Patterns': 'Patterns',
 	'[Feature] Blocks': 'Block Library',
 	'[Feature] Inserter': 'Block Editor',
+	'[Feature] Interactivity API': 'Interactivity API',
 	'[Feature] Drag and Drop': 'Block Editor',
 	'[Feature] Block Multi Selection': 'Block Editor',
 	'[Feature] Link Editing': 'Block Editor',
 	'[Feature] Raw Handling': 'Block Editor',
 	'[Package] Edit Post': 'Post Editor',
 	'[Package] Icons': 'Icons',
-	'[Package] Block Editor': 'Block Editor',
+	'[Package] Block editor': 'Block Editor',
 	'[Package] Block library': 'Block Library',
 	'[Package] Editor': 'Post Editor',
+	'[Package] Edit Site': 'Site Editor',
 	'[Package] Edit Widgets': 'Widgets Editor',
 	'[Package] Widgets Customizer': 'Widgets Editor',
 	'[Package] Components': 'Components',
 	'[Package] Block Library': 'Block Library',
 	'[Package] Rich text': 'Block Editor',
 	'[Package] Data': 'Data Layer',
+	'[Package] Commands': 'Commands',
 	'[Block] Legacy Widget': 'Widgets Editor',
 	'REST API Interaction': 'REST API',
 	'New Block': 'Block Library',
-	'Accessibility (a11y)': 'Accessibility',
-	'[a11y] Color Contrast': 'Accessibility',
-	'[a11y] Keyboard & Focus': 'Accessibility',
-	'[a11y] Labelling': 'Accessibility',
-	'[a11y] Zooming': 'Accessibility',
 	'[Package] E2E Tests': 'Testing',
 	'[Package] E2E Test Utils': 'Testing',
-	'Automated Testing': 'Testing',
+	'[Type] Automated Testing': 'Testing',
 	'CSS Styling': 'CSS & Styling',
 	'developer-docs': 'Documentation',
 	'[Type] Developer Documentation': 'Documentation',
@@ -154,6 +152,7 @@ const GROUP_TITLE_ORDER = [
 	'Enhancements',
 	'New APIs',
 	'Bug Fixes',
+	`Accessibility`,
 	'Performance',
 	'Experiments',
 	'Documentation',
@@ -224,9 +223,18 @@ function getTypesByLabels( labels ) {
 		...new Set(
 			labels
 				.filter( ( label ) =>
-					Object.keys( LABEL_TYPE_MAPPING ).includes( label )
+					Object.keys( LABEL_TYPE_MAPPING )
+						.map( ( currentLabel ) => currentLabel.toLowerCase() )
+						.includes( label.toLowerCase() )
 				)
-				.map( ( label ) => LABEL_TYPE_MAPPING[ label ] )
+				.map( ( label ) => {
+					const lowerCaseLabel =
+						Object.keys( LABEL_TYPE_MAPPING ).find(
+							( key ) => key.toLowerCase() === label.toLowerCase()
+						) || label;
+
+					return LABEL_TYPE_MAPPING[ lowerCaseLabel ];
+				} )
 		),
 	];
 }
@@ -240,11 +248,24 @@ function getTypesByLabels( labels ) {
  * @return {string[]} Feature candidates.
  */
 function mapLabelsToFeatures( labels ) {
-	return labels
-		.filter( ( label ) =>
-			Object.keys( LABEL_FEATURE_MAPPING ).includes( label )
-		)
-		.map( ( label ) => LABEL_FEATURE_MAPPING[ label ] );
+	return [
+		...new Set(
+			labels
+				.filter( ( label ) =>
+					Object.keys( LABEL_FEATURE_MAPPING )
+						.map( ( currentLabel ) => currentLabel.toLowerCase() )
+						.includes( label.toLowerCase() )
+				)
+				.map( ( label ) => {
+					const lowerCaseLabel =
+						Object.keys( LABEL_FEATURE_MAPPING ).find(
+							( key ) => key.toLowerCase() === label.toLowerCase()
+						) || label;
+
+					return LABEL_FEATURE_MAPPING[ lowerCaseLabel ];
+				} )
+		),
+	];
 }
 
 /**
@@ -304,12 +325,6 @@ function getIssueType( issue ) {
 		...getTypesByTitle( issue.title ),
 	];
 
-	// Force all tasks identified as Documentation tasks
-	// to appear under the main "Documentation" section.
-	if ( candidates.includes( 'Documentation' ) ) {
-		return 'Documentation';
-	}
-
 	return candidates.length ? candidates.sort( sortType )[ 0 ] : 'Various';
 }
 
@@ -378,7 +393,7 @@ function getIssueFeature( issue ) {
  */
 function sortType( a, b ) {
 	const [ aIndex, bIndex ] = [ a, b ].map( ( title ) => {
-		return Object.keys( LABEL_TYPE_MAPPING ).indexOf( title );
+		return Object.values( LABEL_TYPE_MAPPING ).indexOf( title );
 	} );
 
 	return aIndex - bIndex;
@@ -479,6 +494,21 @@ const createOmitByLabel = ( labels ) => ( text, issue ) =>
 		? undefined
 		: text;
 
+/**
+ * Higher-order function which returns a normalization function to omit by issue
+ * label starting with any of the given prefixes
+ *
+ * @param {string[]} prefixes Label prefixes from which to determine if given entry
+ *                            should be omitted.
+ *
+ * @return {WPChangelogNormalization} Normalization function.
+ */
+const createOmitByLabelPrefix = ( prefixes ) => ( text, issue ) =>
+	issue.labels.some( ( label ) =>
+		prefixes.some( ( prefix ) => label.name.startsWith( prefix ) )
+	)
+		? undefined
+		: text;
 /**
  * Given an issue title and issue, returns the title with redundant grouping
  * type details removed. The prefix is redundant since it would already be clear
@@ -523,7 +553,7 @@ function removeFeaturePrefix( text ) {
  * @type {Array<WPChangelogNormalization>}
  */
 const TITLE_NORMALIZATIONS = [
-	createOmitByLabel( [ 'Mobile App Android/iOS' ] ),
+	createOmitByLabelPrefix( [ 'Mobile App' ] ),
 	createOmitByTitlePrefix( [ '[rnmobile]', '[mobile]', 'Mobile Release' ] ),
 	removeRedundantTypePrefix,
 	reword,
@@ -576,11 +606,11 @@ function getEntry( issue ) {
 
 /**
  * Builds a formatted string of the Issue/PR title with a link
- * to the Github URL for that item.
+ * to the GitHub URL for that item.
  *
  * @param {string} title  the title of the Issue/PR.
  * @param {number} number the ID/number of the Issue/PR.
- * @param {string} url    the URL of the Github Issue/PR.
+ * @param {string} url    the URL of the GitHub Issue/PR.
  * @return {string} the formatted item
  */
 function getFormattedItemDescription( title, number, url ) {
@@ -711,9 +741,19 @@ async function fetchAllPullRequests( octokit, settings ) {
 function getChangelog( pullRequests ) {
 	let changelog = '## Changelog\n\n';
 
-	const groupedPullRequests = groupBy(
-		skipCreatedByBots( pullRequests ),
-		getIssueType
+	const groupedPullRequests = skipCreatedByBots( pullRequests ).reduce(
+		(
+			/** @type {Record<string, IssuesListForRepoResponseItem[]>} */ acc,
+			pr
+		) => {
+			const issueType = getIssueType( pr );
+			if ( ! acc[ issueType ] ) {
+				acc[ issueType ] = [];
+			}
+			acc[ issueType ].push( pr );
+			return acc;
+		},
+		{}
 	);
 
 	const sortedGroups = Object.keys( groupedPullRequests ).sort( sortGroup );
@@ -732,7 +772,20 @@ function getChangelog( pullRequests ) {
 		changelog += '### ' + group + '\n\n';
 
 		// Group PRs within this section into "Features".
-		const featureGroups = groupBy( groupPullRequests, getIssueFeature );
+		const featureGroups = groupPullRequests.reduce(
+			(
+				/** @type {Record<string, IssuesListForRepoResponseItem[]>} */ acc,
+				pr
+			) => {
+				const issueFeature = getIssueFeature( pr );
+				if ( ! acc[ issueFeature ] ) {
+					acc[ issueFeature ] = [];
+				}
+				acc[ issueFeature ].push( pr );
+				return acc;
+			},
+			{}
+		);
 
 		const featuredGroupNames = sortFeatureGroups( featureGroups );
 
@@ -803,7 +856,7 @@ function sortFeatureGroups( featureGroups ) {
 }
 
 /**
- * Returns a list of PRs created by first time contributors based on the Github
+ * Returns a list of PRs created by first time contributors based on the GitHub
  * label associated with the PR. Also filters out any "bots".
  *
  * @param {IssuesListForRepoResponseItem[]} pullRequests List of pull requests.
@@ -903,10 +956,14 @@ function getContributorProps( pullRequests ) {
 		getContributorPropsMarkdownList,
 	] )( pullRequests );
 
+	if ( ! contributorsList ) {
+		return '';
+	}
+
 	return (
-		'## First time contributors' +
+		'## First-time contributors' +
 		'\n\n' +
-		'The following PRs were merged by first time contributors:' +
+		'The following PRs were merged by first-time contributors:' +
 		'\n\n' +
 		contributorsList
 	);
@@ -1023,6 +1080,7 @@ async function getReleaseChangelog( options ) {
 	capitalizeAfterColonSeparatedPrefix,
 	createOmitByTitlePrefix,
 	createOmitByLabel,
+	createOmitByLabelPrefix,
 	addTrailingPeriod,
 	getNormalizedTitle,
 	getReleaseChangelog,
@@ -1037,4 +1095,5 @@ async function getReleaseChangelog( options ) {
 	getChangelog,
 	getUniqueByUsername,
 	skipCreatedByBots,
+	mapLabelsToFeatures,
 };
diff --git a/bin/plugin/commands/common.js b/bin/plugin/commands/common.js
index 59abfa93447ef3..067e50bb6440a2 100644
--- a/bin/plugin/commands/common.js
+++ b/bin/plugin/commands/common.js
@@ -46,7 +46,7 @@ function calculateVersionBumpFromChangelog(
 	let changesDetected = false;
 	let versionBump = null;
 	for ( const line of lines ) {
-		const lineNormalized = line.toLowerCase().trimLeft();
+		const lineNormalized = line.toLowerCase().trimStart();
 		// Detect unpublished changes first.
 		if ( lineNormalized.startsWith( '## unreleased' ) ) {
 			changesDetected = true;
diff --git a/bin/plugin/commands/packages.js b/bin/plugin/commands/packages.js
index c085201a235001..d70baf4f91bfa7 100644
--- a/bin/plugin/commands/packages.js
+++ b/bin/plugin/commands/packages.js
@@ -25,6 +25,7 @@ const {
 	findPluginReleaseBranchName,
 } = require( './common' );
 const { join } = require( 'path' );
+const pluginConfig = require( '../config' );
 
 /**
  * Release type names.
@@ -82,24 +83,14 @@ async function checkoutNpmReleaseBranch( {
 	/*
 	 * Create the release branch.
 	 *
-	 * Note that we are grabbing an arbitrary depth of commits
-	 * during the fetch. When `lerna` attempts to determine if
-	 * a package needs an update, it looks at `git` history,
-	 * and if we have pruned that history it will pre-emptively
-	 * publish when it doesn't need to.
-	 *
-	 * We could set a different arbitrary depth if this isn't
-	 * long enough or if it's excessive. We could also try and
-	 * find a way to more specifically fetch what we expect to
-	 * change. For example, if we knew we'll be performing
-	 * updates every two weeks, we might be conservative and
-	 * use `--shallow-since=4.weeks.ago`.
-	 *
-	 * At the time of writing, a depth of 100 pulls in all
-	 * `trunk` commits from within the past week.
+	 * Note that we are grabbing an arbitrary depth of commits (999) during the fetch.
+	 * When Lerna attempts to determine if a package needs an update, it looks at
+	 * `git` history to find the commit created during the previous npm publishing.
+	 * Lerna assumes that all packages need publishing if it can't access
+	 * the necessary information.
 	 */
 	await SimpleGit( gitWorkingDirectoryPath )
-		.fetch( npmReleaseBranch, [ '--depth=100' ] )
+		.fetch( 'origin', npmReleaseBranch, [ '--depth=999' ] )
 		.checkout( npmReleaseBranch );
 	log(
 		'>> The local npm release branch ' +
@@ -144,11 +135,12 @@ async function runNpmReleaseBranchSyncStep( pluginReleaseBranch, config ) {
 		/*
 		 * Replace content from remote branch.
 		 *
-		 * @TODO: What is our goal here? Could `git reset --hard origin/${pluginReleaseBranch}` work?
+		 * @todo What is our goal here? Could `git reset --hard origin/${pluginReleaseBranch}` work?
 		 *        Why are we manually removing and then adding files back in?
 		 */
 		await repo
 			.raw( 'rm', '-r', '.' )
+			.fetch( 'origin', pluginReleaseBranch, [ '--depth=1' ] )
 			.raw( 'checkout', `origin/${ pluginReleaseBranch }`, '--', '.' );
 
 		const { commit: commitHash } = await repo.commit(
@@ -196,10 +188,9 @@ async function updatePackages( config ) {
 	);
 	const changelogFilesPublicPackages = changelogFiles.filter(
 		( changelogPath ) => {
-			const pkg = require( path.join(
-				path.dirname( changelogPath ),
-				'package.json'
-			) );
+			const pkg = require(
+				path.join( path.dirname( changelogPath ), 'package.json' )
+			);
 			return pkg.private !== true;
 		}
 	);
@@ -411,13 +402,27 @@ async function publishPackagesToNpm( {
 		);
 	} else if ( [ 'bugfix', 'wp' ].includes( releaseType ) ) {
 		log( '>> Publishing modified packages to npm.' );
-		await command(
-			`npx lerna publish ${ minimumVersionBump } --dist-tag ${ distTag } --no-private ${ yesFlag } ${ noVerifyAccessFlag }`,
-			{
-				cwd: gitWorkingDirectoryPath,
-				stdio: 'inherit',
-			}
-		);
+		try {
+			await command(
+				`npx lerna publish ${ minimumVersionBump } --dist-tag ${ distTag } --no-private ${ yesFlag } ${ noVerifyAccessFlag }`,
+				{
+					cwd: gitWorkingDirectoryPath,
+					stdio: 'inherit',
+				}
+			);
+		} catch {
+			log(
+				'>> Trying to finish failed publishing of modified npm packages.'
+			);
+			await SimpleGit( gitWorkingDirectoryPath ).reset( 'hard' );
+			await command(
+				`npx lerna publish from-package --dist-tag ${ distTag } ${ yesFlag } ${ noVerifyAccessFlag }`,
+				{
+					cwd: gitWorkingDirectoryPath,
+					stdio: 'inherit',
+				}
+			);
+		}
 	} else {
 		log(
 			'>> Bumping version of public packages changed since the last release.'
@@ -431,13 +436,27 @@ async function publishPackagesToNpm( {
 		);
 
 		log( '>> Publishing modified packages to npm.' );
-		await command(
-			`npx lerna publish from-package ${ yesFlag } ${ noVerifyAccessFlag }`,
-			{
-				cwd: gitWorkingDirectoryPath,
-				stdio: 'inherit',
-			}
-		);
+		try {
+			await command(
+				`npx lerna publish from-package ${ yesFlag } ${ noVerifyAccessFlag }`,
+				{
+					cwd: gitWorkingDirectoryPath,
+					stdio: 'inherit',
+				}
+			);
+		} catch {
+			log(
+				'>> Trying to finish failed publishing of modified npm packages.'
+			);
+			await SimpleGit( gitWorkingDirectoryPath ).reset( 'hard' );
+			await command(
+				`npx lerna publish from-package ${ yesFlag } ${ noVerifyAccessFlag }`,
+				{
+					cwd: gitWorkingDirectoryPath,
+					stdio: 'inherit',
+				}
+			);
+		}
 	}
 
 	const afterCommitHash = await SimpleGit( gitWorkingDirectoryPath ).revparse(
@@ -530,7 +549,11 @@ async function runPackagesRelease( config, customMessages ) {
 			config.abortMessage,
 			async () => {
 				log( '>> Cloning the Git repository' );
-				await SimpleGit( gitPath ).clone( config.gitRepositoryURL );
+				await SimpleGit().clone(
+					pluginConfig.gitRepositoryURL,
+					gitPath,
+					[ '--depth=1', '--no-single-branch' ]
+				);
 				log( `   >> successfully clone into: ${ gitPath }` );
 			}
 		);
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 31a537f373731d..a945319a5491b1 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
+const os = require( 'os' );
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { mapValues, kebabCase } = require( 'lodash' );
 const SimpleGit = require( 'simple-git' );
 
 /**
@@ -14,10 +14,15 @@ const {
 	runShellScript,
 	readJSONFile,
 	askForConfirmation,
-	getRandomTemporaryPath,
+	getFilesFromDir,
 } = require( '../lib/utils' );
 const config = require( '../config' );
 
+const ARTIFACTS_PATH =
+	process.env.WP_ARTIFACTS_PATH || path.join( process.cwd(), 'artifacts' );
+const RAW_RESULTS_FILE_SUFFIX = '.performance-results.raw.json';
+const RESULTS_FILE_SUFFIX = '.performance-results.json';
+
 /**
  * @typedef WPPerformanceCommandOptions
  *
@@ -28,145 +33,196 @@ const config = require( '../config' );
  */
 
 /**
- * @typedef WPRawPerformanceResults
+ * A logging helper for printing steps and their substeps.
  *
- * @property {number[]} serverResponse       Represents the time the server takes to respond.
- * @property {number[]} firstPaint           Represents the time when the user agent first rendered after navigation.
- * @property {number[]} domContentLoaded     Represents the time immediately after the document's DOMContentLoaded event completes.
- * @property {number[]} loaded               Represents the time when the load event of the current document is completed.
- * @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[]} focus                Average block selection time.
- * @property {number[]} inserterOpen         Average time to open global inserter.
- * @property {number[]} inserterSearch       Average time to search the inserter.
- * @property {number[]} inserterHover        Average time to move mouse between two block item in the inserter.
- * @property {number[]} listViewOpen         Average time to open listView
+ * @param {number} indent Value to indent the log.
+ * @param {any}    msg    Message to log.
+ * @param {...any} args   Rest of the arguments to pass to console.log.
  */
+function logAtIndent( indent, msg, ...args ) {
+	const prefix = indent === 0 ? '▶ ' : '> ';
+	const newline = indent === 0 ? '\n' : '';
+	return log( newline + '    '.repeat( indent ) + prefix + msg, ...args );
+}
 
 /**
- * @typedef WPPerformanceResults
+ * Sanitizes branch name to be used in a path or a filename.
+ *
+ * @param {string} branch
  *
- * @property {number=} serverResponse       Represents the time the server takes to respond.
- * @property {number=} firstPaint           Represents the time when the user agent first rendered after navigation.
- * @property {number=} domContentLoaded     Represents the time immediately after the document's DOMContentLoaded event completes.
- * @property {number=} loaded               Represents the time when the load event of the current document is completed.
- * @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=} minType              Minimum type time.
- * @property {number=} maxType              Maximum type time.
- * @property {number=} focus                Average block selection time.
- * @property {number=} minFocus             Min block selection time.
- * @property {number=} maxFocus             Max block selection time.
- * @property {number=} inserterOpen         Average time to open global inserter.
- * @property {number=} minInserterOpen      Min time to open global inserter.
- * @property {number=} maxInserterOpen      Max time to open global inserter.
- * @property {number=} inserterSearch       Average time to open global inserter.
- * @property {number=} minInserterSearch    Min time to open global inserter.
- * @property {number=} maxInserterSearch    Max time to open global inserter.
- * @property {number=} inserterHover        Average time to move mouse between two block item in the inserter.
- * @property {number=} minInserterHover     Min time to move mouse between two block item in the inserter.
- * @property {number=} maxInserterHover     Max time to move mouse between two block item in the inserter.
- * @property {number=} listViewOpen         Average time to open list view.
- * @property {number=} minListViewOpen      Min time to open list view.
- * @property {number=} maxListViewOpen      Max time to open list view.
+ * @return {string} Sanitized branch name.
  */
+function sanitizeBranchName( branch ) {
+	return branch.replace( /[^a-zA-Z0-9-]/g, '-' );
+}
 
 /**
- * Computes the average number from an array numbers.
- *
- * @param {number[]} array
- *
- * @return {number} Average.
+ * @param {number} number
  */
-function average( array ) {
-	return array.reduce( ( a, b ) => a + b, 0 ) / array.length;
+function fixed( number ) {
+	return Math.round( number * 100 ) / 100;
 }
 
 /**
- * Computes the median number from an array numbers.
- *
  * @param {number[]} array
- *
- * @return {number} Median.
  */
-function median( array ) {
-	const mid = Math.floor( array.length / 2 ),
-		numbers = [ ...array ].sort( ( a, b ) => a - b );
-	return array.length % 2 !== 0
-		? numbers[ mid ]
-		: ( numbers[ mid - 1 ] + numbers[ mid ] ) / 2;
+function quartiles( array ) {
+	const numbers = array.slice().sort( ( a, b ) => a - b );
+
+	/**
+	 * @param {number} offset
+	 * @param {number} length
+	 */
+	function med( offset, length ) {
+		if ( length % 2 === 0 ) {
+			// even length, average of two middle numbers
+			return (
+				( numbers[ offset + length / 2 - 1 ] +
+					numbers[ offset + length / 2 ] ) /
+				2
+			);
+		}
+
+		// odd length, exact middle point
+		return numbers[ offset + ( length - 1 ) / 2 ];
+	}
+
+	const q50 = med( 0, numbers.length );
+
+	let q25, q75;
+	if ( numbers.length % 2 === 0 ) {
+		// medians of two exact halves
+		const mid = numbers.length / 2;
+		q25 = med( 0, mid );
+		q75 = med( mid, mid );
+	} else {
+		// quartiles are average of medians of the smaller and bigger slice
+		const midl = ( numbers.length - 1 ) / 2;
+		const midh = ( numbers.length + 1 ) / 2;
+		q25 = ( med( 0, midl ) + med( 0, midh ) ) / 2;
+		q75 = ( med( midl, midh ) + med( midh, midl ) ) / 2;
+	}
+	return { q25, q50, q75 };
 }
 
 /**
- * Rounds and format a time passed in milliseconds.
- *
- * @param {number} number
- *
- * @return {number} Formatted time.
+ * @param {number[]|undefined} values
  */
-function formatTime( number ) {
-	const factor = Math.pow( 10, 2 );
-	return Math.round( number * factor ) / factor;
+function stats( values ) {
+	if ( ! values || values.length === 0 ) {
+		return undefined;
+	}
+	const { q25, q50, q75 } = quartiles( values );
+	const cnt = values.length;
+	return {
+		q25: fixed( q25 ),
+		q50: fixed( q50 ),
+		q75: fixed( q75 ),
+		cnt,
+	};
 }
 
 /**
- * Curate the raw performance results.
- *
- * @param {WPRawPerformanceResults} results
+ * Nicely formats a given value.
  *
- * @return {WPPerformanceResults} Curated Performance results.
+ * @param {string} metric Metric.
+ * @param {number} value
  */
-function curateResults( results ) {
-	return {
-		serverResponse: average( results.serverResponse ),
-		firstPaint: average( results.firstPaint ),
-		domContentLoaded: average( results.domContentLoaded ),
-		loaded: average( results.loaded ),
-		firstContentfulPaint: average( results.firstContentfulPaint ),
-		firstBlock: average( results.firstBlock ),
-		type: average( results.type ),
-		minType: Math.min( ...results.type ),
-		maxType: Math.max( ...results.type ),
-		focus: average( results.focus ),
-		minFocus: Math.min( ...results.focus ),
-		maxFocus: Math.max( ...results.focus ),
-		inserterOpen: average( results.inserterOpen ),
-		minInserterOpen: Math.min( ...results.inserterOpen ),
-		maxInserterOpen: Math.max( ...results.inserterOpen ),
-		inserterSearch: average( results.inserterSearch ),
-		minInserterSearch: Math.min( ...results.inserterSearch ),
-		maxInserterSearch: Math.max( ...results.inserterSearch ),
-		inserterHover: average( results.inserterHover ),
-		minInserterHover: Math.min( ...results.inserterHover ),
-		maxInserterHover: Math.max( ...results.inserterHover ),
-		listViewOpen: average( results.listViewOpen ),
-		minListViewOpen: Math.min( ...results.listViewOpen ),
-		maxListViewOpen: Math.max( ...results.listViewOpen ),
-	};
+function formatValue( metric, value ) {
+	if ( 'wpMemoryUsage' === metric ) {
+		return `${ ( value / Math.pow( 10, 6 ) ).toFixed( 2 ) } MB`;
+	}
+
+	if ( 'wpDbQueries' === metric ) {
+		return value.toString();
+	}
+
+	return `${ value } ms`;
+}
+
+/**
+ * @param {string}                 m
+ * @param {Record<string, number>} s
+ */
+function printStats( m, s ) {
+	const pp = fixed( ( 100 * ( s.q75 - s.q50 ) ) / s.q50 );
+	const mp = fixed( ( 100 * ( s.q50 - s.q25 ) ) / s.q50 );
+	return `${ formatValue( m, s.q50 ) } +${ pp }% -${ mp }%`;
 }
 
 /**
  * Runs the performance tests on the current branch.
  *
- * @param {string} testSuite                Name of the tests set.
- * @param {string} performanceTestDirectory Path to the performance tests' clone.
- *
- * @return {Promise<WPPerformanceResults>} Performance results for the branch.
+ * @param {string} testSuite     Name of the tests set.
+ * @param {string} testRunnerDir Path to the performance tests' clone.
+ * @param {string} runKey        Unique identifier for the test run.
  */
-async function runTestSuite( testSuite, performanceTestDirectory ) {
+async function runTestSuite( testSuite, testRunnerDir, runKey ) {
 	await runShellScript(
-		`npm run test:performance -- packages/e2e-tests/specs/performance/${ testSuite }.test.js`,
-		performanceTestDirectory
-	);
-	const rawResults = await readJSONFile(
-		path.join(
-			performanceTestDirectory,
-			`packages/e2e-tests/specs/performance/${ testSuite }.test.results.json`
-		)
+		`npm run test:performance -- ${ testSuite }`,
+		testRunnerDir,
+		{
+			...process.env,
+			PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1',
+			WP_ARTIFACTS_PATH: ARTIFACTS_PATH,
+			RESULTS_ID: runKey,
+		}
 	);
-	return curateResults( rawResults );
+}
+
+/**
+ * Formats an array of objects as a Markdown table.
+ *
+ * For example, this array:
+ *
+ * [
+ * 	{
+ * 	    foo: 123,
+ * 	    bar: 456,
+ * 	    baz: 'Yes',
+ * 	},
+ * 	{
+ * 	    foo: 777,
+ * 	    bar: 999,
+ * 	    baz: 'No',
+ * 	}
+ * ]
+ *
+ * Will result in the following table:
+ *
+ * | foo | bar | baz |
+ * |-----|-----|-----|
+ * | 123 | 456 | Yes |
+ * | 777 | 999 | No  |
+ *
+ * @param {Array<Object>} rows Table rows.
+ * @return {string} Markdown table content.
+ */
+function formatAsMarkdownTable( rows ) {
+	let result = '';
+
+	if ( ! rows.length ) {
+		return result;
+	}
+
+	const headers = Object.keys( rows[ 0 ] );
+	for ( const header of headers ) {
+		result += `| ${ header } `;
+	}
+	result += '|\n';
+	for ( let i = 0; i < headers.length; i++ ) {
+		result += '| ------ ';
+	}
+	result += '|\n';
+
+	for ( const row of rows ) {
+		for ( const value of Object.values( row ) ) {
+			result += `| ${ value } `;
+		}
+		result += '|\n';
+	}
+
+	return result;
 }
 
 /**
@@ -184,20 +240,23 @@ async function runPerformanceTests( branches, options ) {
 		branches = [ 'trunk' ];
 	}
 
+	log( formats.title( '\n💃 Performance Tests 🕺' ) );
 	log(
-		formats.title( '\n💃 Performance Tests 🕺\n' ),
-		'\nWelcome! This tool runs the performance tests on multiple branches and displays a comparison table.\n' +
-			'In order to run the tests, the tool is going to load a WordPress environment on ports 8888 and 8889.\n' +
-			'Make sure these ports are not used before continuing.\n'
+		'\nWelcome! This tool runs the performance tests on multiple branches and displays a comparison table.'
 	);
 
 	if ( ! runningInCI ) {
+		log(
+			formats.warning(
+				'\nIn order to run the tests, the tool is going to load a WordPress environment on ports 8888 and 8889.' +
+					'\nMake sure these ports are not used before continuing.\n'
+			)
+		);
+
 		await askForConfirmation( 'Ready to go? ' );
 	}
 
-	// 1- Preparing the tests directory.
-	log( '\n>> Preparing the tests directories' );
-	log( '    >> Cloning the repository' );
+	logAtIndent( 0, 'Setting up' );
 
 	/**
 	 * @type {string[]} git refs against which to run tests;
@@ -207,276 +266,370 @@ async function runPerformanceTests( branches, options ) {
 		throw new Error( `Need at least two git refs to run` );
 	}
 
-	const baseDirectory = getRandomTemporaryPath();
-	fs.mkdirSync( baseDirectory, { recursive: true } );
+	const baseDir = path.join( os.tmpdir(), 'wp-performance-tests' );
+
+	if ( fs.existsSync( baseDir ) ) {
+		logAtIndent( 1, 'Removing existing files' );
+		fs.rmSync( baseDir, { recursive: true } );
+	}
+
+	logAtIndent( 1, 'Creating base directory:', formats.success( baseDir ) );
+	fs.mkdirSync( baseDir );
+
+	logAtIndent( 1, 'Setting up repository' );
+	const sourceDir = path.join( baseDir, 'source' );
+
+	logAtIndent( 2, 'Creating directory:', formats.success( sourceDir ) );
+	fs.mkdirSync( sourceDir );
 
 	// @ts-ignore
-	const git = SimpleGit( baseDirectory );
-	await git
+	const sourceGit = SimpleGit( sourceDir );
+	logAtIndent(
+		2,
+		'Initializing:',
+		formats.success( config.gitRepositoryURL )
+	);
+	await sourceGit
 		.raw( 'init' )
 		.raw( 'remote', 'add', 'origin', config.gitRepositoryURL );
 
-	for ( const branch of branches ) {
-		await git.raw( 'fetch', '--depth=1', 'origin', branch );
+	for ( const [ i, branch ] of branches.entries() ) {
+		logAtIndent(
+			2,
+			`Fetching environment branch (${ i + 1 } of ${ branches.length }):`,
+			formats.success( branch )
+		);
+		await sourceGit.raw( 'fetch', '--depth=1', 'origin', branch );
+	}
+
+	const testRunnerBranch = options.testsBranch || branches[ 0 ];
+	if ( options.testsBranch && ! branches.includes( options.testsBranch ) ) {
+		logAtIndent(
+			2,
+			'Fetching test runner branch:',
+			formats.success( options.testsBranch )
+		);
+		// @ts-ignore
+		await sourceGit.raw(
+			'fetch',
+			'--depth=1',
+			'origin',
+			options.testsBranch
+		);
+	} else {
+		logAtIndent(
+			2,
+			'Using test runner branch:',
+			formats.success( testRunnerBranch )
+		);
 	}
 
-	await git.raw( 'checkout', branches[ 0 ] );
+	logAtIndent( 1, 'Setting up test runner' );
 
-	const rootDirectory = getRandomTemporaryPath();
-	const performanceTestDirectory = rootDirectory + '/tests';
-	await runShellScript( 'mkdir -p ' + rootDirectory );
-	await runShellScript(
-		'cp -R ' + baseDirectory + ' ' + performanceTestDirectory
-	);
+	const testRunnerDir = path.join( baseDir + '/tests' );
 
-	if ( !! options.testsBranch ) {
-		const branchName = formats.success( options.testsBranch );
-		log( `    >> Fetching the test-runner branch: ${ branchName }` );
+	logAtIndent( 2, 'Copying source to:', formats.success( testRunnerDir ) );
+	await runShellScript( `cp -R  ${ sourceDir } ${ testRunnerDir }` );
 
-		// @ts-ignore
-		await SimpleGit( performanceTestDirectory )
-			.raw( 'fetch', '--depth=1', 'origin', options.testsBranch )
-			.raw( 'checkout', options.testsBranch );
-	}
+	logAtIndent(
+		2,
+		'Checking out branch:',
+		formats.success( testRunnerBranch )
+	);
+	// @ts-ignore
+	await SimpleGit( testRunnerDir ).raw( 'checkout', testRunnerBranch );
 
-	log( '    >> Installing dependencies and building packages' );
+	logAtIndent( 2, 'Installing dependencies and building' );
 	await runShellScript(
-		'npm ci && node ./bin/packages/build.js',
-		performanceTestDirectory
+		`bash -c "source $HOME/.nvm/nvm.sh && nvm install && npm ci && npx playwright install chromium --with-deps && npm run build:packages"`,
+		testRunnerDir
 	);
-	log( '    >> Creating the environment folders' );
-	await runShellScript( 'mkdir -p ' + rootDirectory + '/envs' );
 
-	// 2- Preparing the environment directories per branch.
-	log( '\n>> Preparing an environment directory per branch' );
-	const branchDirectories = {};
+	logAtIndent( 1, 'Setting up test environments' );
+
+	const envsDir = path.join( baseDir, 'environments' );
+	logAtIndent( 2, 'Creating parent directory:', formats.success( envsDir ) );
+	fs.mkdirSync( envsDir );
+
+	let wpZipUrl = null;
+	if ( options.wpVersion ) {
+		// In order to match the topology of ZIP files at wp.org, remap .0
+		// patch versions to major versions:
+		//
+		//     5.7   -> 5.7   (unchanged)
+		//     5.7.0 -> 5.7   (changed)
+		//     5.7.2 -> 5.7.2 (unchanged)
+		const zipVersion = options.wpVersion.replace( /^(\d+\.\d+).0/, '$1' );
+		wpZipUrl = `https://wordpress.org/wordpress-${ zipVersion }.zip`;
+	}
+
+	const branchDirs = {};
 	for ( const branch of branches ) {
-		log( `    >> Branch: ${ branch }` );
-		const environmentDirectory =
-			rootDirectory + '/envs/' + kebabCase( branch );
+		logAtIndent( 2, 'Branch:', formats.success( branch ) );
+		const sanitizedBranchName = sanitizeBranchName( branch );
+		const envDir = path.join( envsDir, sanitizedBranchName );
+
+		logAtIndent( 3, 'Creating directory:', formats.success( envDir ) );
+		fs.mkdirSync( envDir );
 		// @ts-ignore
-		branchDirectories[ branch ] = environmentDirectory;
-		const buildPath = `${ environmentDirectory }/plugin`;
-		await runShellScript( 'mkdir ' + environmentDirectory );
-		await runShellScript( `cp -R ${ baseDirectory } ${ buildPath }` );
+		branchDirs[ branch ] = envDir;
+		const buildDir = path.join( envDir, 'plugin' );
 
-		const fancyBranch = formats.success( branch );
+		logAtIndent( 3, 'Copying source to:', formats.success( buildDir ) );
+		await runShellScript( `cp -R ${ sourceDir } ${ buildDir }` );
 
-		if ( branch === options.testsBranch ) {
-			log(
-				`        >> Re-using the testing branch for ${ fancyBranch }`
-			);
-			await runShellScript(
-				`cp -R ${ performanceTestDirectory } ${ buildPath }`
-			);
-		} else {
-			log( `        >> Fetching the ${ fancyBranch } branch` );
-			// @ts-ignore
-			await SimpleGit( buildPath ).reset( 'hard' ).checkout( branch );
-
-			log( `        >> Building the ${ fancyBranch } branch` );
-			await runShellScript(
-				'npm ci && npm run prebuild:packages && node ./bin/packages/build.js && npx wp-scripts build',
-				buildPath
-			);
-		}
+		logAtIndent( 3, 'Checking out:', formats.success( branch ) );
+		// @ts-ignore
+		await SimpleGit( buildDir ).raw( 'checkout', branch );
 
+		logAtIndent( 3, 'Installing dependencies and building' );
 		await runShellScript(
-			'cp ' +
-				path.resolve(
-					performanceTestDirectory,
-					'bin/plugin/utils/.wp-env.performance.json'
-				) +
-				' ' +
-				environmentDirectory +
-				'/.wp-env.json'
+			`bash -c "source $HOME/.nvm/nvm.sh && nvm install && npm ci && npm run build"`,
+			buildDir
 		);
 
-		if ( options.wpVersion ) {
-			// In order to match the topology of ZIP files at wp.org, remap .0
-			// patch versions to major versions:
-			//
-			//     5.7   -> 5.7   (unchanged)
-			//     5.7.0 -> 5.7   (changed)
-			//     5.7.2 -> 5.7.2 (unchanged)
-			const zipVersion = options.wpVersion.replace(
-				/^(\d+\.\d+).0/,
-				'$1'
-			);
-			const zipUrl = `https://wordpress.org/wordpress-${ zipVersion }.zip`;
-			log( `        Using WordPress version ${ zipVersion }` );
-
-			// Patch the environment's .wp-env.json config to use the specified WP
-			// version:
-			//
-			//     {
-			//         "core": "https://wordpress.org/wordpress-$VERSION.zip",
-			//         ...
-			//     }
-			const confPath = `${ environmentDirectory }/.wp-env.json`;
-			const conf = { ...readJSONFile( confPath ), core: zipUrl };
-			await fs.writeFileSync(
-				confPath,
-				JSON.stringify( conf, null, 2 ),
-				'utf8'
-			);
-		}
-	}
+		const wpEnvConfigPath = path.join( envDir, '.wp-env.json' );
 
-	// 3- Printing the used folders.
-	log(
-		'\n>> Perf Tests Directory : ' +
-			formats.success( performanceTestDirectory )
-	);
-	for ( const branch of branches ) {
-		// @ts-ignore
-		const envPath = formats.success( branchDirectories[ branch ] );
-		log( `>> Environment Directory (${ branch }) : ${ envPath }` );
+		logAtIndent(
+			3,
+			'Saving wp-env config to:',
+			formats.success( wpEnvConfigPath )
+		);
+
+		fs.writeFileSync(
+			wpEnvConfigPath,
+			JSON.stringify(
+				{
+					config: {
+						WP_DEBUG: false,
+						SCRIPT_DEBUG: false,
+					},
+					core: wpZipUrl || 'WordPress/WordPress',
+					plugins: [ buildDir ],
+					themes: [ path.join( testRunnerDir, 'test/emptytheme' ) ],
+					env: {
+						tests: {
+							mappings: {
+								'wp-content/mu-plugins': path.join(
+									testRunnerDir,
+									'packages/e2e-tests/mu-plugins'
+								),
+								'wp-content/plugins/gutenberg-test-plugins':
+									path.join(
+										testRunnerDir,
+										'packages/e2e-tests/plugins'
+									),
+								'wp-content/themes/gutenberg-test-themes':
+									path.join(
+										testRunnerDir,
+										'test/gutenberg-test-themes'
+									),
+								'wp-content/themes/gutenberg-test-themes/twentytwentyone':
+									'https://downloads.wordpress.org/theme/twentytwentyone.1.7.zip',
+								'wp-content/themes/gutenberg-test-themes/twentytwentythree':
+									'https://downloads.wordpress.org/theme/twentytwentythree.1.0.zip',
+							},
+						},
+					},
+				},
+				null,
+				2
+			),
+			'utf8'
+		);
 	}
 
-	// 4- Running the tests.
-	log( '\n>> Running the tests' );
+	logAtIndent( 0, 'Looking for test files' );
 
-	const testSuites = [ 'post-editor', 'site-editor' ];
+	const testSuites = getFilesFromDir(
+		path.join( testRunnerDir, 'test/performance/specs' )
+	).map( ( file ) => {
+		logAtIndent( 1, 'Found:', formats.success( file ) );
+		return path.basename( file, '.spec.js' );
+	} );
+
+	logAtIndent( 0, 'Running tests' );
+
+	if ( wpZipUrl ) {
+		logAtIndent(
+			1,
+			'Using:',
+			formats.success( `WordPress v${ options.wpVersion }` )
+		);
+	} else {
+		logAtIndent( 1, 'Using:', formats.success( 'WordPress trunk' ) );
+	}
+
+	const wpEnvPath = path.join( testRunnerDir, 'node_modules/.bin/wp-env' );
 
-	/** @type {Record<string,Record<string, WPPerformanceResults>>} */
-	const results = {};
 	for ( const testSuite of testSuites ) {
-		results[ testSuite ] = {};
-		/** @type {Array<Record<string, WPPerformanceResults>>} */
-		const rawResults = [];
-		// Alternate three times between branches.
-		for ( let i = 0; i < TEST_ROUNDS; i++ ) {
-			rawResults[ i ] = {};
+		for ( let i = 1; i <= TEST_ROUNDS; i++ ) {
+			logAtIndent(
+				1,
+				// prettier-ignore
+				`Suite: ${ formats.success( testSuite ) } (round ${ i } of ${ TEST_ROUNDS })`
+			);
+
 			for ( const branch of branches ) {
+				logAtIndent( 2, 'Branch:', formats.success( branch ) );
+
+				const sanitizedBranchName = sanitizeBranchName( branch );
+				const runKey = `${ testSuite }_${ sanitizedBranchName }_round-${ i }`;
 				// @ts-ignore
-				const environmentDirectory = branchDirectories[ branch ];
-				log( `    >> Branch: ${ branch }, Suite: ${ testSuite }` );
-				log( '        >> Starting the environment.' );
-				await runShellScript(
-					'../../tests/node_modules/.bin/wp-env start',
-					environmentDirectory
-				);
-				log( '        >> Running the test.' );
-				rawResults[ i ][ branch ] = await runTestSuite(
-					testSuite,
-					performanceTestDirectory
-				);
-				log( '        >> Stopping the environment' );
-				await runShellScript(
-					'../../tests/node_modules/.bin/wp-env stop',
-					environmentDirectory
-				);
-			}
-		}
+				const envDir = branchDirs[ branch ];
 
-		// Computing medians.
-		for ( const branch of branches ) {
-			const medians = mapValues(
-				{
-					serverResponse: rawResults.map(
-						( r ) => r[ branch ].serverResponse
-					),
-					firstPaint: rawResults.map(
-						( r ) => r[ branch ].firstPaint
-					),
-					domContentLoaded: rawResults.map(
-						( r ) => r[ branch ].domContentLoaded
-					),
-					loaded: rawResults.map( ( r ) => r[ branch ].loaded ),
-					firstContentfulPaint: rawResults.map(
-						( r ) => r[ branch ].firstContentfulPaint
-					),
-					firstBlock: rawResults.map(
-						( r ) => r[ branch ].firstBlock
-					),
-					type: rawResults.map( ( r ) => r[ branch ].type ),
-					minType: rawResults.map( ( r ) => r[ branch ].minType ),
-					maxType: rawResults.map( ( r ) => r[ branch ].maxType ),
-					focus: rawResults.map( ( r ) => r[ branch ].focus ),
-					minFocus: rawResults.map( ( r ) => r[ branch ].minFocus ),
-					maxFocus: rawResults.map( ( r ) => r[ branch ].maxFocus ),
-					inserterOpen: rawResults.map(
-						( r ) => r[ branch ].inserterOpen
-					),
-					minInserterOpen: rawResults.map(
-						( r ) => r[ branch ].minInserterOpen
-					),
-					maxInserterOpen: rawResults.map(
-						( r ) => r[ branch ].maxInserterOpen
-					),
-					inserterSearch: rawResults.map(
-						( r ) => r[ branch ].inserterSearch
-					),
-					minInserterSearch: rawResults.map(
-						( r ) => r[ branch ].minInserterSearch
-					),
-					maxInserterSearch: rawResults.map(
-						( r ) => r[ branch ].maxInserterSearch
-					),
-					inserterHover: rawResults.map(
-						( r ) => r[ branch ].inserterHover
-					),
-					minInserterHover: rawResults.map(
-						( r ) => r[ branch ].minInserterHover
-					),
-					maxInserterHover: rawResults.map(
-						( r ) => r[ branch ].maxInserterHover
-					),
-					listViewOpen: rawResults.map(
-						( r ) => r[ branch ].listViewOpen
-					),
-					minListViewOpen: rawResults.map(
-						( r ) => r[ branch ].minListViewOpen
-					),
-					maxListViewOpen: rawResults.map(
-						( r ) => r[ branch ].maxListViewOpen
-					),
-				},
-				median
-			);
+				logAtIndent( 3, 'Starting environment' );
+				await runShellScript( `${ wpEnvPath } start`, envDir );
+
+				logAtIndent( 3, 'Running tests' );
+				await runTestSuite( testSuite, testRunnerDir, runKey );
 
-			// Format results as times.
-			results[ testSuite ][ branch ] = mapValues( medians, formatTime );
+				logAtIndent( 3, 'Stopping environment' );
+				await runShellScript( `${ wpEnvPath } stop`, envDir );
+			}
 		}
 	}
 
-	// 5- Formatting the results.
-	log( '\n>> 🎉 Results.\n' );
+	logAtIndent( 0, 'Calculating results' );
 
-	log(
-		'\nPlease note that client side metrics EXCLUDE the server response time.\n'
+	const resultFiles = getFilesFromDir( ARTIFACTS_PATH ).filter( ( file ) =>
+		file.endsWith( RAW_RESULTS_FILE_SUFFIX )
 	);
+	/** @type {Record<string,Record<string, Record<string, Record<string, number>>>>} */
+	const results = {};
 
+	// Calculate medians from all rounds.
 	for ( const testSuite of testSuites ) {
-		log( `\n>> ${ testSuite }\n` );
+		logAtIndent( 1, 'Test suite:', formats.success( testSuite ) );
 
-		/** @type {Record<string, Record<string, string>>} */
-		const invertedResult = {};
-		Object.entries( results[ testSuite ] ).reduce(
-			( acc, [ key, val ] ) => {
-				for ( const entry of Object.keys( val ) ) {
-					// @ts-ignore
-					if ( ! acc[ entry ] && isFinite( val[ entry ] ) )
-						acc[ entry ] = {};
-					// @ts-ignore
-					if ( isFinite( val[ entry ] ) ) {
-						// @ts-ignore
-						acc[ entry ][ key ] = val[ entry ] + ' ms';
-					}
+		results[ testSuite ] = {};
+		for ( const branch of branches ) {
+			const sanitizedBranchName = sanitizeBranchName( branch );
+			const resultsRounds = resultFiles
+				.filter( ( file ) =>
+					file.includes(
+						`${ testSuite }_${ sanitizedBranchName }_round-`
+					)
+				)
+				.map( ( file ) => {
+					logAtIndent( 2, 'Reading from:', formats.success( file ) );
+					return readJSONFile( file );
+				} );
+
+			const metrics = Object.keys( resultsRounds[ 0 ] ?? {} );
+			results[ testSuite ][ branch ] = {};
+
+			for ( const metric of metrics ) {
+				const values = resultsRounds.flatMap(
+					( round ) => round[ metric ] ?? []
+				);
+
+				const value = stats( values );
+				if ( value !== undefined ) {
+					results[ testSuite ][ branch ][ metric ] = value;
 				}
-				return acc;
-			},
-			invertedResult
+			}
+		}
+
+		const calculatedResultsPath = path.join(
+			ARTIFACTS_PATH,
+			testSuite + RESULTS_FILE_SUFFIX
 		);
-		console.table( invertedResult );
 
-		const resultsFilename = testSuite + '-performance-results.json';
+		logAtIndent(
+			2,
+			'Saving curated results to:',
+			formats.success( calculatedResultsPath )
+		);
 		fs.writeFileSync(
-			path.resolve( __dirname, '../../../', resultsFilename ),
+			calculatedResultsPath,
 			JSON.stringify( results[ testSuite ], null, 2 )
 		);
 	}
+
+	logAtIndent( 0, 'Printing results' );
+	log(
+		formats.warning(
+			'\nPlease note that client side metrics EXCLUDE the server response time.'
+		)
+	);
+
+	let summaryMarkdown = `## Performance Test Results\n\n`;
+
+	summaryMarkdown += `Please note that client side metrics **exclude** the server response time.\n\n`;
+
+	for ( const testSuite of testSuites ) {
+		logAtIndent( 0, formats.success( testSuite ) );
+
+		// Invert the results so we can display them in a table.
+		/** @type {Record<string, Record<string, Record<string, number>>>} */
+		const invertedResult = {};
+		for ( const [ branch, metrics ] of Object.entries(
+			results[ testSuite ]
+		) ) {
+			for ( const [ metric, value ] of Object.entries( metrics ) ) {
+				invertedResult[ metric ] = invertedResult[ metric ] || {};
+				invertedResult[ metric ][ branch ] = value;
+			}
+		}
+
+		/** @type {Record<string, Record<string, string>>} */
+		const printedResult = {};
+		for ( const [ metric, branch ] of Object.entries( invertedResult ) ) {
+			printedResult[ metric ] = {};
+			for ( const [ branchName, data ] of Object.entries( branch ) ) {
+				printedResult[ metric ][ branchName ] = printStats(
+					metric,
+					data
+				);
+			}
+
+			if ( branches.length === 2 ) {
+				const [ branch1, branch2 ] = branches;
+				const value1 = branch[ branch1 ].q50;
+				const value2 = branch[ branch2 ].q50;
+				const percentageChange = fixed(
+					( ( value1 - value2 ) / value2 ) * 100
+				);
+				printedResult[ metric ][
+					'% Change'
+				] = `${ percentageChange }%`;
+			}
+		}
+
+		// Print the results.
+		console.table( printedResult );
+
+		// Use yet another structure to generate a Markdown table.
+
+		const rows = [];
+
+		for ( const [ metric, resultBranches ] of Object.entries(
+			printedResult
+		) ) {
+			/**
+			 * @type {Record< string, string >}
+			 */
+			const row = {
+				Metric: metric,
+			};
+
+			for ( const [ branch, value ] of Object.entries(
+				resultBranches
+			) ) {
+				row[ branch ] = value;
+			}
+			rows.push( row );
+		}
+
+		summaryMarkdown += `**${ testSuite }**\n\n`;
+		summaryMarkdown += `${ formatAsMarkdownTable( rows ) }\n`;
+	}
+
+	fs.writeFileSync(
+		path.join( ARTIFACTS_PATH, 'summary.md' ),
+		summaryMarkdown
+	);
 }
 
 module.exports = {
diff --git a/bin/plugin/commands/test/__snapshots__/changelog.js.snap b/bin/plugin/commands/test/__snapshots__/changelog.js.snap
index ccdbb8e712cd1a..dc33f052a0b9d8 100644
--- a/bin/plugin/commands/test/__snapshots__/changelog.js.snap
+++ b/bin/plugin/commands/test/__snapshots__/changelog.js.snap
@@ -3,208 +3,271 @@
 exports[`getChangelog verify that the changelog is properly formatted 1`] = `
 "## Changelog
 
-### Enhancements
+### Features
+
+#### Block Editor
+- Adds 'nofollow' setting to Button block. ([54110](https://github.com/WordPress/gutenberg/pull/54110))
 
-- Scripts: Use cssnano to minimize CSS files with build. ([33750](https://github.com/WordPress/gutenberg/pull/33750))
-- Scripts: Webpack configuration update to minimize CSS. ([33676](https://github.com/WordPress/gutenberg/pull/33676))
+#### Site Editor
+- Add 'Show template' toggle when editing pages. ([52674](https://github.com/WordPress/gutenberg/pull/52674))
+
+
+### Enhancements
 
 #### Components
-- Add new ColorPicker. ([33714](https://github.com/WordPress/gutenberg/pull/33714))
-- Promote \`ItemGroup\`. ([33701](https://github.com/WordPress/gutenberg/pull/33701))
-- Update snackbar to use framer motion instead of react spring. ([33717](https://github.com/WordPress/gutenberg/pull/33717))
-- Use updated range styles. ([33824](https://github.com/WordPress/gutenberg/pull/33824))
+- Adding label/description to \`BlockEditor/DuotoneControl\`. ([54473](https://github.com/WordPress/gutenberg/pull/54473))
+- Deprecating \`isPressed\` in \`Button\` component. ([54740](https://github.com/WordPress/gutenberg/pull/54740))
+- InputControl-based components: Add opt-in prop for next 40px default size. ([53819](https://github.com/WordPress/gutenberg/pull/53819))
+- Modal: Add \`contentWidth\` prop to support a selection of preset modal sizes. ([54471](https://github.com/WordPress/gutenberg/pull/54471))
+- Remove unused components from \`ui/\`. ([54573](https://github.com/WordPress/gutenberg/pull/54573))
+- Update compact search control metrics. ([54663](https://github.com/WordPress/gutenberg/pull/54663))
+- Wrapped \`TextareaControl\` in a \`forwardRef\` call. ([54975](https://github.com/WordPress/gutenberg/pull/54975))
 
 #### Block Library
-- [Post Featured Image]: Add basic dimension controls. ([31634](https://github.com/WordPress/gutenberg/pull/31634))
+- Add a brief description to the Footnotes block. ([54613](https://github.com/WordPress/gutenberg/pull/54613))
+- Footnotes: Use core’s meta revisioning if available. ([52988](https://github.com/WordPress/gutenberg/pull/52988))
+- Login/out: Add spacing support. ([45147](https://github.com/WordPress/gutenberg/pull/45147))
+- Query view.js: Code quality. ([54982](https://github.com/WordPress/gutenberg/pull/54982))
+- Set custom color when applying initial background image. ([54054](https://github.com/WordPress/gutenberg/pull/54054))
+- Use \`wp_get_inline_script_tag()\` in \`build_dropdown_script_block_core_categories()\`. ([54637](https://github.com/WordPress/gutenberg/pull/54637))
 
-#### Site Editor
-- Add error boundary. ([33921](https://github.com/WordPress/gutenberg/pull/33921))
+#### Block Editor
+- Default suggested links to pages. ([54622](https://github.com/WordPress/gutenberg/pull/54622))
+- Remove base URL from link control search results. ([54553](https://github.com/WordPress/gutenberg/pull/54553))
+- Simplify \`BlockHTMLConvertButton\`. ([54972](https://github.com/WordPress/gutenberg/pull/54972))
+- Update strings in blocks 'RenameModal' component. ([54887](https://github.com/WordPress/gutenberg/pull/54887))
 
-#### Widgets Editor
-- Add error boundaries to widget screens. ([33771](https://github.com/WordPress/gutenberg/pull/33771))
+#### Post Editor
+- Edit Post: Use hooks instead of HoCs in 'PostStatus' components. ([54951](https://github.com/WordPress/gutenberg/pull/54951))
+- Editor: Use hooks instead of HoCs in 'PostSticky' components. ([54949](https://github.com/WordPress/gutenberg/pull/54949))
+- Editor: Use hooks instead of HoCs in 'PostSwitchToDraftButton'. ([54695](https://github.com/WordPress/gutenberg/pull/54695))
+- Show confirmation dialog when moving a post to the trash. ([50219](https://github.com/WordPress/gutenberg/pull/50219))
 
 #### Patterns
-- Block patterns: Add translation context on titles. ([33734](https://github.com/WordPress/gutenberg/pull/33734))
+- Remove category description in inserter panel. ([54894](https://github.com/WordPress/gutenberg/pull/54894))
 
-#### Document Settings
-- Disable spellcheck and autocomplete in permalink slug field. ([33708](https://github.com/WordPress/gutenberg/pull/33708))
+#### Typography
+- Font Library: Refactor endpoint permissions. ([54829](https://github.com/WordPress/gutenberg/pull/54829))
 
-#### Template Editor
-- Template Mode: Add busy state to template creation modal. ([33076](https://github.com/WordPress/gutenberg/pull/33076))
-
-#### Global Styles
-- Dimensions Panel: Add new ToolsPanel component and update spacing supports. ([32392](https://github.com/WordPress/gutenberg/pull/32392))
+#### Site Editor
+- Add template replace flow to template inspector. ([54609](https://github.com/WordPress/gutenberg/pull/54609))
 
 
 ### Bug Fixes
 
-- Correct \`function_exists()\` check typo introduced in #33331. ([33513](https://github.com/WordPress/gutenberg/pull/33513))
-- ESLint Plugin: Include .jsx extenstion when linting import statements. ([33746](https://github.com/WordPress/gutenberg/pull/33746))
-- Fix block appender position in classic themes. ([33895](https://github.com/WordPress/gutenberg/pull/33895))
-- Fix misspelling of \\"queries\\" in filter documentation. ([33799](https://github.com/WordPress/gutenberg/pull/33799))
-- Fix positioning discrepancy with draggable chip. ([33893](https://github.com/WordPress/gutenberg/pull/33893))
+- Fix the ShortcutProvider usage. ([54851](https://github.com/WordPress/gutenberg/pull/54851))
+- Fix warning when a template calls a template area twice. ([54861](https://github.com/WordPress/gutenberg/pull/54861))
+- Revert "Fix warning when a template calls a template area twice". ([54926](https://github.com/WordPress/gutenberg/pull/54926))
 
 #### Block Library
-- Fix justification for button block when selected. ([33739](https://github.com/WordPress/gutenberg/pull/33739))
-- Fix navigation block appender invalid html. ([33964](https://github.com/WordPress/gutenberg/pull/33964))
-- Fix navigation margin collapsing. ([33021](https://github.com/WordPress/gutenberg/pull/33021))
-- Image Block: Fix issue with canInsertCover not being set to false for empty arrays. ([33863](https://github.com/WordPress/gutenberg/pull/33863))
-- [Query Pagination Numbers]: Fix first page's link. ([33629](https://github.com/WordPress/gutenberg/pull/33629))
+- All Nav block items to break long titles. ([54866](https://github.com/WordPress/gutenberg/pull/54866))
+- Fallback to Twitter provider when embedding X URLs. ([54876](https://github.com/WordPress/gutenberg/pull/54876))
+- Fix Deleted Navigation Menu warning string. ([55033](https://github.com/WordPress/gutenberg/pull/55033))
+- Fix Search Block not updating in Nav block. ([54823](https://github.com/WordPress/gutenberg/pull/54823))
+- Fix left and right aligmnent in children of Post Template. ([54997](https://github.com/WordPress/gutenberg/pull/54997))
+- Fix output of Navigation block classnames in the editor. ([54992](https://github.com/WordPress/gutenberg/pull/54992))
+- Fix overwriting of published post meta when previewing footnote changes. ([54339](https://github.com/WordPress/gutenberg/pull/54339))
+- Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists. ([54878](https://github.com/WordPress/gutenberg/pull/54878))
+- Image: Fix layout shift when lightbox is opened and closed. ([53026](https://github.com/WordPress/gutenberg/pull/53026))
+- Media & Text: Fix React warning. ([55038](https://github.com/WordPress/gutenberg/pull/55038))
+- Search block: Allow space for input field only when form expanded. ([54846](https://github.com/WordPress/gutenberg/pull/54846))
+- Search block: Update alignment and icon button width. ([54773](https://github.com/WordPress/gutenberg/pull/54773))
+- Update pattern import menu item. ([54782](https://github.com/WordPress/gutenberg/pull/54782))
+
+#### Site Editor
+- Avoid same key warnings in template parts area listings. ([54863](https://github.com/WordPress/gutenberg/pull/54863))
+- Avoid stale navigation block values when parsing entity record. ([54996](https://github.com/WordPress/gutenberg/pull/54996))
+- Don't display the navigation section in template parts details when a menu is missing. ([54993](https://github.com/WordPress/gutenberg/pull/54993))
+- Fix ToolSelector popover variant. ([54840](https://github.com/WordPress/gutenberg/pull/54840))
+- Reset 'Show template' toggle when leaving edit mode. ([54679](https://github.com/WordPress/gutenberg/pull/54679))
+- [Site Editor]: Update copy of using  the default template in a page. ([54728](https://github.com/WordPress/gutenberg/pull/54728))
+- remove \`overflow: Hidden\` from the entity title in the site editor sidebar. ([54769](https://github.com/WordPress/gutenberg/pull/54769))
 
 #### Components
-- Fix RTL on custom gradient picker. ([33831](https://github.com/WordPress/gutenberg/pull/33831))
-- FontSizePicker: Use number values when the initial value is a number. ([33679](https://github.com/WordPress/gutenberg/pull/33679))
-- FormTokenField: Avoid error when maxLength value is hit. ([33623](https://github.com/WordPress/gutenberg/pull/33623))
-- \`useBreakpointIndex\`: Attach \`resize\` event listener to \`window\` instead of \`document\`. ([33902](https://github.com/WordPress/gutenberg/pull/33902))
+- FormTokenField: Add \`box-sizing\` reset style and reset default padding. ([54734](https://github.com/WordPress/gutenberg/pull/54734))
+- Popover: Fix the styles for components that use emotion within popovers. ([54912](https://github.com/WordPress/gutenberg/pull/54912))
+- Remove hover style for secondary Button when aria-disabled is set. ([54978](https://github.com/WordPress/gutenberg/pull/54978))
+- Reverting addition of \`aria-selected\` style hook in \`Button\`. ([54931](https://github.com/WordPress/gutenberg/pull/54931))
+- \`SlotFill\`: Pass \`Component\` instance to unregisterSlot. ([54765](https://github.com/WordPress/gutenberg/pull/54765))
 
 #### Block Editor
-- Force link text to wrap in the Link UI when encountering extra long link text. ([33753](https://github.com/WordPress/gutenberg/pull/33753))
-- Improve display of LinkURL menu and fix spacing. ([33652](https://github.com/WordPress/gutenberg/pull/33652))
-- Only show rich preview for image and description if data is available. ([33660](https://github.com/WordPress/gutenberg/pull/33660))
-- URL Details: Avoid PHP notice when parsing protocol-relative icon URLs. ([33779](https://github.com/WordPress/gutenberg/pull/33779))
+- Avoid double-wrapping selectors when transforming the styles. ([54981](https://github.com/WordPress/gutenberg/pull/54981))
+- [Inserter]: Fix reset of registered media categories. ([55012](https://github.com/WordPress/gutenberg/pull/55012))
+
+#### Typography
+- Font Library: Changed the OTF mime type expected value to be what PHP returns. ([54886](https://github.com/WordPress/gutenberg/pull/54886))
+- Font Library: Move font uploads to a new tab. ([54655](https://github.com/WordPress/gutenberg/pull/54655))
 
 #### Global Styles
-- Avoid rendering duplicate elements stylesheet. ([33680](https://github.com/WordPress/gutenberg/pull/33680))
-- Fix Global Styles transient key clash. ([33844](https://github.com/WordPress/gutenberg/pull/33844))
-- Site editor: Fix presets for blocks with multiple selectors. ([33951](https://github.com/WordPress/gutenberg/pull/33951))
+- Block custom CSS: Fix incorrect CSS when multiple root selectors. ([53602](https://github.com/WordPress/gutenberg/pull/53602))
+- Image: Ensure \`false\` values are preserved in memory when defined in \`theme.json\`. ([54639](https://github.com/WordPress/gutenberg/pull/54639))
 
-#### CSS & Styling
-- Fix navigation block placeholder preview markup. ([33963](https://github.com/WordPress/gutenberg/pull/33963))
+#### List View
+- Fix performance issue when selecting all blocks. ([54900](https://github.com/WordPress/gutenberg/pull/54900))
 
-#### Navigation Screen
-- Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. ([33748](https://github.com/WordPress/gutenberg/pull/33748))
-- Navigation Editor: Avoid React warning when creating a new menu. ([33843](https://github.com/WordPress/gutenberg/pull/33843))
+#### Colors
+- Format Library: Try to fix highlight popover jumping. ([54736](https://github.com/WordPress/gutenberg/pull/54736))
 
-#### Site Editor
-- Fix the site editor breaking in firefox. ([33896](https://github.com/WordPress/gutenberg/pull/33896))
+#### Interactivity API
+- Image: Fix duotone not being applied to lightbox image. ([54670](https://github.com/WordPress/gutenberg/pull/54670))
 
-#### Post Editor
-- Editor: Safer isPreviewingPost check. ([33840](https://github.com/WordPress/gutenberg/pull/33840))
 
-#### Meta Boxes
-- Fix Safari 13 metaboxes from overlapping the content. ([33817](https://github.com/WordPress/gutenberg/pull/33817))
+### Accessibility
 
-#### Build Tooling
-- Readable JS assets Plugin: Fix webpack 5 support. ([33785](https://github.com/WordPress/gutenberg/pull/33785))
+#### Components
+- Follow ariakit best practices. ([54696](https://github.com/WordPress/gutenberg/pull/54696))
+- HTML block: Fix accessibility issues on back-end. ([54408](https://github.com/WordPress/gutenberg/pull/54408))
+- Update ariakit to 0.3.3. ([54818](https://github.com/WordPress/gutenberg/pull/54818))
+- \`Modal\`: Accessibly hide/show outer modal when nested. ([54743](https://github.com/WordPress/gutenberg/pull/54743))
 
-#### Accessibility
-- Fix some JAWS bugs. ([33627](https://github.com/WordPress/gutenberg/pull/33627))
+#### Block Library
+- Footnotes: Add aria-label to return links. ([54843](https://github.com/WordPress/gutenberg/pull/54843))
+- Table of contents block accessibility improvements. ([54322](https://github.com/WordPress/gutenberg/pull/54322))
 
-#### Template Editor
-- Template: Only show post template actions to users with correct capabilities. ([33392](https://github.com/WordPress/gutenberg/pull/33392))
+#### Patterns
+- Use list role instead of listbox in patterns list. ([54884](https://github.com/WordPress/gutenberg/pull/54884))
 
+#### Post Editor
+- Editor: Always render the 'Switch to Draft' button to avoid focus loss. ([54722](https://github.com/WordPress/gutenberg/pull/54722))
 
-### Performance
+#### Block Editor
+- Block Switcher: Use a different label for multi-selection. ([54692](https://github.com/WordPress/gutenberg/pull/54692))
 
-- Avoid double parsing the content when loading the editor. ([33727](https://github.com/WordPress/gutenberg/pull/33727))
 
-#### Block Library
-- Do not add to the block-library CSS bundle the colors that come from \`theme.json\`. ([33924](https://github.com/WordPress/gutenberg/pull/33924))
-- Improve the rendering/update performance of the image block. ([33974](https://github.com/WordPress/gutenberg/pull/33974))
+### Performance
+
+- Tests: Support the Site Editor's legacy spinner. ([54784](https://github.com/WordPress/gutenberg/pull/54784))
+- Use instanceOf over property_exists. ([54835](https://github.com/WordPress/gutenberg/pull/54835))
 
 #### Block Editor
-- Lazy render block types in the inserter. ([33749](https://github.com/WordPress/gutenberg/pull/33749))
-- Lazy render the inserter search results. ([33868](https://github.com/WordPress/gutenberg/pull/33868))
+- Subscribe only to block editor store in \`useBlockSync\`. ([55041](https://github.com/WordPress/gutenberg/pull/55041))
 
-#### Parsing
-- Improve the performance of the parser by removing the automatic custom classnames handling. ([33903](https://github.com/WordPress/gutenberg/pull/33903))
 
-#### Template Editor
-- Template Mode: Remove 'per_page' argument from the template data selector. ([33742](https://github.com/WordPress/gutenberg/pull/33742))
+### Experiments
 
-#### Post Editor
-- Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. ([33418](https://github.com/WordPress/gutenberg/pull/33418))
+#### Site Editor
+- al]: First version of pages list in site editor. ([54966](https://github.com/WordPress/gutenberg/pull/54966))
+
+#### Block Editor
+- Expose \`getDuotoneFilter()\` as private API. ([54905](https://github.com/WordPress/gutenberg/pull/54905))
 
 
 ### Documentation
 
-- Add documentation to disable remote calls for block patterns. ([33930](https://github.com/WordPress/gutenberg/pull/33930))
-- Add missing comma. ([33764](https://github.com/WordPress/gutenberg/pull/33764))
-- Add spaces in add_theme_support documentation code. ([33796](https://github.com/WordPress/gutenberg/pull/33796))
-- Correct spelling and grammar in documentation. ([33860](https://github.com/WordPress/gutenberg/pull/33860))
-- Docs: Add more details about block attributes. ([33880](https://github.com/WordPress/gutenberg/pull/33880))
-- Example for rest_endpoints filter in PHP. ([33738](https://github.com/WordPress/gutenberg/pull/33738))
-- Fix gutenberg_resolve_template() return documentation. ([33800](https://github.com/WordPress/gutenberg/pull/33800))
-- Update documentation to reflect new automated process for feature grouping. ([33573](https://github.com/WordPress/gutenberg/pull/33573))
-- [docs] fix: \`supports.color.gradients\` is plural. ([33781](https://github.com/WordPress/gutenberg/pull/33781))
-- fix: Broken link in documentation to block support mechanism. ([33780](https://github.com/WordPress/gutenberg/pull/33780))
-- link fix: Block editor Sidebar Tutorial. ([33308](https://github.com/WordPress/gutenberg/pull/33308))
+- Add a documentation page about the block editor settings. ([54870](https://github.com/WordPress/gutenberg/pull/54870))
+- Add a page about the format library to the platform documentation site. ([55037](https://github.com/WordPress/gutenberg/pull/55037))
+- Docs: Add a callout to the \`wp-now\` documentation to mention it's still experimental. ([55044](https://github.com/WordPress/gutenberg/pull/55044))
+- Docs: Remove outdated info. ([54707](https://github.com/WordPress/gutenberg/pull/54707))
+- Docs: Remove the Full Site Editing doc. ([54516](https://github.com/WordPress/gutenberg/pull/54516))
+- Docs: Rename Block Hooks handbook page to Block Filters. ([54862](https://github.com/WordPress/gutenberg/pull/54862))
+- Document the current state of the Real-Time collaboration experiment. ([54932](https://github.com/WordPress/gutenberg/pull/54932))
+- Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
+- Platform Docs: Add a documentation page explaining how to use the block library. ([54967](https://github.com/WordPress/gutenberg/pull/54967))
+- Update the documentation of the block editor and replace @wordpress/element with react. ([54908](https://github.com/WordPress/gutenberg/pull/54908))
+- Update versions in WP for 6.4. ([54890](https://github.com/WordPress/gutenberg/pull/54890))
 
 
 ### Code Quality
 
-- Scripts: Fix typo in format change message. ([33945](https://github.com/WordPress/gutenberg/pull/33945))
+- Add a unit test for the "ValidBlockLibraryFunctionNameSniff" sniff. ([53928](https://github.com/WordPress/gutenberg/pull/53928))
+- Move dependencies to the right place. ([54597](https://github.com/WordPress/gutenberg/pull/54597))
+- Move mime-type collection generation to a function that can be tested…. ([54844](https://github.com/WordPress/gutenberg/pull/54844))
+- Post Title block should use esc_url(). ([53981](https://github.com/WordPress/gutenberg/pull/53981))
+- Rich text: Use getPasteEventData. ([55048](https://github.com/WordPress/gutenberg/pull/55048))
+- Writing flow: Absorb clipboard handler. ([55006](https://github.com/WordPress/gutenberg/pull/55006))
+
+#### Block Library
+- Footnotes: Avoid regexes in entity provider. ([54505](https://github.com/WordPress/gutenberg/pull/54505))
+- Image Block: Fix browser console error when clicking "Expand on Click". ([54938](https://github.com/WordPress/gutenberg/pull/54938))
+- Removed unwanted space from the string. ([54654](https://github.com/WordPress/gutenberg/pull/54654))
+- Update CODEOWNERS for \`core/image\` block. ([54793](https://github.com/WordPress/gutenberg/pull/54793))
+
+#### Patterns
+- Add a new spec for for adding an unsynced pattern. ([54892](https://github.com/WordPress/gutenberg/pull/54892))
+- Add end-to-end tests for filtering and searching patterns. ([54906](https://github.com/WordPress/gutenberg/pull/54906))
+- Add new end-to-end test for creating a pattern. ([54855](https://github.com/WordPress/gutenberg/pull/54855))
+- Include pattern category in main end-to-end critical path test. ([54923](https://github.com/WordPress/gutenberg/pull/54923))
 
 #### Components
-- Components utils: \`rtl()\` return type, \`rtl.watch()\` utility. ([33882](https://github.com/WordPress/gutenberg/pull/33882))
-- InputControl to TypeScript. ([33696](https://github.com/WordPress/gutenberg/pull/33696))
-- Use the \`__unsafe_useEmotionCache\` in the \`useCx\` hook. ([33982](https://github.com/WordPress/gutenberg/pull/33982))
+- Consolidate utils to remove \`ui/\`. ([54922](https://github.com/WordPress/gutenberg/pull/54922))
+- Move \`ContextSystemProvider\` out of \`/ui\`. ([54847](https://github.com/WordPress/gutenberg/pull/54847))
+- SlotFill: Migrate to Typescript. ([51350](https://github.com/WordPress/gutenberg/pull/51350))
+- Tidying \`CircularOptionPicker.Option\`. ([54903](https://github.com/WordPress/gutenberg/pull/54903))
 
-#### Block Library
-- Featured Image: Use getMedia shorthand. ([33943](https://github.com/WordPress/gutenberg/pull/33943))
-- Site Logo: Use getMedia shorthand. ([33992](https://github.com/WordPress/gutenberg/pull/33992))
+#### Typography
+- Font Library: Syntax refactor repace strpos with str_contains. ([54832](https://github.com/WordPress/gutenberg/pull/54832))
+- Font Library: Use snake_case instead of camelCase on fontFamilies endpoint param. ([54977](https://github.com/WordPress/gutenberg/pull/54977))
 
-#### Global Styles
-- No longer read from \`experimental-theme.json\`. ([33904](https://github.com/WordPress/gutenberg/pull/33904))
-- Remove the experimental prefix and rename \`theme.json\` files. ([33925](https://github.com/WordPress/gutenberg/pull/33925))
+#### Block Editor
+- Rich text: Avoid shortcode logic, adjust paste handler instead. ([55052](https://github.com/WordPress/gutenberg/pull/55052))
 
 #### Plugin
-- Fix \`jsdoc/check-line-alignment\` ESLint warnings. ([33901](https://github.com/WordPress/gutenberg/pull/33901))
+- Remove legacy logic for '__unstableResolvedAssets' setting. ([54812](https://github.com/WordPress/gutenberg/pull/54812))
 
-#### Post Editor
-- Refactor MetaBoxesArea to to functional components using hooks. ([30542](https://github.com/WordPress/gutenberg/pull/30542))
+#### Data Layer
+- createResolversCacheMiddleware: Remove dependency on core/data store. ([54733](https://github.com/WordPress/gutenberg/pull/54733))
+
+#### Site Editor
+- Use constants rather than hard coded template strings (round 3). ([54705](https://github.com/WordPress/gutenberg/pull/54705))
 
 
 ### Tools
 
-- GitHub Templates: Fix spacing in bug report template. ([33761](https://github.com/WordPress/gutenberg/pull/33761))
-- GitHub Templates: Format bug report template. ([33786](https://github.com/WordPress/gutenberg/pull/33786))
-- Update bug issue template to use forms. ([33713](https://github.com/WordPress/gutenberg/pull/33713))
+- Label enforcer workflow: Make accessibility a focus instead of a type. ([54941](https://github.com/WordPress/gutenberg/pull/54941))
+- Scripts: Update webpack and related dependencies to the latest version. ([54657](https://github.com/WordPress/gutenberg/pull/54657))
+- Update changelog automation and test fixtures to match the last a11y label renaming. ([54974](https://github.com/WordPress/gutenberg/pull/54974))
 
 #### Testing
-- Add search performance measure and make other measures more stable. ([33848](https://github.com/WordPress/gutenberg/pull/33848))
-- E2E: Block Hierarchy Navigation wait for the column to be highlighted. ([33721](https://github.com/WordPress/gutenberg/pull/33721))
+- Don’t use TypeScript files in scripts package. ([54856](https://github.com/WordPress/gutenberg/pull/54856))
+- ESLint: Update eslint-plugin-testing-library to v6. ([54910](https://github.com/WordPress/gutenberg/pull/54910))
+- Fix end-to-end test: ”WP Editor Meta Boxes > Should save the changes”. ([51884](https://github.com/WordPress/gutenberg/pull/51884))
+- Font Library: Avoid deprected error in test. ([54802](https://github.com/WordPress/gutenberg/pull/54802))
+- Make \`editor.getBlocks\` to return only testing-related properties. ([54901](https://github.com/WordPress/gutenberg/pull/54901))
+- Migrate 'Global styles sidebar' test to Playwright. ([55045](https://github.com/WordPress/gutenberg/pull/55045))
+- Migrate 'iframed block editor settings styles' tests to Playwright. ([55014](https://github.com/WordPress/gutenberg/pull/55014))
+- Migrate 'iframed inline styles' tests to Playwright. ([55009](https://github.com/WordPress/gutenberg/pull/55009))
+- Migrate 'iframed masonry block' tests to Playwright. ([55016](https://github.com/WordPress/gutenberg/pull/55016))
+- Migrate 'iframed multiple block stylesheets' tests to Playwright. ([55003](https://github.com/WordPress/gutenberg/pull/55003))
+- Migrate keyboard-navigable-blocks end-to-end tests from puppeteer to playwright. ([54944](https://github.com/WordPress/gutenberg/pull/54944))
+- Scripts: Properly use CommonJS for default Playwright configuration. ([54988](https://github.com/WordPress/gutenberg/pull/54988))
+- Try fixing the flaky 'Toolbar roving tabindex' end-to-end test. ([54785](https://github.com/WordPress/gutenberg/pull/54785))
+- end-to-end Tests: Revert temporary fixes. ([54865](https://github.com/WordPress/gutenberg/pull/54865))
+- end-to-end Utils: Allow overriding username/password. ([53267](https://github.com/WordPress/gutenberg/pull/53267))
 
 #### Build Tooling
-- Scripts: Update webpack to v5 (try 2). ([33818](https://github.com/WordPress/gutenberg/pull/33818))
+- Add some @types packages as proper dependencies. ([50231](https://github.com/WordPress/gutenberg/pull/50231))
+- Update the default JSX pragma to React instead of @wordpress/element. ([54494](https://github.com/WordPress/gutenberg/pull/54494))
+- Upgrade wp-prettier to v3.0.3 (final). ([54775](https://github.com/WordPress/gutenberg/pull/54775))
 
 
-### Various
+### Security
 
-- Core Data: Deprecate \`getAuthors\` in favor of \`getUsers\`. ([33725](https://github.com/WordPress/gutenberg/pull/33725))
-- RNMobile: Add integration test guide. ([33833](https://github.com/WordPress/gutenberg/pull/33833))
-- RNMobile: Try unifying the unit test command on mobile. ([33657](https://github.com/WordPress/gutenberg/pull/33657))
-- Tune appender margin. ([33866](https://github.com/WordPress/gutenberg/pull/33866))
+#### Data Layer
+- Replace turbo-combine-reducers with combineReducers from Redux. ([54606](https://github.com/WordPress/gutenberg/pull/54606))
 
-#### Block Library
-- Enable ability to remove a link from the Nav Link block in the Nav Block. ([33777](https://github.com/WordPress/gutenberg/pull/33777))
-- Search Block: Removed components class from icon button and polished css. ([33961](https://github.com/WordPress/gutenberg/pull/33961))
-- [Button Block]: Add padding block support. ([31774](https://github.com/WordPress/gutenberg/pull/31774))
 
-#### Full Site Editing
-- Site Editor: Implement a settings object filter. ([33737](https://github.com/WordPress/gutenberg/pull/33737))
-- Template Part placeholder - Add title step to creation flow. ([33703](https://github.com/WordPress/gutenberg/pull/33703))
-- Template part selection popover - minor style updates for visiblity. ([33733](https://github.com/WordPress/gutenberg/pull/33733))
+### Various
+
+- (chore) Revert the 16.7 RC2 release in order to release it again due to wrong changelog. ([54744](https://github.com/WordPress/gutenberg/pull/54744))
 
-#### Widgets Editor
-- Try to fix flaky customizer inspector test 2nd try. ([33965](https://github.com/WordPress/gutenberg/pull/33965))
-- Try to fix flaky customizer inspector test. ([33890](https://github.com/WordPress/gutenberg/pull/33890))
+#### Design Tools
+- Background image block support: Add tests, adjust injection logic slightly. ([54489](https://github.com/WordPress/gutenberg/pull/54489))
+- Background support: Backport fix for undefined array key. ([54850](https://github.com/WordPress/gutenberg/pull/54850))
 
-#### Block Editor
-- Closing the block inserter decrements block type impressions. ([33906](https://github.com/WordPress/gutenberg/pull/33906))
-- Enable rich previews for internal links. ([33086](https://github.com/WordPress/gutenberg/pull/33086))
+#### Typography
+- Revert "Font Library: Avoid rendering font library ui outisde gutenberg plugin". ([54947](https://github.com/WordPress/gutenberg/pull/54947))
 
-#### Icons
-- Try new icons for reusable blocks and template parts. ([34002](https://github.com/WordPress/gutenberg/pull/34002))
+#### Commands
+- Make the reset styles command consistent. ([54841](https://github.com/WordPress/gutenberg/pull/54841))
 
-#### Components
-- Polish the focus style for the segmented control. ([33842](https://github.com/WordPress/gutenberg/pull/33842))
+#### Patterns
+- Use "Not synced" in place of "Standard" nomenclature for patterns. ([54839](https://github.com/WordPress/gutenberg/pull/54839))
 
-#### REST API
-- Improve likelihood of getting rich link previews by modifying UA string for URL Details REST API endpoint. ([33747](https://github.com/WordPress/gutenberg/pull/33747))
+#### Block Editor
+- Simplify BlockPatternsSyncFilter with clearer labels and additional context. ([54838](https://github.com/WordPress/gutenberg/pull/54838))
 
-#### CSS & Styling
-- Try: Reduce specificity of reset & classic styles. ([32659](https://github.com/WordPress/gutenberg/pull/32659))
+#### Site Editor
+- Use consistent capitalization for template parts in Site Editor constants. ([54709](https://github.com/WordPress/gutenberg/pull/54709))
 
 
 "
@@ -217,17 +280,14 @@ exports[`getContributorList verify that the contributors list is properly format
 
 The following contributors merged PRs in this release:
 
-@aaronrobertshaw @Addison-Stavlo @alexstine @amir2mi @annezazu @antonis @ceyhun @christianztamayo @chrisvanpatten @ciampo @dcalhoun @desrosj @fluiddot @geriux @getdave @glendaviesnz @guarani @gwwar @gziolo @hypest @jasmussen @jeremyfelt @jeyip @jhnstn @johngodley @kapilpaul @kevin940726 @MaggieCabrera @Mamaduka @mkaz @mrleemon @mtias @nosolosw @ntsekouras @rbrishabh @RhnSharma @ryelle @sarayourfriend @scruffian @SiobhyB @stacimc @StevenDufresne @talldan @torounit @walbo @youknowriad"
+@aaronrobertshaw @adamsilverstein @alexstine @andrewhayward @andrewserong @annezazu @anton-vlasenko @artemiomorales @aurooba @bangank36 @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @jameskoster @jeryj @jsnajdr @juhi123 @kevin940726 @leemyongpakvn @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mirka @mtias @mujuonly @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @priethor @ramonjd @richtabor @scruffian @SiobhyB @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @tellyworth @them-es @torounit @tyxla @westonruter @WunderBart @youknowriad"
 `;
 
 exports[`getContributorProps verify that the contributors props are properly formatted 1`] = `
-"## First time contributors
+"## First-time contributors
 
-The following PRs were merged by first time contributors:
+The following PRs were merged by first-time contributors:
 
-- @alexstine: Fix some JAWS bugs. ([33627](https://github.com/WordPress/gutenberg/pull/33627))
-- @amir2mi: Example for rest_endpoints filter in PHP. ([33738](https://github.com/WordPress/gutenberg/pull/33738))
-- @christianztamayo: Scripts: Webpack configuration update to minimize CSS. ([33676](https://github.com/WordPress/gutenberg/pull/33676))
-- @kapilpaul: Add spaces in add_theme_support documentation code. ([33796](https://github.com/WordPress/gutenberg/pull/33796))
+- @leemyongpakvn: Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
 "
 `;
diff --git a/bin/plugin/commands/test/changelog.js b/bin/plugin/commands/test/changelog.js
index e9e1872c38c997..9c9d423d18d1cb 100644
--- a/bin/plugin/commands/test/changelog.js
+++ b/bin/plugin/commands/test/changelog.js
@@ -19,12 +19,13 @@ import {
 	getChangelog,
 	getContributorProps,
 	getContributorsList,
+	mapLabelsToFeatures,
 } from '../changelog';
 import _pullRequests from './fixtures/pull-requests.json';
 import botPullRequestFixture from './fixtures/bot-pull-requests.json';
 
 /**
- * pull-requests.json is a static snapshot of real data from the Github API.
+ * pull-requests.json is a static snapshot of real data from the GitHub API.
  * We merge this with dummy fixture data for a "bot" pull request so as to
  * ensure future updates to the pull-requests.json doesn't reduce test coverage
  * of filtering out of bot PRs.
@@ -51,7 +52,7 @@ describe( 'getNormalizedTitle', () => {
 			undefined,
 			{
 				...DEFAULT_ISSUE,
-				labels: [ { name: 'Mobile App Android/iOS' } ],
+				labels: [ { name: 'Mobile App - i.e. Android or iOS' } ],
 			},
 		],
 		[
@@ -188,6 +189,17 @@ describe( 'getIssueType', () => {
 
 		expect( result ).toBe( 'Enhancements' );
 	} );
+
+	it( 'prioritizes meta categories', () => {
+		const result = getIssueType( {
+			labels: [
+				{ name: '[Type] Bug' },
+				{ name: '[Type] Build Tooling' },
+			],
+		} );
+
+		expect( result ).toBe( 'Tools' );
+	} );
 } );
 
 describe( 'getIssueFeature', () => {
@@ -301,18 +313,35 @@ describe( 'sortGroup', () => {
 } );
 
 describe( 'getTypesByLabels', () => {
-	it( 'returns all normalized type candidates by type prefix', () => {
+	it( 'returns all normalized type candidates by type prefix. it is case insensitive', () => {
 		const result = getTypesByLabels( [
 			'[Type] Regression',
 			'[Type] Bug',
 			'[Package] Blocks',
-			'[Type] Performance',
+			'[Type] performance',
 		] );
 
 		expect( result ).toEqual( [ 'Bug Fixes', 'Performance' ] );
 	} );
 } );
 
+describe( 'mapLabelsToFeatures', () => {
+	it( 'returns all normalized feature candidates by feature prefix. it is case insensitive', () => {
+		const result = mapLabelsToFeatures( [
+			'[Package] Commands',
+			'[Package] Block Library',
+			'[Feature] Link Editing',
+			'[Feature] block Multi Selection',
+		] );
+
+		expect( result ).toEqual( [
+			'Commands',
+			'Block Library',
+			'Block Editor',
+		] );
+	} );
+} );
+
 describe( 'getTypesByTitle', () => {
 	it.each( [
 		[ 'Fix Typography panel rendering from style hooks' ],
@@ -462,7 +491,7 @@ describe( 'getFormattedItemDescription', () => {
 describe( 'getChangelog', () => {
 	test( 'verify that the changelog is properly formatted', () => {
 		// The fixture with the list of pull requests was generated by running the following command:
-		// npm run other:changelog -- --milestone="Gutenberg 11.3"
+		// npm run other:changelog -- --milestone="Gutenberg 16.8"
 		// The response from the `fetchAllPullRequests` call in the `getChangelog` method was stored in the JSON file.
 		expect( getChangelog( pullRequests ) ).toMatchSnapshot();
 	} );
@@ -474,6 +503,11 @@ describe( 'getContributorProps', () => {
 		// npm run other:changelog -- --milestone="Gutenberg 11.3"
 		expect( getContributorProps( pullRequests ) ).toMatchSnapshot();
 	} );
+	test( 'do not include first time contributors section if there are not any', () => {
+		expect(
+			getContributorProps( pullRequests.slice( 0, 4 ) )
+		).toMatchInlineSnapshot( `""` );
+	} );
 } );
 
 describe( 'getContributorList', () => {
diff --git a/bin/plugin/commands/test/fixtures/pull-requests.json b/bin/plugin/commands/test/fixtures/pull-requests.json
index bb9a66a6e8e948..c0ad0d7969399e 100644
--- a/bin/plugin/commands/test/fixtures/pull-requests.json
+++ b/bin/plugin/commands/test/fixtures/pull-requests.json
@@ -1,116 +1,76 @@
 [
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/34002",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34002/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34002/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34002/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/34002",
-		"id": 966290882,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA4NTQ3NjEw",
-		"number": 34002,
-		"title": "Try new icons for reusable blocks and template parts.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55052",
+		"id": 1926590588,
+		"node_id": "PR_kwDOBNHdeM5b68B5",
+		"number": 55052,
+		"title": "Rich text: avoid shortcode logic, adjust paste handler instead",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "ellatrix",
+			"id": 4710635,
+			"node_id": "MDQ6VXNlcjQ3MTA2MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4710635?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/ellatrix",
+			"html_url": "https://github.com/ellatrix",
+			"followers_url": "https://api.github.com/users/ellatrix/followers",
+			"following_url": "https://api.github.com/users/ellatrix/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ellatrix/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ellatrix/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ellatrix/subscriptions",
+			"organizations_url": "https://api.github.com/users/ellatrix/orgs",
+			"repos_url": "https://api.github.com/users/ellatrix/repos",
+			"events_url": "https://api.github.com/users/ellatrix/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ellatrix/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 783337752,
-				"node_id": "MDU6TGFiZWw3ODMzMzc3NTI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Reusable%20Blocks",
-				"name": "[Feature] Reusable Blocks",
+				"id": 598548627,
+				"node_id": "MDU6TGFiZWw1OTg1NDg2Mjc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Rich%20Text",
+				"name": "[Feature] Rich Text",
 				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Related to the Rich Text component that allows developers to render a contenteditable"
 			},
 			{
-				"id": 1988226925,
-				"node_id": "MDU6TGFiZWwxOTg4MjI2OTI1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Icons",
-				"name": "[Package] Icons",
-				"color": "ed2572",
+				"id": 671400480,
+				"node_id": "MDU6TGFiZWw2NzE0MDA0ODA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Raw%20Handling",
+				"name": "[Feature] Raw Handling",
+				"color": "fbca04",
 				"default": false,
-				"description": "/packages/icons"
+				"description": "Related to the ability to convert content to blocks, paste handling, etc"
 			},
 			{
-				"id": 2373088071,
-				"node_id": "MDU6TGFiZWwyMzczMDg4MDcx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Template-Part",
-				"name": "[Block] Template-Part",
-				"color": "6767e5",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -133,68 +93,84 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-08-11T09:06:57Z",
-		"updated_at": "2021-08-12T07:30:40Z",
-		"closed_at": "2021-08-11T11:26:22Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 4,
+		"created_at": "2023-10-04T16:30:23Z",
+		"updated_at": "2023-10-04T18:35:43Z",
+		"closed_at": "2023-10-04T18:35:18Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/34002",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/34002",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/34002.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/34002.patch"
-		},
-		"body": "## Description\r\n\r\nStarts work on #33897 by adding new generic icons for template parts and reusable blocks.\r\n\r\nFor now, the PR adds the two new icons, and applies them to template parts and partially, reusable blocks:\r\n\r\n<img width=\"1270\" alt=\"Screenshot 2021-08-11 at 11 01 42\" src=\"https://user-images.githubusercontent.com/1204802/129001474-efc59606-2b05-4335-86e6-ddadc4d963cb.png\">\r\n\r\nAs shown above, there's still some logic in the Reusable Block system that falls back to the `defaultBlock` icon, as shown above:\r\n\r\n- In the List View\r\n- In the Inspector description\r\n\r\nAdditionally, the `defaultBlock` is used for select mode:\r\n\r\n<img width=\"305\" alt=\"Screenshot 2021-08-11 at 11 01 54\" src=\"https://user-images.githubusercontent.com/1204802/129001687-513ee6bf-102d-4970-9ed4-fa45c03d915d.png\">\r\n\r\nIf you're familiar with the reusable blocks codebase, I'd appreciate your help in applying the new icon in those remaining place. \r\n\r\n## How has this been tested?\r\n\r\nTemplate Parts and Reusable blocks, when used in the canvas, list view, and inspector, should leverage the new icons.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55052",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55052",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55052.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55052.patch",
+			"merged_at": "2023-10-04T18:35:18Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n\r\nWe can avoid rich text having to check for shortcodes by building the check into the paste handler. We already parse shortcodes, we should just do so a bit earlier.\r\n\r\nThis PR actually also fixes an issue with paste from Slack: previously paragraph wouldn't get fixed for inline paste. Now the Slack paragraph fixer runs for inline mode as well.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nTo simplify paste handling and rich text and prepare it to be moved to writing flow.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n\r\nE2e tests should pass.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55052/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/34000",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34000/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34000/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/34000/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/34000",
-		"id": 966213667,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA4NDc2NzQy",
-		"number": 34000,
-		"title": "[Mobile] - Global styles - Add color to the block styles filter list",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55048",
+		"id": 1926536069,
+		"node_id": "PR_kwDOBNHdeM5b6wO1",
+		"number": 55048,
+		"title": "Rich text: use getPasteEventData",
 		"user": {
-			"login": "geriux",
-			"id": 4885740,
-			"node_id": "MDQ6VXNlcjQ4ODU3NDA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/4885740?v=4",
+			"login": "ellatrix",
+			"id": 4710635,
+			"node_id": "MDQ6VXNlcjQ3MTA2MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4710635?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/geriux",
-			"html_url": "https://github.com/geriux",
-			"followers_url": "https://api.github.com/users/geriux/followers",
-			"following_url": "https://api.github.com/users/geriux/following{/other_user}",
-			"gists_url": "https://api.github.com/users/geriux/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/geriux/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/geriux/subscriptions",
-			"organizations_url": "https://api.github.com/users/geriux/orgs",
-			"repos_url": "https://api.github.com/users/geriux/repos",
-			"events_url": "https://api.github.com/users/geriux/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/geriux/received_events",
+			"url": "https://api.github.com/users/ellatrix",
+			"html_url": "https://github.com/ellatrix",
+			"followers_url": "https://api.github.com/users/ellatrix/followers",
+			"following_url": "https://api.github.com/users/ellatrix/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ellatrix/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ellatrix/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ellatrix/subscriptions",
+			"organizations_url": "https://api.github.com/users/ellatrix/orgs",
+			"repos_url": "https://api.github.com/users/ellatrix/repos",
+			"events_url": "https://api.github.com/users/ellatrix/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ellatrix/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
@@ -202,13 +178,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -231,39 +207,55 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-11T08:20:47Z",
-		"updated_at": "2021-08-11T14:18:41Z",
-		"closed_at": "2021-08-11T14:18:15Z",
+		"comments": 3,
+		"created_at": "2023-10-04T15:57:10Z",
+		"updated_at": "2023-10-04T17:32:23Z",
+		"closed_at": "2023-10-04T17:31:45Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/34000",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/34000",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/34000.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/34000.patch"
-		},
-		"body": "`Gutenberg Mobile PR` -> https://github.com/wordpress-mobile/gutenberg-mobile/pull/3822\r\n\r\n## Description\r\nWe [recently added](https://github.com/WordPress/gutenberg/pull/33782) some filtering to prevent passing block style attributes that mobile doesn't support yet, by doing this the `color` styles were being filtered out. This PR adds `color` to the style attributes we support.\r\n\r\n## How has this been tested?\r\n- Open the app\r\n- Add a block that supports text color customization, like `Paragraph`\r\n- Open the settings of the block\r\n- Tap on `Text color`\r\n- Go to the end of the list and select `CUSTOM`\r\n- Change the color\r\n- **Expect** to see the text color changing in the block\r\n\r\n## Screenshots <!-- if applicable -->\r\nBefore|After\r\n-|-\r\n<kbd><img src=\"https://user-images.githubusercontent.com/4885740/128993918-3ce21e36-4f67-4abe-bd63-fc0760e7a84f.gif\" width=\"200\" /></kbd> | <kbd><img src=\"https://user-images.githubusercontent.com/4885740/128993930-25e1e76e-1d21-4961-9011-4130f6db57ac.gif\" width=\"200\" /></kbd>\r\n\r\n## Types of changes\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55048",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55048",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55048.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55048.patch",
+			"merged_at": "2023-10-04T17:31:45Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nThe code is reusable through `getPasteEventData`, we can use it in RichText. Additionally we can improve `getPasteEventData` to strip the meta tag and the garbage from Word.\r\n\r\n## Why?\r\n\r\nNeed to introduce more paste event handlers in #54543, so this makes it easier.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55048/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33992",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33992/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33992/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33992/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33992",
-		"id": 965954789,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA4MjM0OTc3",
-		"number": 33992,
-		"title": "Site Logo: Use getMedia shorthand",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55045",
+		"id": 1926291618,
+		"node_id": "PR_kwDOBNHdeM5b56hN",
+		"number": 55045,
+		"title": "Migrate 'Global styles sidebar' test to Playwright",
 		"user": {
 			"login": "Mamaduka",
 			"id": 240569,
@@ -286,22 +278,13 @@
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
-				"default": false,
-				"description": "Gotta shave those yaks."
-			},
-			{
-				"id": 2347193850,
-				"node_id": "MDU6TGFiZWwyMzQ3MTkzODUw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Site%20Logo",
-				"name": "[Block] Site Logo",
-				"color": "6767e5",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
@@ -349,13 +332,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -378,140 +361,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-11T05:29:30Z",
-		"updated_at": "2021-08-11T07:35:13Z",
-		"closed_at": "2021-08-11T07:34:49Z",
+		"comments": 3,
+		"created_at": "2023-10-04T14:01:37Z",
+		"updated_at": "2023-10-04T17:40:30Z",
+		"closed_at": "2023-10-04T17:40:05Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33992",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33992",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33992.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33992.patch"
-		},
-		"body": "## Description\r\nPR replaces `getEntityRecord` with `getMedia` shorthand for simplicity.\r\n\r\nSimilar PR: #33943.\r\n\r\n## How has this been tested?\r\nThis is a non-breaking change. Tested that the \"Site Logo\" block works as expected.\r\n\r\n## Types of changes\r\nCode Quality\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55045",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55045",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55045.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55045.patch",
+			"merged_at": "2023-10-04T17:40:05Z"
+		},
+		"body": "## What?\r\nPart of #38851.\r\n\r\nPR migrates 'Global styles sidebar' tests to Playwright.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/site-editor/global-styles-sidebar.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55045/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33982",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33982/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33982/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33982/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33982",
-		"id": 965187245,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA3NTI4ODcz",
-		"number": 33982,
-		"title": "Components: use the `__unsafe_useEmotionCache` in the `useCx` hook",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55044",
+		"id": 1926216773,
+		"node_id": "PR_kwDOBNHdeM5b5qEF",
+		"number": 55044,
+		"title": "Docs: Add a callout to the `wp-now` documentation to mention it's still experimental",
 		"user": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "priethor",
+			"id": 27339341,
+			"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/priethor",
+			"html_url": "https://github.com/priethor",
+			"followers_url": "https://api.github.com/users/priethor/followers",
+			"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+			"organizations_url": "https://api.github.com/users/priethor/orgs",
+			"repos_url": "https://api.github.com/users/priethor/repos",
+			"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/priethor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
-				"default": false,
-				"description": "Gotta shave those yaks."
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/components"
-			},
-			{
-				"id": 2555015900,
-				"node_id": "MDU6TGFiZWwyNTU1MDE1OTAw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Component%20System",
-				"name": "[Feature] Component System",
-				"color": "fbca04",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": "The next iteration on WordPress Components."
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "priethor",
+			"id": 27339341,
+			"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/priethor",
+			"html_url": "https://github.com/priethor",
+			"followers_url": "https://api.github.com/users/priethor/followers",
+			"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+			"organizations_url": "https://api.github.com/users/priethor/orgs",
+			"repos_url": "https://api.github.com/users/priethor/repos",
+			"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/priethor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "ciampo",
-				"id": 1083581,
-				"node_id": "MDQ6VXNlcjEwODM1ODE=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+				"login": "priethor",
+				"id": 27339341,
+				"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/ciampo",
-				"html_url": "https://github.com/ciampo",
-				"followers_url": "https://api.github.com/users/ciampo/followers",
-				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-				"organizations_url": "https://api.github.com/users/ciampo/orgs",
-				"repos_url": "https://api.github.com/users/ciampo/repos",
-				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ciampo/received_events",
+				"url": "https://api.github.com/users/priethor",
+				"html_url": "https://github.com/priethor",
+				"followers_url": "https://api.github.com/users/priethor/followers",
+				"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+				"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+				"organizations_url": "https://api.github.com/users/priethor/orgs",
+				"repos_url": "https://api.github.com/users/priethor/repos",
+				"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/priethor/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -534,56 +515,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-10T17:43:01Z",
-		"updated_at": "2021-08-11T08:16:06Z",
-		"closed_at": "2021-08-11T08:15:38Z",
+		"comments": 2,
+		"created_at": "2023-10-04T13:25:12Z",
+		"updated_at": "2023-10-04T16:28:50Z",
+		"closed_at": "2023-10-04T16:28:23Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33982",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33982",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33982.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33982.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nA [recent change](https://github.com/emotion-js/emotion/pull/2441) in Emotion exposed the `__unsafe_useEmotionCache()` hook.\r\n\r\nThis PR updates the package versions of `@emotion/react` and `@emotion/cache` and uses this newly exposed function in the `useCx` hook, instead of exposing the private `CacheProvider._context` variable directly.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n- Project builds, tests pass\r\n- Components in Storybook work as expected (in particular, the `useCx` Storybook story)\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nN/A\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\nRefactor\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- N/A I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55044",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55044",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55044.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55044.patch",
+			"merged_at": "2023-10-04T16:28:23Z"
+		},
+		"body": "## What?\r\nUpdate the `wp-now` documentation to mention it's still experimental.\r\n\r\n## Why?\r\nSo that users understand the risks involved and use it at their own risk.\r\n\r\n## How?\r\nBy adding a callout notice!\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55044/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33974",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33974/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33974/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33974/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33974",
-		"id": 964956517,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA3MzMxNDYw",
-		"number": 33974,
-		"title": "Improve the rendering/update performance of the image block",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55041",
+		"id": 1925939588,
+		"node_id": "PR_kwDOBNHdeM5b4tQg",
+		"number": 55041,
+		"title": "Block Editor: Subscribe only to block editor store in `useBlockSync`",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -595,70 +592,70 @@
 				"name": "[Type] Performance",
 				"color": "f3f4fe",
 				"default": false,
-				"description": ""
+				"description": "Related to performance efforts"
 			},
 			{
-				"id": 1101518360,
-				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
-				"name": "[Block] Image",
-				"color": "6767e5",
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/block-editor"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"login": "tyxla",
+				"id": 8436925,
+				"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"url": "https://api.github.com/users/tyxla",
+				"html_url": "https://github.com/tyxla",
+				"followers_url": "https://api.github.com/users/tyxla/followers",
+				"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+				"organizations_url": "https://api.github.com/users/tyxla/orgs",
+				"repos_url": "https://api.github.com/users/tyxla/repos",
+				"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tyxla/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -681,96 +678,161 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-08-10T12:59:50Z",
-		"updated_at": "2021-08-10T14:07:42Z",
-		"closed_at": "2021-08-10T14:07:18Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 4,
+		"created_at": "2023-10-04T10:50:32Z",
+		"updated_at": "2023-10-04T13:05:07Z",
+		"closed_at": "2023-10-04T13:04:33Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33974",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33974",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33974.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33974.patch"
-		},
-		"body": "While navigating the performance trace when typing the editor, I noticed some wasted milliseconds in the rendering of image blocks. This PR refactors the useSelect call of the image block a bit to improve the situation.\r\n\r\nI'm not really certain whether the impact will be visible in any of our performance metrics, we'll see.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55041",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55041",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55041.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55041.patch",
+			"merged_at": "2023-10-04T13:04:33Z"
+		},
+		"body": "## What?\r\nThis PR updates an inner subscription inside `useBlockSync` to only subscribe to the block editor store, instead of to all stores.\r\n\r\n## Why?\r\nWhile doing another quick timeboxing session on #54819 I noticed that we're currently subscribing to all stores in `useBlockSync` when syncing back from the block editor store to the controlling entity. However, we're using only the block editor store, so there's no need to subscribe to all other stores.\r\n\r\n## How?\r\nWe're just adding the block editor as the store descriptor to subscribe to.\r\n\r\n## Testing Instructions\r\nSmoke test typing and verify all checks are green.\r\n\r\n### Testing Instructions for Keyboard\r\nNone\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nNone",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55041/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33965",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33965/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33965/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33965/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33965",
-		"id": 964611940,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA3MDQyODk0",
-		"number": 33965,
-		"title": "Try to fix flaky customizer inspector test 2nd try",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55038",
+		"id": 1925807656,
+		"node_id": "PR_kwDOBNHdeM5b4QQY",
+		"number": 55038,
+		"title": "Media & Text: Fix React warning",
 		"user": {
-			"login": "kevin940726",
-			"id": 7753001,
-			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/kevin940726",
-			"html_url": "https://github.com/kevin940726",
-			"followers_url": "https://api.github.com/users/kevin940726/followers",
-			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
-			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
-			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
-			"repos_url": "https://api.github.com/users/kevin940726/repos",
-			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 2632875097,
-				"node_id": "MDU6TGFiZWwyNjMyODc1MDk3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Widgets%20Customizer",
-				"name": "[Feature] Widgets Customizer",
-				"color": "fbca04",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1111898611,
+				"node_id": "MDU6TGFiZWwxMTExODk4NjEx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Media%20&%20Text",
+				"name": "[Block] Media & Text",
+				"color": "6767e5",
 				"default": false,
-				"description": "Ability to add and edit blocks in Customize → Widgets."
+				"description": "Affects the Media & Text Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+		"assignee": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
 				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
 				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
 				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
@@ -779,131 +841,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 4,
-		"created_at": "2021-08-10T05:34:22Z",
-		"updated_at": "2021-08-10T08:10:07Z",
-		"closed_at": "2021-08-10T08:09:21Z",
+		"created_at": "2023-10-04T09:40:57Z",
+		"updated_at": "2023-10-05T11:16:54Z",
+		"closed_at": "2023-10-04T11:13:05Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33965",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33965",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33965.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33965.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nContinue from #33890. Second try to fix flaky e2e tests.\r\n\r\n#33890 had the right call, but the fix didn't work. This PR instead try to disable the intermediate transition to prevent the block toolbar from moving to the wrong position. Hopefully this time it'll fix it.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nNot yet found a reliable way to reproduce the issue, so maybe we just have to merge this and monitor it on trunk.\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nBug fix\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55038",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55038",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55038.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55038.patch",
+			"merged_at": "2023-10-04T11:13:05Z"
+		},
+		"body": "## What?\r\nFixes #54963.\r\nAlternative to #54965.\r\n\r\nPR fixes the React warning when toggling the \"Crop image to fill entire column\" option for the Media & Text block.\r\n\r\n**Warning**\r\n\r\n```\r\nWarning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.\r\n```\r\n\r\n## How?\r\nCast the `imageFill` value to a `boolean` when setting the `checked` prop. It's a `boolean `attribute with no default defined.\r\n\r\n## Testing Instructions\r\n1. Create a new post or page.\r\n2. Add a media & text block. Select or upload an image.\r\n3. Enable the option \"Crop image to fill entire column\"\r\n4. Confirm that there is no JavaScript warning about the value changing from undefined to a defined value, and that the crop setting continues to work.\r\n5. Deactivate Gutenberg, add two media and text blocks, one with the crop option enabled, one without. Activate Gutenberg again and confirm that there are no block validation errors.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55038/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33964",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33964/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33964/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33964/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33964",
-		"id": 964604344,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA3MDM2NDUw",
-		"number": 33964,
-		"title": "Fix navigation block appender invalid html",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55037",
+		"id": 1925802684,
+		"node_id": "PR_kwDOBNHdeM5b4PLq",
+		"number": 55037,
+		"title": "Documentation: Add a page about the format library to the platform docs site",
 		"user": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 1225853227,
-				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
-				"name": "[Block] Navigation",
-				"color": "6767e5",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": ""
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "talldan",
-				"id": 677833,
-				"node_id": "MDQ6VXNlcjY3NzgzMw==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/talldan",
-				"html_url": "https://github.com/talldan",
-				"followers_url": "https://api.github.com/users/talldan/followers",
-				"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-				"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-				"organizations_url": "https://api.github.com/users/talldan/orgs",
-				"repos_url": "https://api.github.com/users/talldan/repos",
-				"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/talldan/received_events",
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -926,56 +995,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-10T05:15:26Z",
-		"updated_at": "2021-08-10T06:09:20Z",
-		"closed_at": "2021-08-10T06:08:55Z",
+		"comments": 0,
+		"created_at": "2023-10-04T09:38:03Z",
+		"updated_at": "2023-10-04T14:06:18Z",
+		"closed_at": "2023-10-04T14:05:47Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33964",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33964",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33964.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33964.patch"
-		},
-		"body": "## Description\r\nThe navigation block's appender is currently an `li` within a `div`. This changes it to a `div` within a `div` by deleting one line of code 😄 \r\n\r\n## How has this been tested?\r\n1. Add a navigation block\r\n2. Choose 'Start empty'\r\n3. Inspect the HTML of the appender.\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nBug fix (non-breaking change which fixes an issue)\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55037",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55037",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55037.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55037.patch",
+			"merged_at": "2023-10-04T14:05:47Z"
+		},
+		"body": "Related #53874\r\n\r\n## What?\r\n\r\nThis PR add a small documentation page about the format library package and how to leverage it in third-party block editors.\r\nIt's also weird that the \"block library\" package exports a function to register the blocks while the format library auto-registers the formats as soon as you import it. It might be good to unify at some point. cc @ellatrix \r\n\r\n**Note** I have personally tested all the code examples in a third-party vite install.\r\n\r\n### Test the documentation website\r\n\r\n```\r\ncd platform-docs\r\nnpm install\r\nnpm start\r\n```",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55037/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33963",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33963/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33963/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33963/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33963",
-		"id": 964599701,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA3MDMyMzg4",
-		"number": 33963,
-		"title": "Fix navigation block placeholder preview markup",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55033",
+		"id": 1925730969,
+		"node_id": "PR_kwDOBNHdeM5b3_08",
+		"number": 55033,
+		"title": "Fix Deleted Navigation Menu warning string",
 		"user": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
+			"login": "getdave",
+			"id": 444434,
+			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
+			"url": "https://api.github.com/users/getdave",
+			"html_url": "https://github.com/getdave",
+			"followers_url": "https://api.github.com/users/getdave/followers",
+			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+			"organizations_url": "https://api.github.com/users/getdave/orgs",
+			"repos_url": "https://api.github.com/users/getdave/repos",
+			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/getdave/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -987,7 +1072,7 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "An existing feature does not function as intended"
 			},
 			{
 				"id": 1225853227,
@@ -996,70 +1081,70 @@
 				"name": "[Block] Navigation",
 				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Navigation Block"
 			},
 			{
-				"id": 1999059055,
-				"node_id": "MDU6TGFiZWwxOTk5MDU5MDU1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/CSS%20Styling",
-				"name": "CSS Styling",
-				"color": "63e2d2",
+				"id": 5642756854,
+				"node_id": "LA_kwDOBNHdeM8AAAABUFWi9g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/l10n",
+				"name": "l10n",
+				"color": "08B8C3",
 				"default": false,
-				"description": "Related to editor and front end styles, CSS-specific issues."
+				"description": "Localization and translations best practices"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
+			"login": "getdave",
+			"id": 444434,
+			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
+			"url": "https://api.github.com/users/getdave",
+			"html_url": "https://github.com/getdave",
+			"followers_url": "https://api.github.com/users/getdave/followers",
+			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+			"organizations_url": "https://api.github.com/users/getdave/orgs",
+			"repos_url": "https://api.github.com/users/getdave/repos",
+			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/getdave/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "talldan",
-				"id": 677833,
-				"node_id": "MDQ6VXNlcjY3NzgzMw==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/talldan",
-				"html_url": "https://github.com/talldan",
-				"followers_url": "https://api.github.com/users/talldan/followers",
-				"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-				"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-				"organizations_url": "https://api.github.com/users/talldan/orgs",
-				"repos_url": "https://api.github.com/users/talldan/repos",
-				"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/talldan/received_events",
+				"login": "getdave",
+				"id": 444434,
+				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/getdave",
+				"html_url": "https://github.com/getdave",
+				"followers_url": "https://api.github.com/users/getdave/followers",
+				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+				"organizations_url": "https://api.github.com/users/getdave/orgs",
+				"repos_url": "https://api.github.com/users/getdave/repos",
+				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/getdave/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1082,122 +1167,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 4,
-		"created_at": "2021-08-10T05:05:53Z",
-		"updated_at": "2021-08-10T06:10:45Z",
-		"closed_at": "2021-08-10T05:42:26Z",
+		"created_at": "2023-10-04T08:59:19Z",
+		"updated_at": "2023-10-04T11:05:32Z",
+		"closed_at": "2023-10-04T09:44:38Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33963",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33963",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33963.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33963.patch"
-		},
-		"body": "## Description\r\nFixes two separate issues with the navigation block placeholder preview.\r\n\r\nFirst, the preview has invalid html, nesting an `svg` element in a `ul` element:\r\n<img width=\"383\" alt=\"Screenshot 2021-08-10 at 12 29 33 pm\" src=\"https://user-images.githubusercontent.com/677833/128810526-82eb10ee-cee2-4aa0-9201-e434be6de75e.png\">\r\n\r\nSecondly, when using a vertical navigation block, the invisible placeholder was taking up height, leading to this situation after selecting 'Start empty':\r\n<img width=\"545\" alt=\"Screenshot 2021-08-10 at 12 59 27 pm\" src=\"https://user-images.githubusercontent.com/677833/128810682-1793d2a3-2997-4e6b-8d4e-61316dc34bec.png\">\r\n\r\n## How has this been tested?\r\n1. Add both horizontal and vertical nav block, click start empty for both, and deselect the blocks\r\n2. The preview placeholders should look the same\r\n3. Inspect the markup, the svg should now be in a list item.\r\n4. Select the vertical list block and select 'Start empty', there should be no empty space in the nav block above the appender\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nBug fix (non-breaking change which fixes an issue)\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55033",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55033",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55033.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55033.patch",
+			"merged_at": "2023-10-04T09:44:38Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nFix creation of translatable string which was missing a space character.\r\n\r\nRectifies Issue discovered in https://github.com/WordPress/gutenberg/pull/54654#issuecomment-1746392718\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThe string needs a space to make sense.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nUses `createInterpolateElement` to create the full string which avoids dealing with trailing whitespace and makes the entire string translatable.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Add Nav block to a Post and save the post.\r\n2. Find out which Navigation Menu is assigned to the block.\r\n3. In a new tab, go to Site Editor -> Site View (sidebar) -> Navigation. Find the Navigation Menu and delete it.\r\n4. Return to wherever you added the Nav block originally.\r\n5. See the warning about deleted menu.\r\n6. Check that text now contains a space between end of sentence and the button.\r\n7. Check that clicking the button works as on `trunk`.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n<img width=\"599\" alt=\"Screenshot 2023-10-04 at 09 54 04\" src=\"https://github.com/WordPress/gutenberg/assets/444434/43b4b499-7923-433f-a76c-d6bdd9f510b8\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55033/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33961",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33961/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33961/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33961/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33961",
-		"id": 964264228,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA2NzQ4ODYx",
-		"number": 33961,
-		"title": "Search Block: Removed components class from icon button and polished css",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55016",
+		"id": 1924703354,
+		"node_id": "PR_kwDOBNHdeM5b0h9p",
+		"number": 55016,
+		"title": "Migrate 'iframed masonry block' tests to Playwright",
 		"user": {
-			"login": "MaggieCabrera",
-			"id": 3593343,
-			"node_id": "MDQ6VXNlcjM1OTMzNDM=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/MaggieCabrera",
-			"html_url": "https://github.com/MaggieCabrera",
-			"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
-			"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
-			"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
-			"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
-			"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
-			"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1539734701,
-				"node_id": "MDU6TGFiZWwxNTM5NzM0NzAx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Search",
-				"name": "[Block] Search",
-				"color": "6767e5",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "MaggieCabrera",
-			"id": 3593343,
-			"node_id": "MDQ6VXNlcjM1OTMzNDM=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/MaggieCabrera",
-			"html_url": "https://github.com/MaggieCabrera",
-			"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
-			"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
-			"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
-			"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
-			"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
-			"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "MaggieCabrera",
-				"id": 3593343,
-				"node_id": "MDQ6VXNlcjM1OTMzNDM=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/MaggieCabrera",
-				"html_url": "https://github.com/MaggieCabrera",
-				"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
-				"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
-				"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
-				"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
-				"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
-				"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1220,140 +1321,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-08-09T18:37:32Z",
-		"updated_at": "2021-08-10T08:54:14Z",
-		"closed_at": "2021-08-10T08:53:46Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 1,
+		"created_at": "2023-10-03T18:31:31Z",
+		"updated_at": "2023-10-04T04:57:50Z",
+		"closed_at": "2023-10-04T04:57:21Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33961",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33961",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33961.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33961.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nAfter #26446 was merged there was a level of specificity in the CSS created to bring inline the editor and frontend styles that is being caused by the components classes present on the icon button. This PR refactors the button to use the regular button tag instead and removes the extra specificity from the CSS. I also went ahead and refactored the styles that were no longer needed after this change and that were causing mismatches between the editor and the frontend. \r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\nI tested on Emptytheme using the following markup:\r\n\r\n```\r\n<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\"} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\"} /-->\r\n\r\n<!-- wp:separator {\"className\":\"is-style-default\"} -->\r\n<hr class=\"wp-block-separator is-style-default\"/>\r\n<!-- /wp:separator -->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"button-inside\"} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"button-inside\"} /-->\r\n\r\n<!-- wp:separator -->\r\n<hr class=\"wp-block-separator\"/>\r\n<!-- /wp:separator -->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonUseIcon\":true} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonUseIcon\":true} /-->\r\n\r\n<!-- wp:separator -->\r\n<hr class=\"wp-block-separator\"/>\r\n<!-- /wp:separator -->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"button-inside\",\"buttonUseIcon\":true} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"button-inside\",\"buttonUseIcon\":true} /-->\r\n\r\n<!-- wp:separator -->\r\n<hr class=\"wp-block-separator\"/>\r\n<!-- /wp:separator -->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"no-button\"} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"placeholder\":\"Placeholder text...\",\"buttonText\":\"Search\",\"buttonPosition\":\"no-button\"} /-->\r\n\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nThe differences in sizes between editor and frontend are caused by Emptytheme not defining font-family or font-size while the editor does (and tries to reset it with little success). I'd love to improve this so we can have the same on the frontend and the editor but I'm unsure as to what's the correct approach for this.\r\n\r\n**Before:**\r\n\r\nFrontent | Editor\r\n--- | ---\r\n<img width=\"935\" alt=\"Screenshot 2021-08-09 at 20 36 26\" src=\"https://user-images.githubusercontent.com/3593343/128756689-690f8c8f-dfca-4a77-b81c-611f11787cab.png\"> | <img width=\"947\" alt=\"Screenshot 2021-08-09 at 20 36 40\" src=\"https://user-images.githubusercontent.com/3593343/128756686-2b3d6b65-2442-4ec2-90ad-ac5c443f9a37.png\">\r\n\r\n\r\n**After:**\r\n\r\nFrontent | Editor\r\n--- | ---\r\n<img width=\"1020\" alt=\"Screenshot 2021-08-09 at 20 28 02\" src=\"https://user-images.githubusercontent.com/3593343/128756553-4c4771f8-9333-444b-8243-43df15ab17c6.png\"> | <img width=\"926\" alt=\"Screenshot 2021-08-09 at 20 27 59\" src=\"https://user-images.githubusercontent.com/3593343/128756559-218a1bd8-5d92-4940-85e3-fd5e739cad5c.png\">\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55016",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55016",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55016.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55016.patch",
+			"merged_at": "2023-10-04T04:57:21Z"
+		},
+		"body": "## What?\r\nPart of #38851.\r\nCloses #34773.\r\n\r\nPR migrates 'iframed masonry block' tests to Playwright and simplifies it. Now that the editor loads in iframed by default, extra steps are unnecessary.\r\n\r\n## Why?\r\nThis is a part of general migration 🐦\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55016/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33951",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33951/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33951/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33951/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33951",
-		"id": 963902794,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA2NDQwNTIx",
-		"number": 33951,
-		"title": "Site editor: fix presets for blocks with multiple selectors",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55014",
+		"id": 1924644383,
+		"node_id": "PR_kwDOBNHdeM5b0VRt",
+		"number": 55014,
+		"title": "Migrate 'iframed block editor settings styles' tests to Playwright",
 		"user": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 2706102777,
-				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
-				"name": "[Feature] Site Editor",
-				"color": "fbca04",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "nosolosw",
-				"id": 583546,
-				"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/nosolosw",
-				"html_url": "https://github.com/nosolosw",
-				"followers_url": "https://api.github.com/users/nosolosw/followers",
-				"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-				"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-				"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-				"repos_url": "https://api.github.com/users/nosolosw/repos",
-				"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1376,91 +1475,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 1,
-		"created_at": "2021-08-09T11:32:27Z",
-		"updated_at": "2021-08-09T16:04:15Z",
-		"closed_at": "2021-08-09T16:03:48Z",
+		"created_at": "2023-10-03T17:51:36Z",
+		"updated_at": "2023-10-04T04:21:00Z",
+		"closed_at": "2023-10-04T04:20:36Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33951",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33951",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33951.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33951.patch"
-		},
-		"body": "Fixes https://github.com/WordPress/gutenberg/issues/31660",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55014",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55014",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55014.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55014.patch",
+			"merged_at": "2023-10-04T04:20:36Z"
+		},
+		"body": "## What?\r\nPart of #38851.\r\nCloses #54602.\r\nCloses #54462.\r\n\r\nPR migrates 'iframed block editor settings styles' tests to Playwright.\r\n\r\n## Why?\r\nThis is a relatively new test and should've been written with Playwright. Ref: #52767.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55014/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33945",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33945/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33945/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33945/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33945",
-		"id": 963666305,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA2MjM2MjEx",
-		"number": 33945,
-		"title": "Scripts: Fix typo in format change message.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55012",
+		"id": 1924536618,
+		"node_id": "PR_kwDOBNHdeM5bz99-",
+		"number": 55012,
+		"title": "[Inserter]: Fix reset of registered media categories",
 		"user": {
-			"login": "StevenDufresne",
-			"id": 1657336,
-			"node_id": "MDQ6VXNlcjE2NTczMzY=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1657336?v=4",
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/StevenDufresne",
-			"html_url": "https://github.com/StevenDufresne",
-			"followers_url": "https://api.github.com/users/StevenDufresne/followers",
-			"following_url": "https://api.github.com/users/StevenDufresne/following{/other_user}",
-			"gists_url": "https://api.github.com/users/StevenDufresne/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/StevenDufresne/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/StevenDufresne/subscriptions",
-			"organizations_url": "https://api.github.com/users/StevenDufresne/orgs",
-			"repos_url": "https://api.github.com/users/StevenDufresne/repos",
-			"events_url": "https://api.github.com/users/StevenDufresne/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/StevenDufresne/received_events",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 978007737,
-				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
-				"name": "[Package] Scripts",
-				"color": "ed2572",
+				"id": 596962434,
+				"node_id": "MDU6TGFiZWw1OTY5NjI0MzQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Inserter",
+				"name": "[Feature] Inserter",
+				"color": "fbca04",
 				"default": false,
-				"description": "/packages/scripts"
+				"description": "The main way to insert blocks using the + button in the editing interface"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ntsekouras",
+				"id": 16275880,
+				"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ntsekouras",
+				"html_url": "https://github.com/ntsekouras",
+				"followers_url": "https://api.github.com/users/ntsekouras/followers",
+				"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+				"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+				"repos_url": "https://api.github.com/users/ntsekouras/repos",
+				"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1483,39 +1638,55 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-09T05:48:44Z",
-		"updated_at": "2021-08-09T08:08:59Z",
-		"closed_at": "2021-08-09T08:08:38Z",
+		"comments": 3,
+		"created_at": "2023-10-03T16:42:22Z",
+		"updated_at": "2023-10-04T13:43:44Z",
+		"closed_at": "2023-10-04T11:31:58Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33945",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33945",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33945.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33945.patch"
-		},
-		"body": "## Description\r\nFixes a small typo introduced in #30240.\r\n\r\n`continiue` -> `continue`\r\n\r\n## How has this been tested?\r\nRan locally.\r\n\r\n## Screenshots <!-- if applicable -->\r\nN/A\r\n\r\n## Types of changes\r\nText update.\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55012",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55012",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55012.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55012.patch",
+			"merged_at": "2023-10-04T11:31:58Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nFixes: https://github.com/WordPress/gutenberg/issues/52832\r\n\r\nIn https://github.com/WordPress/gutenberg/pull/51542 a new `registerInserterMediaCategory` API to make media categories extensible was introduced. Since `inserterMediaCategories` is a block editor setting though there was an issue that if we register new categories before the initialization of the block editor store's settings or we updated another setting that triggers a settings reset(ex spotlight mode), the added categories were lost.\r\n\r\nThis PR introduces a new reducer in block editor(`registeredInserterMediaCategories`) and merges the registered ones and the settings when consuming the media categories in media tab.\r\n\r\n\r\n\r\n## Testing Instructions\r\n1. Register categories with PHP and JS\r\n2. Update a setting like `Spotlight mode`\r\n3. Observe that the categories are preserved.\r\n\r\nPHP registration code:\r\n```php\r\nadd_action( 'enqueue_block_editor_assets', function() {\r\n\twp_add_inline_script( 'wp-editor', \"\r\nwp.domReady( function() {\r\n\twp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( {\r\n\t\tname: 'openverse-2',\r\n\t\tlabels: {\r\n\t\t\tname: 'Openverse 2',\r\n\t\t\tsearch_items: 'Search Openverse',\r\n\t\t},\r\n\t\tmediaType: 'image',\r\n\t\tasync fetch( query = {} ) {\r\n\t\t\tconst defaultArgs = {\r\n\t\t\t\tmature: false,\r\n\t\t\t\texcluded_source: 'flickr,inaturalist,wikimedia',\r\n\t\t\t\tlicense: 'pdm,cc0',\r\n\t\t\t};\r\n\t\t\tconst finalQuery = { ...query, ...defaultArgs };\r\n\t\t\tconst mapFromInserterMediaRequest = {\r\n\t\t\t\tper_page: 'page_size',\r\n\t\t\t\tsearch: 'q',\r\n\t\t\t};\r\n\t\t\tconst url = new URL( 'https://api.openverse.engineering/v1/images/' );\r\n\t\t\tObject.entries( finalQuery ).forEach( ( [ key, value ] ) => {\r\n\t\t\t\tconst queryKey = mapFromInserterMediaRequest[ key ] || key;\r\n\t\t\t\turl.searchParams.set( queryKey, value );\r\n\t\t\t} );\r\n\t\t\tconst response = await window.fetch( url, {\r\n\t\t\t\theaders: {\r\n\t\t\t\t\t'User-Agent': 'WordPress/inserter-media-fetch',\r\n\t\t\t\t},\r\n\t\t\t} );\r\n\t\t\tconst jsonResponse = await response.json();\r\n\t\t\tconst results = jsonResponse.results;\r\n\t\t\treturn results.map( ( result ) => ( {\r\n\t\t\t\t...result,\r\n\t\t\t\tsourceId: result.id,\r\n\t\t\t\tid: undefined,\r\n\t\t\t\tcaption: result.caption,\r\n\t\t\t\tpreviewUrl: result.thumbnail,\r\n\t\t\t} ) );\r\n\t\t},\r\n\t\tgetReportUrl: ( { sourceId } ) =>\r\n\t\t\t'https://wordpress.org/openverse/image/' + sourceId + '/report/',\r\n\t\tisExternalResource: true,\r\n\t} );\r\n\tconsole.log( 'Registered inserter media categories', wp.data.select( 'core/block-editor' ).getSettings().inserterMediaCategories );\r\n} );\r\n\t\" );\r\n} );\r\n```\r\n\r\nJS code to run in dev tools:\r\n```\r\nwp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( {\r\n\tname: 'openverse from JS',\r\n\tlabels: {\r\n\t\tname: 'Openverse JS',\r\n\t\tsearch_items: 'Search Openverse',\r\n\t},\r\n\tmediaType: 'image',\r\n\tasync fetch( query = {} ) {\r\n\t\tconst defaultArgs = {\r\n\t\t\tmature: false,\r\n\t\t\texcluded_source: 'flickr,inaturalist,wikimedia',\r\n\t\t\tlicense: 'pdm,cc0',\r\n\t\t};\r\n\t\tconst finalQuery = { ...query, ...defaultArgs };\r\n\t\t// Sometimes you might need to map the supported request params according to `InserterMediaRequest`.\r\n\t\t// interface. In this example the `search` query param is named `q`.\r\n\t\tconst mapFromInserterMediaRequest = {\r\n\t\t\tper_page: 'page_size',\r\n\t\t\tsearch: 'q',\r\n\t\t};\r\n\t\tconst url = new URL( 'https://api.openverse.engineering/v1/images/' );\r\n\t\tObject.entries( finalQuery ).forEach( ( [ key, value ] ) => {\r\n\t\t\tconst queryKey = mapFromInserterMediaRequest[ key ] || key;\r\n\t\t\turl.searchParams.set( queryKey, value );\r\n\t\t} );\r\n\t\tconst response = await window.fetch( url, {\r\n\t\t\theaders: {\r\n\t\t\t\t'User-Agent': 'WordPress/inserter-media-fetch',\r\n\t\t\t},\r\n\t\t} );\r\n\t\tconst jsonResponse = await response.json();\r\n\t\tconst results = jsonResponse.results;\r\n\t\treturn results.map( ( result ) => ( {\r\n\t\t\t...result,\r\n\t\t\t// If your response result includes an `id` prop that you want to access later, it should\r\n\t\t\t// be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide\r\n\t\t\t// a report URL getter.\r\n\t\t\t// Additionally you should always clear the `id` value of your response results because\r\n\t\t\t// it is used to identify WordPress media items.\r\n\t\t\tsourceId: result.id,\r\n\t\t\tid: undefined,\r\n\t\t\tcaption: result.caption,\r\n\t\t\tpreviewUrl: result.thumbnail,\r\n\t\t} ) );\r\n\t},\r\n\tgetReportUrl: ( { sourceId } ) =>\r\n\t\t`https://wordpress.org/openverse/image/${ sourceId }/report/`,\r\n\tisExternalResource: true,\r\n} );\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55012/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33943",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33943/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33943/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33943/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33943",
-		"id": 963654820,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA2MjI2Mjkw",
-		"number": 33943,
-		"title": "Featured Image: Use getMedia shorthand",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55009",
+		"id": 1924228083,
+		"node_id": "PR_kwDOBNHdeM5by7AX",
+		"number": 55009,
+		"title": "Migrate 'iframed inline styles' tests to Playwright",
 		"user": {
 			"login": "Mamaduka",
 			"id": 240569,
@@ -1538,31 +1709,13 @@
 		},
 		"labels": [
 			{
-				"id": 596964332,
-				"node_id": "MDU6TGFiZWw1OTY5NjQzMzI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/General%20Interface",
-				"name": "General Interface",
-				"color": "bfdadc",
-				"default": false,
-				"description": "Parts of the UI which don't fall neatly under other labels."
-			},
-			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
-				"default": false,
-				"description": "Gotta shave those yaks."
-			},
-			{
-				"id": 2085610453,
-				"node_id": "MDU6TGFiZWwyMDg1NjEwNDUz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Post%20Featured%20Image",
-				"name": "[Block] Post Featured Image",
-				"color": "6767e5",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
@@ -1610,13 +1763,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1639,77 +1792,84 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-08-09T05:16:56Z",
-		"updated_at": "2021-08-09T08:52:36Z",
-		"closed_at": "2021-08-09T08:52:07Z",
+		"comments": 3,
+		"created_at": "2023-10-03T14:04:42Z",
+		"updated_at": "2023-10-04T09:37:05Z",
+		"closed_at": "2023-10-04T09:36:35Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33943",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33943",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33943.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33943.patch"
-		},
-		"body": "## Description\r\nSince #33689, it's possible to pass query arguments to the code data shorthands. PR update code to use `getMedia` instead of `getEntityRecord` for simplicity, see - https://github.com/WordPress/gutenberg/pull/33567#discussion_r683975606\r\n\r\n## How has this been tested?\r\n1. Upload an image using an Administrator user account.\r\n2. Switch to a user with an Author role.\r\n3. Create a post.\r\n4. Select the uploaded image using the \"Post Featured Image\" block or \"Feature image\" panel in the sidebar.\r\n5. See that feature image is displayed.\r\n6. DevTools has no 403 requests in the Networks panel.\r\n\r\n## Types of changes\r\nCode Quality\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55009",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55009",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55009.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55009.patch",
+			"merged_at": "2023-10-04T09:36:35Z"
+		},
+		"body": "## What?\r\nPart of #38851.\r\nCloses #35172.\r\n\r\nPR migrates 'iframed inline styles' tests to Playwright.\r\n\r\n## Why?\r\nThe test has been failing more often lately.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55009/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33930",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33930/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33930/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33930/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33930",
-		"id": 962762985,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA1NTA2NDAw",
-		"number": 33930,
-		"title": "Add documentation to disable remote calls for block patterns",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55006",
+		"id": 1924142916,
+		"node_id": "PR_kwDOBNHdeM5byodE",
+		"number": 55006,
+		"title": "Writing flow: absorb clipboard handler",
 		"user": {
-			"login": "mkaz",
-			"id": 45363,
-			"node_id": "MDQ6VXNlcjQ1MzYz",
-			"avatar_url": "https://avatars.githubusercontent.com/u/45363?v=4",
+			"login": "ellatrix",
+			"id": 4710635,
+			"node_id": "MDQ6VXNlcjQ3MTA2MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4710635?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/mkaz",
-			"html_url": "https://github.com/mkaz",
-			"followers_url": "https://api.github.com/users/mkaz/followers",
-			"following_url": "https://api.github.com/users/mkaz/following{/other_user}",
-			"gists_url": "https://api.github.com/users/mkaz/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/mkaz/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/mkaz/subscriptions",
-			"organizations_url": "https://api.github.com/users/mkaz/orgs",
-			"repos_url": "https://api.github.com/users/mkaz/repos",
-			"events_url": "https://api.github.com/users/mkaz/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/mkaz/received_events",
+			"url": "https://api.github.com/users/ellatrix",
+			"html_url": "https://github.com/ellatrix",
+			"followers_url": "https://api.github.com/users/ellatrix/followers",
+			"following_url": "https://api.github.com/users/ellatrix/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ellatrix/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ellatrix/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ellatrix/subscriptions",
+			"organizations_url": "https://api.github.com/users/ellatrix/orgs",
+			"repos_url": "https://api.github.com/users/ellatrix/repos",
+			"events_url": "https://api.github.com/users/ellatrix/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ellatrix/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 2697301145,
-				"node_id": "MDU6TGFiZWwyNjk3MzAxMTQ1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Pattern%20Directory",
-				"name": "[Feature] Pattern Directory",
-				"color": "FBCA04",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "The Pattern Directory, a place to find patterns"
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
@@ -1717,13 +1877,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1746,131 +1906,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-06T13:58:48Z",
-		"updated_at": "2021-08-06T15:34:14Z",
-		"closed_at": "2021-08-06T15:09:46Z",
+		"comments": 5,
+		"created_at": "2023-10-03T13:21:20Z",
+		"updated_at": "2023-10-04T14:43:09Z",
+		"closed_at": "2023-10-04T14:42:43Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33930",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33930",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33930.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33930.patch"
-		},
-		"body": "\n## Description\n\nAdds a new section to the editor filters documentation\nfor the filter `should_load_remote_block_patterns`\n\nFixes #32591\n\n\n## How has this been tested?\n\nConfirm documentation works as expected.\n\n1. Add filter to a plugin or theme\n2. Confirm remote block patterns are not loaded\n\n\n## Types of changes\n\nDocumentation\n\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55006",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55006",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55006.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55006.patch",
+			"merged_at": "2023-10-04T14:42:43Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What/why?\r\n\r\nThis hook is writing flow, with a lot of similarity with its `useInput` hook. Paste shares splitting logic with pressing Enter, there's multi selection handling etc.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nJust a move and deprecation.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55006/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33925",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33925/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33925/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33925/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33925",
-		"id": 962628315,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA1Mzg5NzE3",
-		"number": 33925,
-		"title": "Remove the experimental prefix and rename `theme.json` files",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/55003",
+		"id": 1923918650,
+		"node_id": "PR_kwDOBNHdeM5bx373",
+		"number": 55003,
+		"title": "Migrate 'iframed multiple block stylesheets' tests to Playwright",
 		"user": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			},
 			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
+				"id": 1699237849,
+				"node_id": "MDU6TGFiZWwxNjk5MjM3ODQ5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20E2E%20Tests",
+				"name": "[Package] E2E Tests",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/e2e-tests"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "nosolosw",
-				"id": 583546,
-				"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/nosolosw",
-				"html_url": "https://github.com/nosolosw",
-				"followers_url": "https://api.github.com/users/nosolosw/followers",
-				"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-				"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-				"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-				"repos_url": "https://api.github.com/users/nosolosw/repos",
-				"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -1893,140 +2069,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-06T10:54:15Z",
-		"updated_at": "2021-08-06T12:31:12Z",
-		"closed_at": "2021-08-06T12:30:44Z",
+		"comments": 1,
+		"created_at": "2023-10-03T11:28:23Z",
+		"updated_at": "2023-10-04T09:42:18Z",
+		"closed_at": "2023-10-04T09:41:49Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33925",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33925",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33925.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33925.patch"
-		},
-		"body": "This PR renames:\r\n\r\n- `experimental-default-theme.json` to `theme.json`\r\n- `experimental-i18n-theme.json` to `theme-i18n.json`\r\n\r\nso it follows WordPress core names ([see](https://github.com/WordPress/wordpress-develop/tree/master/src/wp-includes)).",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/55003",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/55003",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/55003.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/55003.patch",
+			"merged_at": "2023-10-04T09:41:49Z"
+		},
+		"body": "## What?\r\nPart of #38851.\r\nCloses #35394.\r\n\r\nPR migrates 'iframed multiple block stylesheets' tests to Playwright.\r\n\r\n## Why?\r\nThe test was flaky.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/55003/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33924",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33924/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33924/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33924/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33924",
-		"id": 962620740,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA1MzgzMjAx",
-		"number": 33924,
-		"title": "Do not add to the block-library CSS bundle the colors that come from `theme.json`",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54997",
+		"id": 1923425443,
+		"node_id": "PR_kwDOBNHdeM5bwPUS",
+		"number": 54997,
+		"title": "Fix left and right aligmnent in children of Post Template",
 		"user": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "tellthemachines",
+			"id": 8096000,
+			"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/tellthemachines",
+			"html_url": "https://github.com/tellthemachines",
+			"followers_url": "https://api.github.com/users/tellthemachines/followers",
+			"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+			"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+			"repos_url": "https://api.github.com/users/tellthemachines/repos",
+			"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1022744205,
-				"node_id": "MDU6TGFiZWwxMDIyNzQ0MjA1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20library",
-				"name": "[Package] Block library",
-				"color": "ed2572",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "/packages/block-library"
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 2424704665,
-				"node_id": "MDU6TGFiZWwyNDI0NzA0NjY1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Base%20styles",
-				"name": "[Package] Base styles",
-				"color": "ed2572",
+				"id": 3488072481,
+				"node_id": "LA_kwDOBNHdeM7P58Mh",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Post%20Template",
+				"name": "[Block] Post Template",
+				"color": "6767e5",
 				"default": false,
-				"description": "/packages/base-styles"
+				"description": "Affects the Post Template Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "tellthemachines",
+			"id": 8096000,
+			"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/tellthemachines",
+			"html_url": "https://github.com/tellthemachines",
+			"followers_url": "https://api.github.com/users/tellthemachines/followers",
+			"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+			"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+			"repos_url": "https://api.github.com/users/tellthemachines/repos",
+			"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "nosolosw",
-				"id": 583546,
-				"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+				"login": "tellthemachines",
+				"id": 8096000,
+				"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/nosolosw",
-				"html_url": "https://github.com/nosolosw",
-				"followers_url": "https://api.github.com/users/nosolosw/followers",
-				"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-				"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-				"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-				"repos_url": "https://api.github.com/users/nosolosw/repos",
-				"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+				"url": "https://api.github.com/users/tellthemachines",
+				"html_url": "https://github.com/tellthemachines",
+				"followers_url": "https://api.github.com/users/tellthemachines/followers",
+				"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+				"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+				"repos_url": "https://api.github.com/users/tellthemachines/repos",
+				"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2049,39 +2232,55 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 11,
-		"created_at": "2021-08-06T10:42:47Z",
-		"updated_at": "2021-08-12T10:17:53Z",
-		"closed_at": "2021-08-11T12:09:56Z",
-		"author_association": "MEMBER",
+		"comments": 3,
+		"created_at": "2023-10-03T06:37:51Z",
+		"updated_at": "2023-10-04T09:38:11Z",
+		"closed_at": "2023-10-04T04:17:08Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33924",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33924",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33924.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33924.patch"
-		},
-		"body": "This PR reduces the amount of CSS imported by the `block-library` package, to only the ones that are not defined by `theme.json` defaults.\r\n\r\n~Alternatives I've considered: remove the mixins `background-colors`, `foreground-colors`, `gradient-colors`. The reason I discarded this approach is that I understand it may be an API others use and we don't want to keep them in the `base-styles` package. Happy to reconsider if others think differently.~ Updated: they were removed as per [this convo](https://github.com/WordPress/gutenberg/pull/33924#discussion_r685996672).\r\n\r\n## Test instructions\r\n\r\nI'm using the `emptytheme` for this testing.\r\n\r\nThe following instructions work for both the front-end and the editor:\r\n\r\n- Go and inspect the contents of the `wp-block-library-css` stylesheet.\r\n- You should find that the deprecated colors & gradients are still availablet. For example, you should find the following CSS for the `very-light-gray` color:\r\n\r\n```css\r\n:root .has-very-light-gray-background-color { background-color: #eee; }\r\n:root .has-very-light-gray-color { color: #eee; }\r\n```\r\n\r\n- The removed colors shouldn't be available. For example, in `trunk`, if you inspected the same stylesheet you should also find the CSS for the `black` color:\r\n\r\n```css\r\n:root .has-black-background-color { background-color: #000; }\r\n:root .has-black-color { color: #000; }\r\n```\r\n\r\n## Follow-ups\r\n\r\n- https://github.com/WordPress/gutenberg/issues/34006\r\n- https://github.com/WordPress/gutenberg/issues/34005\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54997",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54997",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54997.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54997.patch",
+			"merged_at": "2023-10-04T04:17:07Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n\r\nFixes #54805.\r\n\r\nLeft/right alignment doesn't work as expected for direct children of the Post Template block due to its unique markup structure. Given the problem is specific to this block, I think it makes sense to add some styles that fix it for this block only.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Set your Post Template to list layout;\r\n2. Set the Featured Image width to 50% and align it right;\r\n3. Verify that Featured Images are correctly right-aligned in both editor and front end.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54997/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33921",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33921/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33921/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33921/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33921",
-		"id": 962596488,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA1MzYyMDY1",
-		"number": 33921,
-		"title": "Site Editor: Add error boundary",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54996",
+		"id": 1923411460,
+		"node_id": "PR_kwDOBNHdeM5bwMWe",
+		"number": 54996,
+		"title": "Site Editor: Avoid stale navigation block values when parsing entity record",
 		"user": {
 			"login": "Mamaduka",
 			"id": 240569,
@@ -2104,13 +2303,13 @@
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "An existing feature does not function as intended"
 			},
 			{
 				"id": 2706102777,
@@ -2119,7 +2318,7 @@
 				"name": "[Feature] Site Editor",
 				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
 			}
 		],
 		"state": "closed",
@@ -2167,13 +2366,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2196,122 +2395,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-06T10:08:08Z",
-		"updated_at": "2021-08-09T14:44:46Z",
-		"closed_at": "2021-08-09T14:44:16Z",
+		"comments": 12,
+		"created_at": "2023-10-03T06:27:09Z",
+		"updated_at": "2023-10-04T10:06:13Z",
+		"closed_at": "2023-10-04T04:42:04Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33921",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33921",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33921.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33921.patch"
-		},
-		"body": "## Description\r\nPR adds error boundary to the Site Editor. The fallback will render a warning message with actions to \"Attempt Recovery\" or \"Copy Error.\" It's similar to other editor error boundaries.\r\n\r\nInitially, I was planning to reuse the `ErrorBoundary` component from the editor package, but the \"Copy Post Text\" doesn't make sense in the context of site editing.\r\n\r\nI also moved the following components near the InterfaceSkeleton - `URLQueryController`, `FullscreenMode` and `UnsavedChangesWarning`.\r\n\r\nFixes #33899.\r\n\r\n## How has this been tested?\r\n1. Enable TT1 Blocks theme.\r\n2. Go to the Site Editor screen.\r\n3. Run following code in console to trigger error in the editor:\r\n\r\n```js\r\nwp.plugins.registerPlugin( 'error-boundary-test', {\r\n    render() {\r\n        throw new Error( 'Test' );\r\n    },\r\n} );\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n![CleanShot 2021-08-06 at 13 57 48](https://user-images.githubusercontent.com/240569/128494025-5be726e8-ed4c-490f-bcc2-61e7925c4ed9.png)\r\n\r\n## Types of changes\r\nEnhancement\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54996",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54996",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54996.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54996.patch",
+			"merged_at": "2023-10-04T04:42:04Z"
+		},
+		"body": "## What?\r\nThis is a follow-up to https://github.com/WordPress/gutenberg/pull/54993#issuecomment-1744241005. Props to @aaronrobertshaw for discovering the bug.\r\n\r\nPR updates template parts navigation menus display component to handle rendering fallback menus.\r\n\r\n## Why?\r\nThe navigation block sets fallback `ref` [during the render](https://github.com/WordPress/gutenberg/blob/2afdedf792b5a74ffaf109fcee5dbbcbbef361f4/packages/block-library/src/navigation/edit/index.js#L229-L244). Since this data isn't part of the content, it was never picked up by the `useNavigationMenuContent`.\r\n\r\n\r\n## How?\r\nAdd a new helper method, `getBlocksFromRecord`, which returns edited blocks from the record when available and fallbacks to blocks from the content. This matches the logic for edited blocks in [`useEntityBlockEditor`](https://github.com/WordPress/gutenberg/blob/205f1e3ba8104365c16b856c2ef7a983b4416581/packages/core-data/src/entity-provider.js#L171-L179).\r\n\r\n## Testing Instructions\r\n1. Using TT3 theme.\r\n2. Create all customizations from the Header template part.\r\n3. Delete all navigation menus. You can use the `wp-admin/edit.php?post_type=wp_navigation` screen.\r\n4. Open the Header template part.\r\n5. Confirm fallback navigation is displayed in sidebar details.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n![CleanShot 2023-10-03 at 10 14 42](https://github.com/WordPress/gutenberg/assets/240569/9f20c4e7-3fb4-46b4-ab52-d753ac08945a)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 1,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54996/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33913",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33913/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33913/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33913/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33913",
-		"id": 962143664,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0OTc3NTgz",
-		"number": 33913,
-		"title": "Mobile Release v1.59.0",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54993",
+		"id": 1923304650,
+		"node_id": "PR_kwDOBNHdeM5bv1Y5",
+		"number": 54993,
+		"title": "Don't display the navigation section in template parts details when a menu is missing",
 		"user": {
-			"login": "jhnstn",
-			"id": 744755,
-			"node_id": "MDQ6VXNlcjc0NDc1NQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/744755?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jhnstn",
-			"html_url": "https://github.com/jhnstn",
-			"followers_url": "https://api.github.com/users/jhnstn/followers",
-			"following_url": "https://api.github.com/users/jhnstn/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jhnstn/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jhnstn/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jhnstn/subscriptions",
-			"organizations_url": "https://api.github.com/users/jhnstn/orgs",
-			"repos_url": "https://api.github.com/users/jhnstn/repos",
-			"events_url": "https://api.github.com/users/jhnstn/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jhnstn/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "dcalhoun",
-				"id": 438664,
-				"node_id": "MDQ6VXNlcjQzODY2NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/dcalhoun",
-				"html_url": "https://github.com/dcalhoun",
-				"followers_url": "https://api.github.com/users/dcalhoun/followers",
-				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-				"repos_url": "https://api.github.com/users/dcalhoun/repos",
-				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2334,131 +2558,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-05T19:46:50Z",
-		"updated_at": "2021-08-06T15:38:52Z",
-		"closed_at": "2021-08-06T15:14:20Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 5,
+		"created_at": "2023-10-03T04:50:59Z",
+		"updated_at": "2023-10-05T09:24:16Z",
+		"closed_at": "2023-10-03T05:36:42Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33913",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33913",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33913.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33913.patch"
-		},
-		"body": "## Description\nRelease 1.59.0 of the react-native-editor and Gutenberg-Mobile.\n\nFor more information about this release and testing instructions, please see the related Gutenberg-Mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3805\n\n## Checklist:\n- [x] My code is tested.\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54993",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54993",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54993.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54993.patch",
+			"merged_at": "2023-10-03T05:36:42Z"
+		},
+		"body": "## What?\r\nResolves #54822.\r\n\r\nPR updates template part navigation menu components to render nothing when a menu is missing.\r\n\r\n## Why?\r\nThere's no use in rendering menus that the user can't edit.\r\n\r\n## How?\r\nThe component now checks if the `title` resolves to `undefined`. This happens when an entity is still resolving or missing.\r\n\r\n## Testing Instructions\r\n1. Open a Site Editor.\r\n2. Open a template part with a navigation block.\r\n3. Confirm navigation is displayed in sidebar details.\r\n4. Change the navigation `ref` attribute to a non-existing ID via the code editor.\r\n5. Confirm navigation is no longer displayed in sidebar details.\r\n\r\n### Testing Instructions for Keyboard\r\nSame.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n![CleanShot 2023-10-03 at 08 44 41](https://github.com/WordPress/gutenberg/assets/240569/39565c7f-e2e8-4add-832f-875e26131ff0)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54993/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33906",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33906/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33906/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33906/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33906",
-		"id": 962026946,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0ODc4MDA0",
-		"number": 33906,
-		"title": "Closing the block inserter decrements block type impressions",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54992",
+		"id": 1923150718,
+		"node_id": "PR_kwDOBNHdeM5bvT6r",
+		"number": 54992,
+		"title": "Fix output of Navigation block classnames in the editor.",
 		"user": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "tellthemachines",
+			"id": 8096000,
+			"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/tellthemachines",
+			"html_url": "https://github.com/tellthemachines",
+			"followers_url": "https://api.github.com/users/tellthemachines/followers",
+			"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+			"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+			"repos_url": "https://api.github.com/users/tellthemachines/repos",
+			"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596962434,
-				"node_id": "MDU6TGFiZWw1OTY5NjI0MzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Inserter",
-				"name": "[Feature] Inserter",
-				"color": "fbca04",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 1225853227,
+				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
+				"name": "[Block] Navigation",
+				"color": "6767e5",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Affects the Navigation Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "tellthemachines",
+			"id": 8096000,
+			"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/tellthemachines",
+			"html_url": "https://github.com/tellthemachines",
+			"followers_url": "https://api.github.com/users/tellthemachines/followers",
+			"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+			"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+			"repos_url": "https://api.github.com/users/tellthemachines/repos",
+			"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "dcalhoun",
-				"id": 438664,
-				"node_id": "MDQ6VXNlcjQzODY2NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"login": "tellthemachines",
+				"id": 8096000,
+				"node_id": "MDQ6VXNlcjgwOTYwMDA=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8096000?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/dcalhoun",
-				"html_url": "https://github.com/dcalhoun",
-				"followers_url": "https://api.github.com/users/dcalhoun/followers",
-				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-				"repos_url": "https://api.github.com/users/dcalhoun/repos",
-				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"url": "https://api.github.com/users/tellthemachines",
+				"html_url": "https://github.com/tellthemachines",
+				"followers_url": "https://api.github.com/users/tellthemachines/followers",
+				"following_url": "https://api.github.com/users/tellthemachines/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tellthemachines/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tellthemachines/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tellthemachines/subscriptions",
+				"organizations_url": "https://api.github.com/users/tellthemachines/orgs",
+				"repos_url": "https://api.github.com/users/tellthemachines/repos",
+				"events_url": "https://api.github.com/users/tellthemachines/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tellthemachines/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2481,131 +2721,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-05T17:08:51Z",
-		"updated_at": "2021-08-06T18:25:03Z",
-		"closed_at": "2021-08-06T18:24:35Z",
-		"author_association": "MEMBER",
+		"comments": 4,
+		"created_at": "2023-10-03T02:11:06Z",
+		"updated_at": "2023-10-04T09:37:30Z",
+		"closed_at": "2023-10-03T03:22:32Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33906",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33906",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33906.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33906.patch"
-		},
-		"body": "* **Gutenberg:** Self\r\n* **Gutenberg Mobile:** https://github.com/wordpress-mobile/gutenberg-mobile/pull/3802\r\n\r\n## Description\r\nFixes #33907. Closing the block inserter will decrement the block type impression counts. This results in blocks that are marked as \"new\" to slowly lose the designation as a user utilizes the block inserter over time. \r\n\r\n## How has this been tested?\r\n1. Clone this branch. \r\n2. Apply the below diff. \r\n\t<details><summary>Patch Enabling New Badge</summary>\r\n\r\n\t```diff\r\n\tdiff --git a/packages/block-editor/src/components/inserter/hooks/use-block-type-impressions.native.js b/packages/block-editor/src/components/inserter/hooks/use-block-type-impressions.native.js\r\n\tindex 2fcd6dc1c9..7bd08a2594 100644\r\n\t--- a/packages/block-editor/src/components/inserter/hooks/use-block-type-impressions.native.js\r\n\t+++ b/packages/block-editor/src/components/inserter/hooks/use-block-type-impressions.native.js\r\n\t@@ -19,7 +19,7 @@ function useBlockTypeImpressions( blockTypes ) {\r\n\t\r\n\t\t\t\treturn {\r\n\t\t\t\t\tblockTypeImpressions: impressions,\r\n\t-\t\t\t\tenableEditorOnboarding: editorOnboarding,\r\n\t+\t\t\t\tenableEditorOnboarding: true,\r\n\t\t\t\t};\r\n\t\t\t},\r\n\t\t\t[]\r\n\t```\r\n\r\n\t</details>\r\n3. Start the server and build the Demo app to an emulator/device. \r\n4. Open the block inserter, note the new \"sparkles\" badge on the Search, Embed, and Audio block buttons. \r\n5. Insert one of the aforementioned blocks. \r\n6. Open the block inserter, note the new \"sparkles\" badge should only be present on two of the aforementioned blocks _not_ inserted. \r\n7. Close the block inserter. \r\n8. Repeat steps 6-7 9 more times. \r\n9. ℹ️ **Expected:** the new \"sparkles\" badge is _no longer present_ on any block buttons. \r\n\r\n## Screenshots <!-- if applicable -->\r\n<img width=\"285\" alt=\"new-block-sparkles-badge\" src=\"https://user-images.githubusercontent.com/438664/128391944-51323d2e-bf29-46b3-9c92-8fbb338079d8.png\">\r\n\r\n## Types of changes\r\nNew feature\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54992",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54992",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54992.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54992.patch",
+			"merged_at": "2023-10-03T03:22:32Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nFixes #54891.\r\n\r\nThere was a discrepancy between the placement of layout classnames in the Navigation block in the editor and front end - in the editor they were being applied to the inner wrapper, and in the front end to the outer wrapper - and the block custom styles were built to work with layout classnames on the outer wrapper. It might be good to move them into the inner wrapper in both editor and front end at some point, as that might allow us to remove all the custom styles and logic handling layout for this block, but that will be a big piece of work so best leave it for after this release 😅 \r\n\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Add a Navigation block to the site editor and add several blocks to it;\r\n2. Reset styles > dimensions > block gap in the block settings;\r\n3. Verify there's still a gap between the Navigation child items;\r\n4. Verify that the editor matches the front end.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992/reactions",
+			"total_count": 2,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 2,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54992/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33904",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33904/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33904/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33904/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33904",
-		"id": 961934875,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0ODAwNzEz",
-		"number": 33904,
-		"title": "No longer read from `experimental-theme.json`",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54988",
+		"id": 1922652763,
+		"node_id": "PR_kwDOBNHdeM5btjuU",
+		"number": 54988,
+		"title": "Scripts: Properly use CommonJS for default Playwright config",
 		"user": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+			"login": "swissspidy",
+			"id": 841956,
+			"node_id": "MDQ6VXNlcjg0MTk1Ng==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/841956?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
+			"url": "https://api.github.com/users/swissspidy",
+			"html_url": "https://github.com/swissspidy",
+			"followers_url": "https://api.github.com/users/swissspidy/followers",
+			"following_url": "https://api.github.com/users/swissspidy/following{/other_user}",
+			"gists_url": "https://api.github.com/users/swissspidy/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/swissspidy/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/swissspidy/subscriptions",
+			"organizations_url": "https://api.github.com/users/swissspidy/orgs",
+			"repos_url": "https://api.github.com/users/swissspidy/repos",
+			"events_url": "https://api.github.com/users/swissspidy/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/swissspidy/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			},
 			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
+				"id": 978007737,
+				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
+				"name": "[Package] Scripts",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/scripts"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "nosolosw",
-			"id": 583546,
-			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/nosolosw",
-			"html_url": "https://github.com/nosolosw",
-			"followers_url": "https://api.github.com/users/nosolosw/followers",
-			"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-			"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-			"repos_url": "https://api.github.com/users/nosolosw/repos",
-			"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/nosolosw/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "nosolosw",
-				"id": 583546,
-				"node_id": "MDQ6VXNlcjU4MzU0Ng==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/nosolosw",
-				"html_url": "https://github.com/nosolosw",
-				"followers_url": "https://api.github.com/users/nosolosw/followers",
-				"following_url": "https://api.github.com/users/nosolosw/following{/other_user}",
-				"gists_url": "https://api.github.com/users/nosolosw/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/nosolosw/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/nosolosw/subscriptions",
-				"organizations_url": "https://api.github.com/users/nosolosw/orgs",
-				"repos_url": "https://api.github.com/users/nosolosw/repos",
-				"events_url": "https://api.github.com/users/nosolosw/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/nosolosw/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2628,131 +2844,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-08-05T15:18:03Z",
-		"updated_at": "2021-08-09T10:13:39Z",
-		"closed_at": "2021-08-09T10:13:13Z",
+		"comments": 3,
+		"created_at": "2023-10-02T20:32:56Z",
+		"updated_at": "2023-10-04T09:37:50Z",
+		"closed_at": "2023-10-03T06:00:59Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33904",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33904",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33904.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33904.patch"
-		},
-		"body": "We used `experimental-theme.json` as a name for the file that holds the settings & styles while it was experimental. When the feature was stabilized the file was renamed to `theme.json` but we also kept a fallback to the previous name in the plugin, so themes had some time to rename it. We can get rid of this fallback now that WordPress 5.8 is released and bundles `theme.json` by default.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54988",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54988",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54988.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54988.patch",
+			"merged_at": "2023-10-03T06:00:59Z"
+		},
+		"body": "\r\n\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nOversight from #54856. The file should be referenced with a JS extension now of course.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54988/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33903",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33903/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33903/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33903/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33903",
-		"id": 961929642,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0Nzk2MTYy",
-		"number": 33903,
-		"title": "Improve the performance of the parser by removing the automatic custom classnames handling.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54982",
+		"id": 1922397334,
+		"node_id": "PR_kwDOBNHdeM5bsr6a",
+		"number": 54982,
+		"title": "Query view.js: Code quality",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "them-es",
+			"id": 10208534,
+			"node_id": "MDQ6VXNlcjEwMjA4NTM0",
+			"avatar_url": "https://avatars.githubusercontent.com/u/10208534?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/them-es",
+			"html_url": "https://github.com/them-es",
+			"followers_url": "https://api.github.com/users/them-es/followers",
+			"following_url": "https://api.github.com/users/them-es/following{/other_user}",
+			"gists_url": "https://api.github.com/users/them-es/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/them-es/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/them-es/subscriptions",
+			"organizations_url": "https://api.github.com/users/them-es/orgs",
+			"repos_url": "https://api.github.com/users/them-es/repos",
+			"events_url": "https://api.github.com/users/them-es/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/them-es/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596962405,
-				"node_id": "MDU6TGFiZWw1OTY5NjI0MDU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Parsing",
-				"name": "[Feature] Parsing",
-				"color": "fbca04",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": ""
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
+				"id": 1022744205,
+				"node_id": "MDU6TGFiZWwxMDIyNzQ0MjA1",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20library",
+				"name": "[Package] Block library",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/block-library"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2775,140 +2967,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-05T15:12:34Z",
-		"updated_at": "2021-08-10T10:12:15Z",
-		"closed_at": "2021-08-10T10:11:54Z",
+		"comments": 0,
+		"created_at": "2023-10-02T18:15:52Z",
+		"updated_at": "2023-10-03T19:06:36Z",
+		"closed_at": "2023-10-03T16:58:03Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33903",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33903",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33903.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33903.patch"
-		},
-		"body": "When parsing post content, I noticed that the `addParsedDifference` function used to fix the custom classnames in case of invalidation takes half of the parsing time for a long post it takes `300ms` out of `600ms` on my machine. \r\n\r\nThe solution in this PR is to move this behavior to the \"validation\" stage, meaning, only fix the custom classname attribute if the block is invalid (which in most cases is not).\r\n\r\nThe parser code base is a bit complex though, I think there's still ways we could improve the quality and the maintenability of that code,",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54982",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54982",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54982.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54982.patch",
+			"merged_at": "2023-10-03T16:58:03Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nFixing a typo and improving some JS comments\r\n\r\n## Why?\r\nCode quality\r\n\r\n## Testing Instructions\r\nN/A\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54982/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33902",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33902/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33902/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33902/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33902",
-		"id": 961845951,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0NzIzNDUz",
-		"number": 33902,
-		"title": "`useBreakpointIndex`: attach `resize` event listener to `window` instead of `document`",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54981",
+		"id": 1922353945,
+		"node_id": "PR_kwDOBNHdeM5bsikw",
+		"number": 54981,
+		"title": "Block Editor: Avoid double-wrapping selectors when transforming the styles",
 		"user": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
+				"id": 949438185,
+				"node_id": "MDU6TGFiZWw5NDk0MzgxODU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Regression",
+				"name": "[Type] Regression",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Related to a regression in the latest release"
 			},
 			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
 				"color": "ed2572",
 				"default": false,
-				"description": "/packages/components"
+				"description": "/packages/block-editor"
 			},
 			{
-				"id": 2555015900,
-				"node_id": "MDU6TGFiZWwyNTU1MDE1OTAw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Component%20System",
-				"name": "[Feature] Component System",
+				"id": 4589908460,
+				"node_id": "LA_kwDOBNHdeM8AAAABEZRx7A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Layout",
+				"name": "[Feature] Layout",
 				"color": "fbca04",
 				"default": false,
-				"description": "The next iteration on WordPress Components."
+				"description": "Layout block support, its UI controls, and style output."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "ciampo",
-				"id": 1083581,
-				"node_id": "MDQ6VXNlcjEwODM1ODE=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/ciampo",
-				"html_url": "https://github.com/ciampo",
-				"followers_url": "https://api.github.com/users/ciampo/followers",
-				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-				"organizations_url": "https://api.github.com/users/ciampo/orgs",
-				"repos_url": "https://api.github.com/users/ciampo/repos",
-				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ciampo/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -2931,131 +3139,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-05T13:46:44Z",
-		"updated_at": "2021-08-06T09:21:11Z",
-		"closed_at": "2021-08-06T09:20:41Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 3,
+		"created_at": "2023-10-02T17:45:37Z",
+		"updated_at": "2023-10-04T09:37:36Z",
+		"closed_at": "2023-10-03T03:52:11Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33902",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33902",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33902.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33902.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nFix a bug in the `useBreakpointIndex` component utility hook, where the `resize` event listener was previously attached to the `document` object.\r\n\r\nThis was resulting in the event listener function never being called, since [the `resize` event only gets fired on the `window` object](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event).\r\n\r\nThe fix is quite simple — change `document` to `window`.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nOne way to test this is to check the `Flex` component's Storybook example:\r\n\r\n- in [production](https://wordpress.github.io/gutenberg/?path=/story/g2-components-experimental-flex--default), notice how resizing the window doesn't cause the second row of items to switch from `row` to `column` (and viceversa)\r\n- When running Storybook on this PR branch, notice how the behaviour just described above is fixed\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n**Before**\r\n\r\nhttps://user-images.githubusercontent.com/1083581/128360451-048af45b-6728-4298-8fac-19990f0f9ebd.mp4\r\n\r\n**After**\r\n\r\nhttps://user-images.githubusercontent.com/1083581/128360624-3dd7263e-ee91-44b3-83fe-c6cee342f61d.mp4\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- N/A I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54981",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54981",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54981.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54981.patch",
+			"merged_at": "2023-10-03T03:52:10Z"
+		},
+		"body": "## What?\r\nResolves #54943.\r\n\r\nPR updates style transformation's `wrap` helper to avoid double-wrapping the selectors.\r\n\r\nP.S. Ideally, the editor-generated styles shouldn't include [scope namespaces](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/layouts/utils.js#L11-L35).\r\n\r\n## Why?\r\nWhen the selector already has `namespace`, it is unnecessary to append it again.\r\n\r\n## How?\r\nThe method checks if the selector already starts with the namespaces and skips it.\r\n\r\n## Testing Instructions\r\nCI checks should pass.\r\n\r\n1. Open a post.\r\n2. Add the testing block. See below.\r\n3. Confirm paragraphs are rendered with space between.\r\n4. Enable custom fields.\r\n5. Confirm paragraphs are rendered as before.\r\n\r\n### Snippet\r\n\r\n### Testing Instructions for Keyboard\r\nSame\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n![CleanShot 2023-10-02 at 21 38 11](https://github.com/WordPress/gutenberg/assets/240569/2759df6d-a339-41fc-ad03-da77fac16559)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 1,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54981/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33901",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33901/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33901/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33901/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33901",
-		"id": 961792869,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0Njc4MzIx",
-		"number": 33901,
-		"title": "Plugin: Fix `jsdoc/check-line-alignment` ESLint warnings",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54978",
+		"id": 1922224982,
+		"node_id": "PR_kwDOBNHdeM5bsGuh",
+		"number": 54978,
+		"title": "Components: Remove hover style for secondary Button when aria-disabled is set",
 		"user": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 616662898,
-				"node_id": "MDU6TGFiZWw2MTY2NjI4OTg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Gutenberg%20Plugin",
-				"name": "Gutenberg Plugin",
-				"color": "578eed",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "gziolo",
-				"id": 699132,
-				"node_id": "MDQ6VXNlcjY5OTEzMg==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/gziolo",
-				"html_url": "https://github.com/gziolo",
-				"followers_url": "https://api.github.com/users/gziolo/followers",
-				"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-				"organizations_url": "https://api.github.com/users/gziolo/orgs",
-				"repos_url": "https://api.github.com/users/gziolo/repos",
-				"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/gziolo/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3078,131 +3302,116 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-05T12:51:10Z",
-		"updated_at": "2021-08-06T05:23:04Z",
-		"closed_at": "2021-08-06T05:22:39Z",
+		"comments": 4,
+		"created_at": "2023-10-02T16:15:22Z",
+		"updated_at": "2023-10-03T07:26:40Z",
+		"closed_at": "2023-10-03T07:26:10Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33901",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33901",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33901.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33901.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nIt's the result of running:\r\n\r\n```bash\r\nnpm run lint-js -- --fix\r\n```\r\n\r\nIt was applied to files that had reported violations for `jsdoc/check-line-alignment` rule.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54978",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54978",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54978.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54978.patch",
+			"merged_at": "2023-10-03T07:26:09Z"
+		},
+		"body": "## What?\r\nThis is a follow-up to https://github.com/WordPress/gutenberg/pull/54722#issuecomment-1733879065.\r\n\r\nPR removes hover styles for a secondary Button when disabled via the `aria-disabled` prop.\r\n\r\n## Why?\r\nDisabled buttons shouldn't have a hover style.\r\n\r\n## Testing Instructions\r\n1. Open a draft post.\r\n2. Hover on the disabled \"Switch to draft\" button in document settings.\r\n3. It shouldn't have a border.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/240569/aabae316-9bd1-42b4-b984-a7ff26db10f5",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54978/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33896",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33896/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33896/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33896/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33896",
-		"id": 961675115,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0NTc2MTYx",
-		"number": 33896,
-		"title": "Fix the site editor breaking in firefox",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54977",
+		"id": 1922119216,
+		"node_id": "PR_kwDOBNHdeM5brv3S",
+		"number": 54977,
+		"title": "Font Library: use snake_case instead of camelCase on fontFamilies endpoint param",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "matiasbenedetto",
+			"id": 1310626,
+			"node_id": "MDQ6VXNlcjEzMTA2MjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1310626?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/matiasbenedetto",
+			"html_url": "https://github.com/matiasbenedetto",
+			"followers_url": "https://api.github.com/users/matiasbenedetto/followers",
+			"following_url": "https://api.github.com/users/matiasbenedetto/following{/other_user}",
+			"gists_url": "https://api.github.com/users/matiasbenedetto/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/matiasbenedetto/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/matiasbenedetto/subscriptions",
+			"organizations_url": "https://api.github.com/users/matiasbenedetto/orgs",
+			"repos_url": "https://api.github.com/users/matiasbenedetto/repos",
+			"events_url": "https://api.github.com/users/matiasbenedetto/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/matiasbenedetto/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 2706102777,
-				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
-				"name": "[Feature] Site Editor",
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
 				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Font and typography-related issues and PRs"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3225,122 +3434,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-08-05T10:22:32Z",
-		"updated_at": "2021-08-11T22:07:55Z",
-		"closed_at": "2021-08-09T10:14:45Z",
+		"comments": 3,
+		"created_at": "2023-10-02T15:13:21Z",
+		"updated_at": "2023-10-04T09:37:23Z",
+		"closed_at": "2023-10-02T19:20:56Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33896",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33896",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33896.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33896.patch"
-		},
-		"body": "closes #33873 \r\n\r\nI'm not entirely certain that this is a good solution but in Firefox the ref is null initially meaning that it's probably not being attached on mount.\r\n\r\nGuarding against the ref solves the issue but doesn't explain why the ref is empty in the first place.\r\n\r\n**Note:** It seems we don't have an error boundary in the site editor or if we do, it's not working well.\r\n\r\n**Testing instructions**\r\n\r\n - Open the site editor in firefox\r\n - Make sure you don't get just a crash/",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54977",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54977",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54977.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54977.patch",
+			"merged_at": "2023-10-02T19:20:56Z"
+		},
+		"body": "## What?\r\nFont Library: use snake_case instead of camelCase on fontFamilies endpoint param\r\n\r\n## Why?\r\nEndpoint parameters should use snake_case instead of camelCase as requested in this core pr review comment:\r\nhttps://github.com/WordPress/wordpress-develop/pull/5285#discussion_r1342644332\r\n\r\n## Testing Instructions\r\n- Run unit tests\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54977/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33895",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33895/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33895/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33895/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33895",
-		"id": 961648612,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0NTUzMDcy",
-		"number": 33895,
-		"title": "Fix block appender position in classic themes",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54975",
+		"id": 1922080040,
+		"node_id": "PR_kwDOBNHdeM5brnbe",
+		"number": 54975,
+		"title": "Wrapped `TextareaControl` in a `forwardRef` call",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"login": "t-hamano",
+				"id": 54422211,
+				"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"url": "https://api.github.com/users/t-hamano",
+				"html_url": "https://github.com/t-hamano",
+				"followers_url": "https://api.github.com/users/t-hamano/followers",
+				"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+				"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+				"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+				"repos_url": "https://api.github.com/users/t-hamano/repos",
+				"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3363,122 +3597,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-08-05T09:52:58Z",
-		"updated_at": "2021-08-06T08:31:27Z",
-		"closed_at": "2021-08-05T13:22:21Z",
+		"comments": 0,
+		"created_at": "2023-10-02T14:51:42Z",
+		"updated_at": "2023-10-03T07:28:36Z",
+		"closed_at": "2023-10-03T07:28:06Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33895",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33895",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33895.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33895.patch"
-		},
-		"body": "In https://github.com/WordPress/gutenberg/pull/33024/files#r659586330 the `wp-block` class has been removed from the block appender. I think this was an error, that class is used to define the max-width for blocks which the appender should adhere too, otherwise it will be position on the extreme left.\r\n\r\nI'm not really sure why the class was removed there.\r\n\r\n**Testing instructions**\r\n\r\n - Use a classic theme\r\n - Insert an image block\r\n - notice that the block appender after the image block is positioned properly.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54975",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54975",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54975.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54975.patch",
+			"merged_at": "2023-10-03T07:28:06Z"
+		},
+		"body": "Closes: #54723\r\n\r\n## What?\r\n\r\nThis PR wraps the `TextAreaControl` component in a `forwardRef` call.\r\n\r\n## Why?\r\n\r\nMany components, not just form elements, are wrapped in `forwardRef` calls. This component is also a form element, and exposing the ref may also be useful to third-party developers.\r\n\r\n## Testing Instructions\r\n\r\nI wrote a simple code to test the `ref` prop. Update the code block's Edit component (`packages/block-library/src/code/edit.js`) with this code.\r\n\r\n```javascript\r\n/**\r\n * WordPress dependencies\r\n */\r\nimport { useBlockProps } from '@wordpress/block-editor';\r\nimport { TextareaControl } from '@wordpress/components';\r\nimport { useRef } from '@wordpress/element';\r\n\r\nexport default function CodeEdit() {\r\n\tconst ref = useRef();\r\n\tconst blockProps = useBlockProps();\r\n\r\n\treturn (\r\n\t\t<div { ...blockProps }>\r\n\t\t\t<TextareaControl ref={ ref } />\r\n\t\t\t<button\r\n\t\t\t\tonClick={ () => {\r\n\t\t\t\t\tref.current.focus();\r\n\t\t\t\t\tref.current.value = 'Focued!';\r\n\t\t\t\t} }\r\n\t\t\t>\r\n\t\t\t\tFocus on textarea!\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t);\r\n}\r\n```\r\n\r\n- Insert a Code block in the block editor and click the button.\r\n- The textarea should now have focus and be filled with a value.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/54422211/1f0acd17-ad4c-40c4-a733-c724561c6db2\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54975/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33893",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33893/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33893/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33893/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33893",
-		"id": 961547711,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0NDY2ODQ3",
-		"number": 33893,
-		"title": "Fix positioning discrepancy with draggable chip.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54974",
+		"id": 1922079703,
+		"node_id": "PR_kwDOBNHdeM5brnW0",
+		"number": 54974,
+		"title": "Update changelog automation and test fixtures to match the last a11y label renaming",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "priethor",
+			"id": 27339341,
+			"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/priethor",
+			"html_url": "https://github.com/priethor",
+			"followers_url": "https://api.github.com/users/priethor/followers",
+			"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+			"organizations_url": "https://api.github.com/users/priethor/orgs",
+			"repos_url": "https://api.github.com/users/priethor/repos",
+			"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/priethor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596964332,
-				"node_id": "MDU6TGFiZWw1OTY5NjQzMzI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/General%20Interface",
-				"name": "General Interface",
-				"color": "bfdadc",
+				"id": 1032028862,
+				"node_id": "MDU6TGFiZWwxMDMyMDI4ODYy",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Project%20Management",
+				"name": "[Type] Project Management",
+				"color": "e55ead",
 				"default": false,
-				"description": "Parts of the UI which don't fall neatly under other labels."
+				"description": "Meta-issues related to project management of Gutenberg"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "priethor",
+			"id": 27339341,
+			"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/priethor",
+			"html_url": "https://github.com/priethor",
+			"followers_url": "https://api.github.com/users/priethor/followers",
+			"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+			"organizations_url": "https://api.github.com/users/priethor/orgs",
+			"repos_url": "https://api.github.com/users/priethor/repos",
+			"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/priethor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+				"login": "priethor",
+				"id": 27339341,
+				"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/priethor",
+				"html_url": "https://github.com/priethor",
+				"followers_url": "https://api.github.com/users/priethor/followers",
+				"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+				"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+				"organizations_url": "https://api.github.com/users/priethor/orgs",
+				"repos_url": "https://api.github.com/users/priethor/repos",
+				"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/priethor/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3501,82 +3751,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-05T07:53:04Z",
-		"updated_at": "2021-08-06T07:18:50Z",
-		"closed_at": "2021-08-06T07:18:20Z",
+		"comments": 2,
+		"created_at": "2023-10-02T14:51:31Z",
+		"updated_at": "2023-10-02T17:45:57Z",
+		"closed_at": "2023-10-02T17:44:21Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33893",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33893",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33893.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33893.patch"
-		},
-		"body": "## Description\r\n\r\nThe inverted block toolbar/drag handle in select mode is offset slightly compared to the block toolbar:\r\n\r\n![currently](https://user-images.githubusercontent.com/1204802/128312691-5ba9219c-828d-407b-a09a-a0df7ca350b5.gif)\r\n\r\n<img width=\"633\" alt=\"Screenshot 2021-08-05 at 09 42 21\" src=\"https://user-images.githubusercontent.com/1204802/128312698-29f9b0d6-cced-4cd0-a405-9df5eaf713c5.png\">\r\n\r\nThis PR fixes that:\r\n\r\n![after](https://user-images.githubusercontent.com/1204802/128312721-688ceff8-e734-4bda-932c-4caf5675c19f.gif)\r\n\r\nNote that now that IE11 support is no longer necessary, there is a huge opportunity to refactor the block toolbar to leverage flex and remove all the gnarly margin rules on content inside, replace them entirely with `gap` and drastically simplifying things. But it's a larger undertaking, and this is a small fix in the mean time. \r\n\r\n## How has this been tested?\r\n\r\nInsert a block, select it, then press Escape. Observe the block icon and drag handle ideally overlapping precisely in both states.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54974",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54974",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54974.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54974.patch",
+			"merged_at": "2023-10-02T17:44:21Z"
+		},
+		"body": "## What?\r\nUpdates the changelog automation tests to work with the latest name of the a11y label.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nSo that the changelog automation continues to create a top section for Accessibility-related PRs even if accessibility is treated as a focus instead of a type of task.\r\n\r\n\r\n## How?\r\nBy using the latest accessibility label name.\r\n\r\n## Testing Instructions\r\n1. Clear your jest cache with `npx jest --clearCache`\r\n2. Run the changelog automation tests with `test:unit bin/plugin/commands/test/changelog.js`\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54974/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33890",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33890/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33890/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33890/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33890",
-		"id": 961486553,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzA0NDE1MDI5",
-		"number": 33890,
-		"title": "Try to fix flaky customizer inspector test",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54972",
+		"id": 1921973971,
+		"node_id": "PR_kwDOBNHdeM5brQfD",
+		"number": 54972,
+		"title": "Block Editor: Simplify `BlockHTMLConvertButton` ",
 		"user": {
-			"login": "kevin940726",
-			"id": 7753001,
-			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/kevin940726",
-			"html_url": "https://github.com/kevin940726",
-			"followers_url": "https://api.github.com/users/kevin940726/followers",
-			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
-			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
-			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
-			"repos_url": "https://api.github.com/users/kevin940726/repos",
-			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 2632875097,
-				"node_id": "MDU6TGFiZWwyNjMyODc1MDk3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Widgets%20Customizer",
-				"name": "[Feature] Widgets Customizer",
-				"color": "fbca04",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 593977130,
+				"node_id": "MDU6TGFiZWw1OTM5NzcxMzA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Priority]%20Low",
+				"name": "[Priority] Low",
+				"color": "f9d0c4",
 				"default": false,
-				"description": "Ability to add and edit blocks in Customize → Widgets."
+				"description": "Used to indicate that the issue at hand isn't a top priority to address and can be handled later"
+			},
+			{
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/block-editor"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "tyxla",
+				"id": 8436925,
+				"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/tyxla",
+				"html_url": "https://github.com/tyxla",
+				"followers_url": "https://api.github.com/users/tyxla/followers",
+				"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+				"organizations_url": "https://api.github.com/users/tyxla/orgs",
+				"repos_url": "https://api.github.com/users/tyxla/repos",
+				"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tyxla/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3599,140 +3923,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-08-05T06:20:38Z",
-		"updated_at": "2021-08-10T05:34:47Z",
-		"closed_at": "2021-08-05T07:50:06Z",
+		"comments": 1,
+		"created_at": "2023-10-02T13:55:53Z",
+		"updated_at": "2023-10-02T14:59:14Z",
+		"closed_at": "2023-10-02T14:58:44Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33890",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33890",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33890.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33890.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nAlternative to #33875, part of #33275.\r\n\r\nDuring closing the inspector and going back to the editor, the transition is making the blocks positioning in an intermediate state. Since the toolbar is still opened, it could sometimes also be positioned in the wrong place according to intermediate state of the block.\r\n\r\nThis PR waits for the transition to finish (200ms). A better alternative could be:\r\n1. Disable the transitions in tests (#32024)\r\n2. Delay showing the block toolbar until the transition is finished\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\nNot yet found a reliable way to reproduce the issue, so maybe we just have to merge this and monitor it on trunk.\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nBug fix\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54972",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54972",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54972.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54972.patch",
+			"merged_at": "2023-10-02T14:58:44Z"
+		},
+		"body": "## What?\r\nThis PR makes a few improvements to the `BlockHTMLConvertButton` component:\r\n\r\n## Why?\r\nA micro-optimization that makes the rendered component tree smaller, but also makes that part of the code more readable.\r\n\r\n## How?\r\nThis PR:\r\n* Removes the nested `BlockConvertButton` which is used only once anyway.\r\n* Simplifies logic that is unnecessarily split into two components and condenses it into one.\r\n* Replaces `withSelect` with `useSelect`, `withDispatch` with `useDispatch` and removes the unnecessary `compose`, making the component tree smaller and more readable.\r\n* Removes the unnecessary `small` prop that wasn't used.\r\n\r\n## Testing Instructions\r\n* Insert an HTML block with some HTML in it. \r\n* Click the block settings menu of the HTML block.\r\n* Verify the \"Convert to Blocks\" item is there and it still works well.\r\n* Verify that that item does not appear if this is not an HTML block.\r\n\r\n### Testing Instructions for Keyboard\r\nNone.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nComponent tree before:\r\n![Screenshot 2023-10-02 at 16 48 40](https://github.com/WordPress/gutenberg/assets/8436925/0d9a79ce-2a69-46d3-b7a3-92222b57812d)\r\n\r\n\r\nComponent tree after:\r\n![Screenshot 2023-10-02 at 16 49 29](https://github.com/WordPress/gutenberg/assets/8436925/20dbf151-4f85-45b7-a8cd-e536f3d726bf)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 1,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54972/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33882",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33882/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33882/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33882/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33882",
-		"id": 960645484,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAzNjQ4ODYy",
-		"number": 33882,
-		"title": "Components utils: `rtl()` return type, `rtl.watch()` utility",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54967",
+		"id": 1921741798,
+		"node_id": "PR_kwDOBNHdeM5bqeg5",
+		"number": 54967,
+		"title": "Platform Docs: Add a documentation page explaining how to use the block library",
 		"user": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
-				"default": false,
-				"description": "Gotta shave those yaks."
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 562969841,
+				"node_id": "MDU6TGFiZWw1NjI5Njk4NDE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Framework",
+				"name": "Framework",
+				"color": "fbca04",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Issues related to broader framework topics, especially as it relates to javascript"
 			},
 			{
-				"id": 2555015900,
-				"node_id": "MDU6TGFiZWwyNTU1MDE1OTAw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Component%20System",
-				"name": "[Feature] Component System",
-				"color": "fbca04",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": "The next iteration on WordPress Components."
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "ciampo",
-				"id": 1083581,
-				"node_id": "MDQ6VXNlcjEwODM1ODE=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/ciampo",
-				"html_url": "https://github.com/ciampo",
-				"followers_url": "https://api.github.com/users/ciampo/followers",
-				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-				"organizations_url": "https://api.github.com/users/ciampo/orgs",
-				"repos_url": "https://api.github.com/users/ciampo/repos",
-				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ciampo/received_events",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3755,100 +4086,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 1,
-		"created_at": "2021-08-04T15:39:13Z",
-		"updated_at": "2021-08-04T16:27:21Z",
-		"closed_at": "2021-08-04T16:26:56Z",
+		"created_at": "2023-10-02T11:34:01Z",
+		"updated_at": "2023-10-07T09:01:40Z",
+		"closed_at": "2023-10-04T08:31:25Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33882",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33882",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33882.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33882.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\n- Improve return type of the `rtl()` utility function\r\n- Add the `rtl.watch()` function, useful when in need of observing LTR/RTL locale changes\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nNo runtime changes, the project builds correctly.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nN/A\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- N/A I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- N/A I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54967",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54967",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54967.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54967.patch",
+			"merged_at": "2023-10-04T08:31:25Z"
+		},
+		"body": "Related #53874\r\n\r\n## What?\r\n\r\nThis PR documents the block library package and how to leverage it in third-party block editors. I think it's an interesting page because it highlights some of the current shortcomings that we might want to address separately (Ties to WordPress, boilerplate).\r\n\r\n**Note** I have personally tested all the code examples in a third-party vite install.\r\n\r\n### Test the documentation website\r\n\r\n```\r\ncd platform-docs\r\nnpm install\r\nnpm start\r\n```",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54967/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33880",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33880/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33880/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33880/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33880",
-		"id": 960622372,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAzNjI3NTEz",
-		"number": 33880,
-		"title": "Docs: add more details about block attributes",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54966",
+		"id": 1921740647,
+		"node_id": "PR_kwDOBNHdeM5bqeQz",
+		"number": 54966,
+		"title": "[Experimental]: First version of pages list in site editor",
 		"user": {
-			"login": "johngodley",
-			"id": 1277682,
-			"node_id": "MDQ6VXNlcjEyNzc2ODI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1277682?v=4",
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/johngodley",
-			"html_url": "https://github.com/johngodley",
-			"followers_url": "https://api.github.com/users/johngodley/followers",
-			"following_url": "https://api.github.com/users/johngodley/following{/other_user}",
-			"gists_url": "https://api.github.com/users/johngodley/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/johngodley/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/johngodley/subscriptions",
-			"organizations_url": "https://api.github.com/users/johngodley/orgs",
-			"repos_url": "https://api.github.com/users/johngodley/repos",
-			"events_url": "https://api.github.com/users/johngodley/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/johngodley/received_events",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 546156315,
-				"node_id": "MDU6TGFiZWw1NDYxNTYzMTU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Block%20API",
-				"name": "[Feature] Block API",
-				"color": "fbca04",
+				"id": 1789345375,
+				"node_id": "MDU6TGFiZWwxNzg5MzQ1Mzc1",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Experimental",
+				"name": "[Type] Experimental",
+				"color": "4109a0",
 				"default": false,
-				"description": ""
+				"description": "Experimental feature or API."
 			},
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 2409818939,
+				"node_id": "MDU6TGFiZWwyNDA5ODE4OTM5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Site",
+				"name": "[Package] Edit Site",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/edit-site"
 			},
 			{
-				"id": 587343997,
-				"node_id": "MDU6TGFiZWw1ODczNDM5OTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Status]%20In%20Progress",
-				"name": "[Status] In Progress",
-				"color": "0052cc",
+				"id": 6059497889,
+				"node_id": "LA_kwDOBNHdeM8AAAABaSyZoQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Data%20Views",
+				"name": "[Feature] Data Views",
+				"color": "FBCA04",
 				"default": false,
-				"description": "Tracking issues with work in progress"
+				"description": "Work surrounding upgrading and evolving views in the site editor and beyond"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ntsekouras",
+				"id": 16275880,
+				"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ntsekouras",
+				"html_url": "https://github.com/ntsekouras",
+				"followers_url": "https://api.github.com/users/ntsekouras/followers",
+				"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+				"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+				"repos_url": "https://api.github.com/users/ntsekouras/repos",
+				"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3871,82 +4258,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-04T15:23:25Z",
-		"updated_at": "2021-08-09T09:41:58Z",
-		"closed_at": "2021-08-09T09:41:36Z",
+		"comments": 8,
+		"created_at": "2023-10-02T11:33:10Z",
+		"updated_at": "2023-10-09T00:35:39Z",
+		"closed_at": "2023-10-04T11:31:42Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33880",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33880",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33880.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33880.patch"
-		},
-		"body": "## Description\r\nThe block attributes documentation is a bit sparse on details, and I usually end up looking at core blocks for help.\r\n\r\nThis adds a lot more detail, with examples that show the block attributes, the HTML, and the attributes parsed from it.\r\n\r\nIt also includes the `enum` attribute type.\r\n\r\nI've removed the link to the WP REST API documentation as it contains PHP details, and just seems a confusing link.\r\n\r\n## Types of changes\r\nDocumentation update only.\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54966",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54966",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54966.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54966.patch",
+			"merged_at": "2023-10-04T11:31:42Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis is the first version of pages list in site editor with related issues:  https://github.com/WordPress/gutenberg/issues/53233, https://github.com/WordPress/gutenberg/issues/50430.\r\n\r\nThe underlying APIs will evolve, but we need to get something in, to enable parallel work. This PR adds a new pages list in the site editor and to test it, you'll need to **enable the `New admin views` GB experiment**.\r\n\r\nFor now it uses  [TanStack table](https://github.com/tanstack/table), but this is an internal implementation detail and could also change. Part of the code has been extracted/polished a bit from https://github.com/WordPress/gutenberg/pull/53906.\r\nwhere the approach was to create helper components that could be composed into creating different views.\r\n\r\nThis PR changes the direction and aims to use a high level component(`DataViews`) that will provide the APIs for core and extenders for all views and functionality for any entity. \r\n\r\n\r\nNothing is exported right now and no public APIs have been introduced.\r\n\r\n\r\n## Testing Instructions\r\n1. Enable the experiment\r\n2. Go to site editor and navigate to `Pages->Manage all pages` .\r\n3. Play around with the new functionality like pagination, sorting, etc..\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/16275880/56f061ad-1ed2-4447-bda3-635fe7f90f98\r\n\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966/reactions",
+			"total_count": 3,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 3,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54966/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33870",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33870/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33870/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33870/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33870",
-		"id": 960382736,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAzNDEwOTY1",
-		"number": 33870,
-		"title": "Mobile Release v1.58.2",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54951",
+		"id": 1920203460,
+		"node_id": "PR_kwDOBNHdeM5blfTl",
+		"number": 54951,
+		"title": "Edit Post: Use hooks instead of HoCs in 'PostStatus' components",
 		"user": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 593977130,
+				"node_id": "MDU6TGFiZWw1OTM5NzcxMzA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Priority]%20Low",
+				"name": "[Priority] Low",
+				"color": "f9d0c4",
+				"default": false,
+				"description": "Used to indicate that the issue at hand isn't a top priority to address and can be handled later"
+			},
+			{
+				"id": 1298994603,
+				"node_id": "MDU6TGFiZWwxMjk4OTk0NjAz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Post",
+				"name": "[Package] Edit Post",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/edit-post"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -3969,131 +4430,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-04T12:39:09Z",
-		"updated_at": "2021-08-04T18:26:53Z",
-		"closed_at": "2021-08-04T18:26:27Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 2,
+		"created_at": "2023-09-30T10:17:16Z",
+		"updated_at": "2023-10-02T15:01:01Z",
+		"closed_at": "2023-10-02T15:00:27Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33870",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33870",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33870.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33870.patch"
-		},
-		"body": "## Description\nRelease 1.58.2 of the react-native-editor and Gutenberg-Mobile.\n\nFor more information about this release and testing instructions, please see the related Gutenberg-Mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3795\n\n## Checklist:\n- [x] My code is tested.\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54951",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54951",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54951.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54951.patch",
+			"merged_at": "2023-10-02T15:00:27Z"
+		},
+		"body": "## What?\r\nThis is similar to #54949.\r\n\r\nPR refactors `PostStatus` components to use `useDispatch` and `useSelect` hooks instead of the HoCs. I've also removed unused styles from the component.\r\n\r\n## Why?\r\nA micro-optimization makes the rendered component tree smaller.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n1. Open a post or page.\r\n2. Confirm the \"Post Status\" panel renders as before.\r\n3. You can close and open the panel.\r\n4. Remove the panel programmatically using the following snippet - `wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'post-status' );`\r\n\r\n### Testing Instructions for Keyboard\r\nSame.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n**Before**\r\n![CleanShot 2023-09-30 at 14 07 49](https://github.com/WordPress/gutenberg/assets/240569/38c8754a-e691-458a-990b-79dca2569d79)\r\n\r\n**After**\r\n![CleanShot 2023-09-30 at 14 06 35](https://github.com/WordPress/gutenberg/assets/240569/b1a12c49-edb9-4266-a2d3-952a248a81bd)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54951/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33868",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33868/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33868/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33868/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33868",
-		"id": 960259006,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAzMjk3NTg2",
-		"number": 33868,
-		"title": "Lazy render the inserter search results",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54949",
+		"id": 1920156169,
+		"node_id": "PR_kwDOBNHdeM5blWDw",
+		"number": 54949,
+		"title": "Editor: Use hooks instead of HoCs in 'PostSticky' components",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596962434,
-				"node_id": "MDU6TGFiZWw1OTY5NjI0MzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Inserter",
-				"name": "[Feature] Inserter",
-				"color": "fbca04",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": ""
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
+				"id": 593977130,
+				"node_id": "MDU6TGFiZWw1OTM5NzcxMzA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Priority]%20Low",
+				"name": "[Priority] Low",
+				"color": "f9d0c4",
+				"default": false,
+				"description": "Used to indicate that the issue at hand isn't a top priority to address and can be handled later"
+			},
+			{
+				"id": 1013395453,
+				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
+				"name": "[Package] Editor",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/editor"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4116,72 +4602,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-04T11:03:08Z",
-		"updated_at": "2021-08-05T08:07:57Z",
-		"closed_at": "2021-08-05T07:50:44Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 2,
+		"created_at": "2023-09-30T07:23:51Z",
+		"updated_at": "2023-10-01T17:37:45Z",
+		"closed_at": "2023-10-01T17:37:12Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33868",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33868",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33868.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33868.patch"
-		},
-		"body": "This PR tries to improve the feeling of responsiveness in the inserter when searching block types and patterns. It does this by lazy-rendering the search results. It adds a `step` config into the `useAsyncList` hook to render the block types 9 by 9.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54949",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54949",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54949.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54949.patch",
+			"merged_at": "2023-10-01T17:37:12Z"
+		},
+		"body": "## What?\r\nThis is similar to #53389.\r\n\r\nPR refactors `PostStickyCheck` and `PostSticky` components to use `useDispatch` and `useSelect` hooks instead of the HoCs.\r\n\r\n## Why?\r\nA micro-optimization makes the rendered component tree smaller.\r\n\r\n## Testing Instructions\r\nConfirm \r\n\r\n### Testing Instructions for Keyboard\r\nThe same \"Stick to the top of the blog\" action works as before.\r\n\r\n* Is only displayed for posts.\r\n* Can mark a post as \"sticky\".\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n**Before**\r\n![CleanShot 2023-09-25 at 18 47 36](https://github.com/WordPress/gutenberg/assets/240569/bcb24f86-b7cc-4902-a46b-522cd222abd9)\r\n\r\n**After**\r\n![CleanShot 2023-09-30 at 11 20 42](https://github.com/WordPress/gutenberg/assets/240569/ef3c56bc-f958-4118-b2a3-4a2c83b73b2c)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54949/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33866",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33866/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33866/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33866/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33866",
-		"id": 960025040,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAzMDg1NzA3",
-		"number": 33866,
-		"title": "Tune appender margin.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54947",
+		"id": 1919965859,
+		"node_id": "PR_kwDOBNHdeM5bkvb0",
+		"number": 54947,
+		"title": "Revert \"Font Library: avoid rendering font library ui outisde gutenberg plugin\"",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "matiasbenedetto",
+			"id": 1310626,
+			"node_id": "MDQ6VXNlcjEzMTA2MjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1310626?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/matiasbenedetto",
+			"html_url": "https://github.com/matiasbenedetto",
+			"followers_url": "https://api.github.com/users/matiasbenedetto/followers",
+			"following_url": "https://api.github.com/users/matiasbenedetto/following{/other_user}",
+			"gists_url": "https://api.github.com/users/matiasbenedetto/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/matiasbenedetto/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/matiasbenedetto/subscriptions",
+			"organizations_url": "https://api.github.com/users/matiasbenedetto/orgs",
+			"repos_url": "https://api.github.com/users/matiasbenedetto/repos",
+			"events_url": "https://api.github.com/users/matiasbenedetto/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/matiasbenedetto/received_events",
 			"type": "User",
 			"site_admin": false
 		},
-		"labels": [],
+		"labels": [
+			{
+				"id": 531680824,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Task",
+				"name": "[Type] Task",
+				"color": "fef2c0",
+				"default": false,
+				"description": "Issues or PRs that have been broken down into an individual action to take"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
+				"default": false,
+				"description": "Font and typography-related issues and PRs"
+			}
+		],
 		"state": "closed",
 		"locked": false,
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4204,131 +4725,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-04T07:57:20Z",
-		"updated_at": "2021-08-04T15:16:44Z",
-		"closed_at": "2021-08-04T15:16:18Z",
+		"comments": 2,
+		"created_at": "2023-09-29T22:13:51Z",
+		"updated_at": "2023-10-03T12:33:17Z",
+		"closed_at": "2023-10-03T08:27:09Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33866",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33866",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33866.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33866.patch"
-		},
-		"body": "## Description\r\n\r\nFollowup to #33739. There was a teeeeensy side effect of the uniform 8px margin around the appender. Specifically that it in some cases made the height of blocks larger. See here how the navigation block grows 4px taller on select:\r\n\r\n![before](https://user-images.githubusercontent.com/1204802/128143618-5cfb57b0-070f-4e2e-8224-c1ebab0faa64.gif)\r\n\r\nThat's because the 24px image plus 2x8px margins comes to 40px, but in this theme the menu is 36px tall by default.\r\n\r\nThis PR mitigates that by removing the top/bottom margin:\r\n\r\n![after](https://user-images.githubusercontent.com/1204802/128143703-b6a5d8bf-0020-4529-a0e5-32f96a9d5502.gif)\r\n\r\nI say _mitigates_ because if the menu is <24px tall the appender would still make it bigger. That's a separate and bigger issue to solve (see conversation in #31886). But it still seems like a good, small improvement. The appender is still vertically centered due to the flex rules.\r\n\r\n## How has this been tested?\r\n\r\nInsert social links, buttons, navigation blocks, and verify the appender on select still looks good.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54947",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54947",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54947.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54947.patch",
+			"merged_at": "2023-10-03T08:27:09Z"
+		},
+		"body": "## What?\r\nReverts the conditional export of the font library UI components to make it available only in Gutenberg.\r\n\r\n## Why?\r\nTo make the font library also available on core.\r\n\r\n\r\nReverts WordPress/gutenberg#54830",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54947/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33863",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33863/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33863/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33863/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33863",
-		"id": 959775425,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyODY0MTgw",
-		"number": 33863,
-		"title": "Image Block: Fix issue with canInsertCover not being set to false for empty arrays",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54944",
+		"id": 1919879260,
+		"node_id": "PR_kwDOBNHdeM5bkcZK",
+		"number": 54944,
+		"title": "Migrate keyboard-navigable-blocks e2e tests from puppeteer to playwright",
 		"user": {
-			"login": "glendaviesnz",
-			"id": 3629020,
-			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
+			"login": "jeryj",
+			"id": 967608,
+			"node_id": "MDQ6VXNlcjk2NzYwOA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/967608?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/glendaviesnz",
-			"html_url": "https://github.com/glendaviesnz",
-			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
-			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
-			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
-			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
-			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
-			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
+			"url": "https://api.github.com/users/jeryj",
+			"html_url": "https://github.com/jeryj",
+			"followers_url": "https://api.github.com/users/jeryj/followers",
+			"following_url": "https://api.github.com/users/jeryj/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jeryj/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jeryj/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jeryj/subscriptions",
+			"organizations_url": "https://api.github.com/users/jeryj/orgs",
+			"repos_url": "https://api.github.com/users/jeryj/repos",
+			"events_url": "https://api.github.com/users/jeryj/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jeryj/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 1101518360,
-				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
-				"name": "[Block] Image",
-				"color": "6767e5",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "glendaviesnz",
-			"id": 3629020,
-			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
+			"login": "jeryj",
+			"id": 967608,
+			"node_id": "MDQ6VXNlcjk2NzYwOA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/967608?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/glendaviesnz",
-			"html_url": "https://github.com/glendaviesnz",
-			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
-			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
-			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
-			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
-			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
-			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
+			"url": "https://api.github.com/users/jeryj",
+			"html_url": "https://github.com/jeryj",
+			"followers_url": "https://api.github.com/users/jeryj/followers",
+			"following_url": "https://api.github.com/users/jeryj/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jeryj/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jeryj/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jeryj/subscriptions",
+			"organizations_url": "https://api.github.com/users/jeryj/orgs",
+			"repos_url": "https://api.github.com/users/jeryj/repos",
+			"events_url": "https://api.github.com/users/jeryj/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jeryj/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "glendaviesnz",
-				"id": 3629020,
-				"node_id": "MDQ6VXNlcjM2MjkwMjA=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
+				"login": "jeryj",
+				"id": 967608,
+				"node_id": "MDQ6VXNlcjk2NzYwOA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/967608?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/glendaviesnz",
-				"html_url": "https://github.com/glendaviesnz",
-				"followers_url": "https://api.github.com/users/glendaviesnz/followers",
-				"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
-				"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
-				"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
-				"repos_url": "https://api.github.com/users/glendaviesnz/repos",
-				"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
+				"url": "https://api.github.com/users/jeryj",
+				"html_url": "https://github.com/jeryj",
+				"followers_url": "https://api.github.com/users/jeryj/followers",
+				"following_url": "https://api.github.com/users/jeryj/following{/other_user}",
+				"gists_url": "https://api.github.com/users/jeryj/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/jeryj/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/jeryj/subscriptions",
+				"organizations_url": "https://api.github.com/users/jeryj/orgs",
+				"repos_url": "https://api.github.com/users/jeryj/repos",
+				"events_url": "https://api.github.com/users/jeryj/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/jeryj/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4351,68 +4879,93 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-08-04T01:50:04Z",
-		"updated_at": "2021-08-04T03:08:43Z",
-		"closed_at": "2021-08-04T03:08:11Z",
+		"comments": 4,
+		"created_at": "2023-09-29T20:40:08Z",
+		"updated_at": "2023-10-02T19:35:14Z",
+		"closed_at": "2023-10-02T19:34:42Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33863",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33863",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33863.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33863.patch"
-		},
-		"body": "## Description\r\nThe canInsertCover value in the Image block is being set to 0 instead of false when `transformations` is an empty array, which causes its subsequent use in the conditional display of the coverblock conversion toolbar item to output a 0, instead of moving in to the right most criteria\r\n\r\nFixes: #33862\r\n\r\n## Testing\r\n\r\nCheck out PR in local dev env and add an Image block and make sure the convert to cover block option displays in toolbar still as expected\r\nCheck out this PR in conjunction with the Gallery refactor PR and enable the Gallery experiment\r\nAdd a gallery and make sure that the cover block option is not in the toolbar, and no 0 is displaying\r\n\r\n\r\n## Screenshots \r\n\r\nBefore:\r\n<img width=\"698\" alt=\"Screen Shot 2021-08-04 at 1 49 19 PM\" src=\"https://user-images.githubusercontent.com/3629020/128109031-6770603c-fa32-48b1-bae0-0df060dd79fd.png\">\r\n\r\nAfter:\r\n<img width=\"686\" alt=\"Screen Shot 2021-08-04 at 1 48 38 PM\" src=\"https://user-images.githubusercontent.com/3629020/128109044-353abe67-dcaf-4066-b065-ad1d0f534e82.png\">\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54944",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54944",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54944.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54944.patch",
+			"merged_at": "2023-10-02T19:34:42Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nMigrating keyboard-navigable-blocks e2e tests from puppeteer to playwright\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nPart of the larger migration effort in https://github.com/WordPress/gutenberg/issues/38851, also because I'm going to be modifying this test as part of https://github.com/WordPress/gutenberg/pull/54513 and figured I may as well migrate it before making changes.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nFollowed the [migration guide](https://github.com/WordPress/gutenberg/blob/8e7ce7328f67935dc38e09c48004645f93e13cdb/docs/contributors/code/e2e/migration.md).\r\n\r\n## Testing Instructions\r\n`npm run test:e2e:playwright -- editor/various/keyboard-navigable-blocks.spec.js`\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54944/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33860",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33860/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33860/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33860/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33860",
-		"id": 959604194,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyNzAzNDE2",
-		"number": 33860,
-		"title": "Correct spelling and grammar in documentation",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54941",
+		"id": 1919582866,
+		"node_id": "PR_kwDOBNHdeM5bjdSG",
+		"number": 54941,
+		"title": "Label enforcer workflow: make accessibility a focus instead of a type",
 		"user": {
-			"login": "jeremyfelt",
-			"id": 286171,
-			"node_id": "MDQ6VXNlcjI4NjE3MQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/286171?v=4",
+			"login": "priethor",
+			"id": 27339341,
+			"node_id": "MDQ6VXNlcjI3MzM5MzQx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/27339341?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jeremyfelt",
-			"html_url": "https://github.com/jeremyfelt",
-			"followers_url": "https://api.github.com/users/jeremyfelt/followers",
-			"following_url": "https://api.github.com/users/jeremyfelt/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jeremyfelt/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jeremyfelt/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jeremyfelt/subscriptions",
-			"organizations_url": "https://api.github.com/users/jeremyfelt/orgs",
-			"repos_url": "https://api.github.com/users/jeremyfelt/repos",
-			"events_url": "https://api.github.com/users/jeremyfelt/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jeremyfelt/received_events",
+			"url": "https://api.github.com/users/priethor",
+			"html_url": "https://github.com/priethor",
+			"followers_url": "https://api.github.com/users/priethor/followers",
+			"following_url": "https://api.github.com/users/priethor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/priethor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/priethor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/priethor/subscriptions",
+			"organizations_url": "https://api.github.com/users/priethor/orgs",
+			"repos_url": "https://api.github.com/users/priethor/repos",
+			"events_url": "https://api.github.com/users/priethor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/priethor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 1032028862,
+				"node_id": "MDU6TGFiZWwxMDMyMDI4ODYy",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Project%20Management",
+				"name": "[Type] Project Management",
+				"color": "e55ead",
+				"default": false,
+				"description": "Meta-issues related to project management of Gutenberg"
+			},
+			{
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
 				"default": false,
-				"description": ""
+				"description": "Pull requests that update GitHub Actions code"
 			}
 		],
 		"state": "closed",
@@ -4420,13 +4973,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4449,131 +5002,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 0,
-		"created_at": "2021-08-03T23:03:58Z",
-		"updated_at": "2021-08-04T05:03:25Z",
-		"closed_at": "2021-08-04T05:03:03Z",
-		"author_association": "MEMBER",
+		"created_at": "2023-09-29T16:29:56Z",
+		"updated_at": "2023-10-02T09:53:47Z",
+		"closed_at": "2023-10-02T09:53:17Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33860",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33860",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33860.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33860.patch"
-		},
-		"body": "## Description\r\n\r\n* \"theme\" should be \"them\" in this instance\r\n* \"supports\" should be \"support\" because of the plural \"Pages and Custom Post Types\"\r\n\r\n## Types of changes\r\nDocumentation\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54941",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54941",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54941.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54941.patch",
+			"merged_at": "2023-10-02T09:53:17Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nRemoves the limitation of having the Accessibility label along with types of labels like Bug or Enhancement.\r\n\r\nAt the same time, if this change is approved, a PR will _need_ to have a type-of-task label associated with it. The reasoning behind this is multiple, as not having clear rules for labeling makes it more complicated to contribute and to report and do project management on the project.\r\n\r\n## Why?\r\nAs mentioned by @afercia [here](https://github.com/WordPress/gutenberg/discussions/52727#discussioncomment-7102557).\r\n\r\n> Regarding the accessibility label, quoting from https://github.com/WordPress/gutenberg/pull/54724#issuecomment-1733830085\r\n>\r\n>I think I already pointed out in some other discussion or issue that Accessibility is typically something that spans across different areas of a project. As such, we should be able to add the Accessibility label everywhere. WhethEr it's a Type or other, I don't have strong preferences.\r\n>\r\n>Accessibility in Core Trac used to be a component and was changed to Focus right for that reason. The re=organizazion of the Trac focuses dates early 2014. For more details and the reasoning about Accessibility as focus, see https://make.wordpress.org/core/2014/01/24/trac-focuses/\r\n\r\n## How?\r\nBy removing the label from the list of type labels.\r\n\r\nIf this PR is approved, I will follow up with renaming the label to remove the `[Type]` prefix.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54941/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33848",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33848/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33848/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33848/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33848",
-		"id": 959120665,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMjg0MzM0",
-		"number": 33848,
-		"title": "Add search performance measure and make other measures more stable",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54938",
+		"id": 1919401237,
+		"node_id": "PR_kwDOBNHdeM5bi2OF",
+		"number": 54938,
+		"title": "Image Block: Fix browser console error when clicking \"Expand on Click\"",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 615503111,
-				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Automated%20Testing",
-				"name": "Automated Testing",
-				"color": "111111",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
+				"id": 1101518360,
+				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
+				"name": "[Block] Image",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Image Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"login": "t-hamano",
+				"id": 54422211,
+				"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"url": "https://api.github.com/users/t-hamano",
+				"html_url": "https://github.com/t-hamano",
+				"followers_url": "https://api.github.com/users/t-hamano/followers",
+				"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+				"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+				"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+				"repos_url": "https://api.github.com/users/t-hamano/repos",
+				"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4596,122 +5165,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-03T13:30:59Z",
-		"updated_at": "2021-08-06T11:54:26Z",
-		"closed_at": "2021-08-04T09:40:11Z",
+		"comments": 3,
+		"created_at": "2023-09-29T14:42:50Z",
+		"updated_at": "2023-10-05T11:16:42Z",
+		"closed_at": "2023-09-30T14:48:25Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33848",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33848",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33848.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33848.patch"
-		},
-		"body": "I noticed lags when searching the block inserter. I'd like to try some iterations to improve that (maybe using the same technique used for the regular inserter block list: lazy rendering).\r\n\r\nBefore jumping into the performance work, I'm adding a new performance measure here to track the time it takes for the browser to respond after an inserter search.\r\n\r\nI'm also using this as an opportunity to make the other measures a bit more stable.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54938",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54938",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54938.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54938.patch",
+			"merged_at": "2023-09-30T14:48:25Z"
+		},
+		"body": "## What?\r\nThis PR fixes a browser console error that occurs when you click \"Expand on lick\" for the first time after inserting an image block.\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/54422211/cafbf953-4456-4907-9bd5-faedf095652d\r\n\r\n\r\n\r\n## Why?\r\n\r\nThis is because the lightboxChecked variable returns undefined the first time the image block is inserted.\r\n\r\n## How?\r\n\r\nI made it always return a boolean value.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54938/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33847",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33847/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33847/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33847/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33847",
-		"id": 959087985,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMjU2MDk4",
-		"number": 33847,
-		"title": "[RNMobile] Disables supportsLayout by default on mobile",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54932",
+		"id": 1919094222,
+		"node_id": "PR_kwDOBNHdeM5bhzAq",
+		"number": 54932,
+		"title": "Document the current state of the Real-Time collaboration experiment",
 		"user": {
-			"login": "antonis",
-			"id": 304044,
-			"node_id": "MDQ6VXNlcjMwNDA0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/304044?v=4",
+			"login": "oandregal",
+			"id": 583546,
+			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/antonis",
-			"html_url": "https://github.com/antonis",
-			"followers_url": "https://api.github.com/users/antonis/followers",
-			"following_url": "https://api.github.com/users/antonis/following{/other_user}",
-			"gists_url": "https://api.github.com/users/antonis/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/antonis/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/antonis/subscriptions",
-			"organizations_url": "https://api.github.com/users/antonis/orgs",
-			"repos_url": "https://api.github.com/users/antonis/repos",
-			"events_url": "https://api.github.com/users/antonis/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/antonis/received_events",
+			"url": "https://api.github.com/users/oandregal",
+			"html_url": "https://github.com/oandregal",
+			"followers_url": "https://api.github.com/users/oandregal/followers",
+			"following_url": "https://api.github.com/users/oandregal/following{/other_user}",
+			"gists_url": "https://api.github.com/users/oandregal/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/oandregal/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/oandregal/subscriptions",
+			"organizations_url": "https://api.github.com/users/oandregal/orgs",
+			"repos_url": "https://api.github.com/users/oandregal/repos",
+			"events_url": "https://api.github.com/users/oandregal/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/oandregal/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
+				"default": false,
+				"description": "Documentation for developers"
+			},
+			{
+				"id": 1663133831,
+				"node_id": "MDU6TGFiZWwxNjYzMTMzODMx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Collaborative%20Editing",
+				"name": "[Feature] Collaborative Editing",
+				"color": "fbca04",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Phase 3 of the Gutenberg roadmap around collaborative workflows"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "antonis",
-			"id": 304044,
-			"node_id": "MDQ6VXNlcjMwNDA0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/304044?v=4",
+			"login": "oandregal",
+			"id": 583546,
+			"node_id": "MDQ6VXNlcjU4MzU0Ng==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/antonis",
-			"html_url": "https://github.com/antonis",
-			"followers_url": "https://api.github.com/users/antonis/followers",
-			"following_url": "https://api.github.com/users/antonis/following{/other_user}",
-			"gists_url": "https://api.github.com/users/antonis/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/antonis/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/antonis/subscriptions",
-			"organizations_url": "https://api.github.com/users/antonis/orgs",
-			"repos_url": "https://api.github.com/users/antonis/repos",
-			"events_url": "https://api.github.com/users/antonis/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/antonis/received_events",
+			"url": "https://api.github.com/users/oandregal",
+			"html_url": "https://github.com/oandregal",
+			"followers_url": "https://api.github.com/users/oandregal/followers",
+			"following_url": "https://api.github.com/users/oandregal/following{/other_user}",
+			"gists_url": "https://api.github.com/users/oandregal/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/oandregal/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/oandregal/subscriptions",
+			"organizations_url": "https://api.github.com/users/oandregal/orgs",
+			"repos_url": "https://api.github.com/users/oandregal/repos",
+			"events_url": "https://api.github.com/users/oandregal/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/oandregal/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "antonis",
-				"id": 304044,
-				"node_id": "MDQ6VXNlcjMwNDA0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/304044?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/antonis",
-				"html_url": "https://github.com/antonis",
-				"followers_url": "https://api.github.com/users/antonis/followers",
-				"following_url": "https://api.github.com/users/antonis/following{/other_user}",
-				"gists_url": "https://api.github.com/users/antonis/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/antonis/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/antonis/subscriptions",
-				"organizations_url": "https://api.github.com/users/antonis/orgs",
-				"repos_url": "https://api.github.com/users/antonis/repos",
-				"events_url": "https://api.github.com/users/antonis/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/antonis/received_events",
+				"login": "oandregal",
+				"id": 583546,
+				"node_id": "MDQ6VXNlcjU4MzU0Ng==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/583546?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/oandregal",
+				"html_url": "https://github.com/oandregal",
+				"followers_url": "https://api.github.com/users/oandregal/followers",
+				"following_url": "https://api.github.com/users/oandregal/following{/other_user}",
+				"gists_url": "https://api.github.com/users/oandregal/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/oandregal/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/oandregal/subscriptions",
+				"organizations_url": "https://api.github.com/users/oandregal/orgs",
+				"repos_url": "https://api.github.com/users/oandregal/repos",
+				"events_url": "https://api.github.com/users/oandregal/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/oandregal/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4734,56 +5328,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-03T12:55:37Z",
-		"updated_at": "2021-08-04T12:13:20Z",
-		"closed_at": "2021-08-04T06:27:50Z",
+		"comments": 2,
+		"created_at": "2023-09-29T11:23:46Z",
+		"updated_at": "2023-10-07T09:02:11Z",
+		"closed_at": "2023-10-03T11:12:15Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33847",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33847",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33847.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33847.patch"
-		},
-		"body": "## Description\r\nThis PR handles an incoming breakage after the merge of https://github.com/WordPress/gutenberg/pull/33359 making the `Wide width` and `Full width` alignment options unavailable. To achieve this the `supportsLayout` setting introduced in https://github.com/WordPress/gutenberg/pull/29335 is set by default to `false` on mobile. \r\n\r\n## How has this been tested?\r\n1. Run the app using metro\r\n2. Create a new Post/Page\r\n3. Add an image block and choose an image\r\n4. Tap on the alignment options at the bottom toolbar\r\n5. **Verify** that the `Wide width` and `Full width` options are available\r\n\r\n## Screenshots\r\n\r\n|Before|After|\r\n|---|---|\r\n|![IMG_20BE77E7CBA5-1](https://user-images.githubusercontent.com/304044/128035883-b043290f-1bb4-4e28-8550-90d620333695.jpeg)|![IMG_675ABFF98181-1](https://user-images.githubusercontent.com/304044/128035895-d2706b23-f164-40f5-9b30-7006ae270917.jpeg)|\r\n\r\n## Types of changes\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54932",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54932",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54932.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54932.patch",
+			"merged_at": "2023-10-03T11:12:15Z"
+		},
+		"body": "Related https://github.com/WordPress/gutenberg/issues/52593\r\n\r\nAdd some notes to document how the Real-Time collaboration experiment works at the moment. This is a minimal and ongoing effort, to have some low-level notes to help navigate the code, complementing what has already been shared in make/core and the tracking issue.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 1,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54932/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33845",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33845/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33845/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33845/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33845",
-		"id": 959073850,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMjQzOTAy",
-		"number": 33845,
-		"title": "[RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54931",
+		"id": 1918988447,
+		"node_id": "PR_kwDOBNHdeM5bhb3_",
+		"number": 54931,
+		"title": "Reverting addition of `aria-selected` style hook in `Button`",
 		"user": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -4795,79 +5405,70 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
-				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 1101518360,
-				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
-				"name": "[Block] Image",
-				"color": "6767e5",
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "SiobhyB",
-				"id": 2998162,
-				"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+				"login": "andrewhayward",
+				"id": 159848,
+				"node_id": "MDQ6VXNlcjE1OTg0OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/SiobhyB",
-				"html_url": "https://github.com/SiobhyB",
-				"followers_url": "https://api.github.com/users/SiobhyB/followers",
-				"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-				"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-				"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-				"repos_url": "https://api.github.com/users/SiobhyB/repos",
-				"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+				"url": "https://api.github.com/users/andrewhayward",
+				"html_url": "https://github.com/andrewhayward",
+				"followers_url": "https://api.github.com/users/andrewhayward/followers",
+				"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+				"repos_url": "https://api.github.com/users/andrewhayward/repos",
+				"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -4890,131 +5491,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-03T12:37:52Z",
-		"updated_at": "2021-08-03T18:29:32Z",
-		"closed_at": "2021-08-03T18:29:00Z",
+		"comments": 2,
+		"created_at": "2023-09-29T10:08:57Z",
+		"updated_at": "2023-09-29T11:32:40Z",
+		"closed_at": "2023-09-29T11:32:15Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33845",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33845",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33845.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33845.patch"
-		},
-		"body": "Fixes: https://github.com/WordPress/gutenberg/issues/33828\r\n\r\n`gutenberg-mobile:` https://github.com/wordpress-mobile/gutenberg-mobile/pull/3784\r\n\r\n## Description\r\n\r\nAs outlined in https://github.com/WordPress/gutenberg/issues/33828, the text editor for adding alt text to an image (accessed from the image block's settings) isn't currently working as expected. At the time of writing, the keyboard is immediately dismissed with each keystroke, making it extremely difficult, bordering on impossible, to add alt text to an image.\r\n\r\n[BottomSheetTextControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/mobile/bottom-sheet-text-control) is the component behind the image block's alt text settings and is built on [the BottomSheet.SubSheet component](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js). There were changes to `BottomSheet.SubSheet` in https://github.com/WordPress/gutenberg/pull/33240/commits/d650b4f1df6e1699c7c45819a8afd4a2ec39a08e that led to a conflict with the `TextInput` component in `BottomSheetTextControl`, which brought this issue to the surface.\r\n\r\nWith this PR, I have refactored the changes in https://github.com/WordPress/gutenberg/pull/33240/commits/d650b4f1df6e1699c7c45819a8afd4a2ec39a08e in a way that enables the alt text entry to work as expected.  \r\n\r\n## How has this been tested?\r\n\r\n### Test Case 1: Alt Text Settings\r\n\r\n<details>\r\n<summary>The following steps outline an approach to test that the original bug is fixed with this PR.</summary>\r\n\r\n1. Navigate to a new post then add an image block or tap on an existing one.\r\n2. Access the image block's settings by tapping the cog/gear icon. \r\n3. Tap **Alt Text** and confirm that a new sub sheet opens with a text editor.\r\n4. Enter a few lines into the text editor and confirm that it no longer closes with each keystroke.\r\n</details>\r\n\r\n### Test Case 2: Help Panel (Production Only)\r\n\r\n<details>\r\n<summary>As part of our testing, we should also verify that the new changes don't bring any unexpected side effects to other places where the component's used, such as the Help panel.</summary>\r\n\r\n* Run the demo app.\r\n* Open the menu on iOS by clicking the overflow menu icon in the ActionBar or by shaking the device on Android.\r\n* Tap **Help**. The main help topics bottom sheet should be displayed.\r\n* Tap one of the help topics and verify that the new sheet displays as expected.\r\n\r\n</details>\r\n\r\n### Test Case 3: Full Screen (Code Changes Required)\r\n\r\n<details>\r\n<summary>Lastly, we'll need to double-check that the \"isFullScreen\" parameter works as expected following the refactor. This will require code changes.</summary>\r\n\r\n* Find a component in the app where [the BottomSheet.SubSheet component](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js) is being utilised, such as [the BottomSheetTextControl component](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/mobile/bottom-sheet-text-control/index.native.js).\r\n* Add `isFullScreen={ true }` to the list of parameters being accepted by `BottomSheet.SubSheet`.\r\n* Navigate to the area in the app where the edited component is being used and verify that it's rendered as a sheet that takes up the full screen.\r\n</details>\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nhttps://user-images.githubusercontent.com/2998162/128023488-cb4a35b3-34eb-4478-acf9-9e8835fc1ab3.mov\r\n\r\n## Types of changes\r\n\r\nBug fix (non-breaking change which fixes an issue), with the following high-level rundown of the main code changes:\r\n\r\n* The `setIsFullScreen( isFullScreen )` method was moved to [a standalone `useEffect` hook](https://github.com/WordPress/gutenberg/pull/33845/files#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R26), which fires only when [the values of either `showSheet` or `isFullScreen` change](https://github.com/WordPress/gutenberg/pull/33845/files#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R30).\r\n* Moving the method to the standalone hook meant [the BottomSheetScreen component could be removed](https://github.com/WordPress/gutenberg/pull/33845/files#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95L20). It appeared to be the addition of this component that was causing a conflict with the `TextInput` component.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54931",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54931",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54931.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54931.patch",
+			"merged_at": "2023-09-29T11:32:15Z"
+		},
+		"body": "## What?\r\nThis PR removes the addition of `aria-selected` as a styling hook from `Button`.\r\n\r\n## Why?\r\n[As pointed out](https://github.com/WordPress/gutenberg/pull/54903#issuecomment-1740537243) by @madhusudhand, #54903 inadvertently changed how tabs are rendered.\r\n\r\n## How?\r\nThe `[aria-selected=\"true\"]` selector has been removed from `Button`.\r\n\r\n## Testing Instructions\r\n\r\n1.  Under global styles -> typography, click on `Aa` or any font to invoke the font library modal.\r\n2. Observe that the active tab no longer has a black background.\r\n\r\n## Screenshots\r\n\r\n### Before\r\n\r\n![Screenshot of tabs, the selected one having an unexpected dark background.](https://github.com/WordPress/gutenberg/assets/159848/780d5362-f023-45d8-8815-28d16f2a95e3)\r\n\r\n### After\r\n\r\n![Screenshot of tabs, the selected one having no background.](https://github.com/WordPress/gutenberg/assets/159848/237ec917-aa3b-45f9-a18c-da03a0b952f5)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54931/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33844",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33844/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33844/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33844/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33844",
-		"id": 959026920,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMjAzOTQ5",
-		"number": 33844,
-		"title": "Global Styles: Fix Global Styles transient key clash",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54928",
+		"id": 1918907902,
+		"node_id": "PR_kwDOBNHdeM5bhKOu",
+		"number": 54928,
+		"title": "[RNMobile] Set native extension to media upload constant file",
 		"user": {
-			"login": "scruffian",
-			"id": 275961,
-			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/scruffian",
-			"html_url": "https://github.com/scruffian",
-			"followers_url": "https://api.github.com/users/scruffian/followers",
-			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
-			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
-			"organizations_url": "https://api.github.com/users/scruffian/orgs",
-			"repos_url": "https://api.github.com/users/scruffian/repos",
-			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
 				"default": false,
-				"description": ""
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "scruffian",
-			"id": 275961,
-			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/scruffian",
-			"html_url": "https://github.com/scruffian",
-			"followers_url": "https://api.github.com/users/scruffian/followers",
-			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
-			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
-			"organizations_url": "https://api.github.com/users/scruffian/orgs",
-			"repos_url": "https://api.github.com/users/scruffian/repos",
-			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "scruffian",
-				"id": 275961,
-				"node_id": "MDQ6VXNlcjI3NTk2MQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+				"login": "fluiddot",
+				"id": 14905380,
+				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/scruffian",
-				"html_url": "https://github.com/scruffian",
-				"followers_url": "https://api.github.com/users/scruffian/followers",
-				"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
-				"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
-				"organizations_url": "https://api.github.com/users/scruffian/orgs",
-				"repos_url": "https://api.github.com/users/scruffian/repos",
-				"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/scruffian/received_events",
+				"url": "https://api.github.com/users/fluiddot",
+				"html_url": "https://github.com/fluiddot",
+				"followers_url": "https://api.github.com/users/fluiddot/followers",
+				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+				"repos_url": "https://api.github.com/users/fluiddot/repos",
+				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5037,56 +5654,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 3,
-		"created_at": "2021-08-03T11:39:19Z",
-		"updated_at": "2021-08-06T09:42:45Z",
-		"closed_at": "2021-08-03T17:01:45Z",
+		"created_at": "2023-09-29T09:19:06Z",
+		"updated_at": "2023-09-29T16:12:48Z",
+		"closed_at": "2023-09-29T16:12:25Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33844",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33844",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33844.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33844.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nNow that we have a version of Global Styles in core, when you run the Gutenberg plugin activated, you're running a different version of Global Styles. However both versions currently use the same cache key. This means that once the core version of Global Styles has loaded and been cached, the Gutenberg version won't be generated since it will fall back to the same key.\r\n\r\nThis proposes that we introduce a new cache key for Global Styles in Gutenberg (`gutenberg_global_styles`) so that if you're running the Gutenberg plugin you will get the Gutenberg version of Global Styles.\r\n\r\nFixes https://github.com/WordPress/gutenberg/issues/33681\r\n\r\n## How has this been tested?\r\nTested changing fonts in Blockbase.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\nBug fix (non-breaking change which fixes an issue)\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54928",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54928",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54928.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54928.patch",
+			"merged_at": "2023-09-29T16:12:25Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\n~~Move the test-only media upload constants to the test file where they are being used.~~\r\n\r\nFollowing this suggestion, the media upload constants file now has the native extension and the option constants are being used in the `MediaUpload` component.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThis addresses an issue when bundling Gutenberg Mobile related to missing i18n localizations ([reference](https://github.com/wordpress-mobile/gutenberg-mobile/pull/6243#discussion_r1339784529)).\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n~~The constants related to media options being used in `packages/block-editor/src/components/media-upload/test/index.native.js` have been moved from the constants file (`packages/block-editor/src/components/media-upload/constants.js`) to the test.~~\r\n\r\n* The extension of `packages/block-editor/src/components/media-upload/constants.js` file has changed to `native.js`.\r\n* `MediaUpload` uses the media options constants to define the media sources displayed in the \"Choose media\" picker.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n### CI jobs\r\n* Check all CI jobs pass.\r\n\r\n### Media options\r\n1. Open/create a post.\r\n2. Add an Image block.\r\n3. Observe that the block presents the following options:\r\n    - Choose from device\r\n    - Take a Photo\r\n    - WordPress Media Library\r\n    - Insert from URL\r\n    - Free Photo Library\r\n    - Free GIF Library\r\n    - Other Apps (only on iOS)\r\n4. Add a Video block.\r\n5. Observe that the block presents the following options:\r\n    - Choose from device\r\n    - Take a Video\r\n    - WordPress Media Library\r\n    - Insert from URL\r\n    - Other Apps (only on iOS)\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54928/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33843",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33843/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33843/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33843/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33843",
-		"id": 959014817,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMTkzNzk2",
-		"number": 33843,
-		"title": "Navigation Editor: Avoid React warning when creating a new menu",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54927",
+		"id": 1918891324,
+		"node_id": "PR_kwDOBNHdeM5bhGn_",
+		"number": 54927,
+		"title": "[RNMobile] HTML mode: Add dark mode color to post title",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -5098,79 +5731,70 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 2074073931,
-				"node_id": "MDU6TGFiZWwyMDc0MDczOTMx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Navigation%20Screen",
-				"name": "[Feature] Navigation Screen",
-				"color": "fbca04",
-				"default": false,
-				"description": "A new block-based screen intended to replace nav-menus.php."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 2536082965,
-				"node_id": "MDU6TGFiZWwyNTM2MDgyOTY1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Navigation",
-				"name": "[Package] Edit Navigation",
-				"color": "ed2572",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
 				"default": false,
-				"description": "/packages/edit-navigation"
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "fluiddot",
+				"id": 14905380,
+				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/fluiddot",
+				"html_url": "https://github.com/fluiddot",
+				"followers_url": "https://api.github.com/users/fluiddot/followers",
+				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+				"repos_url": "https://api.github.com/users/fluiddot/repos",
+				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5193,122 +5817,98 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-08-03T11:24:09Z",
-		"updated_at": "2021-08-04T08:47:11Z",
-		"closed_at": "2021-08-04T04:54:22Z",
-		"author_association": "MEMBER",
+		"comments": 1,
+		"created_at": "2023-09-29T09:07:42Z",
+		"updated_at": "2023-09-29T10:52:06Z",
+		"closed_at": "2023-09-29T10:51:38Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33843",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33843",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33843.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33843.patch"
-		},
-		"body": "## Description\r\nCurrently, when creating a menu, there's React warning about state updates on unmounted components.\r\n\r\nPR updates `createMenu` logic to set state right after the `saveMenu` action is dispatched. \r\n\r\n## How has this been tested?\r\n1. Go to the experimental navigation screen.\r\n2. Click on \"Switch Menu\" in the top right corner.\r\n3. Choose the\"Create a new menu\" option.\r\n4. After creating the menu, there shouldn't be an error in the browser console.\r\n\r\n## Screenshots <!-- if applicable -->\r\n![CleanShot 2021-08-03 at 15 17 52](https://user-images.githubusercontent.com/240569/128007292-91e71416-14e7-40e3-94c4-461ad411f0b2.png)\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54927",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54927",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54927.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54927.patch",
+			"merged_at": "2023-09-29T10:51:38Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nIn HTML mode and with dark mode enabled, the post title might be not visible due to using the same color as the background. This issue only happens when using themes that don't provide global styles.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThis issue affects negatively the experience when editing in HTML mode.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nAdds a style to be used in the title element when in dark mode.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. In a browser, navigate to the Theme page of a site.\r\n2. Set a theme that doesn't provide global styles (e.g. Seedlet theme).\r\n3. In the app, open/create a post.\r\n4. Set a post title.\r\n5. Tap on the `...` button and \"Switch to HTML mode\".\r\n6. Observe that the post title is visible.\r\n7. Enable dark mode in the device.\r\n8. Observe that the post title is displayed with a different color and is visible.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n<img src=https://github.com/WordPress/gutenberg/assets/14905380/8e44e99c-4e23-4a79-8f09-b14dfe03ed8c width=300>\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54927/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33842",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33842/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33842/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33842/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33842",
-		"id": 959008282,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMTg4MjY0",
-		"number": 33842,
-		"title": "Polish the focus style for the segmented control.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54926",
+		"id": 1918859929,
+		"node_id": "PR_kwDOBNHdeM5bg_yp",
+		"number": 54926,
+		"title": "Revert \"Fix warning when a template calls a template area twice\"",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "scruffian",
+			"id": 275961,
+			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/scruffian",
+			"html_url": "https://github.com/scruffian",
+			"followers_url": "https://api.github.com/users/scruffian/followers",
+			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+			"organizations_url": "https://api.github.com/users/scruffian/orgs",
+			"repos_url": "https://api.github.com/users/scruffian/repos",
+			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/scruffian/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "/packages/components"
+				"description": "An existing feature does not function as intended"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5331,131 +5931,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-08-03T11:16:34Z",
-		"updated_at": "2021-08-03T14:16:40Z",
-		"closed_at": "2021-08-03T14:16:07Z",
+		"comments": 1,
+		"created_at": "2023-09-29T08:46:38Z",
+		"updated_at": "2023-10-04T21:57:42Z",
+		"closed_at": "2023-09-29T10:52:57Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33842",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33842",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33842.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33842.patch"
-		},
-		"body": "## Description\r\n\r\nFollowup to feedback in https://github.com/WordPress/gutenberg/pull/31937#issuecomment-880153741, this PR polishes the focus style for the new Segmented Control. Before:\r\n\r\n![before](https://user-images.githubusercontent.com/1204802/128005511-81a68f09-ddf4-4870-b5ce-3889d915ca86.gif)\r\n\r\nAfter:\r\n\r\n![after](https://user-images.githubusercontent.com/1204802/128005531-526c2de3-53fe-4c8c-966c-a85be69064c9.gif)\r\n\r\nThe focus style for buttons, unputs and selected blocks across the block editor is 1.5px blue focusring, which changes the shape from 1px inputs or controls, or sits outset of solid blue primary buttons.\r\n\r\nIn this case, the usage of focus-within feels correct, as when you tab to the segmented control, pressing tab again sets focus on the next control, not the next option inside; you have to use the arrow keys to change the property inside.\r\n\r\nNote: This PR is a draft because it needs a bit more work. Specifically there appears to be a bug in how the `${ CONFIG.controlBoxShadowFocus };` variable is output. It generates the following incorrect box shadow, which then doesn't render at all:\r\n\r\n```\r\nbox-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color, #00669b);\r\n```\r\n\r\nThe two commas are wrong. Here's how it should be:\r\n\r\n```\r\nbox-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);\r\n```\r\n\r\nThis PR simply outputs the corrected value directly, but ideally we find a way to output the variable correctly before we land this. If you know how to, please feel free to push directly to this branch.\r\n\r\n## How has this been tested?\r\n\r\nInsert a \"Post Featured Image\" block and focus the segmented control in the inspector.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54926",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54926",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54926.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54926.patch",
+			"merged_at": "2023-09-29T10:52:57Z"
+		},
+		"body": "Reverts WordPress/gutenberg#54861",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54926/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33840",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33840/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33840/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33840/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33840",
-		"id": 958800394,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAyMDE1NzM0",
-		"number": 33840,
-		"title": "Editor: Safer isPreviewingPost check",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54923",
+		"id": 1918555635,
+		"node_id": "PR_kwDOBNHdeM5bf9ek",
+		"number": 54923,
+		"title": "Patterns: Include pattern category in main e2e critical path test",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "glendaviesnz",
+			"id": 3629020,
+			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/glendaviesnz",
+			"html_url": "https://github.com/glendaviesnz",
+			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 1013395453,
-				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
-				"name": "[Package] Editor",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/editor"
-			}
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
+				"color": "fbca04",
+				"default": false,
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
+			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "glendaviesnz",
+			"id": 3629020,
+			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/glendaviesnz",
+			"html_url": "https://github.com/glendaviesnz",
+			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "glendaviesnz",
+				"id": 3629020,
+				"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/glendaviesnz",
+				"html_url": "https://github.com/glendaviesnz",
+				"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+				"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+				"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+				"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+				"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+				"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5478,82 +6094,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-08-03T07:06:47Z",
-		"updated_at": "2021-08-03T08:16:59Z",
-		"closed_at": "2021-08-03T08:16:31Z",
-		"author_association": "MEMBER",
+		"comments": 2,
+		"created_at": "2023-09-29T03:56:06Z",
+		"updated_at": "2023-10-02T03:37:16Z",
+		"closed_at": "2023-10-02T03:36:42Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33840",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33840",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33840.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33840.patch"
-		},
-		"body": "## Description\r\nThe `options` property might not always be defined for the `saving` state and, in some cases, might result in an error.\r\n\r\nPR updates selector to use lodash `get` to safely check `options.isPreview` reference. It also matches the signature in the `isAutosavingPost` selector.\r\n\r\nFixes #29711.\r\n\r\n## How has this been tested?\r\n1. Comment out `isSavingPost` condition from the `isPreviewingPost()` selector.\r\n2. Run the following code in the browser console:\r\n\r\n```js\r\nwp.data.select( 'core/editor' ).isPreviewingPost();\r\n```\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54923",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54923",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54923.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54923.patch",
+			"merged_at": "2023-10-02T03:36:42Z"
+		},
+		"body": "## What?\r\nIncludes the adding of the pattern category into the main post editor e2e test\r\n\r\n## Why?\r\nMakes sure all parts of the critical path are covered\r\n\r\n## How?\r\nAdds a category during pattern creation\r\nFinds the new pattern via that category\r\nDeletes all categories at end of test\r\n\r\n## Testing Instructions\r\n\r\n- Make sure CI passes\r\n- Run `npm run test:e2e:playwright test/e2e/specs/editor/various/patterns.spec.js` locally and then go to http://localhost:8889/wp-admin/edit-tags.php?taxonomy=wp_pattern_category and make sure there are no categories listed\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54923/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33833",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33833/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33833/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33833/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33833",
-		"id": 958653186,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAxOTAwMTgx",
-		"number": 33833,
-		"title": "RNMobile: Add integration test guide",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54922",
+		"id": 1918478677,
+		"node_id": "PR_kwDOBNHdeM5bftPG",
+		"number": 54922,
+		"title": "Components: consolidate utils to remove `ui/`",
 		"user": {
-			"login": "guarani",
-			"id": 1898325,
-			"node_id": "MDQ6VXNlcjE4OTgzMjU=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1898325?v=4",
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/guarani",
-			"html_url": "https://github.com/guarani",
-			"followers_url": "https://api.github.com/users/guarani/followers",
-			"following_url": "https://api.github.com/users/guarani/following{/other_user}",
-			"gists_url": "https://api.github.com/users/guarani/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/guarani/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/guarani/subscriptions",
-			"organizations_url": "https://api.github.com/users/guarani/orgs",
-			"repos_url": "https://api.github.com/users/guarani/repos",
-			"events_url": "https://api.github.com/users/guarani/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/guarani/received_events",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "brookewp",
+				"id": 35543432,
+				"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+				"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/brookewp",
+				"html_url": "https://github.com/brookewp",
+				"followers_url": "https://api.github.com/users/brookewp/followers",
+				"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+				"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+				"organizations_url": "https://api.github.com/users/brookewp/orgs",
+				"repos_url": "https://api.github.com/users/brookewp/repos",
+				"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/brookewp/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5576,56 +6257,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 2,
-		"created_at": "2021-08-03T02:17:36Z",
-		"updated_at": "2021-08-04T15:42:53Z",
-		"closed_at": "2021-08-04T15:42:28Z",
+		"created_at": "2023-09-29T01:43:46Z",
+		"updated_at": "2023-10-02T18:12:30Z",
+		"closed_at": "2023-10-02T18:12:04Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33833",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33833",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33833.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33833.patch"
-		},
-		"body": "## Description\r\n\r\nAdds a guide to integration tests on Gutenberg Mobile.\r\n\r\n## How has this been tested?\r\nRead through the guide to ensure legibility and accuracy.\r\n\r\n## Types of changes\r\n- Updated docs\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54922",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54922",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54922.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54922.patch",
+			"merged_at": "2023-10-02T18:12:04Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nRemaining task to remove the `ui/` folder which started in #52953\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThere isn't a need for the ui folder anymore - more details can be found in above-mentioned PR.\r\n\r\n> For context, there is no longer a need to keep a separate /ui folder around, so we want to move toward removing this extra folder grouping.\r\n> To begin with, there are a lot of experimental components in this folder that are not used anywhere, and are no longer part of our overall component strategy. They add unnecessary overhead when auditing or just looking for components.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nBy moving the files from `ui/utils` to `utils`. \r\n\r\n`colors` was the only name conflict, so it and its tests have been consolidated into one file. \r\n\r\n## Testing Instructions\r\n\r\nEnsure all tests pass\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54922/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33831",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33831/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33831/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33831/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33831",
-		"id": 958559778,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAxODI1NjM1",
-		"number": 33831,
-		"title": "Components: Fix RTL on custom gradient picker",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54912",
+		"id": 1917543753,
+		"node_id": "PR_kwDOBNHdeM5bch3P",
+		"number": 54912,
+		"title": "Popover: Fix the styles for components that use emotion within popovers",
 		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -5637,39 +6334,70 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 596965480,
-				"node_id": "MDU6TGFiZWw1OTY5NjU0ODA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Internationalization%20(i18n)",
-				"name": "Internationalization (i18n)",
-				"color": "e881e2",
-				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 659839209,
+				"node_id": "MDU6TGFiZWw2NTk4MzkyMDk=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20UI%20Components",
+				"name": "[Feature] UI Components",
+				"color": "fbca04",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Impacts or related to the UI component system"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5692,140 +6420,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-02T22:36:46Z",
-		"updated_at": "2021-08-03T15:38:00Z",
-		"closed_at": "2021-08-03T15:27:19Z",
+		"comments": 3,
+		"created_at": "2023-09-28T13:20:58Z",
+		"updated_at": "2023-09-29T14:40:23Z",
+		"closed_at": "2023-09-29T13:48:06Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33831",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33831",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33831.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33831.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nFix custom gradient picker on sites with RTL.\r\n\r\nFixes #27352\r\n\r\n## How has this been tested?\r\nWith a RTL language and RTL tester plugin\r\n\r\n## Screenshots <!-- if applicable -->\r\n| Before | After |\r\n| --- | --- |\r\n|  ![rtl-custom-gradient](https://user-images.githubusercontent.com/1415747/127931900-3846eecd-8f1a-40d2-9d74-96ddc4b8441e.gif) |  ![fixed-rtl-custom-gradient](https://user-images.githubusercontent.com/1415747/127931912-5b1f00e0-d348-4ba7-9f7f-1b7f15268524.gif) |\r\n\r\n## Types of changes\r\nBug fix\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54912",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54912",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54912.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54912.patch",
+			"merged_at": "2023-09-29T13:48:06Z"
+		},
+		"body": "Fix regression introduced in #53889\r\n\r\n## What?\r\n\r\nIn #53889 default popovers moved from using a \"Slot\" to just rendering within the \"body\" of the page. But we missed the fact that when using a `Slot`, there's an \"emotion\" `StyleProvider` that gets automatically applied which ensures that any CSS in JS styles rendered within the Slot are rendered properly to the right document. Since we're now using `createPortal` directly, we need to ensure the right `StyleProvider` is applied which would ensure that the styles are applied properly within that particular popover.\r\n\r\n## Testing Instructions\r\n\r\n1- A bit hard cause I'm not sure we have a use-case right now in Gutenberg. You'll have to render a `<Popover>` or `<Dropdown>` within a \"block\" (so within the iframe) and use an \"emotion\" based component within it. (I have been personally testing using a private plugin that I can't share publicly)",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54912/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33824",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33824/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33824/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33824/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33824",
-		"id": 958364226,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAxNjU2OTA1",
-		"number": 33824,
-		"title": "components: Use updated range styles",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54910",
+		"id": 1917364624,
+		"node_id": "PR_kwDOBNHdeM5bb5mC",
+		"number": 54910,
+		"title": "ESLint: Update eslint-plugin-testing-library to v6",
 		"user": {
-			"login": "sarayourfriend",
-			"id": 24264157,
-			"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-			"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/sarayourfriend",
-			"html_url": "https://github.com/sarayourfriend",
-			"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-			"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-			"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-			"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-			"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-			"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/components"
-			},
-			{
-				"id": 1344464662,
-				"node_id": "MDU6TGFiZWwxMzQ0NDY0NjYy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[a11y]%20Keyboard%20&%20Focus",
-				"name": "[a11y] Keyboard & Focus",
-				"color": "efde5d",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "sarayourfriend",
-			"id": 24264157,
-			"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-			"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/sarayourfriend",
-			"html_url": "https://github.com/sarayourfriend",
-			"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-			"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-			"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-			"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-			"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-			"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "sarayourfriend",
-				"id": 24264157,
-				"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-				"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/sarayourfriend",
-				"html_url": "https://github.com/sarayourfriend",
-				"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-				"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-				"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-				"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-				"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-				"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+				"login": "tyxla",
+				"id": 8436925,
+				"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/tyxla",
+				"html_url": "https://github.com/tyxla",
+				"followers_url": "https://api.github.com/users/tyxla/followers",
+				"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+				"organizations_url": "https://api.github.com/users/tyxla/orgs",
+				"repos_url": "https://api.github.com/users/tyxla/repos",
+				"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tyxla/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -5848,140 +6574,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 15,
-		"created_at": "2021-08-02T17:33:13Z",
-		"updated_at": "2021-08-06T13:19:05Z",
-		"closed_at": "2021-08-06T13:18:17Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 1,
+		"created_at": "2023-09-28T11:58:18Z",
+		"updated_at": "2023-09-28T13:35:55Z",
+		"closed_at": "2023-09-28T13:35:30Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33824",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33824",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33824.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33824.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nUse the updated range styles from the Global Styles figma: https://www.figma.com/file/oEkcAyhIvPFMVEAO8EImvA/Global-Styles\r\n\r\n## How has this been tested?\r\nRun storybook and check out the range control page: `iframe.html?id=components-rangecontrol--default`\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n### Unfocused\r\n\r\n<img width=\"1072\" alt=\"Captura de Tela 2021-08-02 às 10 30 28\" src=\"https://user-images.githubusercontent.com/24264157/127901085-e8b175a9-9171-4a5e-8f90-a93207f61a85.png\">\r\n\r\n### Focused\r\n\r\n<img width=\"1072\" alt=\"Captura de Tela 2021-08-02 às 10 30 30\" src=\"https://user-images.githubusercontent.com/24264157/127901095-12dab52c-650f-45ec-9f93-653a04326bc6.png\">\r\n\r\n\r\n## Types of changes\r\nStyle changes (new feature???)\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54910",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54910",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54910.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54910.patch",
+			"merged_at": "2023-09-28T13:35:30Z"
+		},
+		"body": "## What?\r\nThis PR bumps `eslint-plugin-testing-library` to v6.\r\n\r\n## Why?\r\nIt's simply a dependency change, to keep the testing library tests up to date with the latest best practices of writing component tests.\r\n\r\n## How?\r\nWe're bumping the version and fixing a couple of ESLint errors.\r\n\r\n## Testing Instructions\r\nVerify all checks are green.\r\n\r\n### Testing Instructions for Keyboard\r\nNone.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nNone.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54910/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33818",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33818/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33818/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33818/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33818",
-		"id": 958138621,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAxNDYxNTky",
-		"number": 33818,
-		"title": "Scripts: Update webpack to v5 (try 2)",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54908",
+		"id": 1917231902,
+		"node_id": "PR_kwDOBNHdeM5bbbfE",
+		"number": 54908,
+		"title": "Update the documentation of the block editor and replace @wordpress/element with react",
 		"user": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596512821,
-				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
-				"name": "[Type] Build Tooling",
-				"color": "111111",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": ""
-			},
-			{
-				"id": 978007737,
-				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
-				"name": "[Package] Scripts",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/scripts"
-			},
-			{
-				"id": 1607665481,
-				"node_id": "MDU6TGFiZWwxNjA3NjY1NDgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Storybook",
-				"name": "Storybook",
-				"color": "81e2c7",
-				"default": false,
-				"description": "Storybook and its stories for components"
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "gziolo",
-				"id": 699132,
-				"node_id": "MDQ6VXNlcjY5OTEzMg==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/gziolo",
-				"html_url": "https://github.com/gziolo",
-				"followers_url": "https://api.github.com/users/gziolo/followers",
-				"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-				"organizations_url": "https://api.github.com/users/gziolo/orgs",
-				"repos_url": "https://api.github.com/users/gziolo/repos",
-				"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/gziolo/received_events",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6004,140 +6728,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 28,
-		"created_at": "2021-08-02T13:19:47Z",
-		"updated_at": "2021-08-10T07:24:53Z",
-		"closed_at": "2021-08-10T07:24:28Z",
-		"author_association": "MEMBER",
+		"comments": 1,
+		"created_at": "2023-09-28T10:55:04Z",
+		"updated_at": "2023-10-04T13:45:09Z",
+		"closed_at": "2023-10-04T13:44:43Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33818",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33818",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33818.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33818.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nFollow-up for #26382. \r\nFixes #33768, fixes #32203, fixes #30289.\r\n\r\nIt's a second attempt to upgrade webpack to v5.\r\n\r\n## Known Issues\r\n\r\n- [x] `wp-scripts build` generates styles with a wrong name\r\n  <img width=\"363\" alt=\"Screen Shot 2021-08-02 at 15 15 49\" src=\"https://user-images.githubusercontent.com/699132/127868546-a35d31bf-699b-4f6a-b782-8dcd2ea2b169.png\">\r\n it should be `index-style.css` in the context of a block\r\n- [x] `npm run build` errors because of API changes in webpack plugins\r\n  <img width=\"1455\" alt=\"Screen Shot 2021-08-02 at 15 23 15\" src=\"https://user-images.githubusercontent.com/699132/127868792-1002a33f-14d4-4dc0-a924-e7cac241c773.png\">\r\n- [x] `npm run storybook:build` – Storybook has to be updated to work with webpack v5, more details at https://storybook.js.org/blog/storybook-for-webpack-5/\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n### Build for Gutenberg\r\n\r\n- `npm run dev`\r\n- `npm run build`\r\n\r\n### Build for Storybook\r\n\r\n- `npm run storybook:dev`\r\n- `npm run storybook:build`\r\n\r\n### Build for `@wordpress/scripts`\r\n\r\n```bash\r\nnpx wp-create-block example --no-wp-scripts\r\ncd example\r\n../node_modules/.bin/wp-script build\r\n```\r\n\r\n## Types of changes\r\nBreaking change for `@wordpress/scripts` users that provide their own config files for build tools.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54908",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54908",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54908.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54908.patch",
+			"merged_at": "2023-10-04T13:44:43Z"
+		},
+		"body": "Follow-up to #54494\r\nRelated to #54074\r\n\r\n## What?\r\n\r\nSince we switched the default pragma, this PR updates our documentation to clarify that plugin developers should use react directly instead of @wordpress/element  \r\n\r\nI also removed the internal WPComponent and WPElement types for clarity. It impacts a high number of files though.\r\n\r\n## Testing Instructions\r\n\r\nThis is mostly a documentation change, so nothing to test.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54908/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33817",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33817/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33817/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33817/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33817",
-		"id": 958115507,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAxNDQxNDI1",
-		"number": 33817,
-		"title": "Fix Safari 13 metaboxes from overlapping the content.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54906",
+		"id": 1917139479,
+		"node_id": "PR_kwDOBNHdeM5bbG-t",
+		"number": 54906,
+		"title": "Add e2e tests for filtering and searching patterns",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 671439711,
-				"node_id": "MDU6TGFiZWw2NzE0Mzk3MTE=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Browser%20Issues",
-				"name": "Browser Issues",
-				"color": "0052cc",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": null
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 738764878,
-				"node_id": "MDU6TGFiZWw3Mzg3NjQ4Nzg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Meta%20Boxes",
-				"name": "[Feature] Meta Boxes",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
 				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+				"login": "kevin940726",
+				"id": 7753001,
+				"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/kevin940726",
+				"html_url": "https://github.com/kevin940726",
+				"followers_url": "https://api.github.com/users/kevin940726/followers",
+				"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+				"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+				"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+				"repos_url": "https://api.github.com/users/kevin940726/repos",
+				"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6160,91 +6891,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 3,
-		"created_at": "2021-08-02T12:56:59Z",
-		"updated_at": "2021-08-05T06:43:02Z",
-		"closed_at": "2021-08-05T06:42:35Z",
-		"author_association": "CONTRIBUTOR",
+		"created_at": "2023-09-28T10:00:08Z",
+		"updated_at": "2023-10-02T03:38:11Z",
+		"closed_at": "2023-10-02T03:37:43Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33817",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33817",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33817.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33817.patch"
-		},
-		"body": "## Description\r\n\r\nFixes #33668.\r\n\r\nFlex is a delicate feature, especially when supporting a range of browsers. As it turns out, older versions of Safari have a pretty specific interpretation of how flex children should inherit the height of their parents. Which is to say, _they do if you don't provide a percentage height_. \r\n\r\nIt gets a bit more gnarly than that, but [this SO comment](https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent) elucidates a bit:\r\n\r\n> Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto.\r\n\r\nI have developed this patch while using Browserstack to test Safari 13, because I'm no longer on MacOS Catalina. And as best I can tell the flex rules we have in place caused a sequence of events there:\r\n\r\n- First it meant that the height of `.edit-post-visual-editor` was allowed to shrink, which happened when a metabox was present. This was fixed by disallowing shrinking (`flex: 1 0 auto;` instead of `flex: 1 1 auto;`) _and_ by removing `flex-basis: 100%;` (more on that in a second)\r\n- When that was fixed, it became clear that the child element, `.edit-post-visual-editor__content-area` no longer expanded to fill the void. _Presumably_ because when `flex-basis: 100%;` was removed, inheritance there no longer worked. This was fixed by removing the explicit `height: 100%;` inline style applied to that element, _and_ by allowing it to grow (`flex-grow: 1;`). \r\n\r\nTo summarize it to the best of my understanding: when we used percentages, the editing canvas didn't actually expand, causing the metaboxes to overlap it. By removing the percentages, I had to remove them from quite a few of the child items, and change those to rely in the intrinsic `align-items: stretch;` property they are given by `display: flex;` by default.\r\n\r\n## How has this been tested?\r\n\r\nIn my testing, this threads the needle and accomplishes what it needs to in modern browsers, Chrome, Firefox, Edge and Safari 14. It also makes it all work with Safar 13. I have not tested older yet, but presume it works the same.\r\n\r\nThe behavior to test is:\r\n\r\n- Test with and without the Custom Fields metabox present.\r\n- Create a new post with no content, and you should not see the dark gray color behind the editing canvas peek through.\r\n- Use the device preview dropdown and verify the sizes are correct. \r\n- Add a lot of content, and observe that the custom fields metabox keeps \"riding below the content\" as you press Enter. No overlap.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nThe Safari 13 issue that ships in trunk (big GIF):\r\n\r\nhttps://cldup.com/_zYngFvNTq.gif\r\n\r\nSafari 13 after this PR is applied:\r\n\r\n![saf 13 after](https://user-images.githubusercontent.com/1204802/127865217-0de80ec7-2906-4503-a4d8-6066bf7a6a75.gif)\r\n\r\nChrome after this PR applied (should be like before):\r\n\r\n![chrome](https://user-images.githubusercontent.com/1204802/127865407-7ad3eaef-b067-44b8-895f-e5208342ea55.gif)\r\n\r\n## Types of changes\r\n\r\nSince this is a pretty sensitive part of the editor layout code, it's important to test this pretty broadly, notably with those of you with access to Safari 13. But it's still important to ensure identical behavior on modern browsers as well.\r\n\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54906",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54906",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54906.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54906.patch",
+			"merged_at": "2023-10-02T03:37:43Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nAdd e2e tests for filtering and searching patterns.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nThis is a critical path of the patterns page.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nWrite tests 💪 .\r\n\r\nI also smuggled some quick fixes here that I'll explain in inline comments later 🙈 .\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\nCI should pass.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54906/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33800",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33800/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33800/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33800/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33800",
-		"id": 957359088,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNzk4ODA2",
-		"number": 33800,
-		"title": "Fix gutenberg_resolve_template() return documentation",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54905",
+		"id": 1917124523,
+		"node_id": "PR_kwDOBNHdeM5bbDsP",
+		"number": 54905,
+		"title": "Block Editor: Expose `getDuotoneFilter()` as private API",
 		"user": {
-			"login": "jeremyfelt",
-			"id": 286171,
-			"node_id": "MDQ6VXNlcjI4NjE3MQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/286171?v=4",
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jeremyfelt",
-			"html_url": "https://github.com/jeremyfelt",
-			"followers_url": "https://api.github.com/users/jeremyfelt/followers",
-			"following_url": "https://api.github.com/users/jeremyfelt/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jeremyfelt/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jeremyfelt/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jeremyfelt/subscriptions",
-			"organizations_url": "https://api.github.com/users/jeremyfelt/orgs",
-			"repos_url": "https://api.github.com/users/jeremyfelt/repos",
-			"events_url": "https://api.github.com/users/jeremyfelt/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jeremyfelt/received_events",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/block-editor"
 			},
 			{
-				"id": 1604715381,
-				"node_id": "MDU6TGFiZWwxNjA0NzE1Mzgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Full%20Site%20Editing",
-				"name": "[Feature] Full Site Editing",
-				"color": "fbca04",
+				"id": 1789345375,
+				"node_id": "MDU6TGFiZWwxNzg5MzQ1Mzc1",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Experimental",
+				"name": "[Type] Experimental",
+				"color": "4109a0",
 				"default": false,
-				"description": ""
+				"description": "Experimental feature or API."
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "tyxla",
+			"id": 8436925,
+			"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/tyxla",
+			"html_url": "https://github.com/tyxla",
+			"followers_url": "https://api.github.com/users/tyxla/followers",
+			"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+			"organizations_url": "https://api.github.com/users/tyxla/orgs",
+			"repos_url": "https://api.github.com/users/tyxla/repos",
+			"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tyxla/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "tyxla",
+				"id": 8436925,
+				"node_id": "MDQ6VXNlcjg0MzY5MjU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/8436925?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/tyxla",
+				"html_url": "https://github.com/tyxla",
+				"followers_url": "https://api.github.com/users/tyxla/followers",
+				"following_url": "https://api.github.com/users/tyxla/following{/other_user}",
+				"gists_url": "https://api.github.com/users/tyxla/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/tyxla/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/tyxla/subscriptions",
+				"organizations_url": "https://api.github.com/users/tyxla/orgs",
+				"repos_url": "https://api.github.com/users/tyxla/repos",
+				"events_url": "https://api.github.com/users/tyxla/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/tyxla/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6267,72 +7054,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-01T01:36:25Z",
-		"updated_at": "2021-08-02T17:01:25Z",
-		"closed_at": "2021-08-02T06:04:38Z",
+		"comments": 1,
+		"created_at": "2023-09-28T09:51:22Z",
+		"updated_at": "2023-09-28T12:46:32Z",
+		"closed_at": "2023-09-28T12:46:05Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33800",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33800",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33800.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33800.patch"
-		},
-		"body": "`gutenberg_resolve_template()` now returns a `WP_Block_Template` instance rather than an array of data.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54905",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54905",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54905.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54905.patch",
+			"merged_at": "2023-09-28T12:46:05Z"
+		},
+		"body": "## What?\r\nThis PR exposes the `getDuotoneFilter()` utility as a private API.\r\n\r\n## Why?\r\nIt was previously exposed as `__unstablePresetDuotoneFilter`, however since #52888 refactored `PresetDuotoneFilter` to `getDuotoneFilter()`, that was never exposed again. \r\n\r\nThe `__unstablePresetDuotoneFilter` was used in external consumers of the `@wordpress/block-editor` package and ideally, we'd like to be able to port to the new version.\r\n \r\n## How?\r\nWe're just adding `getDuotoneFilter()` to the list of private APIs of the package.\r\n\r\n## Testing Instructions\r\nAll checks should be green.\r\n\r\n### Testing Instructions for Keyboard\r\nNone.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nNone.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54905/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33799",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33799/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33799/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33799/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33799",
-		"id": 957356268,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNzk2MzI3",
-		"number": 33799,
-		"title": "Fix misspelling of \"queries\" in filter documentation",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54903",
+		"id": 1917050627,
+		"node_id": "PR_kwDOBNHdeM5bazod",
+		"number": 54903,
+		"title": "Tidying `CircularOptionPicker.Option`",
 		"user": {
-			"login": "jeremyfelt",
-			"id": 286171,
-			"node_id": "MDQ6VXNlcjI4NjE3MQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/286171?v=4",
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jeremyfelt",
-			"html_url": "https://github.com/jeremyfelt",
-			"followers_url": "https://api.github.com/users/jeremyfelt/followers",
-			"following_url": "https://api.github.com/users/jeremyfelt/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jeremyfelt/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jeremyfelt/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jeremyfelt/subscriptions",
-			"organizations_url": "https://api.github.com/users/jeremyfelt/orgs",
-			"repos_url": "https://api.github.com/users/jeremyfelt/repos",
-			"events_url": "https://api.github.com/users/jeremyfelt/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jeremyfelt/received_events",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
 			"type": "User",
 			"site_admin": false
 		},
-		"labels": [],
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "andrewhayward",
+				"id": 159848,
+				"node_id": "MDQ6VXNlcjE1OTg0OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/andrewhayward",
+				"html_url": "https://github.com/andrewhayward",
+				"followers_url": "https://api.github.com/users/andrewhayward/followers",
+				"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+				"repos_url": "https://api.github.com/users/andrewhayward/repos",
+				"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6355,91 +7217,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-08-01T01:21:27Z",
-		"updated_at": "2021-08-02T17:01:51Z",
-		"closed_at": "2021-08-02T03:22:39Z",
-		"author_association": "MEMBER",
+		"comments": 4,
+		"created_at": "2023-09-28T09:08:45Z",
+		"updated_at": "2023-09-29T09:52:05Z",
+		"closed_at": "2023-09-28T19:54:40Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33799",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33799",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33799.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33799.patch"
-		},
-		"body": "## Description\r\n\r\nThis fixes an accidental misspelling in 3 places.\r\n\r\n\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54903",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54903",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54903.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54903.patch",
+			"merged_at": "2023-09-28T19:54:40Z"
+		},
+		"body": "## What?\r\nThis PR removes some now-defunct styling workarounds from `CircularOptionPicker.Option`, and normalises style application between it and `Button`.\r\n\r\n## Why?\r\nBefore `Button` was refactored in #54740, it was necessary to explicitly add an `is-pressed` class to the `CircularOptionPicker.Option`, to avoid using `isPressed` which automatically added `aria-pressed`. With those changes, and the refactor here, `is-pressed` is no longer necessary as a class for `CircularOptionPicker.Option`, so the workaround isn't necessary.\r\n\r\n## How?\r\nThe dependency on the `is-pressed` class is removed from `CircularOptionPicker.Option` instead using the `aria-selected`/`aria-pressed` attribute directly.\r\n\r\n`aria-selected` is also added to `Button` to ensure styling is normalised for other consumers.\r\n\r\n## Testing Instructions\r\nThere should be no visual changes, either in `Button` or `CircularOptionPicker`. Both of these components can be checked in StoryBook.\r\n\r\n### Testing Instructions for Keyboard\r\nThere should be no interaction changes to either `Button` or `CircularOptionPicker`.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54903/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33796",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33796/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33796/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33796/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33796",
-		"id": 957288624,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNzQzNTQx",
-		"number": 33796,
-		"title": "Add spaces in add_theme_support docs code",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54901",
+		"id": 1916846180,
+		"node_id": "PR_kwDOBNHdeM5baHZB",
+		"number": 54901,
+		"title": "Make `editor.getBlocks` to return only testing-related properties",
 		"user": {
-			"login": "kapilpaul",
-			"id": 9963909,
-			"node_id": "MDQ6VXNlcjk5NjM5MDk=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/9963909?v=4",
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/kapilpaul",
-			"html_url": "https://github.com/kapilpaul",
-			"followers_url": "https://api.github.com/users/kapilpaul/followers",
-			"following_url": "https://api.github.com/users/kapilpaul/following{/other_user}",
-			"gists_url": "https://api.github.com/users/kapilpaul/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/kapilpaul/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/kapilpaul/subscriptions",
-			"organizations_url": "https://api.github.com/users/kapilpaul/orgs",
-			"repos_url": "https://api.github.com/users/kapilpaul/repos",
-			"events_url": "https://api.github.com/users/kapilpaul/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/kapilpaul/received_events",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1388646432,
-				"node_id": "MDU6TGFiZWwxMzg4NjQ2NDMy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/First-time%20Contributor",
-				"name": "First-time Contributor",
-				"color": "a0f762",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "Pull request opened by a first-time contributor to Gutenberg repository"
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "kevin940726",
+				"id": 7753001,
+				"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/kevin940726",
+				"html_url": "https://github.com/kevin940726",
+				"followers_url": "https://api.github.com/users/kevin940726/followers",
+				"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+				"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+				"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+				"repos_url": "https://api.github.com/users/kevin940726/repos",
+				"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6462,229 +7371,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-31T17:34:13Z",
-		"updated_at": "2021-08-02T05:38:52Z",
-		"closed_at": "2021-08-02T05:36:51Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 0,
+		"created_at": "2023-09-28T07:02:22Z",
+		"updated_at": "2023-09-28T08:45:12Z",
+		"closed_at": "2023-09-28T08:44:41Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33796",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33796",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33796.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33796.patch"
-		},
-		"body": "## Description\r\nAdded missing space in theme support docs\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nUpdated the documentation\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54901",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54901",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54901.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54901.patch",
+			"merged_at": "2023-09-28T08:44:41Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nAs suggested by @ellatrix in a private conversation some time ago, we probably don't need `getBlocks` to return `clientId` and other properties for testing purposes.\r\n\r\nA recent encounter is https://github.com/WordPress/gutenberg/pull/54892#discussion_r1339563443.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nThis is going to make `editor.getBlocks` slightly more helpful in some situations that we can just compare using `toEqual` rather than having to get rid of `clientId` first.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nRecursively transform the blocks before returning. A `full` option can be passed if the users want to retain the previous behavior.\r\n\r\nAnother idea would be to allow comparing blocks with consideration of the default attributes' values. That would be probably be better suited in a different PR though.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\nCI should pass.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54901/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33788",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33788/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33788/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33788/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33788",
-		"id": 957068842,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNTY5NTA4",
-		"number": 33788,
-		"title": "[RNMobile] Fix Xcode Demo app build",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54900",
+		"id": 1916793917,
+		"node_id": "PR_kwDOBNHdeM5bZ8P-",
+		"number": 54900,
+		"title": "List View: Fix performance issue when selecting all blocks",
 		"user": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596512821,
-				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
-				"name": "[Type] Build Tooling",
-				"color": "111111",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 1123763869,
+				"node_id": "MDU6TGFiZWwxMTIzNzYzODY5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20List%20View",
+				"name": "[Feature] List View",
+				"color": "fbca04",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Menu item in the top toolbar to select blocks from a list of links."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "dcalhoun",
-				"id": 438664,
-				"node_id": "MDQ6VXNlcjQzODY2NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"login": "andrewserong",
+				"id": 14988353,
+				"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/dcalhoun",
-				"html_url": "https://github.com/dcalhoun",
-				"followers_url": "https://api.github.com/users/dcalhoun/followers",
-				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-				"repos_url": "https://api.github.com/users/dcalhoun/repos",
-				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"url": "https://api.github.com/users/andrewserong",
+				"html_url": "https://github.com/andrewserong",
+				"followers_url": "https://api.github.com/users/andrewserong/followers",
+				"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+				"repos_url": "https://api.github.com/users/andrewserong/repos",
+				"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
-			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
-			"closed_at": null
-		},
-		"comments": 1,
-		"created_at": "2021-07-30T21:26:38Z",
-		"updated_at": "2021-08-09T16:07:06Z",
-		"closed_at": "2021-08-09T16:06:39Z",
-		"author_association": "MEMBER",
-		"active_lock_reason": null,
-		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33788",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33788",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33788.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33788.patch"
-		},
-		"body": "## Description\r\nReact Native added a `PROJECT_ROOT` [configuration to better support monorepos](https://github.com/facebook/react-native/commit/9ccde378b6e6379df61f9d968be6346ca6be7ead). Prior to setting the `PROJECT_ROOT` configuration, building the Demo app in Xcode threw errors related to the inability to find the entry `index.js` file, as it was searching in the root directory.\r\n\r\n<details><summary>Error Text</summary>\r\n\r\n```\r\nerror The resource `/Users/username/Sites/a8c/gutenberg/index.js` was not found.\r\nError: The resource `/Users/username/Sites/a8c/gutenberg/index.js` was not found.\r\n    at /Users/username/Sites/a8c/gutenberg/node_modules/metro/src/IncrementalBundler.js:457:26\r\n    at gotStat (node:fs:2627:21)\r\n    at FSReqCallback.oncomplete (node:fs:195:21)\r\ninfo Run CLI with --verbose flag for more details.\r\nCommand PhaseScriptExecution failed with a nonzero exit code\r\n```\r\n\r\n</details>\r\n\r\n<details><summary>Error Screenshot</summary>\r\n\r\n<img width=\"1552\" alt=\"xcode-demo-app-error\" src=\"https://user-images.githubusercontent.com/438664/127712716-eb2fd3a3-0444-45be-a4d5-8ada20d22579.png\">\r\n\r\n</details>\r\n\r\n## How has this been tested?\r\n1. Check out `trunk` branch. \r\n2. `npm run native start:reset`\r\n3. Launch Xcode and build the Demo app to a physical device. \r\n4. ⚠️ **Unexpected:** Notice the build failure. \r\n5. Check out this PR branch. \r\n6. `npm run native start:reset`\r\n7. Launch Xcode and build the Demo app to a physical device. \r\n8. ℹ️ **Expected:** The build succeeds and runs on the device. \r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
-	},
-	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33786",
-		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33786/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33786/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33786/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33786",
-		"id": 956992028,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNTA0MTcw",
-		"number": 33786,
-		"title": "GitHub Templates: Format bug report template",
-		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 1032028862,
-				"node_id": "MDU6TGFiZWwxMDMyMDI4ODYy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Project%20Management",
-				"name": "[Type] Project Management",
-				"color": "e55ead",
-				"default": false,
-				"description": "Meta-issues related to project management of Gutenberg"
-			}
-		],
-		"state": "closed",
-		"locked": false,
-		"assignee": null,
-		"assignees": [],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6707,69 +7534,76 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-30T19:00:14Z",
-		"updated_at": "2021-08-02T10:12:55Z",
-		"closed_at": "2021-08-02T04:01:02Z",
+		"comments": 11,
+		"created_at": "2023-09-28T06:21:03Z",
+		"updated_at": "2023-10-04T09:38:04Z",
+		"closed_at": "2023-10-04T02:21:32Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33786",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33786",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33786.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33786.patch"
-		},
-		"body": "Follow-up to #33761\r\n\r\nSeem like the bug report template never went trough prettier. Running `npm run format` adds the correct spacing to the .yml file.\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54900",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54900",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54900.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54900.patch",
+			"merged_at": "2023-10-04T02:21:32Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nPart of: https://github.com/WordPress/gutenberg/issues/49563\r\n\r\nFix a performance issue with the List View when selecting all blocks within the editor canvas, with the list view open. For long posts or pages, the current performance issue means it will likely feel broken as it can take many seconds to apply the selection.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n<!--\r\nCurrently, when a user goes to select all blocks from the editor canvas (press CMD+A a couple of times from within the editor canvas), if the list view is open, it can be very slow to update on a long post or page. This is because if the post is long enough to invoke the windowing logic for the list view, then currently changing the block selection will cause the non-displayed list view items to all be swapped out for real list view items, resulting in many hundreds of components being mounted.\r\n\r\nThe existing rule to render \"real\" list view items for selected blocks even if they're outside the list view window was introduced back in https://github.com/WordPress/gutenberg/pull/46895. The reason it was introduced was so that if a user selects a single block that is outside the current window (e.g. if the list view is scrolled to the top and a user selects a nested block at the very bottom of the post) then the \"scroll into view\" behaviour still needs to fire. This can only occur if the real list view item is used.\r\n\r\nHowever, we don't need _all_ selected blocks to be rendered in order for that to work, just the one will do. Switching over to only rendering a selected block if it's outside the window if it's the only selected block, appears to do the trick. -->\r\n\r\nThere are two related performance issues on `trunk` that affect this behaviour:\r\n\r\n* Currently all selected blocks are rendered as \"real\" list view items, bypassing the windowing logic, which means that there are unnecessary renders / mounts of selected blocks.\r\n* The block item (`ListViewBlock`) is currently responsible for directing focus to it when the list view is mounted. Because it occurs at the block item level, it is possible for dozens of calls to competing `cellRef.current.focus()` to occur at once, causing the editor to slow down until they are all complete.\r\n\r\nThe result of these two issues interacting is that when you select all blocks with the list view open, (or go to open the list view after selecting all blocks), the list view slows to a crawl until all the `.focus()` calls have completed.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n1. Only render list view items for selected blocks that exist outside the current windowing logic if it is the first of the block selection. This prevents a large amount of re-rendering / re-mounting when a user goes to select all blocks.\r\n2. Move the focus logic up to the list view root, so that it is only fired once, irrespective of the number of list view items rendered. To do so, I've moved the existing logic for focusing a list view item to a shared function in `utils` (the logic was introduced back in https://github.com/WordPress/gutenberg/issues/50422).\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Add a post or page with heaps of blocks (e.g. for testing that makes all this clear, add > 150 paragraphs)\r\n3. Ensure the list view is open\r\n4. Focus somewhere within a block in the editor canvas\r\n5. Press CMD+A once to select all of that block. Press CMD+A again to select all blocks (if you're in a nested block, it'll just select the parent — keep pressing to eventually select all blocks, one level of hierarchy at a time)\r\n6. If you're on `trunk`, it'll take a _long_ time to select all blocks in a long post or page\r\n7. With this PR applied, it should take under a second to select all blocks. Maybe not snappy, but fast enough that it doesn't feel broken\r\n8. Ensure scrolling up and down the list view remains performant (there'll still be a slight delay rendering items, caused by the windowing logic, but there shouldn't be any big slowdowns)\r\n\r\nAssuming all this is working okay for this PR, we then need to make sure that we haven't broken the scroll into view logic when single block selection changes (introduced in https://github.com/WordPress/gutenberg/pull/46895). Follow the testing instructions from that PR:\r\n\r\n> In a really long post or page, with the list view opened, scroll the editor canvas to far down the page or post and select a block outside of the currently visible area within the list view. The list view should scroll the selected block into view.\r\n> To test the windowed area versus the non-windowed area, add a very large number of blocks (e.g. 60+) and try selecting from the very top block to the very bottom block in the list, via the editor canvas.\r\n\r\nFinally, double check that focus still appears to be correct when deleting blocks via the list view (with an item in the list view focused, press the Backspace key).\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nNote: the List View must be open to test out this performance issue.\r\n\r\nThe following screengrabs are from a post containing 203 blocks. The first press of CMD+A works quickly to select the individual block. It's the second press of CMD+A to select all blocks that's the problem here!\r\n\r\n### Before (takes 8 seconds or so to select all)\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/14988353/700f8d73-4194-4f44-b635-f5b08604b3c4\r\n\r\n### After (takes < 1 second to select all)\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/14988353/9cf84750-b9f4-45e4-9267-ee9e3ec562ac\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54900/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33785",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33785/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33785/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33785/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33785",
-		"id": 956986302,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNDk5Mjc0",
-		"number": 33785,
-		"title": "Readable JS assets Plugin: Fix webpack 5 support",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54898",
+		"id": 1916602785,
+		"node_id": "PR_kwDOBNHdeM5bZSyn",
+		"number": 54898,
+		"title": "Mobile Release v1.105.0",
 		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
+			"login": "derekblank",
+			"id": 643285,
+			"node_id": "MDQ6VXNlcjY0MzI4NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/643285?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
+			"url": "https://api.github.com/users/derekblank",
+			"html_url": "https://github.com/derekblank",
+			"followers_url": "https://api.github.com/users/derekblank/followers",
+			"following_url": "https://api.github.com/users/derekblank/following{/other_user}",
+			"gists_url": "https://api.github.com/users/derekblank/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/derekblank/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/derekblank/subscriptions",
+			"organizations_url": "https://api.github.com/users/derekblank/orgs",
+			"repos_url": "https://api.github.com/users/derekblank/repos",
+			"events_url": "https://api.github.com/users/derekblank/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/derekblank/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
-			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
 			{
 				"id": 596512821,
 				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
@@ -6777,16 +7611,16 @@
 				"name": "[Type] Build Tooling",
 				"color": "111111",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs related to build tooling"
 			},
 			{
-				"id": 3222328876,
-				"node_id": "MDU6TGFiZWwzMjIyMzI4ODc2",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Readable%20JS%20Assets%20Webpack%20Plugin",
-				"name": "[Package] Readable JS Assets Webpack Plugin",
-				"color": "ed2572",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
 				"default": false,
-				"description": "/packages/readable-js-assets-webpack-plugin"
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
 			}
 		],
 		"state": "closed",
@@ -6794,13 +7628,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6823,68 +7657,84 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 1,
-		"created_at": "2021-07-30T18:50:05Z",
-		"updated_at": "2021-08-02T14:50:22Z",
-		"closed_at": "2021-08-02T14:49:37Z",
-		"author_association": "CONTRIBUTOR",
+		"created_at": "2023-09-28T02:28:14Z",
+		"updated_at": "2023-09-28T14:44:47Z",
+		"closed_at": "2023-09-28T14:44:14Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33785",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33785",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33785.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33785.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nIn webpack v5 `Compilation.chunks` and `Chunk.files` changed from arrays to sets. See https://webpack.js.org/blog/2020-10-10-webpack-5-release/#arrays-to-sets\r\n\r\nSupport both v4 and v5 by making sure we work with arrays (converting the set to array for v5) when generating the files list.\r\n\r\n## How has this been tested?\r\nTested the plugin both in webpack v4 and v5.\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n## Types of changes\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54898",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54898",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54898.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54898.patch",
+			"merged_at": "2023-09-28T14:44:14Z"
+		},
+		"body": "## Description\nRelease 1.105.0 of the react-native-editor and Gutenberg-Mobile.\n\nFor more information about this release and testing instructions, please see the related Gutenberg-Mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/6243\n\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54898/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33782",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33782/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33782/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33782/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33782",
-		"id": 956872839,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwNDAzNDI1",
-		"number": 33782,
-		"title": "[RNMobile] Fix crash caused by column block with padding having paragraph as a child",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54897",
+		"id": 1916594809,
+		"node_id": "PR_kwDOBNHdeM5bZRIM",
+		"number": 54897,
+		"title": "[RNMobile] Update mobile iOS Ruby version to from 2.7.4 to 3.2.2.",
 		"user": {
-			"login": "ceyhun",
-			"id": 1845482,
-			"node_id": "MDQ6VXNlcjE4NDU0ODI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1845482?v=4",
+			"login": "derekblank",
+			"id": 643285,
+			"node_id": "MDQ6VXNlcjY0MzI4NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/643285?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ceyhun",
-			"html_url": "https://github.com/ceyhun",
-			"followers_url": "https://api.github.com/users/ceyhun/followers",
-			"following_url": "https://api.github.com/users/ceyhun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ceyhun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ceyhun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ceyhun/subscriptions",
-			"organizations_url": "https://api.github.com/users/ceyhun/orgs",
-			"repos_url": "https://api.github.com/users/ceyhun/repos",
-			"events_url": "https://api.github.com/users/ceyhun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ceyhun/received_events",
+			"url": "https://api.github.com/users/derekblank",
+			"html_url": "https://github.com/derekblank",
+			"followers_url": "https://api.github.com/users/derekblank/followers",
+			"following_url": "https://api.github.com/users/derekblank/following{/other_user}",
+			"gists_url": "https://api.github.com/users/derekblank/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/derekblank/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/derekblank/subscriptions",
+			"organizations_url": "https://api.github.com/users/derekblank/orgs",
+			"repos_url": "https://api.github.com/users/derekblank/repos",
+			"events_url": "https://api.github.com/users/derekblank/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/derekblank/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 531680824,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Task",
+				"name": "[Type] Task",
+				"color": "fef2c0",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs that have been broken down into an individual action to take"
 			},
 			{
 				"id": 982506020,
@@ -6894,6 +7744,15 @@
 				"color": "a3ef7a",
 				"default": false,
 				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
 			}
 		],
 		"state": "closed",
@@ -6901,13 +7760,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -6930,131 +7789,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-07-30T15:50:03Z",
-		"updated_at": "2021-08-03T09:18:47Z",
-		"closed_at": "2021-08-03T09:18:16Z",
+		"comments": 5,
+		"created_at": "2023-09-28T02:15:11Z",
+		"updated_at": "2023-10-04T03:12:37Z",
+		"closed_at": "2023-10-04T03:12:13Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33782",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33782",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33782.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33782.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nFixes https://github.com/wordpress-mobile/WordPress-Android/issues/15016.\r\n\r\nColumn block has [a new feature](https://github.com/WordPress/gutenberg/pull/31778), where we can add paddings to a column block and it passes these to its child as `wrapperStyles`. These paddings can have units of `%` as well as `px`, `em`, etc. Since paragraph block on mobile doesn't yet support all of those units, the app crashes during layout. \r\n\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nOn web, using a self-hosted or atomic site with latest Gutenberg version.\r\n1. Add a columns block\r\n1. Select 100 to add a single column\r\n1. Add a paragraph block inside this column and add some text\r\n1. Select back the column\r\n1. Add some padding from sidebar -> `Spacing` -> `Padding`\r\n1. Save the post as draft and open from Mobile Gutenberg\r\n\r\n<img width=\"276\" alt=\"column-settings\" src=\"https://user-images.githubusercontent.com/1845482/127677397-de6d9f79-5efa-499d-815d-57661f7a8071.png\">\r\n\r\nAlternatively you can use this HTML in the Gutenberg demo app by switching to HTML mode, pasting it and switching back to Visual mode to test:\r\n\r\n```\r\n<!-- wp:columns -->\r\n<div class=\"wp-block-columns\"><!-- wp:column {\"style\":{\"spacing\":{\"padding\":{\"top\":\"5px\",\"right\":\"5px\",\"bottom\":\"5px\",\"left\":\"5px\"}}}} -->\r\n<div class=\"wp-block-column\" style=\"padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px\"><!-- wp:paragraph -->\r\n<p>Test</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:column --></div>\r\n<!-- /wp:columns -->\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nBefore | After\r\n-- | -- \r\n<img width=\"300\" src=\"https://user-images.githubusercontent.com/1845482/127371989-4e661df9-672f-4b8d-9640-cab8162d98e5.png\">|<img width=\"300\" src=\"https://user-images.githubusercontent.com/1845482/127678357-dd079032-73f8-4fa4-b1f1-24a86fe10947.png\">\r\n\r\n\r\n\r\n\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nBug fix (non-breaking change which fixes an issue)\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54897",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54897",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54897.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54897.patch",
+			"merged_at": "2023-10-04T03:12:13Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nBumps the iOS Ruby version to 3.2.2.\r\n\r\nRelated:\r\n* https://github.com/wordpress-mobile/gutenberg-mobile/pull/6180\r\n\r\n## Why?\r\nThe WPiOS Ruby version was updated to 3.2.2 in https://github.com/wordpress-mobile/WordPress-iOS/pull/21498.\r\n\r\n## How?\r\nUpdates `packages/react-native-editor/ios/.ruby-version` to 3.2.2.\r\n\r\n## Testing Instructions\r\n`rbenv install 3.2.2` should run successfully.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54897/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33781",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33781/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33781/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33781/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33781",
-		"id": 956812984,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwMzUwNTc1",
-		"number": 33781,
-		"title": "[docs] fix: `supports.color.gradients` is plural",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54894",
+		"id": 1916537313,
+		"node_id": "PR_kwDOBNHdeM5bZFOt",
+		"number": 54894,
+		"title": "Patterns: Remove category description in inserter panel",
 		"user": {
-			"login": "chrisvanpatten",
-			"id": 1231306,
-			"node_id": "MDQ6VXNlcjEyMzEzMDY=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1231306?v=4",
+			"login": "aaronrobertshaw",
+			"id": 60436221,
+			"node_id": "MDQ6VXNlcjYwNDM2MjIx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/chrisvanpatten",
-			"html_url": "https://github.com/chrisvanpatten",
-			"followers_url": "https://api.github.com/users/chrisvanpatten/followers",
-			"following_url": "https://api.github.com/users/chrisvanpatten/following{/other_user}",
-			"gists_url": "https://api.github.com/users/chrisvanpatten/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/chrisvanpatten/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/chrisvanpatten/subscriptions",
-			"organizations_url": "https://api.github.com/users/chrisvanpatten/orgs",
-			"repos_url": "https://api.github.com/users/chrisvanpatten/repos",
-			"events_url": "https://api.github.com/users/chrisvanpatten/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/chrisvanpatten/received_events",
+			"url": "https://api.github.com/users/aaronrobertshaw",
+			"html_url": "https://github.com/aaronrobertshaw",
+			"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
+			"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
+			"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
+			"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
+			"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
+			"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": ""
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 2551400612,
-				"node_id": "MDU6TGFiZWwyNTUxNDAwNjEy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/developer-docs",
-				"name": "developer-docs",
-				"color": "1d76db",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
+				"color": "fbca04",
 				"default": false,
-				"description": "Issues that impact the block editor developer documentation site"
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "chrisvanpatten",
-			"id": 1231306,
-			"node_id": "MDQ6VXNlcjEyMzEzMDY=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1231306?v=4",
+			"login": "aaronrobertshaw",
+			"id": 60436221,
+			"node_id": "MDQ6VXNlcjYwNDM2MjIx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/chrisvanpatten",
-			"html_url": "https://github.com/chrisvanpatten",
-			"followers_url": "https://api.github.com/users/chrisvanpatten/followers",
-			"following_url": "https://api.github.com/users/chrisvanpatten/following{/other_user}",
-			"gists_url": "https://api.github.com/users/chrisvanpatten/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/chrisvanpatten/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/chrisvanpatten/subscriptions",
-			"organizations_url": "https://api.github.com/users/chrisvanpatten/orgs",
-			"repos_url": "https://api.github.com/users/chrisvanpatten/repos",
-			"events_url": "https://api.github.com/users/chrisvanpatten/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/chrisvanpatten/received_events",
+			"url": "https://api.github.com/users/aaronrobertshaw",
+			"html_url": "https://github.com/aaronrobertshaw",
+			"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
+			"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
+			"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
+			"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
+			"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
+			"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "chrisvanpatten",
-				"id": 1231306,
-				"node_id": "MDQ6VXNlcjEyMzEzMDY=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1231306?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/chrisvanpatten",
-				"html_url": "https://github.com/chrisvanpatten",
-				"followers_url": "https://api.github.com/users/chrisvanpatten/followers",
-				"following_url": "https://api.github.com/users/chrisvanpatten/following{/other_user}",
-				"gists_url": "https://api.github.com/users/chrisvanpatten/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/chrisvanpatten/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/chrisvanpatten/subscriptions",
-				"organizations_url": "https://api.github.com/users/chrisvanpatten/orgs",
-				"repos_url": "https://api.github.com/users/chrisvanpatten/repos",
-				"events_url": "https://api.github.com/users/chrisvanpatten/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/chrisvanpatten/received_events",
+				"login": "aaronrobertshaw",
+				"id": 60436221,
+				"node_id": "MDQ6VXNlcjYwNDM2MjIx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/aaronrobertshaw",
+				"html_url": "https://github.com/aaronrobertshaw",
+				"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
+				"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
+				"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
+				"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
+				"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
+				"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -7077,92 +7952,148 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-30T14:47:40Z",
-		"updated_at": "2021-07-30T16:23:33Z",
-		"closed_at": "2021-07-30T16:22:36Z",
-		"author_association": "MEMBER",
+		"comments": 4,
+		"created_at": "2023-09-28T00:39:53Z",
+		"updated_at": "2023-10-05T11:16:48Z",
+		"closed_at": "2023-10-02T16:55:19Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33781",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33781",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33781.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33781.patch"
-		},
-		"body": "Small typo in the block supports documentation; `supports.color.gradient` should be `supports.color.gradients` as plural.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54894",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54894",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54894.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54894.patch",
+			"merged_at": "2023-10-02T16:55:19Z"
+		},
+		"body": "Fixes: https://github.com/WordPress/gutenberg/issues/54874\r\n\r\n## What?\r\n\r\nRemoves pattern category description from inserter panel.\r\n\r\n## Why?\r\n\r\nNot all pattern categories have a description and those that do have varying length descriptions leading to additional variance in the UI.\r\n\r\n## How?\r\n\r\nRemove rendering of the category description and tweak spacing between the panel header and patterns list. \r\n\r\n**Note: This spacing will likely need tweaking further but the header and pattern list padding now total 32px between them matching the padding at the bottom of the pattern list**\r\n\r\n## Testing Instructions\r\n\r\n1. Open the post editor\r\n2. Open the Block Inserter and select the patterns tab\r\n3. Navigate through various pattern categories and ensure no category descriptions are shown\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n<img width=\"298\" alt=\"Screenshot 2023-09-28 at 10 33 01 am\" src=\"https://github.com/WordPress/gutenberg/assets/60436221/9f23a7d6-6572-43fc-aed5-6b58a73ff571\"><img width=\"299\" alt=\"Screenshot 2023-09-28 at 10 33 20 am\" src=\"https://github.com/WordPress/gutenberg/assets/60436221/a99e959d-3bbb-4861-9cc1-0bb04bae6a30\">\r\n<img width=\"297\" alt=\"Screenshot 2023-09-28 at 10 32 42 am\" src=\"https://github.com/WordPress/gutenberg/assets/60436221/10f71217-3a72-4389-bc48-3e2bb4f4ca4d\"><img width=\"300\" alt=\"Screenshot 2023-09-28 at 10 32 24 am\" src=\"https://github.com/WordPress/gutenberg/assets/60436221/a59c7159-0d9c-427f-8d4e-3c3b56ac0af7\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54894/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33780",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33780/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33780/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33780/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33780",
-		"id": 956788321,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwMzI5OTY1",
-		"number": 33780,
-		"title": "fix: broken link in documentation to block support mechanism",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54892",
+		"id": 1916429821,
+		"node_id": "PR_kwDOBNHdeM5bYtvS",
+		"number": 54892,
+		"title": "Patterns: add a new spec for for adding an unsynced pattern",
 		"user": {
-			"login": "RhnSharma",
-			"id": 22129063,
-			"node_id": "MDQ6VXNlcjIyMTI5MDYz",
-			"avatar_url": "https://avatars.githubusercontent.com/u/22129063?v=4",
+			"login": "glendaviesnz",
+			"id": 3629020,
+			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/RhnSharma",
-			"html_url": "https://github.com/RhnSharma",
-			"followers_url": "https://api.github.com/users/RhnSharma/followers",
-			"following_url": "https://api.github.com/users/RhnSharma/following{/other_user}",
-			"gists_url": "https://api.github.com/users/RhnSharma/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/RhnSharma/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/RhnSharma/subscriptions",
-			"organizations_url": "https://api.github.com/users/RhnSharma/orgs",
-			"repos_url": "https://api.github.com/users/RhnSharma/repos",
-			"events_url": "https://api.github.com/users/RhnSharma/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/RhnSharma/received_events",
+			"url": "https://api.github.com/users/glendaviesnz",
+			"html_url": "https://github.com/glendaviesnz",
+			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
+				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
+		"assignee": {
+			"login": "glendaviesnz",
+			"id": 3629020,
+			"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/glendaviesnz",
+			"html_url": "https://github.com/glendaviesnz",
+			"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+			"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+			"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+			"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+			"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+			"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "glendaviesnz",
+				"id": 3629020,
+				"node_id": "MDQ6VXNlcjM2MjkwMjA=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/3629020?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/glendaviesnz",
+				"html_url": "https://github.com/glendaviesnz",
+				"followers_url": "https://api.github.com/users/glendaviesnz/followers",
+				"following_url": "https://api.github.com/users/glendaviesnz/following{/other_user}",
+				"gists_url": "https://api.github.com/users/glendaviesnz/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/glendaviesnz/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/glendaviesnz/subscriptions",
+				"organizations_url": "https://api.github.com/users/glendaviesnz/orgs",
+				"repos_url": "https://api.github.com/users/glendaviesnz/repos",
+				"events_url": "https://api.github.com/users/glendaviesnz/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/glendaviesnz/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
 				"id": 41898282,
@@ -7184,39 +8115,169 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-30T14:17:38Z",
-		"updated_at": "2021-08-04T09:15:30Z",
-		"closed_at": "2021-08-04T09:14:57Z",
+		"comments": 2,
+		"created_at": "2023-09-27T22:33:16Z",
+		"updated_at": "2023-09-28T07:55:44Z",
+		"closed_at": "2023-09-28T07:55:16Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33780",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33780",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33780.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33780.patch"
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54892",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54892",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54892.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54892.patch",
+			"merged_at": "2023-09-28T07:55:16Z"
+		},
+		"body": "## What?\r\nAdds an e2e spec for adding an unsynced pattern in the post editor.\r\n\r\n## Why?\r\nTo try and guard against future regressions like https://github.com/WordPress/gutenberg/pull/54804.\r\n\r\n## How?\r\nAdds a new spec that goes through the flow of adding an unsynced pattern in the post editor, checking that it is not mistakingly added as synced, and checking that it is then available in the inserter, and gets inserted as a plain block.\r\n\r\n## Testing Instructions\r\n\r\n- Check that CI tests pass\r\n- Check test locally with `npm run test:e2e:playwright specs/editor/various/unsynced-pattern.spec.js`\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54892/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54890",
+		"id": 1916234211,
+		"node_id": "PR_kwDOBNHdeM5bYCMh",
+		"number": 54890,
+		"title": "Update versions in WP for 6.4",
+		"user": {
+			"login": "annezazu",
+			"id": 26996883,
+			"node_id": "MDQ6VXNlcjI2OTk2ODgz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/26996883?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/annezazu",
+			"html_url": "https://github.com/annezazu",
+			"followers_url": "https://api.github.com/users/annezazu/followers",
+			"following_url": "https://api.github.com/users/annezazu/following{/other_user}",
+			"gists_url": "https://api.github.com/users/annezazu/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/annezazu/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/annezazu/subscriptions",
+			"organizations_url": "https://api.github.com/users/annezazu/orgs",
+			"repos_url": "https://api.github.com/users/annezazu/repos",
+			"events_url": "https://api.github.com/users/annezazu/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/annezazu/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
+				"default": false,
+				"description": "Documentation for developers"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
 		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nFixes #33778\r\nFix a broken link to block support mechanism in `theme-json.md`.\r\n\r\nHi @Mamaduka, how does this look?\r\nLet me know if this needs any changes.\r\nThanks\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n Bug fix (non-breaking change which fixes an issue) \r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+		"comments": 3,
+		"created_at": "2023-09-27T20:05:19Z",
+		"updated_at": "2023-10-02T14:43:40Z",
+		"closed_at": "2023-10-02T07:53:27Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54890",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54890",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54890.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54890.patch",
+			"merged_at": "2023-10-02T07:53:27Z"
+		},
+		"body": "Quick update to the Versions in WP doc for 6.4 with beta 1 out in the world.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54890/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33779",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33779/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33779/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33779/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33779",
-		"id": 956687808,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwMjQzMzA1",
-		"number": 33779,
-		"title": "URL Details: Avoid PHP notice when parsing protocol-relative icon URLs",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54887",
+		"id": 1916148734,
+		"node_id": "PR_kwDOBNHdeM5bXvkS",
+		"number": 54887,
+		"title": "Block Editor: Update strings in blocks 'RenameModal' component",
 		"user": {
 			"login": "Mamaduka",
 			"id": 240569,
@@ -7239,22 +8300,31 @@
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 596965480,
+				"node_id": "MDU6TGFiZWw1OTY5NjU0ODA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Internationalization%20(i18n)",
+				"name": "Internationalization (i18n)",
+				"color": "e881e2",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "Issues or PRs related to internationalization efforts"
+			},
+			{
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/block-editor"
 			}
 		],
 		"state": "closed",
@@ -7302,13 +8372,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -7331,122 +8401,116 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-30T12:09:09Z",
-		"updated_at": "2021-07-30T14:14:09Z",
-		"closed_at": "2021-07-30T14:13:37Z",
+		"comments": 2,
+		"created_at": "2023-09-27T18:58:27Z",
+		"updated_at": "2023-09-29T12:05:00Z",
+		"closed_at": "2023-09-27T20:13:04Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33779",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33779",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33779.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33779.patch"
-		},
-		"body": "## Description\r\nSites might use protocol-relative URLs for icons. When a similar URL is parsed with `parse_url`, it doesn't return schema and triggered PHP notice.\r\n\r\nExample: https://3v4l.org/SFEiZ\r\n\r\n## How has this been tested?\r\n1. Create a post.\r\n2. Add a paragraph with a link to `https://twitter.com/`\r\n3. Display rich URL preview.\r\n4. WP shouldn't log the `PHP Notice:  Undefined index: scheme` message.\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54887",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54887",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54887.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54887.patch",
+			"merged_at": "2023-09-27T20:13:04Z"
+		},
+		"body": "## What?\r\nFixes #54872.\r\n\r\nPR simplifies the action announcement message text in blocks `RenameModal` component. The submit action only resolves in two states - \"reset\" and \"changed,\" let's make them part of the message.\r\n\r\n## Why?\r\nTo make translations easier.\r\n\r\n## Testing Instructions\r\nAll CI checks pass. There are no changes in component behavior.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54887/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33777",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33777/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33777/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33777/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33777",
-		"id": 956555230,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NzAwMTMwNjkz",
-		"number": 33777,
-		"title": "Enable ability to remove a link from the Nav Link block in the Nav Block",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54886",
+		"id": 1916142985,
+		"node_id": "PR_kwDOBNHdeM5bXuTW",
+		"number": 54886,
+		"title": "Font Library: Changed the OTF mime type expected value to be what PHP returns",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "pbking",
+			"id": 146530,
+			"node_id": "MDQ6VXNlcjE0NjUzMA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/146530?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/pbking",
+			"html_url": "https://github.com/pbking",
+			"followers_url": "https://api.github.com/users/pbking/followers",
+			"following_url": "https://api.github.com/users/pbking/following{/other_user}",
+			"gists_url": "https://api.github.com/users/pbking/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/pbking/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/pbking/subscriptions",
+			"organizations_url": "https://api.github.com/users/pbking/orgs",
+			"repos_url": "https://api.github.com/users/pbking/repos",
+			"events_url": "https://api.github.com/users/pbking/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/pbking/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1225853227,
-				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
-				"name": "[Block] Navigation",
-				"color": "6767e5",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Font and typography-related issues and PRs"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -7469,149 +8533,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 9,
-		"created_at": "2021-07-30T09:04:31Z",
-		"updated_at": "2021-08-03T12:59:45Z",
-		"closed_at": "2021-08-03T12:59:19Z",
+		"comments": 3,
+		"created_at": "2023-09-27T18:54:01Z",
+		"updated_at": "2023-10-02T09:41:20Z",
+		"closed_at": "2023-09-28T16:13:48Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33777",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33777",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33777.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33777.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nIn https://github.com/WordPress/gutenberg/issues/18866 we see that it is impossible to remove a link from the Nav Link block once it's been added. That's not good.\r\n\r\n[I've already added a `Unlink` feature to the link UI in the format library](https://github.com/WordPress/gutenberg/pull/32541) for rich text and I've been meaning to port it over to the Nav Block link implementation.\r\n\r\nThis PR enables the ability to unset links on the Nav Link block using the `Unlink` button in the link UI.\r\n\r\n**Note**: we are intentionally not mirroring this unlink behaviour in the block toolbar for [the reasons outlined in this comment](https://github.com/WordPress/gutenberg/pull/33777#issuecomment-889829952).\r\n\r\n## How has this been tested?\r\n\r\n* Create a new Post.\r\n* Add Nav Block.\r\n* Add a custom link to anything you want.\r\n* Click on link.\r\n* See `Unlink` button in popover.\r\n* Click button.\r\n* Remove is removed and the UI of the `Nav Link` block should be reset to default state.\r\n* Check you can click and re-add the link as required.\r\n* Check you can do the same in the Nav Editor screen.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n\r\n#### Post Editor\r\nhttps://user-images.githubusercontent.com/444434/127629489-927586d7-6bb8-49eb-85a9-b09e3de7263e.mp4\r\n\r\n\r\n#### Nav Editor\r\nhttps://user-images.githubusercontent.com/444434/127629484-e5837372-a98c-40a8-8678-7afd8d48b98f.mp4\r\n\r\n\r\n\r\n\r\n## Types of changes\r\nNew feature (non-breaking change which adds functionality)\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54886",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54886",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54886.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54886.patch",
+			"merged_at": "2023-09-28T16:13:48Z"
+		},
+		"body": "## What?\r\nChanges the expected mime type for 'otf' files to be `application/vnd.ms-opentype`\r\n\r\n## Why?\r\nThe [expected](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) value is `font/otf` however calls to `finfo_file()` are returning `application/vnd.ms-opentype` as the mime type which cause files with .otf file extensions to to be denied upload.\r\n\r\nNote: I haven't figured out why the font mime type is so out-of-date while the others have improved.  It may be due to the specific OTF files?  If that is the case then I haven't found any OTF files myself that return any different value.\r\n\r\n\r\n## Testing Instructions\r\nUsing the Font Library UI upload an OTF font file file.\r\n\r\nIt should work.\r\n\r\n\r\n[Lato-Regular.otf.zip](https://github.com/WordPress/gutenberg/files/12742349/Lato-Regular.otf.zip)\r\n\r\n\r\nFixes: https://github.com/WordPress/gutenberg/issues/54759\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54886/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33771",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33771/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33771/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33771/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33771",
-		"id": 956384942,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5OTg5NDU2",
-		"number": 33771,
-		"title": "Add error boundaries to widget screens",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54884",
+		"id": 1915996838,
+		"node_id": "PR_kwDOBNHdeM5bXPAk",
+		"number": 54884,
+		"title": "Use list role instead of listbox in patterns list",
 		"user": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 1414926647,
-				"node_id": "MDU6TGFiZWwxNDE0OTI2NjQ3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Widgets",
-				"name": "[Package] Edit Widgets",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/edit-widgets"
-			},
-			{
-				"id": 2463256422,
-				"node_id": "MDU6TGFiZWwyNDYzMjU2NDIy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Backport%20to%20WP%20Minor%20Release",
-				"name": "Backport to WP Minor Release",
-				"color": "491d8e",
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
 				"default": false,
-				"description": "PRs to be back-ported to a WordPress minor release."
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
 			},
 			{
-				"id": 2632875097,
-				"node_id": "MDU6TGFiZWwyNjMyODc1MDk3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Widgets%20Customizer",
-				"name": "[Feature] Widgets Customizer",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
 				"color": "fbca04",
 				"default": false,
-				"description": "Ability to add and edit blocks in Customize → Widgets."
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "talldan",
-			"id": 677833,
-			"node_id": "MDQ6VXNlcjY3NzgzMw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/talldan",
-			"html_url": "https://github.com/talldan",
-			"followers_url": "https://api.github.com/users/talldan/followers",
-			"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-			"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-			"organizations_url": "https://api.github.com/users/talldan/orgs",
-			"repos_url": "https://api.github.com/users/talldan/repos",
-			"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/talldan/received_events",
-			"type": "User",
-			"site_admin": false
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+			"type": "User",
+			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "talldan",
-				"id": 677833,
-				"node_id": "MDQ6VXNlcjY3NzgzMw==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/677833?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/talldan",
-				"html_url": "https://github.com/talldan",
-				"followers_url": "https://api.github.com/users/talldan/followers",
-				"following_url": "https://api.github.com/users/talldan/following{/other_user}",
-				"gists_url": "https://api.github.com/users/talldan/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/talldan/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/talldan/subscriptions",
-				"organizations_url": "https://api.github.com/users/talldan/orgs",
-				"repos_url": "https://api.github.com/users/talldan/repos",
-				"events_url": "https://api.github.com/users/talldan/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/talldan/received_events",
+				"login": "kevin940726",
+				"id": 7753001,
+				"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/kevin940726",
+				"html_url": "https://github.com/kevin940726",
+				"followers_url": "https://api.github.com/users/kevin940726/followers",
+				"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+				"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+				"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+				"repos_url": "https://api.github.com/users/kevin940726/repos",
+				"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -7634,308 +8696,116 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-30T04:14:40Z",
-		"updated_at": "2021-08-02T07:33:24Z",
-		"closed_at": "2021-08-02T03:20:39Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 3,
+		"created_at": "2023-09-27T17:07:28Z",
+		"updated_at": "2023-09-29T14:26:42Z",
+		"closed_at": "2023-09-28T02:16:51Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33771",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33771",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33771.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33771.patch"
-		},
-		"body": "## Description\r\nCloses #33620\r\n\r\nAdds error boundaries to the widgets screens. Previously users have reported JavaScript errors (like those solved by #33618) cause a blank white screen with very little information.\r\n\r\nThis PR at least adds a message and a Copy Error button. The edit widgets screen also has an 'Attempt Recovery' button, but I didn't add this to the customizer screen, as the customizer is a little more complex. When I attempted to do so, I found that the `activeSidebarControl` state was lost, so recovery would never work.\r\n\r\nThe ErrorBoundary component is also in need of refactoring and improvement, but this PR would be good to backport to a minor release, so I'd prefer to keep it simple.\r\n\r\n## How has this been tested?\r\n### Appearance > Widgets screen\r\n1. Have your dev environment running and add some code to throw an error in a widget screen component. e.g. add `throw new Error( 'Test' );` to somewhere like the Header component.\r\n2. Load the editor\r\n3. Observe the notice\r\n4. Copy the error and paste it somewhere, it should be the same as the error message thrown\r\n5. Click attempt recovery, observe the editor reloads, but you'll encounter the same error again\r\n\r\n### Appearance > Customize > Widgets screen\r\n1. Have your dev environment running and add some code to throw an error in a widget screen component. e.g. add `throw new Error( 'Test' );` to somewhere like the Header component.\r\n2. Load the editor\r\n3. Observe the notice\r\n4. Copy the error and paste it somewhere, it should be the same as the error message thrown\r\n\r\n## Screenshots <!-- if applicable -->\r\n### Appearance > Widgets screen\r\n<img width=\"802\" alt=\"Screenshot 2021-07-30 at 12 20 15 pm\" src=\"https://user-images.githubusercontent.com/677833/127599677-104170a9-74f2-4852-afda-9668443b116c.png\">\r\n\r\n### Appearance > Customize > Widgets screen\r\n<img width=\"298\" alt=\"Screenshot 2021-07-30 at 12 19 25 pm\" src=\"https://user-images.githubusercontent.com/677833/127599695-a745d9cc-1584-4710-ae38-066ce9227925.png\">\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\nNew feature (non-breaking change which adds functionality) \r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54884",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54884",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54884.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54884.patch",
+			"merged_at": "2023-09-28T02:16:51Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nA follow-up to https://github.com/WordPress/gutenberg/pull/52357. It was discussed in https://github.com/WordPress/gutenberg/issues/52009#issuecomment-1619832166 to implement the patterns in `list` not `listbox`, but it seems like we missed it in https://github.com/WordPress/gutenberg/pull/52357. This PR fixes that.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nFor accessibility and simplicity.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nRemove `role=\"listbox\"` and tweak e2e tests.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\nCI should pass.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n1. Visit Site editor -> Patterns.\r\n2. Tabbing through each pattern should announce the title and the description in screen readers.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54884/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33764",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33764/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33764/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33764/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33764",
-		"id": 956032331,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5Njk0MDMy",
-		"number": 33764,
-		"title": "[Documentation] Add missing comma",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54878",
+		"id": 1915807057,
+		"node_id": "PR_kwDOBNHdeM5bWlk4",
+		"number": 54878,
+		"title": "Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists",
 		"user": {
-			"login": "mrleemon",
-			"id": 2060659,
-			"node_id": "MDQ6VXNlcjIwNjA2NTk=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2060659?v=4",
+			"login": "artemiomorales",
+			"id": 5360536,
+			"node_id": "MDQ6VXNlcjUzNjA1MzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/5360536?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/mrleemon",
-			"html_url": "https://github.com/mrleemon",
-			"followers_url": "https://api.github.com/users/mrleemon/followers",
-			"following_url": "https://api.github.com/users/mrleemon/following{/other_user}",
-			"gists_url": "https://api.github.com/users/mrleemon/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/mrleemon/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/mrleemon/subscriptions",
-			"organizations_url": "https://api.github.com/users/mrleemon/orgs",
-			"repos_url": "https://api.github.com/users/mrleemon/repos",
-			"events_url": "https://api.github.com/users/mrleemon/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/mrleemon/received_events",
+			"url": "https://api.github.com/users/artemiomorales",
+			"html_url": "https://github.com/artemiomorales",
+			"followers_url": "https://api.github.com/users/artemiomorales/followers",
+			"following_url": "https://api.github.com/users/artemiomorales/following{/other_user}",
+			"gists_url": "https://api.github.com/users/artemiomorales/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/artemiomorales/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/artemiomorales/subscriptions",
+			"organizations_url": "https://api.github.com/users/artemiomorales/orgs",
+			"repos_url": "https://api.github.com/users/artemiomorales/repos",
+			"events_url": "https://api.github.com/users/artemiomorales/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/artemiomorales/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
-			}
-		],
-		"state": "closed",
-		"locked": false,
-		"assignee": null,
-		"assignees": [],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
+				"description": "An existing feature does not function as intended"
 			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
-			"closed_at": null
-		},
-		"comments": 0,
-		"created_at": "2021-07-29T16:55:31Z",
-		"updated_at": "2021-07-30T04:59:01Z",
-		"closed_at": "2021-07-30T04:58:41Z",
-		"author_association": "CONTRIBUTOR",
-		"active_lock_reason": null,
-		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33764",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33764",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33764.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33764.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
-	},
-	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33761",
-		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33761/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33761/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33761/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33761",
-		"id": 955949660,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NjI0MDM2",
-		"number": 33761,
-		"title": "GitHub Templates: Fix spacing in bug report template",
-		"user": {
-			"login": "ryelle",
-			"id": 541093,
-			"node_id": "MDQ6VXNlcjU0MTA5Mw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/541093?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/ryelle",
-			"html_url": "https://github.com/ryelle",
-			"followers_url": "https://api.github.com/users/ryelle/followers",
-			"following_url": "https://api.github.com/users/ryelle/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ryelle/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ryelle/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ryelle/subscriptions",
-			"organizations_url": "https://api.github.com/users/ryelle/orgs",
-			"repos_url": "https://api.github.com/users/ryelle/repos",
-			"events_url": "https://api.github.com/users/ryelle/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ryelle/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
 			{
-				"id": 1032028862,
-				"node_id": "MDU6TGFiZWwxMDMyMDI4ODYy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Project%20Management",
-				"name": "[Type] Project Management",
-				"color": "e55ead",
+				"id": 1101518360,
+				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
+				"name": "[Block] Image",
+				"color": "6767e5",
 				"default": false,
-				"description": "Meta-issues related to project management of Gutenberg"
-			}
-		],
-		"state": "closed",
-		"locked": false,
-		"assignee": {
-			"login": "ryelle",
-			"id": 541093,
-			"node_id": "MDQ6VXNlcjU0MTA5Mw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/541093?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/ryelle",
-			"html_url": "https://github.com/ryelle",
-			"followers_url": "https://api.github.com/users/ryelle/followers",
-			"following_url": "https://api.github.com/users/ryelle/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ryelle/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ryelle/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ryelle/subscriptions",
-			"organizations_url": "https://api.github.com/users/ryelle/orgs",
-			"repos_url": "https://api.github.com/users/ryelle/repos",
-			"events_url": "https://api.github.com/users/ryelle/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ryelle/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
+				"description": "Affects the Image Block"
+			},
 			{
-				"login": "ryelle",
-				"id": 541093,
-				"node_id": "MDQ6VXNlcjU0MTA5Mw==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/541093?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/ryelle",
-				"html_url": "https://github.com/ryelle",
-				"followers_url": "https://api.github.com/users/ryelle/followers",
-				"following_url": "https://api.github.com/users/ryelle/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ryelle/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ryelle/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ryelle/subscriptions",
-				"organizations_url": "https://api.github.com/users/ryelle/orgs",
-				"repos_url": "https://api.github.com/users/ryelle/repos",
-				"events_url": "https://api.github.com/users/ryelle/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ryelle/received_events",
-				"type": "User",
-				"site_admin": false
+				"id": 5833813824,
+				"node_id": "LA_kwDOBNHdeM8AAAABW7jvQA",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Packages]%20Interactivity",
+				"name": "[Packages] Interactivity",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/interactivity"
 			}
 		],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
-			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
-			"closed_at": null
-		},
-		"comments": 0,
-		"created_at": "2021-07-29T15:17:03Z",
-		"updated_at": "2021-07-29T15:59:58Z",
-		"closed_at": "2021-07-29T15:59:32Z",
-		"author_association": "CONTRIBUTOR",
-		"active_lock_reason": null,
-		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33761",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33761",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33761.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33761.patch"
-		},
-		"body": "Follow up to #33713, which had some yml syntax issues that caused the Bug Report template to disappear. This fixes up some indentation, spacing, and moves the `required` value into the `validation` property to match the documentation.",
-		"performed_via_github_app": null
-	},
-	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33757",
-		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33757/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33757/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33757/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33757",
-		"id": 955801397,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NDk3NzA3",
-		"number": 33757,
-		"title": "[RNMobile] Bump SauceLabs caps",
-		"user": {
-			"login": "hypest",
-			"id": 1032913,
-			"node_id": "MDQ6VXNlcjEwMzI5MTM=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1032913?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/hypest",
-			"html_url": "https://github.com/hypest",
-			"followers_url": "https://api.github.com/users/hypest/followers",
-			"following_url": "https://api.github.com/users/hypest/following{/other_user}",
-			"gists_url": "https://api.github.com/users/hypest/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/hypest/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/hypest/subscriptions",
-			"organizations_url": "https://api.github.com/users/hypest/orgs",
-			"repos_url": "https://api.github.com/users/hypest/repos",
-			"events_url": "https://api.github.com/users/hypest/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/hypest/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [],
 		"state": "closed",
 		"locked": false,
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -7958,39 +8828,55 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-29T12:40:07Z",
-		"updated_at": "2021-08-03T10:19:08Z",
-		"closed_at": "2021-08-03T10:18:40Z",
+		"comments": 4,
+		"created_at": "2023-09-27T15:11:51Z",
+		"updated_at": "2023-09-29T12:04:54Z",
+		"closed_at": "2023-09-27T18:41:15Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33757",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33757",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33757.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33757.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nBumping the Appium and iOS versions used on SauceLabs, in an attempt to improve test reliability in gutenberg-mobile.\r\n\r\ngutenberg-mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3770\r\n\r\n## How has this been tested?\r\nBy checking the mobile device CI tests on the gutenberg-mobile PR.\r\n\r\n1. Bumping the iOS version used in the iOS simulator to the latest available on SauceLabs, v14.5.\r\n2. Bumping the Appium version used in the iOS run to v1.20.1. **Note:** this is not the same version as specified in our package.json (v1.20.2) because the `.2` doesn't seem to be available yet on SauceLabs for the iOS targets (it is for Android though 🤷‍♂️).\r\n3. Bumping the Appium version used in the Android run to v1.20.2, same as the one used via package.json.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54878",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54878",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54878.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54878.patch",
+			"merged_at": "2023-09-27T18:41:15Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nIf a user turns on `Expand on Click` in the image's block settings, then subsequently sets `settings.blocks.core/image.lightbox.allowEditing` to `false`, the Expand on Click UI disappears for the image block in question when it should remain visible. This PR fixes that.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nUsers should be able to access their manual overrides of the Expand on Click setting, even if `allowEditing` is disabled, otherwise they are unable to modify the settings without opening the code editor.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nIt revises a conditional check when determining whether to show the toggle or not.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. Add an image to a post.\r\n2. Enable the image's `Expand on Click` option.\r\n3. Save the post.\r\n4. In the theme's `theme.json`, set `settings.blocks.core/image.lightbox.allowEditing` to `false`.\r\n5. Refresh the post page and click on the image block — ensure that the `Expand on Click` option is still visible.\r\n6. Now, reset the `Expand on Click` option to default using the Settings dropdown, and verify that the toggle disappears due to `allowEditing` being false and the block-level setting being removed.\r\n\r\n### Testing Instructions for Keyboard\r\n N/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/5360536/d3062d65-e035-4748-b02e-6d361098f0e2",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54878/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33755",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33755/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33755/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33755/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33755",
-		"id": 955764324,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NDY1NzQz",
-		"number": 33755,
-		"title": "Mobile Release v1.58.1",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54876",
+		"id": 1915749872,
+		"node_id": "PR_kwDOBNHdeM5bWZAs",
+		"number": 54876,
+		"title": "Fallback to Twitter provider when embedding X URLs",
 		"user": {
 			"login": "fluiddot",
 			"id": 14905380,
@@ -8013,13 +8899,22 @@
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1078477350,
+				"node_id": "MDU6TGFiZWwxMDc4NDc3MzUw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Embed",
+				"name": "[Block] Embed",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Embed Block"
 			}
 		],
 		"state": "closed",
@@ -8067,13 +8962,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -8096,401 +8991,114 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-29T11:57:57Z",
-		"updated_at": "2021-08-04T11:58:18Z",
-		"closed_at": "2021-07-30T17:02:04Z",
+		"comments": 3,
+		"created_at": "2023-09-27T14:43:35Z",
+		"updated_at": "2023-10-05T11:17:15Z",
+		"closed_at": "2023-09-27T16:35:10Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33755",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33755",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33755.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33755.patch"
-		},
-		"body": "## Description\nRelease 1.58.1 of the react-native-editor and Gutenberg-Mobile.\n\nFor more information about this release and testing instructions, please see the related Gutenberg-Mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3769\n\n## Checklist:\n- [x] My code is tested.\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54876",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54876",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54876.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54876.patch",
+			"merged_at": "2023-09-27T16:35:10Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nUse Twitter provider when embedding X URLs (e.g. `https://x.com/automattic/status/1395447061336711181`).\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nFixes https://github.com/WordPress/gutenberg/issues/54042.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nAdds an effect to the Embed block triggered when an embed URL fails (i.e. `cannotEmbed` is `true`). It checks if the URL points to `x.com` and replaces it with `twitter.com` as a fallback to retrieve the embed preview using the Twitter provider.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n### Web\r\n1. Open/create a post.\r\n2. Paste an X embed URL (e.g. `https://x.com/automattic/status/1395447061336711181`)\r\n3. Observe that an Embed block is created and previews the tweet.\r\n4. Add an Embed block.\r\n5. Set an X embed URL (e.g. `https://x.com/automattic/status/1395447061336711181`)\r\n6. Click on the \"Embed\" button.\r\n7. Observe that the Embed block previews the tweet.\r\n8. Try embedding a different embed URL (e.g. `https://www.youtube.com/watch?v=ssfHW5lwFZg`).\r\n9. Observe that the Embed block previews the content.\r\n\r\n### Native\r\n1. Open/create a post.\r\n2. Paste an X embed URL (e.g. `https://x.com/automattic/status/1395447061336711181`)\r\n3. Tap on the \"Create embed\" option.\r\n4. Observe that an Embed block is created and previews the tweet.\r\n5. Add an Embed block.\r\n6. Tap on the \"Add link\" button.\r\n7. Set an X embed URL (e.g. `https://x.com/automattic/status/1395447061336711181`)\r\n8. Dismiss the bottom sheet.\r\n9. Observe that the Embed block previews the tweet.\r\n10. Try embedding a different embed URL (e.g. `https://www.youtube.com/watch?v=ssfHW5lwFZg`).\r\n11. Observe that the Embed block previews the content.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54876/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33753",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33753/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33753/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33753/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33753",
-		"id": 955746219,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NDUwMjY0",
-		"number": 33753,
-		"title": "Force link text to wrap in the Link UI when encountering extra long link text",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54870",
+		"id": 1915647677,
+		"node_id": "PR_kwDOBNHdeM5bWCpy",
+		"number": 54870,
+		"title": "Add a documentation page about the block editor settings",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 644027893,
-				"node_id": "MDU6TGFiZWw2NDQwMjc4OTM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design%20Feedback",
-				"name": "Needs Design Feedback",
-				"color": "0e8a16",
+				"id": 562969841,
+				"node_id": "MDU6TGFiZWw1NjI5Njk4NDE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Framework",
+				"name": "Framework",
+				"color": "fbca04",
 				"default": false,
-				"description": "Anything that needs general design feedback."
+				"description": "Issues related to broader framework topics, especially as it relates to javascript"
 			},
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
-			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
-			"closed_at": null
-		},
-		"comments": 9,
-		"created_at": "2021-07-29T11:32:59Z",
-		"updated_at": "2021-07-30T14:42:36Z",
-		"closed_at": "2021-07-30T14:42:14Z",
-		"author_association": "CONTRIBUTOR",
-		"active_lock_reason": null,
-		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33753",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33753",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33753.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33753.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nCurrently in the Link UI, if the link text is particularly long then it is \"clipped\" and an ellipsis is shown. This is ok, but it does make the UI difficult to use if you are trying to [distinguish between similarly named posts](https://ibb.co/tczM3Y8).\r\n\r\nMoreover, if you enter a link which has no spaces and is very long then you encounter the same problem.\r\n\r\nThis PR resolves this by allowing the UI to wrap the link text. This allow the user to see the full link text whilst avoid any unwanted horizontal overflow.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/33586\r\n\r\n\r\n## How has this been tested?\r\n1. Create a few posts with very long titles and publish them.\r\n2. Create a new post and add some text content.\r\n3. Create a link to one of your test posts (the ones with the long titles). \r\n4. See that the link UI wraps the long text both in edit and in preview mode.\r\n5. Create a very long freeform link with no spaces at all.\r\n6. Check that the link UI wraps the long text both in edit and in preview mode.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n\r\n<img width=\"880\" alt=\"Screen Shot 2021-07-29 at 11 17 16\" src=\"https://user-images.githubusercontent.com/444434/127484666-6d787d37-8ea8-43d0-a7cd-db6ae01306d8.png\">\r\n<img width=\"580\" alt=\"Screen Shot 2021-07-29 at 11 17 03\" src=\"https://user-images.githubusercontent.com/444434/127484669-21aed897-7026-4183-804d-51d5efa482b6.png\">\r\n\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
-	},
-	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33750",
-		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33750/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33750/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33750/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33750",
-		"id": 955696398,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NDA3ODQ3",
-		"number": 33750,
-		"title": "Scripts: Use cssnano to minimize CSS files with build",
-		"user": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 978007737,
-				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
-				"name": "[Package] Scripts",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/scripts"
-			}
-		],
-		"state": "closed",
-		"locked": false,
-		"assignee": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "gziolo",
-				"id": 699132,
-				"node_id": "MDQ6VXNlcjY5OTEzMg==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/gziolo",
-				"html_url": "https://github.com/gziolo",
-				"followers_url": "https://api.github.com/users/gziolo/followers",
-				"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-				"organizations_url": "https://api.github.com/users/gziolo/orgs",
-				"repos_url": "https://api.github.com/users/gziolo/repos",
-				"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/gziolo/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
-			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
-			"closed_at": null
-		},
-		"comments": 3,
-		"created_at": "2021-07-29T10:28:57Z",
-		"updated_at": "2021-08-02T08:16:43Z",
-		"closed_at": "2021-08-01T08:20:16Z",
-		"author_association": "MEMBER",
-		"active_lock_reason": null,
-		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33750",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33750",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33750.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33750.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nFollow-up for #33676 and the comment from @ocean90 https://github.com/WordPress/gutenberg/pull/33676#issuecomment-888435234:\r\n\r\n> This should probably be released as a breaking change because it can impact users which have their own PostCSS config which already includes cssnano (which optimize-css-assets-webpack-plugin uses by default) with a custom config for [allowed optimisations](https://cssnano.co/docs/optimisations/).\r\n> \r\n> Since sass-loader seems to minify the CSS already, should we maybe extend the default PostCSS config to use cssnano instead?\r\n> \r\n> Related:\r\n> * [github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/tools/webpack/shared.js#L82-L93](https://github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/tools/webpack/shared.js#L82-L93)\r\n> * [github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/scripts/config/webpack.config.js#L47-L55](https://github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/scripts/config/webpack.config.js#L47-L55)\r\n> * [github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/postcss-plugins-preset/lib/index.js](https://github.com/WordPress/gutenberg/blob/44212878dcbf6f4616266eb0fb4756293a471615/packages/postcss-plugins-preset/lib/index.js)\r\n\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nI created a custom block with:\r\n\r\n```bash\r\nnpx wp-create-block example --no-wp-scripts\r\ncd example\r\n../node_modules/.bin/wp-scripts build\r\n```\r\n\r\nI updated used CSS files to end with `.css` to ensure that the output is properly minimized.\r\n\r\nI also ensured that the output of CSS files isn't minified in the dev mode with:\r\n```bash\r\n../node_modules/.bin/wp-scripts start\r\n```\r\n\r\nI added `cssnano.config.js` file in the root folder of the project with the following content:\r\n\r\n```js\r\nmodule.exports = {\r\n\tpreset: [ require( 'cssnano-preset-default' ), { discardComments: false } ],\r\n};\r\n```\r\n\r\nI also had to install `cssnano-preset-default' with:\r\n\r\n```bash\r\nnpm i cssnano-preset-default --save-dev\r\n```\r\n\r\nWhen I run:\r\n\r\n```bash\r\n../node_modules/.bin/wp-scripts build\r\n```\r\n\r\nI can see that comments in the CSS files are preserved. It means that the custom config is properly loaded when present.\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nEnhancement.\r\n\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
-	},
-	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33749",
-		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33749/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33749/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33749/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33749",
-		"id": 955687904,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5NDAwNTQ3",
-		"number": 33749,
-		"title": "Lazy render block types in the inserter",
-		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 596962434,
-				"node_id": "MDU6TGFiZWw1OTY5NjI0MzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Inserter",
-				"name": "[Feature] Inserter",
-				"color": "fbca04",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
-				"default": false,
-				"description": ""
-			}
-		],
-		"state": "closed",
-		"locked": false,
-		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -8517,13 +9125,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -8546,39 +9154,55 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 16,
-		"created_at": "2021-07-29T10:18:38Z",
-		"updated_at": "2021-07-30T18:56:37Z",
-		"closed_at": "2021-07-30T18:56:15Z",
+		"comments": 0,
+		"created_at": "2023-09-27T13:54:40Z",
+		"updated_at": "2023-10-07T08:54:22Z",
+		"closed_at": "2023-09-28T08:54:23Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33749",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33749",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33749.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33749.patch"
-		},
-		"body": "Opening the inserter is very a slow operation, it takes approximatively 360ms according to our metrics https://codehealth-riad.vercel.app and the size of the post don't have an impact there meaning on slow machines, folks could potentially notice a small lag when clicking the \"open inserter\" button.\r\n\r\nI tried to debug this using the Chrome tools, and I noticed that the biggest part of that time is spent on rendering the block types, there's just a lot of block types and the number grows with third-party blocks.\r\n\r\nThis PR uses a technique we previously used for the patterns list to make the inserter feel more responsive: render the inserter categories one by one, and then let the browser do more priority things (like actually opening the inserter) before continuing\r\n\r\n**Trace before this PR:** \r\n<img width=\"717\" alt=\"Screen Shot 2021-07-29 at 11 11 33 AM\" src=\"https://user-images.githubusercontent.com/272444/127474913-61402e61-36b3-4a14-ac0d-36e98265640d.png\">\r\n\r\n**Trace after the PR**\r\n<img width=\"1286\" alt=\"Screen Shot 2021-07-29 at 11 12 17 AM\" src=\"https://user-images.githubusercontent.com/272444/127475110-acbe295f-158b-4f54-b61d-d25c1aad7600.png\">\r\n\r\nNotice that now the trace is split into smaller chunks which allows the browser to feel more responsive.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54870",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54870",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54870.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54870.patch",
+			"merged_at": "2023-09-28T08:54:23Z"
+		},
+		"body": "Related #53874\r\n\r\n## What?\r\n\r\nJust documents some of the most important settings a user can pass as a prop to the `BlockEditorProvider` component. I think we're still missing the \"theme.json\" settings and styles from this list but these should be added when we decided on a stable name.\r\n\r\n### Test the documentation website\r\n\r\n```\r\ncd platform-docs\r\nnpm install\r\nnpm start\r\n```",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54870/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33748",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33748/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33748/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33748/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33748",
-		"id": 955676709,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MzkxMDcx",
-		"number": 33748,
-		"title": "Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54866",
+		"id": 1915441696,
+		"node_id": "PR_kwDOBNHdeM5bVUzu",
+		"number": 54866,
+		"title": "All Nav block items to break long titles",
 		"user": {
 			"login": "getdave",
 			"id": 444434,
@@ -8601,31 +9225,22 @@
 		},
 		"labels": [
 			{
-				"id": 949438185,
-				"node_id": "MDU6TGFiZWw5NDk0MzgxODU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Regression",
-				"name": "[Type] Regression",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 2074073931,
-				"node_id": "MDU6TGFiZWwyMDc0MDczOTMx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Navigation%20Screen",
-				"name": "[Feature] Navigation Screen",
-				"color": "fbca04",
-				"default": false,
-				"description": "A new block-based screen intended to replace nav-menus.php."
-			},
-			{
-				"id": 2536082965,
-				"node_id": "MDU6TGFiZWwyNTM2MDgyOTY1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Navigation",
-				"name": "[Package] Edit Navigation",
-				"color": "ed2572",
+				"id": 3229566535,
+				"node_id": "MDU6TGFiZWwzMjI5NTY2NTM1",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation%20Link",
+				"name": "[Block] Navigation Link",
+				"color": "6767e5",
 				"default": false,
-				"description": "/packages/edit-navigation"
+				"description": "Affects the Navigation Link Block"
 			}
 		],
 		"state": "closed",
@@ -8673,13 +9288,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -8702,131 +9317,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-29T10:06:10Z",
-		"updated_at": "2021-07-29T11:21:22Z",
-		"closed_at": "2021-07-29T11:20:57Z",
+		"comments": 11,
+		"created_at": "2023-09-27T12:17:45Z",
+		"updated_at": "2023-10-02T15:05:39Z",
+		"closed_at": "2023-09-29T11:02:43Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33748",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33748",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33748.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33748.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nTakes over from https://github.com/WordPress/gutenberg/pull/32423#issuecomment-888903800 as the contributor seems unable to continue.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/30330\r\n\r\n## How has this been tested?\r\n\r\n* Enable Nav Editor experiment.\r\n* Go to Nav Editor screen.\r\n* Add a menu.\r\n* Click \"Manage Locations\" in the sidebar.\r\n* See modal appear with locations for menus.\r\n* See placeholder value for the menu selection dropdown is now \"Select a Menu\".\r\n\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n<img width=\"1278\" alt=\"Screen Shot 2021-07-29 at 11 01 53\" src=\"https://user-images.githubusercontent.com/444434/127473360-f5ae5637-56a9-4397-a743-e87cf602dbeb.png\">\r\n\r\n\r\n## Types of changes\r\nBug fix (non-breaking change which fixes an issue)\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54866",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54866",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54866.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54866.patch",
+			"merged_at": "2023-09-29T11:02:43Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nNav block _items_ may have long titles which do not have natural word breaks. In certain cases this may causes them to overflow their container.\r\n\r\nThis PR seeks to address that by removing a (seemingly) redundant CSS proprerty thereby allowing menu item titles to wrap.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/52298\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nHaving menu item text break out of it's container is not good for visual design.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nRemoves seemingly redundant property [`word-break: normal;`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break).\r\n\r\n> normal - Use the default line break rule.\r\n\r\n## Questions/concerns\r\n\r\nThis property seems to indicate it was added intentionally to cover some special case. T[he PR that added](https://github.com/WordPress/gutenberg/pull/29975) it was authored by @jasmussen but has some complexities that I don't fully understand. It's also a large PR.\r\n\r\nIt would be good to get context from @jasmussen before we look to merge this one.\r\n\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n- New Post\r\n- Add Nav block\r\n- Add a nav item with some very long title text that doesn't contain any spaces (e.g. `Supercalifragilisticexpialidocious`).\r\n- Set the Navigation to \"vertivcal\" orientation in the sidebar controls.\r\n- Create Columns block with 3 columns. Add a background to each column to make things clearer.\r\n- Drag the Nav block into Column 1.\r\n- See that Nav item `Supercalifragilisticexpialidocious` does not overflow the boundary (as [per the Issue](https://github.com/WordPress/gutenberg/issues/52298)) but instead wraps.\r\n- Add another Nav block which is in horizontal orientation and check this change does not effect those items.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/444434/a34c9883-bc89-415f-9b47-64fdb3599a11\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54866/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33747",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33747/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33747/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33747/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33747",
-		"id": 955662605,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5Mzc5MTg0",
-		"number": 33747,
-		"title": "Improve likelihood of getting rich link previews by modifying UA string for URL Details REST API endpoint",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54865",
+		"id": 1915417802,
+		"node_id": "PR_kwDOBNHdeM5bVPbS",
+		"number": 54865,
+		"title": "E2E Tests: Revert temporary fixes",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 813888420,
-				"node_id": "MDU6TGFiZWw4MTM4ODg0MjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/REST%20API%20Interaction",
-				"name": "REST API Interaction",
-				"color": "fbca04",
+				"id": 531680824,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Task",
+				"name": "[Type] Task",
+				"color": "fef2c0",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that have been broken down into an individual action to take"
 			},
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 1699237849,
+				"node_id": "MDU6TGFiZWwxNjk5MjM3ODQ5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20E2E%20Tests",
+				"name": "[Package] E2E Tests",
+				"color": "ed2572",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "/packages/e2e-tests"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -8849,56 +9480,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 6,
-		"created_at": "2021-07-29T09:49:52Z",
-		"updated_at": "2021-07-30T14:59:01Z",
-		"closed_at": "2021-07-30T14:07:41Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 1,
+		"created_at": "2023-09-27T12:06:18Z",
+		"updated_at": "2023-09-27T14:06:52Z",
+		"closed_at": "2023-09-27T14:06:21Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33747",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33747",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33747.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33747.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nAs described in https://github.com/WordPress/gutenberg/issues/33722#issuecomment-888341130 the UA string seems to be causing the `url-details` endpoint requests to be rejected by certain prominent web properties such as Google. This appears to be due to the default UA string used by the WP HTTP API being very similar to the UA string used by \"Pingback\" requests - many people block such requests.\r\n\r\nIf we change the UA string to something else the failing requests start to work. Therefore we need to use a different UA string from the default provided by the WP HTTP API.\r\n\r\nThe REST API Core team have advised that we should _not_ be seen to be spoofing the UA string. However, we can _modify_ it as long as it still has something to identify it as \"WordPress\".\r\n\r\nTherefore this PR tweaks the UA string to:\r\n\r\n* Use `WP` instead of `WordPress`.\r\n* Includes the feature name in the UA string in order that properties can still easily identify it and block it if they wish to do so.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/33722\r\n\r\n## How has this been tested?\r\n\r\n### On trunk\r\n\r\n1. New Post.\r\n2. Open browser dev tools `Console`.\r\n3. Type `copy(wpApiSettings.nonce)`.\r\n4. Update the following URL replacing `YOUR_NONCE_HERE` with the value from the previous step.\r\n\r\n```\r\nhttp://localhost:8888/index.php?rest_route=%2F__experimental%2Furl-details&url=http%3A%2F%2Fwww.google.com&_locale=user&_wpnonce=YOUR_NONCE_HERE\r\n```\r\n5. Paste into your browser.\r\n6. See the \"404\" response.\r\n```\r\n{\r\ncode: \"no_response\",\r\nmessage: \"URL not found. Response returned a non-200 status code for this URL.\",\r\ndata: {\r\nstatus: 404\r\n}\r\n}\r\n```\r\n\r\n### On this PR branch\r\n\r\n1. Repeat the steps above. \r\n2. This time see the request suceed and rich results returned, eg:\r\n\r\n```\r\n{\r\ntitle: \"Google\",\r\nicon: \"\",\r\ndescription: \"\",\r\nimage: \"https://www.google.com/logos/doodles/2021/doodle-champion-island-games-july-29-6753651837109022-2xa.gif\"\r\n}\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\nBug fix (non-breaking change which fixes an issue)\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54865",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54865",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54865.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54865.patch",
+			"merged_at": "2023-09-27T14:06:21Z"
+		},
+		"body": "## What?\r\nPR reverts temporary fixes from `datepicker` and `scheduling` e2e tests.\r\n\r\nThe bug was fixed in WP Core - https://core.trac.wordpress.org/changeset/56717.\r\n\r\n## Testing Instructions\r\nCI check should pass.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54865/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33746",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33746/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33746/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33746/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33746",
-		"id": 955641959,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MzYxODkw",
-		"number": 33746,
-		"title": "ESLint Plugin: Include .jsx extenstion when linting import statements",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54863",
+		"id": 1915368610,
+		"node_id": "PR_kwDOBNHdeM5bVEUx",
+		"number": 54863,
+		"title": "Site Editor: Avoid same key warnings in template parts area listings",
 		"user": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -8910,70 +9557,70 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 1159632801,
-				"node_id": "MDU6TGFiZWwxMTU5NjMyODAx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20ESLint%20plugin",
-				"name": "[Package] ESLint plugin",
-				"color": "ed2572",
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
 				"default": false,
-				"description": "/packages/eslint-plugin"
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "gziolo",
-			"id": 699132,
-			"node_id": "MDQ6VXNlcjY5OTEzMg==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gziolo",
-			"html_url": "https://github.com/gziolo",
-			"followers_url": "https://api.github.com/users/gziolo/followers",
-			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-			"organizations_url": "https://api.github.com/users/gziolo/orgs",
-			"repos_url": "https://api.github.com/users/gziolo/repos",
-			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "gziolo",
-				"id": 699132,
-				"node_id": "MDQ6VXNlcjY5OTEzMg==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/gziolo",
-				"html_url": "https://github.com/gziolo",
-				"followers_url": "https://api.github.com/users/gziolo/followers",
-				"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
-				"organizations_url": "https://api.github.com/users/gziolo/orgs",
-				"repos_url": "https://api.github.com/users/gziolo/repos",
-				"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/gziolo/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -8996,82 +9643,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-29T09:24:57Z",
-		"updated_at": "2021-08-03T13:56:04Z",
-		"closed_at": "2021-08-03T13:55:39Z",
+		"comments": 6,
+		"created_at": "2023-09-27T11:42:59Z",
+		"updated_at": "2023-10-02T09:39:42Z",
+		"closed_at": "2023-09-28T05:00:41Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33746",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33746",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33746.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33746.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nFixes #32408.\r\n\r\nReported by @galloppinggryphon:\r\n\r\n> When using `@wordpress/eslint-plugin`, ESLint is reporting the following error while trying to resolve `.jsx` files:\r\n> \r\n> Unable to resolve path to module  './path/jsx-file-sans-extension'. eslint(import/no-unresolved)\r\n> Adding the extension to the import statement makes the file resolve. All `.js` files resolve normally.\r\n\r\nA similar setting is present when TypeScript is found in the project:\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/85cfab17de6a23a73a6163472d1c9d85581d86c2/packages/eslint-plugin/configs/recommended.js#L33-L36\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n`npm run lint-js` should work as before. \r\n\r\nIt also needs to be tested in the 3rd party project that doesn't have TypeScript installed.",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54863",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54863",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54863.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54863.patch",
+			"merged_at": "2023-09-28T05:00:41Z"
+		},
+		"body": "## What?\r\nAlternative to #54861.\r\n\r\nPR prevents the React \"same key\" warnings in the `HomeTemplateDetails` and `TemplateAreas` components when the template part is used multiple times on the same page.\r\n\r\nThis fix uses the template part block `clientId` for the `key` prop, which is unique for each block.\r\n\r\n## Why?\r\nEditors shouldn't display warnings or errors in the console, plus list items with the same keys can have unwanted side effects.\r\n\r\n\r\n## How?\r\nUse block's `clientId` for keys.\r\n\r\nI also did a minor cleanup for the `useSelect` hook - [18a00ac](https://github.com/WordPress/gutenberg/pull/54863/commits/18a00ac4e89f2308da8abab738fcf2fe9a04d589).\r\n\r\n* Removes unnecessary dependencies. This allows us to remove the `useNavigator` hook used in the component.\r\n* Cleaned up some variable assignments since I was in the area.\r\n\r\n## Testing Instructions\r\n1. Enable the TT4 theme.\r\n2. Open the Blog Home template. It has multiple template parts with the same slug on the page.\r\n3. Confirm there are no errors when opening the template in `edit` or `view` mode.\r\n4. Confirm the `HomeTemplateDetails` component works as before.\r\n\r\n### Testing Instructions for Keyboard\r\nSame\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n![CleanShot 2023-09-27 at 15 19 03](https://github.com/WordPress/gutenberg/assets/240569/d95462d2-05ed-4976-ab00-f48ec739bbe2)\r\n![CleanShot 2023-09-27 at 15 19 11](https://github.com/WordPress/gutenberg/assets/240569/4144b584-8590-4d70-aad6-e47031110737)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54863/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33745",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33745/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33745/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33745/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33745",
-		"id": 955570802,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MzAxOTQz",
-		"number": 33745,
-		"title": "[RNMobile][Embed block] Disable paragraph transform",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54862",
+		"id": 1915356971,
+		"node_id": "PR_kwDOBNHdeM5bVBq-",
+		"number": 54862,
+		"title": "Docs: Rename Block Hooks handbook page to Block Filters",
 		"user": {
-			"login": "ceyhun",
-			"id": 1845482,
-			"node_id": "MDQ6VXNlcjE4NDU0ODI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1845482?v=4",
+			"login": "ockham",
+			"id": 96308,
+			"node_id": "MDQ6VXNlcjk2MzA4",
+			"avatar_url": "https://avatars.githubusercontent.com/u/96308?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ceyhun",
-			"html_url": "https://github.com/ceyhun",
-			"followers_url": "https://api.github.com/users/ceyhun/followers",
-			"following_url": "https://api.github.com/users/ceyhun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ceyhun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ceyhun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ceyhun/subscriptions",
-			"organizations_url": "https://api.github.com/users/ceyhun/orgs",
-			"repos_url": "https://api.github.com/users/ceyhun/repos",
-			"events_url": "https://api.github.com/users/ceyhun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ceyhun/received_events",
+			"url": "https://api.github.com/users/ockham",
+			"html_url": "https://github.com/ockham",
+			"followers_url": "https://api.github.com/users/ockham/followers",
+			"following_url": "https://api.github.com/users/ockham/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ockham/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ockham/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ockham/subscriptions",
+			"organizations_url": "https://api.github.com/users/ockham/orgs",
+			"repos_url": "https://api.github.com/users/ockham/repos",
+			"events_url": "https://api.github.com/users/ockham/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ockham/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Documentation for developers"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "ockham",
+			"id": 96308,
+			"node_id": "MDQ6VXNlcjk2MzA4",
+			"avatar_url": "https://avatars.githubusercontent.com/u/96308?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ockham",
+			"html_url": "https://github.com/ockham",
+			"followers_url": "https://api.github.com/users/ockham/followers",
+			"following_url": "https://api.github.com/users/ockham/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ockham/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ockham/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ockham/subscriptions",
+			"organizations_url": "https://api.github.com/users/ockham/orgs",
+			"repos_url": "https://api.github.com/users/ockham/repos",
+			"events_url": "https://api.github.com/users/ockham/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ockham/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ockham",
+				"id": 96308,
+				"node_id": "MDQ6VXNlcjk2MzA4",
+				"avatar_url": "https://avatars.githubusercontent.com/u/96308?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ockham",
+				"html_url": "https://github.com/ockham",
+				"followers_url": "https://api.github.com/users/ockham/followers",
+				"following_url": "https://api.github.com/users/ockham/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ockham/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ockham/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ockham/subscriptions",
+				"organizations_url": "https://api.github.com/users/ockham/orgs",
+				"repos_url": "https://api.github.com/users/ockham/repos",
+				"events_url": "https://api.github.com/users/ockham/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ockham/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9094,131 +9797,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-07-29T08:01:33Z",
-		"updated_at": "2021-07-30T07:20:33Z",
-		"closed_at": "2021-07-30T07:20:01Z",
-		"author_association": "MEMBER",
+		"comments": 5,
+		"created_at": "2023-09-27T11:37:37Z",
+		"updated_at": "2023-09-28T06:53:36Z",
+		"closed_at": "2023-09-27T13:09:11Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33745",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33745",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33745.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33745.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nDisabling paragraph transform for embed block on mobile/native as a workaround to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/3762\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nSee: https://github.com/wordpress-mobile/gutenberg-mobile/issues/3762\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nN/A\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nBug fix (non-breaking change which fixes an issue)\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54862",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54862",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54862.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54862.patch",
+			"merged_at": "2023-09-27T13:09:11Z"
+		},
+		"body": "## What?\r\n\r\nRename the handbook page currently entitled \"Block Hooks\" to \"Block Filters\".\r\n\r\n## Why?\r\n\r\nTo distinguish from the new [\"Block Hooks\" feature](https://core.trac.wordpress.org/ticket/59313), which is conceptually very different.\r\n\r\n## How?\r\n\r\nBy renaming the handbook page from \"Block Hooks\" to \"Block Filters\".\r\n\r\nAFAICT, the handbook page makes no direct reference to hooks, other than the title; furthermore, the relevant client-side `@wordpress/` package happens to be called `@wordpress/hooks`. Reading the page, it’s all about filters though (both on the client and server sides), whereas \"hooks\" traditionally denotes the union of filters and actions — the latter of which are pretty much absent from the page.\r\n\r\nFinally, note that the filename has already been `block-filters.md` before.\r\n\r\nThus, changing the title to \"Block Filters\" seems warranted.\r\n\r\nFlagged by @juanmaguitar in Slack.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54862/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33742",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33742/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33742/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33742/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33742",
-		"id": 955514565,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MjU0MjM0",
-		"number": 33742,
-		"title": "Template Mode: Remove 'per_page' argument from the template data selector",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54861",
+		"id": 1915325797,
+		"node_id": "PR_kwDOBNHdeM5bU6oV",
+		"number": 54861,
+		"title": "Fix warning when a template calls a template area twice",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "MaggieCabrera",
+			"id": 3593343,
+			"node_id": "MDQ6VXNlcjM1OTMzNDM=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"labels": [
-			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
-				"default": false,
-				"description": ""
-			},
+			"url": "https://api.github.com/users/MaggieCabrera",
+			"html_url": "https://github.com/MaggieCabrera",
+			"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
+			"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
+			"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
+			"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
+			"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
+			"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
 			{
-				"id": 2978205898,
-				"node_id": "MDU6TGFiZWwyOTc4MjA1ODk4",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Template%20Editing%20Mode",
-				"name": "[Feature] Template Editing Mode",
-				"color": "FBCA04",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "MaggieCabrera",
+			"id": 3593343,
+			"node_id": "MDQ6VXNlcjM1OTMzNDM=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/MaggieCabrera",
+			"html_url": "https://github.com/MaggieCabrera",
+			"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
+			"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
+			"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
+			"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
+			"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
+			"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "MaggieCabrera",
+				"id": 3593343,
+				"node_id": "MDQ6VXNlcjM1OTMzNDM=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/3593343?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/MaggieCabrera",
+				"html_url": "https://github.com/MaggieCabrera",
+				"followers_url": "https://api.github.com/users/MaggieCabrera/followers",
+				"following_url": "https://api.github.com/users/MaggieCabrera/following{/other_user}",
+				"gists_url": "https://api.github.com/users/MaggieCabrera/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/MaggieCabrera/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/MaggieCabrera/subscriptions",
+				"organizations_url": "https://api.github.com/users/MaggieCabrera/orgs",
+				"repos_url": "https://api.github.com/users/MaggieCabrera/repos",
+				"events_url": "https://api.github.com/users/MaggieCabrera/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/MaggieCabrera/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9241,86 +9951,93 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-29T06:41:40Z",
-		"updated_at": "2021-07-29T07:25:16Z",
-		"closed_at": "2021-07-29T07:24:49Z",
-		"author_association": "MEMBER",
+		"comments": 14,
+		"created_at": "2023-09-27T11:22:37Z",
+		"updated_at": "2023-09-29T18:47:47Z",
+		"closed_at": "2023-09-28T15:25:23Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33742",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33742",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33742.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33742.patch"
-		},
-		"body": "## Description\r\nRemoves `per_page` query argument in TemplatesPanel component when fetching WP templates. This argument isn't supported by the `templates` endpoint nor by the `get_block_templates` function.\r\n\r\nThis also allows reusing data from the store between the `getEditedPostTemplate` and TemplatesPanel component and removes extra API requests.\r\n\r\n## Screenshots\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n| ![template-mode-before](https://user-images.githubusercontent.com/240569/127444078-cca5f00b-106d-4ed0-bc62-bbf70ba17d53.png)  | ![template-mode-after](https://user-images.githubusercontent.com/240569/127444070-fdb82e5c-d3c2-45f8-b694-0325f3cb9fab.png)  |\r\n\r\n## How has this been tested?\r\n1. Enable TT1 Blocks theme\r\n2. Create a new post.\r\n3. The sidebar should render templates selection.\r\n\r\n## Types of changes\r\nPerformance\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54861",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54861",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54861.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54861.patch",
+			"merged_at": "2023-09-28T15:25:23Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nThis PR removes duplicate template areas from the sidebar when in Site View.\r\n\r\nThe list of areas is based on the template parts used on the page, but we may use some template parts twice. \r\n\r\n## Why?\r\nWe only want to display these template areas and corresponding parts once in the sidebar even if they are used multiple times.\r\n\r\n## How?\r\nBy making sure that `getFilteredTemplatePartBlocks` only returns one instance of each `templateId`, making them unique\r\n\r\n## Screenshot\r\n<img width=\"436\" alt=\"Screenshot 2023-09-28 at 15 56 20\" src=\"https://github.com/WordPress/gutenberg/assets/275961/12fc1521-80a8-427e-8ed0-71a2143b713d\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54861/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33740",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33740/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33740/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33740/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33740",
-		"id": 955404874,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MTYxMDM4",
-		"number": 33740,
-		"title": "[RNMobile] Fix UBE's Inaccessible \"More\" Toolbar Item on Android",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54856",
+		"id": 1915129551,
+		"node_id": "PR_kwDOBNHdeM5bUUof",
+		"number": 54856,
+		"title": "Don’t use TypeScript files in scripts package",
 		"user": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "swissspidy",
+			"id": 841956,
+			"node_id": "MDQ6VXNlcjg0MTk1Ng==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/841956?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/swissspidy",
+			"html_url": "https://github.com/swissspidy",
+			"followers_url": "https://api.github.com/users/swissspidy/followers",
+			"following_url": "https://api.github.com/users/swissspidy/following{/other_user}",
+			"gists_url": "https://api.github.com/users/swissspidy/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/swissspidy/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/swissspidy/subscriptions",
+			"organizations_url": "https://api.github.com/users/swissspidy/orgs",
+			"repos_url": "https://api.github.com/users/swissspidy/repos",
+			"events_url": "https://api.github.com/users/swissspidy/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/swissspidy/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			},
 			{
-				"id": 1999059055,
-				"node_id": "MDU6TGFiZWwxOTk5MDU5MDU1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/CSS%20Styling",
-				"name": "CSS Styling",
-				"color": "63e2d2",
+				"id": 978007737,
+				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
+				"name": "[Package] Scripts",
+				"color": "ed2572",
 				"default": false,
-				"description": "Related to editor and front end styles, CSS-specific issues."
+				"description": "/packages/scripts"
 			}
 		],
 		"state": "closed",
@@ -9328,13 +10045,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9357,91 +10074,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-29T02:48:49Z",
-		"updated_at": "2021-08-02T18:22:05Z",
-		"closed_at": "2021-08-02T18:21:37Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 5,
+		"created_at": "2023-09-27T09:52:57Z",
+		"updated_at": "2023-10-02T15:05:25Z",
+		"closed_at": "2023-09-27T12:32:34Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33740",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33740",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33740.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33740.patch"
-		},
-		"body": "Fixes https://github.com/WordPress/gutenberg/issues/33592\r\n\r\n`gutenberg-mobile`: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3771\r\n\r\n## Brief Description\r\n\r\nThe \"more\" toolbar item isn't currently accessible from the Unsupported Block Editor (UBE) within the Android app. As outlined in https://github.com/WordPress/gutenberg/issues/33592, tapping on the toolbar items results in a flash of a dropdown menu, but that menu instantly disappears. This PR includes a fix for that.\r\n\r\n## More Detailed/Technical Description\r\n\r\nThe UBE is essentially the same editor that loads in the web, with a key difference being that we override some of the default CSS in [the /editor-style-overrides.css file](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css). In that CSS file, we're currently attempting to hide all but one item in the dropdown menu associated with the \"more\" toolbar item. The only item we want to display is the link to **Show More Settings**.\r\n\r\n| Default web view | HTML + class names |\r\n| ------------- | ------------- |\r\n| <img src=\"https://user-images.githubusercontent.com/2998162/127452966-3e670a89-ce55-4705-b9e2-98a288b86fc2.png\" width=\"100%\"> | <img src=\"https://user-images.githubusercontent.com/2998162/127453401-55f7a040-81c7-49bb-a7d9-56ce3be763a2.png\" width=\"100%\"> |\r\n\r\nYou'll see from the above screenshot of the dropdown menu's HTML, that there aren't any specific class names we can target to achieve our goal of only displaying the **Show More Settings** link. As such, [the `:first-child` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) is [being used here to target it](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css#L68):\r\n\r\n```\r\n/* Remove all buttons from the component menu group inside \\'...\\' button in block toolbar */\r\n.components-menu-group > div > button:not(:first-child) {\r\n    display: none;\r\n}\r\n```\r\n\r\n**Show More Settings** isn't _always_ the first child in the dropdown menu. The **Copy** link is the menu's first initial child, with **Show More Settings** being added via JavaScript when the \"more\" toolbar item is added. Although the CSS should still work in theory, as it seems to in Safari, this seems to be the crutch of the reason Chrome isn't applying the selector as expected. Both menus are _at some point_ removed, causing an empty dropdown menu to disappear.\r\n\r\nWith this PR, I've been able to work around the issue with a somewhat hacky-feeling addition to the custom CSS we're using, but I believe it may be the best solution. Specifically, I've targeted the **Copy** link so that it's never technically removed from the document and only hidden by reducing its height to zero. \r\n\r\nFurther details around debugging this issue and commentary around the solution can be found in the **Developer Notes** section below.\r\n\r\n_**Sidenote:** As [I was able to replicate the problem in much older versions of the app](https://github.com/WordPress/gutenberg/issues/33592#issuecomment-884402519), and I'm fairly certain it'd have been spotted when the UBE was first released if it had existed back then, I'm speculating that this has come up due to a change in the way Chrome applies the `:first-child` CSS selector. As outlined in https://github.com/WordPress/gutenberg/issues/21874, this highlights some fragility with the way the UBE is being styled, which is a wider discussion than intended for this specific PR._\r\n\r\n## How has this been tested?\r\n\r\n_**Precondition:** To follow these steps, you'll first need to create a post or page on the web that contains a block that's unsupported in the apps. At the time of writing, the tag cloud block is an option. You will also need to be working on a WordPress.com or a Jetpack-connected site._ \r\n\r\nThe testing steps are as follows:\r\n\r\n* In the Android app, navigate to a post or page containing an unsupported block. \r\n* Tap the **?** icon to the unsupported block's upper right and then **Edit using web editor**.\r\n* Tap the \"more\" icon in the editor's toolbar i.e. the last icon in the toolbar's list, it has three dots.\r\n* Verify that you see a **More Settings** menu item that you're able to tap on and use with no issues.\r\n\r\nIt'd also be helpful to test the flow on iOS to ensure these changes don't have any unintended side effects on that platform.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nA working version of the dropdown menu on a Pixel 2 emulator, with the changes from this branch:\r\n\r\nhttps://user-images.githubusercontent.com/2998162/127540128-79f89b00-7f71-4258-8c61-e3098f2c3708.mov\r\n\r\n## Developer Notes\r\n\r\n<details>\r\n<summary>Process for Debugging on Chrome</summary>\r\n\r\nThe most straightforward way to debug this issue is to [use Chrome's Device Mode to simulate a mobile device](https://developer.chrome.com/docs/devtools/device-mode/) on the web and then [use the CSS tools](https://developer.chrome.com/docs/devtools/css/) to add the following custom CSS, which is being added to the apps via [the /editor-style-overrides.css file](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css):\r\n\r\n```\r\n.components-menu-group > div > button:not( :first-child ) {\r\n\tdisplay: none;\r\n}\r\n\r\ncomponents-dropdown-menu__menu > div:not( :first-child ) {\r\n\tdisplay: none;\r\n}\r\n```\r\n\r\nWith the above CSS added, it's possible to follow the general steps for reproducing the issue outlined in the original issue at https://github.com/WordPress/gutenberg/issues/33592. We can then use Chrome's inspector tools to further experiment with a CSS fix and add breakpoints to dig further. \r\n\r\nFor our purposes, we're only attempting to update the first portion of the above snippet, the portion with the `.components-menu-group > div > button:not( :first-child )` selector.\r\n\r\nIt's also worth highlighting that, all spaces are removed when the CSS is bundled for the app, which can create issues with the CSS e.g. \".components-dropdown-menu__menu .components-menu-group\" will load as \".components-dropdown-menu__menu.components-menu-group\", with no space together.\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>Experiments</summary>\r\n\r\nI tried different variations of `:first-child` and `:first-of-type`, including the following two snippets, but wasn't able to find a way to get these selectors to work with our goal of only displays **Show More Settings**: \r\n\r\n```\r\n.components-menu-group > div > button {\r\n\tdisplay: none;\r\n}\r\n\r\n\r\n.components-menu-group > div > button:first-child {\r\n\tdisplay: block;\r\n}\r\n```\r\n\r\n```\r\n.components-menu-group > div > button {\r\n\tdisplay: none;\r\n}\r\n\r\n\r\n.components-menu-group > div > button:first-of-type {\r\n\tdisplay: block;\r\n}\r\n```\r\n\r\n</details>\r\n\r\n<details>\r\n<summary>Solution</summary>\r\n\r\nThe only CSS I found to achieve the goal was the following, which stops the second menu item (**Copy**) being removed from the document and hides it from view by setting a height of zero and applying `display: none` to its content.\r\n\r\nI believe the core issue is that **Copy** is the dropdown menu's `:first-child` when the page first loads, with **Show More Settings** being dynamically added upon click. As such, the existing CSS removes both at some point, causing an empty dropdown menu. The below CSS gets around that problem by never removing **Copy** completely from the document.\r\n\r\n```\r\n.components-dropdown-menu__menu\r\n\t> .components-menu-group\r\n\t> div\r\n\t> button:nth-child( 2 ) {\r\n\tdisplay: block;\r\n\tmin-height: 0;\r\n\theight: 0;\r\n\tpadding: 0;\r\n}\r\n\r\n.components-menu-group > div > button:nth-child( 2 ) > span {\r\n\tdisplay: none;\r\n}\r\n\r\n.components-button:focus:not( :disabled ) {\r\n\tbox-shadow: none;\r\n}\r\n```\r\n\r\n</details>\r\n\r\n\r\n## Types of changes\r\n\r\nThis PR introduces a bug fix (a non-breaking change that fixes an issue).\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54856",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54856",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54856.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54856.patch",
+			"merged_at": "2023-09-27T12:32:34Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nThis is a follow-up to #53108, where I added TS files to the scripts package instead of plain JS files.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nI just realized that the scripts package is not using TypeScript, so these files were not converted to JS on build.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nConverts the two files to plain old JS files.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54856/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33739",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33739/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33739/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33739/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33739",
-		"id": 955312278,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MDgxNzI0",
-		"number": 33739,
-		"title": "Fix justification for button block when selected",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54855",
+		"id": 1915073415,
+		"node_id": "PR_kwDOBNHdeM5bUIwZ",
+		"number": 54855,
+		"title": "Add new e2e test for creating a pattern",
 		"user": {
-			"login": "mkaz",
-			"id": 45363,
-			"node_id": "MDQ6VXNlcjQ1MzYz",
-			"avatar_url": "https://avatars.githubusercontent.com/u/45363?v=4",
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/mkaz",
-			"html_url": "https://github.com/mkaz",
-			"followers_url": "https://api.github.com/users/mkaz/followers",
-			"following_url": "https://api.github.com/users/mkaz/following{/other_user}",
-			"gists_url": "https://api.github.com/users/mkaz/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/mkaz/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/mkaz/subscriptions",
-			"organizations_url": "https://api.github.com/users/mkaz/orgs",
-			"repos_url": "https://api.github.com/users/mkaz/repos",
-			"events_url": "https://api.github.com/users/mkaz/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/mkaz/received_events",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1112969457,
-				"node_id": "MDU6TGFiZWwxMTEyOTY5NDU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Buttons",
-				"name": "[Block] Buttons",
-				"color": "6767e5",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 2463256422,
-				"node_id": "MDU6TGFiZWwyNDYzMjU2NDIy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Backport%20to%20WP%20Minor%20Release",
-				"name": "Backport to WP Minor Release",
-				"color": "491d8e",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
+				"color": "fbca04",
 				"default": false,
-				"description": "PRs to be back-ported to a WordPress minor release."
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "kevin940726",
+			"id": 7753001,
+			"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/kevin940726",
+			"html_url": "https://github.com/kevin940726",
+			"followers_url": "https://api.github.com/users/kevin940726/followers",
+			"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+			"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+			"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+			"repos_url": "https://api.github.com/users/kevin940726/repos",
+			"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "kevin940726",
+				"id": 7753001,
+				"node_id": "MDQ6VXNlcjc3NTMwMDE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/7753001?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/kevin940726",
+				"html_url": "https://github.com/kevin940726",
+				"followers_url": "https://api.github.com/users/kevin940726/followers",
+				"following_url": "https://api.github.com/users/kevin940726/following{/other_user}",
+				"gists_url": "https://api.github.com/users/kevin940726/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/kevin940726/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/kevin940726/subscriptions",
+				"organizations_url": "https://api.github.com/users/kevin940726/orgs",
+				"repos_url": "https://api.github.com/users/kevin940726/repos",
+				"events_url": "https://api.github.com/users/kevin940726/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/kevin940726/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9464,238 +10237,310 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-28T23:40:16Z",
-		"updated_at": "2021-08-02T16:48:16Z",
-		"closed_at": "2021-08-02T16:46:43Z",
+		"comments": 3,
+		"created_at": "2023-09-27T09:21:56Z",
+		"updated_at": "2023-09-29T14:26:36Z",
+		"closed_at": "2023-09-27T10:46:01Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33739",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33739",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33739.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33739.patch"
-		},
-		"body": "\r\n## Description\r\n\r\nWhen selecting the button block and applying a justification, the justify doesn't apply until the box is unselected.\r\n\r\nWhat is really happening is when the block is unselected the block appender is removed, and the rules for the block appender is forcing the button all the way to the left so when removed it allows the justification to apply and the block is then centered (or right).\r\n\r\nFixes #33487\r\n\r\n## How has this been tested?\r\n\r\n1. Confirm bug by adding buttons block and justify center or right, see bug #33487\r\n2. Unselect the block to see justification applied\r\n3. Apply PR fix\r\n4. Repeat and notice justification applies immediately\r\n\r\n\r\n![button-justify](https://user-images.githubusercontent.com/45363/127409926-b8794df5-faf1-4e01-ae14-e8772e3e3930.gif)\r\n\r\n\r\n## Types of changes\r\n\r\nThis PR changes the block appender CSS rules that forced justified content all the way to the left. I did extra testing around but any additional checks are welcome to confirm no unintended consequences with the appender elsewhere.\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54855",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54855",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54855.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54855.patch",
+			"merged_at": "2023-09-27T10:46:01Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nA basic e2e test to create a new pattern in the patterns screen.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nTo cover some of the most critical path in the patterns page to allow us to move faster with confidence.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nKnow your tools and write an e2e test! ✍️ \r\n\r\nNote that there are some `// TODO`s that each represents a bug. We'll look into those in follow-up PRs.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\nCI should pass\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54855/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33738",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33738/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33738/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33738/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33738",
-		"id": 955269728,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MDQ1MjM3",
-		"number": 33738,
-		"title": "Example for rest_endpoints filter in PHP",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54851",
+		"id": 1914982440,
+		"node_id": "PR_kwDOBNHdeM5bT09x",
+		"number": 54851,
+		"title": "Fix the ShortcutProvider usage",
 		"user": {
-			"login": "amir2mi",
-			"id": 64708228,
-			"node_id": "MDQ6VXNlcjY0NzA4MjI4",
-			"avatar_url": "https://avatars.githubusercontent.com/u/64708228?v=4",
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/amir2mi",
-			"html_url": "https://github.com/amir2mi",
-			"followers_url": "https://api.github.com/users/amir2mi/followers",
-			"following_url": "https://api.github.com/users/amir2mi/following{/other_user}",
-			"gists_url": "https://api.github.com/users/amir2mi/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/amir2mi/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/amir2mi/subscriptions",
-			"organizations_url": "https://api.github.com/users/amir2mi/orgs",
-			"repos_url": "https://api.github.com/users/amir2mi/repos",
-			"events_url": "https://api.github.com/users/amir2mi/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/amir2mi/received_events",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1388646432,
-				"node_id": "MDU6TGFiZWwxMzg4NjQ2NDMy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/First-time%20Contributor",
-				"name": "First-time Contributor",
-				"color": "a0f762",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Pull request opened by a first-time contributor to Gutenberg repository"
+				"description": "An existing feature does not function as intended"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
-		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
-			"description": null,
-			"creator": {
-				"login": "github-actions[bot]",
-				"id": 41898282,
-				"node_id": "MDM6Qm90NDE4OTgyODI=",
-				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
-				"html_url": "https://github.com/apps/github-actions",
-				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
-				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
-				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
-				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
-				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
-				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
-				"type": "Bot",
-				"site_admin": false
-			},
-			"open_issues": 0,
-			"closed_issues": 113,
-			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+		"assignee": {
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-28T22:06:53Z",
-		"updated_at": "2021-08-03T07:56:08Z",
-		"closed_at": "2021-08-03T06:40:12Z",
+		"comments": 3,
+		"created_at": "2023-09-27T08:29:03Z",
+		"updated_at": "2023-09-29T12:04:24Z",
+		"closed_at": "2023-09-27T10:30:21Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33738",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33738",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33738.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33738.patch"
-		},
-		"body": "`httpMethod` is added recently. It can be set to `POST`, which allows bigger attributes object.\r\nHowever, before WP 5.5 it does not work and gives 404 error. it will be solved with filtered `rest_endpoints` and here is that example.\r\nThanks to @kienstra, who pointed me out [here](https://github.com/studiopress/genesis-custom-blocks/blob/3670937b8d0a7326c7a4e28413c09e48bae457e4/php/Blocks/Loader.php#L613).",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54851",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54851",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54851.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54851.patch",
+			"merged_at": "2023-09-27T10:30:21Z"
+		},
+		"body": "Follow-up to #54080 \r\nFixes the issue raised here https://github.com/WordPress/gutenberg/pull/54080#issuecomment-1733208834\r\n\r\n## What?\r\n\r\nWe currently have two ways of providing the \"context\" for `useShortcut` hook. One is the default context and one is the `ShortcutProvider`. After #54080 we dropped the usage of `ShortcutProvider` in the WordPress pages (edit post, edit site...) but it's still possible to use it for third-party pages... When we removed the `.current` we missed the fact that the `ShortcutProvider` still provides the context as a \"ref\" so its usage in `useShortcut` was triggering JS errors.\r\n\r\nIn the current PR, I'm updating the `ShortcutProvider` to not use a ref and just pass a stable reference to the shortcuts set.\r\n\r\n## Testing Instructions\r\n\r\n1- Update the edit-post package and add a `ShortcutProvider` top level \r\n2- Ensure that there's no JS error",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 1,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54851/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33737",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33737/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33737/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33737/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33737",
-		"id": 955251305,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk5MDI5NTMw",
-		"number": 33737,
-		"title": "Site Editor: Implement a settings object filter",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54850",
+		"id": 1914727319,
+		"node_id": "PR_kwDOBNHdeM5bS9eD",
+		"number": 54850,
+		"title": "Background support: Backport fix for undefined array key",
 		"user": {
-			"login": "jeyip",
-			"id": 5414230,
-			"node_id": "MDQ6VXNlcjU0MTQyMzA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/5414230?v=4",
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jeyip",
-			"html_url": "https://github.com/jeyip",
-			"followers_url": "https://api.github.com/users/jeyip/followers",
-			"following_url": "https://api.github.com/users/jeyip/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jeyip/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jeyip/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jeyip/subscriptions",
-			"organizations_url": "https://api.github.com/users/jeyip/orgs",
-			"repos_url": "https://api.github.com/users/jeyip/repos",
-			"events_url": "https://api.github.com/users/jeyip/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jeyip/received_events",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1604715381,
-				"node_id": "MDU6TGFiZWwxNjA0NzE1Mzgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Full%20Site%20Editing",
-				"name": "[Feature] Full Site Editing",
-				"color": "fbca04",
+				"id": 1299054835,
+				"node_id": "MDU6TGFiZWwxMjk5MDU0ODM1",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Group",
+				"name": "[Block] Group",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Group Block"
 			},
 			{
-				"id": 2706102777,
-				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
-				"name": "[Feature] Site Editor",
+				"id": 1894493554,
+				"node_id": "MDU6TGFiZWwxODk0NDkzNTU0",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Design%20Tools",
+				"name": "[Feature] Design Tools",
 				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Tools that impact the appearance of blocks both to expand the number of tools and improve the experi"
+			},
+			{
+				"id": 3659584252,
+				"node_id": "LA_kwDOBNHdeM7aINL8",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Backport%20from%20WordPress%20Core",
+				"name": "Backport from WordPress Core",
+				"color": "6FCDF3",
+				"default": false,
+				"description": "Pull request that needs to be backported to the a Gutenberg release from WordPress Core"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "jeyip",
-			"id": 5414230,
-			"node_id": "MDQ6VXNlcjU0MTQyMzA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/5414230?v=4",
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jeyip",
-			"html_url": "https://github.com/jeyip",
-			"followers_url": "https://api.github.com/users/jeyip/followers",
-			"following_url": "https://api.github.com/users/jeyip/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jeyip/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jeyip/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jeyip/subscriptions",
-			"organizations_url": "https://api.github.com/users/jeyip/orgs",
-			"repos_url": "https://api.github.com/users/jeyip/repos",
-			"events_url": "https://api.github.com/users/jeyip/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jeyip/received_events",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "jeyip",
-				"id": 5414230,
-				"node_id": "MDQ6VXNlcjU0MTQyMzA=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/5414230?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jeyip",
-				"html_url": "https://github.com/jeyip",
-				"followers_url": "https://api.github.com/users/jeyip/followers",
-				"following_url": "https://api.github.com/users/jeyip/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jeyip/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jeyip/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jeyip/subscriptions",
-				"organizations_url": "https://api.github.com/users/jeyip/orgs",
-				"repos_url": "https://api.github.com/users/jeyip/repos",
-				"events_url": "https://api.github.com/users/jeyip/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jeyip/received_events",
+				"login": "andrewserong",
+				"id": 14988353,
+				"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/andrewserong",
+				"html_url": "https://github.com/andrewserong",
+				"followers_url": "https://api.github.com/users/andrewserong/followers",
+				"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+				"repos_url": "https://api.github.com/users/andrewserong/repos",
+				"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewserong/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9718,100 +10563,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-28T21:33:27Z",
-		"updated_at": "2021-08-03T17:00:08Z",
-		"closed_at": "2021-08-03T16:59:29Z",
+		"comments": 1,
+		"created_at": "2023-09-27T05:29:32Z",
+		"updated_at": "2023-09-27T06:11:52Z",
+		"closed_at": "2023-09-27T06:11:20Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33737",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33737",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33737.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33737.patch"
-		},
-		"body": "Potentially solves https://github.com/WordPress/gutenberg/issues/33736\r\n\r\n<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nThe **post editor** has the `block_editor_settings_all` and `block_editor_settings` filter that allows us to modify the `settings` object injected into the block editor. A similar filter, however, doesn't exist for the site editor.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n**There should be no visible changes to the UI.**\r\n\r\n1. Set up local Gutenberg dev environment\r\n2. Activate a block based theme\r\n3. Navigate to the site editor\r\n4. Smoke test the site editor to ensure that updates still persist correctly, block insertion still functions as expected, etc.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nNew feature\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54850",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54850",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54850.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54850.patch",
+			"merged_at": "2023-09-27T06:11:20Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nBackport https://github.com/WordPress/wordpress-develop/pull/5326\r\n\r\nCheck that `$block['attrs']` is set and is an array before assigning to `$block_attributes` in the Background image block support.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nAs raised in https://core.trac.wordpress.org/ticket/59468 it is possible for this array key not to exist, so this check makes for safe accessing of the block attributes.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nCheck that the `attrs` value is set and is an array before using it.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\nSmoke testing:\r\n\r\n1. Add a couple of Group blocks to a post or page\r\n2. Set one of the Group blocks to have a background image\r\n3. Ensure the background image is displayed correctly on the site frontend",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54850/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33734",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33734/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33734/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33734/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33734",
-		"id": 955144677,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4OTM3MTI3",
-		"number": 33734,
-		"title": "Block patterns: Add translation context on titles",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54847",
+		"id": 1914507976,
+		"node_id": "PR_kwDOBNHdeM5bSOLb",
+		"number": 54847,
+		"title": "Components: move `ContextSystemProvider` out of `/ui`",
 		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 596965480,
-				"node_id": "MDU6TGFiZWw1OTY5NjU0ODA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Internationalization%20(i18n)",
-				"name": "Internationalization (i18n)",
-				"color": "e881e2",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 1882657161,
-				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
-				"name": "[Feature] Patterns",
-				"color": "fbca04",
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "brookewp",
+				"id": 35543432,
+				"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+				"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/brookewp",
+				"html_url": "https://github.com/brookewp",
+				"followers_url": "https://api.github.com/users/brookewp/followers",
+				"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+				"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+				"organizations_url": "https://api.github.com/users/brookewp/orgs",
+				"repos_url": "https://api.github.com/users/brookewp/repos",
+				"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/brookewp/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9834,131 +10726,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-28T18:51:55Z",
-		"updated_at": "2021-08-03T20:17:16Z",
-		"closed_at": "2021-08-03T18:50:17Z",
+		"comments": 2,
+		"created_at": "2023-09-27T01:07:19Z",
+		"updated_at": "2023-09-27T19:16:54Z",
+		"closed_at": "2023-09-27T19:16:33Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33734",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33734",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33734.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33734.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nAdd context to block pattern titles.\r\n\r\nSee #33715\r\n\r\n## Types of changes\r\nEnhancement\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54847",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54847",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54847.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54847.patch",
+			"merged_at": "2023-09-27T19:16:33Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis expands on the work started in https://github.com/WordPress/gutenberg/pull/52953 to remove the `ui` folder. \r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThere isn't a need for the `ui` folder anymore - more details can be found in above-mentioned PR.\r\n\r\n>For context, there is no longer a need to keep a separate /ui folder around, so we want to move toward removing this extra folder grouping.\r\nTo begin with, there are a lot of experimental components in this folder that are not used anywhere, and are no longer part of our overall component strategy. They add unnecessary overhead when auditing or just looking for components. \r\n\r\nThe next step will be to move anything still used from `ui/utils` to `packages/components/src/utils`, so the `ui` folder can be removed.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nThis moves the `context` folder out of the `ui` folder and replaces the imports, links, and mentions of `ui/context`. \r\n\r\n## Testing Instructions\r\n\r\nTests pass and `npm run build` succeeds without error \r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54847/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33733",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33733/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33733/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33733/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33733",
-		"id": 954931785,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4NzUzOTUx",
-		"number": 33733,
-		"title": "Template part selection popover - minor style updates for visiblity.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54846",
+		"id": 1914430492,
+		"node_id": "PR_kwDOBNHdeM5bR9sg",
+		"number": 54846,
+		"title": "Search block: allow space for input field only when form expanded",
 		"user": {
-			"login": "Addison-Stavlo",
-			"id": 28742426,
-			"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-			"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Addison-Stavlo",
-			"html_url": "https://github.com/Addison-Stavlo",
-			"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-			"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-			"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-			"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-			"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1604715381,
-				"node_id": "MDU6TGFiZWwxNjA0NzE1Mzgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Full%20Site%20Editing",
-				"name": "[Feature] Full Site Editing",
-				"color": "fbca04",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 2373088071,
-				"node_id": "MDU6TGFiZWwyMzczMDg4MDcx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Template-Part",
-				"name": "[Block] Template-Part",
+				"id": 1539734701,
+				"node_id": "MDU6TGFiZWwxNTM5NzM0NzAx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Search",
+				"name": "[Block] Search",
 				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Search Block - used to display a search field"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Addison-Stavlo",
-			"id": 28742426,
-			"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-			"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Addison-Stavlo",
-			"html_url": "https://github.com/Addison-Stavlo",
-			"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-			"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-			"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-			"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-			"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Addison-Stavlo",
-				"id": 28742426,
-				"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-				"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/Addison-Stavlo",
-				"html_url": "https://github.com/Addison-Stavlo",
-				"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-				"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-				"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-				"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-				"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -9981,122 +10889,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-28T14:36:38Z",
-		"updated_at": "2021-07-30T16:18:27Z",
-		"closed_at": "2021-07-30T16:18:02Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 8,
+		"created_at": "2023-09-26T23:21:13Z",
+		"updated_at": "2023-10-04T00:27:06Z",
+		"closed_at": "2023-09-27T03:18:03Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33733",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33733",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33733.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33733.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nRelated to discussion in https://github.com/WordPress/gutenberg/issues/29950.  This PR adds some minor style changes to make previews more visible in the selection popover.  While we may still need to reconsider the selection flow/component in the future, these minor changes should help improve the readability of the current state until a new design is introduced.\r\n\r\nCurrently on trunk, there are no borders (save hover and focus) to the items or background to the selection, making it difficult to tell where one preview starts and the other begins:\r\n\r\n![Screen Shot 2021-07-28 at 10 34 24 AM](https://user-images.githubusercontent.com/28742426/127341222-88fdae72-9307-409f-9576-ee0188e653c7.png)\r\n\r\nHere we try adding a gray border to allow the previews to stand out together with their title:\r\n\r\n![Screen Shot 2021-07-30 at 8 23 05 AM](https://user-images.githubusercontent.com/28742426/127652426-8cd19ad4-e29a-4707-b755-fda098ad2a8c.png)\r\n\r\n\r\n\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\nTest the template part selection component in the site and post editors.  This can be accessed from a placeholder block's (insert header, footer, or template part) \"Choose existing\" option, or the \"replace\" option in the block toolbar of an existing template part.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54846",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54846",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54846.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54846.patch",
+			"merged_at": "2023-09-27T03:18:03Z"
+		},
+		"body": "Resolves https://github.com/WordPress/gutenberg/issues/54842\r\n\r\n## What? 🙈 \r\nA follow up to https://github.com/WordPress/gutenberg/pull/54773\r\n\r\n1. When a search box has an expandable input field and is in \"button only\" mode, provide a max-width for the button and take away 100px when the form is expanded. \r\n2. When the search form is collapsed revert to max-width of 100%.\r\n\r\n## Why? 🙉 \r\n1.  To avoid text wrapping and overflow in narrow viewport widths. See https://github.com/WordPress/gutenberg/pull/53373#discussion_r1285736216 for context\r\n2. To ensure the button fills its container. (First fix attempt in https://github.com/WordPress/gutenberg/pull/54773) The input is not there so we don't need the 100px.\r\n\r\n## How? 🙊 \r\nSee \"What\"\r\n\r\n## Testing Instructions\r\n1. Create or edit a navigation block in a theme header, and add a search block.\r\n2. Add a few search blocks in a post, some with lots of search button text and with the input field hidden/displayed. \r\n3. For icon-only buttons in the navigation block, the button should stretch the full width. See test steps in https://github.com/WordPress/gutenberg/pull/54773\r\n4. In narrow viewports the search button with text should not be cut off and single words shouldn't wrap (unless there are spaces between multiple words) See test steps in https://github.com/WordPress/gutenberg/pull/53373\r\n\r\n### Some example block code\r\n\r\n```html\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"buttonText\":\"天気 天気 天気 天気 天気 天気 天気 天気 天気 天気 天気 天気 天気\",\"buttonPosition\":\"button-only\"} /-->\r\n\r\n<!-- wp:search {\"label\":\"Search\",\"showLabel\":false,\"buttonText\":\"天気\",\"buttonPosition\":\"button-inside\"} /-->\r\n```\r\n\r\n\r\n\r\n\r\n\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n\r\n\r\n\r\n### With icon as button\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/702c7ce6-afd5-4956-9316-0f443dbc881b\r\n\r\n### With button text\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/3c2e0250-e454-4632-bc87-b1b37493755c\r\n\r\n## No text overflow\r\n\r\n\r\n<img width=\"358\" alt=\"Screenshot 2023-09-27 at 9 08 29 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/debce5e9-0c55-47d5-b2e9-d1b4bc57acbb\">\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/65e74997-44a8-4db3-a9b3-ab3a4f367df6\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54846/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33732",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33732/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33732/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33732/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33732",
-		"id": 954881033,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4NzA4OTkx",
-		"number": 33732,
-		"title": "[RNMobile] Use random `postId` in integration tests",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54844",
+		"id": 1914291830,
+		"node_id": "PR_kwDOBNHdeM5bRfjn",
+		"number": 54844,
+		"title": "Move mime-type collection generation to a function that can be tested…",
 		"user": {
-			"login": "fluiddot",
-			"id": 14905380,
-			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"login": "pbking",
+			"id": 146530,
+			"node_id": "MDQ6VXNlcjE0NjUzMA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/146530?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/fluiddot",
-			"html_url": "https://github.com/fluiddot",
-			"followers_url": "https://api.github.com/users/fluiddot/followers",
-			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-			"repos_url": "https://api.github.com/users/fluiddot/repos",
-			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"url": "https://api.github.com/users/pbking",
+			"html_url": "https://github.com/pbking",
+			"followers_url": "https://api.github.com/users/pbking/followers",
+			"following_url": "https://api.github.com/users/pbking/following{/other_user}",
+			"gists_url": "https://api.github.com/users/pbking/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/pbking/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/pbking/subscriptions",
+			"organizations_url": "https://api.github.com/users/pbking/orgs",
+			"repos_url": "https://api.github.com/users/pbking/repos",
+			"events_url": "https://api.github.com/users/pbking/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/pbking/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "fluiddot",
-			"id": 14905380,
-			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/fluiddot",
-			"html_url": "https://github.com/fluiddot",
-			"followers_url": "https://api.github.com/users/fluiddot/followers",
-			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-			"repos_url": "https://api.github.com/users/fluiddot/repos",
-			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "fluiddot",
-				"id": 14905380,
-				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/fluiddot",
-				"html_url": "https://github.com/fluiddot",
-				"followers_url": "https://api.github.com/users/fluiddot/followers",
-				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-				"repos_url": "https://api.github.com/users/fluiddot/repos",
-				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10119,122 +11012,165 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 3,
-		"created_at": "2021-07-28T13:54:23Z",
-		"updated_at": "2021-07-28T18:33:49Z",
-		"closed_at": "2021-07-28T18:33:20Z",
+		"created_at": "2023-09-26T20:54:48Z",
+		"updated_at": "2023-09-29T12:04:48Z",
+		"closed_at": "2023-09-27T15:58:30Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33732",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33732",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33732.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33732.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nWe were using the same `postId` value when initializing the editor in the integration tests, due to incoming changes related to the logic of loading the editor (https://github.com/WordPress/gutenberg/pull/33727), now we need to assure that each test uses a unique `postId` value.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n- Verify that all the tests pass by running the command `npm run native test` or by the CI check.\r\n\r\n## Screenshots <!-- if applicable -->\r\nN/A\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54844",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54844",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54844.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54844.patch",
+			"merged_at": "2023-09-27T15:58:30Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nRefactors the logic that determines which mime-types are expected based on the PHP version into a function so that it may be unit tested and given better comments.\r\n\r\n## How?\r\nPuts the existing logic into a static function that is used in place of the previous constant and added unit test coverage for that function.\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54844/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33727",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33727/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33727/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33727/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33727",
-		"id": 954756916,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4NjAyMDQ5",
-		"number": 33727,
-		"title": "Avoid double parsing the content when loading the editor",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54843",
+		"id": 1914253536,
+		"node_id": "PR_kwDOBNHdeM5bRW9R",
+		"number": 54843,
+		"title": "Footnotes: Add aria-label to return links",
 		"user": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 644027893,
+				"node_id": "MDU6TGFiZWw2NDQwMjc4OTM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design%20Feedback",
+				"name": "Needs Design Feedback",
+				"color": "0e8a16",
+				"default": false,
+				"description": "Needs general design feedback."
+			},
+			{
+				"id": 1086171268,
+				"node_id": "MDU6TGFiZWwxMDg2MTcxMjY4",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback",
+				"name": "Needs Accessibility Feedback",
+				"color": "ffbcbd",
+				"default": false,
+				"description": "Need input from accessibility"
+			},
+			{
+				"id": 5654261232,
+				"node_id": "LA_kwDOBNHdeM8AAAABUQUt8A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Footnotes",
+				"name": "[Block] Footnotes",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Footnotes Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "youknowriad",
-			"id": 272444,
-			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/youknowriad",
-			"html_url": "https://github.com/youknowriad",
-			"followers_url": "https://api.github.com/users/youknowriad/followers",
-			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-			"repos_url": "https://api.github.com/users/youknowriad/repos",
-			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "youknowriad",
-				"id": 272444,
-				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"login": "alexstine",
+				"id": 13755480,
+				"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/youknowriad",
-				"html_url": "https://github.com/youknowriad",
-				"followers_url": "https://api.github.com/users/youknowriad/followers",
-				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
-				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
-				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
-				"repos_url": "https://api.github.com/users/youknowriad/repos",
-				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"url": "https://api.github.com/users/alexstine",
+				"html_url": "https://github.com/alexstine",
+				"followers_url": "https://api.github.com/users/alexstine/followers",
+				"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+				"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+				"organizations_url": "https://api.github.com/users/alexstine/orgs",
+				"repos_url": "https://api.github.com/users/alexstine/repos",
+				"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/alexstine/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10257,122 +11193,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 6,
-		"created_at": "2021-07-28T11:26:41Z",
-		"updated_at": "2021-07-29T09:33:48Z",
-		"closed_at": "2021-07-29T09:33:20Z",
+		"comments": 21,
+		"created_at": "2023-09-26T20:30:03Z",
+		"updated_at": "2023-10-01T23:22:40Z",
+		"closed_at": "2023-09-28T05:44:03Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33727",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33727",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33727.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33727.patch"
-		},
-		"body": "In the couple last WP releases, we introduced the EntityProvider and the `useEntityBlockEditor` React hook which allows us to retrieve the \"blocks\" of a given post entity. This hook also makes it easy to create block editors for widgets screens, reusable blocks, templates parts... \r\n\r\nThe hook need to transform the \"content\" of the entity to \"blocks\" by parsing it on initial render if the blocks are not already parsed.\r\n\r\nThat said, historically in the post editor, parsing was done in the `setupEditor` action which is called in theory before that hook, the problem though is that the React effect is run before the `useSelect` call subscription triggers after `setupEditor` meaning the `blocks` will always be empty causing a double parsing.\r\n\r\nThe solution I came with is to avoid the parsing in `setupEditor` unless necessary. Ideally the `setupEditor` action shouldn't be needed at all and its logic moved to the components themselves. In other words, the \"editor\" should always be \"setup\"/\"ready\". This is something we've struggled with for a long time but I think we're making good progress towards that .\r\n\r\nRight now, parsing is still done in `setupEditor` when a \"template\" is provided, that said, this is rare and especially for long posts (where the performance issues happen).\r\n\r\n**Notes**\r\n\r\n - I had to change the order of some action calls in the `setupEditor` action. I don't think it's impactful but I know initialization is e2e tests heavily, so let's see the impact here.\r\n - This should result in a gain of half a second at least for long posts (like the one we test with)",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54843",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54843",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54843.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54843.patch",
+			"merged_at": "2023-09-28T05:44:03Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nAdds `aria-label` to the front-end footnotes return links.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nLinks with icons are not accessible.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nAdds the `aria-label` attribute.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Insert a footnotes block.\r\n2. Create a footnote from a paragraph block by selecting More and then Footnote in the block toolbar.\r\n3. Save.\r\n4. View the front-end.\r\n5. Notice how the link has `aria-label=\"Back to footnote reference X\"` for the number.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54843/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33725",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33725/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33725/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33725/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33725",
-		"id": 954721914,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4NTcxODcw",
-		"number": 33725,
-		"title": "Core Data: Deprecate `getAuthors` in favor of `getUsers`",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54841",
+		"id": 1914130281,
+		"node_id": "PR_kwDOBNHdeM5bQ75T",
+		"number": 54841,
+		"title": "Make the reset styles command consistent",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 995368074,
-				"node_id": "MDU6TGFiZWw5OTUzNjgwNzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Core%20data",
-				"name": "[Package] Core data",
+				"id": 793903067,
+				"node_id": "MDU6TGFiZWw3OTM5MDMwNjc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Copy",
+				"name": "[Type] Copy",
+				"color": "e868f9",
+				"default": false,
+				"description": "Issues or PRs that need copy editing assistance"
+			},
+			{
+				"id": 5531793302,
+				"node_id": "LA_kwDOBNHdeM8AAAABSbh3lg",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Commands",
+				"name": "[Package] Commands",
 				"color": "ed2572",
 				"default": false,
-				"description": "/packages/core-data"
+				"description": "/packages/commands"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "richtabor",
+				"id": 1813435,
+				"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/richtabor",
+				"html_url": "https://github.com/richtabor",
+				"followers_url": "https://api.github.com/users/richtabor/followers",
+				"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+				"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+				"organizations_url": "https://api.github.com/users/richtabor/orgs",
+				"repos_url": "https://api.github.com/users/richtabor/repos",
+				"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/richtabor/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10395,122 +11356,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-28T10:42:36Z",
-		"updated_at": "2021-07-28T18:00:34Z",
-		"closed_at": "2021-07-28T18:00:04Z",
+		"comments": 2,
+		"created_at": "2023-09-26T19:03:11Z",
+		"updated_at": "2023-09-27T11:33:28Z",
+		"closed_at": "2023-09-27T11:33:05Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33725",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33725",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33725.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33725.patch"
-		},
-		"body": "## Description\r\nDeprecates `getAuthors` in favor of `getUsers` and removes `__unstableGetAuthor` selector.\r\n\r\n## How has this been tested?\r\nRunning following code should display deprecation message in console:\r\n\r\n```js\r\nwp.data.select('core').getAuthors();\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n![CleanShot 2021-07-28 at 14 40 19](https://user-images.githubusercontent.com/240569/127309189-4b0bb6d5-d2cb-48ec-9699-1fc1b5e2a46b.png)\r\n\r\n## Types of changes\r\nDeprecation\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54841",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54841",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54841.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54841.patch",
+			"merged_at": "2023-09-27T11:33:05Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nCleaning up the \"Reset styles to defaults\" command to be consistent with resetting templates/template parts. \r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n1. Open the site editor.\r\n2. Make changes to global styles.\r\n3. Open the command palette.\r\n4. Search for \"reset\".\r\n5. See changes.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n|<img width=\"443\" alt=\"before\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/f540d0fa-261d-425f-b2d1-2e75a3fb37b8\">|<img width=\"436\" alt=\"CleanShot 2023-09-26 at 14 59 41\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/347c6b3b-a729-448a-9b55-b07b120e26b2\">|\r\n\r\n\r\nRelated (the reset command for templates/parts): \r\n<img width=\"417\" alt=\"CleanShot 2023-09-26 at 15 01 42\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/540acbd9-a194-4b73-bc70-8536ea87fc03\">\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54841/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33721",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33721/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33721/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33721/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33721",
-		"id": 954586831,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4NDU3Nzkz",
-		"number": 33721,
-		"title": "E2E: Block Hierarchy Navigation wait for the column to be highlighted",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54840",
+		"id": 1914088839,
+		"node_id": "PR_kwDOBNHdeM5bQyss",
+		"number": 54840,
+		"title": "Fix ToolSelector popover variant",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1699237849,
-				"node_id": "MDU6TGFiZWwxNjk5MjM3ODQ5",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20E2E%20Tests",
-				"name": "[Package] E2E Tests",
-				"color": "ed2572",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "/packages/e2e-tests"
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "richtabor",
+				"id": 1813435,
+				"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/richtabor",
+				"html_url": "https://github.com/richtabor",
+				"followers_url": "https://api.github.com/users/richtabor/followers",
+				"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+				"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+				"organizations_url": "https://api.github.com/users/richtabor/orgs",
+				"repos_url": "https://api.github.com/users/richtabor/repos",
+				"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/richtabor/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10533,140 +11519,116 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-07-28T08:00:11Z",
-		"updated_at": "2021-07-28T10:43:49Z",
-		"closed_at": "2021-07-28T10:43:28Z",
+		"comments": 8,
+		"created_at": "2023-09-26T18:38:46Z",
+		"updated_at": "2023-10-02T09:39:48Z",
+		"closed_at": "2023-09-29T15:29:40Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33721",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33721",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33721.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33721.patch"
-		},
-		"body": "## Description\r\nThe \"Block Hierarchy Navigation\" e2e test [fails](https://github.com/WordPress/gutenberg/runs/3162134316) from time to time. Unfortunately, I'm unable to reproduce this locally.\r\n\r\nBased on the screenshot from the artifacts, it looks like block selection happens before navigation reaches the third and last column block.\r\n\r\nI'm adding an extra check to verify that the third block is highlighted before selecting it. This should also give keyboard navigation a little spare time to finish.\r\n\r\n## How has this been tested?\r\nLocally using the following command:\r\n\r\n```\r\nnpm run test-e2e -- packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js\r\n```\r\n\r\n## Screenshots <!-- if applicable -->\r\n![should navigate block hierarchy using only the keyboard](https://user-images.githubusercontent.com/240569/127285118-90c8af20-a50e-4729-927c-6fa68dd7bfc2.jpg)\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54840",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54840",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54840.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54840.patch",
+			"merged_at": "2023-09-29T15:29:40Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nUse the proper popover variant for the ToolSelector in the editor header.\r\n\r\n## Why?\r\nIt's inconsistent with other popovers not connected to the block toolbar.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n1. Open a post or page.\r\n2. Select the \"Tools\" control in the editor header.\r\n3. See the lighter border with a shadow, instead of the hard dark line.\r\n\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n|<img width=\"436\" alt=\"CleanShot 2023-09-26 at 14 35 49\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/cd91c959-c04c-4c9a-9016-6245c4d102b0\">|<img width=\"432\" alt=\"CleanShot 2023-09-26 at 14 36 27\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/68f5a343-ea97-4a40-82dc-e5e0402eb487\">|\r\n\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54840/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33717",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33717/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33717/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33717/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33717",
-		"id": 954302691,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4MjE5Mjg1",
-		"number": 33717,
-		"title": "Components: update snackbar to use framer motion instead of react spring",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54839",
+		"id": 1914077343,
+		"node_id": "PR_kwDOBNHdeM5bQwIw",
+		"number": 54839,
+		"title": "Use \"Not synced\" in place of \"Standard\" nomenclature for patterns",
 		"user": {
-			"login": "gwwar",
-			"id": 1270189,
-			"node_id": "MDQ6VXNlcjEyNzAxODk=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1270189?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/gwwar",
-			"html_url": "https://github.com/gwwar",
-			"followers_url": "https://api.github.com/users/gwwar/followers",
-			"following_url": "https://api.github.com/users/gwwar/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gwwar/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gwwar/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gwwar/subscriptions",
-			"organizations_url": "https://api.github.com/users/gwwar/orgs",
-			"repos_url": "https://api.github.com/users/gwwar/repos",
-			"events_url": "https://api.github.com/users/gwwar/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gwwar/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 783337752,
+				"node_id": "MDU6TGFiZWw3ODMzMzc3NTI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Synced%20Patterns",
+				"name": "[Feature] Synced Patterns",
+				"color": "fbca04",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "Related to synced patterns (formerly reusable blocks)"
 			},
 			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 793903067,
+				"node_id": "MDU6TGFiZWw3OTM5MDMwNjc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Copy",
+				"name": "[Type] Copy",
+				"color": "e868f9",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Issues or PRs that need copy editing assistance"
 			},
 			{
-				"id": 1298994603,
-				"node_id": "MDU6TGFiZWwxMjk4OTk0NjAz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Post",
-				"name": "[Package] Edit Post",
-				"color": "ed2572",
+				"id": 1882657161,
+				"node_id": "MDU6TGFiZWwxODgyNjU3MTYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Patterns",
+				"name": "[Feature] Patterns",
+				"color": "fbca04",
 				"default": false,
-				"description": "packages/edit-post"
+				"description": "A collection of blocks that can be synced (previously reusable blocks) or unsynced"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "gwwar",
-			"id": 1270189,
-			"node_id": "MDQ6VXNlcjEyNzAxODk=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1270189?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/gwwar",
-			"html_url": "https://github.com/gwwar",
-			"followers_url": "https://api.github.com/users/gwwar/followers",
-			"following_url": "https://api.github.com/users/gwwar/following{/other_user}",
-			"gists_url": "https://api.github.com/users/gwwar/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/gwwar/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/gwwar/subscriptions",
-			"organizations_url": "https://api.github.com/users/gwwar/orgs",
-			"repos_url": "https://api.github.com/users/gwwar/repos",
-			"events_url": "https://api.github.com/users/gwwar/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/gwwar/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "gwwar",
-				"id": 1270189,
-				"node_id": "MDQ6VXNlcjEyNzAxODk=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1270189?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/gwwar",
-				"html_url": "https://github.com/gwwar",
-				"followers_url": "https://api.github.com/users/gwwar/followers",
-				"following_url": "https://api.github.com/users/gwwar/following{/other_user}",
-				"gists_url": "https://api.github.com/users/gwwar/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/gwwar/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/gwwar/subscriptions",
-				"organizations_url": "https://api.github.com/users/gwwar/orgs",
-				"repos_url": "https://api.github.com/users/gwwar/repos",
-				"events_url": "https://api.github.com/users/gwwar/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/gwwar/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10689,118 +11651,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 18,
-		"created_at": "2021-07-27T22:08:50Z",
-		"updated_at": "2021-08-05T17:36:56Z",
-		"closed_at": "2021-08-05T16:25:27Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 5,
+		"created_at": "2023-09-26T18:32:07Z",
+		"updated_at": "2023-09-29T12:04:36Z",
+		"closed_at": "2023-09-27T11:35:21Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33717",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33717",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33717.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33717.patch"
-		},
-		"body": "This PR experiments with using framer motion instead of react spring for the snackbar component. Since Framer Motion is ~30kb gzipped I also ~externalized it~ exported this from `@wordpress/components` once to avoid bloating each package that it's used in.\r\n\r\nOne benefit here is that framer motion supports `height: auto` which allows us to remove ref and component state management. 🤔 ~There's quite a bundle size jump here to consider for a single component, so I may explore trying to whittle down.~\r\n\r\nResults overall, are are encouraging. I'd like to see if we can update the Persistent List View to use drag and add animations for the drawers opening and closing next.\r\n\r\n| Size Impacts |\r\n|----|\r\n| <img width=\"602\" alt=\"Screen Shot 2021-08-04 at 9 54 40 AM\" src=\"https://user-images.githubusercontent.com/1270189/128222441-287b2cd3-4536-4add-94a0-a8094f46cfb2.png\"> |\r\n\r\n#### After - Motion:\r\n\r\nhttps://user-images.githubusercontent.com/1270189/127399049-aa5a91fe-88e9-4783-857e-7531e9adcf8b.mp4\r\n\r\n#### After - Reduce Motion\r\n\r\nhttps://user-images.githubusercontent.com/1270189/127397712-3a733583-5e04-485c-bf2f-791e01950e4d.mp4\r\n\r\n#### Before - Motion\r\n\r\nhttps://user-images.githubusercontent.com/1270189/127397745-b6b3c29f-5952-4e1a-87c4-cc27564ad7f7.mp4\r\n\r\n#### Before - Reduce Motion\r\n\r\nhttps://user-images.githubusercontent.com/1270189/127397786-38325ff9-563c-4446-a2a7-a0b528d19b80.mp4\r\n \r\n\r\n### Testing Instructions\r\n\r\nIn console type:\r\n```\r\nwp.data.dispatch('core/notices').createNotice(\r\n\t\t'info',\r\n\t\t'Post published.',\r\n\t\t{\r\n\t\t\ttype: 'snackbar',\r\n\t\t\tactions: [\r\n\t\t\t\t{\r\n\t\t\t\t\tonClick: () => {},\r\n\t\t\t\t\tlabel: 'View post'\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t);\r\n```\r\nOr perform an action like publishing or updating a page.\r\n\r\nVerify that folks are happy with how framer motion is being exported.\r\n\r\n| Verify that there are no regressions in the preview panel |\r\n|-----|\r\n| <img width=\"245\" alt=\"Screen Shot 2021-08-03 at 12 10 13 PM\" src=\"https://user-images.githubusercontent.com/1270189/128072345-28934d99-042b-4ca7-ada5-fcd5eda4510c.png\"> |\r\n\r\n\r\n\r\n\r\n\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54839",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54839",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54839.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54839.patch",
+			"merged_at": "2023-09-27T11:35:21Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nUses \"Not synced\" in place of \"Standard\" nomenclature for patterns that are not synced. This reduces potential confusion about the differences between patterns that are synced, and patterns that are not (currently called \"Standard\" patterns). I already made the change in `BlockPatternsSyncFilter` in https://github.com/WordPress/gutenberg/pull/54838.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n 1. Open the site editor in the patterns view.\r\n2. See the ToggleGroup render Synced/Not synced.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n|<img width=\"314\" alt=\"CleanShot 2023-09-26 at 14 29 10\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/b23ed6d7-79a9-44d0-9ca1-3e9096a02216\">|<img width=\"312\" alt=\"CleanShot 2023-09-26 at 14 29 31\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/8e007f13-7414-4ca5-aad4-b1a32f22750c\">|\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54839/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33714",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33714/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33714/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33714/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33714",
-		"id": 954094299,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk4MDQwNjEy",
-		"number": 33714,
-		"title": "components: Add new ColorPicker",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54838",
+		"id": 1914065955,
+		"node_id": "PR_kwDOBNHdeM5bQtkm",
+		"number": 54838,
+		"title": "Simplify BlockPatternsSyncFilter with clearer labels and additional context",
 		"user": {
-			"login": "sarayourfriend",
-			"id": 24264157,
-			"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-			"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/sarayourfriend",
-			"html_url": "https://github.com/sarayourfriend",
-			"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-			"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-			"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-			"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-			"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-			"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 793903067,
+				"node_id": "MDU6TGFiZWw3OTM5MDMwNjc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Copy",
+				"name": "[Type] Copy",
+				"color": "e868f9",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "Issues or PRs that need copy editing assistance"
 			},
 			{
-				"id": 659839209,
-				"node_id": "MDU6TGFiZWw2NTk4MzkyMDk=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20UI%20Components",
-				"name": "[Feature] UI Components",
-				"color": "fbca04",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
 				"color": "ed2572",
 				"default": false,
-				"description": "/packages/components"
-			},
-			{
-				"id": 1607665481,
-				"node_id": "MDU6TGFiZWwxNjA3NjY1NDgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Storybook",
-				"name": "Storybook",
-				"color": "81e2c7",
-				"default": false,
-				"description": "Storybook and its stories for components"
-			},
-			{
-				"id": 2555015900,
-				"node_id": "MDU6TGFiZWwyNTU1MDE1OTAw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Component%20System",
-				"name": "[Feature] Component System",
-				"color": "fbca04",
-				"default": false,
-				"description": "The next iteration on WordPress Components."
+				"description": "/packages/block-editor"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "richtabor",
+			"id": 1813435,
+			"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/richtabor",
+			"html_url": "https://github.com/richtabor",
+			"followers_url": "https://api.github.com/users/richtabor/followers",
+			"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+			"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+			"organizations_url": "https://api.github.com/users/richtabor/orgs",
+			"repos_url": "https://api.github.com/users/richtabor/repos",
+			"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/richtabor/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "richtabor",
+				"id": 1813435,
+				"node_id": "MDQ6VXNlcjE4MTM0MzU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1813435?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/richtabor",
+				"html_url": "https://github.com/richtabor",
+				"followers_url": "https://api.github.com/users/richtabor/followers",
+				"following_url": "https://api.github.com/users/richtabor/following{/other_user}",
+				"gists_url": "https://api.github.com/users/richtabor/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/richtabor/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/richtabor/subscriptions",
+				"organizations_url": "https://api.github.com/users/richtabor/orgs",
+				"repos_url": "https://api.github.com/users/richtabor/repos",
+				"events_url": "https://api.github.com/users/richtabor/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/richtabor/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10823,82 +11814,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 21,
-		"created_at": "2021-07-27T17:16:54Z",
-		"updated_at": "2021-08-12T13:12:16Z",
-		"closed_at": "2021-08-10T13:59:00Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 17,
+		"created_at": "2023-09-26T18:26:01Z",
+		"updated_at": "2023-10-04T21:58:09Z",
+		"closed_at": "2023-10-02T19:18:15Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33714",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33714",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33714.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33714.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nAdds a new vastly simplified ColorPicker implementation based on `react-colorful`.\r\n\r\n## How has this been tested?\r\nStorybook.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n\r\nhttps://user-images.githubusercontent.com/24264157/127386106-606631ef-2d8e-4c5a-973f-c288bddb947d.mov\r\n\r\n\r\n\r\n## Types of changes\r\nNew feature.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54838",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54838",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54838.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54838.patch",
+			"merged_at": "2023-10-02T19:18:15Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nA follow-up to https://github.com/WordPress/gutenberg/pull/54681 that:\r\n\r\n- Reduces individual labeling and help text with more context below (similar to the \"Tools\" control in the block editor header). \r\n- Renames \"Standard\" to \"Not synced\", which adds more context to what these patterns are - and reduces nomenclature. \r\n\r\nProps @jasmussen. \r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n1. Open a post or page.\r\n2. Open the pattern inserter.\r\n3. Select the \"Filter patterns\" control.\r\n4. See changes.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n### Before\r\n\r\n<img width=\"923\" alt=\"CleanShot 2023-09-26 at 14 21 22\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/02ae80b8-7d6a-40c2-9b17-a58cce5a0945\">\r\n\r\n### After\r\n\r\n<img width=\"966\" alt=\"CleanShot 2023-09-26 at 14 20 44\" src=\"https://github.com/WordPress/gutenberg/assets/1813435/fd60e170-bed8-42df-9efc-46c4ff6ff1fd\">\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54838/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33713",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33713/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33713/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33713/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33713",
-		"id": 954035586,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3OTkwODk5",
-		"number": 33713,
-		"title": "Update bug issue template to use forms",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54835",
+		"id": 1913897482,
+		"node_id": "PR_kwDOBNHdeM5bQIj4",
+		"number": 54835,
+		"title": "Use instanceOf over property_exists.",
 		"user": {
-			"login": "annezazu",
-			"id": 26996883,
-			"node_id": "MDQ6VXNlcjI2OTk2ODgz",
-			"avatar_url": "https://avatars.githubusercontent.com/u/26996883?v=4",
+			"login": "spacedmonkey",
+			"id": 237508,
+			"node_id": "MDQ6VXNlcjIzNzUwOA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/237508?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/annezazu",
-			"html_url": "https://github.com/annezazu",
-			"followers_url": "https://api.github.com/users/annezazu/followers",
-			"following_url": "https://api.github.com/users/annezazu/following{/other_user}",
-			"gists_url": "https://api.github.com/users/annezazu/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/annezazu/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/annezazu/subscriptions",
-			"organizations_url": "https://api.github.com/users/annezazu/orgs",
-			"repos_url": "https://api.github.com/users/annezazu/repos",
-			"events_url": "https://api.github.com/users/annezazu/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/annezazu/received_events",
+			"url": "https://api.github.com/users/spacedmonkey",
+			"html_url": "https://github.com/spacedmonkey",
+			"followers_url": "https://api.github.com/users/spacedmonkey/followers",
+			"following_url": "https://api.github.com/users/spacedmonkey/following{/other_user}",
+			"gists_url": "https://api.github.com/users/spacedmonkey/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/spacedmonkey/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/spacedmonkey/subscriptions",
+			"organizations_url": "https://api.github.com/users/spacedmonkey/orgs",
+			"repos_url": "https://api.github.com/users/spacedmonkey/repos",
+			"events_url": "https://api.github.com/users/spacedmonkey/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/spacedmonkey/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1032028862,
-				"node_id": "MDU6TGFiZWwxMDMyMDI4ODYy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Project%20Management",
-				"name": "[Type] Project Management",
-				"color": "e55ead",
+				"id": 731693674,
+				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
+				"name": "[Type] Performance",
+				"color": "f3f4fe",
 				"default": false,
-				"description": "Meta-issues related to project management of Gutenberg"
+				"description": "Related to performance efforts"
+			},
+			{
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "spacedmonkey",
+			"id": 237508,
+			"node_id": "MDQ6VXNlcjIzNzUwOA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/237508?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/spacedmonkey",
+			"html_url": "https://github.com/spacedmonkey",
+			"followers_url": "https://api.github.com/users/spacedmonkey/followers",
+			"following_url": "https://api.github.com/users/spacedmonkey/following{/other_user}",
+			"gists_url": "https://api.github.com/users/spacedmonkey/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/spacedmonkey/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/spacedmonkey/subscriptions",
+			"organizations_url": "https://api.github.com/users/spacedmonkey/orgs",
+			"repos_url": "https://api.github.com/users/spacedmonkey/repos",
+			"events_url": "https://api.github.com/users/spacedmonkey/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/spacedmonkey/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "spacedmonkey",
+				"id": 237508,
+				"node_id": "MDQ6VXNlcjIzNzUwOA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/237508?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/spacedmonkey",
+				"html_url": "https://github.com/spacedmonkey",
+				"followers_url": "https://api.github.com/users/spacedmonkey/followers",
+				"following_url": "https://api.github.com/users/spacedmonkey/following{/other_user}",
+				"gists_url": "https://api.github.com/users/spacedmonkey/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/spacedmonkey/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/spacedmonkey/subscriptions",
+				"organizations_url": "https://api.github.com/users/spacedmonkey/orgs",
+				"repos_url": "https://api.github.com/users/spacedmonkey/repos",
+				"events_url": "https://api.github.com/users/spacedmonkey/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/spacedmonkey/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -10921,100 +11977,174 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-07-27T16:02:51Z",
-		"updated_at": "2021-08-02T17:06:37Z",
-		"closed_at": "2021-07-29T14:48:58Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 5,
+		"created_at": "2023-09-26T16:34:27Z",
+		"updated_at": "2023-09-27T11:50:13Z",
+		"closed_at": "2023-09-27T11:12:45Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33713",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33713",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33713.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33713.patch"
-		},
-		"body": "## Description\r\nThis will help address part of this open issue to move bug reports to forms: https://github.com/WordPress/gutenberg/issues/33394 I followed the documentation linked and tried to match it to the current issue template as closely as possible. I purposefully left out adding labels and customizing the title as I still believe both of those are too complex decisions to make in such a generalized way. \r\n\r\nOf note:\r\n\r\n> If you want to use the same file name for your YAML issue form, you must delete the Markdown issue template when you commit the new file to your repository.\r\n\r\nThis PR doesn't include that file being removed but can be if we'd like to keep the same file name. I've never created one of these issue template forms before so might have approached this incorrectly :) Guidance appreciated. \r\n\r\n## Types of changes\r\n\r\nEnhancement to project management\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54835",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54835",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54835.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54835.patch",
+			"merged_at": "2023-09-27T11:12:44Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n\r\nTrac ticket: https://core.trac.wordpress.org/ticket/59453#ticket\r\n\r\n`instanceOf` is better performance than `property_exists`\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54835/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33708",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33708/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33708/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33708/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33708",
-		"id": 953810575,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3Nzk4MTc2",
-		"number": 33708,
-		"title": "Disable spellcheck and autocomplete in permalink slug field",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54834",
+		"id": 1913848459,
+		"node_id": "PR_kwDOBNHdeM5bP94x",
+		"number": 54834,
+		"title": "fix: Prevent crash from invalid media URLs",
 		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
+			"login": "dcalhoun",
+			"id": 438664,
+			"node_id": "MDQ6VXNlcjQzODY2NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
+			"url": "https://api.github.com/users/dcalhoun",
+			"html_url": "https://github.com/dcalhoun",
+			"followers_url": "https://api.github.com/users/dcalhoun/followers",
+			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+			"repos_url": "https://api.github.com/users/dcalhoun/repos",
+			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 610403961,
-				"node_id": "MDU6TGFiZWw2MTA0MDM5NjE=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Document%20Settings",
-				"name": "[Feature] Document Settings",
-				"color": "fbca04",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
 				"default": false,
-				"description": ""
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
 			},
 			{
-				"id": 1118625183,
-				"node_id": "MDU6TGFiZWwxMTE4NjI1MTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Permalink",
-				"name": "[Feature] Permalink",
-				"color": "fbca04",
+				"id": 1105650457,
+				"node_id": "MDU6TGFiZWwxMTA1NjUwNDU3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Video",
+				"name": "[Block] Video",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Video Block"
+			},
+			{
+				"id": 1114123398,
+				"node_id": "MDU6TGFiZWwxMTE0MTIzMzk4",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Audio",
+				"name": "[Block] Audio",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Audio Block"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "dcalhoun",
+			"id": 438664,
+			"node_id": "MDQ6VXNlcjQzODY2NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dcalhoun",
+			"html_url": "https://github.com/dcalhoun",
+			"followers_url": "https://api.github.com/users/dcalhoun/followers",
+			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+			"repos_url": "https://api.github.com/users/dcalhoun/repos",
+			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "dcalhoun",
+				"id": 438664,
+				"node_id": "MDQ6VXNlcjQzODY2NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/dcalhoun",
+				"html_url": "https://github.com/dcalhoun",
+				"followers_url": "https://api.github.com/users/dcalhoun/followers",
+				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+				"repos_url": "https://api.github.com/users/dcalhoun/repos",
+				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11037,68 +12167,102 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-27T12:03:07Z",
-		"updated_at": "2021-07-28T12:08:41Z",
-		"closed_at": "2021-07-28T05:12:26Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 3,
+		"created_at": "2023-09-26T16:06:19Z",
+		"updated_at": "2023-09-27T13:02:55Z",
+		"closed_at": "2023-09-27T13:02:21Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33708",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33708",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33708.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33708.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nPrevent unintended permalink slugs.\r\n\r\nFixes #33612\r\n<!-- Please describe what you have changed or added -->\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\nEnhancement\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54834",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54834",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54834.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54834.patch",
+			"merged_at": "2023-09-27T13:02:21Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nPrevent crashes resulting from attempts to set an invalid URL for a video or\r\naudio file, e.g. `h://domain.org/video.mp4`.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nFixes https://github.com/wordpress-mobile/gutenberg-mobile/issues/6233. The crash is disruptive for users.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nDetect and avoid sending URLs that do not begin with `http:` or `http://` to the\r\n`react-native-video` package as it will attempt and fail to load the URL as a\r\nlocal app bundle resource. Instead, display a notice to the user that the\r\nprovided URL is invalid.\r\n\r\nThe `isURL` utility considers URLs using uncommon protocols to be valid,\r\nas constructing `URL` with, say, `h://a-path.com` is valid.\r\nContrastingly, the `react-native-video` package [only considers](https://github.com/react-native-video/react-native-video/blob/81ae785090f5ce3d5e45cc51f68a3360a85be853/Video.js#L277) a URL\r\nusing the `http:` or `https:` protocols to be a \"network\" asset. This\r\nleads to an attempt to load the URL as a local asset, which fails as the\r\nasset does not exist in the app bundle.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. Add a Video or Audio block.\r\n1. Select \"Insert from URL.\"\r\n1. Type an invalid URL, e.g. `h://wordpress.org/video.mp4`.\r\n1. Dismiss the bottom sheet.\r\n1. Verify the app does not crash and a helpful message is displayed.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nn/a\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nn/a\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54834/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33707",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33707/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33707/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33707/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33707",
-		"id": 953738028,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3NzM0OTI5",
-		"number": 33707,
-		"title": "[Mobile] - Global styles: Check for undefined values and merge user colors",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54832",
+		"id": 1913745257,
+		"node_id": "PR_kwDOBNHdeM5bPnIv",
+		"number": 54832,
+		"title": "Font Library: syntax refactor repace strpos with str_contains",
 		"user": {
-			"login": "geriux",
-			"id": 4885740,
-			"node_id": "MDQ6VXNlcjQ4ODU3NDA=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/4885740?v=4",
+			"login": "matiasbenedetto",
+			"id": 1310626,
+			"node_id": "MDQ6VXNlcjEzMTA2MjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1310626?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/geriux",
-			"html_url": "https://github.com/geriux",
-			"followers_url": "https://api.github.com/users/geriux/followers",
-			"following_url": "https://api.github.com/users/geriux/following{/other_user}",
-			"gists_url": "https://api.github.com/users/geriux/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/geriux/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/geriux/subscriptions",
-			"organizations_url": "https://api.github.com/users/geriux/orgs",
-			"repos_url": "https://api.github.com/users/geriux/repos",
-			"events_url": "https://api.github.com/users/geriux/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/geriux/received_events",
+			"url": "https://api.github.com/users/matiasbenedetto",
+			"html_url": "https://github.com/matiasbenedetto",
+			"followers_url": "https://api.github.com/users/matiasbenedetto/followers",
+			"following_url": "https://api.github.com/users/matiasbenedetto/following{/other_user}",
+			"gists_url": "https://api.github.com/users/matiasbenedetto/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/matiasbenedetto/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/matiasbenedetto/subscriptions",
+			"organizations_url": "https://api.github.com/users/matiasbenedetto/orgs",
+			"repos_url": "https://api.github.com/users/matiasbenedetto/repos",
+			"events_url": "https://api.github.com/users/matiasbenedetto/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/matiasbenedetto/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
+				"default": false,
+				"description": "Font and typography-related issues and PRs"
 			}
 		],
 		"state": "closed",
@@ -11106,13 +12270,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11135,131 +12299,116 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 3,
-		"created_at": "2021-07-27T10:28:27Z",
-		"updated_at": "2021-07-28T14:33:42Z",
-		"closed_at": "2021-07-28T14:33:16Z",
-		"author_association": "MEMBER",
+		"created_at": "2023-09-26T15:13:27Z",
+		"updated_at": "2023-09-29T12:04:11Z",
+		"closed_at": "2023-09-27T00:24:20Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33707",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33707",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33707.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33707.patch"
-		},
-		"body": "## Description\r\nWhile testing the mobile editor an issue was found when one of the Global styles values was undefined, causing it to crash. This PR checks those values before parsing the variables.\r\n\r\n## How has this been tested?\r\n\r\n### Test case 1 \r\n\r\nWith a simple site\r\n\r\n- Open the WordPress iOS app with metro running\r\n- Open and close the editor a couple of times\r\n- **Expect** the editor to work correctly without crashing\r\n\r\n### Test case 2\r\n\r\nWith a self-hosted site with WordPress 5.8 and Gutenberg 11.1 and a theme.json theme activated\r\n\r\n- Open the WordPress iOS app with metro running\r\n- Open the editor\r\n- **Expect** to see the theme colors (background, text)\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nTest case 1|Test case 2\r\n-|-\r\n<kbd><img src=\"https://user-images.githubusercontent.com/4885740/127139157-54e02f96-efb4-4975-9c19-076bdad9ccff.png\" width=\"200\" /></kbd> | <kbd><img src=\"https://user-images.githubusercontent.com/4885740/127139171-9daf9b21-3595-4fc0-a421-320157cffd7b.png\" width=\"200\" /></kbd>\r\n\r\n## Types of changes\r\nBug fix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54832",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54832",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54832.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54832.patch",
+			"merged_at": "2023-09-27T00:24:20Z"
+		},
+		"body": "## What?\r\nsyntax refactor repace strpos with str_contains\r\nFollow up of this @anton-vlasenko comment: https://github.com/WordPress/gutenberg/pull/54067#issuecomment-1731798079\r\n\r\n## Why?\r\nto improve code readeability\r\n\r\n## How?\r\nrepacing strpos with str_contains\r\n\r\n\r\n## Testing Instructions\r\nrun php unit tests",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54832/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33703",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33703/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33703/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33703/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33703",
-		"id": 953194000,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3MjczNzI1",
-		"number": 33703,
-		"title": "Template Part placeholder - Add title step to creation flow.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54829",
+		"id": 1913579217,
+		"node_id": "PR_kwDOBNHdeM5bPCly",
+		"number": 54829,
+		"title": "Font Library: refactor endpoint permissions",
 		"user": {
-			"login": "Addison-Stavlo",
-			"id": 28742426,
-			"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-			"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
+			"login": "matiasbenedetto",
+			"id": 1310626,
+			"node_id": "MDQ6VXNlcjEzMTA2MjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1310626?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Addison-Stavlo",
-			"html_url": "https://github.com/Addison-Stavlo",
-			"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-			"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-			"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-			"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-			"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
+			"url": "https://api.github.com/users/matiasbenedetto",
+			"html_url": "https://github.com/matiasbenedetto",
+			"followers_url": "https://api.github.com/users/matiasbenedetto/followers",
+			"following_url": "https://api.github.com/users/matiasbenedetto/following{/other_user}",
+			"gists_url": "https://api.github.com/users/matiasbenedetto/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/matiasbenedetto/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/matiasbenedetto/subscriptions",
+			"organizations_url": "https://api.github.com/users/matiasbenedetto/orgs",
+			"repos_url": "https://api.github.com/users/matiasbenedetto/repos",
+			"events_url": "https://api.github.com/users/matiasbenedetto/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/matiasbenedetto/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1604715381,
-				"node_id": "MDU6TGFiZWwxNjA0NzE1Mzgx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Full%20Site%20Editing",
-				"name": "[Feature] Full Site Editing",
-				"color": "fbca04",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": ""
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 2373088071,
-				"node_id": "MDU6TGFiZWwyMzczMDg4MDcx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Template-Part",
-				"name": "[Block] Template-Part",
-				"color": "6767e5",
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Font and typography-related issues and PRs"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "Addison-Stavlo",
-			"id": 28742426,
-			"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-			"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/Addison-Stavlo",
-			"html_url": "https://github.com/Addison-Stavlo",
-			"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-			"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-			"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-			"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-			"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "Addison-Stavlo",
-				"id": 28742426,
-				"node_id": "MDQ6VXNlcjI4NzQyNDI2",
-				"avatar_url": "https://avatars.githubusercontent.com/u/28742426?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/Addison-Stavlo",
-				"html_url": "https://github.com/Addison-Stavlo",
-				"followers_url": "https://api.github.com/users/Addison-Stavlo/followers",
-				"following_url": "https://api.github.com/users/Addison-Stavlo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Addison-Stavlo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Addison-Stavlo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Addison-Stavlo/subscriptions",
-				"organizations_url": "https://api.github.com/users/Addison-Stavlo/orgs",
-				"repos_url": "https://api.github.com/users/Addison-Stavlo/repos",
-				"events_url": "https://api.github.com/users/Addison-Stavlo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Addison-Stavlo/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11282,149 +12431,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-07-26T18:59:12Z",
-		"updated_at": "2021-07-30T16:42:33Z",
-		"closed_at": "2021-07-30T16:42:07Z",
+		"comments": 4,
+		"created_at": "2023-09-26T13:58:20Z",
+		"updated_at": "2023-10-02T09:39:54Z",
+		"closed_at": "2023-09-29T22:32:44Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33703",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33703",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33703.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33703.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nRelated to discussion on #29950 -  Adds a title step to the creation flow from the Template Part placeholder.  Here we prompt the user with a modal (similar to the \"make template part\" flow from the block settings ellipsis menu) to change the name of the title from \"Untitled Template Part\".  If the modal is cancelled, we revert to the placeholder and the template part is not created.\r\n\r\n![Screen Shot 2021-07-26 at 2 47 41 PM](https://user-images.githubusercontent.com/28742426/127043576-2263a093-c1ab-44a8-859b-d299bd937820.png)\r\n\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\nWith FSE enabled, test the following in both the Site and Post editor:\r\n* Insert a template part block placeholder (Header, Footer, or Template Part).\r\n* Select the \"New %s\" option.  \r\n* A naming input should appear.\r\n* Cancelling  (or clicking outside) the modal should revert the block back to the placeholder state.\r\n* \"Create\" should create the new template part with the name that was given in the input field.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\nNew feature (non-breaking change which adds functionality) \r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54829",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54829",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54829.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54829.patch",
+			"merged_at": "2023-09-29T22:32:44Z"
+		},
+		"body": "## What?\r\nFont Library:\r\n- Refactor endpoint permissions.\r\n- Standardize the output of the install and uninstall endpoints.\r\n- Display a success or error notice on the frontend for install and uninstall actions.\r\n\r\n## Why?\r\n- To have a standard output for the endpoints for success and error cases.\r\n\r\n## How?\r\nRefactoring the endpoint responses.\r\n\r\n## Testing Instructions\r\n- Use the font library to install local and Google fonts.\r\n- Remove fonts\r\nCheck that the result is expected and you get the success or error notices.\r\n\r\n\r\nProps to @pbking and @jffng for the big help implementing this :)\r\n\r\n\r\nCloses: https://github.com/WordPress/gutenberg/issues/54751\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54829/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33701",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33701/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33701/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33701/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33701",
-		"id": 953174654,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3MjU3OTQy",
-		"number": 33701,
-		"title": "Components: promote `ItemGroup`",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54827",
+		"id": 1913500812,
+		"node_id": "PR_kwDOBNHdeM5bOxam",
+		"number": 54827,
+		"title": "Bump gradle/gradle-build-action from 2.8.0 to 2.8.1",
 		"user": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
-			"type": "User",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
-				"default": false,
-				"description": "/packages/components"
-			},
-			{
-				"id": 1789345375,
-				"node_id": "MDU6TGFiZWwxNzg5MzQ1Mzc1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Experimental",
-				"name": "[Type] Experimental",
-				"color": "4109a0",
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
 				"default": false,
-				"description": "Experimental feature or API."
+				"description": "Issues or PRs related to build tooling"
 			},
 			{
-				"id": 2555015900,
-				"node_id": "MDU6TGFiZWwyNTU1MDE1OTAw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Component%20System",
-				"name": "[Feature] Component System",
-				"color": "fbca04",
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
 				"default": false,
-				"description": "The next iteration on WordPress Components."
+				"description": "Pull requests that update GitHub Actions code"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "ciampo",
-			"id": 1083581,
-			"node_id": "MDQ6VXNlcjEwODM1ODE=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/ciampo",
-			"html_url": "https://github.com/ciampo",
-			"followers_url": "https://api.github.com/users/ciampo/followers",
-			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-			"organizations_url": "https://api.github.com/users/ciampo/orgs",
-			"repos_url": "https://api.github.com/users/ciampo/repos",
-			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ciampo/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "ciampo",
-				"id": 1083581,
-				"node_id": "MDQ6VXNlcjEwODM1ODE=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/ciampo",
-				"html_url": "https://github.com/ciampo",
-				"followers_url": "https://api.github.com/users/ciampo/followers",
-				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
-				"organizations_url": "https://api.github.com/users/ciampo/orgs",
-				"repos_url": "https://api.github.com/users/ciampo/repos",
-				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ciampo/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11447,131 +12554,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-26T18:31:43Z",
-		"updated_at": "2021-07-29T08:56:06Z",
-		"closed_at": "2021-07-29T08:55:47Z",
+		"comments": 0,
+		"created_at": "2023-09-26T13:20:21Z",
+		"updated_at": "2023-09-28T13:59:02Z",
+		"closed_at": "2023-09-28T13:58:35Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33701",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33701",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33701.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33701.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\n- Promote the `ItemGroup` and `Item` components from the `packages/components/src/ui` folder to the `packages/components/src` folder\r\n- Refactor the folder structure, so that each component has its own folder\r\n- Fix a bug with the CSS pseudo-elements selectors, where the `[first|last]-of-type` selectors where causing an issue when mixing and matching different HTML element types (e.g. when one item has `isAction={true}` and the rest of the elements don't). To fix this bug, every `Item` is now wrapped in a `div` component to make sure that all children of `ItemGroup` are of the same type\r\n- Add README and JSDocs comments to types\r\n- Add a few basic unit tests\r\n- Export component from the `@wordpress/components` package\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n- All tests pass\r\n- Run storybook locally, and make sure that the components behaves in the same way as it does currently on [production storybook](https://wordpress.github.io/gutenberg/?path=/story/components-experimental-itemgroup--default)\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n<img width=\"374\" alt=\"Screenshot 2021-07-26 at 20 31 27\" src=\"https://user-images.githubusercontent.com/1083581/127040232-730f1a65-d93f-46d4-9d45-14892f0ebc9b.png\">\r\n\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\nRefactor\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54827",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54827",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54827.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54827.patch",
+			"merged_at": "2023-09-28T13:58:35Z"
+		},
+		"body": "Bumps [gradle/gradle-build-action](https://github.com/gradle/gradle-build-action) from 2.8.0 to 2.8.1.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/gradle/gradle-build-action/releases\">gradle/gradle-build-action's releases</a>.</em></p>\n<blockquote>\n<h2>v2.8.1</h2>\n<p>Fixes an issue that prevented Dependency Graph submission when running on GitHub Enterprise Server.</p>\n<h3>Fixes</h3>\n<ul>\n<li>Incorrect endpoint used to submit Dependency Graph on GitHub Enterprise <a href=\"https://redirect.github.com/gradle/gradle-build-action/issues/885\">#885</a></li>\n</ul>\n<h3>Changelog</h3>\n<p><a href=\"https://github.com/gradle/gradle-build-action/compare/v2.8.0...v2.8.1\">https://github.com/gradle/gradle-build-action/compare/v2.8.0...v2.8.1</a></p>\n</blockquote>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/b5126f31dbc19dd434c3269bf8c28c315e121da2\"><code>b5126f3</code></a> Use github.getOctokit() for compat with GitHub Enterprise</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/d8615ccc8bbe3c98f90c8a01202d3f83e9e207d0\"><code>d8615cc</code></a> Document configuration to publish to scans.gradle.com</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/444c20baf78d0fd22c43f7cd80f86cc18cbe7778\"><code>444c20b</code></a> Test multiple dependency graphs on all os's</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/aea76e1766a99c50ecb59e2f430483f71a510eee\"><code>aea76e1</code></a> Dependency updates</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/103e3a7ba79bcdc1ea509e980e48a13af672b166\"><code>103e3a7</code></a> Build outputs</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/73e3fc21c7e869adec0a324bab328c6d68fdd027\"><code>73e3fc2</code></a> Bump the npm-dependencies group with 12 updates</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/b063df05a4cb517b4660bf33aebbb99620c6dc46\"><code>b063df0</code></a> Bump GE plugin versions</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/5e3952da922a15eef8cfe4f027fe44d2a34c8fbb\"><code>5e3952d</code></a> Bump the github-actions group with 2 updates</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/ed940a329a69b1252cc5288351c20ed31d477e67\"><code>ed940a3</code></a> Fix name of test dependency-graph workflow</li>\n<li><a href=\"https://github.com/gradle/gradle-build-action/commit/3bfe3a46584a206fb8361cdedd0647b0c4204232\"><code>3bfe3a4</code></a> Clarify documentation</li>\n<li>Additional commits viewable in <a href=\"https://github.com/gradle/gradle-build-action/compare/ef76a971e2fa3f867b617efd72f2fbd72cf6f8bc...b5126f31dbc19dd434c3269bf8c28c315e121da2\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=gradle/gradle-build-action&package-manager=github_actions&previous-version=2.8.0&new-version=2.8.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54827/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33696",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33696/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33696/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33696/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33696",
-		"id": 952995508,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk3MTA2MzEx",
-		"number": 33696,
-		"title": "components: InputControl to TypeScript",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54825",
+		"id": 1913485370,
+		"node_id": "PR_kwDOBNHdeM5bOuCc",
+		"number": 54825,
+		"title": "[RNMobile] Cover block: Avoid exception when adding media after setting the overlay color",
 		"user": {
-			"login": "sarayourfriend",
-			"id": 24264157,
-			"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-			"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/sarayourfriend",
-			"html_url": "https://github.com/sarayourfriend",
-			"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-			"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-			"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-			"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-			"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-			"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 1101517892,
+				"node_id": "MDU6TGFiZWwxMTAxNTE3ODky",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Cover",
+				"name": "[Block] Cover",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Cover Block - used to display content laid over a background image"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "sarayourfriend",
-			"id": 24264157,
-			"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-			"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/sarayourfriend",
-			"html_url": "https://github.com/sarayourfriend",
-			"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-			"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-			"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-			"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-			"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-			"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "sarayourfriend",
-				"id": 24264157,
-				"node_id": "MDQ6VXNlcjI0MjY0MTU3",
-				"avatar_url": "https://avatars.githubusercontent.com/u/24264157?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/sarayourfriend",
-				"html_url": "https://github.com/sarayourfriend",
-				"followers_url": "https://api.github.com/users/sarayourfriend/followers",
-				"following_url": "https://api.github.com/users/sarayourfriend/following{/other_user}",
-				"gists_url": "https://api.github.com/users/sarayourfriend/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/sarayourfriend/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/sarayourfriend/subscriptions",
-				"organizations_url": "https://api.github.com/users/sarayourfriend/orgs",
-				"repos_url": "https://api.github.com/users/sarayourfriend/repos",
-				"events_url": "https://api.github.com/users/sarayourfriend/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/sarayourfriend/received_events",
+				"login": "fluiddot",
+				"id": 14905380,
+				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/fluiddot",
+				"html_url": "https://github.com/fluiddot",
+				"followers_url": "https://api.github.com/users/fluiddot/followers",
+				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+				"repos_url": "https://api.github.com/users/fluiddot/repos",
+				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11594,56 +12726,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-26T14:58:32Z",
-		"updated_at": "2021-08-06T13:04:52Z",
-		"closed_at": "2021-08-06T13:04:11Z",
+		"comments": 1,
+		"created_at": "2023-09-26T13:12:19Z",
+		"updated_at": "2023-09-26T14:58:29Z",
+		"closed_at": "2023-09-26T14:58:00Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33696",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33696",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33696.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33696.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nI did this refactor while I was working on something else so I figured I might as well open a PR for it.\r\n\r\nIt just converts the InputControl to TypeScript and (I think) improves the way the reducer code is structured while we're at it.\r\n\r\n## How has this been tested?\r\nStorybook should work the same for InputControl, NumberControl and UnitControl, the last two depend on InputControl.\r\n\r\nTS build should pass as well.\r\n\r\n## Types of changes\r\nJanitorial\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [N/A] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [N/A] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54825",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54825",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54825.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54825.patch",
+			"merged_at": "2023-09-26T14:57:59Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nFixes an exception produced when adding media on a Cover block that already has an overlay color.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThe exception addressed leads to a crash in the app.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nThe exception is produced in the handler `onSelectMedia` due to a recent change in the shared function `attributesFromMedia` introduced in https://github.com/WordPress/gutenberg/pull/54054. Previous to the change, `attributesFromMedia` was returning a function that updated the attributes upon calling it, but now it just returns the attributes to update. The workaround for the native version is simply to collect the attributes from `attributesFromMedia` and update the attributes directly in the `onSelectMedia` handler.\r\n\r\nIdeally, we should update the native version of the block to match the logic of the web version. However, in the spirit of addressing the exception sooner than later, we could use this approach and work on the refactor in a separate PR.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. Open/create a post.\r\n2. Add a Cover block.\r\n3. Select one of the colors displayed in the placeholder.\r\n4. Select the Cover block.\r\n5. Open the block settings.\r\n6. Tap on the \"Add image or video\" option.\r\n7. Tap on the \"WordPress Media Library\" option.\r\n8. Select an image.\r\n9. Observe that no exception is thrown.\r\n10. Observe that the image is set as the background.\r\n11. Observe that the overlay color matches the color selected.\r\n12. Observe that the overlay has 50% transparency.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54825/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33680",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33680/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33680/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33680/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33680",
-		"id": 952571352,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk2NzQ1NzI3",
-		"number": 33680,
-		"title": "Global Styles: Avoid rendering duplicate elements stylesheet",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54823",
+		"id": 1913269746,
+		"node_id": "PR_kwDOBNHdeM5bN-r5",
+		"number": 54823,
+		"title": "Fix Search Block not updating in Nav block",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "getdave",
+			"id": 444434,
+			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/getdave",
+			"html_url": "https://github.com/getdave",
+			"followers_url": "https://api.github.com/users/getdave/followers",
+			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+			"organizations_url": "https://api.github.com/users/getdave/orgs",
+			"repos_url": "https://api.github.com/users/getdave/repos",
+			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/getdave/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -11655,70 +12803,39 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
+				"id": 1225853227,
+				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
+				"name": "[Block] Navigation",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Navigation Block"
+			},
+			{
+				"id": 1539734701,
+				"node_id": "MDU6TGFiZWwxNTM5NzM0NzAx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Search",
+				"name": "[Block] Search",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Search Block - used to display a search field"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11741,46 +12858,225 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 0,
-		"created_at": "2021-07-26T07:00:39Z",
-		"updated_at": "2021-07-28T10:08:42Z",
-		"closed_at": "2021-07-28T10:08:15Z",
-		"author_association": "MEMBER",
+		"comments": 3,
+		"created_at": "2023-09-26T11:10:14Z",
+		"updated_at": "2023-10-02T15:05:32Z",
+		"closed_at": "2023-09-27T20:15:57Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33680",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33680",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33680.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33680.patch"
-		},
-		"body": "## Description\r\nRemoves WP Core filter for \"elements support\" to avoid rendering duplicate stylesheet.\r\n\r\nFixes #33669.\r\n\r\nSimilar PRs - #33005 and #33233.\r\n\r\n## How has this been tested?\r\n1. Add the Paragraph block.\r\n2. Select text and add a link.\r\n3. Set link color for the paragraph.\r\n4. Save post.\r\n5. On the front-end, WP shouldn't render duplicated stylesheet for link color.\r\n\r\n## Screenshots <!-- if applicable -->\r\n![CleanShot 2021-07-26 at 10 58 36](https://user-images.githubusercontent.com/240569/126946197-0c76e6d3-6d7a-4aaa-bb0d-2c2608fc790c.png)\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54823",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54823",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54823.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54823.patch",
+			"merged_at": "2023-09-27T20:15:57Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nFixes Search blocks to allow them to have changes to their configuration when they are within a Navigation block.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/53038\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nBlocks should be configurable via their UI controls.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nThere was a console error when inserting a Search block into Navigation block. This was referring to a `setState` in render.\r\n\r\nThe culprit was `setAttributes` called conditionally within the render method.\r\n\r\nMoving this code to an effect fixes the problem. This is likely because we cannot treat `setAttributes` like idiomatic React's \"setState\". `setAttributes` actually updates an external global store (Redux) and so it could caused other blocks to re-render. This is likely what triggers the console error.\r\n\r\nThe idea of attempting to derive the \"state\" of the block once it has been inserted seems to go against the React paradigm. The \"insert\" [is in fact an \"event\" and thus it might be better to handle this in a callback](https://react.dev/learn/you-might-not-need-an-effect) which inserts the block with a given state based on some context. Instead, we are inserting the block and _then_ trying to derive it's state which is problematic.\r\n\r\nHowever, we don't have such APIs available to us so moving to an effect is the best we can do for now.\r\n\r\n\r\n\r\n\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n- Add Nav block.\r\n- Add search block to the Nav block (you can find this at the bottom of the Link UI that appears).\r\n- Change configuration of the Search block.\r\n- Save the Navigation (top right \"Publish\" button in editor).\r\n- See that changes are persisted.\r\n- Reload editor.\r\n- See that changes are persisted.\r\n- Make some more changes.\r\n- Switch editor to \"Code\" view.\r\n- Switch back to \"Visual\" view.\r\n- See that changes are persisted.\r\n- Try anything listed in comments in https://github.com/WordPress/gutenberg/issues/53038 to try and replicate the original Issue.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/444434/40ac6056-d52f-4d85-bac5-aad463f3d95c\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54823/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33679",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33679/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33679/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33679/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33679",
-		"id": 952534040,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk2NzEzMjkw",
-		"number": 33679,
-		"title": "FontSizePicker: Use number values when the initial value is a number",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54818",
+		"id": 1913111756,
+		"node_id": "PR_kwDOBNHdeM5bNb4C",
+		"number": 54818,
+		"title": "Update ariakit to 0.3.3",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "ciampo",
+			"id": 1083581,
+			"node_id": "MDQ6VXNlcjEwODM1ODE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
+			"url": "https://api.github.com/users/ciampo",
+			"html_url": "https://github.com/ciampo",
+			"followers_url": "https://api.github.com/users/ciampo/followers",
+			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+			"organizations_url": "https://api.github.com/users/ciampo/orgs",
+			"repos_url": "https://api.github.com/users/ciampo/repos",
+			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ciampo",
+			"id": 1083581,
+			"node_id": "MDQ6VXNlcjEwODM1ODE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ciampo",
+			"html_url": "https://github.com/ciampo",
+			"followers_url": "https://api.github.com/users/ciampo/followers",
+			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+			"organizations_url": "https://api.github.com/users/ciampo/orgs",
+			"repos_url": "https://api.github.com/users/ciampo/repos",
+			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ciampo",
+				"id": 1083581,
+				"node_id": "MDQ6VXNlcjEwODM1ODE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ciampo",
+				"html_url": "https://github.com/ciampo",
+				"followers_url": "https://api.github.com/users/ciampo/followers",
+				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+				"organizations_url": "https://api.github.com/users/ciampo/orgs",
+				"repos_url": "https://api.github.com/users/ciampo/repos",
+				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ciampo/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-26T09:38:28Z",
+		"updated_at": "2023-10-07T08:29:09Z",
+		"closed_at": "2023-09-26T13:20:33Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54818",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54818",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54818.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54818.patch",
+			"merged_at": "2023-09-26T13:20:33Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nUpdate `@ariakit/react` from version `0.2.12` to the (currently latest) version `0.3.3`\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nTo benefit from the latest additions (eg. providers) and bug fixes (eg. better interactions between `Menu` and third-party modals)\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nI manually updated `packages/components/package.json`, and then ran `npm install`.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\nFrom the [release notes](https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react/CHANGELOG.md), the only breaking changes affect the `useSelectStore`, `useMenuStore` and `useComboboxStore` hooks, none of which are currently used in the project.\r\n\r\nWe should make sure that components using ariakit are still working as expected in Storybook and the editor:\r\n\r\n- `TabPanel`\r\n- `ToggleGroupControl`\r\n- `Toolbar`\r\n- `Tooltip`",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 1,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54818/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54812",
+		"id": 1912643345,
+		"node_id": "PR_kwDOBNHdeM5bL1tC",
+		"number": 54812,
+		"title": "Plugin: Remove legacy logic for '__unstableResolvedAssets' setting",
+		"user": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
 			"html_url": "https://github.com/Mamaduka",
 			"followers_url": "https://api.github.com/users/Mamaduka/followers",
 			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
@@ -11796,31 +13092,22 @@
 		},
 		"labels": [
 			{
-				"id": 949438185,
-				"node_id": "MDU6TGFiZWw5NDk0MzgxODU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Regression",
-				"name": "[Type] Regression",
-				"color": "d93f0b",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 616662898,
+				"node_id": "MDU6TGFiZWw2MTY2NjI4OTg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Gutenberg%20Plugin",
+				"name": "Gutenberg Plugin",
+				"color": "578eed",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Issues or PRs related to Gutenberg Plugin management related efforts"
 			},
 			{
-				"id": 2463256422,
-				"node_id": "MDU6TGFiZWwyNDYzMjU2NDIy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Backport%20to%20WP%20Minor%20Release",
-				"name": "Backport to WP Minor Release",
-				"color": "491d8e",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "PRs to be back-ported to a WordPress minor release."
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
@@ -11868,13 +13155,13 @@
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -11897,86 +13184,102 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 25,
-		"created_at": "2021-07-26T06:02:26Z",
-		"updated_at": "2021-07-30T11:21:57Z",
-		"closed_at": "2021-07-30T11:21:33Z",
+		"comments": 2,
+		"created_at": "2023-09-26T04:13:27Z",
+		"updated_at": "2023-09-27T06:12:36Z",
+		"closed_at": "2023-09-27T06:12:11Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33679",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33679",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33679.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33679.patch"
-		},
-		"body": "## Description\r\nUpdates `onChange` logic in FontSizePicker component. When the component detects that value or first object in `fonSizes` doesn't use units, it will pass the number value to the onChange callback.\r\n\r\nFixes #33651.\r\nFixes #33653.\r\n\r\n## How has this been tested?\r\nTested with plugin provided in original issue report - https://github.com/NasKadir123/textBlock\r\n\r\n## Types of changes\r\nBugfix \r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54812",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54812",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54812.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54812.patch",
+			"merged_at": "2023-09-27T06:12:11Z"
+		},
+		"body": "## What?\r\nThis is similar to #51100.\r\n\r\nRemoves legacy logic from the `__unstableResolvedAssets` setting from the WP 6.3 compat folder.\r\n\r\n## Why?\r\nThe same logic is already handled by the `_gutenberg_get_iframed_editor_assets_6_4` in the `lib/compat/wordpress-6.4/script-loader.php` directory, which overrides legacy settings. There's no need to run asset generation twice.\r\n\r\nRef: #54254.\r\n\r\n## Testing Instructions\r\nVerify iframe-related test pass. Smoke test the editors and asset loading.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54812/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33676",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33676/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33676/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33676/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33676",
-		"id": 952252078,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk2NDg0NDQ2",
-		"number": 33676,
-		"title": "Scripts: Webpack config update to minimize CSS",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54802",
+		"id": 1912094758,
+		"node_id": "PR_kwDOBNHdeM5bJ_wn",
+		"number": 54802,
+		"title": "Font Library: avoid deprected error in test",
 		"user": {
-			"login": "christianztamayo",
-			"id": 2377217,
-			"node_id": "MDQ6VXNlcjIzNzcyMTc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2377217?v=4",
+			"login": "matiasbenedetto",
+			"id": 1310626,
+			"node_id": "MDQ6VXNlcjEzMTA2MjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1310626?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/christianztamayo",
-			"html_url": "https://github.com/christianztamayo",
-			"followers_url": "https://api.github.com/users/christianztamayo/followers",
-			"following_url": "https://api.github.com/users/christianztamayo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/christianztamayo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/christianztamayo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/christianztamayo/subscriptions",
-			"organizations_url": "https://api.github.com/users/christianztamayo/orgs",
-			"repos_url": "https://api.github.com/users/christianztamayo/repos",
-			"events_url": "https://api.github.com/users/christianztamayo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/christianztamayo/received_events",
+			"url": "https://api.github.com/users/matiasbenedetto",
+			"html_url": "https://github.com/matiasbenedetto",
+			"followers_url": "https://api.github.com/users/matiasbenedetto/followers",
+			"following_url": "https://api.github.com/users/matiasbenedetto/following{/other_user}",
+			"gists_url": "https://api.github.com/users/matiasbenedetto/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/matiasbenedetto/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/matiasbenedetto/subscriptions",
+			"organizations_url": "https://api.github.com/users/matiasbenedetto/orgs",
+			"repos_url": "https://api.github.com/users/matiasbenedetto/repos",
+			"events_url": "https://api.github.com/users/matiasbenedetto/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/matiasbenedetto/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			},
 			{
-				"id": 978007737,
-				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
-				"name": "[Package] Scripts",
-				"color": "ed2572",
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
 				"default": false,
-				"description": "/packages/scripts"
+				"description": "Needs PHP backport to Core"
 			},
 			{
-				"id": 1388646432,
-				"node_id": "MDU6TGFiZWwxMzg4NjQ2NDMy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/First-time%20Contributor",
-				"name": "First-time Contributor",
-				"color": "a0f762",
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
 				"default": false,
-				"description": "Pull request opened by a first-time contributor to Gutenberg repository"
+				"description": "Font and typography-related issues and PRs"
 			}
 		],
 		"state": "closed",
@@ -11984,13 +13287,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12013,131 +13316,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-07-25T11:14:35Z",
-		"updated_at": "2021-07-29T10:44:46Z",
-		"closed_at": "2021-07-28T12:06:28Z",
+		"comments": 3,
+		"created_at": "2023-09-25T18:50:34Z",
+		"updated_at": "2023-09-29T12:04:17Z",
+		"closed_at": "2023-09-27T01:23:32Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33676",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33676",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33676.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33676.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nThe previous configuration does not have CSS minification included aside from the `sass-loader` built-in which only affects SCSS files. (Closes #33643, Related: #29624)\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n- Followed reproduction steps on #33643 and checked that regular CSS are now minified\r\n- Ran the build on Gutenberg and made sure it's still working as expected\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nAdded the optimize-css-assets-webpack-plugin to the minimizer config.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [-] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [-] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [-] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [-] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [-] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54802",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54802",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54802.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54802.patch",
+			"merged_at": "2023-09-27T01:23:32Z"
+		},
+		"body": "\r\n## What?\r\navoid deprecation error while running test in PHP 8+\r\n\r\n## How?\r\ncalling the function with the missing parameter\r\n\r\n## Testing Instructions\r\n- Run PHP unit tests\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54802/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33660",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33660/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33660/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33660/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33660",
-		"id": 951727008,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk2MDY1NTQ4",
-		"number": 33660,
-		"title": "Only show rich preview for image and description if data is available",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54793",
+		"id": 1911800482,
+		"node_id": "PR_kwDOBNHdeM5bI_HR",
+		"number": 54793,
+		"title": "Update CODEOWNERS for `core/image` block",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "michalczaplinski",
+			"id": 5417266,
+			"node_id": "MDQ6VXNlcjU0MTcyNjY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/5417266?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/michalczaplinski",
+			"html_url": "https://github.com/michalczaplinski",
+			"followers_url": "https://api.github.com/users/michalczaplinski/followers",
+			"following_url": "https://api.github.com/users/michalczaplinski/following{/other_user}",
+			"gists_url": "https://api.github.com/users/michalczaplinski/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/michalczaplinski/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/michalczaplinski/subscriptions",
+			"organizations_url": "https://api.github.com/users/michalczaplinski/orgs",
+			"repos_url": "https://api.github.com/users/michalczaplinski/repos",
+			"events_url": "https://api.github.com/users/michalczaplinski/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/michalczaplinski/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs that relate to code quality"
 			},
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 1101518360,
+				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
+				"name": "[Block] Image",
+				"color": "6767e5",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "Affects the Image Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12160,60 +13439,85 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 4,
-		"created_at": "2021-07-23T16:35:12Z",
-		"updated_at": "2021-07-29T15:51:36Z",
-		"closed_at": "2021-07-29T15:51:10Z",
+		"comments": 0,
+		"created_at": "2023-09-25T15:44:27Z",
+		"updated_at": "2023-09-25T16:48:18Z",
+		"closed_at": "2023-09-25T16:47:56Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33660",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33660",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33660.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33660.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nThe Link UI's rich preview feature for remote URLs was showing placeholders for image and description even thought that data did not exist in the rich preview data.\r\n\r\nThis would allow you to arrive at states such as:\r\n\r\n![image](https://user-images.githubusercontent.com/444434/126812983-e606765b-8166-4aa4-aebf-2bfe20a90129.png)\r\n\r\nThis PR corrects that by only showing the lower half of the rich preview if the necessary data is available. It will also only show the description or image if they are available.\r\n\r\n@javierarce I think this was actually an intentional feature. I know that because we encoded the feature into the tests!\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/40a511ec0e89ae401d799c66625b6fe0db00aea5/packages/block-editor/src/components/link-control/test/index.js#L1960-L1961\r\n\r\nTherefore I'm checking in with you to make sure you're aware that this change is being made. Essentially if the content doesn't exist then we won't see a placeholder.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n* Create a link to a page which doesn't return a description or an image but which does return a title or an icon. Good example is https://twitter.com/.\r\n* Click on the link to show a link preview.\r\n* See that the placeholders for image and description are not shown once the fetching has finished.\r\n* Check another \"normal\" URL to make sure we haven't caused any regressions.\r\n\r\nNote we have quite a bit of test coverage here so it should 🤞 🤞 🤞 🤞  be safe.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54793",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54793",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54793.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54793.patch",
+			"merged_at": "2023-09-25T16:47:56Z"
+		},
+		"body": "Just adding @artemiomorales and myself to the CODEOWNERS for the Image block to keep an eye on the Lightbox-related issues.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54793/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33657",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33657/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33657/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33657/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33657",
-		"id": 951670686,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk2MDE4ODMz",
-		"number": 33657,
-		"title": "RNMobile: Try unifying the unit test command on mobile",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54792",
+		"id": 1911696692,
+		"node_id": "PR_kwDOBNHdeM5bIoMB",
+		"number": 54792,
+		"title": "[RNMobile] Add optional chaining to `reusableBlock.title` and `reusableBlock.content`",
 		"user": {
-			"login": "guarani",
-			"id": 1898325,
-			"node_id": "MDQ6VXNlcjE4OTgzMjU=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1898325?v=4",
+			"login": "SiobhyB",
+			"id": 2998162,
+			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/guarani",
-			"html_url": "https://github.com/guarani",
-			"followers_url": "https://api.github.com/users/guarani/followers",
-			"following_url": "https://api.github.com/users/guarani/following{/other_user}",
-			"gists_url": "https://api.github.com/users/guarani/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/guarani/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/guarani/subscriptions",
-			"organizations_url": "https://api.github.com/users/guarani/orgs",
-			"repos_url": "https://api.github.com/users/guarani/repos",
-			"events_url": "https://api.github.com/users/guarani/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/guarani/received_events",
-			"type": "User",
-			"site_admin": false
+			"url": "https://api.github.com/users/SiobhyB",
+			"html_url": "https://github.com/SiobhyB",
+			"followers_url": "https://api.github.com/users/SiobhyB/followers",
+			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
+			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
+			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
+			"repos_url": "https://api.github.com/users/SiobhyB/repos",
+			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"type": "User",
+			"site_admin": false
 		},
 		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
 			{
 				"id": 982506020,
 				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
@@ -12222,20 +13526,69 @@
 				"color": "a3ef7a",
 				"default": false,
 				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": null,
-		"assignees": [],
+		"assignee": {
+			"login": "SiobhyB",
+			"id": 2998162,
+			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/SiobhyB",
+			"html_url": "https://github.com/SiobhyB",
+			"followers_url": "https://api.github.com/users/SiobhyB/followers",
+			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
+			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
+			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
+			"repos_url": "https://api.github.com/users/SiobhyB/repos",
+			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "SiobhyB",
+				"id": 2998162,
+				"node_id": "MDQ6VXNlcjI5OTgxNjI=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/SiobhyB",
+				"html_url": "https://github.com/SiobhyB",
+				"followers_url": "https://api.github.com/users/SiobhyB/followers",
+				"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
+				"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
+				"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
+				"repos_url": "https://api.github.com/users/SiobhyB/repos",
+				"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12258,77 +13611,93 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 3,
-		"created_at": "2021-07-23T15:16:35Z",
-		"updated_at": "2021-08-03T17:28:10Z",
-		"closed_at": "2021-08-03T17:27:45Z",
+		"created_at": "2023-09-25T14:54:54Z",
+		"updated_at": "2023-09-27T10:45:51Z",
+		"closed_at": "2023-09-27T10:45:20Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33657",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33657",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33657.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33657.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nUnify the the native unit test command.\r\n\r\nRelated https://github.com/wordpress-mobile/gutenberg-mobile/pull/3754\r\n\r\n## How has this been tested?\r\nRun the `npm run native test` command on a unit test:\r\n```\r\nnpm run native test packages/block-library/src/verse/test/edit.native.js\r\n```\r\nRun it on an integration test:\r\n```\r\nnpm run native test packages/block-library/src/cover/test/edit.native.js\r\n```\r\nRun it on any test and ensure the debugger connects properly:\r\n1. Put a `debugger;` statement in any unit test or integration test file e.g. `packages/block-library/src/verse/test/edit.native.js`\r\n2. Run the `:debug` variant of the command to run tests e.g. `npm run native test:debug packages/block-library/src/verse/test/edit.native.js`\r\n3. Open Google Chrome and enter `chrome://inspect`\r\n4. Click on the target\r\n5. Ensure that the debugger connects and stops at the `debugger;` statement\r\n\r\n## Types of changes\r\n- Updated unit test command and documentation\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54792",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54792",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54792.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54792.patch",
+			"merged_at": "2023-09-27T10:45:20Z"
+		},
+		"body": "Potential fix for https://github.com/wordpress-mobile/gutenberg-mobile/issues/5496 and https://github.com/wordpress-mobile/WordPress-iOS/issues/21083\r\n\r\n* Gutenberg Mobile PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/6228\r\n\r\n## What?\r\n\r\nThis PR adds safety checks for the `title` and `content` properties within the `buildReusableBlockInserterItem` and `getUserPatterns` functions.\r\n\r\n## Why?\r\n\r\nWe've received multiple reports of Gutenberg Mobile crashing with the following error:\r\n\r\n```\r\nTypeError: Cannot read property 'raw' of undefined\r\n```\r\n\r\nEven after digging deeply into user reports and available logs, attempts to reproduce the crash have been unsuccessful. The main clues we have to go on are as follows:\r\n\r\n* The most recent logs vary, but usually reference `block-editor/src/store/selectors.js` or `block-editor/src/store/actions.js`.\r\n* The only reference of `raw` in those files is within `block-editor/src/store/selectors.js`.\r\n* While reviewing some logs, I noted that the crash occurs frequently while users are on pages with _unsynced_ patterns, so it feels logical that the reference to `raw` in `getUserPatterns` could be at fault.\r\n* A crash with a similar log went away after adding safety checks to one of those references in https://github.com/WordPress/gutenberg/pull/53721. Though, it's worth noting we're not clear if the crash was resolved or simply \"replaced\" with this newer crash.\r\n\r\nWith this PR, we're making another educated guess at the root cause of the crash in an attempt to fix it.\r\n\r\n## How?\r\n\r\nSimilar to https://github.com/WordPress/gutenberg/pull/53721, I'm proposing optional chaining be added in the three remaining places where `raw` appears without optional chaining in the `block-editor/src/store/selectors.js` file. Based on the code's logic, we can assume that `reusableBlock` will always be defined, so the chaining is added alongside `title` and `content`.\r\n\r\nBy using optional chaining, the code should gracefully handle scenarios where `title` or `content` might be undefined, potentially preventing a TypeError from being thrown.\r\n\r\n## Testing Instructions\r\n\r\n> **Note**\r\n> For testing on the web, Playground's PR previewer can be used: https://playground.wordpress.net/gutenberg.html\r\n\r\nAs the crash isn't easily reproducible, there isn't a straight forward way to ensure this PR fixes it. Instead, the logic of making these change should be verified.\r\n\r\nIn both the app and on the web, we should also ensure that there are no regressions related to both synced and unsynced patterns, especially those with no titles:\r\n\r\n* Publish a new synced or unsynced pattern with no title.\r\n* Begin a new post and add the synced or unsynced pattern to it.\r\n* Verify that there is no issue related to there being no title.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54792/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33652",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33652/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33652/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33652/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33652",
-		"id": 951614964,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk1OTcxNTA5",
-		"number": 33652,
-		"title": "Improve display of LinkURL menu and fix spacing.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54789",
+		"id": 1911577751,
+		"node_id": "PR_kwDOBNHdeM5bIOCa",
+		"number": 54789,
+		"title": "Bump tj-actions/changed-files from 39.1.2 to 39.2.0",
 		"user": {
-			"login": "mtias",
-			"id": 548849,
-			"node_id": "MDQ6VXNlcjU0ODg0OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/548849?v=4",
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/mtias",
-			"html_url": "https://github.com/mtias",
-			"followers_url": "https://api.github.com/users/mtias/followers",
-			"following_url": "https://api.github.com/users/mtias/following{/other_user}",
-			"gists_url": "https://api.github.com/users/mtias/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/mtias/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/mtias/subscriptions",
-			"organizations_url": "https://api.github.com/users/mtias/orgs",
-			"repos_url": "https://api.github.com/users/mtias/repos",
-			"events_url": "https://api.github.com/users/mtias/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/mtias/received_events",
-			"type": "User",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs related to build tooling"
 			},
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "Pull requests that update GitHub Actions code"
 			}
 		],
 		"state": "closed",
@@ -12336,13 +13705,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12365,131 +13734,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 6,
-		"created_at": "2021-07-23T14:09:31Z",
-		"updated_at": "2021-07-30T14:06:43Z",
-		"closed_at": "2021-07-30T13:16:01Z",
+		"comments": 0,
+		"created_at": "2023-09-25T13:59:32Z",
+		"updated_at": "2023-09-28T14:02:18Z",
+		"closed_at": "2023-09-28T14:01:55Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33652",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33652",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33652.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33652.patch"
-		},
-		"body": "There were some spacing issues on the Link URL menu that would make the icon shrink:\r\n\r\n<img width=\"651\" alt=\"Screenshot 2021-07-23 at 16 01 02\" src=\"https://user-images.githubusercontent.com/548849/126793962-81159625-3198-4215-be3c-26bca50e1ea7.png\">\r\n\r\nWhich is corrected here. It also restores the true width of the icon (24px which was assumed to be 32 before?):\r\n\r\n<img width=\"636\" alt=\"Screenshot 2021-07-23 at 16 01 22\" src=\"https://user-images.githubusercontent.com/548849/126794016-ef534c09-9de0-4b95-a471-863511f93559.png\">\r\n\r\nThere's also some alignment issues that this corrects (note the bottom part with the toggle is now aligned):\r\n\r\n<img width=\"614\" alt=\"Screenshot 2021-07-23 at 16 05 10\" src=\"https://user-images.githubusercontent.com/548849/126794119-0730cd6e-e1ae-4ac8-8580-9a7e048054fc.png\">\r\n\r\ncc @javierarce \r\n\r\n(The middle one still seems like it has spacing issues on the result list, but given it's there to accommodate the hover effect I think we can leave it be for now.)",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54789",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54789",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54789.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54789.patch",
+			"merged_at": "2023-09-28T14:01:55Z"
+		},
+		"body": "Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 39.1.2 to 39.2.0.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/tj-actions/changed-files/releases\">tj-actions/changed-files's releases</a>.</em></p>\n<blockquote>\n<h2>v39.2.0</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Upgraded to v39.1.2 by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1594\">tj-actions/changed-files#1594</a></li>\n<li>chore(deps): update actions/checkout digest to 8ade135 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1599\">tj-actions/changed-files#1599</a></li>\n<li>feat: add support for restricting the deleted files output to only deleted directories by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1601\">tj-actions/changed-files#1601</a></li>\n<li>Updated README.md by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1602\">tj-actions/changed-files#1602</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/tj-actions/changed-files/compare/v39...v39.2.0\">https://github.com/tj-actions/changed-files/compare/v39...v39.2.0</a></p>\n</blockquote>\n</details>\n<details>\n<summary>Changelog</summary>\n<p><em>Sourced from <a href=\"https://github.com/tj-actions/changed-files/blob/main/HISTORY.md\">tj-actions/changed-files's changelog</a>.</em></p>\n<blockquote>\n<h1>Changelog</h1>\n<h1><a href=\"https://github.com/tj-actions/changed-files/compare/v39.1.2...v39.2.0\">39.2.0</a> - (2023-09-22)</h1>\n<h2><!-- raw HTML omitted -->🚀 Features</h2>\n<ul>\n<li>Add support for restricting the deleted files output to only deleted directories (<a href=\"https://github.com/tj-actions/changed-files/commit/e6ce728d79e6c15a69a0eea43b1968c2f9da2e8b\">e6ce728</a>)  - (Tonye Jack)</li>\n</ul>\n<h2><!-- raw HTML omitted -->🐛 Bug Fixes</h2>\n<ul>\n<li>Fixed test for windows\n(<a href=\"https://github.com/tj-actions/changed-files/commit/e94da5a065ad8dc8e519802967e6e6ccea3f5e87\">e94da5a</a>)  - (Tonye Jack)</li>\n<li>Fixed the test\n(<a href=\"https://github.com/tj-actions/changed-files/commit/a721d001dd7be793f80500eb3f60ea9db0743864\">a721d00</a>)  - (Tonye Jack)</li>\n</ul>\n<h2><!-- raw HTML omitted -->➕ Add</h2>\n<ul>\n<li>Added missing changes and modified dist assets.\n(<a href=\"https://github.com/tj-actions/changed-files/commit/8af3110d4dfd8c1cc180fee0f14bcf402b598fb0\">8af3110</a>)  - (GitHub Action)</li>\n<li>Added a test files\n(<a href=\"https://github.com/tj-actions/changed-files/commit/920856cfdd4b4be17810e34b197596397473adf6\">920856c</a>)  - (Tonye Jack)</li>\n<li>Added missing changes and modified dist assets.\n(<a href=\"https://github.com/tj-actions/changed-files/commit/8296c33fd0180e60f8f7231f51d246bed82abf1f\">8296c33</a>)  - (GitHub Action)</li>\n<li>Added missing changes and modified dist assets.\n(<a href=\"https://github.com/tj-actions/changed-files/commit/23985514152c809eeea6e96f26c98b66dc77befa\">2398551</a>)  - (GitHub Action)</li>\n<li>Added missing changes and modified dist assets.\n(<a href=\"https://github.com/tj-actions/changed-files/commit/ff65504325c3dc10f03100fd228c04eeca7cca3a\">ff65504</a>)  - (GitHub Action)</li>\n<li>Added missing changes and modified dist assets.\n(<a href=\"https://github.com/tj-actions/changed-files/commit/2325baada3477c4ca5bd25dce29d88b1efdf9f01\">2325baa</a>)  - (GitHub Action)</li>\n</ul>\n<h2><!-- raw HTML omitted -->➖ Remove</h2>\n<ul>\n<li>Deleted the test3 directory\n(<a href=\"https://github.com/tj-actions/changed-files/commit/cd1e384723e4d1a184568182ac2b27c53ebf017f\">cd1e384</a>)  - (Tonye Jack)</li>\n<li>Deleted a single test file\n(<a href=\"https://github.com/tj-actions/changed-files/commit/a52f8621d26d5d9f54b80f74bda2d9eedff94693\">a52f862</a>)  - (Tonye Jack)</li>\n<li>Removed unused code\n(<a href=\"https://github.com/tj-actions/changed-files/commit/c98e6d20fc234e1f4b0047cd43af2a37f8f38f44\">c98e6d2</a>)  - (Tonye Jack)</li>\n<li>Removed unused code\n(<a href=\"https://github.com/tj-actions/changed-files/commit/060b3b9b039f423591f1c790691e6d4ddabb1f5e\">060b3b9</a>)  - (Tonye Jack)</li>\n</ul>\n<h2><!-- raw HTML omitted -->🔄 Update</h2>\n<ul>\n<li>Updated README.md (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1602\">#1602</a>)</li>\n</ul>\n<p>Co-authored-by: jackton1 <a href=\"mailto:jackton1@users.noreply.github.com\">jackton1@users.noreply.github.com</a> (<a href=\"https://github.com/tj-actions/changed-files/commit/8238a4103220c636f2dad328ead8a7c8dbe316a3\">8238a41</a>)  - (tj-actions[bot])</p>\n<ul>\n<li>Update test\n(<a href=\"https://github.com/tj-actions/changed-files/commit/d2486b470f2ea6ffb0bc55a779968d797a2e3009\">d2486b4</a>)  - (Tonye Jack)</li>\n<li>Updated test\n(<a href=\"https://github.com/tj-actions/changed-files/commit/e7fd9e59a4c7d9b50cd73b32576bf580517e7f60\">e7fd9e5</a>)  - (Tonye Jack)</li>\n</ul>\n<!-- raw HTML omitted -->\n</blockquote>\n<p>... (truncated)</p>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/8238a4103220c636f2dad328ead8a7c8dbe316a3\"><code>8238a41</code></a> Updated README.md (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1602\">#1602</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/aaf4339aa1cd7bd2fbe6d869601e3c52baac24ca\"><code>aaf4339</code></a> Merge pull request <a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1601\">#1601</a> from tj-actions/feat/add-support-for-restricting-the...</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/d2486b470f2ea6ffb0bc55a779968d797a2e3009\"><code>d2486b4</code></a> Update test</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/e7fd9e59a4c7d9b50cd73b32576bf580517e7f60\"><code>e7fd9e5</code></a> Updated test</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/e3cc088a9606acc8b7a64528de485e4ae1f868ec\"><code>e3cc088</code></a> Merge branch 'main' into feat/add-support-for-restricting-the-deleted-files-o...</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/72d7089b7241aaa6c60dc39e8336f9aef5ebd1da\"><code>72d7089</code></a> chore(deps): update actions/checkout digest to 8ade135</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/e94da5a065ad8dc8e519802967e6e6ccea3f5e87\"><code>e94da5a</code></a> Fixed test for windows</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/a721d001dd7be793f80500eb3f60ea9db0743864\"><code>a721d00</code></a> Fixed the test</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/8af3110d4dfd8c1cc180fee0f14bcf402b598fb0\"><code>8af3110</code></a> Added missing changes and modified dist assets.</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/a351a301d2a539ab0e3949e7d8ba1aa8fe7fc145\"><code>a351a30</code></a> Merge 62a23f82b163be6455968457151fa0094ec92a63 into 0b947ed818f8a396b19a26354...</li>\n<li>Additional commits viewable in <a href=\"https://github.com/tj-actions/changed-files/compare/41960309398d165631f08c5df47a11147e14712b...8238a4103220c636f2dad328ead8a7c8dbe316a3\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=tj-actions/changed-files&package-manager=github_actions&previous-version=39.1.2&new-version=39.2.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54789/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33629",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33629/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33629/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33629/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33629",
-		"id": 950551877,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk1MDgxMzQ4",
-		"number": 33629,
-		"title": "[Block Library - Query Pagination Numbers]: Fix first page's link",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54788",
+		"id": 1911577311,
+		"node_id": "PR_kwDOBNHdeM5bIN8K",
+		"number": 54788,
+		"title": "Bump actions/checkout from 4.0.0 to 4.1.0",
 		"user": {
-			"login": "ntsekouras",
-			"id": 16275880,
-			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ntsekouras",
-			"html_url": "https://github.com/ntsekouras",
-			"followers_url": "https://api.github.com/users/ntsekouras/followers",
-			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-			"repos_url": "https://api.github.com/users/ntsekouras/repos",
-			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
-			"type": "User",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "Issues or PRs related to build tooling"
 			},
 			{
-				"id": 2479589311,
-				"node_id": "MDU6TGFiZWwyNDc5NTg5MzEx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Query%20Pagination",
-				"name": "[Block] Query Pagination",
-				"color": "6767e5",
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
 				"default": false,
-				"description": ""
+				"description": "Pull requests that update GitHub Actions code"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "ntsekouras",
-			"id": 16275880,
-			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/ntsekouras",
-			"html_url": "https://github.com/ntsekouras",
-			"followers_url": "https://api.github.com/users/ntsekouras/followers",
-			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-			"repos_url": "https://api.github.com/users/ntsekouras/repos",
-			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "ntsekouras",
-				"id": 16275880,
-				"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-				"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/ntsekouras",
-				"html_url": "https://github.com/ntsekouras",
-				"followers_url": "https://api.github.com/users/ntsekouras/followers",
-				"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-				"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-				"repos_url": "https://api.github.com/users/ntsekouras/repos",
-				"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12512,56 +13857,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-22T11:17:15Z",
-		"updated_at": "2021-08-09T11:27:46Z",
-		"closed_at": "2021-08-09T11:27:23Z",
+		"comments": 0,
+		"created_at": "2023-09-25T13:59:20Z",
+		"updated_at": "2023-09-28T14:02:41Z",
+		"closed_at": "2023-09-28T14:02:18Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33629",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33629",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33629.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33629.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nFixes: https://github.com/WordPress/gutenberg/issues/32792\r\n\r\n`paginate_links` doesn't use the provided `format` when the page is `1`. This is great for the main query as it removes the extra query params making the URL shorter, but in the case of multiple custom queries is problematic. It results in returning an empty link which ends up with a link to the current page.\r\n\r\nA way to address this is to add a `fake` query arg with no value that is the same for all custom queries. This way the link is not empty and preserves all the other existent query args.\r\n\r\n\r\nReference: https://developer.wordpress.org/reference/functions/paginate_links/\r\n`$link = str_replace( '%_%', 1 == $n ? '' : $args['format'], $args['base'] );\r\n                $link = str_replace( '%#%', $n, $link );`\r\n<!-- Please describe what you have changed or added -->\r\n\r\n## How has this been tested?\r\n1. In page with many `Query Loop` blocks with `QueryPaginationNumbers` blocks check that by clicking another page number first, the pagination link for the first page (`1`), works as expected.\r\n2. This can be tested with a single custom `Query` in a page as well, but it's better to have multiple `Query Loop` blocks which can be both `custom` and ones that `inherit the global query`.\r\n\r\n## Notes\r\n1. The issue can be replicated only when we have no other query args, because in that case the `link` is not empty - thus the `hacky` approach here to add an empty `query arg`.\r\n\r\nI couldn't find any better alternative so a more elegant solution would be more than welcomed. We could also look at making some changes in core `paginate_links` but needs more exploration there. For example we could extend the `paginate_links` filter by passing the current `page number ($n)` and use this filter in the block??(🤔 ).\r\n\r\n\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54788",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54788",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54788.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54788.patch",
+			"merged_at": "2023-09-28T14:02:18Z"
+		},
+		"body": "Bumps [actions/checkout](https://github.com/actions/checkout) from 4.0.0 to 4.1.0.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/actions/checkout/releases\">actions/checkout's releases</a>.</em></p>\n<blockquote>\n<h2>v4.1.0</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Update README.md for V4 by <a href=\"https://github.com/sivapalan\"><code>@​sivapalan</code></a> in <a href=\"https://redirect.github.com/actions/checkout/pull/1452\">actions/checkout#1452</a></li>\n<li>Add support for partial checkout filters by <a href=\"https://github.com/finleygn\"><code>@​finleygn</code></a> in <a href=\"https://redirect.github.com/actions/checkout/pull/1396\">actions/checkout#1396</a></li>\n<li>Prepare 4.1.0 release by <a href=\"https://github.com/cory-miller\"><code>@​cory-miller</code></a> in <a href=\"https://redirect.github.com/actions/checkout/pull/1496\">actions/checkout#1496</a></li>\n</ul>\n<h2>New Contributors</h2>\n<ul>\n<li><a href=\"https://github.com/sivapalan\"><code>@​sivapalan</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/checkout/pull/1452\">actions/checkout#1452</a></li>\n<li><a href=\"https://github.com/finleygn\"><code>@​finleygn</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/checkout/pull/1396\">actions/checkout#1396</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/actions/checkout/compare/v4.0.0...v4.1.0\">https://github.com/actions/checkout/compare/v4.0.0...v4.1.0</a></p>\n</blockquote>\n</details>\n<details>\n<summary>Changelog</summary>\n<p><em>Sourced from <a href=\"https://github.com/actions/checkout/blob/main/CHANGELOG.md\">actions/checkout's changelog</a>.</em></p>\n<blockquote>\n<h1>Changelog</h1>\n<h2>v4.1.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1396\">Add support for partial checkout filters</a></li>\n</ul>\n<h2>v4.0.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1067\">Support fetching without the --progress option</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1436\">Update to node20</a></li>\n</ul>\n<h2>v3.6.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1377\">Fix: Mark test scripts with Bash'isms to be run via Bash</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/579\">Add option to fetch tags even if fetch-depth &gt; 0</a></li>\n</ul>\n<h2>v3.5.3</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1196\">Fix: Checkout fail in self-hosted runners when faulty submodule are checked-in</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1287\">Fix typos found by codespell</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1369\">Add support for sparse checkouts</a></li>\n</ul>\n<h2>v3.5.2</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1289\">Fix api endpoint for GHES</a></li>\n</ul>\n<h2>v3.5.1</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1246\">Fix slow checkout on Windows</a></li>\n</ul>\n<h2>v3.5.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1237\">Add new public key for known_hosts</a></li>\n</ul>\n<h2>v3.4.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1209\">Upgrade codeql actions to v2</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1210\">Upgrade dependencies</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1225\">Upgrade <code>@​actions/io</code></a></li>\n</ul>\n<h2>v3.3.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1045\">Implement branch list using callbacks from exec function</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1050\">Add in explicit reference to private checkout options</a></li>\n<li>[Fix comment typos (that got added in <a href=\"https://redirect.github.com/actions/checkout/issues/770\">#770</a>)](<a href=\"https://redirect.github.com/actions/checkout/pull/1057\">actions/checkout#1057</a>)</li>\n</ul>\n<h2>v3.2.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/942\">Add GitHub Action to perform release</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/967\">Fix status badge</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1002\">Replace datadog/squid with ubuntu/squid Docker image</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/964\">Wrap pipeline commands for submoduleForeach in quotes</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1029\">Update <code>@​actions/io</code> to 1.1.2</a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/1039\">Upgrading version to 3.2.0</a></li>\n</ul>\n<h2>v3.1.0</h2>\n<ul>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/939\">Use <code>@​actions/core</code> <code>saveState</code> and <code>getState</code></a></li>\n<li><a href=\"https://redirect.github.com/actions/checkout/pull/922\">Add <code>github-server-url</code> input</a></li>\n</ul>\n<h2>v3.0.2</h2>\n<!-- raw HTML omitted -->\n</blockquote>\n<p>... (truncated)</p>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/actions/checkout/commit/8ade135a41bc03ea155e62e844d188df1ea18608\"><code>8ade135</code></a> Prepare 4.1.0 release (<a href=\"https://redirect.github.com/actions/checkout/issues/1496\">#1496</a>)</li>\n<li><a href=\"https://github.com/actions/checkout/commit/c533a0a4cfc4962971818edcfac47a2899e69799\"><code>c533a0a</code></a> Add support for partial checkout filters (<a href=\"https://redirect.github.com/actions/checkout/issues/1396\">#1396</a>)</li>\n<li><a href=\"https://github.com/actions/checkout/commit/72f2cec99f417b1a1c5e2e88945068983b7965f9\"><code>72f2cec</code></a> Update README.md for V4 (<a href=\"https://redirect.github.com/actions/checkout/issues/1452\">#1452</a>)</li>\n<li>See full diff in <a href=\"https://github.com/actions/checkout/compare/3df4ab11eba7bda6032a0b82a6bb43b11571feac...8ade135a41bc03ea155e62e844d188df1ea18608\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=actions/checkout&package-manager=github_actions&previous-version=4.0.0&new-version=4.1.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54788/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33627",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33627/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33627/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33627/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33627",
-		"id": 950476171,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk1MDE2NTU3",
-		"number": 33627,
-		"title": "Fix some JAWS bugs",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54785",
+		"id": 1911450976,
+		"node_id": "PR_kwDOBNHdeM5bHyWq",
+		"number": 54785,
+		"title": "Try fixing the flaky 'Toolbar roving tabindex' e2e test",
 		"user": {
-			"login": "alexstine",
-			"id": 13755480,
-			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/alexstine",
-			"html_url": "https://github.com/alexstine",
-			"followers_url": "https://api.github.com/users/alexstine/followers",
-			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
-			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
-			"organizations_url": "https://api.github.com/users/alexstine/orgs",
-			"repos_url": "https://api.github.com/users/alexstine/repos",
-			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -12573,97 +13934,70 @@
 				"name": "[Type] Bug",
 				"color": "d93f0b",
 				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 546517042,
-				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Accessibility%20(a11y)",
-				"name": "Accessibility (a11y)",
-				"color": "655104",
-				"default": false,
-				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
-			},
-			{
-				"id": 587343997,
-				"node_id": "MDU6TGFiZWw1ODczNDM5OTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Status]%20In%20Progress",
-				"name": "[Status] In Progress",
-				"color": "0052cc",
-				"default": false,
-				"description": "Tracking issues with work in progress"
-			},
-			{
-				"id": 1086171268,
-				"node_id": "MDU6TGFiZWwxMDg2MTcxMjY4",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback",
-				"name": "Needs Accessibility Feedback",
-				"color": "ffbcbd",
-				"default": false,
-				"description": ""
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 1388646432,
-				"node_id": "MDU6TGFiZWwxMzg4NjQ2NDMy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/First-time%20Contributor",
-				"name": "First-time Contributor",
-				"color": "a0f762",
+				"id": 1699237849,
+				"node_id": "MDU6TGFiZWwxNjk5MjM3ODQ5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20E2E%20Tests",
+				"name": "[Package] E2E Tests",
+				"color": "ed2572",
 				"default": false,
-				"description": "Pull request opened by a first-time contributor to Gutenberg repository"
+				"description": "/packages/e2e-tests"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "alexstine",
-			"id": 13755480,
-			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/alexstine",
-			"html_url": "https://github.com/alexstine",
-			"followers_url": "https://api.github.com/users/alexstine/followers",
-			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
-			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
-			"organizations_url": "https://api.github.com/users/alexstine/orgs",
-			"repos_url": "https://api.github.com/users/alexstine/repos",
-			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "alexstine",
-				"id": 13755480,
-				"node_id": "MDQ6VXNlcjEzNzU1NDgw",
-				"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/alexstine",
-				"html_url": "https://github.com/alexstine",
-				"followers_url": "https://api.github.com/users/alexstine/followers",
-				"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
-				"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
-				"organizations_url": "https://api.github.com/users/alexstine/orgs",
-				"repos_url": "https://api.github.com/users/alexstine/repos",
-				"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/alexstine/received_events",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12686,140 +14020,138 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 6,
-		"created_at": "2021-07-22T09:39:23Z",
-		"updated_at": "2021-08-04T07:28:10Z",
-		"closed_at": "2021-08-04T07:27:41Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 4,
+		"created_at": "2023-09-25T12:54:06Z",
+		"updated_at": "2023-10-04T14:18:40Z",
+		"closed_at": "2023-09-26T06:50:32Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33627",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33627",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33627.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33627.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nFixes #29526\r\n\r\n1. JAWS will now have the ability to use Gutenberg navigation mode and here the blocks announced via Tab.\r\n2.Removed broken speak() function call that was only working part of the time.\r\n3. Remove the wordpress/a11y package. No longer needed.\r\n4.Replace `role=\"group\"` with `role=\"document\"` for better block editing experience in earlier versions of JAWS. \r\n \r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nI have tested using NVDA and JAWS on Windows 10. I tested using Voiceover on Mac. All seems to be in working order.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\nHopefully some much needed Bug fixes.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54785",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54785",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54785.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54785.patch",
+			"merged_at": "2023-09-26T06:50:32Z"
+		},
+		"body": "## What?\r\nPR tries to fix the flaky e2e test - `ensures base block toolbars use roving tabindex`, which has been failing recently.\r\n\r\nFailure reports:\r\n\r\n* https://github.com/WordPress/gutenberg/actions/runs/6257434872/job/16989799230\r\n* https://github.com/WordPress/gutenberg/actions/runs/6263647737/job/17008506615?pr=54695#step:7:21\r\n* https://github.com/WordPress/gutenberg/actions/runs/6264468875/job/17011238781?pr=54695\r\n* https://github.com/WordPress/gutenberg/actions/runs/6298998901/job/17098912446\r\n\r\n## Why?\r\nThe [previous attempt](https://github.com/WordPress/gutenberg/pull/51600) wasn't enough; the user preferences sometimes still leak between e2e tests.\r\n\r\n## How?\r\nExplicitly turn off 'fixedToolbar' before running the tests.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54785/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33623",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33623/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33623/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33623/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33623",
-		"id": 950451600,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njk0OTk1OTUy",
-		"number": 33623,
-		"title": "FormTokenField: Avoid error when maxLength value is hit",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54784",
+		"id": 1911445934,
+		"node_id": "PR_kwDOBNHdeM5bHxPY",
+		"number": 54784,
+		"title": "Performance Tests: Support the Site Editor's legacy spinner",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "WunderBart",
+			"id": 1451471,
+			"node_id": "MDQ6VXNlcjE0NTE0NzE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1451471?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/WunderBart",
+			"html_url": "https://github.com/WunderBart",
+			"followers_url": "https://api.github.com/users/WunderBart/followers",
+			"following_url": "https://api.github.com/users/WunderBart/following{/other_user}",
+			"gists_url": "https://api.github.com/users/WunderBart/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/WunderBart/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/WunderBart/subscriptions",
+			"organizations_url": "https://api.github.com/users/WunderBart/orgs",
+			"repos_url": "https://api.github.com/users/WunderBart/repos",
+			"events_url": "https://api.github.com/users/WunderBart/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/WunderBart/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 659839209,
-				"node_id": "MDU6TGFiZWw2NTk4MzkyMDk=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20UI%20Components",
-				"name": "[Feature] UI Components",
-				"color": "fbca04",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 997392122,
-				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
-				"name": "[Package] Components",
-				"color": "ed2572",
+				"id": 731693674,
+				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
+				"name": "[Type] Performance",
+				"color": "f3f4fe",
 				"default": false,
-				"description": "/packages/components"
+				"description": "Related to performance efforts"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "WunderBart",
+			"id": 1451471,
+			"node_id": "MDQ6VXNlcjE0NTE0NzE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1451471?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/WunderBart",
+			"html_url": "https://github.com/WunderBart",
+			"followers_url": "https://api.github.com/users/WunderBart/followers",
+			"following_url": "https://api.github.com/users/WunderBart/following{/other_user}",
+			"gists_url": "https://api.github.com/users/WunderBart/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/WunderBart/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/WunderBart/subscriptions",
+			"organizations_url": "https://api.github.com/users/WunderBart/orgs",
+			"repos_url": "https://api.github.com/users/WunderBart/repos",
+			"events_url": "https://api.github.com/users/WunderBart/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/WunderBart/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"login": "WunderBart",
+				"id": 1451471,
+				"node_id": "MDQ6VXNlcjE0NTE0NzE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1451471?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"url": "https://api.github.com/users/WunderBart",
+				"html_url": "https://github.com/WunderBart",
+				"followers_url": "https://api.github.com/users/WunderBart/followers",
+				"following_url": "https://api.github.com/users/WunderBart/following{/other_user}",
+				"gists_url": "https://api.github.com/users/WunderBart/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/WunderBart/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/WunderBart/subscriptions",
+				"organizations_url": "https://api.github.com/users/WunderBart/orgs",
+				"repos_url": "https://api.github.com/users/WunderBart/repos",
+				"events_url": "https://api.github.com/users/WunderBart/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/WunderBart/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12842,69 +14174,199 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-07-22T09:08:55Z",
-		"updated_at": "2021-07-28T14:45:54Z",
-		"closed_at": "2021-07-28T14:45:29Z",
+		"comments": 4,
+		"created_at": "2023-09-25T12:51:18Z",
+		"updated_at": "2023-09-25T14:35:13Z",
+		"closed_at": "2023-09-25T14:34:48Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33623",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33623",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33623.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33623.patch"
-		},
-		"body": "## Description\r\nSets no-operation function as a `onChange` default for the `TokenInput` component.\r\n\r\nCodeSandbox showcasing the issue - https://codesandbox.io/s/formtokenfield-dv9nb\r\n\r\nFixes #18463.\r\n\r\n## How has this been tested?\r\nTemporarily added `maxLength` to the `FlatTermSelector` component for testings, but probably there's a better way to do it.\r\n\r\n## Types of changes\r\nBugfix\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54784",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54784",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54784.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54784.patch",
+			"merged_at": "2023-09-25T14:34:48Z"
+		},
+		"body": "## What?\r\n\r\nThis is needed for older branches where the current `loader` element is referred to as `spinner`. We need to be able to compare the current code to the older one (e.g. iframed vs legacy canvas) so some elements that are now legacy still need support in the performance tests. \r\n\r\nWithout this selector, this locator resolves immediately because it doesn't find a spinner element. This can cause the consequent canvas body click to timeout (flaky). See the attached trace as an example (taken from a failed CI job):\r\n\r\n👉 [trace.zip](https://github.com/WordPress/gutenberg/files/12715138/trace.zip) (_open via https://trace.playwright.dev/_)",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54784/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33573",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33573/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33573/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33573/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33573",
-		"id": 948722800,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjkzNTI0NDk3",
-		"number": 33573,
-		"title": "Update docs to reflect new automated process for feature grouping",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54782",
+		"id": 1911176810,
+		"node_id": "PR_kwDOBNHdeM5bG1f8",
+		"number": 54782,
+		"title": "Update pattern import menu item",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "jameskoster",
+			"id": 846565,
+			"node_id": "MDQ6VXNlcjg0NjU2NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/846565?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/jameskoster",
+			"html_url": "https://github.com/jameskoster",
+			"followers_url": "https://api.github.com/users/jameskoster/followers",
+			"following_url": "https://api.github.com/users/jameskoster/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jameskoster/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jameskoster/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jameskoster/subscriptions",
+			"organizations_url": "https://api.github.com/users/jameskoster/orgs",
+			"repos_url": "https://api.github.com/users/jameskoster/repos",
+			"events_url": "https://api.github.com/users/jameskoster/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jameskoster/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 3500693107,
+				"node_id": "LA_kwDOBNHdeM7QqFZz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Pattern",
+				"name": "[Block] Pattern",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Patterns Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
 			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 9,
+		"created_at": "2023-09-25T10:28:52Z",
+		"updated_at": "2023-10-05T11:16:35Z",
+		"closed_at": "2023-09-26T09:39:37Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54782",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54782",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54782.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54782.patch",
+			"merged_at": "2023-09-26T09:39:37Z"
+		},
+		"body": "Follow-up to https://github.com/WordPress/gutenberg/pull/54337.\r\n\r\n## What?\r\nUpdate the appearance / label of the pattern import menu item.\r\n\r\n### Before\r\n<img width=\"549\" alt=\"Screenshot 2023-09-25 at 11 06 39\" src=\"https://github.com/WordPress/gutenberg/assets/846565/7dd7ffb4-3e91-46e9-941a-8f6c3397bbc0\">\r\n\r\n\r\n### After\r\n<img width=\"513\" alt=\"Screenshot 2023-09-25 at 11 24 33\" src=\"https://github.com/WordPress/gutenberg/assets/846565/f3e40feb-5b2d-4252-8052-37470cbf86f6\">\r\n\r\n## Why?\r\nThe `upload` icon is more indicative of the action. The shorter label is less noisy and a bit easier to interpret at a glance. ",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54782/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54775",
+		"id": 1910951375,
+		"node_id": "PR_kwDOBNHdeM5bGFNj",
+		"number": 54775,
+		"title": "Upgrade wp-prettier to v3.0.3 (final)",
+		"user": {
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
 			{
 				"id": 596512821,
 				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
@@ -12912,70 +14374,7524 @@
 				"name": "[Type] Build Tooling",
 				"color": "111111",
 				"default": false,
-				"description": ""
-			},
-			{
-				"id": 2551400612,
-				"node_id": "MDU6TGFiZWwyNTUxNDAwNjEy",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/developer-docs",
-				"name": "developer-docs",
-				"color": "1d76db",
-				"default": false,
-				"description": "Issues that impact the block editor developer documentation site"
+				"description": "Issues or PRs related to build tooling"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+				"login": "jsnajdr",
+				"id": 664258,
+				"node_id": "MDQ6VXNlcjY2NDI1OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
+				"url": "https://api.github.com/users/jsnajdr",
+				"html_url": "https://github.com/jsnajdr",
+				"followers_url": "https://api.github.com/users/jsnajdr/followers",
+				"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+				"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+				"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+				"repos_url": "https://api.github.com/users/jsnajdr/repos",
+				"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-25T08:23:47Z",
+		"updated_at": "2023-09-25T11:41:13Z",
+		"closed_at": "2023-09-25T11:40:46Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54775",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54775",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54775.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54775.patch",
+			"merged_at": "2023-09-25T11:40:46Z"
+		},
+		"body": "Fixes https://github.com/WordPress/gutenberg/issues/54749.\r\n\r\nFinalizes the Prettier upgrade to 3.0.3. After a week without discovering any new bugs, I released final 3.0.3 version of `wp-prettier` (previous releases were betas), and updated Gutenberg's `package.json` files to use the final version.\r\n\r\nI also added the reformatting commits for 3.0.3 (#54539) and 2.8.5 (#49258) to the `.git-blame-ignore-revs` file.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54775/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54773",
+		"id": 1910571897,
+		"node_id": "PR_kwDOBNHdeM5bEzDo",
+		"number": 54773,
+		"title": "Search block: update alignment and icon button width",
+		"user": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1539734701,
+				"node_id": "MDU6TGFiZWwxNTM5NzM0NzAx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Search",
+				"name": "[Block] Search",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Search Block - used to display a search field"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-25T03:09:55Z",
+		"updated_at": "2023-09-26T03:16:56Z",
+		"closed_at": "2023-09-26T03:16:33Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54773",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54773",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54773.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54773.patch",
+			"merged_at": "2023-09-26T03:16:33Z"
+		},
+		"body": "## What?\r\n1. Give the rich text button a CSS declaration of `text:center`\r\n2. Remove max-width change for buttons with icons only so that it doesn't affect search button icons in the header or in narrow widths\r\n\r\n\r\n## Why?\r\n1. In the editor, the button text was aligned left because it was being rendered as a text field (and not a button). In the frontend the text is centered because it's a button 😄 \r\n2. For search buttons with icons only, the `-100px` in the `calc()` formula was causing the button to be a bit squished\r\n\r\n## Testing Instructions\r\nI'm using 2023 to test, though this should work in other block themes.\r\n\r\nAdd a search block to a page. Use text for the button label and add a break point so you can see how the text is aligned.\r\n\r\nSave the page. The search block button text alignment in the editor should match the frontend.\r\n\r\n<img width=\"682\" alt=\"Screenshot 2023-09-25 at 12 20 10 pm\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/1c4abb08-e84e-4e9c-a931-c5a4c9ccc14a\">\r\n<img width=\"681\" alt=\"Screenshot 2023-09-25 at 12 19 52 pm\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/3389c3a7-55b3-4297-a97d-64811883a64c\">\r\n\r\nAdd a search block to a navigation block or in the header, or elsewhere where space is constricted.\r\n\r\nSelect button with icon and button only options for the search block. Save and check the frontend:\r\n\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n|  <img width=\"288\" alt=\"Screenshot 2023-09-25 at 1 07 12 pm\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/390b2da8-10f6-48b4-9e4b-de3fc11ceda3\"> | <img width=\"283\" alt=\"Screenshot 2023-09-25 at 1 07 22 pm\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/93f9a44e-aa59-4fc1-a953-6752651ac370\">  |\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54773/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54772",
+		"id": 1910567289,
+		"node_id": "PR_kwDOBNHdeM5bEyEC",
+		"number": 54772,
+		"title": "Fix a broken MD link in callout",
+		"user": {
+			"login": "leemyongpakvn",
+			"id": 3759923,
+			"node_id": "MDQ6VXNlcjM3NTk5MjM=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/3759923?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/leemyongpakvn",
+			"html_url": "https://github.com/leemyongpakvn",
+			"followers_url": "https://api.github.com/users/leemyongpakvn/followers",
+			"following_url": "https://api.github.com/users/leemyongpakvn/following{/other_user}",
+			"gists_url": "https://api.github.com/users/leemyongpakvn/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/leemyongpakvn/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/leemyongpakvn/subscriptions",
+			"organizations_url": "https://api.github.com/users/leemyongpakvn/orgs",
+			"repos_url": "https://api.github.com/users/leemyongpakvn/repos",
+			"events_url": "https://api.github.com/users/leemyongpakvn/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/leemyongpakvn/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
+				"default": false,
+				"description": "Documentation for developers"
+			},
+			{
+				"id": 1388646432,
+				"node_id": "MDU6TGFiZWwxMzg4NjQ2NDMy",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/First-time%20Contributor",
+				"name": "First-time Contributor",
+				"color": "a0f762",
+				"default": false,
+				"description": "Pull request opened by a first-time contributor to Gutenberg repository"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-25T03:03:58Z",
+		"updated_at": "2023-09-25T11:58:31Z",
+		"closed_at": "2023-09-25T11:58:01Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54772",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54772",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54772.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54772.patch",
+			"merged_at": "2023-09-25T11:58:01Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nMarkDown link broken in callout div. Use pure HTML link to solve it.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\nUse MD editor Preview or Open https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/ to see how MD link broken.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n![MD_link_broken_in_Callout](https://github.com/WordPress/gutenberg/assets/3759923/e7c40259-758b-47b1-a839-1c0a42544309)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54772/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54769",
+		"id": 1910481291,
+		"node_id": "PR_kwDOBNHdeM5bEf7l",
+		"number": 54769,
+		"title": "Site Editor: remove `overflow: hidden` from the entity title in the site editor sidebar",
+		"user": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			},
+			{
+				"id": 5999214352,
+				"node_id": "LA_kwDOBNHdeM8AAAABZZS_EA",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/OS%20Issues",
+				"name": "OS Issues",
+				"color": "0052cc",
+				"default": false,
+				"description": "Issues or PRs that are related to OS specific problems"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-25T01:09:59Z",
+		"updated_at": "2023-10-03T23:36:38Z",
+		"closed_at": "2023-09-25T06:04:13Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54769",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54769",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54769.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54769.patch",
+			"merged_at": "2023-09-25T06:04:13Z"
+		},
+		"body": "## What?\r\nResolves https://github.com/WordPress/gutenberg/issues/52218\r\n\r\nRemoving `overflow: hidden` from `.edit-site-sidebar-navigation-screen__title`, which is the entity title in the site editor sidebar.\r\n\r\n## Why?\r\n1. It doesn't appear to be required to hide text overflow in general (checked in modern browsers)\r\n2. In Windows Edge the descender segment of letters are cut off, e.g., for \"g\", \"p\", \"y\" and so on.\r\n\r\n\r\n\r\n## Testing Instructions\r\n1. In Windows Edge, head on over to `/wp-admin/site-editor.php` and view a single entity (page, template, pattern etc) that has characters with descenders. \r\n2. Check those descenders are not cut off.\r\n3. Try with a long entity title and in narrow viewport widths\r\n4. Ensure there are no side-effects for other major browsers.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n| <img width=\"300\" alt=\"Screenshot 2023-09-25 at 10 49 12 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/077fd9b6-022a-4f4f-a633-70c6b40dad02\">  | <img width=\"300\" alt=\"Screenshot 2023-09-25 at 10 48 40 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/7534f492-d18a-49ab-8c1e-f8d774ef4ac2\">  |\r\n| <img width=\"300\" alt=\"Screenshot 2023-09-25 at 10 30 06 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/e1ffd294-0d47-430f-aaa8-4b072c90df5c\">  | <img width=\"300\" alt=\"Screenshot 2023-09-25 at 10 51 17 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/8056e872-7c12-4e40-8f09-57c880ad06d9\"> |\r\n\r\n\r\nAlso check long entity titles:\r\n\r\n<img width=\"340\" alt=\"Screenshot 2023-09-25 at 10 58 02 am\" src=\"https://github.com/WordPress/gutenberg/assets/6458278/af9c3b18-841c-4a21-b852-789533268e81\">\r\n\r\nAnd in mobile view:\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/a061b3fa-b4c3-43f2-bb89-bd1adb65c26f\r\n\r\n\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54769/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54765",
+		"id": 1910168419,
+		"node_id": "PR_kwDOBNHdeM5bDh5X",
+		"number": 54765,
+		"title": "`SlotFill`: Pass `Component` instance to unregisterSlot.",
+		"user": {
+			"login": "torounit",
+			"id": 1908815,
+			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/torounit",
+			"html_url": "https://github.com/torounit",
+			"followers_url": "https://api.github.com/users/torounit/followers",
+			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+			"organizations_url": "https://api.github.com/users/torounit/orgs",
+			"repos_url": "https://api.github.com/users/torounit/repos",
+			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/torounit/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "torounit",
+			"id": 1908815,
+			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/torounit",
+			"html_url": "https://github.com/torounit",
+			"followers_url": "https://api.github.com/users/torounit/followers",
+			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+			"organizations_url": "https://api.github.com/users/torounit/orgs",
+			"repos_url": "https://api.github.com/users/torounit/repos",
+			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/torounit/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "torounit",
+				"id": 1908815,
+				"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/torounit",
+				"html_url": "https://github.com/torounit",
+				"followers_url": "https://api.github.com/users/torounit/followers",
+				"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+				"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+				"organizations_url": "https://api.github.com/users/torounit/orgs",
+				"repos_url": "https://api.github.com/users/torounit/repos",
+				"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/torounit/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-24T09:29:14Z",
+		"updated_at": "2023-09-28T02:48:57Z",
+		"closed_at": "2023-09-28T02:48:29Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54765",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54765",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54765.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54765.patch",
+			"merged_at": "2023-09-28T02:48:29Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\npart of https://github.com/WordPress/gutenberg/pull/51350.\r\n\r\nhttps://github.com/WordPress/gutenberg/pull/51350#discussion_r1239378390\r\n\r\nWhen the slot name is updated, unregisterSlot is executed and the instance is unregistered, but it is not working correctly because the component instance is not passed. Fix this issue.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nbug fix.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nadd `this` .\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n```\r\nnpm run test:unit -- --testPathPattern packages/components/src/slot-fill\r\n```\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54765/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54760",
+		"id": 1909956841,
+		"node_id": "PR_kwDOBNHdeM5bC4p7",
+		"number": 54760,
+		"title": "test: E2E tests require supported iOS version",
+		"user": {
+			"login": "dcalhoun",
+			"id": 438664,
+			"node_id": "MDQ6VXNlcjQzODY2NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dcalhoun",
+			"html_url": "https://github.com/dcalhoun",
+			"followers_url": "https://api.github.com/users/dcalhoun/followers",
+			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+			"repos_url": "https://api.github.com/users/dcalhoun/repos",
+			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
+				"default": false,
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
+			},
+			{
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
+				"default": false,
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "dcalhoun",
+			"id": 438664,
+			"node_id": "MDQ6VXNlcjQzODY2NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dcalhoun",
+			"html_url": "https://github.com/dcalhoun",
+			"followers_url": "https://api.github.com/users/dcalhoun/followers",
+			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+			"repos_url": "https://api.github.com/users/dcalhoun/repos",
+			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "dcalhoun",
+				"id": 438664,
+				"node_id": "MDQ6VXNlcjQzODY2NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/dcalhoun",
+				"html_url": "https://github.com/dcalhoun",
+				"followers_url": "https://api.github.com/users/dcalhoun/followers",
+				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
+				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
+				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
+				"repos_url": "https://api.github.com/users/dcalhoun/repos",
+				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-23T18:15:03Z",
+		"updated_at": "2023-09-25T17:12:49Z",
+		"closed_at": "2023-09-25T17:12:23Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54760",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54760",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54760.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54760.patch",
+			"merged_at": "2023-09-25T17:12:23Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\n\n## What?\n<!-- In a few words, what is the PR actually doing? -->\nUpdate local Appium capabilities utilities to require a simulator with a\nsupported iOS version.\n\n## Why?\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\nAppium 1 does not support newer versions of iOS. This improves automatic\nsimulator selection logic to avoid loading incompatible iOS simulators\nand provide helpful error messages during compatibility failures.\n\nThis logic can be removed or simplified once we upgrade to Appium 2.\n\n\n## How?\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\nLimit automatic iOS simulator selection to compatible OS versions, e.g. iOS 15.\n\n## Testing Instructions\n<!-- Please include step by step instructions on how to test this PR. -->\n<!-- 1. Open a post or page. -->\n<!-- 2. Insert a heading block. -->\n<!-- 3. etc. -->\n1. Ensure a compatible iOS 15 simulator is installed on your machine.\n1. Check out this branch.\n1. `npm run native test:e2e:ios:local -- gutenberg-editor-heading-@canary.test.js`\n1. Verify the tests succeed on an iOS simulator.\n\n### Testing Instructions for Keyboard\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\nn/a\n\n## Screenshots or screencast <!-- if applicable -->\nn/a\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54760/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54744",
+		"id": 1909391762,
+		"node_id": "PR_kwDOBNHdeM5bBEqR",
+		"number": 54744,
+		"title": "(chore) Revert the 16.7 RC2 release in order to release it again due to wrong changelog",
+		"user": {
+			"login": "fullofcaffeine",
+			"id": 81248,
+			"node_id": "MDQ6VXNlcjgxMjQ4",
+			"avatar_url": "https://avatars.githubusercontent.com/u/81248?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/fullofcaffeine",
+			"html_url": "https://github.com/fullofcaffeine",
+			"followers_url": "https://api.github.com/users/fullofcaffeine/followers",
+			"following_url": "https://api.github.com/users/fullofcaffeine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fullofcaffeine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fullofcaffeine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fullofcaffeine/subscriptions",
+			"organizations_url": "https://api.github.com/users/fullofcaffeine/orgs",
+			"repos_url": "https://api.github.com/users/fullofcaffeine/repos",
+			"events_url": "https://api.github.com/users/fullofcaffeine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fullofcaffeine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-22T19:03:43Z",
+		"updated_at": "2023-09-22T19:43:49Z",
+		"closed_at": "2023-09-22T19:30:09Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54744",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54744",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54744.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54744.patch",
+			"merged_at": "2023-09-22T19:30:08Z"
+		},
+		"body": "## What?\r\n\r\nRevert the changelog and version bump commits in trunk.\r\n\r\n## Why?\r\n\r\nI released 16.7 RC2 today, but the changelog generated was wrong due to two commits listed there not being included in the release branch:\r\n\r\nhttps://github.com/WordPress/gutenberg/pull/52674 and https://github.com/WordPress/gutenberg/pull/54720., but they were still listed in the changelog.\r\n\r\nSince it's an RC, I think the cleanest way to go is to revert and release it again, or the asset s attached in the release will still contain the wrong changelog.\r\n\r\n## How?\r\n\r\n- Revert the changelog and bump commits for 16.7 RC2 in the `trunk` branch (this PR)\r\n- Revert the equivalent commits in the release/16.7 branch (already done, see linked commits below)\r\n- Remove the 16.7.2-rc.2 tag (done)\r\n- Remove the 16.7.2-rc.2 release  (done)\r\n- Release again (Build Plugin Zip) (todo)\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54744/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54743",
+		"id": 1909274603,
+		"node_id": "PR_kwDOBNHdeM5bAsBl",
+		"number": 54743,
+		"title": "`Modal`: Accessibly hide/show outer modal when nested",
+		"user": {
+			"login": "stokesman",
+			"id": 9000376,
+			"node_id": "MDQ6VXNlcjkwMDAzNzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/9000376?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/stokesman",
+			"html_url": "https://github.com/stokesman",
+			"followers_url": "https://api.github.com/users/stokesman/followers",
+			"following_url": "https://api.github.com/users/stokesman/following{/other_user}",
+			"gists_url": "https://api.github.com/users/stokesman/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/stokesman/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/stokesman/subscriptions",
+			"organizations_url": "https://api.github.com/users/stokesman/orgs",
+			"repos_url": "https://api.github.com/users/stokesman/repos",
+			"events_url": "https://api.github.com/users/stokesman/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/stokesman/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "stokesman",
+			"id": 9000376,
+			"node_id": "MDQ6VXNlcjkwMDAzNzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/9000376?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/stokesman",
+			"html_url": "https://github.com/stokesman",
+			"followers_url": "https://api.github.com/users/stokesman/followers",
+			"following_url": "https://api.github.com/users/stokesman/following{/other_user}",
+			"gists_url": "https://api.github.com/users/stokesman/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/stokesman/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/stokesman/subscriptions",
+			"organizations_url": "https://api.github.com/users/stokesman/orgs",
+			"repos_url": "https://api.github.com/users/stokesman/repos",
+			"events_url": "https://api.github.com/users/stokesman/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/stokesman/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "stokesman",
+				"id": 9000376,
+				"node_id": "MDQ6VXNlcjkwMDAzNzY=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/9000376?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/stokesman",
+				"html_url": "https://github.com/stokesman",
+				"followers_url": "https://api.github.com/users/stokesman/followers",
+				"following_url": "https://api.github.com/users/stokesman/following{/other_user}",
+				"gists_url": "https://api.github.com/users/stokesman/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/stokesman/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/stokesman/subscriptions",
+				"organizations_url": "https://api.github.com/users/stokesman/orgs",
+				"repos_url": "https://api.github.com/users/stokesman/repos",
+				"events_url": "https://api.github.com/users/stokesman/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/stokesman/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-22T17:25:31Z",
+		"updated_at": "2023-09-28T16:22:21Z",
+		"closed_at": "2023-09-28T16:21:58Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54743",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54743",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54743.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54743.patch",
+			"merged_at": "2023-09-28T16:21:58Z"
+		},
+		"body": "## What?\r\nUpdates the existing logic for accessibly isolating the `Modal` component so that it works for nested modals. More specifically, when the nested modal is opened the \"opener\" modal has its `aria-hidden` attribute set to `\"true\"`.\r\n\r\n## Why?\r\nIt seems like how it’s supposed to work and we added a test for it in #54569.\r\n\r\n## How?\r\n- Executes the isolation logic every time a `Modal` mounts/unmounts instead of only for the first/final modal.\r\n- Revises tracking of hidden elements to use a 2d array to support levels of isolation.\r\n\r\n## Testing Instructions\r\n1. Open a post or page.\r\n2. Paste and execute the following snippet in the javascript console.\r\n```javascript\r\n( ( {\r\n\tcomponents: { Button, Modal },\r\n\teditPost: { PluginDocumentSettingPanel },\r\n\telement: { createElement: el, Fragment, useState },\r\n\tplugins: { registerPlugin }\r\n} ) => {\r\n\tregisterPlugin( 'modal-nesting-demo', {\r\n\t\trender: () => el( PluginDocumentSettingPanel, {\r\n\t\t\tname: 'modal-nesting-demo',\r\n\t\t\ttitle: 'Modal nesting demo',\r\n\t\t\tchildren: el( ModalNesting )\r\n\t\t} ),\r\n\t} );\r\n\r\n\tfunction ModalNesting() {\r\n\t\tconst [ isOpen, setOpen ] = useState( false );\r\n\t\tconst [ isInnerOpen, setIsInnerOpen ] = useState( false );\r\n\t\treturn (\r\n\t\t\tel( Fragment, null,\r\n\t\t\t\tel( Button, { variant: \"primary\", onClick: () => setOpen( true ) }, \"Open Modal\" ),\r\n\t\t\t\tisOpen && (\r\n\t\t\t\t\tel( Modal, {\r\n\t\t\t\t\t\tonRequestClose: () => setOpen( false ),\r\n\t\t\t\t\t\tstyle: { maxWidth: '600px' },\r\n\t\t\t\t\t\ttitle: 'Nested modals vs. a11y isolation',\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\tel( 'p', null, 'This modal should be accessibly hidden when the nested modal is open. When the nested modal is closed this modal should again be accessible while the rest of the tree remains inaccessible until this modal is closed.' ),\r\n\r\n\t\t\t\t\t\tisInnerOpen && el(\r\n\t\t\t\t\t\t\tModal,\r\n\t\t\t\t\t\t\t{ onRequestClose: () => setIsInnerOpen( false ), title: '🪧 Nested' },\r\n\t\t\t\t\t\t\tel( 'p', null, 'Nothing to see here.' ),\r\n\t\t\t\t\t\t),\r\n\r\n\t\t\t\t\t\tel( Button, { variant: \"secondary\", onClick: () => setIsInnerOpen( true ) }, 'Open Nested'),\r\n\t\t\t\t\t)\r\n\t\t\t\t)\r\n\t\t\t)\r\n\t\t);\r\n\t}\r\n} )( wp );\r\n```\r\n3. Press the \"Open Modal\" button added to the post settings (\"Editor Settings\" > \"Modal nesting demo\").\r\n4. Note the Modal is opened and verify the rest of the page is no longer in the accessibility tree.\r\n5. Press the \"Open Nested\" button.\r\n6. Note the nested modal is opened and verify the outer modal is no longer in the accessibility tree.\r\n7. Close the nested modal.\r\n8. Verify the original modal is returned to the accessibility tree while the rest of the page is not.\r\n9. Close the modal.\r\n10. Verify the rest of the page is returned to the accessibility tree.\r\n\r\n### Testing Instructions for Keyboard\r\nI tried to make the instructions above applicable for keyboard use.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/9000376/7041978b-0155-4fc3-8ca6-03db7479716f\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54743/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54740",
+		"id": 1909190458,
+		"node_id": "PR_kwDOBNHdeM5bAaMl",
+		"number": 54740,
+		"title": "Deprecating `isPressed` in `Button` component",
+		"user": {
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "andrewhayward",
+				"id": 159848,
+				"node_id": "MDQ6VXNlcjE1OTg0OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/andrewhayward",
+				"html_url": "https://github.com/andrewhayward",
+				"followers_url": "https://api.github.com/users/andrewhayward/followers",
+				"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+				"repos_url": "https://api.github.com/users/andrewhayward/repos",
+				"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-22T16:16:36Z",
+		"updated_at": "2023-10-03T12:25:04Z",
+		"closed_at": "2023-09-27T11:55:15Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54740",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54740",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54740.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54740.patch",
+			"merged_at": "2023-09-27T11:55:15Z"
+		},
+		"body": "## What?\r\nThis PR starts the deprecation of `isPressed` on the `Button` component, deferring to the native `aria-pressed` attribute instead. While it does not externally change the API, internally it converts `isPressed` into `aria-pressed`, such that using the latter is equivalent to the former. As such, `aria-pressed` can be used instead of `isPressed` should a consumer so desire.\r\n\r\n## Why?\r\nWhen the `isPressed` prop is used on `Button`, `aria-pressed` is explicitly set accordingly. But sometimes `Button` is used for roles other than `button`, such as `option` and `checkbox`, where `aria-pressed` is not appropriate. Instead consumers should be able to decide for themselves the appropriate semantics.\r\n\r\n## How?\r\nThe `isPressed` prop is marked as deprecated, and transformed into `aria-pressed`. The value of `aria-pressed` is then used instead to determine how the component should be styled.\r\n\r\n## Testing Instructions\r\nUnit tests have been added to confirm that the legacy `isPressed` behaviour continues, and that using `aria-pressed` directly behaves in the same way.\r\n\r\nThe only potential scope for issues is where a consumer has already set `aria-pressed` on a `Button`, but not `isPressed`, as this could affect the visual appearance due to the added `is-pressed` class.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54740/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54736",
+		"id": 1908928247,
+		"node_id": "PR_kwDOBNHdeM5a_h2F",
+		"number": 54736,
+		"title": "Format Library: Try to fix highlight popover jumping",
+		"user": {
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1140833299,
+				"node_id": "MDU6TGFiZWwxMTQwODMzMjk5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Format%20library",
+				"name": "[Package] Format library",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/format-library"
+			},
+			{
+				"id": 3553027981,
+				"node_id": "LA_kwDOBNHdeM7TxueN",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Colors",
+				"name": "[Feature] Colors",
+				"color": "fbca04",
+				"default": false,
+				"description": "Color management"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "t-hamano",
+				"id": 54422211,
+				"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/t-hamano",
+				"html_url": "https://github.com/t-hamano",
+				"followers_url": "https://api.github.com/users/t-hamano/followers",
+				"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+				"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+				"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+				"repos_url": "https://api.github.com/users/t-hamano/repos",
+				"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 11,
+		"created_at": "2023-09-22T13:37:25Z",
+		"updated_at": "2023-09-29T12:04:42Z",
+		"closed_at": "2023-09-27T11:42:49Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54736",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54736",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54736.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54736.patch",
+			"merged_at": "2023-09-27T11:42:49Z"
+		},
+		"body": "Fixes: #49286\r\n\r\n## What?\r\n\r\nThis PR attempts to resolve an issue where popovers jump when applying inline highlighting to text.\r\n\r\n## Why?\r\n\r\nThis popover caches the `popoverAnchor` to maintain its position and prevent \"jumping\" when the inline highlight is applied.\r\n\r\nHowever, as mentioned in [this comment](https://github.com/WordPress/gutenberg/issues/49286#issuecomment-1497592542) by @ciampo, when text is surrounded by the `mark` element, the position seems to be out of sync for some reason.\r\n\r\n## How?\r\n\r\nI'm not sure if this approach is ideal, but caching only `getBoundingClientRect()` seems to solve the problem. If you have a more ideal approach, please let me know.\r\n\r\n## Testing Instructions\r\n\r\n- Enter text on the block editor.\r\n- Select some text and choose \"Highlight\" from the block toolbar.\r\n- Choose a palette, select a custom color, or enter a HEX color in the color popover.\r\n- The popover should be in the same position.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54736/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54734",
+		"id": 1908876899,
+		"node_id": "PR_kwDOBNHdeM5a_Wuo",
+		"number": 54734,
+		"title": "FormTokenField: Add `box-sizing` reset style and reset default padding",
+		"user": {
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "t-hamano",
+				"id": 54422211,
+				"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/t-hamano",
+				"html_url": "https://github.com/t-hamano",
+				"followers_url": "https://api.github.com/users/t-hamano/followers",
+				"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+				"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+				"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+				"repos_url": "https://api.github.com/users/t-hamano/repos",
+				"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/t-hamano/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-22T13:07:03Z",
+		"updated_at": "2023-09-22T15:05:10Z",
+		"closed_at": "2023-09-22T15:04:45Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54734",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54734",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54734.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54734.patch",
+			"merged_at": "2023-09-22T15:04:45Z"
+		},
+		"body": "## What?\r\n\r\nThis PR resolves the following three issues in the `FormTokenField` component:\r\n\r\n- The suggestion list has default padding of `ul` element on the left side\r\n- The suggestion list items are not as high as expected.\r\n\r\nAs a result, the same problem is resolved for the `ComboBoxControl` that includes this component.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| ![form-token-field-before](https://github.com/WordPress/gutenberg/assets/54422211/a8795ac1-d02b-4d55-9b34-025c18ee39a2) | ![form-token-field-after](https://github.com/WordPress/gutenberg/assets/54422211/6b1270ae-65ff-43db-9b37-9edb1cd51eab) |\r\n| ![combo-box-control-before](https://github.com/WordPress/gutenberg/assets/54422211/6104fb5b-c238-458d-a5be-3f6321b86f5b) | ![combo-box-control-after](https://github.com/WordPress/gutenberg/assets/54422211/ac4c0411-7240-4827-a085-aeae8722d461) | \r\n\r\n## Why?\r\n\r\nThis issue does not occur on the block editor. Because reset styles such as post editor and WP-Admin are applied to these elements.\r\n\r\n## How?\r\n\r\nAdded styles to fix unintended appearance.\r\n\r\n## Testing Instructions\r\n\r\n- Run Storybook.\r\n- In the `FormTokenField` and `ComboBoxControl` components, enter characters that match the suggestion list.\r\n- Confirm that the suggestion list is displayed as you intended.\r\n- Inject WordPress style from the top toolbar.\r\n- There should be no change in the appearance of the component.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54734/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54733",
+		"id": 1908871072,
+		"node_id": "PR_kwDOBNHdeM5a_Vd6",
+		"number": 54733,
+		"title": "createResolversCacheMiddleware: remove dependency on core/data store",
+		"user": {
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 937321166,
+				"node_id": "MDU6TGFiZWw5MzczMjExNjY=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Data",
+				"name": "[Package] Data",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/data"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "jsnajdr",
+				"id": 664258,
+				"node_id": "MDQ6VXNlcjY2NDI1OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/jsnajdr",
+				"html_url": "https://github.com/jsnajdr",
+				"followers_url": "https://api.github.com/users/jsnajdr/followers",
+				"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+				"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+				"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+				"repos_url": "https://api.github.com/users/jsnajdr/repos",
+				"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-22T13:03:20Z",
+		"updated_at": "2023-09-25T12:57:31Z",
+		"closed_at": "2023-09-25T12:57:05Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54733",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54733",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54733.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54733.patch",
+			"merged_at": "2023-09-25T12:57:05Z"
+		},
+		"body": "The `core/data` store is a legacy store that provides access to \"resolution state\" of other stores' resolvers, and exists only to provide backward compatibility. The supported way to access store's \"resolution state\" is to use its metadata selectors like `hasFinishedResolution`.\r\n\r\nThis PR removes the `core/data` dependency from the resolvers cache middleware, which is used by all stores, and select directly from related stores instead.\r\n\r\nI'm also changing the code slightly to reduce one level of indentation, and removing unneeded optional chaining when looking at `value.status`.\r\n\r\n**How to test:**\r\nSufficiently covered by existing unit tests.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54733/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54728",
+		"id": 1908745994,
+		"node_id": "PR_kwDOBNHdeM5a-6NH",
+		"number": 54728,
+		"title": "[Site Editor]: Update copy of using  the default template in a page",
+		"user": {
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ntsekouras",
+			"id": 16275880,
+			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ntsekouras",
+			"html_url": "https://github.com/ntsekouras",
+			"followers_url": "https://api.github.com/users/ntsekouras/followers",
+			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+			"repos_url": "https://api.github.com/users/ntsekouras/repos",
+			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ntsekouras",
+				"id": 16275880,
+				"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ntsekouras",
+				"html_url": "https://github.com/ntsekouras",
+				"followers_url": "https://api.github.com/users/ntsekouras/followers",
+				"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
+				"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
+				"repos_url": "https://api.github.com/users/ntsekouras/repos",
+				"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-22T11:38:35Z",
+		"updated_at": "2023-10-05T10:44:53Z",
+		"closed_at": "2023-09-22T13:54:48Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54728",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54728",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54728.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54728.patch",
+			"merged_at": "2023-09-22T13:54:48Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nResolves: https://github.com/WordPress/gutenberg/issues/54572\r\n\r\nThis PR just updates the copy of the `reset` button that results in using the default template of a page, based on the template hierarchy.\r\n\r\n\r\n\r\n\r\n## Testing Instructions\r\nIn site editor go to a page that has not the default template assigned(or just use the `swap template` button) and observe that the copy to use the default template has been changed from `Reset` to `Use default template`.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54728/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54722",
+		"id": 1908593506,
+		"node_id": "PR_kwDOBNHdeM5a-Yxv",
+		"number": 54722,
+		"title": "Editor: Always render the 'Switch to Draft' button to avoid focus loss",
+		"user": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 644027893,
+				"node_id": "MDU6TGFiZWw2NDQwMjc4OTM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design%20Feedback",
+				"name": "Needs Design Feedback",
+				"color": "0e8a16",
+				"default": false,
+				"description": "Needs general design feedback."
+			},
+			{
+				"id": 1013395453,
+				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
+				"name": "[Package] Editor",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/editor"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 34,
+		"created_at": "2023-09-22T09:55:09Z",
+		"updated_at": "2023-10-06T10:17:19Z",
+		"closed_at": "2023-09-26T09:33:24Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54722",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54722",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54722.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54722.patch",
+			"merged_at": "2023-09-26T09:33:24Z"
+		},
+		"body": "## What?\r\nFixes #51901.\r\n\r\nPR updates the `PostSwitchToDraftButton` component always to render to button, but using a disabled state when switching to draft isn't possible.\r\n\r\n## Why?\r\nSee #51901.\r\n\r\n> Instead, with the new placement of the Switch to Draft button in the settings panel, users are now forced to navigate almost the entire editor UI to go back where they were.\r\n\r\n> The expected behavior is that focus is returned to the UI control that opened the modal dialog. As such, the 'Switch to Draft' button should not be removed from the DOM. Ideally, it shoul dstay in the DOM, be still focusable, use an aria-disabled attribute and 'noop'. See: ARIA Authoring Practices: [Focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).\r\n\r\n## How?\r\n* Updates button to use `aria-disabled` instead of `disabled` prop.\r\n* Noops the `onClick` callback when the button is disabled.\r\n\r\n## Testing Instructions\r\n1. Open a published or scheduled post.\r\n2. Navigate to the \"Switch to Draft\" button in document settings.\r\n3. Switch the post to draft.\r\n4. Verify that the button is visible, but has a disabled state.\r\n\r\n### Testing Instructions for Keyboard\r\nSame\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/240569/e830a441-7d75-4ea6-bd3d-5e37e4d99d05\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54722/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54709",
+		"id": 1908050987,
+		"node_id": "PR_kwDOBNHdeM5a8j9H",
+		"number": 54709,
+		"title": "Use consistent capitalization for template parts in Site Editor constants",
+		"user": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 793903067,
+				"node_id": "MDU6TGFiZWw3OTM5MDMwNjc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Copy",
+				"name": "[Type] Copy",
+				"color": "e868f9",
+				"default": false,
+				"description": "Issues or PRs that need copy editing assistance"
+			},
+			{
+				"id": 2409818939,
+				"node_id": "MDU6TGFiZWwyNDA5ODE4OTM5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Site",
+				"name": "[Package] Edit Site",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/edit-site"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-22T01:47:52Z",
+		"updated_at": "2023-10-05T11:16:29Z",
+		"closed_at": "2023-09-22T02:37:37Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54709",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54709",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54709.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54709.patch",
+			"merged_at": "2023-09-22T02:37:37Z"
+		},
+		"body": "\r\n\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nBased on the efforts in https://github.com/WordPress/gutenberg/pull/51761, remove caps case from Template Part and prefer sentence case. As all instances of this string are stand alone, it's okay to have Template capitalized as it's the start of a sentence.\r\n\r\n\r\n## Testing Instructions\r\nInstances where the constant `POST_TYPE_LABELS[ TEMPLATE_PART_POST_TYPE ]` is used, the output should be \"Template part\" and not \"Template Part\".\r\n\r\nThank you!\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54709/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54707",
+		"id": 1907926577,
+		"node_id": "PR_kwDOBNHdeM5a8J1e",
+		"number": 54707,
+		"title": "Docs: Remove outdated info ",
+		"user": {
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
+				"default": false,
+				"description": "Documentation for developers"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-21T23:45:26Z",
+		"updated_at": "2023-09-26T21:03:28Z",
+		"closed_at": "2023-09-26T21:03:05Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54707",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54707",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54707.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54707.patch",
+			"merged_at": "2023-09-26T21:03:05Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nTooltip no longer uses our Popover component since the refactor in #48440, so this removes the info on our legacy tooltip in the Popover section of the components package README. \r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54707/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54705",
+		"id": 1907739065,
+		"node_id": "PR_kwDOBNHdeM5a7iOO",
+		"number": 54705,
+		"title": "Site editor: use constants rather than hard coded template strings (round 3)",
+		"user": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-21T20:51:21Z",
+		"updated_at": "2023-09-25T08:44:11Z",
+		"closed_at": "2023-09-22T01:25:27Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54705",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54705",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54705.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54705.patch",
+			"merged_at": "2023-09-22T01:25:27Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis is a follow up to:\r\n- https://github.com/WordPress/gutenberg/pull/54586\r\n- https://github.com/WordPress/gutenberg/pull/54484\r\n\r\n## Why?\r\nTo centralize names for post types and so on. Ease of management. Giving search and replace a well-deserved rest.\r\n\r\n## How?\r\nReplacing the following strings with constants\r\n\r\n| String | Constant |\r\n| ------------- | ------------- |\r\n| 'wp_navigation'  | `NAVIGATION_POST_TYPE`  |\r\n| 'wp_template' | `TEMPLATE_POST_TYPE`  |\r\n| 'wp_template_part'  | `TEMPLATE_PART_POST_TYPE` |\r\n| 'wp_block' | `PATTERN_TYPES.user` |\r\n\r\n## Testing Instructions\r\n- CI tests should pass.\r\n- Check that the replaced strings match a constant.\r\n- Smoke test site editor, e.g., create and edit some templates. Rename them, delete them. All should work as expecte",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54705/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54696",
+		"id": 1907254306,
+		"node_id": "PR_kwDOBNHdeM5a54TS",
+		"number": 54696,
+		"title": "Follow ariakit best practices",
+		"user": {
+			"login": "ciampo",
+			"id": 1083581,
+			"node_id": "MDQ6VXNlcjEwODM1ODE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ciampo",
+			"html_url": "https://github.com/ciampo",
+			"followers_url": "https://api.github.com/users/ciampo/followers",
+			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+			"organizations_url": "https://api.github.com/users/ciampo/orgs",
+			"repos_url": "https://api.github.com/users/ciampo/repos",
+			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ciampo",
+			"id": 1083581,
+			"node_id": "MDQ6VXNlcjEwODM1ODE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ciampo",
+			"html_url": "https://github.com/ciampo",
+			"followers_url": "https://api.github.com/users/ciampo/followers",
+			"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+			"organizations_url": "https://api.github.com/users/ciampo/orgs",
+			"repos_url": "https://api.github.com/users/ciampo/repos",
+			"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ciampo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ciampo",
+				"id": 1083581,
+				"node_id": "MDQ6VXNlcjEwODM1ODE=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1083581?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ciampo",
+				"html_url": "https://github.com/ciampo",
+				"followers_url": "https://api.github.com/users/ciampo/followers",
+				"following_url": "https://api.github.com/users/ciampo/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ciampo/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ciampo/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ciampo/subscriptions",
+				"organizations_url": "https://api.github.com/users/ciampo/orgs",
+				"repos_url": "https://api.github.com/users/ciampo/repos",
+				"events_url": "https://api.github.com/users/ciampo/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ciampo/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-21T15:31:09Z",
+		"updated_at": "2023-10-07T08:28:45Z",
+		"closed_at": "2023-09-22T13:23:33Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54696",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54696",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54696.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54696.patch",
+			"merged_at": "2023-09-22T13:23:33Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nRefactor the code to follow ariakit best practices\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nWe should aim at using third-party dependencies the way they are intended.\r\n\r\nWhile working on #54612 I stumbled upon some console warning — this PR aims at fixing them so that when we upgrade to a more recent version of ariakit, those warnings will be gone.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n- use the `render` prop instead of the `as` prop (which has been deprecated in one of the latest release) ([docs](https://ariakit.org/guide/composition))\r\n- use the `import * as Ariakit from '@ariakit/react'` statement for all imports, instead of importing the specific sub-folder ([docs](https://ariakit.org/guide/coding-guidelines#import-namespace))\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\nNo changes are expected at runtime, all affected components should continue to work as previously.\r\n\r\nAll tests keep passing.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54696/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54695",
+		"id": 1907219861,
+		"node_id": "PR_kwDOBNHdeM5a5wuq",
+		"number": 54695,
+		"title": "Editor: Use hooks instead of HoCs in 'PostSwitchToDraftButton'",
+		"user": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 593977130,
+				"node_id": "MDU6TGFiZWw1OTM5NzcxMzA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Priority]%20Low",
+				"name": "[Priority] Low",
+				"color": "f9d0c4",
+				"default": false,
+				"description": "Used to indicate that the issue at hand isn't a top priority to address and can be handled later"
+			},
+			{
+				"id": 1013395453,
+				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
+				"name": "[Package] Editor",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/editor"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 1,
+		"created_at": "2023-09-21T15:13:33Z",
+		"updated_at": "2023-09-21T20:09:46Z",
+		"closed_at": "2023-09-21T20:09:21Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54695",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54695",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54695.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54695.patch",
+			"merged_at": "2023-09-21T20:09:21Z"
+		},
+		"body": "## What?\r\nPR updates the `PostSwitchToDraftButton` component to use `data` hooks instead of HoCs.\r\n\r\n## Why?\r\nA micro-optimization makes the rendered component tree smaller.\r\n\r\nThis is similar to #53773.\r\n\r\n## Testing Instructions\r\n1. Open a post or page.\r\n2. Verify \"Switch to Draft\" action works as before.\r\n\r\n### Testing Instructions for Keyboard\r\nSame\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n**Before**\r\n![CleanShot 2023-09-21 at 18 52 33](https://github.com/WordPress/gutenberg/assets/240569/a574c5a2-b35b-4b07-907b-f294aa683a1a)\r\n\r\n**After**\r\n![CleanShot 2023-09-21 at 19 08 30](https://github.com/WordPress/gutenberg/assets/240569/3292b12e-9f7b-4f8d-9705-db429963dcdf)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54695/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54692",
+		"id": 1907160862,
+		"node_id": "PR_kwDOBNHdeM5a5jug",
+		"number": 54692,
+		"title": "Block Switcher: Use a different label for multi-selection",
+		"user": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 1248494790,
+				"node_id": "MDU6TGFiZWwxMjQ4NDk0Nzkw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20editor",
+				"name": "[Package] Block editor",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/block-editor"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "Mamaduka",
+			"id": 240569,
+			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/Mamaduka",
+			"html_url": "https://github.com/Mamaduka",
+			"followers_url": "https://api.github.com/users/Mamaduka/followers",
+			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+			"repos_url": "https://api.github.com/users/Mamaduka/repos",
+			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "Mamaduka",
+				"id": 240569,
+				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/Mamaduka",
+				"html_url": "https://github.com/Mamaduka",
+				"followers_url": "https://api.github.com/users/Mamaduka/followers",
+				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
+				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
+				"repos_url": "https://api.github.com/users/Mamaduka/repos",
+				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-21T14:46:32Z",
+		"updated_at": "2023-09-21T20:09:28Z",
+		"closed_at": "2023-09-21T20:09:00Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54692",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54692",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54692.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54692.patch",
+			"merged_at": "2023-09-21T20:09:00Z"
+		},
+		"body": "## What?\r\nCloses #51917.\r\n\r\nPR updates the Block Switcher label for multi-selection and removes a redundant block title in the description for single blocks.\r\n\r\n## Why?\r\nSee #51917.\r\n\r\n## Testing Instructions\r\n\r\n1. Create a new post.\r\n2. Add a few blocks of different types.\r\n3. Click in a Paragraph block.\r\n4. Select all the blocks by pressing Cmd/Ctrl + A twice.\r\n5. The block toolbar appears.\r\n6. Hover the Block Switcher button in the toolbar (the first button).\r\n7. Observe the tooltip text; it should be \"Multiple blocks selected\"\r\n\r\n### Testing Instructions for Keyboard\r\nSame\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n![CleanShot 2023-09-21 at 18 27 16](https://github.com/WordPress/gutenberg/assets/240569/5de8f034-15e7-4f7a-91d7-9c43a321023e)\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54692/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54686",
+		"id": 1906980256,
+		"node_id": "PR_kwDOBNHdeM5a47-9",
+		"number": 54686,
+		"title": "Bump tj-actions/changed-files from 39.0.0 to 39.1.2",
+		"user": {
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
+				"default": false,
+				"description": "Issues or PRs related to build tooling"
+			},
+			{
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
+				"default": false,
+				"description": "Pull requests that update GitHub Actions code"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 1,
+		"created_at": "2023-09-21T13:23:32Z",
+		"updated_at": "2023-09-22T15:10:20Z",
+		"closed_at": "2023-09-22T15:09:57Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54686",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54686",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54686.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54686.patch",
+			"merged_at": "2023-09-22T15:09:57Z"
+		},
+		"body": "Bumps [tj-actions/changed-files](https://github.com/tj-actions/changed-files) from 39.0.0 to 39.1.2.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/tj-actions/changed-files/releases\">tj-actions/changed-files's releases</a>.</em></p>\n<blockquote>\n<h2>v39.1.2</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Upgraded to v39.1.1 by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1591\">tj-actions/changed-files#1591</a></li>\n<li>chore(deps): update dependency <code>@​types/node</code> to v20.6.3 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1592\">tj-actions/changed-files#1592</a></li>\n<li>chore: add warrning message to diff error by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1593\">tj-actions/changed-files#1593</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/tj-actions/changed-files/compare/v39...v39.1.2\">https://github.com/tj-actions/changed-files/compare/v39...v39.1.2</a></p>\n<h2>v39.1.1</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Upgraded to v39.1.0 by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1583\">tj-actions/changed-files#1583</a></li>\n<li>chore: move variable declaration by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1584\">tj-actions/changed-files#1584</a></li>\n<li>chore: Update test.yml by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1586\">tj-actions/changed-files#1586</a></li>\n<li>docs: add V0lantis as a contributor for bug by <a href=\"https://github.com/allcontributors\"><code>@​allcontributors</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1587\">tj-actions/changed-files#1587</a></li>\n<li>Updated README.md by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1588\">tj-actions/changed-files#1588</a></li>\n<li>fix: error with test by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1589\">tj-actions/changed-files#1589</a></li>\n<li>fix: changed_keys and modified_keys output to handle json and escape_json inputs by <a href=\"https://github.com/V0lantis\"><code>@​V0lantis</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1585\">tj-actions/changed-files#1585</a></li>\n<li>chore: add codacy config by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1590\">tj-actions/changed-files#1590</a></li>\n</ul>\n<h2>New Contributors</h2>\n<ul>\n<li><a href=\"https://github.com/V0lantis\"><code>@​V0lantis</code></a> made their first contribution in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1585\">tj-actions/changed-files#1585</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/tj-actions/changed-files/compare/v39...v39.1.1\">https://github.com/tj-actions/changed-files/compare/v39...v39.1.1</a></p>\n<h2>v39.1.0</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Upgraded to v39.0.3 by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1577\">tj-actions/changed-files#1577</a></li>\n<li>chore(deps): lock file maintenance by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1578\">tj-actions/changed-files#1578</a></li>\n<li>chore(deps): update typescript-eslint monorepo to v6.7.2 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1580\">tj-actions/changed-files#1580</a></li>\n<li>feat: add support for returning YAML keys for paths that have changed by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1581\">tj-actions/changed-files#1581</a></li>\n<li>Updated README.md by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1582\">tj-actions/changed-files#1582</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/tj-actions/changed-files/compare/v39...v39.1.0\">https://github.com/tj-actions/changed-files/compare/v39...v39.1.0</a></p>\n<h2>v39.0.3</h2>\n<h2>What's Changed</h2>\n<ul>\n<li>Upgraded to v39.0.2 by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1563\">tj-actions/changed-files#1563</a></li>\n<li>chore(deps): update dependency jest to v29.7.0 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1564\">tj-actions/changed-files#1564</a></li>\n<li>chore: update input description by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1565\">tj-actions/changed-files#1565</a></li>\n<li>Updated README.md by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1566\">tj-actions/changed-files#1566</a></li>\n<li>chore(deps): update dependency <code>@​types/uuid</code> to v9.0.4 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1568\">tj-actions/changed-files#1568</a></li>\n<li>chore: update README.md by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1569\">tj-actions/changed-files#1569</a></li>\n<li>Updated README.md by <a href=\"https://github.com/tj-actions-bot\"><code>@​tj-actions-bot</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1570\">tj-actions/changed-files#1570</a></li>\n<li>chore(deps): update dependency <code>@​types/node</code> to v20.6.1 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1571\">tj-actions/changed-files#1571</a></li>\n<li>chore(deps): update dependency <code>@​types/jest</code> to v29.5.5 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1573\">tj-actions/changed-files#1573</a></li>\n<li>chore(deps): update dependency eslint-plugin-jest to v27.4.0 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1574\">tj-actions/changed-files#1574</a></li>\n<li>chore(deps): update dependency <code>@​types/node</code> to v20.6.2 by <a href=\"https://github.com/renovate\"><code>@​renovate</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1575\">tj-actions/changed-files#1575</a></li>\n<li>chore: refactor function by <a href=\"https://github.com/jackton1\"><code>@​jackton1</code></a> in <a href=\"https://redirect.github.com/tj-actions/changed-files/pull/1572\">tj-actions/changed-files#1572</a></li>\n</ul>\n<!-- raw HTML omitted -->\n</blockquote>\n<p>... (truncated)</p>\n</details>\n<details>\n<summary>Changelog</summary>\n<p><em>Sourced from <a href=\"https://github.com/tj-actions/changed-files/blob/main/HISTORY.md\">tj-actions/changed-files's changelog</a>.</em></p>\n<blockquote>\n<h1>Changelog</h1>\n<h1><a href=\"https://github.com/tj-actions/changed-files/compare/v39.1.1...v39.1.2\">39.1.2</a> - (2023-09-20)</h1>\n<h2><!-- raw HTML omitted -->⚙️ Miscellaneous Tasks</h2>\n<ul>\n<li>Add warrning message to diff error (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1593\">#1593</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/41960309398d165631f08c5df47a11147e14712b\">4196030</a>)  - (Tonye Jack)</li>\n<li><strong>deps:</strong> Update dependency <code>@​types/node</code> to v20.6.3 (<a href=\"https://github.com/tj-actions/changed-files/commit/bbe796033ec7cd22e0e20315c172c13048fc437c\">bbe7960</a>)  - (renovate[bot])</li>\n</ul>\n<h2><!-- raw HTML omitted -->⬆️ Upgrades</h2>\n<ul>\n<li>Upgraded to v39.1.1 (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1591\">#1591</a>)</li>\n</ul>\n<p>Co-authored-by: jackton1 <a href=\"mailto:jackton1@users.noreply.github.com\">jackton1@users.noreply.github.com</a> (<a href=\"https://github.com/tj-actions/changed-files/commit/159562dc02e645a8a858fca8e12f289e65d30fa5\">159562d</a>)  - (tj-actions[bot])</p>\n<h1><a href=\"https://github.com/tj-actions/changed-files/compare/v39.1.0...v39.1.1\">39.1.1</a> - (2023-09-19)</h1>\n<h2><!-- raw HTML omitted -->🐛 Bug Fixes</h2>\n<ul>\n<li>Changed_keys and modified_keys output to handle json and escape_json inputs (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1585\">#1585</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/951140b94a6a58dd2c62d7fb0b4d73898c79b196\">951140b</a>)  - (Arthur)</li>\n<li>Error with test (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1589\">#1589</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/dbf0700c7ac336b1ceed2ac8fe1b02d4cd3ac84f\">dbf0700</a>)  - (Tonye Jack)</li>\n</ul>\n<h2><!-- raw HTML omitted -->🔄 Update</h2>\n<ul>\n<li>Update test.yml (<a href=\"https://github.com/tj-actions/changed-files/commit/a21a533a0c244a27daac02f9dc6fcf8aeb996154\">a21a533</a>)  - (Tonye Jack)</li>\n<li>Updated README.md (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1588\">#1588</a>)</li>\n</ul>\n<p>Co-authored-by: jackton1 <a href=\"mailto:jackton1@users.noreply.github.com\">jackton1@users.noreply.github.com</a> (<a href=\"https://github.com/tj-actions/changed-files/commit/dacbaebcaf9428d083702ffa9b449bac799dd2c3\">dacbaeb</a>)  - (tj-actions[bot])</p>\n<h2><!-- raw HTML omitted -->📚 Documentation</h2>\n<ul>\n<li>Add V0lantis as a contributor for bug (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1587\">#1587</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/36ab2fe9c2c58212caac6853d9b8e205a4d5c84b\">36ab2fe</a>)  - (allcontributors[bot])</li>\n</ul>\n<h2><!-- raw HTML omitted -->⚙️ Miscellaneous Tasks</h2>\n<ul>\n<li>Add codacy config (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1590\">#1590</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/eeb169a9f925d0d92ff3dea3ac356ff0d5f288a8\">eeb169a</a>)  - (Tonye Jack)</li>\n<li>Update test.yml (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1586\">#1586</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/7e3a4bac80a0d6fdd60b44fea0dc5fa781ca8177\">7e3a4ba</a>)  - (Tonye Jack)</li>\n<li>Move variable declaration (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1584\">#1584</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/dcbe9805f4bb9e5128d8c802e2517943b4c09aa0\">dcbe980</a>)  - (Tonye Jack)</li>\n</ul>\n<h2><!-- raw HTML omitted -->⬆️ Upgrades</h2>\n<ul>\n<li>Upgraded to v39.1.0 (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1583\">#1583</a>)</li>\n</ul>\n<p>Co-authored-by: jackton1 <a href=\"mailto:jackton1@users.noreply.github.com\">jackton1@users.noreply.github.com</a> (<a href=\"https://github.com/tj-actions/changed-files/commit/fd73c1248c8bebea8b243083223002698432c2a0\">fd73c12</a>)  - (tj-actions[bot])</p>\n<h1><a href=\"https://github.com/tj-actions/changed-files/compare/v39.0.3...v39.1.0\">39.1.0</a> - (2023-09-18)</h1>\n<h2><!-- raw HTML omitted -->🚀 Features</h2>\n<ul>\n<li>Add support for returning YAML keys for paths that have changed (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1581\">#1581</a>) (<a href=\"https://github.com/tj-actions/changed-files/commit/5db7b578d50867ab5781bf9d867e7650b5b39fc4\">5db7b57</a>)  - (Tonye Jack)</li>\n</ul>\n<!-- raw HTML omitted -->\n</blockquote>\n<p>... (truncated)</p>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/41960309398d165631f08c5df47a11147e14712b\"><code>4196030</code></a> chore: add warrning message to diff error (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1593\">#1593</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/bbe796033ec7cd22e0e20315c172c13048fc437c\"><code>bbe7960</code></a> chore(deps): update dependency <code>@​types/node</code> to v20.6.3</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/159562dc02e645a8a858fca8e12f289e65d30fa5\"><code>159562d</code></a> Upgraded to v39.1.1 (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1591\">#1591</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/a21a533a0c244a27daac02f9dc6fcf8aeb996154\"><code>a21a533</code></a> Update test.yml</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/eeb169a9f925d0d92ff3dea3ac356ff0d5f288a8\"><code>eeb169a</code></a> chore: add codacy config (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1590\">#1590</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/951140b94a6a58dd2c62d7fb0b4d73898c79b196\"><code>951140b</code></a> fix: changed_keys and modified_keys output to handle json and escape_json inp...</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/dbf0700c7ac336b1ceed2ac8fe1b02d4cd3ac84f\"><code>dbf0700</code></a> fix: error with test (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1589\">#1589</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/dacbaebcaf9428d083702ffa9b449bac799dd2c3\"><code>dacbaeb</code></a> Updated README.md (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1588\">#1588</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/36ab2fe9c2c58212caac6853d9b8e205a4d5c84b\"><code>36ab2fe</code></a> docs: add V0lantis as a contributor for bug (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1587\">#1587</a>)</li>\n<li><a href=\"https://github.com/tj-actions/changed-files/commit/7e3a4bac80a0d6fdd60b44fea0dc5fa781ca8177\"><code>7e3a4ba</code></a> chore: Update test.yml (<a href=\"https://redirect.github.com/tj-actions/changed-files/issues/1586\">#1586</a>)</li>\n<li>Additional commits viewable in <a href=\"https://github.com/tj-actions/changed-files/compare/48566bbcc22ceb7c5809ebdd27377309f2c3de8c...41960309398d165631f08c5df47a11147e14712b\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=tj-actions/changed-files&package-manager=github_actions&previous-version=39.0.0&new-version=39.1.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54686/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54679",
+		"id": 1905915171,
+		"node_id": "PR_kwDOBNHdeM5a1UeG",
+		"number": 54679,
+		"title": "Site Editor: Reset 'Show template' toggle when leaving edit mode",
+		"user": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			},
+			{
+				"id": 5663509033,
+				"node_id": "LA_kwDOBNHdeM8AAAABUZJKKQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Page%20Content%20Focus",
+				"name": "[Feature] Page Content Focus",
+				"color": "FBCA04",
+				"default": false,
+				"description": "Ability to toggle between focusing on editing the page and editing the template in the site editor."
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ramonjd",
+			"id": 6458278,
+			"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ramonjd",
+			"html_url": "https://github.com/ramonjd",
+			"followers_url": "https://api.github.com/users/ramonjd/followers",
+			"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+			"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+			"repos_url": "https://api.github.com/users/ramonjd/repos",
+			"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-21T01:12:52Z",
+		"updated_at": "2023-09-21T04:08:22Z",
+		"closed_at": "2023-09-21T04:07:54Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54679",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54679",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54679.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54679.patch",
+			"merged_at": "2023-09-21T04:07:54Z"
+		},
+		"body": "\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nFollow up to:\r\n\r\n- https://github.com/WordPress/gutenberg/pull/52674\r\n\r\nThis commit:\r\n\r\n1. Resets the page content focus type if the canvas switches from edit mode. \r\n2. Refactors `use-page-content-blocks.js` to accept an object as an argument so that we can check in the editor if there are any page content blocks in the editor. If not, we do not render the show/hide template.\r\n\r\nNote: 1 is more glaring than 2. Happy to roll it back so we're only fixing the reset aspect. \r\n\r\n## Why?\r\n1.  Previously, if the template was hidden it would display again when leaving canvas edit mode, but hide  again when returning to edit mode.\r\n2. If there are no content blocks in the editor it doesn't make sense to show a toggle that does nothing.\r\n\r\n\r\n\r\n## Testing Instructions\r\n\r\n1. Go to Appearance → Editor → Pages, select or create a page, then edit it.\r\n2. In the Page settings sidebar, click on the Template dropdown and hide the template using the \"Template preview\" item. Navigate away from edit mode in the site editor by clicking on the WP logo. The template should reappear in view mode.\r\n4. Reenter the page. The template should still be visible and the \"Template preview\" item should be checked.\r\n5. Now create a new Page template with a paragraph block only. \r\n6. Apply that template to your page.\r\n7. Edit the page. The \"Template preview\" item should not be rendered since there are no post-title, post-content, or post-featured-image blocks in your template.\r\n\r\nRun the tests!\r\n\r\n```\r\nnpm run test:unit packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js\r\n```\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/03032218-8b88-4d91-9fc9-113f2c5f191b\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 1,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54679/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54670",
+		"id": 1905421983,
+		"node_id": "PR_kwDOBNHdeM5azqeI",
+		"number": 54670,
+		"title": "Image: Fix duotone not being applied to lightbox image",
+		"user": {
+			"login": "artemiomorales",
+			"id": 5360536,
+			"node_id": "MDQ6VXNlcjUzNjA1MzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/5360536?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/artemiomorales",
+			"html_url": "https://github.com/artemiomorales",
+			"followers_url": "https://api.github.com/users/artemiomorales/followers",
+			"following_url": "https://api.github.com/users/artemiomorales/following{/other_user}",
+			"gists_url": "https://api.github.com/users/artemiomorales/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/artemiomorales/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/artemiomorales/subscriptions",
+			"organizations_url": "https://api.github.com/users/artemiomorales/orgs",
+			"repos_url": "https://api.github.com/users/artemiomorales/repos",
+			"events_url": "https://api.github.com/users/artemiomorales/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/artemiomorales/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1101518360,
+				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
+				"name": "[Block] Image",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Image Block"
+			},
+			{
+				"id": 5324461665,
+				"node_id": "LA_kwDOBNHdeM8AAAABPVzWYQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Interactivity%20API",
+				"name": "[Feature] Interactivity API",
+				"color": "fbca04",
+				"default": false,
+				"description": "Experimental API to add frontend interactivity to blocks."
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 1,
+		"created_at": "2023-09-20T17:18:55Z",
+		"updated_at": "2023-09-29T12:04:05Z",
+		"closed_at": "2023-09-25T17:04:23Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54670",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54670",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54670.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54670.patch",
+			"merged_at": "2023-09-25T17:04:23Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nThe duotone filter was not being applied to the lightbox image. This PR fixes that.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nThe duotone compatibility was broken with the [recent lightbox changes](https://github.com/WordPress/gutenberg/pull/54071), and the lightbox should be compatible with all of the image's normal features.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nIt moves the code to render the lightbox inside of a filter that will run after the duotone effects have been applied.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. Insert an image in a post.\r\n2. Apply a duotone filter.\r\n3. Enable the lightbox using the block settings.\r\n4. Publish and view the post.\r\n5. Click on the image and see that the duotone has been applied to the image in the lightbox.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54670/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54663",
+		"id": 1905040815,
+		"node_id": "PR_kwDOBNHdeM5ayXoB",
+		"number": 54663,
+		"title": "Update compact search control metrics",
+		"user": {
+			"login": "jameskoster",
+			"id": 846565,
+			"node_id": "MDQ6VXNlcjg0NjU2NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/846565?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jameskoster",
+			"html_url": "https://github.com/jameskoster",
+			"followers_url": "https://api.github.com/users/jameskoster/followers",
+			"following_url": "https://api.github.com/users/jameskoster/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jameskoster/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jameskoster/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jameskoster/subscriptions",
+			"organizations_url": "https://api.github.com/users/jameskoster/orgs",
+			"repos_url": "https://api.github.com/users/jameskoster/repos",
+			"events_url": "https://api.github.com/users/jameskoster/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jameskoster/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-20T13:45:54Z",
+		"updated_at": "2023-09-21T12:47:51Z",
+		"closed_at": "2023-09-21T12:47:20Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54663",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54663",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54663.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54663.patch",
+			"merged_at": "2023-09-21T12:47:20Z"
+		},
+		"body": "Follow-up to https://github.com/WordPress/gutenberg/pull/54548.\r\n\r\n## What?\r\nUpdate `SizeControl` metrics when size is `compact`.\r\n\r\n## Why?\r\nBetter visual balance. The current spacing works well at 40/48px, but at the smaller 32px size it's a bit much.\r\n\r\n## Testing Instructions\r\n1. Run `npm run storybook:dev`, open `SearchControl` and set size to `compact`\r\n2. Observe the updated spacing\r\n\r\n### Before\r\n<img width=\"600\" alt=\"Screenshot 2023-09-20 at 14 34 41\" src=\"https://github.com/WordPress/gutenberg/assets/846565/8320e728-124e-479f-b911-ab10f8288345\">\r\n\r\n\r\n### After\r\n<img width=\"573\" alt=\"Screenshot 2023-09-20 at 14 41 31\" src=\"https://github.com/WordPress/gutenberg/assets/846565/6f2d4a9e-4076-4a60-830e-097e02123a67\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54663/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54661",
+		"id": 1904979933,
+		"node_id": "PR_kwDOBNHdeM5ayKf-",
+		"number": 54661,
+		"title": "Bump actions/setup-java from 3.12.0 to 3.13.0",
+		"user": {
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
+				"default": false,
+				"description": "Issues or PRs related to build tooling"
+			},
+			{
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
+				"default": false,
+				"description": "Pull requests that update GitHub Actions code"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 0,
+		"created_at": "2023-09-20T13:16:42Z",
+		"updated_at": "2023-09-22T00:18:14Z",
+		"closed_at": "2023-09-22T00:17:39Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54661",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54661",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54661.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54661.patch",
+			"merged_at": "2023-09-22T00:17:39Z"
+		},
+		"body": "Bumps [actions/setup-java](https://github.com/actions/setup-java) from 3.12.0 to 3.13.0.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/actions/setup-java/releases\">actions/setup-java's releases</a>.</em></p>\n<blockquote>\n<h2>v3.13.0</h2>\n<h2>What's changed</h2>\n<p>In the scope of this release, support for Dragonwell JDK was added by <a href=\"https://github.com/Accelerator1996\"><code>@​Accelerator1996</code></a> in <a href=\"https://redirect.github.com/actions/setup-java/pull/532\">actions/setup-java#532</a></p>\n<pre lang=\"yaml\"><code>steps:\n - name: Checkout\n   uses: actions/checkout@v3\n - name: Setup-java\n   uses: actions/setup-java@v3\n   with:\n     distribution: 'dragonwell'\n     java-version: '17'\n</code></pre>\n<p>Several inaccuracies were also fixed:</p>\n<ul>\n<li>Fix XML namespaces wrongly using https by <a href=\"https://github.com/gnodet\"><code>@​gnodet</code></a> in <a href=\"https://redirect.github.com/actions/setup-java/pull/503\">actions/setup-java#503</a></li>\n<li>Fix typo and remove unintentional(?) word by <a href=\"https://github.com/CyberFlameGO\"><code>@​CyberFlameGO</code></a> in <a href=\"https://redirect.github.com/actions/setup-java/pull/518\">actions/setup-java#518</a></li>\n<li>Fix usage link within the README.md file by <a href=\"https://github.com/dassiorleando\"><code>@​dassiorleando</code></a> in <a href=\"https://redirect.github.com/actions/setup-java/pull/525\">actions/setup-java#525</a></li>\n</ul>\n<h2>New Contributors</h2>\n<ul>\n<li><a href=\"https://github.com/CyberFlameGO\"><code>@​CyberFlameGO</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/setup-java/pull/518\">actions/setup-java#518</a></li>\n<li><a href=\"https://github.com/dassiorleando\"><code>@​dassiorleando</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/setup-java/pull/525\">actions/setup-java#525</a></li>\n<li><a href=\"https://github.com/gnodet\"><code>@​gnodet</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/setup-java/pull/503\">actions/setup-java#503</a></li>\n<li><a href=\"https://github.com/Accelerator1996\"><code>@​Accelerator1996</code></a> made their first contribution in <a href=\"https://redirect.github.com/actions/setup-java/pull/532\">actions/setup-java#532</a></li>\n</ul>\n<p><strong>Full Changelog</strong>: <a href=\"https://github.com/actions/setup-java/compare/v3...v3.13.0\">https://github.com/actions/setup-java/compare/v3...v3.13.0</a></p>\n</blockquote>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/actions/setup-java/commit/0ab4596768b603586c0de567f2430c30f5b0d2b0\"><code>0ab4596</code></a> add support for dragonwell (<a href=\"https://redirect.github.com/actions/setup-java/issues/532\">#532</a>)</li>\n<li><a href=\"https://github.com/actions/setup-java/commit/4075bfc1b51bf22876335ae1cd589602d60d8758\"><code>4075bfc</code></a> Merge pull request <a href=\"https://redirect.github.com/actions/setup-java/issues/503\">#503</a> from gnodet/fix-xml-namespaces</li>\n<li><a href=\"https://github.com/actions/setup-java/commit/5b86b67f5bb794ee4de9464f70b700b9445b03a8\"><code>5b86b67</code></a> Fixed usage link within the README.md file (<a href=\"https://redirect.github.com/actions/setup-java/issues/525\">#525</a>)</li>\n<li><a href=\"https://github.com/actions/setup-java/commit/b943a4ed876ec91f6d0cde2181d88d24e8e348de\"><code>b943a4e</code></a> fix typo and remove unintentional(?) word (<a href=\"https://redirect.github.com/actions/setup-java/issues/518\">#518</a>)</li>\n<li><a href=\"https://github.com/actions/setup-java/commit/c16064d22c3f04f299673458d8c085366d0fa04e\"><code>c16064d</code></a> Bump word-wrap from 1.2.3 to 1.2.4 (<a href=\"https://redirect.github.com/actions/setup-java/issues/516\">#516</a>)</li>\n<li><a href=\"https://github.com/actions/setup-java/commit/91f49aa1b07db98229b616da1bcb1f41cd8709df\"><code>91f49aa</code></a> Fix XML namespaces wrongly using https</li>\n<li>See full diff in <a href=\"https://github.com/actions/setup-java/compare/cd89f46ac9d01407894225f350157564c9c7cee2...0ab4596768b603586c0de567f2430c30f5b0d2b0\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=actions/setup-java&package-manager=github_actions&previous-version=3.12.0&new-version=3.13.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54661/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54657",
+		"id": 1904604184,
+		"node_id": "PR_kwDOBNHdeM5aw4_U",
+		"number": 54657,
+		"title": "Scripts: Update webpack and related dependencies to the latest version",
+		"user": {
+			"login": "gziolo",
+			"id": 699132,
+			"node_id": "MDQ6VXNlcjY5OTEzMg==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/gziolo",
+			"html_url": "https://github.com/gziolo",
+			"followers_url": "https://api.github.com/users/gziolo/followers",
+			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
+			"organizations_url": "https://api.github.com/users/gziolo/orgs",
+			"repos_url": "https://api.github.com/users/gziolo/repos",
+			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 978007737,
+				"node_id": "MDU6TGFiZWw5NzgwMDc3Mzc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Scripts",
+				"name": "[Package] Scripts",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/scripts"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "gziolo",
+			"id": 699132,
+			"node_id": "MDQ6VXNlcjY5OTEzMg==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/gziolo",
+			"html_url": "https://github.com/gziolo",
+			"followers_url": "https://api.github.com/users/gziolo/followers",
+			"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
+			"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
+			"organizations_url": "https://api.github.com/users/gziolo/orgs",
+			"repos_url": "https://api.github.com/users/gziolo/repos",
+			"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/gziolo/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "gziolo",
+				"id": 699132,
+				"node_id": "MDQ6VXNlcjY5OTEzMg==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/699132?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/gziolo",
+				"html_url": "https://github.com/gziolo",
+				"followers_url": "https://api.github.com/users/gziolo/followers",
+				"following_url": "https://api.github.com/users/gziolo/following{/other_user}",
+				"gists_url": "https://api.github.com/users/gziolo/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/gziolo/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/gziolo/subscriptions",
+				"organizations_url": "https://api.github.com/users/gziolo/orgs",
+				"repos_url": "https://api.github.com/users/gziolo/repos",
+				"events_url": "https://api.github.com/users/gziolo/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/gziolo/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-20T09:42:16Z",
+		"updated_at": "2023-09-21T11:20:38Z",
+		"closed_at": "2023-09-21T11:17:43Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54657",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54657",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54657.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54657.patch",
+			"merged_at": "2023-09-21T11:17:43Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nLet's bring webpack and related dependencies to the latest version and apply them to WordPress core around 6.4 Beta 1:\r\n\r\n- `webpack` updated to the latest version\r\n- `browserslist` and `caniuse-lite` updated to the latest version\r\n- `react-refresh` updated to the latest version\r\n\r\nIn addition, it tries to fix https://github.com/WordPress/gutenberg/issues/53552 caused by the outdated version of `webpack-cli`:\r\n\r\n> When ncu was executed, @wordpress/scripts was displayed as ^26.9.0 → ^26.10.0, so ncu -u npm install was executed in sequence.\r\n> As a result, several npm modules were shown as deprecated as follows:\r\n> \r\n> npm WARN deprecated debuglog@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.\r\n> npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs\r\n> npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs\r\n> npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n> These issues has been resolved in https://github.com/webpack/webpack-cli/issues/3891, https://github.com/webpack/webpack-cli/issues/3892, and https://github.com/webpack/webpack-cli/issues/3893 reported in webpack-cli, so it is appropriate to replace it with the latest version.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nIt brings `webpack-cli` to the latest version. There were some breaking changes in [v5.0.0](https://github.com/webpack/webpack-cli/releases/tag/webpack-cli%405.0.0), but they don't seem to have impact like:\r\n-  remove the `--hot` option in favor of directly using the `HotModuleReplacement` plugin (only for build command, for serve it will work). I don't see the listed deprecated packages in the lock file anymore.\r\n\r\nThere was a recent version bump enforced for the `webpack` in the repository with https://github.com/WordPress/gutenberg/pull/49075, so here we follow-up with another version bump that also gets applied to `@wordpress/scripts`.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Run `nvm use` to switch to the currently supported Node.js and npm versions.\r\n2. Run `npm install` to install the latest version of dependencies.\r\n3. Run `npm run build` and confirm the the build finishes correctly.\r\n4. Run `npx wp-create-block example-static --no-wp-scripts` to confirm that Create Block still works.\r\n5. Run `cd example-statice` to enter the newly created project.\r\n6. Run `../node_modules/.bin/wp-scripts start --hot` to confirm that you can develop blocks with the dev server.\r\n7. Open the site at https://localhost:8888/wp-admin, go to the post editor and confirm that you can insert Example Static block.\r\n8. Edit the JS code of the block in the editor. It must be something controlled by React, for example `edit` function. See that the block gets automatically updated in the post editor after saving changes locally.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nI confirmed that React Fast Refresh still works with the updated `webpack-cli` and other dependencies:\r\n\r\n<img width=\"970\" alt=\"Screenshot 2023-09-20 at 11 56 08\" src=\"https://github.com/WordPress/gutenberg/assets/699132/6fea4ab3-5b05-4bab-bbb4-d1807f3b5266\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 1,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54657/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54655",
+		"id": 1904534595,
+		"node_id": "PR_kwDOBNHdeM5awp_T",
+		"number": 54655,
+		"title": "Font Library: move font uploads to a new tab",
+		"user": {
+			"login": "madhusudhand",
+			"id": 1935113,
+			"node_id": "MDQ6VXNlcjE5MzUxMTM=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1935113?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/madhusudhand",
+			"html_url": "https://github.com/madhusudhand",
+			"followers_url": "https://api.github.com/users/madhusudhand/followers",
+			"following_url": "https://api.github.com/users/madhusudhand/following{/other_user}",
+			"gists_url": "https://api.github.com/users/madhusudhand/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/madhusudhand/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/madhusudhand/subscriptions",
+			"organizations_url": "https://api.github.com/users/madhusudhand/orgs",
+			"repos_url": "https://api.github.com/users/madhusudhand/repos",
+			"events_url": "https://api.github.com/users/madhusudhand/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/madhusudhand/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 4366600186,
+				"node_id": "LA_kwDOBNHdeM8AAAABBEUH-g",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Typography",
+				"name": "[Feature] Typography",
+				"color": "fbca04",
+				"default": false,
+				"description": "Font and typography-related issues and PRs"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 10,
+		"created_at": "2023-09-20T09:04:26Z",
+		"updated_at": "2023-09-29T12:05:25Z",
+		"closed_at": "2023-09-28T17:56:40Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54655",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54655",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54655.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54655.patch",
+			"merged_at": "2023-09-28T17:56:40Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nAs suggested by the design, this change moves the font uploads section to a new tab and provides appropriate error messages when upload fails.\r\n\r\nIt also removes the use of snackbar.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Open font library modal from global style -> typography.\r\n2. Observe that the uploads section is now moved to a new tab.\r\n3. Try uploading fonts.\r\n4. Upon error, it should show an error in the same tab and should not invoke snackbar.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n<img width=\"849\" alt=\"image\" src=\"https://github.com/WordPress/gutenberg/assets/1935113/5b06e09b-d7fd-4810-80b5-6a35c05a2f3b\">\r\n\r\n## Related issues:\r\n\r\nFixes: #54504\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54655/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54654",
+		"id": 1904522215,
+		"node_id": "PR_kwDOBNHdeM5awnYE",
+		"number": 54654,
+		"title": "Removed unwanted space from the string",
+		"user": {
+			"login": "mujuonly",
+			"id": 459367,
+			"node_id": "MDQ6VXNlcjQ1OTM2Nw==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/459367?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/mujuonly",
+			"html_url": "https://github.com/mujuonly",
+			"followers_url": "https://api.github.com/users/mujuonly/followers",
+			"following_url": "https://api.github.com/users/mujuonly/following{/other_user}",
+			"gists_url": "https://api.github.com/users/mujuonly/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/mujuonly/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/mujuonly/subscriptions",
+			"organizations_url": "https://api.github.com/users/mujuonly/orgs",
+			"repos_url": "https://api.github.com/users/mujuonly/repos",
+			"events_url": "https://api.github.com/users/mujuonly/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/mujuonly/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 1101517892,
+				"node_id": "MDU6TGFiZWwxMTAxNTE3ODky",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Cover",
+				"name": "[Block] Cover",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Cover Block - used to display content laid over a background image"
+			},
+			{
+				"id": 1225853227,
+				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
+				"name": "[Block] Navigation",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Navigation Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "alexstine",
+				"id": 13755480,
+				"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/alexstine",
+				"html_url": "https://github.com/alexstine",
+				"followers_url": "https://api.github.com/users/alexstine/followers",
+				"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+				"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+				"organizations_url": "https://api.github.com/users/alexstine/orgs",
+				"repos_url": "https://api.github.com/users/alexstine/repos",
+				"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/alexstine/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 5,
+		"created_at": "2023-09-20T08:57:57Z",
+		"updated_at": "2023-10-04T11:05:25Z",
+		"closed_at": "2023-09-23T02:30:34Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54654",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54654",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54654.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54654.patch",
+			"merged_at": "2023-09-23T02:30:34Z"
+		},
+		"body": "\r\n## What?\r\nRemoved unwanted space in the string\r\n\r\n\r\n## Why?\r\nUnwanted space at the end of the string shows warning at translation.\r\n\r\n## How?\r\nRemoved unwanted space in the string\r\n\r\n## Testing Instructions\r\nText correction only\r\n\r\n\r\n### Testing Instructions for Keyboard\r\nText correction only\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54654/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54639",
+		"id": 1903879155,
+		"node_id": "PR_kwDOBNHdeM5aubqB",
+		"number": 54639,
+		"title": "Image: Ensure `false` values are preserved in memory when defined in `theme.json`",
+		"user": {
+			"login": "artemiomorales",
+			"id": 5360536,
+			"node_id": "MDQ6VXNlcjUzNjA1MzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/5360536?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/artemiomorales",
+			"html_url": "https://github.com/artemiomorales",
+			"followers_url": "https://api.github.com/users/artemiomorales/followers",
+			"following_url": "https://api.github.com/users/artemiomorales/following{/other_user}",
+			"gists_url": "https://api.github.com/users/artemiomorales/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/artemiomorales/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/artemiomorales/subscriptions",
+			"organizations_url": "https://api.github.com/users/artemiomorales/orgs",
+			"repos_url": "https://api.github.com/users/artemiomorales/repos",
+			"events_url": "https://api.github.com/users/artemiomorales/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/artemiomorales/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1101518360,
+				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
+				"name": "[Block] Image",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Image Block"
+			},
+			{
+				"id": 1800807983,
+				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
+				"name": "Global Styles",
+				"color": "2100b7",
+				"default": false,
+				"description": "Anything related to the broader Global Styles efforts, including Styles Engine and theme.json"
+			},
+			{
+				"id": 5324461665,
+				"node_id": "LA_kwDOBNHdeM8AAAABPVzWYQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Interactivity%20API",
+				"name": "[Feature] Interactivity API",
+				"color": "fbca04",
+				"default": false,
+				"description": "Experimental API to add frontend interactivity to blocks."
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 4,
+		"created_at": "2023-09-20T00:08:25Z",
+		"updated_at": "2023-09-29T12:04:30Z",
+		"closed_at": "2023-09-27T11:19:12Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54639",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54639",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54639.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54639.patch",
+			"merged_at": "2023-09-27T11:19:12Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nThis PR ensures `false` values are preserved in our in-memory representation of `theme.json` settings when constructing the Global Styles UI.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nAddresses https://github.com/WordPress/gutenberg/issues/54638\r\n\r\nBy making the in-memory settings match the settings provided in the `theme.json`, I believe this will help us achieve consistency in https://github.com/WordPress/gutenberg/issues/54544 and  https://github.com/WordPress/gutenberg/issues/54635.\r\n\r\nLargely I'm opening this PR to discuss what the expected behavior should be, and to see if this is an appropriate change.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nIt modifies the conditional in `useGlobalSetting` of [packages/block-editor/src/components/global-styles/hooks.js](https://github.com/WordPress/gutenberg/blob/23bb9301902bb5825480240bd5aaec9d3cc3c380/packages/block-editor/src/components/global-styles/hooks.js#L91).\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n1. In the [screen-block.js file](https://github.com/WordPress/gutenberg/blob/23bb9301902bb5825480240bd5aaec9d3cc3c380/packages/edit-site/src/components/global-styles/screen-block.js#L95), add a console.log for `rawSettings` around line 95.\r\n2. Open your web inspector and go to the Image settings in the Global Styles.\r\n3. See that the `lightbox.allowEditing: true` from the default Gutenberg `theme.json` is visible in the logged statement as expected.\r\n\r\n<img width=\"1421\" alt=\"Screenshot 2023-09-19 at 7 26 42 PM\" src=\"https://github.com/WordPress/gutenberg/assets/5360536/24976f1d-5061-45a5-904f-bd7faab12506\">\r\n\r\n4. Modify your theme's `theme.json` to include the following setting to overwrite the default `allowEditing` value:\r\n```\r\n\"settings\": {\r\n    \"blocks\": {\r\n        \"core/image\": {\r\n            \"lightbox\": {\r\n                \"allowEditing\" false\r\n            }\r\n        }\r\n    }\r\n}\r\n```\r\n5. Revisit the Image settings in the Global Styles, and see that the `rawSettings` value is preserved.\r\n\r\n<img width=\"1400\" alt=\"Screenshot 2023-09-19 at 8 01 13 PM\" src=\"https://github.com/WordPress/gutenberg/assets/5360536/c975d5ec-108a-492b-9c90-33ebc1a8d42e\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639/reactions",
+			"total_count": 2,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 2,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54639/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54637",
+		"id": 1903854433,
+		"node_id": "PR_kwDOBNHdeM5auWbY",
+		"number": 54637,
+		"title": "Use `wp_get_inline_script_tag()` in `build_dropdown_script_block_core_categories()`",
+		"user": {
+			"login": "westonruter",
+			"id": 134745,
+			"node_id": "MDQ6VXNlcjEzNDc0NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/134745?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/westonruter",
+			"html_url": "https://github.com/westonruter",
+			"followers_url": "https://api.github.com/users/westonruter/followers",
+			"following_url": "https://api.github.com/users/westonruter/following{/other_user}",
+			"gists_url": "https://api.github.com/users/westonruter/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/westonruter/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/westonruter/subscriptions",
+			"organizations_url": "https://api.github.com/users/westonruter/orgs",
+			"repos_url": "https://api.github.com/users/westonruter/repos",
+			"events_url": "https://api.github.com/users/westonruter/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/westonruter/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 1113238583,
+				"node_id": "MDU6TGFiZWwxMTEzMjM4NTgz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Categories",
+				"name": "[Block] Categories",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Categories Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-19T23:30:07Z",
+		"updated_at": "2023-09-21T17:53:36Z",
+		"closed_at": "2023-09-21T17:50:09Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54637",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54637",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54637.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54637.patch",
+			"merged_at": "2023-09-21T17:50:09Z"
+		},
+		"body": "See Core-58664. By using `wp_get_inline_script_tag()` instead of manually constructing `script` tags, key benefits can be gained, for example being able to use Strict CSP. This change was originally in https://github.com/WordPress/wordpress-develop/pull/4773 but it needed to be upstreamed in Gutenberg.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54637/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54622",
+		"id": 1903645061,
+		"node_id": "PR_kwDOBNHdeM5atoz3",
+		"number": 54622,
+		"title": "Default suggested links to pages",
+		"user": {
+			"login": "draganescu",
+			"id": 107534,
+			"node_id": "MDQ6VXNlcjEwNzUzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/107534?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/draganescu",
+			"html_url": "https://github.com/draganescu",
+			"followers_url": "https://api.github.com/users/draganescu/followers",
+			"following_url": "https://api.github.com/users/draganescu/following{/other_user}",
+			"gists_url": "https://api.github.com/users/draganescu/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/draganescu/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/draganescu/subscriptions",
+			"organizations_url": "https://api.github.com/users/draganescu/orgs",
+			"repos_url": "https://api.github.com/users/draganescu/repos",
+			"events_url": "https://api.github.com/users/draganescu/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/draganescu/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 644027893,
+				"node_id": "MDU6TGFiZWw2NDQwMjc4OTM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design%20Feedback",
+				"name": "Needs Design Feedback",
+				"color": "0e8a16",
+				"default": false,
+				"description": "Needs general design feedback."
+			},
+			{
+				"id": 1225853227,
+				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
+				"name": "[Block] Navigation",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Navigation Block"
+			},
+			{
+				"id": 1838782557,
+				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
+				"name": "[Feature] Link Editing",
+				"color": "fbca04",
+				"default": false,
+				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 20,
+		"created_at": "2023-09-19T19:59:22Z",
+		"updated_at": "2023-10-02T11:30:06Z",
+		"closed_at": "2023-10-02T11:24:13Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54622",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54622",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54622.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54622.patch",
+			"merged_at": "2023-10-02T11:24:13Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nCloses #53904 - defaults suggestions in LinkUI to pages.\r\n\r\n~~This change applies in all linking instances where linking UI shows suggestions, not only in the navigation block as the original issue asks.\r\n\r\nI think this is good for consistency and also because the mixed suggestions seem less likely to be helpful.~~\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nBecause most linking is either towards pages or external links. ~~For taxonomy links or posts it is far more likely to need to filter by search term.~~\r\n\r\nPages are generally few in number and therefore it makes sense to always default to suggesting existing pages.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nThis is how the suggestions are setup and shown in the navigation link block, part of the navigation block:\r\n\r\n![Untitled-2023-09-28-1158(1)](https://github.com/WordPress/gutenberg/assets/107534/c9497cae-9a77-4029-a1d8-3da32a936f24)\r\n\r\n~~This exploration changes how the core data (!) `fetchLinkSuggestions` ... util? works. This currently searches through everything and tries to show _something_.\r\n\r\nThe change defaults to always showing pages if the call is for \"initial suggestions\" - which also means:\r\n\r\n- if there are no pages there are no suggestions\r\n- there will always be the same suggestions~~\r\n\r\nThe PR introduces a new member of the search options object that gets eventually used by `fetchLinkSuggestions`. This new `initialSuggestionsSearchOptions` member overrides all the options in `searchOptions;` for the initial suggestions.\r\n\r\nThe navigation link block now uses this to default to suggesting a max of 20 pages initially for the custom link variation.\r\n\r\n\r\n## Testing Instructions\r\n\r\n0. Make sure you have some published pages, then\r\n1. In a post \r\n2. Add a navigation block\r\n3. Notice when adding items the suggestions are only pages\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/107534/052de3bb-a75b-48a4-b3f6-d1f2dc615ff0\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54622/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54613",
+		"id": 1903321813,
+		"node_id": "PR_kwDOBNHdeM5asjCB",
+		"number": 54613,
+		"title": "Add a brief description to the Footnotes block",
+		"user": {
+			"login": "aurooba",
+			"id": 6925260,
+			"node_id": "MDQ6VXNlcjY5MjUyNjA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6925260?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/aurooba",
+			"html_url": "https://github.com/aurooba",
+			"followers_url": "https://api.github.com/users/aurooba/followers",
+			"following_url": "https://api.github.com/users/aurooba/following{/other_user}",
+			"gists_url": "https://api.github.com/users/aurooba/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/aurooba/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/aurooba/subscriptions",
+			"organizations_url": "https://api.github.com/users/aurooba/orgs",
+			"repos_url": "https://api.github.com/users/aurooba/repos",
+			"events_url": "https://api.github.com/users/aurooba/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/aurooba/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 5654261232,
+				"node_id": "LA_kwDOBNHdeM8AAAABUQUt8A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Footnotes",
+				"name": "[Block] Footnotes",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Footnotes Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-19T16:12:11Z",
+		"updated_at": "2023-10-07T20:55:36Z",
+		"closed_at": "2023-09-27T01:52:50Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54613",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54613",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54613.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54613.patch",
+			"merged_at": "2023-09-27T01:52:50Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What and Why?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nI noticed there was no description for the Footnotes block. This PR adds a brief one in a similar style to other Core Block descriptions: `Display footnotes added to the page.`. Happy to adjust based on feedback!\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54613/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54609",
+		"id": 1903191219,
+		"node_id": "PR_kwDOBNHdeM5asG2a",
+		"number": 54609,
+		"title": "Add template replace flow to template inspector",
+		"user": {
+			"login": "scruffian",
+			"id": 275961,
+			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/scruffian",
+			"html_url": "https://github.com/scruffian",
+			"followers_url": "https://api.github.com/users/scruffian/followers",
+			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+			"organizations_url": "https://api.github.com/users/scruffian/orgs",
+			"repos_url": "https://api.github.com/users/scruffian/repos",
+			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "scruffian",
+			"id": 275961,
+			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/scruffian",
+			"html_url": "https://github.com/scruffian",
+			"followers_url": "https://api.github.com/users/scruffian/followers",
+			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+			"organizations_url": "https://api.github.com/users/scruffian/orgs",
+			"repos_url": "https://api.github.com/users/scruffian/repos",
+			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "scruffian",
+				"id": 275961,
+				"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/scruffian",
+				"html_url": "https://github.com/scruffian",
+				"followers_url": "https://api.github.com/users/scruffian/followers",
+				"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+				"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+				"organizations_url": "https://api.github.com/users/scruffian/orgs",
+				"repos_url": "https://api.github.com/users/scruffian/repos",
+				"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/scruffian/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 11,
+		"created_at": "2023-09-19T15:01:58Z",
+		"updated_at": "2023-10-04T09:37:57Z",
+		"closed_at": "2023-10-03T20:13:49Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54609",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54609",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54609.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54609.patch",
+			"merged_at": "2023-10-03T20:13:49Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nAdd template replace flow to template inspector - fixes https://github.com/WordPress/gutenberg/issues/54562\r\n\r\n## Why?\r\nTwenty Twenty-Four is exploring adding alternate template types for the home, index, single and page templates. While the effort in https://github.com/WordPress/gutenberg/pull/51477 brings alternate template selection to pages, templates still do not have this capability.\r\n\r\nThere's currently not a method for someone to swap a template directly with another templateType.\r\n\r\n## How?\r\nAdd a new ReplaceTemplateButton component which opens a modal of available templates and lets a user pick the correct on.\r\n\r\n## Testing Instructions\r\n1. Open the Site Editor and go to the template inspector.\r\n2. You should see a button that allows you to replace your current template\r\n3. This button should open a modal allowing you to select a different template\r\n4. When you select a different template, the contents of your old template should be replace with the one you selected and the entity should be dirty.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/107534/391a3c24-4b5d-4754-b51b-4c99851097b2\r\n\r\n\r\n\r\n\r\nThis work is heavily based on https://github.com/WordPress/gutenberg/pull/51477",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54609/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54606",
+		"id": 1903085418,
+		"node_id": "PR_kwDOBNHdeM5arv4p",
+		"number": 54606,
+		"title": "Replace turbo-combine-reducers with combineReducers from Redux",
+		"user": {
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 937321166,
+				"node_id": "MDU6TGFiZWw5MzczMjExNjY=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Data",
+				"name": "[Package] Data",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/data"
+			},
+			{
+				"id": 2427431264,
+				"node_id": "MDU6TGFiZWwyNDI3NDMxMjY0",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Security",
+				"name": "[Type] Security",
+				"color": "dd6c0f",
+				"default": false,
+				"description": "Related to security concerns or efforts"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "jsnajdr",
+			"id": 664258,
+			"node_id": "MDQ6VXNlcjY2NDI1OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/jsnajdr",
+			"html_url": "https://github.com/jsnajdr",
+			"followers_url": "https://api.github.com/users/jsnajdr/followers",
+			"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+			"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+			"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+			"repos_url": "https://api.github.com/users/jsnajdr/repos",
+			"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "jsnajdr",
+				"id": 664258,
+				"node_id": "MDQ6VXNlcjY2NDI1OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/664258?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/jsnajdr",
+				"html_url": "https://github.com/jsnajdr",
+				"followers_url": "https://api.github.com/users/jsnajdr/followers",
+				"following_url": "https://api.github.com/users/jsnajdr/following{/other_user}",
+				"gists_url": "https://api.github.com/users/jsnajdr/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/jsnajdr/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/jsnajdr/subscriptions",
+				"organizations_url": "https://api.github.com/users/jsnajdr/orgs",
+				"repos_url": "https://api.github.com/users/jsnajdr/repos",
+				"events_url": "https://api.github.com/users/jsnajdr/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/jsnajdr/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 5,
+		"created_at": "2023-09-19T14:10:19Z",
+		"updated_at": "2023-09-29T18:38:38Z",
+		"closed_at": "2023-09-29T18:38:10Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54606",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54606",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54606.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54606.patch",
+			"merged_at": "2023-09-29T18:38:09Z"
+		},
+		"body": "This is still an experiment, I'm opening a PR mainly to get performance test results.\r\n\r\nThere are two major problems with `combineReducers` in Redux.\r\n\r\nFirst, it doesn't allow slice reducers to ever return `undefined` state. `undefined` means uninitialized and every reducer is supposed to return an \"initialized\" inital state when `undefined` state is passed. We have many reducers that use `undefined`, and this PR has to modify them to use `null` instead. Otherwise, `combineReducers` will throw an exception and the app will crash. The prohibition on `undefined` will be a breaking change that we probably can't afford to do.\r\n\r\nSecond, it logs a warning when the combined reducer function is called with a state that contains unknown keys, with no reducer for them. For example, consider combining `foo` and `bar` reducers with `combineReducers( { foo, bar } )`. Then, when you pass an object with shape `{ foo, bar, baz }` as `state`, `combineReducers` doesn't like the `baz` field, because there is no sub-reducer to pass it to. The warning is:\r\n```\r\nUnexpected key \"baz\" found in preloadedState argument passed to createStore.\r\nExpected to find one of the known reducer keys instead: \"foo\", \"bar\".\r\nUnexpected keys will be ignored.\r\n```\r\n\r\nThe `core/blocks` store very often uses an enhancer pattern that leads to these \"unexpected key\" warnings:\r\n```js\r\nfunction withIgnoredBlockChange( reducer ) {\r\n  return ( state, action ) => {\r\n    const nextState = reducer( state, action );\r\n    if ( nextState !== state ) {\r\n      nextState.isIgnoredChange = action.type === 'RECEIVE_BLOCKS';\r\n    }\r\n    return nextState;\r\n  };\r\n}\r\n```\r\nThis enhancer calls the inner reducer and then adds the `isIgnoredChange` field to the existing ones. If the inner reducer is a result of `combineReducers`, it will complain about the unknown key. Although everything works, there's nothing really wrong with this pattern.\r\n\r\nFor these two reasons, we'll probably have to write our own version of `combineReducers`.\r\n\r\nFixes #42513.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54606/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54597",
+		"id": 1902793171,
+		"node_id": "PR_kwDOBNHdeM5aqwIe",
+		"number": 54597,
+		"title": "Move dependencies to the right place",
+		"user": {
+			"login": "scruffian",
+			"id": 275961,
+			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/scruffian",
+			"html_url": "https://github.com/scruffian",
+			"followers_url": "https://api.github.com/users/scruffian/followers",
+			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+			"organizations_url": "https://api.github.com/users/scruffian/orgs",
+			"repos_url": "https://api.github.com/users/scruffian/repos",
+			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "scruffian",
+			"id": 275961,
+			"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/scruffian",
+			"html_url": "https://github.com/scruffian",
+			"followers_url": "https://api.github.com/users/scruffian/followers",
+			"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+			"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+			"organizations_url": "https://api.github.com/users/scruffian/orgs",
+			"repos_url": "https://api.github.com/users/scruffian/repos",
+			"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/scruffian/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "scruffian",
+				"id": 275961,
+				"node_id": "MDQ6VXNlcjI3NTk2MQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/275961?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/scruffian",
+				"html_url": "https://github.com/scruffian",
+				"followers_url": "https://api.github.com/users/scruffian/followers",
+				"following_url": "https://api.github.com/users/scruffian/following{/other_user}",
+				"gists_url": "https://api.github.com/users/scruffian/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/scruffian/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/scruffian/subscriptions",
+				"organizations_url": "https://api.github.com/users/scruffian/orgs",
+				"repos_url": "https://api.github.com/users/scruffian/repos",
+				"events_url": "https://api.github.com/users/scruffian/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/scruffian/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-19T11:46:09Z",
+		"updated_at": "2023-09-26T13:00:55Z",
+		"closed_at": "2023-09-26T13:00:24Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54597",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54597",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54597.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54597.patch",
+			"merged_at": "2023-09-26T13:00:24Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nMoving the dependency declarations to the right place.\r\n\r\n## Why?\r\nCode quality\r\n\r\n## How?\r\nRefactor\r\n\r\n## Testing Instructions\r\nEverything should work as before.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54597/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54573",
+		"id": 1901569913,
+		"node_id": "PR_kwDOBNHdeM5amm8F",
+		"number": 54573,
+		"title": "Remove unused components from `ui/`",
+		"user": {
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "brookewp",
+			"id": 35543432,
+			"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+			"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/brookewp",
+			"html_url": "https://github.com/brookewp",
+			"followers_url": "https://api.github.com/users/brookewp/followers",
+			"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+			"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+			"organizations_url": "https://api.github.com/users/brookewp/orgs",
+			"repos_url": "https://api.github.com/users/brookewp/repos",
+			"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/brookewp/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "brookewp",
+				"id": 35543432,
+				"node_id": "MDQ6VXNlcjM1NTQzNDMy",
+				"avatar_url": "https://avatars.githubusercontent.com/u/35543432?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/brookewp",
+				"html_url": "https://github.com/brookewp",
+				"followers_url": "https://api.github.com/users/brookewp/followers",
+				"following_url": "https://api.github.com/users/brookewp/following{/other_user}",
+				"gists_url": "https://api.github.com/users/brookewp/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/brookewp/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/brookewp/subscriptions",
+				"organizations_url": "https://api.github.com/users/brookewp/orgs",
+				"repos_url": "https://api.github.com/users/brookewp/repos",
+				"events_url": "https://api.github.com/users/brookewp/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/brookewp/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-18T19:04:04Z",
+		"updated_at": "2023-09-21T20:06:53Z",
+		"closed_at": "2023-09-21T20:06:19Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54573",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54573",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54573.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54573.patch",
+			"merged_at": "2023-09-21T20:06:19Z"
+		},
+		"body": "## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nThis expands on the work started in #52953 to remove unused components from the `packages/components/src/ui` folder. \r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nThese components (`ui/tooltip` and `ui/shortcut`) are not publicly exported and are relatively unused. There was one internal use of `ui/tooltip`, which is replaced in this PR. \r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nBy replacing the only internal usage of `ui/tooltip` with our Tooltip component and deleting the unused components. \r\n\r\n## Testing Instructions\r\n\r\n`npm run build` without errors \r\n\r\n### Colorpicker: \r\n\r\n1. `npm run storybook:dev` \r\n2. Navigate to the `ColorPicker` component \r\n3. Ensure the tooltip for the copy button appears* and behaves the same as trunk\r\n\r\n*The placement will look off in Storybook unless the sidebar is hidden (key-down `S` to hide) or the story is opened in isolation. The tooltip background is also black instead of grey, but that reflects a design change made earlier: #50792",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54573/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54553",
+		"id": 1900781960,
+		"node_id": "PR_kwDOBNHdeM5aj6lU",
+		"number": 54553,
+		"title": "Remove base url from link control search results ",
+		"user": {
+			"login": "getdave",
+			"id": 444434,
+			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/getdave",
+			"html_url": "https://github.com/getdave",
+			"followers_url": "https://api.github.com/users/getdave/followers",
+			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+			"organizations_url": "https://api.github.com/users/getdave/orgs",
+			"repos_url": "https://api.github.com/users/getdave/repos",
+			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 1838782557,
+				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
+				"name": "[Feature] Link Editing",
+				"color": "fbca04",
+				"default": false,
+				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "getdave",
+			"id": 444434,
+			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/getdave",
+			"html_url": "https://github.com/getdave",
+			"followers_url": "https://api.github.com/users/getdave/followers",
+			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+			"organizations_url": "https://api.github.com/users/getdave/orgs",
+			"repos_url": "https://api.github.com/users/getdave/repos",
+			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "getdave",
+				"id": 444434,
+				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/getdave",
+				"html_url": "https://github.com/getdave",
+				"followers_url": "https://api.github.com/users/getdave/followers",
+				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
+				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
+				"organizations_url": "https://api.github.com/users/getdave/orgs",
+				"repos_url": "https://api.github.com/users/getdave/repos",
+				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/getdave/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 14,
+		"created_at": "2023-09-18T12:00:19Z",
+		"updated_at": "2023-10-02T09:39:24Z",
+		"closed_at": "2023-09-21T10:28:41Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54553",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54553",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54553.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54553.patch",
+			"merged_at": "2023-09-21T10:28:41Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nRemoves the site's `baseURL` (if available) from the Link Control search results:\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/52572\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nPolish to limit UI noise. See Issue.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nDisplay only the _path_ of the search result URL if the type is anything other than a manually entered URL.\r\n\r\nProps to @Mamaduka for this suggested approach.\r\n\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n- Repeat the below in Post, Widget and Site editors\r\n- Make sure you have some Posts and Pages\r\n- Open Editor\r\n- Add text block.\r\n- Create a link and search for one of the Pages/Posts\r\n- See results with the site's base URL stripped off (i.e. `localhost:8888/sample-page` becomes `/sample-page/`).\r\n- Verify that manually entering a URL such as `https://wordpress.org/hello-world` does _not_ strip the site URL.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n<img width=\"457\" alt=\"Screenshot 2023-09-18 at 14 13 49\" src=\"https://github.com/WordPress/gutenberg/assets/444434/45536bd6-beb9-4f68-bf9d-e1b19ad46c01\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54553/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54516",
+		"id": 1899016673,
+		"node_id": "PR_kwDOBNHdeM5aeOUd",
+		"number": 54516,
+		"title": "Docs: Remove the Full Site Editing doc.",
+		"user": {
+			"login": "ndiego",
+			"id": 4832319,
+			"node_id": "MDQ6VXNlcjQ4MzIzMTk=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4832319?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ndiego",
+			"html_url": "https://github.com/ndiego",
+			"followers_url": "https://api.github.com/users/ndiego/followers",
+			"following_url": "https://api.github.com/users/ndiego/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ndiego/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ndiego/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ndiego/subscriptions",
+			"organizations_url": "https://api.github.com/users/ndiego/orgs",
+			"repos_url": "https://api.github.com/users/ndiego/repos",
+			"events_url": "https://api.github.com/users/ndiego/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ndiego/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 567484057,
+				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Developer%20Documentation",
+				"name": "[Type] Developer Documentation",
+				"color": "bfd4f2",
+				"default": false,
+				"description": "Documentation for developers"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "ndiego",
+			"id": 4832319,
+			"node_id": "MDQ6VXNlcjQ4MzIzMTk=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4832319?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ndiego",
+			"html_url": "https://github.com/ndiego",
+			"followers_url": "https://api.github.com/users/ndiego/followers",
+			"following_url": "https://api.github.com/users/ndiego/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ndiego/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ndiego/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ndiego/subscriptions",
+			"organizations_url": "https://api.github.com/users/ndiego/orgs",
+			"repos_url": "https://api.github.com/users/ndiego/repos",
+			"events_url": "https://api.github.com/users/ndiego/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ndiego/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "ndiego",
+				"id": 4832319,
+				"node_id": "MDQ6VXNlcjQ4MzIzMTk=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/4832319?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ndiego",
+				"html_url": "https://github.com/ndiego",
+				"followers_url": "https://api.github.com/users/ndiego/followers",
+				"following_url": "https://api.github.com/users/ndiego/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ndiego/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ndiego/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ndiego/subscriptions",
+				"organizations_url": "https://api.github.com/users/ndiego/orgs",
+				"repos_url": "https://api.github.com/users/ndiego/repos",
+				"events_url": "https://api.github.com/users/ndiego/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ndiego/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 0,
+		"created_at": "2023-09-15T20:06:54Z",
+		"updated_at": "2023-09-22T15:51:13Z",
+		"closed_at": "2023-09-22T15:50:49Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54516",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54516",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54516.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54516.patch",
+			"merged_at": "2023-09-22T15:50:49Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis PR removes the [Full Site Editing doc](https://developer.wordpress.org/block-editor/getting-started/full-site-editing/) from the Block Editor Handbook. \r\n\r\n## Why?\r\nThis doc is extremely out-of-date, and the term \"Full Site Editing\" is [being loosely deprecated](https://make.wordpress.org/updates/2022/11/04/site-editor-a-more-user-friendly-name/) now that the Site Editor has evolved and Phase 2 is complete. Furthermore, the FSE Outreach Program is [also being phased out](https://make.wordpress.org/core/2023/09/07/evolving-the-fse-outreach-program/). \r\n\r\nWith the [other improvements](https://github.com/WordPress/gutenberg/issues/54124) being made to the Getting Started section of the BEH, it makes sense to remove this page finally.\r\n\r\n## How?\r\nRemove the doc and update the manifest and toc.\r\n\r\nAlso, changes made to the `/docs` here on GitHub are \"non-destructive\", meaning that if a page is removed here, it still needs to be manually removed from the site. Therefore, once this PR is merged, a PR will be created in https://github.com/WordPress/wporg-mu-plugins/ to handle redirects. Once that is in place, the [Full Site Editing doc](https://developer.wordpress.org/block-editor/getting-started/full-site-editing/) will then be manually removed from https://developer.wordpress.org/block-editor\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54516/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54505",
+		"id": 1898557392,
+		"node_id": "PR_kwDOBNHdeM5acqap",
+		"number": 54505,
+		"title": "Footnotes: avoid regexes in entity provider",
+		"user": {
+			"login": "ellatrix",
+			"id": 4710635,
+			"node_id": "MDQ6VXNlcjQ3MTA2MzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4710635?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/ellatrix",
+			"html_url": "https://github.com/ellatrix",
+			"followers_url": "https://api.github.com/users/ellatrix/followers",
+			"following_url": "https://api.github.com/users/ellatrix/following{/other_user}",
+			"gists_url": "https://api.github.com/users/ellatrix/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/ellatrix/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/ellatrix/subscriptions",
+			"organizations_url": "https://api.github.com/users/ellatrix/orgs",
+			"repos_url": "https://api.github.com/users/ellatrix/repos",
+			"events_url": "https://api.github.com/users/ellatrix/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/ellatrix/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 5654261232,
+				"node_id": "LA_kwDOBNHdeM8AAAABUQUt8A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Footnotes",
+				"name": "[Block] Footnotes",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Footnotes Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-15T14:37:16Z",
+		"updated_at": "2023-09-20T13:32:27Z",
+		"closed_at": "2023-09-20T13:31:59Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54505",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54505",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54505.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54505.patch",
+			"merged_at": "2023-09-20T13:31:59Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n\r\nThis can be done better with rich text values.\r\n\r\nWe need to check performance but it might not be too bad with the block caching. I did leave the `indexOf( 'data-fn' )` checks in place though, so it should be the same if no footnotes are present.\r\n\r\nIdeally this value would be in the store and we wouldn't have to parse and serialise...\r\n\r\n## Why?\r\n\r\nRegexes are fragile.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54505/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54494",
+		"id": 1898041643,
+		"node_id": "PR_kwDOBNHdeM5aa59I",
+		"number": 54494,
+		"title": "Update the default JSX pragma to React instead of @wordpress/element",
+		"user": {
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
+				"default": false,
+				"description": "Issues or PRs related to build tooling"
+			},
+			{
+				"id": 1293579839,
+				"node_id": "MDU6TGFiZWwxMjkzNTc5ODM5",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Dev%20Note",
+				"name": "Needs Dev Note",
+				"color": "b910f2",
+				"default": false,
+				"description": "Requires a developer note for a major WordPress release cycle"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "youknowriad",
+			"id": 272444,
+			"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/youknowriad",
+			"html_url": "https://github.com/youknowriad",
+			"followers_url": "https://api.github.com/users/youknowriad/followers",
+			"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+			"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+			"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+			"repos_url": "https://api.github.com/users/youknowriad/repos",
+			"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "youknowriad",
+				"id": 272444,
+				"node_id": "MDQ6VXNlcjI3MjQ0NA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/272444?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/youknowriad",
+				"html_url": "https://github.com/youknowriad",
+				"followers_url": "https://api.github.com/users/youknowriad/followers",
+				"following_url": "https://api.github.com/users/youknowriad/following{/other_user}",
+				"gists_url": "https://api.github.com/users/youknowriad/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/youknowriad/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/youknowriad/subscriptions",
+				"organizations_url": "https://api.github.com/users/youknowriad/orgs",
+				"repos_url": "https://api.github.com/users/youknowriad/repos",
+				"events_url": "https://api.github.com/users/youknowriad/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/youknowriad/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 10,
+		"created_at": "2023-09-15T09:19:37Z",
+		"updated_at": "2023-09-28T11:56:22Z",
+		"closed_at": "2023-09-28T09:46:18Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54494",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54494",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54494.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54494.patch",
+			"merged_at": "2023-09-28T09:46:18Z"
+		},
+		"body": "See #54074 for the reasoning/discussions\r\n\r\nThis PR implements the change proposed in #54074 to switch the default JSX pragma from @wordpress/element to React. In addition to the current changes, we may want to update our documentation and the files where we currently import `@wordpress/element` and might not need to. I decided to not update these in the same PR to ensure/clarify that with this change, everything continues to work exactly the same without any change to the code base. Also updating documentation and code will quickly result in conflicts unless we merge those PRs quickly, so I'm leaving them separate until the decision is made to merge the current PR.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494/reactions",
+			"total_count": 2,
+			"+1": 2,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54494/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54489",
+		"id": 1897751694,
+		"node_id": "PR_kwDOBNHdeM5aZ7i-",
+		"number": 54489,
+		"title": "Background image block support: Add tests, adjust injection logic slightly",
+		"user": {
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 1894493554,
+				"node_id": "MDU6TGFiZWwxODk0NDkzNTU0",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Design%20Tools",
+				"name": "[Feature] Design Tools",
+				"color": "fbca04",
+				"default": false,
+				"description": "Tools that impact the appearance of blocks both to expand the number of tools and improve the experi"
+			},
+			{
+				"id": 3659584252,
+				"node_id": "LA_kwDOBNHdeM7aINL8",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Backport%20from%20WordPress%20Core",
+				"name": "Backport from WordPress Core",
+				"color": "6FCDF3",
+				"default": false,
+				"description": "Pull request that needs to be backported to the a Gutenberg release from WordPress Core"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "andrewserong",
+			"id": 14988353,
+			"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewserong",
+			"html_url": "https://github.com/andrewserong",
+			"followers_url": "https://api.github.com/users/andrewserong/followers",
+			"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+			"repos_url": "https://api.github.com/users/andrewserong/repos",
+			"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewserong/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "andrewserong",
+				"id": 14988353,
+				"node_id": "MDQ6VXNlcjE0OTg4MzUz",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14988353?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/andrewserong",
+				"html_url": "https://github.com/andrewserong",
+				"followers_url": "https://api.github.com/users/andrewserong/followers",
+				"following_url": "https://api.github.com/users/andrewserong/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewserong/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewserong/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewserong/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewserong/orgs",
+				"repos_url": "https://api.github.com/users/andrewserong/repos",
+				"events_url": "https://api.github.com/users/andrewserong/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewserong/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-15T05:52:10Z",
+		"updated_at": "2023-09-25T23:55:59Z",
+		"closed_at": "2023-09-25T23:55:38Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54489",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54489",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54489.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54489.patch",
+			"merged_at": "2023-09-25T23:55:38Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nPart of: https://github.com/WordPress/gutenberg/issues/54336\r\n\r\nAdd PHP tests for the background image block support.\r\n\r\nAlso, adjust the style injection slightly, so that if the existing style attribute ends in a semi-colon, we still inject the newly created styles.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nWhile working on the backport for the background image block support over in https://github.com/WordPress/wordpress-develop/pull/5209, I added some tests, and noticed the logic for injecting the style tag needed adjusting slightly. While in Gutenberg, inline styles don't include a trailing semi-colon, I thought it'd be good to factor it in, just in case, for the future reliability of the support and interacting with other styles.\r\n\r\nAlso, it's good to add tests for features!\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n* Ensure that we append to the style attribute irrespective of whether or not a semi-colon already exists at the end of the current value.\r\n* Add PHP tests for the background image support to cover injecting when no style tag exists, when a style tag exists with a single rule in it, and when there are multiple rules with a trailing semi-colon. Also check that the background image will not be output if the block does not have support for it.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Smoke test that the background image support still works as expected in the block editor (Add a Group block, add a background image to it, save the post, and view on the site frontend — then add some styles to the Group block, like text color, and repeat).\r\n2. Check that tests pass, or to run `npm run test:unit:php:base -- --filter WP_Block_Supports_Background_Test` locally to confirm.",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54489/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54473",
+		"id": 1897152368,
+		"node_id": "PR_kwDOBNHdeM5aX8MR",
+		"number": 54473,
+		"title": "Adding label/description to `BlockEditor/DuotoneControl`",
+		"user": {
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "andrewhayward",
+			"id": 159848,
+			"node_id": "MDQ6VXNlcjE1OTg0OA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/andrewhayward",
+			"html_url": "https://github.com/andrewhayward",
+			"followers_url": "https://api.github.com/users/andrewhayward/followers",
+			"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+			"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+			"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+			"repos_url": "https://api.github.com/users/andrewhayward/repos",
+			"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "andrewhayward",
+				"id": 159848,
+				"node_id": "MDQ6VXNlcjE1OTg0OA==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/159848?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/andrewhayward",
+				"html_url": "https://github.com/andrewhayward",
+				"followers_url": "https://api.github.com/users/andrewhayward/followers",
+				"following_url": "https://api.github.com/users/andrewhayward/following{/other_user}",
+				"gists_url": "https://api.github.com/users/andrewhayward/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/andrewhayward/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/andrewhayward/subscriptions",
+				"organizations_url": "https://api.github.com/users/andrewhayward/orgs",
+				"repos_url": "https://api.github.com/users/andrewhayward/repos",
+				"events_url": "https://api.github.com/users/andrewhayward/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/andrewhayward/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 2,
+		"created_at": "2023-09-14T19:11:03Z",
+		"updated_at": "2023-09-28T09:55:53Z",
+		"closed_at": "2023-09-28T09:55:23Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54473",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54473",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54473.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54473.patch",
+			"merged_at": "2023-09-28T09:55:23Z"
+		},
+		"body": "## What?\r\nThis PR ensures that the main duotone picker found in the image duotone filter panel has an identifying label and relevant description.\r\n\r\n<img src=\"https://github.com/WordPress/gutenberg/assets/159848/9f80dd95-8686-41db-8241-87a84568bab2\" alt=\"Screenshot of image duotone filter panel, with hand-drawn arrows connecting a description and the label 'Apply duotone filter' with a duotone picker\" width=\"337px\" />\r\n\r\n## Why?\r\nAs per #54055, every `DuotonePicker` needs to have an appropriate contextual label.\r\n\r\n## How?\r\nAn ID is generated and assigned to the node containing the popup description. This is linked to the `DuotonePicker` with an `aria-describedby` props. Additionally, an `aria-label` is applied to the `DuotonePicker` matching the tooltip display value.\r\n\r\nThe `DuotonePicker` component is updated to accept the additional `aria-describedby` prop. (And, as a bonus, the 'unset' option gets a label.)\r\n\r\n## Testing Instructions\r\n* Add an image in the editor\r\n* Open the 'Apply duotone filter' popup\r\n* Confirm that the duotone picker has an `aria-describedby` attribute, and that this points to the description\r\n* Confirm that the duotone picker has an `aria-label` attribute\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54473/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54471",
+		"id": 1897032936,
+		"node_id": "PR_kwDOBNHdeM5aXiZR",
+		"number": 54471,
+		"title": "Modal: add `contentWidth` prop to support a selection of preset modal sizes",
+		"user": {
+			"login": "chad1008",
+			"id": 13856531,
+			"node_id": "MDQ6VXNlcjEzODU2NTMx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13856531?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/chad1008",
+			"html_url": "https://github.com/chad1008",
+			"followers_url": "https://api.github.com/users/chad1008/followers",
+			"following_url": "https://api.github.com/users/chad1008/following{/other_user}",
+			"gists_url": "https://api.github.com/users/chad1008/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/chad1008/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/chad1008/subscriptions",
+			"organizations_url": "https://api.github.com/users/chad1008/orgs",
+			"repos_url": "https://api.github.com/users/chad1008/repos",
+			"events_url": "https://api.github.com/users/chad1008/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/chad1008/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
+				"default": false,
+				"description": "A suggestion for improvement."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "chad1008",
+			"id": 13856531,
+			"node_id": "MDQ6VXNlcjEzODU2NTMx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13856531?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/chad1008",
+			"html_url": "https://github.com/chad1008",
+			"followers_url": "https://api.github.com/users/chad1008/followers",
+			"following_url": "https://api.github.com/users/chad1008/following{/other_user}",
+			"gists_url": "https://api.github.com/users/chad1008/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/chad1008/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/chad1008/subscriptions",
+			"organizations_url": "https://api.github.com/users/chad1008/orgs",
+			"repos_url": "https://api.github.com/users/chad1008/repos",
+			"events_url": "https://api.github.com/users/chad1008/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/chad1008/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "chad1008",
+				"id": 13856531,
+				"node_id": "MDQ6VXNlcjEzODU2NTMx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13856531?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/chad1008",
+				"html_url": "https://github.com/chad1008",
+				"followers_url": "https://api.github.com/users/chad1008/followers",
+				"following_url": "https://api.github.com/users/chad1008/following{/other_user}",
+				"gists_url": "https://api.github.com/users/chad1008/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/chad1008/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/chad1008/subscriptions",
+				"organizations_url": "https://api.github.com/users/chad1008/orgs",
+				"repos_url": "https://api.github.com/users/chad1008/repos",
+				"events_url": "https://api.github.com/users/chad1008/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/chad1008/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 18,
+		"created_at": "2023-09-14T17:43:21Z",
+		"updated_at": "2023-09-29T20:38:24Z",
+		"closed_at": "2023-09-29T20:37:59Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54471",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54471",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54471.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54471.patch",
+			"merged_at": "2023-09-29T20:37:59Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nImplements a new prop for `Modal` that constrains the content width to one of a selection of preset sizes.\r\n\r\n## Why?\r\nConsumers were finding they often needed to manually set a max width on the child elements they provided to `Modal` to prevent them from pushing `Modal`'s size to the full with of the viewport.\r\n\r\n## How?\r\nThe optional new prop accepts values of `small`, `medium`, and `large`. If provided, the width of the `Modal`'s contents will be limited to `300px`, `600px`, or `900px`, respectively. (Note: these are just my initial values, and can most certainly be changed as needed when this PR is reviewed).\r\n\r\nThe value provided to the prop is used to add an additional class name to the relevant DOM element, but this class is only added if `isFullscreen` is `false`, so full screen modals will not be affected. Further, the styles implementing this change are limited to larger screens, so the automatically full screen `Modal` rendering on mobile devices should not be affected either.\r\n\r\n\r\n- [ ] TODO: rebase and refactor changes in #54518 to use the new APIs proposed in this PR\r\n---\r\n\r\ndropping a ping for some folks who may want to weigh in on any design considerations for this one: @jordesign @koster @SaxonF\r\n\r\n## Testing Instructions\r\n`npm run storybook:dev`\r\n\r\n- Open `Modal`'s new `With contentWidth: small` story and test the `contentWidth` control.\r\n- Confirm that both `isFullScreen` behaves as expected with the new prop applied\r\n- Confirm smaller viewports still render the modal in full screen, regardless of the new prop's value\r\n\r\n### Testing Instructions for Keyboard\r\nn/a\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54471/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54464",
+		"id": 1896554647,
+		"node_id": "PR_kwDOBNHdeM5aV66-",
+		"number": 54464,
+		"title": "Bump shivammathur/setup-php from 2.25.5 to 2.26.0",
+		"user": {
+			"login": "dependabot[bot]",
+			"id": 49699333,
+			"node_id": "MDM6Qm90NDk2OTkzMzM=",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/dependabot%5Bbot%5D",
+			"html_url": "https://github.com/apps/dependabot",
+			"followers_url": "https://api.github.com/users/dependabot%5Bbot%5D/followers",
+			"following_url": "https://api.github.com/users/dependabot%5Bbot%5D/following{/other_user}",
+			"gists_url": "https://api.github.com/users/dependabot%5Bbot%5D/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/dependabot%5Bbot%5D/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/dependabot%5Bbot%5D/subscriptions",
+			"organizations_url": "https://api.github.com/users/dependabot%5Bbot%5D/orgs",
+			"repos_url": "https://api.github.com/users/dependabot%5Bbot%5D/repos",
+			"events_url": "https://api.github.com/users/dependabot%5Bbot%5D/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/dependabot%5Bbot%5D/received_events",
+			"type": "Bot",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
+				"default": false,
+				"description": "Issues or PRs related to build tooling"
+			},
+			{
+				"id": 4662565393,
+				"node_id": "LA_kwDOBNHdeM8AAAABFekaEQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/GitHub%20Actions",
+				"name": "GitHub Actions",
+				"color": "000000",
+				"default": false,
+				"description": "Pull requests that update GitHub Actions code"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 1,
+		"created_at": "2023-09-14T13:14:57Z",
+		"updated_at": "2023-09-22T00:17:47Z",
+		"closed_at": "2023-09-22T00:17:15Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54464",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54464",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54464.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54464.patch",
+			"merged_at": "2023-09-22T00:17:15Z"
+		},
+		"body": "Bumps [shivammathur/setup-php](https://github.com/shivammathur/setup-php) from 2.25.5 to 2.26.0.\n<details>\n<summary>Release notes</summary>\n<p><em>Sourced from <a href=\"https://github.com/shivammathur/setup-php/releases\">shivammathur/setup-php's releases</a>.</em></p>\n<blockquote>\n<h2>2.26.0</h2>\n<h2>Changelog</h2>\n<h3>Microsoft SQL Server extensions. (<a href=\"https://redirect.github.com/shivammathur/setup-php/issues/758\">#758</a>, <a href=\"https://redirect.github.com/shivammathur/setup-php/issues/766\">#766</a>)</h3>\n<p>The latest supported version of <code>sqlsrv</code> and <code>pdo_sqlsrv</code> for the PHP version will be installed.\nAlso, on Windows, these extensions will be installed from <a href=\"https://github.com/microsoft/msphpsql\"><code>microsoft/msphpsql</code></a> GitHub releases and will fallback to <code>pecl</code>.</p>\n<pre lang=\"yaml\"><code>- name: Setup PHP\n  uses: shivammathur/setup-php@v2\n  with:\n    php-version: '8.2'\n    extensions: sqlsrv, pdo_sqlsrv\n</code></pre>\n<h3>PHP 8.4 Support (<a href=\"https://redirect.github.com/shivammathur/setup-php/issues/762\">#762</a>)</h3>\n<p>Added support for PHP <code>8.4.0-dev</code> from the master branch of <a href=\"https://github.com/php/php-src\"><code>php/php-src</code></a> for all supported OS.\n<strong>Note</strong>: PHP <code>8.3.0-dev</code> is now built from the new <a href=\"https://github.com/php/php-src/tree/PHP-8.3\"><code>PHP-8.3</code></a> branch.</p>\n<pre lang=\"yaml\"><code>- name: Setup PHP\n  uses: shivammathur/setup-php@v2\n  with:\n    php-version: '8.4'\n</code></pre>\n<h2>Fixes</h2>\n<h3>Blackfire Player</h3>\n<p>Resolved issues affecting the <code>blackfire-player</code> on Linux and macOS. It now installs the <code>uuid</code> extension that is required for the tool.\nDropped support for it on Windows as <code>uuid</code> extension is not available for the OS.</p>\n<pre lang=\"yaml\"><code>- name: Setup PHP\n  uses: shivammathur/setup-php@v2\n  with:\n    tools: blackfire-player\n</code></pre>\n<h2>Updates</h2>\n<h3>Update actions/checkout</h3>\n<p>Updated the use of <code>actions/checkout</code> to v4 in the documentation and workflows.</p>\n<pre lang=\"yaml\"><code>- name: Checkout\n  uses: actions/checkout@v4\n</code></pre>\n<h3>Update Node.js Version</h3>\n<p><strong>Note</strong>: Node.js 16 reached End-of-Life on 2023-09-11 (<a href=\"https://nodejs.dev/en/about/releases/\">Ref</a>).</p>\n<p>Updated <code>action.yml</code> to use the <code>node20</code> binary. If you use <code>setup-php</code> on a self-hosted runner, please make sure it is <a href=\"https://github.com/actions/runner/releases/tag/v2.308.0\">v2.308.0</a> or newer to use this release or the major version tag <code>v2</code>.</p>\n<h3>Node.js Dependencies</h3>\n<!-- raw HTML omitted -->\n</blockquote>\n<p>... (truncated)</p>\n</details>\n<details>\n<summary>Commits</summary>\n<ul>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/7fdd3ece872ec7ec4c098ae5ab7637d5e0a96067\"><code>7fdd3ec</code></a> Fix blackfire-player on Linux and macOS</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/0de5aa91400e2db529648700b926d7aadd90e9fa\"><code>0de5aa9</code></a> Bump version to 2.26.0</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/a6e0b1404f31fa05f9b714a9a22fdff096e0a9ea\"><code>a6e0b14</code></a> Bump Node.js dependencies</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/5d259c66b1a041c1f8f934fb0e75bfaed72edd03\"><code>5d259c6</code></a> Bump node version to 20 in action.yml</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/62078293612f15211cd9f3e4fb2c36776c1d8742\"><code>6207829</code></a> Update use of actions/checkout to v4</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/319feb83c2cac73226f628f88f3871021be36bbd\"><code>319feb8</code></a> Add support to install sqlsrv and pdo_sqlsrv from GitHub releases</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/661ad4bf75a922a7dace4e84776dc0666997484b\"><code>661ad4b</code></a> Fix enabling latest pecl extensions</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/04c15e2314eb2fe14d9c72a4980e5de39bbe586c\"><code>04c15e2</code></a> Remove hardcoded latest version for sqlsrv and pdo_sqlsrv</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/5aa416d77b0ac6a16af87d8bfc23819288844fd0\"><code>5aa416d</code></a> Merge pull request <a href=\"https://redirect.github.com/shivammathur/setup-php/issues/766\">#766</a> from GrahamCampbell/patch-1</li>\n<li><a href=\"https://github.com/shivammathur/setup-php/commit/a9a661ccd431b88b57d08869e0f11f98ecd63033\"><code>a9a661c</code></a> Use sqlsvr 5.11.1 on PHP 8</li>\n<li>Additional commits viewable in <a href=\"https://github.com/shivammathur/setup-php/compare/72ae4ccbe57f82bbe08411e84e2130bd4ba1c10f...7fdd3ece872ec7ec4c098ae5ab7637d5e0a96067\">compare view</a></li>\n</ul>\n</details>\n<br />\n\n\n[![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=shivammathur/setup-php&package-manager=github_actions&previous-version=2.25.5&new-version=2.26.0)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)\n\nDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.\n\n[//]: # (dependabot-automerge-start)\n[//]: # (dependabot-automerge-end)\n\n---\n\n<details>\n<summary>Dependabot commands and options</summary>\n<br />\n\nYou can trigger Dependabot actions by commenting on this PR:\n- `@dependabot rebase` will rebase this PR\n- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it\n- `@dependabot merge` will merge this PR after your CI passes on it\n- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it\n- `@dependabot cancel merge` will cancel a previously requested merge and block automerging\n- `@dependabot reopen` will reopen this PR if it is closed\n- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually\n- `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency\n- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)\n- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)\n\n\n</details>",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54464/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54437",
+		"id": 1894957653,
+		"node_id": "PR_kwDOBNHdeM5aQhZz",
+		"number": 54437,
+		"title": "[RNMobile] Upgrade `compileSdkVersion` to 34 (Android)",
+		"user": {
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
+				"default": false,
+				"description": "Issues or PRs related to build tooling"
+			},
+			{
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
+				"default": false,
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "fluiddot",
+				"id": 14905380,
+				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/fluiddot",
+				"html_url": "https://github.com/fluiddot",
+				"followers_url": "https://api.github.com/users/fluiddot/followers",
+				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+				"repos_url": "https://api.github.com/users/fluiddot/repos",
+				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 1,
+		"created_at": "2023-09-13T17:26:56Z",
+		"updated_at": "2023-09-25T12:06:57Z",
+		"closed_at": "2023-09-25T12:06:29Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54437",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54437",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54437.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54437.patch",
+			"merged_at": "2023-09-25T12:06:29Z"
+		},
+		"body": "Related PRs:\r\n* https://github.com/wordpress-mobile/gutenberg-mobile/pull/6196\r\n* https://github.com/wordpress-mobile/WordPress-Android/pull/19182\r\n\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nUpgrades the `compileSdkVersion` to 34 as part of the support for Android 14.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nCloses https://github.com/wordpress-mobile/gutenberg-mobile/issues/6142.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nUpdates the value in all references of `compileSdkVersion`:\r\n- `react-native-aztec`\r\n- `react-native-bridge`\r\n- `react-native-editor`\r\n\r\nBump `AztecEditor-Android` version to `1.8.0`, which also uses version 34 of `compileSdkVersion`.\r\n\r\n**⚠️ NOTE:** In past PRs where we upgraded Android ([example](https://github.com/WordPress/gutenberg/pull/50731)), we also updated the React Native third-party libraries:\r\n- Libraries published via [react-native-libraries-publisher](https://github.com/wordpress-mobile/react-native-libraries-publisher/blob/2746ac55f78dd540efb2fa8089f1e05a2f7899a0/package.json#L3-L12)\r\n- [react-native-slider](https://github.com/wordpress-mobile/react-native-slider)\r\n- [react-native-video](https://github.com/wordpress-mobile/react-native-video)\r\n\r\nI assume that since we are only updating the `compileSdkVersion` and not `targetSdkVersion`, it's safe to leave them with an older version. But once we fully upgrade to Android 14, we'd need to update them.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n* Observe that all CI jobs pass.\r\n* Smoke test the editor on Android.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437/reactions",
+			"total_count": 2,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 2,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54437/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54408",
+		"id": 1893604996,
+		"node_id": "PR_kwDOBNHdeM5aL6kq",
+		"number": 54408,
+		"title": "HTML block: Fix accessibility issues on back-end",
+		"user": {
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			},
+			{
+				"id": 1086171268,
+				"node_id": "MDU6TGFiZWwxMDg2MTcxMjY4",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback",
+				"name": "Needs Accessibility Feedback",
+				"color": "ffbcbd",
+				"default": false,
+				"description": "Need input from accessibility"
+			},
+			{
+				"id": 1101519982,
+				"node_id": "MDU6TGFiZWwxMTAxNTE5OTgy",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20HTML",
+				"name": "[Block] HTML",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the the HTML Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "alexstine",
+				"id": 13755480,
+				"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/alexstine",
+				"html_url": "https://github.com/alexstine",
+				"followers_url": "https://api.github.com/users/alexstine/followers",
+				"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+				"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+				"organizations_url": "https://api.github.com/users/alexstine/orgs",
+				"repos_url": "https://api.github.com/users/alexstine/repos",
+				"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/alexstine/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-13T02:18:36Z",
+		"updated_at": "2023-09-20T14:46:27Z",
+		"closed_at": "2023-09-20T14:45:59Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54408",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54408",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54408.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54408.patch",
+			"merged_at": "2023-09-20T14:45:59Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nFixes back-end accessibility of the HTML block.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nMy PR does not fully fix this issue but I make good progress.\r\n\r\nhttps://github.com/WordPress/gutenberg/issues/46846\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n- Manage focus when HTML toolbar button is selected.\r\n- Manage focus when Preview button is selected.\r\n- Announce via description instructions on how to use the preview when it is selected.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Insert a HTML block.\r\n2. Type some code.\r\n3. Press Alt+F10 to focus the toolbar.\r\n4. Select Preview.\r\n5. Notice how focus moves to the block wrapper and you should be able to see the `aria-describedby` attribute which matches the ID of the block description.\r\n6. Press Alt+F10.\r\n7. Select HTML.\r\n8. Focus should now be placed in the HTML text area.\r\n\r\n### Notes\r\n\r\nWondering why the focus return from toolbar does not work for this block. Might be worth investigating this so focus does not need to be managed in the block itself.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54408/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54382",
+		"id": 1892520419,
+		"node_id": "PR_kwDOBNHdeM5aIUs_",
+		"number": 54382,
+		"title": "[RNMobile] Limit inner blocks nesting depth to avoid call stack size exceeded crash",
+		"user": {
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
+				"default": false,
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 3639254262,
+				"node_id": "LA_kwDOBNHdeM7Y6pz2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20Automation",
+				"name": "Mobile App - Automation",
+				"color": "669206",
+				"default": false,
+				"description": "Label used to initiate Mobile App PR Automation"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "fluiddot",
+			"id": 14905380,
+			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/fluiddot",
+			"html_url": "https://github.com/fluiddot",
+			"followers_url": "https://api.github.com/users/fluiddot/followers",
+			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+			"repos_url": "https://api.github.com/users/fluiddot/repos",
+			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "fluiddot",
+				"id": 14905380,
+				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/fluiddot",
+				"html_url": "https://github.com/fluiddot",
+				"followers_url": "https://api.github.com/users/fluiddot/followers",
+				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
+				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
+				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
+				"repos_url": "https://api.github.com/users/fluiddot/repos",
+				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+				"type": "User",
+				"site_admin": false
+			}
+		],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 9,
+		"created_at": "2023-09-12T13:24:15Z",
+		"updated_at": "2023-10-06T14:24:11Z",
+		"closed_at": "2023-09-26T08:30:51Z",
+		"author_association": "CONTRIBUTOR",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54382",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54382",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54382.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54382.patch",
+			"merged_at": "2023-09-26T08:30:51Z"
+		},
+		"body": "**Related PRs:**\r\n* https://github.com/wordpress-mobile/gutenberg-mobile/pull/6191\r\n* https://github.com/wordpress-mobile/WordPress-Android/pull/19163\r\n* https://github.com/wordpress-mobile/WordPress-iOS/pull/21553\r\n\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nLimits `InnerBlock` component to render blocks that are deeply nested, in order to prevent a crash related to exceeding the maximum call stack trace set by the Hermes engine.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nFixes https://github.com/wordpress-mobile/WordPress-Android/issues/18750.\r\nFixes https://github.com/wordpress-mobile/gutenberg-mobile/issues/6123\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\nIn the `InnerBlocks` component we check the number of parent blocks associated with the block, this determines the nesting depth level. If it exceeds a threshold defined [here](https://github.com/WordPress/gutenberg/blob/e028e9ada1c06cb8e31e9b848e492ad37422ba65/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js#L78-L82), we render a warning message box instead of rendering the inner blocks.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/e028e9ada1c06cb8e31e9b848e492ad37422ba65/packages/block-editor/src/components/inner-blocks/index.native.js#L130-L139\r\n\r\nAdditionally, I extracted the UI elements used in [the \"missing\" block](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/missing/edit.native.js) (i.e. the block used to render unsupported blocks) into a separate component (`BlockFallbackWebVersion`). In a separate PR, I'll update that block to use this new component.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n#### The warning IS NOT displayed when NOT exceeding the threshold\r\n1. In the web version of the editor, create a post with the following HTML:\r\n\r\n<details><summary>Deeply nested block structure (8 levels)</summary>\r\n\r\n```\r\n<!-- wp:heading -->\r\n<h2 class=\"wp-block-heading\">Group block</h2>\r\n<!-- /wp:heading -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#cb6767\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#cb6767\">Level 1 </p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#b89759\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#b89759\">Level 2</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#816531\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#816531\">Level 3</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#86c64d\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#86c64d\">Level 4</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b873\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b873\">Level 5</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b8b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b8b8\">Level 6</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5880b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5880b8\">Level 7</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5870b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5870b8\">Level 8</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:paragraph -->\r\n<p></p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n```\r\n\r\n</details> \r\n\r\n2. Open the post in the app.\r\n3. Scroll down the content.\r\n4. Observe that all blocks are rendered and that no warning message box is displayed.\r\n\r\n#### The warning IS displayed when exceeding the limit\r\n1. In the web version of the editor, create a post with the following HTML in a WPCOM site:\r\n\r\n<details><summary>Deeply nested block structure (20 levels)</summary>\r\n\r\n```\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#cb6767\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#cb6767\">Level 1 </p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#b89759\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#b89759\">Level 2</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#816531\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#816531\">Level 3</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#86c64d\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#86c64d\">Level 4</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b873\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b873\">Level 5</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b8b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b8b8\">Level 6</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5880b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5880b8\">Level 7</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5870b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5870b8\">Level 8</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5877b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5877b8\">Level 9</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 10</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 11</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 12</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 13</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 14</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 15</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 16</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 17</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 18</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 19</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 20</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:paragraph -->\r\n<p></p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n```\r\n\r\n</details>\r\n\r\n2. Open the post in the app.\r\n3. Observe that no crash is produced.\r\n4. Scroll down the content.\r\n5. Observe that starting at level 10, a warning message box is displayed within the block list.\r\n6. Tap on the warning twice.\r\n7. Observe that a bottom sheet is displayed explaining the problem.\r\n8. Observe that two options are presented, one for editing using the web editor and another one for ungrouping the block.\r\n9. Tap on the \"Edit using web editor\" option.\r\n10. Observe that UBE (Unsupported Block Editor) opens with the content that is not rendered in the native editor.\r\n11. Modify the content and tap on \"Continue\".\r\n12. Preview the post and observe the post reflects recent modifications.\r\n13. Back in the editor tap on the warning message box again.\r\n14. Tap on the \"Ungroup block\" option.\r\n15. Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.\r\n16. Observe that the warning message box is still present.\r\n17. Tap on the warning message box and then the \"Dismiss\" option.\r\n18. Observe that the bottom sheet closes.\r\n19. Save the post.\r\n20. Observe that no crash is produced.\r\n\r\n#### Option for editing using the web editor is not present in self-hosted sites without Jetpack\r\n1. In the web version of the editor, create a post with the following HTML in a self-hosted site without Jetpack:\r\n\r\n<details><summary>Deeply nested block structure (20 levels)</summary>\r\n\r\n```\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#cb6767\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#cb6767\">Level 1 </p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#b89759\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#b89759\">Level 2</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#816531\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#816531\">Level 3</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#86c64d\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#86c64d\">Level 4</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b873\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b873\">Level 5</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b8b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b8b8\">Level 6</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5880b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5880b8\">Level 7</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5870b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5870b8\">Level 8</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5877b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5877b8\">Level 9</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 10</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 11</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 12</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 13</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 14</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 15</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 16</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 17</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 18</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 19</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 20</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:paragraph -->\r\n<p></p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n```\r\n\r\n</details>\r\n\r\n2. Open the post in the app.\r\n3. Observe that no crash is produced.\r\n4. Scroll down the content.\r\n5. Observe that starting at level 10, a warning message box is displayed within the block list.\r\n6. Tap on the warning twice.\r\n7. Observe that a bottom sheet is displayed explaining the problem.\r\n8. Observe that the message doesn't mention the web editor.\r\n9. Observe that only the \"Ungroup block\" option is presented.\r\n10. Tap on the \"Ungroup block\" option.\r\n11. Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.\r\n12. Observe that the warning message box is still present.\r\n13. Tap on the warning message box and then the \"Dismiss\" option.\r\n14. Observe that the bottom sheet closes.\r\n15. Save the post.\r\n16. Observe that no crash is produced.\r\n\r\n#### Self-hosted site with Jetpack\r\n\r\n1. In the web version of the editor, create a post with the following HTML in a self-hosted site with Jetpack:\r\n\r\n<details><summary>Deeply nested block structure (20 levels)</summary>\r\n\r\n```\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#cb6767\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#cb6767\">Level 1 </p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#b89759\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#b89759\">Level 2</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#816531\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#816531\">Level 3</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#86c64d\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#86c64d\">Level 4</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b873\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b873\">Level 5</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#58b8b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#58b8b8\">Level 6</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5880b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5880b8\">Level 7</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5870b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5870b8\">Level 8</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5877b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5877b8\">Level 9</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 10</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 11</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 12</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 13</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 14</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 15</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 16</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 17</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 18</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 19</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:group {\"layout\":{\"type\":\"constrained\"}} -->\r\n<div class=\"wp-block-group\"><!-- wp:paragraph {\"style\":{\"color\":{\"background\":\"#5873b8\"}}} -->\r\n<p class=\"has-background\" style=\"background-color:#5873b8\">Level 20</p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n\r\n<!-- wp:paragraph -->\r\n<p></p>\r\n<!-- /wp:paragraph --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group --></div>\r\n<!-- /wp:group -->\r\n```\r\n\r\n</details>\r\n\r\n2. Go to Jetpack/Settings and uncheck the option \"Allow users to log in to this site using WordPress.com accounts\" under the \"WordPress.com login\" section.\r\n3. Open the post in the app.\r\n4. Observe that no crash is produced.\r\n5. Scroll down the content.\r\n6. Observe that starting at level 10, a warning message box is displayed within the block list.\r\n7. Tap on the warning twice.\r\n8. Observe that a bottom sheet is displayed explaining the problem.\r\n9. Observe that a note is included mentioning to allow `WordPress.com` login to edit using UBE.\r\n10. Tap on the \"Open Jetpack Security settings\" option.\r\n11. Enable \"Allow `WordPress.com` login\".\r\n12. Tap on the warning message box again.\r\n13. Observe that the option \"Edit using web editor\" is now presented.\r\n14. Tap on the \"Edit using web editor\" option.\r\n15. Observe that UBE (Unsupported Block Editor) opens with the content that is not rendered in the native editor.\r\n16. Modify the content and tap on \"Continue\".\r\n17. Preview the post and observe the post reflects recent modifications.\r\n18. Back in the editor tap on the warning message box again.\r\n19. Tap on the \"Ungroup block\" option.\r\n20. Observe that a new block appears in the block list. This block should be the one that wasn't previously rendered due to being below level 10.\r\n21. Observe that the warning message box is still present.\r\n22. Tap on the warning message box and then the \"Dismiss\" option.\r\n23. Observe that the bottom sheet closes.\r\n24. Save the post.\r\n25. Observe that no crash is produced.\r\n\r\n#### Unsupported Block Editing\r\n\r\nSince we are using UBE in the warning message box, it would be great to cover [some of the test cases of that feature](https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/unsupported-block-editing.md).\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\n| Light mode | Dark mode |\r\n|--------|--------|\r\n| <img width=300 src=https://github.com/WordPress/gutenberg/assets/14905380/36b3addc-8adb-4921-a359-a5f40b498f58> | <img width=300 src=https://github.com/WordPress/gutenberg/assets/14905380/3da91b38-522b-4f00-8381-fd1bbda1849d> |\r\n| <img width=300 src=https://github.com/WordPress/gutenberg/assets/14905380/d3f68f1c-f62c-4574-a8a4-0c093cad2f47> | <img width=300 src=https://github.com/WordPress/gutenberg/assets/14905380/c6fc40ed-bf58-4bdf-86c2-45a40d9b1066> | \r\n\r\n| WPCOM site | Self-hosted site without Jetpack |\r\n|--------|--------|\r\n| <video src=https://github.com/WordPress/gutenberg/assets/14905380/afc68da1-d6e0-4558-b7fb-c051e181ceec> | <video src=https://github.com/WordPress/gutenberg/assets/14905380/aff8d09c-c947-4d7f-a45b-d5c226dcfb42> | ",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54382/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54376",
+		"id": 1892044282,
+		"node_id": "PR_kwDOBNHdeM5aGrrh",
+		"number": 54376,
+		"title": "Mobile - Add support visual test themes",
+		"user": {
+			"login": "geriux",
+			"id": 4885740,
+			"node_id": "MDQ6VXNlcjQ4ODU3NDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4885740?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/geriux",
+			"html_url": "https://github.com/geriux",
+			"followers_url": "https://api.github.com/users/geriux/followers",
+			"following_url": "https://api.github.com/users/geriux/following{/other_user}",
+			"gists_url": "https://api.github.com/users/geriux/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/geriux/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/geriux/subscriptions",
+			"organizations_url": "https://api.github.com/users/geriux/orgs",
+			"repos_url": "https://api.github.com/users/geriux/repos",
+			"events_url": "https://api.github.com/users/geriux/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/geriux/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
+				"default": false,
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
+			},
+			{
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
+				"default": false,
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-12T09:09:58Z",
+		"updated_at": "2023-09-29T16:38:03Z",
+		"closed_at": "2023-09-29T16:37:28Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54376",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54376",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54376.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54376.patch",
+			"merged_at": "2023-09-29T16:37:28Z"
+		},
+		"body": "**Related PRs:**\r\n- https://github.com/wordpress-mobile/gutenberg-mobile/pull/6187\r\n\r\n## What?\r\nThis PR adds support to test themes in our E2E Visual testing environment.\r\n\r\n## Why?\r\nTo prevent regressions related to theme colors, font size, and line height customization.\r\n\r\n## How?\r\nThis is a follow-up of https://github.com/WordPress/gutenberg/pull/53434 that added the functionality to pass arguments during app launch.\r\n\r\nWe are adding `rawStyles` and `rawFeatures` in `initializeEditor` that then passes them through the `launchApp` util.\r\n\r\nIt also includes the native changes needed so the demo app supports these new arguments.\r\n\r\n## Testing Instructions\r\nCI checks should pass.\r\n\r\n### Testing Instructions for Keyboard\r\nN/A\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 1,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54376/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54339",
+		"id": 1889643004,
+		"node_id": "PR_kwDOBNHdeM5Z-iVw",
+		"number": 54339,
+		"title": "Fix overwriting of published post meta when previewing footnote changes",
+		"user": {
+			"login": "adamsilverstein",
+			"id": 2676022,
+			"node_id": "MDQ6VXNlcjI2NzYwMjI=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/2676022?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/adamsilverstein",
+			"html_url": "https://github.com/adamsilverstein",
+			"followers_url": "https://api.github.com/users/adamsilverstein/followers",
+			"following_url": "https://api.github.com/users/adamsilverstein/following{/other_user}",
+			"gists_url": "https://api.github.com/users/adamsilverstein/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/adamsilverstein/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/adamsilverstein/subscriptions",
+			"organizations_url": "https://api.github.com/users/adamsilverstein/orgs",
+			"repos_url": "https://api.github.com/users/adamsilverstein/repos",
+			"events_url": "https://api.github.com/users/adamsilverstein/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/adamsilverstein/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
+				"default": false,
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 5654261232,
+				"node_id": "LA_kwDOBNHdeM8AAAABUQUt8A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Footnotes",
+				"name": "[Block] Footnotes",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Footnotes Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": null,
+		"assignees": [],
+		"milestone": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
+			"description": null,
+			"creator": {
+				"login": "github-actions[bot]",
+				"id": 41898282,
+				"node_id": "MDM6Qm90NDE4OTgyODI=",
+				"avatar_url": "https://avatars.githubusercontent.com/in/15368?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/github-actions%5Bbot%5D",
+				"html_url": "https://github.com/apps/github-actions",
+				"followers_url": "https://api.github.com/users/github-actions%5Bbot%5D/followers",
+				"following_url": "https://api.github.com/users/github-actions%5Bbot%5D/following{/other_user}",
+				"gists_url": "https://api.github.com/users/github-actions%5Bbot%5D/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/github-actions%5Bbot%5D/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/github-actions%5Bbot%5D/subscriptions",
+				"organizations_url": "https://api.github.com/users/github-actions%5Bbot%5D/orgs",
+				"repos_url": "https://api.github.com/users/github-actions%5Bbot%5D/repos",
+				"events_url": "https://api.github.com/users/github-actions%5Bbot%5D/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/github-actions%5Bbot%5D/received_events",
+				"type": "Bot",
+				"site_admin": false
+			},
+			"open_issues": 0,
+			"closed_issues": 160,
+			"state": "open",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
+			"closed_at": null
+		},
+		"comments": 3,
+		"created_at": "2023-09-11T04:37:55Z",
+		"updated_at": "2023-10-05T11:11:58Z",
+		"closed_at": "2023-09-27T05:13:08Z",
+		"author_association": "MEMBER",
+		"active_lock_reason": null,
+		"draft": false,
+		"pull_request": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54339",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54339",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54339.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54339.patch",
+			"merged_at": "2023-09-27T05:13:08Z"
+		},
+		"body": "Fixes bug discovered in https://github.com/WordPress/gutenberg/pull/52988\r\n\r\n<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54339/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
+	},
+	{
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322",
+		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54322",
+		"id": 1888421866,
+		"node_id": "PR_kwDOBNHdeM5Z6tSD",
+		"number": 54322,
+		"title": "Table of contents block accessibility improvements",
+		"user": {
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 546517042,
+				"node_id": "MDU6TGFiZWw1NDY1MTcwNDI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Focus]%20Accessibility%20(a11y)",
+				"name": "[Focus] Accessibility (a11y)",
+				"color": "efde5d",
+				"default": false,
+				"description": "Changes that impact accessibility and need corresponding review (e.g. markup changes)."
+			},
+			{
+				"id": 1086171268,
+				"node_id": "MDU6TGFiZWwxMDg2MTcxMjY4",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback",
+				"name": "Needs Accessibility Feedback",
+				"color": "ffbcbd",
+				"default": false,
+				"description": "Need input from accessibility"
+			},
+			{
+				"id": 2770139461,
+				"node_id": "MDU6TGFiZWwyNzcwMTM5NDYx",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Table%20of%20contents",
+				"name": "[Block] Table of contents",
+				"color": "6767e5",
+				"default": false,
+				"description": "Affects the Table of contents Block"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "alexstine",
+			"id": 13755480,
+			"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+			"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/alexstine",
+			"html_url": "https://github.com/alexstine",
+			"followers_url": "https://api.github.com/users/alexstine/followers",
+			"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+			"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+			"organizations_url": "https://api.github.com/users/alexstine/orgs",
+			"repos_url": "https://api.github.com/users/alexstine/repos",
+			"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/alexstine/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"assignees": [
+			{
+				"login": "alexstine",
+				"id": 13755480,
+				"node_id": "MDQ6VXNlcjEzNzU1NDgw",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13755480?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/alexstine",
+				"html_url": "https://github.com/alexstine",
+				"followers_url": "https://api.github.com/users/alexstine/followers",
+				"following_url": "https://api.github.com/users/alexstine/following{/other_user}",
+				"gists_url": "https://api.github.com/users/alexstine/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/alexstine/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/alexstine/subscriptions",
+				"organizations_url": "https://api.github.com/users/alexstine/orgs",
+				"repos_url": "https://api.github.com/users/alexstine/repos",
+				"events_url": "https://api.github.com/users/alexstine/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/alexstine/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -12998,122 +21914,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-20T14:39:26Z",
-		"updated_at": "2021-07-30T08:47:57Z",
-		"closed_at": "2021-07-30T08:47:30Z",
+		"comments": 8,
+		"created_at": "2023-09-08T22:21:13Z",
+		"updated_at": "2023-09-27T01:01:44Z",
+		"closed_at": "2023-09-27T01:01:20Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33573",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33573",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33573.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33573.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nIn https://github.com/WordPress/gutenberg/pull/33229 we added automation to the release tooling to attempt to auto-categorize the grouping of PRs by \"feature\".\r\n\r\nThis PR updates the docs to reflect that and to add information on exactly how you should look to curate the changelog in response to what the script will output.\r\n\r\n## How has this been tested?\r\nReading and checking for accuracy.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54322",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54322",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54322.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54322.patch",
+			"merged_at": "2023-09-27T01:01:20Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\n\r\nThis PR fixes some accessibility issues in the table of contents block, front-end and back-end.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\nAccessibility is important.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n- Remove inert.\r\n- Disable the ability to click links in the back-end block.\r\n- Add `aria-label` to front-end `<nav>` tag.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Insert a Table of Contents block.\r\n2. Verify the block is keyboard accessible with arrow keys.\r\n3. Verify clicking the links is disabled.\r\n4. Verify that screen readers get a disabled announcement through `aria-disabled=\"true\"` attribute.\r\n5. Check the front end for the `aria-label=\"Table of Contents\"` attribute.\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\nVerify in the back-end that Up and Down Arrow keys allow you to navigate the block content.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322/reactions",
+			"total_count": 3,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 3,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54322/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33513",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33513/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33513/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33513/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33513",
-		"id": 946389939,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjkxNTcxMzgw",
-		"number": 33513,
-		"title": "Correct `function_exists()` check typo introduced in #33331.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54151",
+		"id": 1880250729,
+		"node_id": "PR_kwDOBNHdeM5Ze7UQ",
+		"number": 54151,
+		"title": "[Mobile] - GutenbergDemo app: Enable Hermes",
 		"user": {
-			"login": "desrosj",
-			"id": 359867,
-			"node_id": "MDQ6VXNlcjM1OTg2Nw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/359867?v=4",
+			"login": "geriux",
+			"id": 4885740,
+			"node_id": "MDQ6VXNlcjQ4ODU3NDA=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/4885740?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/desrosj",
-			"html_url": "https://github.com/desrosj",
-			"followers_url": "https://api.github.com/users/desrosj/followers",
-			"following_url": "https://api.github.com/users/desrosj/following{/other_user}",
-			"gists_url": "https://api.github.com/users/desrosj/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/desrosj/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/desrosj/subscriptions",
-			"organizations_url": "https://api.github.com/users/desrosj/orgs",
-			"repos_url": "https://api.github.com/users/desrosj/repos",
-			"events_url": "https://api.github.com/users/desrosj/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/desrosj/received_events",
+			"url": "https://api.github.com/users/geriux",
+			"html_url": "https://github.com/geriux",
+			"followers_url": "https://api.github.com/users/geriux/followers",
+			"following_url": "https://api.github.com/users/geriux/following{/other_user}",
+			"gists_url": "https://api.github.com/users/geriux/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/geriux/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/geriux/subscriptions",
+			"organizations_url": "https://api.github.com/users/geriux/orgs",
+			"repos_url": "https://api.github.com/users/geriux/repos",
+			"events_url": "https://api.github.com/users/geriux/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/geriux/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
+				"id": 982506020,
+				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
+				"name": "Mobile App - i.e. Android or iOS",
+				"color": "a3ef7a",
+				"default": false,
+				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+			},
+			{
+				"id": 1789344476,
+				"node_id": "MDU6TGFiZWwxNzg5MzQ0NDc2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Feature",
+				"name": "[Type] Feature",
+				"color": "2e8daa",
 				"default": false,
-				"description": "An existing feature is broken."
+				"description": "New feature to highlight in changelogs."
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "desrosj",
-			"id": 359867,
-			"node_id": "MDQ6VXNlcjM1OTg2Nw==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/359867?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/desrosj",
-			"html_url": "https://github.com/desrosj",
-			"followers_url": "https://api.github.com/users/desrosj/followers",
-			"following_url": "https://api.github.com/users/desrosj/following{/other_user}",
-			"gists_url": "https://api.github.com/users/desrosj/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/desrosj/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/desrosj/subscriptions",
-			"organizations_url": "https://api.github.com/users/desrosj/orgs",
-			"repos_url": "https://api.github.com/users/desrosj/repos",
-			"events_url": "https://api.github.com/users/desrosj/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/desrosj/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "desrosj",
-				"id": 359867,
-				"node_id": "MDQ6VXNlcjM1OTg2Nw==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/359867?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/desrosj",
-				"html_url": "https://github.com/desrosj",
-				"followers_url": "https://api.github.com/users/desrosj/followers",
-				"following_url": "https://api.github.com/users/desrosj/following{/other_user}",
-				"gists_url": "https://api.github.com/users/desrosj/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/desrosj/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/desrosj/subscriptions",
-				"organizations_url": "https://api.github.com/users/desrosj/orgs",
-				"repos_url": "https://api.github.com/users/desrosj/repos",
-				"events_url": "https://api.github.com/users/desrosj/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/desrosj/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13136,131 +22037,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
 		"comments": 2,
-		"created_at": "2021-07-16T15:23:00Z",
-		"updated_at": "2021-08-05T13:18:11Z",
-		"closed_at": "2021-08-05T13:15:38Z",
-		"author_association": "CONTRIBUTOR",
+		"created_at": "2023-09-04T13:06:13Z",
+		"updated_at": "2023-09-28T10:47:23Z",
+		"closed_at": "2023-09-28T10:46:56Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33513",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33513",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33513.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33513.patch"
-		},
-		"body": "## Description\r\nThis corrects a `function_exists()` check introduced in #33331.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54151",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54151",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54151.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54151.patch",
+			"merged_at": "2023-09-28T10:46:56Z"
+		},
+		"body": "**Related PRs:**\r\n- https://github.com/wordpress-mobile/gutenberg-mobile/pull/6154\r\n\r\n## What?\r\nThis PR adds support to use Hermes on the iOS Demo App.\r\n\r\n## Why?\r\nWe are already using Hermes in the host iOS app, so it makes sense to use it in the Demo app as well, as this is where we run our E2E tests and typically build some features. This approach ensures that we test and develop using the same engine.\r\n\r\n## How?\r\nIt updates the bundle scripts to use Hermes functionalities like bytecode bundles.\r\n\r\nRemoves the Reanimated patch since it's not needed anymore.\r\n\r\nDue to the cache we have for npm modules, it updates to a minor version of `react-native-url-polyfill` to trigger a new installation of npm modules. This update includes some fixes and does not introduce any breaking changes.\r\n\r\n## Testing Instructions\r\nCI checks should pass.\r\n\r\nLocal build should run with metro.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\nN/A",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54151/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33426",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33426/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33426/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33426/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33426",
-		"id": 944506962,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njg5OTgwNDk2",
-		"number": 33426,
-		"title": "[RNMobile] Embed block: Implement specific Embed preview",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54110",
+		"id": 1877364093,
+		"node_id": "PR_kwDOBNHdeM5ZVgx0",
+		"number": 54110,
+		"title": "Adds 'nofollow' setting to Button block",
 		"user": {
-			"login": "fluiddot",
-			"id": 14905380,
-			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"login": "bangank36",
+			"id": 10071857,
+			"node_id": "MDQ6VXNlcjEwMDcxODU3",
+			"avatar_url": "https://avatars.githubusercontent.com/u/10071857?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/fluiddot",
-			"html_url": "https://github.com/fluiddot",
-			"followers_url": "https://api.github.com/users/fluiddot/followers",
-			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-			"repos_url": "https://api.github.com/users/fluiddot/repos",
-			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"url": "https://api.github.com/users/bangank36",
+			"html_url": "https://github.com/bangank36",
+			"followers_url": "https://api.github.com/users/bangank36/followers",
+			"following_url": "https://api.github.com/users/bangank36/following{/other_user}",
+			"gists_url": "https://api.github.com/users/bangank36/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/bangank36/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/bangank36/subscriptions",
+			"organizations_url": "https://api.github.com/users/bangank36/orgs",
+			"repos_url": "https://api.github.com/users/bangank36/repos",
+			"events_url": "https://api.github.com/users/bangank36/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/bangank36/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 1112969457,
+				"node_id": "MDU6TGFiZWwxMTEyOTY5NDU3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Buttons",
+				"name": "[Block] Buttons",
+				"color": "6767e5",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Affects the Buttons Block"
 			},
 			{
-				"id": 1078477350,
-				"node_id": "MDU6TGFiZWwxMDc4NDc3MzUw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Embed",
-				"name": "[Block] Embed",
-				"color": "6767e5",
+				"id": 1789344476,
+				"node_id": "MDU6TGFiZWwxNzg5MzQ0NDc2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Feature",
+				"name": "[Type] Feature",
+				"color": "2e8daa",
+				"default": false,
+				"description": "New feature to highlight in changelogs."
+			},
+			{
+				"id": 1838782557,
+				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
+				"name": "[Feature] Link Editing",
+				"color": "fbca04",
 				"default": false,
-				"description": ""
+				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "fluiddot",
-			"id": 14905380,
-			"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+			"login": "bangank36",
+			"id": 10071857,
+			"node_id": "MDQ6VXNlcjEwMDcxODU3",
+			"avatar_url": "https://avatars.githubusercontent.com/u/10071857?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/fluiddot",
-			"html_url": "https://github.com/fluiddot",
-			"followers_url": "https://api.github.com/users/fluiddot/followers",
-			"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-			"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-			"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-			"repos_url": "https://api.github.com/users/fluiddot/repos",
-			"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+			"url": "https://api.github.com/users/bangank36",
+			"html_url": "https://github.com/bangank36",
+			"followers_url": "https://api.github.com/users/bangank36/followers",
+			"following_url": "https://api.github.com/users/bangank36/following{/other_user}",
+			"gists_url": "https://api.github.com/users/bangank36/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/bangank36/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/bangank36/subscriptions",
+			"organizations_url": "https://api.github.com/users/bangank36/orgs",
+			"repos_url": "https://api.github.com/users/bangank36/repos",
+			"events_url": "https://api.github.com/users/bangank36/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/bangank36/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "fluiddot",
-				"id": 14905380,
-				"node_id": "MDQ6VXNlcjE0OTA1Mzgw",
-				"avatar_url": "https://avatars.githubusercontent.com/u/14905380?v=4",
+				"login": "bangank36",
+				"id": 10071857,
+				"node_id": "MDQ6VXNlcjEwMDcxODU3",
+				"avatar_url": "https://avatars.githubusercontent.com/u/10071857?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/fluiddot",
-				"html_url": "https://github.com/fluiddot",
-				"followers_url": "https://api.github.com/users/fluiddot/followers",
-				"following_url": "https://api.github.com/users/fluiddot/following{/other_user}",
-				"gists_url": "https://api.github.com/users/fluiddot/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/fluiddot/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/fluiddot/subscriptions",
-				"organizations_url": "https://api.github.com/users/fluiddot/orgs",
-				"repos_url": "https://api.github.com/users/fluiddot/repos",
-				"events_url": "https://api.github.com/users/fluiddot/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/fluiddot/received_events",
+				"url": "https://api.github.com/users/bangank36",
+				"html_url": "https://github.com/bangank36",
+				"followers_url": "https://api.github.com/users/bangank36/followers",
+				"following_url": "https://api.github.com/users/bangank36/following{/other_user}",
+				"gists_url": "https://api.github.com/users/bangank36/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/bangank36/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/bangank36/subscriptions",
+				"organizations_url": "https://api.github.com/users/bangank36/orgs",
+				"repos_url": "https://api.github.com/users/bangank36/repos",
+				"events_url": "https://api.github.com/users/bangank36/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/bangank36/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13283,149 +22209,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 7,
-		"created_at": "2021-07-14T14:48:06Z",
-		"updated_at": "2021-08-11T11:42:39Z",
-		"closed_at": "2021-08-11T10:08:58Z",
+		"comments": 3,
+		"created_at": "2023-09-01T12:47:04Z",
+		"updated_at": "2023-09-21T12:12:52Z",
+		"closed_at": "2023-09-21T12:12:24Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33426",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33426",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33426.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33426.patch"
-		},
-		"body": "`gutenberg-mobile` PR: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3725\r\n`WordPress-iOS` PR: https://github.com/wordpress-mobile/WordPress-iOS/pull/16866\r\n`WordPress-Android` PR: https://github.com/wordpress-mobile/WordPress-Android/pull/15051\r\n\r\n<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nThis PR includes the `react-native-webview` native module to render the HTML of the embed preview.\r\n\r\nFollowing the implementation of the web version, a native version of the `SandBox` component has been implemented. In the following sections, I briefly describe the key points of this component and how it has been addressed for the native version.\r\n\r\n<details><summary><strong>Details</strong></summary>\r\n\r\n# Embed preview component\r\n\r\n## Interactive flag and overlay\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L45-L52\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L101-L108\r\n\r\n</details>\r\n\r\nThis is mainly used to show/hide an overlay view, as far as I checked, the purpose of this logic is to prevent the user to interact with the preview unless the block and the Iframe are focused. In native, this is not necessary as we can easily control the interaction via the `pointerEvents` prop of the `View` component and the `isSelected` prop.\r\n\r\n## Sandbox classnames\r\n\r\n**🔧  This will be addressed in this issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/3284**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L81-L85\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L100\r\n\r\n</details>\r\n\r\nI'm not sure if they're required in native, but it would be worth investigating it, maybe we would need them for the alignment.\r\n\r\n## `WpEmbedPreview` component\r\n\r\n**🔧  This will be addressed in this issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/3744.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L92-L93\r\n\r\n</details>\r\n\r\nThis PR doesn't support yet WordPress embeds.\r\n\r\n## Not previewable case\r\n\r\n**🔧  This will be addressed in this issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/3277**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/block-library/src/embed/embed-preview.js#L122-L138\r\n\r\n</details>\r\n\r\nWe're currently displaying the unavailable preview fallback, now that we support previews, we should update this component.\r\n\r\n# Sandbox component\r\n\r\n## [`FocusableIframe` component](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/focusable-iframe/index.js)\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L241-L249\r\n\r\n</details>\r\n\r\nThis component is mainly used in the web version to determine if the Iframe has been focused and notify the embed preview component. In the embed preview, the focus event is used for controlling the preview interaction, as we're going to control it in a different way, implementing this component won't be necessary for the native version.\r\n\r\n## Resize JS observer\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L16-L73\r\n\r\n</details>\r\n\r\nThis JS code is used to listen for size changes within the preview, initially, we can use the same version in native. The only tweak I introduced is the object used to notify upstream, on native is `ReactNativeWebView`.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/0d35c24bfd797185926e465eb040d935834e6454/packages/components/src/sandbox/index.native.js#L27\r\n\r\n## Iframe style\r\n\r\n**🔧  This will be addressed in this issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/3284**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L75-L96\r\n\r\n</details>\r\n\r\nThis is the style object used as the base style for the preview. I noticed that it references the class name `wp-has-aspect-ratio`, we should check what's the purpose of this and if required implement it in the native version.\r\n\r\n## `isFrameAccessible` function\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L110-L116\r\n\r\n</details>\r\n\r\nNot required because the webview component is always accessible.\r\n\r\n## [`trySandbox` function](https://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L118-L176)\r\n\r\n### `contentDocument` ref\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L123-L124\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L170-L175\r\n\r\n</details>\r\n\r\nIt's used for injecting the HTML to the IFrame in the web version, initially, it won't be necessary for the native version as we use the `source` prop of the `webview` component.\r\n\r\nHowever, I noticed that the `body` property is extracted from this value so we should investigate if it's required.\r\n\r\n**EDIT:** This is not required in the mobile version.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L128\r\n\r\n### `ownerDocument` ref - Language value\r\n\r\n**🔧  Being addressed in `rnmobile/embed-block-preview-locale` branch.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L139\r\n\r\n</details>\r\n\r\nUsed to extract the language from the browser so it's not necessary for the native version. For now, in the native version, the language is fixed to `en` but we should fetch it from the device via the locale.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/0d35c24bfd797185926e465eb040d935834e6454/packages/components/src/sandbox/index.native.js#L111-L112\r\n\r\n### `data-resizable-iframe-connected` attribute\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L126-L131\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L153\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L66\r\n\r\n</details>\r\n\r\nLooks like it's used to know if the resize observer has been initialized, we should investigate if it's required.\r\n\r\n**EDIT:** This is not required in the mobile version.\r\n\r\n### HTML Doc\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L137-L168\r\n\r\n</details>\r\n\r\nThis is the HTML injected into the webview, the current code is ok but I included the following meta tag to fit the content:\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/0d35c24bfd797185926e465eb040d935834e6454/packages/components/src/sandbox/index.native.js#L122-L125\r\n\r\n## Resize message handling\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L185-L210\r\n\r\n</details>\r\n\r\nThis is the callback used for handling resize events from the resize JS observer. I'd like to note that I removed a part that is used to verify that the origin of the message is the resize observer, in native, this is not really necessary as the resize message it's the only one that we're receiving.\r\n\r\n## Load event listener\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L215-L219\r\n\r\n</details>\r\n\r\nThe load event is used to call the `trySandbox` function after the load in the web version, as far as I checked, this is not required but it would be nice to investigate it further.\r\n\r\n**EDIT:** This is not required in the mobile version.\r\n\r\n## Message event listener\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L220\r\n\r\n</details>\r\n\r\nIn this case, we use the webview component message system so it's not required.\r\n\r\n## IFrame extra props\r\n\r\n**✅ It doesn't require further implementation.**\r\n\r\n<details><summary>Related code</summary>\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/105dc1dfe41ed8fe85c147c1c3c204f9fb683990/packages/components/src/sandbox/index.js#L241-L249\r\n\r\n</details>\r\n\r\nIn the web version, we have the following extra props passed to the Iframe:\r\n- `className=\"components-sandbox\"`\r\n- `sandbox=\"allow-scripts allow-same-origin allow-presentation\"`\r\n- Size (width and height)\r\n\r\nWe should verify if they're required in the native version.\r\n\r\n**NOTE:** The size in the native version is handled by passing an inline style with the aspect ratio calculated from the preview size.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/0d35c24bfd797185926e465eb040d935834e6454/packages/components/src/sandbox/index.native.js#L188-L190\r\n\r\n**EDIT:** This is not required in the mobile version.\r\n\r\n</details>\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\n### Test all providers\r\n1. Switch to HTML mode\r\n2. Add the following HTML which includes all providers\r\n<details><summary>HTML code</summary>\r\n\r\n```\r\n<!-- wp:embed {\"url\":\"https://www.amazon.com/dp/B086V2NKW6/ref=cm_sw_em_r_mt_dp_T9CZKRCGX4XFCGT31VAM\",\"type\":\"rich\",\"providerNameSlug\":\"amazon\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.amazon.com/dp/B086V2NKW6/ref=cm_sw_em_r_mt_dp_T9CZKRCGX4XFCGT31VAM\r\n</div><figcaption>Amazon Kindle instant previews</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://animoto.com/play/sbONyhv5XN2fn26GGA061A\",\"type\":\"video\",\"providerNameSlug\":\"animoto\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-animoto wp-block-embed-animoto\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://animoto.com/play/sbONyhv5XN2fn26GGA061A\r\n</div></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://cloudup.com/iGdvFflihj0\",\"type\":\"rich\",\"providerNameSlug\":\"cloudup\",\"responsive\":true,\"align\":\"wide\",\"className\":\"wp-embed-aspect-4-3 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed alignwide is-type-rich is-provider-cloudup wp-block-embed-cloudup wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://cloudup.com/iGdvFflihj0\r\n</div><figcaption>CloudUp</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://poll.fm/10575316\",\"type\":\"rich\",\"providerNameSlug\":\"crowdsignal\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-crowdsignal wp-block-embed-crowdsignal\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://poll.fm/10575316\r\n</div><figcaption>Crowdsignal</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.dailymotion.com/video/x7zktsb\",\"type\":\"video\",\"providerNameSlug\":\"dailymotion\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-dailymotion wp-block-embed-dailymotion wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.dailymotion.com/video/x7zktsb\r\n</div><figcaption>Dailymotion</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.facebook.com/WordPress/posts/10157978031167911?cft_[0]=AZVvIZnOgLmO0aGMW4l_KcldOSSTnnoKogx7sWLpwpMpQjGresqAxd8KVMTBbKyX95DiRBKMPVZKmVUYHpvuK2AK73LkLoLxKRXHhHR73LMAAdy8X13RWJuUbTE4ISBAOQ96wDsk6Fz-VNRLG8Vp-2vJiXSVd4sfYiuGEkNizSmaXg\\u0026amp; _tn_=%2CO%2CP-R \",\"type\":\"rich\",\"providerNameSlug\":\"embed-handler\",\"responsive\":true,\"previewable\":false} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.facebook.com/WordPress/posts/10157978031167911?cft_[0]=AZVvIZnOgLmO0aGMW4l_KcldOSSTnnoKogx7sWLpwpMpQjGresqAxd8KVMTBbKyX95DiRBKMPVZKmVUYHpvuK2AK73LkLoLxKRXHhHR73LMAAdy8X13RWJuUbTE4ISBAOQ96wDsk6Fz-VNRLG8Vp-2vJiXSVd4sfYiuGEkNizSmaXg&amp; _tn_=%2CO%2CP-R \r\n</div><figcaption>Facebook</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://flic.kr/p/2h93TrK\",\"type\":\"photo\",\"providerNameSlug\":\"flickr\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-photo is-provider-flickr wp-block-embed-flickr\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://flic.kr/p/2h93TrK\r\n</div><figcaption>Flickr</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://media.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif\",\"type\":\"rich\",\"providerNameSlug\":\"embed-handler\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://media.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif\r\n</div><figcaption>Giphy</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><strong>Imgur provider doesn’t work:</strong><br />https://imgur.com/gallery/Tfj5BzO</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>https://imgur.com/gallery/Tfj5BzO</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.instagram.com/p/Bl6LgZgFDOm\",\"type\":\"rich\",\"providerNameSlug\":\"instagram\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-instagram wp-block-embed-instagram\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.instagram.com/p/Bl6LgZgFDOm\r\n</div><figcaption>Instagram</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://issuu.com/sneha-3213/docs/react_native_0.64.2_released_discover_what_s_new_\",\"type\":\"rich\",\"providerNameSlug\":\"issuu\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-issuu wp-block-embed-issuu\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://issuu.com/sneha-3213/docs/react_native_0.64.2_released_discover_what_s_new_\r\n</div><figcaption>Issuu</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery\\u0026amp;term=exploding%20kittens\",\"type\":\"rich\",\"providerNameSlug\":\"kickstarter\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-kickstarter wp-block-embed-kickstarter wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.kickstarter.com/projects/elanlee/exploding-kittens?ref=discovery&amp;term=exploding%20kittens\r\n</div><figcaption>Kickstarter</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><strong>Meetup.com provider doesn’t work:</strong><br />https://www.meetup.com/es/The-Reno-WordPress-Meetup-Group/events/smpbksycckblc/</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>https://www.meetup.com/es/The-Reno-WordPress-Meetup-Group/events/smpbksycckblc/</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.mixcloud.com/maxvibes/nu-jazz-lounge/\",\"type\":\"rich\",\"providerNameSlug\":\"mixcloud\",\"responsive\":true,\"className\":\"wp-embed-aspect-21-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-mixcloud wp-block-embed-mixcloud wp-embed-aspect-21-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.mixcloud.com/maxvibes/nu-jazz-lounge/\r\n</div><figcaption>Mixcloud</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.reddit.com/r/reactnative/comments/oovdxz/typescript_or_javascript_for_rn/?utm_source=share\\u0026amp;utm_medium=web2x\\u0026amp;context=3\",\"type\":\"rich\",\"providerNameSlug\":\"reddit\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-reddit wp-block-embed-reddit\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.reddit.com/r/reactnative/comments/oovdxz/typescript_or_javascript_for_rn/?utm_source=share&amp;utm_medium=web2x&amp;context=3\r\n</div><figcaption>Reddit</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.reverbnation.com/hmsurf/song/27456133-sids-lesson\",\"type\":\"rich\",\"providerNameSlug\":\"embed\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-embed wp-block-embed-embed\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.reverbnation.com/hmsurf/song/27456133-sids-lesson\r\n</div><figcaption>Reverbnation</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.scribd.com/document/430258318/Professional-Javascript\",\"type\":\"rich\",\"providerNameSlug\":\"scribd\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-scribd wp-block-embed-scribd\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.scribd.com/document/430258318/Professional-Javascript\r\n</div><figcaption>Scribd</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.slideshare.net/brianhousand/game-on-iagc-2016\",\"type\":\"rich\",\"providerNameSlug\":\"slideshare\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-slideshare wp-block-embed-slideshare\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.slideshare.net/brianhousand/game-on-iagc-2016\r\n</div><figcaption>Slideshare</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://soundcloud.com/dillonfrancis/daft-punk-harder-better-faster-stronger-dillon-francis-remix\",\"type\":\"rich\",\"providerNameSlug\":\"soundcloud\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-soundcloud wp-block-embed-soundcloud\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://soundcloud.com/dillonfrancis/daft-punk-harder-better-faster-stronger-dillon-francis-remix\r\n</div><figcaption>Soundcloud</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://speakerdeck.com/notwaldorf/how-to-train-your-dragon-web-standard\",\"type\":\"rich\",\"providerNameSlug\":\"speaker-deck\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-speaker-deck wp-block-embed-speaker-deck wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://speakerdeck.com/notwaldorf/how-to-train-your-dragon-web-standard\r\n</div><figcaption>Speakerdeck</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://open.spotify.com/track/5sICkBXVmaCQk5aISGR3x1\",\"type\":\"rich\",\"providerNameSlug\":\"spotify\",\"responsive\":true,\"className\":\"wp-embed-aspect-21-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://open.spotify.com/track/5sICkBXVmaCQk5aISGR3x1\r\n</div><figcaption>Spotify</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.ted.com/talks/max_hawkins_i_let_algorithms_randomize_my_life_for_two_years?utm_source=tedcomshare\\u0026amp;utm_medium=social\\u0026amp;utm_campaign=tedspread\",\"type\":\"video\",\"providerNameSlug\":\"ted\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-ted wp-block-embed-ted wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.ted.com/talks/max_hawkins_i_let_algorithms_randomize_my_life_for_two_years?utm_source=tedcomshare&amp;utm_medium=social&amp;utm_campaign=tedspread\r\n</div><figcaption>Ted</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.tiktok.com/@25pesetas/video/6946150795909893381\",\"type\":\"video\",\"providerNameSlug\":\"tiktok\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-tiktok wp-block-embed-tiktok\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.tiktok.com/@25pesetas/video/6946150795909893381\r\n</div><figcaption>Tiktok</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://popelickva.tumblr.com/post/646024560144171008/the-sega-cd-version-of-monkey-island-has-some\",\"type\":\"rich\",\"providerNameSlug\":\"tumblr\"} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-tumblr wp-block-embed-tumblr\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://popelickva.tumblr.com/post/646024560144171008/the-sega-cd-version-of-monkey-island-has-some\r\n</div><figcaption>Tumblr</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://twitter.com/automattic/status/1395447061336711181\",\"type\":\"rich\",\"providerNameSlug\":\"twitter\",\"responsive\":true} -->\r\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://twitter.com/automattic/status/1395447061336711181\r\n</div><figcaption>Twitter</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://vimeo.com/278150343\",\"type\":\"video\",\"providerNameSlug\":\"vimeo\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://vimeo.com/278150343\r\n</div><figcaption>Vimeo</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://videopress.com/v/rFm2ce4R\",\"type\":\"video\",\"providerNameSlug\":\"videopress\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-videopress wp-block-embed-videopress wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://videopress.com/v/rFm2ce4R\r\n</div><figcaption>WordPress.tv</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.youtube.com/watch?v=ssfHW5lwFZg\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"responsive\":true,\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.youtube.com/watch?v=ssfHW5lwFZg\r\n</div><figcaption>YouTube</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.screencast.com/t/F6R333xrD3BQ\",\"type\":\"video\",\"providerNameSlug\":\"screencast-com\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-screencast-com wp-block-embed-screencast-com\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.screencast.com/t/F6R333xrD3BQ\r\n</div><figcaption>Screencast</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://wordpress.org/news/2021/07/tatum/\",\"type\":\"wp-embed\",\"providerNameSlug\":\"wordpress-news\"} -->\r\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-wordpress-news wp-block-embed-wordpress-news\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://wordpress.org/news/2021/07/tatum/\r\n</div><figcaption>WP-embed (not supported yet)</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://www.educreations.com/lesson/view/science/25630392/?s=UkHL9p\\u0026amp;ref=app\",\"type\":\"video\",\"providerNameSlug\":\"educreations\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-educreations wp-block-embed-educreations\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://www.educreations.com/lesson/view/science/25630392/?s=UkHL9p&amp;ref=app\r\n</div><figcaption>Educreations</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"https://sproutvideo-example.vids.io/videos/189bdbb01e1ce7c790/video-websites-by-sproutvideo\",\"type\":\"video\",\"providerNameSlug\":\"sproutvideo\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-sproutvideo wp-block-embed-sproutvideo\"><div class=\"wp-block-embed__wrapper\">\r\nhttps://sproutvideo-example.vids.io/videos/189bdbb01e1ce7c790/video-websites-by-sproutvideo\r\n</div><figcaption>SproutVideo</figcaption></figure>\r\n<!-- /wp:embed -->\r\n\r\n<!-- wp:embed {\"url\":\"http://automattic-2.wistia.com/medias/mqf9c9147u\",\"type\":\"video\",\"providerNameSlug\":\"wistia-inc\"} -->\r\n<figure class=\"wp-block-embed is-type-video is-provider-wistia-inc wp-block-embed-wistia-inc\"><div class=\"wp-block-embed__wrapper\">\r\nhttp://automattic-2.wistia.com/medias/mqf9c9147u\r\n</div><figcaption>Wistia</figcaption></figure>\r\n<!-- /wp:embed -->\r\n```\r\n\r\n</details>\r\n\r\n3. Observer that embed blocks are displaying a preview for each provider.\r\n    **NOTE:** The following providers are not working on both platforms:\r\n    - Facebook\r\n    - Imgur\r\n    - Meetup.com\r\n\r\n### Interaction is disabled\r\n1. Add an Embed block\r\n2. Set a URL that can be previewed (example: https://www.youtube.com/watch?v=ssfHW5lwFZg)\r\n3. Observe that the content preview is displayed\r\n4. Tap on any UI element (like the play button) within the preview content\r\n5. Observe that interaction is disabled\r\n\r\n### Inline preview disabled in production mode\r\n1. Use an installable build to test production mode\r\n2. Add an Embed block\r\n2. Set a URL that can be previewed (example: https://www.youtube.com/watch?v=ssfHW5lwFZg)\r\n3. Observe that the block's content displays a message that inline preview is coming soon and the text \"PREVIEW POST\"\r\n4. Tap on the block to edit it\r\n5. Observe that an info modal shows up explaining that previews are coming soon\r\n6. Observe that tapping on the dismiss button closes the modal\r\n7. Tap on the block again to open the previous modal\r\n8. Tap on \"Preview post\"\r\n9. Observe that the modal is closed and the preview modal is opened displaying the embed block\r\n\r\n### Performance\r\n\r\n**Preparation:**\r\n1. Add a high number of embed blocks that will display a preview like the previous HTML code from \"Test all providers\" test case\r\n2. Save the post/page\r\n\r\n#### Opening a post/page\r\n1. Open the post/page\r\n2. Observe that performance is not degraded when loading a high number of embed blocks\r\n\r\n#### Scrolling content\r\n1. Open the post/page\r\n2. Scroll the post/page content from top to bottom and vice-versa\r\n3. Observe that performance is not degraded when scrolling\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\niOS|Android\r\n--|--\r\n<video src=https://user-images.githubusercontent.com/14905380/127003200-8cb4dc72-c194-4792-ad18-acaa077378df.mp4>|<video src=https://user-images.githubusercontent.com/14905380/127010789-ba7e794e-69bb-4fc9-806f-4509f4a16d6c.mp4>\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\nNew feature\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54110",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54110",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54110.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54110.patch",
+			"merged_at": "2023-09-21T12:12:24Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nAdd the ability to toggle the `nofollow` for Button's link. \r\n\r\nPartial implementation of https://github.com/WordPress/gutenberg/issues/54091\r\nPrior art for Rich text link https://github.com/WordPress/gutenberg/pull/53945\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nCheck https://github.com/WordPress/gutenberg/pull/53945#issue-1866939265\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n- Place the `nofollow` option in the `Advanced` settings area\r\n- Update the [linkValue](https://github.com/WordPress/gutenberg/blob/0792221dd597290fe512b109a1469f2057f0dda4/packages/block-library/src/button/edit.js#L154) for persisting the Advanced settings state\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n- Open Post Editor\r\n- Add new Button block\r\n- Add a link to the Button\r\n- Click Edit link\r\n- Toggle the `opensInNewTab` and `nofollow` \r\n- Check and confirm whether the `rel` and `target` attributes has been inserted correctly\r\n\r\n| opensInNewWindow | nofollow | Generated                      |\r\n| --------------------------- | --------------------- | ---------------------------------------- |\r\n| ✅                         | ❌                   | `target=\"_blank\" rel=\"noreferrer noopener\"` |\r\n| ❌                         | ✅                   | `target=\"\" rel=\"nofollow\"`               |\r\n| ✅                         | ✅                   | `target=\"_blank\" rel=\"noreferrer noopener nofollow\"` |\r\n| ❌                         | ❌                   | `target=\"\" rel=\"\"`                      |\r\n\r\n### Testings\r\n- Verify and update these e2e tests\r\n   `npm run test:e2e:playwright -- test/e2e/specs/editor/blocks/links.spec.js`\r\n   `npm run test:e2e:playwright -- test/e2e/specs/editor/blocks/buttons.spec.js`\r\n\r\n- Insert new unit testing for updateLinkAttributes\r\n  `npm run test:unit -- packages/block-library/src/button`\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/10071857/de3bcbc1-6bb7-45e8-b6eb-d7da7e6d974e\r\n\r\ncc: @getdave \r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54110/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33418",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33418/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33418/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33418/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33418",
-		"id": 944243830,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njg5NzUzODQ2",
-		"number": 33418,
-		"title": "Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/54054",
+		"id": 1873499766,
+		"node_id": "PR_kwDOBNHdeM5ZIYVr",
+		"number": 54054,
+		"title": "Set custom color when applying initial background image",
 		"user": {
-			"login": "torounit",
-			"id": 1908815,
-			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+			"login": "draganescu",
+			"id": 107534,
+			"node_id": "MDQ6VXNlcjEwNzUzNA==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/107534?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/torounit",
-			"html_url": "https://github.com/torounit",
-			"followers_url": "https://api.github.com/users/torounit/followers",
-			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
-			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
-			"organizations_url": "https://api.github.com/users/torounit/orgs",
-			"repos_url": "https://api.github.com/users/torounit/repos",
-			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/torounit/received_events",
+			"url": "https://api.github.com/users/draganescu",
+			"html_url": "https://github.com/draganescu",
+			"followers_url": "https://api.github.com/users/draganescu/followers",
+			"following_url": "https://api.github.com/users/draganescu/following{/other_user}",
+			"gists_url": "https://api.github.com/users/draganescu/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/draganescu/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/draganescu/subscriptions",
+			"organizations_url": "https://api.github.com/users/draganescu/orgs",
+			"repos_url": "https://api.github.com/users/draganescu/repos",
+			"events_url": "https://api.github.com/users/draganescu/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/draganescu/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596964332,
-				"node_id": "MDU6TGFiZWw1OTY5NjQzMzI=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/General%20Interface",
-				"name": "General Interface",
-				"color": "bfdadc",
-				"default": false,
-				"description": "Parts of the UI which don't fall neatly under other labels."
-			},
-			{
-				"id": 731693674,
-				"node_id": "MDU6TGFiZWw3MzE2OTM2NzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Performance",
-				"name": "[Type] Performance",
-				"color": "f3f4fe",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1013395453,
-				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
-				"name": "[Package] Editor",
-				"color": "ed2572",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "/packages/editor"
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1293579839,
-				"node_id": "MDU6TGFiZWwxMjkzNTc5ODM5",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Dev%20Note",
-				"name": "Needs Dev Note",
-				"color": "b910f2",
+				"id": 1101517892,
+				"node_id": "MDU6TGFiZWwxMTAxNTE3ODky",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Cover",
+				"name": "[Block] Cover",
+				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Cover Block - used to display content laid over a background image"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "torounit",
-			"id": 1908815,
-			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/torounit",
-			"html_url": "https://github.com/torounit",
-			"followers_url": "https://api.github.com/users/torounit/followers",
-			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
-			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
-			"organizations_url": "https://api.github.com/users/torounit/orgs",
-			"repos_url": "https://api.github.com/users/torounit/repos",
-			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/torounit/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "torounit",
-				"id": 1908815,
-				"node_id": "MDQ6VXNlcjE5MDg4MTU=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/torounit",
-				"html_url": "https://github.com/torounit",
-				"followers_url": "https://api.github.com/users/torounit/followers",
-				"following_url": "https://api.github.com/users/torounit/following{/other_user}",
-				"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
-				"organizations_url": "https://api.github.com/users/torounit/orgs",
-				"repos_url": "https://api.github.com/users/torounit/repos",
-				"events_url": "https://api.github.com/users/torounit/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/torounit/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13448,77 +22332,84 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 17,
-		"created_at": "2021-07-14T09:44:47Z",
-		"updated_at": "2021-08-04T03:04:55Z",
-		"closed_at": "2021-07-28T05:23:06Z",
-		"author_association": "MEMBER",
+		"comments": 14,
+		"created_at": "2023-08-30T11:41:33Z",
+		"updated_at": "2023-09-22T16:51:21Z",
+		"closed_at": "2023-09-22T16:50:57Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33418",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33418",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33418.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33418.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n\r\nRelated: #10169, #16268\r\n\r\n* Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. Use the data from the first set of terms we get.\r\n* Changed from class components to functional components.\r\n\r\n<!-- Please describe what you have changed or added -->\r\n\r\n## How has this been tested?\r\n1. Go edit post.\r\n2. Close and open the panel for categories.\r\n3. Check request for wp-api.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\nBug fix\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/54054",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/54054",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/54054.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/54054.patch",
+			"merged_at": "2023-09-22T16:50:57Z"
+		},
+		"body": "Closes #44167\r\n\r\nThe original attempt was using `colorThief` (#22564) and there is another PR (#46908) which I learned after doing this one  doing the same thing.\r\n\r\nAnyway 😬 this PR aims to land the feature.\r\n\r\n\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/107534/62be4171-4549-46eb-859f-e61e88ce02e4\r\n\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/54054/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33392",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33392/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33392/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33392/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33392",
-		"id": 943611535,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njg5MjE4MDcy",
-		"number": 33392,
-		"title": "Template: Only show post template actions to users with correct capabilities",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53981",
+		"id": 1869129204,
+		"node_id": "PR_kwDOBNHdeM5Y5rfG",
+		"number": 53981,
+		"title": "Post Title block should use esc_url()",
 		"user": {
-			"login": "walbo",
-			"id": 1415747,
-			"node_id": "MDQ6VXNlcjE0MTU3NDc=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1415747?v=4",
+			"login": "tellyworth",
+			"id": 7200686,
+			"node_id": "MDQ6VXNlcjcyMDA2ODY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7200686?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/walbo",
-			"html_url": "https://github.com/walbo",
-			"followers_url": "https://api.github.com/users/walbo/followers",
-			"following_url": "https://api.github.com/users/walbo/following{/other_user}",
-			"gists_url": "https://api.github.com/users/walbo/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/walbo/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/walbo/subscriptions",
-			"organizations_url": "https://api.github.com/users/walbo/orgs",
-			"repos_url": "https://api.github.com/users/walbo/repos",
-			"events_url": "https://api.github.com/users/walbo/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/walbo/received_events",
+			"url": "https://api.github.com/users/tellyworth",
+			"html_url": "https://github.com/tellyworth",
+			"followers_url": "https://api.github.com/users/tellyworth/followers",
+			"following_url": "https://api.github.com/users/tellyworth/following{/other_user}",
+			"gists_url": "https://api.github.com/users/tellyworth/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/tellyworth/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/tellyworth/subscriptions",
+			"organizations_url": "https://api.github.com/users/tellyworth/orgs",
+			"repos_url": "https://api.github.com/users/tellyworth/repos",
+			"events_url": "https://api.github.com/users/tellyworth/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/tellyworth/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680823,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
-				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 2978205898,
-				"node_id": "MDU6TGFiZWwyOTc4MjA1ODk4",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Template%20Editing%20Mode",
-				"name": "[Feature] Template Editing Mode",
-				"color": "FBCA04",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
@@ -13526,13 +22417,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13555,68 +22446,84 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-07-13T16:29:08Z",
-		"updated_at": "2021-08-09T16:51:20Z",
-		"closed_at": "2021-08-09T16:31:48Z",
+		"comments": 1,
+		"created_at": "2023-08-28T07:11:17Z",
+		"updated_at": "2023-10-02T07:59:52Z",
+		"closed_at": "2023-10-02T07:59:25Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33392",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33392",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33392.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33392.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nPost template actions shows on user that doesn't have correct capabilities. Ex editors has a `New` button but when they try to create a new template nothing happens. (See screenshot)\r\n\r\n## How has this been tested?\r\nLocally with a `editor` user and with a `adminitrator` user.\r\n\r\n## Screenshots <!-- if applicable -->\r\n### Before\r\n![template-new](https://user-images.githubusercontent.com/1415747/125489869-5bb2340b-29c9-402f-92ec-b79612a61d84.gif)\r\n\r\n### After\r\n![image](https://user-images.githubusercontent.com/1415747/126469473-ba4e2d7e-0a16-47c2-b62a-d0c78464ca3b.png)\r\n\r\n\r\n## Types of changes\r\nBug fix. Only show post template actions for users with correct capabilities\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53981",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53981",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53981.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53981.patch",
+			"merged_at": "2023-10-02T07:59:25Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis PR adds URL escaping to the html output rendered by the Post Title block. It is not an issue of security, only of code quality.\r\n\r\n## Why?\r\nGood WP coding standards require the use of `esc_url()` when outputting a URL. This applies even to URLs generated by core functions such as `get_the_permalink()`; see for reference the Twenty Twenty One theme, which does exactly that:\r\n\r\nhttps://github.com/WordPress/twentytwentyone/blob/ba9f20cad89163761185c0467b346ba42541ae22/template-parts/content/content.php#L19\r\n\r\nThe Post Title block currently fails to escape the URL.\r\n\r\nFor the record, the Post Title block also fails to escape the title itself; however this is correct behaviour as per the docs: https://developer.wordpress.org/reference/functions/the_title/#more-information. Personally I think that position ought to be reconsidered, but that's a whole other issue, so I have intentionally left it as-is for this PR.\r\n\r\nRelated: #53838.\r\n\r\n## How?\r\nThe only change in this PR is adding the `esc_url()` call.\r\n\r\n## Testing Instructions\r\n1. Open any page with a Post Title block.\r\n2. Verify that the `href` in the link tag for the `#wp-block-post-title` is correct.\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981/reactions",
+			"total_count": 1,
+			"+1": 1,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53981/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33308",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33308/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33308/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33308/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33308",
-		"id": 940125152,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njg2MjQzNDQ3",
-		"number": 33308,
-		"title": "link fix: block editor Sidebar Tutorial",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53928",
+		"id": 1865715250,
+		"node_id": "PR_kwDOBNHdeM5YuVnr",
+		"number": 53928,
+		"title": "Add a unit test for the \"ValidBlockLibraryFunctionNameSniff\" sniff",
 		"user": {
-			"login": "rbrishabh",
-			"id": 22501334,
-			"node_id": "MDQ6VXNlcjIyNTAxMzM0",
-			"avatar_url": "https://avatars.githubusercontent.com/u/22501334?v=4",
+			"login": "anton-vlasenko",
+			"id": 43744263,
+			"node_id": "MDQ6VXNlcjQzNzQ0MjYz",
+			"avatar_url": "https://avatars.githubusercontent.com/u/43744263?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/rbrishabh",
-			"html_url": "https://github.com/rbrishabh",
-			"followers_url": "https://api.github.com/users/rbrishabh/followers",
-			"following_url": "https://api.github.com/users/rbrishabh/following{/other_user}",
-			"gists_url": "https://api.github.com/users/rbrishabh/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/rbrishabh/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/rbrishabh/subscriptions",
-			"organizations_url": "https://api.github.com/users/rbrishabh/orgs",
-			"repos_url": "https://api.github.com/users/rbrishabh/repos",
-			"events_url": "https://api.github.com/users/rbrishabh/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/rbrishabh/received_events",
+			"url": "https://api.github.com/users/anton-vlasenko",
+			"html_url": "https://github.com/anton-vlasenko",
+			"followers_url": "https://api.github.com/users/anton-vlasenko/followers",
+			"following_url": "https://api.github.com/users/anton-vlasenko/following{/other_user}",
+			"gists_url": "https://api.github.com/users/anton-vlasenko/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/anton-vlasenko/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/anton-vlasenko/subscriptions",
+			"organizations_url": "https://api.github.com/users/anton-vlasenko/orgs",
+			"repos_url": "https://api.github.com/users/anton-vlasenko/repos",
+			"events_url": "https://api.github.com/users/anton-vlasenko/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/anton-vlasenko/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 567484057,
-				"node_id": "MDU6TGFiZWw1Njc0ODQwNTc=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Documentation",
-				"name": "[Type] Developer Documentation",
-				"color": "bfd4f2",
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
 				"default": false,
-				"description": ""
+				"description": "Issues or PRs that relate to code quality"
 			}
 		],
 		"state": "closed",
@@ -13624,13 +22531,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13653,140 +22560,167 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-07-08T18:41:23Z",
-		"updated_at": "2021-07-30T16:18:04Z",
-		"closed_at": "2021-07-30T16:17:40Z",
+		"comments": 3,
+		"created_at": "2023-08-24T18:57:56Z",
+		"updated_at": "2023-09-27T10:13:22Z",
+		"closed_at": "2023-09-27T10:12:49Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33308",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33308",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33308.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33308.patch"
-		},
-		"body": "Fixes #33265\r\nHey @talldan! how does this look?\r\nlet me know if this needs any changes! thanks!",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53928",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53928",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53928.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53928.patch",
+			"merged_at": "2023-09-27T10:12:49Z"
+		},
+		"body": "<!-- Thank you for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis PR aims to add a unit test for the recently introduced `ValidBlockLibraryFunctionNameSniff` sniff.\r\nIt also brings a few other minor improvements.\r\nFixes https://github.com/WordPress/gutenberg/issues/53731.\r\n\r\n## Why?\r\nIt's considered best practice to write unit tests for PHPCS sniffs.\r\nAdditionally, as Gutenberg moves toward bumping the minimum supported PHP version, this package should also be updated.\r\n\r\n\r\n## How?\r\n<!-- How does your PR address the issue? Are there any specific implementation details to note? -->\r\n\r\n - [x] Add a unit test for the `ValidBlockLibraryFunctionNameSniff` sniff.\r\n - [x] Bump the minimum required PHP version to 7.0.\r\n - [x] Refine `phpcs.xml.dist` by only excluding necessary rules.\r\n - [x] Update WPCS to 3.0.\r\n - [x] Refactor `ValidBlockLibraryFunctionNameSniff::processFunctionToken()`: eliminate the need to loop through all available prefixes once the function name is confirmed as valid; this results in a minor performance improvement.\r\n - [x] Remove `dealerdirect/phpcodesniffer-composer-installer` from the list of dependencies per WPCS 3.0 [upgrade guide](https://github.com/WordPress/WordPress-Coding-Standards/wiki/Upgrade-Guide-to-WordPressCS-3.0.0-for-ruleset-maintainers).\r\n\r\n## Testing Instructions\r\n\r\n1. Ensure that GitHub CI jobs pass.\r\n2. Navigate to `test/php/gutenberg-coding-standards/`.\r\n3. Run `composer update`.\r\n4. Run `composer run check-all`.\r\n\r\nEnsure that the PHPUnit tests in the console pass. PHPUnit should report 0 assertions, but that is expected.\r\n\r\n`Note`: The unit tests will not work on PHP 8.0 and above. This is because the latest stable version of the `squizlabs/php_codesniffer` package [doesn't support](https://packagist.org/packages/squizlabs/php_codesniffer#3.7.2) PHPUnit 8.x. Also, PHPUnit 7.x [is not compatible](https://phpunit.de/supported-versions.html) with PHP 8.0. The unit tests have been confirmed to work on PHP 7.3.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53928/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33119",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33119/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33119/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33119/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33119",
-		"id": 934255450,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjgxMzQ1NjIy",
-		"number": 33119,
-		"title": "[RNMobile] Add new block type badge to block inserter list",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53819",
+		"id": 1857377862,
+		"node_id": "PR_kwDOBNHdeM5YSM5b",
+		"number": 53819,
+		"title": "InputControl-based components: Add opt-in prop for next 40px default size",
 		"user": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "mirka",
+			"id": 555336,
+			"node_id": "MDQ6VXNlcjU1NTMzNg==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/555336?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/mirka",
+			"html_url": "https://github.com/mirka",
+			"followers_url": "https://api.github.com/users/mirka/followers",
+			"following_url": "https://api.github.com/users/mirka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/mirka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/mirka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/mirka/subscriptions",
+			"organizations_url": "https://api.github.com/users/mirka/orgs",
+			"repos_url": "https://api.github.com/users/mirka/repos",
+			"events_url": "https://api.github.com/users/mirka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/mirka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 596962434,
-				"node_id": "MDU6TGFiZWw1OTY5NjI0MzQ=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Inserter",
-				"name": "[Feature] Inserter",
-				"color": "fbca04",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1789344476,
-				"node_id": "MDU6TGFiZWwxNzg5MzQ0NDc2",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Feature",
-				"name": "[Type] Feature",
-				"color": "2e8daa",
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
 				"default": false,
-				"description": "New feature to highlight in changelogs."
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "dcalhoun",
-			"id": 438664,
-			"node_id": "MDQ6VXNlcjQzODY2NA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+			"login": "mirka",
+			"id": 555336,
+			"node_id": "MDQ6VXNlcjU1NTMzNg==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/555336?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/dcalhoun",
-			"html_url": "https://github.com/dcalhoun",
-			"followers_url": "https://api.github.com/users/dcalhoun/followers",
-			"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-			"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-			"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-			"repos_url": "https://api.github.com/users/dcalhoun/repos",
-			"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+			"url": "https://api.github.com/users/mirka",
+			"html_url": "https://github.com/mirka",
+			"followers_url": "https://api.github.com/users/mirka/followers",
+			"following_url": "https://api.github.com/users/mirka/following{/other_user}",
+			"gists_url": "https://api.github.com/users/mirka/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/mirka/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/mirka/subscriptions",
+			"organizations_url": "https://api.github.com/users/mirka/orgs",
+			"repos_url": "https://api.github.com/users/mirka/repos",
+			"events_url": "https://api.github.com/users/mirka/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/mirka/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "dcalhoun",
-				"id": 438664,
-				"node_id": "MDQ6VXNlcjQzODY2NA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/438664?v=4",
+				"login": "mirka",
+				"id": 555336,
+				"node_id": "MDQ6VXNlcjU1NTMzNg==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/555336?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/dcalhoun",
-				"html_url": "https://github.com/dcalhoun",
-				"followers_url": "https://api.github.com/users/dcalhoun/followers",
-				"following_url": "https://api.github.com/users/dcalhoun/following{/other_user}",
-				"gists_url": "https://api.github.com/users/dcalhoun/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/dcalhoun/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/dcalhoun/subscriptions",
-				"organizations_url": "https://api.github.com/users/dcalhoun/orgs",
-				"repos_url": "https://api.github.com/users/dcalhoun/repos",
-				"events_url": "https://api.github.com/users/dcalhoun/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/dcalhoun/received_events",
+				"url": "https://api.github.com/users/mirka",
+				"html_url": "https://github.com/mirka",
+				"followers_url": "https://api.github.com/users/mirka/followers",
+				"following_url": "https://api.github.com/users/mirka/following{/other_user}",
+				"gists_url": "https://api.github.com/users/mirka/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/mirka/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/mirka/subscriptions",
+				"organizations_url": "https://api.github.com/users/mirka/orgs",
+				"repos_url": "https://api.github.com/users/mirka/repos",
+				"events_url": "https://api.github.com/users/mirka/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/mirka/received_events",
+				"type": "User",
+				"site_admin": false
+			},
+			{
+				"login": "chad1008",
+				"id": 13856531,
+				"node_id": "MDQ6VXNlcjEzODU2NTMx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/13856531?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/chad1008",
+				"html_url": "https://github.com/chad1008",
+				"followers_url": "https://api.github.com/users/chad1008/followers",
+				"following_url": "https://api.github.com/users/chad1008/following{/other_user}",
+				"gists_url": "https://api.github.com/users/chad1008/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/chad1008/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/chad1008/subscriptions",
+				"organizations_url": "https://api.github.com/users/chad1008/orgs",
+				"repos_url": "https://api.github.com/users/chad1008/repos",
+				"events_url": "https://api.github.com/users/chad1008/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/chad1008/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13809,122 +22743,156 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 7,
-		"created_at": "2021-07-01T01:06:56Z",
-		"updated_at": "2021-08-03T19:31:40Z",
-		"closed_at": "2021-08-03T19:31:03Z",
+		"comments": 12,
+		"created_at": "2023-08-18T23:01:11Z",
+		"updated_at": "2023-10-06T07:57:51Z",
+		"closed_at": "2023-09-29T14:05:12Z",
 		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33119",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33119",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33119.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33119.patch"
-		},
-		"body": "* **Gutenberg:** Self\r\n* **Gutenberg Mobile:** https://github.com/wordpress-mobile/gutenberg-mobile/pull/3720\r\n* **WPiOS:** https://github.com/wordpress-mobile/WordPress-iOS/pull/16857\r\n* **WPAndroid:** https://github.com/wordpress-mobile/WordPress-Android/pull/15038\r\n\r\n## Description\r\nFixes #30627. Add new block type badge to the native block inserter list. A \"new\" badge is displayed for block types configured as new. The configuration resides in the JavaScript and is provided to the native host app for storage. Once a given block type is inserted, it is no longer considered new. \r\n\r\nhttps://github.com/WordPress/gutenberg/issues/33528 is planned to further improve this feature by having publishing multiple posts also remove the \"new\" badge from block types. That feature is not included in this PR. \r\n\r\n## How has this been tested?\r\n1. Delete previous WP app installations from device. \r\n2. Install WPiOS/WPAndroid build from sibling PRs. \r\n3. Log into account and open the Gutenberg Editor. \r\n4. ℹ️ **Expected:** Block inserter tooltip displayed.<sup>1</sup> \r\n4. Tap + button to open block inserter. \r\n5. ℹ️ **Expected:** Observe a \"new\" badge on the Embed, Search, and Audio blocks. \r\n6. Inserting one of these blocks. \r\n7. Reopen the block inserter. \r\n8. ℹ️ **Expected:** The block inserted no longer has a \"new\" badge. \r\n9. Exit the Gutenberg Editor. \r\n10. Reopen the Gutenberg Editor. \r\n12. ℹ️ **Expected:** Block inserter tooltip not displayed. \r\n11. Open the block inserter. \r\n12. ℹ️ **Expected:** The block inserted still does not have a \"new\" badge, but the other unused block types do have a \"new\" badge. \r\n\r\n[1]: ⚠️ The Editor Onboarding features, including the \"new\" block badge, is only visible for user's within in the \"cohort.\" This consists of 50% of users based upon the user's ID. If the user is not in the cohort, the \"new\" block badge should not show up. \r\n\r\n## Screenshots \r\n| iOS | Android |\r\n| --- | --- |\r\n| ![ios-new-block](https://user-images.githubusercontent.com/438664/128043293-446b3868-7356-4c02-98f3-a92611fd3685.PNG) | ![android-new-block](https://user-images.githubusercontent.com/438664/128042132-111011d9-1e6b-42fc-99aa-9d5439e7b006.jpg) |\r\n| ![ios-new-block-dark](https://user-images.githubusercontent.com/438664/128043346-51be74ff-4dde-4492-b4d2-de96be518e68.PNG) | ![android-new-block-dark](https://user-images.githubusercontent.com/438664/128042089-fa336025-85d8-4fd6-80d4-02948bd08f90.jpg) |\r\n\r\n## Types of changes\r\nNew feature\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53819",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53819",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53819.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53819.patch",
+			"merged_at": "2023-09-29T14:05:12Z"
+		},
+		"body": "Part of #46741\r\n\r\n## What?\r\n\r\nFor all the InputControl-based components listed below:\r\n\r\n- Adds a `__next40pxDefaultSize` prop to opt into the next 40px default size.\r\n- Mark the `__next36pxDefaultSize` as deprecated, and alias to the 40px prop.\r\n\r\n### InputControl-based components\r\n\r\n- InputControl\r\n- NumberControl\r\n- UnitControl\r\n- SelectControl\r\n- CustomSelectControl\r\n- TreeSelect\r\n\r\n### Silently upsized components\r\n\r\nThe following usages were upsized/tweaked to reflect the size change from 36px to 40px.\r\n\r\n- DateTimePicker / TimePicker\r\n\r\n    ![Upsized TimePicker control](https://github.com/WordPress/gutenberg/assets/555336/cad7e00b-93d0-4f48-b15b-0d228dd21bc3)\r\n\r\n- Block editor ▸ Position control (Add a Row block and find the Position control in the block inspector)\r\n\r\n    ![Upsized position control](https://github.com/WordPress/gutenberg/assets/555336/a1a60410-9218-44b6-ad4e-3342e701d1bd)\r\n\r\n- Block library ▸ RSS block\r\n\r\n    ![Upsized elements in RSS block](https://github.com/WordPress/gutenberg/assets/555336/4fea95bb-bcd1-4d5d-b4b0-ba57a807bd89)\r\n\r\n    Similar placeholder components in other core blocks are not upsized yet — this should be done separately.\r\n\r\n- Block library ▸ Template Part ▸ Advanced ▸ Import controls (Open a template in the Site Editor, add a new template part, and see the Advanced section in the block inspector)\r\n\r\n    <details>\r\n    <summary>Testable with diff</summary>\r\n    <p>\r\n\r\n    ```diff\r\n    diff --git a/packages/block-library/src/template-part/edit/import-controls.js b/packages/block-library/src/template-part/edit/import-controls.js\r\n    index ca9708f657..bcabc14c58 100644\r\n    --- a/packages/block-library/src/template-part/edit/import-controls.js\r\n    +++ b/packages/block-library/src/template-part/edit/import-controls.js\r\n    @@ -79,7 +79,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {\r\n     \t}\r\n     \r\n     \tif ( hasResolved && ! options.length ) {\r\n    -\t\treturn null;\r\n    +\t\t// return null;\r\n     \t}\r\n     \r\n     \tasync function createFromWidgets( event ) {\r\n    @@ -143,10 +143,28 @@ export function TemplatePartImportControls( { area, setAttributes } ) {\r\n     \t\t\t\t<FlexBlock>\r\n     \t\t\t\t\t<SelectControl\r\n     \t\t\t\t\t\tlabel={ __( 'Import widget area' ) }\r\n    -\t\t\t\t\t\tvalue={ selectedSidebar }\r\n    -\t\t\t\t\t\toptions={ options }\r\n    +\t\t\t\t\t\tvalue={ 'a' }\r\n    +\t\t\t\t\t\toptions={ [\r\n    +\t\t\t\t\t\t\t{\r\n    +\t\t\t\t\t\t\t\tdisabled: true,\r\n    +\t\t\t\t\t\t\t\tlabel: 'Select an Option',\r\n    +\t\t\t\t\t\t\t\tvalue: '',\r\n    +\t\t\t\t\t\t\t},\r\n    +\t\t\t\t\t\t\t{\r\n    +\t\t\t\t\t\t\t\tlabel: 'Option A',\r\n    +\t\t\t\t\t\t\t\tvalue: 'a',\r\n    +\t\t\t\t\t\t\t},\r\n    +\t\t\t\t\t\t\t{\r\n    +\t\t\t\t\t\t\t\tlabel: 'Option B',\r\n    +\t\t\t\t\t\t\t\tvalue: 'b',\r\n    +\t\t\t\t\t\t\t},\r\n    +\t\t\t\t\t\t\t{\r\n    +\t\t\t\t\t\t\t\tlabel: 'Option C',\r\n    +\t\t\t\t\t\t\t\tvalue: 'c',\r\n    +\t\t\t\t\t\t\t},\r\n    +\t\t\t\t\t\t] }\r\n     \t\t\t\t\t\tonChange={ ( value ) => setSelectedSidebar( value ) }\r\n    -\t\t\t\t\t\tdisabled={ ! options.length }\r\n    +\t\t\t\t\t\t// disabled={ ! options.length }\r\n     \t\t\t\t\t\t__next40pxDefaultSize\r\n     \t\t\t\t\t\t__nextHasNoMarginBottom\r\n     \t\t\t\t\t/>\r\n    ```\r\n    </p>\r\n    </details>\r\n\r\n    ![Upsized import controls for Template Part block in block inspector](https://github.com/WordPress/gutenberg/assets/555336/17fb4ba5-7693-4e75-8b0c-86265a0458db)\r\n\r\n    The other components in the Advanced section are not upsized yet — this should be done separately.\r\n\r\n## Why?\r\n\r\nWe need to supersede the outdated `__next36pxDefaultSize` props and transition to the new 40px default sizes.\r\n\r\nApologies for the relatively large surface area of this PR, since this needs to be done in one go.\r\n\r\n## How?\r\n\r\nSee code comments for noteworthy details.\r\n\r\n## Testing Instructions\r\n\r\n1. `npm run storybook:dev`\r\n2. When `__next36pxDefaultSize` has a defined value, there should be a deprecation warning in the console. When it's truthy, it should work the same as `__next40pxDefaultSize` (i.e. should have 40px height and not 36px).\r\n3. When `__next40pxDefaultSize` is falsey, it should have no effect on the existing size variations. When it's truthy, it should make the `default` size variant be equivalent to the `__unstable-large` variant.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 1,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53819/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33086",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33086/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33086/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33086/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33086",
-		"id": 933440008,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjgwNjQ1Njkx",
-		"number": 33086,
-		"title": "Enable rich previews for internal links",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53602",
+		"id": 1848026278,
+		"node_id": "PR_kwDOBNHdeM5Xynj1",
+		"number": 53602,
+		"title": "Block custom CSS: Fix incorrect CSS when multiple root selectors",
 		"user": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1838782557,
-				"node_id": "MDU6TGFiZWwxODM4NzgyNTU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Link%20Editing",
-				"name": "[Feature] Link Editing",
-				"color": "fbca04",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Link components (LinkControl, URLInput) and integrations (RichText link formatting)"
+				"description": "An existing feature does not function as intended"
+			},
+			{
+				"id": 1800807983,
+				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
+				"name": "Global Styles",
+				"color": "2100b7",
+				"default": false,
+				"description": "Anything related to the broader Global Styles efforts, including Styles Engine and theme.json"
+			},
+			{
+				"id": 4254348202,
+				"node_id": "LA_kwDOBNHdeM79lDOq",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20PHP%20backport",
+				"name": "Needs PHP backport",
+				"color": "64436E",
+				"default": false,
+				"description": "Needs PHP backport to Core"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "getdave",
-			"id": 444434,
-			"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+			"login": "t-hamano",
+			"id": 54422211,
+			"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/getdave",
-			"html_url": "https://github.com/getdave",
-			"followers_url": "https://api.github.com/users/getdave/followers",
-			"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-			"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-			"organizations_url": "https://api.github.com/users/getdave/orgs",
-			"repos_url": "https://api.github.com/users/getdave/repos",
-			"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/getdave/received_events",
+			"url": "https://api.github.com/users/t-hamano",
+			"html_url": "https://github.com/t-hamano",
+			"followers_url": "https://api.github.com/users/t-hamano/followers",
+			"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+			"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+			"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+			"repos_url": "https://api.github.com/users/t-hamano/repos",
+			"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "getdave",
-				"id": 444434,
-				"node_id": "MDQ6VXNlcjQ0NDQzNA==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/444434?v=4",
+				"login": "t-hamano",
+				"id": 54422211,
+				"node_id": "MDQ6VXNlcjU0NDIyMjEx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/54422211?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/getdave",
-				"html_url": "https://github.com/getdave",
-				"followers_url": "https://api.github.com/users/getdave/followers",
-				"following_url": "https://api.github.com/users/getdave/following{/other_user}",
-				"gists_url": "https://api.github.com/users/getdave/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/getdave/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/getdave/subscriptions",
-				"organizations_url": "https://api.github.com/users/getdave/orgs",
-				"repos_url": "https://api.github.com/users/getdave/repos",
-				"events_url": "https://api.github.com/users/getdave/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/getdave/received_events",
+				"url": "https://api.github.com/users/t-hamano",
+				"html_url": "https://github.com/t-hamano",
+				"followers_url": "https://api.github.com/users/t-hamano/followers",
+				"following_url": "https://api.github.com/users/t-hamano/following{/other_user}",
+				"gists_url": "https://api.github.com/users/t-hamano/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/t-hamano/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/t-hamano/subscriptions",
+				"organizations_url": "https://api.github.com/users/t-hamano/orgs",
+				"repos_url": "https://api.github.com/users/t-hamano/repos",
+				"events_url": "https://api.github.com/users/t-hamano/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/t-hamano/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -13947,131 +22915,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 3,
-		"created_at": "2021-06-30T08:29:04Z",
-		"updated_at": "2021-07-30T10:03:59Z",
-		"closed_at": "2021-07-30T10:03:32Z",
+		"comments": 12,
+		"created_at": "2023-08-12T13:51:17Z",
+		"updated_at": "2023-10-04T15:22:05Z",
+		"closed_at": "2023-09-29T11:31:06Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33086",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33086",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33086.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33086.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nThis PR enables rich previews in the link UI for _internal_ links. Currently we have a \"middleman\" method which short-circuits any attempts to fetch rich previews for internal URLs. However based on discussion in https://github.com/WordPress/gutenberg/issues/32689 this is not needed as the only thing that originally made me think those requests did not work was the `wp-env` environment setup.\r\n\r\nCloses https://github.com/WordPress/gutenberg/issues/32689\r\n\r\n## How has this been tested?\r\n\r\n### Testing environment\r\n\r\n⚠️ **Please do not use `wp-env` to test this PR.**\r\n\r\nThe best way to test this is on a site that is accessible to the internet or has a local hosts file mapping to ensure traffic can be routed to it. I recommend MAMP or Local by Flywheel (which is now free!). \r\n\r\nIf you attempt to test this using the default `wp-env` setup on `localhost:8888` then **it will not work**. That's _not_ a failure of the code, it's just a facet of the way WP ENV and Docker work.\r\n\r\nAside: you _could_ use ngrok if using `wp-env` but it's fairly \"involved\".\r\n\r\n### Awareness of caching\r\n\r\nAlso when testing this be aware that there are x2 caches involved:\r\n\r\n* Local in memory cache - will cache a request for a rich preview until you refresh the page.\r\n* Server side transient cache - will cache a request for a given URL for 1hr. You can turn this off by [shortcutting this conditional](https://github.com/WordPress/gutenberg/blob/a125447b6383e0a186e3614fdd886c61f2651a1c/lib/class-wp-rest-url-details-controller.php#L123) to make testing easier.\r\n\r\n### Testing Steps\r\n\r\n* Install the Gutenberg Plugin generated by GitHub action for this PR. You can [follow these steps](https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/) to guide you.\r\n* Ensure your site is **accessible to the internet**.\r\n* Go to the Customizer and set a `Site Icon` under `Site Identity`.\r\n* Create and publish a few Posts/Pages - make sure you assign a featured image and add a title, excerpt and some post content. I used FakerPress Plugin to do this for me.\r\n* Create a _fresh_ Post with some text.\r\n* Create a link to one of the Posts you previously created.\r\n* Click away from the link to close the link UI.\r\n* Click on the same link again to open the rich preview.\r\n* You should see a rich preview of that URL even though it is internal. By default you should see:\r\n   - correct page title\r\n   - correct site icon\r\n\r\n**Note**: unfortunately out of the box WP doesn't set a meta description or a reference to the canonical image for the page so we cannot reliably retrieve these items to display in the rich preview. @hellofromtonya any idea why this is? Why don't we set these by default?\r\n\r\n###  Bonus: testing even richer previews!\r\n\r\nIn order to prove this feature _does_ work if the correct meta data is made available in the page HTML, you can install a SEO Plugin to set these items for you.\r\n\r\n* Try installing ~Yoast SEO~ (don't install Yoast as they [overide the inline link UI](https://github.com/Yoast/wordpress-seo/blob/13c4be0b65b5d7efd7bc87ff211dc063f9879465/packages/js/src/inline-links/inline.js#L259-L264) so they won't get rich previews) **The SEO Framework** Plugin.\r\n* Remember the notes above regarding caches. You will probably want to disable these at this point to ensure you are seeing the latest data rather than a cache.\r\n* Retry the above and see the new previews with more metadata including:\r\n   - image of the page\r\n   - description of the page.\r\n\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\n### Out of the box (no SEO Plugin)\r\n\r\nhttps://user-images.githubusercontent.com/444434/127491380-e40c7ef8-cfb4-4641-aa23-d1bc8fa7baa4.mov\r\n\r\n### With SEO Plugin \r\n\r\n\r\nhttps://user-images.githubusercontent.com/444434/127491423-e8a3639c-a8f4-46db-9c64-938793e0d1c4.mp4\r\n\r\n\r\n\r\n\r\n\r\n## Types of changes\r\nNew feature (non-breaking change which adds functionality)\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53602",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53602",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53602.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53602.patch",
+			"merged_at": "2023-09-29T11:31:06Z"
+		},
+		"body": "Fixes: #53597\r\n\r\n## What?\r\n\r\n<!--\r\ncopilot:summary\r\n-->\r\n### <samp>🤖 Generated by Copilot at 65d02b2</samp>\r\n\r\nThis pull request refactors the PHP and JS functions that process nested CSS rules for global styles, and adds a unit test for the PHP function. The refactor fixes a bug that caused invalid CSS output when multiple root selectors were present, and improves the code readability and consistency.\r\n\r\n## Why?\r\n\r\n~The custom CSS for the block uses `__experimentSelector` in block.json as the root selector.~ The custom CSS for the block uses the selector obtained via the [Selectors API](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-selectors.md) as the root selector. For the List block, for example, there will be multiple selectors separated by commas, such as `ul,ol`.\r\n\r\nHowever, when nested CSS is defined in the global styles or `css` properties in `theme.json`, the current implementation does not take multiple selectors into account and treats them as a single selector, causing the issue reported in #53597.\r\n\r\n## How?\r\n\r\nWhen generating nested CSS, I first convert the root selectors into an array by splitting them with commas. Then, the nested selector is added to each root selector, which is an element of the array, and converted back into a comma-separated string.\r\n\r\n## Testing Instructions\r\n\r\n### preparation\r\n\r\n- Activate emptytheme.\r\n- If you have customized global styles, reset them once.\r\n- Insert two types of Listing blocks in the post editor.\r\n\r\n```html\r\n<!-- wp:list -->\r\n<ul><!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item --></ul>\r\n<!-- /wp:list -->\r\n\r\n<!-- wp:list {\"ordered\":true} -->\r\n<ol><!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item -->\r\n\r\n<!-- wp:list-item -->\r\n<li>List Item</li>\r\n<!-- /wp:list-item --></ol>\r\n<!-- /wp:list -->\r\n```\r\n\r\n### Via theme.json\r\n\r\n- Update theme.json as follows:\r\n\r\n```json\r\n{\r\n\t\"version\": 2,\r\n\t\"settings\": {\r\n\t\t\"layout\": {\r\n\t\t\t\"contentSize\": \"840px\",\r\n\t\t\t\"wideSize\": \"1100px\"\r\n\t\t}\r\n\t},\r\n\t\"styles\": {\r\n\t\t\"blocks\": {\r\n\t\t\t\"core/list\": {\r\n\t\t\t\t\"css\": \"background: #ccc; & ::marker{ color: red;}\"\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n```\r\n\r\nThe gray background color and red marker style should be correctly applied to both the Ordered and Unordered lists.\r\n\r\n### Via the Site Editor\r\n\r\n- Undo theme.json.\r\n- Go to the Site Editor and access the Additional CSS menu for the List block from the Global Styles menu.\r\n- Enter the following styles: `background: #ccc; & ::marker{ color: red;}`\r\n- The gray background color and red marker style should be correctly applied to both the Ordered and Unordered lists.\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53602/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33076",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33076/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33076/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33076/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33076",
-		"id": 933014755,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjgwMjg3MDQ0",
-		"number": 33076,
-		"title": "Template Mode: Add busy state to template creation modal",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53267",
+		"id": 1832963140,
+		"node_id": "PR_kwDOBNHdeM5W_5YT",
+		"number": 53267,
+		"title": "E2E Utils: Allow overriding username/password",
 		"user": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
+			"login": "juhi123",
+			"id": 8724401,
+			"node_id": "MDQ6VXNlcjg3MjQ0MDE=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/8724401?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
+			"url": "https://api.github.com/users/juhi123",
+			"html_url": "https://github.com/juhi123",
+			"followers_url": "https://api.github.com/users/juhi123/followers",
+			"following_url": "https://api.github.com/users/juhi123/following{/other_user}",
+			"gists_url": "https://api.github.com/users/juhi123/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/juhi123/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/juhi123/subscriptions",
+			"organizations_url": "https://api.github.com/users/juhi123/orgs",
+			"repos_url": "https://api.github.com/users/juhi123/repos",
+			"events_url": "https://api.github.com/users/juhi123/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/juhi123/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 531680823,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
+				"name": "[Type] Bug",
+				"color": "d93f0b",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 2978205898,
-				"node_id": "MDU6TGFiZWwyOTc4MjA1ODk4",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Template%20Editing%20Mode",
-				"name": "[Feature] Template Editing Mode",
-				"color": "FBCA04",
+				"id": 1267969886,
+				"node_id": "MDU6TGFiZWwxMjY3OTY5ODg2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20E2E%20Test%20Utils",
+				"name": "[Package] E2E Test Utils",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/e2e-test-utils"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "Mamaduka",
-			"id": 240569,
-			"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-			"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/Mamaduka",
-			"html_url": "https://github.com/Mamaduka",
-			"followers_url": "https://api.github.com/users/Mamaduka/followers",
-			"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-			"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-			"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-			"repos_url": "https://api.github.com/users/Mamaduka/repos",
-			"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "Mamaduka",
-				"id": 240569,
-				"node_id": "MDQ6VXNlcjI0MDU2OQ==",
-				"avatar_url": "https://avatars.githubusercontent.com/u/240569?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/Mamaduka",
-				"html_url": "https://github.com/Mamaduka",
-				"followers_url": "https://api.github.com/users/Mamaduka/followers",
-				"following_url": "https://api.github.com/users/Mamaduka/following{/other_user}",
-				"gists_url": "https://api.github.com/users/Mamaduka/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/Mamaduka/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/Mamaduka/subscriptions",
-				"organizations_url": "https://api.github.com/users/Mamaduka/orgs",
-				"repos_url": "https://api.github.com/users/Mamaduka/repos",
-				"events_url": "https://api.github.com/users/Mamaduka/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/Mamaduka/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14094,56 +23038,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 5,
-		"created_at": "2021-06-29T18:53:51Z",
-		"updated_at": "2021-08-12T08:12:44Z",
-		"closed_at": "2021-08-11T13:12:10Z",
-		"author_association": "MEMBER",
+		"comments": 0,
+		"created_at": "2023-08-02T11:05:53Z",
+		"updated_at": "2023-10-02T14:50:40Z",
+		"closed_at": "2023-10-02T14:50:16Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33076",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33076",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33076.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33076.patch"
-		},
-		"body": "## Description\r\nAdds busy state to the \"Create custom template\" modal — part of #32813.\r\n\r\nWhile this improves UX, it's not much. \r\n\r\nThe \"Edit\" template action is much faster, even when using network throttling. I think bottleneck here might be `getEditedPostTemplate()`. The selector has to re-fetch all the templates and find the new one by slug.\r\n\r\nhttps://github.com/WordPress/gutenberg/blob/a125447b6383e0a186e3614fdd886c61f2651a1c/packages/edit-post/src/editor.js#L98-L101\r\n\r\n## How has this been tested?\r\n1. Enable TT1 Blocks theme.\r\n2. Create page.\r\n3. Throttle network to 3G via DevTools.\r\n4. Create a new template.\r\n5. Name input filed should be disabled.\r\n6. Create button should have a busy state.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nhttps://user-images.githubusercontent.com/240569/123904119-01415700-d981-11eb-8074-1e10100c0f7a.mp4\r\n\r\n## Types of changes\r\nNew feature\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53267",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53267",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53267.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53267.patch",
+			"merged_at": "2023-10-02T14:50:15Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n`WP_ADMIN_USER` was hardcoded in [config.ts](https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils-playwright/src/config.ts#L2). Fixes #52598 \r\n\r\n## Why?\r\nBecause of hardcoded values, the credential variables was not passing through `.env` file and was giving 400 error\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\nAdd `.env` file in your test directory and run the tests, don't forget to add `require( 'dotenv' ).config();` in your playwright.config.ts\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53267/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33057",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33057/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33057/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33057/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33057",
-		"id": 932056398,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njc5NDU4NTIz",
-		"number": 33057,
-		"title": "[RNMobile] Prevent \"Undo Level\" after Setting Featured Image via Image Block",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/53026",
+		"id": 1824164198,
+		"node_id": "PR_kwDOBNHdeM5WiPas",
+		"number": 53026,
+		"title": "Image: Fix layout shift when lightbox is opened and closed",
 		"user": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "c4rl0sbr4v0",
+			"id": 37012961,
+			"node_id": "MDQ6VXNlcjM3MDEyOTYx",
+			"avatar_url": "https://avatars.githubusercontent.com/u/37012961?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/c4rl0sbr4v0",
+			"html_url": "https://github.com/c4rl0sbr4v0",
+			"followers_url": "https://api.github.com/users/c4rl0sbr4v0/followers",
+			"following_url": "https://api.github.com/users/c4rl0sbr4v0/following{/other_user}",
+			"gists_url": "https://api.github.com/users/c4rl0sbr4v0/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/c4rl0sbr4v0/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/c4rl0sbr4v0/subscriptions",
+			"organizations_url": "https://api.github.com/users/c4rl0sbr4v0/orgs",
+			"repos_url": "https://api.github.com/users/c4rl0sbr4v0/repos",
+			"events_url": "https://api.github.com/users/c4rl0sbr4v0/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/c4rl0sbr4v0/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -14153,27 +23113,18 @@
 				"node_id": "MDU6TGFiZWw1MzE2ODA4MjM=",
 				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug",
 				"name": "[Type] Bug",
-				"color": "d93f0b",
-				"default": false,
-				"description": "An existing feature is broken."
-			},
-			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"color": "d93f0b",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "An existing feature does not function as intended"
 			},
 			{
-				"id": 1022744205,
-				"node_id": "MDU6TGFiZWwxMDIyNzQ0MjA1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20library",
-				"name": "[Package] Block library",
-				"color": "ed2572",
+				"id": 1086171268,
+				"node_id": "MDU6TGFiZWwxMDg2MTcxMjY4",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Accessibility%20Feedback",
+				"name": "Needs Accessibility Feedback",
+				"color": "ffbcbd",
 				"default": false,
-				"description": "/packages/block-library"
+				"description": "Need input from accessibility"
 			},
 			{
 				"id": 1101518360,
@@ -14182,70 +23133,81 @@
 				"name": "[Block] Image",
 				"color": "6767e5",
 				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1141559759,
-				"node_id": "MDU6TGFiZWwxMTQxNTU5NzU5",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20History",
-				"name": "[Feature] History",
-				"color": "fbca04",
-				"default": false,
-				"description": "History, undo, redo, revisions, autosave."
+				"description": "Affects the Image Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "artemiomorales",
+			"id": 5360536,
+			"node_id": "MDQ6VXNlcjUzNjA1MzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/5360536?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/artemiomorales",
+			"html_url": "https://github.com/artemiomorales",
+			"followers_url": "https://api.github.com/users/artemiomorales/followers",
+			"following_url": "https://api.github.com/users/artemiomorales/following{/other_user}",
+			"gists_url": "https://api.github.com/users/artemiomorales/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/artemiomorales/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/artemiomorales/subscriptions",
+			"organizations_url": "https://api.github.com/users/artemiomorales/orgs",
+			"repos_url": "https://api.github.com/users/artemiomorales/repos",
+			"events_url": "https://api.github.com/users/artemiomorales/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/artemiomorales/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "SiobhyB",
-				"id": 2998162,
-				"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+				"login": "artemiomorales",
+				"id": 5360536,
+				"node_id": "MDQ6VXNlcjUzNjA1MzY=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/5360536?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/SiobhyB",
-				"html_url": "https://github.com/SiobhyB",
-				"followers_url": "https://api.github.com/users/SiobhyB/followers",
-				"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-				"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-				"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-				"repos_url": "https://api.github.com/users/SiobhyB/repos",
-				"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+				"url": "https://api.github.com/users/artemiomorales",
+				"html_url": "https://github.com/artemiomorales",
+				"followers_url": "https://api.github.com/users/artemiomorales/followers",
+				"following_url": "https://api.github.com/users/artemiomorales/following{/other_user}",
+				"gists_url": "https://api.github.com/users/artemiomorales/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/artemiomorales/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/artemiomorales/subscriptions",
+				"organizations_url": "https://api.github.com/users/artemiomorales/orgs",
+				"repos_url": "https://api.github.com/users/artemiomorales/repos",
+				"events_url": "https://api.github.com/users/artemiomorales/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/artemiomorales/received_events",
+				"type": "User",
+				"site_admin": false
+			},
+			{
+				"login": "c4rl0sbr4v0",
+				"id": 37012961,
+				"node_id": "MDQ6VXNlcjM3MDEyOTYx",
+				"avatar_url": "https://avatars.githubusercontent.com/u/37012961?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/c4rl0sbr4v0",
+				"html_url": "https://github.com/c4rl0sbr4v0",
+				"followers_url": "https://api.github.com/users/c4rl0sbr4v0/followers",
+				"following_url": "https://api.github.com/users/c4rl0sbr4v0/following{/other_user}",
+				"gists_url": "https://api.github.com/users/c4rl0sbr4v0/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/c4rl0sbr4v0/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/c4rl0sbr4v0/subscriptions",
+				"organizations_url": "https://api.github.com/users/c4rl0sbr4v0/orgs",
+				"repos_url": "https://api.github.com/users/c4rl0sbr4v0/repos",
+				"events_url": "https://api.github.com/users/c4rl0sbr4v0/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/c4rl0sbr4v0/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14268,131 +23230,107 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 24,
-		"created_at": "2021-06-28T22:57:48Z",
-		"updated_at": "2021-08-09T13:14:07Z",
-		"closed_at": "2021-08-09T13:13:40Z",
+		"comments": 28,
+		"created_at": "2023-07-27T11:21:24Z",
+		"updated_at": "2023-09-29T12:05:19Z",
+		"closed_at": "2023-09-28T17:12:42Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33057",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33057",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33057.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33057.patch"
-		},
-		"body": "This PR is intended as a temporary workaround for https://github.com/WordPress/gutenberg/issues/32937\r\n\r\n`gutenberg-mobile`: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3682\r\n\r\n## Description\r\n\r\nAs outlined in https://github.com/WordPress/gutenberg/issues/32937, the undo/redo functionality doesn't work as expected after setting a featured image via the image block.\r\n\r\nAfter setting a featured image via the block and then tapping undo, it appears as though the action has successfully reverted, as the **Featured** banner is removed from the block. However, the image still remains as the post's featured image.\r\n\r\nWith this PR, the issue is worked around by preventing an \"undo level\" from being created after a featured image is set via the image block. Tapping **undo** or **redo** immediately after setting a featured image via the image block should no longer have any effect.\r\n\r\nNote, this PR doesn't solve the original issue. In fact, it will introduce a new UX issue, since the undo/redo buttons won’t work as the user would expect i.e. an undo will revert changes they made just before setting a featured image, rather than the featured setting, and may be confusing. However, this inconvenience should be considered preferable to the current experience in production, where changes to the featured image via the image block are not saved, despite the UI indicating the undo is successful. \r\n\r\nThe **Future Considerations** section of this PR can be referred to for further hopes/considerations for any future iterations.\r\n\r\n## How has this been tested?\r\n\r\n* In the app, navigate to _Home_ → _Blog Posts_ to create a new blog post, one which doesn't already have a featured image set.\r\n* Add a new image block and upload an image to it.\r\n* Tap the image block's cog/gear icon to access its settings and then tap the **Set as Featured** button at the bottom.\r\n* Verify that you see a confirmation message about the newly set featured image and that the block now has a **Featured** banner overlaying it.\r\n* Tap the **undo** button in the app's toolbar.\r\n* With this PR, tapping undo should have _no effect_ on the post's featured image. Verify that tapping **undo** or **redo** _doesn't_ change the featured image by observing whether there are any changes to the **Featured** banner and verifying that the image remains the same via _Post Settings_.\r\n\r\n## Screenshots <!-- if applicable -->\r\n\r\nThe following screenshots show the before and after footer in the image settings, with the updated footer noting that the undo/redo buttons won't work as expected for users:\r\n\r\n| Before  | After |\r\n| ------------- | ------------- |\r\n| <img src=\"https://user-images.githubusercontent.com/2998162/113282237-8fecfc00-92de-11eb-9618-3f84c10e1720.png\" width=\"100%\"> | <img src=\"https://user-images.githubusercontent.com/2998162/128494892-5a44daa7-a097-445d-8beb-d86a0c6671c0.png\" width=\"100%\"> |\r\n\r\n## Types of changes\r\n\r\nThis PR introduces a bug fix (a non-breaking change that fixes an issue), with the following main changes to the code:\r\n\r\n* [A call to `editEntityRecord` is currently triggered](https://github.com/WordPress/gutenberg/pull/33057/files#diff-d45b169f7a1824d1f08790b97680e012bb30be66ed5714994a3959ba23cdee94R96) whenever a request to change the featured image is received from the apps (i.e. when the `Set/Remove as Featured` button is tapped from the image block). That action creator [includes an `undoIgnore` parameter](https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#editEntityRecord) that makes it possible to ignore an edit in the undo history. For our purposes, that parameter is set to true so that a new undo level *isn't* created after the featured image is updated via the app.\r\n* Additional text has also been added to the bottom of the image block's settings. [The additional text](https://github.com/WordPress/gutenberg/pull/33057/files#diff-7126ae03000a022bcefa0d2a5fb03b6aca56ed4047e3a49d2131babf229cf6c1R568) reads as follows: `Changes to featured image will not be affected by the undo/redo buttons `\r\n\r\n## Future Considerations\r\n\r\nAs a more permanent fix for the original problem, the team discussed adding side effects to the undo/redo buttons, however, this deviates a lot from existing patterns in Gutenberg and is something we decided against pursuing.\r\n\r\nThe ideal fix would involve completely refactoring the existing data flow so that Gutenberg’s store is the primary location that the apps read from. A refactor would involve the following non-trivial changes:\r\n\r\n* Refactoring the _Post Settings_ flow will require changes in the Android and iOS codebases, with careful testing to account for all the unknowns. There’s also the possibility of this raising a wider architectural debate around the _Post Settings_ panel in the apps, potentially including redesigning the whole user flow.\r\n* The logic around a confirmation dialog currently exists on the native side of each app ([here](https://github.com/wordpress-mobile/WordPress-Android/blob/develop/libs/editor/WordPressEditor/src/main/java/org/wordpress/android/editor/gutenberg/GutenbergEditorFragment.java#L820) for Android and [here](https://href.li/?https://github.com/wordpress-mobile/WordPress-iOS/pull/16427/files#diff-beacfffc3f8a87edf94895da980a81e356f1b5aa7998f70791bc7baec9a11731R695) for iOS). This will need to be refactored so that it lives on the JS side. Again, this would be a desirable endpoint that would actually aid in implementing [this enhancement](https://github.com/WordPress/gutenberg/issues/30410). It has also been suggested that the confirmation dialog could be removed completely, which would be an interesting idea to explore with the design team.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/53026",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/53026",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/53026.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/53026.patch",
+			"merged_at": "2023-09-28T17:12:42Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nCurrently, opening and closing the lightbox causes the website layout to shift, which can cause the zoom animation to appear broken, particularly on mobile. It is also possible to scroll the webpage while the lightbox is open by directly manipulating the scrollbar or using a mobile device, which is not in line with web standards.\r\n\r\nThis PR improves the lightbox implementation by removing the layout shift and updating the scroll handling so that the lightbox behaves reliably whenever a scroll is performed.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nWe want to offer a polished lightbox experience, and the current experience appears broken in some cases. \r\n\r\n## How?\r\nThis PR removes `overflow: hidden` from the styles and updates the callback for the scroll handling.\r\n\r\nNote: Expected behavior is that scrolling will be disabled on both desktop and mobile.\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a post or page. -->\r\n<!-- 2. Insert a heading block. -->\r\n<!-- 3. etc. -->\r\n\r\n1. Insert an image in a post and add enough content to ensure that the scrollbar will be visible.\r\n2. Enable the lightbox using the block settings.\r\n4. Publish and view the post on desktop.\r\n5. Click on the image to open and close the lightbox — make sure that the scrollbar remains intact and that there is no layout shift.\r\n6. Attempt scrolling while the lightbox is open using the mousewheel, `up` and `down` arrow keys, the `PageUp` and `PageDown` keys, and by directly clicking and dragging the scrollbar — verify that the lightbox stays open and doesn't scroll when performing any of those actions.\r\n7. On mobile devices, test that scrolling is disabled and that the lightbox remains open when attempting to scroll using touch input. Test also that pinch to zoom while the lightbox is open works reasonably well.\r\n\r\n## Screenshare\r\n\r\n### Layout Shift Demonstration\r\n\r\n#### Before the Fix\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/5360536/3789a30b-5df3-42d3-85aa-c4369f61bd77\r\n\r\n#### After the Fix\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/5360536/3682b764-17a0-4964-9d9f-2f9cdc4f777f\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/53026/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/33021",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33021/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33021/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/33021/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/33021",
-		"id": 931251741,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0Njc4Nzc0OTI4",
-		"number": 33021,
-		"title": "Fix navigation margin collapsing.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/52988",
+		"id": 1822727095,
+		"node_id": "PR_kwDOBNHdeM5WdYrK",
+		"number": 52988,
+		"title": "Footnotes: use core’s meta revisioning if available",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "adamsilverstein",
+			"id": 2676022,
+			"node_id": "MDQ6VXNlcjI2NzYwMjI=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/2676022?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/adamsilverstein",
+			"html_url": "https://github.com/adamsilverstein",
+			"followers_url": "https://api.github.com/users/adamsilverstein/followers",
+			"following_url": "https://api.github.com/users/adamsilverstein/following{/other_user}",
+			"gists_url": "https://api.github.com/users/adamsilverstein/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/adamsilverstein/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/adamsilverstein/subscriptions",
+			"organizations_url": "https://api.github.com/users/adamsilverstein/orgs",
+			"repos_url": "https://api.github.com/users/adamsilverstein/repos",
+			"events_url": "https://api.github.com/users/adamsilverstein/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/adamsilverstein/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1105588141,
-				"node_id": "MDU6TGFiZWwxMTA1NTg4MTQx",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Columns",
-				"name": "[Block] Columns",
-				"color": "6767e5",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": ""
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1225853227,
-				"node_id": "MDU6TGFiZWwxMjI1ODUzMjI3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Navigation",
-				"name": "[Block] Navigation",
+				"id": 5654261232,
+				"node_id": "LA_kwDOBNHdeM8AAAABUQUt8A",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Footnotes",
+				"name": "[Block] Footnotes",
 				"color": "6767e5",
 				"default": false,
-				"description": ""
+				"description": "Affects the Footnotes Block"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14415,122 +23353,185 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 2,
-		"created_at": "2021-06-28T07:15:15Z",
-		"updated_at": "2021-08-10T10:46:43Z",
-		"closed_at": "2021-08-10T10:46:21Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 37,
+		"created_at": "2023-07-26T15:59:00Z",
+		"updated_at": "2023-10-03T08:36:46Z",
+		"closed_at": "2023-09-29T16:40:05Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/33021",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/33021",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/33021.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/33021.patch"
-		},
-		"body": "## Description\r\n\r\nFixes #33002, but is blocked on #32659 landing first.\r\n\r\nWhen the navigation block is used inside a columns block, menu items collapse like so:\r\n\r\n<img width=\"821\" alt=\"Screenshot 2021-06-28 at 08 50 49\" src=\"https://user-images.githubusercontent.com/1204802/123593933-58afbd80-d7ef-11eb-9070-6695ebe1443f.png\">\r\n\r\nThis is because navigation menu items have low specificity margins and paddings, and those paddings are overridden by some classic styles we have in place. Observe:\r\n\r\n![issue](https://user-images.githubusercontent.com/1204802/123594207-b9d79100-d7ef-11eb-9901-15ef72d3ab81.gif)\r\n\r\nThese styles specifically:\r\n\r\n<img width=\"398\" alt=\"Screenshot 2021-06-28 at 08 52 16\" src=\"https://user-images.githubusercontent.com/1204802/123594244-c22fcc00-d7ef-11eb-897b-6e6fdb27acce.png\">\r\n\r\nThose styles exist to unset the auto margins classic themes use to center in the main column, and since they have high specificity, they win this battle.\r\n\r\nIn #32659, `:where` is introduced to lower the specificity of the two \"reset\" stylesheets we have. The behavior is best demonstrated in [this codepen](https://codepen.io/joen/pen/abJVrGX), but it can be described as lowering the specificity to a \"use these styles if nothing else styles it\", which makes it a great tool to provide default styles or baseline styles. This PR does the same for this rule, fixing the problem:\r\n\r\n<img width=\"805\" alt=\"Screenshot 2021-06-28 at 08 59 06\" src=\"https://user-images.githubusercontent.com/1204802/123594860-7d586500-d7f0-11eb-967e-c7fef916f2e2.png\">\r\n\r\nNote that this PR alone will only fix the issue for block themes. In order for the problem to also be fixed for classic themes, the specificity of the resets will also need to be reduced, or _they_ will take precedence. So #32659 will need to land as well. \r\n\r\n**Why not just increase specificity?**\r\n\r\nThis has been our go-to so far, but as more and more properties are absorbed by global styles, this strategy won't work. For global styles to be able to affect paddings and margins of blocks, those block need to have minimal specificity or the global styles won't work at all. See also #32574.\r\n\r\n\r\n## How has this been tested?\r\n\r\nInsert two navigation blocks, one of them inside a column. Both navigation blocks should have the same margin between them.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/52988",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/52988",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/52988.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/52988.patch",
+			"merged_at": "2023-09-29T16:40:05Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nSee:\r\nhttps://core.trac.wordpress.org/ticket/20564 and\r\nhttps://github.com/WordPress/wordpress-develop/pull/4859\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\n\r\n## Testing Instructions\r\n<!-- Please include step by step instructions on how to test this PR. -->\r\n<!-- 1. Open a Post or Page. -->\r\n<!-- 2. Insert a Heading Block. -->\r\n<!-- 3. etc. -->\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52988/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/32659",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32659/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32659/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32659/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/32659",
-		"id": 920292495,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjY5NDYzNDEx",
-		"number": 32659,
-		"title": "Try: Reduce specificity of reset & classic styles.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/52674",
+		"id": 1807031001,
+		"node_id": "PR_kwDOBNHdeM5VoaGD",
+		"number": 52674,
+		"title": "Site Editor: Add 'Show template' toggle when editing pages",
 		"user": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "noisysocks",
+			"id": 612155,
+			"node_id": "MDQ6VXNlcjYxMjE1NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/612155?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/noisysocks",
+			"html_url": "https://github.com/noisysocks",
+			"followers_url": "https://api.github.com/users/noisysocks/followers",
+			"following_url": "https://api.github.com/users/noisysocks/following{/other_user}",
+			"gists_url": "https://api.github.com/users/noisysocks/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/noisysocks/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/noisysocks/subscriptions",
+			"organizations_url": "https://api.github.com/users/noisysocks/orgs",
+			"repos_url": "https://api.github.com/users/noisysocks/repos",
+			"events_url": "https://api.github.com/users/noisysocks/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/noisysocks/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 1999059055,
-				"node_id": "MDU6TGFiZWwxOTk5MDU5MDU1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/CSS%20Styling",
-				"name": "CSS Styling",
-				"color": "63e2d2",
+				"id": 644027893,
+				"node_id": "MDU6TGFiZWw2NDQwMjc4OTM=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Needs%20Design%20Feedback",
+				"name": "Needs Design Feedback",
+				"color": "0e8a16",
+				"default": false,
+				"description": "Needs general design feedback."
+			},
+			{
+				"id": 1789344476,
+				"node_id": "MDU6TGFiZWwxNzg5MzQ0NDc2",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Feature",
+				"name": "[Type] Feature",
+				"color": "2e8daa",
+				"default": false,
+				"description": "New feature to highlight in changelogs."
+			},
+			{
+				"id": 2706102777,
+				"node_id": "MDU6TGFiZWwyNzA2MTAyNzc3",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Site%20Editor",
+				"name": "[Feature] Site Editor",
+				"color": "fbca04",
+				"default": false,
+				"description": "Related to the overarching Site Editor (formerly \"full site editing\")"
+			},
+			{
+				"id": 5663509033,
+				"node_id": "LA_kwDOBNHdeM8AAAABUZJKKQ",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Page%20Content%20Focus",
+				"name": "[Feature] Page Content Focus",
+				"color": "FBCA04",
 				"default": false,
-				"description": "Related to editor and front end styles, CSS-specific issues."
+				"description": "Ability to toggle between focusing on editing the page and editing the template in the site editor."
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "jasmussen",
-			"id": 1204802,
-			"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
+			"login": "noisysocks",
+			"id": 612155,
+			"node_id": "MDQ6VXNlcjYxMjE1NQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/612155?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/jasmussen",
-			"html_url": "https://github.com/jasmussen",
-			"followers_url": "https://api.github.com/users/jasmussen/followers",
-			"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-			"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-			"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-			"repos_url": "https://api.github.com/users/jasmussen/repos",
-			"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+			"url": "https://api.github.com/users/noisysocks",
+			"html_url": "https://github.com/noisysocks",
+			"followers_url": "https://api.github.com/users/noisysocks/followers",
+			"following_url": "https://api.github.com/users/noisysocks/following{/other_user}",
+			"gists_url": "https://api.github.com/users/noisysocks/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/noisysocks/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/noisysocks/subscriptions",
+			"organizations_url": "https://api.github.com/users/noisysocks/orgs",
+			"repos_url": "https://api.github.com/users/noisysocks/repos",
+			"events_url": "https://api.github.com/users/noisysocks/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/noisysocks/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "jasmussen",
-				"id": 1204802,
-				"node_id": "MDQ6VXNlcjEyMDQ4MDI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/1204802?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/jasmussen",
-				"html_url": "https://github.com/jasmussen",
-				"followers_url": "https://api.github.com/users/jasmussen/followers",
-				"following_url": "https://api.github.com/users/jasmussen/following{/other_user}",
-				"gists_url": "https://api.github.com/users/jasmussen/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/jasmussen/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/jasmussen/subscriptions",
-				"organizations_url": "https://api.github.com/users/jasmussen/orgs",
-				"repos_url": "https://api.github.com/users/jasmussen/repos",
-				"events_url": "https://api.github.com/users/jasmussen/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/jasmussen/received_events",
+				"login": "noisysocks",
+				"id": 612155,
+				"node_id": "MDQ6VXNlcjYxMjE1NQ==",
+				"avatar_url": "https://avatars.githubusercontent.com/u/612155?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/noisysocks",
+				"html_url": "https://github.com/noisysocks",
+				"followers_url": "https://api.github.com/users/noisysocks/followers",
+				"following_url": "https://api.github.com/users/noisysocks/following{/other_user}",
+				"gists_url": "https://api.github.com/users/noisysocks/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/noisysocks/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/noisysocks/subscriptions",
+				"organizations_url": "https://api.github.com/users/noisysocks/orgs",
+				"repos_url": "https://api.github.com/users/noisysocks/repos",
+				"events_url": "https://api.github.com/users/noisysocks/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/noisysocks/received_events",
+				"type": "User",
+				"site_admin": false
+			},
+			{
+				"login": "ramonjd",
+				"id": 6458278,
+				"node_id": "MDQ6VXNlcjY0NTgyNzg=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6458278?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/ramonjd",
+				"html_url": "https://github.com/ramonjd",
+				"followers_url": "https://api.github.com/users/ramonjd/followers",
+				"following_url": "https://api.github.com/users/ramonjd/following{/other_user}",
+				"gists_url": "https://api.github.com/users/ramonjd/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/ramonjd/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/ramonjd/subscriptions",
+				"organizations_url": "https://api.github.com/users/ramonjd/orgs",
+				"repos_url": "https://api.github.com/users/ramonjd/repos",
+				"events_url": "https://api.github.com/users/ramonjd/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/ramonjd/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14553,149 +23554,98 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 35,
-		"created_at": "2021-06-14T10:55:33Z",
-		"updated_at": "2021-08-09T07:00:20Z",
-		"closed_at": "2021-08-09T06:59:54Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 22,
+		"created_at": "2023-07-17T05:53:14Z",
+		"updated_at": "2023-09-25T07:20:42Z",
+		"closed_at": "2023-09-20T22:57:45Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/32659",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/32659",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/32659.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/32659.patch"
-		},
-		"body": "## Description\r\n\r\nWe have two stylesheets that are created to normalize the editing canvas: `reset.scss` and `classic.scss`.\r\n\r\n- The first one exists because the editing canvas in the post editor is not inside an iframe, so it is subject to CSS bleed from wp-admin and other styles. The reset unsets a number of element styles to provide a blank canvas to build theme styles on.\r\n- The other one, `classic.scss` is loaded for classic themes, and primarily serves to provide left/right/wide/full-wide alignment styles. Block themes do not need these, as those alignments are served by a `layout` property and handled by the system.\r\n\r\nIn both cases, while the styles are necessary, they should have as low specificity as is possible. The lower the specificity, the easier it is for a theme to style things in a nice way. \r\n\r\nThere is a new selector, called `:where`, which is able to provide default styles with lowered specificity. Some of the details on how that works are outlined in [this article](https://css-tricks.com/almanac/selectors/w/where/), but you can also check out [this codepen for an example](https://codepen.io/joen/pen/abJVrGX). That selector is theoretically ideal for these resets, because it allows us to reduce the specificity quite a bit, letting both theme and block styles win any specificity fight they get into. In this PR, I tried employing that selector for those resets. \r\n\r\nOverall, it worked very well, especially for the reset which just feels perfect. Here's before and after using \"empty theme\" — and they should look identical, only with the new version having lower specificity:\r\n\r\n<img width=\"932\" alt=\"Screenshot 2021-06-14 at 12 39 12\" src=\"https://user-images.githubusercontent.com/1204802/121880710-9e0fbd80-cd0e-11eb-85e0-c14fc7e20837.png\">\r\n\r\nAfter:\r\n\r\n<img width=\"947\" alt=\"Screenshot 2021-06-14 at 12 40 05\" src=\"https://user-images.githubusercontent.com/1204802/121880715-a0721780-cd0e-11eb-81b5-421897181e96.png\">\r\n\r\nFor other themes, here I tested TT1, it solved [this problem](https://github.com/WordPress/gutenberg/pull/32574#pullrequestreview-682298435) surfaced by @carolinan, where `margin-left: auto; margin-right: auto;` overrides the default navigation item margin, causing them to collapse. Before:\r\n\r\n<img width=\"885\" alt=\"beftt1\" src=\"https://user-images.githubusercontent.com/1204802/121880874-d0b9b600-cd0e-11eb-9a37-4836c3d2d22e.png\">\r\n\r\n(don't mind the padding, that's a separate issue)\r\n\r\nAfter:\r\n\r\n<img width=\"832\" alt=\"afttt1\" src=\"https://user-images.githubusercontent.com/1204802/121880915-db744b00-cd0e-11eb-9d7a-3b3f868c4229.png\">\r\n\r\n_In these screenshots, the navigation menu is justified right_.\r\n\r\nThe primary \"gotcha\" I encountered is that themes commonly apply a `margin-left: 0;` on `ol` and `ul` elements, which seems an innocent and sensible change over the defaults. The problem is that for classic themes, the `margin-left: auto; margin-right: auto;` rules exist (along with a `max-width`) to center a _block_ inside a post content column that supports wide and fullwide images. When left margins are zeroed out, it effectively means a left-aligned list block. In trunk, the auto-margins win due to their intrinsic specificity. But with the lowered specificity of this branch, the zero margin now wins. \r\n\r\nFor that reason, I included [a targeted](https://github.com/WordPress/gutenberg/compare/try/reduced-specificity-resets?expand=1#diff-5763ee427967f4474bd5a1cd169547cd483a1955b2b705e8c61b898da999f5cbR11) rule for `ol` and `ul` elements, to keep their specificity. It's not an inclusion I love, but it feels necessary as the change feels very common. What do you think?\r\n\r\n## How has this been tested?\r\n\r\n- Please test a variety of blocks and content in this branch. The demo content is good, but please at least include a justified-right navigation block, an image, and a list block. \r\n- Please test wide and fullwide blocks.\r\n- Please test primarily in classic themes like TT1 or older.\r\n- Please also test Empty Theme and verify that before and after are identical.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/52674",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/52674",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/52674.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/52674.patch",
+			"merged_at": "2023-09-20T22:57:45Z"
+		},
+		"body": "## What?\r\nFirst pass at adding a _Show template_ toggle to the site editor when editing a page. Toggling this hides the blocks belonging to the template entirely so that you're left with a minimal interface that mimics the post editor.\r\n\r\n## Why?\r\nAllows users to focus on their content when desired. Moreover, it is small a step towards one day unifying the post editor and site editor. See item 3 in https://github.com/WordPress/gutenberg/issues/41717.\r\n\r\n## How?\r\nWe re-use the approach that the site editor has for editing a `wp_navigation` CPT but instead of creating a fake `core/navigation` block we create a fake `core/group` block containing a `core/post-title, `core/post-content` and `core/post-featured-image`. These blocks are shown in the same order they appear in the template and do not appear if the template doesn't have it.\r\n\r\n## Testing Instructions\r\n\r\n1. Go to Appearance → Editor → Pages, select or create a page, then edit it.\r\n2. In the Page settings sidebar, click on the Template dropdown and toggle \"Show template\" and \"Hide template\"\r\n3. Check that the page content blocks are the same between hide/show modes.\r\n4. Hide the template and then navigate away from edit mode in the site editor by clicking on the WP logo. The template should reappear in view mode.\r\n5. Navigate to another section, e.g., Patterns, then return to the same page you edited previously\r\n6. The page blocks should appear as expected\r\n\r\nRun some tests:\r\n\r\n```\r\nnpm run test:unit packages/edit-site/src/components/block-editor/block-editor-provider/test/use-page-content-blocks.js\r\n```\r\n\r\n## Screenshots or screencast \r\n\r\nhttps://github.com/WordPress/gutenberg/assets/6458278/41792555-9c99-4b5e-86a2-24638352f361\r\n\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/52674/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/32392",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32392/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32392/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/32392/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/32392",
-		"id": 909265961,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjU5ODY1MDk0",
-		"number": 32392,
-		"title": "Dimensions Panel: Add new ToolsPanel component and update spacing supports",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/51884",
+		"id": 1773627556,
+		"node_id": "PR_kwDOBNHdeM5T3KQR",
+		"number": 51884,
+		"title": "Fix e2e test: ”WP Editor Meta Boxes > Should save the changes”",
 		"user": {
-			"login": "aaronrobertshaw",
-			"id": 60436221,
-			"node_id": "MDQ6VXNlcjYwNDM2MjIx",
-			"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
+			"login": "stokesman",
+			"id": 9000376,
+			"node_id": "MDQ6VXNlcjkwMDAzNzY=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/9000376?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/aaronrobertshaw",
-			"html_url": "https://github.com/aaronrobertshaw",
-			"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
-			"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
-			"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
-			"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
-			"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
+			"url": "https://api.github.com/users/stokesman",
+			"html_url": "https://github.com/stokesman",
+			"followers_url": "https://api.github.com/users/stokesman/followers",
+			"following_url": "https://api.github.com/users/stokesman/following{/other_user}",
+			"gists_url": "https://api.github.com/users/stokesman/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/stokesman/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/stokesman/subscriptions",
+			"organizations_url": "https://api.github.com/users/stokesman/orgs",
+			"repos_url": "https://api.github.com/users/stokesman/repos",
+			"events_url": "https://api.github.com/users/stokesman/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/stokesman/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
-				"default": false,
-				"description": "A suggestion for improvement."
-			},
-			{
-				"id": 546156315,
-				"node_id": "MDU6TGFiZWw1NDYxNTYzMTU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Block%20API",
-				"name": "[Feature] Block API",
-				"color": "fbca04",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1800807983,
-				"node_id": "MDU6TGFiZWwxODAwODA3OTgz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Global%20Styles",
-				"name": "Global Styles",
-				"color": "2100b7",
-				"default": false,
-				"description": ""
-			},
-			{
-				"id": 1894493554,
-				"node_id": "MDU6TGFiZWwxODk0NDkzNTU0",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Design%20Tools",
-				"name": "[Feature] Design Tools",
-				"color": "f7f771",
+				"id": 615503111,
+				"node_id": "MDU6TGFiZWw2MTU1MDMxMTE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Automated%20Testing",
+				"name": "[Type] Automated Testing",
+				"color": "111111",
 				"default": false,
-				"description": "Tools that manipulate visual aspects of blocks."
+				"description": "Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests."
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "aaronrobertshaw",
-			"id": 60436221,
-			"node_id": "MDQ6VXNlcjYwNDM2MjIx",
-			"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/aaronrobertshaw",
-			"html_url": "https://github.com/aaronrobertshaw",
-			"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
-			"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
-			"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
-			"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
-			"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
-			"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "aaronrobertshaw",
-				"id": 60436221,
-				"node_id": "MDQ6VXNlcjYwNDM2MjIx",
-				"avatar_url": "https://avatars.githubusercontent.com/u/60436221?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/aaronrobertshaw",
-				"html_url": "https://github.com/aaronrobertshaw",
-				"followers_url": "https://api.github.com/users/aaronrobertshaw/followers",
-				"following_url": "https://api.github.com/users/aaronrobertshaw/following{/other_user}",
-				"gists_url": "https://api.github.com/users/aaronrobertshaw/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/aaronrobertshaw/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/aaronrobertshaw/subscriptions",
-				"organizations_url": "https://api.github.com/users/aaronrobertshaw/orgs",
-				"repos_url": "https://api.github.com/users/aaronrobertshaw/repos",
-				"events_url": "https://api.github.com/users/aaronrobertshaw/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/aaronrobertshaw/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14718,82 +23668,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 58,
-		"created_at": "2021-06-02T09:02:27Z",
-		"updated_at": "2021-08-12T15:13:34Z",
-		"closed_at": "2021-08-10T23:44:00Z",
+		"comments": 3,
+		"created_at": "2023-06-26T01:19:08Z",
+		"updated_at": "2023-09-20T14:12:17Z",
+		"closed_at": "2023-09-20T14:11:51Z",
 		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/32392",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/32392",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/32392.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/32392.patch"
-		},
-		"body": "Part of: https://github.com/WordPress/gutenberg/issues/28356\r\n\r\n## Description\r\n\r\n- Adds new `ToolsPanel` components\r\n- Uses the new components to refactor spacing block supports into a \"Dimensions\" panel.\r\n\r\nThe new panel component offers progressive discovery options for `ToolsPanelItem` wrapped components e.g. those provided through block supports. \r\n\r\nIt uses callbacks passed as props on the panel's children to check for values, handle child selection/deselection in the menu etc. In the case of block support controls, the `onDeselect` callback can reset the block attribute value. \r\n\r\nThe `ToolsPanel` automatically generates its menu from children that register themselves via the panel's context. The initial state managing which controls are displayed and therefore selected in the menu is based off the `hasValue` callback and an `isShownByDefault` prop.\r\n\r\nA custom `resetAll` callback is passed to the panel and called when the associated menu item is selected. For the a panel displaying block support controls such as the dimensions panel, the `resetAll` callback will reset all block attributes for the dimensions related support. \r\n\r\n#### G2 Components\r\nThe [demo typography panel](https://g2-components.xyz/?path=/story/designtools-presentation-typographypanel--default) from the G2 project still needs a few underlying components and systems to be imported into Gutenberg. The approach in this PR works now and may unblock other block supports work.\r\n\r\nNew designs/G2 components for the individual block support controls can be iterated on separately.\r\n\r\n## How has this been tested?\r\nProgrammatic tests are available for the new panel: \r\n- `npm run test-unit packages/components/src/tools-panel/test/`\r\n\r\nStorybook: \r\n- `npm run storybook:dev`\r\n-  http://localhost:50240/?path=/story/components-toolspanel--default\r\n\r\nManual testing is required for the updates switching the spacing block support UI to the new panel and \"Dimensions\" naming.\r\n\r\n#### Testing Setup\r\n\r\nThe easiest block to test with is the group block. \r\n\r\n1. Turn on `settings.spacing.customMargin` under your theme.json file.\r\n2. Update the group block's `block.json` and turn on margin support under `supports.spacing`.\r\n3. Add new `__experimentalDefaultControls` flag under `settings.spacing` in block.json to specify which block support controls are displayed by default.\r\n\r\nThe example below configures only the padding control to show by default.\r\n```json\r\n\t\t\"spacing\": {\r\n\t\t\t\"margin\": true,\r\n\t\t\t\"padding\": true,\r\n\t\t\t\"__experimentalDefaultControls\": {\r\n\t\t\t\t\"padding\": true\r\n\t\t\t}\r\n\t\t},\r\n```\r\n\r\n#### Testing Instructions\r\n\r\nThe following instructions assume the padding control was enabled by default as per the snippet above.\r\n\r\n1. Edit a post, add a group block and select it\r\n2. Confirm there is a new \"Dimensions\" panel in the sidebar in place of the old \"Spacing\" panel\r\n3. Ensure the padding control is already displayed in the Dimensions panel\r\n4. Select margin control for display via the \"Dimensions\" panel's \"more\" menu\r\n5. Adjust padding and margin, confirming they update the block appropriately\r\n6. Open the more menu and toggle off the padding control\r\n7. Confirm the padding control is no longer shown\r\n8. Open the more menu once more and toggle off the margin control\r\n9. The margin control should be removed as well\r\n10. Toggle both controls back on and confirm they've been reset\r\n11. Adjust both padding and margin values, then select the \"reset all\" option from the more menu\r\n12. Confirm only the padding control is displayed but has been cleared\r\n13. Toggling margin back on and adjust both values again, then save\r\n14. Confirm margin and padding are displayed correctly on the frontend\r\n15. Reload the editor and confirm that the \"Dimensions\" panel has both fields displayed\r\n16. Choose the \"Reset all\" option from the panel menu again and save\r\n17. Reload both the editor and frontend checking the padding and margin were cleared\r\n18. Open the full site editor, open the Global Styles sidebar, then the \"By block type\" tab\r\n19. Expand the Group block's panel and confirm the \"Dimensions\" panel is present with both margin and padding shown by default. \r\n\r\n## Screenshots <!-- if applicable -->\r\n#### With Default Controls\r\n<img src=\"https://user-images.githubusercontent.com/60436221/120792288-9e72c080-c578-11eb-81ff-1d165e21f185.gif\" width=\"300\" />\r\n\r\n#### Without Default Controls\r\n<img src=\"https://user-images.githubusercontent.com/60436221/120450642-fe7c3200-c3d3-11eb-9f61-a578999f84c2.gif\" width=\"500\"/>\r\n\r\n\r\n## Types of changes\r\nNew feature.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/51884",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/51884",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/51884.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/51884.patch",
+			"merged_at": "2023-09-20T14:11:51Z"
+		},
+		"body": "## What?\r\nAn improvement of an e2e test.\r\n\r\n## Why?\r\nTo help restore the original intent of the test, reduce some potential for flakiness and abide by Playwright recommendations.\r\n\r\n## How?\r\n- Changes from deprecated page-based methods to locator-based ones, e.g. page.click() -> locator.click()\r\n- Restores a `page.reload()` that was lost and eliminates a bit of cruft that was introduced in the migration from Puppeteer #41519\r\n- Eliminates a step that seems to have been introduced only to patch a problem caused by the previous point #43708\r\n- Introduces a wait to avoid some potential flakiness.\r\n\r\n## Testing Instructions\r\n```\r\nnpm run test:e2e:playwright -- wp-editor-meta-box\r\n```\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51884/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/31774",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31774/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31774/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31774/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/31774",
-		"id": 890567655,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjQzNTcwNzYw",
-		"number": 31774,
-		"title": "[Button Block]: Add padding block support",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/51350",
+		"id": 1748280657,
+		"node_id": "PR_kwDOBNHdeM5Sime6",
+		"number": 51350,
+		"title": "SlotFill: Migrate to Typescript.",
 		"user": {
-			"login": "stacimc",
-			"id": 63313398,
-			"node_id": "MDQ6VXNlcjYzMzEzMzk4",
-			"avatar_url": "https://avatars.githubusercontent.com/u/63313398?v=4",
+			"login": "torounit",
+			"id": 1908815,
+			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+			"gravatar_id": "",
+			"url": "https://api.github.com/users/torounit",
+			"html_url": "https://github.com/torounit",
+			"followers_url": "https://api.github.com/users/torounit/followers",
+			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+			"organizations_url": "https://api.github.com/users/torounit/orgs",
+			"repos_url": "https://api.github.com/users/torounit/repos",
+			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/torounit/received_events",
+			"type": "User",
+			"site_admin": false
+		},
+		"labels": [
+			{
+				"id": 930001208,
+				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
+				"name": "[Type] Code Quality",
+				"color": "e5e04b",
+				"default": false,
+				"description": "Issues or PRs that relate to code quality"
+			},
+			{
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
+				"color": "ed2572",
+				"default": false,
+				"description": "/packages/components"
+			}
+		],
+		"state": "closed",
+		"locked": false,
+		"assignee": {
+			"login": "torounit",
+			"id": 1908815,
+			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/stacimc",
-			"html_url": "https://github.com/stacimc",
-			"followers_url": "https://api.github.com/users/stacimc/followers",
-			"following_url": "https://api.github.com/users/stacimc/following{/other_user}",
-			"gists_url": "https://api.github.com/users/stacimc/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/stacimc/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/stacimc/subscriptions",
-			"organizations_url": "https://api.github.com/users/stacimc/orgs",
-			"repos_url": "https://api.github.com/users/stacimc/repos",
-			"events_url": "https://api.github.com/users/stacimc/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/stacimc/received_events",
+			"url": "https://api.github.com/users/torounit",
+			"html_url": "https://github.com/torounit",
+			"followers_url": "https://api.github.com/users/torounit/followers",
+			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+			"organizations_url": "https://api.github.com/users/torounit/orgs",
+			"repos_url": "https://api.github.com/users/torounit/repos",
+			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/torounit/received_events",
 			"type": "User",
 			"site_admin": false
 		},
-		"labels": [
+		"assignees": [
 			{
-				"id": 1112969457,
-				"node_id": "MDU6TGFiZWwxMTEyOTY5NDU3",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Buttons",
-				"name": "[Block] Buttons",
-				"color": "6767e5",
-				"default": false,
-				"description": ""
+				"login": "torounit",
+				"id": 1908815,
+				"node_id": "MDQ6VXNlcjE5MDg4MTU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+				"gravatar_id": "",
+				"url": "https://api.github.com/users/torounit",
+				"html_url": "https://github.com/torounit",
+				"followers_url": "https://api.github.com/users/torounit/followers",
+				"following_url": "https://api.github.com/users/torounit/following{/other_user}",
+				"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
+				"organizations_url": "https://api.github.com/users/torounit/orgs",
+				"repos_url": "https://api.github.com/users/torounit/repos",
+				"events_url": "https://api.github.com/users/torounit/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/torounit/received_events",
+				"type": "User",
+				"site_admin": false
 			}
 		],
-		"state": "closed",
-		"locked": false,
-		"assignee": null,
-		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14816,149 +23831,147 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 11,
-		"created_at": "2021-05-12T23:38:47Z",
-		"updated_at": "2021-08-02T06:34:50Z",
-		"closed_at": "2021-07-29T01:55:06Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 9,
+		"created_at": "2023-06-08T16:22:56Z",
+		"updated_at": "2023-09-28T13:40:55Z",
+		"closed_at": "2023-09-28T13:40:30Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/31774",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/31774",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/31774.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/31774.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\nAdds padding support to the Button block using the spacing block support.\r\nIssue #31731\r\n\r\n**Notes:**\r\nThe block support currently allows arbitrarily large padding values which can cause blocks implementing it to overflow the page. See #31773\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\nManually.\r\n\r\n**Test Setup**\r\nYour theme will need to opt into padding support. You can do this by updating your `theme.json` to enable padding under the spacing control, in either your default settings or the block context for button:\r\n```\r\n\"settings\": {\r\n    \"spacing\": {\r\n        \"customPadding\": true,\r\n        \"units\": [\r\n            \"px\",\r\n            \"em\",\r\n            \"rem\",\r\n            \"vh\",\r\n            \"vw\"\r\n        ]\r\n    }\r\n}\r\n```\r\n\r\n**Test Instructions**\r\n\r\n1. Create a post, add a buttons block with a button.\r\n2. Select the button block and confirm padding controls in the sidebar work, adjusting units/padding per side.\r\n3. Add another button and confirm that its padding is default. Update its padding and verify that it does not affect the padding of the first button.\r\n3. Save the post and confirm the padding is visually correct on the frontend.\r\n\r\n## Screenshots <!-- if applicable -->\r\n![Screen Capture on 2021-05-27 at 13-55-29](https://user-images.githubusercontent.com/63313398/119896035-522ddd80-bef3-11eb-889e-417861d7ea9a.gif)\r\n\r\n## Types of changes\r\n<!-- What types of changes does your code introduce?  -->\r\n<!-- Bug fix (non-breaking change which fixes an issue) -->\r\n<!-- New feature (non-breaking change which adds functionality) -->\r\n<!-- Breaking change (fix or feature that would cause existing functionality to not work as expected) -->\r\n\r\n## Checklist:\r\n- [ ] My code is tested.\r\n- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [ ] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [ ] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/51350",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/51350",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/51350.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/51350.patch",
+			"merged_at": "2023-09-28T13:40:30Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\npart of #35744. Replaced some class Component with functional components.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\n\r\n\r\nSee https://github.com/WordPress/gutenberg/issues/35744\r\n\r\n## How?\r\n* Refactored the component TypeScript\r\n\r\n## Testing Instructions\r\n* `npm run test:unit -- --testPathPattern packages/components/src/slot-fill/`\r\n\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350/reactions",
+			"total_count": 1,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 1,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/51350/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/31634",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31634/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31634/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31634/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/31634",
-		"id": 882056479,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjM1NjE3NTQ3",
-		"number": 31634,
-		"title": "[Block Library - Post Featured Image]: Add basic dimension controls",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/50231",
+		"id": 1691621350,
+		"node_id": "PR_kwDOBNHdeM5Pi4Ji",
+		"number": 50231,
+		"title": "Add some @types packages as proper dependencies",
 		"user": {
-			"login": "ntsekouras",
-			"id": 16275880,
-			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"login": "noahtallen",
+			"id": 6265975,
+			"node_id": "MDQ6VXNlcjYyNjU5NzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6265975?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ntsekouras",
-			"html_url": "https://github.com/ntsekouras",
-			"followers_url": "https://api.github.com/users/ntsekouras/followers",
-			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-			"repos_url": "https://api.github.com/users/ntsekouras/repos",
-			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"url": "https://api.github.com/users/noahtallen",
+			"html_url": "https://github.com/noahtallen",
+			"followers_url": "https://api.github.com/users/noahtallen/followers",
+			"following_url": "https://api.github.com/users/noahtallen/following{/other_user}",
+			"gists_url": "https://api.github.com/users/noahtallen/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/noahtallen/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/noahtallen/subscriptions",
+			"organizations_url": "https://api.github.com/users/noahtallen/orgs",
+			"repos_url": "https://api.github.com/users/noahtallen/repos",
+			"events_url": "https://api.github.com/users/noahtallen/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/noahtallen/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 531680825,
-				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
-				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"id": 596512821,
+				"node_id": "MDU6TGFiZWw1OTY1MTI4MjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Build%20Tooling",
+				"name": "[Type] Build Tooling",
+				"color": "111111",
 				"default": false,
-				"description": "A suggestion for improvement."
+				"description": "Issues or PRs related to build tooling"
 			},
 			{
-				"id": 1022744205,
-				"node_id": "MDU6TGFiZWwxMDIyNzQ0MjA1",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Block%20library",
-				"name": "[Package] Block library",
+				"id": 997392122,
+				"node_id": "MDU6TGFiZWw5OTczOTIxMjI=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Components",
+				"name": "[Package] Components",
 				"color": "ed2572",
 				"default": false,
-				"description": "/packages/block-library"
-			},
-			{
-				"id": 1894493554,
-				"node_id": "MDU6TGFiZWwxODk0NDkzNTU0",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Design%20Tools",
-				"name": "[Feature] Design Tools",
-				"color": "f7f771",
-				"default": false,
-				"description": "Tools that manipulate visual aspects of blocks."
-			},
-			{
-				"id": 2085610453,
-				"node_id": "MDU6TGFiZWwyMDg1NjEwNDUz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Post%20Featured%20Image",
-				"name": "[Block] Post Featured Image",
-				"color": "6767e5",
-				"default": false,
-				"description": ""
+				"description": "/packages/components"
 			}
 		],
 		"state": "closed",
 		"locked": false,
 		"assignee": {
-			"login": "ntsekouras",
-			"id": 16275880,
-			"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-			"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+			"login": "noahtallen",
+			"id": 6265975,
+			"node_id": "MDQ6VXNlcjYyNjU5NzU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/6265975?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/ntsekouras",
-			"html_url": "https://github.com/ntsekouras",
-			"followers_url": "https://api.github.com/users/ntsekouras/followers",
-			"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-			"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-			"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-			"repos_url": "https://api.github.com/users/ntsekouras/repos",
-			"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+			"url": "https://api.github.com/users/noahtallen",
+			"html_url": "https://github.com/noahtallen",
+			"followers_url": "https://api.github.com/users/noahtallen/followers",
+			"following_url": "https://api.github.com/users/noahtallen/following{/other_user}",
+			"gists_url": "https://api.github.com/users/noahtallen/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/noahtallen/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/noahtallen/subscriptions",
+			"organizations_url": "https://api.github.com/users/noahtallen/orgs",
+			"repos_url": "https://api.github.com/users/noahtallen/repos",
+			"events_url": "https://api.github.com/users/noahtallen/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/noahtallen/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"assignees": [
 			{
-				"login": "ntsekouras",
-				"id": 16275880,
-				"node_id": "MDQ6VXNlcjE2Mjc1ODgw",
-				"avatar_url": "https://avatars.githubusercontent.com/u/16275880?v=4",
+				"login": "noahtallen",
+				"id": 6265975,
+				"node_id": "MDQ6VXNlcjYyNjU5NzU=",
+				"avatar_url": "https://avatars.githubusercontent.com/u/6265975?v=4",
 				"gravatar_id": "",
-				"url": "https://api.github.com/users/ntsekouras",
-				"html_url": "https://github.com/ntsekouras",
-				"followers_url": "https://api.github.com/users/ntsekouras/followers",
-				"following_url": "https://api.github.com/users/ntsekouras/following{/other_user}",
-				"gists_url": "https://api.github.com/users/ntsekouras/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/ntsekouras/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/ntsekouras/subscriptions",
-				"organizations_url": "https://api.github.com/users/ntsekouras/orgs",
-				"repos_url": "https://api.github.com/users/ntsekouras/repos",
-				"events_url": "https://api.github.com/users/ntsekouras/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/ntsekouras/received_events",
+				"url": "https://api.github.com/users/noahtallen",
+				"html_url": "https://github.com/noahtallen",
+				"followers_url": "https://api.github.com/users/noahtallen/followers",
+				"following_url": "https://api.github.com/users/noahtallen/following{/other_user}",
+				"gists_url": "https://api.github.com/users/noahtallen/gists{/gist_id}",
+				"starred_url": "https://api.github.com/users/noahtallen/starred{/owner}{/repo}",
+				"subscriptions_url": "https://api.github.com/users/noahtallen/subscriptions",
+				"organizations_url": "https://api.github.com/users/noahtallen/orgs",
+				"repos_url": "https://api.github.com/users/noahtallen/repos",
+				"events_url": "https://api.github.com/users/noahtallen/events{/privacy}",
+				"received_events_url": "https://api.github.com/users/noahtallen/received_events",
 				"type": "User",
 				"site_admin": false
 			}
 		],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -14981,56 +23994,72 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 21,
-		"created_at": "2021-05-09T09:22:15Z",
-		"updated_at": "2021-07-31T08:57:37Z",
-		"closed_at": "2021-07-30T20:03:45Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 10,
+		"created_at": "2023-05-02T00:47:45Z",
+		"updated_at": "2023-10-04T20:47:35Z",
+		"closed_at": "2023-10-04T20:47:03Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/31634",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/31634",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/31634.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/31634.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n<!-- Gutenberg's license is in the process of updating to be dual-licensed under the GPL and MPL. As part of that transition, all new contributions are dual-licensed. For more information, see: https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md -->\r\n\r\n## Description\r\nResolves: https://github.com/WordPress/gutenberg/issues/27620\r\n\r\nThis PR enables basic dimension controls (`width`, `height`) and allow `object-fit` properties to be configured. \r\nI believe landing at least a basic handling for now like this would be okay for now and gives value, in order to make it to 5.8.\r\n\r\n## Notes\r\n1. The `scale` control from the design does not exists now, so I've added some adhoc styles. We might improve those styles or consider adding a new component to match the design.\r\n2. In order to set some `object-fit` properties we need to have set both `width` and `height` (see [comment](https://github.com/WordPress/gutenberg/issues/27620#issuecomment-833336369)).\r\n3. In `scale` control I've implemented `toggle/unset` functionality. We can keep this or add a `reset/clear` button.\r\n4. `height` in percentage (`%`) feels a bit unintuitive IMO - any suggestions?\r\n\r\n## Testing instructions\r\n1. Insert `Post Featured Image` block (single or in a `Query` block) and set `width`, `height` and `scale`. What feels natural to me is having `width` in `%` and `height` in `px`, but this is just subjective.\r\n2. Observe editor and front-end changes.\r\n\r\n\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/50231",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/50231",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/50231.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/50231.patch",
+			"merged_at": "2023-10-04T20:47:03Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\nThis partially addresses #50157. It moves some `@types` dependencies to the main dep field of `@wordpress/components`.\r\n\r\n## Why?\r\nWhen publishing a package, dev dependencies are never installed by 3rd party consumers. However, when we import a type from an external dep in our own published types, that external dep must be installable by our 3rd party consumers, or they'll get errors in `tsc` about missing packages. As a result, those `@types/` packages we reference in our published build types must be normal dependencies in the specific package, rather than dev dependencies in the root package.json.\r\n\r\n(The approach of adding all `@types` packages to the root package.json only works when we _only_ use our type info internally -- we'll need to adjust this approach now that we're publishing our own type information more frequently.)\r\n\r\n## How?\r\nSee above\r\n\r\n## Testing Instructions\r\nCI\r\n\r\n### Testing Instructions for Keyboard\r\n<!-- How can you test the changes by using the keyboard only? Please note, this is required for PRs that change the user interface (UI). This ensures the PR can be tested for any possible accessibility regressions. -->\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50231/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/31345",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31345/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31345/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/31345/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/31345",
-		"id": 871207978,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjI2MjY1NDU2",
-		"number": 31345,
-		"title": "[RNMobile] Parent PR: Add Setting to Set/Remove a Featured Image Directly from Image Block (iOS Only)",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/50219",
+		"id": 1690814911,
+		"node_id": "PR_kwDOBNHdeM5PgHjf",
+		"number": 50219,
+		"title": "Show confirmation dialog when moving a post to the trash",
 		"user": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
+			"login": "mtias",
+			"id": 548849,
+			"node_id": "MDQ6VXNlcjU0ODg0OQ==",
+			"avatar_url": "https://avatars.githubusercontent.com/u/548849?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
+			"url": "https://api.github.com/users/mtias",
+			"html_url": "https://github.com/mtias",
+			"followers_url": "https://api.github.com/users/mtias/followers",
+			"following_url": "https://api.github.com/users/mtias/following{/other_user}",
+			"gists_url": "https://api.github.com/users/mtias/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/mtias/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/mtias/subscriptions",
+			"organizations_url": "https://api.github.com/users/mtias/orgs",
+			"repos_url": "https://api.github.com/users/mtias/repos",
+			"events_url": "https://api.github.com/users/mtias/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/mtias/received_events",
 			"type": "User",
 			"site_admin": false
 		},
@@ -15040,81 +24069,41 @@
 				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
 				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
 				"name": "[Type] Enhancement",
-				"color": "3993a3",
+				"color": "FEF2C0",
 				"default": false,
 				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 982506020,
-				"node_id": "MDU6TGFiZWw5ODI1MDYwMjA=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/Mobile%20App%20-%20i.e.%20Android%20or%20iOS",
-				"name": "Mobile App - i.e. Android or iOS",
-				"color": "a3ef7a",
+				"id": 610403961,
+				"node_id": "MDU6TGFiZWw2MTA0MDM5NjE=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Feature]%20Document%20Settings",
+				"name": "[Feature] Document Settings",
+				"color": "fbca04",
 				"default": false,
-				"description": "Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)"
+				"description": "Document settings experience"
 			},
 			{
-				"id": 1101518360,
-				"node_id": "MDU6TGFiZWwxMTAxNTE4MzYw",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Image",
-				"name": "[Block] Image",
-				"color": "6767e5",
+				"id": 1013395453,
+				"node_id": "MDU6TGFiZWwxMDEzMzk1NDUz",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Editor",
+				"name": "[Package] Editor",
+				"color": "ed2572",
 				"default": false,
-				"description": ""
+				"description": "/packages/editor"
 			}
 		],
 		"state": "closed",
 		"locked": false,
-		"assignee": {
-			"login": "SiobhyB",
-			"id": 2998162,
-			"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
-			"gravatar_id": "",
-			"url": "https://api.github.com/users/SiobhyB",
-			"html_url": "https://github.com/SiobhyB",
-			"followers_url": "https://api.github.com/users/SiobhyB/followers",
-			"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-			"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-			"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-			"repos_url": "https://api.github.com/users/SiobhyB/repos",
-			"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
-			"type": "User",
-			"site_admin": false
-		},
-		"assignees": [
-			{
-				"login": "SiobhyB",
-				"id": 2998162,
-				"node_id": "MDQ6VXNlcjI5OTgxNjI=",
-				"avatar_url": "https://avatars.githubusercontent.com/u/2998162?v=4",
-				"gravatar_id": "",
-				"url": "https://api.github.com/users/SiobhyB",
-				"html_url": "https://github.com/SiobhyB",
-				"followers_url": "https://api.github.com/users/SiobhyB/followers",
-				"following_url": "https://api.github.com/users/SiobhyB/following{/other_user}",
-				"gists_url": "https://api.github.com/users/SiobhyB/gists{/gist_id}",
-				"starred_url": "https://api.github.com/users/SiobhyB/starred{/owner}{/repo}",
-				"subscriptions_url": "https://api.github.com/users/SiobhyB/subscriptions",
-				"organizations_url": "https://api.github.com/users/SiobhyB/orgs",
-				"repos_url": "https://api.github.com/users/SiobhyB/repos",
-				"events_url": "https://api.github.com/users/SiobhyB/events{/privacy}",
-				"received_events_url": "https://api.github.com/users/SiobhyB/received_events",
-				"type": "User",
-				"site_admin": false
-			}
-		],
+		"assignee": null,
+		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -15137,77 +24126,93 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 1,
-		"created_at": "2021-04-29T16:18:14Z",
-		"updated_at": "2021-08-02T16:26:34Z",
-		"closed_at": "2021-08-02T16:26:05Z",
-		"author_association": "CONTRIBUTOR",
+		"comments": 6,
+		"created_at": "2023-05-01T13:32:45Z",
+		"updated_at": "2023-10-04T17:55:14Z",
+		"closed_at": "2023-10-04T17:54:44Z",
+		"author_association": "MEMBER",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/31345",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/31345",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/31345.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/31345.patch"
-		},
-		"body": "Fixes the iOS side of the following issue: wordpress-mobile/gutenberg-mobile#1011\r\n\r\n`gutenberg-mobile`: https://github.com/wordpress-mobile/gutenberg-mobile/pull/3449\r\n`WordPress-iOS`: https://github.com/wordpress-mobile/WordPress-iOS/pull/16427\r\n\r\n## Description\r\n\r\nIntroduces an option to set/remove an image as featured from the image block's settings, with a \"featured\" banner to denote when an image is already featured. The end goal is to make it easier for users to both identify and set/remove featured images directly from the post editor.\r\n\r\nThis PR builds on the work done in https://github.com/WordPress/gutenberg/pull/30806 and https://github.com/WordPress/gutenberg/pull/28854 to introduce this functionality to Android. For iOS, the work has been split up into the following PRs:\r\n\r\nGutenberg PR | Gutenberg Mobile PR | iOS PR | Merged\r\n-- | -- | -- | --\r\n[Display a `Featured` banner over any image block containing a post's featured image](https://github.com/WordPress/gutenberg/pull/31347) |  https://github.com/wordpress-mobile/gutenberg-mobile/pull/3390 |  https://github.com/wordpress-mobile/WordPress-iOS/pull/16332 | ✅ \r\n[Include a `Set/Remove as Featured` option in the image block's settings](https://github.com/WordPress/gutenberg/pull/31415) | https://github.com/wordpress-mobile/gutenberg-mobile/pull/3450 | https://github.com/wordpress-mobile/WordPress-iOS/pull/16426 | ✅ \r\n\r\n_- Once the PR has been merged it will be updated with a_ ✅  \r\n\r\n## How has this been tested? Screenshots? Types of changes?\r\n\r\nPlease refer to the first PR in each row (the Gutenberg PR) for test cases, screenshots, and further details of the types of changes involved.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [x] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [x] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [x] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/50219",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/50219",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/50219.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/50219.patch",
+			"merged_at": "2023-10-04T17:54:44Z"
+		},
+		"body": "Working on #50217 it became apparent that we show a confirmation step for switching a post back to a draft state but we don't show one for moving a post to the trash bin.\r\n\r\nFixes #19125.\r\nFixes #34436.\r\n\r\n<img width=\"710\" alt=\"image\" src=\"https://user-images.githubusercontent.com/548849/235458517-04e2ce47-b267-481d-9fae-bd46bd92fd57.png\">\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/50219/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	},
 	{
-		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/30542",
+		"url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147",
 		"repository_url": "https://api.github.com/repos/WordPress/gutenberg",
-		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/30542/labels{/name}",
-		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/30542/comments",
-		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/30542/events",
-		"html_url": "https://github.com/WordPress/gutenberg/pull/30542",
-		"id": 851617346,
-		"node_id": "MDExOlB1bGxSZXF1ZXN0NjEwMDA5NDAx",
-		"number": 30542,
-		"title": "Refactor MetaBoxesArea to to functional components using hooks.",
+		"labels_url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147/labels{/name}",
+		"comments_url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147/comments",
+		"events_url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147/events",
+		"html_url": "https://github.com/WordPress/gutenberg/pull/45147",
+		"id": 1416265579,
+		"node_id": "PR_kwDOBNHdeM5BLSzO",
+		"number": 45147,
+		"title": "Login/out: add spacing support",
 		"user": {
-			"login": "torounit",
-			"id": 1908815,
-			"node_id": "MDQ6VXNlcjE5MDg4MTU=",
-			"avatar_url": "https://avatars.githubusercontent.com/u/1908815?v=4",
+			"login": "carolinan",
+			"id": 7422055,
+			"node_id": "MDQ6VXNlcjc0MjIwNTU=",
+			"avatar_url": "https://avatars.githubusercontent.com/u/7422055?v=4",
 			"gravatar_id": "",
-			"url": "https://api.github.com/users/torounit",
-			"html_url": "https://github.com/torounit",
-			"followers_url": "https://api.github.com/users/torounit/followers",
-			"following_url": "https://api.github.com/users/torounit/following{/other_user}",
-			"gists_url": "https://api.github.com/users/torounit/gists{/gist_id}",
-			"starred_url": "https://api.github.com/users/torounit/starred{/owner}{/repo}",
-			"subscriptions_url": "https://api.github.com/users/torounit/subscriptions",
-			"organizations_url": "https://api.github.com/users/torounit/orgs",
-			"repos_url": "https://api.github.com/users/torounit/repos",
-			"events_url": "https://api.github.com/users/torounit/events{/privacy}",
-			"received_events_url": "https://api.github.com/users/torounit/received_events",
+			"url": "https://api.github.com/users/carolinan",
+			"html_url": "https://github.com/carolinan",
+			"followers_url": "https://api.github.com/users/carolinan/followers",
+			"following_url": "https://api.github.com/users/carolinan/following{/other_user}",
+			"gists_url": "https://api.github.com/users/carolinan/gists{/gist_id}",
+			"starred_url": "https://api.github.com/users/carolinan/starred{/owner}{/repo}",
+			"subscriptions_url": "https://api.github.com/users/carolinan/subscriptions",
+			"organizations_url": "https://api.github.com/users/carolinan/orgs",
+			"repos_url": "https://api.github.com/users/carolinan/repos",
+			"events_url": "https://api.github.com/users/carolinan/events{/privacy}",
+			"received_events_url": "https://api.github.com/users/carolinan/received_events",
 			"type": "User",
 			"site_admin": false
 		},
 		"labels": [
 			{
-				"id": 930001208,
-				"node_id": "MDU6TGFiZWw5MzAwMDEyMDg=",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Code%20Quality",
-				"name": "[Type] Code Quality",
-				"color": "e5e04b",
+				"id": 531680825,
+				"node_id": "MDU6TGFiZWw1MzE2ODA4MjU=",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Enhancement",
+				"name": "[Type] Enhancement",
+				"color": "FEF2C0",
 				"default": false,
-				"description": "Gotta shave those yaks."
+				"description": "A suggestion for improvement."
 			},
 			{
-				"id": 1298994603,
-				"node_id": "MDU6TGFiZWwxMjk4OTk0NjAz",
-				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Package]%20Edit%20Post",
-				"name": "[Package] Edit Post",
-				"color": "ed2572",
+				"id": 2986845394,
+				"node_id": "MDU6TGFiZWwyOTg2ODQ1Mzk0",
+				"url": "https://api.github.com/repos/WordPress/gutenberg/labels/[Block]%20Login/out",
+				"name": "[Block] Login/out",
+				"color": "6767e5",
 				"default": false,
-				"description": "packages/edit-post"
+				"description": "Affects the Login/out Block"
 			}
 		],
 		"state": "closed",
@@ -15215,13 +24220,13 @@
 		"assignee": null,
 		"assignees": [],
 		"milestone": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156",
-			"html_url": "https://github.com/WordPress/gutenberg/milestone/156",
-			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/156/labels",
-			"id": 7010087,
-			"node_id": "MI_kwDOBNHdeM4Aavcn",
-			"number": 156,
-			"title": "Gutenberg 11.3",
+			"url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215",
+			"html_url": "https://github.com/WordPress/gutenberg/milestone/215",
+			"labels_url": "https://api.github.com/repos/WordPress/gutenberg/milestones/215/labels",
+			"id": 9943059,
+			"node_id": "MI_kwDOBNHdeM4Al7gT",
+			"number": 215,
+			"title": "Gutenberg 16.8",
 			"description": null,
 			"creator": {
 				"login": "github-actions[bot]",
@@ -15244,26 +24249,42 @@
 				"site_admin": false
 			},
 			"open_issues": 0,
-			"closed_issues": 113,
+			"closed_issues": 160,
 			"state": "open",
-			"created_at": "2021-07-28T05:12:51Z",
-			"updated_at": "2021-08-11T14:18:41Z",
-			"due_on": "2021-08-11T07:00:00Z",
+			"created_at": "2023-09-20T13:32:26Z",
+			"updated_at": "2023-10-04T20:47:35Z",
+			"due_on": "2023-10-02T07:00:00Z",
 			"closed_at": null
 		},
-		"comments": 7,
-		"created_at": "2021-04-06T16:55:51Z",
-		"updated_at": "2021-08-02T16:23:34Z",
-		"closed_at": "2021-08-02T16:23:07Z",
-		"author_association": "MEMBER",
+		"comments": 4,
+		"created_at": "2022-10-20T09:15:56Z",
+		"updated_at": "2023-09-27T07:12:37Z",
+		"closed_at": "2023-09-27T07:12:15Z",
+		"author_association": "CONTRIBUTOR",
 		"active_lock_reason": null,
+		"draft": false,
 		"pull_request": {
-			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/30542",
-			"html_url": "https://github.com/WordPress/gutenberg/pull/30542",
-			"diff_url": "https://github.com/WordPress/gutenberg/pull/30542.diff",
-			"patch_url": "https://github.com/WordPress/gutenberg/pull/30542.patch"
-		},
-		"body": "<!-- Learn the overall process and best practices for pull requests at https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/repository-management.md#pull-requests. -->\r\n\r\n## Description\r\n<!-- Please describe what you have changed or added -->\r\n\r\nRelated: #22890 his PR refactors the `MetaBoxesArea` component into a function component using React hooks.\r\n\r\n## How has this been tested?\r\n<!-- Please describe in detail how you tested your changes. -->\r\n<!-- Include details of your testing environment, tests ran to see how -->\r\n<!-- your change affects other areas of the code, etc. -->\r\n\r\nShow block editor and check custom field metabox and others.\r\n\r\n## Checklist:\r\n- [x] My code is tested.\r\n- [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/ -->\r\n- [x] My code follows the accessibility standards. <!-- Guidelines: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/ -->\r\n- [x] I've tested my changes with keyboard and screen readers. <!-- Instructions: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/accessibility-testing.md -->\r\n- [ ] My code has proper inline documentation. <!-- Guidelines: https://developer.wordpress.org/coding-standards/inline-documentation-standards/javascript/ -->\r\n- [ ] I've included developer documentation if appropriate. <!-- Handbook: https://developer.wordpress.org/block-editor/ -->\r\n- [ ] I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all `*.native.js` files for terms that need renaming or removal). <!-- React Native mobile Gutenberg guidelines: https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/native-mobile.md -->\r\n",
-		"performed_via_github_app": null
+			"url": "https://api.github.com/repos/WordPress/gutenberg/pulls/45147",
+			"html_url": "https://github.com/WordPress/gutenberg/pull/45147",
+			"diff_url": "https://github.com/WordPress/gutenberg/pull/45147.diff",
+			"patch_url": "https://github.com/WordPress/gutenberg/pull/45147.patch",
+			"merged_at": "2023-09-27T07:12:15Z"
+		},
+		"body": "<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contributing Guidelines:\r\nhttps://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->\r\n\r\n## What?\r\n<!-- In a few words, what is the PR actually doing? -->\r\nAdds margin and padding support to the login/out block.\r\n\r\n## Why?\r\n<!-- Why is this PR necessary? What problem is it solving? Reference any existing previous issue(s) or PR(s), but please add a short summary here, too -->\r\nFor consistency. Part of https://github.com/WordPress/gutenberg/pull/45147.\r\n\r\n## How?\r\n<!-- How is your PR addressing the issue at hand? What are the implementation details? -->\r\nThe PR adds spacing support to block.json.\r\n\r\n## Testing Instructions\r\n\r\nMake sure that the active theme supports spacing, for example, in theme.json.\r\nCreate a new post or page.\r\nAdd login/out block.\r\nConfirm that there is a dimension panel, and that the margin and padding settings are available but not enabled by default.\r\nTest the margin and padding settings in the editor and front.\r\n\r\n-Go to the Site Editor, add a login/out block, and change the margin and padding via the block settings in the Styles sidebar.\r\n-Adjust the spacing and margin via theme.json.\r\n\r\nExample theme.json code: add this to styles > blocks:\r\n\r\n```\r\n\"core/loginout\": {\r\n\t\t\t\t\"spacing\": {\r\n\t\t\t\t\t\"padding\": {\r\n\t\t\t\t\t\t\"top\": \"15px\",\r\n\t\t\t\t\t\t\"right\": \"15px\",\r\n\t\t\t\t\t\t\"bottom\": \"15px\",\r\n\t\t\t\t\t\t\"left\": \"15px\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t\"margin\": {\r\n\t\t\t\t\t\t\"top\": \"150px\",\r\n\t\t\t\t\t\t\"right\": \"15px\",\r\n\t\t\t\t\t\t\"bottom\": \"150px\",\r\n\t\t\t\t\t\t\"left\": \"15px\"\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n```\r\n\r\n## Screenshots or screencast <!-- if applicable -->\r\n\r\nhttps://github.com/WordPress/gutenberg/assets/7422055/8b985ecc-87fe-44e4-8b74-5d34c1223007\r\n",
+		"reactions": {
+			"url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147/reactions",
+			"total_count": 0,
+			"+1": 0,
+			"-1": 0,
+			"laugh": 0,
+			"hooray": 0,
+			"confused": 0,
+			"heart": 0,
+			"rocket": 0,
+			"eyes": 0
+		},
+		"timeline_url": "https://api.github.com/repos/WordPress/gutenberg/issues/45147/timeline",
+		"performed_via_github_app": null,
+		"state_reason": null
 	}
 ]
diff --git a/bin/plugin/lib/utils.js b/bin/plugin/lib/utils.js
index 4a75437a60694e..4f57269d60c772 100644
--- a/bin/plugin/lib/utils.js
+++ b/bin/plugin/lib/utils.js
@@ -33,11 +33,13 @@ function runShellScript( script, cwd, env = {} ) {
 					NO_CHECKS: 'true',
 					PATH: process.env.PATH,
 					HOME: process.env.HOME,
+					USER: process.env.USER,
 					...env,
 				},
 			},
-			function ( error, _, stderr ) {
+			function ( error, stdout, stderr ) {
 				if ( error ) {
+					console.log( stdout ); // Sometimes the error message is thrown via stdout.
 					console.log( stderr );
 					reject( error );
 				} else {
@@ -119,10 +121,30 @@ function getRandomTemporaryPath() {
 	return path.join( os.tmpdir(), uuid() );
 }
 
+/**
+ * Scans the given directory and returns an array of file paths.
+ *
+ * @param {string} dir The path to the directory to scan.
+ *
+ * @return {string[]} An array of file paths.
+ */
+function getFilesFromDir( dir ) {
+	if ( ! fs.existsSync( dir ) ) {
+		console.log( 'Directory does not exist: ', dir );
+		return [];
+	}
+
+	return fs
+		.readdirSync( dir, { withFileTypes: true } )
+		.filter( ( dirent ) => dirent.isFile() )
+		.map( ( dirent ) => path.join( dir, dirent.name ) );
+}
+
 module.exports = {
 	askForConfirmation,
 	runStep,
 	readJSONFile,
 	runShellScript,
 	getRandomTemporaryPath,
+	getFilesFromDir,
 };
diff --git a/bin/plugin/utils/.wp-env.performance.json b/bin/plugin/utils/.wp-env.performance.json
deleted file mode 100644
index 112c2684f64a48..00000000000000
--- a/bin/plugin/utils/.wp-env.performance.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-	"core": "WordPress/WordPress",
-	"plugins": [ "./plugin" ],
-	"themes": [ "../../tests/test/emptytheme" ],
-	"env": {
-		"tests": {
-			"mappings": {
-				"wp-content/mu-plugins": "../../tests/packages/e2e-tests/mu-plugins",
-				"wp-content/plugins/gutenberg-test-plugins": "../../tests/packages/e2e-tests/plugins"
-			}
-		}
-	}
-}
diff --git a/bin/test-create-block.sh b/bin/test-create-block.sh
index e17bdbb2d66946..99b7e8e6082604 100755
--- a/bin/test-create-block.sh
+++ b/bin/test-create-block.sh
@@ -55,7 +55,7 @@ if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the project root, but found $actual."
     exit 1
 fi
-expected=6
+expected=7
 actual=$( find src -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`src\` directory, but found $actual."
@@ -69,7 +69,7 @@ status "Building block..."
 ../node_modules/.bin/wp-scripts build
 
 status "Verifying build..."
-expected=5
+expected=9
 actual=$( find build -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`build\` directory, but found $actual."
diff --git a/bin/tsconfig.json b/bin/tsconfig.json
index f3d576c178d0c0..3ec5d5826a045d 100644
--- a/bin/tsconfig.json
+++ b/bin/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "commonjs",
@@ -17,7 +18,6 @@
 	},
 	"files": [
 		"./api-docs/update-api-docs.js",
-		"./check-latest-npm.js",
 		"./plugin/config.js",
 		"./plugin/commands/changelog.js",
 		"./plugin/commands/performance.js",
diff --git a/bin/validate-package-lock.js b/bin/validate-package-lock.js
index ec33014cbfee03..c08e0beafa2a67 100755
--- a/bin/validate-package-lock.js
+++ b/bin/validate-package-lock.js
@@ -20,7 +20,7 @@ const { red, yellow } = require( 'chalk' );
 // @ts-ignore
 const packageLock = require( '../package-lock' );
 
-const dependencies = Object.entries( packageLock.dependencies );
+const dependencies = Object.entries( packageLock.packages );
 for ( const [ name, dependency ] of dependencies ) {
 	if ( dependency.resolved === false ) {
 		console.log(
diff --git a/bin/validate-tsconfig.mjs b/bin/validate-tsconfig.mjs
new file mode 100755
index 00000000000000..91d74b1bdb413f
--- /dev/null
+++ b/bin/validate-tsconfig.mjs
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+// @ts-ignore
+import glob from 'glob';
+import { dirname, basename } from 'path';
+import stripJsonComments from 'strip-json-comments';
+import { readFileSync } from 'fs';
+
+let hasErrors = false;
+
+const rootTsconfigJson = JSON.parse( readFileSync( 'tsconfig.json', 'utf8' ) );
+
+const packagesWithTypes = glob
+	.sync( 'packages/*/tsconfig.json' )
+	.map( ( tsconfigPath ) => basename( dirname( tsconfigPath ) ) );
+
+for ( const packageName of packagesWithTypes ) {
+	if (
+		! rootTsconfigJson.references.some(
+			( reference ) => reference.path === `packages/${ packageName }`
+		)
+	) {
+		console.error(
+			`Missing reference to "packages/${ packageName }" in root tsconfig.json`
+		);
+		hasErrors = true;
+	}
+
+	const packageJson = JSON.parse(
+		readFileSync( `packages/${ packageName }/package.json`, 'utf8' )
+	);
+	const tsconfigJson = JSON.parse(
+		stripJsonComments(
+			readFileSync( `packages/${ packageName }/tsconfig.json`, 'utf8' )
+		)
+	);
+	if ( packageJson.dependencies ) {
+		for ( const dependency of Object.keys( packageJson.dependencies ) ) {
+			if ( dependency.startsWith( '@wordpress/' ) ) {
+				const dependencyPackageName = dependency.slice(
+					'@wordpress/'.length
+				);
+				if (
+					packagesWithTypes.includes( dependencyPackageName ) &&
+					! tsconfigJson.references?.some(
+						( reference ) =>
+							reference.path === `../${ dependencyPackageName }`
+					)
+				) {
+					console.error(
+						`Missing reference to "../${ dependencyPackageName }" in packages/${ packageName }/tsconfig.json`
+					);
+					hasErrors = true;
+				}
+			}
+		}
+	}
+}
+
+process.exit( hasErrors ? 1 : 0 );
diff --git a/changelog.txt b/changelog.txt
index 3854aa54dfeb94..38b33267554982 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,39 +1,23978 @@
 == Changelog ==
 
-= 14.5.4 =
+= 19.8.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Details block: Use summary content as default label. ([67217](https://github.com/WordPress/gutenberg/pull/67217))
+- Make social icon navigation one arrow keypress. ([64883](https://github.com/WordPress/gutenberg/pull/64883))
+- Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385))
+- Query Loop block: Remove 'add new post' prompt in the sidebar. ([67189](https://github.com/WordPress/gutenberg/pull/67189))
+- Query block: Update Enhanced Pagination help text. ([67173](https://github.com/WordPress/gutenberg/pull/67173))
+- Social Link: Add contentOnly editing support. ([66622](https://github.com/WordPress/gutenberg/pull/66622))
+
+#### Components
+- Autocomplete: Increase option height. ([67214](https://github.com/WordPress/gutenberg/pull/67214))
+- CircularOptionPicker: Update Button sizes. ([67285](https://github.com/WordPress/gutenberg/pull/67285))
+- ColorPalette: Disable `Clear` button if there's no color value. ([67108](https://github.com/WordPress/gutenberg/pull/67108))
+- ColorPicker: Update sizes of format select and copy button. ([67093](https://github.com/WordPress/gutenberg/pull/67093))
+- ComboboxControl: Update reset button size. ([67215](https://github.com/WordPress/gutenberg/pull/67215))
+
+#### DataViews
+- Add density option to `table` layout. ([67170](https://github.com/WordPress/gutenberg/pull/67170))
+- DataForm: Enable fields to declare a different layout. ([66531](https://github.com/WordPress/gutenberg/pull/66531))
+- DataViews list layout: Hide actions menu when there is only one action and is primary. ([67015](https://github.com/WordPress/gutenberg/pull/67015))
+- DataViews table layout: Hide actions menu when there is only one action and is primary. ([67020](https://github.com/WordPress/gutenberg/pull/67020))
+- Reduce the size of action button in Grid layout. ([67032](https://github.com/WordPress/gutenberg/pull/67032))
+- DataViews: Allow register/unregister fields. ([67175](https://github.com/WordPress/gutenberg/pull/67175))
+
+#### Global Styles
+- Block Supports: Extend stabilization to common experimental block support flags. ([67018](https://github.com/WordPress/gutenberg/pull/67018))
+- Borders: Stabilize border block supports within block processing. ([66918](https://github.com/WordPress/gutenberg/pull/66918))
+- Site Editor > Styles: Open styles inspector when clicking preview canvas. ([66996](https://github.com/WordPress/gutenberg/pull/66996))
+
+#### Media
+- Block Editor: Add notice action to revert image to original after cropping. ([67314](https://github.com/WordPress/gutenberg/pull/67314))
+- Block Editor: Add success notices for image editing. ([67312](https://github.com/WordPress/gutenberg/pull/67312))
+
+#### REST API
+- Feature: Set editor rendering mode by post type. ([62304](https://github.com/WordPress/gutenberg/pull/62304))
+- Terms: Respect order specified by register_taxonomy(). ([67154](https://github.com/WordPress/gutenberg/pull/67154))
+
+#### Zoom Out
+- Leave help text regardless of zoom state. ([67132](https://github.com/WordPress/gutenberg/pull/67132))
+- Preserve footer template bar in zoom out. ([67135](https://github.com/WordPress/gutenberg/pull/67135))
+- Add section styles switch button in block toolbar in zoom out mode. ([67140](https://github.com/WordPress/gutenberg/pull/67140))
+
+#### Post Editor
+-  Move default template types and template part areas to REST API. ([66459](https://github.com/WordPress/gutenberg/pull/66459))
+- Move `usePostFields` to `wordpress/editor` package. ([67024](https://github.com/WordPress/gutenberg/pull/67024))
+
+#### Site Editor
+- Blocks: Adds check for parent before showing convert to pattern button. ([66158](https://github.com/WordPress/gutenberg/pull/66158))
+- Try dark toolbar for the write mode. ([66116](https://github.com/WordPress/gutenberg/pull/66116))
+
+#### Design Tools
+- Heading: Hide border controls by default. ([67105](https://github.com/WordPress/gutenberg/pull/67105))
+- Font family preview in the font family picker. ([67118](https://github.com/WordPress/gutenberg/pull/67118))
+
+### Bug Fixes
+
+#### Block Library
+- Fix block mover clickable area. ([67261](https://github.com/WordPress/gutenberg/pull/67261))
+- Fix dropping media from inserter into Cover block. ([67056](https://github.com/WordPress/gutenberg/pull/67056))
+- Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263))
+- Paragraph: Update condition for rendering Drop Cap for a selected block. ([67111](https://github.com/WordPress/gutenberg/pull/67111))
+- RSS block: Check for description field before rendering excerpt. ([66985](https://github.com/WordPress/gutenberg/pull/66985))
+- Resolve search block button text overlapping issue. ([66868](https://github.com/WordPress/gutenberg/pull/66868))
+- Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204))
+
+#### Components
+- Composite: Restore `Hover` and `Typeahead` functionality. ([67212](https://github.com/WordPress/gutenberg/pull/67212))
+- Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011))
+- SlotFill: Fix a bug with storing stale fillProps. ([67000](https://github.com/WordPress/gutenberg/pull/67000))
+- Storybook: Fix DataViews layout. ([66999](https://github.com/WordPress/gutenberg/pull/66999))
+- `FormFileUpload`: Prevent HEIC and HEIF files from always being uploaded on Safari. ([67139](https://github.com/WordPress/gutenberg/pull/67139))
+
+#### Block Editor
+- Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148))
+- Correctly mark Block Comment SlotFills private. ([67271](https://github.com/WordPress/gutenberg/pull/67271))
+- Fix media placeholder to only activate for media objects. ([66986](https://github.com/WordPress/gutenberg/pull/66986))
+- Rich text: Preserve comments. ([62128](https://github.com/WordPress/gutenberg/pull/62128))
+- Fix TS types for the editor package. ([67196](https://github.com/WordPress/gutenberg/pull/67196))
+- PostTitle: Exit early when post type doesn't support titles. ([67086](https://github.com/WordPress/gutenberg/pull/67086))
+- Split view with meta boxes even with legacy canvas. ([66706](https://github.com/WordPress/gutenberg/pull/66706))
+- Edit Site: Styles nav item does not open on mobile for themes without style variations. ([67550](https://github.com/WordPress/gutenberg/pull/67550))
+
+#### Global Styles
+- Avoid zooming out when browsing styles if the preview mode is active. ([67190](https://github.com/WordPress/gutenberg/pull/67190))
+- Remove styles from blocks' previews. ([67144](https://github.com/WordPress/gutenberg/pull/67144))
+- Style panel: Use correct revisions count. ([67180](https://github.com/WordPress/gutenberg/pull/67180))
+- Theme JSON: Include block style variations in path only output of get_block_nodes. ([66948](https://github.com/WordPress/gutenberg/pull/66948))
+- Fix: Logic for Highlight/text-color format availability. ([65530](https://github.com/WordPress/gutenberg/pull/65530))
+- Fix complex variation selectors when using selectors API. ([67061](https://github.com/WordPress/gutenberg/pull/67061))
+#### Site Editor
+- Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010))
+- Site Editor Sidebar: Fixed focus/hover style for navigation item buttons. ([67251](https://github.com/WordPress/gutenberg/pull/67251))
+- Site Hub: Fix height in mobile layout. ([67110](https://github.com/WordPress/gutenberg/pull/67110))
+- Site Editor: Styles: Fix inspector opening. ([67004](https://github.com/WordPress/gutenberg/pull/67004))
+- Improve accessibility and consistency of the 'Last modified' Revisions button. ([66606](https://github.com/WordPress/gutenberg/pull/66606))
+- Remove styles from examples. ([67098](https://github.com/WordPress/gutenberg/pull/67098))
+- Editor: Correctly select post title support in 'DocumentOutline'. ([67109](https://github.com/WordPress/gutenberg/pull/67109))
+
+
+#### DataViews
+- Fix action visibility logic. ([67197](https://github.com/WordPress/gutenberg/pull/67197))
+- Fix primary field misalignment in grid layout. ([66995](https://github.com/WordPress/gutenberg/pull/66995))
+- Fix spacing when combining combined fields. ([67226](https://github.com/WordPress/gutenberg/pull/67226))
+
+#### Zoom Out
+- Zoom In/Out to correct canvas location. ([66917](https://github.com/WordPress/gutenberg/pull/66917))
+- Zoom in/out to correct location. ([67126](https://github.com/WordPress/gutenberg/pull/67126))
+- Zoom Out: Disable zooming out when Distraction Free mode is activated. ([67028](https://github.com/WordPress/gutenberg/pull/67028))
+- Disable Zoom Out if no section root to allow for Theme opt in. ([67232](https://github.com/WordPress/gutenberg/pull/67232))
+
+#### Layout
+- Allow flex justification controls to be disabled at the block level. ([67059](https://github.com/WordPress/gutenberg/pull/67059))
+- Show vertical alignment toolbar with allowSwitching enabled. ([67022](https://github.com/WordPress/gutenberg/pull/67022))
+
+#### Patterns
+- Fix: JavaScript error when pattern category is unregistered. ([67063](https://github.com/WordPress/gutenberg/pull/67063))
+- Block Locking: Remove edit locking for Synced Patterns. ([67021](https://github.com/WordPress/gutenberg/pull/67021))
+
+### Accessibility
+
+#### Components
+- ColorPicker: Add accessible label for copy button. ([67094](https://github.com/WordPress/gutenberg/pull/67094))
+- Modal: Increase size of the Close button. ([66792](https://github.com/WordPress/gutenberg/pull/66792))
+- DataViews: Fix focus loss when removing all filters or resetting. ([67003](https://github.com/WordPress/gutenberg/pull/67003))
+
+#### Block Library
+- Improve accessibility of the video track editor. ([66832](https://github.com/WordPress/gutenberg/pull/66832))
+- Navigation: Fix 'ariaLabel' block support. ([66943](https://github.com/WordPress/gutenberg/pull/66943))
+
+#### Post Editor
+- Improve the featured image UI when it cannot retrieve the image file and data. ([66936](https://github.com/WordPress/gutenberg/pull/66936))
+
+### Experiments
+
+- Inline Commenting: Update placement of reply input and add author info header. ([66580](https://github.com/WordPress/gutenberg/pull/66580))
+- Place "Write mode" functionality behind a Gutenberg experiment. ([67008](https://github.com/WordPress/gutenberg/pull/67008))
+
+### Documentation
+
+- Add documentation about required Core changes when updating minimum WordPress version. ([67167](https://github.com/WordPress/gutenberg/pull/67167))
+- BoxControl: Auto-generate readme. ([67284](https://github.com/WordPress/gutenberg/pull/67284))
+- Components contributing guide: Fix relative links. ([67323](https://github.com/WordPress/gutenberg/pull/67323))
+- DataViews: Reorganize documentation for actions. ([67159](https://github.com/WordPress/gutenberg/pull/67159))
+- Docs: Correct `@return` type in `block_core_query_disable_enhanced_pagination()`. ([67128](https://github.com/WordPress/gutenberg/pull/67128))
+- Feat: Storybook: Improve component organisation - Layout Category - Issue #66275. ([66659](https://github.com/WordPress/gutenberg/pull/66659))
+- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66635](https://github.com/WordPress/gutenberg/pull/66635))
+- GradientPicker: Auto-generate readme. ([67250](https://github.com/WordPress/gutenberg/pull/67250))
+- Icon: Auto-generate readme. ([67282](https://github.com/WordPress/gutenberg/pull/67282))
+- Icon: Improve `icon` prop usage documentation in Storybook. ([67280](https://github.com/WordPress/gutenberg/pull/67280))
+- Storybook: Restore stable components back into categories. ([67216](https://github.com/WordPress/gutenberg/pull/67216))
+- Update BlockMover Stories and README. ([66519](https://github.com/WordPress/gutenberg/pull/66519))
+- Update custom store readme to use thunks instead of controls. ([67006](https://github.com/WordPress/gutenberg/pull/67006))
+- Update versions-in-wordpress.md. ([67298](https://github.com/WordPress/gutenberg/pull/67298))
+
+### Code Quality
+
+- ESLint: Enable `eslint-plugin-react-compiler`. ([61788](https://github.com/WordPress/gutenberg/pull/61788))
+- Extract selectors from useResolveEditedEntity hook. ([67031](https://github.com/WordPress/gutenberg/pull/67031))
+- Pattern: Remove backward compatibility code for WordPress < 6.4. ([67131](https://github.com/WordPress/gutenberg/pull/67131))
+- Post fields: Move `author` from `edit-site` to `fields` package. ([66939](https://github.com/WordPress/gutenberg/pull/66939))
+- Posts DataViews: Refactor the router to use route registration. ([67160](https://github.com/WordPress/gutenberg/pull/67160))
+- Comments controller: Fix issue where comments are allowed when closed. ([66976](https://github.com/WordPress/gutenberg/pull/66976))
+- Fix fatal error in in_array call in post_type_default_rendering_mode. ([67225](https://github.com/WordPress/gutenberg/pull/67225))
+- Data: Add changelog for Redux update. ([66968](https://github.com/WordPress/gutenberg/pull/66968))
+
+#### Components
+- BorderBoxControl: Suppress redundant warnings for deprecated 36px size. ([67213](https://github.com/WordPress/gutenberg/pull/67213))
+- ComboboxControl : Deprecate 36px default size. ([66900](https://github.com/WordPress/gutenberg/pull/66900))
+- CustomGradientPicker: Prepare `Button`s for 40px default size. ([67286](https://github.com/WordPress/gutenberg/pull/67286))
+- Dashicons: Remove non-existent icons from type. ([67235](https://github.com/WordPress/gutenberg/pull/67235))
+- DimensionControl: Deprecate 36px default size. ([66705](https://github.com/WordPress/gutenberg/pull/66705))
+- Feat: Adds the deprecation warning for 36px default size in range control. ([66721](https://github.com/WordPress/gutenberg/pull/66721))
+- FontSizePicker : Deprecate 36px default size. ([66920](https://github.com/WordPress/gutenberg/pull/66920))
+- Remove createPrivateSlotFill function. ([67238](https://github.com/WordPress/gutenberg/pull/67238))
+- SlotFill: Fix dependencies of registration effects, deduplicate code. ([67071](https://github.com/WordPress/gutenberg/pull/67071))
+- SlotFill: Remove registration API from useSlot result. ([67070](https://github.com/WordPress/gutenberg/pull/67070))
+- SlotFill: Rewrite base Slot to functional, unify rerenderable refs. ([67153](https://github.com/WordPress/gutenberg/pull/67153))
+- TextControl: Deprecate 36px default size. ([66745](https://github.com/WordPress/gutenberg/pull/66745))
+- ToggleGroupControl : Deprecate 36px default size. ([66747](https://github.com/WordPress/gutenberg/pull/66747))
+
+#### Post Editor
+- ESLint: Bump `eslint-plugin-react-compiler` to latest beta. ([67106](https://github.com/WordPress/gutenberg/pull/67106))
+- Edit Post: Refactor 'MetaBoxVisibility' component. ([67265](https://github.com/WordPress/gutenberg/pull/67265))
+- Edit Post: Remove unused 'hasHistory' flag. ([67293](https://github.com/WordPress/gutenberg/pull/67293))
+- Editor: Update focus return handler for the Featured Image. ([67236](https://github.com/WordPress/gutenberg/pull/67236))
+- Make `BlockManager` component reusable. ([67052](https://github.com/WordPress/gutenberg/pull/67052))
+- Preferences: Use hooks instead of HoC in 'EnableCustomFieldsOption'. ([67023](https://github.com/WordPress/gutenberg/pull/67023))
+- Preferences: Use hooks instead of HoC in 'EnablePanelOption'. ([66994](https://github.com/WordPress/gutenberg/pull/66994))
+- Preferences: Use hooks instead of HoC in 'EnablePublishSidebarOption'. ([67002](https://github.com/WordPress/gutenberg/pull/67002))
+
+#### Block Library
+- Fix React Compiler error for shortcuts. ([67019](https://github.com/WordPress/gutenberg/pull/67019))
+- Home Link: Remove label attribute synchronization. ([67151](https://github.com/WordPress/gutenberg/pull/67151))
+- Use rems for Nav overlay left padding. ([67168](https://github.com/WordPress/gutenberg/pull/67168))
+- useBlockNameForPatterns: Refactor as a single useSelect call. ([67171](https://github.com/WordPress/gutenberg/pull/67171))
+- Navigation Block: Remove obsolete Block Hooks filters. ([64676](https://github.com/WordPress/gutenberg/pull/64676))
+- [mini] 🧹 remove obsolete rich text css. ([67264](https://github.com/WordPress/gutenberg/pull/67264))
+
+#### Global Styles
+- Don't call store actions during the render. ([67146](https://github.com/WordPress/gutenberg/pull/67146))
+- Edit Site: Fix settings mutation in `ScreenBlock`. ([67085](https://github.com/WordPress/gutenberg/pull/67085))
+- Remove unused 'Fragment' import. ([67104](https://github.com/WordPress/gutenberg/pull/67104))
+
+#### Block Editor
+- Block Manager: Make it a private component in the block editor package. ([67255](https://github.com/WordPress/gutenberg/pull/67255))
+- Inserter: Set initial active tab ID during render. ([67103](https://github.com/WordPress/gutenberg/pull/67103))
+
+#### Site Editor
+- Deprecate edited entity state. ([66965](https://github.com/WordPress/gutenberg/pull/66965))
+- Remove redundant style-edit route. ([67057](https://github.com/WordPress/gutenberg/pull/67057))
+
+### Tools
+
+#### Testing
+- Fix ESLint Jest reporting entire body of the test function rather than the identifier. ([67222](https://github.com/WordPress/gutenberg/pull/67222))
+- Fix typo in use-block-sync tests. ([67145](https://github.com/WordPress/gutenberg/pull/67145))
+- Migrate Gradle wrapper validation action. ([66602](https://github.com/WordPress/gutenberg/pull/66602))
+
+#### Plugin
+- Bump minimum required WordPress version to 6.6. ([67117](https://github.com/WordPress/gutenberg/pull/67117))
+- Add #7895 Core Backport PR to the changelog. ([67319](https://github.com/WordPress/gutenberg/pull/67319))
+- WP Scripts: Revert changes that inline CSS imports early in the build process. ([66975](https://github.com/WordPress/gutenberg/pull/66975))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AKSHAT2802: Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148))
+- @benazeer-ben: Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385))
+- @himanshupathak95: Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011))
+- @SainathPoojary: Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204))
+- @sarthaknagoshe2002: Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010))
+- @Sukhendu2002: Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @akasunil @AKSHAT2802 @benazeer-ben @benniledl @carolinan @cbravobernal @desrosj @dhruvang21 @dougwollison @ellatrix @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @Infinite-Null @jeryj @jsnajdr @juanfra @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @michalczaplinski @miminari @mirka @ndiego @ntsekouras @oandregal @ockham @PARTHVATALIYA @ramonjd @SainathPoojary @SantosGuillamot @sarthaknagoshe2002 @snehapatil2001 @Soean @stokesman @Sukhendu2002 @t-hamano @talldan @tellthemachines @TylerB24890 @tyxla @up1512001 @vipul0425 @yogeshbhutkar @youknowriad
+
+
+
+
+= 19.7.0 =
+
+## Changelog
+
+### Enhancements
+
+- Add "show template" to preview dropdown. ([66514](https://github.com/WordPress/gutenberg/pull/66514))
+- Iframe: Always enable for block themes, in core too. ([66800](https://github.com/WordPress/gutenberg/pull/66800))
+- Media Utils: Add experimental `sideloadMedia`. ([66378](https://github.com/WordPress/gutenberg/pull/66378))
+- Post fields: Clean up. ([66941](https://github.com/WordPress/gutenberg/pull/66941))
+- Post fields: Extract `title` from `edit-site` to `fields` package. ([66940](https://github.com/WordPress/gutenberg/pull/66940))
+- Post fields: Move `comment_status` from edit-site to fields package. ([66934](https://github.com/WordPress/gutenberg/pull/66934))
+- Post fields: Move `date` fields from `edit-site` to `fields` package. ([66938](https://github.com/WordPress/gutenberg/pull/66938))
+- Post fields: Move `status` from `edit-site` to `fields`. ([66937](https://github.com/WordPress/gutenberg/pull/66937))
+- Relocate “View” external link to end of editor header controls. ([66785](https://github.com/WordPress/gutenberg/pull/66785))
+
+#### Block Library
+- Added toggle control to set any image as feature image if no feature image is set for post. ([65896](https://github.com/WordPress/gutenberg/pull/65896))
+- Improve cover z-index solution. ([66249](https://github.com/WordPress/gutenberg/pull/66249))
+- Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- Query Loop: Use templateSlug and postType for more context. ([65820](https://github.com/WordPress/gutenberg/pull/65820))
+- Update text case of "Starter Content". ([66954](https://github.com/WordPress/gutenberg/pull/66954))
+- [Details Block]: Adds anchor support in details block. ([66734](https://github.com/WordPress/gutenberg/pull/66734))
+
+#### Components
+- Guide: Use small size button for page controls. ([66607](https://github.com/WordPress/gutenberg/pull/66607))
+- MenuItem: Add 40px size prop on Button. ([66596](https://github.com/WordPress/gutenberg/pull/66596))
+- Notice: Add appropriate size props to Buttons. ([66593](https://github.com/WordPress/gutenberg/pull/66593))
+- PaletteEdit: Add appropriate size props to Buttons. ([66590](https://github.com/WordPress/gutenberg/pull/66590))
+- Popover: Add small size prop to close button. ([66587](https://github.com/WordPress/gutenberg/pull/66587))
+
+#### Global Styles
+- Global styles revisions: Move focus and active state to list item. ([66780](https://github.com/WordPress/gutenberg/pull/66780))
+- Site editor: Integrate global styles controls and style book preview into the styles panel. ([65619](https://github.com/WordPress/gutenberg/pull/65619))
+
+#### DataViews
+- DataViews Fields API: Default getValueFromId supports nested objects. ([66890](https://github.com/WordPress/gutenberg/pull/66890))
+
+#### Block Editor
+- Inserter: Add 'Starter Content' category to the inserter. ([66819](https://github.com/WordPress/gutenberg/pull/66819))
+
+#### Zoom Out
+- Enable zoom out mode for non-iframe editor. ([66789](https://github.com/WordPress/gutenberg/pull/66789))
+
+#### Themes
+- Theme JSON Resolver: Remove theme json merge in resolve_theme_file_uris. ([66662](https://github.com/WordPress/gutenberg/pull/66662))
+
+#### Edit Mode
+- Image block: Add support for "more" dropdown for additional tools in Write mode. ([66605](https://github.com/WordPress/gutenberg/pull/66605))
+
+#### Style Book
+- Add a landing section to stylebook tabs. ([66545](https://github.com/WordPress/gutenberg/pull/66545))
+
+#### Media
+- Media Library: Expose filters dropdown for individual images, such as with the Image block. ([65965](https://github.com/WordPress/gutenberg/pull/65965))
+
+
+### Bug Fixes
+
+- Block toolbar: Restrict visible child calculation to known blocks. ([66702](https://github.com/WordPress/gutenberg/pull/66702))
+- ComplementaryArea: Fix button position. ([66677](https://github.com/WordPress/gutenberg/pull/66677))
+- Fix Paragraph appender layout shift (building on 66061). ([66779](https://github.com/WordPress/gutenberg/pull/66779))
+- Fix: Set the `fit-content` width for images that are not `.svg`. ([66643](https://github.com/WordPress/gutenberg/pull/66643))
+- Preference modal: Avoid fetching all reusable blocks when the site editor loads. ([66621](https://github.com/WordPress/gutenberg/pull/66621))
+- Revert "Set image width to `fit-content` to solve aspect ratio problems in Firefox. (#66217)". ([66804](https://github.com/WordPress/gutenberg/pull/66804))
+- Safari: Fix site editor template error. ([66647](https://github.com/WordPress/gutenberg/pull/66647))
+- Safari: Prevent focus capturing caused by flex display. ([66402](https://github.com/WordPress/gutenberg/pull/66402))
+- Select Mode: Hide tool selector in the post editor and force design mode. ([66784](https://github.com/WordPress/gutenberg/pull/66784))
+- Shadow panel: Make the delete modal text translatable. ([66712](https://github.com/WordPress/gutenberg/pull/66712))
+- Site Editor: Fix template for page-on-front option. ([66739](https://github.com/WordPress/gutenberg/pull/66739))
+- WP Scripts: Make watch mode more resilient for developer errors. ([66752](https://github.com/WordPress/gutenberg/pull/66752))
+- getDefaultTemplateId: Ensure entity configuration is loaded. ([66650](https://github.com/WordPress/gutenberg/pull/66650))
+- Comments controller: fix issue where comments are allowed when closed (https://github.com/WordPress/gutenberg/pull/66976)
+
+#### Block Library
+- Cover: Fix media library image selection. ([66782](https://github.com/WordPress/gutenberg/pull/66782))
+- Cover: Show DropZone only when dragging withing the block. ([66912](https://github.com/WordPress/gutenberg/pull/66912))
+- Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- Prevent duplicate post format taxonomy queries. ([66627](https://github.com/WordPress/gutenberg/pull/66627))
+- Query Loop: Check for postTypeFromContext before using it. ([66655](https://github.com/WordPress/gutenberg/pull/66655))
+- Query Loop: Remove postTypeFromContext. ([66681](https://github.com/WordPress/gutenberg/pull/66681))
+
+#### Block Editor
+- Appender: Fix initial position. ([66711](https://github.com/WordPress/gutenberg/pull/66711))
+- Appender: Fix outside canvas styles. ([66630](https://github.com/WordPress/gutenberg/pull/66630))
+- Block Inspector: Restore bottom margin for RadioControl. ([66688](https://github.com/WordPress/gutenberg/pull/66688))
+- Iframed editor: Fix relative wp-content URLs. ([66751](https://github.com/WordPress/gutenberg/pull/66751))
+
+#### Global Styles
+- Section Styles: Fix insecure properties removal for inner block types and elements. ([66896](https://github.com/WordPress/gutenberg/pull/66896))
+- Style book: Reduce margin selector specificity so that it doesn't override global block styles. ([66895](https://github.com/WordPress/gutenberg/pull/66895))
+- Theme JSON: Replace top-level background style objects on merge. ([66656](https://github.com/WordPress/gutenberg/pull/66656))
+
+#### Components
+- FormTokenField: Fix token styles. ([66640](https://github.com/WordPress/gutenberg/pull/66640))
+- Storybook: Fix DataViews action modals. ([66727](https://github.com/WordPress/gutenberg/pull/66727))
+- ToggleGroupControl: Fix active background for `zero` value. ([66855](https://github.com/WordPress/gutenberg/pull/66855))
+
+#### Post Editor
+- Disable device preview button in pattern/template part/navitation editor. ([65970](https://github.com/WordPress/gutenberg/pull/65970))
+- PostTaxonomiesFlatTermSelector: Abstract wrapper component. ([66625](https://github.com/WordPress/gutenberg/pull/66625))
+- VisualEditor: Always output has-global-padding classname when in post only mode. ([66626](https://github.com/WordPress/gutenberg/pull/66626))
+
+#### DataViews
+- Fix TypeError when duplicating uncategorized theme patterns. ([66889](https://github.com/WordPress/gutenberg/pull/66889))
+- Tweak primary field in patterns grid layout. ([66733](https://github.com/WordPress/gutenberg/pull/66733))
+
+#### Meta Boxes
+- Fix: Show Meta Boxes at the bottom of the screen regardless of the current rendering mode. ([66508](https://github.com/WordPress/gutenberg/pull/66508))
+- Hide metaboxes in Zoom Out. ([66886](https://github.com/WordPress/gutenberg/pull/66886))
+
+#### Site Editor
+- DataViews: Fix 'aria-label' for pattern preview element. ([66601](https://github.com/WordPress/gutenberg/pull/66601))
+- Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+#### Media
+- Add `x-wav` mime type for wav files in Firefox. ([66850](https://github.com/WordPress/gutenberg/pull/66850))
+- Ensure HEIC files selectable from “Upload” button. ([66292](https://github.com/WordPress/gutenberg/pull/66292))
+
+#### Patterns
+- Fix uncategorized pattern browsing when pattern has no categories. ([66945](https://github.com/WordPress/gutenberg/pull/66945))
+
+#### Interactivity API
+- Fix property modification from inherited context two or more levels above. ([66872](https://github.com/WordPress/gutenberg/pull/66872))
+
+#### Block API
+- Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports. ([66849](https://github.com/WordPress/gutenberg/pull/66849))
+
+#### Design Tools
+- Block Gap: Fix block spacing control for axial gap supported blocks. ([66783](https://github.com/WordPress/gutenberg/pull/66783))
+
+#### Document Settings
+- Editor: Restore the 'PluginPostStatusInfo' slot position. ([66665](https://github.com/WordPress/gutenberg/pull/66665))
+
+#### Templates API
+- Fix flash when clicking template name in the editor when a plugin registered template matches a default WP theme template. ([66359](https://github.com/WordPress/gutenberg/pull/66359))
+
+#### Block bindings
+- Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+
+
+### Accessibility
+
+- Fix : Snackbar Notice Inconsistency. ([66405](https://github.com/WordPress/gutenberg/pull/66405))
+- Image: Add `aria-haspopup` prop write mode `more` tools menu items. ([66815](https://github.com/WordPress/gutenberg/pull/66815))
+- Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+
+#### Components
+- Popover: Fix missing label of the headerTitle Close button. ([66813](https://github.com/WordPress/gutenberg/pull/66813))
+
+#### Post Editor
+- Fix inconsistent sidebars close buttons sizes. ([66756](https://github.com/WordPress/gutenberg/pull/66756))
+
+#### Block Library
+- Remove unnecessary tooltip from Video block Text tracks button. ([66716](https://github.com/WordPress/gutenberg/pull/66716))
+
+#### Block Editor
+- Speak 'Block moved up/down' after using keyboard actions to move up/down. ([64966](https://github.com/WordPress/gutenberg/pull/64966))
+
+#### Patterns
+- Block Patterns List: Fix visual title and tooltip inconsistencies. ([64815](https://github.com/WordPress/gutenberg/pull/64815))
+
+
+### Performance
+
+- Inline Commenting: Avoid querying comments on editor load. ([66670](https://github.com/WordPress/gutenberg/pull/66670))
+- Patterns: Receive intermediate responses while unbound request is resolving. ([66713](https://github.com/WordPress/gutenberg/pull/66713))
+- Perf metrics: Update select and other metrics to use non-empty paragraphs. ([66762](https://github.com/WordPress/gutenberg/pull/66762))
+- Site Editor: Preload settings requests. ([66488](https://github.com/WordPress/gutenberg/pull/66488))
+- Site Editor: Speed up load by preloading home and front-page templates. ([66579](https://github.com/WordPress/gutenberg/pull/66579))
+- Site editor: Preload post if needed. ([66631](https://github.com/WordPress/gutenberg/pull/66631))
+
+#### Global Styles
+- Preload user global styles based on user caps. ([66541](https://github.com/WordPress/gutenberg/pull/66541))
+
+
+### Experiments
+
+- Add `isVisible` option to fields within DataForm. ([65826](https://github.com/WordPress/gutenberg/pull/65826))
+- DataViews: Implement `isItemClickable` and `onClickItem` props. ([66365](https://github.com/WordPress/gutenberg/pull/66365))
+
+#### DataViews
+- Quick Edit - Slug Field: Improve slug preview. ([66559](https://github.com/WordPress/gutenberg/pull/66559))
+- QuickEdit: Add password field data to the pages quick edit. ([66567](https://github.com/WordPress/gutenberg/pull/66567))
+
+
+### Documentation
+
+- Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- Add missing properties for DataViews/DataForm components. ([66749](https://github.com/WordPress/gutenberg/pull/66749))
+- Add section about the Fields API. ([66761](https://github.com/WordPress/gutenberg/pull/66761))
+- Block Bindings: Documentation API reference. ([66251](https://github.com/WordPress/gutenberg/pull/66251))
+- Docs: Include a note about supported licenses in WordPress packages. ([66562](https://github.com/WordPress/gutenberg/pull/66562))
+- Document `filterSortAndPaginate` & `isItemValid` utilities. ([66738](https://github.com/WordPress/gutenberg/pull/66738))
+- Feat: Storybook: Improve component organisation - Navigation Category - Issue #66275. ([66658](https://github.com/WordPress/gutenberg/pull/66658))
+- Feat: Storybook: Improve component organisation - Overlays Category - Issue #66275. ([66657](https://github.com/WordPress/gutenberg/pull/66657))
+- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66660](https://github.com/WordPress/gutenberg/pull/66660))
+- Feat: Storybook: Improve component organisation - Typography - Issue #66275. ([66633](https://github.com/WordPress/gutenberg/pull/66633))
+- Improve readability of DataViews documentation. ([66766](https://github.com/WordPress/gutenberg/pull/66766))
+- Move documentation for filter operators to proper place. ([66743](https://github.com/WordPress/gutenberg/pull/66743))
+- Reorganize to bootstrap DataForm API section. ([66729](https://github.com/WordPress/gutenberg/pull/66729))
+- Storybook: Improve component organisation - Actions. ([66680](https://github.com/WordPress/gutenberg/pull/66680))
+- Storybook: Log `warning()` when in dev mode. ([66568](https://github.com/WordPress/gutenberg/pull/66568))
+- Update Commands documentation with the existing contexts. ([66860](https://github.com/WordPress/gutenberg/pull/66860))
+
+
+### Code Quality
+
+- BlockPatternsList: Use the Async component. ([66744](https://github.com/WordPress/gutenberg/pull/66744))
+- Core Commands: Fix add new post URL assignment. ([66830](https://github.com/WordPress/gutenberg/pull/66830))
+- Inline Commenting: Optimize store selector and misc changes. ([66592](https://github.com/WordPress/gutenberg/pull/66592))
+- Remove unnecessary boolean assignments. ([66857](https://github.com/WordPress/gutenberg/pull/66857))
+- TypeScript: Fix and improve types for private-apis. ([66667](https://github.com/WordPress/gutenberg/pull/66667))
+
+#### Block Editor
+- Fix 'useSelect' dependencies for the 'RichText' component. ([66964](https://github.com/WordPress/gutenberg/pull/66964))
+- Fix ESLint warning for 'useBlockTypesState' hook. ([66757](https://github.com/WordPress/gutenberg/pull/66757))
+- Fix React Compiler error for 'BlockProps' util component. ([66809](https://github.com/WordPress/gutenberg/pull/66809))
+- Optimize `getVisibleElementBounds` in scrollable cases. ([66546](https://github.com/WordPress/gutenberg/pull/66546))
+- Revert: Fix unable to remove empty blocks on merge (#65262) + alternative. ([66564](https://github.com/WordPress/gutenberg/pull/66564))
+- URLInput: Fix incorrect classname for suggestions. ([66714](https://github.com/WordPress/gutenberg/pull/66714))
+
+#### Site Editor
+- Avoid using edited entity state in site editor loading hook. ([66924](https://github.com/WordPress/gutenberg/pull/66924))
+- Avoid using edited post selectors in welcome guide. ([66926](https://github.com/WordPress/gutenberg/pull/66926))
+- Edit Site: Refactor to remove usage of edited entity state. ([66922](https://github.com/WordPress/gutenberg/pull/66922))
+- Edit Site: Remove leftover 'priority-queue' dependency. ([66773](https://github.com/WordPress/gutenberg/pull/66773))
+- Remove useEditedEntityRecord hook. ([66955](https://github.com/WordPress/gutenberg/pull/66955))
+
+#### Components
+- Fix React Compiler error for 'useScrollRectIntoView'. ([66498](https://github.com/WordPress/gutenberg/pull/66498))
+- Panel: Add 40px size prop to Button. ([66589](https://github.com/WordPress/gutenberg/pull/66589))
+- Radio: Deprecate 36px default size. ([66572](https://github.com/WordPress/gutenberg/pull/66572))
+- Snackbar: Use `link` variant for action Button. ([66560](https://github.com/WordPress/gutenberg/pull/66560))
+
+#### Data Layer
+- Convert the emitter module in data package to TS. ([66669](https://github.com/WordPress/gutenberg/pull/66669))
+- Data: Rename useSelect internals to fix React Compiler violations. ([66807](https://github.com/WordPress/gutenberg/pull/66807))
+- Data: Upgrade Redux to v5.0.1. ([66966](https://github.com/WordPress/gutenberg/pull/66966))
+
+#### Post Editor
+- ESLint: Fix React Compiler violations in various commands. ([66787](https://github.com/WordPress/gutenberg/pull/66787))
+- Fix TS types for editor package. ([66754](https://github.com/WordPress/gutenberg/pull/66754))
+
+#### Zoom Out
+- Zoom-out: Move default background to the iframe component. ([66284](https://github.com/WordPress/gutenberg/pull/66284))
+
+#### Design Tools
+- Typography: Stabilize typography block supports within block processing. ([63401](https://github.com/WordPress/gutenberg/pull/63401))
+
+
+### Tools
+
+#### Testing
+- Media: Check for `wav` mime type using isset. ([66947](https://github.com/WordPress/gutenberg/pull/66947))
+
+#### Build Tooling
+- Enforce the same order of fields in `package.json` files. ([66239](https://github.com/WordPress/gutenberg/pull/66239))
+- Introduce React Scanner for component usage stats. ([65463](https://github.com/WordPress/gutenberg/pull/65463))
+
+
+### Various
+
+- Style engine: Wrap array_merge in conditionals to prevent unnecessary merging. ([66661](https://github.com/WordPress/gutenberg/pull/66661))
+
+#### Block Library
+- Update placeholder text for blocks that support drag and drop. ([66842](https://github.com/WordPress/gutenberg/pull/66842))
+- update: Add Media to Add media in cover block. ([66835](https://github.com/WordPress/gutenberg/pull/66835))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @benharri: Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+- @benniledl: Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- @Infinite-Null: Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- @karthick-murugan: Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+- @rinkalpagdar: Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- @yogeshbhutkar: Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @Aljullu @amitraj2203 @andrewserong @benharri @benniledl @carolinan @cbravobernal @DAreRodz @dcalhoun @ellatrix @fabiankaegy @gigitux @gziolo @hbhalodia @Infinite-Null @jasmussen @jorgefilipecosta @jsnajdr @juanfra @karthick-murugan @kevin940726 @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mikachan @mirka @n2erjo00 @ntsekouras @oandregal @ramonjd @renatho @rinkalpagdar @Soean @stokesman @swissspidy @t-hamano @tellthemachines @tyxla @up1512001 @Vrishabhsk @yogeshbhutkar @youknowriad
+
+
+
+
+= 19.8.0-rc.1 =
+
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Details block: Use summary content as default label. ([67217](https://github.com/WordPress/gutenberg/pull/67217))
+- Make social icon navigation one arrow keypress. ([64883](https://github.com/WordPress/gutenberg/pull/64883))
+- Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385))
+- Query Loop block: Remove 'add new post' prompt in the sidebar. ([67189](https://github.com/WordPress/gutenberg/pull/67189))
+- Query block: Update Enhanced Pagination help text. ([67173](https://github.com/WordPress/gutenberg/pull/67173))
+- Social Link: Add contentOnly editing support. ([66622](https://github.com/WordPress/gutenberg/pull/66622))
+
+#### Components
+- Autocomplete: Increase option height. ([67214](https://github.com/WordPress/gutenberg/pull/67214))
+- CircularOptionPicker: Update Button sizes. ([67285](https://github.com/WordPress/gutenberg/pull/67285))
+- ColorPalette: Disable `Clear` button if there's no color value. ([67108](https://github.com/WordPress/gutenberg/pull/67108))
+- ColorPicker: Update sizes of format select and copy button. ([67093](https://github.com/WordPress/gutenberg/pull/67093))
+- ComboboxControl: Update reset button size. ([67215](https://github.com/WordPress/gutenberg/pull/67215))
+
+#### DataViews
+- Add density option to `table` layout. ([67170](https://github.com/WordPress/gutenberg/pull/67170))
+- DataForm: Enable fields to declare a different layout. ([66531](https://github.com/WordPress/gutenberg/pull/66531))
+- DataViews list layout: Hide actions menu when there is only one action and is primary. ([67015](https://github.com/WordPress/gutenberg/pull/67015))
+- DataViews table layout: Hide actions menu when there is only one action and is primary. ([67020](https://github.com/WordPress/gutenberg/pull/67020))
+- Reduce the size of action button in Grid layout. ([67032](https://github.com/WordPress/gutenberg/pull/67032))
+- DataViews: Allow register/unregister fields. ([67175](https://github.com/WordPress/gutenberg/pull/67175))
+
+#### Global Styles
+- Block Supports: Extend stabilization to common experimental block support flags. ([67018](https://github.com/WordPress/gutenberg/pull/67018))
+- Borders: Stabilize border block supports within block processing. ([66918](https://github.com/WordPress/gutenberg/pull/66918))
+- Site Editor > Styles: Open styles inspector when clicking preview canvas. ([66996](https://github.com/WordPress/gutenberg/pull/66996))
+
+#### Media
+- Block Editor: Add notice action to revert image to original after cropping. ([67314](https://github.com/WordPress/gutenberg/pull/67314))
+- Block Editor: Add success notices for image editing. ([67312](https://github.com/WordPress/gutenberg/pull/67312))
+
+#### REST API
+- Feature: Set editor rendering mode by post type. ([62304](https://github.com/WordPress/gutenberg/pull/62304))
+- Terms: Respect order specified by register_taxonomy(). ([67154](https://github.com/WordPress/gutenberg/pull/67154))
+
+#### Zoom Out
+- Leave help text regardless of zoom state. ([67132](https://github.com/WordPress/gutenberg/pull/67132))
+- Preserve footer template bar in zoom out. ([67135](https://github.com/WordPress/gutenberg/pull/67135))
+- Add section styles switch button in block toolbar in zoom out mode. ([67140](https://github.com/WordPress/gutenberg/pull/67140))
+
+#### Post Editor
+-  Move default template types and template part areas to REST API. ([66459](https://github.com/WordPress/gutenberg/pull/66459))
+- Move `usePostFields` to `wordpress/editor` package. ([67024](https://github.com/WordPress/gutenberg/pull/67024))
+
+#### Site Editor
+- Blocks: Adds check for parent before showing convert to pattern button. ([66158](https://github.com/WordPress/gutenberg/pull/66158))
+- Try dark toolbar for the write mode. ([66116](https://github.com/WordPress/gutenberg/pull/66116))
+
+#### Design Tools
+- Heading: Hide border controls by default. ([67105](https://github.com/WordPress/gutenberg/pull/67105))
+- Font family preview in the font family picker. ([67118](https://github.com/WordPress/gutenberg/pull/67118))
+
+### Bug Fixes
+
+
+
+
+#### Block Library
+- Fix block mover clickable area. ([67261](https://github.com/WordPress/gutenberg/pull/67261))
+- Fix dropping media from inserter into Cover block. ([67056](https://github.com/WordPress/gutenberg/pull/67056))
+- Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263))
+- Paragraph: Update condition for rendering Drop Cap for a selected block. ([67111](https://github.com/WordPress/gutenberg/pull/67111))
+- RSS block: Check for description field before rendering excerpt. ([66985](https://github.com/WordPress/gutenberg/pull/66985))
+- Resolve search block button text overlapping issue. ([66868](https://github.com/WordPress/gutenberg/pull/66868))
+- Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204))
+
+#### Components
+- Composite: Restore `Hover` and `Typeahead` functionality. ([67212](https://github.com/WordPress/gutenberg/pull/67212))
+- Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011))
+- SlotFill: Fix a bug with storing stale fillProps. ([67000](https://github.com/WordPress/gutenberg/pull/67000))
+- Storybook: Fix DataViews layout. ([66999](https://github.com/WordPress/gutenberg/pull/66999))
+- `FormFileUpload`: Prevent HEIC and HEIF files from always being uploaded on Safari. ([67139](https://github.com/WordPress/gutenberg/pull/67139))
+
+#### Block Editor
+- Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148))
+- Correctly mark Block Comment SlotFills private. ([67271](https://github.com/WordPress/gutenberg/pull/67271))
+- Fix media placeholder to only activate for media objects. ([66986](https://github.com/WordPress/gutenberg/pull/66986))
+- Rich text: Preserve comments. ([62128](https://github.com/WordPress/gutenberg/pull/62128))
+- Fix TS types for the editor package. ([67196](https://github.com/WordPress/gutenberg/pull/67196))
+- PostTitle: Exit early when post type doesn't support titles. ([67086](https://github.com/WordPress/gutenberg/pull/67086))
+
+#### Global Styles
+- Avoid zooming out when browsing styles if the preview mode is active. ([67190](https://github.com/WordPress/gutenberg/pull/67190))
+- Remove styles from blocks' previews. ([67144](https://github.com/WordPress/gutenberg/pull/67144))
+- Style panel: Use correct revisions count. ([67180](https://github.com/WordPress/gutenberg/pull/67180))
+- Theme JSON: Include block style variations in path only output of get_block_nodes. ([66948](https://github.com/WordPress/gutenberg/pull/66948))
+- Fix: Logic for Highlight/text-color format availability. ([65530](https://github.com/WordPress/gutenberg/pull/65530))
+- Fix complex variation selectors when using selectors API. ([67061](https://github.com/WordPress/gutenberg/pull/67061))
+#### Site Editor
+- Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010))
+- Site Editor Sidebar: Fixed focus/hover style for navigation item buttons. ([67251](https://github.com/WordPress/gutenberg/pull/67251))
+- Site Hub: Fix height in mobile layout. ([67110](https://github.com/WordPress/gutenberg/pull/67110))
+- Site Editor: Styles: Fix inspector opening. ([67004](https://github.com/WordPress/gutenberg/pull/67004))
+- Improve accessibility and consistency of the 'Last modified' Revisions button. ([66606](https://github.com/WordPress/gutenberg/pull/66606))
+- Remove styles from examples. ([67098](https://github.com/WordPress/gutenberg/pull/67098))
+- Editor: Correctly select post title support in 'DocumentOutline'. ([67109](https://github.com/WordPress/gutenberg/pull/67109))
+
+
+#### DataViews
+- Fix action visibility logic. ([67197](https://github.com/WordPress/gutenberg/pull/67197))
+- Fix primary field misalignment in grid layout. ([66995](https://github.com/WordPress/gutenberg/pull/66995))
+- Fix spacing when combining combined fields. ([67226](https://github.com/WordPress/gutenberg/pull/67226))
+
+#### Zoom Out
+- Zoom In/Out to correct canvas location. ([66917](https://github.com/WordPress/gutenberg/pull/66917))
+- Zoom in/out to correct location. ([67126](https://github.com/WordPress/gutenberg/pull/67126))
+- Zoom Out: Disable zooming out when Distraction Free mode is activated. ([67028](https://github.com/WordPress/gutenberg/pull/67028))
+
+#### Layout
+- Allow flex justification controls to be disabled at the block level. ([67059](https://github.com/WordPress/gutenberg/pull/67059))
+- Show vertical alignment toolbar with allowSwitching enabled. ([67022](https://github.com/WordPress/gutenberg/pull/67022))
+
+#### Patterns
+- Fix: JavaScript error when pattern category is unregistered. ([67063](https://github.com/WordPress/gutenberg/pull/67063))
+- Block Locking: Remove edit locking for Synced Patterns. ([67021](https://github.com/WordPress/gutenberg/pull/67021))
+
+### Accessibility
+
+#### Components
+- ColorPicker: Add accessible label for copy button. ([67094](https://github.com/WordPress/gutenberg/pull/67094))
+- Modal: Increase size of the Close button. ([66792](https://github.com/WordPress/gutenberg/pull/66792))
+- DataViews: Fix focus loss when removing all filters or resetting. ([67003](https://github.com/WordPress/gutenberg/pull/67003))
+
+#### Block Library
+- Improve accessibility of the video track editor. ([66832](https://github.com/WordPress/gutenberg/pull/66832))
+- Navigation: Fix 'ariaLabel' block support. ([66943](https://github.com/WordPress/gutenberg/pull/66943))
+
+#### Post Editor
+- Improve the featured image UI when it cannot retrieve the image file and data. ([66936](https://github.com/WordPress/gutenberg/pull/66936))
+
+### Experiments
+
+- Inline Commenting: Update placement of reply input and add author info header. ([66580](https://github.com/WordPress/gutenberg/pull/66580))
+- Place "Write mode" functionality behind a Gutenberg experiment. ([67008](https://github.com/WordPress/gutenberg/pull/67008))
+
+### Documentation
+
+- Add documentation about required Core changes when updating minimum WordPress version. ([67167](https://github.com/WordPress/gutenberg/pull/67167))
+- BoxControl: Auto-generate readme. ([67284](https://github.com/WordPress/gutenberg/pull/67284))
+- Components contributing guide: Fix relative links. ([67323](https://github.com/WordPress/gutenberg/pull/67323))
+- DataViews: Reorganize documentation for actions. ([67159](https://github.com/WordPress/gutenberg/pull/67159))
+- Docs: Correct `@return` type in `block_core_query_disable_enhanced_pagination()`. ([67128](https://github.com/WordPress/gutenberg/pull/67128))
+- Feat: Storybook: Improve component organisation - Layout Category - Issue #66275. ([66659](https://github.com/WordPress/gutenberg/pull/66659))
+- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66635](https://github.com/WordPress/gutenberg/pull/66635))
+- GradientPicker: Auto-generate readme. ([67250](https://github.com/WordPress/gutenberg/pull/67250))
+- Icon: Auto-generate readme. ([67282](https://github.com/WordPress/gutenberg/pull/67282))
+- Icon: Improve `icon` prop usage documentation in Storybook. ([67280](https://github.com/WordPress/gutenberg/pull/67280))
+- Storybook: Restore stable components back into categories. ([67216](https://github.com/WordPress/gutenberg/pull/67216))
+- Update BlockMover Stories and README. ([66519](https://github.com/WordPress/gutenberg/pull/66519))
+- Update custom store readme to use thunks instead of controls. ([67006](https://github.com/WordPress/gutenberg/pull/67006))
+- Update versions-in-wordpress.md. ([67298](https://github.com/WordPress/gutenberg/pull/67298))
+
+### Code Quality
+
+- ESLint: Enable `eslint-plugin-react-compiler`. ([61788](https://github.com/WordPress/gutenberg/pull/61788))
+- Extract selectors from useResolveEditedEntity hook. ([67031](https://github.com/WordPress/gutenberg/pull/67031))
+- Pattern: Remove backward compatibility code for WordPress < 6.4. ([67131](https://github.com/WordPress/gutenberg/pull/67131))
+- Post fields: Move `author` from `edit-site` to `fields` package. ([66939](https://github.com/WordPress/gutenberg/pull/66939))
+- Posts DataViews: Refactor the router to use route registration. ([67160](https://github.com/WordPress/gutenberg/pull/67160))
+- Comments controller: Fix issue where comments are allowed when closed. ([66976](https://github.com/WordPress/gutenberg/pull/66976))
+- Fix fatal error in in_array call in post_type_default_rendering_mode. ([67225](https://github.com/WordPress/gutenberg/pull/67225))
+- Data: Add changelog for Redux update. ([66968](https://github.com/WordPress/gutenberg/pull/66968))
+
+#### Components
+- BorderBoxControl: Suppress redundant warnings for deprecated 36px size. ([67213](https://github.com/WordPress/gutenberg/pull/67213))
+- ComboboxControl : Deprecate 36px default size. ([66900](https://github.com/WordPress/gutenberg/pull/66900))
+- CustomGradientPicker: Prepare `Button`s for 40px default size. ([67286](https://github.com/WordPress/gutenberg/pull/67286))
+- Dashicons: Remove non-existent icons from type. ([67235](https://github.com/WordPress/gutenberg/pull/67235))
+- DimensionControl: Deprecate 36px default size. ([66705](https://github.com/WordPress/gutenberg/pull/66705))
+- Feat: Adds the deprecation warning for 36px default size in range control. ([66721](https://github.com/WordPress/gutenberg/pull/66721))
+- FontSizePicker : Deprecate 36px default size. ([66920](https://github.com/WordPress/gutenberg/pull/66920))
+- Remove createPrivateSlotFill function. ([67238](https://github.com/WordPress/gutenberg/pull/67238))
+- SlotFill: Fix dependencies of registration effects, deduplicate code. ([67071](https://github.com/WordPress/gutenberg/pull/67071))
+- SlotFill: Remove registration API from useSlot result. ([67070](https://github.com/WordPress/gutenberg/pull/67070))
+- SlotFill: Rewrite base Slot to functional, unify rerenderable refs. ([67153](https://github.com/WordPress/gutenberg/pull/67153))
+- TextControl: Deprecate 36px default size. ([66745](https://github.com/WordPress/gutenberg/pull/66745))
+- ToggleGroupControl : Deprecate 36px default size. ([66747](https://github.com/WordPress/gutenberg/pull/66747))
+
+#### Post Editor
+- ESLint: Bump `eslint-plugin-react-compiler` to latest beta. ([67106](https://github.com/WordPress/gutenberg/pull/67106))
+- Edit Post: Refactor 'MetaBoxVisibility' component. ([67265](https://github.com/WordPress/gutenberg/pull/67265))
+- Edit Post: Remove unused 'hasHistory' flag. ([67293](https://github.com/WordPress/gutenberg/pull/67293))
+- Editor: Update focus return handler for the Featured Image. ([67236](https://github.com/WordPress/gutenberg/pull/67236))
+- Make `BlockManager` component reusable. ([67052](https://github.com/WordPress/gutenberg/pull/67052))
+- Preferences: Use hooks instead of HoC in 'EnableCustomFieldsOption'. ([67023](https://github.com/WordPress/gutenberg/pull/67023))
+- Preferences: Use hooks instead of HoC in 'EnablePanelOption'. ([66994](https://github.com/WordPress/gutenberg/pull/66994))
+- Preferences: Use hooks instead of HoC in 'EnablePublishSidebarOption'. ([67002](https://github.com/WordPress/gutenberg/pull/67002))
+
+#### Block Library
+- Fix React Compiler error for shortcuts. ([67019](https://github.com/WordPress/gutenberg/pull/67019))
+- Home Link: Remove label attribute synchronization. ([67151](https://github.com/WordPress/gutenberg/pull/67151))
+- Use rems for Nav overlay left padding. ([67168](https://github.com/WordPress/gutenberg/pull/67168))
+- useBlockNameForPatterns: Refactor as a single useSelect call. ([67171](https://github.com/WordPress/gutenberg/pull/67171))
+- Navigation Block: Remove obsolete Block Hooks filters. ([64676](https://github.com/WordPress/gutenberg/pull/64676))
+- [mini] 🧹 remove obsolete rich text css. ([67264](https://github.com/WordPress/gutenberg/pull/67264))
+
+#### Global Styles
+- Don't call store actions during the render. ([67146](https://github.com/WordPress/gutenberg/pull/67146))
+- Edit Site: Fix settings mutation in `ScreenBlock`. ([67085](https://github.com/WordPress/gutenberg/pull/67085))
+- Remove unused 'Fragment' import. ([67104](https://github.com/WordPress/gutenberg/pull/67104))
+
+#### Block Editor
+- Block Manager: Make it a private component in the block editor package. ([67255](https://github.com/WordPress/gutenberg/pull/67255))
+- Inserter: Set initial active tab ID during render. ([67103](https://github.com/WordPress/gutenberg/pull/67103))
+
+#### Site Editor
+- Deprecate edited entity state. ([66965](https://github.com/WordPress/gutenberg/pull/66965))
+- Remove redundant style-edit route. ([67057](https://github.com/WordPress/gutenberg/pull/67057))
+
+### Tools
+
+#### Testing
+- Fix ESLint Jest reporting entire body of the test function rather than the identifier. ([67222](https://github.com/WordPress/gutenberg/pull/67222))
+- Fix typo in use-block-sync tests. ([67145](https://github.com/WordPress/gutenberg/pull/67145))
+- Migrate Gradle wrapper validation action. ([66602](https://github.com/WordPress/gutenberg/pull/66602))
+
+#### Plugin
+- Bump minimum required WordPress version to 6.6. ([67117](https://github.com/WordPress/gutenberg/pull/67117))
+- Add #7895 Core Backport PR to the changelog. ([67319](https://github.com/WordPress/gutenberg/pull/67319))
+- WP Scripts: Revert changes that inline CSS imports early in the build process. ([66975](https://github.com/WordPress/gutenberg/pull/66975))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AKSHAT2802: Add all color palettes to select from editor panel. ([65148](https://github.com/WordPress/gutenberg/pull/65148))
+- @benazeer-ben: Page List : Add border and spacing support. ([66385](https://github.com/WordPress/gutenberg/pull/66385))
+- @himanshupathak95: Menu.ItemHelpText: Better line breaking. ([67011](https://github.com/WordPress/gutenberg/pull/67011))
+- @SainathPoojary: Social Links: Fix font family and weight inconsistency in editor. ([67204](https://github.com/WordPress/gutenberg/pull/67204))
+- @sarthaknagoshe2002: Prevent Pre-Publish Panel from Displaying Incorrect Information After Navigating away. ([67010](https://github.com/WordPress/gutenberg/pull/67010))
+- @Sukhendu2002: Fix: Preserve Display Preview State in File Block. ([67263](https://github.com/WordPress/gutenberg/pull/67263))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @akasunil @AKSHAT2802 @benazeer-ben @benniledl @carolinan @cbravobernal @desrosj @dhruvang21 @dougwollison @ellatrix @getdave @gigitux @gziolo @hbhalodia @himanshupathak95 @Infinite-Null @jeryj @jsnajdr @juanfra @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @michalczaplinski @miminari @mirka @ndiego @ntsekouras @oandregal @ockham @PARTHVATALIYA @ramonjd @SainathPoojary @SantosGuillamot @sarthaknagoshe2002 @snehapatil2001 @Soean @Sukhendu2002 @t-hamano @talldan @tellthemachines @TylerB24890 @tyxla @up1512001 @vipul0425 @yogeshbhutkar @youknowriad
+
+
+= 19.7.0 =
+
+## Changelog
+
+### Enhancements
+
+- Add "show template" to preview dropdown. ([66514](https://github.com/WordPress/gutenberg/pull/66514))
+- Iframe: Always enable for block themes, in core too. ([66800](https://github.com/WordPress/gutenberg/pull/66800))
+- Media Utils: Add experimental `sideloadMedia`. ([66378](https://github.com/WordPress/gutenberg/pull/66378))
+- Post fields: Clean up. ([66941](https://github.com/WordPress/gutenberg/pull/66941))
+- Post fields: Extract `title` from `edit-site` to `fields` package. ([66940](https://github.com/WordPress/gutenberg/pull/66940))
+- Post fields: Move `comment_status` from edit-site to fields package. ([66934](https://github.com/WordPress/gutenberg/pull/66934))
+- Post fields: Move `date` fields from `edit-site` to `fields` package. ([66938](https://github.com/WordPress/gutenberg/pull/66938))
+- Post fields: Move `status` from `edit-site` to `fields`. ([66937](https://github.com/WordPress/gutenberg/pull/66937))
+- Relocate “View” external link to end of editor header controls. ([66785](https://github.com/WordPress/gutenberg/pull/66785))
+
+#### Block Library
+- Added toggle control to set any image as feature image if no feature image is set for post. ([65896](https://github.com/WordPress/gutenberg/pull/65896))
+- Improve cover z-index solution. ([66249](https://github.com/WordPress/gutenberg/pull/66249))
+- Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- Query Loop: Use templateSlug and postType for more context. ([65820](https://github.com/WordPress/gutenberg/pull/65820))
+- Update text case of "Starter Content". ([66954](https://github.com/WordPress/gutenberg/pull/66954))
+- [Details Block]: Adds anchor support in details block. ([66734](https://github.com/WordPress/gutenberg/pull/66734))
+
+#### Components
+- Guide: Use small size button for page controls. ([66607](https://github.com/WordPress/gutenberg/pull/66607))
+- MenuItem: Add 40px size prop on Button. ([66596](https://github.com/WordPress/gutenberg/pull/66596))
+- Notice: Add appropriate size props to Buttons. ([66593](https://github.com/WordPress/gutenberg/pull/66593))
+- PaletteEdit: Add appropriate size props to Buttons. ([66590](https://github.com/WordPress/gutenberg/pull/66590))
+- Popover: Add small size prop to close button. ([66587](https://github.com/WordPress/gutenberg/pull/66587))
+
+#### Global Styles
+- Global styles revisions: Move focus and active state to list item. ([66780](https://github.com/WordPress/gutenberg/pull/66780))
+- Site editor: Integrate global styles controls and style book preview into the styles panel. ([65619](https://github.com/WordPress/gutenberg/pull/65619))
+
+#### DataViews
+- DataViews Fields API: Default getValueFromId supports nested objects. ([66890](https://github.com/WordPress/gutenberg/pull/66890))
+
+#### Block Editor
+- Inserter: Add 'Starter Content' category to the inserter. ([66819](https://github.com/WordPress/gutenberg/pull/66819))
+
+#### Zoom Out
+- Enable zoom out mode for non-iframe editor. ([66789](https://github.com/WordPress/gutenberg/pull/66789))
+
+#### Themes
+- Theme JSON Resolver: Remove theme json merge in resolve_theme_file_uris. ([66662](https://github.com/WordPress/gutenberg/pull/66662))
+
+#### Edit Mode
+- Image block: Add support for "more" dropdown for additional tools in Write mode. ([66605](https://github.com/WordPress/gutenberg/pull/66605))
+
+#### Style Book
+- Add a landing section to stylebook tabs. ([66545](https://github.com/WordPress/gutenberg/pull/66545))
+
+#### Media
+- Media Library: Expose filters dropdown for individual images, such as with the Image block. ([65965](https://github.com/WordPress/gutenberg/pull/65965))
+
+
+### Bug Fixes
+
+- Block toolbar: Restrict visible child calculation to known blocks. ([66702](https://github.com/WordPress/gutenberg/pull/66702))
+- ComplementaryArea: Fix button position. ([66677](https://github.com/WordPress/gutenberg/pull/66677))
+- Fix Paragraph appender layout shift (building on 66061). ([66779](https://github.com/WordPress/gutenberg/pull/66779))
+- Fix: Set the `fit-content` width for images that are not `.svg`. ([66643](https://github.com/WordPress/gutenberg/pull/66643))
+- Preference modal: Avoid fetching all reusable blocks when the site editor loads. ([66621](https://github.com/WordPress/gutenberg/pull/66621))
+- Revert "Set image width to `fit-content` to solve aspect ratio problems in Firefox. (#66217)". ([66804](https://github.com/WordPress/gutenberg/pull/66804))
+- Safari: Fix site editor template error. ([66647](https://github.com/WordPress/gutenberg/pull/66647))
+- Safari: Prevent focus capturing caused by flex display. ([66402](https://github.com/WordPress/gutenberg/pull/66402))
+- Select Mode: Hide tool selector in the post editor and force design mode. ([66784](https://github.com/WordPress/gutenberg/pull/66784))
+- Shadow panel: Make the delete modal text translatable. ([66712](https://github.com/WordPress/gutenberg/pull/66712))
+- Site Editor: Fix template for page-on-front option. ([66739](https://github.com/WordPress/gutenberg/pull/66739))
+- WP Scripts: Make watch mode more resilient for developer errors. ([66752](https://github.com/WordPress/gutenberg/pull/66752))
+- getDefaultTemplateId: Ensure entity configuration is loaded. ([66650](https://github.com/WordPress/gutenberg/pull/66650))
+- Comments controller: fix issue where comments are allowed when closed (https://github.com/WordPress/gutenberg/pull/66976)
+
+#### Block Library
+- Cover: Fix media library image selection. ([66782](https://github.com/WordPress/gutenberg/pull/66782))
+- Cover: Show DropZone only when dragging withing the block. ([66912](https://github.com/WordPress/gutenberg/pull/66912))
+- Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- Prevent duplicate post format taxonomy queries. ([66627](https://github.com/WordPress/gutenberg/pull/66627))
+- Query Loop: Check for postTypeFromContext before using it. ([66655](https://github.com/WordPress/gutenberg/pull/66655))
+- Query Loop: Remove postTypeFromContext. ([66681](https://github.com/WordPress/gutenberg/pull/66681))
+
+#### Block Editor
+- Appender: Fix initial position. ([66711](https://github.com/WordPress/gutenberg/pull/66711))
+- Appender: Fix outside canvas styles. ([66630](https://github.com/WordPress/gutenberg/pull/66630))
+- Block Inspector: Restore bottom margin for RadioControl. ([66688](https://github.com/WordPress/gutenberg/pull/66688))
+- Iframed editor: Fix relative wp-content URLs. ([66751](https://github.com/WordPress/gutenberg/pull/66751))
+
+#### Global Styles
+- Section Styles: Fix insecure properties removal for inner block types and elements. ([66896](https://github.com/WordPress/gutenberg/pull/66896))
+- Style book: Reduce margin selector specificity so that it doesn't override global block styles. ([66895](https://github.com/WordPress/gutenberg/pull/66895))
+- Theme JSON: Replace top-level background style objects on merge. ([66656](https://github.com/WordPress/gutenberg/pull/66656))
+
+#### Components
+- FormTokenField: Fix token styles. ([66640](https://github.com/WordPress/gutenberg/pull/66640))
+- Storybook: Fix DataViews action modals. ([66727](https://github.com/WordPress/gutenberg/pull/66727))
+- ToggleGroupControl: Fix active background for `zero` value. ([66855](https://github.com/WordPress/gutenberg/pull/66855))
+
+#### Post Editor
+- Disable device preview button in pattern/template part/navitation editor. ([65970](https://github.com/WordPress/gutenberg/pull/65970))
+- PostTaxonomiesFlatTermSelector: Abstract wrapper component. ([66625](https://github.com/WordPress/gutenberg/pull/66625))
+- VisualEditor: Always output has-global-padding classname when in post only mode. ([66626](https://github.com/WordPress/gutenberg/pull/66626))
+
+#### DataViews
+- Fix TypeError when duplicating uncategorized theme patterns. ([66889](https://github.com/WordPress/gutenberg/pull/66889))
+- Tweak primary field in patterns grid layout. ([66733](https://github.com/WordPress/gutenberg/pull/66733))
+
+#### Meta Boxes
+- Fix: Show Meta Boxes at the bottom of the screen regardless of the current rendering mode. ([66508](https://github.com/WordPress/gutenberg/pull/66508))
+- Hide metaboxes in Zoom Out. ([66886](https://github.com/WordPress/gutenberg/pull/66886))
+
+#### Site Editor
+- DataViews: Fix 'aria-label' for pattern preview element. ([66601](https://github.com/WordPress/gutenberg/pull/66601))
+- Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+#### Media
+- Add `x-wav` mime type for wav files in Firefox. ([66850](https://github.com/WordPress/gutenberg/pull/66850))
+- Ensure HEIC files selectable from “Upload” button. ([66292](https://github.com/WordPress/gutenberg/pull/66292))
+
+#### Patterns
+- Fix uncategorized pattern browsing when pattern has no categories. ([66945](https://github.com/WordPress/gutenberg/pull/66945))
+
+#### Interactivity API
+- Fix property modification from inherited context two or more levels above. ([66872](https://github.com/WordPress/gutenberg/pull/66872))
+
+#### Block API
+- Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports. ([66849](https://github.com/WordPress/gutenberg/pull/66849))
+
+#### Design Tools
+- Block Gap: Fix block spacing control for axial gap supported blocks. ([66783](https://github.com/WordPress/gutenberg/pull/66783))
+
+#### Document Settings
+- Editor: Restore the 'PluginPostStatusInfo' slot position. ([66665](https://github.com/WordPress/gutenberg/pull/66665))
+
+#### Templates API
+- Fix flash when clicking template name in the editor when a plugin registered template matches a default WP theme template. ([66359](https://github.com/WordPress/gutenberg/pull/66359))
+
+#### Block bindings
+- Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+
+
+### Accessibility
+
+- Fix : Snackbar Notice Inconsistency. ([66405](https://github.com/WordPress/gutenberg/pull/66405))
+- Image: Add `aria-haspopup` prop write mode `more` tools menu items. ([66815](https://github.com/WordPress/gutenberg/pull/66815))
+- Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+
+#### Components
+- Popover: Fix missing label of the headerTitle Close button. ([66813](https://github.com/WordPress/gutenberg/pull/66813))
+
+#### Post Editor
+- Fix inconsistent sidebars close buttons sizes. ([66756](https://github.com/WordPress/gutenberg/pull/66756))
+
+#### Block Library
+- Remove unnecessary tooltip from Video block Text tracks button. ([66716](https://github.com/WordPress/gutenberg/pull/66716))
+
+#### Block Editor
+- Speak 'Block moved up/down' after using keyboard actions to move up/down. ([64966](https://github.com/WordPress/gutenberg/pull/64966))
+
+#### Patterns
+- Block Patterns List: Fix visual title and tooltip inconsistencies. ([64815](https://github.com/WordPress/gutenberg/pull/64815))
+
+
+### Performance
+
+- Inline Commenting: Avoid querying comments on editor load. ([66670](https://github.com/WordPress/gutenberg/pull/66670))
+- Patterns: Receive intermediate responses while unbound request is resolving. ([66713](https://github.com/WordPress/gutenberg/pull/66713))
+- Perf metrics: Update select and other metrics to use non-empty paragraphs. ([66762](https://github.com/WordPress/gutenberg/pull/66762))
+- Site Editor: Preload settings requests. ([66488](https://github.com/WordPress/gutenberg/pull/66488))
+- Site Editor: Speed up load by preloading home and front-page templates. ([66579](https://github.com/WordPress/gutenberg/pull/66579))
+- Site editor: Preload post if needed. ([66631](https://github.com/WordPress/gutenberg/pull/66631))
+
+#### Global Styles
+- Preload user global styles based on user caps. ([66541](https://github.com/WordPress/gutenberg/pull/66541))
+
+
+### Experiments
+
+- Add `isVisible` option to fields within DataForm. ([65826](https://github.com/WordPress/gutenberg/pull/65826))
+- DataViews: Implement `isItemClickable` and `onClickItem` props. ([66365](https://github.com/WordPress/gutenberg/pull/66365))
+
+#### DataViews
+- Quick Edit - Slug Field: Improve slug preview. ([66559](https://github.com/WordPress/gutenberg/pull/66559))
+- QuickEdit: Add password field data to the pages quick edit. ([66567](https://github.com/WordPress/gutenberg/pull/66567))
+
+
+### Documentation
+
+- Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- Add missing properties for DataViews/DataForm components. ([66749](https://github.com/WordPress/gutenberg/pull/66749))
+- Add section about the Fields API. ([66761](https://github.com/WordPress/gutenberg/pull/66761))
+- Block Bindings: Documentation API reference. ([66251](https://github.com/WordPress/gutenberg/pull/66251))
+- Docs: Include a note about supported licenses in WordPress packages. ([66562](https://github.com/WordPress/gutenberg/pull/66562))
+- Document `filterSortAndPaginate` & `isItemValid` utilities. ([66738](https://github.com/WordPress/gutenberg/pull/66738))
+- Feat: Storybook: Improve component organisation - Navigation Category - Issue #66275. ([66658](https://github.com/WordPress/gutenberg/pull/66658))
+- Feat: Storybook: Improve component organisation - Overlays Category - Issue #66275. ([66657](https://github.com/WordPress/gutenberg/pull/66657))
+- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66660](https://github.com/WordPress/gutenberg/pull/66660))
+- Feat: Storybook: Improve component organisation - Typography - Issue #66275. ([66633](https://github.com/WordPress/gutenberg/pull/66633))
+- Improve readability of DataViews documentation. ([66766](https://github.com/WordPress/gutenberg/pull/66766))
+- Move documentation for filter operators to proper place. ([66743](https://github.com/WordPress/gutenberg/pull/66743))
+- Reorganize to bootstrap DataForm API section. ([66729](https://github.com/WordPress/gutenberg/pull/66729))
+- Storybook: Improve component organisation - Actions. ([66680](https://github.com/WordPress/gutenberg/pull/66680))
+- Storybook: Log `warning()` when in dev mode. ([66568](https://github.com/WordPress/gutenberg/pull/66568))
+- Update Commands documentation with the existing contexts. ([66860](https://github.com/WordPress/gutenberg/pull/66860))
+
+
+### Code Quality
+
+- BlockPatternsList: Use the Async component. ([66744](https://github.com/WordPress/gutenberg/pull/66744))
+- Core Commands: Fix add new post URL assignment. ([66830](https://github.com/WordPress/gutenberg/pull/66830))
+- Inline Commenting: Optimize store selector and misc changes. ([66592](https://github.com/WordPress/gutenberg/pull/66592))
+- Remove unnecessary boolean assignments. ([66857](https://github.com/WordPress/gutenberg/pull/66857))
+- TypeScript: Fix and improve types for private-apis. ([66667](https://github.com/WordPress/gutenberg/pull/66667))
+
+#### Block Editor
+- Fix 'useSelect' dependencies for the 'RichText' component. ([66964](https://github.com/WordPress/gutenberg/pull/66964))
+- Fix ESLint warning for 'useBlockTypesState' hook. ([66757](https://github.com/WordPress/gutenberg/pull/66757))
+- Fix React Compiler error for 'BlockProps' util component. ([66809](https://github.com/WordPress/gutenberg/pull/66809))
+- Optimize `getVisibleElementBounds` in scrollable cases. ([66546](https://github.com/WordPress/gutenberg/pull/66546))
+- Revert: Fix unable to remove empty blocks on merge (#65262) + alternative. ([66564](https://github.com/WordPress/gutenberg/pull/66564))
+- URLInput: Fix incorrect classname for suggestions. ([66714](https://github.com/WordPress/gutenberg/pull/66714))
+
+#### Site Editor
+- Avoid using edited entity state in site editor loading hook. ([66924](https://github.com/WordPress/gutenberg/pull/66924))
+- Avoid using edited post selectors in welcome guide. ([66926](https://github.com/WordPress/gutenberg/pull/66926))
+- Edit Site: Refactor to remove usage of edited entity state. ([66922](https://github.com/WordPress/gutenberg/pull/66922))
+- Edit Site: Remove leftover 'priority-queue' dependency. ([66773](https://github.com/WordPress/gutenberg/pull/66773))
+- Remove useEditedEntityRecord hook. ([66955](https://github.com/WordPress/gutenberg/pull/66955))
+
+#### Components
+- Fix React Compiler error for 'useScrollRectIntoView'. ([66498](https://github.com/WordPress/gutenberg/pull/66498))
+- Panel: Add 40px size prop to Button. ([66589](https://github.com/WordPress/gutenberg/pull/66589))
+- Radio: Deprecate 36px default size. ([66572](https://github.com/WordPress/gutenberg/pull/66572))
+- Snackbar: Use `link` variant for action Button. ([66560](https://github.com/WordPress/gutenberg/pull/66560))
+
+#### Data Layer
+- Convert the emitter module in data package to TS. ([66669](https://github.com/WordPress/gutenberg/pull/66669))
+- Data: Rename useSelect internals to fix React Compiler violations. ([66807](https://github.com/WordPress/gutenberg/pull/66807))
+- Data: Upgrade Redux to v5.0.1. ([66966](https://github.com/WordPress/gutenberg/pull/66966))
+
+#### Post Editor
+- ESLint: Fix React Compiler violations in various commands. ([66787](https://github.com/WordPress/gutenberg/pull/66787))
+- Fix TS types for editor package. ([66754](https://github.com/WordPress/gutenberg/pull/66754))
+
+#### Zoom Out
+- Zoom-out: Move default background to the iframe component. ([66284](https://github.com/WordPress/gutenberg/pull/66284))
+
+#### Design Tools
+- Typography: Stabilize typography block supports within block processing. ([63401](https://github.com/WordPress/gutenberg/pull/63401))
+
+
+### Tools
+
+#### Testing
+- Media: Check for `wav` mime type using isset. ([66947](https://github.com/WordPress/gutenberg/pull/66947))
+
+#### Build Tooling
+- Enforce the same order of fields in `package.json` files. ([66239](https://github.com/WordPress/gutenberg/pull/66239))
+- Introduce React Scanner for component usage stats. ([65463](https://github.com/WordPress/gutenberg/pull/65463))
+
+
+### Various
+
+- Style engine: Wrap array_merge in conditionals to prevent unnecessary merging. ([66661](https://github.com/WordPress/gutenberg/pull/66661))
+
+#### Block Library
+- Update placeholder text for blocks that support drag and drop. ([66842](https://github.com/WordPress/gutenberg/pull/66842))
+- update: Add Media to Add media in cover block. ([66835](https://github.com/WordPress/gutenberg/pull/66835))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @benharri: Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+- @benniledl: Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- @Infinite-Null: Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- @karthick-murugan: Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+- @rinkalpagdar: Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- @yogeshbhutkar: Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @Aljullu @amitraj2203 @andrewserong @benharri @benniledl @carolinan @cbravobernal @DAreRodz @dcalhoun @ellatrix @fabiankaegy @gigitux @gziolo @hbhalodia @Infinite-Null @jasmussen @jorgefilipecosta @jsnajdr @juanfra @karthick-murugan @kevin940726 @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mikachan @mirka @n2erjo00 @ntsekouras @oandregal @ramonjd @renatho @rinkalpagdar @Soean @stokesman @swissspidy @t-hamano @tellthemachines @tyxla @up1512001 @Vrishabhsk @yogeshbhutkar @youknowriad
+
+
+
+
+= 19.6.4 =
+
+- PostTaxonomiesFlatTermSelector: abstract wrapper component (#66625)
+
+
+= 19.6.3 =
+
+- Revert "Set image width to fit-content to solve aspect ratio problems in Firefox. ([#66217](https://github.com/WordPress/gutenberg/pull/66804))
+
+
+= 19.7.0-rc.2 =
+
+
+- Comments controller: fix issue where comments are allowed when closed (https://github.com/WordPress/gutenberg/pull/66976)
+
+
+= 19.6.2 =
+
+- Comments controller: fix issue where comments are allowed when closed [#66976](https://github.com/WordPress/gutenberg/pull/66976)
+
+
+= 19.7.0-rc.1 =
+
+
+## Changelog
+
+### Enhancements
+
+- Add "show template" to preview dropdown. ([66514](https://github.com/WordPress/gutenberg/pull/66514))
+- Iframe: Always enable for block themes, in core too. ([66800](https://github.com/WordPress/gutenberg/pull/66800))
+- Media Utils: Add experimental `sideloadMedia`. ([66378](https://github.com/WordPress/gutenberg/pull/66378))
+- Post fields: Clean up. ([66941](https://github.com/WordPress/gutenberg/pull/66941))
+- Post fields: Extract `title` from `edit-site` to `fields` package. ([66940](https://github.com/WordPress/gutenberg/pull/66940))
+- Post fields: Move `comment_status` from edit-site to fields package. ([66934](https://github.com/WordPress/gutenberg/pull/66934))
+- Post fields: Move `date` fields from `edit-site` to `fields` package. ([66938](https://github.com/WordPress/gutenberg/pull/66938))
+- Post fields: Move `status` from `edit-site` to `fields`. ([66937](https://github.com/WordPress/gutenberg/pull/66937))
+- Relocate “View” external link to end of editor header controls. ([66785](https://github.com/WordPress/gutenberg/pull/66785))
+
+#### Block Library
+- Added toggle control to set any image as feature image if no feature image is set for post. ([65896](https://github.com/WordPress/gutenberg/pull/65896))
+- Improve cover z-index solution. ([66249](https://github.com/WordPress/gutenberg/pull/66249))
+- Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- Query Loop: Use templateSlug and postType for more context. ([65820](https://github.com/WordPress/gutenberg/pull/65820))
+- Update text case of "Starter Content". ([66954](https://github.com/WordPress/gutenberg/pull/66954))
+- [Details Block]: Adds anchor support in details block. ([66734](https://github.com/WordPress/gutenberg/pull/66734))
+
+#### Components
+- Guide: Use small size button for page controls. ([66607](https://github.com/WordPress/gutenberg/pull/66607))
+- MenuItem: Add 40px size prop on Button. ([66596](https://github.com/WordPress/gutenberg/pull/66596))
+- Notice: Add appropriate size props to Buttons. ([66593](https://github.com/WordPress/gutenberg/pull/66593))
+- PaletteEdit: Add appropriate size props to Buttons. ([66590](https://github.com/WordPress/gutenberg/pull/66590))
+- Popover: Add small size prop to close button. ([66587](https://github.com/WordPress/gutenberg/pull/66587))
+
+#### Global Styles
+- Global styles revisions: Move focus and active state to list item. ([66780](https://github.com/WordPress/gutenberg/pull/66780))
+- Site editor: Integrate global styles controls and style book preview into the styles panel. ([65619](https://github.com/WordPress/gutenberg/pull/65619))
+
+#### DataViews
+- DataViews Fields API: Default getValueFromId supports nested objects. ([66890](https://github.com/WordPress/gutenberg/pull/66890))
+
+#### Block Editor
+- Inserter: Add 'Starter Content' category to the inserter. ([66819](https://github.com/WordPress/gutenberg/pull/66819))
+
+#### Zoom Out
+- Enable zoom out mode for non-iframe editor. ([66789](https://github.com/WordPress/gutenberg/pull/66789))
+
+#### Themes
+- Theme JSON Resolver: Remove theme json merge in resolve_theme_file_uris. ([66662](https://github.com/WordPress/gutenberg/pull/66662))
+
+#### Edit Mode
+- Image block: Add support for "more" dropdown for additional tools in Write mode. ([66605](https://github.com/WordPress/gutenberg/pull/66605))
+
+#### Style Book
+- Add a landing section to stylebook tabs. ([66545](https://github.com/WordPress/gutenberg/pull/66545))
+
+#### Media
+- Media Library: Expose filters dropdown for individual images, such as with the Image block. ([65965](https://github.com/WordPress/gutenberg/pull/65965))
+
+
+### Bug Fixes
+
+- Block toolbar: Restrict visible child calculation to known blocks. ([66702](https://github.com/WordPress/gutenberg/pull/66702))
+- ComplementaryArea: Fix button position. ([66677](https://github.com/WordPress/gutenberg/pull/66677))
+- Fix Paragraph appender layout shift (building on 66061). ([66779](https://github.com/WordPress/gutenberg/pull/66779))
+- Fix: Set the `fit-content` width for images that are not `.svg`. ([66643](https://github.com/WordPress/gutenberg/pull/66643))
+- Preference modal: Avoid fetching all reusable blocks when the site editor loads. ([66621](https://github.com/WordPress/gutenberg/pull/66621))
+- Revert "Set image width to `fit-content` to solve aspect ratio problems in Firefox. (#66217)". ([66804](https://github.com/WordPress/gutenberg/pull/66804))
+- Safari: Fix site editor template error. ([66647](https://github.com/WordPress/gutenberg/pull/66647))
+- Safari: Prevent focus capturing caused by flex display. ([66402](https://github.com/WordPress/gutenberg/pull/66402))
+- Select Mode: Hide tool selector in the post editor and force design mode. ([66784](https://github.com/WordPress/gutenberg/pull/66784))
+- Shadow panel: Make the delete modal text translatable. ([66712](https://github.com/WordPress/gutenberg/pull/66712))
+- Site Editor: Fix template for page-on-front option. ([66739](https://github.com/WordPress/gutenberg/pull/66739))
+- WP Scripts: Make watch mode more resilient for developer errors. ([66752](https://github.com/WordPress/gutenberg/pull/66752))
+- getDefaultTemplateId: Ensure entity configuration is loaded. ([66650](https://github.com/WordPress/gutenberg/pull/66650))
+
+#### Block Library
+- Cover: Fix media library image selection. ([66782](https://github.com/WordPress/gutenberg/pull/66782))
+- Cover: Show DropZone only when dragging withing the block. ([66912](https://github.com/WordPress/gutenberg/pull/66912))
+- Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- Prevent duplicate post format taxonomy queries. ([66627](https://github.com/WordPress/gutenberg/pull/66627))
+- Query Loop: Check for postTypeFromContext before using it. ([66655](https://github.com/WordPress/gutenberg/pull/66655))
+- Query Loop: Remove postTypeFromContext. ([66681](https://github.com/WordPress/gutenberg/pull/66681))
+
+#### Block Editor
+- Appender: Fix initial position. ([66711](https://github.com/WordPress/gutenberg/pull/66711))
+- Appender: Fix outside canvas styles. ([66630](https://github.com/WordPress/gutenberg/pull/66630))
+- Block Inspector: Restore bottom margin for RadioControl. ([66688](https://github.com/WordPress/gutenberg/pull/66688))
+- Iframed editor: Fix relative wp-content URLs. ([66751](https://github.com/WordPress/gutenberg/pull/66751))
+
+#### Global Styles
+- Section Styles: Fix insecure properties removal for inner block types and elements. ([66896](https://github.com/WordPress/gutenberg/pull/66896))
+- Style book: Reduce margin selector specificity so that it doesn't override global block styles. ([66895](https://github.com/WordPress/gutenberg/pull/66895))
+- Theme JSON: Replace top-level background style objects on merge. ([66656](https://github.com/WordPress/gutenberg/pull/66656))
+
+#### Components
+- FormTokenField: Fix token styles. ([66640](https://github.com/WordPress/gutenberg/pull/66640))
+- Storybook: Fix DataViews action modals. ([66727](https://github.com/WordPress/gutenberg/pull/66727))
+- ToggleGroupControl: Fix active background for `zero` value. ([66855](https://github.com/WordPress/gutenberg/pull/66855))
+
+#### Post Editor
+- Disable device preview button in pattern/template part/navitation editor. ([65970](https://github.com/WordPress/gutenberg/pull/65970))
+- PostTaxonomiesFlatTermSelector: Abstract wrapper component. ([66625](https://github.com/WordPress/gutenberg/pull/66625))
+- VisualEditor: Always output has-global-padding classname when in post only mode. ([66626](https://github.com/WordPress/gutenberg/pull/66626))
+
+#### DataViews
+- Fix TypeError when duplicating uncategorized theme patterns. ([66889](https://github.com/WordPress/gutenberg/pull/66889))
+- Tweak primary field in patterns grid layout. ([66733](https://github.com/WordPress/gutenberg/pull/66733))
+
+#### Meta Boxes
+- Fix: Show Meta Boxes at the bottom of the screen regardless of the current rendering mode. ([66508](https://github.com/WordPress/gutenberg/pull/66508))
+- Hide metaboxes in Zoom Out. ([66886](https://github.com/WordPress/gutenberg/pull/66886))
+
+#### Site Editor
+- DataViews: Fix 'aria-label' for pattern preview element. ([66601](https://github.com/WordPress/gutenberg/pull/66601))
+- Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+#### Media
+- Add `x-wav` mime type for wav files in Firefox. ([66850](https://github.com/WordPress/gutenberg/pull/66850))
+- Ensure HEIC files selectable from “Upload” button. ([66292](https://github.com/WordPress/gutenberg/pull/66292))
+
+#### Patterns
+- Fix uncategorized pattern browsing when pattern has no categories. ([66945](https://github.com/WordPress/gutenberg/pull/66945))
+
+#### Interactivity API
+- Fix property modification from inherited context two or more levels above. ([66872](https://github.com/WordPress/gutenberg/pull/66872))
+
+#### Block API
+- Process Block Type: Copy deprecation to a new object instead of mutating when stabilizing supports. ([66849](https://github.com/WordPress/gutenberg/pull/66849))
+
+#### Design Tools
+- Block Gap: Fix block spacing control for axial gap supported blocks. ([66783](https://github.com/WordPress/gutenberg/pull/66783))
+
+#### Document Settings
+- Editor: Restore the 'PluginPostStatusInfo' slot position. ([66665](https://github.com/WordPress/gutenberg/pull/66665))
+
+#### Templates API
+- Fix flash when clicking template name in the editor when a plugin registered template matches a default WP theme template. ([66359](https://github.com/WordPress/gutenberg/pull/66359))
+
+#### Block bindings
+- Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+
+
+### Accessibility
+
+- Fix : Snackbar Notice Inconsistency. ([66405](https://github.com/WordPress/gutenberg/pull/66405))
+- Image: Add `aria-haspopup` prop write mode `more` tools menu items. ([66815](https://github.com/WordPress/gutenberg/pull/66815))
+- Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+
+#### Components
+- Popover: Fix missing label of the headerTitle Close button. ([66813](https://github.com/WordPress/gutenberg/pull/66813))
+
+#### Post Editor
+- Fix inconsistent sidebars close buttons sizes. ([66756](https://github.com/WordPress/gutenberg/pull/66756))
+
+#### Block Library
+- Remove unnecessary tooltip from Video block Text tracks button. ([66716](https://github.com/WordPress/gutenberg/pull/66716))
+
+#### Block Editor
+- Speak 'Block moved up/down' after using keyboard actions to move up/down. ([64966](https://github.com/WordPress/gutenberg/pull/64966))
+
+#### Patterns
+- Block Patterns List: Fix visual title and tooltip inconsistencies. ([64815](https://github.com/WordPress/gutenberg/pull/64815))
+
+
+### Performance
+
+- Inline Commenting: Avoid querying comments on editor load. ([66670](https://github.com/WordPress/gutenberg/pull/66670))
+- Patterns: Receive intermediate responses while unbound request is resolving. ([66713](https://github.com/WordPress/gutenberg/pull/66713))
+- Perf metrics: Update select and other metrics to use non-empty paragraphs. ([66762](https://github.com/WordPress/gutenberg/pull/66762))
+- Site Editor: Preload settings requests. ([66488](https://github.com/WordPress/gutenberg/pull/66488))
+- Site Editor: Speed up load by preloading home and front-page templates. ([66579](https://github.com/WordPress/gutenberg/pull/66579))
+- Site editor: Preload post if needed. ([66631](https://github.com/WordPress/gutenberg/pull/66631))
+
+#### Global Styles
+- Preload user global styles based on user caps. ([66541](https://github.com/WordPress/gutenberg/pull/66541))
+
+
+### Experiments
+
+- Add `isVisible` option to fields within DataForm. ([65826](https://github.com/WordPress/gutenberg/pull/65826))
+- DataViews: Implement `isItemClickable` and `onClickItem` props. ([66365](https://github.com/WordPress/gutenberg/pull/66365))
+
+#### DataViews
+- Quick Edit - Slug Field: Improve slug preview. ([66559](https://github.com/WordPress/gutenberg/pull/66559))
+- QuickEdit: Add password field data to the pages quick edit. ([66567](https://github.com/WordPress/gutenberg/pull/66567))
+
+
+### Documentation
+
+- Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- Add missing properties for DataViews/DataForm components. ([66749](https://github.com/WordPress/gutenberg/pull/66749))
+- Add section about the Fields API. ([66761](https://github.com/WordPress/gutenberg/pull/66761))
+- Block Bindings: Documentation API reference. ([66251](https://github.com/WordPress/gutenberg/pull/66251))
+- Docs: Include a note about supported licenses in WordPress packages. ([66562](https://github.com/WordPress/gutenberg/pull/66562))
+- Document `filterSortAndPaginate` & `isItemValid` utilities. ([66738](https://github.com/WordPress/gutenberg/pull/66738))
+- Feat: Storybook: Improve component organisation - Navigation Category - Issue #66275. ([66658](https://github.com/WordPress/gutenberg/pull/66658))
+- Feat: Storybook: Improve component organisation - Overlays Category - Issue #66275. ([66657](https://github.com/WordPress/gutenberg/pull/66657))
+- Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275. ([66660](https://github.com/WordPress/gutenberg/pull/66660))
+- Feat: Storybook: Improve component organisation - Typography - Issue #66275. ([66633](https://github.com/WordPress/gutenberg/pull/66633))
+- Improve readability of DataViews documentation. ([66766](https://github.com/WordPress/gutenberg/pull/66766))
+- Move documentation for filter operators to proper place. ([66743](https://github.com/WordPress/gutenberg/pull/66743))
+- Reorganize to bootstrap DataForm API section. ([66729](https://github.com/WordPress/gutenberg/pull/66729))
+- Storybook: Improve component organisation - Actions. ([66680](https://github.com/WordPress/gutenberg/pull/66680))
+- Storybook: Log `warning()` when in dev mode. ([66568](https://github.com/WordPress/gutenberg/pull/66568))
+- Update Commands documentation with the existing contexts. ([66860](https://github.com/WordPress/gutenberg/pull/66860))
+
+
+### Code Quality
+
+- BlockPatternsList: Use the Async component. ([66744](https://github.com/WordPress/gutenberg/pull/66744))
+- Core Commands: Fix add new post URL assignment. ([66830](https://github.com/WordPress/gutenberg/pull/66830))
+- Inline Commenting: Optimize store selector and misc changes. ([66592](https://github.com/WordPress/gutenberg/pull/66592))
+- Remove unnecessary boolean assignments. ([66857](https://github.com/WordPress/gutenberg/pull/66857))
+- TypeScript: Fix and improve types for private-apis. ([66667](https://github.com/WordPress/gutenberg/pull/66667))
+
+#### Block Editor
+- Fix 'useSelect' dependencies for the 'RichText' component. ([66964](https://github.com/WordPress/gutenberg/pull/66964))
+- Fix ESLint warning for 'useBlockTypesState' hook. ([66757](https://github.com/WordPress/gutenberg/pull/66757))
+- Fix React Compiler error for 'BlockProps' util component. ([66809](https://github.com/WordPress/gutenberg/pull/66809))
+- Optimize `getVisibleElementBounds` in scrollable cases. ([66546](https://github.com/WordPress/gutenberg/pull/66546))
+- Revert: Fix unable to remove empty blocks on merge (#65262) + alternative. ([66564](https://github.com/WordPress/gutenberg/pull/66564))
+- URLInput: Fix incorrect classname for suggestions. ([66714](https://github.com/WordPress/gutenberg/pull/66714))
+
+#### Site Editor
+- Avoid using edited entity state in site editor loading hook. ([66924](https://github.com/WordPress/gutenberg/pull/66924))
+- Avoid using edited post selectors in welcome guide. ([66926](https://github.com/WordPress/gutenberg/pull/66926))
+- Edit Site: Refactor to remove usage of edited entity state. ([66922](https://github.com/WordPress/gutenberg/pull/66922))
+- Edit Site: Remove leftover 'priority-queue' dependency. ([66773](https://github.com/WordPress/gutenberg/pull/66773))
+- Remove useEditedEntityRecord hook. ([66955](https://github.com/WordPress/gutenberg/pull/66955))
+
+#### Components
+- Fix React Compiler error for 'useScrollRectIntoView'. ([66498](https://github.com/WordPress/gutenberg/pull/66498))
+- Panel: Add 40px size prop to Button. ([66589](https://github.com/WordPress/gutenberg/pull/66589))
+- Radio: Deprecate 36px default size. ([66572](https://github.com/WordPress/gutenberg/pull/66572))
+- Snackbar: Use `link` variant for action Button. ([66560](https://github.com/WordPress/gutenberg/pull/66560))
+
+#### Data Layer
+- Convert the emitter module in data package to TS. ([66669](https://github.com/WordPress/gutenberg/pull/66669))
+- Data: Rename useSelect internals to fix React Compiler violations. ([66807](https://github.com/WordPress/gutenberg/pull/66807))
+- Data: Upgrade Redux to v5.0.1. ([66966](https://github.com/WordPress/gutenberg/pull/66966))
+
+#### Post Editor
+- ESLint: Fix React Compiler violations in various commands. ([66787](https://github.com/WordPress/gutenberg/pull/66787))
+- Fix TS types for editor package. ([66754](https://github.com/WordPress/gutenberg/pull/66754))
+
+#### Zoom Out
+- Zoom-out: Move default background to the iframe component. ([66284](https://github.com/WordPress/gutenberg/pull/66284))
+
+#### Design Tools
+- Typography: Stabilize typography block supports within block processing. ([63401](https://github.com/WordPress/gutenberg/pull/63401))
+
+
+### Tools
+
+#### Testing
+- Media: Check for `wav` mime type using isset. ([66947](https://github.com/WordPress/gutenberg/pull/66947))
+
+#### Build Tooling
+- Enforce the same order of fields in `package.json` files. ([66239](https://github.com/WordPress/gutenberg/pull/66239))
+- Introduce React Scanner for component usage stats. ([65463](https://github.com/WordPress/gutenberg/pull/65463))
+
+
+### Various
+
+- Style engine: Wrap array_merge in conditionals to prevent unnecessary merging. ([66661](https://github.com/WordPress/gutenberg/pull/66661))
+
+#### Block Library
+- Update placeholder text for blocks that support drag and drop. ([66842](https://github.com/WordPress/gutenberg/pull/66842))
+- update: Add Media to Add media in cover block. ([66835](https://github.com/WordPress/gutenberg/pull/66835))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @benharri: Fix unset array key warning in block-bindings.php. ([66337](https://github.com/WordPress/gutenberg/pull/66337))
+- @benniledl: Add 6.6.2 to Version in WordPress. ([66870](https://github.com/WordPress/gutenberg/pull/66870))
+- @Infinite-Null: Media & Text: Set `.wp-block-media-text__media a` display to block. ([66915](https://github.com/WordPress/gutenberg/pull/66915))
+- @karthick-murugan: Site Icon Focus fix. ([66952](https://github.com/WordPress/gutenberg/pull/66952))
+- @rinkalpagdar: Post Content: Add border and spacing support. ([66366](https://github.com/WordPress/gutenberg/pull/66366))
+- @yogeshbhutkar: Site Hub: Fixed navigation redirect on mobile devices for classic themes. ([66867](https://github.com/WordPress/gutenberg/pull/66867))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @Aljullu @amitraj2203 @andrewserong @benharri @benniledl @carolinan @cbravobernal @DAreRodz @dcalhoun @ellatrix @fabiankaegy @gigitux @gziolo @hbhalodia @Infinite-Null @jasmussen @jorgefilipecosta @jsnajdr @juanfra @karthick-murugan @kevin940726 @louwie17 @Mamaduka @manzoorwanijk @matiasbenedetto @mikachan @mirka @n2erjo00 @ntsekouras @oandregal @ramonjd @renatho @rinkalpagdar @Soean @stokesman @swissspidy @t-hamano @tellthemachines @tyxla @up1512001 @Vrishabhsk @yogeshbhutkar @youknowriad
+
+
+= 19.6.1 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### List View
+- Block Editor: Fix stale dependencies of selectors depending on editorTool preference. ([66833](https://github.com/WordPress/gutenberg/pull/66833))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@mcsf
+
+
+= 19.6.0 =
+
+
+## Changelog
+
+### Enhancements
+
+#### Components
+- Add elevation tokens to storybook. ([66122](https://github.com/WordPress/gutenberg/pull/66122))
+- Add foundations:Elevation to storybook. ([66124](https://github.com/WordPress/gutenberg/pull/66124))
+- Add radius foundation and tokens to storybook. ([66219](https://github.com/WordPress/gutenberg/pull/66219))
+- Combobox, FormTokenField: Show message when no matches found. ([66142](https://github.com/WordPress/gutenberg/pull/66142))
+- Storybook: Organizes components under 'Utilities'. ([66210](https://github.com/WordPress/gutenberg/pull/66210))
+- Tabs: Expose active tab item props, use ariakit prop types. ([66223](https://github.com/WordPress/gutenberg/pull/66223))
+- Tabs: Remove custom logic. ([66097](https://github.com/WordPress/gutenberg/pull/66097))
+- `DropdownMenuV2`: Rename to `Menu`. ([66289](https://github.com/WordPress/gutenberg/pull/66289))
+
+#### Block Library
+- Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- Add lightbox option in gallery block link control. ([64014](https://github.com/WordPress/gutenberg/pull/64014))
+- Archives: Add border block support. ([63400](https://github.com/WordPress/gutenberg/pull/63400))
+- Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- Cover Block: Add Image Resolution options. ([62926](https://github.com/WordPress/gutenberg/pull/62926))
+- HTML Block: Force HTML preview in view mode. ([66440](https://github.com/WordPress/gutenberg/pull/66440))
+
+#### Zoom Out
+- Add keyboard shortcut in editor. ([66400](https://github.com/WordPress/gutenberg/pull/66400))
+- Iterate zoom out shuffle into a more visual control. ([66194](https://github.com/WordPress/gutenberg/pull/66194))
+- Use the zoom-level value to scale the iframe. ([66280](https://github.com/WordPress/gutenberg/pull/66280))
+
+#### Site Editor
+- Remove synchronization of canvas mode into store. ([66213](https://github.com/WordPress/gutenberg/pull/66213))
+- Style Book: Clean up layout. ([66255](https://github.com/WordPress/gutenberg/pull/66255))
+- Update site icon and title position. ([66171](https://github.com/WordPress/gutenberg/pull/66171))
+- Editor Interface: Remove  small header from global styles/plugin sidebar. ([64474](https://github.com/WordPress/gutenberg/pull/64474))
+- Remove purple coloring from DocumentBar and PostCard. ([66451](https://github.com/WordPress/gutenberg/pull/66451))
+- Core Data: Add the 'getEntitiesConfig' resolver. ([65871](https://github.com/WordPress/gutenberg/pull/65871))
+- BlockGroupToolbar: Better i18n context for toolbar labels. ([66211](https://github.com/WordPress/gutenberg/pull/66211))
+- Set `ResizableEditor` height based on border-box. ([66342](https://github.com/WordPress/gutenberg/pull/66342))
+- Add align-item related icons. ([66242](https://github.com/WordPress/gutenberg/pull/66242))
+- Stabilize isPreviewMode flag. ([66149](https://github.com/WordPress/gutenberg/pull/66149))
+
+#### Data Views
+- Fix alignment of action items in list layout. ([66273](https://github.com/WordPress/gutenberg/pull/66273))
+- Templates: Hide media field in list view. ([66573](https://github.com/WordPress/gutenberg/pull/66573))
+
+#### Global Styles
+- Backport: Caching of global styles for blocks from core. ([66349](https://github.com/WordPress/gutenberg/pull/66349))
+- Style Book: Add color tab. ([65692](https://github.com/WordPress/gutenberg/pull/65692))
+
+#### Real-time Collaboration
+- Inline Commenting: Disable comments on published posts for now. ([66583](https://github.com/WordPress/gutenberg/pull/66583))
+
+
+#### REST API
+- Backport from WordPress core: Improvements for the post format query loop filter. ([66037](https://github.com/WordPress/gutenberg/pull/66037))
+
+#### Build Tooling
+- Create Block: Adds `--target-dir` flag to allow the tool to target where to scaffold. ([53781](https://github.com/WordPress/gutenberg/pull/53781))
+- Scripts: Add build-blocks-manifest command. ([65866](https://github.com/WordPress/gutenberg/pull/65866))
+- Scripts: Add BlueOak-1.0.0 license to GPL2 compatible. ([66139](https://github.com/WordPress/gutenberg/pull/66139))
+- WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+
+### Bug Fixes
+
+#### Zoom Out
+- Disable zoom out toggle button when Style Book is open. ([66228](https://github.com/WordPress/gutenberg/pull/66228))
+- Don't switch editor mode when changing entities. ([66452](https://github.com/WordPress/gutenberg/pull/66452))
+- Fix scaling animation for device previews. ([66132](https://github.com/WordPress/gutenberg/pull/66132))
+- Fix zoom out not persisting while switching between editor and code editor. ([65932](https://github.com/WordPress/gutenberg/pull/65932))
+- Fix zoom out shortcut on Windows. ([66506](https://github.com/WordPress/gutenberg/pull/66506))
+- Fix: Activate zoom out on large viewport. ([66308](https://github.com/WordPress/gutenberg/pull/66308))
+- Hide slots and grouping buttons. ([66243](https://github.com/WordPress/gutenberg/pull/66243))
+- Remove zoom-out toolbar. ([66039](https://github.com/WordPress/gutenberg/pull/66039))
+- Resets the Zoom on viewed/edited entity change. ([66232](https://github.com/WordPress/gutenberg/pull/66232))
+- Revise zoom layout shift fix. ([66390](https://github.com/WordPress/gutenberg/pull/66390))
+- Zoom Out: Rely on zoom-level instead of zoom-out mode. ([66141](https://github.com/WordPress/gutenberg/pull/66141))
+- Zoom Out: Fix bouncy drop zones. ([66399](https://github.com/WordPress/gutenberg/pull/66399))
+
+#### Block Editor
+- Block inserter: Prevent editor from crashing if `blockType.parent` is a string. ([66234](https://github.com/WordPress/gutenberg/pull/66234))
+- Block toolbar: Account for scrollable blocks that affect the position of the block toolbar. ([66188](https://github.com/WordPress/gutenberg/pull/66188))
+- Fix extra scrollbar appearing when searching in the inserter. ([66229](https://github.com/WordPress/gutenberg/pull/66229))
+- Fix: Show paragraph block variations in rich text inserter. ([66318](https://github.com/WordPress/gutenberg/pull/66318))
+- Group: Fix padding select. ([65857](https://github.com/WordPress/gutenberg/pull/65857))
+- Link Shortcut: Only trigger the link shortcut if there's a text selection. ([66056](https://github.com/WordPress/gutenberg/pull/66056))
+- Remove relative position from sidebar tabpanel. ([66267](https://github.com/WordPress/gutenberg/pull/66267))
+- Rich text: Remove empty file. ([66553](https://github.com/WordPress/gutenberg/pull/66553))
+
+- Block editor: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+- Post Editor: Set the default value of the editorTool to edit. ([66636](https://github.com/WordPress/gutenberg/pull/66636))
+
+#### Components
+- ColorPalette: Prevent overflow of custom color button background. ([66152](https://github.com/WordPress/gutenberg/pull/66152))
+- Fix: Text overflow in Patterns filter. ([66504](https://github.com/WordPress/gutenberg/pull/66504))
+- RadioGroup: Fix arrow key navigation in RTL. ([66202](https://github.com/WordPress/gutenberg/pull/66202))
+- Tabs and TabPanel: Fix arrow key navigation in RTL. ([66201](https://github.com/WordPress/gutenberg/pull/66201))
+- Tabs and ToggleGroupControl: Round indicator size. ([66426](https://github.com/WordPress/gutenberg/pull/66426))
+- Tabs: Fix animation timings. ([66198](https://github.com/WordPress/gutenberg/pull/66198))
+- Tabs: Override tablist's tabindex only when necessary. ([66209](https://github.com/WordPress/gutenberg/pull/66209))
+- Tabs: Restore vertical alignment for tabs content. ([66215](https://github.com/WordPress/gutenberg/pull/66215))
+- Tabs: Update indicator more reactively. ([66207](https://github.com/WordPress/gutenberg/pull/66207))
+- SpacingSizesControl: Use generic label for linked button. ([66304](https://github.com/WordPress/gutenberg/pull/66304))
+
+#### i18n
+- Miscellaneous i18n fixes. ([66510](https://github.com/WordPress/gutenberg/pull/66510))
+- Remove most of the occurrences of the verb toggle. ([66371](https://github.com/WordPress/gutenberg/pull/66371))
+
+#### Post Editor
+- Always force iframe in pattern editor. ([65887](https://github.com/WordPress/gutenberg/pull/65887))
+- Editor: Multi-entity saving: Show correct count of entities to be saved. ([66482](https://github.com/WordPress/gutenberg/pull/66482))
+- Fix : "Set featured image" button border flashes on focus. ([66092](https://github.com/WordPress/gutenberg/pull/66092))
+- Fix Parent Check Condition in `buildTermsTree`. ([66006](https://github.com/WordPress/gutenberg/pull/66006))
+- Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. ([66355](https://github.com/WordPress/gutenberg/pull/66355))
+- PostTaxonomiesFlatTermSelector: Restore space between tag list and most used tags. ([66566](https://github.com/WordPress/gutenberg/pull/66566))
+- Typo metabox pane is a meta box panel. ([66502](https://github.com/WordPress/gutenberg/pull/66502))
+
+#### Block Library
+- Block registration: Normalize blockType.parent to `array`. ([66250](https://github.com/WordPress/gutenberg/pull/66250))
+- Button Block: Apply Stretch Styles Correctly. ([64770](https://github.com/WordPress/gutenberg/pull/64770))
+- Buttons: Fix the initial white space in nofollow rel. ([66303](https://github.com/WordPress/gutenberg/pull/66303))
+- Fix - Image block: Aspect ratio not responding when dimensions are not set. ([66217](https://github.com/WordPress/gutenberg/pull/66217))
+- Navigation block: Fix block appender size. ([66153](https://github.com/WordPress/gutenberg/pull/66153))
+- Fix the navigation issue inside cover blocks. ([66093](https://github.com/WordPress/gutenberg/pull/66093))
+
+#### Site Editor
+- Edit Site: Fix canvasMode var. ([66316](https://github.com/WordPress/gutenberg/pull/66316))
+- Fix button hover style in sidebar navigation screen. ([66505](https://github.com/WordPress/gutenberg/pull/66505))
+- Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- Revert 66431 (Site editor: Remove "default" admin CSS). ([66540](https://github.com/WordPress/gutenberg/pull/66540))
+- Restore block-library editor.css outside canvas. ([66556](https://github.com/WordPress/gutenberg/pull/66556))
+- Fix extraneous scrollbar in device previews. ([66494](https://github.com/WordPress/gutenberg/pull/66494))
+- Global styles: Move preload paths filter to 6.7 (previously 6.8). ([66543](https://github.com/WordPress/gutenberg/pull/66543))
+- Fix comment output in styles. ([66439](https://github.com/WordPress/gutenberg/pull/66439))
+- Site editor: Fix save shortcut. ([66423](https://github.com/WordPress/gutenberg/pull/66423))
+- Preload: Fix multiple regressions around global styles. ([66468](https://github.com/WordPress/gutenberg/pull/66468)) 
+
+#### Build tooling
+- Create block: Ensure $slug is replaced with passed slug. ([66528](https://github.com/WordPress/gutenberg/pull/66528))
+
+### Accessibility
+
+#### Post Editor
+- Add featured image alt text. ([66189](https://github.com/WordPress/gutenberg/pull/66189))
+- Fix : Badge Color contrast. ([66360](https://github.com/WordPress/gutenberg/pull/66360))
+
+#### Block Editor
+- ImageSizeControls: Replace ButtonGroup with ToggleGroupControl. ([65386](https://github.com/WordPress/gutenberg/pull/65386))
+- Improve the link preview accessibility and labels. ([60908](https://github.com/WordPress/gutenberg/pull/60908))
+
+#### Block Library
+- Search: Replace ButtonGroup usage with ToggleGroupControl. ([65340](https://github.com/WordPress/gutenberg/pull/65340))
+- Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+
+#### Global Styles
+- Global styles menu: Avoid visible labels and accessible names mismatch. ([65124](https://github.com/WordPress/gutenberg/pull/65124))
+
+#### Site Editor
+- Fix Global styles panel header buttons text overlap for 'Show button text labels'. ([63243](https://github.com/WordPress/gutenberg/pull/63243))
+- Update the speak messages when switching editor modes. ([66278](https://github.com/WordPress/gutenberg/pull/66278))
+
+### Performance
+
+#### Site Editor
+- Remove "default" admin CSS. ([66431](https://github.com/WordPress/gutenberg/pull/66431))
+- Remove content styles outside canvas. ([66432](https://github.com/WordPress/gutenberg/pull/66432))
+- Block Style Variations: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. ([66539](https://github.com/WordPress/gutenberg/pull/66539))
+- Block Bindings: Use `getEntityConfig` instead of `getPostTypes` to get available slugs. ([66101](https://github.com/WordPress/gutenberg/pull/66101))
+
+#### Build Tooling
+- Fix/compare performance with correct branch. ([66196](https://github.com/WordPress/gutenberg/pull/66196))
+
+### Experiments
+
+- Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- QuickEdit: Add slug field control. ([65196](https://github.com/WordPress/gutenberg/pull/65196))
+
+#### Data Views
+- Quick Edit: Fix JS error when bulk editing pages. ([66358](https://github.com/WordPress/gutenberg/pull/66358))
+- QuickEdit: Add Featured Image Control. ([64496](https://github.com/WordPress/gutenberg/pull/64496))
+- QuickEdit: Add Parent field. ([66527](https://github.com/WordPress/gutenberg/pull/66527))
+
+### Documentation
+
+- BaseControl: Auto-generate readme. ([66500](https://github.com/WordPress/gutenberg/pull/66500))
+- Components: Prevent generated readmes duplicating h1 elements when published. ([66180](https://github.com/WordPress/gutenberg/pull/66180))
+- Correct documentation on display type in flow layouts. ([66224](https://github.com/WordPress/gutenberg/pull/66224))
+- Docs: Interactivity API - Add documentation for `getServerState()` and `getServerContext()`. ([66104](https://github.com/WordPress/gutenberg/pull/66104))
+- Fix undo/redo Button size in Storybook playground. ([66538](https://github.com/WordPress/gutenberg/pull/66538))
+- Fix: JSON Schema Docgen doesn't work on Windows OS. ([66414](https://github.com/WordPress/gutenberg/pull/66414))
+- ItemGroup: Improve stories to default to bordered and separated. ([66191](https://github.com/WordPress/gutenberg/pull/66191))
+- README: Add Storybook badge. ([66529](https://github.com/WordPress/gutenberg/pull/66529))
+- Remove meetings that no longer occur from Contributor Guide. ([66421](https://github.com/WordPress/gutenberg/pull/66421))
+- Site editor routes: Add documentation for areas and prevent `edit` area from rendering when canvas is `edit`. ([66309](https://github.com/WordPress/gutenberg/pull/66309))
+- Update documentation about build process changes. ([66428](https://github.com/WordPress/gutenberg/pull/66428))
+- Docs: Example for getSelectedBlock. ([66108](https://github.com/WordPress/gutenberg/pull/66108))
+
+### Code Quality
+
+#### Block Editor
+- ESLint: Remove explicit `react-hooks/exhaustive-deps` disabling. ([66461](https://github.com/WordPress/gutenberg/pull/66461))
+- ESLint: Remove various React Compiler mutation violations. ([66327](https://github.com/WordPress/gutenberg/pull/66327))
+- Fix 'useInstanceId' hook reference. ([66406](https://github.com/WordPress/gutenberg/pull/66406))
+- Fix React Compiler error for Duotone. ([66492](https://github.com/WordPress/gutenberg/pull/66492))
+- Fix React Complier error for 'useEventListeners'. ([66495](https://github.com/WordPress/gutenberg/pull/66495))
+- Import only the actually used PostCSS exports. ([66379](https://github.com/WordPress/gutenberg/pull/66379))
+- No need to unlock public actions. ([66260](https://github.com/WordPress/gutenberg/pull/66260))
+- Remove patterns UI stylesheet from iframe. ([66306](https://github.com/WordPress/gutenberg/pull/66306))
+- Remove unnecessary Tooltip component from radius control linked button. ([66274](https://github.com/WordPress/gutenberg/pull/66274))
+- Rich Text: Fix React Complier error for 'useEventListeners'. ([66460](https://github.com/WordPress/gutenberg/pull/66460))
+- Storybook: Add BlockPatternsList story. ([66227](https://github.com/WordPress/gutenberg/pull/66227))
+- Block editor: Remove reusable blocks stylesheet from iframe. ([66285](https://github.com/WordPress/gutenberg/pull/66285))
+
+
+#### Components
+- BorderBoxControl: Deprecate 36px default size. ([65752](https://github.com/WordPress/gutenberg/pull/65752))
+- BorderControl: Deprecate 36px default size. ([65755](https://github.com/WordPress/gutenberg/pull/65755))
+- DrodownMenuV2: Rename folder to `menu`. ([66473](https://github.com/WordPress/gutenberg/pull/66473))
+- ESLint: Stop disabling `react-hooks/exhaustive-deps` rule. ([66324](https://github.com/WordPress/gutenberg/pull/66324))
+- Fix React Compiler error for 'useAutocomplete'. ([66496](https://github.com/WordPress/gutenberg/pull/66496))
+- PaletteEdit: Use `ItemGroup` and `Item`, and avoid custom styles. ([66164](https://github.com/WordPress/gutenberg/pull/66164))
+- TabPanel: Add 40px size prop to tab Button. ([66557](https://github.com/WordPress/gutenberg/pull/66557))
+- Tabs: Align to standard compound components structure. ([66225](https://github.com/WordPress/gutenberg/pull/66225))
+- Tabs: Simplify styled components code. ([66208](https://github.com/WordPress/gutenberg/pull/66208))
+
+#### Compose
+- Compose: Fix React Complier error for 'useCopyToClipboard'. ([66444](https://github.com/WordPress/gutenberg/pull/66444))
+- Composer: Fix React Compiler errors for 'useDropZone'. ([66469](https://github.com/WordPress/gutenberg/pull/66469))
+
+#### Dataviews
+- Fields: Fix React Compiler mutation errors. ([66464](https://github.com/WordPress/gutenberg/pull/66464))
+- Fields: Update a few function definitions. ([66315](https://github.com/WordPress/gutenberg/pull/66315))
+#### Interface
+- Interface: Remove duplicate 'withComplementaryAreaContext' file. ([66348](https://github.com/WordPress/gutenberg/pull/66348))
+- Interface: Remove unused private API support. ([66565](https://github.com/WordPress/gutenberg/pull/66565))
+- Interface: Use plugin context hook instead of HoC. ([66362](https://github.com/WordPress/gutenberg/pull/66362))
+
+#### Zoom Out
+- Bundle behavior in block-editor and add story. ([66240](https://github.com/WordPress/gutenberg/pull/66240))
+- Editor: Handle zoom out state via the 'switchEditorMode' action. ([66262](https://github.com/WordPress/gutenberg/pull/66262))
+- Fix/html scale code quality. ([66181](https://github.com/WordPress/gutenberg/pull/66181))
+- Make useZoomOut hook private. ([66374](https://github.com/WordPress/gutenberg/pull/66374))
+- Remove double click to exit hook from the block-editor package. ([66335](https://github.com/WordPress/gutenberg/pull/66335))
+- Remove viewport check from useZoomOut hook. ([66341](https://github.com/WordPress/gutenberg/pull/66341))
+
+#### Post Editor
+- Editor: No need to reset mode when changing device preview types. ([66261](https://github.com/WordPress/gutenberg/pull/66261))
+- Editor: Use plugin context hook in 'PluginMoreMenuItem'. ([66351](https://github.com/WordPress/gutenberg/pull/66351))
+- Editor: Use plugin context hook in 'PluginPreviewMenuItem'. ([66350](https://github.com/WordPress/gutenberg/pull/66350))
+- Fix typo after #63669. ([66396](https://github.com/WordPress/gutenberg/pull/66396))
+- Remove leftover JS code from 66451. ([66472](https://github.com/WordPress/gutenberg/pull/66472))
+
+#### Block Library
+- Cleanup unnecessary notice removal. ([66409](https://github.com/WordPress/gutenberg/pull/66409))
+- ESLint: Fix a couple of React Compiler reassignment errors. ([66331](https://github.com/WordPress/gutenberg/pull/66331))
+- Footnotes: Remove extra callback when parsing content. ([66370](https://github.com/WordPress/gutenberg/pull/66370))
+- Gallery: Fix React Compiler reassignment error. ([66408](https://github.com/WordPress/gutenberg/pull/66408))
+- Table Block: Remove hasArrowIndicator prop. ([66204](https://github.com/WordPress/gutenberg/pull/66204))
+
+#### Style Book
+- Avoid state/effect combo when generating values. ([66446](https://github.com/WordPress/gutenberg/pull/66446))
+- Fix React Compiler error. ([66445](https://github.com/WordPress/gutenberg/pull/66445))
+
+#### Global Styles
+- Clean up: Adjust reusable-blocks dependencies. ([66302](https://github.com/WordPress/gutenberg/pull/66302))
+- Fix React Compiler variable mutation error. ([66410](https://github.com/WordPress/gutenberg/pull/66410))
+- Theme JSON: Get_block_nodes - relocate $selectors assignment. ([66265](https://github.com/WordPress/gutenberg/pull/66265))
+
+#### Interactivity API
+- Interactivity API: Add comments to the `deepMerge()` function. ([66220](https://github.com/WordPress/gutenberg/pull/66220))
+- Interactivity API: Add tests for handling arrays in `deepMerge()`. ([66218](https://github.com/WordPress/gutenberg/pull/66218))
+- Interactivity API: Delay block hydration to allow interactive block stores to initialize. ([66772])(https://github.com/WordPress/gutenberg/pull/66772)
+
+#### Site Editor
+- Prepare route registration by refactoring the site editor router. ([66030](https://github.com/WordPress/gutenberg/pull/66030))
+- Navigation: Improve trigger for fallback navigation. ([66478](https://github.com/WordPress/gutenberg/pull/66478))
+#### Build Tooling
+- Scripts: Refactor to extract license logic. ([66179](https://github.com/WordPress/gutenberg/pull/66179))
+- Plugins: Deprecate 'withPluginContext' HOC. ([66363](https://github.com/WordPress/gutenberg/pull/66363))
+
+### Tools
+
+#### Testing
+- Fix [Flaky Test] Entering zoomed out mode zooms the canvas. ([66212](https://github.com/WordPress/gutenberg/pull/66212))
+- Fix end-to-end test for padding appender. ([66080](https://github.com/WordPress/gutenberg/pull/66080))
+- Upgrade Playwright to v1.48. ([66296](https://github.com/WordPress/gutenberg/pull/66296))
+
+#### Build Tooling
+- Add new private `vips` package. ([64845](https://github.com/WordPress/gutenberg/pull/64845))
+- Revert "Use npm workspaces for packages". ([66270](https://github.com/WordPress/gutenberg/pull/66270))
+- Add theme type to the bug report issue template. ([63851](https://github.com/WordPress/gutenberg/pull/63851))
+- Pull request automation: Use full npm install. ([66314](https://github.com/WordPress/gutenberg/pull/66314))
+- Use npm workspaces for packages (second attempt). ([66272](https://github.com/WordPress/gutenberg/pull/66272))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AhmarZaidi: Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- @mediaformat: Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+- @nicolasgalvez: WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+- @poojabhimani12: Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- @rinkalpagdar: Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- @rudrakshi-gupta: Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- @SH4LIN: GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AhmarZaidi @akasunil @andrewserong @arthur791004 @carolinan @cbravobernal @ciampo @dhruvang21 @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jeryj @jsnajdr @juanfra @madhusudhand @MaggieCabrera @Mamaduka @mattrwalker @mcsf @mediaformat @michalczaplinski @mirka @mreishus @ndiego @nicolasgalvez @ntsekouras @oandregal @PARTHVATALIYA @peterwilsoncc @poojabhimani12 @prajapatisagar @ramonjd @renatho @rinkalpagdar @rudrakshi-gupta @ryanwelcher @SantosGuillamot @SH4LIN @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @torounit @troychaplin @tyxla @vipul0425 @Vrishabhsk @vykes-mac @westonruter @youknowriad @zaguiini
+
+
+= 19.5.1 =
+
+
+Error: There are no unreleased pull requests associated with the milestone.
+    at fetchAllPullRequests (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:721:10)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async createChangelog (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:1031:24)
+    at async getReleaseChangelog (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:1057:2)
+    at async Command.<anonymous> (/home/runner/work/gutenberg/gutenberg/bin/plugin/cli.js:11:4)
+
+
+= 19.6.0-rc.2 =
+
+## Changelog
+
+### Enhancements
+
+- BlockGroupToolbar: Better i18n context for toolbar labels. ([66211](https://github.com/WordPress/gutenberg/pull/66211))
+- Core Data: Add the 'getEntitiesConfig' resolver. ([65871](https://github.com/WordPress/gutenberg/pull/65871))
+- Create Block: Adds `--target-dir` flag to allow the tool to target where to scaffold. ([53781](https://github.com/WordPress/gutenberg/pull/53781))
+- Editor Interface: Remove  small header from global styles/plugin sidebar. ([64474](https://github.com/WordPress/gutenberg/pull/64474))
+- Remove purple coloring from DocumentBar and PostCard. ([66451](https://github.com/WordPress/gutenberg/pull/66451))
+- Scripts: Add BlueOak-1.0.0 license to GPL2 compatible. ([66139](https://github.com/WordPress/gutenberg/pull/66139))
+- WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+
+#### Components
+- Add elevation tokens to storybook. ([66122](https://github.com/WordPress/gutenberg/pull/66122))
+- Add foundations:Elevation to storybook. ([66124](https://github.com/WordPress/gutenberg/pull/66124))
+- Add radius foundation and tokens to storybook. ([66219](https://github.com/WordPress/gutenberg/pull/66219))
+- Combobox, FormTokenField: Show message when no matches found. ([66142](https://github.com/WordPress/gutenberg/pull/66142))
+- Storybook: Organizes components under 'Utilities'. ([66210](https://github.com/WordPress/gutenberg/pull/66210))
+- Tabs: Expose active tab item props, use ariakit prop types. ([66223](https://github.com/WordPress/gutenberg/pull/66223))
+- Tabs: Remove custom logic. ([66097](https://github.com/WordPress/gutenberg/pull/66097))
+- `DropdownMenuV2`: Rename to `Menu`. ([66289](https://github.com/WordPress/gutenberg/pull/66289))
+
+#### Block Library
+- Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- Add lightbox option in gallery block link control. ([64014](https://github.com/WordPress/gutenberg/pull/64014))
+- Archives: Add border block support. ([63400](https://github.com/WordPress/gutenberg/pull/63400))
+- Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- Cover Block: Add Image Resolution options. ([62926](https://github.com/WordPress/gutenberg/pull/62926))
+- HTML Block: Force HTML preview in view mode. ([66440](https://github.com/WordPress/gutenberg/pull/66440))
+
+#### Zoom Out
+- Add keyboard shortcut in editor. ([66400](https://github.com/WordPress/gutenberg/pull/66400))
+- Iterate zoom out shuffle into a more visual control. ([66194](https://github.com/WordPress/gutenberg/pull/66194))
+- Use the zoom-level value to scale the iframe. ([66280](https://github.com/WordPress/gutenberg/pull/66280))
+
+#### Site Editor
+- Remove synchronization of canvas mode into store. ([66213](https://github.com/WordPress/gutenberg/pull/66213))
+- Style Book: Clean up layout. ([66255](https://github.com/WordPress/gutenberg/pull/66255))
+- Update site icon and title position. ([66171](https://github.com/WordPress/gutenberg/pull/66171))
+
+#### Data Views
+- Fix alignment of action items in list layout. ([66273](https://github.com/WordPress/gutenberg/pull/66273))
+- Templates: Hide media field in list view. ([66573](https://github.com/WordPress/gutenberg/pull/66573))
+
+#### Global Styles
+- Backport: Caching of global styles for blocks from core. ([66349](https://github.com/WordPress/gutenberg/pull/66349))
+- Style Book: Add color tab. ([65692](https://github.com/WordPress/gutenberg/pull/65692))
+
+#### Real-time Collaboration
+- Inline Commenting: Disable comments on published posts for now. ([66583](https://github.com/WordPress/gutenberg/pull/66583))
+
+#### Post Editor
+- Set `ResizableEditor` height based on border-box. ([66342](https://github.com/WordPress/gutenberg/pull/66342))
+
+#### Icons
+- Add align-item related icons. ([66242](https://github.com/WordPress/gutenberg/pull/66242))
+
+#### REST API
+- Backport from WordPress core: Improvements for the post format query loop filter. ([66037](https://github.com/WordPress/gutenberg/pull/66037))
+
+
+### New APIs
+
+- Stabilize isPreviewMode flag. ([66149](https://github.com/WordPress/gutenberg/pull/66149))
+- scripts: Add build-blocks-manifest command. ([65866](https://github.com/WordPress/gutenberg/pull/65866))
+
+
+### Bug Fixes
+
+- Create block: Ensure $slug is replaced with passed slug. ([66528](https://github.com/WordPress/gutenberg/pull/66528))
+- Fix extraneous scrollbar in device previews. ([66494](https://github.com/WordPress/gutenberg/pull/66494))
+- GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+- Global styles: Move preload paths filter to 6.7 (previously 6.8). ([66543](https://github.com/WordPress/gutenberg/pull/66543))
+- Miscellaneous i18n fixes. ([66510](https://github.com/WordPress/gutenberg/pull/66510))
+- Remove most of the occurrences of the verb toggle. ([66371](https://github.com/WordPress/gutenberg/pull/66371))
+- SpacingSizesControl: Use generic label for linked button. ([66304](https://github.com/WordPress/gutenberg/pull/66304))
+
+#### Zoom Out
+- Disable zoom out toggle button when Style Book is open. ([66228](https://github.com/WordPress/gutenberg/pull/66228))
+- Don't switch editor mode when changing entities. ([66452](https://github.com/WordPress/gutenberg/pull/66452))
+- Fix scaling animation for device previews. ([66132](https://github.com/WordPress/gutenberg/pull/66132))
+- Fix zoom out not persisting while switching between editor and code editor. ([65932](https://github.com/WordPress/gutenberg/pull/65932))
+- Fix zoom out shortcut on Windows. ([66506](https://github.com/WordPress/gutenberg/pull/66506))
+- Fix: Activate zoom out on large viewport. ([66308](https://github.com/WordPress/gutenberg/pull/66308))
+- Hide slots and grouping buttons. ([66243](https://github.com/WordPress/gutenberg/pull/66243))
+- Remove zoom-out toolbar. ([66039](https://github.com/WordPress/gutenberg/pull/66039))
+- Resets the Zoom on viewed/edited entity change. ([66232](https://github.com/WordPress/gutenberg/pull/66232))
+- Revise zoom layout shift fix. ([66390](https://github.com/WordPress/gutenberg/pull/66390))
+- Zoom-out: Rely on zoom-level instead of zoom-out mode. ([66141](https://github.com/WordPress/gutenberg/pull/66141))
+
+#### Block Editor
+- Block inserter: Prevent editor from crashing if `blockType.parent` is a string. ([66234](https://github.com/WordPress/gutenberg/pull/66234))
+- Block toolbar: Account for scrollable blocks that affect the position of the block toolbar. ([66188](https://github.com/WordPress/gutenberg/pull/66188))
+- Fix extra scrollbar appearing when searching in the inserter. ([66229](https://github.com/WordPress/gutenberg/pull/66229))
+- Fix: Show paragraph block variations in rich text inserter. ([66318](https://github.com/WordPress/gutenberg/pull/66318))
+- Group: Fix padding select. ([65857](https://github.com/WordPress/gutenberg/pull/65857))
+- Link Shortcut: Only trigger the link shortcut if there's a text selection. ([66056](https://github.com/WordPress/gutenberg/pull/66056))
+- Remove relative position from sidebar tabpanel. ([66267](https://github.com/WordPress/gutenberg/pull/66267))
+- Rich text: Remove empty file. ([66553](https://github.com/WordPress/gutenberg/pull/66553))
+- Zoom Out: Fix bouncy drop zones. ([66399](https://github.com/WordPress/gutenberg/pull/66399))
+
+#### Components
+- ColorPalette: Prevent overflow of custom color button background. ([66152](https://github.com/WordPress/gutenberg/pull/66152))
+- Fix: Text overflow in Patterns filter. ([66504](https://github.com/WordPress/gutenberg/pull/66504))
+- RadioGroup: Fix arrow key navigation in RTL. ([66202](https://github.com/WordPress/gutenberg/pull/66202))
+- Tabs and TabPanel: Fix arrow key navigation in RTL. ([66201](https://github.com/WordPress/gutenberg/pull/66201))
+- Tabs and ToggleGroupControl: Round indicator size. ([66426](https://github.com/WordPress/gutenberg/pull/66426))
+- Tabs: Fix animation timings. ([66198](https://github.com/WordPress/gutenberg/pull/66198))
+- Tabs: Override tablist's tabindex only when necessary. ([66209](https://github.com/WordPress/gutenberg/pull/66209))
+- Tabs: Restore vertical alignment for tabs content. ([66215](https://github.com/WordPress/gutenberg/pull/66215))
+- Tabs: Update indicator more reactively. ([66207](https://github.com/WordPress/gutenberg/pull/66207))
+
+#### Post Editor
+- Always force iframe in pattern editor. ([65887](https://github.com/WordPress/gutenberg/pull/65887))
+- Editor: Multi-entity saving: Show correct count of entities to be saved. ([66482](https://github.com/WordPress/gutenberg/pull/66482))
+- Fix : "Set featured image" button border flashes on focus. ([66092](https://github.com/WordPress/gutenberg/pull/66092))
+- Fix Parent Check Condition in `buildTermsTree`. ([66006](https://github.com/WordPress/gutenberg/pull/66006))
+- Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. ([66355](https://github.com/WordPress/gutenberg/pull/66355))
+- PostTaxonomiesFlatTermSelector: Restore space between tag list and most used tags. ([66566](https://github.com/WordPress/gutenberg/pull/66566))
+
+#### Block Library
+- Block registration: Normalize blockType.parent to `array`. ([66250](https://github.com/WordPress/gutenberg/pull/66250))
+- Button Block: Apply Stretch Styles Correctly. ([64770](https://github.com/WordPress/gutenberg/pull/64770))
+- Buttons: Fix the initial white space in nofollow rel. ([66303](https://github.com/WordPress/gutenberg/pull/66303))
+- Fix - Image block: Aspect ratio not responding when dimensions are not set. ([66217](https://github.com/WordPress/gutenberg/pull/66217))
+- Navigation block: Fix block appender size. ([66153](https://github.com/WordPress/gutenberg/pull/66153))
+
+#### Site Editor
+- Edit Site: Fix canvasMode var. ([66316](https://github.com/WordPress/gutenberg/pull/66316))
+- Fix button hover style in sidebar navigation screen. ([66505](https://github.com/WordPress/gutenberg/pull/66505))
+- Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- Revert 66431 (Site editor: Remove "default" admin CSS). ([66540](https://github.com/WordPress/gutenberg/pull/66540))
+- Restore block-library editor.css outside canvas. ([66556](https://github.com/WordPress/gutenberg/pull/66556))
+
+#### Meta Boxes
+- Typo metabox pane is a meta box panel. ([66502](https://github.com/WordPress/gutenberg/pull/66502))
+
+#### REST API
+- Preload: Fix multiple regressions around global styles. ([66468](https://github.com/WordPress/gutenberg/pull/66468))
+
+#### Style Book
+- Fix comment output in styles. ([66439](https://github.com/WordPress/gutenberg/pull/66439))
+
+#### Saving
+- Site editor: Fix save shortcut. ([66423](https://github.com/WordPress/gutenberg/pull/66423))
+
+#### CSS & Styling
+- Fix the navigation issue inside cover blocks. ([66093](https://github.com/WordPress/gutenberg/pull/66093))
+
+
+### Accessibility
+
+- Update the speak messages when switching editor modes. ([66278](https://github.com/WordPress/gutenberg/pull/66278))
+
+#### Post Editor
+- Add featured image alt text. ([66189](https://github.com/WordPress/gutenberg/pull/66189))
+- Fix : Badge Color contrast. ([66360](https://github.com/WordPress/gutenberg/pull/66360))
+
+#### Block Editor
+- ImageSizeControls: Replace ButtonGroup with ToggleGroupControl. ([65386](https://github.com/WordPress/gutenberg/pull/65386))
+- Improve the link preview accessibility and labels. ([60908](https://github.com/WordPress/gutenberg/pull/60908))
+
+#### Block Library
+- Search: Replace ButtonGroup usage with ToggleGroupControl. ([65340](https://github.com/WordPress/gutenberg/pull/65340))
+
+#### Global Styles
+- Global styles menu: Avoid visible labels and accessible names mismatch. ([65124](https://github.com/WordPress/gutenberg/pull/65124))
+
+#### Site Editor
+- Fix Global styles panel header buttons text overlap for 'Show button text labels'. ([63243](https://github.com/WordPress/gutenberg/pull/63243))
+
+
+### Performance
+
+- Backport from Core: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. ([66539](https://github.com/WordPress/gutenberg/pull/66539))
+- tests : -  Fix/compare performance with correct branch. ([66196](https://github.com/WordPress/gutenberg/pull/66196))
+
+#### Site Editor
+- Remove "default" admin CSS. ([66431](https://github.com/WordPress/gutenberg/pull/66431))
+- Remove content styles outside canvas. ([66432](https://github.com/WordPress/gutenberg/pull/66432))
+
+#### Block bindings
+- Use `getEntityConfig` instead of `getPostTypes` to get available slugs. ([66101](https://github.com/WordPress/gutenberg/pull/66101))
+
+
+### Experiments
+
+- Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- QuickEdit: Add slug field control. ([65196](https://github.com/WordPress/gutenberg/pull/65196))
+
+#### Data Views
+- Quick Edit: Fix JS error when bulk editing pages. ([66358](https://github.com/WordPress/gutenberg/pull/66358))
+- QuickEdit: Add Featured Image Control. ([64496](https://github.com/WordPress/gutenberg/pull/64496))
+- QuickEdit: Add Parent field. ([66527](https://github.com/WordPress/gutenberg/pull/66527))
+
+
+### Documentation
+
+- BaseControl: Auto-generate readme. ([66500](https://github.com/WordPress/gutenberg/pull/66500))
+- Components: Prevent generated readmes duplicating h1 elements when published. ([66180](https://github.com/WordPress/gutenberg/pull/66180))
+- Correct documentation on display type in flow layouts. ([66224](https://github.com/WordPress/gutenberg/pull/66224))
+- Docs: Interactivity API - Add documentation for `getServerState()` and `getServerContext()`. ([66104](https://github.com/WordPress/gutenberg/pull/66104))
+- Fix undo/redo Button size in Storybook playground. ([66538](https://github.com/WordPress/gutenberg/pull/66538))
+- Fix: JSON Schema Docgen doesn't work on Windows OS. ([66414](https://github.com/WordPress/gutenberg/pull/66414))
+- ItemGroup: Improve stories to default to bordered and separated. ([66191](https://github.com/WordPress/gutenberg/pull/66191))
+- README: Add Storybook badge. ([66529](https://github.com/WordPress/gutenberg/pull/66529))
+- Remove meetings that no longer occur from Contributor Guide. ([66421](https://github.com/WordPress/gutenberg/pull/66421))
+- Site editor routes: Add documentation for areas and prevent `edit` area from rendering when canvas is `edit`. ([66309](https://github.com/WordPress/gutenberg/pull/66309))
+- Update documentation about build process changes. ([66428](https://github.com/WordPress/gutenberg/pull/66428))
+- docs: Example for getSelectedBlock. ([66108](https://github.com/WordPress/gutenberg/pull/66108))
+
+
+### Code Quality
+
+- Block editor: Remove reusable blocks stylesheet from iframe. ([66285](https://github.com/WordPress/gutenberg/pull/66285))
+- Compose: Fix React Complier error for 'useCopyToClipboard'. ([66444](https://github.com/WordPress/gutenberg/pull/66444))
+- Composer: Fix React Compiler errors for 'useDropZone'. ([66469](https://github.com/WordPress/gutenberg/pull/66469))
+- Fields: Fix React Compiler mutation errors. ([66464](https://github.com/WordPress/gutenberg/pull/66464))
+- Interface: Remove duplicate 'withComplementaryAreaContext' file. ([66348](https://github.com/WordPress/gutenberg/pull/66348))
+- Interface: Remove unused private API support. ([66565](https://github.com/WordPress/gutenberg/pull/66565))
+- Interface: Use plugin context hook instead of HoC. ([66362](https://github.com/WordPress/gutenberg/pull/66362))
+- Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+- Scripts: Refactor to extract license logic. ([66179](https://github.com/WordPress/gutenberg/pull/66179))
+- Theme JSON: Get_block_nodes - relocate $selectors assignment. ([66265](https://github.com/WordPress/gutenberg/pull/66265))
+- Update a few function definitions. ([66315](https://github.com/WordPress/gutenberg/pull/66315))
+
+#### Block Editor
+- ESLint: Remove explicit `react-hooks/exhaustive-deps` disabling. ([66461](https://github.com/WordPress/gutenberg/pull/66461))
+- ESLint: Remove various React Compiler mutation violations. ([66327](https://github.com/WordPress/gutenberg/pull/66327))
+- Fix 'useInstanceId' hook reference. ([66406](https://github.com/WordPress/gutenberg/pull/66406))
+- Fix React Compiler error for Duotone. ([66492](https://github.com/WordPress/gutenberg/pull/66492))
+- Fix React Complier error for 'useEventListeners'. ([66495](https://github.com/WordPress/gutenberg/pull/66495))
+- Import only the actually used PostCSS exports. ([66379](https://github.com/WordPress/gutenberg/pull/66379))
+- No need to unlock public actions. ([66260](https://github.com/WordPress/gutenberg/pull/66260))
+- Remove patterns UI stylesheet from iframe. ([66306](https://github.com/WordPress/gutenberg/pull/66306))
+- Remove unnecessary Tooltip component from radius control linked button. ([66274](https://github.com/WordPress/gutenberg/pull/66274))
+- Rich Text: Fix React Complier error for 'useEventListeners'. ([66460](https://github.com/WordPress/gutenberg/pull/66460))
+- Storybook: Add BlockPatternsList story. ([66227](https://github.com/WordPress/gutenberg/pull/66227))
+
+#### Components
+- BorderBoxControl: Deprecate 36px default size. ([65752](https://github.com/WordPress/gutenberg/pull/65752))
+- BorderControl: Deprecate 36px default size. ([65755](https://github.com/WordPress/gutenberg/pull/65755))
+- DrodownMenuV2: Rename folder to `menu`. ([66473](https://github.com/WordPress/gutenberg/pull/66473))
+- ESLint: Stop disabling `react-hooks/exhaustive-deps` rule. ([66324](https://github.com/WordPress/gutenberg/pull/66324))
+- Fix React Compiler error for 'useAutocomplete'. ([66496](https://github.com/WordPress/gutenberg/pull/66496))
+- PaletteEdit: Use `ItemGroup` and `Item`, and avoid custom styles. ([66164](https://github.com/WordPress/gutenberg/pull/66164))
+- TabPanel: Add 40px size prop to tab Button. ([66557](https://github.com/WordPress/gutenberg/pull/66557))
+- Tabs: Align to standard compound components structure. ([66225](https://github.com/WordPress/gutenberg/pull/66225))
+- Tabs: Simplify styled components code. ([66208](https://github.com/WordPress/gutenberg/pull/66208))
+
+#### Zoom Out
+- Bundle behavior in block-editor and add story. ([66240](https://github.com/WordPress/gutenberg/pull/66240))
+- Editor: Handle zoom out state via the 'switchEditorMode' action. ([66262](https://github.com/WordPress/gutenberg/pull/66262))
+- Fix/html scale code quality. ([66181](https://github.com/WordPress/gutenberg/pull/66181))
+- Make useZoomOut hook private. ([66374](https://github.com/WordPress/gutenberg/pull/66374))
+- Remove double click to exit hook from the block-editor package. ([66335](https://github.com/WordPress/gutenberg/pull/66335))
+- Remove viewport check from useZoomOut hook. ([66341](https://github.com/WordPress/gutenberg/pull/66341))
+
+#### Post Editor
+- Editor: No need to reset mode when changing device preview types. ([66261](https://github.com/WordPress/gutenberg/pull/66261))
+- Editor: Use plugin context hook in 'PluginMoreMenuItem'. ([66351](https://github.com/WordPress/gutenberg/pull/66351))
+- Editor: Use plugin context hook in 'PluginPreviewMenuItem'. ([66350](https://github.com/WordPress/gutenberg/pull/66350))
+- Fix typo after #63669. ([66396](https://github.com/WordPress/gutenberg/pull/66396))
+- Remove leftover JS code from 66451. ([66472](https://github.com/WordPress/gutenberg/pull/66472))
+
+#### Block Library
+- Cleanup unnecessary notice removal. ([66409](https://github.com/WordPress/gutenberg/pull/66409))
+- ESLint: Fix a couple of React Compiler reassignment errors. ([66331](https://github.com/WordPress/gutenberg/pull/66331))
+- Footnotes: Remove extra callback when parsing content. ([66370](https://github.com/WordPress/gutenberg/pull/66370))
+- Gallery: Fix React Compiler reassignment error. ([66408](https://github.com/WordPress/gutenberg/pull/66408))
+- Table Block: Remove hasArrowIndicator prop. ([66204](https://github.com/WordPress/gutenberg/pull/66204))
+
+#### Style Book
+- Avoid state/effect combo when generating values. ([66446](https://github.com/WordPress/gutenberg/pull/66446))
+- Fix React Compiler error. ([66445](https://github.com/WordPress/gutenberg/pull/66445))
+
+#### Global Styles
+- Clean up: Adjust reusable-blocks dependencies. ([66302](https://github.com/WordPress/gutenberg/pull/66302))
+- Fix React Compiler variable mutation error. ([66410](https://github.com/WordPress/gutenberg/pull/66410))
+
+#### Interactivity API
+- iAPI: Add comments to the `deepMerge()` function. ([66220](https://github.com/WordPress/gutenberg/pull/66220))
+- iAPI: Add tests for handling arrays in `deepMerge()`. ([66218](https://github.com/WordPress/gutenberg/pull/66218))
+
+#### Navigation in Site View
+- Navigation: Improve trigger for fallback navigation. ([66478](https://github.com/WordPress/gutenberg/pull/66478))
+
+#### Plugins API
+- Plugins: Deprecate 'withPluginContext' HOC. ([66363](https://github.com/WordPress/gutenberg/pull/66363))
+
+#### Site Editor
+- Prepare route registration by refactoring the site editor router. ([66030](https://github.com/WordPress/gutenberg/pull/66030))
+
+
+### Tools
+
+- Add theme type to the bug report issue template. ([63851](https://github.com/WordPress/gutenberg/pull/63851))
+- Pull request automation: Use full npm install. ([66314](https://github.com/WordPress/gutenberg/pull/66314))
+- Use npm workspaces for packages (second attempt). ([66272](https://github.com/WordPress/gutenberg/pull/66272))
+
+#### Testing
+- Fix [Flaky Test] Entering zoomed out mode zooms the canvas. ([66212](https://github.com/WordPress/gutenberg/pull/66212))
+- Fix end-to-end test for padding appender. ([66080](https://github.com/WordPress/gutenberg/pull/66080))
+- Upgrade Playwright to v1.48. ([66296](https://github.com/WordPress/gutenberg/pull/66296))
+
+#### Build Tooling
+- Add new private `vips` package. ([64845](https://github.com/WordPress/gutenberg/pull/64845))
+- Revert "Use npm workspaces for packages". ([66270](https://github.com/WordPress/gutenberg/pull/66270))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AhmarZaidi: Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- @mediaformat: Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+- @nicolasgalvez: WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+- @poojabhimani12: Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- @rinkalpagdar: Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- @rudrakshi-gupta: Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- @SH4LIN: GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AhmarZaidi @akasunil @andrewserong @carolinan @cbravobernal @ciampo @dhruvang21 @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jeryj @jsnajdr @juanfra @madhusudhand @MaggieCabrera @Mamaduka @mattrwalker @mcsf @mediaformat @michalczaplinski @mirka @mreishus @ndiego @nicolasgalvez @ntsekouras @oandregal @PARTHVATALIYA @peterwilsoncc @poojabhimani12 @prajapatisagar @ramonjd @renatho @rinkalpagdar @rudrakshi-gupta @ryanwelcher @SantosGuillamot @SH4LIN @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @torounit @troychaplin @tyxla @vipul0425 @Vrishabhsk @vykes-mac @youknowriad @zaguiini
+
+
+= 19.6.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+- BlockGroupToolbar: Better i18n context for toolbar labels. ([66211](https://github.com/WordPress/gutenberg/pull/66211))
+- Core Data: Add the 'getEntitiesConfig' resolver. ([65871](https://github.com/WordPress/gutenberg/pull/65871))
+- Create Block: Adds `--target-dir` flag to allow the tool to target where to scaffold. ([53781](https://github.com/WordPress/gutenberg/pull/53781))
+- Editor Interface: Remove  small header from global styles/plugin sidebar. ([64474](https://github.com/WordPress/gutenberg/pull/64474))
+- Remove purple coloring from DocumentBar and PostCard. ([66451](https://github.com/WordPress/gutenberg/pull/66451))
+- Scripts: Add BlueOak-1.0.0 license to GPL2 compatible. ([66139](https://github.com/WordPress/gutenberg/pull/66139))
+- WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+
+#### Components
+- Add elevation tokens to storybook. ([66122](https://github.com/WordPress/gutenberg/pull/66122))
+- Add foundations:Elevation to storybook. ([66124](https://github.com/WordPress/gutenberg/pull/66124))
+- Add radius foundation and tokens to storybook. ([66219](https://github.com/WordPress/gutenberg/pull/66219))
+- Combobox, FormTokenField: Show message when no matches found. ([66142](https://github.com/WordPress/gutenberg/pull/66142))
+- Storybook: Organizes components under 'Utilities'. ([66210](https://github.com/WordPress/gutenberg/pull/66210))
+- Tabs: Expose active tab item props, use ariakit prop types. ([66223](https://github.com/WordPress/gutenberg/pull/66223))
+- Tabs: Remove custom logic. ([66097](https://github.com/WordPress/gutenberg/pull/66097))
+- `DropdownMenuV2`: Rename to `Menu`. ([66289](https://github.com/WordPress/gutenberg/pull/66289))
+
+#### Block Library
+- Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- Add lightbox option in gallery block link control. ([64014](https://github.com/WordPress/gutenberg/pull/64014))
+- Archives: Add border block support. ([63400](https://github.com/WordPress/gutenberg/pull/63400))
+- Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- Cover Block: Add Image Resolution options. ([62926](https://github.com/WordPress/gutenberg/pull/62926))
+- HTML Block: Force HTML preview in view mode. ([66440](https://github.com/WordPress/gutenberg/pull/66440))
+
+#### Zoom Out
+- Add keyboard shortcut in editor. ([66400](https://github.com/WordPress/gutenberg/pull/66400))
+- Iterate zoom out shuffle into a more visual control. ([66194](https://github.com/WordPress/gutenberg/pull/66194))
+- Use the zoom-level value to scale the iframe. ([66280](https://github.com/WordPress/gutenberg/pull/66280))
+
+#### Site Editor
+- Remove synchronization of canvas mode into store. ([66213](https://github.com/WordPress/gutenberg/pull/66213))
+- Style Book: Clean up layout. ([66255](https://github.com/WordPress/gutenberg/pull/66255))
+- Update site icon and title position. ([66171](https://github.com/WordPress/gutenberg/pull/66171))
+
+#### Data Views
+- Fix alignment of action items in list layout. ([66273](https://github.com/WordPress/gutenberg/pull/66273))
+- Templates: Hide media field in list view. ([66573](https://github.com/WordPress/gutenberg/pull/66573))
+
+#### Global Styles
+- Backport: Caching of global styles for blocks from core. ([66349](https://github.com/WordPress/gutenberg/pull/66349))
+- Style Book: Add color tab. ([65692](https://github.com/WordPress/gutenberg/pull/65692))
+
+#### Real-time Collaboration
+- Inline Commenting: Disable comments on published posts for now. ([66583](https://github.com/WordPress/gutenberg/pull/66583))
+
+#### Post Editor
+- Set `ResizableEditor` height based on border-box. ([66342](https://github.com/WordPress/gutenberg/pull/66342))
+
+#### Icons
+- Add align-item related icons. ([66242](https://github.com/WordPress/gutenberg/pull/66242))
+
+#### REST API
+- Backport from WordPress core: Improvements for the post format query loop filter. ([66037](https://github.com/WordPress/gutenberg/pull/66037))
+
+
+### New APIs
+
+- Stabilize isPreviewMode flag. ([66149](https://github.com/WordPress/gutenberg/pull/66149))
+- scripts: Add build-blocks-manifest command. ([65866](https://github.com/WordPress/gutenberg/pull/65866))
+
+
+### Bug Fixes
+
+- Create block: Ensure $slug is replaced with passed slug. ([66528](https://github.com/WordPress/gutenberg/pull/66528))
+- Fix extraneous scrollbar in device previews. ([66494](https://github.com/WordPress/gutenberg/pull/66494))
+- GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+- Global styles: Move preload paths filter to 6.7 (previously 6.8). ([66543](https://github.com/WordPress/gutenberg/pull/66543))
+- Miscellaneous i18n fixes. ([66510](https://github.com/WordPress/gutenberg/pull/66510))
+- Remove most of the occurrences of the verb toggle. ([66371](https://github.com/WordPress/gutenberg/pull/66371))
+- SpacingSizesControl: Use generic label for linked button. ([66304](https://github.com/WordPress/gutenberg/pull/66304))
+
+#### Zoom Out
+- Disable zoom out toggle button when Style Book is open. ([66228](https://github.com/WordPress/gutenberg/pull/66228))
+- Don't switch editor mode when changing entities. ([66452](https://github.com/WordPress/gutenberg/pull/66452))
+- Fix scaling animation for device previews. ([66132](https://github.com/WordPress/gutenberg/pull/66132))
+- Fix zoom out not persisting while switching between editor and code editor. ([65932](https://github.com/WordPress/gutenberg/pull/65932))
+- Fix zoom out shortcut on Windows. ([66506](https://github.com/WordPress/gutenberg/pull/66506))
+- Fix: Activate zoom out on large viewport. ([66308](https://github.com/WordPress/gutenberg/pull/66308))
+- Hide slots and grouping buttons. ([66243](https://github.com/WordPress/gutenberg/pull/66243))
+- Remove zoom-out toolbar. ([66039](https://github.com/WordPress/gutenberg/pull/66039))
+- Resets the Zoom on viewed/edited entity change. ([66232](https://github.com/WordPress/gutenberg/pull/66232))
+- Revise zoom layout shift fix. ([66390](https://github.com/WordPress/gutenberg/pull/66390))
+- Zoom-out: Rely on zoom-level instead of zoom-out mode. ([66141](https://github.com/WordPress/gutenberg/pull/66141))
+
+#### Block Editor
+- Block inserter: Prevent editor from crashing if `blockType.parent` is a string. ([66234](https://github.com/WordPress/gutenberg/pull/66234))
+- Block toolbar: Account for scrollable blocks that affect the position of the block toolbar. ([66188](https://github.com/WordPress/gutenberg/pull/66188))
+- Fix extra scrollbar appearing when searching in the inserter. ([66229](https://github.com/WordPress/gutenberg/pull/66229))
+- Fix: Show paragraph block variations in rich text inserter. ([66318](https://github.com/WordPress/gutenberg/pull/66318))
+- Group: Fix padding select. ([65857](https://github.com/WordPress/gutenberg/pull/65857))
+- Link Shortcut: Only trigger the link shortcut if there's a text selection. ([66056](https://github.com/WordPress/gutenberg/pull/66056))
+- Remove relative position from sidebar tabpanel. ([66267](https://github.com/WordPress/gutenberg/pull/66267))
+- Rich text: Remove empty file. ([66553](https://github.com/WordPress/gutenberg/pull/66553))
+- Zoom Out: Fix bouncy drop zones. ([66399](https://github.com/WordPress/gutenberg/pull/66399))
+
+#### Components
+- ColorPalette: Prevent overflow of custom color button background. ([66152](https://github.com/WordPress/gutenberg/pull/66152))
+- Fix: Text overflow in Patterns filter. ([66504](https://github.com/WordPress/gutenberg/pull/66504))
+- RadioGroup: Fix arrow key navigation in RTL. ([66202](https://github.com/WordPress/gutenberg/pull/66202))
+- Tabs and TabPanel: Fix arrow key navigation in RTL. ([66201](https://github.com/WordPress/gutenberg/pull/66201))
+- Tabs and ToggleGroupControl: Round indicator size. ([66426](https://github.com/WordPress/gutenberg/pull/66426))
+- Tabs: Fix animation timings. ([66198](https://github.com/WordPress/gutenberg/pull/66198))
+- Tabs: Override tablist's tabindex only when necessary. ([66209](https://github.com/WordPress/gutenberg/pull/66209))
+- Tabs: Restore vertical alignment for tabs content. ([66215](https://github.com/WordPress/gutenberg/pull/66215))
+- Tabs: Update indicator more reactively. ([66207](https://github.com/WordPress/gutenberg/pull/66207))
+
+#### Post Editor
+- Always force iframe in pattern editor. ([65887](https://github.com/WordPress/gutenberg/pull/65887))
+- Editor: Multi-entity saving: Show correct count of entities to be saved. ([66482](https://github.com/WordPress/gutenberg/pull/66482))
+- Fix : "Set featured image" button border flashes on focus. ([66092](https://github.com/WordPress/gutenberg/pull/66092))
+- Fix Parent Check Condition in `buildTermsTree`. ([66006](https://github.com/WordPress/gutenberg/pull/66006))
+- Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. ([66355](https://github.com/WordPress/gutenberg/pull/66355))
+- PostTaxonomiesFlatTermSelector: Restore space between tag list and most used tags. ([66566](https://github.com/WordPress/gutenberg/pull/66566))
+
+#### Block Library
+- Block registration: Normalize blockType.parent to `array`. ([66250](https://github.com/WordPress/gutenberg/pull/66250))
+- Button Block: Apply Stretch Styles Correctly. ([64770](https://github.com/WordPress/gutenberg/pull/64770))
+- Buttons: Fix the initial white space in nofollow rel. ([66303](https://github.com/WordPress/gutenberg/pull/66303))
+- Fix - Image block: Aspect ratio not responding when dimensions are not set. ([66217](https://github.com/WordPress/gutenberg/pull/66217))
+- Navigation block: Fix block appender size. ([66153](https://github.com/WordPress/gutenberg/pull/66153))
+
+#### Site Editor
+- Edit Site: Fix canvasMode var. ([66316](https://github.com/WordPress/gutenberg/pull/66316))
+- Fix button hover style in sidebar navigation screen. ([66505](https://github.com/WordPress/gutenberg/pull/66505))
+- Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- Revert 66431 (Site editor: Remove "default" admin CSS). ([66540](https://github.com/WordPress/gutenberg/pull/66540))
+
+#### Meta Boxes
+- Typo metabox pane is a meta box panel. ([66502](https://github.com/WordPress/gutenberg/pull/66502))
+
+#### REST API
+- Preload: Fix multiple regressions around global styles. ([66468](https://github.com/WordPress/gutenberg/pull/66468))
+
+#### Style Book
+- Fix comment output in styles. ([66439](https://github.com/WordPress/gutenberg/pull/66439))
+
+#### Saving
+- Site editor: Fix save shortcut. ([66423](https://github.com/WordPress/gutenberg/pull/66423))
+
+#### CSS & Styling
+- Fix the navigation issue inside cover blocks. ([66093](https://github.com/WordPress/gutenberg/pull/66093))
+
+
+### Accessibility
+
+- Update the speak messages when switching editor modes. ([66278](https://github.com/WordPress/gutenberg/pull/66278))
+
+#### Post Editor
+- Add featured image alt text. ([66189](https://github.com/WordPress/gutenberg/pull/66189))
+- Fix : Badge Color contrast. ([66360](https://github.com/WordPress/gutenberg/pull/66360))
+
+#### Block Editor
+- ImageSizeControls: Replace ButtonGroup with ToggleGroupControl. ([65386](https://github.com/WordPress/gutenberg/pull/65386))
+- Improve the link preview accessibility and labels. ([60908](https://github.com/WordPress/gutenberg/pull/60908))
+
+#### Block Library
+- Search: Replace ButtonGroup usage with ToggleGroupControl. ([65340](https://github.com/WordPress/gutenberg/pull/65340))
+
+#### Global Styles
+- Global styles menu: Avoid visible labels and accessible names mismatch. ([65124](https://github.com/WordPress/gutenberg/pull/65124))
+
+#### Site Editor
+- Fix Global styles panel header buttons text overlap for 'Show button text labels'. ([63243](https://github.com/WordPress/gutenberg/pull/63243))
+
+
+### Performance
+
+- Backport from Core: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. ([66539](https://github.com/WordPress/gutenberg/pull/66539))
+- tests : -  Fix/compare performance with correct branch. ([66196](https://github.com/WordPress/gutenberg/pull/66196))
+
+#### Site Editor
+- Remove "default" admin CSS. ([66431](https://github.com/WordPress/gutenberg/pull/66431))
+- Remove content styles outside canvas. ([66432](https://github.com/WordPress/gutenberg/pull/66432))
+
+#### Block bindings
+- Use `getEntityConfig` instead of `getPostTypes` to get available slugs. ([66101](https://github.com/WordPress/gutenberg/pull/66101))
+
+
+### Experiments
+
+- Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- QuickEdit: Add slug field control. ([65196](https://github.com/WordPress/gutenberg/pull/65196))
+
+#### Data Views
+- Quick Edit: Fix JS error when bulk editing pages. ([66358](https://github.com/WordPress/gutenberg/pull/66358))
+- QuickEdit: Add Featured Image Control. ([64496](https://github.com/WordPress/gutenberg/pull/64496))
+- QuickEdit: Add Parent field. ([66527](https://github.com/WordPress/gutenberg/pull/66527))
+
+
+### Documentation
+
+- BaseControl: Auto-generate readme. ([66500](https://github.com/WordPress/gutenberg/pull/66500))
+- Components: Prevent generated readmes duplicating h1 elements when published. ([66180](https://github.com/WordPress/gutenberg/pull/66180))
+- Correct documentation on display type in flow layouts. ([66224](https://github.com/WordPress/gutenberg/pull/66224))
+- Docs: Interactivity API - Add documentation for `getServerState()` and `getServerContext()`. ([66104](https://github.com/WordPress/gutenberg/pull/66104))
+- Fix undo/redo Button size in Storybook playground. ([66538](https://github.com/WordPress/gutenberg/pull/66538))
+- Fix: JSON Schema Docgen doesn't work on Windows OS. ([66414](https://github.com/WordPress/gutenberg/pull/66414))
+- ItemGroup: Improve stories to default to bordered and separated. ([66191](https://github.com/WordPress/gutenberg/pull/66191))
+- README: Add Storybook badge. ([66529](https://github.com/WordPress/gutenberg/pull/66529))
+- Remove meetings that no longer occur from Contributor Guide. ([66421](https://github.com/WordPress/gutenberg/pull/66421))
+- Site editor routes: Add documentation for areas and prevent `edit` area from rendering when canvas is `edit`. ([66309](https://github.com/WordPress/gutenberg/pull/66309))
+- Update documentation about build process changes. ([66428](https://github.com/WordPress/gutenberg/pull/66428))
+- docs: Example for getSelectedBlock. ([66108](https://github.com/WordPress/gutenberg/pull/66108))
+
+
+### Code Quality
+
+- Block editor: Remove reusable blocks stylesheet from iframe. ([66285](https://github.com/WordPress/gutenberg/pull/66285))
+- Compose: Fix React Complier error for 'useCopyToClipboard'. ([66444](https://github.com/WordPress/gutenberg/pull/66444))
+- Composer: Fix React Compiler errors for 'useDropZone'. ([66469](https://github.com/WordPress/gutenberg/pull/66469))
+- Fields: Fix React Compiler mutation errors. ([66464](https://github.com/WordPress/gutenberg/pull/66464))
+- Interface: Remove duplicate 'withComplementaryAreaContext' file. ([66348](https://github.com/WordPress/gutenberg/pull/66348))
+- Interface: Remove unused private API support. ([66565](https://github.com/WordPress/gutenberg/pull/66565))
+- Interface: Use plugin context hook instead of HoC. ([66362](https://github.com/WordPress/gutenberg/pull/66362))
+- Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+- Scripts: Refactor to extract license logic. ([66179](https://github.com/WordPress/gutenberg/pull/66179))
+- Theme JSON: Get_block_nodes - relocate $selectors assignment. ([66265](https://github.com/WordPress/gutenberg/pull/66265))
+- Update a few function definitions. ([66315](https://github.com/WordPress/gutenberg/pull/66315))
+
+#### Block Editor
+- ESLint: Remove explicit `react-hooks/exhaustive-deps` disabling. ([66461](https://github.com/WordPress/gutenberg/pull/66461))
+- ESLint: Remove various React Compiler mutation violations. ([66327](https://github.com/WordPress/gutenberg/pull/66327))
+- Fix 'useInstanceId' hook reference. ([66406](https://github.com/WordPress/gutenberg/pull/66406))
+- Fix React Compiler error for Duotone. ([66492](https://github.com/WordPress/gutenberg/pull/66492))
+- Fix React Complier error for 'useEventListeners'. ([66495](https://github.com/WordPress/gutenberg/pull/66495))
+- Import only the actually used PostCSS exports. ([66379](https://github.com/WordPress/gutenberg/pull/66379))
+- No need to unlock public actions. ([66260](https://github.com/WordPress/gutenberg/pull/66260))
+- Remove patterns UI stylesheet from iframe. ([66306](https://github.com/WordPress/gutenberg/pull/66306))
+- Remove unnecessary Tooltip component from radius control linked button. ([66274](https://github.com/WordPress/gutenberg/pull/66274))
+- Rich Text: Fix React Complier error for 'useEventListeners'. ([66460](https://github.com/WordPress/gutenberg/pull/66460))
+- Storybook: Add BlockPatternsList story. ([66227](https://github.com/WordPress/gutenberg/pull/66227))
+
+#### Components
+- BorderBoxControl: Deprecate 36px default size. ([65752](https://github.com/WordPress/gutenberg/pull/65752))
+- BorderControl: Deprecate 36px default size. ([65755](https://github.com/WordPress/gutenberg/pull/65755))
+- DrodownMenuV2: Rename folder to `menu`. ([66473](https://github.com/WordPress/gutenberg/pull/66473))
+- ESLint: Stop disabling `react-hooks/exhaustive-deps` rule. ([66324](https://github.com/WordPress/gutenberg/pull/66324))
+- Fix React Compiler error for 'useAutocomplete'. ([66496](https://github.com/WordPress/gutenberg/pull/66496))
+- PaletteEdit: Use `ItemGroup` and `Item`, and avoid custom styles. ([66164](https://github.com/WordPress/gutenberg/pull/66164))
+- TabPanel: Add 40px size prop to tab Button. ([66557](https://github.com/WordPress/gutenberg/pull/66557))
+- Tabs: Align to standard compound components structure. ([66225](https://github.com/WordPress/gutenberg/pull/66225))
+- Tabs: Simplify styled components code. ([66208](https://github.com/WordPress/gutenberg/pull/66208))
+
+#### Zoom Out
+- Bundle behavior in block-editor and add story. ([66240](https://github.com/WordPress/gutenberg/pull/66240))
+- Editor: Handle zoom out state via the 'switchEditorMode' action. ([66262](https://github.com/WordPress/gutenberg/pull/66262))
+- Fix/html scale code quality. ([66181](https://github.com/WordPress/gutenberg/pull/66181))
+- Make useZoomOut hook private. ([66374](https://github.com/WordPress/gutenberg/pull/66374))
+- Remove double click to exit hook from the block-editor package. ([66335](https://github.com/WordPress/gutenberg/pull/66335))
+- Remove viewport check from useZoomOut hook. ([66341](https://github.com/WordPress/gutenberg/pull/66341))
+
+#### Post Editor
+- Editor: No need to reset mode when changing device preview types. ([66261](https://github.com/WordPress/gutenberg/pull/66261))
+- Editor: Use plugin context hook in 'PluginMoreMenuItem'. ([66351](https://github.com/WordPress/gutenberg/pull/66351))
+- Editor: Use plugin context hook in 'PluginPreviewMenuItem'. ([66350](https://github.com/WordPress/gutenberg/pull/66350))
+- Fix typo after #63669. ([66396](https://github.com/WordPress/gutenberg/pull/66396))
+- Remove leftover JS code from 66451. ([66472](https://github.com/WordPress/gutenberg/pull/66472))
+
+#### Block Library
+- Cleanup unnecessary notice removal. ([66409](https://github.com/WordPress/gutenberg/pull/66409))
+- ESLint: Fix a couple of React Compiler reassignment errors. ([66331](https://github.com/WordPress/gutenberg/pull/66331))
+- Footnotes: Remove extra callback when parsing content. ([66370](https://github.com/WordPress/gutenberg/pull/66370))
+- Gallery: Fix React Compiler reassignment error. ([66408](https://github.com/WordPress/gutenberg/pull/66408))
+- Table Block: Remove hasArrowIndicator prop. ([66204](https://github.com/WordPress/gutenberg/pull/66204))
+
+#### Style Book
+- Avoid state/effect combo when generating values. ([66446](https://github.com/WordPress/gutenberg/pull/66446))
+- Fix React Compiler error. ([66445](https://github.com/WordPress/gutenberg/pull/66445))
+
+#### Global Styles
+- Clean up: Adjust reusable-blocks dependencies. ([66302](https://github.com/WordPress/gutenberg/pull/66302))
+- Fix React Compiler variable mutation error. ([66410](https://github.com/WordPress/gutenberg/pull/66410))
+
+#### Interactivity API
+- iAPI: Add comments to the `deepMerge()` function. ([66220](https://github.com/WordPress/gutenberg/pull/66220))
+- iAPI: Add tests for handling arrays in `deepMerge()`. ([66218](https://github.com/WordPress/gutenberg/pull/66218))
+
+#### Navigation in Site View
+- Navigation: Improve trigger for fallback navigation. ([66478](https://github.com/WordPress/gutenberg/pull/66478))
+
+#### Plugins API
+- Plugins: Deprecate 'withPluginContext' HOC. ([66363](https://github.com/WordPress/gutenberg/pull/66363))
+
+#### Site Editor
+- Prepare route registration by refactoring the site editor router. ([66030](https://github.com/WordPress/gutenberg/pull/66030))
+
+
+### Tools
+
+- Add theme type to the bug report issue template. ([63851](https://github.com/WordPress/gutenberg/pull/63851))
+- Pull request automation: Use full npm install. ([66314](https://github.com/WordPress/gutenberg/pull/66314))
+- Use npm workspaces for packages (second attempt). ([66272](https://github.com/WordPress/gutenberg/pull/66272))
+
+#### Testing
+- Fix [Flaky Test] Entering zoomed out mode zooms the canvas. ([66212](https://github.com/WordPress/gutenberg/pull/66212))
+- Fix end-to-end test for padding appender. ([66080](https://github.com/WordPress/gutenberg/pull/66080))
+- Upgrade Playwright to v1.48. ([66296](https://github.com/WordPress/gutenberg/pull/66296))
+
+#### Build Tooling
+- Add new private `vips` package. ([64845](https://github.com/WordPress/gutenberg/pull/64845))
+- Revert "Use npm workspaces for packages". ([66270](https://github.com/WordPress/gutenberg/pull/66270))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AhmarZaidi: Remove toggle verb from post list data views 'Toggle details panel'. ([66334](https://github.com/WordPress/gutenberg/pull/66334))
+- @mediaformat: Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. ([66147](https://github.com/WordPress/gutenberg/pull/66147))
+- @nicolasgalvez: WP Scripts: Add a `--root-folder` argument to the `plugin-zip` command. ([61375](https://github.com/WordPress/gutenberg/pull/61375))
+- @poojabhimani12: Add Inline comment experimental flag. ([60622](https://github.com/WordPress/gutenberg/pull/60622))
+- @rinkalpagdar: Border support added to comments. ([66354](https://github.com/WordPress/gutenberg/pull/66354))
+- @rudrakshi-gupta: Add Transformation from Separator to Spacer. ([66230](https://github.com/WordPress/gutenberg/pull/66230))
+- @SH4LIN: GH-66090: Self nesting and circular nesting block fix. ([66121](https://github.com/WordPress/gutenberg/pull/66121))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AhmarZaidi @akasunil @andrewserong @carolinan @cbravobernal @ciampo @dhruvang21 @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jeryj @jsnajdr @juanfra @madhusudhand @MaggieCabrera @Mamaduka @mattrwalker @mcsf @mediaformat @michalczaplinski @mirka @mreishus @ndiego @nicolasgalvez @ntsekouras @oandregal @PARTHVATALIYA @peterwilsoncc @poojabhimani12 @prajapatisagar @ramonjd @renatho @rinkalpagdar @rudrakshi-gupta @ryanwelcher @SantosGuillamot @SH4LIN @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @torounit @troychaplin @tyxla @vipul0425 @Vrishabhsk @vykes-mac @youknowriad @zaguiini
+
+
+= 19.5.0 =
+
+## Changelog
+
+### Enhancements
+
+- Remove the verb Toggle from the Block Inserter button. ([65983](https://github.com/WordPress/gutenberg/pull/65983))
+- Update jsdom to 25.0.1. ([65879](https://github.com/WordPress/gutenberg/pull/65879))
+- Write/Design tool: Persist as a user preference. ([65945](https://github.com/WordPress/gutenberg/pull/65945))
+
+#### Zoom Out
+- Make zoom transition smoother. ([66017](https://github.com/WordPress/gutenberg/pull/66017))
+- Try zooming out when selecting the patterns tab in the inserter. ([65785](https://github.com/WordPress/gutenberg/pull/65785))
+- Update/replace edit button with enter on selection. ([65760](https://github.com/WordPress/gutenberg/pull/65760))
+
+#### Block Editor
+- Cleanup `AutoBlockPreview` render memoization of `BlockList`. ([66060](https://github.com/WordPress/gutenberg/pull/66060))
+- Use shallow memo for prioritized inserter blocks. ([65737](https://github.com/WordPress/gutenberg/pull/65737))
+
+#### Components
+- Add type tokens to storybook. ([65993](https://github.com/WordPress/gutenberg/pull/65993))
+- Storybook: Add stub doc on existing colors. ([65982](https://github.com/WordPress/gutenberg/pull/65982))
+
+#### Icons
+- Update "hidden" icon to be clearer, and invert logic as used in Data Views. ([65914](https://github.com/WordPress/gutenberg/pull/65914))
+- Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906))
+
+#### Global Styles
+- Improve navigation logic for revisions screen. ([65946](https://github.com/WordPress/gutenberg/pull/65946))
+
+#### Block bindings
+- Register bindings sources in widgets screens. ([65937](https://github.com/WordPress/gutenberg/pull/65937))
+
+#### Block Library
+- Cover Block: Refactor setting panel. ([65432](https://github.com/WordPress/gutenberg/pull/65432))
+
+
+### Bug Fixes
+
+- Add argument with post ID to the editor.savePost hook. ([66165](https://github.com/WordPress/gutenberg/pull/66165))
+- Backport from WordPress Core: improve performance of WP_Theme_JSON::Merge when merging background styles. ([66002](https://github.com/WordPress/gutenberg/pull/66002))
+- BlockCanvas: Fix the height prop and width of the block editor. ([65977](https://github.com/WordPress/gutenberg/pull/65977))
+- Correct capability for the Experiments page. ([66118](https://github.com/WordPress/gutenberg/pull/66118))
+- Fix rich text toolbar corners. ([66163](https://github.com/WordPress/gutenberg/pull/66163))
+- Fix: Add missing `post.slug` dependency to `useMemo`. ([66125](https://github.com/WordPress/gutenberg/pull/66125))
+- Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102))
+- List all active fonts in the typography section. ([65806](https://github.com/WordPress/gutenberg/pull/65806))
+
+#### Zoom Out
+- Exit zoom out when mode is changed. ([65975](https://github.com/WordPress/gutenberg/pull/65975))
+- Fix scaling issues. ([65998](https://github.com/WordPress/gutenberg/pull/65998))
+- Fix zoom reflow by replacing border with padding. ([66012](https://github.com/WordPress/gutenberg/pull/66012))
+- Focus first section root block if no selected block and tabbing to zoom out canvas. ([65843](https://github.com/WordPress/gutenberg/pull/65843))
+- Make zoom out vertical toolbar consistent. ([65627](https://github.com/WordPress/gutenberg/pull/65627))
+- Polish zoom out inserter. ([66110](https://github.com/WordPress/gutenberg/pull/66110))
+- Position scaled html within available container space. ([66034](https://github.com/WordPress/gutenberg/pull/66034))
+- Restores setting zoom out mode to useZoomOut hook. ([65999](https://github.com/WordPress/gutenberg/pull/65999))
+- Use consistent canvas frame spacing on device preview and zoom out. ([66018](https://github.com/WordPress/gutenberg/pull/66018))
+- Zoom layout shift: Second alternate fix. ([66041](https://github.com/WordPress/gutenberg/pull/66041))
+
+#### Block Library
+- Code block: Set LTR direction for RTL languages. ([65891](https://github.com/WordPress/gutenberg/pull/65891))
+- Fix duotone on parallax/repeated featured image cover blocks. ([65929](https://github.com/WordPress/gutenberg/pull/65929))
+- Fix: Embed Block: Match HTML in the editor and frontend. ([65478](https://github.com/WordPress/gutenberg/pull/65478))
+- Hide grid visualizer when grid is template locked or block editing mode is not default. ([66065](https://github.com/WordPress/gutenberg/pull/66065))
+- Post Content Block: Fix conflict between clearFix and focus ring in the editor. ([65364](https://github.com/WordPress/gutenberg/pull/65364))
+- Post Content: Fix display of block support styles. ([66003](https://github.com/WordPress/gutenberg/pull/66003))
+- Post Terms: Fix fatal error when 'get_the_term_list' returns 'WP_Error'. ([65848](https://github.com/WordPress/gutenberg/pull/65848))
+- Query Loop: Fix isControlAllowed and isTemplate combined logic. ([65984](https://github.com/WordPress/gutenberg/pull/65984))
+- Query Loop: Fix query type indicator. ([65877](https://github.com/WordPress/gutenberg/pull/65877))
+- Revert "Update z-index hierarchy". ([66074](https://github.com/WordPress/gutenberg/pull/66074))
+
+#### Block bindings
+- Accept client ID as parameter for `useBlockBindingsUtils`. ([65818](https://github.com/WordPress/gutenberg/pull/65818))
+- Allow label override when it is defined in client registration. ([66160](https://github.com/WordPress/gutenberg/pull/66160))
+- Bootstrap server sources earlier. ([66058](https://github.com/WordPress/gutenberg/pull/66058))
+- Fix: Don't render image when `src` attribute is empty. ([66004](https://github.com/WordPress/gutenberg/pull/66004))
+- Allow the field types matching attribute types in bindings. ([66174](https://github.com/WordPress/gutenberg/pull/66174))
+
+#### Global Styles
+- Always preview style variations using desktop device type. ([66023](https://github.com/WordPress/gutenberg/pull/66023))
+- Improve Navigator usage in typography panel. ([65942](https://github.com/WordPress/gutenberg/pull/65942))
+- Leave screen if current shadow entry gets deleted. ([65935](https://github.com/WordPress/gutenberg/pull/65935))
+- `PaletteEdit`: Dedupe palette element slugs. ([65772](https://github.com/WordPress/gutenberg/pull/65772))
+
+#### Block Editor
+- Fix DropZone class names on drop. ([65798](https://github.com/WordPress/gutenberg/pull/65798))
+- Fix padding appender hook. ([66143](https://github.com/WordPress/gutenberg/pull/66143))
+- Memoize pattern objects returned from getAllowedPatterns. ([66159](https://github.com/WordPress/gutenberg/pull/66159))
+
+#### Components
+- Fix : Secondary Button Transition. ([66045](https://github.com/WordPress/gutenberg/pull/66045))
+- Global Styles: Fix overflow caused by RangeControl tooltip. ([65875](https://github.com/WordPress/gutenberg/pull/65875))
+- ToggleGroupControl: Don't set value on focus after a reset. ([66151](https://github.com/WordPress/gutenberg/pull/66151))
+
+#### Interactivity API
+- Allow "default" suffix values. ([65815](https://github.com/WordPress/gutenberg/pull/65815))
+- Correctly handle lazily added, deeply nested properties with `deepMerge()`. ([65465](https://github.com/WordPress/gutenberg/pull/65465))
+- Improvements to the experimental full-page navigation. ([64067](https://github.com/WordPress/gutenberg/pull/64067))
+
+#### Site Editor
+- Fix site editor back button visual regressions. ([66166](https://github.com/WordPress/gutenberg/pull/66166))
+- Zoom Out: When double clicking a template while zoomed out , reset zoom level instead of showing dialog. ([65963](https://github.com/WordPress/gutenberg/pull/65963))
+
+#### CSS & Styling
+- Editor: Prevent wrapping text when showing icon labels in header. ([66038](https://github.com/WordPress/gutenberg/pull/66038))
+- Update z-index hierarchy. ([65626](https://github.com/WordPress/gutenberg/pull/65626))
+
+#### Data Views
+- Data Views list layout: Revise for improved text truncation. ([65376](https://github.com/WordPress/gutenberg/pull/65376))
+- Fix: Pattern rendering issue. ([66022](https://github.com/WordPress/gutenberg/pull/66022))
+
+#### Extensibility
+- Rename wp_register_block_template() to register_block_template(). ([65958](https://github.com/WordPress/gutenberg/pull/65958))
+
+#### Post Editor
+- Fix "typewriter" spacing style application. ([65885](https://github.com/WordPress/gutenberg/pull/65885))
+
+#### Synced Patterns
+- Pattern block: Ensure consistent editing of overrides in Write Mode. ([65408](https://github.com/WordPress/gutenberg/pull/65408))
+
+
+### Accessibility
+
+#### Post Editor
+- Fix meta boxes accessibility. ([65466](https://github.com/WordPress/gutenberg/pull/65466))
+- Fix navigate regions shortcuts on the back button WP logo slot. ([63611](https://github.com/WordPress/gutenberg/pull/63611))
+- Improve PostURL terminology and accessibility. ([63669](https://github.com/WordPress/gutenberg/pull/63669))
+- Match visible label of search inputs with their actual label. ([65458](https://github.com/WordPress/gutenberg/pull/65458))
+
+#### Components
+- Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941))
+- ToggleGroupControl: Don't autoselect option on first group focus. ([65892](https://github.com/WordPress/gutenberg/pull/65892))
+- Tooltip: Add aria-describedby to anchor only if not redundant. ([65989](https://github.com/WordPress/gutenberg/pull/65989))
+
+#### Typography
+- Revert the "Manage fonts" button in Global Styles. ([66107](https://github.com/WordPress/gutenberg/pull/66107))
+
+
+### Performance
+
+#### Interactivity API
+- Leverage scheduler.yield in splitTask when available. ([66001](https://github.com/WordPress/gutenberg/pull/66001))
+
+
+### Documentation
+
+- Add heading level curation documentation. ([66076](https://github.com/WordPress/gutenberg/pull/66076))
+- Components: Set up README auto-generator. ([66035](https://github.com/WordPress/gutenberg/pull/66035))
+- Contrast notes: Update 4.6:1 note with further context. ([66168](https://github.com/WordPress/gutenberg/pull/66168))
+- Data-basics/4-building-a-create-page-form is ready now. ([66100](https://github.com/WordPress/gutenberg/pull/66100))
+- Docs: env: Expand examples of path syntax. ([65972](https://github.com/WordPress/gutenberg/pull/65972))
+- Updated several typos in client-assets.php file. ([66084](https://github.com/WordPress/gutenberg/pull/66084))
+- Use correct label in PHP Backport documentation. ([65908](https://github.com/WordPress/gutenberg/pull/65908))
+- add: Usage examples in core editor documentation. ([63768](https://github.com/WordPress/gutenberg/pull/63768))
+
+
+### Code Quality
+
+- .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145))
+- Add missing CHANGELOG entries for #64067. ([66120](https://github.com/WordPress/gutenberg/pull/66120))
+- Button: Move to stricter lint rule for 40px size adherence. ([65840](https://github.com/WordPress/gutenberg/pull/65840))
+- Private APIs: Remove obsolete try/catch block. ([65898](https://github.com/WordPress/gutenberg/pull/65898))
+- Remove clip and -webkit-clip for block-library common.scss. ([66144](https://github.com/WordPress/gutenberg/pull/66144))
+- Remove unused select toolbar code. ([65834](https://github.com/WordPress/gutenberg/pull/65834))
+- Simplify logical expression in `InitPatternModal`. ([65922](https://github.com/WordPress/gutenberg/pull/65922))
+- Theme JSON: Remove redundant check and relocate $selectors assignment. ([66154](https://github.com/WordPress/gutenberg/pull/66154))
+- Type the router package. ([65854](https://github.com/WordPress/gutenberg/pull/65854))
+
+#### Global Styles
+- Edit Site: Avoid recomputing variations when no theme variations. ([66137](https://github.com/WordPress/gutenberg/pull/66137))
+- Edit Site: Remove redundant state in `StyleVariationsContainer`. ([66130](https://github.com/WordPress/gutenberg/pull/66130))
+
+#### Block Library
+- Post Terms: Remove unnecessary 'get_the_terms' call. ([65867](https://github.com/WordPress/gutenberg/pull/65867))
+- Query Loop Block: Remove redundant sticky state. ([66126](https://github.com/WordPress/gutenberg/pull/66126))
+
+#### Components
+- Clean up Tabs animation logic. ([65878](https://github.com/WordPress/gutenberg/pull/65878))
+- SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988))
+
+#### Post Editor
+- Block Visibility: Add end-to-end test. ([65880](https://github.com/WordPress/gutenberg/pull/65880))
+
+#### Zoom Out
+- Fix components coding standards in Zoom Out Toolbar. ([65858](https://github.com/WordPress/gutenberg/pull/65858))
+
+
+### Tools
+
+#### Testing
+- Add an end-to-end test to check the interactions in write mode. ([65819](https://github.com/WordPress/gutenberg/pull/65819))
+- Composite: Add legacy unit tests to stable version. ([65952](https://github.com/WordPress/gutenberg/pull/65952))
+- Fix end-to-end Storybook configuration. ([66089](https://github.com/WordPress/gutenberg/pull/66089))
+- Tests: Add unit tests for image rendering. ([66010](https://github.com/WordPress/gutenberg/pull/66010))
+- Zoom out: End-to-end test - zoomed out mode zooms the canvas. ([65943](https://github.com/WordPress/gutenberg/pull/65943))
+- e2e: Fix Block Visibility test. ([65939](https://github.com/WordPress/gutenberg/pull/65939))
+
+#### Build Tooling
+- Dedupe npm packages. ([65913](https://github.com/WordPress/gutenberg/pull/65913))
+- Update and align babel dependencies version. ([65949](https://github.com/WordPress/gutenberg/pull/65949))
+- Update node-fetch to 2.7.0. ([65957](https://github.com/WordPress/gutenberg/pull/65957))
+- Update npm lockfile to version 3. ([65923](https://github.com/WordPress/gutenberg/pull/65923))
+- Upgrade browserslist and webcompat data packages. ([65926](https://github.com/WordPress/gutenberg/pull/65926))
+
+
+### Various
+
+- Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995))
+- Interactivity: Update preact packages. ([66008](https://github.com/WordPress/gutenberg/pull/66008))
+
+#### Patterns
+- Revert "Pattern block: Ensure consistent editing of overrides in Write Mode (#65408)". ([65953](https://github.com/WordPress/gutenberg/pull/65953))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AnmolVerma404: Fix: Return result from wp_register_block_template function. ([66102](https://github.com/WordPress/gutenberg/pull/66102))
+- @leemyongpakva: Consistent with block-development-examples data-basics-59c8f8. ([65995](https://github.com/WordPress/gutenberg/pull/65995))
+- @matt-west: Icons: Update cloud upload and add cloud download icon. ([65906](https://github.com/WordPress/gutenberg/pull/65906))
+- @mediaformat: .screen-reader-text CSS update for responsive-block-control style.scss. ([66145](https://github.com/WordPress/gutenberg/pull/66145))
+- @vk17-starlord: Fixed : Modal dialog: Small improvement for elementShouldBeHidden. ([65941](https://github.com/WordPress/gutenberg/pull/65941))
+- @Vrishabhsk: SearchControl: Deprecate onClose prop. ([65988](https://github.com/WordPress/gutenberg/pull/65988))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @akasunil @Aljullu @andrewserong @AnmolVerma404 @ciampo @DaniGuardiola @dhruvang21 @draganescu @getdave @hbhalodia @jameskoster @jasmussen @jeryj @jsnajdr @leemyongpakva @MaggieCabrera @Mamaduka @matiasbenedetto @matt-west @mcsf @mediaformat @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @ramonjd @renatho @richtabor @rmccue @sabernhardt @SantosGuillamot @shail-mehta @sirreal @stokesman @t-hamano @talldan @troychaplin @tyxla @up1512001 @vk17-starlord @Vrishabhsk @westonruter @youknowriad
+
+
+
+
+= 19.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Added keywords to query loop block. ([65515](https://github.com/WordPress/gutenberg/pull/65515))
+- Added: DropZone when sitelogo is present. ([65596](https://github.com/WordPress/gutenberg/pull/65596))
+- Avatar: Add block example. ([65509](https://github.com/WordPress/gutenberg/pull/65509))
+- Buttons: add box-sizing:Border-box rule. ([65716](https://github.com/WordPress/gutenberg/pull/65716))
+- Comment Author Name: Add block example. ([65558](https://github.com/WordPress/gutenberg/pull/65558))
+- Comment Content: Add block example. ([65559](https://github.com/WordPress/gutenberg/pull/65559))
+- Comment Date: Add block example. ([65632](https://github.com/WordPress/gutenberg/pull/65632))
+- Comment Edit/Reply Links: Add block examples. ([65601](https://github.com/WordPress/gutenberg/pull/65601))
+- Comment Pagination: Add previous and next link block examples. ([65633](https://github.com/WordPress/gutenberg/pull/65633))
+- Comments Pagination Numbers: Add block example. ([65635](https://github.com/WordPress/gutenberg/pull/65635))
+- Comments Title: Add block example. ([65557](https://github.com/WordPress/gutenberg/pull/65557))
+- File block: Allow content only editing. ([65787](https://github.com/WordPress/gutenberg/pull/65787))
+- Navigation block: Use `apply_block_hooks_to_content()`. ([65703](https://github.com/WordPress/gutenberg/pull/65703))
+- Post Navigation Link: Add block examples. ([65552](https://github.com/WordPress/gutenberg/pull/65552))
+- Query No Results: Add block example. ([65555](https://github.com/WordPress/gutenberg/pull/65555))
+- Query Pagination Numbers: Add block example. ([65636](https://github.com/WordPress/gutenberg/pull/65636))
+- Query Pagination: Add block example. ([65556](https://github.com/WordPress/gutenberg/pull/65556))
+- Query Title: Add block example. ([65554](https://github.com/WordPress/gutenberg/pull/65554))
+- Revert: Time To Read: Add block example. ([65510](https://github.com/WordPress/gutenberg/pull/65510))
+- Table of Contents: Try maintaining block example attributes. ([65549](https://github.com/WordPress/gutenberg/pull/65549))
+- Term Description: Add block example. ([65553](https://github.com/WordPress/gutenberg/pull/65553))
+- Time To Read: Add block example. ([65512](https://github.com/WordPress/gutenberg/pull/65512))
+
+#### Components
+-  Light branding for the reference site. ([65764](https://github.com/WordPress/gutenberg/pull/65764))
+- BorderControl: Use `__next40pxDefaultSize` prop for Reset button. ([65682](https://github.com/WordPress/gutenberg/pull/65682))
+- Composite: Always await initial render setup in unit tests. ([65823](https://github.com/WordPress/gutenberg/pull/65823))
+- DatePicker: Use compact button size. ([65653](https://github.com/WordPress/gutenberg/pull/65653))
+- Guide: Update finish button to use the new default size. ([65680](https://github.com/WordPress/gutenberg/pull/65680))
+- Navigator: Add support for exit animation. ([64777](https://github.com/WordPress/gutenberg/pull/64777))
+- Remove `useEvent` from components package. ([65388](https://github.com/WordPress/gutenberg/pull/65388))
+- Simplify MenuGroup component styles. ([65561](https://github.com/WordPress/gutenberg/pull/65561))
+- Storybook: Allow for case-agnostic filtering of icons. ([65780](https://github.com/WordPress/gutenberg/pull/65780))
+- ToggleGroupControl: Improve animation. ([65175](https://github.com/WordPress/gutenberg/pull/65175))
+- Tabs: Tweak sizing and overflow behavior of TabList. ([64371](https://github.com/WordPress/gutenberg/pull/64371))
+- Tabs: Unify vertical tabs styles. ([65387](https://github.com/WordPress/gutenberg/pull/65387))
+
+#### Zoom Out
+- Add prompt to zoom out separator. ([65392](https://github.com/WordPress/gutenberg/pull/65392))
+- Make sections `contentOnly` in Zoom Out. ([65396](https://github.com/WordPress/gutenberg/pull/65396))
+- Move the toggle button to before the device preview dropdown. ([65446](https://github.com/WordPress/gutenberg/pull/65446))
+- Only show zoom out inserters on block selection. ([65759](https://github.com/WordPress/gutenberg/pull/65759))
+
+#### Block Editor
+- Hide block transforms in contentOnly mode for non-content blocks. ([65394](https://github.com/WordPress/gutenberg/pull/65394))
+- Inserter: Always show the list of all patterns in the inserter. ([65611](https://github.com/WordPress/gutenberg/pull/65611))
+- MediaPlaceholder: Use InputControl in URL popover. ([65656](https://github.com/WordPress/gutenberg/pull/65656))
+- Use proper named `File` when uploading external images. ([65693](https://github.com/WordPress/gutenberg/pull/65693))
+
+#### Data Views
+- DataForm - Add combined fields support. ([65399](https://github.com/WordPress/gutenberg/pull/65399))
+- Filter UI: Remove popover max height. ([65835](https://github.com/WordPress/gutenberg/pull/65835))
+- Dataviews configuration dropdown: Remove style overrides. ([65373](https://github.com/WordPress/gutenberg/pull/65373))
+
+#### Post Editor
+- Edit Post: Remove unnecessary effect in `InitPatternModal`. ([65734](https://github.com/WordPress/gutenberg/pull/65734))
+- Editor: Consistent external media pre-publish image/button sizes. ([65668](https://github.com/WordPress/gutenberg/pull/65668))
+
+#### Global Styles
+- Editor Canvas: Tweak close button. ([65694](https://github.com/WordPress/gutenberg/pull/65694))
+- Style book: Create static categories. ([65430](https://github.com/WordPress/gutenberg/pull/65430))
+
+#### Edit Mode
+- Update tools menus with Write / Design order. ([65721](https://github.com/WordPress/gutenberg/pull/65721))
+
+#### Select Mode
+- Select Mode: Updates to the block toolbar. ([65485](https://github.com/WordPress/gutenberg/pull/65485))
+- Select Mode: Use the content-only behavior in select mode. ([65204](https://github.com/WordPress/gutenberg/pull/65204))
+
+#### Icons
+- Adds envelope icon. ([65638](https://github.com/WordPress/gutenberg/pull/65638))
+
+#### Site Editor
+- Global Styles: Remove navigator screen overrides. ([65522](https://github.com/WordPress/gutenberg/pull/65522))
+- Command Palette: "Add new page" within the site editor creates new page in site editor. ([65476](https://github.com/WordPress/gutenberg/pull/65476))
+- Update elevation in the site editor. ([65410](https://github.com/WordPress/gutenberg/pull/65410))
+
+#### Block bindings
+- Connected blocks, add backdrop-color. ([65233](https://github.com/WordPress/gutenberg/pull/65233))
+
+#### Extensibility
+- Stabilize the PreSavePost and SavePost filters. ([64198](https://github.com/WordPress/gutenberg/pull/64198))
+
+#### Base Styles
+- Base styles: Add type tokens. ([65418](https://github.com/WordPress/gutenberg/pull/65418))
+
+#### Tools
+- Composer: Allow composer/installers 2.x. ([65356](https://github.com/WordPress/gutenberg/pull/65356))
+
+#### Block hooks
+- Hooks: Add support for async filters and actions. ([64204](https://github.com/WordPress/gutenberg/pull/64204))
+
+### New APIs
+
+- Revert "Make `wordpress/fields` a private package". ([65477](https://github.com/WordPress/gutenberg/pull/65477))
+- Stabilise role attribute property. ([65484](https://github.com/WordPress/gutenberg/pull/65484))
+
+#### Block bindings
+- Open the stable editor APIs. ([65713](https://github.com/WordPress/gutenberg/pull/65713))
+
+#### Components
+- Navigator: Stabilize and export APIs. ([64613](https://github.com/WordPress/gutenberg/pull/64613))
+
+### Bug Fixes
+
+#### Components
+- Block Editor: Validate options for the 'HeadingLevelDropdown' component. ([65425](https://github.com/WordPress/gutenberg/pull/65425))
+- Composite: Fix legacy implementation passing store prop. ([65821](https://github.com/WordPress/gutenberg/pull/65821))
+- Composite: Make items tabbable if active element gets removed. ([65720](https://github.com/WordPress/gutenberg/pull/65720))
+- Navigator: Fix isInitial logic. ([65527](https://github.com/WordPress/gutenberg/pull/65527))
+- Restore accidentally removed entries in changelog (components package). ([65804](https://github.com/WordPress/gutenberg/pull/65804))
+- useToolsPanel: Calculate derived state in reducer to prevent too many renders. ([65564](https://github.com/WordPress/gutenberg/pull/65564))
+- useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state. ([65494](https://github.com/WordPress/gutenberg/pull/65494))
+
+#### Zoom Out
+- Fix focus loss when deleting selected block in zoom out mode. ([65761](https://github.com/WordPress/gutenberg/pull/65761))
+- Handle zoom out when changing device preview. ([65444](https://github.com/WordPress/gutenberg/pull/65444))
+- Hide Zoom Out Inserters when dragging into canvas. ([65789](https://github.com/WordPress/gutenberg/pull/65789))
+- Makes spacing consistent in zoom out vertical toolbar. ([63994](https://github.com/WordPress/gutenberg/pull/63994))
+- Remove one occurrence of the verb Toggle from Zoom out control. ([65609](https://github.com/WordPress/gutenberg/pull/65609))
+- Reset zoom out level when device type is changed. ([65652](https://github.com/WordPress/gutenberg/pull/65652))
+- Resize cover block only in normal mode. ([65731](https://github.com/WordPress/gutenberg/pull/65731))
+
+#### Block Editor
+- Fix unable to remove empty blocks on merge. ([65262](https://github.com/WordPress/gutenberg/pull/65262))
+- Inserter: Fix Block visibility manager. ([65700](https://github.com/WordPress/gutenberg/pull/65700))
+- Link autocompleter: Decode post title HTML entities. ([65589](https://github.com/WordPress/gutenberg/pull/65589))
+- Openverse: Prevent multiple insertions during upload. ([65719](https://github.com/WordPress/gutenberg/pull/65719))
+- Paste Handler: Try to fix pasting text with formatting. ([63779](https://github.com/WordPress/gutenberg/pull/63779))
+- Remove user-select:Text. ([65662](https://github.com/WordPress/gutenberg/pull/65662))
+- Editor: Remove edit template menu item from block settings menu in blocks outside template. ([65560](https://github.com/WordPress/gutenberg/pull/65560))
+- Top Toolbar: Show document bar when no block is selected even if block tools are expanded. ([65839](https://github.com/WordPress/gutenberg/pull/65839))
+- Revert "Allow multi-select on iOS Safari/touch devices". ([65414](https://github.com/WordPress/gutenberg/pull/65414))
+
+#### Global Styles
+- Avoid errors when a fontSize preset is not available. ([65791](https://github.com/WordPress/gutenberg/pull/65791))
+- Fix: Shadow/Font size preset panel crashes the editor. ([65765](https://github.com/WordPress/gutenberg/pull/65765))
+- Revert "Font Library: Group fonts by source (#63211)". ([65590](https://github.com/WordPress/gutenberg/pull/65590))
+- Tweak entity save panel button. ([65695](https://github.com/WordPress/gutenberg/pull/65695))
+
+#### Block bindings
+- Fix editing protected custom fields in block bindings. ([65658](https://github.com/WordPress/gutenberg/pull/65658))
+- Fix showing bindings field values in theme templates. ([65639](https://github.com/WordPress/gutenberg/pull/65639))
+- Only pass context included in `usesContext` from rich text component. ([65618](https://github.com/WordPress/gutenberg/pull/65618))
+- Use `registry` instead of `select` in `canUserEditValue`. ([65659](https://github.com/WordPress/gutenberg/pull/65659))
+
+#### Block Library
+- Categories block: Escape label. ([65540](https://github.com/WordPress/gutenberg/pull/65540))
+- Search block: Reset size correctly when clearing unit control. ([65468](https://github.com/WordPress/gutenberg/pull/65468))
+- Social Links: Fix block appender size. ([65769](https://github.com/WordPress/gutenberg/pull/65769))
+
+#### Site Editor
+- Fix: Makes edit mode selector persistent in top toolbar mode. ([65511](https://github.com/WordPress/gutenberg/pull/65511))
+- Global styles: Do not navigate twice to home screen when opening the sidebar. ([65523](https://github.com/WordPress/gutenberg/pull/65523))
+- Make resizable frame compatible with RTL languages. ([65545](https://github.com/WordPress/gutenberg/pull/65545))
+- Command Palette: Fix "Add new page" command for hybrid theme. ([65534](https://github.com/WordPress/gutenberg/pull/65534))
+- Export `useResizeObserver` React Native version directly. ([65588](https://github.com/WordPress/gutenberg/pull/65588))
+- Fix `useResizeObserver` bugs. ([65389](https://github.com/WordPress/gutenberg/pull/65389))
+- Fix aria-checked attribute not set for plugin settings buttons in Options dropdown. ([65667](https://github.com/WordPress/gutenberg/pull/65667))
+- Revert "useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state". ([65533](https://github.com/WordPress/gutenberg/pull/65533))
+
+#### Focus Mode
+- Limit zoom out toggle to specific post types. ([65732](https://github.com/WordPress/gutenberg/pull/65732))
+
+#### List View
+- Fix miscolored icons. ([65707](https://github.com/WordPress/gutenberg/pull/65707))
+
+#### Media
+- Fix output buffering for cross-origin isolation. ([65701](https://github.com/WordPress/gutenberg/pull/65701))
+
+#### Block Directory
+- Fix downloadable block item alignment. ([65677](https://github.com/WordPress/gutenberg/pull/65677))
+
+#### Typography
+- Remove additional Typeset screen and surface typesets in the typography panel. ([65579](https://github.com/WordPress/gutenberg/pull/65579))
+
+#### Widgets Editor
+- Fixed the focus cutoff of the editor buttons in the widgets editor. ([65395](https://github.com/WordPress/gutenberg/pull/65395))
+
+#### Post Editor
+- Omit meta boxes on “design” type posts. ([64990](https://github.com/WordPress/gutenberg/pull/64990))
+
+#### Data Views
+- Fix grid layout padding on small screens. ([64878](https://github.com/WordPress/gutenberg/pull/64878))
+
+#### Build Tools
+- Babel preset: Add missing pkg files. ([65481](https://github.com/WordPress/gutenberg/pull/65481))
+- Temp disable test for Classic Block Media issue. ([65793](https://github.com/WordPress/gutenberg/pull/65793))
+
+#### Select Mode
+- Select Mode: Blocks outside the main sections root should be disabled. ([65518](https://github.com/WordPress/gutenberg/pull/65518))
+- Select Mode: Prevent the inbetween inserter from triggering within sections. ([65529](https://github.com/WordPress/gutenberg/pull/65529))
+
+### Accessibility
+
+#### Post Editor
+- Make the Settings panel toggle button show its keyboard shortcut in its tooltip. ([65322](https://github.com/WordPress/gutenberg/pull/65322))
+- Resizable Editor: Make the editor resizable with arrow keys. ([65546](https://github.com/WordPress/gutenberg/pull/65546))
+
+#### Components
+- ToggleGroupControl: Fix arrow key navigation in RTL. ([65735](https://github.com/WordPress/gutenberg/pull/65735))
+
+#### Zoom Out
+- Don't show tooltip in zoom out toggle button when showIconLabels is true. ([65573](https://github.com/WordPress/gutenberg/pull/65573))
+
+#### Block Library
+- Improve the Query Loop block display settings labels. ([65524](https://github.com/WordPress/gutenberg/pull/65524))
+
+#### Block Editor
+- Updates LayoutTypeSwitcher to use ToggleGroupControl. ([65498](https://github.com/WordPress/gutenberg/pull/65498))
+
+#### Code Quality
+- A11y: Move script module HTML printing to 6.7 compat. ([65620](https://github.com/WordPress/gutenberg/pull/65620))
+- Update to use a11y script module package in Core. ([65539](https://github.com/WordPress/gutenberg/pull/65539))
+
+#### Site Editor
+- Update icon in home button. ([65497](https://github.com/WordPress/gutenberg/pull/65497))
+
+### Performance
+
+#### Block Library
+- Script Modules: Centralize (re)registration. ([65460](https://github.com/WordPress/gutenberg/pull/65460))
+
+#### Block Editor
+- Remove editorMode from blockProps. ([65326](https://github.com/WordPress/gutenberg/pull/65326))
+- Move insertionPoint state to block-editor store/rename existing insertionPoint to insertionCue. ([65098](https://github.com/WordPress/gutenberg/pull/65098))
+
+
+### Documentation
+
+- Block Bindings: Add `@since` tag in bindings apis JSDocs. ([65796](https://github.com/WordPress/gutenberg/pull/65796))
+- Block Editor: Fix README for FontFamilyControl component. ([65660](https://github.com/WordPress/gutenberg/pull/65660))
+- Composite: Add "With Tooltip" storybook example. ([65817](https://github.com/WordPress/gutenberg/pull/65817))
+- DataViews documentation: Add high-level graph explaining DataViews and data sources interaction. ([65457](https://github.com/WordPress/gutenberg/pull/65457))
+- Docs/interactivity api router package readme. ([62062](https://github.com/WordPress/gutenberg/pull/62062))
+- Docs: Remove PHPDoc for non-existing parameter. ([65640](https://github.com/WordPress/gutenberg/pull/65640))
+- Navigator: Fix README heading hierarchy. ([65763](https://github.com/WordPress/gutenberg/pull/65763))
+- Packages documentation: Minor typo corrections. ([65664](https://github.com/WordPress/gutenberg/pull/65664))
+- Plugin: Fix small typo in readme.txt file. ([65634](https://github.com/WordPress/gutenberg/pull/65634))
+- RichText: Fix JSDoc block typos. ([65607](https://github.com/WordPress/gutenberg/pull/65607))
+- SelectControl: Add story for `prefix` slot. ([65730](https://github.com/WordPress/gutenberg/pull/65730))
+- Update JSDoc block for RichText package to-html-string. ([65688](https://github.com/WordPress/gutenberg/pull/65688))
+- Update block-filters.md. ([64959](https://github.com/WordPress/gutenberg/pull/64959))
+- iAPI: Refactor types and add a "Core Concepts - Using TypeScript" guide. ([64577](https://github.com/WordPress/gutenberg/pull/64577))
+
+### Code Quality
+
+#### Components
+- BorderBoxControl: Promote to stable. ([65586](https://github.com/WordPress/gutenberg/pull/65586))
+- BorderControl: Promote to stable. ([65475](https://github.com/WordPress/gutenberg/pull/65475))
+- BoxControl: Promote to stable. ([65469](https://github.com/WordPress/gutenberg/pull/65469))
+- Cleanup unused `ToggleGroupControl` configuration values. ([65456](https://github.com/WordPress/gutenberg/pull/65456))
+- Fix `useInstanceId` hook references. ([65733](https://github.com/WordPress/gutenberg/pull/65733))
+- Navigator: Internal refactor in preparation for stabilization. ([65671](https://github.com/WordPress/gutenberg/pull/65671))
+- Navigator: Mark experimental exports as deprecated. ([65802](https://github.com/WordPress/gutenberg/pull/65802))
+- SearchControl: Fix rest props mutation. ([65740](https://github.com/WordPress/gutenberg/pull/65740))
+- `ToggleGroupControl`: Clean up animation logic. ([65808](https://github.com/WordPress/gutenberg/pull/65808))
+
+#### Block Editor
+- Button: Add `__next40pxDefaultSize` in block-editor 6. ([65742](https://github.com/WordPress/gutenberg/pull/65742))
+- Decouple "zoom/scaling the canvas" from zoom out mode (without mode rename). ([65482](https://github.com/WordPress/gutenberg/pull/65482))
+- Don't memoize 'getContentLockingParent' and 'getParentSectionBlock' selectors. ([65649](https://github.com/WordPress/gutenberg/pull/65649))
+- Inserter: Update how we compute the actual insertion point for blocks. ([65490](https://github.com/WordPress/gutenberg/pull/65490))
+- LinkControl: Fix unneeded `props` prop. ([65650](https://github.com/WordPress/gutenberg/pull/65650))
+- Navigator: Use stable export instead of experimental export. ([65753](https://github.com/WordPress/gutenberg/pull/65753))
+- Button: Add `__next40pxDefaultSize` in dataviews, reusable-blocks, etc. ([65715](https://github.com/WordPress/gutenberg/pull/65715))
+- Fix: Button Replace remaining 40px default size violations [Block Directory]. ([65467](https://github.com/WordPress/gutenberg/pull/65467))
+- Fix: Button Replace remaining 40px default size violations [Block Editor 2]. ([65308](https://github.com/WordPress/gutenberg/pull/65308))
+- Fix: Button Replace remaining 40px default size violations [Block Editor 3]. ([65225](https://github.com/WordPress/gutenberg/pull/65225))
+- Fix: Button Replace remaining 40px default size violations [Block Editor 5]. ([65361](https://github.com/WordPress/gutenberg/pull/65361))
+- Fix: Button: Replace remaining 40px default size violation [Edit Site 1]. ([65226](https://github.com/WordPress/gutenberg/pull/65226))
+- Fix: Button: Replace remaining 40px default size violation [Edit Site 3]. ([65309](https://github.com/WordPress/gutenberg/pull/65309))
+
+#### Block bindings
+- Only pass `usesContext` properties to editor APIs. ([65661](https://github.com/WordPress/gutenberg/pull/65661))
+- Refactor passing select and dispatch instead of full Registry. ([65710](https://github.com/WordPress/gutenberg/pull/65710))
+- Unify logic in `getPostMetaFields` function. ([65462](https://github.com/WordPress/gutenberg/pull/65462))
+
+#### Post Editor
+- Customize widgets, edit post: Refactor Button to new sizes. ([65807](https://github.com/WordPress/gutenberg/pull/65807))
+- Header: Remove unused property `isZoomedOutView` in `useSelect()`. ([65628](https://github.com/WordPress/gutenberg/pull/65628))
+
+#### Block Library
+- Blocks: Don't memoize 'hasContentRoleAttribute' selector. ([65617](https://github.com/WordPress/gutenberg/pull/65617))
+- Blocks: Update '__experimentalHasContentRoleAttribute' deprecation. ([65616](https://github.com/WordPress/gutenberg/pull/65616))
+
+#### Global Styles
+- Global style revisions: Remove unnecessary `goTo` navigation call. ([65810](https://github.com/WordPress/gutenberg/pull/65810))
+
+#### Site Editor
+- Edit Site: Fix `useLink` prop mutation. ([65739](https://github.com/WordPress/gutenberg/pull/65739))
+
+#### Data Views
+- Migrate store/actions from editor package to fields package. ([65289](https://github.com/WordPress/gutenberg/pull/65289))
+
+
+### Tools
+
+#### Testing
+- Block Bindings: Refactor end-to-end tests. ([65526](https://github.com/WordPress/gutenberg/pull/65526))
+- GH Actions: Run the tests against PHP 8.3. ([65357](https://github.com/WordPress/gutenberg/pull/65357))
+- Revert "Temp disable test for Classic Block Media issue.". ([65809](https://github.com/WordPress/gutenberg/pull/65809))
+
+#### Build Tooling
+- Composer: Prevent a lock file from being created. ([65359](https://github.com/WordPress/gutenberg/pull/65359))
+- Composer: Update minimum required PHPUnit Polyfills. ([65355](https://github.com/WordPress/gutenberg/pull/65355))
+- PHP unit tests: Remove WP_RUN_CORE_TESTS const. ([65631](https://github.com/WordPress/gutenberg/pull/65631))
+- DEWP: Check for magic comments before minification. ([65582](https://github.com/WordPress/gutenberg/pull/65582))
+- DEWP: Handle cyclical module dependencies. ([65291](https://github.com/WordPress/gutenberg/pull/65291))
+- Label enforcer: Add `Gutenberg plugin` to the list of single required labels. ([65253](https://github.com/WordPress/gutenberg/pull/65253))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @auareyou:  Light branding for the reference site. ([65764](https://github.com/WordPress/gutenberg/pull/65764))
+- @crisbusquets: Adds envelope icon. ([65638](https://github.com/WordPress/gutenberg/pull/65638))
+- @davy440: Update block-filters.md. ([64959](https://github.com/WordPress/gutenberg/pull/64959))
+- @dhruvang21: Fix: Button Replace remaining 40px default size violations [Block Editor 2]. ([65308](https://github.com/WordPress/gutenberg/pull/65308))
+- @PARTHVATALIYA: Fix: Button Replace remaining 40px default size violations [Block Editor 5]. ([65361](https://github.com/WordPress/gutenberg/pull/65361))
+- @spadeshoe: Updates LayoutTypeSwitcher to use ToggleGroupControl. ([65498](https://github.com/WordPress/gutenberg/pull/65498))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @amitraj2203 @anomiex @auareyou @carolinan @cbravobernal @ciampo @crisbusquets @DaniGuardiola @davy440 @dhruvang21 @djcowan @draganescu @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @jrfnl @jsnajdr @juanmaguitar @keoshi @kevin940726 @louwie17 @luisherranz @Mamaduka @manzoorwanijk @matiasbenedetto @michalczaplinski @mirka @mtias @noisysocks @oandregal @ockham @PARTHVATALIYA @peterwilsoncc @philwp @priethor @ramonjd @SantosGuillamot @shail-mehta @sirreal @Soean @spadeshoe @stokesman @swissspidy @t-hamano @talldan @tyxla @vcanales @vipul0425 @youknowriad
+
+
+= 19.3.0 =
+
+## Changelog
+
+### Features
+
+#### Zoom Out
+- Remove experimental flag. ([65404](https://github.com/WordPress/gutenberg/pull/65404))
+
+### Enhancements
+
+- Create Block: Update the minimum required PHP version to 7.2. ([65166](https://github.com/WordPress/gutenberg/pull/65166))
+- DataViews: remove unused `.dataviews-view-table__cell-content-wrapper:Empty` style rule. ([65084](https://github.com/WordPress/gutenberg/pull/65084))
+- Media Utils: Add TypeScript support and export more utils. ([64784](https://github.com/WordPress/gutenberg/pull/64784))
+- Media placeholders: Add "drag" to the text. ([65149](https://github.com/WordPress/gutenberg/pull/65149))
+- Restore: Move to trash button in Document settings. ([65087](https://github.com/WordPress/gutenberg/pull/65087))
+- Inspector Controls: Use custom block name in inspector controls when available. ([65398](https://github.com/WordPress/gutenberg/pull/65398))
+- Icons: Adds bell and bell-unread icons. ([65324](https://github.com/WordPress/gutenberg/pull/65324))
+- Editor topbar: Reorder the actions on the right. ([65163](https://github.com/WordPress/gutenberg/pull/65163))
+- Patterns: Add opt out preference to the 'Choose a Pattern' modal when adding a page. ([65026](https://github.com/WordPress/gutenberg/pull/65026))
+- Locked Templates: Blocks with contentOnly locking should not be transformable. ([64917](https://github.com/WordPress/gutenberg/pull/64917))
+- Block Locking: Add border to Replace item in content only image toolbar. ([64849](https://github.com/WordPress/gutenberg/pull/64849))
+- DataViews: Improve UX of bundled views for Pages. ([65295](https://github.com/WordPress/gutenberg/pull/65295))
+
+#### Components
+- Styling: Apply elevation scale in components package. ([65159](https://github.com/WordPress/gutenberg/pull/65159))
+- Tabs: Improve Tabs indicator animation and related utils. ([64926](https://github.com/WordPress/gutenberg/pull/64926))
+- Modal
+  - Add exit animation. ([65203](https://github.com/WordPress/gutenberg/pull/65203))
+  - Decrease close button size. ([65131](https://github.com/WordPress/gutenberg/pull/65131))
+- Navigator Screen: Warn if path doesn't follow a URL-like scheme. ([65231](https://github.com/WordPress/gutenberg/pull/65231))
+- Card: Update Card radius. ([65053](https://github.com/WordPress/gutenberg/pull/65053))
+- Combobox Control: Add placeholder attribute. ([65254](https://github.com/WordPress/gutenberg/pull/65254))
+
+#### Block Library
+- Allow dropping multiple images to the image block. ([65030](https://github.com/WordPress/gutenberg/pull/65030))
+- Categories List block: Add dropdown for taxonomies. ([65272](https://github.com/WordPress/gutenberg/pull/65272))
+- Image: Adds the block controls for uploading image. ([64320](https://github.com/WordPress/gutenberg/pull/64320))
+- Remove colons from control labels. ([65205](https://github.com/WordPress/gutenberg/pull/65205))
+- Terms List block: Add Categories-specific variation. ([65434](https://github.com/WordPress/gutenberg/pull/65434))
+
+#### Zoom Out
+- Add Zoom Out toggle to editor header when experiment enabled. ([65183](https://github.com/WordPress/gutenberg/pull/65183))
+- Add prompt for drag and drop in Patterns tab in Zoom Out mode. ([65115](https://github.com/WordPress/gutenberg/pull/65115))
+- Close inserter on exiting Zoom Out to edit. ([65194](https://github.com/WordPress/gutenberg/pull/65194))
+- Show top level sections in List View. ([65202](https://github.com/WordPress/gutenberg/pull/65202))
+- Try vertical displacement when dragging a pattern between existing patterns/sections. ([63896](https://github.com/WordPress/gutenberg/pull/63896))
+
+#### Block Editor
+- Link Editing: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- Drag and Drop: When dragging a mix of video, audio, and image blocks, create individual blocks as appropriate. ([65144](https://github.com/WordPress/gutenberg/pull/65144))
+- URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+- Normalize block inspector controls spacing. ([64526](https://github.com/WordPress/gutenberg/pull/64526))
+
+#### Post Editor
+- Add new Media section to preferences modal. ([64846](https://github.com/WordPress/gutenberg/pull/64846))
+- DocumentBar: Replace icon with post type label. ([65170](https://github.com/WordPress/gutenberg/pull/65170))
+- Page editor: Double-click to edit template part. ([65024](https://github.com/WordPress/gutenberg/pull/65024))
+- Post publish upload media dialog: Handle more block types. ([65122](https://github.com/WordPress/gutenberg/pull/65122))
+
+#### Block bindings
+- Populate block context with inherited post type from template slug. ([65062](https://github.com/WordPress/gutenberg/pull/65062))
+- Try gap 0 on attribute items. ([65277](https://github.com/WordPress/gutenberg/pull/65277))
+- Use post meta label from `register_meta` in block bindings workflows. ([65099](https://github.com/WordPress/gutenberg/pull/65099))
+
+#### Global Styles
+- Refactor site background controls and move site global styles into Background group. ([65304](https://github.com/WordPress/gutenberg/pull/65304))
+- Spacing control: Replace sides dropdwon with link button. ([65193](https://github.com/WordPress/gutenberg/pull/65193))
+
+#### Interactivity API
+- Refactor context proxies. ([64713](https://github.com/WordPress/gutenberg/pull/64713))
+- Update: Rephrase "Force page reload" and move to Advanced. ([65081](https://github.com/WordPress/gutenberg/pull/65081))
+
+#### REST API
+- Global Styles: Allow read access to users with `edit_posts` capabilities. ([65071](https://github.com/WordPress/gutenberg/pull/65071))
+- Query loop / Post template: Enable post format filter. ([64167](https://github.com/WordPress/gutenberg/pull/64167))
+
+### New APIs
+- Add @wordpress/fields package.
+  - Introduce the package. ([65230](https://github.com/WordPress/gutenberg/pull/65230))
+  - Make the package private. ([65269](https://github.com/WordPress/gutenberg/pull/65269))
+- Interactivity API: Add `getServerState()` and `getServerContext()`. ([65151](https://github.com/WordPress/gutenberg/pull/65151))
+
+### Bug Fixes
+
+- Align popover alt variant styling with block toolbar. ([65263](https://github.com/WordPress/gutenberg/pull/65263))
+- Compose: Correctly call timer cleanup in 'useFocusOnMount'. ([65184](https://github.com/WordPress/gutenberg/pull/65184))
+- Fix some docblock types related to the Template Registration API. ([65187](https://github.com/WordPress/gutenberg/pull/65187))
+- Fix the issue where block spacing control not shown. ([65371](https://github.com/WordPress/gutenberg/pull/65371))
+- Fix unintentional block toolbar shadow. ([65182](https://github.com/WordPress/gutenberg/pull/65182))
+- Fix: Moving a page to the trash on the site editor does not goes back to the pages list. ([65119](https://github.com/WordPress/gutenberg/pull/65119))
+- Fix: Moving the last page item to the the trash causes a crash. ([65236](https://github.com/WordPress/gutenberg/pull/65236))
+- Preferences: Fix back button on mobile. ([65141](https://github.com/WordPress/gutenberg/pull/65141))
+- Post Summary Panel: Restore `height:Auto` for toggle buttons. ([65362](https://github.com/WordPress/gutenberg/pull/65362))
+- Fix Tabs styling in Font Library modal. ([65330](https://github.com/WordPress/gutenberg/pull/65330))
+- E2E: Change deprecated social icons for standard in end-to-end. ([65312](https://github.com/WordPress/gutenberg/pull/65312))
+- Typography: Make title blocks apply typographic styles consistently. ([65307](https://github.com/WordPress/gutenberg/pull/65307))
+- Target Hints REST API: Add missing param sanitization. ([65280](https://github.com/WordPress/gutenberg/pull/65280))
+- Interactivity API: Update iterable signals when `deepMerge()` adds new properties. ([65135](https://github.com/WordPress/gutenberg/pull/65135))
+- Navigation Menus: Typography styling support to the navigation submenu block. ([65060](https://github.com/WordPress/gutenberg/pull/65060))
+- Grid: In RTL languages, the resize handles point in the opposite direction. ([64995](https://github.com/WordPress/gutenberg/pull/64995))
+- Block Locking: Fix Content Only Toolbar icon focus style. ([64940](https://github.com/WordPress/gutenberg/pull/64940))
+- Image: Fix resizing to max width in classic themes. ([64819](https://github.com/WordPress/gutenberg/pull/64819))
+- Meta Boxes: Try split content view. ([64351](https://github.com/WordPress/gutenberg/pull/64351))
+- Distraction Free: Fix blurry edge along editor header. ([64277](https://github.com/WordPress/gutenberg/pull/64277))
+
+#### Block Library
+- Comments Pagination: Fix warning returned by comments pagination blocks. ([65435](https://github.com/WordPress/gutenberg/pull/65435))
+- Cover: Explicitly set isUserOverlayColor to false when media is updated. ([65105](https://github.com/WordPress/gutenberg/pull/65105))
+- Disallow setting grid block rows/columns to zero. ([65217](https://github.com/WordPress/gutenberg/pull/65217))
+- Fix image block crash. ([65222](https://github.com/WordPress/gutenberg/pull/65222))
+- Fix: Buttons block: Block spacing value does not apply to both vertical and horizontal alignment. ([64971](https://github.com/WordPress/gutenberg/pull/64971))
+- Fix: Embed blocks: Figcaption inserted via toolbar not nested within figure element - #64960. ([64970](https://github.com/WordPress/gutenberg/pull/64970))
+- Image cropping: Skip making an API request if there are no changes to apply. ([65384](https://github.com/WordPress/gutenberg/pull/65384))
+- Comments Pagination: Pass the comments query `paged` arg to functions  `get_next_comments_link` and `get_previous_comments_link`. ([63698](https://github.com/WordPress/gutenberg/pull/63698))
+- Query Loop
+  - Default to querying posts when on singular content. ([65067](https://github.com/WordPress/gutenberg/pull/65067))
+  - Remove is_singular() check and fix test. ([65483](https://github.com/WordPress/gutenberg/pull/65483))
+  - Format controls: Fix JavaScript error. ([65551](https://github.com/WordPress/gutenberg/pull/65551))
+
+#### Block Editor
+- Inserter: Fix loading indicator for reusable blocks. ([64839](https://github.com/WordPress/gutenberg/pull/64839))
+- Normalize spacing in Layout hook controls. ([65132](https://github.com/WordPress/gutenberg/pull/65132))
+- Pattern Inserter: Fix pattern list overflow. ([65192](https://github.com/WordPress/gutenberg/pull/65192))
+- Remove reset styles RTL from the iframe. ([65150](https://github.com/WordPress/gutenberg/pull/65150))
+- Revert "Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (https://github.com/WordPress/gutenberg/pull/64048)" ([65208](https://github.com/WordPress/gutenberg/pull/65208))
+
+#### Components
+- BoxControl: Unify input filed width whether linked or not. ([65348](https://github.com/WordPress/gutenberg/pull/65348))
+- ComboboxControl: Add more unit tests. ([65255](https://github.com/WordPress/gutenberg/pull/65255))
+- Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- Tabs: Fix vertical indicator. ([65385](https://github.com/WordPress/gutenberg/pull/65385))
+
+#### Block bindings
+- Fix empty strings placeholders in post meta bindings. ([65089](https://github.com/WordPress/gutenberg/pull/65089))
+- Remove key fallback in bindings get values and rely on source label. ([65517](https://github.com/WordPress/gutenberg/pull/65517))
+- Fix passing bindings context to `canUserEditValue`. ([65599](https://github.com/WordPress/gutenberg/pull/65599))
+- Prioritize existing placeholder over bindingsPlaceholder. ([65220](https://github.com/WordPress/gutenberg/pull/65220))
+- Only use `canUserEditValue` when `setValues` is defined. ([65565](https://github.com/WordPress/gutenberg/pull/65566))
+
+#### Zoom Out
+- Force device type to Desktop whenever zoom out is invoked. ([64476](https://github.com/WordPress/gutenberg/pull/64476))
+- Hide toolbar icon on smaller viewports. ([65437](https://github.com/WordPress/gutenberg/pull/65437))
+- Remove zoom out toggle when editor is not iframed. ([65452](https://github.com/WordPress/gutenberg/pull/65452))
+
+### Accessibility
+
+- A11y: Add script-module. ([65101](https://github.com/WordPress/gutenberg/pull/65101))
+- Interactivity API: Use a11y Script Module in Gutenberg. ([65123](https://github.com/WordPress/gutenberg/pull/65123))
+- Script Modules API: Print script module live regions HTML in page HTML. ([65380](https://github.com/WordPress/gutenberg/pull/65380))
+- DatePicker: Better hover/focus styles. ([65117](https://github.com/WordPress/gutenberg/pull/65117))
+- Form Input: Don't use `flex-direction: Row-reverse` for checkbox field. ([64232](https://github.com/WordPress/gutenberg/pull/64232))
+- Navigation Menus: Remove Warning and add notice for Navigation. ([63921](https://github.com/WordPress/gutenberg/pull/63921))
+- Global Styles: Fix the shadows Range control accessibility and usability. ([63908](https://github.com/WordPress/gutenberg/pull/63908))
+- Block Editor: Fix accessibility of the hooked blocks toggles. ([63133](https://github.com/WordPress/gutenberg/pull/63133))
+
+
+#### Post Editor
+- Support keyboard resizing of meta boxes pane. ([65325](https://github.com/WordPress/gutenberg/pull/65325))
+- Swap position of the Pre-publish checks buttons. ([65317](https://github.com/WordPress/gutenberg/pull/65317))
+
+
+### Performance
+
+- Core Data: Batch remaining actions in resolvers. ([65176](https://github.com/WordPress/gutenberg/pull/65176))
+- Block Editor: Use static access for selector in 'useZoomOutModeExit'. ([65337](https://github.com/WordPress/gutenberg/pull/65337))
+- Editor: Optimize global styles permission check. ([65177](https://github.com/WordPress/gutenberg/pull/65177))
+
+
+### Experiments
+
+- Block bindings REST API: Bring bindings UI in Site Editor. ([64072](https://github.com/WordPress/gutenberg/pull/64072))
+
+
+### Documentation
+
+- Add JSDoc block for getSectionRootClientId in block editor package. ([65219](https://github.com/WordPress/gutenberg/pull/65219))
+- ButtonGroup: Fix story to show what the component does. ([65336](https://github.com/WordPress/gutenberg/pull/65336))
+- DataViews storybook
+  - Better styles for combined fields story. ([65078](https://github.com/WordPress/gutenberg/pull/65078))
+  - Enable all layouts for combined fields storybook. ([65082](https://github.com/WordPress/gutenberg/pull/65082))
+- Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- Docs: Update the content of the API version 3 section in the Block API Reference. ([65375](https://github.com/WordPress/gutenberg/pull/65375))
+- Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+
+
+### Code Quality
+
+- Components: Transition to the new 40px default size.
+  - Button:
+    - Add __next40pxDefaultSize for files in editor 3. ([65139](https://github.com/WordPress/gutenberg/pull/65139))
+    - Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+    - Add props for buttons in editor 1. ([65068](https://github.com/WordPress/gutenberg/pull/65068))
+    - Add props for buttons in editor 2. ([65083](https://github.com/WordPress/gutenberg/pull/65083))
+    - Fix: Replace remaining 40px default size violations [Block Editor 4]. ([65257](https://github.com/WordPress/gutenberg/pull/65257))
+    - Fix: Replace remaining 40px default size violation [Block library 3]. ([65110](https://github.com/WordPress/gutenberg/pull/65110))
+    - Fix: Replace remaining 40px default size violation [Block library 4]. ([65143](https://github.com/WordPress/gutenberg/pull/65143))
+    - Fix: Replace remaining 40px default size violation [Block library]. ([65075](https://github.com/WordPress/gutenberg/pull/65075))
+    - Fix: Replace remaining 40px default size violation [Edit Site 2]. ([65258](https://github.com/WordPress/gutenberg/pull/65258))
+    - Fix: Replace remaining 40px default size violations [Block library 1]. ([65033](https://github.com/WordPress/gutenberg/pull/65033))
+    - Fix: Replace remaining 40px default size violations [Block Editor 1]. ([65034](https://github.com/WordPress/gutenberg/pull/65034))
+  - BoxControl
+    - Add lint rule for 40px size prop usage. ([65341](https://github.com/WordPress/gutenberg/pull/65341))
+   - DimensionsPanel: Apply 40px default size to UI when no spacing preset is available. ([65300](https://github.com/WordPress/gutenberg/pull/65300))
+- Add `useEvent` and revamped `useResizeObserver` to `@wordpress/compose`. ([64943](https://github.com/WordPress/gutenberg/pull/64943))
+- DataViews: Use Dropdown for views configuration dialog. ([65314](https://github.com/WordPress/gutenberg/pull/65314))
+- Platform docs: Upgrade dependencies. ([65445](https://github.com/WordPress/gutenberg/pull/65445))
+- Rename edit-post__fade-in-animation and unify keyframe definitions. ([65377](https://github.com/WordPress/gutenberg/pull/65377))
+- Update minimum required version in PHP. ([65301](https://github.com/WordPress/gutenberg/pull/65301))
+- Editor: Use hooks instead of HoC in `BlockManager`. ([65349](https://github.com/WordPress/gutenberg/pull/65349))
+- Data Views Fields: Migrate store and actions from editor package to fields package. ([65261](https://github.com/WordPress/gutenberg/pull/65261))
+- Plugin: Remove 'function_exists' checks for methods with 'gutenberg' prefix. ([65260](https://github.com/WordPress/gutenberg/pull/65260))
+- Global Styles: Update REST controller override method and backport changes from Core. ([65259](https://github.com/WordPress/gutenberg/pull/65259))
+- Patterns: Remove unused method returned from 'mapSelect'. ([65073](https://github.com/WordPress/gutenberg/pull/65073))
+- Embed: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+
+#### Components
+- BoxControl: Fix critical error when null value is passed. ([65287](https://github.com/WordPress/gutenberg/pull/65287))
+- Composite:
+  - Deprecate legacy, unstable version. ([63572](https://github.com/WordPress/gutenberg/pull/63572))
+  - Remove store prop and useCompositeStore hook. ([64723](https://github.com/WordPress/gutenberg/pull/64723))
+  - Stabilize APIs. ([63569](https://github.com/WordPress/gutenberg/pull/63569))
+- `@wordpress/components`: Add local copy of `use-lilius`. ([65097](https://github.com/WordPress/gutenberg/pull/65097))
+
+#### Block bindings
+- Always prioritize using context in post meta source logic. ([65449](https://github.com/WordPress/gutenberg/pull/65449))
+- Improve getRegisteredPostMeta resolver. ([65450](https://github.com/WordPress/gutenberg/pull/65450))
+- Remove extra filtering of empty sources. ([65447](https://github.com/WordPress/gutenberg/pull/65447))
+
+#### Block Editor
+- Remove the 'PrivateInserter' component. ([65111](https://github.com/WordPress/gutenberg/pull/65111))
+- Use the tooltip from a button in 'ButtonBlockAppender'. ([65113](https://github.com/WordPress/gutenberg/pull/65113))
+- Remove unused css selectors. ([65276](https://github.com/WordPress/gutenberg/pull/65276))
+
+### Tools
+
+- Scripts: Update stylelint dependency and the default configuration. ([64828](https://github.com/WordPress/gutenberg/pull/64828))
+- Styleling config: Fix stylelint configuration missing files for npm. ([65313](https://github.com/WordPress/gutenberg/pull/65313))
+
+#### Build Tooling
+- Build Plugin: Simplify and improve zip contents. ([65232](https://github.com/WordPress/gutenberg/pull/65232))
+- Build zip artifact on release and wp production branches. ([65471](https://github.com/WordPress/gutenberg/pull/65471))
+- Build: Include Core blocks' `render` and `variations` files. ([63311](https://github.com/WordPress/gutenberg/pull/63311))
+- Script Modules
+  - Prepare build for more script modules. ([65064](https://github.com/WordPress/gutenberg/pull/65064))
+  - Remove babel from script-modules build. ([65279](https://github.com/WordPress/gutenberg/pull/65279))
+  - Remove es-module shims and importmap-polyfill. ([65210](https://github.com/WordPress/gutenberg/pull/65210))
+- Correctly generate PHP files for server-side rendering of blocks on Windows OS. ([65248](https://github.com/WordPress/gutenberg/pull/65248))
+- Packages: Only add polyfills where needed. ([65292](https://github.com/WordPress/gutenberg/pull/65292))
+- Switch from UglifyJS to Terser to build the polyfill script. ([65278](https://github.com/WordPress/gutenberg/pull/65278))
+
+#### Testing
+- Unit tests: Mock matchMedia to enforce prefers-reduce-motion. ([65438](https://github.com/WordPress/gutenberg/pull/65438))
+- Upgrade Playwright to v1.47. ([65156](https://github.com/WordPress/gutenberg/pull/65156))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AKSHAT2802: Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+- @devansh016: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- @dhruvang21: Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- @farid-hadi: Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- @greenworld: Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+- @louwie17: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+- @rahulharpal1603: URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AKSHAT2802 @Aljullu @andrewserong @carolinan @cbravobernal @ciampo @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @devansh016 @dhruvang21 @ellatrix @farid-hadi @getdave @gigitux @greenworld @gziolo @hbhalodia @jameskoster @jasmussen @javierarce @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @louwie17 @madhusudhand @MaggieCabrera @Mamaduka @mikeybinns @mirka @ntsekouras @oandregal @ockham @peterwilsoncc @rahulharpal1603 @ramonjd @richtabor @rohitmathur-7 @SantosGuillamot @scruffian @sgomes @sirreal @stokesman @swissspidy @t-hamano @talldan @vipul0425 @zaguiini
+
+
+= 19.2.0 =
+
+## Changelog
+
+### Enhancements
+
+- Add: Reorder control at the field level on the new view configuration UI. ([64381](https://github.com/WordPress/gutenberg/pull/64381))
+- Core Data Types: `recordId` can be a number. ([64796](https://github.com/WordPress/gutenberg/pull/64796))
+- Core Data: Derive collection totals for unbound queries. ([64772](https://github.com/WordPress/gutenberg/pull/64772))
+- Create Block: Set minimum supported WordPress version to 6.6. ([64920](https://github.com/WordPress/gutenberg/pull/64920))
+- Dataviews Filter search widget: Do not use Composite store. ([64985](https://github.com/WordPress/gutenberg/pull/64985))
+- Dataviews list view: Do not use Composite store. ([64987](https://github.com/WordPress/gutenberg/pull/64987))
+- Move bulk actions menu to the Footer, consolidate with floating toolbar and total items display. ([64268](https://github.com/WordPress/gutenberg/pull/64268))
+- Try: Update block warnings. ([64997](https://github.com/WordPress/gutenberg/pull/64997))
+
+#### Components
+- Add variants to InputControl prefix/suffix wrappers. ([64824](https://github.com/WordPress/gutenberg/pull/64824))
+- AlignmentMatrixControl: Do not use Composite store. ([64850](https://github.com/WordPress/gutenberg/pull/64850))
+- CircularOptionPicker: Stop using composite store. ([64833](https://github.com/WordPress/gutenberg/pull/64833))
+- Composite: Accept store props on top level component. ([64832](https://github.com/WordPress/gutenberg/pull/64832))
+- DataViews: Adds two new stories for edge cases. ([64975](https://github.com/WordPress/gutenberg/pull/64975))
+- Decrease standard padding to 12px. ([64708](https://github.com/WordPress/gutenberg/pull/64708))
+- DropdownMenuV2: Add GroupLabel subcomponent. ([64854](https://github.com/WordPress/gutenberg/pull/64854))
+- DropdownMenuV2: Update animation. ([64868](https://github.com/WordPress/gutenberg/pull/64868))
+- DropdownMenuV2: Use overloaded naming conventions. ([64654](https://github.com/WordPress/gutenberg/pull/64654))
+- InputControl: Tighten gap between input and prefix/suffix. ([64908](https://github.com/WordPress/gutenberg/pull/64908))
+- Navigator: Polish Storybook examples. ([64798](https://github.com/WordPress/gutenberg/pull/64798))
+- Navigator: Remove location history, simplify internal logic. ([64675](https://github.com/WordPress/gutenberg/pull/64675))
+- UnitControl: Update unit select styles. ([64712](https://github.com/WordPress/gutenberg/pull/64712))
+- Update hard-coded border-radius instances. ([64693](https://github.com/WordPress/gutenberg/pull/64693))
+- Update modal animation. ([64580](https://github.com/WordPress/gutenberg/pull/64580))
+
+#### Block bindings
+- Add warning in attributes connected to invalid sources. ([65002](https://github.com/WordPress/gutenberg/pull/65002))
+- Allow only admin users to create and modify bindings by default. ([64570](https://github.com/WordPress/gutenberg/pull/64570))
+- Lock editing in fields in editor if meta fields panel is opened. ([64738](https://github.com/WordPress/gutenberg/pull/64738))
+- Rely on `Text` component instead of `Truncate` in bindings panel. ([65007](https://github.com/WordPress/gutenberg/pull/65007))
+- Remove `getPlaceholder` API and rely on `key` argument or source label. ([64910](https://github.com/WordPress/gutenberg/pull/64910))
+
+#### Data Views
+- Add: Reorder control at the field level on the new view configuration UI. ([64381](https://github.com/WordPress/gutenberg/pull/64381))
+- Dataviews Filter search widget: Do not use Composite store. ([64985](https://github.com/WordPress/gutenberg/pull/64985))
+- Dataviews list view: Do not use Composite store. ([64987](https://github.com/WordPress/gutenberg/pull/64987))
+- Move bulk actions menu to the Footer, consolidate with floating toolbar and total items display. ([64268](https://github.com/WordPress/gutenberg/pull/64268))
+
+#### Block Editor
+- Add 'Reset' option to MediaReplaceFlow component. ([64826](https://github.com/WordPress/gutenberg/pull/64826))
+- Block Patterns List: Do not use Composite store. ([64983](https://github.com/WordPress/gutenberg/pull/64983))
+- Remove the Shuffle block toolbar button. ([64954](https://github.com/WordPress/gutenberg/pull/64954))
+- Show block icon in contentOnly toolbar. ([64694](https://github.com/WordPress/gutenberg/pull/64694))
+
+#### Block Library
+- Cover Block: Move Clear Media button from Inspector Controls to Block Controls. ([64630](https://github.com/WordPress/gutenberg/pull/64630))
+- Improve Social Icons setup and appending. ([64877](https://github.com/WordPress/gutenberg/pull/64877))
+- Pagination Block: Fix inconsistent margins between editor and frontend. ([64874](https://github.com/WordPress/gutenberg/pull/64874))
+- Tag Cloud: Improve state of block with no tags. ([63774](https://github.com/WordPress/gutenberg/pull/63774))
+
+#### Block Locking
+- ContentOnly: Add support for block styles on top-level contentOnly locked blocks. ([64872](https://github.com/WordPress/gutenberg/pull/64872))
+- Only show title in content only toolbar if has title value. ([64840](https://github.com/WordPress/gutenberg/pull/64840))
+- Remove ability to crop image if content only mode. ([64838](https://github.com/WordPress/gutenberg/pull/64838))
+- Rename Alt to Alternative Text in content only image toolbar. ([64841](https://github.com/WordPress/gutenberg/pull/64841))
+
+#### Interactivity API
+- Categories Block: Add iAPI directive for client-side routing. ([64907](https://github.com/WordPress/gutenberg/pull/64907))
+- Improve internal `deepMerge` function. ([64879](https://github.com/WordPress/gutenberg/pull/64879))
+
+#### Global Styles
+- Hide typeset button when there are no typesets available. ([64515](https://github.com/WordPress/gutenberg/pull/64515))
+- Use four color palette colors instead of five for useStylesPreviewColors. ([64700](https://github.com/WordPress/gutenberg/pull/64700))
+
+#### Zoom Out
+- Add "Edit" button to Zoom Out mode toolbar. ([64571](https://github.com/WordPress/gutenberg/pull/64571))
+- Double click block to exit zoom out mode. ([64573](https://github.com/WordPress/gutenberg/pull/64573))
+
+#### Design Tools
+- Comment Edit Link: Add Border Block Support. ([64239](https://github.com/WordPress/gutenberg/pull/64239))
+- Comment Reply Link: Add border support. ([64271](https://github.com/WordPress/gutenberg/pull/64271))
+
+#### Icons
+- Add thumbs up and down icons. ([65004](https://github.com/WordPress/gutenberg/pull/65004))
+
+#### Site Editor
+- Apply radius scale in the editor. ([64930](https://github.com/WordPress/gutenberg/pull/64930))
+
+#### Post Editor
+- Post publish upload media dialog: Handle upload errors. ([64823](https://github.com/WordPress/gutenberg/pull/64823))
+
+#### Typography
+- Fluid typography: Allow individual preset overrides. ([64790](https://github.com/WordPress/gutenberg/pull/64790))
+
+#### Media
+- Add experiment for client-side media processing. ([64650](https://github.com/WordPress/gutenberg/pull/64650))
+
+#### REST API
+- Core Data: Resolve entity collection user permissions. ([64504](https://github.com/WordPress/gutenberg/pull/64504))
+
+#### Block Transforms
+- Details block: Add transform from any block type. ([63422](https://github.com/WordPress/gutenberg/pull/63422))
+
+
+### New APIs
+
+#### Extensibility
+- Editor: Add extensibility to PreviewOptions v2. ([64644](https://github.com/WordPress/gutenberg/pull/64644))
+
+
+### Bug Fixes
+
+- Add safeguard to `mediaUploadMiddleware`. ([64843](https://github.com/WordPress/gutenberg/pull/64843))
+- Allow multi-select on iOS Safari/touch devices. ([63671](https://github.com/WordPress/gutenberg/pull/63671))
+- Core Data: Fix the 'query._fields' property check inside 'getEntityRecord' resolver. ([65079](https://github.com/WordPress/gutenberg/pull/65079))
+- Fix Modify content-locked menu item not showing if the block is not selected. ([61605](https://github.com/WordPress/gutenberg/pull/61605))
+- Fix editor error in Safari due to availability of checkVisibility method. ([65069](https://github.com/WordPress/gutenberg/pull/65069))
+- Fix: Pagination arrows are pointing in the wrong direction in RTL languages. ([64962](https://github.com/WordPress/gutenberg/pull/64962))
+- Footnotes: Only replace attribute if footnotes were detected. ([63935](https://github.com/WordPress/gutenberg/pull/63935))
+- Paste: Fix image paste from Google Forms. ([64502](https://github.com/WordPress/gutenberg/pull/64502))
+- Revert Focus pattern inserter search when activating zoom out inserter. ([64748](https://github.com/WordPress/gutenberg/pull/64748))
+- Try: Update block warnings. ([64997](https://github.com/WordPress/gutenberg/pull/64997))
+
+#### Block Library
+- De-duplicate block toolbar icons for patterns. ([65054](https://github.com/WordPress/gutenberg/pull/65054))
+- Fix: Page list: Pages without a title has no link text. ([64297](https://github.com/WordPress/gutenberg/pull/64297))
+- Position BlockToolbar below all of the selected block's descendants. ([62711](https://github.com/WordPress/gutenberg/pull/62711))
+- Site Logo Block: Fix non-admin users seeing zero character. ([65010](https://github.com/WordPress/gutenberg/pull/65010))
+- Site Logo: Fix loader alignment issue. ([64919](https://github.com/WordPress/gutenberg/pull/64919))
+- Template Part: Hide Advanced panel for non-admin users. ([64721](https://github.com/WordPress/gutenberg/pull/64721))
+- Video Block: Fix layout issue. ([64834](https://github.com/WordPress/gutenberg/pull/64834))
+
+#### Components
+- ColorPalette utils: Do not normalize undefined color values. ([64969](https://github.com/WordPress/gutenberg/pull/64969))
+- DatePicker: Restore round radius for event dot. ([65031](https://github.com/WordPress/gutenberg/pull/65031))
+- DropdownMenuV2: Fix active and focus-visible item glitches. ([64942](https://github.com/WordPress/gutenberg/pull/64942))
+- DropdownMenuV2: Remove flashing styles when moving focus with keyboard. ([64873](https://github.com/WordPress/gutenberg/pull/64873))
+- Fixes "delete" action in DataViews' storybook. ([64901](https://github.com/WordPress/gutenberg/pull/64901))
+- Navigator: Fix isInitial, refine focusSelector logic. ([64786](https://github.com/WordPress/gutenberg/pull/64786))
+- Range control: Restore bottom margin rule. ([65035](https://github.com/WordPress/gutenberg/pull/65035))
+
+#### Post Editor
+- Add back editor-post-locked-modal to post lock component. ([64257](https://github.com/WordPress/gutenberg/pull/64257))
+- Add context to `View` string in post actions. ([65046](https://github.com/WordPress/gutenberg/pull/65046))
+- Apply space below content using a pseudo-element instead of padding-bottom. ([64639](https://github.com/WordPress/gutenberg/pull/64639))
+- Post Title: Fix pasting in Safari. ([64671](https://github.com/WordPress/gutenberg/pull/64671))
+- Post Title: Move selection at the end after pasting over the text. ([64665](https://github.com/WordPress/gutenberg/pull/64665))
+- Post publish upload media dialog: Fix silent failure. ([64741](https://github.com/WordPress/gutenberg/pull/64741))
+
+#### Data Views
+- DataViews: Fix field reordering and visibility logic. ([64999](https://github.com/WordPress/gutenberg/pull/64999))
+- Fix actions scrim in list layout. ([64696](https://github.com/WordPress/gutenberg/pull/64696))
+- Fix data views style inheritance. ([64933](https://github.com/WordPress/gutenberg/pull/64933))
+- Fix: Impossible to see pagination on viewports between small and medium. ([64844](https://github.com/WordPress/gutenberg/pull/64844))
+- List layout: Update broken styles. ([64837](https://github.com/WordPress/gutenberg/pull/64837))
+
+#### Block Editor
+- Add conditions when the Shuffle button can be displayed. ([64888](https://github.com/WordPress/gutenberg/pull/64888))
+- Inserter: Fix subtle media insertion error. ([65057](https://github.com/WordPress/gutenberg/pull/65057))
+- Post Editor: Fix click space after post content to append. ([64992](https://github.com/WordPress/gutenberg/pull/64992))
+- Writing flow: Fix triple click inside text blocks. ([64928](https://github.com/WordPress/gutenberg/pull/64928))
+
+#### Global Styles
+- Adjust spacing of background panel. ([64880](https://github.com/WordPress/gutenberg/pull/64880))
+- Cast globalFluid value to boolean. ([64882](https://github.com/WordPress/gutenberg/pull/64882))
+- Fix site editor broken when fontWeight is not defined or is an integer in theme.json or theme styles. ([64953](https://github.com/WordPress/gutenberg/pull/64953))
+- Fixes the default fluid value on the UI based on the global typography fluid value. ([64803](https://github.com/WordPress/gutenberg/pull/64803))
+
+#### Block bindings
+- Change placeholder when attribute is bound. ([64903](https://github.com/WordPress/gutenberg/pull/64903))
+- Fix empty custom fields not being editable in bindings. ([64881](https://github.com/WordPress/gutenberg/pull/64881))
+
+#### CSS & Styling
+- Featured Image Block: Reduce CSS specificity. ([64463](https://github.com/WordPress/gutenberg/pull/64463))
+- Retain the same specificity for non iframed selectors. ([64534](https://github.com/WordPress/gutenberg/pull/64534))
+
+#### Patterns
+- Pass 'blocks' as inner blocks value. ([65029](https://github.com/WordPress/gutenberg/pull/65029))
+
+#### Synced Patterns
+- Pattern: Don't render block controls when an entity is missing. ([65028](https://github.com/WordPress/gutenberg/pull/65028))
+
+#### Site Editor
+- DataViews: Fix pattern title direction in RTL languages. ([64967](https://github.com/WordPress/gutenberg/pull/64967))
+
+#### Typography
+- Site Title, Post Title: Fix typography for blocks with `a` children. ([64911](https://github.com/WordPress/gutenberg/pull/64911))
+
+#### NUX
+- Fix visibility of the template Welcome Guide in the Site Editor. ([64789](https://github.com/WordPress/gutenberg/pull/64789))
+
+#### Document Settings
+- Fix: Adjust Site URL Styles to Prevent Overflow in Pre-Publish Component. ([64745](https://github.com/WordPress/gutenberg/pull/64745))
+
+#### Zoom Out
+- Focus selected block in editor canvas when clicking edit button on zoom out mode toolbar. ([64725](https://github.com/WordPress/gutenberg/pull/64725))
+
+#### Templates API
+- Make plugin-registered templates overriden by themes to fall back to plugin-registered title and description. ([64610](https://github.com/WordPress/gutenberg/pull/64610))
+
+#### Block Style Variations
+- Block Styles: Ensure unique classname generation for variations. ([64511](https://github.com/WordPress/gutenberg/pull/64511))
+
+#### Distraction Free
+- Make Distraction Free not conditional on viewport width. ([63949](https://github.com/WordPress/gutenberg/pull/63949))
+
+#### Media
+- Limit the max width of image to its container size. ([63341](https://github.com/WordPress/gutenberg/pull/63341))
+
+
+### Accessibility
+
+#### Components
+- AlignmentMatrixControl: Simplify styles and markup. ([64827](https://github.com/WordPress/gutenberg/pull/64827))
+- TimePicker: Use ToggleGroupControl for AM/PM toggle. ([64800](https://github.com/WordPress/gutenberg/pull/64800))
+
+#### Block Editor
+- Layout content and wide width controls: Remove confusing icon and clarify labels. ([64891](https://github.com/WordPress/gutenberg/pull/64891))
+
+#### Font Library
+- Font Library Modal: Group font variations as a list. ([64029](https://github.com/WordPress/gutenberg/pull/64029))
+
+#### Post Editor
+- Fix the post summary Status toggle button accessibility. ([63988](https://github.com/WordPress/gutenberg/pull/63988))
+
+
+### Performance
+
+- Core Data: Avoid loops in 'registry.batch' calls. ([64955](https://github.com/WordPress/gutenberg/pull/64955))
+- Core data: Performance: Fix receive user permissions. ([64894](https://github.com/WordPress/gutenberg/pull/64894))
+- Reusable blocks: Fix performance of __experimentalGetAllowedPatterns. ([64871](https://github.com/WordPress/gutenberg/pull/64871))
+
+#### Site Editor
+- Add 'OPTIONS /page' to preloaded paths. ([64890](https://github.com/WordPress/gutenberg/pull/64890))
+- Editor: Don't use selector shortcuts for the Site data. ([64884](https://github.com/WordPress/gutenberg/pull/64884))
+
+#### Interactivity API
+- Prevent calling `proxifyContext` with context proxies inside `wp-context`. ([65090](https://github.com/WordPress/gutenberg/pull/65090))
+
+#### Block Library
+- Media & Text: Don't use background-image. ([64981](https://github.com/WordPress/gutenberg/pull/64981))
+
+#### Post Editor
+- Editor: Remove create template permission check in 'VisualEditor'. ([64905](https://github.com/WordPress/gutenberg/pull/64905))
+
+#### Block Editor
+- Inserter: Use lighter grammar parse to check allowed status. ([64902](https://github.com/WordPress/gutenberg/pull/64902))
+
+#### Patterns
+- Shuffle: Don't call '__experimentalGetAllowedPatterns' for every block. ([64736](https://github.com/WordPress/gutenberg/pull/64736))
+
+
+### Experiments
+
+#### Zoom Out
+- Add new zoom out experiment. ([65048](https://github.com/WordPress/gutenberg/pull/65048))
+- Remove the experiment that connects zoom out to the pattern inserter. ([65045](https://github.com/WordPress/gutenberg/pull/65045))
+
+
+### Documentation
+
+- Add a new section to the SlotFill reference to show how to conditionally render Fills. ([64807](https://github.com/WordPress/gutenberg/pull/64807))
+- Added Global Documentation in several php file. ([64956](https://github.com/WordPress/gutenberg/pull/64956))
+- Components: Move displayName assignment to top-level files. ([64793](https://github.com/WordPress/gutenberg/pull/64793))
+- Composite: Add context-forwarding with SlotFill example. ([65051](https://github.com/WordPress/gutenberg/pull/65051))
+- Composite: Fix Storybook docgen. ([64682](https://github.com/WordPress/gutenberg/pull/64682))
+- Corrected HTML Syntax for Closing Tags in api-reference.md file. ([64778](https://github.com/WordPress/gutenberg/pull/64778))
+- DataViews docs: Fix typo in `direction` values. ([64973](https://github.com/WordPress/gutenberg/pull/64973))
+- DataViews: Add story about combining fields. ([64984](https://github.com/WordPress/gutenberg/pull/64984))
+- DataViews: Document combined fields. ([64904](https://github.com/WordPress/gutenberg/pull/64904))
+- Dataviews docs: Layout properties checks and link. ([64918](https://github.com/WordPress/gutenberg/pull/64918))
+- Docs/iAPI: Fix wrong code snippets in API reference. ([64416](https://github.com/WordPress/gutenberg/pull/64416))
+- Docs: Update design resources to indicate edit isn't free. ([64792](https://github.com/WordPress/gutenberg/pull/64792))
+- PluginSidebarMoreMenuItem: Update example, screenshot and description. ([64761](https://github.com/WordPress/gutenberg/pull/64761))
+- Provide better examples and remove outdating site edit references for the MainDashboardButton SlotFill. ([64753](https://github.com/WordPress/gutenberg/pull/64753))
+- Removing ryanwelcher as a documentation codeowner because my inbox is dead. ([64762](https://github.com/WordPress/gutenberg/pull/64762))
+- Storybook: Hide deprecated `__next36pxDefaultSize` prop. ([64806](https://github.com/WordPress/gutenberg/pull/64806))
+- Update screenshot and description for PluginSidebar slot. ([64759](https://github.com/WordPress/gutenberg/pull/64759))
+- Update text to match code examples. ([64751](https://github.com/WordPress/gutenberg/pull/64751))
+- Update the import for PluginBlockSettingsMenuItem. ([64758](https://github.com/WordPress/gutenberg/pull/64758))
+- Updated Several Typos in Doc files. ([64787](https://github.com/WordPress/gutenberg/pull/64787))
+- [Docs]: Update Usage Example for block variation picker: Fix Import from Wrong Package. ([55555](https://github.com/WordPress/gutenberg/pull/55555))
+
+
+### Code Quality
+
+- Button: Add lint rule for 40px size prop usage. ([64835](https://github.com/WordPress/gutenberg/pull/64835))
+- Dataviews filter: Move resetValueOnSelect prop to combobox item. ([64852](https://github.com/WordPress/gutenberg/pull/64852))
+- Rename refs to fix tons of 'Mutating a value' errors in react-compiler. ([64718](https://github.com/WordPress/gutenberg/pull/64718))
+- Rich text: Add comment on placeholder approach. ([64945](https://github.com/WordPress/gutenberg/pull/64945))
+- SelectControl: Fix remaining 40px size violations. ([64831](https://github.com/WordPress/gutenberg/pull/64831))
+- Simplify useResizeObserver. ([64820](https://github.com/WordPress/gutenberg/pull/64820))
+- Typography: Backport comment changes only. ([64859](https://github.com/WordPress/gutenberg/pull/64859))
+- UnitControl: Add lint rule for 40px size prop usage. ([64520](https://github.com/WordPress/gutenberg/pull/64520))
+- UnitControl: Move to stricter lint rule for 40px size adherence. ([65017](https://github.com/WordPress/gutenberg/pull/65017))
+- Use rectIntersect instead of a custom argument to rectUnion. ([64855](https://github.com/WordPress/gutenberg/pull/64855))
+
+#### Site Editor
+- Add Custom Template modal: Do not use Composite store. ([65044](https://github.com/WordPress/gutenberg/pull/65044))
+- Add units to avoid console warning. ([64810](https://github.com/WordPress/gutenberg/pull/64810))
+- Edit Site Layout: Remove redundant fullResizer. ([64821](https://github.com/WordPress/gutenberg/pull/64821))
+- Remove unused 'useSiteEditorSettings' hook. ([64892](https://github.com/WordPress/gutenberg/pull/64892))
+- Style Book: Do not use Composite store. ([65047](https://github.com/WordPress/gutenberg/pull/65047))
+
+#### Block Editor
+- Block Inserter Listbox: Do not use Composite store. ([65042](https://github.com/WordPress/gutenberg/pull/65042))
+- Block Inserter Media List: Do not use Composite store. ([65043](https://github.com/WordPress/gutenberg/pull/65043))
+- Block Pattern Setup: Do not use Composite store. ([65039](https://github.com/WordPress/gutenberg/pull/65039))
+- Global Styles Shadow Panel: Do not use Composite store. ([65041](https://github.com/WordPress/gutenberg/pull/65041))
+- Pattern Transformations Menu: Do not use Composite store. ([65040](https://github.com/WordPress/gutenberg/pull/65040))
+
+#### Zoom Out
+- Add selector for getting section root clientId. ([65001](https://github.com/WordPress/gutenberg/pull/65001))
+- Don't pass 'rootClientId' to block lock selectors. ([64887](https://github.com/WordPress/gutenberg/pull/64887))
+- Fix error and improve privacy of sectionRootClientId setting. ([65000](https://github.com/WordPress/gutenberg/pull/65000))
+
+#### Components
+- AlignmentMatrixControl: Promote to stable. ([60913](https://github.com/WordPress/gutenberg/pull/60913))
+- Deprecate `DimensionControl`. ([64951](https://github.com/WordPress/gutenberg/pull/64951))
+
+#### Block Library
+- Block Bindings: Fix ESLint warnings. ([64684](https://github.com/WordPress/gutenberg/pull/64684))
+- Video Block: Remove custom CSS code for placeholder style. ([64861](https://github.com/WordPress/gutenberg/pull/64861))
+
+#### Global Styles
+- Allow referenced zero value and simplify getValueFromObjectPath calls. ([64836](https://github.com/WordPress/gutenberg/pull/64836))
+- Navigator: Replace deprecated NavigatorToParentButton with NavigatorBackButton. ([64775](https://github.com/WordPress/gutenberg/pull/64775))
+
+#### Block Directory
+- Downloadable Block List: Do not use composite store. ([65038](https://github.com/WordPress/gutenberg/pull/65038))
+
+#### Design Tools
+- Color panel hook: Rename to remove ambiguity. ([64993](https://github.com/WordPress/gutenberg/pull/64993))
+
+
+### Tools
+
+- Add remaining i18n rules to recommended ESLint ruleset. ([64710](https://github.com/WordPress/gutenberg/pull/64710))
+- Scripts: Added chunk filename in webpack configuration to avoid reading stale files. ([58176](https://github.com/WordPress/gutenberg/pull/58176))
+- Scripts: Import CSS files before optimization. ([61121](https://github.com/WordPress/gutenberg/pull/61121))
+- Scripts: Update `puppeteer-core` dependency. ([64597](https://github.com/WordPress/gutenberg/pull/64597))
+
+#### Testing
+- Flaky Test: Fix "Sorting" test in new-templates-list.spec.js. ([64776](https://github.com/WordPress/gutenberg/pull/64776))
+- Revert "Downgrade node 22(.5) unit tests to 22.4 (#63728)". ([63758](https://github.com/WordPress/gutenberg/pull/63758))
+
+
+### Various
+
+- Dataviews docs: Fixed property name for defaultLayouts settings. ([64897](https://github.com/WordPress/gutenberg/pull/64897))
+- task: Remove dcalhoun code owner. ([64886](https://github.com/WordPress/gutenberg/pull/64886))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @Imran92: Fix site editor broken when fontWeight is not defined or is an integer in theme.json or theme styles. ([64953](https://github.com/WordPress/gutenberg/pull/64953))
+- @jacobcassidy: Scripts: Update `puppeteer-core` dependency. ([64597](https://github.com/WordPress/gutenberg/pull/64597))
+- @jawadmalikdev: [Docs]: Update Usage Example for block variation picker: Fix Import from Wrong Package. ([55555](https://github.com/WordPress/gutenberg/pull/55555))
+- @lezama: Editor: Add extensibility to PreviewOptions v2. ([64644](https://github.com/WordPress/gutenberg/pull/64644))
+- @rithik56: Scripts: Added chunk filename in webpack configuration to avoid reading stale files. ([58176](https://github.com/WordPress/gutenberg/pull/58176))
+- @rohitmathur-7: Cover Block: Move Clear Media button from Inspector Controls to Block Controls. ([64630](https://github.com/WordPress/gutenberg/pull/64630))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @akasunil @Aljullu @andrewserong @atachibana @benoitchantre @carolinan @cbravobernal @ciampo @DAreRodz @dcalhoun @desrosj @dsas @ellatrix @fullofcaffeine @getdave @gziolo @Imran92 @imrraaj @jacobcassidy @jameskoster @jasmussen @jawadmalikdev @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @lezama @Mamaduka @matiasbenedetto @mirka @noisysocks @ntsekouras @oandregal @ockham @rafaelgallani @ramonjd @richtabor @rithik56 @rohitmathur-7 @ryanwelcher @SantosGuillamot @scruffian @sgomes @shail-mehta @spacedmonkey @stokesman @swissspidy @t-hamano @talldan @tjcafferkey @tyxla
+
+
+= 19.1.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Components
+- Allow `style` prop on `Popover`. ([64489](https://github.com/WordPress/gutenberg/pull/64489))
+- Add elevation scale. ([64108](https://github.com/WordPress/gutenberg/pull/64108))
+- Apply elevation scale to: Modal, Popover, and Snackbar components. ([64655](https://github.com/WordPress/gutenberg/pull/64655))
+- Ariakit: Update to v0.4.10. ([64637](https://github.com/WordPress/gutenberg/pull/64637))
+- DimensionControl: Add flag to remove bottom margin. ([64346](https://github.com/WordPress/gutenberg/pull/64346))
+- DropdownMenu V2: Use themed color variables. ([64647](https://github.com/WordPress/gutenberg/pull/64647))
+- Placeholders: Update radius temporarily. ([64672](https://github.com/WordPress/gutenberg/pull/64672))
+- Reduce gap between steps in SpacingSizesControl, add animation, remove first/last marks. ([63803](https://github.com/WordPress/gutenberg/pull/63803))
+- Textarea Control: Update styles. ([64586](https://github.com/WordPress/gutenberg/pull/64586))
+- Tools Panel: Sets column-gap to 16px for grid. ([64497](https://github.com/WordPress/gutenberg/pull/64497))
+- Update DropdownMenuV2 elevation, remove unused configuration value. ([64432](https://github.com/WordPress/gutenberg/pull/64432))
+- Update components radius. ([64368](https://github.com/WordPress/gutenberg/pull/64368))
+- Use `useStoreState()` instead of `store.useState()`. ([64648](https://github.com/WordPress/gutenberg/pull/64648))
+- Composite: Use internal context to consume composite store. ([64493](https://github.com/WordPress/gutenberg/pull/64493))
+- Default to new 40px size in the following:
+  - FocalPointPicker: ([64456](https://github.com/WordPress/gutenberg/pull/64456))
+  - QueryControls: ([64457](https://github.com/WordPress/gutenberg/pull/64457))
+
+#### Data Views
+- Do not display element descriptions in filters. ([64674](https://github.com/WordPress/gutenberg/pull/64674))
+- Apply minimal variant to pagination dropdown. ([63815](https://github.com/WordPress/gutenberg/pull/63815))
+- Update the style of the datetime fields to match the other types. ([64438](https://github.com/WordPress/gutenberg/pull/64438))
+- Use the fields array to define the order of the fields. ([64335](https://github.com/WordPress/gutenberg/pull/64335))
+- Make the move left/right controls in table header always available. ([64646](https://github.com/WordPress/gutenberg/pull/64646))
+- Support defining field headers/names as React elements. ([64642](https://github.com/WordPress/gutenberg/pull/64642))
+- Add marks to preview size control. ([64546](https://github.com/WordPress/gutenberg/pull/64546))
+- Move item size control to the new view configuration UI. ([64380](https://github.com/WordPress/gutenberg/pull/64380))
+- Update search appearance in narrow containers. ([64681](https://github.com/WordPress/gutenberg/pull/64681))
+- Quick edit additions:
+  - `comment_status` field. ([64370](https://github.com/WordPress/gutenberg/pull/64370))
+  - `status` field. ([64398](https://github.com/WordPress/gutenberg/pull/64398))
+  - 'Date' as field and `datetime` as field type. ([64267](https://github.com/WordPress/gutenberg/pull/64267))
+- Extensibility - allow unregistering of the following:
+  - Duplicate post action ([64441](https://github.com/WordPress/gutenberg/pull/64441))
+  - Duplicate pattern action ([64373](https://github.com/WordPress/gutenberg/pull/64373))
+  - Duplicate template part action ([64388](https://github.com/WordPress/gutenberg/pull/64388))
+  - Rename post action ([64366](https://github.com/WordPress/gutenberg/pull/64366))
+  - Reorder-page action ([64199](https://github.com/WordPress/gutenberg/pull/64199))
+  - View post action ([64467](https://github.com/WordPress/gutenberg/pull/64467))
+  - View post revisions action ([64464](https://github.com/WordPress/gutenberg/pull/64464))
+- Add missing styles and remove opinionated ones for generic usage. ([64711](https://github.com/WordPress/gutenberg/pull/64711))
+
+#### Block Library
+- Embed Block: Replace native input element with InputControl component. ([64668](https://github.com/WordPress/gutenberg/pull/64668))
+- Grid: Prevent highlight of cells when dragging a block if block type can't be dropped into grid. ([64290](https://github.com/WordPress/gutenberg/pull/64290))
+- Image block: Add reset button. ([64669](https://github.com/WordPress/gutenberg/pull/64669))
+- Overlay caption w. text-shadow. ([63471](https://github.com/WordPress/gutenberg/pull/63471))
+
+#### Design Tools
+- Background image: Add uploading state and restrict drag to one image. ([64565](https://github.com/WordPress/gutenberg/pull/64565))
+- Quote Block: Add align support. ([64188](https://github.com/WordPress/gutenberg/pull/64188))
+- Add border support to the following:
+  - Comment Author Name ([64550](https://github.com/WordPress/gutenberg/pull/64550))
+  - Comment Content ([64230](https://github.com/WordPress/gutenberg/pull/64230))
+  - Comment Date ([64210](https://github.com/WordPress/gutenberg/pull/64210))
+  - Post Author Biography ([64615](https://github.com/WordPress/gutenberg/pull/64615))
+  - Post Author Name ([64530](https://github.com/WordPress/gutenberg/pull/64530))
+  - Post Author ([64599](https://github.com/WordPress/gutenberg/pull/64599))
+  - Query Title ([64581](https://github.com/WordPress/gutenberg/pull/64581))
+  - File: ([64509](https://github.com/WordPress/gutenberg/pull/64509))
+  - List Item: ([63541](https://github.com/WordPress/gutenberg/pull/63541))
+  - List: ([63540](https://github.com/WordPress/gutenberg/pull/63540))
+  - Preformatted: ([64302](https://github.com/WordPress/gutenberg/pull/64302))
+  - Tag Cloud: ([63579](https://github.com/WordPress/gutenberg/pull/63579))
+
+#### Zoom Out
+- Add private `isZoomOutMode` selector. ([64503](https://github.com/WordPress/gutenberg/pull/64503))
+- Block Insertion: Clear the insertion point when selecting a different block or clearing block selection. ([64048](https://github.com/WordPress/gutenberg/pull/64048))
+- Default the inserter to the patterns tab when in zoom out. ([64193](https://github.com/WordPress/gutenberg/pull/64193))
+- Focus pattern inserter search when activating zoom out inserter. ([64396](https://github.com/WordPress/gutenberg/pull/64396))
+- Stop unwanted drag and drop operations within section Patterns in Zoom Out mode. ([64331](https://github.com/WordPress/gutenberg/pull/64331))
+
+#### Block Editor
+- Button groups in Typography tools should use ToggleGroupControl. ([64529](https://github.com/WordPress/gutenberg/pull/64529))
+- Hyphenate long block names in the inserter. ([64667](https://github.com/WordPress/gutenberg/pull/64667))
+
+#### Global Styles
+- Additional CSS: Localize the link if it exists. ([64603](https://github.com/WordPress/gutenberg/pull/64603))
+- Background images: Add support for theme.json ref value resolution. ([64128](https://github.com/WordPress/gutenberg/pull/64128))
+
+
+### New APIs
+
+#### Components
+- Composite
+  - Add Hover and Typeahead subcomponents. ([64399](https://github.com/WordPress/gutenberg/pull/64399))
+  - Stabilize new ariakit implementation. ([63564](https://github.com/WordPress/gutenberg/pull/63564))
+  - Export `useCompositeStore`, add more focus-related props. ([64450](https://github.com/WordPress/gutenberg/pull/64450))
+
+#### Synced Patterns
+- Block Bindings: Create utils to update or remove bindings. ([64102](https://github.com/WordPress/gutenberg/pull/64102))
+
+#### Extensibility
+- Add plugin template registration API. ([61577](https://github.com/WordPress/gutenberg/pull/61577))
+
+
+### Bug Fixes
+
+#### Components
+- CustomSelectControl: Improve props type inferring. ([64412](https://github.com/WordPress/gutenberg/pull/64412))
+- ColorPalette: Partial support of `color-mix()` CSS colors. ([64224](https://github.com/WordPress/gutenberg/pull/64224))
+- RangeControl: Disable reset button consistently. ([64579](https://github.com/WordPress/gutenberg/pull/64579))
+- RangeControl: Tweak mark and label absolute positioning. ([64487](https://github.com/WordPress/gutenberg/pull/64487))
+
+#### Data Views
+- Load the filter toggle as open if there are primary filters. ([64651](https://github.com/WordPress/gutenberg/pull/64651))
+- Sort descending button may be wrongly pressed. ([64547](https://github.com/WordPress/gutenberg/pull/64547))
+- Filter icon is displayed even when no filter capabilities are given to any field. ([64640](https://github.com/WordPress/gutenberg/pull/64640))
+- Hide sort direction control if there are no sortable fields. ([64817](https://github.com/WordPress/gutenberg/pull/64817))
+
+#### Zoom Out
+- Disallow dropping outside section root in Zoom Out mode. ([64500](https://github.com/WordPress/gutenberg/pull/64500))
+- Don't hide the insertion point when hovering patterns. ([64392](https://github.com/WordPress/gutenberg/pull/64392))
+- Use previous device width for scale calculations. ([64478](https://github.com/WordPress/gutenberg/pull/64478))
+
+#### Block Library
+- Embed blocks: Adding captions via toolbar - #64385. ([64394](https://github.com/WordPress/gutenberg/pull/64394))
+- Paste: Fix blob uploading. ([64479](https://github.com/WordPress/gutenberg/pull/64479))
+- Table Block: Hide caption toolbar button on multiple selection. ([64462](https://github.com/WordPress/gutenberg/pull/64462))
+
+#### Post Editor
+- Fix user pattern preloading filter. ([64477](https://github.com/WordPress/gutenberg/pull/64477))
+- Fix preloaded REST API paths. ([64459](https://github.com/WordPress/gutenberg/pull/64459))
+- Force iframe editor when zoom-out mode. ([64316](https://github.com/WordPress/gutenberg/pull/64316))
+
+#### Block Editor
+- Don't hide the toolbar for an empty default block in HTML mode. ([64374](https://github.com/WordPress/gutenberg/pull/64374))
+- In-between Inserter: Show inserter when it doesn't conflict with block toolbar. ([64229](https://github.com/WordPress/gutenberg/pull/64229))
+- Slash Inserter: Restrict block list to allowed blocks only. ([64413](https://github.com/WordPress/gutenberg/pull/64413))
+
+#### Site Editor
+- Don't allow duplicating template parts in non-block-based themes. ([64379](https://github.com/WordPress/gutenberg/pull/64379))
+- Fix Template Parts post type preload path. ([64401](https://github.com/WordPress/gutenberg/pull/64401))
+- Cancel button in duplicate template part modal doesn't work. ([64377](https://github.com/WordPress/gutenberg/pull/64377))
+- Fix empty content sidebar panel. ([64569](https://github.com/WordPress/gutenberg/pull/64569))
+
+#### Block bindings
+- Fix long keys overflow in bindings panel. ([64465](https://github.com/WordPress/gutenberg/pull/64465))
+- Hide keys starting with underscore. ([64618](https://github.com/WordPress/gutenberg/pull/64618))
+- Refactor utils file. ([64740](https://github.com/WordPress/gutenberg/pull/64740))
+
+#### CSS & Styling
+- Remove inconsistent dark theme focus style on block selection. ([64549](https://github.com/WordPress/gutenberg/pull/64549))
+- Update postcss-prefixwrap dependency to 1.51.0 to fix prefixing in `:Where` selectors. ([64458](https://github.com/WordPress/gutenberg/pull/64458))
+
+#### Interactivity API
+- Fix context inheritance from namespaces different than the current one. ([64677](https://github.com/WordPress/gutenberg/pull/64677))
+- Fix computeds without scope in Firefox. ([64825](https://github.com/WordPress/gutenberg/pull/64825))
+
+#### Document Settings
+- Post Featured Image: Disable the media modal while uploading an image. ([64566](https://github.com/WordPress/gutenberg/pull/64566))
+
+#### Patterns
+- Changing sorting direction on patterns does nothing. ([64508](https://github.com/WordPress/gutenberg/pull/64508))
+
+#### Design Tools
+- Background image: Ensure consistency with defaults and fix reset/remove functionality. ([64328](https://github.com/WordPress/gutenberg/pull/64328))
+
+#### Global Styles
+- Fix bumped specificity for layout styles in non-iframed editor. ([64076](https://github.com/WordPress/gutenberg/pull/64076))
+
+
+### Accessibility
+
+- Site Editor: Always use auto-cursor style for editable text. ([64627](https://github.com/WordPress/gutenberg/pull/64627))
+- Post Editor: Update textControl to searchControl in taxonomy search. ([64605](https://github.com/WordPress/gutenberg/pull/64605))
+- RadioControl: Label radio group using fieldset and legend. ([64582](https://github.com/WordPress/gutenberg/pull/64582))
+- Fix labeling in Typography font size presets panel. ([64428](https://github.com/WordPress/gutenberg/pull/64428))
+- Latests Posts: Used ToggleGroupControl instead for Image alignment. ([64352](https://github.com/WordPress/gutenberg/pull/64352))
+
+
+### Performance
+
+- Fetch permissions for visible patterns only. ([64606](https://github.com/WordPress/gutenberg/pull/64606))
+- Background Image: Remove unnecessary 'block-editor' store subscription. ([64568](https://github.com/WordPress/gutenberg/pull/64568))
+- Edit Post: Avoid unnecessary post-template ID lookup. ([64431](https://github.com/WordPress/gutenberg/pull/64431))
+- GridVisualizer: Avoid over-selecting by using a new getBlockStyles private selector. ([64386](https://github.com/WordPress/gutenberg/pull/64386))
+
+
+### Experiments
+
+#### Data Views
+- DataViews Quick Edit
+  - Add Post Card to the quick edit panel. ([64365](https://github.com/WordPress/gutenberg/pull/64365))
+  - Add the PostActions dropdown menu. ([64393](https://github.com/WordPress/gutenberg/pull/64393))
+  - Rely on the global save flow instead of a custom save button. ([64389](https://github.com/WordPress/gutenberg/pull/64389))
+- Update the copy of quick edit tooltip. ([64475](https://github.com/WordPress/gutenberg/pull/64475))
+
+#### Components
+- Composite v2: Undo stabilizing new version. ([64510](https://github.com/WordPress/gutenberg/pull/64510))
+
+
+### Documentation
+
+- Add clarification about importing css/scss files. ([61252](https://github.com/WordPress/gutenberg/pull/61252))
+- Components
+  - Add "Naming conventions" section. ([63714](https://github.com/WordPress/gutenberg/pull/63714))
+  - Add 40px size prop to readmes. ([64592](https://github.com/WordPress/gutenberg/pull/64592))
+- Composite: Improve Storybook examples and clean up prop documentation. ([64397](https://github.com/WordPress/gutenberg/pull/64397))
+- Dataviews
+  - Added missing properties for actions object and link to storybook example. ([64442](https://github.com/WordPress/gutenberg/pull/64442))
+  - Fixed tip link for block editor view. ([64469](https://github.com/WordPress/gutenberg/pull/64469))
+  - Update README with missing properties and recent changes. ([64435](https://github.com/WordPress/gutenberg/pull/64435))
+  - Better explanation of the "elements" property and its connection to the "filterBy" property. ([64633](https://github.com/WordPress/gutenberg/pull/64633))
+- Interactivity API
+  - The first three Core Concepts guides. ([63759](https://github.com/WordPress/gutenberg/pull/63759))
+  - Fix internal links core-concepts. ([64609](https://github.com/WordPress/gutenberg/pull/64609))
+  - Remove typed function from API reference. ([64429](https://github.com/WordPress/gutenberg/pull/64429))
+  - Add code concepts to Navigating the Interactivity API documentation. ([64608](https://github.com/WordPress/gutenberg/pull/64608))
+  - Interactivity API: Add wp_interactivity_state() clarification. ([64356](https://github.com/WordPress/gutenberg/pull/64356))
+- Fix typos in the Block Filters documentation.. ([64426](https://github.com/WordPress/gutenberg/pull/64426))
+- Fix example of useBlockProps hook. ([64363](https://github.com/WordPress/gutenberg/pull/64363))
+- Fix typo and link in static-dynamic-rendering.md. ([64449](https://github.com/WordPress/gutenberg/pull/64449))
+- Fix typo in block-filters.md. ([64452](https://github.com/WordPress/gutenberg/pull/64452))
+- Fix typo in block-wrapper.md. ([64447](https://github.com/WordPress/gutenberg/pull/64447))
+- Note about image sizes in MediaUpload::OnSelect. ([64616](https://github.com/WordPress/gutenberg/pull/64616))
+- Small typo correction in doc file. ([64596](https://github.com/WordPress/gutenberg/pull/64596))
+- TextDecorationControl, TextTransformControl: Remove size prop in Storybook. ([64583](https://github.com/WordPress/gutenberg/pull/64583))
+- Updated `@since` order in Inline document in client-assets.php file. ([64653](https://github.com/WordPress/gutenberg/pull/64653))
+- Updated small typo in compat.php file. ([64535](https://github.com/WordPress/gutenberg/pull/64535))
+- Updated small typo in modularity.md. ([64518](https://github.com/WordPress/gutenberg/pull/64518))
+
+
+### Code Quality
+
+- Add lint rule for 40px size prop usage in the following:
+  - BorderBoxControl, BorderControl, DimensionControl, FontSizePicker: ([64410](https://github.com/WordPress/gutenberg/pull/64410))
+  - Block Editor typography components ([64591](https://github.com/WordPress/gutenberg/pull/64591))
+  - FormFileUpload: ([64585](https://github.com/WordPress/gutenberg/pull/64585))
+  - FormTokenField: ([64590](https://github.com/WordPress/gutenberg/pull/64590))
+  - InputControl: ([64589](https://github.com/WordPress/gutenberg/pull/64589))
+  - NumberControl: ([64561](https://github.com/WordPress/gutenberg/pull/64561))
+  - RangeControl: ([64558](https://github.com/WordPress/gutenberg/pull/64558))
+  - SelectControl: ([64486](https://github.com/WordPress/gutenberg/pull/64486))
+  - TextControl: ([64455](https://github.com/WordPress/gutenberg/pull/64455))
+  - ToggleGroupControl: ([64524](https://github.com/WordPress/gutenberg/pull/64524))
+  - ComboboxControl: ([64560](https://github.com/WordPress/gutenberg/pull/64560))
+  - CustomSelectControl: ([64559](https://github.com/WordPress/gutenberg/pull/64559))
+- Add margin-bottom lint rules for BaseControl. ([64355](https://github.com/WordPress/gutenberg/pull/64355))
+- Add missing changes to the changelog for the PR #62734. ([64507](https://github.com/WordPress/gutenberg/pull/64507))
+- Base Styles: Restore deprecated `$dark-theme-focus` variable. ([64563](https://github.com/WordPress/gutenberg/pull/64563))
+- ESLint: Enable and enforce remaining i18n rules for the plugin (e.g. no trailing spaces). ([60196](https://github.com/WordPress/gutenberg/pull/60196))
+- Remove unnecessary className. ([64403](https://github.com/WordPress/gutenberg/pull/64403))
+- Replace instances of deprecated elevation variables. ([64656](https://github.com/WordPress/gutenberg/pull/64656))
+- Style engine: Export util to compile CSS custom var from preset string. ([64490](https://github.com/WordPress/gutenberg/pull/64490))
+- Style engine: Update type for getCSSValueFromRawStyle. ([64528](https://github.com/WordPress/gutenberg/pull/64528))
+- TextControl: Fix remaining 40px size violations. ([64594](https://github.com/WordPress/gutenberg/pull/64594))
+- Border: 1px → $border-width. ([64680](https://github.com/WordPress/gutenberg/pull/64680))
+
+#### Block Library
+- Gallery: Remove 'withNotices' HoC. ([64384](https://github.com/WordPress/gutenberg/pull/64384))
+- Missing Block: Use hooks instead of HoC. ([64657](https://github.com/WordPress/gutenberg/pull/64657))
+
+#### Block Editor
+- Use hooks instead of HoC in:
+  - 'BlockModeToggle'. ([64460](https://github.com/WordPress/gutenberg/pull/64460))
+  - 'MultiSelectionInspector'. ([64634](https://github.com/WordPress/gutenberg/pull/64634))
+
+#### Components
+- Deprecate bottom margin on BaseControl-based components. ([64408](https://github.com/WordPress/gutenberg/pull/64408))
+- Navigator: Simplify backwards navigation APIs. ([63317](https://github.com/WordPress/gutenberg/pull/63317))
+
+#### Data Views
+- Refactor the edit function to be based on discrete controls. ([64404](https://github.com/WordPress/gutenberg/pull/64404))
+- Update `renderFormElements` to make sure the value respects the type. ([64391](https://github.com/WordPress/gutenberg/pull/64391))
+- Abandon the ItemRecord type. ([64367](https://github.com/WordPress/gutenberg/pull/64367))
+
+#### Block hooks
+- Navigation Block: Remove now-obsolete function_exists guards. ([64673](https://github.com/WordPress/gutenberg/pull/64673))
+
+#### Nested / Inner Blocks
+- Block Editor: Refactor inner blocks appender components. ([64470](https://github.com/WordPress/gutenberg/pull/64470))
+
+#### Plugin
+- Script Modules: Move data passing to 6.7 compat file. ([64006](https://github.com/WordPress/gutenberg/pull/64006))
+
+
+### Tools
+
+- Make wp-env compatible with WordPress versions older than 5.4 by fixing wp-config anchors. ([55864](https://github.com/WordPress/gutenberg/pull/55864))
+
+#### Testing
+- Background block supports: Remove unused properties in unit tests. ([64564](https://github.com/WordPress/gutenberg/pull/64564))
+- Fix flaky block template registration end-to-end test. ([64541](https://github.com/WordPress/gutenberg/pull/64541))
+- Improve Image block end-to-end tests. ([64537](https://github.com/WordPress/gutenberg/pull/64537))
+- Upgrade Playwright to v1.46. ([64372](https://github.com/WordPress/gutenberg/pull/64372))
+
+#### Build Tooling
+- Fix gutenberg/gutenberg-coding-standards licensing issues. ([61913](https://github.com/WordPress/gutenberg/pull/61913))
+- Props Bot: Update to correct event type. ([64557](https://github.com/WordPress/gutenberg/pull/64557))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @cweiske: Note about image sizes in MediaUpload::OnSelect. ([64616](https://github.com/WordPress/gutenberg/pull/64616))
+- @imrraaj: Dataviews: Filter icon is displayed even when no filter capabilities are given to any field. ([64640](https://github.com/WordPress/gutenberg/pull/64640))
+- @janpfeil: Fix typo in block-filters.md. ([64452](https://github.com/WordPress/gutenberg/pull/64452))
+- @Rishit30G: `ColorPalette`: Partial support of `color-mix()` CSS colors. ([64224](https://github.com/WordPress/gutenberg/pull/64224))
+- @ssang: Slash Inserter: Restrict block list to allowed blocks only. ([64413](https://github.com/WordPress/gutenberg/pull/64413))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @akasunil @Aljullu @amitraj2203 @anton-vlasenko @arthur791004 @cbravobernal @ciampo @colorful-tones @cweiske @DAreRodz @ellatrix @felixarntz @getdave @hbhalodia @imrraaj @jameskoster @janpfeil @jasmussen @jeherve @jorgefilipecosta @jsnajdr @juanmaguitar @luisherranz @Mamaduka @meteorlxy @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @ramonjd @richtabor @Rishit30G @SantosGuillamot @scruffian @shail-mehta @shreya0204 @sirreal @ssang @swissspidy @t-hamano @talldan @tyxla @vipul0425 @youknowriad
+
+
+= 19.0.0 =
+
+## Changelog
+
+### Enhancements
+
+- Add alt edit field to the inline image in the format library ([64124](https://github.com/WordPress/gutenberg/pull/64124))
+- Update copy from "No Title" to "No title" across multiple places on the editor. ([64184](https://github.com/WordPress/gutenberg/pull/64184))
+- Update column input to be 40px by default. ([64190](https://github.com/WordPress/gutenberg/pull/64190))
+
+#### Block Library
+- Add anchor block support to List Items. ([48758](https://github.com/WordPress/gutenberg/pull/48758))
+- Unset the rowStart and columnStart attributes when a block inside the Grid is removed from a manual layout. ([64186](https://github.com/WordPress/gutenberg/pull/64186))
+- Update Group block example. ([63114](https://github.com/WordPress/gutenberg/pull/63114))
+- Make SiteLogoReplaceFlow always available in the Site Logo block toolbar. ([63499](https://github.com/WordPress/gutenberg/pull/63499))
+- Make Query Loop settings more intuitive with a ToggleGroup and simplified help text. ([63739](https://github.com/WordPress/gutenberg/pull/63739))
+- Move gallery link controls to the block toolbar. ([62762](https://github.com/WordPress/gutenberg/pull/62762))
+- Hide loading when the overlay menu is selected. ([64262](https://github.com/WordPress/gutenberg/pull/64262))
+- Move the Site Logo tooltip to the middle right. ([64296](https://github.com/WordPress/gutenberg/pull/64296))
+- Prevent duplicate spacing on Tag Cloud block. ([63832](https://github.com/WordPress/gutenberg/pull/63832))
+- Fix 'can user edit' Template Part check. ([64137](https://github.com/WordPress/gutenberg/pull/64137))
+- Add clearfix in Post content. ([63690](https://github.com/WordPress/gutenberg/pull/63690))
+- Tweak Tag Cloud controls and description. ([64151](https://github.com/WordPress/gutenberg/pull/64151))
+- Tweak list block. ([64025](https://github.com/WordPress/gutenberg/pull/64025))
+- Update MediaUpload button for the site logo from "Add media" to "Choose logo". ([63498](https://github.com/WordPress/gutenberg/pull/63498))
+- Update help text for sticky control in Query loop. ([63999](https://github.com/WordPress/gutenberg/pull/63999))
+- Add border support to the following blocks:
+    - [Time To Read](https://github.com/WordPress/gutenberg/pull/63776)
+    - [Categories List](https://github.com/WordPress/gutenberg/pull/63950)
+    - [Post Date](https://github.com/WordPress/gutenberg/pull/64023)
+    - [Post Excerpt](https://github.com/WordPress/gutenberg/pull/64022)
+    - [Post Terms](https://github.com/WordPress/gutenberg/pull/64246)
+    - [Post Title](https://github.com/WordPress/gutenberg/pull/64024)
+    - [Site Tagline](https://github.com/WordPress/gutenberg/pull/63778)
+    - [Site Title](https://github.com/WordPress/gutenberg/pull/63631)
+    - [Table of contents](https://github.com/WordPress/gutenberg/pull/63578)
+
+#### Extensibility
+- Add an async `__unstablePreSavePost` hook; resolving with false prevents saving. ([58022](https://github.com/WordPress/gutenberg/pull/58022))
+- Enable heading level curation. ([63535](https://github.com/WordPress/gutenberg/pull/63535))
+- Addition of `levelOptions` attribute to control available heading levels in [Post Title](https://github.com/WordPress/gutenberg/pull/64106), [Query Title](https://github.com/WordPress/gutenberg/pull/64107), [Site Tagline](https://github.com/WordPress/gutenberg/pull/64113), [Site Title](https://github.com/WordPress/gutenberg/pull/64111), and [Comments Title](https://github.com/WordPress/gutenberg/pull/64103).
+
+#### Data Views
+- Be more clear with the copy of the "hide" action. ([63047](https://github.com/WordPress/gutenberg/pull/63047))
+- Graduate data view options out of a menu to allow more design expression. ([64175](https://github.com/WordPress/gutenberg/pull/64175))
+- Move filter UI into a toggle-able panel to improve experience on narrow viewports/containers. ([63203](https://github.com/WordPress/gutenberg/pull/63203))
+- Update field line-height across grid/list layouts. ([63945](https://github.com/WordPress/gutenberg/pull/63945))
+- Update template description in table layout. ([63942](https://github.com/WordPress/gutenberg/pull/63942))
+- De-emphasise bulk actions on Grid layout. ([64209](https://github.com/WordPress/gutenberg/pull/64209))
+- Update the copy of some of the strings on dataviews actions. ([64099](https://github.com/WordPress/gutenberg/pull/64099))
+
+##### Dataviews Extensibility
+
+- Allow unregistering of the following post actions: [permanently delete](https://github.com/WordPress/gutenberg/pull/64088), [restore post](https://github.com/WordPress/gutenberg/pull/64134), and [trash post](https://github.com/WordPress/gutenberg/pull/64087).
+
+#### Dataform
+
+- Add author to quick edit page/post list. ([63983](https://github.com/WordPress/gutenberg/pull/63983))
+- If a field of type `text` declare `elements`, render it as a `SelectControl` in `edit`. ([64251](https://github.com/WordPress/gutenberg/pull/64251))
+- Migrate order action modal and introduce form validation. ([63895](https://github.com/WordPress/gutenberg/pull/63895))
+
+
+
+#### Components
+- Add radius scale. ([64007](https://github.com/WordPress/gutenberg/pull/64007))
+- Support generic props type on CustomSelectControl. ([63985](https://github.com/WordPress/gutenberg/pull/63985))
+- Guide: Add __next40pxDefaultSize to buttons. ([64181](https://github.com/WordPress/gutenberg/pull/64181))
+- Image: Make Placeholder white when there is a <Spinner /> on top. ([63885](https://github.com/WordPress/gutenberg/pull/63885))
+- SelectControl: Infer `value` type from `options`. ([64069](https://github.com/WordPress/gutenberg/pull/64069))
+- SelectControl: Pass through `options` props. ([64211](https://github.com/WordPress/gutenberg/pull/64211))
+- TimeInput: Expose as subcomponent of TimePicker. ([63145](https://github.com/WordPress/gutenberg/pull/63145))
+- Update radius variables in components configuration. ([64133](https://github.com/WordPress/gutenberg/pull/64133))
+- `RadioControl`: Add support for option help text. ([63751](https://github.com/WordPress/gutenberg/pull/63751))
+
+#### Block Editor
+- Block Autocompleter: Force icon color to text color when item is selected. ([61376](https://github.com/WordPress/gutenberg/pull/61376))
+- Don't overlap canvas with inserter panel at large screens. ([64110](https://github.com/WordPress/gutenberg/pull/64110))
+- Format Library: Polish inline image format popover. ([64016](https://github.com/WordPress/gutenberg/pull/64016))
+- LineHeightControl: Hard deprecate bottom margin. ([64281](https://github.com/WordPress/gutenberg/pull/64281))
+- New useBlockElementRef hook for storing block element into a ref. ([63799](https://github.com/WordPress/gutenberg/pull/63799))
+- Improved tabbed sidebar styles. ([61974](https://github.com/WordPress/gutenberg/pull/61974))
+- URLInput: Hard deprecate bottom margin. ([64282](https://github.com/WordPress/gutenberg/pull/64282))
+
+#### Global Styles
+- Add a typesets section to Typography. ([62539](https://github.com/WordPress/gutenberg/pull/62539))
+- Add tooltips to the heading level selectors. ([64039](https://github.com/WordPress/gutenberg/pull/64039))
+- Background images: Ensure appropriate default values. ([64192](https://github.com/WordPress/gutenberg/pull/64192))
+- Create new public function to make it easier to expose style variations from other themes. ([63318](https://github.com/WordPress/gutenberg/pull/63318))
+- Style Book: Clearly denote heading levels. ([64038](https://github.com/WordPress/gutenberg/pull/64038))
+
+#### Design Tools
+- Column: Enable border radius support. ([63924](https://github.com/WordPress/gutenberg/pull/63924))
+- Comment Template: Add Border Block Support. ([64238](https://github.com/WordPress/gutenberg/pull/64238))
+- Post Comments Form: Add Border Block Support. ([64233](https://github.com/WordPress/gutenberg/pull/64233))
+
+#### Zoom Out
+- Add a control to enter and leave zoom out mode. ([63870](https://github.com/WordPress/gutenberg/pull/63870))
+- Improve zoom transition. ([64179](https://github.com/WordPress/gutenberg/pull/64179))
+
+#### Site Editor
+- Clarify that the site icon is a back button using an animation. ([63986](https://github.com/WordPress/gutenberg/pull/63986))
+- Site Icon: Add back filter effect to make it work for all kind of site icons. ([64172](https://github.com/WordPress/gutenberg/pull/64172))
+
+#### Post Editor
+- Tweak Create custom template modal. ([64255](https://github.com/WordPress/gutenberg/pull/64255))
+
+#### Icons
+- Add new "send" icon. ([64130](https://github.com/WordPress/gutenberg/pull/64130))
+
+#### Plugin
+- Bump minimum required WordPress version to 6.5. ([64126](https://github.com/WordPress/gutenberg/pull/64126))
+
+#### Font Library
+- Include a "Select All" options for google fonts. ([63893](https://github.com/WordPress/gutenberg/pull/63893))
+
+#### Block bindings
+- Allow bindings bootstrap after registration. ([63797](https://github.com/WordPress/gutenberg/pull/63797))
+
+#### Interactivity API
+- Refactor internal proxy and signals system. ([62734](https://github.com/WordPress/gutenberg/pull/62734))
+
+
+### New APIs
+
+- Make useStyleOverride public. ([63656](https://github.com/WordPress/gutenberg/pull/63656))
+
+
+### Bug Fixes
+
+- Core Data: Fix 'getEntityRecordPermissions' memoization. ([64091](https://github.com/WordPress/gutenberg/pull/64091))
+- Document bar: Fix long title with no spaces causing layout issue. ([64092](https://github.com/WordPress/gutenberg/pull/64092))
+- Fix density slider minus to be correct. ([64185](https://github.com/WordPress/gutenberg/pull/64185))
+- Fix: Deleting a pattern throws a notice saying undefined deleted. ([64301](https://github.com/WordPress/gutenberg/pull/64301))
+- Primitives: Add missing peer dependency. ([64218](https://github.com/WordPress/gutenberg/pull/64218))
+- Site Icon: Fix position in distraction free mode. ([64261](https://github.com/WordPress/gutenberg/pull/64261))
+
+#### Data Views
+- Add context to trash string. ([64249](https://github.com/WordPress/gutenberg/pull/64249))
+- Conditionally shows the description field in Template Grid layout. ([64043](https://github.com/WordPress/gutenberg/pull/64043))
+- Consider layout URL parameter when loading a default/custom view. ([64306](https://github.com/WordPress/gutenberg/pull/64306))
+- Display published date for pages/posts with published status. ([64049](https://github.com/WordPress/gutenberg/pull/64049))
+- Sort author by name + allow custom sort function. ([64064](https://github.com/WordPress/gutenberg/pull/64064))
+- Don't render action modal when there are no eligible items. ([64250](https://github.com/WordPress/gutenberg/pull/64250))
+- Pages: Update `useView` logic. ([63889](https://github.com/WordPress/gutenberg/pull/63889))
+- Update template preview dimensions in table layout. ([63938](https://github.com/WordPress/gutenberg/pull/63938))
+- Update template preview dimensions in table layout. ([63938](https://github.com/WordPress/gutenberg/pull/63938))
+
+#### Dataform
+
+- Fix SelectControl size and spacing. ([64324](https://github.com/WordPress/gutenberg/pull/64324))
+- Provide a better default for render when field has elements. ([64338](https://github.com/WordPress/gutenberg/pull/64338))
+
+#### Components
+- Autocompleter UI: Fix text color when hovering selected item. ([64294](https://github.com/WordPress/gutenberg/pull/64294))
+- BaseControl: change label's display: Block. ([63911](https://github.com/WordPress/gutenberg/pull/63911))
+- Button: Fix tertiary destructive hover style. ([64152](https://github.com/WordPress/gutenberg/pull/64152))
+- ColorPalette: Remove extra bottom margin when `CircularOptionPicker` is unneeded. ([63961](https://github.com/WordPress/gutenberg/pull/63961))
+- DropdownMenuV2: Break menu item help text on multiple lines for better truncation. ([63916](https://github.com/WordPress/gutenberg/pull/63916))
+- Fix modal dismissers in development mode. ([64132](https://github.com/WordPress/gutenberg/pull/64132))
+- Fix toggle help indentation. ([63903](https://github.com/WordPress/gutenberg/pull/63903))
+- Update the TextControl padding to match the rest of the controls. ([64326](https://github.com/WordPress/gutenberg/pull/64326))
+
+#### Global Styles
+- Fix block custom CSS pseudo element selectors. ([63980](https://github.com/WordPress/gutenberg/pull/63980))
+- Fix block library and global styles stylesheet ordering when a block style variation is active. ([63918](https://github.com/WordPress/gutenberg/pull/63918))
+- Style Book: Fix critical error when heading block is not registered. ([64047](https://github.com/WordPress/gutenberg/pull/64047))
+- TypesetButton: Check if variations exist before running logic. ([64139](https://github.com/WordPress/gutenberg/pull/64139))
+
+#### Site Editor
+- Centrally align entity in focused edit mode. ([64143](https://github.com/WordPress/gutenberg/pull/64143))
+- Don't trigger template ID resolution for multi-selected posts. ([64254](https://github.com/WordPress/gutenberg/pull/64254))
+- Long slugs breaking summary panel UI. ([64053](https://github.com/WordPress/gutenberg/pull/64053))
+
+#### Zoom Out
+- Keep top-level block selection if entering zoom out mode. ([64178](https://github.com/WordPress/gutenberg/pull/64178))
+- Use the block editor for insertion point data. ([63934](https://github.com/WordPress/gutenberg/pull/63934))
+
+#### Block Library
+- Fix a typo in use-image-sizes.js. ([64100](https://github.com/WordPress/gutenberg/pull/64100))
+- Template Part: Fix capability checks for inner blocks. ([64159](https://github.com/WordPress/gutenberg/pull/64159))
+- Update useTaxonomies hook to check for taxonomies for passed post type. ([64145](https://github.com/WordPress/gutenberg/pull/64145))
+
+#### Design Tools
+- Quote: Prevent block theme styles overriding global border and padding. ([64045](https://github.com/WordPress/gutenberg/pull/64045))
+- Spacing controls: Using CustomSelectControlV2 for >= 8 spacing sizes. ([64284](https://github.com/WordPress/gutenberg/pull/64284))
+
+#### Post Editor
+- Avoid errors for post types without a 'menu_icon'. ([64015](https://github.com/WordPress/gutenberg/pull/64015))
+- Post: Add a max length to the post password protected field. ([64156](https://github.com/WordPress/gutenberg/pull/64156))
+
+#### Grid layout
+- Fix grid resizer drag over embed. ([64098](https://github.com/WordPress/gutenberg/pull/64098))
+- Move resizer popover slot to fix display on mobile. ([63920](https://github.com/WordPress/gutenberg/pull/63920))
+
+#### Block Editor
+- Fix unexpected drag & rrop row/gallery creation logic. ([64241](https://github.com/WordPress/gutenberg/pull/64241))
+
+#### Icons
+- Remove hardcoded color from sidesAxial and sidesBottom icons. ([64174](https://github.com/WordPress/gutenberg/pull/64174))
+
+#### Document Settings
+- Display empty option when post author is missing. ([64165](https://github.com/WordPress/gutenberg/pull/64165))
+
+#### Patterns
+- Enable cross-browser support for pattern uploading. ([64123](https://github.com/WordPress/gutenberg/pull/64123))
+
+#### Commands
+- Fix 'Preferences' and 'Shortcuts' commands in StrictMode. ([64019](https://github.com/WordPress/gutenberg/pull/64019))
+
+#### Meta Boxes
+- Prevent popover from being hidden by metaboxes. ([63939](https://github.com/WordPress/gutenberg/pull/63939))
+
+#### Page Content Focus
+- TemplateContentPanel: Don't show content blocks that are in a Query Loop. ([63732](https://github.com/WordPress/gutenberg/pull/63732))
+
+#### Font Library
+- Fix item font family item height in the sidebar. ([63125](https://github.com/WordPress/gutenberg/pull/63125))
+
+#### Block API
+- Block categories - ensure that categories are unique by slug. ([62954](https://github.com/WordPress/gutenberg/pull/62954))
+
+
+### Accessibility
+
+- Restore focus style in dataviews grid view. ([64298](https://github.com/WordPress/gutenberg/pull/64298))
+- A11y text for site editor. ([62648](https://github.com/WordPress/gutenberg/pull/62648))
+- Accessibility issue of device preview options. ([63958](https://github.com/WordPress/gutenberg/pull/63958))
+
+#### Components
+- Improve the aria-disabled focus style of the Button. ([62480](https://github.com/WordPress/gutenberg/pull/62480))
+- Restore `describedBy` functionality on CustomSelectControl. ([63957](https://github.com/WordPress/gutenberg/pull/63957))
+
+#### Block Library
+- Fix unlabeled Spacer block controls. ([63806](https://github.com/WordPress/gutenberg/pull/63806))
+- Move Posts Per Page, Offset, and Pages controls from the block toolbar into Inspector Controls. ([58207](https://github.com/WordPress/gutenberg/pull/58207))
+
+#### Font Library
+-  Remove notice context and add message when fonts are updated. ([64030](https://github.com/WordPress/gutenberg/pull/64030))
+
+
+### Performance
+
+- Add User Timings for the Interactivity API. ([60522](https://github.com/WordPress/gutenberg/pull/60522))
+
+#### Data Views
+- Optimize the patterns dataviews by extracting the fields definition. ([63927](https://github.com/WordPress/gutenberg/pull/63927))
+
+#### Layout
+- Avoid iterating auto grid inner blocks unless mode specifically changed. ([64194](https://github.com/WordPress/gutenberg/pull/64194))
+
+#### Block bindings
+- Move logic to merge `usesContext` outside the reducer. ([63941](https://github.com/WordPress/gutenberg/pull/63941))
+
+
+### Experiments
+
+- Adds experimental blocks flag. ([64121](https://github.com/WordPress/gutenberg/pull/64121))
+
+#### DataForm
+- Support multiple layouts and introduce the panel layout. ([64299](https://github.com/WordPress/gutenberg/pull/64299))
+
+#### DataViews Extensibility
+- Add a hook to allow third-party scripts to register/unregister post type actions. ([64138](https://github.com/WordPress/gutenberg/pull/64138))
+
+#### Grid Interactivity
+- Fix block mover layout and styles. ([64021](https://github.com/WordPress/gutenberg/pull/64021))
+
+#### Block bindings
+- UI for connecting bindings. ([62880](https://github.com/WordPress/gutenberg/pull/62880))
+
+
+### Documentation
+
+- .wp-env.json schema: Fix schema and add unit tests. ([63281](https://github.com/WordPress/gutenberg/pull/63281))
+- Add WP Studio to list of tools in documentation. ([64327](https://github.com/WordPress/gutenberg/pull/64327))
+- Add documentation for some dynamically generated selectors in the core-data store. ([64269](https://github.com/WordPress/gutenberg/pull/64269))
+- Block Editor: Update 'getBlocksByName' JSDoc. ([63919](https://github.com/WordPress/gutenberg/pull/63919))
+- Components: Add missing `__nextHasNoMarginBottom` documentation. ([64313](https://github.com/WordPress/gutenberg/pull/64313))
+- Corrected @deprecated doc Order in Inline Documentation. ([64013](https://github.com/WordPress/gutenberg/pull/64013))
+- Add documentation for `render_block` and `register_block_type_args` to Block Filters. ([64118](https://github.com/WordPress/gutenberg/pull/64118))
+- Fix interactivity API documentation link. ([64060](https://github.com/WordPress/gutenberg/pull/64060))
+- Fix non working link to an interactivity API example block. ([64061](https://github.com/WordPress/gutenberg/pull/64061))
+- Fix WampServer links. ([64062](https://github.com/WordPress/gutenberg/pull/64062))
+- FormToggle, ToggleControl: Fix docgen in Storybook. ([64065](https://github.com/WordPress/gutenberg/pull/64065))
+- Provide a better example for the PluginSidebar slotfill. ([64206](https://github.com/WordPress/gutenberg/pull/64206))
+- Update data-core.md to use correct headings. ([64309](https://github.com/WordPress/gutenberg/pull/64309))
+
+
+### Code Quality
+
+- Add margin-bottom lint rules ([64212](https://github.com/WordPress/gutenberg/pull/64212)),([64213](https://github.com/WordPress/gutenberg/pull/64213)) and ([63960](https://github.com/WordPress/gutenberg/pull/63960))
+- Add new useEntityRecordsWithPermissions hook. ([63857](https://github.com/WordPress/gutenberg/pull/63857))
+- Fix deprecated sass usage. ([63990](https://github.com/WordPress/gutenberg/pull/63990))
+- Remove an unnecessary wrapper component. ([63989](https://github.com/WordPress/gutenberg/pull/63989))
+- Theme JSON: Update core theme json resolver class use to Gutenberg version. ([63981](https://github.com/WordPress/gutenberg/pull/63981))
+- Zoom out: Get store action outside the loop. ([63936](https://github.com/WordPress/gutenberg/pull/63936))
+- Remove Speak from device menu selection. ([64115](https://github.com/WordPress/gutenberg/pull/64115))
+
+#### Block Editor
+- BlockDraggable: Remove invalid aria-hidden attribute from button. ([64228](https://github.com/WordPress/gutenberg/pull/64228))
+- FontFamilyControl: Deprecate bottom margin. ([64280](https://github.com/WordPress/gutenberg/pull/64280))
+- Remove unnecessary/incorrect `unlock` call in `setEditorMode` action. ([64073](https://github.com/WordPress/gutenberg/pull/64073))
+
+#### Data Views
+- Formalize text field type definition. ([64168](https://github.com/WordPress/gutenberg/pull/64168))
+- Use items with permissions and avoid hooks to register actions. ([63923](https://github.com/WordPress/gutenberg/pull/63923))
+
+#### DataForm
+- Centralize edit logic in field type definitions. ([64171](https://github.com/WordPress/gutenberg/pull/64171))
+- Move validation logic to the field type definition. ([64164](https://github.com/WordPress/gutenberg/pull/64164))
+
+#### Global Styles
+- Background image: Remove toolspanel placeholder component. ([64242](https://github.com/WordPress/gutenberg/pull/64242))
+- Consolidate theme.json ref and URI resolution. ([64182](https://github.com/WordPress/gutenberg/pull/64182))
+
+#### Plugin
+- Remove compat layers for WP 6.4 and 6.5. ([64096](https://github.com/WordPress/gutenberg/pull/64096))
+- Remove leftover 'WP_Rest_Customizer_Nonces' controller. ([64221](https://github.com/WordPress/gutenberg/pull/64221))
+
+#### Site Editor
+- Use `structuredClone` for deep cloning. ([64203](https://github.com/WordPress/gutenberg/pull/64203))
+
+#### Block Library
+- Add stylelint rule to prevent usage of flex-direction reverse values. ([63081](https://github.com/WordPress/gutenberg/pull/63081))
+- Image Block Lightbox: Fix warning error when resizing. ([63995](https://github.com/WordPress/gutenberg/pull/63995))
+
+#### Icons
+- Fix invalid prop for `homeButton` icon. ([64191](https://github.com/WordPress/gutenberg/pull/64191))
+
+#### Post Editor
+- Remove resolvers hack for post actions. ([64094](https://github.com/WordPress/gutenberg/pull/64094))
+
+#### Components
+- Upgrade Ariakit. ([64066](https://github.com/WordPress/gutenberg/pull/64066))
+
+#### Page Content Focus
+- Fix the 'getBlocksByName' selector call. ([63922](https://github.com/WordPress/gutenberg/pull/63922))
+
+
+### Tools
+
+#### Testing
+- Components: Cleanup flaky unit test `sleep()` hacks. ([64205](https://github.com/WordPress/gutenberg/pull/64205))
+- Fix flaky DataViews list layout end-to-end tests. ([64244](https://github.com/WordPress/gutenberg/pull/64244))
+- Fix typo in 'Verify Core Backport Changelog' job title. ([64058](https://github.com/WordPress/gutenberg/pull/64058))
+- Improve `Button` matrix in visual regression test. ([64120](https://github.com/WordPress/gutenberg/pull/64120))
+- Improve theme.json test failure messages by pretty printing css for a more accurate diff. ([64077](https://github.com/WordPress/gutenberg/pull/64077))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @Chrico: Block categories - ensure that categories are unique by slug. ([62954](https://github.com/WordPress/gutenberg/pull/62954))
+- @djcowan: Update api-reference.md. ([64325](https://github.com/WordPress/gutenberg/pull/64325))
+- @meteorlxy: CustomSelectControl: Support generic props type. ([63985](https://github.com/WordPress/gutenberg/pull/63985))
+- @Rishit30G: Add WP Studio to list of tools in documentation. ([64327](https://github.com/WordPress/gutenberg/pull/64327))
+- @wzieba:  ([64044](https://github.com/WordPress/gutenberg/pull/64044))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @akasunil @Aljullu @amitraj2203 @andrewserong @carolinan @cbravobernal @Chrico @ciampo @creativecoder @DaniGuardiola @DAreRodz @djcowan @ellatrix @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kebbet @kmanijak @Mamaduka @matiasbenedetto @meteorlxy @mikachan @mirka @mtias @ndiego @noisysocks @oandregal @ramonjd @richtabor @Rishit30G @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @simison @stokesman @t-hamano @talldan @tomdevisser @tomjn @tyxla @up1512001 @wzieba @youknowriad
+
+
+
+
+= 18.9.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Add Clear button for Overlay color option in Cover Block. ([63580](https://github.com/WordPress/gutenberg/pull/63580))
+- Embeds: Add 'Embed' to title for clarity. ([63371](https://github.com/WordPress/gutenberg/pull/63371))
+- Columns block: Fix block preview. ([63609](https://github.com/WordPress/gutenberg/pull/63609))
+- Gallery: Add border block support. ([63428](https://github.com/WordPress/gutenberg/pull/63428))
+- Image block: Show placeholder when uploading HEIC files. ([63643](https://github.com/WordPress/gutenberg/pull/63643))
+- Latest comments: Add color block support. ([63419](https://github.com/WordPress/gutenberg/pull/63419))
+- Media Text: Add border support. ([63542](https://github.com/WordPress/gutenberg/pull/63542))
+- Polish create template part modal. ([63617](https://github.com/WordPress/gutenberg/pull/63617))
+- Post Author blocks: Add example and preview. ([62978](https://github.com/WordPress/gutenberg/pull/62978))
+- Post date block: Add a block example. ([63368](https://github.com/WordPress/gutenberg/pull/63368))
+- Post featured image: Add example of the block. ([63011](https://github.com/WordPress/gutenberg/pull/63011))
+- Post terms block: Add an example. ([63369](https://github.com/WordPress/gutenberg/pull/63369))
+- Query Loop Block: Remove Posts List variation. ([63404](https://github.com/WordPress/gutenberg/pull/63404))
+- Query Loop block: Convert the post content type setting to a ToggleGroupControl if there are few items. ([63375](https://github.com/WordPress/gutenberg/pull/63375))
+- Query Loop: Change default query loop variations. ([63353](https://github.com/WordPress/gutenberg/pull/63353))
+- Set query loop to have the inherit value by default. ([63362](https://github.com/WordPress/gutenberg/pull/63362))
+- Social Links: Add border block support. ([63629](https://github.com/WordPress/gutenberg/pull/63629))
+- Social Links: Updated soundcloud icon for social link block. ([63504](https://github.com/WordPress/gutenberg/pull/63504))
+- Social Links: Update Facebook's color to match brand guidelines. ([60424](https://github.com/WordPress/gutenberg/pull/60424))
+- Term Description: Add border block support. ([63630](https://github.com/WordPress/gutenberg/pull/63630))
+
+#### Design Tools
+- Background Image: Make panel appear in a consistent location. ([63551](https://github.com/WordPress/gutenberg/pull/63551))
+- Buttons: Add border, color, and padding block supports. ([63538](https://github.com/WordPress/gutenberg/pull/63538))
+- Heading: Add border support. ([63539](https://github.com/WordPress/gutenberg/pull/63539))
+- Image: Adopt margin block support. ([63546](https://github.com/WordPress/gutenberg/pull/63546))
+- Paragraph: Add border support. ([63543](https://github.com/WordPress/gutenberg/pull/63543))
+- Quote: Add border support. ([63544](https://github.com/WordPress/gutenberg/pull/63544))
+- Quote: Add spacing supports. ([63545](https://github.com/WordPress/gutenberg/pull/63545))
+- Search: Add margin support. ([63547](https://github.com/WordPress/gutenberg/pull/63547))
+
+#### Data Views
+- DataViews: Allow column re-ordering. ([63416](https://github.com/WordPress/gutenberg/pull/63416))
+- DataViews: Update pagination icons. ([63594](https://github.com/WordPress/gutenberg/pull/63594))
+- DataViews: Rename the header property of fields to label. ([63843](https://github.com/WordPress/gutenberg/pull/63843))
+- DataViews: Support combined fields. ([63236](https://github.com/WordPress/gutenberg/pull/63236))
+- Dataviews List: Update item layout. ([63299](https://github.com/WordPress/gutenberg/pull/63299))
+- Increase column-gap between fields in List layout. ([63603](https://github.com/WordPress/gutenberg/pull/63603))
+- Update 'Front page' badge. ([63752](https://github.com/WordPress/gutenberg/pull/63752))
+- Update: Pages: Trash view should default to table layout try 2. ([63652](https://github.com/WordPress/gutenberg/pull/63652))
+- Update: Grid layout: Allow users to adjust grid density. ([63367](https://github.com/WordPress/gutenberg/pull/63367))
+- Update: Include avatars on list view. ([63309](https://github.com/WordPress/gutenberg/pull/63309))
+- Update: List / Table layout – selected item stroke should be tinted blue. ([63312](https://github.com/WordPress/gutenberg/pull/63312))
+- Update: Make changing order an action on the ellipsis menu. ([62189](https://github.com/WordPress/gutenberg/pull/62189))
+
+#### Global Styles
+- Add colors and typograpghy to the browse styles section. ([63173](https://github.com/WordPress/gutenberg/pull/63173))
+- Adding Font size presets UI. ([63057](https://github.com/WordPress/gutenberg/pull/63057))
+- Apply same styles to block previews on inserter and Global Styles. ([63177](https://github.com/WordPress/gutenberg/pull/63177))
+- Background: Add background attachment to top level styles. ([61382](https://github.com/WordPress/gutenberg/pull/61382))
+- Move background panel under color panel. ([63888](https://github.com/WordPress/gutenberg/pull/63888))
+
+#### Block Editor
+- Hide source filter in my patterns. ([63831](https://github.com/WordPress/gutenberg/pull/63831))
+- List View: Remove the sticky position icon tooltip. ([63850](https://github.com/WordPress/gutenberg/pull/63850))
+- Patterns: Render draggable only when enabled. ([63715](https://github.com/WordPress/gutenberg/pull/63715))
+
+#### Post Editor
+- Add post status icon in post summary. ([63658](https://github.com/WordPress/gutenberg/pull/63658))
+- Editor: Improve Header layout. ([62636](https://github.com/WordPress/gutenberg/pull/62636))
+- Post Actions: Use entity details for capability checks. ([63423](https://github.com/WordPress/gutenberg/pull/63423))
+
+#### Font Library
+- Group fonts by source. ([63211](https://github.com/WordPress/gutenberg/pull/63211))
+- Include a "Select All" options to activate/deactivate all fonts. ([63531](https://github.com/WordPress/gutenberg/pull/63531))
+- Reduce duplication of font library group headings. ([63532](https://github.com/WordPress/gutenberg/pull/63532))
+
+#### Zoom Out
+- Hide vertical toolbar when block is not full width. ([63650](https://github.com/WordPress/gutenberg/pull/63650))
+- Only show the inserters when a block is selected or hovered. ([63668](https://github.com/WordPress/gutenberg/pull/63668))
+
+#### Block Locking
+- Tweak Block Locking UI. ([63881](https://github.com/WordPress/gutenberg/pull/63881))
+
+#### General UI
+- Polish "Delete" modal. ([63392](https://github.com/WordPress/gutenberg/pull/63392))
+- Update close icon. ([63597](https://github.com/WordPress/gutenberg/pull/63597))
+- Site Editor: Reduce navigation sidebar width. ([63431](https://github.com/WordPress/gutenberg/pull/63431))
+
+#### Block bindings
+- Bootstrap sources defined in the server. ([63470](https://github.com/WordPress/gutenberg/pull/63470))
+
+#### Patterns
+- Limit pattern shuffling to theme and user patterns only. ([62677](https://github.com/WordPress/gutenberg/pull/62677))
+
+#### Components
+- CustomSelectControl V2 legacy adapter: Stabilize experimental props. ([63248](https://github.com/WordPress/gutenberg/pull/63248))
+- CustomSelectControl: Switch to ariakit-based implementation. ([63258](https://github.com/WordPress/gutenberg/pull/63258))
+- CustomSelectControlV2: Animate select popover appearance. ([63343](https://github.com/WordPress/gutenberg/pull/63343))
+- CustomSelectControlV2: Do not flip popover if legacy adapter. ([63357](https://github.com/WordPress/gutenberg/pull/63357))
+- DropdownMenuV2: Invert animation direction. ([63443](https://github.com/WordPress/gutenberg/pull/63443))
+- FontSizePicker: Tidy up internal logic. ([63553](https://github.com/WordPress/gutenberg/pull/63553))
+- FormTokenField: Deprecate bottom margin. ([63491](https://github.com/WordPress/gutenberg/pull/63491))
+- SelectControl: Add "minimal" variant. ([63265](https://github.com/WordPress/gutenberg/pull/63265))
+- Tabs: Hyphenate tab labels. ([63337](https://github.com/WordPress/gutenberg/pull/63337))
+- Tabs: Keep full opacity of focus ring on disabled tabs. ([63754](https://github.com/WordPress/gutenberg/pull/63754))
+- Update HeightControl component to label inputs. ([63761](https://github.com/WordPress/gutenberg/pull/63761))
+
+#### Core Data
+- Core Data: Mark 'canUser' related actions resolvers as resolved. ([63435](https://github.com/WordPress/gutenberg/pull/63435))
+- Core Data: Resolve user capabilities when fetching an entity. ([63430](https://github.com/WordPress/gutenberg/pull/63430))
+- Core Data: Support entities in the 'canUser' selector. ([63322](https://github.com/WordPress/gutenberg/pull/63322))
+- Core Data: Support entity queries in the 'useResourcePermissions' hook. ([63653](https://github.com/WordPress/gutenberg/pull/63653))
+
+#### JSON Schemas
+- Update JSON Schemas to Draft 7. ([63583](https://github.com/WordPress/gutenberg/pull/63583))
+
+### New APIs
+
+#### Block bindings
+- Unify `getValue`/`getValues` and `setValue`/`setValues` APIs. ([63185](https://github.com/WordPress/gutenberg/pull/63185))
+
+### Bug Fixes
+
+#### Data Views
+- DataViews: Do not render bulk actions Dropdown if no actions are available. ([63575](https://github.com/WordPress/gutenberg/pull/63575))
+- DataViews: Fix default layouts in the pages data views. ([63427](https://github.com/WordPress/gutenberg/pull/63427))
+- DataViews: Fix featured image height regression. ([63424](https://github.com/WordPress/gutenberg/pull/63424))
+- DataViews: Fix field rendering. ([63452](https://github.com/WordPress/gutenberg/pull/63452))
+- DataViews: Fix pattens list selection. ([63733](https://github.com/WordPress/gutenberg/pull/63733))
+- DataViews: Fix uncontrolled selection. ([63741](https://github.com/WordPress/gutenberg/pull/63741))
+- DataViews: Only show elligible actions in the bulk editing menu. ([63473](https://github.com/WordPress/gutenberg/pull/63473))
+- Fix patterns sorting by `title`. ([63710](https://github.com/WordPress/gutenberg/pull/63710))
+- Fix selected row styles in table layout. ([63811](https://github.com/WordPress/gutenberg/pull/63811))
+- Fix: DataViews: Layout resets for patterns each time a new pattern category is selected. ([63711](https://github.com/WordPress/gutenberg/pull/63711))
+- Fix: Inconsistent field spacing in Grid layout. ([63363](https://github.com/WordPress/gutenberg/pull/63363))
+- Templates DataViews: Set the right context for the preview field. ([63488](https://github.com/WordPress/gutenberg/pull/63488))
+- 
+#### Block Editor
+- Fix user patterns disabling sync filter. ([63828](https://github.com/WordPress/gutenberg/pull/63828))
+- ImageURLInputUI: Make onSetLightbox and resetLightbox optional. ([63573](https://github.com/WordPress/gutenberg/pull/63573))
+- Pattern Inserter: Fix pagination layout when "Show button text labels" enabled. ([63466](https://github.com/WordPress/gutenberg/pull/63466))
+- Patterns inserter tabs: Temporary disable animated indicator. ([63352](https://github.com/WordPress/gutenberg/pull/63352))
+- Prevent empty void at the bottom of editor when block directory results are present. ([63397](https://github.com/WordPress/gutenberg/pull/63397))
+- Remove double shadow on Inserter category panel when zoomed out. ([63516](https://github.com/WordPress/gutenberg/pull/63516))
+- Tabs: Vertical Tabs should be 40px min height. ([63446](https://github.com/WordPress/gutenberg/pull/63446))
+- Fix mobile styles for inserter pattern and media tab navigation. ([63451](https://github.com/WordPress/gutenberg/pull/63451))
+- useBlockElement: Return null until ref callback has time to clean up the old element. ([63565](https://github.com/WordPress/gutenberg/pull/63565))
+- Remove hint in the Settings tab. ([63515](https://github.com/WordPress/gutenberg/pull/63515))
+
+#### Block Library
+- Avoid stripping attributes via group block migration when no layout is specified. ([63837](https://github.com/WordPress/gutenberg/pull/63837))
+- Fix default unit issue for tag cloud block. ([59122](https://github.com/WordPress/gutenberg/pull/59122))
+- Footnotes: Register format within the init function. ([63554](https://github.com/WordPress/gutenberg/pull/63554))
+- Image lightbox: Remove duplicate image when lightbox is opened. ([63381](https://github.com/WordPress/gutenberg/pull/63381))
+- Query Loop: Fix 'block' scoped variations to get the `query` defaults. ([63477](https://github.com/WordPress/gutenberg/pull/63477))
+- Query Loop: Fix passing of `namespace` when selecting from suggested patterns. ([63402](https://github.com/WordPress/gutenberg/pull/63402))
+- Template Part: Add check if create action should be allowed. ([63623](https://github.com/WordPress/gutenberg/pull/63623))
+- Update Inherited Query Loop value from Template Settings changes. ([63358](https://github.com/WordPress/gutenberg/pull/63358))
+
+#### Site Editor
+- Fix: Error while Calling edit-site getCurrentTemplateTemplateParts selector. ([63818](https://github.com/WordPress/gutenberg/pull/63818))
+- Fix error when duplicating a template part. ([63663](https://github.com/WordPress/gutenberg/pull/63663))
+- Fix: Add Template Modal layout in mobile view. ([63627](https://github.com/WordPress/gutenberg/pull/63627))
+- Make hover block outlines not present in Distraction Free. ([63819](https://github.com/WordPress/gutenberg/pull/63819))
+- Site Editor Navigation Commands: Add permission check. ([63798](https://github.com/WordPress/gutenberg/pull/63798))
+- fix: Wp icon focus issue. ([62675](https://github.com/WordPress/gutenberg/pull/62675))
+
+#### Zoom Out
+- Don't automatically show inserter when zoom out mode initiates. ([63859](https://github.com/WordPress/gutenberg/pull/63859))
+- Ensure that we only enter zoom out mode if the experiment is enabled. ([63417](https://github.com/WordPress/gutenberg/pull/63417))
+- Fix crash due to absence of selected block. ([63642](https://github.com/WordPress/gutenberg/pull/63642))
+- Fix vertical toolbar position. ([63745](https://github.com/WordPress/gutenberg/pull/63745))
+- Translate toolbar delete button. ([63476](https://github.com/WordPress/gutenberg/pull/63476))
+
+#### Components
+- Button: Never apply `aria-disabled` to anchor. ([63376](https://github.com/WordPress/gutenberg/pull/63376))
+- Revert "Update HeightControl component to label inputs". ([63839](https://github.com/WordPress/gutenberg/pull/63839))
+- SelectControl: Fix hover/focus color in wp-admin. ([63855](https://github.com/WordPress/gutenberg/pull/63855))
+- ToggleGroupControl: Support `disabled` options. ([63450](https://github.com/WordPress/gutenberg/pull/63450))
+
+#### Global Styles
+- Disable "Reset styles" button when there are no changes. ([63562](https://github.com/WordPress/gutenberg/pull/63562))
+- Disallow scrolling the block preview. ([63558](https://github.com/WordPress/gutenberg/pull/63558))
+- Ensure root selector (body) is not wrapped in :root :Where(). ([63726](https://github.com/WordPress/gutenberg/pull/63726))
+- Global styles block previews: Fix scaling. ([63596](https://github.com/WordPress/gutenberg/pull/63596))
+- Style variations: Don't display the default if its the only variation. ([63555](https://github.com/WordPress/gutenberg/pull/63555))
+
+#### CSS & Styling
+- Comments: Allow button element shadows from theme.json. ([63790](https://github.com/WordPress/gutenberg/pull/63790))
+- List: Prevent style bleed into non-List block lists. ([63537](https://github.com/WordPress/gutenberg/pull/63537))
+- Search: Prevent override of global button radii in editor. ([63789](https://github.com/WordPress/gutenberg/pull/63789))
+
+#### Font Library
+- Add 'No fonts installed' message on library tab when fonts aren't available. ([63740](https://github.com/WordPress/gutenberg/pull/63740))
+- Improve 'No fonts installed' state when fonts are installed but not activated. ([63533](https://github.com/WordPress/gutenberg/pull/63533))
+
+#### Post Editor
+- Allow editing of description only for custom templates. ([63664](https://github.com/WordPress/gutenberg/pull/63664))
+
+#### Design Tools
+- Background image block support: Fix dropzone size. ([63588](https://github.com/WordPress/gutenberg/pull/63588))
+- Background tool: Fix double border. ([63559](https://github.com/WordPress/gutenberg/pull/63559))
+
+#### General interface
+- Discussions panel: Distinguish between verb and adjective form of open for internationalization. ([63791](https://github.com/WordPress/gutenberg/pull/63791))
+- Fix canvas issues by removing VisualEditor’s height. ([63724](https://github.com/WordPress/gutenberg/pull/63724))
+
+#### Block Transforms
+- Block Switcher Preview: Adjust the position and enable pattern list preview in mobile viewport. ([63512](https://github.com/WordPress/gutenberg/pull/63512))
+
+#### Block bindings
+- Revert triggering multi-entity save panel in post with meta changes. ([63412](https://github.com/WordPress/gutenberg/pull/63412))
+
+#### Block Directory
+- Memoize store selectors. ([63346](https://github.com/WordPress/gutenberg/pull/63346))
+
+#### Inner blocks
+- InnerBlocks: Make sure blockType is set before trying to use it. ([63351](https://github.com/WordPress/gutenberg/pull/63351))
+
+#### Widgets Editor
+- Widgets: Memoize 'getWidgets' store selector. ([63338](https://github.com/WordPress/gutenberg/pull/63338))
+
+#### Synced Patterns
+- Pattern overrides: Ensure "Reset" button always shows as last item and with border. ([63291](https://github.com/WordPress/gutenberg/pull/63291))
+
+#### Patterns
+- Fix: Removed shuffle button when only 1 pattern is present. ([63093](https://github.com/WordPress/gutenberg/pull/63093))
+
+#### Media
+- Lock post saving during image uploads. ([41120](https://github.com/WordPress/gutenberg/pull/41120))
+
+#### JSON Schemas
+- Prepare JSON schemas for Draft 7 update. ([63582](https://github.com/WordPress/gutenberg/pull/63582))
+
+#### Security
+- Add: Permission checks to avoid 403 errors on non admin roles. ([63296](https://github.com/WordPress/gutenberg/pull/63296))
+
+### Accessibility
+
+#### Components
+- Align checkbox, radio, and toggle input design. ([63490](https://github.com/WordPress/gutenberg/pull/63490))
+- Fix ComboboxControl reset button when using the keyboard. ([63410](https://github.com/WordPress/gutenberg/pull/63410))
+
+#### Post Editor
+- Add missing aria-haspopup attribute to the buttons to set and replace the featured image. ([63360](https://github.com/WordPress/gutenberg/pull/63360))
+
+#### Block Library
+- Show visual label for Categories block in dropdown mode. ([56364](https://github.com/WordPress/gutenberg/pull/56364))
+
+
+### Performance
+
+#### Components
+- Storybook: Improve TypeScript performance for slow stories. ([63388](https://github.com/WordPress/gutenberg/pull/63388))
+
+
+### Experiments
+
+#### Grid layout
+- Disable in-between inserter in Manual grids. ([63391](https://github.com/WordPress/gutenberg/pull/63391))
+- Don't display default appender inside Manual grid. ([63395](https://github.com/WordPress/gutenberg/pull/63395))
+- Fix responsive behaviour so both column start and column span are taken into account. ([63464](https://github.com/WordPress/gutenberg/pull/63464))
+- Better looking block movers. ([63394](https://github.com/WordPress/gutenberg/pull/63394))
+- Place new block after currently selected block when using slash inserter and splitting text. ([63333](https://github.com/WordPress/gutenberg/pull/63333))
+- Move visualizer popover to slot under the canvas. ([63389](https://github.com/WordPress/gutenberg/pull/63389))
+- Don't remount the block when rendering grid tools. ([63557](https://github.com/WordPress/gutenberg/pull/63557))
+
+#### Data Views
+- Quick Edit: Support bulk selection. ([63841](https://github.com/WordPress/gutenberg/pull/63841))
+- DataViews: Bootstrap Quick Edit. ([63600](https://github.com/WordPress/gutenberg/pull/63600))
+
+
+### Documentation
+
+- Add to code requirements install and import Interactivity API. ([63439](https://github.com/WordPress/gutenberg/pull/63439))
+- Alpine vs Preact extra explanations. ([63593](https://github.com/WordPress/gutenberg/pull/63593))
+- Backport docs: Update and format. ([63830](https://github.com/WordPress/gutenberg/pull/63830))
+- Create-block - fix - update default folder name to proper default. ([63530](https://github.com/WordPress/gutenberg/pull/63530))
+- DataForm: Add a simple story for the DataForm component. ([63840](https://github.com/WordPress/gutenberg/pull/63840))
+- Fix Typo in Interactivity Api Reference. ([63775](https://github.com/WordPress/gutenberg/pull/63775))
+- Fix typo in Autocomplete component README.md. ([63496](https://github.com/WordPress/gutenberg/pull/63496))
+- FontSizePicker: Fix documentation for default `units`. ([63577](https://github.com/WordPress/gutenberg/pull/63577))
+- Improve the base control help prop documentation. ([63693](https://github.com/WordPress/gutenberg/pull/63693))
+- JSON Schema Docgen Rework. ([63868](https://github.com/WordPress/gutenberg/pull/63868))
+- Mark unstable__bootstrapServerSideBlockDefinitions with @ignore. ([63673](https://github.com/WordPress/gutenberg/pull/63673))
+- Move entity-provider.js exports into hooks/index.ts so they are added to the documentation. ([63528](https://github.com/WordPress/gutenberg/pull/63528))
+- Small Typo in Experiment Page. ([63773](https://github.com/WordPress/gutenberg/pull/63773))
+- Storybook: Remove popover-related height buffers. ([63480](https://github.com/WordPress/gutenberg/pull/63480))
+- Update "Versions in WordPress" page. ([63869](https://github.com/WordPress/gutenberg/pull/63869))
+- Update dataviews documentation. ([63860](https://github.com/WordPress/gutenberg/pull/63860))
+- Update getContext() usage examples with namespace argument. ([63411](https://github.com/WordPress/gutenberg/pull/63411))
+- Update react reference links in developer documentation. ([62818](https://github.com/WordPress/gutenberg/pull/62818))
+- Update react reference links in package's readme and doc blocks. ([62704](https://github.com/WordPress/gutenberg/pull/62704))
+- Updated Useeffect URL. ([63494](https://github.com/WordPress/gutenberg/pull/63494))
+
+
+### Code Quality
+
+- Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl. ([63679](https://github.com/WordPress/gutenberg/pull/63679))
+- Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect. ([63633](https://github.com/WordPress/gutenberg/pull/63633))
+- Add margin-bottom lint rules for RangeControl. ([63821](https://github.com/WordPress/gutenberg/pull/63821))
+- Block editor settings: Add missing global styles links dependencies. ([63823](https://github.com/WordPress/gutenberg/pull/63823))
+- Core Data: Remove leftover 'todo' comment. ([63842](https://github.com/WordPress/gutenberg/pull/63842))
+- Core Data: Use meta-store actions for resolution status. ([63469](https://github.com/WordPress/gutenberg/pull/63469))
+- core-data: Fix `canUser` allowed methods handling. ([63615](https://github.com/WordPress/gutenberg/pull/63615))
+- DataViews: Move PostList component to its own folder. ([63334](https://github.com/WordPress/gutenberg/pull/63334))
+- JSON Schema Reorganization and Fixes. ([63591](https://github.com/WordPress/gutenberg/pull/63591))
+- Update: Simplify and do not pass renderingMode on editor SidebarContent. ([63814](https://github.com/WordPress/gutenberg/pull/63814))
+- Use Base Focus Styles for Region Focus. ([62881](https://github.com/WordPress/gutenberg/pull/62881))
+- Use static 'key' when filtering BlockEdit components. ([63590](https://github.com/WordPress/gutenberg/pull/63590))
+- Update: Simplify some permission checks. ([63812](https://github.com/WordPress/gutenberg/pull/63812))
+- Use entity details when calling 'canUser' selectors. ([63415](https://github.com/WordPress/gutenberg/pull/63415))
+- HTML API: Backport updates from Core. ([63723](https://github.com/WordPress/gutenberg/pull/63723))
+
+#### Block Library
+- Image block: Remove unnecessary variables on expand on click implementation. ([63290](https://github.com/WordPress/gutenberg/pull/63290))
+- Image lightbox: Move image data from context to state. ([63348](https://github.com/WordPress/gutenberg/pull/63348))
+- Navigation Submenu: Remove user permission checks. ([63720](https://github.com/WordPress/gutenberg/pull/63720))
+- Query Title block: Rely on the editor store to apply the right archive title placeholder. ([63478](https://github.com/WordPress/gutenberg/pull/63478))
+- Remove unused useSplit after #54543. ([63826](https://github.com/WordPress/gutenberg/pull/63826))
+
+#### Data Views
+- DataViews: Cleanup preview styles. ([63365](https://github.com/WordPress/gutenberg/pull/63365))
+- DataViews: Move the layouts into a dedicated folder. ([63409](https://github.com/WordPress/gutenberg/pull/63409))
+- DataViews: Refactor to prepare exposing the underlying UI pieces. ([63694](https://github.com/WordPress/gutenberg/pull/63694))
+- DataViews: Remove redundant setSelection prop. ([63648](https://github.com/WordPress/gutenberg/pull/63648))
+- DataViews: Rename `onSelectionChange` to `onChangeSelection`. ([63087](https://github.com/WordPress/gutenberg/pull/63087))
+
+#### Components
+- ColorPicker: Use `minimal` variant for SelectControl. ([63676](https://github.com/WordPress/gutenberg/pull/63676))
+- Rename Button describedBy prop to description and deprecate old name. ([63486](https://github.com/WordPress/gutenberg/pull/63486))
+- Tabs: Move animation-related utilities into separate utils file. ([62946](https://github.com/WordPress/gutenberg/pull/62946))
+
+#### Block bindings
+- Don't provide default `canUserEditValue` in reducer. ([63628](https://github.com/WordPress/gutenberg/pull/63628))
+- Improve how the context needed by sources is extended in the editor. ([63513](https://github.com/WordPress/gutenberg/pull/63513))
+- Improve the way block bindings sources are registered. ([63117](https://github.com/WordPress/gutenberg/pull/63117))
+
+#### Post Editor
+- Editor: Remove unused `setNestedValue` util. ([63620](https://github.com/WordPress/gutenberg/pull/63620))
+- Move useSelectNearestEditableBlock out of src/hooks. ([63730](https://github.com/WordPress/gutenberg/pull/63730))
+
+#### Font Library
+- Remove unused font library experiment. ([63890](https://github.com/WordPress/gutenberg/pull/63890))
+
+#### Global Styles
+- Remove unused global styles background screen. ([63887](https://github.com/WordPress/gutenberg/pull/63887))
+
+#### Widgets Editor
+- Widget Editor: Remove unused values returned from 'mapSelect'. ([63738](https://github.com/WordPress/gutenberg/pull/63738))
+
+#### Block API
+- Use `@wordpress/warning` during block registration instead of `console.error` and `console.warn`. ([63610](https://github.com/WordPress/gutenberg/pull/63610))
+
+#### Synced Patterns
+- Quality: Remove "reusable block name hint" code. ([63514](https://github.com/WordPress/gutenberg/pull/63514))
+
+#### Commands
+- Update cmdk. ([63465](https://github.com/WordPress/gutenberg/pull/63465))
+
+#### Document Settings
+- FlatTermSelector: Be more defensive about termIds. ([63461](https://github.com/WordPress/gutenberg/pull/63461))
+
+#### Site Editor
+- Deprecate 'getCanUserCreateMedia' selector. ([63413](https://github.com/WordPress/gutenberg/pull/63413))
+
+#### Block Directory
+- Remove 'edit-post' package dependency. ([63349](https://github.com/WordPress/gutenberg/pull/63349))
+
+### Tools
+
+#### Project Management
+- Issue template: Use checkboxes instead of dropdown. ([63523](https://github.com/WordPress/gutenberg/pull/63523))
+- Sync backport changelog action: Use outputs instead of env. ([63792](https://github.com/WordPress/gutenberg/pull/63792))
+- Run sync when issue is labeled with Sync Backport Changelog. ([63793](https://github.com/WordPress/gutenberg/pull/63793))
+
+#### Testing
+- Downgrade node 22(.5) unit tests to 22.4. ([63728](https://github.com/WordPress/gutenberg/pull/63728))
+- Font Library: Fix flaky end-to-end tests. ([63904](https://github.com/WordPress/gutenberg/pull/63904))
+- Upgrade Playwright to v1.45. ([61443](https://github.com/WordPress/gutenberg/pull/61443))
+- Bug: Eslint `recommended-with-formatting` allows for unnecessary spaces. ([63549](https://github.com/WordPress/gutenberg/pull/63549))
+
+#### Build Tooling & Plugin
+- Fix broken license check script. ([61868](https://github.com/WordPress/gutenberg/pull/61868))
+- React: Restore umd builds. ([63602](https://github.com/WordPress/gutenberg/pull/63602))
+- Upgrade TypeScript to 5.5. ([63012](https://github.com/WordPress/gutenberg/pull/63012))
+- Scripts: Remove now-obsolete `getRenderPropPaths()`. ([63661](https://github.com/WordPress/gutenberg/pull/63661))
+- Scripts: Include variations paths in build. ([63098](https://github.com/WordPress/gutenberg/pull/63098))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @hectorjarquin: Add to code requirements install and import Interactivity API. ([63439](https://github.com/WordPress/gutenberg/pull/63439))
+- @Sourav61: Fix: Removed shuffle button when only 1 pattern is present. ([63093](https://github.com/WordPress/gutenberg/pull/63093))
+- @tomllobet: Create-block - fix - update default folder name to proper default. ([63530](https://github.com/WordPress/gutenberg/pull/63530))
+- @troychaplin: change: Updated soundcloud icon for social link block. ([63504](https://github.com/WordPress/gutenberg/pull/63504))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @afercia @ajlende @akasunil @amitraj2203 @andrewserong @artemiomorales @barryceelen @carolinan @ciampo @DaniGuardiola @dhananjaykuber @dmsnell @dsas @ellatrix @geriux @hectorjarquin @jameskoster @jasmussen @jeherve @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mattsherman @mirka @noisysocks @ntsekouras @oandregal @ockham @priethor @ramonjd @richtabor @ryanwelcher @SantosGuillamot @scruffian @shail-mehta @sirreal @Sourav61 @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tomllobet @troychaplin @tyxla @up1512001 @widoz @youknowriad
+
+
+= 18.8.0 =
+
+## Changelog
+
+### Features
+
+- DataForm: Implement first prototype using duplicate page action. ([63032](https://github.com/WordPress/gutenberg/pull/63032))
+
+
+### Enhancements
+
+#### Components
+- BaseControl: Forward ref on VisualLabel. ([63169](https://github.com/WordPress/gutenberg/pull/63169))
+- CustomSelectControlV2: Allow wrapping item hint to new line. ([62848](https://github.com/WordPress/gutenberg/pull/62848))
+- CustomSelectControlV2: Expose legacy wrapper through private APIs. ([62936](https://github.com/WordPress/gutenberg/pull/62936))
+- CustomSelectControl V2: Keep legacy arrow down behavior only for legacy wrapper. ([62919](https://github.com/WordPress/gutenberg/pull/62919))
+- CustomSelectControlV2: Collapse checkmark space when unchecked. ([63229](https://github.com/WordPress/gutenberg/pull/63229))
+- CustomSelectControlV2: Keep item checkmark top aligned. ([63230](https://github.com/WordPress/gutenberg/pull/63230))
+- DateTime: Create TimeInput component and integrate into TimePicker. ([60613](https://github.com/WordPress/gutenberg/pull/60613))
+- FontSizePicker: Use CustomSelectControl V2 legacy adapter. ([63134](https://github.com/WordPress/gutenberg/pull/63134))
+- Tabs: Add vertical indicator animation. ([62879](https://github.com/WordPress/gutenberg/pull/62879))
+- TimeInput: Add `label` prop. ([63106](https://github.com/WordPress/gutenberg/pull/63106))
+- TimePicker: Add `dateOrder` prop to sort day, month, and year. ([62481](https://github.com/WordPress/gutenberg/pull/62481))
+- ToolbarButton: Deprecate `isDisabled` prop and merge with `disabled`. ([63101](https://github.com/WordPress/gutenberg/pull/63101))
+- Tooltip Component: Add custom class name support. ([63157](https://github.com/WordPress/gutenberg/pull/63157))
+
+#### Data Views
+- Add padding around selected values in author filter. ([63212](https://github.com/WordPress/gutenberg/pull/63212))
+- DataViews filterSortAndPaginate utility: Support sorting by number. ([63187](https://github.com/WordPress/gutenberg/pull/63187))
+- DataViews: Make `view.hiddenFields` optional. ([62876](https://github.com/WordPress/gutenberg/pull/62876))
+- DataViews: Remove Table Cells animation. ([63079](https://github.com/WordPress/gutenberg/pull/63079))
+- DataViews: Replace supportedLayouts prop with defaultLayouts prop instead. ([63287](https://github.com/WordPress/gutenberg/pull/63287))
+- Duplicate modal: Move to 40px components. ([63246](https://github.com/WordPress/gutenberg/pull/63246))
+- Pages: Include avatar in Author field. ([63142](https://github.com/WordPress/gutenberg/pull/63142))
+- Patterns Page: Hide preview column by default. ([63213](https://github.com/WordPress/gutenberg/pull/63213))
+- Posts list powered by DataViews. ([62705](https://github.com/WordPress/gutenberg/pull/62705))
+- Split layout / view options. Use active layout icon for the layout button. ([63205](https://github.com/WordPress/gutenberg/pull/63205))
+- Use status icons in field display. ([63289](https://github.com/WordPress/gutenberg/pull/63289))
+
+#### Block Library
+- Add example for query block and posts list. ([63286](https://github.com/WordPress/gutenberg/pull/63286))
+- Excerpt block: Add example of the block. ([63010](https://github.com/WordPress/gutenberg/pull/63010))
+- Group: Add block support for shadow. ([63295](https://github.com/WordPress/gutenberg/pull/63295))
+- Login/out block: Add example of the block. ([62937](https://github.com/WordPress/gutenberg/pull/62937))
+- Post content block: Add example of the block. ([62968](https://github.com/WordPress/gutenberg/pull/62968))
+- Post title: Add example of the block. ([62955](https://github.com/WordPress/gutenberg/pull/62955))
+- Table Block: Add toolbar button to add a caption. ([47984](https://github.com/WordPress/gutenberg/pull/47984))
+
+#### Block Editor
+- Block position controls: Use V2 legacy adapter instead of V1 `CustomSelectControl`. ([63139](https://github.com/WordPress/gutenberg/pull/63139))
+- DateFormatPicker: Use CustomSelectControl V2 legacy adapter. ([63171](https://github.com/WordPress/gutenberg/pull/63171))
+- Fix inspector inner shadow border. ([63245](https://github.com/WordPress/gutenberg/pull/63245))
+- FontAppearanceControl: Use CustomSelectControl V2 legacy adapter. ([63179](https://github.com/WordPress/gutenberg/pull/63179))
+- Inserter: Remove the dialog behaviour. ([63059](https://github.com/WordPress/gutenberg/pull/63059))
+- SpacingInputControl: Use CustomSelectControl V2 legacy adapter. ([63190](https://github.com/WordPress/gutenberg/pull/63190))
+
+#### Global Styles
+- Background image: Move controls into a popover. ([60151](https://github.com/WordPress/gutenberg/pull/60151))
+- Block background UI controls. ([60100](https://github.com/WordPress/gutenberg/pull/60100))
+- Tweak block background position preview height. ([63225](https://github.com/WordPress/gutenberg/pull/63225))
+
+#### Extensibility
+- DataViews: Register the deletePost action like any third-party action. ([62913](https://github.com/WordPress/gutenberg/pull/62913))
+- DataViews: Register the export pattern action like any third-party action. ([63046](https://github.com/WordPress/gutenberg/pull/63046))
+- DataViews: Register the reset template and template part action like any third-party action. ([63017](https://github.com/WordPress/gutenberg/pull/63017))
+
+#### Design Tools
+- Flex dimensions: Rename "Fill" to "Grow". ([62779](https://github.com/WordPress/gutenberg/pull/62779))
+- List Item: Add color support. ([59892](https://github.com/WordPress/gutenberg/pull/59892))
+- Uniform Focal point labels. ([62438](https://github.com/WordPress/gutenberg/pull/62438))
+
+#### Font Library
+- Font Library Modal: Enhance pagination appearance. ([63210](https://github.com/WordPress/gutenberg/pull/63210))
+- Font Library: Store font subdirectory in post meta. ([63000](https://github.com/WordPress/gutenberg/pull/63000))
+- Move font directory into uploads to match WP 6.5. ([60354](https://github.com/WordPress/gutenberg/pull/60354))
+
+#### Layout
+- Add justification to block toolbar in addition to sidebar. ([62924](https://github.com/WordPress/gutenberg/pull/62924))
+
+#### Site Editor
+- Align rename modals. ([62874](https://github.com/WordPress/gutenberg/pull/62874))
+
+#### Block API
+- block.json: Allow passing filename as `variations` field. ([62092](https://github.com/WordPress/gutenberg/pull/62092))
+
+#### Template Editor
+- Update: Move template areas into a panel. ([62033](https://github.com/WordPress/gutenberg/pull/62033))
+
+#### Block Variations
+- Automatically select group variation if there is only one available. ([61871](https://github.com/WordPress/gutenberg/pull/61871))
+
+#### Zoom Out
+- Add a vertical toolbar for zoom out mode. ([60123](https://github.com/WordPress/gutenberg/pull/60123))
+
+
+### New APIs
+
+#### Block API
+- Introduce "local" attributes and use it for the image block. ([63076](https://github.com/WordPress/gutenberg/pull/63076))
+
+
+### Bug Fixes
+
+- Core Commands: Fix Pages command link. ([63235](https://github.com/WordPress/gutenberg/pull/63235))
+- Docgen: Fix function param for const function expression. ([63034](https://github.com/WordPress/gutenberg/pull/63034))
+- Enable `save draft` button for posts with custom post status. ([63293](https://github.com/WordPress/gutenberg/pull/63293))
+- Ensure device previews extra scrollbar only appears when needed. ([62952](https://github.com/WordPress/gutenberg/pull/62952))
+- Styles specificity: Allow comment form input overrides. ([62960](https://github.com/WordPress/gutenberg/pull/62960))
+
+#### Components
+- CustomSelectControl V2 legacy adapter: Fix trigger button font size. ([63131](https://github.com/WordPress/gutenberg/pull/63131))
+- CustomSelectControl V2: Fix labelling with a visually hidden label. ([63137](https://github.com/WordPress/gutenberg/pull/63137))
+- CustomSelectControl V2: Fix trigger text alignment in RTL languages. ([62869](https://github.com/WordPress/gutenberg/pull/62869))
+- CustomSelectControl V2: Prevent keyboard event propagation in legacy wrapper. ([62907](https://github.com/WordPress/gutenberg/pull/62907))
+- CustomSelectControlV2: Add root element wrapper. ([62803](https://github.com/WordPress/gutenberg/pull/62803))
+- CustomSelectControlV2: Fix item styles. ([62825](https://github.com/WordPress/gutenberg/pull/62825))
+- CustomSelectControlV2: Fix popover styles. ([62821](https://github.com/WordPress/gutenberg/pull/62821))
+- CustomSelectControlV2: Fix select popover content overflow. ([62844](https://github.com/WordPress/gutenberg/pull/62844))
+- CustomSelectControlV2: Tweak item inline padding based on size. ([62850](https://github.com/WordPress/gutenberg/pull/62850))
+- Editor: Fix duplicate save panels. ([62863](https://github.com/WordPress/gutenberg/pull/62863))
+- Fix UnitControl select disabled state colors. ([62970](https://github.com/WordPress/gutenberg/pull/62970))
+- Fix extra scrollbar when a popover extends past the viewport. ([62894](https://github.com/WordPress/gutenberg/pull/62894))
+- Fix the 'useUpdateEffect' hook in strict mode. ([62974](https://github.com/WordPress/gutenberg/pull/62974))
+- ProgressBar: Fix indeterminate RTL support. ([63129](https://github.com/WordPress/gutenberg/pull/63129))
+- RangeControl: Fix RTL support for custom marks. ([63198](https://github.com/WordPress/gutenberg/pull/63198))
+- SelectControl: Fix disabled styles. ([63266](https://github.com/WordPress/gutenberg/pull/63266))
+- Tabs: Fix "With tab icons" Storybook example. ([63297](https://github.com/WordPress/gutenberg/pull/63297))
+- Tabs: Fix text-align when text wraps in vertical mode. ([63272](https://github.com/WordPress/gutenberg/pull/63272))
+- TimePicker: Fix time zone overflow. ([63209](https://github.com/WordPress/gutenberg/pull/63209))
+- UnitControl: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([62988](https://github.com/WordPress/gutenberg/pull/62988))
+
+#### Block Library
+- Add Aspect ratio control on Image blocks in Grids. ([62891](https://github.com/WordPress/gutenberg/pull/62891))
+- Audio Block: Do not persist blob urls and fix undo. ([63257](https://github.com/WordPress/gutenberg/pull/63257))
+- File block: Do not persist blob urls and fix undo. ([63282](https://github.com/WordPress/gutenberg/pull/63282))
+- Fix Incorrect URL basename logic in EmbedPreview. ([63052](https://github.com/WordPress/gutenberg/pull/63052))
+- Fix: Update "Link Text" label to "Text" on Social Icons block #60966. ([61715](https://github.com/WordPress/gutenberg/pull/61715))
+- List: Maintain nested list on parent item removal. ([62949](https://github.com/WordPress/gutenberg/pull/62949))
+- Navigation: Allow themes to override block library text-decoration rule. ([63406](https://github.com/WordPress/gutenberg/pull/63406))
+- Patterns: Check for edited entity content property when exporting. ([63227](https://github.com/WordPress/gutenberg/pull/63227))
+- Reduce specificity of social link icon specific colors. ([63049](https://github.com/WordPress/gutenberg/pull/63049))
+- Refactor Post Date Relative Time Rendering for Future Dates. ([62979](https://github.com/WordPress/gutenberg/pull/62979))
+- Site Editor: Fix template parts 'Reset' action. ([62951](https://github.com/WordPress/gutenberg/pull/62951))
+- Video Block: Do not persist blob urls and fix undo. ([63238](https://github.com/WordPress/gutenberg/pull/63238))
+
+#### Post Editor
+- Editor: Do not truncate post excerpt if not editable. ([63314](https://github.com/WordPress/gutenberg/pull/63314))
+- Fix: Background height and padding in non-iframe editor canvas. ([63222](https://github.com/WordPress/gutenberg/pull/63222))
+- Fix: Crash when onActionPerformed is used with callback actions. ([63120](https://github.com/WordPress/gutenberg/pull/63120))
+- Fix: Permanently delete post action does not calls onActionPerformed. ([63121](https://github.com/WordPress/gutenberg/pull/63121))
+- Fix: Triple scrollbars in device previews. ([62940](https://github.com/WordPress/gutenberg/pull/62940))
+- Post editor: Increase specificity of bottom padding. ([63288](https://github.com/WordPress/gutenberg/pull/63288))
+- Actions: Translation should depend on number of items. ([62857](https://github.com/WordPress/gutenberg/pull/62857))
+
+#### Data Views
+- DataViews list layout: Fix action alignment. ([62971](https://github.com/WordPress/gutenberg/pull/62971))
+- DataViews: Restore preview focus outline in grid layout. ([62991](https://github.com/WordPress/gutenberg/pull/62991))
+- Fix buttonless table header alignment. ([62877](https://github.com/WordPress/gutenberg/pull/62877))
+- Fix typo in string for trashing posts. ([63119](https://github.com/WordPress/gutenberg/pull/63119))
+- Patterns: Avoid mapping template parts objects to patterns. ([62927](https://github.com/WordPress/gutenberg/pull/62927))
+
+#### Block Style Variations
+- Block supports: Ensure tools panel dropdown are visible on mobile. ([62896](https://github.com/WordPress/gutenberg/pull/62896))
+- Section Styles: Fix error when blocks are deregistered. ([63252](https://github.com/WordPress/gutenberg/pull/63252))
+- Section Styles: Prevent flash of variation styles in post editor. ([63071](https://github.com/WordPress/gutenberg/pull/63071))
+- Section Styles: Resolve ref values in variations data. ([63172](https://github.com/WordPress/gutenberg/pull/63172))
+
+#### Layout
+- Only hide drop indicator when grid has `isManualPlacement` set. ([63226](https://github.com/WordPress/gutenberg/pull/63226))
+- Remove dotted border from grid dropzone. ([63162](https://github.com/WordPress/gutenberg/pull/63162))
+- Resizing in Auto mode shouldn't add `columnStart` and `rowStart` values. ([63160](https://github.com/WordPress/gutenberg/pull/63160))
+- Fix invalid css for nested fullwidth layouts with zero padding applied. ([63436](https://github.com/WordPress/gutenberg/pull/63436))
+
+#### Global Styles
+- Elements: Avoid specificity bump for top-level element-only selectors. ([63403](https://github.com/WordPress/gutenberg/pull/63403))
+- Global styles revisions: Ensure that user-defined variation styles CSS is generated. ([62768](https://github.com/WordPress/gutenberg/pull/62768))
+- Root padding styles: Include alignwide in nested has-outer-padding logic. ([63207](https://github.com/WordPress/gutenberg/pull/63207))
+- Remove letter-spacing from typography element preview. ([60322](https://github.com/WordPress/gutenberg/pull/60322))
+- Only add customizer additional CSS to global styles in block themes. ([63331](https://github.com/WordPress/gutenberg/pull/63331))
+
+#### Site Editor
+- Make SiteHub available for Pages, Patterns, and Templates in mobile viewports. ([63118](https://github.com/WordPress/gutenberg/pull/63118))
+- Patterns and templates cannot be edited from sidebar mobile view. ([63002](https://github.com/WordPress/gutenberg/pull/63002))
+- Site Editor Sidebar: Hide horizontal scrollbar when navigating. ([63194](https://github.com/WordPress/gutenberg/pull/63194))
+
+#### Synced Patterns
+- Ensure disable overrides button is active for image blocks with captions or links. ([62948](https://github.com/WordPress/gutenberg/pull/62948))
+- Fix second scrollbar when editing patterns in the post editor. ([62909](https://github.com/WordPress/gutenberg/pull/62909))
+- Pattern overrides: Fix aspect ratio not working in image with overrides. ([62828](https://github.com/WordPress/gutenberg/pull/62828))
+
+#### Block Editor
+- Featured Image Panel: Align text and icons horizontally to avoid clipping. ([62842](https://github.com/WordPress/gutenberg/pull/62842))
+- Zoom Out: Move the hook to the inserter component. ([63315](https://github.com/WordPress/gutenberg/pull/63315))
+- Fix error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
+
+#### Block bindings
+- Disable post meta editing in blocks inside a Query Loop. ([63237](https://github.com/WordPress/gutenberg/pull/63237))
+- Image block: Ensure extenders that rely on media ids in block html are supported by block bindings. ([63013](https://github.com/WordPress/gutenberg/pull/63013))
+
+#### Patterns
+- Fix: Restrict export pattern action to user patterns. ([63228](https://github.com/WordPress/gutenberg/pull/63228))
+
+#### Posts/Tags/Categories Screen
+- Constrain `is-fullscreen-mode` admin body class to posts list. ([63166](https://github.com/WordPress/gutenberg/pull/63166))
+
+#### Inspector Controls
+- Fix button wrapping in the document Inspector. ([63062](https://github.com/WordPress/gutenberg/pull/63062))
+
+#### Design Tools
+- Duotone: Fix code typo, to ensure Duotone updates correctly in Safari. ([62953](https://github.com/WordPress/gutenberg/pull/62953))
+
+#### Commands
+- Fix issue of HTML entities rendering in command menu. ([62606](https://github.com/WordPress/gutenberg/pull/62606))
+
+#### Typography
+- Use available font weights and styles in FontAppearanceControl. ([61915](https://github.com/WordPress/gutenberg/pull/61915))
+- Font Appearance Control: Refactor font appearance fallbacks. ([63215](https://github.com/WordPress/gutenberg/pull/63215))
+
+
+### Accessibility
+
+- Allow Escape key to move focus to editor region when in select mode. ([62196](https://github.com/WordPress/gutenberg/pull/62196))
+- Focus Editor Region from Template Footer Click. ([62595](https://github.com/WordPress/gutenberg/pull/62595))
+
+#### Components
+- Button: Stabilize `__experimentalIsFocusable` prop. ([62282](https://github.com/WordPress/gutenberg/pull/62282))
+- Fix inaccessible disabled `Button`s. ([62306](https://github.com/WordPress/gutenberg/pull/62306))
+- Make Tabs have a fluid height. ([62027](https://github.com/WordPress/gutenberg/pull/62027))
+- ToolbarButton: Always keep focusable when disabled. ([63102](https://github.com/WordPress/gutenberg/pull/63102))
+
+#### Global Styles
+- Fix unlabeled Remove shadow buttons. ([63197](https://github.com/WordPress/gutenberg/pull/63197))
+
+#### Block Library
+- Make usage of the settings icon more consistent. ([63020](https://github.com/WordPress/gutenberg/pull/63020))
+
+#### Data Views
+- Add translation context for 'view options' label. ([63031](https://github.com/WordPress/gutenberg/pull/63031))
+- Fix filter chip contrast. ([62865](https://github.com/WordPress/gutenberg/pull/62865))
+
+#### Media
+- Update URLPopover role and focus return. ([61313](https://github.com/WordPress/gutenberg/pull/61313))
+
+
+### Performance
+
+- Core data: Batch receiveUserPermission. ([63201](https://github.com/WordPress/gutenberg/pull/63201))
+- Perf tests: Make pages test compatible with base branch. ([63204](https://github.com/WordPress/gutenberg/pull/63204))
+
+#### Block hooks
+- Optimize selectors in the control component. ([63141](https://github.com/WordPress/gutenberg/pull/63141))
+
+
+### Experiments
+
+#### Layout
+- Allow inserting blocks directly in empty grid cells. ([63108](https://github.com/WordPress/gutenberg/pull/63108))
+- Use `manualPlacement` attribute to set manual grid mode and allow responsive behaviour in both modes. ([62777](https://github.com/WordPress/gutenberg/pull/62777))
+
+
+### Documentation
+
+- Add note about postcss-urlrebase package patch. ([63015](https://github.com/WordPress/gutenberg/pull/63015))
+- Add RichText formatting example to the Editor curation documentation. ([63065](https://github.com/WordPress/gutenberg/pull/63065))
+- Block supports: Add documentation for 'splitting'. ([63016](https://github.com/WordPress/gutenberg/pull/63016))
+- Fix typo to be preposition, not verb, in some package comments and documentations. ([62945](https://github.com/WordPress/gutenberg/pull/62945))
+- Fix urls to developer documentation. ([63104](https://github.com/WordPress/gutenberg/pull/63104))
+- Interactivity API: Fix minor typos in code snippets. ([62890](https://github.com/WordPress/gutenberg/pull/62890)), ([63234](https://github.com/WordPress/gutenberg/pull/63234))
+- Interactivity API: Fix variable name in color directive example. ([62912](https://github.com/WordPress/gutenberg/pull/62912))
+- Interactivity API: Include references to more examples from the documentation. ([63025](https://github.com/WordPress/gutenberg/pull/63025))
+- Interactivity API: Recommend kebab-case in data-wp-class. ([62817](https://github.com/WordPress/gutenberg/pull/62817))
+- Remove link to polyfill.io. ([62883](https://github.com/WordPress/gutenberg/pull/62883))
+- Storybook: Fix links for block editor examples. ([63132](https://github.com/WordPress/gutenberg/pull/63132))
+- ToolbarButton: Fix documentation for `accessibleWhenDisabled`. ([63140](https://github.com/WordPress/gutenberg/pull/63140))
+- Update React dev docs rule hook URL. ([62995](https://github.com/WordPress/gutenberg/pull/62995))
+
+
+### Code Quality
+
+- Add linguist-documentation attribute to docs/ directory. ([62651](https://github.com/WordPress/gutenberg/pull/62651))
+- Conditionally call focus with getEditorRegion. ([62980](https://github.com/WordPress/gutenberg/pull/62980))
+- Core Data: Remove entity configuration '__experimentalNoFetch' flag checks. ([63303](https://github.com/WordPress/gutenberg/pull/63303))
+- Dependencies: Upgrades and deduplication. ([62657](https://github.com/WordPress/gutenberg/pull/62657))
+- Format Library: Clean up 'Highlight' format components. ([62965](https://github.com/WordPress/gutenberg/pull/62965))
+- Remove postcss-local-keyframes from dependencies. ([63224](https://github.com/WordPress/gutenberg/pull/63224))
+- Upgrade postcss-urlrebase package. ([63075](https://github.com/WordPress/gutenberg/pull/63075))
+
+#### Data Views
+- DataViews: Fix double check in `isTemplateRemovable`. ([63021](https://github.com/WordPress/gutenberg/pull/63021))
+- DataViews: Remove the AnyItem type. ([62856](https://github.com/WordPress/gutenberg/pull/62856))
+- DataViews: Removing mapping of user patterns to temporary object. ([63042](https://github.com/WordPress/gutenberg/pull/63042))
+- DataViews: Replace hiddenFields configuration with fields property instead. ([63127](https://github.com/WordPress/gutenberg/pull/63127))
+- DataViews: Simplify selection setting. ([62846](https://github.com/WordPress/gutenberg/pull/62846))
+
+#### Block Editor
+- Remove CSS hack for Internet Explorer 11. ([63220](https://github.com/WordPress/gutenberg/pull/63220))
+- Remove duplicate translator comment. ([62860](https://github.com/WordPress/gutenberg/pull/62860))
+
+#### Components
+- Allow ariakit and framer motion imports in the components package. ([63123](https://github.com/WordPress/gutenberg/pull/63123))
+- Normalize focusable disabled ToolbarButton usage. ([63130](https://github.com/WordPress/gutenberg/pull/63130))
+- Sidebar: Add a shared component for the inserter and list view. ([62343](https://github.com/WordPress/gutenberg/pull/62343))
+- Tabs: Split animation logic into multiple separate composable utilities. ([62942](https://github.com/WordPress/gutenberg/pull/62942))
+
+#### Global Styles
+- Global Styles: Allow variations to be filtered by multiple properties. ([62847](https://github.com/WordPress/gutenberg/pull/62847))
+- Global Styles: Simplify code to fetch color and typography variation. ([62827](https://github.com/WordPress/gutenberg/pull/62827))
+- Make a shared component for typography and color preview. ([62829](https://github.com/WordPress/gutenberg/pull/62829))
+- Section Styles: Clean up block style variation filters. ([62858](https://github.com/WordPress/gutenberg/pull/62858))
+
+#### Block Library
+- Gallery Block: Clean up v1 code. ([63285](https://github.com/WordPress/gutenberg/pull/63285))
+
+#### Site Editor
+- Clean up unused Table component. ([63283](https://github.com/WordPress/gutenberg/pull/63283))
+
+#### Rich Text
+- Raw handling: Remove IE11 fallback code. ([63219](https://github.com/WordPress/gutenberg/pull/63219))
+
+#### Zoom Out
+- Replace deprecated selector. ([63144](https://github.com/WordPress/gutenberg/pull/63144))
+
+#### Block bindings
+- Add comment about `useSelect` usage in withBlockBindingSupport. ([63005](https://github.com/WordPress/gutenberg/pull/63005))
+
+#### HTML API
+- Compat: Update HTML API with changes from 6.6. ([63089](https://github.com/WordPress/gutenberg/pull/63089))
+
+
+### Tools
+
+- Dependency extraction: Map to `regenerator-runtime` instead of `wp-polyfill`. ([63091](https://github.com/WordPress/gutenberg/pull/63091))
+- Env: Remove version field from docker-compose configuration. ([63099](https://github.com/WordPress/gutenberg/pull/63099))
+- Eslint-plugin: Add method-signature-style TypeScript lint rule. ([62718](https://github.com/WordPress/gutenberg/pull/62718))
+- Scripts: Ensure that typescript-eslint checks for unused vars. ([62925](https://github.com/WordPress/gutenberg/pull/62925))
+- Update new release issue template to remove core editor chat item. ([62864](https://github.com/WordPress/gutenberg/pull/62864))
+
+#### Testing
+- Automatically sync backport changelog to issue. ([62973](https://github.com/WordPress/gutenberg/pull/62973))
+- Block styles variations E2E: Wait for Save button before editing global styles. ([62915](https://github.com/WordPress/gutenberg/pull/62915))
+- Cherry pick automation: Fix for forks. ([62900](https://github.com/WordPress/gutenberg/pull/62900))
+- Cherry pick workflow: Improve message after conflict. ([62826](https://github.com/WordPress/gutenberg/pull/62826))
+- DataViews: Add performance test for pages. ([63170](https://github.com/WordPress/gutenberg/pull/63170))
+- Fix typo in column block fixture file. ([63007](https://github.com/WordPress/gutenberg/pull/63007))
+- Performance tests: Fix for 6.5. ([62871](https://github.com/WordPress/gutenberg/pull/62871))
+- Performance tests: Restore 6.5-compatible locator. ([63041](https://github.com/WordPress/gutenberg/pull/63041))
+- Re-enable image block cropping test (#62781). ([62854](https://github.com/WordPress/gutenberg/pull/62854))
+- Update method for changing the content in 'editor-modes' end-to-end test. ([62957](https://github.com/WordPress/gutenberg/pull/62957))
+- Update the `project-management-automation`action to use Node.js 20. ([62851](https://github.com/WordPress/gutenberg/pull/62851))
+- Upgrade web-vitals package. ([63019](https://github.com/WordPress/gutenberg/pull/63019))
+
+#### Plugin
+- Add local version of wp-env schema to .wp-env.json. ([63253](https://github.com/WordPress/gutenberg/pull/63253))
+
+#### Build Tooling
+- Build: Enable TypeScript skipDefaultLibCheck. ([63056](https://github.com/WordPress/gutenberg/pull/63056))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @airman5573: Fix variable name in color directive example for Interactivity API. ([62912](https://github.com/WordPress/gutenberg/pull/62912))
+- @aliaghdam: Tooltip Component: Add custom class name support. ([63157](https://github.com/WordPress/gutenberg/pull/63157))
+- @bogiii: DateTime: Create TimeInput component and integrate into TimePicker. ([60613](https://github.com/WordPress/gutenberg/pull/60613))
+- @Chrico: Scripts: Ensure that typescript-eslint checks for unused vars. ([62925](https://github.com/WordPress/gutenberg/pull/62925))
+- @dhananjaykuber: Fix Incorrect URL basename logic in EmbedPreview. ([63052](https://github.com/WordPress/gutenberg/pull/63052))
+- @iamibrahimriaz: Update iapi-about.md. ([63234](https://github.com/WordPress/gutenberg/pull/63234))
+- @iworks: Translation should depend on number of items. ([62857](https://github.com/WordPress/gutenberg/pull/62857))
+- @roygbyte: Fix typo to be preposition, not verb, in some package comments and documentations. ([62945](https://github.com/WordPress/gutenberg/pull/62945))
+- @shreya0204: Add justification to block toolbar in addition to sidebar. ([62924](https://github.com/WordPress/gutenberg/pull/62924))
+- @sejas: Fix: Error when calling the PostActions `view-post` callback. ([63460](https://github.com/WordPress/gutenberg/pull/63460))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @airman5573 @akasunil @aliaghdam @amitraj2203 @bogiii @carolinan @Chrico @ciampo @costasovo @creativecoder @DaniGuardiola @desrosj @dhananjaykuber @dmsnell @ellatrix @fluiddot @geriux @hbhalodia @iamibrahimriaz @iworks @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mikachan @mirka @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @richtabor @roygbyte @SantosGuillamot @scruffian @shail-mehta @shreya0204 @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @westonruter @youknowriad
+
+
+
+
+= 18.7.1 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+- Button Block: Add back compat for WP6.4 regarding HTML Tag Processor. ([63082](https://github.com/WordPress/gutenberg/pull/63082))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@t-hamano
+
+
+= 18.7.0 =
+
+## Changelog
+
+### Enhancements
+
+- Add: Content panel for template parts. ([62034](https://github.com/WordPress/gutenberg/pull/62034))
+- Move Sticky toggle to status popover. ([62782](https://github.com/WordPress/gutenberg/pull/62782))
+- Rename yieldToMain to splitTask and export from @wordpress/interactivity. ([62665](https://github.com/WordPress/gutenberg/pull/62665))
+- Update: Check assignable properties on the duplicate action. ([62590](https://github.com/WordPress/gutenberg/pull/62590))
+- Update: Followups to the template and template_lock rest api addition. ([62696](https://github.com/WordPress/gutenberg/pull/62696))
+- Update: Reverse backport changes on post type REST API changes. ([62751](https://github.com/WordPress/gutenberg/pull/62751))
+- Align naming modals. ([62788](https://github.com/WordPress/gutenberg/pull/62788))y
+- Add writing mode support to other blocks. ([62727](https://github.com/WordPress/gutenberg/pull/62727))
+- Display the DocumentBar for Style Book and Style Revisions. ([62669](https://github.com/WordPress/gutenberg/pull/62669))
+- fetchLinkSuggestions: Allow for partial matching. ([62570](https://github.com/WordPress/gutenberg/pull/62570))
+- DataViews: Support passing the registry to actions callbacks. ([62505](https://github.com/WordPress/gutenberg/pull/62505))
+- Add tooltip on hover of color and typography presets. ([62201](https://github.com/WordPress/gutenberg/pull/62201))
+- Revert change that removes the social link block when pressing backspace in the URL Popover. ([61344](https://github.com/WordPress/gutenberg/pull/61344))
+
+
+### Bug Fixes
+
+- Add `context` in post actions API. ([62443](https://github.com/WordPress/gutenberg/pull/62443))
+- Add `html` to reset styles for the `.editor-styles-wrapper` container. ([62350](https://github.com/WordPress/gutenberg/pull/62350))
+- Cherry pick script: Make authenticated requests. ([62473](https://github.com/WordPress/gutenberg/pull/62473))
+- Editor: Fix blocked Post Publish Panel buttons on mobile. ([62736](https://github.com/WordPress/gutenberg/pull/62736))
+- Fix cherry-pick script, add missing --repo arg. ([62643](https://github.com/WordPress/gutenberg/pull/62643))
+- Fix rawHandling, pasteHandling for mixed content with blocks and classic. ([62545](https://github.com/WordPress/gutenberg/pull/62545))
+- Fix: Active template is not highlighted properly in list view. ([62811](https://github.com/WordPress/gutenberg/pull/62811))
+- Fix: Check Capability to create pages on DataViews add new page button. ([62592](https://github.com/WordPress/gutenberg/pull/62592))
+- Fix: Check ability to create patterns on the add new pattern modal. ([62633](https://github.com/WordPress/gutenberg/pull/62633))
+- Fix: Check create capability on duplicate post action. ([62620](https://github.com/WordPress/gutenberg/pull/62620))
+- Fix: Check permissions on duplicate pattern and template part actions. ([62757](https://github.com/WordPress/gutenberg/pull/62757))
+- Fix: Comments and Pingbacks get cleared out when a pattern is edited. ([62507](https://github.com/WordPress/gutenberg/pull/62507))
+- Fix: DataViews: Active page is not highlighted properly in list view. ([62378](https://github.com/WordPress/gutenberg/pull/62378))
+- Fix: Include permission management on permanently delete, rename, and restore. ([62754](https://github.com/WordPress/gutenberg/pull/62754))
+- Fix: List view renders an empty menu when no actions are eligible. ([62786](https://github.com/WordPress/gutenberg/pull/62786))
+- Fix: Post_type template is not used when creating a page in site editor. ([62488](https://github.com/WordPress/gutenberg/pull/62488))
+- Fix: Resetting template part causes notification saying it's been delete. ([62521](https://github.com/WordPress/gutenberg/pull/62521))
+- Fix: The trash post action doesn't take into account user capabilities. ([62589](https://github.com/WordPress/gutenberg/pull/62589))
+- Inspector: Improve handling of long words in post titles. ([62691](https://github.com/WordPress/gutenberg/pull/62691))
+- Revert "Revert test data for `WithSlug` variation (#62579)". ([62587](https://github.com/WordPress/gutenberg/pull/62587))
+- Show publish panel only in edit mode. ([62813](https://github.com/WordPress/gutenberg/pull/62813))
+- Site Editor: Improve the frame animation. ([62676](https://github.com/WordPress/gutenberg/pull/62676))
+- DataViews: Remove selection correcting, set initial state. ([62796](https://github.com/WordPress/gutenberg/pull/62796))
+- Pattern overrides: Disallow override for image with caption/href. ([62747](https://github.com/WordPress/gutenberg/pull/62747))
+- Editor: Make VisualEditor a stacking context. ([62681](https://github.com/WordPress/gutenberg/pull/62681))
+- Fix toggle active font logic. ([62614](https://github.com/WordPress/gutenberg/pull/62614))
+- Save Panel: Remove connections icon and fix padding. ([62542](https://github.com/WordPress/gutenberg/pull/62542))
+- Editor: Render editPost slots only in the post editor (same for site editor). ([62531](https://github.com/WordPress/gutenberg/pull/62531))
+- Fix: Don't allow synced patterns to be inserted on shuffling. ([62422](https://github.com/WordPress/gutenberg/pull/62422))
+- Fix ExcerptPanel decode issue. ([62336](https://github.com/WordPress/gutenberg/pull/62336))
+
+#### Block Library
+- Add letter spacing inheritance for the navigation block. ([62745](https://github.com/WordPress/gutenberg/pull/62745))
+- Caption utility component: Allow the main CSS Class Name to be excluded from the markup. ([62485](https://github.com/WordPress/gutenberg/pull/62485))
+- Fix: Empty style attribute issue in navigation block. ([62600](https://github.com/WordPress/gutenberg/pull/62600))
+- Image Block: Fix Aspect Ratio button position. ([62776](https://github.com/WordPress/gutenberg/pull/62776))
+- Media & text: Update the image replacement logic. ([62030](https://github.com/WordPress/gutenberg/pull/62030))
+- Post Date Block: Fix PHP warning error. ([62783](https://github.com/WordPress/gutenberg/pull/62783))
+- Template Part: Improve how the tag name attribute is handled. ([62785](https://github.com/WordPress/gutenberg/pull/62785))
+- fix: Update block category to design and build documentation. ([61905](https://github.com/WordPress/gutenberg/pull/61905))
+
+#### Global Styles
+- Allow children of alignfull flow layouts to have root padding. ([62670](https://github.com/WordPress/gutenberg/pull/62670))
+- Prevent duplicate block style variations CSS. ([62465](https://github.com/WordPress/gutenberg/pull/62465))
+- Remove obsolete hook resolving shared block style variations. ([62808](https://github.com/WordPress/gutenberg/pull/62808))
+- Section Styles: Switch away from using init for variation registration. ([62640](https://github.com/WordPress/gutenberg/pull/62640))
+- Skip registration of variation styles when unsupported. ([62529](https://github.com/WordPress/gutenberg/pull/62529))
+- Styles: Lower specificity of figcaption style to allow theme.json override. ([62689](https://github.com/WordPress/gutenberg/pull/62689))
+
+#### Components
+- CustomSelectControl V2: Fix setting initial value and reacting to external controlled updates. ([62733](https://github.com/WordPress/gutenberg/pull/62733))
+- CustomSelectControlV2: Handle long strings in selected value. ([62198](https://github.com/WordPress/gutenberg/pull/62198))
+
+#### Block Editor
+- Raw handling: Fix too aggressive indented list removal. ([62622](https://github.com/WordPress/gutenberg/pull/62622))
+- Writing flow: Split heading into default block. ([61891](https://github.com/WordPress/gutenberg/pull/61891))
+
+
+### Accessibility
+
+- Fix custom color palette. ([62753](https://github.com/WordPress/gutenberg/pull/62753))
+- Fix lock modal dialog accessibility and semantics. ([62795](https://github.com/WordPress/gutenberg/pull/62795))
+- Image block: Fix focus style not around whole image when linked. ([62556](https://github.com/WordPress/gutenberg/pull/62556))
+- Pages data view: Update view icons. ([62136](https://github.com/WordPress/gutenberg/pull/62136))
+- Make the fonts management modal dialog more discoverable. ([62129](https://github.com/WordPress/gutenberg/pull/62129))
+
+
+### Performance
+
+- Improve performance of `compute_style_properties` method. ([62522](https://github.com/WordPress/gutenberg/pull/62522))
+- Run block variation hook only for matches. ([62617](https://github.com/WordPress/gutenberg/pull/62617))
+- Section Styles: Improve performance and conceptual consistency. ([62712](https://github.com/WordPress/gutenberg/pull/62712))
+
+
+### Experiments
+
+- Grid interactivity: Allow blocks to be positioned in manual mode using drag and drop. ([61025](https://github.com/WordPress/gutenberg/pull/61025))
+
+
+### Documentation
+
+- Add `VisualEditorGlobalKeyboardShortcuts` documentation. ([62710](https://github.com/WordPress/gutenberg/pull/62710))
+- Add changelog entry for splitTask export from @wordpress/interactivity. ([62805](https://github.com/WordPress/gutenberg/pull/62805))
+- Add documentation for PostSlug and PostSlugCheck component. ([62102](https://github.com/WordPress/gutenberg/pull/62102))
+- Adds comment on blocks resource referencing wp_block post type. ([62722](https://github.com/WordPress/gutenberg/pull/62722))
+- Changelogs: Standardize sections. ([58268](https://github.com/WordPress/gutenberg/pull/58268))
+- Correct documentation for WP_Block_Parser_Frame class. ([62598](https://github.com/WordPress/gutenberg/pull/62598))
+- Create Block: Add missing changelog entries. ([62791](https://github.com/WordPress/gutenberg/pull/62791))
+- Docs/iAPI: Fix wrong code snippet in data-wp-run example. ([62835](https://github.com/WordPress/gutenberg/pull/62835))
+- Docs/iapi warnings new directives wp 6 6. ([62789](https://github.com/WordPress/gutenberg/pull/62789))
+- Fix async directives API documentation. ([62759](https://github.com/WordPress/gutenberg/pull/62759))
+- Fix: Remove inexistent link from the documentation. ([62624](https://github.com/WordPress/gutenberg/pull/62624))
+- Interactivity API docs: Add wp-async directives doc. ([62663](https://github.com/WordPress/gutenberg/pull/62663))
+- Query Loop block: Clarify explanation around query loop variation example. ([62605](https://github.com/WordPress/gutenberg/pull/62605))
+- Small Typo correction in block-library.md file. ([62765](https://github.com/WordPress/gutenberg/pull/62765))
+- Update link to API section in block-editor README.md. ([62671](https://github.com/WordPress/gutenberg/pull/62671))
+- Update old links in @wordpress/babel-preset-default. ([62616](https://github.com/WordPress/gutenberg/pull/62616))
+- Updates the reference links in @wordpress/compose documentation. ([62593](https://github.com/WordPress/gutenberg/pull/62593))
+- [Developer Documentation] fix link URL. ([62725](https://github.com/WordPress/gutenberg/pull/62725))
+
+
+### Code Quality
+
+- Autoformat changelogs. ([62650](https://github.com/WordPress/gutenberg/pull/62650))
+- Autoformat e2e-tests package JavaScript. ([62572](https://github.com/WordPress/gutenberg/pull/62572))
+- Edit site: Do not autoformat edit-site/lib. ([62573](https://github.com/WordPress/gutenberg/pull/62573))
+- Move dep to dev deps. ([62673](https://github.com/WordPress/gutenberg/pull/62673))
+- Rename readme file with uppercase extension. ([62697](https://github.com/WordPress/gutenberg/pull/62697))
+- Site Editor: Don't render empty body tag. ([62769](https://github.com/WordPress/gutenberg/pull/62769))
+- Change `grid-visualizer` folder name to `grid`. ([62810](https://github.com/WordPress/gutenberg/pull/62810))
+- Add lib-font credits and license in source code. ([60973](https://github.com/WordPress/gutenberg/pull/60973))
+
+#### Components
+- Remove Framer Motion from `DropZone`. ([62044](https://github.com/WordPress/gutenberg/pull/62044))
+- `CustomSelectControlV2`: Fix handling of extra attributes passed to `options` in the legacy adapter. ([62255](https://github.com/WordPress/gutenberg/pull/62255))
+
+
+### Tools
+
+- Dependencies: Upgrade @octokit/webhooks. ([62666](https://github.com/WordPress/gutenberg/pull/62666))
+- Rename the wp-env schema to not be a dotfile. ([62634](https://github.com/WordPress/gutenberg/pull/62634))
+- env: Ignore `\$schema` key in environment configuration parsing. ([62626](https://github.com/WordPress/gutenberg/pull/62626))
+
+#### Testing
+- Add end-to-end test to ensure block bindings work well with symbols and numbers. ([62410](https://github.com/WordPress/gutenberg/pull/62410))
+- CustomSelectControl: Align v1 and legacy v2 unit tests. ([62706](https://github.com/WordPress/gutenberg/pull/62706))
+- Fix end-to-end tests in dev mode. ([62642](https://github.com/WordPress/gutenberg/pull/62642))
+- Improve maintainability of theme json class tests. ([62463](https://github.com/WordPress/gutenberg/pull/62463))
+- Release automation: Try cherry-picking automation. ([62716](https://github.com/WordPress/gutenberg/pull/62716))
+- Remove changelog checks for branches other than trunk. ([62645](https://github.com/WordPress/gutenberg/pull/62645))
+- Skip failing image block test. ([62781](https://github.com/WordPress/gutenberg/pull/62781))
+- Skip test: Create a new page, edit template and toggle page template preview. ([62799](https://github.com/WordPress/gutenberg/pull/62799))
+- Tests: Simplify test set up in `WP_Block_Supports_Block_Style_Variations_Test`. ([62637](https://github.com/WordPress/gutenberg/pull/62637))
+- Theme JSON resolver: Read theme.json files from the styles/ folder only once. ([62638](https://github.com/WordPress/gutenberg/pull/62638))
+
+#### Build Tooling
+- Generic name for previous version of WP tests. ([62853](https://github.com/WordPress/gutenberg/pull/62853))
+- Github PHP changes workflow: Remove it. ([62609](https://github.com/WordPress/gutenberg/pull/62609))
+
+
+### Various
+
+- Update Private API opt-in string for WP 6.6. ([62635](https://github.com/WordPress/gutenberg/pull/62635))
+- Update caniuse-lite dependency to latest version. ([62611](https://github.com/WordPress/gutenberg/pull/62611))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @aatanasovdev: Caption utility component: Allow the main CSS Class Name to be excluded from the markup. ([62485](https://github.com/WordPress/gutenberg/pull/62485))
+- @dilipbheda: Correct documentation for WP_Block_Parser_Frame class. ([62598](https://github.com/WordPress/gutenberg/pull/62598))
+- @graylaurenm: Add letter spacing inheritance for the navigation block. ([62745](https://github.com/WordPress/gutenberg/pull/62745))
+- @ivan-ottinger: Editor: Fix blocked Post Publish Panel buttons on mobile. ([62736](https://github.com/WordPress/gutenberg/pull/62736))
+- @michakrapp: [Developer Documentation] fix link URL. ([62725](https://github.com/WordPress/gutenberg/pull/62725))
+- @saulyz: Fix rawHandling, pasteHandling for mixed content with blocks and classic. ([62545](https://github.com/WordPress/gutenberg/pull/62545))
+- @snehapatil2001: fix: Update block category to design and build documentation. ([61905](https://github.com/WordPress/gutenberg/pull/61905))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @aatanasovdev @afercia @ajlende @akasunil @amitraj2203 @artemiomorales @carolinan @cbravobernal @ciampo @creativecoder @DaniGuardiola @dilipbheda @ellatrix @fullofcaffeine @geriux @graylaurenm @gziolo @itzmekhokan @ivan-ottinger @jameskoster @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @matiasbenedetto @michakrapp @mirka @noisysocks @ntsekouras @oandregal @peterwilsoncc @ramonjd @sabernhardt @SantosGuillamot @saulyz @shail-mehta @sirreal @snehapatil2001 @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @up1512001 @vcanales @vipul0425 @westonruter @youknowriad
+
+
+
+
+= 18.6.1 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+- Navigation block: Fix submenu not opening on macOS Safari. ([62800](https://github.com/WordPress/gutenberg/pull/62800))
+
+### Code Quality
+- Template Part: Improve how the tag name attribute is handled (#62785)(https://github.com/WordPress/gutenberg/pull/62785)
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@luisherranz @aaronjorbin @gziolo @westonruter @cbravobernal 
+
+
+= 18.6.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Design Tools
+
+-   Post content block: Add background image and padding support. ([62499](https://github.com/WordPress/gutenberg/pull/62499))
+-   Quote blocks: Add background image and minimum height support. ([62497](https://github.com/WordPress/gutenberg/pull/62497))
+-   Verse block: Add background image and minimum height support. ([62498](https://github.com/WordPress/gutenberg/pull/62498))
+
+#### Block Library
+
+-   Post Date & Comment Date: Add relative date format. ([62298](https://github.com/WordPress/gutenberg/pull/62298))
+-   Replace "Add new post" link text with more meaningful Label (v2). ([62277](https://github.com/WordPress/gutenberg/pull/62277))
+
+#### Block Editor
+
+-   LinkControl: Refined the display of the link preview title and URL when both are same. ([61819](https://github.com/WordPress/gutenberg/pull/61819))
+-   Update URL to uppercase. ([62231](https://github.com/WordPress/gutenberg/pull/62231))
+
+#### Block bindings
+
+-   Change bindings panel title, add description. ([62489](https://github.com/WordPress/gutenberg/pull/62489))
+
+#### Site Editor
+
+-   Template inspector: Small visual adjustments. ([62537](https://github.com/WordPress/gutenberg/pull/62537))
+-   Unify DataViews Header Title & Subtitle. ([62429](https://github.com/WordPress/gutenberg/pull/62429))
+
+#### Document Settings
+
+-   FlatTermSelector: Update the term suggestion limit. ([62359](https://github.com/WordPress/gutenberg/pull/62359))
+
+#### Global Styles
+
+-   Update custom CSS handling to be consistent with block global styles. ([62357](https://github.com/WordPress/gutenberg/pull/62357))
+
+#### Post Editor
+
+-   Try: Re-enable React StrictMode. ([61943](https://github.com/WordPress/gutenberg/pull/61943))
+
+### New APIs
+
+#### Extensibility
+
+-   DataViews: Bootstrap Actions Extensibility API. ([62052](https://github.com/WordPress/gutenberg/pull/62052))
+
+### Bug Fixes
+
+-   Core Data: Fix errors when the entities list doesn't contain configuration key. ([62346](https://github.com/WordPress/gutenberg/pull/62346))
+-   Data Views: Bulk toolbar covering other clickable elements. ([62333](https://github.com/WordPress/gutenberg/pull/62333))
+-   Fix: Omit default parameters from pages, template parts, and patterns. ([62372](https://github.com/WordPress/gutenberg/pull/62372))
+-   Fix: Show homepage link on frontpage instead of the slug. ([62279](https://github.com/WordPress/gutenberg/pull/62279))
+-   Fix: Unquoted file argument in declaration check script. ([62482](https://github.com/WordPress/gutenberg/pull/62482))
+-   List: Fix pasting. ([62428](https://github.com/WordPress/gutenberg/pull/62428))
+-   MediaUpload: Remove dialog markup on close. ([62168](https://github.com/WordPress/gutenberg/pull/62168))
+-   Revert CSS removal for interface footer breadcrumbs. ([62309](https://github.com/WordPress/gutenberg/pull/62309))
+-   Revert test data for `WithSlug` variation. ([62579](https://github.com/WordPress/gutenberg/pull/62579))
+-   Scripts: Pin the @wordpress/scripts version to a version supported by 6.5. ([62234](https://github.com/WordPress/gutenberg/pull/62234))
+-   Site Editor Hub: Simplify. ([61579](https://github.com/WordPress/gutenberg/pull/61579))
+-   Style Book: Allow activation when the canvas mode is "view". ([62212](https://github.com/WordPress/gutenberg/pull/62212))
+-   Top toolbar: Fix half a pixel artifacting of the bottom border. ([62225](https://github.com/WordPress/gutenberg/pull/62225))
+-   Try: Contextual frame bg color to avoid artifacting. ([62223](https://github.com/WordPress/gutenberg/pull/62223))
+-   Try: Fix mover positioning. ([62226](https://github.com/WordPress/gutenberg/pull/62226))
+-   Update instances of text-wrap: Pretty to fall back to balance. ([62233](https://github.com/WordPress/gutenberg/pull/62233))
+
+#### Global Styles
+
+-   Add `default-spacing-sizes` and `default-font-sizes` options for classic themes. ([62252](https://github.com/WordPress/gutenberg/pull/62252))
+-   Add custom CSS for block style variations. ([62526](https://github.com/WordPress/gutenberg/pull/62526))
+-   Color Variations: Use Grid rather than VStack. ([62445](https://github.com/WordPress/gutenberg/pull/62445))
+-   Don't apply the background and text colors to typography previews. ([62578](https://github.com/WordPress/gutenberg/pull/62578))
+-   Fix UI appearing on blocks that don't support text alignment. ([62376](https://github.com/WordPress/gutenberg/pull/62376))
+-   Fix UI order for theme.json spacing sizes. ([62199](https://github.com/WordPress/gutenberg/pull/62199))
+-   Fix registration of theme style variation defined block styles. ([62495](https://github.com/WordPress/gutenberg/pull/62495))
+-   Only use single property variations as color/type presets. ([62469](https://github.com/WordPress/gutenberg/pull/62469))
+-   Section Styles: Register block style variations on `init`. ([62461](https://github.com/WordPress/gutenberg/pull/62461))
+-   Section styles: Consolidate variation name. ([62550](https://github.com/WordPress/gutenberg/pull/62550))
+-   Section styles: Support i18n for variations declared in `theme.json` or theme style variations. ([62552](https://github.com/WordPress/gutenberg/pull/62552))
+-   Sort spacing sizes when all slugs begin numerically. ([62567](https://github.com/WordPress/gutenberg/pull/62567))
+
+#### Site Editor
+
+-   Change `Site Editor` to `Edit site`. ([62501](https://github.com/WordPress/gutenberg/pull/62501))
+-   Fix "insert before/after" not showing for blocks in site editor. ([62530](https://github.com/WordPress/gutenberg/pull/62530))
+-   Site Export: Ensure that the export endpoint uses Gutenberg theme classes. ([61561](https://github.com/WordPress/gutenberg/pull/61561))
+-   Update old document URLs to new ones. ([62206](https://github.com/WordPress/gutenberg/pull/62206))
+-   Update sidebar title + icon + site title alignment. ([62191](https://github.com/WordPress/gutenberg/pull/62191))
+
+#### Block Editor
+
+-   Inserter: Allow focus to move to the toggle when opening the inserter. ([62513](https://github.com/WordPress/gutenberg/pull/62513))
+-   Inserter: Return the same items when the state and parameters don't change. ([62263](https://github.com/WordPress/gutenberg/pull/62263))
+-   Remove 'rootClientId' argument for block lock selectors. ([62547](https://github.com/WordPress/gutenberg/pull/62547))
+-   Update fetchLinkSuggestions to sort results by relevancy. ([62397](https://github.com/WordPress/gutenberg/pull/62397))
+
+#### Block Library
+
+-   Fixed Media Text Block Issue : When crop image to fill is enabled, the image in nested media & text blocks does not show. ([62182](https://github.com/WordPress/gutenberg/pull/62182))
+-   Media & Text block: Fix nested Media & Text block media position issue with increased CSS specificity. ([62184](https://github.com/WordPress/gutenberg/pull/62184))
+-   Query: Adjust the position of sticky search field in Patterns modal. ([62370](https://github.com/WordPress/gutenberg/pull/62370))
+
+#### Post Editor
+
+-   Editor: Avoid remounts of `DocumentBar`. ([62214](https://github.com/WordPress/gutenberg/pull/62214))
+-   Editor: Make revisions more prominent. ([62323](https://github.com/WordPress/gutenberg/pull/62323))
+-   Editor: Refine availability of rename post action. ([62248](https://github.com/WordPress/gutenberg/pull/62248))
+-   Fix move `CONTENT_ONLY_BLOCKS` into component body to ensure the `editor.postContentBlockTypes` filter gets called whenever the values are used. ([62292](https://github.com/WordPress/gutenberg/pull/62292))
+
+#### Components
+
+-   Ensure that openref is defined before accessing to .current. ([62508](https://github.com/WordPress/gutenberg/pull/62508))
+-   Fix: Update styles for checkbox and radio controls. ([61696](https://github.com/WordPress/gutenberg/pull/61696))
+-   Tabs: Prevent accidental overflow in indicator. ([61979](https://github.com/WordPress/gutenberg/pull/61979))
+
+#### List View
+
+-   Fix home and end key behaviour in very long lists. ([62312](https://github.com/WordPress/gutenberg/pull/62312))
+-   Respect default shortcuts in modals. ([62479](https://github.com/WordPress/gutenberg/pull/62479))
+-   Show context menu for content-only blocks in posts. ([62354](https://github.com/WordPress/gutenberg/pull/62354))
+
+#### Block bindings
+
+-   Fix applying bindings or pattern overrides to button blocks with empty text. ([62220](https://github.com/WordPress/gutenberg/pull/62220))
+-   Fix site editor breaking when user selects bound and non-bound blocks at the same time. ([62268](https://github.com/WordPress/gutenberg/pull/62268))
+-   Revert changes to bindings replacement logic to not use regex. ([62355](https://github.com/WordPress/gutenberg/pull/62355))
+
+#### Synced Patterns
+
+-   Block Bindings / Pattern Overrides: Prevent normal attribute updates when a \_\_default binding exists. ([62471](https://github.com/WordPress/gutenberg/pull/62471))
+-   Fix showing double icons for connected blocks in pattern editor. ([62317](https://github.com/WordPress/gutenberg/pull/62317))
+
+#### Data Views
+
+-   DataViews: Fix unnecessary horizontal scrollbar in list layout. ([62448](https://github.com/WordPress/gutenberg/pull/62448))
+-   Page creation and duplication: Decode HTML entities in success notices. ([62313](https://github.com/WordPress/gutenberg/pull/62313))
+
+#### Patterns
+
+-   Fix increasingly big canvas in the post editor when editing patterns. ([62360](https://github.com/WordPress/gutenberg/pull/62360))
+-   i18n: Patterns: Disambiguate singular & plural uses of 'Synced' & 'Unsynced'. ([62375](https://github.com/WordPress/gutenberg/pull/62375))
+
+#### Data Layer
+
+-   Data: Add error handle to the 'registry.batch' method. ([62322](https://github.com/WordPress/gutenberg/pull/62322))
+
+#### Block Variations
+
+-   Compare objects based on given properties. ([62272](https://github.com/WordPress/gutenberg/pull/62272))
+
+#### Block Styles
+
+-   Remove core block style variations filters and action. ([62090](https://github.com/WordPress/gutenberg/pull/62090))
+
+### Accessibility
+
+-   Add lint rule for inaccessible disabled `Button`. ([62080](https://github.com/WordPress/gutenberg/pull/62080))
+-   Placeholders: Fix contrast. ([62416](https://github.com/WordPress/gutenberg/pull/62416))
+
+#### Global Styles
+
+-   Display tooltips for pagination buttons on styles revision. ([62395](https://github.com/WordPress/gutenberg/pull/62395))
+
+#### Site Editor
+
+-   Make edit site pagination buttons accessibly disabled. ([62267](https://github.com/WordPress/gutenberg/pull/62267))
+
+### Performance
+
+-   reporter: Print the stdout/stderr from the worker. ([62316](https://github.com/WordPress/gutenberg/pull/62316))
+
+#### Block bindings
+
+-   Only run block bindings Gutenberg logic for sites using WordPress versions below 6.5. ([62363](https://github.com/WordPress/gutenberg/pull/62363))
+
+#### Interactivity API
+
+-   Use data-wp-on-async directives in core blocks when handler does not need synchronous access to event. ([62160](https://github.com/WordPress/gutenberg/pull/62160))
+
+### Experiments
+
+#### Posts/Tags/Categories Screen
+
+-   Bootstrap the dashboard layout. ([62409](https://github.com/WordPress/gutenberg/pull/62409))
+-   Posts Dashboard: Add a new experimental empty page. ([62406](https://github.com/WordPress/gutenberg/pull/62406))
+
+### Documentation
+
+-   Add @global PHP documentation. ([60539](https://github.com/WordPress/gutenberg/pull/60539))
+-   Add documentation for PostSticky and PostStickyCheck component. ([62100](https://github.com/WordPress/gutenberg/pull/62100))
+-   Add documentation for WordCount component. ([62217](https://github.com/WordPress/gutenberg/pull/62217))
+-   Added documentation for `PostTrash` & `PostTrashCheck` `TimeToRead` `TextEditorGlobalKeyboardShortcuts` `PostPublishButtonLabel `Component. ([62116](https://github.com/WordPress/gutenberg/pull/62116))
+-   Better changelogs for the JSX transform upgrade. ([62265](https://github.com/WordPress/gutenberg/pull/62265))
+-   Corrected @since Order in Php documentation. ([61992](https://github.com/WordPress/gutenberg/pull/61992))
+-   Docs: Explicitly mention new behavior coming in WP 6.6 for block variations. ([62399](https://github.com/WordPress/gutenberg/pull/62399))
+-   EntitiesSavedStates editor component. ([62377](https://github.com/WordPress/gutenberg/pull/62377))
+-   Fix `@since` tag in docblock in `WP_Theme_JSON_Data_Gutenberg`. ([62425](https://github.com/WordPress/gutenberg/pull/62425))
+-   Fix: Invalid link on explanations documentation. ([62487](https://github.com/WordPress/gutenberg/pull/62487))
+-   Fixing minor syntax in DataView example code. ([62560](https://github.com/WordPress/gutenberg/pull/62560))
+-   Interactivity API template create block: Removed warning for generated README from template. ([62324](https://github.com/WordPress/gutenberg/pull/62324))
+-   PostPublishButton, PostPublishButtonLabel editor components. ([62379](https://github.com/WordPress/gutenberg/pull/62379))
+-   PostPublishPanel editor component. ([62380](https://github.com/WordPress/gutenberg/pull/62380))
+-   PostSwitchToDraftButton editor component. ([62381](https://github.com/WordPress/gutenberg/pull/62381))
+-   PostSyncStatus editor component. ([62382](https://github.com/WordPress/gutenberg/pull/62382))
+-   PostTaxonomies, PostTaxonomiesCheck, PostTaxonomiesFlatTermSelector, PostTaxonomiesPanel related editor components. ([62384](https://github.com/WordPress/gutenberg/pull/62384))
+-   Several typo correction in documentations. ([62433](https://github.com/WordPress/gutenberg/pull/62433))
+-   TableOfContents editor component. ([62385](https://github.com/WordPress/gutenberg/pull/62385))
+-   ThemeSupportCheck editor component. ([62387](https://github.com/WordPress/gutenberg/pull/62387))
+-   Update React API reference links in @wordpress/element reference-guides. ([62475](https://github.com/WordPress/gutenberg/pull/62475))
+-   Update: Slotfill documentation samples (links, code, and rephrase). ([62271](https://github.com/WordPress/gutenberg/pull/62271))
+-   UseEntitiesSavedStatesIsDirty editor component. ([62388](https://github.com/WordPress/gutenberg/pull/62388))
+-   block.json schema: Add supports.splitting field. ([62209](https://github.com/WordPress/gutenberg/pull/62209))
+
+### Code Quality
+
+-   Add support for local keyframes through a PostCSS plugin. ([62476](https://github.com/WordPress/gutenberg/pull/62476))
+-   Block style variation: Rename hook. ([62464](https://github.com/WordPress/gutenberg/pull/62464))
+-   Chore: Simplify a padding style on global styles. ([62291](https://github.com/WordPress/gutenberg/pull/62291))
+-   Convert autop package to TS. ([62583](https://github.com/WordPress/gutenberg/pull/62583))
+-   Convert blob package to TS. ([62569](https://github.com/WordPress/gutenberg/pull/62569))
+-   Convert escape-html package to TS. ([62586](https://github.com/WordPress/gutenberg/pull/62586))
+-   Convert token-list package to TypeScript. ([62584](https://github.com/WordPress/gutenberg/pull/62584))
+-   Convert warning package to TS. ([62557](https://github.com/WordPress/gutenberg/pull/62557))
+-   Editor: Cleanup styles and classnames. ([62237](https://github.com/WordPress/gutenberg/pull/62237))
+-   Editor: Deprecate PostSwitchToDraftButton. ([62402](https://github.com/WordPress/gutenberg/pull/62402))
+-   Editor: Introduce the Editor component and use it in the site editor. ([62274](https://github.com/WordPress/gutenberg/pull/62274))
+-   Fix unintended overwrite of eslint `no-restricted-syntax`. ([62301](https://github.com/WordPress/gutenberg/pull/62301))
+-   Fix: Add `network-active` to valid options in `PluginStatus` Type definition. ([62450](https://github.com/WordPress/gutenberg/pull/62450))
+-   Fix: Flakey deferred store test. ([62571](https://github.com/WordPress/gutenberg/pull/62571))
+-   Fix: Remove unused code from dataviews styles. ([62275](https://github.com/WordPress/gutenberg/pull/62275))
+-   Fix: Remove unused typography panel styles. ([62295](https://github.com/WordPress/gutenberg/pull/62295))
+-   Fixed : Disambiguate "Cover" translatable string in the context of background-panel.js. ([62440](https://github.com/WordPress/gutenberg/pull/62440))
+-   Move the template part menu items to the editor package. ([62366](https://github.com/WordPress/gutenberg/pull/62366))
+-   Shortcut Help modal: Remove CSS hack for Internet Explorer 11. ([62564](https://github.com/WordPress/gutenberg/pull/62564))
+-   Use stable reference for `getEntityActions` action. ([62536](https://github.com/WordPress/gutenberg/pull/62536))
+
+#### Global Styles
+
+-   Global styles code quality refactoring. ([62299](https://github.com/WordPress/gutenberg/pull/62299))
+-   Migrate theme.json based on origin. ([62305](https://github.com/WordPress/gutenberg/pull/62305))
+-   Send theme object to setUserConfig. ([61805](https://github.com/WordPress/gutenberg/pull/61805))
+
+#### Synced Patterns
+
+-   Extract the pattern overrides toolbar indicator from the `block-editor` package. ([62514](https://github.com/WordPress/gutenberg/pull/62514))
+-   Remove unused `syncDerivedUpdates` action. ([62229](https://github.com/WordPress/gutenberg/pull/62229))
+
+#### Post Editor
+
+-   Editor: Combine selector in provider component. ([62407](https://github.com/WordPress/gutenberg/pull/62407))
+-   Editor: Use the Editor component in the post editor. ([62339](https://github.com/WordPress/gutenberg/pull/62339))
+
+#### Site Editor
+
+-   Remove editor specific classes from shell wrapper. ([62389](https://github.com/WordPress/gutenberg/pull/62389))
+-   Remove unused code. ([62286](https://github.com/WordPress/gutenberg/pull/62286))
+
+#### Icons
+
+-   Fix React warning error for offline icon. ([62353](https://github.com/WordPress/gutenberg/pull/62353))
+
+#### Data Views
+
+-   Chore: Simplify a padding style on dataviews. ([62276](https://github.com/WordPress/gutenberg/pull/62276))
+
+#### Block Editor
+
+-   Use border instead of hr for filtered block list separator. ([62249](https://github.com/WordPress/gutenberg/pull/62249))
+
+#### Block bindings
+
+-   Use preview instead of publishing post in block bindings tests. ([62235](https://github.com/WordPress/gutenberg/pull/62235))
+
+#### Block API
+
+-   Parser: Update validateBlock to use fixedBlock. ([62178](https://github.com/WordPress/gutenberg/pull/62178))
+
+### Tools
+
+#### Testing
+
+-   Fix flaky Site Editor command center end-to-end test. ([62454](https://github.com/WordPress/gutenberg/pull/62454))
+-   Perf Tests: Use backward-compatible locators. ([62362](https://github.com/WordPress/gutenberg/pull/62362))
+-   Test using Node.js 22.x. ([62341](https://github.com/WordPress/gutenberg/pull/62341))
+-   Try: Fix flaky DataViews end-to-end test. ([62413](https://github.com/WordPress/gutenberg/pull/62413))
+-   Update Node version for flaky test reporter. ([62401](https://github.com/WordPress/gutenberg/pull/62401))
+-   end-to-end Utils: Add retry mechanism to the REST API discovery. ([62331](https://github.com/WordPress/gutenberg/pull/62331))
+
+#### Build Tooling
+
+-   Build JS module only in development mode. ([62398](https://github.com/WordPress/gutenberg/pull/62398))
+-   Speed up check-build-type-declaration-files. ([62538](https://github.com/WordPress/gutenberg/pull/62538))
+
+#### wp-env
+
+-   Add JSON Schema for `.wp-env.json` files. ([36276](https://github.com/WordPress/gutenberg/pull/36276))
+-   Add `WP_ENV_TESTS_MYSQL_PORT` / `.wp-env.json` `.env.tests.mysqlPort` option etc. ([61057](https://github.com/WordPress/gutenberg/pull/61057))
+
+### Various
+
+-   Update all `ConfirmDialog`s in the codebase to be size=medium. ([62532](https://github.com/WordPress/gutenberg/pull/62532))
+
+#### REST API
+
+-   Themes REST API endpoint: Add stylesheet_uri and template_uri fields to the response (WP 6.6). ([62211](https://github.com/WordPress/gutenberg/pull/62211))
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+-   @aaronware: Fixing minor syntax in DataView example code. ([62560](https://github.com/WordPress/gutenberg/pull/62560))
+-   @BrianHenryIE: Add `WP_ENV_TESTS_MYSQL_PORT` / `.wp-env.json` `.env.tests.mysqlPort` option etc. ([61057](https://github.com/WordPress/gutenberg/pull/61057))
+-   @carstingaxion: Replace "Add new post" link text with more meaningful Label (v2). ([62277](https://github.com/WordPress/gutenberg/pull/62277))
+-   @up1512001: Change `Site Editor` to `Edit site`. ([62501](https://github.com/WordPress/gutenberg/pull/62501))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @aaronware @afercia @ajlende @akasunil @amitraj2203 @andrewserong @BrianHenryIE @carolinan @carstingaxion @cbravobernal @colorful-tones @DaniGuardiola @desrosj @ellatrix @fabiankaegy @geriux @gigitux @gziolo @jameskoster @jasmussen @jeryj @joemcgill @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @Mamaduka @mcsf @mirka @narenin @noisysocks @ntsekouras @oandregal @ockham @ramonjd @richtabor @SantosGuillamot @scruffian @shail-mehta @sirreal @stokesman @t-hamano @talldan @tellthemachines @tjcafferkey @up1512001 @vipul0425 @westonruter @WunderBart @youknowriad
+
+= 18.5.0 =
+
+## Changelog
+
+### Features
+
+#### Global Styles
+
+-   Add defaultSpacingSizes option (theme.json v3). ([61842](https://github.com/WordPress/gutenberg/pull/61842))
+-   Edit/create shadows in global styles. ([60706](https://github.com/WordPress/gutenberg/pull/60706))
+-   Relocate Background Image controls to sit under Layout. ([61886](https://github.com/WordPress/gutenberg/pull/61886))
+
+#### Block Library
+
+-   Enable shadow support for cover block. ([61883](https://github.com/WordPress/gutenberg/pull/61883))
+
+#### Block bindings
+
+-   Allow editing in post meta source. ([61753](https://github.com/WordPress/gutenberg/pull/61753))
+
+#### Script Modules API
+
+-   Add script module data implementation. ([61658](https://github.com/WordPress/gutenberg/pull/61658))
+
+#### Synced Patterns
+
+-   Add `__default` binding for pattern overrides. ([60694](https://github.com/WordPress/gutenberg/pull/60694))
+
+#### Block Styles
+
+-   Extend block style variations as mechanism for achieving section styling. ([57908](https://github.com/WordPress/gutenberg/pull/57908))
+
+### Enhancements
+
+-   Block card: Fix typographic widow. ([61438](https://github.com/WordPress/gutenberg/pull/61438))
+-   Block settings: Update variant of "Apply globally" Button component to secondary. ([61850](https://github.com/WordPress/gutenberg/pull/61850))
+-   Editor: Align the Post Format control design with the rest of the post sidebar controls. ([62066](https://github.com/WordPress/gutenberg/pull/62066))
+-   Editor: Polish the style of some of the post summary rows. ([61645](https://github.com/WordPress/gutenberg/pull/61645))
+-   Format Library: Refactor 'Inline Image' edit component. ([62135](https://github.com/WordPress/gutenberg/pull/62135))
+-   Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766))
+-   Post Sticky Toggle: Improve the design. ([62012](https://github.com/WordPress/gutenberg/pull/62012))
+-   Post Summary: Move PostTemplatePanel below URL and Author. ([62137](https://github.com/WordPress/gutenberg/pull/62137))
+-   Remove trash button in post/page inspector. ([61792](https://github.com/WordPress/gutenberg/pull/61792))
+-   Shadows instead of borders on interface skeleton. ([61835](https://github.com/WordPress/gutenberg/pull/61835))
+-   Tweak contextual block toolbar position. ([61836](https://github.com/WordPress/gutenberg/pull/61836))
+-   Update: For synced entities the icon should be purple. ([62024](https://github.com/WordPress/gutenberg/pull/62024))
+-   Update: Implement new author panel design. ([61362](https://github.com/WordPress/gutenberg/pull/61362))
+-   Update: Implement new parent and order design. ([61918](https://github.com/WordPress/gutenberg/pull/61918))
+-   Update: Move duplicate pattern and template part actions to the editor package. ([61879](https://github.com/WordPress/gutenberg/pull/61879))
+
+#### Site Editor
+
+-   Block Editor: Check for multiple block usage in the block-editor package. ([62086](https://github.com/WordPress/gutenberg/pull/62086))
+-   Copy custom CSS between variations when switching. ([61752](https://github.com/WordPress/gutenberg/pull/61752))
+-   Data views: Align page headers. ([62115](https://github.com/WordPress/gutenberg/pull/62115))
+-   Inspector summary rows: Make tooltips appear middle-left. ([61815](https://github.com/WordPress/gutenberg/pull/61815))
+-   Inspector: Add '/' prefix to Link button. ([62073](https://github.com/WordPress/gutenberg/pull/62073))
+-   Inspector: Display home / posts page badge. ([62071](https://github.com/WordPress/gutenberg/pull/62071))
+-   Inspector: Remove revisions panel. ([61867](https://github.com/WordPress/gutenberg/pull/61867))
+-   Make post meta row button treatment consistent. ([61954](https://github.com/WordPress/gutenberg/pull/61954))
+-   Remove 'Manage...' prefix in Pages / Templates data views. ([62107](https://github.com/WordPress/gutenberg/pull/62107))
+-   Remove the details pages. ([61741](https://github.com/WordPress/gutenberg/pull/61741))
+-   Update actions order in site editor for template and template parts. ([61803](https://github.com/WordPress/gutenberg/pull/61803))
+-   Use site title as a link. ([61258](https://github.com/WordPress/gutenberg/pull/61258))
+-   [Site Editor]: Add create pattern button in patterns page. ([60302](https://github.com/WordPress/gutenberg/pull/60302))
+-   withRegistryProvider: Prevent intermediate state with no children. ([61859](https://github.com/WordPress/gutenberg/pull/61859))
+
+#### Data Views
+
+-   Add badge to title for posts & front pages. ([61718](https://github.com/WordPress/gutenberg/pull/61718))
+-   Clarify `date` value in Pages. ([61709](https://github.com/WordPress/gutenberg/pull/61709))
+-   DataViews: `label` prop in Actions API can be either a `string` or a `function`. ([61942](https://github.com/WordPress/gutenberg/pull/61942))
+-   Fix pagination position on pages with short lists. ([61712](https://github.com/WordPress/gutenberg/pull/61712))
+-   Pages data view: Add Pending and Private views. ([62138](https://github.com/WordPress/gutenberg/pull/62138))
+-   Pages sidebar: Adds published & scheduled items. ([62021](https://github.com/WordPress/gutenberg/pull/62021))
+-   Stop Patterns data view header shrinking. ([61801](https://github.com/WordPress/gutenberg/pull/61801))
+-   Update grid layout on small screens. ([61820](https://github.com/WordPress/gutenberg/pull/61820))
+-   Update list layout action styling. ([61797](https://github.com/WordPress/gutenberg/pull/61797))
+-   Update page component (and some data view elements) spacing metrics. ([61333](https://github.com/WordPress/gutenberg/pull/61333))
+-   Visually hide 'Actions' column header. ([61710](https://github.com/WordPress/gutenberg/pull/61710))
+
+#### Global Styles
+
+-   Add block-level Text Alignment UI. ([61717](https://github.com/WordPress/gutenberg/pull/61717))
+-   Add option to remove site-wide theme background image. ([61998](https://github.com/WordPress/gutenberg/pull/61998))
+-   Background image: Add support for relative theme path URLs in top-level theme.json styles. ([61271](https://github.com/WordPress/gutenberg/pull/61271))
+-   Background image: Update controls defaults and layout. ([62000](https://github.com/WordPress/gutenberg/pull/62000))
+-   Background images: Add defaults for background size. ([62046](https://github.com/WordPress/gutenberg/pull/62046))
+-   Don't filter out typography variations where the heading and body fonts are the same. ([61327](https://github.com/WordPress/gutenberg/pull/61327))
+-   Make color variations fit in a bit better visually. ([61617](https://github.com/WordPress/gutenberg/pull/61617))
+-   Make it clearer how to edit a site's palette. ([61364](https://github.com/WordPress/gutenberg/pull/61364))
+-   Move type presets below elements. ([61863](https://github.com/WordPress/gutenberg/pull/61863))
+-   Restore the default variation to the color and typography style tiles. ([61901](https://github.com/WordPress/gutenberg/pull/61901))
+-   Show shadow tool by default under global styles. ([61981](https://github.com/WordPress/gutenberg/pull/61981))
+
+#### Components
+
+-   Add vw and vh units to the custom font size picker. ([60607](https://github.com/WordPress/gutenberg/pull/60607))
+-   CustomSelectControlV2: Use `InputBase` for styling. ([60261](https://github.com/WordPress/gutenberg/pull/60261))
+-   Tabs: Indicator animation. ([60560](https://github.com/WordPress/gutenberg/pull/60560))
+-   Try: Add CSS Custom Properties to CSS types. ([61872](https://github.com/WordPress/gutenberg/pull/61872))
+
+#### Zoom Out
+
+-   Hide inserters behind the experiment flag. ([61866](https://github.com/WordPress/gutenberg/pull/61866))
+-   Inserter: Auto-close the inserter unless the zoom out experiment is on. ([61856](https://github.com/WordPress/gutenberg/pull/61856))
+-   Show the inserters only when a section is selected. ([61559](https://github.com/WordPress/gutenberg/pull/61559))
+-   The patterns tab behind a new experiment. ([61601](https://github.com/WordPress/gutenberg/pull/61601))
+
+#### Block Editor
+
+-   Adjust pattern list items resting, hover, focus styles. ([61831](https://github.com/WordPress/gutenberg/pull/61831))
+-   Tweak pattern categories sidebar. ([62113](https://github.com/WordPress/gutenberg/pull/62113))
+-   Writing flow: Remove first empty paragraph on Backspace. ([61889](https://github.com/WordPress/gutenberg/pull/61889))
+
+#### Block bindings
+
+-   Add Block Bindings Panel to Block Inspector. ([61527](https://github.com/WordPress/gutenberg/pull/61527))
+-   Add indicator for metadata changes to Save Panel when reviewing modified entities. ([61811](https://github.com/WordPress/gutenberg/pull/61811))
+-   Lock binding editing with functions. ([61734](https://github.com/WordPress/gutenberg/pull/61734))
+
+#### Block Variations
+
+-   Detect active variation correctly based on RichText attribute. ([62325](https://github.com/WordPress/gutenberg/pull/62325))
+-   Have `getActiveBlockVariation` return variation with highest specificity. ([62031](https://github.com/WordPress/gutenberg/pull/62031))
+-   Support dot notation in `isActive` string array. ([62088](https://github.com/WordPress/gutenberg/pull/62088))
+
+#### Layout
+
+-   More consistent root padding. ([60715](https://github.com/WordPress/gutenberg/pull/60715))
+-   Try using coloured overlay instead of border for grid visualiser. ([61390](https://github.com/WordPress/gutenberg/pull/61390))
+
+#### Block Library
+
+-   Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372))
+-   Media & Text: Replace the deprecated \_\_experimentalImageSizeControl with ResolutionTool. ([57540](https://github.com/WordPress/gutenberg/pull/57540))
+
+#### Inspector Controls
+
+-   Align both "Design" pattern list panels. ([62161](https://github.com/WordPress/gutenberg/pull/62161))
+
+#### Post Editor
+
+-   Add home template details to inspector controls. ([61762](https://github.com/WordPress/gutenberg/pull/61762))
+
+#### Interactivity API
+
+-   Clarify some warning messages. ([61720](https://github.com/WordPress/gutenberg/pull/61720))
+
+#### Patterns
+
+-   Adjust the icons and text of the binding connected blocks. ([61560](https://github.com/WordPress/gutenberg/pull/61560))
+
+### Bug Fixes
+
+-   Editor: Only render the site logo once if there's a fill. ([62320](https://github.com/WordPress/gutenberg/pull/62320))
+-   Interactivity API: Increase directive `wp-each-child` priority. ([62293](https://github.com/WordPress/gutenberg/pull/62293))w
+-   Compose: Fix 'useFocusOnMount' cleanup callback. ([62053](https://github.com/WordPress/gutenberg/pull/62053))
+-   Do not auto save post status changes. ([62171](https://github.com/WordPress/gutenberg/pull/62171))
+-   Editor: Fix canvas padding in post editor. ([61893](https://github.com/WordPress/gutenberg/pull/61893))
+-   EntityProvider: Avoid remounts and simplify. ([61882](https://github.com/WordPress/gutenberg/pull/61882))
+-   Fix shadow and border for pattern categories panel. ([62158](https://github.com/WordPress/gutenberg/pull/62158))
+-   Image Block: Conditionally Render Block Control Based on Component Presence. ([62132](https://github.com/WordPress/gutenberg/pull/62132))
+-   Interactivity API: Fix null and number strings as namespaces runtime error. ([61960](https://github.com/WordPress/gutenberg/pull/61960))
+-   PostCardPanel: Fix ESLint error. ([62109](https://github.com/WordPress/gutenberg/pull/62109))
+-   Remove build-types/ clean from clean:Packages. ([62008](https://github.com/WordPress/gutenberg/pull/62008))
+-   Script Modules: Fix private method reflection access. ([62154](https://github.com/WordPress/gutenberg/pull/62154))
+-   ServerSideRender: Fix data loading in development mode. ([62140](https://github.com/WordPress/gutenberg/pull/62140))
+-   Shadow Panel: Make subtitle translatable. ([62022](https://github.com/WordPress/gutenberg/pull/62022))
+-   Site Editor: Fix the Root Padding styles. ([61906](https://github.com/WordPress/gutenberg/pull/61906))
+-   Writing flow: Fix heading crash on split (via paste). ([61900](https://github.com/WordPress/gutenberg/pull/61900))
+-   e2e: Fix Site Editor Styles test. ([62111](https://github.com/WordPress/gutenberg/pull/62111))
+
+#### Post Editor
+
+-   Consolidate and fix `delete` and `edit` post actions. ([61912](https://github.com/WordPress/gutenberg/pull/61912))
+-   Consolidate and fix `rename` post action. ([61857](https://github.com/WordPress/gutenberg/pull/61857))
+-   Document Bar: Decode HTML entities and take into account cases where there is no title. ([62087](https://github.com/WordPress/gutenberg/pull/62087))
+-   Editor: Don't apply purple accent to the unsynced pattern title. ([61704](https://github.com/WordPress/gutenberg/pull/61704))
+-   Editor: Ensure Copy button in sidebar copies whole permalink, _with_ URL protocol. ([61876](https://github.com/WordPress/gutenberg/pull/61876))
+-   Editor: Fix the 'DocumentBar' position for long titles. ([61691](https://github.com/WordPress/gutenberg/pull/61691))
+-   Editor: Render publish date control when the status is `future`(scheduled). ([62070](https://github.com/WordPress/gutenberg/pull/62070))
+-   Editor: Unify button size in pre-publish panel. ([62123](https://github.com/WordPress/gutenberg/pull/62123))
+-   Editor: Use edited entity for post actions. ([61892](https://github.com/WordPress/gutenberg/pull/61892))
+-   Fix read only post status styles. ([61722](https://github.com/WordPress/gutenberg/pull/61722))
+-   Post Actions: Hide the trash action for auto-drafts. ([61865](https://github.com/WordPress/gutenberg/pull/61865))
+
+#### Block Editor
+
+-   Inserter: Update Openverse API URLs. ([62241](https://github.com/WordPress/gutenberg/pull/62241))
+-   Fix being unable to switch modes while inserter is open. ([61563](https://github.com/WordPress/gutenberg/pull/61563))
+-   Fix editor inserter tabs indicator. ([61973](https://github.com/WordPress/gutenberg/pull/61973))
+-   Fix positioning of close icons in panels to be consistent. ([61832](https://github.com/WordPress/gutenberg/pull/61832))
+-   Fix syncing of publish date between publish and post status panel. ([62165](https://github.com/WordPress/gutenberg/pull/62165))
+-   Improve link conrol preview when show button text label is enabled. ([61726](https://github.com/WordPress/gutenberg/pull/61726))
+-   Inserter: Show all blocks (alternative). ([62169](https://github.com/WordPress/gutenberg/pull/62169))
+-   InspectorControls: Text not displayed when "Show button text labels" is enabled. ([61949](https://github.com/WordPress/gutenberg/pull/61949))
+-   Link Control: Fix focus handlers in development mode. ([62141](https://github.com/WordPress/gutenberg/pull/62141))
+-   Media & Text block: Remove the link option when the featured image is used. ([60510](https://github.com/WordPress/gutenberg/pull/60510))
+-   Writing flow: Fix paste for input fields. ([61389](https://github.com/WordPress/gutenberg/pull/61389))
+
+#### Block Library
+
+-   Classic block: Fix content syncing effect for React StrictMode. ([62051](https://github.com/WordPress/gutenberg/pull/62051))
+-   Don't steal focus when opening browse all blocks. ([61975](https://github.com/WordPress/gutenberg/pull/61975))
+-   Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356))
+-   Fixed : Update `alt text decision tree` links to be translatable. ([62076](https://github.com/WordPress/gutenberg/pull/62076))
+-   Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083))
+-   More block: Fix React warning when adding custom text. ([61936](https://github.com/WordPress/gutenberg/pull/61936))
+-   useUploadMediaFromBlobURL: Prevent duplicate uploads in StrictMode. ([62059](https://github.com/WordPress/gutenberg/pull/62059))
+
+#### Global Styles
+
+-   Fix make dimensions.aspectRatios key of theme.json files translatable. ([61774](https://github.com/WordPress/gutenberg/pull/61774))
+-   Hide the presets panel for when there are less or exactly one presets available. ([62074](https://github.com/WordPress/gutenberg/pull/62074))
+-   Prevent Typography panel title from wrapping. ([62124](https://github.com/WordPress/gutenberg/pull/62124))
+-   Shadow Panel: Generates unique shadow slugs by finding max suffix and incrementing it. ([61997](https://github.com/WordPress/gutenberg/pull/61997))
+-   Styles: try wrapping with :Root to fix reset styles. ([61638](https://github.com/WordPress/gutenberg/pull/61638))
+-   Transform Styles: Update selector so that styles work when custom fields panel is active. ([62121](https://github.com/WordPress/gutenberg/pull/62121))
+
+#### Site Editor
+
+-   Align the template title to the center in the 'Add template' screen. ([62175](https://github.com/WordPress/gutenberg/pull/62175))
+-   Close publish sidebar if not in `edit` mode. ([61707](https://github.com/WordPress/gutenberg/pull/61707))
+-   Fix the site editor Admin Bar menu item. ([61851](https://github.com/WordPress/gutenberg/pull/61851))
+-   Use a consistent snackbar position. ([61756](https://github.com/WordPress/gutenberg/pull/61756))
+
+#### Components
+
+-   Fix: The focus styles for tabPanel. ([61317](https://github.com/WordPress/gutenberg/pull/61317))
+-   InputControl: Fix z-index issue causing slider dots to appear in front of the Appearance dropdown. ([61937](https://github.com/WordPress/gutenberg/pull/61937))
+-   getAutocompleterUI: Don't redefine ListBox component on every render. ([61877](https://github.com/WordPress/gutenberg/pull/61877))
+
+#### Synced Patterns
+
+-   Block Bindings: Filter pattern overrides source in bindings panel. ([62015](https://github.com/WordPress/gutenberg/pull/62015))
+-   Fix detaching patterns when a pattern has overrides, but there are no override values. ([62014](https://github.com/WordPress/gutenberg/pull/62014))
+
+#### Block bindings
+
+-   Don't show non-existing and not supported attributes in block bindings panel. ([62183](https://github.com/WordPress/gutenberg/pull/62183))
+
+#### Layout
+
+-   Remove extra bracket in the site editor root padding styles. ([62159](https://github.com/WordPress/gutenberg/pull/62159))
+
+#### Block Styles
+
+-   Fix block style variation styles for blocks with complex selectors. ([62125](https://github.com/WordPress/gutenberg/pull/62125))
+
+#### Code Editor
+
+-   Editor: Unify text/code editor between post and site editors. ([61934](https://github.com/WordPress/gutenberg/pull/61934))
+
+#### Page Content Focus
+
+-   Remove lock icons from Content blocks inner blocks when editing a page in the site editor. ([61922](https://github.com/WordPress/gutenberg/pull/61922))
+
+#### Patterns
+
+-   Templates: Only resolve patterns for REST API endpoints. ([61757](https://github.com/WordPress/gutenberg/pull/61757))
+
+#### Interactivity API
+
+-   Turn named capturing groups back into numbered ones inside `toVdom`. ([61728](https://github.com/WordPress/gutenberg/pull/61728))
+
+#### Block API
+
+-   Fix: Enable Text Align UI to be controlled correctly with theme.json. ([61182](https://github.com/WordPress/gutenberg/pull/61182))
+
+#### REST API
+
+-   Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925))
+
+### Accessibility
+
+#### Global Styles
+
+-   Shadow Panel: Improve a11y and fix browser console error. ([61980](https://github.com/WordPress/gutenberg/pull/61980))
+
+#### Data Views
+
+-   Always show Actions table header. ([61847](https://github.com/WordPress/gutenberg/pull/61847))
+
+#### Block Library
+
+-   Fix: Adds help props for description of Play Inline toggle. ([61310](https://github.com/WordPress/gutenberg/pull/61310))
+
+### Performance
+
+-   Perf: Batch block list settings in single action. ([61329](https://github.com/WordPress/gutenberg/pull/61329))
+-   Remove additional call to `WP_Theme_JSON_Gutenberg::__construct`. ([61262](https://github.com/WordPress/gutenberg/pull/61262))
+
+#### Interactivity API
+
+-   Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive. ([61885](https://github.com/WordPress/gutenberg/pull/61885))
+
+#### Post Editor
+
+-   DocumentBar: Only selected data needed for rendering. ([61706](https://github.com/WordPress/gutenberg/pull/61706))
+
+### Experiments
+
+#### Interactivity API
+
+-   Use output buffer and HTML tag processor to inject directives on BODY tag for full-page client-side navigation. ([61212](https://github.com/WordPress/gutenberg/pull/61212))
+
+### Documentation
+
+-   Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735))
+-   Add PostURL component documentation. ([61737](https://github.com/WordPress/gutenberg/pull/61737))
+-   Add a section about block filters to the Filters and Hooks doc. ([61771](https://github.com/WordPress/gutenberg/pull/61771))
+-   Add an example and improve readability of the Block Filters doc. ([61770](https://github.com/WordPress/gutenberg/pull/61770))
+-   Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740))
+-   Add documentation for DocumentBar. ([61733](https://github.com/WordPress/gutenberg/pull/61733))
+-   Add documentation for PostFeaturedImage, PostFeaturedImageCheck, PostFeaturedImagePanel. ([61165](https://github.com/WordPress/gutenberg/pull/61165))
+-   Add documentation for PostLastRevision, PostLastRevisionCheck, PostLastRevisionPanel components. ([61166](https://github.com/WordPress/gutenberg/pull/61166))
+-   Add documentation for PostSchedule, PostScheduleCheck, PostSchedulePanel, PostScheduleLabel, usePostScheduleLabel components. ([61345](https://github.com/WordPress/gutenberg/pull/61345))
+-   Add documentation for the EditorNotices component. ([61736](https://github.com/WordPress/gutenberg/pull/61736))
+-   Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739))
+-   Added missing @global documentation. ([61537](https://github.com/WordPress/gutenberg/pull/61537))
+-   Changelog: Add note about removing legacy operators. ([62013](https://github.com/WordPress/gutenberg/pull/62013))
+-   Docs: Fix spacing in PHP doc block in comments block. ([61911](https://github.com/WordPress/gutenberg/pull/61911))
+-   EditorBoundary editor component. ([61950](https://github.com/WordPress/gutenberg/pull/61950))
+-   Fix typo. ([61830](https://github.com/WordPress/gutenberg/pull/61830))
+-   Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081))
+-   Fix: Custom block editor link. ([61962](https://github.com/WordPress/gutenberg/pull/61962))
+-   For `PostTextEditor` component. ([62099](https://github.com/WordPress/gutenberg/pull/62099))
+-   LocalAutosaveMonitor editor component. ([61951](https://github.com/WordPress/gutenberg/pull/61951))
+-   PageTemplate + PostTemplatePanel editor components. ([61961](https://github.com/WordPress/gutenberg/pull/61961))
+-   PostComments editor component. ([61964](https://github.com/WordPress/gutenberg/pull/61964))
+-   PostDiscussionPanel editor component. ([61966](https://github.com/WordPress/gutenberg/pull/61966))
+-   PostExcerptPanel editor component. ([61967](https://github.com/WordPress/gutenberg/pull/61967))
+-   PostLockedModal editor component. ([61968](https://github.com/WordPress/gutenberg/pull/61968))
+-   PostPendingStatus + PostPendingStatusCheck editor components. ([61970](https://github.com/WordPress/gutenberg/pull/61970))
+-   PostPingbacks editor component. ([62035](https://github.com/WordPress/gutenberg/pull/62035))
+-   PostPreviewButton editor component. ([62036](https://github.com/WordPress/gutenberg/pull/62036))
+-   Storybook: Add badges based on `tags`. ([61111](https://github.com/WordPress/gutenberg/pull/61111))
+-   Update PostFormat, PostFormatCheck editor component documentation. ([61732](https://github.com/WordPress/gutenberg/pull/61732))
+-   Update block.json file with correct links. ([61880](https://github.com/WordPress/gutenberg/pull/61880))
+-   Update link to architecture key concepts. ([61965](https://github.com/WordPress/gutenberg/pull/61965))
+-   Update links to correct lodash website. ([62188](https://github.com/WordPress/gutenberg/pull/62188))
+-   Update plugin-document-setting-panel.md. ([61782](https://github.com/WordPress/gutenberg/pull/61782))
+-   Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054))
+
+### Code Quality
+
+-   Add curly brace autofix commit to `.git-blame-ignore-revs`. ([62144](https://github.com/WordPress/gutenberg/pull/62144))
+-   Add eslint rule for curly brace presence in JSX. ([62026](https://github.com/WordPress/gutenberg/pull/62026))
+-   Blocks: Remove pipe usage and dependency on compose. ([62127](https://github.com/WordPress/gutenberg/pull/62127))
+-   Clean up packages build-types when cleaning types. ([61939](https://github.com/WordPress/gutenberg/pull/61939))
+-   Command Palette: Remove unused URL parameter. ([61783](https://github.com/WordPress/gutenberg/pull/61783))
+-   Commands: Unify the editor context between post and site editors. ([61862](https://github.com/WordPress/gutenberg/pull/61862))
+-   Dataviews: Remove unused dependencies. ([62010](https://github.com/WordPress/gutenberg/pull/62010))
+-   Distraction Free: Unify the header animation. ([62167](https://github.com/WordPress/gutenberg/pull/62167))
+-   Editor: Move editor toggle commands to the editor package. ([62093](https://github.com/WordPress/gutenberg/pull/62093))
+-   Editor: Move the InterfaceSkeleton to the editor package. ([62118](https://github.com/WordPress/gutenberg/pull/62118))
+-   Editor: Move the resizing of the editor to the EditorCanvas component. ([61896](https://github.com/WordPress/gutenberg/pull/61896))
+-   Editor: Remove extra div container and unify the container between post and site editors. ([62016](https://github.com/WordPress/gutenberg/pull/62016))
+-   Editor: Remove obsolete `listViewLabel` prop from DocumentTools. ([62032](https://github.com/WordPress/gutenberg/pull/62032))
+-   Editor: Remove useless props from InserterSidebar component. ([62103](https://github.com/WordPress/gutenberg/pull/62103))
+-   Editor: Unify the MediaUpload hook between post and site editors. ([62085](https://github.com/WordPress/gutenberg/pull/62085))
+-   Editor: Unify the content area of the post and site editors. ([61860](https://github.com/WordPress/gutenberg/pull/61860))
+-   Fix: React compiler error on button. ([61958](https://github.com/WordPress/gutenberg/pull/61958))
+-   Fix: Remove unused css block on patterns page. ([62058](https://github.com/WordPress/gutenberg/pull/62058))
+-   Fix: Remove unused css code from the navigation screen. ([62060](https://github.com/WordPress/gutenberg/pull/62060))
+-   Fix: Some jsdoc return types on edit site selector. ([62061](https://github.com/WordPress/gutenberg/pull/62061))
+-   Improve distclean script. ([62019](https://github.com/WordPress/gutenberg/pull/62019))
+-   Interactivity API: Move all utils inside `utils.ts`. ([61721](https://github.com/WordPress/gutenberg/pull/61721))
+-   Interactivity API: Move init.js to TypeScript. ([61723](https://github.com/WordPress/gutenberg/pull/61723))
+-   Make onPatternCategorySelection private. ([62130](https://github.com/WordPress/gutenberg/pull/62130))
+-   Remove useless clsx calls. ([61969](https://github.com/WordPress/gutenberg/pull/61969))
+-   Rename backport-changelog/6279.md to backport-changelog/6.6/6279.md. ([61894](https://github.com/WordPress/gutenberg/pull/61894))
+-   Update: Remove unused components. ([61955](https://github.com/WordPress/gutenberg/pull/61955))
+-   end-to-end Tests: Fix React warnings triggered by test plugins. ([61935](https://github.com/WordPress/gutenberg/pull/61935))
+
+#### Components
+
+-   CustomSelectControl: Fix `menuProps` mutation. ([62149](https://github.com/WordPress/gutenberg/pull/62149))
+-   Fix remaining warning in ColorPanelDropdown. ([61933](https://github.com/WordPress/gutenberg/pull/61933))
+-   Make the `ProgressBar` public. ([61062](https://github.com/WordPress/gutenberg/pull/61062))
+-   Remove reduceMotion utility. ([61963](https://github.com/WordPress/gutenberg/pull/61963))
+-   SlotFills: Use state for registry initialization. ([61802](https://github.com/WordPress/gutenberg/pull/61802))
+-   Style Book: Use state to initialize examples. ([61848](https://github.com/WordPress/gutenberg/pull/61848))
+-   Tooltip: Fix Ariakit tooltip store usage. ([61858](https://github.com/WordPress/gutenberg/pull/61858))
+-   `ProgressBar`: Simplify default `width` implementation and make it more easily overridable. ([61976](https://github.com/WordPress/gutenberg/pull/61976))
+
+#### Block Editor
+
+-   Fix `ZoomOutModeInserters` dependencies. ([61908](https://github.com/WordPress/gutenberg/pull/61908))
+-   Fix wrapper props mutation in BlockListBlock. ([61789](https://github.com/WordPress/gutenberg/pull/61789))
+-   Remove some utility functions. ([61784](https://github.com/WordPress/gutenberg/pull/61784))
+-   Shadows: Unlock private components and hooks at the file level. ([61790](https://github.com/WordPress/gutenberg/pull/61790))
+-   Unlock private setting keys at the file level. ([61813](https://github.com/WordPress/gutenberg/pull/61813))
+-   Unlock the private 'kebabCase' function at a file level. ([60755](https://github.com/WordPress/gutenberg/pull/60755))
+-   useBlockInspectorAnimationSettings: Remove unnecessary deps. ([61822](https://github.com/WordPress/gutenberg/pull/61822))
+
+#### Data Views
+
+-   DataViews: Full type the dataviews package. ([61854](https://github.com/WordPress/gutenberg/pull/61854))
+-   DataViews: Remove non-used file. ([61853](https://github.com/WordPress/gutenberg/pull/61853))
+-   DataViews: Remove unnecessary dependency for pattern fields memo. ([61870](https://github.com/WordPress/gutenberg/pull/61870))
+-   DataViews: Type all the filters components. ([61795](https://github.com/WordPress/gutenberg/pull/61795))
+-   DataViews: Type the BulkActionsToolbar component. ([61673](https://github.com/WordPress/gutenberg/pull/61673))
+-   DataViews: Type the ViewActions component. ([61729](https://github.com/WordPress/gutenberg/pull/61729))
+-   DataViews: Type the ViewTable component. ([61682](https://github.com/WordPress/gutenberg/pull/61682))
+
+#### Block Library
+
+-   Added unit test for post excerpt block render function. ([43451](https://github.com/WordPress/gutenberg/pull/43451))
+-   Avoid using component naming conventions for non-component code. ([61793](https://github.com/WordPress/gutenberg/pull/61793))
+-   Button: Fix ESLint warning. ([62126](https://github.com/WordPress/gutenberg/pull/62126))
+-   Remove CSS hack for Internet Explorer 11. ([62043](https://github.com/WordPress/gutenberg/pull/62043))
+-   Remove useless styles. ([62017](https://github.com/WordPress/gutenberg/pull/62017))
+-   Search Block: Fix `borderRadius` mutation. ([61794](https://github.com/WordPress/gutenberg/pull/61794))
+
+#### Site Editor
+
+-   History: Add getLocationWithParams method. ([61823](https://github.com/WordPress/gutenberg/pull/61823))
+-   Navigation Focus Mode: Remove leftover code. ([61897](https://github.com/WordPress/gutenberg/pull/61897))
+-   Remove useless onClick handler. ([61902](https://github.com/WordPress/gutenberg/pull/61902))
+-   Update to use the EditorInterface component from the editor package. ([62146](https://github.com/WordPress/gutenberg/pull/62146))
+
+#### Block hooks
+
+-   Navigation block: Check for insert_hooked_blocks_into_rest_response i…. ([62134](https://github.com/WordPress/gutenberg/pull/62134))
+-   Navigation block: Check for update_ignored_hooked_blocks_postmeta in core. ([61903](https://github.com/WordPress/gutenberg/pull/61903))
+
+#### Font Library
+
+-   Font Library Modal: Remove some contexts. ([62042](https://github.com/WordPress/gutenberg/pull/62042))
+
+#### Post Editor
+
+-   Template Actions: Fix console error when resetting template. ([61921](https://github.com/WordPress/gutenberg/pull/61921))
+
+#### Global Styles
+
+-   Components: Fix React Warning triggers by the new JSX transform. ([61917](https://github.com/WordPress/gutenberg/pull/61917))
+
+#### Interactivity API
+
+-   Interactivity API : Refactor interactivity-router to TS. ([61730](https://github.com/WordPress/gutenberg/pull/61730))
+
+#### CSS & Styling
+
+-   Fix editor view mode canvas shadow. ([61688](https://github.com/WordPress/gutenberg/pull/61688))
+
+### Tools
+
+-   Build: Use globalThis over process.env and enable TS lib checking. ([61486](https://github.com/WordPress/gutenberg/pull/61486))
+
+#### Testing
+
+-   E2E: Fix canvas waiter in visitSiteEditor. ([61816](https://github.com/WordPress/gutenberg/pull/61816))
+-   PaletteEdit: Fix another flaky test. ([61818](https://github.com/WordPress/gutenberg/pull/61818))
+-   PaletteEdit: Fix flaky test. ([61791](https://github.com/WordPress/gutenberg/pull/61791))
+-   Shadow: Add unit tests for shadow support. ([60063](https://github.com/WordPress/gutenberg/pull/60063))
+-   Skip flaky 'Zoom out' end-to-end test. ([61925](https://github.com/WordPress/gutenberg/pull/61925))
+-   Synced Pattern: Wait for pattern creation in end-to-end tests. ([62174](https://github.com/WordPress/gutenberg/pull/62174))
+-   Tests: Change how directives processing gets disabled. ([62095](https://github.com/WordPress/gutenberg/pull/62095))
+-   Workflows: Try a backport changelog. ([61785](https://github.com/WordPress/gutenberg/pull/61785))
+
+#### Build Tooling
+
+-   Add 60 minute timeout to performance job. ([61957](https://github.com/WordPress/gutenberg/pull/61957))
+-   Enable parallel processing for PHPCS sniffs. ([61700](https://github.com/WordPress/gutenberg/pull/61700))
+-   Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748))
+-   React: Upgrade to the new JSX transform. ([61692](https://github.com/WordPress/gutenberg/pull/61692))
+-   Workflows: Test to check for label and skip backport changelog. ([61808](https://github.com/WordPress/gutenberg/pull/61808))
+
+### Various
+
+-   Inserter: Encapsulate styles for tablist and close button. ([61760](https://github.com/WordPress/gutenberg/pull/61760))
+-   Update 'Add template' screen to prefer template_name label instead of singular_name. ([60367](https://github.com/WordPress/gutenberg/pull/60367))
+-   Update: Move pattern actions to the editor package. [take 2]. ([61612](https://github.com/WordPress/gutenberg/pull/61612))
+
+#### Global Styles
+
+-   Update copy for color variations from "Presets" to "Palettes". ([62147](https://github.com/WordPress/gutenberg/pull/62147))
+
+#### Synced Patterns
+
+-   Remove `IS_GUTENBERG_PLUGIN` check to ensure pattern overrides ship in 6.6. ([62011](https://github.com/WordPress/gutenberg/pull/62011))
+
+#### npm Packages
+
+-   Packages: Increase the minimum required Node.js version to v18.12.0. ([61930](https://github.com/WordPress/gutenberg/pull/61930))
+
+#### Layout
+
+-   Update child layout selector to match core. ([61777](https://github.com/WordPress/gutenberg/pull/61777))
+
+#### Components
+
+-   Introduce Combobox `expandOnFocus` property. ([61705](https://github.com/WordPress/gutenberg/pull/61705))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @akashdhawade2005: Fix: Block library README.md link. ([62081](https://github.com/WordPress/gutenberg/pull/62081))
+-   @amitraj2203: Added Bluesky icon to the Social Icon Block. ([61372](https://github.com/WordPress/gutenberg/pull/61372))
+-   @dbrian: Add JSDoc to PostVisibility, PostVisibilityCheck, and PostVisibilityLabel. ([61735](https://github.com/WordPress/gutenberg/pull/61735))
+-   @gemkev: Update tutorial.md. ([62054](https://github.com/WordPress/gutenberg/pull/62054))
+-   @kellenmace: Fix an issue causing wp-scripts commands to fail if the file path contained a space character. ([61748](https://github.com/WordPress/gutenberg/pull/61748))
+-   @narenin: Fixed: Custom HTML Block should display content in LTR layout for all languages. ([62083](https://github.com/WordPress/gutenberg/pull/62083))
+-   @nateinaction: Add documentation for the EditorProvider and ExperimentalEditorProvider components. ([61739](https://github.com/WordPress/gutenberg/pull/61739))
+-   @paolopiaggio: Playwright end-to-end Utils: Add fullscreenMode option to createNewPost. ([61766](https://github.com/WordPress/gutenberg/pull/61766))
+-   @sanjucta: Add docblock to PostTitle and PostTitleRaw component. ([61740](https://github.com/WordPress/gutenberg/pull/61740))
+-   @vipul0425: Fix: The latest post block - post titles overlapping. ([61356](https://github.com/WordPress/gutenberg/pull/61356))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @abhi3315 @afercia @ajlende @akashdhawade2005 @akasunil @Aljullu @amitraj2203 @andrewserong @anton-vlasenko @anver @artemiomorales @carolinan @cbravobernal @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @dbrian @draganescu @ellatrix @fabiankaegy @fullofcaffeine @gemkev @geriux @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kellenmace @kevin940726 @kt-12 @madhusudhand @Mamaduka @mattsherman @mcsf @michalczaplinski @mirka @narenin @nateinaction @ndiego @ntsekouras @oandregal @ockham @paolopiaggio @ramonjd @retrofox @richtabor @sanjucta @SantosGuillamot @scruffian @senadir @shail-mehta @sirreal @stokesman @t-hamano @talldan @taylorgorman @tellthemachines @tjcafferkey @twstokes @tyxla @vcanales @vipul0425 @westonruter @WunderBart @youknowriad
+
+= 18.4.1 =
+
+## Changelog
+
+### Bug fixes
+
+-   Writing flow: fix paste for input fields ([61389](https://github.com/WordPress/gutenberg/pull/61389))
+
+= 18.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Layout
+
+-   Check child layout exists before generating classname. ([61392](https://github.com/WordPress/gutenberg/pull/61392))
+-   Hide Image block resizer when inside a grid layout. ([61603](https://github.com/WordPress/gutenberg/pull/61603))
+
+#### Grid interactivity
+
+-   Improve `max` attribute logic. ([61420](https://github.com/WordPress/gutenberg/pull/61420))
+-   Improve how grid resizer handles 0-width and 0-height cells. ([61423](https://github.com/WordPress/gutenberg/pull/61423))
+-   Show grid visualizer when block inspector is closed. ([61429](https://github.com/WordPress/gutenberg/pull/61429))
+-   Stabilise grid layout visualiser and resizer. ([61640](https://github.com/WordPress/gutenberg/pull/61640))
+
+#### Global Styles
+
+-   Add aspect ratio presets support via theme.json. ([47271](https://github.com/WordPress/gutenberg/pull/47271), [61774](https://github.com/WordPress/gutenberg/pull/61774))
+-   Background images: Remove required "file" prop. ([61387](https://github.com/WordPress/gutenberg/pull/61387), [61469](https://github.com/WordPress/gutenberg/pull/61469))
+-   Change "Solid" tab to "Color". ([61366](https://github.com/WordPress/gutenberg/pull/61366))
+-   Improve panel title and description for palette. ([61365](https://github.com/WordPress/gutenberg/pull/61365))
+-   Tweak palette panel spacing and empty message. ([61368](https://github.com/WordPress/gutenberg/pull/61368))
+-   Update color variations. ([61334](https://github.com/WordPress/gutenberg/pull/61334))
+
+#### Block Styles
+
+-   Add extended version of register block style functions. ([61029](https://github.com/WordPress/gutenberg/pull/61029))
+
+### Post actions
+
+-   Improve success messages of some post actions. ([61539](https://github.com/WordPress/gutenberg/pull/61539))
+-   Unify the list of available post type actions. ([61520](https://github.com/WordPress/gutenberg/pull/61520))
+-   Don't export duplicatePostAction for now. ([61407](https://github.com/WordPress/gutenberg/pull/61407))
+
+#### Zoom Out
+
+-   Editor: Enable Zoom-out mode in the post editor. ([61293](https://github.com/WordPress/gutenberg/pull/61293))
+-   Keep original viewport width (single scale). ([61424](https://github.com/WordPress/gutenberg/pull/61424))
+-   Open inserter sidebar when clicking on inserter buttons on zoom-out mode. ([61434](https://github.com/WordPress/gutenberg/pull/61434))
+-   Remove experimental zoom out control. ([61509](https://github.com/WordPress/gutenberg/pull/61509))
+-   Zoomed Out View: Don't close the inserter. ([61004](https://github.com/WordPress/gutenberg/pull/61004))
+
+#### Components
+
+-   Do not render FormTokenField label when not defined. ([61336](https://github.com/WordPress/gutenberg/pull/61336))
+-   Placeholder: Tweak placeholder style. ([61590](https://github.com/WordPress/gutenberg/pull/61590))
+-   Add content only descriptions in dropdown menus for patterns and templates. ([61127](https://github.com/WordPress/gutenberg/pull/61127))
+
+#### Block Library
+
+-   List Block: Add block class name to the list block. ([56469](https://github.com/WordPress/gutenberg/pull/56469))
+-   Embeds Block: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352))
+-   Site Logo Block: Add setting labels via the 'register_setting' method. ([61351](https://github.com/WordPress/gutenberg/pull/61351))
+
+#### Block Editor
+
+-   Make `BlockPopover` component public. ([61529](https://github.com/WordPress/gutenberg/pull/61529))
+-   Only add the selected pattern category in metadata during insertion. ([61557](https://github.com/WordPress/gutenberg/pull/61557))
+-   Add a keyboard shortcut to create group from the selected blocks. ([46972](https://github.com/WordPress/gutenberg/pull/46972))
+-   Enhance block outlines and selection interactions. ([60757](https://github.com/WordPress/gutenberg/pull/60757))
+-   Tiny tweak to position close button properly in the inserter. ([61461](https://github.com/WordPress/gutenberg/pull/61461))
+
+#### Editor
+
+-   Editor: Unify Header component. ([61273](https://github.com/WordPress/gutenberg/pull/61273))
+-   Editor: Unify the sidebar between the post and site editors. ([61507](https://github.com/WordPress/gutenberg/pull/61507))
+-   Editor: Update and simplify the Post Summary and Post Card section in the document sidebar. ([61624](https://github.com/WordPress/gutenberg/pull/61624))
+-   Try: Improve date-wrapping in prepublish flow. ([61490](https://github.com/WordPress/gutenberg/pull/61490))
+-   Update: Implement the new discussion panel design. ([61357](https://github.com/WordPress/gutenberg/pull/61357))
+
+#### Post Editor
+
+-   Add global styles to settings using existing context code. ([61556](https://github.com/WordPress/gutenberg/pull/61556))
+-   Display a notice after moving a post into the trash. ([61670](https://github.com/WordPress/gutenberg/pull/61670))
+-   Simplify Post Publish Flow status term. ([61386](https://github.com/WordPress/gutenberg/pull/61386))
+
+#### Site Editor
+
+-   Redirect `/wp_template_part/all` to `/patterns`. ([61446](https://github.com/WordPress/gutenberg/pull/61446))
+-   Moves "Patterns" command to site editor main navigation. ([61416](https://github.com/WordPress/gutenberg/pull/61416))
+-   Adds "Template Parts" command to site editor. ([61287](https://github.com/WordPress/gutenberg/pull/61287))
+-   Show pin/unpin button on the site editor plugin sidebar. ([61448](https://github.com/WordPress/gutenberg/pull/61448))
+-   Remove default entry into Navigation Menu focus mode but retain ability to access via "Edit". ([61275](https://github.com/WordPress/gutenberg/pull/61275))
+
+#### Data Views
+
+-   Add bulk actions toolbar. ([59714](https://github.com/WordPress/gutenberg/pull/59714))
+-   Align list and table layout visuals. ([61157](https://github.com/WordPress/gutenberg/pull/61157))
+-   Add actions to list layout. ([60805](https://github.com/WordPress/gutenberg/pull/60805))
+-   Make pattern preview click area larger. ([61250](https://github.com/WordPress/gutenberg/pull/61250))
+
+### Bug Fixes
+
+#### Layout
+
+-   Fix grid item resizing in non-iframed editor. ([61636](https://github.com/WordPress/gutenberg/pull/61636))
+-   Fix resizing items to top and left with GridItemResizer. ([60986](https://github.com/WordPress/gutenberg/pull/60986))
+-   Grid Visualizer: Fix grid item resizing in site editor. ([61641](https://github.com/WordPress/gutenberg/pull/61641))
+-   Grid Visualizer: Fix resize not ending when mouse is released outside grid's bounds. ([61668](https://github.com/WordPress/gutenberg/pull/61668))
+-   GridItemResizer: Fix resizing when List View is open. ([61643](https://github.com/WordPress/gutenberg/pull/61643))
+-   Only show grid resizer if grid block allows resizing on children. ([61552](https://github.com/WordPress/gutenberg/pull/61552))
+
+#### Global Styles
+
+-   Background image: Explicitly set background repeat value in user styles. ([61526](https://github.com/WordPress/gutenberg/pull/61526))
+-   Background image: Size controls should show when an image is set. ([61388](https://github.com/WordPress/gutenberg/pull/61388))
+-   Make sure to replace all instances of `:Where(body)` instead of just …. ([61602](https://github.com/WordPress/gutenberg/pull/61602))
+-   Reduce specificity of global styles body margin reset rule. ([61340](https://github.com/WordPress/gutenberg/pull/61340))
+-   Remove Post Template background override. ([61545](https://github.com/WordPress/gutenberg/pull/61545))
+
+#### Patterns
+
+-   Fix blocks in unsynced patterns can enable overrides. ([61639](https://github.com/WordPress/gutenberg/pull/61639))
+-   Revert "Use contentOnly locking for pattern block, remove hard-coded block check in block inspector". ([61517](https://github.com/WordPress/gutenberg/pull/61517))
+
+#### List View
+
+-   Account for text fields in shortcut handler. ([61583](https://github.com/WordPress/gutenberg/pull/61583))
+-   Add a special case for shortcuts coming from modals. ([61606](https://github.com/WordPress/gutenberg/pull/61606))
+-   Standardize List View feature name to use title case capitalization. ([61535](https://github.com/WordPress/gutenberg/pull/61535))
+
+#### Zoom Out
+
+-   Block editor: Scroll block into view on insert. ([61418](https://github.com/WordPress/gutenberg/pull/61418))
+-   Fix double scrollbars in site editor with zoom out view enabled. ([61548](https://github.com/WordPress/gutenberg/pull/61548))
+-   Fix zoom out UI scale. ([61265](https://github.com/WordPress/gutenberg/pull/61265))
+-   Add bottom and top inserters. ([61473](https://github.com/WordPress/gutenberg/pull/61473))
+-   Add patterns loading state. ([61513](https://github.com/WordPress/gutenberg/pull/61513))
+-   Don't allow dropping outside section root. ([61512](https://github.com/WordPress/gutenberg/pull/61512))
+-   Don't select last block. ([61484](https://github.com/WordPress/gutenberg/pull/61484))
+-   Pass the section root ID to the inserter. ([61464](https://github.com/WordPress/gutenberg/pull/61464))
+-   Zoom-out: Fix iframe ref error. ([61200](https://github.com/WordPress/gutenberg/pull/61200))
+
+#### Components
+
+-   Fix inconsistent complementary header styles. ([61331](https://github.com/WordPress/gutenberg/pull/61331))
+-   Fix sticking “Reset” option in `ToolsPanel`. ([60621](https://github.com/WordPress/gutenberg/pull/60621))
+-   RadioControl: Fix shrinking radio controls. ([61476](https://github.com/WordPress/gutenberg/pull/61476))
+
+#### Block Library
+
+-   Navigation Block: Add list item wrapper to social links when used in navigation block. ([61396](https://github.com/WordPress/gutenberg/pull/61396))
+-   HTML Block: Remove font weight on toolbar tab button - #61254. ([61308](https://github.com/WordPress/gutenberg/pull/61308))
+-   Time to Read Block: Fix "this block has encountered an error" - #61459. ([61614](https://github.com/WordPress/gutenberg/pull/61614))
+-   Image Block: Enable crop action when image has a link. ([61470](https://github.com/WordPress/gutenberg/pull/61470))
+-   Shortcode Block: Fix layout margin override. ([55028](https://github.com/WordPress/gutenberg/pull/55028))
+
+#### Block Editor
+
+-   Editor styles: Fix cache (by wrapper selector). ([61397](https://github.com/WordPress/gutenberg/pull/61397))
+-   Fix Truncate component for long unbreakable text. ([61137](https://github.com/WordPress/gutenberg/pull/61137))
+-   Fix focus loss due to filtering blocks. ([61558](https://github.com/WordPress/gutenberg/pull/61558))
+-   Fix: The issue of appender button not clickable in row/stack group. ([61585](https://github.com/WordPress/gutenberg/pull/61585))
+-   Writing Flow/Rich Text: Unify split logic. ([54543](https://github.com/WordPress/gutenberg/pull/54543))
+
+#### Post Editor
+
+-   Fix the 'usePaddingAppender' error. ([61500](https://github.com/WordPress/gutenberg/pull/61500))
+-   Return an empty object when no fallback templates are found (wp/v2/templates/lookup). ([60925](https://github.com/WordPress/gutenberg/pull/60925))
+
+#### Site Editor
+
+-   Fix user capabilities check for the Site Editor. ([61444](https://github.com/WordPress/gutenberg/pull/61444))
+-   Preserve the wp_theme_preview query arg when navigating in Site Editor. ([61394](https://github.com/WordPress/gutenberg/pull/61394))
+-   Trigger sidebar animations only on cross-route navigations. ([61402](https://github.com/WordPress/gutenberg/pull/61402))
+-   Site Editor: Restore the hover zoom effect when hovering the editor frame. ([61647](https://github.com/WordPress/gutenberg/pull/61647))
+
+#### Widgets Editor
+
+-   Hide the close button on the inserter for widgets editor. ([61510](https://github.com/WordPress/gutenberg/pull/61510))
+
+#### Data Views
+
+-   Fix regression on keyboard navigation. ([61478](https://github.com/WordPress/gutenberg/pull/61478))
+-   Improve dataview types. ([61586](https://github.com/WordPress/gutenberg/pull/61586))
+
+#### Interactivity API
+
+-   Interactivity API: Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([61009](https://github.com/WordPress/gutenberg/pull/61009))
+-   Interactivity API: Prevent empty namespace or different namespaces from killing the runtime. ([61409](https://github.com/WordPress/gutenberg/pull/61409))
+-   Interactivity API: Prevent wrong written directives from killing the runtime. ([61249](https://github.com/WordPress/gutenberg/pull/61249))
+
+### Accessibility
+
+#### Components
+
+-   ComboboxControl supports disabled items. ([61294](https://github.com/WordPress/gutenberg/pull/61294))
+-   Remove usage of aria-details from InputControl and BaseControl. ([61203](https://github.com/WordPress/gutenberg/pull/61203))
+
+#### Block Library
+
+-   Fix the RRS block placeholder labeling and improve spacing. ([61576](https://github.com/WordPress/gutenberg/pull/61576))
+
+#### Block Editor
+
+-   Focus currently selected block when entering canvas. ([61472](https://github.com/WordPress/gutenberg/pull/61472))
+-   Focus inserter toggle when closing the inserter sidebar. ([61467](https://github.com/WordPress/gutenberg/pull/61467))
+-   Inserter: Add close button. ([61421](https://github.com/WordPress/gutenberg/pull/61421))
+
+#### Post Editor
+
+-   Post Actions: Correctly disable dropdown trigger. ([61625](https://github.com/WordPress/gutenberg/pull/61625))
+
+### Performance
+
+-   Calculate and report quartiles in performance results. ([60950](https://github.com/WordPress/gutenberg/pull/60950))
+-   Refactor InserterTabs to use children and remove re-memoizing. ([61295](https://github.com/WordPress/gutenberg/pull/61295))
+-   Tests: Improve collection and reporting. ([61450](https://github.com/WordPress/gutenberg/pull/61450))
+-   Performance tests: Fix results file path. ([61686](https://github.com/WordPress/gutenberg/pull/61686))
+-   Revert "useBlockSync: Remove isControlled effect". ([61480](https://github.com/WordPress/gutenberg/pull/61480))
+
+### Documentation
+
+-   Update old document URLs to new ones. ([61595](https://github.com/WordPress/gutenberg/pull/61595))
+-   Add a section about `block_editor_settings_all` to the Filters and Hooks doc. ([61597](https://github.com/WordPress/gutenberg/pull/61597))
+-   Add link to VS Code Playwright Extension. ([61505](https://github.com/WordPress/gutenberg/pull/61505))
+-   Added check for duplicated slugs during manifest.json generation. ([61332](https://github.com/WordPress/gutenberg/pull/61332))
+-   Block Editor: Remove `multiline` prop from `Richtext` doc. ([61592](https://github.com/WordPress/gutenberg/pull/61592))
+-   Docs: How-to Guides > Meta Boxes - Update metabox.md. ([61314](https://github.com/WordPress/gutenberg/pull/61314))
+-   Docs: Interactivity API - Add viewScriptModule as a requirement to work with the Interactivity API. ([61355](https://github.com/WordPress/gutenberg/pull/61355))
+-   Docs: Interactivity API : New pages - About and FAQ. ([61323](https://github.com/WordPress/gutenberg/pull/61323))
+-   Docs: Interactivity Api - Small fixes. ([61403](https://github.com/WordPress/gutenberg/pull/61403))
+-   Docs: Remove list of keyboard shortcuts from FAQ page. ([61591](https://github.com/WordPress/gutenberg/pull/61591))
+-   Docs: Update theme-json-living.md to fix little issue. ([61354](https://github.com/WordPress/gutenberg/pull/61354))
+-   Fix WP versions for theme.json v3 migration in inline documentation. ([61328](https://github.com/WordPress/gutenberg/pull/61328))
+-   Several Typo Correction in Inline doc. ([61379](https://github.com/WordPress/gutenberg/pull/61379))
+-   Small fixes as per feedback received. ([61445](https://github.com/WordPress/gutenberg/pull/61445))
+-   Theme.json: Update schema with working create theme link. ([61306](https://github.com/WordPress/gutenberg/pull/61306))
+-   Update @wordpress/a11y README.md. ([61635](https://github.com/WordPress/gutenberg/pull/61635))
+-   Update Node.js requirement in create-block docs. ([60962](https://github.com/WordPress/gutenberg/pull/60962))
+-   Update and restructure the Editor Hooks doc. ([61596](https://github.com/WordPress/gutenberg/pull/61596))
+-   Updated links to developer resources on README.md. ([61525](https://github.com/WordPress/gutenberg/pull/61525))
+-   theme.json schema: Remove duplicate key. ([61523](https://github.com/WordPress/gutenberg/pull/61523))
+-   Several Typo Corrections in Inline Documentations. ([61662](https://github.com/WordPress/gutenberg/pull/61662))
+
+### Code Quality
+
+-   PHP load: move rest template controller 6.6 import to "REST" area. ([61564](https://github.com/WordPress/gutenberg/pull/61564))
+-   Replace classnames with clsx. ([61138](https://github.com/WordPress/gutenberg/pull/61138), [61380](https://github.com/WordPress/gutenberg/pull/61380))
+
+#### Block Bindings
+
+-   Remove not needed breaks in `gutenberg_block_bindings_replace_html`. ([61660](https://github.com/WordPress/gutenberg/pull/61660))
+-   Simplify the HTML replacement logic until the HTML API is ready. ([61236](https://github.com/WordPress/gutenberg/pull/61236))
+
+#### Patterns
+
+-   Pattern overrides: Use block binding editing API. ([60721](https://github.com/WordPress/gutenberg/pull/60721))
+
+#### Components
+
+-   Assess stabilization of `Theme`. ([61077](https://github.com/WordPress/gutenberg/pull/61077))
+-   Upgrade @types/react package and @types/react-dom. ([60796](https://github.com/WordPress/gutenberg/pull/60796))
+-   Fix problem with gradient-parser types. ([61679](https://github.com/WordPress/gutenberg/pull/61679))
+
+#### Block Editor
+
+-   Improve `LineHeightControl` unit tests. ([61337](https://github.com/WordPress/gutenberg/pull/61337))
+
+#### Editor
+
+-   Move the starter template options to the editor package. ([61665](https://github.com/WordPress/gutenberg/pull/61665))
+
+#### Post Editor
+
+-   Edit post: Do not consider sidebars mutually exclusive. ([61468](https://github.com/WordPress/gutenberg/pull/61468))
+-   Editor: Move the sidebar component to the editor package. ([61497](https://github.com/WordPress/gutenberg/pull/61497))
+
+#### Site Editor
+
+-   Site Editor sidebar: Provide explicit backPaths, remove the getBackPath helper. ([61286](https://github.com/WordPress/gutenberg/pull/61286))
+
+#### Data Views
+
+-   Expand typing more components. ([61654](https://github.com/WordPress/gutenberg/pull/61654))
+-   Add end-to-end tests for keyboard interactions in DataViews ListView. ([61648](https://github.com/WordPress/gutenberg/pull/61648))
+-   Add types to the ViewGrid component. ([61667](https://github.com/WordPress/gutenberg/pull/61667))
+-   Type the BulkActions component. ([61666](https://github.com/WordPress/gutenberg/pull/61666))
+-   Type the ItemActions component. ([61400](https://github.com/WordPress/gutenberg/pull/61400))
+-   Type the ViewList component. ([61246](https://github.com/WordPress/gutenberg/pull/61246))
+-   Remove `onActionPerformed` & `onActionStart` from the ActionModal API. ([61659](https://github.com/WordPress/gutenberg/pull/61659))
+
+#### Interactivity API
+
+-   Add types for warn helper. ([61687](https://github.com/WordPress/gutenberg/pull/61687))
+-   Enable strict type checking. ([59865](https://github.com/WordPress/gutenberg/pull/59865))
+
+### Tools
+
+#### Testing
+
+-   Convert FocalPointPicker tests to TypeScript. ([61373](https://github.com/WordPress/gutenberg/pull/61373))
+-   E2E: Fix artifacts handling in CI. ([61338](https://github.com/WordPress/gutenberg/pull/61338))
+-   Interactivity API: Fix flaky tests for attribute hydration. ([61615](https://github.com/WordPress/gutenberg/pull/61615))
+-   Lightbox UI block override tests. ([61414](https://github.com/WordPress/gutenberg/pull/61414))
+-   Playwright Utils: Silence some of the warnings coming from Firefox. ([61451](https://github.com/WordPress/gutenberg/pull/61451))
+-   Test: Fix failing style linting error. ([61649](https://github.com/WordPress/gutenberg/pull/61649))
+-   Tests: Fix flaky interactivity deferred test. ([61359](https://github.com/WordPress/gutenberg/pull/61359))
+
+#### Build Tooling
+
+-   Add stylelint rule to disallow the `order` CSS property. ([61243](https://github.com/WordPress/gutenberg/pull/61243))
+-   Enforce `@since` tags in /packages/block-serialization-default-parser/ and other files. ([60007](https://github.com/WordPress/gutenberg/pull/60007))
+-   Bug: False positives for `react-hooks/exhaustive-deps`. ([61599](https://github.com/WordPress/gutenberg/pull/61599))
+-   Scripts: Add RTLCSS to wp-scripts. ([61540](https://github.com/WordPress/gutenberg/pull/61540))
+-   WP-ENV: Fix return type and tests. ([61631](https://github.com/WordPress/gutenberg/pull/61631))
+-   Create Block: Match specified engines with Gutenberg and Core. ([61430](https://github.com/WordPress/gutenberg/pull/61430))
+-   Set `prefer-dedupe` as the default. ([61630](https://github.com/WordPress/gutenberg/pull/61630))
+-   build: Suggest workaround if `tsc --build` fails. ([61501](https://github.com/WordPress/gutenberg/pull/61501))
+-   build:package-types: Run silently to reduce user confusion. ([61530](https://github.com/WordPress/gutenberg/pull/61530))
+-   GitHub Actions: Fix PHP file change detection filter pattern. ([61183](https://github.com/WordPress/gutenberg/pull/61183))
+-   Dedupe packages. ([61532](https://github.com/WordPress/gutenberg/pull/61532))
+-   Patch `react-autosize-textarea` for updated types. ([61570](https://github.com/WordPress/gutenberg/pull/61570))
+-   Upgrade @use-gesture/react. ([61503](https://github.com/WordPress/gutenberg/pull/61503))
+-   Upgrade framer-motion. ([61572](https://github.com/WordPress/gutenberg/pull/61572))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @amitraj2203: Embeds: Add Bluesky variation. ([61352](https://github.com/WordPress/gutenberg/pull/61352))
+-   @jpstevens: Convert FocalPointPicker tests to TypeScript. ([61373](https://github.com/WordPress/gutenberg/pull/61373))
+-   @kovshenin: Update Node.js requirement in create-block docs. ([60962](https://github.com/WordPress/gutenberg/pull/60962))
+-   @mrmurphy: Upgrade @types/react package and @types/react-dom. ([60796](https://github.com/WordPress/gutenberg/pull/60796))
+-   @scheinercc: Update @wordpress/a11y README.md. ([61635](https://github.com/WordPress/gutenberg/pull/61635))
+-   @StyleShit: Bug: False positives for `react-hooks/exhaustive-deps`. ([61599](https://github.com/WordPress/gutenberg/pull/61599))
+-   @vipul0425: Fix: The issue of appender button not clickable in row/stack group. ([61585](https://github.com/WordPress/gutenberg/pull/61585))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @amitraj2203 @anton-vlasenko @artemiomorales @bacoords @carolinan @cbravobernal @colinduwe @DaniGuardiola @DAreRodz @desrosj @draganescu @ellatrix @fullofcaffeine @geriux @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @johnhooks @jorgefilipecosta @jpstevens @jsnajdr @juanmaguitar @kevin940726 @kovshenin @MaggieCabrera @Mamaduka @mcsf @mrmurphy @ndiego @noisysocks @ntsekouras @oandregal @ramonjd @retrofox @richtabor @ryelle @SantosGuillamot @scheinercc @scruffian @shail-mehta @sirreal @stokesman @StyleShit @swissspidy @t-hamano @talldan @tellthemachines @tyxla @vipul0425 @WunderBart @youknowriad
+
+= 18.3.0 =
+
+## Changelog
+
+### Enhancements
+
+-   Output post classes in the editor. ([60642](https://github.com/WordPress/gutenberg/pull/60642))
+-   Abstract keyboard shortcuts for heading to paragraph transform and vice-versa. ([60606](https://github.com/WordPress/gutenberg/pull/60606))
+-   Capitalize more occurrences of Navigation Menu. ([60747](https://github.com/WordPress/gutenberg/pull/60747))
+-   Clean up top toolbar to use same metrics as block toolbar. ([61126](https://github.com/WordPress/gutenberg/pull/61126))
+-   Update template and template parts labels. ([61146](https://github.com/WordPress/gutenberg/pull/61146))
+-   Update the template preview menu item text in the Template option. ([57802](https://github.com/WordPress/gutenberg/pull/57802))
+-   Upgrade React to v18.3. ([61202](https://github.com/WordPress/gutenberg/pull/61202))
+
+#### Site Editor
+
+-   Add PluginDocumentSettingPanel in template inspector controls. ([60961](https://github.com/WordPress/gutenberg/pull/60961))
+-   Add publish flow in site editor. ([61136](https://github.com/WordPress/gutenberg/pull/61136))
+-   Classic Theme: Expose new Patterns page and remove Template Parts submenu. ([61080](https://github.com/WordPress/gutenberg/pull/61080))
+-   Consolidate editor/canvas resize handles. ([60712](https://github.com/WordPress/gutenberg/pull/60712))
+-   Patterns data view: Remove icons in favor of dedicated sync status field. ([60833](https://github.com/WordPress/gutenberg/pull/60833))
+-   Patterns: Remove "Manage all parts" page & link. ([60689](https://github.com/WordPress/gutenberg/pull/60689))
+-   Tweak Template/Template Parts/Page creation modal. ([61005](https://github.com/WordPress/gutenberg/pull/61005))
+-   Drop patterns and blocks between sections only in zoom out mode. ([60828](https://github.com/WordPress/gutenberg/pull/60828))
+-   Insert patterns at the end of the root section. ([60855](https://github.com/WordPress/gutenberg/pull/60855))
+-   Typography Panel: Use simple labels. ([60886](https://github.com/WordPress/gutenberg/pull/60886))
+-   Font Library: Convert heading text to heading elements and group fonts as a list. ([58834](https://github.com/WordPress/gutenberg/pull/58834))
+
+#### Block Editor
+
+-   Add new `TextAlignmentControl` component. ([60841](https://github.com/WordPress/gutenberg/pull/60841))
+-   Editor: Sort style overrides by block client ids. ([61039](https://github.com/WordPress/gutenberg/pull/61039))
+-   Inserter: Bail early when a user has no permission to upload media. ([60983](https://github.com/WordPress/gutenberg/pull/60983))
+-   List View: Use 'isMatch' for unselect the shortcut. ([61223](https://github.com/WordPress/gutenberg/pull/61223))
+-   Move search into inserter tabs. ([61108](https://github.com/WordPress/gutenberg/pull/61108))
+-   Polish Autocomplete popover. ([60131](https://github.com/WordPress/gutenberg/pull/60131))
+
+#### Global Styles
+
+-   Add scoping of feature level selectors for custom block style variations. ([61033](https://github.com/WordPress/gutenberg/pull/61033))
+-   Allow negative values for margin controls. ([60347](https://github.com/WordPress/gutenberg/pull/60347))
+-   Allow opt out of certain sets of styles in the editor. ([61035](https://github.com/WordPress/gutenberg/pull/61035))
+-   Filter out color and typography variations. ([60220](https://github.com/WordPress/gutenberg/pull/60220))
+-   Update utils for scoping CSS selectors. ([61026](https://github.com/WordPress/gutenberg/pull/61026))
+-   Add defaultFontSizes theme.json (theme.json v3). ([58409](https://github.com/WordPress/gutenberg/pull/58409))
+
+#### Block Library
+
+-   Group: Remove hardcoded Group block example styles. ([61027](https://github.com/WordPress/gutenberg/pull/61027))
+-   Remove `Button` component from social link block, replace with `button` element. ([61270](https://github.com/WordPress/gutenberg/pull/61270))
+-   List View: Unify shortcut handlers. ([61130](https://github.com/WordPress/gutenberg/pull/61130))
+-   Update list view spacing. ([60713](https://github.com/WordPress/gutenberg/pull/60713))
+
+#### Post Editor
+
+-   Editor: Move around word count, post status and last edited info in page summary. ([61235](https://github.com/WordPress/gutenberg/pull/61235))
+-   Editor: Update post excerpt panel with new designs. ([60894](https://github.com/WordPress/gutenberg/pull/60894))
+-   Add duplicate post action. ([60637](https://github.com/WordPress/gutenberg/pull/60637))
+-   Make duplicate post action available only on the plugin for now. ([61192](https://github.com/WordPress/gutenberg/pull/61192))
+
+#### Data Views
+
+-   Unbox items in grid layout. ([61159](https://github.com/WordPress/gutenberg/pull/61159))
+-   Update alignment of preview contents in Patterns and Templates data views. ([61190](https://github.com/WordPress/gutenberg/pull/61190))
+
+#### Components
+
+-   ComboboxControl: Simplify string normalization. ([60893](https://github.com/WordPress/gutenberg/pull/60893))
+-   Update help text alignment in CheckboxControl. ([60787](https://github.com/WordPress/gutenberg/pull/60787))
+-   RangeControl: Remove deprecated `reducedMotion` util. ([61119](https://github.com/WordPress/gutenberg/pull/61119))
+-   components - inputStyleNeutral: Remove deprecated `reducedMotion` util. ([61122](https://github.com/WordPress/gutenberg/pull/61122))
+
+### Bug Fixes
+
+-   Editor: Do not show scrollbars when closing sidebars. ([60889](https://github.com/WordPress/gutenberg/pull/60889))
+-   Fix block tab spacing when few available blocks. ([61296](https://github.com/WordPress/gutenberg/pull/61296))
+-   Fix pattern preview focus styles. ([60881](https://github.com/WordPress/gutenberg/pull/60881))
+-   Fix styles panel header. ([61319](https://github.com/WordPress/gutenberg/pull/61319))
+-   Fix typo in clear customizations text. ([61089](https://github.com/WordPress/gutenberg/pull/61089))
+-   Fix: Missing format, categories, and tags on the duplicate post action. ([61194](https://github.com/WordPress/gutenberg/pull/61194))
+-   Fix: Post actions in post card panel is not checking for eligibility. ([60994](https://github.com/WordPress/gutenberg/pull/60994))
+-   Notices: Fix snackbar placement. ([60912](https://github.com/WordPress/gutenberg/pull/60912))
+-   Setup Node action - Set arch for key value. ([61010](https://github.com/WordPress/gutenberg/pull/61010))
+-   docgen: Fix qualified types with type parameters. ([61097](https://github.com/WordPress/gutenberg/pull/61097))
+-   Background image: Tools panel shouldn't show reset button for inherited values. ([61304](https://github.com/WordPress/gutenberg/pull/61304))
+-   Fix template files query by post-type. ([61244](https://github.com/WordPress/gutenberg/pull/61244))
+-   Remove unnecessary period in template block selection notice. ([61087](https://github.com/WordPress/gutenberg/pull/61087))
+-   Fix issue where pattern override values reset when saving. ([61023](https://github.com/WordPress/gutenberg/pull/61023))
+-   Blocks: Merge variations bootstrapped from a server with the client definitions. ([60832](https://github.com/WordPress/gutenberg/pull/60832))
+-   Bump minimum required WordPress version to 6.4. ([60780](https://github.com/WordPress/gutenberg/pull/60780))
+
+#### Site Editor
+
+-   DocumentBar: Account for when top toolbar is open. ([61118](https://github.com/WordPress/gutenberg/pull/61118))
+-   Don't show appender at all inside sections on zoom-out mode. ([60948](https://github.com/WordPress/gutenberg/pull/60948))
+-   Editor: Avoid triggering the start page modal on unsaved pages. ([61082](https://github.com/WordPress/gutenberg/pull/61082))
+-   Fix zoom out mode background color on Safari. ([60873](https://github.com/WordPress/gutenberg/pull/60873))
+-   Fix: Pattern details page backpath. ([61174](https://github.com/WordPress/gutenberg/pull/61174))
+-   Make the zoom out inserters work for sections inside the section root. ([60909](https://github.com/WordPress/gutenberg/pull/60909))
+-   Select last section if parent section doesn't exist. ([61002](https://github.com/WordPress/gutenberg/pull/61002))
+
+#### Components
+
+-   Box Control: Fix issue with negative values. ([60984](https://github.com/WordPress/gutenberg/pull/60984))
+-   Fix usages of uSES with missing getServerSnapshot. ([60943](https://github.com/WordPress/gutenberg/pull/60943))
+
+#### Block Library
+
+-   Avoid unnecessary heading level and paragraph transform via keyboard shortcuts. ([60955](https://github.com/WordPress/gutenberg/pull/60955))
+-   Navigation: Remove unnecessary `__experimentalStyle`. ([60965](https://github.com/WordPress/gutenberg/pull/60965))
+
+### Accessibility
+
+-   Add aria-haspopup="dialog" to Enable/Disable overrides button. ([61309](https://github.com/WordPress/gutenberg/pull/61309))
+-   Fix unlabeled PostURL Copy button. ([61195](https://github.com/WordPress/gutenberg/pull/61195))
+-   [Data Views] User patterns: Use excerpt as description. ([60549](https://github.com/WordPress/gutenberg/pull/60549))
+
+### Performance
+
+-   Block lib: columns: Remove store subs on mount. ([61123](https://github.com/WordPress/gutenberg/pull/61123))
+-   Block: Remove outline related store selecting. ([61139](https://github.com/WordPress/gutenberg/pull/61139))
+-   Rich text: Combine all ref effects. ([60936](https://github.com/WordPress/gutenberg/pull/60936))
+-   Template lock: Batch block disabling. ([60934](https://github.com/WordPress/gutenberg/pull/60934))
+-   useBlockSync: Avoid replacing blocks twice on mount. ([60967](https://github.com/WordPress/gutenberg/pull/60967))
+-   useMatchMedia: Cache queries. ([61000](https://github.com/WordPress/gutenberg/pull/61000))
+-   ListViewBlock: Combine 'useSelect' hooks, part two. ([61054](https://github.com/WordPress/gutenberg/pull/61054))
+-   Remove `showFixedToolbar` from `useShowBlockTools`. ([60717](https://github.com/WordPress/gutenberg/pull/60717))
+-   Editor: Optimize some of the post-support panels. ([61003](https://github.com/WordPress/gutenberg/pull/61003))
+-   Core data: getEditedEntityRecord: Do not return empty object. ([60988](https://github.com/WordPress/gutenberg/pull/60988))
+-   Drop zone: Avoid media query on mount. ([60546](https://github.com/WordPress/gutenberg/pull/60546))
+-   Nav link: Use rich text value. ([60503](https://github.com/WordPress/gutenberg/pull/60503))
+
+### Experiments
+
+#### Interactivity API
+
+-   Add full page client-side navigation experiment setting. ([59707](https://github.com/WordPress/gutenberg/pull/59707))
+
+### Documentation
+
+-   Add AutosaveMonitor component JSDoc enhancements. ([60905](https://github.com/WordPress/gutenberg/pull/60905))
+-   Add Documentation for CharacterCount component. ([60906](https://github.com/WordPress/gutenberg/pull/60906))
+-   Add EditorSnackbars component documentation. ([61110](https://github.com/WordPress/gutenberg/pull/61110))
+-   Add documentation for DocumentOutline and DocumentOutlineCheck components. ([61129](https://github.com/WordPress/gutenberg/pull/61129))
+-   Add documentation for EditorHistoryRedo and EditorHistoryUndo. ([60932](https://github.com/WordPress/gutenberg/pull/60932))
+-   Add documentation for EditorKeyboardShortcuts and EditorKeyboardShortcutsRegister. ([60933](https://github.com/WordPress/gutenberg/pull/60933))
+-   Add documentation for PostAuthor, PostAuthorCheck, PostAuthorPanel components. ([61090](https://github.com/WordPress/gutenberg/pull/61090))
+-   Added doc for components PageAttributesCheck, PageAttributesPanel, PageAttributesOrder, PageAttributesParent. ([60977](https://github.com/WordPress/gutenberg/pull/60977))
+-   Change the name of the Interactivity API quick start guide markdown file. ([61198](https://github.com/WordPress/gutenberg/pull/61198))
+-   Docs: Fix import statement of PluginMoreMenuItem. ([60931](https://github.com/WordPress/gutenberg/pull/60931))
+-   Docs: Handle "oneOf" in theme.json schema doc generation. ([61024](https://github.com/WordPress/gutenberg/pull/61024))
+-   Fix import in block editor’s readme example. ([61218](https://github.com/WordPress/gutenberg/pull/61218))
+-   Fix use local version of theme.json schema in bundled files. ([61312](https://github.com/WordPress/gutenberg/pull/61312))
+-   FontSizerPicker: Improve documentation for default units. ([60996](https://github.com/WordPress/gutenberg/pull/60996))
+-   InputControl: Added password visibility story. ([60898](https://github.com/WordPress/gutenberg/pull/60898))
+-   Move iAPI documentation from package to reference guides. ([61143](https://github.com/WordPress/gutenberg/pull/61143))
+-   Refresh the folder structure documentation page. ([60953](https://github.com/WordPress/gutenberg/pull/60953))
+-   Small-typo-change. ([61178](https://github.com/WordPress/gutenberg/pull/61178))
+-   Theme JSON: Backport PHP annotations from Core. ([61301](https://github.com/WordPress/gutenberg/pull/61301))
+-   Update an anchor link in block-in-the-editor.md. ([59527](https://github.com/WordPress/gutenberg/pull/59527))
+-   Update block-deprecation.md. ([60768](https://github.com/WordPress/gutenberg/pull/60768))
+-   Update documentation for theme.json version 3. ([61221](https://github.com/WordPress/gutenberg/pull/61221))
+-   Update main readme file with relevant current information. ([60942](https://github.com/WordPress/gutenberg/pull/60942))
+
+### Code Quality
+
+-   DataViews: Enable types. ([61185](https://github.com/WordPress/gutenberg/pull/61185))
+-   Editor: Cleanup edit-post classnames and documentation. ([61240](https://github.com/WordPress/gutenberg/pull/61240))
+-   Editor: Consistently deprecate edit-post and edit-site slots. ([61134](https://github.com/WordPress/gutenberg/pull/61134))
+-   Editor: Unify the BlockContextualToolbar component between post and site editors. ([61104](https://github.com/WordPress/gutenberg/pull/61104))
+-   Editor: Unify the more menu. ([60910](https://github.com/WordPress/gutenberg/pull/60910))
+-   Editor: Unify the region navigation keyboard shortcuts. ([60907](https://github.com/WordPress/gutenberg/pull/60907))
+-   Fix: Actions moved to the editor package still reference edit-site on their ids. ([60899](https://github.com/WordPress/gutenberg/pull/60899))
+-   Remove unnecessary `usesContext` from paragraph block. ([61008](https://github.com/WordPress/gutenberg/pull/61008))
+-   Removed Extra Space Before Since. ([60918](https://github.com/WordPress/gutenberg/pull/60918))
+-   ToolsMoreMenuGroup: Remove form post editor. ([61132](https://github.com/WordPress/gutenberg/pull/61132))
+-   Unify placeholders. ([59275](https://github.com/WordPress/gutenberg/pull/59275))
+-   Use `math.div` for scss division. ([61285](https://github.com/WordPress/gutenberg/pull/61285))
+-   useBlockProps: Remove dead code. ([61133](https://github.com/WordPress/gutenberg/pull/61133))
+-   useBlockSync: Just testing without isControlled effect. ([61114](https://github.com/WordPress/gutenberg/pull/61114))
+-   Add eslint autofix commit to ignored git commits. ([61253](https://github.com/WordPress/gutenberg/pull/61253))
+-   Rephrasing for accuracy and link to Core Trac ticket. ([61284](https://github.com/WordPress/gutenberg/pull/61284))
+-   Blocks: Add a warning when registering variation without a name. ([61037](https://github.com/WordPress/gutenberg/pull/61037))
+-   DataViews: Cleanup unused type property. ([61197](https://github.com/WordPress/gutenberg/pull/61197))
+-   DataViews: More dataviews types. ([61193](https://github.com/WordPress/gutenberg/pull/61193))
+-   Quality: Fix php warning error. ([61321](https://github.com/WordPress/gutenberg/pull/61321))
+-   UseLocation instead of window.location.href. ([61230](https://github.com/WordPress/gutenberg/pull/61230))
+-   Use contentOnly locking for pattern block. ([61227](https://github.com/WordPress/gutenberg/pull/61227))
+-   Editor: No need to memorize callback in 'SwapTemplateButton'. ([61049](https://github.com/WordPress/gutenberg/pull/61049))
+-   Improve data-wp-context debugging by validating it as a stringified JSON Object. ([61045](https://github.com/WordPress/gutenberg/pull/61045))
+-   Theme JSON: Extract util to get valid block style variations. ([61030](https://github.com/WordPress/gutenberg/pull/61030))
+-   Elements: Deprecate old block support filter callbacks. ([59538](https://github.com/WordPress/gutenberg/pull/59538))
+
+#### Components
+
+-   AlignmentMatrixControl: Remove deprecated `reducedMotion` util. ([61113](https://github.com/WordPress/gutenberg/pull/61113))
+-   FocalPointPicker: Remove deprecated `reducedMotion` util. ([61116](https://github.com/WordPress/gutenberg/pull/61116))
+-   Navigation: Remove deprecated `reducedMotion` util. ([61117](https://github.com/WordPress/gutenberg/pull/61117))
+-   Remove "experimental" designation for `CustomSelectControlV2`. ([61078](https://github.com/WordPress/gutenberg/pull/61078))
+-   ToggleGroupControl: Remove deprecated `reducedMotion` util. ([61120](https://github.com/WordPress/gutenberg/pull/61120))
+-   View: Fix TypeScript types. ([60919](https://github.com/WordPress/gutenberg/pull/60919))
+-   components/elevation: Remove deprecated reducedMotion util. ([61115](https://github.com/WordPress/gutenberg/pull/61115))
+
+#### Block Editor
+
+-   Convert Media Inserter to Tabs Pattern. ([60970](https://github.com/WordPress/gutenberg/pull/60970))
+-   Obviate mousetrap around Navigation Link popover. ([61050](https://github.com/WordPress/gutenberg/pull/61050))
+-   editPost: Deprecate \_\_experimentalPluginPostExcerpt. ([61188](https://github.com/WordPress/gutenberg/pull/61188))
+-   editPost: \_\_experimentalPluginPostExcerpt return `<PluginPostExcerpt />`. ([61238](https://github.com/WordPress/gutenberg/pull/61238))
+-   useBlockRefs: Use more efficient lookup map, use uSES. ([60945](https://github.com/WordPress/gutenberg/pull/60945))
+-   withBlockTree: Simplify code that replaces/removes controlled blocks. ([61234](https://github.com/WordPress/gutenberg/pull/61234))
+
+### Tools
+
+-   ESLint Plugin: Handle multi-line translator comments. ([61096](https://github.com/WordPress/gutenberg/pull/61096))
+
+#### Testing
+
+-   Components: Fix snapshot tests of ToggleGroupControl. ([61228](https://github.com/WordPress/gutenberg/pull/61228))
+-   Fix ESLint warning in Performance test files. ([61311](https://github.com/WordPress/gutenberg/pull/61311))
+-   Hotfix: Fixed failing snapshot test. ([61274](https://github.com/WordPress/gutenberg/pull/61274))
+-   Update 3rd party actions within composite action. ([61211](https://github.com/WordPress/gutenberg/pull/61211))
+
+#### Build Tooling
+
+-   Remove block-editor package usage from components. ([60999](https://github.com/WordPress/gutenberg/pull/60999))
+-   lint-staged-typecheck: Don't run TSC when no TS project is affected. ([60998](https://github.com/WordPress/gutenberg/pull/60998))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @huubl: Output post classes in the editor. ([60642](https://github.com/WordPress/gutenberg/pull/60642))
+-   @itzmekhokan: Fix typo in clear customizations text. ([61089](https://github.com/WordPress/gutenberg/pull/61089))
+-   @lanresmith: Update an anchor link in block-in-the-editor.md. ([59527](https://github.com/WordPress/gutenberg/pull/59527))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @carolinan @cbravobernal @colorful-tones @DaniGuardiola @desrosj @draganescu @ellatrix @fabiankaegy @fullofcaffeine @geriux @huubl @itzmekhokan @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @juanmaguitar @lanresmith @MaggieCabrera @Mamaduka @mirka @ntsekouras @oandregal @ockham @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shail-mehta @sirreal @stokesman @sunil25393 @swissspidy @t-hamano @talldan @twstokes @tyxla @youknowriad
+
+= 18.2.0 =
+
+## Changelog
+
+-   Bump minimum required PHP version to 7.2 ([60714](https://github.com/WordPress/gutenberg/pull/60714))
+
+### Enhancements
+
+#### Site Editor
+
+-   Add rename and trash actions to page panel. ([60232](https://github.com/WordPress/gutenberg/pull/60232))
+-   Adjust frame animation profile. ([60589](https://github.com/WordPress/gutenberg/pull/60589))
+-   Animate the radius of the frame. ([60415](https://github.com/WordPress/gutenberg/pull/60415))
+-   Create router adapter for sidebar. ([60466](https://github.com/WordPress/gutenberg/pull/60466))
+-   Improve the header animation. ([60408](https://github.com/WordPress/gutenberg/pull/60408))
+-   Index view for Templates & Parts: Use `grid` layout as default. ([60069](https://github.com/WordPress/gutenberg/pull/60069))
+-   Pages: Display content frame in mobile when canvas is not edit. ([60409](https://github.com/WordPress/gutenberg/pull/60409))
+-   Simplify template reset language. ([60256](https://github.com/WordPress/gutenberg/pull/60256))
+-   Template parts in patterns page: Add author field. ([60372](https://github.com/WordPress/gutenberg/pull/60372))
+-   Template parts: Set backpath to patterns page. ([60667](https://github.com/WordPress/gutenberg/pull/60667))
+-   Update hub markup and animation. ([60410](https://github.com/WordPress/gutenberg/pull/60410))
+-   Update site hub action positioning. ([60511](https://github.com/WordPress/gutenberg/pull/60511))
+
+#### Components
+
+-   CustomSelectControlV2: Support disabled in item types. ([60896](https://github.com/WordPress/gutenberg/pull/60896))
+-   ExternalLink: Replace icon with unicode arrow. ([60255](https://github.com/WordPress/gutenberg/pull/60255))
+-   InputBase: Simplify focus styles. ([60226](https://github.com/WordPress/gutenberg/pull/60226))
+-   ProgressBar: Moved width to css var for perf. ([60388](https://github.com/WordPress/gutenberg/pull/60388))
+-   SlotFill: Replace valtio with custom ObservableMap. ([60879](https://github.com/WordPress/gutenberg/pull/60879))
+-   Tabs: Fallback to first enabled tab if no active tab Id. ([60681](https://github.com/WordPress/gutenberg/pull/60681))
+-   Text: Add text-wrap: Pretty. ([60164](https://github.com/WordPress/gutenberg/pull/60164))
+-   Try: Reduce checkbox size in data views. ([60475](https://github.com/WordPress/gutenberg/pull/60475))
+
+#### Post Editor
+
+-   Confirm dialog: Use more descriptive text for the confirm button. ([60364](https://github.com/WordPress/gutenberg/pull/60364))
+-   Editor: Add wordcount and reading time info in post card. ([60672](https://github.com/WordPress/gutenberg/pull/60672))
+-   Editor: Animate opening and closing editor right sidebar. ([60561](https://github.com/WordPress/gutenberg/pull/60561))
+-   Editor: Animate the inserter and list view panels. ([60665](https://github.com/WordPress/gutenberg/pull/60665))
+-   Editor: Update post URL component. ([60632](https://github.com/WordPress/gutenberg/pull/60632))
+-   Editor: Use the 'ConfirmDialog' component in template validation notice. ([60385](https://github.com/WordPress/gutenberg/pull/60385))
+-   Enable template preview in post editor for non administrators. ([60447](https://github.com/WordPress/gutenberg/pull/60447))
+-   Support insert before/after keyboard shortcuts when focus is within the list view. ([60651](https://github.com/WordPress/gutenberg/pull/60651))
+-   Update publish flow. ([60456](https://github.com/WordPress/gutenberg/pull/60456))
+
+#### Patterns
+
+-   Add a "All Template Parts" section. ([60775](https://github.com/WordPress/gutenberg/pull/60775))
+-   Back Compat: Add Patterns submenu for WordPress 6.4. ([60804](https://github.com/WordPress/gutenberg/pull/60804))
+-   Patterns page: Add edit & view revision actions to parts. ([60659](https://github.com/WordPress/gutenberg/pull/60659))
+-   Remove "Template parts" sidebar group. ([60359](https://github.com/WordPress/gutenberg/pull/60359))
+-   Site Editor: Support starter patterns. ([60745](https://github.com/WordPress/gutenberg/pull/60745))
+
+#### Synced Patterns
+
+-   Adjust allow pattern overrides UX flow. ([60769](https://github.com/WordPress/gutenberg/pull/60769))
+-   Consolidate "bound block" color and "synced" colors. ([60617](https://github.com/WordPress/gutenberg/pull/60617))
+-   Improve override indication for editable blocks in synced patterns. ([60599](https://github.com/WordPress/gutenberg/pull/60599))
+-   Refine rename flow for blocks with overrides. ([60234](https://github.com/WordPress/gutenberg/pull/60234))
+
+#### Zoom Out
+
+-   Adjust block selection button. ([60348](https://github.com/WordPress/gutenberg/pull/60348))
+-   Animation: Avoid fixed width when animating the secondary sidebar. ([60693](https://github.com/WordPress/gutenberg/pull/60693))
+-   Introduce section container selection when assembling patterns (zoom out mode). ([59249](https://github.com/WordPress/gutenberg/pull/59249))
+-   Update zoom out scale. ([60618](https://github.com/WordPress/gutenberg/pull/60618))
+
+#### Block Library
+
+-   Add loading state on image upload in featured image, Site logo and Cover blocks. ([59519](https://github.com/WordPress/gutenberg/pull/59519))
+-   File: Use HTML API to update the PDF preview label. ([60494](https://github.com/WordPress/gutenberg/pull/60494))
+-   Navigation block: Add current-menu-item class for post type archive. ([57808](https://github.com/WordPress/gutenberg/pull/57808))
+-   Remove block renaming control from advanced inspector controls group. ([60453](https://github.com/WordPress/gutenberg/pull/60453))
+
+#### Data Views
+
+-   Add ability to display fields as a badge in grid layout. ([60284](https://github.com/WordPress/gutenberg/pull/60284))
+-   Data views table row: Make checkboxes and actions visible on touch devices. ([60829](https://github.com/WordPress/gutenberg/pull/60829))
+-   DataViews: Make the experiment about custom views. ([60813](https://github.com/WordPress/gutenberg/pull/60813))
+
+#### Layout
+
+-   Add a Row control to grid layout in manual mode. ([60652](https://github.com/WordPress/gutenberg/pull/60652))
+-   Apply negative margins for alignfull children of blocks with custom padding set. ([60716](https://github.com/WordPress/gutenberg/pull/60716))
+-   Try reducing specificity of layout style selectors. ([60228](https://github.com/WordPress/gutenberg/pull/60228))
+
+#### Block Editor
+
+-   Remove animation from InlineLinkUI. ([60575](https://github.com/WordPress/gutenberg/pull/60575))
+-   Remove root appender. ([60697](https://github.com/WordPress/gutenberg/pull/60697))
+-   Try: Add new `textAlign` block support. ([59531](https://github.com/WordPress/gutenberg/pull/59531))
+
+#### Global Styles
+
+-   Background image: Display default background size value in global styles. ([60490](https://github.com/WordPress/gutenberg/pull/60490))
+-   Background UI control labels. ([60264](https://github.com/WordPress/gutenberg/pull/60264))
+-   Use text and button background color for color indicators. ([59514](https://github.com/WordPress/gutenberg/pull/59514))
+
+#### Font Library
+
+-   Change Spinner to ProgressBar component. ([60570](https://github.com/WordPress/gutenberg/pull/60570))
+
+#### Interactivity API
+
+-   Include `preact/debug` when `SCRIPT_DEBUG` is enabled. ([60514](https://github.com/WordPress/gutenberg/pull/60514))
+
+### New APIs
+
+#### Extensibility
+
+-   Editor: Support PluginPostStatusInfo Slot in the site editor. ([60814](https://github.com/WordPress/gutenberg/pull/60814))
+-   Editor: Unify PluginMoreMenuItem API between post and site editors. ([60778](https://github.com/WordPress/gutenberg/pull/60778))
+    -   Fix: Use core instead of core/editor on normalizeComplementaryAreaScope. ([60821](https://github.com/WordPress/gutenberg/pull/60821))
+-   Editor: Unify PluginSidebarMoreMenuItem. ([60853](https://github.com/WordPress/gutenberg/pull/60853))
+-   Editor: Unify the PluginSidebar slot between post and site editors. ([60815](https://github.com/WordPress/gutenberg/pull/60815))
+
+### Bug Fixes
+
+-   Fix: Add types to useSuspenseSelect. ([60733](https://github.com/WordPress/gutenberg/pull/60733))
+-   Fix experimental useHasRecursion deprecation. ([60451](https://github.com/WordPress/gutenberg/pull/60451))
+-   Fix translatable string in pagination modal. ([60742](https://github.com/WordPress/gutenberg/pull/60742))
+-   Interactivity: Return useMemo and useCallback hooks. ([60474](https://github.com/WordPress/gutenberg/pull/60474))
+-   Only show block icon in toolbar for contentOnly blocks when block is a synced block. ([60647](https://github.com/WordPress/gutenberg/pull/60647))
+-   Patterns: Guard for unknown pattern in server-side resolver. ([60464](https://github.com/WordPress/gutenberg/pull/60464))
+-   Snackbar: Make the `explicitDismiss` string translatable. ([60368](https://github.com/WordPress/gutenberg/pull/60368))
+-   Update standardisation of 'Navigation Menu' to have both words capitalised in user-facing menus. ([60262](https://github.com/WordPress/gutenberg/pull/60262))
+    -   Standardise capitalisation of Navigation Menu in sidebar. ([60527](https://github.com/WordPress/gutenberg/pull/60527))
+
+#### Block Library
+
+-   Embed: Avoid retrying valid URLs. ([60655](https://github.com/WordPress/gutenberg/pull/60655))
+-   File: Mark update for setting default label as non-persistent. ([60492](https://github.com/WordPress/gutenberg/pull/60492))
+-   Fix don't close overlay menu when focus leaves submenu. ([60406](https://github.com/WordPress/gutenberg/pull/60406))
+-   Fix pattern block recursion handling. ([60452](https://github.com/WordPress/gutenberg/pull/60452))
+-   Image: Fix cropper resize on align change (react-easy-crop upgrade). ([60581](https://github.com/WordPress/gutenberg/pull/60581))
+-   Latest Posts: Remove wrapper div and apply consistent class. ([60728](https://github.com/WordPress/gutenberg/pull/60728))
+-   List: Disable edit as HTML support. ([55656](https://github.com/WordPress/gutenberg/pull/55656))
+-   Media & Text: Hide the alt text option for featured images. ([60496](https://github.com/WordPress/gutenberg/pull/60496))
+-   Post title: Re-add the paragraph level (without UI). ([60548](https://github.com/WordPress/gutenberg/pull/60548))
+-   Pullquote: Reduce specificity of padding rule to avoid conflicts with global styles. ([60649](https://github.com/WordPress/gutenberg/pull/60649))
+-   Separator block: Reduce default border styles to avoid conflicts with global styles. ([60740](https://github.com/WordPress/gutenberg/pull/60740))
+
+#### Site Editor
+
+-   Chore: Fix missing comma on welcome guide styles. ([60596](https://github.com/WordPress/gutenberg/pull/60596))
+-   Fallback to URL when site title is empty. ([60885](https://github.com/WordPress/gutenberg/pull/60885))
+-   Fix activating a theme in site editor when previewing. ([60699](https://github.com/WordPress/gutenberg/pull/60699))
+-   Fix site icon animation. ([60419](https://github.com/WordPress/gutenberg/pull/60419))
+-   Fix small regression on the resize handle. ([60427](https://github.com/WordPress/gutenberg/pull/60427))
+-   Fix the removePropertyFromObject function throws an error if the object is null. ([60831](https://github.com/WordPress/gutenberg/pull/60831))
+-   Fix: Style issue on page actions button. ([60592](https://github.com/WordPress/gutenberg/pull/60592))
+-   Pattern page: Fix deps for `onActionPerformed` useCallback. ([60784](https://github.com/WordPress/gutenberg/pull/60784))
+-   Remove outdated border radius animation. ([60454](https://github.com/WordPress/gutenberg/pull/60454))
+-   Router: Load proper sidebar for `/wp_template`. ([60850](https://github.com/WordPress/gutenberg/pull/60850))
+-   [Site Editor]: Fix ability to edit trashed pages. ([60236](https://github.com/WordPress/gutenberg/pull/60236))
+
+#### Post Editor
+
+-   Editor: Do not render publish time and post status panels in design post types. ([60857](https://github.com/WordPress/gutenberg/pull/60857))
+-   Editor: Fix post status label styles for low-capability users. ([60854](https://github.com/WordPress/gutenberg/pull/60854))
+-   Fix display of shortcut to add non breaking space in the post editor. ([60625](https://github.com/WordPress/gutenberg/pull/60625))
+-   Fix: Action button alignment on details panel. ([60773](https://github.com/WordPress/gutenberg/pull/60773))
+-   Fix: Action order is different from inspector and dataviews. ([60877](https://github.com/WordPress/gutenberg/pull/60877))
+-   Fix: Do not show pattern and template actions on the post editor. ([60568](https://github.com/WordPress/gutenberg/pull/60568))
+-   Fix: Missing items parameter and or missing onActionPerformed calls. ([60753](https://github.com/WordPress/gutenberg/pull/60753))
+-   Fix: Trash Post action and permanently delete post action do not show errors on single item. ([60597](https://github.com/WordPress/gutenberg/pull/60597))
+-   Post Editor Header: Make block toolbar toggle button focus visible. ([59781](https://github.com/WordPress/gutenberg/pull/59781))
+
+#### Block Editor
+
+-   Avoid errors when a block variation icon is an object. ([60766](https://github.com/WordPress/gutenberg/pull/60766))
+-   Fix external link indicator in Link Control. ([60439](https://github.com/WordPress/gutenberg/pull/60439))
+-   Fix for isPossibleTransformForSource handling selecting inexistent block. ([59410](https://github.com/WordPress/gutenberg/pull/59410))
+-   Fix stuck dragging mode in UI in Firefox when dealing with deeply nested lists. ([60845](https://github.com/WordPress/gutenberg/pull/60845))
+-   Prevents delete key from undoing automatic changes. ([60858](https://github.com/WordPress/gutenberg/pull/60858))
+-   Raw Handling - msListIgnore - Check attributes are valid. ([60375](https://github.com/WordPress/gutenberg/pull/60375))
+
+#### Data Views
+
+-   DataViews: Fix typing in combobox filter. ([60819](https://github.com/WordPress/gutenberg/pull/60819))
+-   Fix default layout configuration in pages list. ([60407](https://github.com/WordPress/gutenberg/pull/60407))
+-   Fix pattern titles. ([60640](https://github.com/WordPress/gutenberg/pull/60640))
+
+#### Zoom Out
+
+-   Don't allow shuffle for locked patterns. ([60381](https://github.com/WordPress/gutenberg/pull/60381))
+-   Prevent exiting Zoom Out mode from stealing focus. ([60441](https://github.com/WordPress/gutenberg/pull/60441))
+-   Respect reduced motion when engaging zoom out mode. ([60808](https://github.com/WordPress/gutenberg/pull/60808))
+
+#### Font Library
+
+-   Avoid overriding custom settings on font library save. ([60438](https://github.com/WordPress/gutenberg/pull/60438))
+-   Fix modal scrollbar. ([60641](https://github.com/WordPress/gutenberg/pull/60641))
+-   I18N: Add context to 'Library' string. ([60520](https://github.com/WordPress/gutenberg/pull/60520))
+
+#### Components
+
+-   Fix link control link preview when it displays long URLs. ([60890](https://github.com/WordPress/gutenberg/pull/60890))
+-   ProgressBar: Fix CSS variable with invalid value. ([60576](https://github.com/WordPress/gutenberg/pull/60576))
+
+#### Layout
+
+-   Always add semantic classes. ([60668](https://github.com/WordPress/gutenberg/pull/60668))
+-   Don't output base flow and constrained layout rules on themes without theme.json. ([60764](https://github.com/WordPress/gutenberg/pull/60764))
+-   Fix responsive column span logic on the front end. ([60976](https://github.com/WordPress/gutenberg/pull/60976))
+-   Restore classic auto margin rule to its previous specificity. ([60802](https://github.com/WordPress/gutenberg/pull/60802))
+
+#### Interactivity API
+
+-   Allow multiple event handlers for the same type with `data-wp-on`. ([60661](https://github.com/WordPress/gutenberg/pull/60661))
+-   Update the query block to permit non-core interactive blocks. ([60006](https://github.com/WordPress/gutenberg/pull/60006))
+
+#### Templates API
+
+-   Fix static posts page setting resolved template. ([60608](https://github.com/WordPress/gutenberg/pull/60608))
+-   Fix: Honor 'template_hierarchy' filters on template fallbacks. ([60377](https://github.com/WordPress/gutenberg/pull/60377))
+
+#### Distraction Free
+
+-   Only show inserter in document tools if DFM is off. ([60426](https://github.com/WordPress/gutenberg/pull/60426))
+-   Remove alpha from edit post header. ([60431](https://github.com/WordPress/gutenberg/pull/60431))
+
+#### REST API
+
+-   Fix PHP notice triggered by 'gutenberg_update_initial_settings'. ([60862](https://github.com/WordPress/gutenberg/pull/60862))
+
+#### Global Styles
+
+-   Editor styles: Delete duplicate backwards compat CSS custom properties. ([60400](https://github.com/WordPress/gutenberg/pull/60400))
+-   Fix browser warning regarding highlight colors. ([60555](https://github.com/WordPress/gutenberg/pull/60555))
+
+### Accessibility
+
+-   Details Block: remove `overflow:Hidden` style. ([60270](https://github.com/WordPress/gutenberg/pull/60270))
+-   Do not render pattern aria description if not button is rendered. ([60653](https://github.com/WordPress/gutenberg/pull/60653))
+-   Fix inserter pattern pagination focus loss. ([60620](https://github.com/WordPress/gutenberg/pull/60620))
+-   Make sure Social icons links aren't empty and improve UI clarity. ([60047](https://github.com/WordPress/gutenberg/pull/60047))
+
+### Performance
+
+-   Add null check to prevent errors in `get_block_template` filter. ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+-   Block preview: Build in async rendering. ([60425](https://github.com/WordPress/gutenberg/pull/60425))
+-   Editor canvas: Reduces resize listeners. ([60682](https://github.com/WordPress/gutenberg/pull/60682))
+-   Layout support: Avoid two block editor store subs. ([60612](https://github.com/WordPress/gutenberg/pull/60612))
+-   Optimize the rendering of the EditorStyles component. ([60493](https://github.com/WordPress/gutenberg/pull/60493))
+-   Post Title: Avoid accidental types requests. ([60531](https://github.com/WordPress/gutenberg/pull/60531))
+-   Preview: Skip rendering rich text. ([60544](https://github.com/WordPress/gutenberg/pull/60544))
+-   Previews: Avoid unneeded block selectors. ([60543](https://github.com/WordPress/gutenberg/pull/60543))
+-   Site Editor: Close the editor sidebar by default. ([60820](https://github.com/WordPress/gutenberg/pull/60820))
+-   Zoom-out: Scale should be stable function. ([60580](https://github.com/WordPress/gutenberg/pull/60580))
+-   getEntityRecords: Batch actions. ([60591](https://github.com/WordPress/gutenberg/pull/60591))
+
+#### Block Library
+
+-   Avoid calling getBlocks selector for navigation link blocks. ([60458](https://github.com/WordPress/gutenberg/pull/60458))
+-   Image cropper: Remove clientWidth prop with useResizeObserver. ([60674](https://github.com/WordPress/gutenberg/pull/60674))
+-   Navigation block: Avoid selector + style recalc on mount. ([60572](https://github.com/WordPress/gutenberg/pull/60572))
+-   Pattern block: Avoid fetching all reusable blocks on mount. ([60310](https://github.com/WordPress/gutenberg/pull/60310))
+-   Post Featured Image: Optimize store subscriptions. ([60770](https://github.com/WordPress/gutenberg/pull/60770))
+
+#### Site Editor
+
+-   Optimize the AddTemplate component used in data views pages. ([60586](https://github.com/WordPress/gutenberg/pull/60586))
+-   Sidebar slide animation: Replace motion.div with CSS animation. ([60849](https://github.com/WordPress/gutenberg/pull/60849))
+
+### Documentation
+
+-   Add `AutosaveMonitor` component JSDoc and populate `README` with auto-gen documentation. ([60882](https://github.com/WordPress/gutenberg/pull/60882))
+-   Add documentation for `disableLineBreaks` property of `RichText`. ([56284](https://github.com/WordPress/gutenberg/pull/56284))
+-   Added Documentation for PostExcerptCheck. ([60864](https://github.com/WordPress/gutenberg/pull/60864))
+-   Added links to related components. ([60726](https://github.com/WordPress/gutenberg/pull/60726))
+-   Correct link to the theme json reference. ([60517](https://github.com/WordPress/gutenberg/pull/60517))
+-   DimensionControl: Fix story configuration. ([60703](https://github.com/WordPress/gutenberg/pull/60703))
+-   Docs: Fix typos in interactivity API reference. ([60870](https://github.com/WordPress/gutenberg/pull/60870))
+-   Docs: Update wording in Block Editor Handbook to reflect that all examples now use JSX. ([56315](https://github.com/WordPress/gutenberg/pull/56315))
+-   Fix: Grammar typo on packages/dataviews/src/search-widget.js. ([60588](https://github.com/WordPress/gutenberg/pull/60588))
+-   Fix: Link to the block building tutorial. ([60518](https://github.com/WordPress/gutenberg/pull/60518))
+-   Fixes a link to the getEntityRecord documentation. ([60823](https://github.com/WordPress/gutenberg/pull/60823))
+-   Improve documentation for block variation `isActive` property. ([60801](https://github.com/WordPress/gutenberg/pull/60801))
+-   Update: Hardcoded documentation link to a branch that does not exist. ([60671](https://github.com/WordPress/gutenberg/pull/60671))
+-   Update: Reference editor scope instead of edit-site, edit-post on interface package documentation. ([60818](https://github.com/WordPress/gutenberg/pull/60818))
+-   [Create Block] Adding documentation for the transformer property. ([60445](https://github.com/WordPress/gutenberg/pull/60445))
+
+### Code Quality
+
+-   Added @return after @global in php doc. ([60611](https://github.com/WordPress/gutenberg/pull/60611))
+-   Blocks: Remove client-side polyfill for 'selectors'. ([60846](https://github.com/WordPress/gutenberg/pull/60846))
+-   [Block Bindings] Don't use hooks. ([60724](https://github.com/WordPress/gutenberg/pull/60724))
+-   Chore: Fix: Wrong JSDOC for an action return. ([60786](https://github.com/WordPress/gutenberg/pull/60786))
+-   Chore: Simplify some CSS margin rules. ([60816](https://github.com/WordPress/gutenberg/pull/60816))
+-   Editor: Serve as a proxy for the interface package. ([60748](https://github.com/WordPress/gutenberg/pull/60748))
+-   Editor: Unify the auto-switch sidebars behavior. ([60869](https://github.com/WordPress/gutenberg/pull/60869))
+-   Editor: Unify the keyboard shortcuts modal. ([60866](https://github.com/WordPress/gutenberg/pull/60866))
+-   Editor: Unify the names of the sidebars between edit post and edit site. ([60856](https://github.com/WordPress/gutenberg/pull/60856))
+-   Editor: Unify the preferences modal name. ([60871](https://github.com/WordPress/gutenberg/pull/60871))
+-   Fix: Remove unused CSS for TemplatePartHint. ([60852](https://github.com/WordPress/gutenberg/pull/60852))
+-   Fix: Remove unused css from page panels styles. ([60774](https://github.com/WordPress/gutenberg/pull/60774))
+-   Fix: Font Library typo. ([60751](https://github.com/WordPress/gutenberg/pull/60751))
+-   Fix: Remove unused CSS code from the site editor. ([60662](https://github.com/WordPress/gutenberg/pull/60662))
+-   Interactivity API refactor to TypeScript (utils & kebabToCamelCase). ([60149](https://github.com/WordPress/gutenberg/pull/60149))
+-   Reexport createSelector from data package. ([60370](https://github.com/WordPress/gutenberg/pull/60370))
+-   Refactor: UseBlockTools cleanup. ([59450](https://github.com/WordPress/gutenberg/pull/59450))
+-   Remove comment that no longer applies about appearance-tools support. ([60844](https://github.com/WordPress/gutenberg/pull/60844))
+-   Reuse and unify post and page actions, accross the different use cases. ([60486](https://github.com/WordPress/gutenberg/pull/60486))
+-   Test: Validate block & theme json. ([57374](https://github.com/WordPress/gutenberg/pull/57374))
+-   Tests: Shard JS unit tests. ([60045](https://github.com/WordPress/gutenberg/pull/60045))
+-   Tests: Share JavaScript build assets across PHP workflows. ([60428](https://github.com/WordPress/gutenberg/pull/60428))
+-   Update: Avoid two useSelect calls on PostActions. ([60752](https://github.com/WordPress/gutenberg/pull/60752))
+-   Update: Make content locking related selectors private. ([60827](https://github.com/WordPress/gutenberg/pull/60827))
+-   Update: Move template actions to the editor store. ([60395](https://github.com/WordPress/gutenberg/pull/60395))
+-   Update: Remove keyCode usage from dataviews package. ([60585](https://github.com/WordPress/gutenberg/pull/60585))
+-   Update: Use util getVariationClassName instead of computing the variation inline. ([60664](https://github.com/WordPress/gutenberg/pull/60664))
+
+#### Components
+
+-   Deprecate `reduceMotion` util. ([60839](https://github.com/WordPress/gutenberg/pull/60839))
+-   Navigation: Soft deprecate component. ([59182](https://github.com/WordPress/gutenberg/pull/59182))
+-   NavigatorProvider: Move the same-location check to the goTo function. ([60767](https://github.com/WordPress/gutenberg/pull/60767))
+-   ObservableMap: Optimize unsubscribe and add unit tests. ([60892](https://github.com/WordPress/gutenberg/pull/60892))
+-   Remove CSS hack for Internet Explorer 11. ([60727](https://github.com/WordPress/gutenberg/pull/60727))
+
+#### Post Editor
+
+-   Editor: Optimize the 'PostSlug' component. ([60422](https://github.com/WordPress/gutenberg/pull/60422))
+-   Editor: Use hook instead of HoC in 'ThemeSupportCheck'. ([60807](https://github.com/WordPress/gutenberg/pull/60807))
+-   Editor: Use hooks instead of HoCs in 'PostTrashCheck'. ([60380](https://github.com/WordPress/gutenberg/pull/60380))
+-   [Editor]:Get post content in PostContentInfo component. ([60743](https://github.com/WordPress/gutenberg/pull/60743))
+
+#### Data Views
+
+-   DataViews: Remove `onDetailsChange` event. ([60387](https://github.com/WordPress/gutenberg/pull/60387))
+-   Rename displayAsColumnFields to columnFields API. ([60504](https://github.com/WordPress/gutenberg/pull/60504))
+-   Simplify visually hidden label. ([60835](https://github.com/WordPress/gutenberg/pull/60835))
+
+#### Block Editor
+
+-   Refactor Link UI States. ([59762](https://github.com/WordPress/gutenberg/pull/59762))
+-   Switching pattern categories inserter to Tabs component with arrow key navigation. ([60257](https://github.com/WordPress/gutenberg/pull/60257))
+
+### Tools
+
+-   Update @talldan in codeowners file, remove from edit-widgets package. ([60800](https://github.com/WordPress/gutenberg/pull/60800))
+
+#### Testing
+
+-   Add end-to-end test for activating themes in site editor. ([60707](https://github.com/WordPress/gutenberg/pull/60707))
+-   Automated Testing: Update end-to-end test npm commands. ([60376](https://github.com/WordPress/gutenberg/pull/60376))
+-   Fix flaky Site Editor URL navigation end-to-end test. ([60675](https://github.com/WordPress/gutenberg/pull/60675))
+-   PHP unit test workflow: Try removing 7.0 and 7.1. ([60686](https://github.com/WordPress/gutenberg/pull/60686))
+-   Perf: Improve way we measure template loading by adding posts. ([60516](https://github.com/WordPress/gutenberg/pull/60516))
+-   Performance Tests: I'm tired of doing head math 😊. ([60509](https://github.com/WordPress/gutenberg/pull/60509))
+-   Upgrade Playwright to v1.43. ([60635](https://github.com/WordPress/gutenberg/pull/60635))
+-   tip: Remove unecessary delay in tests except where needed. ([60897](https://github.com/WordPress/gutenberg/pull/60897))
+
+#### Build Tooling
+
+-   Dependencies: Upgrade babel. ([57311](https://github.com/WordPress/gutenberg/pull/57311))
+-   Upgrade simple-git dependency. ([59915](https://github.com/WordPress/gutenberg/pull/59915))
+-   Update Typescript to 5.4.5. ([60793](https://github.com/WordPress/gutenberg/pull/60793))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @asheshmagar: Font library: Fix typo. ([60751](https://github.com/WordPress/gutenberg/pull/60751))
+-   @DaniGuardiola: ProgressBar: Moved width to CSS var for performance. ([60388](https://github.com/WordPress/gutenberg/pull/60388))
+-   @garridinsi: Interactivity API refactor to TypeScript (utils & kebabToCamelCase). ([60149](https://github.com/WordPress/gutenberg/pull/60149))
+-   @xhemals: Update standardization of the 'Navigation Menu' to have both words capitalized in user-facing menus. ([60262](https://github.com/WordPress/gutenberg/pull/60262)), Standardise capitalization of the Navigation Menu in the sidebar. ([60527](https://github.com/WordPress/gutenberg/pull/60527))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewserong @arthur791004 @artpi @asheshmagar @atachibana @carolinan @colinduwe @colorful-tones @DaniGuardiola @DAreRodz @draganescu @ellatrix @fabiankaegy @flexseth @garridinsi @geriux @getdave @ixkaito @jameskoster @jasmussen @jeryj @johnhooks @jorgefilipecosta @jsnajdr @kevin940726 @Mamaduka @matiasbenedetto @mhkuu @mikachan @mirka @noisysocks @ntsekouras @oandregal @ocean90 @okmttdhr @prajapatisagar @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @shimotmk @simonhammes @sirreal @Soean @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @xhemals @youknowriad
+
+= 18.1.2 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Restore classic auto margin rule to its previous specificity ([60802](https://github.com/WordPress/gutenberg/pull/60802))
+-   Fix the removePropertyFromObject function throws an error if the object is null ([60831](https://github.com/WordPress/gutenberg/pull/60831))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@tellthemachines @arthur791004
+
+= 18.1.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Add null check to prevent errors in `get_block_template` filter ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+-   Fix activating a theme in site editor when previewing ([60699](https://github.com/WordPress/gutenberg/pull/60699))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@okmttdhr @ntsekouras
+
+= 18.1.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Editor
+
+-   Zoom out: Invoke zoom out mode when opening the patterns tab, and move the code to do so to a shared hook. ([59775](https://github.com/WordPress/gutenberg/pull/59775))
+-   Block Previews: Update shadows in different contexts. ([60161](https://github.com/WordPress/gutenberg/pull/60161))
+-   Update: Move post actions to the editor package. ([60092](https://github.com/WordPress/gutenberg/pull/60092))
+-   Try: Show copy shortcut in block options. ([60339](https://github.com/WordPress/gutenberg/pull/60339))
+-   Update image role description text to fix spacing. ([60338](https://github.com/WordPress/gutenberg/pull/60338))
+
+#### Site Editor
+
+-   Add rename page action. ([60230](https://github.com/WordPress/gutenberg/pull/60230))
+-   Center the document title. ([59134](https://github.com/WordPress/gutenberg/pull/59134))
+-   Consolidate when showing revisions link or action. ([60194](https://github.com/WordPress/gutenberg/pull/60194))
+-   Editor: Update hover color of editor document title. ([60113](https://github.com/WordPress/gutenberg/pull/60113))
+-   Improve the frame animation. ([60363](https://github.com/WordPress/gutenberg/pull/60363))
+-   Try selecting closest editable block when clicking on a disabled block. ([60016](https://github.com/WordPress/gutenberg/pull/60016))
+-   Update index view for pages. ([59950](https://github.com/WordPress/gutenberg/pull/59950))
+
+#### Patterns
+
+-   Add content schema to pattern editing view. ([59977](https://github.com/WordPress/gutenberg/pull/59977))
+-   Close inspector on pattern category select. ([60004](https://github.com/WordPress/gutenberg/pull/60004))
+-   Focus block selection button only in navigation mode. ([60207](https://github.com/WordPress/gutenberg/pull/60207))
+-   Pattern Shuffling: Make the results deterministic. ([60074](https://github.com/WordPress/gutenberg/pull/60074))
+-   Patterns page: Enable table layout. ([60337](https://github.com/WordPress/gutenberg/pull/60337))
+-   Prevent reordering of header and footer template parts when zoomed out. ([60054](https://github.com/WordPress/gutenberg/pull/60054))
+-   Remove manage all of my patterns link. ([60345](https://github.com/WordPress/gutenberg/pull/60345))
+
+#### Block Library
+
+-   Add `__next40pxDefaultSize` to Image block Title Attribute. ([60117](https://github.com/WordPress/gutenberg/pull/60117))
+-   Add support "HTML Element" to Site Tagline. ([59654](https://github.com/WordPress/gutenberg/pull/59654))
+-   Image: Remove temporary image check for rendering controls. ([60212](https://github.com/WordPress/gutenberg/pull/60212))
+-   Quote block: Button for cite add/remove. ([59073](https://github.com/WordPress/gutenberg/pull/59073))
+-   Quote block: Remove appender. ([60307](https://github.com/WordPress/gutenberg/pull/60307))
+-   Reduce specificity of block library styles conflicting with block supports. ([59457](https://github.com/WordPress/gutenberg/pull/59457))
+-   Update navigation blocks to use consistent link UI labels and field sizes. ([60116](https://github.com/WordPress/gutenberg/pull/60116))
+-   Summary: Polish featured image. ([60110](https://github.com/WordPress/gutenberg/pull/60110))
+
+#### Post Editor
+
+-   Block Editor: Deprecate `__experimentalGetReusableBlockTitle` selector. ([60278](https://github.com/WordPress/gutenberg/pull/60278))
+-   Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package. ([60344](https://github.com/WordPress/gutenberg/pull/60344))
+-   Editor: Move publish panel handling to `editor` store. ([60340](https://github.com/WordPress/gutenberg/pull/60340))
+-   Editor: Unify publish sidebar preference. ([60334](https://github.com/WordPress/gutenberg/pull/60334))
+
+#### Global Styles
+
+-   Add background to global styles changes output. ([60229](https://github.com/WordPress/gutenberg/pull/60229))
+-   Background UI controls. ([59454](https://github.com/WordPress/gutenberg/pull/59454))
+-   Follow up design tweaks for global styles presets. ([60031](https://github.com/WordPress/gutenberg/pull/60031))
+-   Try reducing specificity of global styles selectors only. ([60106](https://github.com/WordPress/gutenberg/pull/60106))
+
+#### Data Views
+
+-   DataViews: Add a utility to share filtering, sorting and pagination logic. ([59897](https://github.com/WordPress/gutenberg/pull/59897))
+-   Data views: Remove the `enumeration` type as redundant. ([60084](https://github.com/WordPress/gutenberg/pull/60084))
+-   Data views: Update template actions. ([60075](https://github.com/WordPress/gutenberg/pull/60075))
+-   Data views: Add confirmation modal for clearing customizations in templates. ([60119](https://github.com/WordPress/gutenberg/pull/60119))
+-   Data views: Make trash a quick action again. ([60165](https://github.com/WordPress/gutenberg/pull/60165))
+
+#### List View
+
+-   Add keyboard shortcut to collapse list view items other than the focused item. ([59978](https://github.com/WordPress/gutenberg/pull/59978))
+-   Adjust the List View close icon to resemble the Inspector close icon. ([59999](https://github.com/WordPress/gutenberg/pull/59999))
+-   Update "Actions" string to "Options" in List View. ([60136](https://github.com/WordPress/gutenberg/pull/60136))
+
+#### Templates
+
+-   Add filter to allow extending the list of post content blocks. ([60068](https://github.com/WordPress/gutenberg/pull/60068))
+-   Render non-editable preview of template part when user does not have capability to edit template part. ([60326](https://github.com/WordPress/gutenberg/pull/60326))
+-   Template Parts: Remove pattern title from sidebar. ([60160](https://github.com/WordPress/gutenberg/pull/60160))
+-   Template Parts: Update replace flow to separate template parts from patterns. ([60203](https://github.com/WordPress/gutenberg/pull/60203))
+-   Template Parts: Update the 'Replace' label to 'Design'. ([60156](https://github.com/WordPress/gutenberg/pull/60156))
+
+#### Zoom Out
+
+-   Add a delete control to toolbar on zoomed out mode. ([60214](https://github.com/WordPress/gutenberg/pull/60214))
+-   Media dialog push content in zoomed out mode. ([60170](https://github.com/WordPress/gutenberg/pull/60170))
+
+#### Components
+
+-   Popover / ToggleGroupControl: Use `useReducedMotion()` from `@wordpress/compose`. ([60168](https://github.com/WordPress/gutenberg/pull/60168))
+-   date-fns: Bump to v3.6. ([60163](https://github.com/WordPress/gutenberg/pull/60163))
+
+#### REST API
+
+-   Allow view access of template rest endpoint to anyone with the `edit_post` capability. ([60317](https://github.com/WordPress/gutenberg/pull/60317))
+
+#### Commands
+
+-   Polish Command Palette. ([60134](https://github.com/WordPress/gutenberg/pull/60134))
+
+#### Page Content Focus
+
+-   Allow selecting template parts in page content focus mode. ([60010](https://github.com/WordPress/gutenberg/pull/60010))
+
+#### Inspector Controls
+
+-   Add: PostCardPanel component. ([59870](https://github.com/WordPress/gutenberg/pull/59870))
+
+#### Package and utility updates
+
+-   Router: Update history package to 5.3.0, fix query string generation. ([60271](https://github.com/WordPress/gutenberg/pull/60271))
+-   Create block: Add new namespacePascalCase template variable. ([60223](https://github.com/WordPress/gutenberg/pull/60223))
+
+### New APIs
+
+#### Extensibility
+
+-   Extensibility: Support PluginBlockSettingsMenuItem in the site editor. ([60033](https://github.com/WordPress/gutenberg/pull/60033))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Fix enqueuing block theme styles when separate asset loading is enabled. ([60098](https://github.com/WordPress/gutenberg/pull/60098))
+-   Fix lightbox UI disallow editing. ([59890](https://github.com/WordPress/gutenberg/pull/59890))
+-   Fix navigation link ui close focus management. ([59925](https://github.com/WordPress/gutenberg/pull/59925))
+-   Removed pointer-events none inline style due it blocking crop action. ([60305](https://github.com/WordPress/gutenberg/pull/60305))
+-   Search Block: Apply font-related style inheritance to input field. ([60321](https://github.com/WordPress/gutenberg/pull/60321))
+-   Columns block: Fix arrow up into it. ([55197](https://github.com/WordPress/gutenberg/pull/55197))
+
+#### Site Editor
+
+-   Fix rendering PluginTemplateSettingPanel when we're editing a template. ([60215](https://github.com/WordPress/gutenberg/pull/60215))
+-   Fix: Use `viewportWidth` in pattern preview data view. ([60315](https://github.com/WordPress/gutenberg/pull/60315))
+-   Templates: Fix deferred rendering. ([60361](https://github.com/WordPress/gutenberg/pull/60361))
+-   Site Editor: Consolidate save button functionality. ([60077](https://github.com/WordPress/gutenberg/pull/60077))
+-   Revert #60300: Make sure the CSS class id-dark-theme is added to the editor iframe body. ([60616](https://github.com/WordPress/gutenberg/pull/60616))
+
+#### Block Editor
+
+-   Make sure the CSS class is-dark-theme is added to the editor iframe body. ([60300](https://github.com/WordPress/gutenberg/pull/60300))
+-   Raw handling: Preserve class. ([60331](https://github.com/WordPress/gutenberg/pull/60331))
+-   Raw handling: Preserve empty paragraphs. ([59476](https://github.com/WordPress/gutenberg/pull/59476))
+-   Wiriting flow: Backspace at beginning of first paragraph block prevents block from being deleted. ([56329](https://github.com/WordPress/gutenberg/pull/56329))
+-   DOM: Fix return types of focus.tabbable methods. ([60274](https://github.com/WordPress/gutenberg/pull/60274))
+
+#### Components
+
+-   CustomSelectControlV2: Fix hint behavior in legacy. ([60183](https://github.com/WordPress/gutenberg/pull/60183))
+-   InputControl: Ignore IME events when `isPressEnterToChange`. ([60090](https://github.com/WordPress/gutenberg/pull/60090))
+-   TextControl: Apply zero margin to input element. ([60282](https://github.com/WordPress/gutenberg/pull/60282))
+
+#### Global Styles
+
+-   Fix missing class for Global Styles > Colors. ([60094](https://github.com/WordPress/gutenberg/pull/60094))
+-   Reset specificity of body selector when processing with postcss. ([60266](https://github.com/WordPress/gutenberg/pull/60266))
+-   Shadow: Revert shadow default presets opt-in to opt-out. ([60204](https://github.com/WordPress/gutenberg/pull/60204))
+-   Global Styles: Make strings translatable. ([60127](https://github.com/WordPress/gutenberg/pull/60127))
+-   Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist. ([60489](https://github.com/WordPress/gutenberg/pull/60489))
+
+#### Zoom Out
+
+-   Fix zoom out mode toggling between pattern category selection. ([60225](https://github.com/WordPress/gutenberg/pull/60225))
+
+#### Data Views
+
+-   Fix focus outline visibility and truncation in data view record titles. ([60191](https://github.com/WordPress/gutenberg/pull/60191))
+
+#### Layout
+
+-   Fix horizontal flex layout in classic themes. ([60154](https://github.com/WordPress/gutenberg/pull/60154))
+
+#### Post Editor
+
+-   Editor: Memoize 'getInsertionPoint' selector. ([60015](https://github.com/WordPress/gutenberg/pull/60015))
+-   Fix block toolbar dropdown separator color. ([60336](https://github.com/WordPress/gutenberg/pull/60336))
+-   Backport r57868 (Editor: Prevent font folder naive filtering causing infinite loops) from WordPress-Develop. ([60141](https://github.com/WordPress/gutenberg/pull/60141))
+
+#### Block templates
+
+-   Add null check to prevent errors in `get_block_template` filter. ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+
+#### Utilities
+
+-   URL: Return early in getFilename where URL argument is falsy. ([60265](https://github.com/WordPress/gutenberg/pull/60265))
+
+### Accessibility
+
+#### Data Views
+
+-   Add click-to-select behavior on table rows. ([59803](https://github.com/WordPress/gutenberg/pull/59803))
+-   Data views list layout: Apply focus styles to items on `focus-visible` rather than `focus`. ([60253](https://github.com/WordPress/gutenberg/pull/60253))
+-   Update field display in grid layout. ([60083](https://github.com/WordPress/gutenberg/pull/60083))
+-   Data Views: Updating keyboard navigation in list layouts. ([59637](https://github.com/WordPress/gutenberg/pull/59637))
+
+#### Site Editor
+
+-   Restore Style book close button tooltip. ([60177](https://github.com/WordPress/gutenberg/pull/60177))
+
+#### Block Library
+
+-   Remove CSS order property from social icons placeholder UI. ([60032](https://github.com/WordPress/gutenberg/pull/60032))
+
+### Performance
+
+### Block Editor
+
+-   Avoid fetching all reusable blocks (user patterns) on post/site editor load. ([58239](https://github.com/WordPress/gutenberg/pull/58239))
+-   Block editor: Optimize hasSelectedInnerBlock selector. ([60330](https://github.com/WordPress/gutenberg/pull/60330))
+-   Templates performance: Resolve patterns server side. ([60349](https://github.com/WordPress/gutenberg/pull/60349))
+
+#### Block Library
+
+-   Template part: Avoid pattern fetch on mount. ([60297](https://github.com/WordPress/gutenberg/pull/60297))
+
+#### Block Editor
+
+-   Inserter: Cache search normalization results. ([60080](https://github.com/WordPress/gutenberg/pull/60080))
+-   Format library: Improve unknown format performance. ([48761](https://github.com/WordPress/gutenberg/pull/48761))
+
+### Experiments
+
+#### Site Editor
+
+-   Zoom-out view: Disable canvas resizing. ([60104](https://github.com/WordPress/gutenberg/pull/60104))
+
+### Documentation
+
+-   Add auto generated API documentation for `editor` package. ([60356](https://github.com/WordPress/gutenberg/pull/60356))
+-   Add component props documentation. ([60350](https://github.com/WordPress/gutenberg/pull/60350))
+-   Add php `@global` documentation. ([59931](https://github.com/WordPress/gutenberg/pull/59931))
+-   Change heading level on troubleshooting section. ([60233](https://github.com/WordPress/gutenberg/pull/60233))
+-   CustomSelectControlV2: Match v1 stories to test legacy component. ([60182](https://github.com/WordPress/gutenberg/pull/60182))
+-   Docs (general): Fix some typos. ([60260](https://github.com/WordPress/gutenberg/pull/60260))
+-   Fix `@todo` tags to follow standards in WordPress comments. ([60148](https://github.com/WordPress/gutenberg/pull/60148))
+-   Fix Font Collection JSON schema definition. ([60285](https://github.com/WordPress/gutenberg/pull/60285))
+-   Fix: Invalid documentation link to load JavaScript. ([60181](https://github.com/WordPress/gutenberg/pull/60181))
+-   Fix: Invalid links to the block supports api. ([60199](https://github.com/WordPress/gutenberg/pull/60199))
+-   Fix: Non existent link to submitting to the block directory. ([60389](https://github.com/WordPress/gutenberg/pull/60389))
+-   Interactivity API: Variable name correction in the documentation. ([60056](https://github.com/WordPress/gutenberg/pull/60056))
+-   Create Block: Update external template documentation to include variants. ([60095](https://github.com/WordPress/gutenberg/pull/60095))
+
+### Code Quality
+
+#### Block Editor
+
+-   Add comment for unmemoized context. ([60272](https://github.com/WordPress/gutenberg/pull/60272))
+-   Fix ESLint warning in BlockListBlock component. ([60064](https://github.com/WordPress/gutenberg/pull/60064))
+-   RichText: Switch from disableEditing to standard html readonly attribute. ([60327](https://github.com/WordPress/gutenberg/pull/60327))
+-   Site Editor: Reuse inserter search term normalization. ([60218](https://github.com/WordPress/gutenberg/pull/60218))
+-   `canInsertBlockType`: Extract helper for selector dependants. ([60235](https://github.com/WordPress/gutenberg/pull/60235))
+-   Fix editor canvas overflow on search results with position: Relative. ([60287](https://github.com/WordPress/gutenberg/pull/60287))
+-   Editor: Move template areas to editor package. ([60179](https://github.com/WordPress/gutenberg/pull/60179))
+
+#### Components
+
+-   `CustomSelectControlV2`: Rename for consistency. ([60178](https://github.com/WordPress/gutenberg/pull/60178))
+-   Navigator: Fix two nits. ([60273](https://github.com/WordPress/gutenberg/pull/60273))
+-   NavigatorProvider: Move all state management to one reducer. ([60190](https://github.com/WordPress/gutenberg/pull/60190))
+-   Components: Try obviating Popover pointer event trap. ([59449](https://github.com/WordPress/gutenberg/pull/59449))
+
+#### Post Editor
+
+-   Memoize the getTemplateInfo selector. ([60200](https://github.com/WordPress/gutenberg/pull/60200))
+-   Update: Remove template summary component. ([60351](https://github.com/WordPress/gutenberg/pull/60351))
+-   Update: Use getPostIcon selector on document bar. ([60128](https://github.com/WordPress/gutenberg/pull/60128))
+-   Distraction free: Remove unwanted space from string. ([60108](https://github.com/WordPress/gutenberg/pull/60108))
+
+#### Global Styles
+
+-   Additional CSS: Add code comments contextualising tranformStyles for clarity. ([60267](https://github.com/WordPress/gutenberg/pull/60267))
+-   Global styles: output `:root` selector for CSS custom properties. ([42084](https://github.com/WordPress/gutenberg/pull/42084))
+-   Style Engine: Continue get_classnames loop after adding the default classname. ([60153](https://github.com/WordPress/gutenberg/pull/60153))
+
+#### Font Library
+
+-   Add test for Font Library and Theme Style Variations. ([60250](https://github.com/WordPress/gutenberg/pull/60250))
+-   Update google fonts font collection data URL to the latest version available. ([60079](https://github.com/WordPress/gutenberg/pull/60079))
+
+#### Block Library
+
+-   Image: Use the new 'useUploadMediaFromBlobURL' hook. ([60208](https://github.com/WordPress/gutenberg/pull/60208))
+-   Navigation Block: Add test coverage to check that post content is not removed. ([60189](https://github.com/WordPress/gutenberg/pull/60189))
+
+#### Site Editor
+
+-   DataViews: Don't memoize every callback 'PagePages' component. ([60103](https://github.com/WordPress/gutenberg/pull/60103))
+-   History: Simplify the push and replace methods. ([60112](https://github.com/WordPress/gutenberg/pull/60112))
+
+#### Rich Text
+
+-   RichText: Separate fallback instance ID for selection retrieval. ([60277](https://github.com/WordPress/gutenberg/pull/60277))
+
+#### Block Locking
+
+-   E2E: Test BlockSwitcher availability in l-post-ul-group CPT. ([60254](https://github.com/WordPress/gutenberg/pull/60254))
+
+#### Data Views
+
+-   DataViews: Fix react warning error in list layout. ([60101](https://github.com/WordPress/gutenberg/pull/60101))
+
+### Tools
+
+#### Testing
+
+-   Automated Testing: Remove Puppeteer CI Job. ([59311](https://github.com/WordPress/gutenberg/pull/59311))
+-   CustomSelectControlV2: Stabilize tests. ([60133](https://github.com/WordPress/gutenberg/pull/60133))
+-   E2E: Fix flaky Site Editor pages end-to-end test. ([60109](https://github.com/WordPress/gutenberg/pull/60109))
+-   Font Library: Add upload font test. ([60221](https://github.com/WordPress/gutenberg/pull/60221))
+
+#### Build Tooling
+
+-   Blocks: Fix double `gutenberg_` prefix in built dynamic blocks PHP. ([60288](https://github.com/WordPress/gutenberg/pull/60288))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @interdevel: Fix `@todo` tags to follow standards in WordPress comments. ([60148](https://github.com/WordPress/gutenberg/pull/60148))
+-   @mikeybinns: Add component props documentation. ([60350](https://github.com/WordPress/gutenberg/pull/60350))
+-   @nirav7707: Editor: Update hover color of editor document title. ([60113](https://github.com/WordPress/gutenberg/pull/60113))
+-   @steveariss: Interactivity API: Variable name correction in the documentation. ([60056](https://github.com/WordPress/gutenberg/pull/60056))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @artemiomorales @bph @draganescu @ellatrix @fabiankaegy @geriux @getdave @glendaviesnz @interdevel @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @mikachan @mikeybinns @mirka @mujuonly @n2erjo00 @nirav7707 @noisysocks @ntsekouras @oandregal @ockham @okmttdhr @pedro-mendonca @peterwilsoncc @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @Soean @steveariss @stokesman @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad
+
+= 18.0.1 =
+
+## Changelog
+
+### Bug fixes
+
+Make sure display name is correctly formatted in comments. (#60579)
+
+= 18.1.0-rc.2 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Add null check to prevent errors in `get_block_template` filter. ([60491](https://github.com/WordPress/gutenberg/pull/60491))
+
+#### Layout
+
+-   Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist. ([60489](https://github.com/WordPress/gutenberg/pull/60489))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong @okmttdhr
+
+= 18.1.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+-   Block Previews: Update shadows in different contexts. ([60161](https://github.com/WordPress/gutenberg/pull/60161))
+-   Data views: Make trash a quick action again. ([60165](https://github.com/WordPress/gutenberg/pull/60165))
+-   Router: Update history package to 5.3.0, fix query string generation. ([60271](https://github.com/WordPress/gutenberg/pull/60271))
+-   Summary: Polish featured image. ([60110](https://github.com/WordPress/gutenberg/pull/60110))
+-   Template Parts: Remove pattern title from sidebar. ([60160](https://github.com/WordPress/gutenberg/pull/60160))
+-   Template Parts: Update replace flow to separate template parts from patterns. ([60203](https://github.com/WordPress/gutenberg/pull/60203))
+-   Template Parts: Update the 'Replace' label to 'Design'. ([60156](https://github.com/WordPress/gutenberg/pull/60156))
+-   Try: Show copy shortcut in block options. ([60339](https://github.com/WordPress/gutenberg/pull/60339))
+-   Update image role description text to fix spacing. ([60338](https://github.com/WordPress/gutenberg/pull/60338))
+-   Update: Move post actions to the editor package. ([60092](https://github.com/WordPress/gutenberg/pull/60092))
+-   Zoom out: Invoke zoom out mode when opening the patterns tab, and move the code to do so to a shared hook. ([59775](https://github.com/WordPress/gutenberg/pull/59775))
+-   Create block: Add new namespacePascalCase template variable. ([60223](https://github.com/WordPress/gutenberg/pull/60223))
+
+#### Site Editor
+
+-   Add rename page action. ([60230](https://github.com/WordPress/gutenberg/pull/60230))
+-   Center the document title. ([59134](https://github.com/WordPress/gutenberg/pull/59134))
+-   Consolidate when showing revisions link or action. ([60194](https://github.com/WordPress/gutenberg/pull/60194))
+-   Editor: Update hover color of editor document title. ([60113](https://github.com/WordPress/gutenberg/pull/60113))
+-   Improve the frame animation. ([60363](https://github.com/WordPress/gutenberg/pull/60363))
+-   Try selecting closest editable block when clicking on a disabled block. ([60016](https://github.com/WordPress/gutenberg/pull/60016))
+-   Update index view for pages. ([59950](https://github.com/WordPress/gutenberg/pull/59950))
+
+#### Patterns
+
+-   Add content schema to pattern editing view. ([59977](https://github.com/WordPress/gutenberg/pull/59977))
+-   Close inspector on pattern category select. ([60004](https://github.com/WordPress/gutenberg/pull/60004))
+-   Focus block selection button only in navigation mode. ([60207](https://github.com/WordPress/gutenberg/pull/60207))
+-   Pattern Shuffling: Make the results deterministic. ([60074](https://github.com/WordPress/gutenberg/pull/60074))
+-   Patterns page: Enable table layout. ([60337](https://github.com/WordPress/gutenberg/pull/60337))
+-   Prevent reordering of header and footer template parts when zoomed out. ([60054](https://github.com/WordPress/gutenberg/pull/60054))
+-   Remove manage all of my patterns link. ([60345](https://github.com/WordPress/gutenberg/pull/60345))
+
+#### Block Library
+
+-   Add \_\_next40pxDefaultSize to Image block Title Attribute. ([60117](https://github.com/WordPress/gutenberg/pull/60117))
+-   Add support "HTML Element" to Site Tagline. ([59654](https://github.com/WordPress/gutenberg/pull/59654))
+-   Image: Remove temporary image check for rendering controls. ([60212](https://github.com/WordPress/gutenberg/pull/60212))
+-   Quote block: Button for cite add/remove. ([59073](https://github.com/WordPress/gutenberg/pull/59073))
+-   Quote block: Remove appender. ([60307](https://github.com/WordPress/gutenberg/pull/60307))
+-   Reduce specificity of block library styles conflicting with block supports. ([59457](https://github.com/WordPress/gutenberg/pull/59457))
+-   Update navigation blocks to use consistent link UI labels and field sizes. ([60116](https://github.com/WordPress/gutenberg/pull/60116))
+
+#### Post Editor
+
+-   Block Editor: Deprecate '\_\_experimentalGetReusableBlockTitle' selector. ([60278](https://github.com/WordPress/gutenberg/pull/60278))
+-   Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package. ([60344](https://github.com/WordPress/gutenberg/pull/60344))
+-   Editor: Move publish panel handling to `editor` store. ([60340](https://github.com/WordPress/gutenberg/pull/60340))
+-   [Editor]: Unify publish sidebar preference. ([60334](https://github.com/WordPress/gutenberg/pull/60334))
+
+#### Global Styles
+
+-   Add background to global styles changes output. ([60229](https://github.com/WordPress/gutenberg/pull/60229))
+-   Background UI controls. ([59454](https://github.com/WordPress/gutenberg/pull/59454))
+-   Follow up design tweaks for global styles presets. ([60031](https://github.com/WordPress/gutenberg/pull/60031))
+-   Try reducing specificity of global styles selectors only. ([60106](https://github.com/WordPress/gutenberg/pull/60106))
+
+#### Data Views
+
+-   DataViews: Add a utility to share filtering, sorting and pagination logic. ([59897](https://github.com/WordPress/gutenberg/pull/59897))
+-   DataViews: Remove the `enumeration` type as redundant. ([60084](https://github.com/WordPress/gutenberg/pull/60084))
+-   Update template actions. ([60075](https://github.com/WordPress/gutenberg/pull/60075))
+-   [Data Views]: Add confirmation modal for clearing customizations in templates. ([60119](https://github.com/WordPress/gutenberg/pull/60119))
+
+#### List View
+
+-   Add keyboard shortcut to collapse list view items other than the focused item. ([59978](https://github.com/WordPress/gutenberg/pull/59978))
+-   Adjust the List View close icon to resemble the Inspector close icon. ([59999](https://github.com/WordPress/gutenberg/pull/59999))
+-   Update "Actions" string to "Options" in List View. ([60136](https://github.com/WordPress/gutenberg/pull/60136))
+
+#### Template Editor
+
+-   Add filter to allow extending the list of post content blocks. ([60068](https://github.com/WordPress/gutenberg/pull/60068))
+-   Render non-editable preview of template part when user does not have capability to edit template part. ([60326](https://github.com/WordPress/gutenberg/pull/60326))
+
+#### Zoom Out
+
+-   Add a delete control to toolbar on zoom-out mode. ([60214](https://github.com/WordPress/gutenberg/pull/60214))
+-   Media dialog push content in zoomed out mode. ([60170](https://github.com/WordPress/gutenberg/pull/60170))
+
+#### Components
+
+-   Popover / ToggleGroupControl: Use `useReducedMotion()` from `@wordpress/compose`. ([60168](https://github.com/WordPress/gutenberg/pull/60168))
+-   date-fns: Bump to v3.6. ([60163](https://github.com/WordPress/gutenberg/pull/60163))
+
+#### REST API
+
+-   Allow view access of template rest endpoint to anyone with the `edit_post` capability. ([60317](https://github.com/WordPress/gutenberg/pull/60317))
+
+#### Commands
+
+-   Polish Command Palette. ([60134](https://github.com/WordPress/gutenberg/pull/60134))
+
+#### Page Content Focus
+
+-   Allow selecting template parts in page content focus mode. ([60010](https://github.com/WordPress/gutenberg/pull/60010))
+
+#### Inspector Controls
+
+-   Add: PostCardPanel component. ([59870](https://github.com/WordPress/gutenberg/pull/59870))
+
+### New APIs
+
+#### Extensibility
+
+-   Extensibiltiy: Support PluginBlockSettingsMenuItem in the site editor. ([60033](https://github.com/WordPress/gutenberg/pull/60033))
+
+### Bug Fixes
+
+-   Columns block: Fix arrow up into it. ([55197](https://github.com/WordPress/gutenberg/pull/55197))
+-   DOM: Fix return types of focus.tabbable methods. ([60274](https://github.com/WordPress/gutenberg/pull/60274))
+-   Fix block toolbar dropdown separator color. ([60336](https://github.com/WordPress/gutenberg/pull/60336))
+-   Global Styles: Make strings translatable. ([60127](https://github.com/WordPress/gutenberg/pull/60127))
+-   Shadow: Revert shadow default presets opt-in to opt-out. ([60204](https://github.com/WordPress/gutenberg/pull/60204))
+-   URL: Return early in getFilename where URL argument is falsy. ([60265](https://github.com/WordPress/gutenberg/pull/60265))
+
+#### Block Library
+
+-   Fix enqueuing block theme styles when separate asset loading is enabled. ([60098](https://github.com/WordPress/gutenberg/pull/60098))
+-   Fix lightbox UI disallow editing. ([59890](https://github.com/WordPress/gutenberg/pull/59890))
+-   Fix navigation link ui close focus management. ([59925](https://github.com/WordPress/gutenberg/pull/59925))
+-   Removed pointer-events none inline style due it blocking crop action. ([60305](https://github.com/WordPress/gutenberg/pull/60305))
+-   Search Block: Apply font-related style inheritance to input field. ([60321](https://github.com/WordPress/gutenberg/pull/60321))
+
+#### Site Editor
+
+-   Fix rendering PluginTemplateSettingPanel when we're editing a template. ([60215](https://github.com/WordPress/gutenberg/pull/60215))
+-   Fix: Use `viewportWidth` in pattern preview data view. ([60315](https://github.com/WordPress/gutenberg/pull/60315))
+-   Templates: Fix deferred rendering. ([60361](https://github.com/WordPress/gutenberg/pull/60361))
+-   [Site Editor]: Consolidate save button functionality. ([60077](https://github.com/WordPress/gutenberg/pull/60077))
+
+#### Block Editor
+
+-   Make sure the CSS class is-dark-theme is added to the editor iframe body. ([60300](https://github.com/WordPress/gutenberg/pull/60300))
+-   Raw handling: Preserve class. ([60331](https://github.com/WordPress/gutenberg/pull/60331))
+-   Raw handling: Preserve empty paragraphs. ([59476](https://github.com/WordPress/gutenberg/pull/59476))
+-   Wiriting flow: Backspace at beginning of first paragraph block prevents block from being deleted. ([56329](https://github.com/WordPress/gutenberg/pull/56329))
+
+#### Components
+
+-   CustomSelectControlV2: Fix hint behavior in legacy. ([60183](https://github.com/WordPress/gutenberg/pull/60183))
+-   InputControl: Ignore IME events when `isPressEnterToChange`. ([60090](https://github.com/WordPress/gutenberg/pull/60090))
+-   TextControl: Apply zero margin to input element. ([60282](https://github.com/WordPress/gutenberg/pull/60282))
+
+#### Global Styles
+
+-   Fix missing class for Global Styles > Colors. ([60094](https://github.com/WordPress/gutenberg/pull/60094))
+-   Reset specificity of body selector when processing with postcss. ([60266](https://github.com/WordPress/gutenberg/pull/60266))
+
+#### Zoom Out
+
+-   Fix zoom out mode toggling between pattern category selection. ([60225](https://github.com/WordPress/gutenberg/pull/60225))
+
+#### Data Views
+
+-   Fix focus outline visibility and truncation in data view record titles. ([60191](https://github.com/WordPress/gutenberg/pull/60191))
+
+#### Layout
+
+-   Fix horizontal flex layout in classic themes. ([60154](https://github.com/WordPress/gutenberg/pull/60154))
+
+#### Post Editor
+
+-   Editor: Memoize 'getInsertionPoint' selector. ([60015](https://github.com/WordPress/gutenberg/pull/60015))
+
+### Accessibility
+
+#### Data Views
+
+-   Add click-to-select behavior on table rows. ([59803](https://github.com/WordPress/gutenberg/pull/59803))
+-   Data views list layout: Apply focus styles to items on `focus-visible` rather than `focus`. ([60253](https://github.com/WordPress/gutenberg/pull/60253))
+-   Update field display in grid layout. ([60083](https://github.com/WordPress/gutenberg/pull/60083))
+-   [Data Views] Updating keyboard navigation in list layouts. ([59637](https://github.com/WordPress/gutenberg/pull/59637))
+
+#### Site Editor
+
+-   Restore Style book close button tooltip. ([60177](https://github.com/WordPress/gutenberg/pull/60177))
+
+#### Block Library
+
+-   Remove CSS order property from social icons placeholder UI. ([60032](https://github.com/WordPress/gutenberg/pull/60032))
+
+### Performance
+
+-   Avoid fetching ALL reusable blocks (user patterns) on post/site editor load. ([58239](https://github.com/WordPress/gutenberg/pull/58239))
+-   Block editor: Optimize hasSelectedInnerBlock selector. ([60330](https://github.com/WordPress/gutenberg/pull/60330))
+-   Templates perf: Resolve patterns server side. ([60349](https://github.com/WordPress/gutenberg/pull/60349))
+
+#### Block Library
+
+-   Template part: Avoid pattern fetch on mount. ([60297](https://github.com/WordPress/gutenberg/pull/60297))
+
+#### Block Editor
+
+-   Inserter: Cache search normalization results. ([60080](https://github.com/WordPress/gutenberg/pull/60080))
+
+### Experiments
+
+#### Site Editor
+
+-   Zoom-out view: Disable canvas resizing. ([60104](https://github.com/WordPress/gutenberg/pull/60104))
+
+### Documentation
+
+-   Add auto generated API documentation for `editor` package. ([60356](https://github.com/WordPress/gutenberg/pull/60356))
+-   Add component props documentation. ([60350](https://github.com/WordPress/gutenberg/pull/60350))
+-   Add php @global documentation. ([59931](https://github.com/WordPress/gutenberg/pull/59931))
+-   Change heading level on troubleshooting section. ([60233](https://github.com/WordPress/gutenberg/pull/60233))
+-   CustomSelectControlV2: Match v1 stories to test legacy component. ([60182](https://github.com/WordPress/gutenberg/pull/60182))
+-   Docs: Fix some typos. ([60260](https://github.com/WordPress/gutenberg/pull/60260))
+-   Fix @todo tags to follow standards in WordPress comments. ([60148](https://github.com/WordPress/gutenberg/pull/60148))
+-   Fix Font Collection JSON schema definition. ([60285](https://github.com/WordPress/gutenberg/pull/60285))
+-   Fix: Invalid documentation link to load JavaScript. ([60181](https://github.com/WordPress/gutenberg/pull/60181))
+-   Fix: Invalid links to the block supports api. ([60199](https://github.com/WordPress/gutenberg/pull/60199))
+-   Fix: Non existent link to submitting to the block directory. ([60389](https://github.com/WordPress/gutenberg/pull/60389))
+-   Interactivity API: Variable name correction in the documentation. ([60056](https://github.com/WordPress/gutenberg/pull/60056))
+-   [Create Block] Update external template documentation to include variants. ([60095](https://github.com/WordPress/gutenberg/pull/60095))
+
+### Code Quality
+
+-   Fix editor canvas overflow on search results with position: Relative. ([60287](https://github.com/WordPress/gutenberg/pull/60287))
+-   Editor: Move template areas to editor package. ([60179](https://github.com/WordPress/gutenberg/pull/60179))
+-   Style Engine: Continue get_classnames loop after adding the default classname. ([60153](https://github.com/WordPress/gutenberg/pull/60153))
+-   Update: Use getPostIcon selector on document bar. ([60128](https://github.com/WordPress/gutenberg/pull/60128))
+
+#### Block Editor
+
+-   Add comment for unmemoized context. ([60272](https://github.com/WordPress/gutenberg/pull/60272))
+-   Fix ESLint warning in BlockListBlock component. ([60064](https://github.com/WordPress/gutenberg/pull/60064))
+-   RichText: Switch from disableEditing to standard html readonly attribute. ([60327](https://github.com/WordPress/gutenberg/pull/60327))
+-   Site Editor: Reuse inserter search term normalization. ([60218](https://github.com/WordPress/gutenberg/pull/60218))
+-   canInsertBlockType: Extract helper for selector dependants. ([60235](https://github.com/WordPress/gutenberg/pull/60235))
+
+#### Components
+
+-   CustomSelectControlV2: Rename for consistency. ([60178](https://github.com/WordPress/gutenberg/pull/60178))
+-   Navigator: Fix two nits. ([60273](https://github.com/WordPress/gutenberg/pull/60273))
+-   NavigatorProvider: Move all state management to one reducer. ([60190](https://github.com/WordPress/gutenberg/pull/60190))
+-   Components: Try obviating Popover pointer event trap. ([59449](https://github.com/WordPress/gutenberg/pull/59449))
+
+#### Post Editor
+
+-   Memoize the getTemplateInfo selector. ([60200](https://github.com/WordPress/gutenberg/pull/60200))
+-   Update: Remove template summary component. ([60351](https://github.com/WordPress/gutenberg/pull/60351))
+
+#### Global Styles
+
+-   Additional CSS: Add code comments contextualising tranformStyles for clarity. ([60267](https://github.com/WordPress/gutenberg/pull/60267))
+-   Global styles: output `:root` selector for CSS custom properties. ([42084](https://github.com/WordPress/gutenberg/pull/42084))
+
+#### Font Library
+
+-   Add test for Font Library and Theme Style Variations. ([60250](https://github.com/WordPress/gutenberg/pull/60250))
+-   Update google fonts font collection data URL to the latest version available. ([60079](https://github.com/WordPress/gutenberg/pull/60079))
+
+#### Block Library
+
+-   Image: Use the new 'useUploadMediaFromBlobURL' hook. ([60208](https://github.com/WordPress/gutenberg/pull/60208))
+-   Navigation Block: Add test coverage to check that post content is not removed. ([60189](https://github.com/WordPress/gutenberg/pull/60189))
+
+#### Site Editor
+
+-   DataViews: Don't memoize every callback 'PagePages' component. ([60103](https://github.com/WordPress/gutenberg/pull/60103))
+-   History: Simplify the push and replace methods. ([60112](https://github.com/WordPress/gutenberg/pull/60112))
+
+#### Rich Text
+
+-   RichText: Separate fallback instance ID for selection retrieval. ([60277](https://github.com/WordPress/gutenberg/pull/60277))
+
+#### Block Locking
+
+-   E2E: Test BlockSwitcher availability in l-post-ul-group CPT. ([60254](https://github.com/WordPress/gutenberg/pull/60254))
+
+#### Data Views
+
+-   DataViews: Fix react warning error in list layout. ([60101](https://github.com/WordPress/gutenberg/pull/60101))
+
+### Tools
+
+#### Testing
+
+-   Automated Testing: Remove Puppeteer CI Job. ([59311](https://github.com/WordPress/gutenberg/pull/59311))
+-   CustomSelectControlV2: Stabilize tests. ([60133](https://github.com/WordPress/gutenberg/pull/60133))
+-   E2E: Fix flaky Site Editor pages end-to-end test. ([60109](https://github.com/WordPress/gutenberg/pull/60109))
+-   Font Library: Add upload font test. ([60221](https://github.com/WordPress/gutenberg/pull/60221))
+
+#### Build Tooling
+
+-   Blocks: Fix double `gutenberg_` prefix in built dynamic blocks PHP. ([60288](https://github.com/WordPress/gutenberg/pull/60288))
+
+### Various
+
+-   Backport r57868 (Editor: Prevent font folder naive filtering causing infinite loops) from WordPress-Develop. ([60141](https://github.com/WordPress/gutenberg/pull/60141))
+-   Format library: Improve unknown format performance. ([48761](https://github.com/WordPress/gutenberg/pull/48761))
+
+#### Post Editor
+
+-   Distraction free: Remove unwanted space from string. ([60108](https://github.com/WordPress/gutenberg/pull/60108))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors 🎉 :
+
+-   @interdevel: Fix `@todo` tags to follow standards in WordPress comments. ([60148](https://github.com/WordPress/gutenberg/pull/60148))
+-   @mikeybinns: Add component props documentation. ([60350](https://github.com/WordPress/gutenberg/pull/60350))
+-   @nirav7707: Editor: Update hover color of editor document title. ([60113](https://github.com/WordPress/gutenberg/pull/60113))
+-   @steveariss: Interactivity API: Variable name correction in the documentation. ([60056](https://github.com/WordPress/gutenberg/pull/60056))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @artemiomorales @bph @draganescu @ellatrix @fabiankaegy @geriux @getdave @glendaviesnz @interdevel @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @mikachan @mikeybinns @mirka @mujuonly @n2erjo00 @nirav7707 @noisysocks @ntsekouras @oandregal @ockham @pedro-mendonca @peterwilsoncc @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @Soean @steveariss @stokesman @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad
+
+= 18.0.0 =
+
+## Changelog
+
+### Enhancements
+
+-   Core Data: Update method generating plural names. ([59881](https://github.com/WordPress/gutenberg/pull/59881))
+-   Expand main content area to viewport when zoomed out. ([59512](https://github.com/WordPress/gutenberg/pull/59512))
+-   Update 'sidebar card' appearance. ([59997](https://github.com/WordPress/gutenberg/pull/59997))
+
+#### Data Views
+
+-   Add: Command click to select item on table view. ([59563](https://github.com/WordPress/gutenberg/pull/59563))
+-   DataViews: Add AND logic operators to filters. ([59953](https://github.com/WordPress/gutenberg/pull/59953))
+-   DataViews: Add default getValue for fields. ([59810](https://github.com/WordPress/gutenberg/pull/59810))
+-   DataViews: Implement multiple selection for filters. ([59610](https://github.com/WordPress/gutenberg/pull/59610))
+-   DataViews: Make list layout stable. ([59858](https://github.com/WordPress/gutenberg/pull/59858))
+-   Pages data view: Update quick-actions. ([59551](https://github.com/WordPress/gutenberg/pull/59551))
+-   Reduce visual prominence of primary actions in table data views, and consolidate primary + secondary actions in ellipsis menu. ([59128](https://github.com/WordPress/gutenberg/pull/59128))
+
+#### Site Editor
+
+-   Patterns: Add a title to the category delete flow and increase line height. ([59645](https://github.com/WordPress/gutenberg/pull/59645))
+-   Standardize block tools toggle button size to 32px. ([59625](https://github.com/WordPress/gutenberg/pull/59625))
+-   Update index page for templates. ([59792](https://github.com/WordPress/gutenberg/pull/59792))
+-   [Site Editor]: Move featured image at the top of the inspector controls. ([59783](https://github.com/WordPress/gutenberg/pull/59783))
+
+#### Block Library
+
+-   Add featured image to Media & Text block. ([51491](https://github.com/WordPress/gutenberg/pull/51491))
+-   Social Icons: Update Medium icon. ([57073](https://github.com/WordPress/gutenberg/pull/57073))
+-   Table Block: Fixed width table cells on by default. ([49672](https://github.com/WordPress/gutenberg/pull/49672))
+-   Update Reddit social icon to latest brand guidelines. ([59438](https://github.com/WordPress/gutenberg/pull/59438))
+
+#### Components
+
+-   Add typing for date and time typing for TextControl. ([59666](https://github.com/WordPress/gutenberg/pull/59666))
+-   Add: Support for menu group to the Dropdown. ([59723](https://github.com/WordPress/gutenberg/pull/59723))
+-   Update the line height for components. ([60028](https://github.com/WordPress/gutenberg/pull/60028))
+
+#### Design Tools
+
+-   Add Box Shadow support for featured image. ([59616](https://github.com/WordPress/gutenberg/pull/59616))
+-   Background block supports: Move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles. ([59889](https://github.com/WordPress/gutenberg/pull/59889))
+
+#### Layout
+
+-   Add Column Start and Row Start controls to Grid children. ([59483](https://github.com/WordPress/gutenberg/pull/59483))
+-   Allow blocks to be grouped as a Grid. ([59853](https://github.com/WordPress/gutenberg/pull/59853))
+
+#### Global Styles
+
+-   Remove preset headers. ([59504](https://github.com/WordPress/gutenberg/pull/59504))
+-   Try color and typography presets in Site View. ([59594](https://github.com/WordPress/gutenberg/pull/59594))
+
+#### Block API
+
+-   Display settings 'label' defined by the 'register_setting' method. ([59243](https://github.com/WordPress/gutenberg/pull/59243))
+
+#### Rich Text
+
+-   RichText: Add non breaking space shortcut on Windows. ([43150](https://github.com/WordPress/gutenberg/pull/43150))
+
+### New APIs
+
+-   Support the PluginDocumentSettingPanel slot in the site editor. ([59985](https://github.com/WordPress/gutenberg/pull/59985))
+-   Add pre 6.5 compat for viewStyles. ([59322](https://github.com/WordPress/gutenberg/pull/59322))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Add filter for duotone to account for gutenberg_restore_image_outer_container in classic themes. ([59764](https://github.com/WordPress/gutenberg/pull/59764))
+-   Add richText identifier to blocks. ([59056](https://github.com/WordPress/gutenberg/pull/59056))
+-   Close navigation link ui on escape. ([59838](https://github.com/WordPress/gutenberg/pull/59838))
+-   Code block: Preserve newlines. ([59627](https://github.com/WordPress/gutenberg/pull/59627))
+-   Do not focus new navigation block menu until loading is finished. ([59801](https://github.com/WordPress/gutenberg/pull/59801))
+-   File: Add center alignment editor class for classic themes. ([59975](https://github.com/WordPress/gutenberg/pull/59975))
+-   Fix create menu after menu switch. ([59630](https://github.com/WordPress/gutenberg/pull/59630))
+-   Fix image layout shift from placeholder to selected placeholder. ([59857](https://github.com/WordPress/gutenberg/pull/59857))
+-   Fix overlay issue when empty featured image is used in Cover Block. ([59855](https://github.com/WordPress/gutenberg/pull/59855))
+-   Media & Text: Remove the duplicate Media width control. ([59776](https://github.com/WordPress/gutenberg/pull/59776))
+-   Prevent default on primary+k to prevent command center from opening on navigation link. ([59845](https://github.com/WordPress/gutenberg/pull/59845))
+-   Quote: Show as active when deeply nested child block is selected. ([59662](https://github.com/WordPress/gutenberg/pull/59662))
+-   RichText: Document the identifier prop. ([60036](https://github.com/WordPress/gutenberg/pull/60036))
+-   Social icons: Only render label container when there's a label. ([60060](https://github.com/WordPress/gutenberg/pull/60060))
+-   Template Parts: Fix typo in translatable string. ([59816](https://github.com/WordPress/gutenberg/pull/59816))
+-   Ensure consistent return type in `WP_Navigation_Block_Renderer::Get_markup_for_inner_block()`. ([59820](https://github.com/WordPress/gutenberg/pull/59820))
+-   Return early from saving meta data for the navigation without a $post->ID. ([59875](https://github.com/WordPress/gutenberg/pull/59875))
+-   Fix root ID calculation when check if block can be transformed. ([60167](https://github.com/WordPress/gutenberg/pull/60167))
+-   Featured Image: Fix overlay rendering in the editor. ([60187](https://github.com/WordPress/gutenberg/pull/60187))
+-   Fix self closing navigation overlay. ([60130](https://github.com/WordPress/gutenberg/pull/60130))
+-   Navigation: Avoid content loss when only specific entity fields are edited. ([60071](https://github.com/WordPress/gutenberg/pull/60071))
+
+#### Font Library
+
+-   Avoid auto-removing font families without font faces. ([59910](https://github.com/WordPress/gutenberg/pull/59910))
+-   Ensure that errors reported from uploading font files are not duplicated. ([59564](https://github.com/WordPress/gutenberg/pull/59564))
+-   Fix JS errors when activating or deactivating system fonts. ([59935](https://github.com/WordPress/gutenberg/pull/59935))
+-   Fix typo in upload text. ([59655](https://github.com/WordPress/gutenberg/pull/59655))
+-   Polish Google Fonts consent box. ([59631](https://github.com/WordPress/gutenberg/pull/59631))
+-   Refactors the upload handler in order to check if files being uploaded are valid font files. ([59648](https://github.com/WordPress/gutenberg/pull/59648))
+-   Reset notices when navigating away from the collection. ([59981](https://github.com/WordPress/gutenberg/pull/59981))
+-   Activate the fonts coming from the backend and not the data from the frontend. ([60093](https://github.com/WordPress/gutenberg/pull/60093))
+-   Install fonts in sequence to work around race condition. ([60180](https://github.com/WordPress/gutenberg/pull/60180))
+
+#### Interactivity API
+
+-   Backport fixes from Core. ([59903](https://github.com/WordPress/gutenberg/pull/59903))
+-   Fix interactivity api end-to-end tests. ([59836](https://github.com/WordPress/gutenberg/pull/59836))
+-   Interactivity: Ensure stores are initialized on client. ([59842](https://github.com/WordPress/gutenberg/pull/59842))
+-   Interactivity: Restore scope when yielded promise rejects. ([59708](https://github.com/WordPress/gutenberg/pull/59708))
+-   Prevent non-object state from being added. ([59886](https://github.com/WordPress/gutenberg/pull/59886))
+-   Re-introduce `data_wp_context()` with `_deprecated_function()` call. ([59834](https://github.com/WordPress/gutenberg/pull/59834))
+
+#### Site Editor
+
+-   Don't display welcome guide in hybrid theme. ([55865](https://github.com/WordPress/gutenberg/pull/55865))
+-   Editor: Fix loading templates using a top level pattern block that includes a template part. ([59900](https://github.com/WordPress/gutenberg/pull/59900))
+-   Fix opening of save panel when using the `save` shortcut. ([59647](https://github.com/WordPress/gutenberg/pull/59647))
+-   Fix selected featured image when opening media library. ([59769](https://github.com/WordPress/gutenberg/pull/59769))
+-   Make the delete navigation menu confirm dialogs consistent. ([59825](https://github.com/WordPress/gutenberg/pull/59825))
+-   Restore the back button when navigating to the template from the home page. ([59639](https://github.com/WordPress/gutenberg/pull/59639))
+
+#### Block Editor
+
+-   Fix allow mouse users to edit link text when Link UI is active. ([59635](https://github.com/WordPress/gutenberg/pull/59635))
+-   Fix crash when unmounting an editor iframe. ([59992](https://github.com/WordPress/gutenberg/pull/59992))
+-   Handle when attributes param passed into hasStickyOrFixedPositionValue is nullish. ([59800](https://github.com/WordPress/gutenberg/pull/59800))
+-   List view: Fix stuck moving animation on Enter. ([59644](https://github.com/WordPress/gutenberg/pull/59644))
+-   Shadow support enable skip serialization for dynamic blocks. ([59887](https://github.com/WordPress/gutenberg/pull/59887))
+-   FlatTermSelector: Invalidate optimistic update if term creation fails. ([59945](https://github.com/WordPress/gutenberg/pull/59945))
+
+#### Global Styles
+
+-   Fix retrieval of referenced preset values in editor. ([59811](https://github.com/WordPress/gutenberg/pull/59811))
+-   Global Syles: Apply fallback background color to typography elements. ([59347](https://github.com/WordPress/gutenberg/pull/59347))
+-   Presets: Show the default empty variation as well as the other presets. ([59717](https://github.com/WordPress/gutenberg/pull/59717))
+-   Remove filter for same number of settings. ([59590](https://github.com/WordPress/gutenberg/pull/59590))
+-   Site editor: Find font families for typography presets crashes editor. ([59806](https://github.com/WordPress/gutenberg/pull/59806))
+-   Force root min-height of 100% for backgrounds. ([59809](https://github.com/WordPress/gutenberg/pull/59809))
+-   Featured Image: Fix block support selectors after shadow support addition. ([60184](https://github.com/WordPress/gutenberg/pull/60184))
+-   Fix list of base theme fonts when a theme variation is applied.. ([59959](https://github.com/WordPress/gutenberg/pull/59959))
+
+#### Patterns
+
+-   Add pattern title in create modal in post editor. ([59550](https://github.com/WordPress/gutenberg/pull/59550))
+-   Implement pattern overrides behind `IS_GUTENBERG_PLUGIN` flag. ([59702](https://github.com/WordPress/gutenberg/pull/59702))
+-   Pattern Explorer: Pass 'rootClientId' to the pattern list. ([60014](https://github.com/WordPress/gutenberg/pull/60014))
+-   Pattern Shuffling: Don't assume that patterns have categories. ([60070](https://github.com/WordPress/gutenberg/pull/60070))
+
+#### Data Views
+
+-   Ensure the 'select all' checkbox appears on hover. ([59799](https://github.com/WordPress/gutenberg/pull/59799))
+-   Fix: Regression: Default templates and template parts views do not work. ([59794](https://github.com/WordPress/gutenberg/pull/59794))
+-   Ignore cmd-click when row not selectable. ([59697](https://github.com/WordPress/gutenberg/pull/59697))
+-   [DataViews]: Fix item actions. ([59748](https://github.com/WordPress/gutenberg/pull/59748))
+
+#### Components
+
+-   DateTimePicker: Change day button size back from 32px to 28px. ([59990](https://github.com/WordPress/gutenberg/pull/59990))
+-   Fix unwanted ToggleGroupControl backdrop vertical animation. ([59642](https://github.com/WordPress/gutenberg/pull/59642))
+-   PaletteEdit: Fix order numbers. ([52212](https://github.com/WordPress/gutenberg/pull/52212))
+
+#### Layout
+
+-   Experiments: Fix label typo: "Grid interactivity". ([59796](https://github.com/WordPress/gutenberg/pull/59796))
+-   Show inherit toggle in the absence of `settings.layout` object. ([59580](https://github.com/WordPress/gutenberg/pull/59580))
+-   Use correct layout type to display controls. ([59979](https://github.com/WordPress/gutenberg/pull/59979))
+
+#### List View
+
+-   Block Bindings: Remove Block Bindings icon from List View, fixes and CSS updates. ([59477](https://github.com/WordPress/gutenberg/pull/59477))
+-   Heading Block: Show default block name in list view when content is empty. ([59827](https://github.com/WordPress/gutenberg/pull/59827))
+-   Blocks: getBlockLabel: Use RichTextData.toPlainText if available. ([58524](https://github.com/WordPress/gutenberg/pull/58524))
+
+#### Data Layer
+
+-   Fix `getEntityRecordsTotalPages` when `per_page` is not provided. ([59983](https://github.com/WordPress/gutenberg/pull/59983))
+
+#### Icons
+
+-   Fix return icon viewbox. ([59669](https://github.com/WordPress/gutenberg/pull/59669))
+
+### Accessibility
+
+-   Add tooltip to several Back buttons. ([59760](https://github.com/WordPress/gutenberg/pull/59760))
+-   Make save panel a dialog with proper labels, fix site editor focus loss after save. ([59622](https://github.com/WordPress/gutenberg/pull/59622))
+-   Fix labeling of the navigation links in the list view. ([59370](https://github.com/WordPress/gutenberg/pull/59370))
+
+### Documentation
+
+-   Block JSON schema: Add `layout.allowCustomContentAndWideSize` field. ([59736](https://github.com/WordPress/gutenberg/pull/59736))
+-   Components: Fix headline hierarchy in README. ([59726](https://github.com/WordPress/gutenberg/pull/59726))
+-   Components: Hide private READMEs from handbook. ([60003](https://github.com/WordPress/gutenberg/pull/60003))
+-   Dataviews: Improve story. ([59773](https://github.com/WordPress/gutenberg/pull/59773))
+-   Docs/fix typo in metadata reference guide. ([59577](https://github.com/WordPress/gutenberg/pull/59577))
+-   Docs/fix typos and clarify wording in blocks supports guide. ([59721](https://github.com/WordPress/gutenberg/pull/59721))
+-   Docs/fix typos in block context. ([59575](https://github.com/WordPress/gutenberg/pull/59575))
+-   Docs/fix typos in block registration guide. ([59720](https://github.com/WordPress/gutenberg/pull/59720))
+-   Docs/fix typos in block supports. ([59919](https://github.com/WordPress/gutenberg/pull/59919))
+-   Docs/fix typos in edit and save reference guide. ([59576](https://github.com/WordPress/gutenberg/pull/59576))
+-   Docs: Flex - Fix headline hierarchy. ([59686](https://github.com/WordPress/gutenberg/pull/59686))
+-   Docs: List all minor versions on Versions in WordPress page. ([58003](https://github.com/WordPress/gutenberg/pull/58003))
+-   Docs: Remove alert callout on block selectors page. ([60020](https://github.com/WordPress/gutenberg/pull/60020))
+-   Docs: Update Interactivity API package readme. ([59763](https://github.com/WordPress/gutenberg/pull/59763))
+-   Fix broken links in Interactivity API documentation. ([59715](https://github.com/WordPress/gutenberg/pull/59715))
+-   Fix sample code on InputControl documentation. ([59517](https://github.com/WordPress/gutenberg/pull/59517))
+-   Fix typo in platform-docs. ([60042](https://github.com/WordPress/gutenberg/pull/60042))
+-   Fix: Invalid links to getting started with JavaScript. ([59927](https://github.com/WordPress/gutenberg/pull/59927))
+-   Fixes pseudo code doc block to use real PHP. ([60012](https://github.com/WordPress/gutenberg/pull/60012))
+-   HeadingLevelDropdown: Fix JSDoc and documentation. ([59727](https://github.com/WordPress/gutenberg/pull/59727))
+-   Improve Gutenberg platform documentation homepage. ([59749](https://github.com/WordPress/gutenberg/pull/59749))
+-   InputControl: Make `onChange` observable in Storybook. ([60055](https://github.com/WordPress/gutenberg/pull/60055))
+-   Interactivity API Docs: Clarify that `getElement()`'s `ref` can be `null`. ([59868](https://github.com/WordPress/gutenberg/pull/59868))
+-   Platform Docs: Fix JSX error. ([59967](https://github.com/WordPress/gutenberg/pull/59967))
+-   Plugin short description less than 150 characters. ([59661](https://github.com/WordPress/gutenberg/pull/59661))
+-   RadioControl: Update deprecated suggestion in readme. ([60002](https://github.com/WordPress/gutenberg/pull/60002))
+-   Replace screenshots of Radio Control. ([60024](https://github.com/WordPress/gutenberg/pull/60024))
+-   Replace “sidebar” with “panel” in README.md. ([59664](https://github.com/WordPress/gutenberg/pull/59664))
+-   Update GitHub edit URL in docusaurus.config.js. ([59969](https://github.com/WordPress/gutenberg/pull/59969))
+-   Update React documentation links for forms. ([59657](https://github.com/WordPress/gutenberg/pull/59657))
+-   Update api-reference - data-bind--hidden is an incorrrect attribute - should be data-wp-bind--hidden. ([59955](https://github.com/WordPress/gutenberg/pull/59955))
+-   Update block supports documentation for WordPress 6.5. ([59862](https://github.com/WordPress/gutenberg/pull/59862))
+-   Update dependency-extraction-webpack-plugin documentation. ([59973](https://github.com/WordPress/gutenberg/pull/59973))
+-   docs: Fix syntax in block filters example. ([59636](https://github.com/WordPress/gutenberg/pull/59636))
+-   theme.json schema: Add settings.color.caption definition. ([60017](https://github.com/WordPress/gutenberg/pull/60017))
+
+### Code Quality
+
+-   Add $schema to tsconfig files. ([59861](https://github.com/WordPress/gutenberg/pull/59861))
+-   Added @global to PHP documentation Comments. ([59725](https://github.com/WordPress/gutenberg/pull/59725))
+-   Consolidate template actions components. ([59586](https://github.com/WordPress/gutenberg/pull/59586))
+-   Core Data: Clarify comments for entities' plural methods. ([59946](https://github.com/WordPress/gutenberg/pull/59946))
+-   Fix Code Standards for RC 2 release. ([59774](https://github.com/WordPress/gutenberg/pull/59774))
+-   Fix typo in Dataviews and Font Collection packages. ([59656](https://github.com/WordPress/gutenberg/pull/59656))
+-   Fix: Typo correction tff to ttf. ([59665](https://github.com/WordPress/gutenberg/pull/59665))
+-   Global styles utils: Remove unused vars. ([59805](https://github.com/WordPress/gutenberg/pull/59805))
+-   Refactor zoom-out iframe scale. ([59618](https://github.com/WordPress/gutenberg/pull/59618))
+-   Refine include/exclude patterns in phpcs.xml.dist. ([59712](https://github.com/WordPress/gutenberg/pull/59712))
+-   Typography Presets: Use && rather to avoid a messy nested conditional. ([59920](https://github.com/WordPress/gutenberg/pull/59920))
+-   synchronizeBlocksWithTemplate: Extract common functions. ([59682](https://github.com/WordPress/gutenberg/pull/59682))
+
+#### Block Editor
+
+-   Block tree reducer: Avoid nested update for insertUsage. ([59681](https://github.com/WordPress/gutenberg/pull/59681))
+-   Block tree reducer: Avoid repetitive Map.get. ([59672](https://github.com/WordPress/gutenberg/pull/59672))
+-   BlockSettingsDropdown: No need to cast 'clientIds' to an array. ([59940](https://github.com/WordPress/gutenberg/pull/59940))
+-   BlockSettingsMenuControls: Remove '\_\_unstableDisplayLocation' prop. ([59942](https://github.com/WordPress/gutenberg/pull/59942))
+-   Don't memoize callbacks in 'BlockSettingsDropdown'. ([59397](https://github.com/WordPress/gutenberg/pull/59397))
+-   Link dialog: Remove CSS hack. ([59746](https://github.com/WordPress/gutenberg/pull/59746))
+-   Pattern Explorer: Remove leftover source filter state handlers. ([60019](https://github.com/WordPress/gutenberg/pull/60019))
+-   Fix code formatting in Nav block view file. ([60162](https://github.com/WordPress/gutenberg/pull/60162))
+
+#### Components
+
+-   Button : Deprecate `isSmall` prop. ([59734](https://github.com/WordPress/gutenberg/pull/59734))
+-   Button: Keep deprecated props in type definitions. ([59913](https://github.com/WordPress/gutenberg/pull/59913))
+-   Replace `isSmall` prop with `size` in `NavigationMenuSelector`. ([59667](https://github.com/WordPress/gutenberg/pull/59667))
+-   Replace isSmall prop WordPress/Gutenberg#53560. ([59302](https://github.com/WordPress/gutenberg/pull/59302))
+-   TextareaControl: Remove extra closing curly brace in `inputStyleNeutral`. ([59744](https://github.com/WordPress/gutenberg/pull/59744))
+-   Update Snapshots for line height. ([60041](https://github.com/WordPress/gutenberg/pull/60041))
+
+#### Block Library
+
+-   Add explanatory comment to Nav Link block fix for Command Center. ([59864](https://github.com/WordPress/gutenberg/pull/59864))
+-   Enforce @since tags in block-library/src/_/_.php files. ([59700](https://github.com/WordPress/gutenberg/pull/59700))
+-   Refactor Enter keypress on Nav Link. ([59848](https://github.com/WordPress/gutenberg/pull/59848))
+-   Update Nav block permissions variable naming accuracy. ([59882](https://github.com/WordPress/gutenberg/pull/59882))
+
+#### Global Styles
+
+-   Fetch the variations inside the component. ([59588](https://github.com/WordPress/gutenberg/pull/59588))
+-   Theme JSON: Remove unused vars in layout class. ([59938](https://github.com/WordPress/gutenberg/pull/59938))
+-   Use the preivew iframe to preview typography for consistency. ([59587](https://github.com/WordPress/gutenberg/pull/59587))
+-   Background block supports: Move size defaults to hooks and block.json. ([60008](https://github.com/WordPress/gutenberg/pull/60008))
+
+#### Plugin
+
+-   Remove unnecessary 'IS_GUTENBERG_PLUGIN' check in 'load.php'. ([59873](https://github.com/WordPress/gutenberg/pull/59873))
+-   Update PHP Sync Issue generation script to ignore PRs with given labels. ([59549](https://github.com/WordPress/gutenberg/pull/59549))
+
+#### Data Views
+
+-   Update: Dataviews do not use strings on isCustom props passed down. ([59609](https://github.com/WordPress/gutenberg/pull/59609))
+-   [Data Views]: Remove separator in item actions. ([59822](https://github.com/WordPress/gutenberg/pull/59822))
+
+#### Data Layer
+
+-   Data: Deprecate the getIsResolving selector. ([59679](https://github.com/WordPress/gutenberg/pull/59679))
+
+### Tools
+
+#### Build Tooling
+
+-   Add inline comment denoting version for Ruby setup. ([59640](https://github.com/WordPress/gutenberg/pull/59640))
+-   Build: Dedupe packages. ([57800](https://github.com/WordPress/gutenberg/pull/57800))
+-   GitHub Actions: Fix PHP file change detection logic. ([59653](https://github.com/WordPress/gutenberg/pull/59653))
+-   Improve likelihood of Cherry Picking script including all PRs. ([59871](https://github.com/WordPress/gutenberg/pull/59871))
+-   Interactive template: Use wp_interactivity_data_wp_context function. ([59995](https://github.com/WordPress/gutenberg/pull/59995))
+-   Test: Dynamically detect and set max-workers. ([59904](https://github.com/WordPress/gutenberg/pull/59904))
+-   Update docusaurus to the latest version. ([59866](https://github.com/WordPress/gutenberg/pull/59866))
+
+#### Testing
+
+-   Remove @kevin940726 and @Mamaduka from end-to-end test codeowners. ([60067](https://github.com/WordPress/gutenberg/pull/60067))
+-   Upgrade Playwright to v1.42. ([59339](https://github.com/WordPress/gutenberg/pull/59339))
+-   Use viewScriptModule block.json field for interactivity end-to-end tests. ([59705](https://github.com/WordPress/gutenberg/pull/59705))
+-   end-to-end theme switch: Match incoming theme slug, then optional folder. ([59851](https://github.com/WordPress/gutenberg/pull/59851))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @andrewfleming: Plugin short description less than 150 characters. ([59661](https://github.com/WordPress/gutenberg/pull/59661))
+-   @chrisbellboy: docs: Fix syntax in block filters example. ([59636](https://github.com/WordPress/gutenberg/pull/59636))
+-   @colinduwe: Shadow support enable skip serialization for dynamic blocks. ([59887](https://github.com/WordPress/gutenberg/pull/59887))
+-   @enodekciw: Update dependency-extraction-webpack-plugin documentation. ([59973](https://github.com/WordPress/gutenberg/pull/59973))
+-   @georgestephanis: Re-introduce `data_wp_context()` with `_deprecated_function()` call. ([59834](https://github.com/WordPress/gutenberg/pull/59834))
+-   @J0n-92: Add typing for date and time typing for TextControl. ([59666](https://github.com/WordPress/gutenberg/pull/59666))
+-   @jaclync: Replace `isSmall` prop with `size` in `NavigationMenuSelector`. ([59667](https://github.com/WordPress/gutenberg/pull/59667))
+-   @Jayanth-Parthsarathy: Add inline comment denoting version for Ruby setup. ([59640](https://github.com/WordPress/gutenberg/pull/59640))
+-   @luislard: Fix broken links in Interactivity API documentation. ([59715](https://github.com/WordPress/gutenberg/pull/59715))
+-   @mattsherman: Handle when attributes param passed into hasStickyOrFixedPositionValue is nullish. ([59800](https://github.com/WordPress/gutenberg/pull/59800))
+-   @mzahir: Update React documentation links for forms. ([59657](https://github.com/WordPress/gutenberg/pull/59657))
+-   @rcoll: Fix typo in Dataviews and Font Collection packages. ([59656](https://github.com/WordPress/gutenberg/pull/59656))
+-   @SahilThakur02: TextareaControl: Remove extra closing curly brace in `inputStyleNeutral`. ([59744](https://github.com/WordPress/gutenberg/pull/59744))
+-   @Sam-Xronn: Update Reddit social icon to latest brand guidelines. ([59438](https://github.com/WordPress/gutenberg/pull/59438))
+-   @Strangehill: Replace “sidebar” with “panel” in README.md. ([59664](https://github.com/WordPress/gutenberg/pull/59664))
+-   @TeresaGobble: Docs/fix typos in edit and save reference guide. ([59576](https://github.com/WordPress/gutenberg/pull/59576))
+-   @tomepajk: Update api-reference - data-bind--hidden is an incorrrect attribute - should be data-wp-bind--hidden. ([59955](https://github.com/WordPress/gutenberg/pull/59955))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @afragen @ajlende @alexstine @andrewfleming @anton-vlasenko @artemiomorales @bacoords @c4rl0sbr4v0 @carolinan @chrisbellboy @colinduwe @creativecoder @DAreRodz @dcalhoun @draganescu @ellatrix @enejb @enodekciw @flexseth @fluiddot @gaambo @georgestephanis @geriux @getdave @huzaifaalmesbah @inc2734 @J0n-92 @jaclync @jameskoster @jasmussen @Jayanth-Parthsarathy @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krokodok @luislard @Mamaduka @matiasbenedetto @mattsherman @mcsf @megane9988 @michalczaplinski @mirka @mujuonly @mzahir @ndiego @noisysocks @ntsekouras @oandregal @pbking @ramonjd @rcoll @SahilThakur02 @Sam-Xronn @scruffian @shail-mehta @SiobhyB @sirreal @Soean @Strangehill @sunil25393 @swissspidy @t-hamano @talldan @tellthemachines @TeresaGobble @tjcafferkey @tomepajk @tyxla @vcanales @youknowriad
+
+= 17.9.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Data Views
+
+-   Apply hover styles to filter chip while being configured. ([59236](https://github.com/WordPress/gutenberg/pull/59236))
+-   Display all checkboxes when a single item is selected. ([59233](https://github.com/WordPress/gutenberg/pull/59233))
+-   Pages data view: Make 'View' button open a new tab. ([59554](https://github.com/WordPress/gutenberg/pull/59554))
+-   Reposition pattern detail icon. ([59363](https://github.com/WordPress/gutenberg/pull/59363))
+-   Update 'Add filter' button in data views. ([59433](https://github.com/WordPress/gutenberg/pull/59433))
+-   Update empty/loading states. ([59437](https://github.com/WordPress/gutenberg/pull/59437))
+-   Update filter control position. ([59231](https://github.com/WordPress/gutenberg/pull/59231))
+-   Update page selector appearance. ([59284](https://github.com/WordPress/gutenberg/pull/59284))
+-   Update pages dataview icons, add 'drafts' icon. ([59285](https://github.com/WordPress/gutenberg/pull/59285))
+-   Update sidebar titles for Template and Page management data views. ([59011](https://github.com/WordPress/gutenberg/pull/59011))
+
+#### Global Styles
+
+-   Add background image to top-level theme.json styles. ([59354](https://github.com/WordPress/gutenberg/pull/59354))
+-   Add color and typography presets to Global Styles. ([56622](https://github.com/WordPress/gutenberg/pull/56622))
+-   Create a shared component for typography previews. ([59503](https://github.com/WordPress/gutenberg/pull/59503))
+-   Enqueue block custom CSS only when block renders on the page. ([58991](https://github.com/WordPress/gutenberg/pull/58991))
+-   Style Book: Should persist when browsing global styles panels. ([59261](https://github.com/WordPress/gutenberg/pull/59261))
+
+#### Block Library
+
+-   Introduce the 'useUploadMediaFromBlobURL' utility hook. ([59350](https://github.com/WordPress/gutenberg/pull/59350))
+-   Remove redundant copy from PanelBody titles. ([59278](https://github.com/WordPress/gutenberg/pull/59278))
+-   Template Parts: Add a replace flow to the inspector controls. ([55128](https://github.com/WordPress/gutenberg/pull/55128))
+
+#### Site Editor
+
+-   Block Theme Previews: Remove "Looking for Template Parts?" hint. ([59092](https://github.com/WordPress/gutenberg/pull/59092))
+-   Remove the site editor sidebar navigation edit button. ([59335](https://github.com/WordPress/gutenberg/pull/59335))
+-   Scale the zoomed out mode to fit available space. ([59342](https://github.com/WordPress/gutenberg/pull/59342))
+-   View full zoomed out mode canvas while inserting patterns. ([59337](https://github.com/WordPress/gutenberg/pull/59337))
+-   Add: Shuffle button in zoom out mode. ([59573](https://github.com/WordPress/gutenberg/pull/59573))
+
+#### Font Library
+
+-   Add option to revoke access to Google Fonts. ([59205](https://github.com/WordPress/gutenberg/pull/59205))
+-   Make font collection fields translatable. ([59256](https://github.com/WordPress/gutenberg/pull/59256))
+-   Update the spacing in the font collection panel. ([59357](https://github.com/WordPress/gutenberg/pull/59357))
+
+#### Post Editor
+
+-   Editor: Standardize header button size to 32px. ([58532](https://github.com/WordPress/gutenberg/pull/58532))
+-   Tweak: Sidebar categories panel. ([59495](https://github.com/WordPress/gutenberg/pull/59495))
+
+#### Patterns
+
+-   Add Shuffle option to sections via pattern category. ([59251](https://github.com/WordPress/gutenberg/pull/59251))
+-   Use block naming for marking blocks as overridable in patterns. ([59268](https://github.com/WordPress/gutenberg/pull/59268))
+
+#### Components
+
+-   Storybook: Add mechanism to redirect moved stories. ([59181](https://github.com/WordPress/gutenberg/pull/59181))
+
+#### Nested / Inner Blocks
+
+-   InnerBlocks: Support insert before/after block actions when using allowedBlocks. ([59162](https://github.com/WordPress/gutenberg/pull/59162))
+
+#### Plugin
+
+-   Update cherry pick script to add `Backported to WP Core` label for backports. ([58970](https://github.com/WordPress/gutenberg/pull/58970))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Columns: Correctly recalculate column widths when the column count is increased by more than 2 at once. ([59301](https://github.com/WordPress/gutenberg/pull/59301))
+-   Group: Fix alignment of Group block placeholder text. ([59271](https://github.com/WordPress/gutenberg/pull/59271))
+-   Query Loop: Don't show publicly non-queryable taxonomies. ([59458](https://github.com/WordPress/gutenberg/pull/59458))
+-   Image: Remove scrolling of empty image blocks. ([59305](https://github.com/WordPress/gutenberg/pull/59305))
+-   Search: Use font size for search icon. ([59159](https://github.com/WordPress/gutenberg/pull/59159))
+-   Site Logo: Update URL for site icon settings with fallback for WP core versions earlier than 6.5. ([59485](https://github.com/WordPress/gutenberg/pull/59485))
+-   Site Logo: Update capitalization of Use as Site Icon toggle. ([59383](https://github.com/WordPress/gutenberg/pull/59383))
+-   Title & Featured Image: Hide non content controls when block editing mode is 'contentOnly'. ([59295](https://github.com/WordPress/gutenberg/pull/59295))
+
+#### Font Library
+
+-   Avoid creating font families without font faces. ([59436](https://github.com/WordPress/gutenberg/pull/59436))
+-   Avoid loading theme fonts twice and assume they were already resolved by the font face resolver. ([59421](https://github.com/WordPress/gutenberg/pull/59421))
+-   Changed installFont to installFonts so that multiple font families can be installed at once. ([59451](https://github.com/WordPress/gutenberg/pull/59451))
+-   Fixed the font family modal to open in state when a font is already selected. ([59379](https://github.com/WordPress/gutenberg/pull/59379))
+-   Font collection pagination: Add min height to avoid infinite number. ([59241](https://github.com/WordPress/gutenberg/pull/59241))
+-   Hide UI elements when user lacks permissions. ([59332](https://github.com/WordPress/gutenberg/pull/59332))
+-   Load/Unload the font face in browser when toggling the variants. ([59066](https://github.com/WordPress/gutenberg/pull/59066))
+-   Use SearchControl component for search input. ([59589](https://github.com/WordPress/gutenberg/pull/59589))
+-   REST API: Backport r57804 from wp-dev. ([59767](https://github.com/WordPress/gutenberg/pull/59767))
+
+#### Interactivity API
+
+-   Fix `navigate()` issues related to initial state merges. ([57134](https://github.com/WordPress/gutenberg/pull/57134))
+-   Fix context object proxy references. ([59553](https://github.com/WordPress/gutenberg/pull/59553))
+-   Improve context merges using proxies. ([59187](https://github.com/WordPress/gutenberg/pull/59187))
+-   Navigation: Add missing empty space to print out valid HTML. ([59255](https://github.com/WordPress/gutenberg/pull/59255))
+-   Prevent unwanted subscriptions to inherited context props. ([59273](https://github.com/WordPress/gutenberg/pull/59273))
+-   Rename `data_wp_context` function. ([59465](https://github.com/WordPress/gutenberg/pull/59465))
+
+#### Components
+
+-   Button: Fix focus outline in disabled primary variant. ([59391](https://github.com/WordPress/gutenberg/pull/59391))
+-   Button: Place children before the icon when `iconPosition` is "right". ([59489](https://github.com/WordPress/gutenberg/pull/59489))
+-   Fix tooltip font. ([59307](https://github.com/WordPress/gutenberg/pull/59307))
+-   HStack, VStack: Stop passing invalid props. ([59416](https://github.com/WordPress/gutenberg/pull/59416))
+-   URLPopover: Restore min-width style. ([59274](https://github.com/WordPress/gutenberg/pull/59274))
+
+#### Block Editor
+
+-   Fix Navigation link control overlapping issue. ([59065](https://github.com/WordPress/gutenberg/pull/59065))
+-   Fix: Re-render toolbar when parent block changes. ([59234](https://github.com/WordPress/gutenberg/pull/59234))
+-   List: Copy wrapper when multi selecting items. ([59460](https://github.com/WordPress/gutenberg/pull/59460))
+-   Refactor: UseBlockTools hook. ([58979](https://github.com/WordPress/gutenberg/pull/58979))
+-   Rich text: Fix typing into empty flex element. ([59473](https://github.com/WordPress/gutenberg/pull/59473))
+-   URLPopover: Fix a problem with the layout of link settings. ([58906](https://github.com/WordPress/gutenberg/pull/58906))
+-   Fix issue with appender jumping when creating a new pattern. ([59582](https://github.com/WordPress/gutenberg/pull/59582))
+-   Allow event bubbling even if keydown is passed. ([59474](https://github.com/WordPress/gutenberg/pull/59474))
+
+#### Custom Fields
+
+-   Block Bindings: Fix console error when selecting a bound block. ([59598](https://github.com/WordPress/gutenberg/pull/59598))
+-   Change default "Connected to a custom field" message in bindings. ([59434](https://github.com/WordPress/gutenberg/pull/59434))
+-   Fix inserting button block when pressing enter in a block with bound `text` attribute. ([59361](https://github.com/WordPress/gutenberg/pull/59361))
+-   Fix query loop with block bindings not working in the editor as expected. ([59283](https://github.com/WordPress/gutenberg/pull/59283))
+
+#### Data Views
+
+-   DataViews: Don't use combobox when there are few available options. ([59341](https://github.com/WordPress/gutenberg/pull/59341))
+-   DataViews: Set color for primary field/`a` element when focused. ([58814](https://github.com/WordPress/gutenberg/pull/58814))
+-   Dataviews: Fix sticky table headers. ([59467](https://github.com/WordPress/gutenberg/pull/59467))
+
+#### Site Editor
+
+-   Ensure ResizableFrame does not force Cover blocks within the editor to show drag handles. ([59262](https://github.com/WordPress/gutenberg/pull/59262))
+-   Iframe: Scale html instead of iframe element for zoomed out mode. ([59334](https://github.com/WordPress/gutenberg/pull/59334))
+-   Zoom out mode: Only apply grey background for mode. ([59377](https://github.com/WordPress/gutenberg/pull/59377))
+-   Fix Global Styles outdated output. ([59628](https://github.com/WordPress/gutenberg/pull/59628))
+-   Fix site editor crashing when not fully loaded. ([59658](https://github.com/WordPress/gutenberg/pull/59658))
+
+#### Global Styles
+
+-   Dynamically set border panel label based on the controls available. ([59358](https://github.com/WordPress/gutenberg/pull/59358))
+-   Shadow: Fix layout collapse when indicator is selected. ([59309](https://github.com/WordPress/gutenberg/pull/59309))
+-   Theme JSON: Check for null values to cater for blockGap. ([59258](https://github.com/WordPress/gutenberg/pull/59258))
+-   Remove the extra unneeded color variations panel. ([59718](https://github.com/WordPress/gutenberg/pull/59718))
+
+#### Post Editor
+
+-   Command Palette: Prevent mode switching if only one editor mode is available. ([59299](https://github.com/WordPress/gutenberg/pull/59299))
+-   Editor: Fix post type check in isEditingTemplate selector. ([59105](https://github.com/WordPress/gutenberg/pull/59105))
+-   Top Toolbar: Fix 'collapsed' state synchronization. ([59267](https://github.com/WordPress/gutenberg/pull/59267))
+
+#### Block hooks
+
+-   Display toggle for hooked blocks added via filter. ([59396](https://github.com/WordPress/gutenberg/pull/59396))
+-   Navigation Block: Fix erroneous escaping of ampersands. ([59561](https://github.com/WordPress/gutenberg/pull/59561))
+
+#### Patterns
+
+-   Disable image caption if part of synced pattern. ([58916](https://github.com/WordPress/gutenberg/pull/58916))
+-   Disable selection checkbox if no bulk actions are eligible. ([58950](https://github.com/WordPress/gutenberg/pull/58950))
+
+#### Block bindings
+
+-   Fix Enter on disabled rich text. ([59320](https://github.com/WordPress/gutenberg/pull/59320))
+
+#### Page Content Focus
+
+-   Fix `DisableNonPageContentBlocks` behavior. ([59297](https://github.com/WordPress/gutenberg/pull/59297))
+
+#### Design Tools
+
+-   Cover block: Clear aspect ratio value when toggling full height. ([59296](https://github.com/WordPress/gutenberg/pull/59296))
+-   Disable core shadow presets by default, let themes opt-in. ([58766](https://github.com/WordPress/gutenberg/pull/58766))
+
+#### Layout
+
+-   Fix MarginVisualizer and PaddingVisualizer. ([59227](https://github.com/WordPress/gutenberg/pull/59227))
+
+#### Block Conversion
+
+-   Preserve bindings metadata in block transforms. ([59179](https://github.com/WordPress/gutenberg/pull/59179))
+
+#### Typography
+
+-   Fluid typography: Pass theme.json settings to override merged theme data. ([58362](https://github.com/WordPress/gutenberg/pull/58362))
+
+#### Data Layer
+
+-   Ignore HTML Elements in ReduxDevTools. ([57497](https://github.com/WordPress/gutenberg/pull/57497))
+
+### Accessibility
+
+#### Data Views
+
+-   Conditionally display filter reset button. ([59432](https://github.com/WordPress/gutenberg/pull/59432))
+-   Use aria-disabled on disabled checkboxes and add tooltips. ([59364](https://github.com/WordPress/gutenberg/pull/59364))
+
+#### Design Tools
+
+-   Shadows: Improve accessibility of shadows dropdown. ([58828](https://github.com/WordPress/gutenberg/pull/58828))
+
+#### Block Editor
+
+-   Fix canvas iframe button accessibility and silent tab stops. ([59317](https://github.com/WordPress/gutenberg/pull/59317))
+-   Fix: Disable 'Open save panel' when there are no changes to save, while navigating with keyboard. ([59543](https://github.com/WordPress/gutenberg/pull/59543))
+
+#### Block Library
+
+-   List block: Allow tab to indent/outdent at selection start. ([59199](https://github.com/WordPress/gutenberg/pull/59199))
+
+#### Custom Fields
+
+-   Add visual indicator if a block is connected to block binding source. ([59185](https://github.com/WordPress/gutenberg/pull/59185))
+
+### Performance
+
+#### Block Editor
+
+-   Block Bindings: Do not use useSource hook conditionally. ([59403](https://github.com/WordPress/gutenberg/pull/59403))
+-   Block Preview: Optimize default additional styles. ([59556](https://github.com/WordPress/gutenberg/pull/59556))
+
+### Experiments
+
+#### Layout
+
+-   Add Grid interactivity experiment to allow canvas interaction with grid layout. ([59052](https://github.com/WordPress/gutenberg/pull/59052))
+
+#### Components
+
+-   Tabs: Rename `initialTabId` prop to `defaultTabId`. ([59035](https://github.com/WordPress/gutenberg/pull/59035))
+
+#### Font Library
+
+-   Fix infinite loop when calling wp_get_upload_dir in a function that's used to filter font_dir. ([58839](https://github.com/WordPress/gutenberg/pull/58839))
+
+### Documentation
+
+-   Add hyperlink to media-upload documentation. ([57170](https://github.com/WordPress/gutenberg/pull/57170))
+-   Add title and link for data-wp-each-child. ([59505](https://github.com/WordPress/gutenberg/pull/59505))
+-   Adds import statement to code usage example. ([59327](https://github.com/WordPress/gutenberg/pull/59327))
+-   Core Block Reference: Add allowedBlocks field. ([59424](https://github.com/WordPress/gutenberg/pull/59424))
+-   Core Block Reference: Add ancestor status and refactor generation logic. ([59390](https://github.com/WordPress/gutenberg/pull/59390))
+-   Create block interactivity: Fix minimum versions. ([59375](https://github.com/WordPress/gutenberg/pull/59375))
+-   Docs: Fix typo in Tutorial. ([59581](https://github.com/WordPress/gutenberg/pull/59581))
+-   Docs: Fix typo in blocks attributes guide. ([59571](https://github.com/WordPress/gutenberg/pull/59571))
+-   Docs: Remove TOC, update formatting, and fix grammar in Interactivity API reference. ([59406](https://github.com/WordPress/gutenberg/pull/59406))
+-   Fix `@wordpress/interactivity` module ID in documentation. ([59419](https://github.com/WordPress/gutenberg/pull/59419))
+-   Fix: Multi line comment format on footnotes block. ([59312](https://github.com/WordPress/gutenberg/pull/59312))
+-   Format PHP inline comments correctly. ([59452](https://github.com/WordPress/gutenberg/pull/59452))
+-   Interactivity API Docs: Add async actions documentation. ([59401](https://github.com/WordPress/gutenberg/pull/59401))
+-   Interactivity API Docs: Add initial version of getContext and getElement. ([59293](https://github.com/WordPress/gutenberg/pull/59293))
+-   Interactivity API Docs: Add server functions documentation. ([59373](https://github.com/WordPress/gutenberg/pull/59373))
+-   Interactivity API Docs: Add withScope description. ([59542](https://github.com/WordPress/gutenberg/pull/59542))
+-   Interactivity API Docs: Fix code not closing. ([59395](https://github.com/WordPress/gutenberg/pull/59395))
+-   Interactivity API Docs: Update image with WordPress Make Core source. ([59281](https://github.com/WordPress/gutenberg/pull/59281))
+-   Interactivity API Docs: Merge Interactivity documentation to keep consistency with other packages. ([59270](https://github.com/WordPress/gutenberg/pull/59270))
+-   Fix comma in `block-registration.md`. ([57248](https://github.com/WordPress/gutenberg/pull/57248))
+-   Update Gutenberg versions in WP for 6.5. ([59446](https://github.com/WordPress/gutenberg/pull/59446))
+-   `theme.json` schema: Fix `styles.background` definition. ([59595](https://github.com/WordPress/gutenberg/pull/59595))
+-   `theme.json` schema: Update `appearanceTools` description. ([59499](https://github.com/WordPress/gutenberg/pull/59499))
+
+### Code Quality
+
+-   Add `@global` to PHP doc comments. ([59522](https://github.com/WordPress/gutenberg/pull/59522) and [59287](https://github.com/WordPress/gutenberg/pull/59287))
+-   ESLint: Enable `react/jsx-boolean-value` for the Gutenberg codebase and fix. ([59557](https://github.com/WordPress/gutenberg/pull/59557))
+-   Editor: Remove MoreDropdownMenuComponent. ([59096](https://github.com/WordPress/gutenberg/pull/59096))
+-   Interface: Remove unused MoreMenuFeatureToggle component. ([59095](https://github.com/WordPress/gutenberg/pull/59095))
+-   Remove old templates list code. ([59558](https://github.com/WordPress/gutenberg/pull/59558))
+-   Replace Navigator isSmall prop. ([59304](https://github.com/WordPress/gutenberg/pull/59304))
+-   Theme JSON Tests: Refactor base styles to a static variable. ([58975](https://github.com/WordPress/gutenberg/pull/58975))
+-   Update: Simplify code and use capture events instead of pointer-events hack. ([59565](https://github.com/WordPress/gutenberg/pull/59565))
+-   l10n: Unify terminology to `screen size`. ([59456](https://github.com/WordPress/gutenberg/pull/59456))
+
+#### Block Library
+
+-   BlockPopover: Remove **unstableCoverTarget and **unstableRefreshSize in favour of BlockPopoverCover. ([59228](https://github.com/WordPress/gutenberg/pull/59228))
+-   Blocks: Refactor deletion warnings dialog. ([58952](https://github.com/WordPress/gutenberg/pull/58952))
+-   Navigation Block: Remove unnecessary `@param` annotation. ([59559](https://github.com/WordPress/gutenberg/pull/59559))
+-   Site Title Block: Rename and move `edit` file. ([56357](https://github.com/WordPress/gutenberg/pull/56357))
+
+#### Font Library
+
+-   Replace deprecated `isSmall` prop with `size="small"` prop. ([59530](https://github.com/WordPress/gutenberg/pull/59530))
+-   Update font collection JSON schema to accommodate the changes made in `wp_register_font_collection`. ([59314](https://github.com/WordPress/gutenberg/pull/59314))
+-   Use NavigatorProvider in Font Library Modal. ([59036](https://github.com/WordPress/gutenberg/pull/59036))
+
+#### Components
+
+-   CustomSelectControlV2: Remove legacy adapter layer. ([59420](https://github.com/WordPress/gutenberg/pull/59420))
+-   Remove unused `useLatestRef()` hook. ([59471](https://github.com/WordPress/gutenberg/pull/59471))
+-   SnackbarList, Snackbar: Add unit test. ([59157](https://github.com/WordPress/gutenberg/pull/59157))
+
+#### Global Styles
+
+-   Create a style preview component. ([59498](https://github.com/WordPress/gutenberg/pull/59498))
+-   Global styles variations: Refactor directory structure. ([59491](https://github.com/WordPress/gutenberg/pull/59491))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs in `DocumentOutline`. ([59209](https://github.com/WordPress/gutenberg/pull/59209))
+-   EditorInitialization: Fix ESLint warnings for internal hooks. ([59118](https://github.com/WordPress/gutenberg/pull/59118))
+
+#### Block Editor
+
+-   getDirectInsertBlock: Remove 'directInsert' as a callback handler. ([59172](https://github.com/WordPress/gutenberg/pull/59172))
+-   mergeBlocks: Remove unused MERGE_BLOCKS action. ([59125](https://github.com/WordPress/gutenberg/pull/59125))
+
+#### Typography
+
+-   Remove Gutenberg font face tests. ([59402](https://github.com/WordPress/gutenberg/pull/59402))
+
+#### Site Editor
+
+-   Global styles: Rename typography elements file. ([59355](https://github.com/WordPress/gutenberg/pull/59355))
+
+#### Synced Patterns
+
+-   Remove unneeded pattern overrides translation strings. ([59269](https://github.com/WordPress/gutenberg/pull/59269))
+
+#### Navigation Menus
+
+-   Revert removal of Nav fallback auto embed. ([59220](https://github.com/WordPress/gutenberg/pull/59220))
+
+### Tools
+
+#### Testing
+
+-   Add a fixture for the `wp/block` pattern block current version with overrides. ([59492](https://github.com/WordPress/gutenberg/pull/59492))
+-   E2E: Refactor `setup` method to support class inheritance in `RequestUtils`. ([59362](https://github.com/WordPress/gutenberg/pull/59362))
+-   Migrate 'autosave' end-to-end tests to Playwright. ([58171](https://github.com/WordPress/gutenberg/pull/58171))
+-   Playwright: Pass the payload to createPost in data instead of query params to avoid URI too long errors. ([59463](https://github.com/WordPress/gutenberg/pull/59463))
+-   Restore patterns end-to-end tests. ([59024](https://github.com/WordPress/gutenberg/pull/59024))
+-   Rich text: Run end-to-end tests in Firefox and Webkit. ([56030](https://github.com/WordPress/gutenberg/pull/56030))
+-   Writing flow: Add multi select end-to-end test for firefox and webkit. ([53513](https://github.com/WordPress/gutenberg/pull/53513))
+
+#### Build Tooling
+
+-   Project: Update the '.git-blame-ignore-revs' list. ([59615](https://github.com/WordPress/gutenberg/pull/59615))
+
+### Security
+
+#### Custom Fields
+
+-   Block Bindings: Don't show protected fields that are bound to blocks. ([59326](https://github.com/WordPress/gutenberg/pull/59326))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @huzaifaalmesbah: Docs: Fix typo in Tutorial. ([59581](https://github.com/WordPress/gutenberg/pull/59581))
+-   @mattgrshaw: Editor: Fix post type check in isEditingTemplate selector. ([59105](https://github.com/WordPress/gutenberg/pull/59105))
+-   @shail-mehta: Add `@global` to PHP doc comments. ([59287](https://github.com/WordPress/gutenberg/pull/59287))
+-   @TeresaGobble: Docs: Fix typo in blocks attributes guide. ([59571](https://github.com/WordPress/gutenberg/pull/59571))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @ajlende @alanjacobmathew @andrewserong @annezazu @arthur791004 @bacoords @c4rl0sbr4v0 @carolinan @chad1008 @creativecoder @DAreRodz @dcalhoun @desrosj @draganescu @ellatrix @fluiddot @getdave @glendaviesnz @huzaifaalmesbah @inc2734 @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @kevin940726 @madhusudhand @Mamaduka @matiasbenedetto @mattgrshaw @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @pbking @peterwilsoncc @ramonjd @retrofox @samueljseay @SantosGuillamot @scruffian @shail-mehta @SiobhyB @sirreal @sunil25393 @t-hamano @talldan @tellthemachines @TeresaGobble @torounit @tyxla @WunderBart @youknowriad
+
+= 17.8.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Colors
+
+-   Elements: Merge element style and classname generation to single filter. ([59535](https://github.com/WordPress/gutenberg/pull/59535))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw
+
+= 17.8.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Colors
+
+-   Generate element classnames from element-specific data. ([59533](https://github.com/WordPress/gutenberg/pull/59533))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@tellthemachines
+
+= 17.8.0 =
+
+## Changelog
+
+### Features
+
+-   Patterns: add bulk export patterns action. ([58897](https://github.com/WordPress/gutenberg/pull/58897))
+-   Template editor/inspector: show and select related patterns. ([55091](https://github.com/WordPress/gutenberg/pull/55091))
+
+#### Layout
+
+-   Add toggle for grid types and stabilise Grid block variation. ([59051](https://github.com/WordPress/gutenberg/pull/59051) and [59116](https://github.com/WordPress/gutenberg/pull/59116))
+-   Add support for column and row span in grid children. ([58539](https://github.com/WordPress/gutenberg/pull/58539))
+
+### Enhancements
+
+-   Patterns Page: Make category action button compact. ([59203](https://github.com/WordPress/gutenberg/pull/59203))
+-   Block Editor: Use hooks instead of HoC in 'SkipToSelectedBlock'. ([59202](https://github.com/WordPress/gutenberg/pull/59202))
+-   Font Library: Adds the ability to use generic() in font family names. ([59103](https://github.com/WordPress/gutenberg/pull/59103) and [59037](https://github.com/WordPress/gutenberg/pull/59037))
+-   REST API Global Styles Revisions Controller: Return single revision only when it matches the parent id. ([59049](https://github.com/WordPress/gutenberg/pull/59049))
+-   CSS & Styling: Tweak link focus outline styles in HTML anchor and custom CSS. ([59048](https://github.com/WordPress/gutenberg/pull/59048))
+-   Data Views: Make 'All pages' view label consistent with template and patterns. ([59009](https://github.com/WordPress/gutenberg/pull/59009))
+-   Script Modules API: Script Modules add deregister option. ([58830](https://github.com/WordPress/gutenberg/pull/58830))
+-   Block Hooks: Add help text to Plugins panel. ([59371](https://github.com/WordPress/gutenberg/pull/59371))
+
+#### Custom Fields
+
+-   Block Bindings: Lock editing of blocks by default. ([58787](https://github.com/WordPress/gutenberg/pull/58787))
+-   Style engine: Rename at_rule to rules_groups and update test/docs. ([58922](https://github.com/WordPress/gutenberg/pull/58922))
+
+#### Block Library
+
+-   Gallery: Set the 'defaultBlock' setting for inner blocks. ([59168](https://github.com/WordPress/gutenberg/pull/59168))
+-   Remove the navigation edit button because it leads to a useless screen. ([59211](https://github.com/WordPress/gutenberg/pull/59211))
+-   Set the 'defaultBlock' setting for Columns & List blocks. ([59196](https://github.com/WordPress/gutenberg/pull/59196))
+-   Update: Increase footnotes meta priority and separate footnotes meta registration. ([58882](https://github.com/WordPress/gutenberg/pull/58882))
+
+#### Site Editor
+
+-   Editor: Hide template part and post content blocks in some site editor contexts. ([58928](https://github.com/WordPress/gutenberg/pull/58928))
+-   Tweak save hub button. ([58917](https://github.com/WordPress/gutenberg/pull/58917) and [59200](https://github.com/WordPress/gutenberg/pull/59200))
+
+#### Components
+
+-   CustomSelect: Adapt component for legacy props. ([57902](https://github.com/WordPress/gutenberg/pull/57902))
+-   Use `Element.scrollIntoView()` instead of `dom-scroll-into-view`. ([59085](https://github.com/WordPress/gutenberg/pull/59085))
+
+#### Global Styles
+
+-   Global style changes: Refactor output for a more flexible UI and grouping. ([59055](https://github.com/WordPress/gutenberg/pull/59055))
+-   Style theme variations: Add property extraction and merge utils. ([58803](https://github.com/WordPress/gutenberg/pull/58803))
+
+### Bug Fixes
+
+-   Distraction Free Mode: fix ui toggling bugs. ([59061](https://github.com/WordPress/gutenberg/pull/59061))
+-   Layout: Refactor responsive logic for grid column spans. ([59057](https://github.com/WordPress/gutenberg/pull/59057))
+-   Interactivity API: Only add proxies to plain objects inside the store. ([59039](https://github.com/WordPress/gutenberg/pull/59039))
+-   Cover Block: Restore overflow: Clip rule to allow border radius again. ([59388](https://github.com/WordPress/gutenberg/pull/59388))
+
+#### List View
+
+-   Editor: Do not open list view by default on mobile. ([59016](https://github.com/WordPress/gutenberg/pull/59016))
+-   Create Block: Add missing `viewScriptModule` field. ([59140](https://github.com/WordPress/gutenberg/pull/59140))
+-   Ignore the 'twentytwentyfour' test theme dir created by wp-env. ([59072](https://github.com/WordPress/gutenberg/pull/59072))
+-   useEntityBlockEditor: Update 'content' type check. ([59058](https://github.com/WordPress/gutenberg/pull/59058))
+
+#### Block Library
+
+-   Author, Author Bio, Author Name: Add a fallback for Author Archive Template. ([55451](https://github.com/WordPress/gutenberg/pull/55451))
+-   Fix Spacer orientation when inside a block with default flex layout. ([58921](https://github.com/WordPress/gutenberg/pull/58921))
+-   Fix WP 6.4/6.3 compat for navigation link variations. ([59126](https://github.com/WordPress/gutenberg/pull/59126))
+-   Interactivity API: Fix server side rendering for Search block. ([59029](https://github.com/WordPress/gutenberg/pull/59029))
+-   Navigation: Avoid using embedded record from fallback API. ([59076](https://github.com/WordPress/gutenberg/pull/59076))
+-   Pagination Numbers: Add `data-wp-key` to pagination numbers if enhanced pagination is enabled. ([58189](https://github.com/WordPress/gutenberg/pull/58189))
+-   Revert "Navigation: Refactor mobile overlay breakpoints to JS (#57520)". ([59149](https://github.com/WordPress/gutenberg/pull/59149))
+-   Spacer block: Fix `null` label in tooltip when horizontal layout. ([58909](https://github.com/WordPress/gutenberg/pull/58909))
+
+#### Data Views
+
+-   DataViews: Add loading/no results message in grid view. ([59002](https://github.com/WordPress/gutenberg/pull/59002))
+-   DataViews: Correctly display featured image that don't have image sizes. ([59111](https://github.com/WordPress/gutenberg/pull/59111))
+-   DataViews: Fix pages list back path. ([59201](https://github.com/WordPress/gutenberg/pull/59201))
+-   DataViews: Fix patterns, templates and template parts pagination `z-index`. ([58965](https://github.com/WordPress/gutenberg/pull/58965))
+-   DataViews: Fix storybook. ([58842](https://github.com/WordPress/gutenberg/pull/58842))
+-   DataViews: Remove second `reset filter` button in filter dialog. ([58960](https://github.com/WordPress/gutenberg/pull/58960))
+-   Revert footer in pages list with DataViews. ([59151](https://github.com/WordPress/gutenberg/pull/59151))
+
+#### Block Hooks
+
+-   Fix in Navigation block. ([59021](https://github.com/WordPress/gutenberg/pull/59021))
+-   Take controlled blocks into account for toggle state. ([59367](https://github.com/WordPress/gutenberg/pull/59367))
+
+#### Block Editor
+
+-   After Enter transform, skip other onEnter actions like splitting. ([59064](https://github.com/WordPress/gutenberg/pull/59064))
+-   Close link preview if collapsed selection when creating link. ([58896](https://github.com/WordPress/gutenberg/pull/58896))
+-   Editor: Limit spotlight mode to the editor. ([58817](https://github.com/WordPress/gutenberg/pull/58817))
+-   Fix incorrect useAnchor positioning when switching from virtual to rich text elements. ([58900](https://github.com/WordPress/gutenberg/pull/58900))
+-   Inserter: Don't select the closest block with 'disabled' editing mode. ([58971](https://github.com/WordPress/gutenberg/pull/58971))
+-   Inserter: Fix title condition for media tab previews. ([58993](https://github.com/WordPress/gutenberg/pull/58993))
+
+#### Site Editor
+
+-   Fix navigation on mobile web. ([59014](https://github.com/WordPress/gutenberg/pull/59014))
+-   Fix: Don't render the Transform Into panel if there are no patterns. ([59217](https://github.com/WordPress/gutenberg/pull/59217))
+-   Fix: Logical error in filterPatterns on template-panel/hooks.js. ([59218](https://github.com/WordPress/gutenberg/pull/59218))
+-   Make command palette string transatables. ([59133](https://github.com/WordPress/gutenberg/pull/59133))
+-   Remove left margin on Status help text. ([58775](https://github.com/WordPress/gutenberg/pull/58775))
+
+#### Patterns
+
+-   Allow editing of image block alt and title attributes in content only mode. ([58998](https://github.com/WordPress/gutenberg/pull/58998))
+-   Avoid showing block removal warning when deleting a pattern instance that has overrides. ([59044](https://github.com/WordPress/gutenberg/pull/59044))
+-   Block editor: Pass patterns selector as setting. ([58661](https://github.com/WordPress/gutenberg/pull/58661))
+-   Fix pattern categories on import. ([58926](https://github.com/WordPress/gutenberg/pull/58926))
+-   Site editor: Fix start patterns store selector. ([58813](https://github.com/WordPress/gutenberg/pull/58813))
+
+#### Global Styles
+
+-   Fix console error in block preview. ([59112](https://github.com/WordPress/gutenberg/pull/59112))
+-   Revert "Use all the settings origins for a block that consumes paths with merge #55219" ([58951](https://github.com/WordPress/gutenberg/pull/58951) and [59101](https://github.com/WordPress/gutenberg/pull/59101))
+-   Shadows: Don't assume that core provides default shadows. ([58973](https://github.com/WordPress/gutenberg/pull/58973))
+
+#### Font Library
+
+-   Fixes installed font families not rendering in the editor or frontend. ([59019](https://github.com/WordPress/gutenberg/pull/59019))
+-   Font Library: Add missing translation functions. ([58104](https://github.com/WordPress/gutenberg/pull/58104))
+-   Show error message when no fonts found to install. ([58914](https://github.com/WordPress/gutenberg/pull/58914))
+-   Font Library: Create post types on init hook. ([59333](https://github.com/WordPress/gutenberg/pull/59333))
+
+#### Synced Patterns
+
+-   Fix missing source for binding attributes. ([59194](https://github.com/WordPress/gutenberg/pull/59194))
+-   Fix resetting individual blocks to empty optional values for Pattern Overrides. ([59170](https://github.com/WordPress/gutenberg/pull/59170))
+-   Fix upload button on overridden empty image block in patterns. ([59169](https://github.com/WordPress/gutenberg/pull/59169))
+
+#### Design Tools
+
+-   Background image support: Fix issue with background position keyboard entry. ([59050](https://github.com/WordPress/gutenberg/pull/59050))
+-   Cover block: Clear the min height field when aspect ratio is set. ([59191](https://github.com/WordPress/gutenberg/pull/59191))
+-   Elements: Fix block instance element styles for links applying to buttons. ([59114](https://github.com/WordPress/gutenberg/pull/59114))
+
+#### Components
+
+-   Modal: Add `box-sizing` reset style. ([58905](https://github.com/WordPress/gutenberg/pull/58905))
+-   ToolbarButton: Fix text centering for short labels. ([59117](https://github.com/WordPress/gutenberg/pull/59117))
+-   Upgrade Floating UI packages, fix nested iframe positioning bug. ([58932](https://github.com/WordPress/gutenberg/pull/58932))
+
+#### Post Editor
+
+-   Editor: Fix 'useHideBlocksFromInserter' hook filename. ([59150](https://github.com/WordPress/gutenberg/pull/59150))
+-   Fix layout for non viewable post types. ([58962](https://github.com/WordPress/gutenberg/pull/58962))
+
+#### Rich Text
+
+-   Fix link paste for internal paste. ([59063](https://github.com/WordPress/gutenberg/pull/59063))
+-   Revert "Rich text: Pad multiple spaces through en/em replacement". ([58792](https://github.com/WordPress/gutenberg/pull/58792))
+
+#### Custom Fields
+
+-   Block Bindings: Add block context needed for bindings in PHP. ([58554](https://github.com/WordPress/gutenberg/pull/58554))
+-   Block Bindings: Fix disable bindings editing when source is undefined. ([58961](https://github.com/WordPress/gutenberg/pull/58961))
+
+### Accessibility
+
+-   Enter editing mode via Enter or Spacebar. ([58795](https://github.com/WordPress/gutenberg/pull/58795))
+-   Block Bindings > Image Block:Mark connected controls as 'readonly'. ([59059](https://github.com/WordPress/gutenberg/pull/59059))
+-   Details Block: Try double enter to escape inner blocks. ([58903](https://github.com/WordPress/gutenberg/pull/58903))
+-   Font Library: Replace infinite scroll by pagination. ([58794](https://github.com/WordPress/gutenberg/pull/58794))
+-   Global Styles: Remove menubar role and improve complementary area header semantics. ([58740](https://github.com/WordPress/gutenberg/pull/58740))
+
+#### Block Editor
+
+-   Block Mover: Unify visual separator when show button label is on. ([59158](https://github.com/WordPress/gutenberg/pull/59158))
+-   Make the custom CSS validation error message accessible. ([56690](https://github.com/WordPress/gutenberg/pull/56690))
+-   Restore default border and focus style on image URL input field. ([58505](https://github.com/WordPress/gutenberg/pull/58505))
+
+### Performance
+
+-   Pattern Block: Batch replacing actions. ([59075](https://github.com/WordPress/gutenberg/pull/59075))
+-   Block Editor: Move StopEditingAsBlocksOnOutsideSelect to Root. ([58412](https://github.com/WordPress/gutenberg/pull/58412))
+
+### Documentation
+
+-   Add contributing guidlines around Component versioning. ([58789](https://github.com/WordPress/gutenberg/pull/58789))
+-   Clarify the performance reference commit and how to pick it. ([58927](https://github.com/WordPress/gutenberg/pull/58927))
+-   DataViews: Update documentation. ([58847](https://github.com/WordPress/gutenberg/pull/58847))
+-   Docs: Clarify the status of the wp-block-styles theme support, and its intent. ([58915](https://github.com/WordPress/gutenberg/pull/58915))
+-   Fix move interactivity schema to supports property instead of selectors property. ([59166](https://github.com/WordPress/gutenberg/pull/59166))
+-   Storybook: Show badges in sidebar. ([58518](https://github.com/WordPress/gutenberg/pull/58518))
+-   Theme docs: Update appearance-tools documentation to reflect opt-in for backgroundSize and aspectRatio. ([59165](https://github.com/WordPress/gutenberg/pull/59165))
+-   Update richtext.md. ([59089](https://github.com/WordPress/gutenberg/pull/59089))
+
+#### Interactivity API
+
+-   Interactivity API: Fix WP version, update new store documentation. ([59107](https://github.com/WordPress/gutenberg/pull/59107))
+-   Interactivity API: Update documentation guide with new `wp-interactivity` directive implementation. ([59018](https://github.com/WordPress/gutenberg/pull/59018))
+-   Add interactivity property to block supports reference documentation. ([59152](https://github.com/WordPress/gutenberg/pull/59152))
+
+#### Schemas
+
+-   Block JSON schema: Add `viewScriptModule` field. ([59060](https://github.com/WordPress/gutenberg/pull/59060))
+-   Block JSON schema: Update `shadow` definition. ([58910](https://github.com/WordPress/gutenberg/pull/58910))
+-   JSON schema: Update schema for background support. ([59127](https://github.com/WordPress/gutenberg/pull/59127))
+
+### Code Quality
+
+-   Create Block: Remove deprecated viewModule field. ([59198](https://github.com/WordPress/gutenberg/pull/59198))
+-   Editor: Remove the 'all' rendering mode. ([58935](https://github.com/WordPress/gutenberg/pull/58935))
+-   Editor: Unify the editor commands between post and site editors. ([59005](https://github.com/WordPress/gutenberg/pull/59005))
+-   Relocate 'ErrorBoundary' component unit test folders. ([59031](https://github.com/WordPress/gutenberg/pull/59031))
+-   Remove obsolete wp-env configuration from package.json (#58877). ([58899](https://github.com/WordPress/gutenberg/pull/58899))
+-   Design Tools > Elements: Make editor selector match theme.json and frontend. ([59167](https://github.com/WordPress/gutenberg/pull/59167))
+-   Global Styles: Update sprintf calls using `_n`. ([59160](https://github.com/WordPress/gutenberg/pull/59160))
+-   Block API: Revert "Block Hooks: Set ignoredHookedBlocks metada attr upon insertion". ([58969](https://github.com/WordPress/gutenberg/pull/58969))
+-   Editor > Rich Text: Remove inline toolbar preference. ([58945](https://github.com/WordPress/gutenberg/pull/58945))
+-   Style Variations: Remove preferred style variations legacy support. ([58930](https://github.com/WordPress/gutenberg/pull/58930))
+-   REST API > Template Revisions: Move from experimental to compat/6.4. ([58920](https://github.com/WordPress/gutenberg/pull/58920))
+
+#### Block Editor
+
+-   Block-editor: Auto-register block commands. ([59079](https://github.com/WordPress/gutenberg/pull/59079))
+-   BlockSettingsMenu: Combine 'block-editor' store selectors. ([59153](https://github.com/WordPress/gutenberg/pull/59153))
+-   Clean up link control CSS. ([58934](https://github.com/WordPress/gutenberg/pull/58934))
+-   HeadingLevelDropdown: Remove unnecessary isPressed prop. ([56636](https://github.com/WordPress/gutenberg/pull/56636))
+-   Move 'ParentSelectorMenuItem' into a separate file. ([59146](https://github.com/WordPress/gutenberg/pull/59146))
+-   Remove 'BlockSettingsMenu' styles. ([59147](https://github.com/WordPress/gutenberg/pull/59147))
+
+#### Components
+
+-   Add Higher Order Function to ignore Input Method Editor (IME) keydowns. ([59081](https://github.com/WordPress/gutenberg/pull/59081))
+-   Add lint rules for theme color CSS var usage. ([59022](https://github.com/WordPress/gutenberg/pull/59022))
+-   ColorPicker: Style without accessing InputControl internals. ([59069](https://github.com/WordPress/gutenberg/pull/59069))
+-   CustomSelectControl (v1 & v2): Fix errors in unit test setup. ([59038](https://github.com/WordPress/gutenberg/pull/59038))
+-   CustomSelectControl: Hard deprecate constrained width. ([58974](https://github.com/WordPress/gutenberg/pull/58974))
+
+#### Post Editor
+
+-   DocumentBar: Fix browser warning error. ([59193](https://github.com/WordPress/gutenberg/pull/59193))
+-   DocumentBar: Simplify component, use framer for animation. ([58656](https://github.com/WordPress/gutenberg/pull/58656))
+-   Editor: Remove unused selector value from 'PostTitle'. ([59204](https://github.com/WordPress/gutenberg/pull/59204))
+-   Editor: Unify Mode Switcher component between post and site editor. ([59100](https://github.com/WordPress/gutenberg/pull/59100))
+
+#### Interactivity API
+
+-   Refactor to use string instead of an object on `wp-data-interactive`. ([59034](https://github.com/WordPress/gutenberg/pull/59034))
+-   Remove `data-wp-interactive` object for core/router. ([59030](https://github.com/WordPress/gutenberg/pull/59030))
+-   Use `data_wp_context` helper in core blocks and remove `data-wp-interactive` object. ([58943](https://github.com/WordPress/gutenberg/pull/58943))
+
+#### Site Editor
+
+-   Add stylelint rule to prevent theme CSS vars outside of wp-components. ([59020](https://github.com/WordPress/gutenberg/pull/59020))
+-   Don't memoize the canvas container title. ([59000](https://github.com/WordPress/gutenberg/pull/59000))
+-   Remove old patterns list code and styles. ([58966](https://github.com/WordPress/gutenberg/pull/58966))
+
+### Tools
+
+-   Remove reference to CODE_OF_CONDUCT.md in documentation. ([59206](https://github.com/WordPress/gutenberg/pull/59206))
+-   Remove repository specific Code of Conduct. ([59027](https://github.com/WordPress/gutenberg/pull/59027))
+-   env: Fix mariadb version to LTS. ([59237](https://github.com/WordPress/gutenberg/pull/59237))
+
+#### Testing
+
+-   Components: Add sleep() before all Tab() to fix flaky tests. ([59012](https://github.com/WordPress/gutenberg/pull/59012))
+-   Components: Try fixing some flaky `Composite` and `Tabs` tests. ([58968](https://github.com/WordPress/gutenberg/pull/58968))
+-   Migrate `change-detection` to Playwright. ([58767](https://github.com/WordPress/gutenberg/pull/58767))
+-   Tabs: Fix flaky unit tests. ([58629](https://github.com/WordPress/gutenberg/pull/58629))
+-   Update test environment default theme versions to latest. ([58955](https://github.com/WordPress/gutenberg/pull/58955))
+-   Performance tests: Make site editor performance test backwards compatible. ([59266](https://github.com/WordPress/gutenberg/pull/59266))
+-   Performance tests: Update selectors in site editor pattern loading tests. ([59259](https://github.com/WordPress/gutenberg/pull/59259))
+-   Fix failing Dropdown Menu e2e tests. ([59356](https://github.com/WordPress/gutenberg/pull/59356))
+
+#### Build Tooling
+
+-   Add test:e2e:playwright:debug command to debug Playwright tests. ([58808](https://github.com/WordPress/gutenberg/pull/58808))
+-   Updating Storybook to v7.6.15 (latest). ([59074](https://github.com/WordPress/gutenberg/pull/59074))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @alexstine @andrewhayward @andrewserong @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @creativecoder @DAreRodz @derekblank @desrosj @draganescu @ellatrix @fabiankaegy @gaambo @glendaviesnz @jameskoster @janboddez @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanfra @kevin940726 @Mamaduka @MarieComet @matiasbenedetto @mirka @noisysocks @ntsekouras @oandregal @ockham @pbking @ramonjd @SantosGuillamot @scruffian @shreyash3087 @t-hamano @talldan @tellthemachines @tyxla @youknowriad
+
+= 17.7.0 =
+
+## Changelog
+
+### Enhancements
+
+-   Improve translators comments for wp.date.setSettings in compat file. ([58488](https://github.com/WordPress/gutenberg/pull/58488))
+-   Interactive Template: Use viewScriptModule. ([58211](https://github.com/WordPress/gutenberg/pull/58211))
+
+#### Components
+
+-   Adding `constrainTabbing` prop to `useDialog` hook. ([57962](https://github.com/WordPress/gutenberg/pull/57962))
+-   Allow limiting the number of maximum visible Snackbars. ([58559](https://github.com/WordPress/gutenberg/pull/58559))
+-   ConfirmDialog: Add `__next40pxDefaultSize` to buttons. ([58421](https://github.com/WordPress/gutenberg/pull/58421))
+-   Expand theming support in COLORS. ([58097](https://github.com/WordPress/gutenberg/pull/58097))
+-   FocalPointPicker: Apply modern styling. ([58459](https://github.com/WordPress/gutenberg/pull/58459))
+-   Implement Tabs in widget editor settings. ([57886](https://github.com/WordPress/gutenberg/pull/57886))
+-   Implement `Tabs` in site-editor settings. ([56959](https://github.com/WordPress/gutenberg/pull/56959))
+-   Implementing `useCompositeState` with Ariakit. ([57304](https://github.com/WordPress/gutenberg/pull/57304))
+-   InputBase: Add `isBorderless` prop. ([58750](https://github.com/WordPress/gutenberg/pull/58750))
+-   Replace `TabPanel` with `Tabs` in the editor Document Overview sidebar. ([57082](https://github.com/WordPress/gutenberg/pull/57082))
+-   SearchControl: Refactor to use InputControl internally. ([56524](https://github.com/WordPress/gutenberg/pull/56524))
+-   Show borders for disabled secondary buttons. ([58606](https://github.com/WordPress/gutenberg/pull/58606))
+
+#### Data Views
+
+-   Add outline to template preview in table layout. ([58738](https://github.com/WordPress/gutenberg/pull/58738))
+-   Add: Delete bulk action to patterns. ([58747](https://github.com/WordPress/gutenberg/pull/58747))
+-   Add: Selection and bulk actions to grid view. ([58144](https://github.com/WordPress/gutenberg/pull/58144))
+-   DataViews: Add primary filter API. ([58427](https://github.com/WordPress/gutenberg/pull/58427))
+-   DataViews: In patterns page, show sync status filter by default. ([58367](https://github.com/WordPress/gutenberg/pull/58367))
+-   DataViews: Redesign of filters. ([58569](https://github.com/WordPress/gutenberg/pull/58569))
+-   Remove min-width style on table cells. ([58204](https://github.com/WordPress/gutenberg/pull/58204))
+-   Update 'Rows per page' view option label to account for Grid layout. ([58457](https://github.com/WordPress/gutenberg/pull/58457))
+-   Update dataviews search input placeholder. ([58742](https://github.com/WordPress/gutenberg/pull/58742))
+-   Update spacing around title in grid layout. ([58739](https://github.com/WordPress/gutenberg/pull/58739))
+
+#### Interactivity API
+
+-   Add `block supports` for `clientNavigation` and `interactive` properties on `block.json` schema. ([58132](https://github.com/WordPress/gutenberg/pull/58132))
+-   Image block: Refactor and remove `data-wp-body`. ([58835](https://github.com/WordPress/gutenberg/pull/58835))
+-   Interactivity Router: Fix initial page cache. ([58496](https://github.com/WordPress/gutenberg/pull/58496))
+-   Interactivity Router: Move ARIA live region and loading bar to the Interactivity Router. ([58377](https://github.com/WordPress/gutenberg/pull/58377))
+-   Limit the exported APIs. ([58864](https://github.com/WordPress/gutenberg/pull/58864))
+-   Mark all core block stores as private. ([58722](https://github.com/WordPress/gutenberg/pull/58722))
+-   Server Directive Processor for `data-wp-each`. ([58498](https://github.com/WordPress/gutenberg/pull/58498))
+-   Support setting a namespace using a string in `data-wp-interactive`. ([58743](https://github.com/WordPress/gutenberg/pull/58743))
+-   Allow global configs for namespaces. ([58749](https://github.com/WordPress/gutenberg/pull/58749))
+
+#### Block Library
+
+-   Follow up on the Post navigation link taxonomy filters. ([57949](https://github.com/WordPress/gutenberg/pull/57949))
+-   Home Link: Render Home text if there is no attribute label present. ([58387](https://github.com/WordPress/gutenberg/pull/58387))
+-   Organize gallery controls. ([58407](https://github.com/WordPress/gutenberg/pull/58407))
+-   Pattern: Use the '\_\_experimentalLabel' method to get a title. ([58646](https://github.com/WordPress/gutenberg/pull/58646))
+-   Social Icons: Update Patreon icon. ([56951](https://github.com/WordPress/gutenberg/pull/56951))
+-   Try: Disable text selection for post content placeholder block. ([58169](https://github.com/WordPress/gutenberg/pull/58169))
+-   Update pattern block copy in light of pattern overrides. ([58231](https://github.com/WordPress/gutenberg/pull/58231))
+-   Add shadow support for column, columns and image. ([57982](https://github.com/WordPress/gutenberg/pull/57982))
+
+#### Global Styles
+
+-   Add style engine support for nested at-rules. ([58867](https://github.com/WordPress/gutenberg/pull/58867))
+-   Move Shadow controls to Border panel. ([58466](https://github.com/WordPress/gutenberg/pull/58466))
+-   Shadow: Update shadow support to allow explicit skipping of serialization. ([58306](https://github.com/WordPress/gutenberg/pull/58306))
+-   Try: Remove shadow preset overflow. ([58663](https://github.com/WordPress/gutenberg/pull/58663))
+-   Update return values from getGlobalStylesChanges(). ([58707](https://github.com/WordPress/gutenberg/pull/58707))
+-   Add support for transform and letter spacing controls in Global Styles > Typography > Elements. ([58142](https://github.com/WordPress/gutenberg/pull/58142))
+
+#### Block Editor
+
+-   Drag and drop: Allow dragging from inserter or desktop to template parts. ([58589](https://github.com/WordPress/gutenberg/pull/58589))
+-   Drag and drop: Allow dropping within template parts. ([58423](https://github.com/WordPress/gutenberg/pull/58423))
+-   Implement "Add block" UI for Nav block Link UI. ([57756](https://github.com/WordPress/gutenberg/pull/57756))
+-   Implementing new UX for invoking rich text Link UI. ([57986](https://github.com/WordPress/gutenberg/pull/57986))
+-   Remove open in new tab from link preview. ([58744](https://github.com/WordPress/gutenberg/pull/58744))
+-   Use consistent labels, remove additional settings, and copySmall icon LinkControl. ([58183](https://github.com/WordPress/gutenberg/pull/58183))
+
+#### Site Editor
+
+-   Apply 40px across summary panel. ([58730](https://github.com/WordPress/gutenberg/pull/58730))
+-   Apply custom scroll style to fixed header block toolbar. ([57444](https://github.com/WordPress/gutenberg/pull/57444))
+-   Improve SiteIcon display and transition. ([58472](https://github.com/WordPress/gutenberg/pull/58472))
+-   Only show 'Back' button when user came from an editor canvas. ([58710](https://github.com/WordPress/gutenberg/pull/58710))
+-   Update "focus mode" to consistently use the Document Bar's Back button. ([58528](https://github.com/WordPress/gutenberg/pull/58528))
+
+#### Patterns
+
+-   Add a confirmation dialog when a user tries to delete a synced pattern with overrides. ([58796](https://github.com/WordPress/gutenberg/pull/58796))
+-   Add the block name to the pattern content data. ([58715](https://github.com/WordPress/gutenberg/pull/58715))
+-   Flash editable block outlines instead of always showing them. ([58159](https://github.com/WordPress/gutenberg/pull/58159))
+
+#### Design Tools
+
+-   Background image support: Add background position controls. ([58592](https://github.com/WordPress/gutenberg/pull/58592))
+-   Tweak metrics and labels for background size controls. ([58854](https://github.com/WordPress/gutenberg/pull/58854))
+
+#### Post Editor
+
+-   Editor: Limit visible Snackbars from the consumers. ([58598](https://github.com/WordPress/gutenberg/pull/58598))
+-   Save entities panel: Update styles. ([58706](https://github.com/WordPress/gutenberg/pull/58706))
+
+#### Font Library
+
+-   Add sanitize from schema util. ([58571](https://github.com/WordPress/gutenberg/pull/58571))
+-   Font Collections: Update registration function signature and add caching. ([58363](https://github.com/WordPress/gutenberg/pull/58363))
+-   Font Library: Show 'Add fonts' button when there are no fonts installed. ([58580](https://github.com/WordPress/gutenberg/pull/58580))
+
+#### Inspector Controls
+
+-   Tweak FocalPointPicker inspector controls. ([58448](https://github.com/WordPress/gutenberg/pull/58448))
+-   Tweak Media & Text inspector controls. ([58447](https://github.com/WordPress/gutenberg/pull/58447))
+
+#### Custom Fields
+
+-   Block Bindings: Ensure to pass bound attributes. ([58844](https://github.com/WordPress/gutenberg/pull/58844))
+
+#### Commands
+
+-   Try debouncing search for post-type navigation. ([58810](https://github.com/WordPress/gutenberg/pull/58810))
+
+#### Document Settings
+
+-   Tweak revisions panel for improved scanning. ([58751](https://github.com/WordPress/gutenberg/pull/58751))
+
+#### Synced Patterns
+
+-   Support button's link settings for Pattern Overrides. ([58587](https://github.com/WordPress/gutenberg/pull/58587))
+
+#### Block API
+
+-   Block Hooks: Set ignoredHookedBlocks metada attr upon insertion. ([58553](https://github.com/WordPress/gutenberg/pull/58553))
+
+#### List View
+
+-   Add keyboard clipboard events for cut, copy, paste. ([57838](https://github.com/WordPress/gutenberg/pull/57838))
+
+### New APIs
+
+#### Block API
+
+-   Blocks: Add handling for block.json viewScriptModule. ([58731](https://github.com/WordPress/gutenberg/pull/58731))
+
+### Bug Fixes
+
+-   Core data: useEntityBlockEditor: Fix parsed blocks cache. ([58841](https://github.com/WordPress/gutenberg/pull/58841))
+-   Footnotes: Fix anchor order replacing. ([58791](https://github.com/WordPress/gutenberg/pull/58791))
+
+#### Block Editor
+
+-   Block Switcher: Use consistent labels. ([58240](https://github.com/WordPress/gutenberg/pull/58240))
+-   Don't move focus within the toolbar if it is already focused. ([58570](https://github.com/WordPress/gutenberg/pull/58570))
+-   Don't show Link preview when no selection. ([58771](https://github.com/WordPress/gutenberg/pull/58771))
+-   Fix Link UI popover anchor in rich text. ([58282](https://github.com/WordPress/gutenberg/pull/58282))
+-   Fix empty link preview after creating link from empty selection. ([58863](https://github.com/WordPress/gutenberg/pull/58863))
+-   Hide the 'Content' panel for locked blocks when there's no content. ([58259](https://github.com/WordPress/gutenberg/pull/58259))
+-   ImageURLInputUI: Fix focus loss when settings are changed. ([58647](https://github.com/WordPress/gutenberg/pull/58647))
+-   Link UI: Polish lightbox pieces. ([58666](https://github.com/WordPress/gutenberg/pull/58666))
+-   Media Replace Flow: Vertically align the URL. ([58621](https://github.com/WordPress/gutenberg/pull/58621))
+-   MediaReplaceFlow: Restore popover width. ([58597](https://github.com/WordPress/gutenberg/pull/58597))
+-   Rich Text: Only apply focus to elements, not selection. ([58745](https://github.com/WordPress/gutenberg/pull/58745))
+-   Rich text: Preserve white space should strip \r. ([58805](https://github.com/WordPress/gutenberg/pull/58805))
+-   Settings may be undefined. ([58658](https://github.com/WordPress/gutenberg/pull/58658))
+-   useOnBlockDrop: Fix the Gallery block check. ([58711](https://github.com/WordPress/gutenberg/pull/58711))
+
+#### Components
+
+-   Add a timezone offset value for display purposes. ([56682](https://github.com/WordPress/gutenberg/pull/56682))
+-   Fix Placeholder component padding when body text font size is changed. ([58323](https://github.com/WordPress/gutenberg/pull/58323))
+-   Fix URLPopover preview overflow. ([58741](https://github.com/WordPress/gutenberg/pull/58741))
+-   Fix the Snackbar auto-dismissal timers. ([58604](https://github.com/WordPress/gutenberg/pull/58604))
+-   Popover: Add `box-sizing` reset style. ([58871](https://github.com/WordPress/gutenberg/pull/58871))
+-   Set post editor sidebar tabs to manual activation. ([58041](https://github.com/WordPress/gutenberg/pull/58041))
+-   Tabs: Delay `activeId` updates until focus can be properly detected. ([58625](https://github.com/WordPress/gutenberg/pull/58625))
+-   Tabs: Fix infinite loop in useEffect. ([58861](https://github.com/WordPress/gutenberg/pull/58861))
+-   Tabs: Improve Controlled Mode Focus Handling. ([57696](https://github.com/WordPress/gutenberg/pull/57696))
+-   Try: Fix lightbox URL popover position. ([58600](https://github.com/WordPress/gutenberg/pull/58600))
+
+#### Block Library
+
+-   Fix [#54352](https://github.com/WordPress/gutenberg/issues/54352) prevents php 8.1 fatal when template parts are not found in non-debug environments. ([54354](https://github.com/WordPress/gutenberg/pull/54354))
+-   Fix Query pagination not working in template parts and patterns. ([58602](https://github.com/WordPress/gutenberg/pull/58602))
+-   Fix URL escaping for array parameters in Navigation links. ([58068](https://github.com/WordPress/gutenberg/pull/58068))
+-   Fix missing data in email submissions. ([55691](https://github.com/WordPress/gutenberg/pull/55691))
+-   Fix: Removing footnotes from the allowed blocks does not remove footnotes. ([58855](https://github.com/WordPress/gutenberg/pull/58855))
+-   Navigation Link: Use get_block_type_variations to register variations. ([58389](https://github.com/WordPress/gutenberg/pull/58389))
+-   Prevent usage of `gutenberg_url` in block-library. ([58242](https://github.com/WordPress/gutenberg/pull/58242))
+-   Template Part: Reflect name updates without saving changes. ([58644](https://github.com/WordPress/gutenberg/pull/58644))
+-   Try: Make gallery randomization work when nested. ([58733](https://github.com/WordPress/gutenberg/pull/58733))
+
+#### Data Views
+
+-   DataViews: Fix applied default layout props. ([58400](https://github.com/WordPress/gutenberg/pull/58400))
+-   DataViews: Fix nested buttons and placeholder text in list layout. ([58304](https://github.com/WordPress/gutenberg/pull/58304))
+-   DataViews: Fix some small issues with featured image. ([58371](https://github.com/WordPress/gutenberg/pull/58371))
+-   DataViews: Make it possible to toggle Author field in templates and template parts. ([58609](https://github.com/WordPress/gutenberg/pull/58609))
+-   DataViews: Remove test artifact (status filter was set as primary). ([58682](https://github.com/WordPress/gutenberg/pull/58682))
+-   DataViews: Use chips for filter summary. ([58816](https://github.com/WordPress/gutenberg/pull/58816))
+-   Fix double scrollbar in grid layout. ([58536](https://github.com/WordPress/gutenberg/pull/58536))
+-   Fix: Dataviews selection on patterns grid view. ([58726](https://github.com/WordPress/gutenberg/pull/58726))
+
+#### Site Editor
+
+-   Add context for the All translatable string and enforce l10n best practices. ([58196](https://github.com/WordPress/gutenberg/pull/58196))
+-   Break long URL in page sidebar. ([58763](https://github.com/WordPress/gutenberg/pull/58763))
+-   Editor: Fix block context defined for template parts. ([58807](https://github.com/WordPress/gutenberg/pull/58807))
+-   Fix line-height in block card. ([58246](https://github.com/WordPress/gutenberg/pull/58246))
+-   Hide export button if non-block-based theme. ([58346](https://github.com/WordPress/gutenberg/pull/58346))
+-   Mobile site editor header toolbar button bugfix. ([58852](https://github.com/WordPress/gutenberg/pull/58852))
+
+#### Post Editor
+
+-   Editor: Don't hide authors' Combobox if the current author is missing. ([58719](https://github.com/WordPress/gutenberg/pull/58719))
+-   Fix permalink input field text overflow ellipsis for Firefox. ([57310](https://github.com/WordPress/gutenberg/pull/57310))
+-   Fix the position and size of the Options menu,. ([57515](https://github.com/WordPress/gutenberg/pull/57515))
+-   Fix: Use old template panel if user doesn’t have access to view templates. ([58485](https://github.com/WordPress/gutenberg/pull/58485))
+-   Template editing: Update fullscreen WP back functionality. ([58534](https://github.com/WordPress/gutenberg/pull/58534))
+
+#### Interactivity API
+
+-   Add `supports.interactivity` to the Query block. ([58316](https://github.com/WordPress/gutenberg/pull/58316))
+-   Fix state intialization for asynchronous private stores. ([58754](https://github.com/WordPress/gutenberg/pull/58754))
+-   Remove non-default suffix data wp context processing. ([58664](https://github.com/WordPress/gutenberg/pull/58664))
+-   Use compat versions of HTML APIs. ([58846](https://github.com/WordPress/gutenberg/pull/58846))
+
+#### Global Styles
+
+-   Block Styles: Fix block style variation selector generation. ([58051](https://github.com/WordPress/gutenberg/pull/58051))
+-   Fix Global styles text settings bleeding into placeholder component. ([58303](https://github.com/WordPress/gutenberg/pull/58303))
+-   Global styles revisions: Fix is-selected rules from affecting other areas of the editor. ([58228](https://github.com/WordPress/gutenberg/pull/58228))
+-   Site Editor: Prevent classic theme from accessing global style menu. ([58345](https://github.com/WordPress/gutenberg/pull/58345))
+
+#### List View
+
+-   Fix error when switching between template preview modes. ([58533](https://github.com/WordPress/gutenberg/pull/58533))
+-   Navigation Submenu Block: Make block name affect list view. ([58296](https://github.com/WordPress/gutenberg/pull/58296))
+-   Template Part: Fix site editor error when loading with list view set to always display. ([58868](https://github.com/WordPress/gutenberg/pull/58868))
+
+#### Font Library
+
+-   Avoid mutating fontface data. ([58473](https://github.com/WordPress/gutenberg/pull/58473))
+-   Avoid running init functions when font library is available in core. ([58793](https://github.com/WordPress/gutenberg/pull/58793))
+-   Fix size of demo text. ([58849](https://github.com/WordPress/gutenberg/pull/58849))
+
+#### Typography
+
+-   Fix font library modal dialog translatable strings. ([58256](https://github.com/WordPress/gutenberg/pull/58256))
+-   Font Library: Change referenced tab name on Google Fonts confirmation dialog. ([58584](https://github.com/WordPress/gutenberg/pull/58584))
+-   Font size: Allow for custom font size handling. ([58422](https://github.com/WordPress/gutenberg/pull/58422))
+
+#### Script Modules API
+
+-   Add import map polyfill. ([58263](https://github.com/WordPress/gutenberg/pull/58263))
+-   Import Maps: Only emit CDATA wrappers for inline scripts for JavaScript. ([58818](https://github.com/WordPress/gutenberg/pull/58818))
+
+#### Extensibility
+
+-   Fix broken list markup in navigation block when 3rd party blocks are used as decendants of navigation block. ([55551](https://github.com/WordPress/gutenberg/pull/55551))
+-   Navigation block: Check Block Hooks API callback hasn't already been added. ([58772](https://github.com/WordPress/gutenberg/pull/58772))
+
+#### Synced Patterns
+
+-   Disable overriding links of images inside pattern instances. ([58660](https://github.com/WordPress/gutenberg/pull/58660))
+-   Fix nested pattern overrides and disable editing inner pattern. ([58541](https://github.com/WordPress/gutenberg/pull/58541))
+
+#### Inspector Controls
+
+-   Add missing PanelBody title for the columns block inspector. ([58452](https://github.com/WordPress/gutenberg/pull/58452))
+-   Add spacing between input controls with custom values. ([58410](https://github.com/WordPress/gutenberg/pull/58410))
+
+#### Custom Fields
+
+-   Block Bindings: Update bindings registry with latest changes. ([58843](https://github.com/WordPress/gutenberg/pull/58843))
+
+#### History
+
+-   Columns: Batch vertical alignment updates. ([58801](https://github.com/WordPress/gutenberg/pull/58801))
+
+#### Document Settings
+
+-   Editor: Ensure the current author is included in the dropdown. ([58716](https://github.com/WordPress/gutenberg/pull/58716))
+
+#### Rich Text
+
+-   Add aria-readonly attribute to Rich Text component. ([58687](https://github.com/WordPress/gutenberg/pull/58687))
+
+#### Navigation Menus
+
+-   Navigation: Update the fallback block list to avoid a PHP Warning. ([58588](https://github.com/WordPress/gutenberg/pull/58588))
+
+#### Patterns
+
+-   Update the bindings attribs of blocks added during experimental phase. ([58483](https://github.com/WordPress/gutenberg/pull/58483))
+
+#### Distraction Free
+
+-   Add default restoration of UI when exiting distraction free mode. ([58455](https://github.com/WordPress/gutenberg/pull/58455))
+
+### Accessibility
+
+-   Escape as Select/Edit mode Toggle. ([58637](https://github.com/WordPress/gutenberg/pull/58637))
+-   Global styles revisions: Update text color contrast. ([58340](https://github.com/WordPress/gutenberg/pull/58340))
+
+#### Components
+
+-   CustomSelect: Disable `virtualFocus` to fix issue for screenreaders. ([58585](https://github.com/WordPress/gutenberg/pull/58585))
+-   Font Library modal: Try to improve checkbox labelling. ([58339](https://github.com/WordPress/gutenberg/pull/58339))
+-   PaletteEdit: Fix palette item accessibility. ([58214](https://github.com/WordPress/gutenberg/pull/58214))
+
+#### Font Library
+
+-   Buttons position and accessibility. ([58212](https://github.com/WordPress/gutenberg/pull/58212))
+-   Fix focus loss when update/install button is pressed. ([58364](https://github.com/WordPress/gutenberg/pull/58364))
+-   Removed and elements from Font Library Modal. ([58221](https://github.com/WordPress/gutenberg/pull/58221))
+
+#### Block Library
+
+-   Fix image link preset suggestions arrow key navigation. ([58615](https://github.com/WordPress/gutenberg/pull/58615))
+
+#### CSS & Styling
+
+-   Font Library: Fix font preview vertical alignment and respect reduce motion preference. ([58451](https://github.com/WordPress/gutenberg/pull/58451))
+
+#### Widgets Editor
+
+-   Widget Editor: Don't disable the Save button. ([58365](https://github.com/WordPress/gutenberg/pull/58365))
+
+#### Typography
+
+-   Fix fonts modal dialog buttons accessibility. ([58309](https://github.com/WordPress/gutenberg/pull/58309))
+
+#### Commands
+
+-   Fix labeling of the command palette. ([56718](https://github.com/WordPress/gutenberg/pull/56718))
+
+### Performance
+
+-   Block editor: Optimise getGlobalBlockCount/getClientIdsWithDescendants. ([58356](https://github.com/WordPress/gutenberg/pull/58356))
+-   Block editor: Prevent isSubtreeDisabled call if not needed. ([58349](https://github.com/WordPress/gutenberg/pull/58349))
+-   Block editor: Reduce appender sync! subscriptions. ([58556](https://github.com/WordPress/gutenberg/pull/58556))
+-   Block editor: selectors: Avoid has() or double get() on Maps. ([58372](https://github.com/WordPress/gutenberg/pull/58372))
+-   Block preview: Prevent recalculating editor styles if additional styles is empty. ([58244](https://github.com/WordPress/gutenberg/pull/58244))
+-   Image block: Remove a block editor store sub. ([57232](https://github.com/WordPress/gutenberg/pull/57232))
+-   Inner blocks: Don't re-render list when controlled blocks change. ([58575](https://github.com/WordPress/gutenberg/pull/58575))
+-   InnerBlocks: Fix continuous re-rendering on inner blocks change. ([58348](https://github.com/WordPress/gutenberg/pull/58348))
+-   Navigation: Fix performance regression. ([58513](https://github.com/WordPress/gutenberg/pull/58513))
+-   Post template: Don't fetch taxonomies if not needed. ([58245](https://github.com/WordPress/gutenberg/pull/58245))
+-   Site editor: Add pattern/template load performance test with TT4. ([58734](https://github.com/WordPress/gutenberg/pull/58734))
+-   Site editor: Avoid double post content parse (alternative). ([58146](https://github.com/WordPress/gutenberg/pull/58146))
+-   Unmemoize Block component selectors. ([58355](https://github.com/WordPress/gutenberg/pull/58355))
+-   core-data: Memoize `getEntitiesConfig` selector. ([58393](https://github.com/WordPress/gutenberg/pull/58393))
+-   getBlockSettings: Avoid memoized selector with clientId. ([58405](https://github.com/WordPress/gutenberg/pull/58405))
+-   useSettings: Extract selector. ([58354](https://github.com/WordPress/gutenberg/pull/58354))
+
+#### Font Library
+
+-   Font Collections: Lazy load json configuration for better performance. ([58530](https://github.com/WordPress/gutenberg/pull/58530))
+
+#### List View
+
+-   Unmemo recursive getEnabledClientIdsTree. ([58525](https://github.com/WordPress/gutenberg/pull/58525))
+
+#### Block Editor
+
+-   Optimize the 'useBlockDisplayTitle' hook. ([58250](https://github.com/WordPress/gutenberg/pull/58250))
+
+#### Interactivity API
+
+-   Break up long hydration task in interactivity init. ([58227](https://github.com/WordPress/gutenberg/pull/58227))
+
+### Experiments
+
+#### Data Views
+
+-   Update styling details in list item layout. ([58397](https://github.com/WordPress/gutenberg/pull/58397))
+
+#### Synced Patterns
+
+-   Add a control per block to reset pattern overrides. ([57907](https://github.com/WordPress/gutenberg/pull/57907))
+
+### Documentation
+
+-   Add video embed documentation and grammar fixes in the Block Editor Handbook. ([58029](https://github.com/WordPress/gutenberg/pull/58029))
+-   Block API: Add `viewStyle` property support to `block.json`. ([55492](https://github.com/WordPress/gutenberg/pull/55492))
+-   CheckboxControl: Add custom label example to Storybook. ([58438](https://github.com/WordPress/gutenberg/pull/58438))
+-   Docs: Copy and formatting edits for the "Markup representation of a block" guide. ([58688](https://github.com/WordPress/gutenberg/pull/58688))
+-   Docs: Copy and formatting edits for the "Registration of a block" guide. ([58709](https://github.com/WordPress/gutenberg/pull/58709))
+-   Docs: Copy and formatting edits for the "Static or Dynamic rendering" guide. ([58681](https://github.com/WordPress/gutenberg/pull/58681))
+-   Docs: Copy and formatting edits for the "The block in the Editor" guide. ([58697](https://github.com/WordPress/gutenberg/pull/58697))
+-   Docs: Copy and formatting edits for the "The block wrapper" guide. ([58704](https://github.com/WordPress/gutenberg/pull/58704))
+-   Docs: Copy and formatting edits for the "Working with JavaScript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651))
+-   Docs: Copy and formatting edits for the "block.json" guide. ([58732](https://github.com/WordPress/gutenberg/pull/58732))
+-   Docs: Copy edits and list formatting for main Block Editor Handbook readme. ([58652](https://github.com/WordPress/gutenberg/pull/58652))
+-   Docs: Fix list formatting and some grammar in the Entities explanation doc. ([58655](https://github.com/WordPress/gutenberg/pull/58655))
+-   Docs: Fix list markup in the Fundamentals of Block Development section. ([58226](https://github.com/WordPress/gutenberg/pull/58226))
+-   Docs: Fix mistake in viewScriptModule documentation. ([58815](https://github.com/WordPress/gutenberg/pull/58815))
+-   Docs: Formatting and copy edits for the File structure of a block guide. ([58635](https://github.com/WordPress/gutenberg/pull/58635))
+-   Docs: Minor copy edits for the Block Development Environment page. ([58614](https://github.com/WordPress/gutenberg/pull/58614))
+-   Docs: Remove duplicate content and update links. ([58358](https://github.com/WordPress/gutenberg/pull/58358))
+-   Docs: Update link to the correct Fundamentals doc. ([58352](https://github.com/WordPress/gutenberg/pull/58352))
+-   Docs: Update list formatting and descriptions in the Fundamentals of Block Development doc. ([58630](https://github.com/WordPress/gutenberg/pull/58630))
+-   Docs: Update the Getting Started readme in the Block Editor Handbook. ([58624](https://github.com/WordPress/gutenberg/pull/58624))
+-   Reference Gutenberg in PHP documentation from main documentation. ([58453](https://github.com/WordPress/gutenberg/pull/58453))
+-   Removed extra parenthesis from document. ([58662](https://github.com/WordPress/gutenberg/pull/58662))
+-   Restructure the FAQs to work with the new TOC design in the Block Editor Handbook. ([58351](https://github.com/WordPress/gutenberg/pull/58351))
+-   Storybook: Add badges to private components. ([58123](https://github.com/WordPress/gutenberg/pull/58123))
+-   Update documentation to avoid recommending early return PHP "anti-pattern". ([58454](https://github.com/WordPress/gutenberg/pull/58454))
+-   Update to rename reusable blocks. ([58633](https://github.com/WordPress/gutenberg/pull/58633))
+-   Update versions-in-wordpress.md. ([58545](https://github.com/WordPress/gutenberg/pull/58545))
+-   fix: InnerBlocks schema description in block.json. ([58649](https://github.com/WordPress/gutenberg/pull/58649))
+
+### Code Quality
+
+-   Avoid running pattern overrides migration in WordPress core. ([58487](https://github.com/WordPress/gutenberg/pull/58487))
+-   Build: Add package build shebang and sync comments. ([58264](https://github.com/WordPress/gutenberg/pull/58264))
+-   Date: Merge 6.4 and 6.5 compat files. ([58479](https://github.com/WordPress/gutenberg/pull/58479))
+-   DefaultBlockAppender: Refactor to hooks. ([58809](https://github.com/WordPress/gutenberg/pull/58809))
+-   Docs: Clarify the non-contextual post types. ([58836](https://github.com/WordPress/gutenberg/pull/58836))
+-   Layout block supports use `str_contains`. ([58251](https://github.com/WordPress/gutenberg/pull/58251))
+-   Move Nav Link PHPUnit tests to blocks directory. ([58460](https://github.com/WordPress/gutenberg/pull/58460))
+
+#### Font Library
+
+-   Address feedback from wordpress-develop#6027. ([58691](https://github.com/WordPress/gutenberg/pull/58691))
+-   Fix font library unit tests nit-picks [round 2]. ([58612](https://github.com/WordPress/gutenberg/pull/58612))
+-   Font Collections: Standardizes docblock comments. ([58654](https://github.com/WordPress/gutenberg/pull/58654))
+-   Font Library Address Outstanding Feedback from WP 6.4 review. ([58675](https://github.com/WordPress/gutenberg/pull/58675))
+-   Move Fonts Library to compat dir for 6.5. ([58608](https://github.com/WordPress/gutenberg/pull/58608))
+-   Remove font family and font face preview keys from theme.json schema. ([58395](https://github.com/WordPress/gutenberg/pull/58395))
+-   Remove old and unused component and css. ([58449](https://github.com/WordPress/gutenberg/pull/58449))
+-   Remove slug from collection schema to accommodate the changes on the wp_register_font_collection function signature. ([58623](https://github.com/WordPress/gutenberg/pull/58623))
+-   Remove tests from classes that were already merged in core. ([58752](https://github.com/WordPress/gutenberg/pull/58752))
+-   Remove tests from font library rest controllers already merged into core. ([58778](https://github.com/WordPress/gutenberg/pull/58778))
+-   Return null if a font collection is not registered. ([58735](https://github.com/WordPress/gutenberg/pull/58735))
+-   Simplify font collection schema. ([58574](https://github.com/WordPress/gutenberg/pull/58574))
+-   Update Font Library REST API code to align with Core standards. ([58619](https://github.com/WordPress/gutenberg/pull/58619))
+-   Update Font Library non-REST API code to align with Core standards. ([58607](https://github.com/WordPress/gutenberg/pull/58607))
+-   Update font collection json schema. ([58413](https://github.com/WordPress/gutenberg/pull/58413))
+-   Update fonts collection data URL for Gutenberg 17.7. ([58746](https://github.com/WordPress/gutenberg/pull/58746))
+-   Use Button's API to disable footer buttons. ([58529](https://github.com/WordPress/gutenberg/pull/58529))
+-   [Font Library] Update PHPUnit tests per Core coding standards and practices. ([58502](https://github.com/WordPress/gutenberg/pull/58502))
+
+#### Components
+
+-   Add eslint rule for theme var regressions. ([58130](https://github.com/WordPress/gutenberg/pull/58130))
+-   Add stylelint rule for theme var regressions. ([58098](https://github.com/WordPress/gutenberg/pull/58098))
+-   AnglePickerControl: Hard deprecate bottom margin. ([58700](https://github.com/WordPress/gutenberg/pull/58700))
+-   CustomGradientPicker: Hard deprecate outer margins. ([58699](https://github.com/WordPress/gutenberg/pull/58699))
+-   FontSizePicker: Hard deprecate bottom margin. ([58702](https://github.com/WordPress/gutenberg/pull/58702))
+-   GradientPicker: Hard deprecate outer margins. ([58701](https://github.com/WordPress/gutenberg/pull/58701))
+-   Remove deprecation warnings for `__next36pxDefaultSize`. ([58703](https://github.com/WordPress/gutenberg/pull/58703))
+
+#### Block Library
+
+-   Interactivity API - Blocks: Move interactivity registration to render. ([58678](https://github.com/WordPress/gutenberg/pull/58678))
+-   Navigation: Move the Navigation block rendering tests to the blocks directory. ([58247](https://github.com/WordPress/gutenberg/pull/58247))
+-   Navigation: Remove use of Gutenberg_Navigation_Fallback class. ([58369](https://github.com/WordPress/gutenberg/pull/58369))
+-   Paragraph: Update comment block. ([58419](https://github.com/WordPress/gutenberg/pull/58419))
+-   Rename variation build methods. ([58538](https://github.com/WordPress/gutenberg/pull/58538))
+-   Template Part: Derive 'hasInnerBlocks' inside selector. ([58680](https://github.com/WordPress/gutenberg/pull/58680))
+
+#### Block Editor
+
+-   Block Switcher: Don't use the 'useBlockDisplayInformation' hook. ([58562](https://github.com/WordPress/gutenberg/pull/58562))
+-   BlockSelectionButton: Don't use the 'useBlockDisplayInformation' hook. ([58640](https://github.com/WordPress/gutenberg/pull/58640))
+-   Link Control: Simplify the sprintf. ([58831](https://github.com/WordPress/gutenberg/pull/58831))
+-   RichTextData: Use a private property. ([58557](https://github.com/WordPress/gutenberg/pull/58557))
+
+#### Post Editor
+
+-   Editor Settings: Rename the getPostLinkProps setting. ([58416](https://github.com/WordPress/gutenberg/pull/58416))
+-   Editor: Reuse data query in the post author components. ([58760](https://github.com/WordPress/gutenberg/pull/58760))
+-   Editor: Use hooks instead of HoCs in the post-taxonomies components. ([58446](https://github.com/WordPress/gutenberg/pull/58446))
+-   Fix: Refactor pre publish panel to use function component instead of class. ([58441](https://github.com/WordPress/gutenberg/pull/58441))
+
+#### Custom Fields
+
+-   Block Bindings: Remove unneeded 'setAttributes' override. ([58806](https://github.com/WordPress/gutenberg/pull/58806))
+
+#### Patterns
+
+-   Pattern overrides: Update overrides attribute data structure and rename it to `content`. ([58596](https://github.com/WordPress/gutenberg/pull/58596))
+
+### Tools
+
+-   Add BlockJsonDependenciesPlugin to modules build. ([57927](https://github.com/WordPress/gutenberg/pull/57927))
+-   DEWP: Fix script module import field. ([58770](https://github.com/WordPress/gutenberg/pull/58770))
+-   Introduce a Props Bot workflow. ([58576](https://github.com/WordPress/gutenberg/pull/58576))
+-   More refinements to Props Bot run conditions. ([58617](https://github.com/WordPress/gutenberg/pull/58617))
+-   Refine when Props Bot runs. ([58616](https://github.com/WordPress/gutenberg/pull/58616))
+-   Remove noahtallen from .wp-env codeowners. ([58283](https://github.com/WordPress/gutenberg/pull/58283))
+-   Scripts: Add viewScriptModule block.json support. ([58203](https://github.com/WordPress/gutenberg/pull/58203))
+
+#### Testing
+
+-   "Multiple use" block validation logic improvement [with Playwright]. ([57576](https://github.com/WordPress/gutenberg/pull/57576))
+-   Block Bindings: Add block bindings end-to-end tests. ([58550](https://github.com/WordPress/gutenberg/pull/58550))
+-   Block Bindings: Add tests for the frontend and polish the existing ones. ([58676](https://github.com/WordPress/gutenberg/pull/58676))
+-   Block Bindings: Improve the code of the block bindings tests. ([58785](https://github.com/WordPress/gutenberg/pull/58785))
+-   Button: Add focusable disabled variant to vizreg Storybook. ([58634](https://github.com/WordPress/gutenberg/pull/58634))
+-   CustomSelect: Add tests for new features. ([58583](https://github.com/WordPress/gutenberg/pull/58583))
+-   Fix flaky test of data-wp-on-window directive. ([58642](https://github.com/WordPress/gutenberg/pull/58642))
+-   Flaky Test: Fix "directives inside islands should not be hydrated twice". ([58516](https://github.com/WordPress/gutenberg/pull/58516))
+-   Interactivity API: Fix flaky test in `data-wp-on-document`. ([58668](https://github.com/WordPress/gutenberg/pull/58668))
+-   Migrate remaining 'inserting blocks' end-to-end tests to Playwright. ([58108](https://github.com/WordPress/gutenberg/pull/58108))
+-   Migrate remaining 'pattern block' end-to-end tests to Playwright. ([58486](https://github.com/WordPress/gutenberg/pull/58486))
+-   SearchControl: Add unit tests. ([58693](https://github.com/WordPress/gutenberg/pull/58693))
+-   Try fixing flaky 'inserting blocks' end-to-end tests. ([58848](https://github.com/WordPress/gutenberg/pull/58848))
+-   Try fixing flaky Paragraph block end-to-end test. ([58208](https://github.com/WordPress/gutenberg/pull/58208))
+-   Use toBeDisabled instead of aria-disabled check. ([58694](https://github.com/WordPress/gutenberg/pull/58694))
+-   e2e: Add a test to confirm that the focus moves from the post title to the paragraph using the enter key. ([58872](https://github.com/WordPress/gutenberg/pull/58872))
+-   end-to-end Utils: Ensure deleteAllUsers does not delete current user. ([58320](https://github.com/WordPress/gutenberg/pull/58320))
+
+#### Build Tooling
+
+-   Add missing Interactivity API label to changelog script. ([58879](https://github.com/WordPress/gutenberg/pull/58879))
+-   Enable dynamic import transform for React Native tests. ([58546](https://github.com/WordPress/gutenberg/pull/58546))
+-   Fix: Remove mention of weekly meeting from first-time contributor PR label. ([58547](https://github.com/WordPress/gutenberg/pull/58547))
+-   Interactivity API: Move Core implementation to compat 6.5 folder. ([58829](https://github.com/WordPress/gutenberg/pull/58829))
+-   Remove phpunit tests for features backported to Core. ([58776](https://github.com/WordPress/gutenberg/pull/58776))
+-   Update Performance tests base branch. ([58890](https://github.com/WordPress/gutenberg/pull/58890))
+-   Workflows: Add 'Technical Prototype' to the type-related labels list. ([58163](https://github.com/WordPress/gutenberg/pull/58163))
+
+### Security
+
+#### Font Library
+
+-   Sanitize font collection data. ([58636](https://github.com/WordPress/gutenberg/pull/58636))
+
+#### REST API
+
+-   Font Library REST API: Sanitize font family and font face settings. ([58590](https://github.com/WordPress/gutenberg/pull/58590))
+
+### Various
+
+-   Script loader 6.4 compat: Check for init hook completion. ([58406](https://github.com/WordPress/gutenberg/pull/58406))
+
+#### Font Library
+
+-   Code style and code quality feedback from core 6.5 review. ([58736](https://github.com/WordPress/gutenberg/pull/58736))
+-   Move getAllowedMimeTypes to FontUtils. ([58667](https://github.com/WordPress/gutenberg/pull/58667))
+-   Refactor as a singleton. ([58669](https://github.com/WordPress/gutenberg/pull/58669))
+
+#### Components
+
+-   Removing Reakit `Composite` implementation. ([58620](https://github.com/WordPress/gutenberg/pull/58620))
+-   Removing Reakit as a dependency. ([58631](https://github.com/WordPress/gutenberg/pull/58631))
+-   Update the Snackbar warning message. ([58591](https://github.com/WordPress/gutenberg/pull/58591))
+
+#### Global Styles
+
+-   Always output core block global styles after base global styles. ([58761](https://github.com/WordPress/gutenberg/pull/58761))
+-   Backport theme.json tests from Core. ([58476](https://github.com/WordPress/gutenberg/pull/58476))
+
+#### Block Library
+
+-   Reduce label and fix capitalization for image block upload label. ([58677](https://github.com/WordPress/gutenberg/pull/58677))
+-   Separator: Remove border-bottom property. ([55725](https://github.com/WordPress/gutenberg/pull/55725))
+
+#### Patterns
+
+-   Update pattern copy to Synced instead of Fully Synced. ([58876](https://github.com/WordPress/gutenberg/pull/58876))
+
+#### Block API
+
+-   ViewScriptModule: 6.5 compatibility changes. ([58832](https://github.com/WordPress/gutenberg/pull/58832))
+
+#### Custom Fields
+
+-   Block Bindings: Backport block bindings refactor from WordPress core. ([58683](https://github.com/WordPress/gutenberg/pull/58683))
+
+#### Inspector Controls
+
+-   Change cover block's "Media settings" label to "Settings". ([58463](https://github.com/WordPress/gutenberg/pull/58463))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @at-benni: Update versions-in-wordpress.md. ([58545](https://github.com/WordPress/gutenberg/pull/58545))
+-   @krupal-panchal: Removed extra parenthesis from document. ([58662](https://github.com/WordPress/gutenberg/pull/58662))
+-   @shreyash3087: fix: InnerBlocks schema description in block.json. ([58649](https://github.com/WordPress/gutenberg/pull/58649))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewhayward @andrewserong @annezazu @anton-vlasenko @antonis @aristath @artemiomorales @at-benni @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @creativecoder @DAreRodz @dcalhoun @dd32 @derekblank @desrosj @draganescu @ellatrix @fabiankaegy @fai-sal @fluiddot @gaambo @getdave @glendaviesnz @hellofromtonya @ironprogrammer @jameskoster @jasmussen @jeherve @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krupal-panchal @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mikachan @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shreyash3087 @sirreal @t-hamano @talldan @tellthemachines @tjcafferkey @tomjn @tyxla @vcanales @westonruter @WunderBart @youknowriad
+
+= 17.6.6 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Script loader 6.4 compat: check for init hook completion ([58406](https://github.com/WordPress/gutenberg/pull/58406))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ramonjd
+
+= 17.7.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Interactivity API
+
+-   Allow global configs for namespaces. ([58749](https://github.com/WordPress/gutenberg/pull/58749))
+
+#### Global Styles
+
+-   Add support for transform and letter spacing controls in Global Styles > Typography > Elements. ([58142](https://github.com/WordPress/gutenberg/pull/58142))
+
+#### Block Library
+
+-   Add shadow support for column, columns and image. ([57982](https://github.com/WordPress/gutenberg/pull/57982))
+
+### Enhancements
+
+-   Improve translators comments for wp.date.setSettings in compat file. ([58488](https://github.com/WordPress/gutenberg/pull/58488))
+-   Interactive Template: Use viewScriptModule. ([58211](https://github.com/WordPress/gutenberg/pull/58211))
+
+#### Components
+
+-   Adding `constrainTabbing` prop to `useDialog` hook. ([57962](https://github.com/WordPress/gutenberg/pull/57962))
+-   Allow limiting the number of maximum visible Snackbars. ([58559](https://github.com/WordPress/gutenberg/pull/58559))
+-   ConfirmDialog: Add `__next40pxDefaultSize` to buttons. ([58421](https://github.com/WordPress/gutenberg/pull/58421))
+-   Expand theming support in COLORS. ([58097](https://github.com/WordPress/gutenberg/pull/58097))
+-   FocalPointPicker: Apply modern styling. ([58459](https://github.com/WordPress/gutenberg/pull/58459))
+-   Implement Tabs in widget editor settings. ([57886](https://github.com/WordPress/gutenberg/pull/57886))
+-   Implement `Tabs` in site-editor settings. ([56959](https://github.com/WordPress/gutenberg/pull/56959))
+-   Implementing `useCompositeState` with Ariakit. ([57304](https://github.com/WordPress/gutenberg/pull/57304))
+-   InputBase: Add `isBorderless` prop. ([58750](https://github.com/WordPress/gutenberg/pull/58750))
+-   Replace `TabPanel` with `Tabs` in the editor Document Overview sidebar. ([57082](https://github.com/WordPress/gutenberg/pull/57082))
+-   SearchControl: Refactor to use InputControl internally. ([56524](https://github.com/WordPress/gutenberg/pull/56524))
+-   Show borders for disabled secondary buttons. ([58606](https://github.com/WordPress/gutenberg/pull/58606))
+
+#### Data Views
+
+-   Add outline to template preview in table layout. ([58738](https://github.com/WordPress/gutenberg/pull/58738))
+-   Add: Delete bulk action to patterns. ([58747](https://github.com/WordPress/gutenberg/pull/58747))
+-   Add: Selection and bulk actions to grid view. ([58144](https://github.com/WordPress/gutenberg/pull/58144))
+-   DataViews: Add primary filter API. ([58427](https://github.com/WordPress/gutenberg/pull/58427))
+-   DataViews: In patterns page, show sync status filter by default. ([58367](https://github.com/WordPress/gutenberg/pull/58367))
+-   DataViews: Redesign of filters. ([58569](https://github.com/WordPress/gutenberg/pull/58569))
+-   Remove min-width style on table cells. ([58204](https://github.com/WordPress/gutenberg/pull/58204))
+-   Update 'Rows per page' view option label to account for Grid layout. ([58457](https://github.com/WordPress/gutenberg/pull/58457))
+-   Update dataviews search input placeholder. ([58742](https://github.com/WordPress/gutenberg/pull/58742))
+-   Update spacing around title in grid layout. ([58739](https://github.com/WordPress/gutenberg/pull/58739))
+
+#### Interactivity API
+
+-   Add `block supports` for `clientNavigation` and `interactive` properties on `block.json` schema. ([58132](https://github.com/WordPress/gutenberg/pull/58132))
+-   Image block: Refactor and remove `data-wp-body`. ([58835](https://github.com/WordPress/gutenberg/pull/58835))
+-   Interactivity Router: Fix initial page cache. ([58496](https://github.com/WordPress/gutenberg/pull/58496))
+-   Interactivity Router: Move ARIA live region and loading bar to the Interactivity Router. ([58377](https://github.com/WordPress/gutenberg/pull/58377))
+-   Limit the exported APIs. ([58864](https://github.com/WordPress/gutenberg/pull/58864))
+-   Mark all core block stores as private. ([58722](https://github.com/WordPress/gutenberg/pull/58722))
+-   Server Directive Processor for `data-wp-each`. ([58498](https://github.com/WordPress/gutenberg/pull/58498))
+-   Support setting a namespace using a string in `data-wp-interactive`. ([58743](https://github.com/WordPress/gutenberg/pull/58743))
+
+#### Block Library
+
+-   Follow up on the Post navigation link taxonomy filters. ([57949](https://github.com/WordPress/gutenberg/pull/57949))
+-   Home Link: Render Home text if there is no attribute label present. ([58387](https://github.com/WordPress/gutenberg/pull/58387))
+-   Organize gallery controls. ([58407](https://github.com/WordPress/gutenberg/pull/58407))
+-   Pattern: Use the '\_\_experimentalLabel' method to get a title. ([58646](https://github.com/WordPress/gutenberg/pull/58646))
+-   Social Icons: Update Patreon icon. ([56951](https://github.com/WordPress/gutenberg/pull/56951))
+-   Try: Disable text selection for post content placeholder block. ([58169](https://github.com/WordPress/gutenberg/pull/58169))
+-   Update pattern block copy in light of pattern overrides. ([58231](https://github.com/WordPress/gutenberg/pull/58231))
+
+#### Global Styles
+
+-   Add style engine support for nested at-rules. ([58867](https://github.com/WordPress/gutenberg/pull/58867))
+-   Font Library: Show 'Add fonts' button when there are no fonts installed. ([58580](https://github.com/WordPress/gutenberg/pull/58580))
+-   Move Shadow controls to Border panel. ([58466](https://github.com/WordPress/gutenberg/pull/58466))
+-   Shadow: Update shadow support to allow explicit skipping of serialization. ([58306](https://github.com/WordPress/gutenberg/pull/58306))
+-   Try: Remove shadow preset overflow. ([58663](https://github.com/WordPress/gutenberg/pull/58663))
+-   Update return values from getGlobalStylesChanges(). ([58707](https://github.com/WordPress/gutenberg/pull/58707))
+
+#### Block Editor
+
+-   Drag and drop: Allow dragging from inserter or desktop to template parts. ([58589](https://github.com/WordPress/gutenberg/pull/58589))
+-   Drag and drop: Allow dropping within template parts. ([58423](https://github.com/WordPress/gutenberg/pull/58423))
+-   Implement "Add block" UI for Nav block Link UI. ([57756](https://github.com/WordPress/gutenberg/pull/57756))
+-   Implementing new UX for invoking rich text Link UI. ([57986](https://github.com/WordPress/gutenberg/pull/57986))
+-   Remove open in new tab from link preview. ([58744](https://github.com/WordPress/gutenberg/pull/58744))
+-   Use consistent labels, remove additional settings, and copySmall icon LinkControl. ([58183](https://github.com/WordPress/gutenberg/pull/58183))
+
+#### Site Editor
+
+-   Apply 40px across summary panel. ([58730](https://github.com/WordPress/gutenberg/pull/58730))
+-   Apply custom scroll style to fixed header block toolbar. ([57444](https://github.com/WordPress/gutenberg/pull/57444))
+-   Improve SiteIcon display and transition. ([58472](https://github.com/WordPress/gutenberg/pull/58472))
+-   Only show 'Back' button when user came from an editor canvas. ([58710](https://github.com/WordPress/gutenberg/pull/58710))
+-   Update "focus mode" to consistently use the Document Bar's Back button. ([58528](https://github.com/WordPress/gutenberg/pull/58528))
+
+#### Patterns
+
+-   Add a confirmation dialog when a user tries to delete a synced pattern with overrides. ([58796](https://github.com/WordPress/gutenberg/pull/58796))
+-   Add the block name to the pattern content data. ([58715](https://github.com/WordPress/gutenberg/pull/58715))
+-   Flash editable block outlines instead of always showing them. ([58159](https://github.com/WordPress/gutenberg/pull/58159))
+
+#### Design Tools
+
+-   Background image support: Add background position controls. ([58592](https://github.com/WordPress/gutenberg/pull/58592))
+-   Tweak metrics and labels for background size controls. ([58854](https://github.com/WordPress/gutenberg/pull/58854))
+
+#### Post Editor
+
+-   Editor: Limit visible Snackbars from the consumers. ([58598](https://github.com/WordPress/gutenberg/pull/58598))
+-   Save entities panel: Update styles. ([58706](https://github.com/WordPress/gutenberg/pull/58706))
+
+#### Font Library
+
+-   Add sanitize from schema util. ([58571](https://github.com/WordPress/gutenberg/pull/58571))
+-   Font Collections: Update registration function signature and add caching. ([58363](https://github.com/WordPress/gutenberg/pull/58363))
+
+#### Inspector Controls
+
+-   Tweak FocalPointPicker inspector controls. ([58448](https://github.com/WordPress/gutenberg/pull/58448))
+-   Tweak Media & Text inspector controls. ([58447](https://github.com/WordPress/gutenberg/pull/58447))
+
+#### Custom Fields
+
+-   Block Bindings: Ensure to pass bound attributes. ([58844](https://github.com/WordPress/gutenberg/pull/58844))
+
+#### Commands
+
+-   Try debouncing search for post-type navigation. ([58810](https://github.com/WordPress/gutenberg/pull/58810))
+
+#### Document Settings
+
+-   Tweak revisions panel for improved scanning. ([58751](https://github.com/WordPress/gutenberg/pull/58751))
+
+#### Synced Patterns
+
+-   Support button's link settings for Pattern Overrides. ([58587](https://github.com/WordPress/gutenberg/pull/58587))
+
+#### Block API
+
+-   Block Hooks: Set ignoredHookedBlocks metada attr upon insertion. ([58553](https://github.com/WordPress/gutenberg/pull/58553))
+
+#### List View
+
+-   Add keyboard clipboard events for cut, copy, paste. ([57838](https://github.com/WordPress/gutenberg/pull/57838))
+
+### New APIs
+
+#### Block API
+
+-   Blocks: Add handling for block.json viewScriptModule. ([58731](https://github.com/WordPress/gutenberg/pull/58731))
+
+### Bug Fixes
+
+-   Core data: useEntityBlockEditor: Fix parsed blocks cache. ([58841](https://github.com/WordPress/gutenberg/pull/58841))
+-   Footnotes: Fix anchor order replacing. ([58791](https://github.com/WordPress/gutenberg/pull/58791))
+
+#### Block Editor
+
+-   Block Switcher: Use consistent labels. ([58240](https://github.com/WordPress/gutenberg/pull/58240))
+-   Don't move focus within the toolbar if it is already focused. ([58570](https://github.com/WordPress/gutenberg/pull/58570))
+-   Don't show Link preview when no selection. ([58771](https://github.com/WordPress/gutenberg/pull/58771))
+-   Fix Link UI popover anchor in rich text. ([58282](https://github.com/WordPress/gutenberg/pull/58282))
+-   Fix empty link preview after creating link from empty selection. ([58863](https://github.com/WordPress/gutenberg/pull/58863))
+-   Hide the 'Content' panel for locked blocks when there's no content. ([58259](https://github.com/WordPress/gutenberg/pull/58259))
+-   ImageURLInputUI: Fix focus loss when settings are changed. ([58647](https://github.com/WordPress/gutenberg/pull/58647))
+-   Link UI: Polish lightbox pieces. ([58666](https://github.com/WordPress/gutenberg/pull/58666))
+-   Media Replace Flow: Vertically align the URL. ([58621](https://github.com/WordPress/gutenberg/pull/58621))
+-   MediaReplaceFlow: Restore popover width. ([58597](https://github.com/WordPress/gutenberg/pull/58597))
+-   Rich Text: Only apply focus to elements not selection. ([58745](https://github.com/WordPress/gutenberg/pull/58745))
+-   Rich text: Preserve white space should strip \r. ([58805](https://github.com/WordPress/gutenberg/pull/58805))
+-   Settings may be undefined. ([58658](https://github.com/WordPress/gutenberg/pull/58658))
+-   useOnBlockDrop: Fix the Gallery block check. ([58711](https://github.com/WordPress/gutenberg/pull/58711))
+
+#### Components
+
+-   Add a timezone offset value for display purposes. ([56682](https://github.com/WordPress/gutenberg/pull/56682))
+-   Fix Placeholder component padding when body text font size is changed. ([58323](https://github.com/WordPress/gutenberg/pull/58323))
+-   Fix URLPopover preview overflow. ([58741](https://github.com/WordPress/gutenberg/pull/58741))
+-   Fix the Snackbar auto-dismissal timers. ([58604](https://github.com/WordPress/gutenberg/pull/58604))
+-   Popover: Add `box-sizing` reset style. ([58871](https://github.com/WordPress/gutenberg/pull/58871))
+-   Set post editor sidebar tabs to manual activation. ([58041](https://github.com/WordPress/gutenberg/pull/58041))
+-   Tabs: Delay `activeId` updates until focus can be properly detected. ([58625](https://github.com/WordPress/gutenberg/pull/58625))
+-   Tabs: Fix infinite loop in useEffect. ([58861](https://github.com/WordPress/gutenberg/pull/58861))
+-   Tabs: Improve Controlled Mode Focus Handling. ([57696](https://github.com/WordPress/gutenberg/pull/57696))
+-   Try: Fix lightbox URL popover position. ([58600](https://github.com/WordPress/gutenberg/pull/58600))
+
+#### Block Library
+
+-   Fix #54352 prevent php 8.1 fatal when template parts are not found in non-debug environments. ([54354](https://github.com/WordPress/gutenberg/pull/54354))
+-   Fix Query pagination not working in template parts and patterns. ([58602](https://github.com/WordPress/gutenberg/pull/58602))
+-   Fix URL escaping for array parameters in Navigation links. ([58068](https://github.com/WordPress/gutenberg/pull/58068))
+-   Fix missing data in email submissions. ([55691](https://github.com/WordPress/gutenberg/pull/55691))
+-   Fix: Removing footnotes from the allowed blocks does not remove footnotes. ([58855](https://github.com/WordPress/gutenberg/pull/58855))
+-   Navigation Link: Use get_block_type_variations to register variations. ([58389](https://github.com/WordPress/gutenberg/pull/58389))
+-   Prevent usage of `gutenberg_url` in block-library. ([58242](https://github.com/WordPress/gutenberg/pull/58242))
+-   Template Part: Reflect name updates without saving changes. ([58644](https://github.com/WordPress/gutenberg/pull/58644))
+-   Try: Make gallery randomization work when nested. ([58733](https://github.com/WordPress/gutenberg/pull/58733))
+
+#### Data Views
+
+-   DataViews: Fix applied default layout props. ([58400](https://github.com/WordPress/gutenberg/pull/58400))
+-   DataViews: Fix nested buttons and placeholder text in list layout. ([58304](https://github.com/WordPress/gutenberg/pull/58304))
+-   DataViews: Fix some small issues with featured image. ([58371](https://github.com/WordPress/gutenberg/pull/58371))
+-   DataViews: Make it possible to toggle Author field in templates and template parts. ([58609](https://github.com/WordPress/gutenberg/pull/58609))
+-   DataViews: Remove test artifact (status filter was set as primary). ([58682](https://github.com/WordPress/gutenberg/pull/58682))
+-   DataViews: Use chips for filter summary. ([58816](https://github.com/WordPress/gutenberg/pull/58816))
+-   Fix double scrollbar in grid layout. ([58536](https://github.com/WordPress/gutenberg/pull/58536))
+-   Fix: Dataviews selection on patterns grid view. ([58726](https://github.com/WordPress/gutenberg/pull/58726))
+
+#### Site Editor
+
+-   Add context for the All translatable string and enforce l10n best practices. ([58196](https://github.com/WordPress/gutenberg/pull/58196))
+-   Break long URL in page sidebar. ([58763](https://github.com/WordPress/gutenberg/pull/58763))
+-   Editor: Fix block context defined for template parts. ([58807](https://github.com/WordPress/gutenberg/pull/58807))
+-   Fix line-height in block card. ([58246](https://github.com/WordPress/gutenberg/pull/58246))
+-   Hide export button if non-block-based theme. ([58346](https://github.com/WordPress/gutenberg/pull/58346))
+-   Mobile site editor header toolbar button bugfix. ([58852](https://github.com/WordPress/gutenberg/pull/58852))
+
+#### Post Editor
+
+-   Editor: Don't hide authors' Combobox if the current author is missing. ([58719](https://github.com/WordPress/gutenberg/pull/58719))
+-   Fix permalink input field text overflow ellipsis for Firefox. ([57310](https://github.com/WordPress/gutenberg/pull/57310))
+-   Fix the position and size of the Options menu,. ([57515](https://github.com/WordPress/gutenberg/pull/57515))
+-   Fix: Use old template panel if user doesn’t have access to view templates. ([58485](https://github.com/WordPress/gutenberg/pull/58485))
+-   Template editing: Update fullscreen WP back functionality. ([58534](https://github.com/WordPress/gutenberg/pull/58534))
+
+#### Interactivity API
+
+-   Add `supports.interactivity` to the Query block. ([58316](https://github.com/WordPress/gutenberg/pull/58316))
+-   Fix state intialization for asynchronous private stores. ([58754](https://github.com/WordPress/gutenberg/pull/58754))
+-   Remove non default suffix data wp context processing. ([58664](https://github.com/WordPress/gutenberg/pull/58664))
+-   Use compat versions of HTML APIs. ([58846](https://github.com/WordPress/gutenberg/pull/58846))
+
+#### Global Styles
+
+-   Block Styles: Fix block style variation selector generation. ([58051](https://github.com/WordPress/gutenberg/pull/58051))
+-   Fix Global styles text settings bleeding into placeholder component. ([58303](https://github.com/WordPress/gutenberg/pull/58303))
+-   Global styles revisions: Fix is-selected rules from affecting other areas of the editor. ([58228](https://github.com/WordPress/gutenberg/pull/58228))
+-   Site Editor: Prevent classic theme from accessing global style menu. ([58345](https://github.com/WordPress/gutenberg/pull/58345))
+
+#### List View
+
+-   Fix error when switching between template preview modes. ([58533](https://github.com/WordPress/gutenberg/pull/58533))
+-   Navigation Submenu Block: Make block name affect list view. ([58296](https://github.com/WordPress/gutenberg/pull/58296))
+-   Template Part: Fix site editor error when loading with list view set to always display. ([58868](https://github.com/WordPress/gutenberg/pull/58868))
+
+#### Font Library
+
+-   Avoid mutating fontface data. ([58473](https://github.com/WordPress/gutenberg/pull/58473))
+-   Avoid running init functions when font library is available in core. ([58793](https://github.com/WordPress/gutenberg/pull/58793))
+-   Fix size of demo text. ([58849](https://github.com/WordPress/gutenberg/pull/58849))
+
+#### Typography
+
+-   Fix font library modal dialog translatable strings. ([58256](https://github.com/WordPress/gutenberg/pull/58256))
+-   Font Library: Change referenced tab name on Google Fonts confirmation dialog. ([58584](https://github.com/WordPress/gutenberg/pull/58584))
+-   Font size: Allow for custom font size handling. ([58422](https://github.com/WordPress/gutenberg/pull/58422))
+
+#### Script Modules API
+
+-   Add import map polyfill. ([58263](https://github.com/WordPress/gutenberg/pull/58263))
+-   Import Maps: Only emit CDATA wrappers for inline scripts for JavaScript. ([58818](https://github.com/WordPress/gutenberg/pull/58818))
+
+#### Extensibility
+
+-   Fix broken list markup in navigation block when 3rd party blocks are used as decendants of navigation block. ([55551](https://github.com/WordPress/gutenberg/pull/55551))
+-   Navigation block: Check Block Hooks API callback hasn't already been added. ([58772](https://github.com/WordPress/gutenberg/pull/58772))
+
+#### Synced Patterns
+
+-   Disable overriding links of images inside pattern instances. ([58660](https://github.com/WordPress/gutenberg/pull/58660))
+-   Fix nested pattern overrides and disable editing inner pattern. ([58541](https://github.com/WordPress/gutenberg/pull/58541))
+
+#### Inspector Controls
+
+-   Add missing PanelBody title for the columns block inspector. ([58452](https://github.com/WordPress/gutenberg/pull/58452))
+-   Add spacing between input controls with custom values. ([58410](https://github.com/WordPress/gutenberg/pull/58410))
+
+#### Custom Fields
+
+-   Block Bindings: Update bindings registry with latest changes. ([58843](https://github.com/WordPress/gutenberg/pull/58843))
+
+#### History
+
+-   Columns: Batch vertical alignment updates. ([58801](https://github.com/WordPress/gutenberg/pull/58801))
+
+#### Document Settings
+
+-   Editor: Ensure the current author is included in the dropdown. ([58716](https://github.com/WordPress/gutenberg/pull/58716))
+
+#### Rich Text
+
+-   Add aria-readonly attribute to Rich Text component. ([58687](https://github.com/WordPress/gutenberg/pull/58687))
+
+#### Navigation Menus
+
+-   Navigation: Update the fallback block list to avoid a PHP Warning. ([58588](https://github.com/WordPress/gutenberg/pull/58588))
+
+#### Patterns
+
+-   Update the bindings attribs of blocks added during experimental phase. ([58483](https://github.com/WordPress/gutenberg/pull/58483))
+
+#### Distraction Free
+
+-   Add default restoration of UI when exiting distraction free mode. ([58455](https://github.com/WordPress/gutenberg/pull/58455))
+
+### Accessibility
+
+-   Escape as Select/Edit mode Toggle. ([58637](https://github.com/WordPress/gutenberg/pull/58637))
+-   Global styles revisions: Update text color contrast. ([58340](https://github.com/WordPress/gutenberg/pull/58340))
+
+#### Components
+
+-   CustomSelect: Disable `virtualFocus` to fix issue for screenreaders. ([58585](https://github.com/WordPress/gutenberg/pull/58585))
+-   Font Library modal: Try to improve checkbox labelling. ([58339](https://github.com/WordPress/gutenberg/pull/58339))
+-   PaletteEdit: Fix palette item accessibility. ([58214](https://github.com/WordPress/gutenberg/pull/58214))
+
+#### Font Library
+
+-   Buttons position and accessibility. ([58212](https://github.com/WordPress/gutenberg/pull/58212))
+-   Fix focus loss when update/install button is pressed. ([58364](https://github.com/WordPress/gutenberg/pull/58364))
+-   Removed <header> <main> and <footer> elements from Font Library Modal. ([58221](https://github.com/WordPress/gutenberg/pull/58221))
+
+#### Block Library
+
+-   Fix image link preset suggestions arrow key navigation. ([58615](https://github.com/WordPress/gutenberg/pull/58615))
+
+#### CSS & Styling
+
+-   Font Library: Fix font preview vertical alignment and respect reduce motion preference. ([58451](https://github.com/WordPress/gutenberg/pull/58451))
+
+#### Widgets Editor
+
+-   Widget Editor: Don't disable the Save button. ([58365](https://github.com/WordPress/gutenberg/pull/58365))
+
+#### Typography
+
+-   Fix fonts modal dialog buttons accessibility. ([58309](https://github.com/WordPress/gutenberg/pull/58309))
+
+#### Commands
+
+-   Fix labeling of the command palette. ([56718](https://github.com/WordPress/gutenberg/pull/56718))
+
+### Performance
+
+-   Block editor: Optimise getGlobalBlockCount/getClientIdsWithDescendants. ([58356](https://github.com/WordPress/gutenberg/pull/58356))
+-   Block editor: Prevent isSubtreeDisabled call if not needed. ([58349](https://github.com/WordPress/gutenberg/pull/58349))
+-   Block editor: Reduce appender sync! subscriptions. ([58556](https://github.com/WordPress/gutenberg/pull/58556))
+-   Block editor: selectors: Avoid has() or double get() on Maps. ([58372](https://github.com/WordPress/gutenberg/pull/58372))
+-   Block preview: Prevent recalculating editor styles if additional styles is empty. ([58244](https://github.com/WordPress/gutenberg/pull/58244))
+-   Image block: Remove a block editor store sub. ([57232](https://github.com/WordPress/gutenberg/pull/57232))
+-   Inner blocks: Don't re-render list when controlled blocks change. ([58575](https://github.com/WordPress/gutenberg/pull/58575))
+-   InnerBlocks: Fix continuous re-rendering on inner blocks change. ([58348](https://github.com/WordPress/gutenberg/pull/58348))
+-   Navigation: Fix performance regression. ([58513](https://github.com/WordPress/gutenberg/pull/58513))
+-   Post template: Don't fetch taxonomies if not needed. ([58245](https://github.com/WordPress/gutenberg/pull/58245))
+-   Site editor: Add pattern/template load performance test with TT4. ([58734](https://github.com/WordPress/gutenberg/pull/58734))
+-   Site editor: Avoid double post content parse (alternative). ([58146](https://github.com/WordPress/gutenberg/pull/58146))
+-   Unmemoize Block component selectors. ([58355](https://github.com/WordPress/gutenberg/pull/58355))
+-   core-data: Memoize `getEntitiesConfig` selector. ([58393](https://github.com/WordPress/gutenberg/pull/58393))
+-   getBlockSettings: Avoid memoized selector with clientId. ([58405](https://github.com/WordPress/gutenberg/pull/58405))
+-   useSettings: Extract selector. ([58354](https://github.com/WordPress/gutenberg/pull/58354))
+
+#### Font Library
+
+-   Font Collections: Lazy load json configuration for better performance. ([58530](https://github.com/WordPress/gutenberg/pull/58530))
+
+#### List View
+
+-   Unmemo recursive getEnabledClientIdsTree. ([58525](https://github.com/WordPress/gutenberg/pull/58525))
+
+#### Block Editor
+
+-   Optimize the 'useBlockDisplayTitle' hook. ([58250](https://github.com/WordPress/gutenberg/pull/58250))
+
+#### Interactivity API
+
+-   Break up long hydration task in interactivity init. ([58227](https://github.com/WordPress/gutenberg/pull/58227))
+
+### Experiments
+
+#### Data Views
+
+-   Update styling details in list item layout. ([58397](https://github.com/WordPress/gutenberg/pull/58397))
+
+#### Synced Patterns
+
+-   Add a control per block to reset pattern overrides. ([57907](https://github.com/WordPress/gutenberg/pull/57907))
+
+### Documentation
+
+-   Add video embed documentation and grammar fixes in the Block Editor Handbook. ([58029](https://github.com/WordPress/gutenberg/pull/58029))
+-   Block API: Add `viewStyle` property support to `block.json`. ([55492](https://github.com/WordPress/gutenberg/pull/55492))
+-   CheckboxControl: Add custom label example to Storybook. ([58438](https://github.com/WordPress/gutenberg/pull/58438))
+-   Docs: Copy and formatting edits for the "Markup representation of a block" guide. ([58688](https://github.com/WordPress/gutenberg/pull/58688))
+-   Docs: Copy and formatting edits for the "Registration of a block" guide. ([58709](https://github.com/WordPress/gutenberg/pull/58709))
+-   Docs: Copy and formatting edits for the "Static or Dynamic rendering" guide. ([58681](https://github.com/WordPress/gutenberg/pull/58681))
+-   Docs: Copy and formatting edits for the "The block in the Editor" guide. ([58697](https://github.com/WordPress/gutenberg/pull/58697))
+-   Docs: Copy and formatting edits for the "The block wrapper" guide. ([58704](https://github.com/WordPress/gutenberg/pull/58704))
+-   Docs: Copy and formatting edits for the "Working with JavaScript for the Block Editor" guide. ([58651](https://github.com/WordPress/gutenberg/pull/58651))
+-   Docs: Copy and formatting edits for the "block.json" guide. ([58732](https://github.com/WordPress/gutenberg/pull/58732))
+-   Docs: Copy edits and list formatting for main Block Editor Handbook readme. ([58652](https://github.com/WordPress/gutenberg/pull/58652))
+-   Docs: Fix list formatting and some grammar in the Entities explanation doc. ([58655](https://github.com/WordPress/gutenberg/pull/58655))
+-   Docs: Fix list markup in the Fundamentals of Block Development section. ([58226](https://github.com/WordPress/gutenberg/pull/58226))
+-   Docs: Fix mistake in viewScriptModule documentation. ([58815](https://github.com/WordPress/gutenberg/pull/58815))
+-   Docs: Formatting and copy edits for the File structure of a block guide. ([58635](https://github.com/WordPress/gutenberg/pull/58635))
+-   Docs: Minor copy edits for the Block Development Environment page. ([58614](https://github.com/WordPress/gutenberg/pull/58614))
+-   Docs: Remove duplicate content and update links. ([58358](https://github.com/WordPress/gutenberg/pull/58358))
+-   Docs: Update link to the correct Fundamentals doc. ([58352](https://github.com/WordPress/gutenberg/pull/58352))
+-   Docs: Update list formatting and descriptions in the Fundamentals of Block Development doc. ([58630](https://github.com/WordPress/gutenberg/pull/58630))
+-   Docs: Update the Getting Started readme in the Block Editor Handbook. ([58624](https://github.com/WordPress/gutenberg/pull/58624))
+-   Reference Gutenberg in PHP documentation from main documentation. ([58453](https://github.com/WordPress/gutenberg/pull/58453))
+-   Removed extra parenthesis from document. ([58662](https://github.com/WordPress/gutenberg/pull/58662))
+-   Restructure the FAQs to work with the new TOC design in the Block Editor Handbook. ([58351](https://github.com/WordPress/gutenberg/pull/58351))
+-   Storybook: Add badges to private components. ([58123](https://github.com/WordPress/gutenberg/pull/58123))
+-   Update documentation to avoid recommending early return PHP "anti-pattern". ([58454](https://github.com/WordPress/gutenberg/pull/58454))
+-   Update to rename reusable blocks. ([58633](https://github.com/WordPress/gutenberg/pull/58633))
+-   Update versions-in-wordpress.md. ([58545](https://github.com/WordPress/gutenberg/pull/58545))
+-   fix: InnerBlocks schema description in block.json. ([58649](https://github.com/WordPress/gutenberg/pull/58649))
+
+### Code Quality
+
+-   Avoid running pattern overrides migration in WordPress core. ([58487](https://github.com/WordPress/gutenberg/pull/58487))
+-   Build: Add package build shebang and sync comments. ([58264](https://github.com/WordPress/gutenberg/pull/58264))
+-   Date: Merge 6.4 and 6.5 compat files. ([58479](https://github.com/WordPress/gutenberg/pull/58479))
+-   DefaultBlockAppender: Refactor to hooks. ([58809](https://github.com/WordPress/gutenberg/pull/58809))
+-   Docs: Clarify the non contextual post types. ([58836](https://github.com/WordPress/gutenberg/pull/58836))
+-   Layout block supports use `str_contains`. ([58251](https://github.com/WordPress/gutenberg/pull/58251))
+-   Move Nav Link PHPUnit tests to blocks directory. ([58460](https://github.com/WordPress/gutenberg/pull/58460))
+
+#### Font Library
+
+-   Address feedback from wordpress-develop#6027. ([58691](https://github.com/WordPress/gutenberg/pull/58691))
+-   Fix font library unit tests nit-picks [round 2]. ([58612](https://github.com/WordPress/gutenberg/pull/58612))
+-   Font Collections: Standardizes docblock comments. ([58654](https://github.com/WordPress/gutenberg/pull/58654))
+-   Font Library Address Outstanding Feedback from WP 6.4 review. ([58675](https://github.com/WordPress/gutenberg/pull/58675))
+-   Move Fonts Library to compat dir for 6.5. ([58608](https://github.com/WordPress/gutenberg/pull/58608))
+-   Remove font family and font face preview keys from theme.json schema. ([58395](https://github.com/WordPress/gutenberg/pull/58395))
+-   Remove old and unused component and css. ([58449](https://github.com/WordPress/gutenberg/pull/58449))
+-   Remove slug from collection schema to accommodate the changes on the wp_register_font_collection function signature. ([58623](https://github.com/WordPress/gutenberg/pull/58623))
+-   Remove tests from classes that were already merged in core. ([58752](https://github.com/WordPress/gutenberg/pull/58752))
+-   Remove tests from font library rest controllers already merged into core. ([58778](https://github.com/WordPress/gutenberg/pull/58778))
+-   Return null if a font collection is not registered. ([58735](https://github.com/WordPress/gutenberg/pull/58735))
+-   Simplify font collection schema. ([58574](https://github.com/WordPress/gutenberg/pull/58574))
+-   Update Font Library REST API code to align with Core standards. ([58619](https://github.com/WordPress/gutenberg/pull/58619))
+-   Update Font Library non-REST API code to align with Core standards. ([58607](https://github.com/WordPress/gutenberg/pull/58607))
+-   Update font collection json schema. ([58413](https://github.com/WordPress/gutenberg/pull/58413))
+-   Update fonts collection data URL for Gutenberg 17.7. ([58746](https://github.com/WordPress/gutenberg/pull/58746))
+-   Use Button's API to disable footer buttons. ([58529](https://github.com/WordPress/gutenberg/pull/58529))
+-   [Font Library] Update PHPUnit tests per Core coding standards and practices. ([58502](https://github.com/WordPress/gutenberg/pull/58502))
+
+#### Components
+
+-   Add eslint rule for theme var regressions. ([58130](https://github.com/WordPress/gutenberg/pull/58130))
+-   Add stylelint rule for theme var regressions. ([58098](https://github.com/WordPress/gutenberg/pull/58098))
+-   AnglePickerControl: Hard deprecate bottom margin. ([58700](https://github.com/WordPress/gutenberg/pull/58700))
+-   CustomGradientPicker: Hard deprecate outer margins. ([58699](https://github.com/WordPress/gutenberg/pull/58699))
+-   FontSizePicker: Hard deprecate bottom margin. ([58702](https://github.com/WordPress/gutenberg/pull/58702))
+-   GradientPicker: Hard deprecate outer margins. ([58701](https://github.com/WordPress/gutenberg/pull/58701))
+-   Remove deprecation warnings for `__next36pxDefaultSize`. ([58703](https://github.com/WordPress/gutenberg/pull/58703))
+
+#### Block Library
+
+-   Interactivity API - Blocks: Move interactivity registration to render. ([58678](https://github.com/WordPress/gutenberg/pull/58678))
+-   Navigation: Move the Navigation block rendering tests to the blocks directory. ([58247](https://github.com/WordPress/gutenberg/pull/58247))
+-   Navigation: Remove use of Gutenberg_Navigation_Fallback class. ([58369](https://github.com/WordPress/gutenberg/pull/58369))
+-   Paragraph: Update comment block. ([58419](https://github.com/WordPress/gutenberg/pull/58419))
+-   Rename variation build methods. ([58538](https://github.com/WordPress/gutenberg/pull/58538))
+-   Template Part: Derive 'hasInnerBlocks' inside selector. ([58680](https://github.com/WordPress/gutenberg/pull/58680))
+
+#### Block Editor
+
+-   Block Switcher: Don't use the 'useBlockDisplayInformation' hook. ([58562](https://github.com/WordPress/gutenberg/pull/58562))
+-   BlockSelectionButton: Don't use the 'useBlockDisplayInformation' hook. ([58640](https://github.com/WordPress/gutenberg/pull/58640))
+-   Link Control: Simplify the sprintf. ([58831](https://github.com/WordPress/gutenberg/pull/58831))
+-   RichTextData: Use a private property. ([58557](https://github.com/WordPress/gutenberg/pull/58557))
+
+#### Post Editor
+
+-   Editor Settings: Rename the getPostLinkProps setting. ([58416](https://github.com/WordPress/gutenberg/pull/58416))
+-   Editor: Reuse data query in the post author components. ([58760](https://github.com/WordPress/gutenberg/pull/58760))
+-   Editor: Use hooks instead of HoCs in the post-taxonomies components. ([58446](https://github.com/WordPress/gutenberg/pull/58446))
+-   Fix: Refactor pre publish panel to use function component instead of class. ([58441](https://github.com/WordPress/gutenberg/pull/58441))
+
+#### Custom Fields
+
+-   Block Bindings: Remove unneeded 'setAttributes' override. ([58806](https://github.com/WordPress/gutenberg/pull/58806))
+
+#### Patterns
+
+-   Pattern overrides: Update overrides attribute data structure and rename it to `content`. ([58596](https://github.com/WordPress/gutenberg/pull/58596))
+
+### Tools
+
+-   Add BlockJsonDependenciesPlugin to modules build. ([57927](https://github.com/WordPress/gutenberg/pull/57927))
+-   DEWP: Fix script module import field. ([58770](https://github.com/WordPress/gutenberg/pull/58770))
+-   Introduce a Props Bot workflow. ([58576](https://github.com/WordPress/gutenberg/pull/58576))
+-   More refinements to Props Bot run conditions. ([58617](https://github.com/WordPress/gutenberg/pull/58617))
+-   Refine when Props Bot runs. ([58616](https://github.com/WordPress/gutenberg/pull/58616))
+-   Remove noahtallen from .wp-env codeowners. ([58283](https://github.com/WordPress/gutenberg/pull/58283))
+-   Scripts: Add viewScriptModule block.json support. ([58203](https://github.com/WordPress/gutenberg/pull/58203))
+
+#### Testing
+
+-   "Multiple use" block validation logic improvement [with Playwright]. ([57576](https://github.com/WordPress/gutenberg/pull/57576))
+-   Block Bindings: Add block bindings end-to-end tests. ([58550](https://github.com/WordPress/gutenberg/pull/58550))
+-   Block Bindings: Add tests for the frontend and polish the existing ones. ([58676](https://github.com/WordPress/gutenberg/pull/58676))
+-   Block Bindings: Improve the code of the block bindings tests. ([58785](https://github.com/WordPress/gutenberg/pull/58785))
+-   Button: Add focusable disabled variant to vizreg Storybook. ([58634](https://github.com/WordPress/gutenberg/pull/58634))
+-   CustomSelect: Add tests for new features. ([58583](https://github.com/WordPress/gutenberg/pull/58583))
+-   Fix flaky test of data-wp-on-window directive. ([58642](https://github.com/WordPress/gutenberg/pull/58642))
+-   Flaky Test: Fix "directives inside islands should not be hydrated twice". ([58516](https://github.com/WordPress/gutenberg/pull/58516))
+-   Interactivity API: Fix flaky test in `data-wp-on-document`. ([58668](https://github.com/WordPress/gutenberg/pull/58668))
+-   Migrate remaining 'inserting blocks' end-to-end tests to Playwright. ([58108](https://github.com/WordPress/gutenberg/pull/58108))
+-   Migrate remaining 'pattern block' end-to-end tests to Playwright. ([58486](https://github.com/WordPress/gutenberg/pull/58486))
+-   SearchControl: Add unit tests. ([58693](https://github.com/WordPress/gutenberg/pull/58693))
+-   Try fixing flaky 'inserting blocks' end-to-end tests. ([58848](https://github.com/WordPress/gutenberg/pull/58848))
+-   Try fixing flaky Paragraph block end-to-end test. ([58208](https://github.com/WordPress/gutenberg/pull/58208))
+-   Use toBeDisabled instead of aria-disabled check. ([58694](https://github.com/WordPress/gutenberg/pull/58694))
+-   e2e: Add a test to confirm that the focus moves from the post title to the paragraph using the enter key. ([58872](https://github.com/WordPress/gutenberg/pull/58872))
+-   end-to-end Utils: Ensure deleteAllUsers does not delete current user. ([58320](https://github.com/WordPress/gutenberg/pull/58320))
+
+#### Build Tooling
+
+-   Add missing Interactivity API label to changelog script. ([58879](https://github.com/WordPress/gutenberg/pull/58879))
+-   Enable dynamic import transform for React Native tests. ([58546](https://github.com/WordPress/gutenberg/pull/58546))
+-   Fix: Remove mention of weekly meeting from first-time contributor PR label. ([58547](https://github.com/WordPress/gutenberg/pull/58547))
+-   Interactivity API: Move Core implementation to compat 6.5 folder. ([58829](https://github.com/WordPress/gutenberg/pull/58829))
+-   Remove phpunit tests for features backported to Core. ([58776](https://github.com/WordPress/gutenberg/pull/58776))
+-   Update Performance tests base branch. ([58890](https://github.com/WordPress/gutenberg/pull/58890))
+-   Workflows: Add 'Technical Prototype' to the type-related labels list. ([58163](https://github.com/WordPress/gutenberg/pull/58163))
+
+### Security
+
+#### Font Library
+
+-   Sanitize font collection data. ([58636](https://github.com/WordPress/gutenberg/pull/58636))
+
+#### REST API
+
+-   Font Library REST API: Sanitize font family and font face settings. ([58590](https://github.com/WordPress/gutenberg/pull/58590))
+
+### Various
+
+-   Script loader 6.4 compat: Check for init hook completion. ([58406](https://github.com/WordPress/gutenberg/pull/58406))
+
+#### Font Library
+
+-   Code style and code quality feedback from core 6.5 review. ([58736](https://github.com/WordPress/gutenberg/pull/58736))
+-   Move getAllowedMimeTypes to FontUtils. ([58667](https://github.com/WordPress/gutenberg/pull/58667))
+-   Refactor as a singleton. ([58669](https://github.com/WordPress/gutenberg/pull/58669))
+
+#### Components
+
+-   Removing Reakit `Composite` implementation. ([58620](https://github.com/WordPress/gutenberg/pull/58620))
+-   Removing Reakit as a dependency. ([58631](https://github.com/WordPress/gutenberg/pull/58631))
+-   Update the Snackbar warning message. ([58591](https://github.com/WordPress/gutenberg/pull/58591))
+
+#### Global Styles
+
+-   Always output core block global styles after base global styles. ([58761](https://github.com/WordPress/gutenberg/pull/58761))
+-   Backport theme.json tests from Core. ([58476](https://github.com/WordPress/gutenberg/pull/58476))
+
+#### Block Library
+
+-   Reduce label and fix capitalization for image block upload label. ([58677](https://github.com/WordPress/gutenberg/pull/58677))
+-   Separator: Remove border-bottom property. ([55725](https://github.com/WordPress/gutenberg/pull/55725))
+
+#### Patterns
+
+-   Update pattern copy to Synced instead of Fully Synced. ([58876](https://github.com/WordPress/gutenberg/pull/58876))
+
+#### Block API
+
+-   ViewScriptModule: 6.5 compatibility changes. ([58832](https://github.com/WordPress/gutenberg/pull/58832))
+
+#### Custom Fields
+
+-   Block Bindings: Backport block bindings refactor from WordPress core. ([58683](https://github.com/WordPress/gutenberg/pull/58683))
+
+#### Inspector Controls
+
+-   Change cover block's "Media settings" label to "Settings". ([58463](https://github.com/WordPress/gutenberg/pull/58463))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @at-benni: Update versions-in-wordpress.md. ([58545](https://github.com/WordPress/gutenberg/pull/58545))
+-   @krupal-panchal: Removed extra parenthesis from document. ([58662](https://github.com/WordPress/gutenberg/pull/58662))
+-   @shreyash3087: fix: InnerBlocks schema description in block.json. ([58649](https://github.com/WordPress/gutenberg/pull/58649))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewhayward @andrewserong @annezazu @anton-vlasenko @antonis @aristath @artemiomorales @at-benni @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @creativecoder @DAreRodz @dcalhoun @dd32 @derekblank @desrosj @draganescu @ellatrix @fabiankaegy @fai-sal @fluiddot @gaambo @getdave @glendaviesnz @hellofromtonya @ironprogrammer @jameskoster @jasmussen @jeherve @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krupal-panchal @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mikachan @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @ramonjd @retrofox @richtabor @SantosGuillamot @scruffian @shreyash3087 @sirreal @t-hamano @talldan @tellthemachines @tjcafferkey @tomjn @tyxla @vcanales @westonruter @WunderBart @youknowriad
+
+= 17.6.5 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Script Modules API
+
+-   Import Maps: Only emit CDATA wrappers for inline scripts for JavaScript. ([58859](https://github.com/WordPress/gutenberg/pull/58859))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@c4rl0sbr4v0
+
+= 17.6.4 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Compatibility with WordPress trunk: Do not register font collections if already registered by Core.
+
+= 17.6.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Navigation: Update the fallback block list to avoid a PHP Warning ([58588](https://github.com/WordPress/gutenberg/pull/58588))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@dd32
+
+= 17.6.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Writing flow: Maintain correct selection after drag-selecting outside block. ([58684](https://github.com/WordPress/gutenberg/pull/58684))
+-   useOnBlockDrop: Fix TypeError via array coercion. ([58686](https://github.com/WordPress/gutenberg/pull/58686))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix @mcsf
+
+= 17.6.1 =
+
+## Changelog
+
+### Font Library
+
+-   Make the API compatible with the upcoming Core patch. ([58671](https://github.com/WordPress/gutenberg/pull/58671))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@youknowriad
+
+= 17.6.0 =
+
+## Changelog
+
+### Features
+
+#### Interactivity API
+
+-   Add `wp-data-on-window` and `wp-data-on-document` directives. ([57931](https://github.com/WordPress/gutenberg/pull/57931))
+-   Add `wp-each` directive. ([57859](https://github.com/WordPress/gutenberg/pull/57859))
+-   Add `wp-run` directive and `useInit` & `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))
+-   Create `@wordpress/interactivity-router` module. ([57924](https://github.com/WordPress/gutenberg/pull/57924))
+
+#### Typography
+
+-   Add defaultFontSizes option to theme.json. ([56661](https://github.com/WordPress/gutenberg/pull/56661))
+
+#### Font Library
+
+-   Font Library: Add wp_get_font_dir() function. ([57730](https://github.com/WordPress/gutenberg/pull/57730))
+
+#### Custom Fields
+
+-   Block Bindings: Disable editing of bound block attributes in editor UI. ([58085](https://github.com/WordPress/gutenberg/pull/58085))
+
+#### Block Editor
+
+-   Add effects/box shadow tools to block inspector. ([57654](https://github.com/WordPress/gutenberg/pull/57654))
+
+### Enhancements
+
+#### Components
+
+-   Add opt-in prop for 40px default size for `BoxControl`, `BorderControl`, and `BorderBoxControl`. ([56185](https://github.com/WordPress/gutenberg/pull/56185))
+-   BorderControl: Replace style picker with ToggleGroupControl. ([57562](https://github.com/WordPress/gutenberg/pull/57562))
+-   ColorPicker: Store internal HSLA state for better slider UX. ([57555](https://github.com/WordPress/gutenberg/pull/57555))
+-   Migrate PaletteEdit and CircularOptionPicker tests from user-event to ariakit/test. ([57809](https://github.com/WordPress/gutenberg/pull/57809))
+-   Replace `TabPanel` with `Tabs` in the Editor Preferences Modal. ([57293](https://github.com/WordPress/gutenberg/pull/57293))
+-   Theme: Set `color` on wrapper. ([58095](https://github.com/WordPress/gutenberg/pull/58095))
+-   Tooltip: No-op when nested inside another Tooltip component. ([57202](https://github.com/WordPress/gutenberg/pull/57202))
+-   `BoxControl`: Update design. ([56665](https://github.com/WordPress/gutenberg/pull/56665))
+-   Element: Start reexporting PureComponent. ([58076](https://github.com/WordPress/gutenberg/pull/58076))
+
+#### Interactivity API
+
+-   Render the root interactive blocks. ([57729](https://github.com/WordPress/gutenberg/pull/57729))
+-   Interactivity Router: Replace `data-wp-navigation-id` with `data-wp-router-region`. ([58191](https://github.com/WordPress/gutenberg/pull/58191))
+-   Interactivity: Export `withScope()` and allow to use it with asynchronous operations. ([58013](https://github.com/WordPress/gutenberg/pull/58013))
+-   Prevent the use of components in `wp-text`. ([57879](https://github.com/WordPress/gutenberg/pull/57879))
+-   Remove wp-data-navigation-link directive. ([57853](https://github.com/WordPress/gutenberg/pull/57853))
+-   Server Directive Processing Refactor. ([58066](https://github.com/WordPress/gutenberg/pull/58066))
+-   Update `preact`, `@preact/signals` and `deepsignal` dependencies. ([57891](https://github.com/WordPress/gutenberg/pull/57891))
+
+#### Block Editor
+
+-   Add copy link button to Link UI. ([58170](https://github.com/WordPress/gutenberg/pull/58170))
+-   Improve LinkControl preview. ([57775](https://github.com/WordPress/gutenberg/pull/57775))
+-   Keep Link UI open upon initial link creation when used in RichText. ([57726](https://github.com/WordPress/gutenberg/pull/57726))
+-   List View: Displace list view items when dragging (a bit more WYSIWYG). ([56625](https://github.com/WordPress/gutenberg/pull/56625))
+-   Show initial suggestions in rich text Link UI. ([57743](https://github.com/WordPress/gutenberg/pull/57743))
+-   Disable lock button if user cannot control lock state. ([57274](https://github.com/WordPress/gutenberg/pull/57274))
+-   Use ClipboardJS latest version and clean up focus loss workaround. ([57156](https://github.com/WordPress/gutenberg/pull/57156))
+-   Dimensions: Add Aspect Ratio block support. ([56897](https://github.com/WordPress/gutenberg/pull/56897))
+
+#### Block Library
+
+-   Add more taxonomy options to the post navigation link. ([48912](https://github.com/WordPress/gutenberg/pull/48912))
+-   Add: Footnotes support for other CPT's. ([57353](https://github.com/WordPress/gutenberg/pull/57353))
+-   Better navigation link variations for post types / taxonomies. ([56100](https://github.com/WordPress/gutenberg/pull/56100))
+-   Remove "blocks" from copy and delete labels. ([57769](https://github.com/WordPress/gutenberg/pull/57769))
+-   Pullquote Block: Add padding and margin support. ([45731](https://github.com/WordPress/gutenberg/pull/45731))
+-   Video Block: Add raw transformation from `video` html. ([47159](https://github.com/WordPress/gutenberg/pull/47159))
+-   Aspect ratio: Remove support on the Group block for now. ([58414](https://github.com/WordPress/gutenberg/pull/58414))
+-   Image block: Move UI for lightbox from sidebar to the content toolbar alongside link settings. ([57608](https://github.com/WordPress/gutenberg/pull/57608))
+
+#### Data Views
+
+-   DataViews: Enable grid layout for templates & parts by default. ([58137](https://github.com/WordPress/gutenberg/pull/58137))
+-   DataViews: Make dataviews powered page patterns stable. ([58139](https://github.com/WordPress/gutenberg/pull/58139))
+-   DataViews: Make the "Manage Pages" stable. ([58166](https://github.com/WordPress/gutenberg/pull/58166))
+-   Dataviews: Add Bulk actions to page. ([57826](https://github.com/WordPress/gutenberg/pull/57826))
+
+#### Site Editor
+
+-   Group templates in sidebar list. ([57711](https://github.com/WordPress/gutenberg/pull/57711))
+-   Initial routing refactoring to separate preview from list view. ([57938](https://github.com/WordPress/gutenberg/pull/57938))
+-   Iterate on warning text for block removal for query/post template/post content. ([58138](https://github.com/WordPress/gutenberg/pull/58138))
+-   Site editor: Add global styles changes to save flow. ([57470](https://github.com/WordPress/gutenberg/pull/57470))
+-   Editor: Unify the Editor Mode preference. ([57642](https://github.com/WordPress/gutenberg/pull/57642))
+-   Live Preview: Show the current theme name on the theme activation modal. ([57588](https://github.com/WordPress/gutenberg/pull/57588))
+-   Unify the preferences modal UI between post and site editor. ([57639](https://github.com/WordPress/gutenberg/pull/57639))
+-   Remove right negative margin from pinned items. ([57666](https://github.com/WordPress/gutenberg/pull/57666))
+-   Update style revision top toolbar text. ([58057](https://github.com/WordPress/gutenberg/pull/58057))
+
+#### Block API
+
+-   Block Bindings: Update source registration syntax and remove APIs that should be private. ([58205](https://github.com/WordPress/gutenberg/pull/58205))
+-   Block Hooks: Do not remove toggle if hooked block is present elsewhere. ([57928](https://github.com/WordPress/gutenberg/pull/57928))
+
+#### Synced Patterns
+
+-   Add basic pattern overrides end-to-end tests. ([57792](https://github.com/WordPress/gutenberg/pull/57792))
+-   Use a patch format and support `linkTarget` of `core/button` for Pattern Overrides. ([58165](https://github.com/WordPress/gutenberg/pull/58165))
+
+#### Patterns
+
+-   Add image block support for pattern overrides. ([57909](https://github.com/WordPress/gutenberg/pull/57909))
+-   Outline editable blocks that are within a content-locked container. ([57901](https://github.com/WordPress/gutenberg/pull/57901))
+-   Change text on pattern reset button. ([58286](https://github.com/WordPress/gutenberg/pull/58286))
+
+#### Post Editor
+
+-   Post Lock: Use the new modal size preset. ([58197](https://github.com/WordPress/gutenberg/pull/58197))
+-   Add description to the save panel header when nothing is checked. ([57716](https://github.com/WordPress/gutenberg/pull/57716))
+
+#### Font Library
+
+-   Update the default collection data URL to the wordpress.org cdn. ([58186](https://github.com/WordPress/gutenberg/pull/58186))
+-   Font Library: Refactor stylesheet using CSS variables ([58237](https://github.com/WordPress/gutenberg/pull/58237))
+-   Font Library Modal: Reset the selected font when installing a new font. ([57817](https://github.com/WordPress/gutenberg/pull/57817))
+-   Font Library: Disable font library UI using a PHP filter. ([57818](https://github.com/WordPress/gutenberg/pull/57818))
+-   Font Library: Filter fonts upload directory. ([57697](https://github.com/WordPress/gutenberg/pull/57697))
+-   Font Library: Use data or src file to define font collection data. ([57734](https://github.com/WordPress/gutenberg/pull/57734))
+-   Improve font collection rest controller. ([58222](https://github.com/WordPress/gutenberg/pull/58222))
+-   Make notices more consistent. ([58180](https://github.com/WordPress/gutenberg/pull/58180))
+-   Updates Font Families and Font Faces endpoints context param. ([58287](https://github.com/WordPress/gutenberg/pull/58287))
+
+#### Commands
+
+-   Minor command tweaks. ([58148](https://github.com/WordPress/gutenberg/pull/58148))
+
+#### Extensibility
+
+-   Update Navigation block to render hooked inner blocks. ([57754](https://github.com/WordPress/gutenberg/pull/57754))
+-   Add gettext content when translating 'Header'. ([51066](https://github.com/WordPress/gutenberg/pull/51066))
+
+#### Template Editor
+
+-   Remove `template-only` mode from editor and edit-post packages. ([57700](https://github.com/WordPress/gutenberg/pull/57700))
+
+### New APIs
+
+#### Block API
+
+-   Block Bindings API: Add block bindings PHP registration mechanisms and "Post meta" source under the experimental flag. ([57249](https://github.com/WordPress/gutenberg/pull/57249))
+-   Block Bindings API: Refactor logic into Block Bindings class and singleton pattern. ([57742](https://github.com/WordPress/gutenberg/pull/57742))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Avatar block: Fix broken aligments in the editor. ([58114](https://github.com/WordPress/gutenberg/pull/58114))
+-   Embed Block: Fix retry processing when embedding with trailing slash fails. ([58007](https://github.com/WordPress/gutenberg/pull/58007))
+-   Lightbox: Fix "Expand on click" control being disabled unintentionally. ([56053](https://github.com/WordPress/gutenberg/pull/56053))
+-   Modified Date Block: Don't render change date tool. ([57914](https://github.com/WordPress/gutenberg/pull/57914))
+-   Only prioritise Quote transform where relevant. ([57749](https://github.com/WordPress/gutenberg/pull/57749))
+-   Query Loop: Fix posts list variation detection. ([58194](https://github.com/WordPress/gutenberg/pull/58194))
+-   Block Hooks API: Update Navigation block feature gate. ([58388](https://github.com/WordPress/gutenberg/pull/58388))
+
+#### Components
+
+-   Button: Always render the Tooltip component even when a tooltip should not be shown. ([56490](https://github.com/WordPress/gutenberg/pull/56490))
+-   CustomSelect: Adjust `renderSelectedValue` to fix sizing. ([57865](https://github.com/WordPress/gutenberg/pull/57865))
+-   ToggleGroupControl: Improve controlled value detection. ([57770](https://github.com/WordPress/gutenberg/pull/57770))
+-   Tooltip: Accept specific tooltip props. ([58125](https://github.com/WordPress/gutenberg/pull/58125))
+-   Tooltip: Forward and merge inner tooltip props correctly. ([57878](https://github.com/WordPress/gutenberg/pull/57878))
+-   Bring back the chevron. ([57807](https://github.com/WordPress/gutenberg/pull/57807))
+-   Preferences: Add a proxy to retrieve the deprecated preferences with a deprecation message. ([58016](https://github.com/WordPress/gutenberg/pull/58016))
+
+#### Data Views
+
+-   DataViews: Default sort order in templates by title. ([58175](https://github.com/WordPress/gutenberg/pull/58175))
+-   DataViews: Don't always display horizontal scrollbar. ([58101](https://github.com/WordPress/gutenberg/pull/58101))
+-   DataViews: Fix author sorting in templates and template parts. ([58167](https://github.com/WordPress/gutenberg/pull/58167))
+-   Remove unused argument from sprintf in pagination.js. ([57823](https://github.com/WordPress/gutenberg/pull/57823))
+-   DataViews: Fix safari grid row height issue. ([58302](https://github.com/WordPress/gutenberg/pull/58302))
+-   DataViews: Fix table view cell wrapper and BlockPreviews. ([58062](https://github.com/WordPress/gutenberg/pull/58062))
+
+#### Patterns
+
+-   Add black border back when editing synced pattern in the post editor. ([57631](https://github.com/WordPress/gutenberg/pull/57631))
+-   Outline editable blocks when in a pattern that has locked children. ([57991](https://github.com/WordPress/gutenberg/pull/57991))
+-   Remove text align control for paragraph, heading, and button in contentOnly editing mode. ([57906](https://github.com/WordPress/gutenberg/pull/57906))
+-   Pattern Categories: Fix capitalization. ([58112](https://github.com/WordPress/gutenberg/pull/58112))
+-   Fix flaky "create a new pattern" test. ([57747](https://github.com/WordPress/gutenberg/pull/57747))
+-   Block Bindings: Fix bindings image placeholder showing in patterns overrides. ([58252](https://github.com/WordPress/gutenberg/pull/58252))
+
+#### List View
+
+-   Image Block: Make block name affect list view. ([57955](https://github.com/WordPress/gutenberg/pull/57955))
+-   More Block: Make block name affect list view. ([58160](https://github.com/WordPress/gutenberg/pull/58160))
+
+#### Block API
+
+-   Block Hooks: Fix toggle. ([57956](https://github.com/WordPress/gutenberg/pull/57956))
+-   Fix formats not working in block bindings content. ([58055](https://github.com/WordPress/gutenberg/pull/58055))
+
+#### Global Styles
+
+-   Correctly decode border color values. ([57876](https://github.com/WordPress/gutenberg/pull/57876))
+-   Fix: Theme.json application of custom root selector for styles. ([58050](https://github.com/WordPress/gutenberg/pull/58050))
+
+#### Data Layer
+
+-   Data: Allow binding registry selector to multiple registries. ([57943](https://github.com/WordPress/gutenberg/pull/57943))
+-   Data: Fix memoized createRegistrySelector. ([57888](https://github.com/WordPress/gutenberg/pull/57888))
+
+#### Typography
+
+-   #56734 When there is no font, the border should not appear. Display further guidance text. ([56825](https://github.com/WordPress/gutenberg/pull/56825))
+-   Fluid typography: Do not calculate fluid font size when min and max viewport widths are equal. ([57866](https://github.com/WordPress/gutenberg/pull/57866))
+
+#### Block Editor
+
+-   Fix regression: Content locking does not stops when an outside block is selected. ([57737](https://github.com/WordPress/gutenberg/pull/57737))
+-   LinkControl: Remove unnecessary right padding of input fields. ([57784](https://github.com/WordPress/gutenberg/pull/57784))
+
+#### Custom Fields
+
+-   Block Bindings: Fix button popover not showing in patterns. ([58219](https://github.com/WordPress/gutenberg/pull/58219))
+
+#### Font Library
+
+-   Fix typo. ([58193](https://github.com/WordPress/gutenberg/pull/58193))
+-   Removed <header> <main> and <footer> elements from Font Library Modal ([58221](https://github.com/WordPress/gutenberg/pull/58221))
+
+#### Synced Patterns
+
+-   Fix losing overrides after detaching patterns. ([58164](https://github.com/WordPress/gutenberg/pull/58164))
+
+#### Interactivity API
+
+-   Prevent `wp-data-on=""` from creating `onDefault` handlers. ([57925](https://github.com/WordPress/gutenberg/pull/57925))
+-   Prevent usage of `gutenberg_url` in block-library ([58242](https://github.com/WordPress/gutenberg/pull/58242))
+-   Interactivity API: Fix data-wp-on-document flaky test. ([58008](https://github.com/WordPress/gutenberg/pull/58008))
+-   Interactivity API: Fix flaky test on-window. ([58134](https://github.com/WordPress/gutenberg/pull/58134))
+-   Fix flaky test on-window, remove duplicate expect on-document. ([58181](https://github.com/WordPress/gutenberg/pull/58181))
+-   Interactivity: Fix broken react usage in published package. ([58258](https://github.com/WordPress/gutenberg/pull/58258))
+
+#### CSS & Styling
+
+-   Styles revisions: Remove body padding. ([57748](https://github.com/WordPress/gutenberg/pull/57748))
+
+#### Templates API
+
+-   Fix visual indication of switch to default template in the post editor. ([57718](https://github.com/WordPress/gutenberg/pull/57718))
+
+#### Site Editor
+
+-   (editor)(fix) Append the `edit-post-header-toolbar` class in NavigableToolbar for backward compatibility with plugin GUI injections. ([58154](https://github.com/WordPress/gutenberg/pull/58154))
+-   Fix site editor layout regressions. ([58077](https://github.com/WordPress/gutenberg/pull/58077))
+
+### Accessibility
+
+#### Site Editor
+
+-   Fix font variants count color contrast ratio and l10n. ([58117](https://github.com/WordPress/gutenberg/pull/58117))
+-   Make the site hub View Site link always visible. ([57423](https://github.com/WordPress/gutenberg/pull/57423))
+
+#### Block Editor
+
+-   Fix parent selector button focus style and metrics. ([57728](https://github.com/WordPress/gutenberg/pull/57728))
+-   Restore visual separator between mover buttons when show button label is on. ([57640](https://github.com/WordPress/gutenberg/pull/57640))
+
+#### Widgets Editor
+
+-   Fix Widgets page Undo and Redo accessibility and keyboard interaction. ([57677](https://github.com/WordPress/gutenberg/pull/57677))
+
+### Performance
+
+-   Add patterns load test. ([57828](https://github.com/WordPress/gutenberg/pull/57828))
+-   Block editor: Avoid list re-rendering on select. ([57188](https://github.com/WordPress/gutenberg/pull/57188))
+-   Block editor: Don't register shortcuts for preview editors. ([57984](https://github.com/WordPress/gutenberg/pull/57984))
+-   Block editor: Fix performance regression after #57950. ([57971](https://github.com/WordPress/gutenberg/pull/57971))
+-   Block editor: Use context for useBlockEditingMode. ([57950](https://github.com/WordPress/gutenberg/pull/57950))
+-   BlockSwitcher: Defer transform calculations until the Dropdown is open. ([57892](https://github.com/WordPress/gutenberg/pull/57892))
+-   Call variation through callback so it's only loaded when needed - in support of trac 59969. ([56952](https://github.com/WordPress/gutenberg/pull/56952))
+-   Editor styles: Cache transform. ([57810](https://github.com/WordPress/gutenberg/pull/57810))
+-   Footnotes: Combine format store subscription. ([58129](https://github.com/WordPress/gutenberg/pull/58129))
+-   Iframe: Calc compat styles once per page load. ([57798](https://github.com/WordPress/gutenberg/pull/57798))
+-   Measure typing with the top toolbar enabled. ([57709](https://github.com/WordPress/gutenberg/pull/57709))
+-   Meta boxes: Don't initialise if there are none. ([57182](https://github.com/WordPress/gutenberg/pull/57182))
+-   Patterns: Avoid fetching on load. ([57999](https://github.com/WordPress/gutenberg/pull/57999))
+-   Site editor: Avoid fetching themes on load. ([57985](https://github.com/WordPress/gutenberg/pull/57985))
+-   Site editor: Reduce artificial loading delay from 1s to 100ms. ([57953](https://github.com/WordPress/gutenberg/pull/57953))
+-   Site editor: Remove store subscription per block. ([57995](https://github.com/WordPress/gutenberg/pull/57995))
+-   Template Part & Query: Avoid server requests on mount. ([57987](https://github.com/WordPress/gutenberg/pull/57987))
+-   Template part block: Avoid parsing ALL patterns on mount. ([57856](https://github.com/WordPress/gutenberg/pull/57856))
+
+#### Block Editor
+
+-   Revert "Block editor: Avoid list re-rendering on select". ([58147](https://github.com/WordPress/gutenberg/pull/58147))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs for `EditorNotices`. ([57772](https://github.com/WordPress/gutenberg/pull/57772))
+
+### Experiments
+
+#### Data Views
+
+-   Add: Bulk actions to dataviews with the new design. ([57255](https://github.com/WordPress/gutenberg/pull/57255))
+-   Data view list layout: Fix thumbnail dimensions. ([57774](https://github.com/WordPress/gutenberg/pull/57774))
+-   Data views table layout: Update cell vertical alignment. ([57804](https://github.com/WordPress/gutenberg/pull/57804))
+-   DataViews: Add description to pages. ([57793](https://github.com/WordPress/gutenberg/pull/57793))
+-   DataViews: Add front page to pages page sidebar. ([57759](https://github.com/WordPress/gutenberg/pull/57759))
+-   DataViews: Better management of `layout` param in templates. ([58116](https://github.com/WordPress/gutenberg/pull/58116))
+-   DataViews: Make list layout the default for templates with the experiment enabled. ([57933](https://github.com/WordPress/gutenberg/pull/57933))
+-   DataViews: Revert list view as default for pages. ([58081](https://github.com/WordPress/gutenberg/pull/58081))
+-   DataViews: Revert list view as default for templates. ([58079](https://github.com/WordPress/gutenberg/pull/58079))
+-   DataViews: Set primary field styles. ([57846](https://github.com/WordPress/gutenberg/pull/57846))
+-   DataViews: Show loading / no result message for the list layout. ([57764](https://github.com/WordPress/gutenberg/pull/57764))
+-   DataViews: Update template parts view. ([57952](https://github.com/WordPress/gutenberg/pull/57952))
+-   DataViews: Use button for patterns, pages and templates preview field. ([58071](https://github.com/WordPress/gutenberg/pull/58071))
+-   DataViews: Use table layout for templates when experiment disabled. ([57960](https://github.com/WordPress/gutenberg/pull/57960))
+-   Stabilise view options button icon. ([57964](https://github.com/WordPress/gutenberg/pull/57964))
+-   Update Grid layout design. ([57880](https://github.com/WordPress/gutenberg/pull/57880))
+-   Update Pages preview field display. ([57919](https://github.com/WordPress/gutenberg/pull/57919))
+-   Update Templates table layout. ([57930](https://github.com/WordPress/gutenberg/pull/57930))
+-   Update: Show template sources on templates Dataviews sidebar. ([58124](https://github.com/WordPress/gutenberg/pull/58124))
+
+#### Synced Patterns
+
+-   Add a control to reset pattern overrides. ([57845](https://github.com/WordPress/gutenberg/pull/57845))
+-   Allow heading and button in Pattern Overrides. ([57789](https://github.com/WordPress/gutenberg/pull/57789))
+
+#### Typography
+
+-   Download then upload font face assets when installing from a collection. ([57694](https://github.com/WordPress/gutenberg/pull/57694))
+-   Use `slug` instead of `id` for Font Collection. ([57735](https://github.com/WordPress/gutenberg/pull/57735))
+
+#### REST API
+
+-   Font Library Refactor. ([57688](https://github.com/WordPress/gutenberg/pull/57688))
+
+#### Block Editor
+
+-   Allow drag and drop to create Rows and Galleries. ([56186](https://github.com/WordPress/gutenberg/pull/56186))
+
+### Documentation
+
+-   Add a video demonstration to the Quick Start Guide. ([57834](https://github.com/WordPress/gutenberg/pull/57834))
+-   Button: Improve `disabled`-related prop descriptions. ([57864](https://github.com/WordPress/gutenberg/pull/57864))
+-   Components: Move CHANGELOG entries under the correct release. ([57885](https://github.com/WordPress/gutenberg/pull/57885))
+-   Docs: Fix typo in "The block wrapper" document. ([58106](https://github.com/WordPress/gutenberg/pull/58106))
+-   Docs: Use 'key' in 'editor.BlockEdit' filter code examples. ([58119](https://github.com/WordPress/gutenberg/pull/58119))
+-   Document files/directories requiring backmerging to WP Core for major release. ([58064](https://github.com/WordPress/gutenberg/pull/58064))
+-   Fix the iframe markup of the embed video in the Quick Start Guide. ([57857](https://github.com/WordPress/gutenberg/pull/57857))
+-   Fix: Link to the nodejs release page. ([57816](https://github.com/WordPress/gutenberg/pull/57816))
+-   Fix: Typo on BlockListBlock comments. ([57814](https://github.com/WordPress/gutenberg/pull/57814))
+-   Fix: Typos on \_\_unstableSetTemporarilyEditingAsBlocks documentation. ([57768](https://github.com/WordPress/gutenberg/pull/57768))
+-   Font Library: Add font collection JSON schema. ([57736](https://github.com/WordPress/gutenberg/pull/57736))
+-   Prefixes all php filters with wpdocs\_. ([53914](https://github.com/WordPress/gutenberg/pull/53914))
+-   Remove the unnecessary TOC and fix grammar/formatting in the Patterns doc. ([57825](https://github.com/WordPress/gutenberg/pull/57825))
+-   Remove the 👋 emoji from the Block Editor Handbook. ([58023](https://github.com/WordPress/gutenberg/pull/58023))
+-   Update versions-in-wordpress.md. ([57916](https://github.com/WordPress/gutenberg/pull/57916))
+-   [Type] Developer Documentation - Fix removeAllNotices dispatch on the removeAllNotices doc section of @wordpress/notices. ([57436](https://github.com/WordPress/gutenberg/pull/57436))
+
+### Code Quality
+
+#### Components
+
+-   PaletteEdit: Improve unit tests. ([57645](https://github.com/WordPress/gutenberg/pull/57645))
+-   Tooltip and Button: Tidy up unit tests. ([57975](https://github.com/WordPress/gutenberg/pull/57975))
+-   Tooltip: Add test for classname leakage. ([58182](https://github.com/WordPress/gutenberg/pull/58182))
+-   Remove unneeded `margin: 0` override for `Notice` component consumer. ([57794](https://github.com/WordPress/gutenberg/pull/57794))
+-   Shadows: Prevent empty style object when removing shadow. ([58155](https://github.com/WordPress/gutenberg/pull/58155))
+
+#### Block Editor
+
+-   Soft deprecate custom 'pure' HoC in favor of 'React.memo'. ([57173](https://github.com/WordPress/gutenberg/pull/57173))
+-   Stabilise RecursionProvider and useHasRecursion APIs. ([58120](https://github.com/WordPress/gutenberg/pull/58120))
+-   Tidy up block patterns selectors. ([57913](https://github.com/WordPress/gutenberg/pull/57913))
+-   Shadow: Remove additional wrapper around getShadowClassesAndStyles. ([58297](https://github.com/WordPress/gutenberg/pull/58297))
+
+#### Block Library
+
+-   Gallery Block: Remove duplicate return statement. ([57746](https://github.com/WordPress/gutenberg/pull/57746))
+-   Navigation: Move the renderer class to the main navigation file. ([57979](https://github.com/WordPress/gutenberg/pull/57979))
+-   Fix comments block. ([57820](https://github.com/WordPress/gutenberg/pull/57820))
+-   Rename \_\_experimentalGetGlobalBlocksByName to getBlocksByName. ([58156](https://github.com/WordPress/gutenberg/pull/58156))
+-   Block Hooks API: Remove $post check from Navigation hooked blocks meta fn. ([58379](https://github.com/WordPress/gutenberg/pull/58379))
+-   Post navigation link: Coding standard fixes. ([58380](https://github.com/WordPress/gutenberg/pull/58380))
+-   Update docblock for render_block_core_pattern. ([58382](https://github.com/WordPress/gutenberg/pull/58382))
+-   Block Hooks API: Update doc block for block_core_navigation_insert_hooked_blocks. ([58378](https://github.com/WordPress/gutenberg/pull/58378))
+
+#### Font Library
+
+-   Remove WP_Font_Family class that is no longer used. ([58184](https://github.com/WordPress/gutenberg/pull/58184))
+-   Font Library: Remove 'version' property from font collection schema. ([58025](https://github.com/WordPress/gutenberg/pull/58025))
+-   [Fonts API] removing files and files loading no longer needed. ([57972](https://github.com/WordPress/gutenberg/pull/57972))
+-   Remove unused utilities and rename class. ([58342](https://github.com/WordPress/gutenberg/pull/58342))
+-   Rename the slug of the google fonts collection from 'default-font-collection' to 'google-fonts'. ([58331](https://github.com/WordPress/gutenberg/pull/58331))
+-   Refactored download/upload logic to support font faces with multiple src assets. ([58216](https://github.com/WordPress/gutenberg/pull/58216))
+-   Font Library: Addresses additional REST API feedback. ([58333](https://github.com/WordPress/gutenberg/pull/58333))
+
+#### Block Directory
+
+-   DownloadableBlocksPanel: Remove withSelect in favor of useSelect. ([58109](https://github.com/WordPress/gutenberg/pull/58109))
+
+#### Patterns
+
+-   Stabilize the pattern overrides block context. ([58102](https://github.com/WordPress/gutenberg/pull/58102))
+-   Remove pattern override experiment completely. ([58105](https://github.com/WordPress/gutenberg/pull/58105))
+-   Update pattern overrides to use a hard coded support array. ([57912](https://github.com/WordPress/gutenberg/pull/57912))
+-   Block Bindings: Change `core/pattern-attributes` source for `core/pattern-overrides`. ([58434](https://github.com/WordPress/gutenberg/pull/58434))
+
+#### Block API
+
+-   Block Bindings: Remove the experimental flag. ([58089](https://github.com/WordPress/gutenberg/pull/58089))
+-   Block Renaming - move backported WP 6.5 code to 6.5 compat dir. ([58126](https://github.com/WordPress/gutenberg/pull/58126))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs in 'PostScheduleCheck'. ([57833](https://github.com/WordPress/gutenberg/pull/57833))
+
+#### Script Modules API
+
+-   Update the code and move it to the compat/wordpress-6.5 folder. ([57778](https://github.com/WordPress/gutenberg/pull/57778))
+
+#### Data Views
+
+-   Remove obsolete check from dataviews modal actions title. ([57753](https://github.com/WordPress/gutenberg/pull/57753))
+
+#### Interactivity API
+
+-   Remove `data-wp-slot` and `data-wp-fill`. ([57854](https://github.com/WordPress/gutenberg/pull/57854))
+-   Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([57974](https://github.com/WordPress/gutenberg/pull/57974))
+
+#### HTML API
+
+-   Backport updates from Core. ([57022](https://github.com/WordPress/gutenberg/pull/57022))
+
+#### Custom Fields
+
+-   Block Bindings: Simplify block bindings object. ([58337](https://github.com/WordPress/gutenberg/pull/58337))
+-   Block Bindings: Adapt block bindings to wordpress code latest changes. ([58383](https://github.com/WordPress/gutenberg/pull/58383))
+
+### Tools
+
+#### Testing
+
+-   Add `setGutenbergExperiments` to `requestUtils`. ([56663](https://github.com/WordPress/gutenberg/pull/56663))
+-   Add: End to end test to content locking stop editing as blocks behavior. ([57812](https://github.com/WordPress/gutenberg/pull/57812))
+-   Attempt to fix php unit tests (variations api change). ([58090](https://github.com/WordPress/gutenberg/pull/58090))
+-   Migrate 'block grouping' end-to-end tests to Playwright. ([57684](https://github.com/WordPress/gutenberg/pull/57684))
+-   Migrate 'embedding' end-to-end tests to Playwright. ([57969](https://github.com/WordPress/gutenberg/pull/57969))
+-   Migrate 'typewriter' end-to-end tests to Playwright. ([57673](https://github.com/WordPress/gutenberg/pull/57673))
+-   Remove unused Navigation block end-to-end test fixtures. ([57848](https://github.com/WordPress/gutenberg/pull/57848))
+
+#### Build Tooling
+
+-   Update caniuse-lite package. ([58087](https://github.com/WordPress/gutenberg/pull/58087))
+-   Update the cherry pick script to work with the new version of gh. ([57917](https://github.com/WordPress/gutenberg/pull/57917))
+-   Scripts: Remove unused variable in bin/list-experimental-api-matches.sh. ([57771](https://github.com/WordPress/gutenberg/pull/57771))
+-   (chore) Revert bump to the v17.5.1 (draft) due to bug in the release found by manual testing. ([58027](https://github.com/WordPress/gutenberg/pull/58027))
+-   Fix misplaced ReactRefreshWebpackPlugin. ([57777](https://github.com/WordPress/gutenberg/pull/57777))
+-   Automate creation of Issue for major release PHP synchronisation. ([57890](https://github.com/WordPress/gutenberg/pull/57890))
+-   Remove check-latest-npm validation. ([57797](https://github.com/WordPress/gutenberg/pull/57797))
+-   core-js: Only polyfill stable features. ([57674](https://github.com/WordPress/gutenberg/pull/57674))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @kt-12: Call variation through callback so it's only loaded when needed - in support of trac 59969. ([56952](https://github.com/WordPress/gutenberg/pull/56952))
+-   @leomuniz: [Type] Developer Documentation - Fix removeAllNotices dispatch on the removeAllNotices doc section of @wordpress/notices. ([57436](https://github.com/WordPress/gutenberg/pull/57436))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewserong @annezazu @artemiomorales @arthur791004 @atachibana @bacoords @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @creativecoder @DAreRodz @dcalhoun @derekblank @dmsnell @draganescu @dsas @ecgan @ellatrix @fluiddot @fullofcaffeine @gaambo @geriux @getdave @glendaviesnz @gonzomir @inc2734 @jameskoster @jeryj @jffng @jorgefilipecosta @jsnajdr @kevin940726 @kt-12 @leomuniz @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @oguzkocer @pbking @ramonjd @richtabor @SantosGuillamot @scruffian @SiobhyB @sirreal @swissspidy @t-hamano @talldan @tellthemachines @tjcafferkey @tyxla @vcanales @youknowriad
+
+= 17.5.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+
+-   Navigation: Update the navigaiton renderer class name so that it doesn't clash with the one backported to core. ([58429](https://github.com/WordPress/gutenberg/pull/58429))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@scruffian
+
+= 17.6.0-rc.2 =
+
+## Changelog
+
+### Enhancements
+
+#### Font Library
+
+-   Font Library: Refactor stylesheet using CSS variables ([#58237]https://github.com/WordPress/gutenberg/pull/58237)
+
+### Bug Fixes
+
+#### Interactivity API
+
+-   Prevent usage of `gutenberg_url` in block-library([#58242]https://github.com/WordPress/gutenberg/pull/58242)
+
+#### Font Library
+
+-   Removed <header> <main> and <footer> elements from Font Library Modal ([#58221]https://github.com/WordPress/gutenberg/pull/58221)
+
+### Experiments
+
+#### Design Tools
+
+-   Dimensions: Add Aspect Ratio block support. ([#56897](https://github.com/WordPress/gutenberg/pull/56897))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong @t-hamano @luisherranz @pbking
+
+= 17.6.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Interactivity API
+
+-   Add `wp-data-on-window` and `wp-data-on-document` directives. ([57931](https://github.com/WordPress/gutenberg/pull/57931))
+-   Add `wp-each` directive. ([57859](https://github.com/WordPress/gutenberg/pull/57859))
+-   Add `wp-run` directive and `useInit` & `useWatch` hooks. ([57805](https://github.com/WordPress/gutenberg/pull/57805))
+
+#### Typography
+
+-   Add defaultFontSizes option to theme.json. ([56661](https://github.com/WordPress/gutenberg/pull/56661))
+-   Font Library: Add wp_get_font_dir() function. ([57730](https://github.com/WordPress/gutenberg/pull/57730))
+
+#### Custom Fields
+
+-   Block Bindings: Disable editing of bound block attributes in editor UI. ([58085](https://github.com/WordPress/gutenberg/pull/58085))
+
+#### Block Editor
+
+-   Add effects/box shadow tools to block inspector. ([57654](https://github.com/WordPress/gutenberg/pull/57654))
+
+### Enhancements
+
+-   Add gettext content when translating 'Header'. ([51066](https://github.com/WordPress/gutenberg/pull/51066))
+-   Disable lock button if user cannot control lock state. ([57274](https://github.com/WordPress/gutenberg/pull/57274))
+-   Editor: Unify the Editor Mode preference. ([57642](https://github.com/WordPress/gutenberg/pull/57642))
+-   Element: Start reexporting PureComponent. ([58076](https://github.com/WordPress/gutenberg/pull/58076))
+-   Live Preview: Show the current theme name on the theme activation modal. ([57588](https://github.com/WordPress/gutenberg/pull/57588))
+-   Remove right negative margin from pinned items. ([57666](https://github.com/WordPress/gutenberg/pull/57666))
+-   Unify the preferences modal UI between post and site editor. ([57639](https://github.com/WordPress/gutenberg/pull/57639))
+-   Update style revision top toolbar text. ([58057](https://github.com/WordPress/gutenberg/pull/58057))
+-   Use ClipboardJS latest version and clean up focus loss workaround. ([57156](https://github.com/WordPress/gutenberg/pull/57156))
+
+#### Components
+
+-   Add opt-in prop for 40px default size for `BoxControl`, `BorderControl`, and `BorderBoxControl`. ([56185](https://github.com/WordPress/gutenberg/pull/56185))
+-   BorderControl: Replace style picker with ToggleGroupControl. ([57562](https://github.com/WordPress/gutenberg/pull/57562))
+-   ColorPicker: Store internal HSLA state for better slider UX. ([57555](https://github.com/WordPress/gutenberg/pull/57555))
+-   Migrate PaletteEdit and CircularOptionPicker tests from user-event to ariakit/test. ([57809](https://github.com/WordPress/gutenberg/pull/57809))
+-   Replace `TabPanel` with `Tabs` in the Editor Preferences Modal. ([57293](https://github.com/WordPress/gutenberg/pull/57293))
+-   Theme: Set `color` on wrapper. ([58095](https://github.com/WordPress/gutenberg/pull/58095))
+-   Tooltip: No-op when nested inside another Tooltip component. ([57202](https://github.com/WordPress/gutenberg/pull/57202))
+-   `BoxControl`: Update design. ([56665](https://github.com/WordPress/gutenberg/pull/56665))
+
+#### Interactivity API
+
+-   Render the root interactive blocks. ([57729](https://github.com/WordPress/gutenberg/pull/57729))
+-   Interactivity Router: Replace `data-wp-navigation-id` with `data-wp-router-region`. ([58191](https://github.com/WordPress/gutenberg/pull/58191))
+-   Interactivity: Export `withScope()` and allow to use it with asynchronous operations. ([58013](https://github.com/WordPress/gutenberg/pull/58013))
+-   Prevent the use of components in `wp-text`. ([57879](https://github.com/WordPress/gutenberg/pull/57879))
+-   Remove wp-data-navigation-link directive. ([57853](https://github.com/WordPress/gutenberg/pull/57853))
+-   Server Directive Processing Refactor. ([58066](https://github.com/WordPress/gutenberg/pull/58066))
+-   Update `preact`, `@preact/signals` and `deepsignal` dependencies. ([57891](https://github.com/WordPress/gutenberg/pull/57891))
+
+#### Block Editor
+
+-   Add copy link button to Link UI. ([58170](https://github.com/WordPress/gutenberg/pull/58170))
+-   Improve LinkControl preview. ([57775](https://github.com/WordPress/gutenberg/pull/57775))
+-   Keep Link UI open upon initial link creation when used in RichText. ([57726](https://github.com/WordPress/gutenberg/pull/57726))
+-   List View: Displace list view items when dragging (a bit more WYSIWYG). ([56625](https://github.com/WordPress/gutenberg/pull/56625))
+-   Show initial suggestions in rich text Link UI. ([57743](https://github.com/WordPress/gutenberg/pull/57743))
+
+#### Typography
+
+-   Font Library Modal: Reset the selected font when installing a new font. ([57817](https://github.com/WordPress/gutenberg/pull/57817))
+-   Font Library: Disable font library UI using a PHP filter. ([57818](https://github.com/WordPress/gutenberg/pull/57818))
+-   Font Library: Filter fonts upload directory. ([57697](https://github.com/WordPress/gutenberg/pull/57697))
+-   Font Library: Use data or src file to define font collection data. ([57734](https://github.com/WordPress/gutenberg/pull/57734))
+
+#### Block Library
+
+-   Add more taxonomy options to the post navigation link. ([48912](https://github.com/WordPress/gutenberg/pull/48912))
+-   Add: Footnotes support for other CPT's. ([57353](https://github.com/WordPress/gutenberg/pull/57353))
+-   Better navigation link variations for post types / taxonomies. ([56100](https://github.com/WordPress/gutenberg/pull/56100))
+-   Remove "blocks" from copy and delete labels. ([57769](https://github.com/WordPress/gutenberg/pull/57769))
+
+#### Data Views
+
+-   DataViews: Enable grid layout for templates & parts by default. ([58137](https://github.com/WordPress/gutenberg/pull/58137))
+-   DataViews: Make dataviews powered page patterns stable. ([58139](https://github.com/WordPress/gutenberg/pull/58139))
+-   DataViews: Make the "Manage Pages" stable. ([58166](https://github.com/WordPress/gutenberg/pull/58166))
+
+#### Site Editor
+
+-   Group templates in sidebar list. ([57711](https://github.com/WordPress/gutenberg/pull/57711))
+-   Initial routing refactoring to separate preview from list view. ([57938](https://github.com/WordPress/gutenberg/pull/57938))
+-   Iterate on warning text for block removal for query/post template/post content. ([58138](https://github.com/WordPress/gutenberg/pull/58138))
+
+#### Block API
+
+-   Block Bindings: Update source registration syntax and remove APIs that should be private. ([58205](https://github.com/WordPress/gutenberg/pull/58205))
+-   Block Hooks: Do not remove toggle if hooked block is present elsewhere. ([57928](https://github.com/WordPress/gutenberg/pull/57928))
+
+#### Synced Patterns
+
+-   Add basic pattern overrides end-to-end tests. ([57792](https://github.com/WordPress/gutenberg/pull/57792))
+-   Use a patch format and support `linkTarget` of `core/button` for Pattern Overrides. ([58165](https://github.com/WordPress/gutenberg/pull/58165))
+
+#### Patterns
+
+-   Add image block support for pattern overrides. ([57909](https://github.com/WordPress/gutenberg/pull/57909))
+-   Outline editable blocks that are within a content-locked container. ([57901](https://github.com/WordPress/gutenberg/pull/57901))
+
+#### Post Editor
+
+-   Post Lock: Use the new modal size preset. ([58197](https://github.com/WordPress/gutenberg/pull/58197))
+
+#### Font Library
+
+-   Update the default collection data URL to the wordpress.org cdn. ([58186](https://github.com/WordPress/gutenberg/pull/58186))
+
+#### Commands
+
+-   Minor command tweaks. ([58148](https://github.com/WordPress/gutenberg/pull/58148))
+
+#### Extensibility
+
+-   Update Navigation block to render hooked inner blocks. ([57754](https://github.com/WordPress/gutenberg/pull/57754))
+
+#### Global Styles
+
+-   Site editor: Add global styles changes to save flow. ([57470](https://github.com/WordPress/gutenberg/pull/57470))
+
+#### Design Tools
+
+-   Pullquote Block: Add padding and margin support. ([45731](https://github.com/WordPress/gutenberg/pull/45731))
+
+### New APIs
+
+#### Block API
+
+-   Block Bindings API: Add block bindings PHP registration mechanisms and "Post meta" source under the experimental flag. ([57249](https://github.com/WordPress/gutenberg/pull/57249))
+-   Block Bindings API: Refactor logic into Block Bindings class and singleton pattern. ([57742](https://github.com/WordPress/gutenberg/pull/57742))
+
+### Bug Fixes
+
+-   (editor)(fix) Append the `edit-post-header-toolbar` class in NavigableToolbar for backward compatibility with plugin GUI injections. ([58154](https://github.com/WordPress/gutenberg/pull/58154))
+-   Bring back the chevron. ([57807](https://github.com/WordPress/gutenberg/pull/57807))
+-   Fix flaky "create a new pattern" test. ([57747](https://github.com/WordPress/gutenberg/pull/57747))
+-   Fix site editor layout regressions. ([58077](https://github.com/WordPress/gutenberg/pull/58077))
+-   Preferences: Add a proxy to retrieve the deprecated preferences with a deprecation message. ([58016](https://github.com/WordPress/gutenberg/pull/58016))
+-   Remove unused argument from sprintf in pagination.js. ([57823](https://github.com/WordPress/gutenberg/pull/57823))
+-   core-js: Only polyfill stable features. ([57674](https://github.com/WordPress/gutenberg/pull/57674))
+
+#### Block Library
+
+-   Avatar block: Fix broken aligments in the editor. ([58114](https://github.com/WordPress/gutenberg/pull/58114))
+-   Embed Block: Fix retry processing when embedding with trailing slash fails. ([58007](https://github.com/WordPress/gutenberg/pull/58007))
+-   Lightbox: Fix "Expand on click" control being disabled unintentionally. ([56053](https://github.com/WordPress/gutenberg/pull/56053))
+-   Modified Date Block: Don't render change date tool. ([57914](https://github.com/WordPress/gutenberg/pull/57914))
+-   Only prioritise Quote transform where relevant. ([57749](https://github.com/WordPress/gutenberg/pull/57749))
+-   Query Loop: Fix posts list variation detection. ([58194](https://github.com/WordPress/gutenberg/pull/58194))
+
+#### Components
+
+-   Button: Always render the Tooltip component even when a tooltip should not be shown. ([56490](https://github.com/WordPress/gutenberg/pull/56490))
+-   CustomSelect: Adjust `renderSelectedValue` to fix sizing. ([57865](https://github.com/WordPress/gutenberg/pull/57865))
+-   ToggleGroupControl: Improve controlled value detection. ([57770](https://github.com/WordPress/gutenberg/pull/57770))
+-   Tooltip: Accept specific tooltip props. ([58125](https://github.com/WordPress/gutenberg/pull/58125))
+-   Tooltip: Forward and merge inner tooltip props correctly. ([57878](https://github.com/WordPress/gutenberg/pull/57878))
+
+#### Data Views
+
+-   DataViews: Default sort order in templates by title. ([58175](https://github.com/WordPress/gutenberg/pull/58175))
+-   DataViews: Don't always display horizontal scrollbar. ([58101](https://github.com/WordPress/gutenberg/pull/58101))
+-   DataViews: Fix author sorting in templates and template parts. ([58167](https://github.com/WordPress/gutenberg/pull/58167))
+
+#### Patterns
+
+-   Add black border back when editing synced pattern in the post editor. ([57631](https://github.com/WordPress/gutenberg/pull/57631))
+-   Outline editable blocks when in a pattern that has locked children. ([57991](https://github.com/WordPress/gutenberg/pull/57991))
+-   Remove text align control for paragraph, heading, and button in contentOnly editing mode. ([57906](https://github.com/WordPress/gutenberg/pull/57906))
+
+#### List View
+
+-   Image Block: Make block name affect list view. ([57955](https://github.com/WordPress/gutenberg/pull/57955))
+-   More Block: Make block name affect list view. ([58160](https://github.com/WordPress/gutenberg/pull/58160))
+
+#### Block API
+
+-   Block Hooks: Fix toggle. ([57956](https://github.com/WordPress/gutenberg/pull/57956))
+-   Fix formats not working in block bindings content. ([58055](https://github.com/WordPress/gutenberg/pull/58055))
+
+#### Global Styles
+
+-   Correctly decode border color values. ([57876](https://github.com/WordPress/gutenberg/pull/57876))
+-   Fix: Theme.json application of custom root selector for styles. ([58050](https://github.com/WordPress/gutenberg/pull/58050))
+
+#### Data Layer
+
+-   Data: Allow binding registry selector to multiple registries. ([57943](https://github.com/WordPress/gutenberg/pull/57943))
+-   Data: Fix memoized createRegistrySelector. ([57888](https://github.com/WordPress/gutenberg/pull/57888))
+
+#### Typography
+
+-   #56734 When there is no font, the border should not appear. Display further guidance text. ([56825](https://github.com/WordPress/gutenberg/pull/56825))
+-   Fluid typography: Do not calculate fluid font size when min and max viewport widths are equal. ([57866](https://github.com/WordPress/gutenberg/pull/57866))
+
+#### Block Editor
+
+-   Fix regression: Content locking does not stops when an outside block is selected. ([57737](https://github.com/WordPress/gutenberg/pull/57737))
+-   LinkControl: Remove unnecessary right padding of input fields. ([57784](https://github.com/WordPress/gutenberg/pull/57784))
+
+#### Custom Fields
+
+-   Block Bindings: Fix button popover not showing in patterns. ([58219](https://github.com/WordPress/gutenberg/pull/58219))
+
+#### Font Library
+
+-   Fix typo. ([58193](https://github.com/WordPress/gutenberg/pull/58193))
+
+#### Synced Patterns
+
+-   Fix losing overrides after detaching patterns. ([58164](https://github.com/WordPress/gutenberg/pull/58164))
+
+#### Interactivity API
+
+-   Prevent `wp-data-on=""` from creating `onDefault` handlers. ([57925](https://github.com/WordPress/gutenberg/pull/57925))
+
+#### CSS & Styling
+
+-   Styles revisions: Remove body padding. ([57748](https://github.com/WordPress/gutenberg/pull/57748))
+
+#### Templates API
+
+-   Fix visual indication of switch to default template in the post editor. ([57718](https://github.com/WordPress/gutenberg/pull/57718))
+
+### Accessibility
+
+#### Site Editor
+
+-   Fix font variants count color contrast ratio and l10n. ([58117](https://github.com/WordPress/gutenberg/pull/58117))
+-   Make the site hub View Site link always visible. ([57423](https://github.com/WordPress/gutenberg/pull/57423))
+
+#### Block Editor
+
+-   Fix parent selector button focus style and metrics. ([57728](https://github.com/WordPress/gutenberg/pull/57728))
+-   Restore visual separator between mover buttons when show button label is on. ([57640](https://github.com/WordPress/gutenberg/pull/57640))
+
+#### Widgets Editor
+
+-   Fix Widgets page Undo and Redo accessibility and keyboard interaction. ([57677](https://github.com/WordPress/gutenberg/pull/57677))
+
+### Performance
+
+-   Add patterns load test. ([57828](https://github.com/WordPress/gutenberg/pull/57828))
+-   Block editor: Avoid list re-rendering on select. ([57188](https://github.com/WordPress/gutenberg/pull/57188))
+-   Block editor: Don't register shortcuts for preview editors. ([57984](https://github.com/WordPress/gutenberg/pull/57984))
+-   Block editor: Fix performance regression after #57950. ([57971](https://github.com/WordPress/gutenberg/pull/57971))
+-   Block editor: Use context for useBlockEditingMode. ([57950](https://github.com/WordPress/gutenberg/pull/57950))
+-   BlockSwitcher: Defer transform calculations until the Dropdown is open. ([57892](https://github.com/WordPress/gutenberg/pull/57892))
+-   Call variation through callback so it's only loaded when needed - in support of trac 59969. ([56952](https://github.com/WordPress/gutenberg/pull/56952))
+-   Editor styles: Cache transform. ([57810](https://github.com/WordPress/gutenberg/pull/57810))
+-   Footnotes: Combine format store subscription. ([58129](https://github.com/WordPress/gutenberg/pull/58129))
+-   Iframe: Calc compat styles once per page load. ([57798](https://github.com/WordPress/gutenberg/pull/57798))
+-   Measure typing with the top toolbar enabled. ([57709](https://github.com/WordPress/gutenberg/pull/57709))
+-   Meta boxes: Don't initialise if there are none. ([57182](https://github.com/WordPress/gutenberg/pull/57182))
+-   Patterns: Avoid fetching on load. ([57999](https://github.com/WordPress/gutenberg/pull/57999))
+-   Site editor: Avoid fetching themes on load. ([57985](https://github.com/WordPress/gutenberg/pull/57985))
+-   Site editor: Reduce artificial loading delay from 1s to 100ms. ([57953](https://github.com/WordPress/gutenberg/pull/57953))
+-   Site editor: Remove store subscription per block. ([57995](https://github.com/WordPress/gutenberg/pull/57995))
+-   Template Part & Query: Avoid server requests on mount. ([57987](https://github.com/WordPress/gutenberg/pull/57987))
+-   Template part block: Avoid parsing ALL patterns on mount. ([57856](https://github.com/WordPress/gutenberg/pull/57856))
+
+#### Block Editor
+
+-   Revert "Block editor: Avoid list re-rendering on select". ([58147](https://github.com/WordPress/gutenberg/pull/58147))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs for `EditorNotices`. ([57772](https://github.com/WordPress/gutenberg/pull/57772))
+
+### Experiments
+
+#### Data Views
+
+-   Add: Bulk actions to dataviews with the new design. ([57255](https://github.com/WordPress/gutenberg/pull/57255))
+-   Data view list layout: Fix thumbnail dimensions. ([57774](https://github.com/WordPress/gutenberg/pull/57774))
+-   Data views table layout: Update cell vertical alignment. ([57804](https://github.com/WordPress/gutenberg/pull/57804))
+-   DataViews: Add description to pages. ([57793](https://github.com/WordPress/gutenberg/pull/57793))
+-   DataViews: Add front page to pages page sidebar. ([57759](https://github.com/WordPress/gutenberg/pull/57759))
+-   DataViews: Better management of `layout` param in templates. ([58116](https://github.com/WordPress/gutenberg/pull/58116))
+-   DataViews: Make list layout the default for templates with the experiment enabled. ([57933](https://github.com/WordPress/gutenberg/pull/57933))
+-   DataViews: Revert list view as default for pages. ([58081](https://github.com/WordPress/gutenberg/pull/58081))
+-   DataViews: Revert list view as default for templates. ([58079](https://github.com/WordPress/gutenberg/pull/58079))
+-   DataViews: Set primary field styles. ([57846](https://github.com/WordPress/gutenberg/pull/57846))
+-   DataViews: Show loading / no result message for the list layout. ([57764](https://github.com/WordPress/gutenberg/pull/57764))
+-   DataViews: Update template parts view. ([57952](https://github.com/WordPress/gutenberg/pull/57952))
+-   DataViews: Use button for patterns, pages and templates preview field. ([58071](https://github.com/WordPress/gutenberg/pull/58071))
+-   DataViews: Use table layout for templates when experiment disabled. ([57960](https://github.com/WordPress/gutenberg/pull/57960))
+-   Stabilise view options button icon. ([57964](https://github.com/WordPress/gutenberg/pull/57964))
+-   Update Grid layout design. ([57880](https://github.com/WordPress/gutenberg/pull/57880))
+-   Update Pages preview field display. ([57919](https://github.com/WordPress/gutenberg/pull/57919))
+-   Update Templates table layout. ([57930](https://github.com/WordPress/gutenberg/pull/57930))
+-   Update: Show template sources on templates Dataviews sidebar. ([58124](https://github.com/WordPress/gutenberg/pull/58124))
+
+#### Synced Patterns
+
+-   Add a control to reset pattern overrides. ([57845](https://github.com/WordPress/gutenberg/pull/57845))
+-   Allow heading and button in Pattern Overrides. ([57789](https://github.com/WordPress/gutenberg/pull/57789))
+
+#### Typography
+
+-   Download then upload font face assets when installing from a collection. ([57694](https://github.com/WordPress/gutenberg/pull/57694))
+-   Use `slug` instead of `id` for Font Collection. ([57735](https://github.com/WordPress/gutenberg/pull/57735))
+
+#### REST API
+
+-   Font Library Refactor. ([57688](https://github.com/WordPress/gutenberg/pull/57688))
+
+#### Block Editor
+
+-   Allow drag and drop to create Rows and Galleries. ([56186](https://github.com/WordPress/gutenberg/pull/56186))
+
+### Documentation
+
+-   Add a video demonstration to the Quick Start Guide. ([57834](https://github.com/WordPress/gutenberg/pull/57834))
+-   Button: Improve `disabled`-related prop descriptions. ([57864](https://github.com/WordPress/gutenberg/pull/57864))
+-   Components: Move CHANGELOG entries under the correct release. ([57885](https://github.com/WordPress/gutenberg/pull/57885))
+-   Docs: Fix typo in "The block wrapper" document. ([58106](https://github.com/WordPress/gutenberg/pull/58106))
+-   Docs: Use 'key' in 'editor.BlockEdit' filter code examples. ([58119](https://github.com/WordPress/gutenberg/pull/58119))
+-   Document files/directories requiring backmerging to WP Core for major release. ([58064](https://github.com/WordPress/gutenberg/pull/58064))
+-   Fix the iframe markup of the embed video in the Quick Start Guide. ([57857](https://github.com/WordPress/gutenberg/pull/57857))
+-   Fix: Link to the nodejs release page. ([57816](https://github.com/WordPress/gutenberg/pull/57816))
+-   Fix: Typo on BlockListBlock comments. ([57814](https://github.com/WordPress/gutenberg/pull/57814))
+-   Fix: Typos on \_\_unstableSetTemporarilyEditingAsBlocks documentation. ([57768](https://github.com/WordPress/gutenberg/pull/57768))
+-   Font Library: Add font collection JSON schema. ([57736](https://github.com/WordPress/gutenberg/pull/57736))
+-   Prefixes all php filters with wpdocs\_. ([53914](https://github.com/WordPress/gutenberg/pull/53914))
+-   Remove the unnecessary TOC and fix grammar/formatting in the Patterns doc. ([57825](https://github.com/WordPress/gutenberg/pull/57825))
+-   Remove the 👋 emoji from the Block Editor Handbook. ([58023](https://github.com/WordPress/gutenberg/pull/58023))
+-   Update versions-in-wordpress.md. ([57916](https://github.com/WordPress/gutenberg/pull/57916))
+-   [Type] Developer Documentation - Fix removeAllNotices dispatch on the removeAllNotices doc section of @wordpress/notices. ([57436](https://github.com/WordPress/gutenberg/pull/57436))
+
+### Code Quality
+
+-   Block Renaming - move backported WP 6.5 code to 6.5 compat dir. ([58126](https://github.com/WordPress/gutenberg/pull/58126))
+-   Fix comments block. ([57820](https://github.com/WordPress/gutenberg/pull/57820))
+-   Fon Library: Remove 'version' property from font collection schema. ([58025](https://github.com/WordPress/gutenberg/pull/58025))
+-   Remove unneeded `margin: 0` override for `Notice` component consumer. ([57794](https://github.com/WordPress/gutenberg/pull/57794))
+-   Rename \_\_experimentalGetGlobalBlocksByName to getBlocksByName. ([58156](https://github.com/WordPress/gutenberg/pull/58156))
+-   Scripts: Remove unused variable in bin/list-experimental-api-matches.sh. ([57771](https://github.com/WordPress/gutenberg/pull/57771))
+-   Shadows: Prevent empty style object when removing shadow. ([58155](https://github.com/WordPress/gutenberg/pull/58155))
+-   [Fonts API] removing files and files loading no longer needed. ([57972](https://github.com/WordPress/gutenberg/pull/57972))
+
+#### Components
+
+-   PaletteEdit: Improve unit tests. ([57645](https://github.com/WordPress/gutenberg/pull/57645))
+-   Tooltip and Button: Tidy up unit tests. ([57975](https://github.com/WordPress/gutenberg/pull/57975))
+-   Tooltip: Add test for classname leakage. ([58182](https://github.com/WordPress/gutenberg/pull/58182))
+
+#### Block Editor
+
+-   Soft deprecate custom 'pure' HoC in favor of 'React.memo'. ([57173](https://github.com/WordPress/gutenberg/pull/57173))
+-   Stabilise RecursionProvider and useHasRecursion APIs. ([58120](https://github.com/WordPress/gutenberg/pull/58120))
+-   Tidy up block patterns selectors. ([57913](https://github.com/WordPress/gutenberg/pull/57913))
+
+#### Block Library
+
+-   Gallery Block: Remove duplicate return statement. ([57746](https://github.com/WordPress/gutenberg/pull/57746))
+-   Navigation: Move the renderer class to the main navigation file. ([57979](https://github.com/WordPress/gutenberg/pull/57979))
+
+#### Font Library
+
+-   Remove WP_Font_Family class that is no longer used. ([58184](https://github.com/WordPress/gutenberg/pull/58184))
+
+#### Block Directory
+
+-   DownloadableBlocksPanel: Remove withSelect in favor of useSelect. ([58109](https://github.com/WordPress/gutenberg/pull/58109))
+
+#### Patterns
+
+-   Stabilize the pattern overrides block context. ([58102](https://github.com/WordPress/gutenberg/pull/58102))
+
+#### Block API
+
+-   Block Bindings: Remove the experimental flag. ([58089](https://github.com/WordPress/gutenberg/pull/58089))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs in 'PostScheduleCheck'. ([57833](https://github.com/WordPress/gutenberg/pull/57833))
+
+#### Script Modules API
+
+-   Update the code and move it to the compat/wordpress-6.5 folder. ([57778](https://github.com/WordPress/gutenberg/pull/57778))
+
+#### Data Views
+
+-   Remove obsolete check from dataviews modal actions title. ([57753](https://github.com/WordPress/gutenberg/pull/57753))
+
+### Tools
+
+-   (chore) Revert bump to the v17.5.1 (draft) due to bug in the release found by manual testing. ([58027](https://github.com/WordPress/gutenberg/pull/58027))
+-   Automate creation of Issue for major release PHP synchronisation. ([57890](https://github.com/WordPress/gutenberg/pull/57890))
+-   Fix misplaced ReactRefreshWebpackPlugin. ([57777](https://github.com/WordPress/gutenberg/pull/57777))
+
+#### Testing
+
+-   Add `setGutenbergExperiments` to `requestUtils`. ([56663](https://github.com/WordPress/gutenberg/pull/56663))
+-   Add: End to end test to content locking stop editing as blocks behavior. ([57812](https://github.com/WordPress/gutenberg/pull/57812))
+-   Attempt to fix php unit tests (variations api change). ([58090](https://github.com/WordPress/gutenberg/pull/58090))
+-   Migrate 'block grouping' end-to-end tests to Playwright. ([57684](https://github.com/WordPress/gutenberg/pull/57684))
+-   Migrate 'embedding' end-to-end tests to Playwright. ([57969](https://github.com/WordPress/gutenberg/pull/57969))
+-   Migrate 'typewriter' end-to-end tests to Playwright. ([57673](https://github.com/WordPress/gutenberg/pull/57673))
+-   Remove unused Navigation block end-to-end test fixtures. ([57848](https://github.com/WordPress/gutenberg/pull/57848))
+
+#### Build Tooling
+
+-   Update caniuse-lite package. ([58087](https://github.com/WordPress/gutenberg/pull/58087))
+-   Update the cherry pick script to work with the new version of gh. ([57917](https://github.com/WordPress/gutenberg/pull/57917))
+
+### Various
+
+-   Interactivity API: Fix data-wp-on-document flaky test. ([58008](https://github.com/WordPress/gutenberg/pull/58008))
+-   Interactivity API: Fix flaky test on-window. ([58134](https://github.com/WordPress/gutenberg/pull/58134))
+-   Pattern Categories: Fix capitalization. ([58112](https://github.com/WordPress/gutenberg/pull/58112))
+-   Remove check-latest-npm validation. ([57797](https://github.com/WordPress/gutenberg/pull/57797))
+
+#### Interactivity API
+
+-   Create `@wordpress/interactivity-router` module. ([57924](https://github.com/WordPress/gutenberg/pull/57924))
+-   Fix flaky test on-window, remove duplicate expect on-document. ([58181](https://github.com/WordPress/gutenberg/pull/58181))
+-   Remove `data-wp-slot` and `data-wp-fill`. ([57854](https://github.com/WordPress/gutenberg/pull/57854))
+-   Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([57974](https://github.com/WordPress/gutenberg/pull/57974))
+
+#### Patterns
+
+-   Remove pattern override experiment completely. ([58105](https://github.com/WordPress/gutenberg/pull/58105))
+-   Update pattern overrides to use a hard coded support array. ([57912](https://github.com/WordPress/gutenberg/pull/57912))
+
+#### Data Views
+
+-   Dataviews: Add Bulk actions to page. ([57826](https://github.com/WordPress/gutenberg/pull/57826))
+
+#### Post Editor
+
+-   Add description to the save panel header when nothing is checked. ([57716](https://github.com/WordPress/gutenberg/pull/57716))
+
+#### HTML API
+
+-   Backport updates from Core. ([57022](https://github.com/WordPress/gutenberg/pull/57022))
+
+#### Block Editor
+
+-   Video Block: Add raw transformation from `video` html. ([47159](https://github.com/WordPress/gutenberg/pull/47159))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @kt-12: Call variation through callback so it's only loaded when needed - in support of trac 59969. ([56952](https://github.com/WordPress/gutenberg/pull/56952))
+-   @leomuniz: [Type] Developer Documentation - Fix removeAllNotices dispatch on the removeAllNotices doc section of @wordpress/notices. ([57436](https://github.com/WordPress/gutenberg/pull/57436))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewserong @annezazu @artemiomorales @arthur791004 @atachibana @bacoords @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @creativecoder @DAreRodz @dcalhoun @derekblank @dmsnell @draganescu @ecgan @ellatrix @fluiddot @fullofcaffeine @gaambo @geriux @getdave @glendaviesnz @gonzomir @inc2734 @jameskoster @jeryj @jffng @jorgefilipecosta @jsnajdr @kevin940726 @kt-12 @leomuniz @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ockham @oguzkocer @pbking @ramonjd @richtabor @SantosGuillamot @scruffian @SiobhyB @sirreal @swissspidy @t-hamano @talldan @tellthemachines @tjcafferkey @tyxla @vcanales @youknowriad
+
+= 17.5.2 =
+
+## Changelog
+
+### Bug Fixes
+
+-   (Preferences)(17.5.1)(fix) Remove non-core-migrated preferences from the deprecation proxy for `get` ([58153](https://github.com/WordPress/gutenberg/pull/58153))
+-   (editor)(fix) Append the `edit-post-header-toolbar` class in NavigableToolbar for backward compatibility with plugin GUI injections ([58154](https://github.com/WordPress/gutenberg/pull/58154))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine
+
+= 17.5.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   (Preferences)(hotfix)(17.5) Hotfix for missing preferences in the `core` scope([58031](https://github.com/WordPress/gutenberg/pull/58031))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@youknowriad @fullofcaffeine
+
+= 17.5.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Editor Unification
+
+-   Editor: Add the show most used blocks preference to the site editor. ([57637](https://github.com/WordPress/gutenberg/pull/57637))
+-   Editor: Migrate and unify the panel preferences. ([57529](https://github.com/WordPress/gutenberg/pull/57529))
+-   Editor: Unify context text cursor preference. ([57479](https://github.com/WordPress/gutenberg/pull/57479))
+-   Editor: Unify list view open preference. ([57504](https://github.com/WordPress/gutenberg/pull/57504))
+-   Editor: Unify right click override preference. ([57468](https://github.com/WordPress/gutenberg/pull/57468))
+-   Editor: Unify show icon labels preference. ([57480](https://github.com/WordPress/gutenberg/pull/57480))
+-   Editor: Unify spotlight mode preference. ([57533](https://github.com/WordPress/gutenberg/pull/57533))
+-   Editor: Unify the distraction free preference. ([57590](https://github.com/WordPress/gutenberg/pull/57590))
+-   Editor: Unify the show block breadcrumbs preference. ([57506](https://github.com/WordPress/gutenberg/pull/57506))
+-   Editor: Unify the top toolbar preference. ([57531](https://github.com/WordPress/gutenberg/pull/57531))
+
+#### Components
+
+-   Components: Replace `TabPanel` with `Tabs` in inline color picker. ([57292](https://github.com/WordPress/gutenberg/pull/57292)
+-   Add `compact` size variant to InputControl-based components. ([57398](https://github.com/WordPress/gutenberg/pull/57398))
+-   BaseControl: Connect to context system. ([57408](https://github.com/WordPress/gutenberg/pull/57408))
+-   Replace `TabPanel` with `Tabs` in the Style Book. ([57287](https://github.com/WordPress/gutenberg/pull/57287))
+-   Tooltip: Improve tests. ([57345](https://github.com/WordPress/gutenberg/pull/57345))
+-   Update @ariakit/react to v0.3.12 and @ariakit/test to v0.3.7. ([57547](https://github.com/WordPress/gutenberg/pull/57547))
+
+#### Font Library
+
+-   Font Library: Remove "has_font_mime_type" function. ([57364](https://github.com/WordPress/gutenberg/pull/57364))
+-   Font Library: Update font uninstall modal text. ([57368](https://github.com/WordPress/gutenberg/pull/57368))
+-   Font Library: Add progress-bar while uploading font assets. ([57463](https://github.com/WordPress/gutenberg/pull/57463))
+-   Font Library: Singularize install font families endpoint. ([57569](https://github.com/WordPress/gutenberg/pull/57569))
+-   Font Library: Unregister font collection. ([54701](https://github.com/WordPress/gutenberg/pull/54701))
+
+#### Site Editor
+
+-   Add Template Modal: Update scroll related layout. ([57617](https://github.com/WordPress/gutenberg/pull/57617))
+-   Components: Replace `TabPanel` with `Tabs` in the Font Library `Modal`. ([57181](https://github.com/WordPress/gutenberg/pull/57181))
+
+#### Interactivity API
+
+-   Implement `wp_initial_state()`. ([57556](https://github.com/WordPress/gutenberg/pull/57556))
+-   Server directive processing: Stop processing non-interactive blocks. ([56302](https://github.com/WordPress/gutenberg/pull/56302))
+-   Interactive template: Use viewModule. ([57712](https://github.com/WordPress/gutenberg/pull/57712))
+-   Navigation Block: Use dom.focus for focus control. ([57362](https://github.com/WordPress/gutenberg/pull/57362))
+
+#### Site Editor
+
+-   Site editor: Add padding to entity save panel header. ([57471](https://github.com/WordPress/gutenberg/pull/57471))
+-   Site editor: Add margin to entity save panel header via a classname. ([57473](https://github.com/WordPress/gutenberg/pull/57473))
+
+#### Block Library
+
+-   Post Featured Image: Add a useFirstImageFromPost attribute. ([56573](https://github.com/WordPress/gutenberg/pull/56573))
+-   Gallery Block: Add random order setting. ([57477](https://github.com/WordPress/gutenberg/pull/57477))
+-   Image Block: Change upload icon label. ([57704](https://github.com/WordPress/gutenberg/pull/57704))
+
+### Bug Fixes
+
+-   Avoid using a memoized selector without dependencies. ([57257](https://github.com/WordPress/gutenberg/pull/57257))
+-   Core Data: Pass the 'options' argument to data action shortcuts. ([57383](https://github.com/WordPress/gutenberg/pull/57383))
+-   Preferences: Update accessibility scope to "core". ([57563](https://github.com/WordPress/gutenberg/pull/57563))
+
+#### Block Editor
+
+-   Fix Link UI displaying out of sync results. ([57522](https://github.com/WordPress/gutenberg/pull/57522))
+-   Give iframe fallback background color. ([57330](https://github.com/WordPress/gutenberg/pull/57330))
+-   Rich text: Add HTML string methods to RichTextData. ([57322](https://github.com/WordPress/gutenberg/pull/57322))
+
+#### Block Library
+
+-   Footnotes: Fix wrong link when adding more than 9 footnotes. ([57599](https://github.com/WordPress/gutenberg/pull/57599))
+-   Table: Remove unnecessary margin override in editor styles. ([57699](https://github.com/WordPress/gutenberg/pull/57699))
+-   Template Part block: Fix template part path arg missing from actions. ([56790](https://github.com/WordPress/gutenberg/pull/56790))
+
+#### Components
+
+-   DuotonePicker: Fix top margin when no duotone options. ([57489](https://github.com/WordPress/gutenberg/pull/57489))
+-   NavigatorProvider: Exclude size value from contain CSS rule. ([57498](https://github.com/WordPress/gutenberg/pull/57498))
+-   Snackbar: Fix icon positioning. ([57377](https://github.com/WordPress/gutenberg/pull/57377))
+
+#### Patterns
+
+-   Pattern Overrides: Add `template-lock: All` to pattern inner blocks to prevent deletion/insertion. ([57661](https://github.com/WordPress/gutenberg/pull/57661))
+-   Refactor the findOrCreate term method. ([57655](https://github.com/WordPress/gutenberg/pull/57655))
+-   Edit source pattern in focus mode in post and site editors. ([57036](https://github.com/WordPress/gutenberg/pull/57036))
+
+#### Site Editor
+
+-   Make sure comamnd palette toggle does not disappear while being clicked. ([57420](https://github.com/WordPress/gutenberg/pull/57420))
+-   Reinstate iframe CSS for editor canvas container. ([57503](https://github.com/WordPress/gutenberg/pull/57503))
+
+#### Global Styles
+
+-   Use `is-layout` pattern on layout generated classname. ([57564](https://github.com/WordPress/gutenberg/pull/57564))
+-   Global styles revisions: Add individual headings translations, update tests. ([57472](https://github.com/WordPress/gutenberg/pull/57472))
+-   Global style revisions: Move change summary code and tests to block editor package. ([57411](https://github.com/WordPress/gutenberg/pull/57411))
+-   Reduce specificity of block style variation selectors. ([57659](https://github.com/WordPress/gutenberg/pull/57659))
+-   Background image block support: Add tests for size and repeat output. ([57474](https://github.com/WordPress/gutenberg/pull/57474))
+
+#### Post Editor
+
+-   Fix Template preview menu item accessibility. ([57456](https://github.com/WordPress/gutenberg/pull/57456))
+-   Fullscreen mode description: Use full text instead of abbreviation. ([57518](https://github.com/WordPress/gutenberg/pull/57518))
+-   Improve pre-publish checks naming consistency. ([57019](https://github.com/WordPress/gutenberg/pull/57019))
+-   Make the Replace featured image button perceivable by assistive technologies. ([57453](https://github.com/WordPress/gutenberg/pull/57453))
+
+#### Components
+
+-   Label the HeightControl. ([57683](https://github.com/WordPress/gutenberg/pull/57683))
+-   NumberControl: Make increment and decrement buttons keyboard accessible. ([57402](https://github.com/WordPress/gutenberg/pull/57402))
+
+#### Block Tools
+
+-   Update the position of the patterns tab in the inserter menu. ([55688](https://github.com/WordPress/gutenberg/pull/55688))
+-   Use full text instead of abbreviation for min height setting. ([57680](https://github.com/WordPress/gutenberg/pull/57680))
+-   ResizableEditor: Fix tab order for resize handles. ([57475](https://github.com/WordPress/gutenberg/pull/57475))
+-   Keep Lock button it in the toolbar until unmounted. ([57229](https://github.com/WordPress/gutenberg/pull/57229))
+-   Custom field connections: Better description on Experiments page. ([57501](https://github.com/WordPress/gutenberg/pull/57501))
+
+### Performance
+
+#### Block Library
+
+-   File: Remove 'block-editor' store subscription. ([57511](https://github.com/WordPress/gutenberg/pull/57511))
+-   Remove store subscriptions from Audio and Video blocks. ([57449](https://github.com/WordPress/gutenberg/pull/57449))
+-   Site Logo: Remove unnecessary 'block-editor' store subscription. ([57513](https://github.com/WordPress/gutenberg/pull/57513))
+-   Send numerical post id when uploading image. ([57388](https://github.com/WordPress/gutenberg/pull/57388))
+-   PostFeaturedImage: Remove unnecessary 'block-editor' store subscription. ([57554](https://github.com/WordPress/gutenberg/pull/57554))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Use DropdownMenuRadioItem component when possible. ([57505](https://github.com/WordPress/gutenberg/pull/57505))
+-   Align icon size + placement in Patterns data view. ([57548](https://github.com/WordPress/gutenberg/pull/57548))
+-   DataViews: Add `duplicate pattern` action in patterns page. ([57592](https://github.com/WordPress/gutenberg/pull/57592))
+-   DataViews: Add duplicate template pattern action. ([57638](https://github.com/WordPress/gutenberg/pull/57638))
+-   DataViews: Add footer to Pages sidebar. ([57690](https://github.com/WordPress/gutenberg/pull/57690))
+-   DataViews: Add new page button in `Pages`. ([57685](https://github.com/WordPress/gutenberg/pull/57685))
+-   DataViews: Add sync filter in patterns page. ([57532](https://github.com/WordPress/gutenberg/pull/57532))
+-   DataViews: Consolidate CSS selectors naming schema. ([57651](https://github.com/WordPress/gutenberg/pull/57651))
+-   DataViews: Fallback to `(no title)` is there's no rendered title. ([57434](https://github.com/WordPress/gutenberg/pull/57434))
+-   DataViews: Hide actions menu upon selecting a layout. ([57418](https://github.com/WordPress/gutenberg/pull/57418))
+-   DataViews: Make `fields` dependant on `view.type`. ([57450](https://github.com/WordPress/gutenberg/pull/57450))
+-   DataViews: Memoize `onSetSelection`. ([57458](https://github.com/WordPress/gutenberg/pull/57458))
+-   DataViews: Prevent unnecessary re-renders of Pagination. ([57454](https://github.com/WordPress/gutenberg/pull/57454))
+-   DataViews: Prevent unnecessary re-renders. ([57452](https://github.com/WordPress/gutenberg/pull/57452))
+-   DataViews: Update names for `DropdownMenuRadioItemCustom`. ([57416](https://github.com/WordPress/gutenberg/pull/57416))
+-   DataViews: Use i18n.\_x to clarify term "Duplicate". ([57686](https://github.com/WordPress/gutenberg/pull/57686))
+-   DataViews: Use in patterns page. ([57333](https://github.com/WordPress/gutenberg/pull/57333))
+-   Dataview: Change the stacking order of table header. ([57565](https://github.com/WordPress/gutenberg/pull/57565))
+-   Dataviews: Add some client side data handling utils. ([57488](https://github.com/WordPress/gutenberg/pull/57488))
+-   Make title display in grid views consistent. ([57553](https://github.com/WordPress/gutenberg/pull/57553))
+-   Update Table layout design details. ([57644](https://github.com/WordPress/gutenberg/pull/57644))
+-   Update pagination spacing in List layout. ([57670](https://github.com/WordPress/gutenberg/pull/57670))
+-   Update table header gap. ([57671](https://github.com/WordPress/gutenberg/pull/57671))
+-   [Dataviews] Table layout: Ensure focus is not lost on interaction. ([57340](https://github.com/WordPress/gutenberg/pull/57340))
+
+#### Patterns
+
+-   [Pattern Overrides] Fix duplication of inner blocks. ([57538](https://github.com/WordPress/gutenberg/pull/57538))
+-   [Pattern overrides] Allow multiple attributes overrides. ([57573](https://github.com/WordPress/gutenberg/pull/57573))
+
+### Documentation
+
+-   Add links to additional local dev tools in Block Developement Environment readme. ([57682](https://github.com/WordPress/gutenberg/pull/57682))
+-   Add new section to the Quick Start Guide about wp-env. ([57559](https://github.com/WordPress/gutenberg/pull/57559))
+-   Block JSON schema: Add renaming key to supports definition. ([57373](https://github.com/WordPress/gutenberg/pull/57373))
+-   Break out the Curating the Editor Experience doc into its own How-to Guides section. ([57289](https://github.com/WordPress/gutenberg/pull/57289))
+-   Change the slug for the theme.json doc to avoid conflicts. ([57410](https://github.com/WordPress/gutenberg/pull/57410))
+-   Docs/tutorial: Fix opposite condition for content generation in render.php. ([57445](https://github.com/WordPress/gutenberg/pull/57445))
+-   Docs: Fundamentals of Block Development - Static or Dynamic rendering of a block. ([57250](https://github.com/WordPress/gutenberg/pull/57250))
+-   Docs: Update sample code to fix React warning error on Tutorial page. ([57412](https://github.com/WordPress/gutenberg/pull/57412))
+-   Fix formatting issue due to incorrect link parsing in the Quick Start Guide. ([57693](https://github.com/WordPress/gutenberg/pull/57693))
+-   Fix incorrect heading level in Editor curation documentation. ([57409](https://github.com/WordPress/gutenberg/pull/57409))
+-   Fix two typos in tutorial.md. ([57627](https://github.com/WordPress/gutenberg/pull/57627))
+-   Fix: Create block getting started links. ([57551](https://github.com/WordPress/gutenberg/pull/57551))
+-   Improve the static vs dynamic rendering comment in the block tutorial. ([57284](https://github.com/WordPress/gutenberg/pull/57284))
+-   Update copyright year to 2024 in `license.md`. ([57481](https://github.com/WordPress/gutenberg/pull/57481))
+-   Update the "Build your first block" tutorial based on user feedback. ([57403](https://github.com/WordPress/gutenberg/pull/57403))
+-   Update: Material design icons link. ([57550](https://github.com/WordPress/gutenberg/pull/57550))
+
+### Code Quality
+
+-   Editor: Unify the DocumentTools component. ([57214](https://github.com/WordPress/gutenberg/pull/57214))
+-   Make getLastFocus and setLastFocus private. ([57612](https://github.com/WordPress/gutenberg/pull/57612))
+-   Remove deprecated `behaviors` syntax. ([57165](https://github.com/WordPress/gutenberg/pull/57165))
+-   Avoid extra `useMarkPersistent` dispatch calls. ([57435](https://github.com/WordPress/gutenberg/pull/57435))
+-   Clean up code editor CSS. ([57519](https://github.com/WordPress/gutenberg/pull/57519))
+-   Combine selectors in 'useTransformCommands'. ([57424](https://github.com/WordPress/gutenberg/pull/57424))
+
+#### Block Library
+
+-   Background image: Add has-background classname when background image is applied. ([57495](https://github.com/WordPress/gutenberg/pull/57495))
+-   File: Remove unnecessary synchronization effect. ([57585](https://github.com/WordPress/gutenberg/pull/57585))
+-   Navigation: Refactor mobile overlay breakpoints to JS. ([57520](https://github.com/WordPress/gutenberg/pull/57520))
+-   Search Block: Remove unused `buttonBehavior` attribute. ([53467](https://github.com/WordPress/gutenberg/pull/53467))
+
+#### Patterns
+
+-   Improve inserter pattern constants. ([57570](https://github.com/WordPress/gutenberg/pull/57570))
+-   Remove duplicate setting for `getPostLinkProps` and prefer stable naming. ([57535](https://github.com/WordPress/gutenberg/pull/57535))
+-   Rename `patternBlock` to `patternPost`. ([57568](https://github.com/WordPress/gutenberg/pull/57568))
+
+#### Post Editor
+
+-   Editor: Use hooks instead of HoCs in 'PostVisibilityCheck'. ([57705](https://github.com/WordPress/gutenberg/pull/57705))
+-   Quality: Avoid React warning when changing rendering mode. ([57413](https://github.com/WordPress/gutenberg/pull/57413))
+
+#### Block Editor
+
+-   Editor: Unify the inserter sidebar. ([57466](https://github.com/WordPress/gutenberg/pull/57466))
+-   Remove unused parameters from useOnBlockDrop. ([57527](https://github.com/WordPress/gutenberg/pull/57527))
+
+#### List View
+
+-   Editor: Unify the list view sidebar between the post and site editors. ([57467](https://github.com/WordPress/gutenberg/pull/57467))
+-   Add drag cursor to draggable list items. ([57493](https://github.com/WordPress/gutenberg/pull/57493))
+
+### Tools
+
+-   DependencyExtractionWebpackPlugin: Throw when using scripts from modules. ([57795]
+-   Dependency Extraction Webpack Plugin: Use `import` for module externals. ([57577](https://github.com/WordPress/gutenberg/pull/57577))
+-   DependencyExtractionWebpackPlugin: Add true shorthand for requestToExternalModule. ([57593](https://github.com/WordPress/gutenberg/pull/57593))
+-   DependencyExtractionWebpackPlugin: Use module for @wordpress/interactivity. ([57602](https://github.com/WordPress/gutenberg/pull/57602))
+-   Fix webpack not setting environment.module true. ([57714](https://github.com/WordPress/gutenberg/pull/57714))
+-   Modules: Load the import map polyfill when needed. ([57256](https://github.com/WordPress/gutenberg/pull/57256))
+-   Blocks: Add handling for block.json viewModule. ([57437](https://github.com/WordPress/gutenberg/pull/57437))
+
+#### Testing
+
+-   Allowed Patterns end-to-end test - move tests that run with a subset of allowed blocks into a group. ([57496](https://github.com/WordPress/gutenberg/pull/57496))
+-   Clean up end-to-end tests package. ([57575](https://github.com/WordPress/gutenberg/pull/57575))
+-   Fix flaky 'Post publish button' end-to-end test. ([57407](https://github.com/WordPress/gutenberg/pull/57407))
+-   Migrate 'allowed patterns' end-to-end tests to Playwright. ([57399](https://github.com/WordPress/gutenberg/pull/57399))
+-   Migrate 'block editor keyboard shortcuts' end-to-end tests to Playwright. ([57422](https://github.com/WordPress/gutenberg/pull/57422))
+-   Migrate 'core settings' end-to-end tests to Playwright. ([57581](https://github.com/WordPress/gutenberg/pull/57581))
+-   Migrate 'datepicker' end-to-end tests to Playwright. ([57545](https://github.com/WordPress/gutenberg/pull/57545))
+-   Migrate 'dropdown menu' end-to-end tests to Playwright. ([57663](https://github.com/WordPress/gutenberg/pull/57663))
+-   Migrate 'editor modes' end-to-end tests to Playwright. ([57574](https://github.com/WordPress/gutenberg/pull/57574))
+-   Migrate 'invalid blocks' end-to-end tests to Playwright. ([57508](https://github.com/WordPress/gutenberg/pull/57508))
+-   Migrate 'nux' end-to-end tests to Playwright. ([57542](https://github.com/WordPress/gutenberg/pull/57542))
+-   Migrate 'preferences' end-to-end tests to Playwright. ([57446](https://github.com/WordPress/gutenberg/pull/57446))
+-   Migrate 'publishing' end-to-end tests to Playwright. ([57521](https://github.com/WordPress/gutenberg/pull/57521))
+-   Migrate 'scheduling' end-to-end tests to Playwright. ([57539](https://github.com/WordPress/gutenberg/pull/57539))
+-   Migrate 'sidebar' end-to-end tests to Playwright. ([57448](https://github.com/WordPress/gutenberg/pull/57448))
+-   Migrate 'taxonomies' end-to-end tests to Playwright. ([57662](https://github.com/WordPress/gutenberg/pull/57662))
+-   Migrate `editing-widgets` to Playwright. ([57483](https://github.com/WordPress/gutenberg/pull/57483))
+-   Migrate remaining 'publish panel' end-to-end tests to Playwright. ([57432](https://github.com/WordPress/gutenberg/pull/57432))
+-   Update 'missing block' end-to-end tests to use the 'setContent' helper. ([57509](https://github.com/WordPress/gutenberg/pull/57509))
+
+#### Build Tooling
+
+-   Group GitHub Action Dependabot updates. ([57591](https://github.com/WordPress/gutenberg/pull/57591))
+-   WP Scripts: Build block.json viewModule. ([57461](https://github.com/WordPress/gutenberg/pull/57461))
+-   Dependency Extraction Webpack Plugin: Add Module support. ([57199](https://github.com/WordPress/gutenberg/pull/57199))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @HrithikDalal: Font Library: Update font uninstall modal text. ([57368](https://github.com/WordPress/gutenberg/pull/57368))
+-   @muhme: Fix two typos in tutorial.md. ([57627](https://github.com/WordPress/gutenberg/pull/57627))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @andrewhayward @andrewserong @atachibana @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @DAreRodz @dcalhoun @derekblank @desrosj @ellatrix @fai-sal @fluiddot @geriux @getdave @glendaviesnz @gziolo @hbhalodia @HrithikDalal @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @muhme @ndiego @ntsekouras @oandregal @ockham @ramonjd @scruffian @sirreal @Soean @t-hamano @talldan @tellthemachines @youknowriad
+
+= 17.3.2 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Site editor: fix image upload bug ([57040](https://github.com/WordPress/gutenberg/pull/57040))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@glendaviesnz
+
+= 17.4.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Rich text: add HTML string methods to RichTextData ([57322](https://github.com/WordPress/gutenberg/pull/57322))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix
+
+= 17.3.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Rich text: add HTML string methods to RichTextData ([57322](https://github.com/WordPress/gutenberg/pull/57322))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix
+
+= 17.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Components
+
+-   Refactor experimental dropdown menu usages to latest version. ([55625](https://github.com/WordPress/gutenberg/pull/55625))
+-   Replace `TabPanel` with `Tabs` in the Block Inspector. ([56995](https://github.com/WordPress/gutenberg/pull/56995))
+-   Replace `TabPanel` with `Tabs` in the editor Global Styles color palette. ([57126](https://github.com/WordPress/gutenberg/pull/57126))
+-   ToggleGroupControl: Update large button size to 32px. ([57338](https://github.com/WordPress/gutenberg/pull/57338))
+-   Update ariakit version. ([57325](https://github.com/WordPress/gutenberg/pull/57325))
+-   `CustomSelect`: Add `WordPressComponentsProps`. ([56998](https://github.com/WordPress/gutenberg/pull/56998))
+-   `Modal`: Improve application of body class names. ([55430](https://github.com/WordPress/gutenberg/pull/55430))
+-   -   Components: Replace `TabPanel` with `Tabs` in the Block Inserter. ([56918](https://github.com/WordPress/gutenberg/pull/56918))
+
+#### Site Editor
+
+-   Add Page Attributes panel. ([57151](https://github.com/WordPress/gutenberg/pull/57151))
+-   Add Post Taxonomies panel. ([57049](https://github.com/WordPress/gutenberg/pull/57049))
+-   Add View Link. ([57153](https://github.com/WordPress/gutenberg/pull/57153))
+-   Add the Discussion panel. ([57150](https://github.com/WordPress/gutenberg/pull/57150))
+-   Add the featured image panel. ([57053](https://github.com/WordPress/gutenberg/pull/57053))
+-   Editor: Unify revision panel between post and site editors. ([57010](https://github.com/WordPress/gutenberg/pull/57010))
+-   Social Link block: Obfuscate email address. ([57384](https://github.com/WordPress/gutenberg/pull/57384))
+-   DataViews: Mark the new Templates pages as stable. ([57109](https://github.com/WordPress/gutenberg/pull/57109))
+
+#### Design Tools
+
+-   Background image: Add backgroundSize and repeat features. ([57005](https://github.com/WordPress/gutenberg/pull/57005))
+-   Make sure theme color palette presets are output when appearance tools are enabled. ([57190](https://github.com/WordPress/gutenberg/pull/57190))
+-   Move tools panel to the left of the inspector. ([55785](https://github.com/WordPress/gutenberg/pull/55785))
+
+#### Global Styles
+
+-   Global styles revisions: Add pagination. ([56799](https://github.com/WordPress/gutenberg/pull/56799))
+-   Global styles revisions: Integrate style book. ([56800](https://github.com/WordPress/gutenberg/pull/56800))
+
+### Bug Fixes
+
+#### Components
+
+-   DropdownMenu V2: Add fallback styles for when subgrid is not supported. ([57327](https://github.com/WordPress/gutenberg/pull/57327))
+-   DropdownMenuV2: Do not collapse suffix width. ([57238](https://github.com/WordPress/gutenberg/pull/57238))
+-   Fix DayButton dot position and expand Button area. ([55502](https://github.com/WordPress/gutenberg/pull/55502))
+-   Fix logic of `has-text` class addition in Button. ([56949](https://github.com/WordPress/gutenberg/pull/56949))
+-   Palette Edit: Don't discards colors with default name and slug. ([54332](https://github.com/WordPress/gutenberg/pull/54332))
+-   PaletteEdit: Consider digits when generating kebab-cased slug. ([56713](https://github.com/WordPress/gutenberg/pull/56713))
+-   RadioControl: Fully encapsulate styles. ([57347](https://github.com/WordPress/gutenberg/pull/57347))
+-   Tabs: Make sure individual `Tab`s are linked to the correct `TabPanel`s. ([57033](https://github.com/WordPress/gutenberg/pull/57033))
+-   Text selection: Show CSS hack to Safari only. ([57300](https://github.com/WordPress/gutenberg/pull/57300))
+-   Truncate: Improve handling of non-string children. ([57261](https://github.com/WordPress/gutenberg/pull/57261))
+-   `FormTokenField`: Handle `disabled` prop on internal `Button`. ([57187](https://github.com/WordPress/gutenberg/pull/57187))
+-   tab panel: Don't render hidden content by default. ([57046](https://github.com/WordPress/gutenberg/pull/57046))
+
+#### Block Editor
+
+-   Exclude disabled buttons when setting initialIndex of NavigableToolbar. ([57280](https://github.com/WordPress/gutenberg/pull/57280))
+-   Fix BlockSwitcher checks for showing a Dropdown menu or not. ([57047](https://github.com/WordPress/gutenberg/pull/57047))
+-   Fix block lock toolbar item stealing focus when mounted with StrictMode. ([57185](https://github.com/WordPress/gutenberg/pull/57185))
+-   Fix content lock UI regression. ([56974](https://github.com/WordPress/gutenberg/pull/56974))
+-   Fix vertical overflow when inserter is open in post and site editor. ([57127](https://github.com/WordPress/gutenberg/pull/57127))
+-   Hide drop indicator where block isn't allowed to drop. ([56843](https://github.com/WordPress/gutenberg/pull/56843))
+-   InserterListItem: Use item.isDisabled to detect disabled item. ([57161](https://github.com/WordPress/gutenberg/pull/57161))
+-   More settings tip: Add explicit font size. ([55835](https://github.com/WordPress/gutenberg/pull/55835))
+-   Writing flow: Absorb partial multi selection dispatching. ([47525](https://github.com/WordPress/gutenberg/pull/47525))
+-   Fix the block 'edit' property validation. ([57193](https://github.com/WordPress/gutenberg/pull/57193))
+
+#### Block Library
+
+-   Audio: Hide some controls when multi-editing blocks. ([57376](https://github.com/WordPress/gutenberg/pull/57376))
+-   Disable resizing when viewport is small and wide-aligned. ([57041](https://github.com/WordPress/gutenberg/pull/57041))
+-   Gallery: Hide some controls when multi-editing blocks. ([57378](https://github.com/WordPress/gutenberg/pull/57378))
+-   Image Block: Get lightbox trigger button ref via data-wp-init. ([57089](https://github.com/WordPress/gutenberg/pull/57089))
+-   Image: Hide caption control when multi-editing images. ([57357](https://github.com/WordPress/gutenberg/pull/57357))
+-   Video: Hide some controls when multi-editing blocks. ([57375](https://github.com/WordPress/gutenberg/pull/57375))
+-   Image Block: Fix deprecation when width/height attribute is number. ([57063](https://github.com/WordPress/gutenberg/pull/57063))
+
+#### Patterns
+
+-   Fix: Viewport width not accounted for in the Site Editor > Patterns view. ([55803](https://github.com/WordPress/gutenberg/pull/55803))
+-   Override all the labels of the pattern categories taxonomy. ([57094](https://github.com/WordPress/gutenberg/pull/57094))
+-   Pattern Category: Change show_tagcloud to false. ([57212](https://github.com/WordPress/gutenberg/pull/57212))
+-   Patterns (unsynced): Prevent infinite loops due to recursive patterns. ([56511](https://github.com/WordPress/gutenberg/pull/56511))
+
+#### Site Editor
+
+-   Fix image upload bug. ([57040](https://github.com/WordPress/gutenberg/pull/57040))
+-   Reduce clearance around the Frame in the site editor. ([57023](https://github.com/WordPress/gutenberg/pull/57023))
+-   Swap Template: Show the right templates for the right post type. ([57149](https://github.com/WordPress/gutenberg/pull/57149))
+-   Save Button: Fix the translation of the Activate button. ([57147](https://github.com/WordPress/gutenberg/pull/57147))
+-   SlotFill: Allow contextual SlotFillProviders. ([56779](https://github.com/WordPress/gutenberg/pull/56779))
+
+#### Post Editor
+
+-   Editor: Use visibility selector for PostTemplatePanel. ([57224](https://github.com/WordPress/gutenberg/pull/57224))
+-   Fix: Code editor title width in classic theme. ([56922](https://github.com/WordPress/gutenberg/pull/56922))
+
+#### Design Tools
+
+-   Allow default duotone styles in classic themes. ([57191](https://github.com/WordPress/gutenberg/pull/57191))
+-   StylesPreview: Fix endless loop of ratio calculations when on the threshold of a scrollbar. ([57090](https://github.com/WordPress/gutenberg/pull/57090))
+
+#### Interactivity API
+
+-   Fix namespaces in nested interactive regions. ([57029](https://github.com/WordPress/gutenberg/pull/57029))
+-   Fix Interactivity not working on Classic Themes. ([57396](https://github.com/WordPress/gutenberg/pull/57396))
+
+#### Collaborative Editing
+
+-   Collab editing: Ensure block attributes are serialisable. ([57025](https://github.com/WordPress/gutenberg/pull/57025))
+
+### Accessibility
+
+-   Font size picker: Fix Reset button focus loss. ([57196](https://github.com/WordPress/gutenberg/pull/57196))
+-   a11y: Apply focus style to revision items. ([57039](https://github.com/WordPress/gutenberg/pull/57039))
+-   [a11y] Fix: Use spans instead of headings on dataviews table view page title. ([56956](https://github.com/WordPress/gutenberg/pull/56956))
+
+### Performance
+
+#### Block Editor
+
+-   Block: Combine store subscriptions. ([56994](https://github.com/WordPress/gutenberg/pull/56994))
+-   Combine selectors in the 'BackgroundImagePanelItem' component. ([57159](https://github.com/WordPress/gutenberg/pull/57159))
+-   InnerBlocks: overlay: Remove viewport size condition. ([57135](https://github.com/WordPress/gutenberg/pull/57135))
+-   Prevent layout re-rendering when changing selected block. ([57136](https://github.com/WordPress/gutenberg/pull/57136))
+-   Prevent re-rendering the editor header when the selected block changes. ([57140](https://github.com/WordPress/gutenberg/pull/57140))
+-   Rewrite moving animation for better load performance. ([57133](https://github.com/WordPress/gutenberg/pull/57133))
+-   Rich text: Avoid block editor subscription if not selected. ([57226](https://github.com/WordPress/gutenberg/pull/57226))
+-   Try removing extra memoization for individual style panels. ([57160](https://github.com/WordPress/gutenberg/pull/57160))
+-   hooks: Manage save props in one place. ([57043](https://github.com/WordPress/gutenberg/pull/57043))
+
+#### Block Library
+
+-   Gallery: Combine useSelect calls. ([57240](https://github.com/WordPress/gutenberg/pull/57240))
+-   Image: Reduce 'block-editor' store subscriptions. ([57358](https://github.com/WordPress/gutenberg/pull/57358))
+-   List: Avoid useSelect in block render. ([57077](https://github.com/WordPress/gutenberg/pull/57077))
+-   Blocks: Simplify/optimise isUnmodifiedBlock. ([56919](https://github.com/WordPress/gutenberg/pull/56919))
+-   InnerBlocks: Combine store subscriptions. ([57032](https://github.com/WordPress/gutenberg/pull/57032))
+
+#### Components
+
+-   Navigator: Use CSS animations instead of framer-motion. ([56909](https://github.com/WordPress/gutenberg/pull/56909))
+-   useSelect: Only invalidate on subscribe if store changed. ([57108](https://github.com/WordPress/gutenberg/pull/57108))
+
+### Experiments
+
+#### Data Views
+
+-   Add hover style to table rows. ([57058](https://github.com/WordPress/gutenberg/pull/57058))
+-   Add: See revisions template action. ([57175](https://github.com/WordPress/gutenberg/pull/57175))
+-   Code Quality: Update: Reuse view revisions action on templates and pages. ([57208](https://github.com/WordPress/gutenberg/pull/57208))
+-   DataViews: Add list layout to templates. ([57014](https://github.com/WordPress/gutenberg/pull/57014))
+-   DataViews: Align filter implementations. ([57059](https://github.com/WordPress/gutenberg/pull/57059))
+-   DataViews: Centralize control of filter visibility in the `Filters` component. ([57056](https://github.com/WordPress/gutenberg/pull/57056))
+-   DataViews: Close actions menu upon switching layouts. ([57015](https://github.com/WordPress/gutenberg/pull/57015))
+-   DataViews: Display column header when the field is only filterable. ([57051](https://github.com/WordPress/gutenberg/pull/57051))
+-   DataViews: Fix bug on operators count for table layout. ([57048](https://github.com/WordPress/gutenberg/pull/57048))
+-   DataViews: Improve naming for easy identification in React devtools. ([57385](https://github.com/WordPress/gutenberg/pull/57385))
+-   DataViews: Improve preview. ([57116](https://github.com/WordPress/gutenberg/pull/57116))
+-   DataViews: Make `deferredRendering` prop optional. ([57334](https://github.com/WordPress/gutenberg/pull/57334))
+-   DataViews: Make `getItemId` optional. ([57308](https://github.com/WordPress/gutenberg/pull/57308))
+-   DataViews: Make filters footprint more condensed. ([56983](https://github.com/WordPress/gutenberg/pull/56983))
+-   DataViews: Memoize `onSelectionChange` callback. ([57390](https://github.com/WordPress/gutenberg/pull/57390))
+-   DataViews: Remove `paginationInfo` prop from ViewComponent. ([57306](https://github.com/WordPress/gutenberg/pull/57306))
+-   DataViews: Remove reference to edit site class. ([57075](https://github.com/WordPress/gutenberg/pull/57075))
+-   DataViews: Rename `operatorsFromField` to `sanitizeOperators`. ([57050](https://github.com/WordPress/gutenberg/pull/57050))
+-   DataViews: Update `onChangeView` memoization. ([57393](https://github.com/WordPress/gutenberg/pull/57393))
+-   DataViews: Update documentation. ([57305](https://github.com/WordPress/gutenberg/pull/57305))
+-   DataViews: Use SelectControl for selecting a page. ([57215](https://github.com/WordPress/gutenberg/pull/57215))
+-   Dataviews: Simplify pagination. ([57071](https://github.com/WordPress/gutenberg/pull/57071))
+-   Fix: Empty dropdown(s) on the grid view. ([57316](https://github.com/WordPress/gutenberg/pull/57316))
+-   Fix: Template list title font styles. ([57027](https://github.com/WordPress/gutenberg/pull/57027))
+-   Sort order: Use unicode characters instead of svg icons. ([56833](https://github.com/WordPress/gutenberg/pull/56833))
+-   Update: Make secondary actions trigger always visible. ([57174](https://github.com/WordPress/gutenberg/pull/57174))
+-   Use default variants for Filter and View buttons. ([57057](https://github.com/WordPress/gutenberg/pull/57057))
+
+#### Patterns
+
+-   Fix broken undo history stack for Pattern Overrides. ([57088](https://github.com/WordPress/gutenberg/pull/57088))
+-   Fix unsaved pattern not reflecting on pattern overrides. ([57148](https://github.com/WordPress/gutenberg/pull/57148))
+-   [Pattern Overrides] Use a single checkbox to turn on pattern overrides for all allowed attributes. ([57009](https://github.com/WordPress/gutenberg/pull/57009))
+
+#### List View
+
+-   Allow right-click to open block settings dropdown, add editor setting. ([50273](https://github.com/WordPress/gutenberg/pull/50273))
+
+### Documentation
+
+-   Add new section on markup representation of a block. ([57230](https://github.com/WordPress/gutenberg/pull/57230))
+-   Added additional explanations to attributes and supports sections. ([57120](https://github.com/WordPress/gutenberg/pull/57120))
+-   Added documentation for the text-decoration-control component. ([57184](https://github.com/WordPress/gutenberg/pull/57184))
+-   CardHeader used instead of CardFooter. ([45585](https://github.com/WordPress/gutenberg/pull/45585))
+-   Components: Update TypeScript-related tips in Contributing Guide. ([57267](https://github.com/WordPress/gutenberg/pull/57267))
+-   Doc: Block Wrapper - enclose html tag, use correct keyword `supports` not `support`. ([56906](https://github.com/WordPress/gutenberg/pull/56906))
+-   Docs/getting started readme. ([57223](https://github.com/WordPress/gutenberg/pull/57223))
+-   Docs: Add new "Build your first block" tutorial to the Getting Started section of the BEH. ([56931](https://github.com/WordPress/gutenberg/pull/56931))
+-   Docs: Fundamentals block development/block in the editor -- add page to manifest (toc). ([57179](https://github.com/WordPress/gutenberg/pull/57179))
+-   Docs: Fundamentals of Block Development - block in the editor. ([56488](https://github.com/WordPress/gutenberg/pull/56488))
+-   Enforce heading sentence case throughout the BEH. ([57143](https://github.com/WordPress/gutenberg/pull/57143))
+-   Fix grammar and typos in the Block Development Environment doc. ([57123](https://github.com/WordPress/gutenberg/pull/57123))
+-   Fix incorrect links in ToggleGroupControl docs. ([57236](https://github.com/WordPress/gutenberg/pull/57236))
+-   Fix: Typo on footnotes docs. ([57348](https://github.com/WordPress/gutenberg/pull/57348))
+-   Fixes heading hierarchy in block filters. ([57239](https://github.com/WordPress/gutenberg/pull/57239))
+-   Minor heading to improve readability and reference. ([57102](https://github.com/WordPress/gutenberg/pull/57102))
+-   Platform Docs: Fix missing link. ([57145](https://github.com/WordPress/gutenberg/pull/57145))
+-   Remove Radix UI-related documentation. ([57336](https://github.com/WordPress/gutenberg/pull/57336))
+-   Remove links to excalidraw diagrams from images. ([56980](https://github.com/WordPress/gutenberg/pull/56980))
+-   Remove the "How to use JavaScript in the Block Editor" documentation. ([57166](https://github.com/WordPress/gutenberg/pull/57166))
+-   Remove unnecessary TOCs from documentation. ([57087](https://github.com/WordPress/gutenberg/pull/57087))
+-   Restore descriptions for deprecated button props. ([37690](https://github.com/WordPress/gutenberg/pull/37690))
+-   Small heading fix. ([57098](https://github.com/WordPress/gutenberg/pull/57098))
+-   Snackbar: Remove `__unstableHTML` prop from TS. ([57218](https://github.com/WordPress/gutenberg/pull/57218))
+-   Update block toolbar and settings sidebar image. ([57203](https://github.com/WordPress/gutenberg/pull/57203))
+-   fix: Updated the link for "Building a custom block editor". ([57319](https://github.com/WordPress/gutenberg/pull/57319))
+
+### Code Quality
+
+-   Add missing block/theme json $schema property. ([57201](https://github.com/WordPress/gutenberg/pull/57201))
+-   Add missing period in block descriptions. ([57131](https://github.com/WordPress/gutenberg/pull/57131))
+-   Fix code style in Gutenberg_HTML_Tag_Processor_6_5. ([57030](https://github.com/WordPress/gutenberg/pull/57030))
+-   Font size picker: Use Button API for keeping focus on reset. ([57221](https://github.com/WordPress/gutenberg/pull/57221))
+-   Mobile: Fix getPxFromCssUnit circular dependency. ([57045](https://github.com/WordPress/gutenberg/pull/57045))
+
+#### Block Editor
+
+-   Editor: Move the Excerpt panel to the editor package. ([57096](https://github.com/WordPress/gutenberg/pull/57096))
+-   Refactor useCanContextualToolbarShow for simplicity and clarity. ([56914](https://github.com/WordPress/gutenberg/pull/56914))
+-   Remove unnecessary isDisabled option on useShortcut for BlockToolbarPopover. ([56907](https://github.com/WordPress/gutenberg/pull/56907))
+-   Replace block variation buttons with ToggleGroupControl. ([45654](https://github.com/WordPress/gutenberg/pull/45654))
+-   Replace isSmall prop #53560. ([53599](https://github.com/WordPress/gutenberg/pull/53599))
+-   Several little refactors. ([57107](https://github.com/WordPress/gutenberg/pull/57107))
+-   useBlockTypesState: Divide useSelect call into two. ([57163](https://github.com/WordPress/gutenberg/pull/57163))
+-   useInputRules: Remove unneeded check for inputRule. ([57164](https://github.com/WordPress/gutenberg/pull/57164))
+
+#### Components
+
+-   Adding unit tests for `useCompositeState` to `Composite` component. ([56645](https://github.com/WordPress/gutenberg/pull/56645))
+-   Delete experimental radix-ui based DropdownMenu component. ([55626](https://github.com/WordPress/gutenberg/pull/55626))
+-   GradientPicker: Use index while iterating over gradient entries to avoid React "duplicated key" warning. ([57361](https://github.com/WordPress/gutenberg/pull/57361))
+-   TabPanel: Refactor unit tests to @ariakit/test. ([57302](https://github.com/WordPress/gutenberg/pull/57302))
+-   Tabs: Update styling to more closely match previous implementation. ([57275](https://github.com/WordPress/gutenberg/pull/57275))
+-   ToggleGroupControl: Fix snapshots. ([57367](https://github.com/WordPress/gutenberg/pull/57367))
+-   Move kebabCase() function from block-editor package and mark it as private API. ([56758](https://github.com/WordPress/gutenberg/pull/56758))
+
+#### Block Library
+
+-   Gallery Block: Remove unused attributes property in shortcode transformation. ([57356](https://github.com/WordPress/gutenberg/pull/57356))
+-   Remove cruft in Button block editor styles. ([30950](https://github.com/WordPress/gutenberg/pull/30950))
+-   Tag Cloud: Replace 'withSelect' HoC with 'useSelect'. ([57194](https://github.com/WordPress/gutenberg/pull/57194))
+
+#### Global Styles
+
+-   Global styles revisions: Refactor sticky pagination footer to use CSS. ([57294](https://github.com/WordPress/gutenberg/pull/57294))
+-   Relocate revisions from fill to sidebar component. ([57034](https://github.com/WordPress/gutenberg/pull/57034))
+-   Simplify the conditions in GlobalStylesEditorCanvasContainerLink. ([57144](https://github.com/WordPress/gutenberg/pull/57144))
+
+#### List View
+
+-   Editor: Move and unify the inserter and list view states. ([57158](https://github.com/WordPress/gutenberg/pull/57158))
+-   Editor: Unify the list view shortcut registration and definition. ([57200](https://github.com/WordPress/gutenberg/pull/57200))
+-   ListView: Replace prop drilldown by a stable ref in store. ([57198](https://github.com/WordPress/gutenberg/pull/57198))
+
+#### Typography
+
+-   Font Library: Consolidate existing API rest endpoints. ([57282](https://github.com/WordPress/gutenberg/pull/57282))
+-   Quality: Replace wpKebabCase function with kebabCase function from components package. ([57038](https://github.com/WordPress/gutenberg/pull/57038))
+
+#### Site Editor
+
+-   Editor: Move the panel visibility state from the edit-post to the editor package. ([57012](https://github.com/WordPress/gutenberg/pull/57012))
+-   Remove `isResizing` variable from layout component as it is always false. ([57119](https://github.com/WordPress/gutenberg/pull/57119))
+-   Allow disabling and enabling comments. ([57205](https://github.com/WordPress/gutenberg/pull/57205))
+
+#### Navigation Menus
+
+-   Add basic test coverage for Navigation Menu editing mode. ([56871](https://github.com/WordPress/gutenberg/pull/56871))
+-   Fix flaky Navigation focus mode test. ([57016](https://github.com/WordPress/gutenberg/pull/57016))
+
+#### Plugin
+
+-   Implement proposal to remove the WordPress-Docs ruleset. ([56982](https://github.com/WordPress/gutenberg/pull/56982))
+-   i18n: Make menu and title labels in Gutenberg plugin translatable. ([43500](https://github.com/WordPress/gutenberg/pull/43500))
+
+#### Modules API
+
+-   Refactor, tests, and final dependencies array structure. ([57231](https://github.com/WordPress/gutenberg/pull/57231))
+
+### Tools
+
+-   Dependency Extraction Webpack Plugin: Fix test issues. ([57332](https://github.com/WordPress/gutenberg/pull/57332))
+
+#### Testing
+
+-   Add an end-to-end test to check image upload working in site editor. ([57086](https://github.com/WordPress/gutenberg/pull/57086))
+-   Components: Add unit test `__experimentalExpandOnFocus` unit tests for `FormTokenField`. ([57122](https://github.com/WordPress/gutenberg/pull/57122))
+-   Global styles revisions e2e: Tidy up selectors to open revisions panel. ([57146](https://github.com/WordPress/gutenberg/pull/57146))
+-   Migrate 'Comments Form' end-to-end tests to Playwright. ([57337](https://github.com/WordPress/gutenberg/pull/57337))
+-   Migrate Site Editor 'settings sidebar' end-to-end tests to Playwright. ([57392](https://github.com/WordPress/gutenberg/pull/57392))
+-   Migrate remaining 'block switcher' end-to-end tests to Playwright. ([57381](https://github.com/WordPress/gutenberg/pull/57381))
+-   e2e: Try to fix flaky font-library test. ([57092](https://github.com/WordPress/gutenberg/pull/57092))
+
+#### Build Tooling
+
+-   DependencyExtractionWebpackPlugin: Drop webpack4 and node<18. ([57303](https://github.com/WordPress/gutenberg/pull/57303))
+-   Disable webpack perf hints when compiling packages. ([57155](https://github.com/WordPress/gutenberg/pull/57155))
+-   Update to Node.js 20.x. ([56331](https://github.com/WordPress/gutenberg/pull/56331))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @dotslashbit: fix: Updated the link for "Building a custom block editor". ([57319](https://github.com/WordPress/gutenberg/pull/57319))
+-   @koen12344: Restore descriptions for deprecated button props. ([37690](https://github.com/WordPress/gutenberg/pull/37690))
+-   @kurudrive: Fix DayButton dot position and expand Button area. ([55502](https://github.com/WordPress/gutenberg/pull/55502))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewhayward @andrewserong @anton-vlasenko @arthur791004 @atachibana @bacoords @BenjaminZekavica @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @colorful-tones @DAreRodz @dcalhoun @ddryo @derekblank @desrosj @dotslashbit @ellatrix @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @koen12344 @kurudrive @luisherranz @Mamaduka @matiasbenedetto @mcsf @mhimon @mirka @ndiego @ntsekouras @oandregal @ockham @ramonjd @richtabor @SiobhyB @sirreal @stokesman @t-hamano @tellthemachines @TimBroddin @youknowriad @yuliyan
+
+= 17.2.4 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Site editor: fix image upload bug ([57040](https://github.com/WordPress/gutenberg/pull/57040))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@glendaviesnz
+
+= 17.3.0 =
+
+## Changelog
+
+### Bug Fixes
+
+-   (edit-site)(use-init-edited-entity-from-url) Safely access `toString()` on `siteData`'s `page_on_front`. ([57035](https://github.com/WordPress/gutenberg/pull/57035))
+
+#### Components
+
+-   Fix form token field suggestion list reopening after blurring the input. ([57002](https://github.com/WordPress/gutenberg/pull/57002))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine @talldan
+
+= 17.3.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+-   Components: Replace `TabPanel` with `Tabs` in the editor's `ColorPanel`. ([56878](https://github.com/WordPress/gutenberg/pull/56878))
+-   Editor: Move the edit template blocks notification to editor package. ([56901](https://github.com/WordPress/gutenberg/pull/56901))
+-   Editor: Unify the preview dropdown between post and site editors. ([56921](https://github.com/WordPress/gutenberg/pull/56921))
+-   Editor: Use the same PostTemplatePanel between post and site editors. ([56817](https://github.com/WordPress/gutenberg/pull/56817))
+-   Tabs: Replace `id` with new `tabId` prop. ([56883](https://github.com/WordPress/gutenberg/pull/56883))
+-   Update main toolbar buttons to all be compact. ([56635](https://github.com/WordPress/gutenberg/pull/56635), [56729](https://github.com/WordPress/gutenberg/pull/56729))
+-   Update preferences organization. ([56481](https://github.com/WordPress/gutenberg/pull/56481))
+
+#### Components
+
+-   FocalPointPicker with \_\_next40pxDefaultSize. ([56021](https://github.com/WordPress/gutenberg/pull/56021))
+-   Font Library: Improve usability of font variant selection. ([56158](https://github.com/WordPress/gutenberg/pull/56158))
+-   Tabs: Sync browser focus to selected tab in controlled mode. ([56658](https://github.com/WordPress/gutenberg/pull/56658))
+-   Use consistent styling for duotone panels. ([56801](https://github.com/WordPress/gutenberg/pull/56801))
+-   `BorderControl`: Fix button styles. ([56730](https://github.com/WordPress/gutenberg/pull/56730))
+-   `DimensionControl`: Add \_\_next40pxDefaultSize prop. ([56805](https://github.com/WordPress/gutenberg/pull/56805))
+-   `FontSizePicker`: Add opt-in prop for 40px default size. ([56804](https://github.com/WordPress/gutenberg/pull/56804))
+-   `QueryControls`: Add opt-in prop for 40px default size. ([56576](https://github.com/WordPress/gutenberg/pull/56576))
+
+#### Block Library
+
+-   Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874))
+-   Consistent default typography controls across blocks. ([55208](https://github.com/WordPress/gutenberg/pull/55208))
+-   Social Icons: Add Gravatar service. ([56544](https://github.com/WordPress/gutenberg/pull/56544))
+-   Tweak table block placeholder with \_\_next40pxDefaultSize props. ([56935](https://github.com/WordPress/gutenberg/pull/56935))
+
+#### Site Editor
+
+-   Merge the post only mode and the post editor. ([56671](https://github.com/WordPress/gutenberg/pull/56671))
+-   Site Editor Sidebar: Add "Areas" details panel to all templates and update icon. ([55677](https://github.com/WordPress/gutenberg/pull/55677))
+
+#### Block Editor
+
+-   Allow dragging between adjacent container blocks based on a threshold. ([56466](https://github.com/WordPress/gutenberg/pull/56466))
+-   Components: Replace `TabPanel` with `Tabs` in the editor's `ColorGradientControl`. ([56351](https://github.com/WordPress/gutenberg/pull/56351))
+
+#### Data Views
+
+-   Update data view layout. ([56786](https://github.com/WordPress/gutenberg/pull/56786))
+
+#### Layout
+
+-   Match the front end layout classname in the editor. ([56774](https://github.com/WordPress/gutenberg/pull/56774))
+
+#### Global Styles
+
+-   Global style revisions: Show change summary on selected item. ([56577](https://github.com/WordPress/gutenberg/pull/56577))
+
+#### Icons
+
+-   Another round of HiDPI icon tweaks. ([56532](https://github.com/WordPress/gutenberg/pull/56532))
+
+#### Media
+
+-   Update external images panel in post publish sidebar. ([55524](https://github.com/WordPress/gutenberg/pull/55524))
+
+#### Post Editor
+
+-   Implement `Tabs` in editor settings. ([55360](https://github.com/WordPress/gutenberg/pull/55360))
+
+### Bug Fixes
+
+-   Create-block-interactive-template: Add all files to the generated plugin zip. ([56943](https://github.com/WordPress/gutenberg/pull/56943))
+-   Create-block-interactive-template: Prevent crash when Gutenberg plugin is not installed. ([56941](https://github.com/WordPress/gutenberg/pull/56941))
+-   Fix end-to-end test: Update how we find the template title to match markup changes. ([56992](https://github.com/WordPress/gutenberg/pull/56992))
+-   Fix: Fatal php error if a template was created by an author that was deleted. ([56990](https://github.com/WordPress/gutenberg/pull/56990))
+-   Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171))
+-   Fix: Use span on template list titles. ([56955](https://github.com/WordPress/gutenberg/pull/56955))
+-   Font Library: Add font family and font face preview keys to schema. ([56793](https://github.com/WordPress/gutenberg/pull/56793))
+-   Remove unnecessary CSS for shrinking central header area. ([56220](https://github.com/WordPress/gutenberg/pull/56220))
+-   Revert format types hook refactor. ([56859](https://github.com/WordPress/gutenberg/pull/56859))
+-   Show template center UI when no block is selected. ([56217](https://github.com/WordPress/gutenberg/pull/56217))
+-   setImmutably: Don't clone all objects. ([56612](https://github.com/WordPress/gutenberg/pull/56612))
+
+#### Block Library
+
+-   Fix error when using a navigation block that returns an empty fallback result. ([56629](https://github.com/WordPress/gutenberg/pull/56629))
+-   Fixture Tests: Correctly generate fixture files for form-related blocks. ([56719](https://github.com/WordPress/gutenberg/pull/56719))
+-   Image: Fix resetting behaviour for alt image text. ([56809](https://github.com/WordPress/gutenberg/pull/56809))
+-   Social Links Block: Prevent Theme Styles Distorting Size. ([56301](https://github.com/WordPress/gutenberg/pull/56301))
+-   Update image block save to only save align none class. ([56449](https://github.com/WordPress/gutenberg/pull/56449))
+
+#### Components
+
+-   DropdownMenuV2Ariakit: Prevent prefix collapsing if all radios or checkboxes are unselected. ([56720](https://github.com/WordPress/gutenberg/pull/56720))
+-   FormToggle: Do not use "/" math operator. ([56672](https://github.com/WordPress/gutenberg/pull/56672))
+-   PaletteEdit: Temporary custom gradient not saving. ([56896](https://github.com/WordPress/gutenberg/pull/56896))
+-   `ToggleGroupControl`: React correctly to external controlled updates. ([56678](https://github.com/WordPress/gutenberg/pull/56678))
+
+#### Block Editor
+
+-   Apply \_\_next40pxDefaultSize to TextControl and Button component in renaming UIs. ([56933](https://github.com/WordPress/gutenberg/pull/56933))
+-   Pattern inserter: Fix Broken preview layout. ([56814](https://github.com/WordPress/gutenberg/pull/56814))
+-   Patterns: Keep synced pattern when added via drag and drop. ([56924](https://github.com/WordPress/gutenberg/pull/56924))
+
+#### Design Tools
+
+-   Background image support: Fix duplicate output of styling rules. ([56997](https://github.com/WordPress/gutenberg/pull/56997))
+-   Fix sticky position in classic themes with appearance tools support. ([56743](https://github.com/WordPress/gutenberg/pull/56743))
+
+#### Post Editor
+
+-   Editor Canvas: Fix animation when device type changes. ([56970](https://github.com/WordPress/gutenberg/pull/56970))
+-   Editor: Fix display of edit template blocks notification. ([56978](https://github.com/WordPress/gutenberg/pull/56978))
+
+#### Site Editor
+
+-   Fix active edited post. ([56863](https://github.com/WordPress/gutenberg/pull/56863))
+-   Show back button when editing navigation and template area in-place with no URL params. ([56741](https://github.com/WordPress/gutenberg/pull/56741))
+
+#### Typography
+
+-   Fix order of typography sizes and families. ([56659](https://github.com/WordPress/gutenberg/pull/56659))
+-   Font Library: Fix font uninstallation. ([56762](https://github.com/WordPress/gutenberg/pull/56762))
+
+#### Navigation in Site View
+
+-   Navigation editor: Fix content mode. ([56856](https://github.com/WordPress/gutenberg/pull/56856))
+
+#### Patterns
+
+-   Fix top position and height of Pattern Modal Sidebar. ([56787](https://github.com/WordPress/gutenberg/pull/56787))
+
+#### Interactivity API
+
+-   Start using modules in the interactive create-block template. ([56694](https://github.com/WordPress/gutenberg/pull/56694))
+
+#### Layout
+
+-   Fix input not showing when switching to "Fixed" width. ([56660](https://github.com/WordPress/gutenberg/pull/56660))
+
+#### Data Views
+
+-   Align data view icon usage. ([56602](https://github.com/WordPress/gutenberg/pull/56602))
+
+#### Block Styles
+
+-   Consolidate and resolve display issues between InserterPreviewPanel and BlockStylesPreviewPanel. ([56011](https://github.com/WordPress/gutenberg/pull/56011))
+
+#### Inspector Controls
+
+-   Decode some characters if used in taxonomy name so it's displayed correctly in Query Loop filters. ([50376](https://github.com/WordPress/gutenberg/pull/50376))
+
+### Accessibility
+
+#### Data Views
+
+-   Add scroll padding to dataviews container. ([56946](https://github.com/WordPress/gutenberg/pull/56946))
+-   Adding `aria-sort` to table view headers. ([56860](https://github.com/WordPress/gutenberg/pull/56860))
+-   Fix: Use span instead of heading for the template titles. ([56785](https://github.com/WordPress/gutenberg/pull/56785))
+
+#### Post Editor
+
+-   Avoid to show unnecessary Tooltip for the Post Schedule button. ([56759](https://github.com/WordPress/gutenberg/pull/56759))
+
+#### Block Editor
+
+-   Increase right padding of URL field to take the Submit button into account. ([56685](https://github.com/WordPress/gutenberg/pull/56685))
+
+#### Site Editor
+
+-   Shorter screen reader announcement after changing pages. ([56339](https://github.com/WordPress/gutenberg/pull/56339))
+
+#### Components
+
+-   Use tooltip for the Timezone only when necessary. ([56214](https://github.com/WordPress/gutenberg/pull/56214))
+
+### Performance
+
+-   Block editor: Make all BlockEdit hooks pure. ([56813](https://github.com/WordPress/gutenberg/pull/56813))
+-   Block editor: Remove 4 useSelect in favour of context. ([56915](https://github.com/WordPress/gutenberg/pull/56915))
+-   Block editor: hooks: Avoid BlockEdit filter for content locking UI. ([56957](https://github.com/WordPress/gutenberg/pull/56957))
+-   Block editor: hooks: Share block settings. ([56852](https://github.com/WordPress/gutenberg/pull/56852))
+-   Keycodes: Avoid regex for capital case. ([56822](https://github.com/WordPress/gutenberg/pull/56822))
+-   Measure typing without inspector. ([56753](https://github.com/WordPress/gutenberg/pull/56753))
+-   Media upload component: Lazy mount. ([56958](https://github.com/WordPress/gutenberg/pull/56958))
+-   Paragraph: Store subscription for selected block only. ([56967](https://github.com/WordPress/gutenberg/pull/56967))
+-   Perf: Reopen inspector for remaining tests. ([56780](https://github.com/WordPress/gutenberg/pull/56780))
+-   useBlockProps: Combine store subscriptions. ([56847](https://github.com/WordPress/gutenberg/pull/56847))
+
+#### Block Editor
+
+-   Improve opening inserter in post editor. ([57006](https://github.com/WordPress/gutenberg/pull/57006))
+-   hooks: Subscribe only to relevant attributes. ([56783](https://github.com/WordPress/gutenberg/pull/56783))
+
+#### Site Editor
+
+-   Fix typing performance by not rendering sidebar. ([56927](https://github.com/WordPress/gutenberg/pull/56927))
+
+#### Components
+
+-   ToolsPanel: Fix deregister/register on type. ([56770](https://github.com/WordPress/gutenberg/pull/56770))
+
+#### Modules API
+
+-   Load the import map polyfill only when there is an import map. ([56699](https://github.com/WordPress/gutenberg/pull/56699))
+
+#### Post Editor
+
+-   Editor: Avoid double parsing content in 'getSuggestedPostFormat' selelector. ([56679](https://github.com/WordPress/gutenberg/pull/56679))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Add story. ([56761](https://github.com/WordPress/gutenberg/pull/56761))
+-   DataViews: Add support for `NOT IN` operator in filter. ([56479](https://github.com/WordPress/gutenberg/pull/56479))
+-   DataViews: Centralize the view definition and rename `list` to `table`. ([56693](https://github.com/WordPress/gutenberg/pull/56693))
+-   DataViews: Do not export strings constants. ([56754](https://github.com/WordPress/gutenberg/pull/56754))
+-   DataViews: Export the view components as defaults. ([56677](https://github.com/WordPress/gutenberg/pull/56677))
+-   DataViews: Fix dropdown menu actions with modal. ([56760](https://github.com/WordPress/gutenberg/pull/56760))
+-   DataViews: Hide pagination if we have only one page. ([56948](https://github.com/WordPress/gutenberg/pull/56948))
+-   DataViews: Implement `NOT IN` operator for author filter in templates. ([56777](https://github.com/WordPress/gutenberg/pull/56777))
+-   DataViews: Iterate on list view. ([56746](https://github.com/WordPress/gutenberg/pull/56746))
+-   DataViews: Make `Actions` styles the same as any other column header. ([56654](https://github.com/WordPress/gutenberg/pull/56654))
+-   DataViews: Make `mediaField` not hidable. ([56643](https://github.com/WordPress/gutenberg/pull/56643))
+-   DataViews: Rename view components. ([56709](https://github.com/WordPress/gutenberg/pull/56709))
+-   DataViews: Render data async conditionally. ([56851](https://github.com/WordPress/gutenberg/pull/56851))
+-   DataViews: Set proper role for AddFilter's items. ([56714](https://github.com/WordPress/gutenberg/pull/56714))
+-   DataViews: Set proper semantics for dropdown items. ([56676](https://github.com/WordPress/gutenberg/pull/56676))
+-   DataViews: Update sorting semantics. ([56717](https://github.com/WordPress/gutenberg/pull/56717))
+-   Dataviews: Extract to dedicated bundled package. ([56721](https://github.com/WordPress/gutenberg/pull/56721))
+
+#### Block Validation/Deprecation
+
+-   Input Field Block: Use `useblockProps` hook in save function. ([56507](https://github.com/WordPress/gutenberg/pull/56507))
+
+#### Patterns
+
+-   Implement partially synced patterns behind an experimental flag. ([56235](https://github.com/WordPress/gutenberg/pull/56235))
+
+### Documentation
+
+-   Add the nested blocks chapter to the platform documentation. ([56689](https://github.com/WordPress/gutenberg/pull/56689))
+-   Components: Update CHANGELOG.md. ([56960](https://github.com/WordPress/gutenberg/pull/56960))
+-   Doc: Search Control - add Storybook link. ([56815](https://github.com/WordPress/gutenberg/pull/56815))
+-   Doc: Spinner - add Storybook link. ([56818](https://github.com/WordPress/gutenberg/pull/56818))
+-   Docs: Add storybook link for spinner component. ([56953](https://github.com/WordPress/gutenberg/pull/56953))
+-   Docs: Fix {% end %} tab position to show the text. ([56735](https://github.com/WordPress/gutenberg/pull/56735))
+-   Docs: Fundamentals of Block Development - Minor fixes - registration-of-a-block. ([56731](https://github.com/WordPress/gutenberg/pull/56731))
+-   Docs: Fundamentals of Block Development - add links. ([56700](https://github.com/WordPress/gutenberg/pull/56700))
+-   Docs: Fundamentals of Block Development ---- Small fixes for "Block wrapper". ([56651](https://github.com/WordPress/gutenberg/pull/56651))
+-   Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872))
+-   Platform Docs: Add trusted by section. ([56749](https://github.com/WordPress/gutenberg/pull/56749))
+-   Revert "Doc: Spinner - add Storybook link". ([56913](https://github.com/WordPress/gutenberg/pull/56913))
+-   Update Getting Started Guide for Gutenberg 17.2. ([56674](https://github.com/WordPress/gutenberg/pull/56674))
+-   Update InnerBlocks defaultblock doc usage. ([56728](https://github.com/WordPress/gutenberg/pull/56728))
+-   Update formatting and fix grammar in the Block Editor Handbook readme. ([56798](https://github.com/WordPress/gutenberg/pull/56798))
+
+### Code Quality
+
+-   Block editor: hooks: Avoid getEditWrapperProps. ([56912](https://github.com/WordPress/gutenberg/pull/56912))
+-   Block lib: Use RichText.isEmpty where forgotten. ([56726](https://github.com/WordPress/gutenberg/pull/56726))
+-   Block library: Reusable caption component util. ([56606](https://github.com/WordPress/gutenberg/pull/56606))
+-   Core data revisions: Remove hardcoded supports constant. ([56701](https://github.com/WordPress/gutenberg/pull/56701))
+-   Editor: Cleanup default editor mode handling. ([56819](https://github.com/WordPress/gutenberg/pull/56819))
+-   Editor: Move the BlockCanvas component within the EditorCanvas component. ([56850](https://github.com/WordPress/gutenberg/pull/56850))
+-   Editor: Move the device type state to the editor package. ([56866](https://github.com/WordPress/gutenberg/pull/56866))
+-   Editor: Unify device preview styles. ([56904](https://github.com/WordPress/gutenberg/pull/56904))
+-   Fix PHP linter failing. ([56905](https://github.com/WordPress/gutenberg/pull/56905))
+-   Framework: Bundle the BlockTools component within BlockCanvas. ([56996](https://github.com/WordPress/gutenberg/pull/56996))
+-   Move `useDebouncedInput` hook to @wordpress/compose package. ([56744](https://github.com/WordPress/gutenberg/pull/56744))
+-   Post Editor: Rely on the editor store for the template mode state. ([56716](https://github.com/WordPress/gutenberg/pull/56716))
+-   Refactor <BlockToolbar />. ([56335](https://github.com/WordPress/gutenberg/pull/56335))
+-   Remove Block Tools BackCompat. ([56874](https://github.com/WordPress/gutenberg/pull/56874))
+-   Site and Post Editor: Unify the DocumentBar component. ([56778](https://github.com/WordPress/gutenberg/pull/56778))
+-   getValueFromObjectPath: Remove memize. ([56711](https://github.com/WordPress/gutenberg/pull/56711))
+
+#### Block Editor
+
+-   Don't render undefined classname in useBlockProps hook. ([56923](https://github.com/WordPress/gutenberg/pull/56923))
+-   One hook to rule them all: Preparation for a block supports API. ([56862](https://github.com/WordPress/gutenberg/pull/56862))
+-   RichText: Pass value to store. ([43204](https://github.com/WordPress/gutenberg/pull/43204))
+-   hooks: Manage BlockListBlock filters in one place. ([56875](https://github.com/WordPress/gutenberg/pull/56875))
+
+#### Global Styles
+
+-   Command Palette: Use getRevisions instead of deprecated selector. ([56738](https://github.com/WordPress/gutenberg/pull/56738))
+-   Global styles revisions: Remove PHP unit tests that are running in Core. ([56492](https://github.com/WordPress/gutenberg/pull/56492))
+
+#### Components
+
+-   Site editor: Do not use navigator's internal classname. ([56911](https://github.com/WordPress/gutenberg/pull/56911))
+
+#### Data Views
+
+-   DataViews: Remove TanStack. ([56873](https://github.com/WordPress/gutenberg/pull/56873))
+
+### Tools
+
+-   Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339))
+-   Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516))
+-   wp-env: Make env-cwd option work on Windows. ([56265](https://github.com/WordPress/gutenberg/pull/56265))
+
+#### Testing
+
+-   Migrate 'editor multi entity saving' end-to-end tests to Playwright. ([56670](https://github.com/WordPress/gutenberg/pull/56670))
+-   Migrate 'inner-blocks-locking-all-embed' end-to-end tests to Playwright. ([56673](https://github.com/WordPress/gutenberg/pull/56673))
+-   Migrate 'site editor export' end-to-end tests to Playwright. ([56675](https://github.com/WordPress/gutenberg/pull/56675))
+-   RN: Add watch mode for native tests. ([56788](https://github.com/WordPress/gutenberg/pull/56788))
+-   Scripts: Enable skipping Playwright browser installation. ([56594](https://github.com/WordPress/gutenberg/pull/56594))
+-   Tabs: Implement `ariakit/test` in unit tests. ([56835](https://github.com/WordPress/gutenberg/pull/56835))
+-   `CustomSelectControl`: Add additional unit tests. ([56575](https://github.com/WordPress/gutenberg/pull/56575))
+
+### Copy
+
+-   Copy/fix capitalization of WordPress. ([56834](https://github.com/WordPress/gutenberg/pull/56834))
+
+#### Site Editor
+
+-   Improve text and design of the block removal warnings. ([56869](https://github.com/WordPress/gutenberg/pull/56869))
+
+#### Global Styles
+
+-   Global styles welcome guide: Add a space between translated strings. ([56839](https://github.com/WordPress/gutenberg/pull/56839))
+
+#### Block Library
+
+-   Simplify page list edit warning. ([56829](https://github.com/WordPress/gutenberg/pull/56829))
+
+#### Patterns
+
+-   End pattern page descriptions with a period. ([56828](https://github.com/WordPress/gutenberg/pull/56828))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @benoitchantre: Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516))
+-   @kmanijak: Decode some characters if used in taxonomy name so it's displayed correctly in Query Loop filters. ([50376](https://github.com/WordPress/gutenberg/pull/50376))
+-   @lithrel: Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339))
+-   @nk-o: Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171))
+-   @taylorgorman: Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872))
+-   @valerogarte: #55702 - Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @ajlende @alexstine @andrewhayward @andrewserong @apeatling @atachibana @Aurorum @benoitchantre @bph @brookewp @chad1008 @ciampo @colorful-tones @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @jameskoster @jasmussen @jeherve @jeryj @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @kmanijak @lithrel @luisherranz @Mamaduka @matiasbenedetto @mikachan @miminari @mtias @ndiego @nk-o @ntsekouras @oandregal @ramonjd @richtabor @scruffian @SiobhyB @t-hamano @talldan @taylorgorman @tellthemachines @tyxla @valerogarte @WunderBart @youknowriad
+
+= 17.2.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Components
+
+-   `FormTokenField`: Fix a regression where the suggestion list would re-open after clicking away from the input ([#57002](https://github.com/WordPress/gutenberg/pull/57002)).
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@talldan
+
+= 17.2.2 =
+
+This patch release fixes a WSOD which could occur in the site editor. See https://github.com/WordPress/gutenberg/pull/57035.
+
+= 17.3.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+-   Components: Replace `TabPanel` with `Tabs` in the editor's `ColorPanel`. ([56878](https://github.com/WordPress/gutenberg/pull/56878))
+-   Editor: Move the edit template blocks notification to editor package. ([56901](https://github.com/WordPress/gutenberg/pull/56901))
+-   Editor: Unify the preview dropdown between post and site editors. ([56921](https://github.com/WordPress/gutenberg/pull/56921))
+-   Editor: Use the same PostTemplatePanel between post and site editors. ([56817](https://github.com/WordPress/gutenberg/pull/56817))
+-   Tabs: Replace `id` with new `tabId` prop. ([56883](https://github.com/WordPress/gutenberg/pull/56883))
+-   Update main toolbar buttons to all be compact. ([56635](https://github.com/WordPress/gutenberg/pull/56635), [56729](https://github.com/WordPress/gutenberg/pull/56729))
+-   Update preferences organization. ([56481](https://github.com/WordPress/gutenberg/pull/56481))
+
+#### Components
+
+-   FocalPointPicker with \_\_next40pxDefaultSize. ([56021](https://github.com/WordPress/gutenberg/pull/56021))
+-   Font Library: Improve usability of font variant selection. ([56158](https://github.com/WordPress/gutenberg/pull/56158))
+-   Tabs: Sync browser focus to selected tab in controlled mode. ([56658](https://github.com/WordPress/gutenberg/pull/56658))
+-   Use consistent styling for duotone panels. ([56801](https://github.com/WordPress/gutenberg/pull/56801))
+-   `BorderControl`: Fix button styles. ([56730](https://github.com/WordPress/gutenberg/pull/56730))
+-   `DimensionControl`: Add \_\_next40pxDefaultSize prop. ([56805](https://github.com/WordPress/gutenberg/pull/56805))
+-   `FontSizePicker`: Add opt-in prop for 40px default size. ([56804](https://github.com/WordPress/gutenberg/pull/56804))
+-   `QueryControls`: Add opt-in prop for 40px default size. ([56576](https://github.com/WordPress/gutenberg/pull/56576))
+
+#### Block Library
+
+-   Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874))
+-   Consistent default typography controls across blocks. ([55208](https://github.com/WordPress/gutenberg/pull/55208))
+-   Social Icons: Add Gravatar service. ([56544](https://github.com/WordPress/gutenberg/pull/56544))
+-   Tweak table block placeholder with \_\_next40pxDefaultSize props. ([56935](https://github.com/WordPress/gutenberg/pull/56935))
+
+#### Site Editor
+
+-   Merge the post only mode and the post editor. ([56671](https://github.com/WordPress/gutenberg/pull/56671))
+-   Site Editor Sidebar: Add "Areas" details panel to all templates and update icon. ([55677](https://github.com/WordPress/gutenberg/pull/55677))
+
+#### Block Editor
+
+-   Allow dragging between adjacent container blocks based on a threshold. ([56466](https://github.com/WordPress/gutenberg/pull/56466))
+-   Components: Replace `TabPanel` with `Tabs` in the editor's `ColorGradientControl`. ([56351](https://github.com/WordPress/gutenberg/pull/56351))
+
+#### Data Views
+
+-   Update data view layout. ([56786](https://github.com/WordPress/gutenberg/pull/56786))
+
+#### Layout
+
+-   Match the front end layout classname in the editor. ([56774](https://github.com/WordPress/gutenberg/pull/56774))
+
+#### Global Styles
+
+-   Global style revisions: Show change summary on selected item. ([56577](https://github.com/WordPress/gutenberg/pull/56577))
+
+#### Icons
+
+-   Another round of HiDPI icon tweaks. ([56532](https://github.com/WordPress/gutenberg/pull/56532))
+
+#### Media
+
+-   Update external images panel in post publish sidebar. ([55524](https://github.com/WordPress/gutenberg/pull/55524))
+
+#### Post Editor
+
+-   Implement `Tabs` in editor settings. ([55360](https://github.com/WordPress/gutenberg/pull/55360))
+
+### Bug Fixes
+
+-   Create-block-interactive-template: Add all files to the generated plugin zip. ([56943](https://github.com/WordPress/gutenberg/pull/56943))
+-   Create-block-interactive-template: Prevent crash when Gutenberg plugin is not installed. ([56941](https://github.com/WordPress/gutenberg/pull/56941))
+-   Fix end-to-end test: Update how we find the template title to match markup changes. ([56992](https://github.com/WordPress/gutenberg/pull/56992))
+-   Fix: Fatal php error if a template was created by an author that was deleted. ([56990](https://github.com/WordPress/gutenberg/pull/56990))
+-   Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171))
+-   Fix: Use span on template list titles. ([56955](https://github.com/WordPress/gutenberg/pull/56955))
+-   Font Library: Add font family and font face preview keys to schema. ([56793](https://github.com/WordPress/gutenberg/pull/56793))
+-   Remove unnecessary CSS for shrinking central header area. ([56220](https://github.com/WordPress/gutenberg/pull/56220))
+-   Revert format types hook refactor. ([56859](https://github.com/WordPress/gutenberg/pull/56859))
+-   Show template center UI when no block is selected. ([56217](https://github.com/WordPress/gutenberg/pull/56217))
+-   setImmutably: Don't clone all objects. ([56612](https://github.com/WordPress/gutenberg/pull/56612))
+
+#### Block Library
+
+-   Fix error when using a navigation block that returns an empty fallback result. ([56629](https://github.com/WordPress/gutenberg/pull/56629))
+-   Fixture Tests: Correctly generate fixture files for form-related blocks. ([56719](https://github.com/WordPress/gutenberg/pull/56719))
+-   Image: Fix resetting behaviour for alt image text. ([56809](https://github.com/WordPress/gutenberg/pull/56809))
+-   Social Links Block: Prevent Theme Styles Distorting Size. ([56301](https://github.com/WordPress/gutenberg/pull/56301))
+-   Update image block save to only save align none class. ([56449](https://github.com/WordPress/gutenberg/pull/56449))
+
+#### Components
+
+-   DropdownMenuV2Ariakit: Prevent prefix collapsing if all radios or checkboxes are unselected. ([56720](https://github.com/WordPress/gutenberg/pull/56720))
+-   FormToggle: Do not use "/" math operator. ([56672](https://github.com/WordPress/gutenberg/pull/56672))
+-   PaletteEdit: Temporary custom gradient not saving. ([56896](https://github.com/WordPress/gutenberg/pull/56896))
+-   `ToggleGroupControl`: React correctly to external controlled updates. ([56678](https://github.com/WordPress/gutenberg/pull/56678))
+
+#### Block Editor
+
+-   Apply \_\_next40pxDefaultSize to TextControl and Button component in renaming UIs. ([56933](https://github.com/WordPress/gutenberg/pull/56933))
+-   Pattern inserter: Fix Broken preview layout. ([56814](https://github.com/WordPress/gutenberg/pull/56814))
+-   Patterns: Keep synced pattern when added via drag and drop. ([56924](https://github.com/WordPress/gutenberg/pull/56924))
+
+#### Design Tools
+
+-   Background image support: Fix duplicate output of styling rules. ([56997](https://github.com/WordPress/gutenberg/pull/56997))
+-   Fix sticky position in classic themes with appearance tools support. ([56743](https://github.com/WordPress/gutenberg/pull/56743))
+
+#### Post Editor
+
+-   Editor Canvas: Fix animation when device type changes. ([56970](https://github.com/WordPress/gutenberg/pull/56970))
+-   Editor: Fix display of edit template blocks notification. ([56978](https://github.com/WordPress/gutenberg/pull/56978))
+
+#### Site Editor
+
+-   Fix active edited post. ([56863](https://github.com/WordPress/gutenberg/pull/56863))
+-   Show back button when editing navigation and template area in-place with no URL params. ([56741](https://github.com/WordPress/gutenberg/pull/56741))
+
+#### Typography
+
+-   Fix order of typography sizes and families. ([56659](https://github.com/WordPress/gutenberg/pull/56659))
+-   Font Library: Fix font uninstallation. ([56762](https://github.com/WordPress/gutenberg/pull/56762))
+
+#### Navigation in Site View
+
+-   Navigation editor: Fix content mode. ([56856](https://github.com/WordPress/gutenberg/pull/56856))
+
+#### Patterns
+
+-   Fix top position and height of Pattern Modal Sidebar. ([56787](https://github.com/WordPress/gutenberg/pull/56787))
+
+#### Interactivity API
+
+-   Start using modules in the interactive create-block template. ([56694](https://github.com/WordPress/gutenberg/pull/56694))
+
+#### Layout
+
+-   Fix input not showing when switching to "Fixed" width. ([56660](https://github.com/WordPress/gutenberg/pull/56660))
+
+#### Data Views
+
+-   Align data view icon usage. ([56602](https://github.com/WordPress/gutenberg/pull/56602))
+
+#### Block Styles
+
+-   Consolidate and resolve display issues between InserterPreviewPanel and BlockStylesPreviewPanel. ([56011](https://github.com/WordPress/gutenberg/pull/56011))
+
+#### Inspector Controls
+
+-   Decode some characters if used in taxonomy name so it's displayed correctly in Query Loop filters. ([50376](https://github.com/WordPress/gutenberg/pull/50376))
+
+### Accessibility
+
+#### Data Views
+
+-   Add scroll padding to dataviews container. ([56946](https://github.com/WordPress/gutenberg/pull/56946))
+-   Adding `aria-sort` to table view headers. ([56860](https://github.com/WordPress/gutenberg/pull/56860))
+-   Fix: Use span instead of heading for the template titles. ([56785](https://github.com/WordPress/gutenberg/pull/56785))
+
+#### Post Editor
+
+-   Avoid to show unnecessary Tooltip for the Post Schedule button. ([56759](https://github.com/WordPress/gutenberg/pull/56759))
+
+#### Block Editor
+
+-   Increase right padding of URL field to take the Submit button into account. ([56685](https://github.com/WordPress/gutenberg/pull/56685))
+
+#### Site Editor
+
+-   Shorter screen reader announcement after changing pages. ([56339](https://github.com/WordPress/gutenberg/pull/56339))
+
+#### Components
+
+-   Use tooltip for the Timezone only when necessary. ([56214](https://github.com/WordPress/gutenberg/pull/56214))
+
+### Performance
+
+-   Block editor: Make all BlockEdit hooks pure. ([56813](https://github.com/WordPress/gutenberg/pull/56813))
+-   Block editor: Remove 4 useSelect in favour of context. ([56915](https://github.com/WordPress/gutenberg/pull/56915))
+-   Block editor: hooks: Avoid BlockEdit filter for content locking UI. ([56957](https://github.com/WordPress/gutenberg/pull/56957))
+-   Block editor: hooks: Share block settings. ([56852](https://github.com/WordPress/gutenberg/pull/56852))
+-   Keycodes: Avoid regex for capital case. ([56822](https://github.com/WordPress/gutenberg/pull/56822))
+-   Measure typing without inspector. ([56753](https://github.com/WordPress/gutenberg/pull/56753))
+-   Media upload component: Lazy mount. ([56958](https://github.com/WordPress/gutenberg/pull/56958))
+-   Paragraph: Store subscription for selected block only. ([56967](https://github.com/WordPress/gutenberg/pull/56967))
+-   Perf: Reopen inspector for remaining tests. ([56780](https://github.com/WordPress/gutenberg/pull/56780))
+-   useBlockProps: Combine store subscriptions. ([56847](https://github.com/WordPress/gutenberg/pull/56847))
+
+#### Block Editor
+
+-   Improve opening inserter in post editor. ([57006](https://github.com/WordPress/gutenberg/pull/57006))
+-   hooks: Subscribe only to relevant attributes. ([56783](https://github.com/WordPress/gutenberg/pull/56783))
+
+#### Site Editor
+
+-   Fix typing performance by not rendering sidebar. ([56927](https://github.com/WordPress/gutenberg/pull/56927))
+
+#### Components
+
+-   ToolsPanel: Fix deregister/register on type. ([56770](https://github.com/WordPress/gutenberg/pull/56770))
+
+#### Modules API
+
+-   Load the import map polyfill only when there is an import map. ([56699](https://github.com/WordPress/gutenberg/pull/56699))
+
+#### Post Editor
+
+-   Editor: Avoid double parsing content in 'getSuggestedPostFormat' selelector. ([56679](https://github.com/WordPress/gutenberg/pull/56679))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Add story. ([56761](https://github.com/WordPress/gutenberg/pull/56761))
+-   DataViews: Add support for `NOT IN` operator in filter. ([56479](https://github.com/WordPress/gutenberg/pull/56479))
+-   DataViews: Centralize the view definition and rename `list` to `table`. ([56693](https://github.com/WordPress/gutenberg/pull/56693))
+-   DataViews: Do not export strings constants. ([56754](https://github.com/WordPress/gutenberg/pull/56754))
+-   DataViews: Export the view components as defaults. ([56677](https://github.com/WordPress/gutenberg/pull/56677))
+-   DataViews: Fix dropdown menu actions with modal. ([56760](https://github.com/WordPress/gutenberg/pull/56760))
+-   DataViews: Hide pagination if we have only one page. ([56948](https://github.com/WordPress/gutenberg/pull/56948))
+-   DataViews: Implement `NOT IN` operator for author filter in templates. ([56777](https://github.com/WordPress/gutenberg/pull/56777))
+-   DataViews: Iterate on list view. ([56746](https://github.com/WordPress/gutenberg/pull/56746))
+-   DataViews: Make `Actions` styles the same as any other column header. ([56654](https://github.com/WordPress/gutenberg/pull/56654))
+-   DataViews: Make `mediaField` not hidable. ([56643](https://github.com/WordPress/gutenberg/pull/56643))
+-   DataViews: Rename view components. ([56709](https://github.com/WordPress/gutenberg/pull/56709))
+-   DataViews: Render data async conditionally. ([56851](https://github.com/WordPress/gutenberg/pull/56851))
+-   DataViews: Set proper role for AddFilter's items. ([56714](https://github.com/WordPress/gutenberg/pull/56714))
+-   DataViews: Set proper semantics for dropdown items. ([56676](https://github.com/WordPress/gutenberg/pull/56676))
+-   DataViews: Update sorting semantics. ([56717](https://github.com/WordPress/gutenberg/pull/56717))
+-   Dataviews: Extract to dedicated bundled package. ([56721](https://github.com/WordPress/gutenberg/pull/56721))
+
+#### Block Validation/Deprecation
+
+-   Input Field Block: Use `useblockProps` hook in save function. ([56507](https://github.com/WordPress/gutenberg/pull/56507))
+
+#### Patterns
+
+-   Implement partially synced patterns behind an experimental flag. ([56235](https://github.com/WordPress/gutenberg/pull/56235))
+
+### Documentation
+
+-   Add the nested blocks chapter to the platform documentation. ([56689](https://github.com/WordPress/gutenberg/pull/56689))
+-   Components: Update CHANGELOG.md. ([56960](https://github.com/WordPress/gutenberg/pull/56960))
+-   Doc: Search Control - add Storybook link. ([56815](https://github.com/WordPress/gutenberg/pull/56815))
+-   Doc: Spinner - add Storybook link. ([56818](https://github.com/WordPress/gutenberg/pull/56818))
+-   Docs: Add storybook link for spinner component. ([56953](https://github.com/WordPress/gutenberg/pull/56953))
+-   Docs: Fix {% end %} tab position to show the text. ([56735](https://github.com/WordPress/gutenberg/pull/56735))
+-   Docs: Fundamentals of Block Development - Minor fixes - registration-of-a-block. ([56731](https://github.com/WordPress/gutenberg/pull/56731))
+-   Docs: Fundamentals of Block Development - add links. ([56700](https://github.com/WordPress/gutenberg/pull/56700))
+-   Docs: Fundamentals of Block Development ---- Small fixes for "Block wrapper". ([56651](https://github.com/WordPress/gutenberg/pull/56651))
+-   Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872))
+-   Platform Docs: Add trusted by section. ([56749](https://github.com/WordPress/gutenberg/pull/56749))
+-   Revert "Doc: Spinner - add Storybook link". ([56913](https://github.com/WordPress/gutenberg/pull/56913))
+-   Update Getting Started Guide for Gutenberg 17.2. ([56674](https://github.com/WordPress/gutenberg/pull/56674))
+-   Update InnerBlocks defaultblock doc usage. ([56728](https://github.com/WordPress/gutenberg/pull/56728))
+-   Update formatting and fix grammar in the Block Editor Handbook readme. ([56798](https://github.com/WordPress/gutenberg/pull/56798))
+
+### Code Quality
+
+-   Block editor: hooks: Avoid getEditWrapperProps. ([56912](https://github.com/WordPress/gutenberg/pull/56912))
+-   Block lib: Use RichText.isEmpty where forgotten. ([56726](https://github.com/WordPress/gutenberg/pull/56726))
+-   Block library: Reusable caption component util. ([56606](https://github.com/WordPress/gutenberg/pull/56606))
+-   Core data revisions: Remove hardcoded supports constant. ([56701](https://github.com/WordPress/gutenberg/pull/56701))
+-   Editor: Cleanup default editor mode handling. ([56819](https://github.com/WordPress/gutenberg/pull/56819))
+-   Editor: Move the BlockCanvas component within the EditorCanvas component. ([56850](https://github.com/WordPress/gutenberg/pull/56850))
+-   Editor: Move the device type state to the editor package. ([56866](https://github.com/WordPress/gutenberg/pull/56866))
+-   Editor: Unify device preview styles. ([56904](https://github.com/WordPress/gutenberg/pull/56904))
+-   Fix PHP linter failing. ([56905](https://github.com/WordPress/gutenberg/pull/56905))
+-   Framework: Bundle the BlockTools component within BlockCanvas. ([56996](https://github.com/WordPress/gutenberg/pull/56996))
+-   Move `useDebouncedInput` hook to @wordpress/compose package. ([56744](https://github.com/WordPress/gutenberg/pull/56744))
+-   Post Editor: Rely on the editor store for the template mode state. ([56716](https://github.com/WordPress/gutenberg/pull/56716))
+-   Refactor <BlockToolbar />. ([56335](https://github.com/WordPress/gutenberg/pull/56335))
+-   Remove Block Tools BackCompat. ([56874](https://github.com/WordPress/gutenberg/pull/56874))
+-   Site and Post Editor: Unify the DocumentBar component. ([56778](https://github.com/WordPress/gutenberg/pull/56778))
+-   getValueFromObjectPath: Remove memize. ([56711](https://github.com/WordPress/gutenberg/pull/56711))
+
+#### Block Editor
+
+-   Don't render undefined classname in useBlockProps hook. ([56923](https://github.com/WordPress/gutenberg/pull/56923))
+-   One hook to rule them all: Preparation for a block supports API. ([56862](https://github.com/WordPress/gutenberg/pull/56862))
+-   RichText: Pass value to store. ([43204](https://github.com/WordPress/gutenberg/pull/43204))
+-   hooks: Manage BlockListBlock filters in one place. ([56875](https://github.com/WordPress/gutenberg/pull/56875))
+
+#### Global Styles
+
+-   Command Palette: Use getRevisions instead of deprecated selector. ([56738](https://github.com/WordPress/gutenberg/pull/56738))
+-   Global styles revisions: Remove PHP unit tests that are running in Core. ([56492](https://github.com/WordPress/gutenberg/pull/56492))
+
+#### Components
+
+-   Site editor: Do not use navigator's internal classname. ([56911](https://github.com/WordPress/gutenberg/pull/56911))
+
+#### Data Views
+
+-   DataViews: Remove TanStack. ([56873](https://github.com/WordPress/gutenberg/pull/56873))
+
+### Tools
+
+-   Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339))
+-   Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516))
+-   wp-env: Make env-cwd option work on Windows. ([56265](https://github.com/WordPress/gutenberg/pull/56265))
+
+#### Testing
+
+-   Migrate 'editor multi entity saving' end-to-end tests to Playwright. ([56670](https://github.com/WordPress/gutenberg/pull/56670))
+-   Migrate 'inner-blocks-locking-all-embed' end-to-end tests to Playwright. ([56673](https://github.com/WordPress/gutenberg/pull/56673))
+-   Migrate 'site editor export' end-to-end tests to Playwright. ([56675](https://github.com/WordPress/gutenberg/pull/56675))
+-   RN: Add watch mode for native tests. ([56788](https://github.com/WordPress/gutenberg/pull/56788))
+-   Scripts: Enable skipping Playwright browser installation. ([56594](https://github.com/WordPress/gutenberg/pull/56594))
+-   Tabs: Implement `ariakit/test` in unit tests. ([56835](https://github.com/WordPress/gutenberg/pull/56835))
+-   `CustomSelectControl`: Add additional unit tests. ([56575](https://github.com/WordPress/gutenberg/pull/56575))
+
+### Various
+
+-   Copy/fix capitalization of WordPress. ([56834](https://github.com/WordPress/gutenberg/pull/56834))
+
+#### Site Editor
+
+-   Improve text and design of the block removal warnings. ([56869](https://github.com/WordPress/gutenberg/pull/56869))
+
+#### Global Styles
+
+-   Global styles welcome guide: Add a space between translated strings. ([56839](https://github.com/WordPress/gutenberg/pull/56839))
+
+#### Block Library
+
+-   Simplify page list edit warning. ([56829](https://github.com/WordPress/gutenberg/pull/56829))
+
+#### Patterns
+
+-   End pattern page descriptions with a period. ([56828](https://github.com/WordPress/gutenberg/pull/56828))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @benoitchantre: Scripts: Fix CSS imports not minified. ([56516](https://github.com/WordPress/gutenberg/pull/56516))
+-   @kmanijak: Decode some characters if used in taxonomy name so it's displayed correctly in Query Loop filters. ([50376](https://github.com/WordPress/gutenberg/pull/50376))
+-   @lithrel: Env: Migrate to Compose V2. ([51339](https://github.com/WordPress/gutenberg/pull/51339))
+-   @nk-o: Fix: PHP 8.1 deprecated warning strpos(). ([56171](https://github.com/WordPress/gutenberg/pull/56171))
+-   @taylorgorman: Link to Dashicons. ([56872](https://github.com/WordPress/gutenberg/pull/56872))
+-   @valerogarte: #55702 - Control dimensions (margin and padding) of the list-item block. ([55874](https://github.com/WordPress/gutenberg/pull/55874))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @ajlende @alexstine @andrewhayward @andrewserong @apeatling @atachibana @Aurorum @benoitchantre @bph @brookewp @chad1008 @ciampo @colorful-tones @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @jameskoster @jasmussen @jeherve @jeryj @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @kmanijak @lithrel @luisherranz @Mamaduka @matiasbenedetto @mikachan @miminari @mtias @ndiego @nk-o @ntsekouras @oandregal @ramonjd @richtabor @scruffian @SiobhyB @t-hamano @talldan @taylorgorman @tellthemachines @tyxla @valerogarte @WunderBart @youknowriad
+
+= 17.2.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Fix: Fatal php error if a template was created by an author that was deleted ([56990](https://github.com/WordPress/gutenberg/pull/56990))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@jorgefilipecosta
+
+= 17.2.0 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Post Editor
+
+-   Editor: Fix issue where createBlock in block template caused list view collapse. ([56666](https://github.com/WordPress/gutenberg/pull/56666))
+
+#### Modules API
+
+-   Modules: Fix import map polyfill not being copied on the generated plugin ZIP. ([56655](https://github.com/WordPress/gutenberg/pull/56655))
+
+### Documentation
+
+-   Interactivity API: New store() API documentation. ([56764](https://github.com/WordPress/gutenberg/pull/56764))
+-   Interactivity API: Update TS/JSDocs after migrating to the new `store()` API. ([56748](https://github.com/WordPress/gutenberg/pull/56748))
+
+### Tools
+
+#### Build Tooling
+
+-   Add missing labels to changelog script, and enhance mapping function. ([55066](https://github.com/WordPress/gutenberg/pull/55066))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong @DAreRodz @luisherranz @vcanales
+= 17.2.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Modules API
+
+-   Interactivity API: Use modules instead of scripts in the frontend. ([56143](https://github.com/WordPress/gutenberg/pull/56143))
+
+### Enhancements
+
+-   Add translator comments for strings containing date formats. ([56531](https://github.com/WordPress/gutenberg/pull/56531))
+-   Block Settings: Only display parent block selector on small screens. ([56431](https://github.com/WordPress/gutenberg/pull/56431))
+-   Block Theme Preview: Display the theme name on the activate button. ([55752](https://github.com/WordPress/gutenberg/pull/55752))
+-   Core data revisions: Extend support to other post types. ([56353](https://github.com/WordPress/gutenberg/pull/56353))
+-   Improve tooltip for parent blocks on the block toolbar. ([56146](https://github.com/WordPress/gutenberg/pull/56146))
+-   Simplify template author token. ([56566](https://github.com/WordPress/gutenberg/pull/56566))
+-   Style engine: Allow CSS var output for fontSize and fontFamily and update documentation. ([56528](https://github.com/WordPress/gutenberg/pull/56528))
+-   Try: Change "Detach pattern" to "Detach". ([56323](https://github.com/WordPress/gutenberg/pull/56323))
+-   useEntityRecord: Improve unit tests. ([56415](https://github.com/WordPress/gutenberg/pull/56415))
+
+#### Components
+
+-   Add focus rings to focusable disabled buttons. ([56383](https://github.com/WordPress/gutenberg/pull/56383))
+-   DropdownMenu V2 tweaks. ([56041](https://github.com/WordPress/gutenberg/pull/56041))
+-   DropdownMenu V2: Add support for rendering in legacy popover slot. ([56342](https://github.com/WordPress/gutenberg/pull/56342))
+-   FormToggle: Refine animation. ([56515](https://github.com/WordPress/gutenberg/pull/56515))
+-   Slot: Add styles prop to bubblesVirtually version. ([56428](https://github.com/WordPress/gutenberg/pull/56428))
+-   Tabs: Cleanup and improvements. ([56224](https://github.com/WordPress/gutenberg/pull/56224))
+-   Try Ariakit Select for new CustomSelectControl component. ([55790](https://github.com/WordPress/gutenberg/pull/55790))
+
+#### Data Views
+
+-   Data list view: Make filter row, table header, and pagination sticky. ([56157](https://github.com/WordPress/gutenberg/pull/56157))
+-   Simplify dataviews view button. ([56485](https://github.com/WordPress/gutenberg/pull/56485))
+-   Update data view menu item actions. ([56398](https://github.com/WordPress/gutenberg/pull/56398))
+
+#### Global Styles
+
+-   Global style revisions: Redesign style revision items. ([55913](https://github.com/WordPress/gutenberg/pull/55913))
+-   Global styles revisions: Migrate API call to getRevisions(). ([56349](https://github.com/WordPress/gutenberg/pull/56349))
+-   Style Revisions: Remove style revisions dropdown menu. ([56454](https://github.com/WordPress/gutenberg/pull/56454))
+
+#### Site Editor
+
+-   Add 'View site' action to 'Site updated' snackbar. ([52693](https://github.com/WordPress/gutenberg/pull/52693))
+-   Add the Post Author component to the Page sidebar. ([56368](https://github.com/WordPress/gutenberg/pull/56368))
+-   Redirect to main page menu if page record not found. ([56177](https://github.com/WordPress/gutenberg/pull/56177))
+
+#### Block Editor
+
+-   Drag and drop: Allow dragging to the beginning and end of a document. ([56070](https://github.com/WordPress/gutenberg/pull/56070))
+-   List View: Expand state if a block is dragged to within a collapsed block in the editor canvas. ([56493](https://github.com/WordPress/gutenberg/pull/56493))
+
+#### Layout
+
+-   Add layout classes to legacy Group inner container. ([56130](https://github.com/WordPress/gutenberg/pull/56130))
+-   Add setting to disable custom content size controls. ([56236](https://github.com/WordPress/gutenberg/pull/56236))
+
+#### Patterns
+
+-   Small tweaks to CreatePatternModal. ([56016](https://github.com/WordPress/gutenberg/pull/56016))
+-   Update Labels in Block Inserter (block patterns tab). ([55986](https://github.com/WordPress/gutenberg/pull/55986))
+
+#### Icons
+
+-   Update trash icon. ([56569](https://github.com/WordPress/gutenberg/pull/56569))
+
+#### Block Library
+
+-   Disable block renaming support for Nav Link block. ([56425](https://github.com/WordPress/gutenberg/pull/56425))
+
+#### Distraction Free
+
+-   Add top toolbar to distraction free mode. ([56295](https://github.com/WordPress/gutenberg/pull/56295))
+
+#### CSS & Styling
+
+-   Gallery Block: Use styled scrollbars for image captions. ([56252](https://github.com/WordPress/gutenberg/pull/56252))
+
+#### Typography
+
+-   Font Library: Remove insecure properties. ([56230](https://github.com/WordPress/gutenberg/pull/56230))
+
+### New APIs
+
+-   Revisions: Add new selectors to fetch entity revisions. ([54046](https://github.com/WordPress/gutenberg/pull/54046))
+
+#### Interactivity API
+
+-   Migration to the new `store()` API. ([55459](https://github.com/WordPress/gutenberg/pull/55459))
+
+### Bug Fixes
+
+-   Block Editor: Undeprecate the '\_\_experimentalImageSizeControl' component. ([56414](https://github.com/WordPress/gutenberg/pull/56414))
+-   Core data: Harmonize getRevision selector and resolver function signatures. ([56416](https://github.com/WordPress/gutenberg/pull/56416))
+-   Editor styles: Scope without adding specificity. ([56564](https://github.com/WordPress/gutenberg/pull/56564))
+-   Fix Restore Post title placeholder. ([56580](https://github.com/WordPress/gutenberg/pull/56580))
+-   Post Schedule Panel: Remove text overflow ellipsis. ([56319](https://github.com/WordPress/gutenberg/pull/56319))
+-   PostCSS style transformation: Fail gracefully instead of throwing an error. ([56093](https://github.com/WordPress/gutenberg/pull/56093))
+-   Rich text: Pad multiple spaces through en/em replacement. ([56341](https://github.com/WordPress/gutenberg/pull/56341))
+-   Site Editor Sidebar: Fix actions vertical alignment. ([56218](https://github.com/WordPress/gutenberg/pull/56218))
+-   Site Editor: Add a fallback template showing the title and content for the post only mode. ([56509](https://github.com/WordPress/gutenberg/pull/56509))
+-   useEntityRecord: Do not trigger REST API requests when disabled. ([56108](https://github.com/WordPress/gutenberg/pull/56108))
+
+#### Block Library
+
+-   File block: Remove anchor tag when copy pasting to file name. ([56508](https://github.com/WordPress/gutenberg/pull/56508))
+-   Fix label of columns inspector panel. ([56647](https://github.com/WordPress/gutenberg/pull/56647))
+-   Post Template: Fix incorrect offset query. ([56440](https://github.com/WordPress/gutenberg/pull/56440))
+
+#### Block Editor
+
+-   (RichText)(Workaround)(17.1.x) Fallback to a string arg in `collapseWhiteSpace()` if `value` is not a string. ([56570](https://github.com/WordPress/gutenberg/pull/56570))
+-   Cover block: Pass dropZoneElement reference to fix dragging within cover block area. ([56312](https://github.com/WordPress/gutenberg/pull/56312))
+-   useMovingAnimation: Clear translate3d rule when animation is finished. ([56410](https://github.com/WordPress/gutenberg/pull/56410))
+
+#### Components
+
+-   Design Tools: Fix last ToolsPanelItem styling. ([56536](https://github.com/WordPress/gutenberg/pull/56536))
+-   Fix FormTokenField suggestions broken scrollbar when `__experimentalExpandOnFocus` is defined. ([56426](https://github.com/WordPress/gutenberg/pull/56426))
+-   Tabs: Fix flaky unit tests. ([55950](https://github.com/WordPress/gutenberg/pull/55950))
+
+#### Global Styles
+
+-   Additional CSS: Fix on change validation. ([56434](https://github.com/WordPress/gutenberg/pull/56434))
+-   Global styles revisions: Update isResolving flag. ([56491](https://github.com/WordPress/gutenberg/pull/56491))
+-   Spacing: Fix block error if spacing unit array empty in theme.json. ([56306](https://github.com/WordPress/gutenberg/pull/56306))
+
+#### CSS & Styling
+
+-   Reduce specificity of default Cover text color styles. ([56411](https://github.com/WordPress/gutenberg/pull/56411))
+-   Restore Post Title visual styles in Code View mode. ([56582](https://github.com/WordPress/gutenberg/pull/56582))
+
+#### Saving
+
+-   Editor: Reinstate anonymous callback for saved post state. ([56529](https://github.com/WordPress/gutenberg/pull/56529))
+
+#### Post Editor
+
+-   Save post button: Avoid extra re-renders when enablng/disabling tooltip. ([56502](https://github.com/WordPress/gutenberg/pull/56502))
+
+#### Plugin
+
+-   Update Readme.txt tested up to 6.4. ([56427](https://github.com/WordPress/gutenberg/pull/56427))
+
+#### Site Editor
+
+-   Fix template resolution for templates assigned as home page. ([56418](https://github.com/WordPress/gutenberg/pull/56418))
+
+#### Patterns
+
+-   Fix issue with template in replace template screen. ([56407](https://github.com/WordPress/gutenberg/pull/56407))
+
+#### Layout
+
+-   Fix issue where layout classnames are injected for blocks without layout support. ([56187](https://github.com/WordPress/gutenberg/pull/56187))
+
+#### Typography
+
+-   Font Library: Fix fonts not displaying correctly. ([55393](https://github.com/WordPress/gutenberg/pull/55393))
+
+#### Colors
+
+-   Duotone: Backport from Core to fix filters in classic themes. ([54778](https://github.com/WordPress/gutenberg/pull/54778))
+
+### Accessibility
+
+-   Migrating `StyleBook` to use updated `Composite` implementation. ([55344](https://github.com/WordPress/gutenberg/pull/55344))
+
+#### Data Views
+
+-   DataViews: Make disabled pagination buttons focusable. ([56422](https://github.com/WordPress/gutenberg/pull/56422))
+
+#### Block Library
+
+-   Image Block: Enable image block to be selected correctly when clicked. ([56043](https://github.com/WordPress/gutenberg/pull/56043))
+
+#### Post Editor
+
+-   Tooltip: Don't render buttons tooltip when show button text labels is enabled. ([55842](https://github.com/WordPress/gutenberg/pull/55842))
+
+#### Components
+
+-   Improve `Button` saving state accessibility. ([55547](https://github.com/WordPress/gutenberg/pull/55547))
+
+#### Patterns
+
+-   Fix focus loss after converting to a synced pattern. ([55473](https://github.com/WordPress/gutenberg/pull/55473))
+
+### Performance
+
+-   Avoid calling postcss when not needed. ([56601](https://github.com/WordPress/gutenberg/pull/56601))
+-   Block Editor: Optimize 'Connections' inspector controls. ([56443](https://github.com/WordPress/gutenberg/pull/56443))
+
+#### Global Styles
+
+-   Make search more responsive for block type list. ([56139](https://github.com/WordPress/gutenberg/pull/56139))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Document `view.layout`. ([56637](https://github.com/WordPress/gutenberg/pull/56637))
+-   DataViews: Extract common constants to file. ([56251](https://github.com/WordPress/gutenberg/pull/56251))
+-   DataViews: Rename `InFilter` component to `FilterSummary`. ([56506](https://github.com/WordPress/gutenberg/pull/56506))
+-   DataViews: Scope names of V2 UI components. ([56503](https://github.com/WordPress/gutenberg/pull/56503))
+-   DataViews: Update field API to generate filters based on type. ([55996](https://github.com/WordPress/gutenberg/pull/55996))
+-   DataViews: Update filter component. ([56110](https://github.com/WordPress/gutenberg/pull/56110))
+-   Dataviews: Add confirmation step before deleting a page. ([56504](https://github.com/WordPress/gutenberg/pull/56504))
+-   Dataviews: Add preview and grid view in templates list. ([56382](https://github.com/WordPress/gutenberg/pull/56382))
+-   Dataviews: Grid layout refinements. ([56441](https://github.com/WordPress/gutenberg/pull/56441))
+-   Dataviews: Remove link from author. ([56467](https://github.com/WordPress/gutenberg/pull/56467))
+-   Dataviews: Update item actions in grid view. ([56501](https://github.com/WordPress/gutenberg/pull/56501))
+-   Fix data view menu item radius. ([56395](https://github.com/WordPress/gutenberg/pull/56395))
+
+#### Post Editor
+
+-   Render html in post titles in visual mode and edit HTML in post title in code view. ([54718](https://github.com/WordPress/gutenberg/pull/54718))
+
+### Documentation
+
+-   Add the attributes definition page to the create block tutorial of the platform documentation. ([56429](https://github.com/WordPress/gutenberg/pull/56429))
+-   Add the transforms page to the create block tutorial of the platform documentation. ([56559](https://github.com/WordPress/gutenberg/pull/56559))
+-   Add thee block supports page to the create block tutorial of the framework docs. ([56483](https://github.com/WordPress/gutenberg/pull/56483))
+-   Added clarifications and examples to "Get started with wp-scripts". ([56298](https://github.com/WordPress/gutenberg/pull/56298))
+-   Block Editor: Fix typo in `URLInput`'s `onKeyDown` prop documentation. ([56322](https://github.com/WordPress/gutenberg/pull/56322))
+-   Bring back non-JS tabs in block editor handbook. ([56561](https://github.com/WordPress/gutenberg/pull/56561))
+-   Docs: Fix incorrect build script description in script package. ([56332](https://github.com/WordPress/gutenberg/pull/56332))
+-   Docs: Fundamentals of Block Development - File structure of a block. ([56551](https://github.com/WordPress/gutenberg/pull/56551))
+-   Docs: Fundamentals of Block Development - Registration of a block. ([56334](https://github.com/WordPress/gutenberg/pull/56334))
+-   Docs: Fundamentals of Block Development - The block wrapper. ([56596](https://github.com/WordPress/gutenberg/pull/56596))
+-   Docs: Fundamentals of Block Development - Working with JavaScript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553))
+-   Docs: Fundamentals of Block Development - block.json. ([56435](https://github.com/WordPress/gutenberg/pull/56435))
+-   Docs: Improve downloadBlob example. ([56225](https://github.com/WordPress/gutenberg/pull/56225))
+-   Documentation - Block Editor Handbook - Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. ([49854](https://github.com/WordPress/gutenberg/pull/49854))
+-   Fix overly complex code example in ComboboxControl readme. ([56365](https://github.com/WordPress/gutenberg/pull/56365))
+-   Fix version in useSetting deprecation notice. ([56377](https://github.com/WordPress/gutenberg/pull/56377))
+-   Fundamentals block development - landing and first pages. ([56584](https://github.com/WordPress/gutenberg/pull/56584))
+-   Fundamentals of Block Development - fix save definition. ([56605](https://github.com/WordPress/gutenberg/pull/56605))
+-   Link preview image to live example using WordPress Playground. ([56292](https://github.com/WordPress/gutenberg/pull/56292))
+-   NavigableContainers: Fix doc typo in onKeyDown prop. ([56352](https://github.com/WordPress/gutenberg/pull/56352))
+-   Release docs: Add new section about troubleshooting the release. ([56436](https://github.com/WordPress/gutenberg/pull/56436))
+-   Remove all {% codetabs %} instances and any vanilla JS references. ([56121](https://github.com/WordPress/gutenberg/pull/56121))
+-   Simplify code example in ToggleControl component readme. ([56389](https://github.com/WordPress/gutenberg/pull/56389))
+-   Text and Heading: Improve documentation around default values and truncation logic. ([56518](https://github.com/WordPress/gutenberg/pull/56518))
+-   Theme JSON schema: Add heading/button key to color definition. ([55674](https://github.com/WordPress/gutenberg/pull/55674))
+-   Update for 6.4.1 for versions in WP. ([56216](https://github.com/WordPress/gutenberg/pull/56216))
+-   Update references to the gutenberg-examples repo to the new block-development-examples. ([56119](https://github.com/WordPress/gutenberg/pull/56119))
+-   Update template name in `create-block` command. ([56281](https://github.com/WordPress/gutenberg/pull/56281))
+-   Update webpack options for wp-scripts in README.md. ([56314](https://github.com/WordPress/gutenberg/pull/56314))
+-   `BoxControl`: Update story and refactor to Typescript. ([56462](https://github.com/WordPress/gutenberg/pull/56462))
+
+### Code Quality
+
+-   Blocks pkg: Remove 'browser' dependencies. ([56433](https://github.com/WordPress/gutenberg/pull/56433))
+-   DataViews: Code Quality remove some unused props from action. ([56477](https://github.com/WordPress/gutenberg/pull/56477))
+-   Editor: Move the template focus modes to the editor store. ([56472](https://github.com/WordPress/gutenberg/pull/56472))
+-   Extract a PostPanelRow component from the different sidebar panels. ([56238](https://github.com/WordPress/gutenberg/pull/56238))
+-   Interactivity API: Add missing changelog entry for the new `store()` API. ([56611](https://github.com/WordPress/gutenberg/pull/56611))
+-   Migrating block editor `BlockPatternsList` component. ([56210](https://github.com/WordPress/gutenberg/pull/56210))
+-   Move the DisableNonContentBlocks component to the editor package. ([56423](https://github.com/WordPress/gutenberg/pull/56423))
+-   Post Schedule Panel: Fix Sass deprecation warning for division. ([56412](https://github.com/WordPress/gutenberg/pull/56412))
+-   Remove compatibility layer for WP 6.2. ([56464](https://github.com/WordPress/gutenberg/pull/56464))
+-   Unify the PostSchedule component between site and post editors. ([56196](https://github.com/WordPress/gutenberg/pull/56196))
+-   Update: Refactor useAddedBy to use authorText and originalSource fields. ([56568](https://github.com/WordPress/gutenberg/pull/56568))
+
+#### Block Library
+
+-   Add align support to the image block - alternative. ([55954](https://github.com/WordPress/gutenberg/pull/55954))
+-   Backmerge block renaming fixes/refactors from 6.4 branch into Gutenberg trunk. ([56386](https://github.com/WordPress/gutenberg/pull/56386))
+-   Pattern placeholder: Remove duplicate 'useDispatch' hook. ([56397](https://github.com/WordPress/gutenberg/pull/56397))
+
+#### Components
+
+-   Remove incorrect version from deprecated `__nextHasNoMarginBottom` prop of `AnglePickerControl` Component. ([56336](https://github.com/WordPress/gutenberg/pull/56336))
+-   Revert "DropdownMenu V2: Add support for rendering in legacy popover slot". ([56484](https://github.com/WordPress/gutenberg/pull/56484))
+
+#### Data Views
+
+-   Dataviews: Ensure items and fields are using a unique id. ([56366](https://github.com/WordPress/gutenberg/pull/56366))
+
+#### Block Editor
+
+-   useInnerBlocksProps: Stabilise dropZoneElement prop. ([56313](https://github.com/WordPress/gutenberg/pull/56313))
+
+#### Design Tools
+
+-   Fix: Theme.json font settings in unit test. ([56309](https://github.com/WordPress/gutenberg/pull/56309))
+
+### Tools
+
+-   Workflows: Update 'days-before-stale' for flaky test report issues. ([56585](https://github.com/WordPress/gutenberg/pull/56585))
+-   scripts: Update `jest-dev-server` to v9. ([56552](https://github.com/WordPress/gutenberg/pull/56552))
+
+#### Testing
+
+-   Dataviews: Add first end-to-end tests. ([56634](https://github.com/WordPress/gutenberg/pull/56634))
+-   Migrate 'align hook' end-to-end tests to Playwright. ([56480](https://github.com/WordPress/gutenberg/pull/56480))
+-   Migrate 'block directory' end-to-end tests to Playwright. ([56593](https://github.com/WordPress/gutenberg/pull/56593))
+-   Migrate 'block icons' end-to-end tests to Playwright. ([56610](https://github.com/WordPress/gutenberg/pull/56610))
+-   Migrate 'custom taxonomies' end-to-end test to Playwright. ([56486](https://github.com/WordPress/gutenberg/pull/56486))
+-   Migrate 'sidebar permalink' end-to-end tests to Playwright. ([56253](https://github.com/WordPress/gutenberg/pull/56253))
+-   Migrate Is Typing Test to Playwright. ([56616](https://github.com/WordPress/gutenberg/pull/56616))
+-   Page spec: Merging create page and toggle preview tests. ([56129](https://github.com/WordPress/gutenberg/pull/56129))
+-   Playwright Utils: Fix the method of getting post ID in 'publishPost'. ([56421](https://github.com/WordPress/gutenberg/pull/56421))
+-   end-to-end tests: Merge Puppeteer into single job, split Playwright further. ([56363](https://github.com/WordPress/gutenberg/pull/56363))
+
+#### Build Tooling
+
+-   Create block: Update `interactive-template` to the new `store()` API. ([56613](https://github.com/WordPress/gutenberg/pull/56613))
+
+### Security
+
+-   WP_Theme_JSON_Gutenberg: Add nested indexed array schema sanitization. ([56447](https://github.com/WordPress/gutenberg/pull/56447))
+
+### Various
+
+-   Add: Author text and original source to wp_template_part. ([56567](https://github.com/WordPress/gutenberg/pull/56567))
+-   Migrating `BlockPatternSetup` to use updated `Composite` implementation. ([55425](https://github.com/WordPress/gutenberg/pull/55425))
+-   Migrating `InserterListbox` to use updated Composite implementation. ([56246](https://github.com/WordPress/gutenberg/pull/56246))
+
+#### Data Views
+
+-   Dataviews: All Templates: Add filters to template author. ([56338](https://github.com/WordPress/gutenberg/pull/56338))
+-   Dataviews: All templates: Add: Sorting to template author and add author_text to the rest API. ([56333](https://github.com/WordPress/gutenberg/pull/56333))
+
+#### HTML API
+
+-   Backport updates from Core. ([56578](https://github.com/WordPress/gutenberg/pull/56578))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @annezazu @apeatling @arthur791004 @bph @brookewp @chad1008 @chiilog @ciampo @DAreRodz @dmsnell @draganescu @ellatrix @fabiankaegy @flootr @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @megane9988 @NekoJonez @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @SavPhill @Soean @t-hamano @talldan @tellthemachines @youknowriad @zaguiini
+
+= 17.1.4 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+
+-   Post Template: Fix incorrect offset query. ([56440](https://github.com/WordPress/gutenberg/pull/56440))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@t-hamano
+
+= 17.2.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Modules API
+
+-   Interactivity API: Use modules instead of scripts in the frontend. ([56143](https://github.com/WordPress/gutenberg/pull/56143))
+
+### Enhancements
+
+-   Add translator comments for strings containing date formats. ([56531](https://github.com/WordPress/gutenberg/pull/56531))
+-   Block Settings: Only display parent block selector on small screens. ([56431](https://github.com/WordPress/gutenberg/pull/56431))
+-   Block Theme Preview: Display the theme name on the activate button. ([55752](https://github.com/WordPress/gutenberg/pull/55752))
+-   Core data revisions: Extend support to other post types. ([56353](https://github.com/WordPress/gutenberg/pull/56353))
+-   Improve tooltip for parent blocks on the block toolbar. ([56146](https://github.com/WordPress/gutenberg/pull/56146))
+-   Simplify template author token. ([56566](https://github.com/WordPress/gutenberg/pull/56566))
+-   Style engine: Allow CSS var output for fontSize and fontFamily and update documentation. ([56528](https://github.com/WordPress/gutenberg/pull/56528))
+-   Try: Change "Detach pattern" to "Detach". ([56323](https://github.com/WordPress/gutenberg/pull/56323))
+-   useEntityRecord: Improve unit tests. ([56415](https://github.com/WordPress/gutenberg/pull/56415))
+
+#### Components
+
+-   Add focus rings to focusable disabled buttons. ([56383](https://github.com/WordPress/gutenberg/pull/56383))
+-   DropdownMenu V2 tweaks. ([56041](https://github.com/WordPress/gutenberg/pull/56041))
+-   DropdownMenu V2: Add support for rendering in legacy popover slot. ([56342](https://github.com/WordPress/gutenberg/pull/56342))
+-   FormToggle: Refine animation. ([56515](https://github.com/WordPress/gutenberg/pull/56515))
+-   Slot: Add styles prop to bubblesVirtually version. ([56428](https://github.com/WordPress/gutenberg/pull/56428))
+-   Tabs: Cleanup and improvements. ([56224](https://github.com/WordPress/gutenberg/pull/56224))
+-   Try Ariakit Select for new CustomSelectControl component. ([55790](https://github.com/WordPress/gutenberg/pull/55790))
+
+#### Data Views
+
+-   Data list view: Make filter row, table header, and pagination sticky. ([56157](https://github.com/WordPress/gutenberg/pull/56157))
+-   Simplify dataviews view button. ([56485](https://github.com/WordPress/gutenberg/pull/56485))
+-   Update data view menu item actions. ([56398](https://github.com/WordPress/gutenberg/pull/56398))
+
+#### Global Styles
+
+-   Global style revisions: Redesign style revision items. ([55913](https://github.com/WordPress/gutenberg/pull/55913))
+-   Global styles revisions: Migrate API call to getRevisions(). ([56349](https://github.com/WordPress/gutenberg/pull/56349))
+-   Style Revisions: Remove style revisions dropdown menu. ([56454](https://github.com/WordPress/gutenberg/pull/56454))
+
+#### Site Editor
+
+-   Add 'View site' action to 'Site updated' snackbar. ([52693](https://github.com/WordPress/gutenberg/pull/52693))
+-   Add the Post Author component to the Page sidebar. ([56368](https://github.com/WordPress/gutenberg/pull/56368))
+-   Redirect to main page menu if page record not found. ([56177](https://github.com/WordPress/gutenberg/pull/56177))
+
+#### Block Editor
+
+-   Drag and drop: Allow dragging to the beginning and end of a document. ([56070](https://github.com/WordPress/gutenberg/pull/56070))
+-   List View: Expand state if a block is dragged to within a collapsed block in the editor canvas. ([56493](https://github.com/WordPress/gutenberg/pull/56493))
+
+#### Layout
+
+-   Add layout classes to legacy Group inner container. ([56130](https://github.com/WordPress/gutenberg/pull/56130))
+-   Add setting to disable custom content size controls. ([56236](https://github.com/WordPress/gutenberg/pull/56236))
+
+#### Patterns
+
+-   Small tweaks to CreatePatternModal. ([56016](https://github.com/WordPress/gutenberg/pull/56016))
+-   Update Labels in Block Inserter (block patterns tab). ([55986](https://github.com/WordPress/gutenberg/pull/55986))
+
+#### Icons
+
+-   Update trash icon. ([56569](https://github.com/WordPress/gutenberg/pull/56569))
+
+#### Block Library
+
+-   Disable block renaming support for Nav Link block. ([56425](https://github.com/WordPress/gutenberg/pull/56425))
+
+#### Distraction Free
+
+-   Add top toolbar to distraction free mode. ([56295](https://github.com/WordPress/gutenberg/pull/56295))
+
+#### CSS & Styling
+
+-   Gallery Block: Use styled scrollbars for image captions. ([56252](https://github.com/WordPress/gutenberg/pull/56252))
+
+#### Typography
+
+-   Font Library: Remove insecure properties. ([56230](https://github.com/WordPress/gutenberg/pull/56230))
+
+### New APIs
+
+-   Revisions: Add new selectors to fetch entity revisions. ([54046](https://github.com/WordPress/gutenberg/pull/54046))
+
+#### Interactivity API
+
+-   Migration to the new `store()` API. ([55459](https://github.com/WordPress/gutenberg/pull/55459))
+
+### Bug Fixes
+
+-   Block Editor: Undeprecate the '\_\_experimentalImageSizeControl' component. ([56414](https://github.com/WordPress/gutenberg/pull/56414))
+-   Core data: Harmonize getRevision selector and resolver function signatures. ([56416](https://github.com/WordPress/gutenberg/pull/56416))
+-   Editor styles: Scope without adding specificity. ([56564](https://github.com/WordPress/gutenberg/pull/56564))
+-   Fix Restore Post title placeholder. ([56580](https://github.com/WordPress/gutenberg/pull/56580))
+-   Post Schedule Panel: Remove text overflow ellipsis. ([56319](https://github.com/WordPress/gutenberg/pull/56319))
+-   PostCSS style transformation: Fail gracefully instead of throwing an error. ([56093](https://github.com/WordPress/gutenberg/pull/56093))
+-   Rich text: Pad multiple spaces through en/em replacement. ([56341](https://github.com/WordPress/gutenberg/pull/56341))
+-   Site Editor Sidebar: Fix actions vertical alignment. ([56218](https://github.com/WordPress/gutenberg/pull/56218))
+-   Site Editor: Add a fallback template showing the title and content for the post only mode. ([56509](https://github.com/WordPress/gutenberg/pull/56509))
+-   useEntityRecord: Do not trigger REST API requests when disabled. ([56108](https://github.com/WordPress/gutenberg/pull/56108))
+
+#### Block Library
+
+-   File block: Remove anchor tag when copy pasting to file name. ([56508](https://github.com/WordPress/gutenberg/pull/56508))
+-   Fix label of columns inspector panel. ([56647](https://github.com/WordPress/gutenberg/pull/56647))
+-   Post Template: Fix incorrect offset query. ([56440](https://github.com/WordPress/gutenberg/pull/56440))
+
+#### Block Editor
+
+-   (RichText)(Workaround)(17.1.x) Fallback to a string arg in `collapseWhiteSpace()` if `value` is not a string. ([56570](https://github.com/WordPress/gutenberg/pull/56570))
+-   Cover block: Pass dropZoneElement reference to fix dragging within cover block area. ([56312](https://github.com/WordPress/gutenberg/pull/56312))
+-   useMovingAnimation: Clear translate3d rule when animation is finished. ([56410](https://github.com/WordPress/gutenberg/pull/56410))
+
+#### Components
+
+-   Design Tools: Fix last ToolsPanelItem styling. ([56536](https://github.com/WordPress/gutenberg/pull/56536))
+-   Fix FormTokenField suggestions broken scrollbar when `__experimentalExpandOnFocus` is defined. ([56426](https://github.com/WordPress/gutenberg/pull/56426))
+-   Tabs: Fix flaky unit tests. ([55950](https://github.com/WordPress/gutenberg/pull/55950))
+
+#### Global Styles
+
+-   Additional CSS: Fix on change validation. ([56434](https://github.com/WordPress/gutenberg/pull/56434))
+-   Global styles revisions: Update isResolving flag. ([56491](https://github.com/WordPress/gutenberg/pull/56491))
+-   Spacing: Fix block error if spacing unit array empty in theme.json. ([56306](https://github.com/WordPress/gutenberg/pull/56306))
+
+#### CSS & Styling
+
+-   Reduce specificity of default Cover text color styles. ([56411](https://github.com/WordPress/gutenberg/pull/56411))
+-   Restore Post Title visual styles in Code View mode. ([56582](https://github.com/WordPress/gutenberg/pull/56582))
+
+#### Saving
+
+-   Editor: Reinstate anonymous callback for saved post state. ([56529](https://github.com/WordPress/gutenberg/pull/56529))
+
+#### Post Editor
+
+-   Save post button: Avoid extra re-renders when enablng/disabling tooltip. ([56502](https://github.com/WordPress/gutenberg/pull/56502))
+
+#### Plugin
+
+-   Update Readme.txt tested up to 6.4. ([56427](https://github.com/WordPress/gutenberg/pull/56427))
+
+#### Site Editor
+
+-   Fix template resolution for templates assigned as home page. ([56418](https://github.com/WordPress/gutenberg/pull/56418))
+
+#### Patterns
+
+-   Fix issue with template in replace template screen. ([56407](https://github.com/WordPress/gutenberg/pull/56407))
+
+#### Layout
+
+-   Fix issue where layout classnames are injected for blocks without layout support. ([56187](https://github.com/WordPress/gutenberg/pull/56187))
+
+#### Typography
+
+-   Font Library: Fix fonts not displaying correctly. ([55393](https://github.com/WordPress/gutenberg/pull/55393))
+
+#### Colors
+
+-   Duotone: Backport from Core to fix filters in classic themes. ([54778](https://github.com/WordPress/gutenberg/pull/54778))
+
+### Accessibility
+
+-   Migrating `StyleBook` to use updated `Composite` implementation. ([55344](https://github.com/WordPress/gutenberg/pull/55344))
+
+#### Data Views
+
+-   DataViews: Make disabled pagination buttons focusable. ([56422](https://github.com/WordPress/gutenberg/pull/56422))
+
+#### Block Library
+
+-   Image Block: Enable image block to be selected correctly when clicked. ([56043](https://github.com/WordPress/gutenberg/pull/56043))
+
+#### Post Editor
+
+-   Tooltip: Don't render buttons tooltip when show button text labels is enabled. ([55842](https://github.com/WordPress/gutenberg/pull/55842))
+
+#### Components
+
+-   Improve `Button` saving state accessibility. ([55547](https://github.com/WordPress/gutenberg/pull/55547))
+
+#### Patterns
+
+-   Fix focus loss after converting to a synced pattern. ([55473](https://github.com/WordPress/gutenberg/pull/55473))
+
+### Performance
+
+-   Avoid calling postcss when not needed. ([56601](https://github.com/WordPress/gutenberg/pull/56601))
+-   Block Editor: Optimize 'Connections' inspector controls. ([56443](https://github.com/WordPress/gutenberg/pull/56443))
+
+#### Global Styles
+
+-   Make search more responsive for block type list. ([56139](https://github.com/WordPress/gutenberg/pull/56139))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Document `view.layout`. ([56637](https://github.com/WordPress/gutenberg/pull/56637))
+-   DataViews: Extract common constants to file. ([56251](https://github.com/WordPress/gutenberg/pull/56251))
+-   DataViews: Rename `InFilter` component to `FilterSummary`. ([56506](https://github.com/WordPress/gutenberg/pull/56506))
+-   DataViews: Scope names of V2 UI components. ([56503](https://github.com/WordPress/gutenberg/pull/56503))
+-   DataViews: Update field API to generate filters based on type. ([55996](https://github.com/WordPress/gutenberg/pull/55996))
+-   DataViews: Update filter component. ([56110](https://github.com/WordPress/gutenberg/pull/56110))
+-   Dataviews: Add confirmation step before deleting a page. ([56504](https://github.com/WordPress/gutenberg/pull/56504))
+-   Dataviews: Add preview and grid view in templates list. ([56382](https://github.com/WordPress/gutenberg/pull/56382))
+-   Dataviews: Grid layout refinements. ([56441](https://github.com/WordPress/gutenberg/pull/56441))
+-   Dataviews: Remove link from author. ([56467](https://github.com/WordPress/gutenberg/pull/56467))
+-   Dataviews: Update item actions in grid view. ([56501](https://github.com/WordPress/gutenberg/pull/56501))
+-   Fix data view menu item radius. ([56395](https://github.com/WordPress/gutenberg/pull/56395))
+
+#### Post Editor
+
+-   Render html in post titles in visual mode and edit HTML in post title in code view. ([54718](https://github.com/WordPress/gutenberg/pull/54718))
+
+### Documentation
+
+-   Add the attributes definition page to the create block tutorial of the platform documentation. ([56429](https://github.com/WordPress/gutenberg/pull/56429))
+-   Add the transforms page to the create block tutorial of the platform documentation. ([56559](https://github.com/WordPress/gutenberg/pull/56559))
+-   Add thee block supports page to the create block tutorial of the framework docs. ([56483](https://github.com/WordPress/gutenberg/pull/56483))
+-   Added clarifications and examples to "Get started with wp-scripts". ([56298](https://github.com/WordPress/gutenberg/pull/56298))
+-   Block Editor: Fix typo in `URLInput`'s `onKeyDown` prop documentation. ([56322](https://github.com/WordPress/gutenberg/pull/56322))
+-   Bring back non-JS tabs in block editor handbook. ([56561](https://github.com/WordPress/gutenberg/pull/56561))
+-   Docs: Fix incorrect build script description in script package. ([56332](https://github.com/WordPress/gutenberg/pull/56332))
+-   Docs: Fundamentals of Block Development - File structure of a block. ([56551](https://github.com/WordPress/gutenberg/pull/56551))
+-   Docs: Fundamentals of Block Development - Registration of a block. ([56334](https://github.com/WordPress/gutenberg/pull/56334))
+-   Docs: Fundamentals of Block Development - The block wrapper. ([56596](https://github.com/WordPress/gutenberg/pull/56596))
+-   Docs: Fundamentals of Block Development - Working with JavaScript in the Block Editor. ([56553](https://github.com/WordPress/gutenberg/pull/56553))
+-   Docs: Fundamentals of Block Development - block.json. ([56435](https://github.com/WordPress/gutenberg/pull/56435))
+-   Docs: Improve downloadBlob example. ([56225](https://github.com/WordPress/gutenberg/pull/56225))
+-   Documentation - Block Editor Handbook - Add end user documentation about Block Editor as a resource on the Landing Page of the Block Editor Handbook. ([49854](https://github.com/WordPress/gutenberg/pull/49854))
+-   Fix overly complex code example in ComboboxControl readme. ([56365](https://github.com/WordPress/gutenberg/pull/56365))
+-   Fix version in useSetting deprecation notice. ([56377](https://github.com/WordPress/gutenberg/pull/56377))
+-   Fundamentals block development - landing and first pages. ([56584](https://github.com/WordPress/gutenberg/pull/56584))
+-   Fundamentals of Block Development - fix save definition. ([56605](https://github.com/WordPress/gutenberg/pull/56605))
+-   Link preview image to live example using WordPress Playground. ([56292](https://github.com/WordPress/gutenberg/pull/56292))
+-   NavigableContainers: Fix doc typo in onKeyDown prop. ([56352](https://github.com/WordPress/gutenberg/pull/56352))
+-   Release docs: Add new section about troubleshooting the release. ([56436](https://github.com/WordPress/gutenberg/pull/56436))
+-   Remove all {% codetabs %} instances and any vanilla JS references. ([56121](https://github.com/WordPress/gutenberg/pull/56121))
+-   Simplify code example in ToggleControl component readme. ([56389](https://github.com/WordPress/gutenberg/pull/56389))
+-   Text and Heading: Improve documentation around default values and truncation logic. ([56518](https://github.com/WordPress/gutenberg/pull/56518))
+-   Theme JSON schema: Add heading/button key to color definition. ([55674](https://github.com/WordPress/gutenberg/pull/55674))
+-   Update for 6.4.1 for versions in WP. ([56216](https://github.com/WordPress/gutenberg/pull/56216))
+-   Update references to the gutenberg-examples repo to the new block-development-examples. ([56119](https://github.com/WordPress/gutenberg/pull/56119))
+-   Update template name in `create-block` command. ([56281](https://github.com/WordPress/gutenberg/pull/56281))
+-   Update webpack options for wp-scripts in README.md. ([56314](https://github.com/WordPress/gutenberg/pull/56314))
+-   `BoxControl`: Update story and refactor to Typescript. ([56462](https://github.com/WordPress/gutenberg/pull/56462))
+
+### Code Quality
+
+-   Blocks pkg: Remove 'browser' dependencies. ([56433](https://github.com/WordPress/gutenberg/pull/56433))
+-   DataViews: Code Quality remove some unused props from action. ([56477](https://github.com/WordPress/gutenberg/pull/56477))
+-   Editor: Move the template focus modes to the editor store. ([56472](https://github.com/WordPress/gutenberg/pull/56472))
+-   Extract a PostPanelRow component from the different sidebar panels. ([56238](https://github.com/WordPress/gutenberg/pull/56238))
+-   Interactivity API: Add missing changelog entry for the new `store()` API. ([56611](https://github.com/WordPress/gutenberg/pull/56611))
+-   Migrating block editor `BlockPatternsList` component. ([56210](https://github.com/WordPress/gutenberg/pull/56210))
+-   Move the DisableNonContentBlocks component to the editor package. ([56423](https://github.com/WordPress/gutenberg/pull/56423))
+-   Post Schedule Panel: Fix Sass deprecation warning for division. ([56412](https://github.com/WordPress/gutenberg/pull/56412))
+-   Remove compatibility layer for WP 6.2. ([56464](https://github.com/WordPress/gutenberg/pull/56464))
+-   Unify the PostSchedule component between site and post editors. ([56196](https://github.com/WordPress/gutenberg/pull/56196))
+-   Update: Refactor useAddedBy to use authorText and originalSource fields. ([56568](https://github.com/WordPress/gutenberg/pull/56568))
+
+#### Block Library
+
+-   Add align support to the image block - alternative. ([55954](https://github.com/WordPress/gutenberg/pull/55954))
+-   Backmerge block renaming fixes/refactors from 6.4 branch into Gutenberg trunk. ([56386](https://github.com/WordPress/gutenberg/pull/56386))
+-   Pattern placeholder: Remove duplicate 'useDispatch' hook. ([56397](https://github.com/WordPress/gutenberg/pull/56397))
+
+#### Components
+
+-   Remove incorrect version from deprecated `__nextHasNoMarginBottom` prop of `AnglePickerControl` Component. ([56336](https://github.com/WordPress/gutenberg/pull/56336))
+-   Revert "DropdownMenu V2: Add support for rendering in legacy popover slot". ([56484](https://github.com/WordPress/gutenberg/pull/56484))
+
+#### Data Views
+
+-   Dataviews: Ensure items and fields are using a unique id. ([56366](https://github.com/WordPress/gutenberg/pull/56366))
+
+#### Block Editor
+
+-   useInnerBlocksProps: Stabilise dropZoneElement prop. ([56313](https://github.com/WordPress/gutenberg/pull/56313))
+
+#### Design Tools
+
+-   Fix: Theme.json font settings in unit test. ([56309](https://github.com/WordPress/gutenberg/pull/56309))
+
+### Tools
+
+-   Workflows: Update 'days-before-stale' for flaky test report issues. ([56585](https://github.com/WordPress/gutenberg/pull/56585))
+-   scripts: Update `jest-dev-server` to v9. ([56552](https://github.com/WordPress/gutenberg/pull/56552))
+
+#### Testing
+
+-   Dataviews: Add first end-to-end tests. ([56634](https://github.com/WordPress/gutenberg/pull/56634))
+-   Migrate 'align hook' end-to-end tests to Playwright. ([56480](https://github.com/WordPress/gutenberg/pull/56480))
+-   Migrate 'block directory' end-to-end tests to Playwright. ([56593](https://github.com/WordPress/gutenberg/pull/56593))
+-   Migrate 'block icons' end-to-end tests to Playwright. ([56610](https://github.com/WordPress/gutenberg/pull/56610))
+-   Migrate 'custom taxonomies' end-to-end test to Playwright. ([56486](https://github.com/WordPress/gutenberg/pull/56486))
+-   Migrate 'sidebar permalink' end-to-end tests to Playwright. ([56253](https://github.com/WordPress/gutenberg/pull/56253))
+-   Migrate Is Typing Test to Playwright. ([56616](https://github.com/WordPress/gutenberg/pull/56616))
+-   Page spec: Merging create page and toggle preview tests. ([56129](https://github.com/WordPress/gutenberg/pull/56129))
+-   Playwright Utils: Fix the method of getting post ID in 'publishPost'. ([56421](https://github.com/WordPress/gutenberg/pull/56421))
+-   end-to-end tests: Merge Puppeteer into single job, split Playwright further. ([56363](https://github.com/WordPress/gutenberg/pull/56363))
+
+#### Build Tooling
+
+-   Create block: Update `interactive-template` to the new `store()` API. ([56613](https://github.com/WordPress/gutenberg/pull/56613))
+
+### Security
+
+-   WP_Theme_JSON_Gutenberg: Add nested indexed array schema sanitization. ([56447](https://github.com/WordPress/gutenberg/pull/56447))
+
+### Various
+
+-   Add: Author text and original source to wp_template_part. ([56567](https://github.com/WordPress/gutenberg/pull/56567))
+-   Migrating `BlockPatternSetup` to use updated `Composite` implementation. ([55425](https://github.com/WordPress/gutenberg/pull/55425))
+-   Migrating `InserterListbox` to use updated Composite implementation. ([56246](https://github.com/WordPress/gutenberg/pull/56246))
+
+#### Data Views
+
+-   Dataviews: All Templates: Add filters to template author. ([56338](https://github.com/WordPress/gutenberg/pull/56338))
+-   Dataviews: All templates: Add: Sorting to template author and add author_text to the rest API. ([56333](https://github.com/WordPress/gutenberg/pull/56333))
+
+#### HTML API
+
+-   Backport updates from Core. ([56578](https://github.com/WordPress/gutenberg/pull/56578))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @annezazu @apeatling @arthur791004 @bph @brookewp @chad1008 @chiilog @ciampo @DAreRodz @dmsnell @draganescu @ellatrix @fabiankaegy @flootr @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jffng @jorgefilipecosta @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @megane9988 @NekoJonez @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @SavPhill @Soean @t-hamano @talldan @tellthemachines @youknowriad @zaguiini
+
+= 17.1.3 =
+
+## Changelog
+
+### Bug fixes
+
+#### Components
+
+-   https://github.com/WordPress/gutenberg/pull/56570
+
+= 17.1.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   PostCSS style transformation: fail gracefully instead of throwing an error (https://github.com/WordPress/gutenberg/pull/56093)
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@zaguiini
+
+= 17.1.1 =
+
+## Changelog
+
+### Bug Fixes
+
+### Block Library
+
+Fix fatal error when calling undefined block library function. #56459
+
+= 17.0.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   PostCSS style transformation: fail gracefully instead of throwing an error (https://github.com/WordPress/gutenberg/pull/56093)
+
+= 17.1.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   Navigation block: Fix Inaccurate description of the Show icon button setting. ([55429](https://github.com/WordPress/gutenberg/pull/55429))
+-   Query Loop: Add accesibility markup at the end of the loop in all cases. ([55890](https://github.com/WordPress/gutenberg/pull/55890))
+-   Template Part: Add fallback to the current theme when not provided. ([55965](https://github.com/WordPress/gutenberg/pull/55965))
+-   Update components to use \_\_next40pxDefaultSize. ([56022](https://github.com/WordPress/gutenberg/pull/56022))
+
+#### Components
+
+-   Tabs: Improve focus behavior. ([55287](https://github.com/WordPress/gutenberg/pull/55287))
+-   Tabs: Update subcomponents to accept full HTML element props. ([55860](https://github.com/WordPress/gutenberg/pull/55860))
+-   TextControl: Add opt-in prop for 40px default size. ([55471](https://github.com/WordPress/gutenberg/pull/55471))
+-   ToggleGroupControl: Add opt-in prop for 40px default size. ([55789](https://github.com/WordPress/gutenberg/pull/55789))
+
+#### Patterns
+
+-   Move "Manage patterns" below "Detach pattern". ([56018](https://github.com/WordPress/gutenberg/pull/56018))
+-   Show theme patterns from directory in site editor. ([55877](https://github.com/WordPress/gutenberg/pull/55877))
+
+#### Global Styles
+
+-   Global Style Revisions: Ensure consistent back button behaviour. ([55881](https://github.com/WordPress/gutenberg/pull/55881))
+-   Global Styles Revisions: More descriptive text timeline. ([55868](https://github.com/WordPress/gutenberg/pull/55868))
+-   Global Styles Revisions: Add route for single styles revisions. ([55827](https://github.com/WordPress/gutenberg/pull/55827))
+
+#### Block Locking
+
+-   Block Quick Navigation: Truncate text. ([56142](https://github.com/WordPress/gutenberg/pull/56142))
+
+#### Block Editor
+
+-   Button block: Support double enter to skip to default block. ([56134](https://github.com/WordPress/gutenberg/pull/56134))
+
+#### Design Tools
+
+-   Add block gap support to Quote block. ([56064](https://github.com/WordPress/gutenberg/pull/56064))
+
+#### Post Editor
+
+-   "Detach" text change in template options. ([55870](https://github.com/WordPress/gutenberg/pull/55870))
+
+#### Site Editor
+
+-   Site editor: Add edit page slug field. ([55767](https://github.com/WordPress/gutenberg/pull/55767))
+
+#### Interactivity API
+
+-   Server directive processing: Process only root blocks. ([55739](https://github.com/WordPress/gutenberg/pull/55739))
+
+#### Block settings menu
+
+-   Remove the extraneous template part title in replace control. ([55603](https://github.com/WordPress/gutenberg/pull/55603))
+
+#### List View
+
+-   Add keyboard shortcut to select all blocks. ([54899](https://github.com/WordPress/gutenberg/pull/54899))
+
+### New APIs
+
+-   Download blob: Remove downloadjs dependency. ([56024](https://github.com/WordPress/gutenberg/pull/56024))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Background Image Support: Hide the background image reset button when there's no image. ([55973](https://github.com/WordPress/gutenberg/pull/55973))
+-   Background image support: Fix focus loss when resetting background image. ([55984](https://github.com/WordPress/gutenberg/pull/55984))
+-   Custom Link: Decode value in URL input field. ([55549](https://github.com/WordPress/gutenberg/pull/55549))
+-   Fix lightbox trigger styles. ([55859](https://github.com/WordPress/gutenberg/pull/55859))
+-   Form block: Use `type="submit"` for buttons. ([55690](https://github.com/WordPress/gutenberg/pull/55690))
+-   Image block: Add check for lightbox values during image block migration. ([56057](https://github.com/WordPress/gutenberg/pull/56057))
+-   Image block: Don't show pointer cursor on linked image in the editor. ([55882](https://github.com/WordPress/gutenberg/pull/55882))
+-   Lightbox: Fix button misalignment in gallery image. ([56060](https://github.com/WordPress/gutenberg/pull/56060))
+-   Lightbox: Fix close button position. ([56125](https://github.com/WordPress/gutenberg/pull/56125))
+-   Missing block: Use raw source for originalContent. ([56014](https://github.com/WordPress/gutenberg/pull/56014))
+-   Navigation Link block: Register variations on post type / taxonomy registration. ([54801](https://github.com/WordPress/gutenberg/pull/54801))
+-   Pattern: Fix regression error in post type templates. ([55858](https://github.com/WordPress/gutenberg/pull/55858))
+-   Pattern: Process embeds. ([55979](https://github.com/WordPress/gutenberg/pull/55979))
+-   Post feature image block: Wrap images with hrefs in an A tag. ([55498](https://github.com/WordPress/gutenberg/pull/55498))
+-   Quote Block: Fix the Quote block layout supports. ([55240](https://github.com/WordPress/gutenberg/pull/55240))
+-   Read More block: Reduce text decoration specificity. ([56038](https://github.com/WordPress/gutenberg/pull/56038))
+
+#### Data Views
+
+-   DataViews: Add missing key to `ResetFilters` component. ([56189](https://github.com/WordPress/gutenberg/pull/56189))
+-   DataViews: Fix issue with irrelevant statuses. ([55967](https://github.com/WordPress/gutenberg/pull/55967))
+-   DataViews: Fix nested button tags on sidebar. ([56089](https://github.com/WordPress/gutenberg/pull/56089))
+-   DataViews: Fix pagination on manual input. ([55940](https://github.com/WordPress/gutenberg/pull/55940))
+-   DataViews: Fix spacing issue in top-level bar. ([56151](https://github.com/WordPress/gutenberg/pull/56151))
+-   DataViews: Fix status filter upon switching the default views from the sidebar. ([55856](https://github.com/WordPress/gutenberg/pull/55856))
+-   DataViews: Make items per page an even number. ([55906](https://github.com/WordPress/gutenberg/pull/55906))
+-   DataViews: Make used taxonomy private. ([55918](https://github.com/WordPress/gutenberg/pull/55918))
+-   DataViews: Reset pagination upon filter change. ([55797](https://github.com/WordPress/gutenberg/pull/55797))
+-   DataViews: Add a missing icon for the side by side view. ([55925](https://github.com/WordPress/gutenberg/pull/55925))
+
+#### Components
+
+-   DropdownMenu: Remove extra vertical space around the toggle button. ([56136](https://github.com/WordPress/gutenberg/pull/56136))
+-   DropdownMenuV2: Prevent default on Escape key presses. ([55962](https://github.com/WordPress/gutenberg/pull/55962))
+-   DropdownMenuV2: Use the `Icon` component to render radio checks. ([55964](https://github.com/WordPress/gutenberg/pull/55964))
+
+#### Typography
+
+-   Fix fatal error in WP_Fonts_Resolver::Get_settings(). ([55981](https://github.com/WordPress/gutenberg/pull/55981))
+-   Font Library: Create fonts dir if a font face needs to use the filesystem. ([56120](https://github.com/WordPress/gutenberg/pull/56120))
+-   Font Library: Fix font installation failure. ([55893](https://github.com/WordPress/gutenberg/pull/55893))
+
+#### Block Editor
+
+-   Iframe: Bubble events from html element instead of body element to fix drag chip positioning. ([56099](https://github.com/WordPress/gutenberg/pull/56099))
+-   Post Featured Image: Handling correctly when uploading a file without mime type. ([56133](https://github.com/WordPress/gutenberg/pull/56133))
+-   Block Editor: Fix Block editor crash. ([56051](https://github.com/WordPress/gutenberg/pull/56051))
+-   Move clientId key to BlockContextualToolbar. ([56008](https://github.com/WordPress/gutenberg/pull/56008))
+
+#### Patterns
+
+-   Add context for translators to any unclear usage of "synced". ([55935](https://github.com/WordPress/gutenberg/pull/55935))
+-   Use existing download function for JSON downloads to fix non-ASCII encoding. ([55912](https://github.com/WordPress/gutenberg/pull/55912))
+
+#### Inspector Controls
+
+-   Global Styles: Don't show "Apply Styles Globally" button in non-block based themes. ([56033](https://github.com/WordPress/gutenberg/pull/56033))
+
+#### Template Editor
+
+-   Templates: Update filter to call all of the individual methods. ([55980](https://github.com/WordPress/gutenberg/pull/55980))
+
+#### Global Styles
+
+-   Global styles revisions: Load unsaved revision item into the revisions preview. ([55880](https://github.com/WordPress/gutenberg/pull/55880))
+
+#### Post Editor
+
+-   Edit Post: Fix pattern modal reopening when making the title empty again. ([55873](https://github.com/WordPress/gutenberg/pull/55873))
+
+#### Data Layer
+
+-   Core data: Fix wrong store results when page receives less items that what is stored. ([55832](https://github.com/WordPress/gutenberg/pull/55832))
+
+### Accessibility
+
+#### Data Views
+
+-   DataViews: Add labels to "in-filters". ([56001](https://github.com/WordPress/gutenberg/pull/56001))
+-   DataViews: Show actions label. ([56027](https://github.com/WordPress/gutenberg/pull/56027))
+
+#### Components
+
+-   Fix the image link button pressed state. ([56123](https://github.com/WordPress/gutenberg/pull/56123))
+
+#### Block Editor
+
+-   Fix mismatching link control action buttons visual order and DOM order. ([56042](https://github.com/WordPress/gutenberg/pull/56042))
+-   Escape on Block Toolbar returns focus to Editor Canvas. ([55712](https://github.com/WordPress/gutenberg/pull/55712))
+
+#### Site Editor
+
+-   Prevent sidebar focus in site editor on small screens. ([55934](https://github.com/WordPress/gutenberg/pull/55934))
+
+#### Block Library
+
+-   Heading level dropdown: Remove obtrusive tooltips in favor of visible text. ([56035](https://github.com/WordPress/gutenberg/pull/56035))
+
+### Performance
+
+#### Tooling
+
+-   Add a metric to trace template navigation in the site editor. ([55796](https://github.com/WordPress/gutenberg/pull/55796))
+
+#### List View
+
+-   ListViewBlock: Combine 'useSelect' hooks. ([55889](https://github.com/WordPress/gutenberg/pull/55889))
+
+#### Block Editor
+
+-   Block Editor: Optimize 'Block Hooks' inspector controls. ([56101](https://github.com/WordPress/gutenberg/pull/56101))
+-   Block Editor: Optimize BlockListAppender. ([56116](https://github.com/WordPress/gutenberg/pull/56116))
+
+#### Site Editor
+
+-   Avoid rerendering the sitehub unnecessarily. ([55818](https://github.com/WordPress/gutenberg/pull/55818))
+
+#### Layout
+
+-   Block Editor: Optimize layout style renderer subscription. ([55762](https://github.com/WordPress/gutenberg/pull/55762))
+
+### Experiments
+
+#### Data Views
+
+-   DataViews: Add ability to create custom views. ([55773](https://github.com/WordPress/gutenberg/pull/55773))
+-   DataViews: Add control to reset all filters at once. ([55955](https://github.com/WordPress/gutenberg/pull/55955))
+-   DataViews: Add delete and restore actions. ([55781](https://github.com/WordPress/gutenberg/pull/55781))
+-   DataViews: Add initial "Side by side" prototype. ([55343](https://github.com/WordPress/gutenberg/pull/55343))
+-   DataViews: Add new page size option. ([56112](https://github.com/WordPress/gutenberg/pull/56112))
+-   DataViews: Add rename functionality to custom views. ([55997](https://github.com/WordPress/gutenberg/pull/55997))
+-   DataViews: Allow users to add filters dynamically. ([55992](https://github.com/WordPress/gutenberg/pull/55992))
+-   DataViews: Update 'All pages' sidebar heading. ([56148](https://github.com/WordPress/gutenberg/pull/56148))
+-   DataViews: Update 'View' button. ([56144](https://github.com/WordPress/gutenberg/pull/56144))
+-   DataViews: Update `all templates` page. ([55848](https://github.com/WordPress/gutenberg/pull/55848))
+-   DataViews: Update author and title fields in template's list. ([56029](https://github.com/WordPress/gutenberg/pull/56029))
+-   DataViews: Update filters in view configuration. ([55735](https://github.com/WordPress/gutenberg/pull/55735))
+-   DataViews: Add filters to table columns. ([55508](https://github.com/WordPress/gutenberg/pull/55508))
+-   DataViews: Add: Ability to delete custom views. ([55924](https://github.com/WordPress/gutenberg/pull/55924))
+-   DataViews: Add: Custom views header indication. ([55926](https://github.com/WordPress/gutenberg/pull/55926))
+-   DataViews: Remove unnecessary label when no visible filters exist. ([55838](https://github.com/WordPress/gutenberg/pull/55838))
+
+### Documentation
+
+-   Add a first block type page to the platform documentation. ([56109](https://github.com/WordPress/gutenberg/pull/56109))
+-   Add new block development "Quick Start Guide" and update the `create-block-tutorial-template`. ([56056](https://github.com/WordPress/gutenberg/pull/56056))
+-   Clean up DataViews docs: `filter.id` is not used. ([55833](https://github.com/WordPress/gutenberg/pull/55833))
+-   DataViews: Document `enableSorting` and `enableHiding`. ([55988](https://github.com/WordPress/gutenberg/pull/55988))
+-   DataViews: Document actions. ([55959](https://github.com/WordPress/gutenberg/pull/55959))
+-   Doc: Corrected + updated links. ([56084](https://github.com/WordPress/gutenberg/pull/56084))
+-   Doc: Fixes wrong link in #56084. ([56106](https://github.com/WordPress/gutenberg/pull/56106))
+-   Docs: Changes imports from `wp.editor` to `wp.blockEditor` for PlainText and RichText. ([55841](https://github.com/WordPress/gutenberg/pull/55841))
+-   Fix formatting issue in the "Get started with create-block" doc. ([55872](https://github.com/WordPress/gutenberg/pull/55872))
+-   Fix: 404 Link on git workflow docs. ([55897](https://github.com/WordPress/gutenberg/pull/55897))
+-   Fix: 404 link in get-started-with-create-block docs. ([55932](https://github.com/WordPress/gutenberg/pull/55932))
+-   Fix: Create meta block link in block attributes documentation. ([55804](https://github.com/WordPress/gutenberg/pull/55804))
+-   Fix: Filter duotone link on block-supports documentation. ([55896](https://github.com/WordPress/gutenberg/pull/55896))
+-   Fix: Two invalid links on docs/contributors/documentation/README.md. ([55843](https://github.com/WordPress/gutenberg/pull/55843))
+-   New additional resource for wp-env. ([55987](https://github.com/WordPress/gutenberg/pull/55987))
+-   Update documentation to clarify workflow branch for release package publishing. ([56183](https://github.com/WordPress/gutenberg/pull/56183))
+-   Update jest links to the new site. ([55802](https://github.com/WordPress/gutenberg/pull/55802))
+
+### Code Quality
+
+-   Block lib: Remove multiline=false (deprecated). ([56113](https://github.com/WordPress/gutenberg/pull/56113))
+-   Delete unused `SelectedBlockPopover` component. ([55821](https://github.com/WordPress/gutenberg/pull/55821))
+-   Fix: Remove unrequired nullish coalescing. ([55854](https://github.com/WordPress/gutenberg/pull/55854))
+-   Fix: Use of integer value in a conditional rendering condition on Gradients. ([55855](https://github.com/WordPress/gutenberg/pull/55855))
+-   Give nice unique names to block controls HOCs. ([55795](https://github.com/WordPress/gutenberg/pull/55795))
+-   Migrating `PatternTransformationsMenu`. ([56122](https://github.com/WordPress/gutenberg/pull/56122))
+-   Migrating block inserter media tab components. ([56195](https://github.com/WordPress/gutenberg/pull/56195))
+-   Move document tools motion to header-edit-mode layout level. ([55904](https://github.com/WordPress/gutenberg/pull/55904))
+-   Only render block toolbar if blockType has value. ([55861](https://github.com/WordPress/gutenberg/pull/55861))
+-   Refactor Edit Widgets Document Tools Navigation to own component. ([55778](https://github.com/WordPress/gutenberg/pull/55778))
+-   Refactor Selected Block Tools. ([55737](https://github.com/WordPress/gutenberg/pull/55737))
+-   Refactor Site Editor Document Tools Navigation to own component. ([55770](https://github.com/WordPress/gutenberg/pull/55770))
+-   Remove BlockStyles.Slot empty component. ([55991](https://github.com/WordPress/gutenberg/pull/55991))
+-   Remove obsolete `queryContext`. ([56034](https://github.com/WordPress/gutenberg/pull/56034))
+-   Remove unnecessary empty className. ([55998](https://github.com/WordPress/gutenberg/pull/55998))
+-   Rename Unforward to Unforwarded and export the named const. ([55820](https://github.com/WordPress/gutenberg/pull/55820))
+-   Render Selected Block Tools in Header when using Top Toolbar. ([55787](https://github.com/WordPress/gutenberg/pull/55787))
+-   Reusable Blocks: Unlock a private hook and a component at the file level. ([55809](https://github.com/WordPress/gutenberg/pull/55809))
+-   Server directive processing: Improve how block references are saved. ([56107](https://github.com/WordPress/gutenberg/pull/56107))
+-   Share the editor settings between the post and site editors. ([55970](https://github.com/WordPress/gutenberg/pull/55970))
+-   Site Editor: Fix deprecation console error in top toolbar. ([55678](https://github.com/WordPress/gutenberg/pull/55678))
+-   Site Editor: Unlock global styles' private hooks at the file level. ([55800](https://github.com/WordPress/gutenberg/pull/55800))
+-   Site Editor: Update edited entity sync logic. ([55928](https://github.com/WordPress/gutenberg/pull/55928))
+-   Site Editor: Use EditorProvider instead of custom logic. ([56000](https://github.com/WordPress/gutenberg/pull/56000))
+-   SiteEditor: Optimize BackToPageNotification component. ([56102](https://github.com/WordPress/gutenberg/pull/56102))
+-   SiteEditor: Refactor disable non page content blocks. ([56103](https://github.com/WordPress/gutenberg/pull/56103))
+-   Unify the PageUrl and PageSlug components between site and post editors. ([56203](https://github.com/WordPress/gutenberg/pull/56203))
+
+#### Data Views
+
+-   DataViews: Fix translatable string. ([56075](https://github.com/WordPress/gutenberg/pull/56075))
+-   DataViews: Remove `filter.name`. ([55834](https://github.com/WordPress/gutenberg/pull/55834))
+-   DataViews: Remove reset values from filters. ([55839](https://github.com/WordPress/gutenberg/pull/55839))
+-   DataViews: Remove unnecessary `sortingFn` prop from field description. ([55989](https://github.com/WordPress/gutenberg/pull/55989))
+-   DataViews: Simplify filters API. ([55917](https://github.com/WordPress/gutenberg/pull/55917))
+-   DataViews: Update actions API. ([56026](https://github.com/WordPress/gutenberg/pull/56026))
+
+#### Block Editor
+
+-   Rich text: Remove preserveWhiteSpace serialisation differences. ([55999](https://github.com/WordPress/gutenberg/pull/55999))
+-   Rich text: highlight format: Gracefully handle old span format. ([56071](https://github.com/WordPress/gutenberg/pull/56071))
+-   Update Link Control labels to use gray-900. ([55867](https://github.com/WordPress/gutenberg/pull/55867))
+
+#### Components
+
+-   `DisclosureContent`: Migrate from `reakit` to `@ariakit/react`. ([55639](https://github.com/WordPress/gutenberg/pull/55639))
+-   `Divider`: Migrate from `reakit` to `@ariakit/react`. ([55622](https://github.com/WordPress/gutenberg/pull/55622))
+-   `RadioGroup`: Migrate from `reakit` to `ariakit`. ([55580](https://github.com/WordPress/gutenberg/pull/55580))
+
+#### Site Editor
+
+-   Core Data: Move the template lookup to core-data selectors/resolvers. ([55883](https://github.com/WordPress/gutenberg/pull/55883))
+-   Don't use 'useEntityRecord' to only dispatch actions. ([56076](https://github.com/WordPress/gutenberg/pull/56076))
+
+#### Block Library
+
+-   Navigation: Refactor the PHP render function to make it easier to make changes in the future. ([55605](https://github.com/WordPress/gutenberg/pull/55605))
+-   Update `blockEditor.__unstableCanInsertBlockType` hook namespace. ([55845](https://github.com/WordPress/gutenberg/pull/55845))
+
+#### Data Layer
+
+-   Data: Fix ESLint warnings for the 'useSelect' hook. ([55916](https://github.com/WordPress/gutenberg/pull/55916))
+
+#### Post Editor
+
+-   Edit Post: Use a single 'useSelect' hook for getting selectors. ([55902](https://github.com/WordPress/gutenberg/pull/55902))
+
+#### Colors
+
+-   Add Unit testing for duotone enhanced pagination. ([55542](https://github.com/WordPress/gutenberg/pull/55542))
+
+#### Patterns
+
+-   Split up the block editor inserter patterns tab into separate component files. ([55315](https://github.com/WordPress/gutenberg/pull/55315))
+
+#### Design Tools
+
+-   Block styles: Remove \_\_unstableElementContext in favour of useStyleOverride. ([54493](https://github.com/WordPress/gutenberg/pull/54493))
+
+### Tools
+
+-   Issue Templates: Add default type labels to issue templates. ([55826](https://github.com/WordPress/gutenberg/pull/55826))
+-   Label enforcer: Make the warning message less scary for new contributors. ([55900](https://github.com/WordPress/gutenberg/pull/55900))
+-   Quote feature request label. ([55862](https://github.com/WordPress/gutenberg/pull/55862))
+
+#### Testing
+
+-   Disable 'no-conditional-in-test' ESLint rule for Playwright. ([56088](https://github.com/WordPress/gutenberg/pull/56088))
+-   Fix 'Block Switcher' test file name for Playwright end-to-end tests. ([55840](https://github.com/WordPress/gutenberg/pull/55840))
+-   Fix flaky 'Meta boxes' end-to-end tests. ([56083](https://github.com/WordPress/gutenberg/pull/56083))
+-   Migrate 'CPT locking' end-to-end tests to Playwright. ([55929](https://github.com/WordPress/gutenberg/pull/55929))
+-   Migrate 'Meta boxes' end-to-end tests to Playwright. ([55915](https://github.com/WordPress/gutenberg/pull/55915))
+-   Migrate 'Plugins API' end-to-end tests to Playwright. ([55958](https://github.com/WordPress/gutenberg/pull/55958))
+-   Migrate 'annotations' end-to-end tests to Playwright. ([55966](https://github.com/WordPress/gutenberg/pull/55966))
+-   Migrate 'container blocks' end-to-end tests to Playwright. ([56141](https://github.com/WordPress/gutenberg/pull/56141))
+-   Migrate 'inner-blocks-prioritized-inserter-blocks' end-to-end tests to Playwright. ([55828](https://github.com/WordPress/gutenberg/pull/55828))
+-   Migrate 'inner-blocks-render-appender' end-to-end tests to Playwright. ([55814](https://github.com/WordPress/gutenberg/pull/55814))
+-   Migrate 'meta-attribute-block' end-to-end tests to Playwright. ([55830](https://github.com/WordPress/gutenberg/pull/55830))
+-   Migrate Child Block Test to Playwright. ([55199](https://github.com/WordPress/gutenberg/pull/55199))
+-   Migrate flaky PostPublishButton end-to-end tests to Playwright. ([52285](https://github.com/WordPress/gutenberg/pull/52285))
+-   Perf Tests: Stabilise the Site Editor metrics. ([55922](https://github.com/WordPress/gutenberg/pull/55922))
+-   Playwright Utils: Fix 'clickBlockOptionsMenuItem' helper. ([55923](https://github.com/WordPress/gutenberg/pull/55923))
+-   Query block enhanced pagination: Simplify test setup. ([55805](https://github.com/WordPress/gutenberg/pull/55805))
+-   Site editor template preview: Add end-to-end test and aria-pressed attribute to template preview toggle. ([56096](https://github.com/WordPress/gutenberg/pull/56096))
+-   Upgrade Playwright to 1.39.0. ([54051](https://github.com/WordPress/gutenberg/pull/54051))
+-   end-to-end Utils: Add setPreferences and editPost utils. ([55099](https://github.com/WordPress/gutenberg/pull/55099))
+-   end-to-end Utils: Add support for web-vitals.js. ([55660](https://github.com/WordPress/gutenberg/pull/55660))
+
+#### Build Tooling
+
+-   Package `@ariakit/test` should be a dev dependency. ([56091](https://github.com/WordPress/gutenberg/pull/56091))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @joanrodas: Update Link Control labels to use gray-900. ([55867](https://github.com/WordPress/gutenberg/pull/55867))
+-   @JorgeVilchez95: "Detach" text change in template options. ([55870](https://github.com/WordPress/gutenberg/pull/55870))
+-   @sacerro: Styles: More descriptive text for revisions timeline. ([55868](https://github.com/WordPress/gutenberg/pull/55868))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @andrewhayward @andrewserong @anomiex @anton-vlasenko @aristath @artemiomorales @bph @brookewp @c4rl0sbr4v0 @chad1008 @ciampo @DAreRodz @dcalhoun @dsas @ellatrix @flootr @fluiddot @gaambo @glendaviesnz @gziolo @jameskoster @jeryj @jhnstn @joanrodas @jorgefilipecosta @JorgeVilchez95 @jsnajdr @juanmaguitar @kevin940726 @Mamaduka @masteradhoc @matiasbenedetto @ndiego @ntsekouras @oandregal @peterwilsoncc @pooja-muchandikar @priethor @ramonjd @renatho @richtabor @sacerro @scruffian @shimotmk @SiobhyB @Soean @swissspidy @t-hamano @talldan @tellthemachines @torounit @tyxla @WunderBart @youknowriad
+
+= 17.0.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Typography
+
+-   Fix another fatal error in WP_Fonts_Resolver::Get_settings(). ([56067](https://github.com/WordPress/gutenberg/pull/56067))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@arthur791004
+
+= 17.0.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Fix a fatal error in `WP_Fonts_Resolver::get_settings()`. ([55981](https://github.com/WordPress/gutenberg/pull/55981))
+
+## Contributors
+
+@anton-vlasenko
+
+= 16.9.1 =
+
+Fixes a PHP fatal error in `WP_Fonts_Resolver::get_settings()`: https://github.com/WordPress/gutenberg/pull/55981
+
+= 17.0.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Link Control
+
+-   Add blog icon to the blog home page in LinkControl search results. ([55610](https://github.com/WordPress/gutenberg/pull/55610))
+-   Add home icon to the front page in LinkControl results. ([55606](https://github.com/WordPress/gutenberg/pull/55606))
+
+#### Block Theme Preview
+
+-   Block Theme Preview: Display loading state when activating. ([55658](https://github.com/WordPress/gutenberg/pull/55658))
+
+#### Block Library
+
+-   Template Part block: Use `_build_block_template_result_from_post`. ([55811](https://github.com/WordPress/gutenberg/pull/55811))
+
+#### Block Toolbar
+
+-   Improve toolbar button focus visual. ([55523](https://github.com/WordPress/gutenberg/pull/55523))
+
+#### Components
+
+-   Add new ariakit-based `DropdownMenu` component. ([54939](https://github.com/WordPress/gutenberg/pull/54939))
+-   Update InputControl and SelectControl default heights. ([55490](https://github.com/WordPress/gutenberg/pull/55490))
+-   Update ariakit to version 0.3.5. ([55365](https://github.com/WordPress/gutenberg/pull/55365))
+
+#### Block Editor
+
+-   Adjust the padding of the category item to make it visually balanced. ([55598](https://github.com/WordPress/gutenberg/pull/55598))
+
+#### Patterns
+
+-   Suggest commands when editing pattern in site editor. ([55332](https://github.com/WordPress/gutenberg/pull/55332))
+
+### Bug Fixes
+
+-   Fix autocomplete trigger character detection. ([55301](https://github.com/WordPress/gutenberg/pull/55301))
+-   Fix typo in `FontCollection`. ([55439](https://github.com/WordPress/gutenberg/pull/55439))
+
+#### Block Editor
+
+-   Block Editor: Avoid rendering empty Slot for block alignments. ([55689](https://github.com/WordPress/gutenberg/pull/55689))
+-   Block Example: Avoid a crash when block is not registered. ([55686](https://github.com/WordPress/gutenberg/pull/55686))
+
+#### Command Palette
+
+-   Command Palette: Fix a crash when transform to a block without icon. ([55676](https://github.com/WordPress/gutenberg/pull/55676))
+
+#### Link Control
+
+-   Fix: LinkControl on site editor does not show font page and post page indication. ([55694](https://github.com/WordPress/gutenberg/pull/55694))
+-   Fix: LinkControl on widgets editor does not show font page and post page indication. ([55732](https://github.com/WordPress/gutenberg/pull/55732))
+
+#### Interactivity API
+
+-   Fix: Update page title when using enhanced pagination in query loop. ([55446](https://github.com/WordPress/gutenberg/pull/55446))
+
+#### Block Library
+
+-   Fix: Post terms block: Missing options for prefix and suffix when the…. ([55726](https://github.com/WordPress/gutenberg/pull/55726))
+-   Ensure Term Description block is registered in core. ([55669](https://github.com/WordPress/gutenberg/pull/55669))
+-   Fix #55679 missing space in the string. ([55682](https://github.com/WordPress/gutenberg/pull/55682))
+-   Image block: Wrap images with hrefs in an A tag. ([55470](https://github.com/WordPress/gutenberg/pull/55470))
+-   Image: Improve focus management in lightbox. ([55428](https://github.com/WordPress/gutenberg/pull/55428))
+-   Image: Update default fullscreen icon for lightbox trigger. ([55463](https://github.com/WordPress/gutenberg/pull/55463))
+-   Navigation block: Remove browser default padding from the two submenu buttons. ([50943](https://github.com/WordPress/gutenberg/pull/50943))
+-   Query Loop: Disallow "enhanced pagination" with core blocks that may contain third-party blocks. ([55539](https://github.com/WordPress/gutenberg/pull/55539))
+-   Query block enhanced pagination: Detect inner plugin blocks during render. ([55714](https://github.com/WordPress/gutenberg/pull/55714))
+-   Query: Require queryId for enhanced pagination to prevent PHP notices. ([55720](https://github.com/WordPress/gutenberg/pull/55720))
+-   Update label for lightbox editor UI. ([55724](https://github.com/WordPress/gutenberg/pull/55724))
+-   [Block] File: Fix embedded PDF files in Safari. ([55667](https://github.com/WordPress/gutenberg/pull/55667))
+
+#### Patterns
+
+-   Fix bug with authors and contributors not seeing user pattern categories. ([55553](https://github.com/WordPress/gutenberg/pull/55553))
+-   Fix pattern category renaming causing potential duplicate categories. ([55607](https://github.com/WordPress/gutenberg/pull/55607))
+
+#### Post Editor
+
+-   Edit Post: Fix revision button misalignment. ([55659](https://github.com/WordPress/gutenberg/pull/55659))
+-   Preferences modal: Fix the position of sticky heading when blocks are hidden. ([55456](https://github.com/WordPress/gutenberg/pull/55456))
+-   Fix: Add \_\_next40pxDefaultSize to author select in PostAuthor. ([55597](https://github.com/WordPress/gutenberg/pull/55597))
+
+#### Site Editor
+
+-   Fix the 'Slug' display for draft pages. ([55774](https://github.com/WordPress/gutenberg/pull/55774))
+
+#### Data Views
+
+-   List all users in author filter. ([55723](https://github.com/WordPress/gutenberg/pull/55723))
+-   Don't register dataviews postype and taxonomy if experiment is disabled. ([55743](https://github.com/WordPress/gutenberg/pull/55743))
+
+#### Design Tools
+
+-   Remove default dimensions controls from core/avatar. ([55596](https://github.com/WordPress/gutenberg/pull/55596))
+
+#### Interactivity API
+
+-   Fix server processing of an empty `data-wp-context` directive. ([55482](https://github.com/WordPress/gutenberg/pull/55482))
+-   Make duotone support compatible with enhanced pagination. ([55415](https://github.com/WordPress/gutenberg/pull/55415))
+-   Make layout support compatible with enhanced pagination. ([55416](https://github.com/WordPress/gutenberg/pull/55416))
+
+#### Global Styles
+
+-   Fix duotone not showing in site editor style block level styles. ([55361](https://github.com/WordPress/gutenberg/pull/55361))
+
+### Accessibility
+
+#### Block Library
+
+-   Navigation block: Change aria-haspopup to dialog. ([55466](https://github.com/WordPress/gutenberg/pull/55466))
+
+#### Components
+
+-   Autocomplete: Fix Voiceover not announcing suggestions. ([54902](https://github.com/WordPress/gutenberg/pull/54902))
+
+#### Interactivity API
+
+-   Query Loop: Update modal role and focus first element. ([54507](https://github.com/WordPress/gutenberg/pull/54507))
+
+### Performance
+
+-   Add useSettings hook for reading multiple settings at once. ([55337](https://github.com/WordPress/gutenberg/pull/55337))
+-   Block Editor: Optimize 'Layout' controls. ([55754](https://github.com/WordPress/gutenberg/pull/55754))
+-   Block Editor: Optimize 'anchor' inspector controls. ([55721](https://github.com/WordPress/gutenberg/pull/55721))
+-   Block Editor: Optimize 'duotone' controls. ([55753](https://github.com/WordPress/gutenberg/pull/55753))
+-   Block Editor: Optimize alignment toolbar controls. ([55692](https://github.com/WordPress/gutenberg/pull/55692))
+-   Start logging site editor metrics in codevitals. ([55759](https://github.com/WordPress/gutenberg/pull/55759))
+-   useAvailableAlignments: Avoid useSelect subscription when alignments array is empty. ([55449](https://github.com/WordPress/gutenberg/pull/55449))
+
+### Experiments
+
+#### Data Views
+
+-   Trash Data View: Use trash icon. ([55771](https://github.com/WordPress/gutenberg/pull/55771))
+-   Add quick actions. ([55488](https://github.com/WordPress/gutenberg/pull/55488))
+-   Update icons and design tweaks. ([55391](https://github.com/WordPress/gutenberg/pull/55391))
+-   Add ability to persist dataviews on the database. ([55465](https://github.com/WordPress/gutenberg/pull/55465))
+-   Extract `search` from filters. ([55722](https://github.com/WordPress/gutenberg/pull/55722))
+-   Limit users to those who have published pages. ([55455](https://github.com/WordPress/gutenberg/pull/55455))
+-   List all pages, not only those with publish and draft statuses. ([55476](https://github.com/WordPress/gutenberg/pull/55476))
+-   Add: Default readonly views to dataviews. ([55740](https://github.com/WordPress/gutenberg/pull/55740))
+-   Add: Possibility to tree shake DataViewsProvider. ([55641](https://github.com/WordPress/gutenberg/pull/55641))
+
+#### Form block
+
+-   Blocks: Capitalize title and end the description with a period. ([55728](https://github.com/WordPress/gutenberg/pull/55728))
+-   Update copy. ([55468](https://github.com/WordPress/gutenberg/pull/55468))
+-   Allow using groups and columns inside the experimental form block. ([55758](https://github.com/WordPress/gutenberg/pull/55758))
+
+#### Collaborative Editing
+
+-   Remove dangling comma causing PHPUnit failures. ([55494](https://github.com/WordPress/gutenberg/pull/55494))
+-   [Try] HTTP based PHP signaling server for colaborative editing. ([53922](https://github.com/WordPress/gutenberg/pull/53922))
+
+### Documentation
+
+-   Adds a few grammar fixes to `block-registration` documentation. ([55663](https://github.com/WordPress/gutenberg/pull/55663))
+-   Block JSON schema: Add heading/button key to color definition. ([55675](https://github.com/WordPress/gutenberg/pull/55675))
+-   DataViews: Document `data` and `filters`. ([55504](https://github.com/WordPress/gutenberg/pull/55504))
+-   Docs: Fix some typos. ([55654](https://github.com/WordPress/gutenberg/pull/55654))
+-   Docs: Sidebar Block editor handbook - create-block before wp-scripts. ([55534](https://github.com/WordPress/gutenberg/pull/55534))
+-   Fix: Typos inside /docs. ([55472](https://github.com/WordPress/gutenberg/pull/55472))
+-   Scripts: Fix typo in readme. ([55531](https://github.com/WordPress/gutenberg/pull/55531))
+-   Update links to point to getting started guides. ([55479](https://github.com/WordPress/gutenberg/pull/55479))
+-   docs: Fix end-to-end test documentation formatting. ([55631](https://github.com/WordPress/gutenberg/pull/55631))
+
+### Code Quality
+
+-   Use PostCSS + PostCSS plugins for style transformation. ([49521](https://github.com/WordPress/gutenberg/pull/49521))
+-   CS: Remove redundant ignore annotations. ([55615](https://github.com/WordPress/gutenberg/pull/55615))
+-   Chore: Fix: Potential access to properties of undefined object. ([55697](https://github.com/WordPress/gutenberg/pull/55697))
+-   Fix: Add missing defaultStatuses on PagePages. ([55761](https://github.com/WordPress/gutenberg/pull/55761))
+-   Resizeable box (for resizing cover block) should use after block popover slot. ([55784](https://github.com/WordPress/gutenberg/pull/55784))
+-   Update: Code quality: Use for each instead of map. ([55798](https://github.com/WordPress/gutenberg/pull/55798))
+-   Update: Remove path awareness from data-views specific code. ([55695](https://github.com/WordPress/gutenberg/pull/55695))
+-   Update: Remove useless self assignment. ([55696](https://github.com/WordPress/gutenberg/pull/55696))
+-   Backport updates from Core during the 6.4 release cycle. ([55703](https://github.com/WordPress/gutenberg/pull/55703))
+
+#### Data Views
+
+-   DataViews: Iterate on filter's API. ([55440](https://github.com/WordPress/gutenberg/pull/55440))
+-   DataViews: Pass `search` filter as global, unattached from fields. ([55475](https://github.com/WordPress/gutenberg/pull/55475))
+-   DataViews: Remove string from pages sidebar. ([55510](https://github.com/WordPress/gutenberg/pull/55510))
+-   Rename `TextFilter` to `Search`. ([55731](https://github.com/WordPress/gutenberg/pull/55731))
+-   Remove unused file dataview context. ([55775](https://github.com/WordPress/gutenberg/pull/55775))
+
+#### Block Library
+
+-   Pattern: Unlock the private hook outside the component. ([55792](https://github.com/WordPress/gutenberg/pull/55792))
+
+#### Patterns
+
+-   Change pattern category taxonomy public param to false. ([55748](https://github.com/WordPress/gutenberg/pull/55748))
+
+### Tools
+
+-   Replace 'npx' with 'node' on test-playwright.js file'. ([55616](https://github.com/WordPress/gutenberg/pull/55616))
+-   wp-env: Fix errors which prevent it from working without internet. ([53547](https://github.com/WordPress/gutenberg/pull/53547))
+-   [create-block] Add ABSPATH check. ([55533](https://github.com/WordPress/gutenberg/pull/55533))
+
+#### Testing
+
+-   E2E: Revert typing delay on the autocomplete mentions test. ([55132](https://github.com/WordPress/gutenberg/pull/55132))
+-   Fix flaky 'Switch to Draft' action in Preview end-to-end tests. ([55772](https://github.com/WordPress/gutenberg/pull/55772))
+-   Migrate 'Site Title block' end-to-end tests to Playwright. ([55704](https://github.com/WordPress/gutenberg/pull/55704))
+-   Migrate 'block context' end-to-end tests to Playwright. ([55793](https://github.com/WordPress/gutenberg/pull/55793))
+-   Performance tests: Fix canvas locator timeout. ([55441](https://github.com/WordPress/gutenberg/pull/55441))
+-   Scripts: Fix default Playwright configuration. ([55453](https://github.com/WordPress/gutenberg/pull/55453))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @garibiza: Fix #55679 missing space in the string. ([55682](https://github.com/WordPress/gutenberg/pull/55682))
+-   @iamsadi22: Replace 'npx' with 'node' on test-playwright.js file'. ([55616](https://github.com/WordPress/gutenberg/pull/55616))
+-   @parikshit-adhikari: Fix: Typos inside /docs. ([55472](https://github.com/WordPress/gutenberg/pull/55472))
+-   @strarsis: Use PostCSS + PostCSS plugins for style transformation. ([49521](https://github.com/WordPress/gutenberg/pull/49521))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @alexstine @aristath @artemiomorales @arthur791004 @aurooba @c4rl0sbr4v0 @carolinan @ciampo @DAreRodz @dcalhoun @derekblank @dmsnell @fluiddot @garibiza @geriux @glendaviesnz @iamsadi22 @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @KevinBatdorf @luisherranz @MaggieCabrera @Mamaduka @noahtallen @ntsekouras @oandregal @parikshit-adhikari @peterwilsoncc @ramonjd @richtabor @SergeyBiryukov @SiobhyB @Soean @strarsis @swissspidy @t-hamano @talldan @WunderBart @youknowriad
+
+= 16.9.0 =
+
+## Changelog
+
+### Features
+
+#### Create Block
+
+-   Introduce the transformer property. ([55423](https://github.com/WordPress/gutenberg/pull/55423))
+
+#### Data Views
+
+-   Enable users to sort by `date`. ([55388](https://github.com/WordPress/gutenberg/pull/55388))
+
+#### Block Library
+
+-   Enable Block Renaming support for (almost) all blocks. ([54426](https://github.com/WordPress/gutenberg/pull/54426))
+
+### Enhancements
+
+#### Command API
+
+-   Add block-specific commands as contextual suggestions [#53539]. ([53974](https://github.com/WordPress/gutenberg/pull/53974))
+
+#### Components
+
+-   Add `Tabs` (a composable `TabPanel` v2). ([53960](https://github.com/WordPress/gutenberg/pull/53960))
+-   Add `type="button"` to vanilla `<button>` elements. ([55125](https://github.com/WordPress/gutenberg/pull/55125))
+-   ConfirmDialog: Ts unit test storybook. ([54954](https://github.com/WordPress/gutenberg/pull/54954))
+-   GradientPicker: Remove padding and disable overflow of color picker popovers. ([55265](https://github.com/WordPress/gutenberg/pull/55265))
+-   Migrate `Composite` component from `reakit` to `ariakit`. ([54225](https://github.com/WordPress/gutenberg/pull/54225))
+-   Remove margins from Notice component. ([54800](https://github.com/WordPress/gutenberg/pull/54800))
+
+#### Patterns
+
+-   Add duplicate pattern command. ([55292](https://github.com/WordPress/gutenberg/pull/55292))
+-   Add rename command. ([55188](https://github.com/WordPress/gutenberg/pull/55188))
+-   Add rename/delete options for pattern categories in site editor. ([55035](https://github.com/WordPress/gutenberg/pull/55035))
+-   Register new media related categories. ([55236](https://github.com/WordPress/gutenberg/pull/55236))
+-   Use modal for pattern duplication flow as workaround for changing sync status. ([54764](https://github.com/WordPress/gutenberg/pull/54764))
+
+### Block Editor
+
+-   Migrating `DownloadableBlocksList` to use updated `Composite` implementation. ([55272](https://github.com/WordPress/gutenberg/pull/55272))
+
+#### Block Library
+
+-   Improve DimensionsTool control layout. ([55060](https://github.com/WordPress/gutenberg/pull/55060))
+-   Template Part block: Fall back to current theme if no theme attribute is given. ([55217](https://github.com/WordPress/gutenberg/pull/55217))
+
+#### Post Editor
+
+-   Editor: Introduce PluginPostExcerpt slot. ([55200](https://github.com/WordPress/gutenberg/pull/55200))
+-   Editor: Use hooks instead of HoCs in PostExcerpt. ([55189](https://github.com/WordPress/gutenberg/pull/55189))
+
+#### Design Tools
+
+-   Allow using CSS level 4 viewport-relative units. ([54415](https://github.com/WordPress/gutenberg/pull/54415))
+-   Add changelog entry for #54415. ([55201](https://github.com/WordPress/gutenberg/pull/55201))
+-   Remove 16:10 from 10:16 options from AspectRatioDropdown. ([55053](https://github.com/WordPress/gutenberg/pull/55053))
+
+#### Data Views
+
+-   Add drop down with action in headers. ([55293](https://github.com/WordPress/gutenberg/pull/55293))
+
+#### Icons
+
+-   Update fullscreen icon. ([55021](https://github.com/WordPress/gutenberg/pull/55021))
+
+#### Format Library
+
+-   Link format: Auto link pasted urls. ([55195](https://github.com/WordPress/gutenberg/pull/55195))
+
+#### Site Editor
+
+-   Migrating `AddCustomTemplateModalContent` to use updated `Composite` implementation. ([55256](https://github.com/WordPress/gutenberg/pull/55256))
+
+#### Private APIs
+
+-   Update consent string for using private APIs. ([55182](https://github.com/WordPress/gutenberg/pull/55182))
+
+### New APIs
+
+-   Core Data: Retrieve the pagination totals in the getEntityRecords calls. ([55164](https://github.com/WordPress/gutenberg/pull/55164))
+
+### Bug Fixes
+
+#### Block Library
+
+-   PHP notice when an image with lightbox is deleted. ([55370](https://github.com/WordPress/gutenberg/pull/55370))
+-   Cover Block: Check for previously uploaded media before setting the dimRatio. ([55422](https://github.com/WordPress/gutenberg/pull/55422))
+-   Cover: Fix media type check in the onSelectMedia hook. ([55168](https://github.com/WordPress/gutenberg/pull/55168))
+-   Fix Block Rename UI perf regression. ([55250](https://github.com/WordPress/gutenberg/pull/55250))
+-   Fix PHP notice when an image with lightbox is deleted in the behaviors file. ([55385](https://github.com/WordPress/gutenberg/pull/55385))
+-   Fix: Wrong condition on cover block dimRatioToClass. ([55356](https://github.com/WordPress/gutenberg/pull/55356))
+-   Focus submenu button when clicked. ([55198](https://github.com/WordPress/gutenberg/pull/55198))
+-   Hide footnotes block from the inserter. ([55058](https://github.com/WordPress/gutenberg/pull/55058))
+-   Image: Fix Lightbox display bug in Classic Themes. ([54837](https://github.com/WordPress/gutenberg/pull/54837))
+-   Latest Posts: Add screen reader title text to Read more links and use alternative to excerpt_more filter. ([55029](https://github.com/WordPress/gutenberg/pull/55029))
+-   Latest Posts: Sync updates from Core (6.4). ([55181](https://github.com/WordPress/gutenberg/pull/55181))
+-   List View: Change the aria-description attribute to aria-describedby. ([55264](https://github.com/WordPress/gutenberg/pull/55264))
+-   Query Loop block: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region. ([55309](https://github.com/WordPress/gutenberg/pull/55309))
+
+#### Site Editor
+
+-   Alternative: Fix template part area listing when a template has no edits. ([55115](https://github.com/WordPress/gutenberg/pull/55115))
+-   Do not display 'trashed' navigation menus in Sidebar. ([55072](https://github.com/WordPress/gutenberg/pull/55072))
+-   Pages list: Set `status` as no sortable. ([55210](https://github.com/WordPress/gutenberg/pull/55210))
+-   Remove duplicate template areas from the site view sidebar. ([54942](https://github.com/WordPress/gutenberg/pull/54942))
+-   Site Editor Styles Screen: Fix dancing styles previews. ([55183](https://github.com/WordPress/gutenberg/pull/55183))
+-   Use `accessorFn` instead of `cell` to render `status`. ([55196](https://github.com/WordPress/gutenberg/pull/55196))
+
+#### Interactivity API
+
+-   Add `aria-label` attribute to navigation block only when it is open. ([54816](https://github.com/WordPress/gutenberg/pull/54816))
+-   Fix server processing of `wp-context` getting out of sync. ([55436](https://github.com/WordPress/gutenberg/pull/55436))
+-   Image: Disable lightbox editor UI for linked images. ([55141](https://github.com/WordPress/gutenberg/pull/55141))
+-   Image: Reimplement lightbox trigger as a minimal button in corner of image. ([55212](https://github.com/WordPress/gutenberg/pull/55212))
+-   Image: Stop crashing with Lightbox on image blocks without an image. ([55269](https://github.com/WordPress/gutenberg/pull/55269))
+-   Remove the lightbox filter and view file when the lightbox setting is disabled. ([55120](https://github.com/WordPress/gutenberg/pull/55120))
+-   Reset "Expand on click" image styles when window is resized. ([55077](https://github.com/WordPress/gutenberg/pull/55077))
+
+#### Components
+
+-   Changing `Button` component toggled style selector. ([55065](https://github.com/WordPress/gutenberg/pull/55065))
+-   ColorPicker: Improve UX of dragging the handle when in popover on top of the editor. ([55149](https://github.com/WordPress/gutenberg/pull/55149))
+-   Colors: Fix color button border radii. ([55207](https://github.com/WordPress/gutenberg/pull/55207))
+-   Iframe / block drag chip: Fix positioning when dragging over an iframe. ([55150](https://github.com/WordPress/gutenberg/pull/55150))
+-   ProgressBar: Use text color to ensure enough contrast against background. ([55285](https://github.com/WordPress/gutenberg/pull/55285))
+-   Toolbar: Add unstyled variant. ([55139](https://github.com/WordPress/gutenberg/pull/55139))
+-   useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered. ([55288](https://github.com/WordPress/gutenberg/pull/55288))
+
+#### Block Editor
+
+-   LinkControl: Prevent horizontally long preview image from being stretched vertically. ([55156](https://github.com/WordPress/gutenberg/pull/55156))
+-   List: Fix forward merging of nested list. ([55121](https://github.com/WordPress/gutenberg/pull/55121))
+-   Paste: Fix MS Word list paste. ([55127](https://github.com/WordPress/gutenberg/pull/55127))
+-   Writing flow: Fix selecting synced pattern. ([55221](https://github.com/WordPress/gutenberg/pull/55221))
+-   Writing flow: Preserve block when merging into empty paragraph. ([55134](https://github.com/WordPress/gutenberg/pull/55134))
+-   url: Update `filterURLForDisplay` to include all image, video, and audio file types. ([54920](https://github.com/WordPress/gutenberg/pull/54920))
+-   Block Styles: Display default style label correctly in the block sidebar. ([55008](https://github.com/WordPress/gutenberg/pull/55008))
+-   useBlockSettings: Add missing useMemo dependencies. ([55204](https://github.com/WordPress/gutenberg/pull/55204))
+
+#### Data Views
+
+-   Add linked title fallback. ([55248](https://github.com/WordPress/gutenberg/pull/55248))
+-   PagePages: Fix unintended object mutation inside component. ([55314](https://github.com/WordPress/gutenberg/pull/55314))
+-   Fix pagination. ([55387](https://github.com/WordPress/gutenberg/pull/55387))
+-   Make `date` header translatable. ([55445](https://github.com/WordPress/gutenberg/pull/55445))
+
+#### Patterns
+
+-   Add category selector to pattern creation modal. ([55024](https://github.com/WordPress/gutenberg/pull/55024))
+-   Fix scrollbars on pattern transforms. ([55069](https://github.com/WordPress/gutenberg/pull/55069))
+
+#### HTML API
+
+-   Fix: Directive processor failing on updated HTML API. ([55404](https://github.com/WordPress/gutenberg/pull/55404))
+
+#### Widgets Editor
+
+-   Only suppress admin notices when JavaScript is enabled. ([55403](https://github.com/WordPress/gutenberg/pull/55403))
+
+#### Data Layer
+
+-   Fix `combineReducers()` types. ([55321](https://github.com/WordPress/gutenberg/pull/55321))
+-   Get the page count as derived data. ([55316](https://github.com/WordPress/gutenberg/pull/55316))
+
+#### Layout
+
+-   Add selector as id to layout style overrides. ([55291](https://github.com/WordPress/gutenberg/pull/55291))
+
+#### History
+
+-   Try: Only render LastRevision component if plugin is active. ([55253](https://github.com/WordPress/gutenberg/pull/55253))
+
+#### Block Directory
+
+-   Fix filtering for downloadable blocks in inserter. ([55243](https://github.com/WordPress/gutenberg/pull/55243))
+
+#### Global Styles
+
+-   Use all the settings origins for a block that consumes paths with merge. ([55219](https://github.com/WordPress/gutenberg/pull/55219))
+
+#### Post Editor
+
+-   Fix wrong notification message shown when an entity is moved to trash. ([55155](https://github.com/WordPress/gutenberg/pull/55155))
+
+#### Typography
+
+-   Font Library: Show error if fetching collection fails. ([54919](https://github.com/WordPress/gutenberg/pull/54919))
+
+#### Colors
+
+-   I18n Make `No color selected` translatable text. ([54814](https://github.com/WordPress/gutenberg/pull/54814))
+
+#### Rich Text
+
+-   Paste: Only link selection if URL protocol is http(s). ([53000](https://github.com/WordPress/gutenberg/pull/53000))
+
+#### Patterns
+
+-   Remove the version enforcement for npm in `engines` field. ([55245](https://github.com/WordPress/gutenberg/pull/55245))
+
+#### Code Quality
+
+-   Fix: Use y-webrtc room name terminology instead of docName. ([55260](https://github.com/WordPress/gutenberg/pull/55260))
+
+### Accessibility
+
+#### Global Styles
+
+-   Fix flickering when focusing on global style variations. ([55267](https://github.com/WordPress/gutenberg/pull/55267))
+
+#### Interactivity API
+
+-   Fix Image block lightbox missing alt attribute and improve accessibility. ([55010](https://github.com/WordPress/gutenberg/pull/55010))
+
+#### Components
+
+-   `Modal`: Fix closing when contained iframe is focused. ([51602](https://github.com/WordPress/gutenberg/pull/51602))
+
+#### Block Library
+
+-   Cover: Add aria-label to fixed and repeated image backgrounds. ([50990](https://github.com/WordPress/gutenberg/pull/50990))
+
+### Performance
+
+#### Block Editor
+
+-   Rich Text: Cleanup excess `focusin`/`focusout` listeners. ([55382](https://github.com/WordPress/gutenberg/pull/55382))
+-   Optimize 'customClassName' controls. ([55345](https://github.com/WordPress/gutenberg/pull/55345))
+-   useBlockControlsFill: Avoid unneeded store subscriptions. ([55340](https://github.com/WordPress/gutenberg/pull/55340))
+
+#### Parsing
+
+-   Remove empty attrs. ([54496](https://github.com/WordPress/gutenberg/pull/54496))
+
+#### Data Layer
+
+-   Fix resolver resolution status key types mismatch causing unwanted resolver calls for identical state data. ([52120](https://github.com/WordPress/gutenberg/pull/52120))
+
+### Experiments
+
+#### Data Views
+
+-   Add `status` entity and use it in "admin views" experiment. ([55050](https://github.com/WordPress/gutenberg/pull/55050))
+-   Add Grid Layout. ([55353](https://github.com/WordPress/gutenberg/pull/55353))
+-   Add featured image field to the page list. ([55246](https://github.com/WordPress/gutenberg/pull/55246))
+-   Adds a control to the views actions to switch layouts. ([55311](https://github.com/WordPress/gutenberg/pull/55311))
+-   Fix the actions menu in the list view. ([55426](https://github.com/WordPress/gutenberg/pull/55426))
+
+#### Block Library
+
+-   Introduce experimental form & inputs blocks to allow building basic forms. ([44214](https://github.com/WordPress/gutenberg/pull/44214))
+-   Mark forms blocks as experimental in `block.json` files. ([55187](https://github.com/WordPress/gutenberg/pull/55187))
+-   Update the apiVersion in experimental blocks block.json files. ([55186](https://github.com/WordPress/gutenberg/pull/55186))
+
+#### Components
+
+-   Expose `Tabs` as private API. ([55327](https://github.com/WordPress/gutenberg/pull/55327))
+
+#### Site Editor
+
+-   Add author and status filter to the page list. ([55270](https://github.com/WordPress/gutenberg/pull/55270))
+
+### Documentation
+
+-   Add "Get started with create-block" doc to the Getting Started section. ([55373](https://github.com/WordPress/gutenberg/pull/55373))
+-   Add a "Get started with wp-scripts" doc to the Getting Started section. ([55372](https://github.com/WordPress/gutenberg/pull/55372))
+-   Add backgroundImage to the theme json documentation for appearanceTools. ([55376](https://github.com/WordPress/gutenberg/pull/55376))
+-   Add initial documentation for the `DataViews` component. ([55435](https://github.com/WordPress/gutenberg/pull/55435))
+-   Augment `Block.Edit` filter documentation with performance guidance. ([55252](https://github.com/WordPress/gutenberg/pull/55252))
+-   Correct the documented type for the `$w` parameter of `block_core_navigation_add_directives_to_submenu()`. ([53585](https://github.com/WordPress/gutenberg/pull/53585))
+-   Document `kind`, `name`, `plural` for entity configuration. ([55158](https://github.com/WordPress/gutenberg/pull/55158))
+-   Document updating the consent string to unlock private APIs. ([55235](https://github.com/WordPress/gutenberg/pull/55235))
+-   Explain how to translate Gutenberg in standalone apps using the editor packages. ([55080](https://github.com/WordPress/gutenberg/pull/55080))
+-   Fix callouts in end-to-end test documentation. ([55300](https://github.com/WordPress/gutenberg/pull/55300))
+-   Fix code formatting due to bug in the "Get started with wp-env" doc. ([55458](https://github.com/WordPress/gutenberg/pull/55458))
+-   Fix the position of the callout in the "Get started with wp-scripts" doc. ([55457](https://github.com/WordPress/gutenberg/pull/55457))
+-   Font Library: Change all references to 6.4.0 by 6.5.0 core version. ([55320](https://github.com/WordPress/gutenberg/pull/55320))
+-   Initial documentation of entity configuration. ([55103](https://github.com/WordPress/gutenberg/pull/55103))
+-   PHP lib docs: Update to include information about prefixes in block PHP code. ([55402](https://github.com/WordPress/gutenberg/pull/55402))
+-   Platform docs: Add a page to explain how to render HTML from a list of blocks. ([55140](https://github.com/WordPress/gutenberg/pull/55140))
+-   Remove `@return void` from PHP function docs. ([55237](https://github.com/WordPress/gutenberg/pull/55237))
+-   Remove the `wp-now` getting started doc. ([55136](https://github.com/WordPress/gutenberg/pull/55136))
+-   Update LinkControl documentation with advice to memoize value prop. ([54659](https://github.com/WordPress/gutenberg/pull/54659))
+-   Update nested-blocks-inner-blocks.md for WP 6.4 release. ([55375](https://github.com/WordPress/gutenberg/pull/55375))
+-   docs/get-started-with-wp-env: Diagram and links added. ([55381](https://github.com/WordPress/gutenberg/pull/55381))
+-   Update broken anchor link. ([55233](https://github.com/WordPress/gutenberg/pull/55233))
+
+### Code Quality
+
+#### Data Views
+
+-   Allow actions to be provided declaratively as a prop. ([55192](https://github.com/WordPress/gutenberg/pull/55192))
+-   In list view, automatically insert header menu separators. ([55412](https://github.com/WordPress/gutenberg/pull/55412))
+-   Update the data views component to pass an view object. ([55154](https://github.com/WordPress/gutenberg/pull/55154))
+-   Update the view actions menu to be independent from current view APIs. ([55294](https://github.com/WordPress/gutenberg/pull/55294))
+-   Normalize `render` fields function. ([55411](https://github.com/WordPress/gutenberg/pull/55411))
+-   Rename accessorFn to getValue. ([55434](https://github.com/WordPress/gutenberg/pull/55434))
+-   Update the view configuration to include fields visibility. ([55247](https://github.com/WordPress/gutenberg/pull/55247))
+
+#### Block Library
+
+-   Query block: Remove unnecessary class. ([55438](https://github.com/WordPress/gutenberg/pull/55438))
+
+#### Site Editor
+
+-   Fix: Remove unrequired nullish coalescing operator on canEditCss con…. ([55357](https://github.com/WordPress/gutenberg/pull/55357))
+
+#### Global Styles
+
+-   Update: Unset variable set by reference after a foreach loop. ([55261](https://github.com/WordPress/gutenberg/pull/55261))
+
+#### Design Tools
+
+-   Elements: Add unit tests for class and style generation. ([55113](https://github.com/WordPress/gutenberg/pull/55113))
+
+#### Block Editor
+
+-   Remove value syncing in Link Control. ([51387](https://github.com/WordPress/gutenberg/pull/51387))
+-   Chore: Fix: Remove third parameter passed to shouldDismissPastedFiles. ([55262](https://github.com/WordPress/gutenberg/pull/55262))
+-   Chore: Simplify code by removing unnecessary and condition. ([55268](https://github.com/WordPress/gutenberg/pull/55268))
+-   useBlockSync: Fix typo and simplify test. ([55203](https://github.com/WordPress/gutenberg/pull/55203))
+
+#### Data Layer
+
+-   Update status entity label to `Status` and plural to `getStatuses`. ([55160](https://github.com/WordPress/gutenberg/pull/55160))
+
+#### Gutenberg Plugin
+
+-   Text Component: Typescript'n. ([54953](https://github.com/WordPress/gutenberg/pull/54953))
+
+### Tools
+
+#### Testing
+
+-   Don't change error handling in WP_Theme_JSON_Gutenberg::Set_spacing_sizes(). ([55354](https://github.com/WordPress/gutenberg/pull/55354))
+-   E2E: Add missing comment. ([55093](https://github.com/WordPress/gutenberg/pull/55093))
+-   E2E: Try to fix the flaky autocomplete spec. ([55081](https://github.com/WordPress/gutenberg/pull/55081))
+-   Migrate 'Post Title block' end-to-end tests to Playwright. ([55297](https://github.com/WordPress/gutenberg/pull/55297))
+-   Migrate 'text color' end-to-end test to Playwright. ([55323](https://github.com/WordPress/gutenberg/pull/55323))
+-   Migrate demo page tests to Playwright. ([55054](https://github.com/WordPress/gutenberg/pull/55054))
+-   Migrate remaining Link UI tests to Playwright. ([52828](https://github.com/WordPress/gutenberg/pull/52828))
+-   Playwright Utils: Introduce the 'editor.saveDraft' helper. ([55308](https://github.com/WordPress/gutenberg/pull/55308))
+-   Try to fix flaky synced pattern test. ([55406](https://github.com/WordPress/gutenberg/pull/55406))
+-   Try to fix multi-block-selection flakiness. ([55075](https://github.com/WordPress/gutenberg/pull/55075))
+-   WP_Theme_JSON_Gutenberg Unit tests: Fix phpunit warnings about set_spacing_sizes. ([55313](https://github.com/WordPress/gutenberg/pull/55313))
+-   end-to-end Utils: Use frameLocator for retrieving editor canvas. ([54911](https://github.com/WordPress/gutenberg/pull/54911))
+
+#### Build Tooling
+
+-   Packages: Ensure only changed packages get published for WP releases. ([55334](https://github.com/WordPress/gutenberg/pull/55334))
+-   WP_Env: tests-cli phpunit executable file not found in $PATH: Unknown. ([54508](https://github.com/WordPress/gutenberg/pull/54508))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @unscripted: docs: Update broken anchor link. ([55233](https://github.com/WordPress/gutenberg/pull/55233))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @anton-vlasenko @apeatling @aristath @artemiomorales @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ecgan @ellatrix @fluiddot @getdave @glendaviesnz @gziolo @jffng @jhnstn @johnbillion @jorgefilipecosta @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kishanjasani @luisherranz @MaggieCabrera @Mamaduka @margolisj @matiasbenedetto @mcsf @michalczaplinski @mikachan @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @retrofox @richtabor @ryanwelcher @SantosGuillamot @scruffian @sethrubenstein @shimotmk @SiobhyB @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @unscripted @WunderBart @youknowriad
+
+= 16.8.1 =
+
+## Changelog
+
+### Enhancements
+
+-   Update: Improve footnotes sanitisation by removing unrequired keys. ([55305](https://github.com/WordPress/gutenberg/pull/55305))
+
+### Code Quality
+
+-   Update: Navigation link force arrow attribute to be part of the hardcoded set. ([55306](https://github.com/WordPress/gutenberg/pull/55306))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@jorgefilipecosta
+
+= 16.8.0 =
+
+= 16.8.0-rc.2 =
+
+## Changelog
+
+This copies the commits from the 16.7.1 patch release into the 16.8.0 main release.
+
+### Tools
+
+#### Build Tooling
+
+-   Fix incorrect resource URL in source map for sources coming from @wordpress packages. ([51401](https://github.com/WordPress/gutenberg/pull/51401))
+
+### Various
+
+-   Add missing schema `type` attribute for in WP 6.4 compat's `block-hooks.php`. ([55138](https://github.com/WordPress/gutenberg/pull/55138))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine @torounit
+
+= 16.8.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Block Editor
+
+-   Adds 'nofollow' setting to Button block. ([54110](https://github.com/WordPress/gutenberg/pull/54110))
+
+#### Site Editor
+
+-   Add 'Show template' toggle when editing pages. ([52674](https://github.com/WordPress/gutenberg/pull/52674))
+
+### Enhancements
+
+-   Update pattern import menu item. ([54782](https://github.com/WordPress/gutenberg/pull/54782))
+
+#### Components
+
+-   Adding label/description to `BlockEditor/DuotoneControl`. ([54473](https://github.com/WordPress/gutenberg/pull/54473))
+-   Deprecating `isPressed` in `Button` component. ([54740](https://github.com/WordPress/gutenberg/pull/54740))
+-   Follow ariakit best practices. ([54696](https://github.com/WordPress/gutenberg/pull/54696))
+-   InputControl-based components: Add opt-in prop for next 40px default size. ([53819](https://github.com/WordPress/gutenberg/pull/53819))
+-   Modal: Add `contentWidth` prop to support a selection of preset modal sizes. ([54471](https://github.com/WordPress/gutenberg/pull/54471))
+-   Remove unused components from `ui/`. ([54573](https://github.com/WordPress/gutenberg/pull/54573))
+-   Update ariakit to 0.3.3. ([54818](https://github.com/WordPress/gutenberg/pull/54818))
+-   Update compact search control metrics. ([54663](https://github.com/WordPress/gutenberg/pull/54663))
+-   Wrapped `TextareaControl` in a `forwardRef` call. ([54975](https://github.com/WordPress/gutenberg/pull/54975))
+
+#### Block Library
+
+-   Add a brief description to the Footnotes block. ([54613](https://github.com/WordPress/gutenberg/pull/54613))
+-   Footnotes: Use core’s meta revisioning if available. ([52988](https://github.com/WordPress/gutenberg/pull/52988))
+-   Login/out: Add spacing support. ([45147](https://github.com/WordPress/gutenberg/pull/45147))
+-   Query view.js: Code quality. ([54982](https://github.com/WordPress/gutenberg/pull/54982))
+-   Set custom color when applying initial background image. ([54054](https://github.com/WordPress/gutenberg/pull/54054))
+-   Use `wp_get_inline_script_tag()` in `build_dropdown_script_block_core_categories()`. ([54637](https://github.com/WordPress/gutenberg/pull/54637))
+
+#### Block Editor
+
+-   Default suggested links to pages. ([54622](https://github.com/WordPress/gutenberg/pull/54622))
+-   Remove base URL from link control search results. ([54553](https://github.com/WordPress/gutenberg/pull/54553))
+-   Simplify `BlockHTMLConvertButton`. ([54972](https://github.com/WordPress/gutenberg/pull/54972))
+-   Update strings in blocks 'RenameModal' component. ([54887](https://github.com/WordPress/gutenberg/pull/54887))
+
+#### Post Editor
+
+-   Edit Post: Use hooks instead of HoCs in 'PostStatus' components. ([54951](https://github.com/WordPress/gutenberg/pull/54951))
+-   Editor: Use hooks instead of HoCs in 'PostSticky' components. ([54949](https://github.com/WordPress/gutenberg/pull/54949))
+-   Editor: Use hooks instead of HoCs in 'PostSwitchToDraftButton'. ([54695](https://github.com/WordPress/gutenberg/pull/54695))
+-   Show confirmation dialog when moving a post to the trash. ([50219](https://github.com/WordPress/gutenberg/pull/50219))
+
+#### Site Editor
+
+-   Add template replace flow to template inspector. ([54609](https://github.com/WordPress/gutenberg/pull/54609))
+-   [Site Editor]: Update copy of using the default template in a page. ([54728](https://github.com/WordPress/gutenberg/pull/54728))
+
+#### Patterns
+
+-   Remove category description in inserter panel. ([54894](https://github.com/WordPress/gutenberg/pull/54894))
+
+#### Typography
+
+-   Font Library: Refactor endpoint permissions. ([54829](https://github.com/WordPress/gutenberg/pull/54829))
+
+### Bug Fixes
+
+-   Fix the ShortcutProvider usage. ([54851](https://github.com/WordPress/gutenberg/pull/54851))
+-   Fix warning when a template calls a template area twice. ([54861](https://github.com/WordPress/gutenberg/pull/54861))
+-   Revert "Fix warning when a template calls a template area twice". ([54926](https://github.com/WordPress/gutenberg/pull/54926))
+
+#### Block Library
+
+-   All Nav block items to break long titles. ([54866](https://github.com/WordPress/gutenberg/pull/54866))
+-   Fallback to Twitter provider when embedding X URLs. ([54876](https://github.com/WordPress/gutenberg/pull/54876))
+-   Fix Deleted Navigation Menu warning string. ([55033](https://github.com/WordPress/gutenberg/pull/55033))
+-   Fix Search Block not updating in Nav block. ([54823](https://github.com/WordPress/gutenberg/pull/54823))
+-   Fix left and right aligmnent in children of Post Template. ([54997](https://github.com/WordPress/gutenberg/pull/54997))
+-   Fix output of Navigation block classnames in the editor. ([54992](https://github.com/WordPress/gutenberg/pull/54992))
+-   Fix overwriting of published post meta when previewing footnote changes. ([54339](https://github.com/WordPress/gutenberg/pull/54339))
+-   Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists. ([54878](https://github.com/WordPress/gutenberg/pull/54878))
+-   Image: Fix layout shift when lightbox is opened and closed. ([53026](https://github.com/WordPress/gutenberg/pull/53026))
+-   Media & Text: Fix React warning. ([55038](https://github.com/WordPress/gutenberg/pull/55038))
+-   Search block: Allow space for input field only when form expanded. ([54846](https://github.com/WordPress/gutenberg/pull/54846))
+-   Search block: Update alignment and icon button width. ([54773](https://github.com/WordPress/gutenberg/pull/54773))
+
+#### Site Editor
+
+-   Avoid same key warnings in template parts area listings. ([54863](https://github.com/WordPress/gutenberg/pull/54863))
+-   Avoid stale navigation block values when parsing entity record. ([54996](https://github.com/WordPress/gutenberg/pull/54996))
+-   Don't display the navigation section in template parts details when a menu is missing. ([54993](https://github.com/WordPress/gutenberg/pull/54993))
+-   Fix ToolSelector popover variant. ([54840](https://github.com/WordPress/gutenberg/pull/54840))
+-   Reset 'Show template' toggle when leaving edit mode. ([54679](https://github.com/WordPress/gutenberg/pull/54679))
+-   remove `overflow: Hidden` from the entity title in the site editor sidebar. ([54769](https://github.com/WordPress/gutenberg/pull/54769))
+
+#### Components
+
+-   FormTokenField: Add `box-sizing` reset style and reset default padding. ([54734](https://github.com/WordPress/gutenberg/pull/54734))
+-   Popover: Fix the styles for components that use emotion within popovers. ([54912](https://github.com/WordPress/gutenberg/pull/54912))
+-   Remove hover style for secondary Button when aria-disabled is set. ([54978](https://github.com/WordPress/gutenberg/pull/54978))
+-   Reverting addition of `aria-selected` style hook in `Button`. ([54931](https://github.com/WordPress/gutenberg/pull/54931))
+-   `SlotFill`: Pass `Component` instance to unregisterSlot. ([54765](https://github.com/WordPress/gutenberg/pull/54765))
+
+#### Block Editor
+
+-   Avoid double-wrapping selectors when transforming the styles. ([54981](https://github.com/WordPress/gutenberg/pull/54981))
+-   [Inserter]: Fix reset of registered media categories. ([55012](https://github.com/WordPress/gutenberg/pull/55012))
+
+#### Typography
+
+-   Font Library: Changed the OTF mime type expected value to be what PHP returns. ([54886](https://github.com/WordPress/gutenberg/pull/54886))
+-   Font Library: Move font uploads to a new tab. ([54655](https://github.com/WordPress/gutenberg/pull/54655))
+
+#### Global Styles
+
+-   Block custom CSS: Fix incorrect CSS when multiple root selectors. ([53602](https://github.com/WordPress/gutenberg/pull/53602))
+-   Image: Ensure `false` values are preserved in memory when defined in `theme.json`. ([54639](https://github.com/WordPress/gutenberg/pull/54639))
+
+#### List View
+
+-   Fix performance issue when selecting all blocks. ([54900](https://github.com/WordPress/gutenberg/pull/54900))
+
+#### Colors
+
+-   Format Library: Try to fix highlight popover jumping. ([54736](https://github.com/WordPress/gutenberg/pull/54736))
+
+#### Interactivity API
+
+-   Image: Fix duotone not being applied to lightbox image. ([54670](https://github.com/WordPress/gutenberg/pull/54670))
+
+### Accessibility
+
+#### Block Library
+
+-   Footnotes: Add aria-label to return links. ([54843](https://github.com/WordPress/gutenberg/pull/54843))
+-   Table of contents block accessibility improvements. ([54322](https://github.com/WordPress/gutenberg/pull/54322))
+
+#### Components
+
+-   HTML block: Fix accessibility issues on back-end. ([54408](https://github.com/WordPress/gutenberg/pull/54408))
+-   `Modal`: Accessibly hide/show outer modal when nested. ([54743](https://github.com/WordPress/gutenberg/pull/54743))
+
+#### Patterns
+
+-   Use list role instead of listbox in patterns list. ([54884](https://github.com/WordPress/gutenberg/pull/54884))
+
+#### Post Editor
+
+-   Editor: Always render the 'Switch to Draft' button to avoid focus loss. ([54722](https://github.com/WordPress/gutenberg/pull/54722))
+
+#### Block Editor
+
+-   Block Switcher: Use a different label for multi-selection. ([54692](https://github.com/WordPress/gutenberg/pull/54692))
+
+### Performance
+
+-   Tests: Support the Site Editor's legacy spinner. ([54784](https://github.com/WordPress/gutenberg/pull/54784))
+-   Use instanceOf over property_exists. ([54835](https://github.com/WordPress/gutenberg/pull/54835))
+
+#### Block Editor
+
+-   Subscribe only to block editor store in `useBlockSync`. ([55041](https://github.com/WordPress/gutenberg/pull/55041))
+
+### Experiments
+
+#### Site Editor
+
+-   al]: First version of pages list in site editor. ([54966](https://github.com/WordPress/gutenberg/pull/54966))
+
+#### Block Editor
+
+-   Expose `getDuotoneFilter()` as private API. ([54905](https://github.com/WordPress/gutenberg/pull/54905))
+
+### Documentation
+
+-   Add a documentation page about the block editor settings. ([54870](https://github.com/WordPress/gutenberg/pull/54870))
+-   Add a page about the format library to the platform documentation site. ([55037](https://github.com/WordPress/gutenberg/pull/55037))
+-   Docs: Add a callout to the `wp-now` documentation to mention it's still experimental. ([55044](https://github.com/WordPress/gutenberg/pull/55044))
+-   Docs: Remove outdated info. ([54707](https://github.com/WordPress/gutenberg/pull/54707))
+-   Docs: Remove the Full Site Editing doc. ([54516](https://github.com/WordPress/gutenberg/pull/54516))
+-   Docs: Rename Block Hooks handbook page to Block Filters. ([54862](https://github.com/WordPress/gutenberg/pull/54862))
+-   Document the current state of the Real-Time collaboration experiment. ([54932](https://github.com/WordPress/gutenberg/pull/54932))
+-   Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
+-   Platform Docs: Add a documentation page explaining how to use the block library. ([54967](https://github.com/WordPress/gutenberg/pull/54967))
+-   Update the documentation of the block editor and replace @wordpress/element with react. ([54908](https://github.com/WordPress/gutenberg/pull/54908))
+-   Update versions in WP for 6.4. ([54890](https://github.com/WordPress/gutenberg/pull/54890))
+
+### Code Quality
+
+-   Add a unit test for the "ValidBlockLibraryFunctionNameSniff" sniff. ([53928](https://github.com/WordPress/gutenberg/pull/53928))
+-   Move dependencies to the right place. ([54597](https://github.com/WordPress/gutenberg/pull/54597))
+-   Move mime-type collection generation to a function that can be tested…. ([54844](https://github.com/WordPress/gutenberg/pull/54844))
+-   Post Title block should use esc_url(). ([53981](https://github.com/WordPress/gutenberg/pull/53981))
+-   Rich text: Use getPasteEventData. ([55048](https://github.com/WordPress/gutenberg/pull/55048))
+-   Writing flow: Absorb clipboard handler. ([55006](https://github.com/WordPress/gutenberg/pull/55006))
+
+#### Block Library
+
+-   Footnotes: Avoid regexes in entity provider. ([54505](https://github.com/WordPress/gutenberg/pull/54505))
+-   Image Block: Fix browser console error when clicking "Expand on Click". ([54938](https://github.com/WordPress/gutenberg/pull/54938))
+-   Removed unwanted space from the string. ([54654](https://github.com/WordPress/gutenberg/pull/54654))
+-   Update CODEOWNERS for `core/image` block. ([54793](https://github.com/WordPress/gutenberg/pull/54793))
+
+#### Patterns
+
+-   Add a new spec for for adding an unsynced pattern. ([54892](https://github.com/WordPress/gutenberg/pull/54892))
+-   Add end-to-end tests for filtering and searching patterns. ([54906](https://github.com/WordPress/gutenberg/pull/54906))
+-   Add new end-to-end test for creating a pattern. ([54855](https://github.com/WordPress/gutenberg/pull/54855))
+-   Include pattern category in main end-to-end critical path test. ([54923](https://github.com/WordPress/gutenberg/pull/54923))
+
+#### Components
+
+-   Consolidate utils to remove `ui/`. ([54922](https://github.com/WordPress/gutenberg/pull/54922))
+-   Move `ContextSystemProvider` out of `/ui`. ([54847](https://github.com/WordPress/gutenberg/pull/54847))
+-   SlotFill: Migrate to Typescript. ([51350](https://github.com/WordPress/gutenberg/pull/51350))
+-   Tidying `CircularOptionPicker.Option`. ([54903](https://github.com/WordPress/gutenberg/pull/54903))
+
+#### Typography
+
+-   Font Library: Syntax refactor repace strpos with str_contains. ([54832](https://github.com/WordPress/gutenberg/pull/54832))
+-   Font Library: Use snake_case instead of camelCase on fontFamilies endpoint param. ([54977](https://github.com/WordPress/gutenberg/pull/54977))
+
+#### Block Editor
+
+-   Rich text: Avoid shortcode logic, adjust paste handler instead. ([55052](https://github.com/WordPress/gutenberg/pull/55052))
+
+#### Plugin
+
+-   Remove legacy logic for '\_\_unstableResolvedAssets' setting. ([54812](https://github.com/WordPress/gutenberg/pull/54812))
+
+#### Data Layer
+
+-   createResolversCacheMiddleware: Remove dependency on core/data store. ([54733](https://github.com/WordPress/gutenberg/pull/54733))
+
+#### Site Editor
+
+-   Use constants rather than hard coded template strings (round 3). ([54705](https://github.com/WordPress/gutenberg/pull/54705))
+
+### Tools
+
+-   Label enforcer workflow: Make accessibility a focus instead of a type. ([54941](https://github.com/WordPress/gutenberg/pull/54941))
+-   Scripts: Update webpack and related dependencies to the latest version. ([54657](https://github.com/WordPress/gutenberg/pull/54657))
+-   Update changelog automation and test fixtures to match the last a11y label renaming. ([54974](https://github.com/WordPress/gutenberg/pull/54974))
+
+#### Testing
+
+-   Don’t use TypeScript files in scripts package. ([54856](https://github.com/WordPress/gutenberg/pull/54856))
+-   ESLint: Update eslint-plugin-testing-library to v6. ([54910](https://github.com/WordPress/gutenberg/pull/54910))
+-   Fix end-to-end test: ”WP Editor Meta Boxes > Should save the changes”. ([51884](https://github.com/WordPress/gutenberg/pull/51884))
+-   Font Library: Avoid deprected error in test. ([54802](https://github.com/WordPress/gutenberg/pull/54802))
+-   Make `editor.getBlocks` to return only testing-related properties. ([54901](https://github.com/WordPress/gutenberg/pull/54901))
+-   Migrate 'Global styles sidebar' test to Playwright. ([55045](https://github.com/WordPress/gutenberg/pull/55045))
+-   Migrate 'iframed block editor settings styles' tests to Playwright. ([55014](https://github.com/WordPress/gutenberg/pull/55014))
+-   Migrate 'iframed inline styles' tests to Playwright. ([55009](https://github.com/WordPress/gutenberg/pull/55009))
+-   Migrate 'iframed masonry block' tests to Playwright. ([55016](https://github.com/WordPress/gutenberg/pull/55016))
+-   Migrate 'iframed multiple block stylesheets' tests to Playwright. ([55003](https://github.com/WordPress/gutenberg/pull/55003))
+-   Migrate keyboard-navigable-blocks end-to-end tests from puppeteer to playwright. ([54944](https://github.com/WordPress/gutenberg/pull/54944))
+-   Scripts: Properly use CommonJS for default Playwright configuration. ([54988](https://github.com/WordPress/gutenberg/pull/54988))
+-   Try fixing the flaky 'Toolbar roving tabindex' end-to-end test. ([54785](https://github.com/WordPress/gutenberg/pull/54785))
+-   end-to-end Tests: Revert temporary fixes. ([54865](https://github.com/WordPress/gutenberg/pull/54865))
+-   end-to-end Utils: Allow overriding username/password. ([53267](https://github.com/WordPress/gutenberg/pull/53267))
+
+#### Build Tooling
+
+-   Add some @types packages as proper dependencies. ([50231](https://github.com/WordPress/gutenberg/pull/50231))
+-   Update the default JSX pragma to React instead of @wordpress/element. ([54494](https://github.com/WordPress/gutenberg/pull/54494))
+-   Upgrade wp-prettier to v3.0.3 (final). ([54775](https://github.com/WordPress/gutenberg/pull/54775))
+
+### Security
+
+#### Data Layer
+
+-   Replace turbo-combine-reducers with combineReducers from Redux. ([54606](https://github.com/WordPress/gutenberg/pull/54606))
+
+### Various
+
+-   (chore) Revert the 16.7 RC2 release in order to release it again due to wrong changelog. ([54744](https://github.com/WordPress/gutenberg/pull/54744))
+
+#### Design Tools
+
+-   Background image block support: Add tests, adjust injection logic slightly. ([54489](https://github.com/WordPress/gutenberg/pull/54489))
+-   Background support: Backport fix for undefined array key. ([54850](https://github.com/WordPress/gutenberg/pull/54850))
+
+#### Typography
+
+-   Revert "Font Library: Avoid rendering font library ui outisde gutenberg plugin". ([54947](https://github.com/WordPress/gutenberg/pull/54947))
+
+#### Commands
+
+-   Make the reset styles command consistent. ([54841](https://github.com/WordPress/gutenberg/pull/54841))
+
+#### Patterns
+
+-   Use "Not synced" in place of "Standard" nomenclature for patterns. ([54839](https://github.com/WordPress/gutenberg/pull/54839))
+
+#### Block Editor
+
+-   Simplify BlockPatternsSyncFilter with clearer labels and additional context. ([54838](https://github.com/WordPress/gutenberg/pull/54838))
+
+#### Site Editor
+
+-   Use consistent capitalization for template parts in Site Editor constants. ([54709](https://github.com/WordPress/gutenberg/pull/54709))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @leemyongpakvn: Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @alexstine @andrewhayward @andrewserong @annezazu @anton-vlasenko @artemiomorales @aurooba @bangank36 @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @jameskoster @jeryj @jsnajdr @juhi123 @kevin940726 @leemyongpakvn @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mirka @mtias @mujuonly @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @priethor @ramonjd @richtabor @scruffian @SiobhyB @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @tellyworth @them-es @torounit @tyxla @westonruter @WunderBart @youknowriad
+
+= 16.7.1 =
+
+## Changelog
+
+### Tools
+
+#### Build Tooling
+
+-   Fix incorrect resource URL in source map for sources coming from @wordpress packages. ([51401](https://github.com/WordPress/gutenberg/pull/51401))
+
+### Various
+
+-   Add missing schema `type` attribute for in WP 6.4 compat's `block-hooks.php`. ([55138](https://github.com/WordPress/gutenberg/pull/55138))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine @torounit
+
+= 16.8.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Block Editor
+
+-   Adds 'nofollow' setting to Button block. ([54110](https://github.com/WordPress/gutenberg/pull/54110))
+
+#### Site Editor
+
+-   Add 'Show template' toggle when editing pages. ([52674](https://github.com/WordPress/gutenberg/pull/52674))
+
+### Enhancements
+
+-   Update pattern import menu item. ([54782](https://github.com/WordPress/gutenberg/pull/54782))
+
+#### Components
+
+-   Adding label/description to `BlockEditor/DuotoneControl`. ([54473](https://github.com/WordPress/gutenberg/pull/54473))
+-   Deprecating `isPressed` in `Button` component. ([54740](https://github.com/WordPress/gutenberg/pull/54740))
+-   Follow ariakit best practices. ([54696](https://github.com/WordPress/gutenberg/pull/54696))
+-   InputControl-based components: Add opt-in prop for next 40px default size. ([53819](https://github.com/WordPress/gutenberg/pull/53819))
+-   Modal: Add `contentWidth` prop to support a selection of preset modal sizes. ([54471](https://github.com/WordPress/gutenberg/pull/54471))
+-   Remove unused components from `ui/`. ([54573](https://github.com/WordPress/gutenberg/pull/54573))
+-   Update ariakit to 0.3.3. ([54818](https://github.com/WordPress/gutenberg/pull/54818))
+-   Update compact search control metrics. ([54663](https://github.com/WordPress/gutenberg/pull/54663))
+-   Wrapped `TextareaControl` in a `forwardRef` call. ([54975](https://github.com/WordPress/gutenberg/pull/54975))
+
+#### Block Library
+
+-   Add a brief description to the Footnotes block. ([54613](https://github.com/WordPress/gutenberg/pull/54613))
+-   Footnotes: Use core’s meta revisioning if available. ([52988](https://github.com/WordPress/gutenberg/pull/52988))
+-   Login/out: Add spacing support. ([45147](https://github.com/WordPress/gutenberg/pull/45147))
+-   Query view.js: Code quality. ([54982](https://github.com/WordPress/gutenberg/pull/54982))
+-   Set custom color when applying initial background image. ([54054](https://github.com/WordPress/gutenberg/pull/54054))
+-   Use `wp_get_inline_script_tag()` in `build_dropdown_script_block_core_categories()`. ([54637](https://github.com/WordPress/gutenberg/pull/54637))
+
+#### Block Editor
+
+-   Default suggested links to pages. ([54622](https://github.com/WordPress/gutenberg/pull/54622))
+-   Remove base URL from link control search results. ([54553](https://github.com/WordPress/gutenberg/pull/54553))
+-   Simplify `BlockHTMLConvertButton`. ([54972](https://github.com/WordPress/gutenberg/pull/54972))
+-   Update strings in blocks 'RenameModal' component. ([54887](https://github.com/WordPress/gutenberg/pull/54887))
+
+#### Post Editor
+
+-   Edit Post: Use hooks instead of HoCs in 'PostStatus' components. ([54951](https://github.com/WordPress/gutenberg/pull/54951))
+-   Editor: Use hooks instead of HoCs in 'PostSticky' components. ([54949](https://github.com/WordPress/gutenberg/pull/54949))
+-   Editor: Use hooks instead of HoCs in 'PostSwitchToDraftButton'. ([54695](https://github.com/WordPress/gutenberg/pull/54695))
+-   Show confirmation dialog when moving a post to the trash. ([50219](https://github.com/WordPress/gutenberg/pull/50219))
+
+#### Site Editor
+
+-   Add template replace flow to template inspector. ([54609](https://github.com/WordPress/gutenberg/pull/54609))
+-   [Site Editor]: Update copy of using the default template in a page. ([54728](https://github.com/WordPress/gutenberg/pull/54728))
+
+#### Patterns
+
+-   Remove category description in inserter panel. ([54894](https://github.com/WordPress/gutenberg/pull/54894))
+
+#### Typography
+
+-   Font Library: Refactor endpoint permissions. ([54829](https://github.com/WordPress/gutenberg/pull/54829))
+
+### Bug Fixes
+
+-   Fix the ShortcutProvider usage. ([54851](https://github.com/WordPress/gutenberg/pull/54851))
+-   Fix warning when a template calls a template area twice. ([54861](https://github.com/WordPress/gutenberg/pull/54861))
+-   Revert "Fix warning when a template calls a template area twice". ([54926](https://github.com/WordPress/gutenberg/pull/54926))
+
+#### Block Library
+
+-   All Nav block items to break long titles. ([54866](https://github.com/WordPress/gutenberg/pull/54866))
+-   Fallback to Twitter provider when embedding X URLs. ([54876](https://github.com/WordPress/gutenberg/pull/54876))
+-   Fix Deleted Navigation Menu warning string. ([55033](https://github.com/WordPress/gutenberg/pull/55033))
+-   Fix Search Block not updating in Nav block. ([54823](https://github.com/WordPress/gutenberg/pull/54823))
+-   Fix left and right aligmnent in children of Post Template. ([54997](https://github.com/WordPress/gutenberg/pull/54997))
+-   Fix output of Navigation block classnames in the editor. ([54992](https://github.com/WordPress/gutenberg/pull/54992))
+-   Fix overwriting of published post meta when previewing footnote changes. ([54339](https://github.com/WordPress/gutenberg/pull/54339))
+-   Image: Ensure Expand on Click toggle is shown if block-level lightbox setting exists. ([54878](https://github.com/WordPress/gutenberg/pull/54878))
+-   Image: Fix layout shift when lightbox is opened and closed. ([53026](https://github.com/WordPress/gutenberg/pull/53026))
+-   Media & Text: Fix React warning. ([55038](https://github.com/WordPress/gutenberg/pull/55038))
+-   Search block: Allow space for input field only when form expanded. ([54846](https://github.com/WordPress/gutenberg/pull/54846))
+-   Search block: Update alignment and icon button width. ([54773](https://github.com/WordPress/gutenberg/pull/54773))
+
+#### Site Editor
+
+-   Avoid same key warnings in template parts area listings. ([54863](https://github.com/WordPress/gutenberg/pull/54863))
+-   Avoid stale navigation block values when parsing entity record. ([54996](https://github.com/WordPress/gutenberg/pull/54996))
+-   Don't display the navigation section in template parts details when a menu is missing. ([54993](https://github.com/WordPress/gutenberg/pull/54993))
+-   Fix ToolSelector popover variant. ([54840](https://github.com/WordPress/gutenberg/pull/54840))
+-   Reset 'Show template' toggle when leaving edit mode. ([54679](https://github.com/WordPress/gutenberg/pull/54679))
+-   remove `overflow: Hidden` from the entity title in the site editor sidebar. ([54769](https://github.com/WordPress/gutenberg/pull/54769))
+
+#### Components
+
+-   FormTokenField: Add `box-sizing` reset style and reset default padding. ([54734](https://github.com/WordPress/gutenberg/pull/54734))
+-   Popover: Fix the styles for components that use emotion within popovers. ([54912](https://github.com/WordPress/gutenberg/pull/54912))
+-   Remove hover style for secondary Button when aria-disabled is set. ([54978](https://github.com/WordPress/gutenberg/pull/54978))
+-   Reverting addition of `aria-selected` style hook in `Button`. ([54931](https://github.com/WordPress/gutenberg/pull/54931))
+-   `SlotFill`: Pass `Component` instance to unregisterSlot. ([54765](https://github.com/WordPress/gutenberg/pull/54765))
+
+#### Block Editor
+
+-   Avoid double-wrapping selectors when transforming the styles. ([54981](https://github.com/WordPress/gutenberg/pull/54981))
+-   [Inserter]: Fix reset of registered media categories. ([55012](https://github.com/WordPress/gutenberg/pull/55012))
+
+#### Typography
+
+-   Font Library: Changed the OTF mime type expected value to be what PHP returns. ([54886](https://github.com/WordPress/gutenberg/pull/54886))
+-   Font Library: Move font uploads to a new tab. ([54655](https://github.com/WordPress/gutenberg/pull/54655))
+
+#### Global Styles
+
+-   Block custom CSS: Fix incorrect CSS when multiple root selectors. ([53602](https://github.com/WordPress/gutenberg/pull/53602))
+-   Image: Ensure `false` values are preserved in memory when defined in `theme.json`. ([54639](https://github.com/WordPress/gutenberg/pull/54639))
+
+#### List View
+
+-   Fix performance issue when selecting all blocks. ([54900](https://github.com/WordPress/gutenberg/pull/54900))
+
+#### Colors
+
+-   Format Library: Try to fix highlight popover jumping. ([54736](https://github.com/WordPress/gutenberg/pull/54736))
+
+#### Interactivity API
+
+-   Image: Fix duotone not being applied to lightbox image. ([54670](https://github.com/WordPress/gutenberg/pull/54670))
+
+### Accessibility
+
+#### Block Library
+
+-   Footnotes: Add aria-label to return links. ([54843](https://github.com/WordPress/gutenberg/pull/54843))
+-   Table of contents block accessibility improvements. ([54322](https://github.com/WordPress/gutenberg/pull/54322))
+
+#### Components
+
+-   HTML block: Fix accessibility issues on back-end. ([54408](https://github.com/WordPress/gutenberg/pull/54408))
+-   `Modal`: Accessibly hide/show outer modal when nested. ([54743](https://github.com/WordPress/gutenberg/pull/54743))
+
+#### Patterns
+
+-   Use list role instead of listbox in patterns list. ([54884](https://github.com/WordPress/gutenberg/pull/54884))
+
+#### Post Editor
+
+-   Editor: Always render the 'Switch to Draft' button to avoid focus loss. ([54722](https://github.com/WordPress/gutenberg/pull/54722))
+
+#### Block Editor
+
+-   Block Switcher: Use a different label for multi-selection. ([54692](https://github.com/WordPress/gutenberg/pull/54692))
+
+### Performance
+
+-   Tests: Support the Site Editor's legacy spinner. ([54784](https://github.com/WordPress/gutenberg/pull/54784))
+-   Use instanceOf over property_exists. ([54835](https://github.com/WordPress/gutenberg/pull/54835))
+
+#### Block Editor
+
+-   Subscribe only to block editor store in `useBlockSync`. ([55041](https://github.com/WordPress/gutenberg/pull/55041))
+
+### Experiments
+
+#### Site Editor
+
+-   al]: First version of pages list in site editor. ([54966](https://github.com/WordPress/gutenberg/pull/54966))
+
+#### Block Editor
+
+-   Expose `getDuotoneFilter()` as private API. ([54905](https://github.com/WordPress/gutenberg/pull/54905))
+
+### Documentation
+
+-   Add a documentation page about the block editor settings. ([54870](https://github.com/WordPress/gutenberg/pull/54870))
+-   Add a page about the format library to the platform documentation site. ([55037](https://github.com/WordPress/gutenberg/pull/55037))
+-   Docs: Add a callout to the `wp-now` documentation to mention it's still experimental. ([55044](https://github.com/WordPress/gutenberg/pull/55044))
+-   Docs: Remove outdated info. ([54707](https://github.com/WordPress/gutenberg/pull/54707))
+-   Docs: Remove the Full Site Editing doc. ([54516](https://github.com/WordPress/gutenberg/pull/54516))
+-   Docs: Rename Block Hooks handbook page to Block Filters. ([54862](https://github.com/WordPress/gutenberg/pull/54862))
+-   Document the current state of the Real-Time collaboration experiment. ([54932](https://github.com/WordPress/gutenberg/pull/54932))
+-   Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
+-   Platform Docs: Add a documentation page explaining how to use the block library. ([54967](https://github.com/WordPress/gutenberg/pull/54967))
+-   Update the documentation of the block editor and replace @wordpress/element with react. ([54908](https://github.com/WordPress/gutenberg/pull/54908))
+-   Update versions in WP for 6.4. ([54890](https://github.com/WordPress/gutenberg/pull/54890))
+
+### Code Quality
+
+-   Add a unit test for the "ValidBlockLibraryFunctionNameSniff" sniff. ([53928](https://github.com/WordPress/gutenberg/pull/53928))
+-   Move dependencies to the right place. ([54597](https://github.com/WordPress/gutenberg/pull/54597))
+-   Move mime-type collection generation to a function that can be tested…. ([54844](https://github.com/WordPress/gutenberg/pull/54844))
+-   Post Title block should use esc_url(). ([53981](https://github.com/WordPress/gutenberg/pull/53981))
+-   Rich text: Use getPasteEventData. ([55048](https://github.com/WordPress/gutenberg/pull/55048))
+-   Writing flow: Absorb clipboard handler. ([55006](https://github.com/WordPress/gutenberg/pull/55006))
+
+#### Block Library
+
+-   Footnotes: Avoid regexes in entity provider. ([54505](https://github.com/WordPress/gutenberg/pull/54505))
+-   Image Block: Fix browser console error when clicking "Expand on Click". ([54938](https://github.com/WordPress/gutenberg/pull/54938))
+-   Removed unwanted space from the string. ([54654](https://github.com/WordPress/gutenberg/pull/54654))
+-   Update CODEOWNERS for `core/image` block. ([54793](https://github.com/WordPress/gutenberg/pull/54793))
+
+#### Patterns
+
+-   Add a new spec for for adding an unsynced pattern. ([54892](https://github.com/WordPress/gutenberg/pull/54892))
+-   Add end-to-end tests for filtering and searching patterns. ([54906](https://github.com/WordPress/gutenberg/pull/54906))
+-   Add new end-to-end test for creating a pattern. ([54855](https://github.com/WordPress/gutenberg/pull/54855))
+-   Include pattern category in main end-to-end critical path test. ([54923](https://github.com/WordPress/gutenberg/pull/54923))
+
+#### Components
+
+-   Consolidate utils to remove `ui/`. ([54922](https://github.com/WordPress/gutenberg/pull/54922))
+-   Move `ContextSystemProvider` out of `/ui`. ([54847](https://github.com/WordPress/gutenberg/pull/54847))
+-   SlotFill: Migrate to Typescript. ([51350](https://github.com/WordPress/gutenberg/pull/51350))
+-   Tidying `CircularOptionPicker.Option`. ([54903](https://github.com/WordPress/gutenberg/pull/54903))
+
+#### Typography
+
+-   Font Library: Syntax refactor repace strpos with str_contains. ([54832](https://github.com/WordPress/gutenberg/pull/54832))
+-   Font Library: Use snake_case instead of camelCase on fontFamilies endpoint param. ([54977](https://github.com/WordPress/gutenberg/pull/54977))
+
+#### Block Editor
+
+-   Rich text: Avoid shortcode logic, adjust paste handler instead. ([55052](https://github.com/WordPress/gutenberg/pull/55052))
+
+#### Plugin
+
+-   Remove legacy logic for '\_\_unstableResolvedAssets' setting. ([54812](https://github.com/WordPress/gutenberg/pull/54812))
+
+#### Data Layer
+
+-   createResolversCacheMiddleware: Remove dependency on core/data store. ([54733](https://github.com/WordPress/gutenberg/pull/54733))
+
+#### Site Editor
+
+-   Use constants rather than hard coded template strings (round 3). ([54705](https://github.com/WordPress/gutenberg/pull/54705))
+
+### Tools
+
+-   Label enforcer workflow: Make accessibility a focus instead of a type. ([54941](https://github.com/WordPress/gutenberg/pull/54941))
+-   Scripts: Update webpack and related dependencies to the latest version. ([54657](https://github.com/WordPress/gutenberg/pull/54657))
+-   Update changelog automation and test fixtures to match the last a11y label renaming. ([54974](https://github.com/WordPress/gutenberg/pull/54974))
+
+#### Testing
+
+-   Don’t use TypeScript files in scripts package. ([54856](https://github.com/WordPress/gutenberg/pull/54856))
+-   ESLint: Update eslint-plugin-testing-library to v6. ([54910](https://github.com/WordPress/gutenberg/pull/54910))
+-   Fix end-to-end test: ”WP Editor Meta Boxes > Should save the changes”. ([51884](https://github.com/WordPress/gutenberg/pull/51884))
+-   Font Library: Avoid deprected error in test. ([54802](https://github.com/WordPress/gutenberg/pull/54802))
+-   Make `editor.getBlocks` to return only testing-related properties. ([54901](https://github.com/WordPress/gutenberg/pull/54901))
+-   Migrate 'Global styles sidebar' test to Playwright. ([55045](https://github.com/WordPress/gutenberg/pull/55045))
+-   Migrate 'iframed block editor settings styles' tests to Playwright. ([55014](https://github.com/WordPress/gutenberg/pull/55014))
+-   Migrate 'iframed inline styles' tests to Playwright. ([55009](https://github.com/WordPress/gutenberg/pull/55009))
+-   Migrate 'iframed masonry block' tests to Playwright. ([55016](https://github.com/WordPress/gutenberg/pull/55016))
+-   Migrate 'iframed multiple block stylesheets' tests to Playwright. ([55003](https://github.com/WordPress/gutenberg/pull/55003))
+-   Migrate keyboard-navigable-blocks end-to-end tests from puppeteer to playwright. ([54944](https://github.com/WordPress/gutenberg/pull/54944))
+-   Scripts: Properly use CommonJS for default Playwright configuration. ([54988](https://github.com/WordPress/gutenberg/pull/54988))
+-   Try fixing the flaky 'Toolbar roving tabindex' end-to-end test. ([54785](https://github.com/WordPress/gutenberg/pull/54785))
+-   end-to-end Tests: Revert temporary fixes. ([54865](https://github.com/WordPress/gutenberg/pull/54865))
+-   end-to-end Utils: Allow overriding username/password. ([53267](https://github.com/WordPress/gutenberg/pull/53267))
+
+#### Build Tooling
+
+-   Add some @types packages as proper dependencies. ([50231](https://github.com/WordPress/gutenberg/pull/50231))
+-   Update the default JSX pragma to React instead of @wordpress/element. ([54494](https://github.com/WordPress/gutenberg/pull/54494))
+-   Upgrade wp-prettier to v3.0.3 (final). ([54775](https://github.com/WordPress/gutenberg/pull/54775))
+
+### Security
+
+#### Data Layer
+
+-   Replace turbo-combine-reducers with combineReducers from Redux. ([54606](https://github.com/WordPress/gutenberg/pull/54606))
+
+### Various
+
+-   (chore) Revert the 16.7 RC2 release in order to release it again due to wrong changelog. ([54744](https://github.com/WordPress/gutenberg/pull/54744))
+
+#### Design Tools
+
+-   Background image block support: Add tests, adjust injection logic slightly. ([54489](https://github.com/WordPress/gutenberg/pull/54489))
+-   Background support: Backport fix for undefined array key. ([54850](https://github.com/WordPress/gutenberg/pull/54850))
+
+#### Typography
+
+-   Revert "Font Library: Avoid rendering font library ui outisde gutenberg plugin". ([54947](https://github.com/WordPress/gutenberg/pull/54947))
+
+#### Commands
+
+-   Make the reset styles command consistent. ([54841](https://github.com/WordPress/gutenberg/pull/54841))
+
+#### Patterns
+
+-   Use "Not synced" in place of "Standard" nomenclature for patterns. ([54839](https://github.com/WordPress/gutenberg/pull/54839))
+
+#### Block Editor
+
+-   Simplify BlockPatternsSyncFilter with clearer labels and additional context. ([54838](https://github.com/WordPress/gutenberg/pull/54838))
+
+#### Site Editor
+
+-   Use consistent capitalization for template parts in Site Editor constants. ([54709](https://github.com/WordPress/gutenberg/pull/54709))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @leemyongpakvn: Fix a broken MD link in callout. ([54772](https://github.com/WordPress/gutenberg/pull/54772))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamsilverstein @alexstine @andrewhayward @andrewserong @annezazu @anton-vlasenko @artemiomorales @aurooba @bangank36 @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @jameskoster @jeryj @jsnajdr @juhi123 @kevin940726 @leemyongpakvn @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @michalczaplinski @mirka @mtias @mujuonly @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @pbking @priethor @ramonjd @richtabor @scruffian @SiobhyB @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @tellyworth @them-es @torounit @tyxla @westonruter @WunderBart @youknowriad
+
+= 16.7.0 =
+
+## Changelog
+
+### Features
+
+#### Block Library
+
+-   Social Links: Add X. ([54092](https://github.com/WordPress/gutenberg/pull/54092))
+
+#### Typography
+
+Font Library:
+
+-   Add mime type validation for font uploads. ([53986](https://github.com/WordPress/gutenberg/pull/53986))
+-   Font Collection backend. ([54098](https://github.com/WordPress/gutenberg/pull/54098))
+-   Frontend [Stage 1]. ([53884](https://github.com/WordPress/gutenberg/pull/53884))
+-   Font Collections frontend. ([54566](https://github.com/WordPress/gutenberg/pull/54566))
+
+#### Patterns
+
+-   Allow import/export patterns as JSON files. ([54337](https://github.com/WordPress/gutenberg/pull/54337))
+
+#### Block Editor
+
+-   Adds 'nofollow' setting to inline links (rich text only). ([53945](https://github.com/WordPress/gutenberg/pull/53945))
+-   Rename Group blocks in the Editor via Modal. ([53735](https://github.com/WordPress/gutenberg/pull/53735))
+
+### Enhancements
+
+#### Core Data
+
+-   Add edits data to the useEntityRecord. ([54167](https://github.com/WordPress/gutenberg/pull/54167))
+
+#### Components
+
+-   Add non-listbox functionality back to `CircularOptionPicker`. ([54290](https://github.com/WordPress/gutenberg/pull/54290))
+-   Added missing "middle" allowed tooltip position. ([52147](https://github.com/WordPress/gutenberg/pull/52147))
+-   BlockSettingsMenu: Ensure only one block settings menu is open at a time. ([54083](https://github.com/WordPress/gutenberg/pull/54083))
+-   Bundle the block copy handler within the BlockCanvas component. ([54207](https://github.com/WordPress/gutenberg/pull/54207))
+-   Bundle the block selection clearer hook into the BlockCanvas component. ([54209](https://github.com/WordPress/gutenberg/pull/54209))
+-   Ensure that 'Duotone Filter' color pickers have relevant labels. ([54468](https://github.com/WordPress/gutenberg/pull/54468))
+-   Export ProgressBar to allow it to be used. ([54404](https://github.com/WordPress/gutenberg/pull/54404))
+-   FormTokenField - add prop to allow saving of tokens onBlur. ([53976](https://github.com/WordPress/gutenberg/pull/53976))
+-   Refactoring `BorderControl`'s unit tests. ([54155](https://github.com/WordPress/gutenberg/pull/54155))
+-   Remove unnecessary padding-right on the dismissible notice. ([52240](https://github.com/WordPress/gutenberg/pull/52240))
+-   Support controlling open/closed state for Dropdown and DropdownMenu. ([54257](https://github.com/WordPress/gutenberg/pull/54257))
+-   ToggleGroupControl: Rewrite backdrop animation with framer motion shared layout animations. ([50278](https://github.com/WordPress/gutenberg/pull/50278))
+-   ToolTip: Refactor using ariakit. ([48440](https://github.com/WordPress/gutenberg/pull/48440))
+-   Tooltip: Add `placement` prop to replace deprecated `position`. ([54264](https://github.com/WordPress/gutenberg/pull/54264))
+-   Tooltip: Add new `hideOnClick` prop. ([54406](https://github.com/WordPress/gutenberg/pull/54406))
+-   Tweak border control button to proper metrics and simpler action. ([53998](https://github.com/WordPress/gutenberg/pull/53998))
+-   Update FormTokenField styling for consistency and visibility. ([54402](https://github.com/WordPress/gutenberg/pull/54402))
+-   Update spacing sizes control metrics and icons. ([54470](https://github.com/WordPress/gutenberg/pull/54470))
+-   Update/form token field onblur. ([54445](https://github.com/WordPress/gutenberg/pull/54445))
+-   `Popover`: Update `positionToPlacement` types. ([54101](https://github.com/WordPress/gutenberg/pull/54101))
+-   `SearchControl`: Allow for 32px compact size, introduce option to change default size to 40px. ([54548](https://github.com/WordPress/gutenberg/pull/54548))
+
+#### Block Library
+
+-   #39457: Image block keep image size on replacing image. ([49982](https://github.com/WordPress/gutenberg/pull/49982))
+-   Add \_\_next40pxDefaultSize to featured image opacity control. ([54389](https://github.com/WordPress/gutenberg/pull/54389))
+-   Add aspect ratio to image placeholder. ([54216](https://github.com/WordPress/gutenberg/pull/54216))
+-   Allow using a button element for button blocks. ([54206](https://github.com/WordPress/gutenberg/pull/54206))
+-   Buttons Block: Show inserter if button have variations (#53498). ([53783](https://github.com/WordPress/gutenberg/pull/53783))
+-   Change dialogdescription for renaming group block. ([54358](https://github.com/WordPress/gutenberg/pull/54358))
+-   Footnotes: Add missing placeholder instructions text. ([54056](https://github.com/WordPress/gutenberg/pull/54056))
+-   Heading block: Add support for writingMode. ([54351](https://github.com/WordPress/gutenberg/pull/54351))
+-   Improved description for the post-terms core block. ([47715](https://github.com/WordPress/gutenberg/pull/47715))
+-   Make matrix position behave like valign. ([54050](https://github.com/WordPress/gutenberg/pull/54050))
+-   Navigation block: Add `core/buttons` to the allowed blocks. ([53966](https://github.com/WordPress/gutenberg/pull/53966))
+-   Remove unused prop from GroupPlaceHolder component. ([51493](https://github.com/WordPress/gutenberg/pull/51493))
+-   Template parts: Use the template actions component for template parts patterns. ([54173](https://github.com/WordPress/gutenberg/pull/54173))
+-   Text orientation: Rotate vertical text when the text is aligned (Upside down text). ([53175](https://github.com/WordPress/gutenberg/pull/53175))
+-   Update parent labels in page attributes panel and page list block. ([54403](https://github.com/WordPress/gutenberg/pull/54403))
+-   Use \_\_next40pxDefaultSize on more UI. ([54400](https://github.com/WordPress/gutenberg/pull/54400))
+
+#### Interactivity API
+
+-   Add `timeout` option to `navigate()`. ([54474](https://github.com/WordPress/gutenberg/pull/54474))
+-   Add manual Server Side Rendering (SSR) to the Interactivity API blocks. ([54343](https://github.com/WordPress/gutenberg/pull/54343))
+-   Ensure that the view scripts of core blocks have the `wp-interactivity` dependency. ([54594](https://github.com/WordPress/gutenberg/pull/54594))
+-   Image block: Revise lightbox UI to remove 'behaviors'. ([53851](https://github.com/WordPress/gutenberg/pull/53851))
+-   Image block: UI updates for the image lightbox (redo). ([54509](https://github.com/WordPress/gutenberg/pull/54509))
+-   Override unfinished `navigate` calls. ([54201](https://github.com/WordPress/gutenberg/pull/54201))
+-   Query Loop: Add design enhancements for the "enhanced pagination" setting. ([54455](https://github.com/WordPress/gutenberg/pull/54455))
+-   Query Loop: Allow "enhanced pagination" only with core blocks. ([54347](https://github.com/WordPress/gutenberg/pull/54347))
+-   Query block: Start prefetching on first click to next/previous. ([54781](https://github.com/WordPress/gutenberg/pull/54781))
+
+#### Patterns
+
+-   Add categories to user patterns, and allow filtering by these in site and post editor. ([53835](https://github.com/WordPress/gutenberg/pull/53835))
+-   Add editing of pattern categories to site editor. ([54640](https://github.com/WordPress/gutenberg/pull/54640))
+-   Add user categories to site editor sidebar navigation screen. ([53837](https://github.com/WordPress/gutenberg/pull/53837))
+-   Add user pattern categories to post editor inserter patterns tab. ([53933](https://github.com/WordPress/gutenberg/pull/53933))
+-   Apply white background to the preview as a fallback. ([54534](https://github.com/WordPress/gutenberg/pull/54534))
+-   Merge unsynced into inserter patterns tab and add paging and filtering. ([54007](https://github.com/WordPress/gutenberg/pull/54007))
+-   Update empty template part label. ([53842](https://github.com/WordPress/gutenberg/pull/53842))
+-   Memoize `useSelect` for `usePatterns`. ([54588](https://github.com/WordPress/gutenberg/pull/54588))
+-   Site Editor: Prevent unintended actions on the classic theme. ([54422](https://github.com/WordPress/gutenberg/pull/54422))
+
+#### Design Tools
+
+-   Add back tooltip to styles UI. ([54574](https://github.com/WordPress/gutenberg/pull/54574))
+-   Add block gap to Post Content block. ([54282](https://github.com/WordPress/gutenberg/pull/54282))
+-   Add block instance elements support for buttons and headings. ([53667](https://github.com/WordPress/gutenberg/pull/53667))
+-   Background Image block support: Add reset menu item. ([54341](https://github.com/WordPress/gutenberg/pull/54341))
+-   Block Supports: Add background image support to Group block. ([53934](https://github.com/WordPress/gutenberg/pull/53934))
+-   Columns: Adopt button and heading element colors. ([54104](https://github.com/WordPress/gutenberg/pull/54104))
+-   Update block styles UI. ([54446](https://github.com/WordPress/gutenberg/pull/54446))
+-   Improve background image control. ([54439](https://github.com/WordPress/gutenberg/pull/54439))
+
+#### Site Editor
+
+-   Copy: End the Templates page description in the Site Editor with a period. ([54221](https://github.com/WordPress/gutenberg/pull/54221))
+-   Edit Site: Update progress bar to determinate. ([53399](https://github.com/WordPress/gutenberg/pull/53399))
+-   Follow up visual tweaks to block-specific commands. ([54427](https://github.com/WordPress/gutenberg/pull/54427))
+-   Site editor sidebar: Abstracting footer so it can be used across details screens. ([54082](https://github.com/WordPress/gutenberg/pull/54082))
+-   [Page Inspector]: Add ability to switch templates. ([51477](https://github.com/WordPress/gutenberg/pull/51477))
+
+#### Global Styles
+
+-   Rename `settings` & `userSettings` props to `value` & `inheritedValue` respectively in ImageSettingsPanel. ([54593](https://github.com/WordPress/gutenberg/pull/54593))
+-   Update Block specific CSS label to include additional instructions. ([49626](https://github.com/WordPress/gutenberg/pull/49626))
+
+#### Block Editor
+
+-   Use gray color on link control advanced toggle. ([54545](https://github.com/WordPress/gutenberg/pull/54545))
+-   Verse: Exit on triple Enter. ([53332](https://github.com/WordPress/gutenberg/pull/53332))
+-   Block editor: hooks: Fix rules of hooks violations (2). ([48943](https://github.com/WordPress/gutenberg/pull/48943))
+-   Always show the total number of patterns even with only one page. ([54813](https://github.com/WordPress/gutenberg/pull/54813))
+
+#### Typography
+
+-   Font Face: Backport from Core changeset 56500. ([54218](https://github.com/WordPress/gutenberg/pull/54218))
+-   Font Library: Changing the upload directory to wp-content/fonts. ([54122](https://github.com/WordPress/gutenberg/pull/54122))
+-   Font Library: Load collection JSON data from a URL in the collection configuration. ([54067](https://github.com/WordPress/gutenberg/pull/54067))
+-   Font Library: Use wporg cdn to host the google fonts json data. ([54795](https://github.com/WordPress/gutenberg/pull/54795))
+
+#### Themes
+
+-   Theme Previews: Make the back button customizable. ([54242](https://github.com/WordPress/gutenberg/pull/54242))
+
+#### Plugin
+
+-   Remove 'Footnotes' and 'Comments' from the non-dynamic block registration list. ([54154](https://github.com/WordPress/gutenberg/pull/54154))
+
+#### Media
+
+-   Correct function name handleFileChange is replaced by wrong function name. ([52250](https://github.com/WordPress/gutenberg/pull/52250))
+
+#### List View
+
+-   Allow Escape key to deselect blocks if blocks are selected. ([48708](https://github.com/WordPress/gutenberg/pull/48708))
+-   Try directing focus to the list view toggle button when closing the list view. ([54175](https://github.com/WordPress/gutenberg/pull/54175))
+
+#### Block API
+
+-   Deprecated `get_file_path_from_theme` method. ([45831](https://github.com/WordPress/gutenberg/pull/45831))
+
+#### Keyboard Shortcuts
+
+-   Make the shortcuts provider optional. ([54080](https://github.com/WordPress/gutenberg/pull/54080))
+
+#### Blob
+
+-   refactor(blob): Type URL parameter as optional. ([49201](https://github.com/WordPress/gutenberg/pull/49201))
+
+#### Collaborative Editing
+
+-   Try bundling sync package. ([54738](https://github.com/WordPress/gutenberg/pull/54738))
+
+### New APIs
+
+#### Components
+
+-   Revert "Export ProgressBar to allow it to be used". ([54428](https://github.com/WordPress/gutenberg/pull/54428))
+
+#### Block API
+
+-   Stabilize Block Hooks feature. ([54293](https://github.com/WordPress/gutenberg/pull/54293))
+
+#### Data Layer
+
+-   Data: Introduce `countSelectorsByStatus` redux metadata selector. ([53767](https://github.com/WordPress/gutenberg/pull/53767))
+
+#### Framework
+
+-   Add useStateWithHistory hook and use to show a block editor with undo/redo. ([54377](https://github.com/WordPress/gutenberg/pull/54377))
+-   BlockEditor: Add BlockCanvas component = Iframe + BlockList + WritingFlow. ([54149](https://github.com/WordPress/gutenberg/pull/54149))
+-   Extract undo/redo as a separate package. ([54292](https://github.com/WordPress/gutenberg/pull/54292))
+
+### Bug Fixes
+
+#### Components
+
+-   Add children back to toolbar item render for rendered components. ([53314](https://github.com/WordPress/gutenberg/pull/53314))
+-   Add missing useState import in Border Control documentation. ([49476](https://github.com/WordPress/gutenberg/pull/49476))
+-   Adjust input-style\_\_focus mixin to proper focus size. ([54398](https://github.com/WordPress/gutenberg/pull/54398))
+-   DropdownMenu v2: Fix submenu chevron direction in RTL languages. ([54036](https://github.com/WordPress/gutenberg/pull/54036))
+-   Fix incorrect focus style size on InputControl. ([54394](https://github.com/WordPress/gutenberg/pull/54394))
+-   Make `CircularOptionPicker` focus styles resilient to button size changes. ([54196](https://github.com/WordPress/gutenberg/pull/54196))
+-   PaletteEdit: Fix padding in RTL mode. ([54034](https://github.com/WordPress/gutenberg/pull/54034))
+-   Popover: Set is-positioned class only after animation has finished. ([54178](https://github.com/WordPress/gutenberg/pull/54178))
+-   Storybook: Restore previous URL for the introduction documentation page. ([54247](https://github.com/WordPress/gutenberg/pull/54247))
+-   Storybook: Update doc param values for ConfirmDialog. ([54130](https://github.com/WordPress/gutenberg/pull/54130))
+-   Update borderFocus to ADMIN.theme. ([54425](https://github.com/WordPress/gutenberg/pull/54425))
+-   Use standard focus style on BorderControl. ([54429](https://github.com/WordPress/gutenberg/pull/54429))
+-   DateTimePicker: Fix onChange callback check so that it also works inside iframes. ([54669](https://github.com/WordPress/gutenberg/pull/54669))
+
+#### Post Editor
+
+-   Adds animation state for DFM off to post editor header. ([54244](https://github.com/WordPress/gutenberg/pull/54244))
+-   Block Editor: Memoize the createPageEntity callback. ([54580](https://github.com/WordPress/gutenberg/pull/54580))
+-   Edit Post: Avoid fetching the edited template for non-viewable posts. ([54158](https://github.com/WordPress/gutenberg/pull/54158))
+-   Editor: Catch errors when creating terms. ([53369](https://github.com/WordPress/gutenberg/pull/53369))
+-   Fix layout when post content is root block. ([54485](https://github.com/WordPress/gutenberg/pull/54485))
+-   Make order of pinned items consistent. ([53908](https://github.com/WordPress/gutenberg/pull/53908))
+-   Prevent the list view shortcut from typing unexpected characters. ([54078](https://github.com/WordPress/gutenberg/pull/54078))
+-   Top Toolbar: Prevent the focus outline of the button from being cut off. ([54172](https://github.com/WordPress/gutenberg/pull/54172))
+-   Try using fallback layout instead of default in post editor. ([54371](https://github.com/WordPress/gutenberg/pull/54371))
+-   [Edit Post]: Toggle Distraction free mode mode based on compatibility. ([54073](https://github.com/WordPress/gutenberg/pull/54073))
+
+#### Block Library
+
+-   Block Moving Mode: Prevent the block from being moved into itself. ([54137](https://github.com/WordPress/gutenberg/pull/54137))
+-   Fix navigation block submenu focus when closing menu with the ESC key. ([54299](https://github.com/WordPress/gutenberg/pull/54299))
+-   List Block: Fix numbering style to be applied correctly. ([53301](https://github.com/WordPress/gutenberg/pull/53301))
+-   Navigation Link: Restore tooltip. ([54263](https://github.com/WordPress/gutenberg/pull/54263))
+-   Post navigation link: Fix the writing mode setting on the front. ([54053](https://github.com/WordPress/gutenberg/pull/54053))
+-   PreviewOptions: Fix critical error when children not passed. ([54284](https://github.com/WordPress/gutenberg/pull/54284))
+-   Remove `role` attribute when set to `null` in `data-wp-bind`. ([54608](https://github.com/WordPress/gutenberg/pull/54608))
+-   [Commands]: Add group/ungroup commands only when eligible. ([53988](https://github.com/WordPress/gutenberg/pull/53988))
+-   Replace the `gutenberg_` prefix with `wp_` in image block. ([54678](https://github.com/WordPress/gutenberg/pull/54678))
+-   Navigation block: Fix padding on mobile overlay when global padding is 0. ([53725](https://github.com/WordPress/gutenberg/pull/53725))
+
+#### Patterns
+
+-   Command Palette: Fix duplicate Patterns command. ([54133](https://github.com/WordPress/gutenberg/pull/54133))
+-   Don't output root padding when editing patterns. ([54373](https://github.com/WordPress/gutenberg/pull/54373))
+-   Fix user pattern categories in site editor inserter. ([54641](https://github.com/WordPress/gutenberg/pull/54641))
+-   Remove pattern category as a variation for post terms block. ([54532](https://github.com/WordPress/gutenberg/pull/54532))
+-   StartPageOptions: Improve conditions to show modal only on a brand new page. ([54245](https://github.com/WordPress/gutenberg/pull/54245))
+-   Add My patterns back to post editor inserter categories. ([54767](https://github.com/WordPress/gutenberg/pull/54767))
+-   De-emphasise pattern filters in inserter. ([54681](https://github.com/WordPress/gutenberg/pull/54681))
+-   Fix All Patterns category default display. ([54721](https://github.com/WordPress/gutenberg/pull/54721))
+-   Fix bug with new categories not showing. ([54768](https://github.com/WordPress/gutenberg/pull/54768))
+-   Fix bug with pattern categories not saving sometimes. ([54676](https://github.com/WordPress/gutenberg/pull/54676))
+-   Fix category type for back link. ([54753](https://github.com/WordPress/gutenberg/pull/54753))
+-   Fix duplication of uncategorized patterns. ([54755](https://github.com/WordPress/gutenberg/pull/54755))
+-   Inject the theme name into the block attributes. ([54595](https://github.com/WordPress/gutenberg/pull/54595))
+-   Reinstate my patterns category in site editor. ([54726](https://github.com/WordPress/gutenberg/pull/54726))
+-   Require a title in the creation modal. ([54717](https://github.com/WordPress/gutenberg/pull/54717))
+-   Use slug as fallback for empty title. ([54731](https://github.com/WordPress/gutenberg/pull/54731))
+-   Allow non-user patterns under Standard sync filter. ([54756](https://github.com/WordPress/gutenberg/pull/54756))
+-   Check that pattern is synced before replacing blocks with synced pattern on creation. ([54804](https://github.com/WordPress/gutenberg/pull/54804))
+-   Fix back navigation after pattern creation. ([54852](https://github.com/WordPress/gutenberg/pull/54852))
+-   Fix category control width in site editor. ([54853](https://github.com/WordPress/gutenberg/pull/54853))
+-   Improve sentence case consistency of labels and notices. ([54807](https://github.com/WordPress/gutenberg/pull/54807))
+
+#### Block Editor
+
+-   Add keyboardReturn submit button back to LinkControl. ([52620](https://github.com/WordPress/gutenberg/pull/52620))
+-   Formats: Memoize link value passed to the LinkControl. ([54603](https://github.com/WordPress/gutenberg/pull/54603))
+-   List: Merge consecutive lists. ([52995](https://github.com/WordPress/gutenberg/pull/52995))
+-   Rich text: Fix useAnchor (remove nextElementSibling). ([54013](https://github.com/WordPress/gutenberg/pull/54013))
+-   Iframe: Adjust keydown event bubbling. ([54565](https://github.com/WordPress/gutenberg/pull/54565))
+-   Reset page after changing pattern filters or search value. ([54774](https://github.com/WordPress/gutenberg/pull/54774))
+-   Block Editor: Fix 'isBlockSubtreeDisabled' private selector. ([54618](https://github.com/WordPress/gutenberg/pull/54618))
+
+#### Site Editor
+
+-   Bump the z-index of the rename modal. ([54277](https://github.com/WordPress/gutenberg/pull/54277))
+-   Default template lookup should use slug, not the full permalink, in the site editor. ([54599](https://github.com/WordPress/gutenberg/pull/54599))
+-   Fix "Blog title" input border radius in Index / Home details panel. ([54192](https://github.com/WordPress/gutenberg/pull/54192))
+-   Hide ghost top toolbar. ([54555](https://github.com/WordPress/gutenberg/pull/54555))
+-   CreateTemplatePartModal: Disable the 'Create' button while saving. ([54716](https://github.com/WordPress/gutenberg/pull/54716))
+
+#### Plugin
+
+-   Ensure font-face styles are printed in iframe editors. ([54313](https://github.com/WordPress/gutenberg/pull/54313))
+-   Font Face & Font Library: Load PHP files only if the main class does not exist. ([54103](https://github.com/WordPress/gutenberg/pull/54103))
+-   Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property. ([54581](https://github.com/WordPress/gutenberg/pull/54581))
+-   Update readme.txt "tested up to 6.3". ([54072](https://github.com/WordPress/gutenberg/pull/54072))
+-   Update cherry-pick script to correctly verify GitHub CLI setup. ([54720](https://github.com/WordPress/gutenberg/pull/54720))
+-   Conditionally remove deprecated 'print_emoji_styles'. ([54828](https://github.com/WordPress/gutenberg/pull/54828))
+
+#### Typography
+
+-   Font Library: Ensure merged fontFace data is enconded as an array instead of an object. ([54435](https://github.com/WordPress/gutenberg/pull/54435))
+-   Font Library: Fix duplicate variants with different file types. ([54490](https://github.com/WordPress/gutenberg/pull/54490))
+-   Font Library: Setting wp_font_family custom post type as \_builtin and not plublic. ([54559](https://github.com/WordPress/gutenberg/pull/54559))
+-   Font Face: Get name from "fontFamily" setting, not "name". ([54615](https://github.com/WordPress/gutenberg/pull/54615))
+-   Font Library: Fix modal width on mobile viewport. ([54518](https://github.com/WordPress/gutenberg/pull/54518))
+-   Font Library: Fix space above theme fonts in font library modal. ([54598](https://github.com/WordPress/gutenberg/pull/54598))
+-   Font Library: Fix error installing system fonts. ([54713](https://github.com/WordPress/gutenberg/pull/54713))
+-   Font Library: Remove font files created by tests after tests run. ([54771](https://github.com/WordPress/gutenberg/pull/54771))
+-   Font Library: Avoid rendering font library ui outisde gutenberg plugin. ([54830](https://github.com/WordPress/gutenberg/pull/54830))
+
+#### Widgets Editor
+
+-   Edit Widgets: Fix broken layout. ([54372](https://github.com/WordPress/gutenberg/pull/54372))
+-   Edit Widgets: Fix invisible action area when the top toolbar is enabled. ([54329](https://github.com/WordPress/gutenberg/pull/54329))
+-   Fix top toolbar for the customizer widgets sidebar control. ([54255](https://github.com/WordPress/gutenberg/pull/54255))
+
+#### Global Styles
+
+-   Font Library: Fix notification error for actions related to custom fonts. ([54535](https://github.com/WordPress/gutenberg/pull/54535))
+-   Prevent layout changes from saving the whole inherited settings object. ([54500](https://github.com/WordPress/gutenberg/pull/54500))
+
+#### Block API
+
+-   Blocks: Fix incorrect placement for hooked blocks in the parent container. ([54349](https://github.com/WordPress/gutenberg/pull/54349))
+-   Pass correct content argument to enter transforms. ([54108](https://github.com/WordPress/gutenberg/pull/54108))
+-   Block Hooks: Avoid processing empty content for loaded templates. ([54719](https://github.com/WordPress/gutenberg/pull/54719))
+
+#### Rich Text
+
+-   Revert: Rich text: Copy tag name on internal paste. ([54301](https://github.com/WordPress/gutenberg/pull/54301))
+
+#### Interactivity API
+
+-   Image: Fix block serialization test case to cover deprecation of `behaviors`. ([54570](https://github.com/WordPress/gutenberg/pull/54570))
+-   Query Loop: Select first anchor inside Post Template with "enhanced pagination" enabled. ([54730](https://github.com/WordPress/gutenberg/pull/54730))
+
+#### Icons
+
+-   Fix React forwardRef warnings for `TooltipAnchor`s. ([54492](https://github.com/WordPress/gutenberg/pull/54492))
+
+#### History
+
+-   Fix extra undo/redo step when removing or replacing all blocks. ([54457](https://github.com/WordPress/gutenberg/pull/54457))
+
+#### Synced Patterns
+
+-   Patterns: Apply layout and alignment to synced patterns in the editor. ([54416](https://github.com/WordPress/gutenberg/pull/54416))
+
+#### npm Packages
+
+-   Workflow: Fix the issue with npm publishing for WP major version. ([54088](https://github.com/WordPress/gutenberg/pull/54088))
+
+#### Media
+
+-   useMediaQuery: Avoid crashing on Safari < 14. ([54023](https://github.com/WordPress/gutenberg/pull/54023))
+
+#### Nested / Inner Blocks
+
+-   Fix: InnerBlocks allowed blocks change with different sizes. ([53943](https://github.com/WordPress/gutenberg/pull/53943))
+
+#### Layout
+
+-   Post Content: Ensure layout classnames are applied in readonly preview. ([53864](https://github.com/WordPress/gutenberg/pull/53864))
+
+#### Document Settings
+
+-   Set the timezone correctly. ([48083](https://github.com/WordPress/gutenberg/pull/48083))
+
+#### React i18n
+
+-   Fix: Invalid import in react-i18n documentation. ([54308](https://github.com/WordPress/gutenberg/pull/54308))
+
+#### Design Tools
+
+-   Background Image control: Use consistent button, ensure descriptive text accounts for no image selected. ([54711](https://github.com/WordPress/gutenberg/pull/54711))
+
+#### Collaborative Editing
+
+-   Make sure sync code only runs when experiment is enabled. ([54710](https://github.com/WordPress/gutenberg/pull/54710))
+
+#### Core Data
+
+-   core-data: Fix nested property access with undefined name. ([54790](https://github.com/WordPress/gutenberg/pull/54790))
+
+### Accessibility
+
+#### Block Library
+
+-   Comments form: Accessibility fixes for back-end. ([54393](https://github.com/WordPress/gutenberg/pull/54393))
+-   Navigation: Add ariaLabel block support. ([54418](https://github.com/WordPress/gutenberg/pull/54418))
+-   Table block: Fix semantic structure for screen readers on back-end. ([54324](https://github.com/WordPress/gutenberg/pull/54324))
+
+#### Components
+
+-   Improve Notice component accessibility. ([54498](https://github.com/WordPress/gutenberg/pull/54498))
+-   Making Circular Option Picker a `listbox`. ([52255](https://github.com/WordPress/gutenberg/pull/52255))
+-   Allow Modal to place focus on first element within contents via new API. ([54590](https://github.com/WordPress/gutenberg/pull/54590))
+-   Improve the placeholder instructions accessibility. ([45801](https://github.com/WordPress/gutenberg/pull/45801))
+
+#### Site Editor
+
+-   Clarify the "Entity" message of the snackbar. ([54333](https://github.com/WordPress/gutenberg/pull/54333))
+-   Use solid accent color selection in command palette. ([54318](https://github.com/WordPress/gutenberg/pull/54318))
+
+#### Block Editor
+
+-   Update nofollow control label. ([54184](https://github.com/WordPress/gutenberg/pull/54184))
+
+### Performance
+
+-   Use median instead of average to stabilize First Block metric. ([54157](https://github.com/WordPress/gutenberg/pull/54157))
+-   improvement: Reduce the use of the `_wp_array_get` function. ([51116](https://github.com/WordPress/gutenberg/pull/51116))
+
+#### Block Library
+
+-   Footnotes: Add block-level caching when parsing content for footnotes. ([52577](https://github.com/WordPress/gutenberg/pull/52577))
+-   Table of Contents: Use a custom store subscription for observing headings. ([54094](https://github.com/WordPress/gutenberg/pull/54094))
+-   getClientIdsOfDescendants: Support single 'clientId' as a argument. ([54421](https://github.com/WordPress/gutenberg/pull/54421))
+
+#### Site Editor
+
+-   Edit site: Prevent enqueuing entire stylesheet in iframe. ([54254](https://github.com/WordPress/gutenberg/pull/54254))
+-   Fix first block locator's page reference. ([54188](https://github.com/WordPress/gutenberg/pull/54188))
+
+#### Patterns
+
+-   Move mapping of values from core-data selector into consumers. ([54576](https://github.com/WordPress/gutenberg/pull/54576))
+
+#### Block API
+
+-   Unnecessary JSON decoding in block parser. ([54424](https://github.com/WordPress/gutenberg/pull/54424))
+
+#### Components
+
+-   Tooltip: Render tooltip markup in the DOM only when open. ([54312](https://github.com/WordPress/gutenberg/pull/54312))
+
+#### Post Editor
+
+-   Editor: Memoize 'getNestedEditedPostProperty' selector helper. ([54160](https://github.com/WordPress/gutenberg/pull/54160))
+
+#### Developer Experience
+
+-   Tests: Improve the environment setup. ([54309](https://github.com/WordPress/gutenberg/pull/54309))
+
+### Experiments
+
+#### Interactivity API
+
+-   Remove `wp_store` from query block. ([54359](https://github.com/WordPress/gutenberg/pull/54359))
+
+### Documentation
+
+-   Add a documentation page to explain how to implement undo/redo in a third-party editor. ([54546](https://github.com/WordPress/gutenberg/pull/54546))
+-   Add the Commands Data page to Handbook. ([53634](https://github.com/WordPress/gutenberg/pull/53634))
+-   Bootstrap a documentation website tailored towards the usage of Gutenberg outside WordPress. ([54375](https://github.com/WordPress/gutenberg/pull/54375))
+-   Button: Undocument the `focus` prop. ([54397](https://github.com/WordPress/gutenberg/pull/54397))
+-   Docs: Add missing callout class. ([54558](https://github.com/WordPress/gutenberg/pull/54558))
+-   Docs: Add note about enqueueing assets in the iframe and trim whitespace. ([54125](https://github.com/WordPress/gutenberg/pull/54125))
+-   Docs: Consolidated design Reference with the main Design Contributions doc. ([51065](https://github.com/WordPress/gutenberg/pull/51065))
+-   Docs: Move Glossary page to Getting Started. ([54120](https://github.com/WordPress/gutenberg/pull/54120))
+-   Docs: Move the FAQ page to Getting Started. ([54117](https://github.com/WordPress/gutenberg/pull/54117))
+-   Docs: Overhaul the Development Environment section of the Block Editor Handbook. ([54395](https://github.com/WordPress/gutenberg/pull/54395))
+-   Docs: Remove Outreach doc from Getting Started section. ([54314](https://github.com/WordPress/gutenberg/pull/54314))
+-   Docs: Remove unneeded block theme docs. ([51071](https://github.com/WordPress/gutenberg/pull/51071))
+-   Fix bullet hierarchy. ([47178](https://github.com/WordPress/gutenberg/pull/47178))
+-   Fix createI18n package import location. ([51328](https://github.com/WordPress/gutenberg/pull/51328))
+-   Fix incorrect image src in Design Contributions doc. ([54302](https://github.com/WordPress/gutenberg/pull/54302))
+-   Fix: Broken links on ToolbarGroup documentation. ([54229](https://github.com/WordPress/gutenberg/pull/54229))
+-   Fix: Remove unrequired code from BorderControl documentation. ([54348](https://github.com/WordPress/gutenberg/pull/54348))
+-   Fix: Wrapped `ref` in quotes in theme.json documentation. ([54591](https://github.com/WordPress/gutenberg/pull/54591))
+-   Incorrect file extension?. ([54134](https://github.com/WordPress/gutenberg/pull/54134))
+-   Theme JSON schema: Fix "not allowed error" in settings property. ([54521](https://github.com/WordPress/gutenberg/pull/54521))
+-   Try: Allow `multiple` attribute to be a string in upload components. ([53350](https://github.com/WordPress/gutenberg/pull/53350))
+-   Update Commands documentation with examples and more context. ([54441](https://github.com/WordPress/gutenberg/pull/54441))
+-   Update the components changelog to mark the popover slot removal as a breaking change. ([54022](https://github.com/WordPress/gutenberg/pull/54022))
+-   Update versions in WP for 6.3.1. ([54069](https://github.com/WordPress/gutenberg/pull/54069))
+-   Updated Related Components Links. ([49176](https://github.com/WordPress/gutenberg/pull/49176))
+-   Updates Edit and Save code examples to have matching open/closing tags. ([53915](https://github.com/WordPress/gutenberg/pull/53915))
+-   [Docs: Getting Started / Block Development Environment] Updates on the text to improve clarity and preciseness. ([54563](https://github.com/WordPress/gutenberg/pull/54563))
+-   documentation - Contribution Triage: Formatted text and changed some titles and structure. ([54258](https://github.com/WordPress/gutenberg/pull/54258))
+-   documentation [Block Editor Handbook / Getting Started / Block Development Environment]: Fix links. ([54571](https://github.com/WordPress/gutenberg/pull/54571))
+-   Add missing global declaration in DocBlock of interactivity files. ([54683](https://github.com/WordPress/gutenberg/pull/54683))
+
+### Code Quality
+
+-   Adds removal notice to view.js.mustache. ([54105](https://github.com/WordPress/gutenberg/pull/54105))
+-   Block editor: Remove `__unstableElementContext` and filter `EditorStyles` instead. ([52888](https://github.com/WordPress/gutenberg/pull/52888))
+-   Improving error messages and codes in jest-console, matcher.js. ([53743](https://github.com/WordPress/gutenberg/pull/53743))
+-   Indicate nested paths on \_\_experimentalSaveSpecifiedEntityEdits. ([54161](https://github.com/WordPress/gutenberg/pull/54161))
+-   JS unit tests: Update popover matcher. ([54168](https://github.com/WordPress/gutenberg/pull/54168))
+-   Style engine: Sync doc changes from core. ([54650](https://github.com/WordPress/gutenberg/pull/54650))
+
+#### Components
+
+-   Composite: Refactor to TypeScript. ([54028](https://github.com/WordPress/gutenberg/pull/54028))
+-   FocusableIframe: Refactor to TypeScript. ([53979](https://github.com/WordPress/gutenberg/pull/53979))
+-   IsolatedEventContainer to Typescript (just test file). ([54316](https://github.com/WordPress/gutenberg/pull/54316))
+-   Popover: Remove custom frame scroll/resize listeners. ([54286](https://github.com/WordPress/gutenberg/pull/54286))
+-   Revert FormTokenField - add prop to allow saving of tokens onBlur. ([54444](https://github.com/WordPress/gutenberg/pull/54444))
+-   Toolbar/ToolbarDropdownMenu Typescript Conversion. ([54321](https://github.com/WordPress/gutenberg/pull/54321))
+-   ToolbarGroup - Typescript. ([54317](https://github.com/WordPress/gutenberg/pull/54317))
+-   with-focus-outside: Convert to TypeScript. ([53980](https://github.com/WordPress/gutenberg/pull/53980))
+
+#### Patterns
+
+-   Revert usePatternsState to return an array instead of object. ([54582](https://github.com/WordPress/gutenberg/pull/54582))
+-   Add missing dependency of `@wordpress/patterns` on `@babel/runtime`. ([54118](https://github.com/WordPress/gutenberg/pull/54118))
+-   Move category map creation out of useSelect. ([54584](https://github.com/WordPress/gutenberg/pull/54584))
+-   Remove experimental prefixes from patterns package. ([54338](https://github.com/WordPress/gutenberg/pull/54338))
+-   Site editor: Consolidate constants. ([54484](https://github.com/WordPress/gutenberg/pull/54484))
+-   Fix sidebar nav screen fallback category. ([54754](https://github.com/WordPress/gutenberg/pull/54754))
+
+#### Post Editor
+
+-   Annotations: Run end-to-end tests with iframe. ([54191](https://github.com/WordPress/gutenberg/pull/54191))
+-   EditPostPreferencesModal: Refactor to remove snapshots for index.js. ([54141](https://github.com/WordPress/gutenberg/pull/54141))
+-   Extract WordPress specific styles from the BlockTools component. ([54356](https://github.com/WordPress/gutenberg/pull/54356))
+-   PageAttributesParent: A minor fixes for useSelect and useMemo hook usages. ([54433](https://github.com/WordPress/gutenberg/pull/54433))
+-   PostSyncStatus: Derive sync status inside the selector. ([54159](https://github.com/WordPress/gutenberg/pull/54159))
+
+#### Block Library
+
+-   Heading: Remove unused 'aria-label'. ([54223](https://github.com/WordPress/gutenberg/pull/54223))
+-   Image Editor: Fix ESLint warnings and remove unnecessary dependencies. ([53506](https://github.com/WordPress/gutenberg/pull/53506))
+-   Pattern Category: Set 'publicly_queryable' to false. ([54567](https://github.com/WordPress/gutenberg/pull/54567))
+-   Post Terms: Fix a 'useSelect' warning in the 'usePostTerms' hook. ([54068](https://github.com/WordPress/gutenberg/pull/54068))
+
+#### Interactivity API
+
+-   Prepare image lightbox for private version of the Interactivity API in 6 4. ([54547](https://github.com/WordPress/gutenberg/pull/54547))
+-   Remove `gutenberg_should_block_use_interactivity_api ` and the old implementation of interactive blocks. ([54297](https://github.com/WordPress/gutenberg/pull/54297))
+-   Search block: Switch interactivity to the Interactivity API. ([53343](https://github.com/WordPress/gutenberg/pull/53343))
+
+#### Site Editor
+
+-   Remove Tooltip workarounds added in the site and block editor. ([54450](https://github.com/WordPress/gutenberg/pull/54450))
+-   Revisions: Remove 'gutenberg' query param from revisions.php. ([54166](https://github.com/WordPress/gutenberg/pull/54166))
+-   Prune store constants. ([54585](https://github.com/WordPress/gutenberg/pull/54585))
+-   Use constants rather than hard coded template strings. ([54586](https://github.com/WordPress/gutenberg/pull/54586))
+
+#### Rich Text
+
+-   RichText: Remove \_\_unstableOnSplitMiddle. ([54183](https://github.com/WordPress/gutenberg/pull/54183))
+
+#### Typography
+
+-   Fluid typography: Backporting Core @since annotations. ([54204](https://github.com/WordPress/gutenberg/pull/54204))
+-   Font Face: Remove static instance in wp_print_font_faces(). ([54228](https://github.com/WordPress/gutenberg/pull/54228))
+-   Font Library: Refactor logic to disable font library in the frontend. ([54748](https://github.com/WordPress/gutenberg/pull/54748))
+
+#### Block Editor
+
+-   Improve code commenting around focus mount behaviour of rich text Link UI. ([54085](https://github.com/WordPress/gutenberg/pull/54085))
+-   List e2e: Run all tests with iframe. ([54181](https://github.com/WordPress/gutenberg/pull/54181))
+
+#### Layout
+
+-   Use override editor style API. ([54466](https://github.com/WordPress/gutenberg/pull/54466))
+
+#### Plugin
+
+-   Require minimum WordPress 6.2. ([53451](https://github.com/WordPress/gutenberg/pull/53451))
+-   Ensure that Block Hooks work correctly after landing in WP core. ([54651](https://github.com/WordPress/gutenberg/pull/54651))
+-   Update uuid package to 9.0.1. ([54725](https://github.com/WordPress/gutenberg/pull/54725))
+
+#### Themes
+
+-   Iframe: Skip scoping styles. ([46752](https://github.com/WordPress/gutenberg/pull/46752))
+
+### Tools
+
+#### Testing
+
+-   Button: Update test assertion to match test name. ([54260](https://github.com/WordPress/gutenberg/pull/54260))
+-   E2E: Do not run page actions in beforeEach hook when using fixme. ([54065](https://github.com/WordPress/gutenberg/pull/54065))
+-   Fix Font library unit tests. ([54645](https://github.com/WordPress/gutenberg/pull/54645))
+-   Font Library: Remove upload_mimes filter after uploading fonts. ([54647](https://github.com/WordPress/gutenberg/pull/54647))
+-   Migrate RichText end-to-end tests to Playwright. ([53493](https://github.com/WordPress/gutenberg/pull/53493))
+-   Perf Tests: Update base point to compare. ([54111](https://github.com/WordPress/gutenberg/pull/54111))
+-   Puppeteer tests: Try to fix failing tests related to notices in core. ([54452](https://github.com/WordPress/gutenberg/pull/54452))
+-   Remove accidental addition of perf test results (2). ([54363](https://github.com/WordPress/gutenberg/pull/54363))
+-   Remove accidental addition of perf test results. ([54355](https://github.com/WordPress/gutenberg/pull/54355))
+-   Update WPCS to v3.0, and fix all reported Coding Standards issues. ([53866](https://github.com/WordPress/gutenberg/pull/53866))
+-   `Modal`: Add more unit tests. ([54569](https://github.com/WordPress/gutenberg/pull/54569))
+-   end-to-end Test Utils: Add new fixtures for performance metrics. ([52993](https://github.com/WordPress/gutenberg/pull/52993))
+-   end-to-end Tests: Fix 'no-useless-not' ESLint warnings. ([54652](https://github.com/WordPress/gutenberg/pull/54652))
+-   package(e2e-test-utils): Update fixtures. ([54128](https://github.com/WordPress/gutenberg/pull/54128))
+-   wp-scripts: Add support for Playwright. ([53108](https://github.com/WordPress/gutenberg/pull/53108))
+-   Font Library: Use resolvable domain in test. ([54763](https://github.com/WordPress/gutenberg/pull/54763))
+-   Global styles tests: Fire hooks when updating post. ([54836](https://github.com/WordPress/gutenberg/pull/54836))
+-   Remove action to fix tests. ([54806](https://github.com/WordPress/gutenberg/pull/54806))
+-   Font Library: Fix set upload dir test. ([54762](https://github.com/WordPress/gutenberg/pull/54762))
+
+#### Build Tooling
+
+-   Backport tools: Filter PRs to be cherry picked by merged date. ([54171](https://github.com/WordPress/gutenberg/pull/54171))
+-   Changelog tool: Update Automated Testing label. ([54070](https://github.com/WordPress/gutenberg/pull/54070))
+-   Running npm run format:Php may result in an error. ([54162](https://github.com/WordPress/gutenberg/pull/54162))
+-   Scripts: Correctly resolve entry points when the directory is symlinked. ([54212](https://github.com/WordPress/gutenberg/pull/54212))
+-   Upgrade wp-prettier to v3.0.3. ([54539](https://github.com/WordPress/gutenberg/pull/54539))
+-   Update typescript-eslint to v6. ([53975](https://github.com/WordPress/gutenberg/pull/53975))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @andrewhayward: Making Circular Option Picker a `listbox`. ([52255](https://github.com/WordPress/gutenberg/pull/52255))
+-   @jamiemchale: Fix createI18n package import location. ([51328](https://github.com/WordPress/gutenberg/pull/51328))
+-   @johnhooks: refactor(blob): Type URL parameter as optional. ([49201](https://github.com/WordPress/gutenberg/pull/49201))
+-   @MericKarabulut: Improving error messages and codes in jest-console, matcher.js. ([53743](https://github.com/WordPress/gutenberg/pull/53743))
+-   @Piyush-Deshmukh: Fix: Wrapped `ref` in quotes in theme.json documentation. ([54591](https://github.com/WordPress/gutenberg/pull/54591))
+-   @Rajinsharwar: Editor: Catch errors when creating terms. ([53369](https://github.com/WordPress/gutenberg/pull/53369))
+-   @toolstack: Set the timezone correctly. ([48083](https://github.com/WordPress/gutenberg/pull/48083))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @alexstine @andrewhayward @andrewserong @annezazu @anomiex @anton-vlasenko @aristath @artemiomorales @atachibana @bangank36 @bfintal @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @chintu51 @ciampo @DAreRodz @dcalhoun @derekblank @draganescu @ediamin @ellatrix @fluiddot @gaambo @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jamiemchale @jeherve @jffng @johnhooks @jordesign @jorgefilipecosta @joshuatf @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kkoppenhaver @kmanijak @leewillis77 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @margolisj @masteradhoc @matiasbenedetto @mburridge @mcsf @MericKarabulut @mhimon @michalczaplinski @mikachan @mikejolley @mokagio @ndiego @ntsekouras @Olein-jp @petitphp @Piyush-Deshmukh @Rajinsharwar @ramonjd @richtabor @SantosGuillamot @SaxonF @scruffian @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @thelovekesh @toolstack @torounit @tyxla @vcanales @walbo @WunderBart @youknowriad
+
+= 16.6.0 =
+
+## Changelog
+
+### Features
+
+#### Interactivity API
+
+-   Add Slot and Fill directives. ([53958](https://github.com/WordPress/gutenberg/pull/53958))
+-   Query block: Client-side pagination. ([53812](https://github.com/WordPress/gutenberg/pull/53812))
+-   Update `data-wp-bind` directive logic. ([54003](https://github.com/WordPress/gutenberg/pull/54003))
+-   Query block: Move "Enhance pagination" toggle under Settings. ([54198](https://github.com/WordPress/gutenberg/pull/54198))
+
+### Enhancements
+
+-   Bundle ObserveTyping within the BlockList component. ([53875](https://github.com/WordPress/gutenberg/pull/53875))
+-   Default appender: Hide the dashed indicator until ancestor is selected. ([53761](https://github.com/WordPress/gutenberg/pull/53761))
+-   Register the block editor keyboard shortcuts automatically when using BlockEditorProvider. ([53910](https://github.com/WordPress/gutenberg/pull/53910))
+-   [Commands]: Add toggle list view command in site editor. ([53983](https://github.com/WordPress/gutenberg/pull/53983))
+
+#### Components
+
+-   Bundle SlotFillProvider within BlockEditorProvider. ([53940](https://github.com/WordPress/gutenberg/pull/53940))
+-   Make the Popover.Slot optional. ([53889](https://github.com/WordPress/gutenberg/pull/53889))
+-   Popover: Update `@floating-ui` to latest version, remove custom fix for iframe positioning and scaling. ([46845](https://github.com/WordPress/gutenberg/pull/46845))
+-   `AlignmentMatrixControl`: Replace `act()` with `userEvent`. ([53703](https://github.com/WordPress/gutenberg/pull/53703))
+-   `ProgressBar`: Add transition to determinate indicator. ([53877](https://github.com/WordPress/gutenberg/pull/53877))
+
+#### Block Library
+
+-   Blocks: Move bootstrapped block types to Redux state. ([53807](https://github.com/WordPress/gutenberg/pull/53807))
+-   Capture toolbars in navigation block. ([53697](https://github.com/WordPress/gutenberg/pull/53697))
+-   Content Block: Change placeholder and end-to-end test to refer to Content block. ([53902](https://github.com/WordPress/gutenberg/pull/53902))
+-   Make mid size parameter settable for Query Pagination block. ([51216](https://github.com/WordPress/gutenberg/pull/51216))
+
+#### Block Editor
+
+-   Capture toolbars in quote block. ([53699](https://github.com/WordPress/gutenberg/pull/53699))
+-   Improve writing flow for lists by capturing list item toolbars. ([53306](https://github.com/WordPress/gutenberg/pull/53306))
+-   RichTextValue: Typescript Adjustment. ([54002](https://github.com/WordPress/gutenberg/pull/54002))
+
+#### Typography
+
+-   Font Face: Prepare for merge into Core. ([53858](https://github.com/WordPress/gutenberg/pull/53858))
+-   Renames "Fonts Library" to "Font Library". ([53780](https://github.com/WordPress/gutenberg/pull/53780))
+
+#### Post Editor
+
+-   Edit Post: Use hooks instead of HoCs in `TaxonomyPanel`. ([53773](https://github.com/WordPress/gutenberg/pull/53773))
+
+#### List View
+
+-   Add keyboard shortcut for duplicating blocks. ([53559](https://github.com/WordPress/gutenberg/pull/53559))
+
+#### Patterns
+
+-   Add a custom taxonomy for user created patterns. ([53163](https://github.com/WordPress/gutenberg/pull/53163))
+
+### New APIs
+
+#### Interactivity API
+
+-   Router with region-based client-side navigation. ([53733](https://github.com/WordPress/gutenberg/pull/53733))
+
+### Bug Fixes
+
+-   Add missing aria roles for block locking toolbar and menu buttons. ([53734](https://github.com/WordPress/gutenberg/pull/53734))
+-   Block Editor: Fix cleanup in the 'useNavModeExit' hook. ([53795](https://github.com/WordPress/gutenberg/pull/53795))
+-   Command Palette: Fix crash on block-related commands. ([53923](https://github.com/WordPress/gutenberg/pull/53923))
+-   Date: Add relative time translations for moment.js. ([53931](https://github.com/WordPress/gutenberg/pull/53931))
+-   Date: Update translation domains for strings to be translatable. ([53995](https://github.com/WordPress/gutenberg/pull/53995))
+-   Iframe: Set character encoding to utf-8. ([53519](https://github.com/WordPress/gutenberg/pull/53519))
+-   Replace horizontal ellipsis icon with vertical ellipsis icon. ([52731](https://github.com/WordPress/gutenberg/pull/52731))
+-   Toggle Distraction free mode mode based on compatibility. ([54030](https://github.com/WordPress/gutenberg/pull/54030))
+-   Warning: Introduce `SCRIPT_DEBUG` to make the package compatible with webpack 5. ([50122](https://github.com/WordPress/gutenberg/pull/50122))
+-   [Commands]: Fix `move to` command condition for registering. ([54049](https://github.com/WordPress/gutenberg/pull/54049))
+-   [Commands]: Fix block editor commands availability. ([53994](https://github.com/WordPress/gutenberg/pull/53994))
+-   [Format library]: Fix `language` popover position. ([53841](https://github.com/WordPress/gutenberg/pull/53841))
+
+#### Block Library
+
+-   Add init.js module for the Footnotes block. ([53763](https://github.com/WordPress/gutenberg/pull/53763))
+-   Adding center align css for social icon issue. ([43120](https://github.com/WordPress/gutenberg/pull/43120))
+-   Cover block: Fix exception when adding video background. ([53961](https://github.com/WordPress/gutenberg/pull/53961))
+-   List View: Allow replacing template part when a block isn't selected. ([53757](https://github.com/WordPress/gutenberg/pull/53757))
+-   Post Navigation Link: Remove unnecessary space between arrows and label. ([53572](https://github.com/WordPress/gutenberg/pull/53572))
+-   Search block: Fix width input field. ([53952](https://github.com/WordPress/gutenberg/pull/53952))
+-   Simplify check for no posts in query-no-results block. ([53772](https://github.com/WordPress/gutenberg/pull/53772))
+-   Site Logo: Remove line-height for the anchor element. ([53909](https://github.com/WordPress/gutenberg/pull/53909))
+
+#### Components
+
+-   Always render the fallback Popover anchor within the Popover's parent element. ([53982](https://github.com/WordPress/gutenberg/pull/53982))
+-   Fix the cleanup method for SandBox. ([53796](https://github.com/WordPress/gutenberg/pull/53796))
+-   PaletteEdit: Fix component height. ([54000](https://github.com/WordPress/gutenberg/pull/54000))
+
+#### Post Editor
+
+-   Edit Post: Fix tab border conflicts in the Document Overview panel. ([53711](https://github.com/WordPress/gutenberg/pull/53711))
+-   EditPostPreferencesModal: Fix intermittently failing tests. ([53814](https://github.com/WordPress/gutenberg/pull/53814))
+-   getInsertionPoint: Fix type check for the state value. ([53793](https://github.com/WordPress/gutenberg/pull/53793))
+
+#### npm Packages
+
+-   Workflow: Run Learn directly from GitHub action when publishing to npm targeting WP core. ([53762](https://github.com/WordPress/gutenberg/pull/53762))
+-   Workflows: Fix issues with the npm publishing workflow when using locally. ([53565](https://github.com/WordPress/gutenberg/pull/53565))
+
+#### Themes
+
+-   Command Palette: Proper handling of page/post links in all themes. ([53718](https://github.com/WordPress/gutenberg/pull/53718))
+-   Fix query loop bugs by correctly relying on the main query and removing problematic workaround. ([49904](https://github.com/WordPress/gutenberg/pull/49904))
+
+#### Block Editor
+
+-   Fix: Indicator style when block moving mode. ([53972](https://github.com/WordPress/gutenberg/pull/53972))
+
+#### Icons
+
+-   Fix invalid namespaces. ([53955](https://github.com/WordPress/gutenberg/pull/53955))
+
+#### Patterns
+
+-   Disable the preview option button when editing. ([53913](https://github.com/WordPress/gutenberg/pull/53913))
+
+#### Global Styles
+
+-   Gallery: Re-enable block spacing at block level while still hiding in global styles. ([53900](https://github.com/WordPress/gutenberg/pull/53900))
+
+#### Layout
+
+-   BlockList: Ensure element styles (and svg) are always appended at the end of the document. ([53859](https://github.com/WordPress/gutenberg/pull/53859))
+
+#### Interactivity API
+
+-   Add "supports.interactivity" to Image block. ([53850](https://github.com/WordPress/gutenberg/pull/53850))
+
+#### Style Variations
+
+-   Block Styles: Fix misplaced preview popover on RTL site. ([53726](https://github.com/WordPress/gutenberg/pull/53726))
+
+#### List View
+
+-   Recalculate window list when expanded state changes (fix logic for long nested lists). ([53716](https://github.com/WordPress/gutenberg/pull/53716))
+
+#### Widgets Editor
+
+-   Block Widget: Fix content cutoff in the keyboard shortcut modal. ([53638](https://github.com/WordPress/gutenberg/pull/53638))
+
+#### Rich Text
+
+-   Fix cleanup in `useRemoveBrowserShortcuts`. ([52225](https://github.com/WordPress/gutenberg/pull/52225))
+
+### Accessibility
+
+-   Edit site: Add missing label to post status password protected input field. ([52885](https://github.com/WordPress/gutenberg/pull/52885))
+-   [a11y] Fix: Aria-haspop, aria-expanded attributes on the link format button. ([53691](https://github.com/WordPress/gutenberg/pull/53691))
+
+#### Site Editor
+
+-   Add missing aria roles to the 'Create template part' menu item. ([53754](https://github.com/WordPress/gutenberg/pull/53754))
+-   Unify the delete button style in the dropdown menu with red. ([52597](https://github.com/WordPress/gutenberg/pull/52597))
+
+#### Block Library
+
+-   Add missing aria roles to the 'Replace template part' menu item. ([53755](https://github.com/WordPress/gutenberg/pull/53755))
+
+#### Patterns
+
+-   Add missing aria roles to the 'Create pattern' menu item. ([53739](https://github.com/WordPress/gutenberg/pull/53739))
+
+#### List View
+
+-   [a11y] Fix: Aria-haspop and aria-expanded attributes on list view button. ([53693](https://github.com/WordPress/gutenberg/pull/53693))
+
+#### Block Editor
+
+-   [a11y] Fix: Aria-haspop and aria-expanded attributes on the inserter button. ([53692](https://github.com/WordPress/gutenberg/pull/53692))
+
+### Performance
+
+-   Revert "Switch performance tests to Playwright (#52022)". ([53741](https://github.com/WordPress/gutenberg/pull/53741))
+-   StartPageOptions: Load and parse patterns only after establishing the need for them. ([53673](https://github.com/WordPress/gutenberg/pull/53673))
+-   Switch performance tests to Playwright: Take 2. ([53768](https://github.com/WordPress/gutenberg/pull/53768))
+
+### Experiments
+
+#### Block API
+
+-   Auto-inserting blocks: Add block inspector panel. ([52969](https://github.com/WordPress/gutenberg/pull/52969))
+-   -   Auto-inserting blocks: Add block icon to block inspector panel toggles. ([54029](https://github.com/WordPress/gutenberg/pull/54029))
+-   Auto-inserting blocks: Remove toggle if block is present elsewhere. ([54024](https://github.com/WordPress/gutenberg/pull/54024))
+-   Rename "auto inserting blocks" to "block hooks". ([54147](https://github.com/WordPress/gutenberg/pull/54147))
+
+### Documentation
+
+-   Add juanmaguitar as codeowner of /packages/interactivity/docs. ([53845](https://github.com/WordPress/gutenberg/pull/53845))
+-   Add new How-to Guide for enqueueing assets in the Editor. ([53828](https://github.com/WordPress/gutenberg/pull/53828))
+-   Adds example for useBlockProps hook. ([53646](https://github.com/WordPress/gutenberg/pull/53646))
+-   Adds explanatory text to view.js template. ([53870](https://github.com/WordPress/gutenberg/pull/53870))
+-   Clarification for `parent` and `ancestor` hierarchical relationships. ([53855](https://github.com/WordPress/gutenberg/pull/53855))
+-   Docs: Extend the information about using `render` with `block.json`. ([53973](https://github.com/WordPress/gutenberg/pull/53973))
+-   Docs: Remove duplicate sections from FAQ page. ([53830](https://github.com/WordPress/gutenberg/pull/53830))
+-   Document the naming convention for `block-library` PHP functions. ([53777](https://github.com/WordPress/gutenberg/pull/53777))
+-   Fix 'lerna' links in the release documentation. ([53770](https://github.com/WordPress/gutenberg/pull/53770))
+-   Fix typo in code sample for Interactivity API. ([53916](https://github.com/WordPress/gutenberg/pull/53916))
+-   MenuItem: Add Storybook stories. ([53613](https://github.com/WordPress/gutenberg/pull/53613))
+-   Shortcut: Add Storybook stories. ([53627](https://github.com/WordPress/gutenberg/pull/53627))
+-   Storybook: Add back subcomponents to props table. ([53751](https://github.com/WordPress/gutenberg/pull/53751))
+-   Storybook: Fix default source visibility. ([53749](https://github.com/WordPress/gutenberg/pull/53749))
+-   Storybook: Show main story before description. ([53753](https://github.com/WordPress/gutenberg/pull/53753))
+-   Update local instructions on the dev env documentation. ([53924](https://github.com/WordPress/gutenberg/pull/53924))
+-   Update the Block Variations API doc. ([53817](https://github.com/WordPress/gutenberg/pull/53817))
+-   Update to node 16 and npm 8 in the getting started with code contribution doc. ([53912](https://github.com/WordPress/gutenberg/pull/53912))
+-   docs: Fix report-flaky-test link. ([53848](https://github.com/WordPress/gutenberg/pull/53848))
+
+### Code Quality
+
+-   Components: Update Popover per reviews. ([53907](https://github.com/WordPress/gutenberg/pull/53907))
+-   Edit Site: Rename `CanvasSpinner` to `CanvasLoader`. ([53728](https://github.com/WordPress/gutenberg/pull/53728))
+-   Enforce valid function names in the packages/block-library/src/_/_.php files. ([53438](https://github.com/WordPress/gutenberg/pull/53438))
+-   Fonts Library: Update properties name from snake case to camel case to match the rest of the properties. ([53746](https://github.com/WordPress/gutenberg/pull/53746))
+
+#### Block API
+
+-   Auto-inserting blocks: Remove obsolete TODO, fix REST API field description. ([54208](https://github.com/WordPress/gutenberg/pull/54208))
+
+#### Post Editor
+
+-   Editor: Fix the 'useSelect' warning in the 'useIsDirty' hook. ([53759](https://github.com/WordPress/gutenberg/pull/53759))
+-   Fix browser console error when changing device preview mode. ([53969](https://github.com/WordPress/gutenberg/pull/53969))
+-   Refactor latest content selectors in 'CopyContentMenuItem' components. ([53676](https://github.com/WordPress/gutenberg/pull/53676))
+
+#### Components
+
+-   Remove unnecessary utils. ([53679](https://github.com/WordPress/gutenberg/pull/53679))
+-   SlotFill: Refactor `<Slot bubblesVirtually />`. ([53272](https://github.com/WordPress/gutenberg/pull/53272))
+-   Storybook: Update TypeScript types. ([53748](https://github.com/WordPress/gutenberg/pull/53748))
+
+#### List View
+
+-   Fix warning error when the gallery block has the same image URLs. ([53809](https://github.com/WordPress/gutenberg/pull/53809))
+
+#### Typography
+
+-   Font Face API: Use `gutenberg_get_global_settings` instead of private API. ([53805](https://github.com/WordPress/gutenberg/pull/53805))
+
+### Tools
+
+-   Try: Change PR label enforcer automation not to work on draft PRs by default. ([53417](https://github.com/WordPress/gutenberg/pull/53417))
+
+#### Testing
+
+-   Attempt to fix intermittent end-to-end test failure. ([53905](https://github.com/WordPress/gutenberg/pull/53905))
+-   Fonts Library: Test improvements. ([53702](https://github.com/WordPress/gutenberg/pull/53702))
+-   Make fonts test files use Core approach. ([53856](https://github.com/WordPress/gutenberg/pull/53856))
+-   Migrate shortcut help end-to-end tests to Playwright. ([53832](https://github.com/WordPress/gutenberg/pull/53832))
+-   Relocates Font Face and Fonts Library PHP files into Core's fonts directory. ([53747](https://github.com/WordPress/gutenberg/pull/53747))
+-   `ColorPalette`: Refine test query. ([53704](https://github.com/WordPress/gutenberg/pull/53704))
+-   end-to-end Playwright Utils: Automatically detect canvas type. ([53744](https://github.com/WordPress/gutenberg/pull/53744))
+-   test: Automate mobile editor tests. ([53991](https://github.com/WordPress/gutenberg/pull/53991))
+
+#### Build Tooling
+
+-   Update Jest to latest version, and use optimized JSDOM. ([53736](https://github.com/WordPress/gutenberg/pull/53736))
+
+#### Plugin
+
+-   Backport themes `is_block_theme` collection param from core. ([53846](https://github.com/WordPress/gutenberg/pull/53846))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @JEverhart383: Fix typo in code sample for Interactivity API. ([53916](https://github.com/WordPress/gutenberg/pull/53916))
+-   @krokodok: Make mid size parameter settable for Query Pagination block. ([51216](https://github.com/WordPress/gutenberg/pull/51216))
+-   @mklute101: Update local instructions on the dev env documentation. ([53924](https://github.com/WordPress/gutenberg/pull/53924))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@afercia @andrewserong @anton-vlasenko @bangank36 @brookewp @ciampo @colorful-tones @DAreRodz @dcalhoun @derekblank @ellatrix @felixarntz @geriux @glendaviesnz @gziolo @hellofromtonya @jasmussen @jblz @JEverhart383 @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @krokodok @luisherranz @Mamaduka @margolisj @matiasbenedetto @mburridge @mirka @mklute101 @mokagio @ndiego @ntsekouras @oandregal @ocean90 @ockham @priethor @ramonjd @richtabor @SiobhyB @Smit2808 @stokesman @t-hamano @torounit @tyxla @walbo @WunderBart @youknowriad
+
+= 16.5.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Pass entire link value on toggle of setting on Link Preview. ([53949](https://github.com/WordPress/gutenberg/pull/53949))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@getdave
+
+= 16.5.0 =
+
+## Changelog
+
+### Features
+
+#### Interactivity API
+
+-   Allow passing optional `afterLoad` callbacks to `store` calls. ([53363](https://github.com/WordPress/gutenberg/pull/53363))
+
+### Enhancements
+
+#### Commands
+
+-   Add block-related commands. ([52509](https://github.com/WordPress/gutenberg/pull/52509))
+-   Add support for registering commands without icons. ([53647](https://github.com/WordPress/gutenberg/pull/53647))
+-   Update the "Preview in a new tab" command to reuse the preview target tab when available. ([53242](https://github.com/WordPress/gutenberg/pull/53242))
+-   Update command palette styling. ([53117](https://github.com/WordPress/gutenberg/pull/53117))
+-   Improve command palette rendering on smaller viewports. ([53661](https://github.com/WordPress/gutenberg/pull/53661))
+-   Tweak existing commands to establish consistency with command language. ([53496](https://github.com/WordPress/gutenberg/pull/53496))
+-   End the command palette description with a period in the keyboard shortcut modal. ([53635](https://github.com/WordPress/gutenberg/pull/53635))
+
+#### Components
+
+-   Button: Remove default border from the destructive button. ([53607](https://github.com/WordPress/gutenberg/pull/53607))
+-   LineHeightControl: Allow for more granular control of decimal places. ([52902](https://github.com/WordPress/gutenberg/pull/52902))
+-   Snackbar: Design and motion improvements. ([53248](https://github.com/WordPress/gutenberg/pull/53248))
+-   Modal:
+    -   Add `headerActions` prop to enable buttons or other elements to be injected in the header. ([53328](https://github.com/WordPress/gutenberg/pull/53328))
+    -   Enhance overlay interactions, enabling outside interactions without dismissal. ([52994](https://github.com/WordPress/gutenberg/pull/52994))
+-   ProgressBar: Update colors, including gray 300 for track color ([53349](https://github.com/WordPress/gutenberg/pull/53349)), theme system accent for indicator color ([53347](https://github.com/WordPress/gutenberg/pull/53347)), and the theme accent color variable. ([53632](https://github.com/WordPress/gutenberg/pull/53632)).
+
+#### Block Library
+
+-   Column block:
+    -   Add a `stretch` option to block's vertical alignment options. ([53325](https://github.com/WordPress/gutenberg/pull/53325))
+    -   Exit upon pressing enter in an empty paragraph at the end of the block. ([53311](https://github.com/WordPress/gutenberg/pull/53311))
+-   Classic block: Increase dimensions of modal and allow toggling fullscreen. ([53449](https://github.com/WordPress/gutenberg/pull/53449))
+-   Details block:
+    -   Add `accordion` and `toggle` keywords to improve block's discoverability. ([53501](https://github.com/WordPress/gutenberg/pull/53501))
+    -   Add layout and block spacing options. ([53282](https://github.com/WordPress/gutenberg/pull/53282))
+-   File block: Add block spacing options. ([45107](https://github.com/WordPress/gutenberg/pull/45107))
+-   Image block: Add aspect ratio support to lightbox. ([52765](https://github.com/WordPress/gutenberg/pull/52765))
+-   Post Content block: Add color controls. ([51326](https://github.com/WordPress/gutenberg/pull/51326))
+-   Remove "post" from block titles. ([53492](https://github.com/WordPress/gutenberg/pull/53492))
+
+#### Patterns
+
+-   Open detail view when duplicating a pattern. ([53214](https://github.com/WordPress/gutenberg/pull/53214))
+-   Prevent the "create pattern" modal from closing the block options menu when it is closed. ([53707](https://github.com/WordPress/gutenberg/pull/53707))
+-   Skip migration logs in the patterns screen. ([53626](https://github.com/WordPress/gutenberg/pull/53626))
+-   Add missing full stop to string. ([53544](https://github.com/WordPress/gutenberg/pull/53544))
+
+#### Global Styles
+
+-   Add a reset to default global styles revision ([52965](https://github.com/WordPress/gutenberg/pull/52965)) and reduce visibility check from two to one revision ([53281](https://github.com/WordPress/gutenberg/pull/53281)).
+
+#### Media
+
+-   Adjust size of image previews in list view. ([53649](https://github.com/WordPress/gutenberg/pull/53649))
+-   Add media previews to list view for gallery and image blocks. ([53381](https://github.com/WordPress/gutenberg/pull/53381))
+
+#### Site Editor
+
+-   Expose `Theme` via private APIs ([53262](https://github.com/WordPress/gutenberg/pull/53262)), which was necessary to use the progress bar component for the site editor loading screen ([53032](https://github.com/WordPress/gutenberg/pull/53032)).
+
+#### Block Editor
+
+-   Add `Opens in new Tab` control into Link Preview. ([53566](https://github.com/WordPress/gutenberg/pull/53566))
+-   Dependencies: Bump `remove-accents` to 0.5.0. ([53420](https://github.com/WordPress/gutenberg/pull/53420))
+-   Top-align Publish row in the post panel. ([53573](https://github.com/WordPress/gutenberg/pull/53573))
+-   Allow layout controls to be disabled per block from theme.json. ([53378](https://github.com/WordPress/gutenberg/pull/53378))
+-   Fluid typography: Add min and max viewport width configurable options. ([53081](https://github.com/WordPress/gutenberg/pull/53081))
+
+### New APIs
+
+#### Extensibility
+
+-   Make `useBlockEditingMode()` public. ([52094](https://github.com/WordPress/gutenberg/pull/52094))
+
+### Bug Fixes
+
+#### Commands
+
+-   Style tweaks to fix metrics for resting and no results view in command palette. ([53497](https://github.com/WordPress/gutenberg/pull/53497))
+-   Order template results in Site Editor, to fix some templates not displaying. ([53286](https://github.com/WordPress/gutenberg/pull/53286))
+-   Don't allow access to Styles-related pages via the command palette in the hybrid theme. ([53123](https://github.com/WordPress/gutenberg/pull/53123))
+
+#### Block Library
+
+-   Button block: Avoid losing user changes when the `ButtonEdit` component re-renders. ([53507](https://github.com/WordPress/gutenberg/pull/53507))
+-   Cover block: Fix flickering when inserted in templates and also fix `isDark` calculation bugs. ([53253](https://github.com/WordPress/gutenberg/pull/53253))
+-   Footnotes block:
+    -   Ensure autosave works and escapes quotes as expected. ([53664](https://github.com/WordPress/gutenberg/pull/53664))
+    -   Fix accidental override. ([53663](https://github.com/WordPress/gutenberg/pull/53663))
+    -   Fix recursion into updating attributes when attributes is not an object. ([53257](https://github.com/WordPress/gutenberg/pull/53257))
+    -   Remove Footnotes when interactive formatting is disabled. ([53474](https://github.com/WordPress/gutenberg/pull/53474))
+-   Image block:
+    -   Fix image stretching with only height. ([53443](https://github.com/WordPress/gutenberg/pull/53443))
+    -   Don't render `DimensionsTool` if it is not resizable. ([53181](https://github.com/WordPress/gutenberg/pull/53181))
+    -   Fix stretched images constrained by max-width. ([53274](https://github.com/WordPress/gutenberg/pull/53274))
+    -   Clear aspect ratio when wide aligned. ([53439](https://github.com/WordPress/gutenberg/pull/53439))
+    -   Change the conditions under which we display the scale control. ([53334](https://github.com/WordPress/gutenberg/pull/53334))
+    -   Reset height when selecting the original aspect ratio. ([53339](https://github.com/WordPress/gutenberg/pull/53339))
+-   Latest Posts block: Make categories handling more defensive to prevent multisite error. ([53659](https://github.com/WordPress/gutenberg/pull/53659))
+-   Media & Text block: Fix deprecation with `isStackOnMobile` default value changed. ([49538](https://github.com/WordPress/gutenberg/pull/49538))
+-   Inject theme stylesheet value as template part theme attribute. ([53423](https://github.com/WordPress/gutenberg/pull/53423))
+-   Block serialization: Correctly compare default attribute values. ([53521](https://github.com/WordPress/gutenberg/pull/53521))
+
+#### Block Editor
+
+-   LinkControl: Prevent overflow when the title is a URL. ([53356](https://github.com/WordPress/gutenberg/pull/53356))
+-   Fix broken flows on Safari, including `ArrowUp` functionality in an empty paragraph ([53341](https://github.com/WordPress/gutenberg/pull/53341)) and multi-selection upon shift plus click ([53440](https://github.com/WordPress/gutenberg/pull/53440)).
+-   Restore focus after dragging out of the block repeatedly. ([53429](https://github.com/WordPress/gutenberg/pull/53429))
+-   Avoid merging paragraph into a Columns block. ([53508](https://github.com/WordPress/gutenberg/pull/53508))
+-   Prevent vertical arrow keys getting stuck in view. ([53454](https://github.com/WordPress/gutenberg/pull/53454))
+-   Set top toolbar size dynamically. ([53526](https://github.com/WordPress/gutenberg/pull/53526))
+-   Support container queries in editor CSS. ([49915](https://github.com/WordPress/gutenberg/pull/49915))
+-   Copy tag name on internal paste. ([48254](https://github.com/WordPress/gutenberg/pull/48254))
+
+#### Site Editor
+
+-   Add missing i18n in `HomeTemplateDetails`. ([53543](https://github.com/WordPress/gutenberg/pull/53543))
+-   Add buttons for block settings and styles in smaller viewport. ([53412](https://github.com/WordPress/gutenberg/pull/53412))
+-   Ensure canvas edit mode button occupies the entire frame canvas. ([53730](https://github.com/WordPress/gutenberg/pull/53730))
+-   Fix document actions label helper method. ([52974](https://github.com/WordPress/gutenberg/pull/52974))
+-   Fix document title alignment in command palette button. ([53224](https://github.com/WordPress/gutenberg/pull/53224))
+
+#### Post Editor
+
+-   Address crash by moving editor style logic into a hook with `useMemo`. ([53596](https://github.com/WordPress/gutenberg/pull/53596))
+-   Fix support of sticky position in non-iframed post editor. ([53540](https://github.com/WordPress/gutenberg/pull/53540))
+-   Correct typo when setting the preview device type to 'Desktop'. ([53409](https://github.com/WordPress/gutenberg/pull/53409))
+-   Avoid returning a different object on every call to `getInsertionPoint`. ([53722](https://github.com/WordPress/gutenberg/pull/53722))
+-   Fix top toolbar in the post editor with custom fields in Safari. ([53688](https://github.com/WordPress/gutenberg/pull/53688))
+-   Improve metrics on post publish view buttons. ([53245](https://github.com/WordPress/gutenberg/pull/53245))
+
+#### Page Content Focus
+
+-   Fix missing Replace button in content-locked Image blocks. ([53410](https://github.com/WordPress/gutenberg/pull/53410))
+-   Fix BlockPreview in Template panel when editing a page in the site editor. ([53550](https://github.com/WordPress/gutenberg/pull/53550))
+-   Use `template.blocks` in BlockPreview if it exists. ([53611](https://github.com/WordPress/gutenberg/pull/53611))
+
+#### Navigation Menus
+
+-   Make all the 'Loading' strings consistent. ([52901](https://github.com/WordPress/gutenberg/pull/52901))
+-   Fix title not being copied correctly when duplicating navigation. ([53610](https://github.com/WordPress/gutenberg/pull/53610))
+-   Remove "go to" for terms and posts. ([53408](https://github.com/WordPress/gutenberg/pull/53408))
+
+#### Typography
+
+-   Fallback to default max viewport if layout wide size is fluid. ([53551](https://github.com/WordPress/gutenberg/pull/53551))
+-   Fix typo and add tests for fonts install endpoint. ([53644](https://github.com/WordPress/gutenberg/pull/53644))
+
+#### Patterns
+
+-   Fix Synced Patterns' color in quick inserter. ([53327](https://github.com/WordPress/gutenberg/pull/53327))
+-   Hide pattern previews on hover in inserter. ([53331](https://github.com/WordPress/gutenberg/pull/53331))
+-   Ensure it's possible to delete draft patterns. ([53405](https://github.com/WordPress/gutenberg/pull/53405))
+-   Fix pattern creation button in list view dropdown menu. ([53562](https://github.com/WordPress/gutenberg/pull/53562))
+-   Prevent sync status overlapping for some languages in patterns. ([53243](https://github.com/WordPress/gutenberg/pull/53243))
+
+#### Global Styles
+
+-   Fix push-to-global-styles clearing of attributes, border fallbacks, link hover colors, and behaviors. ([51621](https://github.com/WordPress/gutenberg/pull/51621))
+-   Preserve block style variations when securing theme json. ([53466](https://github.com/WordPress/gutenberg/pull/53466))
+
+#### Layout
+
+-   Don't add root padding to children of flex and grid layout blocks. ([53259](https://github.com/WordPress/gutenberg/pull/53259))
+-   Include namespace in layout classname for non-core blocks. ([53404](https://github.com/WordPress/gutenberg/pull/53404))
+
+#### Interactivity API
+
+-   Add short-circuit to `useSignalEffect`. ([53358](https://github.com/WordPress/gutenberg/pull/53358))
+-   Add support for underscores and leading dashes in the suffix part of the directive. ([53337](https://github.com/WordPress/gutenberg/pull/53337))
+-   Update deepsignal version. ([53549](https://github.com/WordPress/gutenberg/pull/53549))
+
+#### Components
+
+-   Button: Add `:Disabled` selector to reset hover color for disabled buttons. ([53411](https://github.com/WordPress/gutenberg/pull/53411))
+-   Preferences Modal: Insert path and query args to form before submitting. ([53324](https://github.com/WordPress/gutenberg/pull/53324))
+
+### Accessibility
+
+-   Type labels GH Action: Fix accessibility issues in error message. ([53371](https://github.com/WordPress/gutenberg/pull/53371))
+-   Add accessible description of current Navigation block state. ([53469](https://github.com/WordPress/gutenberg/pull/53469))
+-   Implement accessible version of Navigation overlay preview toggle control. ([53462](https://github.com/WordPress/gutenberg/pull/53462))
+-   Search Block: Fix unintended wrapping of button text in "Button only" style. ([53373](https://github.com/WordPress/gutenberg/pull/53373))
+
+### Performance
+
+-   Compute presets from `theme.json`: Skip those without classes or variables. ([53574](https://github.com/WordPress/gutenberg/pull/53574))
+-   Switch performance tests to Playwright. ([52022](https://github.com/WordPress/gutenberg/pull/52022))
+-   Fix memory leaks in `<Iframe>`. ([53406](https://github.com/WordPress/gutenberg/pull/53406))
+-   `get_root_layout_rules`: Remove unnecessary call to `sanitize_title`. ([53568](https://github.com/WordPress/gutenberg/pull/53568))
+
+### Experiments
+
+-   Fonts Library: Backend. ([52704](https://github.com/WordPress/gutenberg/pull/52704))
+-   Add custom connections inspector control. ([53241](https://github.com/WordPress/gutenberg/pull/53241))
+-   Allow contents of Paragraph to be "connected" to a meta custom field. ([53247](https://github.com/WordPress/gutenberg/pull/53247))
+-   Bootstrap a minimal sync package. ([52681](https://github.com/WordPress/gutenberg/pull/52681))
+
+### Documentation
+
+#### Project Docs
+
+-   Updating `lib/PHP` README.md. ([53614](https://github.com/WordPress/gutenberg/pull/53614))
+-   Add documentation for keyboard shortcut selecting text across multiple blocks. ([43164](https://github.com/WordPress/gutenberg/pull/43164))
+-   Add keyboard shortcut selecting text across multiple blocks on Windows. ([53625](https://github.com/WordPress/gutenberg/pull/53625))
+-   Docs/Gutenberg release process - Better table of contents. ([53394](https://github.com/WordPress/gutenberg/pull/53394))
+-   Add the auto-generated commands store documentation. ([52562](https://github.com/WordPress/gutenberg/pull/52562))
+
+#### Getting Started
+
+-   Developer Environment: Refer to Node 16 instead of 14. ([53523](https://github.com/WordPress/gutenberg/pull/53523))
+-   Create Block:
+    -   Fix typo in finishing.md. ([53609](https://github.com/WordPress/gutenberg/pull/53609))
+    -   Fix outdated specification in the "Anatomy of a Block". ([53581](https://github.com/WordPress/gutenberg/pull/53581))
+
+#### How To Guides
+
+-   Block Tutorial:
+    -   Adds import from `@wordpress/i18n` in code example. ([53504](https://github.com/WordPress/gutenberg/pull/53504))
+    -   Adds package.json configuration instructions to tutorial. ([53689](https://github.com/WordPress/gutenberg/pull/53689))
+-   Building a Custom Block Editor: Consolidate and update the guide. ([53159](https://github.com/WordPress/gutenberg/pull/53159))
+-   Curating the Editor Experience: Include starter patterns for templates. ([53398](https://github.com/WordPress/gutenberg/pull/53398))
+
+#### Components
+
+-   Popover: Fix iframe story and add test. ([53182](https://github.com/WordPress/gutenberg/pull/53182))
+-   BlockCaption: Add README for component. ([52535](https://github.com/WordPress/gutenberg/pull/52535))
+-   useSetting: Add README for component. ([53162](https://github.com/WordPress/gutenberg/pull/53162))
+-   SelectControl: Update JSDoc. ([53379](https://github.com/WordPress/gutenberg/pull/53379))
+-   Card: Update Card component document. ([53172](https://github.com/WordPress/gutenberg/pull/53172))
+-   MenuGroup: Add Storybook stories. ([53090](https://github.com/WordPress/gutenberg/pull/53090))
+-   Edit Post: Update "PluginDocumentSettingPanel" documentation. ([53393](https://github.com/WordPress/gutenberg/pull/53393))
+-   Interface: Fix "complimentary" typo with "complementary". ([53413](https://github.com/WordPress/gutenberg/pull/53413))
+
+#### Interactivity API
+
+-   Revamp of README to include API Reference among other indications. ([53385](https://github.com/WordPress/gutenberg/pull/53385))
+-   Add missing section in ToC and minor improvements to Getting Started Guide. ([53362](https://github.com/WordPress/gutenberg/pull/53362))
+-   Update Interactivity API package README with clear references to documentation. ([53388](https://github.com/WordPress/gutenberg/pull/53388))
+-   Add code requirements to Interactivity API documentation. ([53342](https://github.com/WordPress/gutenberg/pull/53342))
+-   Add JSDoc comments to the public API. ([52469](https://github.com/WordPress/gutenberg/pull/52469))
+
+#### Packages
+
+-   Create Block: Update npx commands in README.md. ([47150](https://github.com/WordPress/gutenberg/pull/47150))
+-   Data: Add changelog entry for the latest `useSelect` enhancement. ([53685](https://github.com/WordPress/gutenberg/pull/53685))
+-   Style Engine: Update documentation for css_var. ([53710](https://github.com/WordPress/gutenberg/pull/53710))
+
+### Code Quality
+
+-   Remove @types/classnames deprecated package. ([53478](https://github.com/WordPress/gutenberg/pull/53478))
+-   Remove `gutenberg_initialize_editor`. ([53527](https://github.com/WordPress/gutenberg/pull/53527))
+-   Update package-lock.json to match 16.4.0 version number. ([53499](https://github.com/WordPress/gutenberg/pull/53499))
+
+#### Block Library
+
+-   Button block: Replace the `isSmall` deprecated prop in the `WidthPanel`. ([53472](https://github.com/WordPress/gutenberg/pull/53472))
+-   Details block: Remove unnecessary comment attributes. ([51610](https://github.com/WordPress/gutenberg/pull/51610))
+-   Footnotes block:
+    -   Add some test coverage for footnotes logic in useEntityBlockEditor. ([53376](https://github.com/WordPress/gutenberg/pull/53376))
+    -   Checking type before using count(). ([53660](https://github.com/WordPress/gutenberg/pull/53660))
+-   LinkControl/LinkUI: Remove unused `className` prop. ([53348](https://github.com/WordPress/gutenberg/pull/53348))
+-   Remove unneeded block.json name-only imports. ([53677](https://github.com/WordPress/gutenberg/pull/53677))
+-   Template parts: Return a stable reference for the defined 'area'. ([53675](https://github.com/WordPress/gutenberg/pull/53675))
+
+#### Components
+
+-   ESLint: Fix all `storybook/prefer-pascal-case` warnings. ([53683](https://github.com/WordPress/gutenberg/pull/53683))
+-   Remove unused components from `/ui`. ([52953](https://github.com/WordPress/gutenberg/pull/52953))
+-   MenuItem: Refactor to TypeScript. ([53132](https://github.com/WordPress/gutenberg/pull/53132))
+-   Move accent colors to theme context. ([53631](https://github.com/WordPress/gutenberg/pull/53631))
+-   Interface: Fix ESLint warnings. ([53456](https://github.com/WordPress/gutenberg/pull/53456))
+-   Plugins: Introduce the `usePluginContext` hook. ([53291](https://github.com/WordPress/gutenberg/pull/53291))
+-   Remove effect dep in Link Control. ([53421](https://github.com/WordPress/gutenberg/pull/53421))
+
+#### Data Layer
+
+-   Data: Warn if the `useSelect` hook returns different values when called with the same state and parameters. ([53666](https://github.com/WordPress/gutenberg/pull/53666))
+
+#### Site Editor
+
+-   Remove unnecessary `as` prop from `SiteHub` component. ([53372](https://github.com/WordPress/gutenberg/pull/53372))
+-   Create patterns package and share the create pattern modal between post editor and site editor. ([53161](https://github.com/WordPress/gutenberg/pull/53161))
+
+#### Post Editor
+
+-   Migrate PostTypeSupportCheck usages from withSelect to hooks. ([53330](https://github.com/WordPress/gutenberg/pull/53330))
+-   UnsavedChangesWarning: Don't return a function from 'mapSelect'. ([53672](https://github.com/WordPress/gutenberg/pull/53672))
+-   Replace HoCs with hooks in:
+    -   `PluginDocumentSettingPanel` ([53290](https://github.com/WordPress/gutenberg/pull/53290))
+    -   `PostPendingStatusCheck` ([53389](https://github.com/WordPress/gutenberg/pull/53389))
+    -   `PostPendingStatus` ([53387](https://github.com/WordPress/gutenberg/pull/53387))
+-   Replace `withPluginContext` in `PluginPostPublishPanel` ([53302](https://github.com/WordPress/gutenberg/pull/53302)) and `PluginPrePublishPanel` ([53304](https://github.com/WordPress/gutenberg/pull/53304)).
+-   Block previews: Memoize example blocks. ([53640](https://github.com/WordPress/gutenberg/pull/53640))
+
+#### Global Styles
+
+-   Try: Bundle `WP_REST_Global_Styles_Controller` class instead of inheriting per WordPress version. ([53618](https://github.com/WordPress/gutenberg/pull/53618))
+-   Remove empty usages of `BlockPreviewPanel`. ([53681](https://github.com/WordPress/gutenberg/pull/53681))
+
+#### Block Editor
+
+-   Remove Firefox work-around to type Space in RichText components inside button/summary. ([53014](https://github.com/WordPress/gutenberg/pull/53014))
+-   Rich text: Small perf improvement for selection syncing. ([53583](https://github.com/WordPress/gutenberg/pull/53583))
+-   Auto-inserting blocks: Minor fixes to address feedback. ([53183](https://github.com/WordPress/gutenberg/pull/53183))
+
+### Tools
+
+#### Project Management
+
+-   Remove automation that checks-in ANY issue without activity in 180 days. ([53390](https://github.com/WordPress/gutenberg/pull/53390))
+
+#### Build Tooling
+
+-   Update minimal node version to 16 and npm to 8. ([53426](https://github.com/WordPress/gutenberg/pull/53426))
+-   Update to TypeScript 5.1. ([52621](https://github.com/WordPress/gutenberg/pull/52621))
+-   Update Lerna to 7.1.4. ([53515](https://github.com/WordPress/gutenberg/pull/53515))
+-   Update Storybook to v7. ([53520](https://github.com/WordPress/gutenberg/pull/53520))
+-   Update `npm-package-json-lint` to v6. ([53636](https://github.com/WordPress/gutenberg/pull/53636))
+-   Update `mkdirp` dependency. ([53529](https://github.com/WordPress/gutenberg/pull/53529))
+-   ESLint Plugin: Bring JSDoc plugin to the latest version. ([53629](https://github.com/WordPress/gutenberg/pull/53629))
+-   Add Storybook TypesSript plugin for compatibility with TypeScript 5. ([53445](https://github.com/WordPress/gutenberg/pull/53445))
+-   Update the "update plugin version" workflow step so that it also updates the nested package version for Gutenberg. ([53503](https://github.com/WordPress/gutenberg/pull/53503))
+-   Fix wp-scripts watch mode failing when `block.json` contains malformed JSON. ([51971](https://github.com/WordPress/gutenberg/pull/51971))
+-   Remove deprecated `stable` deep dependency. ([53630](https://github.com/WordPress/gutenberg/pull/53630))
+-   Add some missing internal peer dependencies. ([53275](https://github.com/WordPress/gutenberg/pull/53275))
+-   Add some missing package dependencies. ([41486](https://github.com/WordPress/gutenberg/pull/41486))
+
+#### Testing
+
+-   Migrate 'Block variations' end-to-end tests to Playwright. ([53266](https://github.com/WordPress/gutenberg/pull/53266))
+-   Interactivity API: Add missing tests for `body`, `init` and `on` directives. ([52952](https://github.com/WordPress/gutenberg/pull/52952))
+-   Cover block: Add integration tests to check isDark settings. ([53256](https://github.com/WordPress/gutenberg/pull/53256))
+-   Writing flow: Add end-to-end tests for webkit and firefox. ([53458](https://github.com/WordPress/gutenberg/pull/53458))
+-   Add tests for fluid layout and typography. ([53554](https://github.com/WordPress/gutenberg/pull/53554))
+-   Block editor: Webkit e2e: Attempt to fix shift+click test. ([53564](https://github.com/WordPress/gutenberg/pull/53564))
+-   end-to-end Storybook: Fix for Storybook v7. ([53658](https://github.com/WordPress/gutenberg/pull/53658))
+-   Dependencies: Update `@testing-library/react` to v14. ([53682](https://github.com/WordPress/gutenberg/pull/53682))
+-   Multi-select: Restore pre-Playwright migration test for failed selection attempt. ([53418](https://github.com/WordPress/gutenberg/pull/53418))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @behoney: fix: Typo in finishing.md. ([53609](https://github.com/WordPress/gutenberg/pull/53609))
+-   @bengreeley: Add documentation for keyboard shortcut selecting text across multiple blocks. ([43164](https://github.com/WordPress/gutenberg/pull/43164))
+-   @doughamlin: Update npx commands in create-block README.md. ([47150](https://github.com/WordPress/gutenberg/pull/47150))
+-   @ducksblock: Fix: #52886 Make all the 'Loading' strings consistent. ([52901](https://github.com/WordPress/gutenberg/pull/52901))
+-   @rtro92: Adds import for internationalization. ([53504](https://github.com/WordPress/gutenberg/pull/53504))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @alexstine @Aljullu @andrewserong @annezazu @anomiex @artemiomorales @atachibana @bangank36 @behoney @bengreeley @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @derekblank @doughamlin @draganescu @dsas @ducksblock @ellatrix @fabiankaegy @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @ingeniumed @jameskoster @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @Mamaduka @matiasbenedetto @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @oandregal @ockham @pbking @priethor @ramonjd @richtabor @rtro92 @scruffian @SiobhyB @stokesman @swissspidy @t-hamano @tellthemachines @tjcafferkey @tomjn @tyxla @WunderBart @youknowriad
+
+= 16.4.0 =
+
+## Changelog
+
+### Features
+
+#### Components
+
+-   Introduce a basic ProgressBar component. ([53030](https://github.com/WordPress/gutenberg/pull/53030))
+
+#### Block Editor
+
+-   Link Control: Persist advanced settings toggle state to preferences if available. ([52799](https://github.com/WordPress/gutenberg/pull/52799))
+
+#### Block Library
+
+-   Behaviors: Extend Global Styles API to read/write behaviors config. ([52370](https://github.com/WordPress/gutenberg/pull/52370))
+
+### Enhancements
+
+#### Site Editor
+
+-   Add context to the "Reset template" "Delete template" and "Edit template" commands. ([52989](https://github.com/WordPress/gutenberg/pull/52989))
+-   Add `xhuge` breakpoint (1920px) and update pattern grid. ([52942](https://github.com/WordPress/gutenberg/pull/52942))
+-   Display keyboard shortcut for command palette in site view. ([52841](https://github.com/WordPress/gutenberg/pull/52841))
+-   Make sure only one Site updated notice displays at a time. ([53087](https://github.com/WordPress/gutenberg/pull/53087))
+-   Pattern library: Switch to three column layout on `huge` screens. ([52927](https://github.com/WordPress/gutenberg/pull/52927))
+-   Template Descriptions: Tidy up all abbreviations of 'example' to be e.g. ([52848](https://github.com/WordPress/gutenberg/pull/52848))
+-   Try adding further details to template part panel. ([52476](https://github.com/WordPress/gutenberg/pull/52476))
+-   Update the `ConfirmDialog` that appears when applying a style revision over unsaved changes. ([52972](https://github.com/WordPress/gutenberg/pull/52972))
+-   Update: Improve titles of author templates in query title block. ([52732](https://github.com/WordPress/gutenberg/pull/52732))
+
+#### Post Editor
+
+-   Add common commands (breadcrumbs, live preview, pre-publish checklist). ([53073](https://github.com/WordPress/gutenberg/pull/53073))
+-   Use hooks instead of HoCs for:
+    -   `DiscussionPanel`. ([53232](https://github.com/WordPress/gutenberg/pull/53232))
+    -   `PostPingbacks`. ([53228](https://github.com/WordPress/gutenberg/pull/53228))
+    -   `PostComments`. ([53231](https://github.com/WordPress/gutenberg/pull/53231))
+    -   `PostExcerpt`. ([53229](https://github.com/WordPress/gutenberg/pull/53229))
+    -   `PostTypeSupportCheck`. ([53235](https://github.com/WordPress/gutenberg/pull/53235))
+
+#### Block Library
+
+-   Footnotes: Add link, background, and text color support. ([52897](https://github.com/WordPress/gutenberg/pull/52897))
+-   Image block: Fix flaky tests. ([52442](https://github.com/WordPress/gutenberg/pull/52442))
+-   Preformatted: Add spacing support. ([45196](https://github.com/WordPress/gutenberg/pull/45196))
+-   Social Links: Add Threads Icon. ([52685](https://github.com/WordPress/gutenberg/pull/52685))
+-   Verse: Enable the line breaks. ([52928](https://github.com/WordPress/gutenberg/pull/52928))
+
+#### Patterns
+
+-   Align height of save button and patterns pagination. ([52764](https://github.com/WordPress/gutenberg/pull/52764))
+-   Allow inserting of unsynced patterns from quick inserter. ([52866](https://github.com/WordPress/gutenberg/pull/52866))
+-   Show the default patterns icons for all pattern blocks in inserter. ([53208](https://github.com/WordPress/gutenberg/pull/53208))
+-   Update the Manage all my patterns command to redirect to site editor patterns list. ([52817](https://github.com/WordPress/gutenberg/pull/52817))
+
+#### Interactivity API
+
+-   Use defer loading strategy for frontend view scripts. ([52536](https://github.com/WordPress/gutenberg/pull/52536))
+-   [create-block] Refinements to the create-block-interactive-template package. ([52801](https://github.com/WordPress/gutenberg/pull/52801))
+
+#### Components
+
+-   Settings: Show message when Visual or Code editor are disabled. ([52737](https://github.com/WordPress/gutenberg/pull/52737))
+-   `TabPanel`: Implement Ariakit internally. ([52133](https://github.com/WordPress/gutenberg/pull/52133))
+
+#### Global Styles
+
+-   Site editor: Conditionally render global styles revisions footer in sidebar. ([53204](https://github.com/WordPress/gutenberg/pull/53204))
+
+#### Block Editor
+
+-   Remove duplicated display URL in LinkControl. ([53167](https://github.com/WordPress/gutenberg/pull/53167))
+
+#### Synced Patterns
+
+-   Remove extraneous "Detach" ToolbarButton for synced patterns. ([53121](https://github.com/WordPress/gutenberg/pull/53121))
+
+#### Icons
+
+-   Add keyboard icon and use in relative commands. ([53083](https://github.com/WordPress/gutenberg/pull/53083))
+
+#### Plugin
+
+-   Bump plugin minimum supported PHP version to 7.0. ([52982](https://github.com/WordPress/gutenberg/pull/52982))
+
+#### Data Layer
+
+-   Promisify action creator return type for WP data dispatch. ([52530](https://github.com/WordPress/gutenberg/pull/52530))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Avatar: Fix global border styles generation. ([53007](https://github.com/WordPress/gutenberg/pull/53007))
+-   Check if object exists before accessing its properties. ([52870](https://github.com/WordPress/gutenberg/pull/52870))
+-   Cover block: Disable contrast checker. ([53080](https://github.com/WordPress/gutenberg/pull/53080))
+-   Disambiguate "Import" button string. ([52907](https://github.com/WordPress/gutenberg/pull/52907))
+-   Footnotes:
+    -   Footnotes/RichText: Fix getRichTextValues for deeply nested blocks. ([53034](https://github.com/WordPress/gutenberg/pull/53034))
+    -   Disable based on post type. ([52934](https://github.com/WordPress/gutenberg/pull/52934))
+    -   Disable for synced patterns and prevent duplication for pages in site editor. ([53003](https://github.com/WordPress/gutenberg/pull/53003))
+    -   Fix published preview. ([53072](https://github.com/WordPress/gutenberg/pull/53072))
+    -   Store in revisions. ([52686](https://github.com/WordPress/gutenberg/pull/52686))
+-   Image block: Fix image size at wide and full width. ([53184](https://github.com/WordPress/gutenberg/pull/53184))
+-   Navigation Sidebar: Fetch the blocks from the content when trying to load navigations. ([52899](https://github.com/WordPress/gutenberg/pull/52899))
+-   Navigation: Load the raw property on the navigation fallback. ([52758](https://github.com/WordPress/gutenberg/pull/52758))
+-   Remove block tools back compat component schedule for deprecated in 6.3. ([53115](https://github.com/WordPress/gutenberg/pull/53115))
+-   Verse: Disable line breaks. ([52783](https://github.com/WordPress/gutenberg/pull/52783))
+-   Video: Fixing styles that vertical alignment of the video. ([53131](https://github.com/WordPress/gutenberg/pull/53131))
+
+#### Site Editor
+
+-   Add navigation type to title labels map. ([53074](https://github.com/WordPress/gutenberg/pull/53074))
+-   Command Palette:
+    -   Add `Open styles revisions` command conditionally. ([52945](https://github.com/WordPress/gutenberg/pull/52945))
+    -   Command Palette: Remove double border on results pages. ([52873](https://github.com/WordPress/gutenberg/pull/52873))
+    -   CommandPalette: Fixed to not execute commands in IME composition. ([52844](https://github.com/WordPress/gutenberg/pull/52844))
+    -   Defer to preceding handlers in command palette keyboard shortcut. ([53001](https://github.com/WordPress/gutenberg/pull/53001))
+    -   [Core Commands]: Handle navigation commands based on access of site editor. ([52987](https://github.com/WordPress/gutenberg/pull/52987))
+-   Fix block top toolbar artifact in navigation isolation. ([53110](https://github.com/WordPress/gutenberg/pull/53110))
+-   Fix canvas mode sync with URL. ([52996](https://github.com/WordPress/gutenberg/pull/52996))
+-   Fix the template parts link on the list page. ([52891](https://github.com/WordPress/gutenberg/pull/52891))
+-   Open template parts from the list page in canvas view mode. ([52916](https://github.com/WordPress/gutenberg/pull/52916))
+-   Fix the typo in the title label map. ([53071](https://github.com/WordPress/gutenberg/pull/53071))
+-   Fix: Block toolbar obscuring document tools when Top Toolbar is enabled. ([52722](https://github.com/WordPress/gutenberg/pull/52722))
+-   ResizableFrame: Account for window resizing. ([52697](https://github.com/WordPress/gutenberg/pull/52697))
+-   Sidebar: Restore Back button 'go to parent' functionality. ([52910](https://github.com/WordPress/gutenberg/pull/52910))
+-   Top toolbar: Fix issues with save button overlap and plugin buttons. ([53101](https://github.com/WordPress/gutenberg/pull/53101))
+-   Update document title buttons radius. ([53221](https://github.com/WordPress/gutenberg/pull/53221))
+
+#### Patterns
+
+-   Add id to pattern inserted notice to stop multiple notices stacking. ([52746](https://github.com/WordPress/gutenberg/pull/52746))
+-   Allow orphaned template parts to appear in "general" category. ([52961](https://github.com/WordPress/gutenberg/pull/52961))
+-   Correctly color code unsynced patterns titles in Site Editor. ([52958](https://github.com/WordPress/gutenberg/pull/52958))
+-   Fix auto-size patterns triggering scrollbar flickering on certain size. ([52921](https://github.com/WordPress/gutenberg/pull/52921))
+-   Fix color and behavior of unsynced patterns in block inserter when searching for `reusable`. ([53205](https://github.com/WordPress/gutenberg/pull/53205))
+-   Fix editor crashing on certain search filter combinations. ([52956](https://github.com/WordPress/gutenberg/pull/52956))
+-   Fix empty general template parts in Patterns. ([52747](https://github.com/WordPress/gutenberg/pull/52747))
+-   Fix not expanding pattern in page editor. ([53169](https://github.com/WordPress/gutenberg/pull/53169))
+-   Fix: Snack bar not fixed on certain pages in the Site Editor. ([53207](https://github.com/WordPress/gutenberg/pull/53207))
+-   Pattern: Add getBlockRootClientId call. ([53206](https://github.com/WordPress/gutenberg/pull/53206))
+-   Patterns Browse Screen: Fix back button when switching between categories. ([52964](https://github.com/WordPress/gutenberg/pull/52964))
+-   Reset current page when search filters change. ([52933](https://github.com/WordPress/gutenberg/pull/52933))
+-   Site Editor: Fix site link accessibility issues. ([52744](https://github.com/WordPress/gutenberg/pull/52744))
+-   Site Editor: Use the correct icon for Patterns in sidebar card. ([52931](https://github.com/WordPress/gutenberg/pull/52931))
+
+#### Post Editor
+
+-   Allow styles to be changed dynamically through editor settings. ([52767](https://github.com/WordPress/gutenberg/pull/52767))
+-   Distraction Free: Fix conflict with `showListViewByDefault` preference. ([52914](https://github.com/WordPress/gutenberg/pull/52914))
+-   Editor: Set default parameter for '\_\_unstableSaveForPreview'. ([53079](https://github.com/WordPress/gutenberg/pull/53079))
+-   Fix toolbar when previewing devices in post editor. ([52770](https://github.com/WordPress/gutenberg/pull/52770))
+-   I18N: Add missing Gettext wrapper on strings in Edit Post overview sidebar. ([52971](https://github.com/WordPress/gutenberg/pull/52971))
+-   shimAttributeSource: Don't run outside the registerBlockType filter. ([53015](https://github.com/WordPress/gutenberg/pull/53015))
+
+#### Global Styles
+
+-   Global styles revisions: Display text if no revisions are found. ([52865](https://github.com/WordPress/gutenberg/pull/52865))
+-   Spacing presets: Fix bug with select control adding undefined preset values. ([53005](https://github.com/WordPress/gutenberg/pull/53005))
+-   Style Engine: Switch off optimize by default. ([53085](https://github.com/WordPress/gutenberg/pull/53085))
+
+#### Block Editor
+
+-   Fix spacing for LinkControl actions. ([53055](https://github.com/WordPress/gutenberg/pull/53055))
+-   List: Allow ENTER on multi-selection. ([52947](https://github.com/WordPress/gutenberg/pull/52947))
+-   List: Fix merging nested lists. ([52949](https://github.com/WordPress/gutenberg/pull/52949))
+
+#### Design Tools
+
+-   Borders: Prevent console error when clearing custom border color. ([52963](https://github.com/WordPress/gutenberg/pull/52963))
+-   Check if spacing tool is defined before displaying controls. ([53008](https://github.com/WordPress/gutenberg/pull/53008))
+
+#### Distraction Free
+
+-   Add missing command in Site Editor. ([52868](https://github.com/WordPress/gutenberg/pull/52868))
+-   Distraction Free Keyboard Shortcut: Fix notices in Site Editor. ([52867](https://github.com/WordPress/gutenberg/pull/52867))
+
+#### Layout
+
+-   Prevent the Dimensions UI from being displayed when the block does not support Dimensions. ([53092](https://github.com/WordPress/gutenberg/pull/53092))
+
+#### List View
+
+-   Ensure `onBlockDrop` does not fire if there is no target. ([52959](https://github.com/WordPress/gutenberg/pull/52959))
+
+#### Template Editor
+
+-   Site Editor: Don't navigate to the patterns in Template Parts mode. ([52884](https://github.com/WordPress/gutenberg/pull/52884))
+
+#### Navigation Menus
+
+-   Navigation: Backport Core changes for the navigation fallback. ([52878](https://github.com/WordPress/gutenberg/pull/52878))
+
+#### REST API
+
+-   Global styles revisions: Update `private` methods to `protected`. ([52748](https://github.com/WordPress/gutenberg/pull/52748))
+
+#### Block API
+
+-   Parser / Site Editor: Ensure `autop` is not run when freeform block is set to core/html. ([52716](https://github.com/WordPress/gutenberg/pull/52716))
+
+### Accessibility
+
+-   Fix regression with Edit site Navigate regions. ([52940](https://github.com/WordPress/gutenberg/pull/52940))
+-   Return focus more from focus return hook. ([52710](https://github.com/WordPress/gutenberg/pull/52710))
+-   [Commands]: Add `aria-activedescendant` attribute to suggestions. ([52930](https://github.com/WordPress/gutenberg/pull/52930))
+
+#### Components
+
+-   ColorPalette, BorderControl: Don't hyphenate HEX value in `aria-label`. ([52932](https://github.com/WordPress/gutenberg/pull/52932))
+-   `Modal`: Fix loss of focus when clicking outside. ([52653](https://github.com/WordPress/gutenberg/pull/52653))
+
+#### Patterns
+
+-   My Patterns page: Increase color contrast for the toggle group. ([52678](https://github.com/WordPress/gutenberg/pull/52678))
+
+#### Post Editor
+
+-   Improve consistency of the Post Editor and Site Editor Document actions. ([52246](https://github.com/WordPress/gutenberg/pull/52246))
+
+### Performance
+
+-   Replace `array_key_exists()` with `isset()` check. ([53098](https://github.com/WordPress/gutenberg/pull/53098))
+
+#### Block Library
+
+-   Footnotes: Use static closures when not using '$this'. ([52781](https://github.com/WordPress/gutenberg/pull/52781))
+
+### Experiments
+
+#### Block Library
+
+-   Set freeform handler only if Classic block exists. ([52936](https://github.com/WordPress/gutenberg/pull/52936))
+-   Backend handle freeform blocks with TinyMCE removal. ([52938](https://github.com/WordPress/gutenberg/pull/52938))
+-   Fix TinyMCE removal for heartbeat requests. ([52935](https://github.com/WordPress/gutenberg/pull/52935))
+
+#### Interactivity API
+
+-   Improve the Interactivity API priority levels logic. ([52323](https://github.com/WordPress/gutenberg/pull/52323))
+-   Remove the `wp-show` directive temporarily. ([53240](https://github.com/WordPress/gutenberg/pull/53240))
+
+#### Block API
+
+-   Auto-inserting blocks on the frontend and in the editor (via REST API). ([51449](https://github.com/WordPress/gutenberg/pull/51449))
+
+### Documentation
+
+-   API Reference documentation for Interactivity API. ([52948](https://github.com/WordPress/gutenberg/pull/52948))
+-   Adding description of the `--no-watch` option. ([53139](https://github.com/WordPress/gutenberg/pull/53139))
+-   Adds documentation about selectors. ([52941](https://github.com/WordPress/gutenberg/pull/52941))
+-   Add Block API Version 3. ([53046](https://github.com/WordPress/gutenberg/pull/53046))
+-   Added missing images via developer.wp.org site. ([53051](https://github.com/WordPress/gutenberg/pull/53051))
+-   Clarify that `blockGap` support depends on layout support. ([53254](https://github.com/WordPress/gutenberg/pull/53254))
+-   Interactivity API > Getting Started Guide - minor adjustments. ([52786](https://github.com/WordPress/gutenberg/pull/52786))
+-   Update Appearance Tools. ([52785](https://github.com/WordPress/gutenberg/pull/52785))
+-   Open "docs" folder for the Interactivity API package and Getting Started Guide. ([52462](https://github.com/WordPress/gutenberg/pull/52462))
+-   Update the Gutenberg release process documentation. ([52955](https://github.com/WordPress/gutenberg/pull/52955))
+
+### Code Quality
+
+-   Add options for debugging PHP unit tests in package.json. ([52778](https://github.com/WordPress/gutenberg/pull/52778))
+-   Block Editor: Fix ESLint warning for the `useBlockEditingMode` hook. ([53218](https://github.com/WordPress/gutenberg/pull/53218))
+-   Block Editor: Simplify check in 'withBlockControls' styles hook. ([53227](https://github.com/WordPress/gutenberg/pull/53227))
+-   BlockVariationPicker: Remove unused `withSelect`. ([53100](https://github.com/WordPress/gutenberg/pull/53100))
+-   Enforce checks against redeclaration for functions and classes. ([52696](https://github.com/WordPress/gutenberg/pull/52696))
+-   Improve the efficiency of the `useDebouncedInput` hook. ([53263](https://github.com/WordPress/gutenberg/pull/53263))
+-   Refactor `useShowMoversGestures` hook. ([52792](https://github.com/WordPress/gutenberg/pull/52792))
+-   Remove `withSpokenMessages` HoC from the Link format. ([53106](https://github.com/WordPress/gutenberg/pull/53106))
+-   Site Editor: Remove unnecessary hook from 'PageTemplates'. ([52903](https://github.com/WordPress/gutenberg/pull/52903))
+-   [Create Block] Add support for the example property and add template defaults. ([52803](https://github.com/WordPress/gutenberg/pull/52803))
+
+#### Block Library
+
+-   Add PHP since annotations. ([52820](https://github.com/WordPress/gutenberg/pull/52820))
+-   Footnotes: Add missing \_ in revision field filter. ([53135](https://github.com/WordPress/gutenberg/pull/53135))
+-   Refactor navigation title usage. ([52807](https://github.com/WordPress/gutenberg/pull/52807))
+-   Template Part Block: Use `get_block_file_template` for rendering. ([52892](https://github.com/WordPress/gutenberg/pull/52892))
+
+#### Global Styles
+
+-   Don't use named arguments for `sprintf`. ([52782](https://github.com/WordPress/gutenberg/pull/52782))
+-   Remove experimental setting for interactivity API and behaviors. ([52833](https://github.com/WordPress/gutenberg/pull/52833))
+-   Site editor: Update function name. ([52869](https://github.com/WordPress/gutenberg/pull/52869))
+-   Update PHP unit tests. ([52819](https://github.com/WordPress/gutenberg/pull/52819))
+
+#### Interactivity API
+
+-   Move Store's data encoding to the `echo` call. ([51974](https://github.com/WordPress/gutenberg/pull/51974))
+-   Update the `block.json` schema to include Behavior supports. ([52895](https://github.com/WordPress/gutenberg/pull/52895))
+
+#### Typography
+
+-   Fluid typography: Rename viewport variables. ([53082](https://github.com/WordPress/gutenberg/pull/53082))
+
+#### Components
+
+-   Update framer-motion to 10.13.0. ([52804](https://github.com/WordPress/gutenberg/pull/52804))
+
+#### Themes
+
+-   Behaviors - Lightbox: Update theme.json schema. ([51156](https://github.com/WordPress/gutenberg/pull/51156))
+
+### Tools
+
+-   Add GH action to enforce PR labels. ([52760](https://github.com/WordPress/gutenberg/pull/52760))
+-   Changelog automation:
+    -   Make Accessibility a top-level section. ([52900](https://github.com/WordPress/gutenberg/pull/52900))
+    -   Update to work with consolidated a11y labels. ([52896](https://github.com/WordPress/gutenberg/pull/52896))
+    -   Use the correct label to filter Mobile app PRs. ([53024](https://github.com/WordPress/gutenberg/pull/53024))
+-   Enforce PR labels:
+    -   Change permissions to `read`. ([52980](https://github.com/WordPress/gutenberg/pull/52980))
+    -   Fully re-enabling the pre-merge check. ([52990](https://github.com/WordPress/gutenberg/pull/52990))
+    -   Make PR label checks non-blocking to merge while trying a different GH token setting. ([52975](https://github.com/WordPress/gutenberg/pull/52975))
+    -   Try using a different token. ([52979](https://github.com/WordPress/gutenberg/pull/52979))
+    -   Use `pull_request_target` trigger to work with PRs coming from forks. ([52981](https://github.com/WordPress/gutenberg/pull/52981))
+-   Use proper casing on PR template. ([52999](https://github.com/WordPress/gutenberg/pull/52999))
+
+#### Testing
+
+-   Add end-to-end tests for Behaviors in the site editor. ([52809](https://github.com/WordPress/gutenberg/pull/52809))
+-   Ignore local test theme folders created by `wp-env`. ([53031](https://github.com/WordPress/gutenberg/pull/53031))
+-   Improve slug generation & matching in request utils. ([52414](https://github.com/WordPress/gutenberg/pull/52414))
+-   Migrate 'iframed inline styles' end-to-end tests to Playwright. ([53269](https://github.com/WordPress/gutenberg/pull/53269))
+-   Migrate Allowed Block Test to Playwright. ([53171](https://github.com/WordPress/gutenberg/pull/53171))
+-   Patterns: Reinstate template parts mode spec. ([52780](https://github.com/WordPress/gutenberg/pull/52780))
+-   Route to published post instead of homepage on navigation end-to-end tests. ([52802](https://github.com/WordPress/gutenberg/pull/52802))
+-   Temporarily skip widget import end-to-end test. ([53226](https://github.com/WordPress/gutenberg/pull/53226))
+-   Update end-to-end tests that use code editor. ([52788](https://github.com/WordPress/gutenberg/pull/52788))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @Armondal: Adding description of the `--no-watch` option. ([53139](https://github.com/WordPress/gutenberg/pull/53139))
+-   @lunaluna: Video: Fixing styles that vertical alignment of the video. ([53131](https://github.com/WordPress/gutenberg/pull/53131))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewserong @anton-vlasenko @Armondal @artemiomorales @audrasjb @bph @c4rl0sbr4v0 @carolinan @chad1008 @danielbachhuber @DAreRodz @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeherve @jeryj @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @lunaluna @Mamaduka @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @ntsekouras @ockham @pedro-mendonca @pooja-muchandikar @priethor @ramonjd @richtabor @ryanwelcher @scruffian @shimotmk @Soean @stokesman @swissspidy @t-hamano @tellthemachines @torounit @tyxla @westonruter @WunderBart
+
+= 16.3.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+-   Add delay and fade-in animation to loading spinner. ([51902](https://github.com/WordPress/gutenberg/pull/51902))
+-   Make "My patterns" category permanently visible. ([52531](https://github.com/WordPress/gutenberg/pull/52531))
+-   Remove "Theme patterns" heading in Pattern library. ([52570](https://github.com/WordPress/gutenberg/pull/52570))
+-   Remove sidebar group descriptions. ([52453](https://github.com/WordPress/gutenberg/pull/52453))
+-   Show warning on removal of Post Template block in the site editor. ([52666](https://github.com/WordPress/gutenberg/pull/52666))
+-   Swap pattern creation options. ([52726](https://github.com/WordPress/gutenberg/pull/52726))
+-   Update Dashboard button tooltips in the site editor. ([52465](https://github.com/WordPress/gutenberg/pull/52465))
+-   Update Site Editor frame z-index. ([52180](https://github.com/WordPress/gutenberg/pull/52180))
+-   Update locked pattern tooltips. ([52497](https://github.com/WordPress/gutenberg/pull/52497))
+-   Update navigation menu title size & weight in detail panels. ([52477](https://github.com/WordPress/gutenberg/pull/52477))
+-   Update pattern library copy. ([52340](https://github.com/WordPress/gutenberg/pull/52340))
+-   Show more intuitive archive titles on Query Title block. ([52521](https://github.com/WordPress/gutenberg/pull/52521))
+-   Adapt template part hint copy. ([52527](https://github.com/WordPress/gutenberg/pull/52527))
+
+#### Patterns
+
+-   Add hint to show template part move. ([52395](https://github.com/WordPress/gutenberg/pull/52395))
+-   Add renaming, duplication, and deletion options. ([52270](https://github.com/WordPress/gutenberg/pull/52270))
+-   Add sync tooltip. ([52458](https://github.com/WordPress/gutenberg/pull/52458))
+-   Display all custom template part areas in sidebar nav. ([52355](https://github.com/WordPress/gutenberg/pull/52355))
+-   Don't override the rootClientID in create menu - only set if undefined. ([52713](https://github.com/WordPress/gutenberg/pull/52713))
+-   Enable focus mode editing. ([52427](https://github.com/WordPress/gutenberg/pull/52427))
+-   Remove `reusable` text from menu once rename hint has been dismissed. ([52664](https://github.com/WordPress/gutenberg/pull/52664))
+-   Stop endless snackbars appearing. ([52012](https://github.com/WordPress/gutenberg/pull/52012))
+-   Sticky header and pagination on Patterns page. ([52663](https://github.com/WordPress/gutenberg/pull/52663))
+-   Update manage pattern links to go to site editor if available. ([52403](https://github.com/WordPress/gutenberg/pull/52403))
+-   Separate sync status into a filter control. ([52303](https://github.com/WordPress/gutenberg/pull/52303))
+
+#### Components
+
+-   Adding support for defined IDs in `TextControl` component. ([52028](https://github.com/WordPress/gutenberg/pull/52028))
+-   Updated "position" default value. ([52148](https://github.com/WordPress/gutenberg/pull/52148))
+
+#### Interactivity API
+
+-   Add filter to turn off Interactivity API for a block. ([52579](https://github.com/WordPress/gutenberg/pull/52579))
+-   Add runtime support for the `wp-style` directive. ([52645](https://github.com/WordPress/gutenberg/pull/52645))
+
+#### Block Library
+
+-   Add back old Navigation and File blocks JavaScript implementation when Gutenberg is not installed. ([52553](https://github.com/WordPress/gutenberg/pull/52553))
+-   Home link block: Add 'current-menu-item'. ([51478](https://github.com/WordPress/gutenberg/pull/51478))
+-   Use next40pxDefaultSize on RangeControl components. ([52257](https://github.com/WordPress/gutenberg/pull/52257))
+
+#### Block Editor
+
+-   Add maxLength to LinkControl search item URLs. ([52523](https://github.com/WordPress/gutenberg/pull/52523))
+-   Make the tab labels of `ColorGradientSettingsDropdown` component translatable. ([52669](https://github.com/WordPress/gutenberg/pull/52669))
+-   Add support for arrays to `setImmutably` util. ([52280](https://github.com/WordPress/gutenberg/pull/52280))
+-   Stabilize `defaultBlock`, `directInsert` API's and `getDirectInsertBlock` selector. ([52083](https://github.com/WordPress/gutenberg/pull/52083))
+
+#### NUX
+
+-   Restore `@wordpress/nux` to trunk. ([52455](https://github.com/WordPress/gutenberg/pull/52455))
+
+### Bug Fixes
+
+#### Patterns
+
+-   Alternative grid layout to improve keyboard accessibility. ([52357](https://github.com/WordPress/gutenberg/pull/52357))
+-   Add handling of sync status to the wp-admin patterns list page. ([52346](https://github.com/WordPress/gutenberg/pull/52346))
+-   Add missing decoding entities processing in Patterns and Template/Parts pages. ([52449](https://github.com/WordPress/gutenberg/pull/52449))
+-   Add option to set sync status when adding from wp-admin patterns list. ([52352](https://github.com/WordPress/gutenberg/pull/52352))
+-   Avoid copying global style presets via the styles compatibility hook. ([52640](https://github.com/WordPress/gutenberg/pull/52640))
+-   Command Palette: Update label and icon for Patterns. ([52742](https://github.com/WordPress/gutenberg/pull/52742))
+-   Ensure that the unsaved title is not persisted when reopening the modal. ([52473](https://github.com/WordPress/gutenberg/pull/52473))
+-   Fix bug with Create Patterns menu not showing in site editor page editing. ([52671](https://github.com/WordPress/gutenberg/pull/52671))
+-   Fix renaming in Site View sidebar rename saves all edits for Template Parts and Navigation Menus. ([52373](https://github.com/WordPress/gutenberg/pull/52373))
+-   Patterns & template parts: Remove "apply globally" option from block settings. ([52160](https://github.com/WordPress/gutenberg/pull/52160))
+-   Rename edit label to Edit Block Pattern to resolve edge case in Chrome. ([52496](https://github.com/WordPress/gutenberg/pull/52496))
+-   Show uncategorized patterns on the Editor > Patterns page. ([52633](https://github.com/WordPress/gutenberg/pull/52633))
+-   Site Editor Patterns: Filter out patterns that are not available in the inserter. ([52675](https://github.com/WordPress/gutenberg/pull/52675))
+-   Update the title of Pattern block in the block inspector card. ([52010](https://github.com/WordPress/gutenberg/pull/52010))
+
+#### Site Editor
+
+-   Fix the pattern with the post types becomes the placeholder pattern when editing template part. ([52503](https://github.com/WordPress/gutenberg/pull/52503))
+-   Fix "Manage all patterns" link appearance. ([52532](https://github.com/WordPress/gutenberg/pull/52532))
+-   Fix document title icon appearance. ([52424](https://github.com/WordPress/gutenberg/pull/52424))
+-   Fix entering edit mode in site editor. ([52406](https://github.com/WordPress/gutenberg/pull/52406))
+-   Fix missing "Add Template Part" button in Template Parts page. ([52542](https://github.com/WordPress/gutenberg/pull/52542))
+-   Fix undo/redo in site editor code editor's mode. ([52695](https://github.com/WordPress/gutenberg/pull/52695))
+-   Remove status icon. ([52457](https://github.com/WordPress/gutenberg/pull/52457))
+-   Reset device preview type when exiting the editing mode. ([52566](https://github.com/WordPress/gutenberg/pull/52566))
+-   ResizableFrame: Fix styling in Firefox. ([52700](https://github.com/WordPress/gutenberg/pull/52700))
+-   Site Editor Pages: Load the appropriate template if posts page set. ([52266](https://github.com/WordPress/gutenberg/pull/52266))
+-   Site Editor Patterns: Ensure sidebar does not shrink when long pattern titles are used. ([52547](https://github.com/WordPress/gutenberg/pull/52547))
+-   Use lowercase p in "Manage Patterns". ([52617](https://github.com/WordPress/gutenberg/pull/52617))
+-   Do not navigate to the styles pages unless you're in a random listing page. ([52728](https://github.com/WordPress/gutenberg/pull/52728))
+-   Fix multiple navigation blocks in pattern template. ([52707](https://github.com/WordPress/gutenberg/pull/52707))
+-   Don't allow creating template part on the Patterns page for non-block themes. ([52656](https://github.com/WordPress/gutenberg/pull/52656))
+-   Exit template focus when opening the W menu. ([52235](https://github.com/WordPress/gutenberg/pull/52235))
+
+#### Block Library
+
+-   Fix console warning by improving error handling in Nav block classic menu conversion. ([52591](https://github.com/WordPress/gutenberg/pull/52591))
+-   Fix importing classic menus. ([52573](https://github.com/WordPress/gutenberg/pull/52573))
+-   Fix: Focus loss on navigation link label editing on Firefox. ([52428](https://github.com/WordPress/gutenberg/pull/52428))
+-   List block: Fix selected numbering style option. ([52472](https://github.com/WordPress/gutenberg/pull/52472))
+-   Post Title: The changes should be reflected when previewing a post. ([52369](https://github.com/WordPress/gutenberg/pull/52369))
+-   Quote block: Add transform to paragraph. ([51809](https://github.com/WordPress/gutenberg/pull/51809))
+-   Remove synced blocks from lastBlockInserted. ([52558](https://github.com/WordPress/gutenberg/pull/52558))
+-   Rich Text/Footnotes: Fix getRichTextValues for useInnerBlocksProps.save. ([52682](https://github.com/WordPress/gutenberg/pull/52682))
+-   Search block: Enqueue view script through block.json. ([52552](https://github.com/WordPress/gutenberg/pull/52552))
+-   Use `_get_block_template_file` function and set $area variable. ([52708](https://github.com/WordPress/gutenberg/pull/52708))
+-   Cover Block: Fix block deprecation when fixed background is enabled. ([51612](https://github.com/WordPress/gutenberg/pull/51612))
+-   Fix image block v6 deprecation. ([52822](https://github.com/WordPress/gutenberg/pull/52822))
+-   Image: Use the correct method for caption class in recent deprecation. ([52853](https://github.com/WordPress/gutenberg/pull/52853))
+
+#### Accessibility
+
+-   Change "Delete page" menu item to "Move to trash". ([52641](https://github.com/WordPress/gutenberg/pull/52641))
+-   Change password input to type text so contents are visible. ([52622](https://github.com/WordPress/gutenberg/pull/52622))
+-   Do not autofocus page title field in the 'Draft a new page' modal dialog. ([52603](https://github.com/WordPress/gutenberg/pull/52603))
+-   Fix Shift+Tab to Block Toolbar. ([52613](https://github.com/WordPress/gutenberg/pull/52613))
+-   Unify focus style and add default font styles. ([52495](https://github.com/WordPress/gutenberg/pull/52495))
+-   Navigation block: Add notice on reduced accessibility. ([52251](https://github.com/WordPress/gutenberg/pull/52251))
+-   Password protected field: Remove autofocus and improve placeholder text consistency. ([52634](https://github.com/WordPress/gutenberg/pull/52634))
+-   ResizableFrame: Make keyboard accessible. ([52443](https://github.com/WordPress/gutenberg/pull/52443))
+-   Site Editor: Fix navigation menu sidebar actions order and label. ([52592](https://github.com/WordPress/gutenberg/pull/52592))
+
+#### Block Editor
+
+-   Add 'reusable' keyword to Pattern blocks. ([52543](https://github.com/WordPress/gutenberg/pull/52543))
+-   Avoid errors in Dimension visualizers when switching between iframed and non-iframed editors. ([52588](https://github.com/WordPress/gutenberg/pull/52588))
+-   Ensure synced patterns are accounted for in 'getAllowedBlocks'. ([52546](https://github.com/WordPress/gutenberg/pull/52546))
+-   Remove link action of Link UI for draft pages created from Nav block does not correctly remove link. ([52415](https://github.com/WordPress/gutenberg/pull/52415))
+-   LinkControl: Add width to ensure ellipsis truncating works. ([52575](https://github.com/WordPress/gutenberg/pull/52575))
+-   LinkControl: Fix mark highlight to bold. ([52517](https://github.com/WordPress/gutenberg/pull/52517))
+-   Post Content link color should not be applied to placeholder component links. ([52367](https://github.com/WordPress/gutenberg/pull/52367))
+-   Fix highlight change when using transform menu. ([52752](https://github.com/WordPress/gutenberg/pull/52752))
+-   Apply text color selection to link color. ([52379](https://github.com/WordPress/gutenberg/pull/52379))
+
+#### Components
+
+-   Block Editor: Display variation icon in the 'BlockDraggable' component. ([52502](https://github.com/WordPress/gutenberg/pull/52502))
+-   Copy tweak for the reusable block rename hint. ([52581](https://github.com/WordPress/gutenberg/pull/52581))
+-   Fix react-dropdown-menu version to avoid breaking change from one of …. ([52356](https://github.com/WordPress/gutenberg/pull/52356))
+-   FormTokenField: Fix token overflow when moving cursor left or right. ([52662](https://github.com/WordPress/gutenberg/pull/52662))
+-   Site Editor: Make sidebar back button go _back_ instead of _up_ if possible. ([52456](https://github.com/WordPress/gutenberg/pull/52456))
+-   Top Toolbar: Move the preferences selection into the main useSelect. ([52332](https://github.com/WordPress/gutenberg/pull/52332))
+
+#### Post Editor
+
+-   Remove a block select button from the multi-entity saving flow. ([52753](https://github.com/WordPress/gutenberg/pull/52753))
+-   Fix Site editor page when JS support is disabled. ([52376](https://github.com/WordPress/gutenberg/pull/52376))
+-   Fix initial block parsing. ([52417](https://github.com/WordPress/gutenberg/pull/52417))
+-   Simplify the code editor of edit-post. ([52751](https://github.com/WordPress/gutenberg/pull/52751))
+
+#### Global Styles
+
+-   DimensionsPanel: Fix unexpected value decoding/encoding. ([52661](https://github.com/WordPress/gutenberg/pull/52661))
+-   Global font sizes: Ensure sizes are unique. ([52483](https://github.com/WordPress/gutenberg/pull/52483))
+-   Spacing Sizes: Fix zero size typo and to be output directly. ([52711](https://github.com/WordPress/gutenberg/pull/52711))
+
+#### Themes
+
+-   Fix admin_url() for preview link of block themes. ([52399](https://github.com/WordPress/gutenberg/pull/52399))
+
+#### Fonts API
+
+-   Deprecate and make Fonts API non-functional. ([52485](https://github.com/WordPress/gutenberg/pull/52485))
+-   Fix font printing regression when metabox exists. ([52343](https://github.com/WordPress/gutenberg/pull/52343))
+
+#### Extensibility
+
+-   Page Content Focus: Ignore page content within a Query Loop block. ([52351](https://github.com/WordPress/gutenberg/pull/52351))
+
+### Performance
+
+#### Post Editor
+
+-   Fix performance regression for isEditedPostEmpty selector. ([52759](https://github.com/WordPress/gutenberg/pull/52759))
+
+#### Patterns
+
+-   Add client side pagination to patterns list. ([52538](https://github.com/WordPress/gutenberg/pull/52538))
+
+#### Site Editor
+
+-   Fix entity cache misses for single posts due to string as recordKey. ([52338](https://github.com/WordPress/gutenberg/pull/52338))
+
+#### Block Library
+
+-   Experimental: Disable TinyMCE compat with classic editor. ([52325](https://github.com/WordPress/gutenberg/pull/52325))
+
+### Experiments
+
+#### Interactivity API
+
+-   Prevent scripts from loading if behaviors are not used. ([52140](https://github.com/WordPress/gutenberg/pull/52140))
+
+#### Fonts API
+
+-   Font Face: To generate and print font-face styles for theme.json fonts. ([51770](https://github.com/WordPress/gutenberg/pull/51770))
+
+### Documentation
+
+-   Document the new process for releasing point releases for old release branches. ([49968](https://github.com/WordPress/gutenberg/pull/49968))
+-   Add layout API documentation. ([52673](https://github.com/WordPress/gutenberg/pull/52673))
+-   Added README for the "caption" component. ([52033](https://github.com/WordPress/gutenberg/pull/52033))
+-   Added documentation text-transform component #52072. ([52243](https://github.com/WordPress/gutenberg/pull/52243))
+-   Block Editor: Add README for `BlockControls`. ([52366](https://github.com/WordPress/gutenberg/pull/52366))
+-   Lodash: Remove completely. ([52571](https://github.com/WordPress/gutenberg/pull/52571))
+-   Removed line break within the code block. ([46920](https://github.com/WordPress/gutenberg/pull/46920))
+-   Theme JSON schema: Add missing block names and unify block properties. ([51293](https://github.com/WordPress/gutenberg/pull/51293))
+-   Update layout architecture documentation after stabilisation. ([52316](https://github.com/WordPress/gutenberg/pull/52316))
+
+### Code Quality
+
+#### Block Editor
+
+-   Add missing `@emotion/react` dep to block-editor. ([52475](https://github.com/WordPress/gutenberg/pull/52475))
+-   Lodash: Remove remaining `_.get()` from block editor and deprecate. ([52561](https://github.com/WordPress/gutenberg/pull/52561))
+-   Make use of accessing private APIs from thunks directly. ([52214](https://github.com/WordPress/gutenberg/pull/52214))
+
+#### Block Library
+
+-   Footnotes: Backport core changes to excerpt trim. ([52709](https://github.com/WordPress/gutenberg/pull/52709))
+-   Navigation: Simplify the useSelect for useNavigationMenus. ([51977](https://github.com/WordPress/gutenberg/pull/51977))
+-   Query Pagination: Set 'clientId' as useSelect dependency. ([52358](https://github.com/WordPress/gutenberg/pull/52358))
+-   Search: Remove unnecessary useEffect. ([52604](https://github.com/WordPress/gutenberg/pull/52604))
+-   Template Parts: Set attributes 'area' as useSelect dependency. ([52330](https://github.com/WordPress/gutenberg/pull/52330))
+
+#### Global Styles
+
+-   Lodash: Refactor away from `_.set()` in `PushChangesToGlobalStylesControl`. ([52404](https://github.com/WordPress/gutenberg/pull/52404))
+-   Lodash: Refactor away from `_.set()` in `getNodesWithSettings()`. ([52278](https://github.com/WordPress/gutenberg/pull/52278))
+-   Lodash: Refactor away from `_.set()` in global styles. ([52279](https://github.com/WordPress/gutenberg/pull/52279))
+-   Lodash: Remove completely from site editor. ([52480](https://github.com/WordPress/gutenberg/pull/52480))
+
+#### Post Editor
+
+-   EntityRecordItem: Fix ESLint warnings and remove unnecessary memoization. ([52630](https://github.com/WordPress/gutenberg/pull/52630))
+-   PostPreviewButton: Rewrite to functional, avoid state transitions in lifecycles. ([44971](https://github.com/WordPress/gutenberg/pull/44971))
+-   Correct a typo: Sapce -> space. ([52578](https://github.com/WordPress/gutenberg/pull/52578))
+
+#### Site Editor
+
+-   Fix incorrect 'useSelect' usage. ([52683](https://github.com/WordPress/gutenberg/pull/52683))
+-   SiteHub: Combine site data selector hooks. ([52567](https://github.com/WordPress/gutenberg/pull/52567))
+
+#### Reusable Blocks
+
+-   Update package to use relative path. ([52712](https://github.com/WordPress/gutenberg/pull/52712))
+
+#### Core Data
+
+-   Core Data: Fix ESLint warning for 'useEntityProp' hook. ([52757](https://github.com/WordPress/gutenberg/pull/52757))
+
+### Tools
+
+#### Testing
+
+-   Iframe: Silence style compat warnings when in a BlockPreview. ([52627](https://github.com/WordPress/gutenberg/pull/52627))
+-   Make `query` optional in `visitAdminPage`. ([52413](https://github.com/WordPress/gutenberg/pull/52413))
+-   Migrate Adding Inline Token test to Playwright. ([52020](https://github.com/WordPress/gutenberg/pull/52020))
+-   Migrate site editor multi-entity save flow tests. ([52372](https://github.com/WordPress/gutenberg/pull/52372))
+-   Move request utils reset to global setup. ([52412](https://github.com/WordPress/gutenberg/pull/52412))
+-   Nav block: Link text color inheritance fixes and tests. ([51710](https://github.com/WordPress/gutenberg/pull/51710))
+-   Refactor and split navigation block end-to-end tests into separate files. ([52647](https://github.com/WordPress/gutenberg/pull/52647))
+-   Try fixing block context end-to-end test failure. ([52513](https://github.com/WordPress/gutenberg/pull/52513))
+-   Use posts instead of template parts for navigation color tests. ([52654](https://github.com/WordPress/gutenberg/pull/52654))
+-   end-to-end Test Utils: Improve test reliability in plugins/themes and login procedures. ([52144](https://github.com/WordPress/gutenberg/pull/52144))
+-   Enable jest-watch-typeahead for native tests. ([51869](https://github.com/WordPress/gutenberg/pull/51869))
+-   Expand mobile editor tests. ([52446](https://github.com/WordPress/gutenberg/pull/52446))
+
+#### Build Tooling
+
+-   Backport tools: Sort PRs to be cherry picked by merged/closed date. ([52667](https://github.com/WordPress/gutenberg/pull/52667))
+-   Create block interactive template. ([52612](https://github.com/WordPress/gutenberg/pull/52612))
+-   Fix Webpack to watch the `interactivity` package files. ([52642](https://github.com/WordPress/gutenberg/pull/52642))
+-   Update caniuse-lite, browserslist and core-js. ([52420](https://github.com/WordPress/gutenberg/pull/52420))
+-   Lodash: Deprecate `_.set()`. ([52407](https://github.com/WordPress/gutenberg/pull/52407))
+
+#### Project Management
+
+-   Update issue gardening automation with new label. ([52173](https://github.com/WordPress/gutenberg/pull/52173))
+-   Revert "Update Changelog for 16.1.2". ([52433](https://github.com/WordPress/gutenberg/pull/52433))
+-   GitHub workflow: Add a PHP backport changes action. ([52096](https://github.com/WordPress/gutenberg/pull/52096))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @andrewhayward: Adding support for defined IDs in `TextControl` component. ([52028](https://github.com/WordPress/gutenberg/pull/52028))
+-   @ghorivipul97: Post Content link color should not be applied to placeholder component links. ([52367](https://github.com/WordPress/gutenberg/pull/52367))
+-   @sethrubenstein: Stabilize `defaultBlock`, `directInsert` API's and `getDirectInsertBlock` selector. ([52083](https://github.com/WordPress/gutenberg/pull/52083))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewhayward @andrewserong @anomiex @arthur791004 @BenjaminZekavica @bfintal @carolinan @Clorith @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @ghorivipul97 @glendaviesnz @hellofromtonya @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @michalczaplinski @mirka @noisysocks @ntsekouras @peterwilsoncc @pooja-muchandikar @Presskopp @priethor @ramonjd @richtabor @SantosGuillamot @SavPhill @SaxonF @scruffian @sethrubenstein @spacedmonkey @swissspidy @t-hamano @tellthemachines @tyxla @walbo @westonruter @youknowriad
+
+= 16.2.1 =
+
+## Changelog
+
+### Enhancements
+
+#### Footnotes
+
+-   Footnotes: show in inserter and placeholder. ([52445](https://github.com/WordPress/gutenberg/pull/52445))
+
+### Bug Fixes
+
+#### Patterns
+
+-   Make Pattern title text clickable. ([52599](https://github.com/WordPress/gutenberg/pull/52599))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@getdave @mcsf
+
+= 16.2.0 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Library - make pattern title clickable. ([51898](https://github.com/WordPress/gutenberg/pull/51898))
+
+#### Block Library
+
+-   Allow editing existing footnote from RichText formats toolbar. ([52506](https://github.com/WordPress/gutenberg/pull/52506))
+-   Revert "Post editor: Require confirmation before removing Footnotes (#52277)". ([52486](https://github.com/WordPress/gutenberg/pull/52486))
+-   Trim footnote anchors from excerpts. ([52518](https://github.com/WordPress/gutenberg/pull/52518))
+
+#### Interactivity API
+
+-   Fix md5 class messed up with new block key. ([52557](https://github.com/WordPress/gutenberg/pull/52557))
+
+#### Block Editor
+
+-   Site Editor: Restore quick inserter 'Browse all' button. ([52529](https://github.com/WordPress/gutenberg/pull/52529))
+
+#### Patterns
+
+-   Check that core hasn't already moved sync status meta before moving and unsetting. ([52494](https://github.com/WordPress/gutenberg/pull/52494))
+
+### Various
+
+-   Rename block theme activation nonce variable. ([52398](https://github.com/WordPress/gutenberg/pull/52398))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@getdave @glendaviesnz @luisherranz @Mamaduka @mcsf @peterwilsoncc @priethor
+= 16.2.0-rc.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Build Tooling
+
+-   Revert phpcs testVersion back to PHP 5.6. ([52384](https://github.com/WordPress/gutenberg/pull/52384))
+
+= 16.2.0-rc.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Library
+
+-   RichText/Footnotes: Make getRichTextValues work with InnerBlocks.Content. ([52241](https://github.com/WordPress/gutenberg/pull/52241))
+
+#### Blocks
+
+-   Post and Comment Template blocks: Change render_block_context priority to 1 (https://github.com/WordPress/gutenberg/pull/52364)
+-   Footnotes: Fix incorrect anchor position in Firefox (https://github.com/WordPress/gutenberg/pull/52425)
+-   Footnotes: fix lingering format boundary attr (https://github.com/WordPress/gutenberg/pull/52439)
+-   Footnotes: save numbering through the entity provider (https://github.com/WordPress/gutenberg/pull/52423)
+
+#### Code Quality / Performance
+
+-   Iframe: avoid asset parsing & fix script localisation
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ellatrix @ockham @t-hamano
+
+= 16.2.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Patterns
+
+-   feat: Rename Reusable blocks to Patterns. ([51704](https://github.com/WordPress/gutenberg/pull/51704))
+
+### Enhancements
+
+-   Export store for the core/customize-widgets package. ([52189](https://github.com/WordPress/gutenberg/pull/52189))
+
+#### Patterns
+
+-   Library: Add sync status to pattern details screen. ([51954](https://github.com/WordPress/gutenberg/pull/51954))
+-   Rename Library to Patterns. ([52102](https://github.com/WordPress/gutenberg/pull/52102))
+-   Update custom patterns label to 'My patterns'. ([51949](https://github.com/WordPress/gutenberg/pull/51949))
+-   Update pattern creation modal in library. ([51946](https://github.com/WordPress/gutenberg/pull/51946))
+-   Update template part icons in the library mosaic (grid items). ([51963](https://github.com/WordPress/gutenberg/pull/51963))
+
+#### Site Editor
+
+-   Change "Home" template name to "Blog home". ([52048](https://github.com/WordPress/gutenberg/pull/52048))
+-   Edit Site: Make loading spinner colors consistent. ([51857](https://github.com/WordPress/gutenberg/pull/51857))
+-   Update the icon used to reference the blog. ([52075](https://github.com/WordPress/gutenberg/pull/52075))
+
+#### Interactivity API
+
+-   Image block: Remove extra lookup for external image dimensions in lightbox. ([52178](https://github.com/WordPress/gutenberg/pull/52178))
+-   Image block: Use built-in directive for mouseover event in lightbox. ([52067](https://github.com/WordPress/gutenberg/pull/52067))
+
+#### Block Library
+
+-   Force full height for editor in Navigation focus mode. ([51798](https://github.com/WordPress/gutenberg/pull/51798))
+-   Social links: Updating class and style attributes. ([51997](https://github.com/WordPress/gutenberg/pull/51997))
+
+#### Themes
+
+-   Add border theme_support. ([51777](https://github.com/WordPress/gutenberg/pull/51777))
+-   Add link color theme_support. ([51775](https://github.com/WordPress/gutenberg/pull/51775))
+
+#### Global Styles
+
+-   Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu. ([52222](https://github.com/WordPress/gutenberg/pull/52222))
+
+#### Widgets Editor
+
+-   Add @example tags to the customize-widgets package. ([52141](https://github.com/WordPress/gutenberg/pull/52141))
+
+#### NUX
+
+-   Page Content Focus: Add welcome guides. ([52014](https://github.com/WordPress/gutenberg/pull/52014))
+
+#### Block Editor
+
+-   Use block label and icon for the inserter draggable chip.. ([51048](https://github.com/WordPress/gutenberg/pull/51048))
+
+#### Design Tools
+
+-   Add Typography: Text orientation (writing mode). ([50822](https://github.com/WordPress/gutenberg/pull/50822))
+
+#### Components
+
+-   RangeControl: Add support for large 40px number input size. ([49105](https://github.com/WordPress/gutenberg/pull/49105))
+
+### New APIs
+
+#### Block Editor
+
+-   Add new `registerInserterMediaCategory` API to make media categories extensible. ([51542](https://github.com/WordPress/gutenberg/pull/51542))
+
+### Bug Fixes
+
+-   Adjust the position of sticky headings in preferences modal. ([52248](https://github.com/WordPress/gutenberg/pull/52248))
+-   BlockRemovalWarningModal: Fix incorrect '\_n' usage. ([52164](https://github.com/WordPress/gutenberg/pull/52164))
+-   Editor initrial appender: Zero out margins in constrained layouts. ([52026](https://github.com/WordPress/gutenberg/pull/52026))
+-   Export store from the edit-site package. ([51986](https://github.com/WordPress/gutenberg/pull/51986))
+-   Fix disable DFM when opening styles command. ([52165](https://github.com/WordPress/gutenberg/pull/52165))
+-   Fix unintentional toggling on of distraction free. ([52090](https://github.com/WordPress/gutenberg/pull/52090))
+-   Footnotes: Increase selector specificity for anchor. ([52179](https://github.com/WordPress/gutenberg/pull/52179))
+-   Respect custom aspect ratio. ([52286](https://github.com/WordPress/gutenberg/pull/52286))
+-   Turn off DFM for style book and style editing. ([52117](https://github.com/WordPress/gutenberg/pull/52117))
+-   Update fixed block toolbar. ([52123](https://github.com/WordPress/gutenberg/pull/52123))
+-   Updating the BlockEditorProvider settings prop should reset the store's settings entirely. ([51904](https://github.com/WordPress/gutenberg/pull/51904))
+-   [Command Palette]: Remove suggestion for deleting templates/parts. ([52168](https://github.com/WordPress/gutenberg/pull/52168))
+-   [Command center]: Add preferences and keyboard shortcuts commands. ([51862](https://github.com/WordPress/gutenberg/pull/51862))
+-   [Edit Post]: Add toggle fullscreen mode and list view commands. ([52184](https://github.com/WordPress/gutenberg/pull/52184))
+
+#### Block Library
+
+-   Fix default block dimensions visibility. ([52256](https://github.com/WordPress/gutenberg/pull/52256))
+-   Fix fetching Nav fallback ID flushing Navigation entity cache. ([52069](https://github.com/WordPress/gutenberg/pull/52069))
+-   Fix flaky tests in `navigation.spec.js` and other tests related to the Post Editor Template mode. ([51790](https://github.com/WordPress/gutenberg/pull/51790))
+-   Fix: Term Description block should only be available in the site editor. ([51053](https://github.com/WordPress/gutenberg/pull/51053))
+-   Footnotes: Register meta field for pages. ([52024](https://github.com/WordPress/gutenberg/pull/52024))
+-   Image block: Fix cursor style when lightbox is opened. ([52187](https://github.com/WordPress/gutenberg/pull/52187))
+-   Navigation: Add the draft status to the navigation title. ([51967](https://github.com/WordPress/gutenberg/pull/51967))
+-   Navigation: Fix end-to-end test failures caused by sidebar title change. ([52308](https://github.com/WordPress/gutenberg/pull/52308))
+-   Navigation: Fix sidebar title. ([52167](https://github.com/WordPress/gutenberg/pull/52167))
+-   Navigation: Remove one preloaded endpoint. ([52115](https://github.com/WordPress/gutenberg/pull/52115))
+-   Page List: Fix parent block selection when converting to link. ([52193](https://github.com/WordPress/gutenberg/pull/52193))
+-   Post editor: Require confirmation before removing Footnotes. ([52277](https://github.com/WordPress/gutenberg/pull/52277))
+-   fix: Display heading level dropdown icons and labels. ([52004](https://github.com/WordPress/gutenberg/pull/52004))
+
+#### Site Editor
+
+-   Add confirmation step when deleting a Template. ([52236](https://github.com/WordPress/gutenberg/pull/52236))
+-   Command Palette: Fix incorrect path and snackbar message when template part is deleted. ([52034](https://github.com/WordPress/gutenberg/pull/52034))
+-   Default to showing status slug in sidebar. ([52226](https://github.com/WordPress/gutenberg/pull/52226))
+-   Fix missing MenuGroup segment in Site Editor header more menu. ([51860](https://github.com/WordPress/gutenberg/pull/51860))
+-   Fix missing snackbars in Library. ([52021](https://github.com/WordPress/gutenberg/pull/52021))
+-   Fix stepper styling in Home template sidebar. ([52025](https://github.com/WordPress/gutenberg/pull/52025))
+-   Get the top toolbar preference from the correct scope. ([51840](https://github.com/WordPress/gutenberg/pull/51840))
+-   Hide word count and reading time meta data for the Posts Page details panel. ([52186](https://github.com/WordPress/gutenberg/pull/52186))
+-   Modal: Add small top padding to the content so that avoid cutting off the visible outline when hovering items. ([51829](https://github.com/WordPress/gutenberg/pull/51829))
+-   Site Editor Frame: Ignore Spotlight in view mode. ([52262](https://github.com/WordPress/gutenberg/pull/52262))
+-   Try restoring the site editor animation. ([51956](https://github.com/WordPress/gutenberg/pull/51956))
+
+#### Patterns
+
+-   Fix custom patterns console error. ([51947](https://github.com/WordPress/gutenberg/pull/51947))
+-   Fix history back after entering edit mode from Patterns. ([52112](https://github.com/WordPress/gutenberg/pull/52112))
+-   Fix setting of sync status for fully synced patterns. ([51952](https://github.com/WordPress/gutenberg/pull/51952))
+-   Fix sidebar tab label. ([51953](https://github.com/WordPress/gutenberg/pull/51953))
+-   Fix: Pattern focus mode DocumentActions should use the pattern icon. ([52031](https://github.com/WordPress/gutenberg/pull/52031))
+-   Include template parts for custom areas in Uncategorized category. ([52159](https://github.com/WordPress/gutenberg/pull/52159))
+-   Remove ability for user to toggle sync status after pattern creation. ([51998](https://github.com/WordPress/gutenberg/pull/51998))
+-   Rename sync_status and move to top level field on rest return instead of a meta field. ([52146](https://github.com/WordPress/gutenberg/pull/52146))
+
+#### Interactivity API
+
+-   Block Image: Lightbox - Hide animation selector if behavior is Default or None. ([51748](https://github.com/WordPress/gutenberg/pull/51748))
+-   Image block: Fix responsive sizing in lightbox. ([51823](https://github.com/WordPress/gutenberg/pull/51823))
+-   Image block: Lightbox animation improvements. ([51721](https://github.com/WordPress/gutenberg/pull/51721))
+-   Navigation block: Check that the modal is set before using `contains`. ([51962](https://github.com/WordPress/gutenberg/pull/51962))
+
+#### Accessibility
+
+-   Fix incorrect aria-describedby attributes for theme patterns. ([52263](https://github.com/WordPress/gutenberg/pull/52263))
+-   Guide: Place focus on the guide's container instead of its first tabbable. ([52300](https://github.com/WordPress/gutenberg/pull/52300))
+-   Site Editor: Update headings hierarchy in the 'Manage all' screens. ([52271](https://github.com/WordPress/gutenberg/pull/52271))
+
+#### Global Styles
+
+-   Check if experiment enabled for realsies this time. ([52315](https://github.com/WordPress/gutenberg/pull/52315))
+-   Check randomizer experiment is enabled before rendering button. ([52306](https://github.com/WordPress/gutenberg/pull/52306))
+
+#### Navigation Menu Sidebar
+
+-   Make the entire preview clickable in order to enter "edit" mode in focus mode. ([51973](https://github.com/WordPress/gutenberg/pull/51973))
+-   Restore sidebar in focus mode on Pattern click through in Browse Mode `Library`. ([51897](https://github.com/WordPress/gutenberg/pull/51897))
+
+#### Page Content Focus
+
+-   Hide parent selector when parent's block editing mode is 'disabled' or 'contentOnly'. ([52264](https://github.com/WordPress/gutenberg/pull/52264))
+
+#### Post Editor
+
+-   Editor: Avoid remounting pre-publish sidebar contents during autosave. ([52208](https://github.com/WordPress/gutenberg/pull/52208))
+
+#### Block Editor
+
+-   Enable draft entity creation in Nav block offcanvas. ([52166](https://github.com/WordPress/gutenberg/pull/52166))
+
+#### History
+
+-   Update the behavior of the cached undo/redo stack. ([51644](https://github.com/WordPress/gutenberg/pull/51644))
+
+#### Components
+
+-   DropdownMenu: Fix icon style when dashicon is used. ([43574](https://github.com/WordPress/gutenberg/pull/43574))
+
+### Performance
+
+-   Migrate performance tests to Playwright. ([51084](https://github.com/WordPress/gutenberg/pull/51084))
+-   Social links: Reverts updating class and style attributes. ([52019](https://github.com/WordPress/gutenberg/pull/52019))
+-   tests: Configure as a production environment. ([52016](https://github.com/WordPress/gutenberg/pull/52016))
+
+#### Block Library
+
+-   Try: Aggressive TinyMCE deprecation. ([50387](https://github.com/WordPress/gutenberg/pull/50387))
+
+### Experiments
+
+#### Interactivity API
+
+-   Create @wordpress/interactivity with the Interactivity API. ([50906](https://github.com/WordPress/gutenberg/pull/50906))
+
+### Documentation
+
+-   Add @examples to the @wordpress/rich-text package selectors and hide the actions from documentation. ([52089](https://github.com/WordPress/gutenberg/pull/52089))
+-   Add examples for core/keyboard-shortcut package. ([42831](https://github.com/WordPress/gutenberg/pull/42831))
+-   Block Editor: Add README for FontFamilyControl component. ([52118](https://github.com/WordPress/gutenberg/pull/52118))
+-   Block Editor: Add README for `PanelColorSettings` component. ([52327](https://github.com/WordPress/gutenberg/pull/52327))
+-   Block Editor: Add README for `RecursionProvider`. ([52334](https://github.com/WordPress/gutenberg/pull/52334))
+-   Docs: Update release documentation to use the right cherry-picking command. ([51935](https://github.com/WordPress/gutenberg/pull/51935))
+
+### Code Quality
+
+-   Lodash: Refactor away from `_.kebabCase()` in `getCleanTemplatePartSlug`. ([51906](https://github.com/WordPress/gutenberg/pull/51906))
+-   Lodash: Refactor away from `_.kebabCase()` in add page modal. ([51911](https://github.com/WordPress/gutenberg/pull/51911))
+-   Lodash: Refactor away from `_.kebabCase()` in generic template modal. ([51910](https://github.com/WordPress/gutenberg/pull/51910))
+-   Lodash: Remove completely from `@wordpress/style-engine` package. ([51726](https://github.com/WordPress/gutenberg/pull/51726))
+
+#### Block Library
+
+-   Heading Block: Remove unused `HeadingLevelIcon` component. ([52008](https://github.com/WordPress/gutenberg/pull/52008))
+-   Image block and behaviors: Fix some warnings. ([52109](https://github.com/WordPress/gutenberg/pull/52109))
+-   Lodash: Refactor embed block away from `_.kebabCase()`. ([51916](https://github.com/WordPress/gutenberg/pull/51916))
+-   Lodash: Remove dependency from block library package. ([51976](https://github.com/WordPress/gutenberg/pull/51976))
+-   Make Navigation fallback selector private. ([51413](https://github.com/WordPress/gutenberg/pull/51413))
+-   Page List: Fix ESLint warnings. ([52267](https://github.com/WordPress/gutenberg/pull/52267))
+-   Refactor, document, and fix image block deprecations. ([52081](https://github.com/WordPress/gutenberg/pull/52081))
+
+#### Page Content Focus
+
+-   Add basic test for the page content focus flow. ([52231](https://github.com/WordPress/gutenberg/pull/52231))
+
+#### List View
+
+-   Return primitive value for 'hideInserter' in Appender component. ([52161](https://github.com/WordPress/gutenberg/pull/52161))
+
+#### Interactivity API
+
+-   Fix the `exsisting` -> `existing` typo. ([52110](https://github.com/WordPress/gutenberg/pull/52110))
+
+#### Navigation Menu Sidebar
+
+-   Remove redundant call to Navigation selector in Browse Mode. ([51988](https://github.com/WordPress/gutenberg/pull/51988))
+
+#### Site Editor
+
+-   Block removal prompt: Let consumers pass their own rules. ([51841](https://github.com/WordPress/gutenberg/pull/51841))
+
+#### Block Editor
+
+-   Revise LinkControl suggestions UI to use MenuItem. ([50978](https://github.com/WordPress/gutenberg/pull/50978))
+
+### Tools
+
+#### Testing
+
+-   Drops PHP 5.6 CI jobs. ([52345](https://github.com/WordPress/gutenberg/pull/52345))
+-   Fix flakiness of saving entities in the site editor. ([51728](https://github.com/WordPress/gutenberg/pull/51728))
+-   Fix flaky Site Editor pages end-to-end test. ([52283](https://github.com/WordPress/gutenberg/pull/52283))
+-   Have `createNewPost` wait for editor canvas contents. ([51824](https://github.com/WordPress/gutenberg/pull/51824))
+
+#### Build Tooling
+
+-   Fix phpunit failures. ([51950](https://github.com/WordPress/gutenberg/pull/51950))
+-   Use moment-timezone-data-webpack-plugin to optimize timezones shipped in wp/date. ([51519](https://github.com/WordPress/gutenberg/pull/51519))
+
+### Various
+
+-   Add caching to schema of REST API. ([52045](https://github.com/WordPress/gutenberg/pull/52045))
+-   Add code owners for the Interactivity API runtime. ([52174](https://github.com/WordPress/gutenberg/pull/52174))
+-   Backport from core: Rename `gutenberg_get_remote_theme_patterns` to `gutenberg_get_theme_directory_pattern_slugs`. ([51784](https://github.com/WordPress/gutenberg/pull/51784))
+-   Block editor store: Also attach private APIs to old store descriptor. ([52088](https://github.com/WordPress/gutenberg/pull/52088))
+-   Blocks: Remove gutenberg refs in PHP files. ([51978](https://github.com/WordPress/gutenberg/pull/51978))
+-   Command palette: Rename. ([52153](https://github.com/WordPress/gutenberg/pull/52153))
+-   Drop-indicator: Remove white border. ([52122](https://github.com/WordPress/gutenberg/pull/52122))
+-   First version of the Interactivity API README. ([52104](https://github.com/WordPress/gutenberg/pull/52104))
+-   Global Styles Revisions API: Backport changes from Core. ([52095](https://github.com/WordPress/gutenberg/pull/52095))
+-   Global Styles Sidebar: Re-add Colors: Heading to selected blocks. ([49131](https://github.com/WordPress/gutenberg/pull/49131))
+-   Image block: Update lightbox animation tests. ([52290](https://github.com/WordPress/gutenberg/pull/52290))
+-   Patterns: Update section heading levels. ([52273](https://github.com/WordPress/gutenberg/pull/52273))
+-   Perf logging: Change date to ISO 8601. ([51833](https://github.com/WordPress/gutenberg/pull/51833))
+-   Refactor use-tab-nav shift+tab to use existing utils. ([51817](https://github.com/WordPress/gutenberg/pull/51817))
+-   Remove serverSideBlockDefinitions from a test. ([52215](https://github.com/WordPress/gutenberg/pull/52215))
+-   Restore "Buttons > can resize width" test. ([51865](https://github.com/WordPress/gutenberg/pull/51865))
+-   Update delete page button label. ([51812](https://github.com/WordPress/gutenberg/pull/51812))
+-   Update versions in WP for 6.3. ([51984](https://github.com/WordPress/gutenberg/pull/51984))
+-   Wrap "Move to trash" and "Switch to draft" buttons when labels are too long to fit on a single row. ([52249](https://github.com/WordPress/gutenberg/pull/52249))
+-   [GitHub-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082))
+
+#### Block Library
+
+-   Block Editor: Unify texts for Create pattern modal. ([52151](https://github.com/WordPress/gutenberg/pull/52151))
+-   Block Supports: Change prefix in gutenberg*apply_colors_support to wp* in dynamic blocks. ([51989](https://github.com/WordPress/gutenberg/pull/51989))
+-   Navigation in Site View: Readd the edit button. ([52111](https://github.com/WordPress/gutenberg/pull/52111))
+-   Navigation submenu: Remove unused doc block. ([52152](https://github.com/WordPress/gutenberg/pull/52152))
+-   Page List: Change modal text. ([52116](https://github.com/WordPress/gutenberg/pull/52116))
+-   i18n: Add context to the word "Filters". ([52198](https://github.com/WordPress/gutenberg/pull/52198))
+
+#### Site Editor
+
+-   Library: Update icons in the creation menu. ([52108](https://github.com/WordPress/gutenberg/pull/52108))
+-   Polish welcome guide copy for page / template editing. ([52282](https://github.com/WordPress/gutenberg/pull/52282))
+-   Try: Update template titles. ([51428](https://github.com/WordPress/gutenberg/pull/51428))
+-   Update stepper styling in Home template details panel. ([51972](https://github.com/WordPress/gutenberg/pull/51972))
+-   Update text color of active menu items. ([51965](https://github.com/WordPress/gutenberg/pull/51965))
+
+#### Patterns
+
+-   Add a hint about the rename of reusable blocks to menu and inserter. ([51771](https://github.com/WordPress/gutenberg/pull/51771))
+-   Copy: "Detach pattern" instead of "Covert to regular block". ([51993](https://github.com/WordPress/gutenberg/pull/51993))
+-   Library: Reinstate manage all template parts page. ([51961](https://github.com/WordPress/gutenberg/pull/51961))
+-   [Library] Add lock icon for theme patterns. ([51990](https://github.com/WordPress/gutenberg/pull/51990))
+
+#### Accessibility
+
+-   Navigation block: Do not toggle aria-expanded on hover when the overlay menu is opened. ([52170](https://github.com/WordPress/gutenberg/pull/52170))
+-   Navigation block: Don't close submenu when it has focus. ([52177](https://github.com/WordPress/gutenberg/pull/52177))
+
+#### Widgets Editor
+
+-   Export the store for the core/edit-widgets pacakage. ([52190](https://github.com/WordPress/gutenberg/pull/52190))
+
+#### Post Editor
+
+-   Move block editor settings filter into 6.3 compat folder. ([52100](https://github.com/WordPress/gutenberg/pull/52100))
+
+#### Layout
+
+-   Move grid function kses patch into 6.3 compat folder. ([52098](https://github.com/WordPress/gutenberg/pull/52098))
+
+#### Data Layer
+
+-   hasResolvingSelectors: Exclude from result of resolveSelect. ([52038](https://github.com/WordPress/gutenberg/pull/52038))
+
+#### Icons
+
+-   Remove fill="none" from pinSmall icon. ([51979](https://github.com/WordPress/gutenberg/pull/51979))
+
+#### Navigation Menu Sidebar
+
+-   Sidebar Navigation: Refactor delete modal with `ConfirmDialog` component. ([51867](https://github.com/WordPress/gutenberg/pull/51867))
+
+#### Templates API
+
+-   Template revisions API: Move back to experimental. ([51774](https://github.com/WordPress/gutenberg/pull/51774))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @annezazu @artemiomorales @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @draganescu @ellatrix @fullofcaffeine @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeryj @jsnajdr @juanfra @juanmaguitar @kevin940726 @luisherranz @Mamaduka @mcsf @michalczaplinski @miminari @noisysocks @ntsekouras @oandregal @ockham @priethor @ramonjd @richtabor @ryanwelcher @SaxonF @scruffian @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad
+
+= 16.1.2 =
+
+## Changelog
+
+### Bug fixes
+
+-   Footnotes: increase selector specificity for anchor (https://github.com/WordPress/gutenberg/pull/52179)
+
+= 16.2.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Patterns
+
+-   feat: Rename Reusable blocks to Patterns. ([51704](https://github.com/WordPress/gutenberg/pull/51704))
+
+### Enhancements
+
+-   Export store for the core/customize-widgets package. ([52189](https://github.com/WordPress/gutenberg/pull/52189))
+
+#### Patterns
+
+-   Library: Add sync status to pattern details screen. ([51954](https://github.com/WordPress/gutenberg/pull/51954))
+-   Rename Library to Patterns. ([52102](https://github.com/WordPress/gutenberg/pull/52102))
+-   Update custom patterns label to 'My patterns'. ([51949](https://github.com/WordPress/gutenberg/pull/51949))
+-   Update pattern creation modal in library. ([51946](https://github.com/WordPress/gutenberg/pull/51946))
+-   Update template part icons in the library mosaic (grid items). ([51963](https://github.com/WordPress/gutenberg/pull/51963))
+
+#### Site Editor
+
+-   Change "Home" template name to "Blog home". ([52048](https://github.com/WordPress/gutenberg/pull/52048))
+-   Edit Site: Make loading spinner colors consistent. ([51857](https://github.com/WordPress/gutenberg/pull/51857))
+-   Update the icon used to reference the blog. ([52075](https://github.com/WordPress/gutenberg/pull/52075))
+
+#### Interactivity API
+
+-   Image block: Remove extra lookup for external image dimensions in lightbox. ([52178](https://github.com/WordPress/gutenberg/pull/52178))
+-   Image block: Use built-in directive for mouseover event in lightbox. ([52067](https://github.com/WordPress/gutenberg/pull/52067))
+
+#### Block Library
+
+-   Force full height for editor in Navigation focus mode. ([51798](https://github.com/WordPress/gutenberg/pull/51798))
+-   Social links: Updating class and style attributes. ([51997](https://github.com/WordPress/gutenberg/pull/51997))
+
+#### Themes
+
+-   Add border theme_support. ([51777](https://github.com/WordPress/gutenberg/pull/51777))
+-   Add link color theme_support. ([51775](https://github.com/WordPress/gutenberg/pull/51775))
+
+#### Global Styles
+
+-   Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu. ([52222](https://github.com/WordPress/gutenberg/pull/52222))
+
+#### Widgets Editor
+
+-   Add @example tags to the customize-widgets package. ([52141](https://github.com/WordPress/gutenberg/pull/52141))
+
+#### NUX
+
+-   Page Content Focus: Add welcome guides. ([52014](https://github.com/WordPress/gutenberg/pull/52014))
+
+#### Block Editor
+
+-   Use block label and icon for the inserter draggable chip.. ([51048](https://github.com/WordPress/gutenberg/pull/51048))
+
+#### Design Tools
+
+-   Add Typography: Text orientation (writing mode). ([50822](https://github.com/WordPress/gutenberg/pull/50822))
+
+#### Components
+
+-   RangeControl: Add support for large 40px number input size. ([49105](https://github.com/WordPress/gutenberg/pull/49105))
+
+### New APIs
+
+#### Block Editor
+
+-   Add new `registerInserterMediaCategory` API to make media categories extensible. ([51542](https://github.com/WordPress/gutenberg/pull/51542))
+
+### Bug Fixes
+
+-   Adjust the position of sticky headings in preferences modal. ([52248](https://github.com/WordPress/gutenberg/pull/52248))
+-   BlockRemovalWarningModal: Fix incorrect '\_n' usage. ([52164](https://github.com/WordPress/gutenberg/pull/52164))
+-   Editor initrial appender: Zero out margins in constrained layouts. ([52026](https://github.com/WordPress/gutenberg/pull/52026))
+-   Export store from the edit-site package. ([51986](https://github.com/WordPress/gutenberg/pull/51986))
+-   Fix disable DFM when opening styles command. ([52165](https://github.com/WordPress/gutenberg/pull/52165))
+-   Fix unintentional toggling on of distraction free. ([52090](https://github.com/WordPress/gutenberg/pull/52090))
+-   Footnotes: Increase selector specificity for anchor. ([52179](https://github.com/WordPress/gutenberg/pull/52179))
+-   Respect custom aspect ratio. ([52286](https://github.com/WordPress/gutenberg/pull/52286))
+-   Turn off DFM for style book and style editing. ([52117](https://github.com/WordPress/gutenberg/pull/52117))
+-   Update fixed block toolbar. ([52123](https://github.com/WordPress/gutenberg/pull/52123))
+-   Updating the BlockEditorProvider settings prop should reset the store's settings entirely. ([51904](https://github.com/WordPress/gutenberg/pull/51904))
+-   [Command Palette]: Remove suggestion for deleting templates/parts. ([52168](https://github.com/WordPress/gutenberg/pull/52168))
+-   [Command center]: Add preferences and keyboard shortcuts commands. ([51862](https://github.com/WordPress/gutenberg/pull/51862))
+-   [Edit Post]: Add toggle fullscreen mode and list view commands. ([52184](https://github.com/WordPress/gutenberg/pull/52184))
+
+#### Block Library
+
+-   Fix default block dimensions visibility. ([52256](https://github.com/WordPress/gutenberg/pull/52256))
+-   Fix fetching Nav fallback ID flushing Navigation entity cache. ([52069](https://github.com/WordPress/gutenberg/pull/52069))
+-   Fix flaky tests in `navigation.spec.js` and other tests related to the Post Editor Template mode. ([51790](https://github.com/WordPress/gutenberg/pull/51790))
+-   Fix: Term Description block should only be available in the site editor. ([51053](https://github.com/WordPress/gutenberg/pull/51053))
+-   Footnotes: Register meta field for pages. ([52024](https://github.com/WordPress/gutenberg/pull/52024))
+-   Image block: Fix cursor style when lightbox is opened. ([52187](https://github.com/WordPress/gutenberg/pull/52187))
+-   Navigation: Add the draft status to the navigation title. ([51967](https://github.com/WordPress/gutenberg/pull/51967))
+-   Navigation: Fix end-to-end test failures caused by sidebar title change. ([52308](https://github.com/WordPress/gutenberg/pull/52308))
+-   Navigation: Fix sidebar title. ([52167](https://github.com/WordPress/gutenberg/pull/52167))
+-   Navigation: Remove one preloaded endpoint. ([52115](https://github.com/WordPress/gutenberg/pull/52115))
+-   Page List: Fix parent block selection when converting to link. ([52193](https://github.com/WordPress/gutenberg/pull/52193))
+-   Post editor: Require confirmation before removing Footnotes. ([52277](https://github.com/WordPress/gutenberg/pull/52277))
+-   fix: Display heading level dropdown icons and labels. ([52004](https://github.com/WordPress/gutenberg/pull/52004))
+
+#### Site Editor
+
+-   Add confirmation step when deleting a Template. ([52236](https://github.com/WordPress/gutenberg/pull/52236))
+-   Command Palette: Fix incorrect path and snackbar message when template part is deleted. ([52034](https://github.com/WordPress/gutenberg/pull/52034))
+-   Default to showing status slug in sidebar. ([52226](https://github.com/WordPress/gutenberg/pull/52226))
+-   Fix missing MenuGroup segment in Site Editor header more menu. ([51860](https://github.com/WordPress/gutenberg/pull/51860))
+-   Fix missing snackbars in Library. ([52021](https://github.com/WordPress/gutenberg/pull/52021))
+-   Fix stepper styling in Home template sidebar. ([52025](https://github.com/WordPress/gutenberg/pull/52025))
+-   Get the top toolbar preference from the correct scope. ([51840](https://github.com/WordPress/gutenberg/pull/51840))
+-   Hide word count and reading time meta data for the Posts Page details panel. ([52186](https://github.com/WordPress/gutenberg/pull/52186))
+-   Modal: Add small top padding to the content so that avoid cutting off the visible outline when hovering items. ([51829](https://github.com/WordPress/gutenberg/pull/51829))
+-   Site Editor Frame: Ignore Spotlight in view mode. ([52262](https://github.com/WordPress/gutenberg/pull/52262))
+-   Try restoring the site editor animation. ([51956](https://github.com/WordPress/gutenberg/pull/51956))
+
+#### Patterns
+
+-   Fix custom patterns console error. ([51947](https://github.com/WordPress/gutenberg/pull/51947))
+-   Fix history back after entering edit mode from Patterns. ([52112](https://github.com/WordPress/gutenberg/pull/52112))
+-   Fix setting of sync status for fully synced patterns. ([51952](https://github.com/WordPress/gutenberg/pull/51952))
+-   Fix sidebar tab label. ([51953](https://github.com/WordPress/gutenberg/pull/51953))
+-   Fix: Pattern focus mode DocumentActions should use the pattern icon. ([52031](https://github.com/WordPress/gutenberg/pull/52031))
+-   Include template parts for custom areas in Uncategorized category. ([52159](https://github.com/WordPress/gutenberg/pull/52159))
+-   Remove ability for user to toggle sync status after pattern creation. ([51998](https://github.com/WordPress/gutenberg/pull/51998))
+-   Rename sync_status and move to top level field on rest return instead of a meta field. ([52146](https://github.com/WordPress/gutenberg/pull/52146))
+
+#### Interactivity API
+
+-   Block Image: Lightbox - Hide animation selector if behavior is Default or None. ([51748](https://github.com/WordPress/gutenberg/pull/51748))
+-   Image block: Fix responsive sizing in lightbox. ([51823](https://github.com/WordPress/gutenberg/pull/51823))
+-   Image block: Lightbox animation improvements. ([51721](https://github.com/WordPress/gutenberg/pull/51721))
+-   Navigation block: Check that the modal is set before using `contains`. ([51962](https://github.com/WordPress/gutenberg/pull/51962))
+
+#### Accessibility
+
+-   Fix incorrect aria-describedby attributes for theme patterns. ([52263](https://github.com/WordPress/gutenberg/pull/52263))
+-   Guide: Place focus on the guide's container instead of its first tabbable. ([52300](https://github.com/WordPress/gutenberg/pull/52300))
+-   Site Editor: Update headings hierarchy in the 'Manage all' screens. ([52271](https://github.com/WordPress/gutenberg/pull/52271))
+
+#### Global Styles
+
+-   Check if experiment enabled for realsies this time. ([52315](https://github.com/WordPress/gutenberg/pull/52315))
+-   Check randomizer experiment is enabled before rendering button. ([52306](https://github.com/WordPress/gutenberg/pull/52306))
+
+#### Navigation Menu Sidebar
+
+-   Make the entire preview clickable in order to enter "edit" mode in focus mode. ([51973](https://github.com/WordPress/gutenberg/pull/51973))
+-   Restore sidebar in focus mode on Pattern click through in Browse Mode `Library`. ([51897](https://github.com/WordPress/gutenberg/pull/51897))
+
+#### Page Content Focus
+
+-   Hide parent selector when parent's block editing mode is 'disabled' or 'contentOnly'. ([52264](https://github.com/WordPress/gutenberg/pull/52264))
+
+#### Post Editor
+
+-   Editor: Avoid remounting pre-publish sidebar contents during autosave. ([52208](https://github.com/WordPress/gutenberg/pull/52208))
+
+#### Block Editor
+
+-   Enable draft entity creation in Nav block offcanvas. ([52166](https://github.com/WordPress/gutenberg/pull/52166))
+
+#### History
+
+-   Update the behavior of the cached undo/redo stack. ([51644](https://github.com/WordPress/gutenberg/pull/51644))
+
+#### Components
+
+-   DropdownMenu: Fix icon style when dashicon is used. ([43574](https://github.com/WordPress/gutenberg/pull/43574))
+
+### Performance
+
+-   Migrate performance tests to Playwright. ([51084](https://github.com/WordPress/gutenberg/pull/51084))
+-   Social links: Reverts updating class and style attributes. ([52019](https://github.com/WordPress/gutenberg/pull/52019))
+-   tests: Configure as a production environment. ([52016](https://github.com/WordPress/gutenberg/pull/52016))
+
+#### Block Library
+
+-   Try: Aggressive TinyMCE deprecation. ([50387](https://github.com/WordPress/gutenberg/pull/50387))
+
+### Experiments
+
+#### Interactivity API
+
+-   Create @wordpress/interactivity with the Interactivity API. ([50906](https://github.com/WordPress/gutenberg/pull/50906))
+
+### Documentation
+
+-   Add @examples to the @wordpress/rich-text package selectors and hide the actions from documentation. ([52089](https://github.com/WordPress/gutenberg/pull/52089))
+-   Add examples for core/keyboard-shortcut package. ([42831](https://github.com/WordPress/gutenberg/pull/42831))
+-   Block Editor: Add README for FontFamilyControl component. ([52118](https://github.com/WordPress/gutenberg/pull/52118))
+-   Block Editor: Add README for `PanelColorSettings` component. ([52327](https://github.com/WordPress/gutenberg/pull/52327))
+-   Block Editor: Add README for `RecursionProvider`. ([52334](https://github.com/WordPress/gutenberg/pull/52334))
+-   Docs: Update release documentation to use the right cherry-picking command. ([51935](https://github.com/WordPress/gutenberg/pull/51935))
+
+### Code Quality
+
+-   Lodash: Refactor away from `_.kebabCase()` in `getCleanTemplatePartSlug`. ([51906](https://github.com/WordPress/gutenberg/pull/51906))
+-   Lodash: Refactor away from `_.kebabCase()` in add page modal. ([51911](https://github.com/WordPress/gutenberg/pull/51911))
+-   Lodash: Refactor away from `_.kebabCase()` in generic template modal. ([51910](https://github.com/WordPress/gutenberg/pull/51910))
+-   Lodash: Remove completely from `@wordpress/style-engine` package. ([51726](https://github.com/WordPress/gutenberg/pull/51726))
+
+#### Block Library
+
+-   Heading Block: Remove unused `HeadingLevelIcon` component. ([52008](https://github.com/WordPress/gutenberg/pull/52008))
+-   Image block and behaviors: Fix some warnings. ([52109](https://github.com/WordPress/gutenberg/pull/52109))
+-   Lodash: Refactor embed block away from `_.kebabCase()`. ([51916](https://github.com/WordPress/gutenberg/pull/51916))
+-   Lodash: Remove dependency from block library package. ([51976](https://github.com/WordPress/gutenberg/pull/51976))
+-   Make Navigation fallback selector private. ([51413](https://github.com/WordPress/gutenberg/pull/51413))
+-   Page List: Fix ESLint warnings. ([52267](https://github.com/WordPress/gutenberg/pull/52267))
+-   Refactor, document, and fix image block deprecations. ([52081](https://github.com/WordPress/gutenberg/pull/52081))
+
+#### Page Content Focus
+
+-   Add basic test for the page content focus flow. ([52231](https://github.com/WordPress/gutenberg/pull/52231))
+
+#### List View
+
+-   Return primitive value for 'hideInserter' in Appender component. ([52161](https://github.com/WordPress/gutenberg/pull/52161))
+
+#### Interactivity API
+
+-   Fix the `exsisting` -> `existing` typo. ([52110](https://github.com/WordPress/gutenberg/pull/52110))
+
+#### Navigation Menu Sidebar
+
+-   Remove redundant call to Navigation selector in Browse Mode. ([51988](https://github.com/WordPress/gutenberg/pull/51988))
+
+#### Site Editor
+
+-   Block removal prompt: Let consumers pass their own rules. ([51841](https://github.com/WordPress/gutenberg/pull/51841))
+
+#### Block Editor
+
+-   Revise LinkControl suggestions UI to use MenuItem. ([50978](https://github.com/WordPress/gutenberg/pull/50978))
+
+### Tools
+
+#### Testing
+
+-   Drops PHP 5.6 CI jobs. ([52345](https://github.com/WordPress/gutenberg/pull/52345))
+-   Fix flakiness of saving entities in the site editor. ([51728](https://github.com/WordPress/gutenberg/pull/51728))
+-   Fix flaky Site Editor pages end-to-end test. ([52283](https://github.com/WordPress/gutenberg/pull/52283))
+-   Have `createNewPost` wait for editor canvas contents. ([51824](https://github.com/WordPress/gutenberg/pull/51824))
+
+#### Build Tooling
+
+-   Fix phpunit failures. ([51950](https://github.com/WordPress/gutenberg/pull/51950))
+-   Use moment-timezone-data-webpack-plugin to optimize timezones shipped in wp/date. ([51519](https://github.com/WordPress/gutenberg/pull/51519))
+
+### Various
+
+-   Add caching to schema of REST API. ([52045](https://github.com/WordPress/gutenberg/pull/52045))
+-   Add code owners for the Interactivity API runtime. ([52174](https://github.com/WordPress/gutenberg/pull/52174))
+-   Backport from core: Rename `gutenberg_get_remote_theme_patterns` to `gutenberg_get_theme_directory_pattern_slugs`. ([51784](https://github.com/WordPress/gutenberg/pull/51784))
+-   Block editor store: Also attach private APIs to old store descriptor. ([52088](https://github.com/WordPress/gutenberg/pull/52088))
+-   Blocks: Remove gutenberg refs in PHP files. ([51978](https://github.com/WordPress/gutenberg/pull/51978))
+-   Command palette: Rename. ([52153](https://github.com/WordPress/gutenberg/pull/52153))
+-   Drop-indicator: Remove white border. ([52122](https://github.com/WordPress/gutenberg/pull/52122))
+-   First version of the Interactivity API README. ([52104](https://github.com/WordPress/gutenberg/pull/52104))
+-   Global Styles Revisions API: Backport changes from Core. ([52095](https://github.com/WordPress/gutenberg/pull/52095))
+-   Global Styles Sidebar: Re-add Colors: Heading to selected blocks. ([49131](https://github.com/WordPress/gutenberg/pull/49131))
+-   Image block: Update lightbox animation tests. ([52290](https://github.com/WordPress/gutenberg/pull/52290))
+-   Patterns: Update section heading levels. ([52273](https://github.com/WordPress/gutenberg/pull/52273))
+-   Perf logging: Change date to ISO 8601. ([51833](https://github.com/WordPress/gutenberg/pull/51833))
+-   Refactor use-tab-nav shift+tab to use existing utils. ([51817](https://github.com/WordPress/gutenberg/pull/51817))
+-   Remove serverSideBlockDefinitions from a test. ([52215](https://github.com/WordPress/gutenberg/pull/52215))
+-   Restore "Buttons > can resize width" test. ([51865](https://github.com/WordPress/gutenberg/pull/51865))
+-   Update delete page button label. ([51812](https://github.com/WordPress/gutenberg/pull/51812))
+-   Update versions in WP for 6.3. ([51984](https://github.com/WordPress/gutenberg/pull/51984))
+-   Wrap "Move to trash" and "Switch to draft" buttons when labels are too long to fit on a single row. ([52249](https://github.com/WordPress/gutenberg/pull/52249))
+-   [GitHub-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. ([49082](https://github.com/WordPress/gutenberg/pull/49082))
+
+#### Block Library
+
+-   Block Editor: Unify texts for Create pattern modal. ([52151](https://github.com/WordPress/gutenberg/pull/52151))
+-   Block Supports: Change prefix in gutenberg*apply_colors_support to wp* in dynamic blocks. ([51989](https://github.com/WordPress/gutenberg/pull/51989))
+-   Navigation in Site View: Readd the edit button. ([52111](https://github.com/WordPress/gutenberg/pull/52111))
+-   Navigation submenu: Remove unused doc block. ([52152](https://github.com/WordPress/gutenberg/pull/52152))
+-   Page List: Change modal text. ([52116](https://github.com/WordPress/gutenberg/pull/52116))
+-   i18n: Add context to the word "Filters". ([52198](https://github.com/WordPress/gutenberg/pull/52198))
+
+#### Site Editor
+
+-   Library: Update icons in the creation menu. ([52108](https://github.com/WordPress/gutenberg/pull/52108))
+-   Polish welcome guide copy for page / template editing. ([52282](https://github.com/WordPress/gutenberg/pull/52282))
+-   Try: Update template titles. ([51428](https://github.com/WordPress/gutenberg/pull/51428))
+-   Update stepper styling in Home template details panel. ([51972](https://github.com/WordPress/gutenberg/pull/51972))
+-   Update text color of active menu items. ([51965](https://github.com/WordPress/gutenberg/pull/51965))
+
+#### Patterns
+
+-   Add a hint about the rename of reusable blocks to menu and inserter. ([51771](https://github.com/WordPress/gutenberg/pull/51771))
+-   Copy: "Detach pattern" instead of "Covert to regular block". ([51993](https://github.com/WordPress/gutenberg/pull/51993))
+-   Library: Reinstate manage all template parts page. ([51961](https://github.com/WordPress/gutenberg/pull/51961))
+-   [Library] Add lock icon for theme patterns. ([51990](https://github.com/WordPress/gutenberg/pull/51990))
+
+#### Accessibility
+
+-   Navigation block: Do not toggle aria-expanded on hover when the overlay menu is opened. ([52170](https://github.com/WordPress/gutenberg/pull/52170))
+-   Navigation block: Don't close submenu when it has focus. ([52177](https://github.com/WordPress/gutenberg/pull/52177))
+
+#### Widgets Editor
+
+-   Export the store for the core/edit-widgets pacakage. ([52190](https://github.com/WordPress/gutenberg/pull/52190))
+
+#### Post Editor
+
+-   Move block editor settings filter into 6.3 compat folder. ([52100](https://github.com/WordPress/gutenberg/pull/52100))
+
+#### Layout
+
+-   Move grid function kses patch into 6.3 compat folder. ([52098](https://github.com/WordPress/gutenberg/pull/52098))
+
+#### Data Layer
+
+-   hasResolvingSelectors: Exclude from result of resolveSelect. ([52038](https://github.com/WordPress/gutenberg/pull/52038))
+
+#### Icons
+
+-   Remove fill="none" from pinSmall icon. ([51979](https://github.com/WordPress/gutenberg/pull/51979))
+
+#### Navigation Menu Sidebar
+
+-   Sidebar Navigation: Refactor delete modal with `ConfirmDialog` component. ([51867](https://github.com/WordPress/gutenberg/pull/51867))
+
+#### Templates API
+
+-   Template revisions API: Move back to experimental. ([51774](https://github.com/WordPress/gutenberg/pull/51774))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @annezazu @artemiomorales @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @draganescu @ellatrix @fullofcaffeine @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeryj @jsnajdr @juanfra @juanmaguitar @kevin940726 @luisherranz @Mamaduka @mcsf @michalczaplinski @miminari @noisysocks @ntsekouras @oandregal @ockham @priethor @ramonjd @richtabor @ryanwelcher @SaxonF @scruffian @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad
+
+= 16.1.1 =
+
+## Changelog
+
+### Features
+
+#### Patterns
+
+-   Remove ability for user to toggle sync status after pattern creation. This is because changing the sync status can have unintended consequences on existing instances of the block. ([52230](https://github.com/WordPress/gutenberg/pull/52230))
+
+### Code Quality
+
+#### Patterns
+
+-   Rename sync_status postmeta from `sync_status` to `wp_pattern_sync_status` to avoid clashes with custom plugin fields. ([52232](https://github.com/WordPress/gutenberg/pull/52232))
+
+### Bugs
+
+#### Patterns
+
+-   Fix issue with wrong sync status being set in the Site Editor when adding new synced patterns. ([52229 ](https://github.com/WordPress/gutenberg/pull/52229))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@glendaviesnz
+
+= 16.1.0 =
+
+## Changelog
+
+### Features
+
+#### Navigation Menu Sidebar
+
+-   Add focus mode for Navigation Menus. ([39286](https://github.com/WordPress/gutenberg/pull/39286))
+-   Allow renaming, duplication and deleting of Navigation menus from Browse Mode Sidebar. ([50880](https://github.com/WordPress/gutenberg/pull/50880))
+
+#### Block Library
+
+-   Add Navigation Menus to Template Parts screen sidebar in Browse Mode. ([51492](https://github.com/WordPress/gutenberg/pull/51492))
+-   Add Footnotes block to text blocks. ([51201](https://github.com/WordPress/gutenberg/pull/51201))
+
+#### Patterns
+
+-   Allow for filtering of block patterns by source. ([51672](https://github.com/WordPress/gutenberg/pull/51672))
+-   Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern. ([51144](https://github.com/WordPress/gutenberg/pull/51144))
+-   Site Editor: Add Library for Template Parts & Patterns Management. ([51078](https://github.com/WordPress/gutenberg/pull/51078))
+
+#### Themes
+
+-   Remove the experiment option for Block Theme Previews. ([50983](https://github.com/WordPress/gutenberg/pull/50983))
+
+#### Site Editor
+
+-   Add distraction free to site editor [51173](https://github.com/WordPress/gutenberg/pull/51173)
+
+### Enhancements
+
+#### Site Editor
+
+-   Edit Site: Make admin background consistent with layout. ([51741](https://github.com/WordPress/gutenberg/pull/51741))
+-   Edit Site: Remove first loading spinner. ([51736](https://github.com/WordPress/gutenberg/pull/51736))
+-   Edit Site: Use global background color while loading. ([51709](https://github.com/WordPress/gutenberg/pull/51709))
+-   Improve guidance to editing template when focused on editing a page. ([51366](https://github.com/WordPress/gutenberg/pull/51366))
+-   Only show view site link in view mode. ([51279](https://github.com/WordPress/gutenberg/pull/51279))
+-   Page Details View: Show featured image only if there is one. ([51649](https://github.com/WordPress/gutenberg/pull/51649))
+-   Page Details View: Show parent only if there is one. ([51648](https://github.com/WordPress/gutenberg/pull/51648))
+-   Site editor sidebar: Home template details. ([51223](https://github.com/WordPress/gutenberg/pull/51223))
+-   Navigation on Browse Mode: Move the action to the leaf menu. ([50843](https://github.com/WordPress/gutenberg/pull/50843))
+-   Remove Taxonomy as an option in the add template flow. ([51586](https://github.com/WordPress/gutenberg/pull/51586))
+-   Remove shadows in Site Editor sidebar. ([51546](https://github.com/WordPress/gutenberg/pull/51546))
+-   Show warning on critical block removal. ([51145](https://github.com/WordPress/gutenberg/pull/51145))
+-   Site editor navigation: Use chevron left in RTL mode. ([51588](https://github.com/WordPress/gutenberg/pull/51588))
+-   Add ability to set status, publish date and password in site editor. ([51408](https://github.com/WordPress/gutenberg/pull/51408))
+-   Add table view to manage templates page. ([50766](https://github.com/WordPress/gutenberg/pull/50766))
+-   Update Library panel footer. ([51652](https://github.com/WordPress/gutenberg/pull/51652))
+-   Update page list footer. ([51438](https://github.com/WordPress/gutenberg/pull/51438))
+-   List draft navigations in Browse mode Navigation section. ([51422](https://github.com/WordPress/gutenberg/pull/51422))
+-   Show actions for empty menus in Navigation on Browse mode. ([51420](https://github.com/WordPress/gutenberg/pull/51420))
+-   Unify welcome guides labels casing. ([51700](https://github.com/WordPress/gutenberg/pull/51700))
+-   Site editor sidebar: Add footer to template part and ensure nested template areas display. ([51669](https://github.com/WordPress/gutenberg/pull/51669))
+-   Update colors in 'Site view'. ([51856](https://github.com/WordPress/gutenberg/pull/51856))
+-   Site Editor: Make string to add Template parts and Patterns consistent and translatable [51743](https://github.com/WordPress/gutenberg/pull/51743)
+
+#### Components
+
+-   ItemGroup: Update button focus styles to be more consistent. ([51576](https://github.com/WordPress/gutenberg/pull/51576))
+-   Toolbar: Use Ariakit instead of Reakit. ([51623](https://github.com/WordPress/gutenberg/pull/51623))
+-   Update: Adjust modal radius to be between frame and buttons. ([51254](https://github.com/WordPress/gutenberg/pull/51254))
+-   UnitControl: Revamp support for changing unit by typing. ([39303](https://github.com/WordPress/gutenberg/pull/39303))
+-   Move HeadinglevelDropdown to its own component. ([46003](https://github.com/WordPress/gutenberg/pull/46003))
+-   Button: Introduce size prop [51842](https://github.com/WordPress/gutenberg/pull/51842)
+
+#### Block Editor
+
+-   List View: Try showing blocks that are dragged (no longer hide them). ([51724](https://github.com/WordPress/gutenberg/pull/51724))
+-   Updated unstyled Button hover selector to change fill of svg and path element. ([50819](https://github.com/WordPress/gutenberg/pull/50819))
+-   Writing Flow: Allow Escape key to deselect blocks and selection during multiselection. ([48904](https://github.com/WordPress/gutenberg/pull/48904))
+-   Change "Copy block" to "Copy". ([51532](https://github.com/WordPress/gutenberg/pull/51532))
+-   Limit Copy/Paste Styles menu item. ([51503](https://github.com/WordPress/gutenberg/pull/51503))
+-   Force disable suggestions until URL field is dirty in Link Control. ([51354](https://github.com/WordPress/gutenberg/pull/51354))
+-   Top toolbar: Refine the icons on the right. ([51735](https://github.com/WordPress/gutenberg/pull/51735))
+-   Improve LinkControl Edit UI. ([51712](https://github.com/WordPress/gutenberg/pull/51712))
+
+#### Block Library
+
+-   List block: Add numbering type selection. ([51186](https://github.com/WordPress/gutenberg/pull/51186))
+-   Patterns: Removes the pattern experiment. ([51719](https://github.com/WordPress/gutenberg/pull/51719))
+-   Remove `accordion` from details block keywords. ([51597](https://github.com/WordPress/gutenberg/pull/51597))
+-   Add init modules to details and post-time-to-read blocks. ([51606](https://github.com/WordPress/gutenberg/pull/51606))
+-   Improve logic in `render_block_core_template_part`. ([50636](https://github.com/WordPress/gutenberg/pull/50636))
+-   Indicate Draft status of menus in Nav block menu selector. ([51427](https://github.com/WordPress/gutenberg/pull/51427))
+-   Mobile - Image block - Fix issue with set width and height images. ([51463](https://github.com/WordPress/gutenberg/pull/51463))
+-   Navigation: Remove destructive colors from modal. ([51691](https://github.com/WordPress/gutenberg/pull/51691))
+-   Pass the block to the onGoToPage function. ([51699](https://github.com/WordPress/gutenberg/pull/51699))
+-   Post Author - don't show 0 in inspector controls. ([51345](https://github.com/WordPress/gutenberg/pull/51345))
+-   Remove anchor support from dynamic blocks. ([51288](https://github.com/WordPress/gutenberg/pull/51288))
+-   Site Tagline Block: Remove unnecessary square path from block icon SVG. ([51611](https://github.com/WordPress/gutenberg/pull/51611))
+-   Add image block aspect ratio control [51545](https://github.com/WordPress/gutenberg/pull/51545)
+-   Updating social link attributes [51997](https://github.com/WordPress/gutenberg/pull/51997)
+
+#### Accessibility
+
+-   Autocomplete: Announce results to screen readers when first becoming visible. ([51018](https://github.com/WordPress/gutenberg/pull/51018))
+-   List View: A11Y focus enhancements for edit-site based on modifications to edit-post. ([51404](https://github.com/WordPress/gutenberg/pull/51404))
+-   Add a description key to theme.json style variations. ([45242](https://github.com/WordPress/gutenberg/pull/45242))
+-   Focus first focusable on Link UI. ([51105](https://github.com/WordPress/gutenberg/pull/51105))
+-   BlockLockModal: restore focus on fallback toolbar button when original button is not rendered [51666](https://github.com/WordPress/gutenberg/pull/51666)
+-   Site Editor Sidebar: improvements to buttons [51762](https://github.com/WordPress/gutenberg/pull/51762)
+
+#### Interactivity API
+
+-   Add missing tests for image block. ([51305](https://github.com/WordPress/gutenberg/pull/51305))
+-   Image block: Add animation toggle to lightbox behavior. ([51357](https://github.com/WordPress/gutenberg/pull/51357))
+
+#### Global Styles
+
+-   Accept transforms in gutenberg_get_global_styles context params. ([50484](https://github.com/WordPress/gutenberg/pull/50484))
+-   Split styles menus in revisions and everything else. ([51318](https://github.com/WordPress/gutenberg/pull/51318))
+
+#### Icons
+
+-   Tweak icons for improved HiDPI devices. ([51511](https://github.com/WordPress/gutenberg/pull/51511))
+
+#### Plugin
+
+-   Remove Details block setting field from the experiments page. ([51372](https://github.com/WordPress/gutenberg/pull/51372))
+
+#### Templates API
+
+-   Return post modified datetime in response. ([51362](https://github.com/WordPress/gutenberg/pull/51362))
+
+#### List View
+
+-   Style Book: Close list view when opening the style book. ([50438](https://github.com/WordPress/gutenberg/pull/50438))
+
+#### Design Tools
+
+-   List View: Add an indicator of when a position type is set for a block. ([49122](https://github.com/WordPress/gutenberg/pull/49122))
+-   Sticky Position: Try re-enabling non-root sticky position. ([49321](https://github.com/WordPress/gutenberg/pull/49321))
+-   Clarify error message if duotone color values is incorrect. ([51397](https://github.com/WordPress/gutenberg/pull/51397))
+-   List all the font families and font sizes from all the theme.json origins in the font picker. ([51488](https://github.com/WordPress/gutenberg/pull/51488))
+
+#### Post Editor
+
+-   Adjust the name of the custom field button labels. ([47407](https://github.com/WordPress/gutenberg/pull/47407))
+-   Block manager: Display a 'Reset' button when blocks are hidden to quickly enable all. ([51200](https://github.com/WordPress/gutenberg/pull/51200))
+
+#### Media
+
+-   Prepublish: Suggest uploading external images. ([46014](https://github.com/WordPress/gutenberg/pull/46014))
+
+#### Patterns
+
+-   Block Options: Use consistent capitalization on template parts and patterns. ([51761](https://github.com/WordPress/gutenberg/pull/51761))
+
+#### CSS & Styling
+
+-   Update editor UI modal width. ([51733](https://github.com/WordPress/gutenberg/pull/51733))
+
+#### Commands
+
+-   Add commands to access template, template parts and styles. ([51501](https://github.com/WordPress/gutenberg/pull/51501))
+-   Add global styles related commands. ([51637](https://github.com/WordPress/gutenberg/pull/51637))
+
+#### Themes
+
+-   Block Theme Previews: Change the URL query string for more safety. ([51312](https://github.com/WordPress/gutenberg/pull/51312))
+-   Update the Save Button label when you're previewing a theme. ([51361](https://github.com/WordPress/gutenberg/pull/51361))
+
+#### Navigation
+
+-   Ensure there is always a Navigation available in the browse mode sidebar via fallback algorithm [50321](https://github.com/WordPress/gutenberg/pull/50321)
+
+### Bug Fixes
+
+#### Block Library
+
+-   Fix navigation error in library. ([51589](https://github.com/WordPress/gutenberg/pull/51589))
+-   Fix site editor rendering of Categories block. ([51329](https://github.com/WordPress/gutenberg/pull/51329))
+-   Gallery block - Add default value for innerBlockImages. ([51443](https://github.com/WordPress/gutenberg/pull/51443))
+-   Latest posts: Make more link consistent between frontend and editor. ([51190](https://github.com/WordPress/gutenberg/pull/51190))
+-   Navigation: Don't interfere with pointer events. ([51378](https://github.com/WordPress/gutenberg/pull/51378))
+-   Post editor: Make the Post Content block available as a child of the Query block. ([51405](https://github.com/WordPress/gutenberg/pull/51405))
+-   Search Block: Fix problem with buttons not outputting primary status. ([51529](https://github.com/WordPress/gutenberg/pull/51529))
+-   Try providing a non-zero value for client width in image editor. ([51285](https://github.com/WordPress/gutenberg/pull/51285))
+-   Query Loop: Properly initialize and update `perPage` when we inherit from global query. ([51641](https://github.com/WordPress/gutenberg/pull/51641))
+-   Avatar block: Fix not 1:1 between the editor and the front-end. ([49963](https://github.com/WordPress/gutenberg/pull/49963))
+-   Spacer block: Fix invalid markup when set to fill. ([51317](https://github.com/WordPress/gutenberg/pull/51317))
+-   Buttons Block: add support for orientation-based block movers [51831](https://github.com/WordPress/gutenberg/pull/51831)
+-   Rename navigation fallback classes from WP* to Gutenberg* [51959](https://github.com/WordPress/gutenberg/pull/51959)
+
+#### Commands
+
+-   Show pages with any status in the command center. ([51324](https://github.com/WordPress/gutenberg/pull/51324))
+-   Add manage all custom patterns command [51845](https://github.com/WordPress/gutenberg/pull/51845)
+-   Add another batch of commands to the site editor [51832](https://github.com/WordPress/gutenberg/pull/51832)
+-   Add UI commands to the post editor [51900](https://github.com/WordPress/gutenberg/pull/51900)
+-   Add preferences and keyboard shortcuts commands [51862](https://github.com/WordPress/gutenberg/pull/51862)
+
+#### Core Data
+
+-   Core Data: Fix ESLint warning for the 'useEntityRecord' hook. ([51562](https://github.com/WordPress/gutenberg/pull/51562))
+-   useEntityRecord: Fix destructure error when `enabled` option is `false`. ([51534](https://github.com/WordPress/gutenberg/pull/51534))
+
+#### Block Editor
+
+-   Fix blocks autocompleter 'rootClientId' selector. ([51673](https://github.com/WordPress/gutenberg/pull/51673))
+-   Inserter: Fix arrows in RTL mode. ([51622](https://github.com/WordPress/gutenberg/pull/51622))
+-   Link Format: Don't return focus on the selected text 'onFocusOutside'. ([51684](https://github.com/WordPress/gutenberg/pull/51684))
+-   ListView: Update drop indicator line positioning to support rtl languages. ([51284](https://github.com/WordPress/gutenberg/pull/51284))
+-   Page Content Focus: Default insertion point to the Post Content block. ([51773](https://github.com/WordPress/gutenberg/pull/51773))
+
+#### Site Editor
+
+-   Add 'Edit template' and 'Back to page' commands. ([51364](https://github.com/WordPress/gutenberg/pull/51364))
+-   Fix template display in page details with a custom template. ([51638](https://github.com/WordPress/gutenberg/pull/51638))
+-   Page details: Fix displaying slugs with non-latin characters. ([51679](https://github.com/WordPress/gutenberg/pull/51679))
+-   Prevent block overlay on blocks with a 'contentOnly' editing mode. ([51780](https://github.com/WordPress/gutenberg/pull/51780))
+-   Fix gradient background color repeats. ([51374](https://github.com/WordPress/gutenberg/pull/51374))
+-   Global styles: Fix back button tooltip. ([51725](https://github.com/WordPress/gutenberg/pull/51725))
+-   Site editor header: Fix document title back and shortcut color contrast. ([51442](https://github.com/WordPress/gutenberg/pull/51442))
+-   Site editor sidebar: Fix the heading hierarchy. ([51696](https://github.com/WordPress/gutenberg/pull/51696))
+-   Disable the revision button if there is no clickable menu [51851](https://github.com/WordPress/gutenberg/pull/51851)
+-   Library: Fix misalignment of description in custom template parts [51868](https://github.com/WordPress/gutenberg/pull/51868)
+-   Library: Fix delete shortcut incorrectly bound to non-user patterns [51830](https://github.com/WordPress/gutenberg/pull/51830)
+-   Fix toolbar overlap in site editor [51810](https://github.com/WordPress/gutenberg/pull/51810)
+-   Increase space between page meta and details section [51858](https://github.com/WordPress/gutenberg/pull/51858/)
+-   Fix missing MenuGroup segment in Site Editor header more menu [51860](https://github.com/WordPress/gutenberg/pull/51860)
+-   Update the add template modal design [51806](https://github.com/WordPress/gutenberg/pull/51806)
+-   Update text color of site editor menu item hover/active states [51847](https://github.com/WordPress/gutenberg/pull/51847)
+-   Fix library command path [51837](https://github.com/WordPress/gutenberg/pull/51837)
+-   Restore sidebar in focus mode on Pattern click through in Browse Mode Library [51897](https://github.com/WordPress/gutenberg/pull/51897)
+
+#### Accessibility
+
+-   Distraction Free: Avoid focus loss when enabling/disabling distraction free mode via the more menu. ([51627](https://github.com/WordPress/gutenberg/pull/51627))
+-   Library: Add an explicit label to the search control. ([51781](https://github.com/WordPress/gutenberg/pull/51781))
+-   Site editor: Add a navigable region for content area of Library and Template views. ([51782](https://github.com/WordPress/gutenberg/pull/51782))
+-   Fix shift+tab behavior to move to toolbar when the preceding block has a form element. ([51548](https://github.com/WordPress/gutenberg/pull/51548))
+
+#### Global Styles
+
+-   Color Panel: Fix rendering of tabs with no color. ([51498](https://github.com/WordPress/gutenberg/pull/51498))
+-   Remove custom padding on style revisions button. ([51269](https://github.com/WordPress/gutenberg/pull/51269))
+
+#### Components
+
+-   MediaPlaceholder: Fix position of URLPopover. ([51363](https://github.com/WordPress/gutenberg/pull/51363))
+-   Popover: Allow legitimate 0 positions to update popover position. ([51320](https://github.com/WordPress/gutenberg/pull/51320))
+-   Button: Remove unnecessary margin from dashicon. ([51395](https://github.com/WordPress/gutenberg/pull/51395))
+-   Keep framer-motion from updating minor version [51894](https://github.com/WordPress/gutenberg/pull/51894)
+-   ConfirmDialog: Fix affirmative action being triggered an extra time when selecting a button via keyboard [51730](https://github.com/WordPress/gutenberg/pull/51730)
+-   Tweak more icons for high-resolution devices [51768](https://github.com/WordPress/gutenberg/pull/51768)
+-   ZStack: fix component bounding box to match children [51836](https://github.com/WordPress/gutenberg/pull/51836)
+
+#### Patterns
+
+-   Library: Reinstate sidebar navigation menu editing for template parts. ([51825](https://github.com/WordPress/gutenberg/pull/51825))
+
+#### Interactivity API
+
+-   Image block: Remove Lightbox markup if is set as disabled. ([51692](https://github.com/WordPress/gutenberg/pull/51692))
+
+#### Block Locking
+
+-   Fix regression in selectors. ([51541](https://github.com/WordPress/gutenberg/pull/51541))
+
+#### Typography
+
+-   Fluid typography: Custom font-sizes should use max viewport width. ([51516](https://github.com/WordPress/gutenberg/pull/51516))
+
+#### Widgets Editor
+
+-   Fix fixed toolbar in customize widgets. ([51092](https://github.com/WordPress/gutenberg/pull/51092))
+
+#### Navigation Menu Sidebar
+
+-   Hide the hidden navigation block. ([50662](https://github.com/WordPress/gutenberg/pull/50662))
+
+#### Block Variations
+
+-   [Block Library - Post Terms]: Custom taxonomies do not show icons when transforming from the toolbar. ([51476](https://github.com/WordPress/gutenberg/pull/51476))
+
+#### Page Content Focus
+
+-   Switch to Page panel when deselecting a block [51881](https://github.com/WordPress/gutenberg/pull/51881)
+-   Don't show 'Back to page' notification when navigating away from page [51880](https://github.com/WordPress/gutenberg/pull/51880)
+-   useBlockSync(): Reset inner blocks when component unmounts [51783](https://github.com/WordPress/gutenberg/pull/51783)
+-   Fix black pixel appearing when block toolbar is empty [51779](https://github.com/WordPress/gutenberg/pull/51779)
+-   Only show Page Content Focus commands when in edit mode [51888](https://github.com/WordPress/gutenberg/pull/51888)
+
+### Performance
+
+#### Site Editor
+
+-   Edit Site: Add a loading timeout. ([51049](https://github.com/WordPress/gutenberg/pull/51049))
+-   Improve DocumentActions performance. ([51432](https://github.com/WordPress/gutenberg/pull/51432))
+-   Prevent BlockBreadcrumb from re-rendering unnecessarily when typing. ([51628](https://github.com/WordPress/gutenberg/pull/51628))
+-   Reduce number of List View re-renders while typing. ([51518](https://github.com/WordPress/gutenberg/pull/51518))
+-   Improve PagePanels performance. ([51319](https://github.com/WordPress/gutenberg/pull/51319))
+
+#### Block Editor
+
+-   Improve getBlockEditingMode() and useAppender() performance. ([51675](https://github.com/WordPress/gutenberg/pull/51675))
+
+### Experiments
+
+#### Global Styles
+
+-   Color Randomizer: Fix an error when the theme has no color palette. ([51539](https://github.com/WordPress/gutenberg/pull/51539))
+
+### Documentation
+
+-   Docs: Fix incorrect import of useEntityRecords in code example. ([51630](https://github.com/WordPress/gutenberg/pull/51630))
+-   Fix broken links in editor documentation. ([51321](https://github.com/WordPress/gutenberg/pull/51321))
+-   Fix grammar in the Create a Block > WordPress Plugin page. ([51663](https://github.com/WordPress/gutenberg/pull/51663))
+-   Fix grammar on the Create a Block tutorial page. ([51662](https://github.com/WordPress/gutenberg/pull/51662))
+-   Fix grammar on the Getting Started page. ([51661](https://github.com/WordPress/gutenberg/pull/51661))
+-   Update broken link. ([41758](https://github.com/WordPress/gutenberg/pull/41758))
+-   Update components README.md. ([51557](https://github.com/WordPress/gutenberg/pull/51557))
+-   Update wp-env changelog. ([51614](https://github.com/WordPress/gutenberg/pull/51614))
+-   Updated getEntityRecord doc by using selector instead of dispatch. ([51298](https://github.com/WordPress/gutenberg/pull/51298))
+
+### Code Quality
+
+#### General
+
+-   Adopt lock-unlock.js and private-apis.js convention. ([51322](https://github.com/WordPress/gutenberg/pull/51322))
+-   Formats: Avoid rerendering language edit component when typing. ([51440](https://github.com/WordPress/gutenberg/pull/51440))
+-   Keyboard Shortcut: Clean up shortcut names. ([51739](https://github.com/WordPress/gutenberg/pull/51739))
+-   Lodash: Refactor away from `_.kebabCase()` in block editor. ([51687](https://github.com/WordPress/gutenberg/pull/51687))
+-   Lodash: Refactor away from `_.mergeWith()`. ([51483](https://github.com/WordPress/gutenberg/pull/51483))
+-   Lodash: Remove from blocks package. ([51703](https://github.com/WordPress/gutenberg/pull/51703))
+-   Remove pattern directory categories endpoint. ([51340](https://github.com/WordPress/gutenberg/pull/51340))
+-   Require relocated class files for back-compat in WordPress releases. ([51670](https://github.com/WordPress/gutenberg/pull/51670))
+
+#### Block Library
+
+-   Add tests for WP_Classic_To_Block_Menu_Converter class. ([51410](https://github.com/WordPress/gutenberg/pull/51410))
+-   Details: Set 'clientId' as useSelect dependency. ([51634](https://github.com/WordPress/gutenberg/pull/51634))
+-   Move Navigation fallback files to 6.3 directory. ([51572](https://github.com/WordPress/gutenberg/pull/51572))
+-   Navigation: Fix ListView deprecation notice. ([51094](https://github.com/WordPress/gutenberg/pull/51094))
+-   Navigation: Just a simple refactor. ([51382](https://github.com/WordPress/gutenberg/pull/51382))
+-   Remove legacy isTopLevelLink attribute from Navigation block tests. ([51759](https://github.com/WordPress/gutenberg/pull/51759))
+-   Search Block: Write "Button Only" label in sentence capitalization. ([51629](https://github.com/WordPress/gutenberg/pull/51629))
+
+#### Site Editor
+
+-   Browse Mode: Move CSS to more generic selector. ([51547](https://github.com/WordPress/gutenberg/pull/51547))
+-   DRY up ContentBlocksList and BlockInspectorLockedBlocks. ([51281](https://github.com/WordPress/gutenberg/pull/51281))
+-   Edit Site: Refactor the NavigationMenuContent component and fix the deprecation notice. ([51469](https://github.com/WordPress/gutenberg/pull/51469))
+-   PageContent: Fix unlock import. ([51360](https://github.com/WordPress/gutenberg/pull/51360))
+-   Refactor Site Editor block editor code. ([51524](https://github.com/WordPress/gutenberg/pull/51524))
+
+#### Block Editor
+
+-   Lodash: Replace `_.mergeWith()` with `deepmerge` in blocks. ([50637](https://github.com/WordPress/gutenberg/pull/50637))
+-   useInsertionPoint: Add missing dependency for useCallback. ([51682](https://github.com/WordPress/gutenberg/pull/51682))
+-   Block Editor: Improve data selector for BlockQuickNavigationItem. ([51429](https://github.com/WordPress/gutenberg/pull/51429))
+-   Block Editor: Remove redundant memoization from 'ImageURLInputUI'. ([51658](https://github.com/WordPress/gutenberg/pull/51658))
+-   Block Editor: Simplify filtering condition for `getBlockParentsByBlockName` selector. ([51439](https://github.com/WordPress/gutenberg/pull/51439))
+-   Block Editor: Remove unused selectors. ([51674](https://github.com/WordPress/gutenberg/pull/51674))
+
+#### Navigation Menu Sidebar
+
+-   Extract nav editor component in Nav in Browse mode. ([51436](https://github.com/WordPress/gutenberg/pull/51436))
+-   Remove custom button and (conditionally) show single menu on Navigation route in Browse Mode. ([51565](https://github.com/WordPress/gutenberg/pull/51565))
+
+#### Design Tools
+
+-   Fluid typography: Add missing changelog from #51516. ([51668](https://github.com/WordPress/gutenberg/pull/51668))
+
+#### Layout
+
+-   Move layout definitions out of theme.json. ([50621](https://github.com/WordPress/gutenberg/pull/50621))
+-   Try stabilising layout and its associated APIs. ([51434](https://github.com/WordPress/gutenberg/pull/51434))
+
+#### Global Styles
+
+-   Global styles revisions: Move from experimental to 6.3. ([51474](https://github.com/WordPress/gutenberg/pull/51474))
+
+#### Post Editor
+
+-   Fix refactor flat term selector to use data api for creating new terms. ([50952](https://github.com/WordPress/gutenberg/pull/50952))
+
+#### Data Layer
+
+-   Private actions and selectors: Return stable references, expose to thunks. ([51051](https://github.com/WordPress/gutenberg/pull/51051))
+
+#### Themes
+
+-   Block Theme Previews: Rename GET variable and prepare for core compat. ([51738](https://github.com/WordPress/gutenberg/pull/51738))
+
+#### Interactivity API
+
+-   Remove the hydration console log of the Interactivity API. ([51571](https://github.com/WordPress/gutenberg/pull/51571))
+-   Use interactivity API for Navigation and File blocks only in Gutenberg. ([51694](https://github.com/WordPress/gutenberg/pull/51694))
+-   Behaviors: Move behaviors code to experimental folder. ([51654](https://github.com/WordPress/gutenberg/pull/51654))
+
+#### Components
+
+-   Convert `ClipboardButton` to TypeScript. ([51334](https://github.com/WordPress/gutenberg/pull/51334))
+-   Use internal context system to apply toolbar variant to toolbar dropdowns. ([51154](https://github.com/WordPress/gutenberg/pull/51154))
+
+#### Parser
+
+-   Split each class in `parser.php` to a separate file. ([48693](https://github.com/WordPress/gutenberg/pull/48693))
+
+### Tools
+
+#### Testing
+
+-   Add 'Mamaduka' as one of the code owners for Playwright tests. ([51470](https://github.com/WordPress/gutenberg/pull/51470))
+-   Combine Site Editor list view tests into a single file. ([51635](https://github.com/WordPress/gutenberg/pull/51635))
+-   Consolidate duplicate block tests. ([51352](https://github.com/WordPress/gutenberg/pull/51352))
+-   Fix flaky 'Keep styles on block transforms' end-to-end test. ([51593](https://github.com/WordPress/gutenberg/pull/51593))
+-   Fix flaky 'Push to Global Styles' end-to-end test. ([51636](https://github.com/WordPress/gutenberg/pull/51636))
+-   Fix flaky 'Switch to Draft' action in preview end-to-end tests. ([51564](https://github.com/WordPress/gutenberg/pull/51564))
+-   Fix flaky 'hooks API' end-to-end test. ([51592](https://github.com/WordPress/gutenberg/pull/51592))
+-   Fix flaky Image block interactivity end-to-end test. ([51573](https://github.com/WordPress/gutenberg/pull/51573))
+-   Fix the flaky site editor list view tests. ([51598](https://github.com/WordPress/gutenberg/pull/51598))
+-   Migrate 'Allowed Blocks Setting on InnerBlocks' tests to Playwright. ([51677](https://github.com/WordPress/gutenberg/pull/51677))
+-   Migrate block hierarchy navigation tests to Playwright. ([51517](https://github.com/WordPress/gutenberg/pull/51517))
+-   Playwright Utils: Change preference update method in setIsFixedToolbar. ([51659](https://github.com/WordPress/gutenberg/pull/51659))
+-   Playwright Utils: Simplify editor preference updates in createNewPost. ([51560](https://github.com/WordPress/gutenberg/pull/51560))
+-   Styles Navigation Screen: Close style book using location. ([51365](https://github.com/WordPress/gutenberg/pull/51365))
+-   Update BlockEditorProvider tests. ([51497](https://github.com/WordPress/gutenberg/pull/51497))
+-   Update E2E test sharding on CI, make Playwright tests faster, Puppeteer tests slower. ([50362](https://github.com/WordPress/gutenberg/pull/50362))
+-   Update the 'Iframe block' test and fix flakiness. ([51631](https://github.com/WordPress/gutenberg/pull/51631))
+-   end-to-end tests: Try fixing 'networkidle' timeout errors. ([51826](https://github.com/WordPress/gutenberg/pull/51826))
+-   test: Re-enable native integration tests. ([51706](https://github.com/WordPress/gutenberg/pull/51706))
+-   Migrate Navigable toolbar test to Playwright. ([51514](https://github.com/WordPress/gutenberg/pull/51514))
+-   Mobile unit tests: Remove custom waitFor implementation. ([46735](https://github.com/WordPress/gutenberg/pull/46735))
+-   Set fixedToolbar to false after each top toolbar test to ensure proper cleanup. ([51600](https://github.com/WordPress/gutenberg/pull/51600))
+-   Fix performance test failure on trunk. ([51407](https://github.com/WordPress/gutenberg/pull/51407))
+-   Performance tests: Make theme versions consistent cross-env. ([50905](https://github.com/WordPress/gutenberg/pull/50905))
+-   Performance tests: Update base point to compare. ([51381](https://github.com/WordPress/gutenberg/pull/51381))
+
+#### Build Tooling
+
+-   Babel config: Enable useSpread option for JSX transform to reduce transpilation. ([51574](https://github.com/WordPress/gutenberg/pull/51574))
+-   Lodash: Remove from lint staged type check. ([51698](https://github.com/WordPress/gutenberg/pull/51698))
+-   Performance Tests: Update the base point to compare against. ([51689](https://github.com/WordPress/gutenberg/pull/51689))
+-   wp-env: Try to fix failing PHP GitHub actions. ([51513](https://github.com/WordPress/gutenberg/pull/51513))
+-   npm lockfile: Hoist reakit and date-fns packages to the top. ([51500](https://github.com/WordPress/gutenberg/pull/51500))
+
+#### Plugin
+
+-   Add script to compile usage of experimental APIs. ([51341](https://github.com/WordPress/gutenberg/pull/51341))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @bangank36: Update components README.md. ([51557](https://github.com/WordPress/gutenberg/pull/51557))
+-   @samnajian: Accept transforms in gutenberg_get_global_styles context params. ([50484](https://github.com/WordPress/gutenberg/pull/50484))
+-   @xerpa43: Avatar block: Fix not 1:1 between the editor and the front-end. ([49963](https://github.com/WordPress/gutenberg/pull/49963))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @alexstine @andrewserong @aristath @artemiomorales @aurooba @bangank36 @c4rl0sbr4v0 @carolinan @ciampo @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanfra @kozer @luisherranz @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @okmttdhr @paulopmt1 @pbking @peterwilsoncc @pooja-muchandikar @ramonjd @richtabor @samnajian @SantosGuillamot @SavPhill @SaxonF @scruffian @shimotmk @Sidsector9 @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @walbo @WunderBart @xerpa43 @youknowriad @priethor @ajlende @mirka
+
+= 16.0.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Editor
+
+-   Block Controls SlotFill: Refactor to allow passing multiple contexts, including internal components context. ([51264](https://github.com/WordPress/gutenberg/pull/51264))
+-   Block Toolbar: Update the 'Unlock' button label. ([51083](https://github.com/WordPress/gutenberg/pull/51083))
+-   Iframe Editor if all blocks are v3. ([48286](https://github.com/WordPress/gutenberg/pull/48286))
+-   Improve (and relax) search vs direct URL entry detection in Link Control. ([51011](https://github.com/WordPress/gutenberg/pull/51011))
+-   Link Control require user to manually submit any changes. ([50668](https://github.com/WordPress/gutenberg/pull/50668))
+-   List View: Allow dragging outside the immediate area by passing down a dropZoneElement. ([50726](https://github.com/WordPress/gutenberg/pull/50726))
+-   List View: Append when dragging into collapsed blocks. ([50936](https://github.com/WordPress/gutenberg/pull/50936))
+-   Reinstate Text control outside of settings in Link Control. ([50957](https://github.com/WordPress/gutenberg/pull/50957))
+-   Update the document title in the template mode of the post editor. ([50864](https://github.com/WordPress/gutenberg/pull/50864))
+-   Use "Save" instead of "Apply" in Link Control. ([50964](https://github.com/WordPress/gutenberg/pull/50964))
+-   Use checkbox for `Open in new tab` within Link Control. ([50961](https://github.com/WordPress/gutenberg/pull/50961))
+-   Visually hide the LinkControl initial/results heading. ([50977](https://github.com/WordPress/gutenberg/pull/50977))
+
+#### Site Editor
+
+-   Add `delete` action for pages in navigation sidebar. ([51101](https://github.com/WordPress/gutenberg/pull/51101))
+-   Add page details to the Site Editor sidebar. ([50767](https://github.com/WordPress/gutenberg/pull/50767))
+-   Add Paragraph prompt to Post Content when empty. ([50623](https://github.com/WordPress/gutenberg/pull/50623))
+-   Add template actions in site editor navigation sidebar. ([51054](https://github.com/WordPress/gutenberg/pull/51054))
+-   Add the ability to create a new page in the Site Editor. ([50565](https://github.com/WordPress/gutenberg/pull/50565))
+-   Add the ability to focus on editing a page's content vs the page's template. ([50857](https://github.com/WordPress/gutenberg/pull/50857))
+-   Directly save if only changing current context. ([50567](https://github.com/WordPress/gutenberg/pull/50567))
+-   Disable block supports derived design tools when Blocking Editing Mode is not `default`. ([50912](https://github.com/WordPress/gutenberg/pull/50912))
+-   DocumentActions: Animate between page and template mode. ([51224](https://github.com/WordPress/gutenberg/pull/51224))
+-   Site Editor sidebar: Refactor page details. ([51093](https://github.com/WordPress/gutenberg/pull/51093))
+-   Styles Screen: Add link to global styles revisions. ([51149](https://github.com/WordPress/gutenberg/pull/51149))
+-   Try adding dynamic page templates to pages section. ([50630](https://github.com/WordPress/gutenberg/pull/50630))
+-   Tweak edit site resizable frame handle. ([50878](https://github.com/WordPress/gutenberg/pull/50878))
+-   Update the bottom sticky section in the site editor details panel. ([51274](https://github.com/WordPress/gutenberg/pull/51274))
+
+#### Block Library
+
+-   Details Block: Remove experimental flag and stabilize. ([50997](https://github.com/WordPress/gutenberg/pull/50997))
+-   Post Excerpt: Improve preview on the editor site. ([50167](https://github.com/WordPress/gutenberg/pull/50167))
+-   Post Title: Improve preview on the editor site. ([50147](https://github.com/WordPress/gutenberg/pull/50147))
+-   Query Pagination: Address feedback from #50779. ([51165](https://github.com/WordPress/gutenberg/pull/51165))
+-   Query Pagination: Allow hiding the label text. ([50779](https://github.com/WordPress/gutenberg/pull/50779))
+-   Search Block: Add button only with expandable input. ([50487](https://github.com/WordPress/gutenberg/pull/50487))
+-   Search block: Refactor to use HTML Tag Processor. ([51273](https://github.com/WordPress/gutenberg/pull/51273))
+-   Post Link: Update block variation icon to match the one used in the Link UI results. ([50190](https://github.com/WordPress/gutenberg/pull/50190))
+-   Post Template: Add block spacing and layout. ([49050](https://github.com/WordPress/gutenberg/pull/49050))
+
+#### Components
+
+-   Button: Add opt-in prop for larger `isSmall` size. ([51012](https://github.com/WordPress/gutenberg/pull/51012))
+-   ListView: Converted additional content render into a component. ([51163](https://github.com/WordPress/gutenberg/pull/51163))
+-   ColorPalette: Improve color name readability. ([50450](https://github.com/WordPress/gutenberg/pull/50450))
+-   Spacing: Optimize and condense unlinked spacing controls. ([50660](https://github.com/WordPress/gutenberg/pull/50660))
+
+#### Data Layer
+
+-   Merge selector-binding code (except resolvers) into a new bindSelector function. ([51176](https://github.com/WordPress/gutenberg/pull/51176))
+-   Move action-binding code to a bindAction function. ([51161](https://github.com/WordPress/gutenberg/pull/51161))
+
+#### Accessibility
+
+-   Add TabPanel to document overview replacing fake tabs. ([50199](https://github.com/WordPress/gutenberg/pull/50199))
+-   BorderControl: Improve color code readability in aria-label. ([51197](https://github.com/WordPress/gutenberg/pull/51197))
+-   Handle isDraft or isInvalid Enter keypress via onKeyDown instead of a Keyboard Shortcut. ([51021](https://github.com/WordPress/gutenberg/pull/51021))
+-   ListView: Allow deleting blocks using keyboard. ([50422](https://github.com/WordPress/gutenberg/pull/50422))
+-   Site Editor: Add view site link to site editor nav. ([50420](https://github.com/WordPress/gutenberg/pull/50420))
+-   Use generic `div` instead of nav for the SidebarNavigationScreen component. ([51111](https://github.com/WordPress/gutenberg/pull/51111))
+
+### New APIs
+
+-   Command Center: Marks the selectors and actions of the commands store as a public API. ([51169](https://github.com/WordPress/gutenberg/pull/51169))
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Add inert attribute to disabled blocks that have only disabled descendants. ([51079](https://github.com/WordPress/gutenberg/pull/51079))
+-   Fix multi-entity multi-property undo redo. ([50911](https://github.com/WordPress/gutenberg/pull/50911))
+-   Hide the save draft button for published posts. ([51193](https://github.com/WordPress/gutenberg/pull/51193))
+-   Iframe enqueuing: Add editorStyle and warning. ([50091](https://github.com/WordPress/gutenberg/pull/50091))
+-   Improvements to how blocks with a 'disabled' editing mode behave. ([51148](https://github.com/WordPress/gutenberg/pull/51148))
+-   Link Control: Add missing translation. ([51081](https://github.com/WordPress/gutenberg/pull/51081))
+-   Make sure post content always has correct layout. ([51431](https://github.com/WordPress/gutenberg/pull/51431))
+-   Navigation: Memoize link value passed to the LinkControl. ([51155](https://github.com/WordPress/gutenberg/pull/51155))
+
+#### Site Editor
+
+-   Browse Mode: Remove horizontal scrollbar during screen transitions. ([51189](https://github.com/WordPress/gutenberg/pull/51189))
+-   Fix styling of actions in site editor navigation sidebar. ([51153](https://github.com/WordPress/gutenberg/pull/51153))
+-   Properly decode new template title in snackbar. ([51057](https://github.com/WordPress/gutenberg/pull/51057))
+-   Site Editor: Update untitled copy and rendering. ([51074](https://github.com/WordPress/gutenberg/pull/51074))
+
+#### Widgets Editor
+
+-   Update the settings icon in Widgets Editor. ([51029](https://github.com/WordPress/gutenberg/pull/51029))
+
+#### Block Library
+
+-   Freeform/Shortcode: Prevent blocks from converting HTML entities. ([51123](https://github.com/WordPress/gutenberg/pull/51123))
+-   Navigation: Apply color classes to the navigation container element. ([50968](https://github.com/WordPress/gutenberg/pull/50968))
+-   Post Template: Set block context via filter. ([50313](https://github.com/WordPress/gutenberg/pull/50313))
+-   Post Template: Output number of columns as classname for backwards compatibility. ([51358](https://github.com/WordPress/gutenberg/pull/51358))
+-   Post Title: Fix autofocus when iframed. ([51331](https://github.com/WordPress/gutenberg/pull/51331), [51367](https://github.com/WordPress/gutenberg/pull/51367))
+-   Query: Fix deprecation error when migrating layout. ([51311](https://github.com/WordPress/gutenberg/pull/51311))
+-   Term Description: Handle default margin styles. ([51137](https://github.com/WordPress/gutenberg/pull/51137))
+
+#### Global Styles
+
+-   DimensionsPanel: Fix site editor error on Columns block level screen. ([51252](https://github.com/WordPress/gutenberg/pull/51252))
+-   Fluid typography: Ensure max viewport width is used in the editor. ([51146](https://github.com/WordPress/gutenberg/pull/51146))
+-   Global styles revisions: Ensure redirect runs once for back button. ([51316](https://github.com/WordPress/gutenberg/pull/51316))
+-   SpacingSizesControl: Fix problem with the slider position being reset when saving global styles. ([50956](https://github.com/WordPress/gutenberg/pull/50956))
+-   Styles Screen: Ensure variations previews will render in mobile viewports. ([51080](https://github.com/WordPress/gutenberg/pull/51080))
+
+#### Components
+
+-   Fix: Can't type space if `RichText` component is inside button/summary in Firefox. ([50540](https://github.com/WordPress/gutenberg/pull/50540))
+-   FontSizePicker: Fix control header spacing. ([50855](https://github.com/WordPress/gutenberg/pull/50855))
+
+#### Themes
+
+-   Avoid changing non-theme-preview requests. ([51221](https://github.com/WordPress/gutenberg/pull/51221))
+
+#### Data Layer
+
+-   Data: Fix a bug where private selectors on a store with resolvers are inaccessible. ([51166](https://github.com/WordPress/gutenberg/pull/51166))
+
+#### Accessibility
+
+-   Add aria labels to the focal point picker component. ([50993](https://github.com/WordPress/gutenberg/pull/50993))
+-   Block Toolbar: Fix text only label for locked blocks. ([50944](https://github.com/WordPress/gutenberg/pull/50944))
+-   Fix Navigable Toolbar initialIndex. ([51181](https://github.com/WordPress/gutenberg/pull/51181))
+-   Fix screen readers not announcing updated `aria-describedby` in Firefox. ([51035](https://github.com/WordPress/gutenberg/pull/51035))
+-   Link Control: Fix the 'Save' button's disabled state. ([51117](https://github.com/WordPress/gutenberg/pull/51117))
+-   Social Icons: Manually set Snapchat label color. ([51237](https://github.com/WordPress/gutenberg/pull/51237))
+
+### Performance
+
+-   Make getBlockEditingMode() return 'default' when parent is 'contentOnly'. ([51185](https://github.com/WordPress/gutenberg/pull/51185))
+-   Use static closures when not using $this. ([50723](https://github.com/WordPress/gutenberg/pull/50723))
+-   Add `removeAllNotices` action to allow all notices to be removed from a given context. ([44059](https://github.com/WordPress/gutenberg/pull/44059))
+-   Add a new action `removeNotices` which allows bulk removal of notices. ([39940](https://github.com/WordPress/gutenberg/pull/39940))
+
+### Experiments
+
+#### Interactivity API
+
+-   Change label and description for the `gutenberg-interactivity-api-core-blocks` experiments setting. ([51059](https://github.com/WordPress/gutenberg/pull/51059))
+-   Disable Lightbox UI if link has an image. ([51180](https://github.com/WordPress/gutenberg/pull/51180))
+-   Experiment: Put directives on <figure> element and insert lightbox as its child. ([51089](https://github.com/WordPress/gutenberg/pull/51089))
+-   Image Lightbox: Add a reset button. ([51239](https://github.com/WordPress/gutenberg/pull/51239))
+-   Image Lightbox: Add support for external urls in the lightbox. ([51278](https://github.com/WordPress/gutenberg/pull/51278))
+-   Image Lightbox: Fix design of close button for the lightbox (correct PR). ([51206](https://github.com/WordPress/gutenberg/pull/51206))
+-   Image Lightbox: Improve image block lightbox escaping. ([51061](https://github.com/WordPress/gutenberg/pull/51061))
+-   Move the directives and markup needed for the lightbox to block supports. ([51232](https://github.com/WordPress/gutenberg/pull/51232))
+-   Navigation block: Set correct aria-expanded on hover. ([50953](https://github.com/WordPress/gutenberg/pull/50953))
+-   Remove experimental flag from navigation and file blocks to use the Interactivity API (as private). ([51266](https://github.com/WordPress/gutenberg/pull/51266))
+-   Rename directives suffix character and island directive in the Interactivity API. ([51152](https://github.com/WordPress/gutenberg/pull/51152))
+-   Remove not needed aria-hidden attribute in navigation block experiment. ([51044](https://github.com/WordPress/gutenberg/pull/51044))
+
+#### DropdownMenu v2
+
+-   Change default placement to match the legacy DropdownMenu component. ([51133](https://github.com/WordPress/gutenberg/pull/51133))
+-   Render in the default Popover.Slot. ([51046](https://github.com/WordPress/gutenberg/pull/51046))
+-   Style tweaks. ([50967](https://github.com/WordPress/gutenberg/pull/50967))
+-   Tweak styles, add toolbar-specific styles. ([51097](https://github.com/WordPress/gutenberg/pull/51097))
+
+### Documentation
+
+-   Add documentation about the entities abstraction and the undo/redo stack. ([51052](https://github.com/WordPress/gutenberg/pull/51052))
+-   Fix code example error in the Curating the Editor doc. ([51070](https://github.com/WordPress/gutenberg/pull/51070))
+-   Fix formatting and use sentence case for titles in Scripts doc. ([51069](https://github.com/WordPress/gutenberg/pull/51069))
+-   Fix headings in the View component readme. ([51157](https://github.com/WordPress/gutenberg/pull/51157))
+-   Fix text in readme. ([51268](https://github.com/WordPress/gutenberg/pull/51268))
+-   Remove Block Grammar doc and all corresponding internal links. ([51106](https://github.com/WordPress/gutenberg/pull/51106))
+-   Remove Roadmap doc. ([51062](https://github.com/WordPress/gutenberg/pull/51062))
+-   Undo/Redo: Minor edits. ([51085](https://github.com/WordPress/gutenberg/pull/51085))
+-   Update README.md on SlotFills to add info + example about the prop `fillProps`. ([51013](https://github.com/WordPress/gutenberg/pull/51013))
+-   Update React documentation link for propTypes. ([51208](https://github.com/WordPress/gutenberg/pull/51208))
+
+### Code Quality
+
+-   Extract BlockThemePreviews-related code from the editor package. ([50863](https://github.com/WordPress/gutenberg/pull/50863))
+-   Fluid typography: Extract logic to derive fluid typography settings. ([51188](https://github.com/WordPress/gutenberg/pull/51188))
+-   Fonts API: Refactor Theme JSON global functions into WP_Fonts_Resolver. ([50811](https://github.com/WordPress/gutenberg/pull/50811))
+-   Iframe: Clarify how dependencies related to inline styles work. ([51199](https://github.com/WordPress/gutenberg/pull/51199))
+-   Iframe: Fix blob cleanup. ([51004](https://github.com/WordPress/gutenberg/pull/51004))
+-   Iframe: Remove obsolete readyState checks. ([51003](https://github.com/WordPress/gutenberg/pull/51003))
+-   Iframe: Remove obsolete styles HTML parsing. ([51136](https://github.com/WordPress/gutenberg/pull/51136))
+-   Lodash: Remove `_.isEmpty()`. ([51096](https://github.com/WordPress/gutenberg/pull/51096), [50974](https://github.com/WordPress/gutenberg/pull/50974), [51098](https://github.com/WordPress/gutenberg/pull/51098), [50917](https://github.com/WordPress/gutenberg/pull/50917), [51168](https://github.com/WordPress/gutenberg/pull/51168))
+-   mapSelectorsWithResolvers: Don't init hasResolver, mapSelectors already did it. ([51160](https://github.com/WordPress/gutenberg/pull/51160))
+-   mapValues: Use fromEntries, avoid re-creating object in each reducer call. ([51159](https://github.com/WordPress/gutenberg/pull/51159))
+-   Refactor code that adds resolver fulfillment to selector calls. ([51009](https://github.com/WordPress/gutenberg/pull/51009))
+-   Remove legacy logic for `__unstableResolvedAssets`. ([51100](https://github.com/WordPress/gutenberg/pull/51100))
+-   Remove outdated Babel spread optimization from selectors. ([50987](https://github.com/WordPress/gutenberg/pull/50987))
+-   Remove the insert.ref field from insertUsage data. ([51130](https://github.com/WordPress/gutenberg/pull/51130))
+-   Rename 'page content lock' to 'page content focus'. ([51280](https://github.com/WordPress/gutenberg/pull/51280))
+-   Separate template screens in the Site Editor. ([51040](https://github.com/WordPress/gutenberg/pull/51040))
+-   Writing flow: Fix tab into iframe. ([50955](https://github.com/WordPress/gutenberg/pull/50955))
+
+#### Block Editor
+
+-   Refactor Link Control Settings Drawer to avoid unnecessary prop drilling. ([50963](https://github.com/WordPress/gutenberg/pull/50963))
+-   ListView: Remove unused 'useSelect' dependency. ([51134](https://github.com/WordPress/gutenberg/pull/51134))
+
+#### Components
+
+-   BlockDraggable: Use the getBlockType selector. ([51174](https://github.com/WordPress/gutenberg/pull/51174))
+-   PreferenceToggleMenuItem: Add missing useSelect dependency. ([51158](https://github.com/WordPress/gutenberg/pull/51158))
+
+### Tools
+
+#### wp-env
+
+-   Fixed Docker Image Size Ballooning. ([51034](https://github.com/WordPress/gutenberg/pull/51034))
+-   Preferentially Execute Local `wp-env`. ([50980](https://github.com/WordPress/gutenberg/pull/50980))
+
+#### Scripts
+
+-   Scripts: Optimize updating render paths when developing blocks. ([51162](https://github.com/WordPress/gutenberg/pull/51162))
+-   Fix: Build render.php when webpack watch in progress. ([50939](https://github.com/WordPress/gutenberg/pull/50939))
+
+#### Testing
+
+-   Add tests to `useIsDirty`. ([51036](https://github.com/WordPress/gutenberg/pull/51036))
+-   Button: Add basic visual regression tests. ([51000](https://github.com/WordPress/gutenberg/pull/51000))
+-   Comment Template Block: Add test coverage for context setting. ([50879](https://github.com/WordPress/gutenberg/pull/50879))
+-   Comment Template Block: Retain inner blocks inserted via render_block_data filter. ([50883](https://github.com/WordPress/gutenberg/pull/50883))
+-   Fix flaky Behaviors UI end-to-end tests. ([50954](https://github.com/WordPress/gutenberg/pull/50954))
+-   Ignore framer-motion warning when running end-to-end tests locally. ([50938](https://github.com/WordPress/gutenberg/pull/50938))
+-   Link Control test migration: Should contain a label when it should open in a new tab. ([51001](https://github.com/WordPress/gutenberg/pull/51001))
+-   Link control: Migrate tests to Playwright. Can be created by selecting text and using keyboard shortcuts. ([50996](https://github.com/WordPress/gutenberg/pull/50996))
+-   End-to-end tests: Add an assertion to confirm that the URL changed. ([50835](https://github.com/WordPress/gutenberg/pull/50835))
+
+#### Build Tooling
+
+-   babel-preset-default: Enable the bugfixes option for preset-env. ([50994](https://github.com/WordPress/gutenberg/pull/50994))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @okmttdhr: Extract BlockThemePreviews-related code from the editor package. ([50863](https://github.com/WordPress/gutenberg/pull/50863))
+-   @SaxonF: Directly save if only changing current context. ([50567](https://github.com/WordPress/gutenberg/pull/50567))
+-   @Takshil-Kunadia: fix: Build render.php when webpack watch in progress. ([50939](https://github.com/WordPress/gutenberg/pull/50939))
+-   @wayheming: Docs: Fix text in readme. ([51268](https://github.com/WordPress/gutenberg/pull/51268))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @alexstine @andrewserong @anton-vlasenko @artemiomorales @benlk @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @derekblank @ellatrix @fluiddot @geriux @getdave @gigitux @glendaviesnz @gziolo @jameskoster @jeryj @jffng @jsnajdr @juanfra @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @mcsf @michalczaplinski @mikachan @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ockham @okmttdhr @opr @ramonjd @richtabor @rmorse @SantosGuillamot @SaxonF @scruffian @SiobhyB @t-hamano @Takshil-Kunadia @tellthemachines @tyxla @wayheming @westonruter @youknowriad
+
+= 15.9.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Fonts API
+
+-   [Fonts API] Make local font asset file URL absolute. ([51178](https://github.com/WordPress/gutenberg/pull/51178))
+
+#### Block Library
+
+-   Social Icons: Add color classes so icon colors correctly reflect changes in Global Styles. ([51020](https://github.com/WordPress/gutenberg/pull/51020))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@hellofromtonya @ndiego
+
+= 15.9.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   Add block variations transformation in block switcher. ([50139](https://github.com/WordPress/gutenberg/pull/50139))
+-   Code block: Add wide align support. ([50710](https://github.com/WordPress/gutenberg/pull/50710))
+-   Post Title edit: Adjust the logic, so it avoids unnecessary OPTIONS requests. ([49839](https://github.com/WordPress/gutenberg/pull/49839))
+-   Pattern block: Add experimental flag and syncStatus attrib to allow testing of partial syncing. ([50533](https://github.com/WordPress/gutenberg/pull/50533))
+-   Pattern block: Add slug as classname to pattern block wrapper. ([50641](https://github.com/WordPress/gutenberg/pull/50641))
+-   Removes the Post Content block from the inserter in the post editor. ([50620](https://github.com/WordPress/gutenberg/pull/50620))
+-   Navigation: Handle empty menus in Navigation Browse Mode. ([50870](https://github.com/WordPress/gutenberg/pull/50870))
+-   Navigation: browse mode list all Navigation Menus. ([50840](https://github.com/WordPress/gutenberg/pull/50840))
+-   Navigation: remove all edit functionality in Browse Mode. ([50788](https://github.com/WordPress/gutenberg/pull/50788))
+-   Navigation: Use the ListView in the Navigation block inspector controls. ([49417](https://github.com/WordPress/gutenberg/pull/49417))
+-   Navigation: Respect showAppender when there are no items in list view. ([50711](https://github.com/WordPress/gutenberg/pull/50711))
+
+#### Command Tool
+
+-   Command tool available without the experimental flag. ([50781](https://github.com/WordPress/gutenberg/pull/50781))
+-   Add contextual commands. ([50543](https://github.com/WordPress/gutenberg/pull/50543))
+-   Marks the commands APIs as public. ([50691](https://github.com/WordPress/gutenberg/pull/50691))
+-   Update the document title in the site editor to open the command tool. ([50369](https://github.com/WordPress/gutenberg/pull/50369))
+
+#### Components
+
+-   Add an outline when the color picker select box is focused. ([50609](https://github.com/WordPress/gutenberg/pull/50609))
+-   Button: Update disabled state to be without background. ([50496](https://github.com/WordPress/gutenberg/pull/50496))
+-   Update tooltip colors. ([50792](https://github.com/WordPress/gutenberg/pull/50792))
+
+#### Site Editor
+
+-   Editor canvas container: Include resizeable iframe in component. ([50682](https://github.com/WordPress/gutenberg/pull/50682))
+-   Snackbar: Make sure only one template deleted displays at once. ([50625](https://github.com/WordPress/gutenberg/pull/50625))
+-   Snackbar: Simplify the template revert. ([50626](https://github.com/WordPress/gutenberg/pull/50626))
+    (https://github.com/WordPress/gutenberg/pull/50369))
+-   Update the add template menu. ([50595](https://github.com/WordPress/gutenberg/pull/50595))
+-   Browse Mode: Add snackbar notices. ([50794](https://github.com/WordPress/gutenberg/pull/50794))
+-   Site Editor navigation: Add corresponding area icon to template part menu items. ([50791](https://github.com/WordPress/gutenberg/pull/50791))
+-   Update frame resizing. ([49910](https://github.com/WordPress/gutenberg/pull/49910))
+-   Always show the `Styles` navigation item. ([50573](https://github.com/WordPress/gutenberg/pull/50573))
+-   Sort template parts by type in navigation screen. ([50841](https://github.com/WordPress/gutenberg/pull/50841))
+-   Site editor: Update custom post types with \_edit_link. ([50563](https://github.com/WordPress/gutenberg/pull/50563))
+
+#### Interactivity API
+
+-   Image: Add lightbox using directives. ([50373](https://github.com/WordPress/gutenberg/pull/50373))
+-   File: Add experimental integration with Interactivity API. ([50377](https://github.com/WordPress/gutenberg/pull/50377))
+-   Support negation operator in selectors. ([50732](https://github.com/WordPress/gutenberg/pull/50732))
+
+#### Block Editor
+
+-   Add `lang` and `dir` attributes to text-formatting tools. ([49985](https://github.com/WordPress/gutenberg/pull/49985))
+-   Use `bdo` element when defining the language of some text. ([50632](https://github.com/WordPress/gutenberg/pull/50632))
+-   Block inserter: Improve alignment of block inserter search and close icons. ([50439](https://github.com/WordPress/gutenberg/pull/50439))
+-   Show visual cue when dragging over empty group block. ([50826](https://github.com/WordPress/gutenberg/pull/50826))
+-   Add ability to prevent editing blocks using useBlockEditingMode(). ([50643](https://github.com/WordPress/gutenberg/pull/50643))
+-   Remove `unwrap` from transforms and add `ungroup` to more blocks. ([50385](https://github.com/WordPress/gutenberg/pull/50385))
+-   Add new API to allow inserter items to be prioritised. ([50510](https://github.com/WordPress/gutenberg/pull/50510))
+-   Integrate `prioritizedInserterBlocks` API to slash inserter. ([50658](https://github.com/WordPress/gutenberg/pull/50658))
+
+#### Global Styles
+
+-   Custom CSS: Force display of in custom css input boxes to LTR. ([50768](https://github.com/WordPress/gutenberg/pull/50768))
+-   Styles Navigation Screen: Add Style Book. ([50566](https://github.com/WordPress/gutenberg/pull/50566))
+
+#### Data Layer
+
+-   Data: Improve `hasResolvingSelectors` redux metadata selector. ([50865](https://github.com/WordPress/gutenberg/pull/50865))
+
+#### List View
+
+-   Remove fade in/out animation for block settings menu icon button. ([50823](https://github.com/WordPress/gutenberg/pull/50823))
+
+#### Full Site Editing
+
+-   Template editing: Improve revert notices. ([50302](https://github.com/WordPress/gutenberg/pull/50302))
+-   Template pattern modal: Remove internal modal classnames. ([50655](https://github.com/WordPress/gutenberg/pull/50655))
+-   Library: Rename template parts to library. ([50769](https://github.com/WordPress/gutenberg/pull/50769))
+
+#### Accessibility
+
+-   Modals: Update the Cancel action's button design. ([50544](https://github.com/WordPress/gutenberg/pull/50544))
+-   Writing flow: Improve keyboard navigation on certain input types. ([43667](https://github.com/WordPress/gutenberg/pull/43667))
+
+#### Icons
+
+-   Add new `HeadingLevel` icons. ([50856](https://github.com/WordPress/gutenberg/pull/50856))
+-   Smaller external link icon. ([50728](https://github.com/WordPress/gutenberg/pull/50728))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Ensure multiple pattern blocks with the same slug each create unique blocks. ([50629](https://github.com/WordPress/gutenberg/pull/50629))
+-   Fix inconsistent Link UI in Nav block list view editor. ([50774](https://github.com/WordPress/gutenberg/pull/50774))
+-   Pattern block: Update frontend render code to match the new version of syncStatus attrib. ([50646](https://github.com/WordPress/gutenberg/pull/50646))
+-   Revert "Browse Mode: Add snackbar notices (#50794)". ([50937](https://github.com/WordPress/gutenberg/pull/50937))
+-   Update `rel` and `title` labels for navigation and submenu links. ([50214](https://github.com/WordPress/gutenberg/pull/50214))
+-   Social Link: Remove block on `DELETE` if empty URL. ([50903](https://github.com/WordPress/gutenberg/pull/50903))
+-   Social Link: Add color classes so icon colors correctly reflect changes in Global Styles. ([51020](https://github.com/WordPress/gutenberg/pull/51020))
+-   Navigation: Duplicate LeafMoreMenu into the navigation block and the global sidebar navigation. ([50489](https://github.com/WordPress/gutenberg/pull/50489))
+-   Post Comments From: Prevent hidden input fields from being focusable in Safari. ([50834](https://github.com/WordPress/gutenberg/pull/50834))
+-   Image: Improve the image block lightbox translations, labelling, and escaping. ([50962](https://github.com/WordPress/gutenberg/pull/50962))
+
+#### Accessibility
+
+-   Fix Multiple Tooltips from Focus Toolbar Shortcut on Site Editor. ([50349](https://github.com/WordPress/gutenberg/pull/50349))
+-   Fix accessibility issues navigation block experiment. ([50786](https://github.com/WordPress/gutenberg/pull/50786))
+-   Fix accessibility of the Classic block modal dialog. ([50384](https://github.com/WordPress/gutenberg/pull/50384))
+-   Fix labelling, description, and focus style of the block transform to pattern previews. ([50577](https://github.com/WordPress/gutenberg/pull/50577))
+-   ToggleGroupControl: Fix focus and selected style to support Windows High Contrast mode. ([50785](https://github.com/WordPress/gutenberg/pull/50785))
+
+#### Global Styles
+
+-   Add back the global styles logic that forces the solid border when color or width applied. ([50498](https://github.com/WordPress/gutenberg/pull/50498))
+-   Dimensions Panel: Fix resetting of axial spacing controls. ([50654](https://github.com/WordPress/gutenberg/pull/50654))
+-   Global Styles: Enable deep linking to the selected block only in the `Blocks` screen. ([50708](https://github.com/WordPress/gutenberg/pull/50708))
+-   Global styles revisions: Highlight currently-loaded revision. ([50725](https://github.com/WordPress/gutenberg/pull/50725))
+-   Better error message when theme.json styles use a duotone preset not in settings. ([50714](https://github.com/WordPress/gutenberg/pull/50714))
+-   Fix custom duotone filters in frontend. ([50678](https://github.com/WordPress/gutenberg/pull/50678))
+
+#### Command Tool
+
+-   Command tool: Fix contextual commands selectors. ([50829](https://github.com/WordPress/gutenberg/pull/50829))
+-   Command tool: Add searchLabel property to commands. ([50663](https://github.com/WordPress/gutenberg/pull/50663))
+
+#### Components
+
+-   Add transparent outline to input control BackdropUI focus style. ([50772](https://github.com/WordPress/gutenberg/pull/50772))
+-   Update border and focus style of the Input selector in ColorPicker Component. ([50703](https://github.com/WordPress/gutenberg/pull/50703))
+
+#### Site Editor
+
+-   Fix custom template creation regression. ([50797](https://github.com/WordPress/gutenberg/pull/50797))
+-   Remove the loader from sidebar navigation screen. ([50326](https://github.com/WordPress/gutenberg/pull/50326))
+-   Update site editor sidebar alignment. ([50561](https://github.com/WordPress/gutenberg/pull/50561))
+-   Fix `useEditedEntityRecord()` loading state. ([50730](https://github.com/WordPress/gutenberg/pull/50730))
+-   Fix width of Template Parts view. ([50836](https://github.com/WordPress/gutenberg/pull/50836))
+-   Process template part shortcodes before blocks. ([50801](https://github.com/WordPress/gutenberg/pull/50801))
+-   Convert device type margin styles into non-shorthand syntax. ([50441](https://github.com/WordPress/gutenberg/pull/50441))
+-   Browse mode Navigation: Fix broken submenu items. ([50551](https://github.com/WordPress/gutenberg/pull/50551))
+
+#### Inspector Controls
+
+-   Template revisions: Require 2 revisions before showing the revisions UI. ([50762](https://github.com/WordPress/gutenberg/pull/50762))
+
+#### Block Editor
+
+-   List block: Fix merging nested list into paragraph. ([50634](https://github.com/WordPress/gutenberg/pull/50634))
+-   Add grab cursor style for Block mover drag handle button. ([50808](https://github.com/WordPress/gutenberg/pull/50808))
+-   Fix gutenberg_get_block_editor_settings overriding other hooks. ([50760](https://github.com/WordPress/gutenberg/pull/50760))
+-   Iframe: Use src instead of srcDoc. ([50875](https://github.com/WordPress/gutenberg/pull/50875))
+-   Don't use global 'select' in the Behaviors controls component. ([51028](https://github.com/WordPress/gutenberg/pull/51028))
+-   Lightbox UI appearing with interactivity experiment disabled. ([51025](https://github.com/WordPress/gutenberg/pull/51025))
+-   Move "No Behaviors" to be the first option in the list of behaviors. ([50979](https://github.com/WordPress/gutenberg/pull/50979))
+-   Revert "Browse Mode: Add snackbar notices. ([50937](https://github.com/WordPress/gutenberg/pull/50937))
+
+#### Rich Text
+
+-   File block: Fix editing of empty file name. ([50607](https://github.com/WordPress/gutenberg/pull/50607))
+
+#### List View
+
+-   Ensure settings menu is visible when focused. ([50572](https://github.com/WordPress/gutenberg/pull/50572))
+
+#### Layout
+
+-   Navigation: Fix warning when stretch justification is used. ([50568](https://github.com/WordPress/gutenberg/pull/50568))
+
+#### Tests
+
+-   Fix release performance tests. ([50699](https://github.com/WordPress/gutenberg/pull/50699))
+
+#### Patterns
+
+-   Library: Revert description change until new grid view lands. ([51039](https://github.com/WordPress/gutenberg/pull/51039))
+
+### Performance
+
+#### Block Library
+
+-   Nav block: Improve loading UX by preloading Navigation menu requests. ([48683](https://github.com/WordPress/gutenberg/pull/48683))
+-   Inner blocks: Reduce tree depth to improve performance. ([50447](https://github.com/WordPress/gutenberg/pull/50447))
+
+#### Site Editor
+
+-   Edit Site: Optimize loading `useSelect` call. ([50546](https://github.com/WordPress/gutenberg/pull/50546))
+
+### Experiments
+
+#### Components
+
+-   Add new experimental version of DropdownMenu. ([49473](https://github.com/WordPress/gutenberg/pull/49473))
+-   Behaviors UI. ([49972](https://github.com/WordPress/gutenberg/pull/49972))
+
+### Documentation
+
+-   Add link for more details about block variations' example. ([50909](https://github.com/WordPress/gutenberg/pull/50909))
+-   Components: Back-add changelog for TypeScript types. ([50881](https://github.com/WordPress/gutenberg/pull/50881))
+-   Add parent and experimental status to the core block reference. ([48269](https://github.com/WordPress/gutenberg/pull/48269))
+-   Fix syntax highlighting of curating the editor experience guide. ([50902](https://github.com/WordPress/gutenberg/pull/50902))
+-   Minor updates to theme.json schema pages. ([50742](https://github.com/WordPress/gutenberg/pull/50742))
+-   Update PHP docblock for `WP_Theme_JSON_Gutenberg::Get_property_value`. ([50527](https://github.com/WordPress/gutenberg/pull/50527))
+-   Mobile app: Fix change log typo. ([50737](https://github.com/WordPress/gutenberg/pull/50737))
+-   Icons: Update README.md to include a link to the documentation. ([50606](https://github.com/WordPress/gutenberg/pull/50606))
+
+### Code Quality
+
+#### Block Library
+
+-   Cover: Unlock private APIs outside of the component. ([50686](https://github.com/WordPress/gutenberg/pull/50686))
+-   Fix column block category. ([46048](https://github.com/WordPress/gutenberg/pull/46048))
+-   Freeform: Move modal styles to the correct file. ([50858](https://github.com/WordPress/gutenberg/pull/50858))
+-   Navigation: Remove the check for draft navigation menus from the UnsavedInnerBlocks component. ([49161](https://github.com/WordPress/gutenberg/pull/49161))
+-   Navigation: Unlock private APIs outside of the component. ([50509](https://github.com/WordPress/gutenberg/pull/50509))
+-   Remove OffCanvasEditor. ([50705](https://github.com/WordPress/gutenberg/pull/50705))
+-   Comments: Replace get_comments() with get_comments_number(). ([50798](https://github.com/WordPress/gutenberg/pull/50798))
+-   Lodash: Remove from Gallery block. ([50591](https://github.com/WordPress/gutenberg/pull/50591))
+-   Lodash: Remove from Image block. ([50592](https://github.com/WordPress/gutenberg/pull/50592))
+-   Lodash: Remove from Latest Posts block. ([50593](https://github.com/WordPress/gutenberg/pull/50593))
+-   Lodash: Remove from Media & Text block. ([50587](https://github.com/WordPress/gutenberg/pull/50587))
+-   Lodash: Remove from template part block. ([50586](https://github.com/WordPress/gutenberg/pull/50586))
+-   Lodash: Remove unnecessary mock from Buttons tests. ([50588](https://github.com/WordPress/gutenberg/pull/50588))
+
+#### Block Editor
+
+-   Block Editor: Remove unused 'useIsDimensionsSupportValid' method. ([50735](https://github.com/WordPress/gutenberg/pull/50735))
+-   Block styles: Remove unused prop from inserter preview component. ([50622](https://github.com/WordPress/gutenberg/pull/50622))
+
+#### Post Editor
+
+-   Edit Post: Unlock useShouldContextualToolbarShow outside of the component. ([50612](https://github.com/WordPress/gutenberg/pull/50612))
+-   FlatTermSelector: Fix the 'useSelect' missing dependency. ([50872](https://github.com/WordPress/gutenberg/pull/50872))
+
+#### Site Editor
+
+-   Use the keyboard shortcuts package for the title bar. ([50873](https://github.com/WordPress/gutenberg/pull/50873))
+-   Simplify variation selectors. ([50687](https://github.com/WordPress/gutenberg/pull/50687))
+-   Unlock private APIs outside of the component. ([50534](https://github.com/WordPress/gutenberg/pull/50534))
+-   Remove unused 'NavigateToLink' component. ([50908](https://github.com/WordPress/gutenberg/pull/50908))
+-   Move `gutenberg_get_remote_theme_patterns`. ([50597](https://github.com/WordPress/gutenberg/pull/50597))
+
+#### Interactivity API
+
+-   Polish experimental navigation block. ([50670](https://github.com/WordPress/gutenberg/pull/50670))
+
+#### Components
+
+-   DropdownMenu: Refactor to TypeScript. ([50187](https://github.com/WordPress/gutenberg/pull/50187))
+
+#### npm Packages
+
+-   chore: Update memize to v2. ([50172](https://github.com/WordPress/gutenberg/pull/50172))
+
+#### Global Styles
+
+-   Global styles revisions: Remove unused private var. ([50763](https://github.com/WordPress/gutenberg/pull/50763))
+-   Introduce `prepend_to_selector()` to avoid additional if checks and follow single responsibility principle. ([50266](https://github.com/WordPress/gutenberg/pull/50266))
+-   Move `gutenberg_get_global_styles` function. ([50596](https://github.com/WordPress/gutenberg/pull/50596))
+
+### Tools
+
+#### Testing
+
+-   Combine frontend navigation Page list block tests into one test to speed up end-to-end tests. ([50681](https://github.com/WordPress/gutenberg/pull/50681))
+-   Command tool: Enable end-to-end tests. ([50833](https://github.com/WordPress/gutenberg/pull/50833))
+-   Create pages before navigation tests requiring link control to find page results. ([50680](https://github.com/WordPress/gutenberg/pull/50680))
+-   Enable iframe-inline-styles end-to-end test. ([50548](https://github.com/WordPress/gutenberg/pull/50548))
+-   Fix coding-standards issues. ([50656](https://github.com/WordPress/gutenberg/pull/50656))
+-   Fix flaky media inserter drag-and-dropping end-to-end test. ([50740](https://github.com/WordPress/gutenberg/pull/50740))
+-   Fix flaky template revert end-to-end tests. ([50851](https://github.com/WordPress/gutenberg/pull/50851))
+-   In CI, verify that PHPunit is actually running. ([50442](https://github.com/WordPress/gutenberg/pull/50442))
+-   Migrate Cover Block tests to Playwright. ([45784](https://github.com/WordPress/gutenberg/pull/45784))
+-   Remove redundant calls to disable the Styles welcome guide. ([50871](https://github.com/WordPress/gutenberg/pull/50871))
+-   Remove unintentionally added test artifact. ([50795](https://github.com/WordPress/gutenberg/pull/50795))
+-   Revert "Enqueue the registered assets (#50185)". ([50537](https://github.com/WordPress/gutenberg/pull/50537))
+-   Mobile - end-to-end test - Update code to use the new navigateUp helper. ([50736](https://github.com/WordPress/gutenberg/pull/50736))
+-   Playwright Utils: Use 'set' to disable the Styles welcome guide. ([50852](https://github.com/WordPress/gutenberg/pull/50852))
+
+#### Build Tooling
+
+-   DateTime: Remove deprecated props (and fix static analysis action in trunk). ([50724](https://github.com/WordPress/gutenberg/pull/50724))
+-   Update `runtime` test field in WebPack configuration to support Windows. ([50727](https://github.com/WordPress/gutenberg/pull/50727))
+-   Removed `gutenberg` Directory Name Expectation. ([50894](https://github.com/WordPress/gutenberg/pull/50894))
+-   Reworked `run` Command Parsing. ([50559](https://github.com/WordPress/gutenberg/pull/50559))
+
+#### wp-env
+
+-   Add `t-hamano` as codeowner for `env` package. ([50817](https://github.com/WordPress/gutenberg/pull/50817))
+-   Check `.wp-env.json` For Unknown Options. ([50642](https://github.com/WordPress/gutenberg/pull/50642))
+-   Expanded `wp-env` Lifecycle Scripts. ([50570](https://github.com/WordPress/gutenberg/pull/50570))
+-   Fixed `wp-env start` On Windows. ([50895](https://github.com/WordPress/gutenberg/pull/50895))
+-   Add @ObliviousHarmony to wp-env codeowners. ([50530](https://github.com/WordPress/gutenberg/pull/50530))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @bacoords: Update README.md to include a link to the documentation. ([50606](https://github.com/WordPress/gutenberg/pull/50606))
+-   @falgunihdesai: Update border and focus style of the Input selector in ColorPicker Component. ([50703](https://github.com/WordPress/gutenberg/pull/50703))
+-   @kmanijak: Adjust the logic of Post Title edit, so it avoids unnecessary OPTIONS requests. ([49839](https://github.com/WordPress/gutenberg/pull/49839))
+-   @kutsu123: Add grab cursor style for Block mover drag handle button. ([50808](https://github.com/WordPress/gutenberg/pull/50808))
+-   @megane9988: Add an outline when the color picker select box is focused. ([50609](https://github.com/WordPress/gutenberg/pull/50609))
+-   @SaxonF: Update site editor sidebar alignment. ([50561](https://github.com/WordPress/gutenberg/pull/50561))
+-   @worldomonation: Migrate Cover Block tests to Playwright. ([45784](https://github.com/WordPress/gutenberg/pull/45784))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewserong @antpb @aristath @artemiomorales @bacoords @carolinan @chad1008 @ciampo @dcalhoun @derekblank @ellatrix @fabiankaegy @falgunihdesai @felixarntz @fluiddot @geriux @getdave @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @juanfra @kevin940726 @kmanijak @kutsu123 @MaggieCabrera @Mamaduka @mboynes @mburridge @megane9988 @michalczaplinski @mirka @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ramonjd @richtabor @samnajian @SantosGuillamot @SaxonF @scruffian @shimotmk @SiobhyB @t-hamano @talldan @tyxla @worldomonation @WunderBart @youknowriad
+
+= 15.8.1 =
+
+Error: There are no unreleased pull requests associated with the milestone.
+at fetchAllPullRequests (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:684:10)
+at processTicksAndRejections (internal/process/task_queues.js:95:5)
+at async createChangelog (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:994:24)
+at async getReleaseChangelog (/home/runner/work/gutenberg/gutenberg/bin/plugin/commands/changelog.js:1020:2)
+at async Command.<anonymous> (/home/runner/work/gutenberg/gutenberg/bin/plugin/cli.js:11:4)
+
+= 15.8.0 =
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+## Changelog
+
+### Features
+
+-   Add the command center to the post editor. ([50128](https://github.com/WordPress/gutenberg/pull/50128))
+-   Add revisions UI. ([50089](https://github.com/WordPress/gutenberg/pull/50089))
+-   Add Theme Previews for block themes. ([50030](https://github.com/WordPress/gutenberg/pull/50030))
+
+### Enhancements
+
+#### Global Styles
+
+-   Fluid typography: Use `layout.wideSize` as max viewport width. ([49815](https://github.com/WordPress/gutenberg/pull/49815))
+-   Global styles revisions: Remove human time diff and custom author fields from the API response. ([50234](https://github.com/WordPress/gutenberg/pull/50234))
+-   Unify the global block styles panel with the block inspector panels. ([49428](https://github.com/WordPress/gutenberg/pull/49428))
+
+#### Post Editor
+
+-   Add `<ViewLink>` component. ([50260](https://github.com/WordPress/gutenberg/pull/50260))
+-   Update background color of post editor when viewing mobile or tablet viewports, or in template mode. ([50361](https://github.com/WordPress/gutenberg/pull/50361))
+-   Display device icon on "preview" and "view" buttons. ([50218](https://github.com/WordPress/gutenberg/pull/50218))
+-   Improve "switch to draft" placement. ([50217](https://github.com/WordPress/gutenberg/pull/50217))
+-   Post Featured Image: New design for Replace and Remove buttons. ([50269](https://github.com/WordPress/gutenberg/pull/50269))
+
+#### Block Library
+
+-   More intuitive Details block with summary and innerBlocks content. ([49808](https://github.com/WordPress/gutenberg/pull/49808))
+-   Simplify cover block description. ([50355](https://github.com/WordPress/gutenberg/pull/50355))
+-   Cover: Only show overlay controls when color support enabled. ([50115](https://github.com/WordPress/gutenberg/pull/50115))
+-   Navigation: Hide color controls when color support is disabled. ([50368](https://github.com/WordPress/gutenberg/pull/50368))
+-   Post Featured Image: Hide overlay controls when color support is disabled. ([50331](https://github.com/WordPress/gutenberg/pull/50331))
+-   Social Icons: Hide color controls when color support is disabled. ([50275](https://github.com/WordPress/gutenberg/pull/50275))
+
+#### Fonts API
+
+-   Separate BC Layer. ([50077](https://github.com/WordPress/gutenberg/pull/50077))
+
+#### Site Editor
+
+-   Add the pages menu to the site editor. ([50463](https://github.com/WordPress/gutenberg/pull/50463))
+-   Introduce new PluginTemplateSettingPanel slot. ([50257](https://github.com/WordPress/gutenberg/pull/50257))
+-   Add chevrons to the templates and template parts in site editor. ([50076](https://github.com/WordPress/gutenberg/pull/50076))
+
+#### Components
+
+-   Button: Add opt-in prop for next 40px default size. ([50254](https://github.com/WordPress/gutenberg/pull/50254))
+-   Consolidate and add documentation to Storybook. ([50226](https://github.com/WordPress/gutenberg/pull/50226))
+-   DimensionControl: Use WordPress package instead of react in code example. ([50435](https://github.com/WordPress/gutenberg/pull/50435))
+-   FormTokenField, ComboboxControl: Add opt-in prop for next 40px default size. ([50261](https://github.com/WordPress/gutenberg/pull/50261))
+-   Global Styles: Fix palette color popovers. ([49975](https://github.com/WordPress/gutenberg/pull/49975))
+-   Relax link pattern matching in CHANGELOG CI check. ([50248](https://github.com/WordPress/gutenberg/pull/50248))
+-   Remove custom padding for tertiary buttons. ([50276](https://github.com/WordPress/gutenberg/pull/50276))
+-   Update `Autocomplete` usage example. ([49965](https://github.com/WordPress/gutenberg/pull/49965))
+-   Update default accent color. ([50193](https://github.com/WordPress/gutenberg/pull/50193))
+-   Update has-text has-icon button spacing. ([50277](https://github.com/WordPress/gutenberg/pull/50277))
+
+#### CSS & Styling
+
+-   Polish confirm dialog padding. ([50283](https://github.com/WordPress/gutenberg/pull/50283))
+
+#### Template Editor
+
+-   Remove `start blank` option in template pattern suggestions and add `skip` button. ([50099](https://github.com/WordPress/gutenberg/pull/50099))
+-   Templates: Sort by the rendered title instead of the slug. ([50353](https://github.com/WordPress/gutenberg/pull/50353))
+
+#### Block Editor
+
+-   List View: Allow dragging to all levels of the block hierarchy. ([49742](https://github.com/WordPress/gutenberg/pull/49742))
+-   Allow dragging-and-dropping images from the inserter to image blocks. ([49673](https://github.com/WordPress/gutenberg/pull/49673))
+-   Try always showing the dimensions controls. ([50305](https://github.com/WordPress/gutenberg/pull/50305))
+-   Adds a renderAdditionalBlockUI prop to ListView. ([50465](https://github.com/WordPress/gutenberg/pull/50465))
+-   Update the expanded text color so that it works in both a dark and light context. ([50434](https://github.com/WordPress/gutenberg/pull/50434))
+-   Enable Loginout block in Nav block. ([49160](https://github.com/WordPress/gutenberg/pull/49160))
+-   Mark related selector as resolved when sideloading Navigation fallback. ([50324](https://github.com/WordPress/gutenberg/pull/50324))
+-   Update Template Parts icon to use the symbol. ([50410](https://github.com/WordPress/gutenberg/pull/50410))
+-   Use Core Data for Nav fallbacks and side load resulting entity into state. ([50032](https://github.com/WordPress/gutenberg/pull/50032))
+-   Tweak copy for block settings menu "Insert..." to "Add...". ([50444](https://github.com/WordPress/gutenberg/pull/50444))
+-   Block settings menu: Rearrange items. ([50453](https://github.com/WordPress/gutenberg/pull/50453))
+
+#### Rest API
+
+-   Update image editor to use new REST API. ([28530](https://github.com/WordPress/gutenberg/pull/28530))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Center align button text in editor. ([50228](https://github.com/WordPress/gutenberg/pull/50228))
+-   Comment Template Block: Set `commentId` context via filter. ([50279](https://github.com/WordPress/gutenberg/pull/50279))
+-   Cover: Use overflow: clip, falling back to overflow: Hidden to allow sticky children (technically). ([50237](https://github.com/WordPress/gutenberg/pull/50237))
+-   Ensure imported Classic Menu dirty state to include in Editor entity changes list. ([50318](https://github.com/WordPress/gutenberg/pull/50318))
+-   File Block: Defer hiding PDF embeds for unsupported browsers until the page has loaded. ([50113](https://github.com/WordPress/gutenberg/pull/50113))
+-   Fix template part area variation matching. ([49500](https://github.com/WordPress/gutenberg/pull/49500))
+-   Fix the pocket casts embed variation. ([50132](https://github.com/WordPress/gutenberg/pull/50132))
+-   Gallery: Fix inner block selection. ([50363](https://github.com/WordPress/gutenberg/pull/50363))
+-   Post Terms: Use publicly_queryable to query taxonomies used to register variations. ([50244](https://github.com/WordPress/gutenberg/pull/50244))
+-   Remove extraneous "Link" copy from PanelBody components. ([50186](https://github.com/WordPress/gutenberg/pull/50186))
+-   Remove Quote transform from Group ([50424](https://github.com/WordPress/gutenberg/pull/50424))
+-   [Post Featured Image]: Revert maxWidth addition. ([50427](https://github.com/WordPress/gutenberg/pull/50427))
+-   [Post Title]: Insert default block on Enter at end. ([50312](https://github.com/WordPress/gutenberg/pull/50312))
+-   Ensure that view scripts are correctly registered for core blocks. ([50364](https://github.com/WordPress/gutenberg/pull/50364))
+
+#### Global Styles
+
+-   Close stylebook if the editor canvas container slot is not filled. ([50086](https://github.com/WordPress/gutenberg/pull/50086))
+-   Fix positioning of gradient palette popovers on mobile. ([50233](https://github.com/WordPress/gutenberg/pull/50233))
+-   Fix/wp get global styles for custom props returns internal variable. ([50366](https://github.com/WordPress/gutenberg/pull/50366))
+-   Revisions controller: Fix author and date fields. ([50117](https://github.com/WordPress/gutenberg/pull/50117))
+-   Fix hover/focus styles for `style variation` buttons. ([50056](https://github.com/WordPress/gutenberg/pull/50056))
+-   Use bundled files for enqueuing global styles. ([50310](https://github.com/WordPress/gutenberg/pull/50310))
+
+#### Block Editor
+
+-   Fix issue with margin collapsing when selecting blocks. ([50215](https://github.com/WordPress/gutenberg/pull/50215))
+-   List View / Block Draggable: Fix scroll to top issue when dragging the second last block in the list. ([50119](https://github.com/WordPress/gutenberg/pull/50119))
+-   Multi-select: Capitalise B in blocks. ([50356](https://github.com/WordPress/gutenberg/pull/50356))
+-   URLInput: Update the 'ENTER' key down event handler. ([50158](https://github.com/WordPress/gutenberg/pull/50158))
+-   Update OffCanvas component's more menu to get clientId from block rather than passed in as prop. ([50473](https://github.com/WordPress/gutenberg/pull/50473))
+-   Block Toolbar: Don't use effects for focus management. ([50497](https://github.com/WordPress/gutenberg/pull/50497))
+-   Don't remount the block when the 'templateLock' is set to 'contentOnly'. ([50292](https://github.com/WordPress/gutenberg/pull/50292))
+
+#### Themes
+
+-   Refactor theme previews. ([50338](https://github.com/WordPress/gutenberg/pull/50338))
+-   Remove gutenberg plugin mention in schema. ([50207](https://github.com/WordPress/gutenberg/pull/50207))
+-   Theme Preview: Restrict to admin users. ([50335](https://github.com/WordPress/gutenberg/pull/50335))
+-   Theme Previews: Fix refactor. ([50354](https://github.com/WordPress/gutenberg/pull/50354))
+
+#### Site Editor
+
+-   Display conditionally the `styles` in sidebar main navigation screen. ([50329](https://github.com/WordPress/gutenberg/pull/50329))
+-   Remove canvas box shadow. ([50374](https://github.com/WordPress/gutenberg/pull/50374))
+-   Save Button: Fix the label in the disabled state. ([50284](https://github.com/WordPress/gutenberg/pull/50284))
+-   Remove white background on Site Editor 'Frame'. ([48970](https://github.com/WordPress/gutenberg/pull/48970))
+-   Update some visual details in the add-template modal(s). ([50143](https://github.com/WordPress/gutenberg/pull/50143))
+
+#### Components
+
+-   Spacing: Fix reset of spacing sizes control. ([50455](https://github.com/WordPress/gutenberg/pull/50455))
+-   `NavigableContailer`: Do not trap focus in `TabbableContainer`. ([49846](https://github.com/WordPress/gutenberg/pull/49846))
+-   Remove fill="none" from levelUp icon. ([50264](https://github.com/WordPress/gutenberg/pull/50264))
+
+#### Accessibility
+
+-   Add missing tooltip to Site Editor navigation Back icon button. ([50104](https://github.com/WordPress/gutenberg/pull/50104))
+-   Fix Multiple Tooltips from Focus Toolbar Shortcut on Widget Editor. ([50344](https://github.com/WordPress/gutenberg/pull/50344))
+-   Site Editor Keyboard Navigation Flow. ([50296](https://github.com/WordPress/gutenberg/pull/50296))
+-   Small improvements for the sidebars and Close buttons labeling. ([49614](https://github.com/WordPress/gutenberg/pull/49614))
+
+#### Design Tools
+
+-   Changed so that borders and radius are maintained when Duotone is changed. ([50088](https://github.com/WordPress/gutenberg/pull/50088))
+-   LineHeightControl: Fix application of zero values in editor. ([48917](https://github.com/WordPress/gutenberg/pull/48917))
+
+#### Fonts API
+
+-   [Font API] Do not print in admin using 'admin_print_styles' for themes with theme.json. ([50259](https://github.com/WordPress/gutenberg/pull/50259))
+
+#### Widget Editor
+
+-   Fixes fixed block toolbar in widgets editor. ([50371](https://github.com/WordPress/gutenberg/pull/50371))
+
+### Performance
+
+-   Improve Site Editor loading experience([50222](https://github.com/WordPress/gutenberg/pull/50222))
+
+### Experiments
+
+#### Interactivity API
+
+-   Add Interactivity API runtime. ([49994](https://github.com/WordPress/gutenberg/pull/49994))
+-   Navigation block with the Interactivity API. ([50041](https://github.com/WordPress/gutenberg/pull/50041))
+-   Fix building plugin zip to include interactive blocks. ([50598](https://github.com/WordPress/gutenberg/pull/50598))
+
+#### Command Center
+
+-   Update the experiment label. ([50467](https://github.com/WordPress/gutenberg/pull/50467))
+-   Add an API to open/close the command center. ([50423](https://github.com/WordPress/gutenberg/pull/50423))
+-   Fix a style glitch on Safari. ([50138](https://github.com/WordPress/gutenberg/pull/50138))
+-   Add a button to open it from the site editor view mode. ([50425](https://github.com/WordPress/gutenberg/pull/50425))
+-   Do not show dynamic add new post, add new page commands. ([50221](https://github.com/WordPress/gutenberg/pull/50221))
+-   Extract the WordPress reusable commands to a dedicated package. ([49956](https://github.com/WordPress/gutenberg/pull/49956))
+-   Fix command menu not re-opening after closing it. ([50213](https://github.com/WordPress/gutenberg/pull/50213))
+
+### Documentation
+
+-   Add changelog for eslint-plugin validating dependencies in `useSelect` and `useSuspenseSelect` hooks. ([50247](https://github.com/WordPress/gutenberg/pull/50247))
+-   Add client-side filter reference to Curating the Editor doc and fix links. ([50203](https://github.com/WordPress/gutenberg/pull/50203))
+-   Add missing closing parenthesis in code example. ([50253](https://github.com/WordPress/gutenberg/pull/50253))
+-   Adds example to change the permalink structure. ([50251](https://github.com/WordPress/gutenberg/pull/50251))
+-   Adds links to REST-API reference. ([50070](https://github.com/WordPress/gutenberg/pull/50070))
+-   Create-block script includes link to documentation in render.php file. ([50206](https://github.com/WordPress/gutenberg/pull/50206))
+-   Block API > Registration: Switch markdown to a-tags. ([50110](https://github.com/WordPress/gutenberg/pull/50110))
+-   Don't use markdown in the callout section. ([50437](https://github.com/WordPress/gutenberg/pull/50437))
+-   Remove mention of perf testing from release documentation. ([50345](https://github.com/WordPress/gutenberg/pull/50345))
+-   Update Callout documentation on links. ([50131](https://github.com/WordPress/gutenberg/pull/50131))
+-   Fix incorrect label in contributor docs. ([50201](https://github.com/WordPress/gutenberg/pull/50201))
+-   Fix minor formatting issues in Performance doc. ([50202](https://github.com/WordPress/gutenberg/pull/50202))
+-   Fixes incorrect URLs in doc blocks. ([50123](https://github.com/WordPress/gutenberg/pull/50123))
+-   Use alert callout in the block deprecation documentation. ([50286](https://github.com/WordPress/gutenberg/pull/50286))
+-   Improve CardMedia documentation. ([50074](https://github.com/WordPress/gutenberg/pull/50074))
+-   Update README of TreeGrid with data-expanded attribute usage. ([50026](https://github.com/WordPress/gutenberg/pull/50026))
+
+### Code Quality
+
+-   Block Editor: Directly import useShouldContextualToolbarShow hook. ([50506](https://github.com/WordPress/gutenberg/pull/50506))
+-   BlockControls, InspectorControls: Remove useSlot, unify behavior on bad group. ([50198](https://github.com/WordPress/gutenberg/pull/50198))
+-   Enqueue registered block assets and resolve iframe styles end-to-end failure. ([50185](https://github.com/WordPress/gutenberg/pull/50185))
+-   Make eslint-plugin validate dependencies in `useSelect` and `useSuspenseSelect` hooks. ([49900](https://github.com/WordPress/gutenberg/pull/49900))
+-   Save Hub: Reuse the save button component to save code. ([50145](https://github.com/WordPress/gutenberg/pull/50145))
+-   Use apiFetch instead of window.fetch. ([50043](https://github.com/WordPress/gutenberg/pull/50043))
+-   Add types to dispatch and select. ([49930](https://github.com/WordPress/gutenberg/pull/49930))
+-   Remove duplicate comment. ([50304](https://github.com/WordPress/gutenberg/pull/50304))
+
+#### Lodash removal
+
+-   Remove from blocks store reducer. ([50471](https://github.com/WordPress/gutenberg/pull/50471))
+-   Remove `_.mapValues()` from `getBlockContentSchemaFromTransforms`. ([50096](https://github.com/WordPress/gutenberg/pull/50096))
+-   Refactor away from `_.mapValues()`. ([50285](https://github.com/WordPress/gutenberg/pull/50285))
+-   Remove `_.mapValues()` from blocks reducer. ([50097](https://github.com/WordPress/gutenberg/pull/50097))
+
+#### Components
+
+-   Fix incorrect focus style widths. ([50127](https://github.com/WordPress/gutenberg/pull/50127))
+-   Refactor/toolbar item component to typescript. ([49190](https://github.com/WordPress/gutenberg/pull/49190))
+-   SlotFill: Several code cleanups. ([50098](https://github.com/WordPress/gutenberg/pull/50098))
+-   SlotFill: Some code cleanups of the bubblesVirtually version. ([50133](https://github.com/WordPress/gutenberg/pull/50133))
+-   Convert `NavigableContainer` to TypeScript. ([49377](https://github.com/WordPress/gutenberg/pull/49377))
+
+#### Block Editor
+
+-   Block Editor: Add names for the 'editor.BlockListBlock' filter HoCs. ([50513](https://github.com/WordPress/gutenberg/pull/50513))
+-   Refactor around missing dependency in Link Control internal value sync effect. ([49509](https://github.com/WordPress/gutenberg/pull/49509))
+-   Don't export Slot/Fill constants separately. ([50274](https://github.com/WordPress/gutenberg/pull/50274))
+
+#### Block Library
+
+-   Centralize constants for the navigation block. ([50191](https://github.com/WordPress/gutenberg/pull/50191))
+-   Move deprecated Nav block functions to bottom of render file. ([50328](https://github.com/WordPress/gutenberg/pull/50328))
+-   Refactor BlockList uses Hooks. ([50293](https://github.com/WordPress/gutenberg/pull/50293))
+
+#### List View
+
+-   Replace OffCanvasEditor in browse mode with the List View component. ([50287](https://github.com/WordPress/gutenberg/pull/50287))
+-   Use block select button class for retaining colors when expanded or hovered. ([50155](https://github.com/WordPress/gutenberg/pull/50155))
+
+#### Global Styles
+
+-   Global styles revisions: Ensure the revisions endpoint permissions match the global styles controller. ([50270](https://github.com/WordPress/gutenberg/pull/50270))
+-   Simplify CustomCSS UI. ([49721](https://github.com/WordPress/gutenberg/pull/49721))
+
+#### Plugin
+
+-   Update REST API Controller PHPUnit tests. ([50120](https://github.com/WordPress/gutenberg/pull/50120))
+-   Update the Gutenberg plugin to require at least the WP 6.1 version. ([50079](https://github.com/WordPress/gutenberg/pull/50079))
+-   Update the tested up to version for the gutenberg plugin. ([50360](https://github.com/WordPress/gutenberg/pull/50360))
+
+#### Native
+
+-   Add a few import required for the React Native wrapper distribution as iOS XCFramework. ([50009](https://github.com/WordPress/gutenberg/pull/50009))
+
+#### Site Editor
+
+-   Extract the Router APIs and context into a dedicated package. ([50100](https://github.com/WordPress/gutenberg/pull/50100))
+-   Move loading logic to a separate hook. ([50511](https://github.com/WordPress/gutenberg/pull/50511))
+
+### Tools
+
+#### wp-env
+
+-   Add `wp-env` After Setup Command. ([50196](https://github.com/WordPress/gutenberg/pull/50196))
+-   Fix wp-env destroy. ([50445](https://github.com/WordPress/gutenberg/pull/50445))
+-   Refactored `wp-env` configuration Parsing. ([50071](https://github.com/WordPress/gutenberg/pull/50071))
+-   Wp-env fix exec command in CI. ([50411](https://github.com/WordPress/gutenberg/pull/50411))
+-   wp-env: Add better default PHPunit settings, fix Xdebug, and update documentation. ([50490](https://github.com/WordPress/gutenberg/pull/50490))
+-   wp-env: Improve run command execution speed. ([50007](https://github.com/WordPress/gutenberg/pull/50007))
+-   Cleaned up Port Validation and Removed Unnecessary Default Ports. ([50300](https://github.com/WordPress/gutenberg/pull/50300))
+-   Match Container's User and Group to Host. ([49962](https://github.com/WordPress/gutenberg/pull/49962))
+
+#### Testing
+
+-   Add end-to-end test for editing the title of a new custom template part. ([50195](https://github.com/WordPress/gutenberg/pull/50195))
+-   Add test to verify image appears on frontend. ([50472](https://github.com/WordPress/gutenberg/pull/50472))
+-   Add tests coverage for the navigation block frontend interactivity. ([50462](https://github.com/WordPress/gutenberg/pull/50462))
+-   Migrate Adding Patterns Test to Playwright. ([50083](https://github.com/WordPress/gutenberg/pull/50083))
+-   Migrate Keep Transform Block Test Case to Playwright. ([49719](https://github.com/WordPress/gutenberg/pull/49719))
+-   Migrate PullQuote test case to playwright. ([50085](https://github.com/WordPress/gutenberg/pull/50085))
+-   Migrate undo to Playwright. ([48701](https://github.com/WordPress/gutenberg/pull/48701))
+-   Prerelease end-to-end Test Utils for Playwright. ([43998](https://github.com/WordPress/gutenberg/pull/43998))
+-   Skip creating flaky issues on PRs. ([50146](https://github.com/WordPress/gutenberg/pull/50146))
+-   end-to-end tests: Try to fix flaky global styles revisions tests. ([50454](https://github.com/WordPress/gutenberg/pull/50454))
+-   Add BlockList text coverage. ([50252](https://github.com/WordPress/gutenberg/pull/50252))
+
+#### Build Tooling
+
+-   Changelog automation: Apply proper top-level categorization precedence to meta PRs. ([50208](https://github.com/WordPress/gutenberg/pull/50208))
+-   Do not include first-time contributors section in changelog if there are not any. ([50291](https://github.com/WordPress/gutenberg/pull/50291))
+-   Publish rich text build types. ([49651](https://github.com/WordPress/gutenberg/pull/49651))
+-   Rich text: Rename index.js > index.ts for type-only exports. ([50212](https://github.com/WordPress/gutenberg/pull/50212))
+-   Remove PHPUnit and Composer packages. ([50408](https://github.com/WordPress/gutenberg/pull/50408))
+
+#### Repository Maintainance
+
+-   Add ndiego as codeowner for docs. ([50289](https://github.com/WordPress/gutenberg/pull/50289))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @johnhooks: feature(data): Add types to dispatch and select. ([49930](https://github.com/WordPress/gutenberg/pull/49930))
+-   @margolisj: Refactor/toolbar item component to typescript. ([49190](https://github.com/WordPress/gutenberg/pull/49190))
+-   @n2erjo00: Create-block script includes link to documentation in render.php file. ([50206](https://github.com/WordPress/gutenberg/pull/50206))
+-   @samnajian: Fix/wp get global styles for custom props returns internal variable. ([50366](https://github.com/WordPress/gutenberg/pull/50366))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @alexstine @andrewserong @apeatling @artemiomorales @aurooba @bph @chad1008 @ciampo @DAreRodz @dcalhoun @draganescu @ecgan @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hellofromtonya @ironprogrammer @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @jsnajdr @juanfra @kevin940726 @kienstra @Mamaduka @margolisj @mburridge @mirka @mokagio @mtias @n2erjo00 @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ocean90 @ockham @pavanpatil1 @pooja-muchandikar @priethor @ramonjd @richtabor @samnajian @SantosGuillamot @scruffian @SiobhyB @t-hamano @talldan @tellthemachines @torounit @tyxla @westonruter @youknowriad
+
+= 15.7.1 =
+
+## Changelog
+
+### Enhancements
+
+#### Fonts API
+
+-   Relocate which fonts to print into wp_print_fonts(). ([50151](https://github.com/WordPress/gutenberg/pull/50151))
+
+### Tools
+
+#### Testing
+
+-   Skip iframe-inline-styles end-to-end test. ([50320](https://github.com/WordPress/gutenberg/pull/50320))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@hellofromtonya @scruffian
+
+= 15.7.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   Group: Add allowedBlocks attribute and pass it to innerBlockProps. ([49128](https://github.com/WordPress/gutenberg/pull/49128))
+-   Media & Text: Add allowedBlocks attribute and pass it to innerBlock. ([49981](https://github.com/WordPress/gutenberg/pull/49981))
+-   Site Logo: Add logo replace flow in Inspector controls. ([49992](https://github.com/WordPress/gutenberg/pull/49992))
+
+#### Global Styles
+
+-   Fluid typography: Use logarithmic scale factor to calculate a min font size. ([49707](https://github.com/WordPress/gutenberg/pull/49707))
+-   Style book: Make the style book slot generic. ([49973](https://github.com/WordPress/gutenberg/pull/49973))
+-   Base Styles: Add the editor input reset with increased specificity. ([49831](https://github.com/WordPress/gutenberg/pull/49831))
+
+#### Components
+
+-   Draggable: Allow elementId based elements to be attached to the ownerDocument body. ([49911](https://github.com/WordPress/gutenberg/pull/49911))
+-   Spinner: Enforce no background. ([49695](https://github.com/WordPress/gutenberg/pull/49695))
+-   Updates the behavior of the top toolbar fixed setting. ([49634](https://github.com/WordPress/gutenberg/pull/49634))
+
+#### Design Tools
+
+-   Image: Display custom borders on placeholder. ([49569](https://github.com/WordPress/gutenberg/pull/49569))
+-   Patterns: Try a masonry layout on the template pattern suggestion modal. ([49958](https://github.com/WordPress/gutenberg/pull/49958))
+
+#### Duotone
+
+-   Duotone: Add block controls on the inspector. ([49838](https://github.com/WordPress/gutenberg/pull/49838))
+-   Duotone: Fix setup state for image block. ([49949](https://github.com/WordPress/gutenberg/pull/49949))
+-   Polish duotone rendering code. ([49706](https://github.com/WordPress/gutenberg/pull/49706))
+-   Deprecate remaining global duotone functions. ([49702](https://github.com/WordPress/gutenberg/pull/49702))
+-   Group duotone outputs and refactor rendering. ([49705](https://github.com/WordPress/gutenberg/pull/49705))
+
+### Accessibility
+
+-   List view: Refactor ARIA attributes. ([48461](https://github.com/WordPress/gutenberg/pull/48461))
+-   Block Mover: Make text labels for left/right move buttons legible. ([49747](https://github.com/WordPress/gutenberg/pull/49747))
+-   Block Toolbar: Fix incorrect switcher button width in text mode. ([49847](https://github.com/WordPress/gutenberg/pull/49847))
+-   Snackbar: Fix insufficient color contrast on hover. ([49682](https://github.com/WordPress/gutenberg/pull/49682))
+-   Update Reakit dep to 1.3.11. ([49763](https://github.com/WordPress/gutenberg/pull/49763))
+-   List View: Add aria-description. ([49907](https://github.com/WordPress/gutenberg/pull/49907))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Cover block: Remove overflow hidden rule. ([49913](https://github.com/WordPress/gutenberg/pull/49913))
+-   Fix BlockInfo slot displaying logic. ([50054](https://github.com/WordPress/gutenberg/pull/50054))
+-   Fix block toolbar height and rounded corners of parent selector button when text label mode. ([49556](https://github.com/WordPress/gutenberg/pull/49556))
+-   Demo content cover block alignment not respected. ([49848](https://github.com/WordPress/gutenberg/pull/49848))
+-   Group block: Remove innerprops from placeholder wrapper. ([49783](https://github.com/WordPress/gutenberg/pull/49783))
+-   Only display the modified post date if the post has been modified. ([46839](https://github.com/WordPress/gutenberg/pull/46839))
+-   Post Excerpt: Fix crash at runtime when postType is undefined. ([49899](https://github.com/WordPress/gutenberg/pull/49899))
+-   Post Featured Image: Fix some sizing issues. ([49641](https://github.com/WordPress/gutenberg/pull/49641))
+-   Adjust copy of Site Logo Block. ([49540](https://github.com/WordPress/gutenberg/pull/49540))
+-   Adapt flex child controls for Spacer. ([49362](https://github.com/WordPress/gutenberg/pull/49362))
+-   Social Icon: Update the `link` and `mail` block variation's icons. ([49952](https://github.com/WordPress/gutenberg/pull/49952))
+-   Cover: Re-instate overflow:Hidden rule to fix issue with border radius. ([50209](https://github.com/WordPress/gutenberg/pull/50209))
+-   Fix site logo preview image size with long filenames. ([50242](https://github.com/WordPress/gutenberg/pull/50242))
+
+#### Components
+
+-   CheckboxControl: Add support custom IDs. ([49977](https://github.com/WordPress/gutenberg/pull/49977))
+-   Equalize modal internal padding. ([49890](https://github.com/WordPress/gutenberg/pull/49890))
+-   Increase modal radius. ([49870](https://github.com/WordPress/gutenberg/pull/49870))
+-   Query: Fix add new post link position via private SlotFill. ([49819](https://github.com/WordPress/gutenberg/pull/49819))
+-   Tweak `WordPressComponent` type. ([49960](https://github.com/WordPress/gutenberg/pull/49960))
+-   Update the framer motion dependency to the latest version. ([49822](https://github.com/WordPress/gutenberg/pull/49822))
+-   Improve output of CHANGELOG CI check. ([49779](https://github.com/WordPress/gutenberg/pull/49779))
+-   Retain context when opening modals on small screens. ([50039](https://github.com/WordPress/gutenberg/pull/50039))
+-   Update CHANGELOG CI check to support forked repos. ([49906](https://github.com/WordPress/gutenberg/pull/49906))
+
+#### Global Styles
+
+-   Borders: Fix border style on color/width clearing and global styles fallback logic. ([49738](https://github.com/WordPress/gutenberg/pull/49738))
+-   Borders: Maintain radius in Global Styles. ([49950](https://github.com/WordPress/gutenberg/pull/49950))
+-   Close stylebook if the global styles side bar is not open. ([50081](https://github.com/WordPress/gutenberg/pull/50081))
+-   Do not add unregistered style variations to the theme.json schema. ([49807](https://github.com/WordPress/gutenberg/pull/49807))
+-   Update preset styles to use Selectors API. ([49427](https://github.com/WordPress/gutenberg/pull/49427))
+-   Change the 'WP_Theme_JSON_Data_Gutenberg' class directory. ([50062](https://github.com/WordPress/gutenberg/pull/50062))
+-   Layout: Fix issue where saving user global styles included layout definitions in layout settings. ([50268](https://github.com/WordPress/gutenberg/pull/50268))
+
+#### Site Editor
+
+-   Fix screen flash when deleting templates in templates list. ([48449](https://github.com/WordPress/gutenberg/pull/48449))
+-   Fix the condition for the modal to choose the initial template pattern. ([49954](https://github.com/WordPress/gutenberg/pull/49954))
+-   Fix editor crash caused by missing type conversion in EditorStyles component. ([49882](https://github.com/WordPress/gutenberg/pull/49882))
+-   Remove frame shadow in edit view. ([49767](https://github.com/WordPress/gutenberg/pull/49767))
+-   Add `home` to list of new templates. ([47389](https://github.com/WordPress/gutenberg/pull/47389))
+-   Animate the site icon element between view and edit in the site editor. ([48886](https://github.com/WordPress/gutenberg/pull/48886))
+-   Restore click event handler on site icon button. ([50094](https://github.com/WordPress/gutenberg/pull/50094))
+-   Correctly return 'isResolving' from 'useAlternativeTemplateParts' hook. ([49921](https://github.com/WordPress/gutenberg/pull/49921))
+
+#### Patterns
+
+-   Increase the dimensions of the pattern modal that appears when creating a new page. ([49859](https://github.com/WordPress/gutenberg/pull/49859))
+-   Update full screen modal dimensions, and pattern grids. ([49894](https://github.com/WordPress/gutenberg/pull/49894))
+-   Increase pattern modal dimensions when creating a new template. ([49722](https://github.com/WordPress/gutenberg/pull/49722))
+
+#### List View
+
+-   Add parameters to custom-scrollbars-on-hover. ([49892](https://github.com/WordPress/gutenberg/pull/49892))
+-   Update with scrolling and custom scrollbar. ([49793](https://github.com/WordPress/gutenberg/pull/49793))
+-   Ensure list view block id is unique to the list view instance. ([49944](https://github.com/WordPress/gutenberg/pull/49944))
+
+#### Block Editor
+
+-   Fix quick inserter going off-screen in some situations. ([49881](https://github.com/WordPress/gutenberg/pull/49881))
+-   List View: Update drop indicator width to be aware of scroll containers. ([49786](https://github.com/WordPress/gutenberg/pull/49786))
+-   Block highlight: Fix radius issue. ([49864](https://github.com/WordPress/gutenberg/pull/49864))
+-   DOM: Update getScrollContainer to be aware of horizontal scroll. ([49787](https://github.com/WordPress/gutenberg/pull/49787))
+-   Fix fixed block toolbar positioning. ([49990](https://github.com/WordPress/gutenberg/pull/49990))
+-   iframe: Add `enqueue_block_assets`. ([49655](https://github.com/WordPress/gutenberg/pull/49655))
+-   Rename immutableSet to setImmutably. ([50040](https://github.com/WordPress/gutenberg/pull/50040))
+-   Edit Post: Hide overflowing content in visual editor wrapper to prevent block popovers from creating scrollbars. ([49978](https://github.com/WordPress/gutenberg/pull/49978))
+
+#### REST API
+
+-   Replace fallbacks to fallback (singular) in Nav fallback REST endpoint. ([50044](https://github.com/WordPress/gutenberg/pull/50044))
+-   Consolidate Navigation fallbacks logic between Editor and Front of Site via REST API. ([48698](https://github.com/WordPress/gutenberg/pull/48698))
+-   Add /revisions endpoint for global styles. ([49974](https://github.com/WordPress/gutenberg/pull/49974))
+
+#### Build Tooling
+
+-   Fix multiple tooltips showing on NavigableToolbars. ([49644](https://github.com/WordPress/gutenberg/pull/49644))
+-   Add `--env-cwd` Option To `wp-env run`. ([49908](https://github.com/WordPress/gutenberg/pull/49908)) - Add Port To `WP_TESTS_DOMAIN`. ([49883](https://github.com/WordPress/gutenberg/pull/49883))
+-   Add support in `check-license` for conjunctive (AND) licenses. ([46801](https://github.com/WordPress/gutenberg/pull/46801))
+
+### Performance
+
+Continued the work refactor away from Lodash usages to reduce the build size
+[49799](https://github.com/WordPress/gutenberg/pull/49799), [49794](https://github.com/WordPress/gutenberg/pull/49794), [49755](https://github.com/WordPress/gutenberg/pull/49755)
+
+### Experiments
+
+-   Allow adding posts and pages with custom titles from the command menu. ([49893](https://github.com/WordPress/gutenberg/pull/49893))
+-   Update the design of the command center. ([49681](https://github.com/WordPress/gutenberg/pull/49681))
+
+### Documentation
+
+-   Adds closing code tags. ([49991](https://github.com/WordPress/gutenberg/pull/49991))
+-   Add "block-selectors" documentation to TOC and manifest. ([49471](https://github.com/WordPress/gutenberg/pull/49471))
+-   Adds note about custom fields to Plugin Sidebar page in documentation. ([49622](https://github.com/WordPress/gutenberg/pull/49622))
+-   Autocomplete: Add heading and fix type for `onReplace` in README. ([49798](https://github.com/WordPress/gutenberg/pull/49798))
+-   Document the separation between private APIs and experimental APIs. ([47973](https://github.com/WordPress/gutenberg/pull/47973))
+-   Fix broken link and update title of Localizing Gutenberg doc. ([49851](https://github.com/WordPress/gutenberg/pull/49851))
+-   Fixes broken img link. ([49805](https://github.com/WordPress/gutenberg/pull/49805))
+-   Need to use WordPress package for useState. ([49478](https://github.com/WordPress/gutenberg/pull/49478))
+-   Remove unused screenshot from documentation folder. ([49896](https://github.com/WordPress/gutenberg/pull/49896))
+-   Small grammar fixes for block-context.md. ([49701](https://github.com/WordPress/gutenberg/pull/49701))
+-   Update IS_GUTENBERG_PLUGIN to process.env.IS_GUTENBERG_PLUGIN in coding guidelines. ([49825](https://github.com/WordPress/gutenberg/pull/49825))
+-   Fixes typo in README. ([49957](https://github.com/WordPress/gutenberg/pull/49957))
+-   Update README.md. ([49762](https://github.com/WordPress/gutenberg/pull/49762))
+-   Update README.md. ([49855](https://github.com/WordPress/gutenberg/pull/49855))
+-   Update outreach.md. ([49961](https://github.com/WordPress/gutenberg/pull/49961))
+-   Update wp-env prereq documentation. ([50004](https://github.com/WordPress/gutenberg/pull/50004))
+-   Formatting inside alert div. ([50090](https://github.com/WordPress/gutenberg/pull/50090))
+
+#### Theme.json
+
+-   Add documentation for `variations` key in `theme.json`. ([49826](https://github.com/WordPress/gutenberg/pull/49826))
+-   Update theme.json reference documentation to include more sections. ([48250](https://github.com/WordPress/gutenberg/pull/48250))
+
+#### Gutenberg Plugin release
+
+-   Update the Gutenberg release issue template to reflect the new Gutenberg release team. ([50037](https://github.com/WordPress/gutenberg/pull/50037))
+-   Update Gutenberg release documentation to include the new Gutenberg Release Team. ([50036](https://github.com/WordPress/gutenberg/pull/50036))
+-   Fix broken link and minor tweaks to formatting and verbiage in the Gutenberg Release Process doc. ([49876](https://github.com/WordPress/gutenberg/pull/49876))
+-   Update release checklist. ([50068](https://github.com/WordPress/gutenberg/pull/50068))
+
+#### Block Development
+
+-   Improve the learning experience for writing blocks. ([49792](https://github.com/WordPress/gutenberg/pull/49792))
+-   Re-write of the landing page. ([49643](https://github.com/WordPress/gutenberg/pull/49643))
+-   Improve insertBlock(s) documentation. ([50078](https://github.com/WordPress/gutenberg/pull/50078))
+-   Small Typo: Remove dots. ([49853](https://github.com/WordPress/gutenberg/pull/49853))
+
+### Code Quality
+
+-   Fix PrivateInserter import. ([50038](https://github.com/WordPress/gutenberg/pull/50038))
+-   Remove the normalizeFalsyValue util. ([50033](https://github.com/WordPress/gutenberg/pull/50033))
+-   Don't programmatically lowercase post type label. ([49591](https://github.com/WordPress/gutenberg/pull/49591))
+-   Port colord to PHP. ([49700](https://github.com/WordPress/gutenberg/pull/49700))
+-   Reuse cleanEmptyObject utility and fix empty string case. ([49750](https://github.com/WordPress/gutenberg/pull/49750))
+-   toStyles: Don't mutate the tree argument. ([49806](https://github.com/WordPress/gutenberg/pull/49806))
+-   useInstanceId: Fix useMemo hook dependencies. ([49979](https://github.com/WordPress/gutenberg/pull/49979))
+
+### Tools
+
+#### Testing
+
+-   Components: Update `ColorPicker` unit tests. ([49698](https://github.com/WordPress/gutenberg/pull/49698))
+-   Migrate CPT end-to-end tests to Playwright. ([50031](https://github.com/WordPress/gutenberg/pull/50031))
+-   Fonts API: Add tests for gutenberg_add_registered_fonts_to_theme_json(). ([50049](https://github.com/WordPress/gutenberg/pull/50049))
+-   Expand multi-line block tests. ([49732](https://github.com/WordPress/gutenberg/pull/49732))
+-   Rich text test helpers mimic user events. ([49804](https://github.com/WordPress/gutenberg/pull/49804))
+-   Fix editor canvas detaching error in end-to-end tests. ([49374](https://github.com/WordPress/gutenberg/pull/49374))
+
+#### Build Tooling
+
+-   Add script which checks published types for non-checked JS packages. ([49736](https://github.com/WordPress/gutenberg/pull/49736))
+-   Docgen: Fix issue where function token can't be found. ([49812](https://github.com/WordPress/gutenberg/pull/49812))
+-   Publish build types for notices. ([49650](https://github.com/WordPress/gutenberg/pull/49650))
+-   Publish types for plugins package. ([49649](https://github.com/WordPress/gutenberg/pull/49649))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @annziel: Fix screen flash when deleting templates in templates list. ([48449](https://github.com/WordPress/gutenberg/pull/48449))
+-   @courtneyr-dev: Update outreach.md. ([49961](https://github.com/WordPress/gutenberg/pull/49961))
+-   @m0hanraj: Fixes typo in README. ([49957](https://github.com/WordPress/gutenberg/pull/49957))
+-   @MahendraBishnoi29: Snackbar: Fix insufficient color contrast on hover. ([49682](https://github.com/WordPress/gutenberg/pull/49682))
+-   @masteradhoc: Adjust copy of Site Logo Block. ([49540](https://github.com/WordPress/gutenberg/pull/49540))
+-   @sque89: Group: Add allowedBlocks attribute and pass it to innerBlockProps. ([49128](https://github.com/WordPress/gutenberg/pull/49128))
+-   @tyrann0us: Don't programmatically lowercase post type label. ([49591](https://github.com/WordPress/gutenberg/pull/49591))
+-   @Wtower: Update README.md. ([49855](https://github.com/WordPress/gutenberg/pull/49855))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @ajlende @alexstine @andrewserong @annziel @aurooba @bdurette @bph @carolinan @chad1008 @chintu51 @courtneyr-dev @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @gaambo @geriux @getdave @gigitux @guarani @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanmaguitar @kevin940726 @m0hanraj @MaggieCabrera @MahendraBishnoi29 @Mamaduka @masteradhoc @mburridge @mcsf @mikachan @mirka @mokagio @mtias @ndiego @noahtallen @ntsekouras @oandregal @ObliviousHarmony @priethor @ramonjd @scruffian @SiobhyB @Soean @sque89 @t-hamano @talldan @tellthemachines @tyrann0us @tyxla @Wtower @youknowriad @zzap
+
+= 15.6.2 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Post Template: Fix broken title editing. ([49984](https://github.com/WordPress/gutenberg/pull/49984))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@jsnajdr
+
+= 15.6.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### CSS & Styling
+
+-   Cover: Reduce z-index for inner blocks container. ([49943](https://github.com/WordPress/gutenberg/pull/49943))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw
+
+= 15.6.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   A margin option is added to the Embedded preview block. ([39384](https://github.com/WordPress/gutenberg/pull/39384))
+-   Add blockGap as a default control on Columns/Column blocks. ([49526](https://github.com/WordPress/gutenberg/pull/49526))
+-   Add color tools to the Time to Read block. ([49496](https://github.com/WordPress/gutenberg/pull/49496))
+-   Add spacing presets to the Spacer block. ([44002](https://github.com/WordPress/gutenberg/pull/44002))
+-   Cover: Add border support using ResizableBox via BlockPopover. ([41153](https://github.com/WordPress/gutenberg/pull/41153))
+
+#### Block Editor
+
+-   Add support for hiding breadcrumbs in the Site Editor. ([49518](https://github.com/WordPress/gutenberg/pull/49518))
+-   Hide page list on single page list menus. ([48725](https://github.com/WordPress/gutenberg/pull/48725))
+-   Small improvements for the Document Overview labeling. ([49555](https://github.com/WordPress/gutenberg/pull/49555))
+-   Add a rootClientId prop. ([49475](https://github.com/WordPress/gutenberg/pull/49475))
+
+#### Global Styles
+
+-   Add styles section to the browse mode sidebar. ([49014](https://github.com/WordPress/gutenberg/pull/49014))
+-   Show child layout controls by default. ([49389](https://github.com/WordPress/gutenberg/pull/49389))
+
+#### Components
+
+-   Global Styles: Link to the block type panel when selecting a block with Styles open. ([49350](https://github.com/WordPress/gutenberg/pull/49350))
+-   TreeSelect: Remove margin overrides and add new opt-in prop. ([47515](https://github.com/WordPress/gutenberg/pull/47515))
+-   Update media and video icons. ([49523](https://github.com/WordPress/gutenberg/pull/49523))
+
+### Accessibility
+
+-   Add missing focus style to start template options previews. ([49334](https://github.com/WordPress/gutenberg/pull/49334))
+-   Consistent labels for the WP logo and back links. ([49659](https://github.com/WordPress/gutenberg/pull/49659))
+
+### Experiments
+
+-   Add a command center to the site editor. ([49330](https://github.com/WordPress/gutenberg/pull/49330))
+-   Add Details/summary block. ([45055](https://github.com/WordPress/gutenberg/pull/45055))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Columns: Prevent removal of locked columns from the column count change UI. ([49530](https://github.com/WordPress/gutenberg/pull/49530))
+-   Cover: Fixed background causes image to be zoomed in on Safari browser on iPad. ([48981](https://github.com/WordPress/gutenberg/pull/48981))
+-   Cover: Fix integration tests for ResizableBox via BlockPopover. ([49497](https://github.com/WordPress/gutenberg/pull/49497))
+-   Cover: Merge block and global styles. ([49434](https://github.com/WordPress/gutenberg/pull/49434))
+-   Fix exhaustive deps warning. ([49291](https://github.com/WordPress/gutenberg/pull/49291))
+-   Fix fallback not rendering. ([49576](https://github.com/WordPress/gutenberg/pull/49576))
+-   Image block: Fix image size control percentage selection. ([49628](https://github.com/WordPress/gutenberg/pull/49628))
+-   Post Featured Image: Don't display the scale control when the aspect ratio is original. ([48894](https://github.com/WordPress/gutenberg/pull/48894))
+-   Post Excerpt: Ensure the postId from the block context is used to `get_the_excerpt`. ([49495](https://github.com/WordPress/gutenberg/pull/49495))
+-   Shortcode: Prevent external styling of editing UI. ([49723](https://github.com/WordPress/gutenberg/pull/49723))
+-   Time To Read: Fix untranslated on the front end. ([49704](https://github.com/WordPress/gutenberg/pull/49704))
+-   Post Featured Image: Show all controls when in context without `postId`. ([49609](https://github.com/WordPress/gutenberg/pull/49609))
+-   Avoid empty Gallery block error. ([49557](https://github.com/WordPress/gutenberg/pull/49557))
+
+#### Site Editor
+
+-   Decode the site title properly. ([49685](https://github.com/WordPress/gutenberg/pull/49685))
+-   Show UI to update custom links on the sidebar navigation. ([48939](https://github.com/WordPress/gutenberg/pull/48939))
+-   Navigate to `editor` when clicking `Edit` in a template part. ([49604](https://github.com/WordPress/gutenberg/pull/49604))
+-   Update the template title in the details panel. ([49487](https://github.com/WordPress/gutenberg/pull/49487))
+-   Use the keyboard shortcuts package for the command center. ([49680](https://github.com/WordPress/gutenberg/pull/49680))
+-   Fix the site editor loading in multi-site installs. ([49861](https://github.com/WordPress/gutenberg/pull/49861))
+
+#### Global Styles
+
+-   Block Level Settings: Remove WP filters in Gutenberg. ([49598](https://github.com/WordPress/gutenberg/pull/49598))
+-   Border Panel: Move global styles forcing of split borders to relevant panel's onChange. ([49603](https://github.com/WordPress/gutenberg/pull/49603))
+-   Remove the pointer cursor on the style variation preview. ([49573](https://github.com/WordPress/gutenberg/pull/49573))
+-   Style Variation Picker: Restore pointer cursor when withHover is in use. ([49596](https://github.com/WordPress/gutenberg/pull/49596))
+
+#### Block Editor
+
+-   DropZone: Smooth animation. ([49517](https://github.com/WordPress/gutenberg/pull/49517))
+-   List View: Allow dragging underneath collapsed non-empty container blocks. ([49390](https://github.com/WordPress/gutenberg/pull/49390))
+-   List View: Update drop indicator line to be 4px high with a white border. ([49462](https://github.com/WordPress/gutenberg/pull/49462))
+-   Tweak remove block label to make it simpler. ([49529](https://github.com/WordPress/gutenberg/pull/49529))
+-   Fix redirected links to user documents. ([49537](https://github.com/WordPress/gutenberg/pull/49537))
+-   Make InspectorControls tab labels translatable. ([49665](https://github.com/WordPress/gutenberg/pull/49665))
+-   Update redirected support link. ([49533](https://github.com/WordPress/gutenberg/pull/49533))
+-   Reusable Block: RTL styles don't get added to the `wp-reusable-blocks` stylesheet. ([49632](https://github.com/WordPress/gutenberg/pull/49632))
+-   Fix padding and margin visualizer accuracy. ([49422](https://github.com/WordPress/gutenberg/pull/49422))
+
+#### Layout
+
+-   Only show alignment info when parent layout is constrained. ([49703](https://github.com/WordPress/gutenberg/pull/49703))
+-   Try reducing the specificity of layout margin rules. ([47858](https://github.com/WordPress/gutenberg/pull/47858))
+
+#### Post Editor
+
+-   Allow root padding setting to affect padding of post title. ([49460](https://github.com/WordPress/gutenberg/pull/49460))
+-   Try fixing post editor layout for wide/full Post Content blocks. ([49565](https://github.com/WordPress/gutenberg/pull/49565))
+-   Allow horizontal scroll in panels in the post editor. ([49611](https://github.com/WordPress/gutenberg/pull/49611))
+
+#### Components
+
+-   Fix inbetween-inserter position in RTL languages. ([49683](https://github.com/WordPress/gutenberg/pull/49683))
+-   Update Edit icon to be more consistent with other icons. ([49512](https://github.com/WordPress/gutenberg/pull/49512))
+-   Update search icon to be optically more balanced. ([49425](https://github.com/WordPress/gutenberg/pull/49425))
+-   Update some icons to address aliasing on high-res screens. ([49381](https://github.com/WordPress/gutenberg/pull/49381))
+
+### Performance
+
+-   Continued the work refactor away from Lodash usages to reduce the build size
+    ([49725](https://github.com/WordPress/gutenberg/pull/49725), [49724](https://github.com/WordPress/gutenberg/pull/49724), [49638](https://github.com/WordPress/gutenberg/pull/49638), [49654](https://github.com/WordPress/gutenberg/pull/49654), [49639](https://github.com/WordPress/gutenberg/pull/49639), [49637](https://github.com/WordPress/gutenberg/pull/49637), [49727](https://github.com/WordPress/gutenberg/pull/49727))
+
+### Documentation
+
+-   Add section about integration testing to testing documentation. ([49454](https://github.com/WordPress/gutenberg/pull/49454))
+-   Add some documentation about the Styles UI components. ([49720](https://github.com/WordPress/gutenberg/pull/49720))
+-   Fix Create a Block Tutorial link on blocks package README.md. ([49562](https://github.com/WordPress/gutenberg/pull/49562))
+-   Fix end-to-end command typos. ([49669](https://github.com/WordPress/gutenberg/pull/49669))
+-   Fix line break issue in Schemas and Content Models section. ([44768](https://github.com/WordPress/gutenberg/pull/44768))
+-   Fixes some typos. ([49472](https://github.com/WordPress/gutenberg/pull/49472))
+-   Update outdated references in react-native-editor documentation. ([49543](https://github.com/WordPress/gutenberg/pull/49543))
+-   `getBlockOrder()` - use core/block-editor instead of core/editor. ([49474](https://github.com/WordPress/gutenberg/pull/49474))
+-   Fix Xcode spelling across the codebase. ([49625](https://github.com/WordPress/gutenberg/pull/49625))
+-   Remove the documentation for Playwright configuration override. ([49660](https://github.com/WordPress/gutenberg/pull/49660))
+-   Streamlining the New Release Issue Template. ([49618](https://github.com/WordPress/gutenberg/pull/49618))
+-   Update components package's CHANGELOG. ([49586](https://github.com/WordPress/gutenberg/pull/49586))
+-   Update documentation for `setGroupingBlockName`. ([49670](https://github.com/WordPress/gutenberg/pull/49670))
+
+### Code Quality
+
+#### Components
+
+-   Ship TypeScript types. ([49229](https://github.com/WordPress/gutenberg/pull/49229))
+-   Simplify `CustomGradientPicker`'s utility props. ([49588](https://github.com/WordPress/gutenberg/pull/49588))
+
+#### Global Styles
+
+-   Refactor the effects panel as a generic UI Styles component. ([49571](https://github.com/WordPress/gutenberg/pull/49571))
+-   Refactor the filters (duotone) panel as a generic UI Styles component. ([49577](https://github.com/WordPress/gutenberg/pull/49577))
+
+#### Block Library
+
+-   Add automated tests for Nav block editable list view. ([49433](https://github.com/WordPress/gutenberg/pull/49433))
+-   Cover: Avoid adding empty background image URL. ([49477](https://github.com/WordPress/gutenberg/pull/49477))
+-   Remove editor block styles leftovers. ([49567](https://github.com/WordPress/gutenberg/pull/49567))
+
+#### Site Editor
+
+-   Remove unused keyboard shortcut registration code. ([49553](https://github.com/WordPress/gutenberg/pull/49553))
+-   Fix Site Editor isFeatureActive deprecation. ([49545](https://github.com/WordPress/gutenberg/pull/49545))
+
+### Tools
+
+#### Testing
+
+-   Add tests for some of the drag and drop logic. ([49631](https://github.com/WordPress/gutenberg/pull/49631))
+-   Adds to gitignore a playwright.config.override.ts entry. ([49329](https://github.com/WordPress/gutenberg/pull/49329))
+-   Cover block: Fix failing test. ([49455](https://github.com/WordPress/gutenberg/pull/49455))
+-   Workflows: Run PHP unit tests also against current WP - 1. ([46983](https://github.com/WordPress/gutenberg/pull/46983))
+-   e2e: Fix flaky columns test. ([49676](https://github.com/WordPress/gutenberg/pull/49676))
+-   test: Add Writing Flow tests. ([49352](https://github.com/WordPress/gutenberg/pull/49352))
+
+#### Build Tooling
+
+-   Add workflow to check for expected @wordpress/components CHANGELOG updates. ([49443](https://github.com/WordPress/gutenberg/pull/49443))
+-   Docgen: Replace line breaks with spaces and remove line-ending hyphens. ([49635](https://github.com/WordPress/gutenberg/pull/49635))
+-   Convert wp data controls to typescript. ([49647](https://github.com/WordPress/gutenberg/pull/49647))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @cawa-93: List View: Allow horizontal scroll in panels in the post editor. ([49611](https://github.com/WordPress/gutenberg/pull/49611))
+-   @DustyReagan: Cover Block: Fixed background causes image to be zoomed in on Safari browser on iPad. ([48981](https://github.com/WordPress/gutenberg/pull/48981))
+-   @eduwass: Docs: Fix end-to-end command typos. ([49669](https://github.com/WordPress/gutenberg/pull/49669))
+-   @HILAYTRIVEDI: A margin option is added to the Embeded preview block. ([39384](https://github.com/WordPress/gutenberg/pull/39384))
+-   @mokagio: Fix Xcode spelling across the codebase. ([49625](https://github.com/WordPress/gutenberg/pull/49625))
+-   @nefeline: Post excerpt > Ensure the postId from the block context is used to get_the_excerpt. ([49495](https://github.com/WordPress/gutenberg/pull/49495))
+-   @thealexandrelara: Docs: Fix Create a Block Tutorial link on blocks package README.md. ([49562](https://github.com/WordPress/gutenberg/pull/49562))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewserong @aristath @aurooba @brookewp @carolinan @cawa-93 @chad1008 @ciampo @dcalhoun @derekblank @draganescu @DustyReagan @eduwass @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @HILAYTRIVEDI @imanish003 @jameskoster @jasmussen @jhnstn @jorgefilipecosta @Mamaduka @mirka @mokagio @nefeline @noahtallen @ntsekouras @ockham @ramonjd @richtabor @ryanwelcher @SavPhill @scruffian @Soean @t-hamano @talldan @tellthemachines @thealexandrelara @tyxla @youknowriad
+
+= 15.5.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Site Editor
+
+-   Global styles: Fix error when updating padding input in global styles ([49465](https://github.com/WordPress/gutenberg/pull/49465))
+
+= 15.5.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   Add Post Date block variation for Post Modified Date. ([49111](https://github.com/WordPress/gutenberg/pull/49111))
+-   Add typography support to time to read block. ([49257](https://github.com/WordPress/gutenberg/pull/49257))
+-   Allow the time to read block to be inserted multiple times. ([49253](https://github.com/WordPress/gutenberg/pull/49253))
+-   Image Block: Don't render if there is no URL set. ([45220](https://github.com/WordPress/gutenberg/pull/45220))
+-   Media & Text: Switch default alignment to `none`. ([48404](https://github.com/WordPress/gutenberg/pull/48404))
+-   Update alternative text labels and help text. ([49416](https://github.com/WordPress/gutenberg/pull/49416))
+-   Navigation Submenu: Refactor to use the block supports function. ([48936](https://github.com/WordPress/gutenberg/pull/48936))
+-   Replace "Image size" with "Resolution" in image size controls. ([49112](https://github.com/WordPress/gutenberg/pull/49112))
+-   Update Gallery block to use consistent 40px components. ([49101](https://github.com/WordPress/gutenberg/pull/49101))
+
+#### Components
+
+-   FormTokenField: Add prop to remove bottom margin. ([48609](https://github.com/WordPress/gutenberg/pull/48609))
+-   ImageSizeControl: Remove the "Image Dimensions" label. ([49414](https://github.com/WordPress/gutenberg/pull/49414))
+-   ImageSizeControl: Use large 40px sizes. ([49113](https://github.com/WordPress/gutenberg/pull/49113))
+-   Tooltip: Refine existing tests. ([48397](https://github.com/WordPress/gutenberg/pull/48397))
+-   Update tests from `fireEvent` to `userEvent`. ([44952](https://github.com/WordPress/gutenberg/pull/44952))
+-   CustomGradientPicker: Improve initial state UI. ([49146](https://github.com/WordPress/gutenberg/pull/49146))
+-   Storybook: Declare stylesheet dependencies explicitly. ([49099](https://github.com/WordPress/gutenberg/pull/49099))
+-   `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout. ([49046](https://github.com/WordPress/gutenberg/pull/49046))
+
+#### Design Tools
+
+-   Add spacing tools to time to read block. ([49392](https://github.com/WordPress/gutenberg/pull/49392))
+-   Position Panel: Open by default if a position type is set. ([49151](https://github.com/WordPress/gutenberg/pull/49151))
+-   Revert: Make sticky block action on template part block. ([49219](https://github.com/WordPress/gutenberg/pull/49219))
+-   Sticky Position: Add a "Make sticky" action to the Template Part block. ([49085](https://github.com/WordPress/gutenberg/pull/49085))
+
+#### Testing
+
+-   Adds focus management test for entity undo. ([49236](https://github.com/WordPress/gutenberg/pull/49236))
+-   Adds navigation submenu tests. ([49351](https://github.com/WordPress/gutenberg/pull/49351))
+-   Cover block: Add integration tests. ([45409](https://github.com/WordPress/gutenberg/pull/45409))
+-   test: Expand mobile end-to-end test helpers. ([48978](https://github.com/WordPress/gutenberg/pull/48978))
+
+#### Layout
+
+-   Make grid layout Group variation an experiment. ([49359](https://github.com/WordPress/gutenberg/pull/49359))
+-   Try adding a grid layout type. ([49018](https://github.com/WordPress/gutenberg/pull/49018))
+
+#### Icons
+
+-   Add unseen icon to library. ([49254](https://github.com/WordPress/gutenberg/pull/49254))
+
+#### Plugins API
+
+-   Plugins: Refactor the 'PluginArea' component to use the sync store. ([49220](https://github.com/WordPress/gutenberg/pull/49220))
+
+#### Global Styles
+
+-   Add: Story for the full global styles UI. ([49031](https://github.com/WordPress/gutenberg/pull/49031))
+-   Caption element UI controls for color and typography. ([49141](https://github.com/WordPress/gutenberg/pull/49141))
+
+#### Block Editor
+
+-   Rich text: Only consider a format active if active at every selected index. ([48789](https://github.com/WordPress/gutenberg/pull/48789))
+-   Update border color on color panel items. ([42283](https://github.com/WordPress/gutenberg/pull/42283))
+-   i18n: Add context to labels related to CSS position properties. ([49135](https://github.com/WordPress/gutenberg/pull/49135))
+
+#### Site Editor
+
+-   Add: Patterns to the template start modal. ([47322](https://github.com/WordPress/gutenberg/pull/47322))
+
+#### List View
+
+-   Allow the component to show a custom "more" menu. ([48097](https://github.com/WordPress/gutenberg/pull/48097))
+
+#### Block API
+
+-   Block.json: Refactor and stabilize selectors API. ([46496](https://github.com/WordPress/gutenberg/pull/46496))
+
+### Bug Fixes
+
+#### Block Editor
+
+-   BlockHTML: Use correct type when setting 'html' state onBlur. ([49191](https://github.com/WordPress/gutenberg/pull/49191))
+-   Duotone: Pass filters to the Post Editor. ([49239](https://github.com/WordPress/gutenberg/pull/49239))
+-   Duotone: Use `WP_Theme_JSON_Resolver_Gutenberg` instead of `WP_Theme_JSON_Resolver`. ([49199](https://github.com/WordPress/gutenberg/pull/49199))
+-   Fix typo (overriden -> overridden). ([48711](https://github.com/WordPress/gutenberg/pull/48711))
+-   Writing flow: Prevent default browser behaviour on input when editable. ([49370](https://github.com/WordPress/gutenberg/pull/49370))
+-   Fix `onHover` error on patterns tab in mobile. ([49450](https://github.com/WordPress/gutenberg/pull/49450))
+
+#### General Interface
+
+-   Invalid Page address displayed when a future page is first scheduled. ([49092](https://github.com/WordPress/gutenberg/pull/49092))
+
+#### Patterns
+
+-   Block patterns: Use `WP_Theme_JSON_Resolver_Gutenberg` instead of `WP_Theme_JSON_Resolver`. ([49197](https://github.com/WordPress/gutenberg/pull/49197))
+
+#### Block Library
+
+-   Buttons: Disable edit as HTML support. ([49097](https://github.com/WordPress/gutenberg/pull/49097))
+-   Fix center alignment on the dropdown in the categories block. ([44013](https://github.com/WordPress/gutenberg/pull/44013))
+-   Fix sprintf() arguments. ([49439](https://github.com/WordPress/gutenberg/pull/49439))
+-   Fix: Navigation block width constricted on large viewports. ([49302](https://github.com/WordPress/gutenberg/pull/49302))
+-   Group Block: Allow blocks to be dragged onto it in its placeholder state. ([49361](https://github.com/WordPress/gutenberg/pull/49361))
+-   Group: Fix the 'double div' deprecation 'templateLock ' attribute. ([49250](https://github.com/WordPress/gutenberg/pull/49250))
+-   Group: Fix the 'templateLock' attribute type in deprecations. ([49205](https://github.com/WordPress/gutenberg/pull/49205))
+-   Navigation: Fix bug in calculating the active menu item. ([49195](https://github.com/WordPress/gutenberg/pull/49195))
+-   Post excerpt: Fix JavaScript error and other misc. bug fixes. ([48730](https://github.com/WordPress/gutenberg/pull/48730))
+-   Query Loop: Constraint list item(`li`) styles to the direct children of the main list. ([49303](https://github.com/WordPress/gutenberg/pull/49303))
+-   Query Loop: Show Featured Image placeholders in all posts. ([49301](https://github.com/WordPress/gutenberg/pull/49301))
+-   Query Title: Changes filters for removing archive title prefixes. ([49306](https://github.com/WordPress/gutenberg/pull/49306))
+-   Quote: Disable edit as HTML support. ([49426](https://github.com/WordPress/gutenberg/pull/49426))
+-   Revert "Make sure the directly inserted block in the Nav block is a Page link". ([49126](https://github.com/WordPress/gutenberg/pull/49126))
+-   Search block: Fix overflow width. ([49192](https://github.com/WordPress/gutenberg/pull/49192))
+-   Changes image size description, as it causes confusion. ([48478](https://github.com/WordPress/gutenberg/pull/48478))
+-   Post Excerpt Block: Fix unexpected commas in certain site languages. ([49123](https://github.com/WordPress/gutenberg/pull/49123))
+-   columns block: Add support for templateLock attribute. ([49132](https://github.com/WordPress/gutenberg/pull/49132))
+
+#### Components
+
+-   CircularOptionPicker: Force swatches to visually render on top of the rest of the component's content. ([49245](https://github.com/WordPress/gutenberg/pull/49245))
+-   Fix TabPanel initial rendering. ([49368](https://github.com/WordPress/gutenberg/pull/49368))
+-   Fix misaligned textarea input control. ([49116](https://github.com/WordPress/gutenberg/pull/49116))
+-   LineHeightControl: Make spin buttons adjust from placeholder value. ([49150](https://github.com/WordPress/gutenberg/pull/49150))
+-   ToolsPanel: Make menu item order consistent for SlotFill use cases. ([49222](https://github.com/WordPress/gutenberg/pull/49222))
+
+#### Layout
+
+-   Fix unstableDisableLayoutClassNames in Group block. ([49385](https://github.com/WordPress/gutenberg/pull/49385))
+-   Get orientation for Spacer block from parent layout. ([49322](https://github.com/WordPress/gutenberg/pull/49322))
+-   Remove inner wrapper for grid Groups in classic themes. ([49387](https://github.com/WordPress/gutenberg/pull/49387))
+
+#### Post Editor
+
+-   Fix breaking distraction free. ([49317](https://github.com/WordPress/gutenberg/pull/49317))
+-   Post Lock: Fix the avatar position. ([49421](https://github.com/WordPress/gutenberg/pull/49421))
+
+#### Site Editor
+
+-   Fix site editor redirection after creating new template or template part. ([49364](https://github.com/WordPress/gutenberg/pull/49364))
+-   Show the created template title in success notice and not the slug. ([49366](https://github.com/WordPress/gutenberg/pull/49366))
+-   Template parts: Use `WP_Theme_JSON_Resolver_Gutenberg` instead of `WP_Theme_JSON_Resolver`. ([49198](https://github.com/WordPress/gutenberg/pull/49198))
+-   Fix typo in utils.js. ([49178](https://github.com/WordPress/gutenberg/pull/49178))
+
+#### Media
+
+-   Image: Don't create an external image 'blob' when a user can't upload files. ([49300](https://github.com/WordPress/gutenberg/pull/49300))
+-   MediaReplaceFlow: Check permissions before displaying the 'Media Library' menu item. ([49298](https://github.com/WordPress/gutenberg/pull/49298))
+
+#### Global Styles
+
+-   Selectors API: Fix for global styles hook, style variations, and duotone. ([49393](https://github.com/WordPress/gutenberg/pull/49393))
+-   Fix typo for the word `accross`. ([49295](https://github.com/WordPress/gutenberg/pull/49295))
+-   Duotone: Limit SVG filter output to used filters. ([49103](https://github.com/WordPress/gutenberg/pull/49103))
+-   Selectors API: Make duotone selectors fallback and be scoped. (https://github.com/WordPress/gutenberg/pull/49423)
+
+#### List View
+
+-   Show close button in List View on mobile. ([49200](https://github.com/WordPress/gutenberg/pull/49200))
+-   Add private appender prop. ([49137](https://github.com/WordPress/gutenberg/pull/49137))
+
+#### History
+
+-   Bring back revisions button for template parts. ([49163](https://github.com/WordPress/gutenberg/pull/49163))
+
+#### Data Layer
+
+-   useSelect: Incrementally subscribe to stores when first selected from. ([47243](https://github.com/WordPress/gutenberg/pull/47243))
+-   Data: Refuse to register an already registered store. ([49134](https://github.com/WordPress/gutenberg/pull/49134))
+
+#### Tools
+
+-   babel-plugin-makepot: Fix non-existing translation handling. ([49431](https://github.com/WordPress/gutenberg/pull/49431))
+
+#### Navigation
+
+Fix fallback not rendering. ([49431](https://github.com/WordPress/gutenberg/pull/49576))
+
+### Performance
+
+#### Post Editor
+
+-   Avoid UI shifting when selecting blocks. ([47177](https://github.com/WordPress/gutenberg/pull/47177))
+-   Lodash: Remove `_.groupBy()` from `buildTermsTree()` in editor. ([49224](https://github.com/WordPress/gutenberg/pull/49224))
+
+#### GitHub Actions
+
+-   Fix performance testing themes installation. ([49063](https://github.com/WordPress/gutenberg/pull/49063))
+-   Speed up `npm ci` by caching `node_modules`. ([45932](https://github.com/WordPress/gutenberg/pull/45932))
+
+#### Testings
+
+-   Fix running performance tests locally via CLI. ([49068](https://github.com/WordPress/gutenberg/pull/49068))
+-   Refactor performance tests artifacts handling. ([48684](https://github.com/WordPress/gutenberg/pull/48684))
+
+#### Babel Preset
+
+-   Polyfills: Exclude web.immediate. ([49234](https://github.com/WordPress/gutenberg/pull/49234))
+
+### Experiments
+
+#### Navigation Screen
+
+-   Remove 'edit-navigation' package leftovers. ([49183](https://github.com/WordPress/gutenberg/pull/49183))
+
+### Documentation
+
+-   Add a missing filter documentation. ([44342](https://github.com/WordPress/gutenberg/pull/44342))
+-   Add missing pseudo-selectors to theme.json schema and documentation. ([49202](https://github.com/WordPress/gutenberg/pull/49202))
+-   Add readme.txt FAQ entry for filing security bugs. ([49148](https://github.com/WordPress/gutenberg/pull/49148))
+-   Adds issue template for the plugin release process. ([49345](https://github.com/WordPress/gutenberg/pull/49345))
+-   Adds message about usage of block-editor components. ([49400](https://github.com/WordPress/gutenberg/pull/49400))
+-   Block Editor Handbook: Improved the readability and phrasing and corrected mistakes. ([48756](https://github.com/WordPress/gutenberg/pull/48756))
+-   Docs: Fix incorrect import of apiFetch. ([49432](https://github.com/WordPress/gutenberg/pull/49432))
+-   Docs: Put more structure to Architecture page. ([49184](https://github.com/WordPress/gutenberg/pull/49184))
+-   Fix failing CI documentation check. ([49378](https://github.com/WordPress/gutenberg/pull/49378))
+-   Fix/missing template header. ([49348](https://github.com/WordPress/gutenberg/pull/49348))
+-   FlexItem: Fix typo line 19 of README. ([49284](https://github.com/WordPress/gutenberg/pull/49284))
+-   Mention "testsPort" .wp-env.json setting. ([49388](https://github.com/WordPress/gutenberg/pull/49388))
+-   Remove errant line break in versions-and-building documentation. ([49353](https://github.com/WordPress/gutenberg/pull/49353))
+-   Theme JSON schema: Add defaultPresets property to shadow. ([49204](https://github.com/WordPress/gutenberg/pull/49204))
+-   Theme JSON schema: Add position.sticky and dimensions.minHeight properties to settings. ([49335](https://github.com/WordPress/gutenberg/pull/49335))
+-   Update @api-fetch README.md with query args. ([49318](https://github.com/WordPress/gutenberg/pull/49318))
+-   Update README.md for @wordpress/element. createRoot not available until WordPress 6.2. ([49309](https://github.com/WordPress/gutenberg/pull/49309))
+-   docs: Update end-to-end test device documentation. ([49441](https://github.com/WordPress/gutenberg/pull/49441))
+
+### Code Quality
+
+#### Components
+
+-   Animate: Refactor to TypeScript. ([49243](https://github.com/WordPress/gutenberg/pull/49243))
+-   ColorPicker: TypeScript refactor. ([49214](https://github.com/WordPress/gutenberg/pull/49214))
+-   CustomGradientPicker: Refactor to TypeScript. ([48929](https://github.com/WordPress/gutenberg/pull/48929))
+-   DuotonePicker, DuotoneSwatch: Convert to TypeScript. ([49060](https://github.com/WordPress/gutenberg/pull/49060))
+-   GradientPicker: Refactor to TypeScript. ([48316](https://github.com/WordPress/gutenberg/pull/48316))
+
+#### Block Library
+
+-   Home Link Block: Remove leading spaces in class names. ([49397](https://github.com/WordPress/gutenberg/pull/49397))
+-   Add column-gap and row-gap as allowed CSS properties for compatibility with WP 6.0. ([49118](https://github.com/WordPress/gutenberg/pull/49118))
+
+#### Block Editor
+
+-   Duotone: Remove Safari rerender hack. ([49232](https://github.com/WordPress/gutenberg/pull/49232))
+-   Replace regex with tag processor for duotone class render. ([49212](https://github.com/WordPress/gutenberg/pull/49212))
+-   Use immutableSet utility to set style properties. ([49365](https://github.com/WordPress/gutenberg/pull/49365))
+
+#### Plugins API
+
+-   Plugins: Add unit tests for the 'PluginArea' component. ([49138](https://github.com/WordPress/gutenberg/pull/49138))
+
+#### Global Styles
+
+-   Extract a ColorPanel component as a reusable component between Global Styles and Block Inspector. ([48893](https://github.com/WordPress/gutenberg/pull/48893))
+-   Lodash: Refactor away from `_.groupBy()` from `compileCSS()`. ([49227](https://github.com/WordPress/gutenberg/pull/49227))
+
+#### Webfonts
+
+-   Tests: Fix typos in fonts API. ([47288](https://github.com/WordPress/gutenberg/pull/47288))
+
+#### Compose
+
+-   Refactor useMediaQuery with useSyncExternalStore. ([48973](https://github.com/WordPress/gutenberg/pull/48973))
+
+#### Patterns
+
+-   Add `gutenberg_get_remote_theme_patterns` function. ([49307](https://github.com/WordPress/gutenberg/pull/49307))
+
+#### Element
+
+-   Element: Narrow `createInterpolateElement` param type. ([49182](https://github.com/WordPress/gutenberg/pull/49182))
+
+### Tools
+
+#### Testing
+
+-   Fix flaky Site Editor title end-to-end tests. ([49203](https://github.com/WordPress/gutenberg/pull/49203))
+-   Upgrade Playwright to 1.32. ([49296](https://github.com/WordPress/gutenberg/pull/49296))
+
+#### Build Tooling
+
+-   Upgrade wp-prettier to 2.8.5. ([49258](https://github.com/WordPress/gutenberg/pull/49258))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @enderandpeter: Mention "testsPort" .wp-env.json setting. ([49388](https://github.com/WordPress/gutenberg/pull/49388))
+-   @hareesh-pillai: Site Editor: Fix typo in utils.js. ([49178](https://github.com/WordPress/gutenberg/pull/49178))
+-   @helgatheviking: Update @api-fetch README.md with query args. ([49318](https://github.com/WordPress/gutenberg/pull/49318))
+-   @janboddez: Fix sprintf() arguments. ([49439](https://github.com/WordPress/gutenberg/pull/49439))
+-   @renintw: icons: Add unseen icon to library. ([49254](https://github.com/WordPress/gutenberg/pull/49254))
+-   @richiecarey: FlexItem: Fix typo line 19 of README. ([49284](https://github.com/WordPress/gutenberg/pull/49284))
+-   @sque89: columns block: Add support for templateLock attribute. ([49132](https://github.com/WordPress/gutenberg/pull/49132))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @ajlende @andrewserong @aristath @brookewp @carolinan @chad1008 @ciampo @corentin-gautier @dcalhoun @draganescu @ellatrix @enderandpeter @felixarntz @fluiddot @glendaviesnz @gziolo @hareesh-pillai @helgatheviking @janboddez @jeryj @jhnstn @johnbillion @jorgefilipecosta @jsnajdr @kevin940726 @madhusudhand @MaggieCabrera @Mamaduka @mburridge @mirka @ntsekouras @oandregal @renintw @richiecarey @richtabor @ryanwelcher @scruffian @sgomes @shreyasikhar @SiobhyB @Soean @sque89 @stokesman @t-hamano @talldan @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad @ZebulanStanphill
+
+= 15.4.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+-   Adjust whileHover effect to be a bit subtler and less pronounced. ([48928](https://github.com/WordPress/gutenberg/pull/48928))
+-   Go direct to edit from manage all templates list. ([48764](https://github.com/WordPress/gutenberg/pull/48764))
+-   Move "Add Template"'s descriptions to tooltips. ([48710](https://github.com/WordPress/gutenberg/pull/48710))
+-   Add descriptions to all panels in the Site Editor's dark side. ([48739](https://github.com/WordPress/gutenberg/pull/48739))
+-   Add hover animation to site editor canvas. ([48575](https://github.com/WordPress/gutenberg/pull/48575))
+-   Fix non-us spelling in sidebar. ([48976](https://github.com/WordPress/gutenberg/pull/48976))
+-   Prevent the saving button from showing when renaming templates. ([48399](https://github.com/WordPress/gutenberg/pull/48399))
+-   Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar. ([48689](https://github.com/WordPress/gutenberg/pull/48689))
+-   Add "Added by" description to template part navigation sidebar. ([48732](https://github.com/WordPress/gutenberg/pull/48732))
+-   Add border radius to off canvas navigation menu items. ([48798](https://github.com/WordPress/gutenberg/pull/48798))
+-   Add page details when viewing a specific page. ([48650](https://github.com/WordPress/gutenberg/pull/48650))
+-   Duotone: Limit SVG filter output to used filters. ([48995](https://github.com/WordPress/gutenberg/pull/48995))
+-   Hide navigation screen in site editor. ([49043](https://github.com/WordPress/gutenberg/pull/49043))
+
+#### Block Library
+
+-   Open convert to links modal on select of a page item. ([48723](https://github.com/WordPress/gutenberg/pull/48723))
+-   Post Featured Image: Remove 16:10. ([48969](https://github.com/WordPress/gutenberg/pull/48969))
+-   Cover: Add constrained/flow layout. ([45326](https://github.com/WordPress/gutenberg/pull/45326))
+-   Cover: Add text color block support. ([41572](https://github.com/WordPress/gutenberg/pull/41572))
+
+#### Components
+
+-   FontSizePicker: Allow custom units. ([48468](https://github.com/WordPress/gutenberg/pull/48468))
+-   `Navigator`: Disable initial animation. ([49062](https://github.com/WordPress/gutenberg/pull/49062))
+-   Try: Update Tertiary Button appearance. ([48888](https://github.com/WordPress/gutenberg/pull/48888))
+-   FormTokenField: Hide suggestions list on blur event if input value is invalid. ([48785](https://github.com/WordPress/gutenberg/pull/48785))
+
+#### Design Tools
+
+-   Block Supports: Add text columns (column count) to typography block supports. ([33587](https://github.com/WordPress/gutenberg/pull/33587))
+
+#### Global Styles
+
+-   Move the global styles provider to the app level component. ([49011](https://github.com/WordPress/gutenberg/pull/49011))
+-   Add support for `:link` and `:Any-link` in `theme.json`. ([48634](https://github.com/WordPress/gutenberg/pull/48634))
+-   Add compound class to layout wrapper for global spacing styles. ([47952](https://github.com/WordPress/gutenberg/pull/47952))
+
+#### Block API
+
+-   Block Deprecations: Provide extra data for isEligible check. ([48815](https://github.com/WordPress/gutenberg/pull/48815))
+
+#### Post Editor
+
+-   Provide static native editor help article slugs. ([48802](https://github.com/WordPress/gutenberg/pull/48802))
+-   Try getting Post Content layout on server before editor loads. ([45299](https://github.com/WordPress/gutenberg/pull/45299))
+
+#### Packages
+
+-   Introduce prependHTTPS URL util. ([47648](https://github.com/WordPress/gutenberg/pull/47648))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Embed Block: Fix Aspect Ratio Classes #29641. ([41141](https://github.com/WordPress/gutenberg/pull/41141))
+-   Ensure aspect ratio is applied when Post Featured Image block is linked. ([48495](https://github.com/WordPress/gutenberg/pull/48495))
+-   Fix PostContent initial render by waiting for the canEdit request. ([48642](https://github.com/WordPress/gutenberg/pull/48642))
+-   Fix classic menu fallback race condition. ([48811](https://github.com/WordPress/gutenberg/pull/48811))
+-   Fix navigation block off-canvas appender for empty menus. ([48907](https://github.com/WordPress/gutenberg/pull/48907))
+-   Fixes extra UI in navigation block inspector. ([48679](https://github.com/WordPress/gutenberg/pull/48679))
+-   Import Classic Menu using the menu name as the block menu title. ([48771](https://github.com/WordPress/gutenberg/pull/48771))
+-   Navigation Link: Remove color generation code. ([48927](https://github.com/WordPress/gutenberg/pull/48927))
+-   Navigation: Fix missing state for MenuControls. ([48921](https://github.com/WordPress/gutenberg/pull/48921))
+-   Update missing translation from label. ([48760](https://github.com/WordPress/gutenberg/pull/48760))
+-   Widget Importer: Fix Widget Group block imports. ([48669](https://github.com/WordPress/gutenberg/pull/48669))
+-   Query Loop: Show variant patterns even if there are no patterns for the Query Loop block. ([48793](https://github.com/WordPress/gutenberg/pull/48793))
+-   Comments: Fix 'sprintf requires more than 1 params' error. ([49054](https://github.com/WordPress/gutenberg/pull/49054))
+-   Adjust Post Featured Image PanelBody label to "Settings". ([49076](https://github.com/WordPress/gutenberg/pull/49076))
+-   Add help text to Gallery Image Size control. ([49074](https://github.com/WordPress/gutenberg/pull/49074))
+-   Comments Block (Legacy): Update missing translation. ([48820](https://github.com/WordPress/gutenberg/pull/48820))
+-   I18n of created Navigation menu title. ([48773](https://github.com/WordPress/gutenberg/pull/48773))
+-   Make sure the directly inserted block in the Nav block is a Page link. ([48740](https://github.com/WordPress/gutenberg/pull/48740))
+-   Navigation Link: Don't remove 'block_core_navigation_link_build_css_colors'. ([49064](https://github.com/WordPress/gutenberg/pull/49064))
+-   Navigation: Don't save the level of the link in an attribute. ([48219](https://github.com/WordPress/gutenberg/pull/48219))
+-   Refactor away state in Nav menu selector. ([45464](https://github.com/WordPress/gutenberg/pull/45464))
+-   Revert: Navigation: Always create a fallback menu. ([48602](https://github.com/WordPress/gutenberg/pull/48602))
+-   Tweak Latest Posts block PanelBody labels. ([49079](https://github.com/WordPress/gutenberg/pull/49079))
+-   Tweak label for Latest Posts excerpt control. ([49077](https://github.com/WordPress/gutenberg/pull/49077))
+-   Page List Block: Show untitled pages on page list on the editor. ([48772](https://github.com/WordPress/gutenberg/pull/48772))
+
+#### Site Editor
+
+-   Don't offer Classic block as a recovery action when not registered. ([49051](https://github.com/WordPress/gutenberg/pull/49051))
+-   Fix browser history when synchronising state with urls. ([48731](https://github.com/WordPress/gutenberg/pull/48731))
+-   Fix lingering insertion point within template parts. ([48913](https://github.com/WordPress/gutenberg/pull/48913))
+-   Fix template part actions in List View. ([48905](https://github.com/WordPress/gutenberg/pull/48905))
+-   Fix text alignment in the Site Editor sidebar. ([48959](https://github.com/WordPress/gutenberg/pull/48959))
+-   Fix typo in template parts description. ([48781](https://github.com/WordPress/gutenberg/pull/48781))
+-   Fix browse mode descriptions margin. ([48778](https://github.com/WordPress/gutenberg/pull/48778))
+-   Fix scrollbar in site editor. ([48822](https://github.com/WordPress/gutenberg/pull/48822))
+-   Site Editor Navigation panel: Update appearance of non-link blocks. ([48933](https://github.com/WordPress/gutenberg/pull/48933))
+-   Navigation sidebar shows a wrong submenu popover. ([48941](https://github.com/WordPress/gutenberg/pull/48941))
+-   Show creation popover on empty page links in the navigation sidebar. ([48746](https://github.com/WordPress/gutenberg/pull/48746))
+-   Site button metrics. ([48918](https://github.com/WordPress/gutenberg/pull/48918))
+-   Remove actions from SidebarNavigationScreenWrapper. ([48935](https://github.com/WordPress/gutenberg/pull/48935))
+-   Update template descriptions with more detail. ([48934](https://github.com/WordPress/gutenberg/pull/48934))
+
+#### Global Styles
+
+-   Fix typo: Use WP_Theme_JSON_Gutenberg instead of WP_Theme_JSON class name. ([48648](https://github.com/WordPress/gutenberg/pull/48648))
+-   Fix: Crashes on getNodesWithSettings and getNodesWithStyles. ([49023](https://github.com/WordPress/gutenberg/pull/49023))
+-   Fix: Global Styles crash in updateConfigWithSeparator when not block styles are passed. ([49045](https://github.com/WordPress/gutenberg/pull/49045))
+-   Fix: Global Styles getNodesWithStyles expects an object with elements. ([49044](https://github.com/WordPress/gutenberg/pull/49044))
+-   Fix: Global Styles getPresetsClasses crashes if no selector is passed. ([49024](https://github.com/WordPress/gutenberg/pull/49024))
+-   Fix: Global styles forces a white background. ([49042](https://github.com/WordPress/gutenberg/pull/49042))
+-   Style Book: Move iframe to root of content area to support styles that overflow block previews. ([48664](https://github.com/WordPress/gutenberg/pull/48664))
+-   `WP_Theme_JSON`: Sync indirect properties changes from core. ([48646](https://github.com/WordPress/gutenberg/pull/48646))
+
+#### Components
+
+-   Fix HStack and VStack alignment prop. ([47914](https://github.com/WordPress/gutenberg/pull/47914))
+-   ResizeTooltip: Use default.fontFamily on tooltip. ([48805](https://github.com/WordPress/gutenberg/pull/48805))
+-   ResponsiveWrapper: Use aspect-ratio CSS prop and support SVG elements. ([48573](https://github.com/WordPress/gutenberg/pull/48573))
+
+#### Accessibility
+
+-   Make sure useFocusOnMount runs when all the children tabbable elements have mounted. ([42187](https://github.com/WordPress/gutenberg/pull/42187))
+-   Manage selection on block sync. ([48979](https://github.com/WordPress/gutenberg/pull/48979))
+
+#### Post Editor
+
+-   Distraction Free Mode: Don't show the metaboxes. ([48947](https://github.com/WordPress/gutenberg/pull/48947))
+-   Don't add Post Content layout styles to title in the post editor. ([48663](https://github.com/WordPress/gutenberg/pull/48663))
+-   Fix animation and browser console error when returning from template edit mode. ([48930](https://github.com/WordPress/gutenberg/pull/48930))
+
+#### Block Editor
+
+-   LinkControl: Remove HTML from suggestion title before passing it to TextHighlight component. ([48685](https://github.com/WordPress/gutenberg/pull/48685))
+-   Order initial block items in Navigation with PrivateInserter. ([48752](https://github.com/WordPress/gutenberg/pull/48752))
+-   BlockInvalidWarning: Prefer `canInsertBlockType` and refactor to hooks. ([49052](https://github.com/WordPress/gutenberg/pull/49052))
+-   Fix grouping actions in List View. ([48910](https://github.com/WordPress/gutenberg/pull/48910))
+-   Fix typo in the media-categories component. ([49047](https://github.com/WordPress/gutenberg/pull/49047))
+-   Custom link UI does appears outside canvas on the sidebar navigation. ([48633](https://github.com/WordPress/gutenberg/pull/48633))
+-   Use proper color for block styles control. ([46684](https://github.com/WordPress/gutenberg/pull/46684))
+-   Update Welcome Guide article links to avoid redirect. ([48582](https://github.com/WordPress/gutenberg/pull/48582))
+-   Columns Block: Don't show the column count change UI when `templateLock` is `all`. ([48691](https://github.com/WordPress/gutenberg/pull/48691))
+-   Remove border from quick inserter child elements. ([48794](https://github.com/WordPress/gutenberg/pull/48794))
+
+#### Inspector Controls
+
+-   Fix settings tab active state border in block inspector. ([48945](https://github.com/WordPress/gutenberg/pull/48945))
+
+#### Testing
+
+-   Playwright Utils: Fix the 'publishPost' address locator. ([48729](https://github.com/WordPress/gutenberg/pull/48729))
+
+#### CSS & Styling
+
+-   Fix duplication of block classname in feature selectors for style variations. ([48662](https://github.com/WordPress/gutenberg/pull/48662))
+
+#### Experimental
+
+-   Fix KSES filter for un-prettified filters. ([49004](https://github.com/WordPress/gutenberg/pull/49004))
+
+#### Packages
+
+-   Rich text: Fix range equality checks for Safari. ([48733](https://github.com/WordPress/gutenberg/pull/48733))
+-   Preferences Modal: Fix double focus outline in tab item. ([48996](https://github.com/WordPress/gutenberg/pull/48996))
+
+#### Tools
+
+-   Scripts: Fix `render.php` isn't copied in Windows OS. ([48735](https://github.com/WordPress/gutenberg/pull/48735))
+
+#### Mobile
+
+-   Mobile - Fix parsing of CSS units for null matched values. ([48484](https://github.com/WordPress/gutenberg/pull/48484))
+
+### Performance
+
+#### Block Editor
+
+-   Rich text: useAnchor: Remove value dependency. ([48715](https://github.com/WordPress/gutenberg/pull/48715))
+
+#### Post Editor
+
+-   Lodash: Refactor away from `_.kebabCase()` in `EditorHelpTopics`. ([48776](https://github.com/WordPress/gutenberg/pull/48776))
+-   Lodash: Refactor away from `edit-post` package. ([48786](https://github.com/WordPress/gutenberg/pull/48786))
+
+#### Site Editor
+
+-   Improve the Navigation panel's menu query. ([48908](https://github.com/WordPress/gutenberg/pull/48908))
+-   Improve Site Editor performance tests. ([48138](https://github.com/WordPress/gutenberg/pull/48138))
+
+#### Testing
+
+-   Lodash: Remove from e2e-tests package. ([48775](https://github.com/WordPress/gutenberg/pull/48775))
+
+#### Themes
+
+-   Fix: Incorrect selector generated by `append_to_selector` method. ([48759](https://github.com/WordPress/gutenberg/pull/48759))
+
+#### Block Library
+
+-   Lodash: Remove `_.get()` from various blocks. ([48491](https://github.com/WordPress/gutenberg/pull/48491))
+
+#### Data Layer
+
+-   Lodash: Refactor away from `_.set()` in core-data. ([48784](https://github.com/WordPress/gutenberg/pull/48784))
+
+#### GitHub Actions
+
+-   Prefer committer over author date for perf results timestamp. ([48673](https://github.com/WordPress/gutenberg/pull/48673))
+
+### Documentation
+
+-   Add links to hook documentation in curation doc. ([48653](https://github.com/WordPress/gutenberg/pull/48653))
+-   Add missing playwright end-to-end documentation to toc.json. ([48447](https://github.com/WordPress/gutenberg/pull/48447))
+-   Adding examples of how to programmatically remove the panels in Document sidebar. ([48895](https://github.com/WordPress/gutenberg/pull/48895))
+-   Adds link to post on the developer blog to the deprecation page. ([49069](https://github.com/WordPress/gutenberg/pull/49069))
+-   Add position: Sticky to the Opt-in into UI controls appearanceTools section. ([48763](https://github.com/WordPress/gutenberg/pull/48763))
+-   Fix broken Lerna documentation link. ([48890](https://github.com/WordPress/gutenberg/pull/48890))
+-   Table of styles keys with since versions. ([48265](https://github.com/WordPress/gutenberg/pull/48265))
+-   Fix URL mismatch. ([48931](https://github.com/WordPress/gutenberg/pull/48931))
+-   Theme JSON schema: Add sticky position to settings, minHeight to styles. ([48948](https://github.com/WordPress/gutenberg/pull/48948))
+-   Update the end-to-end tests documentation. ([48951](https://github.com/WordPress/gutenberg/pull/48951))
+-   jest-preset-default: Update README to reflect current status. ([48925](https://github.com/WordPress/gutenberg/pull/48925))
+
+### Code Quality
+
+#### Components
+
+-   Autocomplete: Refactor to TypeScript. ([47751](https://github.com/WordPress/gutenberg/pull/47751))
+-   Navigation: Refactor to TypeScript. ([48742](https://github.com/WordPress/gutenberg/pull/48742))
+-   SelectControl: Improve prop types for single vs multiple selection. ([47390](https://github.com/WordPress/gutenberg/pull/47390))
+-   `DimensionControl(Experimental)`: Refactor to TypeScript. ([47351](https://github.com/WordPress/gutenberg/pull/47351))
+-   `Guide`: Refactor to TypeScript. ([47493](https://github.com/WordPress/gutenberg/pull/47493))
+-   `Icon`: Refactor tests to TypeScript. ([49066](https://github.com/WordPress/gutenberg/pull/49066))
+-   `PaletteEdit`: Refactor away from `lodash.kebabCase`. ([48637](https://github.com/WordPress/gutenberg/pull/48637))
+-   `QueryControls`: Refactor away from `lodash.groupBy`. ([48779](https://github.com/WordPress/gutenberg/pull/48779))
+-   components/utils/font: Refactor away from lodash `.get`. ([48629](https://github.com/WordPress/gutenberg/pull/48629))
+-   remove lodash from `context/getStyledClassName`:. ([48688](https://github.com/WordPress/gutenberg/pull/48688))
+-   withSpokenMessages: Change js files to typescript. ([48163](https://github.com/WordPress/gutenberg/pull/48163))
+
+#### Block Library
+
+-   Add Nav block files to those triggering error for exhaustive deps. ([48821](https://github.com/WordPress/gutenberg/pull/48821))
+-   Fix Nav block exhaustive deps warnings. ([48680](https://github.com/WordPress/gutenberg/pull/48680))
+-   Media Text: Refactored constants to it's designated file. ([48480](https://github.com/WordPress/gutenberg/pull/48480))
+-   Navigation: Simplify the method for finding the fallback menu. ([48916](https://github.com/WordPress/gutenberg/pull/48916))
+-   Duotone.php code cleanup. ([48607](https://github.com/WordPress/gutenberg/pull/48607))
+-   Revert "Duotone: Limit SVG filter output to used filters". ([49102](https://github.com/WordPress/gutenberg/pull/49102))
+
+#### Block Editor
+
+-   Inserter: Remove outer scope values dependencies. ([48961](https://github.com/WordPress/gutenberg/pull/48961))
+-   Inserter: Remove unnecessary dependency 'delayedFilterValue'. ([48960](https://github.com/WordPress/gutenberg/pull/48960))
+-   Remove unused CSS from LinkControl Apply button. ([48431](https://github.com/WordPress/gutenberg/pull/48431))
+-   Custom Classname block support: Update code comments to remove reference to anchor id. ([48709](https://github.com/WordPress/gutenberg/pull/48709))
+-   List View: Remove unused selector from the 'useBlockSelection' hook. ([48984](https://github.com/WordPress/gutenberg/pull/48984))
+-   Renames parent selection boolean param and improves documentation. ([48677](https://github.com/WordPress/gutenberg/pull/48677))
+-   Tests: Cleanup unnecessary jest timers setup. ([49030](https://github.com/WordPress/gutenberg/pull/49030))
+-   Avoid declaring a function inside another function. ([49049](https://github.com/WordPress/gutenberg/pull/49049))
+
+#### Global Styles
+
+-   Theme JSON: Clarify status of fixed position opt-in in appearance tools. ([48660](https://github.com/WordPress/gutenberg/pull/48660))
+-   Extract a BorderPanel component as a reusable component between Global Styles and Block Inspector. ([48636](https://github.com/WordPress/gutenberg/pull/48636))
+
+#### Data Layer
+
+-   Data: Use real timers for private APIs tests. ([49029](https://github.com/WordPress/gutenberg/pull/49029))
+
+#### Packages
+
+-   Preferences: Remove `types` field from `package.json`. ([49053](https://github.com/WordPress/gutenberg/pull/49053))
+-   Upgrade `typescript` to 4.9.5. ([48299](https://github.com/WordPress/gutenberg/pull/48299))
+-   Compose: Remove useAsyncList from mobile exports. ([48241](https://github.com/WordPress/gutenberg/pull/48241))
+-   Animation: Refactor to TypeScript. ([47042](https://github.com/WordPress/gutenberg/pull/47042))
+-   PanelBody: Convert to TypeScript. ([47702](https://github.com/WordPress/gutenberg/pull/47702))
+-   Refactor ToolbarContext to TS. ([49002](https://github.com/WordPress/gutenberg/pull/49002))
+-   Refactor/toolbar button component to typescript. ([47750](https://github.com/WordPress/gutenberg/pull/47750))
+-   `PaletteEdit`: Convert to TypeScript. ([47764](https://github.com/WordPress/gutenberg/pull/47764))
+-   navigateRegions: Convert to TypeScript. ([48632](https://github.com/WordPress/gutenberg/pull/48632))
+-   withFallbackStyles: Convert to TypeScript. ([48720](https://github.com/WordPress/gutenberg/pull/48720))
+-   withFilters: Convert to TypeScript. ([48721](https://github.com/WordPress/gutenberg/pull/48721))
+-   withFocusReturn: Convert to TypeScript. ([48748](https://github.com/WordPress/gutenberg/pull/48748))
+-   withNotices: Convert to TypeScript. ([49088](https://github.com/WordPress/gutenberg/pull/49088))
+-   Packages: Remove completely two deprecated webpack plugins. ([48770](https://github.com/WordPress/gutenberg/pull/48770))
+
+### Tools
+
+-   Env: Fix typo / grammar README.md. ([48952](https://github.com/WordPress/gutenberg/pull/48952))
+-   ci: Add Rich Text code owner. ([48727](https://github.com/WordPress/gutenberg/pull/48727))
+
+#### Testing
+
+-   Add `pageUtils.pressKeys` to playwright utils. ([49009](https://github.com/WordPress/gutenberg/pull/49009))
+-   Add artifacts upload for the performance tests. ([48243](https://github.com/WordPress/gutenberg/pull/48243))
+-   Fix flaky block hierarchy navigation test by better inserter selection. ([48780](https://github.com/WordPress/gutenberg/pull/48780))
+-   Migrate multi-block selection end-to-end tests to Playwright. ([48035](https://github.com/WordPress/gutenberg/pull/48035))
+-   Navigation block end-to-end tests: Default to my most recently created menu. ([48132](https://github.com/WordPress/gutenberg/pull/48132))
+-   Upgrade Jest from 27 to 29.5.0. ([47388](https://github.com/WordPress/gutenberg/pull/47388))
+-   Duotone: Style Engine: Add unit test and associated refactoring. ([49033](https://github.com/WordPress/gutenberg/pull/49033))
+-   Query Block: Add tests for `getValueFromObjectPath()` util. ([48956](https://github.com/WordPress/gutenberg/pull/48956))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @anver: Env: Fix typo / grammar README.md. ([48952](https://github.com/WordPress/gutenberg/pull/48952))
+-   @bhavz-10: withSpokenMessages: Change js files to typescript. ([48163](https://github.com/WordPress/gutenberg/pull/48163))
+-   @krishneup: Update missing translation from label. ([48760](https://github.com/WordPress/gutenberg/pull/48760))
+-   @mike-day: Refactor/toolbar button component to typescript. ([47750](https://github.com/WordPress/gutenberg/pull/47750))
+-   @shvlv: FormTokenField: Hide suggestions list on blur event if input value is invalid. ([48785](https://github.com/WordPress/gutenberg/pull/48785))
+-   @TylerB24890: Embed Block: Fix Aspect Ratio Classes #29641. ([41141](https://github.com/WordPress/gutenberg/pull/41141))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @andrewserong @anver @aristath @bhavz-10 @brookewp @chad1008 @ciampo @DaisyOlsen @dcalhoun @draganescu @ellatrix @fabiankaegy @felixarntz @flootr @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hideokamoto @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @krishneup @MaggieCabrera @Mamaduka @mburridge @mike-day @mirka @mtias @ndiego @ntsekouras @oandregal @Rahmon @richtabor @ryanwelcher @SavPhill @scruffian @shvlv @SiobhyB @swissspidy @t-hamano @talldan @tellthemachines @tomdevisser @TylerB24890 @tyxla @WunderBart @youknowriad
+
+= 15.3.1 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+-   Refactor the site editor URLs for better backward compatibility. ([48063](https://github.com/WordPress/gutenberg/pull/48063))
+-   Remove TemplateAreas from template details. ([48490](https://github.com/WordPress/gutenberg/pull/48490))
+-   Update the edit button. ([48584](https://github.com/WordPress/gutenberg/pull/48584))
+-   Change "Browse all templates" to "Manage all templates" in template details popover. ([48496](https://github.com/WordPress/gutenberg/pull/48496))
+-   Match color of the focus template view with site dark material. ([48430](https://github.com/WordPress/gutenberg/pull/48430))
+-   Polish add template modal style. ([48445](https://github.com/WordPress/gutenberg/pull/48445))
+-   Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+-   Extract a DimensionsPanel component as a reusable component between Global Styles and Block Inspector. ([48070](https://github.com/WordPress/gutenberg/pull/48070))
+-   Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+#### Block Editor
+
+-   Apply keyboard shortcut conversions between paragraphs and headings to all editor instances. ([47972](https://github.com/WordPress/gutenberg/pull/47972))
+-   Create automatic change higher order reducer. ([48312](https://github.com/WordPress/gutenberg/pull/48312))
+-   [Inserter]: Preload media categories empty check - client side. ([47503](https://github.com/WordPress/gutenberg/pull/47503))
+
+#### Post Editor
+
+-   Revert iframed editor for WP core only. ([48076](https://github.com/WordPress/gutenberg/pull/48076))
+-   PageAttributesCheck: Return boolean value directly from the selector. ([48336](https://github.com/WordPress/gutenberg/pull/48336))
+-   Apply busy status to the publish button in progress and unify button width. ([48444](https://github.com/WordPress/gutenberg/pull/48444))
+
+#### Block Library
+
+-   Add all allowed innerblocks to the inspector animation experiment. ([47834](https://github.com/WordPress/gutenberg/pull/47834))
+-   Make the Site Logo block placeholder state smaller. ([48218](https://github.com/WordPress/gutenberg/pull/48218))
+-   ToggleControl: Remove margin overrides and add opt-in prop. ([47866](https://github.com/WordPress/gutenberg/pull/47866))
+-   Post Terms block: Add transforms for variations. ([48328](https://github.com/WordPress/gutenberg/pull/48328))
+-   List block: Add Firefox end-to-end tests. ([48271](https://github.com/WordPress/gutenberg/pull/48271))
+-   Navigation List View: Add block movers to the more menu. ([48099](https://github.com/WordPress/gutenberg/pull/48099))
+-   Navigation: Always create a fallback menu. ([47684](https://github.com/WordPress/gutenberg/pull/47684))
+-   Navigation: Don't create a fallback navigation menu if there are inner blocks. ([48585](https://github.com/WordPress/gutenberg/pull/48585))
+-   Navigation: Don't create duplicate navigation menus. ([48599](https://github.com/WordPress/gutenberg/pull/48599))
+-   Navigation: Update the dependencies for the useEffect that handles notifications. ([48066](https://github.com/WordPress/gutenberg/pull/48066))
+-   Navigation: Wrap the dependent functions in useCallback. ([48195](https://github.com/WordPress/gutenberg/pull/48195))
+-   Page List: Move the modal to its own file. ([47922](https://github.com/WordPress/gutenberg/pull/47922))
+-   [New Block] Add post time to read block. ([43403](https://github.com/WordPress/gutenberg/pull/43403))
+-   Classic Block: Replace the deprecated `isPrimary` prop with `variant`. ([48230](https://github.com/WordPress/gutenberg/pull/48230))
+-   Refactor core blocks to use HTML Tag Processor. ([43178](https://github.com/WordPress/gutenberg/pull/43178))
+
+#### Block API
+
+-   HTML Tag Processor: Add WP 6.3 compat layer. ([47933](https://github.com/WordPress/gutenberg/pull/47933))
+-   Tag Processor: Add bookmark invalidation logic. ([47559](https://github.com/WordPress/gutenberg/pull/47559))
+
+#### Design Tools
+
+-   Duotone: Use the style engine to generate CSS for Duotone. ([48281](https://github.com/WordPress/gutenberg/pull/48281))
+-   Duotone: Add Global Styles controls for blocks that support duotone. ([48255](https://github.com/WordPress/gutenberg/pull/48255))
+-   Use Duotone presets in block duotone attributes. ([48318](https://github.com/WordPress/gutenberg/pull/48318))
+-   Duotone: Use CSS variables instead of slugs in block attributes. ([48426](https://github.com/WordPress/gutenberg/pull/48426))
+-   Border Panel: Add missing dep for `onBorderChange` callback. ([48010](https://github.com/WordPress/gutenberg/pull/48010))
+-   Disable layout toolbar controls for content locked blocks. ([47939](https://github.com/WordPress/gutenberg/pull/47939))
+-   SpacingSizesControl: Fix white dot on thumb. ([48574](https://github.com/WordPress/gutenberg/pull/48574))
+
+#### List View
+
+-   Scroll selected block into view when single block selection changes. ([46895](https://github.com/WordPress/gutenberg/pull/46895))
+
+#### Components
+
+-   TabPanel: Refactor unit tests in prep for controlled component updates. ([48086](https://github.com/WordPress/gutenberg/pull/48086))
+-   Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   CircularOptionPicker: Refactor to TypeScript. ([47937](https://github.com/WordPress/gutenberg/pull/47937))
+-   Extract delete handler to hook for RichText. ([48273](https://github.com/WordPress/gutenberg/pull/48273))
+-   ToolsPanel: Remove unnecessary dep from resetAll callback. ([48011](https://github.com/WordPress/gutenberg/pull/48011))
+-   Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   Pin `floating-ui/react-dom` version. ([48402](https://github.com/WordPress/gutenberg/pull/48402))
+-   Use React 18 rendering for import dropdown. ([48244](https://github.com/WordPress/gutenberg/pull/48244))
+
+### Bug Fixes
+
+#### Site Editor
+
+-   Fix Site Editor perf tests. ([48240](https://github.com/WordPress/gutenberg/pull/48240))
+-   Fix routing for Classic themes using block-based template parts. ([48343](https://github.com/WordPress/gutenberg/pull/48343))
+-   Fix the 'Browse all' link in the template details modal. ([48301](https://github.com/WordPress/gutenberg/pull/48301))
+-   Fix the site editor home page loading when installed in a subdirectory. ([48363](https://github.com/WordPress/gutenberg/pull/48363))
+-   Fix the tooltip and shortcut for the global save button. ([48282](https://github.com/WordPress/gutenberg/pull/48282))
+-   Prevent distracting focused back button on site editor load. ([48472](https://github.com/WordPress/gutenberg/pull/48472))
+-   Sort templates and template parts by slug. ([48473](https://github.com/WordPress/gutenberg/pull/48473))
+-   Specify focus state color for template navigation button. ([48134](https://github.com/WordPress/gutenberg/pull/48134))
+-   [Site Editor]: Set `html` block as freeform fallback block. ([48129](https://github.com/WordPress/gutenberg/pull/48129))
+-   Remove broken site editor redirect. ([48283](https://github.com/WordPress/gutenberg/pull/48283))
+-   Fix: Inserter does not appear on sidebar navigation. ([48623](https://github.com/WordPress/gutenberg/pull/48623))
+-   Fix: Make navigation page list load its items on navigation sidebar. ([47853](https://github.com/WordPress/gutenberg/pull/47853))
+-   Revert Site Tagline placeholder attribute, move example to block.json. ([48383](https://github.com/WordPress/gutenberg/pull/48383))
+
+#### Block Editor
+
+-   MediaReplaceFlow: Fix styling for LinkControl. ([47949](https://github.com/WordPress/gutenberg/pull/47949))
+-   Fix "Reset All" button in the typography panel of the block inspector. ([48123](https://github.com/WordPress/gutenberg/pull/48123))
+-   [Inserter - Media tab]: Upload Openverse images when inserted. ([48501](https://github.com/WordPress/gutenberg/pull/48501))
+-   Block alignment controls: Don't remount the block when alignments change. ([48209](https://github.com/WordPress/gutenberg/pull/48209))
+-   Pin `valtio` version. ([48237](https://github.com/WordPress/gutenberg/pull/48237))
+-   Fix block style preview flickering when a 'style' is focused. ([48418](https://github.com/WordPress/gutenberg/pull/48418))
+-   Enable access to block settings within UBE. ([48435](https://github.com/WordPress/gutenberg/pull/48435))
+-   Fix: Content only CPT template locking. ([48434](https://github.com/WordPress/gutenberg/pull/48434))
+-   Firefox: Fix input rules (React async state issue). ([48210](https://github.com/WordPress/gutenberg/pull/48210))
+-   Fix: Multiple overwrites on rest_controller_class for wp_template/wp_template_part. ([48078](https://github.com/WordPress/gutenberg/pull/48078))
+-   Select blocks in `outline` list. ([48118](https://github.com/WordPress/gutenberg/pull/48118))
+-   Only add layout classes to inner wrapper if block is a container. ([48611](https://github.com/WordPress/gutenberg/pull/48611))
+
+#### Widgets Editor
+
+-   Widget Editor: Fix a problem with 'Move to Widget Area' button not working. ([48233](https://github.com/WordPress/gutenberg/pull/48233))
+
+#### Block Library
+
+-   Add support for orientation-based block movers to core/social-links. ([48452](https://github.com/WordPress/gutenberg/pull/48452))
+-   Fix Post Excerpt: Read more link is always on new line in the editor. ([47772](https://github.com/WordPress/gutenberg/pull/47772))
+-   Fix: OffCanvasEditor does not inserts submenu on collapsed items. ([48214](https://github.com/WordPress/gutenberg/pull/48214))
+-   List Item: Avoid an error when the 'onReplace' prop is undefined. ([48639](https://github.com/WordPress/gutenberg/pull/48639))
+-   Add missing code on the fix page list loading PR. ([48621](https://github.com/WordPress/gutenberg/pull/48621))
+-   Prevent text decoration from showing up in all blocks. ([48117](https://github.com/WordPress/gutenberg/pull/48117))
+-   Widget Importer: Don't render controls when there's nothing to import. ([48396](https://github.com/WordPress/gutenberg/pull/48396))
+-   [Query Loop] Fix top border in pattern selection modal. ([48303](https://github.com/WordPress/gutenberg/pull/48303))
+-   [Query Loop] Sync `gutenberg_build_query_vars_from_query_block` with core. ([48640](https://github.com/WordPress/gutenberg/pull/48640))
+-   Avatar: Clean up border application in editor. ([48024](https://github.com/WordPress/gutenberg/pull/48024))
+
+#### Global Styles
+
+-   Fix for `WP_Theme_JSON_Resolver_Gutenberg::Get_merged_data`. ([48644](https://github.com/WordPress/gutenberg/pull/48644))
+-   Display preset names via the tooltip. ([48304](https://github.com/WordPress/gutenberg/pull/48304))
+-   Fix typo in valid settings for fluid typography. ([48605](https://github.com/WordPress/gutenberg/pull/48605))
+-   Prevent the global styles previews thumbnails from resizing on load. ([48474](https://github.com/WordPress/gutenberg/pull/48474))
+-   Site Tagline: Add example so that it will display in style book. ([48300](https://github.com/WordPress/gutenberg/pull/48300))
+-   Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   Update code position for constants and methods in `WP_Theme_JSON_Gutenberg` class. ([48631](https://github.com/WordPress/gutenberg/pull/48631))
+-   `WP_Theme_JSON_Gutenberg`: Update comments to be aligned with core, so backports are easier. ([48624](https://github.com/WordPress/gutenberg/pull/48624))
+
+### Accessibility
+
+-   Autocomplete: Duplicate list within iframe for non visual users. ([47907](https://github.com/WordPress/gutenberg/pull/47907))
+-   Fix site editor switch mode message. ([48136](https://github.com/WordPress/gutenberg/pull/48136))
+-   Fix the Publish region position and focus style. ([48102](https://github.com/WordPress/gutenberg/pull/48102))
+-   Focus 1st parent block on block remove, if no previous block is available. ([48204](https://github.com/WordPress/gutenberg/pull/48204))
+-   List view: Allow selected block to override roving tabindex. ([48339](https://github.com/WordPress/gutenberg/pull/48339))
+-   Style Book: Allow button text labels for style book icon. ([48088](https://github.com/WordPress/gutenberg/pull/48088))
+-   Style Book: Focus the Style Book when opened, and enable ESCAPE key to close. ([48151](https://github.com/WordPress/gutenberg/pull/48151))
+-   Try to fix a11y test flakiness. ([48236](https://github.com/WordPress/gutenberg/pull/48236))
+-   Make the template customized info accessible. ([48159](https://github.com/WordPress/gutenberg/pull/48159))
+
+### Performance
+
+#### Block Editor
+
+-   Block Editor: Improve empty `getBlockParents()` perf. ([48242](https://github.com/WordPress/gutenberg/pull/48242))
+-   Fix perf regression in duotone hooks. ([48401](https://github.com/WordPress/gutenberg/pull/48401))
+-   Writing flow: Avoid recalc style on every selection change. ([48409](https://github.com/WordPress/gutenberg/pull/48409))
+-   useAsyncList: Flush state updates when processing queue. ([48238](https://github.com/WordPress/gutenberg/pull/48238))
+
+#### Components
+
+-   Autocomplete: Reduce work before finding trigger. ([48327](https://github.com/WordPress/gutenberg/pull/48327))
+-   Disable lazy term meta loading render_block_core_template_part. ([48000](https://github.com/WordPress/gutenberg/pull/48000))
+-   Rich text: Only selectively handle keyup/pointerup. ([48385](https://github.com/WordPress/gutenberg/pull/48385))
+-   Rich text: Remove unnecessary handleSelectionChange call. ([48373](https://github.com/WordPress/gutenberg/pull/48373))
+-   Rich text: Try removing store change on focus. ([48342](https://github.com/WordPress/gutenberg/pull/48342))
+-   Autocomplete: Avoid calling setState on input. ([48565](https://github.com/WordPress/gutenberg/pull/48565))
+-   Autocomplete: Don't change state on every keystroke. ([48485](https://github.com/WordPress/gutenberg/pull/48485))
+
+### Code Quality
+
+-   Tag Processor: Make `$html` field `protected`. ([48681](https://github.com/WordPress/gutenberg/pull/48681))
+-   WP_HTML_Tag_Processor: Support tag closer bookmarks. ([48692](https://github.com/WordPress/gutenberg/pull/48692))
+-   Fixed incorrect type annotations in @wordpress/data, part 2. ([48221](https://github.com/WordPress/gutenberg/pull/48221))
+-   Lodash: Refactor away from `_.merge()`. ([48239](https://github.com/WordPress/gutenberg/pull/48239))
+-   Lodash: Remove from integration tests. ([48122](https://github.com/WordPress/gutenberg/pull/48122))
+-   Lodash: Remove remaining `_.get()` from `core-data`. ([48310](https://github.com/WordPress/gutenberg/pull/48310))
+-   Lodash: Remove `_.get()` for post type usages. ([48121](https://github.com/WordPress/gutenberg/pull/48121))
+-   Lodash: Remove remaining `_.get()` from `editor`. ([48314](https://github.com/WordPress/gutenberg/pull/48314))
+-   Lodash: Remove some `_.get()` from editor. ([48104](https://github.com/WordPress/gutenberg/pull/48104))
+-   Lodash: Refactor context system provider away from `_.merge()`. ([48036](https://github.com/WordPress/gutenberg/pull/48036))
+-   Lodash: Remove `_.merge()` from `getMappedColumnWidths()`. ([48032](https://github.com/WordPress/gutenberg/pull/48032))
+-   Lodash: Remove some `_.get()` from Gallery block. ([48488](https://github.com/WordPress/gutenberg/pull/48488))
+-   Lodash: Remove some `_.get()` from Image block. ([48489](https://github.com/WordPress/gutenberg/pull/48489))
+-   Playwright: Fix request utils for non Docker envs. ([48206](https://github.com/WordPress/gutenberg/pull/48206))
+-   [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. ([48352](https://github.com/WordPress/gutenberg/pull/48352))
+-   Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302))
+-   Track new front-end metric: LCP-TTFB. ([48288](https://github.com/WordPress/gutenberg/pull/48288))
+
+### Documentation
+
+-   Clarify backport status of `appearance-tools` theme support. ([48622](https://github.com/WordPress/gutenberg/pull/48622))
+-   Docs: Clarify release process for major WP Beta 1. ([48248](https://github.com/WordPress/gutenberg/pull/48248))
+-   Docs: Markdown fix for wp_enqueue_script usage. ([48212](https://github.com/WordPress/gutenberg/pull/48212))
+-   Fix `e2e-test-utils-playwright`'s jsdoc and types. ([48266](https://github.com/WordPress/gutenberg/pull/48266))
+-   Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   Proactively update versions in WordPress ahead of 6.2. ([48145](https://github.com/WordPress/gutenberg/pull/48145))
+-   Update curation document to include theme.json filters. ([48576](https://github.com/WordPress/gutenberg/pull/48576))
+-   Updates to the curating the editor experience to include 6.1 & 6.2 items. ([48294](https://github.com/WordPress/gutenberg/pull/48294))
+
+### Tools
+
+#### Testing
+
+-   Migrate `switch-to-draft` to Playwright. ([48120](https://github.com/WordPress/gutenberg/pull/48120))
+-   VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. ([48260](https://github.com/WordPress/gutenberg/pull/48260))
+-   Update end-to-end test snapshots to Jest 29 default. ([48626](https://github.com/WordPress/gutenberg/pull/48626))
+-   Update snapshot format to Jest 29 default. ([48366](https://github.com/WordPress/gutenberg/pull/48366))
+-   Move react-native-editor parser tests to a test directory. ([48615](https://github.com/WordPress/gutenberg/pull/48615))
+-   `ToolsPanel`: Refactor unit tests to TypeScript. ([48275](https://github.com/WordPress/gutenberg/pull/48275))
+-   Migrate block deletion end-to-end tests to Playwright. ([48012](https://github.com/WordPress/gutenberg/pull/48012))
+-   Migrate list view end-to-end tests to Playwright. ([47919](https://github.com/WordPress/gutenberg/pull/47919))
+-   Navigation block: End-to-end code quality fixes. ([48071](https://github.com/WordPress/gutenberg/pull/48071))
+-   Remove old end-to-end tests for the navigation block. ([48126](https://github.com/WordPress/gutenberg/pull/48126))
+-   Update assertion Autocomplete end-to-end tests. ([48344](https://github.com/WordPress/gutenberg/pull/48344))
+-   [Automated Testing]: Fix wrong button fixture. ([48305](https://github.com/WordPress/gutenberg/pull/48305))
+-   Add typescript-eslint rules with type informations to end-to-end tests. ([48267](https://github.com/WordPress/gutenberg/pull/48267))
+-   Fix snapshots for Spacer mobile unit tests. ([48406](https://github.com/WordPress/gutenberg/pull/48406))
+-   Add command to run performance tests in debug mode. ([48614](https://github.com/WordPress/gutenberg/pull/48614))
+-   Make the performance tests more stable. ([48094](https://github.com/WordPress/gutenberg/pull/48094))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @abhi3315: Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   @hbhalodia: Update: Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   @sboerrigter: Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+-   @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   @tomdevisser: Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @abhi3315 @adamziel @afercia @alexstine @andrewserong @annezazu @brookewp @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fluiddot @geriux @getdave @gvgvgvijayan @gziolo @hbhalodia @jorgefilipecosta @jsnajdr @kevin940726 @MaggieCabrera @Mamaduka @marekdedic @ndiego @ntsekouras @oandregal @ockham @richtabor @sboerrigter @scruffian @shreyasikhar @spacedmonkey @suvrodattamitu @t-hamano @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad
+
+= 15.3.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+-   Refactor the site editor URLs for better backward compatibility. ([48063](https://github.com/WordPress/gutenberg/pull/48063))
+-   Remove TemplateAreas from template details. ([48490](https://github.com/WordPress/gutenberg/pull/48490))
+-   Update the edit button. ([48584](https://github.com/WordPress/gutenberg/pull/48584))
+-   Change "Browse all templates" to "Manage all templates" in template details popover. ([48496](https://github.com/WordPress/gutenberg/pull/48496))
+-   Match color of the focus template view with site dark material. ([48430](https://github.com/WordPress/gutenberg/pull/48430))
+-   Polish add template modal style. ([48445](https://github.com/WordPress/gutenberg/pull/48445))
+-   Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+-   Extract a DimensionsPanel component as a reusable component between Global Styles and Block Inspector. ([48070](https://github.com/WordPress/gutenberg/pull/48070))
+-   Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+#### Block Editor
+
+-   Apply keyboard shortcut conversions between paragraphs and headings to all editor instances. ([47972](https://github.com/WordPress/gutenberg/pull/47972))
+-   Create automatic change higher order reducer. ([48312](https://github.com/WordPress/gutenberg/pull/48312))
+-   [Inserter]: Preload media categories empty check - client side. ([47503](https://github.com/WordPress/gutenberg/pull/47503))
+
+#### Post Editor
+
+-   Revert iframed editor for WP core only. ([48076](https://github.com/WordPress/gutenberg/pull/48076))
+-   PageAttributesCheck: Return boolean value directly from the selector. ([48336](https://github.com/WordPress/gutenberg/pull/48336))
+-   Apply busy status to the publish button in progress and unify button width. ([48444](https://github.com/WordPress/gutenberg/pull/48444))
+
+#### Block Library
+
+-   Add all allowed innerblocks to the inspector animation experiment. ([47834](https://github.com/WordPress/gutenberg/pull/47834))
+-   Make the Site Logo block placeholder state smaller. ([48218](https://github.com/WordPress/gutenberg/pull/48218))
+-   ToggleControl: Remove margin overrides and add opt-in prop. ([47866](https://github.com/WordPress/gutenberg/pull/47866))
+-   Post Terms block: Add transforms for variations. ([48328](https://github.com/WordPress/gutenberg/pull/48328))
+-   List block: Add Firefox end-to-end tests. ([48271](https://github.com/WordPress/gutenberg/pull/48271))
+-   Navigation List View: Add block movers to the more menu. ([48099](https://github.com/WordPress/gutenberg/pull/48099))
+-   Navigation: Always create a fallback menu. ([47684](https://github.com/WordPress/gutenberg/pull/47684))
+-   Navigation: Don't create a fallback navigation menu if there are inner blocks. ([48585](https://github.com/WordPress/gutenberg/pull/48585))
+-   Navigation: Don't create duplicate navigation menus. ([48599](https://github.com/WordPress/gutenberg/pull/48599))
+-   Navigation: Update the dependencies for the useEffect that handles notifications. ([48066](https://github.com/WordPress/gutenberg/pull/48066))
+-   Navigation: Wrap the dependent functions in useCallback. ([48195](https://github.com/WordPress/gutenberg/pull/48195))
+-   Page List: Move the modal to its own file. ([47922](https://github.com/WordPress/gutenberg/pull/47922))
+-   [New Block] Add post time to read block. ([43403](https://github.com/WordPress/gutenberg/pull/43403))
+-   Classic Block: Replace the deprecated `isPrimary` prop with `variant`. ([48230](https://github.com/WordPress/gutenberg/pull/48230))
+-   Refactor core blocks to use HTML Tag Processor. ([43178](https://github.com/WordPress/gutenberg/pull/43178))
+
+#### Block API
+
+-   HTML Tag Processor: Add WP 6.3 compat layer. ([47933](https://github.com/WordPress/gutenberg/pull/47933))
+-   Tag Processor: Add bookmark invalidation logic. ([47559](https://github.com/WordPress/gutenberg/pull/47559))
+
+#### Design Tools
+
+-   Duotone: Use the style engine to generate CSS for Duotone. ([48281](https://github.com/WordPress/gutenberg/pull/48281))
+-   Duotone: Add Global Styles controls for blocks that support duotone. ([48255](https://github.com/WordPress/gutenberg/pull/48255))
+-   Use Duotone presets in block duotone attributes. ([48318](https://github.com/WordPress/gutenberg/pull/48318))
+-   Duotone: Use CSS variables instead of slugs in block attributes. ([48426](https://github.com/WordPress/gutenberg/pull/48426))
+-   Border Panel: Add missing dep for `onBorderChange` callback. ([48010](https://github.com/WordPress/gutenberg/pull/48010))
+-   Disable layout toolbar controls for content locked blocks. ([47939](https://github.com/WordPress/gutenberg/pull/47939))
+-   SpacingSizesControl: Fix white dot on thumb. ([48574](https://github.com/WordPress/gutenberg/pull/48574))
+
+#### List View
+
+-   Scroll selected block into view when single block selection changes. ([46895](https://github.com/WordPress/gutenberg/pull/46895))
+
+#### Components
+
+-   TabPanel: Refactor unit tests in prep for controlled component updates. ([48086](https://github.com/WordPress/gutenberg/pull/48086))
+-   Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   CircularOptionPicker: Refactor to TypeScript. ([47937](https://github.com/WordPress/gutenberg/pull/47937))
+-   Extract delete handler to hook for RichText. ([48273](https://github.com/WordPress/gutenberg/pull/48273))
+-   ToolsPanel: Remove unnecessary dep from resetAll callback. ([48011](https://github.com/WordPress/gutenberg/pull/48011))
+-   Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   Pin `floating-ui/react-dom` version. ([48402](https://github.com/WordPress/gutenberg/pull/48402))
+-   Use React 18 rendering for import dropdown. ([48244](https://github.com/WordPress/gutenberg/pull/48244))
+
+### Bug Fixes
+
+#### Site Editor
+
+-   Fix Site Editor perf tests. ([48240](https://github.com/WordPress/gutenberg/pull/48240))
+-   Fix routing for Classic themes using block-based template parts. ([48343](https://github.com/WordPress/gutenberg/pull/48343))
+-   Fix the 'Browse all' link in the template details modal. ([48301](https://github.com/WordPress/gutenberg/pull/48301))
+-   Fix the site editor home page loading when installed in a subdirectory. ([48363](https://github.com/WordPress/gutenberg/pull/48363))
+-   Fix the tooltip and shortcut for the global save button. ([48282](https://github.com/WordPress/gutenberg/pull/48282))
+-   Prevent distracting focused back button on site editor load. ([48472](https://github.com/WordPress/gutenberg/pull/48472))
+-   Sort templates and template parts by slug. ([48473](https://github.com/WordPress/gutenberg/pull/48473))
+-   Specify focus state color for template navigation button. ([48134](https://github.com/WordPress/gutenberg/pull/48134))
+-   [Site Editor]: Set `html` block as freeform fallback block. ([48129](https://github.com/WordPress/gutenberg/pull/48129))
+-   Remove broken site editor redirect. ([48283](https://github.com/WordPress/gutenberg/pull/48283))
+-   Fix: Inserter does not appear on sidebar navigation. ([48623](https://github.com/WordPress/gutenberg/pull/48623))
+-   Fix: Make navigation page list load its items on navigation sidebar. ([47853](https://github.com/WordPress/gutenberg/pull/47853))
+-   Revert Site Tagline placeholder attribute, move example to block.json. ([48383](https://github.com/WordPress/gutenberg/pull/48383))
+
+#### Block Editor
+
+-   MediaReplaceFlow: Fix styling for LinkControl. ([47949](https://github.com/WordPress/gutenberg/pull/47949))
+-   Fix "Reset All" button in the typography panel of the block inspector. ([48123](https://github.com/WordPress/gutenberg/pull/48123))
+-   [Inserter - Media tab]: Upload Openverse images when inserted. ([48501](https://github.com/WordPress/gutenberg/pull/48501))
+-   Block alignment controls: Don't remount the block when alignments change. ([48209](https://github.com/WordPress/gutenberg/pull/48209))
+-   Pin `valtio` version. ([48237](https://github.com/WordPress/gutenberg/pull/48237))
+-   Fix block style preview flickering when a 'style' is focused. ([48418](https://github.com/WordPress/gutenberg/pull/48418))
+-   Enable access to block settings within UBE. ([48435](https://github.com/WordPress/gutenberg/pull/48435))
+-   Fix: Content only CPT template locking. ([48434](https://github.com/WordPress/gutenberg/pull/48434))
+-   Firefox: Fix input rules (React async state issue). ([48210](https://github.com/WordPress/gutenberg/pull/48210))
+-   Fix: Multiple overwrites on rest_controller_class for wp_template/wp_template_part. ([48078](https://github.com/WordPress/gutenberg/pull/48078))
+-   Select blocks in `outline` list. ([48118](https://github.com/WordPress/gutenberg/pull/48118))
+-   Only add layout classes to inner wrapper if block is a container. ([48611](https://github.com/WordPress/gutenberg/pull/48611))
+
+#### Widgets Editor
+
+-   Widget Editor: Fix a problem with 'Move to Widget Area' button not working. ([48233](https://github.com/WordPress/gutenberg/pull/48233))
+
+#### Block Library
+
+-   Add support for orientation-based block movers to core/social-links. ([48452](https://github.com/WordPress/gutenberg/pull/48452))
+-   Fix Post Excerpt: Read more link is always on new line in the editor. ([47772](https://github.com/WordPress/gutenberg/pull/47772))
+-   Fix: OffCanvasEditor does not inserts submenu on collapsed items. ([48214](https://github.com/WordPress/gutenberg/pull/48214))
+-   List Item: Avoid an error when the 'onReplace' prop is undefined. ([48639](https://github.com/WordPress/gutenberg/pull/48639))
+-   Add missing code on the fix page list loading PR. ([48621](https://github.com/WordPress/gutenberg/pull/48621))
+-   Prevent text decoration from showing up in all blocks. ([48117](https://github.com/WordPress/gutenberg/pull/48117))
+-   Widget Importer: Don't render controls when there's nothing to import. ([48396](https://github.com/WordPress/gutenberg/pull/48396))
+-   [Query Loop] Fix top border in pattern selection modal. ([48303](https://github.com/WordPress/gutenberg/pull/48303))
+-   [Query Loop] Sync `gutenberg_build_query_vars_from_query_block` with core. ([48640](https://github.com/WordPress/gutenberg/pull/48640))
+-   Avatar: Clean up border application in editor. ([48024](https://github.com/WordPress/gutenberg/pull/48024))
+
+#### Global Styles
+
+-   Fix for `WP_Theme_JSON_Resolver_Gutenberg::Get_merged_data`. ([48644](https://github.com/WordPress/gutenberg/pull/48644))
+-   Display preset names via the tooltip. ([48304](https://github.com/WordPress/gutenberg/pull/48304))
+-   Fix typo in valid settings for fluid typography. ([48605](https://github.com/WordPress/gutenberg/pull/48605))
+-   Prevent the global styles previews thumbnails from resizing on load. ([48474](https://github.com/WordPress/gutenberg/pull/48474))
+-   Site Tagline: Add example so that it will display in style book. ([48300](https://github.com/WordPress/gutenberg/pull/48300))
+-   Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   Update code position for constants and methods in `WP_Theme_JSON_Gutenberg` class. ([48631](https://github.com/WordPress/gutenberg/pull/48631))
+-   `WP_Theme_JSON_Gutenberg`: Update comments to be aligned with core, so backports are easier. ([48624](https://github.com/WordPress/gutenberg/pull/48624))
+
+### Accessibility
+
+-   Autocomplete: Duplicate list within iframe for non visual users. ([47907](https://github.com/WordPress/gutenberg/pull/47907))
+-   Fix site editor switch mode message. ([48136](https://github.com/WordPress/gutenberg/pull/48136))
+-   Fix the Publish region position and focus style. ([48102](https://github.com/WordPress/gutenberg/pull/48102))
+-   Focus 1st parent block on block remove, if no previous block is available. ([48204](https://github.com/WordPress/gutenberg/pull/48204))
+-   List view: Allow selected block to override roving tabindex. ([48339](https://github.com/WordPress/gutenberg/pull/48339))
+-   Style Book: Allow button text labels for style book icon. ([48088](https://github.com/WordPress/gutenberg/pull/48088))
+-   Style Book: Focus the Style Book when opened, and enable ESCAPE key to close. ([48151](https://github.com/WordPress/gutenberg/pull/48151))
+-   Try to fix a11y test flakiness. ([48236](https://github.com/WordPress/gutenberg/pull/48236))
+-   Make the template customized info accessible. ([48159](https://github.com/WordPress/gutenberg/pull/48159))
+
+### Performance
+
+#### Block Editor
+
+-   Block Editor: Improve empty `getBlockParents()` perf. ([48242](https://github.com/WordPress/gutenberg/pull/48242))
+-   Fix perf regression in duotone hooks. ([48401](https://github.com/WordPress/gutenberg/pull/48401))
+-   Writing flow: Avoid recalc style on every selection change. ([48409](https://github.com/WordPress/gutenberg/pull/48409))
+-   useAsyncList: Flush state updates when processing queue. ([48238](https://github.com/WordPress/gutenberg/pull/48238))
+
+#### Components
+
+-   Autocomplete: Reduce work before finding trigger. ([48327](https://github.com/WordPress/gutenberg/pull/48327))
+-   Disable lazy term meta loading render_block_core_template_part. ([48000](https://github.com/WordPress/gutenberg/pull/48000))
+-   Rich text: Only selectively handle keyup/pointerup. ([48385](https://github.com/WordPress/gutenberg/pull/48385))
+-   Rich text: Remove unnecessary handleSelectionChange call. ([48373](https://github.com/WordPress/gutenberg/pull/48373))
+-   Rich text: Try removing store change on focus. ([48342](https://github.com/WordPress/gutenberg/pull/48342))
+-   Autocomplete: Avoid calling setState on input. ([48565](https://github.com/WordPress/gutenberg/pull/48565))
+-   Autocomplete: Don't change state on every keystroke. ([48485](https://github.com/WordPress/gutenberg/pull/48485))
+
+### Code Quality
+
+-   Tag Processor: Make `$html` field `protected`. ([48681](https://github.com/WordPress/gutenberg/pull/48681))
+-   WP_HTML_Tag_Processor: Support tag closer bookmarks. ([48692](https://github.com/WordPress/gutenberg/pull/48692))
+-   Fixed incorrect type annotations in @wordpress/data, part 2. ([48221](https://github.com/WordPress/gutenberg/pull/48221))
+-   Lodash: Refactor away from `_.merge()`. ([48239](https://github.com/WordPress/gutenberg/pull/48239))
+-   Lodash: Remove from integration tests. ([48122](https://github.com/WordPress/gutenberg/pull/48122))
+-   Lodash: Remove remaining `_.get()` from `core-data`. ([48310](https://github.com/WordPress/gutenberg/pull/48310))
+-   Lodash: Remove `_.get()` for post type usages. ([48121](https://github.com/WordPress/gutenberg/pull/48121))
+-   Lodash: Remove remaining `_.get()` from `editor`. ([48314](https://github.com/WordPress/gutenberg/pull/48314))
+-   Lodash: Remove some `_.get()` from editor. ([48104](https://github.com/WordPress/gutenberg/pull/48104))
+-   Lodash: Refactor context system provider away from `_.merge()`. ([48036](https://github.com/WordPress/gutenberg/pull/48036))
+-   Lodash: Remove `_.merge()` from `getMappedColumnWidths()`. ([48032](https://github.com/WordPress/gutenberg/pull/48032))
+-   Lodash: Remove some `_.get()` from Gallery block. ([48488](https://github.com/WordPress/gutenberg/pull/48488))
+-   Lodash: Remove some `_.get()` from Image block. ([48489](https://github.com/WordPress/gutenberg/pull/48489))
+-   Playwright: Fix request utils for non Docker envs. ([48206](https://github.com/WordPress/gutenberg/pull/48206))
+-   [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. ([48352](https://github.com/WordPress/gutenberg/pull/48352))
+-   Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302))
+-   Track new front-end metric: LCP-TTFB. ([48288](https://github.com/WordPress/gutenberg/pull/48288))
+
+### Documentation
+
+-   Clarify backport status of `appearance-tools` theme support. ([48622](https://github.com/WordPress/gutenberg/pull/48622))
+-   Docs: Clarify release process for major WP Beta 1. ([48248](https://github.com/WordPress/gutenberg/pull/48248))
+-   Docs: Markdown fix for wp_enqueue_script usage. ([48212](https://github.com/WordPress/gutenberg/pull/48212))
+-   Fix `e2e-test-utils-playwright`'s jsdoc and types. ([48266](https://github.com/WordPress/gutenberg/pull/48266))
+-   Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   Proactively update versions in WordPress ahead of 6.2. ([48145](https://github.com/WordPress/gutenberg/pull/48145))
+-   Update curation document to include theme.json filters. ([48576](https://github.com/WordPress/gutenberg/pull/48576))
+-   Updates to the curating the editor experience to include 6.1 & 6.2 items. ([48294](https://github.com/WordPress/gutenberg/pull/48294))
+
+### Tools
+
+#### Testing
+
+-   Migrate `switch-to-draft` to Playwright. ([48120](https://github.com/WordPress/gutenberg/pull/48120))
+-   VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. ([48260](https://github.com/WordPress/gutenberg/pull/48260))
+-   Update end-to-end test snapshots to Jest 29 default. ([48626](https://github.com/WordPress/gutenberg/pull/48626))
+-   Update snapshot format to Jest 29 default. ([48366](https://github.com/WordPress/gutenberg/pull/48366))
+-   Move react-native-editor parser tests to a test directory. ([48615](https://github.com/WordPress/gutenberg/pull/48615))
+-   `ToolsPanel`: Refactor unit tests to TypeScript. ([48275](https://github.com/WordPress/gutenberg/pull/48275))
+-   Migrate block deletion end-to-end tests to Playwright. ([48012](https://github.com/WordPress/gutenberg/pull/48012))
+-   Migrate list view end-to-end tests to Playwright. ([47919](https://github.com/WordPress/gutenberg/pull/47919))
+-   Navigation block: End-to-end code quality fixes. ([48071](https://github.com/WordPress/gutenberg/pull/48071))
+-   Remove old end-to-end tests for the navigation block. ([48126](https://github.com/WordPress/gutenberg/pull/48126))
+-   Update assertion Autocomplete end-to-end tests. ([48344](https://github.com/WordPress/gutenberg/pull/48344))
+-   [Automated Testing]: Fix wrong button fixture. ([48305](https://github.com/WordPress/gutenberg/pull/48305))
+-   Add typescript-eslint rules with type informations to end-to-end tests. ([48267](https://github.com/WordPress/gutenberg/pull/48267))
+-   Fix snapshots for Spacer mobile unit tests. ([48406](https://github.com/WordPress/gutenberg/pull/48406))
+-   Add command to run performance tests in debug mode. ([48614](https://github.com/WordPress/gutenberg/pull/48614))
+-   Make the performance tests more stable. ([48094](https://github.com/WordPress/gutenberg/pull/48094))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @abhi3315: Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   @hbhalodia: Update: Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   @sboerrigter: Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+-   @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   @tomdevisser: Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @abhi3315 @adamziel @afercia @alexstine @andrewserong @annezazu @brookewp @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fluiddot @geriux @getdave @gvgvgvijayan @gziolo @hbhalodia @jorgefilipecosta @jsnajdr @kevin940726 @MaggieCabrera @Mamaduka @marekdedic @ndiego @ntsekouras @oandregal @ockham @richtabor @sboerrigter @scruffian @shreyasikhar @spacedmonkey @suvrodattamitu @t-hamano @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad
+
+= 15.2.4 =
+
+## Changelog
+
+### Bug Fixes
+
+-   [post-excerpt][15.2.3] Fix the "is rest api?" condition in the `post-excerpt` PHP package entry point. ([48654](https://github.com/WordPress/gutenberg/pull/48654))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@fullofcaffeine
+
+= 15.3.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+-   Duotone: Use the style engine to generate CSS for Duotone. ([48281](https://github.com/WordPress/gutenberg/pull/48281))
+
+#### Block Library
+
+-   Adds all allowed innerblocks to the inspector animation experiment. ([47834](https://github.com/WordPress/gutenberg/pull/47834))
+-   Make the Site Logo block placeholder state smaller. ([48218](https://github.com/WordPress/gutenberg/pull/48218))
+-   ToggleControl: Remove margin overrides and add opt-in prop. ([47866](https://github.com/WordPress/gutenberg/pull/47866))
+-   [Post Terms]: Add transforms for variations. ([48328](https://github.com/WordPress/gutenberg/pull/48328))
+
+#### Site Editor
+
+-   Refactor the site editor URLs for better backward compatibility. ([48063](https://github.com/WordPress/gutenberg/pull/48063))
+-   Remove TemplateAreas from template details. ([48490](https://github.com/WordPress/gutenberg/pull/48490))
+-   Update the edit button. ([48584](https://github.com/WordPress/gutenberg/pull/48584))
+
+#### Components
+
+-   TabPanel: Refactor unit tests in prep for controlled component updates. ([48086](https://github.com/WordPress/gutenberg/pull/48086))
+-   VizReg end-to-end tests: Programmatically test all combinations of a given list of props/values. ([48260](https://github.com/WordPress/gutenberg/pull/48260))
+
+#### Design Tools
+
+-   Border Panel: Add missing dep for `onBorderChange` callback. ([48010](https://github.com/WordPress/gutenberg/pull/48010))
+
+#### Block Editor
+
+-   Apply keyboard shortcut conversions between paragraphs and headings to all editor instances. ([47972](https://github.com/WordPress/gutenberg/pull/47972))
+
+#### List View
+
+-   Scroll selected block into view when single block selection changes. ([46895](https://github.com/WordPress/gutenberg/pull/46895))
+
+### Bug Fixes
+
+-   Firefox: Fix input rules (React async state issue). ([48210](https://github.com/WordPress/gutenberg/pull/48210))
+-   Fix Reset All button in the typography panel of the block inspector. ([48123](https://github.com/WordPress/gutenberg/pull/48123))
+-   Fix block style preview flickering when a 'style' is focused. ([48418](https://github.com/WordPress/gutenberg/pull/48418))
+-   Fix snapshots for Spacer mobile unit tests. ([48406](https://github.com/WordPress/gutenberg/pull/48406))
+-   Fix: Add missing code on the fix page list loading PR. ([48621](https://github.com/WordPress/gutenberg/pull/48621))
+-   Fix: Content only CPT template locking. ([48434](https://github.com/WordPress/gutenberg/pull/48434))
+-   Fix: Inserter does not appear on sidebar navigation. ([48623](https://github.com/WordPress/gutenberg/pull/48623))
+-   Fix: Make navigation page list load its items on navigation sidebar. ([47853](https://github.com/WordPress/gutenberg/pull/47853))
+-   Fix: Multiple overwrites on rest_controller_class for wp_template/wp_template_part. ([48078](https://github.com/WordPress/gutenberg/pull/48078))
+-   Playwright: Fix request utils for non Docker envs. ([48206](https://github.com/WordPress/gutenberg/pull/48206))
+-   Remove broken site editor redirect. ([48283](https://github.com/WordPress/gutenberg/pull/48283))
+-   Try to fix a11y test flakiness. ([48236](https://github.com/WordPress/gutenberg/pull/48236))
+-   [Private APIs] Only prevent module re-registration if IS_WORDPRESS_CORE. ([48352](https://github.com/WordPress/gutenberg/pull/48352))
+-   fix: Enable access to block settings within UBE. ([48435](https://github.com/WordPress/gutenberg/pull/48435))
+
+#### Site Editor
+
+-   Fix Site Editor perf tests. ([48240](https://github.com/WordPress/gutenberg/pull/48240))
+-   Fix routing for Classic themes using block-based template parts. ([48343](https://github.com/WordPress/gutenberg/pull/48343))
+-   Fix the 'Browse all' link in the template details modal. ([48301](https://github.com/WordPress/gutenberg/pull/48301))
+-   Fix the site editor home page loading when installed in a subdirectory. ([48363](https://github.com/WordPress/gutenberg/pull/48363))
+-   Fix the tooltip and shortcut for the global save button. ([48282](https://github.com/WordPress/gutenberg/pull/48282))
+-   Prevent distracting focused back button on site editor load. ([48472](https://github.com/WordPress/gutenberg/pull/48472))
+-   Sort templates and template parts by slug. ([48473](https://github.com/WordPress/gutenberg/pull/48473))
+-   Specify focus state color for template navigation button. ([48134](https://github.com/WordPress/gutenberg/pull/48134))
+-   [Site Editor]: Set `html` block as freeform fallback block. ([48129](https://github.com/WordPress/gutenberg/pull/48129))
+
+#### Block Library
+
+-   Add support for orientation-based block movers to core/social-links. ([48452](https://github.com/WordPress/gutenberg/pull/48452))
+-   Fix Post Excerpt: Read more link is always on new line in the editor. ([47772](https://github.com/WordPress/gutenberg/pull/47772))
+-   Fix: OffCanvasEditor does not inserts submenu on collapsed items. ([48214](https://github.com/WordPress/gutenberg/pull/48214))
+-   List Item: Avoid an error when the 'onReplace' prop is undefined. ([48639](https://github.com/WordPress/gutenberg/pull/48639))
+-   Prevent text decoration from showing up in all blocks. ([48117](https://github.com/WordPress/gutenberg/pull/48117))
+-   Widget Importer: Don't render controls when there's nothing to import. ([48396](https://github.com/WordPress/gutenberg/pull/48396))
+-   [Query Loop] Fix top border in pattern selection modal. ([48303](https://github.com/WordPress/gutenberg/pull/48303))
+
+#### Accessibility
+
+-   Autocomplete: Duplicate list within iframe for non visual users. ([47907](https://github.com/WordPress/gutenberg/pull/47907))
+-   Fix site editor switch mode message. ([48136](https://github.com/WordPress/gutenberg/pull/48136))
+-   Fix the Publish region position and focus style. ([48102](https://github.com/WordPress/gutenberg/pull/48102))
+-   Focus 1st parent block on block remove, if no previous block is available. ([48204](https://github.com/WordPress/gutenberg/pull/48204))
+-   List view: Allow selected block to override roving tabindex. ([48339](https://github.com/WordPress/gutenberg/pull/48339))
+-   Style Book: Allow button text labels for style book icon. ([48088](https://github.com/WordPress/gutenberg/pull/48088))
+-   Style Book: Focus the Style Book when opened, and enable ESCAPE key to close. ([48151](https://github.com/WordPress/gutenberg/pull/48151))
+
+#### Global Styles
+
+-   Fix for `WP_Theme_JSON_Resolver_Gutenberg::Get_merged_data`. ([48644](https://github.com/WordPress/gutenberg/pull/48644))
+-   Display preset names via the tooltip. ([48304](https://github.com/WordPress/gutenberg/pull/48304))
+-   Fix typo in valid settings for fluid typography. ([48605](https://github.com/WordPress/gutenberg/pull/48605))
+-   Prevent the global styles previews thumbnails from resizing on load. ([48474](https://github.com/WordPress/gutenberg/pull/48474))
+-   Site Tagline: Add example so that it will display in style book. ([48300](https://github.com/WordPress/gutenberg/pull/48300))
+
+#### Block Editor
+
+-   MediaReplaceFlow: Fix styling for LinkControl. ([47949](https://github.com/WordPress/gutenberg/pull/47949))
+-   [Inserter - Media tab]: Upload Openverse images when inserted. ([48501](https://github.com/WordPress/gutenberg/pull/48501))
+
+#### Block Validation/Deprecation
+
+-   Only add layout classes to inner wrapper if block is a container. ([48611](https://github.com/WordPress/gutenberg/pull/48611))
+
+#### Testing
+
+-   Add typescript-eslint rules with type informations to end-to-end tests. ([48267](https://github.com/WordPress/gutenberg/pull/48267))
+
+#### Widgets Editor
+
+-   Widget Editor: Fix a problem with 'Move to Widget Area' button not working. ([48233](https://github.com/WordPress/gutenberg/pull/48233))
+
+#### Post Editor
+
+-   [Editor]: Select blocks in `outline` list. ([48118](https://github.com/WordPress/gutenberg/pull/48118))
+
+### Performance
+
+-   Autocomplete: Reduce work before finding trigger. ([48327](https://github.com/WordPress/gutenberg/pull/48327))
+-   Block Editor: Improve empty `getBlockParents()` perf. ([48242](https://github.com/WordPress/gutenberg/pull/48242))
+-   Disable lazy term meta loading render_block_core_template_part. ([48000](https://github.com/WordPress/gutenberg/pull/48000))
+-   Fix perf regression in duotone hooks. ([48401](https://github.com/WordPress/gutenberg/pull/48401))
+-   Lodash: Refactor away from `_.merge()`. ([48239](https://github.com/WordPress/gutenberg/pull/48239))
+-   Lodash: Remove from integration tests. ([48122](https://github.com/WordPress/gutenberg/pull/48122))
+-   Lodash: Remove remaining `_.get()` from `core-data`. ([48310](https://github.com/WordPress/gutenberg/pull/48310))
+-   Rich text: Only selectively handle keyup/pointerup. ([48385](https://github.com/WordPress/gutenberg/pull/48385))
+-   Rich text: Remove unnecessary handleSelectionChange call. ([48373](https://github.com/WordPress/gutenberg/pull/48373))
+-   Rich text: Try removing store change on focus. ([48342](https://github.com/WordPress/gutenberg/pull/48342))
+-   Writing flow: Avoid recalc style on every selection change. ([48409](https://github.com/WordPress/gutenberg/pull/48409))
+
+#### Components
+
+-   Autocomplete: Avoid calling setState on input. ([48565](https://github.com/WordPress/gutenberg/pull/48565))
+-   Autocomplete: Don't change state on every keystroke. ([48485](https://github.com/WordPress/gutenberg/pull/48485))
+-   Lodash: Refactor context system provider away from `_.merge()`. ([48036](https://github.com/WordPress/gutenberg/pull/48036))
+
+#### Block Library
+
+-   Lodash: Remove `_.merge()` from `getMappedColumnWidths()`. ([48032](https://github.com/WordPress/gutenberg/pull/48032))
+-   Lodash: Remove some `_.get()` from Gallery block. ([48488](https://github.com/WordPress/gutenberg/pull/48488))
+-   Lodash: Remove some `_.get()` from Image block. ([48489](https://github.com/WordPress/gutenberg/pull/48489))
+
+#### Post Editor
+
+-   Lodash: Remove `_.get()` for post type usages. ([48121](https://github.com/WordPress/gutenberg/pull/48121))
+-   Lodash: Remove remaining `_.get()` from `editor`. ([48314](https://github.com/WordPress/gutenberg/pull/48314))
+-   Lodash: Remove some `_.get()` from editor. ([48104](https://github.com/WordPress/gutenberg/pull/48104))
+
+### Experiments
+
+#### Block API
+
+-   Tag Processor: Add bookmark invalidation logic. ([47559](https://github.com/WordPress/gutenberg/pull/47559))
+
+### Documentation
+
+-   Clarify backport status of `appearance-tools` theme support. ([48622](https://github.com/WordPress/gutenberg/pull/48622))
+-   Docs: Clarify release process for major WP Beta 1. ([48248](https://github.com/WordPress/gutenberg/pull/48248))
+-   Docs: Markdown fix for wp_enqueue_script usage. ([48212](https://github.com/WordPress/gutenberg/pull/48212))
+-   Fix `e2e-test-utils-playwright`'s jsdoc and types. ([48266](https://github.com/WordPress/gutenberg/pull/48266))
+-   Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   Proactively update versions in WordPress ahead of 6.2. ([48145](https://github.com/WordPress/gutenberg/pull/48145))
+-   Update curation document to include theme.json filters. ([48576](https://github.com/WordPress/gutenberg/pull/48576))
+-   Updates to the curating the editor experience to include 6.1 & 6.2 items. ([48294](https://github.com/WordPress/gutenberg/pull/48294))
+
+### Code Quality
+
+-   Style Engine: Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   ToolsPanel: Remove unnecessary dep from resetAll callback. ([48011](https://github.com/WordPress/gutenberg/pull/48011))
+-   Update code position for constants and methods in `WP_Theme_JSON_Gutenberg` class. ([48631](https://github.com/WordPress/gutenberg/pull/48631))
+-   `WP_Theme_JSON_Gutenberg`: Update comments to be aligned with core, so backports are easier. ([48624](https://github.com/WordPress/gutenberg/pull/48624))
+
+#### Global Styles
+
+-   Extract a DimensionsPanel component as a reusable component between Global Styles and Block Inspector. ([48070](https://github.com/WordPress/gutenberg/pull/48070))
+-   Revert Site Tagline placeholder attribute, move example to block.json. ([48383](https://github.com/WordPress/gutenberg/pull/48383))
+
+#### Components
+
+-   CircularOptionPicker: Refactor to TypeScript. ([47937](https://github.com/WordPress/gutenberg/pull/47937))
+-   `ToolsPanel`: Refactor unit tests to TypeScript. ([48275](https://github.com/WordPress/gutenberg/pull/48275))
+
+#### Block Library
+
+-   Classic Block: Replace the deprecated `isPrimary` prop with `variant`. ([48230](https://github.com/WordPress/gutenberg/pull/48230))
+-   Refactor core blocks to use HTML Tag Processor. ([43178](https://github.com/WordPress/gutenberg/pull/43178))
+
+#### Post Editor
+
+-   PageAttributesCheck: Return boolean value directly from the selector. ([48336](https://github.com/WordPress/gutenberg/pull/48336))
+
+#### Rich Text
+
+-   Extract delete handler to hook. ([48273](https://github.com/WordPress/gutenberg/pull/48273))
+
+#### Data Layer
+
+-   Fixed incorrect type annotations in @wordpress/data, part 2. ([48221](https://github.com/WordPress/gutenberg/pull/48221))
+
+#### Design Tools
+
+-   Avatar: Clean up border application in editor. ([48024](https://github.com/WordPress/gutenberg/pull/48024))
+
+### Tools
+
+#### Testing
+
+-   Migrate `switch-to-draft` to Playwright. ([48120](https://github.com/WordPress/gutenberg/pull/48120))
+-   Migrate block deletion end-to-end tests to Playwright. ([48012](https://github.com/WordPress/gutenberg/pull/48012))
+-   Migrate list view end-to-end tests to Playwright. ([47919](https://github.com/WordPress/gutenberg/pull/47919))
+-   Navigation block: End-to-end code quality fixes. ([48071](https://github.com/WordPress/gutenberg/pull/48071))
+-   Remove old end-to-end tests for the navigation block. ([48126](https://github.com/WordPress/gutenberg/pull/48126))
+-   Update assertion Autocomplete end-to-end tests. ([48344](https://github.com/WordPress/gutenberg/pull/48344))
+-   [Automated Testing]: Fix wrong button fixture. ([48305](https://github.com/WordPress/gutenberg/pull/48305))
+
+#### Build Tooling
+
+-   Add a manual performance job that we can trigger from GitHub UI. ([48302](https://github.com/WordPress/gutenberg/pull/48302))
+-   Add command to run performance tests in debug mode. ([48614](https://github.com/WordPress/gutenberg/pull/48614))
+-   Make the performance tests more stable. ([48094](https://github.com/WordPress/gutenberg/pull/48094))
+-   SpacingSizesControl: Fix white dot on thumb. ([48574](https://github.com/WordPress/gutenberg/pull/48574))
+-   Track new front-end metric: LCP-TTFB. ([48288](https://github.com/WordPress/gutenberg/pull/48288))
+
+### Various
+
+-   Block alignment controls: Don't remount the block when alignments change. ([48209](https://github.com/WordPress/gutenberg/pull/48209))
+-   Block editor: Create automatic change higher order reducer. ([48312](https://github.com/WordPress/gutenberg/pull/48312))
+-   Duotone: Add Global Styles controls for blocks that support duotone. ([48255](https://github.com/WordPress/gutenberg/pull/48255))
+-   Duotone: Use CSS variables instead of slugs in block attributes. ([48426](https://github.com/WordPress/gutenberg/pull/48426))
+-   List block: Add Firefox end-to-end tests. ([48271](https://github.com/WordPress/gutenberg/pull/48271))
+-   Pin `valtio` version. ([48237](https://github.com/WordPress/gutenberg/pull/48237))
+-   Post editor: Revert iframed editor for WP core only. ([48076](https://github.com/WordPress/gutenberg/pull/48076))
+-   Sync `gutenberg_build_query_vars_from_query_block` with core. ([48640](https://github.com/WordPress/gutenberg/pull/48640))
+-   Update end-to-end test snapshots to Jest 29 default. ([48626](https://github.com/WordPress/gutenberg/pull/48626))
+-   Update snapshot format to Jest 29 default. ([48366](https://github.com/WordPress/gutenberg/pull/48366))
+-   Update: Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   Update: Disable layout toolbar controls for content locked blocks. ([47939](https://github.com/WordPress/gutenberg/pull/47939))
+-   Use Duotone presets in block duotone attributes. ([48318](https://github.com/WordPress/gutenberg/pull/48318))
+-   react-native-editor: Move parser tests to a test directory. ([48615](https://github.com/WordPress/gutenberg/pull/48615))
+-   useAsyncList: Flush state updates when processing queue. ([48238](https://github.com/WordPress/gutenberg/pull/48238))
+
+#### Block Library
+
+-   Navigation List View: Add block movers to the more menu. ([48099](https://github.com/WordPress/gutenberg/pull/48099))
+-   Navigation: Always create a fallback menu. ([47684](https://github.com/WordPress/gutenberg/pull/47684))
+-   Navigation: Don't create a fallback navigation menu if there are inner blocks. ([48585](https://github.com/WordPress/gutenberg/pull/48585))
+-   Navigation: Don't create duplicate navigation menus. ([48599](https://github.com/WordPress/gutenberg/pull/48599))
+-   Navigation: Update the dependencies for the useEffect that handles notifications. ([48066](https://github.com/WordPress/gutenberg/pull/48066))
+-   Navigation: Wrap the dependent functions in useCallback. ([48195](https://github.com/WordPress/gutenberg/pull/48195))
+-   Page List: Move the modal to its own file. ([47922](https://github.com/WordPress/gutenberg/pull/47922))
+-   [New Block] Add post time to read block. ([43403](https://github.com/WordPress/gutenberg/pull/43403))
+
+#### Site Editor
+
+-   Change "Browse all templates" to "Manage all templates" in template details popover. ([48496](https://github.com/WordPress/gutenberg/pull/48496))
+-   Match color of the focus template view with site dark material. ([48430](https://github.com/WordPress/gutenberg/pull/48430))
+-   Polish add template modal style. ([48445](https://github.com/WordPress/gutenberg/pull/48445))
+-   Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+
+#### Accessibility
+
+-   Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   Make the template customized info accessible. ([48159](https://github.com/WordPress/gutenberg/pull/48159))
+
+#### Post Editor
+
+-   Apply busy status to the publish button in progress and unify button width. ([48444](https://github.com/WordPress/gutenberg/pull/48444))
+
+#### Components
+
+-   Pin `floating-ui/react-dom` version. ([48402](https://github.com/WordPress/gutenberg/pull/48402))
+
+#### Global Styles
+
+-   Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+#### Reusable Blocks
+
+-   Use React 18 rendering for import dropdown. ([48244](https://github.com/WordPress/gutenberg/pull/48244))
+
+#### Block API
+
+-   HTML Tag Processor: Add WP 6.3 compat layer. ([47933](https://github.com/WordPress/gutenberg/pull/47933))
+
+#### Block Editor
+
+-   [Inserter]: Preload media categories empty check - client side. ([47503](https://github.com/WordPress/gutenberg/pull/47503))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @abhi3315: Link Control - Add support for text only labels. ([47930](https://github.com/WordPress/gutenberg/pull/47930))
+-   @hbhalodia: Update: Change higher order `with-constraint-tabbing` from `.js` to `.tsx`. ([48162](https://github.com/WordPress/gutenberg/pull/48162))
+-   @sboerrigter: Fix incorrect css property in editor-color-palette documentation. ([48333](https://github.com/WordPress/gutenberg/pull/48333))
+-   @shreyasikhar: Site Editor Sidebar: Add line-height for template/parts name and update width for edit button. ([48160](https://github.com/WordPress/gutenberg/pull/48160))
+-   @suvrodattamitu: Style Engine: Fix wrong property name letterSpacing to lineHeight. ([48091](https://github.com/WordPress/gutenberg/pull/48091))
+-   @tomdevisser: Remove copy for managing a block's style variations. ([48367](https://github.com/WordPress/gutenberg/pull/48367))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @abhi3315 @adamziel @afercia @alexstine @andrewserong @annezazu @brookewp @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fluiddot @geriux @getdave @gvgvgvijayan @gziolo @hbhalodia @jorgefilipecosta @jsnajdr @kevin940726 @MaggieCabrera @Mamaduka @marekdedic @ndiego @ntsekouras @oandregal @ockham @richtabor @sboerrigter @scruffian @shreyasikhar @spacedmonkey @suvrodattamitu @t-hamano @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad
+
+= 15.2.3 =
+
+## Changelog
+
+### Bug Fixes
+
+-   useAsyncList: flush state updates when processing queue (https://github.com/WordPress/gutenberg/pull/48238).
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@jsnajdr
+
+= 15.2.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Layout
+
+-   Post Editor: Update postContentBlock check to see if the block is valid. ([48386](https://github.com/WordPress/gutenberg/pull/48386))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@andrewserong
+
+= 15.2.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   Skip redundant registration for Fonts API-registered fonts. ([48341](https://github.com/WordPress/gutenberg/pull/48341))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@ironprogrammer
+
+= 15.2.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Working with Templates
+
+-   Add a nested level when selecting templates or template parts. ([47777](https://github.com/WordPress/gutenberg/pull/47777))
+-   Add: Modal to choose a start pattern on new templates. ([46248](https://github.com/WordPress/gutenberg/pull/46248))
+-   Update gutenberg_get_template_hierarchy. ([47716](https://github.com/WordPress/gutenberg/pull/47716))
+-   Add template revision button. ([45215](https://github.com/WordPress/gutenberg/pull/45215))
+
+#### Site Editor
+
+-   Add back link to Design heading in site editor navigation to return to Dashboard. ([47950](https://github.com/WordPress/gutenberg/pull/47950))
+-   Adds a global save button to the site editor. ([47142](https://github.com/WordPress/gutenberg/pull/47142))
+-   Tidy up the generation of the site editor page title. ([48053](https://github.com/WordPress/gutenberg/pull/48053))
+
+#### Block Library
+
+-   Button: Update: Make button a content block. ([47936](https://github.com/WordPress/gutenberg/pull/47936))
+-   File block: Add color block support to File block. ([41870](https://github.com/WordPress/gutenberg/pull/41870))
+-   Navigation: Add integration tests for NavigationMenuSelector component. ([47825](https://github.com/WordPress/gutenberg/pull/47825))
+-   Navigation: Updates "Add Submenu item" text to "Add Submenu link". ([48030](https://github.com/WordPress/gutenberg/pull/48030))
+-   Post excerpt: Add excerpt length control. ([44964](https://github.com/WordPress/gutenberg/pull/44964))
+-   Update: Make OffCanvasEditor use LeafMoreMenu by default. ([47844](https://github.com/WordPress/gutenberg/pull/47844))
+-   Add aspect-ratio to post featured image block. ([47854](https://github.com/WordPress/gutenberg/pull/47854))
+-   Button: Adopt support for border color, style, and width. ([44574](https://github.com/WordPress/gutenberg/pull/44574))
+-   Latest Comments: Add typography support. ([43310](https://github.com/WordPress/gutenberg/pull/43310))
+-   Verse: Adopt border supports. ([48021](https://github.com/WordPress/gutenberg/pull/48021))
+
+#### Global Styles
+
+-   Extract the Global Styles Typography Panel into block-editor package. ([47356](https://github.com/WordPress/gutenberg/pull/47356))
+-   Move more link about custom CSS to part of description. ([47781](https://github.com/WordPress/gutenberg/pull/47781))
+-   Site Editor: Update 'Additional CSS' subtitle string. ([47671](https://github.com/WordPress/gutenberg/pull/47671))
+-   Style Book: Exclude blocks that are not allowed to insert. ([47461](https://github.com/WordPress/gutenberg/pull/47461))
+
+#### Block Editor
+
+-   Migrate from TextControl to NumberControl to remove margin overrides. ([47160](https://github.com/WordPress/gutenberg/pull/47160))
+-   Add settings "drawer" to Link Control. ([47328](https://github.com/WordPress/gutenberg/pull/47328))
+-   Button: Prepend HTTP to Buttons block links when missing protocol. ([47311](https://github.com/WordPress/gutenberg/pull/47311))
+-   Show a pointer/hint in the settings tab informing the user about the styles tab. ([47670](https://github.com/WordPress/gutenberg/pull/47670))
+-   [Patterns]: Reorder pattern categories. ([47760](https://github.com/WordPress/gutenberg/pull/47760))
+
+#### Components
+
+-   Add parent navigation support for the navigator component. ([47883](https://github.com/WordPress/gutenberg/pull/47883))
+-   Zoom out mode: Scale iframe instead of contents. ([47004](https://github.com/WordPress/gutenberg/pull/47004))
+-   Components: Add support for named arguments in the navigator components. ([47827](https://github.com/WordPress/gutenberg/pull/47827))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Embed: Fix: Remove browser default border for iframe in the editor. ([47987](https://github.com/WordPress/gutenberg/pull/47987))
+-   File block: Re-add editor styles for classic themes. ([47686](https://github.com/WordPress/gutenberg/pull/47686))
+-   Image: Revert "Prevent the image from being resized larger than its container". ([47846](https://github.com/WordPress/gutenberg/pull/47846))
+-   Image: Update image block margins on RTL. ([47617](https://github.com/WordPress/gutenberg/pull/47617))
+-   Navigation Block inspector: Fix link UI popover opening on links that have a URL. ([47828](https://github.com/WordPress/gutenberg/pull/47828))
+-   Navigation: Close Link UI if cancelled. ([48029](https://github.com/WordPress/gutenberg/pull/48029))
+-   Navigation: Enable undo after creating a new menu. ([47683](https://github.com/WordPress/gutenberg/pull/47683))
+-   Navigation: Fixes undo and redo for nesting operations in the navigation block's inspector. ([47633](https://github.com/WordPress/gutenberg/pull/47633))
+-   Navigation: Remove the IS_GUTENBERG_PLUGIN check around block_core_navigation_parse_blocks_from_menu_items. ([47824](https://github.com/WordPress/gutenberg/pull/47824))
+-   Navigation: Update deps for the useEffect that creates navigation menus. ([47912](https://github.com/WordPress/gutenberg/pull/47912))
+-   OffCanvasEditor: Only allow some blocks to be converted to submenus. ([47974](https://github.com/WordPress/gutenberg/pull/47974))
+-   Page List: Respect the selected parent page when converting to a list of navigation links. ([47651](https://github.com/WordPress/gutenberg/pull/47651))
+-   Read More: I18N: Update string concatenation method in read more block. ([47815](https://github.com/WordPress/gutenberg/pull/47815))
+-   ToolsPanel: Display optional items when values are updated externally. ([47727](https://github.com/WordPress/gutenberg/pull/47727))
+-   [Quote]: Fix deprectated large style specificity rule. ([47969](https://github.com/WordPress/gutenberg/pull/47969))
+-   Fix the 'WP_HTML_Tag_Processor' file path. ([47823](https://github.com/WordPress/gutenberg/pull/47823))
+-   Cover: Ensure url is not malformed due to sanitization through wp_kses. ([47906](https://github.com/WordPress/gutenberg/pull/47906))
+
+#### Site Editor
+
+-   [Block Editor]: Lock blockInspectorAnimation setting. ([47740](https://github.com/WordPress/gutenberg/pull/47740))
+-   Disable Strict Mode, breaks dev site editor. ([47701](https://github.com/WordPress/gutenberg/pull/47701))
+-   Add: Modal to choose a start pattern on new templates. Take 2. ([47927](https://github.com/WordPress/gutenberg/pull/47927))
+-   Fix ComplementaryArea's initial isActive state. ([47498](https://github.com/WordPress/gutenberg/pull/47498))
+-   Fix custom Template Parts rename action. ([47932](https://github.com/WordPress/gutenberg/pull/47932))
+-   Fix site editor navigation. ([48025](https://github.com/WordPress/gutenberg/pull/48025))
+-   Shadow: Move shadow into own panel. ([47634](https://github.com/WordPress/gutenberg/pull/47634))
+-   Specify active state color for template navigation button. ([47851](https://github.com/WordPress/gutenberg/pull/47851))
+
+#### Block Editor
+
+-   useBlockSync: Change subscribed.current on unsubscribe. ([47752](https://github.com/WordPress/gutenberg/pull/47752))
+-   Edit Post: Fix the 'inlineToolbar' settings toggle. ([47960](https://github.com/WordPress/gutenberg/pull/47960))
+-   Fix clicking on the toggle button not closing the block inserter. ([47926](https://github.com/WordPress/gutenberg/pull/47926))
+-   LinkControl: Fix scrollbar displayed on toggle link settings. ([47986](https://github.com/WordPress/gutenberg/pull/47986))
+-   Rich text: Stabilise onFocus. ([47685](https://github.com/WordPress/gutenberg/pull/47685))
+-   Block Spacing: Don't show UI when only one direction is supported. ([47523](https://github.com/WordPress/gutenberg/pull/47523))
+-   [Layout]: Fix align controls for hybrid themes. ([47961](https://github.com/WordPress/gutenberg/pull/47961))
+
+#### Design Tools
+
+-   Avatar: Fix application of borders. ([47630](https://github.com/WordPress/gutenberg/pull/47630))
+-   Image: Allow deprecated blocks to render border-radius. ([47766](https://github.com/WordPress/gutenberg/pull/47766))
+-   ToolsPanel: Ensure display of optional items when panel id is null. ([47864](https://github.com/WordPress/gutenberg/pull/47864))
+
+#### Global Styles
+
+-   Fix incorrect targeting of block wrappers for root padding in the edi…. ([48002](https://github.com/WordPress/gutenberg/pull/48002))
+-   Fix infinite render of inline block preview. ([47697](https://github.com/WordPress/gutenberg/pull/47697))
+-   Fix: Issues on block level settings. ([47842](https://github.com/WordPress/gutenberg/pull/47842))
+
+#### Components
+
+-   ColorPalette: Ensure text label contrast checking works with CSS variables. ([47373](https://github.com/WordPress/gutenberg/pull/47373))
+-   SelectControl: Fix multiple prop styling. ([47893](https://github.com/WordPress/gutenberg/pull/47893))
+
+#### Post Editor
+
+-   Fix multi entities saved state in the post editor. ([47734](https://github.com/WordPress/gutenberg/pull/47734))
+-   LocalAutosaveNotice: Use stable notice id to prevent double notices. ([47776](https://github.com/WordPress/gutenberg/pull/47776))
+-   Distraction free mode: Fix keyboard shortcut not working. ([47900](https://github.com/WordPress/gutenberg/pull/47900))
+-   Term sorting is incorrect in flat term selector. ([47795](https://github.com/WordPress/gutenberg/pull/47795))
+-   useResizeObserver: Handle strict mode double effects. ([47703](https://github.com/WordPress/gutenberg/pull/47703))
+
+### Accessibility
+
+-   List view: Modify the shortcut to focus while open. ([45135](https://github.com/WordPress/gutenberg/pull/45135))
+-   Add an aria label to the site save dialog. ([47898](https://github.com/WordPress/gutenberg/pull/47898))
+-   Fix UrlInput combobox to use the ARIA 1.0 pattern. ([47148](https://github.com/WordPress/gutenberg/pull/47148))
+-   Fix constrained tabbing failures with Safari and Firefox. ([47426](https://github.com/WordPress/gutenberg/pull/47426))
+-   Fix the headings hierarchy in the styles sidebar. ([43848](https://github.com/WordPress/gutenberg/pull/43848))
+-   Site Editor: Append template type and name to the site editor page title. ([47855](https://github.com/WordPress/gutenberg/pull/47855))
+-   Template editor: Only disable the save button if no changes rather than hiding it. ([47895](https://github.com/WordPress/gutenberg/pull/47895))
+
+### Performance
+
+-   Avoid string-allocation on keypress with inputRule. ([47094](https://github.com/WordPress/gutenberg/pull/47094))
+-   Fix empty results handling in performance test results. ([47646](https://github.com/WordPress/gutenberg/pull/47646))
+-   Fix typo in performance script name. ([47647](https://github.com/WordPress/gutenberg/pull/47647))
+-   Lodash: Remove from @wordpress/keycodes package. ([47737](https://github.com/WordPress/gutenberg/pull/47737))
+
+#### Block Editor
+
+-   Block Editor: Optimize \_\_unstableGetVisibleBlocks(). ([47681](https://github.com/WordPress/gutenberg/pull/47681))
+
+#### Site Editor
+
+-   Enable React StrictMode again. ([47639](https://github.com/WordPress/gutenberg/pull/47639))
+
+#### Block Library
+
+-   Navigation: Performance: Improve params in block_core_navigation_get_most_recently_published_navigation. ([47998](https://github.com/WordPress/gutenberg/pull/47998))
+-   Page List: Block improvement.. ([47981](https://github.com/WordPress/gutenberg/pull/47981))
+-   Page List: Performance: Improve page list callback. ([48004](https://github.com/WordPress/gutenberg/pull/48004))
+-   Post Title: Performance: Render_block_core_post_title - Use post object instead of id. ([48001](https://github.com/WordPress/gutenberg/pull/48001))
+-   Template Part: Performance: Replace usage of wp_get_theme()->get_stylesheet() with get_stylesheet(). ([48027](https://github.com/WordPress/gutenberg/pull/48027))
+-   Tweaks to gutenberg_render_layout_support_flag. ([48003](https://github.com/WordPress/gutenberg/pull/48003))
+
+#### Data Layer
+
+-   Lodash: Refactor away from \_.get() in resolvers cache middleware. ([47743](https://github.com/WordPress/gutenberg/pull/47743))
+-   Lodash: Refactor away from \_.mapValues() in data registry. ([47742](https://github.com/WordPress/gutenberg/pull/47742))
+-   Lodash: Refactor persistence plugin away from \_.merge(). ([47790](https://github.com/WordPress/gutenberg/pull/47790))
+-   Lodash: Remove from @wordpress/data's getResolutionState(). ([47838](https://github.com/WordPress/gutenberg/pull/47838))
+-   Lodash: Remove from @wordpress/data. ([47848](https://github.com/WordPress/gutenberg/pull/47848))
+-   Lodash: Remove from useDispatchWithMap(). ([47835](https://github.com/WordPress/gutenberg/pull/47835))
+
+#### Template Editor
+
+-   Disable lazy loading term meta get_block_templates. ([47999](https://github.com/WordPress/gutenberg/pull/47999))
+
+#### Themes
+
+-   Improvements on append_to_selector method. ([47833](https://github.com/WordPress/gutenberg/pull/47833))
+
+#### Block Directory
+
+-   Optimize DownloadableBlocksPanel. ([47679](https://github.com/WordPress/gutenberg/pull/47679))
+
+### Experiments
+
+-   Handle block metadata attribute and related experimental APIs. ([47791](https://github.com/WordPress/gutenberg/pull/47791))
+-   Rename the "experiments" export to "privateApis". ([47975](https://github.com/WordPress/gutenberg/pull/47975))
+-   [Trunk] Rename experiments package to private-apis. ([47839](https://github.com/WordPress/gutenberg/pull/47839))
+
+### Documentation
+
+-   Add: Database credentials to wp-env documentation. ([47940](https://github.com/WordPress/gutenberg/pull/47940))
+-   Block schema and block supports docs: Add dimensions and position settings. ([48057](https://github.com/WordPress/gutenberg/pull/48057))
+-   Components: Polish heading level component APIs. ([47788](https://github.com/WordPress/gutenberg/pull/47788))
+-   Docs: Add ancestor property to block-registration.md doc. ([45832](https://github.com/WordPress/gutenberg/pull/45832))
+-   Docs: Don't recommend using short array syntax in WP_HTML_Tag_Processor. ([47958](https://github.com/WordPress/gutenberg/pull/47958))
+-   Docs: Fix the incorrect link to eslint-plugin-jsx-a11y. ([47773](https://github.com/WordPress/gutenberg/pull/47773))
+-   Fix unbalanced parenthesis in Element README. ([47700](https://github.com/WordPress/gutenberg/pull/47700))
+-   Minor updates in Private APIs. ([47953](https://github.com/WordPress/gutenberg/pull/47953))
+-   Set block attributes to require either type or enum. ([45365](https://github.com/WordPress/gutenberg/pull/45365))
+
+### Code Quality
+
+-   Core Data: Fix ESLint warnings for the hooks directory. ([47811](https://github.com/WordPress/gutenberg/pull/47811))
+-   ESLint: Change jsdoc/check-line-alignment from warn to error. ([47878](https://github.com/WordPress/gutenberg/pull/47878))
+-   ESLint: Fix a bunch of ESLint alignment warnings. ([47872](https://github.com/WordPress/gutenberg/pull/47872))
+-   Enable react-hooks/exhaustive-deps eslint rules. ([24914](https://github.com/WordPress/gutenberg/pull/24914))
+-   Update moment and moment-timezone packages to fix timezone issues. ([47879](https://github.com/WordPress/gutenberg/pull/47879))
+
+#### Components
+
+-   AnglePickerControl: Refactor to TypeScript. ([45820](https://github.com/WordPress/gutenberg/pull/45820))
+-   BorderBoxControl: Migrate tests to TypeScript, remove act() call. ([47755](https://github.com/WordPress/gutenberg/pull/47755))
+-   BoxControl: Convert to TypeScript. ([47622](https://github.com/WordPress/gutenberg/pull/47622))
+-   ComboboxControl: Convert to TypeScript. ([47581](https://github.com/WordPress/gutenberg/pull/47581))
+-   CustomSelectControl: Privatise \_\_experimentalShowSelectedHint using @wordpress/experiments. ([47229](https://github.com/WordPress/gutenberg/pull/47229))
+-   CustomSelectControl: Update size prop options to new format in Storybook examples. ([47779](https://github.com/WordPress/gutenberg/pull/47779))
+-   Navigator: Add more pattern matching tests, refine existing tests. ([47910](https://github.com/WordPress/gutenberg/pull/47910))
+-   NavigatorButton: Reuse Button types. ([47754](https://github.com/WordPress/gutenberg/pull/47754))
+-   Panel: Convert to TypeScript. ([47259](https://github.com/WordPress/gutenberg/pull/47259))
+-   Popover: Lock the \_\_experimentalPopoverPositionToPlacement function. ([47505](https://github.com/WordPress/gutenberg/pull/47505))
+-   Refactor Toolbar component to TypeScript. ([47087](https://github.com/WordPress/gutenberg/pull/47087))
+-   Remove BaseField component. ([47911](https://github.com/WordPress/gutenberg/pull/47911))
+-   Remove unnecessary act() from Button tests. ([47687](https://github.com/WordPress/gutenberg/pull/47687))
+-   Remove unnecessary act() from DropdownMenu tests. ([47692](https://github.com/WordPress/gutenberg/pull/47692))
+-   Remove unnecessary act() from Popover tests. ([47690](https://github.com/WordPress/gutenberg/pull/47690))
+-   Remove unnecessary act() from ToolsPanel tests. ([47691](https://github.com/WordPress/gutenberg/pull/47691))
+-   ResizableBox: Refactor styles to TypeScript. ([47756](https://github.com/WordPress/gutenberg/pull/47756))
+-   TreeGrid: Convert to TypeScript. ([47516](https://github.com/WordPress/gutenberg/pull/47516))
+-   MenuItemsChoice: Refactor to TypeScript. ([47180](https://github.com/WordPress/gutenberg/pull/47180))
+-   ToolsPanel: Refactor Storybook examples to TypeScript, fix types inconsistencies. ([47944](https://github.com/WordPress/gutenberg/pull/47944))
+
+#### Block Library
+
+-   Gallery: Minor code quality update. ([47774](https://github.com/WordPress/gutenberg/pull/47774))
+-   Image: Simplify the method for getting block editor settings. ([47903](https://github.com/WordPress/gutenberg/pull/47903))
+-   Navigation: Chore Remove unexistant parameter from selectNavigationMenus call. ([47941](https://github.com/WordPress/gutenberg/pull/47941))
+-   Site Logo: Simplify the method for getting block editor settings. ([47736](https://github.com/WordPress/gutenberg/pull/47736))
+-   Table Block: Don't render empty section. ([47753](https://github.com/WordPress/gutenberg/pull/47753))
+
+#### Site Editor
+
+-   Make process_blocks_custom_css method protected. ([47725](https://github.com/WordPress/gutenberg/pull/47725))
+-   Move site editor 6.2 specific code to the right file. ([48023](https://github.com/WordPress/gutenberg/pull/48023))
+-   Remove: Unused code from the navigation inspector select logic. ([48044](https://github.com/WordPress/gutenberg/pull/48044))
+-   Sync: Widget import changes from the core. ([47875](https://github.com/WordPress/gutenberg/pull/47875))
+-   Add missing period in keyboard shortcut descriptions. ([47899](https://github.com/WordPress/gutenberg/pull/47899))
+-   Extract the getSupportedStyles selector to the blocks store as a private selector. ([47606](https://github.com/WordPress/gutenberg/pull/47606))
+-   Remove the name and element props from the TypographyPanel component. ([47908](https://github.com/WordPress/gutenberg/pull/47908))
+
+#### Post Editor
+
+-   Edit Post: Remove unnecessary 'classnames' in Header component. ([47635](https://github.com/WordPress/gutenberg/pull/47635))
+
+#### REST API
+
+-   Chore: Move Gutenberg_REST_Templates_Controller from 6.2 to 6.3 compatibility. ([48077](https://github.com/WordPress/gutenberg/pull/48077))
+
+#### Patterns
+
+-   Refactor: usePatternsCategories: Simplify category sorting. ([47843](https://github.com/WordPress/gutenberg/pull/47843))
+
+#### Document Settings
+
+-   Most Used Terms: Pass dependency to the useSelect. ([47810](https://github.com/WordPress/gutenberg/pull/47810))
+
+#### Block API
+
+-   HTML API: Move into 6.2 Compat Folder since inclusion in Core. ([47749](https://github.com/WordPress/gutenberg/pull/47749))
+
+#### Data Layer
+
+-   Fixed incorrect type annotations in @wordpress/data. ([46881](https://github.com/WordPress/gutenberg/pull/46881))
+
+### Tools
+
+#### Testing
+
+-   Add tests for gutenberg_render_layout_support_flag. ([47719](https://github.com/WordPress/gutenberg/pull/47719))
+-   Migrate Heading block tests to Playwright. ([47955](https://github.com/WordPress/gutenberg/pull/47955))
+-   Migrate query test to Playwright. ([47995](https://github.com/WordPress/gutenberg/pull/47995))
+-   Navigation: end-to-end tests: Default to classic menu. ([47867](https://github.com/WordPress/gutenberg/pull/47867))
+-   Navigation: end-to-end tests: Default to my only existing menu. ([47744](https://github.com/WordPress/gutenberg/pull/47744))
+-   Remove obsolete failing test for Font Size Picker. ([47913](https://github.com/WordPress/gutenberg/pull/47913))
+-   Shard playwright tests into two separate jobs using a matrix. ([47629](https://github.com/WordPress/gutenberg/pull/47629))
+-   Update code and tests for theme json class after the back port in core. ([47668](https://github.com/WordPress/gutenberg/pull/47668))
+-   Upgrade Playwright to 1.30.0. ([48007](https://github.com/WordPress/gutenberg/pull/48007))
+-   end-to-end perf tests: Run each test in a separate page. ([47889](https://github.com/WordPress/gutenberg/pull/47889))
+-   Fix editor.getBlocks for unmodified default block. ([48093](https://github.com/WordPress/gutenberg/pull/48093))
+-   Visual Regression tests: Use default playwright utils. ([47991](https://github.com/WordPress/gutenberg/pull/47991))
+-   Navigation: Add warning test. ([45207](https://github.com/WordPress/gutenberg/pull/45207))
+
+#### Build Tooling
+
+-   Add basic tsconfig.json validation. ([47595](https://github.com/WordPress/gutenberg/pull/47595))
+-   Front-end classic performance test: Set TwentyTwentyOne when running in isolation. ([47965](https://github.com/WordPress/gutenberg/pull/47965))
+-   Perf tests: Store test run results as artifact. ([45747](https://github.com/WordPress/gutenberg/pull/45747))
+-   Performance suite: Track Largest Contentful Paint in the front-end. ([47938](https://github.com/WordPress/gutenberg/pull/47938))
+-   Scripts: Add PostCSS (.pcss extension) file support to wp-scripts. ([45352](https://github.com/WordPress/gutenberg/pull/45352))
+-   Performance: Restore initial reduce value in perf results log script. ([47650](https://github.com/WordPress/gutenberg/pull/47650))
+-   Cherry-pick CLI: Fix the default label to match the documentation. ([47832](https://github.com/WordPress/gutenberg/pull/47832))
+-   Scripts: Use start without watcher using --no-watch. ([44237](https://github.com/WordPress/gutenberg/pull/44237))
+-   Fonts API: Add missing files to lib/load.php. ([48108](https://github.com/WordPress/gutenberg/pull/48108))
+-   Dependency Extraction Webpack Plugin: Update json2php dependency. ([47831](https://github.com/WordPress/gutenberg/pull/47831))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @creative-andrew: Add: Database credentials to wp-env documentation. ([47940](https://github.com/WordPress/gutenberg/pull/47940))
+-   @dpellenwood: Scripts: Add PostCSS (.pcss extension) file support to wp-scripts. ([45352](https://github.com/WordPress/gutenberg/pull/45352))
+-   @griffinjohndavid: Set block attributes to require either type or enum. ([45365](https://github.com/WordPress/gutenberg/pull/45365))
+-   @mike-day: Refactor Toolbar component to TypeScript. ([47087](https://github.com/WordPress/gutenberg/pull/47087))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @brookewp @carolinan @ciampo @creative-andrew @d-alleyne @dcalhoun @dmsnell @dpellenwood @draganescu @ellatrix @flootr @fluiddot @georgeh @geriux @getdave @glendaviesnz @griffinjohndavid @gziolo @jhnstn @jorgefilipecosta @jsnajdr @kebbet @kevin940726 @kkmuffme @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mauteri @mcsf @mike-day @mirka @mreishus @nielslange @noahtallen @noisysocks @ntsekouras @oandregal @scruffian @sgomes @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @wojtekn @WunderBart @youknowriad
+
+= 15.1.1 =
+
+## Changelog
+
+### Various
+
+-   Fonts API: Add missing files to lib/load.php. ([48108](https://github.com/WordPress/gutenberg/pull/48108))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@hellofromtonya
+
+= 15.2.0-rc.1 =
+
+## Changelog
+
+### Features
+
+#### Design Tools
+
+-   Add aspect-ratio to post featured image block. ([47854](https://github.com/WordPress/gutenberg/pull/47854))
+
+### Enhancements
+
+#### Site Editor
+
+-   Add a nested level when selecting templates or template parts. ([47777](https://github.com/WordPress/gutenberg/pull/47777))
+-   Add back link to Design heading in site editor navigation to return to Dashboard. ([47950](https://github.com/WordPress/gutenberg/pull/47950))
+-   Add: Modal to choose a start pattern on new templates. ([46248](https://github.com/WordPress/gutenberg/pull/46248))
+-   Adds a global save button to the site editor. ([47142](https://github.com/WordPress/gutenberg/pull/47142))
+-   Tidy up the generation of the site editor page title. ([48053](https://github.com/WordPress/gutenberg/pull/48053))
+-   Update gutenberg_get_template_hierarchy. ([47716](https://github.com/WordPress/gutenberg/pull/47716))
+
+#### Block Library
+
+-   Button: Update: Make button a content block. ([47936](https://github.com/WordPress/gutenberg/pull/47936))
+-   File block: Add color block support to File block. ([41870](https://github.com/WordPress/gutenberg/pull/41870))
+-   Navigation: Add integration tests for NavigationMenuSelector component. ([47825](https://github.com/WordPress/gutenberg/pull/47825))
+-   Navigation: Updates "Add Submenu item" text to "Add Submenu link". ([48030](https://github.com/WordPress/gutenberg/pull/48030))
+-   Post excerpt: Add excerpt length control. ([44964](https://github.com/WordPress/gutenberg/pull/44964))
+-   Update: Make OffCanvasEditor use LeafMoreMenu by default. ([47844](https://github.com/WordPress/gutenberg/pull/47844))
+
+#### Global Styles
+
+-   Extract the Global Styles Typography Panel into block-editor package. ([47356](https://github.com/WordPress/gutenberg/pull/47356))
+-   Move more link about custom CSS to part of description. ([47781](https://github.com/WordPress/gutenberg/pull/47781))
+-   Site Editor: Update 'Additional CSS' subtitle string. ([47671](https://github.com/WordPress/gutenberg/pull/47671))
+-   Style Book: Exclude blocks that are not allowed to insert. ([47461](https://github.com/WordPress/gutenberg/pull/47461))
+
+#### Design Tools
+
+-   Button: Adopt support for border color, style, and width. ([44574](https://github.com/WordPress/gutenberg/pull/44574))
+-   Latest Comments: Add typography support. ([43310](https://github.com/WordPress/gutenberg/pull/43310))
+-   Verse: Adopt border supports. ([48021](https://github.com/WordPress/gutenberg/pull/48021))
+
+#### Block Editor
+
+-   Migrate from TextControl to NumberControl to remove margin overrides. ([47160](https://github.com/WordPress/gutenberg/pull/47160))
+-   Add <LinkControl> code owner. ([47733](https://github.com/WordPress/gutenberg/pull/47733))
+-   Add settings "drawer" to Link Control. ([47328](https://github.com/WordPress/gutenberg/pull/47328))
+-   Button: Prepend HTTP to Buttons block links when missing protocol. ([47311](https://github.com/WordPress/gutenberg/pull/47311))
+-   Show a pointer/hint in the settings tab informing the user about the styles tab. ([47670](https://github.com/WordPress/gutenberg/pull/47670))
+
+#### Components
+
+-   Add parent navigation support for the navigator component. ([47883](https://github.com/WordPress/gutenberg/pull/47883))
+-   Zoom out mode: Scale iframe instead of contents. ([47004](https://github.com/WordPress/gutenberg/pull/47004))
+
+#### Testing
+
+-   end-to-end perf tests: Run each test in a separate page. ([47889](https://github.com/WordPress/gutenberg/pull/47889))
+
+#### Navigation Screen
+
+-   Components: Add support for named arguments in the navigator components. ([47827](https://github.com/WordPress/gutenberg/pull/47827))
+
+#### Document Settings
+
+-   Term sorting is incorrect in flat term selector. ([47795](https://github.com/WordPress/gutenberg/pull/47795))
+
+#### Patterns
+
+-   [Patterns]: Reorder pattern categories. ([47760](https://github.com/WordPress/gutenberg/pull/47760))
+
+#### Block API
+
+-   Set block attributes to require either type or enum. ([45365](https://github.com/WordPress/gutenberg/pull/45365))
+
+#### Inspector Controls
+
+-   Add template revision button. ([45215](https://github.com/WordPress/gutenberg/pull/45215))
+
+#### Accessibility
+
+-   List view: Modify the shortcut to focus while open. ([45135](https://github.com/WordPress/gutenberg/pull/45135))
+
+#### Scripts
+
+-   Scripts: Add PostCSS (.pcss extension) file support to wp-scripts. ([45352](https://github.com/WordPress/gutenberg/pull/45352))
+-   Scripts: Use start without watcher using --no-watch. ([44237](https://github.com/WordPress/gutenberg/pull/44237))
+
+### Bug Fixes
+
+-   Distraction free mode: Fix keyboard shortcut not working. ([47900](https://github.com/WordPress/gutenberg/pull/47900))
+-   useResizeObserver: Handle strict mode double effects. ([47703](https://github.com/WordPress/gutenberg/pull/47703))
+
+#### Block Library
+
+-   Embed: Fix: Remove browser default border for iframe in the editor. ([47987](https://github.com/WordPress/gutenberg/pull/47987))
+-   File block: Re-add editor styles for classic themes. ([47686](https://github.com/WordPress/gutenberg/pull/47686))
+-   Image: Revert "Prevent the image from being resized larger than its container". ([47846](https://github.com/WordPress/gutenberg/pull/47846))
+-   Image: Update image block margins on RTL. ([47617](https://github.com/WordPress/gutenberg/pull/47617))
+-   Navigation Block inspector: Fix link UI popover opening on links that have a URL. ([47828](https://github.com/WordPress/gutenberg/pull/47828))
+-   Navigation: Close Link UI if cancelled. ([48029](https://github.com/WordPress/gutenberg/pull/48029))
+-   Navigation: Enable undo after creating a new menu. ([47683](https://github.com/WordPress/gutenberg/pull/47683))
+-   Navigation: Fixes undo and redo for nesting operations in the navigation block's inspector. ([47633](https://github.com/WordPress/gutenberg/pull/47633))
+-   Navigation: Remove the IS_GUTENBERG_PLUGIN check around block_core_navigation_parse_blocks_from_menu_items. ([47824](https://github.com/WordPress/gutenberg/pull/47824))
+-   Navigation: Update deps for the useEffect that creates navigation menus. ([47912](https://github.com/WordPress/gutenberg/pull/47912))
+-   OffCanvasEditor: Only allow some blocks to be converted to submenus. ([47974](https://github.com/WordPress/gutenberg/pull/47974))
+-   Page List: Respect the selected parent page when converting to a list of navigation links. ([47651](https://github.com/WordPress/gutenberg/pull/47651))
+-   Read More: I18N: Update string concatenation method in read more block. ([47815](https://github.com/WordPress/gutenberg/pull/47815))
+-   ToolsPanel: Display optional items when values are updated externally. ([47727](https://github.com/WordPress/gutenberg/pull/47727))
+-   [Quote]: Fix deprectated `large` style specificity rule. ([47969](https://github.com/WordPress/gutenberg/pull/47969))
+
+#### Site Editor
+
+-   [Block Editor]: Lock `blockInspectorAnimation` setting. ([47740](https://github.com/WordPress/gutenberg/pull/47740))
+-   Disable Strict Mode, breaks dev site editor. ([47701](https://github.com/WordPress/gutenberg/pull/47701))
+-   Add: Modal to choose a start pattern on new templates. Take 2. ([47927](https://github.com/WordPress/gutenberg/pull/47927))
+-   Fix ComplementaryArea's initial isActive state. ([47498](https://github.com/WordPress/gutenberg/pull/47498))
+-   Fix custom Template Parts rename action. ([47932](https://github.com/WordPress/gutenberg/pull/47932))
+-   Fix site editor navigation. ([48025](https://github.com/WordPress/gutenberg/pull/48025))
+-   Shadow: Move shadow into own panel. ([47634](https://github.com/WordPress/gutenberg/pull/47634))
+-   Specify active state color for template navigation button. ([47851](https://github.com/WordPress/gutenberg/pull/47851))
+
+#### Accessibility
+
+-   Add an aria label to the site save dialog. ([47898](https://github.com/WordPress/gutenberg/pull/47898))
+-   Fix UrlInput combobox to use the ARIA 1.0 pattern. ([47148](https://github.com/WordPress/gutenberg/pull/47148))
+-   Fix constrained tabbing failures with Safari and Firefox. ([47426](https://github.com/WordPress/gutenberg/pull/47426))
+-   Fix the headings hierarchy in the styles sidebar. ([43848](https://github.com/WordPress/gutenberg/pull/43848))
+-   Site Editor: Append template type and name to the site editor page title. ([47855](https://github.com/WordPress/gutenberg/pull/47855))
+-   Template editor: Only disable the save button if no changes rather than hiding it. ([47895](https://github.com/WordPress/gutenberg/pull/47895))
+
+#### Block Editor
+
+-   useBlockSync: Change subscribed.current on unsubscribe. ([47752](https://github.com/WordPress/gutenberg/pull/47752))
+-   Edit Post: Fix the 'inlineToolbar' settings toggle. ([47960](https://github.com/WordPress/gutenberg/pull/47960))
+-   Fix clicking on the toggle button not closing the block inserter. ([47926](https://github.com/WordPress/gutenberg/pull/47926))
+-   LinkControl: Fix scrollbar displayed on toggle link settings. ([47986](https://github.com/WordPress/gutenberg/pull/47986))
+-   Rich text: Stabilise onFocus. ([47685](https://github.com/WordPress/gutenberg/pull/47685))
+
+#### Design Tools
+
+-   Avatar: Fix application of borders. ([47630](https://github.com/WordPress/gutenberg/pull/47630))
+-   Image: Allow deprecated blocks to render border-radius. ([47766](https://github.com/WordPress/gutenberg/pull/47766))
+-   ToolsPanel: Ensure display of optional items when panel id is null. ([47864](https://github.com/WordPress/gutenberg/pull/47864))
+
+#### Testing
+
+-   Fix `editor.getBlocks` for unmodified default block. ([48093](https://github.com/WordPress/gutenberg/pull/48093))
+-   Visual Regression tests: Use default playwright utils. ([47991](https://github.com/WordPress/gutenberg/pull/47991))
+
+#### Global Styles
+
+-   Fix incorrect targeting of block wrappers for root padding in the edi…. ([48002](https://github.com/WordPress/gutenberg/pull/48002))
+-   Fix infinite render of inline block preview. ([47697](https://github.com/WordPress/gutenberg/pull/47697))
+
+#### Components
+
+-   ColorPalette: Ensure text label contrast checking works with CSS variables. ([47373](https://github.com/WordPress/gutenberg/pull/47373))
+-   SelectControl: Fix `multiple` prop styling. ([47893](https://github.com/WordPress/gutenberg/pull/47893))
+
+#### Post Editor
+
+-   Fix multi entities saved state in the post editor. ([47734](https://github.com/WordPress/gutenberg/pull/47734))
+-   LocalAutosaveNotice: Use stable notice id to prevent double notices. ([47776](https://github.com/WordPress/gutenberg/pull/47776))
+
+#### Layout
+
+-   [Layout]: Fix align controls for hybrid themes. ([47961](https://github.com/WordPress/gutenberg/pull/47961))
+
+#### Patterns
+
+-   Cover: Ensure `url` is not malformed due to sanitization through `wp_kses`. ([47906](https://github.com/WordPress/gutenberg/pull/47906))
+
+#### Themes
+
+-   Fix: Issues on block level settings. ([47842](https://github.com/WordPress/gutenberg/pull/47842))
+
+#### Plugin
+
+-   Fix the 'WP_HTML_Tag_Processor' file path. ([47823](https://github.com/WordPress/gutenberg/pull/47823))
+
+#### Build Tooling
+
+-   Performance: Restore initial reduce value in perf results log script. ([47650](https://github.com/WordPress/gutenberg/pull/47650))
+
+#### Block API
+
+-   Block Spacing: Don't show UI when only one direction is supported. ([47523](https://github.com/WordPress/gutenberg/pull/47523))
+
+#### Scripts
+
+-   Cherry-pick CLI: Fix the default label to match the documentation. ([47832](https://github.com/WordPress/gutenberg/pull/47832))
+
+### Performance
+
+-   Avoid string-allocation on keypress with inputRule. ([47094](https://github.com/WordPress/gutenberg/pull/47094))
+-   Fix empty results handling in performance test results. ([47646](https://github.com/WordPress/gutenberg/pull/47646))
+-   Fix typo in performance script name. ([47647](https://github.com/WordPress/gutenberg/pull/47647))
+-   Lodash: Remove from `@wordpress/keycodes` package. ([47737](https://github.com/WordPress/gutenberg/pull/47737))
+
+#### Block Editor
+
+-   Block Editor: Optimize `__unstableGetVisibleBlocks()`. ([47681](https://github.com/WordPress/gutenberg/pull/47681))
+
+#### Site Editor
+
+-   Enable React StrictMode again. ([47639](https://github.com/WordPress/gutenberg/pull/47639))
+
+#### Block Library
+
+-   Navigation: Performance: Improve params in `block_core_navigation_get_most_recently_published_navigation`. ([47998](https://github.com/WordPress/gutenberg/pull/47998))
+-   Page List: Block improvement.. ([47981](https://github.com/WordPress/gutenberg/pull/47981))
+-   Page List: Performance: Improve page list callback. ([48004](https://github.com/WordPress/gutenberg/pull/48004))
+-   Post Title: Performance: Render_block_core_post_title - Use post object instead of id. ([48001](https://github.com/WordPress/gutenberg/pull/48001))
+-   Template Part: Performance: Replace usage of wp_get_theme()->get_stylesheet() with get_stylesheet(). ([48027](https://github.com/WordPress/gutenberg/pull/48027))
+-   Tweaks to gutenberg_render_layout_support_flag. ([48003](https://github.com/WordPress/gutenberg/pull/48003))
+
+#### Data Layer
+
+-   Lodash: Refactor away from `_.get()` in resolvers cache middleware. ([47743](https://github.com/WordPress/gutenberg/pull/47743))
+-   Lodash: Refactor away from `_.mapValues()` in data registry. ([47742](https://github.com/WordPress/gutenberg/pull/47742))
+-   Lodash: Refactor persistence plugin away from `_.merge()`. ([47790](https://github.com/WordPress/gutenberg/pull/47790))
+-   Lodash: Remove from `@wordpress/data`'s `getResolutionState()`. ([47838](https://github.com/WordPress/gutenberg/pull/47838))
+-   Lodash: Remove from `@wordpress/data`. ([47848](https://github.com/WordPress/gutenberg/pull/47848))
+-   Lodash: Remove from `useDispatchWithMap()`. ([47835](https://github.com/WordPress/gutenberg/pull/47835))
+
+#### Template Editor
+
+-   Disable lazy loading term meta get_block_templates. ([47999](https://github.com/WordPress/gutenberg/pull/47999))
+
+#### Themes
+
+-   Improvements on append_to_selector method. ([47833](https://github.com/WordPress/gutenberg/pull/47833))
+
+#### Block Directory
+
+-   Optimize `DownloadableBlocksPanel`. ([47679](https://github.com/WordPress/gutenberg/pull/47679))
+
+### Experiments
+
+-   Handle block metadata attribute and related experimental APIs. ([47791](https://github.com/WordPress/gutenberg/pull/47791))
+-   Rename the "experiments" export to "privateApis". ([47975](https://github.com/WordPress/gutenberg/pull/47975))
+-   [Trunk] Rename experiments package to private-apis. ([47839](https://github.com/WordPress/gutenberg/pull/47839))
+
+### Documentation
+
+-   Add: Database credentials to wp-env documentation. ([47940](https://github.com/WordPress/gutenberg/pull/47940))
+-   Block schema and block supports docs: Add dimensions and position settings. ([48057](https://github.com/WordPress/gutenberg/pull/48057))
+-   Components: Polish heading level component APIs. ([47788](https://github.com/WordPress/gutenberg/pull/47788))
+-   Docs: Add ancestor property to block-registration.md doc. ([45832](https://github.com/WordPress/gutenberg/pull/45832))
+-   Docs: Don't recommend using short array syntax in WP_HTML_Tag_Processor. ([47958](https://github.com/WordPress/gutenberg/pull/47958))
+-   Docs: Fix the incorrect link to eslint-plugin-jsx-a11y. ([47773](https://github.com/WordPress/gutenberg/pull/47773))
+-   Fix unbalanced parenthesis in Element README. ([47700](https://github.com/WordPress/gutenberg/pull/47700))
+-   Minor updates in Private APIs. ([47953](https://github.com/WordPress/gutenberg/pull/47953))
+
+### Code Quality
+
+-   Core Data: Fix ESLint warnings for the hooks directory. ([47811](https://github.com/WordPress/gutenberg/pull/47811))
+-   ESLint: Change `jsdoc/check-line-alignment` from `warn` to `error`. ([47878](https://github.com/WordPress/gutenberg/pull/47878))
+-   ESLint: Fix a bunch of ESLint alignment warnings. ([47872](https://github.com/WordPress/gutenberg/pull/47872))
+-   Enable react-hooks/exhaustive-deps eslint rules. ([24914](https://github.com/WordPress/gutenberg/pull/24914))
+-   Update `moment` and `moment-timezone` packages to fix timezone issues. ([47879](https://github.com/WordPress/gutenberg/pull/47879))
+
+#### Components
+
+-   AnglePickerControl: Refactor to TypeScript. ([45820](https://github.com/WordPress/gutenberg/pull/45820))
+-   BorderBoxControl: Migrate tests to TypeScript, remove `act()` call. ([47755](https://github.com/WordPress/gutenberg/pull/47755))
+-   BoxControl: Convert to TypeScript. ([47622](https://github.com/WordPress/gutenberg/pull/47622))
+-   ComboboxControl: Convert to TypeScript. ([47581](https://github.com/WordPress/gutenberg/pull/47581))
+-   CustomSelectControl: Privatise \_\_experimentalShowSelectedHint using @wordpress/experiments. ([47229](https://github.com/WordPress/gutenberg/pull/47229))
+-   CustomSelectControl: Update size prop options to new format in Storybook examples. ([47779](https://github.com/WordPress/gutenberg/pull/47779))
+-   Navigator: Add more pattern matching tests, refine existing tests. ([47910](https://github.com/WordPress/gutenberg/pull/47910))
+-   NavigatorButton: Reuse Button types. ([47754](https://github.com/WordPress/gutenberg/pull/47754))
+-   Panel: Convert to TypeScript. ([47259](https://github.com/WordPress/gutenberg/pull/47259))
+-   Popover: Lock the \_\_experimentalPopoverPositionToPlacement function. ([47505](https://github.com/WordPress/gutenberg/pull/47505))
+-   Refactor Toolbar component to TypeScript. ([47087](https://github.com/WordPress/gutenberg/pull/47087))
+-   Remove BaseField component. ([47911](https://github.com/WordPress/gutenberg/pull/47911))
+-   Remove unnecessary `act()` from `Button` tests. ([47687](https://github.com/WordPress/gutenberg/pull/47687))
+-   Remove unnecessary `act()` from `DropdownMenu` tests. ([47692](https://github.com/WordPress/gutenberg/pull/47692))
+-   Remove unnecessary `act()` from `Popover` tests. ([47690](https://github.com/WordPress/gutenberg/pull/47690))
+-   Remove unnecessary `act()` from `ToolsPanel` tests. ([47691](https://github.com/WordPress/gutenberg/pull/47691))
+-   ResizableBox: Refactor styles to TypeScript. ([47756](https://github.com/WordPress/gutenberg/pull/47756))
+-   TreeGrid: Convert to TypeScript. ([47516](https://github.com/WordPress/gutenberg/pull/47516))
+-   `MenuItemsChoice`: Refactor to TypeScript. ([47180](https://github.com/WordPress/gutenberg/pull/47180))
+-   `ToolsPanel`: Refactor Storybook examples to TypeScript, fix types inconsistencies. ([47944](https://github.com/WordPress/gutenberg/pull/47944))
+
+#### Block Library
+
+-   Gallery: Minor code quality update. ([47774](https://github.com/WordPress/gutenberg/pull/47774))
+-   Image: Simplify the method for getting block editor settings. ([47903](https://github.com/WordPress/gutenberg/pull/47903))
+-   Navigation: Chore Remove unexistant parameter from selectNavigationMenus call. ([47941](https://github.com/WordPress/gutenberg/pull/47941))
+-   Site Logo: Simplify the method for getting block editor settings. ([47736](https://github.com/WordPress/gutenberg/pull/47736))
+-   Table Block: Don't render empty section. ([47753](https://github.com/WordPress/gutenberg/pull/47753))
+
+#### Site Editor
+
+-   Make process_blocks_custom_css method protected. ([47725](https://github.com/WordPress/gutenberg/pull/47725))
+-   Move site editor 6.2 specific code to the right file. ([48023](https://github.com/WordPress/gutenberg/pull/48023))
+-   Remove: Unused code from the navigation inspector select logic. ([48044](https://github.com/WordPress/gutenberg/pull/48044))
+
+#### Global Styles
+
+-   Extract the getSupportedStyles selector to the blocks store as a private selector. ([47606](https://github.com/WordPress/gutenberg/pull/47606))
+-   Remove the name and element props from the TypographyPanel component. ([47908](https://github.com/WordPress/gutenberg/pull/47908))
+
+#### Post Editor
+
+-   Add missing period in keyboard shortcut descriptions. ([47899](https://github.com/WordPress/gutenberg/pull/47899))
+-   Edit Post: Remove unnecessary 'classnames' in Header component. ([47635](https://github.com/WordPress/gutenberg/pull/47635))
+
+#### REST API
+
+-   Chore: Move Gutenberg_REST_Templates_Controller from 6.2 to 6.3 compatibility. ([48077](https://github.com/WordPress/gutenberg/pull/48077))
+
+#### Themes
+
+-   Sync: Widget import changes from the core. ([47875](https://github.com/WordPress/gutenberg/pull/47875))
+
+#### Patterns
+
+-   Refactor: usePatternsCategories: Simplify category sorting. ([47843](https://github.com/WordPress/gutenberg/pull/47843))
+
+#### Document Settings
+
+-   Most Used Terms: Pass dependency to the useSelect. ([47810](https://github.com/WordPress/gutenberg/pull/47810))
+
+#### Block API
+
+-   HTML API: Move into 6.2 Compat Folder since inclusion in Core. ([47749](https://github.com/WordPress/gutenberg/pull/47749))
+
+#### Data Layer
+
+-   Fixed incorrect type annotations in @wordpress/data. ([46881](https://github.com/WordPress/gutenberg/pull/46881))
+
+### Tools
+
+-   Dependency Extraction Webpack Plugin: Update json2php dependency. ([47831](https://github.com/WordPress/gutenberg/pull/47831))
+
+#### Testing
+
+-   Add tests for gutenberg_render_layout_support_flag. ([47719](https://github.com/WordPress/gutenberg/pull/47719))
+-   Migrate Heading block tests to Playwright. ([47955](https://github.com/WordPress/gutenberg/pull/47955))
+-   Migrate query test to Playwright. ([47995](https://github.com/WordPress/gutenberg/pull/47995))
+-   Navigation: end-to-end tests: Default to classic menu. ([47867](https://github.com/WordPress/gutenberg/pull/47867))
+-   Navigation: end-to-end tests: Default to my only existing menu. ([47744](https://github.com/WordPress/gutenberg/pull/47744))
+-   Remove obsolete failing test for Font Size Picker. ([47913](https://github.com/WordPress/gutenberg/pull/47913))
+-   Shard playwright tests into two separate jobs using a matrix. ([47629](https://github.com/WordPress/gutenberg/pull/47629))
+-   Update code and tests for theme json class after the back port in core. ([47668](https://github.com/WordPress/gutenberg/pull/47668))
+-   Upgrade Playwright to 1.30.0. ([48007](https://github.com/WordPress/gutenberg/pull/48007))
+
+#### Build Tooling
+
+-   Add basic tsconfig.json validation. ([47595](https://github.com/WordPress/gutenberg/pull/47595))
+-   Front-end classic performance test: Set TwentyTwentyOne when running in isolation. ([47965](https://github.com/WordPress/gutenberg/pull/47965))
+-   Perf tests: Store test run results as artifact. ([45747](https://github.com/WordPress/gutenberg/pull/45747))
+-   Performance suite: Track Largest Contentful Paint in the front-end. ([47938](https://github.com/WordPress/gutenberg/pull/47938))
+
+#### Block Library
+
+-   Navigation: Add warning test. ([45207](https://github.com/WordPress/gutenberg/pull/45207))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @creative-andrew: Add: Database credentials to wp-env documentation. ([47940](https://github.com/WordPress/gutenberg/pull/47940))
+-   @dpellenwood: Scripts: Add PostCSS (.pcss extension) file support to wp-scripts. ([45352](https://github.com/WordPress/gutenberg/pull/45352))
+-   @griffinjohndavid: Set block attributes to require either type or enum. ([45365](https://github.com/WordPress/gutenberg/pull/45365))
+-   @mike-day: Refactor Toolbar component to TypeScript. ([47087](https://github.com/WordPress/gutenberg/pull/47087))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @brookewp @carolinan @ciampo @creative-andrew @d-alleyne @dcalhoun @dmsnell @dpellenwood @draganescu @ellatrix @flootr @fluiddot @georgeh @geriux @getdave @glendaviesnz @griffinjohndavid @gziolo @jhnstn @jorgefilipecosta @jsnajdr @kebbet @kevin940726 @kkmuffme @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mauteri @mcsf @mike-day @mirka @mreishus @nielslange @noahtallen @noisysocks @ntsekouras @oandregal @scruffian @sgomes @SiobhyB @spacedmonkey @t-hamano @talldan @tellthemachines @tyxla @wojtekn @WunderBart @youknowriad
+
+= 15.1.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+
+-   Add Crowdsignal Embed Variation for a new oEmbed endpoint. ([47382](https://github.com/WordPress/gutenberg/pull/47382))
+-   Add anchor support for dynamic blocks. ([44771](https://github.com/WordPress/gutenberg/pull/44771))
+-   Add box shadow support to blocks (using code editor for now). ([46896](https://github.com/WordPress/gutenberg/pull/46896))
+-   Cover block: Add HTML element selection. ([46969](https://github.com/WordPress/gutenberg/pull/46969))
+-   Decode entities in page list item title. ([47571](https://github.com/WordPress/gutenberg/pull/47571))
+-   Enable image size for featured images in templates. ([46848](https://github.com/WordPress/gutenberg/pull/46848))
+-   Gallery Block: Add toolbar button to add a caption. ([47325](https://github.com/WordPress/gutenberg/pull/47325))
+-   Make the off-canvas navigation editor the default experience. ([46995](https://github.com/WordPress/gutenberg/pull/46995))
+-   Move copy and pasting styles menu items to a separate menu group. ([47430](https://github.com/WordPress/gutenberg/pull/47430))
+-   Navigation: Add a manage menus button to the menu selector dropdown. ([47005](https://github.com/WordPress/gutenberg/pull/47005))
+-   Navigation: Allow multiple navigations with the same ref. ([47453](https://github.com/WordPress/gutenberg/pull/47453))
+-   Navigation: Remove filters disabling tabs for link and submenu. ([47593](https://github.com/WordPress/gutenberg/pull/47593))
+-   Navigation: Remove the manage menus button from the selector. ([47441](https://github.com/WordPress/gutenberg/pull/47441))
+-   Page List: Swap the positions of the parent page selector and customize button. ([47547](https://github.com/WordPress/gutenberg/pull/47547))
+-   Page List: Update the edit/customize copy. ([47549](https://github.com/WordPress/gutenberg/pull/47549))
+-   Post excerpt: Add text alignment to the placeholder. ([45003](https://github.com/WordPress/gutenberg/pull/45003))
+-   Query Loop Block: Use BlockPatternsList component for Query block patterns modal. ([47366](https://github.com/WordPress/gutenberg/pull/47366))
+-   Remove endless spinned for removed navigations. ([47578](https://github.com/WordPress/gutenberg/pull/47578))
+-   Remove the list view button from the navigation block. ([47032](https://github.com/WordPress/gutenberg/pull/47032))
+-   Table Block: Support rowspan attribute in table HTML, including when pasting. ([46629](https://github.com/WordPress/gutenberg/pull/46629))
+-   Update icons for off-canvas navigation. ([47337](https://github.com/WordPress/gutenberg/pull/47337))
+-   Migrate from TextControl to InputControl to remove margin overrides. ([47161](https://github.com/WordPress/gutenberg/pull/47161))
+-   Multiple blocks: Add missing has-link-color class to the front. ([47357](https://github.com/WordPress/gutenberg/pull/47357))
+-   [Navigation]: Update example with no mobile view. ([47508](https://github.com/WordPress/gutenberg/pull/47508))
+-   Navigation Block List View: Improve the accessible Name of the Tree Grid inside the component. ([47031](https://github.com/WordPress/gutenberg/pull/47031))
+
+#### Global Styles
+
+-   Add "Learn more about CSS" help text to Custom CSS control. ([47091](https://github.com/WordPress/gutenberg/pull/47091))
+-   Add padding when no tabs in the background panel. ([44044](https://github.com/WordPress/gutenberg/pull/44044))
+-   Add validation message to custom CSS input. ([47132](https://github.com/WordPress/gutenberg/pull/47132))
+-   Change "Custom" CSS navigation label to "Additional CSS". ([47093](https://github.com/WordPress/gutenberg/pull/47093))
+-   Make css input fill remainder of screen by default. ([47437](https://github.com/WordPress/gutenberg/pull/47437))
+-   Move custom CSS to ellipsis menu if no custom CSS present yet. ([47371](https://github.com/WordPress/gutenberg/pull/47371))
+-   Move custom css to its own inline style generation method and combine with customizer CSS. ([47396](https://github.com/WordPress/gutenberg/pull/47396))
+-   ToggleGroupControl: Add new opt-in prop. ([47269](https://github.com/WordPress/gutenberg/pull/47269))
+-   Add check for edit CSS capability to overflow menu. ([47714](https://github.com/WordPress/gutenberg/pull/47714))
+-   Reselect blocks after pasting styles. ([47590](https://github.com/WordPress/gutenberg/pull/47590))
+
+#### Site Editor
+
+-   Global Styles: Try per block custom CSS. ([46571](https://github.com/WordPress/gutenberg/pull/46571))
+-   Restore the navigation menus in the site editor. ([47485](https://github.com/WordPress/gutenberg/pull/47485))
+-   Update resize handle. ([47138](https://github.com/WordPress/gutenberg/pull/47138))
+-   Update the site editor for better initialization. ([47182](https://github.com/WordPress/gutenberg/pull/47182))
+-   Updates some spacing + dimensions in the Site Hub. ([47120](https://github.com/WordPress/gutenberg/pull/47120))
+-   Add: Navigation menus to the browse mode sidebar. ([46436](https://github.com/WordPress/gutenberg/pull/46436))
+-   Shadow: Add shadow presets and UI tools in global styles. ([46502](https://github.com/WordPress/gutenberg/pull/46502))
+-   TextControl: Remove margin overrides and add new opt-in prop (pt 1/2). ([47157](https://github.com/WordPress/gutenberg/pull/47157))
+-   [Webfonts] Rename to Fonts API. ([46749](https://github.com/WordPress/gutenberg/pull/46749))
+-   Add layout child sizing to Navigation block. ([47584](https://github.com/WordPress/gutenberg/pull/47584))
+-   Add missing controls to flex layouts. ([47134](https://github.com/WordPress/gutenberg/pull/47134))
+-   Always pass layout to inner blocks. ([47477](https://github.com/WordPress/gutenberg/pull/47477))
+-   Site Hub: Remove the aria-label from the Edit button. ([47343](https://github.com/WordPress/gutenberg/pull/47343))
+-   Add ability to open the editor on the selected post on navigation. ([47387](https://github.com/WordPress/gutenberg/pull/47387))
+-   Allow clicking the site editor frame to enter edit mode. ([47676](https://github.com/WordPress/gutenberg/pull/47676))
+-   Pattern Explorer Modal: Select the first category as the initial category. ([47661](https://github.com/WordPress/gutenberg/pull/47661))
+-   [Patterns]: Support the `blockTypes` prop for patterns fetched from Pattern Directory. ([47677](https://github.com/WordPress/gutenberg/pull/47677))
+-   Sticky Position: Fix top position while logged in on mobile. ([47665](https://github.com/WordPress/gutenberg/pull/47665))
+
+#### Testing
+
+-   Clean up sidebar tab end-to-end test utils. ([47097](https://github.com/WordPress/gutenberg/pull/47097))
+-   Components: Refactor more tests to use real timers. ([47318](https://github.com/WordPress/gutenberg/pull/47318))
+-   Components: Use real timers where possible. ([47056](https://github.com/WordPress/gutenberg/pull/47056))
+-   Migrate Classic block tests to Playwright. ([46689](https://github.com/WordPress/gutenberg/pull/46689))
+
+#### Block Editor
+
+-   Add custom label to nav block list view appender. ([47033](https://github.com/WordPress/gutenberg/pull/47033))
+-   Move Link Control action buttons into lower settings area. ([47309](https://github.com/WordPress/gutenberg/pull/47309))
+-   Pattern Inserter: Show insertion indicator when hovering on patterns. ([47316](https://github.com/WordPress/gutenberg/pull/47316))
+-   Add clear Apply and Cancel buttons to Link Control. ([46933](https://github.com/WordPress/gutenberg/pull/46933))
+-   [Inserter]: Openverse integration. ([46251](https://github.com/WordPress/gutenberg/pull/46251))
+-   TextControl: Remove margin overrides and add new opt-in prop (pt 2/2). ([47158](https://github.com/WordPress/gutenberg/pull/47158))
+-   [Block editor]: Add setting to disable Openverse integration. ([47404](https://github.com/WordPress/gutenberg/pull/47404))
+-   Block Inspector: Make Settings tab the default. ([47592](https://github.com/WordPress/gutenberg/pull/47592))
+-   Sticky Position: Hide controls if the block is non-root (has parents). ([47334](https://github.com/WordPress/gutenberg/pull/47334))
+-   Block Inspector: Avoid advanced panel only settings tab. ([47474](https://github.com/WordPress/gutenberg/pull/47474))
+-   Stabilize the experimental control groups. ([47105](https://github.com/WordPress/gutenberg/pull/47105))
+-   Table: Display fixed width table cells option by default. ([47536](https://github.com/WordPress/gutenberg/pull/47536))
+
+#### Components
+
+-   AligmentMatrixControl: Update center cell label to 'Center'. ([46852](https://github.com/WordPress/gutenberg/pull/46852))
+-   Button: Try improving padding for icon + text buttons. ([46764](https://github.com/WordPress/gutenberg/pull/46764))
+-   Fix HStack documentation to show code sample. ([47162](https://github.com/WordPress/gutenberg/pull/47162))
+
+#### Accessibility
+
+-   Announce when block inserted in Navigation list view. ([47034](https://github.com/WordPress/gutenberg/pull/47034))
+-   Navigation block: Fix some off canvas appender accessibility issues. ([47047](https://github.com/WordPress/gutenberg/pull/47047))
+-   [Block Editor]: Update text align toolbar control label. ([47119](https://github.com/WordPress/gutenberg/pull/47119))
+
+#### Themes
+
+-   Make child themes inherit parent's style variations. ([46554](https://github.com/WordPress/gutenberg/pull/46554))
+-   Shadow: Rename shadow palette to presets. ([47272](https://github.com/WordPress/gutenberg/pull/47272))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Ensure appropriate fallback menu title in Nav block menu selector. ([47073](https://github.com/WordPress/gutenberg/pull/47073))
+-   Fix duplicate template parts logic overriding existing template part. ([47128](https://github.com/WordPress/gutenberg/pull/47128))
+-   Fix post featured image scaling on the front. ([46838](https://github.com/WordPress/gutenberg/pull/46838))
+-   Nav offcanvas restore click to edit. ([47608](https://github.com/WordPress/gutenberg/pull/47608))
+-   Navigation Block: Avoid showing the contrast checker warning twice. ([47205](https://github.com/WordPress/gutenberg/pull/47205))
+-   Navigation Block: Fix warning error when no ref. ([47479](https://github.com/WordPress/gutenberg/pull/47479))
+-   Page List: Add extra safety around warnings. ([47603](https://github.com/WordPress/gutenberg/pull/47603))
+-   Refactor convert links. ([46930](https://github.com/WordPress/gutenberg/pull/46930))
+-   Search Block: Apply border color correctly when button is outside or absent. ([47067](https://github.com/WordPress/gutenberg/pull/47067))
+-   Template Parts: Avoid duplicate names on conversion from group of blocks. ([47082](https://github.com/WordPress/gutenberg/pull/47082))
+-   [Block Editor - Post Template]: Fix layout styles. ([47221](https://github.com/WordPress/gutenberg/pull/47221))
+-   Add an alt attribute to the linked featured image if there is no post title. ([46830](https://github.com/WordPress/gutenberg/pull/46830))
+-   Post Template: Add default value for `offset`. ([47308](https://github.com/WordPress/gutenberg/pull/47308))
+-   Parse (area-specific) context in template-part block. ([47203](https://github.com/WordPress/gutenberg/pull/47203))
+-   Don't use methods with the 'gutenberg\_' prefix. ([47649](https://github.com/WordPress/gutenberg/pull/47649))
+-   Navigation: Only show the deleted menu warning if a ref is specified. ([47699](https://github.com/WordPress/gutenberg/pull/47699))
+-   [Query Loop]: Guard term addtion when the request hasn't resolved. ([47688](https://github.com/WordPress/gutenberg/pull/47688))
+
+#### Block Editor
+
+-   Fix Link Control action button visuals. ([47306](https://github.com/WordPress/gutenberg/pull/47306))
+-   Fix Link UI incorrect text replacement in Rich Text. ([45710](https://github.com/WordPress/gutenberg/pull/45710))
+-   In-between inserter: Fix console error when moving mouse in Firefox. ([47168](https://github.com/WordPress/gutenberg/pull/47168))
+-   Remove double edit button in LinkUI. ([47454](https://github.com/WordPress/gutenberg/pull/47454))
+-   Template parts and Reusable block: Fix multiple selection overlay styles. ([47342](https://github.com/WordPress/gutenberg/pull/47342))
+-   Use tertiary variant on Link Control cancel button. ([47313](https://github.com/WordPress/gutenberg/pull/47313))
+-   Add back block editor settings filter. ([47558](https://github.com/WordPress/gutenberg/pull/47558))
+-   Backport WP_REST_Pattern_Directory_Controller changes from core. ([47409](https://github.com/WordPress/gutenberg/pull/47409))
+-   Block Editor: Move component styles needed for iframes to content styles. ([47103](https://github.com/WordPress/gutenberg/pull/47103))
+-   Block Inserter: Correctly apply style to the default inserter. ([47166](https://github.com/WordPress/gutenberg/pull/47166))
+-   Block editor: iframe: Fix placeholder colors. ([47416](https://github.com/WordPress/gutenberg/pull/47416))
+-   Fix react key error with position controls. ([47367](https://github.com/WordPress/gutenberg/pull/47367))
+-   Revert "Navigation List View: Remove empty cell when there is no edit button". ([47061](https://github.com/WordPress/gutenberg/pull/47061))
+-   [Block Editor]: Fix `onHover` errors at BlockPattern. ([47466](https://github.com/WordPress/gutenberg/pull/47466))
+-   [Block Editor]: Register the store through `registerStore`. ([47488](https://github.com/WordPress/gutenberg/pull/47488))
+-   Avoid erroring when getQueryArgs processes a malformed URL. ([45561](https://github.com/WordPress/gutenberg/pull/45561))
+-   `MediaUtils`: Move `window` access to function bodies. ([46970](https://github.com/WordPress/gutenberg/pull/46970))
+-   Fix and simplify the Modal dialog close button label. ([47540](https://github.com/WordPress/gutenberg/pull/47540))
+-   Fix misaligned layout control icons. ([47089](https://github.com/WordPress/gutenberg/pull/47089))
+-   Fix/flex controls bugs. ([47533](https://github.com/WordPress/gutenberg/pull/47533))
+-   E2E: Improve multiple block moving test stability. ([47423](https://github.com/WordPress/gutenberg/pull/47423))
+-   Fix Post Visibility end-to-end tests. ([47520](https://github.com/WordPress/gutenberg/pull/47520))
+-   Fix padding and margin visualizer positioning. ([47483](https://github.com/WordPress/gutenberg/pull/47483))
+-   Fix padding and margin visualizer styles. ([47139](https://github.com/WordPress/gutenberg/pull/47139))
+-   Pattern Inserter: Fix unintended preview panel display when hovering mouse over pattern. ([47693](https://github.com/WordPress/gutenberg/pull/47693))
+
+#### Site Editor
+
+-   Allow resizing the sidebar in the site editor using keyboard. ([47176](https://github.com/WordPress/gutenberg/pull/47176))
+-   Block Editor: Add inert polyfill to iframe. ([47398](https://github.com/WordPress/gutenberg/pull/47398))
+-   Browse mode: Add an H2 inside the sidebar navigation screen title. ([47241](https://github.com/WordPress/gutenberg/pull/47241))
+-   Force visual editor in browse mode. ([47329](https://github.com/WordPress/gutenberg/pull/47329))
+-   Template Sidebar: Fix list of current template part areas to show nested template parts. ([47232](https://github.com/WordPress/gutenberg/pull/47232))
+-   `useDisabled` hook: Fix problem with not working in iframe. ([47459](https://github.com/WordPress/gutenberg/pull/47459))
+
+#### Global Styles
+
+-   Don't remove Custom CSS for users with the correct caps. ([47062](https://github.com/WordPress/gutenberg/pull/47062))
+-   Fix inline block declaration anti-pattern in global styles UI. ([47374](https://github.com/WordPress/gutenberg/pull/47374))
+-   Fix param type in Theme_JSON_Resolver DocBlock. ([47385](https://github.com/WordPress/gutenberg/pull/47385))
+-   Hide Custom CSS setting for users without 'edit_css' cap. ([46815](https://github.com/WordPress/gutenberg/pull/46815))
+
+#### Webfonts
+
+-   Add registered fonts to theme JSON AFTER the child and parent data has been merged. ([47290](https://github.com/WordPress/gutenberg/pull/47290))
+-   [Fonts API] Remove local() from @font-face styles. ([47254](https://github.com/WordPress/gutenberg/pull/47254))
+-   [Webfonts] Use Core's `_deprecated_argument()` for deprecating data structures. ([47125](https://github.com/WordPress/gutenberg/pull/47125))
+
+#### Components
+
+-   Fix tab panel initial tab selection. ([47100](https://github.com/WordPress/gutenberg/pull/47100))
+-   InputControl: Avoid uncontrolled to controlled warning. ([47250](https://github.com/WordPress/gutenberg/pull/47250))
+-   `ColorPalette`: Use computed color when css variable is passed to `ColorPicker`. ([47181](https://github.com/WordPress/gutenberg/pull/47181))
+-   Tabs focus: Followup for Windows high contrast. ([46647](https://github.com/WordPress/gutenberg/pull/46647))
+-   Support private selectors and actions for stores registered via registry.registerStore() and for sub registries. ([47421](https://github.com/WordPress/gutenberg/pull/47421))
+
+### Performance
+
+#### Block Editor
+
+-   Block Editor: Improve `getBlockInsertionPoint` memoization. ([47489](https://github.com/WordPress/gutenberg/pull/47489))
+-   Block Editor: Improve `getPatternsByBlockTypes()` selector performance. ([47450](https://github.com/WordPress/gutenberg/pull/47450))
+-   Block Editor: Memoize `getBlockInsertionPoint` selector. ([47448](https://github.com/WordPress/gutenberg/pull/47448))
+-   Block Editor: Optimize selected blocks in `BlockSettingsMenuControls`. ([47462](https://github.com/WordPress/gutenberg/pull/47462))
+-   Color Palette: Don't use unstable array reference for fallbacks. ([47577](https://github.com/WordPress/gutenberg/pull/47577))
+-   Element: Enable concurrent mode by implementing mount/unmount with createRoot. ([46467](https://github.com/WordPress/gutenberg/pull/46467))
+-   Lodash: Refactor away from `_.setWith()`. ([47017](https://github.com/WordPress/gutenberg/pull/47017))
+-   Lodash: Refactor block editor away from `_.map()`. ([47214](https://github.com/WordPress/gutenberg/pull/47214))
+-   Lodash: Deprecate `_.map()`. ([47216](https://github.com/WordPress/gutenberg/pull/47216))
+-   Lodash: Refactor core data away from `_.map()`. ([47189](https://github.com/WordPress/gutenberg/pull/47189))
+-   Log frontend perf results in codehealth. ([47442](https://github.com/WordPress/gutenberg/pull/47442))
+-   Perf: Rely on more efficient Map for Priority Queue internal state. ([47156](https://github.com/WordPress/gutenberg/pull/47156))
+-   Block Editor: Add a new hook for getting a stable block context object. ([47028](https://github.com/WordPress/gutenberg/pull/47028))
+-   Fix crash when the first template-parts is deleted width del key. ([47227](https://github.com/WordPress/gutenberg/pull/47227))
+
+#### Post Editor
+
+-   Lodash: Refactor `HierarchicalTermSelector` away from `_.unescape()`. ([47567](https://github.com/WordPress/gutenberg/pull/47567))
+-   Lodash: Refactor `PageAttributesParent` away from `_.unescape()`. ([47565](https://github.com/WordPress/gutenberg/pull/47565))
+-   Lodash: Refactor away from `_.clone()`. ([47315](https://github.com/WordPress/gutenberg/pull/47315))
+-   Lodash: Refactor editor away from `_.map()`. ([47191](https://github.com/WordPress/gutenberg/pull/47191))
+-   Lodash: Refactor flat term selection away from `_.unescape()`. ([47572](https://github.com/WordPress/gutenberg/pull/47572))
+-   Lodash: Refactor post editor away from `_.map()`. ([47193](https://github.com/WordPress/gutenberg/pull/47193))
+
+#### Block Library
+
+-   Lodash: Refactor Categories List block away from `_.unescape()`. ([47561](https://github.com/WordPress/gutenberg/pull/47561))
+-   Lodash: Refactor Tag Cloud block away from `_.unescape()`. ([47562](https://github.com/WordPress/gutenberg/pull/47562))
+-   Lodash: Refactor `NavigationLinkEdit` away from `_.unescape()`. ([47570](https://github.com/WordPress/gutenberg/pull/47570))
+-   Lodash: Refactor block library away from `_.map()`. ([47215](https://github.com/WordPress/gutenberg/pull/47215))
+-   Lodash: Refactor some `_.isEmpty()` instances. ([47353](https://github.com/WordPress/gutenberg/pull/47353))
+-   Lodash: Refactor blocks away from `_.map()`. ([47188](https://github.com/WordPress/gutenberg/pull/47188))
+-   Lodash: Refactor away from `_.unescape()`. ([47613](https://github.com/WordPress/gutenberg/pull/47613))
+-   Lodash: Refactor components away from `_.map()`. ([47192](https://github.com/WordPress/gutenberg/pull/47192))
+
+### Experiments
+
+-   Introduce ExperimentalBlockEditorProvider. ([47319](https://github.com/WordPress/gutenberg/pull/47319))
+-   Sharing private APIs with lock() and unlock(). ([46131](https://github.com/WordPress/gutenberg/pull/46131))
+-   Use experiment locking/unlocking system for block interface selector and actions. ([47375](https://github.com/WordPress/gutenberg/pull/47375))
+-   WP_HTML_Tag_Processor: Rename attribute_updates to lexical_updates. ([47053](https://github.com/WordPress/gutenberg/pull/47053))
+-   Fully remove Navigation Editor screen and associated `edit-navigation` package. ([47055](https://github.com/WordPress/gutenberg/pull/47055))
+-   Tag Processor: Only define classes if they don't already exist. ([47434](https://github.com/WordPress/gutenberg/pull/47434))
+
+### Documentation
+
+-   Improve gutenberg release documentation to explain the plugin backporting process. ([47372](https://github.com/WordPress/gutenberg/pull/47372))
+-   Quick update to the Gutenberg plugin description. ([47432](https://github.com/WordPress/gutenberg/pull/47432))
+-   Fix typo in `InspectorControls` documentation. ([47154](https://github.com/WordPress/gutenberg/pull/47154))
+-   QueryControls: Improve onCategoryChange prop documentation in README. ([47452](https://github.com/WordPress/gutenberg/pull/47452))
+-   Refactor `Button` component to TypeScript. ([46997](https://github.com/WordPress/gutenberg/pull/46997))
+-   Release docs: Add some extra clarification that no action is required by the coordinator when publishing packages. ([47480](https://github.com/WordPress/gutenberg/pull/47480))
+-   Remove extra locking from Block Editor store. ([47550](https://github.com/WordPress/gutenberg/pull/47550))
+-   Theme: Exclude readme from public documentation. ([47220](https://github.com/WordPress/gutenberg/pull/47220)
+-   Toolbar: Unify Storybook examples under one file, migrate from knobs to controls. ([47117](https://github.com/WordPress/gutenberg/pull/47117))
+
+### Code Quality
+
+-   Remove ESLint ignore directive documentation. ([47096](https://github.com/WordPress/gutenberg/pull/47096))
+-   Remove lodash mapKeys usage. ([47600](https://github.com/WordPress/gutenberg/pull/47600))
+
+#### Components
+
+-   ColorListPicker: Refactor to TypeScript. ([46358](https://github.com/WordPress/gutenberg/pull/46358))
+-   ColorPalette, BorderControl, GradientPicker: Refine types and logic around single vs multiple palettes. ([47384](https://github.com/WordPress/gutenberg/pull/47384))
+-   DropdownMenu: Convert Storybook examples from knobs to controls. ([47149](https://github.com/WordPress/gutenberg/pull/47149))
+-   KeyboardShortcuts: Convert to TypeScript. ([47429](https://github.com/WordPress/gutenberg/pull/47429))
+-   Notice: Refactor to TypeScript. ([47118](https://github.com/WordPress/gutenberg/pull/47118))
+-   NumberControl: Clarify deprecation message about `hideHTMLArrows` prop. ([47370](https://github.com/WordPress/gutenberg/pull/47370))
+-   Refactor `QueryControls` component to TypeScript. ([46721](https://github.com/WordPress/gutenberg/pull/46721))
+-   Remove @storybook/addon-knobs from the repository. ([47152](https://github.com/WordPress/gutenberg/pull/47152))
+-   `Dropdown`: Deprecate `position` prop, use `popoverProps` instead. ([46865](https://github.com/WordPress/gutenberg/pull/46865))
+-   Fix missing hook deps in distraction free mode. ([47611](https://github.com/WordPress/gutenberg/pull/47611))
+-   Sync settings from editor store to block-editor store. ([47287](https://github.com/WordPress/gutenberg/pull/47287))
+
+#### Site Editor
+
+-   Site Hub: Remove the aria-label from the Edit button. ([47343](https://github.com/WordPress/gutenberg/pull/47343))
+-   Use variation as a prop instead of variationProp in the global styles UI. ([47455](https://github.com/WordPress/gutenberg/pull/47455))
+-   Update theme.json. ([47620](https://github.com/WordPress/gutenberg/pull/47620))
+-   Template Parts: Add unit tests for template part creation functions. ([47224](https://github.com/WordPress/gutenberg/pull/47224))
+-   Lock browse mode selectors and actions. ([47678](https://github.com/WordPress/gutenberg/pull/47678))
+
+#### Block Library
+
+-   Export off canvas editor via experiments package. ([47465](https://github.com/WordPress/gutenberg/pull/47465))
+-   Image Editor: Merge context provider into editor component. ([47171](https://github.com/WordPress/gutenberg/pull/47171))
+-   Mark "post author name" as stable / no longer experimental. ([45008](https://github.com/WordPress/gutenberg/pull/45008))
+-   Navigation: Remove the Gutenberg plugin check. ([47579](https://github.com/WordPress/gutenberg/pull/47579))
+
+#### Global Styles
+
+-   Change 'get_legacy_theme_supports_for_theme_json' compat dir. ([47456](https://github.com/WordPress/gutenberg/pull/47456))
+-   GlobalStyles hooks: Do not smart merge presets in useGlobalSetting. ([47415](https://github.com/WordPress/gutenberg/pull/47415))
+-   Move Global Styles APIs to @wordpress/block-editor. ([47098](https://github.com/WordPress/gutenberg/pull/47098))
+-   Update Global Styles Controller PHPUnit tests. ([47502](https://github.com/WordPress/gutenberg/pull/47502))
+
+#### Patterns
+
+-   Update Block Patterns Controller PHPUnit tests. ([47569](https://github.com/WordPress/gutenberg/pull/47569))
+-   [Patterns]: Remove bundled patterns. ([46450](https://github.com/WordPress/gutenberg/pull/46450))
+-   Move Pattern Directory categories endpoint to `compat/6.3`. ([47486](https://github.com/WordPress/gutenberg/pull/47486))
+
+#### Plugin
+
+-   No need to remove the 'gutenberg_enqueue_global_styles_assets' action. ([47557](https://github.com/WordPress/gutenberg/pull/47557))
+-   Replace 'should_skip_block_supports_serialization' with the core utility method. ([47195](https://github.com/WordPress/gutenberg/pull/47195))
+
+#### Block Editor
+
+-   HeightControl: Stabilise the height control component in the block editor package. ([47475](https://github.com/WordPress/gutenberg/pull/47475))
+-   Replace registerStore() call with register() in the block-editor store. ([47447](https://github.com/WordPress/gutenberg/pull/47447))
+-   Stabilise BlockPreview props. ([47231](https://github.com/WordPress/gutenberg/pull/47231))
+-   Update `eslint-plugin-jsdoc` to support Node 18 and 19. ([47490](https://github.com/WordPress/gutenberg/pull/47490))
+-   Fix: Avoid using index as JSX key on offsite navigation editor LinkControlTransforms. ([47083](https://github.com/WordPress/gutenberg/pull/47083))
+-   Refactores \_\_ExperimentalOffCanvasEditor to OffCanvasEditor. ([47553](https://github.com/WordPress/gutenberg/pull/47553))
+-   Rename `__unstableInserterMediaCategories` to `inserterMediaCategories`. ([47492](https://github.com/WordPress/gutenberg/pull/47492))
+-   Stabilize the clearBlockSelection editor setting. ([47627](https://github.com/WordPress/gutenberg/pull/47627))
+-   [Block Editor]: Stabilize \_\_experimentalGetAllowedBlocks. ([47210](https://github.com/WordPress/gutenberg/pull/47210))
+-   [Block Editor]: Stabilize `__experimentalGetPatternsByBlockTypes`. ([47183](https://github.com/WordPress/gutenberg/pull/47183))
+-   URLInput test: Use valid URL value to pass through validation. ([47444](https://github.com/WordPress/gutenberg/pull/47444))
+
+#### Testing
+
+-   Multi-block selection and rich text test: Wait for expected UI to appear. ([47173](https://github.com/WordPress/gutenberg/pull/47173))
+-   ESLint: Enable `jest/recommended` for tests. ([47065](https://github.com/WordPress/gutenberg/pull/47065))
+-   Remove old test now migrated to Playwright. ([47247](https://github.com/WordPress/gutenberg/pull/47247))
+-   RichText tests: Don't use JSDOM explicitly, it's set up by environment. ([47445](https://github.com/WordPress/gutenberg/pull/47445))
+-   Position Block Support: Add PHP tests. ([47626](https://github.com/WordPress/gutenberg/pull/47626))
+
+### Tools
+
+#### Testing
+
+-   Run PHPUnit jobs across multiple PHP versions. ([46510](https://github.com/WordPress/gutenberg/pull/46510))
+-   Add codeowners for Playwright tests. ([47136](https://github.com/WordPress/gutenberg/pull/47136))
+-   Add end-to-end tests for 'Import widget area' button. ([47131](https://github.com/WordPress/gutenberg/pull/47131))
+-   ESLint: Disable jest rules for storybook playwright. ([47141](https://github.com/WordPress/gutenberg/pull/47141))
+-   ESLint: Fix `jest/expect-expect` violations. ([47219](https://github.com/WordPress/gutenberg/pull/47219))
+-   Reset default_comment_status to previous value after post comments form end-to-end test. ([47481](https://github.com/WordPress/gutenberg/pull/47481))
+-   Tests: Use real timers where fake timers are unnecessary. ([47144](https://github.com/WordPress/gutenberg/pull/47144))
+-   WP_HTML_Tag_Processor: Make `get_attribute` reflect attribute set via `set_attribute`, even without updating. ([46680](https://github.com/WordPress/gutenberg/pull/46680))
+-   core-data: Refactor tests to use real timers. ([47218](https://github.com/WordPress/gutenberg/pull/47218))
+-   test: Add separate mobile experiments file. ([47513](https://github.com/WordPress/gutenberg/pull/47513))
+-   Migrate a11y end-to-end tests to Playwright. ([46038](https://github.com/WordPress/gutenberg/pull/46038))
+-   Copy failing WP_HTML_Tag_Processor_Bookmark_Test tests from Core. ([47720](https://github.com/WordPress/gutenberg/pull/47720))
+
+#### Build Tooling
+
+-   Add test for experimental/block-editor-settings-mobile endpoint. ([46816](https://github.com/WordPress/gutenberg/pull/46816))
+-   Fix GH action warning by upgrading actions/checkout. ([47494](https://github.com/WordPress/gutenberg/pull/47494))
+-   Performance suite: Track Time To First Byte in the front-end. ([47037](https://github.com/WordPress/gutenberg/pull/47037))
+-   React Native: Remove duplicate metro packages. ([47377](https://github.com/WordPress/gutenberg/pull/47377))
+-   Simplify `editor.canvas` by removing `hasIframe`. ([46986](https://github.com/WordPress/gutenberg/pull/46986))
+-   Storybook: Update `storybook-source-link` dep. ([47425](https://github.com/WordPress/gutenberg/pull/47425))
+-   The `prelint:Php` script doesn't work as expected when new dev dependencies get added to `composer.json`. ([45468](https://github.com/WordPress/gutenberg/pull/45468))
+-   end-to-end (cover.test.js): Wait for the height input element. ([47294](https://github.com/WordPress/gutenberg/pull/47294))
+-   end-to-end (multi-entity-saving.test.js): Wait for the font size picker controls to appear. ([47242](https://github.com/WordPress/gutenberg/pull/47242))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @kozer: Avoid erroring when getQueryArgs processes a malformed URL. ([45561](https://github.com/WordPress/gutenberg/pull/45561))
+-   @renatoagds: ([47472](https://github.com/WordPress/gutenberg/pull/47472))
+-   @Rodage: Update theme.json. ([47620](https://github.com/WordPress/gutenberg/pull/47620))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @afercia @ajlende @andrewserong @annezazu @anton-vlasenko @apeatling @audrasjb @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @draganescu @ellatrix @fabiankaegy @felixarntz @flootr @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jffng @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @kozer @madhusudhand @Mamaduka @mirka @noisysocks @ntsekouras @ntwb @oandregal @ockham @pbking @renatoagds @richtabor @Rodage @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @welenofsky @WunderBart @youknowriad
+
+= 15.0.1 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Move block variation picker styles in the iframe ([47109](https://github.com/WordPress/gutenberg/pull/47109))
+-   Add useBlockPreview styles in iframe ([47110](https://github.com/WordPress/gutenberg/pull/47110))
+
+#### Block Library
+
+-   Tag cloud: Disable clicking on the tag links in the editor. ([47338](https://github.com/WordPress/gutenberg/pull/47338))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@carolinan @ntsekouras
+
+= 15.0.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Site Editor
+
+-   Allow resizing the sidebar and frame of the site editor. ([46903](https://github.com/WordPress/gutenberg/pull/46903))
+-   Remove the editor notices from the site editor frame. ([46931](https://github.com/WordPress/gutenberg/pull/46931))
+-   Synchronize the canvas mode with the site editor URL. ([47002](https://github.com/WordPress/gutenberg/pull/47002))
+-   Site Editor: Enable copy/cut shortcut. ([45752](https://github.com/WordPress/gutenberg/pull/45752))
+
+#### Block Library
+
+-   Add paste styles to the block settings. ([45477](https://github.com/WordPress/gutenberg/pull/45477))
+-   Prevent the image from being resized larger than its container. ([45775](https://github.com/WordPress/gutenberg/pull/45775))
+-   Replace block settings menu with a custom menu in off canvas editor. ([46675](https://github.com/WordPress/gutenberg/pull/46675))
+-   Add help text on the HTML element for the Comments and Query Loop blocks. ([46989](https://github.com/WordPress/gutenberg/pull/46989))
+-   Navigation: Add an icon to the add submenu item option. ([46884](https://github.com/WordPress/gutenberg/pull/46884))
+-   Navigation: Remove ghost inserter. ([46919](https://github.com/WordPress/gutenberg/pull/46919))
+-   Navigation: Show the loading indictor when users add a new navigation menu. ([46855](https://github.com/WordPress/gutenberg/pull/46855))
+-   Page List Block: Fix warning error when the parent page has no child pages. ([46829](https://github.com/WordPress/gutenberg/pull/46829))
+-   Page List Item: Disable block toolbar. ([46950](https://github.com/WordPress/gutenberg/pull/46950))
+-   Template Parts: Avoid duplicate titles on creation. ([46996](https://github.com/WordPress/gutenberg/pull/46996))
+-   Navigation: Add more explicit labels to the Navigation Menu Selector. ([47015](https://github.com/WordPress/gutenberg/pull/47015))
+
+#### Block Editor
+
+-   URLInput: Deprecate bottom margin. ([46692](https://github.com/WordPress/gutenberg/pull/46692))
+-   Block editor: Move content styles to avoid triggering iframe compat mode. ([46728](https://github.com/WordPress/gutenberg/pull/46728))
+-   Iframe: Preload style assets to avoid flash of unstyled content. ([46706](https://github.com/WordPress/gutenberg/pull/46706))
+
+#### Inspector Controls
+
+-   Sidebar Tabs: Add text only mode for block inspector tabs. ([46968](https://github.com/WordPress/gutenberg/pull/46968))
+-   Sidebar Tabs: Stabilize the block inspector tabs experiment. ([47045](https://github.com/WordPress/gutenberg/pull/47045))
+-   Remove Block Inspector Button. ([46709](https://github.com/WordPress/gutenberg/pull/46709))
+
+#### Global Styles
+
+-   Update push changes to global styles label text to "apply globally". ([46965](https://github.com/WordPress/gutenberg/pull/46965))
+-   Edit block style variations from global styles. ([46343](https://github.com/WordPress/gutenberg/pull/46343))
+
+#### Accessibility
+
+-   TabPanel: Add prop to allow disabling of a tab button. ([46471](https://github.com/WordPress/gutenberg/pull/46471))
+
+#### Components
+
+-   SelectControl: Remove margin overrides and add new opt-in prop. ([46448](https://github.com/WordPress/gutenberg/pull/46448))
+-   Use data URI for `FocalPointPicker` video story. ([42377](https://github.com/WordPress/gutenberg/pull/42377))
+
+#### List View
+
+-   Update template part children background color. ([46708](https://github.com/WordPress/gutenberg/pull/46708))
+-   Update template part hover style in list view. ([46707](https://github.com/WordPress/gutenberg/pull/46707))
+
+### Bug Fixes
+
+#### Block Editor
+
+-   Align labels on Link Control. ([46936](https://github.com/WordPress/gutenberg/pull/46936))
+-   Remove the border property from the body element on previews. ([46946](https://github.com/WordPress/gutenberg/pull/46946))
+-   [Inserter]: Don't show empty `reusable` tab if not allowed to insert reusable blocks. ([46922](https://github.com/WordPress/gutenberg/pull/46922))
+-   [Inserter]: Hide empty pattern categories. ([46923](https://github.com/WordPress/gutenberg/pull/46923))
+-   Fix offsite navigation editor component loading issue. ([46937](https://github.com/WordPress/gutenberg/pull/46937))
+-   Iframe: compat styles: Check for ownerNode === null. ([46932](https://github.com/WordPress/gutenberg/pull/46932))
+
+#### Block Library
+
+-   Navigation Block: Properly decode URL-encoded links. ([46435](https://github.com/WordPress/gutenberg/pull/46435))
+-   RSS: Correctly output 'datetime' string. ([47027](https://github.com/WordPress/gutenberg/pull/47027))
+-   [Social Icon]: Fix React warning when adding `link label`. ([46905](https://github.com/WordPress/gutenberg/pull/46905))
+
+#### Components
+
+-   ComboboxControl: Fix unexpected behaviour in IME Composition. ([46827](https://github.com/WordPress/gutenberg/pull/46827))
+-   Fix TreeGrid keyboard nav skipping Edit Block button in off canvas editor. ([46998](https://github.com/WordPress/gutenberg/pull/46998))
+-   [Placeholder]: Set fixed right margin for label's icon. ([46918](https://github.com/WordPress/gutenberg/pull/46918))
+-   Tabs in preferences: Fix regression from horizontal tabs. ([46796](https://github.com/WordPress/gutenberg/pull/46796))
+
+#### Global Styles
+
+-   Fix the 'test_remove_invalid_element_pseudo_selectors' test case. ([47049](https://github.com/WordPress/gutenberg/pull/47049))
+-   Fixed Global Styles variables for colors, font family, gradient, fontSize. ([46944](https://github.com/WordPress/gutenberg/pull/46944))
+
+#### Inspector Controls
+
+-   Block Inspector: Fix browser warning error when block is not selected. ([46875](https://github.com/WordPress/gutenberg/pull/46875))
+
+### Performance
+
+#### Post Editor
+
+-   Lodash: Remove `_.pickBy()` from editor hooks. ([46982](https://github.com/WordPress/gutenberg/pull/46982))
+-   Lodash: Remove `_.pickBy()` from template deletion. ([46975](https://github.com/WordPress/gutenberg/pull/46975))
+-   Lodash: Remove `_.pickBy()` from block editor and deprecate. ([46999](https://github.com/WordPress/gutenberg/pull/46999))
+-   Optimize keydown event handlers. ([46653](https://github.com/WordPress/gutenberg/pull/46653))
+
+#### Global Styles
+
+-   Lodash: Remove `_.pickBy()` from `getNodesWithStyles()`. ([46980](https://github.com/WordPress/gutenberg/pull/46980))
+
+#### Block Library
+
+-   Lodash: Remove `_.pickBy()` from latest posts block. ([46974](https://github.com/WordPress/gutenberg/pull/46974))
+
+### Accessibility
+
+-   Block Editor: Revert `aria-controls` to `aria-owns` in `URLInput` to use the more broadly supported ARIA 1.0 combobox pattern. ([47148](https://github.com/WordPress/gutenberg/pull/47148))
+
+### Experiments
+
+-   WP_HTML_Tag_Processor: Add `get_attribute_names_with_prefix()` method. ([46840](https://github.com/WordPress/gutenberg/pull/46840))
+
+#### Block Editor
+
+-   Update last inserted block state to track multiple blocks. ([46885](https://github.com/WordPress/gutenberg/pull/46885))
+
+#### Block Library
+
+-   Alternative Nav Offcanvas show link UI for submenu creation. ([46857](https://github.com/WordPress/gutenberg/pull/46857))
+-   Nav offcanvas disable direct insertion. ([46898](https://github.com/WordPress/gutenberg/pull/46898))
+
+#### Layout
+
+-   Design Tools: Add a Position block support (including sticky), decoupled from layout. ([46142](https://github.com/WordPress/gutenberg/pull/46142))
+
+### Documentation
+
+-   Adds "fluid" field inside `settings.typography`. ([45705](https://github.com/WordPress/gutenberg/pull/45705))
+-   Docs: Add recommendation for developers to use GH CLI. ([46847](https://github.com/WordPress/gutenberg/pull/46847))
+-   Quick update to versions in WordPress doc for 6.1.1. ([46850](https://github.com/WordPress/gutenberg/pull/46850))
+-   ReactDOM.render deprecated, update Element README. ([46925](https://github.com/WordPress/gutenberg/pull/46925))
+-   Remove stack exchange from new issue templates. ([36158](https://github.com/WordPress/gutenberg/pull/36158))
+-   Revise NPM to npm. ([46963](https://github.com/WordPress/gutenberg/pull/46963))
+-   Update legacy-widget-block.md. ([44343](https://github.com/WordPress/gutenberg/pull/44343))
+-   Updating missing shortcut in FAQ section. ([44968](https://github.com/WordPress/gutenberg/pull/44968))
+-   [RFC] Add documentation for snapshot testing in Playwright end-to-end tests. ([45709](https://github.com/WordPress/gutenberg/pull/45709))
+-   Update copyright year to 2023 in `license.md`. ([46910](https://github.com/WordPress/gutenberg/pull/46910))
+-   Docs: Fix typos. ([46912](https://github.com/WordPress/gutenberg/pull/46912))
+
+### Code Quality
+
+#### Components
+
+-   Dashicon: Remove unnecessary type for `className` prop. ([46849](https://github.com/WordPress/gutenberg/pull/46849))
+-   ItemGroup: Migrate Storybook to controls, refactor to TypeScript. ([46945](https://github.com/WordPress/gutenberg/pull/46945))
+-   Toolbar: Move all subcomponents under the same folder. ([46951](https://github.com/WordPress/gutenberg/pull/46951))
+-   ColorPicker: Remove knobs in stories. ([46772](https://github.com/WordPress/gutenberg/pull/46772))
+-   Guide: Remove knobs in stories. ([46773](https://github.com/WordPress/gutenberg/pull/46773))
+-   Notice: Remove knobs in stories. ([46956](https://github.com/WordPress/gutenberg/pull/46956))
+-   Panel: Remove knobs from stories. ([46958](https://github.com/WordPress/gutenberg/pull/46958))
+-   ResizableBox: Remove knobs in stories. ([46774](https://github.com/WordPress/gutenberg/pull/46774))
+-   ResponsiveWrapper: Convert to TypeScript. ([46480](https://github.com/WordPress/gutenberg/pull/46480))
+-   SandBox: Convert to TypeScript. ([46478](https://github.com/WordPress/gutenberg/pull/46478))
+-   SlotFill: Remove knobs in stories. ([46957](https://github.com/WordPress/gutenberg/pull/46957))
+-   useSelect: Implement with useSyncExternalStore. ([46538](https://github.com/WordPress/gutenberg/pull/46538))
+
+#### Block Library
+
+-   Navigation Link: Fix PHP notices in unit tests. ([47070](https://github.com/WordPress/gutenberg/pull/47070))
+-   Video Block: Fix browser warning error when settings are toggled. ([46835](https://github.com/WordPress/gutenberg/pull/46835))
+-   Adds an identifier prop to the RichText component for captions, allowing annotation. ([46917](https://github.com/WordPress/gutenberg/pull/46917))
+-   Fix: Use of array index instead of post id on latest posts. ([46911](https://github.com/WordPress/gutenberg/pull/46911))
+
+#### Block Editor
+
+-   Simplify the way we create a link UI control in the offcanvas editor. ([46744](https://github.com/WordPress/gutenberg/pull/46744))
+-   Fix number of arguments passed to hasBlockMetadataSupport. ([46842](https://github.com/WordPress/gutenberg/pull/46842))
+
+### Tools
+
+#### Testing
+
+-   Block inserter search end-to-end test: Scope list item lookup to the inserter panel. ([47066](https://github.com/WordPress/gutenberg/pull/47066))
+-   Migrate Manage Reusable Block to Playwright. ([45621](https://github.com/WordPress/gutenberg/pull/45621))
+-   Migrate Post Visibility Test to Playwright. ([44488](https://github.com/WordPress/gutenberg/pull/44488))
+-   Navigation block end-to-end tests: Default to a list of pages if there are no menus. ([45070](https://github.com/WordPress/gutenberg/pull/45070))
+-   Only use a single comment for the flakiness report on PRs. ([46785](https://github.com/WordPress/gutenberg/pull/46785))
+-   Mobile - Move the `gutenberg-editor-block-insertion-2` end-to-end tests to integration tests. ([46882](https://github.com/WordPress/gutenberg/pull/46882))
+-   Chore: Fix incorrect usage of map instead of forEach. ([46853](https://github.com/WordPress/gutenberg/pull/46853))
+-   Chore: Remove unreachable line from phpunit/fixtures/mock-provider.php. ([46843](https://github.com/WordPress/gutenberg/pull/46843))
+
+#### Build Tooling
+
+-   package.json: Add script to profile unit tests. ([46909](https://github.com/WordPress/gutenberg/pull/46909))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @BogdanUngureanu: Fixed Global Styles variables for colors, font family, gradient, fontSize. ([46944](https://github.com/WordPress/gutenberg/pull/46944))
+-   @cameronjonesweb: Update legacy-widget-block.md. ([44343](https://github.com/WordPress/gutenberg/pull/44343))
+-   @d-alleyne: Prevent the image from being resized larger than its container. ([45775](https://github.com/WordPress/gutenberg/pull/45775))
+-   @kozer: Navigation Block: Properly decode URL-encoded links. ([46435](https://github.com/WordPress/gutenberg/pull/46435))
+-   @mhkuu: Adds an identifier prop to the RichText component for captions, allowing annotation. ([46917](https://github.com/WordPress/gutenberg/pull/46917))
+-   @tekapo: Revise NPM to npm. ([46963](https://github.com/WordPress/gutenberg/pull/46963))
+-   @TonyGravagno: ReactDOM.render deprecated, update Element README. ([46925](https://github.com/WordPress/gutenberg/pull/46925))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @alanjacobmathew @alexstine @andrewserong @annezazu @apeatling @BogdanUngureanu @brookewp @cameronjonesweb @ciampo @d-alleyne @draganescu @ellatrix @geriux @getdave @jameskoster @jasmussen @jorgefilipecosta @joshuatf @jsnajdr @juanfra @kevin940726 @kozer @MaggieCabrera @Mamaduka @mateuswetah @mhkuu @mirka @ntsekouras @ockham @pooja-muchandikar @scruffian @Soean @stokesman @t-hamano @talldan @tekapo @tellthemachines @tomjn @TonyGravagno @tyxla @youknowriad
+
+= 14.9.1 =
+
+## Changelog
+
+### Bug Fixes
+
+-   REST API: Do not set sidebar status to 'active' when using classic theme. ([46966](https://github.com/WordPress/gutenberg/pull/46966))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@noisysocks
+
+= 14.9.0 =
+
+## Changelog
+
+### Features
+
+#### Global Styles
+
+-   Site Editor: Add new 'Push changes to Global Styles' button. ([46446](https://github.com/WordPress/gutenberg/pull/46446))
+
+#### Patterns
+
+-   Add: Template types to the patterns API. ([45814](https://github.com/WordPress/gutenberg/pull/45814))
+
+### Enhancements
+
+-   Post editor: Iframe for block-based themes. ([46212](https://github.com/WordPress/gutenberg/pull/46212))
+-   Move word count to the top of the outline. ([46648](https://github.com/WordPress/gutenberg/pull/46648))
+-   Update: Remove need for template prefix in `gutenberg_get_template_hierarchy`. ([46257](https://github.com/WordPress/gutenberg/pull/46257))
+-   Update: Use offsite navigation editor on the navigation inspector sidebar. ([46440](https://github.com/WordPress/gutenberg/pull/46440))
+
+#### Site Editor
+
+-   Add the template title and type to the site hub. ([46736](https://github.com/WordPress/gutenberg/pull/46736))
+-   Increase the width of the site editor sidebar. ([46769](https://github.com/WordPress/gutenberg/pull/46769))
+-   Move the edit button in the site editor sidebar to a contextual widget. ([46700](https://github.com/WordPress/gutenberg/pull/46700))
+
+#### Block Library
+
+-   Navigation: Adds page list as child of submenu. ([46414](https://github.com/WordPress/gutenberg/pull/46414))
+-   Navigation: Bring back the heading and the menu selector in the ellipsis menu. ([46622](https://github.com/WordPress/gutenberg/pull/46622))
+-   Template Parts: Add an option to import widgets from the sidebars. ([45509](https://github.com/WordPress/gutenberg/pull/45509))
+
+#### Design Tools
+
+-   Page List: Add typography supports. ([43316](https://github.com/WordPress/gutenberg/pull/43316))
+-   Style Engine: Add support for text columns (column-count). ([46566](https://github.com/WordPress/gutenberg/pull/46566))
+
+#### CSS & Styling
+
+-   Edit-post site logo: Fix focus style. ([46733](https://github.com/WordPress/gutenberg/pull/46733))
+-   Base Styles: Extract long-content-fade to its own file so it can be imported and reused. ([46485](https://github.com/WordPress/gutenberg/pull/46485))
+
+#### Components
+
+-   `TextareaControl`: Add new opt-in prop. ([46559](https://github.com/WordPress/gutenberg/pull/46559))
+
+#### Colors
+
+-   Remove clearable from link `ColorPanel` item. ([46507](https://github.com/WordPress/gutenberg/pull/46507))
+
+#### Global Styles
+
+-   Shadow: Add shadow presets support via `theme.json`. ([46813](https://github.com/WordPress/gutenberg/pull/46813))
+-   Fluid typography: Add configurable settings for minimum font size to `theme.json`. ([42489](https://github.com/WordPress/gutenberg/pull/42489))
+-   Inline preview: Center align block in global styles inline preview. ([46727](https://github.com/WordPress/gutenberg/pull/46727))
+
+### Bug Fixes
+
+-   DOM: Fix `findNext`/`findPrevious` tabbable if target is not in `findFocusable` list. ([46580](https://github.com/WordPress/gutenberg/pull/46580))
+-   Fix: Bug on `withSafeTimeouts`. ([46595](https://github.com/WordPress/gutenberg/pull/46595))
+-   Fixed incorrect CHANGELOG link. ([46609](https://github.com/WordPress/gutenberg/pull/46609))
+-   Fixed table block footer section issue. ([46567](https://github.com/WordPress/gutenberg/pull/46567))
+-   Iframe: Restore typewriter effect in post editor. ([46745](https://github.com/WordPress/gutenberg/pull/46745))
+-   Parse the attributes in a case-insensitive way to comply with the HTML parsing spec. ([46748](https://github.com/WordPress/gutenberg/pull/46748))
+-   Update: Guard against null block in off canvas editor. ([46594](https://github.com/WordPress/gutenberg/pull/46594))
+-   docgen: Add function to handle list of types for `theme.json` schema. ([46375](https://github.com/WordPress/gutenberg/pull/46375))
+-   Post editor: Fix title margin. ([46698](https://github.com/WordPress/gutenberg/pull/46698))
+
+#### Block Library
+
+-   Fix Off Canvas Editor add submenu item option. ([46562](https://github.com/WordPress/gutenberg/pull/46562))
+-   Make table of contents label in placeholder translatable. ([46788](https://github.com/WordPress/gutenberg/pull/46788))
+-   Query Loop: Fetch terms suggestions dynamically. ([46649](https://github.com/WordPress/gutenberg/pull/46649))
+
+#### Components
+
+-   `FocalPointPicker`: Fix layout misalignment when placed in the `BlockInspector`. ([46631](https://github.com/WordPress/gutenberg/pull/46631))
+-   Storybook: Fix crash when `parameters` is undefined. ([46670](https://github.com/WordPress/gutenberg/pull/46670))
+-   Toolbar: Fix duplicate focus style on anchor link button. ([46759](https://github.com/WordPress/gutenberg/pull/46759))
+
+#### Widgets Editor
+
+-   Revert "[`customize-widgets/utils/widgetToBlock`] Initialize a widget's `raw_content.content` to an empty string if it's `undefined`". ([46600](https://github.com/WordPress/gutenberg/pull/46600))
+-   [`customize-widgets/utils/widgetToBlock`] Initialize a widget's `raw_content.content` to an empty string if it's `undefined`. ([46487](https://github.com/WordPress/gutenberg/pull/46487))
+
+#### Nested / Inner Blocks
+
+-   Inner Blocks: Fix provides context condition. ([46729](https://github.com/WordPress/gutenberg/pull/46729))
+
+#### Global Styles
+
+-   Allow content/wide widths when `unfiltered_html` is not allowed. ([46712](https://github.com/WordPress/gutenberg/pull/46712))
+
+#### CSS & Styling
+
+-   Fix nav list alignment. ([46682](https://github.com/WordPress/gutenberg/pull/46682))
+
+#### Block Editor
+
+-   Inserter: Try fix media tab when upload of media types has been disabled. ([46676](https://github.com/WordPress/gutenberg/pull/46676))
+
+#### Build Tooling
+
+-   Restore `gutenberg_` prefix to function calls in PHPUnit tests. ([46662](https://github.com/WordPress/gutenberg/pull/46662))
+
+#### Patterns
+
+-   Pattern Setup: Fix full heights during transition. ([46615](https://github.com/WordPress/gutenberg/pull/46615))
+
+#### Design Tools
+
+-   Verse: Prevent default styles overriding `theme.json` font family. ([46560](https://github.com/WordPress/gutenberg/pull/46560))
+
+#### Block Variations
+
+-   Block Variation Picker: Adds support to declared icon with source. ([46373](https://github.com/WordPress/gutenberg/pull/46373))
+
+#### Themes
+
+-   `theme.json` schema: Allow object type on style properties. ([45897](https://github.com/WordPress/gutenberg/pull/45897))
+
+### Accessibility
+
+-   Block editor: iframe/writing flow: Change tab index to 0. ([46323](https://github.com/WordPress/gutenberg/pull/46323))
+-   Fix region navigation in the site editor. ([46525](https://github.com/WordPress/gutenberg/pull/46525))
+-   Keycodes: Fix tilde (`~`) character isn't displayed correctly. ([46826](https://github.com/WordPress/gutenberg/pull/46826))
+-   `useNavigateRegions`: Use closest to determine the next region to navigate to. ([44883](https://github.com/WordPress/gutenberg/pull/44883))
+
+### Performance
+
+-   Add a performance metric to measure typing within containers. ([46529](https://github.com/WordPress/gutenberg/pull/46529))
+-   Block Editor: Optimize `useAvailableAlignments` performance. ([46655](https://github.com/WordPress/gutenberg/pull/46655))
+-   Reset the page between every performance test. ([46646](https://github.com/WordPress/gutenberg/pull/46646))
+-   Lodash:
+-   Refactor block editor away from `_.find()`. ([46577](https://github.com/WordPress/gutenberg/pull/46577))
+-   Remove `omit` usage from RN test mocks. ([46660](https://github.com/WordPress/gutenberg/pull/46660))
+-   Remove dependency from server-side-render. ([46746](https://github.com/WordPress/gutenberg/pull/46746))
+-   Remove from block editor reducer. ([46656](https://github.com/WordPress/gutenberg/pull/46656))
+
+#### Widgets Editor
+
+-   Lodash: Remove dependency from `customize-widgets`. ([46747](https://github.com/WordPress/gutenberg/pull/46747))
+
+#### Block Library
+
+-   Gallery: Avoid creating new layout objects on every render. ([46715](https://github.com/WordPress/gutenberg/pull/46715))
+
+#### Site Editor
+
+-   Memoize sidebar component. ([46604](https://github.com/WordPress/gutenberg/pull/46604))
+
+#### Components
+
+-   Lodash: Refactor components away from `_.find()`. ([46537](https://github.com/WordPress/gutenberg/pull/46537))
+
+### Experiments
+
+-   Add rough animation to navigation and links. ([46342](https://github.com/WordPress/gutenberg/pull/46342))
+-   Tag Processor: Fix a problem backing up too far after updating HTML. ([46598](https://github.com/WordPress/gutenberg/pull/46598))
+
+#### Block Library
+
+-   Improve empty menu state in nav off-canvas editor. ([46602](https://github.com/WordPress/gutenberg/pull/46602))
+-   Nav offcanvas - handle non-direct insert block inserter. ([46503](https://github.com/WordPress/gutenberg/pull/46503))
+-   Navigation list view: Use smaller lock icon. ([46578](https://github.com/WordPress/gutenberg/pull/46578))
+
+### Documentation
+
+-   Add missing prefix in PHPDoc comment. ([46808](https://github.com/WordPress/gutenberg/pull/46808))
+-   Clarifying the npm package release process for the RC release. ([46555](https://github.com/WordPress/gutenberg/pull/46555))
+-   Doc: Fix missing link to Block Styles page. ([46695](https://github.com/WordPress/gutenberg/pull/46695))
+-   Fix: Missing links in `block.json` schema. ([46694](https://github.com/WordPress/gutenberg/pull/46694))
+-   Lodash: Refactor away from `_.omit()`. ([46674](https://github.com/WordPress/gutenberg/pull/46674))
+-   Update PHPDoc for `gutenberg_get_global_stylesheet`. ([46817](https://github.com/WordPress/gutenberg/pull/46817))
+-   Added a note to `register_block_pattern_category()`. ([46628](https://github.com/WordPress/gutenberg/pull/46628))
+
+### Code Quality
+
+-   Block Editor:
+-   Improve `ImageSizeControl` tests. ([46765](https://github.com/WordPress/gutenberg/pull/46765))
+-   Make `URLPopover` tests more precise. ([46654](https://github.com/WordPress/gutenberg/pull/46654))
+-   Chore: Remove Inexistent parameter from function call in categories block. ([46804](https://github.com/WordPress/gutenberg/pull/46804))
+-   ESLint: Enable `testing-library/no-node-access` rule. ([46703](https://github.com/WordPress/gutenberg/pull/46703))
+-   Fix return type of `getSpacingPresetSlug` function. ([46805](https://github.com/WordPress/gutenberg/pull/46805))
+-   Iframe: Simplify/reactify compat styles logic. ([46732](https://github.com/WordPress/gutenberg/pull/46732))
+-   Mobile BlockToolbar: Improve `useSelect` for fewer rerenders. ([46697](https://github.com/WordPress/gutenberg/pull/46697))
+-   Remove leftover pattern. ([46701](https://github.com/WordPress/gutenberg/pull/46701))
+-   Remove the nux package. ([46110](https://github.com/WordPress/gutenberg/pull/46110))
+-   Remove: `__experimentalHasMultipleOrigins` prop from colors and gradients. ([46315](https://github.com/WordPress/gutenberg/pull/46315))
+-   Use `<>` instead of `Fragment`. ([46633](https://github.com/WordPress/gutenberg/pull/46633))
+-   `package-lock.json`: Dedupe the scheduler package. ([46605](https://github.com/WordPress/gutenberg/pull/46605))
+-   `withFilters` tests: More precise `act()` calls. ([46630](https://github.com/WordPress/gutenberg/pull/46630))
+-   Jest config: Use real timers by default. ([46714](https://github.com/WordPress/gutenberg/pull/46714))
+-   Element: Export new React 18 APIs. ([46610](https://github.com/WordPress/gutenberg/pull/46610))
+
+#### Block Library
+
+-   Comments Block: Remove unnecessary `editorStyle` prop in legacy metadata. ([46514](https://github.com/WordPress/gutenberg/pull/46514))
+-   Extract hook for offcanvas inserted block. ([46618](https://github.com/WordPress/gutenberg/pull/46618))
+-   Try making page list a controlled block. ([46416](https://github.com/WordPress/gutenberg/pull/46416))
+
+#### Components
+
+-   `BorderControl`: Improve popover waiting. ([46713](https://github.com/WordPress/gutenberg/pull/46713))
+-   Improve `PanelBody` tests. ([46659](https://github.com/WordPress/gutenberg/pull/46659))
+
+#### Data Layer
+
+-   Data: Fix `no-node-access` violation in suspense tests. ([46657](https://github.com/WordPress/gutenberg/pull/46657))
+
+### Tools
+
+#### Testing
+
+-   Always run initialization code before Playwright end-to-end tests. ([46459](https://github.com/WordPress/gutenberg/pull/46459))
+-   E2E: Fix `confirmValidDropZonePosition()` when dropzone not ready. ([46677](https://github.com/WordPress/gutenberg/pull/46677))
+-   E2E: Refactor global inserter utility. ([46366](https://github.com/WordPress/gutenberg/pull/46366))
+-   Fix CORS error in the demo end-to-end test. ([46668](https://github.com/WordPress/gutenberg/pull/46668))
+-   Migrate Font Size Picker tests to Playwright. ([46591](https://github.com/WordPress/gutenberg/pull/46591))
+-   Migrate Toolbar roving tabindex tests to Playwright. ([46634](https://github.com/WordPress/gutenberg/pull/46634))
+-   Migrate quote end-to-end tests to playwright. ([46549](https://github.com/WordPress/gutenberg/pull/46549))
+-   Post a summary of the flaky tests to the commit. ([45798](https://github.com/WordPress/gutenberg/pull/45798))
+-   Update performance tests to work with themes that load editor into an iframe. ([46665](https://github.com/WordPress/gutenberg/pull/46665))
+
+#### Block Library
+
+-   Update `OffCanvasEditor` to use `clientids` tree. ([46541](https://github.com/WordPress/gutenberg/pull/46541))
+-   Update copy of off canvas editor 'add submenu item' option. ([46564](https://github.com/WordPress/gutenberg/pull/46564))
+-   Page List:
+-   Remove duplicate code. ([46620](https://github.com/WordPress/gutenberg/pull/46620))
+-   Update the icon to demonstrate that the pages are automatically updated. ([46438](https://github.com/WordPress/gutenberg/pull/46438))
+-   Query Loop:
+-   Only show the Filters panel when there are allowed controls that need to be displayed. ([45869](https://github.com/WordPress/gutenberg/pull/45869))
+-   Connect scoped `block` variation to `inserter` variations. ([46410](https://github.com/WordPress/gutenberg/pull/46410))
+-   Show pattern titles in setup. ([46688](https://github.com/WordPress/gutenberg/pull/46688))
+
+#### Components
+
+-   Icon: Remove knobs in stories. ([46517](https://github.com/WordPress/gutenberg/pull/46517))
+-   Refactor Dropdown component to TypeScript. ([45787](https://github.com/WordPress/gutenberg/pull/45787))
+-   Theme component: Remove public export. ([46427](https://github.com/WordPress/gutenberg/pull/46427))
+-   ToolTip: Remove knobs in stories. ([46515](https://github.com/WordPress/gutenberg/pull/46515))
+
+#### Block Editor
+
+-   `BlockListAppender`: With custom appender, don't react to nested list settings changes. ([46461](https://github.com/WordPress/gutenberg/pull/46461))
+-   Paste: Reuse file transforms for file pasting. ([45891](https://github.com/WordPress/gutenberg/pull/45891))
+-   Site Editor: Don't show block inserter when the canvas is view mode. ([46763](https://github.com/WordPress/gutenberg/pull/46763))
+
+#### Data Layer
+
+-   Data: Recreate `listeningStores` set for every `markListeningStores` call. ([46607](https://github.com/WordPress/gutenberg/pull/46607))
+-   `useSelect`: Add unit tests for static select mode. ([46606](https://github.com/WordPress/gutenberg/pull/46606))
+
+#### Navigation Menu Sidebar
+
+-   Navigation Sidebar: Hide behind the experiment flag. ([46710](https://github.com/WordPress/gutenberg/pull/46710))
+
+#### Icons
+
+-   Update the update icon. ([46575](https://github.com/WordPress/gutenberg/pull/46575))
+
+#### Accessibility
+
+-   Change `SpacingSizesControl` ARIA from region to group. ([46530](https://github.com/WordPress/gutenberg/pull/46530))
+
+#### Global Styles
+
+-   Inline block preview: Add preview block in nested global style panels. ([46401](https://github.com/WordPress/gutenberg/pull/46401))
+
+#### Typography
+
+-   Typography block supports: Sync with 6.1 backport. ([43928](https://github.com/WordPress/gutenberg/pull/43928))
+
+#### Web Fonts
+
+-   Change architecture to use Core's Dependencies API. ([43492](https://github.com/WordPress/gutenberg/pull/43492))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @gigitux: Block Variation Picker: Adds support to declared icon with src. ([46373](https://github.com/WordPress/gutenberg/pull/46373))
+-   @marekdedic: Fixed incorrect CHANGELOG link. ([46609](https://github.com/WordPress/gutenberg/pull/46609))
+-   @viralsampat-multidots: Fixed table block footer section issue. ([46567](https://github.com/WordPress/gutenberg/pull/46567))
+-   @vykes-mac: Base Styles: Extract long-content-fade to its own file so it can be imported and reused. ([46485](https://github.com/WordPress/gutenberg/pull/46485))
+-   @websitegenii: Added a note to `register_block_pattern_category()`. ([46628](https://github.com/WordPress/gutenberg/pull/46628))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @ajlende @alexstine @artemiomorales @brookewp @danielbachhuber @DAreRodz @dmsnell @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @gigitux @hellofromtonya @jasmussen @jorgefilipecosta @jsnajdr @kevin940726 @kienstra @madhusudhand @MaggieCabrera @Mamaduka @marekdedic @mikachan @mirka @mmtr @noisysocks @ntsekouras @oandregal @ramonjd @richtabor @ryanwelcher @scruffian @t-hamano @talldan @tyxla @viralsampat-multidots @vykes-mac @websitegenii @WunderBart @youknowriad
+
+= 14.8.4 =
+
+## Changelog
+
+### Various
+
+-   Fixes an issue where gutenberg bundled `theme.json` was not utilized. ([46810](https://github.com/WordPress/gutenberg/pull/46810)) This meant that Gutenberg features newer than the WordPress `theme.json` file were unavailable in 14.8.
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@madhusudhand
+
+= 14.8.3 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Plugin
+
+Fixes compatibility with WordPress 6.0.x. This includes the following PRs:
+
+-   #46579
+-   #46750
+-   #46806
+-   #46809
+
+Broadly, this needed to include the two refactors of the Theme*JSON compatibility files, along with two fixes switching `wp*\_`and`gutenberg\_\_` function variants as needed.
+
+## Contributors
+
+The following contributors were involved with this release:
+
+@geriux @Mamaduka @oandregal @noahtallen
+
+= 14.8.2 =
+
+## Changelog
+
+### Bug Fixes
+
+#### Block Editor
+
+-   rich-text: Fix bug where bare tag name format types could not be registered. ([46798](https://github.com/WordPress/gutenberg/pull/46798))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@davilera
+
+= 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
+
+### 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))
+-   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
+
+-   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
+
+The following contributors merged PRs in this release:
+
+@andrewserong @glendaviesnz
+
+= 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))
+-   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))
+
+## 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
+
+### 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 =
+
+## 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 =
+
+## 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 =
+
+## Changelog
+
+### Enhancements
+
+#### Style Engine
+
+-   Style engine: Trim multiple selector strings. ([45873](https://github.com/WordPress/gutenberg/pull/45873))
+
+#### Block Library
+
+-   Heading Block: Add a wp-block-heading CSS class. ([42122](https://github.com/WordPress/gutenberg/pull/42122))
+-   Nav Block: Clarify explanation of how 'Convert to Links' works in Page List block. ([45394](https://github.com/WordPress/gutenberg/pull/45394))
+-   Nav Block: Add label field to navigation link and navigation submenu. ([45964](https://github.com/WordPress/gutenberg/pull/45964))
+-   Nav Block: Add link URL to the navigation submenu inspector controls. ([45816](https://github.com/WordPress/gutenberg/pull/45816))
+-   Nav Block: Fix for navigation anchor links to close modal. ([45829](https://github.com/WordPress/gutenberg/pull/45829))
+-   Template Part Block: Colorize template parts and Reusable blocks. ([45473](https://github.com/WordPress/gutenberg/pull/45473))
+-   List: Allow pasting pre/code. ([45016](https://github.com/WordPress/gutenberg/pull/45016))
+-   Page List: Enable page list to expand in list view. ([45776](https://github.com/WordPress/gutenberg/pull/45776))
+-   Page List: Add a starting page for page list block's hierarchy. ([45861](https://github.com/WordPress/gutenberg/pull/45861))
+-   Page List Item: Hide edit button. ([46163](https://github.com/WordPress/gutenberg/pull/46163))
+-   Site Logo: Apply width to logo container in editor. ([45821](https://github.com/WordPress/gutenberg/pull/45821))
+-   Table Block: Support colspan attribute in table HTML, including when pasting. ([45981](https://github.com/WordPress/gutenberg/pull/45981))
+
+#### Components
+
+-   Add themeable background color. ([45466](https://github.com/WordPress/gutenberg/pull/45466))
+-   Autocomplete: Only show UI on user input. ([45904](https://github.com/WordPress/gutenberg/pull/45904))
+-   Bump `DateTimePicker` deprecated prop removal version. ([46006](https://github.com/WordPress/gutenberg/pull/46006))
+-   ComboboxControl: Add new opt-in prop. ([45796](https://github.com/WordPress/gutenberg/pull/45796))
+-   FocalPointPicker: Add new opt-in prop. ([45958](https://github.com/WordPress/gutenberg/pull/45958))
+-   Global styles: Add onChange actions to color palette items. ([45681](https://github.com/WordPress/gutenberg/pull/45681))
+-   InputControl: Add `help` prop. ([45931](https://github.com/WordPress/gutenberg/pull/45931))
+-   RangeControl: Remove margin override and add new opt-in prop. ([45985](https://github.com/WordPress/gutenberg/pull/45985))
+-   SearchControl: Remove margin overrides and add new opt-in prop. ([46081](https://github.com/WordPress/gutenberg/pull/46081))
+-   Storybook: Opt in to story store v7. ([42486](https://github.com/WordPress/gutenberg/pull/42486))
+-   ToggleControl text overflows when it has a long label. ([45962](https://github.com/WordPress/gutenberg/pull/45962))
+-   useControlledValue: Let TypeScript infer the return type. ([46164](https://github.com/WordPress/gutenberg/pull/46164))
+
+#### Inspector Controls
+
+-   Sidebar: Add list view tab for Navigation block et al. ([45483](https://github.com/WordPress/gutenberg/pull/45483))
+-   Sidebar: Only render sidebar tabs possessing items to display. ([45991](https://github.com/WordPress/gutenberg/pull/45991))
+-   Sidebar: Rename appearance tab to styles. ([46027](https://github.com/WordPress/gutenberg/pull/46027))
+-   Sidebar: Split block tools into menu, settings, and appearance tabs. ([45005](https://github.com/WordPress/gutenberg/pull/45005))
+
+#### Design Tools
+
+-   Min Height: Add height control component with slider. ([45875](https://github.com/WordPress/gutenberg/pull/45875))
+-   Spacing: Make visualiser appear on focus. ([46096](https://github.com/WordPress/gutenberg/pull/46096))
+
+#### Block Editor
+
+-   [Inserter]: Replace text in `Reusable` tab with an icon. ([45851](https://github.com/WordPress/gutenberg/pull/45851))
+-   [Inserter]: Update pattern explorer button css. ([45735](https://github.com/WordPress/gutenberg/pull/45735))
+-   [Inserter]: Add media tab. ([44918](https://github.com/WordPress/gutenberg/pull/44918))
+
+#### Patterns
+
+-   [Pattern Directory]: Add categories endpoint. ([45749](https://github.com/WordPress/gutenberg/pull/45749))
+-   [Patterns]: Update pattern category descriptions. ([46005](https://github.com/WordPress/gutenberg/pull/46005))
+
+#### Nested / Inner Blocks
+
+-   Mark applying block templates not persistent. ([45843](https://github.com/WordPress/gutenberg/pull/45843))
+
+#### Rich Text
+
+-   Create undo level before autocorrect. ([45670](https://github.com/WordPress/gutenberg/pull/45670))
+
+#### Layout
+
+-   Add Layout controls to children of Flex layout blocks. ([45364](https://github.com/WordPress/gutenberg/pull/45364))
+
+### Bug Fixes
+
+#### Preferences
+
+-   Disable distraction free prefference effects on small viewports. ([45591](https://github.com/WordPress/gutenberg/pull/45591))
+
+#### Block Library
+
+-   List Block: Fixed a bug that List block attributes were reset in 6.1.1. ([46000](https://github.com/WordPress/gutenberg/pull/46000))
+-   Gallery: Use unbound query when fetching image details. ([46143](https://github.com/WordPress/gutenberg/pull/46143))
+-   Heading: Add block classname deprecation. ([46138](https://github.com/WordPress/gutenberg/pull/46138))
+-   Page List: If no parent page is set, still render all children. ([45967](https://github.com/WordPress/gutenberg/pull/45967))
+-   Page List: Render the children correctly in the editor. ([46165](https://github.com/WordPress/gutenberg/pull/46165))
+-   Post Author: Avoid errors when the user avatars are disabled. ([45989](https://github.com/WordPress/gutenberg/pull/45989))
+-   Nav Block: Navigation menu doesn't appear when hamburger clicked on. ([45773](https://github.com/WordPress/gutenberg/pull/45773))
+
+#### Block Editor
+
+-   Fix broken Link Control hook. ([46113](https://github.com/WordPress/gutenberg/pull/46113))
+-   Fix inserter tab panel content buttons' position. ([45800](https://github.com/WordPress/gutenberg/pull/45800))
+-   Block editor: rich text: Return early if \_\_experimentalUndo is not defined. ([46152](https://github.com/WordPress/gutenberg/pull/46152))
+
+#### Global Styles
+
+-   Global Style Context: Consider global user styles ready if a theme has none. ([46073](https://github.com/WordPress/gutenberg/pull/46073))
+-   Merged data should consider origin to return early. ([45969](https://github.com/WordPress/gutenberg/pull/45969))
+
+#### Components
+
+-   Remove CircleIndicatorWrapper `focus-visible` outline. ([45758](https://github.com/WordPress/gutenberg/pull/45758))
+-   `ColorPalette`: Show `Clear` button even when `colors` array is empty. ([46001](https://github.com/WordPress/gutenberg/pull/46001))
+
+#### Site Editor
+
+-   Fix template list width. ([45888](https://github.com/WordPress/gutenberg/pull/45888))
+-   Prevent edit-post from being loaded in edit-site. ([45895](https://github.com/WordPress/gutenberg/pull/45895))
+
+#### CSS & Styling
+
+-   Fix the editor area height. ([45799](https://github.com/WordPress/gutenberg/pull/45799))
+
+#### Full Site Editing
+
+-   Ensure post-featured-image block is in_the_loop() for BC with core and plugins, and to fix lazy-loading. ([45534](https://github.com/WordPress/gutenberg/pull/45534))
+
+### Accessibility
+
+-   Add "Testing Instructions for Keyboard" to PR template to encourage accessibility testing. ([45957](https://github.com/WordPress/gutenberg/pull/45957))
+-   BlockVariationPicker: Remove Unnecessary ARIA Role. ([45916](https://github.com/WordPress/gutenberg/pull/45916))
+-   Sidebar Tabs: Set default tab to first available. ([45998](https://github.com/WordPress/gutenberg/pull/45998))
+-   `TabPanel`: Support manual tab activation. ([46004](https://github.com/WordPress/gutenberg/pull/46004))
+-   -   Constrained tabbing: Fix unstable behavior in firefox. ([42653](https://github.com/WordPress/gutenberg/pull/42653))
+
+### Performance
+
+-   Work on refactor away from Lodash to reduce build size continued" ([see 13.7](https://make.wordpress.org/core/2022/07/20/whats-new-in-gutenberg-13-7-20-july/))
+
+#### Global Styles
+
+-   Add `WP_Object_Cache` to the `gutenberg_get_global_settings` method. ([45372](https://github.com/WordPress/gutenberg/pull/45372))
+-   Global styles WP_Query. ([46043](https://github.com/WordPress/gutenberg/pull/46043))
+-   Ignore cached `wp_theme_has_theme_json` when `WP_DEBUG` is enabled. ([45882](https://github.com/WordPress/gutenberg/pull/45882))
+-   Make `theme.json` object caches non persistent. ([46150](https://github.com/WordPress/gutenberg/pull/46150))
+-   Remove `test_global_styles_user_cpt_change_invalidates_cached_stylesheet`. ([45993](https://github.com/WordPress/gutenberg/pull/45993))
+-   Update `gutenberg_get_global_stylesheet` to use `WP_Object_Cache`. ([45679](https://github.com/WordPress/gutenberg/pull/45679))
+-   Update which origins are queried for `gutenberg_get_global_settings`. ([45971](https://github.com/WordPress/gutenberg/pull/45971))
+
+#### Post Editor
+
+-   useBlockEditorSettings: Return const empty array to avoid rerenders. ([46117](https://github.com/WordPress/gutenberg/pull/46117))
+
+#### Block Editor
+
+-   Update the attributes reducer to use a map instead of a regular object. ([46146](https://github.com/WordPress/gutenberg/pull/46146))
+
+### Experiments
+
+#### Block Library
+
+-   Nav Block: Add basic edit button UI to Nav block offcanvas editor. ([45815](https://github.com/WordPress/gutenberg/pull/45815))
+-   Nav Block: Add submenu menu item to list view. ([45794](https://github.com/WordPress/gutenberg/pull/45794))
+-   Nav Block: Alternative: Add inserter to Nav block offcanvas experiment. ([45947](https://github.com/WordPress/gutenberg/pull/45947))
+-   Nav Block: Display inserter popover in offcanvas UI. ([46013](https://github.com/WordPress/gutenberg/pull/46013))
+-   Nav Block: List View - Stop child item selecting a parent which is already selected. ([45860](https://github.com/WordPress/gutenberg/pull/45860))
+-   Nav Block: Add simple back button to inspector controls. ([45852](https://github.com/WordPress/gutenberg/pull/45852))
+-   Nav Block: Move color controls to support panel. ([46049](https://github.com/WordPress/gutenberg/pull/46049))
+-   Nav Block: Enable easier drag and drop for navigation building. ([45906](https://github.com/WordPress/gutenberg/pull/45906))
+-   Nav Block: Hide the create new menu button if the experiment is enabled. ([46019](https://github.com/WordPress/gutenberg/pull/46019))
+-   Navigation List view: Fix incorect class. ([46129](https://github.com/WordPress/gutenberg/pull/46129))
+-   Navigation List view: Include offcanvas specific styles. ([45963](https://github.com/WordPress/gutenberg/pull/45963))
+-   Navigation List view: Scroll horizontally when table overflows. ([45966](https://github.com/WordPress/gutenberg/pull/45966))
+
+### Documentation
+
+-   (docs) Document the special case of shipping point releases when new release branch already exists. ([46083](https://github.com/WordPress/gutenberg/pull/46083))
+-   Added InspectorControls import to example. ([45872](https://github.com/WordPress/gutenberg/pull/45872))
+-   Fix NavigableRegion README. ([45879](https://github.com/WordPress/gutenberg/pull/45879))
+-   Fix link & code markdown. ([45708](https://github.com/WordPress/gutenberg/pull/45708))
+-   Navigation: Adds a warning about duplicate code for the future. ([45844](https://github.com/WordPress/gutenberg/pull/45844))
+-   Storybook: Add link to component folder on GitHub, retire Storysource. ([45727](https://github.com/WordPress/gutenberg/pull/45727))
+-   Style Engine: Add first draft of contributing doc. ([45930](https://github.com/WordPress/gutenberg/pull/45930))
+-   Update applying-styles-with-stylesheets.md. ([45925](https://github.com/WordPress/gutenberg/pull/45925))
+
+### Code Quality
+
+#### Components
+
+-   Cleanup the BlockPreview component. ([45936](https://github.com/WordPress/gutenberg/pull/45936))
+-   Convert the `Snackbar` component to TypeScript. ([45472](https://github.com/WordPress/gutenberg/pull/45472))
+-   Fix ESLint violations in `ContextSystemProvider` tests. ([46010](https://github.com/WordPress/gutenberg/pull/46010))
+-   Fix ESLint violations in `NoticeList` tests. ([46011](https://github.com/WordPress/gutenberg/pull/46011))
+-   Fix `no-node-access` in `Grid` tests. ([45900](https://github.com/WordPress/gutenberg/pull/45900))
+-   Fix `no-node-access` in `Sandbox` tests. ([45908](https://github.com/WordPress/gutenberg/pull/45908))
+-   Fix `no-node-access` in `Text` tests. ([45898](https://github.com/WordPress/gutenberg/pull/45898))
+-   Fix `no-node-access` in `Theme` tests. ([45896](https://github.com/WordPress/gutenberg/pull/45896))
+-   Fix `no-node-access` violation in `ControlLabel` tests. ([46007](https://github.com/WordPress/gutenberg/pull/46007))
+-   Fix `no-node-access` violations in `Card` tests. ([46158](https://github.com/WordPress/gutenberg/pull/46158))
+-   Fix `no-node-access` violations in `Disabled` tests. ([46156](https://github.com/WordPress/gutenberg/pull/46156))
+-   Improve `BoxControl` tests. ([45968](https://github.com/WordPress/gutenberg/pull/45968))
+-   Improve `Dropdown` tests. ([45911](https://github.com/WordPress/gutenberg/pull/45911))
+-   LinkedButton: Remove unnecessary span tag. ([46063](https://github.com/WordPress/gutenberg/pull/46063))
+-   TextControl: Restrict `type` prop in TypeScript. ([45433](https://github.com/WordPress/gutenberg/pull/45433))
+-   Tooltip: Add readme and unit tests for `shortcut` prop. ([46092](https://github.com/WordPress/gutenberg/pull/46092))
+-   `NumberControl`: Refactor styles/tests/stories to TypeScript, replace `fireEvent` with `user-event`. ([45990](https://github.com/WordPress/gutenberg/pull/45990))
+-   useBaseField: Convert component to TypeScript. ([45712](https://github.com/WordPress/gutenberg/pull/45712))
+-   Small refactoring to the NavigableRegion component. ([45849](https://github.com/WordPress/gutenberg/pull/45849))
+
+#### Block Library
+
+-   ESLint: Fix minor ESLint warning in `LinkUI`. ([46161](https://github.com/WordPress/gutenberg/pull/46161))
+-   Fix ESLint warnings in tests. ([46034](https://github.com/WordPress/gutenberg/pull/46034))
+-   Fix invalid attribute markup in core/home-link block. ([46089](https://github.com/WordPress/gutenberg/pull/46089))
+-   Link UI: Destructure the props earlier in the component. ([46209](https://github.com/WordPress/gutenberg/pull/46209))
+-   Navigation Link UI: Try to align both files. ([46205](https://github.com/WordPress/gutenberg/pull/46205))
+-   Navigation Menu Selector: Share the functions needed for the NavigationMenuSelector. ([46053](https://github.com/WordPress/gutenberg/pull/46053))
+-   Navigation: Extract components. ([45850](https://github.com/WordPress/gutenberg/pull/45850))
+-   Navigation: Reduce duplicate code. ([45779](https://github.com/WordPress/gutenberg/pull/45779))
+-   Navigation: Remove unused clientId prop. ([46020](https://github.com/WordPress/gutenberg/pull/46020))
+-   Post Featured Image: Only get the post title when rendering alt text. ([45835](https://github.com/WordPress/gutenberg/pull/45835))
+-   Reduce prop drilling in Block Card component. ([46052](https://github.com/WordPress/gutenberg/pull/46052))
+-   Refactor link creation UI to standalone component/file. ([46031](https://github.com/WordPress/gutenberg/pull/46031))
+-   Remove Nav block specific classes from Nav offcanvas Link UI. ([46182](https://github.com/WordPress/gutenberg/pull/46182))
+-   Remove WrappedNavigationMenuSelector. ([46056](https://github.com/WordPress/gutenberg/pull/46056))
+-   Update offcanvas back button to select parent Nav block and limited to Nav block only. ([46037](https://github.com/WordPress/gutenberg/pull/46037))
+-   Don't check if constants set by `wp_initial_constants()` are defined. ([45979](https://github.com/WordPress/gutenberg/pull/45979))
+
+#### Block Editor
+
+-   LinkControl unit tests: Use user.type to type into search field. ([45802](https://github.com/WordPress/gutenberg/pull/45802))
+-   Simplify api for link UI abstraction to use a single prop for the value. ([46189](https://github.com/WordPress/gutenberg/pull/46189))
+-   URLInput: Keep the search results label in sync with the results list. ([45806](https://github.com/WordPress/gutenberg/pull/45806))
+-   Use @wordpress/escape-html escapeHTML in Link UI in preference to Lodash method. ([46184](https://github.com/WordPress/gutenberg/pull/46184))
+
+#### Global Styles
+
+-   Cleaner logic in wp_theme_has_theme_json. ([45950](https://github.com/WordPress/gutenberg/pull/45950))
+-   Remove usage of wp_get_theme. ([45770](https://github.com/WordPress/gutenberg/pull/45770))
+
+#### Post Editor
+
+-   Update BlockCard to pass className instead of isSynced prop. ([46021](https://github.com/WordPress/gutenberg/pull/46021))
+
+#### Full Site Editing
+
+-   Block editor: Separate content styles for the iframe. ([44298](https://github.com/WordPress/gutenberg/pull/44298))
+
+### Tools
+
+#### Build Tooling
+
+-   Bump caniuse-lite version. ([46093](https://github.com/WordPress/gutenberg/pull/46093))
+
+#### Testing
+
+-   Fix Quote block's unwrap end-to-end test. ([46168](https://github.com/WordPress/gutenberg/pull/46168))
+-   Remove 'response.deleted' check. ([45992](https://github.com/WordPress/gutenberg/pull/45992))
+-   Warning: Fix ESLint warnings in tests. ([46033](https://github.com/WordPress/gutenberg/pull/46033))
+-   ESLint: Enable `testing-library/no-container` rule. ([46160](https://github.com/WordPress/gutenberg/pull/46160))
+-   Element: Fix `no-node-access` in `createInterpolateElement`. ([45894](https://github.com/WordPress/gutenberg/pull/45894))
+-   Block Editor: Fix ESLint warnings in `MediaUpload` tests. ([46035](https://github.com/WordPress/gutenberg/pull/46035))
+-   Block Editor: Fix `no-node-access` in `RecursionProvider` tests. ([45902](https://github.com/WordPress/gutenberg/pull/45902))
+-   Block Editor: Fix block alignment tests for React 18. ([45937](https://github.com/WordPress/gutenberg/pull/45937))
+-   Block Editor: Wait for popover positioning in `MediaReplaceFlow` tests. ([45863](https://github.com/WordPress/gutenberg/pull/45863))
+-   Compose: Fix 'no-container' violations in 'useDisabled' tests. ([45797](https://github.com/WordPress/gutenberg/pull/45797))
+-   Compose: Fix ESLint violations in `withGlobalEvents` tests. ([46012](https://github.com/WordPress/gutenberg/pull/46012))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @albarin: Remove 'response.deleted' check. ([45992](https://github.com/WordPress/gutenberg/pull/45992))
+-   @artemiomorales: Clarify explanation of how 'Convert to Links' works in Page List block. ([45394](https://github.com/WordPress/gutenberg/pull/45394))
+-   @coreyworrell: Fix for navigation anchor links to close modal. ([45829](https://github.com/WordPress/gutenberg/pull/45829))
+-   @devanshijoshi9: Components: ToggleControl text overflows when it has a long label. ([45962](https://github.com/WordPress/gutenberg/pull/45962))
+-   @flexseth: Added InspectorControls import to example. ([45872](https://github.com/WordPress/gutenberg/pull/45872))
+-   @hiyascout: Update applying-styles-with-stylesheets.md. ([45925](https://github.com/WordPress/gutenberg/pull/45925))
+-   @marissa-makes: BlockVariationPicker: Remove Unnecessary ARIA Role. ([45916](https://github.com/WordPress/gutenberg/pull/45916))
+-   @mpkelly: Support `colspan` attribute in `table` HTML, including when pasting. ([45981](https://github.com/WordPress/gutenberg/pull/45981))
+-   @TobiasBg: Fix invalid attribute markup in core/home-link block. ([46089](https://github.com/WordPress/gutenberg/pull/46089))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @afercia @ajlende @albarin @alexstine @andrewserong @artemiomorales @brookewp @chad1008 @ciampo @coreyworrell @ddryo @devanshijoshi9 @draganescu @ellatrix @felixarntz @flexseth @fullofcaffeine @geriux @getdave @glendaviesnz @gvgvgvijayan @hiyascout @jsnajdr @kienstra @MaggieCabrera @Mamaduka @marissa-makes @mikachan @mirka @mmtr @mpkelly @ntsekouras @oandregal @ocean90 @oguzkocer @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @t-hamano @tellthemachines @TobiasBg @tyxla @walbo @youknowriad
+
+= 14.6.1 =
 
 ## Changelog
 
 ### Fixes
 
 #### Global Styles
-- Fix the `upgrader_process_complete` hook for `wp_theme_has_theme_json`. ([45881](https://github.com/WordPress/gutenberg/pull/45881))
+
+-   Fix the `upgrader_process_complete` hook for `wp_theme_has_theme_json`. ([45881](https://github.com/WordPress/gutenberg/pull/45881))
+-   Update `wp_theme_has_theme_json` to use `WP_Object_Cache`. ([45543](https://github.com/WordPress/gutenberg/pull/45543))
+
+### Bug Fixes
+
+-   Tag Processor: Prevent bugs from pre-PHP8 strspn/strcspn behavior. ([45822](https://github.com/WordPress/gutenberg/pull/45822))
 
 ## Contributors
 
 The following contributors merged PRs in this release:
 
-@oandregal
+@oandregal @dmsnell
+
+= 14.6.0 =
 
+## Changelog
 
+### Enhancements
 
-= 14.5.3 =
+#### Block Library
 
+-   Latest posts: Add color support. ([41874](https://github.com/WordPress/gutenberg/pull/41874))
+-   Latest posts and latest comments: Add spacing support. ([45110](https://github.com/WordPress/gutenberg/pull/45110))
+-   Navigation: Adds a list view. ([45546](https://github.com/WordPress/gutenberg/pull/45546))
+-   Navigation: Add a new ManageMenusButton component. ([45782](https://github.com/WordPress/gutenberg/pull/45782))
+-   Navigation: Reposition the navigation selector. ([45555](https://github.com/WordPress/gutenberg/pull/45555))
+-   Navigation Link: Add the URL field to the Navigation Link inspector controls. ([45751](https://github.com/WordPress/gutenberg/pull/45751))
+-   Author: Make the Author selector display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
+-   Columns: Add transform to unwrap the contents. ([45666](https://github.com/WordPress/gutenberg/pull/45666))
+-   Read More: Add aria-label and screen reader text. ([45490](https://github.com/WordPress/gutenberg/pull/45490))
+-   Group: Use a variation picker in the placeholder. ([43496](https://github.com/WordPress/gutenberg/pull/43496))
 
+#### Components
 
-## Changelog
+-   Use new theming accent color in all components. ([45289](https://github.com/WordPress/gutenberg/pull/45289))
+-   CheckboxControl: Replace margin overrides with new opt-in prop. ([45434](https://github.com/WordPress/gutenberg/pull/45434))
+-   FocalPointPicker: Update the design of the focal point handle. ([45053](https://github.com/WordPress/gutenberg/pull/45053))
+-   FontSizePicker: Update hint text to match the design. ([44966](https://github.com/WordPress/gutenberg/pull/44966))
+-   CheckboxControl: Move icons out of labels. ([45535](https://github.com/WordPress/gutenberg/pull/45535))
 
-### Performance
+#### Block Editor
+
+-   Converts paragraphs to headings with keyboard shortcuts. ([44681](https://github.com/WordPress/gutenberg/pull/44681))
+-   Restore the empty paragraph inserter. ([45542](https://github.com/WordPress/gutenberg/pull/45542))
+-   Transform: Select all blocks if the result has more than one block. ([45015](https://github.com/WordPress/gutenberg/pull/45015))
+-   Content-only locked patterns: Move "Modify" to the ellipsis menu. ([45391](https://github.com/WordPress/gutenberg/pull/45391))
+-   Patterns: Adjust the space in the pattern explorer list. ([45730](https://github.com/WordPress/gutenberg/pull/45730))
+-   Update: Lock icon to outline. ([45645](https://github.com/WordPress/gutenberg/pull/45645))
+-   Don't use capital case for 'Distraction free' strings. ([45538](https://github.com/WordPress/gutenberg/pull/45538))
+-   Replace Justification/Orientation controls with ToggleGroupControl. ([45637](https://github.com/WordPress/gutenberg/pull/45637))
+
+#### Site Editor
+
+-   Replace FSE with Site Editor. ([45699](https://github.com/WordPress/gutenberg/pull/45699))
+
+#### Design Tools
+
+-   Add a minHeight block support under dimensions. ([45300](https://github.com/WordPress/gutenberg/pull/45300))
+-   Hide the block toolbar when the spacing visualizer is showing. ([45131](https://github.com/WordPress/gutenberg/pull/45131))
 
 #### Global Styles
-- Update `wp_theme_has_theme_json` to use `WP_Object_Cache`. ([45543](https://github.com/WordPress/gutenberg/pull/45543))
 
+-   Elements: Add a text decoration control to link elements. ([45643](https://github.com/WordPress/gutenberg/pull/45643))
+-   Global styles: Convert preset font size values to CSS vars. ([44967](https://github.com/WordPress/gutenberg/pull/44967))
+-   Fluid typography: Adjust font size min and max rules. ([45536](https://github.com/WordPress/gutenberg/pull/45536))
+-   Try generating random color palettes. ([40988](https://github.com/WordPress/gutenberg/pull/40988))
 
-## First time contributors
+#### Plugin
 
-The following PRs were merged by first time contributors:
+-   Updates tested up to version to 6.1. ([45630](https://github.com/WordPress/gutenberg/pull/45630))
+
+#### Patterns
+
+-   Pattern Directory API: Add support for pagination parameters. ([45293](https://github.com/WordPress/gutenberg/pull/45293))
+-   Update bundled patterns compat directory. ([45620](https://github.com/WordPress/gutenberg/pull/45620))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Change the order of the pseudo-states in the pseudo-selectors array. ([45559](https://github.com/WordPress/gutenberg/pull/45559))
+-   Cover: Avoid content loss when the templateLock value is all or contentOnly. ([45632](https://github.com/WordPress/gutenberg/pull/45632))
+-   Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
+-   Fix navigation appender position to prevent obstructing its items. ([43530](https://github.com/WordPress/gutenberg/pull/43530))
+-   Fix: Button block text alignment. ([45663](https://github.com/WordPress/gutenberg/pull/45663))
+-   Query Pagination: Fix positioning of the next link in editor when the parent is selected. ([45651](https://github.com/WordPress/gutenberg/pull/45651))
+-   Site Logo: Use the correct home URL setting. ([45476](https://github.com/WordPress/gutenberg/pull/45476))
+-   Switch background color to text color on the block separator. ([44943](https://github.com/WordPress/gutenberg/pull/44943))
+-   Table Block: Apply borders and padding on both front end and editor. ([45069](https://github.com/WordPress/gutenberg/pull/45069))
+-   Table block: Fix error in margin value. ([45674](https://github.com/WordPress/gutenberg/pull/45674))
+-   Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
+-   Navigation: Fix overflowing menu name in the navigation selector dropdown. ([45647](https://github.com/WordPress/gutenberg/pull/45647))
+
+#### Accessibility
+
+-   Fix focus return when closing the Post publish panel. ([45623](https://github.com/WordPress/gutenberg/pull/45623))
+-   Fix navigate regions backwards for macOS Firefox and Safari. ([45019](https://github.com/WordPress/gutenberg/pull/45019))
+-   Fix the Save buttons labeling and tooltip. ([43952](https://github.com/WordPress/gutenberg/pull/43952))
+-   Fix the navigate regions focus style. ([45369](https://github.com/WordPress/gutenberg/pull/45369))
+-   Fix: Contrast checker appears unexpectedly on some blocks. ([45639](https://github.com/WordPress/gutenberg/pull/45639))
+-   Fix: Contrast checker does not update properly. ([45686](https://github.com/WordPress/gutenberg/pull/45686))
+
+#### Components
+
+-   Autocomplete: Fix unexpected block insertion during IME composition. ([45510](https://github.com/WordPress/gutenberg/pull/45510))
+-   Fix ESLint warning for Dashicon. ([45795](https://github.com/WordPress/gutenberg/pull/45795))
+-   FormTokenField: Fix duplicate input in IME composition. ([45607](https://github.com/WordPress/gutenberg/pull/45607))
+-   Making size prop work for icon components using dash icon strings. ([45593](https://github.com/WordPress/gutenberg/pull/45593))
+-   ToolsPanel: Prevent calling deselect when panel remounts. ([45673](https://github.com/WordPress/gutenberg/pull/45673))
+-   Color Picker: Prevent all number fields to become 0 when one of them is an empty string. ([45649](https://github.com/WordPress/gutenberg/pull/45649))
+-   ToggleGroupControl: Only show the enclosing border when `isBlock`. ([45492](https://github.com/WordPress/gutenberg/pull/45492))
+-   Autocomplete: Check key events more strictly in IME composition. ([45626](https://github.com/WordPress/gutenberg/pull/45626))
+
+#### CSS & Styling
+
+-   Inherit font from theme on overlay close button. ([45635](https://github.com/WordPress/gutenberg/pull/45635))
+-   Navigation: Fix font inheritance when using text menu button. ([45514](https://github.com/WordPress/gutenberg/pull/45514))
+-   Remove hover style to button on dark block tools UI. ([45653](https://github.com/WordPress/gutenberg/pull/45653))
+-   Remove width from block mover button focus style. ([45665](https://github.com/WordPress/gutenberg/pull/45665))
+-   Site editor hover/select: Fix double border. ([45589](https://github.com/WordPress/gutenberg/pull/45589))
+-   Remove duplicate output of existing classnames in layout classnames. ([45499](https://github.com/WordPress/gutenberg/pull/45499))
+
+#### Post Editor
+
+-   BlockManagerCategory: Fix styles for indeterminate. ([45564](https://github.com/WordPress/gutenberg/pull/45564))
+-   Fix: Updated names from List View to Document Overview. ([45524](https://github.com/WordPress/gutenberg/pull/45524))
+-   Strip HTML from Post Title when pasting multiline title containing HTML. ([35825](https://github.com/WordPress/gutenberg/pull/35825))
+
+#### Site Editor
 
+-   Decode entities in template title and description. ([45716](https://github.com/WordPress/gutenberg/pull/45716))
+-   Link to homeUrl from site editor view menu. ([45475](https://github.com/WordPress/gutenberg/pull/45475))
 
+#### Block Editor
+
+-   Fix Link UI popover positioning when inspector control input is focused. ([45661](https://github.com/WordPress/gutenberg/pull/45661))
+-   Paste: Fix list only paste from Google documentation. ([45498](https://github.com/WordPress/gutenberg/pull/45498))
+-   Make Manage Reusable blocks match similar links. ([45641](https://github.com/WordPress/gutenberg/pull/45641))([45689](https://github.com/WordPress/gutenberg/pull/45689))
+-   List View: Disable branch expansion when block editing is locked. ([45541](https://github.com/WordPress/gutenberg/pull/45541))
+-   Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. ([45739](https://github.com/WordPress/gutenberg/pull/45739))
+
+### Experiments
+
+-   A list view duplicate for use in navigation list view experiment. ([45544](https://github.com/WordPress/gutenberg/pull/45544))
+-   Introduce experiment for inspector based navigation editing. ([45515](https://github.com/WordPress/gutenberg/pull/45515))
+
+### Documentation
+
+-   Add missing CHANGELOG entry. ([45691](https://github.com/WordPress/gutenberg/pull/45691))
+-   Change Title: How to use JavaScript with Gutenberg. ([45323](https://github.com/WordPress/gutenberg/pull/45323))
+-   Docs: Update the readme for the integration test fixtures. ([45581](https://github.com/WordPress/gutenberg/pull/45581))
+-   Summarize "Available commands" section and refer them it to `scripts` documentation. ([45636](https://github.com/WordPress/gutenberg/pull/45636))
+-   Update applying-styles-with-stylesheets.md. ([45604](https://github.com/WordPress/gutenberg/pull/45604))
+-   [create-block] Reorganized sections to provide a better learning experience of this package. ([45676](https://github.com/WordPress/gutenberg/pull/45676))
+-   Change "block style variations" references to "block style". ([45650](https://github.com/WordPress/gutenberg/pull/45650))
+
+### Performance
+
+-   Lodash: Refactor away from `_.reduce()`. ([45460](https://github.com/WordPress/gutenberg/pull/45460))
+-   Lodash: Refactor block editor away from `_.reduce()`. ([45455](https://github.com/WordPress/gutenberg/pull/45455))
+-   Lodash: Refactor blocks away from `_.reduce()`. ([45457](https://github.com/WordPress/gutenberg/pull/45457))
+-   Lodash: Refactor site editor away from `_.reduce()`. ([45459](https://github.com/WordPress/gutenberg/pull/45459))
+-   Lodash: Refactor post editor away from `_.reduce()`. ([45458](https://github.com/WordPress/gutenberg/pull/45458))
+-   Do not look for block variants, if not supporting block-templates. ([45362](https://github.com/WordPress/gutenberg/pull/45362))
+-   List: Disable nested list drop zone so dropping list items works. ([45321](https://github.com/WordPress/gutenberg/pull/45321))
+-   Use low-level cache for get_user_data_from_wp_global_styles. ([45634](https://github.com/WordPress/gutenberg/pull/45634))
+-   Update: Improve performance of block template object retrieval. ([45646](https://github.com/WordPress/gutenberg/pull/45646))
+
+### Code Quality
+
+#### Block Editor
+
+-   Block Editor: Improve `LinkControl` tests. ([45609](https://github.com/WordPress/gutenberg/pull/45609))
+-   Block Editor: Improve `ResponsiveBlockControl` tests. ([45610](https://github.com/WordPress/gutenberg/pull/45610))
+-   Block Editor: Improve `ReusableBlocksTab` tests. ([45652](https://github.com/WordPress/gutenberg/pull/45652))
+-   LinkControl: Suppress errors on null values. ([45742](https://github.com/WordPress/gutenberg/pull/45742))
+-   Simplify ResizableEditor component. ([45578](https://github.com/WordPress/gutenberg/pull/45578))
+-   Remove duplicate colon. ([45763](https://github.com/WordPress/gutenberg/pull/45763))
+-   Extract the manage menus button to a shared component to reduce duplicate code. ([45769](https://github.com/WordPress/gutenberg/pull/45769))
+-   Backport pseudo selector comments from core. ([45619](https://github.com/WordPress/gutenberg/pull/45619))
+-   unstableSubscribeStore: Support store descriptors. ([45481](https://github.com/WordPress/gutenberg/pull/45481))
+
+#### Components
+
+-   BaseField: Remove unnecessary `.firstChild` from tests. ([45687](https://github.com/WordPress/gutenberg/pull/45687))
+-   DateTime: Remove unused types. ([45615](https://github.com/WordPress/gutenberg/pull/45615))
+-   Draggable: Convert component to TypeScript. ([45471](https://github.com/WordPress/gutenberg/pull/45471))
+-   Fix `no-container` violations in `FormGroup` tests. ([45662](https://github.com/WordPress/gutenberg/pull/45662))
+-   Fix `testing-library/no-node-access` in `TreeGrid` tests. ([45554](https://github.com/WordPress/gutenberg/pull/45554))
+-   FontSizePicker: Use components instead of helper functions. ([44891](https://github.com/WordPress/gutenberg/pull/44891))
+-   Improve tests for `ToggleGroupControl`. ([45627](https://github.com/WordPress/gutenberg/pull/45627))
+-   MenuGroup: Convert component to TypeScript. ([45617](https://github.com/WordPress/gutenberg/pull/45617))
+-   Popover: Fix exhaustive-deps warning. ([45656](https://github.com/WordPress/gutenberg/pull/45656))
+-   Refactor `ItemGroup` to pass `exhaustive-deps`. ([45531](https://github.com/WordPress/gutenberg/pull/45531))
+-   Refactor `useFlex` to pass `exhaustive-deps`. ([45528](https://github.com/WordPress/gutenberg/pull/45528))
+-   Refactor `withNotices` to pass `exhaustive-deps`. ([45530](https://github.com/WordPress/gutenberg/pull/45530))
+-   Refactor`PaletteEditListView` to ignore `exhaustive-deps`. ([45467](https://github.com/WordPress/gutenberg/pull/45467))
+-   TabPanel: Fix the `exhaustive-deps` warning. ([45660](https://github.com/WordPress/gutenberg/pull/45660))
+-   ToolsPanel: Fix exhaustive-deps hook warning. ([45715](https://github.com/WordPress/gutenberg/pull/45715))
+-   Truncate: Remove unnecessary `.firstChild` from tests. ([45694](https://github.com/WordPress/gutenberg/pull/45694))
+-   View component: Rename index.js to index.ts. ([45667](https://github.com/WordPress/gutenberg/pull/45667))
+-   `ColorPalette`, `BorderBox`, `BorderBoxControl`: Polish and DRY prop types, add default values. ([45463](https://github.com/WordPress/gutenberg/pull/45463))
+-   `NavigatorScreen`: Satisfy `exhaustive-deps` eslint rule. ([45648](https://github.com/WordPress/gutenberg/pull/45648))
+-   Fix `useCx` story to satisfy `exhaustive-deps` eslint rule. ([45614](https://github.com/WordPress/gutenberg/pull/45614))
+-   URLPopover: Use new placement prop instead of legacy position prop. ([44391](https://github.com/WordPress/gutenberg/pull/44391))
+-   Tidy and minor refactor of Link UI code. ([37833](https://github.com/WordPress/gutenberg/pull/37833))
+
+#### Block Library
+
+-   Avatar: Escape the 'get_author_posts_url()'. ([45427](https://github.com/WordPress/gutenberg/pull/45427))
+-   Button: Remove unnecessary 'useCallback'. ([45584](https://github.com/WordPress/gutenberg/pull/45584))
+-   Make unwrapping columns slighly more efficient. ([45684](https://github.com/WordPress/gutenberg/pull/45684))
+-   Simplfy handling of save of Nav block uncontrolled inner blocks. ([45517](https://github.com/WordPress/gutenberg/pull/45517))
+-   Lodash: Refactor block library away from `_.reduce()`. ([45456](https://github.com/WordPress/gutenberg/pull/45456))
+
+### Tools
+
+#### Testing
+
+-   Components: Add `exhaustive-deps` eslint rule. ([41166](https://github.com/WordPress/gutenberg/pull/41166))
+-   Fix typos in Paragraph block end-to-end tests. ([45611](https://github.com/WordPress/gutenberg/pull/45611))
+-   FontSizePicker: Fix a buggy unit test. ([45529](https://github.com/WordPress/gutenberg/pull/45529))
+-   Ignore warnings for `window.wp` in Playwright. ([45598](https://github.com/WordPress/gutenberg/pull/45598))
+-   Migrate mentions tests to playwright. ([43064](https://github.com/WordPress/gutenberg/pull/43064))
+-   Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. ([45726](https://github.com/WordPress/gutenberg/pull/45726))
+-   React Native unit tests: Migrate getByA11yLabel usages. ([45454](https://github.com/WordPress/gutenberg/pull/45454))
+-   Unit Tests: Rewrite ReactDOM.render usages to RTL. ([45453](https://github.com/WordPress/gutenberg/pull/45453))
+-   E2E: Add site and widget editor supports for ensureSidebarOpened. ([45480](https://github.com/WordPress/gutenberg/pull/45480))
+
+#### Build Tooling
+
+-   Include TS and JSX files to testing-library lint. ([45533](https://github.com/WordPress/gutenberg/pull/45533))
+-   Remove use of `set-output` in workflows. ([45357](https://github.com/WordPress/gutenberg/pull/45357))
+
+#### Triage
+
+-   Configure labels for GHA Dependabot PRs. ([45516](https://github.com/WordPress/gutenberg/pull/45516))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+-   @edanzer: Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
+-   @TimBroddin: Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
+-   @wojtekn: Make Author block selector to display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @andrewserong @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @Copons @DaisyOlsen @desrosj @dinhtungdu @draganescu @dsas @edanzer @ellatrix @enejb @flootr @getdave @glendaviesnz @hz-tyfoon @jasmussen @javierarce @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @juhi123 @kevin940726 @Mamaduka @matiasbenedetto @mikachan @mirka @mmtr @mtias @ndiego @nielslange @noisysocks @ntsekouras @peterwilsoncc @ramonjd @ryelle @scruffian @spacedmonkey @t-hamano @TimBroddin @tyxla @vcanales @walbo @wojtekn @youknowriad @yuliyan
+
+= 14.5.4 =
+
+## Changelog
+
+### Fixes
+
+#### Global Styles
+
+-   Fix the `upgrader_process_complete` hook for `wp_theme_has_theme_json`. ([45881](https://github.com/WordPress/gutenberg/pull/45881))
 
 ## Contributors
 
@@ -41,16 +23980,33 @@ The following contributors merged PRs in this release:
 
 @oandregal
 
+= 14.5.3 =
 
-= 14.5.2 =
+## Changelog
+
+### Performance
+
+#### Global Styles
+
+-   Update `wp_theme_has_theme_json` to use `WP_Object_Cache`. ([45543](https://github.com/WordPress/gutenberg/pull/45543))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+## Contributors
+
+The following contributors merged PRs in this release:
 
+@oandregal
 
+= 14.5.2 =
 
 ## Changelog
 
 ### Bug Fixes
 
-- Tag Processor: Prevent bugs from pre-PHP8 strspn/strcspn behavior. ([45822](https://github.com/WordPress/gutenberg/pull/45822))
+-   Tag Processor: Prevent bugs from pre-PHP8 strspn/strcspn behavior. ([45822](https://github.com/WordPress/gutenberg/pull/45822))
 
 ## Contributors
 
@@ -58,7 +24014,6 @@ The following contributors merged PRs in this release:
 
 @dmsnell
 
-
 = 14.6.0-rc.1 =
 
 ## Changelog
@@ -66,226 +24021,237 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Block Library
-- Add color block support to latest posts. ([41874](https://github.com/WordPress/gutenberg/pull/41874))
-- Adds a list view to the navigation block. ([45546](https://github.com/WordPress/gutenberg/pull/45546))
-- Latest posts and latest comments: Add spacing support. ([45110](https://github.com/WordPress/gutenberg/pull/45110))
-- Navigation Link: Add the URL field to the Navigation Link inspector controls. ([45751](https://github.com/WordPress/gutenberg/pull/45751))
-- Reposition navigation selector. ([45555](https://github.com/WordPress/gutenberg/pull/45555))
-- Make Author block selector to display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
-- Columns: Add transform to unwrap the contents. ([45666](https://github.com/WordPress/gutenberg/pull/45666))
-- Navigation: Add a new ManageMenusButton component. ([45782](https://github.com/WordPress/gutenberg/pull/45782))
-- Read More block: Add aria-label and screen reader text. ([45490](https://github.com/WordPress/gutenberg/pull/45490))
-- Group block: Use a variation picker in the placeholder. ([43496](https://github.com/WordPress/gutenberg/pull/43496))
+
+-   Add color block support to latest posts. ([41874](https://github.com/WordPress/gutenberg/pull/41874))
+-   Adds a list view to the navigation block. ([45546](https://github.com/WordPress/gutenberg/pull/45546))
+-   Latest posts and latest comments: Add spacing support. ([45110](https://github.com/WordPress/gutenberg/pull/45110))
+-   Navigation Link: Add the URL field to the Navigation Link inspector controls. ([45751](https://github.com/WordPress/gutenberg/pull/45751))
+-   Reposition navigation selector. ([45555](https://github.com/WordPress/gutenberg/pull/45555))
+-   Make Author block selector to display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
+-   Columns: Add transform to unwrap the contents. ([45666](https://github.com/WordPress/gutenberg/pull/45666))
+-   Navigation: Add a new ManageMenusButton component. ([45782](https://github.com/WordPress/gutenberg/pull/45782))
+-   Read More block: Add aria-label and screen reader text. ([45490](https://github.com/WordPress/gutenberg/pull/45490))
+-   Group block: Use a variation picker in the placeholder. ([43496](https://github.com/WordPress/gutenberg/pull/43496))
 
 #### Components
-- CheckboxControl: Replace margin overrides with new opt-in prop. ([45434](https://github.com/WordPress/gutenberg/pull/45434))
-- FontSizePicker: Update hint text to match the design. ([44966](https://github.com/WordPress/gutenberg/pull/44966))
-- Update the design of the focal point handle. ([45053](https://github.com/WordPress/gutenberg/pull/45053))
-- Use new theming accent color in all components. ([45289](https://github.com/WordPress/gutenberg/pull/45289))
-- CheckboxControl: Move icons out of labels. ([45535](https://github.com/WordPress/gutenberg/pull/45535))
+
+-   CheckboxControl: Replace margin overrides with new opt-in prop. ([45434](https://github.com/WordPress/gutenberg/pull/45434))
+-   FontSizePicker: Update hint text to match the design. ([44966](https://github.com/WordPress/gutenberg/pull/44966))
+-   Update the design of the focal point handle. ([45053](https://github.com/WordPress/gutenberg/pull/45053))
+-   Use new theming accent color in all components. ([45289](https://github.com/WordPress/gutenberg/pull/45289))
+-   CheckboxControl: Move icons out of labels. ([45535](https://github.com/WordPress/gutenberg/pull/45535))
 
 #### Block Editor
-- Converts paragraphs to headings with keyboard shortcuts. ([44681](https://github.com/WordPress/gutenberg/pull/44681))
-- Restore the empty paragraph inserter. ([45542](https://github.com/WordPress/gutenberg/pull/45542))
-- Transform: Select all blocks if the result has more than one block. ([45015](https://github.com/WordPress/gutenberg/pull/45015))
-- Content-only locked patterns: Move "Modify" to elllipsis menu. ([45391](https://github.com/WordPress/gutenberg/pull/45391))
-- Patterns: Ajust the space in the pattern explorer list. ([45730](https://github.com/WordPress/gutenberg/pull/45730))
-- Update: Lock icon to outline. ([45645](https://github.com/WordPress/gutenberg/pull/45645))
-- Don't use capital case for 'Distraction free' strings. ([45538](https://github.com/WordPress/gutenberg/pull/45538))
-- Replace Justification/Orientation controls with ToggleGroupControl. ([45637](https://github.com/WordPress/gutenberg/pull/45637))
+
+-   Converts paragraphs to headings with keyboard shortcuts. ([44681](https://github.com/WordPress/gutenberg/pull/44681))
+-   Restore the empty paragraph inserter. ([45542](https://github.com/WordPress/gutenberg/pull/45542))
+-   Transform: Select all blocks if the result has more than one block. ([45015](https://github.com/WordPress/gutenberg/pull/45015))
+-   Content-only locked patterns: Move "Modify" to elllipsis menu. ([45391](https://github.com/WordPress/gutenberg/pull/45391))
+-   Patterns: Ajust the space in the pattern explorer list. ([45730](https://github.com/WordPress/gutenberg/pull/45730))
+-   Update: Lock icon to outline. ([45645](https://github.com/WordPress/gutenberg/pull/45645))
+-   Don't use capital case for 'Distraction free' strings. ([45538](https://github.com/WordPress/gutenberg/pull/45538))
+-   Replace Justification/Orientation controls with ToggleGroupControl. ([45637](https://github.com/WordPress/gutenberg/pull/45637))
 
 #### Site Editor
-- Update: Improve performance of block template object retrieval. ([45646](https://github.com/WordPress/gutenberg/pull/45646))
-- Replace FSE with Site Editor. ([45699](https://github.com/WordPress/gutenberg/pull/45699))
+
+-   Update: Improve performance of block template object retrieval. ([45646](https://github.com/WordPress/gutenberg/pull/45646))
+-   Replace FSE with Site Editor. ([45699](https://github.com/WordPress/gutenberg/pull/45699))
 
 #### Design Tools
-- Add a minHeight block support under dimensions. ([45300](https://github.com/WordPress/gutenberg/pull/45300))
-- Hide block toolbar when spacing visualizer is showing. ([45131](https://github.com/WordPress/gutenberg/pull/45131))
+
+-   Add a minHeight block support under dimensions. ([45300](https://github.com/WordPress/gutenberg/pull/45300))
+-   Hide block toolbar when spacing visualizer is showing. ([45131](https://github.com/WordPress/gutenberg/pull/45131))
 
 #### Global Styles
-- Elements: Add a text decoration control to link elements. ([45643](https://github.com/WordPress/gutenberg/pull/45643))
-- Global styles: Convert preset font size values to CSS vars. ([44967](https://github.com/WordPress/gutenberg/pull/44967))
-- Fluid typography: Adjust font size min and max rules. ([45536](https://github.com/WordPress/gutenberg/pull/45536))
-- Try generating random color palettes. ([40988](https://github.com/WordPress/gutenberg/pull/40988))
 
+-   Elements: Add a text decoration control to link elements. ([45643](https://github.com/WordPress/gutenberg/pull/45643))
+-   Global styles: Convert preset font size values to CSS vars. ([44967](https://github.com/WordPress/gutenberg/pull/44967))
+-   Fluid typography: Adjust font size min and max rules. ([45536](https://github.com/WordPress/gutenberg/pull/45536))
+-   Try generating random color palettes. ([40988](https://github.com/WordPress/gutenberg/pull/40988))
 
 #### Plugin
-- Updates tested up to version to 6.1. ([45630](https://github.com/WordPress/gutenberg/pull/45630))
 
+-   Updates tested up to version to 6.1. ([45630](https://github.com/WordPress/gutenberg/pull/45630))
 
 ### Bug Fixes
 
 #### Block Library
-- Change the order of the pseudo-states in the pseudo selectors array. ([45559](https://github.com/WordPress/gutenberg/pull/45559))
-- Cover: Avoid content loss when the templateLock value is all or contentOnly. ([45632](https://github.com/WordPress/gutenberg/pull/45632))
-- Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
-- Fix navigation appender position to prevent obstructing its items. ([43530](https://github.com/WordPress/gutenberg/pull/43530))
-- Fix: Button block text alignment. ([45663](https://github.com/WordPress/gutenberg/pull/45663))
-- Query Pagination: Fix positioning of next link in editor when parent is selected. ([45651](https://github.com/WordPress/gutenberg/pull/45651))
-- Site Logo: Use the correct home URL setting. ([45476](https://github.com/WordPress/gutenberg/pull/45476))
-- Switch background color to text color on block separator. ([44943](https://github.com/WordPress/gutenberg/pull/44943))
-- Table Block: Apply borders and padding on both front end and editor. ([45069](https://github.com/WordPress/gutenberg/pull/45069))
-- Table block: Fix error in margin value. ([45674](https://github.com/WordPress/gutenberg/pull/45674))
-- Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
-- Navigation: Fix overflowing menu name in the navigation selector dropdown. ([45647](https://github.com/WordPress/gutenberg/pull/45647))
+
+-   Change the order of the pseudo-states in the pseudo selectors array. ([45559](https://github.com/WordPress/gutenberg/pull/45559))
+-   Cover: Avoid content loss when the templateLock value is all or contentOnly. ([45632](https://github.com/WordPress/gutenberg/pull/45632))
+-   Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
+-   Fix navigation appender position to prevent obstructing its items. ([43530](https://github.com/WordPress/gutenberg/pull/43530))
+-   Fix: Button block text alignment. ([45663](https://github.com/WordPress/gutenberg/pull/45663))
+-   Query Pagination: Fix positioning of next link in editor when parent is selected. ([45651](https://github.com/WordPress/gutenberg/pull/45651))
+-   Site Logo: Use the correct home URL setting. ([45476](https://github.com/WordPress/gutenberg/pull/45476))
+-   Switch background color to text color on block separator. ([44943](https://github.com/WordPress/gutenberg/pull/44943))
+-   Table Block: Apply borders and padding on both front end and editor. ([45069](https://github.com/WordPress/gutenberg/pull/45069))
+-   Table block: Fix error in margin value. ([45674](https://github.com/WordPress/gutenberg/pull/45674))
+-   Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
+-   Navigation: Fix overflowing menu name in the navigation selector dropdown. ([45647](https://github.com/WordPress/gutenberg/pull/45647))
 
 #### Accessibility
-- Fix focus return when closing the Post publish panel. ([45623](https://github.com/WordPress/gutenberg/pull/45623))
-- Fix navigate regions backwards for macOS Firefox and Safari. ([45019](https://github.com/WordPress/gutenberg/pull/45019))
-- Fix the Save buttons labelling and tooltip. ([43952](https://github.com/WordPress/gutenberg/pull/43952))
-- Fix the navigate regions focus style. ([45369](https://github.com/WordPress/gutenberg/pull/45369))
-- Fix: Contrast checker appears unexpectedly on some blocks. ([45639](https://github.com/WordPress/gutenberg/pull/45639))
-- Fix: Contrast checker does not update properly. ([45686](https://github.com/WordPress/gutenberg/pull/45686))
-
-#### Components
-- Autocomplete: Fix unexpected block insertion during IME composition. ([45510](https://github.com/WordPress/gutenberg/pull/45510))
-- Fix ESLint warning for Dashicon. ([45795](https://github.com/WordPress/gutenberg/pull/45795))
-- FormTokenField: Fix duplicate input in IME composition. ([45607](https://github.com/WordPress/gutenberg/pull/45607))
-- Making size prop work for icon components using dash icon strings. ([45593](https://github.com/WordPress/gutenberg/pull/45593))
-- ToolsPanel: Prevent calling deselect when panel remounts. ([45673](https://github.com/WordPress/gutenberg/pull/45673))
-- Color Picker: Prevent all number fields to become 0 when one of them is an empty string. ([45649](https://github.com/WordPress/gutenberg/pull/45649))
-- ToggleGroupControl: Only show enclosing border when `isBlock`. ([45492](https://github.com/WordPress/gutenberg/pull/45492))
-- Autocomplete: Check key events more strictly in IME composition. ([45626](https://github.com/WordPress/gutenberg/pull/45626))
+
+-   Fix focus return when closing the Post publish panel. ([45623](https://github.com/WordPress/gutenberg/pull/45623))
+-   Fix navigate regions backwards for macOS Firefox and Safari. ([45019](https://github.com/WordPress/gutenberg/pull/45019))
+-   Fix the Save buttons labelling and tooltip. ([43952](https://github.com/WordPress/gutenberg/pull/43952))
+-   Fix the navigate regions focus style. ([45369](https://github.com/WordPress/gutenberg/pull/45369))
+-   Fix: Contrast checker appears unexpectedly on some blocks. ([45639](https://github.com/WordPress/gutenberg/pull/45639))
+-   Fix: Contrast checker does not update properly. ([45686](https://github.com/WordPress/gutenberg/pull/45686))
+
+#### Components
+
+-   Autocomplete: Fix unexpected block insertion during IME composition. ([45510](https://github.com/WordPress/gutenberg/pull/45510))
+-   Fix ESLint warning for Dashicon. ([45795](https://github.com/WordPress/gutenberg/pull/45795))
+-   FormTokenField: Fix duplicate input in IME composition. ([45607](https://github.com/WordPress/gutenberg/pull/45607))
+-   Making size prop work for icon components using dash icon strings. ([45593](https://github.com/WordPress/gutenberg/pull/45593))
+-   ToolsPanel: Prevent calling deselect when panel remounts. ([45673](https://github.com/WordPress/gutenberg/pull/45673))
+-   Color Picker: Prevent all number fields to become 0 when one of them is an empty string. ([45649](https://github.com/WordPress/gutenberg/pull/45649))
+-   ToggleGroupControl: Only show enclosing border when `isBlock`. ([45492](https://github.com/WordPress/gutenberg/pull/45492))
+-   Autocomplete: Check key events more strictly in IME composition. ([45626](https://github.com/WordPress/gutenberg/pull/45626))
 
 #### CSS & Styling
-- Inherit font from theme on overlay close button. ([45635](https://github.com/WordPress/gutenberg/pull/45635))
-- Navigation: Fix font inheritance when using text menu button. ([45514](https://github.com/WordPress/gutenberg/pull/45514))
-- Remove hover style to button on dark block tools UI. ([45653](https://github.com/WordPress/gutenberg/pull/45653))
-- Remove width from block mover button focus style. ([45665](https://github.com/WordPress/gutenberg/pull/45665))
-- Site editor hover/select: Fix double border. ([45589](https://github.com/WordPress/gutenberg/pull/45589))
-- Remove duplicate output of existing classnames in layout classnames. ([45499](https://github.com/WordPress/gutenberg/pull/45499))
+
+-   Inherit font from theme on overlay close button. ([45635](https://github.com/WordPress/gutenberg/pull/45635))
+-   Navigation: Fix font inheritance when using text menu button. ([45514](https://github.com/WordPress/gutenberg/pull/45514))
+-   Remove hover style to button on dark block tools UI. ([45653](https://github.com/WordPress/gutenberg/pull/45653))
+-   Remove width from block mover button focus style. ([45665](https://github.com/WordPress/gutenberg/pull/45665))
+-   Site editor hover/select: Fix double border. ([45589](https://github.com/WordPress/gutenberg/pull/45589))
+-   Remove duplicate output of existing classnames in layout classnames. ([45499](https://github.com/WordPress/gutenberg/pull/45499))
 
 #### Post Editor
-- BlockManagerCategory: Fix styles for indeterminate. ([45564](https://github.com/WordPress/gutenberg/pull/45564))
-- Fix: Updated names from List View to Document Overview. ([45524](https://github.com/WordPress/gutenberg/pull/45524))
-- Strip HTML from Post Title when pasting multiline title containing HTML. ([35825](https://github.com/WordPress/gutenberg/pull/35825))
+
+-   BlockManagerCategory: Fix styles for indeterminate. ([45564](https://github.com/WordPress/gutenberg/pull/45564))
+-   Fix: Updated names from List View to Document Overview. ([45524](https://github.com/WordPress/gutenberg/pull/45524))
+-   Strip HTML from Post Title when pasting multiline title containing HTML. ([35825](https://github.com/WordPress/gutenberg/pull/35825))
 
 #### Site Editor
-- Decode entities in template title and description. ([45716](https://github.com/WordPress/gutenberg/pull/45716))
-- Link to homeUrl from site editor view menu. ([45475](https://github.com/WordPress/gutenberg/pull/45475))
+
+-   Decode entities in template title and description. ([45716](https://github.com/WordPress/gutenberg/pull/45716))
+-   Link to homeUrl from site editor view menu. ([45475](https://github.com/WordPress/gutenberg/pull/45475))
 
 #### Block Editor
-- Fix Link UI popover positioning when inspector control input is focused. ([45661](https://github.com/WordPress/gutenberg/pull/45661))
-- Paste: Fix list only paste from Google documentation. ([45498](https://github.com/WordPress/gutenberg/pull/45498))
-- Make Manage Reusable blocks match similar links. ([45641](https://github.com/WordPress/gutenberg/pull/45641))([45689](https://github.com/WordPress/gutenberg/pull/45689))
-- List View: Disable branch expansion when block editing is locked. ([45541](https://github.com/WordPress/gutenberg/pull/45541))
-- Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. ([45739](https://github.com/WordPress/gutenberg/pull/45739))
 
+-   Fix Link UI popover positioning when inspector control input is focused. ([45661](https://github.com/WordPress/gutenberg/pull/45661))
+-   Paste: Fix list only paste from Google documentation. ([45498](https://github.com/WordPress/gutenberg/pull/45498))
+-   Make Manage Reusable blocks match similar links. ([45641](https://github.com/WordPress/gutenberg/pull/45641))([45689](https://github.com/WordPress/gutenberg/pull/45689))
+-   List View: Disable branch expansion when block editing is locked. ([45541](https://github.com/WordPress/gutenberg/pull/45541))
+-   Spacing visualizer: Fix display of unexpected visualizer for certain mouse actions. ([45739](https://github.com/WordPress/gutenberg/pull/45739))
 
 ### Performance
 
-- Lodash: Refactor away from `_.reduce()`. ([45460](https://github.com/WordPress/gutenberg/pull/45460))
-- Lodash: Refactor block editor away from `_.reduce()`. ([45455](https://github.com/WordPress/gutenberg/pull/45455))
-- Lodash: Refactor blocks away from `_.reduce()`. ([45457](https://github.com/WordPress/gutenberg/pull/45457))
-- Lodash: Refactor site editor away from `_.reduce()`. ([45459](https://github.com/WordPress/gutenberg/pull/45459))
-- Lodash: Refactor post editor away from `_.reduce()`. ([45458](https://github.com/WordPress/gutenberg/pull/45458))
+-   Lodash: Refactor away from `_.reduce()`. ([45460](https://github.com/WordPress/gutenberg/pull/45460))
+-   Lodash: Refactor block editor away from `_.reduce()`. ([45455](https://github.com/WordPress/gutenberg/pull/45455))
+-   Lodash: Refactor blocks away from `_.reduce()`. ([45457](https://github.com/WordPress/gutenberg/pull/45457))
+-   Lodash: Refactor site editor away from `_.reduce()`. ([45459](https://github.com/WordPress/gutenberg/pull/45459))
+-   Lodash: Refactor post editor away from `_.reduce()`. ([45458](https://github.com/WordPress/gutenberg/pull/45458))
 
 #### Block Library
-- Do not look for block variants, if not supporting block-templates. ([45362](https://github.com/WordPress/gutenberg/pull/45362))
-- List: Disable nested list drop zone so dropping list items works. ([45321](https://github.com/WordPress/gutenberg/pull/45321))
+
+-   Do not look for block variants, if not supporting block-templates. ([45362](https://github.com/WordPress/gutenberg/pull/45362))
+-   List: Disable nested list drop zone so dropping list items works. ([45321](https://github.com/WordPress/gutenberg/pull/45321))
 
 #### Global Styles
-- Use low-level cache for get_user_data_from_wp_global_styles. ([45634](https://github.com/WordPress/gutenberg/pull/45634))
 
+-   Use low-level cache for get_user_data_from_wp_global_styles. ([45634](https://github.com/WordPress/gutenberg/pull/45634))
 
 ### Experiments
 
-- Al list view duplicate for use in navigation list view experiment. ([45544](https://github.com/WordPress/gutenberg/pull/45544))
-- Introduce experiment for inspector based navigation editing. ([45515](https://github.com/WordPress/gutenberg/pull/45515))
-
+-   Al list view duplicate for use in navigation list view experiment. ([45544](https://github.com/WordPress/gutenberg/pull/45544))
+-   Introduce experiment for inspector based navigation editing. ([45515](https://github.com/WordPress/gutenberg/pull/45515))
 
 ### Documentation
 
-- Add missing CHANGELOG entry. ([45691](https://github.com/WordPress/gutenberg/pull/45691))
-- Change Title: How to use JavaScript with Gutenberg. ([45323](https://github.com/WordPress/gutenberg/pull/45323))
-- Docs: Update the readme for the integration test fixtures. ([45581](https://github.com/WordPress/gutenberg/pull/45581))
-- Summarize "Available commands" section and refer them it to `scripts` documentation. ([45636](https://github.com/WordPress/gutenberg/pull/45636))
-- Update applying-styles-with-stylesheets.md. ([45604](https://github.com/WordPress/gutenberg/pull/45604))
-- [create-block] Reorganized sections to provide a better learning experience of this package. ([45676](https://github.com/WordPress/gutenberg/pull/45676))
-- Change "block style variations" references to "block style". ([45650](https://github.com/WordPress/gutenberg/pull/45650))
-
-
+-   Add missing CHANGELOG entry. ([45691](https://github.com/WordPress/gutenberg/pull/45691))
+-   Change Title: How to use JavaScript with Gutenberg. ([45323](https://github.com/WordPress/gutenberg/pull/45323))
+-   Docs: Update the readme for the integration test fixtures. ([45581](https://github.com/WordPress/gutenberg/pull/45581))
+-   Summarize "Available commands" section and refer them it to `scripts` documentation. ([45636](https://github.com/WordPress/gutenberg/pull/45636))
+-   Update applying-styles-with-stylesheets.md. ([45604](https://github.com/WordPress/gutenberg/pull/45604))
+-   [create-block] Reorganized sections to provide a better learning experience of this package. ([45676](https://github.com/WordPress/gutenberg/pull/45676))
+-   Change "block style variations" references to "block style". ([45650](https://github.com/WordPress/gutenberg/pull/45650))
 
 ### Code Quality
 
 #### Block Editor
-- Block Editor: Improve `LinkControl` tests. ([45609](https://github.com/WordPress/gutenberg/pull/45609))
-- Block Editor: Improve `ResponsiveBlockControl` tests. ([45610](https://github.com/WordPress/gutenberg/pull/45610))
-- Block Editor: Improve `ReusableBlocksTab` tests. ([45652](https://github.com/WordPress/gutenberg/pull/45652))
-- LinkControl: Suppress errors on null values. ([45742](https://github.com/WordPress/gutenberg/pull/45742))
-- Simplify ResizableEditor component. ([45578](https://github.com/WordPress/gutenberg/pull/45578))
-- Remove duplicate colon. ([45763](https://github.com/WordPress/gutenberg/pull/45763))
-- Extract the manage menus button to a shared component to reduce duplicate code. ([45769](https://github.com/WordPress/gutenberg/pull/45769))
-- Backport pseudo selector comments from core. ([45619](https://github.com/WordPress/gutenberg/pull/45619))
-- unstableSubscribeStore: Support store descriptors. ([45481](https://github.com/WordPress/gutenberg/pull/45481))
-
-
-#### Components
-- BaseField: Remove unnecessary `.firstChild` from tests. ([45687](https://github.com/WordPress/gutenberg/pull/45687))
-- DateTime: Remove unused types. ([45615](https://github.com/WordPress/gutenberg/pull/45615))
-- Draggable: Convert component to TypeScript. ([45471](https://github.com/WordPress/gutenberg/pull/45471))
-- Fix `no-container` violations in `FormGroup` tests. ([45662](https://github.com/WordPress/gutenberg/pull/45662))
-- Fix `testing-library/no-node-access` in `TreeGrid` tests. ([45554](https://github.com/WordPress/gutenberg/pull/45554))
-- FontSizePicker: Use components instead of helper functions. ([44891](https://github.com/WordPress/gutenberg/pull/44891))
-- Improve tests for `ToggleGroupControl`. ([45627](https://github.com/WordPress/gutenberg/pull/45627))
-- MenuGroup: Convert component to TypeScript. ([45617](https://github.com/WordPress/gutenberg/pull/45617))
-- Popover: Fix exhaustive-deps warning. ([45656](https://github.com/WordPress/gutenberg/pull/45656))
-- Refactor `ItemGroup` to pass `exhaustive-deps`. ([45531](https://github.com/WordPress/gutenberg/pull/45531))
-- Refactor `useFlex` to pass `exhaustive-deps`. ([45528](https://github.com/WordPress/gutenberg/pull/45528))
-- Refactor `withNotices` to pass `exhaustive-deps`. ([45530](https://github.com/WordPress/gutenberg/pull/45530))
-- Refactor`PaletteEditListView` to ignore `exhaustive-deps`. ([45467](https://github.com/WordPress/gutenberg/pull/45467))
-- TabPanel: Fix the `exhaustive-deps` warning. ([45660](https://github.com/WordPress/gutenberg/pull/45660))
-- ToolsPanel: Fix exhaustive-deps hook warning. ([45715](https://github.com/WordPress/gutenberg/pull/45715))
-- Truncate: Remove unnecessary `.firstChild` from tests. ([45694](https://github.com/WordPress/gutenberg/pull/45694))
-- View component: Rename index.js to index.ts. ([45667](https://github.com/WordPress/gutenberg/pull/45667))
-- `ColorPalette`, `BorderBox`, `BorderBoxControl`: Polish and DRY prop types, add default values. ([45463](https://github.com/WordPress/gutenberg/pull/45463))
-- `NavigatorScreen`: Satisfy `exhaustive-deps` eslint rule. ([45648](https://github.com/WordPress/gutenberg/pull/45648))
-- Fix `useCx` story to satisfy `exhaustive-deps` eslint rule. ([45614](https://github.com/WordPress/gutenberg/pull/45614))
-- URLPopover: Use new placement prop instead of legacy position prop. ([44391](https://github.com/WordPress/gutenberg/pull/44391))
-- Tidy and minor refactor of Link UI code. ([37833](https://github.com/WordPress/gutenberg/pull/37833))
-
-#### Block Library
-- Avatar: Escape the 'get_author_posts_url()'. ([45427](https://github.com/WordPress/gutenberg/pull/45427))
-- Button: Remove unnecessary 'useCallback'. ([45584](https://github.com/WordPress/gutenberg/pull/45584))
-- Make unwrapping columns slighly more efficient. ([45684](https://github.com/WordPress/gutenberg/pull/45684))
-- Simplfy handling of save of Nav block uncontrolled inner blocks. ([45517](https://github.com/WordPress/gutenberg/pull/45517))
-- Lodash: Refactor block library away from `_.reduce()`. ([45456](https://github.com/WordPress/gutenberg/pull/45456))
 
+-   Block Editor: Improve `LinkControl` tests. ([45609](https://github.com/WordPress/gutenberg/pull/45609))
+-   Block Editor: Improve `ResponsiveBlockControl` tests. ([45610](https://github.com/WordPress/gutenberg/pull/45610))
+-   Block Editor: Improve `ReusableBlocksTab` tests. ([45652](https://github.com/WordPress/gutenberg/pull/45652))
+-   LinkControl: Suppress errors on null values. ([45742](https://github.com/WordPress/gutenberg/pull/45742))
+-   Simplify ResizableEditor component. ([45578](https://github.com/WordPress/gutenberg/pull/45578))
+-   Remove duplicate colon. ([45763](https://github.com/WordPress/gutenberg/pull/45763))
+-   Extract the manage menus button to a shared component to reduce duplicate code. ([45769](https://github.com/WordPress/gutenberg/pull/45769))
+-   Backport pseudo selector comments from core. ([45619](https://github.com/WordPress/gutenberg/pull/45619))
+-   unstableSubscribeStore: Support store descriptors. ([45481](https://github.com/WordPress/gutenberg/pull/45481))
+
+#### Components
+
+-   BaseField: Remove unnecessary `.firstChild` from tests. ([45687](https://github.com/WordPress/gutenberg/pull/45687))
+-   DateTime: Remove unused types. ([45615](https://github.com/WordPress/gutenberg/pull/45615))
+-   Draggable: Convert component to TypeScript. ([45471](https://github.com/WordPress/gutenberg/pull/45471))
+-   Fix `no-container` violations in `FormGroup` tests. ([45662](https://github.com/WordPress/gutenberg/pull/45662))
+-   Fix `testing-library/no-node-access` in `TreeGrid` tests. ([45554](https://github.com/WordPress/gutenberg/pull/45554))
+-   FontSizePicker: Use components instead of helper functions. ([44891](https://github.com/WordPress/gutenberg/pull/44891))
+-   Improve tests for `ToggleGroupControl`. ([45627](https://github.com/WordPress/gutenberg/pull/45627))
+-   MenuGroup: Convert component to TypeScript. ([45617](https://github.com/WordPress/gutenberg/pull/45617))
+-   Popover: Fix exhaustive-deps warning. ([45656](https://github.com/WordPress/gutenberg/pull/45656))
+-   Refactor `ItemGroup` to pass `exhaustive-deps`. ([45531](https://github.com/WordPress/gutenberg/pull/45531))
+-   Refactor `useFlex` to pass `exhaustive-deps`. ([45528](https://github.com/WordPress/gutenberg/pull/45528))
+-   Refactor `withNotices` to pass `exhaustive-deps`. ([45530](https://github.com/WordPress/gutenberg/pull/45530))
+-   Refactor`PaletteEditListView` to ignore `exhaustive-deps`. ([45467](https://github.com/WordPress/gutenberg/pull/45467))
+-   TabPanel: Fix the `exhaustive-deps` warning. ([45660](https://github.com/WordPress/gutenberg/pull/45660))
+-   ToolsPanel: Fix exhaustive-deps hook warning. ([45715](https://github.com/WordPress/gutenberg/pull/45715))
+-   Truncate: Remove unnecessary `.firstChild` from tests. ([45694](https://github.com/WordPress/gutenberg/pull/45694))
+-   View component: Rename index.js to index.ts. ([45667](https://github.com/WordPress/gutenberg/pull/45667))
+-   `ColorPalette`, `BorderBox`, `BorderBoxControl`: Polish and DRY prop types, add default values. ([45463](https://github.com/WordPress/gutenberg/pull/45463))
+-   `NavigatorScreen`: Satisfy `exhaustive-deps` eslint rule. ([45648](https://github.com/WordPress/gutenberg/pull/45648))
+-   Fix `useCx` story to satisfy `exhaustive-deps` eslint rule. ([45614](https://github.com/WordPress/gutenberg/pull/45614))
+-   URLPopover: Use new placement prop instead of legacy position prop. ([44391](https://github.com/WordPress/gutenberg/pull/44391))
+-   Tidy and minor refactor of Link UI code. ([37833](https://github.com/WordPress/gutenberg/pull/37833))
+
+#### Block Library
+
+-   Avatar: Escape the 'get_author_posts_url()'. ([45427](https://github.com/WordPress/gutenberg/pull/45427))
+-   Button: Remove unnecessary 'useCallback'. ([45584](https://github.com/WordPress/gutenberg/pull/45584))
+-   Make unwrapping columns slighly more efficient. ([45684](https://github.com/WordPress/gutenberg/pull/45684))
+-   Simplfy handling of save of Nav block uncontrolled inner blocks. ([45517](https://github.com/WordPress/gutenberg/pull/45517))
+-   Lodash: Refactor block library away from `_.reduce()`. ([45456](https://github.com/WordPress/gutenberg/pull/45456))
 
 ### Tools
 
 #### Testing
-- Components: Add `exhaustive-deps` eslint rule. ([41166](https://github.com/WordPress/gutenberg/pull/41166))
-- Fix typos in Paragraph block end-to-end tests. ([45611](https://github.com/WordPress/gutenberg/pull/45611))
-- FontSizePicker: Fix a buggy unit test. ([45529](https://github.com/WordPress/gutenberg/pull/45529))
-- Ignore warnings for `window.wp` in Playwright. ([45598](https://github.com/WordPress/gutenberg/pull/45598))
-- Migrate mentions tests to playwright. ([43064](https://github.com/WordPress/gutenberg/pull/43064))
-- Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. ([45726](https://github.com/WordPress/gutenberg/pull/45726))
-- React Native unit tests: Migrate getByA11yLabel usages. ([45454](https://github.com/WordPress/gutenberg/pull/45454))
-- Unit Tests: Rewrite ReactDOM.render usages to RTL. ([45453](https://github.com/WordPress/gutenberg/pull/45453))
-- E2E: Add site and widget editor supports for ensureSidebarOpened. ([45480](https://github.com/WordPress/gutenberg/pull/45480))
+
+-   Components: Add `exhaustive-deps` eslint rule. ([41166](https://github.com/WordPress/gutenberg/pull/41166))
+-   Fix typos in Paragraph block end-to-end tests. ([45611](https://github.com/WordPress/gutenberg/pull/45611))
+-   FontSizePicker: Fix a buggy unit test. ([45529](https://github.com/WordPress/gutenberg/pull/45529))
+-   Ignore warnings for `window.wp` in Playwright. ([45598](https://github.com/WordPress/gutenberg/pull/45598))
+-   Migrate mentions tests to playwright. ([43064](https://github.com/WordPress/gutenberg/pull/43064))
+-   Navigation Toggle unit test: Unmount synchronously to cancel popover positioning. ([45726](https://github.com/WordPress/gutenberg/pull/45726))
+-   React Native unit tests: Migrate getByA11yLabel usages. ([45454](https://github.com/WordPress/gutenberg/pull/45454))
+-   Unit Tests: Rewrite ReactDOM.render usages to RTL. ([45453](https://github.com/WordPress/gutenberg/pull/45453))
+-   E2E: Add site and widget editor supports for ensureSidebarOpened. ([45480](https://github.com/WordPress/gutenberg/pull/45480))
 
 #### Build Tooling
-- Include TS and JSX files to testing-library lint. ([45533](https://github.com/WordPress/gutenberg/pull/45533))
-- Remove use of `set-output` in workflows. ([45357](https://github.com/WordPress/gutenberg/pull/45357))
 
-#### Triage
-- Configure labels for GHA Dependabot PRs. ([45516](https://github.com/WordPress/gutenberg/pull/45516))
+-   Include TS and JSX files to testing-library lint. ([45533](https://github.com/WordPress/gutenberg/pull/45533))
+-   Remove use of `set-output` in workflows. ([45357](https://github.com/WordPress/gutenberg/pull/45357))
 
-#### Patterns
-- Pattern Directory API: Add support for pagination parameters. ([45293](https://github.com/WordPress/gutenberg/pull/45293))
-- Update bundled patterns compat directory. ([45620](https://github.com/WordPress/gutenberg/pull/45620))
+#### Triage
 
+-   Configure labels for GHA Dependabot PRs. ([45516](https://github.com/WordPress/gutenberg/pull/45516))
 
+#### Patterns
 
-## First time contributors
+-   Pattern Directory API: Add support for pagination parameters. ([45293](https://github.com/WordPress/gutenberg/pull/45293))
+-   Update bundled patterns compat directory. ([45620](https://github.com/WordPress/gutenberg/pull/45620))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @edanzer: Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
-- @TimBroddin: Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
-- @wojtekn: Make Author block selector to display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
+The following PRs were merged by first-time contributors:
 
+-   @edanzer: Template Part Block: Update block isActive method. ([45672](https://github.com/WordPress/gutenberg/pull/45672))
+-   @TimBroddin: Fix alignment of create new post link. ([45638](https://github.com/WordPress/gutenberg/pull/45638))
+-   @wojtekn: Make Author block selector to display all users instead of just 10. ([45640](https://github.com/WordPress/gutenberg/pull/45640))
 
 ## Contributors
 
@@ -293,17 +24259,13 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @afercia @andrewserong @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @Copons @DaisyOlsen @desrosj @dinhtungdu @draganescu @dsas @edanzer @ellatrix @enejb @flootr @getdave @glendaviesnz @hz-tyfoon @jasmussen @javierarce @jffng @jonathanbossenger @jorgefilipecosta @jsnajdr @juanmaguitar @juhi123 @kevin940726 @Mamaduka @matiasbenedetto @mikachan @mirka @mmtr @mtias @ndiego @nielslange @noisysocks @ntsekouras @peterwilsoncc @ramonjd @ryelle @scruffian @spacedmonkey @t-hamano @TimBroddin @tyxla @vcanales @walbo @wojtekn @youknowriad @yuliyan
 
-
 = 14.5.1 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
-- Fix: Prevent infinite loop in Tag Processor in certain truncated documents (https://github.com/WordPress/gutenberg/pull/45537)
-
+-   Fix: Prevent infinite loop in Tag Processor in certain truncated documents (https://github.com/WordPress/gutenberg/pull/45537)
 
 = 14.5.0 =
 
@@ -311,185 +24273,185 @@ The following contributors merged PRs in this release:
 
 ### Enhancements
 
-- Add block pattern categories' descriptions to the REST API and update the descriptions. ([45244](https://github.com/WordPress/gutenberg/pull/45244))
-- Create Block: Update templates to use APIs introduced in WP 6.1. ([44185](https://github.com/WordPress/gutenberg/pull/44185))
-- setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. ([45156](https://github.com/WordPress/gutenberg/pull/45156))
-- Spacing visualizer: Add option to trigger with mousover as well as value change. ([44955](https://github.com/WordPress/gutenberg/pull/44955))
-- Style Engine: Add support for dimensions.minHeight property. ([45334](https://github.com/WordPress/gutenberg/pull/45334))
-- Try: Add layout classnames to inner block wrapper. ([44600](https://github.com/WordPress/gutenberg/pull/44600))
-
-#### Block Library
-
-- Audio, Video: Add toolbar button to add/remove caption. ([45112](https://github.com/WordPress/gutenberg/pull/45112), [45113](https://github.com/WordPress/gutenberg/pull/45113))
-- Comment Template, Post Comment Count, Post Comments Form, Post Comments Link: Add spacing support. ([45101](https://github.com/WordPress/gutenberg/pull/45101), [45150](https://github.com/WordPress/gutenberg/pull/45150), [45091](https://github.com/WordPress/gutenberg/pull/45091), [45184](https://github.com/WordPress/gutenberg/pull/45184))
-- Gallery: Register styles with Style Engine. ([43070](https://github.com/WordPress/gutenberg/pull/43070))
-- Navigation: Return undefined from useEffect. ([45239](https://github.com/WordPress/gutenberg/pull/45239))
-- Social Icons: Add rel attribute. ([45469](https://github.com/WordPress/gutenberg/pull/45469))
-- Video: Update tracks editor icon to text button. ([45245](https://github.com/WordPress/gutenberg/pull/45245))
-
-#### Components
-
-- Block mover button: Do not show focus styles on pointer interactions. ([45126](https://github.com/WordPress/gutenberg/pull/45126))
-- BorderControl, BorderBoxControl, BorderRadiusControl: Update control components to allow 40px height. ([41860](https://github.com/WordPress/gutenberg/pull/41860))
-- BoxControl, Card, ToolsPanel: Remove unnecessary wrappers in stories. ([45305](https://github.com/WordPress/gutenberg/pull/45305))
-- Button: Change the color on the destructive button focus state. ([44427](https://github.com/WordPress/gutenberg/pull/44427))
-- Button: Refactor Storybook to controls and align documentation. ([44105](https://github.com/WordPress/gutenberg/pull/44105))
-- ColorPalette: Convert to TypeScript. ([44632](https://github.com/WordPress/gutenberg/pull/44632))
-- DateTimePicker: Add `__next*` props in Storybook. ([45164](https://github.com/WordPress/gutenberg/pull/45164))
-- FontSizePicker: Update design when `withSlider` is set. ([44598](https://github.com/WordPress/gutenberg/pull/44598))
-- FormFileUpload: Remove unused story file. ([45286](https://github.com/WordPress/gutenberg/pull/45286))
-- NumberControl: Add custom spin buttons. ([45333](https://github.com/WordPress/gutenberg/pull/45333))
-- RadioGroup: Mark as deprecated. ([45389](https://github.com/WordPress/gutenberg/pull/45389))
-- Navigator: Revert the removal of overflow styles from NavigatorScreen. ([45303](https://github.com/WordPress/gutenberg/pull/45303))
-- SelectControl: Add onChange, onBlur, and onFocus to storybook actions. ([45432](https://github.com/WordPress/gutenberg/pull/45432))
-- Storybook: Addon to wrap stories in max-width div. ([45134](https://github.com/WordPress/gutenberg/pull/45134))
-- TextControl: Set Storybook control types on help, label and type. ([45405](https://github.com/WordPress/gutenberg/pull/45405))
-- ToggleGroupControl: Add de-selectable variant. ([45123](https://github.com/WordPress/gutenberg/pull/45123))
-- ToggleGroupControl: Remove invalid props from types. ([45114](https://github.com/WordPress/gutenberg/pull/45114))
+-   Add block pattern categories' descriptions to the REST API and update the descriptions. ([45244](https://github.com/WordPress/gutenberg/pull/45244))
+-   Create Block: Update templates to use APIs introduced in WP 6.1. ([44185](https://github.com/WordPress/gutenberg/pull/44185))
+-   setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. ([45156](https://github.com/WordPress/gutenberg/pull/45156))
+-   Spacing visualizer: Add option to trigger with mousover as well as value change. ([44955](https://github.com/WordPress/gutenberg/pull/44955))
+-   Style Engine: Add support for dimensions.minHeight property. ([45334](https://github.com/WordPress/gutenberg/pull/45334))
+-   Try: Add layout classnames to inner block wrapper. ([44600](https://github.com/WordPress/gutenberg/pull/44600))
+
+#### Block Library
+
+-   Audio, Video: Add toolbar button to add/remove caption. ([45112](https://github.com/WordPress/gutenberg/pull/45112), [45113](https://github.com/WordPress/gutenberg/pull/45113))
+-   Comment Template, Post Comment Count, Post Comments Form, Post Comments Link: Add spacing support. ([45101](https://github.com/WordPress/gutenberg/pull/45101), [45150](https://github.com/WordPress/gutenberg/pull/45150), [45091](https://github.com/WordPress/gutenberg/pull/45091), [45184](https://github.com/WordPress/gutenberg/pull/45184))
+-   Gallery: Register styles with Style Engine. ([43070](https://github.com/WordPress/gutenberg/pull/43070))
+-   Navigation: Return undefined from useEffect. ([45239](https://github.com/WordPress/gutenberg/pull/45239))
+-   Social Icons: Add rel attribute. ([45469](https://github.com/WordPress/gutenberg/pull/45469))
+-   Video: Update tracks editor icon to text button. ([45245](https://github.com/WordPress/gutenberg/pull/45245))
+
+#### Components
+
+-   Block mover button: Do not show focus styles on pointer interactions. ([45126](https://github.com/WordPress/gutenberg/pull/45126))
+-   BorderControl, BorderBoxControl, BorderRadiusControl: Update control components to allow 40px height. ([41860](https://github.com/WordPress/gutenberg/pull/41860))
+-   BoxControl, Card, ToolsPanel: Remove unnecessary wrappers in stories. ([45305](https://github.com/WordPress/gutenberg/pull/45305))
+-   Button: Change the color on the destructive button focus state. ([44427](https://github.com/WordPress/gutenberg/pull/44427))
+-   Button: Refactor Storybook to controls and align documentation. ([44105](https://github.com/WordPress/gutenberg/pull/44105))
+-   ColorPalette: Convert to TypeScript. ([44632](https://github.com/WordPress/gutenberg/pull/44632))
+-   DateTimePicker: Add `__next*` props in Storybook. ([45164](https://github.com/WordPress/gutenberg/pull/45164))
+-   FontSizePicker: Update design when `withSlider` is set. ([44598](https://github.com/WordPress/gutenberg/pull/44598))
+-   FormFileUpload: Remove unused story file. ([45286](https://github.com/WordPress/gutenberg/pull/45286))
+-   NumberControl: Add custom spin buttons. ([45333](https://github.com/WordPress/gutenberg/pull/45333))
+-   RadioGroup: Mark as deprecated. ([45389](https://github.com/WordPress/gutenberg/pull/45389))
+-   Navigator: Revert the removal of overflow styles from NavigatorScreen. ([45303](https://github.com/WordPress/gutenberg/pull/45303))
+-   SelectControl: Add onChange, onBlur, and onFocus to storybook actions. ([45432](https://github.com/WordPress/gutenberg/pull/45432))
+-   Storybook: Addon to wrap stories in max-width div. ([45134](https://github.com/WordPress/gutenberg/pull/45134))
+-   TextControl: Set Storybook control types on help, label and type. ([45405](https://github.com/WordPress/gutenberg/pull/45405))
+-   ToggleGroupControl: Add de-selectable variant. ([45123](https://github.com/WordPress/gutenberg/pull/45123))
+-   ToggleGroupControl: Remove invalid props from types. ([45114](https://github.com/WordPress/gutenberg/pull/45114))
 
 #### Post Editor
 
-- Edit Post: Improve distraction-free mode notices. ([45348](https://github.com/WordPress/gutenberg/pull/45348))
-- hasChangedContent: Remove obsolete blocks check. ([45090](https://github.com/WordPress/gutenberg/pull/45090))
-- Move document information and outline to list view panel. ([44788](https://github.com/WordPress/gutenberg/pull/44788))
+-   Edit Post: Improve distraction-free mode notices. ([45348](https://github.com/WordPress/gutenberg/pull/45348))
+-   hasChangedContent: Remove obsolete blocks check. ([45090](https://github.com/WordPress/gutenberg/pull/45090))
+-   Move document information and outline to list view panel. ([44788](https://github.com/WordPress/gutenberg/pull/44788))
 
 #### Global Styles
 
-- Add `:visited` pseudo selector to theme.json schema. ([45236](https://github.com/WordPress/gutenberg/pull/45236))
-- Embed, Gallery, Video: Add deprecation for the caption element. ([45166](https://github.com/WordPress/gutenberg/pull/45166), [45173](https://github.com/WordPress/gutenberg/pull/45173), [45169](https://github.com/WordPress/gutenberg/pull/45169))
-- File Block: Add a deprecation for the button element class name. ([45159](https://github.com/WordPress/gutenberg/pull/45159))
-- Table Block: Add a deprecation for the figcaption element class name. ([45161](https://github.com/WordPress/gutenberg/pull/45161))
+-   Add `:visited` pseudo selector to theme.json schema. ([45236](https://github.com/WordPress/gutenberg/pull/45236))
+-   Embed, Gallery, Video: Add deprecation for the caption element. ([45166](https://github.com/WordPress/gutenberg/pull/45166), [45173](https://github.com/WordPress/gutenberg/pull/45173), [45169](https://github.com/WordPress/gutenberg/pull/45169))
+-   File Block: Add a deprecation for the button element class name. ([45159](https://github.com/WordPress/gutenberg/pull/45159))
+-   Table Block: Add a deprecation for the figcaption element class name. ([45161](https://github.com/WordPress/gutenberg/pull/45161))
 
 ### Bug Fixes
 
-- Ensure block content is always returned as a string after processing. ([45330](https://github.com/WordPress/gutenberg/pull/45330))
-- Fix distraction free shortcut typo. ([45186](https://github.com/WordPress/gutenberg/pull/45186))
-- Fix resizeable editor scrolling. ([45189](https://github.com/WordPress/gutenberg/pull/45189))
-- Fix handling of nullish comments in the pot-to-PHP script. ([45414](https://github.com/WordPress/gutenberg/pull/45414))
-- Fix image caption supports Voice Control. ([44850](https://github.com/WordPress/gutenberg/pull/44850))
-- Fix PHP warning in pattern categories REST API controller. ([45410](https://github.com/WordPress/gutenberg/pull/45410))
-- Fix Prevent infinite loop in Tag Processor in certain truncated documents. ([45537](https://github.com/WordPress/gutenberg/pull/45537))
-- Hide insertion point when moving out of the canvas. ([45420](https://github.com/WordPress/gutenberg/pull/45420))
-- Metaboxes: Perform hasMetaBoxes check on every save. ([45145](https://github.com/WordPress/gutenberg/pull/45145))
-- Prevent unexpected copying of the post title. ([41284](https://github.com/WordPress/gutenberg/pull/41284))
-- Raw Handling: When pasting bullet characters, convert to astericks for markdown converter. ([45017](https://github.com/WordPress/gutenberg/pull/45017))
-- Web Font: Fix ascent/descent-override property typo. ([45125](https://github.com/WordPress/gutenberg/pull/45125))
+-   Ensure block content is always returned as a string after processing. ([45330](https://github.com/WordPress/gutenberg/pull/45330))
+-   Fix distraction free shortcut typo. ([45186](https://github.com/WordPress/gutenberg/pull/45186))
+-   Fix resizeable editor scrolling. ([45189](https://github.com/WordPress/gutenberg/pull/45189))
+-   Fix handling of nullish comments in the pot-to-PHP script. ([45414](https://github.com/WordPress/gutenberg/pull/45414))
+-   Fix image caption supports Voice Control. ([44850](https://github.com/WordPress/gutenberg/pull/44850))
+-   Fix PHP warning in pattern categories REST API controller. ([45410](https://github.com/WordPress/gutenberg/pull/45410))
+-   Fix Prevent infinite loop in Tag Processor in certain truncated documents. ([45537](https://github.com/WordPress/gutenberg/pull/45537))
+-   Hide insertion point when moving out of the canvas. ([45420](https://github.com/WordPress/gutenberg/pull/45420))
+-   Metaboxes: Perform hasMetaBoxes check on every save. ([45145](https://github.com/WordPress/gutenberg/pull/45145))
+-   Prevent unexpected copying of the post title. ([41284](https://github.com/WordPress/gutenberg/pull/41284))
+-   Raw Handling: When pasting bullet characters, convert to astericks for markdown converter. ([45017](https://github.com/WordPress/gutenberg/pull/45017))
+-   Web Font: Fix ascent/descent-override property typo. ([45125](https://github.com/WordPress/gutenberg/pull/45125))
 
 #### Block Library
 
-- Button: Reset background-image property for outline button style. ([45234](https://github.com/WordPress/gutenberg/pull/45234))
-- Cover, Search, Spacer: Fix control widths. ([45329](https://github.com/WordPress/gutenberg/pull/45329))
-- Navigation: Fix saving/loading experience of uncontrolled blocks. ([45486](https://github.com/WordPress/gutenberg/pull/45486))
-- Navigation: Add padding to buttons when Submenus Open on click is enabled. ([44605](https://github.com/WordPress/gutenberg/pull/44605))
-- List: Fix migration when the nested list is invalid. ([44822](https://github.com/WordPress/gutenberg/pull/44822))
-- Page List: Allow direct selection of nested Page List block by avoiding dual rendering within block. ([45143](https://github.com/WordPress/gutenberg/pull/45143))
-- Site Tagline: Fix user permission HTTP errors. ([45140](https://github.com/WordPress/gutenberg/pull/45140))
-- Site Title: Avoid 403 errors for users with low permissions. ([45093](https://github.com/WordPress/gutenberg/pull/45093))
+-   Button: Reset background-image property for outline button style. ([45234](https://github.com/WordPress/gutenberg/pull/45234))
+-   Cover, Search, Spacer: Fix control widths. ([45329](https://github.com/WordPress/gutenberg/pull/45329))
+-   Navigation: Fix saving/loading experience of uncontrolled blocks. ([45486](https://github.com/WordPress/gutenberg/pull/45486))
+-   Navigation: Add padding to buttons when Submenus Open on click is enabled. ([44605](https://github.com/WordPress/gutenberg/pull/44605))
+-   List: Fix migration when the nested list is invalid. ([44822](https://github.com/WordPress/gutenberg/pull/44822))
+-   Page List: Allow direct selection of nested Page List block by avoiding dual rendering within block. ([45143](https://github.com/WordPress/gutenberg/pull/45143))
+-   Site Tagline: Fix user permission HTTP errors. ([45140](https://github.com/WordPress/gutenberg/pull/45140))
+-   Site Title: Avoid 403 errors for users with low permissions. ([45093](https://github.com/WordPress/gutenberg/pull/45093))
 
 #### Components
 
-- AnglePickerControl: Set Storybook label control type to text. ([45122](https://github.com/WordPress/gutenberg/pull/45122))
-- AutocompleteUI: Close popup when click happens outside of the popover. ([44795](https://github.com/WordPress/gutenberg/pull/44795))
-- BorderControl: Await floating-ui state changes when rendering/opening popover to fix unit test failures. ([45241](https://github.com/WordPress/gutenberg/pull/45241))
-- Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
-- ColorPalette: Fix transparent checkered background pattern. ([45295](https://github.com/WordPress/gutenberg/pull/45295))
-- ExternalLink: Update to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
-- InputControl: Allow inline styles to be applied to wrapper instead of inner input. ([45340](https://github.com/WordPress/gutenberg/pull/45340))
-- ItemGroup: Fix RTL text alignment when item is clickable. ([45280](https://github.com/WordPress/gutenberg/pull/45280))
-- Popover: Fix deprecations. ([45195](https://github.com/WordPress/gutenberg/pull/45195))
-- PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
-- SpacingSizesControl: Remove UnitControl inline style use. ([45412](https://github.com/WordPress/gutenberg/pull/45412))
-- TabPanel: Add tests and changelog for onSelect behavior change. ([45211](https://github.com/WordPress/gutenberg/pull/45211))
-- UnitControl: Fix disabled style is overridden by forms.css. ([45250](https://github.com/WordPress/gutenberg/pull/45250))
-- Visual Editor: Fix permission error. ([45262](https://github.com/WordPress/gutenberg/pull/45262))
+-   AnglePickerControl: Set Storybook label control type to text. ([45122](https://github.com/WordPress/gutenberg/pull/45122))
+-   AutocompleteUI: Close popup when click happens outside of the popover. ([44795](https://github.com/WordPress/gutenberg/pull/44795))
+-   BorderControl: Await floating-ui state changes when rendering/opening popover to fix unit test failures. ([45241](https://github.com/WordPress/gutenberg/pull/45241))
+-   Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
+-   ColorPalette: Fix transparent checkered background pattern. ([45295](https://github.com/WordPress/gutenberg/pull/45295))
+-   ExternalLink: Update to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
+-   InputControl: Allow inline styles to be applied to wrapper instead of inner input. ([45340](https://github.com/WordPress/gutenberg/pull/45340))
+-   ItemGroup: Fix RTL text alignment when item is clickable. ([45280](https://github.com/WordPress/gutenberg/pull/45280))
+-   Popover: Fix deprecations. ([45195](https://github.com/WordPress/gutenberg/pull/45195))
+-   PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
+-   SpacingSizesControl: Remove UnitControl inline style use. ([45412](https://github.com/WordPress/gutenberg/pull/45412))
+-   TabPanel: Add tests and changelog for onSelect behavior change. ([45211](https://github.com/WordPress/gutenberg/pull/45211))
+-   UnitControl: Fix disabled style is overridden by forms.css. ([45250](https://github.com/WordPress/gutenberg/pull/45250))
+-   Visual Editor: Fix permission error. ([45262](https://github.com/WordPress/gutenberg/pull/45262))
 
 #### Site Editor
 
-- Fix clipped body background style in the Site Editor. ([45261](https://github.com/WordPress/gutenberg/pull/45261))
-- Only mark the 'Site' menu item active when editing a home template. ([42807](https://github.com/WordPress/gutenberg/pull/42807))
+-   Fix clipped body background style in the Site Editor. ([45261](https://github.com/WordPress/gutenberg/pull/45261))
+-   Only mark the 'Site' menu item active when editing a home template. ([42807](https://github.com/WordPress/gutenberg/pull/42807))
 
 ### Performance
 
-- Lodash: Refactor away from using Lodash. ([45311](https://github.com/WordPress/gutenberg/pull/45311), [45306](https://github.com/WordPress/gutenberg/pull/45306), [45335](https://github.com/WordPress/gutenberg/pull/45335), [45338](https://github.com/WordPress/gutenberg/pull/45338), [45310](https://github.com/WordPress/gutenberg/pull/45310), [45098](https://github.com/WordPress/gutenberg/pull/45098), [45282](https://github.com/WordPress/gutenberg/pull/45282), [45316](https://github.com/WordPress/gutenberg/pull/45316), [45342](https://github.com/WordPress/gutenberg/pull/45342), [45307](https://github.com/WordPress/gutenberg/pull/45307), [45312](https://github.com/WordPress/gutenberg/pull/45312), [45337](https://github.com/WordPress/gutenberg/pull/45337), [45367](https://github.com/WordPress/gutenberg/pull/45367), [44980](https://github.com/WordPress/gutenberg/pull/44980), [45281](https://github.com/WordPress/gutenberg/pull/45281))
+-   Lodash: Refactor away from using Lodash. ([45311](https://github.com/WordPress/gutenberg/pull/45311), [45306](https://github.com/WordPress/gutenberg/pull/45306), [45335](https://github.com/WordPress/gutenberg/pull/45335), [45338](https://github.com/WordPress/gutenberg/pull/45338), [45310](https://github.com/WordPress/gutenberg/pull/45310), [45098](https://github.com/WordPress/gutenberg/pull/45098), [45282](https://github.com/WordPress/gutenberg/pull/45282), [45316](https://github.com/WordPress/gutenberg/pull/45316), [45342](https://github.com/WordPress/gutenberg/pull/45342), [45307](https://github.com/WordPress/gutenberg/pull/45307), [45312](https://github.com/WordPress/gutenberg/pull/45312), [45337](https://github.com/WordPress/gutenberg/pull/45337), [45367](https://github.com/WordPress/gutenberg/pull/45367), [44980](https://github.com/WordPress/gutenberg/pull/44980), [45281](https://github.com/WordPress/gutenberg/pull/45281))
 
 ### Documentation
 
-- Add a readme to the letter spacing component. ([45308](https://github.com/WordPress/gutenberg/pull/45308))
-- Add changelogs for internal refactorings using inert. ([45269](https://github.com/WordPress/gutenberg/pull/45269))
-- Add "Do not use in production" message to content locking experimental API's. ([45291](https://github.com/WordPress/gutenberg/pull/45291))
-- Add Storybook intro. ([45115](https://github.com/WordPress/gutenberg/pull/45115))
-- Code Quality: Fix some misspelled words. ([45222](https://github.com/WordPress/gutenberg/pull/45222))
-- Disabled: Update documentation to clarify the absence of inert polyfill. ([45272](https://github.com/WordPress/gutenberg/pull/45272))
-- Fix incorrect character in code example. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
-- Fix missing anchor link in FAQ URL. ([45232](https://github.com/WordPress/gutenberg/pull/45232))
-- FontSizePicker: Update changelog for #45041. ([45180](https://github.com/WordPress/gutenberg/pull/45180))
-- Updating curation document to include content lock ability. ([44908](https://github.com/WordPress/gutenberg/pull/44908))
-- useAnchorRef: Update deprecation message. ([45302](https://github.com/WordPress/gutenberg/pull/45302))
+-   Add a readme to the letter spacing component. ([45308](https://github.com/WordPress/gutenberg/pull/45308))
+-   Add changelogs for internal refactorings using inert. ([45269](https://github.com/WordPress/gutenberg/pull/45269))
+-   Add "Do not use in production" message to content locking experimental API's. ([45291](https://github.com/WordPress/gutenberg/pull/45291))
+-   Add Storybook intro. ([45115](https://github.com/WordPress/gutenberg/pull/45115))
+-   Code Quality: Fix some misspelled words. ([45222](https://github.com/WordPress/gutenberg/pull/45222))
+-   Disabled: Update documentation to clarify the absence of inert polyfill. ([45272](https://github.com/WordPress/gutenberg/pull/45272))
+-   Fix incorrect character in code example. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
+-   Fix missing anchor link in FAQ URL. ([45232](https://github.com/WordPress/gutenberg/pull/45232))
+-   FontSizePicker: Update changelog for #45041. ([45180](https://github.com/WordPress/gutenberg/pull/45180))
+-   Updating curation document to include content lock ability. ([44908](https://github.com/WordPress/gutenberg/pull/44908))
+-   useAnchorRef: Update deprecation message. ([45302](https://github.com/WordPress/gutenberg/pull/45302))
 
 ### Code Quality
 
-- Block Editor: Improve `MediaReplaceFlow` tests. ([45424](https://github.com/WordPress/gutenberg/pull/45424))
-- Block Editor: Refactor align tests to RTL. ([45152](https://github.com/WordPress/gutenberg/pull/45152))
-- Editors: Refactor icon tests to follow `no-container` rule. ([45422](https://github.com/WordPress/gutenberg/pull/45422))
-- Fix indent and quote in dependbot.yml. ([45167](https://github.com/WordPress/gutenberg/pull/45167))
-- Fix PHP 8.1 deprecation for `strncmp()`. ([44829](https://github.com/WordPress/gutenberg/pull/44829))
-- Popover: Use new placement prop instead of legacy position prop. ([44392](https://github.com/WordPress/gutenberg/pull/44392), [44387](https://github.com/WordPress/gutenberg/pull/44387), [44389](https://github.com/WordPress/gutenberg/pull/44389), [44398](https://github.com/WordPress/gutenberg/pull/44398), [44399](https://github.com/WordPress/gutenberg/pull/44399), [44394](https://github.com/WordPress/gutenberg/pull/44394), [44395](https://github.com/WordPress/gutenberg/pull/44395), [44390](https://github.com/WordPress/gutenberg/pull/44390), [44396](https://github.com/WordPress/gutenberg/pull/44396), [44388](https://github.com/WordPress/gutenberg/pull/44388))
-- PostTextEditor test: Wrap `.blur` calls in `act()`. ([45243](https://github.com/WordPress/gutenberg/pull/45243))
-- Replace the MainDashboardButton slot with a setting in the site editor. ([45149](https://github.com/WordPress/gutenberg/pull/45149))
-- Run script loader test. ([45288](https://github.com/WordPress/gutenberg/pull/45288))
-- Site Editor: Move the save view state to the edit site store. ([45200](https://github.com/WordPress/gutenberg/pull/45200))
-- Small follow-ups to the distraction free mode PR. ([45151](https://github.com/WordPress/gutenberg/pull/45151))
-- Tests: Use `container` instead of `container.firstChild` for snapshots. ([45278](https://github.com/WordPress/gutenberg/pull/45278))
-- useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. ([45317](https://github.com/WordPress/gutenberg/pull/45317))
-- useFocusableIframe: Refactor to TypeScript. ([45428](https://github.com/WordPress/gutenberg/pull/45428))
+-   Block Editor: Improve `MediaReplaceFlow` tests. ([45424](https://github.com/WordPress/gutenberg/pull/45424))
+-   Block Editor: Refactor align tests to RTL. ([45152](https://github.com/WordPress/gutenberg/pull/45152))
+-   Editors: Refactor icon tests to follow `no-container` rule. ([45422](https://github.com/WordPress/gutenberg/pull/45422))
+-   Fix indent and quote in dependbot.yml. ([45167](https://github.com/WordPress/gutenberg/pull/45167))
+-   Fix PHP 8.1 deprecation for `strncmp()`. ([44829](https://github.com/WordPress/gutenberg/pull/44829))
+-   Popover: Use new placement prop instead of legacy position prop. ([44392](https://github.com/WordPress/gutenberg/pull/44392), [44387](https://github.com/WordPress/gutenberg/pull/44387), [44389](https://github.com/WordPress/gutenberg/pull/44389), [44398](https://github.com/WordPress/gutenberg/pull/44398), [44399](https://github.com/WordPress/gutenberg/pull/44399), [44394](https://github.com/WordPress/gutenberg/pull/44394), [44395](https://github.com/WordPress/gutenberg/pull/44395), [44390](https://github.com/WordPress/gutenberg/pull/44390), [44396](https://github.com/WordPress/gutenberg/pull/44396), [44388](https://github.com/WordPress/gutenberg/pull/44388))
+-   PostTextEditor test: Wrap `.blur` calls in `act()`. ([45243](https://github.com/WordPress/gutenberg/pull/45243))
+-   Replace the MainDashboardButton slot with a setting in the site editor. ([45149](https://github.com/WordPress/gutenberg/pull/45149))
+-   Run script loader test. ([45288](https://github.com/WordPress/gutenberg/pull/45288))
+-   Site Editor: Move the save view state to the edit site store. ([45200](https://github.com/WordPress/gutenberg/pull/45200))
+-   Small follow-ups to the distraction free mode PR. ([45151](https://github.com/WordPress/gutenberg/pull/45151))
+-   Tests: Use `container` instead of `container.firstChild` for snapshots. ([45278](https://github.com/WordPress/gutenberg/pull/45278))
+-   useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. ([45317](https://github.com/WordPress/gutenberg/pull/45317))
+-   useFocusableIframe: Refactor to TypeScript. ([45428](https://github.com/WordPress/gutenberg/pull/45428))
 
 #### Components
 
-- Add a popover `variant` prop and refactor popovers to use it, deprecate `isAlternate`. ([45137](https://github.com/WordPress/gutenberg/pull/45137))
-- Add parseQuantityAndUnitFromRawValue tests. ([45260](https://github.com/WordPress/gutenberg/pull/45260))
-- FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. ([45298](https://github.com/WordPress/gutenberg/pull/45298))
-- BorderBoxControl: Improve tests. ([45208](https://github.com/WordPress/gutenberg/pull/45208))
-- ContextSystemProvider, useUpdateEffect, SlotFill, Snackbar, TabPanel: Refactor to pass `exhaustive-deps`. ([45044](https://github.com/WordPress/gutenberg/pull/45044), [44403](https://github.com/WordPress/gutenberg/pull/44403), [44934](https://github.com/WordPress/gutenberg/pull/44934), [44935](https://github.com/WordPress/gutenberg/pull/44935))
-- Remove unnecessary `.firstChild` from tests. ([45419](https://github.com/WordPress/gutenberg/pull/45419))
-- Update some React 18 related types. ([45279](https://github.com/WordPress/gutenberg/pull/45279))
+-   Add a popover `variant` prop and refactor popovers to use it, deprecate `isAlternate`. ([45137](https://github.com/WordPress/gutenberg/pull/45137))
+-   Add parseQuantityAndUnitFromRawValue tests. ([45260](https://github.com/WordPress/gutenberg/pull/45260))
+-   FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. ([45298](https://github.com/WordPress/gutenberg/pull/45298))
+-   BorderBoxControl: Improve tests. ([45208](https://github.com/WordPress/gutenberg/pull/45208))
+-   ContextSystemProvider, useUpdateEffect, SlotFill, Snackbar, TabPanel: Refactor to pass `exhaustive-deps`. ([45044](https://github.com/WordPress/gutenberg/pull/45044), [44403](https://github.com/WordPress/gutenberg/pull/44403), [44934](https://github.com/WordPress/gutenberg/pull/44934), [44935](https://github.com/WordPress/gutenberg/pull/44935))
+-   Remove unnecessary `.firstChild` from tests. ([45419](https://github.com/WordPress/gutenberg/pull/45419))
+-   Update some React 18 related types. ([45279](https://github.com/WordPress/gutenberg/pull/45279))
 
 #### Global Styles
 
-- Add `wp_theme_has_theme_json` as a public API to know whether a theme has a `theme.json`. ([45168](https://github.com/WordPress/gutenberg/pull/45168))
-- Deprecate `WP_Theme_JSON_Resolver:Theme_has_support()`. ([45380](https://github.com/WordPress/gutenberg/pull/45380))
+-   Add `wp_theme_has_theme_json` as a public API to know whether a theme has a `theme.json`. ([45168](https://github.com/WordPress/gutenberg/pull/45168))
+-   Deprecate `WP_Theme_JSON_Resolver:Theme_has_support()`. ([45380](https://github.com/WordPress/gutenberg/pull/45380))
 
 ### Tools
 
 #### Testing
 
-- Add Playwright Compatibility-classic-editor Test. ([43979](https://github.com/WordPress/gutenberg/pull/43979))
-- Add end-to-end tests for Drag-and-Drop in the inserter. ([44631](https://github.com/WordPress/gutenberg/pull/44631))
-- Cleanup after the writing flow end-to-end tests. ([45119](https://github.com/WordPress/gutenberg/pull/45119))
-- Fix failing PHPUnit tests. ([45265](https://github.com/WordPress/gutenberg/pull/45265))
-- Fix uploading artifacts even when the tests are successful. ([45187](https://github.com/WordPress/gutenberg/pull/45187))
-- Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
-- Migrate tests to Playwright. ([43963](https://github.com/WordPress/gutenberg/pull/43963), [45267](https://github.com/WordPress/gutenberg/pull/45267), [44916](https://github.com/WordPress/gutenberg/pull/44916), [44507](https://github.com/WordPress/gutenberg/pull/44507), [45393](https://github.com/WordPress/gutenberg/pull/45393), [43964](https://github.com/WordPress/gutenberg/pull/43964), [45202](https://github.com/WordPress/gutenberg/pull/45202))
-- Re-enable skipped Gallery block end-to-end test. ([45266](https://github.com/WordPress/gutenberg/pull/45266))
-- Try fixing Site Title flaky end-to-end tests. ([45160](https://github.com/WordPress/gutenberg/pull/45160))
-- Update Playwright to v1.27. ([45193](https://github.com/WordPress/gutenberg/pull/45193))
+-   Add Playwright Compatibility-classic-editor Test. ([43979](https://github.com/WordPress/gutenberg/pull/43979))
+-   Add end-to-end tests for Drag-and-Drop in the inserter. ([44631](https://github.com/WordPress/gutenberg/pull/44631))
+-   Cleanup after the writing flow end-to-end tests. ([45119](https://github.com/WordPress/gutenberg/pull/45119))
+-   Fix failing PHPUnit tests. ([45265](https://github.com/WordPress/gutenberg/pull/45265))
+-   Fix uploading artifacts even when the tests are successful. ([45187](https://github.com/WordPress/gutenberg/pull/45187))
+-   Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
+-   Migrate tests to Playwright. ([43963](https://github.com/WordPress/gutenberg/pull/43963), [45267](https://github.com/WordPress/gutenberg/pull/45267), [44916](https://github.com/WordPress/gutenberg/pull/44916), [44507](https://github.com/WordPress/gutenberg/pull/44507), [45393](https://github.com/WordPress/gutenberg/pull/45393), [43964](https://github.com/WordPress/gutenberg/pull/43964), [45202](https://github.com/WordPress/gutenberg/pull/45202))
+-   Re-enable skipped Gallery block end-to-end test. ([45266](https://github.com/WordPress/gutenberg/pull/45266))
+-   Try fixing Site Title flaky end-to-end tests. ([45160](https://github.com/WordPress/gutenberg/pull/45160))
+-   Update Playwright to v1.27. ([45193](https://github.com/WordPress/gutenberg/pull/45193))
 
 #### Build Tooling
 
-- ESLint: Add and enable `eslint-plugin-testing-library`. ([45103](https://github.com/WordPress/gutenberg/pull/45103))
-- ESLint: Exclude Playwright tests from testing library rules. ([45366](https://github.com/WordPress/gutenberg/pull/45366))
-- Fix native Demo editor build error when using Xcode 14 to build to a physical device. ([45120](https://github.com/WordPress/gutenberg/pull/45120))
-- Remove comments from compiled styles. ([43177](https://github.com/WordPress/gutenberg/pull/43177))
-- Upgrade rtlcss to v4.0.0. ([43208](https://github.com/WordPress/gutenberg/pull/43208))
+-   ESLint: Add and enable `eslint-plugin-testing-library`. ([45103](https://github.com/WordPress/gutenberg/pull/45103))
+-   ESLint: Exclude Playwright tests from testing library rules. ([45366](https://github.com/WordPress/gutenberg/pull/45366))
+-   Fix native Demo editor build error when using Xcode 14 to build to a physical device. ([45120](https://github.com/WordPress/gutenberg/pull/45120))
+-   Remove comments from compiled styles. ([43177](https://github.com/WordPress/gutenberg/pull/43177))
+-   Upgrade rtlcss to v4.0.0. ([43208](https://github.com/WordPress/gutenberg/pull/43208))
 
-## First time contributors
+## First-time contributors
 
-The following PRs were merged by first time contributors:
+The following PRs were merged by first-time contributors:
 
-- @alvitazwar: Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
-- @GeoJunkie: PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
-- @Initsogar: Components: Update ExternalLink to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
-- @jornp: Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
-- @pkorzelius: Character Swap. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
+-   @alvitazwar: Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
+-   @GeoJunkie: PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
+-   @Initsogar: Components: Update ExternalLink to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
+-   @jornp: Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
+-   @pkorzelius: Character Swap. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
 
 ## Contributors
 
@@ -497,251 +24459,244 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @alvitazwar @andrewserong @annezazu @aristath @BE-Webdesign @bph @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ellatrix @fluiddot @GeoJunkie @georgeh @getdave @glendaviesnz @gziolo @Initsogar @jorgefilipecosta @jornp @jsnajdr @kevin940726 @KevinBatdorf @kienstra @Mamaduka @mikachan @mirka @noisysocks @ntsekouras @oandregal @pkorzelius @pooja-muchandikar @ramonjd @SavPhill @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad
 
-
-
-
 = 14.4.0 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Add prop to disable block selection clearer in BlockList. ([44517](https://github.com/WordPress/gutenberg/pull/44517))
-- Multi-select: Fix 1px indent. ([44709](https://github.com/WordPress/gutenberg/pull/44709))
-- ServerSideRender: Add new `skipBlockSupportAttributes` prop. ([44491](https://github.com/WordPress/gutenberg/pull/44491))
-- Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. ([44597](https://github.com/WordPress/gutenberg/pull/44597))
-- Try: Add a small radius to the multi selection style. ([44708](https://github.com/WordPress/gutenberg/pull/44708))
-- Block Locking: Adds content locking to navigation block. ([44739](https://github.com/WordPress/gutenberg/pull/44739))
-- Rich Text: Use fallback icon for highlight format. ([44705](https://github.com/WordPress/gutenberg/pull/44705))
-- Create Block: Allows custom keys to be generated in block.json files and package.json files. ([44649](https://github.com/WordPress/gutenberg/pull/44649))
+-   Add prop to disable block selection clearer in BlockList. ([44517](https://github.com/WordPress/gutenberg/pull/44517))
+-   Multi-select: Fix 1px indent. ([44709](https://github.com/WordPress/gutenberg/pull/44709))
+-   ServerSideRender: Add new `skipBlockSupportAttributes` prop. ([44491](https://github.com/WordPress/gutenberg/pull/44491))
+-   Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. ([44597](https://github.com/WordPress/gutenberg/pull/44597))
+-   Try: Add a small radius to the multi selection style. ([44708](https://github.com/WordPress/gutenberg/pull/44708))
+-   Block Locking: Adds content locking to navigation block. ([44739](https://github.com/WordPress/gutenberg/pull/44739))
+-   Rich Text: Use fallback icon for highlight format. ([44705](https://github.com/WordPress/gutenberg/pull/44705))
+-   Create Block: Allows custom keys to be generated in block.json files and package.json files. ([44649](https://github.com/WordPress/gutenberg/pull/44649))
 
 #### Block Library
-- Comments: Add spacing support. ([45102](https://github.com/WordPress/gutenberg/pull/45102))
-- Tag Cloud: Add typography supports (except font size). ([43452](https://github.com/WordPress/gutenberg/pull/43452))
-- Image: Add toolbar button to add a caption. ([44965](https://github.com/WordPress/gutenberg/pull/44965))
-- List Item: Adopt typography supports. ([43312](https://github.com/WordPress/gutenberg/pull/43312))
+
+-   Comments: Add spacing support. ([45102](https://github.com/WordPress/gutenberg/pull/45102))
+-   Tag Cloud: Add typography supports (except font size). ([43452](https://github.com/WordPress/gutenberg/pull/43452))
+-   Image: Add toolbar button to add a caption. ([44965](https://github.com/WordPress/gutenberg/pull/44965))
+-   List Item: Adopt typography supports. ([43312](https://github.com/WordPress/gutenberg/pull/43312))
 
 #### Components
-- BorderBoxControl: Omit unit select when values are mixed. ([44592](https://github.com/WordPress/gutenberg/pull/44592))
-- SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. ([44573](https://github.com/WordPress/gutenberg/pull/44573))
 
+-   BorderBoxControl: Omit unit select when values are mixed. ([44592](https://github.com/WordPress/gutenberg/pull/44592))
+-   SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. ([44573](https://github.com/WordPress/gutenberg/pull/44573))
 
 #### Block Editor
-- Introduce distraction free mode. ([41740](https://github.com/WordPress/gutenberg/pull/41740))
-- Redesign the main pattern inserter. ([44028](https://github.com/WordPress/gutenberg/pull/44028))
-- Inserter: Add a more pronounced hover effect. ([44711](https://github.com/WordPress/gutenberg/pull/44711))
 
+-   Introduce distraction free mode. ([41740](https://github.com/WordPress/gutenberg/pull/41740))
+-   Redesign the main pattern inserter. ([44028](https://github.com/WordPress/gutenberg/pull/44028))
+-   Inserter: Add a more pronounced hover effect. ([44711](https://github.com/WordPress/gutenberg/pull/44711))
 
 #### Design Tools
-- SpacingSizesControl: Increase slider's max value to 300. ([44956](https://github.com/WordPress/gutenberg/pull/44956))
-- Style engine: Permit wp custom CSS properties. ([43071](https://github.com/WordPress/gutenberg/pull/43071))
-- Try color theming. ([44668](https://github.com/WordPress/gutenberg/pull/44668))
-- Global Styles: Modify Frame animation of styles grid. ([39717](https://github.com/WordPress/gutenberg/pull/39717))
-
 
+-   SpacingSizesControl: Increase slider's max value to 300. ([44956](https://github.com/WordPress/gutenberg/pull/44956))
+-   Style engine: Permit wp custom CSS properties. ([43071](https://github.com/WordPress/gutenberg/pull/43071))
+-   Try color theming. ([44668](https://github.com/WordPress/gutenberg/pull/44668))
+-   Global Styles: Modify Frame animation of styles grid. ([39717](https://github.com/WordPress/gutenberg/pull/39717))
 
 ### Bug Fixes
 
-
-- Clickable placeholder upload button. ([44817](https://github.com/WordPress/gutenberg/pull/44817))
-- Insertion point showing up unexpectedly. ([44702](https://github.com/WordPress/gutenberg/pull/44702))
-- Overflowing patterns. ([44853](https://github.com/WordPress/gutenberg/pull/44853))
-- Inspector is usable on the top level block even if it is content locked. ([44878](https://github.com/WordPress/gutenberg/pull/44878))
-- Use active variation as the parent block if available. ([44609](https://github.com/WordPress/gutenberg/pull/44609))
-- Placeholder for the navigation link label, to be about the label. ([44733](https://github.com/WordPress/gutenberg/pull/44733))
-- Hide the inbetween inserter consistently as you move the mouse. ([44814](https://github.com/WordPress/gutenberg/pull/44814))
-- Margin visualiser: Apply negative value to margins with calc(). ([44718](https://github.com/WordPress/gutenberg/pull/44718))
-- Placeholder: Fix hover style. ([44701](https://github.com/WordPress/gutenberg/pull/44701))
-- Post editor: Rename view to Preview. ([45074](https://github.com/WordPress/gutenberg/pull/45074))
-- Prevent empty block toolbars from showing empty slots. ([44704](https://github.com/WordPress/gutenberg/pull/44704))
-- Use inert attribute instead of useDisabled. ([44865](https://github.com/WordPress/gutenberg/pull/44865))
-- cleanForSlug: Replace multiple hyphens with a single one. ([44873](https://github.com/WordPress/gutenberg/pull/44873))
-- Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. ([44998](https://github.com/WordPress/gutenberg/pull/44998))
-- Most used tags: Try fixing label. ([44859](https://github.com/WordPress/gutenberg/pull/44859))
-- Only include theme.css if the theme declares support for wp-block-styles. ([44640](https://github.com/WordPress/gutenberg/pull/44640))
-- Merge inner blocks if wrappers are equal. ([43181](https://github.com/WordPress/gutenberg/pull/43181))
-- Try nested patterns previews with block editor setting. ([44784](https://github.com/WordPress/gutenberg/pull/44784))
-- Design Tools Adjust the custom range steps to match the units chosen. ([44959](https://github.com/WordPress/gutenberg/pull/44959))
-- Global Styles: Invoke zoomed-out view when selecting a style variation. ([44987](https://github.com/WordPress/gutenberg/pull/44987))
-- Plugin: Don't use the custom 'Template Parts' page with WP 6.1 and above. ([45158](https://github.com/WordPress/gutenberg/pull/45158))
-
+-   Clickable placeholder upload button. ([44817](https://github.com/WordPress/gutenberg/pull/44817))
+-   Insertion point showing up unexpectedly. ([44702](https://github.com/WordPress/gutenberg/pull/44702))
+-   Overflowing patterns. ([44853](https://github.com/WordPress/gutenberg/pull/44853))
+-   Inspector is usable on the top level block even if it is content locked. ([44878](https://github.com/WordPress/gutenberg/pull/44878))
+-   Use active variation as the parent block if available. ([44609](https://github.com/WordPress/gutenberg/pull/44609))
+-   Placeholder for the navigation link label, to be about the label. ([44733](https://github.com/WordPress/gutenberg/pull/44733))
+-   Hide the inbetween inserter consistently as you move the mouse. ([44814](https://github.com/WordPress/gutenberg/pull/44814))
+-   Margin visualiser: Apply negative value to margins with calc(). ([44718](https://github.com/WordPress/gutenberg/pull/44718))
+-   Placeholder: Fix hover style. ([44701](https://github.com/WordPress/gutenberg/pull/44701))
+-   Post editor: Rename view to Preview. ([45074](https://github.com/WordPress/gutenberg/pull/45074))
+-   Prevent empty block toolbars from showing empty slots. ([44704](https://github.com/WordPress/gutenberg/pull/44704))
+-   Use inert attribute instead of useDisabled. ([44865](https://github.com/WordPress/gutenberg/pull/44865))
+-   cleanForSlug: Replace multiple hyphens with a single one. ([44873](https://github.com/WordPress/gutenberg/pull/44873))
+-   Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. ([44998](https://github.com/WordPress/gutenberg/pull/44998))
+-   Most used tags: Try fixing label. ([44859](https://github.com/WordPress/gutenberg/pull/44859))
+-   Only include theme.css if the theme declares support for wp-block-styles. ([44640](https://github.com/WordPress/gutenberg/pull/44640))
+-   Merge inner blocks if wrappers are equal. ([43181](https://github.com/WordPress/gutenberg/pull/43181))
+-   Try nested patterns previews with block editor setting. ([44784](https://github.com/WordPress/gutenberg/pull/44784))
+-   Design Tools Adjust the custom range steps to match the units chosen. ([44959](https://github.com/WordPress/gutenberg/pull/44959))
+-   Global Styles: Invoke zoomed-out view when selecting a style variation. ([44987](https://github.com/WordPress/gutenberg/pull/44987))
+-   Plugin: Don't use the custom 'Template Parts' page with WP 6.1 and above. ([45158](https://github.com/WordPress/gutenberg/pull/45158))
 
 #### Block Library
-- Avoid querying block templates during installation. ([44584](https://github.com/WordPress/gutenberg/pull/44584))
-- Buttons: Add specificity for the editor. ([44731](https://github.com/WordPress/gutenberg/pull/44731))
-- Embed Block: Add support for Tumblr Dashboard URLs. ([44854](https://github.com/WordPress/gutenberg/pull/44854))
-- Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
-- Fix the cover block focal point picker. ([44991](https://github.com/WordPress/gutenberg/pull/44991))
-- Fix typo for word occurred. ([44914](https://github.com/WordPress/gutenberg/pull/44914))
-- Fix visibility of nested Group block appender. ([45050](https://github.com/WordPress/gutenberg/pull/45050))
-- Fix: Follow discussion settings in the comments block edit. ([44463](https://github.com/WordPress/gutenberg/pull/44463))
-- Group, Row, Stack, Columns. Fix missing border regression. ([44696](https://github.com/WordPress/gutenberg/pull/44696))
-- List Item: Allow Gutenberg to override core block type. ([44911](https://github.com/WordPress/gutenberg/pull/44911))
-- List v2: Selection when creating paragraph from empty list item. ([44864](https://github.com/WordPress/gutenberg/pull/44864))
-- Remove anchor support from the navigation block. ([44721](https://github.com/WordPress/gutenberg/pull/44721))
-- Removes __unstableMaxPages attribute from Page List block (and Nav block). ([44415](https://github.com/WordPress/gutenberg/pull/44415))
-- Site Logo: User permission HTTP errors. ([45104](https://github.com/WordPress/gutenberg/pull/45104))
-- Site logo: Centered state, for upload button. ([44861](https://github.com/WordPress/gutenberg/pull/44861))
-- Media: Cover block text color heuristic for cross origin media. ([44552](https://github.com/WordPress/gutenberg/pull/44552))
-- Icons: Arrow icons being misaligned. ([44666](https://github.com/WordPress/gutenberg/pull/44666))
-- Patterns: Hide list items from content area of content locked blocks. ([44676](https://github.com/WordPress/gutenberg/pull/44676))
-- Templates API: Avoid PHP warning when getting dynamic template data. ([44783](https://github.com/WordPress/gutenberg/pull/44783))
-- Block Settings: Show `move to` on nested blocks when only one root block. ([44827](https://github.com/WordPress/gutenberg/pull/44827))
-- Navigation: Fallback to a classic menu if one is available. ([44173](https://github.com/WordPress/gutenberg/pull/44173))
+
+-   Avoid querying block templates during installation. ([44584](https://github.com/WordPress/gutenberg/pull/44584))
+-   Buttons: Add specificity for the editor. ([44731](https://github.com/WordPress/gutenberg/pull/44731))
+-   Embed Block: Add support for Tumblr Dashboard URLs. ([44854](https://github.com/WordPress/gutenberg/pull/44854))
+-   Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
+-   Fix the cover block focal point picker. ([44991](https://github.com/WordPress/gutenberg/pull/44991))
+-   Fix typo for word occurred. ([44914](https://github.com/WordPress/gutenberg/pull/44914))
+-   Fix visibility of nested Group block appender. ([45050](https://github.com/WordPress/gutenberg/pull/45050))
+-   Fix: Follow discussion settings in the comments block edit. ([44463](https://github.com/WordPress/gutenberg/pull/44463))
+-   Group, Row, Stack, Columns. Fix missing border regression. ([44696](https://github.com/WordPress/gutenberg/pull/44696))
+-   List Item: Allow Gutenberg to override core block type. ([44911](https://github.com/WordPress/gutenberg/pull/44911))
+-   List v2: Selection when creating paragraph from empty list item. ([44864](https://github.com/WordPress/gutenberg/pull/44864))
+-   Remove anchor support from the navigation block. ([44721](https://github.com/WordPress/gutenberg/pull/44721))
+-   Removes \_\_unstableMaxPages attribute from Page List block (and Nav block). ([44415](https://github.com/WordPress/gutenberg/pull/44415))
+-   Site Logo: User permission HTTP errors. ([45104](https://github.com/WordPress/gutenberg/pull/45104))
+-   Site logo: Centered state, for upload button. ([44861](https://github.com/WordPress/gutenberg/pull/44861))
+-   Media: Cover block text color heuristic for cross origin media. ([44552](https://github.com/WordPress/gutenberg/pull/44552))
+-   Icons: Arrow icons being misaligned. ([44666](https://github.com/WordPress/gutenberg/pull/44666))
+-   Patterns: Hide list items from content area of content locked blocks. ([44676](https://github.com/WordPress/gutenberg/pull/44676))
+-   Templates API: Avoid PHP warning when getting dynamic template data. ([44783](https://github.com/WordPress/gutenberg/pull/44783))
+-   Block Settings: Show `move to` on nested blocks when only one root block. ([44827](https://github.com/WordPress/gutenberg/pull/44827))
+-   Navigation: Fallback to a classic menu if one is available. ([44173](https://github.com/WordPress/gutenberg/pull/44173))
 
 #### Site Editor
-- Toggle Navigation Menus Sidebar. ([44860](https://github.com/WordPress/gutenberg/pull/44860))
-- Zoomed out view: Keep list view open when entering mode. ([44781](https://github.com/WordPress/gutenberg/pull/44781))
 
+-   Toggle Navigation Menus Sidebar. ([44860](https://github.com/WordPress/gutenberg/pull/44860))
+-   Zoomed out view: Keep list view open when entering mode. ([44781](https://github.com/WordPress/gutenberg/pull/44781))
 
 #### Block Editor
-- Cover: Fix erroneous focus style in editor. ([44707](https://github.com/WordPress/gutenberg/pull/44707))
-- Native inner blocks merge where appropriate. ([45048](https://github.com/WordPress/gutenberg/pull/45048))
 
+-   Cover: Fix erroneous focus style in editor. ([44707](https://github.com/WordPress/gutenberg/pull/44707))
+-   Native inner blocks merge where appropriate. ([45048](https://github.com/WordPress/gutenberg/pull/45048))
 
 #### Typography
-- Fluid typography: Convert server-side block support values. ([44762](https://github.com/WordPress/gutenberg/pull/44762))
-- Fluid typography: Covert font size number values to pixels. ([44807](https://github.com/WordPress/gutenberg/pull/44807))
-- Fluid typography: Ensure fontsizes are strings or integers. ([44847](https://github.com/WordPress/gutenberg/pull/44847))
-- Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined. ([45041](https://github.com/WordPress/gutenberg/pull/45041))
-- Make custom font sizes appear fluid in the block editor when fluid typography is enabled. ([44765](https://github.com/WordPress/gutenberg/pull/44765))
-- Search block: Ensure font sizes values are converted to fluid in the editor. ([44852](https://github.com/WordPress/gutenberg/pull/44852))
-- Fluid typography: Convert font size inline style attributes to fluid values. ([44764](https://github.com/WordPress/gutenberg/pull/44764))
+
+-   Fluid typography: Convert server-side block support values. ([44762](https://github.com/WordPress/gutenberg/pull/44762))
+-   Fluid typography: Covert font size number values to pixels. ([44807](https://github.com/WordPress/gutenberg/pull/44807))
+-   Fluid typography: Ensure fontsizes are strings or integers. ([44847](https://github.com/WordPress/gutenberg/pull/44847))
+-   Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined. ([45041](https://github.com/WordPress/gutenberg/pull/45041))
+-   Make custom font sizes appear fluid in the block editor when fluid typography is enabled. ([44765](https://github.com/WordPress/gutenberg/pull/44765))
+-   Search block: Ensure font sizes values are converted to fluid in the editor. ([44852](https://github.com/WordPress/gutenberg/pull/44852))
+-   Fluid typography: Convert font size inline style attributes to fluid values. ([44764](https://github.com/WordPress/gutenberg/pull/44764))
 
 #### Components
-- FontSizePicker: Fix header order in RTL languages. ([44590](https://github.com/WordPress/gutenberg/pull/44590))
-- Navigator: Restore focus only once per location. ([44972](https://github.com/WordPress/gutenberg/pull/44972))
-- Spacing Sizes Control: Try improving layout spacing. ([44858](https://github.com/WordPress/gutenberg/pull/44858))
 
+-   FontSizePicker: Fix header order in RTL languages. ([44590](https://github.com/WordPress/gutenberg/pull/44590))
+-   Navigator: Restore focus only once per location. ([44972](https://github.com/WordPress/gutenberg/pull/44972))
+-   Spacing Sizes Control: Try improving layout spacing. ([44858](https://github.com/WordPress/gutenberg/pull/44858))
 
 #### Global Styles
-- Ensure style card effect doesn't cause scrollbars to appear. ([44823](https://github.com/WordPress/gutenberg/pull/44823))
-- Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values. ([44761](https://github.com/WordPress/gutenberg/pull/44761))
+
+-   Ensure style card effect doesn't cause scrollbars to appear. ([44823](https://github.com/WordPress/gutenberg/pull/44823))
+-   Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values. ([44761](https://github.com/WordPress/gutenberg/pull/44761))
 
 ### Accessibility
-- Fix the block toolbar styling when the 'Show button text labels' preference is enabled. ([44779](https://github.com/WordPress/gutenberg/pull/44779))
-- Fluid typography: Add font size constraints. ([44993](https://github.com/WordPress/gutenberg/pull/44993))
 
+-   Fix the block toolbar styling when the 'Show button text labels' preference is enabled. ([44779](https://github.com/WordPress/gutenberg/pull/44779))
+-   Fluid typography: Add font size constraints. ([44993](https://github.com/WordPress/gutenberg/pull/44993))
 
 ### Performance
 
-- Lodash refactor away ([44892](https://github.com/WordPress/gutenberg/pull/44892), [45014](https://github.com/WordPress/gutenberg/pull/45014), [45010](https://github.com/WordPress/gutenberg/pull/45010), [44875](https://github.com/WordPress/gutenberg/pull/44875), [44901](https://github.com/WordPress/gutenberg/pull/44901), [44874](https://github.com/WordPress/gutenberg/pull/44874), [44894](https://github.com/WordPress/gutenberg/pull/44894))
-- Lodash: Remove completely from `@wordpress/viewport` package. ([44572](https://github.com/WordPress/gutenberg/pull/44572))
-- Remove unnecessary repeated function call. ([44545](https://github.com/WordPress/gutenberg/pull/44545))
-- Block Library, QueryInspectorControls: Avoid rerender of TaxonomyControls on every keystroke. ([44562](https://github.com/WordPress/gutenberg/pull/44562))
+-   Lodash refactor away ([44892](https://github.com/WordPress/gutenberg/pull/44892), [45014](https://github.com/WordPress/gutenberg/pull/45014), [45010](https://github.com/WordPress/gutenberg/pull/45010), [44875](https://github.com/WordPress/gutenberg/pull/44875), [44901](https://github.com/WordPress/gutenberg/pull/44901), [44874](https://github.com/WordPress/gutenberg/pull/44874), [44894](https://github.com/WordPress/gutenberg/pull/44894))
+-   Lodash: Remove completely from `@wordpress/viewport` package. ([44572](https://github.com/WordPress/gutenberg/pull/44572))
+-   Remove unnecessary repeated function call. ([44545](https://github.com/WordPress/gutenberg/pull/44545))
+-   Block Library, QueryInspectorControls: Avoid rerender of TaxonomyControls on every keystroke. ([44562](https://github.com/WordPress/gutenberg/pull/44562))
 
 ### Documentation
 
-- Fix broken link to `01-basic-esnext` example. ([45000](https://github.com/WordPress/gutenberg/pull/45000))
-- Add `ariaLabel` support to block supports reference documentation. ([45006](https://github.com/WordPress/gutenberg/pull/45006))
-- Docs: Fix some typos. ([44713](https://github.com/WordPress/gutenberg/pull/44713))
-- Layout Docs: Fix broken link in table of contents. ([44719](https://github.com/WordPress/gutenberg/pull/44719))
-- Layout: Document the current state of the layout block support. ([42619](https://github.com/WordPress/gutenberg/pull/42619))
-- Make `spacingScale` description more accurate in theme.json schema. ([44794](https://github.com/WordPress/gutenberg/pull/44794))
-- Remove duplicate img tag. ([44936](https://github.com/WordPress/gutenberg/pull/44936))
-- Updating versions in WP in light of 6.0.3 release. ([45052](https://github.com/WordPress/gutenberg/pull/45052))
-- package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
-- Connect extend Query Loop documentation. ([44699](https://github.com/WordPress/gutenberg/pull/44699))
-- Update Extending the Query Loop block documentation. ([44703](https://github.com/WordPress/gutenberg/pull/44703))
-- Update link to plugin-sidebar example in documentation. ([44790](https://github.com/WordPress/gutenberg/pull/44790))
-- Update versions in WordPress documentation for 6.1. ([44785](https://github.com/WordPress/gutenberg/pull/44785))
-- Update visually hidden documentation to mention stacking context. ([44867](https://github.com/WordPress/gutenberg/pull/44867))
-
-
+-   Fix broken link to `01-basic-esnext` example. ([45000](https://github.com/WordPress/gutenberg/pull/45000))
+-   Add `ariaLabel` support to block supports reference documentation. ([45006](https://github.com/WordPress/gutenberg/pull/45006))
+-   Docs: Fix some typos. ([44713](https://github.com/WordPress/gutenberg/pull/44713))
+-   Layout Docs: Fix broken link in table of contents. ([44719](https://github.com/WordPress/gutenberg/pull/44719))
+-   Layout: Document the current state of the layout block support. ([42619](https://github.com/WordPress/gutenberg/pull/42619))
+-   Make `spacingScale` description more accurate in theme.json schema. ([44794](https://github.com/WordPress/gutenberg/pull/44794))
+-   Remove duplicate img tag. ([44936](https://github.com/WordPress/gutenberg/pull/44936))
+-   Updating versions in WP in light of 6.0.3 release. ([45052](https://github.com/WordPress/gutenberg/pull/45052))
+-   package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
+-   Connect extend Query Loop documentation. ([44699](https://github.com/WordPress/gutenberg/pull/44699))
+-   Update Extending the Query Loop block documentation. ([44703](https://github.com/WordPress/gutenberg/pull/44703))
+-   Update link to plugin-sidebar example in documentation. ([44790](https://github.com/WordPress/gutenberg/pull/44790))
+-   Update versions in WordPress documentation for 6.1. ([44785](https://github.com/WordPress/gutenberg/pull/44785))
+-   Update visually hidden documentation to mention stacking context. ([44867](https://github.com/WordPress/gutenberg/pull/44867))
 
 ### Code Quality
 
-- Fix comment in edit post reducer. ([44978](https://github.com/WordPress/gutenberg/pull/44978))
-- Fix: PHP 8.1 Deprecation messages. ([44828](https://github.com/WordPress/gutenberg/pull/44828))
-- Navigator: Remove overflow styles from NavigatorScreen. ([44973](https://github.com/WordPress/gutenberg/pull/44973))
-- Refactor the document actions component. ([45060](https://github.com/WordPress/gutenberg/pull/45060))
-- Simplify BlockStyles preview by removing the slot. ([44825](https://github.com/WordPress/gutenberg/pull/44825))
-- Update 6.1 CSS filter to match core. ([44962](https://github.com/WordPress/gutenberg/pull/44962))
-- Fluid Typography: Add missing style.css file to test theme. ([44958](https://github.com/WordPress/gutenberg/pull/44958))
-- Site Editor: Dynamic Templates Names and Descriptions: Code parity with wp/6.1. ([44646](https://github.com/WordPress/gutenberg/pull/44646))
-- Fluid Typography: Use wp_ prefixed function. ([44876](https://github.com/WordPress/gutenberg/pull/44876))
-- Remove gutenberg_ prefix for theme_json_get_style_nodes filter. ([44949](https://github.com/WordPress/gutenberg/pull/44949))
--  Update the names of filters for global styles data. ([44940](https://github.com/WordPress/gutenberg/pull/44940))
-- Try: Refresh selection styles. ([44150](https://github.com/WordPress/gutenberg/pull/44150))
-- Design Tools, Archive Block: Prevent spacing styles and additional CSS classes from being printed twice. ([44438](https://github.com/WordPress/gutenberg/pull/44438))
-- Design Tools, Tag Cloud Block: Prevent block support styles and additional CSS classes from being printed twice. ([44439](https://github.com/WordPress/gutenberg/pull/44439))
-- Site Editor: Rename header and sidebar components in edit-site. ([44974](https://github.com/WordPress/gutenberg/pull/44974))
-- Refactor dropzone for unmodified default blocks with `useBlockDropZone` and `InsertionPoint`. ([44647](https://github.com/WordPress/gutenberg/pull/44647))
-- Data: Cleanup `useDispatch` tests. ([44856](https://github.com/WordPress/gutenberg/pull/44856))
-
+-   Fix comment in edit post reducer. ([44978](https://github.com/WordPress/gutenberg/pull/44978))
+-   Fix: PHP 8.1 Deprecation messages. ([44828](https://github.com/WordPress/gutenberg/pull/44828))
+-   Navigator: Remove overflow styles from NavigatorScreen. ([44973](https://github.com/WordPress/gutenberg/pull/44973))
+-   Refactor the document actions component. ([45060](https://github.com/WordPress/gutenberg/pull/45060))
+-   Simplify BlockStyles preview by removing the slot. ([44825](https://github.com/WordPress/gutenberg/pull/44825))
+-   Update 6.1 CSS filter to match core. ([44962](https://github.com/WordPress/gutenberg/pull/44962))
+-   Fluid Typography: Add missing style.css file to test theme. ([44958](https://github.com/WordPress/gutenberg/pull/44958))
+-   Site Editor: Dynamic Templates Names and Descriptions: Code parity with wp/6.1. ([44646](https://github.com/WordPress/gutenberg/pull/44646))
+-   Fluid Typography: Use wp\_ prefixed function. ([44876](https://github.com/WordPress/gutenberg/pull/44876))
+-   Remove gutenberg\_ prefix for theme_json_get_style_nodes filter. ([44949](https://github.com/WordPress/gutenberg/pull/44949))
+-   Update the names of filters for global styles data. ([44940](https://github.com/WordPress/gutenberg/pull/44940))
+-   Try: Refresh selection styles. ([44150](https://github.com/WordPress/gutenberg/pull/44150))
+-   Design Tools, Archive Block: Prevent spacing styles and additional CSS classes from being printed twice. ([44438](https://github.com/WordPress/gutenberg/pull/44438))
+-   Design Tools, Tag Cloud Block: Prevent block support styles and additional CSS classes from being printed twice. ([44439](https://github.com/WordPress/gutenberg/pull/44439))
+-   Site Editor: Rename header and sidebar components in edit-site. ([44974](https://github.com/WordPress/gutenberg/pull/44974))
+-   Refactor dropzone for unmodified default blocks with `useBlockDropZone` and `InsertionPoint`. ([44647](https://github.com/WordPress/gutenberg/pull/44647))
+-   Data: Cleanup `useDispatch` tests. ([44856](https://github.com/WordPress/gutenberg/pull/44856))
 
 #### ESLint
-- ESLint: Fix rule violations. ([44927](https://github.com/WordPress/gutenberg/pull/44927), [44896](https://github.com/WordPress/gutenberg/pull/44896), [44895](https://github.com/WordPress/gutenberg/pull/44895), [44926](https://github.com/WordPress/gutenberg/pull/44926), [44939](https://github.com/WordPress/gutenberg/pull/44939), [44930](https://github.com/WordPress/gutenberg/pull/44930), [44902](https://github.com/WordPress/gutenberg/pull/44902), [44928](https://github.com/WordPress/gutenberg/pull/44928), [44925](https://github.com/WordPress/gutenberg/pull/44925), [45061](https://github.com/WordPress/gutenberg/pull/45061), [45067](https://github.com/WordPress/gutenberg/pull/45067), [45097](https://github.com/WordPress/gutenberg/pull/45097), [45064](https://github.com/WordPress/gutenberg/pull/45064), [45068](https://github.com/WordPress/gutenberg/pull/45068), [45062](https://github.com/WordPress/gutenberg/pull/45062), [45096](https://github.com/WordPress/gutenberg/pull/45096), [45106](https://github.com/WordPress/gutenberg/pull/45106), [45018](https://github.com/WordPress/gutenberg/pull/45018))
-- ESLint: Fix a few jsdoc/check-line-alignment warnings. ([44984](https://github.com/WordPress/gutenberg/pull/44984))
-- ESLint: Fix empty `toHaveTextContent`. ([45007](https://github.com/WordPress/gutenberg/pull/45007))
+
+-   ESLint: Fix rule violations. ([44927](https://github.com/WordPress/gutenberg/pull/44927), [44896](https://github.com/WordPress/gutenberg/pull/44896), [44895](https://github.com/WordPress/gutenberg/pull/44895), [44926](https://github.com/WordPress/gutenberg/pull/44926), [44939](https://github.com/WordPress/gutenberg/pull/44939), [44930](https://github.com/WordPress/gutenberg/pull/44930), [44902](https://github.com/WordPress/gutenberg/pull/44902), [44928](https://github.com/WordPress/gutenberg/pull/44928), [44925](https://github.com/WordPress/gutenberg/pull/44925), [45061](https://github.com/WordPress/gutenberg/pull/45061), [45067](https://github.com/WordPress/gutenberg/pull/45067), [45097](https://github.com/WordPress/gutenberg/pull/45097), [45064](https://github.com/WordPress/gutenberg/pull/45064), [45068](https://github.com/WordPress/gutenberg/pull/45068), [45062](https://github.com/WordPress/gutenberg/pull/45062), [45096](https://github.com/WordPress/gutenberg/pull/45096), [45106](https://github.com/WordPress/gutenberg/pull/45106), [45018](https://github.com/WordPress/gutenberg/pull/45018))
+-   ESLint: Fix a few jsdoc/check-line-alignment warnings. ([44984](https://github.com/WordPress/gutenberg/pull/44984))
+-   ESLint: Fix empty `toHaveTextContent`. ([45007](https://github.com/WordPress/gutenberg/pull/45007))
 
 #### Refactor tests to RTL
-- Data Layer ([44802](https://github.com/WordPress/gutenberg/pull/44802), [44855](https://github.com/WordPress/gutenberg/pull/44855), [45058](https://github.com/WordPress/gutenberg/pull/45058))
-- Block Editor ([44869](https://github.com/WordPress/gutenberg/pull/44869), [44870](https://github.com/WordPress/gutenberg/pull/44870), [44871](https://github.com/WordPress/gutenberg/pull/44871), [45071](https://github.com/WordPress/gutenberg/pull/45071))
-- Components ([45072](https://github.com/WordPress/gutenberg/pull/45072), [45012](https://github.com/WordPress/gutenberg/pull/45012), [44801](https://github.com/WordPress/gutenberg/pull/44801), [44826](https://github.com/WordPress/gutenberg/pull/44826), [44824](https://github.com/WordPress/gutenberg/pull/44824), [44821](https://github.com/WordPress/gutenberg/pull/44821), [44820](https://github.com/WordPress/gutenberg/pull/44820))
-- Post Editor([45011](https://github.com/WordPress/gutenberg/pull/45011), [44835](https://github.com/WordPress/gutenberg/pull/44835), [45066](https://github.com/WordPress/gutenberg/pull/45066), [44923](https://github.com/WordPress/gutenberg/pull/44923), [44872](https://github.com/WordPress/gutenberg/pull/44872))
-- Compose ([44818](https://github.com/WordPress/gutenberg/pull/44818), [44819](https://github.com/WordPress/gutenberg/pull/44819), [44912](https://github.com/WordPress/gutenberg/pull/44912), [45108](https://github.com/WordPress/gutenberg/pull/45108))
-- Viewport ([44766](https://github.com/WordPress/gutenberg/pull/44766), [44769](https://github.com/WordPress/gutenberg/pull/44769))
-- Element ([44804](https://github.com/WordPress/gutenberg/pull/44804))
-- Interface ([44803](https://github.com/WordPress/gutenberg/pull/44803))
 
+-   Data Layer ([44802](https://github.com/WordPress/gutenberg/pull/44802), [44855](https://github.com/WordPress/gutenberg/pull/44855), [45058](https://github.com/WordPress/gutenberg/pull/45058))
+-   Block Editor ([44869](https://github.com/WordPress/gutenberg/pull/44869), [44870](https://github.com/WordPress/gutenberg/pull/44870), [44871](https://github.com/WordPress/gutenberg/pull/44871), [45071](https://github.com/WordPress/gutenberg/pull/45071))
+-   Components ([45072](https://github.com/WordPress/gutenberg/pull/45072), [45012](https://github.com/WordPress/gutenberg/pull/45012), [44801](https://github.com/WordPress/gutenberg/pull/44801), [44826](https://github.com/WordPress/gutenberg/pull/44826), [44824](https://github.com/WordPress/gutenberg/pull/44824), [44821](https://github.com/WordPress/gutenberg/pull/44821), [44820](https://github.com/WordPress/gutenberg/pull/44820))
+-   Post Editor([45011](https://github.com/WordPress/gutenberg/pull/45011), [44835](https://github.com/WordPress/gutenberg/pull/44835), [45066](https://github.com/WordPress/gutenberg/pull/45066), [44923](https://github.com/WordPress/gutenberg/pull/44923), [44872](https://github.com/WordPress/gutenberg/pull/44872))
+-   Compose ([44818](https://github.com/WordPress/gutenberg/pull/44818), [44819](https://github.com/WordPress/gutenberg/pull/44819), [44912](https://github.com/WordPress/gutenberg/pull/44912), [45108](https://github.com/WordPress/gutenberg/pull/45108))
+-   Viewport ([44766](https://github.com/WordPress/gutenberg/pull/44766), [44769](https://github.com/WordPress/gutenberg/pull/44769))
+-   Element ([44804](https://github.com/WordPress/gutenberg/pull/44804))
+-   Interface ([44803](https://github.com/WordPress/gutenberg/pull/44803))
 
 #### Components
-- Navigator: Refactor Storybook code to TypeScript and controls. ([44979](https://github.com/WordPress/gutenberg/pull/44979))
-- Navigator: Refactor tests to TypeScript and user-event. ([44970](https://github.com/WordPress/gutenberg/pull/44970))
-- Refactor `ToolsPanel` to pass `exhaustive-deps`. ([45028](https://github.com/WordPress/gutenberg/pull/45028))
-- Refactor `Tooltip` tests to always render inline. ([45105](https://github.com/WordPress/gutenberg/pull/45105))
-- Refactor to use `@testing-library/react`. ([44698](https://github.com/WordPress/gutenberg/pull/44698), [44695](https://github.com/WordPress/gutenberg/pull/44695), [44697](https://github.com/WordPress/gutenberg/pull/44697))
-- Refactor `Tooltip` to ignore `exhaustive-deps`. ([45043](https://github.com/WordPress/gutenberg/pull/45043))
-- Modal: Convert component to TypeScript. ([42949](https://github.com/WordPress/gutenberg/pull/42949))
-- Sandbox: Use toString to create observe and resize script string. ([42872](https://github.com/WordPress/gutenberg/pull/42872))
-
 
+-   Navigator: Refactor Storybook code to TypeScript and controls. ([44979](https://github.com/WordPress/gutenberg/pull/44979))
+-   Navigator: Refactor tests to TypeScript and user-event. ([44970](https://github.com/WordPress/gutenberg/pull/44970))
+-   Refactor `ToolsPanel` to pass `exhaustive-deps`. ([45028](https://github.com/WordPress/gutenberg/pull/45028))
+-   Refactor `Tooltip` tests to always render inline. ([45105](https://github.com/WordPress/gutenberg/pull/45105))
+-   Refactor to use `@testing-library/react`. ([44698](https://github.com/WordPress/gutenberg/pull/44698), [44695](https://github.com/WordPress/gutenberg/pull/44695), [44697](https://github.com/WordPress/gutenberg/pull/44697))
+-   Refactor `Tooltip` to ignore `exhaustive-deps`. ([45043](https://github.com/WordPress/gutenberg/pull/45043))
+-   Modal: Convert component to TypeScript. ([42949](https://github.com/WordPress/gutenberg/pull/42949))
+-   Sandbox: Use toString to create observe and resize script string. ([42872](https://github.com/WordPress/gutenberg/pull/42872))
 
 ### Tools
 
-- Combine stale issue gardening workflows into one. ([44754](https://github.com/WordPress/gutenberg/pull/44754))
-- Ensure stale github actions workflow only runs for particular issue labels. ([44910](https://github.com/WordPress/gutenberg/pull/44910))
-- Configure Dependabot pull requests for GitHub Actions. ([44677](https://github.com/WordPress/gutenberg/pull/44677))
-- Storybook: Add theme switcher tool. ([44715](https://github.com/WordPress/gutenberg/pull/44715))
-- Bug Fix, wp-env: Use case insensitive regex when checking WP version string. ([44887](https://github.com/WordPress/gutenberg/pull/44887))
-- Cherry Pick Script: Restore retrieval of merge_commit_sha. ([44890](https://github.com/WordPress/gutenberg/pull/44890))
+-   Combine stale issue gardening workflows into one. ([44754](https://github.com/WordPress/gutenberg/pull/44754))
+-   Ensure stale github actions workflow only runs for particular issue labels. ([44910](https://github.com/WordPress/gutenberg/pull/44910))
+-   Configure Dependabot pull requests for GitHub Actions. ([44677](https://github.com/WordPress/gutenberg/pull/44677))
+-   Storybook: Add theme switcher tool. ([44715](https://github.com/WordPress/gutenberg/pull/44715))
+-   Bug Fix, wp-env: Use case insensitive regex when checking WP version string. ([44887](https://github.com/WordPress/gutenberg/pull/44887))
+-   Cherry Pick Script: Restore retrieval of merge_commit_sha. ([44890](https://github.com/WordPress/gutenberg/pull/44890))
 
 #### Schemas
 
-- Fix: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
-- Fix: typo in block.json schema. ([44798](https://github.com/WordPress/gutenberg/pull/44798))
-- Fix: theme json schema validation. ([44799](https://github.com/WordPress/gutenberg/pull/44799))
-- Add title property to theme.json schema. ([44797](https://github.com/WordPress/gutenberg/pull/44797))
+-   Fix: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
+-   Fix: typo in block.json schema. ([44798](https://github.com/WordPress/gutenberg/pull/44798))
+-   Fix: theme json schema validation. ([44799](https://github.com/WordPress/gutenberg/pull/44799))
+-   Add title property to theme.json schema. ([44797](https://github.com/WordPress/gutenberg/pull/44797))
 
 #### Build Tooling
-- Add `.eslintcache` to `.gitignore`. ([44938](https://github.com/WordPress/gutenberg/pull/44938))
-- ESLint: Add and enable `eslint-plugin-jest-dom`. ([44983](https://github.com/WordPress/gutenberg/pull/44983))
-- Style Engine: Move PHP unit tests to Gutenberg. ([44722](https://github.com/WordPress/gutenberg/pull/44722))
 
-#### Testing
-- Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
-- Migrate `nonce.test.js` to Playwright. ([44929](https://github.com/WordPress/gutenberg/pull/44929))
-- end-to-end Tests: Make attributes and innerblocks optional in insertBlock. ([44933](https://github.com/WordPress/gutenberg/pull/44933))
-- Bug Fix, end-to-end tests: Update button selector. ([45087](https://github.com/WordPress/gutenberg/pull/45087))
-- Mobile
-    - Code block - Migrate from React Test Render to React Native Testing Library. ([44833](https://github.com/WordPress/gutenberg/pull/44833))
-    - Tooltip - Migrate from React Test Render to React Native Testing Library. ([44831](https://github.com/WordPress/gutenberg/pull/44831))
-    - Update editor initial HTML test for iOS and update Appium. ([44732](https://github.com/WordPress/gutenberg/pull/44732))
-    - useResizeObserver - Migrate from React Test Render to React Native Testing Library. ([44832](https://github.com/WordPress/gutenberg/pull/44832))
+-   Add `.eslintcache` to `.gitignore`. ([44938](https://github.com/WordPress/gutenberg/pull/44938))
+-   ESLint: Add and enable `eslint-plugin-jest-dom`. ([44983](https://github.com/WordPress/gutenberg/pull/44983))
+-   Style Engine: Move PHP unit tests to Gutenberg. ([44722](https://github.com/WordPress/gutenberg/pull/44722))
 
+#### Testing
 
-## First time contributors
+-   Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
+-   Migrate `nonce.test.js` to Playwright. ([44929](https://github.com/WordPress/gutenberg/pull/44929))
+-   end-to-end Tests: Make attributes and innerblocks optional in insertBlock. ([44933](https://github.com/WordPress/gutenberg/pull/44933))
+-   Bug Fix, end-to-end tests: Update button selector. ([45087](https://github.com/WordPress/gutenberg/pull/45087))
+-   Mobile
+    -   Code block - Migrate from React Test Render to React Native Testing Library. ([44833](https://github.com/WordPress/gutenberg/pull/44833))
+    -   Tooltip - Migrate from React Test Render to React Native Testing Library. ([44831](https://github.com/WordPress/gutenberg/pull/44831))
+    -   Update editor initial HTML test for iOS and update Appium. ([44732](https://github.com/WordPress/gutenberg/pull/44732))
+    -   useResizeObserver - Migrate from React Test Render to React Native Testing Library. ([44832](https://github.com/WordPress/gutenberg/pull/44832))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @benridane: Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
-- @jeremylind: FIX: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
-- @PooSham: Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
-- @thelovekesh: package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
+The following PRs were merged by first-time contributors:
 
+-   @benridane: Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
+-   @jeremylind: FIX: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
+-   @PooSham: Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
+-   @thelovekesh: package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
 
 ## Contributors
 
@@ -749,24 +24704,19 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @afercia @ajlende @alanjacobmathew @amustaque97 @andrewserong @annezazu @BE-Webdesign @benridane @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @costdev @danielbachhuber @dcalhoun @desrosj @dinhtungdu @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jasmussen @jeremylind @jorgefilipecosta @joshuatf @jrfnl @jsnajdr @kevin940726 @Mamaduka @mikachan @mirka @mtias @noisysocks @ntsekouras @oandregal @ockham @pento @PooSham @ramonjd @ryanwelcher @sabernhardt @SantosGuillamot @scruffian @Soean @t-hamano @talldan @tellthemachines @thelovekesh @tyxla @walbo @youknowriad
 
-
 = 14.3.1 =
 
-
-
 ## Changelog
 
 ### Code Quality
 
 #### Block Library
-- Add: Missing output escaping on some blocks. ([45045](https://github.com/WordPress/gutenberg/pull/45045))
 
+-   Add: Missing output escaping on some blocks. ([45045](https://github.com/WordPress/gutenberg/pull/45045))
 
-## First time contributors
-
-The following PRs were merged by first time contributors:
-
+## First-time contributors
 
+The following PRs were merged by first-time contributors:
 
 ## Contributors
 
@@ -774,257 +24724,276 @@ The following contributors merged PRs in this release:
 
 @jorgefilipecosta
 
-
 = 14.3.0 =
 
-
 ## Changelog
 
 ### Enhancements
 
 #### Post Editor
-- Optimize legacy post content layout. ([44506](https://github.com/WordPress/gutenberg/pull/44506))
-- Remove right border when sidebars are closed. ([44613](https://github.com/WordPress/gutenberg/pull/44613))
+
+-   Optimize legacy post content layout. ([44506](https://github.com/WordPress/gutenberg/pull/44506))
+-   Remove right border when sidebars are closed. ([44613](https://github.com/WordPress/gutenberg/pull/44613))
 
 #### Block Library
-- Comment Pagination Numbers: Add background color. ([43902](https://github.com/WordPress/gutenberg/pull/43902))
-- Navigation Submenu: Use `get_queried_object_id` when setting `current-menu-item` classes. ([44474](https://github.com/WordPress/gutenberg/pull/44474))
-- Post Author: Include option to link author archive. ([42670](https://github.com/WordPress/gutenberg/pull/42670))
-- Post Terms: Add spacing support. ([43646](https://github.com/WordPress/gutenberg/pull/43646))
-- Query Loop: Hide instructions for FormTokenField. ([44641](https://github.com/WordPress/gutenberg/pull/44641))
-- Tag Cloud: Remove `strtolower` around taxonomy name. ([16112](https://github.com/WordPress/gutenberg/pull/16112))
-- Video: Update placeholder style. ([44215](https://github.com/WordPress/gutenberg/pull/44215))
- 
+
+-   Comment Pagination Numbers: Add background color. ([43902](https://github.com/WordPress/gutenberg/pull/43902))
+-   Navigation Submenu: Use `get_queried_object_id` when setting `current-menu-item` classes. ([44474](https://github.com/WordPress/gutenberg/pull/44474))
+-   Post Author: Include option to link author archive. ([42670](https://github.com/WordPress/gutenberg/pull/42670))
+-   Post Terms: Add spacing support. ([43646](https://github.com/WordPress/gutenberg/pull/43646))
+-   Query Loop: Hide instructions for FormTokenField. ([44641](https://github.com/WordPress/gutenberg/pull/44641))
+-   Tag Cloud: Remove `strtolower` around taxonomy name. ([16112](https://github.com/WordPress/gutenberg/pull/16112))
+-   Video: Update placeholder style. ([44215](https://github.com/WordPress/gutenberg/pull/44215))
+
 #### Components
-- FontSizePicker: Make control take up full width. ([44559](https://github.com/WordPress/gutenberg/pull/44559))
-- Placeholder: Remove unnecessary background color. ([44497](https://github.com/WordPress/gutenberg/pull/44497))
-- Placeholder: Update placeholder style. ([44190](https://github.com/WordPress/gutenberg/pull/44190))
-- ToggleGroupControl: Fix unselected icon color. ([44575](https://github.com/WordPress/gutenberg/pull/44575))
-- ToolsPanel: Add subheadings and reset text to tools panel menu. ([44260](https://github.com/WordPress/gutenberg/pull/44260))
+
+-   FontSizePicker: Make control take up full width. ([44559](https://github.com/WordPress/gutenberg/pull/44559))
+-   Placeholder: Remove unnecessary background color. ([44497](https://github.com/WordPress/gutenberg/pull/44497))
+-   Placeholder: Update placeholder style. ([44190](https://github.com/WordPress/gutenberg/pull/44190))
+-   ToggleGroupControl: Fix unselected icon color. ([44575](https://github.com/WordPress/gutenberg/pull/44575))
+-   ToolsPanel: Add subheadings and reset text to tools panel menu. ([44260](https://github.com/WordPress/gutenberg/pull/44260))
 
 #### Block API
-- Blocks: Deprecate non-string descriptions. ([44455](https://github.com/WordPress/gutenberg/pull/44455))
-- Tag Processor: Document and test XSS prevention in set_attribute. ([44447](https://github.com/WordPress/gutenberg/pull/44447))
-- Tag Processor: Throw error when supplied with unacceptable attribute names. ([44431](https://github.com/WordPress/gutenberg/pull/44431))
-- Tag Processor: Use (start,length) values for tracking tag name. ([44479](https://github.com/WordPress/gutenberg/pull/44479))
-- Tag processor: Update 'since' version tags to 6.2.0. ([44432](https://github.com/WordPress/gutenberg/pull/44432))
+
+-   Blocks: Deprecate non-string descriptions. ([44455](https://github.com/WordPress/gutenberg/pull/44455))
+-   Tag Processor: Document and test XSS prevention in set_attribute. ([44447](https://github.com/WordPress/gutenberg/pull/44447))
+-   Tag Processor: Throw error when supplied with unacceptable attribute names. ([44431](https://github.com/WordPress/gutenberg/pull/44431))
+-   Tag Processor: Use (start,length) values for tracking tag name. ([44479](https://github.com/WordPress/gutenberg/pull/44479))
+-   Tag processor: Update 'since' version tags to 6.2.0. ([44432](https://github.com/WordPress/gutenberg/pull/44432))
 
 #### Global Styles
-- Hide the done button of the Global Style palette editor when there aren't colors to edit. ([44372](https://github.com/WordPress/gutenberg/pull/44372))
-- Use ToolsPanel in Global Styles → Typography. ([44180](https://github.com/WordPress/gutenberg/pull/44180))
+
+-   Hide the done button of the Global Style palette editor when there aren't colors to edit. ([44372](https://github.com/WordPress/gutenberg/pull/44372))
+-   Use ToolsPanel in Global Styles → Typography. ([44180](https://github.com/WordPress/gutenberg/pull/44180))
 
 #### Block Editor
-- Allow dropping an image on an empty paragraph block to create an image block. ([42722](https://github.com/WordPress/gutenberg/pull/42722))
-- Writing flow: Implement Alt+Arrow. ([44081](https://github.com/WordPress/gutenberg/pull/44081))
+
+-   Allow dropping an image on an empty paragraph block to create an image block. ([42722](https://github.com/WordPress/gutenberg/pull/42722))
+-   Writing flow: Implement Alt+Arrow. ([44081](https://github.com/WordPress/gutenberg/pull/44081))
 
 #### Site Editor
-- Allow drag and drop for blocks and patterns in zoom-out mode. ([44402](https://github.com/WordPress/gutenberg/pull/44402))
+
+-   Allow drag and drop for blocks and patterns in zoom-out mode. ([44402](https://github.com/WordPress/gutenberg/pull/44402))
 
 #### Block Directory
-- Use 'tertiary' in missing block warning. ([44368](https://github.com/WordPress/gutenberg/pull/44368))
 
+-   Use 'tertiary' in missing block warning. ([44368](https://github.com/WordPress/gutenberg/pull/44368))
 
 ### New APIs
 
 #### Block Library
-- WP_HTML_Tag_Processor: Inject dynamic data to block HTML markup in PHP. ([42485](https://github.com/WordPress/gutenberg/pull/42485))
-
-
-### Bug Fixes
-
-- Add a correct TS signature for useEntityRecords. ([44448](https://github.com/WordPress/gutenberg/pull/44448))
-- BlockDraggable: Change prop name passed to children when dragging is disabled. ([44371](https://github.com/WordPress/gutenberg/pull/44371))
-- Fix Lint warning/errors in cherry-pick script. ([44662](https://github.com/WordPress/gutenberg/pull/44662))
-- Fix: Content blocks with nested blocks always appear as top level. ([44098](https://github.com/WordPress/gutenberg/pull/44098))
-- Hide the Classic block in the Site Editor. ([44554](https://github.com/WordPress/gutenberg/pull/44554))
-- PHP 8.2: Remove deprecated callable in Style Engine value functions. ([44561](https://github.com/WordPress/gutenberg/pull/44561))
-- Persisted preferences: Fix context property of user meta configuration. ([44489](https://github.com/WordPress/gutenberg/pull/44489))
-- Resizable editor: Fix height setting bug. ([44637](https://github.com/WordPress/gutenberg/pull/44637))
-- Style engine: Kebab case preset slugs in the editor. ([44406](https://github.com/WordPress/gutenberg/pull/44406))
-- Add submenu block href only if URL is not empty. ([44337](https://github.com/WordPress/gutenberg/pull/44337))
-- Update Theme JSON `$schema` to allow pseudo selectors on `button` property. ([44303](https://github.com/WordPress/gutenberg/pull/44303))
-- Preserve the generic signature of getEntityRecord and getEntityRecords through currying. ([44453](https://github.com/WordPress/gutenberg/pull/44453))
-- Template editor: Fix crashes due to undefined vars. ([44482](https://github.com/WordPress/gutenberg/pull/44482))
-- Add missing value to CSS font-display descriptor in theme.json. ([44622](https://github.com/WordPress/gutenberg/pull/44622))
-- Rich text: Avoid updating partial selection unnecessarily. ([44330](https://github.com/WordPress/gutenberg/pull/44330))
-- useMergeRefs: Don't call/mutate refs passed if unused. ([44629](https://github.com/WordPress/gutenberg/pull/44629))
-
-#### Block Library
-- Code Block: Add box-sizing to fix inconsistent layout. ([44580](https://github.com/WordPress/gutenberg/pull/44580))
-- Comment Author: Fix empty links created for the author's name. ([44650](https://github.com/WordPress/gutenberg/pull/44650))
-- Comments: Support nested comments settings in the comments blocks. ([44351](https://github.com/WordPress/gutenberg/pull/44351))
-- Group: Legacy Group inner block wrapper should work with a constrained layout. ([44660](https://github.com/WordPress/gutenberg/pull/44660))
-- Image: Fix rotated image crop area aspect ratio. ([44425](https://github.com/WordPress/gutenberg/pull/44425))
-- Image: Upgrade react-easy-crop to bring in fix for site editor iframe. ([44408](https://github.com/WordPress/gutenberg/pull/44408))
-- Navigation: Fix console error. ([44594](https://github.com/WordPress/gutenberg/pull/44594))
-- Navigation: Fix semitransparent burger icon. ([44525](https://github.com/WordPress/gutenberg/pull/44525))
-- Navigation: Try fixing link color in some TT2 contexts. ([44578](https://github.com/WordPress/gutenberg/pull/44578))
-- Paragraph: Disable drop cap control if text is aligned. ([42326](https://github.com/WordPress/gutenberg/pull/42326))
-- Post Featured Image: Fix borders after addition of overlay feature. ([44286](https://github.com/WordPress/gutenberg/pull/44286))
-- Post Featured Image: Fix application of default border style in editor. ([44520](https://github.com/WordPress/gutenberg/pull/44520))
-- Query Loop: Fix condition for displaying 'parents' control. ([44630](https://github.com/WordPress/gutenberg/pull/44630))
-- Query Loop: Rename Query Loop variations `allowControls` to `allowedControls`. ([44523](https://github.com/WordPress/gutenberg/pull/44523))
-- Quote block: Stop slash inserter popup showing in the citation. ([44634](https://github.com/WordPress/gutenberg/pull/44634))
-- Site Title: Fix link color not being applied in editor #37071. ([44333](https://github.com/WordPress/gutenberg/pull/44333))
-- Template part: Prevent adding block in post editor or inside post template or content blocks. ([44480](https://github.com/WordPress/gutenberg/pull/44480))
-- Video: Don't display placeholder SVG when Video block selected. ([44564](https://github.com/WordPress/gutenberg/pull/44564))
-
-
-#### Global Styles
-- Fix empty color indicator with a custom style. ([44364](https://github.com/WordPress/gutenberg/pull/44364))
-- Re-add styles that were removed for classic themes. ([44334](https://github.com/WordPress/gutenberg/pull/44334))
-- Remove border from Global Styles previews. ([44556](https://github.com/WordPress/gutenberg/pull/44556))
-- Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides. ([44141](https://github.com/WordPress/gutenberg/pull/44141))
-- Style cards: Fix focus style. ([44612](https://github.com/WordPress/gutenberg/pull/44612))
-- Theme.json: Fix some shadow properties not working properly in the site editor. ([44569](https://github.com/WordPress/gutenberg/pull/44569))
-- Use color hex + index as key in the Palette component color indicator. ([44344](https://github.com/WordPress/gutenberg/pull/44344))
+
+-   WP_HTML_Tag_Processor: Inject dynamic data to block HTML markup in PHP. ([42485](https://github.com/WordPress/gutenberg/pull/42485))
+
+### Bug Fixes
+
+-   Add a correct TS signature for useEntityRecords. ([44448](https://github.com/WordPress/gutenberg/pull/44448))
+-   BlockDraggable: Change prop name passed to children when dragging is disabled. ([44371](https://github.com/WordPress/gutenberg/pull/44371))
+-   Fix Lint warning/errors in cherry-pick script. ([44662](https://github.com/WordPress/gutenberg/pull/44662))
+-   Fix: Content blocks with nested blocks always appear as top level. ([44098](https://github.com/WordPress/gutenberg/pull/44098))
+-   Hide the Classic block in the Site Editor. ([44554](https://github.com/WordPress/gutenberg/pull/44554))
+-   PHP 8.2: Remove deprecated callable in Style Engine value functions. ([44561](https://github.com/WordPress/gutenberg/pull/44561))
+-   Persisted preferences: Fix context property of user meta configuration. ([44489](https://github.com/WordPress/gutenberg/pull/44489))
+-   Resizable editor: Fix height setting bug. ([44637](https://github.com/WordPress/gutenberg/pull/44637))
+-   Style engine: Kebab case preset slugs in the editor. ([44406](https://github.com/WordPress/gutenberg/pull/44406))
+-   Add submenu block href only if URL is not empty. ([44337](https://github.com/WordPress/gutenberg/pull/44337))
+-   Update Theme JSON `$schema` to allow pseudo selectors on `button` property. ([44303](https://github.com/WordPress/gutenberg/pull/44303))
+-   Preserve the generic signature of getEntityRecord and getEntityRecords through currying. ([44453](https://github.com/WordPress/gutenberg/pull/44453))
+-   Template editor: Fix crashes due to undefined vars. ([44482](https://github.com/WordPress/gutenberg/pull/44482))
+-   Add missing value to CSS font-display descriptor in theme.json. ([44622](https://github.com/WordPress/gutenberg/pull/44622))
+-   Rich text: Avoid updating partial selection unnecessarily. ([44330](https://github.com/WordPress/gutenberg/pull/44330))
+-   useMergeRefs: Don't call/mutate refs passed if unused. ([44629](https://github.com/WordPress/gutenberg/pull/44629))
+
+#### Block Library
+
+-   Code Block: Add box-sizing to fix inconsistent layout. ([44580](https://github.com/WordPress/gutenberg/pull/44580))
+-   Comment Author: Fix empty links created for the author's name. ([44650](https://github.com/WordPress/gutenberg/pull/44650))
+-   Comments: Support nested comments settings in the comments blocks. ([44351](https://github.com/WordPress/gutenberg/pull/44351))
+-   Group: Legacy Group inner block wrapper should work with a constrained layout. ([44660](https://github.com/WordPress/gutenberg/pull/44660))
+-   Image: Fix rotated image crop area aspect ratio. ([44425](https://github.com/WordPress/gutenberg/pull/44425))
+-   Image: Upgrade react-easy-crop to bring in fix for site editor iframe. ([44408](https://github.com/WordPress/gutenberg/pull/44408))
+-   Navigation: Fix console error. ([44594](https://github.com/WordPress/gutenberg/pull/44594))
+-   Navigation: Fix semitransparent burger icon. ([44525](https://github.com/WordPress/gutenberg/pull/44525))
+-   Navigation: Try fixing link color in some TT2 contexts. ([44578](https://github.com/WordPress/gutenberg/pull/44578))
+-   Paragraph: Disable drop cap control if text is aligned. ([42326](https://github.com/WordPress/gutenberg/pull/42326))
+-   Post Featured Image: Fix borders after addition of overlay feature. ([44286](https://github.com/WordPress/gutenberg/pull/44286))
+-   Post Featured Image: Fix application of default border style in editor. ([44520](https://github.com/WordPress/gutenberg/pull/44520))
+-   Query Loop: Fix condition for displaying 'parents' control. ([44630](https://github.com/WordPress/gutenberg/pull/44630))
+-   Query Loop: Rename Query Loop variations `allowControls` to `allowedControls`. ([44523](https://github.com/WordPress/gutenberg/pull/44523))
+-   Quote block: Stop slash inserter popup showing in the citation. ([44634](https://github.com/WordPress/gutenberg/pull/44634))
+-   Site Title: Fix link color not being applied in editor #37071. ([44333](https://github.com/WordPress/gutenberg/pull/44333))
+-   Template part: Prevent adding block in post editor or inside post template or content blocks. ([44480](https://github.com/WordPress/gutenberg/pull/44480))
+-   Video: Don't display placeholder SVG when Video block selected. ([44564](https://github.com/WordPress/gutenberg/pull/44564))
+
+#### Global Styles
+
+-   Fix empty color indicator with a custom style. ([44364](https://github.com/WordPress/gutenberg/pull/44364))
+-   Re-add styles that were removed for classic themes. ([44334](https://github.com/WordPress/gutenberg/pull/44334))
+-   Remove border from Global Styles previews. ([44556](https://github.com/WordPress/gutenberg/pull/44556))
+-   Spacing presets: Modify the styling of the input controls when in unlinked mode in order to better differentiate sides. ([44141](https://github.com/WordPress/gutenberg/pull/44141))
+-   Style cards: Fix focus style. ([44612](https://github.com/WordPress/gutenberg/pull/44612))
+-   Theme.json: Fix some shadow properties not working properly in the site editor. ([44569](https://github.com/WordPress/gutenberg/pull/44569))
+-   Use color hex + index as key in the Palette component color indicator. ([44344](https://github.com/WordPress/gutenberg/pull/44344))
 
 #### Design Tools
-- Fix padding/margin visualizer accuracy. ([44485](https://github.com/WordPress/gutenberg/pull/44485))
-- Fix padding/margin visualizer placement. ([44484](https://github.com/WordPress/gutenberg/pull/44484))
-- Fix spacing property generation in flow layout type. ([44446](https://github.com/WordPress/gutenberg/pull/44446))
+
+-   Fix padding/margin visualizer accuracy. ([44485](https://github.com/WordPress/gutenberg/pull/44485))
+-   Fix padding/margin visualizer placement. ([44484](https://github.com/WordPress/gutenberg/pull/44484))
+-   Fix spacing property generation in flow layout type. ([44446](https://github.com/WordPress/gutenberg/pull/44446))
 
 #### Components
-- BorderBoxControl: Ensure the most common unit selection is maintained. ([44565](https://github.com/WordPress/gutenberg/pull/44565))
-- Popover: Fix limitShift logic by adding iframe offset correctly (and a custom shift limiter). ([42950](https://github.com/WordPress/gutenberg/pull/42950))
-- Popover: Refine position-to-placement conversion logic, add tests. ([44377](https://github.com/WordPress/gutenberg/pull/44377))
-- Navigator Screen: Fix bug where focus moved erroneously. ([44239](https://github.com/WordPress/gutenberg/pull/44239))
+
+-   BorderBoxControl: Ensure the most common unit selection is maintained. ([44565](https://github.com/WordPress/gutenberg/pull/44565))
+-   Popover: Fix limitShift logic by adding iframe offset correctly (and a custom shift limiter). ([42950](https://github.com/WordPress/gutenberg/pull/42950))
+-   Popover: Refine position-to-placement conversion logic, add tests. ([44377](https://github.com/WordPress/gutenberg/pull/44377))
+-   Navigator Screen: Fix bug where focus moved erroneously. ([44239](https://github.com/WordPress/gutenberg/pull/44239))
 
 #### Block Editor
-- Fix block search for non-Latin characters. ([44652](https://github.com/WordPress/gutenberg/pull/44652))
-- Prevent empty block toolbars from showing empty slots. ([44704](https://github.com/WordPress/gutenberg/pull/44704))
+
+-   Fix block search for non-Latin characters. ([44652](https://github.com/WordPress/gutenberg/pull/44652))
+-   Prevent empty block toolbars from showing empty slots. ([44704](https://github.com/WordPress/gutenberg/pull/44704))
 
 #### Widgets Editor
-- Add extra guarding against legacy widget preview errors. ([44635](https://github.com/WordPress/gutenberg/pull/44635))
+
+-   Add extra guarding against legacy widget preview errors. ([44635](https://github.com/WordPress/gutenberg/pull/44635))
 
 #### Themes
-- Theme export: Fix broken spacingScale export. ([44555](https://github.com/WordPress/gutenberg/pull/44555))
-- Theme export: Stop slugs being cast to integers when a theme is exported. ([44589](https://github.com/WordPress/gutenberg/pull/44589))
+
+-   Theme export: Fix broken spacingScale export. ([44555](https://github.com/WordPress/gutenberg/pull/44555))
+-   Theme export: Stop slugs being cast to integers when a theme is exported. ([44589](https://github.com/WordPress/gutenberg/pull/44589))
 
 #### Accessibility
-- TokenInput field: Try alternative approach to fix screen reader focus issue. ([44526](https://github.com/WordPress/gutenberg/pull/44526))
+
+-   TokenInput field: Try alternative approach to fix screen reader focus issue. ([44526](https://github.com/WordPress/gutenberg/pull/44526))
 
 #### Patterns
-- Fix patterns drag and drop in Safari. ([44366](https://github.com/WordPress/gutenberg/pull/44366))
+
+-   Fix patterns drag and drop in Safari. ([44366](https://github.com/WordPress/gutenberg/pull/44366))
 
 #### Post Editor
-- Add layout styles from Post Content block to post editor. ([44258](https://github.com/WordPress/gutenberg/pull/44258))
 
+-   Add layout styles from Post Content block to post editor. ([44258](https://github.com/WordPress/gutenberg/pull/44258))
 
 ### Performance
 
-- Compose: Introduce an in-house `throttle()` utility, deprecate Lodash version. ([44225](https://github.com/WordPress/gutenberg/pull/44225))
-- Improve Slot/Fill performance. ([44642](https://github.com/WordPress/gutenberg/pull/44642))
-
+-   Compose: Introduce an in-house `throttle()` utility, deprecate Lodash version. ([44225](https://github.com/WordPress/gutenberg/pull/44225))
+-   Improve Slot/Fill performance. ([44642](https://github.com/WordPress/gutenberg/pull/44642))
 
 ### Documentation
 
-- Add documentation for extending the Query Loop block via variations. ([44137](https://github.com/WordPress/gutenberg/pull/44137))
-- Add more details about possible values for block assets in `block.json`. ([44199](https://github.com/WordPress/gutenberg/pull/44199))
-- Add missing import statement for useBlockProps. ([44607](https://github.com/WordPress/gutenberg/pull/44607))
-- Instruct people to keep using `wp-scripts` even when extending webpack. ([44348](https://github.com/WordPress/gutenberg/pull/44348))
-- Style engine: Updating and fleshing out documentation. ([44405](https://github.com/WordPress/gutenberg/pull/44405))
-- Style engine: Update readme. ([44308](https://github.com/WordPress/gutenberg/pull/44308))
-- Add callout for experimental packages. ([44056](https://github.com/WordPress/gutenberg/pull/44056))
-- Expand class-level documentation for `WP_HTML_Tag_Processor`. ([44478](https://github.com/WordPress/gutenberg/pull/44478))
-- Experiments: Add README.md and CHANGELOG.md. ([44457](https://github.com/WordPress/gutenberg/pull/44457))
-- Remove the package name from the sub-menu item for clarity. ([44643](https://github.com/WordPress/gutenberg/pull/44643))
+-   Add documentation for extending the Query Loop block via variations. ([44137](https://github.com/WordPress/gutenberg/pull/44137))
+-   Add more details about possible values for block assets in `block.json`. ([44199](https://github.com/WordPress/gutenberg/pull/44199))
+-   Add missing import statement for useBlockProps. ([44607](https://github.com/WordPress/gutenberg/pull/44607))
+-   Instruct people to keep using `wp-scripts` even when extending webpack. ([44348](https://github.com/WordPress/gutenberg/pull/44348))
+-   Style engine: Updating and fleshing out documentation. ([44405](https://github.com/WordPress/gutenberg/pull/44405))
+-   Style engine: Update readme. ([44308](https://github.com/WordPress/gutenberg/pull/44308))
+-   Add callout for experimental packages. ([44056](https://github.com/WordPress/gutenberg/pull/44056))
+-   Expand class-level documentation for `WP_HTML_Tag_Processor`. ([44478](https://github.com/WordPress/gutenberg/pull/44478))
+-   Experiments: Add README.md and CHANGELOG.md. ([44457](https://github.com/WordPress/gutenberg/pull/44457))
+-   Remove the package name from the sub-menu item for clarity. ([44643](https://github.com/WordPress/gutenberg/pull/44643))
 
 ### Code Quality
 
-- Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. ([44658](https://github.com/WordPress/gutenberg/pull/44658))
-- Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. ([44323](https://github.com/WordPress/gutenberg/pull/44323))
-- CS/QA: Various minor fixes. ([44551](https://github.com/WordPress/gutenberg/pull/44551))
-- CS: Always use parentheses when instantiating objects. ([44550](https://github.com/WordPress/gutenberg/pull/44550))
-- CS: Remove redundant parentheses for include/require statements. ([44544](https://github.com/WordPress/gutenberg/pull/44544))
-- CS: Use pre-increment instead of post-increment. ([44549](https://github.com/WordPress/gutenberg/pull/44549))
-- Fix comment typo in document generation tools. ([44583](https://github.com/WordPress/gutenberg/pull/44583))
-- I18n: Use consistent string: 'Link rel'. ([20162](https://github.com/WordPress/gutenberg/pull/20162))
-- PHP 8.2 | Fix deprecated embedded variables in text strings. ([44538](https://github.com/WordPress/gutenberg/pull/44538))
-- PHP 8.2 | Fix for partially supported callback. ([44537](https://github.com/WordPress/gutenberg/pull/44537))
-- PHPCS: Use PHPCompatibilityWP. ([44542](https://github.com/WordPress/gutenberg/pull/44542))
-- QA: No control structures with empty body. ([44548](https://github.com/WordPress/gutenberg/pull/44548))
-- Script loader: Remove 6.1 wp actions. ([44519](https://github.com/WordPress/gutenberg/pull/44519))
-
-#### Components
-- Components refactor `Mobile` to ignore `exhaustive-deps`. ([44207](https://github.com/WordPress/gutenberg/pull/44207))
-- Convert FontSizePicker to TypeScript. ([44449](https://github.com/WordPress/gutenberg/pull/44449))
-- FontSizePicker: Replace SCSS with Emotion + components. ([44483](https://github.com/WordPress/gutenberg/pull/44483))
-- RangeControl: Remove unused UseDebouncedHoverInteractionArgs type. ([44411](https://github.com/WordPress/gutenberg/pull/44411))
-- Refactor `Notice` to pass `exhaustive-deps`. ([44157](https://github.com/WordPress/gutenberg/pull/44157))
-- Refactor `ResizableBox` to pass `exhaustive-deps`. ([44370](https://github.com/WordPress/gutenberg/pull/44370))
-- Refactor `Sandbox` to pass `exhaustive-deps`. ([44378](https://github.com/WordPress/gutenberg/pull/44378))
-- Refactor `SearchControl` native files to ignore `exhaustive-deps`. ([44381](https://github.com/WordPress/gutenberg/pull/44381))
-
-#### Block Library
-- Archive Block: Remove unnecessary spaces from class attributes. ([44440](https://github.com/WordPress/gutenberg/pull/44440))
-- Archive: No need to escape class variable. ([44468](https://github.com/WordPress/gutenberg/pull/44468))
-- Gallery: Remove unnecessary caption state. ([44383](https://github.com/WordPress/gutenberg/pull/44383))
-- Remove unnecessary `view.js` file from navigation-submenu block. ([44570](https://github.com/WordPress/gutenberg/pull/44570))
+-   Avoid calling get_blocks_metadata in WP_Theme_JSON constructor. ([44658](https://github.com/WordPress/gutenberg/pull/44658))
+-   Block Popover: Use placement instead of position; move to useBlockToolbarPopoverProps hook. ([44323](https://github.com/WordPress/gutenberg/pull/44323))
+-   CS/QA: Various minor fixes. ([44551](https://github.com/WordPress/gutenberg/pull/44551))
+-   CS: Always use parentheses when instantiating objects. ([44550](https://github.com/WordPress/gutenberg/pull/44550))
+-   CS: Remove redundant parentheses for include/require statements. ([44544](https://github.com/WordPress/gutenberg/pull/44544))
+-   CS: Use pre-increment instead of post-increment. ([44549](https://github.com/WordPress/gutenberg/pull/44549))
+-   Fix comment typo in document generation tools. ([44583](https://github.com/WordPress/gutenberg/pull/44583))
+-   I18n: Use consistent string: 'Link rel'. ([20162](https://github.com/WordPress/gutenberg/pull/20162))
+-   PHP 8.2 | Fix deprecated embedded variables in text strings. ([44538](https://github.com/WordPress/gutenberg/pull/44538))
+-   PHP 8.2 | Fix for partially supported callback. ([44537](https://github.com/WordPress/gutenberg/pull/44537))
+-   PHPCS: Use PHPCompatibilityWP. ([44542](https://github.com/WordPress/gutenberg/pull/44542))
+-   QA: No control structures with empty body. ([44548](https://github.com/WordPress/gutenberg/pull/44548))
+-   Script loader: Remove 6.1 wp actions. ([44519](https://github.com/WordPress/gutenberg/pull/44519))
+
+#### Components
+
+-   Components refactor `Mobile` to ignore `exhaustive-deps`. ([44207](https://github.com/WordPress/gutenberg/pull/44207))
+-   Convert FontSizePicker to TypeScript. ([44449](https://github.com/WordPress/gutenberg/pull/44449))
+-   FontSizePicker: Replace SCSS with Emotion + components. ([44483](https://github.com/WordPress/gutenberg/pull/44483))
+-   RangeControl: Remove unused UseDebouncedHoverInteractionArgs type. ([44411](https://github.com/WordPress/gutenberg/pull/44411))
+-   Refactor `Notice` to pass `exhaustive-deps`. ([44157](https://github.com/WordPress/gutenberg/pull/44157))
+-   Refactor `ResizableBox` to pass `exhaustive-deps`. ([44370](https://github.com/WordPress/gutenberg/pull/44370))
+-   Refactor `Sandbox` to pass `exhaustive-deps`. ([44378](https://github.com/WordPress/gutenberg/pull/44378))
+-   Refactor `SearchControl` native files to ignore `exhaustive-deps`. ([44381](https://github.com/WordPress/gutenberg/pull/44381))
+
+#### Block Library
+
+-   Archive Block: Remove unnecessary spaces from class attributes. ([44440](https://github.com/WordPress/gutenberg/pull/44440))
+-   Archive: No need to escape class variable. ([44468](https://github.com/WordPress/gutenberg/pull/44468))
+-   Gallery: Remove unnecessary caption state. ([44383](https://github.com/WordPress/gutenberg/pull/44383))
+-   Remove unnecessary `view.js` file from navigation-submenu block. ([44570](https://github.com/WordPress/gutenberg/pull/44570))
 
 #### Plugin
-- CS: All methods must declare visibility. ([44543](https://github.com/WordPress/gutenberg/pull/44543))
-- Move `wp_enqueue_block_view_script` to experiments. ([44414](https://github.com/WordPress/gutenberg/pull/44414))
+
+-   CS: All methods must declare visibility. ([44543](https://github.com/WordPress/gutenberg/pull/44543))
+-   Move `wp_enqueue_block_view_script` to experiments. ([44414](https://github.com/WordPress/gutenberg/pull/44414))
 
 #### Layout
-- Backport code quality changes from core to Gutenberg. ([44661](https://github.com/WordPress/gutenberg/pull/44661))
+
+-   Backport code quality changes from core to Gutenberg. ([44661](https://github.com/WordPress/gutenberg/pull/44661))
 
 #### Parsing
-- Block Serialization Default Parser: Bring back `no-more-tokens` type. ([44459](https://github.com/WordPress/gutenberg/pull/44459))
+
+-   Block Serialization Default Parser: Bring back `no-more-tokens` type. ([44459](https://github.com/WordPress/gutenberg/pull/44459))
 
 #### Global Styles
-- Add `blocks` to the list of valid origins for `theme.json`. ([44363](https://github.com/WordPress/gutenberg/pull/44363))
+
+-   Add `blocks` to the list of valid origins for `theme.json`. ([44363](https://github.com/WordPress/gutenberg/pull/44363))
 
 #### Lodash
-- Lodash: Remove completely from `@wordpress/compose` package. ([44568](https://github.com/WordPress/gutenberg/pull/44568))
-- Lodash: Remove completely from `@wordpress/library-export-default-webpack-plugin` package. ([44571](https://github.com/WordPress/gutenberg/pull/44571))
-- Lodash: Remove completely from `@wordpress/list-reusable-blocks` package. ([44567](https://github.com/WordPress/gutenberg/pull/44567))
-- Lodash: Refactor away from `_.flow()`. ([44500](https://github.com/WordPress/gutenberg/pull/44500))
-- Lodash: Remove completely from `@wordpress/block-directory` package. ([44206](https://github.com/WordPress/gutenberg/pull/44206))
-- Lodash: Remove completely from `@wordpress/rich-text` package. ([44204](https://github.com/WordPress/gutenberg/pull/44204))
+
+-   Lodash: Remove completely from `@wordpress/compose` package. ([44568](https://github.com/WordPress/gutenberg/pull/44568))
+-   Lodash: Remove completely from `@wordpress/library-export-default-webpack-plugin` package. ([44571](https://github.com/WordPress/gutenberg/pull/44571))
+-   Lodash: Remove completely from `@wordpress/list-reusable-blocks` package. ([44567](https://github.com/WordPress/gutenberg/pull/44567))
+-   Lodash: Refactor away from `_.flow()`. ([44500](https://github.com/WordPress/gutenberg/pull/44500))
+-   Lodash: Remove completely from `@wordpress/block-directory` package. ([44206](https://github.com/WordPress/gutenberg/pull/44206))
+-   Lodash: Remove completely from `@wordpress/rich-text` package. ([44204](https://github.com/WordPress/gutenberg/pull/44204))
 
 ### Tools
 
-- Scripts: Use default value for process.env.WP_SRC_DIRECTORY. ([44367](https://github.com/WordPress/gutenberg/pull/44367))
-- Limit access to experimental APIs to WordPress codebase. ([43386](https://github.com/WordPress/gutenberg/pull/43386))
-- Cherry Pick Script: Restore retrieval of merge_commit_sha. ([44890](https://github.com/WordPress/gutenberg/pull/44890))
+-   Scripts: Use default value for process.env.WP_SRC_DIRECTORY. ([44367](https://github.com/WordPress/gutenberg/pull/44367))
+-   Limit access to experimental APIs to WordPress codebase. ([43386](https://github.com/WordPress/gutenberg/pull/43386))
+-   Cherry Pick Script: Restore retrieval of merge_commit_sha. ([44890](https://github.com/WordPress/gutenberg/pull/44890))
 
 #### Testing
-- Autocomplete Component: Add end-to-end tests (take two). ([42905](https://github.com/WordPress/gutenberg/pull/42905))
-- Fix failing quote to reusable block conversion end-to-end test. ([44350](https://github.com/WordPress/gutenberg/pull/44350))
-- Add strict meta schema validation test for block.json. ([44423](https://github.com/WordPress/gutenberg/pull/44423))
-- Migrate iframed block test to Playwright. ([44164](https://github.com/WordPress/gutenberg/pull/44164))
-- Add theme.json schema tests. ([44252](https://github.com/WordPress/gutenberg/pull/44252))
-- Remove enzyme completely. ([44494](https://github.com/WordPress/gutenberg/pull/44494))
-- Fix typo from in writing flow spec. ([44358](https://github.com/WordPress/gutenberg/pull/44358))
-- Fix typo in WP_Navigation_Page_Test. ([44685](https://github.com/WordPress/gutenberg/pull/44685))
-- Popover: Convert unit tests to TypeScript and modern RTL assertions. ([44373](https://github.com/WordPress/gutenberg/pull/44373))
-- Refactor `AlignmentMatrixControl` tests to use `@testing-library/react`. ([44670](https://github.com/WordPress/gutenberg/pull/44670))
-- End-to-end Test Utils: Don't use hardcoded login credentials. ([44331](https://github.com/WordPress/gutenberg/pull/44331))
-- Refactor `PluginPostPublishPanel` tests to use RTL render. ([44667](https://github.com/WordPress/gutenberg/pull/44667))
-- Refactor `AutosaveMonitor` tests to `@testing-library/react`. ([44492](https://github.com/WordPress/gutenberg/pull/44492))
-- Refactor `PostPreviewButton` tests to `@testing-library/react`. ([44470](https://github.com/WordPress/gutenberg/pull/44470))
-- Refactor `BlockSwitcher` tests to `@testing-library/react`. ([44493](https://github.com/WordPress/gutenberg/pull/44493))
-- Refactor `ResponsiveBlockControl` tests to use `@testing-library/react`. ([44669](https://github.com/WordPress/gutenberg/pull/44669))
-- Style engine: Add JS unit tests for outline properties. ([44518](https://github.com/WordPress/gutenberg/pull/44518))
 
-#### Build Tooling
-- Upgrade Lerna to the latest version. ([44456](https://github.com/WordPress/gutenberg/pull/44456))
-- wp-env: Use case insensitive regex when checking WP version string. ([44887](https://github.com/WordPress/gutenberg/pull/44887))
+-   Autocomplete Component: Add end-to-end tests (take two). ([42905](https://github.com/WordPress/gutenberg/pull/42905))
+-   Fix failing quote to reusable block conversion end-to-end test. ([44350](https://github.com/WordPress/gutenberg/pull/44350))
+-   Add strict meta schema validation test for block.json. ([44423](https://github.com/WordPress/gutenberg/pull/44423))
+-   Migrate iframed block test to Playwright. ([44164](https://github.com/WordPress/gutenberg/pull/44164))
+-   Add theme.json schema tests. ([44252](https://github.com/WordPress/gutenberg/pull/44252))
+-   Remove enzyme completely. ([44494](https://github.com/WordPress/gutenberg/pull/44494))
+-   Fix typo from in writing flow spec. ([44358](https://github.com/WordPress/gutenberg/pull/44358))
+-   Fix typo in WP_Navigation_Page_Test. ([44685](https://github.com/WordPress/gutenberg/pull/44685))
+-   Popover: Convert unit tests to TypeScript and modern RTL assertions. ([44373](https://github.com/WordPress/gutenberg/pull/44373))
+-   Refactor `AlignmentMatrixControl` tests to use `@testing-library/react`. ([44670](https://github.com/WordPress/gutenberg/pull/44670))
+-   End-to-end Test Utils: Don't use hardcoded login credentials. ([44331](https://github.com/WordPress/gutenberg/pull/44331))
+-   Refactor `PluginPostPublishPanel` tests to use RTL render. ([44667](https://github.com/WordPress/gutenberg/pull/44667))
+-   Refactor `AutosaveMonitor` tests to `@testing-library/react`. ([44492](https://github.com/WordPress/gutenberg/pull/44492))
+-   Refactor `PostPreviewButton` tests to `@testing-library/react`. ([44470](https://github.com/WordPress/gutenberg/pull/44470))
+-   Refactor `BlockSwitcher` tests to `@testing-library/react`. ([44493](https://github.com/WordPress/gutenberg/pull/44493))
+-   Refactor `ResponsiveBlockControl` tests to use `@testing-library/react`. ([44669](https://github.com/WordPress/gutenberg/pull/44669))
+-   Style engine: Add JS unit tests for outline properties. ([44518](https://github.com/WordPress/gutenberg/pull/44518))
 
+#### Build Tooling
 
-## First time contributors
+-   Upgrade Lerna to the latest version. ([44456](https://github.com/WordPress/gutenberg/pull/44456))
+-   wp-env: Use case insensitive regex when checking WP version string. ([44887](https://github.com/WordPress/gutenberg/pull/44887))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @alecgeatches: Add theme.json schema tests. ([44252](https://github.com/WordPress/gutenberg/pull/44252))
-- @BenoitZugmeyer: Use `get_queried_object_id` when setting `current-menu-item` classes. ([44474](https://github.com/WordPress/gutenberg/pull/44474))
-- @blindingstars: Update Theme JSON `$schema` to allow pseudo selectors on `button` property. ([44303](https://github.com/WordPress/gutenberg/pull/44303))
-- @imanish003: Add missing import statement for useBlockProps. ([44607](https://github.com/WordPress/gutenberg/pull/44607))
-- @loxK: Scripts: Use default value for process.env.WP_SRC_DIRECTORY. ([44367](https://github.com/WordPress/gutenberg/pull/44367))
-- @Lucisu: Fix empty links being created for the author's name comment. ([44650](https://github.com/WordPress/gutenberg/pull/44650))
-- @philwp: Post Author block now includes option to link author archive. ([42670](https://github.com/WordPress/gutenberg/pull/42670))
+The following PRs were merged by first-time contributors:
 
+-   @alecgeatches: Add theme.json schema tests. ([44252](https://github.com/WordPress/gutenberg/pull/44252))
+-   @BenoitZugmeyer: Use `get_queried_object_id` when setting `current-menu-item` classes. ([44474](https://github.com/WordPress/gutenberg/pull/44474))
+-   @blindingstars: Update Theme JSON `$schema` to allow pseudo selectors on `button` property. ([44303](https://github.com/WordPress/gutenberg/pull/44303))
+-   @imanish003: Add missing import statement for useBlockProps. ([44607](https://github.com/WordPress/gutenberg/pull/44607))
+-   @loxK: Scripts: Use default value for process.env.WP_SRC_DIRECTORY. ([44367](https://github.com/WordPress/gutenberg/pull/44367))
+-   @Lucisu: Fix empty links being created for the author's name comment. ([44650](https://github.com/WordPress/gutenberg/pull/44650))
+-   @philwp: Post Author block now includes option to link author archive. ([42670](https://github.com/WordPress/gutenberg/pull/42670))
 
 ## Contributors
 
@@ -1032,222 +25001,211 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @ajlende @alecgeatches @andrewserong @anton-vlasenko @BE-Webdesign @BenoitZugmeyer @blindingstars @carolinan @chad1008 @ciampo @derekblank @dmsnell @ellatrix @getdave @glendaviesnz @gziolo @imanish003 @inc2734 @jameskoster @jasmussen @javierarce @jorgefilipecosta @jrfnl @kevin940726 @loxK @Lucisu @luisherranz @Mamaduka @michalczaplinski @ndiego @noisysocks @ntsekouras @oandregal @pagelab @philwp @ramonjd @Rink9 @ryanwelcher @SantosGuillamot @scruffian @Soean @sunyatasattva @t-hamano @talldan @tellthemachines @tyxla @vcanales @youknowriad
 
-
-
-
 = 14.2.0 =
 
 ## Changelog
 
 ### Deprecations
 
-- Officially deprecate the `children` and `node` block attribute sources. ([44265](https://github.com/WordPress/gutenberg/pull/44265))
+-   Officially deprecate the `children` and `node` block attribute sources. ([44265](https://github.com/WordPress/gutenberg/pull/44265))
 
 ### Enhancements
 
 #### Components
 
-- Link/Unlink buttons: Add more polished styling and UX. ([43802](https://github.com/WordPress/gutenberg/pull/43802))
+-   Link/Unlink buttons: Add more polished styling and UX. ([43802](https://github.com/WordPress/gutenberg/pull/43802))
 
 #### Global Styles
 
-- Allow setting Letter case and Decoration to 'None' and add Letter case to Global Styles. ([44067](https://github.com/WordPress/gutenberg/pull/44067))
-- Block supports: Allow overriding prettify options for enqueued CSS. ([44248](https://github.com/WordPress/gutenberg/pull/44248))
-- Show Letter Spacing in Global Styles -> Typography -> Headings. ([44142](https://github.com/WordPress/gutenberg/pull/44142))
-- Spacing presets: Switch to using numbers instead of t-shirt sizes for labels. ([44247](https://github.com/WordPress/gutenberg/pull/44247))
+-   Allow setting Letter case and Decoration to 'None' and add Letter case to Global Styles. ([44067](https://github.com/WordPress/gutenberg/pull/44067))
+-   Block supports: Allow overriding prettify options for enqueued CSS. ([44248](https://github.com/WordPress/gutenberg/pull/44248))
+-   Show Letter Spacing in Global Styles -> Typography -> Headings. ([44142](https://github.com/WordPress/gutenberg/pull/44142))
+-   Spacing presets: Switch to using numbers instead of t-shirt sizes for labels. ([44247](https://github.com/WordPress/gutenberg/pull/44247))
 
 #### Block Editor
 
-- Hide all floating block UI when typing. ([44083](https://github.com/WordPress/gutenberg/pull/44083))
-- Update animation for line and sibling inserter. ([44269](https://github.com/WordPress/gutenberg/pull/44269))
-- Warning component: Align the action buttons. ([44328](https://github.com/WordPress/gutenberg/pull/44328))
+-   Hide all floating block UI when typing. ([44083](https://github.com/WordPress/gutenberg/pull/44083))
+-   Update animation for line and sibling inserter. ([44269](https://github.com/WordPress/gutenberg/pull/44269))
+-   Warning component: Align the action buttons. ([44328](https://github.com/WordPress/gutenberg/pull/44328))
 
 #### Block Library
 
-- Calendar block: Add color supports and polish styles. ([42029](https://github.com/WordPress/gutenberg/pull/42029))
-- Embed block: Mark which attributes should be considered content. ([44039](https://github.com/WordPress/gutenberg/pull/44039))
-- List Item block: Improve writing flow. ([43954](https://github.com/WordPress/gutenberg/pull/43954))
-- Post Navigation Link block: Add arrows. ([40684](https://github.com/WordPress/gutenberg/pull/40684))
-- Query Loop block: Suggest active variation patterns.
-  ([44197](https://github.com/WordPress/gutenberg/pull/44197))
+-   Calendar block: Add color supports and polish styles. ([42029](https://github.com/WordPress/gutenberg/pull/42029))
+-   Embed block: Mark which attributes should be considered content. ([44039](https://github.com/WordPress/gutenberg/pull/44039))
+-   List Item block: Improve writing flow. ([43954](https://github.com/WordPress/gutenberg/pull/43954))
+-   Post Navigation Link block: Add arrows. ([40684](https://github.com/WordPress/gutenberg/pull/40684))
+-   Query Loop block: Suggest active variation patterns.
+    ([44197](https://github.com/WordPress/gutenberg/pull/44197))
 
 #### Patterns
 
-- Add a new category for block patterns called "Banners". ([44203](https://github.com/WordPress/gutenberg/pull/44203))
-- Add a new category for block patterns called "Footers".
-  ([44200](https://github.com/WordPress/gutenberg/pull/44200))
+-   Add a new category for block patterns called "Banners". ([44203](https://github.com/WordPress/gutenberg/pull/44203))
+-   Add a new category for block patterns called "Footers".
+    ([44200](https://github.com/WordPress/gutenberg/pull/44200))
 
 ### Bug Fixes
 
 #### Components
 
-- BlockMover: Clean up focus styles. ([44241](https://github.com/WordPress/gutenberg/pull/44241))
-- Fix animation running in loop while dragging an image on a dropzone. ([44264](https://github.com/WordPress/gutenberg/pull/44264))
-- Fix popover stacking in the customize widgets editor. ([44282](https://github.com/WordPress/gutenberg/pull/44282))
-- Link autocompleter: Enable for all blocks. ([44078](https://github.com/WordPress/gutenberg/pull/44078))
-- Remove unexpected `has-text` class when empty children are passed to `Button`. ([44198](https://github.com/WordPress/gutenberg/pull/44198))
+-   BlockMover: Clean up focus styles. ([44241](https://github.com/WordPress/gutenberg/pull/44241))
+-   Fix animation running in loop while dragging an image on a dropzone. ([44264](https://github.com/WordPress/gutenberg/pull/44264))
+-   Fix popover stacking in the customize widgets editor. ([44282](https://github.com/WordPress/gutenberg/pull/44282))
+-   Link autocompleter: Enable for all blocks. ([44078](https://github.com/WordPress/gutenberg/pull/44078))
+-   Remove unexpected `has-text` class when empty children are passed to `Button`. ([44198](https://github.com/WordPress/gutenberg/pull/44198))
 
 #### Block Library
 
 ##### Bugfixes to blocks:
 
-- Cover block: Fix preview. ([44321](https://github.com/WordPress/gutenberg/pull/44321))
-- Freeform block: Hide "Convert to blocks" when the block locked.
-  ([44288](https://github.com/WordPress/gutenberg/pull/44288))
-- Group block: Change default variation in inserter. ([44176](https://github.com/WordPress/gutenberg/pull/44176))
-- Missing block: Fix HTML block check. ([44327](https://github.com/WordPress/gutenberg/pull/44327))
-- Navigation block: Fix submenu colors for imported classic menus.
-  ([44283](https://github.com/WordPress/gutenberg/pull/44283))
-- Navigation block: Remove ellipses as menu icon options for now. ([44222](https://github.com/WordPress/gutenberg/pull/44222))
-- Pullquote block: Fix transform to quote crash.
-  ([44315](https://github.com/WordPress/gutenberg/pull/44315))
-- Post Featured Image block: Fix height/scale overwriting `img` inline styles. ([44213](https://github.com/WordPress/gutenberg/pull/44213))
-- Query Loop block: Fix broken preview in specific category template. ([44294](https://github.com/WordPress/gutenberg/pull/44294))
-- Query Loop block: Fix variation with declared`icon` object with `src`.
-  ([44270](https://github.com/WordPress/gutenberg/pull/44270))
+-   Cover block: Fix preview. ([44321](https://github.com/WordPress/gutenberg/pull/44321))
+-   Freeform block: Hide "Convert to blocks" when the block locked.
+    ([44288](https://github.com/WordPress/gutenberg/pull/44288))
+-   Group block: Change default variation in inserter. ([44176](https://github.com/WordPress/gutenberg/pull/44176))
+-   Missing block: Fix HTML block check. ([44327](https://github.com/WordPress/gutenberg/pull/44327))
+-   Navigation block: Fix submenu colors for imported classic menus.
+    ([44283](https://github.com/WordPress/gutenberg/pull/44283))
+-   Navigation block: Remove ellipses as menu icon options for now. ([44222](https://github.com/WordPress/gutenberg/pull/44222))
+-   Pullquote block: Fix transform to quote crash.
+    ([44315](https://github.com/WordPress/gutenberg/pull/44315))
+-   Post Featured Image block: Fix height/scale overwriting `img` inline styles. ([44213](https://github.com/WordPress/gutenberg/pull/44213))
+-   Query Loop block: Fix broken preview in specific category template. ([44294](https://github.com/WordPress/gutenberg/pull/44294))
+-   Query Loop block: Fix variation with declared`icon` object with `src`.
+    ([44270](https://github.com/WordPress/gutenberg/pull/44270))
 
 ##### Other bugfixes not related to a specific block:
 
-- Avoid showing the recursion warning in previews when replacing template parts. ([44256](https://github.com/WordPress/gutenberg/pull/44256))
-- Ensure replacing a template part using a pattern doesn't update the existing
-- Fix demo content cover block text color. ([44174](https://github.com/WordPress/gutenberg/pull/44174))
-  entity. ([44221](https://github.com/WordPress/gutenberg/pull/44221))
-- Add style-engine to Gutenberg's `tsconfig.json` references. ([44516](https://github.com/WordPress/gutenberg/pull/44516))
+-   Avoid showing the recursion warning in previews when replacing template parts. ([44256](https://github.com/WordPress/gutenberg/pull/44256))
+-   Ensure replacing a template part using a pattern doesn't update the existing
+-   Fix demo content cover block text color. ([44174](https://github.com/WordPress/gutenberg/pull/44174))
+    entity. ([44221](https://github.com/WordPress/gutenberg/pull/44221))
+-   Add style-engine to Gutenberg's `tsconfig.json` references. ([44516](https://github.com/WordPress/gutenberg/pull/44516))
 
 #### Block Editor
 
-- Block Toolbar: Update position when moving blocks. ([44301](https://github.com/WordPress/gutenberg/pull/44301))
-- Capture state changes scheduled between render and effect. ([38509](https://github.com/WordPress/gutenberg/pull/38509))
-- Writing flow: Fix partial selection when dragging in between blocks. ([44230](https://github.com/WordPress/gutenberg/pull/44230))
+-   Block Toolbar: Update position when moving blocks. ([44301](https://github.com/WordPress/gutenberg/pull/44301))
+-   Capture state changes scheduled between render and effect. ([38509](https://github.com/WordPress/gutenberg/pull/38509))
+-   Writing flow: Fix partial selection when dragging in between blocks. ([44230](https://github.com/WordPress/gutenberg/pull/44230))
 
 #### Accessibility
 
-- Add `role=application` to List View to prevent browse mode triggering in NVDA. ([44291](https://github.com/WordPress/gutenberg/pull/44291))
-- Block label and title don't consider variations. ([44250](https://github.com/WordPress/gutenberg/pull/44250))
-- Make inline toolbar navigable by arrow keys. ([43645](https://github.com/WordPress/gutenberg/pull/43645))
-- Text Selection in Safari: Try new fix for recent version. ([44148](https://github.com/WordPress/gutenberg/pull/44148))
+-   Add `role=application` to List View to prevent browse mode triggering in NVDA. ([44291](https://github.com/WordPress/gutenberg/pull/44291))
+-   Block label and title don't consider variations. ([44250](https://github.com/WordPress/gutenberg/pull/44250))
+-   Make inline toolbar navigable by arrow keys. ([43645](https://github.com/WordPress/gutenberg/pull/43645))
+-   Text Selection in Safari: Try new fix for recent version. ([44148](https://github.com/WordPress/gutenberg/pull/44148))
 
 #### Global Styles
 
-- Add: Frontend section presets output. ([42124](https://github.com/WordPress/gutenberg/pull/42124))
-- Block supports: Prioritize prettify options over `SCRIPT_DEBUG`. ([44254](https://github.com/WordPress/gutenberg/pull/44254))
-- Fix padding on the post editor when `RootPaddingAwareAlignments` setting is enabled. ([44209](https://github.com/WordPress/gutenberg/pull/44209))
-- Remove the beta label from global styles header. ([44251](https://github.com/WordPress/gutenberg/pull/44251))
-- Theme.json: Fix some outline properties that don't work properly in the editor. ([44504](https://github.com/WordPress/gutenberg/pull/44504))
+-   Add: Frontend section presets output. ([42124](https://github.com/WordPress/gutenberg/pull/42124))
+-   Block supports: Prioritize prettify options over `SCRIPT_DEBUG`. ([44254](https://github.com/WordPress/gutenberg/pull/44254))
+-   Fix padding on the post editor when `RootPaddingAwareAlignments` setting is enabled. ([44209](https://github.com/WordPress/gutenberg/pull/44209))
+-   Remove the beta label from global styles header. ([44251](https://github.com/WordPress/gutenberg/pull/44251))
+-   Theme.json: Fix some outline properties that don't work properly in the editor. ([44504](https://github.com/WordPress/gutenberg/pull/44504))
 
 #### Site Editor
 
-- Make template names and descriptions dynamic. ([43862](https://github.com/WordPress/gutenberg/pull/43862))
-- Prevent editor from creating multiple templates when multi-clicking the
-  "create" button. ([44146](https://github.com/WordPress/gutenberg/pull/44146))
+-   Make template names and descriptions dynamic. ([43862](https://github.com/WordPress/gutenberg/pull/43862))
+-   Prevent editor from creating multiple templates when multi-clicking the
+    "create" button. ([44146](https://github.com/WordPress/gutenberg/pull/44146))
 
 #### Keycodes
 
-- Keyboard Shortcuts: Fix settings sidebar toggle shortcut. ([43428](https://github.com/WordPress/gutenberg/pull/43428))
+-   Keyboard Shortcuts: Fix settings sidebar toggle shortcut. ([43428](https://github.com/WordPress/gutenberg/pull/43428))
 
 ### Performance
 
-- Avoid calling redux actions constantly when moving the mouse or scrolling. ([44325](https://github.com/WordPress/gutenberg/pull/44325))
-- Batch container block settings action calls. ([43958](https://github.com/WordPress/gutenberg/pull/43958))
-- Prevent resize observer loops in BlockPreview. ([44319](https://github.com/WordPress/gutenberg/pull/44319))
+-   Avoid calling redux actions constantly when moving the mouse or scrolling. ([44325](https://github.com/WordPress/gutenberg/pull/44325))
+-   Batch container block settings action calls. ([43958](https://github.com/WordPress/gutenberg/pull/43958))
+-   Prevent resize observer loops in BlockPreview. ([44319](https://github.com/WordPress/gutenberg/pull/44319))
 
 ### Documentation
 
-- Include information about multiple scripts support added in WP 6.1. ([44155](https://github.com/WordPress/gutenberg/pull/44155))
-- Popover: Write better documentation regarding the recent API changes. ([44195](https://github.com/WordPress/gutenberg/pull/44195))
-- RangeControl component: Clarify rail vs track difference. ([44057](https://github.com/WordPress/gutenberg/pull/44057))
-- Update links in the Development Platform document. ([44181](https://github.com/WordPress/gutenberg/pull/44181))
-- Updating versions in WP for 6.0.2. ([43826](https://github.com/WordPress/gutenberg/pull/43826))
+-   Include information about multiple scripts support added in WP 6.1. ([44155](https://github.com/WordPress/gutenberg/pull/44155))
+-   Popover: Write better documentation regarding the recent API changes. ([44195](https://github.com/WordPress/gutenberg/pull/44195))
+-   RangeControl component: Clarify rail vs track difference. ([44057](https://github.com/WordPress/gutenberg/pull/44057))
+-   Update links in the Development Platform document. ([44181](https://github.com/WordPress/gutenberg/pull/44181))
+-   Updating versions in WP for 6.0.2. ([43826](https://github.com/WordPress/gutenberg/pull/43826))
 
 ### Code Quality
 
-- Backport template creation changes from Core.
-- Enforce coding guideline regarding the usage of quotation marks. ([44305](https://github.com/WordPress/gutenberg/pull/44305))
-- Fix missing TS types for a11y in `packages/components`. ([44277](https://github.com/WordPress/gutenberg/pull/44277))
-- Preferences-persistence: Remove `@wordpress/compose` dependency. ([44202](https://github.com/WordPress/gutenberg/pull/44202))
-- Refactor style engine border styles. ([43594](https://github.com/WordPress/gutenberg/pull/43594))
-- Removes whitespace from l18n-strings. ([44314](https://github.com/WordPress/gutenberg/pull/44314))
-- Renaming functions to match their naming in Core. ([44266](https://github.com/WordPress/gutenberg/pull/44266))
-  ([44299](https://github.com/WordPress/gutenberg/pull/44299))
-- `useInstanceId`: Convert to typescript. ([43790](https://github.com/WordPress/gutenberg/pull/43790))
+-   Backport template creation changes from Core.
+-   Enforce coding guideline regarding the usage of quotation marks. ([44305](https://github.com/WordPress/gutenberg/pull/44305))
+-   Fix missing TS types for a11y in `packages/components`. ([44277](https://github.com/WordPress/gutenberg/pull/44277))
+-   Preferences-persistence: Remove `@wordpress/compose` dependency. ([44202](https://github.com/WordPress/gutenberg/pull/44202))
+-   Refactor style engine border styles. ([43594](https://github.com/WordPress/gutenberg/pull/43594))
+-   Removes whitespace from l18n-strings. ([44314](https://github.com/WordPress/gutenberg/pull/44314))
+-   Renaming functions to match their naming in Core. ([44266](https://github.com/WordPress/gutenberg/pull/44266))
+    ([44299](https://github.com/WordPress/gutenberg/pull/44299))
+-   `useInstanceId`: Convert to typescript. ([43790](https://github.com/WordPress/gutenberg/pull/43790))
 
 #### Updating dependencies
 
-- Update `fast-average-color` library to latest version. ([44175](https://github.com/WordPress/gutenberg/pull/44175))
-- Update `json2php` to `v0.0.5`. ([44313](https://github.com/WordPress/gutenberg/pull/44313))
-- Remove `wp-editor` from `wp-edit-blocks` dependencies. ([33496](https://github.com/WordPress/gutenberg/pull/33496))
+-   Update `fast-average-color` library to latest version. ([44175](https://github.com/WordPress/gutenberg/pull/44175))
+-   Update `json2php` to `v0.0.5`. ([44313](https://github.com/WordPress/gutenberg/pull/44313))
+-   Remove `wp-editor` from `wp-edit-blocks` dependencies. ([33496](https://github.com/WordPress/gutenberg/pull/33496))
 
 #### Block Library
 
-- Comments Pagination blocks: Rename for consistency. ([44287](https://github.com/WordPress/gutenberg/pull/44287))
-- Embed block: Remove incorrect comments about block variations. ([43834](https://github.com/WordPress/gutenberg/pull/43834))
+-   Comments Pagination blocks: Rename for consistency. ([44287](https://github.com/WordPress/gutenberg/pull/44287))
+-   Embed block: Remove incorrect comments about block variations. ([43834](https://github.com/WordPress/gutenberg/pull/43834))
 
 #### Components
 
-- Refactor `NavigationMenu` to ignore `exhaustive-deps`. ([44090](https://github.com/WordPress/gutenberg/pull/44090))
-- Refactor `RangeControl` to pass `exhaustive-deps`.
-  ([44271](https://github.com/WordPress/gutenberg/pull/44271))
-- Popover: Add `anchor` prop which supersedes all previous anchor-related props. ([43691](https://github.com/WordPress/gutenberg/pull/43691))
-- UnitControl: Fix exhaustive-deps warnings. ([44161](https://github.com/WordPress/gutenberg/pull/44161))
-- UnitControl: Use `hideHTMLArrows` prop to hide spin buttons. ([43985](https://github.com/WordPress/gutenberg/pull/43985))
-- `useSetting`: Minor refactor. ([44267](https://github.com/WordPress/gutenberg/pull/44267))
+-   Refactor `NavigationMenu` to ignore `exhaustive-deps`. ([44090](https://github.com/WordPress/gutenberg/pull/44090))
+-   Refactor `RangeControl` to pass `exhaustive-deps`.
+    ([44271](https://github.com/WordPress/gutenberg/pull/44271))
+-   Popover: Add `anchor` prop which supersedes all previous anchor-related props. ([43691](https://github.com/WordPress/gutenberg/pull/43691))
+-   UnitControl: Fix exhaustive-deps warnings. ([44161](https://github.com/WordPress/gutenberg/pull/44161))
+-   UnitControl: Use `hideHTMLArrows` prop to hide spin buttons. ([43985](https://github.com/WordPress/gutenberg/pull/43985))
+-   `useSetting`: Minor refactor. ([44267](https://github.com/WordPress/gutenberg/pull/44267))
 
 #### Refactoring tests to use `@testing-library/react`
 
-- Refactor `BlockControls` tests to `@testing-library/react`. ([44122](https://github.com/WordPress/gutenberg/pull/44122))
-- Refactor `ColorPalette` tests to `@testing-library/react`. ([44108](https://github.com/WordPress/gutenberg/pull/44108))
-- Refactor `KeyboardShortcutHelpModal` tests to `@testing-library/react`.
-  ([44077](https://github.com/WordPress/gutenberg/pull/44077))
+-   Refactor `BlockControls` tests to `@testing-library/react`. ([44122](https://github.com/WordPress/gutenberg/pull/44122))
+-   Refactor `ColorPalette` tests to `@testing-library/react`. ([44108](https://github.com/WordPress/gutenberg/pull/44108))
+-   Refactor `KeyboardShortcutHelpModal` tests to `@testing-library/react`.
+    ([44077](https://github.com/WordPress/gutenberg/pull/44077))
 
 #### Work to remove dependency on `lodash`
 
-- Compose: Introduce in-house `compose` and `pipe` utils. ([44112](https://github.com/WordPress/gutenberg/pull/44112))
-- Compose: Introduce in-house `debounce()` utility, deprecate Lodash version. ([43943](https://github.com/WordPress/gutenberg/pull/43943))
-- Lodash: Remove dependency from `@wordpress/widgets` package. ([44201](https://github.com/WordPress/gutenberg/pull/44201))
-- Lodash: Refactor away from `_.flowRight()`.
-  ([44188](https://github.com/WordPress/gutenberg/pull/44188))
+-   Compose: Introduce in-house `compose` and `pipe` utils. ([44112](https://github.com/WordPress/gutenberg/pull/44112))
+-   Compose: Introduce in-house `debounce()` utility, deprecate Lodash version. ([43943](https://github.com/WordPress/gutenberg/pull/43943))
+-   Lodash: Remove dependency from `@wordpress/widgets` package. ([44201](https://github.com/WordPress/gutenberg/pull/44201))
+-   Lodash: Refactor away from `_.flowRight()`.
+    ([44188](https://github.com/WordPress/gutenberg/pull/44188))
 
 #### Testing
 
-- Storybook: Set up local visual regression testing.
-  ([43393](https://github.com/WordPress/gutenberg/pull/43393))
+-   Storybook: Set up local visual regression testing.
+    ([43393](https://github.com/WordPress/gutenberg/pull/43393))
 
 #### Tooling
 
-- Ensure all packages get minor/major version bump when requested. ([44317](https://github.com/WordPress/gutenberg/pull/44317))
+-   Ensure all packages get minor/major version bump when requested. ([44317](https://github.com/WordPress/gutenberg/pull/44317))
 
-## First time contributors
+## First-time contributors
 
-The following PRs were merged by first time contributors:
+The following PRs were merged by first-time contributors:
 
-- @kkoppenhaver: Update RangeControl documentation to clarify rail vs track. ([44057](https://github.com/WordPress/gutenberg/pull/44057))
-- @pagelab: Enforce coding guideline regarding the usage of quotation marks. ([44305](https://github.com/WordPress/gutenberg/pull/44305))
+-   @kkoppenhaver: Update RangeControl documentation to clarify rail vs track. ([44057](https://github.com/WordPress/gutenberg/pull/44057))
+-   @pagelab: Enforce coding guideline regarding the usage of quotation marks. ([44305](https://github.com/WordPress/gutenberg/pull/44305))
 
 ## Contributors
 
 The following contributors merged PRs in this release:
 
-@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad 
-
-
-
+@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad
 
 = 14.1.1 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
-- Blocks: Fix searching of blocks when description is non-string. ([44233](https://github.com/WordPress/gutenberg/pull/44233)) Resolves an editor crash which could happen when searching for blocks.
-
-
-## First time contributors
-
-The following PRs were merged by first time contributors:
+-   Blocks: Fix searching of blocks when description is non-string. ([44233](https://github.com/WordPress/gutenberg/pull/44233)) Resolves an editor crash which could happen when searching for blocks.
 
+## First-time contributors
 
+The following PRs were merged by first-time contributors:
 
 ## Contributors
 
@@ -1255,7 +25213,6 @@ The following contributors merged PRs in this release:
 
 @tyxla
 
-
 = 14.1.0 =
 
 ## Changelog
@@ -1263,483 +25220,526 @@ The following contributors merged PRs in this release:
 ### Features
 
 #### Block Library
-- Add select icon for Navigation Block's menu button. ([43674](https://github.com/WordPress/gutenberg/pull/43674))
+
+-   Add select icon for Navigation Block's menu button. ([43674](https://github.com/WordPress/gutenberg/pull/43674))
 
 #### Full Site Editing
-- Add a zoomed out view to the site editor. ([41156](https://github.com/WordPress/gutenberg/pull/41156))
 
+-   Add a zoomed out view to the site editor. ([41156](https://github.com/WordPress/gutenberg/pull/41156))
 
 ### Enhancements
 
 #### Design Tools
-- Add padding and margin support to the gallery block. ([43965](https://github.com/WordPress/gutenberg/pull/43965))
-- Archives: Add typography support. ([43935](https://github.com/WordPress/gutenberg/pull/43935))
-- Avatar: Add padding support. ([43519](https://github.com/WordPress/gutenberg/pull/43519))
-- Buttons: Add typography supports to button/s blocks. ([43934](https://github.com/WordPress/gutenberg/pull/43934))
-- Calendar: Add typography supports (except text-decoration). ([43969](https://github.com/WordPress/gutenberg/pull/43969))
-- Categories List: Add spacing support. ([43647](https://github.com/WordPress/gutenberg/pull/43647))
-- Comment Date: Add spacing support. ([43656](https://github.com/WordPress/gutenberg/pull/43656))
-- Comment Edit Link: Add spacing support. ([43657](https://github.com/WordPress/gutenberg/pull/43657))
-- Comment Reply Link: Add spacing support. ([43658](https://github.com/WordPress/gutenberg/pull/43658))
-- Heading: Add missing typography support. ([44003](https://github.com/WordPress/gutenberg/pull/44003))
-- Home Link: Add typography support. ([43307](https://github.com/WordPress/gutenberg/pull/43307))
-- Latest Posts: Add typography supports. ([43540](https://github.com/WordPress/gutenberg/pull/43540))
-- List: Add missing typography block supports. ([43311](https://github.com/WordPress/gutenberg/pull/43311))
-- Navigation Link: Add typography support. ([44005](https://github.com/WordPress/gutenberg/pull/44005))
-- Post Content: Add typography supports. ([43339](https://github.com/WordPress/gutenberg/pull/43339))
-- Post Excerpt: Add missing typography supports. ([43341](https://github.com/WordPress/gutenberg/pull/43341))
-- Query No Results: Add typography supports. ([43551](https://github.com/WordPress/gutenberg/pull/43551))
-- Query Pagination Next: Add missing typography supports. ([43555](https://github.com/WordPress/gutenberg/pull/43555))
-- Query Pagination Numbers: Add missing typography supports. ([43559](https://github.com/WordPress/gutenberg/pull/43559))
-- Query Pagination Previous: Add missing typography supports. ([43556](https://github.com/WordPress/gutenberg/pull/43556))
-- Query Pagination: Add typography support. ([43552](https://github.com/WordPress/gutenberg/pull/43552))
-- Query Title: Add missing typography supports. ([43565](https://github.com/WordPress/gutenberg/pull/43565))
-- Quote: Add missing typography supports. ([43567](https://github.com/WordPress/gutenberg/pull/43567))
-- Search block: Add typography supports. ([43499](https://github.com/WordPress/gutenberg/pull/43499))
-- Site Logo: Add padding and margin support. ([43520](https://github.com/WordPress/gutenberg/pull/43520))
-- Site Title and Tagline: Add text decoration support. ([43972](https://github.com/WordPress/gutenberg/pull/43972))
-- Social Icons: Add missing padding support, update margin support. ([43885](https://github.com/WordPress/gutenberg/pull/43885))
-- Table: Add missing typography supports. ([43974](https://github.com/WordPress/gutenberg/pull/43974))
-- Term Description: Add missing typography supports. ([43568](https://github.com/WordPress/gutenberg/pull/43568))
-- Verse: Add missing typography supports. ([43569](https://github.com/WordPress/gutenberg/pull/43569))
-
-#### Block Library
-- Add: Content role to relevant audio block attributes. ([44037](https://github.com/WordPress/gutenberg/pull/44037))
-- Audio: Display upload error notices using snackbars. ([43891](https://github.com/WordPress/gutenberg/pull/43891))
-- Code: Add transformation to Paragraph. ([43938](https://github.com/WordPress/gutenberg/pull/43938))
-- Columns: Add axial block spacing to Columns block (alternate attempt). ([44101](https://github.com/WordPress/gutenberg/pull/44101))
-- Comments block (legacy mode): Update warning message wording. ([43527](https://github.com/WordPress/gutenberg/pull/43527))
-- Cover Block: Keep the inner contents in a physical direction even in RTL languages. ([43663](https://github.com/WordPress/gutenberg/pull/43663))
-- Create classic navigation menus as draft and dirty the site editor. ([43580](https://github.com/WordPress/gutenberg/pull/43580))
-- File: Display upload error notices using snackbars. ([43893](https://github.com/WordPress/gutenberg/pull/43893))
-- Gallery: Display upload error notices using snackbars. ([43946](https://github.com/WordPress/gutenberg/pull/43946))
-- Image: Display transformation error notice using snackbars. ([44031](https://github.com/WordPress/gutenberg/pull/44031))
-- Improves the UX of menu management in the navigation block. ([42987](https://github.com/WordPress/gutenberg/pull/42987))
-- Mark which attributes of the video should be considered content. ([44038](https://github.com/WordPress/gutenberg/pull/44038))
-- Media & Text: Display upload error notices using snackbars. ([43890](https://github.com/WordPress/gutenberg/pull/43890))
-- Navigation: Add overlay close button to icon toggle control. ([43067](https://github.com/WordPress/gutenberg/pull/43067))
-- Navigation: Set the icon control to full width. ([43844](https://github.com/WordPress/gutenberg/pull/43844))
-- Navigation: Try adding minimal animation to overlay. ([43851](https://github.com/WordPress/gutenberg/pull/43851))
-- Navigation: Try making it possible for themes to have the X overlay the = icon. ([43576](https://github.com/WordPress/gutenberg/pull/43576))
-- Navigation: Update to use translate instead of top. ([44082](https://github.com/WordPress/gutenberg/pull/44082))
-- Prevent single Columns blocks transforming into Columns. ([43641](https://github.com/WordPress/gutenberg/pull/43641))
-- Query Loop: Add `allowedControls` in block variations for better extensibility. ([43632](https://github.com/WordPress/gutenberg/pull/43632))
-- Query Loop: Pass extra query args in REST API call for accurate preview for extenders. ([44093](https://github.com/WordPress/gutenberg/pull/44093))
-- Quote: Restrict single block transforms to specific blocks. ([44106](https://github.com/WordPress/gutenberg/pull/44106))
-- Update: Add __experimentalRole attributes to media text block. ([43957](https://github.com/WordPress/gutenberg/pull/43957))
-- Video: Display upload error notices using snackbars. ([43892](https://github.com/WordPress/gutenberg/pull/43892))
-
-
-#### Components
-- Add contextConnectWithoutRef() to bypass ref forwarding. ([43611](https://github.com/WordPress/gutenberg/pull/43611))
-- AlignmentMatrixControl: Keep the physical direction in RTL languages. ([43126](https://github.com/WordPress/gutenberg/pull/43126))
-- ColorPalette: Make popover style consistent. ([43570](https://github.com/WordPress/gutenberg/pull/43570))
-- DropdownMenu: Use KeyboardEvent.code, refactor tests to model RTL and user-event. ([43439](https://github.com/WordPress/gutenberg/pull/43439))
-- GradientPicker: Show custom picker before swatches. ([43577](https://github.com/WordPress/gutenberg/pull/43577))
-- Guide: Use `code` instead of `keyCode` for keyboard events. ([43604](https://github.com/WordPress/gutenberg/pull/43604))
-- NavigableContainer: Use code instead of keyCode for keyboard events. ([43606](https://github.com/WordPress/gutenberg/pull/43606))
-- Popover: Refactor to TypeScript. ([43823](https://github.com/WordPress/gutenberg/pull/43823))
-- Storybook: Support dashicons for testing. ([43721](https://github.com/WordPress/gutenberg/pull/43721))
-- Style engine: Pass CSS formatting options from global functions. ([43886](https://github.com/WordPress/gutenberg/pull/43886))
-- TextControl, TextareaControl: Add flag to remove bottom margin. ([43782](https://github.com/WordPress/gutenberg/pull/43782))
-- ToggleGroupControl: Decouple borderless style with icon use. ([43771](https://github.com/WordPress/gutenberg/pull/43771))
-- Upsize typography tools. ([43331](https://github.com/WordPress/gutenberg/pull/43331))
-
-#### Block Editor
-- Add icons for different types of suggestions in LinkControl. ([43970](https://github.com/WordPress/gutenberg/pull/43970))
-- Add justification controls to constrained layout. ([44065](https://github.com/WordPress/gutenberg/pull/44065))
-- Adds block supports for metadata. ([43986](https://github.com/WordPress/gutenberg/pull/43986))
-- Better block transforms organization. ([44072](https://github.com/WordPress/gutenberg/pull/44072))
-- Block Setttings Menu Controls: Add unstableDisplayLocation prop. ([43987](https://github.com/WordPress/gutenberg/pull/43987))
-- Content width toggle: Polish wording and appearance. ([43702](https://github.com/WordPress/gutenberg/pull/43702))
-- CustomGradientPicker: Remove and deprecate outer margins. ([43436](https://github.com/WordPress/gutenberg/pull/43436))
-- Improve content locking experience. ([43956](https://github.com/WordPress/gutenberg/pull/43956))
-- Multi-select: Add transition to reduce chance of flash. ([43510](https://github.com/WordPress/gutenberg/pull/43510))
-- Partial multi selection: Limit if selection contains unmergeable block. ([42934](https://github.com/WordPress/gutenberg/pull/42934))
-- Rich text: Log deprecation message for multiline prop. ([43613](https://github.com/WordPress/gutenberg/pull/43613))
-- Show parent block as selected when there is content locking. ([43918](https://github.com/WordPress/gutenberg/pull/43918))
-- Simplify the inserter styles and scrollable. ([44088](https://github.com/WordPress/gutenberg/pull/44088))
-- TextTransformControl/TextDecorationControl: Migrate to ToggleGroupControl. ([43328](https://github.com/WordPress/gutenberg/pull/43328))
+
+-   Add padding and margin support to the gallery block. ([43965](https://github.com/WordPress/gutenberg/pull/43965))
+-   Archives: Add typography support. ([43935](https://github.com/WordPress/gutenberg/pull/43935))
+-   Avatar: Add padding support. ([43519](https://github.com/WordPress/gutenberg/pull/43519))
+-   Buttons: Add typography supports to button/s blocks. ([43934](https://github.com/WordPress/gutenberg/pull/43934))
+-   Calendar: Add typography supports (except text-decoration). ([43969](https://github.com/WordPress/gutenberg/pull/43969))
+-   Categories List: Add spacing support. ([43647](https://github.com/WordPress/gutenberg/pull/43647))
+-   Comment Date: Add spacing support. ([43656](https://github.com/WordPress/gutenberg/pull/43656))
+-   Comment Edit Link: Add spacing support. ([43657](https://github.com/WordPress/gutenberg/pull/43657))
+-   Comment Reply Link: Add spacing support. ([43658](https://github.com/WordPress/gutenberg/pull/43658))
+-   Heading: Add missing typography support. ([44003](https://github.com/WordPress/gutenberg/pull/44003))
+-   Home Link: Add typography support. ([43307](https://github.com/WordPress/gutenberg/pull/43307))
+-   Latest Posts: Add typography supports. ([43540](https://github.com/WordPress/gutenberg/pull/43540))
+-   List: Add missing typography block supports. ([43311](https://github.com/WordPress/gutenberg/pull/43311))
+-   Navigation Link: Add typography support. ([44005](https://github.com/WordPress/gutenberg/pull/44005))
+-   Post Content: Add typography supports. ([43339](https://github.com/WordPress/gutenberg/pull/43339))
+-   Post Excerpt: Add missing typography supports. ([43341](https://github.com/WordPress/gutenberg/pull/43341))
+-   Query No Results: Add typography supports. ([43551](https://github.com/WordPress/gutenberg/pull/43551))
+-   Query Pagination Next: Add missing typography supports. ([43555](https://github.com/WordPress/gutenberg/pull/43555))
+-   Query Pagination Numbers: Add missing typography supports. ([43559](https://github.com/WordPress/gutenberg/pull/43559))
+-   Query Pagination Previous: Add missing typography supports. ([43556](https://github.com/WordPress/gutenberg/pull/43556))
+-   Query Pagination: Add typography support. ([43552](https://github.com/WordPress/gutenberg/pull/43552))
+-   Query Title: Add missing typography supports. ([43565](https://github.com/WordPress/gutenberg/pull/43565))
+-   Quote: Add missing typography supports. ([43567](https://github.com/WordPress/gutenberg/pull/43567))
+-   Search block: Add typography supports. ([43499](https://github.com/WordPress/gutenberg/pull/43499))
+-   Site Logo: Add padding and margin support. ([43520](https://github.com/WordPress/gutenberg/pull/43520))
+-   Site Title and Tagline: Add text decoration support. ([43972](https://github.com/WordPress/gutenberg/pull/43972))
+-   Social Icons: Add missing padding support, update margin support. ([43885](https://github.com/WordPress/gutenberg/pull/43885))
+-   Table: Add missing typography supports. ([43974](https://github.com/WordPress/gutenberg/pull/43974))
+-   Term Description: Add missing typography supports. ([43568](https://github.com/WordPress/gutenberg/pull/43568))
+-   Verse: Add missing typography supports. ([43569](https://github.com/WordPress/gutenberg/pull/43569))
+
+#### Block Library
+
+-   Add: Content role to relevant audio block attributes. ([44037](https://github.com/WordPress/gutenberg/pull/44037))
+-   Audio: Display upload error notices using snackbars. ([43891](https://github.com/WordPress/gutenberg/pull/43891))
+-   Code: Add transformation to Paragraph. ([43938](https://github.com/WordPress/gutenberg/pull/43938))
+-   Columns: Add axial block spacing to Columns block (alternate attempt). ([44101](https://github.com/WordPress/gutenberg/pull/44101))
+-   Comments block (legacy mode): Update warning message wording. ([43527](https://github.com/WordPress/gutenberg/pull/43527))
+-   Cover Block: Keep the inner contents in a physical direction even in RTL languages. ([43663](https://github.com/WordPress/gutenberg/pull/43663))
+-   Create classic navigation menus as draft and dirty the site editor. ([43580](https://github.com/WordPress/gutenberg/pull/43580))
+-   File: Display upload error notices using snackbars. ([43893](https://github.com/WordPress/gutenberg/pull/43893))
+-   Gallery: Display upload error notices using snackbars. ([43946](https://github.com/WordPress/gutenberg/pull/43946))
+-   Image: Display transformation error notice using snackbars. ([44031](https://github.com/WordPress/gutenberg/pull/44031))
+-   Improves the UX of menu management in the navigation block. ([42987](https://github.com/WordPress/gutenberg/pull/42987))
+-   Mark which attributes of the video should be considered content. ([44038](https://github.com/WordPress/gutenberg/pull/44038))
+-   Media & Text: Display upload error notices using snackbars. ([43890](https://github.com/WordPress/gutenberg/pull/43890))
+-   Navigation: Add overlay close button to icon toggle control. ([43067](https://github.com/WordPress/gutenberg/pull/43067))
+-   Navigation: Set the icon control to full width. ([43844](https://github.com/WordPress/gutenberg/pull/43844))
+-   Navigation: Try adding minimal animation to overlay. ([43851](https://github.com/WordPress/gutenberg/pull/43851))
+-   Navigation: Try making it possible for themes to have the X overlay the = icon. ([43576](https://github.com/WordPress/gutenberg/pull/43576))
+-   Navigation: Update to use translate instead of top. ([44082](https://github.com/WordPress/gutenberg/pull/44082))
+-   Prevent single Columns blocks transforming into Columns. ([43641](https://github.com/WordPress/gutenberg/pull/43641))
+-   Query Loop: Add `allowedControls` in block variations for better extensibility. ([43632](https://github.com/WordPress/gutenberg/pull/43632))
+-   Query Loop: Pass extra query args in REST API call for accurate preview for extenders. ([44093](https://github.com/WordPress/gutenberg/pull/44093))
+-   Quote: Restrict single block transforms to specific blocks. ([44106](https://github.com/WordPress/gutenberg/pull/44106))
+-   Update: Add \_\_experimentalRole attributes to media text block. ([43957](https://github.com/WordPress/gutenberg/pull/43957))
+-   Video: Display upload error notices using snackbars. ([43892](https://github.com/WordPress/gutenberg/pull/43892))
+
+#### Components
+
+-   Add contextConnectWithoutRef() to bypass ref forwarding. ([43611](https://github.com/WordPress/gutenberg/pull/43611))
+-   AlignmentMatrixControl: Keep the physical direction in RTL languages. ([43126](https://github.com/WordPress/gutenberg/pull/43126))
+-   ColorPalette: Make popover style consistent. ([43570](https://github.com/WordPress/gutenberg/pull/43570))
+-   DropdownMenu: Use KeyboardEvent.code, refactor tests to model RTL and user-event. ([43439](https://github.com/WordPress/gutenberg/pull/43439))
+-   GradientPicker: Show custom picker before swatches. ([43577](https://github.com/WordPress/gutenberg/pull/43577))
+-   Guide: Use `code` instead of `keyCode` for keyboard events. ([43604](https://github.com/WordPress/gutenberg/pull/43604))
+-   NavigableContainer: Use code instead of keyCode for keyboard events. ([43606](https://github.com/WordPress/gutenberg/pull/43606))
+-   Popover: Refactor to TypeScript. ([43823](https://github.com/WordPress/gutenberg/pull/43823))
+-   Storybook: Support dashicons for testing. ([43721](https://github.com/WordPress/gutenberg/pull/43721))
+-   Style engine: Pass CSS formatting options from global functions. ([43886](https://github.com/WordPress/gutenberg/pull/43886))
+-   TextControl, TextareaControl: Add flag to remove bottom margin. ([43782](https://github.com/WordPress/gutenberg/pull/43782))
+-   ToggleGroupControl: Decouple borderless style with icon use. ([43771](https://github.com/WordPress/gutenberg/pull/43771))
+-   Upsize typography tools. ([43331](https://github.com/WordPress/gutenberg/pull/43331))
+
+#### Block Editor
+
+-   Add icons for different types of suggestions in LinkControl. ([43970](https://github.com/WordPress/gutenberg/pull/43970))
+-   Add justification controls to constrained layout. ([44065](https://github.com/WordPress/gutenberg/pull/44065))
+-   Adds block supports for metadata. ([43986](https://github.com/WordPress/gutenberg/pull/43986))
+-   Better block transforms organization. ([44072](https://github.com/WordPress/gutenberg/pull/44072))
+-   Block Setttings Menu Controls: Add unstableDisplayLocation prop. ([43987](https://github.com/WordPress/gutenberg/pull/43987))
+-   Content width toggle: Polish wording and appearance. ([43702](https://github.com/WordPress/gutenberg/pull/43702))
+-   CustomGradientPicker: Remove and deprecate outer margins. ([43436](https://github.com/WordPress/gutenberg/pull/43436))
+-   Improve content locking experience. ([43956](https://github.com/WordPress/gutenberg/pull/43956))
+-   Multi-select: Add transition to reduce chance of flash. ([43510](https://github.com/WordPress/gutenberg/pull/43510))
+-   Partial multi selection: Limit if selection contains unmergeable block. ([42934](https://github.com/WordPress/gutenberg/pull/42934))
+-   Rich text: Log deprecation message for multiline prop. ([43613](https://github.com/WordPress/gutenberg/pull/43613))
+-   Show parent block as selected when there is content locking. ([43918](https://github.com/WordPress/gutenberg/pull/43918))
+-   Simplify the inserter styles and scrollable. ([44088](https://github.com/WordPress/gutenberg/pull/44088))
+-   TextTransformControl/TextDecorationControl: Migrate to ToggleGroupControl. ([43328](https://github.com/WordPress/gutenberg/pull/43328))
 
 #### Post Editor
-- Add 'isDeletingPost' selector. ([44012](https://github.com/WordPress/gutenberg/pull/44012))
+
+-   Add 'isDeletingPost' selector. ([44012](https://github.com/WordPress/gutenberg/pull/44012))
 
 #### CSS & Styling
-- Categories List Block: Match the markup on the block editor to the front end. ([43666](https://github.com/WordPress/gutenberg/pull/43666))
-- Placeholders: Make dashed style a mixin, and apply across. ([43512](https://github.com/WordPress/gutenberg/pull/43512))
-- Separator: Remove appearance of "inset" style. ([43948](https://github.com/WordPress/gutenberg/pull/43948))
+
+-   Categories List Block: Match the markup on the block editor to the front end. ([43666](https://github.com/WordPress/gutenberg/pull/43666))
+-   Placeholders: Make dashed style a mixin, and apply across. ([43512](https://github.com/WordPress/gutenberg/pull/43512))
+-   Separator: Remove appearance of "inset" style. ([43948](https://github.com/WordPress/gutenberg/pull/43948))
 
 #### Patterns
-- Allow remote pattern registration in theme.json when core patterns are disabled. ([43634](https://github.com/WordPress/gutenberg/pull/43634))
-- Content lock ability. ([43037](https://github.com/WordPress/gutenberg/pull/43037))
-- Post type restriction API for patterns. ([41842](https://github.com/WordPress/gutenberg/pull/41842))
+
+-   Allow remote pattern registration in theme.json when core patterns are disabled. ([43634](https://github.com/WordPress/gutenberg/pull/43634))
+-   Content lock ability. ([43037](https://github.com/WordPress/gutenberg/pull/43037))
+-   Post type restriction API for patterns. ([41842](https://github.com/WordPress/gutenberg/pull/41842))
 
 #### Global Styles
-- Added outline support for blocks via theme.json. ([43526](https://github.com/WordPress/gutenberg/pull/43526))
-- Block Spacing: Using spacing controls for block gap values to support presets in the UI. ([43466](https://github.com/WordPress/gutenberg/pull/43466))
-- Add box-shadow support for blocks via theme.json. ([41972](https://github.com/WordPress/gutenberg/pull/41972))
-- Make global styles data filterable. ([44015](https://github.com/WordPress/gutenberg/pull/44015))
+
+-   Added outline support for blocks via theme.json. ([43526](https://github.com/WordPress/gutenberg/pull/43526))
+-   Block Spacing: Using spacing controls for block gap values to support presets in the UI. ([43466](https://github.com/WordPress/gutenberg/pull/43466))
+-   Add box-shadow support for blocks via theme.json. ([41972](https://github.com/WordPress/gutenberg/pull/41972))
+-   Make global styles data filterable. ([44015](https://github.com/WordPress/gutenberg/pull/44015))
 
 #### Build Tooling
-- Update unstaged documentation error message. ([43953](https://github.com/WordPress/gutenberg/pull/43953))
-- Scripts: Change webpack configuration to include `render` files in the build folder. ([43917](https://github.com/WordPress/gutenberg/pull/43917))
-- Scripts: Update webpack configuration to allow modern image format. ([43880](https://github.com/WordPress/gutenberg/pull/43880))
+
+-   Update unstaged documentation error message. ([43953](https://github.com/WordPress/gutenberg/pull/43953))
+-   Scripts: Change webpack configuration to include `render` files in the build folder. ([43917](https://github.com/WordPress/gutenberg/pull/43917))
+-   Scripts: Update webpack configuration to allow modern image format. ([43880](https://github.com/WordPress/gutenberg/pull/43880))
 
 #### Testing
-- Draggable block tests: Click block inserter instead of pressing Enter key. ([43734](https://github.com/WordPress/gutenberg/pull/43734))
+
+-   Draggable block tests: Click block inserter instead of pressing Enter key. ([43734](https://github.com/WordPress/gutenberg/pull/43734))
 
 #### Document Settings
-- Display pretty permalink for draft posts. ([43600](https://github.com/WordPress/gutenberg/pull/43600))
+
+-   Display pretty permalink for draft posts. ([43600](https://github.com/WordPress/gutenberg/pull/43600))
 
 #### Themes
-- Add cite to theme.json elements. ([43543](https://github.com/WordPress/gutenberg/pull/43543))
-- Block-based template parts for Classic themes. ([42729](https://github.com/WordPress/gutenberg/pull/42729))
-- Post Featured Image block: Enable gradient overlay. ([43838](https://github.com/WordPress/gutenberg/pull/43838))
+
+-   Add cite to theme.json elements. ([43543](https://github.com/WordPress/gutenberg/pull/43543))
+-   Block-based template parts for Classic themes. ([42729](https://github.com/WordPress/gutenberg/pull/42729))
+-   Post Featured Image block: Enable gradient overlay. ([43838](https://github.com/WordPress/gutenberg/pull/43838))
 
 #### Site Editor
-- Archive-PostType template UI. ([42746](https://github.com/WordPress/gutenberg/pull/42746))
-- New archive-$postType templates get proper fallback content. ([43603](https://github.com/WordPress/gutenberg/pull/43603))
-- Template for specific category: Only load posts from that category in post template block. ([43699](https://github.com/WordPress/gutenberg/pull/43699))
 
+-   Archive-PostType template UI. ([42746](https://github.com/WordPress/gutenberg/pull/42746))
+-   New archive-$postType templates get proper fallback content. ([43603](https://github.com/WordPress/gutenberg/pull/43603))
+-   Template for specific category: Only load posts from that category in post template block. ([43699](https://github.com/WordPress/gutenberg/pull/43699))
 
 ### New APIs
 
 #### Block Library
-- Add filter for inner blocks in the Navigation block. ([37998](https://github.com/WordPress/gutenberg/pull/37998))
-- Make it possible to import individual blocks. ([42258](https://github.com/WordPress/gutenberg/pull/42258))
+
+-   Add filter for inner blocks in the Navigation block. ([37998](https://github.com/WordPress/gutenberg/pull/37998))
+-   Make it possible to import individual blocks. ([42258](https://github.com/WordPress/gutenberg/pull/42258))
 
 #### Extensibility
-- Add a filter to `build_query_vars_from_query_block`. ([43590](https://github.com/WordPress/gutenberg/pull/43590))
+
+-   Add a filter to `build_query_vars_from_query_block`. ([43590](https://github.com/WordPress/gutenberg/pull/43590))
 
 #### Block API
-- Blocks: Add new `render` field to `block.json`. ([42430](https://github.com/WordPress/gutenberg/pull/42430))
-
-
-### Bug Fixes
-
-#### Block Library
-- Code Block: Fix duplicate background color. ([43599](https://github.com/WordPress/gutenberg/pull/43599))
-- File Block: Remove i18n from save function. ([43050](https://github.com/WordPress/gutenberg/pull/43050))
-- Fix block switcher preview scrollbar. ([44079](https://github.com/WordPress/gutenberg/pull/44079))
-- Fix block transform preview height. ([44076](https://github.com/WordPress/gutenberg/pull/44076))
-- Fix duplicate navigation block props. ([43596](https://github.com/WordPress/gutenberg/pull/43596))
-- Fix error in useClientWidth. ([43585](https://github.com/WordPress/gutenberg/pull/43585))
-- Fix site editor toolbar when block is bigger than viewport. ([43548](https://github.com/WordPress/gutenberg/pull/43548))
-- Fix the default icon for the navigation block. ([44104](https://github.com/WordPress/gutenberg/pull/44104))
-- Fix: Site logo rounded on mobile. ([43903](https://github.com/WordPress/gutenberg/pull/43903))
-- Fix: Site logo rounded. ([43762](https://github.com/WordPress/gutenberg/pull/43762))
-- Group: Fix click-first state. ([43513](https://github.com/WordPress/gutenberg/pull/43513))
-- Image: Display upload error notices using snackbars. ([43767](https://github.com/WordPress/gutenberg/pull/43767))
-- List: Add cut clipboard handler. ([43609](https://github.com/WordPress/gutenberg/pull/43609))
-- Navigation: Add current-menu-item also for archive links. ([43800](https://github.com/WordPress/gutenberg/pull/43800))
-- Navigation: Hide overlay preview settings when the overlay is off. ([44032](https://github.com/WordPress/gutenberg/pull/44032))
-- Navigation: Remove unneeded gap:Inherit rule on wrapper element of navigation block. ([43669](https://github.com/WordPress/gutenberg/pull/43669))
-- Post Terms: Use unbound query in the usePostTerms hook. ([43501](https://github.com/WordPress/gutenberg/pull/43501))
-- Site Logo: Fix border radius regression. ([43701](https://github.com/WordPress/gutenberg/pull/43701))
-- Fix cover flex issue in the editor. ([43413](https://github.com/WordPress/gutenberg/pull/43413))
-- Fix embed iframe sizing issue. ([40213](https://github.com/WordPress/gutenberg/pull/40213))
-- Update: Make it possible to change list items even if parent is template locked. ([43959](https://github.com/WordPress/gutenberg/pull/43959))
-- Latest Posts categories settings. ([43685](https://github.com/WordPress/gutenberg/pull/43685))
-- navigation block: Fix empty site-log `li` element in the dom. ([44049](https://github.com/WordPress/gutenberg/pull/44049))
-
-#### Global Styles
-- Block editor: Move margins to theme.scss and common.scss. ([43813](https://github.com/WordPress/gutenberg/pull/43813))
-- Don't apply root padding to nested layout blocks. ([43842](https://github.com/WordPress/gutenberg/pull/43842))
-- Duotone palette doesn't reflect settings in theme.json. ([43671](https://github.com/WordPress/gutenberg/pull/43671))
-- Fixing broken layout styles for themes using theme.json settings on blocks that require layout styles. ([43925](https://github.com/WordPress/gutenberg/pull/43925))
-- Layout: Fix issue with fallback gap styles where gap was being output for constrained layout type. ([44001](https://github.com/WordPress/gutenberg/pull/44001))
-- Remove main content layout padding in preview. ([43601](https://github.com/WordPress/gutenberg/pull/43601))
-- Split root layout rules into a different function. ([43792](https://github.com/WordPress/gutenberg/pull/43792))
-
-#### Components
-- Button, Icon: Fix iconSize prop doesn't work with some icons. ([43821](https://github.com/WordPress/gutenberg/pull/43821))
-- Flex: Remove flex `gap` polyfill. ([43995](https://github.com/WordPress/gutenberg/pull/43995))
-- Popover: Enable auto-updating every animation frame. ([43617](https://github.com/WordPress/gutenberg/pull/43617))
-- Popover: Make more reactive to prop changes, avoid unnecessary updates. ([43335](https://github.com/WordPress/gutenberg/pull/43335))
-- Site editor: Fix padding and margin visualizer positioning. ([43971](https://github.com/WordPress/gutenberg/pull/43971))
-- `Disabled`: Preserve input values when toggling the `isDisabled` prop. ([43508](https://github.com/WordPress/gutenberg/pull/43508))
-
-#### Block Editor
-- BlockInspector, ComplementaryArea: Fix overscoped `p` style. ([43866](https://github.com/WordPress/gutenberg/pull/43866))
-- Column Block: Enable global template_lock inheritance. ([42677](https://github.com/WordPress/gutenberg/pull/42677))
-- Fix blank screen on templates page. ([43602](https://github.com/WordPress/gutenberg/pull/43602))
-- Fix the horizontal block list drop indicator when dragging to the start. ([43944](https://github.com/WordPress/gutenberg/pull/43944))
-- Fix: Block styles preview is not displayed. ([43837](https://github.com/WordPress/gutenberg/pull/43837))
-- Fix: Non boolean usage on react output. ([43919](https://github.com/WordPress/gutenberg/pull/43919))
-- hasContentRoleAttribute: Check that block type exists. ([43864](https://github.com/WordPress/gutenberg/pull/43864))
-- Improve Safari text-selection style. ([43313](https://github.com/WordPress/gutenberg/pull/43313))
-- Prevent the default browser behaviour for dropped files from running. ([43493](https://github.com/WordPress/gutenberg/pull/43493))
-- RTL fix for inlined block-styles. ([41762](https://github.com/WordPress/gutenberg/pull/41762))
-- Spacing presets: fix bug with unlinked not applying if non int slugs used.  ([44136](https://github.com/WordPress/gutenberg/pull/44136))
+
+-   Blocks: Add new `render` field to `block.json`. ([42430](https://github.com/WordPress/gutenberg/pull/42430))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Code Block: Fix duplicate background color. ([43599](https://github.com/WordPress/gutenberg/pull/43599))
+-   File Block: Remove i18n from save function. ([43050](https://github.com/WordPress/gutenberg/pull/43050))
+-   Fix block switcher preview scrollbar. ([44079](https://github.com/WordPress/gutenberg/pull/44079))
+-   Fix block transform preview height. ([44076](https://github.com/WordPress/gutenberg/pull/44076))
+-   Fix duplicate navigation block props. ([43596](https://github.com/WordPress/gutenberg/pull/43596))
+-   Fix error in useClientWidth. ([43585](https://github.com/WordPress/gutenberg/pull/43585))
+-   Fix site editor toolbar when block is bigger than viewport. ([43548](https://github.com/WordPress/gutenberg/pull/43548))
+-   Fix the default icon for the navigation block. ([44104](https://github.com/WordPress/gutenberg/pull/44104))
+-   Fix: Site logo rounded on mobile. ([43903](https://github.com/WordPress/gutenberg/pull/43903))
+-   Fix: Site logo rounded. ([43762](https://github.com/WordPress/gutenberg/pull/43762))
+-   Group: Fix click-first state. ([43513](https://github.com/WordPress/gutenberg/pull/43513))
+-   Image: Display upload error notices using snackbars. ([43767](https://github.com/WordPress/gutenberg/pull/43767))
+-   List: Add cut clipboard handler. ([43609](https://github.com/WordPress/gutenberg/pull/43609))
+-   Navigation: Add current-menu-item also for archive links. ([43800](https://github.com/WordPress/gutenberg/pull/43800))
+-   Navigation: Hide overlay preview settings when the overlay is off. ([44032](https://github.com/WordPress/gutenberg/pull/44032))
+-   Navigation: Remove unneeded gap:Inherit rule on wrapper element of navigation block. ([43669](https://github.com/WordPress/gutenberg/pull/43669))
+-   Post Terms: Use unbound query in the usePostTerms hook. ([43501](https://github.com/WordPress/gutenberg/pull/43501))
+-   Site Logo: Fix border radius regression. ([43701](https://github.com/WordPress/gutenberg/pull/43701))
+-   Fix cover flex issue in the editor. ([43413](https://github.com/WordPress/gutenberg/pull/43413))
+-   Fix embed iframe sizing issue. ([40213](https://github.com/WordPress/gutenberg/pull/40213))
+-   Update: Make it possible to change list items even if parent is template locked. ([43959](https://github.com/WordPress/gutenberg/pull/43959))
+-   Latest Posts categories settings. ([43685](https://github.com/WordPress/gutenberg/pull/43685))
+-   navigation block: Fix empty site-log `li` element in the dom. ([44049](https://github.com/WordPress/gutenberg/pull/44049))
+
+#### Global Styles
+
+-   Block editor: Move margins to theme.scss and common.scss. ([43813](https://github.com/WordPress/gutenberg/pull/43813))
+-   Don't apply root padding to nested layout blocks. ([43842](https://github.com/WordPress/gutenberg/pull/43842))
+-   Duotone palette doesn't reflect settings in theme.json. ([43671](https://github.com/WordPress/gutenberg/pull/43671))
+-   Fixing broken layout styles for themes using theme.json settings on blocks that require layout styles. ([43925](https://github.com/WordPress/gutenberg/pull/43925))
+-   Layout: Fix issue with fallback gap styles where gap was being output for constrained layout type. ([44001](https://github.com/WordPress/gutenberg/pull/44001))
+-   Remove main content layout padding in preview. ([43601](https://github.com/WordPress/gutenberg/pull/43601))
+-   Split root layout rules into a different function. ([43792](https://github.com/WordPress/gutenberg/pull/43792))
+
+#### Components
+
+-   Button, Icon: Fix iconSize prop doesn't work with some icons. ([43821](https://github.com/WordPress/gutenberg/pull/43821))
+-   Flex: Remove flex `gap` polyfill. ([43995](https://github.com/WordPress/gutenberg/pull/43995))
+-   Popover: Enable auto-updating every animation frame. ([43617](https://github.com/WordPress/gutenberg/pull/43617))
+-   Popover: Make more reactive to prop changes, avoid unnecessary updates. ([43335](https://github.com/WordPress/gutenberg/pull/43335))
+-   Site editor: Fix padding and margin visualizer positioning. ([43971](https://github.com/WordPress/gutenberg/pull/43971))
+-   `Disabled`: Preserve input values when toggling the `isDisabled` prop. ([43508](https://github.com/WordPress/gutenberg/pull/43508))
+
+#### Block Editor
+
+-   BlockInspector, ComplementaryArea: Fix overscoped `p` style. ([43866](https://github.com/WordPress/gutenberg/pull/43866))
+-   Column Block: Enable global template_lock inheritance. ([42677](https://github.com/WordPress/gutenberg/pull/42677))
+-   Fix blank screen on templates page. ([43602](https://github.com/WordPress/gutenberg/pull/43602))
+-   Fix the horizontal block list drop indicator when dragging to the start. ([43944](https://github.com/WordPress/gutenberg/pull/43944))
+-   Fix: Block styles preview is not displayed. ([43837](https://github.com/WordPress/gutenberg/pull/43837))
+-   Fix: Non boolean usage on react output. ([43919](https://github.com/WordPress/gutenberg/pull/43919))
+-   hasContentRoleAttribute: Check that block type exists. ([43864](https://github.com/WordPress/gutenberg/pull/43864))
+-   Improve Safari text-selection style. ([43313](https://github.com/WordPress/gutenberg/pull/43313))
+-   Prevent the default browser behaviour for dropped files from running. ([43493](https://github.com/WordPress/gutenberg/pull/43493))
+-   RTL fix for inlined block-styles. ([41762](https://github.com/WordPress/gutenberg/pull/41762))
+-   Spacing presets: fix bug with unlinked not applying if non int slugs used. ([44136](https://github.com/WordPress/gutenberg/pull/44136))
 
 #### Design Tools
-- Fix display of width controls for legacy layouts. ([43688](https://github.com/WordPress/gutenberg/pull/43688))
-- FontFamily: Fix server-side attribute registration via typography support. ([43937](https://github.com/WordPress/gutenberg/pull/43937))
-- Layout: Fix blockGap output when using a falsy 0 value. ([43757](https://github.com/WordPress/gutenberg/pull/43757))
-- Layout: Fix toggling off inner blocks content width setting for legacy markup. ([43888](https://github.com/WordPress/gutenberg/pull/43888))
+
+-   Fix display of width controls for legacy layouts. ([43688](https://github.com/WordPress/gutenberg/pull/43688))
+-   FontFamily: Fix server-side attribute registration via typography support. ([43937](https://github.com/WordPress/gutenberg/pull/43937))
+-   Layout: Fix blockGap output when using a falsy 0 value. ([43757](https://github.com/WordPress/gutenberg/pull/43757))
+-   Layout: Fix toggling off inner blocks content width setting for legacy markup. ([43888](https://github.com/WordPress/gutenberg/pull/43888))
 
 #### Testing
-- Fix asserting Post Format without opening the document settings sidebar. ([43710](https://github.com/WordPress/gutenberg/pull/43710))
-- Fix clicking on top of the publish panel in meta box end-to-end test. ([43708](https://github.com/WordPress/gutenberg/pull/43708))
-- Fix playwright's `openDocumentSettingsSidebar` util not opening the sidebar. ([43506](https://github.com/WordPress/gutenberg/pull/43506))
+
+-   Fix asserting Post Format without opening the document settings sidebar. ([43710](https://github.com/WordPress/gutenberg/pull/43710))
+-   Fix clicking on top of the publish panel in meta box end-to-end test. ([43708](https://github.com/WordPress/gutenberg/pull/43708))
+-   Fix playwright's `openDocumentSettingsSidebar` util not opening the sidebar. ([43506](https://github.com/WordPress/gutenberg/pull/43506))
 
 #### Accessibility
-- Better handling of loading states for navigation selector. ([43904](https://github.com/WordPress/gutenberg/pull/43904))
-- Limit contrast checker to only blocks that have at least one color defined. ([43592](https://github.com/WordPress/gutenberg/pull/43592))
+
+-   Better handling of loading states for navigation selector. ([43904](https://github.com/WordPress/gutenberg/pull/43904))
+-   Limit contrast checker to only blocks that have at least one color defined. ([43592](https://github.com/WordPress/gutenberg/pull/43592))
 
 #### Style Variations
-- Styles API: Fixed selectors for nested elements. ([43988](https://github.com/WordPress/gutenberg/pull/43988))
+
+-   Styles API: Fixed selectors for nested elements. ([43988](https://github.com/WordPress/gutenberg/pull/43988))
 
 #### Typography
-- Font size picker: Add a fallback for the name property. ([43794](https://github.com/WordPress/gutenberg/pull/43794))
+
+-   Font size picker: Add a fallback for the name property. ([43794](https://github.com/WordPress/gutenberg/pull/43794))
 
 #### Post Editor
-- Editor: Simplify 'findOrCreateTerm' method logic. ([43766](https://github.com/WordPress/gutenberg/pull/43766))
-- Fix the style settings from core/post-content block in theme.json that are not applied in the editor. ([42270](https://github.com/WordPress/gutenberg/pull/42270))
+
+-   Editor: Simplify 'findOrCreateTerm' method logic. ([43766](https://github.com/WordPress/gutenberg/pull/43766))
+-   Fix the style settings from core/post-content block in theme.json that are not applied in the editor. ([42270](https://github.com/WordPress/gutenberg/pull/42270))
 
 #### Site Editor
-- Site Editor: Fix focus outline cut off in code editor. ([42980](https://github.com/WordPress/gutenberg/pull/42980))
+
+-   Site Editor: Fix focus outline cut off in code editor. ([42980](https://github.com/WordPress/gutenberg/pull/42980))
 
 #### Templates API
-- Block Templates: Add the custom templates info for the template posts. ([43597](https://github.com/WordPress/gutenberg/pull/43597))
+
+-   Block Templates: Add the custom templates info for the template posts. ([43597](https://github.com/WordPress/gutenberg/pull/43597))
 
 #### Build Tooling
-- Makepot: Fix translations object handling. ([43797](https://github.com/WordPress/gutenberg/pull/43797))
 
+-   Makepot: Fix translations object handling. ([43797](https://github.com/WordPress/gutenberg/pull/43797))
 
 ### Performance
 
 #### Block Library
-- Comments Pagination: Avoid creating a new allowedBlocks array on every render. ([44021](https://github.com/WordPress/gutenberg/pull/44021))
-- Lodash: Refactor away from `_.first()` and `_.last()`. ([43894](https://github.com/WordPress/gutenberg/pull/43894))
-- Lodash: Remove _`.omit()` from block library. ([43707](https://github.com/WordPress/gutenberg/pull/43707))
-- Query Pagination: Avoid creating a new allowedBlocks array on every render. ([44020](https://github.com/WordPress/gutenberg/pull/44020))
-- Query by name. ([43850](https://github.com/WordPress/gutenberg/pull/43850))
+
+-   Comments Pagination: Avoid creating a new allowedBlocks array on every render. ([44021](https://github.com/WordPress/gutenberg/pull/44021))
+-   Lodash: Refactor away from `_.first()` and `_.last()`. ([43894](https://github.com/WordPress/gutenberg/pull/43894))
+-   Lodash: Remove \_`.omit()` from block library. ([43707](https://github.com/WordPress/gutenberg/pull/43707))
+-   Query Pagination: Avoid creating a new allowedBlocks array on every render. ([44020](https://github.com/WordPress/gutenberg/pull/44020))
+-   Query by name. ([43850](https://github.com/WordPress/gutenberg/pull/43850))
 
 #### Components
-- Lodash: Refactor away from `_.cloneDeep()`. ([43631](https://github.com/WordPress/gutenberg/pull/43631))
-- Lodash: Refactor away from `_.partial()`. ([43895](https://github.com/WordPress/gutenberg/pull/43895))
-- Lodash: Remove from `FormTokenField` component. ([43744](https://github.com/WordPress/gutenberg/pull/43744))
+
+-   Lodash: Refactor away from `_.cloneDeep()`. ([43631](https://github.com/WordPress/gutenberg/pull/43631))
+-   Lodash: Refactor away from `_.partial()`. ([43895](https://github.com/WordPress/gutenberg/pull/43895))
+-   Lodash: Remove from `FormTokenField` component. ([43744](https://github.com/WordPress/gutenberg/pull/43744))
 
 #### Data Layer
-- Lodash: Refactor away from `_.forEach()`. ([43807](https://github.com/WordPress/gutenberg/pull/43807))
-- Lodash: Refactor away from `_.has()`. ([43626](https://github.com/WordPress/gutenberg/pull/43626))
-- Lodash: Remove `_.omit()` from `@wordpress/data`. ([43712](https://github.com/WordPress/gutenberg/pull/43712))
+
+-   Lodash: Refactor away from `_.forEach()`. ([43807](https://github.com/WordPress/gutenberg/pull/43807))
+-   Lodash: Refactor away from `_.has()`. ([43626](https://github.com/WordPress/gutenberg/pull/43626))
+-   Lodash: Remove `_.omit()` from `@wordpress/data`. ([43712](https://github.com/WordPress/gutenberg/pull/43712))
 
 #### Post Editor
-- Lodash: Refactor away from `_.unionBy()`. ([43735](https://github.com/WordPress/gutenberg/pull/43735))
-- Lodash: Remove `_.omit()` from a few other packages. ([43714](https://github.com/WordPress/gutenberg/pull/43714))
+
+-   Lodash: Refactor away from `_.unionBy()`. ([43735](https://github.com/WordPress/gutenberg/pull/43735))
+-   Lodash: Remove `_.omit()` from a few other packages. ([43714](https://github.com/WordPress/gutenberg/pull/43714))
 
 #### Testing
-- Updates the content we use for performance testing. ([43770](https://github.com/WordPress/gutenberg/pull/43770))
+
+-   Updates the content we use for performance testing. ([43770](https://github.com/WordPress/gutenberg/pull/43770))
 
 #### Widgets Editor
-- Lodash: Remove completely from `@wordpress/edit-widgets` package. ([43682](https://github.com/WordPress/gutenberg/pull/43682))
+
+-   Lodash: Remove completely from `@wordpress/edit-widgets` package. ([43682](https://github.com/WordPress/gutenberg/pull/43682))
 
 #### Block Editor
-- Lodash: Remove from blocks API raw handling. ([43575](https://github.com/WordPress/gutenberg/pull/43575))
-- Lodash: Refactor away from `BlockActionsMenu` (RN). ([43849](https://github.com/WordPress/gutenberg/pull/43849))
-- Lodash: Refactor away from `BlockActions`. ([43846](https://github.com/WordPress/gutenberg/pull/43846))
-- Lodash: Refactor away from `BlockMover`. ([43853](https://github.com/WordPress/gutenberg/pull/43853))
-- Lodash: Refactor away from `useFocusFirstElement`. ([43847](https://github.com/WordPress/gutenberg/pull/43847))
-- Lodash: Remove `_.first()` and `_.last()` from block editor store. ([43854](https://github.com/WordPress/gutenberg/pull/43854))
-- Lodash: Remove `_.first()` and `_.last()` from block tools and `useSelectAll` hook. ([43855](https://github.com/WordPress/gutenberg/pull/43855))
-- Lodash: Remove `_.omit()` from block editor. ([43704](https://github.com/WordPress/gutenberg/pull/43704))
+
+-   Lodash: Remove from blocks API raw handling. ([43575](https://github.com/WordPress/gutenberg/pull/43575))
+-   Lodash: Refactor away from `BlockActionsMenu` (RN). ([43849](https://github.com/WordPress/gutenberg/pull/43849))
+-   Lodash: Refactor away from `BlockActions`. ([43846](https://github.com/WordPress/gutenberg/pull/43846))
+-   Lodash: Refactor away from `BlockMover`. ([43853](https://github.com/WordPress/gutenberg/pull/43853))
+-   Lodash: Refactor away from `useFocusFirstElement`. ([43847](https://github.com/WordPress/gutenberg/pull/43847))
+-   Lodash: Remove `_.first()` and `_.last()` from block editor store. ([43854](https://github.com/WordPress/gutenberg/pull/43854))
+-   Lodash: Remove `_.first()` and `_.last()` from block tools and `useSelectAll` hook. ([43855](https://github.com/WordPress/gutenberg/pull/43855))
+-   Lodash: Remove `_.omit()` from block editor. ([43704](https://github.com/WordPress/gutenberg/pull/43704))
 
 #### REST API
-- Core Data: Stop sending duplicate requests in canUser resolver. ([43480](https://github.com/WordPress/gutenberg/pull/43480))
 
+-   Core Data: Stop sending duplicate requests in canUser resolver. ([43480](https://github.com/WordPress/gutenberg/pull/43480))
 
 ### Documentation
 
-- Add documentation for the block template parts theme support. ([44009](https://github.com/WordPress/gutenberg/pull/44009))
-- Adding instructions for adding sub-pages to packages documentation. ([43750](https://github.com/WordPress/gutenberg/pull/43750))
-- Create a new handbook page for propagating updates. ([43538](https://github.com/WordPress/gutenberg/pull/43538))
-- Create Block: Split documentation into two sections. ([43718](https://github.com/WordPress/gutenberg/pull/43718))
-- Docgen: Add basic handling for the `@since` tag. ([43550](https://github.com/WordPress/gutenberg/pull/43550))
-- Docs: Add example of BlockControls to Format API how to guide. ([43581](https://github.com/WordPress/gutenberg/pull/43581))
-- Docs: Fix required status of `onSelectUrl` prop of `MediaReplaceFlow` component. ([44025](https://github.com/WordPress/gutenberg/pull/44025))
-- Document new global styles filters. ([44111](https://github.com/WordPress/gutenberg/pull/44111))
-- Document template_lock=noContent for Custom Post Types. ([43977](https://github.com/WordPress/gutenberg/pull/43977))
-- InnerBlocks: document that `templateLock:NoContent` cannot be overriden by children. ([43825](https://github.com/WordPress/gutenberg/pull/43825))
-- Theme.json: Add default values for settings.spacing.spacingScale. ([43860](https://github.com/WordPress/gutenberg/pull/43860))
-- Theme.json: Fix schema for useRootPaddingAwareAlignments. ([43628](https://github.com/WordPress/gutenberg/pull/43628))
-- Typography block supports: Call tear_down in tests and format PHP doc blocks. ([43968](https://github.com/WordPress/gutenberg/pull/43968))
-- Update a broken link to the format-api example. ([44058](https://github.com/WordPress/gutenberg/pull/44058))
-- Update playwright end-to-end utils readme. ([44016](https://github.com/WordPress/gutenberg/pull/44016))
-- Updated the "Create your First App with Gutenberg Data" how-to guide. ([43633](https://github.com/WordPress/gutenberg/pull/43633))
-- Add select icon for Navigation Block's menu button. ([43674](https://github.com/WordPress/gutenberg/pull/43674))
-- Style engine: pre-core migration documentation and house keeping. ([43840](https://github.com/WordPress/gutenberg/pull/43840))
-- Fix JSON syntax issues in theme.json examples. ([43828](https://github.com/WordPress/gutenberg/pull/43828))
+-   Add documentation for the block template parts theme support. ([44009](https://github.com/WordPress/gutenberg/pull/44009))
+-   Adding instructions for adding sub-pages to packages documentation. ([43750](https://github.com/WordPress/gutenberg/pull/43750))
+-   Create a new handbook page for propagating updates. ([43538](https://github.com/WordPress/gutenberg/pull/43538))
+-   Create Block: Split documentation into two sections. ([43718](https://github.com/WordPress/gutenberg/pull/43718))
+-   Docgen: Add basic handling for the `@since` tag. ([43550](https://github.com/WordPress/gutenberg/pull/43550))
+-   Docs: Add example of BlockControls to Format API how to guide. ([43581](https://github.com/WordPress/gutenberg/pull/43581))
+-   Docs: Fix required status of `onSelectUrl` prop of `MediaReplaceFlow` component. ([44025](https://github.com/WordPress/gutenberg/pull/44025))
+-   Document new global styles filters. ([44111](https://github.com/WordPress/gutenberg/pull/44111))
+-   Document template_lock=noContent for Custom Post Types. ([43977](https://github.com/WordPress/gutenberg/pull/43977))
+-   InnerBlocks: document that `templateLock:NoContent` cannot be overridden by children. ([43825](https://github.com/WordPress/gutenberg/pull/43825))
+-   Theme.json: Add default values for settings.spacing.spacingScale. ([43860](https://github.com/WordPress/gutenberg/pull/43860))
+-   Theme.json: Fix schema for useRootPaddingAwareAlignments. ([43628](https://github.com/WordPress/gutenberg/pull/43628))
+-   Typography block supports: Call tear_down in tests and format PHP doc blocks. ([43968](https://github.com/WordPress/gutenberg/pull/43968))
+-   Update a broken link to the format-api example. ([44058](https://github.com/WordPress/gutenberg/pull/44058))
+-   Update playwright end-to-end utils readme. ([44016](https://github.com/WordPress/gutenberg/pull/44016))
+-   Updated the "Create your First App with Gutenberg Data" how-to guide. ([43633](https://github.com/WordPress/gutenberg/pull/43633))
+-   Add select icon for Navigation Block's menu button. ([43674](https://github.com/WordPress/gutenberg/pull/43674))
+-   Style engine: pre-core migration documentation and house keeping. ([43840](https://github.com/WordPress/gutenberg/pull/43840))
+-   Fix JSON syntax issues in theme.json examples. ([43828](https://github.com/WordPress/gutenberg/pull/43828))
 
 ### Code Quality
 
 #### Components
 
-- AnglePickerControl: Deprecate margin bottom. ([43867](https://github.com/WordPress/gutenberg/pull/43867))
-- CheckboxControl: Add flag to remove bottom margin. ([43720](https://github.com/WordPress/gutenberg/pull/43720))
-- ComboboxControl: Add unit tests. ([42403](https://github.com/WordPress/gutenberg/pull/42403))
-- DateTimePicker: Address feedback after recent refactor to `date-fns` and `use-lilius`. ([43495](https://github.com/WordPress/gutenberg/pull/43495))
-- DropZone: Convert to TypeScript. ([43962](https://github.com/WordPress/gutenberg/pull/43962))
-- Fix TS types for `isValueDefined()`/`isValueEmpty()`. ([43983](https://github.com/WordPress/gutenberg/pull/43983))
-- FocalPointControl: Add flag to remove bottom margin. ([43996](https://github.com/WordPress/gutenberg/pull/43996))
-- FocalPointPicker: Convert to TypeScript. ([43872](https://github.com/WordPress/gutenberg/pull/43872))
-- FontSizePicker: Deprecate bottom margin. ([43870](https://github.com/WordPress/gutenberg/pull/43870))
-- FormFileUpload: Convert to TypeScript. ([43960](https://github.com/WordPress/gutenberg/pull/43960))
-- Invert tsconfig to be exclude-based. ([43534](https://github.com/WordPress/gutenberg/pull/43534))
-- Lodash: Refactor away from `_.escapeRegExp()`. ([43629](https://github.com/WordPress/gutenberg/pull/43629))
-- Lodash: Remove from block factory API. ([43560](https://github.com/WordPress/gutenberg/pull/43560))
-- Lodash: Remove from block registration API. ([43558](https://github.com/WordPress/gutenberg/pull/43558))
-- Lodash: Remove from block serializer API. ([43561](https://github.com/WordPress/gutenberg/pull/43561))
-- Lodash: Remove from block templates API. ([43563](https://github.com/WordPress/gutenberg/pull/43563))
-- Make more components pass type checks. ([43579](https://github.com/WordPress/gutenberg/pull/43579))
-- RadioControl: Clean up CSS. ([43868](https://github.com/WordPress/gutenberg/pull/43868))
-- Remove unused normalizeArrowKey utility function. ([43640](https://github.com/WordPress/gutenberg/pull/43640))
-- Remove unused Storybook utils. ([43578](https://github.com/WordPress/gutenberg/pull/43578))
-- Retire `DARK_GRAY` colors. ([43773](https://github.com/WordPress/gutenberg/pull/43773))
-- Retire `LIGHT_GRAY[ 200 ]` and `DARK_GRAY[ 150 ]`. ([43719](https://github.com/WordPress/gutenberg/pull/43719))
-- Retire `LIGHT_GRAY` color object. ([43994](https://github.com/WordPress/gutenberg/pull/43994))
-- SearchControl: Convert to TypeScript and add flag to remove bottom margin. ([43871](https://github.com/WordPress/gutenberg/pull/43871))
-- Style engine: Refer to 'context' rather than 'store' in global function. ([43841](https://github.com/WordPress/gutenberg/pull/43841))
-- TabPanel: Convert to TypeScript. ([43536](https://github.com/WordPress/gutenberg/pull/43536))
-- ToggleControl: Convert to TypeScript. ([43717](https://github.com/WordPress/gutenberg/pull/43717))
-- WordPressComponentProps: Only add refs when they are actually added. ([43610](https://github.com/WordPress/gutenberg/pull/43610))
-- Refactor `Icon` tests to `@testing-library/react`. ([44051](https://github.com/WordPress/gutenberg/pull/44051))
-- Refactor `IsolatedEventContainer` tests to `@testing-library/react`. ([44073](https://github.com/WordPress/gutenberg/pull/44073))
-- Refactor `KeyboardShortcuts` tests to `@testing-library/react`. ([44075](https://github.com/WordPress/gutenberg/pull/44075))
-- NUX: Refactor `DotTip` tests to `@testing-library/react`. ([43768](https://github.com/WordPress/gutenberg/pull/43768))
+-   AnglePickerControl: Deprecate margin bottom. ([43867](https://github.com/WordPress/gutenberg/pull/43867))
+-   CheckboxControl: Add flag to remove bottom margin. ([43720](https://github.com/WordPress/gutenberg/pull/43720))
+-   ComboboxControl: Add unit tests. ([42403](https://github.com/WordPress/gutenberg/pull/42403))
+-   DateTimePicker: Address feedback after recent refactor to `date-fns` and `use-lilius`. ([43495](https://github.com/WordPress/gutenberg/pull/43495))
+-   DropZone: Convert to TypeScript. ([43962](https://github.com/WordPress/gutenberg/pull/43962))
+-   Fix TS types for `isValueDefined()`/`isValueEmpty()`. ([43983](https://github.com/WordPress/gutenberg/pull/43983))
+-   FocalPointControl: Add flag to remove bottom margin. ([43996](https://github.com/WordPress/gutenberg/pull/43996))
+-   FocalPointPicker: Convert to TypeScript. ([43872](https://github.com/WordPress/gutenberg/pull/43872))
+-   FontSizePicker: Deprecate bottom margin. ([43870](https://github.com/WordPress/gutenberg/pull/43870))
+-   FormFileUpload: Convert to TypeScript. ([43960](https://github.com/WordPress/gutenberg/pull/43960))
+-   Invert tsconfig to be exclude-based. ([43534](https://github.com/WordPress/gutenberg/pull/43534))
+-   Lodash: Refactor away from `_.escapeRegExp()`. ([43629](https://github.com/WordPress/gutenberg/pull/43629))
+-   Lodash: Remove from block factory API. ([43560](https://github.com/WordPress/gutenberg/pull/43560))
+-   Lodash: Remove from block registration API. ([43558](https://github.com/WordPress/gutenberg/pull/43558))
+-   Lodash: Remove from block serializer API. ([43561](https://github.com/WordPress/gutenberg/pull/43561))
+-   Lodash: Remove from block templates API. ([43563](https://github.com/WordPress/gutenberg/pull/43563))
+-   Make more components pass type checks. ([43579](https://github.com/WordPress/gutenberg/pull/43579))
+-   RadioControl: Clean up CSS. ([43868](https://github.com/WordPress/gutenberg/pull/43868))
+-   Remove unused normalizeArrowKey utility function. ([43640](https://github.com/WordPress/gutenberg/pull/43640))
+-   Remove unused Storybook utils. ([43578](https://github.com/WordPress/gutenberg/pull/43578))
+-   Retire `DARK_GRAY` colors. ([43773](https://github.com/WordPress/gutenberg/pull/43773))
+-   Retire `LIGHT_GRAY[ 200 ]` and `DARK_GRAY[ 150 ]`. ([43719](https://github.com/WordPress/gutenberg/pull/43719))
+-   Retire `LIGHT_GRAY` color object. ([43994](https://github.com/WordPress/gutenberg/pull/43994))
+-   SearchControl: Convert to TypeScript and add flag to remove bottom margin. ([43871](https://github.com/WordPress/gutenberg/pull/43871))
+-   Style engine: Refer to 'context' rather than 'store' in global function. ([43841](https://github.com/WordPress/gutenberg/pull/43841))
+-   TabPanel: Convert to TypeScript. ([43536](https://github.com/WordPress/gutenberg/pull/43536))
+-   ToggleControl: Convert to TypeScript. ([43717](https://github.com/WordPress/gutenberg/pull/43717))
+-   WordPressComponentProps: Only add refs when they are actually added. ([43610](https://github.com/WordPress/gutenberg/pull/43610))
+-   Refactor `Icon` tests to `@testing-library/react`. ([44051](https://github.com/WordPress/gutenberg/pull/44051))
+-   Refactor `IsolatedEventContainer` tests to `@testing-library/react`. ([44073](https://github.com/WordPress/gutenberg/pull/44073))
+-   Refactor `KeyboardShortcuts` tests to `@testing-library/react`. ([44075](https://github.com/WordPress/gutenberg/pull/44075))
+-   NUX: Refactor `DotTip` tests to `@testing-library/react`. ([43768](https://github.com/WordPress/gutenberg/pull/43768))
 
 #### Compose
 
-- Refactor `pure` HoC tests to `@testing-library/react`. ([43913](https://github.com/WordPress/gutenberg/pull/43913))
-- Refactor `withInstanceId` HoC tests to `@testing-library/react`. ([43915](https://github.com/WordPress/gutenberg/pull/43915))
+-   Refactor `pure` HoC tests to `@testing-library/react`. ([43913](https://github.com/WordPress/gutenberg/pull/43913))
+-   Refactor `withInstanceId` HoC tests to `@testing-library/react`. ([43915](https://github.com/WordPress/gutenberg/pull/43915))
 
 #### Post Editor
-- Edit Post: Refactor `BrowserURL` tests to `@testing-library/react`. ([43978](https://github.com/WordPress/gutenberg/pull/43978))
-- Edit Post: Refactor `PageAttributesOrder` tests to `@testing-library/react`. ([43980](https://github.com/WordPress/gutenberg/pull/43980))
-- Refactor `PostPublishButton` tests to `@testing-library/react`. ([43909](https://github.com/WordPress/gutenberg/pull/43909))
-- Refactor `PostPublishPanel` tests to `@testing-library/react`. ([43908](https://github.com/WordPress/gutenberg/pull/43908))
-- Refactor `PostSavedState` tests to `@testing-library/react`. ([43769](https://github.com/WordPress/gutenberg/pull/43769))
-- Refactor `PostSlug` tests to `@testing-library/react`. ([43973](https://github.com/WordPress/gutenberg/pull/43973))
-- Update changelog to include a new 'isDeletingPost' selector. ([44120](https://github.com/WordPress/gutenberg/pull/44120))
-- Refactor `MetaBoxesSection` tests to `@testing-library/react`. ([43774](https://github.com/WordPress/gutenberg/pull/43774))
-- Refactor `PostPublishButtonOrToggle` tests to `@testing-library/react`. ([43776](https://github.com/WordPress/gutenberg/pull/43776))
-- Refactor `PreferencesModal` tests to `@testing-library/react`. ([43775](https://github.com/WordPress/gutenberg/pull/43775))
-- NumberControl: Add TypeScript prop types. ([43791](https://github.com/WordPress/gutenberg/pull/43791))
-- Popover: Stabilize __unstableShift prop to shift. ([43845](https://github.com/WordPress/gutenberg/pull/43845))
-
-#### Block Library
-- Button: Remove hardcoded white. ([43553](https://github.com/WordPress/gutenberg/pull/43553))
-- Categories List Block: Escape home_url(). ([43824](https://github.com/WordPress/gutenberg/pull/43824))
-- Gallery Block: Use `wp_enqueue_block_support_styles()`. ([43859](https://github.com/WordPress/gutenberg/pull/43859))
-- Post Terms: Refactor the usePostTerms hook. ([43503](https://github.com/WordPress/gutenberg/pull/43503))
-- Navigation: Use `code` instead of `keyCode` for keyboard events. ([43644](https://github.com/WordPress/gutenberg/pull/43644))
-- Create an alias get_element_class_name to use it in blocks. ([44099](https://github.com/WordPress/gutenberg/pull/44099))
-
-#### Block Editor
-
-- Refactor `AlignmentControl` tests to `@testing-library/react`. ([44022](https://github.com/WordPress/gutenberg/pull/44022))
-- Refactor `BlockAlignmentUI` tests to `@testing-library/react`. ([44023](https://github.com/WordPress/gutenberg/pull/44023))
-- Refactor `BlockEdit` tests to `@testing-library/react`. ([44027](https://github.com/WordPress/gutenberg/pull/44027))
-- Refactor `BlockIcon` tests to `@testing-library/react`. ([44089](https://github.com/WordPress/gutenberg/pull/44089))
-- Refactor `BlockTitle` tests to `@testing-library/react`. ([43811](https://github.com/WordPress/gutenberg/pull/43811))
-- Refactor `BlockVerticalAlignmentUI` tests to `@testing-library/react`. ([44029](https://github.com/WordPress/gutenberg/pull/44029))
-- Refactor `BlockView` tests to `@testing-library/react`. ([43818](https://github.com/WordPress/gutenberg/pull/43818))
-- Refactor `ComboboxControl` to pass `exhaustive-deps`. ([41417](https://github.com/WordPress/gutenberg/pull/41417))
-- Refactor `ContrastChecker` tests to `@testing-library/react`. ([43975](https://github.com/WordPress/gutenberg/pull/43975))
-- Refactor `DefaultBlockAppender` tests to `@testing-library/react`. ([43990](https://github.com/WordPress/gutenberg/pull/43990))
-- Refactor `DimensionControl` tests to `@testing-library/react`. ([43916](https://github.com/WordPress/gutenberg/pull/43916))
-- Refactor `DocumentOutline` tests to `@testing-library/react`. ([43772](https://github.com/WordPress/gutenberg/pull/43772))
-- Refactor `FocalPointPicker` to function component. ([39168](https://github.com/WordPress/gutenberg/pull/39168))
-- Refactor `MediaPlaceholder` tests to `@testing-library/react`. ([43991](https://github.com/WordPress/gutenberg/pull/43991))
-- Refactor `MenuItem` tests to `@testing-library/react`. ([43778](https://github.com/WordPress/gutenberg/pull/43778))
-- Refactor `NavigatorButton` to pass `exhaustive-deps`. ([42051](https://github.com/WordPress/gutenberg/pull/42051))
-- Refactor `NavigatorScreen` to pass `exhaustive-deps`. ([43876](https://github.com/WordPress/gutenberg/pull/43876))
-- Refactor `Panel` tests to `@testing-library/react`. ([43896](https://github.com/WordPress/gutenberg/pull/43896))
-- Refactor `PostTaxonomies` tests to `@testing-library/react`. ([44068](https://github.com/WordPress/gutenberg/pull/44068)))
-- Refactor `Slot`/`Fill` tests to `@testing-library/react`. ([44084](https://github.com/WordPress/gutenberg/pull/44084))
-- Refactor `URLInputButton` tests to `@testing-library/react`. ([43899](https://github.com/WordPress/gutenberg/pull/43899))
-- Refactor `UrlPopover` tests to `@testing-library/react`. ([43898](https://github.com/WordPress/gutenberg/pull/43898))
-- Refactor `Warning` tests to `@testing-library/react`. ([43817](https://github.com/WordPress/gutenberg/pull/43817))
-- Refactor `withColors` tests to `@testing-library/react`. ([43976](https://github.com/WordPress/gutenberg/pull/43976))
-- Refactor `withFilters` tests to `@testing-library/react`. ([44017](https://github.com/WordPress/gutenberg/pull/44017))
-- Refactor popover to use separate flip and resize props instead of forcePosition. ([43546](https://github.com/WordPress/gutenberg/pull/43546)
-- Fix: Inexistent parameter passed to parseUnitFunction. ([43920](https://github.com/WordPress/gutenberg/pull/43920))
-- Minor code tweaks/optimizations (PHP). ([43375](https://github.com/WordPress/gutenberg/pull/43375))
+
+-   Edit Post: Refactor `BrowserURL` tests to `@testing-library/react`. ([43978](https://github.com/WordPress/gutenberg/pull/43978))
+-   Edit Post: Refactor `PageAttributesOrder` tests to `@testing-library/react`. ([43980](https://github.com/WordPress/gutenberg/pull/43980))
+-   Refactor `PostPublishButton` tests to `@testing-library/react`. ([43909](https://github.com/WordPress/gutenberg/pull/43909))
+-   Refactor `PostPublishPanel` tests to `@testing-library/react`. ([43908](https://github.com/WordPress/gutenberg/pull/43908))
+-   Refactor `PostSavedState` tests to `@testing-library/react`. ([43769](https://github.com/WordPress/gutenberg/pull/43769))
+-   Refactor `PostSlug` tests to `@testing-library/react`. ([43973](https://github.com/WordPress/gutenberg/pull/43973))
+-   Update changelog to include a new 'isDeletingPost' selector. ([44120](https://github.com/WordPress/gutenberg/pull/44120))
+-   Refactor `MetaBoxesSection` tests to `@testing-library/react`. ([43774](https://github.com/WordPress/gutenberg/pull/43774))
+-   Refactor `PostPublishButtonOrToggle` tests to `@testing-library/react`. ([43776](https://github.com/WordPress/gutenberg/pull/43776))
+-   Refactor `PreferencesModal` tests to `@testing-library/react`. ([43775](https://github.com/WordPress/gutenberg/pull/43775))
+-   NumberControl: Add TypeScript prop types. ([43791](https://github.com/WordPress/gutenberg/pull/43791))
+-   Popover: Stabilize \_\_unstableShift prop to shift. ([43845](https://github.com/WordPress/gutenberg/pull/43845))
+
+#### Block Library
+
+-   Button: Remove hardcoded white. ([43553](https://github.com/WordPress/gutenberg/pull/43553))
+-   Categories List Block: Escape home_url(). ([43824](https://github.com/WordPress/gutenberg/pull/43824))
+-   Gallery Block: Use `wp_enqueue_block_support_styles()`. ([43859](https://github.com/WordPress/gutenberg/pull/43859))
+-   Post Terms: Refactor the usePostTerms hook. ([43503](https://github.com/WordPress/gutenberg/pull/43503))
+-   Navigation: Use `code` instead of `keyCode` for keyboard events. ([43644](https://github.com/WordPress/gutenberg/pull/43644))
+-   Create an alias get_element_class_name to use it in blocks. ([44099](https://github.com/WordPress/gutenberg/pull/44099))
+
+#### Block Editor
+
+-   Refactor `AlignmentControl` tests to `@testing-library/react`. ([44022](https://github.com/WordPress/gutenberg/pull/44022))
+-   Refactor `BlockAlignmentUI` tests to `@testing-library/react`. ([44023](https://github.com/WordPress/gutenberg/pull/44023))
+-   Refactor `BlockEdit` tests to `@testing-library/react`. ([44027](https://github.com/WordPress/gutenberg/pull/44027))
+-   Refactor `BlockIcon` tests to `@testing-library/react`. ([44089](https://github.com/WordPress/gutenberg/pull/44089))
+-   Refactor `BlockTitle` tests to `@testing-library/react`. ([43811](https://github.com/WordPress/gutenberg/pull/43811))
+-   Refactor `BlockVerticalAlignmentUI` tests to `@testing-library/react`. ([44029](https://github.com/WordPress/gutenberg/pull/44029))
+-   Refactor `BlockView` tests to `@testing-library/react`. ([43818](https://github.com/WordPress/gutenberg/pull/43818))
+-   Refactor `ComboboxControl` to pass `exhaustive-deps`. ([41417](https://github.com/WordPress/gutenberg/pull/41417))
+-   Refactor `ContrastChecker` tests to `@testing-library/react`. ([43975](https://github.com/WordPress/gutenberg/pull/43975))
+-   Refactor `DefaultBlockAppender` tests to `@testing-library/react`. ([43990](https://github.com/WordPress/gutenberg/pull/43990))
+-   Refactor `DimensionControl` tests to `@testing-library/react`. ([43916](https://github.com/WordPress/gutenberg/pull/43916))
+-   Refactor `DocumentOutline` tests to `@testing-library/react`. ([43772](https://github.com/WordPress/gutenberg/pull/43772))
+-   Refactor `FocalPointPicker` to function component. ([39168](https://github.com/WordPress/gutenberg/pull/39168))
+-   Refactor `MediaPlaceholder` tests to `@testing-library/react`. ([43991](https://github.com/WordPress/gutenberg/pull/43991))
+-   Refactor `MenuItem` tests to `@testing-library/react`. ([43778](https://github.com/WordPress/gutenberg/pull/43778))
+-   Refactor `NavigatorButton` to pass `exhaustive-deps`. ([42051](https://github.com/WordPress/gutenberg/pull/42051))
+-   Refactor `NavigatorScreen` to pass `exhaustive-deps`. ([43876](https://github.com/WordPress/gutenberg/pull/43876))
+-   Refactor `Panel` tests to `@testing-library/react`. ([43896](https://github.com/WordPress/gutenberg/pull/43896))
+-   Refactor `PostTaxonomies` tests to `@testing-library/react`. ([44068](https://github.com/WordPress/gutenberg/pull/44068)))
+-   Refactor `Slot`/`Fill` tests to `@testing-library/react`. ([44084](https://github.com/WordPress/gutenberg/pull/44084))
+-   Refactor `URLInputButton` tests to `@testing-library/react`. ([43899](https://github.com/WordPress/gutenberg/pull/43899))
+-   Refactor `UrlPopover` tests to `@testing-library/react`. ([43898](https://github.com/WordPress/gutenberg/pull/43898))
+-   Refactor `Warning` tests to `@testing-library/react`. ([43817](https://github.com/WordPress/gutenberg/pull/43817))
+-   Refactor `withColors` tests to `@testing-library/react`. ([43976](https://github.com/WordPress/gutenberg/pull/43976))
+-   Refactor `withFilters` tests to `@testing-library/react`. ([44017](https://github.com/WordPress/gutenberg/pull/44017))
+-   Refactor popover to use separate flip and resize props instead of forcePosition. ([43546](https://github.com/WordPress/gutenberg/pull/43546)
+-   Fix: Inexistent parameter passed to parseUnitFunction. ([43920](https://github.com/WordPress/gutenberg/pull/43920))
+-   Minor code tweaks/optimizations (PHP). ([43375](https://github.com/WordPress/gutenberg/pull/43375))
 
 #### Rich Text
-- Remove deprecated wrapperClassName prop. ([44033](https://github.com/WordPress/gutenberg/pull/44033))
+
+-   Remove deprecated wrapperClassName prop. ([44033](https://github.com/WordPress/gutenberg/pull/44033))
 
 #### Inspector Controls
-- Remove leftovers from previous iterations in block inspector. ([43806](https://github.com/WordPress/gutenberg/pull/43806))
+
+-   Remove leftovers from previous iterations in block inspector. ([43806](https://github.com/WordPress/gutenberg/pull/43806))
 
 #### Plugin
-- Remove 'gutenberg_rest_nonce' method. ([43805](https://github.com/WordPress/gutenberg/pull/43805))
+
+-   Remove 'gutenberg_rest_nonce' method. ([43805](https://github.com/WordPress/gutenberg/pull/43805))
 
 #### List View
-- ListViewBlock: Refactor to have locking data in a single place. ([43803](https://github.com/WordPress/gutenberg/pull/43803))
+
+-   ListViewBlock: Refactor to have locking data in a single place. ([43803](https://github.com/WordPress/gutenberg/pull/43803))
 
 #### npm Packages
-- Block Serialization Default Parser: Include TypeScript type declarations. ([43722](https://github.com/WordPress/gutenberg/pull/43722))
-- Lodash: Remove `_.omit()` from `@wordpress/blocks`. ([43711](https://github.com/WordPress/gutenberg/pull/43711))
-- Lodash: Remove completely from `@wordpress/format-library` package. ([43738](https://github.com/WordPress/gutenberg/pull/43738))
-- Lodash: Remove completely from `@wordpress/i18n` package. ([43677](https://github.com/WordPress/gutenberg/pull/43677))
-- Lodash: Remove completely from `@wordpress/redux-routine` package. ([43741](https://github.com/WordPress/gutenberg/pull/43741))
-- @wordpress/date: Rename __experimentalGetSettings() to getSettings(). ([43884](https://github.com/WordPress/gutenberg/pull/43884))
+
+-   Block Serialization Default Parser: Include TypeScript type declarations. ([43722](https://github.com/WordPress/gutenberg/pull/43722))
+-   Lodash: Remove `_.omit()` from `@wordpress/blocks`. ([43711](https://github.com/WordPress/gutenberg/pull/43711))
+-   Lodash: Remove completely from `@wordpress/format-library` package. ([43738](https://github.com/WordPress/gutenberg/pull/43738))
+-   Lodash: Remove completely from `@wordpress/i18n` package. ([43677](https://github.com/WordPress/gutenberg/pull/43677))
+-   Lodash: Remove completely from `@wordpress/redux-routine` package. ([43741](https://github.com/WordPress/gutenberg/pull/43741))
+-   @wordpress/date: Rename \_\_experimentalGetSettings() to getSettings(). ([43884](https://github.com/WordPress/gutenberg/pull/43884))
 
 #### Global Styles
-- Elements: Check value and whitelist before building style nodes. ([43622](https://github.com/WordPress/gutenberg/pull/43622))
-- Prepare `WP_Theme_JSON_Data` class for backporting. ([44109](https://github.com/WordPress/gutenberg/pull/44109))
-- Safeguard for backport of `get_template_hierarchy` function. ([44085](https://github.com/WordPress/gutenberg/pull/44085))
-- Format Library: Remove redundant inline link test. ([43912](https://github.com/WordPress/gutenberg/pull/43912))
-- Layout: Unit tests for gutenberg_get_layout_style. ([44006](https://github.com/WordPress/gutenberg/pull/44006))
+
+-   Elements: Check value and whitelist before building style nodes. ([43622](https://github.com/WordPress/gutenberg/pull/43622))
+-   Prepare `WP_Theme_JSON_Data` class for backporting. ([44109](https://github.com/WordPress/gutenberg/pull/44109))
+-   Safeguard for backport of `get_template_hierarchy` function. ([44085](https://github.com/WordPress/gutenberg/pull/44085))
+-   Format Library: Remove redundant inline link test. ([43912](https://github.com/WordPress/gutenberg/pull/43912))
+-   Layout: Unit tests for gutenberg_get_layout_style. ([44006](https://github.com/WordPress/gutenberg/pull/44006))
 
 #### Block Editor
-- Rich text: Remove unused unstable list functions. ([43614](https://github.com/WordPress/gutenberg/pull/43614))
+
+-   Rich text: Remove unused unstable list functions. ([43614](https://github.com/WordPress/gutenberg/pull/43614))
 
 #### Data Layer
-- Add tsconfig.json to core-data package. ([43638](https://github.com/WordPress/gutenberg/pull/43638))
-- Add type signature for useDispatch. ([43528](https://github.com/WordPress/gutenberg/pull/43528))
-- Bundle TypeScript types with the data package. ([43643](https://github.com/WordPress/gutenberg/pull/43643))
-- Simplify TypeScript types in wordpress/core-data. ([43515](https://github.com/WordPress/gutenberg/pull/43515))
+
+-   Add tsconfig.json to core-data package. ([43638](https://github.com/WordPress/gutenberg/pull/43638))
+-   Add type signature for useDispatch. ([43528](https://github.com/WordPress/gutenberg/pull/43528))
+-   Bundle TypeScript types with the data package. ([43643](https://github.com/WordPress/gutenberg/pull/43643))
+-   Simplify TypeScript types in wordpress/core-data. ([43515](https://github.com/WordPress/gutenberg/pull/43515))
 
 #### Navigation
-- Unskip navigation menu selector focus test. ([43507](https://github.com/WordPress/gutenberg/pull/43507))
+
+-   Unskip navigation menu selector focus test. ([43507](https://github.com/WordPress/gutenberg/pull/43507))
 
 #### Build Tools
-- Update scaffold.js. ([43740](https://github.com/WordPress/gutenberg/pull/43740))
 
+-   Update scaffold.js. ([43740](https://github.com/WordPress/gutenberg/pull/43740))
 
 ### Tools
 
 #### Testing
-- Add comments for the repeated move commands in draggable end-to-end tests. ([43933](https://github.com/WordPress/gutenberg/pull/43933))
-- Add stale issue workflow for flaky test reports. ([43547](https://github.com/WordPress/gutenberg/pull/43547))
-- Avatar: Add test to ensure that user image updates when user switched. ([42657](https://github.com/WordPress/gutenberg/pull/42657))
-- Fix PHP Tests: Try removing registry from WP_Block constructor calls. ([43927](https://github.com/WordPress/gutenberg/pull/43927))
-- Iframed editor: Fixed skipped tests. ([43697](https://github.com/WordPress/gutenberg/pull/43697))
-- Migrate draggable block tests to Playwright. ([43798](https://github.com/WordPress/gutenberg/pull/43798))
-- Migrate duplicating block test to playwright. ([43171](https://github.com/WordPress/gutenberg/pull/43171))
-- Migrate register block test case to playwright. ([43170](https://github.com/WordPress/gutenberg/pull/43170))
-- Migrate writing flow tests to Playwright. ([43637](https://github.com/WordPress/gutenberg/pull/43637))
-- Preview tests: Wait for the post-status change. ([43874](https://github.com/WordPress/gutenberg/pull/43874))
-- Skip draggable block end-to-end tests. ([43736](https://github.com/WordPress/gutenberg/pull/43736))
-- Skip navigation block end-to-end tests. ([43571](https://github.com/WordPress/gutenberg/pull/43571))
-- Update Playwright. ([43887](https://github.com/WordPress/gutenberg/pull/43887))
 
+-   Add comments for the repeated move commands in draggable end-to-end tests. ([43933](https://github.com/WordPress/gutenberg/pull/43933))
+-   Add stale issue workflow for flaky test reports. ([43547](https://github.com/WordPress/gutenberg/pull/43547))
+-   Avatar: Add test to ensure that user image updates when user switched. ([42657](https://github.com/WordPress/gutenberg/pull/42657))
+-   Fix PHP Tests: Try removing registry from WP_Block constructor calls. ([43927](https://github.com/WordPress/gutenberg/pull/43927))
+-   Iframed editor: Fixed skipped tests. ([43697](https://github.com/WordPress/gutenberg/pull/43697))
+-   Migrate draggable block tests to Playwright. ([43798](https://github.com/WordPress/gutenberg/pull/43798))
+-   Migrate duplicating block test to playwright. ([43171](https://github.com/WordPress/gutenberg/pull/43171))
+-   Migrate register block test case to playwright. ([43170](https://github.com/WordPress/gutenberg/pull/43170))
+-   Migrate writing flow tests to Playwright. ([43637](https://github.com/WordPress/gutenberg/pull/43637))
+-   Preview tests: Wait for the post-status change. ([43874](https://github.com/WordPress/gutenberg/pull/43874))
+-   Skip draggable block end-to-end tests. ([43736](https://github.com/WordPress/gutenberg/pull/43736))
+-   Skip navigation block end-to-end tests. ([43571](https://github.com/WordPress/gutenberg/pull/43571))
+-   Update Playwright. ([43887](https://github.com/WordPress/gutenberg/pull/43887))
 
-## First time contributors
-
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @afragen: Block Library: Add filter for inner blocks in the Navigation block. ([37998](https://github.com/WordPress/gutenberg/pull/37998))
-- @dgwyer: Updated the "Create your First App with Gutenberg Data" how-to guide. ([43633](https://github.com/WordPress/gutenberg/pull/43633))
-- @jonathanbossenger: Update scaffold.js. ([43740](https://github.com/WordPress/gutenberg/pull/43740))
-- @kkoppenhaver: Update a broken link to the format-api example. ([44058](https://github.com/WordPress/gutenberg/pull/44058))
-- @madhusudhand: Add box-shadow support for blocks via theme.json. ([41972](https://github.com/WordPress/gutenberg/pull/41972))
-- @mrobit: Fix JSON syntax issues in theme.json examples. ([43828](https://github.com/WordPress/gutenberg/pull/43828))
-- @RahiDroid: Post Featured Image block: Enable gradient overlay. ([43838](https://github.com/WordPress/gutenberg/pull/43838))
+The following PRs were merged by first-time contributors:
 
+-   @afragen: Block Library: Add filter for inner blocks in the Navigation block. ([37998](https://github.com/WordPress/gutenberg/pull/37998))
+-   @dgwyer: Updated the "Create your First App with Gutenberg Data" how-to guide. ([43633](https://github.com/WordPress/gutenberg/pull/43633))
+-   @jonathanbossenger: Update scaffold.js. ([43740](https://github.com/WordPress/gutenberg/pull/43740))
+-   @kkoppenhaver: Update a broken link to the format-api example. ([44058](https://github.com/WordPress/gutenberg/pull/44058))
+-   @madhusudhand: Add box-shadow support for blocks via theme.json. ([41972](https://github.com/WordPress/gutenberg/pull/41972))
+-   @mrobit: Fix JSON syntax issues in theme.json examples. ([43828](https://github.com/WordPress/gutenberg/pull/43828))
+-   @RahiDroid: Post Featured Image block: Enable gradient overlay. ([43838](https://github.com/WordPress/gutenberg/pull/43838))
 
 ## Contributors
 
@@ -1747,14 +25747,13 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @afragen @amustaque97 @andrewserong @annezazu @aristath @BE-Webdesign @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @colorful-tones @dcalhoun @dgwyer @draganescu @ellatrix @fabiankaegy @flootr @geriux @getdave @glendaviesnz @gziolo @jasmussen @jonathanbossenger @jorgefilipecosta @kevin940726 @kkoppenhaver @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mikachan @mirka @mrobit @ndiego @niklasp @noisysocks @ntsekouras @oandregal @ockham @pavanpatil1 @petitphp @pooja-muchandikar @RahiDroid @ramonjd @ryanwelcher @SantosGuillamot @scruffian @SiobhyB @spacedmonkey @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad
 
-
 = 14.0.3 =
 
 ## Changelog
 
 ### Bug Fixes
 
-- Fix GitHub Actions failure due to duplicate functions. ([44052](https://github.com/WordPress/gutenberg/pull/44052))
+-   Fix GitHub Actions failure due to duplicate functions. ([44052](https://github.com/WordPress/gutenberg/pull/44052))
 
 ## Contributors
 
@@ -1762,24 +25761,18 @@ The following contributors merged PRs in this release:
 
 @t-hamano
 
-
 = 14.0.2 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
-- Layout: Fix undefined index notice when attempting to check layout type. ([43756](https://github.com/WordPress/gutenberg/pull/43756))
-- List block: Prevent error upon pasting when list is empty. ([43761](https://github.com/WordPress/gutenberg/pull/43761))
-
-
-## First time contributors
-
-The following PRs were merged by first time contributors:
+-   Layout: Fix undefined index notice when attempting to check layout type. ([43756](https://github.com/WordPress/gutenberg/pull/43756))
+-   List block: Prevent error upon pasting when list is empty. ([43761](https://github.com/WordPress/gutenberg/pull/43761))
 
+## First-time contributors
 
+The following PRs were merged by first-time contributors:
 
 ## Contributors
 
@@ -1787,24 +25780,19 @@ The following contributors merged PRs in this release:
 
 @andrewserong @oandregal
 
-
 = 14.0.1 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
 #### Post Editor
-- Fix layout applied to post editor on classic themes. ([43755](https://github.com/WordPress/gutenberg/pull/43755))
-
-
-## First time contributors
 
-The following PRs were merged by first time contributors:
+-   Fix layout applied to post editor on classic themes. ([43755](https://github.com/WordPress/gutenberg/pull/43755))
 
+## First-time contributors
 
+The following PRs were merged by first-time contributors:
 
 ## Contributors
 
@@ -1812,20 +25800,19 @@ The following contributors merged PRs in this release:
 
 @tellthemachines
 
-
 = 14.0.0 =
 
 ## Changelog
 
 ### Enhancements
 
-- Add optional capture group to URL regex in wp-env. ([43200](https://github.com/WordPress/gutenberg/pull/43200))
-- Core Data: Add canRead to useResourcePermissions. ([43484](https://github.com/WordPress/gutenberg/pull/43484))
-- Element: Remove `enzyme` from `platform` test. ([43531](https://github.com/WordPress/gutenberg/pull/43531))
-- [Create-block] Add `--variant` flag to allow creation of different block type variants. ([41289](https://github.com/WordPress/gutenberg/pull/41289))
-- Use str_starts_with. ([43371](https://github.com/WordPress/gutenberg/pull/43371))
-- [Create Block] Adding a `--no-plugin` flag to scaffold only block files. ([41642](https://github.com/WordPress/gutenberg/pull/41642))
-- Customize widgets: Fix top contents cutoff in keyboard shortcuts. ([43391](https://github.com/WordPress/gutenberg/pull/43391))
+-   Add optional capture group to URL regex in wp-env. ([43200](https://github.com/WordPress/gutenberg/pull/43200))
+-   Core Data: Add canRead to useResourcePermissions. ([43484](https://github.com/WordPress/gutenberg/pull/43484))
+-   Element: Remove `enzyme` from `platform` test. ([43531](https://github.com/WordPress/gutenberg/pull/43531))
+-   [Create-block] Add `--variant` flag to allow creation of different block type variants. ([41289](https://github.com/WordPress/gutenberg/pull/41289))
+-   Use str_starts_with. ([43371](https://github.com/WordPress/gutenberg/pull/43371))
+-   [Create Block] Adding a `--no-plugin` flag to scaffold only block files. ([41642](https://github.com/WordPress/gutenberg/pull/41642))
+-   Customize widgets: Fix top contents cutoff in keyboard shortcuts. ([43391](https://github.com/WordPress/gutenberg/pull/43391))
 
 #### Design Tools
 
@@ -1833,205 +25820,223 @@ As part of the effort to improve design tool consistency for typography and spac
 
 Added typography support:
 
-- Paragraph: ([39642](https://github.com/WordPress/gutenberg/pull/39642))
-- Categories List: ([43254](https://github.com/WordPress/gutenberg/pull/43254))
-- Code Block: ([43255](https://github.com/WordPress/gutenberg/pull/43255))
-- Column Block: ([43252](https://github.com/WordPress/gutenberg/pull/43252))
-- Columns Block: ([43253](https://github.com/WordPress/gutenberg/pull/43253))
-- Comment Author Name: ([43256](https://github.com/WordPress/gutenberg/pull/43256))
-- Comment Date: ([43262](https://github.com/WordPress/gutenberg/pull/43262))
-- Comment Edit Link: ([43263](https://github.com/WordPress/gutenberg/pull/43263))
-- Comment Template: ([43266](https://github.com/WordPress/gutenberg/pull/43266))
-- Comments Content:  ([43257](https://github.com/WordPress/gutenberg/pull/43257))
-- Comments Pagination: ([43288](https://github.com/WordPress/gutenberg/pull/43288), [43289](https://github.com/WordPress/gutenberg/pull/43289), [43290](https://github.com/WordPress/gutenberg/pull/43290), [43287](https://github.com/WordPress/gutenberg/pull/43287))
-- Comments Reply Link: ([43264](https://github.com/WordPress/gutenberg/pull/43264))
-- Comments Title: ([43291](https://github.com/WordPress/gutenberg/pull/43291))
-- Comments: ([43286](https://github.com/WordPress/gutenberg/pull/43286))
-- Cover: ([43298](https://github.com/WordPress/gutenberg/pull/43298))
-- Group: ([43308](https://github.com/WordPress/gutenberg/pull/43308))
-- Media & Text: ([43314](https://github.com/WordPress/gutenberg/pull/43314))
-- Navigation: ([43542](https://github.com/WordPress/gutenberg/pull/43542))
-- Post Author Biography: ([43318](https://github.com/WordPress/gutenberg/pull/43318))
-- Post Author Name: ([43319](https://github.com/WordPress/gutenberg/pull/43319))
-- Post Author: ([43317](https://github.com/WordPress/gutenberg/pull/43317))
-- Post Comments Count: ([43321](https://github.com/WordPress/gutenberg/pull/43321))
-- Post Comments Link: ([43338](https://github.com/WordPress/gutenberg/pull/43338))
-- Post Date: ([43340](https://github.com/WordPress/gutenberg/pull/43340))
-- Post Navigation Link: ([43344](https://github.com/WordPress/gutenberg/pull/43344))
-- Post Template: ([43342](https://github.com/WordPress/gutenberg/pull/43342))
-- Post Terms: ([43343](https://github.com/WordPress/gutenberg/pull/43343))
-- Preformatted: ([43345](https://github.com/WordPress/gutenberg/pull/43345))
-- Pullquote: ([43346](https://github.com/WordPress/gutenberg/pull/43346))
-- Table of Contents: ([43509](https://github.com/WordPress/gutenberg/pull/43509))
+-   Paragraph: ([39642](https://github.com/WordPress/gutenberg/pull/39642))
+-   Categories List: ([43254](https://github.com/WordPress/gutenberg/pull/43254))
+-   Code Block: ([43255](https://github.com/WordPress/gutenberg/pull/43255))
+-   Column Block: ([43252](https://github.com/WordPress/gutenberg/pull/43252))
+-   Columns Block: ([43253](https://github.com/WordPress/gutenberg/pull/43253))
+-   Comment Author Name: ([43256](https://github.com/WordPress/gutenberg/pull/43256))
+-   Comment Date: ([43262](https://github.com/WordPress/gutenberg/pull/43262))
+-   Comment Edit Link: ([43263](https://github.com/WordPress/gutenberg/pull/43263))
+-   Comment Template: ([43266](https://github.com/WordPress/gutenberg/pull/43266))
+-   Comments Content: ([43257](https://github.com/WordPress/gutenberg/pull/43257))
+-   Comments Pagination: ([43288](https://github.com/WordPress/gutenberg/pull/43288), [43289](https://github.com/WordPress/gutenberg/pull/43289), [43290](https://github.com/WordPress/gutenberg/pull/43290), [43287](https://github.com/WordPress/gutenberg/pull/43287))
+-   Comments Reply Link: ([43264](https://github.com/WordPress/gutenberg/pull/43264))
+-   Comments Title: ([43291](https://github.com/WordPress/gutenberg/pull/43291))
+-   Comments: ([43286](https://github.com/WordPress/gutenberg/pull/43286))
+-   Cover: ([43298](https://github.com/WordPress/gutenberg/pull/43298))
+-   Group: ([43308](https://github.com/WordPress/gutenberg/pull/43308))
+-   Media & Text: ([43314](https://github.com/WordPress/gutenberg/pull/43314))
+-   Navigation: ([43542](https://github.com/WordPress/gutenberg/pull/43542))
+-   Post Author Biography: ([43318](https://github.com/WordPress/gutenberg/pull/43318))
+-   Post Author Name: ([43319](https://github.com/WordPress/gutenberg/pull/43319))
+-   Post Author: ([43317](https://github.com/WordPress/gutenberg/pull/43317))
+-   Post Comments Count: ([43321](https://github.com/WordPress/gutenberg/pull/43321))
+-   Post Comments Link: ([43338](https://github.com/WordPress/gutenberg/pull/43338))
+-   Post Date: ([43340](https://github.com/WordPress/gutenberg/pull/43340))
+-   Post Navigation Link: ([43344](https://github.com/WordPress/gutenberg/pull/43344))
+-   Post Template: ([43342](https://github.com/WordPress/gutenberg/pull/43342))
+-   Post Terms: ([43343](https://github.com/WordPress/gutenberg/pull/43343))
+-   Preformatted: ([43345](https://github.com/WordPress/gutenberg/pull/43345))
+-   Pullquote: ([43346](https://github.com/WordPress/gutenberg/pull/43346))
+-   Table of Contents: ([43509](https://github.com/WordPress/gutenberg/pull/43509))
 
 Added spacing supports:
 
-- Paragraph: Add spacing block supports. ([43455](https://github.com/WordPress/gutenberg/pull/43455))
-- Heading: Add padding support. ([43454](https://github.com/WordPress/gutenberg/pull/43454))
-- List: Add spacing block supports. ([43402](https://github.com/WordPress/gutenberg/pull/43402))
-- Media & Text: Add spacing block supports. ([43456](https://github.com/WordPress/gutenberg/pull/43456))
-- Post Date: Add spacing support. ([43406](https://github.com/WordPress/gutenberg/pull/43406))
-- Post Title: Add padding support. ([43457](https://github.com/WordPress/gutenberg/pull/43457))
-- Query Title: Add padding support. ([43458](https://github.com/WordPress/gutenberg/pull/43458))
-- Spacer: Add spacing block supports. ([43366](https://github.com/WordPress/gutenberg/pull/43366))
-- Table of contents: Add spacing supports. ([43368](https://github.com/WordPress/gutenberg/pull/43368))
-- Table: Add spacing block supports. ([43370](https://github.com/WordPress/gutenberg/pull/43370))
-- Tag cloud: Add spacing block supports. ([43367](https://github.com/WordPress/gutenberg/pull/43367))
-- Term description: Add spacing block supports. ([43372](https://github.com/WordPress/gutenberg/pull/43372))
-- Verse: Add margin support. ([43461](https://github.com/WordPress/gutenberg/pull/43461))
-- Video: Add spacing block supports. ([43365](https://github.com/WordPress/gutenberg/pull/43365))
+-   Paragraph: Add spacing block supports. ([43455](https://github.com/WordPress/gutenberg/pull/43455))
+-   Heading: Add padding support. ([43454](https://github.com/WordPress/gutenberg/pull/43454))
+-   List: Add spacing block supports. ([43402](https://github.com/WordPress/gutenberg/pull/43402))
+-   Media & Text: Add spacing block supports. ([43456](https://github.com/WordPress/gutenberg/pull/43456))
+-   Post Date: Add spacing support. ([43406](https://github.com/WordPress/gutenberg/pull/43406))
+-   Post Title: Add padding support. ([43457](https://github.com/WordPress/gutenberg/pull/43457))
+-   Query Title: Add padding support. ([43458](https://github.com/WordPress/gutenberg/pull/43458))
+-   Spacer: Add spacing block supports. ([43366](https://github.com/WordPress/gutenberg/pull/43366))
+-   Table of contents: Add spacing supports. ([43368](https://github.com/WordPress/gutenberg/pull/43368))
+-   Table: Add spacing block supports. ([43370](https://github.com/WordPress/gutenberg/pull/43370))
+-   Tag cloud: Add spacing block supports. ([43367](https://github.com/WordPress/gutenberg/pull/43367))
+-   Term description: Add spacing block supports. ([43372](https://github.com/WordPress/gutenberg/pull/43372))
+-   Verse: Add margin support. ([43461](https://github.com/WordPress/gutenberg/pull/43461))
+-   Video: Add spacing block supports. ([43365](https://github.com/WordPress/gutenberg/pull/43365))
 
 Added other supports:
 
-- Gallery: Add background color block supports. ([43294](https://github.com/WordPress/gutenberg/pull/43294))
-- Post Featured Image: Add border support applied to inner img. ([42847](https://github.com/WordPress/gutenberg/pull/42847))
-- Social Links: Enable alpha on color pickers. ([43453](https://github.com/WordPress/gutenberg/pull/43453))
-- Social links: Add background color block supports. ([43293](https://github.com/WordPress/gutenberg/pull/43293))
-- Table of contents block: Add color block supports. ([43363](https://github.com/WordPress/gutenberg/pull/43363))
-
-
-#### Components
-- (Custom)SelectControl: Refresh and refactor chevron. ([42962](https://github.com/WordPress/gutenberg/pull/42962))
-- Always use `screen` for `testing-library` queries. ([43152](https://github.com/WordPress/gutenberg/pull/43152))
-- Autocomplete: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. ([43432](https://github.com/WordPress/gutenberg/pull/43432))
-- Card: Migrate to TypeScript. ([42941](https://github.com/WordPress/gutenberg/pull/42941))
-- ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. ([42942](https://github.com/WordPress/gutenberg/pull/42942))
-- CustomGradientPicker: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. ([43437](https://github.com/WordPress/gutenberg/pull/43437))
-- DateTimePicker: Replace react-dates and moment with useLilius and date-fns. ([43005](https://github.com/WordPress/gutenberg/pull/43005))
-- FocalPointPicker: Use KeyboardEvent.code, partially refactor tests to modern RTL and user-event. ([43441](https://github.com/WordPress/gutenberg/pull/43441))
-- FontSizePicker: Add a flag to remove bottom margin. ([43062](https://github.com/WordPress/gutenberg/pull/43062))
-- FormTokenField: Add the ability to auto-select first matching suggestion for incomplete token. ([42527](https://github.com/WordPress/gutenberg/pull/42527))
-- FormTokenField: Use KeyboardEvent.code, refactor tests to model RTL and user-event. ([43442](https://github.com/WordPress/gutenberg/pull/43442))
-- Modal: Use code instead of keyCode for keyboard events. ([43429](https://github.com/WordPress/gutenberg/pull/43429))
-- Popover: Move eslint-disable comment to the correct deps array. ([43320](https://github.com/WordPress/gutenberg/pull/43320))
-- ToggleGroupControl: Improve styling for icon options. ([43060](https://github.com/WordPress/gutenberg/pull/43060))
-
-#### Block Library
-- Add a setting to hide the prefix in the archive title. ([42594](https://github.com/WordPress/gutenberg/pull/42594))
-- Embed: Update Reddit icon. ([43326](https://github.com/WordPress/gutenberg/pull/43326))
-- Post date: Add option to display as the last modified date. ([42312](https://github.com/WordPress/gutenberg/pull/42312))
-- Reset focalPoint after replacing the cover image. ([42859](https://github.com/WordPress/gutenberg/pull/42859))
-- Social Link: Update Reddit icon and color to match brand guidelines. ([43325](https://github.com/WordPress/gutenberg/pull/43325))
-- Try "constrained" content width as new layout type. ([42763](https://github.com/WordPress/gutenberg/pull/42763))
-- Try: Add a clickable Group setup state. ([40664](https://github.com/WordPress/gutenberg/pull/40664))
-- Use page list instead of placeholder as fallback. ([42735](https://github.com/WordPress/gutenberg/pull/42735))
-- [Query Loop]: Honour intended post type when previewing patterns and when replacing them with patterns. ([43285](https://github.com/WordPress/gutenberg/pull/43285))
-- List: Use nested blocks. ([42711](https://github.com/WordPress/gutenberg/pull/42711))
-
-#### Global Styles
-- BlockGap: Add axial gap option to global styles where available. ([42490](https://github.com/WordPress/gutenberg/pull/42490))
-- BlockGap: Add support for spacing presets. ([43296](https://github.com/WordPress/gutenberg/pull/43296))
-- Spacing presets: Add check for 0 spacing steps. ([43105](https://github.com/WordPress/gutenberg/pull/43105))
-- Spacing presets: Add support for margins. ([43246](https://github.com/WordPress/gutenberg/pull/43246))
-- Spacing presets: Implement disabling of custom space sizes. ([43216](https://github.com/WordPress/gutenberg/pull/43216))
-- Pseudo-elements supports on button elements. ([43088](https://github.com/WordPress/gutenberg/pull/43088))
+-   Gallery: Add background color block supports. ([43294](https://github.com/WordPress/gutenberg/pull/43294))
+-   Post Featured Image: Add border support applied to inner img. ([42847](https://github.com/WordPress/gutenberg/pull/42847))
+-   Social Links: Enable alpha on color pickers. ([43453](https://github.com/WordPress/gutenberg/pull/43453))
+-   Social links: Add background color block supports. ([43293](https://github.com/WordPress/gutenberg/pull/43293))
+-   Table of contents block: Add color block supports. ([43363](https://github.com/WordPress/gutenberg/pull/43363))
+
+#### Components
+
+-   (Custom)SelectControl: Refresh and refactor chevron. ([42962](https://github.com/WordPress/gutenberg/pull/42962))
+-   Always use `screen` for `testing-library` queries. ([43152](https://github.com/WordPress/gutenberg/pull/43152))
+-   Autocomplete: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. ([43432](https://github.com/WordPress/gutenberg/pull/43432))
+-   Card: Migrate to TypeScript. ([42941](https://github.com/WordPress/gutenberg/pull/42941))
+-   ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. ([42942](https://github.com/WordPress/gutenberg/pull/42942))
+-   CustomGradientPicker: Use KeyboardEvent.code instead of KeyboardEvent.keyCode. ([43437](https://github.com/WordPress/gutenberg/pull/43437))
+-   DateTimePicker: Replace react-dates and moment with useLilius and date-fns. ([43005](https://github.com/WordPress/gutenberg/pull/43005))
+-   FocalPointPicker: Use KeyboardEvent.code, partially refactor tests to modern RTL and user-event. ([43441](https://github.com/WordPress/gutenberg/pull/43441))
+-   FontSizePicker: Add a flag to remove bottom margin. ([43062](https://github.com/WordPress/gutenberg/pull/43062))
+-   FormTokenField: Add the ability to auto-select first matching suggestion for incomplete token. ([42527](https://github.com/WordPress/gutenberg/pull/42527))
+-   FormTokenField: Use KeyboardEvent.code, refactor tests to model RTL and user-event. ([43442](https://github.com/WordPress/gutenberg/pull/43442))
+-   Modal: Use code instead of keyCode for keyboard events. ([43429](https://github.com/WordPress/gutenberg/pull/43429))
+-   Popover: Move eslint-disable comment to the correct deps array. ([43320](https://github.com/WordPress/gutenberg/pull/43320))
+-   ToggleGroupControl: Improve styling for icon options. ([43060](https://github.com/WordPress/gutenberg/pull/43060))
+
+#### Block Library
+
+-   Add a setting to hide the prefix in the archive title. ([42594](https://github.com/WordPress/gutenberg/pull/42594))
+-   Embed: Update Reddit icon. ([43326](https://github.com/WordPress/gutenberg/pull/43326))
+-   Post date: Add option to display as the last modified date. ([42312](https://github.com/WordPress/gutenberg/pull/42312))
+-   Reset focalPoint after replacing the cover image. ([42859](https://github.com/WordPress/gutenberg/pull/42859))
+-   Social Link: Update Reddit icon and color to match brand guidelines. ([43325](https://github.com/WordPress/gutenberg/pull/43325))
+-   Try "constrained" content width as new layout type. ([42763](https://github.com/WordPress/gutenberg/pull/42763))
+-   Try: Add a clickable Group setup state. ([40664](https://github.com/WordPress/gutenberg/pull/40664))
+-   Use page list instead of placeholder as fallback. ([42735](https://github.com/WordPress/gutenberg/pull/42735))
+-   [Query Loop]: Honour intended post type when previewing patterns and when replacing them with patterns. ([43285](https://github.com/WordPress/gutenberg/pull/43285))
+-   List: Use nested blocks. ([42711](https://github.com/WordPress/gutenberg/pull/42711))
+
+#### Global Styles
+
+-   BlockGap: Add axial gap option to global styles where available. ([42490](https://github.com/WordPress/gutenberg/pull/42490))
+-   BlockGap: Add support for spacing presets. ([43296](https://github.com/WordPress/gutenberg/pull/43296))
+-   Spacing presets: Add check for 0 spacing steps. ([43105](https://github.com/WordPress/gutenberg/pull/43105))
+-   Spacing presets: Add support for margins. ([43246](https://github.com/WordPress/gutenberg/pull/43246))
+-   Spacing presets: Implement disabling of custom space sizes. ([43216](https://github.com/WordPress/gutenberg/pull/43216))
+-   Pseudo-elements supports on button elements. ([43088](https://github.com/WordPress/gutenberg/pull/43088))
 
 #### CSS & Styling
-- Placeholder: Add blurred background to work in nested cases. ([43379](https://github.com/WordPress/gutenberg/pull/43379))
-- Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo. ([43228](https://github.com/WordPress/gutenberg/pull/43228))
+
+-   Placeholder: Add blurred background to work in nested cases. ([43379](https://github.com/WordPress/gutenberg/pull/43379))
+-   Placeholder: Refactor and simplify dashed placeholders used for Featured Image & Site Logo. ([43228](https://github.com/WordPress/gutenberg/pull/43228))
 
 #### Data Layer
-- [data] Export the type for the combineReducers export. ([43516](https://github.com/WordPress/gutenberg/pull/43516))
+
+-   [data] Export the type for the combineReducers export. ([43516](https://github.com/WordPress/gutenberg/pull/43516))
 
 #### Site Editor
-- Template Part: Allow changing properties in focus mode. ([43151](https://github.com/WordPress/gutenberg/pull/43151))
+
+-   Template Part: Allow changing properties in focus mode. ([43151](https://github.com/WordPress/gutenberg/pull/43151))
 
 #### Block Editor
-- Refactor `LinkControl` tests to `@testing-library`. ([43147](https://github.com/WordPress/gutenberg/pull/43147))
 
+-   Refactor `LinkControl` tests to `@testing-library`. ([43147](https://github.com/WordPress/gutenberg/pull/43147))
 
 ### Bug Fixes
 
-- Create Block: Refactor handling for template variants. ([43481](https://github.com/WordPress/gutenberg/pull/43481))
-- Fix no-results grammar. ([43168](https://github.com/WordPress/gutenberg/pull/43168))
-- Fix spinner causing a flash when loading site editor. ([43226](https://github.com/WordPress/gutenberg/pull/43226))
-- Image: Fix unclickable buttons. ([43361](https://github.com/WordPress/gutenberg/pull/43361))
-- Keycodes: Fix display of symbols in keyboard shortcut modal. ([43137](https://github.com/WordPress/gutenberg/pull/43137))
-- MediaReplaceFlow: Reset default LinkControl margins. ([43156](https://github.com/WordPress/gutenberg/pull/43156))
-- Post title: Fix pasting into existing content. ([43123](https://github.com/WordPress/gutenberg/pull/43123))
-- [Block Editor]: Fix block switcher label to take into account block variations. ([43309](https://github.com/WordPress/gutenberg/pull/43309))
-- [useEntityRecord] Pass the correct kind, name, and recordId to getEditedEntityRecord. ([43517](https://github.com/WordPress/gutenberg/pull/43517))
-- wp-env: Set core source to latest when null. ([43133](https://github.com/WordPress/gutenberg/pull/43133))
+-   Create Block: Refactor handling for template variants. ([43481](https://github.com/WordPress/gutenberg/pull/43481))
+-   Fix no-results grammar. ([43168](https://github.com/WordPress/gutenberg/pull/43168))
+-   Fix spinner causing a flash when loading site editor. ([43226](https://github.com/WordPress/gutenberg/pull/43226))
+-   Image: Fix unclickable buttons. ([43361](https://github.com/WordPress/gutenberg/pull/43361))
+-   Keycodes: Fix display of symbols in keyboard shortcut modal. ([43137](https://github.com/WordPress/gutenberg/pull/43137))
+-   MediaReplaceFlow: Reset default LinkControl margins. ([43156](https://github.com/WordPress/gutenberg/pull/43156))
+-   Post title: Fix pasting into existing content. ([43123](https://github.com/WordPress/gutenberg/pull/43123))
+-   [Block Editor]: Fix block switcher label to take into account block variations. ([43309](https://github.com/WordPress/gutenberg/pull/43309))
+-   [useEntityRecord] Pass the correct kind, name, and recordId to getEditedEntityRecord. ([43517](https://github.com/WordPress/gutenberg/pull/43517))
+-   wp-env: Set core source to latest when null. ([43133](https://github.com/WordPress/gutenberg/pull/43133))
 
 #### Block Library
-- Ensure the block toolbar doesn't overlap block by modifying forcePosition and shift popover props. ([42887](https://github.com/WordPress/gutenberg/pull/42887))
-- Ensure pagination numbers have an href in block edit function. ([43354](https://github.com/WordPress/gutenberg/pull/43354))
-- Fix Post Featured Image border attributes. ([43426](https://github.com/WordPress/gutenberg/pull/43426))
-- Fix classic block converted to regular blocks when clicking new 'Edit visually' button. ([43219](https://github.com/WordPress/gutenberg/pull/43219))
-- Fix featured image being unselectable using arrow keys. ([43323](https://github.com/WordPress/gutenberg/pull/43323))
-- Fix navigation block undefined index error on frontend. ([43302](https://github.com/WordPress/gutenberg/pull/43302))
-- Gallery block: Ensure image attributes copy correctly between transforms. ([42796](https://github.com/WordPress/gutenberg/pull/42796))
-- Home Link: Fix undo trap. ([43112](https://github.com/WordPress/gutenberg/pull/43112))
-- List v2: Copy list wrapper when copying list items. ([42860](https://github.com/WordPress/gutenberg/pull/42860))
-- Navigation: Page List fix missing padding. ([43358](https://github.com/WordPress/gutenberg/pull/43358))
-- Prevent query block from looping in classic themes. ([43221](https://github.com/WordPress/gutenberg/pull/43221))
-- Pullquote block: Avoid text-align settings affecting block width and font size. ([43188](https://github.com/WordPress/gutenberg/pull/43188))
-- Pullquote block: Remove font definition from the default block styles. ([43195](https://github.com/WordPress/gutenberg/pull/43195))
-- taxonomy-controls.js: Change REST context to "view" when fetching taxonomy terms. ([43274](https://github.com/WordPress/gutenberg/pull/43274))
-- Home Link: Properly close tags. ([43706](https://github.com/WordPress/gutenberg/pull/43706))
-- Social Link: Fix background color on WhatsApp icon. ([43683](https://github.com/WordPress/gutenberg/pull/43683))
+
+-   Ensure the block toolbar doesn't overlap block by modifying forcePosition and shift popover props. ([42887](https://github.com/WordPress/gutenberg/pull/42887))
+-   Ensure pagination numbers have an href in block edit function. ([43354](https://github.com/WordPress/gutenberg/pull/43354))
+-   Fix Post Featured Image border attributes. ([43426](https://github.com/WordPress/gutenberg/pull/43426))
+-   Fix classic block converted to regular blocks when clicking new 'Edit visually' button. ([43219](https://github.com/WordPress/gutenberg/pull/43219))
+-   Fix featured image being unselectable using arrow keys. ([43323](https://github.com/WordPress/gutenberg/pull/43323))
+-   Fix navigation block undefined index error on frontend. ([43302](https://github.com/WordPress/gutenberg/pull/43302))
+-   Gallery block: Ensure image attributes copy correctly between transforms. ([42796](https://github.com/WordPress/gutenberg/pull/42796))
+-   Home Link: Fix undo trap. ([43112](https://github.com/WordPress/gutenberg/pull/43112))
+-   List v2: Copy list wrapper when copying list items. ([42860](https://github.com/WordPress/gutenberg/pull/42860))
+-   Navigation: Page List fix missing padding. ([43358](https://github.com/WordPress/gutenberg/pull/43358))
+-   Prevent query block from looping in classic themes. ([43221](https://github.com/WordPress/gutenberg/pull/43221))
+-   Pullquote block: Avoid text-align settings affecting block width and font size. ([43188](https://github.com/WordPress/gutenberg/pull/43188))
+-   Pullquote block: Remove font definition from the default block styles. ([43195](https://github.com/WordPress/gutenberg/pull/43195))
+-   taxonomy-controls.js: Change REST context to "view" when fetching taxonomy terms. ([43274](https://github.com/WordPress/gutenberg/pull/43274))
+-   Home Link: Properly close tags. ([43706](https://github.com/WordPress/gutenberg/pull/43706))
+-   Social Link: Fix background color on WhatsApp icon. ([43683](https://github.com/WordPress/gutenberg/pull/43683))
 
 #### Components
-- (Custom)SelectControl: Truncate long options. ([43301](https://github.com/WordPress/gutenberg/pull/43301))
-- AlignmentMatrixControl: Fix `width` bug. ([43482](https://github.com/WordPress/gutenberg/pull/43482))
-- ColorPalette, GradientPicker: Fix color picker popover positioning. ([42989](https://github.com/WordPress/gutenberg/pull/42989))
-- ColorPalette: Make sure "key" is unique when iterating over color entries with the same value. ([43096](https://github.com/WordPress/gutenberg/pull/43096))
-- Dropdown: Anchor popover to the dropdown wrapper (instead of the toggle). ([43377](https://github.com/WordPress/gutenberg/pull/43377))
-- Fix block toolbar offset in site editor when toggling sidebars. ([43172](https://github.com/WordPress/gutenberg/pull/43172))
-- Fix popover glitch that results in incorrect toolbar positioning in site editor. ([43267](https://github.com/WordPress/gutenberg/pull/43267))
-- Improve appearance of controls in the Global Styles Typography panel. ([43304](https://github.com/WordPress/gutenberg/pull/43304))
-- Popover: Fix and improve opening animation, use framer motion. ([43186](https://github.com/WordPress/gutenberg/pull/43186))
-- Popover: Make sure offset middleware always applies the latest frame offset values. ([43329](https://github.com/WordPress/gutenberg/pull/43329))
-- Refactor `Guide` tests to `@testing-library/react`. ([43380](https://github.com/WordPress/gutenberg/pull/43380))
+
+-   (Custom)SelectControl: Truncate long options. ([43301](https://github.com/WordPress/gutenberg/pull/43301))
+-   AlignmentMatrixControl: Fix `width` bug. ([43482](https://github.com/WordPress/gutenberg/pull/43482))
+-   ColorPalette, GradientPicker: Fix color picker popover positioning. ([42989](https://github.com/WordPress/gutenberg/pull/42989))
+-   ColorPalette: Make sure "key" is unique when iterating over color entries with the same value. ([43096](https://github.com/WordPress/gutenberg/pull/43096))
+-   Dropdown: Anchor popover to the dropdown wrapper (instead of the toggle). ([43377](https://github.com/WordPress/gutenberg/pull/43377))
+-   Fix block toolbar offset in site editor when toggling sidebars. ([43172](https://github.com/WordPress/gutenberg/pull/43172))
+-   Fix popover glitch that results in incorrect toolbar positioning in site editor. ([43267](https://github.com/WordPress/gutenberg/pull/43267))
+-   Improve appearance of controls in the Global Styles Typography panel. ([43304](https://github.com/WordPress/gutenberg/pull/43304))
+-   Popover: Fix and improve opening animation, use framer motion. ([43186](https://github.com/WordPress/gutenberg/pull/43186))
+-   Popover: Make sure offset middleware always applies the latest frame offset values. ([43329](https://github.com/WordPress/gutenberg/pull/43329))
+-   Refactor `Guide` tests to `@testing-library/react`. ([43380](https://github.com/WordPress/gutenberg/pull/43380))
 
 #### Global Styles
-- Check for recursive dynamic reference in the site editor. ([43166](https://github.com/WordPress/gutenberg/pull/43166))
-- Duotone: Prevent early return blocking other style generation. ([43300](https://github.com/WordPress/gutenberg/pull/43300))
-- Fix dynamic references on the site editor. ([42976](https://github.com/WordPress/gutenberg/pull/42976))
-- Fix error in handling spacing preset slugs. ([43237](https://github.com/WordPress/gutenberg/pull/43237))
-- Layout: Re-instate alignwide and alignfull in flow layout get alignments. ([43502](https://github.com/WordPress/gutenberg/pull/43502))
-- Spacing presets: Fix/minor issues noted in initial UI PR. ([43214](https://github.com/WordPress/gutenberg/pull/43214))
-- Layout: Fix has-global-padding classname for constrained layouts without contentSize. ([43689](https://github.com/WordPress/gutenberg/pull/43689))
+
+-   Check for recursive dynamic reference in the site editor. ([43166](https://github.com/WordPress/gutenberg/pull/43166))
+-   Duotone: Prevent early return blocking other style generation. ([43300](https://github.com/WordPress/gutenberg/pull/43300))
+-   Fix dynamic references on the site editor. ([42976](https://github.com/WordPress/gutenberg/pull/42976))
+-   Fix error in handling spacing preset slugs. ([43237](https://github.com/WordPress/gutenberg/pull/43237))
+-   Layout: Re-instate alignwide and alignfull in flow layout get alignments. ([43502](https://github.com/WordPress/gutenberg/pull/43502))
+-   Spacing presets: Fix/minor issues noted in initial UI PR. ([43214](https://github.com/WordPress/gutenberg/pull/43214))
+-   Layout: Fix has-global-padding classname for constrained layouts without contentSize. ([43689](https://github.com/WordPress/gutenberg/pull/43689))
 
 #### Block Editor
-- Fix Cmd+A issue in Storybook. ([43145](https://github.com/WordPress/gutenberg/pull/43145))
-- Fix drag and drop indicator before first block and after last block. ([43135](https://github.com/WordPress/gutenberg/pull/43135))
-- Fix spinner position in URLInput component. ([43472](https://github.com/WordPress/gutenberg/pull/43472))
-- Partial select: Fix selecting into image. ([42983](https://github.com/WordPress/gutenberg/pull/42983))
+
+-   Fix Cmd+A issue in Storybook. ([43145](https://github.com/WordPress/gutenberg/pull/43145))
+-   Fix drag and drop indicator before first block and after last block. ([43135](https://github.com/WordPress/gutenberg/pull/43135))
+-   Fix spinner position in URLInput component. ([43472](https://github.com/WordPress/gutenberg/pull/43472))
+-   Partial select: Fix selecting into image. ([42983](https://github.com/WordPress/gutenberg/pull/42983))
 
 #### Design Tools
-- Border Radius: Prevent invalid css unit only styles or empty radii style attribute. ([42409](https://github.com/WordPress/gutenberg/pull/42409))
-- Border Support: Fix disabling of border style control. ([43109](https://github.com/WordPress/gutenberg/pull/43109))
-- Post Comments Count: Prevent text-decoration from affecting warning. ([43497](https://github.com/WordPress/gutenberg/pull/43497))
+
+-   Border Radius: Prevent invalid css unit only styles or empty radii style attribute. ([42409](https://github.com/WordPress/gutenberg/pull/42409))
+-   Border Support: Fix disabling of border style control. ([43109](https://github.com/WordPress/gutenberg/pull/43109))
+-   Post Comments Count: Prevent text-decoration from affecting warning. ([43497](https://github.com/WordPress/gutenberg/pull/43497))
 
 #### Site Editor
-- Do not show scrollbar when toolbar overflows the editor wrapper. ([43332](https://github.com/WordPress/gutenberg/pull/43332))
-- Fix template part focus mode resizable editor height. ([43408](https://github.com/WordPress/gutenberg/pull/43408))
+
+-   Do not show scrollbar when toolbar overflows the editor wrapper. ([43332](https://github.com/WordPress/gutenberg/pull/43332))
+-   Fix template part focus mode resizable editor height. ([43408](https://github.com/WordPress/gutenberg/pull/43408))
 
 #### npm Packages
-- Jest Preset: Ignore `is-plain-obj` transformation. ([43179](https://github.com/WordPress/gutenberg/pull/43179))
-- Jest Preset: Improve `is-plain-obj` transformation ignore. ([43271](https://github.com/WordPress/gutenberg/pull/43271))
+
+-   Jest Preset: Ignore `is-plain-obj` transformation. ([43179](https://github.com/WordPress/gutenberg/pull/43179))
+-   Jest Preset: Improve `is-plain-obj` transformation ignore. ([43271](https://github.com/WordPress/gutenberg/pull/43271))
 
 #### Widgets Editor
-- Fix legacy widget form positioning in customizer. ([43297](https://github.com/WordPress/gutenberg/pull/43297))
+
+-   Fix legacy widget form positioning in customizer. ([43297](https://github.com/WordPress/gutenberg/pull/43297))
 
 #### CSS & Styling
-- Group/Stack/Row: Scope the dashed placeholder rules. ([43169](https://github.com/WordPress/gutenberg/pull/43169))
+
+-   Group/Stack/Row: Scope the dashed placeholder rules. ([43169](https://github.com/WordPress/gutenberg/pull/43169))
 
 #### List View
-- Ensure long anchors don't cause the List View to extend. ([43134](https://github.com/WordPress/gutenberg/pull/43134))
+
+-   Ensure long anchors don't cause the List View to extend. ([43134](https://github.com/WordPress/gutenberg/pull/43134))
 
 #### Post Editor
-- Post Template: Don't fetch settings and templates for non-admin users. ([42845](https://github.com/WordPress/gutenberg/pull/42845))
+
+-   Post Template: Don't fetch settings and templates for non-admin users. ([42845](https://github.com/WordPress/gutenberg/pull/42845))
 
 #### Patterns
-- Fix custom placeholder not displaying on subsequent Paragraph blocks. ([42519](https://github.com/WordPress/gutenberg/pull/42519))
+
+-   Fix custom placeholder not displaying on subsequent Paragraph blocks. ([42519](https://github.com/WordPress/gutenberg/pull/42519))
 
 ### Accessibility
-- Block Editor: Remove `aria-selected` from `LinkPreview`. ([43279](https://github.com/WordPress/gutenberg/pull/43279))
-- Block Editor: Replace `aria-owns` with `aria-controls` in `URLInput`. ([43278](https://github.com/WordPress/gutenberg/pull/43278))
-- Separator: Disable the contrastChecker via block.json. ([43357](https://github.com/WordPress/gutenberg/pull/43357))
-- Fix Top toolbar buttons tooltips and style when 'Show button text labels' is enabled. ([42815](https://github.com/WordPress/gutenberg/pull/42815))
+
+-   Block Editor: Remove `aria-selected` from `LinkPreview`. ([43279](https://github.com/WordPress/gutenberg/pull/43279))
+-   Block Editor: Replace `aria-owns` with `aria-controls` in `URLInput`. ([43278](https://github.com/WordPress/gutenberg/pull/43278))
+-   Separator: Disable the contrastChecker via block.json. ([43357](https://github.com/WordPress/gutenberg/pull/43357))
+-   Fix Top toolbar buttons tooltips and style when 'Show button text labels' is enabled. ([42815](https://github.com/WordPress/gutenberg/pull/42815))
 
 ### Performance
 
@@ -2042,140 +26047,153 @@ The related PRs are: [43118](https://github.com/WordPress/gutenberg/pull/43118),
 ### Experiments
 
 #### Components
-- Font size picker: Use t-shirt sizes for the ToggleGroupControl component. ([43074](https://github.com/WordPress/gutenberg/pull/43074))
 
+-   Font size picker: Use t-shirt sizes for the ToggleGroupControl component. ([43074](https://github.com/WordPress/gutenberg/pull/43074))
 
 ### Documentation
 
-- Add documentation for useRootPaddingAwareAlignments in theme.json. ([43463](https://github.com/WordPress/gutenberg/pull/43463))
-- Comma is missing. ([43446](https://github.com/WordPress/gutenberg/pull/43446))
-- Convert HTML to Markdown in changelog for 13.9. ([43324](https://github.com/WordPress/gutenberg/pull/43324))
-- Handbook: Fix format API example link. ([43477](https://github.com/WordPress/gutenberg/pull/43477))
-- Stabilize the useResourcePermissions hook. ([43268](https://github.com/WordPress/gutenberg/pull/43268))
-- [Docs] Replace useState with edit in useEntityRecord usage examples. ([43270](https://github.com/WordPress/gutenberg/pull/43270))
-- Block Editor Handbook: Added missing codetabs end marker. ([43185](https://github.com/WordPress/gutenberg/pull/43185))
-- Docs: Fix some typos. ([43175](https://github.com/WordPress/gutenberg/pull/43175))
-
+-   Add documentation for useRootPaddingAwareAlignments in theme.json. ([43463](https://github.com/WordPress/gutenberg/pull/43463))
+-   Comma is missing. ([43446](https://github.com/WordPress/gutenberg/pull/43446))
+-   Convert HTML to Markdown in changelog for 13.9. ([43324](https://github.com/WordPress/gutenberg/pull/43324))
+-   Handbook: Fix format API example link. ([43477](https://github.com/WordPress/gutenberg/pull/43477))
+-   Stabilize the useResourcePermissions hook. ([43268](https://github.com/WordPress/gutenberg/pull/43268))
+-   [Docs] Replace useState with edit in useEntityRecord usage examples. ([43270](https://github.com/WordPress/gutenberg/pull/43270))
+-   Block Editor Handbook: Added missing codetabs end marker. ([43185](https://github.com/WordPress/gutenberg/pull/43185))
+-   Docs: Fix some typos. ([43175](https://github.com/WordPress/gutenberg/pull/43175))
 
 ### Code Quality
 
-- PHP: Use str_contains(). ([43382](https://github.com/WordPress/gutenberg/pull/43382))
-- PHP: Use str_starts_with. ([43410](https://github.com/WordPress/gutenberg/pull/43410))
-- Style engine: Pass options to CSS static methods. ([43399](https://github.com/WordPress/gutenberg/pull/43399))
-- Style engine tweaks. ([43303](https://github.com/WordPress/gutenberg/pull/43303))
-- Navigation block - minor refactor to classic menu conversion code. ([43081](https://github.com/WordPress/gutenberg/pull/43081))
-- Data: Bundle TypeScript types with the data package. ([43315](https://github.com/WordPress/gutenberg/pull/43315))
-- getTemplateInfo: Return stable reference to an empty object. ([43155](https://github.com/WordPress/gutenberg/pull/43155))
-- Remove duplicated 'import' comments. ([43478](https://github.com/WordPress/gutenberg/pull/43478))
-- Disabled: Migrate to TypeScript. ([42708](https://github.com/WordPress/gutenberg/pull/42708))
+-   PHP: Use str_contains(). ([43382](https://github.com/WordPress/gutenberg/pull/43382))
+-   PHP: Use str_starts_with. ([43410](https://github.com/WordPress/gutenberg/pull/43410))
+-   Style engine: Pass options to CSS static methods. ([43399](https://github.com/WordPress/gutenberg/pull/43399))
+-   Style engine tweaks. ([43303](https://github.com/WordPress/gutenberg/pull/43303))
+-   Navigation block - minor refactor to classic menu conversion code. ([43081](https://github.com/WordPress/gutenberg/pull/43081))
+-   Data: Bundle TypeScript types with the data package. ([43315](https://github.com/WordPress/gutenberg/pull/43315))
+-   getTemplateInfo: Return stable reference to an empty object. ([43155](https://github.com/WordPress/gutenberg/pull/43155))
+-   Remove duplicated 'import' comments. ([43478](https://github.com/WordPress/gutenberg/pull/43478))
+-   Disabled: Migrate to TypeScript. ([42708](https://github.com/WordPress/gutenberg/pull/42708))
 
 #### Components
-- Clean up unused and duplicate `COLORS` values. ([43445](https://github.com/WordPress/gutenberg/pull/43445))
-- Packages: Ensure dependencies use version ranges. ([43355](https://github.com/WordPress/gutenberg/pull/43355))
-- Swatch: Remove component in favor of ColorIndicator. ([43068](https://github.com/WordPress/gutenberg/pull/43068))
-- Update/floating UI version. ([43206](https://github.com/WordPress/gutenberg/pull/43206))
+
+-   Clean up unused and duplicate `COLORS` values. ([43445](https://github.com/WordPress/gutenberg/pull/43445))
+-   Packages: Ensure dependencies use version ranges. ([43355](https://github.com/WordPress/gutenberg/pull/43355))
+-   Swatch: Remove component in favor of ColorIndicator. ([43068](https://github.com/WordPress/gutenberg/pull/43068))
+-   Update/floating UI version. ([43206](https://github.com/WordPress/gutenberg/pull/43206))
 
 #### List View
-- Block list: Update block list view preferences name for consistency. ([43494](https://github.com/WordPress/gutenberg/pull/43494))
+
+-   Block list: Update block list view preferences name for consistency. ([43494](https://github.com/WordPress/gutenberg/pull/43494))
 
 #### Widgets Editor
-- Use useResourcePermissions in block-library and the widgets editor. ([43305](https://github.com/WordPress/gutenberg/pull/43305))
+
+-   Use useResourcePermissions in block-library and the widgets editor. ([43305](https://github.com/WordPress/gutenberg/pull/43305))
 
 #### Block Editor
-- Rich Text: Eliminate second scan when getting text content. ([43207](https://github.com/WordPress/gutenberg/pull/43207))
+
+-   Rich Text: Eliminate second scan when getting text content. ([43207](https://github.com/WordPress/gutenberg/pull/43207))
 
 #### Global Styles
-- Theme_JSON: Use existing append_to_selector for pseudo-elements. ([43167](https://github.com/WordPress/gutenberg/pull/43167))
-- Enable appearance tools via theme_support. ([43337](https://github.com/WordPress/gutenberg/pull/43337))
 
+-   Theme_JSON: Use existing append_to_selector for pseudo-elements. ([43167](https://github.com/WordPress/gutenberg/pull/43167))
+-   Enable appearance tools via theme_support. ([43337](https://github.com/WordPress/gutenberg/pull/43337))
 
 #### Testing
-- Migrate wp editor meta box test to Playwright. ([41519](https://github.com/WordPress/gutenberg/pull/41519))
-- PHPCS: Exclude PHPUnit tests from file and class name sniffs (for Core parity). ([43131](https://github.com/WordPress/gutenberg/pull/43131))
-- PHPUnit: Let PHPUnit Polyfills match PHPUnit version. ([43334](https://github.com/WordPress/gutenberg/pull/43334))
-- PHPUnit: Turns on PHP notices and deprecations. ([43102](https://github.com/WordPress/gutenberg/pull/43102))
-- Update incorrect quote end-to-end test snapshot. ([43407](https://github.com/WordPress/gutenberg/pull/43407))
-- Update test fixture for performance test. ([43359](https://github.com/WordPress/gutenberg/pull/43359))
-- Quote: Stabilise flaky end-to-end test. ([43460](https://github.com/WordPress/gutenberg/pull/43460))
+
+-   Migrate wp editor meta box test to Playwright. ([41519](https://github.com/WordPress/gutenberg/pull/41519))
+-   PHPCS: Exclude PHPUnit tests from file and class name sniffs (for Core parity). ([43131](https://github.com/WordPress/gutenberg/pull/43131))
+-   PHPUnit: Let PHPUnit Polyfills match PHPUnit version. ([43334](https://github.com/WordPress/gutenberg/pull/43334))
+-   PHPUnit: Turns on PHP notices and deprecations. ([43102](https://github.com/WordPress/gutenberg/pull/43102))
+-   Update incorrect quote end-to-end test snapshot. ([43407](https://github.com/WordPress/gutenberg/pull/43407))
+-   Update test fixture for performance test. ([43359](https://github.com/WordPress/gutenberg/pull/43359))
+-   Quote: Stabilise flaky end-to-end test. ([43460](https://github.com/WordPress/gutenberg/pull/43460))
 
 #### Build Tooling
-- Build Tools: Fix typo in performance tests workflow. ([43153](https://github.com/WordPress/gutenberg/pull/43153))
-- Packages: Update the minimum required Node.js version to 14 for tools. ([43141](https://github.com/WordPress/gutenberg/pull/43141))
-- ESLint Plugin: Remove all rules targeting test files from recommended presets. ([43272](https://github.com/WordPress/gutenberg/pull/43272))
-- Ignore library CSS and built CSS in stylelint. ([42027](https://github.com/WordPress/gutenberg/pull/42027))
-- Fix 'Mark issues stale after needs testing for 30 days' workflow. ([43545](https://github.com/WordPress/gutenberg/pull/43545))
+
+-   Build Tools: Fix typo in performance tests workflow. ([43153](https://github.com/WordPress/gutenberg/pull/43153))
+-   Packages: Update the minimum required Node.js version to 14 for tools. ([43141](https://github.com/WordPress/gutenberg/pull/43141))
+-   ESLint Plugin: Remove all rules targeting test files from recommended presets. ([43272](https://github.com/WordPress/gutenberg/pull/43272))
+-   Ignore library CSS and built CSS in stylelint. ([42027](https://github.com/WordPress/gutenberg/pull/42027))
+-   Fix 'Mark issues stale after needs testing for 30 days' workflow. ([43545](https://github.com/WordPress/gutenberg/pull/43545))
 
 #### npm Packages
-- Packages: Replace `is-plain-obj` with `is-plain-object`. ([43511](https://github.com/WordPress/gutenberg/pull/43511))
 
+-   Packages: Replace `is-plain-obj` with `is-plain-object`. ([43511](https://github.com/WordPress/gutenberg/pull/43511))
 
 #### Components
-- (Custom)GradientPicker: Add flag to remove margins. ([43387](https://github.com/WordPress/gutenberg/pull/43387))
-- AlignmentMatrixControl: Improve stories. ([43438](https://github.com/WordPress/gutenberg/pull/43438))
-- AnglePickerControl: Add flag to remove bottom margin. ([43160](https://github.com/WordPress/gutenberg/pull/43160))
-- ComboboxControl: Add flag to remove bottom margin. ([43165](https://github.com/WordPress/gutenberg/pull/43165))
-- CustomSelectControl: Deprecate constrained width style. ([43230](https://github.com/WordPress/gutenberg/pull/43230))
-- DuotonePicker/DuotoneSwatch: Add stories. ([43225](https://github.com/WordPress/gutenberg/pull/43225))
-- Storybook: Add margin checker tool. ([43223](https://github.com/WordPress/gutenberg/pull/43223))
-- ToggleGroupControl: Improve stories for documentation view. ([43265](https://github.com/WordPress/gutenberg/pull/43265))
-- ToolsPanel: Tighten grid gaps. ([43424](https://github.com/WordPress/gutenberg/pull/43424))
+
+-   (Custom)GradientPicker: Add flag to remove margins. ([43387](https://github.com/WordPress/gutenberg/pull/43387))
+-   AlignmentMatrixControl: Improve stories. ([43438](https://github.com/WordPress/gutenberg/pull/43438))
+-   AnglePickerControl: Add flag to remove bottom margin. ([43160](https://github.com/WordPress/gutenberg/pull/43160))
+-   ComboboxControl: Add flag to remove bottom margin. ([43165](https://github.com/WordPress/gutenberg/pull/43165))
+-   CustomSelectControl: Deprecate constrained width style. ([43230](https://github.com/WordPress/gutenberg/pull/43230))
+-   DuotonePicker/DuotoneSwatch: Add stories. ([43225](https://github.com/WordPress/gutenberg/pull/43225))
+-   Storybook: Add margin checker tool. ([43223](https://github.com/WordPress/gutenberg/pull/43223))
+-   ToggleGroupControl: Improve stories for documentation view. ([43265](https://github.com/WordPress/gutenberg/pull/43265))
+-   ToolsPanel: Tighten grid gaps. ([43424](https://github.com/WordPress/gutenberg/pull/43424))
 
 #### Block Library
-- Buttons: Update selectors to work better with button elements. ([43022](https://github.com/WordPress/gutenberg/pull/43022))
-- Comments block: Remove empty block wrapper. ([43383](https://github.com/WordPress/gutenberg/pull/43383))
-- Group block: Update description to remove "layout." ([43498](https://github.com/WordPress/gutenberg/pull/43498))
-- Image: Try different resting state for placeholder, alternate version. ([43180](https://github.com/WordPress/gutenberg/pull/43180))
-- Navigation: Try to improve the appender in an empty block. ([43115](https://github.com/WordPress/gutenberg/pull/43115))
-- Polish placeholder radius and enable duotone on image setup state. ([43425](https://github.com/WordPress/gutenberg/pull/43425))
-- Pullquote: Use inline rich text instead of multiline. ([43210](https://github.com/WordPress/gutenberg/pull/43210))
-- [Blocks] Paragraph and Heading: Add gradient support. ([43119](https://github.com/WordPress/gutenberg/pull/43119))
+
+-   Buttons: Update selectors to work better with button elements. ([43022](https://github.com/WordPress/gutenberg/pull/43022))
+-   Comments block: Remove empty block wrapper. ([43383](https://github.com/WordPress/gutenberg/pull/43383))
+-   Group block: Update description to remove "layout." ([43498](https://github.com/WordPress/gutenberg/pull/43498))
+-   Image: Try different resting state for placeholder, alternate version. ([43180](https://github.com/WordPress/gutenberg/pull/43180))
+-   Navigation: Try to improve the appender in an empty block. ([43115](https://github.com/WordPress/gutenberg/pull/43115))
+-   Polish placeholder radius and enable duotone on image setup state. ([43425](https://github.com/WordPress/gutenberg/pull/43425))
+-   Pullquote: Use inline rich text instead of multiline. ([43210](https://github.com/WordPress/gutenberg/pull/43210))
+-   [Blocks] Paragraph and Heading: Add gradient support. ([43119](https://github.com/WordPress/gutenberg/pull/43119))
 
 #### Patterns
-- Bundle new collection of Header and Footer block patterns. ([43157](https://github.com/WordPress/gutenberg/pull/43157))
-- Mark which attributes of the image should be considered content. ([43280](https://github.com/WordPress/gutenberg/pull/43280))
-- Prefer _x() for i18n context in core patterns. ([43409](https://github.com/WordPress/gutenberg/pull/43409))
+
+-   Bundle new collection of Header and Footer block patterns. ([43157](https://github.com/WordPress/gutenberg/pull/43157))
+-   Mark which attributes of the image should be considered content. ([43280](https://github.com/WordPress/gutenberg/pull/43280))
+-   Prefer \_x() for i18n context in core patterns. ([43409](https://github.com/WordPress/gutenberg/pull/43409))
 
 #### Design Tools
-- Add margin and padding supports to Audio block. ([43351](https://github.com/WordPress/gutenberg/pull/43351))
-- Add margin/padding support to Archives block. ([43350](https://github.com/WordPress/gutenberg/pull/43350))
+
+-   Add margin and padding supports to Audio block. ([43351](https://github.com/WordPress/gutenberg/pull/43351))
+-   Add margin/padding support to Archives block. ([43350](https://github.com/WordPress/gutenberg/pull/43350))
 
 #### Global Styles
-- Add documentation about spacing presets. ([43349](https://github.com/WordPress/gutenberg/pull/43349))
-- Spacing presets: Add editor UI support. ([42173](https://github.com/WordPress/gutenberg/pull/42173))
+
+-   Add documentation about spacing presets. ([43349](https://github.com/WordPress/gutenberg/pull/43349))
+-   Spacing presets: Add editor UI support. ([42173](https://github.com/WordPress/gutenberg/pull/42173))
 
 #### Site Editor
-- [Site Editor]: Add success notice upon template creation. ([43430](https://github.com/WordPress/gutenberg/pull/43430))
+
+-   [Site Editor]: Add success notice upon template creation. ([43430](https://github.com/WordPress/gutenberg/pull/43430))
 
 #### CSS & Styling
-- Style engine: Use style engine for block supports CSS in editor. ([43055](https://github.com/WordPress/gutenberg/pull/43055))
-- Style engine: Remove `enqueue` flag. ([43103](https://github.com/WordPress/gutenberg/pull/43103))
+
+-   Style engine: Use style engine for block supports CSS in editor. ([43055](https://github.com/WordPress/gutenberg/pull/43055))
+-   Style engine: Remove `enqueue` flag. ([43103](https://github.com/WordPress/gutenberg/pull/43103))
 
 #### Block Editor
-- Merging blocks: Allow x to be merged into wrapper blocks (quote, list, group...). ([42780](https://github.com/WordPress/gutenberg/pull/42780))
+
+-   Merging blocks: Allow x to be merged into wrapper blocks (quote, list, group...). ([42780](https://github.com/WordPress/gutenberg/pull/42780))
 
 ### Tools
 
 #### Testing
-- Refactor `Button` tests to `@testing-library/react`. ([42981](https://github.com/WordPress/gutenberg/pull/42981))
-- Refactor `Guide` `PageControl` tests to @testing-library/react. ([43148](https://github.com/WordPress/gutenberg/pull/43148))
-- Refactor `MenuGroup` tests to `@testing-library/react`. ([43275](https://github.com/WordPress/gutenberg/pull/43275))
-- Refactor `withSpokenMessages` tests to `@testing-library`. ([43273](https://github.com/WordPress/gutenberg/pull/43273))
-- Editor: Refactor `PostAuthorCheck` tests to `@testing-library`. ([43176](https://github.com/WordPress/gutenberg/pull/43176))
-- Editor: Refactor `ThemeSupportCheck` tests to `@testing-library/react`. ([43532](https://github.com/WordPress/gutenberg/pull/43532))
-- Editor: Refactor a few component tests to `@testing-library/react`. ([43376](https://github.com/WordPress/gutenberg/pull/43376))
-- Components: Refactor Placeholder tests to @testing-library/react. ([43069](https://github.com/WordPress/gutenberg/pull/43069))
-- Components: Refactor `Tooltip` tests to `@testing-library/react`. ([43061](https://github.com/WordPress/gutenberg/pull/43061))
 
-## First time contributors
+-   Refactor `Button` tests to `@testing-library/react`. ([42981](https://github.com/WordPress/gutenberg/pull/42981))
+-   Refactor `Guide` `PageControl` tests to @testing-library/react. ([43148](https://github.com/WordPress/gutenberg/pull/43148))
+-   Refactor `MenuGroup` tests to `@testing-library/react`. ([43275](https://github.com/WordPress/gutenberg/pull/43275))
+-   Refactor `withSpokenMessages` tests to `@testing-library`. ([43273](https://github.com/WordPress/gutenberg/pull/43273))
+-   Editor: Refactor `PostAuthorCheck` tests to `@testing-library`. ([43176](https://github.com/WordPress/gutenberg/pull/43176))
+-   Editor: Refactor `ThemeSupportCheck` tests to `@testing-library/react`. ([43532](https://github.com/WordPress/gutenberg/pull/43532))
+-   Editor: Refactor a few component tests to `@testing-library/react`. ([43376](https://github.com/WordPress/gutenberg/pull/43376))
+-   Components: Refactor Placeholder tests to @testing-library/react. ([43069](https://github.com/WordPress/gutenberg/pull/43069))
+-   Components: Refactor `Tooltip` tests to `@testing-library/react`. ([43061](https://github.com/WordPress/gutenberg/pull/43061))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @drzraf: taxonomy-controls.js: Change REST context to "view" when fetching taxonomy terms. ([43274](https://github.com/WordPress/gutenberg/pull/43274))
-- @markbiek: ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. ([42942](https://github.com/WordPress/gutenberg/pull/42942))
-- @randhirexpresstech: Add font family and text-decoration typography supports to paragraph blocks. ([39642](https://github.com/WordPress/gutenberg/pull/39642))
-- @Rink9: Migrate wp editor meta box test to Playwright. ([41519](https://github.com/WordPress/gutenberg/pull/41519))
-- @titusdmoore: Add optional capture group to URL regex in wp-env. ([43200](https://github.com/WordPress/gutenberg/pull/43200))
+The following PRs were merged by first-time contributors:
 
+-   @drzraf: taxonomy-controls.js: Change REST context to "view" when fetching taxonomy terms. ([43274](https://github.com/WordPress/gutenberg/pull/43274))
+-   @markbiek: ComboboxControl: Normalize hyphen-like Unicode characters to ASCII hyphens when matching search queries. ([42942](https://github.com/WordPress/gutenberg/pull/42942))
+-   @randhirexpresstech: Add font family and text-decoration typography supports to paragraph blocks. ([39642](https://github.com/WordPress/gutenberg/pull/39642))
+-   @Rink9: Migrate wp editor meta box test to Playwright. ([41519](https://github.com/WordPress/gutenberg/pull/41519))
+-   @titusdmoore: Add optional capture group to URL regex in wp-env. ([43200](https://github.com/WordPress/gutenberg/pull/43200))
 
 ## Contributors
 
@@ -2183,7 +26201,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @afercia @andrewserong @aristath @awps @carolinan @ciampo @derekblank @dinhtungdu @dmsnell @draganescu @drzraf @ellatrix @geriux @glendaviesnz @gziolo @hellofromtonya @hz-tyfoon @jasmussen @jostnes @kdevnel @MaggieCabrera @Mamaduka @markbiek @matiasbenedetto @mcsf @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ockham @paulopmt1 @pbking @ramonjd @randhirexpresstech @Rink9 @ryanwelcher @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @titusdmoore @torounit @tyxla @walbo
 
-
 = 13.9.0 =
 
 ## Changelog
@@ -2192,278 +26209,280 @@ The following contributors merged PRs in this release:
 
 #### Block Library
 
-- Archives: Add a control to make block's dropdown label invisible. ([43025](https://github.com/WordPress/gutenberg/pull/43025))
-- Media&Text: Add help to ImageSizeControl. ([40642](https://github.com/WordPress/gutenberg/pull/40642))
-- Navigation: Move overlay colors to the responsive wrapper. ([42875](https://github.com/WordPress/gutenberg/pull/42875))
-- Navigation: Extract navigation block utils. ([42865](https://github.com/WordPress/gutenberg/pull/42865))
-- Navigation: Fix link inheritance in overlay. ([42929](https://github.com/WordPress/gutenberg/pull/42929))
-- Post Author: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
-- Post Featured Image: Add link target and rel attributes. ([42853](https://github.com/WordPress/gutenberg/pull/42853))
-- Post Title: Do not add `rel` attribute if empty. ([42855](https://github.com/WordPress/gutenberg/pull/42855))
-- Query Pagination: Correctly position the "next" link on the first page. ([42764](https://github.com/WordPress/gutenberg/pull/42764))
-- Query Title: Add a search title variation. ([42662](https://github.com/WordPress/gutenberg/pull/42662))
-- Quote: Unwrap on Backspace at start. ([42808](https://github.com/WordPress/gutenberg/pull/42808))
-- Search Block: Remove margins from the input. ([42959](https://github.com/WordPress/gutenberg/pull/42959))
-- Transforms: Add group unwrap. ([42685](https://github.com/WordPress/gutenberg/pull/42685))
-
-#### Components
-
-- BaseControl: Add `box-sizing` reset. ([42889](https://github.com/WordPress/gutenberg/pull/42889))
-- BorderControl: Add `box-sizing` reset. ([42754](https://github.com/WordPress/gutenberg/pull/42754))
-- BoxControl: Export `applyValueToSides` util function. ([42733](https://github.com/WordPress/gutenberg/pull/42733))
-- ComboboxControl and FormTokenField: Enhance components with custom render callback for options. ([42597](https://github.com/WordPress/gutenberg/pull/42597))
-- ComboboxControl: Add support for uncontrolled mode. ([42752](https://github.com/WordPress/gutenberg/pull/42752))
-- Flex: Convert component to TypeScript. ([42537](https://github.com/WordPress/gutenberg/pull/42537))
-- FontSizePicker: Add 40px size variant. ([42716](https://github.com/WordPress/gutenberg/pull/42716))
-- List View Expander: Fix icon in RTL mode. ([42997](https://github.com/WordPress/gutenberg/pull/42997))
-- Placeholder: Convert component to TypeScript. ([42990](https://github.com/WordPress/gutenberg/pull/42990))
-- Popover: Rewrite Storybook examples using controls. ([42903](https://github.com/WordPress/gutenberg/pull/42903))
-- Popover: Tidy up code, add more comments. ([42944](https://github.com/WordPress/gutenberg/pull/42944))
-- ResizableBox: Change tooltip background to match other tooltips. ([42800](https://github.com/WordPress/gutenberg/pull/42800))
-- Storybook: Add global CSS switcher. ([42747](https://github.com/WordPress/gutenberg/pull/42747))
-- StyleProvider: Convert component to TypeScript. ([42541](https://github.com/WordPress/gutenberg/pull/42541))
-- Swatch: Convert component to TypeScript. ([42162](https://github.com/WordPress/gutenberg/pull/42162))
-- Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. ([42844](https://github.com/WordPress/gutenberg/pull/42844))
-- Typography Panel: Fix font appearance control width. ([42795](https://github.com/WordPress/gutenberg/pull/42795))
-- UnitControl: Update unit dropdown design. ([42000](https://github.com/WordPress/gutenberg/pull/42000))
-- Update control labels to the new uppercase styles. ([42789](https://github.com/WordPress/gutenberg/pull/42789))
+-   Archives: Add a control to make block's dropdown label invisible. ([43025](https://github.com/WordPress/gutenberg/pull/43025))
+-   Media&Text: Add help to ImageSizeControl. ([40642](https://github.com/WordPress/gutenberg/pull/40642))
+-   Navigation: Move overlay colors to the responsive wrapper. ([42875](https://github.com/WordPress/gutenberg/pull/42875))
+-   Navigation: Extract navigation block utils. ([42865](https://github.com/WordPress/gutenberg/pull/42865))
+-   Navigation: Fix link inheritance in overlay. ([42929](https://github.com/WordPress/gutenberg/pull/42929))
+-   Post Author: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+-   Post Featured Image: Add link target and rel attributes. ([42853](https://github.com/WordPress/gutenberg/pull/42853))
+-   Post Title: Do not add `rel` attribute if empty. ([42855](https://github.com/WordPress/gutenberg/pull/42855))
+-   Query Pagination: Correctly position the "next" link on the first page. ([42764](https://github.com/WordPress/gutenberg/pull/42764))
+-   Query Title: Add a search title variation. ([42662](https://github.com/WordPress/gutenberg/pull/42662))
+-   Quote: Unwrap on Backspace at start. ([42808](https://github.com/WordPress/gutenberg/pull/42808))
+-   Search Block: Remove margins from the input. ([42959](https://github.com/WordPress/gutenberg/pull/42959))
+-   Transforms: Add group unwrap. ([42685](https://github.com/WordPress/gutenberg/pull/42685))
+
+#### Components
+
+-   BaseControl: Add `box-sizing` reset. ([42889](https://github.com/WordPress/gutenberg/pull/42889))
+-   BorderControl: Add `box-sizing` reset. ([42754](https://github.com/WordPress/gutenberg/pull/42754))
+-   BoxControl: Export `applyValueToSides` util function. ([42733](https://github.com/WordPress/gutenberg/pull/42733))
+-   ComboboxControl and FormTokenField: Enhance components with custom render callback for options. ([42597](https://github.com/WordPress/gutenberg/pull/42597))
+-   ComboboxControl: Add support for uncontrolled mode. ([42752](https://github.com/WordPress/gutenberg/pull/42752))
+-   Flex: Convert component to TypeScript. ([42537](https://github.com/WordPress/gutenberg/pull/42537))
+-   FontSizePicker: Add 40px size variant. ([42716](https://github.com/WordPress/gutenberg/pull/42716))
+-   List View Expander: Fix icon in RTL mode. ([42997](https://github.com/WordPress/gutenberg/pull/42997))
+-   Placeholder: Convert component to TypeScript. ([42990](https://github.com/WordPress/gutenberg/pull/42990))
+-   Popover: Rewrite Storybook examples using controls. ([42903](https://github.com/WordPress/gutenberg/pull/42903))
+-   Popover: Tidy up code, add more comments. ([42944](https://github.com/WordPress/gutenberg/pull/42944))
+-   ResizableBox: Change tooltip background to match other tooltips. ([42800](https://github.com/WordPress/gutenberg/pull/42800))
+-   Storybook: Add global CSS switcher. ([42747](https://github.com/WordPress/gutenberg/pull/42747))
+-   StyleProvider: Convert component to TypeScript. ([42541](https://github.com/WordPress/gutenberg/pull/42541))
+-   Swatch: Convert component to TypeScript. ([42162](https://github.com/WordPress/gutenberg/pull/42162))
+-   Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. ([42844](https://github.com/WordPress/gutenberg/pull/42844))
+-   Typography Panel: Fix font appearance control width. ([42795](https://github.com/WordPress/gutenberg/pull/42795))
+-   UnitControl: Update unit dropdown design. ([42000](https://github.com/WordPress/gutenberg/pull/42000))
+-   Update control labels to the new uppercase styles. ([42789](https://github.com/WordPress/gutenberg/pull/42789))
 
 #### Reusable Blocks
 
-- Make template part and reusable block creation language consistent. ([43032](https://github.com/WordPress/gutenberg/pull/43032))
+-   Make template part and reusable block creation language consistent. ([43032](https://github.com/WordPress/gutenberg/pull/43032))
 
 #### CSS & Styling
 
-- Rename solid color. ([42918](https://github.com/WordPress/gutenberg/pull/42918))
-- Tab style subpixel fix. ([42892](https://github.com/WordPress/gutenberg/pull/42892))
-- Navigation: Try to keep :Where just for paddings. ([42967](https://github.com/WordPress/gutenberg/pull/42967))
+-   Rename solid color. ([42918](https://github.com/WordPress/gutenberg/pull/42918))
+-   Tab style subpixel fix. ([42892](https://github.com/WordPress/gutenberg/pull/42892))
+-   Navigation: Try to keep :Where just for paddings. ([42967](https://github.com/WordPress/gutenberg/pull/42967))
 
 #### Global Styles
 
-- Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. ([42544](https://github.com/WordPress/gutenberg/pull/42544))
-- Enable alpha (opacity) in Global Styles color pickers. ([43045](https://github.com/WordPress/gutenberg/pull/43045))
-- Add block spacing to root block support UI. ([42797](https://github.com/WordPress/gutenberg/pull/42797))
-- Elements: Update the load order of the CSS in the Site Editor. ([42863](https://github.com/WordPress/gutenberg/pull/42863))
-- Heading element UI controls. ([42176](https://github.com/WordPress/gutenberg/pull/42176))
-- Theme JSON: Add a static $blocks\_metadata data definition to the Gutenberg instance of WP\_Theme\_JSON. ([42776](https://github.com/WordPress/gutenberg/pull/42776))
-- Upsize typography panel components. ([42718](https://github.com/WordPress/gutenberg/pull/42718))
+-   Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. ([42544](https://github.com/WordPress/gutenberg/pull/42544))
+-   Enable alpha (opacity) in Global Styles color pickers. ([43045](https://github.com/WordPress/gutenberg/pull/43045))
+-   Add block spacing to root block support UI. ([42797](https://github.com/WordPress/gutenberg/pull/42797))
+-   Elements: Update the load order of the CSS in the Site Editor. ([42863](https://github.com/WordPress/gutenberg/pull/42863))
+-   Heading element UI controls. ([42176](https://github.com/WordPress/gutenberg/pull/42176))
+-   Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. ([42776](https://github.com/WordPress/gutenberg/pull/42776))
+-   Upsize typography panel components. ([42718](https://github.com/WordPress/gutenberg/pull/42718))
 
 #### Design Tools
 
-- Cover: Show Resize Tooltip on Drag. ([23522](https://github.com/WordPress/gutenberg/pull/23522))
-- Update color button style. ([41838](https://github.com/WordPress/gutenberg/pull/41838))
-- Add explicit bypass for fluid font size calculation. ([42757](https://github.com/WordPress/gutenberg/pull/42757))
+-   Cover: Show Resize Tooltip on Drag. ([23522](https://github.com/WordPress/gutenberg/pull/23522))
+-   Update color button style. ([41838](https://github.com/WordPress/gutenberg/pull/41838))
+-   Add explicit bypass for fluid font size calculation. ([42757](https://github.com/WordPress/gutenberg/pull/42757))
 
 #### Post Editor
 
-- Post Template: Update template title selector. ([42091](https://github.com/WordPress/gutenberg/pull/42091))
+-   Post Template: Update template title selector. ([42091](https://github.com/WordPress/gutenberg/pull/42091))
 
 #### Site Editor
 
-- Add author nicename template creation ability. ([42165](https://github.com/WordPress/gutenberg/pull/42165))
-- Add fallback template content on creation. ([42520](https://github.com/WordPress/gutenberg/pull/42520))
-- Add a 'View Site' link in the site editor. ([42331](https://github.com/WordPress/gutenberg/pull/42331))
-- Update `clear customizations` copy for templates. ([41765](https://github.com/WordPress/gutenberg/pull/41765))
+-   Add author nicename template creation ability. ([42165](https://github.com/WordPress/gutenberg/pull/42165))
+-   Add fallback template content on creation. ([42520](https://github.com/WordPress/gutenberg/pull/42520))
+-   Add a 'View Site' link in the site editor. ([42331](https://github.com/WordPress/gutenberg/pull/42331))
+-   Update `clear customizations` copy for templates. ([41765](https://github.com/WordPress/gutenberg/pull/41765))
 
 #### Widgets Editor
 
-- Format Library: Add missing keyboard shortcut description in customizer widget. ([43044](https://github.com/WordPress/gutenberg/pull/43044))
+-   Format Library: Add missing keyboard shortcut description in customizer widget. ([43044](https://github.com/WordPress/gutenberg/pull/43044))
 
 #### Block Editor
 
-- Rich text: Add character shortcuts for wrapping selection. ([42469](https://github.com/WordPress/gutenberg/pull/42469))
+-   Rich text: Add character shortcuts for wrapping selection. ([42469](https://github.com/WordPress/gutenberg/pull/42469))
 
 #### Block Directory
 
-- Modernize `DownloadableBlockListItem` tests. ([43026](https://github.com/WordPress/gutenberg/pull/43026))
+-   Modernize `DownloadableBlockListItem` tests. ([43026](https://github.com/WordPress/gutenberg/pull/43026))
 
 ### Bug Fixes
 
 #### Accessibility
 
-- Fix issue where changing the id of the recursion provider can result in focus loss. ([42916](https://github.com/WordPress/gutenberg/pull/42916))
-- Site Editor: Don't disable the Save button. ([42842](https://github.com/WordPress/gutenberg/pull/42842))
+-   Fix issue where changing the id of the recursion provider can result in focus loss. ([42916](https://github.com/WordPress/gutenberg/pull/42916))
+-   Site Editor: Don't disable the Save button. ([42842](https://github.com/WordPress/gutenberg/pull/42842))
 
 #### Components
 
-- Block Styles: Truncate long button labels. ([42975](https://github.com/WordPress/gutenberg/pull/42975))
-- ColorGradientControl: Fix awkward padding in popover. ([43018](https://github.com/WordPress/gutenberg/pull/43018))
-- ColorPicker: Fix layout overflow. ([42992](https://github.com/WordPress/gutenberg/pull/42992))
-- External link component: Add a check for on page anchor links. ([42259](https://github.com/WordPress/gutenberg/pull/42259))
-- Icons: Fix storybook library icon names. ([43034](https://github.com/WordPress/gutenberg/pull/43034))
-- InputControl: Fix acceptance of falsy values in controlled updates. ([42484](https://github.com/WordPress/gutenberg/pull/42484))
-- InputControl: Fix incorrect size prop passing to `Text`. ([42793](https://github.com/WordPress/gutenberg/pull/42793))
-- Popover: Anchor correctly to parent node when no explicit anchor is passed. ([42971](https://github.com/WordPress/gutenberg/pull/42971))
-- Popover: Fix arrow placement and design. ([42874](https://github.com/WordPress/gutenberg/pull/42874))
-- Popover: Improve iframe offset computation. ([42417](https://github.com/WordPress/gutenberg/pull/42417))
-- Popover: Make sure that ownerDocument is always defined. ([42886](https://github.com/WordPress/gutenberg/pull/42886))
+-   Block Styles: Truncate long button labels. ([42975](https://github.com/WordPress/gutenberg/pull/42975))
+-   ColorGradientControl: Fix awkward padding in popover. ([43018](https://github.com/WordPress/gutenberg/pull/43018))
+-   ColorPicker: Fix layout overflow. ([42992](https://github.com/WordPress/gutenberg/pull/42992))
+-   External link component: Add a check for on page anchor links. ([42259](https://github.com/WordPress/gutenberg/pull/42259))
+-   Icons: Fix storybook library icon names. ([43034](https://github.com/WordPress/gutenberg/pull/43034))
+-   InputControl: Fix acceptance of falsy values in controlled updates. ([42484](https://github.com/WordPress/gutenberg/pull/42484))
+-   InputControl: Fix incorrect size prop passing to `Text`. ([42793](https://github.com/WordPress/gutenberg/pull/42793))
+-   Popover: Anchor correctly to parent node when no explicit anchor is passed. ([42971](https://github.com/WordPress/gutenberg/pull/42971))
+-   Popover: Fix arrow placement and design. ([42874](https://github.com/WordPress/gutenberg/pull/42874))
+-   Popover: Improve iframe offset computation. ([42417](https://github.com/WordPress/gutenberg/pull/42417))
+-   Popover: Make sure that ownerDocument is always defined. ([42886](https://github.com/WordPress/gutenberg/pull/42886))
 
 #### Block Library
 
-- Disabled blocks passed to BlockTypesList are no longer draggable. ([42751](https://github.com/WordPress/gutenberg/pull/42751))
-- Fix drag and drop performance when dragging over the insertion point. ([42806](https://github.com/WordPress/gutenberg/pull/42806))
-- LatestPost: Fix issue with floated featured images overflowing focus style. ([40663](https://github.com/WordPress/gutenberg/pull/40663))
-- List v2: Fix Cmd+A. ([42858](https://github.com/WordPress/gutenberg/pull/42858))
-- Media&Text: Round position attribute on focal point save. ([33915](https://github.com/WordPress/gutenberg/pull/33915))
-- Navigation: Fix `current-menu-item` class logic. ([42849](https://github.com/WordPress/gutenberg/pull/42849))
-- Navigation: Fix invalid permissions warning by avoiding using trashed wp\_navigation posts (JS implementation). ([42982](https://github.com/WordPress/gutenberg/pull/42982))
-- Separator: Fix the block CSS classes in the editor. ([42769](https://github.com/WordPress/gutenberg/pull/42769))
-- Social Link: add missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
-- Social: Include has-visible-labels on edit component. ([42791](https://github.com/WordPress/gutenberg/pull/42791))
-- Tag Cloud: Fix alignment issue when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
-- Writing flow: Fix Shift+Arrow partial selection for lists & quote. ([42885](https://github.com/WordPress/gutenberg/pull/42885))
+-   Disabled blocks passed to BlockTypesList are no longer draggable. ([42751](https://github.com/WordPress/gutenberg/pull/42751))
+-   Fix drag and drop performance when dragging over the insertion point. ([42806](https://github.com/WordPress/gutenberg/pull/42806))
+-   LatestPost: Fix issue with floated featured images overflowing focus style. ([40663](https://github.com/WordPress/gutenberg/pull/40663))
+-   List v2: Fix Cmd+A. ([42858](https://github.com/WordPress/gutenberg/pull/42858))
+-   Media&Text: Round position attribute on focal point save. ([33915](https://github.com/WordPress/gutenberg/pull/33915))
+-   Navigation: Fix `current-menu-item` class logic. ([42849](https://github.com/WordPress/gutenberg/pull/42849))
+-   Navigation: Fix invalid permissions warning by avoiding using trashed wp_navigation posts (JS implementation). ([42982](https://github.com/WordPress/gutenberg/pull/42982))
+-   Separator: Fix the block CSS classes in the editor. ([42769](https://github.com/WordPress/gutenberg/pull/42769))
+-   Social Link: add missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+-   Social: Include has-visible-labels on edit component. ([42791](https://github.com/WordPress/gutenberg/pull/42791))
+-   Tag Cloud: Fix alignment issue when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
+-   Writing flow: Fix Shift+Arrow partial selection for lists & quote. ([42885](https://github.com/WordPress/gutenberg/pull/42885))
 
 #### CSS & Styling
 
-- Layout: Fix flex direction column. ([42939](https://github.com/WordPress/gutenberg/pull/42939))
-- Layout: Merge CSS rule for block gap. ([43052](https://github.com/WordPress/gutenberg/pull/43052))
-- Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp. ([43004](https://github.com/WordPress/gutenberg/pull/43004))
-- Style engine: Disable stylesheet optimization temporarily. ([43051](https://github.com/WordPress/gutenberg/pull/43051))
-- Style Engine: Defensive guarding for when style does not define 'individual' property. ([43122](https://github.com/WordPress/gutenberg/pull/43122))
+-   Layout: Fix flex direction column. ([42939](https://github.com/WordPress/gutenberg/pull/42939))
+-   Layout: Merge CSS rule for block gap. ([43052](https://github.com/WordPress/gutenberg/pull/43052))
+-   Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp. ([43004](https://github.com/WordPress/gutenberg/pull/43004))
+-   Style engine: Disable stylesheet optimization temporarily. ([43051](https://github.com/WordPress/gutenberg/pull/43051))
+-   Style Engine: Defensive guarding for when style does not define 'individual' property. ([43122](https://github.com/WordPress/gutenberg/pull/43122))
 
 #### Global Styles
 
-- Fix styles declarations returning before all properties output. ([42954](https://github.com/WordPress/gutenberg/pull/42954))
-- Fluid typography: Migrate fluid typography algorithm to JS for site editor. ([42688](https://github.com/WordPress/gutenberg/pull/42688))
-- Spacing presets: Prevent % spacing size units being stripped by sanitize\_title. ([43101](https://github.com/WordPress/gutenberg/pull/43101))
-- Specify priority in remove\_action. ([43073](https://github.com/WordPress/gutenberg/pull/43073))
+-   Fix styles declarations returning before all properties output. ([42954](https://github.com/WordPress/gutenberg/pull/42954))
+-   Fluid typography: Migrate fluid typography algorithm to JS for site editor. ([42688](https://github.com/WordPress/gutenberg/pull/42688))
+-   Spacing presets: Prevent % spacing size units being stripped by sanitize_title. ([43101](https://github.com/WordPress/gutenberg/pull/43101))
+-   Specify priority in remove_action. ([43073](https://github.com/WordPress/gutenberg/pull/43073))
 
 #### Block Editor
 
-- Inserter: Avoid warning when CRA is displayed. ([42723](https://github.com/WordPress/gutenberg/pull/42723))
-- Pasting: Dismiss pasted image if file:// schema detected. ([42785](https://github.com/WordPress/gutenberg/pull/42785))
-- Prevent multiselection via dragging when already dragging blocks. ([42877](https://github.com/WordPress/gutenberg/pull/42877))
-- Quote: Fix raw transform handler. ([43093](https://github.com/WordPress/gutenberg/pull/43093))
-- Rich text: Fix error when attempting to remove placeholder on composition start. ([42821](https://github.com/WordPress/gutenberg/pull/42821))
-- Paste from Slack: Interpret paragraph markup. ([43114](https://github.com/WordPress/gutenberg/pull/43114))
+-   Inserter: Avoid warning when CRA is displayed. ([42723](https://github.com/WordPress/gutenberg/pull/42723))
+-   Pasting: Dismiss pasted image if file:// schema detected. ([42785](https://github.com/WordPress/gutenberg/pull/42785))
+-   Prevent multiselection via dragging when already dragging blocks. ([42877](https://github.com/WordPress/gutenberg/pull/42877))
+-   Quote: Fix raw transform handler. ([43093](https://github.com/WordPress/gutenberg/pull/43093))
+-   Rich text: Fix error when attempting to remove placeholder on composition start. ([42821](https://github.com/WordPress/gutenberg/pull/42821))
+-   Paste from Slack: Interpret paragraph markup. ([43114](https://github.com/WordPress/gutenberg/pull/43114))
 
 #### Post Editor
 
-- Decode the post URL for the button label. ([42930](https://github.com/WordPress/gutenberg/pull/42930))
+-   Decode the post URL for the button label. ([42930](https://github.com/WordPress/gutenberg/pull/42930))
 
 #### Site Editor
 
-- Internalization fixes for site editor template creation. ([42762](https://github.com/WordPress/gutenberg/pull/42762))
-- Fix error in compileStyleValue. ([43116](https://github.com/WordPress/gutenberg/pull/43116))
+-   Internalization fixes for site editor template creation. ([42762](https://github.com/WordPress/gutenberg/pull/42762))
+-   Fix error in compileStyleValue. ([43116](https://github.com/WordPress/gutenberg/pull/43116))
 
 #### RichText
 
-- Firefox: Fix issue where it selects a nearby contentEditable. ([42777](https://github.com/WordPress/gutenberg/pull/42777))
+-   Firefox: Fix issue where it selects a nearby contentEditable. ([42777](https://github.com/WordPress/gutenberg/pull/42777))
 
 #### Build Tooling
 
-- Fix: CSS files don't build in dev mode on Windows. ([42041](https://github.com/WordPress/gutenberg/pull/42041))
-- Fix: Script name error in main package.json. ([43089](https://github.com/WordPress/gutenberg/pull/43089))
+-   Fix: CSS files don't build in dev mode on Windows. ([42041](https://github.com/WordPress/gutenberg/pull/42041))
+-   Fix: Script name error in main package.json. ([43089](https://github.com/WordPress/gutenberg/pull/43089))
 
 #### Testing
 
-- Fix: Just another end-to-end test. ([42947](https://github.com/WordPress/gutenberg/pull/42947))
+-   Fix: Just another end-to-end test. ([42947](https://github.com/WordPress/gutenberg/pull/42947))
 
 #### CreateBlock
 
-- Remove i18n references from save properties. ([43035](https://github.com/WordPress/gutenberg/pull/43035))
+-   Remove i18n references from save properties. ([43035](https://github.com/WordPress/gutenberg/pull/43035))
 
 ### Accessibility
 
-- Shortcuts: Add Ctrl+Y for redo on Windows. ([42627](https://github.com/WordPress/gutenberg/pull/42627))
-- Change shortcut text for redo tooltip on Windows. ([42830](https://github.com/WordPress/gutenberg/pull/42830))
+-   Shortcuts: Add Ctrl+Y for redo on Windows. ([42627](https://github.com/WordPress/gutenberg/pull/42627))
+-   Change shortcut text for redo tooltip on Windows. ([42830](https://github.com/WordPress/gutenberg/pull/42830))
 
 ### Performance
 
-- Lodash: Refactor away from `_.isMatch()`. ([42271](https://github.com/WordPress/gutenberg/pull/42271))
-- Lodash: Refactor away from `_.zip()`. ([42926](https://github.com/WordPress/gutenberg/pull/42926))
-- Lodash: Refactor away from `_.delay()`. ([42966](https://github.com/WordPress/gutenberg/pull/42966))
-- Lodash: Refactor away from `_.startsWith()`. ([43019](https://github.com/WordPress/gutenberg/pull/43019))
-- Lodash: Refactor away from `_.isPlainObject()`. ([42508](https://github.com/WordPress/gutenberg/pull/42508))
-- Lodash: Refactor away from `_.maxBy()`. ([42914](https://github.com/WordPress/gutenberg/pull/42914))
-- Lodash: Refactor Calendar block away from `moment`. ([43029](https://github.com/WordPress/gutenberg/pull/43029))
-- Lodash: Remove completely from `@wordpress/dom` package. ([42912](https://github.com/WordPress/gutenberg/pull/42912))
-- Lodash: Remove completely from `@wordpress/element` package. ([42898](https://github.com/WordPress/gutenberg/pull/42898))
+-   Lodash: Refactor away from `_.isMatch()`. ([42271](https://github.com/WordPress/gutenberg/pull/42271))
+-   Lodash: Refactor away from `_.zip()`. ([42926](https://github.com/WordPress/gutenberg/pull/42926))
+-   Lodash: Refactor away from `_.delay()`. ([42966](https://github.com/WordPress/gutenberg/pull/42966))
+-   Lodash: Refactor away from `_.startsWith()`. ([43019](https://github.com/WordPress/gutenberg/pull/43019))
+-   Lodash: Refactor away from `_.isPlainObject()`. ([42508](https://github.com/WordPress/gutenberg/pull/42508))
+-   Lodash: Refactor away from `_.maxBy()`. ([42914](https://github.com/WordPress/gutenberg/pull/42914))
+-   Lodash: Refactor Calendar block away from `moment`. ([43029](https://github.com/WordPress/gutenberg/pull/43029))
+-   Lodash: Remove completely from `@wordpress/dom` package. ([42912](https://github.com/WordPress/gutenberg/pull/42912))
+-   Lodash: Remove completely from `@wordpress/element` package. ([42898](https://github.com/WordPress/gutenberg/pull/42898))
 
 ### Experiments
 
 #### Style Engine
-- Enqueue block support styles. ([42452](https://github.com/WordPress/gutenberg/pull/42452)) ([42880](https://github.com/WordPress/gutenberg/pull/42880))
-- Prettify combined selectors. ([43003](https://github.com/WordPress/gutenberg/pull/43003))
-- Prettify output. ([42909](https://github.com/WordPress/gutenberg/pull/42909))
-- Rename global function. ([42719](https://github.com/WordPress/gutenberg/pull/42719))
-- Combine style-engine stores for block-supports. ([42970](https://github.com/WordPress/gutenberg/pull/42970))
-- Add optimize flag and combine functions into wp\_style\_engine\_get\_stylesheet. ([42878](https://github.com/WordPress/gutenberg/pull/42878))
+
+-   Enqueue block support styles. ([42452](https://github.com/WordPress/gutenberg/pull/42452)) ([42880](https://github.com/WordPress/gutenberg/pull/42880))
+-   Prettify combined selectors. ([43003](https://github.com/WordPress/gutenberg/pull/43003))
+-   Prettify output. ([42909](https://github.com/WordPress/gutenberg/pull/42909))
+-   Rename global function. ([42719](https://github.com/WordPress/gutenberg/pull/42719))
+-   Combine style-engine stores for block-supports. ([42970](https://github.com/WordPress/gutenberg/pull/42970))
+-   Add optimize flag and combine functions into wp_style_engine_get_stylesheet. ([42878](https://github.com/WordPress/gutenberg/pull/42878))
 
 ### Documentation
 
-- Add examples for `core/blocks` actions. ([42637](https://github.com/WordPress/gutenberg/pull/42637))
-- Add examples for core/viewport package. ([42921](https://github.com/WordPress/gutenberg/pull/42921))
-- Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
-- Adding `@example` entries to the public API exposed in `core/blocks`. ([42745](https://github.com/WordPress/gutenberg/pull/42745))
-- Cover: Fix rendered content PHPDoc type. ([43099](https://github.com/WordPress/gutenberg/pull/43099))
-- Create Block: Update document links in templates. ([42839](https://github.com/WordPress/gutenberg/pull/42839))
-- Fix return type of home link attribute function. ([42901](https://github.com/WordPress/gutenberg/pull/42901))
-- Fix textual consistency about block attributes. ([43075](https://github.com/WordPress/gutenberg/pull/43075))
-- Link plugins GitHub release pages. ([42736](https://github.com/WordPress/gutenberg/pull/42736))
-- Document the cherry-picking automation. ([42932](https://github.com/WordPress/gutenberg/pull/42932))
-- Fixed broken external link to Mozilla Developer documentation. ([43065](https://github.com/WordPress/gutenberg/pull/43065))
-- Release Docs: Troubleshooting failed "Bump version" job. ([42936](https://github.com/WordPress/gutenberg/pull/42936))
-- Release docs: Update performance test instructions. ([43015](https://github.com/WordPress/gutenberg/pull/43015))
-- Remove the emoji characters to fix the handbook rendering. ([43028](https://github.com/WordPress/gutenberg/pull/43028))
-- Update broken internal link. ([43094](https://github.com/WordPress/gutenberg/pull/43094))
-- Update theme-json.md to include new element support and :Ref. ([42412](https://github.com/WordPress/gutenberg/pull/42412))
-- Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. ([42969](https://github.com/WordPress/gutenberg/pull/42969))
+-   Add examples for `core/blocks` actions. ([42637](https://github.com/WordPress/gutenberg/pull/42637))
+-   Add examples for core/viewport package. ([42921](https://github.com/WordPress/gutenberg/pull/42921))
+-   Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+-   Adding `@example` entries to the public API exposed in `core/blocks`. ([42745](https://github.com/WordPress/gutenberg/pull/42745))
+-   Cover: Fix rendered content PHPDoc type. ([43099](https://github.com/WordPress/gutenberg/pull/43099))
+-   Create Block: Update document links in templates. ([42839](https://github.com/WordPress/gutenberg/pull/42839))
+-   Fix return type of home link attribute function. ([42901](https://github.com/WordPress/gutenberg/pull/42901))
+-   Fix textual consistency about block attributes. ([43075](https://github.com/WordPress/gutenberg/pull/43075))
+-   Link plugins GitHub release pages. ([42736](https://github.com/WordPress/gutenberg/pull/42736))
+-   Document the cherry-picking automation. ([42932](https://github.com/WordPress/gutenberg/pull/42932))
+-   Fixed broken external link to Mozilla Developer documentation. ([43065](https://github.com/WordPress/gutenberg/pull/43065))
+-   Release Docs: Troubleshooting failed "Bump version" job. ([42936](https://github.com/WordPress/gutenberg/pull/42936))
+-   Release docs: Update performance test instructions. ([43015](https://github.com/WordPress/gutenberg/pull/43015))
+-   Remove the emoji characters to fix the handbook rendering. ([43028](https://github.com/WordPress/gutenberg/pull/43028))
+-   Update broken internal link. ([43094](https://github.com/WordPress/gutenberg/pull/43094))
+-   Update theme-json.md to include new element support and :Ref. ([42412](https://github.com/WordPress/gutenberg/pull/42412))
+-   Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. ([42969](https://github.com/WordPress/gutenberg/pull/42969))
 
 ### Code Quality
 
-- Add mutations data and helper functions to useEntityRecord. ([39595](https://github.com/WordPress/gutenberg/pull/39595))
-- Remove old WordPress 5.8 code. ([42818](https://github.com/WordPress/gutenberg/pull/42818))
+-   Add mutations data and helper functions to useEntityRecord. ([39595](https://github.com/WordPress/gutenberg/pull/39595))
+-   Remove old WordPress 5.8 code. ([42818](https://github.com/WordPress/gutenberg/pull/42818))
 
 #### Block Library
 
-- Add separate callbacks for selecting a classic or navigation menu in the nav block. ([43057](https://github.com/WordPress/gutenberg/pull/43057))
-- Avoid reliance on status constants when consuming useCreateNavigationMenu hook. ([42704](https://github.com/WordPress/gutenberg/pull/42704))
-- Home Link: Use 'sprintf' in the render callback. ([43024](https://github.com/WordPress/gutenberg/pull/43024))
-- Nav block: Extract hook for inner blocks. ([42743](https://github.com/WordPress/gutenberg/pull/42743))
-- Nav block: Normalize to function expressions. ([42744](https://github.com/WordPress/gutenberg/pull/42744))
-- Normalize usage of Notifications in Nav block. ([42706](https://github.com/WordPress/gutenberg/pull/42706))
-- Remove duplicate speak calls from navigation block. ([43079](https://github.com/WordPress/gutenberg/pull/43079))
-- Site Title: Use home\_url instead of get\_bloginfo. ([42857](https://github.com/WordPress/gutenberg/pull/42857))
-- Page List: Fix indentation in PHP file. ([42852](https://github.com/WordPress/gutenberg/pull/42852))
-- Query Loop: Try filters with ToolsPanel. ([42629](https://github.com/WordPress/gutenberg/pull/42629))
+-   Add separate callbacks for selecting a classic or navigation menu in the nav block. ([43057](https://github.com/WordPress/gutenberg/pull/43057))
+-   Avoid reliance on status constants when consuming useCreateNavigationMenu hook. ([42704](https://github.com/WordPress/gutenberg/pull/42704))
+-   Home Link: Use 'sprintf' in the render callback. ([43024](https://github.com/WordPress/gutenberg/pull/43024))
+-   Nav block: Extract hook for inner blocks. ([42743](https://github.com/WordPress/gutenberg/pull/42743))
+-   Nav block: Normalize to function expressions. ([42744](https://github.com/WordPress/gutenberg/pull/42744))
+-   Normalize usage of Notifications in Nav block. ([42706](https://github.com/WordPress/gutenberg/pull/42706))
+-   Remove duplicate speak calls from navigation block. ([43079](https://github.com/WordPress/gutenberg/pull/43079))
+-   Site Title: Use home_url instead of get_bloginfo. ([42857](https://github.com/WordPress/gutenberg/pull/42857))
+-   Page List: Fix indentation in PHP file. ([42852](https://github.com/WordPress/gutenberg/pull/42852))
+-   Query Loop: Try filters with ToolsPanel. ([42629](https://github.com/WordPress/gutenberg/pull/42629))
 
 #### Site Editor
 
-- Navigation Menu Sidebar: Remove unnecessary Fragment. ([43021](https://github.com/WordPress/gutenberg/pull/43021))
+-   Navigation Menu Sidebar: Remove unnecessary Fragment. ([43021](https://github.com/WordPress/gutenberg/pull/43021))
 
 #### Style Engine
 
-- Tweak Declarations filtering logic slightly. ([43215](https://github.com/WordPress/gutenberg/pull/43215))
-- Minor tweaks. ([43111](https://github.com/WordPress/gutenberg/pull/43111))
+-   Tweak Declarations filtering logic slightly. ([43215](https://github.com/WordPress/gutenberg/pull/43215))
+-   Minor tweaks. ([43111](https://github.com/WordPress/gutenberg/pull/43111))
 
 #### Global Styles
 
-- useGlobalStylesOutput: Use memo for derived values. ([42917](https://github.com/WordPress/gutenberg/pull/42917))
+-   useGlobalStylesOutput: Use memo for derived values. ([42917](https://github.com/WordPress/gutenberg/pull/42917))
 
 ### Tools
 
 #### Env
 
-- Use git for `wp-env`'s default WordPress version. ([42826](https://github.com/WordPress/gutenberg/pull/42826))
+-   Use git for `wp-env`'s default WordPress version. ([42826](https://github.com/WordPress/gutenberg/pull/42826))
 
 #### Testing
 
-- Migrate deprecated node matcher tests to playwright. ([42759](https://github.com/WordPress/gutenberg/pull/42759))
-- Migrate group block tests to Playwright. ([42801](https://github.com/WordPress/gutenberg/pull/42801))
-- Migrate missing block tests to Playwright. ([41680](https://github.com/WordPress/gutenberg/pull/41680))
-- Migrate Convert Block Type test to Playwright. ([42760](https://github.com/WordPress/gutenberg/pull/42760))
+-   Migrate deprecated node matcher tests to playwright. ([42759](https://github.com/WordPress/gutenberg/pull/42759))
+-   Migrate group block tests to Playwright. ([42801](https://github.com/WordPress/gutenberg/pull/42801))
+-   Migrate missing block tests to Playwright. ([41680](https://github.com/WordPress/gutenberg/pull/41680))
+-   Migrate Convert Block Type test to Playwright. ([42760](https://github.com/WordPress/gutenberg/pull/42760))
 
 #### Build Tooling
 
-- Lodash: Refactor away from `_.flatMap()`. ([42360](https://github.com/WordPress/gutenberg/pull/42360))
-- Standardize script naming in main package.json. ([42368](https://github.com/WordPress/gutenberg/pull/42368))
+-   Lodash: Refactor away from `_.flatMap()`. ([42360](https://github.com/WordPress/gutenberg/pull/42360))
+-   Standardize script naming in main package.json. ([42368](https://github.com/WordPress/gutenberg/pull/42368))
 
-## First time contributors
-- @fellyph: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
-- @merkys7: Fix social-link block missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
-- @Smit2808: Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
-- @theminaldiwan: Fixed alignment issue of tagcloud block when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
+## First-time contributors
+
+-   @fellyph: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+-   @merkys7: Fix social-link block missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+-   @Smit2808: Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+-   @theminaldiwan: Fixed alignment issue of tagcloud block when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
 
 ## Contributors
 
@@ -2471,244 +26490,267 @@ The following contributors merged PRs in this release: @aaronrobertshaw @adamzie
 
 = 13.8.2 =
 
+## Changelog
+
+### Enhancements
 
+-   Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
+-   Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
+-   Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
 
-## Changelog
+#### Components
 
+-   BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
+-   ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
+-   ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
+-   Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
+-   InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
+-   ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
+-   SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
+-   Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
+-   Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
+-   ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
+-   UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
+-   BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
+-   CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
+-   Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
+-   InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
+-   ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
+-   `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
 
-### Enhancements
+#### Block Library
+
+-   Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+-   Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
+-   Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
+-   Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
+-   List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
+-   Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
+-   Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
 
-- Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
-- Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
-- Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
-
-#### Components
-- BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
-- ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
-- ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
-- Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
-- InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
-- ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
-- SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
-- Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
-- Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
-- ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
-- UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
-- BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
-- CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
-- Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
-- InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
-- ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
-- `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
-
-#### Block Library
-- Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
-- Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
-- Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
-- Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
-- List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
-- Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
-- Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
-
-#### Global Styles
-- Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
-- Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
-- Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
+#### Global Styles
+
+-   Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
+-   Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
+-   Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
 
 #### Document Settings
-- Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
+
+-   Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
 
 #### Block Editor
-- Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
-- Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
-- Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
+
+-   Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
+-   Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
+-   Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
 
 #### Site Editor
-- On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
+
+-   On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
 
 #### Accessibility
-- BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
+
+-   BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
 
 #### Icons
-- Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
+
+-   Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
 
 #### Nested / Inner Blocks
-- Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
+
+-   Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
 
 #### Colors
-- Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
-
-
-### Bug Fixes
-- Quote: fix raw transform handler ([https://github.com/WordPress/gutenberg/pull/43093])(https://github.com/WordPress/gutenberg/commit/9649f759c2235cde4281b1fd7fa9d8f9bf2f3f0e)
-- Paste from Slack: interpret paragraph markup ([https://github.com/WordPress/gutenberg/pull/43114])(https://github.com/WordPress/gutenberg/commit/1a2f08e59646f1d6a20fcb9cdd9182dbb3a6aeac)
-- Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
-- Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
-- Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
-- MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
-- Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
-- Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
-- Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
-- Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
-- fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
-
-#### Block Library
-- Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
-- Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
-- Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
-- List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
-- List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
-- List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
-- List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
-- Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
-- Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
-- Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
-- Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
-- Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
-- [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
-- Site Logo: Add the missing 'site_icon_url' to the REST_API index. ([42957](https://github.com/WordPress/gutenberg/pull/42957))
-
-#### Components
-- AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
-- ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
-- Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
-- Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
-- RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
-- Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
-- Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
+
+-   Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
+
+### Bug Fixes
+
+-   Quote: fix raw transform handler ([https://github.com/WordPress/gutenberg/pull/43093])(https://github.com/WordPress/gutenberg/commit/9649f759c2235cde4281b1fd7fa9d8f9bf2f3f0e)
+-   Paste from Slack: interpret paragraph markup ([https://github.com/WordPress/gutenberg/pull/43114])(https://github.com/WordPress/gutenberg/commit/1a2f08e59646f1d6a20fcb9cdd9182dbb3a6aeac)
+-   Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
+-   Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
+-   Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
+-   MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
+-   Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
+-   Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
+-   Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
+-   Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
+-   fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
+
+#### Block Library
+
+-   Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
+-   Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
+-   Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
+-   List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
+-   List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
+-   List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
+-   List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
+-   Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
+-   Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
+-   Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
+-   Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
+-   Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
+-   [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
+-   Site Logo: Add the missing 'site_icon_url' to the REST_API index. ([42957](https://github.com/WordPress/gutenberg/pull/42957))
+
+#### Components
+
+-   AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
+-   ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
+-   Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
+-   Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
+-   RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
+-   Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
+-   Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
 
 #### Accessibility
-- Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
-- Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
-- Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
-- Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
-- Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
+
+-   Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
+-   Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
+-   Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
+-   Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
+-   Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
 
 #### Post Editor
-- Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
-- Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
-- Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
+
+-   Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
+-   Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
+-   Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
 
 #### Block Editor
-- Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
-- Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
-- Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
-- Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
+
+-   Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
+-   Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
+-   Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
+-   Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
 
 #### CSS & Styling
-- Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
-- Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
-- Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
-- Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
+
+-   Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
+-   Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
+-   Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
+-   Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
 
 #### Global Styles
-- Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
-- Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
-- Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
-- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
+
+-   Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
+-   Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
+-   Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
+-   Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
 
 #### Widgets Editor
-- Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
+
+-   Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
 
 #### Rich Text
-- Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
+
+-   Annotation API: Fix \_\_experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
 
 #### Site Editor
-- Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
-- [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
-- Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
+
+-   Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
+-   [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
+-   Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
 
 #### Themes
-- Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
+
+-   Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
 
 #### Icons
-- Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
+-   Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
 ### Performance
 
 #### Components
-- Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
-- Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
+
+-   Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
+-   Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
 
 #### Post Editor
-- Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
+
+-   Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
 
 #### Testing
-- Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
+
+-   Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
 
 #### Block Validation/Deprecation
-- Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
+-   Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
 ### Experiments
 
-- Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
-- Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
+-   Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
+-   Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
 
 #### CSS & Styling
-- Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
+
+-   Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
 
 #### Global Styles
-- Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
-- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
+-   Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
+-   Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
 ### Documentation
 
-- Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
-- Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
-- Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
-- Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
-- Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
-- Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
-- Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
-- Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
-- Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
-- Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
-- Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
-- ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
+-   Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
+-   Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
+-   Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
+-   Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
+-   Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
+-   Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
+-   Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
+-   Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
+-   Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
+-   Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
+-   Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
+-   ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
 
 #### Components
-- Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
+-   Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
 ### Code Quality
 
-- Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
-- Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
-- Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
-- Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
-- Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
+-   Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
+-   Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
+-   Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
+-   Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
+-   Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
 
 #### Global Styles
-- Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
+
+-   Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
 
 #### Block Library
-- Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
+-   Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
 ### Tools
 
 #### Testing
-- Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
-- Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
-- Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
-- end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
-#### Build Tooling
-- Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
-- Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
+-   Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
+-   Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
+-   Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
+-   end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
+#### Build Tooling
 
-## First time contributors
+-   Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
+-   Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+The following PRs were merged by first-time contributors:
 
+-   @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
 
 ## Contributors
 
@@ -2716,313 +26758,306 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini
 
-
-
-
 = 13.9.0-rc.1 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Style engine: Prettify combined selectors. ([43003](https://github.com/WordPress/gutenberg/pull/43003))
-- Style engine: Prettify output. ([42909](https://github.com/WordPress/gutenberg/pull/42909))
-- Style engine: Rename global function. ([42719](https://github.com/WordPress/gutenberg/pull/42719))
-- Shortcuts: Add Ctrl+Y for redo on Windows. ([42627](https://github.com/WordPress/gutenberg/pull/42627))
+-   Style engine: Prettify combined selectors. ([43003](https://github.com/WordPress/gutenberg/pull/43003))
+-   Style engine: Prettify output. ([42909](https://github.com/WordPress/gutenberg/pull/42909))
+-   Style engine: Rename global function. ([42719](https://github.com/WordPress/gutenberg/pull/42719))
+-   Shortcuts: Add Ctrl+Y for redo on Windows. ([42627](https://github.com/WordPress/gutenberg/pull/42627))
 
 #### Components
 
-- BaseControl: Add `box-sizing` resets. ([42889](https://github.com/WordPress/gutenberg/pull/42889))
-- BorderControl: Add box sizing reset. ([42754](https://github.com/WordPress/gutenberg/pull/42754))
-- BoxControl: Export `applyValueToSides` util function. ([42733](https://github.com/WordPress/gutenberg/pull/42733))
-- ComboboxControl and FormTokenField: Enhance components with custom render callback for options. ([42597](https://github.com/WordPress/gutenberg/pull/42597))
-- ComboboxControl: Add support for uncontrolled mode. ([42752](https://github.com/WordPress/gutenberg/pull/42752))
-- Flex: Convert component to TypeScript. ([42537](https://github.com/WordPress/gutenberg/pull/42537))
-- FontSizePicker: Add 40px size variant. ([42716](https://github.com/WordPress/gutenberg/pull/42716))
-- Placeholder: Convert component to TypeScript. ([42990](https://github.com/WordPress/gutenberg/pull/42990))
-- Popover: Rewrite Storybook examples using controls. ([42903](https://github.com/WordPress/gutenberg/pull/42903))
-- Popover: Tidy up code 🧹 , add more comments. ([42944](https://github.com/WordPress/gutenberg/pull/42944))
-- ResizableBox: Change tooltip background to match other tooltips. ([42800](https://github.com/WordPress/gutenberg/pull/42800))
-- Storybook: Add global CSS switcher. ([42747](https://github.com/WordPress/gutenberg/pull/42747))
-- StyleProvider: Convert component to TypeScript. ([42541](https://github.com/WordPress/gutenberg/pull/42541))
-- Swatch: Convert component to TypeScript. ([42162](https://github.com/WordPress/gutenberg/pull/42162))
-- Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. ([42844](https://github.com/WordPress/gutenberg/pull/42844))
-- Typography Panel: Fix font appearance control width. ([42795](https://github.com/WordPress/gutenberg/pull/42795))
-- UnitControl: Update unit dropdown design. ([42000](https://github.com/WordPress/gutenberg/pull/42000))
-- Update control labels to the new uppercase styles. ([42789](https://github.com/WordPress/gutenberg/pull/42789))
+-   BaseControl: Add `box-sizing` resets. ([42889](https://github.com/WordPress/gutenberg/pull/42889))
+-   BorderControl: Add box sizing reset. ([42754](https://github.com/WordPress/gutenberg/pull/42754))
+-   BoxControl: Export `applyValueToSides` util function. ([42733](https://github.com/WordPress/gutenberg/pull/42733))
+-   ComboboxControl and FormTokenField: Enhance components with custom render callback for options. ([42597](https://github.com/WordPress/gutenberg/pull/42597))
+-   ComboboxControl: Add support for uncontrolled mode. ([42752](https://github.com/WordPress/gutenberg/pull/42752))
+-   Flex: Convert component to TypeScript. ([42537](https://github.com/WordPress/gutenberg/pull/42537))
+-   FontSizePicker: Add 40px size variant. ([42716](https://github.com/WordPress/gutenberg/pull/42716))
+-   Placeholder: Convert component to TypeScript. ([42990](https://github.com/WordPress/gutenberg/pull/42990))
+-   Popover: Rewrite Storybook examples using controls. ([42903](https://github.com/WordPress/gutenberg/pull/42903))
+-   Popover: Tidy up code 🧹 , add more comments. ([42944](https://github.com/WordPress/gutenberg/pull/42944))
+-   ResizableBox: Change tooltip background to match other tooltips. ([42800](https://github.com/WordPress/gutenberg/pull/42800))
+-   Storybook: Add global CSS switcher. ([42747](https://github.com/WordPress/gutenberg/pull/42747))
+-   StyleProvider: Convert component to TypeScript. ([42541](https://github.com/WordPress/gutenberg/pull/42541))
+-   Swatch: Convert component to TypeScript. ([42162](https://github.com/WordPress/gutenberg/pull/42162))
+-   Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. ([42844](https://github.com/WordPress/gutenberg/pull/42844))
+-   Typography Panel: Fix font appearance control width. ([42795](https://github.com/WordPress/gutenberg/pull/42795))
+-   UnitControl: Update unit dropdown design. ([42000](https://github.com/WordPress/gutenberg/pull/42000))
+-   Update control labels to the new uppercase styles. ([42789](https://github.com/WordPress/gutenberg/pull/42789))
 
 #### Block Library
 
-- Archives: Add a control to make block's dropdown label invisible. ([43025](https://github.com/WordPress/gutenberg/pull/43025))
-- Query Title: Add a search title variation. ([42662](https://github.com/WordPress/gutenberg/pull/42662))
-- Media&Text: Add help to ImageSizeControl. ([40642](https://github.com/WordPress/gutenberg/pull/40642))
-- Post Author: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
-- Post Featured Image: Add link target and rel attributes. ([42853](https://github.com/WordPress/gutenberg/pull/42853))
+-   Archives: Add a control to make block's dropdown label invisible. ([43025](https://github.com/WordPress/gutenberg/pull/43025))
+-   Query Title: Add a search title variation. ([42662](https://github.com/WordPress/gutenberg/pull/42662))
+-   Media&Text: Add help to ImageSizeControl. ([40642](https://github.com/WordPress/gutenberg/pull/40642))
+-   Post Author: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+-   Post Featured Image: Add link target and rel attributes. ([42853](https://github.com/WordPress/gutenberg/pull/42853))
 
 #### CSS & Styling
 
-- Rename solid color. ([42918](https://github.com/WordPress/gutenberg/pull/42918))
-- Try: Tab style subpixel fix. ([42892](https://github.com/WordPress/gutenberg/pull/42892))
+-   Rename solid color. ([42918](https://github.com/WordPress/gutenberg/pull/42918))
+-   Try: Tab style subpixel fix. ([42892](https://github.com/WordPress/gutenberg/pull/42892))
 
 #### Site Editor
 
-- Add: Author nicename template creation ability. ([42165](https://github.com/WordPress/gutenberg/pull/42165))
-- [Site Editor]: Add fallback template content on creation. ([42520](https://github.com/WordPress/gutenberg/pull/42520))
+-   Add: Author nicename template creation ability. ([42165](https://github.com/WordPress/gutenberg/pull/42165))
+-   [Site Editor]: Add fallback template content on creation. ([42520](https://github.com/WordPress/gutenberg/pull/42520))
 
 #### Block Directory
 
-- Modernize `DownloadableBlockListItem` tests. ([43026](https://github.com/WordPress/gutenberg/pull/43026))
+-   Modernize `DownloadableBlockListItem` tests. ([43026](https://github.com/WordPress/gutenberg/pull/43026))
 
 #### List View
 
-- List View Expander: Fix icon in RTL mode. ([42997](https://github.com/WordPress/gutenberg/pull/42997))
+-   List View Expander: Fix icon in RTL mode. ([42997](https://github.com/WordPress/gutenberg/pull/42997))
 
 #### Global Styles
 
-- Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. ([42544](https://github.com/WordPress/gutenberg/pull/42544))
+-   Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. ([42544](https://github.com/WordPress/gutenberg/pull/42544))
 
 #### Block Editor
 
-- Rich text: Add character shortcuts for wrapping selection. ([42469](https://github.com/WordPress/gutenberg/pull/42469))
+-   Rich text: Add character shortcuts for wrapping selection. ([42469](https://github.com/WordPress/gutenberg/pull/42469))
 
 #### Document Settings
 
-- Post Template: Update template title selector. ([42091](https://github.com/WordPress/gutenberg/pull/42091))
+-   Post Template: Update template title selector. ([42091](https://github.com/WordPress/gutenberg/pull/42091))
 
 #### Design Tools
 
-- Cover: Show Resize Tooltip on Drag. ([23522](https://github.com/WordPress/gutenberg/pull/23522))
-- Update color button style. ([41838](https://github.com/WordPress/gutenberg/pull/41838))
-- Add explicit bypass for fluid font size calculation. ([42757](https://github.com/WordPress/gutenberg/pull/42757))
+-   Cover: Show Resize Tooltip on Drag. ([23522](https://github.com/WordPress/gutenberg/pull/23522))
+-   Update color button style. ([41838](https://github.com/WordPress/gutenberg/pull/41838))
+-   Add explicit bypass for fluid font size calculation. ([42757](https://github.com/WordPress/gutenberg/pull/42757))
 
 ### Bug Fixes
 
-- Block Styles: Truncate long button labels. ([42975](https://github.com/WordPress/gutenberg/pull/42975))
-- ColorGradientControl: Fix awkward padding in popover. ([43018](https://github.com/WordPress/gutenberg/pull/43018))
-- Create Block: Remove i18n references from save properties. ([43035](https://github.com/WordPress/gutenberg/pull/43035))
-- Firefox: Fix issue where it selects a nearby contentEditable. ([42777](https://github.com/WordPress/gutenberg/pull/42777))
-- Layout: Fix flex direction column. ([42939](https://github.com/WordPress/gutenberg/pull/42939))
-- List v2: Fix Cmd+A. ([42858](https://github.com/WordPress/gutenberg/pull/42858))
-- Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp. ([43004](https://github.com/WordPress/gutenberg/pull/43004))
-- Style engine: Disable stylesheet optimization temporarily. ([43051](https://github.com/WordPress/gutenberg/pull/43051))
+-   Block Styles: Truncate long button labels. ([42975](https://github.com/WordPress/gutenberg/pull/42975))
+-   ColorGradientControl: Fix awkward padding in popover. ([43018](https://github.com/WordPress/gutenberg/pull/43018))
+-   Create Block: Remove i18n references from save properties. ([43035](https://github.com/WordPress/gutenberg/pull/43035))
+-   Firefox: Fix issue where it selects a nearby contentEditable. ([42777](https://github.com/WordPress/gutenberg/pull/42777))
+-   Layout: Fix flex direction column. ([42939](https://github.com/WordPress/gutenberg/pull/42939))
+-   List v2: Fix Cmd+A. ([42858](https://github.com/WordPress/gutenberg/pull/42858))
+-   Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp. ([43004](https://github.com/WordPress/gutenberg/pull/43004))
+-   Style engine: Disable stylesheet optimization temporarily. ([43051](https://github.com/WordPress/gutenberg/pull/43051))
 
 #### Block Library
 
-- Navigation: Fix invalid permissions warning by avoiding using trashed wp_navigation posts (JS implementation). ([42982](https://github.com/WordPress/gutenberg/pull/42982))
-- Disabled blocks passed to BlockTypesList are no longer draggable. ([42751](https://github.com/WordPress/gutenberg/pull/42751))
-- Fix drag and drop performance when dragging over the insertion point. ([42806](https://github.com/WordPress/gutenberg/pull/42806))
-- Social Link: add missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
-- Separator: Fix the block CSS classes in the editor. ([42769](https://github.com/WordPress/gutenberg/pull/42769))
-- Tag Cloud: Fix alignment issue when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
-- Navigation: Fix `current-menu-item` class logic. ([42849](https://github.com/WordPress/gutenberg/pull/42849))
-- Media&Text: Round position attribute on focal point save. ([33915](https://github.com/WordPress/gutenberg/pull/33915))
-- Social: Include has-visible-labels on edit component. ([42791](https://github.com/WordPress/gutenberg/pull/42791))
-- Writing flow: Fix Shift+Arrow partial selection for lists & quote. ([42885](https://github.com/WordPress/gutenberg/pull/42885))
-- LatestPost: Fix issue with floated featured images overflowing focus style. ([40663](https://github.com/WordPress/gutenberg/pull/40663))
+-   Navigation: Fix invalid permissions warning by avoiding using trashed wp_navigation posts (JS implementation). ([42982](https://github.com/WordPress/gutenberg/pull/42982))
+-   Disabled blocks passed to BlockTypesList are no longer draggable. ([42751](https://github.com/WordPress/gutenberg/pull/42751))
+-   Fix drag and drop performance when dragging over the insertion point. ([42806](https://github.com/WordPress/gutenberg/pull/42806))
+-   Social Link: add missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+-   Separator: Fix the block CSS classes in the editor. ([42769](https://github.com/WordPress/gutenberg/pull/42769))
+-   Tag Cloud: Fix alignment issue when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
+-   Navigation: Fix `current-menu-item` class logic. ([42849](https://github.com/WordPress/gutenberg/pull/42849))
+-   Media&Text: Round position attribute on focal point save. ([33915](https://github.com/WordPress/gutenberg/pull/33915))
+-   Social: Include has-visible-labels on edit component. ([42791](https://github.com/WordPress/gutenberg/pull/42791))
+-   Writing flow: Fix Shift+Arrow partial selection for lists & quote. ([42885](https://github.com/WordPress/gutenberg/pull/42885))
+-   LatestPost: Fix issue with floated featured images overflowing focus style. ([40663](https://github.com/WordPress/gutenberg/pull/40663))
 
 #### Components
 
-- ColorPicker: Fix layout overflow. ([42992](https://github.com/WordPress/gutenberg/pull/42992))
-- External link component: Add a check for on page anchor links. ([42259](https://github.com/WordPress/gutenberg/pull/42259))
-- Icons: Fix storybook library icon names. ([43034](https://github.com/WordPress/gutenberg/pull/43034))
-- InputControl: Fix incorrect size prop passing to `Text`. ([42793](https://github.com/WordPress/gutenberg/pull/42793))
-- Popover: Anchor correctly to parent node when no explicit anchor is passed. ([42971](https://github.com/WordPress/gutenberg/pull/42971))
-- Popover: Fix arrow placement and design. ([42874](https://github.com/WordPress/gutenberg/pull/42874))
-- Popover: Improve iframe offset computation. ([42417](https://github.com/WordPress/gutenberg/pull/42417))
-- Popover: Make sure that ownerDocument is always defined. ([42886](https://github.com/WordPress/gutenberg/pull/42886))
-- `InputControl`: Fix acceptance of falsy values in controlled updates. ([42484](https://github.com/WordPress/gutenberg/pull/42484))
+-   ColorPicker: Fix layout overflow. ([42992](https://github.com/WordPress/gutenberg/pull/42992))
+-   External link component: Add a check for on page anchor links. ([42259](https://github.com/WordPress/gutenberg/pull/42259))
+-   Icons: Fix storybook library icon names. ([43034](https://github.com/WordPress/gutenberg/pull/43034))
+-   InputControl: Fix incorrect size prop passing to `Text`. ([42793](https://github.com/WordPress/gutenberg/pull/42793))
+-   Popover: Anchor correctly to parent node when no explicit anchor is passed. ([42971](https://github.com/WordPress/gutenberg/pull/42971))
+-   Popover: Fix arrow placement and design. ([42874](https://github.com/WordPress/gutenberg/pull/42874))
+-   Popover: Improve iframe offset computation. ([42417](https://github.com/WordPress/gutenberg/pull/42417))
+-   Popover: Make sure that ownerDocument is always defined. ([42886](https://github.com/WordPress/gutenberg/pull/42886))
+-   `InputControl`: Fix acceptance of falsy values in controlled updates. ([42484](https://github.com/WordPress/gutenberg/pull/42484))
 
 #### Block Editor
 
-- Inserter: Avoid warning when CRA is displayed. ([42723](https://github.com/WordPress/gutenberg/pull/42723))
-- Pasting: Dismiss pasted image if file:// schema detected. ([42785](https://github.com/WordPress/gutenberg/pull/42785))
-- Prevent multiselection via dragging when already dragging blocks. ([42877](https://github.com/WordPress/gutenberg/pull/42877))
-- Quote: Fix raw transform handler. ([43093](https://github.com/WordPress/gutenberg/pull/43093))
-- Rich text: Fix error when attempting to remove placeholder on composition start. ([42821](https://github.com/WordPress/gutenberg/pull/42821))
+-   Inserter: Avoid warning when CRA is displayed. ([42723](https://github.com/WordPress/gutenberg/pull/42723))
+-   Pasting: Dismiss pasted image if file:// schema detected. ([42785](https://github.com/WordPress/gutenberg/pull/42785))
+-   Prevent multiselection via dragging when already dragging blocks. ([42877](https://github.com/WordPress/gutenberg/pull/42877))
+-   Quote: Fix raw transform handler. ([43093](https://github.com/WordPress/gutenberg/pull/43093))
+-   Rich text: Fix error when attempting to remove placeholder on composition start. ([42821](https://github.com/WordPress/gutenberg/pull/42821))
 
 #### Global Styles
 
-- Fix styles declarations returning before all properties output. ([42954](https://github.com/WordPress/gutenberg/pull/42954))
-- Fluid typography: Migrate fluid typography algorithm to JS for site editor. ([42688](https://github.com/WordPress/gutenberg/pull/42688))
-- Spacing presets: Prevent % spacing size units being stripped by sanitize_title. ([43101](https://github.com/WordPress/gutenberg/pull/43101))
-- Specify priority in remove_action. ([43073](https://github.com/WordPress/gutenberg/pull/43073))
+-   Fix styles declarations returning before all properties output. ([42954](https://github.com/WordPress/gutenberg/pull/42954))
+-   Fluid typography: Migrate fluid typography algorithm to JS for site editor. ([42688](https://github.com/WordPress/gutenberg/pull/42688))
+-   Spacing presets: Prevent % spacing size units being stripped by sanitize_title. ([43101](https://github.com/WordPress/gutenberg/pull/43101))
+-   Specify priority in remove_action. ([43073](https://github.com/WordPress/gutenberg/pull/43073))
 
 #### Build Tooling
 
-- Fix: CSS files don't build in dev mode on Windows. ([42041](https://github.com/WordPress/gutenberg/pull/42041))
-- Fix: Script name error in main package.json. ([43089](https://github.com/WordPress/gutenberg/pull/43089))
+-   Fix: CSS files don't build in dev mode on Windows. ([42041](https://github.com/WordPress/gutenberg/pull/42041))
+-   Fix: Script name error in main package.json. ([43089](https://github.com/WordPress/gutenberg/pull/43089))
 
 #### Accessibility
 
-- Fix issue where changing the id of the recursion provider can result in focus loss. ([42916](https://github.com/WordPress/gutenberg/pull/42916))
-- Site Editor: Don't disable the Save button. ([42842](https://github.com/WordPress/gutenberg/pull/42842))
+-   Fix issue where changing the id of the recursion provider can result in focus loss. ([42916](https://github.com/WordPress/gutenberg/pull/42916))
+-   Site Editor: Don't disable the Save button. ([42842](https://github.com/WordPress/gutenberg/pull/42842))
 
 #### CSS & Styling
 
-- Layout: Merge CSS rule for block gap. ([43052](https://github.com/WordPress/gutenberg/pull/43052))
+-   Layout: Merge CSS rule for block gap. ([43052](https://github.com/WordPress/gutenberg/pull/43052))
 
 #### Testing
 
-- Fix: Just another end-to-end test. ([42947](https://github.com/WordPress/gutenberg/pull/42947))
+-   Fix: Just another end-to-end test. ([42947](https://github.com/WordPress/gutenberg/pull/42947))
 
 #### Document Settings
 
-- Decode the post URL for the button label. ([42930](https://github.com/WordPress/gutenberg/pull/42930))
+-   Decode the post URL for the button label. ([42930](https://github.com/WordPress/gutenberg/pull/42930))
 
 #### Site Editor
 
-- Internalization fixes for site editor template creation. ([42762](https://github.com/WordPress/gutenberg/pull/42762))
+-   Internalization fixes for site editor template creation. ([42762](https://github.com/WordPress/gutenberg/pull/42762))
 
 ### Performance
 
-- Lodash: Refactor away from `_.isMatch()`. ([42271](https://github.com/WordPress/gutenberg/pull/42271))
-- Lodash: Refactor away from `_.zip()`. ([42926](https://github.com/WordPress/gutenberg/pull/42926))
-- Lodash: Remove completely from `@wordpress/dom` package. ([42912](https://github.com/WordPress/gutenberg/pull/42912))
-- Lodash: Remove completely from `@wordpress/element` package. ([42898](https://github.com/WordPress/gutenberg/pull/42898))
+-   Lodash: Refactor away from `_.isMatch()`. ([42271](https://github.com/WordPress/gutenberg/pull/42271))
+-   Lodash: Refactor away from `_.zip()`. ([42926](https://github.com/WordPress/gutenberg/pull/42926))
+-   Lodash: Remove completely from `@wordpress/dom` package. ([42912](https://github.com/WordPress/gutenberg/pull/42912))
+-   Lodash: Remove completely from `@wordpress/element` package. ([42898](https://github.com/WordPress/gutenberg/pull/42898))
 
 #### Components
 
-- Lodash: Refactor away from `_.delay()`. ([42966](https://github.com/WordPress/gutenberg/pull/42966))
-- Lodash: Refactor away from `_.startsWith()`. ([43019](https://github.com/WordPress/gutenberg/pull/43019))
+-   Lodash: Refactor away from `_.delay()`. ([42966](https://github.com/WordPress/gutenberg/pull/42966))
+-   Lodash: Refactor away from `_.startsWith()`. ([43019](https://github.com/WordPress/gutenberg/pull/43019))
 
 #### Block Library
 
-- Refactor Calendar block away from `moment`. ([43029](https://github.com/WordPress/gutenberg/pull/43029))
+-   Refactor Calendar block away from `moment`. ([43029](https://github.com/WordPress/gutenberg/pull/43029))
 
 #### Accessibility
 
-- Lodash: Refactor away from `_.maxBy()`. ([42914](https://github.com/WordPress/gutenberg/pull/42914))
+-   Lodash: Refactor away from `_.maxBy()`. ([42914](https://github.com/WordPress/gutenberg/pull/42914))
 
 #### Data Layer
 
-- Lodash: Refactor away from `_.isPlainObject()`. ([42508](https://github.com/WordPress/gutenberg/pull/42508))
+-   Lodash: Refactor away from `_.isPlainObject()`. ([42508](https://github.com/WordPress/gutenberg/pull/42508))
 
 ### Experiments
 
-- Style engine: Enqueue block support styles. ([42452](https://github.com/WordPress/gutenberg/pull/42452)) ([42880](https://github.com/WordPress/gutenberg/pull/42880))
-- Combine style-engine stores for block-supports. ([42970](https://github.com/WordPress/gutenberg/pull/42970))
-- Style engine: Add optimize flag and combine functions into wp_style_engine_get_stylesheet. ([42878](https://github.com/WordPress/gutenberg/pull/42878))
+-   Style engine: Enqueue block support styles. ([42452](https://github.com/WordPress/gutenberg/pull/42452)) ([42880](https://github.com/WordPress/gutenberg/pull/42880))
+-   Combine style-engine stores for block-supports. ([42970](https://github.com/WordPress/gutenberg/pull/42970))
+-   Style engine: Add optimize flag and combine functions into wp_style_engine_get_stylesheet. ([42878](https://github.com/WordPress/gutenberg/pull/42878))
 
 ### Documentation
 
-- Add examples for `core/blocks` actions. ([42637](https://github.com/WordPress/gutenberg/pull/42637))
-- Add examples for core/viewport package. ([42921](https://github.com/WordPress/gutenberg/pull/42921))
-- Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
-- Adding `@example` entries to the public API exposed in `core/blocks`. ([42745](https://github.com/WordPress/gutenberg/pull/42745))
-- Cover: Fix rendered content PHPDoc type. ([43099](https://github.com/WordPress/gutenberg/pull/43099))
-- Create Block: Update document links in templates. ([42839](https://github.com/WordPress/gutenberg/pull/42839))
-- Docs: Fix return type of home link attribute function. ([42901](https://github.com/WordPress/gutenberg/pull/42901))
-- Docs: Fix textual consistency about block attributes. ([43075](https://github.com/WordPress/gutenberg/pull/43075))
-- Docs: Link plugins GitHub release pages. ([42736](https://github.com/WordPress/gutenberg/pull/42736))
-- Document the cherry-picking automation. ([42932](https://github.com/WordPress/gutenberg/pull/42932))
-- Fixed broken external link to Mozilla Developer documentation. ([43065](https://github.com/WordPress/gutenberg/pull/43065))
-- Release Docs: Troubleshooting failed "Bump version" job. ([42936](https://github.com/WordPress/gutenberg/pull/42936))
-- Release docs: Update performance test instructions. ([43015](https://github.com/WordPress/gutenberg/pull/43015))
-- Remove the emoji characters to fix the handbook rendering. ([43028](https://github.com/WordPress/gutenberg/pull/43028))
-- Update broken internal link. ([43094](https://github.com/WordPress/gutenberg/pull/43094))
-- Update theme-json.md to include new element support and :Ref. ([42412](https://github.com/WordPress/gutenberg/pull/42412))
-- [Gutenberg Data Tutorial] Adjust the image URLs and whitespace to render correctly in the Handbook. ([42969](https://github.com/WordPress/gutenberg/pull/42969))
+-   Add examples for `core/blocks` actions. ([42637](https://github.com/WordPress/gutenberg/pull/42637))
+-   Add examples for core/viewport package. ([42921](https://github.com/WordPress/gutenberg/pull/42921))
+-   Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+-   Adding `@example` entries to the public API exposed in `core/blocks`. ([42745](https://github.com/WordPress/gutenberg/pull/42745))
+-   Cover: Fix rendered content PHPDoc type. ([43099](https://github.com/WordPress/gutenberg/pull/43099))
+-   Create Block: Update document links in templates. ([42839](https://github.com/WordPress/gutenberg/pull/42839))
+-   Docs: Fix return type of home link attribute function. ([42901](https://github.com/WordPress/gutenberg/pull/42901))
+-   Docs: Fix textual consistency about block attributes. ([43075](https://github.com/WordPress/gutenberg/pull/43075))
+-   Docs: Link plugins GitHub release pages. ([42736](https://github.com/WordPress/gutenberg/pull/42736))
+-   Document the cherry-picking automation. ([42932](https://github.com/WordPress/gutenberg/pull/42932))
+-   Fixed broken external link to Mozilla Developer documentation. ([43065](https://github.com/WordPress/gutenberg/pull/43065))
+-   Release Docs: Troubleshooting failed "Bump version" job. ([42936](https://github.com/WordPress/gutenberg/pull/42936))
+-   Release docs: Update performance test instructions. ([43015](https://github.com/WordPress/gutenberg/pull/43015))
+-   Remove the emoji characters to fix the handbook rendering. ([43028](https://github.com/WordPress/gutenberg/pull/43028))
+-   Update broken internal link. ([43094](https://github.com/WordPress/gutenberg/pull/43094))
+-   Update theme-json.md to include new element support and :Ref. ([42412](https://github.com/WordPress/gutenberg/pull/42412))
+-   [Gutenberg Data Tutorial] Adjust the image URLs and whitespace to render correctly in the Handbook. ([42969](https://github.com/WordPress/gutenberg/pull/42969))
 
 ### Code Quality
 
-- Add mutations data and helper functions to useEntityRecord. ([39595](https://github.com/WordPress/gutenberg/pull/39595))
-- Remove old WordPress 5.8 code. ([42818](https://github.com/WordPress/gutenberg/pull/42818))
+-   Add mutations data and helper functions to useEntityRecord. ([39595](https://github.com/WordPress/gutenberg/pull/39595))
+-   Remove old WordPress 5.8 code. ([42818](https://github.com/WordPress/gutenberg/pull/42818))
 
 #### Block Library
 
-- Add separate callbacks for selecting a classic or navigation menu in the nav block. ([43057](https://github.com/WordPress/gutenberg/pull/43057))
-- Avoid reliance on status constants when consuming useCreateNavigationMenu hook. ([42704](https://github.com/WordPress/gutenberg/pull/42704))
-- Home Link: Use 'sprintf' in the render callback. ([43024](https://github.com/WordPress/gutenberg/pull/43024))
-- Nav block: Extract hook for inner blocks. ([42743](https://github.com/WordPress/gutenberg/pull/42743))
-- Nav block: Normalize to function expressions. ([42744](https://github.com/WordPress/gutenberg/pull/42744))
-- Normalize usage of Notifications in Nav block. ([42706](https://github.com/WordPress/gutenberg/pull/42706))
-- Remove duplicate speak calls from navigation block. ([43079](https://github.com/WordPress/gutenberg/pull/43079))
-- Site Title: Use home_url instead of get_bloginfo. ([42857](https://github.com/WordPress/gutenberg/pull/42857))
+-   Add separate callbacks for selecting a classic or navigation menu in the nav block. ([43057](https://github.com/WordPress/gutenberg/pull/43057))
+-   Avoid reliance on status constants when consuming useCreateNavigationMenu hook. ([42704](https://github.com/WordPress/gutenberg/pull/42704))
+-   Home Link: Use 'sprintf' in the render callback. ([43024](https://github.com/WordPress/gutenberg/pull/43024))
+-   Nav block: Extract hook for inner blocks. ([42743](https://github.com/WordPress/gutenberg/pull/42743))
+-   Nav block: Normalize to function expressions. ([42744](https://github.com/WordPress/gutenberg/pull/42744))
+-   Normalize usage of Notifications in Nav block. ([42706](https://github.com/WordPress/gutenberg/pull/42706))
+-   Remove duplicate speak calls from navigation block. ([43079](https://github.com/WordPress/gutenberg/pull/43079))
+-   Site Title: Use home_url instead of get_bloginfo. ([42857](https://github.com/WordPress/gutenberg/pull/42857))
 
 #### Site Editor
 
-- Navigation Menu Sidebar: Remove unnecessary Fragment. ([43021](https://github.com/WordPress/gutenberg/pull/43021))
+-   Navigation Menu Sidebar: Remove unnecessary Fragment. ([43021](https://github.com/WordPress/gutenberg/pull/43021))
 
 #### Global Styles
 
-- useGlobalStylesOutput: Use memo for derived values. ([42917](https://github.com/WordPress/gutenberg/pull/42917))
+-   useGlobalStylesOutput: Use memo for derived values. ([42917](https://github.com/WordPress/gutenberg/pull/42917))
 
 ### Tools
 
-- Use git for `wp-env`'s default WordPress version. ([42826](https://github.com/WordPress/gutenberg/pull/42826))
+-   Use git for `wp-env`'s default WordPress version. ([42826](https://github.com/WordPress/gutenberg/pull/42826))
 
 #### Testing
 
-- Migrate deprecated node matcher tests to playwright. ([42759](https://github.com/WordPress/gutenberg/pull/42759))
-- Migrate group block tests to Playwright. ([42801](https://github.com/WordPress/gutenberg/pull/42801))
-- Migrate missing block tests to Playwright. ([41680](https://github.com/WordPress/gutenberg/pull/41680))
-- Migrate Convert Block Type test to Playwright. ([42760](https://github.com/WordPress/gutenberg/pull/42760))
+-   Migrate deprecated node matcher tests to playwright. ([42759](https://github.com/WordPress/gutenberg/pull/42759))
+-   Migrate group block tests to Playwright. ([42801](https://github.com/WordPress/gutenberg/pull/42801))
+-   Migrate missing block tests to Playwright. ([41680](https://github.com/WordPress/gutenberg/pull/41680))
+-   Migrate Convert Block Type test to Playwright. ([42760](https://github.com/WordPress/gutenberg/pull/42760))
 
 #### Build Tooling
 
-- Lodash: Refactor away from `_.flatMap()`. ([42360](https://github.com/WordPress/gutenberg/pull/42360))
-- Standardize script naming in main package.json. ([42368](https://github.com/WordPress/gutenberg/pull/42368))
+-   Lodash: Refactor away from `_.flatMap()`. ([42360](https://github.com/WordPress/gutenberg/pull/42360))
+-   Standardize script naming in main package.json. ([42368](https://github.com/WordPress/gutenberg/pull/42368))
 
 #### Block Library
 
-- Nav block: Move overlay colors to the responsive wrapper. ([42875](https://github.com/WordPress/gutenberg/pull/42875))
-- Navigation block: Extract navigation block utils. ([42865](https://github.com/WordPress/gutenberg/pull/42865))
-- Navigation: Overlay: Fix link inheritance. ([42929](https://github.com/WordPress/gutenberg/pull/42929))
-- Page List: Fix indentation in PHP file. ([42852](https://github.com/WordPress/gutenberg/pull/42852))
-- Query Pagination: Correctly position the  "next" link on the first page. ([42764](https://github.com/WordPress/gutenberg/pull/42764))
-- Search Block: Remove margins from the input. ([42959](https://github.com/WordPress/gutenberg/pull/42959))
-- Transforms: Add group unwrap. ([42685](https://github.com/WordPress/gutenberg/pull/42685))
-- [Post Title]: Do not add `rel` attribute if empty. ([42855](https://github.com/WordPress/gutenberg/pull/42855))
-- [Query Loop]: Try filters with ToolsPanel. ([42629](https://github.com/WordPress/gutenberg/pull/42629))
+-   Nav block: Move overlay colors to the responsive wrapper. ([42875](https://github.com/WordPress/gutenberg/pull/42875))
+-   Navigation block: Extract navigation block utils. ([42865](https://github.com/WordPress/gutenberg/pull/42865))
+-   Navigation: Overlay: Fix link inheritance. ([42929](https://github.com/WordPress/gutenberg/pull/42929))
+-   Page List: Fix indentation in PHP file. ([42852](https://github.com/WordPress/gutenberg/pull/42852))
+-   Query Pagination: Correctly position the "next" link on the first page. ([42764](https://github.com/WordPress/gutenberg/pull/42764))
+-   Search Block: Remove margins from the input. ([42959](https://github.com/WordPress/gutenberg/pull/42959))
+-   Transforms: Add group unwrap. ([42685](https://github.com/WordPress/gutenberg/pull/42685))
+-   [Post Title]: Do not add `rel` attribute if empty. ([42855](https://github.com/WordPress/gutenberg/pull/42855))
+-   [Query Loop]: Try filters with ToolsPanel. ([42629](https://github.com/WordPress/gutenberg/pull/42629))
 
 #### Global Styles
 
-- Add block spacing to root block support UI. ([42797](https://github.com/WordPress/gutenberg/pull/42797))
-- Elements: Update the load order of the CSS in the Site Editor. ([42863](https://github.com/WordPress/gutenberg/pull/42863))
-- Heading element UI controls. ([42176](https://github.com/WordPress/gutenberg/pull/42176))
-- Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. ([42776](https://github.com/WordPress/gutenberg/pull/42776))
-- Upsize typography panel components. ([42718](https://github.com/WordPress/gutenberg/pull/42718))
+-   Add block spacing to root block support UI. ([42797](https://github.com/WordPress/gutenberg/pull/42797))
+-   Elements: Update the load order of the CSS in the Site Editor. ([42863](https://github.com/WordPress/gutenberg/pull/42863))
+-   Heading element UI controls. ([42176](https://github.com/WordPress/gutenberg/pull/42176))
+-   Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. ([42776](https://github.com/WordPress/gutenberg/pull/42776))
+-   Upsize typography panel components. ([42718](https://github.com/WordPress/gutenberg/pull/42718))
 
 #### Widgets Editor
 
-- Format Library: Add missing keyboard shortcut description in customizer widget. ([43044](https://github.com/WordPress/gutenberg/pull/43044))
+-   Format Library: Add missing keyboard shortcut description in customizer widget. ([43044](https://github.com/WordPress/gutenberg/pull/43044))
 
 #### Reusable Blocks
 
-- Make template part and reusable block creation language consistent. ([43032](https://github.com/WordPress/gutenberg/pull/43032))
+-   Make template part and reusable block creation language consistent. ([43032](https://github.com/WordPress/gutenberg/pull/43032))
 
 #### CSS & Styling
 
-- Navigation: Try to keep :Where just for paddings. ([42967](https://github.com/WordPress/gutenberg/pull/42967))
+-   Navigation: Try to keep :Where just for paddings. ([42967](https://github.com/WordPress/gutenberg/pull/42967))
 
 #### Accessibility
 
-- Change shortcut text for redo tooltip on Windows. ([42830](https://github.com/WordPress/gutenberg/pull/42830))
+-   Change shortcut text for redo tooltip on Windows. ([42830](https://github.com/WordPress/gutenberg/pull/42830))
 
 #### Block Editor
 
-- Quote: Unwrap on Backspace at start. ([42808](https://github.com/WordPress/gutenberg/pull/42808))
+-   Quote: Unwrap on Backspace at start. ([42808](https://github.com/WordPress/gutenberg/pull/42808))
 
 #### Site Editor
 
-- Add a 'View Site' link in the site editor. ([42331](https://github.com/WordPress/gutenberg/pull/42331))
+-   Add a 'View Site' link in the site editor. ([42331](https://github.com/WordPress/gutenberg/pull/42331))
 
 #### Full Site Editing
 
-- [Full Site Editing]: Update `clear customizations` copy for templates. ([41765](https://github.com/WordPress/gutenberg/pull/41765))
-
+-   [Full Site Editing]: Update `clear customizations` copy for templates. ([41765](https://github.com/WordPress/gutenberg/pull/41765))
 
-## First time contributors
-
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @fellyph: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
-- @merkys7: Fix social-link block missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
-- @Smit2808: Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
-- @theminaldiwan: Fixed alignment issue of tagcloud block when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
+The following PRs were merged by first-time contributors:
 
+-   @fellyph: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+-   @merkys7: Fix social-link block missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+-   @Smit2808: Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+-   @theminaldiwan: Fixed alignment issue of tagcloud block when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
 
 ## Contributors
 
@@ -3030,246 +27065,267 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo
 
-
 = 13.8.1 =
 
+## Changelog
+
+### Enhancements
 
+-   Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
+-   Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
+-   Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
 
-## Changelog
+#### Components
 
+-   BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
+-   ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
+-   ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
+-   Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
+-   InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
+-   ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
+-   SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
+-   Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
+-   Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
+-   ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
+-   UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
+-   BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
+-   CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
+-   Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
+-   InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
+-   ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
+-   `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
 
-### Enhancements
+#### Block Library
+
+-   Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+-   Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
+-   Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
+-   Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
+-   List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
+-   Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
+-   Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
+
+#### Global Styles
+
+-   Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
+-   Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
+-   Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
+
+#### Document Settings
+
+-   Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
 
-- Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
-- Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
-- Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
-
-#### Components
-- BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
-- ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
-- ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
-- Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
-- InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
-- ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
-- SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
-- Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
-- Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
-- ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
-- UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
-- BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
-- CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
-- Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
-- InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
-- ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
-- `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
-
-#### Block Library
-- Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
-- Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
-- Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
-- Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
-- List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
-- Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
-- Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
-
-#### Global Styles
-- Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
-- Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
-- Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
+#### Block Editor
+
+-   Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
+-   Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
+-   Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
+
+#### Site Editor
+
+-   On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
+
+#### Accessibility
+
+-   BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
+
+#### Icons
+
+-   Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
+
+#### Nested / Inner Blocks
+
+-   Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
+
+#### Colors
 
-#### Document Settings
-- Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
+-   Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
 
-#### Block Editor
-- Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
-- Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
-- Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
+### Bug Fixes
 
-#### Site Editor
-- On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
+-   Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
+-   Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
+-   Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
+-   MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
+-   Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
+-   Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
+-   Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
+-   Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
+-   fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
 
-#### Accessibility
-- BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
+#### Block Library
 
-#### Icons
-- Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
+-   Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
+-   Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
+-   Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
+-   List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
+-   List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
+-   List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
+-   List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
+-   Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
+-   Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
+-   Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
+-   Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
+-   Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
+-   [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
+-   Site Logo: Add the missing 'site_icon_url' to the REST_API index. ([42957](https://github.com/WordPress/gutenberg/pull/42957))
 
-#### Nested / Inner Blocks
-- Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
+#### Components
 
-#### Colors
-- Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
-
-
-### Bug Fixes
-
-- Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
-- Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
-- Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
-- MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
-- Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
-- Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
-- Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
-- Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
-- fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
-
-#### Block Library
-- Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
-- Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
-- Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
-- List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
-- List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
-- List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
-- List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
-- Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
-- Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
-- Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
-- Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
-- Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
-- [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
-- Site Logo: Add the missing 'site_icon_url' to the REST_API index. ([42957](https://github.com/WordPress/gutenberg/pull/42957))
-
-#### Components
-- AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
-- ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
-- Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
-- Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
-- RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
-- Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
-- Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
+-   AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
+-   ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
+-   Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
+-   Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
+-   RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
+-   Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
+-   Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
 
 #### Accessibility
-- Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
-- Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
-- Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
-- Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
-- Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
+
+-   Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
+-   Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
+-   Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
+-   Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
+-   Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
 
 #### Post Editor
-- Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
-- Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
-- Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
+
+-   Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
+-   Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
+-   Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
 
 #### Block Editor
-- Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
-- Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
-- Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
-- Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
+
+-   Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
+-   Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
+-   Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
+-   Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
 
 #### CSS & Styling
-- Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
-- Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
-- Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
-- Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
+
+-   Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
+-   Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
+-   Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
+-   Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
 
 #### Global Styles
-- Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
-- Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
-- Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
-- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
+
+-   Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
+-   Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
+-   Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
+-   Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
 
 #### Widgets Editor
-- Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
+
+-   Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
 
 #### Rich Text
-- Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
+
+-   Annotation API: Fix \_\_experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
 
 #### Site Editor
-- Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
-- [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
-- Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
+
+-   Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
+-   [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
+-   Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
 
 #### Themes
-- Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
+
+-   Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
 
 #### Icons
-- Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
+-   Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
 ### Performance
 
 #### Components
-- Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
-- Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
+
+-   Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
+-   Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
 
 #### Post Editor
-- Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
+
+-   Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
 
 #### Testing
-- Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
+
+-   Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
 
 #### Block Validation/Deprecation
-- Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
+-   Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
 ### Experiments
 
-- Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
-- Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
+-   Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
+-   Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
 
 #### CSS & Styling
-- Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
+
+-   Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
 
 #### Global Styles
-- Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
-- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
+-   Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
+-   Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
 ### Documentation
 
-- Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
-- Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
-- Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
-- Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
-- Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
-- Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
-- Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
-- Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
-- Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
-- Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
-- Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
-- ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
+-   Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
+-   Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
+-   Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
+-   Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
+-   Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
+-   Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
+-   Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
+-   Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
+-   Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
+-   Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
+-   Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
+-   ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
 
 #### Components
-- Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
+-   Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
 ### Code Quality
 
-- Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
-- Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
-- Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
-- Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
-- Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
+-   Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
+-   Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
+-   Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
+-   Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
+-   Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
 
 #### Global Styles
-- Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
+
+-   Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
 
 #### Block Library
-- Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
+-   Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
 ### Tools
 
 #### Testing
-- Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
-- Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
-- Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
-- end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
-#### Build Tooling
-- Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
-- Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
+-   Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
+-   Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
+-   Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
+-   end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
+#### Build Tooling
 
-## First time contributors
+-   Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
+-   Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+The following PRs were merged by first-time contributors:
 
+-   @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
 
 ## Contributors
 
@@ -3277,247 +27333,266 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini
 
+= 13.8.0 =
 
+## Changelog
 
+### Enhancements
 
-= 13.8.0 =
+-   Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
+-   Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
+-   Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
 
+#### Components
 
+-   BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
+-   ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
+-   ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
+-   Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
+-   InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
+-   ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
+-   SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
+-   Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
+-   Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
+-   ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
+-   UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
+-   BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
+-   CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
+-   Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
+-   InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
+-   ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
+-   `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
 
-## Changelog
+#### Block Library
 
+-   Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+-   Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
+-   Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
+-   Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
+-   List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
+-   Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
+-   Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
 
-### Enhancements
+#### Global Styles
 
-- Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
-- Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
-- Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
-
-#### Components
-- BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
-- ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
-- ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
-- Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
-- InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
-- ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
-- SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
-- Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
-- Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
-- ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
-- UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
-- BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
-- CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
-- Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
-- InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
-- ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
-- `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
-
-#### Block Library
-- Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
-- Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
-- Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
-- Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
-- List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
-- Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
-- Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
-
-#### Global Styles
-- Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
-- Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
-- Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
+-   Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
+-   Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
+-   Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
 
 #### Document Settings
-- Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
+
+-   Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
 
 #### Block Editor
-- Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
-- Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
-- Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
+
+-   Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
+-   Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
+-   Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
 
 #### Site Editor
-- On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
+
+-   On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
 
 #### Accessibility
-- BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
+
+-   BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
 
 #### Icons
-- Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
+
+-   Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
 
 #### Nested / Inner Blocks
-- Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
+
+-   Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
 
 #### Colors
-- Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
 
+-   Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
 
 ### Bug Fixes
 
-- Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
-- Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
-- Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
-- MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
-- Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
-- Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
-- Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
-- Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
-- fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
+-   Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
+-   Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
+-   Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
+-   MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
+-   Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
+-   Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
+-   Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
+-   Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
+-   fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
 
 #### Block Library
-- Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
-- Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
-- Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
-- List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
-- List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
-- List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
-- List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
-- Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
-- Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
-- Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
-- Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
-- Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
-- [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
+
+-   Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
+-   Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
+-   Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
+-   List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
+-   List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
+-   List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
+-   List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
+-   Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
+-   Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
+-   Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
+-   Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
+-   Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
+-   [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
 
 #### Components
-- AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
-- ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
-- Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
-- Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
-- RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
-- Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
-- Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
+
+-   AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
+-   ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
+-   Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
+-   Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
+-   RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
+-   Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
+-   Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
 
 #### Accessibility
-- Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
-- Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
-- Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
-- Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
-- Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
+
+-   Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
+-   Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
+-   Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
+-   Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
+-   Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
 
 #### Post Editor
-- Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
-- Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
-- Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
+
+-   Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
+-   Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
+-   Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
 
 #### Block Editor
-- Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
-- Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
-- Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
-- Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
+
+-   Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
+-   Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
+-   Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
+-   Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
 
 #### CSS & Styling
-- Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
-- Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
-- Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
-- Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
+
+-   Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
+-   Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
+-   Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
+-   Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
 
 #### Global Styles
-- Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
-- Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
-- Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
-- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
+
+-   Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
+-   Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
+-   Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
+-   Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
 
 #### Widgets Editor
-- Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
+
+-   Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
 
 #### Rich Text
-- Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
+
+-   Annotation API: Fix \_\_experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
 
 #### Site Editor
-- Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
-- [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
-- Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
+
+-   Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
+-   [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
+-   Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
 
 #### Themes
-- Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
+
+-   Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
 
 #### Icons
-- Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
+-   Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
 
 ### Performance
 
 #### Components
-- Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
-- Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
+
+-   Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
+-   Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
 
 #### Post Editor
-- Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
+
+-   Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
 
 #### Testing
-- Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
+
+-   Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
 
 #### Block Validation/Deprecation
-- Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
+-   Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
 
 ### Experiments
 
-- Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
-- Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
+-   Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
+-   Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
 
 #### CSS & Styling
-- Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
+
+-   Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
 
 #### Global Styles
-- Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
-- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
+-   Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
+-   Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
 ### Documentation
 
-- Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
-- Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
-- Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
-- Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
-- Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
-- Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
-- Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
-- Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
-- Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
-- Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
-- Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
-- ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
+-   Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
+-   Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
+-   Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
+-   Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
+-   Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
+-   Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
+-   Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
+-   Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
+-   Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
+-   Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
+-   Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
+-   ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
 
 #### Components
-- Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
+-   Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
 
 ### Code Quality
 
-- Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
-- Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
-- Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
-- Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
-- Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
+-   Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
+-   Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
+-   Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
+-   Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
+-   Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
 
 #### Global Styles
-- Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
+
+-   Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
 
 #### Block Library
-- Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
+-   Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
 
 ### Tools
 
 #### Testing
-- Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
-- Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
-- Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
-- end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
-#### Build Tooling
-- Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
-- Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
+-   Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
+-   Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
+-   Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
+-   end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
 
+#### Build Tooling
 
-## First time contributors
+-   Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
+-   Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
-- @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+The following PRs were merged by first-time contributors:
 
+-   @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+-   @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
 
 ## Contributors
 
@@ -3525,18 +27600,13 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini
 
-
-
-
 = 13.7.3 =
 
-
-
 ## Changelog
 
 ### Various
 
-- Redirect old `theme_page` Site Editor routes to the new `site-editor.php` page. ([42643](https://github.com/WordPress/gutenberg/pull/42643))
+-   Redirect old `theme_page` Site Editor routes to the new `site-editor.php` page. ([42643](https://github.com/WordPress/gutenberg/pull/42643))
 
 ## Contributors
 
@@ -3544,15 +27614,13 @@ The following contributors merged PRs in this release:
 
 @fullofcaffeine
 
-
 = 13.7.2 =
 
 ## Changelog
 
 ### Bug Fixes
 
-- Layout: Add not .alignfull rule from root CSS PR. ([42614](https://github.com/WordPress/gutenberg/pull/42614))
-
+-   Layout: Add not .alignfull rule from root CSS PR. ([42614](https://github.com/WordPress/gutenberg/pull/42614))
 
 = 13.7.1 =
 
@@ -3560,232 +27628,256 @@ The following contributors merged PRs in this release:
 
 ### Bug Fixes
 
-- Plugin: Compatibility fixes for WP 5.9 and Site Editor ([42549](https://github.com/WordPress/gutenberg/pull/42549))
-- Plugin: Fix PHP fatal error when using WP 5.9. ([42550](https://github.com/WordPress/gutenberg/pull/42550))
-
+-   Plugin: Compatibility fixes for WP 5.9 and Site Editor ([42549](https://github.com/WordPress/gutenberg/pull/42549))
+-   Plugin: Fix PHP fatal error when using WP 5.9. ([42550](https://github.com/WordPress/gutenberg/pull/42550))
 
 = 13.7.0 =
 
 ## Changelog
 
 ### Enhancements
-- Update the modal design. ([40781](https://github.com/WordPress/gutenberg/pull/40781))
-- Themes: Adds text decoration support to post title block. ([42328](https://github.com/WordPress/gutenberg/pull/42328))
-- Social Link: Automatically prepend emails with mailto protocol. ([42186](https://github.com/WordPress/gutenberg/pull/42186))
-- Add better ARIA labels to toggle buttons in Summary panel. ([42114](https://github.com/WordPress/gutenberg/pull/42114))
-- Start with featured image in media placeholder. ([41722](https://github.com/WordPress/gutenberg/pull/41722))
 
+-   Update the modal design. ([40781](https://github.com/WordPress/gutenberg/pull/40781))
+-   Themes: Adds text decoration support to post title block. ([42328](https://github.com/WordPress/gutenberg/pull/42328))
+-   Social Link: Automatically prepend emails with mailto protocol. ([42186](https://github.com/WordPress/gutenberg/pull/42186))
+-   Add better ARIA labels to toggle buttons in Summary panel. ([42114](https://github.com/WordPress/gutenberg/pull/42114))
+-   Start with featured image in media placeholder. ([41722](https://github.com/WordPress/gutenberg/pull/41722))
 
 #### Components
-- ColorPicker: Widen hex input field for mobile. ([42004](https://github.com/WordPress/gutenberg/pull/42004))
-- ComboboxControl / FormTokenField: Add flag for larger default size. ([40746](https://github.com/WordPress/gutenberg/pull/40746))
-- Try tabs instead of segmented control for switching between solid/gradient in color panels. ([41937](https://github.com/WordPress/gutenberg/pull/41937))
+
+-   ColorPicker: Widen hex input field for mobile. ([42004](https://github.com/WordPress/gutenberg/pull/42004))
+-   ComboboxControl / FormTokenField: Add flag for larger default size. ([40746](https://github.com/WordPress/gutenberg/pull/40746))
+-   Try tabs instead of segmented control for switching between solid/gradient in color panels. ([41937](https://github.com/WordPress/gutenberg/pull/41937))
 
 #### Document Settings
-- Make Post Format, Slug and Author fields fill the sidebar. ([42146](https://github.com/WordPress/gutenberg/pull/42146))
-- Post Template: Update fallback label. ([42063](https://github.com/WordPress/gutenberg/pull/42063))
-- Rewrite URL (Permalink) panel as a popover. ([42033](https://github.com/WordPress/gutenberg/pull/42033))
+
+-   Make Post Format, Slug and Author fields fill the sidebar. ([42146](https://github.com/WordPress/gutenberg/pull/42146))
+-   Post Template: Update fallback label. ([42063](https://github.com/WordPress/gutenberg/pull/42063))
+-   Rewrite URL (Permalink) panel as a popover. ([42033](https://github.com/WordPress/gutenberg/pull/42033))
 
 #### Full Site Editing
-- Expand the templates that can be added - custom taxonomies, specific term, specific category and tag. ([41875](https://github.com/WordPress/gutenberg/pull/41875))
-- Expand the templates that can be added - specific pages. ([42138](https://github.com/WordPress/gutenberg/pull/42138))
-- Re-architect templates addition. ([42457](https://github.com/WordPress/gutenberg/pull/42457))
-- List View: Use heading content for button label text if available. ([41855](https://github.com/WordPress/gutenberg/pull/41855))
-- Add New - Custom/General template. ([42127](https://github.com/WordPress/gutenberg/pull/42127))
-- Add the 'Apply to inner blocks' option to Block locking ([41876](https://github.com/WordPress/gutenberg/pull/41876))
-- Update: Wording on add generic template modal. ([42379](https://github.com/WordPress/gutenberg/pull/42379))
+
+-   Expand the templates that can be added - custom taxonomies, specific term, specific category and tag. ([41875](https://github.com/WordPress/gutenberg/pull/41875))
+-   Expand the templates that can be added - specific pages. ([42138](https://github.com/WordPress/gutenberg/pull/42138))
+-   Re-architect templates addition. ([42457](https://github.com/WordPress/gutenberg/pull/42457))
+-   List View: Use heading content for button label text if available. ([41855](https://github.com/WordPress/gutenberg/pull/41855))
+-   Add New - Custom/General template. ([42127](https://github.com/WordPress/gutenberg/pull/42127))
+-   Add the 'Apply to inner blocks' option to Block locking ([41876](https://github.com/WordPress/gutenberg/pull/41876))
+-   Update: Wording on add generic template modal. ([42379](https://github.com/WordPress/gutenberg/pull/42379))
 
 #### Post Editor
-- Add estimated time to read to table of contents in editor. ([41611](https://github.com/WordPress/gutenberg/pull/41611))
-- Add month and day as a suggest format to the date format picker. ([42317](https://github.com/WordPress/gutenberg/pull/42317))
-- Post Editor: Preload templates post type permissions (REST-API). ([42209](https://github.com/WordPress/gutenberg/pull/42209))
+
+-   Add estimated time to read to table of contents in editor. ([41611](https://github.com/WordPress/gutenberg/pull/41611))
+-   Add month and day as a suggest format to the date format picker. ([42317](https://github.com/WordPress/gutenberg/pull/42317))
+-   Post Editor: Preload templates post type permissions (REST-API). ([42209](https://github.com/WordPress/gutenberg/pull/42209))
 
 ### New APIs
 
-- JS Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook. ([42024](https://github.com/WordPress/gutenberg/pull/42024))
+-   JS Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook. ([42024](https://github.com/WordPress/gutenberg/pull/42024))
 
-### Accessibility 
+### Accessibility
 
-- Add aria-checked to the selected heading level menu item. ([42273](https://github.com/WordPress/gutenberg/pull/42273))
-- Fix tabbing from first or last block in site editor. ([42036](https://github.com/WordPress/gutenberg/pull/42036))
-- Navigation block: Only focus submenu trigger on escape key press. ([41986](https://github.com/WordPress/gutenberg/pull/41986))
-- Change the BoxControl ARIA role from region to group. ([42094](https://github.com/WordPress/gutenberg/pull/42094))
-- Update site editor region labels to match post editor. ([42037](https://github.com/WordPress/gutenberg/pull/42037))
+-   Add aria-checked to the selected heading level menu item. ([42273](https://github.com/WordPress/gutenberg/pull/42273))
+-   Fix tabbing from first or last block in site editor. ([42036](https://github.com/WordPress/gutenberg/pull/42036))
+-   Navigation block: Only focus submenu trigger on escape key press. ([41986](https://github.com/WordPress/gutenberg/pull/41986))
+-   Change the BoxControl ARIA role from region to group. ([42094](https://github.com/WordPress/gutenberg/pull/42094))
+-   Update site editor region labels to match post editor. ([42037](https://github.com/WordPress/gutenberg/pull/42037))
 
 ### Bug Fixes
 
-- Enable `shift` in URLPopover component. ([42214](https://github.com/WordPress/gutenberg/pull/42214))
-- Multi-selection: Fix select all in Safari. ([42340](https://github.com/WordPress/gutenberg/pull/42340))
-- Playwright: Fix relative URLs. ([42361](https://github.com/WordPress/gutenberg/pull/42361))
-- Document Settings: Fix tooltip appearing when opening popovers in Summary panel. ([42381](https://github.com/WordPress/gutenberg/pull/42381))
-- MediaReplaceFlow: Fix UI showing stale URL by avoiding state duplication. ([42116](https://github.com/WordPress/gutenberg/pull/42116))
-- Template Mode: Allow clearing name field while typing. ([42065](https://github.com/WordPress/gutenberg/pull/42065))
-- Navigation: Prevent title and href props from being rendered as HTML attributes. ([41833](https://github.com/WordPress/gutenberg/pull/41833))
-- Recurse into conditional CSS rules for Editor iframe stylesheets. ([41110](https://github.com/WordPress/gutenberg/pull/41110))
+-   Enable `shift` in URLPopover component. ([42214](https://github.com/WordPress/gutenberg/pull/42214))
+-   Multi-selection: Fix select all in Safari. ([42340](https://github.com/WordPress/gutenberg/pull/42340))
+-   Playwright: Fix relative URLs. ([42361](https://github.com/WordPress/gutenberg/pull/42361))
+-   Document Settings: Fix tooltip appearing when opening popovers in Summary panel. ([42381](https://github.com/WordPress/gutenberg/pull/42381))
+-   MediaReplaceFlow: Fix UI showing stale URL by avoiding state duplication. ([42116](https://github.com/WordPress/gutenberg/pull/42116))
+-   Template Mode: Allow clearing name field while typing. ([42065](https://github.com/WordPress/gutenberg/pull/42065))
+-   Navigation: Prevent title and href props from being rendered as HTML attributes. ([41833](https://github.com/WordPress/gutenberg/pull/41833))
+-   Recurse into conditional CSS rules for Editor iframe stylesheets. ([41110](https://github.com/WordPress/gutenberg/pull/41110))
 
 #### Block Library
-- Comment template: Left, center and right alignments. ([41892](https://github.com/WordPress/gutenberg/pull/41892))
-- Comments block: Remove stray legacy class from edit. ([42335](https://github.com/WordPress/gutenberg/pull/42335))
-- Filter out images with no local id before loading media library. ([42083](https://github.com/WordPress/gutenberg/pull/42083))
-- Fix undo trap in Gallery block when transforming from shortcode. ([42001](https://github.com/WordPress/gutenberg/pull/42001))
-- Remove sticky posts setting when we inherit the query. ([40656](https://github.com/WordPress/gutenberg/pull/40656))
-- Social Links: Set the default protocol to 'https' if not specified. ([42167](https://github.com/WordPress/gutenberg/pull/42167))
+
+-   Comment template: Left, center and right alignments. ([41892](https://github.com/WordPress/gutenberg/pull/41892))
+-   Comments block: Remove stray legacy class from edit. ([42335](https://github.com/WordPress/gutenberg/pull/42335))
+-   Filter out images with no local id before loading media library. ([42083](https://github.com/WordPress/gutenberg/pull/42083))
+-   Fix undo trap in Gallery block when transforming from shortcode. ([42001](https://github.com/WordPress/gutenberg/pull/42001))
+-   Remove sticky posts setting when we inherit the query. ([40656](https://github.com/WordPress/gutenberg/pull/40656))
+-   Social Links: Set the default protocol to 'https' if not specified. ([42167](https://github.com/WordPress/gutenberg/pull/42167))
 
 #### Components
-- Add missing label to border radius range control. ([42118](https://github.com/WordPress/gutenberg/pull/42118))
-- ComboboxControl: Use custom prefix when generating the instanceId. ([42134](https://github.com/WordPress/gutenberg/pull/42134))
-- Popover: Pass missing anchor ref to the getAnchorRect callback prop. ([42076](https://github.com/WordPress/gutenberg/pull/42076))
-- [Popover]: Fix regression of inbetween inserter in site editor. ([42329](https://github.com/WordPress/gutenberg/pull/42329))
+
+-   Add missing label to border radius range control. ([42118](https://github.com/WordPress/gutenberg/pull/42118))
+-   ComboboxControl: Use custom prefix when generating the instanceId. ([42134](https://github.com/WordPress/gutenberg/pull/42134))
+-   Popover: Pass missing anchor ref to the getAnchorRect callback prop. ([42076](https://github.com/WordPress/gutenberg/pull/42076))
+-   [Popover]: Fix regression of inbetween inserter in site editor. ([42329](https://github.com/WordPress/gutenberg/pull/42329))
 
 #### Block Editor
-- Fix Link Control 'Open in new tab' option not saving properly on committing link in buttons block. ([42073](https://github.com/WordPress/gutenberg/pull/42073))
-- Fix list view drop indicator positioning. ([42353](https://github.com/WordPress/gutenberg/pull/42353))
-- Make sure comments keep their location when inside paragraph. ([31374](https://github.com/WordPress/gutenberg/pull/31374))
-- Handle cases when getBlockType returns undefined. ([41884](https://github.com/WordPress/gutenberg/pull/41884))
+
+-   Fix Link Control 'Open in new tab' option not saving properly on committing link in buttons block. ([42073](https://github.com/WordPress/gutenberg/pull/42073))
+-   Fix list view drop indicator positioning. ([42353](https://github.com/WordPress/gutenberg/pull/42353))
+-   Make sure comments keep their location when inside paragraph. ([31374](https://github.com/WordPress/gutenberg/pull/31374))
+-   Handle cases when getBlockType returns undefined. ([41884](https://github.com/WordPress/gutenberg/pull/41884))
 
 #### Site Editor
-- Allow clearing template name field while typing. ([42149](https://github.com/WordPress/gutenberg/pull/42149))
-- Template Parts: Disable block transformations. ([42090](https://github.com/WordPress/gutenberg/pull/42090))
-- Update template details browse label. ([42350](https://github.com/WordPress/gutenberg/pull/42350))
-- Fix pattern carousel / grid styling regression. ([42194](https://github.com/WordPress/gutenberg/pull/42194))
+
+-   Allow clearing template name field while typing. ([42149](https://github.com/WordPress/gutenberg/pull/42149))
+-   Template Parts: Disable block transformations. ([42090](https://github.com/WordPress/gutenberg/pull/42090))
+-   Update template details browse label. ([42350](https://github.com/WordPress/gutenberg/pull/42350))
+-   Fix pattern carousel / grid styling regression. ([42194](https://github.com/WordPress/gutenberg/pull/42194))
 
 #### Global Styles
-- Filter block level styles before compiling global stylesheet. ([42207](https://github.com/WordPress/gutenberg/pull/42207))
-- Fix link element hover bleeding into button element default styles. ([42072](https://github.com/WordPress/gutenberg/pull/42072))
+
+-   Filter block level styles before compiling global stylesheet. ([42207](https://github.com/WordPress/gutenberg/pull/42207))
+-   Fix link element hover bleeding into button element default styles. ([42072](https://github.com/WordPress/gutenberg/pull/42072))
 
 #### Post Editor
-- Editor: Fix term selector component exports. ([41784](https://github.com/WordPress/gutenberg/pull/41784))
-- Post Template: Fix condition checks. ([42038](https://github.com/WordPress/gutenberg/pull/42038))
+
+-   Editor: Fix term selector component exports. ([41784](https://github.com/WordPress/gutenberg/pull/41784))
+-   Post Template: Fix condition checks. ([42038](https://github.com/WordPress/gutenberg/pull/42038))
 
 #### Build Tooling
-- Tests: Ignore test files in `build-types` folder. ([42260](https://github.com/WordPress/gutenberg/pull/42260))
-- Fix: IsEditedPostAutosaveable test case. ([42280](https://github.com/WordPress/gutenberg/pull/42280))
+
+-   Tests: Ignore test files in `build-types` folder. ([42260](https://github.com/WordPress/gutenberg/pull/42260))
+-   Fix: IsEditedPostAutosaveable test case. ([42280](https://github.com/WordPress/gutenberg/pull/42280))
 
 ### Performance
-- Work on refactor away from Lodash to reduce build size continued
+
+-   Work on refactor away from Lodash to reduce build size continued
 
 ### Documentation
-- Add support for @ignore in the docgen tool. ([42198](https://github.com/WordPress/gutenberg/pull/42198))
-- Button Component readme :  Suggest label in case there is not text. ([40639](https://github.com/WordPress/gutenberg/pull/40639))
-- New handbook page for curating the editor experience. ([42022](https://github.com/WordPress/gutenberg/pull/42022))
-- Rename Templates page to Block Templates. ([42276](https://github.com/WordPress/gutenberg/pull/42276))
-- Gutenberg Data Tutorial 5: Adding a Delete Button. ([40940](https://github.com/WordPress/gutenberg/pull/40940))
-- Added new FAQ on disabling caching of theme.json. ([42346](https://github.com/WordPress/gutenberg/pull/42346))
-- Update link to sample code in gutenberg-examples. ([42208](https://github.com/WordPress/gutenberg/pull/42208))
-- Add @example for getNotices to create example in the handbook. ([42023](https://github.com/WordPress/gutenberg/pull/42023))
-- Add examples for all actions/selectors for the @wordpress/notice package. ([42077](https://github.com/WordPress/gutenberg/pull/42077))
-- Update versions in WordPress for upcoming 6.0.1 release. ([42161](https://github.com/WordPress/gutenberg/pull/42161))
-- Fix code blocks for Block Transforms API. ([42287](https://github.com/WordPress/gutenberg/pull/42287))
-- Fix formatting problems with curating handbook page. ([42135](https://github.com/WordPress/gutenberg/pull/42135))
-- Fix link to meta box example. ([42293](https://github.com/WordPress/gutenberg/pull/42293))
-- Update attributes example: Alter source children. ([41016](https://github.com/WordPress/gutenberg/pull/41016))
+
+-   Add support for @ignore in the docgen tool. ([42198](https://github.com/WordPress/gutenberg/pull/42198))
+-   Button Component readme : Suggest label in case there is not text. ([40639](https://github.com/WordPress/gutenberg/pull/40639))
+-   New handbook page for curating the editor experience. ([42022](https://github.com/WordPress/gutenberg/pull/42022))
+-   Rename Templates page to Block Templates. ([42276](https://github.com/WordPress/gutenberg/pull/42276))
+-   Gutenberg Data Tutorial 5: Adding a Delete Button. ([40940](https://github.com/WordPress/gutenberg/pull/40940))
+-   Added new FAQ on disabling caching of theme.json. ([42346](https://github.com/WordPress/gutenberg/pull/42346))
+-   Update link to sample code in gutenberg-examples. ([42208](https://github.com/WordPress/gutenberg/pull/42208))
+-   Add @example for getNotices to create example in the handbook. ([42023](https://github.com/WordPress/gutenberg/pull/42023))
+-   Add examples for all actions/selectors for the @wordpress/notice package. ([42077](https://github.com/WordPress/gutenberg/pull/42077))
+-   Update versions in WordPress for upcoming 6.0.1 release. ([42161](https://github.com/WordPress/gutenberg/pull/42161))
+-   Fix code blocks for Block Transforms API. ([42287](https://github.com/WordPress/gutenberg/pull/42287))
+-   Fix formatting problems with curating handbook page. ([42135](https://github.com/WordPress/gutenberg/pull/42135))
+-   Fix link to meta box example. ([42293](https://github.com/WordPress/gutenberg/pull/42293))
+-   Update attributes example: Alter source children. ([41016](https://github.com/WordPress/gutenberg/pull/41016))
 
 #### npm publishing workflow
-- Simplify workflow with GitHub Actions ([42189](https://github.com/WordPress/gutenberg/pull/42189))
-- Update details related to npm publishing. ([42364](https://github.com/WordPress/gutenberg/pull/42364))
+
+-   Simplify workflow with GitHub Actions ([42189](https://github.com/WordPress/gutenberg/pull/42189))
+-   Update details related to npm publishing. ([42364](https://github.com/WordPress/gutenberg/pull/42364))
 
 ### Experiments
-- Add a `WP_Style_Engine_CSS_Declarations` object. ([42043](https://github.com/WordPress/gutenberg/pull/42043))
-- Style engine: Rename 'css_var' option property to 'convert_vars_to_classnames'. ([42113](https://github.com/WordPress/gutenberg/pull/42113))
-- Style engine: Return declarations in array response. ([42307](https://github.com/WordPress/gutenberg/pull/42307))
-- Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json. ([40875](https://github.com/WordPress/gutenberg/pull/40875))
+
+-   Add a `WP_Style_Engine_CSS_Declarations` object. ([42043](https://github.com/WordPress/gutenberg/pull/42043))
+-   Style engine: Rename 'css_var' option property to 'convert_vars_to_classnames'. ([42113](https://github.com/WordPress/gutenberg/pull/42113))
+-   Style engine: Return declarations in array response. ([42307](https://github.com/WordPress/gutenberg/pull/42307))
+-   Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json. ([40875](https://github.com/WordPress/gutenberg/pull/40875))
 
 ### Code Quality
-- Block Editor: Use optional chaining in 'block-list' component. ([42068](https://github.com/WordPress/gutenberg/pull/42068))
-- Blocks: Remove no longer used Block Content Context. ([41395](https://github.com/WordPress/gutenberg/pull/41395))
-- Chore: Remove two empty unrequired object destructuring. ([42279](https://github.com/WordPress/gutenberg/pull/42279))
-- Fix fix. ([42160](https://github.com/WordPress/gutenberg/pull/42160))
-- Fix: Inexistent parameter passed to getBlockIndex on getBlockInsertionPoint. ([42250](https://github.com/WordPress/gutenberg/pull/42250))
-- Fix: State type in automaticChangeStatus reducer. ([42251](https://github.com/WordPress/gutenberg/pull/42251))
-- Style engine: Add unit test coverage for WP_Style_Engine_CSS_Declarations. ([42306](https://github.com/WordPress/gutenberg/pull/42306))
-- Style engine: Rename main public function to reflect functionality. ([42140](https://github.com/WordPress/gutenberg/pull/42140))
-- Update: Remove repeated and condition on useElevation. ([42048](https://github.com/WordPress/gutenberg/pull/42048))
-- useSelect: Use useDebugValue to better display data in DevTools. ([42225](https://github.com/WordPress/gutenberg/pull/42225))
+
+-   Block Editor: Use optional chaining in 'block-list' component. ([42068](https://github.com/WordPress/gutenberg/pull/42068))
+-   Blocks: Remove no longer used Block Content Context. ([41395](https://github.com/WordPress/gutenberg/pull/41395))
+-   Chore: Remove two empty unrequired object destructuring. ([42279](https://github.com/WordPress/gutenberg/pull/42279))
+-   Fix fix. ([42160](https://github.com/WordPress/gutenberg/pull/42160))
+-   Fix: Inexistent parameter passed to getBlockIndex on getBlockInsertionPoint. ([42250](https://github.com/WordPress/gutenberg/pull/42250))
+-   Fix: State type in automaticChangeStatus reducer. ([42251](https://github.com/WordPress/gutenberg/pull/42251))
+-   Style engine: Add unit test coverage for WP_Style_Engine_CSS_Declarations. ([42306](https://github.com/WordPress/gutenberg/pull/42306))
+-   Style engine: Rename main public function to reflect functionality. ([42140](https://github.com/WordPress/gutenberg/pull/42140))
+-   Update: Remove repeated and condition on useElevation. ([42048](https://github.com/WordPress/gutenberg/pull/42048))
+-   useSelect: Use useDebugValue to better display data in DevTools. ([42225](https://github.com/WordPress/gutenberg/pull/42225))
 
 #### Migration to Typescript
-- Grid: Convert component to TypeScript. ([41923](https://github.com/WordPress/gutenberg/pull/41923))
-- HStack: Convert component to TypeScript. ([41580](https://github.com/WordPress/gutenberg/pull/41580))
-- RangeControl: Convert component to TypeScript. ([40535](https://github.com/WordPress/gutenberg/pull/40535))
-- RangeControl: Convert stories to TypeScript. ([41444](https://github.com/WordPress/gutenberg/pull/41444))
-- RangeControl: Convert unit tests to typescript. ([41445](https://github.com/WordPress/gutenberg/pull/41445))
-- Scrollable: Convert component to TypeScript. ([42016](https://github.com/WordPress/gutenberg/pull/42016))
-- TextHighlight: Convert component to TypeScript. ([41698](https://github.com/WordPress/gutenberg/pull/41698))
-- Tip: Covert component to TypeScript. ([42262](https://github.com/WordPress/gutenberg/pull/42262))
-- VisuallyHidden: Convert component to TypeScript. ([42220](https://github.com/WordPress/gutenberg/pull/42220))
-- Spacer: Complete TypeScript migration of component. ([42013](https://github.com/WordPress/gutenberg/pull/42013))
-- 
+
+-   Grid: Convert component to TypeScript. ([41923](https://github.com/WordPress/gutenberg/pull/41923))
+-   HStack: Convert component to TypeScript. ([41580](https://github.com/WordPress/gutenberg/pull/41580))
+-   RangeControl: Convert component to TypeScript. ([40535](https://github.com/WordPress/gutenberg/pull/40535))
+-   RangeControl: Convert stories to TypeScript. ([41444](https://github.com/WordPress/gutenberg/pull/41444))
+-   RangeControl: Convert unit tests to typescript. ([41445](https://github.com/WordPress/gutenberg/pull/41445))
+-   Scrollable: Convert component to TypeScript. ([42016](https://github.com/WordPress/gutenberg/pull/42016))
+-   TextHighlight: Convert component to TypeScript. ([41698](https://github.com/WordPress/gutenberg/pull/41698))
+-   Tip: Covert component to TypeScript. ([42262](https://github.com/WordPress/gutenberg/pull/42262))
+-   VisuallyHidden: Convert component to TypeScript. ([42220](https://github.com/WordPress/gutenberg/pull/42220))
+-   Spacer: Complete TypeScript migration of component. ([42013](https://github.com/WordPress/gutenberg/pull/42013))
+-
+
 #### Components
-- Add eslint to prevent SSR breakage. ([42248](https://github.com/WordPress/gutenberg/pull/42248))
-- Fix typos in components changelog. ([42244](https://github.com/WordPress/gutenberg/pull/42244))
-- Refactor `ColorPicker` to pass `exhaustive-deps`. ([41294](https://github.com/WordPress/gutenberg/pull/41294))
-- Refactor `Navigation` to pass `exhaustive-deps`. ([41612](https://github.com/WordPress/gutenberg/pull/41612))
-- Refactor`FocalPointPicker` to pass exhaustive-deps. ([41520](https://github.com/WordPress/gutenberg/pull/41520))
 
+-   Add eslint to prevent SSR breakage. ([42248](https://github.com/WordPress/gutenberg/pull/42248))
+-   Fix typos in components changelog. ([42244](https://github.com/WordPress/gutenberg/pull/42244))
+-   Refactor `ColorPicker` to pass `exhaustive-deps`. ([41294](https://github.com/WordPress/gutenberg/pull/41294))
+-   Refactor `Navigation` to pass `exhaustive-deps`. ([41612](https://github.com/WordPress/gutenberg/pull/41612))
+-   Refactor`FocalPointPicker` to pass exhaustive-deps. ([41520](https://github.com/WordPress/gutenberg/pull/41520))
 
 #### Block Library
-- More Block: Remove duplicate block class. ([42120](https://github.com/WordPress/gutenberg/pull/42120))
-- Page Break Block: Remove duplicate block class. ([42121](https://github.com/WordPress/gutenberg/pull/42121))
-- Page List Block: Remove duplicate useBlockProps hook. ([42123](https://github.com/WordPress/gutenberg/pull/42123))
-- Remove client side variation fallbacks. ([42180](https://github.com/WordPress/gutenberg/pull/42180))
-- Site Logo: Remove unnecessary state. ([42042](https://github.com/WordPress/gutenberg/pull/42042))
 
-### Tools
+-   More Block: Remove duplicate block class. ([42120](https://github.com/WordPress/gutenberg/pull/42120))
+-   Page Break Block: Remove duplicate block class. ([42121](https://github.com/WordPress/gutenberg/pull/42121))
+-   Page List Block: Remove duplicate useBlockProps hook. ([42123](https://github.com/WordPress/gutenberg/pull/42123))
+-   Remove client side variation fallbacks. ([42180](https://github.com/WordPress/gutenberg/pull/42180))
+-   Site Logo: Remove unnecessary state. ([42042](https://github.com/WordPress/gutenberg/pull/42042))
 
-- Automate the cherry-picking process for WordPress and Gutenberg releases. ([40969](https://github.com/WordPress/gutenberg/pull/40969))
-- Update the minimum WP version to 5.9. ([41306](https://github.com/WordPress/gutenberg/pull/41306))
-- Components: Remove duplicate CHANGELOG titles. ([42334](https://github.com/WordPress/gutenberg/pull/42334))
+### Tools
 
+-   Automate the cherry-picking process for WordPress and Gutenberg releases. ([40969](https://github.com/WordPress/gutenberg/pull/40969))
+-   Update the minimum WP version to 5.9. ([41306](https://github.com/WordPress/gutenberg/pull/41306))
+-   Components: Remove duplicate CHANGELOG titles. ([42334](https://github.com/WordPress/gutenberg/pull/42334))
 
 #### Testing
-- Fix: Multiple regex in packages/env/lib/config/test/config.js. ([42249](https://github.com/WordPress/gutenberg/pull/42249))
-- Migrate Block Mover Test For Playwright. ([42039](https://github.com/WordPress/gutenberg/pull/42039))
-- Migrate format API test for playwright. ([42035](https://github.com/WordPress/gutenberg/pull/42035))
-- Migrate list block test to Playwright. ([41555](https://github.com/WordPress/gutenberg/pull/41555))
-- end-to-end Tests: Migrate Comments block test to Playwright. ([39826](https://github.com/WordPress/gutenberg/pull/39826))
-- fix: Update Image block native end-to-end test fixture. ([42050](https://github.com/WordPress/gutenberg/pull/42050))
-- SelectControl: Use roles and @testing-library/user-event in unit tests. ([42308](https://github.com/WordPress/gutenberg/pull/42308))
+
+-   Fix: Multiple regex in packages/env/lib/config/test/config.js. ([42249](https://github.com/WordPress/gutenberg/pull/42249))
+-   Migrate Block Mover Test For Playwright. ([42039](https://github.com/WordPress/gutenberg/pull/42039))
+-   Migrate format API test for playwright. ([42035](https://github.com/WordPress/gutenberg/pull/42035))
+-   Migrate list block test to Playwright. ([41555](https://github.com/WordPress/gutenberg/pull/41555))
+-   end-to-end Tests: Migrate Comments block test to Playwright. ([39826](https://github.com/WordPress/gutenberg/pull/39826))
+-   fix: Update Image block native end-to-end test fixture. ([42050](https://github.com/WordPress/gutenberg/pull/42050))
+-   SelectControl: Use roles and @testing-library/user-event in unit tests. ([42308](https://github.com/WordPress/gutenberg/pull/42308))
 
 #### Build Tooling
-- Ignore *.d.ts files when running unit tests. ([42304](https://github.com/WordPress/gutenberg/pull/42304))
-- Dependency Extraction: Output asset.php files for shared chunks too. ([41002](https://github.com/WordPress/gutenberg/pull/41002))
+
+-   Ignore \*.d.ts files when running unit tests. ([42304](https://github.com/WordPress/gutenberg/pull/42304))
+-   Dependency Extraction: Output asset.php files for shared chunks too. ([41002](https://github.com/WordPress/gutenberg/pull/41002))
 
 #### Create Block
-- Added prompt to continue when minimum system requirements not met. ([42151](https://github.com/WordPress/gutenberg/pull/42151))
-- More careful prompts to continue when minimum system requirements are not met. ([42254](https://github.com/WordPress/gutenberg/pull/42254))
-- Fix regression from `_.size()` refactoring. ([42049](https://github.com/WordPress/gutenberg/pull/42049))
+
+-   Added prompt to continue when minimum system requirements not met. ([42151](https://github.com/WordPress/gutenberg/pull/42151))
+-   More careful prompts to continue when minimum system requirements are not met. ([42254](https://github.com/WordPress/gutenberg/pull/42254))
+-   Fix regression from `_.size()` refactoring. ([42049](https://github.com/WordPress/gutenberg/pull/42049))
 
 #### Block Library
-- Comments block: Change ID to `core/comments`. ([40506](https://github.com/WordPress/gutenberg/pull/40506))
-- Elements: Buttons: Style the cursor for all button elements. ([42102](https://github.com/WordPress/gutenberg/pull/42102))
-- Post Comments Form: Fix warning i18n. ([42131](https://github.com/WordPress/gutenberg/pull/42131))
-- Use more clear and inclusive language in comments. ([42155](https://github.com/WordPress/gutenberg/pull/42155))
+
+-   Comments block: Change ID to `core/comments`. ([40506](https://github.com/WordPress/gutenberg/pull/40506))
+-   Elements: Buttons: Style the cursor for all button elements. ([42102](https://github.com/WordPress/gutenberg/pull/42102))
+-   Post Comments Form: Fix warning i18n. ([42131](https://github.com/WordPress/gutenberg/pull/42131))
+-   Use more clear and inclusive language in comments. ([42155](https://github.com/WordPress/gutenberg/pull/42155))
 
 #### Global Styles
-- Add link element `:Hover` interactivity control to global styles UI. ([41976](https://github.com/WordPress/gutenberg/pull/41976))
-- Add support for heading elements. ([41981](https://github.com/WordPress/gutenberg/pull/41981))
-- Add visited to link element allowed pseudo selector list. ([42096](https://github.com/WordPress/gutenberg/pull/42096))
-- Button Elements: Allow element styles in classic themes. ([42012](https://github.com/WordPress/gutenberg/pull/42012))
-- Theme.json:  Add spacing size presets. ([41527](https://github.com/WordPress/gutenberg/pull/41527))
-- Theme.json Schema: Add support for button elements. ([42133](https://github.com/WordPress/gutenberg/pull/42133))
+
+-   Add link element `:Hover` interactivity control to global styles UI. ([41976](https://github.com/WordPress/gutenberg/pull/41976))
+-   Add support for heading elements. ([41981](https://github.com/WordPress/gutenberg/pull/41981))
+-   Add visited to link element allowed pseudo selector list. ([42096](https://github.com/WordPress/gutenberg/pull/42096))
+-   Button Elements: Allow element styles in classic themes. ([42012](https://github.com/WordPress/gutenberg/pull/42012))
+-   Theme.json: Add spacing size presets. ([41527](https://github.com/WordPress/gutenberg/pull/41527))
+-   Theme.json Schema: Add support for button elements. ([42133](https://github.com/WordPress/gutenberg/pull/42133))
 
 #### Block Editor
-- Rich text: Remove placeholder on composition start. ([41970](https://github.com/WordPress/gutenberg/pull/41970))
-- Rich text: Remove space handling (for BUTTON and SUMMARY). ([41977](https://github.com/WordPress/gutenberg/pull/41977))
-- Site Editor: Make Code Editor reflect block conversions. ([42081](https://github.com/WordPress/gutenberg/pull/42081))
-- Remove the Template panel option from the Preferences modal ([42030](https://github.com/WordPress/gutenberg/pull/42030))
+
+-   Rich text: Remove placeholder on composition start. ([41970](https://github.com/WordPress/gutenberg/pull/41970))
+-   Rich text: Remove space handling (for BUTTON and SUMMARY). ([41977](https://github.com/WordPress/gutenberg/pull/41977))
+-   Site Editor: Make Code Editor reflect block conversions. ([42081](https://github.com/WordPress/gutenberg/pull/42081))
+-   Remove the Template panel option from the Preferences modal ([42030](https://github.com/WordPress/gutenberg/pull/42030))
+
 #### Data Layer
-- Enable useSelect autocompletion. ([41911](https://github.com/WordPress/gutenberg/pull/41911))
-- Update wordpress/data documentation in order to prefer store object instead of store name to access the store. ([41210](https://github.com/WordPress/gutenberg/pull/41210))
 
-## First time contributors
+-   Enable useSelect autocompletion. ([41911](https://github.com/WordPress/gutenberg/pull/41911))
+-   Update wordpress/data documentation in order to prefer store object instead of store name to access the store. ([41210](https://github.com/WordPress/gutenberg/pull/41210))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @MarieComet: Button Component readme :  Suggest label in case there is not text. ([40639](https://github.com/WordPress/gutenberg/pull/40639))
-- @rflw: Update attributes example: Alter source children. ([41016](https://github.com/WordPress/gutenberg/pull/41016))
-- @schutzsmith: Theme.json Documentation - Added new FAQ on disabling caching of theme.json. ([42346](https://github.com/WordPress/gutenberg/pull/42346))
-- @welenofsky: Update link to sample code in gutenberg-examples. ([42208](https://github.com/WordPress/gutenberg/pull/42208))
+The following PRs were merged by first-time contributors:
 
+-   @MarieComet: Button Component readme : Suggest label in case there is not text. ([40639](https://github.com/WordPress/gutenberg/pull/40639))
+-   @rflw: Update attributes example: Alter source children. ([41016](https://github.com/WordPress/gutenberg/pull/41016))
+-   @schutzsmith: Theme.json Documentation - Added new FAQ on disabling caching of theme.json. ([42346](https://github.com/WordPress/gutenberg/pull/42346))
+-   @welenofsky: Update link to sample code in gutenberg-examples. ([42208](https://github.com/WordPress/gutenberg/pull/42208))
 
 ## Contributors
 
@@ -3793,200 +27885,199 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @afercia @alexstine @andrewserong @annezazu @aristath @bph @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hz-tyfoon @jameskoster @jorgefilipecosta @jsnajdr @kevin940726 @Mamaduka @MarieComet @mcliwanow @mcsf @mikachan @mirka @ndiego @noisysocks @ntsekouras @ockham @oguzkocer @opr @pavanpatil1 @pooja-muchandikar @ralucaStan @ramonjd @renatho @rflw @ryanwelcher @schutzsmith @scruffian @SiobhyB @stokesman @t-hamano @talldan @torounit @tyxla @vdwijngaert @walbo @welenofsky @youknowriad
 
-
-
-
 = 13.6.0 =
 
-
 ## Changelog
 
 ### Enhancements
 
-#### UI 
-- Increase fade intensity during spotlight mode. ([40454](https://github.com/WordPress/gutenberg/pull/40454))
-- Improvements to "inherit default layout" toggle. ([41893](https://github.com/WordPress/gutenberg/pull/41893))
-- Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
-- Abbreviate post schedule date when possible. ([41738](https://github.com/WordPress/gutenberg/pull/41738))
+#### UI
+
+-   Increase fade intensity during spotlight mode. ([40454](https://github.com/WordPress/gutenberg/pull/40454))
+-   Improvements to "inherit default layout" toggle. ([41893](https://github.com/WordPress/gutenberg/pull/41893))
+-   Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
+-   Abbreviate post schedule date when possible. ([41738](https://github.com/WordPress/gutenberg/pull/41738))
 
 #### Global Styles
-- Add support for caption elements. ([41140](https://github.com/WordPress/gutenberg/pull/41140))
-- Add UI for button elements ([41659](https://github.com/WordPress/gutenberg/pull/41659)) and fix the button element selectors. ([41822](https://github.com/WordPress/gutenberg/pull/41822))
-- Support pseudo selectors on `elements` in theme json. ([41786](https://github.com/WordPress/gutenberg/pull/41786))
-- Add the ability to unset duotone in themes with default duotone set. ([39564](https://github.com/WordPress/gutenberg/pull/39564))
-- Allow references to values in other locations in the tree. ([41696](https://github.com/WordPress/gutenberg/pull/41696))
-- Lower specificity of elements block css. ([41931](https://github.com/WordPress/gutenberg/pull/41931))
-- Add border to frontend style engine. ([41803](https://github.com/WordPress/gutenberg/pull/41803))
-- Add schema support for styles.filter.duotone. ([41920](https://github.com/WordPress/gutenberg/pull/41920))
-- Add an API make it easier to get class names. ([41753](https://github.com/WordPress/gutenberg/pull/41753))
-- Update Theme JSON `$schema` to account for pseudo selector support. ([41936](https://github.com/WordPress/gutenberg/pull/41936))
+
+-   Add support for caption elements. ([41140](https://github.com/WordPress/gutenberg/pull/41140))
+-   Add UI for button elements ([41659](https://github.com/WordPress/gutenberg/pull/41659)) and fix the button element selectors. ([41822](https://github.com/WordPress/gutenberg/pull/41822))
+-   Support pseudo selectors on `elements` in theme json. ([41786](https://github.com/WordPress/gutenberg/pull/41786))
+-   Add the ability to unset duotone in themes with default duotone set. ([39564](https://github.com/WordPress/gutenberg/pull/39564))
+-   Allow references to values in other locations in the tree. ([41696](https://github.com/WordPress/gutenberg/pull/41696))
+-   Lower specificity of elements block css. ([41931](https://github.com/WordPress/gutenberg/pull/41931))
+-   Add border to frontend style engine. ([41803](https://github.com/WordPress/gutenberg/pull/41803))
+-   Add schema support for styles.filter.duotone. ([41920](https://github.com/WordPress/gutenberg/pull/41920))
+-   Add an API make it easier to get class names. ([41753](https://github.com/WordPress/gutenberg/pull/41753))
+-   Update Theme JSON `$schema` to account for pseudo selector support. ([41936](https://github.com/WordPress/gutenberg/pull/41936))
 
 #### Patterns
-- Add the ability to use creation patterns for other post types besides page. ([41791](https://github.com/WordPress/gutenberg/pull/41791))
 
-#### Block Library
+-   Add the ability to use creation patterns for other post types besides page. ([41791](https://github.com/WordPress/gutenberg/pull/41791))
 
-- Columns: Change title of one third/two thirds column variation to 66/33. ([41734](https://github.com/WordPress/gutenberg/pull/41734))
-- Navigation:
-- Adjust mobile close button position when admin bar is visible. ([41664](https://github.com/WordPress/gutenberg/pull/41664))
-- Make additional top margin specific to open modal. ([41949](https://github.com/WordPress/gutenberg/pull/41949))
-- Move block CSS to JSON. ([41898](https://github.com/WordPress/gutenberg/pull/41898))
-- Post Comments Form: Add button that enables commenting to warning. ([41603](https://github.com/WordPress/gutenberg/pull/41603))
-- Cover:
-- Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
-- Implement axial top bottom margin. ([41963](https://github.com/WordPress/gutenberg/pull/41963))
-- Image: Set Default state to media library for library button in image block. ([41678](https://github.com/WordPress/gutenberg/pull/41678))
-- Classic: Remove CSS properties with vendor prefixes. ([41995](https://github.com/WordPress/gutenberg/pull/41995))
-- Embed: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
+#### Block Library
 
+-   Columns: Change title of one third/two thirds column variation to 66/33. ([41734](https://github.com/WordPress/gutenberg/pull/41734))
+-   Navigation:
+-   Adjust mobile close button position when admin bar is visible. ([41664](https://github.com/WordPress/gutenberg/pull/41664))
+-   Make additional top margin specific to open modal. ([41949](https://github.com/WordPress/gutenberg/pull/41949))
+-   Move block CSS to JSON. ([41898](https://github.com/WordPress/gutenberg/pull/41898))
+-   Post Comments Form: Add button that enables commenting to warning. ([41603](https://github.com/WordPress/gutenberg/pull/41603))
+-   Cover:
+-   Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
+-   Implement axial top bottom margin. ([41963](https://github.com/WordPress/gutenberg/pull/41963))
+-   Image: Set Default state to media library for library button in image block. ([41678](https://github.com/WordPress/gutenberg/pull/41678))
+-   Classic: Remove CSS properties with vendor prefixes. ([41995](https://github.com/WordPress/gutenberg/pull/41995))
+-   Embed: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
 
 #### Site and Template Editor
-- Turn Template settings panel into a Template popover. ([41925](https://github.com/WordPress/gutenberg/pull/41925))
-- Expand the template types that can be added - single custom post type and specific posts templates. ([41189](https://github.com/WordPress/gutenberg/pull/41189))
-- Add clear customizations to template card. ([41743](https://github.com/WordPress/gutenberg/pull/41743))
+
+-   Turn Template settings panel into a Template popover. ([41925](https://github.com/WordPress/gutenberg/pull/41925))
+-   Expand the template types that can be added - single custom post type and specific posts templates. ([41189](https://github.com/WordPress/gutenberg/pull/41189))
+-   Add clear customizations to template card. ([41743](https://github.com/WordPress/gutenberg/pull/41743))
 
 #### Accessibility
-- Make the site editor header toolbar use the ARIA toolbar pattern. ([41902](https://github.com/WordPress/gutenberg/pull/41902))
-- Allow defining an aria-label in group blocks. ([41744](https://github.com/WordPress/gutenberg/pull/41744))
-- Add keyboard shortcut for Strikethrough. ([41910](https://github.com/WordPress/gutenberg/pull/41910)) and inline code. ([41816](https://github.com/WordPress/gutenberg/pull/41816)) in the format library.
-- Navigation submenus: Allow Escape key to close the submenu and focus trigger. ([41774](https://github.com/WordPress/gutenberg/pull/41774))
-- Show the link completer shortcut on the help modals. ([41872](https://github.com/WordPress/gutenberg/pull/41872))
-
-
-### Bug Fixes
-
-- Fix incorrect '_n' usage in the block Editor. ([41886](https://github.com/WordPress/gutenberg/pull/41886))
-- BlockPreview: Fix 'Infinity' is invalid 'minHeight' value warning. ([41766](https://github.com/WordPress/gutenberg/pull/41766))
-- Compare against default category in the settings instead of hardcoded slug. ([41956](https://github.com/WordPress/gutenberg/pull/41956))
-- Fix PHP 8.1 deprecation in the gallery block. ([41193](https://github.com/WordPress/gutenberg/pull/41193))
-- Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
-- [Block Editor]: Fix content loss from `replaceInnerBlocks` with controlled blocks. ([41948](https://github.com/WordPress/gutenberg/pull/41948))
-- Fix action button spacing on the widget editor. ([41915](https://github.com/WordPress/gutenberg/pull/41915))
-- Render duotone presets in pattern preview. ([41249](https://github.com/WordPress/gutenberg/pull/41249))
- 
-#### Block Library
-- List  v2:
-- Fix impossible to outdent multiple list items. ([41713](https://github.com/WordPress/gutenberg/pull/41713))
-- Set selection to created block after split with Enter. ([41899](https://github.com/WordPress/gutenberg/pull/41899))
-- Transforms don't take into account nested blocks. ([41741](https://github.com/WordPress/gutenberg/pull/41741))
-- Comments: Fix issue with custom font sizes and links color. ([41627](https://github.com/WordPress/gutenberg/pull/41627))
-- Navigation: Fix permissions warning. ([41862](https://github.com/WordPress/gutenberg/pull/41862))
-- Post Template: Ensure layout classnames are not attached to inner li elements. ([41827](https://github.com/WordPress/gutenberg/pull/41827))
-- Image block: Preserve alt text from media library. ([41839](https://github.com/WordPress/gutenberg/pull/41839))
-- Search block: Remove double spaces. ([41746](https://github.com/WordPress/gutenberg/pull/41746))
-- Fix issue of background min height. ([41693](https://github.com/WordPress/gutenberg/pull/41693))
-- Only use the post-title if the featured image is a link. ([41775](https://github.com/WordPress/gutenberg/pull/41775))
-- Always load block CSS from __experimentalStyle on global styles output. ([42005](https://github.com/WordPress/gutenberg/pull/42005))
-
-#### Components
-- Border Controls/Color Palette: Ensure popovers remain within small viewports. ([41930](https://github.com/WordPress/gutenberg/pull/41930))
-- ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. ([41646](https://github.com/WordPress/gutenberg/pull/41646))
-- DatePicker:  Respect site's 'Week Starts On' setting. ([41648](https://github.com/WordPress/gutenberg/pull/41648))
-- BlockSettingsMenuControls: Fix 'showLockButton' check. ([41788](https://github.com/WordPress/gutenberg/pull/41788))
-- Color Controls: Allow popovers to remain within smaller viewports. ([41929](https://github.com/WordPress/gutenberg/pull/41929))
 
-#### REST API
-- Fix retrieving autosaves when using a custom rest_namespace. ([41542](https://github.com/WordPress/gutenberg/pull/41542))
-- Remove hardcoded references to rest namespace. ([41950](https://github.com/WordPress/gutenberg/pull/41950)), ([41951](https://github.com/WordPress/gutenberg/pull/41951)).
+-   Make the site editor header toolbar use the ARIA toolbar pattern. ([41902](https://github.com/WordPress/gutenberg/pull/41902))
+-   Allow defining an aria-label in group blocks. ([41744](https://github.com/WordPress/gutenberg/pull/41744))
+-   Add keyboard shortcut for Strikethrough. ([41910](https://github.com/WordPress/gutenberg/pull/41910)) and inline code. ([41816](https://github.com/WordPress/gutenberg/pull/41816)) in the format library.
+-   Navigation submenus: Allow Escape key to close the submenu and focus trigger. ([41774](https://github.com/WordPress/gutenberg/pull/41774))
+-   Show the link completer shortcut on the help modals. ([41872](https://github.com/WordPress/gutenberg/pull/41872))
+
+### Bug Fixes
 
+-   Fix incorrect '\_n' usage in the block Editor. ([41886](https://github.com/WordPress/gutenberg/pull/41886))
+-   BlockPreview: Fix 'Infinity' is invalid 'minHeight' value warning. ([41766](https://github.com/WordPress/gutenberg/pull/41766))
+-   Compare against default category in the settings instead of hardcoded slug. ([41956](https://github.com/WordPress/gutenberg/pull/41956))
+-   Fix PHP 8.1 deprecation in the gallery block. ([41193](https://github.com/WordPress/gutenberg/pull/41193))
+-   Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
+-   [Block Editor]: Fix content loss from `replaceInnerBlocks` with controlled blocks. ([41948](https://github.com/WordPress/gutenberg/pull/41948))
+-   Fix action button spacing on the widget editor. ([41915](https://github.com/WordPress/gutenberg/pull/41915))
+-   Render duotone presets in pattern preview. ([41249](https://github.com/WordPress/gutenberg/pull/41249))
 
-### Performance
+#### Block Library
 
-- Continued the work refactor away from lodash usages in order to reduce the build size.
-- Remove: Unrequired regex search on duotone supports. ([42020](https://github.com/WordPress/gutenberg/pull/42020))
-- Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
-- Avoid calculating html block styles in useSelect. ([42026](https://github.com/WordPress/gutenberg/pull/42026))
-- Fix performance regressionon pasting due to removeWindowsFragments. ([41907](https://github.com/WordPress/gutenberg/pull/41907))
+-   List v2:
+-   Fix impossible to outdent multiple list items. ([41713](https://github.com/WordPress/gutenberg/pull/41713))
+-   Set selection to created block after split with Enter. ([41899](https://github.com/WordPress/gutenberg/pull/41899))
+-   Transforms don't take into account nested blocks. ([41741](https://github.com/WordPress/gutenberg/pull/41741))
+-   Comments: Fix issue with custom font sizes and links color. ([41627](https://github.com/WordPress/gutenberg/pull/41627))
+-   Navigation: Fix permissions warning. ([41862](https://github.com/WordPress/gutenberg/pull/41862))
+-   Post Template: Ensure layout classnames are not attached to inner li elements. ([41827](https://github.com/WordPress/gutenberg/pull/41827))
+-   Image block: Preserve alt text from media library. ([41839](https://github.com/WordPress/gutenberg/pull/41839))
+-   Search block: Remove double spaces. ([41746](https://github.com/WordPress/gutenberg/pull/41746))
+-   Fix issue of background min height. ([41693](https://github.com/WordPress/gutenberg/pull/41693))
+-   Only use the post-title if the featured image is a link. ([41775](https://github.com/WordPress/gutenberg/pull/41775))
+-   Always load block CSS from \_\_experimentalStyle on global styles output. ([42005](https://github.com/WordPress/gutenberg/pull/42005))
 
+#### Components
 
-### Documentation
+-   Border Controls/Color Palette: Ensure popovers remain within small viewports. ([41930](https://github.com/WordPress/gutenberg/pull/41930))
+-   ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. ([41646](https://github.com/WordPress/gutenberg/pull/41646))
+-   DatePicker: Respect site's 'Week Starts On' setting. ([41648](https://github.com/WordPress/gutenberg/pull/41648))
+-   BlockSettingsMenuControls: Fix 'showLockButton' check. ([41788](https://github.com/WordPress/gutenberg/pull/41788))
+-   Color Controls: Allow popovers to remain within smaller viewports. ([41929](https://github.com/WordPress/gutenberg/pull/41929))
 
-- Add an explanation how to setup environment to run the performance test. ([41883](https://github.com/WordPress/gutenberg/pull/41883))
-- Add local dev notes to aid when doing work on schemas. ([41968](https://github.com/WordPress/gutenberg/pull/41968))
-- Fix Minor documentation inconsistencies on block attributes. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
-- Add an example for the end-to-end tests snapshot update. ([41999](https://github.com/WordPress/gutenberg/pull/41999))
-- Fix documentation of Flex component to no longer be experimental. ([41926](https://github.com/WordPress/gutenberg/pull/41926))
-- Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
-- Fix link to Flex component in FlexItem Readme. ([41928](https://github.com/WordPress/gutenberg/pull/41928))
-- Fix some small inconsistencies in the block editor documentation. ([41861](https://github.com/WordPress/gutenberg/pull/41861))
-- Update terminology and documentation of Style engine. ([41964](https://github.com/WordPress/gutenberg/pull/41964))
-- Update skip serialization documentation to reflect ability to target specific properties. ([41277](https://github.com/WordPress/gutenberg/pull/41277))
-- Add supports to basic sample code documentation. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
-- Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
-- Document `fontFace` and it’s values in `theme.json` schema for the Webfonts API. ([41844](https://github.com/WordPress/gutenberg/pull/41844))
+#### REST API
 
+-   Fix retrieving autosaves when using a custom rest_namespace. ([41542](https://github.com/WordPress/gutenberg/pull/41542))
+-   Remove hardcoded references to rest namespace. ([41950](https://github.com/WordPress/gutenberg/pull/41950)), ([41951](https://github.com/WordPress/gutenberg/pull/41951)).
 
-### Code Quality
+### Performance
 
-- Fix: Double condition on or on block editor reducer. ([42019](https://github.com/WordPress/gutenberg/pull/42019))
-- Remove WP 6.0 WP_REST_Block_Patterns_Controller class. ([41914](https://github.com/WordPress/gutenberg/pull/41914))
-- Remove leftovers of legacy query-loop block. ([41891](https://github.com/WordPress/gutenberg/pull/41891))
-- Remove `startBlankComponent` from __experimentalBlockPatternSetup. ([41721](https://github.com/WordPress/gutenberg/pull/41721))
-- Move setting registration into WP 6.0 compat. ([41985](https://github.com/WordPress/gutenberg/pull/41985))
-- Add __experimentalUseResourcePermissions to make code simpler. ([38785](https://github.com/WordPress/gutenberg/pull/38785))
-))
-- Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used in the Avatar Block. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
-- Refactor `NavigationItem` component to pass `exhaustive-deps`. ([41639](https://github.com/WordPress/gutenberg/pull/41639))
-- Move generation of layout util classes to existing method to avoid adding global public method WP. ([41885](https://github.com/WordPress/gutenberg/pull/41885))
+-   Continued the work refactor away from lodash usages in order to reduce the build size.
+-   Remove: Unrequired regex search on duotone supports. ([42020](https://github.com/WordPress/gutenberg/pull/42020))
+-   Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
+-   Avoid calculating html block styles in useSelect. ([42026](https://github.com/WordPress/gutenberg/pull/42026))
+-   Fix performance regressionon pasting due to removeWindowsFragments. ([41907](https://github.com/WordPress/gutenberg/pull/41907))
 
+### Documentation
+
+-   Add an explanation how to setup environment to run the performance test. ([41883](https://github.com/WordPress/gutenberg/pull/41883))
+-   Add local dev notes to aid when doing work on schemas. ([41968](https://github.com/WordPress/gutenberg/pull/41968))
+-   Fix Minor documentation inconsistencies on block attributes. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
+-   Add an example for the end-to-end tests snapshot update. ([41999](https://github.com/WordPress/gutenberg/pull/41999))
+-   Fix documentation of Flex component to no longer be experimental. ([41926](https://github.com/WordPress/gutenberg/pull/41926))
+-   Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
+-   Fix link to Flex component in FlexItem Readme. ([41928](https://github.com/WordPress/gutenberg/pull/41928))
+-   Fix some small inconsistencies in the block editor documentation. ([41861](https://github.com/WordPress/gutenberg/pull/41861))
+-   Update terminology and documentation of Style engine. ([41964](https://github.com/WordPress/gutenberg/pull/41964))
+-   Update skip serialization documentation to reflect ability to target specific properties. ([41277](https://github.com/WordPress/gutenberg/pull/41277))
+-   Add supports to basic sample code documentation. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
+-   Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
+-   Document `fontFace` and it’s values in `theme.json` schema for the Webfonts API. ([41844](https://github.com/WordPress/gutenberg/pull/41844))
 
+### Code Quality
 
+-   Fix: Double condition on or on block editor reducer. ([42019](https://github.com/WordPress/gutenberg/pull/42019))
+-   Remove WP 6.0 WP_REST_Block_Patterns_Controller class. ([41914](https://github.com/WordPress/gutenberg/pull/41914))
+-   Remove leftovers of legacy query-loop block. ([41891](https://github.com/WordPress/gutenberg/pull/41891))
+-   Remove `startBlankComponent` from \_\_experimentalBlockPatternSetup. ([41721](https://github.com/WordPress/gutenberg/pull/41721))
+-   Move setting registration into WP 6.0 compat. ([41985](https://github.com/WordPress/gutenberg/pull/41985))
+-   Add \_\_experimentalUseResourcePermissions to make code simpler. ([38785](https://github.com/WordPress/gutenberg/pull/38785))
+    ))
+-   Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used in the Avatar Block. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
+-   Refactor `NavigationItem` component to pass `exhaustive-deps`. ([41639](https://github.com/WordPress/gutenberg/pull/41639))
+-   Move generation of layout util classes to existing method to avoid adding global public method WP. ([41885](https://github.com/WordPress/gutenberg/pull/41885))
 
 ### Tooling
 
 #### Static analysis
-- ESLint: Enable `ignoreRestSiblings` option for `no-unused-vars` rule. ([41897](https://github.com/WordPress/gutenberg/pull/41897))
-- Fix a prettier error. ([41916](https://github.com/WordPress/gutenberg/pull/41916))
-- SerializeBlock fix ESLint warning. ([41763](https://github.com/WordPress/gutenberg/pull/41763))
+
+-   ESLint: Enable `ignoreRestSiblings` option for `no-unused-vars` rule. ([41897](https://github.com/WordPress/gutenberg/pull/41897))
+-   Fix a prettier error. ([41916](https://github.com/WordPress/gutenberg/pull/41916))
+-   SerializeBlock fix ESLint warning. ([41763](https://github.com/WordPress/gutenberg/pull/41763))
 
 #### Testing
-- Test migrations toPlaywright:
-- spacer ([41590](https://github.com/WordPress/gutenberg/pull/41590))
-- table block ([41945](https://github.com/WordPress/gutenberg/pull/41945))
-- preview end-to-end tests ([41380](https://github.com/WordPress/gutenberg/pull/41380))
-- style variations ([41427](https://github.com/WordPress/gutenberg/pull/41427))
-- Button Block ([41494](https://github.com/WordPress/gutenberg/pull/41494))
-- RTL test cases  ([41495](https://github.com/WordPress/gutenberg/pull/41495))
-- `InputControl`: Add tests and update to use @testing-library/user-event. ([41421](https://github.com/WordPress/gutenberg/pull/41421))
-- Skip flaky navingation end-to-end test. ([41829](https://github.com/WordPress/gutenberg/pull/41829))
-- Fix the image rotating flaky test. ([41808](https://github.com/WordPress/gutenberg/pull/41808))
+
+-   Test migrations toPlaywright:
+-   spacer ([41590](https://github.com/WordPress/gutenberg/pull/41590))
+-   table block ([41945](https://github.com/WordPress/gutenberg/pull/41945))
+-   preview end-to-end tests ([41380](https://github.com/WordPress/gutenberg/pull/41380))
+-   style variations ([41427](https://github.com/WordPress/gutenberg/pull/41427))
+-   Button Block ([41494](https://github.com/WordPress/gutenberg/pull/41494))
+-   RTL test cases ([41495](https://github.com/WordPress/gutenberg/pull/41495))
+-   `InputControl`: Add tests and update to use @testing-library/user-event. ([41421](https://github.com/WordPress/gutenberg/pull/41421))
+-   Skip flaky navingation end-to-end test. ([41829](https://github.com/WordPress/gutenberg/pull/41829))
+-   Fix the image rotating flaky test. ([41808](https://github.com/WordPress/gutenberg/pull/41808))
 
 #### Storybook
-- Add 40px size variant to NumberControl. ([41997](https://github.com/WordPress/gutenberg/pull/41997))
-- Convert knobs to controls in NumberControl. ([41849](https://github.com/WordPress/gutenberg/pull/41849))
-- Convert knobs to controls in spacer. ([41851](https://github.com/WordPress/gutenberg/pull/41851))
+
+-   Add 40px size variant to NumberControl. ([41997](https://github.com/WordPress/gutenberg/pull/41997))
+-   Convert knobs to controls in NumberControl. ([41849](https://github.com/WordPress/gutenberg/pull/41849))
+-   Convert knobs to controls in spacer. ([41851](https://github.com/WordPress/gutenberg/pull/41851))
 
 #### IDE's integrations
-- Autocompletion support for useSelect (via jsDoc annotations). ([41596](https://github.com/WordPress/gutenberg/pull/41596))
+
+-   Autocompletion support for useSelect (via jsDoc annotations). ([41596](https://github.com/WordPress/gutenberg/pull/41596))
 
 #### Migrations to typescript
-- ColorIndicator ([41587](https://github.com/WordPress/gutenberg/pull/41587)),
-- FormToggle  ([41729](https://github.com/WordPress/gutenberg/pull/41729))
-- Spinner([41540](https://github.com/WordPress/gutenberg/pull/41540))
-- Truncate ([41697](https://github.com/WordPress/gutenberg/pull/41697))
-- VStack ([41850](https://github.com/WordPress/gutenberg/pull/41850))
-- BorderControl ([41843](https://github.com/WordPress/gutenberg/pull/41843))
-- Heading ([41921](https://github.com/WordPress/gutenberg/pull/41921))
 
+-   ColorIndicator ([41587](https://github.com/WordPress/gutenberg/pull/41587)),
+-   FormToggle ([41729](https://github.com/WordPress/gutenberg/pull/41729))
+-   Spinner([41540](https://github.com/WordPress/gutenberg/pull/41540))
+-   Truncate ([41697](https://github.com/WordPress/gutenberg/pull/41697))
+-   VStack ([41850](https://github.com/WordPress/gutenberg/pull/41850))
+-   BorderControl ([41843](https://github.com/WordPress/gutenberg/pull/41843))
+-   Heading ([41921](https://github.com/WordPress/gutenberg/pull/41921))
 
 ## First-time contributors
 
-The following PRs were merged by first time contributors:
-
-- @adambasa-dp: #30930 -  Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
-- @arturgrabo: Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
-- @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
-- @inc2734: Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
-- @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
-- @mcliwanow: Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
-- @navigatrum: Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
-- @pavanpatil1: Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
-- @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
-- @phcp: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
-- @vasartam: Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
-- @xylocone: Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
-- @zaerl: Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
+The following PRs were merged by first-time contributors:
 
+-   @adambasa-dp: #30930 - Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
+-   @arturgrabo: Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
+-   @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
+-   @inc2734: Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
+-   @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
+-   @mcliwanow: Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
+-   @navigatrum: Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
+-   @pavanpatil1: Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
+-   @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
+-   @phcp: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
+-   @vasartam: Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
+-   @xylocone: Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
+-   @zaerl: Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
 
 ## Contributors
 
@@ -3994,7 +28085,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adambasa-dp @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @arturgrabo @chad1008 @ciampo @dcalhoun @derekblank @fabiankaegy @fluiddot @georgeh @getdave @glendaviesnz @grappler @hz-tyfoon @inc2734 @jorgefilipecosta @kbrown9 @kevin940726 @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @miminari @mirka @mtias @navigatrum @noisysocks @ntsekouras @ockham @opr @pavanpatil1 @petitphp @phcp @pooja-muchandikar @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @sunil25393 @t-hamano @talldan @tellthemachines @tomjn @tyxla @vasartam @walbo @xylocone @zaerl
 
-
 = 13.5.2 =
 
 ## Changelog
@@ -4002,8 +28092,8 @@ The following contributors merged PRs in this release:
 ### Bug Fixes
 
 ### Components
-Revert: Refactor Autocomplete component to pass exhaustive-deps. (https://github.com/WordPress/gutenberg/pull/41820)
 
+Revert: Refactor Autocomplete component to pass exhaustive-deps. (https://github.com/WordPress/gutenberg/pull/41820)
 
 = 13.6.0-rc.1 =
 
@@ -4011,244 +28101,269 @@ Revert: Refactor Autocomplete component to pass exhaustive-deps. (https://github
 
 ### Enhancements
 
-- ESLint: Enable `ignoreRestSiblings` option for `no-unused-vars` rule. ([41897](https://github.com/WordPress/gutenberg/pull/41897))
-- Format Library: Add keyboard shortcut for Strikethrough. ([41910](https://github.com/WordPress/gutenberg/pull/41910))
-- Format Library: Add keyboard shortcut for inline code. ([41816](https://github.com/WordPress/gutenberg/pull/41816))
+-   ESLint: Enable `ignoreRestSiblings` option for `no-unused-vars` rule. ([41897](https://github.com/WordPress/gutenberg/pull/41897))
+-   Format Library: Add keyboard shortcut for Strikethrough. ([41910](https://github.com/WordPress/gutenberg/pull/41910))
+-   Format Library: Add keyboard shortcut for inline code. ([41816](https://github.com/WordPress/gutenberg/pull/41816))
 
 #### Components
-- ColorIndicator: Convert component to TypeScript. ([41587](https://github.com/WordPress/gutenberg/pull/41587))
-- FormToggle: Covert component to TypeScript. ([41729](https://github.com/WordPress/gutenberg/pull/41729))
-- Spinner: Convert component to TypeScript. ([41540](https://github.com/WordPress/gutenberg/pull/41540))
-- Truncate: Convert component to TypeScript. ([41697](https://github.com/WordPress/gutenberg/pull/41697))
-- VStack: Convert component to TypeScript. ([41850](https://github.com/WordPress/gutenberg/pull/41850))
+
+-   ColorIndicator: Convert component to TypeScript. ([41587](https://github.com/WordPress/gutenberg/pull/41587))
+-   FormToggle: Covert component to TypeScript. ([41729](https://github.com/WordPress/gutenberg/pull/41729))
+-   Spinner: Convert component to TypeScript. ([41540](https://github.com/WordPress/gutenberg/pull/41540))
+-   Truncate: Convert component to TypeScript. ([41697](https://github.com/WordPress/gutenberg/pull/41697))
+-   VStack: Convert component to TypeScript. ([41850](https://github.com/WordPress/gutenberg/pull/41850))
 
 #### Global Styles
-- Add support for caption elements. ([41140](https://github.com/WordPress/gutenberg/pull/41140))
-- Elements: Add UI for button elements. ([41659](https://github.com/WordPress/gutenberg/pull/41659))
-- Support pseudo selectors on `elements` in theme json. ([41786](https://github.com/WordPress/gutenberg/pull/41786))
+
+-   Add support for caption elements. ([41140](https://github.com/WordPress/gutenberg/pull/41140))
+-   Elements: Add UI for button elements. ([41659](https://github.com/WordPress/gutenberg/pull/41659))
+-   Support pseudo selectors on `elements` in theme json. ([41786](https://github.com/WordPress/gutenberg/pull/41786))
 
 #### Widgets Editor
-- Editors: Add a link completer shortcut to the help modals. ([41872](https://github.com/WordPress/gutenberg/pull/41872))
-- Improve action button spacing. ([41915](https://github.com/WordPress/gutenberg/pull/41915))
+
+-   Editors: Add a link completer shortcut to the help modals. ([41872](https://github.com/WordPress/gutenberg/pull/41872))
+-   Improve action button spacing. ([41915](https://github.com/WordPress/gutenberg/pull/41915))
 
 #### Block Library
-- Elements: Add an API make it easier to get class names. ([41753](https://github.com/WordPress/gutenberg/pull/41753))
-- Elements: Button - Fix element selectors. ([41822](https://github.com/WordPress/gutenberg/pull/41822))
+
+-   Elements: Add an API make it easier to get class names. ([41753](https://github.com/WordPress/gutenberg/pull/41753))
+-   Elements: Button - Fix element selectors. ([41822](https://github.com/WordPress/gutenberg/pull/41822))
 
 #### Design Tools
-- Adding axial top bottom margin to the cover block. ([41963](https://github.com/WordPress/gutenberg/pull/41963))
+
+-   Adding axial top bottom margin to the cover block. ([41963](https://github.com/WordPress/gutenberg/pull/41963))
 
 #### Template Editor
-- Turn Template settings panel into a Template popover. ([41925](https://github.com/WordPress/gutenberg/pull/41925))
+
+-   Turn Template settings panel into a Template popover. ([41925](https://github.com/WordPress/gutenberg/pull/41925))
 
 #### Accessibility
-- Make the site editor header toolbar use the ARIA toolbar pattern. ([41902](https://github.com/WordPress/gutenberg/pull/41902))
+
+-   Make the site editor header toolbar use the ARIA toolbar pattern. ([41902](https://github.com/WordPress/gutenberg/pull/41902))
 
 #### Document Settings
-- Abbreviate post schedule date when possible. ([41738](https://github.com/WordPress/gutenberg/pull/41738))
+
+-   Abbreviate post schedule date when possible. ([41738](https://github.com/WordPress/gutenberg/pull/41738))
 
 #### Site Editor
-- [Site Editor]: Expand the template types that can be added - single custom post type and specific posts templates. ([41189](https://github.com/WordPress/gutenberg/pull/41189))
 
+-   [Site Editor]: Expand the template types that can be added - single custom post type and specific posts templates. ([41189](https://github.com/WordPress/gutenberg/pull/41189))
 
 ### New APIs
 
-- Add __experimentalUseResourcePermissions. ([38785](https://github.com/WordPress/gutenberg/pull/38785))
-
+-   Add \_\_experimentalUseResourcePermissions. ([38785](https://github.com/WordPress/gutenberg/pull/38785))
 
 ### Bug Fixes
 
-- Block Editor: Fix incorrect '_n' usage. ([41886](https://github.com/WordPress/gutenberg/pull/41886))
-- BlockPreview: Fix 'Infinity' is invalid 'minHeight' value warning. ([41766](https://github.com/WordPress/gutenberg/pull/41766))
-- Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
-- Compare against default category in the settings instead of hardcoded slug. ([41956](https://github.com/WordPress/gutenberg/pull/41956))
-- Fix PHP 8.1 deprecation in the gallery block. ([41193](https://github.com/WordPress/gutenberg/pull/41193))
-- Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
-- Skip flaky nav end-to-end test. ([41829](https://github.com/WordPress/gutenberg/pull/41829))
-- Try to fix the image rotating flaky test. ([41808](https://github.com/WordPress/gutenberg/pull/41808))
-- [Block Editor]: Fix content loss from `replaceInnerBlocks` with controlled blocks. ([41948](https://github.com/WordPress/gutenberg/pull/41948))
+-   Block Editor: Fix incorrect '\_n' usage. ([41886](https://github.com/WordPress/gutenberg/pull/41886))
+-   BlockPreview: Fix 'Infinity' is invalid 'minHeight' value warning. ([41766](https://github.com/WordPress/gutenberg/pull/41766))
+-   Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
+-   Compare against default category in the settings instead of hardcoded slug. ([41956](https://github.com/WordPress/gutenberg/pull/41956))
+-   Fix PHP 8.1 deprecation in the gallery block. ([41193](https://github.com/WordPress/gutenberg/pull/41193))
+-   Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
+-   Skip flaky nav end-to-end test. ([41829](https://github.com/WordPress/gutenberg/pull/41829))
+-   Try to fix the image rotating flaky test. ([41808](https://github.com/WordPress/gutenberg/pull/41808))
+-   [Block Editor]: Fix content loss from `replaceInnerBlocks` with controlled blocks. ([41948](https://github.com/WordPress/gutenberg/pull/41948))
 
 #### Block Library
-- Comments Block: Fixed issue with custom font sizes and links color. ([41627](https://github.com/WordPress/gutenberg/pull/41627))
-- Fix permissions warning showing when inserting a navigation block. ([41862](https://github.com/WordPress/gutenberg/pull/41862))
-- Fixed issue of background min height. ([41693](https://github.com/WordPress/gutenberg/pull/41693))
-- List block v2: Transform don't take into account nested blocks. ([41741](https://github.com/WordPress/gutenberg/pull/41741))
-- Only use the post-title if the featured image is a link. ([41775](https://github.com/WordPress/gutenberg/pull/41775))
-- Post Template: Ensure layout classnames are not attached to inner li elements. ([41827](https://github.com/WordPress/gutenberg/pull/41827))
-- [List v2]: Set selection to created block after split with Enter. ([41899](https://github.com/WordPress/gutenberg/pull/41899))
-- fix: Image block preserves alt text from media library. ([41839](https://github.com/WordPress/gutenberg/pull/41839))
+
+-   Comments Block: Fixed issue with custom font sizes and links color. ([41627](https://github.com/WordPress/gutenberg/pull/41627))
+-   Fix permissions warning showing when inserting a navigation block. ([41862](https://github.com/WordPress/gutenberg/pull/41862))
+-   Fixed issue of background min height. ([41693](https://github.com/WordPress/gutenberg/pull/41693))
+-   List block v2: Transform don't take into account nested blocks. ([41741](https://github.com/WordPress/gutenberg/pull/41741))
+-   Only use the post-title if the featured image is a link. ([41775](https://github.com/WordPress/gutenberg/pull/41775))
+-   Post Template: Ensure layout classnames are not attached to inner li elements. ([41827](https://github.com/WordPress/gutenberg/pull/41827))
+-   [List v2]: Set selection to created block after split with Enter. ([41899](https://github.com/WordPress/gutenberg/pull/41899))
+-   fix: Image block preserves alt text from media library. ([41839](https://github.com/WordPress/gutenberg/pull/41839))
 
 #### Components
-- Border Controls/Color Palette: Ensure popovers remain within small viewports. ([41930](https://github.com/WordPress/gutenberg/pull/41930))
-- ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. ([41646](https://github.com/WordPress/gutenberg/pull/41646))
-- Make date picker respect site's 'Week Starts On' setting. ([41648](https://github.com/WordPress/gutenberg/pull/41648))
-- Revert: Refactor `Autocomplete` component to pass `exhaustive-deps`. ([41820](https://github.com/WordPress/gutenberg/pull/41820))
+
+-   Border Controls/Color Palette: Ensure popovers remain within small viewports. ([41930](https://github.com/WordPress/gutenberg/pull/41930))
+-   ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. ([41646](https://github.com/WordPress/gutenberg/pull/41646))
+-   Make date picker respect site's 'Week Starts On' setting. ([41648](https://github.com/WordPress/gutenberg/pull/41648))
+-   Revert: Refactor `Autocomplete` component to pass `exhaustive-deps`. ([41820](https://github.com/WordPress/gutenberg/pull/41820))
 
 #### REST API
-- Fix retrieving autosaves when using a custom rest_namespace. ([41542](https://github.com/WordPress/gutenberg/pull/41542))
-- Remove hardcoded reference to rest namespace in trash post. ([41950](https://github.com/WordPress/gutenberg/pull/41950))
-- Remove hardcoded reference to wp/v2 in findOrCreateTerm. ([41951](https://github.com/WordPress/gutenberg/pull/41951))
+
+-   Fix retrieving autosaves when using a custom rest_namespace. ([41542](https://github.com/WordPress/gutenberg/pull/41542))
+-   Remove hardcoded reference to rest namespace in trash post. ([41950](https://github.com/WordPress/gutenberg/pull/41950))
+-   Remove hardcoded reference to wp/v2 in findOrCreateTerm. ([41951](https://github.com/WordPress/gutenberg/pull/41951))
 
 #### Global Styles
-- Always load block CSS from __experimentalStyle. ([42005](https://github.com/WordPress/gutenberg/pull/42005))
+
+-   Always load block CSS from \_\_experimentalStyle. ([42005](https://github.com/WordPress/gutenberg/pull/42005))
 
 #### Design Tools
-- Color Controls: Allow popovers to remain within smaller viewports. ([41929](https://github.com/WordPress/gutenberg/pull/41929))
+
+-   Color Controls: Allow popovers to remain within smaller viewports. ([41929](https://github.com/WordPress/gutenberg/pull/41929))
 
 #### Block Locking
-- BlockSettingsMenuControls: Fix 'showLockButton' check. ([41788](https://github.com/WordPress/gutenberg/pull/41788))
+
+-   BlockSettingsMenuControls: Fix 'showLockButton' check. ([41788](https://github.com/WordPress/gutenberg/pull/41788))
 
 #### Accessibility
-- Navigation submenus: Allow Escape key to close the submenu and focus trigger. ([41774](https://github.com/WordPress/gutenberg/pull/41774))
+
+-   Navigation submenus: Allow Escape key to close the submenu and focus trigger. ([41774](https://github.com/WordPress/gutenberg/pull/41774))
 
 #### Patterns
-- Rendering duotone presets in pattern preview. ([41249](https://github.com/WordPress/gutenberg/pull/41249))
 
+-   Rendering duotone presets in pattern preview. ([41249](https://github.com/WordPress/gutenberg/pull/41249))
 
 ### Performance
 
-- Continued the work refactor away from lodash usages in order to reduce the build size.
-- Remove: Unrequired regex search on duotone supports. ([42020](https://github.com/WordPress/gutenberg/pull/42020))
+-   Continued the work refactor away from lodash usages in order to reduce the build size.
+-   Remove: Unrequired regex search on duotone supports. ([42020](https://github.com/WordPress/gutenberg/pull/42020))
 
 #### Block Library
-- Avoid calculating html block styles in useSelect. ([42026](https://github.com/WordPress/gutenberg/pull/42026))
 
+-   Avoid calculating html block styles in useSelect. ([42026](https://github.com/WordPress/gutenberg/pull/42026))
 
 #### Block Editor
-- Pasting: Fix performance regression due to removeWindowsFragments. ([41907](https://github.com/WordPress/gutenberg/pull/41907))
-
 
+-   Pasting: Fix performance regression due to removeWindowsFragments. ([41907](https://github.com/WordPress/gutenberg/pull/41907))
 
 ### Experiments
 
 #### CSS & Styling
-- Style engine: Add border to frontend. ([41803](https://github.com/WordPress/gutenberg/pull/41803))
 
+-   Style engine: Add border to frontend. ([41803](https://github.com/WordPress/gutenberg/pull/41803))
 
 ### Documentation
 
-- Add an explanation how to setup environment to do run the performance test. ([41883](https://github.com/WordPress/gutenberg/pull/41883))
-- Add local dev notes to aid when doing work on schemas. ([41968](https://github.com/WordPress/gutenberg/pull/41968))
-- Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
-- Docs: Add an example for the end-to-end tests snapshot update. ([41999](https://github.com/WordPress/gutenberg/pull/41999))
-- Fix documentation of Flex component to no longer be experimental. ([41926](https://github.com/WordPress/gutenberg/pull/41926))
-- Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
-- Fix link to Flex component in FlexItem Readme. ([41928](https://github.com/WordPress/gutenberg/pull/41928))
-- Fix some small inconsistencies in the block editor documentation. ([41861](https://github.com/WordPress/gutenberg/pull/41861))
-- Style engine: Update terminology and documentation. ([41964](https://github.com/WordPress/gutenberg/pull/41964))
-- Update skip serialization documentation to reflect ability to target specific properties. ([41277](https://github.com/WordPress/gutenberg/pull/41277))
-
+-   Add an explanation how to setup environment to do run the performance test. ([41883](https://github.com/WordPress/gutenberg/pull/41883))
+-   Add local dev notes to aid when doing work on schemas. ([41968](https://github.com/WordPress/gutenberg/pull/41968))
+-   Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
+-   Docs: Add an example for the end-to-end tests snapshot update. ([41999](https://github.com/WordPress/gutenberg/pull/41999))
+-   Fix documentation of Flex component to no longer be experimental. ([41926](https://github.com/WordPress/gutenberg/pull/41926))
+-   Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
+-   Fix link to Flex component in FlexItem Readme. ([41928](https://github.com/WordPress/gutenberg/pull/41928))
+-   Fix some small inconsistencies in the block editor documentation. ([41861](https://github.com/WordPress/gutenberg/pull/41861))
+-   Style engine: Update terminology and documentation. ([41964](https://github.com/WordPress/gutenberg/pull/41964))
+-   Update skip serialization documentation to reflect ability to target specific properties. ([41277](https://github.com/WordPress/gutenberg/pull/41277))
 
 ### Code Quality
 
-- Fix: Double condition on or on block editor reducer. ([42019](https://github.com/WordPress/gutenberg/pull/42019))
-- Remove WP 6.0 WP_REST_Block_Patterns_Controller class. ([41914](https://github.com/WordPress/gutenberg/pull/41914))
-- Remove leftovers of legacy query-loop block. ([41891](https://github.com/WordPress/gutenberg/pull/41891))
-- [Block editor]: Remove `startBlankComponent` from __experimentalBlockPatternSetup. ([41721](https://github.com/WordPress/gutenberg/pull/41721))
+-   Fix: Double condition on or on block editor reducer. ([42019](https://github.com/WordPress/gutenberg/pull/42019))
+-   Remove WP 6.0 WP_REST_Block_Patterns_Controller class. ([41914](https://github.com/WordPress/gutenberg/pull/41914))
+-   Remove leftovers of legacy query-loop block. ([41891](https://github.com/WordPress/gutenberg/pull/41891))
+-   [Block editor]: Remove `startBlankComponent` from \_\_experimentalBlockPatternSetup. ([41721](https://github.com/WordPress/gutenberg/pull/41721))
 
 #### Components
-- Heading: Complete TypeScript migration of component. ([41921](https://github.com/WordPress/gutenberg/pull/41921))
-- Refactor `NavigationItem` to pass `exhaustive-deps`. ([41639](https://github.com/WordPress/gutenberg/pull/41639))
+
+-   Heading: Complete TypeScript migration of component. ([41921](https://github.com/WordPress/gutenberg/pull/41921))
+-   Refactor `NavigationItem` to pass `exhaustive-deps`. ([41639](https://github.com/WordPress/gutenberg/pull/41639))
 
 #### Plugin
-- Move setting registration into WP 6.0 compat. ([41985](https://github.com/WordPress/gutenberg/pull/41985))
+
+-   Move setting registration into WP 6.0 compat. ([41985](https://github.com/WordPress/gutenberg/pull/41985))
 
 #### CSS & Styling
-- Layout: Move generation of util classes to existing method to avoid adding global public method WP. ([41885](https://github.com/WordPress/gutenberg/pull/41885))
+
+-   Layout: Move generation of util classes to existing method to avoid adding global public method WP. ([41885](https://github.com/WordPress/gutenberg/pull/41885))
 
 #### Block Library
-- Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
 
+-   Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
 
 ### Tools
 
 #### Testing
-- Migrate spacer test to playwright. ([41590](https://github.com/WordPress/gutenberg/pull/41590))
-- Migrate table block tests to Playwright. ([41945](https://github.com/WordPress/gutenberg/pull/41945))
-- Refactor preview end-to-end tests to use Playwright. ([41380](https://github.com/WordPress/gutenberg/pull/41380))
-- `InputControl`: Add tests and update to use @testing-library/user-event. ([41421](https://github.com/WordPress/gutenberg/pull/41421))
-- end-to-end Tests: Migrate style variations tests to Playwright. ([41427](https://github.com/WordPress/gutenberg/pull/41427))
+
+-   Migrate spacer test to playwright. ([41590](https://github.com/WordPress/gutenberg/pull/41590))
+-   Migrate table block tests to Playwright. ([41945](https://github.com/WordPress/gutenberg/pull/41945))
+-   Refactor preview end-to-end tests to use Playwright. ([41380](https://github.com/WordPress/gutenberg/pull/41380))
+-   `InputControl`: Add tests and update to use @testing-library/user-event. ([41421](https://github.com/WordPress/gutenberg/pull/41421))
+-   end-to-end Tests: Migrate style variations tests to Playwright. ([41427](https://github.com/WordPress/gutenberg/pull/41427))
 
 ### Various
 
-- Add schema support for styles.filter.duotone. ([41920](https://github.com/WordPress/gutenberg/pull/41920))
-- Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
-- Improvements to "inherit default layout" toggle. ([41893](https://github.com/WordPress/gutenberg/pull/41893))
-- Increase fade intensity during spotlight mode. ([40454](https://github.com/WordPress/gutenberg/pull/40454))
-- List block v2: Fix impossible to outdent multiple list items. ([41713](https://github.com/WordPress/gutenberg/pull/41713))
-- Migrate Button Block tests to Playwright. ([41494](https://github.com/WordPress/gutenberg/pull/41494))
-- Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
-- Search block: Remove double spaces. ([41746](https://github.com/WordPress/gutenberg/pull/41746))
-- SerializeBlock fix ESLint warning. ([41763](https://github.com/WordPress/gutenberg/pull/41763))
-- Update Theme JSON `$schema` to account for pseudo selector support. ([41936](https://github.com/WordPress/gutenberg/pull/41936))
-- Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
-- Webfonts API: Document `fontFace` and it’s values in `theme.json` schema. ([41844](https://github.com/WordPress/gutenberg/pull/41844))
-- [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
-
-#### Block Library
-- #30930 -  Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
-- Columns block: Change title of one third/two thirds column variation to 66/33. ([41734](https://github.com/WordPress/gutenberg/pull/41734))
-- Fix Prettier error. ([41916](https://github.com/WordPress/gutenberg/pull/41916))
-- Navigation: Adjust mobile close button position when admin bar is visible. ([41664](https://github.com/WordPress/gutenberg/pull/41664))
-- Navigation: Make additional top margin specific to open modal. ([41949](https://github.com/WordPress/gutenberg/pull/41949))
-- Navigation: Move block CSS to JSON. ([41898](https://github.com/WordPress/gutenberg/pull/41898))
-- Post Comments Form: Add button that enables commenting to warning. ([41603](https://github.com/WordPress/gutenberg/pull/41603))
-- Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
-
-#### Components
-- BorderControl: Complete TypeScript migration. ([41843](https://github.com/WordPress/gutenberg/pull/41843))
-- NumberControl: Add 40px size variant to Storybook. ([41997](https://github.com/WordPress/gutenberg/pull/41997))
-- NumberControl: Convert knobs to controls in Storybook. ([41849](https://github.com/WordPress/gutenberg/pull/41849))
-- Set Default state to media library for library button in image block. ([41678](https://github.com/WordPress/gutenberg/pull/41678))
-- Spacer: Convert knobs to controls in Storybook. ([41851](https://github.com/WordPress/gutenberg/pull/41851))
-
-#### Global Styles
-- Allow references to values in other locations in the tree. ([41696](https://github.com/WordPress/gutenberg/pull/41696))
-- Elements: Lower specificity of elements block css. ([41931](https://github.com/WordPress/gutenberg/pull/41931))
+-   Add schema support for styles.filter.duotone. ([41920](https://github.com/WordPress/gutenberg/pull/41920))
+-   Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
+-   Improvements to "inherit default layout" toggle. ([41893](https://github.com/WordPress/gutenberg/pull/41893))
+-   Increase fade intensity during spotlight mode. ([40454](https://github.com/WordPress/gutenberg/pull/40454))
+-   List block v2: Fix impossible to outdent multiple list items. ([41713](https://github.com/WordPress/gutenberg/pull/41713))
+-   Migrate Button Block tests to Playwright. ([41494](https://github.com/WordPress/gutenberg/pull/41494))
+-   Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
+-   Search block: Remove double spaces. ([41746](https://github.com/WordPress/gutenberg/pull/41746))
+-   SerializeBlock fix ESLint warning. ([41763](https://github.com/WordPress/gutenberg/pull/41763))
+-   Update Theme JSON `$schema` to account for pseudo selector support. ([41936](https://github.com/WordPress/gutenberg/pull/41936))
+-   Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
+-   Webfonts API: Document `fontFace` and it’s values in `theme.json` schema. ([41844](https://github.com/WordPress/gutenberg/pull/41844))
+-   [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
+
+#### Block Library
+
+-   #30930 - Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
+-   Columns block: Change title of one third/two thirds column variation to 66/33. ([41734](https://github.com/WordPress/gutenberg/pull/41734))
+-   Fix Prettier error. ([41916](https://github.com/WordPress/gutenberg/pull/41916))
+-   Navigation: Adjust mobile close button position when admin bar is visible. ([41664](https://github.com/WordPress/gutenberg/pull/41664))
+-   Navigation: Make additional top margin specific to open modal. ([41949](https://github.com/WordPress/gutenberg/pull/41949))
+-   Navigation: Move block CSS to JSON. ([41898](https://github.com/WordPress/gutenberg/pull/41898))
+-   Post Comments Form: Add button that enables commenting to warning. ([41603](https://github.com/WordPress/gutenberg/pull/41603))
+-   Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
+
+#### Components
+
+-   BorderControl: Complete TypeScript migration. ([41843](https://github.com/WordPress/gutenberg/pull/41843))
+-   NumberControl: Add 40px size variant to Storybook. ([41997](https://github.com/WordPress/gutenberg/pull/41997))
+-   NumberControl: Convert knobs to controls in Storybook. ([41849](https://github.com/WordPress/gutenberg/pull/41849))
+-   Set Default state to media library for library button in image block. ([41678](https://github.com/WordPress/gutenberg/pull/41678))
+-   Spacer: Convert knobs to controls in Storybook. ([41851](https://github.com/WordPress/gutenberg/pull/41851))
+
+#### Global Styles
+
+-   Allow references to values in other locations in the tree. ([41696](https://github.com/WordPress/gutenberg/pull/41696))
+-   Elements: Lower specificity of elements block css. ([41931](https://github.com/WordPress/gutenberg/pull/41931))
 
 #### CSS & Styling
-- Classic Block: Remove CSS properties with vendor prefixes. ([41995](https://github.com/WordPress/gutenberg/pull/41995))
+
+-   Classic Block: Remove CSS properties with vendor prefixes. ([41995](https://github.com/WordPress/gutenberg/pull/41995))
 
 #### Patterns
-- Add: Ability to use creation patterns for other post types besides page. ([41791](https://github.com/WordPress/gutenberg/pull/41791))
+
+-   Add: Ability to use creation patterns for other post types besides page. ([41791](https://github.com/WordPress/gutenberg/pull/41791))
 
 #### Accessibility
-- Allow defining an aria-label in group blocks. ([41744](https://github.com/WordPress/gutenberg/pull/41744))
+
+-   Allow defining an aria-label in group blocks. ([41744](https://github.com/WordPress/gutenberg/pull/41744))
 
 #### Full Site Editing
-- [Full Site Editing]: Add clear customizations to template card. ([41743](https://github.com/WordPress/gutenberg/pull/41743))
+
+-   [Full Site Editing]: Add clear customizations to template card. ([41743](https://github.com/WordPress/gutenberg/pull/41743))
 
 #### Data Layer
-- Autocompletion support for useSelect (via jsDoc annotations). ([41596](https://github.com/WordPress/gutenberg/pull/41596))
+
+-   Autocompletion support for useSelect (via jsDoc annotations). ([41596](https://github.com/WordPress/gutenberg/pull/41596))
 
 #### Block Variations
-- Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
+
+-   Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
 
 #### Templates API
-- #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
+
+-   #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
 
 #### Themes
-- Add the ability to unset duotone in themes with default duotone set. ([39564](https://github.com/WordPress/gutenberg/pull/39564))
 
+-   Add the ability to unset duotone in themes with default duotone set. ([39564](https://github.com/WordPress/gutenberg/pull/39564))
 
 ## First-time contributors
 
-The following PRs were merged by first time contributors:
-
-- @adambasa-dp: #30930 -  Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
-- @arturgrabo: Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
-- @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
-- @inc2734: Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
-- @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
-- @mcliwanow: Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
-- @navigatrum: Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
-- @pavanpatil1: Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
-- @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
-- @phcp: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
-- @vasartam: Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
-- @xylocone: Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
-- @zaerl: Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
+The following PRs were merged by first-time contributors:
 
+-   @adambasa-dp: #30930 - Make it easier to select "Edit visually" when in "Edit as HTML. ([41516](https://github.com/WordPress/gutenberg/pull/41516))
+-   @arturgrabo: Change case. ([41792](https://github.com/WordPress/gutenberg/pull/41792))
+-   @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary '&& check' as 'optional chaining (authorDetails?.avatar_urls) check' is already used. ([41779](https://github.com/WordPress/gutenberg/pull/41779))
+-   @inc2734: Add supports to basic sample code. ([41589](https://github.com/WordPress/gutenberg/pull/41589))
+-   @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. ([41682](https://github.com/WordPress/gutenberg/pull/41682))
+-   @mcliwanow: Fix link to "Good First Review" issues in README. ([41754](https://github.com/WordPress/gutenberg/pull/41754))
+-   @navigatrum: Strip whitespaces in render_block_core_cover. ([40859](https://github.com/WordPress/gutenberg/pull/40859))
+-   @pavanpatil1: Migrate rtl test case to it's playwright version. ([41495](https://github.com/WordPress/gutenberg/pull/41495))
+-   @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. ([40799](https://github.com/WordPress/gutenberg/pull/40799))
+-   @phcp: Add Pocket Casts embed block variation. ([41006](https://github.com/WordPress/gutenberg/pull/41006))
+-   @vasartam: Block attributes docs: Minor documentation inconsistencies. ([41468](https://github.com/WordPress/gutenberg/pull/41468))
+-   @xylocone: Update nested-blocks-inner-blocks.md. ([41962](https://github.com/WordPress/gutenberg/pull/41962))
+-   @zaerl: Fix: Add 'application/zip' accept header. ([41602](https://github.com/WordPress/gutenberg/pull/41602))
 
 ## Contributors
 
@@ -4256,18 +28371,15 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adambasa-dp @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @arturgrabo @chad1008 @ciampo @dcalhoun @derekblank @fabiankaegy @fluiddot @georgeh @getdave @glendaviesnz @grappler @hz-tyfoon @inc2734 @jorgefilipecosta @kbrown9 @kevin940726 @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @miminari @mirka @mtias @navigatrum @noisysocks @ntsekouras @ockham @opr @pavanpatil1 @petitphp @phcp @pooja-muchandikar @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @sunil25393 @t-hamano @talldan @tellthemachines @tomjn @tyxla @vasartam @walbo @xylocone @zaerl
 
-
 = 13.5.1 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
 ### Block Themes
 
-- Global Styles: Add block CSS rules after the Global Styles rules. ([41934](https://github.com/WordPress/gutenberg/pull/41934))
+-   Global Styles: Add block CSS rules after the Global Styles rules. ([41934](https://github.com/WordPress/gutenberg/pull/41934))
 
 ## Contributors
 
@@ -4275,7 +28387,6 @@ The following contributors merged PRs in this release:
 
 @scruffian
 
-
 = 13.5.0 =
 
 ## Changelog
@@ -4283,149 +28394,169 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Components
-- Use NumberControl as input field. ([41472](https://github.com/WordPress/gutenberg/pull/41472))
-- Convert component to TypeScript. ([41681](https://github.com/WordPress/gutenberg/pull/41681))
-- RadioControl: Convert component to TypeScript. ([41568](https://github.com/WordPress/gutenberg/pull/41568))
+
+-   Use NumberControl as input field. ([41472](https://github.com/WordPress/gutenberg/pull/41472))
+-   Convert component to TypeScript. ([41681](https://github.com/WordPress/gutenberg/pull/41681))
+-   RadioControl: Convert component to TypeScript. ([41568](https://github.com/WordPress/gutenberg/pull/41568))
 
 #### Media
-- Adds featured image toggle to media replace flow. ([41476](https://github.com/WordPress/gutenberg/pull/41476))
-- Add tooltip on replace image's URL. ([41504](https://github.com/WordPress/gutenberg/pull/41504))
+
+-   Adds featured image toggle to media replace flow. ([41476](https://github.com/WordPress/gutenberg/pull/41476))
+-   Add tooltip on replace image's URL. ([41504](https://github.com/WordPress/gutenberg/pull/41504))
 
 #### Block Library
-- Cover: Adds placeholder when feature image is in use. ([41460](https://github.com/WordPress/gutenberg/pull/41460))
-- Post Navigation Link: Add design controls (color, text decoration, and font family). ([41378](https://github.com/WordPress/gutenberg/pull/41378))
+
+-   Cover: Adds placeholder when feature image is in use. ([41460](https://github.com/WordPress/gutenberg/pull/41460))
+-   Post Navigation Link: Add design controls (color, text decoration, and font family). ([41378](https://github.com/WordPress/gutenberg/pull/41378))
 
 #### Block Editor
-- Copy plain text variant of blocks. ([41366](https://github.com/WordPress/gutenberg/pull/41366))
-- Adds CTA and external link to block inserter flow. ([41112](https://github.com/WordPress/gutenberg/pull/41112))
+
+-   Copy plain text variant of blocks. ([41366](https://github.com/WordPress/gutenberg/pull/41366))
+-   Adds CTA and external link to block inserter flow. ([41112](https://github.com/WordPress/gutenberg/pull/41112))
 
 #### Global Styles
-- Move CSS from the stylesheet to the block definition. ([41689](https://github.com/WordPress/gutenberg/pull/41689))
+
+-   Move CSS from the stylesheet to the block definition. ([41689](https://github.com/WordPress/gutenberg/pull/41689))
 
 #### Document Settings
-- Highlight today's date in DatePicker. ([41647](https://github.com/WordPress/gutenberg/pull/41647))
+
+-   Highlight today's date in DatePicker. ([41647](https://github.com/WordPress/gutenberg/pull/41647))
 
 #### Design Tools
-- Cover: Move overlay and opacity controls to color panel. ([41102](https://github.com/WordPress/gutenberg/pull/41102))
+
+-   Cover: Move overlay and opacity controls to color panel. ([41102](https://github.com/WordPress/gutenberg/pull/41102))
 
 ### Bug Fixes
 
 #### Block Editor
-- Preferences Panel: Filters hidden blocks to only count those which are still registered. ([41454](https://github.com/WordPress/gutenberg/pull/41454))
+
+-   Preferences Panel: Filters hidden blocks to only count those which are still registered. ([41454](https://github.com/WordPress/gutenberg/pull/41454))
 
 #### Components
-- Avoid including null values in blocks list. ([41496](https://github.com/WordPress/gutenberg/pull/41496))
-- CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor. ([41492](https://github.com/WordPress/gutenberg/pull/41492))
-- Fix `ComboboxControl` post-reset focus. ([41737](https://github.com/WordPress/gutenberg/pull/41737))
-- FormTokenField: Added Padding to resolve close button overlap issue. ([41556](https://github.com/WordPress/gutenberg/pull/41556))
-- Tooltip: Fix jitter at edge of screen by enabling __unstableShift. ([41524](https://github.com/WordPress/gutenberg/pull/41524))
+
+-   Avoid including null values in blocks list. ([41496](https://github.com/WordPress/gutenberg/pull/41496))
+-   CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor. ([41492](https://github.com/WordPress/gutenberg/pull/41492))
+-   Fix `ComboboxControl` post-reset focus. ([41737](https://github.com/WordPress/gutenberg/pull/41737))
+-   FormTokenField: Added Padding to resolve close button overlap issue. ([41556](https://github.com/WordPress/gutenberg/pull/41556))
+-   Tooltip: Fix jitter at edge of screen by enabling \_\_unstableShift. ([41524](https://github.com/WordPress/gutenberg/pull/41524))
 
 #### Block Library
-- Fix JS Error in Avatar Block. ([41354](https://github.com/WordPress/gutenberg/pull/41354))
-- Query Loop: Render `replace` button only if eligible patterns exist. ([41690](https://github.com/WordPress/gutenberg/pull/41690))
-- Comments Title: Plural has been used instead of single in 1st parameter. ([41521](https://github.com/WordPress/gutenberg/pull/41521))
+
+-   Fix JS Error in Avatar Block. ([41354](https://github.com/WordPress/gutenberg/pull/41354))
+-   Query Loop: Render `replace` button only if eligible patterns exist. ([41690](https://github.com/WordPress/gutenberg/pull/41690))
+-   Comments Title: Plural has been used instead of single in 1st parameter. ([41521](https://github.com/WordPress/gutenberg/pull/41521))
 
 #### Design Tools
-- Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages. ([41335](https://github.com/WordPress/gutenberg/pull/41335))
-- Webfonts: Increase priority of init hook to account for block reregistration. ([41569](https://github.com/WordPress/gutenberg/pull/41569))
+
+-   Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages. ([41335](https://github.com/WordPress/gutenberg/pull/41335))
+-   Webfonts: Increase priority of init hook to account for block reregistration. ([41569](https://github.com/WordPress/gutenberg/pull/41569))
 
 #### Template Editor
-- Include theme's templates in template list in post editor. ([41630](https://github.com/WordPress/gutenberg/pull/41630))
+
+-   Include theme's templates in template list in post editor. ([41630](https://github.com/WordPress/gutenberg/pull/41630))
 
 #### Site Editor
-- Theme variations UI: Ensure that equality check takes into account all default theme properties. ([41591](https://github.com/WordPress/gutenberg/pull/41591))
+
+-   Theme variations UI: Ensure that equality check takes into account all default theme properties. ([41591](https://github.com/WordPress/gutenberg/pull/41591))
 
 #### CSS & Styling
-- Add utility classnames back to blocks that have layout attributes specified. ([41487](https://github.com/WordPress/gutenberg/pull/41487))
-- Allow for zero values for CSS properties in the style engine. ([41561](https://github.com/WordPress/gutenberg/pull/41561))
+
+-   Add utility classnames back to blocks that have layout attributes specified. ([41487](https://github.com/WordPress/gutenberg/pull/41487))
+-   Allow for zero values for CSS properties in the style engine. ([41561](https://github.com/WordPress/gutenberg/pull/41561))
 
 ### Accessibility
 
-- Fix lack of context on action buttons and improve A11Y for the template action buttons Edit/New. ([41615](https://github.com/WordPress/gutenberg/pull/41615))
-- Fix focus trap on certain input types. ([41538](https://github.com/WordPress/gutenberg/pull/41538))
-- Add label to Preview options dropdown menu. ([41566](https://github.com/WordPress/gutenberg/pull/41566))
+-   Fix lack of context on action buttons and improve A11Y for the template action buttons Edit/New. ([41615](https://github.com/WordPress/gutenberg/pull/41615))
+-   Fix focus trap on certain input types. ([41538](https://github.com/WordPress/gutenberg/pull/41538))
+-   Add label to Preview options dropdown menu. ([41566](https://github.com/WordPress/gutenberg/pull/41566))
 
 ### Experiments
 
-- Style engine: Add border to backend. ([40531](https://github.com/WordPress/gutenberg/pull/40531))
-- Style engine: Elements backend support. ([40987](https://github.com/WordPress/gutenberg/pull/40987))
-- Global styles: Merge block CSS with `theme.json` styles. ([34180](https://github.com/WordPress/gutenberg/pull/34180))
+-   Style engine: Add border to backend. ([40531](https://github.com/WordPress/gutenberg/pull/40531))
+-   Style engine: Elements backend support. ([40987](https://github.com/WordPress/gutenberg/pull/40987))
+-   Global styles: Merge block CSS with `theme.json` styles. ([34180](https://github.com/WordPress/gutenberg/pull/34180))
 
 ### Documentation
 
-- Add missing CHANGELOG entry. ([41745](https://github.com/WordPress/gutenberg/pull/41745))
-- Enhancements to TypeScript migration guidelines. ([41669](https://github.com/WordPress/gutenberg/pull/41669))
-- Add step for build and asset file. ([41511](https://github.com/WordPress/gutenberg/pull/41511))
-- Feature flag refresh. ([41522](https://github.com/WordPress/gutenberg/pull/41522))
-- Update link title and add the correct URL. ([41666](https://github.com/WordPress/gutenberg/pull/41666))
-- Fix typo in block schema description. ([41570](https://github.com/WordPress/gutenberg/pull/41570))
+-   Add missing CHANGELOG entry. ([41745](https://github.com/WordPress/gutenberg/pull/41745))
+-   Enhancements to TypeScript migration guidelines. ([41669](https://github.com/WordPress/gutenberg/pull/41669))
+-   Add step for build and asset file. ([41511](https://github.com/WordPress/gutenberg/pull/41511))
+-   Feature flag refresh. ([41522](https://github.com/WordPress/gutenberg/pull/41522))
+-   Update link title and add the correct URL. ([41666](https://github.com/WordPress/gutenberg/pull/41666))
+-   Fix typo in block schema description. ([41570](https://github.com/WordPress/gutenberg/pull/41570))
 
 ### Code Quality
 
-- Entity-aware type signature for getEntityRecord and getEntityRecords. ([41235](https://github.com/WordPress/gutenberg/pull/41235))
-- Improves the types of createHigherOrderComponent and its usages. ([41138](https://github.com/WordPress/gutenberg/pull/41138))
-- ESLint: Restrict removed Lodash functions. ([41651](https://github.com/WordPress/gutenberg/pull/41651))
-- TypeScript: Add default context types to Entity Records in core-data. ([41595](https://github.com/WordPress/gutenberg/pull/41595))
-- TypeScript: Improve type definitions in @wordpress/core-data. ([41593](https://github.com/WordPress/gutenberg/pull/41593))
-- RNMobile: Update clicks to use clickIfClickable() when possible. ([41367](https://github.com/WordPress/gutenberg/pull/41367))
-
-#### Components
-- Draggable: Add clarifying inline comment after the recent hook dependency changes. ([41658](https://github.com/WordPress/gutenberg/pull/41658))
-- Limit `Dropdown` cleanup to renders where the menu has actually been opened. ([41604](https://github.com/WordPress/gutenberg/pull/41604))
-- Placeholder: Add an illustration option to the Placeholder component. ([41605](https://github.com/WordPress/gutenberg/pull/41605))
-- Refactor `CustomGradientBar` to pass `exhaustive-deps`. ([41463](https://github.com/WordPress/gutenberg/pull/41463))
-- Refactor `DateDayPicker` to pass `exhaustive-deps`. ([41470](https://github.com/WordPress/gutenberg/pull/41470))
-- Refactor `Flex` to pass `exhaustive-deps`. ([41507](https://github.com/WordPress/gutenberg/pull/41507))
-- Refactor `FontSizePicker` to pass `exhaustive-deps`. ([41600](https://github.com/WordPress/gutenberg/pull/41600))
-- Refactor `InputControl` to pass `exhaustive-deps`. ([41601](https://github.com/WordPress/gutenberg/pull/41601))
-- Refactor `Modal` to pass `exhaustive-deps`. ([41610](https://github.com/WordPress/gutenberg/pull/41610))
-- Refactor`Draggable` to pass `exhaustive-deps`. ([41499](https://github.com/WordPress/gutenberg/pull/41499))
-- Refactor`Dropdown` to pass `exhaustive-deps`. ([41505](https://github.com/WordPress/gutenberg/pull/41505))
-- Rewrite `<FormTokenField>` to functional component and Typescript. ([41216](https://github.com/WordPress/gutenberg/pull/41216))
-- TreeSelect Convert to Typescript. ([41536](https://github.com/WordPress/gutenberg/pull/41536))
-- ZStack: Convert component story to TypeScript and add inline documentation. ([41694](https://github.com/WordPress/gutenberg/pull/41694))
-
-#### Block Library
-- Clarify updateNavigationLinkBlockAttributes. ([41657](https://github.com/WordPress/gutenberg/pull/41657))
-- Comment Author and Date blocks: Aligned editor markup with the frontend. ([41631](https://github.com/WordPress/gutenberg/pull/41631))
-- Cover Block: Move components to variables so they can be shared. ([41742](https://github.com/WordPress/gutenberg/pull/41742))
-- Split useNavigationMenu into bite-size functions and add unit tests. ([41139](https://github.com/WordPress/gutenberg/pull/41139))
-- File, Search Blocks: Lower CSS specificity. ([41393](https://github.com/WordPress/gutenberg/pull/41393))
+-   Entity-aware type signature for getEntityRecord and getEntityRecords. ([41235](https://github.com/WordPress/gutenberg/pull/41235))
+-   Improves the types of createHigherOrderComponent and its usages. ([41138](https://github.com/WordPress/gutenberg/pull/41138))
+-   ESLint: Restrict removed Lodash functions. ([41651](https://github.com/WordPress/gutenberg/pull/41651))
+-   TypeScript: Add default context types to Entity Records in core-data. ([41595](https://github.com/WordPress/gutenberg/pull/41595))
+-   TypeScript: Improve type definitions in @wordpress/core-data. ([41593](https://github.com/WordPress/gutenberg/pull/41593))
+-   RNMobile: Update clicks to use clickIfClickable() when possible. ([41367](https://github.com/WordPress/gutenberg/pull/41367))
+
+#### Components
+
+-   Draggable: Add clarifying inline comment after the recent hook dependency changes. ([41658](https://github.com/WordPress/gutenberg/pull/41658))
+-   Limit `Dropdown` cleanup to renders where the menu has actually been opened. ([41604](https://github.com/WordPress/gutenberg/pull/41604))
+-   Placeholder: Add an illustration option to the Placeholder component. ([41605](https://github.com/WordPress/gutenberg/pull/41605))
+-   Refactor `CustomGradientBar` to pass `exhaustive-deps`. ([41463](https://github.com/WordPress/gutenberg/pull/41463))
+-   Refactor `DateDayPicker` to pass `exhaustive-deps`. ([41470](https://github.com/WordPress/gutenberg/pull/41470))
+-   Refactor `Flex` to pass `exhaustive-deps`. ([41507](https://github.com/WordPress/gutenberg/pull/41507))
+-   Refactor `FontSizePicker` to pass `exhaustive-deps`. ([41600](https://github.com/WordPress/gutenberg/pull/41600))
+-   Refactor `InputControl` to pass `exhaustive-deps`. ([41601](https://github.com/WordPress/gutenberg/pull/41601))
+-   Refactor `Modal` to pass `exhaustive-deps`. ([41610](https://github.com/WordPress/gutenberg/pull/41610))
+-   Refactor`Draggable` to pass `exhaustive-deps`. ([41499](https://github.com/WordPress/gutenberg/pull/41499))
+-   Refactor`Dropdown` to pass `exhaustive-deps`. ([41505](https://github.com/WordPress/gutenberg/pull/41505))
+-   Rewrite `<FormTokenField>` to functional component and Typescript. ([41216](https://github.com/WordPress/gutenberg/pull/41216))
+-   TreeSelect Convert to Typescript. ([41536](https://github.com/WordPress/gutenberg/pull/41536))
+-   ZStack: Convert component story to TypeScript and add inline documentation. ([41694](https://github.com/WordPress/gutenberg/pull/41694))
+
+#### Block Library
+
+-   Clarify updateNavigationLinkBlockAttributes. ([41657](https://github.com/WordPress/gutenberg/pull/41657))
+-   Comment Author and Date blocks: Aligned editor markup with the frontend. ([41631](https://github.com/WordPress/gutenberg/pull/41631))
+-   Cover Block: Move components to variables so they can be shared. ([41742](https://github.com/WordPress/gutenberg/pull/41742))
+-   Split useNavigationMenu into bite-size functions and add unit tests. ([41139](https://github.com/WordPress/gutenberg/pull/41139))
+-   File, Search Blocks: Lower CSS specificity. ([41393](https://github.com/WordPress/gutenberg/pull/41393))
 
 #### Document Settings
-- Extract header used in PostVisibility and PublishDateTimePicker to a new InspectorPopoverHeader component. ([41362](https://github.com/WordPress/gutenberg/pull/41362))
+
+-   Extract header used in PostVisibility and PublishDateTimePicker to a new InspectorPopoverHeader component. ([41362](https://github.com/WordPress/gutenberg/pull/41362))
 
 #### Lodash
-- Refactor various Lodash methods. ([41701](https://github.com/WordPress/gutenberg/pull/41701)), ([41626](https://github.com/WordPress/gutenberg/pull/41626)), ([41731](https://github.com/WordPress/gutenberg/pull/41731)), ([41635](https://github.com/WordPress/gutenberg/pull/41635)), ([41672](https://github.com/WordPress/gutenberg/pull/41672)), ([41703](https://github.com/WordPress/gutenberg/pull/41703)), ([41692](https://github.com/WordPress/gutenberg/pull/41692)), ([41653](https://github.com/WordPress/gutenberg/pull/41653)), ([41654](https://github.com/WordPress/gutenberg/pull/41654)), ([41624](https://github.com/WordPress/gutenberg/pull/41624)), ([41688](https://github.com/WordPress/gutenberg/pull/41688)), ([41702](https://github.com/WordPress/gutenberg/pull/41702)), ([41652](https://github.com/WordPress/gutenberg/pull/41652)), ([41674](https://github.com/WordPress/gutenberg/pull/41674)), ([41634](https://github.com/WordPress/gutenberg/pull/41634)), ([41633](https://github.com/WordPress/gutenberg/pull/41633)), ([41632](https://github.com/WordPress/gutenberg/pull/41632)), ([41629](https://github.com/WordPress/gutenberg/pull/41629)), ([41706](https://github.com/WordPress/gutenberg/pull/41706)), ([41625](https://github.com/WordPress/gutenberg/pull/41625)), ([41701](https://github.com/WordPress/gutenberg/pull/41701))
-- Remove various lodash usages. ([41719](https://github.com/WordPress/gutenberg/pull/41719)), ([41687](https://github.com/WordPress/gutenberg/pull/41687))
 
+-   Refactor various Lodash methods. ([41701](https://github.com/WordPress/gutenberg/pull/41701)), ([41626](https://github.com/WordPress/gutenberg/pull/41626)), ([41731](https://github.com/WordPress/gutenberg/pull/41731)), ([41635](https://github.com/WordPress/gutenberg/pull/41635)), ([41672](https://github.com/WordPress/gutenberg/pull/41672)), ([41703](https://github.com/WordPress/gutenberg/pull/41703)), ([41692](https://github.com/WordPress/gutenberg/pull/41692)), ([41653](https://github.com/WordPress/gutenberg/pull/41653)), ([41654](https://github.com/WordPress/gutenberg/pull/41654)), ([41624](https://github.com/WordPress/gutenberg/pull/41624)), ([41688](https://github.com/WordPress/gutenberg/pull/41688)), ([41702](https://github.com/WordPress/gutenberg/pull/41702)), ([41652](https://github.com/WordPress/gutenberg/pull/41652)), ([41674](https://github.com/WordPress/gutenberg/pull/41674)), ([41634](https://github.com/WordPress/gutenberg/pull/41634)), ([41633](https://github.com/WordPress/gutenberg/pull/41633)), ([41632](https://github.com/WordPress/gutenberg/pull/41632)), ([41629](https://github.com/WordPress/gutenberg/pull/41629)), ([41706](https://github.com/WordPress/gutenberg/pull/41706)), ([41625](https://github.com/WordPress/gutenberg/pull/41625)), ([41701](https://github.com/WordPress/gutenberg/pull/41701))
+-   Remove various lodash usages. ([41719](https://github.com/WordPress/gutenberg/pull/41719)), ([41687](https://github.com/WordPress/gutenberg/pull/41687))
 
 ### Tools
 
 #### Build Tooling
-- Bump caniuse-lite version. ([41675](https://github.com/WordPress/gutenberg/pull/41675))
-- Update testing-library dependencies to latest version. ([41710](https://github.com/WordPress/gutenberg/pull/41710))
-- Upgrade wp-prettier to 2.6.2. ([40542](https://github.com/WordPress/gutenberg/pull/40542))
-- Package.json: Bump engines.node version to >=14. ([41599](https://github.com/WordPress/gutenberg/pull/41599))
+
+-   Bump caniuse-lite version. ([41675](https://github.com/WordPress/gutenberg/pull/41675))
+-   Update testing-library dependencies to latest version. ([41710](https://github.com/WordPress/gutenberg/pull/41710))
+-   Upgrade wp-prettier to 2.6.2. ([40542](https://github.com/WordPress/gutenberg/pull/40542))
+-   Package.json: Bump engines.node version to >=14. ([41599](https://github.com/WordPress/gutenberg/pull/41599))
 
 #### Testing
-- Fixed failing DateTimePicker Unit test. ([41483](https://github.com/WordPress/gutenberg/pull/41483))
-- Remove snapshot from Post Editor Template Mode test and target expected string instead. ([41563](https://github.com/WordPress/gutenberg/pull/41563))
-- Skip some of the Drag & Drop end-to-end on iOS. ([41529](https://github.com/WordPress/gutenberg/pull/41529))
-- Add controlled unit test, use modern Testing Library features. ([41668](https://github.com/WordPress/gutenberg/pull/41668))
+
+-   Fixed failing DateTimePicker Unit test. ([41483](https://github.com/WordPress/gutenberg/pull/41483))
+-   Remove snapshot from Post Editor Template Mode test and target expected string instead. ([41563](https://github.com/WordPress/gutenberg/pull/41563))
+-   Skip some of the Drag & Drop end-to-end on iOS. ([41529](https://github.com/WordPress/gutenberg/pull/41529))
+-   Add controlled unit test, use modern Testing Library features. ([41668](https://github.com/WordPress/gutenberg/pull/41668))
 
 #### Components
-- Storybook: Update to the version 6.5. ([41585](https://github.com/WordPress/gutenberg/pull/41585))
 
-## First time contributors
+-   Storybook: Update to the version 6.5. ([41585](https://github.com/WordPress/gutenberg/pull/41585))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @FilipposZ: Block-Editor: Add tooltip on replace image's URL. ([41504](https://github.com/WordPress/gutenberg/pull/41504))
-- @manzurahammed: Block Library: Fix JS Error in Avatar Block. ([41354](https://github.com/WordPress/gutenberg/pull/41354))
-- @msurdi: Avoid including null values in blocks list. ([41496](https://github.com/WordPress/gutenberg/pull/41496))
-- @sebastienserre: Plural has been used instead of single in 1st parameter. ([41521](https://github.com/WordPress/gutenberg/pull/41521))
-- @tharsheblows: Docs: Add step for build and asset file. ([41511](https://github.com/WordPress/gutenberg/pull/41511))
+The following PRs were merged by first-time contributors:
+
+-   @FilipposZ: Block-Editor: Add tooltip on replace image's URL. ([41504](https://github.com/WordPress/gutenberg/pull/41504))
+-   @manzurahammed: Block Library: Fix JS Error in Avatar Block. ([41354](https://github.com/WordPress/gutenberg/pull/41354))
+-   @msurdi: Avoid including null values in blocks list. ([41496](https://github.com/WordPress/gutenberg/pull/41496))
+-   @sebastienserre: Plural has been used instead of single in 1st parameter. ([41521](https://github.com/WordPress/gutenberg/pull/41521))
+-   @tharsheblows: Docs: Add step for build and asset file. ([41511](https://github.com/WordPress/gutenberg/pull/41511))
 
 ## Contributors
 
@@ -4433,7 +28564,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @alexstine @andrewserong @chad1008 @ciampo @derekblank @draganescu @FilipposZ @fluiddot @geriux @glendaviesnz @jffng @jostnes @jsnajdr @MaggieCabrera @Mamaduka @manzurahammed @matiasbenedetto @mburridge @mcsf @mirka @msurdi @noisysocks @ntsekouras @oandregal @ramonjd @SavPhill @scruffian @sebastienserre @sunil25393 @t-hamano @tharsheblows @torounit @tyxla @walbo
 
-
 = 13.4.0 =
 
 ## Changelog
@@ -4441,166 +28571,180 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Block Library
-- Block deprecations: Provide context when `blocks.registerBlockType` is applied to deprecations. ([36628](https://github.com/WordPress/gutenberg/pull/36628))
-- File Block: Makes the button an element button. ([41239](https://github.com/WordPress/gutenberg/pull/41239))
-- Gallery: Opt-in to axial (column/row) block spacing controls. ([41175](https://github.com/WordPress/gutenberg/pull/41175))
-- Gallery block: Update the gallery gap to load styles in header for block themes. ([41015](https://github.com/WordPress/gutenberg/pull/41015))
-- Navigation: Remove unnecessary 'role' attribute. ([41360](https://github.com/WordPress/gutenberg/pull/41360))
-- Post Author Name: Add to and from Post Author transformations. ([41151](https://github.com/WordPress/gutenberg/pull/41151))
-- Post Comments: Make the button an element button. ([41251](https://github.com/WordPress/gutenberg/pull/41251))
-- Search Block - ability to specify additional search query vars. ([40585](https://github.com/WordPress/gutenberg/pull/40585))
-- Site Logo: Update/site logo constrain image. ([41298](https://github.com/WordPress/gutenberg/pull/41298))
+
+-   Block deprecations: Provide context when `blocks.registerBlockType` is applied to deprecations. ([36628](https://github.com/WordPress/gutenberg/pull/36628))
+-   File Block: Makes the button an element button. ([41239](https://github.com/WordPress/gutenberg/pull/41239))
+-   Gallery: Opt-in to axial (column/row) block spacing controls. ([41175](https://github.com/WordPress/gutenberg/pull/41175))
+-   Gallery block: Update the gallery gap to load styles in header for block themes. ([41015](https://github.com/WordPress/gutenberg/pull/41015))
+-   Navigation: Remove unnecessary 'role' attribute. ([41360](https://github.com/WordPress/gutenberg/pull/41360))
+-   Post Author Name: Add to and from Post Author transformations. ([41151](https://github.com/WordPress/gutenberg/pull/41151))
+-   Post Comments: Make the button an element button. ([41251](https://github.com/WordPress/gutenberg/pull/41251))
+-   Search Block - ability to specify additional search query vars. ([40585](https://github.com/WordPress/gutenberg/pull/40585))
+-   Site Logo: Update/site logo constrain image. ([41298](https://github.com/WordPress/gutenberg/pull/41298))
 
 #### Components
-- Allow removing bottom margin from SelectControl. ([41269](https://github.com/WordPress/gutenberg/pull/41269))
-- ColorPicker: Only display detailed inputs. ([41222](https://github.com/WordPress/gutenberg/pull/41222))
-- ColorPicker: Strip hash from pasted hex values in ColorPicker. ([41223](https://github.com/WordPress/gutenberg/pull/41223))
-- Design updates to the Publish popover (`DateTimePicker`). ([41097](https://github.com/WordPress/gutenberg/pull/41097))
-- Spacer: Add RTL support. ([41172](https://github.com/WordPress/gutenberg/pull/41172))
+
+-   Allow removing bottom margin from SelectControl. ([41269](https://github.com/WordPress/gutenberg/pull/41269))
+-   ColorPicker: Only display detailed inputs. ([41222](https://github.com/WordPress/gutenberg/pull/41222))
+-   ColorPicker: Strip hash from pasted hex values in ColorPicker. ([41223](https://github.com/WordPress/gutenberg/pull/41223))
+-   Design updates to the Publish popover (`DateTimePicker`). ([41097](https://github.com/WordPress/gutenberg/pull/41097))
+-   Spacer: Add RTL support. ([41172](https://github.com/WordPress/gutenberg/pull/41172))
 
 #### Global Styles
-- Add support for button elements to theme.json. ([40260](https://github.com/WordPress/gutenberg/pull/40260))
-- Button Element: Add support to Site Editor. ([41246](https://github.com/WordPress/gutenberg/pull/41246))
-- Button Element: Update button element selector. ([41240](https://github.com/WordPress/gutenberg/pull/41240))
+
+-   Add support for button elements to theme.json. ([40260](https://github.com/WordPress/gutenberg/pull/40260))
+-   Button Element: Add support to Site Editor. ([41246](https://github.com/WordPress/gutenberg/pull/41246))
+-   Button Element: Update button element selector. ([41240](https://github.com/WordPress/gutenberg/pull/41240))
 
 #### Design Tools
-- Unify color UI. Refactor panel color gradient settings to use a tools panel.  ([41091](https://github.com/WordPress/gutenberg/pull/41091))
+
+-   Unify color UI. Refactor panel color gradient settings to use a tools panel. ([41091](https://github.com/WordPress/gutenberg/pull/41091))
 
 #### Full Site Editing
-- Site Editor: Update `single` default template copy. ([41302](https://github.com/WordPress/gutenberg/pull/41302))
-- FSE Templates: Add info to templates created from wp suggestion. ([41387](https://github.com/WordPress/gutenberg/pull/41387))
+
+-   Site Editor: Update `single` default template copy. ([41302](https://github.com/WordPress/gutenberg/pull/41302))
+-   FSE Templates: Add info to templates created from wp suggestion. ([41387](https://github.com/WordPress/gutenberg/pull/41387))
 
 ### New APIs
 
-- Move the visible blocks state to the block editor store. ([41104](https://github.com/WordPress/gutenberg/pull/41104))
+-   Move the visible blocks state to the block editor store. ([41104](https://github.com/WordPress/gutenberg/pull/41104))
 
 ### Bug Fixes
 
-- Fix customizer block toolbar after popover refactor. ([41312](https://github.com/WordPress/gutenberg/pull/41312))
-- Get_style_nodes should be compatible with parent method. ([41217](https://github.com/WordPress/gutenberg/pull/41217))
+-   Fix customizer block toolbar after popover refactor. ([41312](https://github.com/WordPress/gutenberg/pull/41312))
+-   Get_style_nodes should be compatible with parent method. ([41217](https://github.com/WordPress/gutenberg/pull/41217))
 
 #### Block Library
-- Columns: Add default fallback gap value in block.json, and set to 2em for Columns blocks. ([41098](https://github.com/WordPress/gutenberg/pull/41098))
-- Cover: Fix duotone when background is set to fixed. ([40554](https://github.com/WordPress/gutenberg/pull/40554))
-- Gallery: Lower the priority of the gallery gap css so it loads after the block  layout css. ([41423](https://github.com/WordPress/gutenberg/pull/41423))
-- Gallery: Support gaps that define column/row gaps to avoid PHP Warning/Fatal. ([41125](https://github.com/WordPress/gutenberg/pull/41125))
-- Group: Check variation is registered before displaying it in the toolbar. ([41305](https://github.com/WordPress/gutenberg/pull/41305))
-- Image: Revert error handling. ([41221](https://github.com/WordPress/gutenberg/pull/41221))
-- List: List split bugs if the one of the splits is empty. ([41283](https://github.com/WordPress/gutenberg/pull/41283))
-- Navigation: Fix broken Page title for pages created inline within in Nav block. ([41063](https://github.com/WordPress/gutenberg/pull/41063))
-- Navigation: Remove all references to the navigation areas. ([41205](https://github.com/WordPress/gutenberg/pull/41205))
-- Query: Inherit author from global query. ([40648](https://github.com/WordPress/gutenberg/pull/40648))
-- Table of Contents: Convert `<br>` tags to spaces in headings. ([41206](https://github.com/WordPress/gutenberg/pull/41206))
-- Table of Contents: Fix list block check. ([41351](https://github.com/WordPress/gutenberg/pull/41351))
+
+-   Columns: Add default fallback gap value in block.json, and set to 2em for Columns blocks. ([41098](https://github.com/WordPress/gutenberg/pull/41098))
+-   Cover: Fix duotone when background is set to fixed. ([40554](https://github.com/WordPress/gutenberg/pull/40554))
+-   Gallery: Lower the priority of the gallery gap css so it loads after the block layout css. ([41423](https://github.com/WordPress/gutenberg/pull/41423))
+-   Gallery: Support gaps that define column/row gaps to avoid PHP Warning/Fatal. ([41125](https://github.com/WordPress/gutenberg/pull/41125))
+-   Group: Check variation is registered before displaying it in the toolbar. ([41305](https://github.com/WordPress/gutenberg/pull/41305))
+-   Image: Revert error handling. ([41221](https://github.com/WordPress/gutenberg/pull/41221))
+-   List: List split bugs if the one of the splits is empty. ([41283](https://github.com/WordPress/gutenberg/pull/41283))
+-   Navigation: Fix broken Page title for pages created inline within in Nav block. ([41063](https://github.com/WordPress/gutenberg/pull/41063))
+-   Navigation: Remove all references to the navigation areas. ([41205](https://github.com/WordPress/gutenberg/pull/41205))
+-   Query: Inherit author from global query. ([40648](https://github.com/WordPress/gutenberg/pull/40648))
+-   Table of Contents: Convert `<br>` tags to spaces in headings. ([41206](https://github.com/WordPress/gutenberg/pull/41206))
+-   Table of Contents: Fix list block check. ([41351](https://github.com/WordPress/gutenberg/pull/41351))
 
 #### Block Editor
-- Block Variations: Fix block variation registration when `icon` is an `object` and contains `transform` scope. ([41457](https://github.com/WordPress/gutenberg/pull/41457))
-- Handle no variation case in the block transform menu. ([41328](https://github.com/WordPress/gutenberg/pull/41328))
-- Update the block popover position as we scroll the container. ([41402](https://github.com/WordPress/gutenberg/pull/41402))
-- Writing Flow: Fix browser formatting with shortcuts on multiple selection. ([41207](https://github.com/WordPress/gutenberg/pull/41207))
+
+-   Block Variations: Fix block variation registration when `icon` is an `object` and contains `transform` scope. ([41457](https://github.com/WordPress/gutenberg/pull/41457))
+-   Handle no variation case in the block transform menu. ([41328](https://github.com/WordPress/gutenberg/pull/41328))
+-   Update the block popover position as we scroll the container. ([41402](https://github.com/WordPress/gutenberg/pull/41402))
+-   Writing Flow: Fix browser formatting with shortcuts on multiple selection. ([41207](https://github.com/WordPress/gutenberg/pull/41207))
 
 #### Components
-- BorderBoxControl: Fix right border control alignment on small viewports and RTL styles. ([41254](https://github.com/WordPress/gutenberg/pull/41254))
-- ColorPalette: Update label correctly when value is CSS variable. ([41461](https://github.com/WordPress/gutenberg/pull/41461))
-- InputControl: Fix undo when changing padding values. ([40518](https://github.com/WordPress/gutenberg/pull/40518))
-- Popover, CustomGradientPicker, Dropdown: Fix positioning of popover when used in a dropdown. ([41361](https://github.com/WordPress/gutenberg/pull/41361))
-- Style Variations: Set min-width for styles preview. ([41198](https://github.com/WordPress/gutenberg/pull/41198))
+
+-   BorderBoxControl: Fix right border control alignment on small viewports and RTL styles. ([41254](https://github.com/WordPress/gutenberg/pull/41254))
+-   ColorPalette: Update label correctly when value is CSS variable. ([41461](https://github.com/WordPress/gutenberg/pull/41461))
+-   InputControl: Fix undo when changing padding values. ([40518](https://github.com/WordPress/gutenberg/pull/40518))
+-   Popover, CustomGradientPicker, Dropdown: Fix positioning of popover when used in a dropdown. ([41361](https://github.com/WordPress/gutenberg/pull/41361))
+-   Style Variations: Set min-width for styles preview. ([41198](https://github.com/WordPress/gutenberg/pull/41198))
 
 #### CSS & Styling
-- Block styles: Account for style block nodes that have no name. ([41446](https://github.com/WordPress/gutenberg/pull/41446))
+
+-   Block styles: Account for style block nodes that have no name. ([41446](https://github.com/WordPress/gutenberg/pull/41446))
 
 #### Site Editor
-- Code Editor: Avoid content loss when switching between editors. ([41407](https://github.com/WordPress/gutenberg/pull/41407))
-- Fix description in GetTemplateInfo. ([41394](https://github.com/WordPress/gutenberg/pull/41394))
-- Navigation Menu Sidebar: Fix vertical alignment of rows in nav panel. ([40883](https://github.com/WordPress/gutenberg/pull/40883))
-- Persist new template's description on creation. ([41281](https://github.com/WordPress/gutenberg/pull/41281))
+
+-   Code Editor: Avoid content loss when switching between editors. ([41407](https://github.com/WordPress/gutenberg/pull/41407))
+-   Fix description in GetTemplateInfo. ([41394](https://github.com/WordPress/gutenberg/pull/41394))
+-   Navigation Menu Sidebar: Fix vertical alignment of rows in nav panel. ([40883](https://github.com/WordPress/gutenberg/pull/40883))
+-   Persist new template's description on creation. ([41281](https://github.com/WordPress/gutenberg/pull/41281))
 
 ### Performance
 
-- Improve autocompleter performance. ([41197](https://github.com/WordPress/gutenberg/pull/41197))
-- Load block CSS conditionally. ([41160](https://github.com/WordPress/gutenberg/pull/41160))
-- Update React Spring. ([41185](https://github.com/WordPress/gutenberg/pull/41185))
+-   Improve autocompleter performance. ([41197](https://github.com/WordPress/gutenberg/pull/41197))
+-   Load block CSS conditionally. ([41160](https://github.com/WordPress/gutenberg/pull/41160))
+-   Update React Spring. ([41185](https://github.com/WordPress/gutenberg/pull/41185))
 
 ### Experiments
 
-- Remove Navigation screen from experiments page. ([40878](https://github.com/WordPress/gutenberg/pull/40878))
+-   Remove Navigation screen from experiments page. ([40878](https://github.com/WordPress/gutenberg/pull/40878))
 
 ### Documentation
 
-- Add missing entries to components package CHANGELOG. ([41159](https://github.com/WordPress/gutenberg/pull/41159))
-- Added example for getSaveElement. ([41211](https://github.com/WordPress/gutenberg/pull/41211))
-- Block support docs: Update blockGap notes. ([41225](https://github.com/WordPress/gutenberg/pull/41225))
-- Change 'author' to 'category' in onCategoryChange. ([41299](https://github.com/WordPress/gutenberg/pull/41299))
-- Components: Link Storybook in readme. ([41182](https://github.com/WordPress/gutenberg/pull/41182))
-- Create Block: Improve block templates. ([41273](https://github.com/WordPress/gutenberg/pull/41273))
-- Fix spelling mistake broswer to browser. ([41137](https://github.com/WordPress/gutenberg/pull/41137))
-- Improve inline documentation. ([41209](https://github.com/WordPress/gutenberg/pull/41209))
-- SlotFill: Remove note about portals being unstable. ([41359](https://github.com/WordPress/gutenberg/pull/41359))
-- Update Page URL. ([41188](https://github.com/WordPress/gutenberg/pull/41188))
+-   Add missing entries to components package CHANGELOG. ([41159](https://github.com/WordPress/gutenberg/pull/41159))
+-   Added example for getSaveElement. ([41211](https://github.com/WordPress/gutenberg/pull/41211))
+-   Block support docs: Update blockGap notes. ([41225](https://github.com/WordPress/gutenberg/pull/41225))
+-   Change 'author' to 'category' in onCategoryChange. ([41299](https://github.com/WordPress/gutenberg/pull/41299))
+-   Components: Link Storybook in readme. ([41182](https://github.com/WordPress/gutenberg/pull/41182))
+-   Create Block: Improve block templates. ([41273](https://github.com/WordPress/gutenberg/pull/41273))
+-   Fix spelling mistake broswer to browser. ([41137](https://github.com/WordPress/gutenberg/pull/41137))
+-   Improve inline documentation. ([41209](https://github.com/WordPress/gutenberg/pull/41209))
+-   SlotFill: Remove note about portals being unstable. ([41359](https://github.com/WordPress/gutenberg/pull/41359))
+-   Update Page URL. ([41188](https://github.com/WordPress/gutenberg/pull/41188))
 
 ### Code Quality
 
-- Entity configuration types. ([40995](https://github.com/WordPress/gutenberg/pull/40995))
-- Remove unused color panel files. ([41148](https://github.com/WordPress/gutenberg/pull/41148))
-- Remove the tooltip from the block selection button. ([41154](https://github.com/WordPress/gutenberg/pull/41154))
-- Search: Avoid double escaping. ([41147](https://github.com/WordPress/gutenberg/pull/41147))
-- Upgrade Rememo to v4. ([41415](https://github.com/WordPress/gutenberg/pull/41415))
+-   Entity configuration types. ([40995](https://github.com/WordPress/gutenberg/pull/40995))
+-   Remove unused color panel files. ([41148](https://github.com/WordPress/gutenberg/pull/41148))
+-   Remove the tooltip from the block selection button. ([41154](https://github.com/WordPress/gutenberg/pull/41154))
+-   Search: Avoid double escaping. ([41147](https://github.com/WordPress/gutenberg/pull/41147))
+-   Upgrade Rememo to v4. ([41415](https://github.com/WordPress/gutenberg/pull/41415))
 
 #### Components
-- Refactor `Autocomplete` to pass `exhaustive-deps`. ([41382](https://github.com/WordPress/gutenberg/pull/41382))
-- Refactor `BorderControl` to pass `exhaustive-deps`. ([41259](https://github.com/WordPress/gutenberg/pull/41259))
-- Refactor `ColorPalette` to disable `exhaustive-deps` check for now. ([41253](https://github.com/WordPress/gutenberg/pull/41253))
-- Remove 'useCombinedRef' hook. ([41186](https://github.com/WordPress/gutenberg/pull/41186))
-- Update @types/react-dates. ([41266](https://github.com/WordPress/gutenberg/pull/41266))
-- Refactor `AlignmentMatrixControl` to pass `exhaustive-deps`. ([41167](https://github.com/WordPress/gutenberg/pull/41167))
-- Surface: Convert component to TypeScript. ([41212](https://github.com/WordPress/gutenberg/pull/41212))
-- TextareaControl: Convert component to TypeScript. ([41215](https://github.com/WordPress/gutenberg/pull/41215))
+
+-   Refactor `Autocomplete` to pass `exhaustive-deps`. ([41382](https://github.com/WordPress/gutenberg/pull/41382))
+-   Refactor `BorderControl` to pass `exhaustive-deps`. ([41259](https://github.com/WordPress/gutenberg/pull/41259))
+-   Refactor `ColorPalette` to disable `exhaustive-deps` check for now. ([41253](https://github.com/WordPress/gutenberg/pull/41253))
+-   Remove 'useCombinedRef' hook. ([41186](https://github.com/WordPress/gutenberg/pull/41186))
+-   Update @types/react-dates. ([41266](https://github.com/WordPress/gutenberg/pull/41266))
+-   Refactor `AlignmentMatrixControl` to pass `exhaustive-deps`. ([41167](https://github.com/WordPress/gutenberg/pull/41167))
+-   Surface: Convert component to TypeScript. ([41212](https://github.com/WordPress/gutenberg/pull/41212))
+-   TextareaControl: Convert component to TypeScript. ([41215](https://github.com/WordPress/gutenberg/pull/41215))
 
 ### Tools
 
 #### Build Tooling
-- jest-console: Add types directory to "files". ([41386](https://github.com/WordPress/gutenberg/pull/41386))
-- Scripts: Convert file extension to js in `block.json` during build. ([41068](https://github.com/WordPress/gutenberg/pull/41068))
-- Scripts:  Plugin-zip to include root path files. ([41439](https://github.com/WordPress/gutenberg/pull/41439))
 
+-   jest-console: Add types directory to "files". ([41386](https://github.com/WordPress/gutenberg/pull/41386))
+-   Scripts: Convert file extension to js in `block.json` during build. ([41068](https://github.com/WordPress/gutenberg/pull/41068))
+-   Scripts: Plugin-zip to include root path files. ([41439](https://github.com/WordPress/gutenberg/pull/41439))
 
 #### Plugin
-- Updates tested up to with 6.0 version. ([41272](https://github.com/WordPress/gutenberg/pull/41272))
+
+-   Updates tested up to with 6.0 version. ([41272](https://github.com/WordPress/gutenberg/pull/41272))
 
 #### Project Management
-- Limit my codeowners to the REST API. ([41411](https://github.com/WordPress/gutenberg/pull/41411))
+
+-   Limit my codeowners to the REST API. ([41411](https://github.com/WordPress/gutenberg/pull/41411))
 
 #### Testing
-- CheckboxControl: Add unit tests. ([41165](https://github.com/WordPress/gutenberg/pull/41165))
-- Enable iframe-inline-styles end-to-end test. ([35171](https://github.com/WordPress/gutenberg/pull/35171))
-- Migrate code block tests to Playwright. ([41136](https://github.com/WordPress/gutenberg/pull/41136))
-- Migrate html block test case to Playwright. ([41231](https://github.com/WordPress/gutenberg/pull/41231))
-- Migrate preformatted block tests to Playwright. ([41128](https://github.com/WordPress/gutenberg/pull/41128))
-- Migrate revert template test to Playwright. ([41310](https://github.com/WordPress/gutenberg/pull/41310))
-- Migrate separator block tests to Playwright. ([41130](https://github.com/WordPress/gutenberg/pull/41130))
-- Migrate template part test to playwright. ([41048](https://github.com/WordPress/gutenberg/pull/41048))
-- Refactor check-local-changes script. ([41074](https://github.com/WordPress/gutenberg/pull/41074))
-- Rewrite flaky tests reporter into its own package. ([41106](https://github.com/WordPress/gutenberg/pull/41106))
-- Revert "Enable iframe-inline-styles end-to-end test". ([41369](https://github.com/WordPress/gutenberg/pull/41369))
-- Upgrade Playwright and use the official role selector engine. ([41389](https://github.com/WordPress/gutenberg/pull/41389))
-- Use @testing-library/user-event in `BoxControl` tests. ([41422](https://github.com/WordPress/gutenberg/pull/41422))
-- Use @testing-library/user-event in TimePicker tests. ([41270](https://github.com/WordPress/gutenberg/pull/41270))
+
+-   CheckboxControl: Add unit tests. ([41165](https://github.com/WordPress/gutenberg/pull/41165))
+-   Enable iframe-inline-styles end-to-end test. ([35171](https://github.com/WordPress/gutenberg/pull/35171))
+-   Migrate code block tests to Playwright. ([41136](https://github.com/WordPress/gutenberg/pull/41136))
+-   Migrate html block test case to Playwright. ([41231](https://github.com/WordPress/gutenberg/pull/41231))
+-   Migrate preformatted block tests to Playwright. ([41128](https://github.com/WordPress/gutenberg/pull/41128))
+-   Migrate revert template test to Playwright. ([41310](https://github.com/WordPress/gutenberg/pull/41310))
+-   Migrate separator block tests to Playwright. ([41130](https://github.com/WordPress/gutenberg/pull/41130))
+-   Migrate template part test to playwright. ([41048](https://github.com/WordPress/gutenberg/pull/41048))
+-   Refactor check-local-changes script. ([41074](https://github.com/WordPress/gutenberg/pull/41074))
+-   Rewrite flaky tests reporter into its own package. ([41106](https://github.com/WordPress/gutenberg/pull/41106))
+-   Revert "Enable iframe-inline-styles end-to-end test". ([41369](https://github.com/WordPress/gutenberg/pull/41369))
+-   Upgrade Playwright and use the official role selector engine. ([41389](https://github.com/WordPress/gutenberg/pull/41389))
+-   Use @testing-library/user-event in `BoxControl` tests. ([41422](https://github.com/WordPress/gutenberg/pull/41422))
+-   Use @testing-library/user-event in TimePicker tests. ([41270](https://github.com/WordPress/gutenberg/pull/41270))
 
 #### wp-env
-- Allow skipping setting a configuration value by specifying it as null. ([41084](https://github.com/WordPress/gutenberg/pull/41084))
-- Fixed `run` Argument Passing. ([41179](https://github.com/WordPress/gutenberg/pull/41179))
-- Remove explicit git branch fallbacks for wp-env and update readme. ([41043](https://github.com/WordPress/gutenberg/pull/41043))
 
-## First time contributors
+-   Allow skipping setting a configuration value by specifying it as null. ([41084](https://github.com/WordPress/gutenberg/pull/41084))
+-   Fixed `run` Argument Passing. ([41179](https://github.com/WordPress/gutenberg/pull/41179))
+-   Remove explicit git branch fallbacks for wp-env and update readme. ([41043](https://github.com/WordPress/gutenberg/pull/41043))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @CWBudde: Added example for getSaveElement. ([41211](https://github.com/WordPress/gutenberg/pull/41211))
-- @derekblank:  ([40334](https://github.com/WordPress/gutenberg/pull/40334))
-- @ObliviousHarmony: Env: Fixed `run` Argument Passing. ([41179](https://github.com/WordPress/gutenberg/pull/41179))
-- @pooja-muchandikar: Migrate html block test case to Playwright. ([41231](https://github.com/WordPress/gutenberg/pull/41231))
-- @xconsau: Change 'author' to 'category' in onCategoryChange. ([41299](https://github.com/WordPress/gutenberg/pull/41299))
+The following PRs were merged by first-time contributors:
 
+-   @CWBudde: Added example for getSaveElement. ([41211](https://github.com/WordPress/gutenberg/pull/41211))
+-   @derekblank: ([40334](https://github.com/WordPress/gutenberg/pull/40334))
+-   @ObliviousHarmony: Env: Fixed `run` Argument Passing. ([41179](https://github.com/WordPress/gutenberg/pull/41179))
+-   @pooja-muchandikar: Migrate html block test case to Playwright. ([41231](https://github.com/WordPress/gutenberg/pull/41231))
+-   @xconsau: Change 'author' to 'category' in onCategoryChange. ([41299](https://github.com/WordPress/gutenberg/pull/41299))
 
 ## Contributors
 
@@ -4608,7 +28752,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @aduth @amustaque97 @andrewserong @aristath @chad1008 @ciampo @CWBudde @dd32 @derekblank @draganescu @ethitter @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @jameskoster @jorgefilipecosta @jostnes @JustinyAhin @kevin940726 @Mamaduka @matiasbenedetto @mirka @noisysocks @ntsekouras @ObliviousHarmony @pooja-muchandikar @ramonjd @SavPhill @scruffian @SiobhyB @stokesman @t-hamano @talldan @tellthemachines @TimothyBJacobs @tomasztunik @torounit @walbo @xconsau @youknowriad @ZebulanStanphill
 
-
 = 13.3.0 =
 
 ## Changelog
@@ -4616,266 +28759,293 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Preferences
-- Avoid persisting preference every time the sidebar tab is changed. ([40923](https://github.com/WordPress/gutenberg/pull/40923))
-- Editor preferences: Update order and copy. ([40981](https://github.com/WordPress/gutenberg/pull/40981))
 
-#### Components
-- BorderControl
-    - Make border color consistent with other controls. ([40921](https://github.com/WordPress/gutenberg/pull/40921))
-    - Make height consistent with other controls. ([40920](https://github.com/WordPress/gutenberg/pull/40920))
-    - Make reset to default button only display when required. ([40917](https://github.com/WordPress/gutenberg/pull/40917))
-- Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. ([40985](https://github.com/WordPress/gutenberg/pull/40985))
+-   Avoid persisting preference every time the sidebar tab is changed. ([40923](https://github.com/WordPress/gutenberg/pull/40923))
+-   Editor preferences: Update order and copy. ([40981](https://github.com/WordPress/gutenberg/pull/40981))
+
+#### Components
+
+-   BorderControl
+    -   Make border color consistent with other controls. ([40921](https://github.com/WordPress/gutenberg/pull/40921))
+    -   Make height consistent with other controls. ([40920](https://github.com/WordPress/gutenberg/pull/40920))
+    -   Make reset to default button only display when required. ([40917](https://github.com/WordPress/gutenberg/pull/40917))
+-   Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. ([40985](https://github.com/WordPress/gutenberg/pull/40985))
+
+#### Block Library
+
+-   Add an explicit error message if an image block fails to load the image. ([40982](https://github.com/WordPress/gutenberg/pull/40982))
+-   Add transform between cover and media & text. ([38458](https://github.com/WordPress/gutenberg/pull/38458))
+-   Post Terms: Add dynamic variations of custom taxonomies. ([39837](https://github.com/WordPress/gutenberg/pull/39837))
+-   Query Loop: Add `parents` filter. ([40933](https://github.com/WordPress/gutenberg/pull/40933))
+-   Add: Space to indent list item. ([39949](https://github.com/WordPress/gutenberg/pull/39949))
+-   Separator Block: Add border property for dots style to editor stylesheet. ([40855](https://github.com/WordPress/gutenberg/pull/40855))
+-   Button: Add text transform control. ([40858](https://github.com/WordPress/gutenberg/pull/40858))
+
+#### Build Tooling
+
+-   dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
+-   Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. ([40503](https://github.com/WordPress/gutenberg/pull/40503))
+-   Update actions/setup-node GitHub action. ([40816](https://github.com/WordPress/gutenberg/pull/40816))
+
+#### Design Tools
+
+-   BorderRadiusControl: Add tooltips to split border radius controls. ([40983](https://github.com/WordPress/gutenberg/pull/40983))
+
+#### CSS & Styling
+
+-   BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. ([40958](https://github.com/WordPress/gutenberg/pull/40958))
+
+#### Template Editor
+
+-   Use the label 'Clear customizations' when changes are revertable. ([40935](https://github.com/WordPress/gutenberg/pull/40935))
+
+#### npm Packages
+
+-   Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
+
+#### List View
 
-#### Block Library
-- Add an explicit error message if an image block fails to load the image. ([40982](https://github.com/WordPress/gutenberg/pull/40982))
-- Add transform between cover and media & text. ([38458](https://github.com/WordPress/gutenberg/pull/38458))
-- Post Terms: Add dynamic variations of custom taxonomies. ([39837](https://github.com/WordPress/gutenberg/pull/39837))
-- Query Loop: Add `parents` filter. ([40933](https://github.com/WordPress/gutenberg/pull/40933))
-- Add: Space to indent list item. ([39949](https://github.com/WordPress/gutenberg/pull/39949))
-- Separator Block: Add border property for dots style to editor stylesheet. ([40855](https://github.com/WordPress/gutenberg/pull/40855))
-- Button: Add text transform control. ([40858](https://github.com/WordPress/gutenberg/pull/40858))
+-   Block list: Add option in editor settings to show open list view as default. ([40757](https://github.com/WordPress/gutenberg/pull/40757))
 
-#### Build Tooling
-- dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
-- Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. ([40503](https://github.com/WordPress/gutenberg/pull/40503))
-- Update actions/setup-node GitHub action. ([40816](https://github.com/WordPress/gutenberg/pull/40816))
+### Bug Fixes
 
-#### Design Tools
-- BorderRadiusControl: Add tooltips to split border radius controls. ([40983](https://github.com/WordPress/gutenberg/pull/40983))
+-   Add missing styling panels for uncontrolled navigation. ([41114](https://github.com/WordPress/gutenberg/pull/41114))
+-   DOM: Allow copying text from non-text input elements. ([40192](https://github.com/WordPress/gutenberg/pull/40192))
+-   DOM: Deprecate `isNumberInput` and fix its handling of value=0. ([40896](https://github.com/WordPress/gutenberg/pull/40896))
+-   FlatTermSelector: Avoid errors when returned terms aren't iterable. ([41099](https://github.com/WordPress/gutenberg/pull/41099))
+-   Provide translators comment for Font size and Letter Case. ([40879](https://github.com/WordPress/gutenberg/pull/40879))
 
-#### CSS & Styling
-- BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. ([40958](https://github.com/WordPress/gutenberg/pull/40958))
+#### Block Library
 
-#### Template Editor
-- Use the label 'Clear customizations' when changes are revertable. ([40935](https://github.com/WordPress/gutenberg/pull/40935))
+-   BorderControl: Fix focus styling. ([40951](https://github.com/WordPress/gutenberg/pull/40951))
+-   Add missing "type" to the search field on the editor. ([40782](https://github.com/WordPress/gutenberg/pull/40782))
+-   Comments Title
+    -   Fix post title translation. ([40972](https://github.com/WordPress/gutenberg/pull/40972))
+    -   Make non-editable. ([40817](https://github.com/WordPress/gutenberg/pull/40817))
+-   Cover: Update background type when using featured image. ([40873](https://github.com/WordPress/gutenberg/pull/40873))
+-   Fix Comments Form Title text alignment. ([40795](https://github.com/WordPress/gutenberg/pull/40795))
+-   Fix external styles leaking into Warning component. ([40868](https://github.com/WordPress/gutenberg/pull/40868))
+-   Image Editor: Remove HTML from error messages. ([40812](https://github.com/WordPress/gutenberg/pull/40812))
+-   Post Comments Block: Allow placeholders to reorder items in translations. ([40849](https://github.com/WordPress/gutenberg/pull/40849))
+-   Post Comments: Fix invalid date format in placeholder. ([40929](https://github.com/WordPress/gutenberg/pull/40929))
+-   Quote: Fix the embed discovery. ([41134](https://github.com/WordPress/gutenberg/pull/41134))
+-   Return immediately from Avatar block's render_callback if `$comment` is null. ([40835](https://github.com/WordPress/gutenberg/pull/40835))
+-   Use `get_the_post_thumbnail` function in the cover block.. ([40853](https://github.com/WordPress/gutenberg/pull/40853))
+-   List v2
+    -   Fix outdent on empty list item if we press enter. ([40939](https://github.com/WordPress/gutenberg/pull/40939))
+    -   Focus new list item added from sibling inserter. ([41051](https://github.com/WordPress/gutenberg/pull/41051))
+    -   Fixes an issue where pressing enter deletes innerblocks. ([41109](https://github.com/WordPress/gutenberg/pull/41109))
+-   CircularOptionPicker: Fix focused styles. ([40990](https://github.com/WordPress/gutenberg/pull/40990))
+-   Gallery block
+    -   Fix bug with initial image size. ([41079](https://github.com/WordPress/gutenberg/pull/41079))
+    -   Include image caption when converting a classic block gallery. ([40872](https://github.com/WordPress/gutenberg/pull/40872))
+-   Post Author block: Hide select author controle if there is no postId. ([40910](https://github.com/WordPress/gutenberg/pull/40910))
 
-#### npm Packages
-- Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
+#### Site Editor
 
-#### List View
-- Block list: Add option in editor settings to show open list view as default. ([40757](https://github.com/WordPress/gutenberg/pull/40757))
-
-
-### Bug Fixes
-
-- Add missing styling panels for uncontrolled navigation. ([41114](https://github.com/WordPress/gutenberg/pull/41114))
-- DOM: Allow copying text from non-text input elements. ([40192](https://github.com/WordPress/gutenberg/pull/40192))
-- DOM: Deprecate `isNumberInput` and fix its handling of value=0. ([40896](https://github.com/WordPress/gutenberg/pull/40896))
-- FlatTermSelector: Avoid errors when returned terms aren't iterable. ([41099](https://github.com/WordPress/gutenberg/pull/41099))
-- Provide translators comment for Font size and Letter Case. ([40879](https://github.com/WordPress/gutenberg/pull/40879))
-
-#### Block Library
-- BorderControl: Fix focus styling. ([40951](https://github.com/WordPress/gutenberg/pull/40951))
-- Add missing "type" to the search field on the editor. ([40782](https://github.com/WordPress/gutenberg/pull/40782))
-- Comments Title
-    - Fix post title translation. ([40972](https://github.com/WordPress/gutenberg/pull/40972))
-    - Make non-editable. ([40817](https://github.com/WordPress/gutenberg/pull/40817))
-- Cover: Update background type when using featured image. ([40873](https://github.com/WordPress/gutenberg/pull/40873))
-- Fix Comments Form Title text alignment. ([40795](https://github.com/WordPress/gutenberg/pull/40795))
-- Fix external styles leaking into Warning component. ([40868](https://github.com/WordPress/gutenberg/pull/40868))
-- Image Editor: Remove HTML from error messages. ([40812](https://github.com/WordPress/gutenberg/pull/40812))
-- Post Comments Block: Allow placeholders to reorder items in translations. ([40849](https://github.com/WordPress/gutenberg/pull/40849))
-- Post Comments: Fix invalid date format in placeholder. ([40929](https://github.com/WordPress/gutenberg/pull/40929))
-- Quote: Fix the embed discovery. ([41134](https://github.com/WordPress/gutenberg/pull/41134))
-- Return immediately from Avatar block's render_callback if `$comment` is null. ([40835](https://github.com/WordPress/gutenberg/pull/40835))
-- Use `get_the_post_thumbnail` function in the cover block.. ([40853](https://github.com/WordPress/gutenberg/pull/40853))
-- List v2
-    - Fix outdent on empty list item if we press enter. ([40939](https://github.com/WordPress/gutenberg/pull/40939))
-    - Focus new list item added from sibling inserter. ([41051](https://github.com/WordPress/gutenberg/pull/41051))
-    - Fixes an issue where pressing enter deletes innerblocks. ([41109](https://github.com/WordPress/gutenberg/pull/41109))
-- CircularOptionPicker: Fix focused styles. ([40990](https://github.com/WordPress/gutenberg/pull/40990))
-- Gallery block
-    - Fix bug with initial image size. ([41079](https://github.com/WordPress/gutenberg/pull/41079))
-    - Include image caption when converting a classic block gallery. ([40872](https://github.com/WordPress/gutenberg/pull/40872))
-- Post Author block: Hide select author controle if there is no postId. ([40910](https://github.com/WordPress/gutenberg/pull/40910))
-
-#### Site Editor
-- Avoid previous content flash when a new template is created. ([40841](https://github.com/WordPress/gutenberg/pull/40841))
-- Decode entities in the site title. ([40956](https://github.com/WordPress/gutenberg/pull/40956))
-- Fix opinionated block styles loading in editor. ([40937](https://github.com/WordPress/gutenberg/pull/40937))
-- Post Comments: Fix Older/Newer comments links styling. ([40948](https://github.com/WordPress/gutenberg/pull/40948))
-- Template List: Fix word break for the 'Added by' column. ([40959](https://github.com/WordPress/gutenberg/pull/40959))
-- Template editor: Show the inserter if the template part is empty. ([41024](https://github.com/WordPress/gutenberg/pull/41024))
+-   Avoid previous content flash when a new template is created. ([40841](https://github.com/WordPress/gutenberg/pull/40841))
+-   Decode entities in the site title. ([40956](https://github.com/WordPress/gutenberg/pull/40956))
+-   Fix opinionated block styles loading in editor. ([40937](https://github.com/WordPress/gutenberg/pull/40937))
+-   Post Comments: Fix Older/Newer comments links styling. ([40948](https://github.com/WordPress/gutenberg/pull/40948))
+-   Template List: Fix word break for the 'Added by' column. ([40959](https://github.com/WordPress/gutenberg/pull/40959))
+-   Template editor: Show the inserter if the template part is empty. ([41024](https://github.com/WordPress/gutenberg/pull/41024))
 
 #### Accessibility
-- Prevent navigation on URL input suggestion selection via enter key. ([40906](https://github.com/WordPress/gutenberg/pull/40906))
-- Table block: Fix focus loss after Create Table button is selected. ([40399](https://github.com/WordPress/gutenberg/pull/40399))
-- Block Library - Latest Posts: Prevent opening the links in editor. ([40593](https://github.com/WordPress/gutenberg/pull/40593))
+
+-   Prevent navigation on URL input suggestion selection via enter key. ([40906](https://github.com/WordPress/gutenberg/pull/40906))
+-   Table block: Fix focus loss after Create Table button is selected. ([40399](https://github.com/WordPress/gutenberg/pull/40399))
+-   Block Library - Latest Posts: Prevent opening the links in editor. ([40593](https://github.com/WordPress/gutenberg/pull/40593))
 
 #### Global Styles
-- Fix: Global Styles are always resettable. ([40887](https://github.com/WordPress/gutenberg/pull/40887))
-- Fix: Global Styles: Impossible to open welcome guide if global styles are empty. ([40888](https://github.com/WordPress/gutenberg/pull/40888))
-- Site editor: Preset custom color duplicates. ([40837](https://github.com/WordPress/gutenberg/pull/40837))
-- Reduce active tab accent weight. ([40998](https://github.com/WordPress/gutenberg/pull/40998))
+
+-   Fix: Global Styles are always resettable. ([40887](https://github.com/WordPress/gutenberg/pull/40887))
+-   Fix: Global Styles: Impossible to open welcome guide if global styles are empty. ([40888](https://github.com/WordPress/gutenberg/pull/40888))
+-   Site editor: Preset custom color duplicates. ([40837](https://github.com/WordPress/gutenberg/pull/40837))
+-   Reduce active tab accent weight. ([40998](https://github.com/WordPress/gutenberg/pull/40998))
 
 #### Post Editor
-- Fix typo in the test description didPostSaveRequestSucceed. ([41064](https://github.com/WordPress/gutenberg/pull/41064))
-- Post saved draft button: Overwrite default button component margin. ([40834](https://github.com/WordPress/gutenberg/pull/40834))
+
+-   Fix typo in the test description didPostSaveRequestSucceed. ([41064](https://github.com/WordPress/gutenberg/pull/41064))
+-   Post saved draft button: Overwrite default button component margin. ([40834](https://github.com/WordPress/gutenberg/pull/40834))
 
 #### Themes
-- Theme Export: Use a better method to determine the theme name. ([40829](https://github.com/WordPress/gutenberg/pull/40829))
-- Theme Export: Use basename when determining the theme slug. ([41058](https://github.com/WordPress/gutenberg/pull/41058))
+
+-   Theme Export: Use a better method to determine the theme name. ([40829](https://github.com/WordPress/gutenberg/pull/40829))
+-   Theme Export: Use basename when determining the theme slug. ([41058](https://github.com/WordPress/gutenberg/pull/41058))
 
 #### Template Editor
-- Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
-- Templates: Only allow renaming user-created and non-default templates. ([40881](https://github.com/WordPress/gutenberg/pull/40881))
+
+-   Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
+-   Templates: Only allow renaming user-created and non-default templates. ([40881](https://github.com/WordPress/gutenberg/pull/40881))
 
 #### Components
-- Fix Storybook builds. ([41089](https://github.com/WordPress/gutenberg/pull/41089))
+
+-   Fix Storybook builds. ([41089](https://github.com/WordPress/gutenberg/pull/41089))
 
 #### Design Tools
-- Layout: Remove double output of align-items in horizontal layouts. ([41018](https://github.com/WordPress/gutenberg/pull/41018))
+
+-   Layout: Remove double output of align-items in horizontal layouts. ([41018](https://github.com/WordPress/gutenberg/pull/41018))
 
 #### Code Editor
-- Fix save shortcut. ([40848](https://github.com/WordPress/gutenberg/pull/40848))
+
+-   Fix save shortcut. ([40848](https://github.com/WordPress/gutenberg/pull/40848))
 
 #### Global Styles
-- Theme Json: Don't output double selectors for elements inside blocks. ([40889](https://github.com/WordPress/gutenberg/pull/40889))
 
+-   Theme Json: Don't output double selectors for elements inside blocks. ([40889](https://github.com/WordPress/gutenberg/pull/40889))
 
 ### Performance
 
 #### Block Library
-- Ensure that post thumbnail is cached in latest post block. ([40571](https://github.com/WordPress/gutenberg/pull/40571))
-- Ensure that post thumbnail is cached in post template block. ([40572](https://github.com/WordPress/gutenberg/pull/40572))
-- Navigation link: Prime caches for all posts in menu items. ([40752](https://github.com/WordPress/gutenberg/pull/40752))
-- useShortCodeTransform: Fetch media data in single request. ([40945](https://github.com/WordPress/gutenberg/pull/40945))
-- Update the block overlay to rely on useDisabled hook. ([40649](https://github.com/WordPress/gutenberg/pull/40649))
 
+-   Ensure that post thumbnail is cached in latest post block. ([40571](https://github.com/WordPress/gutenberg/pull/40571))
+-   Ensure that post thumbnail is cached in post template block. ([40572](https://github.com/WordPress/gutenberg/pull/40572))
+-   Navigation link: Prime caches for all posts in menu items. ([40752](https://github.com/WordPress/gutenberg/pull/40752))
+-   useShortCodeTransform: Fetch media data in single request. ([40945](https://github.com/WordPress/gutenberg/pull/40945))
+-   Update the block overlay to rely on useDisabled hook. ([40649](https://github.com/WordPress/gutenberg/pull/40649))
 
 ### Experiments
 
-- Style Engine: Add typography and color to frontend. ([40665](https://github.com/WordPress/gutenberg/pull/40665))
-- Add: Raw handling to the new list block. ([39954](https://github.com/WordPress/gutenberg/pull/39954))
+-   Style Engine: Add typography and color to frontend. ([40665](https://github.com/WordPress/gutenberg/pull/40665))
+-   Add: Raw handling to the new list block. ([39954](https://github.com/WordPress/gutenberg/pull/39954))
 
 #### Block Library
-- List v2
-   - Indent multiple list items. ([40991](https://github.com/WordPress/gutenberg/pull/40991))
-   - Outdent list item when pressing `Backspace` at the start. ([40962](https://github.com/WordPress/gutenberg/pull/40962))
-- ToC block
-    - Re-enable + use static markup and only support core Heading and Page Break blocks. ([29739](https://github.com/WordPress/gutenberg/pull/29739))
-    - Mark Table of Contents block as experimental using `block.json` flag. ([40905](https://github.com/WordPress/gutenberg/pull/40905))
+
+-   List v2
+    -   Indent multiple list items. ([40991](https://github.com/WordPress/gutenberg/pull/40991))
+    -   Outdent list item when pressing `Backspace` at the start. ([40962](https://github.com/WordPress/gutenberg/pull/40962))
+-   ToC block
+    -   Re-enable + use static markup and only support core Heading and Page Break blocks. ([29739](https://github.com/WordPress/gutenberg/pull/29739))
+    -   Mark Table of Contents block as experimental using `block.json` flag. ([40905](https://github.com/WordPress/gutenberg/pull/40905))
 
 #### Data Layer
-- Add suspense support to the data module. ([37261](https://github.com/WordPress/gutenberg/pull/37261))
+
+-   Add suspense support to the data module. ([37261](https://github.com/WordPress/gutenberg/pull/37261))
 
 ### Documentation
 
-- Add "How To Get Your Pull Request Reviewed?" to developer handbook. ([40589](https://github.com/WordPress/gutenberg/pull/40589))
-- Add link to npm release details to the release documentation. ([40867](https://github.com/WordPress/gutenberg/pull/40867))
-- Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
-- Docs: Git.io deprecation - Replace links. ([40734](https://github.com/WordPress/gutenberg/pull/40734))
-- Document useEntityRecord/s in README.md and CHANGELOG.md. ([40932](https://github.com/WordPress/gutenberg/pull/40932))
-- Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
-- Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. ([41025](https://github.com/WordPress/gutenberg/pull/41025))
-- Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
-- Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
-- [Gutenberg Data Tutorial] Part 4: Building a new record form. ([39261](https://github.com/WordPress/gutenberg/pull/39261))
+-   Add "How To Get Your Pull Request Reviewed?" to developer handbook. ([40589](https://github.com/WordPress/gutenberg/pull/40589))
+-   Add link to npm release details to the release documentation. ([40867](https://github.com/WordPress/gutenberg/pull/40867))
+-   Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
+-   Docs: Git.io deprecation - Replace links. ([40734](https://github.com/WordPress/gutenberg/pull/40734))
+-   Document useEntityRecord/s in README.md and CHANGELOG.md. ([40932](https://github.com/WordPress/gutenberg/pull/40932))
+-   Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
+-   Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. ([41025](https://github.com/WordPress/gutenberg/pull/41025))
+-   Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
+-   Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
+-   [Gutenberg Data Tutorial] Part 4: Building a new record form. ([39261](https://github.com/WordPress/gutenberg/pull/39261))
 
 #### Components
-- Use TypeScript and controls for `DateTimePicker`'s stories. ([40986](https://github.com/WordPress/gutenberg/pull/40986))
+
+-   Use TypeScript and controls for `DateTimePicker`'s stories. ([40986](https://github.com/WordPress/gutenberg/pull/40986))
 
 ### Code Quality
 
-- Convert core-data selectors from jsDoc annotations into TypeScript type signatures. ([40025](https://github.com/WordPress/gutenberg/pull/40025))
-- Dependency extraction
-    - Improve calculation of contentHash. ([40930](https://github.com/WordPress/gutenberg/pull/40930))
-    - Respect hashDigestLength option for version field. ([40977](https://github.com/WordPress/gutenberg/pull/40977))
-- Improve function name for finding navigation links that use the featured image. ([40904](https://github.com/WordPress/gutenberg/pull/40904))
-- Interface: Fix deprecation messages. ([40825](https://github.com/WordPress/gutenberg/pull/40825))
-- Make the useDisabled hook stable. ([40890](https://github.com/WordPress/gutenberg/pull/40890))
-- Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of *.assets.php. ([40753](https://github.com/WordPress/gutenberg/pull/40753))
-- Remove unreachable inserter component. ([41103](https://github.com/WordPress/gutenberg/pull/41103))
-- Styles hook: Swap out lodash methods with their JS equivalents. ([40918](https://github.com/WordPress/gutenberg/pull/40918))
-- Update react-resize-aware with use-resize-observer. ([40509](https://github.com/WordPress/gutenberg/pull/40509))
-- useRefEffect: Replace undefined with void in callback return type. ([40798](https://github.com/WordPress/gutenberg/pull/40798))
-- Remove Flyout leftovers. ([41129](https://github.com/WordPress/gutenberg/pull/41129))
-- Send registered patterns in HTML and combine them with REST ones. ([40818](https://github.com/WordPress/gutenberg/pull/40818))
-- Refactor the Popover component to use the floatingUI library. ([40740](https://github.com/WordPress/gutenberg/pull/40740))
-- Table of Contents block: Remove editor-only wrapper `<div>`. ([40899](https://github.com/WordPress/gutenberg/pull/40899))
-- Color Controls: Merge color dropdown components. ([40084](https://github.com/WordPress/gutenberg/pull/40084))
-
-#### Block Library
-- Cover:
-    - Refactor controls. ([40832](https://github.com/WordPress/gutenberg/pull/40832))
-    - Correct resizeable spelling to US resizable. ([41100](https://github.com/WordPress/gutenberg/pull/41100))
-- Post Terms:
-    - Add wp_kses_post to prefix/suffix for consistency. ([40803](https://github.com/WordPress/gutenberg/pull/40803))
-    - Post Terms: Insert defaultBlock on suffix end split. ([40934](https://github.com/WordPress/gutenberg/pull/40934))
-- Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. ([40954](https://github.com/WordPress/gutenberg/pull/40954))
-- Query Loop: Move sticky control to separate file. ([41101](https://github.com/WordPress/gutenberg/pull/41101))
-- Search Block: Remove id attribute from svg. ([40828](https://github.com/WordPress/gutenberg/pull/40828))
-- ButtonGroup: Convert to TypeScript. ([41007](https://github.com/WordPress/gutenberg/pull/41007))
-
-#### Components
-- Add jest-console typings and convert DateTimePicker tests to TypeScript. ([40957](https://github.com/WordPress/gutenberg/pull/40957))
-- Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. ([40775](https://github.com/WordPress/gutenberg/pull/40775))
-- Update `react-dates` to 21.8.0. ([40801](https://github.com/WordPress/gutenberg/pull/40801))
-- Stabilize useEntityRecord and useEntityRecords. ([40162](https://github.com/WordPress/gutenberg/pull/40162))
-- CheckboxControl: Convert component to TypeScript. ([40915](https://github.com/WordPress/gutenberg/pull/40915))
+-   Convert core-data selectors from jsDoc annotations into TypeScript type signatures. ([40025](https://github.com/WordPress/gutenberg/pull/40025))
+-   Dependency extraction
+    -   Improve calculation of contentHash. ([40930](https://github.com/WordPress/gutenberg/pull/40930))
+    -   Respect hashDigestLength option for version field. ([40977](https://github.com/WordPress/gutenberg/pull/40977))
+-   Improve function name for finding navigation links that use the featured image. ([40904](https://github.com/WordPress/gutenberg/pull/40904))
+-   Interface: Fix deprecation messages. ([40825](https://github.com/WordPress/gutenberg/pull/40825))
+-   Make the useDisabled hook stable. ([40890](https://github.com/WordPress/gutenberg/pull/40890))
+-   Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of \*.assets.php. ([40753](https://github.com/WordPress/gutenberg/pull/40753))
+-   Remove unreachable inserter component. ([41103](https://github.com/WordPress/gutenberg/pull/41103))
+-   Styles hook: Swap out lodash methods with their JS equivalents. ([40918](https://github.com/WordPress/gutenberg/pull/40918))
+-   Update react-resize-aware with use-resize-observer. ([40509](https://github.com/WordPress/gutenberg/pull/40509))
+-   useRefEffect: Replace undefined with void in callback return type. ([40798](https://github.com/WordPress/gutenberg/pull/40798))
+-   Remove Flyout leftovers. ([41129](https://github.com/WordPress/gutenberg/pull/41129))
+-   Send registered patterns in HTML and combine them with REST ones. ([40818](https://github.com/WordPress/gutenberg/pull/40818))
+-   Refactor the Popover component to use the floatingUI library. ([40740](https://github.com/WordPress/gutenberg/pull/40740))
+-   Table of Contents block: Remove editor-only wrapper `<div>`. ([40899](https://github.com/WordPress/gutenberg/pull/40899))
+-   Color Controls: Merge color dropdown components. ([40084](https://github.com/WordPress/gutenberg/pull/40084))
+
+#### Block Library
+
+-   Cover:
+    -   Refactor controls. ([40832](https://github.com/WordPress/gutenberg/pull/40832))
+    -   Correct resizeable spelling to US resizable. ([41100](https://github.com/WordPress/gutenberg/pull/41100))
+-   Post Terms:
+    -   Add wp_kses_post to prefix/suffix for consistency. ([40803](https://github.com/WordPress/gutenberg/pull/40803))
+    -   Post Terms: Insert defaultBlock on suffix end split. ([40934](https://github.com/WordPress/gutenberg/pull/40934))
+-   Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. ([40954](https://github.com/WordPress/gutenberg/pull/40954))
+-   Query Loop: Move sticky control to separate file. ([41101](https://github.com/WordPress/gutenberg/pull/41101))
+-   Search Block: Remove id attribute from svg. ([40828](https://github.com/WordPress/gutenberg/pull/40828))
+-   ButtonGroup: Convert to TypeScript. ([41007](https://github.com/WordPress/gutenberg/pull/41007))
+
+#### Components
+
+-   Add jest-console typings and convert DateTimePicker tests to TypeScript. ([40957](https://github.com/WordPress/gutenberg/pull/40957))
+-   Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. ([40775](https://github.com/WordPress/gutenberg/pull/40775))
+-   Update `react-dates` to 21.8.0. ([40801](https://github.com/WordPress/gutenberg/pull/40801))
+-   Stabilize useEntityRecord and useEntityRecords. ([40162](https://github.com/WordPress/gutenberg/pull/40162))
+-   CheckboxControl: Convert component to TypeScript. ([40915](https://github.com/WordPress/gutenberg/pull/40915))
 
 #### Plugin
-- Declare blocks as __experimental in block.json to automate syncing Gutenberg packages to WordPress. ([40655](https://github.com/WordPress/gutenberg/pull/40655))
-- Tools: Improve configuration for formatting files. ([40994](https://github.com/WordPress/gutenberg/pull/40994))
-- Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
+
+-   Declare blocks as \_\_experimental in block.json to automate syncing Gutenberg packages to WordPress. ([40655](https://github.com/WordPress/gutenberg/pull/40655))
+-   Tools: Improve configuration for formatting files. ([40994](https://github.com/WordPress/gutenberg/pull/40994))
+-   Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
 
 #### Code Editor
-- Don't commit 'non-dirty' changes. ([41092](https://github.com/WordPress/gutenberg/pull/41092))
+
+-   Don't commit 'non-dirty' changes. ([41092](https://github.com/WordPress/gutenberg/pull/41092))
 
 #### Media
-- Media Utils: Don't convert error messages into an array. ([39448](https://github.com/WordPress/gutenberg/pull/39448))
+
+-   Media Utils: Don't convert error messages into an array. ([39448](https://github.com/WordPress/gutenberg/pull/39448))
 
 #### Block Editor
-- Add constants for link entry types. ([36490](https://github.com/WordPress/gutenberg/pull/36490))
+
+-   Add constants for link entry types. ([36490](https://github.com/WordPress/gutenberg/pull/36490))
 
 #### Post Editor
-- DevicePreview: Remove unnecessary div tag. ([40911](https://github.com/WordPress/gutenberg/pull/40911))
+
+-   DevicePreview: Remove unnecessary div tag. ([40911](https://github.com/WordPress/gutenberg/pull/40911))
 
 ### Tools
 
-- Fix pull-request-automation CI check (temporarily until an upstream fix lands). ([41044](https://github.com/WordPress/gutenberg/pull/41044))
-- Update package-lock.json. ([41045](https://github.com/WordPress/gutenberg/pull/41045))
-- env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
-- Add @fabiankaegy as a code owner for the docs/ directory. ([41057](https://github.com/WordPress/gutenberg/pull/41057))
+-   Fix pull-request-automation CI check (temporarily until an upstream fix lands). ([41044](https://github.com/WordPress/gutenberg/pull/41044))
+-   Update package-lock.json. ([41045](https://github.com/WordPress/gutenberg/pull/41045))
+-   env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
+-   Add @fabiankaegy as a code owner for the docs/ directory. ([41057](https://github.com/WordPress/gutenberg/pull/41057))
 
 #### Testing
-- Add eslint warning about use of waitForTimeout to playwright eslint. ([40802](https://github.com/WordPress/gutenberg/pull/40802))
-- Comment Template: Reorganize block tests to ease backport process. ([40739](https://github.com/WordPress/gutenberg/pull/40739))
-- Fix: Env unit test fails on Windows. ([41070](https://github.com/WordPress/gutenberg/pull/41070))
-- Migrate 'block-locking' to Playwright. ([41050](https://github.com/WordPress/gutenberg/pull/41050))
-- Migrate and refactor image block end-to-end tests to Playwright. ([40804](https://github.com/WordPress/gutenberg/pull/40804))
-- Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
-- Reorganize playwright utils and make canvas utils usable in the site editor. ([40815](https://github.com/WordPress/gutenberg/pull/40815))
-- Setup user-event inline once per test. ([40839](https://github.com/WordPress/gutenberg/pull/40839))
-- Test block insertion after title post blur. ([32944](https://github.com/WordPress/gutenberg/pull/32944))
-- Tests: Remove comment template unit tests. ([40965](https://github.com/WordPress/gutenberg/pull/40965))
-- useSelect: Add unit tests for usage without deps. ([40732](https://github.com/WordPress/gutenberg/pull/40732))
+
+-   Add eslint warning about use of waitForTimeout to playwright eslint. ([40802](https://github.com/WordPress/gutenberg/pull/40802))
+-   Comment Template: Reorganize block tests to ease backport process. ([40739](https://github.com/WordPress/gutenberg/pull/40739))
+-   Fix: Env unit test fails on Windows. ([41070](https://github.com/WordPress/gutenberg/pull/41070))
+-   Migrate 'block-locking' to Playwright. ([41050](https://github.com/WordPress/gutenberg/pull/41050))
+-   Migrate and refactor image block end-to-end tests to Playwright. ([40804](https://github.com/WordPress/gutenberg/pull/40804))
+-   Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
+-   Reorganize playwright utils and make canvas utils usable in the site editor. ([40815](https://github.com/WordPress/gutenberg/pull/40815))
+-   Setup user-event inline once per test. ([40839](https://github.com/WordPress/gutenberg/pull/40839))
+-   Test block insertion after title post blur. ([32944](https://github.com/WordPress/gutenberg/pull/32944))
+-   Tests: Remove comment template unit tests. ([40965](https://github.com/WordPress/gutenberg/pull/40965))
+-   useSelect: Add unit tests for usage without deps. ([40732](https://github.com/WordPress/gutenberg/pull/40732))
 
 #### npm Packages
-- Packages: Add GitHub workflow for publishing to npm. ([40976](https://github.com/WordPress/gutenberg/pull/40976))
-- Packages: Add more npm release types to the GitHub workflow. ([41046](https://github.com/WordPress/gutenberg/pull/41046))
 
+-   Packages: Add GitHub workflow for publishing to npm. ([40976](https://github.com/WordPress/gutenberg/pull/40976))
+-   Packages: Add more npm release types to the GitHub workflow. ([41046](https://github.com/WordPress/gutenberg/pull/41046))
 
 #### Block Library
-- Heading block - add font family support. ([40970](https://github.com/WordPress/gutenberg/pull/40970))
-- Only allow template part to be replaced if its a header or footer. ([40787](https://github.com/WordPress/gutenberg/pull/40787))
-- Try a single icon for title blocks. ([40596](https://github.com/WordPress/gutenberg/pull/40596))
-
 
+-   Heading block - add font family support. ([40970](https://github.com/WordPress/gutenberg/pull/40970))
+-   Only allow template part to be replaced if its a header or footer. ([40787](https://github.com/WordPress/gutenberg/pull/40787))
+-   Try a single icon for title blocks. ([40596](https://github.com/WordPress/gutenberg/pull/40596))
 
 ## First-time contributors
 
 The following PRs were merged by first-time contributors:
 
-- @anomiex: dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
-- @damiencarbery: Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
-- @JessicaGosselin: Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
-- @luminuu: Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
-- @n3f: env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
-- @SavPhill: Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
-- @shanjidah: Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
-- @tomjdv: Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
-
+-   @anomiex: dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
+-   @damiencarbery: Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
+-   @JessicaGosselin: Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
+-   @luminuu: Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
+-   @n3f: env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
+-   @SavPhill: Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
+-   @shanjidah: Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
+-   @tomjdv: Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
 
 ## Contributors
 
@@ -4883,17 +29053,15 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @Addison-Stavlo @alexstine @amustaque97 @andrewserong @anomiex @aristath @c4rl0sbr4v0 @carolinan @ciampo @damiencarbery @DAreRodz @dcalhoun @draganescu @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gziolo @jameskoster @JessicaGosselin @jffng @jhnstn @jorgefilipecosta @jostnes @jsnajdr @kevin940726 @luisherranz @luminuu @Mamaduka @mauriac @mchowning @mcsf @michalczaplinski @mikachan @n3f @noisysocks @ntsekouras @ockham @ramonjd @SavPhill @scruffian @shanjidah @SiobhyB @Soean @spacedmonkey @t-hamano @talldan @tomasztunik @tomjdv @walbo @youknowriad @ZebulanStanphill
 
-
 = 13.2.2 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
 #### Block Library
-- Blocks: Don't abort registering blocks when a missing block file is found. ([41122](https://github.com/WordPress/gutenberg/pull/41122))
+
+-   Blocks: Don't abort registering blocks when a missing block file is found. ([41122](https://github.com/WordPress/gutenberg/pull/41122))
 
 ## Contributors
 
@@ -4901,270 +29069,294 @@ The following contributors merged PRs in this release:
 
 @dd32
 
-
 = 13.3.0-rc.1 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Avoid persisting preference every time the sidebar tab is changed. ([40923](https://github.com/WordPress/gutenberg/pull/40923))
-- Editor preferences: Update order and copy. ([40981](https://github.com/WordPress/gutenberg/pull/40981))
-- Update the block overlay to rely on useDisabled hook. ([40649](https://github.com/WordPress/gutenberg/pull/40649))
-- dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
+-   Avoid persisting preference every time the sidebar tab is changed. ([40923](https://github.com/WordPress/gutenberg/pull/40923))
+-   Editor preferences: Update order and copy. ([40981](https://github.com/WordPress/gutenberg/pull/40981))
+-   Update the block overlay to rely on useDisabled hook. ([40649](https://github.com/WordPress/gutenberg/pull/40649))
+-   dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
 
 #### Components
-- BorderControl: Fix focus styling. ([40951](https://github.com/WordPress/gutenberg/pull/40951))
-- BorderControl: Make border color consistent with other controls. ([40921](https://github.com/WordPress/gutenberg/pull/40921))
-- BorderControl: Make height consistent with other controls. ([40920](https://github.com/WordPress/gutenberg/pull/40920))
-- BorderControl: Make reset to default button only display when required. ([40917](https://github.com/WordPress/gutenberg/pull/40917))
-- ButtonGroup: Convert to TypeScript. ([41007](https://github.com/WordPress/gutenberg/pull/41007))
-- CheckboxControl: Convert component to TypeScript. ([40915](https://github.com/WordPress/gutenberg/pull/40915))
-- CircularOptionPicker: Fix focused styles. ([40990](https://github.com/WordPress/gutenberg/pull/40990))
-- Refactor the Popover component to use the floatingUI library. ([40740](https://github.com/WordPress/gutenberg/pull/40740))
+
+-   BorderControl: Fix focus styling. ([40951](https://github.com/WordPress/gutenberg/pull/40951))
+-   BorderControl: Make border color consistent with other controls. ([40921](https://github.com/WordPress/gutenberg/pull/40921))
+-   BorderControl: Make height consistent with other controls. ([40920](https://github.com/WordPress/gutenberg/pull/40920))
+-   BorderControl: Make reset to default button only display when required. ([40917](https://github.com/WordPress/gutenberg/pull/40917))
+-   ButtonGroup: Convert to TypeScript. ([41007](https://github.com/WordPress/gutenberg/pull/41007))
+-   CheckboxControl: Convert component to TypeScript. ([40915](https://github.com/WordPress/gutenberg/pull/40915))
+-   CircularOptionPicker: Fix focused styles. ([40990](https://github.com/WordPress/gutenberg/pull/40990))
+-   Refactor the Popover component to use the floatingUI library. ([40740](https://github.com/WordPress/gutenberg/pull/40740))
 
 #### Block Library
-- Add an explicit error message if an image block fails to load the image. ([40982](https://github.com/WordPress/gutenberg/pull/40982))
-- Add transform between cover and media & text. ([38458](https://github.com/WordPress/gutenberg/pull/38458))
-- Post Terms: Add dynamic variations of custom taxonomies. ([39837](https://github.com/WordPress/gutenberg/pull/39837))
-- Query Loop: Add `parents` filter. ([40933](https://github.com/WordPress/gutenberg/pull/40933))
+
+-   Add an explicit error message if an image block fails to load the image. ([40982](https://github.com/WordPress/gutenberg/pull/40982))
+-   Add transform between cover and media & text. ([38458](https://github.com/WordPress/gutenberg/pull/38458))
+-   Post Terms: Add dynamic variations of custom taxonomies. ([39837](https://github.com/WordPress/gutenberg/pull/39837))
+-   Query Loop: Add `parents` filter. ([40933](https://github.com/WordPress/gutenberg/pull/40933))
 
 #### Design Tools
-- BorderRadiusControl: Add tooltips to split border radius controls. ([40983](https://github.com/WordPress/gutenberg/pull/40983))
-- Color Controls: Merge color dropdown components. ([40084](https://github.com/WordPress/gutenberg/pull/40084))
+
+-   BorderRadiusControl: Add tooltips to split border radius controls. ([40983](https://github.com/WordPress/gutenberg/pull/40983))
+-   Color Controls: Merge color dropdown components. ([40084](https://github.com/WordPress/gutenberg/pull/40084))
 
 #### CSS & Styling
-- BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. ([40958](https://github.com/WordPress/gutenberg/pull/40958))
-- Table of Contents block: Remove editor-only wrapper `<div>`. ([40899](https://github.com/WordPress/gutenberg/pull/40899))
+
+-   BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. ([40958](https://github.com/WordPress/gutenberg/pull/40958))
+-   Table of Contents block: Remove editor-only wrapper `<div>`. ([40899](https://github.com/WordPress/gutenberg/pull/40899))
 
 #### Template Editor
-- Use the label 'Clear customizations' when changes are revertable. ([40935](https://github.com/WordPress/gutenberg/pull/40935))
+
+-   Use the label 'Clear customizations' when changes are revertable. ([40935](https://github.com/WordPress/gutenberg/pull/40935))
 
 #### npm Packages
-- Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
+
+-   Packages: Add command to publish to npm targeting WP major release. ([40927](https://github.com/WordPress/gutenberg/pull/40927))
 
 #### Post Editor
-- DevicePreview: Remove unnecessary div tag. ([40911](https://github.com/WordPress/gutenberg/pull/40911))
+
+-   DevicePreview: Remove unnecessary div tag. ([40911](https://github.com/WordPress/gutenberg/pull/40911))
 
 #### List View
-- Block list: Add option in editor settings to show open list view as default. ([40757](https://github.com/WordPress/gutenberg/pull/40757))
 
+-   Block list: Add option in editor settings to show open list view as default. ([40757](https://github.com/WordPress/gutenberg/pull/40757))
 
 ### Bug Fixes
 
-- Add missing styling panels for uncontrolled navigation. ([41114](https://github.com/WordPress/gutenberg/pull/41114))
-- DOM: Allow copying text from non-text input elements. ([40192](https://github.com/WordPress/gutenberg/pull/40192))
-- DOM: Deprecate `isNumberInput` and fix its handling of value=0. ([40896](https://github.com/WordPress/gutenberg/pull/40896))
-- Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. ([40503](https://github.com/WordPress/gutenberg/pull/40503))
-- FlatTermSelector: Avoid errors when returned terms aren't iterable. ([41099](https://github.com/WordPress/gutenberg/pull/41099))
-- Provide translators comment for Font size and Letter Case. ([40879](https://github.com/WordPress/gutenberg/pull/40879))
+-   Add missing styling panels for uncontrolled navigation. ([41114](https://github.com/WordPress/gutenberg/pull/41114))
+-   DOM: Allow copying text from non-text input elements. ([40192](https://github.com/WordPress/gutenberg/pull/40192))
+-   DOM: Deprecate `isNumberInput` and fix its handling of value=0. ([40896](https://github.com/WordPress/gutenberg/pull/40896))
+-   Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. ([40503](https://github.com/WordPress/gutenberg/pull/40503))
+-   FlatTermSelector: Avoid errors when returned terms aren't iterable. ([41099](https://github.com/WordPress/gutenberg/pull/41099))
+-   Provide translators comment for Font size and Letter Case. ([40879](https://github.com/WordPress/gutenberg/pull/40879))
 
 #### Block Library
-- Add missing "type" to the search field on the editor. ([40782](https://github.com/WordPress/gutenberg/pull/40782))
-- Comments Title: Fix post title translation. ([40972](https://github.com/WordPress/gutenberg/pull/40972))
-- Comments Title: Make non-editable. ([40817](https://github.com/WordPress/gutenberg/pull/40817))
-- Cover: Update background type when using featured image. ([40873](https://github.com/WordPress/gutenberg/pull/40873))
-- Fix Comments Form Title text alignment. ([40795](https://github.com/WordPress/gutenberg/pull/40795))
-- Fix external styles leaking into Warning component. ([40868](https://github.com/WordPress/gutenberg/pull/40868))
-- Image Editor: Remove HTML from error messages. ([40812](https://github.com/WordPress/gutenberg/pull/40812))
-- Post Comments Block: Allow placeholders to reorder items in translations. ([40849](https://github.com/WordPress/gutenberg/pull/40849))
-- Post Comments: Fix invalid date format in placeholder. ([40929](https://github.com/WordPress/gutenberg/pull/40929))
-- Quote: Fix the embed discovery. ([41134](https://github.com/WordPress/gutenberg/pull/41134))
-- Return immediately from Avatar block's render_callback if `$comment` is null. ([40835](https://github.com/WordPress/gutenberg/pull/40835))
-- Use `get_the_post_thumbnail` function in the cover block.. ([40853](https://github.com/WordPress/gutenberg/pull/40853))
-- List v2: Fix outdent on empty list item if we press enter. ([40939](https://github.com/WordPress/gutenberg/pull/40939))
-- List v2: Focus new list item added from sibling inserter. ([41051](https://github.com/WordPress/gutenberg/pull/41051))
-- List v2: Fixes an issue where pressing enter deletes innerblocks. ([41109](https://github.com/WordPress/gutenberg/pull/41109))
+
+-   Add missing "type" to the search field on the editor. ([40782](https://github.com/WordPress/gutenberg/pull/40782))
+-   Comments Title: Fix post title translation. ([40972](https://github.com/WordPress/gutenberg/pull/40972))
+-   Comments Title: Make non-editable. ([40817](https://github.com/WordPress/gutenberg/pull/40817))
+-   Cover: Update background type when using featured image. ([40873](https://github.com/WordPress/gutenberg/pull/40873))
+-   Fix Comments Form Title text alignment. ([40795](https://github.com/WordPress/gutenberg/pull/40795))
+-   Fix external styles leaking into Warning component. ([40868](https://github.com/WordPress/gutenberg/pull/40868))
+-   Image Editor: Remove HTML from error messages. ([40812](https://github.com/WordPress/gutenberg/pull/40812))
+-   Post Comments Block: Allow placeholders to reorder items in translations. ([40849](https://github.com/WordPress/gutenberg/pull/40849))
+-   Post Comments: Fix invalid date format in placeholder. ([40929](https://github.com/WordPress/gutenberg/pull/40929))
+-   Quote: Fix the embed discovery. ([41134](https://github.com/WordPress/gutenberg/pull/41134))
+-   Return immediately from Avatar block's render_callback if `$comment` is null. ([40835](https://github.com/WordPress/gutenberg/pull/40835))
+-   Use `get_the_post_thumbnail` function in the cover block.. ([40853](https://github.com/WordPress/gutenberg/pull/40853))
+-   List v2: Fix outdent on empty list item if we press enter. ([40939](https://github.com/WordPress/gutenberg/pull/40939))
+-   List v2: Focus new list item added from sibling inserter. ([41051](https://github.com/WordPress/gutenberg/pull/41051))
+-   List v2: Fixes an issue where pressing enter deletes innerblocks. ([41109](https://github.com/WordPress/gutenberg/pull/41109))
 
 #### Site Editor
-- Avoid previous content flash when a new template is created. ([40841](https://github.com/WordPress/gutenberg/pull/40841))
-- Decode entities in the site title. ([40956](https://github.com/WordPress/gutenberg/pull/40956))
-- Fix opinionated block styles loading in editor. ([40937](https://github.com/WordPress/gutenberg/pull/40937))
-- Post Comments: Fix Older/Newer comments links styling. ([40948](https://github.com/WordPress/gutenberg/pull/40948))
-- Template List: Fix word break for the 'Added by' column. ([40959](https://github.com/WordPress/gutenberg/pull/40959))
-- Template editor: Show the inserter if the template part is empty. ([41024](https://github.com/WordPress/gutenberg/pull/41024))
+
+-   Avoid previous content flash when a new template is created. ([40841](https://github.com/WordPress/gutenberg/pull/40841))
+-   Decode entities in the site title. ([40956](https://github.com/WordPress/gutenberg/pull/40956))
+-   Fix opinionated block styles loading in editor. ([40937](https://github.com/WordPress/gutenberg/pull/40937))
+-   Post Comments: Fix Older/Newer comments links styling. ([40948](https://github.com/WordPress/gutenberg/pull/40948))
+-   Template List: Fix word break for the 'Added by' column. ([40959](https://github.com/WordPress/gutenberg/pull/40959))
+-   Template editor: Show the inserter if the template part is empty. ([41024](https://github.com/WordPress/gutenberg/pull/41024))
 
 #### Accessibility
-- Prevent navigation on URL input suggestion selection via enter key. ([40906](https://github.com/WordPress/gutenberg/pull/40906))
-- Table block: Fix focus loss after Create Table button is selected. ([40399](https://github.com/WordPress/gutenberg/pull/40399))
-- Block Library - Latest Posts: Prevent opening the links in editor. ([40593](https://github.com/WordPress/gutenberg/pull/40593))
+
+-   Prevent navigation on URL input suggestion selection via enter key. ([40906](https://github.com/WordPress/gutenberg/pull/40906))
+-   Table block: Fix focus loss after Create Table button is selected. ([40399](https://github.com/WordPress/gutenberg/pull/40399))
+-   Block Library - Latest Posts: Prevent opening the links in editor. ([40593](https://github.com/WordPress/gutenberg/pull/40593))
 
 #### Global Styles
-- Fix: Global Styles are always resettable. ([40887](https://github.com/WordPress/gutenberg/pull/40887))
-- Fix: Global Styles: Impossible to open welcome guide if global styles are empty. ([40888](https://github.com/WordPress/gutenberg/pull/40888))
-- Site editor: Preset custom color duplicates. ([40837](https://github.com/WordPress/gutenberg/pull/40837))
-- Reduce active tab accent weight. ([40998](https://github.com/WordPress/gutenberg/pull/40998))
+
+-   Fix: Global Styles are always resettable. ([40887](https://github.com/WordPress/gutenberg/pull/40887))
+-   Fix: Global Styles: Impossible to open welcome guide if global styles are empty. ([40888](https://github.com/WordPress/gutenberg/pull/40888))
+-   Site editor: Preset custom color duplicates. ([40837](https://github.com/WordPress/gutenberg/pull/40837))
+-   Reduce active tab accent weight. ([40998](https://github.com/WordPress/gutenberg/pull/40998))
 
 #### Post Editor
-- Fix typo in the test description didPostSaveRequestSucceed. ([41064](https://github.com/WordPress/gutenberg/pull/41064))
-- Post saved draft button: Overwrite default button component margin. ([40834](https://github.com/WordPress/gutenberg/pull/40834))
+
+-   Fix typo in the test description didPostSaveRequestSucceed. ([41064](https://github.com/WordPress/gutenberg/pull/41064))
+-   Post saved draft button: Overwrite default button component margin. ([40834](https://github.com/WordPress/gutenberg/pull/40834))
 
 #### Themes
-- Theme Export: Use a better method to determine the theme name. ([40829](https://github.com/WordPress/gutenberg/pull/40829))
-- Theme Export: Use basename when determining the theme slug. ([41058](https://github.com/WordPress/gutenberg/pull/41058))
+
+-   Theme Export: Use a better method to determine the theme name. ([40829](https://github.com/WordPress/gutenberg/pull/40829))
+-   Theme Export: Use basename when determining the theme slug. ([41058](https://github.com/WordPress/gutenberg/pull/41058))
 
 #### Template Editor
-- Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
-- Templates: Only allow renaming user-created and non-default templates. ([40881](https://github.com/WordPress/gutenberg/pull/40881))
+
+-   Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
+-   Templates: Only allow renaming user-created and non-default templates. ([40881](https://github.com/WordPress/gutenberg/pull/40881))
 
 #### Components
-- Fix Storybook builds. ([41089](https://github.com/WordPress/gutenberg/pull/41089))
+
+-   Fix Storybook builds. ([41089](https://github.com/WordPress/gutenberg/pull/41089))
 
 #### Design Tools
-- Layout: Remove double output of align-items in horizontal layouts. ([41018](https://github.com/WordPress/gutenberg/pull/41018))
+
+-   Layout: Remove double output of align-items in horizontal layouts. ([41018](https://github.com/WordPress/gutenberg/pull/41018))
 
 #### Code Editor
-- Fix save shortcut. ([40848](https://github.com/WordPress/gutenberg/pull/40848))
 
+-   Fix save shortcut. ([40848](https://github.com/WordPress/gutenberg/pull/40848))
 
 ### Performance
 
 #### Block Library
-- Ensure that post thumbnail is cached in latest post block. ([40571](https://github.com/WordPress/gutenberg/pull/40571))
-- Ensure that post thumbnail is cached in post template block. ([40572](https://github.com/WordPress/gutenberg/pull/40572))
-- Navigation link: Prime caches for all posts in menu items. ([40752](https://github.com/WordPress/gutenberg/pull/40752))
-- useShortCodeTransform: Fetch media data in single request. ([40945](https://github.com/WordPress/gutenberg/pull/40945))
 
+-   Ensure that post thumbnail is cached in latest post block. ([40571](https://github.com/WordPress/gutenberg/pull/40571))
+-   Ensure that post thumbnail is cached in post template block. ([40572](https://github.com/WordPress/gutenberg/pull/40572))
+-   Navigation link: Prime caches for all posts in menu items. ([40752](https://github.com/WordPress/gutenberg/pull/40752))
+-   useShortCodeTransform: Fetch media data in single request. ([40945](https://github.com/WordPress/gutenberg/pull/40945))
 
 ### Experiments
 
-- Style Engine: Add typography and color to frontend. ([40665](https://github.com/WordPress/gutenberg/pull/40665))
+-   Style Engine: Add typography and color to frontend. ([40665](https://github.com/WordPress/gutenberg/pull/40665))
 
 #### Block Library
-- List v2: Indent multiple list items. ([40991](https://github.com/WordPress/gutenberg/pull/40991))
-- List v2: Outdent list item when pressing `Backspace` at the start. ([40962](https://github.com/WordPress/gutenberg/pull/40962))
 
+-   List v2: Indent multiple list items. ([40991](https://github.com/WordPress/gutenberg/pull/40991))
+-   List v2: Outdent list item when pressing `Backspace` at the start. ([40962](https://github.com/WordPress/gutenberg/pull/40962))
 
 ### Documentation
 
-- Add "How To Get Your Pull Request Reviewed?" to developer handbook. ([40589](https://github.com/WordPress/gutenberg/pull/40589))
-- Add link to npm release details to the release documentation. ([40867](https://github.com/WordPress/gutenberg/pull/40867))
-- Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
-- Docs: Git.io deprecation - Replace links. ([40734](https://github.com/WordPress/gutenberg/pull/40734))
-- Document useEntityRecord/s in README.md and CHANGELOG.md. ([40932](https://github.com/WordPress/gutenberg/pull/40932))
-- Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
-- Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. ([41025](https://github.com/WordPress/gutenberg/pull/41025))
-- Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
-- Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
-- [Gutenberg Data Tutorial] Part 4: Building a new record form. ([39261](https://github.com/WordPress/gutenberg/pull/39261))
+-   Add "How To Get Your Pull Request Reviewed?" to developer handbook. ([40589](https://github.com/WordPress/gutenberg/pull/40589))
+-   Add link to npm release details to the release documentation. ([40867](https://github.com/WordPress/gutenberg/pull/40867))
+-   Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
+-   Docs: Git.io deprecation - Replace links. ([40734](https://github.com/WordPress/gutenberg/pull/40734))
+-   Document useEntityRecord/s in README.md and CHANGELOG.md. ([40932](https://github.com/WordPress/gutenberg/pull/40932))
+-   Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
+-   Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. ([41025](https://github.com/WordPress/gutenberg/pull/41025))
+-   Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
+-   Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
+-   [Gutenberg Data Tutorial] Part 4: Building a new record form. ([39261](https://github.com/WordPress/gutenberg/pull/39261))
 
 #### Components
-- Use TypeScript and controls for `DateTimePicker`'s stories. ([40986](https://github.com/WordPress/gutenberg/pull/40986))
 
+-   Use TypeScript and controls for `DateTimePicker`'s stories. ([40986](https://github.com/WordPress/gutenberg/pull/40986))
 
 ### Code Quality
 
-- Convert core-data selectors from jsDoc annotations into TypeScript type signatures. ([40025](https://github.com/WordPress/gutenberg/pull/40025))
-- Dependency extraction: Improve calculation of contentHash. ([40930](https://github.com/WordPress/gutenberg/pull/40930))
-- Dependency extraction: Respect hashDigestLength option for version field. ([40977](https://github.com/WordPress/gutenberg/pull/40977))
-- Improve function name for finding navigation links that use the featured image. ([40904](https://github.com/WordPress/gutenberg/pull/40904))
-- Interface: Fix deprecation messages. ([40825](https://github.com/WordPress/gutenberg/pull/40825))
-- Make the useDisabled hook stable. ([40890](https://github.com/WordPress/gutenberg/pull/40890))
-- Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of *.assets.php. ([40753](https://github.com/WordPress/gutenberg/pull/40753))
-- Remove unreachable inserter component. ([41103](https://github.com/WordPress/gutenberg/pull/41103))
-- Styles hook: Swap out lodash methods with their JS equivalents. ([40918](https://github.com/WordPress/gutenberg/pull/40918))
-- Update react-resize-aware with use-resize-observer. ([40509](https://github.com/WordPress/gutenberg/pull/40509))
-- useRefEffect: Replace undefined with void in callback return type. ([40798](https://github.com/WordPress/gutenberg/pull/40798))
-- Remove Flyout leftovers. ([41129](https://github.com/WordPress/gutenberg/pull/41129))
-- Send registered patterns in HTML and combine them with REST ones. ([40818](https://github.com/WordPress/gutenberg/pull/40818))
-
-#### Block Library
-- Cover: Refactor controls. ([40832](https://github.com/WordPress/gutenberg/pull/40832))
-- Cover: Correct resizeable spelling to US resizable. ([41100](https://github.com/WordPress/gutenberg/pull/41100))
-- Post Terms: Add wp_kses_post to prefix/suffix for consistency. ([40803](https://github.com/WordPress/gutenberg/pull/40803))
-- Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. ([40954](https://github.com/WordPress/gutenberg/pull/40954))
-- Post Terms: Insert defaultBlock on suffix end split. ([40934](https://github.com/WordPress/gutenberg/pull/40934))
-- Query Loop: Move sticky control to separate file. ([41101](https://github.com/WordPress/gutenberg/pull/41101))
-
-#### Components
-- Add jest-console typings and convert DateTimePicker tests to TypeScript. ([40957](https://github.com/WordPress/gutenberg/pull/40957))
-- Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. ([40775](https://github.com/WordPress/gutenberg/pull/40775))
-- Update `react-dates` to 21.8.0. ([40801](https://github.com/WordPress/gutenberg/pull/40801))
-- Stabilize useEntityRecord and useEntityRecords. ([40162](https://github.com/WordPress/gutenberg/pull/40162))
+-   Convert core-data selectors from jsDoc annotations into TypeScript type signatures. ([40025](https://github.com/WordPress/gutenberg/pull/40025))
+-   Dependency extraction: Improve calculation of contentHash. ([40930](https://github.com/WordPress/gutenberg/pull/40930))
+-   Dependency extraction: Respect hashDigestLength option for version field. ([40977](https://github.com/WordPress/gutenberg/pull/40977))
+-   Improve function name for finding navigation links that use the featured image. ([40904](https://github.com/WordPress/gutenberg/pull/40904))
+-   Interface: Fix deprecation messages. ([40825](https://github.com/WordPress/gutenberg/pull/40825))
+-   Make the useDisabled hook stable. ([40890](https://github.com/WordPress/gutenberg/pull/40890))
+-   Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of \*.assets.php. ([40753](https://github.com/WordPress/gutenberg/pull/40753))
+-   Remove unreachable inserter component. ([41103](https://github.com/WordPress/gutenberg/pull/41103))
+-   Styles hook: Swap out lodash methods with their JS equivalents. ([40918](https://github.com/WordPress/gutenberg/pull/40918))
+-   Update react-resize-aware with use-resize-observer. ([40509](https://github.com/WordPress/gutenberg/pull/40509))
+-   useRefEffect: Replace undefined with void in callback return type. ([40798](https://github.com/WordPress/gutenberg/pull/40798))
+-   Remove Flyout leftovers. ([41129](https://github.com/WordPress/gutenberg/pull/41129))
+-   Send registered patterns in HTML and combine them with REST ones. ([40818](https://github.com/WordPress/gutenberg/pull/40818))
+
+#### Block Library
+
+-   Cover: Refactor controls. ([40832](https://github.com/WordPress/gutenberg/pull/40832))
+-   Cover: Correct resizeable spelling to US resizable. ([41100](https://github.com/WordPress/gutenberg/pull/41100))
+-   Post Terms: Add wp_kses_post to prefix/suffix for consistency. ([40803](https://github.com/WordPress/gutenberg/pull/40803))
+-   Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. ([40954](https://github.com/WordPress/gutenberg/pull/40954))
+-   Post Terms: Insert defaultBlock on suffix end split. ([40934](https://github.com/WordPress/gutenberg/pull/40934))
+-   Query Loop: Move sticky control to separate file. ([41101](https://github.com/WordPress/gutenberg/pull/41101))
+
+#### Components
+
+-   Add jest-console typings and convert DateTimePicker tests to TypeScript. ([40957](https://github.com/WordPress/gutenberg/pull/40957))
+-   Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. ([40775](https://github.com/WordPress/gutenberg/pull/40775))
+-   Update `react-dates` to 21.8.0. ([40801](https://github.com/WordPress/gutenberg/pull/40801))
+-   Stabilize useEntityRecord and useEntityRecords. ([40162](https://github.com/WordPress/gutenberg/pull/40162))
 
 #### Plugin
-- Declare blocks as __experimental in block.json to automate syncing Gutenberg packages to WordPress. ([40655](https://github.com/WordPress/gutenberg/pull/40655))
-- Tools: Improve configuration for formatting files. ([40994](https://github.com/WordPress/gutenberg/pull/40994))
+
+-   Declare blocks as \_\_experimental in block.json to automate syncing Gutenberg packages to WordPress. ([40655](https://github.com/WordPress/gutenberg/pull/40655))
+-   Tools: Improve configuration for formatting files. ([40994](https://github.com/WordPress/gutenberg/pull/40994))
 
 #### Code Editor
-- Don't commit 'non-dirty' changes. ([41092](https://github.com/WordPress/gutenberg/pull/41092))
+
+-   Don't commit 'non-dirty' changes. ([41092](https://github.com/WordPress/gutenberg/pull/41092))
 
 #### Media
-- Media Utils: Don't convert error messages into an array. ([39448](https://github.com/WordPress/gutenberg/pull/39448))
+
+-   Media Utils: Don't convert error messages into an array. ([39448](https://github.com/WordPress/gutenberg/pull/39448))
 
 #### Block Editor
-- Add constants for link entry types. ([36490](https://github.com/WordPress/gutenberg/pull/36490))
 
+-   Add constants for link entry types. ([36490](https://github.com/WordPress/gutenberg/pull/36490))
 
 ### Tools
 
-- Fix pull-request-automation CI check (temporarily until an upstream fix lands). ([41044](https://github.com/WordPress/gutenberg/pull/41044))
-- Update package-lock.json. ([41045](https://github.com/WordPress/gutenberg/pull/41045))
-- env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
-- Add @fabiankaegy as a code owner for the docs/ directory. ([41057](https://github.com/WordPress/gutenberg/pull/41057))
+-   Fix pull-request-automation CI check (temporarily until an upstream fix lands). ([41044](https://github.com/WordPress/gutenberg/pull/41044))
+-   Update package-lock.json. ([41045](https://github.com/WordPress/gutenberg/pull/41045))
+-   env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
+-   Add @fabiankaegy as a code owner for the docs/ directory. ([41057](https://github.com/WordPress/gutenberg/pull/41057))
 
 #### Testing
-- Add eslint warning about use of waitForTimeout to playwright eslint. ([40802](https://github.com/WordPress/gutenberg/pull/40802))
-- Comment Template: Reorganize block tests to ease backport process. ([40739](https://github.com/WordPress/gutenberg/pull/40739))
-- Fix: Env unit test fails on Windows. ([41070](https://github.com/WordPress/gutenberg/pull/41070))
-- Migrate 'block-locking' to Playwright. ([41050](https://github.com/WordPress/gutenberg/pull/41050))
-- Migrate and refactor image block end-to-end tests to Playwright. ([40804](https://github.com/WordPress/gutenberg/pull/40804))
-- Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
-- Reorganize playwright utils and make canvas utils usable in the site editor. ([40815](https://github.com/WordPress/gutenberg/pull/40815))
-- Setup user-event inline once per test. ([40839](https://github.com/WordPress/gutenberg/pull/40839))
-- Test block insertion after title post blur. ([32944](https://github.com/WordPress/gutenberg/pull/32944))
-- Tests: Remove comment template unit tests. ([40965](https://github.com/WordPress/gutenberg/pull/40965))
+
+-   Add eslint warning about use of waitForTimeout to playwright eslint. ([40802](https://github.com/WordPress/gutenberg/pull/40802))
+-   Comment Template: Reorganize block tests to ease backport process. ([40739](https://github.com/WordPress/gutenberg/pull/40739))
+-   Fix: Env unit test fails on Windows. ([41070](https://github.com/WordPress/gutenberg/pull/41070))
+-   Migrate 'block-locking' to Playwright. ([41050](https://github.com/WordPress/gutenberg/pull/41050))
+-   Migrate and refactor image block end-to-end tests to Playwright. ([40804](https://github.com/WordPress/gutenberg/pull/40804))
+-   Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
+-   Reorganize playwright utils and make canvas utils usable in the site editor. ([40815](https://github.com/WordPress/gutenberg/pull/40815))
+-   Setup user-event inline once per test. ([40839](https://github.com/WordPress/gutenberg/pull/40839))
+-   Test block insertion after title post blur. ([32944](https://github.com/WordPress/gutenberg/pull/32944))
+-   Tests: Remove comment template unit tests. ([40965](https://github.com/WordPress/gutenberg/pull/40965))
 
 #### npm Packages
-- Packages: Add GitHub workflow for publishing to npm. ([40976](https://github.com/WordPress/gutenberg/pull/40976))
-- Packages: Add more npm release types to the GitHub workflow. ([41046](https://github.com/WordPress/gutenberg/pull/41046))
+
+-   Packages: Add GitHub workflow for publishing to npm. ([40976](https://github.com/WordPress/gutenberg/pull/40976))
+-   Packages: Add more npm release types to the GitHub workflow. ([41046](https://github.com/WordPress/gutenberg/pull/41046))
 
 #### Build Tooling
-- Build Tools: Update actions/setup-node GitHub action. ([40816](https://github.com/WordPress/gutenberg/pull/40816))
-
-#### Block Library
-- Add: Raw handling to the new list block. ([39954](https://github.com/WordPress/gutenberg/pull/39954))
-- Add: Space to indent list item. ([39949](https://github.com/WordPress/gutenberg/pull/39949))
-- Gallery block: Fix bug with initial image size. ([41079](https://github.com/WordPress/gutenberg/pull/41079))
-- Gallery block: Include image caption when converting a classic block gallery. ([40872](https://github.com/WordPress/gutenberg/pull/40872))
-- Heading block - add font family support. ([40970](https://github.com/WordPress/gutenberg/pull/40970))
-- Mark Table of Contents block as experimental using `block.json` flag. ([40905](https://github.com/WordPress/gutenberg/pull/40905))
-- Only allow template part to be replaced if its a header or footer. ([40787](https://github.com/WordPress/gutenberg/pull/40787))
-- Post Author block: Hide select author controle if there is no postId. ([40910](https://github.com/WordPress/gutenberg/pull/40910))
-- Search Block: Remove id attribute from svg. ([40828](https://github.com/WordPress/gutenberg/pull/40828))
-- Separator Block: Add border property for dots style to editor stylesheet. ([40855](https://github.com/WordPress/gutenberg/pull/40855))
-- ToC block: Re-enable + use static markup and only support core Heading and Page Break blocks. ([29739](https://github.com/WordPress/gutenberg/pull/29739))
-- Try a single icon for title blocks. ([40596](https://github.com/WordPress/gutenberg/pull/40596))
+
+-   Build Tools: Update actions/setup-node GitHub action. ([40816](https://github.com/WordPress/gutenberg/pull/40816))
+
+#### Block Library
+
+-   Add: Raw handling to the new list block. ([39954](https://github.com/WordPress/gutenberg/pull/39954))
+-   Add: Space to indent list item. ([39949](https://github.com/WordPress/gutenberg/pull/39949))
+-   Gallery block: Fix bug with initial image size. ([41079](https://github.com/WordPress/gutenberg/pull/41079))
+-   Gallery block: Include image caption when converting a classic block gallery. ([40872](https://github.com/WordPress/gutenberg/pull/40872))
+-   Heading block - add font family support. ([40970](https://github.com/WordPress/gutenberg/pull/40970))
+-   Mark Table of Contents block as experimental using `block.json` flag. ([40905](https://github.com/WordPress/gutenberg/pull/40905))
+-   Only allow template part to be replaced if its a header or footer. ([40787](https://github.com/WordPress/gutenberg/pull/40787))
+-   Post Author block: Hide select author controle if there is no postId. ([40910](https://github.com/WordPress/gutenberg/pull/40910))
+-   Search Block: Remove id attribute from svg. ([40828](https://github.com/WordPress/gutenberg/pull/40828))
+-   Separator Block: Add border property for dots style to editor stylesheet. ([40855](https://github.com/WordPress/gutenberg/pull/40855))
+-   ToC block: Re-enable + use static markup and only support core Heading and Page Break blocks. ([29739](https://github.com/WordPress/gutenberg/pull/29739))
+-   Try a single icon for title blocks. ([40596](https://github.com/WordPress/gutenberg/pull/40596))
 
 #### Data Layer
-- Add suspense support to the data module. ([37261](https://github.com/WordPress/gutenberg/pull/37261))
-- useSelect: Add unit tests for usage without deps. ([40732](https://github.com/WordPress/gutenberg/pull/40732))
+
+-   Add suspense support to the data module. ([37261](https://github.com/WordPress/gutenberg/pull/37261))
+-   useSelect: Add unit tests for usage without deps. ([40732](https://github.com/WordPress/gutenberg/pull/40732))
 
 #### Components
-- Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. ([40985](https://github.com/WordPress/gutenberg/pull/40985))
+
+-   Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. ([40985](https://github.com/WordPress/gutenberg/pull/40985))
 
 #### Global Styles
-- Theme Json: Don't output double selectors for elements inside blocks. ([40889](https://github.com/WordPress/gutenberg/pull/40889))
 
-#### Design Tools
-- Button: Add text transform control. ([40858](https://github.com/WordPress/gutenberg/pull/40858))
+-   Theme Json: Don't output double selectors for elements inside blocks. ([40889](https://github.com/WordPress/gutenberg/pull/40889))
 
+#### Design Tools
 
-## First time contributors
+-   Button: Add text transform control. ([40858](https://github.com/WordPress/gutenberg/pull/40858))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @anomiex: dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
-- @damiencarbery: Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
-- @JessicaGosselin: Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
-- @luminuu: Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
-- @n3f: env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
-- @SavPhill: Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
-- @shanjidah: Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
-- @tomjdv: Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
+The following PRs were merged by first-time contributors:
 
+-   @anomiex: dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. ([34969](https://github.com/WordPress/gutenberg/pull/34969))
+-   @damiencarbery: Typo - enqueue to enqueued. ([40880](https://github.com/WordPress/gutenberg/pull/40880))
+-   @JessicaGosselin: Fix typo in `Panel` readme. ([41111](https://github.com/WordPress/gutenberg/pull/41111))
+-   @luminuu: Create single template via site editor if not existing. ([40830](https://github.com/WordPress/gutenberg/pull/40830))
+-   @n3f: env :: Support ssh protocol for github repos. ([40451](https://github.com/WordPress/gutenberg/pull/40451))
+-   @SavPhill: Update broken links. ([41071](https://github.com/WordPress/gutenberg/pull/41071))
+-   @shanjidah: Migrated popovers.test.js to Playwright. ([39910](https://github.com/WordPress/gutenberg/pull/39910))
+-   @tomjdv: Corrected the order in the code tabs. ([40569](https://github.com/WordPress/gutenberg/pull/40569))
 
 ## Contributors
 
@@ -5172,15 +29364,13 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @Addison-Stavlo @alexstine @amustaque97 @andrewserong @anomiex @aristath @c4rl0sbr4v0 @carolinan @ciampo @damiencarbery @DAreRodz @dcalhoun @draganescu @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gziolo @jameskoster @JessicaGosselin @jffng @jhnstn @jorgefilipecosta @jostnes @jsnajdr @kevin940726 @luisherranz @luminuu @Mamaduka @mauriac @mchowning @mcsf @michalczaplinski @mikachan @n3f @noisysocks @ntsekouras @ockham @ramonjd @SavPhill @scruffian @shanjidah @SiobhyB @Soean @spacedmonkey @t-hamano @talldan @tomasztunik @tomjdv @walbo @youknowriad @ZebulanStanphill
 
-
 = 13.2.1 =
 
 ## Changelog
 
 ### Bug Fixes
 
-- Fix the position of the block inserter in between blocks ([40919](https://github.com/WordPress/gutenberg/pull/40919)) 
-
+-   Fix the position of the block inserter in between blocks ([40919](https://github.com/WordPress/gutenberg/pull/40919))
 
 = 13.2.0 =
 
@@ -5188,299 +29378,297 @@ The following contributors merged PRs in this release:
 
 ### Features
 
-- Add new preferences persistence API, and save editor preferences in user meta. ([39795](https://github.com/WordPress/gutenberg/pull/39795))
+-   Add new preferences persistence API, and save editor preferences in user meta. ([39795](https://github.com/WordPress/gutenberg/pull/39795))
 
 ### Enhancements
 
-- Add visualizers for padding and margin for all blocks. ([40505](https://github.com/WordPress/gutenberg/pull/40505))
-- Remove the spotlight mode from template parts. ([40652](https://github.com/WordPress/gutenberg/pull/40652))
+-   Add visualizers for padding and margin for all blocks. ([40505](https://github.com/WordPress/gutenberg/pull/40505))
+-   Remove the spotlight mode from template parts. ([40652](https://github.com/WordPress/gutenberg/pull/40652))
 
 #### Block Library
 
-- Placeholders:
-  - Update post content placeholder. ([40177](https://github.com/WordPress/gutenberg/pull/40177))
-  - Update the placeholder for post excerpt. ([40178](https://github.com/WordPress/gutenberg/pull/40178))
-  - Add placeholder to Post Comments block. ([40484](https://github.com/WordPress/gutenberg/pull/40484))
-  - Improve the logic for warnings for Post Comments Form placeholder. ([40563](https://github.com/WordPress/gutenberg/pull/40563))
-  - Post Comments Form: Add "proper" visual representation in the editor. ([40368](https://github.com/WordPress/gutenberg/pull/40368))
-- Comments Query Loop: Add Post Comments Form block to Comments Query Loop template. ([40256](https://github.com/WordPress/gutenberg/pull/40256))
-- Post Comments block: Enqueue comment-reply script. ([40366](https://github.com/WordPress/gutenberg/pull/40366))
-- Cover: Avoid unnecessary wrapping when transformed from Group. ([40602](https://github.com/WordPress/gutenberg/pull/40602))
-- Quote v2: Implement exiting on Enter at end. ([39911](https://github.com/WordPress/gutenberg/pull/39911))
-- Separator Block: Add top & bottom margin support. ([40551](https://github.com/WordPress/gutenberg/pull/40551))
+-   Placeholders:
+    -   Update post content placeholder. ([40177](https://github.com/WordPress/gutenberg/pull/40177))
+    -   Update the placeholder for post excerpt. ([40178](https://github.com/WordPress/gutenberg/pull/40178))
+    -   Add placeholder to Post Comments block. ([40484](https://github.com/WordPress/gutenberg/pull/40484))
+    -   Improve the logic for warnings for Post Comments Form placeholder. ([40563](https://github.com/WordPress/gutenberg/pull/40563))
+    -   Post Comments Form: Add "proper" visual representation in the editor. ([40368](https://github.com/WordPress/gutenberg/pull/40368))
+-   Comments Query Loop: Add Post Comments Form block to Comments Query Loop template. ([40256](https://github.com/WordPress/gutenberg/pull/40256))
+-   Post Comments block: Enqueue comment-reply script. ([40366](https://github.com/WordPress/gutenberg/pull/40366))
+-   Cover: Avoid unnecessary wrapping when transformed from Group. ([40602](https://github.com/WordPress/gutenberg/pull/40602))
+-   Quote v2: Implement exiting on Enter at end. ([39911](https://github.com/WordPress/gutenberg/pull/39911))
+-   Separator Block: Add top & bottom margin support. ([40551](https://github.com/WordPress/gutenberg/pull/40551))
 
 #### Components
 
-- Fix async timing in tests using `user-event`. ([40790](https://github.com/WordPress/gutenberg/pull/40790))
-- Add flag for larger default size. (InputControl:  [40622](https://github.com/WordPress/gutenberg/pull/40622), UnitControl: [40627](https://github.com/WordPress/gutenberg/pull/40627))
+-   Fix async timing in tests using `user-event`. ([40790](https://github.com/WordPress/gutenberg/pull/40790))
+-   Add flag for larger default size. (InputControl: [40622](https://github.com/WordPress/gutenberg/pull/40622), UnitControl: [40627](https://github.com/WordPress/gutenberg/pull/40627))
 
 #### Site Editor
 
-- Use default cursor for non-editable text blocks. ([40785](https://github.com/WordPress/gutenberg/pull/40785))
+-   Use default cursor for non-editable text blocks. ([40785](https://github.com/WordPress/gutenberg/pull/40785))
 
 #### Block Editor
 
-- Show add pattern label when patterns are being prioritised. ([40598](https://github.com/WordPress/gutenberg/pull/40598))
-- Improve button spacing in the top right corner of the editor. ([40411](https://github.com/WordPress/gutenberg/pull/40411))
+-   Show add pattern label when patterns are being prioritised. ([40598](https://github.com/WordPress/gutenberg/pull/40598))
+-   Improve button spacing in the top right corner of the editor. ([40411](https://github.com/WordPress/gutenberg/pull/40411))
 
 #### Document Settings
 
-- Design tweaks to Post Visibility popover. ([40530](https://github.com/WordPress/gutenberg/pull/40530))
+-   Design tweaks to Post Visibility popover. ([40530](https://github.com/WordPress/gutenberg/pull/40530))
 
 #### Global Styles
 
-- Global Styles Sidebar: Tweak separator margin. ([40526](https://github.com/WordPress/gutenberg/pull/40526))
+-   Global Styles Sidebar: Tweak separator margin. ([40526](https://github.com/WordPress/gutenberg/pull/40526))
 
 #### Webfonts
 
-- Register all fonts before enqueing any. ([40489](https://github.com/WordPress/gutenberg/pull/40489))
-- Turn off WP 6.0 stopgap handler to use Webfonts API. ([40555](https://github.com/WordPress/gutenberg/pull/40555))
+-   Register all fonts before enqueing any. ([40489](https://github.com/WordPress/gutenberg/pull/40489))
+-   Turn off WP 6.0 stopgap handler to use Webfonts API. ([40555](https://github.com/WordPress/gutenberg/pull/40555))
 
 #### Block API
 
-- Allow using a custom domainpath for viewscripts. ([40136](https://github.com/WordPress/gutenberg/pull/40136))
-- Add `settings` hook. ([40547](https://github.com/WordPress/gutenberg/pull/40547))
+-   Allow using a custom domainpath for viewscripts. ([40136](https://github.com/WordPress/gutenberg/pull/40136))
+-   Add `settings` hook. ([40547](https://github.com/WordPress/gutenberg/pull/40547))
 
 #### Post Editor
 
-- Editor: Refactor PostFeaturedImage component to improve uploading state ([40126](https://github.com/WordPress/gutenberg/pull/40126))
+-   Editor: Refactor PostFeaturedImage component to improve uploading state ([40126](https://github.com/WordPress/gutenberg/pull/40126))
 
 ### Bug Fixes
 
 #### Block Library
 
-- Audio: Correctly handle drag and drop upload errors. ([40623](https://github.com/WordPress/gutenberg/pull/40623))
-- Comments:
-  - Comment Content: Show moderation message. ([40612](https://github.com/WordPress/gutenberg/pull/40612))
-  - Comment Template: With pagination, make sure to request page 1 if there are no comments. ([40759](https://github.com/WordPress/gutenberg/pull/40759))
-  - Comments Title: Count toggle working in 'Singular' editing mode (fix). ([40728](https://github.com/WordPress/gutenberg/pull/40728))
-  - Comments block: Fix glitches found while backporting. ([40628](https://github.com/WordPress/gutenberg/pull/40628))
-  - Fix alignment issue with comment author name. ([40610](https://github.com/WordPress/gutenberg/pull/40610))
-  - Fix alignment issue with the comment edit link. ([40584](https://github.com/WordPress/gutenberg/pull/40584))
-  - Fix alignment issue with the comment reply link. ([40582](https://github.com/WordPress/gutenberg/pull/40582))
-  - Fix an alignment issue with the post comments form. ([40613](https://github.com/WordPress/gutenberg/pull/40613))
-  - Fix style comment awaiting moderation indentation. ([40681](https://github.com/WordPress/gutenberg/pull/40681))
-  - Prevent comments rendering on password protected posts. ([40755](https://github.com/WordPress/gutenberg/pull/40755))
-  - Display paragraph breaks in comment contents block.. ([40667](https://github.com/WordPress/gutenberg/pull/40667))
-  - Prevent spam links of author's name in pending moderation comments. ([40702](https://github.com/WordPress/gutenberg/pull/40702))
-- Cover Block: Fix focal point error when the Featured Image is applied. ([40643](https://github.com/WordPress/gutenberg/pull/40643))
-- Cover: Avoid adding a wrapper Group block when transforming to Group, where possible. ([40293](https://github.com/WordPress/gutenberg/pull/40293))
-- Cover Block: Fixed iOS bug handling background-attachment to properly work with iOS 13+. ([40087](https://github.com/WordPress/gutenberg/pull/40087))
-- Navigation block "Open on click": Inherit font style and font weight. ([40671](https://github.com/WordPress/gutenberg/pull/40671))
-- Post Author: Switch byline to use kses so that rich text elements are rendered correctly. ([40776](https://github.com/WordPress/gutenberg/pull/40776))
-- Latest Post: Fix regression with featured images in latest posts. ([40662](https://github.com/WordPress/gutenberg/pull/40662))
-- Video: Fix drag and drop upload error state. ([40552](https://github.com/WordPress/gutenberg/pull/40552))
-- Heading: Include text alignment when transforming from paragraph to header and back. ([40709](https://github.com/WordPress/gutenberg/pull/40709))
-- No Results: Remove a typo from the no results block. ([40573](https://github.com/WordPress/gutenberg/pull/40573))
+-   Audio: Correctly handle drag and drop upload errors. ([40623](https://github.com/WordPress/gutenberg/pull/40623))
+-   Comments:
+    -   Comment Content: Show moderation message. ([40612](https://github.com/WordPress/gutenberg/pull/40612))
+    -   Comment Template: With pagination, make sure to request page 1 if there are no comments. ([40759](https://github.com/WordPress/gutenberg/pull/40759))
+    -   Comments Title: Count toggle working in 'Singular' editing mode (fix). ([40728](https://github.com/WordPress/gutenberg/pull/40728))
+    -   Comments block: Fix glitches found while backporting. ([40628](https://github.com/WordPress/gutenberg/pull/40628))
+    -   Fix alignment issue with comment author name. ([40610](https://github.com/WordPress/gutenberg/pull/40610))
+    -   Fix alignment issue with the comment edit link. ([40584](https://github.com/WordPress/gutenberg/pull/40584))
+    -   Fix alignment issue with the comment reply link. ([40582](https://github.com/WordPress/gutenberg/pull/40582))
+    -   Fix an alignment issue with the post comments form. ([40613](https://github.com/WordPress/gutenberg/pull/40613))
+    -   Fix style comment awaiting moderation indentation. ([40681](https://github.com/WordPress/gutenberg/pull/40681))
+    -   Prevent comments rendering on password protected posts. ([40755](https://github.com/WordPress/gutenberg/pull/40755))
+    -   Display paragraph breaks in comment contents block.. ([40667](https://github.com/WordPress/gutenberg/pull/40667))
+    -   Prevent spam links of author's name in pending moderation comments. ([40702](https://github.com/WordPress/gutenberg/pull/40702))
+-   Cover Block: Fix focal point error when the Featured Image is applied. ([40643](https://github.com/WordPress/gutenberg/pull/40643))
+-   Cover: Avoid adding a wrapper Group block when transforming to Group, where possible. ([40293](https://github.com/WordPress/gutenberg/pull/40293))
+-   Cover Block: Fixed iOS bug handling background-attachment to properly work with iOS 13+. ([40087](https://github.com/WordPress/gutenberg/pull/40087))
+-   Navigation block "Open on click": Inherit font style and font weight. ([40671](https://github.com/WordPress/gutenberg/pull/40671))
+-   Post Author: Switch byline to use kses so that rich text elements are rendered correctly. ([40776](https://github.com/WordPress/gutenberg/pull/40776))
+-   Latest Post: Fix regression with featured images in latest posts. ([40662](https://github.com/WordPress/gutenberg/pull/40662))
+-   Video: Fix drag and drop upload error state. ([40552](https://github.com/WordPress/gutenberg/pull/40552))
+-   Heading: Include text alignment when transforming from paragraph to header and back. ([40709](https://github.com/WordPress/gutenberg/pull/40709))
+-   No Results: Remove a typo from the no results block. ([40573](https://github.com/WordPress/gutenberg/pull/40573))
 
 #### Components
 
-- UnitControl
-  - Avoid calling onChange callback twice when unit changes. ([40796](https://github.com/WordPress/gutenberg/pull/40796))
-  - Show unit label when `units` prop has only one unit. ([40784](https://github.com/WordPress/gutenberg/pull/40784))
-- Gradient Tool: Fix closing of popover when the angle control is clicked. ([40735](https://github.com/WordPress/gutenberg/pull/40735))
-- Simpler clear button ([40437](https://github.com/WordPress/gutenberg/pull/40437))
+-   UnitControl
+    -   Avoid calling onChange callback twice when unit changes. ([40796](https://github.com/WordPress/gutenberg/pull/40796))
+    -   Show unit label when `units` prop has only one unit. ([40784](https://github.com/WordPress/gutenberg/pull/40784))
+-   Gradient Tool: Fix closing of popover when the angle control is clicked. ([40735](https://github.com/WordPress/gutenberg/pull/40735))
+-   Simpler clear button ([40437](https://github.com/WordPress/gutenberg/pull/40437))
 
 #### Block Editor
 
-- Fix dragging in inspector causing block deselection. ([40604](https://github.com/WordPress/gutenberg/pull/40604))
-- [RichText]: Ignore selection changes on non contentEditable nodes. ([40611](https://github.com/WordPress/gutenberg/pull/40611))
-- [Writing Flow]: Try to fix multi-selection with `shift+click`. ([40687](https://github.com/WordPress/gutenberg/pull/40687))
-- Fix the styles compatibility hook for the editor iframes. ([40842](https://github.com/WordPress/gutenberg/pull/40842))
+-   Fix dragging in inspector causing block deselection. ([40604](https://github.com/WordPress/gutenberg/pull/40604))
+-   [RichText]: Ignore selection changes on non contentEditable nodes. ([40611](https://github.com/WordPress/gutenberg/pull/40611))
+-   [Writing Flow]: Try to fix multi-selection with `shift+click`. ([40687](https://github.com/WordPress/gutenberg/pull/40687))
+-   Fix the styles compatibility hook for the editor iframes. ([40842](https://github.com/WordPress/gutenberg/pull/40842))
 
 #### Patterns
 
-- Fix core 'Featured' pattern category registration. ([40650](https://github.com/WordPress/gutenberg/pull/40650))
-- Fix: Page patterns don't show when only one pattern is available. ([40707](https://github.com/WordPress/gutenberg/pull/40707))
+-   Fix core 'Featured' pattern category registration. ([40650](https://github.com/WordPress/gutenberg/pull/40650))
+-   Fix: Page patterns don't show when only one pattern is available. ([40707](https://github.com/WordPress/gutenberg/pull/40707))
 
 #### Block Locking
 
-- Avoid 'lock' attribute registration warning. ([40654](https://github.com/WordPress/gutenberg/pull/40654))
-- Register the 'lock' attribute on the server. ([40468](https://github.com/WordPress/gutenberg/pull/40468))
+-   Avoid 'lock' attribute registration warning. ([40654](https://github.com/WordPress/gutenberg/pull/40654))
+-   Register the 'lock' attribute on the server. ([40468](https://github.com/WordPress/gutenberg/pull/40468))
 
 #### Code Editor
 
-- Commit changes upon switching editors to avoid content loss. ([40730](https://github.com/WordPress/gutenberg/pull/40730))
+-   Commit changes upon switching editors to avoid content loss. ([40730](https://github.com/WordPress/gutenberg/pull/40730))
 
 #### Navigation Menu Sidebar
 
-- Fix Nav Sidebar Site Editor error. ([40722](https://github.com/WordPress/gutenberg/pull/40722))
-- Close overlay menu when clicking an anchor link. ([39625](https://github.com/WordPress/gutenberg/pull/39625))
+-   Fix Nav Sidebar Site Editor error. ([40722](https://github.com/WordPress/gutenberg/pull/40722))
+-   Close overlay menu when clicking an anchor link. ([39625](https://github.com/WordPress/gutenberg/pull/39625))
 
 #### Icons
 
-- Fix/block meta icon prop errors. ([40710](https://github.com/WordPress/gutenberg/pull/40710))
-- Fix the Icon component mobile icon. ([40748](https://github.com/WordPress/gutenberg/pull/40748))
+-   Fix/block meta icon prop errors. ([40710](https://github.com/WordPress/gutenberg/pull/40710))
+-   Fix the Icon component mobile icon. ([40748](https://github.com/WordPress/gutenberg/pull/40748))
 
 #### Global Styles
 
-- Element styles: Prevent the WordPress filter callback from being executed. ([40594](https://github.com/WordPress/gutenberg/pull/40594))
-- Global Styles Sidebar: Fix nav header styles and semantics. ([40592](https://github.com/WordPress/gutenberg/pull/40592))
-- Global Styles Sidebar: Tweak spacing. ([40588](https://github.com/WordPress/gutenberg/pull/40588))
+-   Element styles: Prevent the WordPress filter callback from being executed. ([40594](https://github.com/WordPress/gutenberg/pull/40594))
+-   Global Styles Sidebar: Fix nav header styles and semantics. ([40592](https://github.com/WordPress/gutenberg/pull/40592))
+-   Global Styles Sidebar: Tweak spacing. ([40588](https://github.com/WordPress/gutenberg/pull/40588))
 
 #### Data Layer
 
-- useSelect: Prevent nested component update after unmount. ([40677](https://github.com/WordPress/gutenberg/pull/40677))
-- core-data: Change "include" type in getQueryParts. ([40570](https://github.com/WordPress/gutenberg/pull/40570))
+-   useSelect: Prevent nested component update after unmount. ([40677](https://github.com/WordPress/gutenberg/pull/40677))
+-   core-data: Change "include" type in getQueryParts. ([40570](https://github.com/WordPress/gutenberg/pull/40570))
 
 #### Themes
 
-- Theme Export: Bug: Add .DS_Store to the list of ignored files. ([40539](https://github.com/WordPress/gutenberg/pull/40539))
+-   Theme Export: Bug: Add .DS_Store to the list of ignored files. ([40539](https://github.com/WordPress/gutenberg/pull/40539))
 
 #### Reusable Blocks
 
-- Fix template part / reusable block click through on non-safari browsers. ([40339](https://github.com/WordPress/gutenberg/pull/40339))
+-   Fix template part / reusable block click through on non-safari browsers. ([40339](https://github.com/WordPress/gutenberg/pull/40339))
 
 #### Block API
 
-- Check that a transform matches at the time of running the transform. ([40497](https://github.com/WordPress/gutenberg/pull/40497))
+-   Check that a transform matches at the time of running the transform. ([40497](https://github.com/WordPress/gutenberg/pull/40497))
 
 ### Accessibility
 
 #### Components
 
-- Improve tools panel accessibility. ([40716](https://github.com/WordPress/gutenberg/pull/40716))
+-   Improve tools panel accessibility. ([40716](https://github.com/WordPress/gutenberg/pull/40716))
 
 #### Block Editor
 
-- URLInput now always has an ID and accessible label. ([40310](https://github.com/WordPress/gutenberg/pull/40310))
+-   URLInput now always has an ID and accessible label. ([40310](https://github.com/WordPress/gutenberg/pull/40310))
 
 #### Block Library
 
-- Post Comments block: Fix missing label in placeholder. ([40527](https://github.com/WordPress/gutenberg/pull/40527))
+-   Post Comments block: Fix missing label in placeholder. ([40527](https://github.com/WordPress/gutenberg/pull/40527))
 
 ### Performance
 
 #### Block Editor
 
-- getBlockTransformItems: Support single block object. ([40718](https://github.com/WordPress/gutenberg/pull/40718))
+-   getBlockTransformItems: Support single block object. ([40718](https://github.com/WordPress/gutenberg/pull/40718))
 
 #### Block Library
 
-- Navigation Link: Avoid unnecessary re-renders. ([40696](https://github.com/WordPress/gutenberg/pull/40696))
-- Navigation: Improve selector performance. ([40700](https://github.com/WordPress/gutenberg/pull/40700))
+-   Navigation Link: Avoid unnecessary re-renders. ([40696](https://github.com/WordPress/gutenberg/pull/40696))
+-   Navigation: Improve selector performance. ([40700](https://github.com/WordPress/gutenberg/pull/40700))
 
 ### Experiments
 
 #### CSS & Styling
 
-- Style Engine: Add typography and color to backend. ([40332](https://github.com/WordPress/gutenberg/pull/40332))
+-   Style Engine: Add typography and color to backend. ([40332](https://github.com/WordPress/gutenberg/pull/40332))
 
 ### Documentation
 
-- Docs: Omit name from settings object in registerPlugin. ([40629](https://github.com/WordPress/gutenberg/pull/40629))
-- Docs: Update the Block Metadata title. ([40482](https://github.com/WordPress/gutenberg/pull/40482))
-- Fix ColorPalette component's documentation. ([40620](https://github.com/WordPress/gutenberg/pull/40620))
-- Fix indentation inconsistency in documentation for block variations. ([40515](https://github.com/WordPress/gutenberg/pull/40515))
-- Fix broken links. ([40578](https://github.com/WordPress/gutenberg/pull/40578))
+-   Docs: Omit name from settings object in registerPlugin. ([40629](https://github.com/WordPress/gutenberg/pull/40629))
+-   Docs: Update the Block Metadata title. ([40482](https://github.com/WordPress/gutenberg/pull/40482))
+-   Fix ColorPalette component's documentation. ([40620](https://github.com/WordPress/gutenberg/pull/40620))
+-   Fix indentation inconsistency in documentation for block variations. ([40515](https://github.com/WordPress/gutenberg/pull/40515))
+-   Fix broken links. ([40578](https://github.com/WordPress/gutenberg/pull/40578))
 
 #### Components
 
-- Add TypeScript refactor guidelines. ([40153](https://github.com/WordPress/gutenberg/pull/40153))
-- InputControl: Remove default value argument from Storybook. ([40410](https://github.com/WordPress/gutenberg/pull/40410))
-- Components: Fix error in CONTRIBUTING guide. ([40682](https://github.com/WordPress/gutenberg/pull/40682))
-- Components: Update changelog for [#40735](https://github.com/WordPress/gutenberg/pull/40735). ([40797](https://github.com/WordPress/gutenberg/pull/40797))
-- Fix/typos in documentation. ([40579](https://github.com/WordPress/gutenberg/pull/40579))
+-   Add TypeScript refactor guidelines. ([40153](https://github.com/WordPress/gutenberg/pull/40153))
+-   InputControl: Remove default value argument from Storybook. ([40410](https://github.com/WordPress/gutenberg/pull/40410))
+-   Components: Fix error in CONTRIBUTING guide. ([40682](https://github.com/WordPress/gutenberg/pull/40682))
+-   Components: Update changelog for [#40735](https://github.com/WordPress/gutenberg/pull/40735). ([40797](https://github.com/WordPress/gutenberg/pull/40797))
+-   Fix/typos in documentation. ([40579](https://github.com/WordPress/gutenberg/pull/40579))
 
 #### Themes
 
-- Adding schema info to theme.json reference. ([40599](https://github.com/WordPress/gutenberg/pull/40599))
+-   Adding schema info to theme.json reference. ([40599](https://github.com/WordPress/gutenberg/pull/40599))
 
 ### Code Quality
 
-- Block Editor: Deprecate 'BlockColorsStyleSelector' component. ([40502](https://github.com/WordPress/gutenberg/pull/40502))
-- Global Styles Sidebar: Rename `NavigationButton` so semantics are clearer. ([40590](https://github.com/WordPress/gutenberg/pull/40590))
-- Handle promise rejections from preferences persistence if the user is offline or the REST API errors. ([40641](https://github.com/WordPress/gutenberg/pull/40641))
-- Improve the useDisabled hook and Disabled component. ([40631](https://github.com/WordPress/gutenberg/pull/40631))
-- Preferences persistence - mark modified property as not readonly in schema. ([40637](https://github.com/WordPress/gutenberg/pull/40637))
-- Preferences: Improve initial configuration for the new persistence package. ([40715](https://github.com/WordPress/gutenberg/pull/40715))
-- Remove padding prop from popover. ([40544](https://github.com/WordPress/gutenberg/pull/40544))
+-   Block Editor: Deprecate 'BlockColorsStyleSelector' component. ([40502](https://github.com/WordPress/gutenberg/pull/40502))
+-   Global Styles Sidebar: Rename `NavigationButton` so semantics are clearer. ([40590](https://github.com/WordPress/gutenberg/pull/40590))
+-   Handle promise rejections from preferences persistence if the user is offline or the REST API errors. ([40641](https://github.com/WordPress/gutenberg/pull/40641))
+-   Improve the useDisabled hook and Disabled component. ([40631](https://github.com/WordPress/gutenberg/pull/40631))
+-   Preferences persistence - mark modified property as not readonly in schema. ([40637](https://github.com/WordPress/gutenberg/pull/40637))
+-   Preferences: Improve initial configuration for the new persistence package. ([40715](https://github.com/WordPress/gutenberg/pull/40715))
+-   Remove padding prop from popover. ([40544](https://github.com/WordPress/gutenberg/pull/40544))
 
 #### Components
 
-- Add `DatePicker` tests using React Testing Library. ([40754](https://github.com/WordPress/gutenberg/pull/40754))
-- Borders: Remove unused BorderStyleControl component. ([40635](https://github.com/WordPress/gutenberg/pull/40635))
-- Migrate `ConfirmDialog` component's Stories from knobs to controls. ([40164](https://github.com/WordPress/gutenberg/pull/40164))
-- SelectControl: Finish typescript migration. ([40737](https://github.com/WordPress/gutenberg/pull/40737))
-- [components] Use internal `Icon` component for `ToggleGroupControlOptionIcon`. ([40717](https://github.com/WordPress/gutenberg/pull/40717))
-- TextControl: Covert component to TypeScript. ([40633](https://github.com/WordPress/gutenberg/pull/40633))
-
+-   Add `DatePicker` tests using React Testing Library. ([40754](https://github.com/WordPress/gutenberg/pull/40754))
+-   Borders: Remove unused BorderStyleControl component. ([40635](https://github.com/WordPress/gutenberg/pull/40635))
+-   Migrate `ConfirmDialog` component's Stories from knobs to controls. ([40164](https://github.com/WordPress/gutenberg/pull/40164))
+-   SelectControl: Finish typescript migration. ([40737](https://github.com/WordPress/gutenberg/pull/40737))
+-   [components] Use internal `Icon` component for `ToggleGroupControlOptionIcon`. ([40717](https://github.com/WordPress/gutenberg/pull/40717))
+-   TextControl: Covert component to TypeScript. ([40633](https://github.com/WordPress/gutenberg/pull/40633))
 
 #### Block Library
 
-- Comments Query Loop block: Rename to Comments (but keep ID). ([40763](https://github.com/WordPress/gutenberg/pull/40763))
-- Post Comments Form Block: Mark as stable. ([40452](https://github.com/WordPress/gutenberg/pull/40452))
-- Remove Navigation Area block. ([40645](https://github.com/WordPress/gutenberg/pull/40645))
-- Remove testid and update tests. ([40534](https://github.com/WordPress/gutenberg/pull/40534))
-- Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form. ([40560](https://github.com/WordPress/gutenberg/pull/40560))
+-   Comments Query Loop block: Rename to Comments (but keep ID). ([40763](https://github.com/WordPress/gutenberg/pull/40763))
+-   Post Comments Form Block: Mark as stable. ([40452](https://github.com/WordPress/gutenberg/pull/40452))
+-   Remove Navigation Area block. ([40645](https://github.com/WordPress/gutenberg/pull/40645))
+-   Remove testid and update tests. ([40534](https://github.com/WordPress/gutenberg/pull/40534))
+-   Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form. ([40560](https://github.com/WordPress/gutenberg/pull/40560))
 
 #### Data Layer
 
-- useSelect: Improve transition from async to sync mode. ([40680](https://github.com/WordPress/gutenberg/pull/40680))
+-   useSelect: Improve transition from async to sync mode. ([40680](https://github.com/WordPress/gutenberg/pull/40680))
 
 #### List View
 
-- Rename list view prop `expandNested` to `isExpanded`. ([40731](https://github.com/WordPress/gutenberg/pull/40731))
-- Tidy list view props and deprecate `BlockNavigationDropdown`. ([40777](https://github.com/WordPress/gutenberg/pull/40777))
+-   Rename list view prop `expandNested` to `isExpanded`. ([40731](https://github.com/WordPress/gutenberg/pull/40731))
+-   Tidy list view props and deprecate `BlockNavigationDropdown`. ([40777](https://github.com/WordPress/gutenberg/pull/40777))
 
 #### Post Editor
 
-- Edit Post: Remove unused code. ([40499](https://github.com/WordPress/gutenberg/pull/40499))
+-   Edit Post: Remove unused code. ([40499](https://github.com/WordPress/gutenberg/pull/40499))
 
 #### Plugin
 
-- Remove experimental PWA support for WP-Admin. ([40475](https://github.com/WordPress/gutenberg/pull/40475))
+-   Remove experimental PWA support for WP-Admin. ([40475](https://github.com/WordPress/gutenberg/pull/40475))
 
 ### Tools
 
-- Remove [@mkaz](https://github.com/mkaz) from CODEOWNERS 😢. ([40685](https://github.com/WordPress/gutenberg/pull/40685))
-- Scripts: Add `--dist-tag` flag to the `packages-update` command. ([40514](https://github.com/WordPress/gutenberg/pull/40514))
-- Scripts: Remove broken `lint-md-js` command. ([40511](https://github.com/WordPress/gutenberg/pull/40511))
-- Scripts: Remove deprecated `format-js` command. ([40512](https://github.com/WordPress/gutenberg/pull/40512))
-- Update `oandregal` notifications. ([40549](https://github.com/WordPress/gutenberg/pull/40549))
-- Update native mobile wrangler in rich-text CODEOWNER. ([40783](https://github.com/WordPress/gutenberg/pull/40783))
-- Export hydrate in `@wordpress/element`. ([40723](https://github.com/WordPress/gutenberg/pull/40723))
+-   Remove [@mkaz](https://github.com/mkaz) from CODEOWNERS 😢. ([40685](https://github.com/WordPress/gutenberg/pull/40685))
+-   Scripts: Add `--dist-tag` flag to the `packages-update` command. ([40514](https://github.com/WordPress/gutenberg/pull/40514))
+-   Scripts: Remove broken `lint-md-js` command. ([40511](https://github.com/WordPress/gutenberg/pull/40511))
+-   Scripts: Remove deprecated `format-js` command. ([40512](https://github.com/WordPress/gutenberg/pull/40512))
+-   Update `oandregal` notifications. ([40549](https://github.com/WordPress/gutenberg/pull/40549))
+-   Update native mobile wrangler in rich-text CODEOWNER. ([40783](https://github.com/WordPress/gutenberg/pull/40783))
+-   Export hydrate in `@wordpress/element`. ([40723](https://github.com/WordPress/gutenberg/pull/40723))
 
 #### Storybook
 
-- Storybook: Make description-loader more reliable. ([40616](https://github.com/WordPress/gutenberg/pull/40616))
+-   Storybook: Make description-loader more reliable. ([40616](https://github.com/WordPress/gutenberg/pull/40616))
 
 #### Testing
 
-- Comment Template Unit Test: Cover odd/even classes. ([40471](https://github.com/WordPress/gutenberg/pull/40471))
-- Comments block end-to-end test: Remove now-obsolete Post Comments Form block. ([40793](https://github.com/WordPress/gutenberg/pull/40793))
-- Migrate Image Size to Playwright. ([40467](https://github.com/WordPress/gutenberg/pull/40467))
-- Migrate paragraph test to Playwright. ([40779](https://github.com/WordPress/gutenberg/pull/40779))
-- Refactor image-size test to follow Playwright's best practices. ([40644](https://github.com/WordPress/gutenberg/pull/40644))
-- Remove require editor hooks line from full-content test setup. ([40772](https://github.com/WordPress/gutenberg/pull/40772))
-- Tests: Restore real timers after using Jest's fake timers. ([40760](https://github.com/WordPress/gutenberg/pull/40760))
-- Update @testing-library/user-event to stable version (14.1.1). ([40761](https://github.com/WordPress/gutenberg/pull/40761))
-- [Automated Testing]: Fix partial selection copy flaky tests. ([40607](https://github.com/WordPress/gutenberg/pull/40607))
-- Retain Playwright end-to-end test's trace on failure on CI. ([40586](https://github.com/WordPress/gutenberg/pull/40586))
-- Rewrite UnitControl tests in TypeScript. ([40697](https://github.com/WordPress/gutenberg/pull/40697))
-- Fix `batchRest` not throwing errors in Playwright. ([40668](https://github.com/WordPress/gutenberg/pull/40668))
-- Fix replacing with undefined in stripAnsi. ([40384](https://github.com/WordPress/gutenberg/pull/40384))
-- Nav link block PHP tests replace prefixed function with non-prefixed. ([40657](https://github.com/WordPress/gutenberg/pull/40657))
-- Fix the html data is wrong in clipboard emulation in Playwright. ([40638](https://github.com/WordPress/gutenberg/pull/40638))
-- Fix incorrect results in the flaky tests reporter. ([40567](https://github.com/WordPress/gutenberg/pull/40567))
+-   Comment Template Unit Test: Cover odd/even classes. ([40471](https://github.com/WordPress/gutenberg/pull/40471))
+-   Comments block end-to-end test: Remove now-obsolete Post Comments Form block. ([40793](https://github.com/WordPress/gutenberg/pull/40793))
+-   Migrate Image Size to Playwright. ([40467](https://github.com/WordPress/gutenberg/pull/40467))
+-   Migrate paragraph test to Playwright. ([40779](https://github.com/WordPress/gutenberg/pull/40779))
+-   Refactor image-size test to follow Playwright's best practices. ([40644](https://github.com/WordPress/gutenberg/pull/40644))
+-   Remove require editor hooks line from full-content test setup. ([40772](https://github.com/WordPress/gutenberg/pull/40772))
+-   Tests: Restore real timers after using Jest's fake timers. ([40760](https://github.com/WordPress/gutenberg/pull/40760))
+-   Update @testing-library/user-event to stable version (14.1.1). ([40761](https://github.com/WordPress/gutenberg/pull/40761))
+-   [Automated Testing]: Fix partial selection copy flaky tests. ([40607](https://github.com/WordPress/gutenberg/pull/40607))
+-   Retain Playwright end-to-end test's trace on failure on CI. ([40586](https://github.com/WordPress/gutenberg/pull/40586))
+-   Rewrite UnitControl tests in TypeScript. ([40697](https://github.com/WordPress/gutenberg/pull/40697))
+-   Fix `batchRest` not throwing errors in Playwright. ([40668](https://github.com/WordPress/gutenberg/pull/40668))
+-   Fix replacing with undefined in stripAnsi. ([40384](https://github.com/WordPress/gutenberg/pull/40384))
+-   Nav link block PHP tests replace prefixed function with non-prefixed. ([40657](https://github.com/WordPress/gutenberg/pull/40657))
+-   Fix the html data is wrong in clipboard emulation in Playwright. ([40638](https://github.com/WordPress/gutenberg/pull/40638))
+-   Fix incorrect results in the flaky tests reporter. ([40567](https://github.com/WordPress/gutenberg/pull/40567))
 
 #### Build Tooling
 
-- Eslint: Add TypeScript tests and stories to development files. ([40504](https://github.com/WordPress/gutenberg/pull/40504))
-- Fix: npm script(dev:Package) is not working on Windows. ([40566](https://github.com/WordPress/gutenberg/pull/40566))
-- ESLint Plugin: Fix `recommended` preset when `prettier` is not installed. ([40634](https://github.com/WordPress/gutenberg/pull/40634))
-
-## First time contributors
+-   Eslint: Add TypeScript tests and stories to development files. ([40504](https://github.com/WordPress/gutenberg/pull/40504))
+-   Fix: npm script(dev:Package) is not working on Windows. ([40566](https://github.com/WordPress/gutenberg/pull/40566))
+-   ESLint Plugin: Fix `recommended` preset when `prettier` is not installed. ([40634](https://github.com/WordPress/gutenberg/pull/40634))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- [@chriszarate](https://github.com/chriszarate): ESLint Plugin: Fix `recommended` preset when `prettier` is not installed. ([40634](https://github.com/WordPress/gutenberg/pull/40634))
-- [@danieliser](https://github.com/danieliser): Fix/block meta icon prop errors. ([40710](https://github.com/WordPress/gutenberg/pull/40710))
-- [@gvgvgvijayan](https://github.com/gvgvgvijayan): Fixes broken links. ([40578](https://github.com/WordPress/gutenberg/pull/40578))
-- [@iansvo](https://github.com/iansvo): URLInput now always has an ID and accessible label. ([40310](https://github.com/WordPress/gutenberg/pull/40310))
-- [@juhi123](https://github.com/juhi123): Migrate Image Size to Playwright. ([40467](https://github.com/WordPress/gutenberg/pull/40467))
-- [@Trapsta](https://github.com/Trapsta): Close overlay menu when clicking an anchor link. ([39625](https://github.com/WordPress/gutenberg/pull/39625))
+The following PRs were merged by first-time contributors:
 
+-   [@chriszarate](https://github.com/chriszarate): ESLint Plugin: Fix `recommended` preset when `prettier` is not installed. ([40634](https://github.com/WordPress/gutenberg/pull/40634))
+-   [@danieliser](https://github.com/danieliser): Fix/block meta icon prop errors. ([40710](https://github.com/WordPress/gutenberg/pull/40710))
+-   [@gvgvgvijayan](https://github.com/gvgvgvijayan): Fixes broken links. ([40578](https://github.com/WordPress/gutenberg/pull/40578))
+-   [@iansvo](https://github.com/iansvo): URLInput now always has an ID and accessible label. ([40310](https://github.com/WordPress/gutenberg/pull/40310))
+-   [@juhi123](https://github.com/juhi123): Migrate Image Size to Playwright. ([40467](https://github.com/WordPress/gutenberg/pull/40467))
+-   [@Trapsta](https://github.com/Trapsta): Close overlay menu when clicking an anchor link. ([39625](https://github.com/WordPress/gutenberg/pull/39625))
 
 = 13.1.0 =
 
@@ -5488,159 +29676,159 @@ The following PRs were merged by first time contributors:
 
 ### Enhancements
 
-- Block Editor: Removed the logic that was preventing the toolbar from hiding when typing within formats. ([40476](https://github.com/WordPress/gutenberg/pull/40476))
-- Block settings: Remove redundant block name from "settings" panels. ([40275](https://github.com/WordPress/gutenberg/pull/40275))
-- Components: Unified black color to gray-900. ([40391](https://github.com/WordPress/gutenberg/pull/40391))
-- Design Tools, Borders: Use new border control components in block support. ([37770](https://github.com/WordPress/gutenberg/pull/37770))
-- Document Setting: Removed plugin icon fallback. ([40355](https://github.com/WordPress/gutenberg/pull/40355))
-- Icons: Added new duotone filter icon. ([40435](https://github.com/WordPress/gutenberg/pull/40435))
+-   Block Editor: Removed the logic that was preventing the toolbar from hiding when typing within formats. ([40476](https://github.com/WordPress/gutenberg/pull/40476))
+-   Block settings: Remove redundant block name from "settings" panels. ([40275](https://github.com/WordPress/gutenberg/pull/40275))
+-   Components: Unified black color to gray-900. ([40391](https://github.com/WordPress/gutenberg/pull/40391))
+-   Design Tools, Borders: Use new border control components in block support. ([37770](https://github.com/WordPress/gutenberg/pull/37770))
+-   Document Setting: Removed plugin icon fallback. ([40355](https://github.com/WordPress/gutenberg/pull/40355))
+-   Icons: Added new duotone filter icon. ([40435](https://github.com/WordPress/gutenberg/pull/40435))
 
 #### Block Library
 
-- Categories: Added new option to show or hide empty categories. ([39426](https://github.com/WordPress/gutenberg/pull/39426))
-- Column: Add border support to column blocks. ([39967](https://github.com/WordPress/gutenberg/pull/39967))
-- Comments: Create comments title with simple styling. ([40419](https://github.com/WordPress/gutenberg/pull/40419))
-- Media & Text: Removed font size declaration from template. ([40329](https://github.com/WordPress/gutenberg/pull/40329))
-- Navigation: Renamed Navigation Menus to Navigation. ([40413](https://github.com/WordPress/gutenberg/pull/40413))
+-   Categories: Added new option to show or hide empty categories. ([39426](https://github.com/WordPress/gutenberg/pull/39426))
+-   Column: Add border support to column blocks. ([39967](https://github.com/WordPress/gutenberg/pull/39967))
+-   Comments: Create comments title with simple styling. ([40419](https://github.com/WordPress/gutenberg/pull/40419))
+-   Media & Text: Removed font size declaration from template. ([40329](https://github.com/WordPress/gutenberg/pull/40329))
+-   Navigation: Renamed Navigation Menus to Navigation. ([40413](https://github.com/WordPress/gutenberg/pull/40413))
 
 ### Bug Fixes
 
-- Patterns API: Add 'inserter' to the schema. ([40416](https://github.com/WordPress/gutenberg/pull/40416))
-- Toolbar: Fixed block toolbar text button padding. ([40438](https://github.com/WordPress/gutenberg/pull/40438))
+-   Patterns API: Add 'inserter' to the schema. ([40416](https://github.com/WordPress/gutenberg/pull/40416))
+-   Toolbar: Fixed block toolbar text button padding. ([40438](https://github.com/WordPress/gutenberg/pull/40438))
 
 #### Block Library
 
-- Post Featured Image: Used translatable post type label. ([40378](https://github.com/WordPress/gutenberg/pull/40378))
-- Comments:
-  - Comment template: Call `comment_class()` before recursing into child comments. ([40455](https://github.com/WordPress/gutenberg/pull/40455))
-  - Fixed comments query loop pagination not respecting Discussion Settings. ([40284](https://github.com/WordPress/gutenberg/pull/40284))
-  - Fixed comments no results placeholder not appearing. ([40234](https://github.com/WordPress/gutenberg/pull/40234))
-  - Post Comments Form: Fix layout quirks. ([40359](https://github.com/WordPress/gutenberg/pull/40359))
-- Embed:
-  - Fixed inline preview cut-off when editing URL. ([35326](https://github.com/WordPress/gutenberg/pull/35326))
-  - Use preview html for flickr embed previews in editor. ([40187](https://github.com/WordPress/gutenberg/pull/40187))
-- Image: Added window to the optional chaining. ([40394](https://github.com/WordPress/gutenberg/pull/40394))
+-   Post Featured Image: Used translatable post type label. ([40378](https://github.com/WordPress/gutenberg/pull/40378))
+-   Comments:
+    -   Comment template: Call `comment_class()` before recursing into child comments. ([40455](https://github.com/WordPress/gutenberg/pull/40455))
+    -   Fixed comments query loop pagination not respecting Discussion Settings. ([40284](https://github.com/WordPress/gutenberg/pull/40284))
+    -   Fixed comments no results placeholder not appearing. ([40234](https://github.com/WordPress/gutenberg/pull/40234))
+    -   Post Comments Form: Fix layout quirks. ([40359](https://github.com/WordPress/gutenberg/pull/40359))
+-   Embed:
+    -   Fixed inline preview cut-off when editing URL. ([35326](https://github.com/WordPress/gutenberg/pull/35326))
+    -   Use preview html for flickr embed previews in editor. ([40187](https://github.com/WordPress/gutenberg/pull/40187))
+-   Image: Added window to the optional chaining. ([40394](https://github.com/WordPress/gutenberg/pull/40394))
 
 ### Styles
 
-- Add a debounce to the custom color onChange event. ([40285](https://github.com/WordPress/gutenberg/pull/40285))
-- Do not render global styles coming from the server in the site editor. ([40185](https://github.com/WordPress/gutenberg/pull/40185))
-- Elements: Add styles to the footer before the block is rendered. ([37728](https://github.com/WordPress/gutenberg/pull/37728))
-- Fixed duotone rendering in site editor. ([37727](https://github.com/WordPress/gutenberg/pull/37727))
+-   Add a debounce to the custom color onChange event. ([40285](https://github.com/WordPress/gutenberg/pull/40285))
+-   Do not render global styles coming from the server in the site editor. ([40185](https://github.com/WordPress/gutenberg/pull/40185))
+-   Elements: Add styles to the footer before the block is rendered. ([37728](https://github.com/WordPress/gutenberg/pull/37728))
+-   Fixed duotone rendering in site editor. ([37727](https://github.com/WordPress/gutenberg/pull/37727))
 
 ### Site Editor
 
-- Don't render the secondary sidebar in text mode. ([40337](https://github.com/WordPress/gutenberg/pull/40337))
-- Fixed webfont loading in the Site Editor. ([40262](https://github.com/WordPress/gutenberg/pull/40262))
+-   Don't render the secondary sidebar in text mode. ([40337](https://github.com/WordPress/gutenberg/pull/40337))
+-   Fixed webfont loading in the Site Editor. ([40262](https://github.com/WordPress/gutenberg/pull/40262))
 
 ### Block Editor
 
-- Block Locking, useBlockLock: Always check inherited 'templateLock' status. ([40263](https://github.com/WordPress/gutenberg/pull/40263))
-- i18n: Fix incorrect '_n' usage. ([40292](https://github.com/WordPress/gutenberg/pull/40292))
-- List View, useBlockDisplayInformation: Return anchor for block variations in list view. ([40458](https://github.com/WordPress/gutenberg/pull/40458))
-- Multi-selection: Copy whole block when selection is collapsed. ([40374](https://github.com/WordPress/gutenberg/pull/40374))
-- Add optional chaining in case taxonomy visibility is not defined. ([40532](https://github.com/WordPress/gutenberg/pull/40532))
+-   Block Locking, useBlockLock: Always check inherited 'templateLock' status. ([40263](https://github.com/WordPress/gutenberg/pull/40263))
+-   i18n: Fix incorrect '\_n' usage. ([40292](https://github.com/WordPress/gutenberg/pull/40292))
+-   List View, useBlockDisplayInformation: Return anchor for block variations in list view. ([40458](https://github.com/WordPress/gutenberg/pull/40458))
+-   Multi-selection: Copy whole block when selection is collapsed. ([40374](https://github.com/WordPress/gutenberg/pull/40374))
+-   Add optional chaining in case taxonomy visibility is not defined. ([40532](https://github.com/WordPress/gutenberg/pull/40532))
 
 ### Accessibility
 
-- Post editing: After closing welcome dialog, if content is empty, focus title field. ([40195](https://github.com/WordPress/gutenberg/pull/40195))
-- Fixed focus loss happening when installing blocks from the directory. ([40340](https://github.com/WordPress/gutenberg/pull/40340))
-- Fixed focus loss when creating pages from link control search results. ([40342](https://github.com/WordPress/gutenberg/pull/40342))
-- Fixed focus loss when navigating the guide component. ([40324](https://github.com/WordPress/gutenberg/pull/40324))
-- Navigation block: After choosing an option from Select Menu, focus after block rerender. ([40390](https://github.com/WordPress/gutenberg/pull/40390))
-- Block Styles: Remove unnecessary button role and 'onKeyDown' handler. ([40427](https://github.com/WordPress/gutenberg/pull/40427))
-  
+-   Post editing: After closing welcome dialog, if content is empty, focus title field. ([40195](https://github.com/WordPress/gutenberg/pull/40195))
+-   Fixed focus loss happening when installing blocks from the directory. ([40340](https://github.com/WordPress/gutenberg/pull/40340))
+-   Fixed focus loss when creating pages from link control search results. ([40342](https://github.com/WordPress/gutenberg/pull/40342))
+-   Fixed focus loss when navigating the guide component. ([40324](https://github.com/WordPress/gutenberg/pull/40324))
+-   Navigation block: After choosing an option from Select Menu, focus after block rerender. ([40390](https://github.com/WordPress/gutenberg/pull/40390))
+-   Block Styles: Remove unnecessary button role and 'onKeyDown' handler. ([40427](https://github.com/WordPress/gutenberg/pull/40427))
+
 ### Performance
 
-- Added a context param to sidebar entity request. ([40148](https://github.com/WordPress/gutenberg/pull/40148))
+-   Added a context param to sidebar entity request. ([40148](https://github.com/WordPress/gutenberg/pull/40148))
 
 ### Developer Experience
 
-- [wp-env]: Add support to override `core` by the `WP_ENV_CORE` environment variable. ([40407](https://github.com/WordPress/gutenberg/pull/40407))
-- Create Block: Fix warnings and errors reported during scaffolding and validation. ([40479](https://github.com/WordPress/gutenberg/pull/40479))
+-   [wp-env]: Add support to override `core` by the `WP_ENV_CORE` environment variable. ([40407](https://github.com/WordPress/gutenberg/pull/40407))
+-   Create Block: Fix warnings and errors reported during scaffolding and validation. ([40479](https://github.com/WordPress/gutenberg/pull/40479))
 
 ### Documentation
 
-- Added README for Gradient and NavigableToolbar. ([25580](https://github.com/WordPress/gutenberg/pull/25580))
-- Added documentation for `ancestor` property in block metadata. ([40027](https://github.com/WordPress/gutenberg/pull/40027))
-- Fixed OnNumberOfItemsChange event docs error. ([39942](https://github.com/WordPress/gutenberg/pull/39942))
-- InputControl: Improved type annotations and stories. ([40119](https://github.com/WordPress/gutenberg/pull/40119))
-- Patterns: Documented 'inserter' argument. ([40425](https://github.com/WordPress/gutenberg/pull/40425))
-- Removed WordPress 5.9 specific warning from FSE documentation. ([40274](https://github.com/WordPress/gutenberg/pull/40274))
-- Replaced fixtures with inline parsed code. ([40428](https://github.com/WordPress/gutenberg/pull/40428))
-- Updated individual block locking section. ([40372](https://github.com/WordPress/gutenberg/pull/40372))
-- Updates `theme.json` documentation for theme authors. ([40005](https://github.com/WordPress/gutenberg/pull/40005))
-- Unwrapped wrapped selectors when inferring types of JSDoc params. ([40236](https://github.com/WordPress/gutenberg/pull/40236))
+-   Added README for Gradient and NavigableToolbar. ([25580](https://github.com/WordPress/gutenberg/pull/25580))
+-   Added documentation for `ancestor` property in block metadata. ([40027](https://github.com/WordPress/gutenberg/pull/40027))
+-   Fixed OnNumberOfItemsChange event docs error. ([39942](https://github.com/WordPress/gutenberg/pull/39942))
+-   InputControl: Improved type annotations and stories. ([40119](https://github.com/WordPress/gutenberg/pull/40119))
+-   Patterns: Documented 'inserter' argument. ([40425](https://github.com/WordPress/gutenberg/pull/40425))
+-   Removed WordPress 5.9 specific warning from FSE documentation. ([40274](https://github.com/WordPress/gutenberg/pull/40274))
+-   Replaced fixtures with inline parsed code. ([40428](https://github.com/WordPress/gutenberg/pull/40428))
+-   Updated individual block locking section. ([40372](https://github.com/WordPress/gutenberg/pull/40372))
+-   Updates `theme.json` documentation for theme authors. ([40005](https://github.com/WordPress/gutenberg/pull/40005))
+-   Unwrapped wrapped selectors when inferring types of JSDoc params. ([40236](https://github.com/WordPress/gutenberg/pull/40236))
 
 ### Code Quality
 
 #### Block Library
 
-- Navigation: Remove async useEffect. ([40373](https://github.com/WordPress/gutenberg/pull/40373))
-- HTML: Remove pointless `<span>`s in Custom HTML block controls. ([39820](https://github.com/WordPress/gutenberg/pull/39820))
-- Comments Query Loop: comment meta data isn’t queued for lazy loading. ([40242](https://github.com/WordPress/gutenberg/pull/40242))
-- Split navigation block view script. ([40135](https://github.com/WordPress/gutenberg/pull/40135))
-- Spacer: Added constants file to Spacer block. ([40446](https://github.com/WordPress/gutenberg/pull/40446))
+-   Navigation: Remove async useEffect. ([40373](https://github.com/WordPress/gutenberg/pull/40373))
+-   HTML: Remove pointless `<span>`s in Custom HTML block controls. ([39820](https://github.com/WordPress/gutenberg/pull/39820))
+-   Comments Query Loop: comment meta data isn’t queued for lazy loading. ([40242](https://github.com/WordPress/gutenberg/pull/40242))
+-   Split navigation block view script. ([40135](https://github.com/WordPress/gutenberg/pull/40135))
+-   Spacer: Added constants file to Spacer block. ([40446](https://github.com/WordPress/gutenberg/pull/40446))
 
 #### Components
 
-- Stop exporting individual color objects from color values file. ([40387](https://github.com/WordPress/gutenberg/pull/40387))
-- Added reusable BlockPopover and BlockPopoverInbetween components. ([40441](https://github.com/WordPress/gutenberg/pull/40441))
-- Cleaned BlockMover component and styles. ([40379](https://github.com/WordPress/gutenberg/pull/40379))
-  
+-   Stop exporting individual color objects from color values file. ([40387](https://github.com/WordPress/gutenberg/pull/40387))
+-   Added reusable BlockPopover and BlockPopoverInbetween components. ([40441](https://github.com/WordPress/gutenberg/pull/40441))
+-   Cleaned BlockMover component and styles. ([40379](https://github.com/WordPress/gutenberg/pull/40379))
+
 #### Packages
 
-- Block Editor: Remove unused sub-components in list view. ([40448](https://github.com/WordPress/gutenberg/pull/40448))
-- Data: Cancel render queue in a more straightforward way. ([40433](https://github.com/WordPress/gutenberg/pull/40433))
-  
+-   Block Editor: Remove unused sub-components in list view. ([40448](https://github.com/WordPress/gutenberg/pull/40448))
+-   Data: Cancel render queue in a more straightforward way. ([40433](https://github.com/WordPress/gutenberg/pull/40433))
+
 #### Plugin
 
-- Added `edit` context to patterns REST controllers. ([40259](https://github.com/WordPress/gutenberg/pull/40259))
-- Add @talldan as a codeowner for wordpress/preferences. ([40295](https://github.com/WordPress/gutenberg/pull/40295))
-- Cleaned up non-dynamic block registration list. ([40426](https://github.com/WordPress/gutenberg/pull/40426))
-- Moved list and quote block registration to experimental blocks. ([40350](https://github.com/WordPress/gutenberg/pull/40350))
-- Moved the logic for iframed editor to WP 6.0 compat. ([40278](https://github.com/WordPress/gutenberg/pull/40278))
-- Post WordPress 6.0 Beta 1 cleanup. ([40349](https://github.com/WordPress/gutenberg/pull/40349))
-- Rename `wp_translate_settings_using_i18n_schema` to `translate_settings_using_i18n_schema`. ([40227](https://github.com/WordPress/gutenberg/pull/40227))
-- Plugin: Fix fatal error for older WP/PHP versions. ([40538](https://github.com/WordPress/gutenberg/pull/40538))
+-   Added `edit` context to patterns REST controllers. ([40259](https://github.com/WordPress/gutenberg/pull/40259))
+-   Add @talldan as a codeowner for wordpress/preferences. ([40295](https://github.com/WordPress/gutenberg/pull/40295))
+-   Cleaned up non-dynamic block registration list. ([40426](https://github.com/WordPress/gutenberg/pull/40426))
+-   Moved list and quote block registration to experimental blocks. ([40350](https://github.com/WordPress/gutenberg/pull/40350))
+-   Moved the logic for iframed editor to WP 6.0 compat. ([40278](https://github.com/WordPress/gutenberg/pull/40278))
+-   Post WordPress 6.0 Beta 1 cleanup. ([40349](https://github.com/WordPress/gutenberg/pull/40349))
+-   Rename `wp_translate_settings_using_i18n_schema` to `translate_settings_using_i18n_schema`. ([40227](https://github.com/WordPress/gutenberg/pull/40227))
+-   Plugin: Fix fatal error for older WP/PHP versions. ([40538](https://github.com/WordPress/gutenberg/pull/40538))
 
 ### Tools
 
 #### Testing
 
-- Playwright migration:
-  - Fixed outdated playwright snapshot directory. ([40422](https://github.com/WordPress/gutenberg/pull/40422))
-  - Tried to fix flaky playwright tests not being reported. ([40290](https://github.com/WordPress/gutenberg/pull/40290))
-  - E2E: Cross-platform support for Playwright end-to-end tests. ([39765](https://github.com/WordPress/gutenberg/pull/39765))
-  - Migrate `post-editor-template-mode` to Playwright. ([40175](https://github.com/WordPress/gutenberg/pull/40175))
-  - Migrate block api test to Playwright. ([40217](https://github.com/WordPress/gutenberg/pull/40217))
-  - Migrate document settings test to playwright. ([40258](https://github.com/WordPress/gutenberg/pull/40258))
-  - Migrate style variation test to Playwright. ([40216](https://github.com/WordPress/gutenberg/pull/40216))
-- Quote: Verify that user can type right after inserting the quote block. ([40466](https://github.com/WordPress/gutenberg/pull/40466))
-- `useSelect`:
-  - Add async mode test suite and fix two bugs. ([40321](https://github.com/WordPress/gutenberg/pull/40321))
-  - Update unit tests to testing-library. ([40229](https://github.com/WordPress/gutenberg/pull/40229))
-- Block supports: Unregister block in PHP unit tests. ([40239](https://github.com/WordPress/gutenberg/pull/40239))
-- CreateBlock: Fix escaping for error message in create block test. ([40473](https://github.com/WordPress/gutenberg/pull/40473))
-- Comments Query Loop: Add end-to-end comments tests to stable, wait for selector on set option. ([40405](https://github.com/WordPress/gutenberg/pull/40405))
+-   Playwright migration:
+    -   Fixed outdated playwright snapshot directory. ([40422](https://github.com/WordPress/gutenberg/pull/40422))
+    -   Tried to fix flaky playwright tests not being reported. ([40290](https://github.com/WordPress/gutenberg/pull/40290))
+    -   E2E: Cross-platform support for Playwright end-to-end tests. ([39765](https://github.com/WordPress/gutenberg/pull/39765))
+    -   Migrate `post-editor-template-mode` to Playwright. ([40175](https://github.com/WordPress/gutenberg/pull/40175))
+    -   Migrate block api test to Playwright. ([40217](https://github.com/WordPress/gutenberg/pull/40217))
+    -   Migrate document settings test to playwright. ([40258](https://github.com/WordPress/gutenberg/pull/40258))
+    -   Migrate style variation test to Playwright. ([40216](https://github.com/WordPress/gutenberg/pull/40216))
+-   Quote: Verify that user can type right after inserting the quote block. ([40466](https://github.com/WordPress/gutenberg/pull/40466))
+-   `useSelect`:
+    -   Add async mode test suite and fix two bugs. ([40321](https://github.com/WordPress/gutenberg/pull/40321))
+    -   Update unit tests to testing-library. ([40229](https://github.com/WordPress/gutenberg/pull/40229))
+-   Block supports: Unregister block in PHP unit tests. ([40239](https://github.com/WordPress/gutenberg/pull/40239))
+-   CreateBlock: Fix escaping for error message in create block test. ([40473](https://github.com/WordPress/gutenberg/pull/40473))
+-   Comments Query Loop: Add end-to-end comments tests to stable, wait for selector on set option. ([40405](https://github.com/WordPress/gutenberg/pull/40405))
 
 #### Build Tooling
 
-- Added the missing class-wp-style-engine-gutenberg.php in the plugin build. ([40191](https://github.com/WordPress/gutenberg/pull/40191))
-- Fixed commands containing dot-slashes in npm scripts. ([39739](https://github.com/WordPress/gutenberg/pull/39739))
-- Added new TypeScript project for unit tests. ([39436](https://github.com/WordPress/gutenberg/pull/39436))
-- Fixed the flaky template editor mode test. ([40325](https://github.com/WordPress/gutenberg/pull/40325))
-- Excluded BEM class from stylelint @wordpress/scripts. ([37531](https://github.com/WordPress/gutenberg/pull/37531))
+-   Added the missing class-wp-style-engine-gutenberg.php in the plugin build. ([40191](https://github.com/WordPress/gutenberg/pull/40191))
+-   Fixed commands containing dot-slashes in npm scripts. ([39739](https://github.com/WordPress/gutenberg/pull/39739))
+-   Added new TypeScript project for unit tests. ([39436](https://github.com/WordPress/gutenberg/pull/39436))
+-   Fixed the flaky template editor mode test. ([40325](https://github.com/WordPress/gutenberg/pull/40325))
+-   Excluded BEM class from stylelint @wordpress/scripts. ([37531](https://github.com/WordPress/gutenberg/pull/37531))
 
-## First time contributors
+## First-time contributors
 
-The following PRs were merged by first time contributors:
+The following PRs were merged by first-time contributors:
 
-- @chintu51: OnNumberOfItemsChange event attribute issue. ([39942](https://github.com/WordPress/gutenberg/pull/39942))
-- @khoipro: Scripts: Exclude BEM class from stylelint @wordpress/scripts. ([37531](https://github.com/WordPress/gutenberg/pull/37531))
-- @mauriac: Add new option to show or hide empty categories. ([39426](https://github.com/WordPress/gutenberg/pull/39426))
-- @roseg43: Media & Text: Remove font size declaration from template. ([40329](https://github.com/WordPress/gutenberg/pull/40329))
-- @zutigrm: Update `theme.json` documentation for theme authors. ([40005](https://github.com/WordPress/gutenberg/pull/40005))
+-   @chintu51: OnNumberOfItemsChange event attribute issue. ([39942](https://github.com/WordPress/gutenberg/pull/39942))
+-   @khoipro: Scripts: Exclude BEM class from stylelint @wordpress/scripts. ([37531](https://github.com/WordPress/gutenberg/pull/37531))
+-   @mauriac: Add new option to show or hide empty categories. ([39426](https://github.com/WordPress/gutenberg/pull/39426))
+-   @roseg43: Media & Text: Remove font size declaration from template. ([40329](https://github.com/WordPress/gutenberg/pull/40329))
+-   @zutigrm: Update `theme.json` documentation for theme authors. ([40005](https://github.com/WordPress/gutenberg/pull/40005))
 
 ## Contributors
 
@@ -5648,7 +29836,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @ajlende @alexstine @aristath @c4rl0sbr4v0 @chintu51 @ciampo @dmsnell @EliezerSPP @fabiankaegy @fluiddot @georgeh @geriux @glendaviesnz @gziolo @jasmussen @jsnajdr @JustinyAhin @kevin940726 @khoipro @Mamaduka @mashikag @mauriac @mchowning @michalczaplinski @mirka @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @roseg43 @scruffian @SiobhyB @t-hamano @talldan @tomasztunik @torounit @youknowriad @ZebulanStanphill @zutigrm
 
-
 = 13.0.0 =
 
 ## Changelog
@@ -5656,380 +29843,384 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Block Library
-- Archives: Add yearly, weekly and daily archive settings to the archives block. ([38440](https://github.com/WordPress/gutenberg/pull/38440))
-- Avatar: Increase the size of the Avatar image to be 2x of the width chosen. ([39728](https://github.com/WordPress/gutenberg/pull/39728))
-- Code: Preserves source of unrecognized blocks inside of Code Editor. ([39523](https://github.com/WordPress/gutenberg/pull/39523))
-- Column Block: Add blockGap support. ([40122](https://github.com/WordPress/gutenberg/pull/40122))
-- Comment blocks: Update block descriptions. ([39735](https://github.com/WordPress/gutenberg/pull/39735))
-- Comments Query Loop:
-- Always inherit from core Discussion settings. ([39664](https://github.com/WordPress/gutenberg/pull/39664))
-- Update default template. ([40165](https://github.com/WordPress/gutenberg/pull/40165))
-- Cover: Makes cover block dynamic and adds featured image binding. ([39658](https://github.com/WordPress/gutenberg/pull/39658))
-- Gallery: Add css var to enable theme authors to set a default gallery gap. ([40008](https://github.com/WordPress/gutenberg/pull/40008))
-- Group:
-- New Group, Stack, Row block descriptions. ([40176](https://github.com/WordPress/gutenberg/pull/40176))
-- Cover: Always allow transform from Group block, add handling for Row and Stack variations. ([40212](https://github.com/WordPress/gutenberg/pull/40212))
-- Add the stack block variation to the group block. ([39690](https://github.com/WordPress/gutenberg/pull/39690))
-- Add group block variations to Group toolbar. ([39920](https://github.com/WordPress/gutenberg/pull/39920))
-- Block Variations Transforms: Display as icon buttons if each block variation has a unique icon. ([40036](https://github.com/WordPress/gutenberg/pull/40036))
-- Improve Stack and Row setup states. ([39935](https://github.com/WordPress/gutenberg/pull/39935))
-- Turn the wrap to multiple lines option off by default on the row block. ([40171](https://github.com/WordPress/gutenberg/pull/40171))
-- List: Add a box-sizing border-box to lists. ([39895](https://github.com/WordPress/gutenberg/pull/39895))
-- Navigation:
-- Avoid automatic saving of uncontrolled Nav blocks. ([39883](https://github.com/WordPress/gutenberg/pull/39883))
-- Auto set first Navigation Menu as current if only 1 exists. ([39880](https://github.com/WordPress/gutenberg/pull/39880))
-- Enable navigation nesting to be filtered and manually set. ([38621](https://github.com/WordPress/gutenberg/pull/38621))
-- Improve feedback on Nav Menu deletion. ([39677](https://github.com/WordPress/gutenberg/pull/39677))
-- Skip text decoration support serialization and apply as CSS class. ([36345](https://github.com/WordPress/gutenberg/pull/36345))
-- Navigation Link: Add support for navigation-link descriptions. ([39808](https://github.com/WordPress/gutenberg/pull/39808))
-- Post Comments: Deprecate the Post Comments block. ([40167](https://github.com/WordPress/gutenberg/pull/40167))
-- Post Tags: Update the Post Tags block icon. ([40096](https://github.com/WordPress/gutenberg/pull/40096))
-- Query Loop: Update query block creation and replacement flows. ([38997](https://github.com/WordPress/gutenberg/pull/38997))
-- Query page numbers block: Add same supports that next/prev page have. ([39835](https://github.com/WordPress/gutenberg/pull/39835))
-- Quote: Add color support to the quote block. ([39899](https://github.com/WordPress/gutenberg/pull/39899))
-- Read more: Add support for text color. ([39796](https://github.com/WordPress/gutenberg/pull/39796))
-- RSS:
-- Add missing classnames. ([39716](https://github.com/WordPress/gutenberg/pull/39716))
-- Try prepending HTTP to a URL. ([39758](https://github.com/WordPress/gutenberg/pull/39758))
-- Update max items. ([39819](https://github.com/WordPress/gutenberg/pull/39819))
-- Site Logo and Featured Image: Add duotone to placeholders. ([40085](https://github.com/WordPress/gutenberg/pull/40085))
-- Social Links: Disable vertical alignment controls for navigation and social links. ([40182](https://github.com/WordPress/gutenberg/pull/40182))
-- Template Part: Adjust the layout of thumbnails in the template part replacement modal. ([39766](https://github.com/WordPress/gutenberg/pull/39766))
+
+-   Archives: Add yearly, weekly and daily archive settings to the archives block. ([38440](https://github.com/WordPress/gutenberg/pull/38440))
+-   Avatar: Increase the size of the Avatar image to be 2x of the width chosen. ([39728](https://github.com/WordPress/gutenberg/pull/39728))
+-   Code: Preserves source of unrecognized blocks inside of Code Editor. ([39523](https://github.com/WordPress/gutenberg/pull/39523))
+-   Column Block: Add blockGap support. ([40122](https://github.com/WordPress/gutenberg/pull/40122))
+-   Comment blocks: Update block descriptions. ([39735](https://github.com/WordPress/gutenberg/pull/39735))
+-   Comments Query Loop:
+-   Always inherit from core Discussion settings. ([39664](https://github.com/WordPress/gutenberg/pull/39664))
+-   Update default template. ([40165](https://github.com/WordPress/gutenberg/pull/40165))
+-   Cover: Makes cover block dynamic and adds featured image binding. ([39658](https://github.com/WordPress/gutenberg/pull/39658))
+-   Gallery: Add css var to enable theme authors to set a default gallery gap. ([40008](https://github.com/WordPress/gutenberg/pull/40008))
+-   Group:
+-   New Group, Stack, Row block descriptions. ([40176](https://github.com/WordPress/gutenberg/pull/40176))
+-   Cover: Always allow transform from Group block, add handling for Row and Stack variations. ([40212](https://github.com/WordPress/gutenberg/pull/40212))
+-   Add the stack block variation to the group block. ([39690](https://github.com/WordPress/gutenberg/pull/39690))
+-   Add group block variations to Group toolbar. ([39920](https://github.com/WordPress/gutenberg/pull/39920))
+-   Block Variations Transforms: Display as icon buttons if each block variation has a unique icon. ([40036](https://github.com/WordPress/gutenberg/pull/40036))
+-   Improve Stack and Row setup states. ([39935](https://github.com/WordPress/gutenberg/pull/39935))
+-   Turn the wrap to multiple lines option off by default on the row block. ([40171](https://github.com/WordPress/gutenberg/pull/40171))
+-   List: Add a box-sizing border-box to lists. ([39895](https://github.com/WordPress/gutenberg/pull/39895))
+-   Navigation:
+-   Avoid automatic saving of uncontrolled Nav blocks. ([39883](https://github.com/WordPress/gutenberg/pull/39883))
+-   Auto set first Navigation Menu as current if only 1 exists. ([39880](https://github.com/WordPress/gutenberg/pull/39880))
+-   Enable navigation nesting to be filtered and manually set. ([38621](https://github.com/WordPress/gutenberg/pull/38621))
+-   Improve feedback on Nav Menu deletion. ([39677](https://github.com/WordPress/gutenberg/pull/39677))
+-   Skip text decoration support serialization and apply as CSS class. ([36345](https://github.com/WordPress/gutenberg/pull/36345))
+-   Navigation Link: Add support for navigation-link descriptions. ([39808](https://github.com/WordPress/gutenberg/pull/39808))
+-   Post Comments: Deprecate the Post Comments block. ([40167](https://github.com/WordPress/gutenberg/pull/40167))
+-   Post Tags: Update the Post Tags block icon. ([40096](https://github.com/WordPress/gutenberg/pull/40096))
+-   Query Loop: Update query block creation and replacement flows. ([38997](https://github.com/WordPress/gutenberg/pull/38997))
+-   Query page numbers block: Add same supports that next/prev page have. ([39835](https://github.com/WordPress/gutenberg/pull/39835))
+-   Quote: Add color support to the quote block. ([39899](https://github.com/WordPress/gutenberg/pull/39899))
+-   Read more: Add support for text color. ([39796](https://github.com/WordPress/gutenberg/pull/39796))
+-   RSS:
+-   Add missing classnames. ([39716](https://github.com/WordPress/gutenberg/pull/39716))
+-   Try prepending HTTP to a URL. ([39758](https://github.com/WordPress/gutenberg/pull/39758))
+-   Update max items. ([39819](https://github.com/WordPress/gutenberg/pull/39819))
+-   Site Logo and Featured Image: Add duotone to placeholders. ([40085](https://github.com/WordPress/gutenberg/pull/40085))
+-   Social Links: Disable vertical alignment controls for navigation and social links. ([40182](https://github.com/WordPress/gutenberg/pull/40182))
+-   Template Part: Adjust the layout of thumbnails in the template part replacement modal. ([39766](https://github.com/WordPress/gutenberg/pull/39766))
 
 #### Components 
-- Borders: Add new BorderControl component. ([37769](https://github.com/WordPress/gutenberg/pull/37769))
-- Borders: Add BorderBoxControl component. ([38876](https://github.com/WordPress/gutenberg/pull/38876))
-- BorderControl: Add ability to apply custom CSS classes to popover content. ([39753](https://github.com/WordPress/gutenberg/pull/39753))
-- BorderControl: Fix vertical alignment of inner slider control. ([39750](https://github.com/WordPress/gutenberg/pull/39750))
-- Card: Adjust border radius size. ([40032](https://github.com/WordPress/gutenberg/pull/40032))
-- ColorPalette: Add SlotFillProvider to story to correct tooltip positioning. ([39674](https://github.com/WordPress/gutenberg/pull/39674))
-- UnitControl: Forward onBlur prop as expected. ([39589](https://github.com/WordPress/gutenberg/pull/39589))
-- Add ToggleGroupControlOptionIcon component. ([39760](https://github.com/WordPress/gutenberg/pull/39760))
-- CustomSelectControl: Make chevron consistent with SelectControl. ([40049](https://github.com/WordPress/gutenberg/pull/40049))
+
+-   Borders: Add new BorderControl component. ([37769](https://github.com/WordPress/gutenberg/pull/37769))
+-   Borders: Add BorderBoxControl component. ([38876](https://github.com/WordPress/gutenberg/pull/38876))
+-   BorderControl: Add ability to apply custom CSS classes to popover content. ([39753](https://github.com/WordPress/gutenberg/pull/39753))
+-   BorderControl: Fix vertical alignment of inner slider control. ([39750](https://github.com/WordPress/gutenberg/pull/39750))
+-   Card: Adjust border radius size. ([40032](https://github.com/WordPress/gutenberg/pull/40032))
+-   ColorPalette: Add SlotFillProvider to story to correct tooltip positioning. ([39674](https://github.com/WordPress/gutenberg/pull/39674))
+-   UnitControl: Forward onBlur prop as expected. ([39589](https://github.com/WordPress/gutenberg/pull/39589))
+-   Add ToggleGroupControlOptionIcon component. ([39760](https://github.com/WordPress/gutenberg/pull/39760))
+-   CustomSelectControl: Make chevron consistent with SelectControl. ([40049](https://github.com/WordPress/gutenberg/pull/40049))
 
 #### Styles Sidebar
 
-- Add search in the block types list. ([39117](https://github.com/WordPress/gutenberg/pull/39117))
-- Add labels to the global styles variations. ([39322](https://github.com/WordPress/gutenberg/pull/39322))
-- Show translated strings coming from global styles variations. ([39960](https://github.com/WordPress/gutenberg/pull/39960))
-- Adjust icon vertical alignment with labels. ([39982](https://github.com/WordPress/gutenberg/pull/39982))
-- Tweak preview box. ([39978](https://github.com/WordPress/gutenberg/pull/39978))
-- Update Other styles to Browse styles. ([39752](https://github.com/WordPress/gutenberg/pull/39752))
-- Wrap the preview box in the CardMedia component. ([39980](https://github.com/WordPress/gutenberg/pull/39980))
+-   Add search in the block types list. ([39117](https://github.com/WordPress/gutenberg/pull/39117))
+-   Add labels to the global styles variations. ([39322](https://github.com/WordPress/gutenberg/pull/39322))
+-   Show translated strings coming from global styles variations. ([39960](https://github.com/WordPress/gutenberg/pull/39960))
+-   Adjust icon vertical alignment with labels. ([39982](https://github.com/WordPress/gutenberg/pull/39982))
+-   Tweak preview box. ([39978](https://github.com/WordPress/gutenberg/pull/39978))
+-   Update Other styles to Browse styles. ([39752](https://github.com/WordPress/gutenberg/pull/39752))
+-   Wrap the preview box in the CardMedia component. ([39980](https://github.com/WordPress/gutenberg/pull/39980))
 
 #### Block Editor
 
-- BlockToolbar: Show Group button in toolbar when multiple blocks are selected. ([39710](https://github.com/WordPress/gutenberg/pull/39710))
-- Improvements to use-focus-first-element and utils (dom). ([39461](https://github.com/WordPress/gutenberg/pull/39461))
-- Multi-selection: Allow partial block selection. ([38892](https://github.com/WordPress/gutenberg/pull/38892))
-- [Multi-selection]: Copy/cut partial selected blocks. ([40098](https://github.com/WordPress/gutenberg/pull/40098))- Order ids in getClientIdsOfDescendants and getClientIdsWithDescendants selectors. ([39985](https://github.com/WordPress/gutenberg/pull/39985))
-- Revert Try: Summary panel excerpt max-height.. ([40127](https://github.com/WordPress/gutenberg/pull/40127))
-- Link directly to files stored in the Media Library using the Link UI. ([39701](https://github.com/WordPress/gutenberg/pull/39701))
-- Partial multi-select: Fix error with dead key. ([39850](https://github.com/WordPress/gutenberg/pull/39850))
+-   BlockToolbar: Show Group button in toolbar when multiple blocks are selected. ([39710](https://github.com/WordPress/gutenberg/pull/39710))
+-   Improvements to use-focus-first-element and utils (dom). ([39461](https://github.com/WordPress/gutenberg/pull/39461))
+-   Multi-selection: Allow partial block selection. ([38892](https://github.com/WordPress/gutenberg/pull/38892))
+-   [Multi-selection]: Copy/cut partial selected blocks. ([40098](https://github.com/WordPress/gutenberg/pull/40098))- Order ids in getClientIdsOfDescendants and getClientIdsWithDescendants selectors. ([39985](https://github.com/WordPress/gutenberg/pull/39985))
+-   Revert Try: Summary panel excerpt max-height.. ([40127](https://github.com/WordPress/gutenberg/pull/40127))
+-   Link directly to files stored in the Media Library using the Link UI. ([39701](https://github.com/WordPress/gutenberg/pull/39701))
+-   Partial multi-select: Fix error with dead key. ([39850](https://github.com/WordPress/gutenberg/pull/39850))
 
 #### Post Editor
 
-- Document Settings: Summary panel excerpt max-height. ([40090](https://github.com/WordPress/gutenberg/pull/40090))
-- Migrate editor package isPublishSidebarEnabled to preferences store. ([39707](https://github.com/WordPress/gutenberg/pull/39707))
-- Migrate post editor panels state to preferences store. ([39604](https://github.com/WordPress/gutenberg/pull/39604))
-- Migrate interface enableItems data to preferences package. ([39449](https://github.com/WordPress/gutenberg/pull/39449))
-- Try: Remove iframe 100% width rule. ([38614](https://github.com/WordPress/gutenberg/pull/38614))
+-   Document Settings: Summary panel excerpt max-height. ([40090](https://github.com/WordPress/gutenberg/pull/40090))
+-   Migrate editor package isPublishSidebarEnabled to preferences store. ([39707](https://github.com/WordPress/gutenberg/pull/39707))
+-   Migrate post editor panels state to preferences store. ([39604](https://github.com/WordPress/gutenberg/pull/39604))
+-   Migrate interface enableItems data to preferences package. ([39449](https://github.com/WordPress/gutenberg/pull/39449))
+-   Try: Remove iframe 100% width rule. ([38614](https://github.com/WordPress/gutenberg/pull/38614))
 
 #### Site Editor
 
-- Add a dedicated sidebar for managing layout of navigation menus. ([39290](https://github.com/WordPress/gutenberg/pull/39290), [40083](https://github.com/WordPress/gutenberg/pull/40083))
+-   Add a dedicated sidebar for managing layout of navigation menus. ([39290](https://github.com/WordPress/gutenberg/pull/39290), [40083](https://github.com/WordPress/gutenberg/pull/40083))
 
 #### Block Locking
 
-- Add the useBlockLock hook. ([40210](https://github.com/WordPress/gutenberg/pull/40210), [40220](https://github.com/WordPress/gutenberg/pull/40220))
-- Display lock status in List View. ([40088](https://github.com/WordPress/gutenberg/pull/40088))
-- Styling changes for modal. ([39998](https://github.com/WordPress/gutenberg/pull/39998))
-- Try: Reusable block edit locking. ([39950](https://github.com/WordPress/gutenberg/pull/39950))
-- Block Toolbar: Fix lock icon focus. ([40302](https://github.com/WordPress/gutenberg/pull/40302))
+-   Add the useBlockLock hook. ([40210](https://github.com/WordPress/gutenberg/pull/40210), [40220](https://github.com/WordPress/gutenberg/pull/40220))
+-   Display lock status in List View. ([40088](https://github.com/WordPress/gutenberg/pull/40088))
+-   Styling changes for modal. ([39998](https://github.com/WordPress/gutenberg/pull/39998))
+-   Try: Reusable block edit locking. ([39950](https://github.com/WordPress/gutenberg/pull/39950))
+-   Block Toolbar: Fix lock icon focus. ([40302](https://github.com/WordPress/gutenberg/pull/40302))
+
 #### Reusable Blocks
 
-- Make the Cancel button tertiary. ([39872](https://github.com/WordPress/gutenberg/pull/39872))
-- Use the symbol icon for Reusable Block menu item. ([40020](https://github.com/WordPress/gutenberg/pull/40020))
+-   Make the Cancel button tertiary. ([39872](https://github.com/WordPress/gutenberg/pull/39872))
+-   Use the symbol icon for Reusable Block menu item. ([40020](https://github.com/WordPress/gutenberg/pull/40020))
 
 #### CSS & Styling
 
-- Revert Global styles: Remove block gap control. ([39845](https://github.com/WordPress/gutenberg/pull/39845))
-- Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs. ([39846](https://github.com/WordPress/gutenberg/pull/39846))
-- Style Engine:
-- Add margin support. ([39790](https://github.com/WordPress/gutenberg/pull/39790))
-- Block supports backend. ([39446](https://github.com/WordPress/gutenberg/pull/39446))
+-   Revert Global styles: Remove block gap control. ([39845](https://github.com/WordPress/gutenberg/pull/39845))
+-   Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs. ([39846](https://github.com/WordPress/gutenberg/pull/39846))
+-   Style Engine:
+-   Add margin support. ([39790](https://github.com/WordPress/gutenberg/pull/39790))
+-   Block supports backend. ([39446](https://github.com/WordPress/gutenberg/pull/39446))
 
 #### Design Tools
 
-- Add vertical alignment to blocks using flex control. ([40013](https://github.com/WordPress/gutenberg/pull/40013))
-- Block Supports: Allow skipping serialization of individual features. ([36293](https://github.com/WordPress/gutenberg/pull/36293))
+-   Add vertical alignment to blocks using flex control. ([40013](https://github.com/WordPress/gutenberg/pull/40013))
+-   Block Supports: Allow skipping serialization of individual features. ([36293](https://github.com/WordPress/gutenberg/pull/36293))
 
 #### Block API
 
-- Allow multiple view scripts per block. ([36176](https://github.com/WordPress/gutenberg/pull/36176))
+-   Allow multiple view scripts per block. ([36176](https://github.com/WordPress/gutenberg/pull/36176))
 
 #### Patterns
 
-- Option to pick a pattern on page creation. ([40034](https://github.com/WordPress/gutenberg/pull/40034))
-- Translate pattern metadata (title & description). ([40047](https://github.com/WordPress/gutenberg/pull/40047))
-- Remove batch support declaration from block patterns REST, fix navigation areas. ([39834](https://github.com/WordPress/gutenberg/pull/39834))
+-   Option to pick a pattern on page creation. ([40034](https://github.com/WordPress/gutenberg/pull/40034))
+-   Translate pattern metadata (title & description). ([40047](https://github.com/WordPress/gutenberg/pull/40047))
+-   Remove batch support declaration from block patterns REST, fix navigation areas. ([39834](https://github.com/WordPress/gutenberg/pull/39834))
 
 #### Theme Export
 
-- Change the schema URL. ([40106](https://github.com/WordPress/gutenberg/pull/40106))
-- Convert spaces to tabs in theme.json. ([39751](https://github.com/WordPress/gutenberg/pull/39751))
-- If the theme declares a version number then add a schema. ([39775](https://github.com/WordPress/gutenberg/pull/39775))
-- Remove default theme.json properties on export. ([39848](https://github.com/WordPress/gutenberg/pull/39848))
-- Restore appearanceTools when exporting a theme. ([39840](https://github.com/WordPress/gutenberg/pull/39840))
-- Sort theme.json properties. ([39842](https://github.com/WordPress/gutenberg/pull/39842))
-- Backport changes for Theme Export from 6.0. ([40215](https://github.com/WordPress/gutenberg/pull/40215))
+-   Change the schema URL. ([40106](https://github.com/WordPress/gutenberg/pull/40106))
+-   Convert spaces to tabs in theme.json. ([39751](https://github.com/WordPress/gutenberg/pull/39751))
+-   If the theme declares a version number then add a schema. ([39775](https://github.com/WordPress/gutenberg/pull/39775))
+-   Remove default theme.json properties on export. ([39848](https://github.com/WordPress/gutenberg/pull/39848))
+-   Restore appearanceTools when exporting a theme. ([39840](https://github.com/WordPress/gutenberg/pull/39840))
+-   Sort theme.json properties. ([39842](https://github.com/WordPress/gutenberg/pull/39842))
+-   Backport changes for Theme Export from 6.0. ([40215](https://github.com/WordPress/gutenberg/pull/40215))
 
 #### Webfonts
 
-- Do not trigger warning on already enqueued font families. ([40060](https://github.com/WordPress/gutenberg/pull/40060))
-- Register webfonts defined in styles variations. ([39886](https://github.com/WordPress/gutenberg/pull/39886))
-- Register and enqueue fonts by font-family. ([39559](https://github.com/WordPress/gutenberg/pull/39559))
-- Return font family slug when registering a webfont. ([40120](https://github.com/WordPress/gutenberg/pull/40120))
+-   Do not trigger warning on already enqueued font families. ([40060](https://github.com/WordPress/gutenberg/pull/40060))
+-   Register webfonts defined in styles variations. ([39886](https://github.com/WordPress/gutenberg/pull/39886))
+-   Register and enqueue fonts by font-family. ([39559](https://github.com/WordPress/gutenberg/pull/39559))
+-   Return font family slug when registering a webfont. ([40120](https://github.com/WordPress/gutenberg/pull/40120))
 
 ### Bug Fixes
 
 #### Block Library
 
-- Avatar:
-- Do not show User Selection inside Comments Loop, on the Site Editor. ([40100](https://github.com/WordPress/gutenberg/pull/40100))
-- Fix wrong aligment. ([39794](https://github.com/WordPress/gutenberg/pull/39794))
-- Buttons: Fix focus on insert. ([39684](https://github.com/WordPress/gutenberg/pull/39684))
-- Comments Query Loop: Fix pagination setting not being applied on frontend. ([40146](https://github.com/WordPress/gutenberg/pull/40146))
-- Group: Fix variation isActive check to cover case where type is not set, but inherit is. ([40065](https://github.com/WordPress/gutenberg/pull/40065))
-- Post Author: Fix duplicate Additional CSS classes post author, etc. ([39759](https://github.com/WordPress/gutenberg/pull/39759))
-- Post Comments Form: Allow to add it to the Site Editor. ([40108](https://github.com/WordPress/gutenberg/pull/40108))
-- Post Template: Add missing wp-block-post class in the editor. ([40010](https://github.com/WordPress/gutenberg/pull/40010))
-- Post Terms: Use variation title in placeholder. ([40092](https://github.com/WordPress/gutenberg/pull/40092))
-- Query Loop: Fix some missing term sanitizations. ([39970](https://github.com/WordPress/gutenberg/pull/39970))
-- RSS: Add missing self-URL check. ([39756](https://github.com/WordPress/gutenberg/pull/39756))
-- Site Logo:
-- Correctly reset the site icon. ([40046](https://github.com/WordPress/gutenberg/pull/40046))
-- Fix duplicate Additional CSS classes site-logo Block & social-link Block. ([39777](https://github.com/WordPress/gutenberg/pull/39777))
-- Fix adding the site icon. ([40041](https://github.com/WordPress/gutenberg/pull/40041))
-- Template Parts: Limit slug to Latin chars. ([38861](https://github.com/WordPress/gutenberg/pull/38861))
+-   Avatar:
+-   Do not show User Selection inside Comments Loop, on the Site Editor. ([40100](https://github.com/WordPress/gutenberg/pull/40100))
+-   Fix wrong aligment. ([39794](https://github.com/WordPress/gutenberg/pull/39794))
+-   Buttons: Fix focus on insert. ([39684](https://github.com/WordPress/gutenberg/pull/39684))
+-   Comments Query Loop: Fix pagination setting not being applied on frontend. ([40146](https://github.com/WordPress/gutenberg/pull/40146))
+-   Group: Fix variation isActive check to cover case where type is not set, but inherit is. ([40065](https://github.com/WordPress/gutenberg/pull/40065))
+-   Post Author: Fix duplicate Additional CSS classes post author, etc. ([39759](https://github.com/WordPress/gutenberg/pull/39759))
+-   Post Comments Form: Allow to add it to the Site Editor. ([40108](https://github.com/WordPress/gutenberg/pull/40108))
+-   Post Template: Add missing wp-block-post class in the editor. ([40010](https://github.com/WordPress/gutenberg/pull/40010))
+-   Post Terms: Use variation title in placeholder. ([40092](https://github.com/WordPress/gutenberg/pull/40092))
+-   Query Loop: Fix some missing term sanitizations. ([39970](https://github.com/WordPress/gutenberg/pull/39970))
+-   RSS: Add missing self-URL check. ([39756](https://github.com/WordPress/gutenberg/pull/39756))
+-   Site Logo:
+-   Correctly reset the site icon. ([40046](https://github.com/WordPress/gutenberg/pull/40046))
+-   Fix duplicate Additional CSS classes site-logo Block & social-link Block. ([39777](https://github.com/WordPress/gutenberg/pull/39777))
+-   Fix adding the site icon. ([40041](https://github.com/WordPress/gutenberg/pull/40041))
+-   Template Parts: Limit slug to Latin chars. ([38861](https://github.com/WordPress/gutenberg/pull/38861))
 
 #### Components
 
-- Components utils: Use Object.assign instead of { ...spread } syntax. ([39932](https://github.com/WordPress/gutenberg/pull/39932))
-- ToggleGroupControl: Reintroduce backdrop animation. ([40021](https://github.com/WordPress/gutenberg/pull/40021))
+-   Components utils: Use Object.assign instead of { ...spread } syntax. ([39932](https://github.com/WordPress/gutenberg/pull/39932))
+-   ToggleGroupControl: Reintroduce backdrop animation. ([40021](https://github.com/WordPress/gutenberg/pull/40021))
 
 #### Block Editor
 
-- List View:
-- Only show ellipsis on first selected item or when focused. ([40174](https://github.com/WordPress/gutenberg/pull/40174))
-- Wrap title of block in \<ListView\> in a span. ([39687](https://github.com/WordPress/gutenberg/pull/39687))
-- Disable dragging when block movement is locked. ([40086](https://github.com/WordPress/gutenberg/pull/40086))
-- Fix list-view focus radius. ([39969](https://github.com/WordPress/gutenberg/pull/39969))
-- MultiSelectSidebar: Fix spacing of color panel items. ([40071](https://github.com/WordPress/gutenberg/pull/40071))
-- Fix Block Editor Iframe component to render in standards mode. ([38855](https://github.com/WordPress/gutenberg/pull/38855))
-- Fix collapsing issue with the URL input suggestion container. ([40147](https://github.com/WordPress/gutenberg/pull/40147))
-- Try: Fix regression with mover and block control sizes. ([40037](https://github.com/WordPress/gutenberg/pull/40037))
+-   List View:
+-   Only show ellipsis on first selected item or when focused. ([40174](https://github.com/WordPress/gutenberg/pull/40174))
+-   Wrap title of block in \<ListView\> in a span. ([39687](https://github.com/WordPress/gutenberg/pull/39687))
+-   Disable dragging when block movement is locked. ([40086](https://github.com/WordPress/gutenberg/pull/40086))
+-   Fix list-view focus radius. ([39969](https://github.com/WordPress/gutenberg/pull/39969))
+-   MultiSelectSidebar: Fix spacing of color panel items. ([40071](https://github.com/WordPress/gutenberg/pull/40071))
+-   Fix Block Editor Iframe component to render in standards mode. ([38855](https://github.com/WordPress/gutenberg/pull/38855))
+-   Fix collapsing issue with the URL input suggestion container. ([40147](https://github.com/WordPress/gutenberg/pull/40147))
+-   Try: Fix regression with mover and block control sizes. ([40037](https://github.com/WordPress/gutenberg/pull/40037))
 
 #### Site Editor
 
-- Add block styles slot to the site editor so block style previews can be rendered. ([40245](https://github.com/WordPress/gutenberg/pull/40245))
+-   Add block styles slot to the site editor so block style previews can be rendered. ([40245](https://github.com/WordPress/gutenberg/pull/40245))
 
 #### Block Locking
 
-- Reusable Blocks: Hide Convert to Blocks when locked. ([39939](https://github.com/WordPress/gutenberg/pull/39939))
-- Template Parts: Hide Detach blocks when locked. ([40000](https://github.com/WordPress/gutenberg/pull/40000))
-- Stabilize settings. ([40145](https://github.com/WordPress/gutenberg/pull/40145))
-- Display block title when no switcher is available. ([40207](https://github.com/WordPress/gutenberg/pull/40207))
+-   Reusable Blocks: Hide Convert to Blocks when locked. ([39939](https://github.com/WordPress/gutenberg/pull/39939))
+-   Template Parts: Hide Detach blocks when locked. ([40000](https://github.com/WordPress/gutenberg/pull/40000))
+-   Stabilize settings. ([40145](https://github.com/WordPress/gutenberg/pull/40145))
+-   Display block title when no switcher is available. ([40207](https://github.com/WordPress/gutenberg/pull/40207))
 
 #### Styles Sidebar
 
-- Fix global style variations previews not showing correct height. ([39737](https://github.com/WordPress/gutenberg/pull/39737))
-- Restore defaultPalette/defaultGradients to only hide UI. ([39966](https://github.com/WordPress/gutenberg/pull/39966))
-- Global Styles: Fix alignment of Global Styles color controls. ([40081](https://github.com/WordPress/gutenberg/pull/40081))
-- Global Styles: Fix black inconsistencies in sidebar. ([40055](https://github.com/WordPress/gutenberg/pull/40055))
+-   Fix global style variations previews not showing correct height. ([39737](https://github.com/WordPress/gutenberg/pull/39737))
+-   Restore defaultPalette/defaultGradients to only hide UI. ([39966](https://github.com/WordPress/gutenberg/pull/39966))
+-   Global Styles: Fix alignment of Global Styles color controls. ([40081](https://github.com/WordPress/gutenberg/pull/40081))
+-   Global Styles: Fix black inconsistencies in sidebar. ([40055](https://github.com/WordPress/gutenberg/pull/40055))
 
 #### Design Tools
 
-- Block gap: Check for splitOnAxis in the onChange callback. ([39788](https://github.com/WordPress/gutenberg/pull/39788))
-- Duotone: Backport changes made to duotone in core. ([40067](https://github.com/WordPress/gutenberg/pull/40067))
-- Layout: Only show inherit toggle in default layout (hide on Row block variation). ([39665](https://github.com/WordPress/gutenberg/pull/39665))
+-   Block gap: Check for splitOnAxis in the onChange callback. ([39788](https://github.com/WordPress/gutenberg/pull/39788))
+-   Duotone: Backport changes made to duotone in core. ([40067](https://github.com/WordPress/gutenberg/pull/40067))
+-   Layout: Only show inherit toggle in default layout (hide on Row block variation). ([39665](https://github.com/WordPress/gutenberg/pull/39665))
 
 #### Meta Boxes
 
-- Fix incorrect meta box position when switching device preview. ([38910](https://github.com/WordPress/gutenberg/pull/38910))
+-   Fix incorrect meta box position when switching device preview. ([38910](https://github.com/WordPress/gutenberg/pull/38910))
 
 #### Other packages
 
-- Data: Exclude all meta-selectors, handle selectors without resolvers. ([39976](https://github.com/WordPress/gutenberg/pull/39976))
-- Date: Fix ordinal token (S), RFC2822 token (r), and timezone offset handling. ([39670](https://github.com/WordPress/gutenberg/pull/39670))
-- RichText: Fix splitValue with undefined selection. ([39822](https://github.com/WordPress/gutenberg/pull/39822))
-- Scripts: Add vendor/ to .markdownlintignore. ([39724](https://github.com/WordPress/gutenberg/pull/39724))
+-   Data: Exclude all meta-selectors, handle selectors without resolvers. ([39976](https://github.com/WordPress/gutenberg/pull/39976))
+-   Date: Fix ordinal token (S), RFC2822 token (r), and timezone offset handling. ([39670](https://github.com/WordPress/gutenberg/pull/39670))
+-   RichText: Fix splitValue with undefined selection. ([39822](https://github.com/WordPress/gutenberg/pull/39822))
+-   Scripts: Add vendor/ to .markdownlintignore. ([39724](https://github.com/WordPress/gutenberg/pull/39724))
 
 ### Plugin
 
-- Fix REST API class redeclaration. ([40265](https://github.com/WordPress/gutenberg/pull/40265))
+-   Fix REST API class redeclaration. ([40265](https://github.com/WordPress/gutenberg/pull/40265))
 
 ### Accessibility
 
-- Add select-parent button to block toolbar More options menu. ([40105](https://github.com/WordPress/gutenberg/pull/40105))
-- Hide block movers in new navigation sidebar. ([40039](https://github.com/WordPress/gutenberg/pull/40039))
-- Accessibility improvements to the query pagination block. ([39536](https://github.com/WordPress/gutenberg/pull/39536))
-- Conditionally set secondary sidebar landmark region labels. ([40296](https://github.com/WordPress/gutenberg/pull/40296))
-- List View: Indicate locked status in block label. ([40270](https://github.com/WordPress/gutenberg/pull/40270))
+-   Add select-parent button to block toolbar More options menu. ([40105](https://github.com/WordPress/gutenberg/pull/40105))
+-   Hide block movers in new navigation sidebar. ([40039](https://github.com/WordPress/gutenberg/pull/40039))
+-   Accessibility improvements to the query pagination block. ([39536](https://github.com/WordPress/gutenberg/pull/39536))
+-   Conditionally set secondary sidebar landmark region labels. ([40296](https://github.com/WordPress/gutenberg/pull/40296))
+-   List View: Indicate locked status in block label. ([40270](https://github.com/WordPress/gutenberg/pull/40270))
 
 ### Performance
 
-- Optimize getClientIdsOfDescendants and getClientIdsWithDescendants selectors. ([40054](https://github.com/WordPress/gutenberg/pull/40054))
-- Try to optimize getClientIdsOfDescendants using createSelector memoization. ([40112](https://github.com/WordPress/gutenberg/pull/40112))
+-   Optimize getClientIdsOfDescendants and getClientIdsWithDescendants selectors. ([40054](https://github.com/WordPress/gutenberg/pull/40054))
+-   Try to optimize getClientIdsOfDescendants using createSelector memoization. ([40112](https://github.com/WordPress/gutenberg/pull/40112))
 
 ### Developer Experience
 
-- create-block: Add npmDevDependencies as a template variable. ([39723](https://github.com/WordPress/gutenberg/pull/39723))
-- Schemas, block.json:
-- Add ancestor prop to schema. ([39894](https://github.com/WordPress/gutenberg/pull/39894))
-- Add supports.lock to schema. ([40161](https://github.com/WordPress/gutenberg/pull/40161))
-- Schemas, theme.json:
-- Add Avatar to schema. ([40189](https://github.com/WordPress/gutenberg/pull/40189))
-- Add title key to i18n schema. ([39936](https://github.com/WordPress/gutenberg/pull/39936))
-- Scripts: Add new flag to allow customization of the src directory. ([39618](https://github.com/WordPress/gutenberg/pull/39618))
+-   create-block: Add npmDevDependencies as a template variable. ([39723](https://github.com/WordPress/gutenberg/pull/39723))
+-   Schemas, block.json:
+-   Add ancestor prop to schema. ([39894](https://github.com/WordPress/gutenberg/pull/39894))
+-   Add supports.lock to schema. ([40161](https://github.com/WordPress/gutenberg/pull/40161))
+-   Schemas, theme.json:
+-   Add Avatar to schema. ([40189](https://github.com/WordPress/gutenberg/pull/40189))
+-   Add title key to i18n schema. ([39936](https://github.com/WordPress/gutenberg/pull/39936))
+-   Scripts: Add new flag to allow customization of the src directory. ([39618](https://github.com/WordPress/gutenberg/pull/39618))
 
 ### Experiments
 
-- List v2:
-- Add migration from v1 to v2. ([39799](https://github.com/WordPress/gutenberg/pull/39799), [39892](https://github.com/WordPress/gutenberg/pull/39892))
-- Add new list item icon. ([39929](https://github.com/WordPress/gutenberg/pull/39929))
-- Avoid using global select. ([39821](https://github.com/WordPress/gutenberg/pull/39821), [39849](https://github.com/WordPress/gutenberg/pull/39849))
-- Handle Enter in empty list items. ([39858](https://github.com/WordPress/gutenberg/pull/39858))
-- Outdent and Indent actions for the list block v2. ([39773](https://github.com/WordPress/gutenberg/pull/39773))
-- Quote v2:
-- Add \_\_experimentalEnableQuoteBlockV2 flag. ([40089](https://github.com/WordPress/gutenberg/pull/40089))
-- Add align feature to have feature parity with v1. ([39876](https://github.com/WordPress/gutenberg/pull/39876))
-- Add innerblocks support. ([39704](https://github.com/WordPress/gutenberg/pull/39704))
-- Add migration. ([39844](https://github.com/WordPress/gutenberg/pull/39844))
-- Add transforms. ([39718](https://github.com/WordPress/gutenberg/pull/39718))
-- Bootstrap flag in experiments page. ([39703](https://github.com/WordPress/gutenberg/pull/39703))
-- Retain selection after transform. ([39838](https://github.com/WordPress/gutenberg/pull/39838))
-- Revert markup changes. ([39824](https://github.com/WordPress/gutenberg/pull/39824))
-- Fix how attributes are registered. ([39729](https://github.com/WordPress/gutenberg/pull/39729))
-- \_\_experimentalBlockPatterns: Load them with REST API. ([39185](https://github.com/WordPress/gutenberg/pull/39185))
+-   List v2:
+-   Add migration from v1 to v2. ([39799](https://github.com/WordPress/gutenberg/pull/39799), [39892](https://github.com/WordPress/gutenberg/pull/39892))
+-   Add new list item icon. ([39929](https://github.com/WordPress/gutenberg/pull/39929))
+-   Avoid using global select. ([39821](https://github.com/WordPress/gutenberg/pull/39821), [39849](https://github.com/WordPress/gutenberg/pull/39849))
+-   Handle Enter in empty list items. ([39858](https://github.com/WordPress/gutenberg/pull/39858))
+-   Outdent and Indent actions for the list block v2. ([39773](https://github.com/WordPress/gutenberg/pull/39773))
+-   Quote v2:
+-   Add \_\_experimentalEnableQuoteBlockV2 flag. ([40089](https://github.com/WordPress/gutenberg/pull/40089))
+-   Add align feature to have feature parity with v1. ([39876](https://github.com/WordPress/gutenberg/pull/39876))
+-   Add innerblocks support. ([39704](https://github.com/WordPress/gutenberg/pull/39704))
+-   Add migration. ([39844](https://github.com/WordPress/gutenberg/pull/39844))
+-   Add transforms. ([39718](https://github.com/WordPress/gutenberg/pull/39718))
+-   Bootstrap flag in experiments page. ([39703](https://github.com/WordPress/gutenberg/pull/39703))
+-   Retain selection after transform. ([39838](https://github.com/WordPress/gutenberg/pull/39838))
+-   Revert markup changes. ([39824](https://github.com/WordPress/gutenberg/pull/39824))
+-   Fix how attributes are registered. ([39729](https://github.com/WordPress/gutenberg/pull/39729))
+-   \_\_experimentalBlockPatterns: Load them with REST API. ([39185](https://github.com/WordPress/gutenberg/pull/39185))
 
 ### Documentation
 
-- Add missing props mediaPreview in the ReadMe. ([38114](https://github.com/WordPress/gutenberg/pull/38114))
-- Add note to Handbook themes page about FSE eligible themes. ([39662](https://github.com/WordPress/gutenberg/pull/39662))
-- Adds links to contributing pages to README file. ([39959](https://github.com/WordPress/gutenberg/pull/39959))
-- Block-Editor Docs: Link to component readme. ([37975](https://github.com/WordPress/gutenberg/pull/37975))
-- Components: Add changelogs for new border control components. ([39747](https://github.com/WordPress/gutenberg/pull/39747))
-- Components: Add more prominent documentation around popover use. ([39709](https://github.com/WordPress/gutenberg/pull/39709))
-- Disabled: Add documentation for Disabled.Context. ([39627](https://github.com/WordPress/gutenberg/pull/39627))
-- Docs: Update README.md for FormToggle component. ([36932](https://github.com/WordPress/gutenberg/pull/36932))
-- Docs: Update block-filters.md. ([38462](https://github.com/WordPress/gutenberg/pull/38462))
-- FIX missing images of Gutenberg Data Apps document. ([39499](https://github.com/WordPress/gutenberg/pull/39499))
-- Fix grammar error in documentation. ([40009](https://github.com/WordPress/gutenberg/pull/40009))
-- Fix linguistic error in theme-json.md. ([39995](https://github.com/WordPress/gutenberg/pull/39995))
-- Import the Notice package in the example. ([40022](https://github.com/WordPress/gutenberg/pull/40022))
-- Sidebar: Update post editor help links to use newer documentation. ([39688](https://github.com/WordPress/gutenberg/pull/39688))
-- Style Engine: Remove since 6.0 comment. ([40006](https://github.com/WordPress/gutenberg/pull/40006))
-- Update typo in the code comment. ([39429](https://github.com/WordPress/gutenberg/pull/39429))
-- Updating versions in WordPress to add 5.9.x & 6.0. ([39866](https://github.com/WordPress/gutenberg/pull/39866))
+-   Add missing props mediaPreview in the ReadMe. ([38114](https://github.com/WordPress/gutenberg/pull/38114))
+-   Add note to Handbook themes page about FSE eligible themes. ([39662](https://github.com/WordPress/gutenberg/pull/39662))
+-   Adds links to contributing pages to README file. ([39959](https://github.com/WordPress/gutenberg/pull/39959))
+-   Block-Editor Docs: Link to component readme. ([37975](https://github.com/WordPress/gutenberg/pull/37975))
+-   Components: Add changelogs for new border control components. ([39747](https://github.com/WordPress/gutenberg/pull/39747))
+-   Components: Add more prominent documentation around popover use. ([39709](https://github.com/WordPress/gutenberg/pull/39709))
+-   Disabled: Add documentation for Disabled.Context. ([39627](https://github.com/WordPress/gutenberg/pull/39627))
+-   Docs: Update README.md for FormToggle component. ([36932](https://github.com/WordPress/gutenberg/pull/36932))
+-   Docs: Update block-filters.md. ([38462](https://github.com/WordPress/gutenberg/pull/38462))
+-   FIX missing images of Gutenberg Data Apps document. ([39499](https://github.com/WordPress/gutenberg/pull/39499))
+-   Fix grammar error in documentation. ([40009](https://github.com/WordPress/gutenberg/pull/40009))
+-   Fix linguistic error in theme-json.md. ([39995](https://github.com/WordPress/gutenberg/pull/39995))
+-   Import the Notice package in the example. ([40022](https://github.com/WordPress/gutenberg/pull/40022))
+-   Sidebar: Update post editor help links to use newer documentation. ([39688](https://github.com/WordPress/gutenberg/pull/39688))
+-   Style Engine: Remove since 6.0 comment. ([40006](https://github.com/WordPress/gutenberg/pull/40006))
+-   Update typo in the code comment. ([39429](https://github.com/WordPress/gutenberg/pull/39429))
+-   Updating versions in WordPress to add 5.9.x & 6.0. ([39866](https://github.com/WordPress/gutenberg/pull/39866))
 
 ### Code Quality
 
 #### Block Library
-- Avatar: Two unneeded spaces removed. ([39902](https://github.com/WordPress/gutenberg/pull/39902))
-- List: List block indent outdent naming. ([39956](https://github.com/WordPress/gutenberg/pull/39956))
-- HTML: Use Disabled.Context. ([39669](https://github.com/WordPress/gutenberg/pull/39669))
-- Gallery: Use wp\_unique\_id() instead of uniqid() in block\_core\_gallery\_render(). ([39983](https://github.com/WordPress/gutenberg/pull/39983))
+
+-   Avatar: Two unneeded spaces removed. ([39902](https://github.com/WordPress/gutenberg/pull/39902))
+-   List: List block indent outdent naming. ([39956](https://github.com/WordPress/gutenberg/pull/39956))
+-   HTML: Use Disabled.Context. ([39669](https://github.com/WordPress/gutenberg/pull/39669))
+-   Gallery: Use wp_unique_id() instead of uniqid() in block_core_gallery_render(). ([39983](https://github.com/WordPress/gutenberg/pull/39983))
 
 #### Block Editor
 
-- Block Lock toolbar remove leftovers. ([39881](https://github.com/WordPress/gutenberg/pull/39881))
-- List View: Remove unwanted default false in ListView branch component. ([39719](https://github.com/WordPress/gutenberg/pull/39719))
+-   Block Lock toolbar remove leftovers. ([39881](https://github.com/WordPress/gutenberg/pull/39881))
+-   List View: Remove unwanted default false in ListView branch component. ([39719](https://github.com/WordPress/gutenberg/pull/39719))
 
 #### Components
 
-- BaseControl: Migrate to TypeScript. ([39468](https://github.com/WordPress/gutenberg/pull/39468))
+-   BaseControl: Migrate to TypeScript. ([39468](https://github.com/WordPress/gutenberg/pull/39468))
 
 #### Plugin
 
-- Add the missing class-wp-style-engine-gutenberg.php in the plugin build ([40191](https://github.com/WordPress/gutenberg/pull/40191))
-- Block Editor: Stabilize generateAnchors setting. ([40143](https://github.com/WordPress/gutenberg/pull/40143))
-- Correctly classify functionality in the lib folder. ([39972](https://github.com/WordPress/gutenberg/pull/39972))
-- Consolidate WP\_Theme\_JSON\_Resolver changes in both lib/compat/wordpress-6.0 and lib/experimental. ([40140](https://github.com/WordPress/gutenberg/pull/40140))
-- Don't run preg\_match() on null values. ([39927](https://github.com/WordPress/gutenberg/pull/39927))
-- Guard code from redeclaration errors after WP core merge. ([39888](https://github.com/WordPress/gutenberg/pull/39888))
-- Move files from lib to the compat subfolder. ([39904](https://github.com/WordPress/gutenberg/pull/39904))
-- Move changes from [\#38681](https://github.com/WordPress/gutenberg/pull/38681) and [\#39966](https://github.com/WordPress/gutenberg/pull/39966) to compat 6.0. ([40123](https://github.com/WordPress/gutenberg/pull/40123))
-- Plugin: Ensure that PHP code for blocks is correctly assigned to WP releases. ([40179](https://github.com/WordPress/gutenberg/pull/40179))
-- Remove the experimental Progressive Web Apps (PWA) integration. ([38810](https://github.com/WordPress/gutenberg/pull/38810))
-- Revert Plugin: Remove the experimental Progressive Web Apps (PWA) integration. ([39930](https://github.com/WordPress/gutenberg/pull/39930))
-- Theme JSON compat: Refer to static instead of self for ROOT\_BLOCK\_SELECTOR const. ([39921](https://github.com/WordPress/gutenberg/pull/39921))
-- i18n: Add context to 'None' strings. ([40273](https://github.com/WordPress/gutenberg/pull/40273))
+-   Add the missing class-wp-style-engine-gutenberg.php in the plugin build ([40191](https://github.com/WordPress/gutenberg/pull/40191))
+-   Block Editor: Stabilize generateAnchors setting. ([40143](https://github.com/WordPress/gutenberg/pull/40143))
+-   Correctly classify functionality in the lib folder. ([39972](https://github.com/WordPress/gutenberg/pull/39972))
+-   Consolidate WP_Theme_JSON_Resolver changes in both lib/compat/wordpress-6.0 and lib/experimental. ([40140](https://github.com/WordPress/gutenberg/pull/40140))
+-   Don't run preg_match() on null values. ([39927](https://github.com/WordPress/gutenberg/pull/39927))
+-   Guard code from redeclaration errors after WP core merge. ([39888](https://github.com/WordPress/gutenberg/pull/39888))
+-   Move files from lib to the compat subfolder. ([39904](https://github.com/WordPress/gutenberg/pull/39904))
+-   Move changes from [\#38681](https://github.com/WordPress/gutenberg/pull/38681) and [\#39966](https://github.com/WordPress/gutenberg/pull/39966) to compat 6.0. ([40123](https://github.com/WordPress/gutenberg/pull/40123))
+-   Plugin: Ensure that PHP code for blocks is correctly assigned to WP releases. ([40179](https://github.com/WordPress/gutenberg/pull/40179))
+-   Remove the experimental Progressive Web Apps (PWA) integration. ([38810](https://github.com/WordPress/gutenberg/pull/38810))
+-   Revert Plugin: Remove the experimental Progressive Web Apps (PWA) integration. ([39930](https://github.com/WordPress/gutenberg/pull/39930))
+-   Theme JSON compat: Refer to static instead of self for ROOT_BLOCK_SELECTOR const. ([39921](https://github.com/WordPress/gutenberg/pull/39921))
+-   i18n: Add context to 'None' strings. ([40273](https://github.com/WordPress/gutenberg/pull/40273))
 
 #### Packages
 
-- Core Data:
-- Migrate entities.js to Typescript. ([39547](https://github.com/WordPress/gutenberg/pull/39547))
-- Rename core-data/src/selectors.js to selectors.ts (TypeScript). ([40026](https://github.com/WordPress/gutenberg/pull/40026))
-- Fixes necessary for converting to TypeScript. ([39211](https://github.com/WordPress/gutenberg/pull/39211))
-- Create type for undo state and initialize atomically. ([39659](https://github.com/WordPress/gutenberg/pull/39659))
-- Expand type signature of useQuerySelect. ([39656](https://github.com/WordPress/gutenberg/pull/39656))
-- Fix minor type issue in onSubKey. ([39655](https://github.com/WordPress/gutenberg/pull/39655))
-- Data:
-- Mark/data apis unstable. ([40028](https://github.com/WordPress/gutenberg/pull/40028))
-- Two code improvements. ([39975](https://github.com/WordPress/gutenberg/pull/39975))
-- Scripts: Fix typo in the webpack configuration. ([39867](https://github.com/WordPress/gutenberg/pull/39867))
+-   Core Data:
+-   Migrate entities.js to Typescript. ([39547](https://github.com/WordPress/gutenberg/pull/39547))
+-   Rename core-data/src/selectors.js to selectors.ts (TypeScript). ([40026](https://github.com/WordPress/gutenberg/pull/40026))
+-   Fixes necessary for converting to TypeScript. ([39211](https://github.com/WordPress/gutenberg/pull/39211))
+-   Create type for undo state and initialize atomically. ([39659](https://github.com/WordPress/gutenberg/pull/39659))
+-   Expand type signature of useQuerySelect. ([39656](https://github.com/WordPress/gutenberg/pull/39656))
+-   Fix minor type issue in onSubKey. ([39655](https://github.com/WordPress/gutenberg/pull/39655))
+-   Data:
+-   Mark/data apis unstable. ([40028](https://github.com/WordPress/gutenberg/pull/40028))
+-   Two code improvements. ([39975](https://github.com/WordPress/gutenberg/pull/39975))
+-   Scripts: Fix typo in the webpack configuration. ([39867](https://github.com/WordPress/gutenberg/pull/39867))
 
 #### REST API
 
-- Block patterns REST endpoint: Use snake case for field names. ([40254](https://github.com/WordPress/gutenberg/pull/40254))
-- Update patterns REST controllers namespace to stable. ([40252](https://github.com/WordPress/gutenberg/pull/40252))
+-   Block patterns REST endpoint: Use snake case for field names. ([40254](https://github.com/WordPress/gutenberg/pull/40254))
+-   Update patterns REST controllers namespace to stable. ([40252](https://github.com/WordPress/gutenberg/pull/40252))
 
 #### Styles
 
-- Rename name to title in the global style variations. ([39715](https://github.com/WordPress/gutenberg/pull/39715))
+-   Rename name to title in the global style variations. ([39715](https://github.com/WordPress/gutenberg/pull/39715))
 
 ### Tools
 
 #### Linting
 
-- Revert unwanted breaking changes in eslint-plugin. ([39745](https://github.com/WordPress/gutenberg/pull/39745))
-- UseBlockDisplayTitle fix ESLint warning. ([39815](https://github.com/WordPress/gutenberg/pull/39815))
-- UseEntityRecord(s) fix ESLint warning. ([39852](https://github.com/WordPress/gutenberg/pull/39852))
+-   Revert unwanted breaking changes in eslint-plugin. ([39745](https://github.com/WordPress/gutenberg/pull/39745))
+-   UseBlockDisplayTitle fix ESLint warning. ([39815](https://github.com/WordPress/gutenberg/pull/39815))
+-   UseEntityRecord(s) fix ESLint warning. ([39852](https://github.com/WordPress/gutenberg/pull/39852))
 
 #### Testing
 
-- ActivateTheme wait for the user to switch. ([39873](https://github.com/WordPress/gutenberg/pull/39873))
-- Add a unit test for wp\_recursive\_ksort. ([40149](https://github.com/WordPress/gutenberg/pull/40149))
-- Check for missing figcaption before clicking gallery image again from list view. ([39666](https://github.com/WordPress/gutenberg/pull/39666))
-- Comments Query Loop: Add end-to-end tests for the block. ([39502](https://github.com/WordPress/gutenberg/pull/39502))
-- waitForNavigation in Comments Query Loop test. ([39818](https://github.com/WordPress/gutenberg/pull/39818))
-- Fix flaky issue reporter not splitting ... separator. ([40129](https://github.com/WordPress/gutenberg/pull/40129))
-- Fix flaky test results overflowing the character limits of GitHub's issue. ([39928](https://github.com/WordPress/gutenberg/pull/39928))
-- ListView: Fix end-to-end flakiness. ([39742](https://github.com/WordPress/gutenberg/pull/39742))
-- Migrate customizing-widgets to Playwright. ([39540](https://github.com/WordPress/gutenberg/pull/39540))
-- Migrate cut-copy-paste-whole-blocks to Playwright. ([39807](https://github.com/WordPress/gutenberg/pull/39807))
-- Migrate new-post to Playwright. ([39539](https://github.com/WordPress/gutenberg/pull/39539))
-- Navigaton block: Fix flaky test by finalising request resolution in Nav block end-to-end test. ([39633](https://github.com/WordPress/gutenberg/pull/39633))
-- Navigation Editor: Skip failing navigation editor tests. ([39746](https://github.com/WordPress/gutenberg/pull/39746))
-- Style variations: Apply style variations using labels. ([39725](https://github.com/WordPress/gutenberg/pull/39725))
-- Template Mode: Try fix flaky tests. ([39711](https://github.com/WordPress/gutenberg/pull/39711))
-- Template parts: Try fixing template part tests again. ([40007](https://github.com/WordPress/gutenberg/pull/40007))
-- Use a description that matches the filename for the annotations end-to-end tests. ([40011](https://github.com/WordPress/gutenberg/pull/40011))
-- Use templates endpoint to delete templates. ([39965](https://github.com/WordPress/gutenberg/pull/39965))
+-   ActivateTheme wait for the user to switch. ([39873](https://github.com/WordPress/gutenberg/pull/39873))
+-   Add a unit test for wp_recursive_ksort. ([40149](https://github.com/WordPress/gutenberg/pull/40149))
+-   Check for missing figcaption before clicking gallery image again from list view. ([39666](https://github.com/WordPress/gutenberg/pull/39666))
+-   Comments Query Loop: Add end-to-end tests for the block. ([39502](https://github.com/WordPress/gutenberg/pull/39502))
+-   waitForNavigation in Comments Query Loop test. ([39818](https://github.com/WordPress/gutenberg/pull/39818))
+-   Fix flaky issue reporter not splitting ... separator. ([40129](https://github.com/WordPress/gutenberg/pull/40129))
+-   Fix flaky test results overflowing the character limits of GitHub's issue. ([39928](https://github.com/WordPress/gutenberg/pull/39928))
+-   ListView: Fix end-to-end flakiness. ([39742](https://github.com/WordPress/gutenberg/pull/39742))
+-   Migrate customizing-widgets to Playwright. ([39540](https://github.com/WordPress/gutenberg/pull/39540))
+-   Migrate cut-copy-paste-whole-blocks to Playwright. ([39807](https://github.com/WordPress/gutenberg/pull/39807))
+-   Migrate new-post to Playwright. ([39539](https://github.com/WordPress/gutenberg/pull/39539))
+-   Navigaton block: Fix flaky test by finalising request resolution in Nav block end-to-end test. ([39633](https://github.com/WordPress/gutenberg/pull/39633))
+-   Navigation Editor: Skip failing navigation editor tests. ([39746](https://github.com/WordPress/gutenberg/pull/39746))
+-   Style variations: Apply style variations using labels. ([39725](https://github.com/WordPress/gutenberg/pull/39725))
+-   Template Mode: Try fix flaky tests. ([39711](https://github.com/WordPress/gutenberg/pull/39711))
+-   Template parts: Try fixing template part tests again. ([40007](https://github.com/WordPress/gutenberg/pull/40007))
+-   Use a description that matches the filename for the annotations end-to-end tests. ([40011](https://github.com/WordPress/gutenberg/pull/40011))
+-   Use templates endpoint to delete templates. ([39965](https://github.com/WordPress/gutenberg/pull/39965))
 
 #### Build Tooling
 
-- Add peer deps for postcss and end-to-end tests. ([39080](https://github.com/WordPress/gutenberg/pull/39080))
-- Plugin: Pin dependencies that slipped into trunk. ([39865](https://github.com/WordPress/gutenberg/pull/39865))
-- Mark new blocks to be included in WordPress core. ([40186](https://github.com/WordPress/gutenberg/pull/40186))
-- Style engine: Move backend scripts to package. ([39736](https://github.com/WordPress/gutenberg/pull/39736))
-- Scripts: Add .jsx file extension to Webpack. ([39613](https://github.com/WordPress/gutenberg/pull/39613))
-- Tooling: Escape quotes in npm scripts. ([39447](https://github.com/WordPress/gutenberg/pull/39447))
+-   Add peer deps for postcss and end-to-end tests. ([39080](https://github.com/WordPress/gutenberg/pull/39080))
+-   Plugin: Pin dependencies that slipped into trunk. ([39865](https://github.com/WordPress/gutenberg/pull/39865))
+-   Mark new blocks to be included in WordPress core. ([40186](https://github.com/WordPress/gutenberg/pull/40186))
+-   Style engine: Move backend scripts to package. ([39736](https://github.com/WordPress/gutenberg/pull/39736))
+-   Scripts: Add .jsx file extension to Webpack. ([39613](https://github.com/WordPress/gutenberg/pull/39613))
+-   Tooling: Escape quotes in npm scripts. ([39447](https://github.com/WordPress/gutenberg/pull/39447))
 
 #### Project management
 
-- Remove Antonis as codeowner. ([39697](https://github.com/WordPress/gutenberg/pull/39697))
+-   Remove Antonis as codeowner. ([39697](https://github.com/WordPress/gutenberg/pull/39697))
 
 ## Contributors
 
@@ -6037,366 +30228,309 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @ajlende @alexstine @andrewserong @annezazu @arcangelini @aristath @arthur791004 @atachibana @c4rl0sbr4v0 @carolinan @chintu51 @ciampo @dali-rajab @DAreRodz @dd32 @delowardev @dmsnell @draganescu @EliezerSPP @ellatrix @fluiddot @geriux @getdave @glendaviesnz @grappler @gwwar @gziolo @HILAYTRIVEDI @hypest @imangm @jakeparis @jameskoster @jasmussen @jezemery @jorgefilipecosta @jostnes @jsnajdr @JustinyAhin @kadimi @karolinakulinska @kevin940726 @MaggieCabrera @Mamaduka @mburridge @mchowning @michalczaplinski @mirka @ndiego @NekoJonez @noahtallen @noisysocks @ntsekouras @oandregal @ockham @ramonjd @ryanwelcher @scruffian @shimotmk @SiobhyB @sunil25393 @t-hamano @talldan @tomalec @tomasztunik @westonruter @youknowriad @zaguiini @ZebulanStanphill
 
-
-
-
 = 12.9.0 =
 
+## Changelog
 
+### Features
 
-## **Changelog**
-
-
-### **Features**
-
-
-#### **Block Library**
-
-* Block Editor: Introduce block locking UI. ([39183](https://github.com/WordPress/gutenberg/pull/39183))
-* Post Date: Allow user to pick Site Default, a suggested date format, or a custom date format. ([39209](https://github.com/WordPress/gutenberg/pull/39209))
-* Try: "No results" block container for the query block. ([38806](https://github.com/WordPress/gutenberg/pull/38806))
-
-
-### **Enhancements**
-
-
-#### **Accessibility**
-
-* Add aria label to Nav block on front of site. ([39161](https://github.com/WordPress/gutenberg/pull/39161))
-* Add button text labels to site editor. ([38317](https://github.com/WordPress/gutenberg/pull/38317))
-* Prevent focus loss after removing a block from List View. ([39031](https://github.com/WordPress/gutenberg/pull/39031))
-
-
-#### **Components**
-
-* Add onClick prop to FormFileUpload. ([39268](https://github.com/WordPress/gutenberg/pull/39268))
-* CheckboxControl: Support indeterminate state. ([39462](https://github.com/WordPress/gutenberg/pull/39462))
-* List View: Add multi-select support for shift + Home and End keys. ([39272](https://github.com/WordPress/gutenberg/pull/39272))
-* `BoxControl`: Stop using `UnitControl`'s deprecated `unit` prop. ([39511](https://github.com/WordPress/gutenberg/pull/39511))
-* `FocalPointPicker`: Stop using `UnitControl`'s deprecated `unit` prop. ([39504](https://github.com/WordPress/gutenberg/pull/39504))
-* `ColorPalette`: Refine the label of the custom color button. ([39386](https://github.com/WordPress/gutenberg/pull/39386))
-* Rich text: Allow behaviour to be overridden by ref. ([39631](https://github.com/WordPress/gutenberg/pull/39631))
-* Add id prop to ListView. ([39494](https://github.com/WordPress/gutenberg/pull/39494))
-* Collapse list view by default in Site Editor. ([39573](https://github.com/WordPress/gutenberg/pull/39573))
-* Collapse list view by default in all editors. ([39611](https://github.com/WordPress/gutenberg/pull/39611))
-* Add prop to control default expand/collapse state of ListView nodes. ([39486](https://github.com/WordPress/gutenberg/pull/39486))
-* BaseControl: Add opt-in prop for margin-free styles. ([39325](https://github.com/WordPress/gutenberg/pull/39325))
-* CustomSelectControl: Add flag for larger default size. ([39401](https://github.com/WordPress/gutenberg/pull/39401))
-* RangeControl: Refactor stories to use Controls. ([39357](https://github.com/WordPress/gutenberg/pull/39357))
-
-
-#### **Block Library**
-
-* Cover: Use Snackbar to display upload errors. ([39428](https://github.com/WordPress/gutenberg/pull/39428))
-* Spacer block: Use same `min` value resizable box and controls, remove `max` limit. ([39577](https://github.com/WordPress/gutenberg/pull/39577))
-* Block Title: truncate all block labels/titles. ([39416](https://github.com/WordPress/gutenberg/pull/39416))
-* Add `NumberControl` to support min/max font size for `Tag Cloud Block`. ([37311](https://github.com/WordPress/gutenberg/pull/37311))
-* Embeds: Update the Wolfram embed name. ([39528](https://github.com/WordPress/gutenberg/pull/39528))
-* Flag invalid Navigation Link items. ([31716](https://github.com/WordPress/gutenberg/pull/31716))
-* Gallery block: Add gap support. ([38164](https://github.com/WordPress/gutenberg/pull/38164))
-* Separator block: Refactor to use color block supports. ([38428](https://github.com/WordPress/gutenberg/pull/38428))
-
-
-#### **Post Editor**
-
-* Migrate post editor `editorMode` to use preferences store and remove `localAutosaveInterval` preference. ([39180](https://github.com/WordPress/gutenberg/pull/39180))
-* Migrate post editor preferred style variations to preferences store. ([39337](https://github.com/WordPress/gutenberg/pull/39337))
-* Show 'View Preview' link for 'Draft Saved' Snackbar notice. ([39482](https://github.com/WordPress/gutenberg/pull/39482))
-
-
-#### **Site editor**
-
-* Add preferences modal to site editor. ([39485](https://github.com/WordPress/gutenberg/pull/39485))
-* Site Editor: Add more template types. ([39353](https://github.com/WordPress/gutenberg/pull/39353))
-* Theme Export: Export the whole theme. ([39202](https://github.com/WordPress/gutenberg/pull/39202))
-* Theme Export: Use the theme name for the zip file. ([39471](https://github.com/WordPress/gutenberg/pull/39471))
-
-
-#### **Navigation editor**
-
-* Migrate navigation editor selected menu to preferences store. ([39606](https://github.com/WordPress/gutenberg/pull/39606))
-
-
-#### **Testing**
-
-* Add `@testing-library/user-event` to the project. ([39360](https://github.com/WordPress/gutenberg/pull/39360))
-
-
-#### **Webfonts**
-
-* Change class properties from static to instance members. ([39361](https://github.com/WordPress/gutenberg/pull/39361))
-
-
-#### **Icons**
-
-* Update lock and unlock icons to be smaller. ([39252](https://github.com/WordPress/gutenberg/pull/39252))
-
-
-#### **Extensibility**
-
-* Set $name on WP_Block_Editor_Context. ([39299](https://github.com/WordPress/gutenberg/pull/39299))
-
-
-#### **CSS & Styling**
-
-* Layout: Use CSS logical properties for margin top and bottom. ([38816](https://github.com/WordPress/gutenberg/pull/38816))
-
-
-#### **Design Tools**
-
-* Block spacing: Block-level axial gap block support. ([37736](https://github.com/WordPress/gutenberg/pull/37736))
-
-
-### **New APIs**
-
-
-#### **Block API**
-
-* Blocks: Deprecate `isValidBlockContent`. ([38794](https://github.com/WordPress/gutenberg/pull/38794))
-* Blocks: Remember raw source block for invalid blocks. ([38923](https://github.com/WordPress/gutenberg/pull/38923))
-* Blocks: Add flag in `parse` to skip logging migration details from patterns parsing. ([39404](https://github.com/WordPress/gutenberg/pull/39404))
-
-
-#### **Block Library**
-
-* Block Patterns: Automatically load files with headers from a theme's `/patterns` directory. ([36751](https://github.com/WordPress/gutenberg/pull/36751))
-
-
-### **Bug Fixes**
-
+#### Block Library
 
-#### **Core data**
+-   Block Editor: Introduce block locking UI. ([39183](https://github.com/WordPress/gutenberg/pull/39183))
+-   Post Date: Allow user to pick Site Default, a suggested date format, or a custom date format. ([39209](https://github.com/WordPress/gutenberg/pull/39209))
+-   Try: "No results" block container for the query block. ([38806](https://github.com/WordPress/gutenberg/pull/38806))
 
-* Revert addition of Navigation entity. ([39572](https://github.com/WordPress/gutenberg/pull/39572))
-* Add raw attributes configuration for media entity. ([39512](https://github.com/WordPress/gutenberg/pull/39512))
+### Enhancements
 
+#### Accessibility
 
-#### **Block editor**
+-   Add aria label to Nav block on front of site. ([39161](https://github.com/WordPress/gutenberg/pull/39161))
+-   Add button text labels to site editor. ([38317](https://github.com/WordPress/gutenberg/pull/38317))
+-   Prevent focus loss after removing a block from List View. ([39031](https://github.com/WordPress/gutenberg/pull/39031))
 
-* Revert: Fix/editor content z-index stack context. ([39620](https://github.com/WordPress/gutenberg/pull/39620))
+#### Components
 
+-   Add onClick prop to FormFileUpload. ([39268](https://github.com/WordPress/gutenberg/pull/39268))
+-   CheckboxControl: Support indeterminate state. ([39462](https://github.com/WordPress/gutenberg/pull/39462))
+-   List View: Add multi-select support for shift + Home and End keys. ([39272](https://github.com/WordPress/gutenberg/pull/39272))
+-   `BoxControl`: Stop using `UnitControl`'s deprecated `unit` prop. ([39511](https://github.com/WordPress/gutenberg/pull/39511))
+-   `FocalPointPicker`: Stop using `UnitControl`'s deprecated `unit` prop. ([39504](https://github.com/WordPress/gutenberg/pull/39504))
+-   `ColorPalette`: Refine the label of the custom color button. ([39386](https://github.com/WordPress/gutenberg/pull/39386))
+-   Rich text: Allow behaviour to be overridden by ref. ([39631](https://github.com/WordPress/gutenberg/pull/39631))
+-   Add id prop to ListView. ([39494](https://github.com/WordPress/gutenberg/pull/39494))
+-   Collapse list view by default in Site Editor. ([39573](https://github.com/WordPress/gutenberg/pull/39573))
+-   Collapse list view by default in all editors. ([39611](https://github.com/WordPress/gutenberg/pull/39611))
+-   Add prop to control default expand/collapse state of ListView nodes. ([39486](https://github.com/WordPress/gutenberg/pull/39486))
+-   BaseControl: Add opt-in prop for margin-free styles. ([39325](https://github.com/WordPress/gutenberg/pull/39325))
+-   CustomSelectControl: Add flag for larger default size. ([39401](https://github.com/WordPress/gutenberg/pull/39401))
+-   RangeControl: Refactor stories to use Controls. ([39357](https://github.com/WordPress/gutenberg/pull/39357))
 
-#### **Widgets editor**
+#### Block Library
 
-* Preload paths: Avoid fatal error on Widgets page. ([39470](https://github.com/WordPress/gutenberg/pull/39470))
+-   Cover: Use Snackbar to display upload errors. ([39428](https://github.com/WordPress/gutenberg/pull/39428))
+-   Spacer block: Use same `min` value resizable box and controls, remove `max` limit. ([39577](https://github.com/WordPress/gutenberg/pull/39577))
+-   Block Title: truncate all block labels/titles. ([39416](https://github.com/WordPress/gutenberg/pull/39416))
+-   Add `NumberControl` to support min/max font size for `Tag Cloud Block`. ([37311](https://github.com/WordPress/gutenberg/pull/37311))
+-   Embeds: Update the Wolfram embed name. ([39528](https://github.com/WordPress/gutenberg/pull/39528))
+-   Flag invalid Navigation Link items. ([31716](https://github.com/WordPress/gutenberg/pull/31716))
+-   Gallery block: Add gap support. ([38164](https://github.com/WordPress/gutenberg/pull/38164))
+-   Separator block: Refactor to use color block supports. ([38428](https://github.com/WordPress/gutenberg/pull/38428))
 
+#### Post Editor
 
-#### **Block Library**
+-   Migrate post editor `editorMode` to use preferences store and remove `localAutosaveInterval` preference. ([39180](https://github.com/WordPress/gutenberg/pull/39180))
+-   Migrate post editor preferred style variations to preferences store. ([39337](https://github.com/WordPress/gutenberg/pull/39337))
+-   Show 'View Preview' link for 'Draft Saved' Snackbar notice. ([39482](https://github.com/WordPress/gutenberg/pull/39482))
 
-* Fix `Comments` blocks pagination. ([39227](https://github.com/WordPress/gutenberg/pull/39227))
-* Fix center aligned images styles. ([39422](https://github.com/WordPress/gutenberg/pull/39422))
-* Fix experimental full site editing blocks not being registered. ([39415](https://github.com/WordPress/gutenberg/pull/39415))
-* Fix: `Comment Query Loop`'s inner block selection and duplicate inspector control settings. ([39472](https://github.com/WordPress/gutenberg/pull/39472))
-* Fix: `Table` block doesn't keep background color. ([39445](https://github.com/WordPress/gutenberg/pull/39445))
-* `Gallery` block: Disable edit as html support. ([39318](https://github.com/WordPress/gutenberg/pull/39318))
-* `Gallery` block: Fix image upload bug. ([39269](https://github.com/WordPress/gutenberg/pull/39269))
-* `Image`: Allow authors to select image sizes from dropdown. ([39580](https://github.com/WordPress/gutenberg/pull/39580))
-* `Image`: Restore baseline responsiveness in the block. ([39340](https://github.com/WordPress/gutenberg/pull/39340))
-* `Media & Text`: Allow authors to select image sizes from dropdown. ([39608](https://github.com/WordPress/gutenberg/pull/39608))
-* `Pullquote` block: Fix citation markup in Editor. ([39414](https://github.com/WordPress/gutenberg/pull/39414))
-* `Pullquote` block: Remove deprecated pullquote style. ([39413](https://github.com/WordPress/gutenberg/pull/39413))
-* [Site Logo] Fix center alignment. ([39579](https://github.com/WordPress/gutenberg/pull/39579))
-* Hide the orientation switcher from the group block. ([39650](https://github.com/WordPress/gutenberg/pull/39650))
-* Image Block: Move any is-style and custom classnames up to deprecated alignment wrapper. ([39330](https://github.com/WordPress/gutenberg/pull/39330))
-* Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style. ([39276](https://github.com/WordPress/gutenberg/pull/39276))
-* Fix the block toolbar styles to evenly space buttons. ([39630](https://github.com/WordPress/gutenberg/pull/39630))
-* Fix Image block link rel handling. ([39319](https://github.com/WordPress/gutenberg/pull/39319))
+#### Site editor
 
+-   Add preferences modal to site editor. ([39485](https://github.com/WordPress/gutenberg/pull/39485))
+-   Site Editor: Add more template types. ([39353](https://github.com/WordPress/gutenberg/pull/39353))
+-   Theme Export: Export the whole theme. ([39202](https://github.com/WordPress/gutenberg/pull/39202))
+-   Theme Export: Use the theme name for the zip file. ([39471](https://github.com/WordPress/gutenberg/pull/39471))
 
-#### **Components**
+#### Navigation editor
 
-* `BlockSettingsMenuControls` don't render empty `MenuGroup`. ([39537](https://github.com/WordPress/gutenberg/pull/39537))
-* Fix `UnitControl` resets unit when value is cleared. ([39531](https://github.com/WordPress/gutenberg/pull/39531))
-* Fix changelog entry in wrong version. ([39450](https://github.com/WordPress/gutenberg/pull/39450))
-* `ResizableBox`: Ensure tooltip text remains on a single line. ([39623](https://github.com/WordPress/gutenberg/pull/39623))
-* [Block Library]: Use `UnitControl` from `components` package in Cover and Search blocks. ([39383](https://github.com/WordPress/gutenberg/pull/39383))
-* `NumberControl`: Commit (and constrain) value on `blur` event. ([39186](https://github.com/WordPress/gutenberg/pull/39186))
+-   Migrate navigation editor selected menu to preferences store. ([39606](https://github.com/WordPress/gutenberg/pull/39606))
 
+#### Testing
 
-#### **Testing**
+-   Add `@testing-library/user-event` to the project. ([39360](https://github.com/WordPress/gutenberg/pull/39360))
 
-* Fix Gallery block flaky test image captions. ([39689](https://github.com/WordPress/gutenberg/pull/39689))
-* Fix performance tests - attempt 2. ([39333](https://github.com/WordPress/gutenberg/pull/39333))
-* Env: Fix PHP unit tests for "non-standard" cloned directories. ([39362](https://github.com/WordPress/gutenberg/pull/39362))
+#### Webfonts
 
+-   Change class properties from static to instance members. ([39361](https://github.com/WordPress/gutenberg/pull/39361))
 
-#### **Accessibility**
+#### Icons
 
-* Fix `useFocusFirstElement` in non-`contenteditable` Blocks. ([37934](https://github.com/WordPress/gutenberg/pull/37934))
-* Use the post-title as the featured-image's alt text when linked to the post. ([39634](https://github.com/WordPress/gutenberg/pull/39634))
+-   Update lock and unlock icons to be smaller. ([39252](https://github.com/WordPress/gutenberg/pull/39252))
 
+#### Extensibility
 
-#### **Design Tools**
+-   Set $name on WP_Block_Editor_Context. ([39299](https://github.com/WordPress/gutenberg/pull/39299))
 
-* Fix Border Radius Control showing Mixed when switching between units in an empty control. ([39563](https://github.com/WordPress/gutenberg/pull/39563))
-* Flex Layout: Fix visibility control of allowOrientation. ([39532](https://github.com/WordPress/gutenberg/pull/39532))
+#### CSS & Styling
 
+-   Layout: Use CSS logical properties for margin top and bottom. ([38816](https://github.com/WordPress/gutenberg/pull/38816))
 
-#### **Block Conversion**
+#### Design Tools
 
-* Blocks: Disable Grouping when block removal is locked. ([39541](https://github.com/WordPress/gutenberg/pull/39541))
+-   Block spacing: Block-level axial gap block support. ([37736](https://github.com/WordPress/gutenberg/pull/37736))
 
+### New APIs
 
-#### **Post Editor**
+#### Block API
 
-* Add default `as` prop to `PluginMoreMenuItem` component. ([39517](https://github.com/WordPress/gutenberg/pull/39517))
+-   Blocks: Deprecate `isValidBlockContent`. ([38794](https://github.com/WordPress/gutenberg/pull/38794))
+-   Blocks: Remember raw source block for invalid blocks. ([38923](https://github.com/WordPress/gutenberg/pull/38923))
+-   Blocks: Add flag in `parse` to skip logging migration details from patterns parsing. ([39404](https://github.com/WordPress/gutenberg/pull/39404))
 
+#### Block Library
 
-#### **Patterns**
+-   Block Patterns: Automatically load files with headers from a theme's `/patterns` directory. ([36751](https://github.com/WordPress/gutenberg/pull/36751))
 
-* [Patterns]: Load theme patterns only in block and site editor. ([39493](https://github.com/WordPress/gutenberg/pull/39493))
+### Bug Fixes
 
+#### Core data
 
-#### **npm Packages**
+-   Revert addition of Navigation entity. ([39572](https://github.com/WordPress/gutenberg/pull/39572))
+-   Add raw attributes configuration for media entity. ([39512](https://github.com/WordPress/gutenberg/pull/39512))
 
-* Packages: Ensure that `@wordpress/preferences` gets published to npm. ([39390](https://github.com/WordPress/gutenberg/pull/39390))
+#### Block editor
 
+-   Revert: Fix/editor content z-index stack context. ([39620](https://github.com/WordPress/gutenberg/pull/39620))
 
-#### **Global Styles**
+#### Widgets editor
 
-* Fix display of color palettes for border panel. ([38798](https://github.com/WordPress/gutenberg/pull/38798))
+-   Preload paths: Avoid fatal error on Widgets page. ([39470](https://github.com/WordPress/gutenberg/pull/39470))
 
+#### Block Library
 
-### **Performance**
+-   Fix `Comments` blocks pagination. ([39227](https://github.com/WordPress/gutenberg/pull/39227))
+-   Fix center aligned images styles. ([39422](https://github.com/WordPress/gutenberg/pull/39422))
+-   Fix experimental full site editing blocks not being registered. ([39415](https://github.com/WordPress/gutenberg/pull/39415))
+-   Fix: `Comment Query Loop`'s inner block selection and duplicate inspector control settings. ([39472](https://github.com/WordPress/gutenberg/pull/39472))
+-   Fix: `Table` block doesn't keep background color. ([39445](https://github.com/WordPress/gutenberg/pull/39445))
+-   `Gallery` block: Disable edit as html support. ([39318](https://github.com/WordPress/gutenberg/pull/39318))
+-   `Gallery` block: Fix image upload bug. ([39269](https://github.com/WordPress/gutenberg/pull/39269))
+-   `Image`: Allow authors to select image sizes from dropdown. ([39580](https://github.com/WordPress/gutenberg/pull/39580))
+-   `Image`: Restore baseline responsiveness in the block. ([39340](https://github.com/WordPress/gutenberg/pull/39340))
+-   `Media & Text`: Allow authors to select image sizes from dropdown. ([39608](https://github.com/WordPress/gutenberg/pull/39608))
+-   `Pullquote` block: Fix citation markup in Editor. ([39414](https://github.com/WordPress/gutenberg/pull/39414))
+-   `Pullquote` block: Remove deprecated pullquote style. ([39413](https://github.com/WordPress/gutenberg/pull/39413))
+-   [Site Logo] Fix center alignment. ([39579](https://github.com/WordPress/gutenberg/pull/39579))
+-   Hide the orientation switcher from the group block. ([39650](https://github.com/WordPress/gutenberg/pull/39650))
+-   Image Block: Move any is-style and custom classnames up to deprecated alignment wrapper. ([39330](https://github.com/WordPress/gutenberg/pull/39330))
+-   Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style. ([39276](https://github.com/WordPress/gutenberg/pull/39276))
+-   Fix the block toolbar styles to evenly space buttons. ([39630](https://github.com/WordPress/gutenberg/pull/39630))
+-   Fix Image block link rel handling. ([39319](https://github.com/WordPress/gutenberg/pull/39319))
 
+#### Components
 
-#### **Block editor and site editor**
+-   `BlockSettingsMenuControls` don't render empty `MenuGroup`. ([39537](https://github.com/WordPress/gutenberg/pull/39537))
+-   Fix `UnitControl` resets unit when value is cleared. ([39531](https://github.com/WordPress/gutenberg/pull/39531))
+-   Fix changelog entry in wrong version. ([39450](https://github.com/WordPress/gutenberg/pull/39450))
+-   `ResizableBox`: Ensure tooltip text remains on a single line. ([39623](https://github.com/WordPress/gutenberg/pull/39623))
+-   [Block Library]: Use `UnitControl` from `components` package in Cover and Search blocks. ([39383](https://github.com/WordPress/gutenberg/pull/39383))
+-   `NumberControl`: Commit (and constrain) value on `blur` event. ([39186](https://github.com/WordPress/gutenberg/pull/39186))
 
-* Optimise preload paths for post and site editors. ([39256](https://github.com/WordPress/gutenberg/pull/39256))
+#### Testing
 
+-   Fix Gallery block flaky test image captions. ([39689](https://github.com/WordPress/gutenberg/pull/39689))
+-   Fix performance tests - attempt 2. ([39333](https://github.com/WordPress/gutenberg/pull/39333))
+-   Env: Fix PHP unit tests for "non-standard" cloned directories. ([39362](https://github.com/WordPress/gutenberg/pull/39362))
 
-#### **Parsing**
+#### Accessibility
 
-* Optimise block parser by avoiding repeated HTML parsing and matcher creation. ([39424](https://github.com/WordPress/gutenberg/pull/39424))
+-   Fix `useFocusFirstElement` in non-`contenteditable` Blocks. ([37934](https://github.com/WordPress/gutenberg/pull/37934))
+-   Use the post-title as the featured-image's alt text when linked to the post. ([39634](https://github.com/WordPress/gutenberg/pull/39634))
 
+#### Design Tools
 
-### **Experiments**
+-   Fix Border Radius Control showing Mixed when switching between units in an empty control. ([39563](https://github.com/WordPress/gutenberg/pull/39563))
+-   Flex Layout: Fix visibility control of allowOrientation. ([39532](https://github.com/WordPress/gutenberg/pull/39532))
 
+#### Block Conversion
 
-#### **Block Library**
+-   Blocks: Disable Grouping when block removal is locked. ([39541](https://github.com/WordPress/gutenberg/pull/39541))
 
-* New block: list block v2. Add an empty list block v2. ([39459](https://github.com/WordPress/gutenberg/pull/39459)), implement the nested block behaviour in list block v2. ([39487](https://github.com/WordPress/gutenberg/pull/39487)), add transforms for the list v2 block. ([39652](https://github.com/WordPress/gutenberg/pull/39652)), add start, ordered and reversed list block attributes. ([39605](https://github.com/WordPress/gutenberg/pull/39605)), add simple list item splitting and merging. ([39542](https://github.com/WordPress/gutenberg/pull/39542)).
-* New block: Generic Avatar. Create a Generic Avatar block for Authors. ([38591](https://github.com/WordPress/gutenberg/pull/38591))
+#### Post Editor
 
+-   Add default `as` prop to `PluginMoreMenuItem` component. ([39517](https://github.com/WordPress/gutenberg/pull/39517))
 
-#### **Block editor**
+#### Patterns
 
-* Add __experimentalGetGlobalBlocksByName selector. ([39610](https://github.com/WordPress/gutenberg/pull/39610))
+-   [Patterns]: Load theme patterns only in block and site editor. ([39493](https://github.com/WordPress/gutenberg/pull/39493))
 
+#### npm Packages
 
-### **Documentation**
+-   Packages: Ensure that `@wordpress/preferences` gets published to npm. ([39390](https://github.com/WordPress/gutenberg/pull/39390))
 
+#### Global Styles
 
-#### **Themes**
+-   Fix display of color palettes for border panel. ([38798](https://github.com/WordPress/gutenberg/pull/38798))
 
-* Add some detail to handbook about different theme types. ([39562](https://github.com/WordPress/gutenberg/pull/39562))
-* Remove duplicate theme documentation. ([38800](https://github.com/WordPress/gutenberg/pull/38800))
+### Performance
 
+#### Block editor and site editor
 
-#### **Block library**
+-   Optimise preload paths for post and site editors. ([39256](https://github.com/WordPress/gutenberg/pull/39256))
 
-* Block Title: Update documentation. ([39328](https://github.com/WordPress/gutenberg/pull/39328))
-* Dependency `wp-editor` should be `wp-block-editor` in the code example. ([39505](https://github.com/WordPress/gutenberg/pull/39505))
-* Document `__experimentalGenerateAnchors` default setting. ([39554](https://github.com/WordPress/gutenberg/pull/39554))
+#### Parsing
 
+-   Optimise block parser by avoiding repeated HTML parsing and matcher creation. ([39424](https://github.com/WordPress/gutenberg/pull/39424))
 
-#### **Contributing**
+### Experiments
 
-* Plugin: Document the project structure and conventions used in the `lib` folder for PHP code. ([39603](https://github.com/WordPress/gutenberg/pull/39603))
-* Update plugin `readme.txt` content for intended audience. ([38724](https://github.com/WordPress/gutenberg/pull/38724))
-* Fix the missing page in the manifest file. ([39507](https://github.com/WordPress/gutenberg/pull/39507))
+#### Block Library
 
+-   New block: list block v2. Add an empty list block v2. ([39459](https://github.com/WordPress/gutenberg/pull/39459)), implement the nested block behaviour in list block v2. ([39487](https://github.com/WordPress/gutenberg/pull/39487)), add transforms for the list v2 block. ([39652](https://github.com/WordPress/gutenberg/pull/39652)), add start, ordered and reversed list block attributes. ([39605](https://github.com/WordPress/gutenberg/pull/39605)), add simple list item splitting and merging. ([39542](https://github.com/WordPress/gutenberg/pull/39542)).
+-   New block: Generic Avatar. Create a Generic Avatar block for Authors. ([38591](https://github.com/WordPress/gutenberg/pull/38591))
 
-#### **Components**
+#### Block editor
 
-* Divider: Improve default behaviour when in vertical orientation. ([39316](https://github.com/WordPress/gutenberg/pull/39316))
-* `UnitControl`: Convert Storybook example to TypeScript and Controls. ([39320](https://github.com/WordPress/gutenberg/pull/39320))
-* `UnitControl`: Mark `unit` prop as deprecated. ([39503](https://github.com/WordPress/gutenberg/pull/39503))
-* Add missing `}` to LinkControl code example. ([39469](https://github.com/WordPress/gutenberg/pull/39469))
+-   Add \_\_experimentalGetGlobalBlocksByName selector. ([39610](https://github.com/WordPress/gutenberg/pull/39610))
 
+### Documentation
 
-### **Code Quality**
+#### Themes
 
-#### **Core data**
+-   Add some detail to handbook about different theme types. ([39562](https://github.com/WordPress/gutenberg/pull/39562))
+-   Remove duplicate theme documentation. ([38800](https://github.com/WordPress/gutenberg/pull/38800))
 
-* Use consistent terminology across @wordpress/core-data. ([39349](https://github.com/WordPress/gutenberg/pull/39349)) without renaming useEntityId hook. ([39683](https://github.com/WordPress/gutenberg/pull/39683))
-* Add an "enabled" option to useEntityRecord and useEntityRecords. ([39288](https://github.com/WordPress/gutenberg/pull/39288))
-* Add Navigation menu to known entities. ([39498](https://github.com/WordPress/gutenberg/pull/39498))
-* Use the word `record` for the entity record TypeScript types. ([39251](https://github.com/WordPress/gutenberg/pull/39251))
-* throwOnError option for saveEntityRecord and deleteEntityRecord actions. ([39258](https://github.com/WordPress/gutenberg/pull/39258))
-* Fix preferences actions/selectors deprecated calls. ([39640](https://github.com/WordPress/gutenberg/pull/39640))
-* Check for nullity in experimental fetch methods. ([39480](https://github.com/WordPress/gutenberg/pull/39480))
-* Check for presence of entity configuration before testing plural form. ([39476](https://github.com/WordPress/gutenberg/pull/39476))
-* Import types before exporting them. ([39479](https://github.com/WordPress/gutenberg/pull/39479))
-* Pass explicit `undefined` initial value to `createContext`. ([39526](https://github.com/WordPress/gutenberg/pull/39526))
-* Replace spread arguments with non-spread variants. ([39477](https://github.com/WordPress/gutenberg/pull/39477))
-* Fix minor type-related issues. ([39525](https://github.com/WordPress/gutenberg/pull/39525))
-* Do not suppress errors in the getEntityRecord and getEntityRecords resolvers. ([39317](https://github.com/WordPress/gutenberg/pull/39317))
+#### Block library
 
+-   Block Title: Update documentation. ([39328](https://github.com/WordPress/gutenberg/pull/39328))
+-   Dependency `wp-editor` should be `wp-block-editor` in the code example. ([39505](https://github.com/WordPress/gutenberg/pull/39505))
+-   Document `__experimentalGenerateAnchors` default setting. ([39554](https://github.com/WordPress/gutenberg/pull/39554))
 
-#### **Block Library**
+#### Contributing
 
-* `Cover` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39522](https://github.com/WordPress/gutenberg/pull/39522))
-* `Search` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39514](https://github.com/WordPress/gutenberg/pull/39514))
-* `Spacer` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39513](https://github.com/WordPress/gutenberg/pull/39513))
-* [Blocks]: Add flag in `parse` to skip logging migration details from patterns parsing. ([39404](https://github.com/WordPress/gutenberg/pull/39404))
-* Use block specific filters for the backward compatibility markup hooks. ([39321](https://github.com/WordPress/gutenberg/pull/39321))
+-   Plugin: Document the project structure and conventions used in the `lib` folder for PHP code. ([39603](https://github.com/WordPress/gutenberg/pull/39603))
+-   Update plugin `readme.txt` content for intended audience. ([38724](https://github.com/WordPress/gutenberg/pull/38724))
+-   Fix the missing page in the manifest file. ([39507](https://github.com/WordPress/gutenberg/pull/39507))
 
-#### **Testing**
+#### Components
 
-* Fix Nav block flaky end-to-end test by correctly waiting on menu creation resolution. ([39637](https://github.com/WordPress/gutenberg/pull/39637))
+-   Divider: Improve default behaviour when in vertical orientation. ([39316](https://github.com/WordPress/gutenberg/pull/39316))
+-   `UnitControl`: Convert Storybook example to TypeScript and Controls. ([39320](https://github.com/WordPress/gutenberg/pull/39320))
+-   `UnitControl`: Mark `unit` prop as deprecated. ([39503](https://github.com/WordPress/gutenberg/pull/39503))
+-   Add missing `}` to LinkControl code example. ([39469](https://github.com/WordPress/gutenberg/pull/39469))
 
-#### **Plugin**
+### Code Quality
 
-* Fix PHP notice in `gutenberg_get_block_editor_settings`. ([39543](https://github.com/WordPress/gutenberg/pull/39543))
+#### Core data
 
+-   Use consistent terminology across @wordpress/core-data. ([39349](https://github.com/WordPress/gutenberg/pull/39349)) without renaming useEntityId hook. ([39683](https://github.com/WordPress/gutenberg/pull/39683))
+-   Add an "enabled" option to useEntityRecord and useEntityRecords. ([39288](https://github.com/WordPress/gutenberg/pull/39288))
+-   Add Navigation menu to known entities. ([39498](https://github.com/WordPress/gutenberg/pull/39498))
+-   Use the word `record` for the entity record TypeScript types. ([39251](https://github.com/WordPress/gutenberg/pull/39251))
+-   throwOnError option for saveEntityRecord and deleteEntityRecord actions. ([39258](https://github.com/WordPress/gutenberg/pull/39258))
+-   Fix preferences actions/selectors deprecated calls. ([39640](https://github.com/WordPress/gutenberg/pull/39640))
+-   Check for nullity in experimental fetch methods. ([39480](https://github.com/WordPress/gutenberg/pull/39480))
+-   Check for presence of entity configuration before testing plural form. ([39476](https://github.com/WordPress/gutenberg/pull/39476))
+-   Import types before exporting them. ([39479](https://github.com/WordPress/gutenberg/pull/39479))
+-   Pass explicit `undefined` initial value to `createContext`. ([39526](https://github.com/WordPress/gutenberg/pull/39526))
+-   Replace spread arguments with non-spread variants. ([39477](https://github.com/WordPress/gutenberg/pull/39477))
+-   Fix minor type-related issues. ([39525](https://github.com/WordPress/gutenberg/pull/39525))
+-   Do not suppress errors in the getEntityRecord and getEntityRecords resolvers. ([39317](https://github.com/WordPress/gutenberg/pull/39317))
 
-#### **Components**
+#### Block Library
 
-* Drop `composeStateReducers`. ([39262](https://github.com/WordPress/gutenberg/pull/39262))
-* `BorderRadiusControl`: Stop using `UnitControl`’s deprecated `unit` prop. ([39549](https://github.com/WordPress/gutenberg/pull/39549))
+-   `Cover` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39522](https://github.com/WordPress/gutenberg/pull/39522))
+-   `Search` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39514](https://github.com/WordPress/gutenberg/pull/39514))
+-   `Spacer` block: Stop using `UnitControl`'s deprecated `unit` prop. ([39513](https://github.com/WordPress/gutenberg/pull/39513))
+-   [Blocks]: Add flag in `parse` to skip logging migration details from patterns parsing. ([39404](https://github.com/WordPress/gutenberg/pull/39404))
+-   Use block specific filters for the backward compatibility markup hooks. ([39321](https://github.com/WordPress/gutenberg/pull/39321))
 
+#### Testing
 
-### **Tools**
+-   Fix Nav block flaky end-to-end test by correctly waiting on menu creation resolution. ([39637](https://github.com/WordPress/gutenberg/pull/39637))
 
-#### **Codeowners updates**
+#### Plugin
 
-* Add [@michalczaplinski](https://github.com/michalczaplinski) to codeowners. ([39440](https://github.com/WordPress/gutenberg/pull/39440))
-* Add [@juanmaguitar](https://github.com/juanmaguitar) as codeowners of gutenberg documentation. ([39453](https://github.com/WordPress/gutenberg/pull/39453))
+-   Fix PHP notice in `gutenberg_get_block_editor_settings`. ([39543](https://github.com/WordPress/gutenberg/pull/39543))
 
+#### Components
 
-#### **Testing**
+-   Drop `composeStateReducers`. ([39262](https://github.com/WordPress/gutenberg/pull/39262))
+-   `BorderRadiusControl`: Stop using `UnitControl`’s deprecated `unit` prop. ([39549](https://github.com/WordPress/gutenberg/pull/39549))
 
-* Add infrastructure for writing Playwright end-to-end tests. ([38570](https://github.com/WordPress/gutenberg/pull/38570))
-* Gallery block: Reduce end-to-end flakiness. ([39565](https://github.com/WordPress/gutenberg/pull/39565))
+### Tools
 
+#### Codeowners updates
 
-#### **Build Tooling**
+-   Add [@michalczaplinski](https://github.com/michalczaplinski) to codeowners. ([39440](https://github.com/WordPress/gutenberg/pull/39440))
+-   Add [@juanmaguitar](https://github.com/juanmaguitar) as codeowners of gutenberg documentation. ([39453](https://github.com/WordPress/gutenberg/pull/39453))
 
-* Simplify vendor scripts handling. ([39534](https://github.com/WordPress/gutenberg/pull/39534))
-* ing: Remove unused npm scripts. ([39369](https://github.com/WordPress/gutenberg/pull/39369))
-* Use android artefacts for react-native libraries in react-native-bridge. ([39294](https://github.com/WordPress/gutenberg/pull/39294))
-* ESlint: Exempt TS files from `jsdoc/require-param`. ([39458](https://github.com/WordPress/gutenberg/pull/39458))
+#### Testing
 
+-   Add infrastructure for writing Playwright end-to-end tests. ([38570](https://github.com/WordPress/gutenberg/pull/38570))
+-   Gallery block: Reduce end-to-end flakiness. ([39565](https://github.com/WordPress/gutenberg/pull/39565))
 
-#### **NPM Packages**
+#### Build Tooling
 
-* Packages: Finalise the revised strategy for NPM publishing. ([39389](https://github.com/WordPress/gutenberg/pull/39389))
+-   Simplify vendor scripts handling. ([39534](https://github.com/WordPress/gutenberg/pull/39534))
+-   ing: Remove unused npm scripts. ([39369](https://github.com/WordPress/gutenberg/pull/39369))
+-   Use android artefacts for react-native libraries in react-native-bridge. ([39294](https://github.com/WordPress/gutenberg/pull/39294))
+-   ESlint: Exempt TS files from `jsdoc/require-param`. ([39458](https://github.com/WordPress/gutenberg/pull/39458))
 
+#### npm Packages
 
-## First time contributors
+-   Packages: Finalise the revised strategy for NPM publishing. ([39389](https://github.com/WordPress/gutenberg/pull/39389))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @alefesouza: Add onClick prop to FormFileUpload. ([39268](https://github.com/WordPress/gutenberg/pull/39268))
-- @brookewp: Show 'View Preview' link for 'Draft Saved' snackbar notice. ([39482](https://github.com/WordPress/gutenberg/pull/39482))
-- @HILAYTRIVEDI: Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style. ([39276](https://github.com/WordPress/gutenberg/pull/39276))
-- @ironprogrammer: Update plugin `readme.txt` content for intended audience. ([38724](https://github.com/WordPress/gutenberg/pull/38724))
-- @mhimon: Add missing `}` to LinkControl code example. ([39469](https://github.com/WordPress/gutenberg/pull/39469))
-- @ParaskP7:  ([39508](https://github.com/WordPress/gutenberg/pull/39508))
-- @SantosGuillamot: Fix Comments blocks pagination. ([39227](https://github.com/WordPress/gutenberg/pull/39227))
-- @stefanolissa: Dependency "wp-editor" should be "wp-block-editor" in the code example. ([39505](https://github.com/WordPress/gutenberg/pull/39505))
+The following PRs were merged by first-time contributors:
 
+-   @alefesouza: Add onClick prop to FormFileUpload. ([39268](https://github.com/WordPress/gutenberg/pull/39268))
+-   @brookewp: Show 'View Preview' link for 'Draft Saved' snackbar notice. ([39482](https://github.com/WordPress/gutenberg/pull/39482))
+-   @HILAYTRIVEDI: Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style. ([39276](https://github.com/WordPress/gutenberg/pull/39276))
+-   @ironprogrammer: Update plugin `readme.txt` content for intended audience. ([38724](https://github.com/WordPress/gutenberg/pull/38724))
+-   @mhimon: Add missing `}` to LinkControl code example. ([39469](https://github.com/WordPress/gutenberg/pull/39469))
+-   @ParaskP7: ([39508](https://github.com/WordPress/gutenberg/pull/39508))
+-   @SantosGuillamot: Fix Comments blocks pagination. ([39227](https://github.com/WordPress/gutenberg/pull/39227))
+-   @stefanolissa: Dependency "wp-editor" should be "wp-block-editor" in the code example. ([39505](https://github.com/WordPress/gutenberg/pull/39505))
 
 ## Contributors
 
@@ -6404,222 +30538,230 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @alefesouza @alexstine @amustaque97 @andrewserong @AnthonyLedesma @aristath @brookewp @c4rl0sbr4v0 @carolinan @ciampo @delowardev @dmsnell @ellatrix @fluiddot @getdave @glendaviesnz @gziolo @HILAYTRIVEDI @hypest @ironprogrammer @jarcos @jasmussen @jeherve @jhnstn @jorgefilipecosta @jostnes @jsnajdr @juanmaguitar @kevin940726 @kjellr @Mamaduka @mcsf @mhimon @michalczaplinski @mirka @ndiego @noisysocks @ntsekouras @oguzkocer @ParaskP7 @pento @ramonjd @SantosGuillamot @scruffian @SiobhyB @stefanolissa @stokesman @t-hamano @talldan @tellthemachines @vcanales @xknown @youknowriad @zaguiini
 
-
-
-
 = 12.8.1 =
 
 ## Changelog
 
 ### Bug Fixes
 
-- Templates page: reduce z-index of content area [39331](https://github.com/WordPress/gutenberg/pull/39331)
-
+-   Templates page: reduce z-index of content area [39331](https://github.com/WordPress/gutenberg/pull/39331)
 
 = 12.8.0 =
 
-
 ## Changelog
 
 ### Enhancements
 
 #### Block Library
-- Group: Show `group` option in `Group` blocks. ([39094](https://github.com/WordPress/gutenberg/pull/39094))
-- Navigation: Improve loading and placeholder states. ([38907](https://github.com/WordPress/gutenberg/pull/38907))
-- Navigation: Improve create new UI feedback in Nav block. ([39219](https://github.com/WordPress/gutenberg/pull/39219))
-- Media & Text: Display media while uploading. ([39275](https://github.com/WordPress/gutenberg/pull/39275))
-- Tag Cloud: Use flex for the Outline style. ([38995](https://github.com/WordPress/gutenberg/pull/38995))
+
+-   Group: Show `group` option in `Group` blocks. ([39094](https://github.com/WordPress/gutenberg/pull/39094))
+-   Navigation: Improve loading and placeholder states. ([38907](https://github.com/WordPress/gutenberg/pull/38907))
+-   Navigation: Improve create new UI feedback in Nav block. ([39219](https://github.com/WordPress/gutenberg/pull/39219))
+-   Media & Text: Display media while uploading. ([39275](https://github.com/WordPress/gutenberg/pull/39275))
+-   Tag Cloud: Use flex for the Outline style. ([38995](https://github.com/WordPress/gutenberg/pull/38995))
 
 #### Components
-- ConfirmDialog: add custom button text. ([38994](https://github.com/WordPress/gutenberg/pull/38994))
-- InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. ([39109](https://github.com/WordPress/gutenberg/pull/39109))
+
+-   ConfirmDialog: add custom button text. ([38994](https://github.com/WordPress/gutenberg/pull/38994))
+-   InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. ([39109](https://github.com/WordPress/gutenberg/pull/39109))
 
 #### Block Editor
-- Add a link completer for inline links to posts. ([29172](https://github.com/WordPress/gutenberg/pull/29172))
+
+-   Add a link completer for inline links to posts. ([29172](https://github.com/WordPress/gutenberg/pull/29172))
 
 #### Site Editor
-- Add theme.json to export file. ([39048](https://github.com/WordPress/gutenberg/pull/39048))
-- Resolve homepage template on server-side. ([38817](https://github.com/WordPress/gutenberg/pull/38817))
-- Theme Export: Add index.php and style.css. ([39173](https://github.com/WordPress/gutenberg/pull/39173))
+
+-   Add theme.json to export file. ([39048](https://github.com/WordPress/gutenberg/pull/39048))
+-   Resolve homepage template on server-side. ([38817](https://github.com/WordPress/gutenberg/pull/38817))
+-   Theme Export: Add index.php and style.css. ([39173](https://github.com/WordPress/gutenberg/pull/39173))
 
 #### Icons
-- Update drag handle footprint. ([39342](https://github.com/WordPress/gutenberg/pull/39342))
-- Update Pin icon, add new Post icon. ([39139](https://github.com/WordPress/gutenberg/pull/39139))
+
+-   Update drag handle footprint. ([39342](https://github.com/WordPress/gutenberg/pull/39342))
+-   Update Pin icon, add new Post icon. ([39139](https://github.com/WordPress/gutenberg/pull/39139))
 
 #### General Interface
-- Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
+
+-   Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
 
 #### Media
-- MediaReplaceFlow: Add 'onError' prop to handle error notifications. ([39197](https://github.com/WordPress/gutenberg/pull/39197))
+
+-   MediaReplaceFlow: Add 'onError' prop to handle error notifications. ([39197](https://github.com/WordPress/gutenberg/pull/39197))
 
 ### Accessibility
 
-- Block settings dropdown: Use block display title in remove label. ([39110](https://github.com/WordPress/gutenberg/pull/39110))
-- Try allowing tab into block placeholder. ([39085](https://github.com/WordPress/gutenberg/pull/39085))
+-   Block settings dropdown: Use block display title in remove label. ([39110](https://github.com/WordPress/gutenberg/pull/39110))
+-   Try allowing tab into block placeholder. ([39085](https://github.com/WordPress/gutenberg/pull/39085))
 
 ### New APIs
 
-- Webfonts API. ([37140](https://github.com/WordPress/gutenberg/pull/37140))
-- Add new `@wordpress/preferences` package. ([38873](https://github.com/WordPress/gutenberg/pull/38873))
-- Add reusable preferences modal to interface package. ([39153](https://github.com/WordPress/gutenberg/pull/39153))
-  - Add interface preferences modal to edit post. ([39176](https://github.com/WordPress/gutenberg/pull/39176))
-  - Migrate hidden block types (block manager data) to new preferences packages. ([39132](https://github.com/WordPress/gutenberg/pull/39132))
-  - Migrate post editor feature preferences to use new preferences package. ([39115](https://github.com/WordPress/gutenberg/pull/39115))
-  - Migrate customize widgets editor to use new preferences package. ([39112](https://github.com/WordPress/gutenberg/pull/39112))
-  - Migrate standalone widgets editor to use new preferences package. ([39084](https://github.com/WordPress/gutenberg/pull/39084))
-  - Migrate site editor to use new preferences package. ([39158](https://github.com/WordPress/gutenberg/pull/39158))
-  - Deprecate interface package's preference APIs. ([39418](https://github.com/WordPress/gutenberg/pull/39418))
-- Create Block: Add support for more plugin header fields. ([39096](https://github.com/WordPress/gutenberg/pull/39096))
-
-
-### Bug Fixes
-
-#### Block Library
-- Buttons: Added aria label to the button block with icon. ([38966](https://github.com/WordPress/gutenberg/pull/38966))
-- Buttons: Fixes Button highlight popover overflow conflict with link popover. ([38771](https://github.com/WordPress/gutenberg/pull/38771))
-- Buttons: Don't set a placeholder text color. ([39034](https://github.com/WordPress/gutenberg/pull/39034))
-- Code: Restructure code bock styling. ([38712](https://github.com/WordPress/gutenberg/pull/38712))
-- Comments Pagination Number_ Fix Comments Pagination Number with no pagination settings. ([39204](https://github.com/WordPress/gutenberg/pull/39204))
-- Cover: Fix keep selected unit on deleting minHeight value. ([39145](https://github.com/WordPress/gutenberg/pull/39145))
-- Cover: Fixes #38761 by removing obsolete `::Before` pseudo element. ([38762](https://github.com/WordPress/gutenberg/pull/38762))
-- File: Check if 'fileId' exists before setting the attribute. ([39088](https://github.com/WordPress/gutenberg/pull/39088))
-- File: Don't display loading animation on upload error. ([39213](https://github.com/WordPress/gutenberg/pull/39213))
-- File: Fix file block validation error by not outputting aria-describedby if there's no description. ([39083](https://github.com/WordPress/gutenberg/pull/39083))
-- File: Fix the undo trap. ([39215](https://github.com/WordPress/gutenberg/pull/39215))
-- Hide border panel when all border features have been disabled. ([36791](https://github.com/WordPress/gutenberg/pull/36791))
-- Hide current menu from dropdown list in Nav block. ([38916](https://github.com/WordPress/gutenberg/pull/38916))
-- Image: Fix image responsive rules. ([39045](https://github.com/WordPress/gutenberg/pull/39045))
-- Image: Display errors after failed upload. ([39178](https://github.com/WordPress/gutenberg/pull/39178))
-- Media & Text: Display errors after failed upload. ([39245](https://github.com/WordPress/gutenberg/pull/39245))
-- Navigation: Fix navigation menu error when menus are not yet fetched. ([39151](https://github.com/WordPress/gutenberg/pull/39151))
-- Post Comments Form: Show correctwarning relative to post/page context. ([38011](https://github.com/WordPress/gutenberg/pull/38011))
-- Post Expert: Fix missing class in post excerpt. ([38747](https://github.com/WordPress/gutenberg/pull/38747))
-- Post Terms: Unescape HTML entities in term names. ([39216](https://github.com/WordPress/gutenberg/pull/39216))
-- Widget Group: Make `save()` markup the same as `render_callback` markup. ([38510](https://github.com/WordPress/gutenberg/pull/38510))
+-   Webfonts API. ([37140](https://github.com/WordPress/gutenberg/pull/37140))
+-   Add new `@wordpress/preferences` package. ([38873](https://github.com/WordPress/gutenberg/pull/38873))
+-   Add reusable preferences modal to interface package. ([39153](https://github.com/WordPress/gutenberg/pull/39153))
+    -   Add interface preferences modal to edit post. ([39176](https://github.com/WordPress/gutenberg/pull/39176))
+    -   Migrate hidden block types (block manager data) to new preferences packages. ([39132](https://github.com/WordPress/gutenberg/pull/39132))
+    -   Migrate post editor feature preferences to use new preferences package. ([39115](https://github.com/WordPress/gutenberg/pull/39115))
+    -   Migrate customize widgets editor to use new preferences package. ([39112](https://github.com/WordPress/gutenberg/pull/39112))
+    -   Migrate standalone widgets editor to use new preferences package. ([39084](https://github.com/WordPress/gutenberg/pull/39084))
+    -   Migrate site editor to use new preferences package. ([39158](https://github.com/WordPress/gutenberg/pull/39158))
+    -   Deprecate interface package's preference APIs. ([39418](https://github.com/WordPress/gutenberg/pull/39418))
+-   Create Block: Add support for more plugin header fields. ([39096](https://github.com/WordPress/gutenberg/pull/39096))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Buttons: Added aria label to the button block with icon. ([38966](https://github.com/WordPress/gutenberg/pull/38966))
+-   Buttons: Fixes Button highlight popover overflow conflict with link popover. ([38771](https://github.com/WordPress/gutenberg/pull/38771))
+-   Buttons: Don't set a placeholder text color. ([39034](https://github.com/WordPress/gutenberg/pull/39034))
+-   Code: Restructure code bock styling. ([38712](https://github.com/WordPress/gutenberg/pull/38712))
+-   Comments Pagination Number\_ Fix Comments Pagination Number with no pagination settings. ([39204](https://github.com/WordPress/gutenberg/pull/39204))
+-   Cover: Fix keep selected unit on deleting minHeight value. ([39145](https://github.com/WordPress/gutenberg/pull/39145))
+-   Cover: Fixes #38761 by removing obsolete `::Before` pseudo element. ([38762](https://github.com/WordPress/gutenberg/pull/38762))
+-   File: Check if 'fileId' exists before setting the attribute. ([39088](https://github.com/WordPress/gutenberg/pull/39088))
+-   File: Don't display loading animation on upload error. ([39213](https://github.com/WordPress/gutenberg/pull/39213))
+-   File: Fix file block validation error by not outputting aria-describedby if there's no description. ([39083](https://github.com/WordPress/gutenberg/pull/39083))
+-   File: Fix the undo trap. ([39215](https://github.com/WordPress/gutenberg/pull/39215))
+-   Hide border panel when all border features have been disabled. ([36791](https://github.com/WordPress/gutenberg/pull/36791))
+-   Hide current menu from dropdown list in Nav block. ([38916](https://github.com/WordPress/gutenberg/pull/38916))
+-   Image: Fix image responsive rules. ([39045](https://github.com/WordPress/gutenberg/pull/39045))
+-   Image: Display errors after failed upload. ([39178](https://github.com/WordPress/gutenberg/pull/39178))
+-   Media & Text: Display errors after failed upload. ([39245](https://github.com/WordPress/gutenberg/pull/39245))
+-   Navigation: Fix navigation menu error when menus are not yet fetched. ([39151](https://github.com/WordPress/gutenberg/pull/39151))
+-   Post Comments Form: Show correctwarning relative to post/page context. ([38011](https://github.com/WordPress/gutenberg/pull/38011))
+-   Post Expert: Fix missing class in post excerpt. ([38747](https://github.com/WordPress/gutenberg/pull/38747))
+-   Post Terms: Unescape HTML entities in term names. ([39216](https://github.com/WordPress/gutenberg/pull/39216))
+-   Widget Group: Make `save()` markup the same as `render_callback` markup. ([38510](https://github.com/WordPress/gutenberg/pull/38510))
 
 #### Styles
-- Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
-- Fix default duotone preset SVG and style generation. ([38681](https://github.com/WordPress/gutenberg/pull/38681))
-- Fix header panel height. ([39119](https://github.com/WordPress/gutenberg/pull/39119))
-- Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
+
+-   Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
+-   Fix default duotone preset SVG and style generation. ([38681](https://github.com/WordPress/gutenberg/pull/38681))
+-   Fix header panel height. ([39119](https://github.com/WordPress/gutenberg/pull/39119))
+-   Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
 
 #### Components
-- Update drag gesture of `InputControl`-based controls with axial constraint. ([38968](https://github.com/WordPress/gutenberg/pull/38968))
-- `UnitControl`: Fix controlled `unit` behavior. ([39148](https://github.com/WordPress/gutenberg/pull/39148))
-- Normalize font-family. ([38969](https://github.com/WordPress/gutenberg/pull/38969))
+
+-   Update drag gesture of `InputControl`-based controls with axial constraint. ([38968](https://github.com/WordPress/gutenberg/pull/38968))
+-   `UnitControl`: Fix controlled `unit` behavior. ([39148](https://github.com/WordPress/gutenberg/pull/39148))
+-   Normalize font-family. ([38969](https://github.com/WordPress/gutenberg/pull/38969))
 
 #### Block Editor
-- Fixes block highlight after block move. ([38915](https://github.com/WordPress/gutenberg/pull/38915))
-- Improve in_footer handling in gutenberg_override_script(). ([39497](https://github.com/WordPress/gutenberg/pull/39497))
+
+-   Fixes block highlight after block move. ([38915](https://github.com/WordPress/gutenberg/pull/38915))
+-   Improve in_footer handling in gutenberg_override_script(). ([39497](https://github.com/WordPress/gutenberg/pull/39497))
 
 #### Post Editor
-- Avoid error when 'styles' settings are removed. ([39091](https://github.com/WordPress/gutenberg/pull/39091))
-- URL: Fix code drift in the Editor package by removing duplicate cleanForSlug function. ([39033](https://github.com/WordPress/gutenberg/pull/39033))
 
-####  Site Editor
-- Expose plugin area to site editor's List page. ([39078](https://github.com/WordPress/gutenberg/pull/39078))
+-   Avoid error when 'styles' settings are removed. ([39091](https://github.com/WordPress/gutenberg/pull/39091))
+-   URL: Fix code drift in the Editor package by removing duplicate cleanForSlug function. ([39033](https://github.com/WordPress/gutenberg/pull/39033))
+
+#### Site Editor
+
+-   Expose plugin area to site editor's List page. ([39078](https://github.com/WordPress/gutenberg/pull/39078))
 
 #### Other Packages
-- `apiFetch`: Handle urlencoded and rest_route query params. ([38914](https://github.com/WordPress/gutenberg/pull/38914))
-- Base Styles: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
-- Compose: Avoid memory leak in use-drop-zone. ([39038](https://github.com/WordPress/gutenberg/pull/39038))
-- Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
-- Url: Improvement to prototype handling. ([39365](https://github.com/WordPress/gutenberg/pull/39365))
 
+-   `apiFetch`: Handle urlencoded and rest_route query params. ([38914](https://github.com/WordPress/gutenberg/pull/38914))
+-   Base Styles: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
+-   Compose: Avoid memory leak in use-drop-zone. ([39038](https://github.com/WordPress/gutenberg/pull/39038))
+-   Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
+-   Url: Improvement to prototype handling. ([39365](https://github.com/WordPress/gutenberg/pull/39365))
 
 ### Developer experience
-- Change copying PHP files to dist directory to opt-in via a CLI  flag. ([39171](https://github.com/WordPress/gutenberg/pull/39171))
-- Create Block: Add confirm prompt before showing the plugin options. ([39105](https://github.com/WordPress/gutenberg/pull/39105))
-- Create Block: Improve custom project template configuration. ([39049](https://github.com/WordPress/gutenberg/pull/39049))
-- Handle resolution errors in @wordpress/data. ([38669](https://github.com/WordPress/gutenberg/pull/38669))
 
+-   Change copying PHP files to dist directory to opt-in via a CLI flag. ([39171](https://github.com/WordPress/gutenberg/pull/39171))
+-   Create Block: Add confirm prompt before showing the plugin options. ([39105](https://github.com/WordPress/gutenberg/pull/39105))
+-   Create Block: Improve custom project template configuration. ([39049](https://github.com/WordPress/gutenberg/pull/39049))
+-   Handle resolution errors in @wordpress/data. ([38669](https://github.com/WordPress/gutenberg/pull/38669))
 
 ### Documentation
 
-- Add import useBlockProps. ([39072](https://github.com/WordPress/gutenberg/pull/39072))
-- Components: Update changelog follow up for #38985. ([39013](https://github.com/WordPress/gutenberg/pull/39013))
-- Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
-- Element: Add changelog notes for serialize attribute casing. ([39141](https://github.com/WordPress/gutenberg/pull/39141))
-- Gutenberg Data Tutorial Part 3: Building an edit form. ([38581](https://github.com/WordPress/gutenberg/pull/38581))
-- Fix code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
-- Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
-- Move recent CHANGELOG entry to `Unreleased` section. ([39169](https://github.com/WordPress/gutenberg/pull/39169))
-- Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
-- Storybook: Support proper extraction of TypeScript prop types. ([38842](https://github.com/WordPress/gutenberg/pull/38842))
-- Storybook: Add webpack loader for easier story descriptions. ([39165](https://github.com/WordPress/gutenberg/pull/39165))
-
+-   Add import useBlockProps. ([39072](https://github.com/WordPress/gutenberg/pull/39072))
+-   Components: Update changelog follow up for #38985. ([39013](https://github.com/WordPress/gutenberg/pull/39013))
+-   Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
+-   Element: Add changelog notes for serialize attribute casing. ([39141](https://github.com/WordPress/gutenberg/pull/39141))
+-   Gutenberg Data Tutorial Part 3: Building an edit form. ([38581](https://github.com/WordPress/gutenberg/pull/38581))
+-   Fix code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
+-   Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
+-   Move recent CHANGELOG entry to `Unreleased` section. ([39169](https://github.com/WordPress/gutenberg/pull/39169))
+-   Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
+-   Storybook: Support proper extraction of TypeScript prop types. ([38842](https://github.com/WordPress/gutenberg/pull/38842))
+-   Storybook: Add webpack loader for easier story descriptions. ([39165](https://github.com/WordPress/gutenberg/pull/39165))
 
 ### Code Quality
 
-- Componentes, UnitControl: Tidy up utils and types. ([38987](https://github.com/WordPress/gutenberg/pull/38987))
-- Components, FontSizePicker: Refactor stories to use Controls. ([38727](https://github.com/WordPress/gutenberg/pull/38727))
-- Components, ToggleGroupControlOption: Calculate width from button content and remove `LabelPlaceholderView`. ([39345](https://github.com/WordPress/gutenberg/pull/39345))
-- Core Data: Rename `types` directory to `entity-types`. ([39225](https://github.com/WordPress/gutenberg/pull/39225))
-- Core data: Fix some typing issues. ([39212](https://github.com/WordPress/gutenberg/pull/39212))
-- Core data: Fix some typing issues. ([39214](https://github.com/WordPress/gutenberg/pull/39214))
-- Fix `@wordpress/comment-case` ESlint errors but without adding the disable-rule pragma. ([37006](https://github.com/WordPress/gutenberg/pull/37006))
-- Delete widget editor redundant css for more menu. ([39113](https://github.com/WordPress/gutenberg/pull/39113))
-- Layout: Remove duplicate var declaration. ([39111](https://github.com/WordPress/gutenberg/pull/39111))
-- Move editor settings code to compat folder. ([39030](https://github.com/WordPress/gutenberg/pull/39030))
-- Refactor useSelect usages to useEntityRecords. ([38827](https://github.com/WordPress/gutenberg/pull/38827))
-- Refactor classic menu conversion process. ([38858](https://github.com/WordPress/gutenberg/pull/38858))
-- Post author name: Add "post" prefix to CSS class. ([38320](https://github.com/WordPress/gutenberg/pull/38320))
-- TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. ([39002](https://github.com/WordPress/gutenberg/pull/39002))
-- Update framer motion to 6.2.8. ([38999](https://github.com/WordPress/gutenberg/pull/38999))
-- useBlockEditorSettings: Remove unused unstableBase fetch. ([39221](https://github.com/WordPress/gutenberg/pull/39221))
-
+-   Componentes, UnitControl: Tidy up utils and types. ([38987](https://github.com/WordPress/gutenberg/pull/38987))
+-   Components, FontSizePicker: Refactor stories to use Controls. ([38727](https://github.com/WordPress/gutenberg/pull/38727))
+-   Components, ToggleGroupControlOption: Calculate width from button content and remove `LabelPlaceholderView`. ([39345](https://github.com/WordPress/gutenberg/pull/39345))
+-   Core Data: Rename `types` directory to `entity-types`. ([39225](https://github.com/WordPress/gutenberg/pull/39225))
+-   Core data: Fix some typing issues. ([39212](https://github.com/WordPress/gutenberg/pull/39212))
+-   Core data: Fix some typing issues. ([39214](https://github.com/WordPress/gutenberg/pull/39214))
+-   Fix `@wordpress/comment-case` ESlint errors but without adding the disable-rule pragma. ([37006](https://github.com/WordPress/gutenberg/pull/37006))
+-   Delete widget editor redundant css for more menu. ([39113](https://github.com/WordPress/gutenberg/pull/39113))
+-   Layout: Remove duplicate var declaration. ([39111](https://github.com/WordPress/gutenberg/pull/39111))
+-   Move editor settings code to compat folder. ([39030](https://github.com/WordPress/gutenberg/pull/39030))
+-   Refactor useSelect usages to useEntityRecords. ([38827](https://github.com/WordPress/gutenberg/pull/38827))
+-   Refactor classic menu conversion process. ([38858](https://github.com/WordPress/gutenberg/pull/38858))
+-   Post author name: Add "post" prefix to CSS class. ([38320](https://github.com/WordPress/gutenberg/pull/38320))
+-   TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. ([39002](https://github.com/WordPress/gutenberg/pull/39002))
+-   Update framer motion to 6.2.8. ([38999](https://github.com/WordPress/gutenberg/pull/38999))
+-   useBlockEditorSettings: Remove unused unstableBase fetch. ([39221](https://github.com/WordPress/gutenberg/pull/39221))
 
 ### Tools
 
 #### Project Management
-- Code owners: Remove users without write access and fix typos. ([39238](https://github.com/WordPress/gutenberg/pull/39238))
-- Simplify Pull Request template. ([39229](https://github.com/WordPress/gutenberg/pull/39229))
+
+-   Code owners: Remove users without write access and fix typos. ([39238](https://github.com/WordPress/gutenberg/pull/39238))
+-   Simplify Pull Request template. ([39229](https://github.com/WordPress/gutenberg/pull/39229))
 
 #### Testing
-- Add end-to-end testing for experimental nav menu deletion. ([38955](https://github.com/WordPress/gutenberg/pull/38955))
-- Add Home/End keyboard end-to-end test for List View. ([39265](https://github.com/WordPress/gutenberg/pull/39265))
-- Add some tests for TreeGrid. Update README to reflect latest functionality. ([39302](https://github.com/WordPress/gutenberg/pull/39302))
-- Add test case for post locking feature saving. ([39022](https://github.com/WordPress/gutenberg/pull/39022))
-- Add tests for media replace flow. ([39005](https://github.com/WordPress/gutenberg/pull/39005))
-- Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. ([39039](https://github.com/WordPress/gutenberg/pull/39039))
-- ESLint Plugin: Make Prettier integration optional. ([39244](https://github.com/WordPress/gutenberg/pull/39244))
-- Fix performance tests by adding backwards compatibility to welcome guide utility. ([39300](https://github.com/WordPress/gutenberg/pull/39300))
-- Improve switch to draft button end-to-end test robustness. ([38971](https://github.com/WordPress/gutenberg/pull/38971))
-- Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
-- Social Icons: Begin Automating Existing Manual Test Cases. ([39027](https://github.com/WordPress/gutenberg/pull/39027))
-- Update 'clickMenuItem' test util to use full label matching. ([39274](https://github.com/WordPress/gutenberg/pull/39274))
-- Update preview test to wait for publish panel to appear before closing it. ([39100](https://github.com/WordPress/gutenberg/pull/39100))
+
+-   Add end-to-end testing for experimental nav menu deletion. ([38955](https://github.com/WordPress/gutenberg/pull/38955))
+-   Add Home/End keyboard end-to-end test for List View. ([39265](https://github.com/WordPress/gutenberg/pull/39265))
+-   Add some tests for TreeGrid. Update README to reflect latest functionality. ([39302](https://github.com/WordPress/gutenberg/pull/39302))
+-   Add test case for post locking feature saving. ([39022](https://github.com/WordPress/gutenberg/pull/39022))
+-   Add tests for media replace flow. ([39005](https://github.com/WordPress/gutenberg/pull/39005))
+-   Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. ([39039](https://github.com/WordPress/gutenberg/pull/39039))
+-   ESLint Plugin: Make Prettier integration optional. ([39244](https://github.com/WordPress/gutenberg/pull/39244))
+-   Fix performance tests by adding backwards compatibility to welcome guide utility. ([39300](https://github.com/WordPress/gutenberg/pull/39300))
+-   Improve switch to draft button end-to-end test robustness. ([38971](https://github.com/WordPress/gutenberg/pull/38971))
+-   Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
+-   Social Icons: Begin Automating Existing Manual Test Cases. ([39027](https://github.com/WordPress/gutenberg/pull/39027))
+-   Update 'clickMenuItem' test util to use full label matching. ([39274](https://github.com/WordPress/gutenberg/pull/39274))
+-   Update preview test to wait for publish panel to appear before closing it. ([39100](https://github.com/WordPress/gutenberg/pull/39100))
 
 #### Build Tooling
-- Fix spelling of contributors in changelog script. ([39029](https://github.com/WordPress/gutenberg/pull/39029))
-- Resolve peer dependency warnings. ([39043](https://github.com/WordPress/gutenberg/pull/39043))
+
+-   Fix spelling of contributors in changelog script. ([39029](https://github.com/WordPress/gutenberg/pull/39029))
+-   Resolve peer dependency warnings. ([39043](https://github.com/WordPress/gutenberg/pull/39043))
 
 #### npm Packages
-- Fix `npm run docs:Build` crashing when a `block.json` lacks `supports` key. ([39241](https://github.com/WordPress/gutenberg/pull/39241))
-- Packages: Automate npm publishing as part of Gutenberg release workflow. ([39259](https://github.com/WordPress/gutenberg/pull/39259))
-- Packages: Automatically acceppt all Lerna commands when run with CI flag. ([39199](https://github.com/WordPress/gutenberg/pull/39199))
-- Packages: Update CLI publishing tool to run in CI mode. ([38993](https://github.com/WordPress/gutenberg/pull/38993))
 
-#### Plugin
-- Account for upcoming changes in styles metadata in WordPress 5.9. ([36327](https://github.com/WordPress/gutenberg/pull/36327))
-- Don't filter 'theme_templates' when running WP 5.9. ([39017](https://github.com/WordPress/gutenberg/pull/39017))
+-   Fix `npm run docs:Build` crashing when a `block.json` lacks `supports` key. ([39241](https://github.com/WordPress/gutenberg/pull/39241))
+-   Packages: Automate npm publishing as part of Gutenberg release workflow. ([39259](https://github.com/WordPress/gutenberg/pull/39259))
+-   Packages: Automatically acceppt all Lerna commands when run with CI flag. ([39199](https://github.com/WordPress/gutenberg/pull/39199))
+-   Packages: Update CLI publishing tool to run in CI mode. ([38993](https://github.com/WordPress/gutenberg/pull/38993))
 
+#### Plugin
 
-## First time contributors
+-   Account for upcoming changes in styles metadata in WordPress 5.9. ([36327](https://github.com/WordPress/gutenberg/pull/36327))
+-   Don't filter 'theme_templates' when running WP 5.9. ([39017](https://github.com/WordPress/gutenberg/pull/39017))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @ahsanshaheen199: fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
-- @alshakerM: Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
-- @awps: Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
-- @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
-- @ironprogrammer: Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
-- @joshuafredrickson: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
-- @jostnes: Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
-- @mashikag: Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
-- @tomasztunik: Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
-- @Tumas2: Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
+The following PRs were merged by first-time contributors:
 
+-   @ahsanshaheen199: fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
+-   @alshakerM: Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
+-   @awps: Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
+-   @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
+-   @ironprogrammer: Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
+-   @joshuafredrickson: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
+-   @jostnes: Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
+-   @mashikag: Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
+-   @tomasztunik: Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
+-   @Tumas2: Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
 
 ## Contributors
 
@@ -6627,17 +30769,14 @@ The following contributors merged PRs in this release:
 
 @adamziel @ahsanshaheen199 @ajlende @alexstine @alshakerM @amustaque97 @andrewserong @aristath @awps @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @delowardev @dmsnell @draganescu @fluiddot @francisei @getdave @gwwar @gziolo @illusaen @ironprogrammer @jasmussen @joshuafredrickson @jostnes @jsnajdr @Mamaduka @mashikag @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ocean90 @opr @priethor @ramonjd @ryanwelcher @scruffian @Sidsector9 @SiobhyB @Sisanu @stokesman @talldan @tellthemachines @tomasztunik @ttahmouch @Tumas2 @walbo @webmandesign @zaguiini @ZebulanStanphill
 
-
 = 12.7.2 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Block Editor: Improve Global Styles filtering order. ([39364](https://github.com/WordPress/gutenberg/pull/39364))
-- getQueryArgs: Improvement to prototype handling. ([39365](https://github.com/WordPress/gutenberg/pull/39365))
+-   Block Editor: Improve Global Styles filtering order. ([39364](https://github.com/WordPress/gutenberg/pull/39364))
+-   getQueryArgs: Improvement to prototype handling. ([39365](https://github.com/WordPress/gutenberg/pull/39365))
 
 ## Contributors
 
@@ -6645,250 +30784,279 @@ The following contributors merged PRs in this release:
 
 @jorgefilipecosta
 
-
 = 12.8.0-rc.1 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Change copying PHP files to dist directory to opt-in via a CLI  flag. ([39171](https://github.com/WordPress/gutenberg/pull/39171))
-- Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
+-   Change copying PHP files to dist directory to opt-in via a CLI flag. ([39171](https://github.com/WordPress/gutenberg/pull/39171))
+-   Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
 
 #### Components
-- Enhance/confirmdialog add custom button text. ([38994](https://github.com/WordPress/gutenberg/pull/38994))
-- InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. ([39109](https://github.com/WordPress/gutenberg/pull/39109))
-- Update framer motion to 6.2.8. ([38999](https://github.com/WordPress/gutenberg/pull/38999))
-- `UnitControl`: Tidy up utils and types. ([38987](https://github.com/WordPress/gutenberg/pull/38987))
+
+-   Enhance/confirmdialog add custom button text. ([38994](https://github.com/WordPress/gutenberg/pull/38994))
+-   InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. ([39109](https://github.com/WordPress/gutenberg/pull/39109))
+-   Update framer motion to 6.2.8. ([38999](https://github.com/WordPress/gutenberg/pull/38999))
+-   `UnitControl`: Tidy up utils and types. ([38987](https://github.com/WordPress/gutenberg/pull/38987))
 
 #### Post Editor
-- Add interface preferences modal to edit post. ([39176](https://github.com/WordPress/gutenberg/pull/39176))
-- Migrate hidden block types (block manager data) to new preferences packages. ([39132](https://github.com/WordPress/gutenberg/pull/39132))
-- Migrate post editor feature preferences to use new preferences package. ([39115](https://github.com/WordPress/gutenberg/pull/39115))
+
+-   Add interface preferences modal to edit post. ([39176](https://github.com/WordPress/gutenberg/pull/39176))
+-   Migrate hidden block types (block manager data) to new preferences packages. ([39132](https://github.com/WordPress/gutenberg/pull/39132))
+-   Migrate post editor feature preferences to use new preferences package. ([39115](https://github.com/WordPress/gutenberg/pull/39115))
 
 #### Block Library
-- Improve create new UI feedback in Nav block. ([39219](https://github.com/WordPress/gutenberg/pull/39219))
-- Media & Text: Display media while uploading. ([39275](https://github.com/WordPress/gutenberg/pull/39275))
+
+-   Improve create new UI feedback in Nav block. ([39219](https://github.com/WordPress/gutenberg/pull/39219))
+-   Media & Text: Display media while uploading. ([39275](https://github.com/WordPress/gutenberg/pull/39275))
 
 #### Testing
-- Add Home/End keyboard end-to-end test for List View. ([39265](https://github.com/WordPress/gutenberg/pull/39265))
-- Improve switch to draft button end-to-end test robustness. ([38971](https://github.com/WordPress/gutenberg/pull/38971))
+
+-   Add Home/End keyboard end-to-end test for List View. ([39265](https://github.com/WordPress/gutenberg/pull/39265))
+-   Improve switch to draft button end-to-end test robustness. ([38971](https://github.com/WordPress/gutenberg/pull/38971))
 
 #### Site Editor
-- Migrate site editor to use new preferences package. ([39158](https://github.com/WordPress/gutenberg/pull/39158))
-- Resolve homepage template on server-side. ([38817](https://github.com/WordPress/gutenberg/pull/38817))
+
+-   Migrate site editor to use new preferences package. ([39158](https://github.com/WordPress/gutenberg/pull/39158))
+-   Resolve homepage template on server-side. ([38817](https://github.com/WordPress/gutenberg/pull/38817))
 
 #### Widgets Editor
-- Migrate customize widgets editor to use new preferences package. ([39112](https://github.com/WordPress/gutenberg/pull/39112))
-- Migrate standalone widgets editor to use new preferences package. ([39084](https://github.com/WordPress/gutenberg/pull/39084))
+
+-   Migrate customize widgets editor to use new preferences package. ([39112](https://github.com/WordPress/gutenberg/pull/39112))
+-   Migrate standalone widgets editor to use new preferences package. ([39084](https://github.com/WordPress/gutenberg/pull/39084))
 
 #### Media
-- MediaReplaceFlow: Add 'onError' prop to handle error notifications. ([39197](https://github.com/WordPress/gutenberg/pull/39197))
+
+-   MediaReplaceFlow: Add 'onError' prop to handle error notifications. ([39197](https://github.com/WordPress/gutenberg/pull/39197))
 
 #### Accessibility
-- Block settings dropdown: Use block display title in remove label. ([39110](https://github.com/WordPress/gutenberg/pull/39110))
+
+-   Block settings dropdown: Use block display title in remove label. ([39110](https://github.com/WordPress/gutenberg/pull/39110))
 
 #### Global Styles
-- Site Editor: Add theme.json to export file. ([39048](https://github.com/WordPress/gutenberg/pull/39048))
+
+-   Site Editor: Add theme.json to export file. ([39048](https://github.com/WordPress/gutenberg/pull/39048))
 
 #### npm Packages
-- Packages: Update CLI publishing tool to run in CI mode. ([38993](https://github.com/WordPress/gutenberg/pull/38993))
+
+-   Packages: Update CLI publishing tool to run in CI mode. ([38993](https://github.com/WordPress/gutenberg/pull/38993))
 
 #### Block Editor
-- Add a link completer for inline links to posts. ([29172](https://github.com/WordPress/gutenberg/pull/29172))
 
+-   Add a link completer for inline links to posts. ([29172](https://github.com/WordPress/gutenberg/pull/29172))
 
 ### New APIs
 
-- Add new `@wordpress/preferences` package. ([38873](https://github.com/WordPress/gutenberg/pull/38873))
-- Create Block: Add support for more plugin header fields. ([39096](https://github.com/WordPress/gutenberg/pull/39096))
-
+-   Add new `@wordpress/preferences` package. ([38873](https://github.com/WordPress/gutenberg/pull/38873))
+-   Create Block: Add support for more plugin header fields. ([39096](https://github.com/WordPress/gutenberg/pull/39096))
 
 ### Bug Fixes
 
-- Compose: Avoid memory leak in use-drop-zone. ([39038](https://github.com/WordPress/gutenberg/pull/39038))
-- Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
-- Fix: Button highlight popover overflow conflict with link popover. ([38771](https://github.com/WordPress/gutenberg/pull/38771))
-- Fixes block highlight after block move. ([38915](https://github.com/WordPress/gutenberg/pull/38915))
-- Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
-- apiFetch preloading middleware: Handle urlencoded and rest_route query params. ([38914](https://github.com/WordPress/gutenberg/pull/38914))
+-   Compose: Avoid memory leak in use-drop-zone. ([39038](https://github.com/WordPress/gutenberg/pull/39038))
+-   Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
+-   Fix: Button highlight popover overflow conflict with link popover. ([38771](https://github.com/WordPress/gutenberg/pull/38771))
+-   Fixes block highlight after block move. ([38915](https://github.com/WordPress/gutenberg/pull/38915))
+-   Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
+-   apiFetch preloading middleware: Handle urlencoded and rest_route query params. ([38914](https://github.com/WordPress/gutenberg/pull/38914))
 
 #### Block Library
-- Added aria label to the button block with icon. ([38966](https://github.com/WordPress/gutenberg/pull/38966))
-- File: Check if 'fileId' exists before setting the attribute. ([39088](https://github.com/WordPress/gutenberg/pull/39088))
-- File: Don't display loading animation on upload error. ([39213](https://github.com/WordPress/gutenberg/pull/39213))
-- File: Fix the undo trap. ([39215](https://github.com/WordPress/gutenberg/pull/39215))
-- Fix Comments Pagination Number with no pagination settings. ([39204](https://github.com/WordPress/gutenberg/pull/39204))
-- Fix file block validation error by not outputting aria-describedby if there's no description. ([39083](https://github.com/WordPress/gutenberg/pull/39083))
-- Fix navigation menu error when menus are not yet fetched. ([39151](https://github.com/WordPress/gutenberg/pull/39151))
-- Hide border panel when all border features have been disabled. ([36791](https://github.com/WordPress/gutenberg/pull/36791))
-- Hide current menu from dropdown list in Nav block. ([38916](https://github.com/WordPress/gutenberg/pull/38916))
-- Image: Display errors after failed upload. ([39178](https://github.com/WordPress/gutenberg/pull/39178))
-- Media & Text: Display errors after failed upload. ([39245](https://github.com/WordPress/gutenberg/pull/39245))
-- Post Expert: Fix missing class in post excerpt. ([38747](https://github.com/WordPress/gutenberg/pull/38747))
-- Post Terms: Unescape HTML entities in term names. ([39216](https://github.com/WordPress/gutenberg/pull/39216))
-- Restructure code bock styling. ([38712](https://github.com/WordPress/gutenberg/pull/38712))
-- Try: Fix image responsive rules. ([39045](https://github.com/WordPress/gutenberg/pull/39045))
-- Widget Group: Make `save()` markup the same as `render_callback` markup. ([38510](https://github.com/WordPress/gutenberg/pull/38510))
-- [Cover]: Fix keep selected unit on deleting minHeight value. ([39145](https://github.com/WordPress/gutenberg/pull/39145))
+
+-   Added aria label to the button block with icon. ([38966](https://github.com/WordPress/gutenberg/pull/38966))
+-   File: Check if 'fileId' exists before setting the attribute. ([39088](https://github.com/WordPress/gutenberg/pull/39088))
+-   File: Don't display loading animation on upload error. ([39213](https://github.com/WordPress/gutenberg/pull/39213))
+-   File: Fix the undo trap. ([39215](https://github.com/WordPress/gutenberg/pull/39215))
+-   Fix Comments Pagination Number with no pagination settings. ([39204](https://github.com/WordPress/gutenberg/pull/39204))
+-   Fix file block validation error by not outputting aria-describedby if there's no description. ([39083](https://github.com/WordPress/gutenberg/pull/39083))
+-   Fix navigation menu error when menus are not yet fetched. ([39151](https://github.com/WordPress/gutenberg/pull/39151))
+-   Hide border panel when all border features have been disabled. ([36791](https://github.com/WordPress/gutenberg/pull/36791))
+-   Hide current menu from dropdown list in Nav block. ([38916](https://github.com/WordPress/gutenberg/pull/38916))
+-   Image: Display errors after failed upload. ([39178](https://github.com/WordPress/gutenberg/pull/39178))
+-   Media & Text: Display errors after failed upload. ([39245](https://github.com/WordPress/gutenberg/pull/39245))
+-   Post Expert: Fix missing class in post excerpt. ([38747](https://github.com/WordPress/gutenberg/pull/38747))
+-   Post Terms: Unescape HTML entities in term names. ([39216](https://github.com/WordPress/gutenberg/pull/39216))
+-   Restructure code bock styling. ([38712](https://github.com/WordPress/gutenberg/pull/38712))
+-   Try: Fix image responsive rules. ([39045](https://github.com/WordPress/gutenberg/pull/39045))
+-   Widget Group: Make `save()` markup the same as `render_callback` markup. ([38510](https://github.com/WordPress/gutenberg/pull/38510))
+-   [Cover]: Fix keep selected unit on deleting minHeight value. ([39145](https://github.com/WordPress/gutenberg/pull/39145))
 
 #### Global Styles
-- Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
-- Fix default duotone preset SVG and style generation. ([38681](https://github.com/WordPress/gutenberg/pull/38681))
-- [Global Styles]: Fix header panel height. ([39119](https://github.com/WordPress/gutenberg/pull/39119))
+
+-   Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
+-   Fix default duotone preset SVG and style generation. ([38681](https://github.com/WordPress/gutenberg/pull/38681))
+-   [Global Styles]: Fix header panel height. ([39119](https://github.com/WordPress/gutenberg/pull/39119))
 
 #### Testing
-- Fix performance tests by adding backwards compatibility to welcome guide utility. ([39300](https://github.com/WordPress/gutenberg/pull/39300))
-- e2e-tests: Update preview test to wait for publish panel to appear before closing it. ([39100](https://github.com/WordPress/gutenberg/pull/39100))
+
+-   Fix performance tests by adding backwards compatibility to welcome guide utility. ([39300](https://github.com/WordPress/gutenberg/pull/39300))
+-   e2e-tests: Update preview test to wait for publish panel to appear before closing it. ([39100](https://github.com/WordPress/gutenberg/pull/39100))
 
 #### Components
-- Update drag gesture of `InputControl`-based controls with axial constraint. ([38968](https://github.com/WordPress/gutenberg/pull/38968))
-- `UnitControl`: Fix controlled `unit` behavior. ([39148](https://github.com/WordPress/gutenberg/pull/39148))
+
+-   Update drag gesture of `InputControl`-based controls with axial constraint. ([38968](https://github.com/WordPress/gutenberg/pull/38968))
+-   `UnitControl`: Fix controlled `unit` behavior. ([39148](https://github.com/WordPress/gutenberg/pull/39148))
 
 #### Post Editor
-- Avoid error when 'styles' settings are removed. ([39091](https://github.com/WordPress/gutenberg/pull/39091))
-- URL: Fix code drift in the Editor package by removing duplicate cleanForSlug function. ([39033](https://github.com/WordPress/gutenberg/pull/39033))
+
+-   Avoid error when 'styles' settings are removed. ([39091](https://github.com/WordPress/gutenberg/pull/39091))
+-   URL: Fix code drift in the Editor package by removing duplicate cleanForSlug function. ([39033](https://github.com/WordPress/gutenberg/pull/39033))
 
 #### Build Tooling
-- Fix `npm run docs:Build` crashing when a `block.json` lacks `supports` key. ([39241](https://github.com/WordPress/gutenberg/pull/39241))
+
+-   Fix `npm run docs:Build` crashing when a `block.json` lacks `supports` key. ([39241](https://github.com/WordPress/gutenberg/pull/39241))
 
 #### npm Packages
-- Packages: Automatically acceppt all Lerna commands when run with CI flag. ([39199](https://github.com/WordPress/gutenberg/pull/39199))
+
+-   Packages: Automatically acceppt all Lerna commands when run with CI flag. ([39199](https://github.com/WordPress/gutenberg/pull/39199))
 
 #### CSS & Styling
-- Fixes #38761 by removing obsolete `::Before` pseudo element. ([38762](https://github.com/WordPress/gutenberg/pull/38762))
 
+-   Fixes #38761 by removing obsolete `::Before` pseudo element. ([38762](https://github.com/WordPress/gutenberg/pull/38762))
 
 ### Documentation
 
-- Add import useBlockProps. ([39072](https://github.com/WordPress/gutenberg/pull/39072))
-- Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
-- Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
-- [Gutenberg Data Tutorial] Part 3: Building an edit form. ([38581](https://github.com/WordPress/gutenberg/pull/38581))
+-   Add import useBlockProps. ([39072](https://github.com/WordPress/gutenberg/pull/39072))
+-   Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
+-   Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
+-   [Gutenberg Data Tutorial] Part 3: Building an edit form. ([38581](https://github.com/WordPress/gutenberg/pull/38581))
 
 #### Components
-- Move recent CHANGELOG entry to `Unreleased` section. ([39169](https://github.com/WordPress/gutenberg/pull/39169))
-- Storybook: Support proper extraction of TypeScript prop types. ([38842](https://github.com/WordPress/gutenberg/pull/38842))
-- fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
 
+-   Move recent CHANGELOG entry to `Unreleased` section. ([39169](https://github.com/WordPress/gutenberg/pull/39169))
+-   Storybook: Support proper extraction of TypeScript prop types. ([38842](https://github.com/WordPress/gutenberg/pull/38842))
+-   fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
 
 ### Code Quality
 
-- Core Data: Rename `types` directory to `entity-types`. ([39225](https://github.com/WordPress/gutenberg/pull/39225))
-- Core data: Fix some typing issues. ([39212](https://github.com/WordPress/gutenberg/pull/39212))
-- Core data: Fix some typing issues. ([39214](https://github.com/WordPress/gutenberg/pull/39214))
-- Fix `@wordpress/comment-case` ESlint errors but without adding the disable-rule pragma. ([37006](https://github.com/WordPress/gutenberg/pull/37006))
-- Refactor useSelect usages to useEntityRecords. ([38827](https://github.com/WordPress/gutenberg/pull/38827))
+-   Core Data: Rename `types` directory to `entity-types`. ([39225](https://github.com/WordPress/gutenberg/pull/39225))
+-   Core data: Fix some typing issues. ([39212](https://github.com/WordPress/gutenberg/pull/39212))
+-   Core data: Fix some typing issues. ([39214](https://github.com/WordPress/gutenberg/pull/39214))
+-   Fix `@wordpress/comment-case` ESlint errors but without adding the disable-rule pragma. ([37006](https://github.com/WordPress/gutenberg/pull/37006))
+-   Refactor useSelect usages to useEntityRecords. ([38827](https://github.com/WordPress/gutenberg/pull/38827))
 
 #### Post Editor
-- useBlockEditorSettings: Remove unused unstableBase fetch. ([39221](https://github.com/WordPress/gutenberg/pull/39221))
+
+-   useBlockEditorSettings: Remove unused unstableBase fetch. ([39221](https://github.com/WordPress/gutenberg/pull/39221))
 
 #### Widgets Editor
-- Delete widget editor redundant css for more menu. ([39113](https://github.com/WordPress/gutenberg/pull/39113))
+
+-   Delete widget editor redundant css for more menu. ([39113](https://github.com/WordPress/gutenberg/pull/39113))
 
 #### Plugin
-- Layout: Remove duplicate var declaration. ([39111](https://github.com/WordPress/gutenberg/pull/39111))
+
+-   Layout: Remove duplicate var declaration. ([39111](https://github.com/WordPress/gutenberg/pull/39111))
 
 #### Global Styles
-- Move editor settings code to compat folder. ([39030](https://github.com/WordPress/gutenberg/pull/39030))
+
+-   Move editor settings code to compat folder. ([39030](https://github.com/WordPress/gutenberg/pull/39030))
 
 #### Themes
-- Don't filter 'theme_templates' when running WP 5.9. ([39017](https://github.com/WordPress/gutenberg/pull/39017))
+
+-   Don't filter 'theme_templates' when running WP 5.9. ([39017](https://github.com/WordPress/gutenberg/pull/39017))
 
 #### Components
-- TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. ([39002](https://github.com/WordPress/gutenberg/pull/39002))
+
+-   TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. ([39002](https://github.com/WordPress/gutenberg/pull/39002))
 
 #### Block Library
-- Improve Nav block loading and placeholder states. ([38907](https://github.com/WordPress/gutenberg/pull/38907))
 
+-   Improve Nav block loading and placeholder states. ([38907](https://github.com/WordPress/gutenberg/pull/38907))
 
 ### Tools
 
-- Code owners: Remove users without write access and fix typos. ([39238](https://github.com/WordPress/gutenberg/pull/39238))
-- Simplify Pull Request template. ([39229](https://github.com/WordPress/gutenberg/pull/39229))
+-   Code owners: Remove users without write access and fix typos. ([39238](https://github.com/WordPress/gutenberg/pull/39238))
+-   Simplify Pull Request template. ([39229](https://github.com/WordPress/gutenberg/pull/39229))
 
 #### Testing
-- Add end-to-end testing for experimental nav menu deletion. ([38955](https://github.com/WordPress/gutenberg/pull/38955))
-- Add test case for post locking feature saving. ([39022](https://github.com/WordPress/gutenberg/pull/39022))
-- Add tests for media replace flow. ([39005](https://github.com/WordPress/gutenberg/pull/39005))
-- Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. ([39039](https://github.com/WordPress/gutenberg/pull/39039))
-- Update 'clickMenuItem' test util to use full label matching. ([39274](https://github.com/WordPress/gutenberg/pull/39274))
+
+-   Add end-to-end testing for experimental nav menu deletion. ([38955](https://github.com/WordPress/gutenberg/pull/38955))
+-   Add test case for post locking feature saving. ([39022](https://github.com/WordPress/gutenberg/pull/39022))
+-   Add tests for media replace flow. ([39005](https://github.com/WordPress/gutenberg/pull/39005))
+-   Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. ([39039](https://github.com/WordPress/gutenberg/pull/39039))
+-   Update 'clickMenuItem' test util to use full label matching. ([39274](https://github.com/WordPress/gutenberg/pull/39274))
 
 #### Build Tooling
-- Fix spelling of contributors in changelog script. ([39029](https://github.com/WordPress/gutenberg/pull/39029))
-- Resolve peer dependency warnings. ([39043](https://github.com/WordPress/gutenberg/pull/39043))
+
+-   Fix spelling of contributors in changelog script. ([39029](https://github.com/WordPress/gutenberg/pull/39029))
+-   Resolve peer dependency warnings. ([39043](https://github.com/WordPress/gutenberg/pull/39043))
 
 #### npm Packages
-- Packages: Automate npm publishing as part of Gutenberg release workflow. ([39259](https://github.com/WordPress/gutenberg/pull/39259))
 
+-   Packages: Automate npm publishing as part of Gutenberg release workflow. ([39259](https://github.com/WordPress/gutenberg/pull/39259))
 
 ### Various
 
-- Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
-- Add reusable preferences modal to interface package. ([39153](https://github.com/WordPress/gutenberg/pull/39153))
-- Create Block: Add confirm prompt before showing the plugin options. ([39105](https://github.com/WordPress/gutenberg/pull/39105))
-- Create Block: Improve custom project template configuration. ([39049](https://github.com/WordPress/gutenberg/pull/39049))
-- Element: Add changelog notes for serialize attribute casing. ([39141](https://github.com/WordPress/gutenberg/pull/39141))
-- Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
-- Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
+-   Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
+-   Add reusable preferences modal to interface package. ([39153](https://github.com/WordPress/gutenberg/pull/39153))
+-   Create Block: Add confirm prompt before showing the plugin options. ([39105](https://github.com/WordPress/gutenberg/pull/39105))
+-   Create Block: Improve custom project template configuration. ([39049](https://github.com/WordPress/gutenberg/pull/39049))
+-   Element: Add changelog notes for serialize attribute casing. ([39141](https://github.com/WordPress/gutenberg/pull/39141))
+-   Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
+-   Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
 
 #### Block Library
-- Adding a GIF badge to image blocks with gifs in them. ([38996](https://github.com/WordPress/gutenberg/pull/38996))
-- Buttons: Don't set a placeholder text color. ([39034](https://github.com/WordPress/gutenberg/pull/39034))
-- Post author name: Add "post" prefix to CSS class. ([38320](https://github.com/WordPress/gutenberg/pull/38320))
-- Post comments form block show warning wrt to post/page. ([38011](https://github.com/WordPress/gutenberg/pull/38011))
-- Refactor classic menu conversion process. ([38858](https://github.com/WordPress/gutenberg/pull/38858))
-- Social Icons - Begin Automating Existing Manual Test Cases. ([39027](https://github.com/WordPress/gutenberg/pull/39027))
-- Tag Cloud: Use flex for the Outline style. ([38995](https://github.com/WordPress/gutenberg/pull/38995))
+
+-   Adding a GIF badge to image blocks with gifs in them. ([38996](https://github.com/WordPress/gutenberg/pull/38996))
+-   Buttons: Don't set a placeholder text color. ([39034](https://github.com/WordPress/gutenberg/pull/39034))
+-   Post author name: Add "post" prefix to CSS class. ([38320](https://github.com/WordPress/gutenberg/pull/38320))
+-   Post comments form block show warning wrt to post/page. ([38011](https://github.com/WordPress/gutenberg/pull/38011))
+-   Refactor classic menu conversion process. ([38858](https://github.com/WordPress/gutenberg/pull/38858))
+-   Social Icons - Begin Automating Existing Manual Test Cases. ([39027](https://github.com/WordPress/gutenberg/pull/39027))
+-   Tag Cloud: Use flex for the Outline style. ([38995](https://github.com/WordPress/gutenberg/pull/38995))
 
 #### Components
-- FontSizePicker: Refactor stories to use Controls. ([38727](https://github.com/WordPress/gutenberg/pull/38727))
-- Normalize font-family. ([38969](https://github.com/WordPress/gutenberg/pull/38969))
-- Storybook: Add webpack loader for easier story descriptions. ([39165](https://github.com/WordPress/gutenberg/pull/39165))
-- [Components]: Update changelog follow up for #38985. ([39013](https://github.com/WordPress/gutenberg/pull/39013))
+
+-   FontSizePicker: Refactor stories to use Controls. ([38727](https://github.com/WordPress/gutenberg/pull/38727))
+-   Normalize font-family. ([38969](https://github.com/WordPress/gutenberg/pull/38969))
+-   Storybook: Add webpack loader for easier story descriptions. ([39165](https://github.com/WordPress/gutenberg/pull/39165))
+-   [Components]: Update changelog follow up for #38985. ([39013](https://github.com/WordPress/gutenberg/pull/39013))
 
 #### Themes
-- Theme Export: Add index.php and style.css. ([39173](https://github.com/WordPress/gutenberg/pull/39173))
+
+-   Theme Export: Add index.php and style.css. ([39173](https://github.com/WordPress/gutenberg/pull/39173))
 
 #### Icons
-- Update Pin icon, add new Post icon. ([39139](https://github.com/WordPress/gutenberg/pull/39139))
+
+-   Update Pin icon, add new Post icon. ([39139](https://github.com/WordPress/gutenberg/pull/39139))
 
 #### Block Conversion
-- [Block Conversion]: Show `group` option in `Group` blocks. ([39094](https://github.com/WordPress/gutenberg/pull/39094))
+
+-   [Block Conversion]: Show `group` option in `Group` blocks. ([39094](https://github.com/WordPress/gutenberg/pull/39094))
 
 #### Accessibility
-- Try allowing tab into block placeholder. ([39085](https://github.com/WordPress/gutenberg/pull/39085))
+
+-   Try allowing tab into block placeholder. ([39085](https://github.com/WordPress/gutenberg/pull/39085))
 
 #### Full Site Editing
-- Expose plugin area to site editor's List page. ([39078](https://github.com/WordPress/gutenberg/pull/39078))
+
+-   Expose plugin area to site editor's List page. ([39078](https://github.com/WordPress/gutenberg/pull/39078))
 
 #### Data Layer
-- Handle resolution errors in @wordpress/data. ([38669](https://github.com/WordPress/gutenberg/pull/38669))
+
+-   Handle resolution errors in @wordpress/data. ([38669](https://github.com/WordPress/gutenberg/pull/38669))
 
 #### Design Tools
-- Webfonts API. ([37140](https://github.com/WordPress/gutenberg/pull/37140))
 
-#### Global Styles
-- Account for upcoming changes in styles metadata in WordPress 5.9. ([36327](https://github.com/WordPress/gutenberg/pull/36327))
+-   Webfonts API. ([37140](https://github.com/WordPress/gutenberg/pull/37140))
 
+#### Global Styles
 
-## First time contributors
+-   Account for upcoming changes in styles metadata in WordPress 5.9. ([36327](https://github.com/WordPress/gutenberg/pull/36327))
 
-The following PRs were merged by first time contributors:
+## First-time contributors
 
-- @ahsanshaheen199: fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
-- @alshakerM: Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
-- @awps: Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
-- @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
-- @ironprogrammer: Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
-- @joshuafredrickson: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
-- @jostnes: Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
-- @mashikag: Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
-- @tomasztunik: Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
-- @Tumas2: Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
+The following PRs were merged by first-time contributors:
 
+-   @ahsanshaheen199: fix: Code example in flyout component. ([39156](https://github.com/WordPress/gutenberg/pull/39156))
+-   @alshakerM: Render SVG props that have dashes correctly. ([38936](https://github.com/WordPress/gutenberg/pull/38936))
+-   @awps: Missing `,toggleFormat` from last code block. ([39146](https://github.com/WordPress/gutenberg/pull/39146))
+-   @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. ([39101](https://github.com/WordPress/gutenberg/pull/39101))
+-   @ironprogrammer: Raise z-index of content div relative to sidebars. ([38893](https://github.com/WordPress/gutenberg/pull/38893))
+-   @joshuafredrickson: Add a resolvable JavaScript entry point to base-styles. ([39240](https://github.com/WordPress/gutenberg/pull/39240))
+-   @jostnes: Remove rename rn UI tests. ([39042](https://github.com/WordPress/gutenberg/pull/39042))
+-   @mashikag: Fix Blocks list ordering in Global Styles. ([39093](https://github.com/WordPress/gutenberg/pull/39093))
+-   @tomasztunik: Fix Global styles overriding block's element styles. ([39012](https://github.com/WordPress/gutenberg/pull/39012))
+-   @Tumas2: Spelling error in `JustifyContentControl` example. ([39234](https://github.com/WordPress/gutenberg/pull/39234))
 
 ## Contributors
 
@@ -6896,17 +31064,15 @@ The following contributors merged PRs in this release:
 
 @adamziel @ahsanshaheen199 @ajlende @alexstine @alshakerM @amustaque97 @andrewserong @aristath @awps @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @delowardev @dmsnell @draganescu @fluiddot @francisei @getdave @gwwar @gziolo @illusaen @ironprogrammer @jasmussen @joshuafredrickson @jostnes @jsnajdr @Mamaduka @mashikag @mirka @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ocean90 @opr @priethor @ramonjd @ryanwelcher @scruffian @Sidsector9 @SiobhyB @Sisanu @stokesman @talldan @tellthemachines @tomasztunik @ttahmouch @Tumas2 @walbo @webmandesign @zaguiini @ZebulanStanphill
 
-
 = 12.7.1 =
 
-
-
 ## Changelog
 
 ### Bug Fixes
 
 #### Block Library
-- Image block: Add additional selector to account for the move of is-style classes. ([39295](https://github.com/WordPress/gutenberg/pull/39295))
+
+-   Image block: Add additional selector to account for the move of is-style classes. ([39295](https://github.com/WordPress/gutenberg/pull/39295))
 
 ## Contributors
 
@@ -6914,7 +31080,6 @@ The following contributors merged PRs in this release:
 
 @glendaviesnz
 
-
 = 12.7.0 =
 
 ## Changelog
@@ -6922,231 +31087,262 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Block Library
-- Columns: Add border support. ([31737](https://github.com/WordPress/gutenberg/pull/31737))
-- Comment Template: Fix comment pagination with nested replies. ([38187](https://github.com/WordPress/gutenberg/pull/38187))
-- Comments Query Loop: Show placeholder comments on site editor. ([38072](https://github.com/WordPress/gutenberg/pull/38072))
-- Group Blocks: Add margin support (top/bottom). ([37344](https://github.com/WordPress/gutenberg/pull/37344))
-- Navigation: Try unifying submenu arrow positioning. ([37003](https://github.com/WordPress/gutenberg/pull/37003))
-- Page List: Simplify loading state. ([38983](https://github.com/WordPress/gutenberg/pull/38983))
-- Submenu: Add revert button. ([38203](https://github.com/WordPress/gutenberg/pull/38203))
+
+-   Columns: Add border support. ([31737](https://github.com/WordPress/gutenberg/pull/31737))
+-   Comment Template: Fix comment pagination with nested replies. ([38187](https://github.com/WordPress/gutenberg/pull/38187))
+-   Comments Query Loop: Show placeholder comments on site editor. ([38072](https://github.com/WordPress/gutenberg/pull/38072))
+-   Group Blocks: Add margin support (top/bottom). ([37344](https://github.com/WordPress/gutenberg/pull/37344))
+-   Navigation: Try unifying submenu arrow positioning. ([37003](https://github.com/WordPress/gutenberg/pull/37003))
+-   Page List: Simplify loading state. ([38983](https://github.com/WordPress/gutenberg/pull/38983))
+-   Submenu: Add revert button. ([38203](https://github.com/WordPress/gutenberg/pull/38203))
 
 #### Components
-- FocalPointPicker: Allow updating its value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
-- General Interface: Simplify site icon animation on hover. ([38783](https://github.com/WordPress/gutenberg/pull/38783))
-- Navigator: Add `NavigatorButton` and `NavigatorBackButton` components. ([38634](https://github.com/WordPress/gutenberg/pull/38634))
-- Type Refactor: Use `forwardedRef` type for all forwarded refs in @wordpress/components. ([38948](https://github.com/WordPress/gutenberg/pull/38948))
+
+-   FocalPointPicker: Allow updating its value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
+-   General Interface: Simplify site icon animation on hover. ([38783](https://github.com/WordPress/gutenberg/pull/38783))
+-   Navigator: Add `NavigatorButton` and `NavigatorBackButton` components. ([38634](https://github.com/WordPress/gutenberg/pull/38634))
+-   Type Refactor: Use `forwardedRef` type for all forwarded refs in @wordpress/components. ([38948](https://github.com/WordPress/gutenberg/pull/38948))
 
 #### Block Editor
-- Block Editor: Add settings to enable/disable auto anchor generation. ([38780](https://github.com/WordPress/gutenberg/pull/38780))
-- Block Transforms: Keep additional HTML classes during a block transform. ([38964](https://github.com/WordPress/gutenberg/pull/38964))
-- LineHeightControl: Enhance interactions by migrating internals to `NumberControl` on Style options. ([37160](https://github.com/WordPress/gutenberg/pull/37160))
-- List View: Add multi-select behaviour for blocks when shift key is selected. ([38314](https://github.com/WordPress/gutenberg/pull/38314))
-- Quick Inserter: Prioritize showing patterns instead of blocks. ([38709](https://github.com/WordPress/gutenberg/pull/38709))
-- Template Parts: Show existing template parts and a list of block patterns at creation flow. ([38814](https://github.com/WordPress/gutenberg/pull/38814))
+
+-   Block Editor: Add settings to enable/disable auto anchor generation. ([38780](https://github.com/WordPress/gutenberg/pull/38780))
+-   Block Transforms: Keep additional HTML classes during a block transform. ([38964](https://github.com/WordPress/gutenberg/pull/38964))
+-   LineHeightControl: Enhance interactions by migrating internals to `NumberControl` on Style options. ([37160](https://github.com/WordPress/gutenberg/pull/37160))
+-   List View: Add multi-select behaviour for blocks when shift key is selected. ([38314](https://github.com/WordPress/gutenberg/pull/38314))
+-   Quick Inserter: Prioritize showing patterns instead of blocks. ([38709](https://github.com/WordPress/gutenberg/pull/38709))
+-   Template Parts: Show existing template parts and a list of block patterns at creation flow. ([38814](https://github.com/WordPress/gutenberg/pull/38814))
 
 #### Styles
-- Add initial version of the style engine. ([37978](https://github.com/WordPress/gutenberg/pull/37978))
-- Style engine: Refine `Box` type. ([38894](https://github.com/WordPress/gutenberg/pull/38894))
+
+-   Add initial version of the style engine. ([37978](https://github.com/WordPress/gutenberg/pull/37978))
+-   Style engine: Refine `Box` type. ([38894](https://github.com/WordPress/gutenberg/pull/38894))
 
 #### Post Editor
-- Enable tooltip for the main dashboard button. ([38790](https://github.com/WordPress/gutenberg/pull/38790))
+
+-   Enable tooltip for the main dashboard button. ([38790](https://github.com/WordPress/gutenberg/pull/38790))
 
 #### Themes
-- Lowered specificity of alignment rules for support layout so wide alignments work. ([38947](https://github.com/WordPress/gutenberg/pull/38947))
-- Remove data-align divs for themes that support layout. ([38613](https://github.com/WordPress/gutenberg/pull/38613))
-- Remove the div wrapper from the aligned image blocks. ([38657](https://github.com/WordPress/gutenberg/pull/38657))
+
+-   Lowered specificity of alignment rules for support layout so wide alignments work. ([38947](https://github.com/WordPress/gutenberg/pull/38947))
+-   Remove data-align divs for themes that support layout. ([38613](https://github.com/WordPress/gutenberg/pull/38613))
+-   Remove the div wrapper from the aligned image blocks. ([38657](https://github.com/WordPress/gutenberg/pull/38657))
 
 #### Patterns
-- Allow pattern registration from directory with theme.json. ([38323](https://github.com/WordPress/gutenberg/pull/38323))
+
+-   Allow pattern registration from directory with theme.json. ([38323](https://github.com/WordPress/gutenberg/pull/38323))
 
 #### List View
-- Expand block list tree on selection. ([35817](https://github.com/WordPress/gutenberg/pull/35817))
+
+-   Expand block list tree on selection. ([35817](https://github.com/WordPress/gutenberg/pull/35817))
 
 ### Bug Fixes
 
 #### Block Library
-- Block Transforms: Fix Image and Video to Cover block transformations. ([38959](https://github.com/WordPress/gutenberg/pull/38959))
-- Cover: Fix gradient overlay (remove black background color) ([38765](https://github.com/WordPress/gutenberg/pull/38765))
-- File: Fix PDF file block full content fixture. ([38725](https://github.com/WordPress/gutenberg/pull/38725))
-- Latest Posts: Add missing class to post title. ([38740](https://github.com/WordPress/gutenberg/pull/38740))
-- Logo: Avoid division by zero in site logo. ([38808](https://github.com/WordPress/gutenberg/pull/38808))
-- Post navigation link: Use correct closing tag. ([38976](https://github.com/WordPress/gutenberg/pull/38976))
-- Query Loop: Display nothing if we want only sticky posts but no stickies exist. ([38909](https://github.com/WordPress/gutenberg/pull/38909))
-- Template Parts: Decode entities in labels. ([38805](https://github.com/WordPress/gutenberg/pull/38805))
-- Social Links: Only apply the social links block migration if there's a need for a migration. ([38561](https://github.com/WordPress/gutenberg/pull/38561))
+
+-   Block Transforms: Fix Image and Video to Cover block transformations. ([38959](https://github.com/WordPress/gutenberg/pull/38959))
+-   Cover: Fix gradient overlay (remove black background color) ([38765](https://github.com/WordPress/gutenberg/pull/38765))
+-   File: Fix PDF file block full content fixture. ([38725](https://github.com/WordPress/gutenberg/pull/38725))
+-   Latest Posts: Add missing class to post title. ([38740](https://github.com/WordPress/gutenberg/pull/38740))
+-   Logo: Avoid division by zero in site logo. ([38808](https://github.com/WordPress/gutenberg/pull/38808))
+-   Post navigation link: Use correct closing tag. ([38976](https://github.com/WordPress/gutenberg/pull/38976))
+-   Query Loop: Display nothing if we want only sticky posts but no stickies exist. ([38909](https://github.com/WordPress/gutenberg/pull/38909))
+-   Template Parts: Decode entities in labels. ([38805](https://github.com/WordPress/gutenberg/pull/38805))
+-   Social Links: Only apply the social links block migration if there's a need for a migration. ([38561](https://github.com/WordPress/gutenberg/pull/38561))
 
 #### Block Editor
-- Backport from core: Global styles duotone not rendering in post editor. ([38897](https://github.com/WordPress/gutenberg/pull/38897))
-- Block Editor: insertDefaultBlock should not trigger an error if the default block is not registered. ([38886](https://github.com/WordPress/gutenberg/pull/38886))
-- Inserter: Fix focus loss after closing patterns explorer from modal. ([38884](https://github.com/WordPress/gutenberg/pull/38884))
-- Multi-selection: avoid RichText instances becoming disabled after multi selection. ([38821](https://github.com/WordPress/gutenberg/pull/38821))
-- Rehabilitate drag gesture in `LineHeightControl`. ([38930](https://github.com/WordPress/gutenberg/pull/38930))
-- RichText: Fix wrong block merging when pressing  `delete` consecutively. ([38991](https://github.com/WordPress/gutenberg/pull/38991))
+
+-   Backport from core: Global styles duotone not rendering in post editor. ([38897](https://github.com/WordPress/gutenberg/pull/38897))
+-   Block Editor: insertDefaultBlock should not trigger an error if the default block is not registered. ([38886](https://github.com/WordPress/gutenberg/pull/38886))
+-   Inserter: Fix focus loss after closing patterns explorer from modal. ([38884](https://github.com/WordPress/gutenberg/pull/38884))
+-   Multi-selection: avoid RichText instances becoming disabled after multi selection. ([38821](https://github.com/WordPress/gutenberg/pull/38821))
+-   Rehabilitate drag gesture in `LineHeightControl`. ([38930](https://github.com/WordPress/gutenberg/pull/38930))
+-   RichText: Fix wrong block merging when pressing `delete` consecutively. ([38991](https://github.com/WordPress/gutenberg/pull/38991))
 
 #### Site Editor
-- Add site editor initial redirect error handling. ([38655](https://github.com/WordPress/gutenberg/pull/38655))
-- Add template check to 'setPage' action. ([38656](https://github.com/WordPress/gutenberg/pull/38656))
-- Adds additional check to guard against incompete presets. ([38902](https://github.com/WordPress/gutenberg/pull/38902))
-- Limit template part slugs to Latin chars. ([38695](https://github.com/WordPress/gutenberg/pull/38695))
-- Template List: Decode entities in record titles. ([38863](https://github.com/WordPress/gutenberg/pull/38863))
+
+-   Add site editor initial redirect error handling. ([38655](https://github.com/WordPress/gutenberg/pull/38655))
+-   Add template check to 'setPage' action. ([38656](https://github.com/WordPress/gutenberg/pull/38656))
+-   Adds additional check to guard against incompete presets. ([38902](https://github.com/WordPress/gutenberg/pull/38902))
+-   Limit template part slugs to Latin chars. ([38695](https://github.com/WordPress/gutenberg/pull/38695))
+-   Template List: Decode entities in record titles. ([38863](https://github.com/WordPress/gutenberg/pull/38863))
 
 #### Styles
-- Allow child classes to be called instead of the parents. ([38857](https://github.com/WordPress/gutenberg/pull/38857))
-- Backport: Allow for classic themes using default presets. ([38701](https://github.com/WordPress/gutenberg/pull/38701))
-- Fix global styles loading logic. ([38745](https://github.com/WordPress/gutenberg/pull/38745))
+
+-   Allow child classes to be called instead of the parents. ([38857](https://github.com/WordPress/gutenberg/pull/38857))
+-   Backport: Allow for classic themes using default presets. ([38701](https://github.com/WordPress/gutenberg/pull/38701))
+-   Fix global styles loading logic. ([38745](https://github.com/WordPress/gutenberg/pull/38745))
 
 #### Components
-- Fix unexpected dragging triggered on spinner buttons on hover in Safari. ([38840](https://github.com/WordPress/gutenberg/pull/38840))
-- Show tooltip on toggle custom size in FontSizePicker. ([38985](https://github.com/WordPress/gutenberg/pull/38985))
+
+-   Fix unexpected dragging triggered on spinner buttons on hover in Safari. ([38840](https://github.com/WordPress/gutenberg/pull/38840))
+-   Show tooltip on toggle custom size in FontSizePicker. ([38985](https://github.com/WordPress/gutenberg/pull/38985))
 
 #### List View
-- Fix error triggering after duplicating a block making it unselectable. ([38760](https://github.com/WordPress/gutenberg/pull/38760))
-- Fix UI broken due to error when deleting first item in canvas. ([38775](https://github.com/WordPress/gutenberg/pull/38775))
+
+-   Fix error triggering after duplicating a block making it unselectable. ([38760](https://github.com/WordPress/gutenberg/pull/38760))
+-   Fix UI broken due to error when deleting first item in canvas. ([38775](https://github.com/WordPress/gutenberg/pull/38775))
 
 #### CSS & Styling
-- Fix button width on Widgets Editor. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
-- Load block support styles in the `<head>` for block themes. ([38750](https://github.com/WordPress/gutenberg/pull/38750))
-- Change location of block support styles in `<head>`. ([39164](https://github.com/WordPress/gutenberg/pull/39164))
-- Reduce the margin of the block toolbar. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
+
+-   Fix button width on Widgets Editor. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
+-   Load block support styles in the `<head>` for block themes. ([38750](https://github.com/WordPress/gutenberg/pull/38750))
+-   Change location of block support styles in `<head>`. ([39164](https://github.com/WordPress/gutenberg/pull/39164))
+-   Reduce the margin of the block toolbar. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
 
 #### Block Directory
-- Fix the block activation when metadata registered on server. ([38697](https://github.com/WordPress/gutenberg/pull/38697))
+
+-   Fix the block activation when metadata registered on server. ([38697](https://github.com/WordPress/gutenberg/pull/38697))
 
 #### Colors
-- Strip double # char on HexInput. ([38335](https://github.com/WordPress/gutenberg/pull/38335))
+
+-   Strip double # char on HexInput. ([38335](https://github.com/WordPress/gutenberg/pull/38335))
 
 #### Packages
-- Core Data: CanUser resolver always use the OPTIONS method. ([38901](https://github.com/WordPress/gutenberg/pull/38901))
-- Dom: Avoid RangeError in findPrevious method. ([38961](https://github.com/WordPress/gutenberg/pull/38961))
+
+-   Core Data: CanUser resolver always use the OPTIONS method. ([38901](https://github.com/WordPress/gutenberg/pull/38901))
+-   Dom: Avoid RangeError in findPrevious method. ([38961](https://github.com/WordPress/gutenberg/pull/38961))
 
 #### Apps
-- Fix Custom Palette colors and support multiple origins and theme cache issues. ([38417](https://github.com/WordPress/gutenberg/pull/38417))
+
+-   Fix Custom Palette colors and support multiple origins and theme cache issues. ([38417](https://github.com/WordPress/gutenberg/pull/38417))
 
 ### Accessibility
-- Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
-- Avoid duplicate labels for "Save Draft" and "Save as pending" buttons. ([38776](https://github.com/WordPress/gutenberg/pull/38776))
-- RichText: Reverse disableLineBreaks to determine aria-multiline state. ([38652](https://github.com/WordPress/gutenberg/pull/38652))
-- TreeGrid: Add Home/End keys to jump to start/end of grid. ([38679](https://github.com/WordPress/gutenberg/pull/38679))
+
+-   Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
+-   Avoid duplicate labels for "Save Draft" and "Save as pending" buttons. ([38776](https://github.com/WordPress/gutenberg/pull/38776))
+-   RichText: Reverse disableLineBreaks to determine aria-multiline state. ([38652](https://github.com/WordPress/gutenberg/pull/38652))
+-   TreeGrid: Add Home/End keys to jump to start/end of grid. ([38679](https://github.com/WordPress/gutenberg/pull/38679))
 
 ### Performance
 
 #### CSS & Styling
-- Use `wp_unique_id()` instead of `uniqid()` to generate CSS class names. ([38891](https://github.com/WordPress/gutenberg/pull/38891))
+
+-   Use `wp_unique_id()` instead of `uniqid()` to generate CSS class names. ([38891](https://github.com/WordPress/gutenberg/pull/38891))
 
 ### Experiments
 
 #### New APIs in Core Data
-- Propose useEntityRecords (experimental). ([38782](https://github.com/WordPress/gutenberg/pull/38782))
-- UseEntityRecord (experimental). ([38522](https://github.com/WordPress/gutenberg/pull/38522))
+
+-   Propose useEntityRecords (experimental). ([38782](https://github.com/WordPress/gutenberg/pull/38782))
+-   UseEntityRecord (experimental). ([38522](https://github.com/WordPress/gutenberg/pull/38522))
 
 ### Documentation
 
 #### Handbook
-- Add documentation for deprecating styles. ([38540](https://github.com/WordPress/gutenberg/pull/38540))
-- Add documentation about the `patterns` field of `theme.json`. ([38700](https://github.com/WordPress/gutenberg/pull/38700))
-- Add more info about contextual patterns and pattern transformations. ([38809](https://github.com/WordPress/gutenberg/pull/38809))
-- Add semantic patterns documentation. ([38778](https://github.com/WordPress/gutenberg/pull/38778))
-- Clarify deprecations documentation. ([38683](https://github.com/WordPress/gutenberg/pull/38683))
-- Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
-- Improve point release documentation to include even more detail. ([38631](https://github.com/WordPress/gutenberg/pull/38631))
-- Increase support for `experimental-link-color` until WordPress 5.9 is the minimum version. ([38711](https://github.com/WordPress/gutenberg/pull/38711))
-- Group: Update block supports. ([38962](https://github.com/WordPress/gutenberg/pull/38962))
-- Links changed for Developer.wordpress.org on block editor section. ([38841](https://github.com/WordPress/gutenberg/pull/38841))
-- Removing comma so that the code snippet of `theme.json` represents standard JSON. ([38938](https://github.com/WordPress/gutenberg/pull/38938))
-- `theme.json` Update version section docs to v2 ([38937](https://github.com/WordPress/gutenberg/pull/38937))
-- Update Getting Started with more granular options. ([38682](https://github.com/WordPress/gutenberg/pull/38682))
+
+-   Add documentation for deprecating styles. ([38540](https://github.com/WordPress/gutenberg/pull/38540))
+-   Add documentation about the `patterns` field of `theme.json`. ([38700](https://github.com/WordPress/gutenberg/pull/38700))
+-   Add more info about contextual patterns and pattern transformations. ([38809](https://github.com/WordPress/gutenberg/pull/38809))
+-   Add semantic patterns documentation. ([38778](https://github.com/WordPress/gutenberg/pull/38778))
+-   Clarify deprecations documentation. ([38683](https://github.com/WordPress/gutenberg/pull/38683))
+-   Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
+-   Improve point release documentation to include even more detail. ([38631](https://github.com/WordPress/gutenberg/pull/38631))
+-   Increase support for `experimental-link-color` until WordPress 5.9 is the minimum version. ([38711](https://github.com/WordPress/gutenberg/pull/38711))
+-   Group: Update block supports. ([38962](https://github.com/WordPress/gutenberg/pull/38962))
+-   Links changed for Developer.wordpress.org on block editor section. ([38841](https://github.com/WordPress/gutenberg/pull/38841))
+-   Removing comma so that the code snippet of `theme.json` represents standard JSON. ([38938](https://github.com/WordPress/gutenberg/pull/38938))
+-   `theme.json` Update version section docs to v2 ([38937](https://github.com/WordPress/gutenberg/pull/38937))
+-   Update Getting Started with more granular options. ([38682](https://github.com/WordPress/gutenberg/pull/38682))
 
 #### Block Library
-- Add instructions on how to add new core blocks to block-library. ([38868](https://github.com/WordPress/gutenberg/pull/38868))
+
+-   Add instructions on how to add new core blocks to block-library. ([38868](https://github.com/WordPress/gutenberg/pull/38868))
 
 #### Components
-- FormFileUpload: Add Storybook stories. ([38734](https://github.com/WordPress/gutenberg/pull/38734))
-- Storybook: Move experimental components to correct section. ([38640](https://github.com/WordPress/gutenberg/pull/38640))
-- Storybook: Remove story for Typography Panel. ([38867](https://github.com/WordPress/gutenberg/pull/38867))
-- wp-env: Document some caveats when using xdebug with VSCode. ([38882](https://github.com/WordPress/gutenberg/pull/38882))
 
+-   FormFileUpload: Add Storybook stories. ([38734](https://github.com/WordPress/gutenberg/pull/38734))
+-   Storybook: Move experimental components to correct section. ([38640](https://github.com/WordPress/gutenberg/pull/38640))
+-   Storybook: Remove story for Typography Panel. ([38867](https://github.com/WordPress/gutenberg/pull/38867))
+-   wp-env: Document some caveats when using xdebug with VSCode. ([38882](https://github.com/WordPress/gutenberg/pull/38882))
 
 ### Code Quality
 
 #### Block Library
-- Cover: Remove unnecessary `temporaryMinHeight`. ([38887](https://github.com/WordPress/gutenberg/pull/38887))
-- Cover block: Update deprecated gradient fixture. ([38728](https://github.com/WordPress/gutenberg/pull/38728))
-- Gallery: Register gallery in block_names dynamic block array. ([38689](https://github.com/WordPress/gutenberg/pull/38689))
-- Navigation: Improve consistency of block hook. ([38705](https://github.com/WordPress/gutenberg/pull/38705))
-- Navigation: Select dropdown encapsulation and further consolidation. ([38627](https://github.com/WordPress/gutenberg/pull/38627))
-- Navigation: Update wp_kses usage to be consistent (use wp_kses_post). ([38732](https://github.com/WordPress/gutenberg/pull/38732))
-- Post Navigation Link: Prefer kses to blanket esc_html on label. ([38696](https://github.com/WordPress/gutenberg/pull/38696))
-- Remove data-controls mock from Image block RN tests. ([38852](https://github.com/WordPress/gutenberg/pull/38852))
+
+-   Cover: Remove unnecessary `temporaryMinHeight`. ([38887](https://github.com/WordPress/gutenberg/pull/38887))
+-   Cover block: Update deprecated gradient fixture. ([38728](https://github.com/WordPress/gutenberg/pull/38728))
+-   Gallery: Register gallery in block_names dynamic block array. ([38689](https://github.com/WordPress/gutenberg/pull/38689))
+-   Navigation: Improve consistency of block hook. ([38705](https://github.com/WordPress/gutenberg/pull/38705))
+-   Navigation: Select dropdown encapsulation and further consolidation. ([38627](https://github.com/WordPress/gutenberg/pull/38627))
+-   Navigation: Update wp_kses usage to be consistent (use wp_kses_post). ([38732](https://github.com/WordPress/gutenberg/pull/38732))
+-   Post Navigation Link: Prefer kses to blanket esc_html on label. ([38696](https://github.com/WordPress/gutenberg/pull/38696))
+-   Remove data-controls mock from Image block RN tests. ([38852](https://github.com/WordPress/gutenberg/pull/38852))
 
 #### Components
-- Block Supports: Improve image block regex. ([38742](https://github.com/WordPress/gutenberg/pull/38742))
-- Block Supports: Load Styles on `<head>` backport to core. ([38880](https://github.com/WordPress/gutenberg/pull/38880))
-- Context: Omit `as` prop in types. ([38844](https://github.com/WordPress/gutenberg/pull/38844))
-- Core Data: Remove fallback for OPTIONS response headers in canUser resolver. ([38881](https://github.com/WordPress/gutenberg/pull/38881))
-- Core Data: TypeScript definitions for entity records. ([38666](https://github.com/WordPress/gutenberg/pull/38666))
-- Data: Normalize selector args when handling metadata selectors/actions. ([38945](https://github.com/WordPress/gutenberg/pull/38945))
-- Edit Site: Migrate store to thunks. ([38812](https://github.com/WordPress/gutenberg/pull/38812))
-- Icons: Deprecate duplicate icons. ([38849](https://github.com/WordPress/gutenberg/pull/38849))
-- PostTrash: Call trashPost action with no arguments, rewrite to hooks. ([38615](https://github.com/WordPress/gutenberg/pull/38615))
+
+-   Block Supports: Improve image block regex. ([38742](https://github.com/WordPress/gutenberg/pull/38742))
+-   Block Supports: Load Styles on `<head>` backport to core. ([38880](https://github.com/WordPress/gutenberg/pull/38880))
+-   Context: Omit `as` prop in types. ([38844](https://github.com/WordPress/gutenberg/pull/38844))
+-   Core Data: Remove fallback for OPTIONS response headers in canUser resolver. ([38881](https://github.com/WordPress/gutenberg/pull/38881))
+-   Core Data: TypeScript definitions for entity records. ([38666](https://github.com/WordPress/gutenberg/pull/38666))
+-   Data: Normalize selector args when handling metadata selectors/actions. ([38945](https://github.com/WordPress/gutenberg/pull/38945))
+-   Edit Site: Migrate store to thunks. ([38812](https://github.com/WordPress/gutenberg/pull/38812))
+-   Icons: Deprecate duplicate icons. ([38849](https://github.com/WordPress/gutenberg/pull/38849))
+-   PostTrash: Call trashPost action with no arguments, rewrite to hooks. ([38615](https://github.com/WordPress/gutenberg/pull/38615))
 
 #### npm Packages
-- Packages: Automate cherry-picking to `trunk` commits created during publishing. ([38977](https://github.com/WordPress/gutenberg/pull/38977))
-- Packages: Ensure that private packages do not update when publishing to npm. ([38946](https://github.com/WordPress/gutenberg/pull/38946))
 
+-   Packages: Automate cherry-picking to `trunk` commits created during publishing. ([38977](https://github.com/WordPress/gutenberg/pull/38977))
+-   Packages: Ensure that private packages do not update when publishing to npm. ([38946](https://github.com/WordPress/gutenberg/pull/38946))
 
 ### Tools
 
 #### Testing
-- Add end-to-end test for merging paragraphs and soft line break afterwards. ([39009](https://github.com/WordPress/gutenberg/pull/39009))
-- Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. ([38717](https://github.com/WordPress/gutenberg/pull/38717))
-- Replace no-shadow eslint rule with @typescript-eslint/no-shadow. ([38665](https://github.com/WordPress/gutenberg/pull/38665))
-- Remove client ID from fixtures. ([38685](https://github.com/WordPress/gutenberg/pull/38685))
-- Remove `originalContent` from fixtures. ([38638](https://github.com/WordPress/gutenberg/pull/38638))
-- RichText: Add test for merging and then splitting paragraphs. ([39007](https://github.com/WordPress/gutenberg/pull/39007))
-- Site Editor Tests: Use REST API to delete templates and template parts. ([38524](https://github.com/WordPress/gutenberg/pull/38524))
-- TreeGrid: Add tests for callback functions. ([38942](https://github.com/WordPress/gutenberg/pull/38942))
+
+-   Add end-to-end test for merging paragraphs and soft line break afterwards. ([39009](https://github.com/WordPress/gutenberg/pull/39009))
+-   Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. ([38717](https://github.com/WordPress/gutenberg/pull/38717))
+-   Replace no-shadow eslint rule with @typescript-eslint/no-shadow. ([38665](https://github.com/WordPress/gutenberg/pull/38665))
+-   Remove client ID from fixtures. ([38685](https://github.com/WordPress/gutenberg/pull/38685))
+-   Remove `originalContent` from fixtures. ([38638](https://github.com/WordPress/gutenberg/pull/38638))
+-   RichText: Add test for merging and then splitting paragraphs. ([39007](https://github.com/WordPress/gutenberg/pull/39007))
+-   Site Editor Tests: Use REST API to delete templates and template parts. ([38524](https://github.com/WordPress/gutenberg/pull/38524))
+-   TreeGrid: Add tests for callback functions. ([38942](https://github.com/WordPress/gutenberg/pull/38942))
 
 #### Build Tooling
-- Build separate full contributors list. ([38777](https://github.com/WordPress/gutenberg/pull/38777))
-- Bump @svgr/webpack from ^5.5.0 to ^6.2.1 ([38866](https://github.com/WordPress/gutenberg/pull/38866))
-- Generate full release contributors list in release changelog. ([38704](https://github.com/WordPress/gutenberg/pull/38704))
-- Generate sourcemap for production plugin builds. ([33718](https://github.com/WordPress/gutenberg/pull/33718))
-- Mobile: Improve npm clean scripts for react-native-editor. ([38752](https://github.com/WordPress/gutenberg/pull/38752))
-- PWA: Fix URL query param issue. ([38755](https://github.com/WordPress/gutenberg/pull/38755))
-- Scripts: Do not exit `build` when no entry found in `src` directory. ([38737](https://github.com/WordPress/gutenberg/pull/38737))
-- Scripts: Fix Entry points are not detected in Windows OS. ([38781](https://github.com/WordPress/gutenberg/pull/38781))
-- Scripts: Copy PHP files from `src` into `build`. ([38715](https://github.com/WordPress/gutenberg/pull/38715))
-
-#### Components
-- BaseControl: Refactor stories to use Controls. ([38741](https://github.com/WordPress/gutenberg/pull/38741))
-- Migrate Post Template Delete button from `confirm()` to `ConfirmDialog`. ([37535](https://github.com/WordPress/gutenberg/pull/37535))
-- Migrate the Post 'Switch to draft' button to `ConfirmDialog` component. ([37491](https://github.com/WordPress/gutenberg/pull/37491))
-- Storybook: Ensure rerender for RTL switcher. ([38963](https://github.com/WordPress/gutenberg/pull/38963))
+
+-   Build separate full contributors list. ([38777](https://github.com/WordPress/gutenberg/pull/38777))
+-   Bump @svgr/webpack from ^5.5.0 to ^6.2.1 ([38866](https://github.com/WordPress/gutenberg/pull/38866))
+-   Generate full release contributors list in release changelog. ([38704](https://github.com/WordPress/gutenberg/pull/38704))
+-   Generate sourcemap for production plugin builds. ([33718](https://github.com/WordPress/gutenberg/pull/33718))
+-   Mobile: Improve npm clean scripts for react-native-editor. ([38752](https://github.com/WordPress/gutenberg/pull/38752))
+-   PWA: Fix URL query param issue. ([38755](https://github.com/WordPress/gutenberg/pull/38755))
+-   Scripts: Do not exit `build` when no entry found in `src` directory. ([38737](https://github.com/WordPress/gutenberg/pull/38737))
+-   Scripts: Fix Entry points are not detected in Windows OS. ([38781](https://github.com/WordPress/gutenberg/pull/38781))
+-   Scripts: Copy PHP files from `src` into `build`. ([38715](https://github.com/WordPress/gutenberg/pull/38715))
+
+#### Components
+
+-   BaseControl: Refactor stories to use Controls. ([38741](https://github.com/WordPress/gutenberg/pull/38741))
+-   Migrate Post Template Delete button from `confirm()` to `ConfirmDialog`. ([37535](https://github.com/WordPress/gutenberg/pull/37535))
+-   Migrate the Post 'Switch to draft' button to `ConfirmDialog` component. ([37491](https://github.com/WordPress/gutenberg/pull/37491))
+-   Storybook: Ensure rerender for RTL switcher. ([38963](https://github.com/WordPress/gutenberg/pull/38963))
 
 #### Post Editor
-- Edit Post: Migrate store actions to thunks. ([36551](https://github.com/WordPress/gutenberg/pull/36551))
-- Editor store: Remove a noop SETUP_EDITOR action. ([38622](https://github.com/WordPress/gutenberg/pull/38622))
-- Migrate editor store to thunks. ([35929](https://github.com/WordPress/gutenberg/pull/35929))
+
+-   Edit Post: Migrate store actions to thunks. ([36551](https://github.com/WordPress/gutenberg/pull/36551))
+-   Editor store: Remove a noop SETUP_EDITOR action. ([38622](https://github.com/WordPress/gutenberg/pull/38622))
+-   Migrate editor store to thunks. ([35929](https://github.com/WordPress/gutenberg/pull/35929))
 
 #### Styles
-- Allow to extend the `WP_Theme_JSON_Gutenberg` class. ([38671](https://github.com/WordPress/gutenberg/pull/38671))
-- Global Styles: Fix PHP warning in WP_REST_Global_Styles_Controller. ([38888](https://github.com/WordPress/gutenberg/pull/38888))
-- Update Global Styles code to continue adding settings & styles. ([38883](https://github.com/WordPress/gutenberg/pull/38883))
+
+-   Allow to extend the `WP_Theme_JSON_Gutenberg` class. ([38671](https://github.com/WordPress/gutenberg/pull/38671))
+-   Global Styles: Fix PHP warning in WP_REST_Global_Styles_Controller. ([38888](https://github.com/WordPress/gutenberg/pull/38888))
+-   Update Global Styles code to continue adding settings & styles. ([38883](https://github.com/WordPress/gutenberg/pull/38883))
 
 #### Block Library
-- Change Gallery block code ownership. ([38722](https://github.com/WordPress/gutenberg/pull/38722))
 
-## First time contributors
+-   Change Gallery block code ownership. ([38722](https://github.com/WordPress/gutenberg/pull/38722))
 
-The following PRs were merged by first time contrbutors:
+## First-time contributors
 
-- @Alex-Kostov: Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
-- @HasnainAshfaq: Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
-- @mjstoney: (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
-- @razwan: Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
-- @sanzeeb3: Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
-- @Sisanu: Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
+The following PRs were merged by first-time contributors:
 
+-   @Alex-Kostov: Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
+-   @HasnainAshfaq: Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
+-   @mjstoney: (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
+-   @razwan: Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
+-   @sanzeeb3: Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
+-   @Sisanu: Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
 
 ## Contributors
 
@@ -7154,284 +31350,315 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @ajlende @Alex-Kostov @alexstine @andrewserong @annezazu @audrasjb @bph @c4rl0sbr4v0 @chad1008 @ciampo @DAreRodz @delowardev @dmsnell @ellatrix @fluiddot @geriux @getdave @glendaviesnz @gziolo @HasnainAshfaq @jasmussen @jeherve @jorgefilipecosta @jsnajdr @KevinBatdorf @MaggieCabrera @Mamaduka @mchowning @michalczaplinski @mirka @mjstoney @mkevins @ndiego @noahtallen @ntsekouras @oandregal @ocean90 @PatelUtkarsh @ramonjd @razwan @ryanwelcher @sanzeeb3 @Sisanu @stokesman @t-hamano @talldan @twstokes @webmandesign @westonruter @youknowriad
 
-
 = 12.6.1 =
 
+## Changelog
+
 ### Bug Fixes
 
 **Block Editor**
-- Fix an issue where content copied from certain editors (like MS Word) would paste as an image rather than the actual content. ([38992](https://github.com/WordPress/gutenberg/pull/38992))
 
+-   Fix an issue where content copied from certain editors (like MS Word) would paste as an image rather than the actual content. ([38992](https://github.com/WordPress/gutenberg/pull/38992))
 
 = 12.7.0-rc.1 =
 
-
-
 ## Changelog
 
 ### Enhancements
 
-- Remove data-align divs for themes that support layout. ([38613](https://github.com/WordPress/gutenberg/pull/38613))
-- Scripts: Copy PHP files from `src` into `build`. ([38715](https://github.com/WordPress/gutenberg/pull/38715))
-- Update template part creation and replacement flows. ([38814](https://github.com/WordPress/gutenberg/pull/38814))
-- Update: Keep additional classes during a block transform. ([38964](https://github.com/WordPress/gutenberg/pull/38964))
+-   Remove data-align divs for themes that support layout. ([38613](https://github.com/WordPress/gutenberg/pull/38613))
+-   Scripts: Copy PHP files from `src` into `build`. ([38715](https://github.com/WordPress/gutenberg/pull/38715))
+-   Update template part creation and replacement flows. ([38814](https://github.com/WordPress/gutenberg/pull/38814))
+-   Update: Keep additional classes during a block transform. ([38964](https://github.com/WordPress/gutenberg/pull/38964))
 
 #### Block Library
-- Add margin support (top/bottom) to group blocks. ([37344](https://github.com/WordPress/gutenberg/pull/37344))
-- Add revert button to submenu block. ([38203](https://github.com/WordPress/gutenberg/pull/38203))
-- Block Editor: Add settings to enable/disable auto anchor generation. ([38780](https://github.com/WordPress/gutenberg/pull/38780))
-- Navigation: Try unifying submenu arrow positioning. ([37003](https://github.com/WordPress/gutenberg/pull/37003))
-- Page List: Simplify loading state. ([38983](https://github.com/WordPress/gutenberg/pull/38983))
-- [Comments Query Loop] Show placeholder comments on site editor. ([38072](https://github.com/WordPress/gutenberg/pull/38072))
+
+-   Add margin support (top/bottom) to group blocks. ([37344](https://github.com/WordPress/gutenberg/pull/37344))
+-   Add revert button to submenu block. ([38203](https://github.com/WordPress/gutenberg/pull/38203))
+-   Block Editor: Add settings to enable/disable auto anchor generation. ([38780](https://github.com/WordPress/gutenberg/pull/38780))
+-   Navigation: Try unifying submenu arrow positioning. ([37003](https://github.com/WordPress/gutenberg/pull/37003))
+-   Page List: Simplify loading state. ([38983](https://github.com/WordPress/gutenberg/pull/38983))
+-   [Comments Query Loop] Show placeholder comments on site editor. ([38072](https://github.com/WordPress/gutenberg/pull/38072))
 
 #### Components
-- Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
-- LineHeightControl: Migrate internals to `NumberControl` (Part 1: Styles). ([37160](https://github.com/WordPress/gutenberg/pull/37160))
-- Use `forwardedRef` type for all forwarded refs. ([38948](https://github.com/WordPress/gutenberg/pull/38948))
-- `Navigator`: Add `NavigatorButton` and `NavigatorBackButton` components. ([38634](https://github.com/WordPress/gutenberg/pull/38634))
+
+-   Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
+-   LineHeightControl: Migrate internals to `NumberControl` (Part 1: Styles). ([37160](https://github.com/WordPress/gutenberg/pull/37160))
+-   Use `forwardedRef` type for all forwarded refs. ([38948](https://github.com/WordPress/gutenberg/pull/38948))
+-   `Navigator`: Add `NavigatorButton` and `NavigatorBackButton` components. ([38634](https://github.com/WordPress/gutenberg/pull/38634))
 
 #### Block Editor
-- List View: Add multi-select behaviour for blocks when shift key is selected. ([38314](https://github.com/WordPress/gutenberg/pull/38314))
-- Update: Prioritize patterns on quick inserter. ([38709](https://github.com/WordPress/gutenberg/pull/38709))
+
+-   List View: Add multi-select behaviour for blocks when shift key is selected. ([38314](https://github.com/WordPress/gutenberg/pull/38314))
+-   Update: Prioritize patterns on quick inserter. ([38709](https://github.com/WordPress/gutenberg/pull/38709))
 
 #### Accessibility
-- RichText: Reverse disableLineBreaks to determine aria-multiline state. ([38652](https://github.com/WordPress/gutenberg/pull/38652))
-- TreeGrid: Add Home/End keys to jump to start/end of grid. ([38679](https://github.com/WordPress/gutenberg/pull/38679))
+
+-   RichText: Reverse disableLineBreaks to determine aria-multiline state. ([38652](https://github.com/WordPress/gutenberg/pull/38652))
+-   TreeGrid: Add Home/End keys to jump to start/end of grid. ([38679](https://github.com/WordPress/gutenberg/pull/38679))
 
 #### Global Styles
-- Style engine: Refine `Box` type. ([38894](https://github.com/WordPress/gutenberg/pull/38894))
+
+-   Style engine: Refine `Box` type. ([38894](https://github.com/WordPress/gutenberg/pull/38894))
 
 #### Post Editor
-- Enable tooltip for the main dashboard button. ([38790](https://github.com/WordPress/gutenberg/pull/38790))
+
+-   Enable tooltip for the main dashboard button. ([38790](https://github.com/WordPress/gutenberg/pull/38790))
 
 #### Themes
-- Remove the div wrapper from the aligned image blocks. ([38657](https://github.com/WordPress/gutenberg/pull/38657))
+
+-   Remove the div wrapper from the aligned image blocks. ([38657](https://github.com/WordPress/gutenberg/pull/38657))
 
 #### Patterns
-- [Pattern Directory]: Allow pattern registration from directory with theme.json. ([38323](https://github.com/WordPress/gutenberg/pull/38323))
+
+-   [Pattern Directory]: Allow pattern registration from directory with theme.json. ([38323](https://github.com/WordPress/gutenberg/pull/38323))
 
 #### REST API
-- Comment Template: Optimize comment pagination with nested replies. ([38187](https://github.com/WordPress/gutenberg/pull/38187))
+
+-   Comment Template: Optimize comment pagination with nested replies. ([38187](https://github.com/WordPress/gutenberg/pull/38187))
 
 #### List View
-- Try/expand block list tree on selection. ([35817](https://github.com/WordPress/gutenberg/pull/35817))
+
+-   Try/expand block list tree on selection. ([35817](https://github.com/WordPress/gutenberg/pull/35817))
 
 #### Build Tooling
-- Generate sourcemap for production plugin builds. ([33718](https://github.com/WordPress/gutenberg/pull/33718))
+
+-   Generate sourcemap for production plugin builds. ([33718](https://github.com/WordPress/gutenberg/pull/33718))
 
 #### Design Tools
-- Columns: Add border support. ([31737](https://github.com/WordPress/gutenberg/pull/31737))
 
+-   Columns: Add border support. ([31737](https://github.com/WordPress/gutenberg/pull/31737))
 
 ### New APIs
 
-- Propose useEntityRecords (experimental). ([38782](https://github.com/WordPress/gutenberg/pull/38782))
-- UseEntityRecord (experimental). ([38522](https://github.com/WordPress/gutenberg/pull/38522))
-
+-   Propose useEntityRecords (experimental). ([38782](https://github.com/WordPress/gutenberg/pull/38782))
+-   UseEntityRecord (experimental). ([38522](https://github.com/WordPress/gutenberg/pull/38522))
 
 ### Bug Fixes
 
-- Block Editor: Fix Redux error. ([38886](https://github.com/WordPress/gutenberg/pull/38886))
-- Core Data: CanUser resolver always use the OPTIONS method. ([38901](https://github.com/WordPress/gutenberg/pull/38901))
-- Dom: Avoid RangeError in findPrevious method. ([38961](https://github.com/WordPress/gutenberg/pull/38961))
-- Edit Site: Add template check to 'setPage' action. ([38656](https://github.com/WordPress/gutenberg/pull/38656))
-- Rehabilitate drag gesture in `LineHeightControl`. ([38930](https://github.com/WordPress/gutenberg/pull/38930))
-- Scripts: Do not exit `build` when no entry found in `src` directory. ([38737](https://github.com/WordPress/gutenberg/pull/38737))
-- Scripts: Fix Entry points are not detected in Windows OS. ([38781](https://github.com/WordPress/gutenberg/pull/38781))
-- admin-manifest: Fix URL query param issue. ([38755](https://github.com/WordPress/gutenberg/pull/38755))
+-   Block Editor: Fix Redux error. ([38886](https://github.com/WordPress/gutenberg/pull/38886))
+-   Core Data: CanUser resolver always use the OPTIONS method. ([38901](https://github.com/WordPress/gutenberg/pull/38901))
+-   Dom: Avoid RangeError in findPrevious method. ([38961](https://github.com/WordPress/gutenberg/pull/38961))
+-   Edit Site: Add template check to 'setPage' action. ([38656](https://github.com/WordPress/gutenberg/pull/38656))
+-   Rehabilitate drag gesture in `LineHeightControl`. ([38930](https://github.com/WordPress/gutenberg/pull/38930))
+-   Scripts: Do not exit `build` when no entry found in `src` directory. ([38737](https://github.com/WordPress/gutenberg/pull/38737))
+-   Scripts: Fix Entry points are not detected in Windows OS. ([38781](https://github.com/WordPress/gutenberg/pull/38781))
+-   admin-manifest: Fix URL query param issue. ([38755](https://github.com/WordPress/gutenberg/pull/38755))
 
 #### Block Library
-- Avoid division by zero in site logo block. ([38808](https://github.com/WordPress/gutenberg/pull/38808))
-- Fixes #38764 by setting transparent bg color on gradient overlay. ([38765](https://github.com/WordPress/gutenberg/pull/38765))
-- Latest Posts: Add missing class to post title. ([38740](https://github.com/WordPress/gutenberg/pull/38740))
-- Only apply the social links block migration if there's a need for a migration. ([38561](https://github.com/WordPress/gutenberg/pull/38561))
-- Post navigation link: Use correct closing tag. ([38976](https://github.com/WordPress/gutenberg/pull/38976))
-- Template Parts: Decode entities in labels. ([38805](https://github.com/WordPress/gutenberg/pull/38805))
-- [Query Loop]: Display nothing if we want only sticky posts but no stickies exist. ([38909](https://github.com/WordPress/gutenberg/pull/38909))
+
+-   Avoid division by zero in site logo block. ([38808](https://github.com/WordPress/gutenberg/pull/38808))
+-   Fixes #38764 by setting transparent bg color on gradient overlay. ([38765](https://github.com/WordPress/gutenberg/pull/38765))
+-   Latest Posts: Add missing class to post title. ([38740](https://github.com/WordPress/gutenberg/pull/38740))
+-   Only apply the social links block migration if there's a need for a migration. ([38561](https://github.com/WordPress/gutenberg/pull/38561))
+-   Post navigation link: Use correct closing tag. ([38976](https://github.com/WordPress/gutenberg/pull/38976))
+-   Template Parts: Decode entities in labels. ([38805](https://github.com/WordPress/gutenberg/pull/38805))
+-   [Query Loop]: Display nothing if we want only sticky posts but no stickies exist. ([38909](https://github.com/WordPress/gutenberg/pull/38909))
 
 #### Block Editor
-- Multi-selection: Avoid rich text contentEditable toggling. ([38821](https://github.com/WordPress/gutenberg/pull/38821))
-- [Inserter]: Fix focus loss after closing patterns explorer from modal. ([38884](https://github.com/WordPress/gutenberg/pull/38884))
-- [RichText]: Fix wrong block merging when pressing  `delete` consecutively. ([38991](https://github.com/WordPress/gutenberg/pull/38991))
+
+-   Multi-selection: Avoid rich text contentEditable toggling. ([38821](https://github.com/WordPress/gutenberg/pull/38821))
+-   [Inserter]: Fix focus loss after closing patterns explorer from modal. ([38884](https://github.com/WordPress/gutenberg/pull/38884))
+-   [RichText]: Fix wrong block merging when pressing `delete` consecutively. ([38991](https://github.com/WordPress/gutenberg/pull/38991))
 
 #### Site Editor
-- Add site editor initial redirect error handling. ([38655](https://github.com/WordPress/gutenberg/pull/38655))
-- Limit template part slugs to Latin chars. ([38695](https://github.com/WordPress/gutenberg/pull/38695))
-- Template List: Decode entities in record titles. ([38863](https://github.com/WordPress/gutenberg/pull/38863))
+
+-   Add site editor initial redirect error handling. ([38655](https://github.com/WordPress/gutenberg/pull/38655))
+-   Limit template part slugs to Latin chars. ([38695](https://github.com/WordPress/gutenberg/pull/38695))
+-   Template List: Decode entities in record titles. ([38863](https://github.com/WordPress/gutenberg/pull/38863))
 
 #### Global Styles
--  Fix for classic themes using default presets. ([38701](https://github.com/WordPress/gutenberg/pull/38701))
-- Fix for late static binding in the resolver. ([38857](https://github.com/WordPress/gutenberg/pull/38857))
-- Fix global styles loading logic. ([38745](https://github.com/WordPress/gutenberg/pull/38745))
+
+-   Fix for classic themes using default presets. ([38701](https://github.com/WordPress/gutenberg/pull/38701))
+-   Fix for late static binding in the resolver. ([38857](https://github.com/WordPress/gutenberg/pull/38857))
+-   Fix global styles loading logic. ([38745](https://github.com/WordPress/gutenberg/pull/38745))
 
 #### Components
-- Fix spin buttons of number inputs in Safari. ([38840](https://github.com/WordPress/gutenberg/pull/38840))
-- [Components]: Show tooltip on toggle custom size in FontSizePicker. ([38985](https://github.com/WordPress/gutenberg/pull/38985))
+
+-   Fix spin buttons of number inputs in Safari. ([38840](https://github.com/WordPress/gutenberg/pull/38840))
+-   [Components]: Show tooltip on toggle custom size in FontSizePicker. ([38985](https://github.com/WordPress/gutenberg/pull/38985))
 
 #### List View
-- Fix list view error when deleting first item in canvas. ([38775](https://github.com/WordPress/gutenberg/pull/38775))
-- Fix: Select block after duplicate. ([38760](https://github.com/WordPress/gutenberg/pull/38760))
+
+-   Fix list view error when deleting first item in canvas. ([38775](https://github.com/WordPress/gutenberg/pull/38775))
+-   Fix: Select block after duplicate. ([38760](https://github.com/WordPress/gutenberg/pull/38760))
 
 #### CSS & Styling
-- Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
-- Load block support styles in the head for block themes. ([38750](https://github.com/WordPress/gutenberg/pull/38750))
+
+-   Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
+-   Load block support styles in the head for block themes. ([38750](https://github.com/WordPress/gutenberg/pull/38750))
 
 #### Widgets Editor
-- (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
+
+-   (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
 
 #### Accessibility
-- Avoid duplicate labels for "Save Draft" and "Save as pending" buttons. ([38776](https://github.com/WordPress/gutenberg/pull/38776))
+
+-   Avoid duplicate labels for "Save Draft" and "Save as pending" buttons. ([38776](https://github.com/WordPress/gutenberg/pull/38776))
 
 #### Testing
-- Fix file block full content fixture. ([38725](https://github.com/WordPress/gutenberg/pull/38725))
+
+-   Fix file block full content fixture. ([38725](https://github.com/WordPress/gutenberg/pull/38725))
 
 #### Block Directory
-- Fix the block activation when metadata registered on server. ([38697](https://github.com/WordPress/gutenberg/pull/38697))
+
+-   Fix the block activation when metadata registered on server. ([38697](https://github.com/WordPress/gutenberg/pull/38697))
 
 #### Colors
-- Strip double # char on HexInput. ([38335](https://github.com/WordPress/gutenberg/pull/38335))
 
+-   Strip double # char on HexInput. ([38335](https://github.com/WordPress/gutenberg/pull/38335))
 
 ### Performance
 
 #### CSS & Styling
-- Use `wp_unique_id()` instead of `uniqid()` to generate CSS class names. ([38891](https://github.com/WordPress/gutenberg/pull/38891))
 
+-   Use `wp_unique_id()` instead of `uniqid()` to generate CSS class names. ([38891](https://github.com/WordPress/gutenberg/pull/38891))
 
 ### Experiments
 
 #### Global Styles
-- Add initial version of the style engine. ([37978](https://github.com/WordPress/gutenberg/pull/37978))
 
+-   Add initial version of the style engine. ([37978](https://github.com/WordPress/gutenberg/pull/37978))
 
 ### Documentation
 
-- Add documentation about the `patterns` field of `theme.json`. ([38700](https://github.com/WordPress/gutenberg/pull/38700))
-- Add documentation for deprecating styles. ([38540](https://github.com/WordPress/gutenberg/pull/38540))
-- Add more info about contextual patterns and pattern transformations. ([38809](https://github.com/WordPress/gutenberg/pull/38809))
-- Add semantic patterns documentation. ([38778](https://github.com/WordPress/gutenberg/pull/38778))
-- Docs: Add instructions on how to add new core blocks to block-library. ([38868](https://github.com/WordPress/gutenberg/pull/38868))
-- Docs: Update Group block supports. ([38962](https://github.com/WordPress/gutenberg/pull/38962))
-- Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
-- Improve point release documentation to include even more detail. ([38631](https://github.com/WordPress/gutenberg/pull/38631))
-- Increase support for `experimental-link-color` until WordPress 5.9 is the minimum version. ([38711](https://github.com/WordPress/gutenberg/pull/38711))
-- Links changed for Develeoper.wordpress.org. ([38841](https://github.com/WordPress/gutenberg/pull/38841))
-- Removing comma so that the code snippet represents standard JSON. ([38938](https://github.com/WordPress/gutenberg/pull/38938))
-- Try and clarify deprecations documentation. ([38683](https://github.com/WordPress/gutenberg/pull/38683))
-- Update Getting Started with more granular options. ([38682](https://github.com/WordPress/gutenberg/pull/38682))
-- Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
+-   Add documentation about the `patterns` field of `theme.json`. ([38700](https://github.com/WordPress/gutenberg/pull/38700))
+-   Add documentation for deprecating styles. ([38540](https://github.com/WordPress/gutenberg/pull/38540))
+-   Add more info about contextual patterns and pattern transformations. ([38809](https://github.com/WordPress/gutenberg/pull/38809))
+-   Add semantic patterns documentation. ([38778](https://github.com/WordPress/gutenberg/pull/38778))
+-   Docs: Add instructions on how to add new core blocks to block-library. ([38868](https://github.com/WordPress/gutenberg/pull/38868))
+-   Docs: Update Group block supports. ([38962](https://github.com/WordPress/gutenberg/pull/38962))
+-   Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
+-   Improve point release documentation to include even more detail. ([38631](https://github.com/WordPress/gutenberg/pull/38631))
+-   Increase support for `experimental-link-color` until WordPress 5.9 is the minimum version. ([38711](https://github.com/WordPress/gutenberg/pull/38711))
+-   Links changed for Develeoper.wordpress.org. ([38841](https://github.com/WordPress/gutenberg/pull/38841))
+-   Removing comma so that the code snippet represents standard JSON. ([38938](https://github.com/WordPress/gutenberg/pull/38938))
+-   Try and clarify deprecations documentation. ([38683](https://github.com/WordPress/gutenberg/pull/38683))
+-   Update Getting Started with more granular options. ([38682](https://github.com/WordPress/gutenberg/pull/38682))
+-   Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
 
 #### Components
-- FormFileUpload: Add Storybook stories. ([38734](https://github.com/WordPress/gutenberg/pull/38734))
-- Storybook: Move experimental components to correct section. ([38640](https://github.com/WordPress/gutenberg/pull/38640))
 
+-   FormFileUpload: Add Storybook stories. ([38734](https://github.com/WordPress/gutenberg/pull/38734))
+-   Storybook: Move experimental components to correct section. ([38640](https://github.com/WordPress/gutenberg/pull/38640))
 
 ### Code Quality
 
-- Improve image block regex. ([38742](https://github.com/WordPress/gutenberg/pull/38742))
+-   Improve image block regex. ([38742](https://github.com/WordPress/gutenberg/pull/38742))
 
 #### Block Library
-- - Cover]: Remove unnecessary `temporaryMinHeight`. ([38887](https://github.com/WordPress/gutenberg/pull/38887))
-- Cover block: Update deprecated gradient fixture. ([38728](https://github.com/WordPress/gutenberg/pull/38728))
-- Gallery: Register gallery in block_names dynamic block array. ([38689](https://github.com/WordPress/gutenberg/pull/38689))
-- Improve consistency of Navigation block hook. ([38705](https://github.com/WordPress/gutenberg/pull/38705))
-- Nav block menu select dropdown encapsulation and further consolidation. ([38627](https://github.com/WordPress/gutenberg/pull/38627))
-- Prefer kses to blanket esc_html on label. ([38696](https://github.com/WordPress/gutenberg/pull/38696))
-- Update wp_kses usage to be consistent in navigation blocks (use wp_kses_post). ([38732](https://github.com/WordPress/gutenberg/pull/38732))
+
+-   -   Cover]: Remove unnecessary `temporaryMinHeight`. ([38887](https://github.com/WordPress/gutenberg/pull/38887))
+-   Cover block: Update deprecated gradient fixture. ([38728](https://github.com/WordPress/gutenberg/pull/38728))
+-   Gallery: Register gallery in block_names dynamic block array. ([38689](https://github.com/WordPress/gutenberg/pull/38689))
+-   Improve consistency of Navigation block hook. ([38705](https://github.com/WordPress/gutenberg/pull/38705))
+-   Nav block menu select dropdown encapsulation and further consolidation. ([38627](https://github.com/WordPress/gutenberg/pull/38627))
+-   Prefer kses to blanket esc_html on label. ([38696](https://github.com/WordPress/gutenberg/pull/38696))
+-   Update wp_kses usage to be consistent in navigation blocks (use wp_kses_post). ([38732](https://github.com/WordPress/gutenberg/pull/38732))
 
 #### Components
-- Context: Omit `as` prop in types. ([38844](https://github.com/WordPress/gutenberg/pull/38844))
-- Storybook: Remove story for Typography Panel. ([38867](https://github.com/WordPress/gutenberg/pull/38867))
+
+-   Context: Omit `as` prop in types. ([38844](https://github.com/WordPress/gutenberg/pull/38844))
+-   Storybook: Remove story for Typography Panel. ([38867](https://github.com/WordPress/gutenberg/pull/38867))
 
 #### npm Packages
-- Packages: Ensure that private packages do not update when publishing to npm. ([38946](https://github.com/WordPress/gutenberg/pull/38946))
 
+-   Packages: Ensure that private packages do not update when publishing to npm. ([38946](https://github.com/WordPress/gutenberg/pull/38946))
 
 ### Tools
 
-- Scripts: Update to @svgr/webpack v6. ([38866](https://github.com/WordPress/gutenberg/pull/38866))
-- wp-env: Document some caveats when using xdebug with VSCode. ([38882](https://github.com/WordPress/gutenberg/pull/38882))
+-   Scripts: Update to @svgr/webpack v6. ([38866](https://github.com/WordPress/gutenberg/pull/38866))
+-   wp-env: Document some caveats when using xdebug with VSCode. ([38882](https://github.com/WordPress/gutenberg/pull/38882))
 
 #### Testing
-- Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. ([38717](https://github.com/WordPress/gutenberg/pull/38717))
-- Replace no-shadow eslint rule with @typescript-eslint/no-shadow. ([38665](https://github.com/WordPress/gutenberg/pull/38665))
-- RichText: Add test for merging and then splitting paragraphs. ([39007](https://github.com/WordPress/gutenberg/pull/39007))
-- Tests: Use REST API to delete templates and template parts. ([38524](https://github.com/WordPress/gutenberg/pull/38524))
-- [Automated Testing]: Add end-to-end test for merging paragraphs and soft line break afterwards. ([39009](https://github.com/WordPress/gutenberg/pull/39009))
+
+-   Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. ([38717](https://github.com/WordPress/gutenberg/pull/38717))
+-   Replace no-shadow eslint rule with @typescript-eslint/no-shadow. ([38665](https://github.com/WordPress/gutenberg/pull/38665))
+-   RichText: Add test for merging and then splitting paragraphs. ([39007](https://github.com/WordPress/gutenberg/pull/39007))
+-   Tests: Use REST API to delete templates and template parts. ([38524](https://github.com/WordPress/gutenberg/pull/38524))
+-   [Automated Testing]: Add end-to-end test for merging paragraphs and soft line break afterwards. ([39009](https://github.com/WordPress/gutenberg/pull/39009))
 
 #### Build Tooling
-- Build separate full contributors list. ([38777](https://github.com/WordPress/gutenberg/pull/38777))
-- Generate full release contributors list in release changelog. ([38704](https://github.com/WordPress/gutenberg/pull/38704))
+
+-   Build separate full contributors list. ([38777](https://github.com/WordPress/gutenberg/pull/38777))
+-   Generate full release contributors list in release changelog. ([38704](https://github.com/WordPress/gutenberg/pull/38704))
 
 #### Components
-- TreeGrid: Add tests for callback functions. ([38942](https://github.com/WordPress/gutenberg/pull/38942))
 
+-   TreeGrid: Add tests for callback functions. ([38942](https://github.com/WordPress/gutenberg/pull/38942))
 
 ### Various
 
-- Backport from core: Global styles duotone not rendering in post editor. ([38897](https://github.com/WordPress/gutenberg/pull/38897))
-- Block support styles: Port changes from core to Gutenberg. ([38880](https://github.com/WordPress/gutenberg/pull/38880))
-- Data: Enable thunks by default and remove the experimental flag. ([38853](https://github.com/WordPress/gutenberg/pull/38853))
-- Editor: Adds additional check to guard against incompete presets. ([38902](https://github.com/WordPress/gutenberg/pull/38902))
-- Integration tests: Remove client ID from fixtures. ([38685](https://github.com/WordPress/gutenberg/pull/38685))
-- Lowered specificity of alignment rules. ([38947](https://github.com/WordPress/gutenberg/pull/38947))
-- Mobile - Fix Custom Palette colors and support multiple origins and theme cache issues. ([38417](https://github.com/WordPress/gutenberg/pull/38417))
-- Mobile: Improve npm clean scripts for react-native-editor. ([38752](https://github.com/WordPress/gutenberg/pull/38752))
-- PostTrash: Call trashPost action with no arguments, rewrite to hooks. ([38615](https://github.com/WordPress/gutenberg/pull/38615))
-- Simplify site icon animation on hover. ([38783](https://github.com/WordPress/gutenberg/pull/38783))
-- Tests: Remove `originalContent` from fixtures. ([38638](https://github.com/WordPress/gutenberg/pull/38638))
-- Theme.json `styles` check: Port changes from core to Gutenberg. ([38888](https://github.com/WordPress/gutenberg/pull/38888))
-- TypeScript definitions for core-data entity records. ([38666](https://github.com/WordPress/gutenberg/pull/38666))
-- Upgrade react-native-video and drop jetifier on Android. ([38426](https://github.com/WordPress/gutenberg/pull/38426))
-- canUser resolver: Remove fallback for OPTIONS response headers. ([38881](https://github.com/WordPress/gutenberg/pull/38881))
-- edit-site store: Migrate to thunks. ([38812](https://github.com/WordPress/gutenberg/pull/38812))
-
-#### Components
-- BaseControl: Refactor stories to use Controls. ([38741](https://github.com/WordPress/gutenberg/pull/38741))
-- Migrate Post Template Delete button from `confirm()` to `ConfirmDialog`. ([37535](https://github.com/WordPress/gutenberg/pull/37535))
-- Migrate the Post 'Switch to draft' button to `ConfirmDialog` component. ([37491](https://github.com/WordPress/gutenberg/pull/37491))
-- Storybook: Ensure rerender for RTL switcher. ([38963](https://github.com/WordPress/gutenberg/pull/38963))
+-   Backport from core: Global styles duotone not rendering in post editor. ([38897](https://github.com/WordPress/gutenberg/pull/38897))
+-   Block support styles: Port changes from core to Gutenberg. ([38880](https://github.com/WordPress/gutenberg/pull/38880))
+-   Data: Enable thunks by default and remove the experimental flag. ([38853](https://github.com/WordPress/gutenberg/pull/38853))
+-   Editor: Adds additional check to guard against incompete presets. ([38902](https://github.com/WordPress/gutenberg/pull/38902))
+-   Integration tests: Remove client ID from fixtures. ([38685](https://github.com/WordPress/gutenberg/pull/38685))
+-   Lowered specificity of alignment rules. ([38947](https://github.com/WordPress/gutenberg/pull/38947))
+-   Mobile - Fix Custom Palette colors and support multiple origins and theme cache issues. ([38417](https://github.com/WordPress/gutenberg/pull/38417))
+-   Mobile: Improve npm clean scripts for react-native-editor. ([38752](https://github.com/WordPress/gutenberg/pull/38752))
+-   PostTrash: Call trashPost action with no arguments, rewrite to hooks. ([38615](https://github.com/WordPress/gutenberg/pull/38615))
+-   Simplify site icon animation on hover. ([38783](https://github.com/WordPress/gutenberg/pull/38783))
+-   Tests: Remove `originalContent` from fixtures. ([38638](https://github.com/WordPress/gutenberg/pull/38638))
+-   Theme.json `styles` check: Port changes from core to Gutenberg. ([38888](https://github.com/WordPress/gutenberg/pull/38888))
+-   TypeScript definitions for core-data entity records. ([38666](https://github.com/WordPress/gutenberg/pull/38666))
+-   Upgrade react-native-video and drop jetifier on Android. ([38426](https://github.com/WordPress/gutenberg/pull/38426))
+-   canUser resolver: Remove fallback for OPTIONS response headers. ([38881](https://github.com/WordPress/gutenberg/pull/38881))
+-   edit-site store: Migrate to thunks. ([38812](https://github.com/WordPress/gutenberg/pull/38812))
+
+#### Components
+
+-   BaseControl: Refactor stories to use Controls. ([38741](https://github.com/WordPress/gutenberg/pull/38741))
+-   Migrate Post Template Delete button from `confirm()` to `ConfirmDialog`. ([37535](https://github.com/WordPress/gutenberg/pull/37535))
+-   Migrate the Post 'Switch to draft' button to `ConfirmDialog` component. ([37491](https://github.com/WordPress/gutenberg/pull/37491))
+-   Storybook: Ensure rerender for RTL switcher. ([38963](https://github.com/WordPress/gutenberg/pull/38963))
 
 #### Post Editor
-- Editor store: Remove a noop SETUP_EDITOR action. ([38622](https://github.com/WordPress/gutenberg/pull/38622))
-- Migrate editor store to thunks. ([35929](https://github.com/WordPress/gutenberg/pull/35929))
-- [Edit Post]: Migrate store actions to thunks. ([36551](https://github.com/WordPress/gutenberg/pull/36551))
+
+-   Editor store: Remove a noop SETUP_EDITOR action. ([38622](https://github.com/WordPress/gutenberg/pull/38622))
+-   Migrate editor store to thunks. ([35929](https://github.com/WordPress/gutenberg/pull/35929))
+-   [Edit Post]: Migrate store actions to thunks. ([36551](https://github.com/WordPress/gutenberg/pull/36551))
 
 #### Global Styles
-- Allow to extend the `WP_Theme_JSON_Gutenberg` class. ([38671](https://github.com/WordPress/gutenberg/pull/38671))
-- Update Global Styles code to continue adding settings & styles. ([38883](https://github.com/WordPress/gutenberg/pull/38883))
+
+-   Allow to extend the `WP_Theme_JSON_Gutenberg` class. ([38671](https://github.com/WordPress/gutenberg/pull/38671))
+-   Update Global Styles code to continue adding settings & styles. ([38883](https://github.com/WordPress/gutenberg/pull/38883))
 
 #### Block Library
-- Change Gallery block code ownership. ([38722](https://github.com/WordPress/gutenberg/pull/38722))
-- Remove data-controls mock from Image block RN tests. ([38852](https://github.com/WordPress/gutenberg/pull/38852))
+
+-   Change Gallery block code ownership. ([38722](https://github.com/WordPress/gutenberg/pull/38722))
+-   Remove data-controls mock from Image block RN tests. ([38852](https://github.com/WordPress/gutenberg/pull/38852))
 
 #### npm Packages
-- Packages: Automate cherry-picking to `trunk` commits created during publishing. ([38977](https://github.com/WordPress/gutenberg/pull/38977))
+
+-   Packages: Automate cherry-picking to `trunk` commits created during publishing. ([38977](https://github.com/WordPress/gutenberg/pull/38977))
 
 #### Block Conversion
-- [Block Conversion]: Fix Image and Video to Cover block transformations. ([38959](https://github.com/WordPress/gutenberg/pull/38959))
+
+-   [Block Conversion]: Fix Image and Video to Cover block transformations. ([38959](https://github.com/WordPress/gutenberg/pull/38959))
 
 #### Data Layer
-- Data: Normalize selector args when handling metadata selectors/actions. ([38945](https://github.com/WordPress/gutenberg/pull/38945))
+
+-   Data: Normalize selector args when handling metadata selectors/actions. ([38945](https://github.com/WordPress/gutenberg/pull/38945))
 
 #### Icons
-- Deprecate duplicate icons. ([38849](https://github.com/WordPress/gutenberg/pull/38849))
 
-#### Accessibility
-- Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
+-   Deprecate duplicate icons. ([38849](https://github.com/WordPress/gutenberg/pull/38849))
 
+#### Accessibility
 
-## First time contributors
+-   Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
 
-The following PRs were merged by first time contrbutors:
+## First-time contributors
 
-- @Alex-Kostov: Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
-- @HasnainAshfaq: Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
-- @mjstoney: (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
-- @razwan: Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
-- @sanzeeb3: Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
-- @Sisanu: Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
+The following PRs were merged by first-time contributors:
 
+-   @Alex-Kostov: Fix for widget customizer panel,. ([38746](https://github.com/WordPress/gutenberg/pull/38746))
+-   @HasnainAshfaq: Version section update. ([38937](https://github.com/WordPress/gutenberg/pull/38937))
+-   @mjstoney: (Issue #38390) Fixed CSS position property to fix button width. ([38846](https://github.com/WordPress/gutenberg/pull/38846))
+-   @razwan: Add resolvePoint prop to FocalPointPicker component to allow updating value while dragging. ([38247](https://github.com/WordPress/gutenberg/pull/38247))
+-   @sanzeeb3: Fix hyperlink in block `Metadata` page. ([38941](https://github.com/WordPress/gutenberg/pull/38941))
+-   @Sisanu: Adds aria-label to the search button, as accessibility enhancement. ([38136](https://github.com/WordPress/gutenberg/pull/38136))
 
 ## Contributors
 
@@ -7439,7 +31666,6 @@ The following contributors merged PRs in this release:
 
 @aaronrobertshaw @adamziel @ajlende @Alex-Kostov @alexstine @andrewserong @annezazu @audrasjb @bph @c4rl0sbr4v0 @chad1008 @ciampo @DAreRodz @delowardev @dmsnell @ellatrix @fluiddot @geriux @getdave @glendaviesnz @gziolo @HasnainAshfaq @jasmussen @jeherve @jorgefilipecosta @jsnajdr @KevinBatdorf @MaggieCabrera @Mamaduka @mchowning @michalczaplinski @mirka @mjstoney @mkevins @ndiego @noahtallen @ntsekouras @oandregal @ocean90 @PatelUtkarsh @ramonjd @razwan @ryanwelcher @sanzeeb3 @Sisanu @stokesman @t-hamano @talldan @twstokes @webmandesign @westonruter @youknowriad
 
-
 = 12.6.0 =
 
 ## Changelog
@@ -7447,7292 +31673,7779 @@ The following contributors merged PRs in this release:
 ### Enhancements
 
 #### Block Library
-- Add transform between calendar and archives. ([38324](https://github.com/WordPress/gutenberg/pull/38324))
-- Add: Mechanism to keep styles during block transforms. ([37596](https://github.com/WordPress/gutenberg/pull/37596))
-- Code block: Add `core/paragraph` in transforms object. ([38295](https://github.com/WordPress/gutenberg/pull/38295))
-- Heading: Omit anchor when transforming to paragraph. ([38604](https://github.com/WordPress/gutenberg/pull/38604))
-- Navigation: Try removing "Add all pages" from placeholder. ([36775](https://github.com/WordPress/gutenberg/pull/36775))
-- Remove the Large style option from the quote block. ([37580](https://github.com/WordPress/gutenberg/pull/37580))
-- Social Icons: Add the ability to show/hide labels. ([38152](https://github.com/WordPress/gutenberg/pull/38152))
-- [Block Library]: Add transform between `Tag Cloud` and `Categories`. ([38566](https://github.com/WordPress/gutenberg/pull/38566))
-- [Block: Group] Add transform to row variation. ([36202](https://github.com/WordPress/gutenberg/pull/36202))
-- Add post author biography block. ([38269](https://github.com/WordPress/gutenberg/pull/38269))
-- Prompt to keep or replace Featured Image when replacing Image block media that is set as the Featured Image. ([34666](https://github.com/WordPress/gutenberg/pull/34666))
-- Block Library: Add new `Read More` block (post link). ([37649](https://github.com/WordPress/gutenberg/pull/37649))
-- Images: Try moving responsive rule to common.scss. ([38399](https://github.com/WordPress/gutenberg/pull/38399))
-
-#### Components
-- Dropdown: Tweak prop destructuring to be TypeScript friendly. ([38431](https://github.com/WordPress/gutenberg/pull/38431))
-- Tools Panel: Only show header ➕ icon when all items are optional. ([38262](https://github.com/WordPress/gutenberg/pull/38262))
-- Update the Spinner design. ([37551](https://github.com/WordPress/gutenberg/pull/37551))
-- `Navigator`: Add focus restoration. ([38149](https://github.com/WordPress/gutenberg/pull/38149))
-- `Navigator`: Rename `push`/`pop` to `goTo`/`goBack`. ([38582](https://github.com/WordPress/gutenberg/pull/38582))
-- Migrate Edit Navigation screen "Delete menu" button from `confirm()` …. ([37492](https://github.com/WordPress/gutenberg/pull/37492))
+
+-   Add transform between calendar and archives. ([38324](https://github.com/WordPress/gutenberg/pull/38324))
+-   Add: Mechanism to keep styles during block transforms. ([37596](https://github.com/WordPress/gutenberg/pull/37596))
+-   Code block: Add `core/paragraph` in transforms object. ([38295](https://github.com/WordPress/gutenberg/pull/38295))
+-   Heading: Omit anchor when transforming to paragraph. ([38604](https://github.com/WordPress/gutenberg/pull/38604))
+-   Navigation: Try removing "Add all pages" from placeholder. ([36775](https://github.com/WordPress/gutenberg/pull/36775))
+-   Remove the Large style option from the quote block. ([37580](https://github.com/WordPress/gutenberg/pull/37580))
+-   Social Icons: Add the ability to show/hide labels. ([38152](https://github.com/WordPress/gutenberg/pull/38152))
+-   [Block Library]: Add transform between `Tag Cloud` and `Categories`. ([38566](https://github.com/WordPress/gutenberg/pull/38566))
+-   [Block: Group] Add transform to row variation. ([36202](https://github.com/WordPress/gutenberg/pull/36202))
+-   Add post author biography block. ([38269](https://github.com/WordPress/gutenberg/pull/38269))
+-   Prompt to keep or replace Featured Image when replacing Image block media that is set as the Featured Image. ([34666](https://github.com/WordPress/gutenberg/pull/34666))
+-   Block Library: Add new `Read More` block (post link). ([37649](https://github.com/WordPress/gutenberg/pull/37649))
+-   Images: Try moving responsive rule to common.scss. ([38399](https://github.com/WordPress/gutenberg/pull/38399))
+
+#### Components
+
+-   Dropdown: Tweak prop destructuring to be TypeScript friendly. ([38431](https://github.com/WordPress/gutenberg/pull/38431))
+-   Tools Panel: Only show header ➕ icon when all items are optional. ([38262](https://github.com/WordPress/gutenberg/pull/38262))
+-   Update the Spinner design. ([37551](https://github.com/WordPress/gutenberg/pull/37551))
+-   `Navigator`: Add focus restoration. ([38149](https://github.com/WordPress/gutenberg/pull/38149))
+-   `Navigator`: Rename `push`/`pop` to `goTo`/`goBack`. ([38582](https://github.com/WordPress/gutenberg/pull/38582))
+-   Migrate Edit Navigation screen "Delete menu" button from `confirm()` …. ([37492](https://github.com/WordPress/gutenberg/pull/37492))
 
 #### Post Editor
-- Editor: Export FlatTermSelector and HierarchicalTermSelector. ([38419](https://github.com/WordPress/gutenberg/pull/38419))
-- Migrate post privacy confirmation from `confirm()` to `ConfirmDialog`. ([37602](https://github.com/WordPress/gutenberg/pull/37602))
-- Most Used Terms: Update show terms condition. ([38513](https://github.com/WordPress/gutenberg/pull/38513))
+
+-   Editor: Export FlatTermSelector and HierarchicalTermSelector. ([38419](https://github.com/WordPress/gutenberg/pull/38419))
+-   Migrate post privacy confirmation from `confirm()` to `ConfirmDialog`. ([37602](https://github.com/WordPress/gutenberg/pull/37602))
+-   Most Used Terms: Update show terms condition. ([38513](https://github.com/WordPress/gutenberg/pull/38513))
 
 #### Testing
-- Refactor Site Editor test utils to the `e2e-test-utils` package. ([38463](https://github.com/WordPress/gutenberg/pull/38463))
-- Test Create Block with more OS and Node versions. ([38368](https://github.com/WordPress/gutenberg/pull/38368))
-- Include tests-mysql port in dev:Start output. ([38590](https://github.com/WordPress/gutenberg/pull/38590))
+
+-   Refactor Site Editor test utils to the `e2e-test-utils` package. ([38463](https://github.com/WordPress/gutenberg/pull/38463))
+-   Test Create Block with more OS and Node versions. ([38368](https://github.com/WordPress/gutenberg/pull/38368))
+-   Include tests-mysql port in dev:Start output. ([38590](https://github.com/WordPress/gutenberg/pull/38590))
 
 #### Accessibility
-- Accessibility improvements for List View Part 2. ([38358](https://github.com/WordPress/gutenberg/pull/38358))
-- Contrast Checker: Check link color. ([38100](https://github.com/WordPress/gutenberg/pull/38100))
+
+-   Accessibility improvements for List View Part 2. ([38358](https://github.com/WordPress/gutenberg/pull/38358))
+-   Contrast Checker: Check link color. ([38100](https://github.com/WordPress/gutenberg/pull/38100))
 
 #### Block Editor
-- [Inserter]: Prioritize core blocks over core block variations when they have the same rank. ([38616](https://github.com/WordPress/gutenberg/pull/38616))
+
+-   [Inserter]: Prioritize core blocks over core block variations when they have the same rank. ([38616](https://github.com/WordPress/gutenberg/pull/38616))
 
 #### Design Tools
-- Block Support: Update color panel default controls. ([38511](https://github.com/WordPress/gutenberg/pull/38511))
-- Duotone: Allow users to specify custom filters. ([38442](https://github.com/WordPress/gutenberg/pull/38442))
+
+-   Block Support: Update color panel default controls. ([38511](https://github.com/WordPress/gutenberg/pull/38511))
+-   Duotone: Allow users to specify custom filters. ([38442](https://github.com/WordPress/gutenberg/pull/38442))
 
 #### Site Editor
-- Update footer breadcrumb text. ([38477](https://github.com/WordPress/gutenberg/pull/38477))
+
+-   Update footer breadcrumb text. ([38477](https://github.com/WordPress/gutenberg/pull/38477))
 
 #### Extensibility
-- Plugins: Add error boundary. ([38397](https://github.com/WordPress/gutenberg/pull/38397))
+
+-   Plugins: Add error boundary. ([38397](https://github.com/WordPress/gutenberg/pull/38397))
 
 #### Widgets Editor
-- Add tools slot on the navigation and widgets page settings menu. ([37928](https://github.com/WordPress/gutenberg/pull/37928))
+
+-   Add tools slot on the navigation and widgets page settings menu. ([37928](https://github.com/WordPress/gutenberg/pull/37928))
 
 #### Global Styles
-- Color Block Support: Switch to ToolsPanel for displaying UI. ([34027](https://github.com/WordPress/gutenberg/pull/34027))
-- Allow child classes to use the private methods and constants. ([38625](https://github.com/WordPress/gutenberg/pull/38625))
-- Use the theme.json classes defined by the plugin in the REST controller. ([38663](https://github.com/WordPress/gutenberg/pull/38663))
+
+-   Color Block Support: Switch to ToolsPanel for displaying UI. ([34027](https://github.com/WordPress/gutenberg/pull/34027))
+-   Allow child classes to use the private methods and constants. ([38625](https://github.com/WordPress/gutenberg/pull/38625))
+-   Use the theme.json classes defined by the plugin in the REST controller. ([38663](https://github.com/WordPress/gutenberg/pull/38663))
 
 #### Icons
-- Add Tip icon to library and use in the Tip component. ([38424](https://github.com/WordPress/gutenberg/pull/38424))
-- Update pagination icons, add new query title and post terms icons. ([38521](https://github.com/WordPress/gutenberg/pull/38521))
+
+-   Add Tip icon to library and use in the Tip component. ([38424](https://github.com/WordPress/gutenberg/pull/38424))
+-   Update pagination icons, add new query title and post terms icons. ([38521](https://github.com/WordPress/gutenberg/pull/38521))
 
 #### WP-Env
-- Adding the "env" script when --wp-env or wpEnv is present. ([38530](https://github.com/WordPress/gutenberg/pull/38530))
+
+-   Adding the "env" script when --wp-env or wpEnv is present. ([38530](https://github.com/WordPress/gutenberg/pull/38530))
 
 ### New APIs
 
-- Introduce the `customScripts` property to allow templates to define additional scripts in package.json. ([38535](https://github.com/WordPress/gutenberg/pull/38535))
+-   Introduce the `customScripts` property to allow templates to define additional scripts in package.json. ([38535](https://github.com/WordPress/gutenberg/pull/38535))
 
 ### Bug Fixes
 
 #### Block Library
-- Audio: Avoid error when locked. ([38282](https://github.com/WordPress/gutenberg/pull/38282))
-- Comment Template: Improve UX of inner block selection. ([38263](https://github.com/WordPress/gutenberg/pull/38263))
-- Cover block :Add back missing styles. ([38362](https://github.com/WordPress/gutenberg/pull/38362))
-- Fix filtering of content when rendering read more block. ([38650](https://github.com/WordPress/gutenberg/pull/38650))
-- Fix search block html handling for label and button text. ([38649](https://github.com/WordPress/gutenberg/pull/38649))
-- Gallery block: Copy all attributes when transforming to Image blocks. ([38642](https://github.com/WordPress/gutenberg/pull/38642))
-- Gallery block: Fix bug with link destination default option not being set. ([38310](https://github.com/WordPress/gutenberg/pull/38310))
-- Gallery block: Fix bug with uploaded images being replaced with same image during selection phase. ([38259](https://github.com/WordPress/gutenberg/pull/38259))
-- Navigation: Try fixing issue with submenu button in dark contexts. ([38270](https://github.com/WordPress/gutenberg/pull/38270))
-- Navigation: Try inheriting orientation in setup state. ([36778](https://github.com/WordPress/gutenberg/pull/36778))
-- Gallery: Ensure last image takes up all available space. ([38189](https://github.com/WordPress/gutenberg/pull/38189))
-- Navigation: Remove blobs that look like a loading state. ([37099](https://github.com/WordPress/gutenberg/pull/37099))
-- Navigation: Try always showing appender even when child is selected. ([37637](https://github.com/WordPress/gutenberg/pull/37637))
-- Separator block: Remove width from wide style. ([38635](https://github.com/WordPress/gutenberg/pull/38635))
-- Tag Cloud: Add the style to the block.json file. ([38403](https://github.com/WordPress/gutenberg/pull/38403))
-- Block Library: Remove unnecessary usages of `RawHTML`. ([38527](https://github.com/WordPress/gutenberg/pull/38527))
-- Site Tagline: Disable line breaks. ([38475](https://github.com/WordPress/gutenberg/pull/38475))
+
+-   Audio: Avoid error when locked. ([38282](https://github.com/WordPress/gutenberg/pull/38282))
+-   Comment Template: Improve UX of inner block selection. ([38263](https://github.com/WordPress/gutenberg/pull/38263))
+-   Cover block :Add back missing styles. ([38362](https://github.com/WordPress/gutenberg/pull/38362))
+-   Fix filtering of content when rendering read more block. ([38650](https://github.com/WordPress/gutenberg/pull/38650))
+-   Fix search block html handling for label and button text. ([38649](https://github.com/WordPress/gutenberg/pull/38649))
+-   Gallery block: Copy all attributes when transforming to Image blocks. ([38642](https://github.com/WordPress/gutenberg/pull/38642))
+-   Gallery block: Fix bug with link destination default option not being set. ([38310](https://github.com/WordPress/gutenberg/pull/38310))
+-   Gallery block: Fix bug with uploaded images being replaced with same image during selection phase. ([38259](https://github.com/WordPress/gutenberg/pull/38259))
+-   Navigation: Try fixing issue with submenu button in dark contexts. ([38270](https://github.com/WordPress/gutenberg/pull/38270))
+-   Navigation: Try inheriting orientation in setup state. ([36778](https://github.com/WordPress/gutenberg/pull/36778))
+-   Gallery: Ensure last image takes up all available space. ([38189](https://github.com/WordPress/gutenberg/pull/38189))
+-   Navigation: Remove blobs that look like a loading state. ([37099](https://github.com/WordPress/gutenberg/pull/37099))
+-   Navigation: Try always showing appender even when child is selected. ([37637](https://github.com/WordPress/gutenberg/pull/37637))
+-   Separator block: Remove width from wide style. ([38635](https://github.com/WordPress/gutenberg/pull/38635))
+-   Tag Cloud: Add the style to the block.json file. ([38403](https://github.com/WordPress/gutenberg/pull/38403))
+-   Block Library: Remove unnecessary usages of `RawHTML`. ([38527](https://github.com/WordPress/gutenberg/pull/38527))
+-   Site Tagline: Disable line breaks. ([38475](https://github.com/WordPress/gutenberg/pull/38475))
 
 #### Components
-- Add `cx` as a dependency of `useMemo` across `@wordpress/components` package. ([38541](https://github.com/WordPress/gutenberg/pull/38541))
-- Fix `Slot`/`Fill` Emotion `StyleProvider`. ([38237](https://github.com/WordPress/gutenberg/pull/38237))
-- UnitControl: Add __unstableInputWidth to prop types. ([38429](https://github.com/WordPress/gutenberg/pull/38429))
-- `ComboBox`: Fix `reset` button's height. ([38020](https://github.com/WordPress/gutenberg/pull/38020))
-- `DateTimePicker`: Fix date format when switching to 12-hour time format. ([37465](https://github.com/WordPress/gutenberg/pull/37465))
+
+-   Add `cx` as a dependency of `useMemo` across `@wordpress/components` package. ([38541](https://github.com/WordPress/gutenberg/pull/38541))
+-   Fix `Slot`/`Fill` Emotion `StyleProvider`. ([38237](https://github.com/WordPress/gutenberg/pull/38237))
+-   UnitControl: Add \_\_unstableInputWidth to prop types. ([38429](https://github.com/WordPress/gutenberg/pull/38429))
+-   `ComboBox`: Fix `reset` button's height. ([38020](https://github.com/WordPress/gutenberg/pull/38020))
+-   `DateTimePicker`: Fix date format when switching to 12-hour time format. ([37465](https://github.com/WordPress/gutenberg/pull/37465))
 
 #### Testing
-- First Time Contributor check: Update args for getByUsername. ([38467](https://github.com/WordPress/gutenberg/pull/38467))
-- Silence editor initialization act warnings triggered by asynchronous resolvers during unmount. ([38344](https://github.com/WordPress/gutenberg/pull/38344))
-- Tests: Enable post type UI for templates and template parts. ([38486](https://github.com/WordPress/gutenberg/pull/38486))
+
+-   first-time contributor check: Update args for getByUsername. ([38467](https://github.com/WordPress/gutenberg/pull/38467))
+-   Silence editor initialization act warnings triggered by asynchronous resolvers during unmount. ([38344](https://github.com/WordPress/gutenberg/pull/38344))
+-   Tests: Enable post type UI for templates and template parts. ([38486](https://github.com/WordPress/gutenberg/pull/38486))
 
 #### Accessibility
-- Block Manager: Announce search results. ([38654](https://github.com/WordPress/gutenberg/pull/38654))
-- TreeGrid accessibility: Improve browser support for Left Arrow focus to parent row in child row. ([38639](https://github.com/WordPress/gutenberg/pull/38639))
-- Ensure placeholder description is read by VoiceOver. ([38366](https://github.com/WordPress/gutenberg/pull/38366))
-- Remove role attributes on SVGs meant for "decoration" to improve a11y. ([38301](https://github.com/WordPress/gutenberg/pull/38301))
+
+-   Block Manager: Announce search results. ([38654](https://github.com/WordPress/gutenberg/pull/38654))
+-   TreeGrid accessibility: Improve browser support for Left Arrow focus to parent row in child row. ([38639](https://github.com/WordPress/gutenberg/pull/38639))
+-   Ensure placeholder description is read by VoiceOver. ([38366](https://github.com/WordPress/gutenberg/pull/38366))
+-   Remove role attributes on SVGs meant for "decoration" to improve a11y. ([38301](https://github.com/WordPress/gutenberg/pull/38301))
 
 #### Block Editor
-- Don't ignore legitimate files when pasting mixed content. ([38459](https://github.com/WordPress/gutenberg/pull/38459))
-- Handle the absence of href attrib in links. ([37034](https://github.com/WordPress/gutenberg/pull/37034))
-- Block preview: Fix resize listener. ([38516](https://github.com/WordPress/gutenberg/pull/38516))
-- Guard against undefined entity in site editor page setter. ([38503](https://github.com/WordPress/gutenberg/pull/38503))
-- Page for Posts: Display notice in template panel. ([38607](https://github.com/WordPress/gutenberg/pull/38607))
-- Editor store: Remove createUndoLevel and refreshPost actions. ([38585](https://github.com/WordPress/gutenberg/pull/38585))
+
+-   Don't ignore legitimate files when pasting mixed content. ([38459](https://github.com/WordPress/gutenberg/pull/38459))
+-   Handle the absence of href attrib in links. ([37034](https://github.com/WordPress/gutenberg/pull/37034))
+-   Block preview: Fix resize listener. ([38516](https://github.com/WordPress/gutenberg/pull/38516))
+-   Guard against undefined entity in site editor page setter. ([38503](https://github.com/WordPress/gutenberg/pull/38503))
+-   Page for Posts: Display notice in template panel. ([38607](https://github.com/WordPress/gutenberg/pull/38607))
+-   Editor store: Remove createUndoLevel and refreshPost actions. ([38585](https://github.com/WordPress/gutenberg/pull/38585))
 
 #### Template Editor
-- Template Editing Mode: Fix horizontal scrollbar. ([38612](https://github.com/WordPress/gutenberg/pull/38612))
-- Full Site Editing: Improve compat with 3rd party Customizer links. ([38598](https://github.com/WordPress/gutenberg/pull/38598))
-- Site Editor: Remove extra div on post content. ([38451](https://github.com/WordPress/gutenberg/pull/38451))
+
+-   Template Editing Mode: Fix horizontal scrollbar. ([38612](https://github.com/WordPress/gutenberg/pull/38612))
+-   Full Site Editing: Improve compat with 3rd party Customizer links. ([38598](https://github.com/WordPress/gutenberg/pull/38598))
+-   Site Editor: Remove extra div on post content. ([38451](https://github.com/WordPress/gutenberg/pull/38451))
 
 #### Design Tools
-- Search Block: Fix border radius reset. ([38478](https://github.com/WordPress/gutenberg/pull/38478))
+
+-   Search Block: Fix border radius reset. ([38478](https://github.com/WordPress/gutenberg/pull/38478))
 
 #### Scripts
-- Avoid first time contributor workflows for bots. ([38393](https://github.com/WordPress/gutenberg/pull/38393))
-- Fix: Wp-scripts command does not generate assets on Windows OS. ([38348](https://github.com/WordPress/gutenberg/pull/38348))
-- Script: Ensure that `start` works when React Fast Refresh scripts missing. ([38318](https://github.com/WordPress/gutenberg/pull/38318))
-- Scripts: Fallback to `src/index.js` when no valid scripts in metadata for `build` command. ([38367](https://github.com/WordPress/gutenberg/pull/38367))
-- Scripts: Improve the handling for build entry points. ([38584](https://github.com/WordPress/gutenberg/pull/38584))
+
+-   Avoid first-time contributor workflows for bots. ([38393](https://github.com/WordPress/gutenberg/pull/38393))
+-   Fix: Wp-scripts command does not generate assets on Windows OS. ([38348](https://github.com/WordPress/gutenberg/pull/38348))
+-   Script: Ensure that `start` works when React Fast Refresh scripts missing. ([38318](https://github.com/WordPress/gutenberg/pull/38318))
+-   Scripts: Fallback to `src/index.js` when no valid scripts in metadata for `build` command. ([38367](https://github.com/WordPress/gutenberg/pull/38367))
+-   Scripts: Improve the handling for build entry points. ([38584](https://github.com/WordPress/gutenberg/pull/38584))
 
 #### Apps
-- Declare package visibility to query URL handler apps. ([38377](https://github.com/WordPress/gutenberg/pull/38377))
-- Drop jcenter repository from react-native Android projects. ([38142](https://github.com/WordPress/gutenberg/pull/38142))
-- Mobile - Rich Text - Validate link colors. ([38474](https://github.com/WordPress/gutenberg/pull/38474))
 
+-   Declare package visibility to query URL handler apps. ([38377](https://github.com/WordPress/gutenberg/pull/38377))
+-   Drop jcenter repository from react-native Android projects. ([38142](https://github.com/WordPress/gutenberg/pull/38142))
+-   Mobile - Rich Text - Validate link colors. ([38474](https://github.com/WordPress/gutenberg/pull/38474))
 
 ### Performance
 
 #### Block Library
-- Latest Posts: Avoid unnecessary re-renders. ([38402](https://github.com/WordPress/gutenberg/pull/38402))
-- Site Logo: Avoid unnecessary re-renders. ([38316](https://github.com/WordPress/gutenberg/pull/38316))
+
+-   Latest Posts: Avoid unnecessary re-renders. ([38402](https://github.com/WordPress/gutenberg/pull/38402))
+-   Site Logo: Avoid unnecessary re-renders. ([38316](https://github.com/WordPress/gutenberg/pull/38316))
 
 #### Post Editor
-- Avoid unnecessary Post Formats re-renders. ([38285](https://github.com/WordPress/gutenberg/pull/38285))
-- Avoid unnecessary Template panel re-renders. ([38292](https://github.com/WordPress/gutenberg/pull/38292))
+
+-   Avoid unnecessary Post Formats re-renders. ([38285](https://github.com/WordPress/gutenberg/pull/38285))
+-   Avoid unnecessary Template panel re-renders. ([38292](https://github.com/WordPress/gutenberg/pull/38292))
 
 ### Documentation
-- Add a block supports chapter to the block creation tutorial. ([38210](https://github.com/WordPress/gutenberg/pull/38210))
-- Add a block supports for dynamic blocks chapter to the block creation tutorial. ([38249](https://github.com/WordPress/gutenberg/pull/38249))
-- Add a high-level intro to styles in the block editor. ([38208](https://github.com/WordPress/gutenberg/pull/38208))
-- Add contributing information to packages. ([38122](https://github.com/WordPress/gutenberg/pull/38122))
-- Add the Gutenberg data tutorial to the block editor handbook. ([38587](https://github.com/WordPress/gutenberg/pull/38587))
-- Docs: Move design documentation to user interface explanations. ([37807](https://github.com/WordPress/gutenberg/pull/37807))
-- Fix components package README contributing link and duplicate footers. ([38605](https://github.com/WordPress/gutenberg/pull/38605))
-- Fix relative links in main package READMEs so that they work in npm. ([38609](https://github.com/WordPress/gutenberg/pull/38609))
-- Fix: npm script error on Windows (api-docs:Ref). ([38326](https://github.com/WordPress/gutenberg/pull/38326))
-- Move backward compatibility documentation under Contributors Guide. ([37654](https://github.com/WordPress/gutenberg/pull/37654))
-- Provide proper path to image in the handbook. ([38480](https://github.com/WordPress/gutenberg/pull/38480))
-- Remove reference to `upcoming` WordPress 5.9 release. ([38272](https://github.com/WordPress/gutenberg/pull/38272))
-- Scripts: Fix copypasta typo in README file. ([38531](https://github.com/WordPress/gutenberg/pull/38531))
-- Show the block supports for static blocks tutorial in the handbook. ([38452](https://github.com/WordPress/gutenberg/pull/38452))
-- ToolsPanel StoryBook: Removing knobs in favour of controls. ([38308](https://github.com/WordPress/gutenberg/pull/38308))
-- Tutorial: Create your First App with Gutenberg Data. ([38250](https://github.com/WordPress/gutenberg/pull/38250))
-- Update attributes.md. ([38626](https://github.com/WordPress/gutenberg/pull/38626))
-- Update core/archive block schema to reflect no block-level settings support. ([37778](https://github.com/WordPress/gutenberg/pull/37778))
-- Update explanation of block.json file scanning. ([38379](https://github.com/WordPress/gutenberg/pull/38379))
-- Update theme support documentation. ([38514](https://github.com/WordPress/gutenberg/pull/38514))
-- VisuallyHidden: Remove stray readme file. ([38641](https://github.com/WordPress/gutenberg/pull/38641))
-- [Docs]: Add documentation for `schema` in block API. ([36839](https://github.com/WordPress/gutenberg/pull/36839))
-- Update Contributing Guidelines to reflect Dual-License. ([38303](https://github.com/WordPress/gutenberg/pull/38303))
-- Update version required before gutenberg_safe_style_attrs filter can be removed. ([38359](https://github.com/WordPress/gutenberg/pull/38359))
-- Updated changelog to reflect new tip icon. ([38450](https://github.com/WordPress/gutenberg/pull/38450))
-- Use a fixed link to the latest release in readme.txt. ([38550](https://github.com/WordPress/gutenberg/pull/38550))
-
-#### Components
-- Add CHANGELOG entries for recent `TreeGrid` improvements. ([38661](https://github.com/WordPress/gutenberg/pull/38661))
-- Add missing changelog entry. ([38325](https://github.com/WordPress/gutenberg/pull/38325))
-- Changelog: Add missed entries for recent typing fixes and tweaks. ([38469](https://github.com/WordPress/gutenberg/pull/38469))
-- Fix missing link in  `@wordpress/components`'s CHANGELOG. ([38611](https://github.com/WordPress/gutenberg/pull/38611))
+
+-   Add a block supports chapter to the block creation tutorial. ([38210](https://github.com/WordPress/gutenberg/pull/38210))
+-   Add a block supports for dynamic blocks chapter to the block creation tutorial. ([38249](https://github.com/WordPress/gutenberg/pull/38249))
+-   Add a high-level intro to styles in the block editor. ([38208](https://github.com/WordPress/gutenberg/pull/38208))
+-   Add contributing information to packages. ([38122](https://github.com/WordPress/gutenberg/pull/38122))
+-   Add the Gutenberg data tutorial to the block editor handbook. ([38587](https://github.com/WordPress/gutenberg/pull/38587))
+-   Docs: Move design documentation to user interface explanations. ([37807](https://github.com/WordPress/gutenberg/pull/37807))
+-   Fix components package README contributing link and duplicate footers. ([38605](https://github.com/WordPress/gutenberg/pull/38605))
+-   Fix relative links in main package READMEs so that they work in npm. ([38609](https://github.com/WordPress/gutenberg/pull/38609))
+-   Fix: npm script error on Windows (api-docs:Ref). ([38326](https://github.com/WordPress/gutenberg/pull/38326))
+-   Move backward compatibility documentation under Contributors Guide. ([37654](https://github.com/WordPress/gutenberg/pull/37654))
+-   Provide proper path to image in the handbook. ([38480](https://github.com/WordPress/gutenberg/pull/38480))
+-   Remove reference to `upcoming` WordPress 5.9 release. ([38272](https://github.com/WordPress/gutenberg/pull/38272))
+-   Scripts: Fix copypasta typo in README file. ([38531](https://github.com/WordPress/gutenberg/pull/38531))
+-   Show the block supports for static blocks tutorial in the handbook. ([38452](https://github.com/WordPress/gutenberg/pull/38452))
+-   ToolsPanel StoryBook: Removing knobs in favour of controls. ([38308](https://github.com/WordPress/gutenberg/pull/38308))
+-   Tutorial: Create your First App with Gutenberg Data. ([38250](https://github.com/WordPress/gutenberg/pull/38250))
+-   Update attributes.md. ([38626](https://github.com/WordPress/gutenberg/pull/38626))
+-   Update core/archive block schema to reflect no block-level settings support. ([37778](https://github.com/WordPress/gutenberg/pull/37778))
+-   Update explanation of block.json file scanning. ([38379](https://github.com/WordPress/gutenberg/pull/38379))
+-   Update theme support documentation. ([38514](https://github.com/WordPress/gutenberg/pull/38514))
+-   VisuallyHidden: Remove stray readme file. ([38641](https://github.com/WordPress/gutenberg/pull/38641))
+-   [Docs]: Add documentation for `schema` in block API. ([36839](https://github.com/WordPress/gutenberg/pull/36839))
+-   Update Contributing Guidelines to reflect Dual-License. ([38303](https://github.com/WordPress/gutenberg/pull/38303))
+-   Update version required before gutenberg_safe_style_attrs filter can be removed. ([38359](https://github.com/WordPress/gutenberg/pull/38359))
+-   Updated changelog to reflect new tip icon. ([38450](https://github.com/WordPress/gutenberg/pull/38450))
+-   Use a fixed link to the latest release in readme.txt. ([38550](https://github.com/WordPress/gutenberg/pull/38550))
+
+#### Components
+
+-   Add CHANGELOG entries for recent `TreeGrid` improvements. ([38661](https://github.com/WordPress/gutenberg/pull/38661))
+-   Add missing changelog entry. ([38325](https://github.com/WordPress/gutenberg/pull/38325))
+-   Changelog: Add missed entries for recent typing fixes and tweaks. ([38469](https://github.com/WordPress/gutenberg/pull/38469))
+-   Fix missing link in `@wordpress/components`'s CHANGELOG. ([38611](https://github.com/WordPress/gutenberg/pull/38611))
 
 ### Code Quality
-- Chore: Fix: Remove isReversed usage. ([38484](https://github.com/WordPress/gutenberg/pull/38484))
-- Remove APIs deprecated on WordPress 5.4. ([38564](https://github.com/WordPress/gutenberg/pull/38564))
-- Update the minimum supported version to WordPress 5.8. ([38273](https://github.com/WordPress/gutenberg/pull/38273))
+
+-   Chore: Fix: Remove isReversed usage. ([38484](https://github.com/WordPress/gutenberg/pull/38484))
+-   Remove APIs deprecated on WordPress 5.4. ([38564](https://github.com/WordPress/gutenberg/pull/38564))
+-   Update the minimum supported version to WordPress 5.8. ([38273](https://github.com/WordPress/gutenberg/pull/38273))
 
 #### Plugin
-- Bump bl from 4.0.2 to 4.1.0. ([38396](https://github.com/WordPress/gutenberg/pull/38396))
-- Bump follow-redirects from 1.14.1 to 1.14.7. ([38371](https://github.com/WordPress/gutenberg/pull/38371))
-- Bump jszip from 3.6.0 to 3.7.1. ([38410](https://github.com/WordPress/gutenberg/pull/38410))
-- Bump ssri from 6.0.1 to 6.0.2. ([38382](https://github.com/WordPress/gutenberg/pull/38382))
+
+-   Bump bl from 4.0.2 to 4.1.0. ([38396](https://github.com/WordPress/gutenberg/pull/38396))
+-   Bump follow-redirects from 1.14.1 to 1.14.7. ([38371](https://github.com/WordPress/gutenberg/pull/38371))
+-   Bump jszip from 3.6.0 to 3.7.1. ([38410](https://github.com/WordPress/gutenberg/pull/38410))
+-   Bump ssri from 6.0.1 to 6.0.2. ([38382](https://github.com/WordPress/gutenberg/pull/38382))
 
 #### Components
-- ColorIndicator: Add ts-nocheck to color indicator. ([38433](https://github.com/WordPress/gutenberg/pull/38433))
-- ColorPicker: Fix typing errors. ([38430](https://github.com/WordPress/gutenberg/pull/38430))
-- Refresh `object-keys` version in package-lock. ([38645](https://github.com/WordPress/gutenberg/pull/38645))
+
+-   ColorIndicator: Add ts-nocheck to color indicator. ([38433](https://github.com/WordPress/gutenberg/pull/38433))
+-   ColorPicker: Fix typing errors. ([38430](https://github.com/WordPress/gutenberg/pull/38430))
+-   Refresh `object-keys` version in package-lock. ([38645](https://github.com/WordPress/gutenberg/pull/38645))
 
 #### Block Library
-- Consolidate select menus dropdown in Nav block code. ([38179](https://github.com/WordPress/gutenberg/pull/38179))
-- Cover block: Background element's classname consistency. ([38392](https://github.com/WordPress/gutenberg/pull/38392))
-- Image Block: Explicitly check for false from strpos(). ([38505](https://github.com/WordPress/gutenberg/pull/38505))
+
+-   Consolidate select menus dropdown in Nav block code. ([38179](https://github.com/WordPress/gutenberg/pull/38179))
+-   Cover block: Background element's classname consistency. ([38392](https://github.com/WordPress/gutenberg/pull/38392))
+-   Image Block: Explicitly check for false from strpos(). ([38505](https://github.com/WordPress/gutenberg/pull/38505))
 
 #### npm Packages
-- Remove unused dependencies. ([38388](https://github.com/WordPress/gutenberg/pull/38388))
+
+-   Remove unused dependencies. ([38388](https://github.com/WordPress/gutenberg/pull/38388))
 
 ### Tools
 
 #### Testing
-- Add: End to end test for the block transforms. ([38300](https://github.com/WordPress/gutenberg/pull/38300))
-- Add: End to end tests for style variations. ([38485](https://github.com/WordPress/gutenberg/pull/38485))
-- E2E: Fix flakey gallery and template end-to-end specs. ([38342](https://github.com/WordPress/gutenberg/pull/38342))
-- Minor retouches to test-create-block script. ([38482](https://github.com/WordPress/gutenberg/pull/38482))
-- Scripts: Update Puppeteer to v13. ([37078](https://github.com/WordPress/gutenberg/pull/37078))
 
-#### Build Tooling
-- Build workflow: Don't update version in readme.txt. ([38596](https://github.com/WordPress/gutenberg/pull/38596))
-- Changelog: Append a generated list of first time contributors by PR label. ([38372](https://github.com/WordPress/gutenberg/pull/38372))
-- Rename `GUTENBERG_PHASE` to `IS_GUTENBERG_PLUGIN`. ([38202](https://github.com/WordPress/gutenberg/pull/38202))
-- Bump axios from 0.21.1 to 0.21.4. ([38369](https://github.com/WordPress/gutenberg/pull/38369))
-- Bump hosted-git-info from 2.7.1 to 2.8.9. ([38327](https://github.com/WordPress/gutenberg/pull/38327))
-- Bump addressable from 2.7.0 to 2.8.0 in /packages/react-native-editor/ios. ([38234](https://github.com/WordPress/gutenberg/pull/38234))
-- Bump shelljs from 0.8.4 to 0.8.5. ([38370](https://github.com/WordPress/gutenberg/pull/38370))
-- Update kotlin version for react-native Android projects to 1.5.32. ([37970](https://github.com/WordPress/gutenberg/pull/37970))
-- ESLint Plugin: Add flanking whitespace and hyphenated range rules. ([38225](https://github.com/WordPress/gutenberg/pull/38225))
-- WP Env: Fix infinite redirection with custom site URL. ([38352](https://github.com/WordPress/gutenberg/pull/38352))
-
-### People
-- Add @ryanwelcher as code owner to three packages and docs. ([38532](https://github.com/WordPress/gutenberg/pull/38532))
+-   Add: End to end test for the block transforms. ([38300](https://github.com/WordPress/gutenberg/pull/38300))
+-   Add: End to end tests for style variations. ([38485](https://github.com/WordPress/gutenberg/pull/38485))
+-   E2E: Fix flakey gallery and template end-to-end specs. ([38342](https://github.com/WordPress/gutenberg/pull/38342))
+-   Minor retouches to test-create-block script. ([38482](https://github.com/WordPress/gutenberg/pull/38482))
+-   Scripts: Update Puppeteer to v13. ([37078](https://github.com/WordPress/gutenberg/pull/37078))
 
-## First time contributors
+#### Build Tooling
 
-The following PRs were merged by first time contrbutors:
+-   Build workflow: Don't update version in readme.txt. ([38596](https://github.com/WordPress/gutenberg/pull/38596))
+-   Changelog: Append a generated list of first-time contributors by PR label. ([38372](https://github.com/WordPress/gutenberg/pull/38372))
+-   Rename `GUTENBERG_PHASE` to `IS_GUTENBERG_PLUGIN`. ([38202](https://github.com/WordPress/gutenberg/pull/38202))
+-   Bump axios from 0.21.1 to 0.21.4. ([38369](https://github.com/WordPress/gutenberg/pull/38369))
+-   Bump hosted-git-info from 2.7.1 to 2.8.9. ([38327](https://github.com/WordPress/gutenberg/pull/38327))
+-   Bump addressable from 2.7.0 to 2.8.0 in /packages/react-native-editor/ios. ([38234](https://github.com/WordPress/gutenberg/pull/38234))
+-   Bump shelljs from 0.8.4 to 0.8.5. ([38370](https://github.com/WordPress/gutenberg/pull/38370))
+-   Update kotlin version for react-native Android projects to 1.5.32. ([37970](https://github.com/WordPress/gutenberg/pull/37970))
+-   ESLint Plugin: Add flanking whitespace and hyphenated range rules. ([38225](https://github.com/WordPress/gutenberg/pull/38225))
+-   WP Env: Fix infinite redirection with custom site URL. ([38352](https://github.com/WordPress/gutenberg/pull/38352))
 
-- @JeffMatsonPagely: Scripts: Fix copypasta typo in README file. ([38531](https://github.com/WordPress/gutenberg/pull/38531))
-- @angelistudio: Update attributes.md. ([38626](https://github.com/WordPress/gutenberg/pull/38626))
-- @sunyatasattva: Refactor Site Editor test utils to the `e2e-test-utils` package. ([38463](https://github.com/WordPress/gutenberg/pull/38463))
+### People
 
+-   Add @ryanwelcher as code owner to three packages and docs. ([38532](https://github.com/WordPress/gutenberg/pull/38532))
 
+## First-time contributors
 
+The following PRs were merged by first-time contributors:
 
+-   @JeffMatsonPagely: Scripts: Fix copypasta typo in README file. ([38531](https://github.com/WordPress/gutenberg/pull/38531))
+-   @angelistudio: Update attributes.md. ([38626](https://github.com/WordPress/gutenberg/pull/38626))
+-   @sunyatasattva: Refactor Site Editor test utils to the `e2e-test-utils` package. ([38463](https://github.com/WordPress/gutenberg/pull/38463))
 
 = 12.5.4 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Library
-- Fix and refine core function escaping in block output. ([38569](https://github.com/WordPress/gutenberg/pull/38569))
 
+-   Fix and refine core function escaping in block output. ([38569](https://github.com/WordPress/gutenberg/pull/38569))
 
 = 12.5.3 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Library
-- Fix escaping to consider addition of pagination arrow in Query Loop. ([38519](https://github.com/WordPress/gutenberg/pull/38519))
 
+-   Fix escaping to consider addition of pagination arrow in Query Loop. ([38519](https://github.com/WordPress/gutenberg/pull/38519))
 
 = 12.5.2 =
 
-
+## Changelog
 
 ### Bug Fixes
 
 #### Block Library
-- Fix latest posts excerpt escaping. ([38517](https://github.com/WordPress/gutenberg/pull/38517))
-
-
-
 
+-   Fix latest posts excerpt escaping. ([38517](https://github.com/WordPress/gutenberg/pull/38517))
 
 = 12.5.1 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Site Editor
 
-- Fix a WSOD in the site editor which occurred when an entity could be undefined (https://github.com/WordPress/gutenberg/pull/38503)
-
+-   Fix a WSOD in the site editor which occurred when an entity could be undefined (https://github.com/WordPress/gutenberg/pull/38503)
 
 = 12.5.0 =
 
+## Changelog
+
 ### Features
 
-*   Allow switching global styles variations. ([35619](https://github.com/WordPress/gutenberg/pull/35619))
-*   Add: Code editor to edit site. ([37765](https://github.com/WordPress/gutenberg/pull/37765))
-*   [Post Featured Image]: Show all the controls when inside a Query Loop. ([37945](https://github.com/WordPress/gutenberg/pull/37945))
+-   Allow switching global styles variations. ([35619](https://github.com/WordPress/gutenberg/pull/35619))
+-   Add: Code editor to edit site. ([37765](https://github.com/WordPress/gutenberg/pull/37765))
+-   [Post Featured Image]: Show all the controls when inside a Query Loop. ([37945](https://github.com/WordPress/gutenberg/pull/37945))
 
 ### Enhancements
 
 #### Block Library
 
-*   Add transform between core/site-logo and core/site-title blocks. ([37920](https://github.com/WordPress/gutenberg/pull/37920))
-*   Allow using a text label instead of an icon on overlay menu toggle button. ([36149](https://github.com/WordPress/gutenberg/pull/36149))
-*   Post Featured Image: Add size selector. ([38044](https://github.com/WordPress/gutenberg/pull/38044))
-*   [Query Loop]: Add multiple authors support. ([38024](https://github.com/WordPress/gutenberg/pull/38024))
-*   [Query Loop]: Add support for custom taxonomies filtering. ([38063](https://github.com/WordPress/gutenberg/pull/38063))
-*   Comments Query Loop: Add discuss options to the block. ([37297](https://github.com/WordPress/gutenberg/pull/37297))
-*   Fetch classic Menus and Pages using view (readonly) context. ([37884](https://github.com/WordPress/gutenberg/pull/37884))
-*   Gallery block: Move add/edit media to block toolbar. ([38036](https://github.com/WordPress/gutenberg/pull/38036))
-*   Navigation Block : Try not using css variable for block gap support. ([37543](https://github.com/WordPress/gutenberg/pull/37543))
-*   Paragraph: Try to avoid a trailing word in the description. ([37483](https://github.com/WordPress/gutenberg/pull/37483))
-*   Rename next and previous to newer an older. ([38143](https://github.com/WordPress/gutenberg/pull/38143))
-*   Show menus selection in placeholder only if available. ([37980](https://github.com/WordPress/gutenberg/pull/37980))
-*   Unset inherited backgrounds on Posts Lists. ([37941](https://github.com/WordPress/gutenberg/pull/37941))
-*   Unset inherited backgrounds on social icons. ([37940](https://github.com/WordPress/gutenberg/pull/37940))
+-   Add transform between core/site-logo and core/site-title blocks. ([37920](https://github.com/WordPress/gutenberg/pull/37920))
+-   Allow using a text label instead of an icon on overlay menu toggle button. ([36149](https://github.com/WordPress/gutenberg/pull/36149))
+-   Post Featured Image: Add size selector. ([38044](https://github.com/WordPress/gutenberg/pull/38044))
+-   [Query Loop]: Add multiple authors support. ([38024](https://github.com/WordPress/gutenberg/pull/38024))
+-   [Query Loop]: Add support for custom taxonomies filtering. ([38063](https://github.com/WordPress/gutenberg/pull/38063))
+-   Comments Query Loop: Add discuss options to the block. ([37297](https://github.com/WordPress/gutenberg/pull/37297))
+-   Fetch classic Menus and Pages using view (readonly) context. ([37884](https://github.com/WordPress/gutenberg/pull/37884))
+-   Gallery block: Move add/edit media to block toolbar. ([38036](https://github.com/WordPress/gutenberg/pull/38036))
+-   Navigation Block : Try not using css variable for block gap support. ([37543](https://github.com/WordPress/gutenberg/pull/37543))
+-   Paragraph: Try to avoid a trailing word in the description. ([37483](https://github.com/WordPress/gutenberg/pull/37483))
+-   Rename next and previous to newer an older. ([38143](https://github.com/WordPress/gutenberg/pull/38143))
+-   Show menus selection in placeholder only if available. ([37980](https://github.com/WordPress/gutenberg/pull/37980))
+-   Unset inherited backgrounds on Posts Lists. ([37941](https://github.com/WordPress/gutenberg/pull/37941))
+-   Unset inherited backgrounds on social icons. ([37940](https://github.com/WordPress/gutenberg/pull/37940))
 
 #### Components
 
-*   CustomSelectControl: Add hints example to storybook. ([38056](https://github.com/WordPress/gutenberg/pull/38056))
-*   ToolsPanel: Add CSS classes to first and last displayed ToolsPanelItems. ([37546](https://github.com/WordPress/gutenberg/pull/37546))
-*   `Navigator`: Add basic location history. ([37416](https://github.com/WordPress/gutenberg/pull/37416))
-*   Add: Hover and Selected states to the palette editor. ([37962](https://github.com/WordPress/gutenberg/pull/37962))
-*   Update gray color palette to match base styles. ([38109](https://github.com/WordPress/gutenberg/pull/38109))
+-   CustomSelectControl: Add hints example to storybook. ([38056](https://github.com/WordPress/gutenberg/pull/38056))
+-   ToolsPanel: Add CSS classes to first and last displayed ToolsPanelItems. ([37546](https://github.com/WordPress/gutenberg/pull/37546))
+-   `Navigator`: Add basic location history. ([37416](https://github.com/WordPress/gutenberg/pull/37416))
+-   Add: Hover and Selected states to the palette editor. ([37962](https://github.com/WordPress/gutenberg/pull/37962))
+-   Update gray color palette to match base styles. ([38109](https://github.com/WordPress/gutenberg/pull/38109))
 
 #### Post Editor
 
-*   Post Lock Modal: Update avatar size. ([38040](https://github.com/WordPress/gutenberg/pull/38040))
-*   Post Lock: Adjust avatar design and update message. ([37979](https://github.com/WordPress/gutenberg/pull/37979))
-*   Block styles: Remove box-sizing rule on Post Editor container to achieve editor/frontend parity. ([37902](https://github.com/WordPress/gutenberg/pull/37902))
+-   Post Lock Modal: Update avatar size. ([38040](https://github.com/WordPress/gutenberg/pull/38040))
+-   Post Lock: Adjust avatar design and update message. ([37979](https://github.com/WordPress/gutenberg/pull/37979))
+-   Block styles: Remove box-sizing rule on Post Editor container to achieve editor/frontend parity. ([37902](https://github.com/WordPress/gutenberg/pull/37902))
 
 #### Block Editor
 
-*   Buttons: Preserve styling from adjacent button blocks when inserting a new button block. ([37905](https://github.com/WordPress/gutenberg/pull/37905))
-*   Identify the site frontpage in link UI search results. ([36493](https://github.com/WordPress/gutenberg/pull/36493))
-*   Rich text: Use file on internal dependencies. ([38005](https://github.com/WordPress/gutenberg/pull/38005))
-*   Transform pasted div tags to p tags. ([38042](https://github.com/WordPress/gutenberg/pull/38042))
+-   Buttons: Preserve styling from adjacent button blocks when inserting a new button block. ([37905](https://github.com/WordPress/gutenberg/pull/37905))
+-   Identify the site frontpage in link UI search results. ([36493](https://github.com/WordPress/gutenberg/pull/36493))
+-   Rich text: Use file on internal dependencies. ([38005](https://github.com/WordPress/gutenberg/pull/38005))
+-   Transform pasted div tags to p tags. ([38042](https://github.com/WordPress/gutenberg/pull/38042))
 
 #### Site Editor
 
-*   Update template home, front-page, and search template descriptions. ([38132](https://github.com/WordPress/gutenberg/pull/38132))
-*   Add: Copy all content to edit site. ([37781](https://github.com/WordPress/gutenberg/pull/37781))
+-   Update template home, front-page, and search template descriptions. ([38132](https://github.com/WordPress/gutenberg/pull/38132))
+-   Add: Copy all content to edit site. ([37781](https://github.com/WordPress/gutenberg/pull/37781))
 
 #### Global Styles
 
-*   Load the global styles before the theme styles in the editor. ([37885](https://github.com/WordPress/gutenberg/pull/37885))
-*   Duotone: Allow users to specify custom filters. ([38055](https://github.com/WordPress/gutenberg/pull/38055))
-*   Enable alpha on Block Inspector Color ToolsPanel. ([37731](https://github.com/WordPress/gutenberg/pull/37731))
+-   Load the global styles before the theme styles in the editor. ([37885](https://github.com/WordPress/gutenberg/pull/37885))
+-   Duotone: Allow users to specify custom filters. ([38055](https://github.com/WordPress/gutenberg/pull/38055))
+-   Enable alpha on Block Inspector Color ToolsPanel. ([37731](https://github.com/WordPress/gutenberg/pull/37731))
 
 #### Internationalization
 
-*   i18n: Create new function `addLocaleData` to merge domain configuration. ([37704](https://github.com/WordPress/gutenberg/pull/37704))
+-   i18n: Create new function `addLocaleData` to merge domain configuration. ([37704](https://github.com/WordPress/gutenberg/pull/37704))
 
 #### REST API
 
-*   [Global Styles]: Add REST API endpoint to fetch variations. ([38124](https://github.com/WordPress/gutenberg/pull/38124))
+-   [Global Styles]: Add REST API endpoint to fetch variations. ([38124](https://github.com/WordPress/gutenberg/pull/38124))
 
 #### WP ENV
 
-*   wp-env: Add install-path command. ([35638](https://github.com/WordPress/gutenberg/pull/35638))
+-   wp-env: Add install-path command. ([35638](https://github.com/WordPress/gutenberg/pull/35638))
 
 ### Bug Fixes
 
 #### Block Library
 
-*   Add classic menus to menu switcher. ([38168](https://github.com/WordPress/gutenberg/pull/38168))
-*   Always allow accessing edit.php?post_type=wp_navigation page. ([38170](https://github.com/WordPress/gutenberg/pull/38170))
-*   Fix Post Date block escaping of date HTML. ([38023](https://github.com/WordPress/gutenberg/pull/38023))
-*   Fix duotone render in non-fse themes. ([37954](https://github.com/WordPress/gutenberg/pull/37954))
-*   Social Icons: Fix color picker bug when set to Logos Only. ([38006](https://github.com/WordPress/gutenberg/pull/38006))
-*   Temporarily remove text decoration from Nav block. ([37963](https://github.com/WordPress/gutenberg/pull/37963))
-*   [Query Loop]: Reorganise inspector controls + `order` selection bug. ([37949](https://github.com/WordPress/gutenberg/pull/37949))
-*   Revert "Late escape RSS block (#37878)". ([38117](https://github.com/WordPress/gutenberg/pull/38117))
-*   Fix missing default `align-items` when items are oriented vertically in `flex` layout. ([38069](https://github.com/WordPress/gutenberg/pull/38069))
-*   Update `micromodal` to 0.4.10 to fix navigation close button. ([38032](https://github.com/WordPress/gutenberg/pull/38032))
+-   Add classic menus to menu switcher. ([38168](https://github.com/WordPress/gutenberg/pull/38168))
+-   Always allow accessing edit.php?post_type=wp_navigation page. ([38170](https://github.com/WordPress/gutenberg/pull/38170))
+-   Fix Post Date block escaping of date HTML. ([38023](https://github.com/WordPress/gutenberg/pull/38023))
+-   Fix duotone render in non-fse themes. ([37954](https://github.com/WordPress/gutenberg/pull/37954))
+-   Social Icons: Fix color picker bug when set to Logos Only. ([38006](https://github.com/WordPress/gutenberg/pull/38006))
+-   Temporarily remove text decoration from Nav block. ([37963](https://github.com/WordPress/gutenberg/pull/37963))
+-   [Query Loop]: Reorganise inspector controls + `order` selection bug. ([37949](https://github.com/WordPress/gutenberg/pull/37949))
+-   Revert "Late escape RSS block (#37878)". ([38117](https://github.com/WordPress/gutenberg/pull/38117))
+-   Fix missing default `align-items` when items are oriented vertically in `flex` layout. ([38069](https://github.com/WordPress/gutenberg/pull/38069))
+-   Update `micromodal` to 0.4.10 to fix navigation close button. ([38032](https://github.com/WordPress/gutenberg/pull/38032))
 
 #### Site Editor
 
-*   Fix empty gray circle when site has no logo on template list page. ([37474](https://github.com/WordPress/gutenberg/pull/37474))
-*   Fix hiding the bottom of tablet/mobile preview in Site Editor. ([38019](https://github.com/WordPress/gutenberg/pull/38019))
-*   Fix resizable box scrollbars in blocks. ([38123](https://github.com/WordPress/gutenberg/pull/38123))
-*   Override Site Editor URLs to use plugin page. ([38232](https://github.com/WordPress/gutenberg/pull/38232))
-*   Restore ?styles=open functionality. ([38093](https://github.com/WordPress/gutenberg/pull/38093))
-*   Site Editor: Fix Inserter classes. ([38112](https://github.com/WordPress/gutenberg/pull/38112))
+-   Fix empty gray circle when site has no logo on template list page. ([37474](https://github.com/WordPress/gutenberg/pull/37474))
+-   Fix hiding the bottom of tablet/mobile preview in Site Editor. ([38019](https://github.com/WordPress/gutenberg/pull/38019))
+-   Fix resizable box scrollbars in blocks. ([38123](https://github.com/WordPress/gutenberg/pull/38123))
+-   Override Site Editor URLs to use plugin page. ([38232](https://github.com/WordPress/gutenberg/pull/38232))
+-   Restore ?styles=open functionality. ([38093](https://github.com/WordPress/gutenberg/pull/38093))
+-   Site Editor: Fix Inserter classes. ([38112](https://github.com/WordPress/gutenberg/pull/38112))
 
 #### Block Editor
 
-*   Fix pattern preview expanding height and scrollbar issues. ([38175](https://github.com/WordPress/gutenberg/pull/38175))
-*   Remove warning for enqueued styles in Editor. ([37937](https://github.com/WordPress/gutenberg/pull/37937))
-*   Fix draft previews. ([37952](https://github.com/WordPress/gutenberg/pull/37952))
-*   Add context to font style and font weight related translation strings. ([37939](https://github.com/WordPress/gutenberg/pull/37939))
+-   Fix pattern preview expanding height and scrollbar issues. ([38175](https://github.com/WordPress/gutenberg/pull/38175))
+-   Remove warning for enqueued styles in Editor. ([37937](https://github.com/WordPress/gutenberg/pull/37937))
+-   Fix draft previews. ([37952](https://github.com/WordPress/gutenberg/pull/37952))
+-   Add context to font style and font weight related translation strings. ([37939](https://github.com/WordPress/gutenberg/pull/37939))
 
 #### Post Editor
 
-*   Editor: Fix post lock data inconsistency. ([37914](https://github.com/WordPress/gutenberg/pull/37914))
-*   Fix template queries. ([38070](https://github.com/WordPress/gutenberg/pull/38070))
+-   Editor: Fix post lock data inconsistency. ([37914](https://github.com/WordPress/gutenberg/pull/37914))
+-   Fix template queries. ([38070](https://github.com/WordPress/gutenberg/pull/38070))
 
 #### Block Library
 
-*   Latest Posts: Fix featured image alignment label position. ([38125](https://github.com/WordPress/gutenberg/pull/38125))
-*   Remove the aria-label from the site title block. ([38432](https://github.com/WordPress/gutenberg/pull/38432))
+-   Latest Posts: Fix featured image alignment label position. ([38125](https://github.com/WordPress/gutenberg/pull/38125))
+-   Remove the aria-label from the site title block. ([38432](https://github.com/WordPress/gutenberg/pull/38432))
 
 #### Components
 
-*   Increase ConfirmDialog overlay's z-index to render above popovers. ([37959](https://github.com/WordPress/gutenberg/pull/37959))
-*   Label components: Improve consistency by setting to 8px margin-bottom. ([37844](https://github.com/WordPress/gutenberg/pull/37844))
-*   RangeControl: Fix space between icons and rail. ([36935](https://github.com/WordPress/gutenberg/pull/36935))
-*   `SelectControl`: Mark the `children` prop as optional. ([37872](https://github.com/WordPress/gutenberg/pull/37872))
-*   `ToggleGroupControl`: Remove animated backdrop. ([38008](https://github.com/WordPress/gutenberg/pull/38008))
+-   Increase ConfirmDialog overlay's z-index to render above popovers. ([37959](https://github.com/WordPress/gutenberg/pull/37959))
+-   Label components: Improve consistency by setting to 8px margin-bottom. ([37844](https://github.com/WordPress/gutenberg/pull/37844))
+-   RangeControl: Fix space between icons and rail. ([36935](https://github.com/WordPress/gutenberg/pull/36935))
+-   `SelectControl`: Mark the `children` prop as optional. ([37872](https://github.com/WordPress/gutenberg/pull/37872))
+-   `ToggleGroupControl`: Remove animated backdrop. ([38008](https://github.com/WordPress/gutenberg/pull/38008))
 
 #### Design Tools
 
-*   Fix: Double border on palette editor. ([38035](https://github.com/WordPress/gutenberg/pull/38035))
-*   Fix: PanelColorSettings renders an empty when a color setting is falsy. ([38029](https://github.com/WordPress/gutenberg/pull/38029))
+-   Fix: Double border on palette editor. ([38035](https://github.com/WordPress/gutenberg/pull/38035))
+-   Fix: PanelColorSettings renders an empty when a color setting is falsy. ([38029](https://github.com/WordPress/gutenberg/pull/38029))
 
 #### Accessibility
 
-*   Make sure when on last block focus cannot enter the block. ([37965](https://github.com/WordPress/gutenberg/pull/37965))
-*   Tree Grid: Fix keyboard navigation for expand/collapse table rows in Firefox. ([37983](https://github.com/WordPress/gutenberg/pull/37983))
+-   Make sure when on last block focus cannot enter the block. ([37965](https://github.com/WordPress/gutenberg/pull/37965))
+-   Tree Grid: Fix keyboard navigation for expand/collapse table rows in Firefox. ([37983](https://github.com/WordPress/gutenberg/pull/37983))
 
 #### Data API
 
-*   Load the entities list using the view context. ([37685](https://github.com/WordPress/gutenberg/pull/37685))
-*   Fix inconsistent response when preloading OPTIONS type requests. ([38051](https://github.com/WordPress/gutenberg/pull/38051))
+-   Load the entities list using the view context. ([37685](https://github.com/WordPress/gutenberg/pull/37685))
+-   Fix inconsistent response when preloading OPTIONS type requests. ([38051](https://github.com/WordPress/gutenberg/pull/38051))
 
 #### Widgets Editor
 
-*   Fix empty secondary sidebar overlapping widget editor content on mobile viewports. ([38017](https://github.com/WordPress/gutenberg/pull/38017))
+-   Fix empty secondary sidebar overlapping widget editor content on mobile viewports. ([38017](https://github.com/WordPress/gutenberg/pull/38017))
 
 #### Developer Tooling
 
-*   Docgen/stop crashing on missing return types. ([37929](https://github.com/WordPress/gutenberg/pull/37929))
-*   Add temporary workaround to fix broken common js import of mini-css-extract-plugin. ([38004](https://github.com/WordPress/gutenberg/pull/38004))
-*   Fix back button aria name in customizing widgets tests. ([38195](https://github.com/WordPress/gutenberg/pull/38195))
+-   Docgen/stop crashing on missing return types. ([37929](https://github.com/WordPress/gutenberg/pull/37929))
+-   Add temporary workaround to fix broken common js import of mini-css-extract-plugin. ([38004](https://github.com/WordPress/gutenberg/pull/38004))
+-   Fix back button aria name in customizing widgets tests. ([38195](https://github.com/WordPress/gutenberg/pull/38195))
 
 #### Mobile
 
-*   Mobile - Highlight text - Force format for some edge cases. ([37915](https://github.com/WordPress/gutenberg/pull/37915))
-*   Send non-deprecated language tags from Android in initialProps. ([37565](https://github.com/WordPress/gutenberg/pull/37565))
-*   Wrap long cell labels on Android. ([37993](https://github.com/WordPress/gutenberg/pull/37993))
+-   Mobile - Highlight text - Force format for some edge cases. ([37915](https://github.com/WordPress/gutenberg/pull/37915))
+-   Send non-deprecated language tags from Android in initialProps. ([37565](https://github.com/WordPress/gutenberg/pull/37565))
+-   Wrap long cell labels on Android. ([37993](https://github.com/WordPress/gutenberg/pull/37993))
 
 ### Performance
 
 #### Plugin
 
-*   Don't use WP_Query::Get_posts directly. ([38104](https://github.com/WordPress/gutenberg/pull/38104))
+-   Don't use WP_Query::Get_posts directly. ([38104](https://github.com/WordPress/gutenberg/pull/38104))
 
 #### Components
 
-*   ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders. ([38037](https://github.com/WordPress/gutenberg/pull/38037))
+-   ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders. ([38037](https://github.com/WordPress/gutenberg/pull/38037))
 
 ### Documentation
 
-*   Add anchors to all terms of the glossary. ([38073](https://github.com/WordPress/gutenberg/pull/38073))
-*   Add documentation for useBlockEditContext hook. ([36299](https://github.com/WordPress/gutenberg/pull/36299))
-*   Add note about "local styles" in the glossary. ([38083](https://github.com/WordPress/gutenberg/pull/38083))
-*   Add some terms related to styles to the glossary. ([38076](https://github.com/WordPress/gutenberg/pull/38076))
-*   Add theme.json v1 reference and v1 to v2 migration documentation. ([37886](https://github.com/WordPress/gutenberg/pull/37886))
-*   Block API Reference: Fix 'isSelected' property type. ([38161](https://github.com/WordPress/gutenberg/pull/38161))
-*   Capitalise the GitHub wordmark correctly in the Wordpress Gutenberg project. ([38092](https://github.com/WordPress/gutenberg/pull/38092))
-*   Component: Update color-picker documentation. ([38010](https://github.com/WordPress/gutenberg/pull/38010))
-*   Document that `__experimentalSelector` requires server-side block registration. ([37984](https://github.com/WordPress/gutenberg/pull/37984))
-*   Document the Global Styles Presets. ([38129](https://github.com/WordPress/gutenberg/pull/38129))
-*   Fix documentation regression. ([38235](https://github.com/WordPress/gutenberg/pull/38235))
-*   Include partialRight import from lodash in DimensionControl example. ([38088](https://github.com/WordPress/gutenberg/pull/38088))
-*   Multiple typos fixed. ([38071](https://github.com/WordPress/gutenberg/pull/38071))
-*   Scripts: Corrected "npm start:Hot" in the README file. ([38178](https://github.com/WordPress/gutenberg/pull/38178))
-*   Update Block Supports Documentation to better reflect how it works. ([37847](https://github.com/WordPress/gutenberg/pull/37847))
-*   Update BlockPreview component readme. ([38209](https://github.com/WordPress/gutenberg/pull/38209))
-*   Update versions for 5.8.2 and 5.8.3\. ([37924](https://github.com/WordPress/gutenberg/pull/37924))
-*   Use consistent punctuation, capitalization in templateParts documentation. ([38193](https://github.com/WordPress/gutenberg/pull/38193))
-*   [Type] Documentation Updating Faq.md typo. ([38154](https://github.com/WordPress/gutenberg/pull/38154))
+-   Add anchors to all terms of the glossary. ([38073](https://github.com/WordPress/gutenberg/pull/38073))
+-   Add documentation for useBlockEditContext hook. ([36299](https://github.com/WordPress/gutenberg/pull/36299))
+-   Add note about "local styles" in the glossary. ([38083](https://github.com/WordPress/gutenberg/pull/38083))
+-   Add some terms related to styles to the glossary. ([38076](https://github.com/WordPress/gutenberg/pull/38076))
+-   Add theme.json v1 reference and v1 to v2 migration documentation. ([37886](https://github.com/WordPress/gutenberg/pull/37886))
+-   Block API Reference: Fix 'isSelected' property type. ([38161](https://github.com/WordPress/gutenberg/pull/38161))
+-   Capitalise the GitHub wordmark correctly in the Wordpress Gutenberg project. ([38092](https://github.com/WordPress/gutenberg/pull/38092))
+-   Component: Update color-picker documentation. ([38010](https://github.com/WordPress/gutenberg/pull/38010))
+-   Document that `__experimentalSelector` requires server-side block registration. ([37984](https://github.com/WordPress/gutenberg/pull/37984))
+-   Document the Global Styles Presets. ([38129](https://github.com/WordPress/gutenberg/pull/38129))
+-   Fix documentation regression. ([38235](https://github.com/WordPress/gutenberg/pull/38235))
+-   Include partialRight import from lodash in DimensionControl example. ([38088](https://github.com/WordPress/gutenberg/pull/38088))
+-   Multiple typos fixed. ([38071](https://github.com/WordPress/gutenberg/pull/38071))
+-   Scripts: Corrected "npm start:Hot" in the README file. ([38178](https://github.com/WordPress/gutenberg/pull/38178))
+-   Update Block Supports Documentation to better reflect how it works. ([37847](https://github.com/WordPress/gutenberg/pull/37847))
+-   Update BlockPreview component readme. ([38209](https://github.com/WordPress/gutenberg/pull/38209))
+-   Update versions for 5.8.2 and 5.8.3\. ([37924](https://github.com/WordPress/gutenberg/pull/37924))
+-   Use consistent punctuation, capitalization in templateParts documentation. ([38193](https://github.com/WordPress/gutenberg/pull/38193))
+-   [Type] Documentation Updating Faq.md typo. ([38154](https://github.com/WordPress/gutenberg/pull/38154))
 
 ### Code Quality
 
-*   Compose: Rework types of createHigherOrderComponent for closer match to API. ([37795](https://github.com/WordPress/gutenberg/pull/37795))
-*   Docblock typos. ([38067](https://github.com/WordPress/gutenberg/pull/38067))
-*   Fix two inline typos. ([38048](https://github.com/WordPress/gutenberg/pull/38048))
-*   Testing: Upgrade Jest to v27\. ([33287](https://github.com/WordPress/gutenberg/pull/33287))
-*   Add a missing `@since` tag. ([38151](https://github.com/WordPress/gutenberg/pull/38151))
-*   Ignore local environment .tool-versions configuration file. ([38013](https://github.com/WordPress/gutenberg/pull/38013))
-*   Add allowed-plugins in composer configuration. ([38085](https://github.com/WordPress/gutenberg/pull/38085))
-*   Site editor - try redirecting to homepage before the react render. ([37248](https://github.com/WordPress/gutenberg/pull/37248))
-
-#### Block Library
-
-*   Allow for HTML in `get_the_title`. ([38145](https://github.com/WordPress/gutenberg/pull/38145))
-*   Fix double escaping in blocks. ([37985](https://github.com/WordPress/gutenberg/pull/37985))
-*   Late escape Latest Posts block. ([37866](https://github.com/WordPress/gutenberg/pull/37866))
-*   Late escape Navigation blocks. ([37870](https://github.com/WordPress/gutenberg/pull/37870))
-*   Late escape Post blocks. ([37876](https://github.com/WordPress/gutenberg/pull/37876))
-*   Late escape Social block. ([37881](https://github.com/WordPress/gutenberg/pull/37881))
-*   Late escape comment blocks. ([37860](https://github.com/WordPress/gutenberg/pull/37860))
-*   Late escape comments link block. ([37875](https://github.com/WordPress/gutenberg/pull/37875))
-*   Late escape latest comments block. ([37865](https://github.com/WordPress/gutenberg/pull/37865))
-*   Late escape post author blocks. ([37874](https://github.com/WordPress/gutenberg/pull/37874))
-*   Late escape site blocks. ([37880](https://github.com/WordPress/gutenberg/pull/37880))
-*   Spacer: No need to use withDispatch HOC. ([38206](https://github.com/WordPress/gutenberg/pull/38206))
-
-### Tools
+-   Compose: Rework types of createHigherOrderComponent for closer match to API. ([37795](https://github.com/WordPress/gutenberg/pull/37795))
+-   Docblock typos. ([38067](https://github.com/WordPress/gutenberg/pull/38067))
+-   Fix two inline typos. ([38048](https://github.com/WordPress/gutenberg/pull/38048))
+-   Testing: Upgrade Jest to v27\. ([33287](https://github.com/WordPress/gutenberg/pull/33287))
+-   Add a missing `@since` tag. ([38151](https://github.com/WordPress/gutenberg/pull/38151))
+-   Ignore local environment .tool-versions configuration file. ([38013](https://github.com/WordPress/gutenberg/pull/38013))
+-   Add allowed-plugins in composer configuration. ([38085](https://github.com/WordPress/gutenberg/pull/38085))
+-   Site editor - try redirecting to homepage before the react render. ([37248](https://github.com/WordPress/gutenberg/pull/37248))
 
-*   Bump dot-prop from 4.2.0 to 4.2.1\. ([38101](https://github.com/WordPress/gutenberg/pull/38101))
-*   Bump ini from 1.3.5 to 1.3.8\. ([38106](https://github.com/WordPress/gutenberg/pull/38106))
-*   Bump tar from 4.4.13 to 4.4.19\. ([37917](https://github.com/WordPress/gutenberg/pull/37917))
-*   Bump tree-kill from 1.2.0 to 1.2.2\. ([38102](https://github.com/WordPress/gutenberg/pull/38102))
-*   Bump trim-off-newlines from 1.0.1 to 1.0.3\. ([38095](https://github.com/WordPress/gutenberg/pull/38095))
-*   Update MiniCSSExtractPlugin to version 2.5.1\. ([38027](https://github.com/WordPress/gutenberg/pull/38027))
-*   Bump follow-redirects from 1.14.1 to 1.14.7\. ([37957](https://github.com/WordPress/gutenberg/pull/37957))
-*   Bump handlebars from 4.7.6 to 4.7.7\. ([38054](https://github.com/WordPress/gutenberg/pull/38054))
-*   Bump path-parse from 1.0.5 to 1.0.7\. ([37990](https://github.com/WordPress/gutenberg/pull/37990))
-*   Bump tmpl from 1.0.4 to 1.0.5\. ([37916](https://github.com/WordPress/gutenberg/pull/37916))
-*   Add '.git-blame-ignore-revs' to the project. ([37822](https://github.com/WordPress/gutenberg/pull/37822))
-*   Require stylelint v14 for stylelint configuration and scripts. ([38091](https://github.com/WordPress/gutenberg/pull/38091))
-*   Tested up to WP 5.9\. ([38162](https://github.com/WordPress/gutenberg/pull/38162))
+#### Block Library
 
-#### Testing
+-   Allow for HTML in `get_the_title`. ([38145](https://github.com/WordPress/gutenberg/pull/38145))
+-   Fix double escaping in blocks. ([37985](https://github.com/WordPress/gutenberg/pull/37985))
+-   Late escape Latest Posts block. ([37866](https://github.com/WordPress/gutenberg/pull/37866))
+-   Late escape Navigation blocks. ([37870](https://github.com/WordPress/gutenberg/pull/37870))
+-   Late escape Post blocks. ([37876](https://github.com/WordPress/gutenberg/pull/37876))
+-   Late escape Social block. ([37881](https://github.com/WordPress/gutenberg/pull/37881))
+-   Late escape comment blocks. ([37860](https://github.com/WordPress/gutenberg/pull/37860))
+-   Late escape comments link block. ([37875](https://github.com/WordPress/gutenberg/pull/37875))
+-   Late escape latest comments block. ([37865](https://github.com/WordPress/gutenberg/pull/37865))
+-   Late escape post author blocks. ([37874](https://github.com/WordPress/gutenberg/pull/37874))
+-   Late escape site blocks. ([37880](https://github.com/WordPress/gutenberg/pull/37880))
+-   Spacer: No need to use withDispatch HOC. ([38206](https://github.com/WordPress/gutenberg/pull/38206))
 
-*   Fix flaky Nav block user permissions end-to-end test. ([38025](https://github.com/WordPress/gutenberg/pull/38025))
-*   Fix flaky classic block conversion undo test. ([37933](https://github.com/WordPress/gutenberg/pull/37933))
-*   Improve flaky draft creation navigation block end-to-end test. ([37931](https://github.com/WordPress/gutenberg/pull/37931))
-*   Skip flaky nav permissions test until fixed. ([38099](https://github.com/WordPress/gutenberg/pull/38099))
-*   [docgen] Refactor code to use require() instead of JSON.parse(fs.readFileSync()). ([38148](https://github.com/WordPress/gutenberg/pull/38148))
-*   end-to-end Tests: Add coverage for reusable blocks save button state regression. ([33151](https://github.com/WordPress/gutenberg/pull/33151))
-*   Add new Testing Instructions section to PR template. ([38147](https://github.com/WordPress/gutenberg/pull/38147))
+### Tools
 
+-   Bump dot-prop from 4.2.0 to 4.2.1\. ([38101](https://github.com/WordPress/gutenberg/pull/38101))
+-   Bump ini from 1.3.5 to 1.3.8\. ([38106](https://github.com/WordPress/gutenberg/pull/38106))
+-   Bump tar from 4.4.13 to 4.4.19\. ([37917](https://github.com/WordPress/gutenberg/pull/37917))
+-   Bump tree-kill from 1.2.0 to 1.2.2\. ([38102](https://github.com/WordPress/gutenberg/pull/38102))
+-   Bump trim-off-newlines from 1.0.1 to 1.0.3\. ([38095](https://github.com/WordPress/gutenberg/pull/38095))
+-   Update MiniCSSExtractPlugin to version 2.5.1\. ([38027](https://github.com/WordPress/gutenberg/pull/38027))
+-   Bump follow-redirects from 1.14.1 to 1.14.7\. ([37957](https://github.com/WordPress/gutenberg/pull/37957))
+-   Bump handlebars from 4.7.6 to 4.7.7\. ([38054](https://github.com/WordPress/gutenberg/pull/38054))
+-   Bump path-parse from 1.0.5 to 1.0.7\. ([37990](https://github.com/WordPress/gutenberg/pull/37990))
+-   Bump tmpl from 1.0.4 to 1.0.5\. ([37916](https://github.com/WordPress/gutenberg/pull/37916))
+-   Add '.git-blame-ignore-revs' to the project. ([37822](https://github.com/WordPress/gutenberg/pull/37822))
+-   Require stylelint v14 for stylelint configuration and scripts. ([38091](https://github.com/WordPress/gutenberg/pull/38091))
+-   Tested up to WP 5.9\. ([38162](https://github.com/WordPress/gutenberg/pull/38162))
 
+#### Testing
 
+-   Fix flaky Nav block user permissions end-to-end test. ([38025](https://github.com/WordPress/gutenberg/pull/38025))
+-   Fix flaky classic block conversion undo test. ([37933](https://github.com/WordPress/gutenberg/pull/37933))
+-   Improve flaky draft creation navigation block end-to-end test. ([37931](https://github.com/WordPress/gutenberg/pull/37931))
+-   Skip flaky nav permissions test until fixed. ([38099](https://github.com/WordPress/gutenberg/pull/38099))
+-   [docgen] Refactor code to use require() instead of JSON.parse(fs.readFileSync()). ([38148](https://github.com/WordPress/gutenberg/pull/38148))
+-   end-to-end Tests: Add coverage for reusable blocks save button state regression. ([33151](https://github.com/WordPress/gutenberg/pull/33151))
+-   Add new Testing Instructions section to PR template. ([38147](https://github.com/WordPress/gutenberg/pull/38147))
 
 = 12.4.1 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Library
-- RSS: Reverts the late escape RSS block enhancement (#37878) to resolve an issue where raw HTML was shown to users of the RSS block (#38117)
 
+-   RSS: Reverts the late escape RSS block enhancement (#37878) to resolve an issue where raw HTML was shown to users of the RSS block (#38117)
 
 = 12.4.0 =
 
-
+## Changelog
 
 ### Enhancements
 
 #### Accessibility
-- Accessibility improvements for Block Inserter. ([37357](https://github.com/WordPress/gutenberg/pull/37357))
-- Try possibly better method for Block Inserter Search focus. ([37793](https://github.com/WordPress/gutenberg/pull/37793))
-- Accessibility improvements for List View Part 1. ([37798](https://github.com/WordPress/gutenberg/pull/37798))
-- Improve successful draft save notification for screen readers. ([37683](https://github.com/WordPress/gutenberg/pull/37683))
+
+-   Accessibility improvements for Block Inserter. ([37357](https://github.com/WordPress/gutenberg/pull/37357))
+-   Try possibly better method for Block Inserter Search focus. ([37793](https://github.com/WordPress/gutenberg/pull/37793))
+-   Accessibility improvements for List View Part 1. ([37798](https://github.com/WordPress/gutenberg/pull/37798))
+-   Improve successful draft save notification for screen readers. ([37683](https://github.com/WordPress/gutenberg/pull/37683))
 
 #### Block Library
-- Audio: Add uploading state. ([37739](https://github.com/WordPress/gutenberg/pull/37739))
-- Post Excerpt: Add to and from Post Content transformations. ([37651](https://github.com/WordPress/gutenberg/pull/37651))
-- Search: Improve escaping on the search block. ([37829](https://github.com/WordPress/gutenberg/pull/37829))
-- Page List: Add menu-item-home class to Navigation for front page. ([37301](https://github.com/WordPress/gutenberg/pull/37301))
-- Tag Cloud: Add outline style. ([37092](https://github.com/WordPress/gutenberg/pull/37092))
+
+-   Audio: Add uploading state. ([37739](https://github.com/WordPress/gutenberg/pull/37739))
+-   Post Excerpt: Add to and from Post Content transformations. ([37651](https://github.com/WordPress/gutenberg/pull/37651))
+-   Search: Improve escaping on the search block. ([37829](https://github.com/WordPress/gutenberg/pull/37829))
+-   Page List: Add menu-item-home class to Navigation for front page. ([37301](https://github.com/WordPress/gutenberg/pull/37301))
+-   Tag Cloud: Add outline style. ([37092](https://github.com/WordPress/gutenberg/pull/37092))
 
 #### Components
-- ExternalLink: Update icon to be smaller, have no margin. ([37859](https://github.com/WordPress/gutenberg/pull/37859))
+
+-   ExternalLink: Update icon to be smaller, have no margin. ([37859](https://github.com/WordPress/gutenberg/pull/37859))
 
 #### Post Editor
-- PostLockedModal: Display preview link as part of the text. ([37852](https://github.com/WordPress/gutenberg/pull/37852))
-- Try: Polish post takeover modal. ([37821](https://github.com/WordPress/gutenberg/pull/37821))
-- Suggest picking a category on the pre-publish panel. ([37703](https://github.com/WordPress/gutenberg/pull/37703))
+
+-   PostLockedModal: Display preview link as part of the text. ([37852](https://github.com/WordPress/gutenberg/pull/37852))
+-   Try: Polish post takeover modal. ([37821](https://github.com/WordPress/gutenberg/pull/37821))
+-   Suggest picking a category on the pre-publish panel. ([37703](https://github.com/WordPress/gutenberg/pull/37703))
 
 #### Block Editor
-- Inserter: Update categories for theme blocks. ([37723](https://github.com/WordPress/gutenberg/pull/37723))
+
+-   Inserter: Update categories for theme blocks. ([37723](https://github.com/WordPress/gutenberg/pull/37723))
 
 #### Site Editor
-- Add keyboard shortcut help modal. ([37650](https://github.com/WordPress/gutenberg/pull/37650))
-- Update copy on Snackbar that appears when a template is deleted. ([37888](https://github.com/WordPress/gutenberg/pull/37888))
+
+-   Add keyboard shortcut help modal. ([37650](https://github.com/WordPress/gutenberg/pull/37650))
+-   Update copy on Snackbar that appears when a template is deleted. ([37888](https://github.com/WordPress/gutenberg/pull/37888))
 
 #### Icons
-- Add unlock icon. ([37855](https://github.com/WordPress/gutenberg/pull/37855))
-
-### Bug Fixes
-
-#### Block Library
-- Code: Remove color from code theme.scss. ([37816](https://github.com/WordPress/gutenberg/pull/37816))
-- Code: Try: Polish code styles to properly apply border properties. ([37818](https://github.com/WordPress/gutenberg/pull/37818))
-- Columns: Avoid using CSS variables for block gap styles. ([37436](https://github.com/WordPress/gutenberg/pull/37436))
-- Comments Pagination Next: Fix accidental division by zero. ([37788](https://github.com/WordPress/gutenberg/pull/37788))
-- Gallery: Pass any custom attributes through the gallery v2 migration script. ([37812](https://github.com/WordPress/gutenberg/pull/37812))
-- Gallery: Remove warning notice about mobile version required. ([37842](https://github.com/WordPress/gutenberg/pull/37842))
-- Navigation: HTML tags like inline images in nav links break submenu layout. ([37665](https://github.com/WordPress/gutenberg/pull/37665))
-- Navigation: Set the default for --navigation-layout-align to "flex-start" when using vertical orientation. ([37696](https://github.com/WordPress/gutenberg/pull/37696))
-- Navigation: Fix overlay menu errant focus style on scrim. ([37824](https://github.com/WordPress/gutenberg/pull/37824))
-- Page List: Show UI warning if Pages cannot be retrieved in Page List block. ([37486](https://github.com/WordPress/gutenberg/pull/37486))
-- Page List: Update page list flex variables to match navigation. ([37718](https://github.com/WordPress/gutenberg/pull/37718))
-- Post Comments: Tidy up Post Comments default styling. ([37709](https://github.com/WordPress/gutenberg/pull/37709))
-- Post Content: Check for nextpage to display page links for paginated posts. ([37672](https://github.com/WordPress/gutenberg/pull/37672))
-- Post Excerpt: Fix previews. ([37648](https://github.com/WordPress/gutenberg/pull/37648))
-- Query Loop: Use `gap` for the `grid` view. ([37711](https://github.com/WordPress/gutenberg/pull/37711))
-- Query Loop: Check for `zero` `queryId` on initialization. ([37867](https://github.com/WordPress/gutenberg/pull/37867))
-- Site logo: Fix range control on landscape logos. ([37733](https://github.com/WordPress/gutenberg/pull/37733))
-- Simplify and unify a few modal dialogs. ([37857](https://github.com/WordPress/gutenberg/pull/37857))
-- Fix enqueueing additional styles for blocks only when rendered. ([37848](https://github.com/WordPress/gutenberg/pull/37848))
-- Fix typo (hanle -> handle). ([37849](https://github.com/WordPress/gutenberg/pull/37849))
-- Revert "[Paragraph Block] add font family support". ([37815](https://github.com/WordPress/gutenberg/pull/37815))
+
+-   Add unlock icon. ([37855](https://github.com/WordPress/gutenberg/pull/37855))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Code: Remove color from code theme.scss. ([37816](https://github.com/WordPress/gutenberg/pull/37816))
+-   Code: Try: Polish code styles to properly apply border properties. ([37818](https://github.com/WordPress/gutenberg/pull/37818))
+-   Columns: Avoid using CSS variables for block gap styles. ([37436](https://github.com/WordPress/gutenberg/pull/37436))
+-   Comments Pagination Next: Fix accidental division by zero. ([37788](https://github.com/WordPress/gutenberg/pull/37788))
+-   Gallery: Pass any custom attributes through the gallery v2 migration script. ([37812](https://github.com/WordPress/gutenberg/pull/37812))
+-   Gallery: Remove warning notice about mobile version required. ([37842](https://github.com/WordPress/gutenberg/pull/37842))
+-   Navigation: HTML tags like inline images in nav links break submenu layout. ([37665](https://github.com/WordPress/gutenberg/pull/37665))
+-   Navigation: Set the default for --navigation-layout-align to "flex-start" when using vertical orientation. ([37696](https://github.com/WordPress/gutenberg/pull/37696))
+-   Navigation: Fix overlay menu errant focus style on scrim. ([37824](https://github.com/WordPress/gutenberg/pull/37824))
+-   Page List: Show UI warning if Pages cannot be retrieved in Page List block. ([37486](https://github.com/WordPress/gutenberg/pull/37486))
+-   Page List: Update page list flex variables to match navigation. ([37718](https://github.com/WordPress/gutenberg/pull/37718))
+-   Post Comments: Tidy up Post Comments default styling. ([37709](https://github.com/WordPress/gutenberg/pull/37709))
+-   Post Content: Check for nextpage to display page links for paginated posts. ([37672](https://github.com/WordPress/gutenberg/pull/37672))
+-   Post Excerpt: Fix previews. ([37648](https://github.com/WordPress/gutenberg/pull/37648))
+-   Query Loop: Use `gap` for the `grid` view. ([37711](https://github.com/WordPress/gutenberg/pull/37711))
+-   Query Loop: Check for `zero` `queryId` on initialization. ([37867](https://github.com/WordPress/gutenberg/pull/37867))
+-   Site logo: Fix range control on landscape logos. ([37733](https://github.com/WordPress/gutenberg/pull/37733))
+-   Simplify and unify a few modal dialogs. ([37857](https://github.com/WordPress/gutenberg/pull/37857))
+-   Fix enqueueing additional styles for blocks only when rendered. ([37848](https://github.com/WordPress/gutenberg/pull/37848))
+-   Fix typo (hanle -> handle). ([37849](https://github.com/WordPress/gutenberg/pull/37849))
+-   Revert "[Paragraph Block] add font family support". ([37815](https://github.com/WordPress/gutenberg/pull/37815))
 
 #### Colors
-- Coloring panel is unusable in RTL. ([37644](https://github.com/WordPress/gutenberg/pull/37644))
-- Impossible to clear colors if color palettes are removed. ([37791](https://github.com/WordPress/gutenberg/pull/37791))
-- Use useCallback hook from @wordpress/elements in color-picker. ([37745](https://github.com/WordPress/gutenberg/pull/37745))
+
+-   Coloring panel is unusable in RTL. ([37644](https://github.com/WordPress/gutenberg/pull/37644))
+-   Impossible to clear colors if color palettes are removed. ([37791](https://github.com/WordPress/gutenberg/pull/37791))
+-   Use useCallback hook from @wordpress/elements in color-picker. ([37745](https://github.com/WordPress/gutenberg/pull/37745))
 
 #### Components
-- BaseControl: Fix VisualLabel styles. ([37747](https://github.com/WordPress/gutenberg/pull/37747))
-- ConfirmDialog: Use hooks from @wordpress/elements. ([37771](https://github.com/WordPress/gutenberg/pull/37771))
-- CustomSelectControl: Stop keypresses being caught by other elements when they happen. ([30557](https://github.com/WordPress/gutenberg/pull/30557))
+
+-   BaseControl: Fix VisualLabel styles. ([37747](https://github.com/WordPress/gutenberg/pull/37747))
+-   ConfirmDialog: Use hooks from @wordpress/elements. ([37771](https://github.com/WordPress/gutenberg/pull/37771))
+-   CustomSelectControl: Stop keypresses being caught by other elements when they happen. ([30557](https://github.com/WordPress/gutenberg/pull/30557))
 
 #### Post Editor
-- Restore canvas padding for classic themes. ([37741](https://github.com/WordPress/gutenberg/pull/37741))
+
+-   Restore canvas padding for classic themes. ([37741](https://github.com/WordPress/gutenberg/pull/37741))
 
 #### History
-- Fix broken 'Redo' by removing faulty logic for discarding unsaved Logo changes. ([37895](https://github.com/WordPress/gutenberg/pull/37895))
-- Fix redo after update/publish with transient edits. ([37840](https://github.com/WordPress/gutenberg/pull/37840))
+
+-   Fix broken 'Redo' by removing faulty logic for discarding unsaved Logo changes. ([37895](https://github.com/WordPress/gutenberg/pull/37895))
+-   Fix redo after update/publish with transient edits. ([37840](https://github.com/WordPress/gutenberg/pull/37840))
 
 #### Templates API
-- Fix Home template description typo. ([37843](https://github.com/WordPress/gutenberg/pull/37843))
-- Improve user experience with blocks editor when a block is not registered. ([37646](https://github.com/WordPress/gutenberg/pull/37646))
+
+-   Fix Home template description typo. ([37843](https://github.com/WordPress/gutenberg/pull/37843))
+-   Improve user experience with blocks editor when a block is not registered. ([37646](https://github.com/WordPress/gutenberg/pull/37646))
 
 #### Block Editor
-- Fix LinkPicker freeze when virtual keyboard is hidden. ([37782](https://github.com/WordPress/gutenberg/pull/37782))
-- RichText: Fix dead key input on Windows. ([37777](https://github.com/WordPress/gutenberg/pull/37777))
-- Link control: Translate empty link string. ([36975](https://github.com/WordPress/gutenberg/pull/36975))
-- Add `post-type-x` classname to iframe. ([37429](https://github.com/WordPress/gutenberg/pull/37429))
+
+-   Fix LinkPicker freeze when virtual keyboard is hidden. ([37782](https://github.com/WordPress/gutenberg/pull/37782))
+-   RichText: Fix dead key input on Windows. ([37777](https://github.com/WordPress/gutenberg/pull/37777))
+-   Link control: Translate empty link string. ([36975](https://github.com/WordPress/gutenberg/pull/36975))
+-   Add `post-type-x` classname to iframe. ([37429](https://github.com/WordPress/gutenberg/pull/37429))
 
 #### Global Styles
-- Reduce specificity of legacy font sizes defined by core. ([37819](https://github.com/WordPress/gutenberg/pull/37819))
+
+-   Reduce specificity of legacy font sizes defined by core. ([37819](https://github.com/WordPress/gutenberg/pull/37819))
 
 #### Accessibility
-- Fix aria-modal attribution with multiple navs on page. ([37813](https://github.com/WordPress/gutenberg/pull/37813))
+
+-   Fix aria-modal attribution with multiple navs on page. ([37813](https://github.com/WordPress/gutenberg/pull/37813))
 
 #### Template Editor
-- Template Mode: Trim long post titles in large viewports. ([37720](https://github.com/WordPress/gutenberg/pull/37720))
+
+-   Template Mode: Trim long post titles in large viewports. ([37720](https://github.com/WordPress/gutenberg/pull/37720))
 
 #### Site Editor
-- Add the "Help" link to the tools menu. ([37647](https://github.com/WordPress/gutenberg/pull/37647))
-- Contextualize "Export" string to differentiate it from other occurrences in WP Core. ([37660](https://github.com/WordPress/gutenberg/pull/37660))
 
+-   Add the "Help" link to the tools menu. ([37647](https://github.com/WordPress/gutenberg/pull/37647))
+-   Contextualize "Export" string to differentiate it from other occurrences in WP Core. ([37660](https://github.com/WordPress/gutenberg/pull/37660))
 
 ### Documentation
 
-- Block.json Schema: Update fontSize and lineHeight props. ([37853](https://github.com/WordPress/gutenberg/pull/37853))
-- Theme.json Schema: Fix appearanceTools in theme.json schema. ([37762](https://github.com/WordPress/gutenberg/pull/37762))
-- Theme.json Schema: Update theme.json schema to allow for per-block management of settings. ([36746](https://github.com/WordPress/gutenberg/pull/36746))
-- Add checkbox for updating schemas if appropriate. ([37780](https://github.com/WordPress/gutenberg/pull/37780))
-  - Fix issue template typo. ([37825](https://github.com/WordPress/gutenberg/pull/37825))
-- Add automated theme.json reference documentation. ([37569](https://github.com/WordPress/gutenberg/pull/37569))
-- Add link to block source for reference. ([37750](https://github.com/WordPress/gutenberg/pull/37750))
-- Add missing end tag for codetabs in stylesheet guide. ([37827](https://github.com/WordPress/gutenberg/pull/37827))
-- Fix broken URL on block variation page. ([37702](https://github.com/WordPress/gutenberg/pull/37702))
-- Fix type of saved $content. ([37688](https://github.com/WordPress/gutenberg/pull/37688))
-  - Fix type of saved content - part two. ([37740](https://github.com/WordPress/gutenberg/pull/37740))
-  - Fix PHPCS failure. ([37742](https://github.com/WordPress/gutenberg/pull/37742))
-- Update create block type how to guide for block.json. ([37674](https://github.com/WordPress/gutenberg/pull/37674))
-- Update stylesheets guide with using block.json file. ([37679](https://github.com/WordPress/gutenberg/pull/37679))
-- OSX Setup guide: Wrap `lts/*` in quotes for `nvm` commands. ([37722](https://github.com/WordPress/gutenberg/pull/37722))
-- Remove "experimental" from full site editing documentation. ([37655](https://github.com/WordPress/gutenberg/pull/37655))
-- Update copyright year to 2022 in `license.md`. ([37689](https://github.com/WordPress/gutenberg/pull/37689))
-- Update wp-plugin.md. ([37846](https://github.com/WordPress/gutenberg/pull/37846))
-- Updated ColorIndicator readme. ([37638](https://github.com/WordPress/gutenberg/pull/37638))
-- Update the Post Author block description. ([37836](https://github.com/WordPress/gutenberg/pull/37836))
-- Fixing broken links and adding colon. ([37664](https://github.com/WordPress/gutenberg/pull/37664))
-- Improve Gutenberg release documentation. ([37898](https://github.com/WordPress/gutenberg/pull/37898))
-
+-   Block.json Schema: Update fontSize and lineHeight props. ([37853](https://github.com/WordPress/gutenberg/pull/37853))
+-   Theme.json Schema: Fix appearanceTools in theme.json schema. ([37762](https://github.com/WordPress/gutenberg/pull/37762))
+-   Theme.json Schema: Update theme.json schema to allow for per-block management of settings. ([36746](https://github.com/WordPress/gutenberg/pull/36746))
+-   Add checkbox for updating schemas if appropriate. ([37780](https://github.com/WordPress/gutenberg/pull/37780))
+    -   Fix issue template typo. ([37825](https://github.com/WordPress/gutenberg/pull/37825))
+-   Add automated theme.json reference documentation. ([37569](https://github.com/WordPress/gutenberg/pull/37569))
+-   Add link to block source for reference. ([37750](https://github.com/WordPress/gutenberg/pull/37750))
+-   Add missing end tag for codetabs in stylesheet guide. ([37827](https://github.com/WordPress/gutenberg/pull/37827))
+-   Fix broken URL on block variation page. ([37702](https://github.com/WordPress/gutenberg/pull/37702))
+-   Fix type of saved $content. ([37688](https://github.com/WordPress/gutenberg/pull/37688))
+    -   Fix type of saved content - part two. ([37740](https://github.com/WordPress/gutenberg/pull/37740))
+    -   Fix PHPCS failure. ([37742](https://github.com/WordPress/gutenberg/pull/37742))
+-   Update create block type how to guide for block.json. ([37674](https://github.com/WordPress/gutenberg/pull/37674))
+-   Update stylesheets guide with using block.json file. ([37679](https://github.com/WordPress/gutenberg/pull/37679))
+-   OSX Setup guide: Wrap `lts/*` in quotes for `nvm` commands. ([37722](https://github.com/WordPress/gutenberg/pull/37722))
+-   Remove "experimental" from full site editing documentation. ([37655](https://github.com/WordPress/gutenberg/pull/37655))
+-   Update copyright year to 2022 in `license.md`. ([37689](https://github.com/WordPress/gutenberg/pull/37689))
+-   Update wp-plugin.md. ([37846](https://github.com/WordPress/gutenberg/pull/37846))
+-   Updated ColorIndicator readme. ([37638](https://github.com/WordPress/gutenberg/pull/37638))
+-   Update the Post Author block description. ([37836](https://github.com/WordPress/gutenberg/pull/37836))
+-   Fixing broken links and adding colon. ([37664](https://github.com/WordPress/gutenberg/pull/37664))
+-   Improve Gutenberg release documentation. ([37898](https://github.com/WordPress/gutenberg/pull/37898))
 
 ### Code Quality
 
-- Add the WP version in which some JS APIs will be removed. ([37854](https://github.com/WordPress/gutenberg/pull/37854))
+-   Add the WP version in which some JS APIs will be removed. ([37854](https://github.com/WordPress/gutenberg/pull/37854))
 
 #### Block Library
-- Late escape Categories block. ([37835](https://github.com/WordPress/gutenberg/pull/37835))
-- Late escape Page List block. ([37873](https://github.com/WordPress/gutenberg/pull/37873))
-- Late escape Query blocks. ([37877](https://github.com/WordPress/gutenberg/pull/37877))
-- Late escape RSS block. ([37878](https://github.com/WordPress/gutenberg/pull/37878))
-- Late escape Table of Contents block. ([37882](https://github.com/WordPress/gutenberg/pull/37882))
-- Late escape Search block. ([37879](https://github.com/WordPress/gutenberg/pull/37879))
-- Move escaping to point of output in Archives block. ([37834](https://github.com/WordPress/gutenberg/pull/37834))
-- Post Content: No need to pass default get_the_content args. ([37701](https://github.com/WordPress/gutenberg/pull/37701))
+
+-   Late escape Categories block. ([37835](https://github.com/WordPress/gutenberg/pull/37835))
+-   Late escape Page List block. ([37873](https://github.com/WordPress/gutenberg/pull/37873))
+-   Late escape Query blocks. ([37877](https://github.com/WordPress/gutenberg/pull/37877))
+-   Late escape RSS block. ([37878](https://github.com/WordPress/gutenberg/pull/37878))
+-   Late escape Table of Contents block. ([37882](https://github.com/WordPress/gutenberg/pull/37882))
+-   Late escape Search block. ([37879](https://github.com/WordPress/gutenberg/pull/37879))
+-   Move escaping to point of output in Archives block. ([37834](https://github.com/WordPress/gutenberg/pull/37834))
+-   Post Content: No need to pass default get_the_content args. ([37701](https://github.com/WordPress/gutenberg/pull/37701))
 
 #### Post Editor
-- PostLockedModal: Update action buttons markup. ([37837](https://github.com/WordPress/gutenberg/pull/37837))
+
+-   PostLockedModal: Update action buttons markup. ([37837](https://github.com/WordPress/gutenberg/pull/37837))
 
 #### Parsing
-- Block API: Separate validation stage during block parsing. ([37763](https://github.com/WordPress/gutenberg/pull/37763))
+
+-   Block API: Separate validation stage during block parsing. ([37763](https://github.com/WordPress/gutenberg/pull/37763))
 
 #### Components
-- Refactor SuggestionsList to use hooks and change class to function component. ([36924](https://github.com/WordPress/gutenberg/pull/36924))
 
+-   Refactor SuggestionsList to use hooks and change class to function component. ([36924](https://github.com/WordPress/gutenberg/pull/36924))
 
 ### Tools
 
 #### Testing
-- Allow type imports for React everywhere. ([37862](https://github.com/WordPress/gutenberg/pull/37862))
-- Change the performance job folder structure to avoid nested node_modules. ([37775](https://github.com/WordPress/gutenberg/pull/37775))
-- Fix flaky test by using waitForResponse to ensure the URL details request completes. ([37901](https://github.com/WordPress/gutenberg/pull/37901))
-- Marking test that consistently fails as skipped. ([37729](https://github.com/WordPress/gutenberg/pull/37729))
-
-#### Build Tooling
-- wp-env: Replace TT1-Blocks with Empty Theme in the wp-env of gutenberg and CI. ([37446](https://github.com/WordPress/gutenberg/pull/37446))
-- wp-env: Show `--help` when no subcommand is passed. ([32755](https://github.com/WordPress/gutenberg/pull/32755))
-- Scripts: Scan `block.json` files to detect entry points for the build process. ([37661](https://github.com/WordPress/gutenberg/pull/37661))
-- Scripts: Add `plugin-zip` command to create a zip file for a WordPress plugin. ([37687](https://github.com/WordPress/gutenberg/pull/37687))
-
-#### Create Block
-- Allow custom folder name for a block. ([37612](https://github.com/WordPress/gutenberg/pull/37612))
-- Speed up scaffolding by omitting WordPress dependencies. ([37639](https://github.com/WordPress/gutenberg/pull/37639))
 
+-   Allow type imports for React everywhere. ([37862](https://github.com/WordPress/gutenberg/pull/37862))
+-   Change the performance job folder structure to avoid nested node_modules. ([37775](https://github.com/WordPress/gutenberg/pull/37775))
+-   Fix flaky test by using waitForResponse to ensure the URL details request completes. ([37901](https://github.com/WordPress/gutenberg/pull/37901))
+-   Marking test that consistently fails as skipped. ([37729](https://github.com/WordPress/gutenberg/pull/37729))
 
+#### Build Tooling
 
+-   wp-env: Replace TT1-Blocks with Empty Theme in the wp-env of gutenberg and CI. ([37446](https://github.com/WordPress/gutenberg/pull/37446))
+-   wp-env: Show `--help` when no subcommand is passed. ([32755](https://github.com/WordPress/gutenberg/pull/32755))
+-   Scripts: Scan `block.json` files to detect entry points for the build process. ([37661](https://github.com/WordPress/gutenberg/pull/37661))
+-   Scripts: Add `plugin-zip` command to create a zip file for a WordPress plugin. ([37687](https://github.com/WordPress/gutenberg/pull/37687))
 
+#### Create Block
 
+-   Allow custom folder name for a block. ([37612](https://github.com/WordPress/gutenberg/pull/37612))
+-   Speed up scaffolding by omitting WordPress dependencies. ([37639](https://github.com/WordPress/gutenberg/pull/37639))
 
 = 12.3.2 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Library
-- Spacer: Fix unit settings filter. ([37774](https://github.com/WordPress/gutenberg/pull/37774))
-
-
-
 
+-   Spacer: Fix unit settings filter. ([37774](https://github.com/WordPress/gutenberg/pull/37774))
 
 = 12.3.1 =
 
+## Changelog
 
 ### Bug Fixes
 
-- Restore canvas padding for classic themes (#37741).
-- Site logo: Fix range control on landscape logos (#37733).
-- RichText: Fix dead key input on Windows (#37777).
-- Update: Improve escaping on the search block (#37829).
-- Fix: Impossible to clear colors if color palettes are removed. (#37791).
-
+-   Restore canvas padding for classic themes (#37741).
+-   Site logo: Fix range control on landscape logos (#37733).
+-   RichText: Fix dead key input on Windows (#37777).
+-   Update: Improve escaping on the search block (#37829).
+-   Fix: Impossible to clear colors if color palettes are removed. (#37791).
 
 = 12.3.0 =
 
+## Changelog
+
 ### Features
 
 #### Block Library
 
-- Group/row blocks:
-  - Add Gap support. ([37459](https://github.com/WordPress/gutenberg/pull/37459))
-  - Add Typography support. ([37456](https://github.com/WordPress/gutenberg/pull/37456))
-- New Author Name block. ([36001](https://github.com/WordPress/gutenberg/pull/36001))
-- Comments Pagination:
-  - New Comments Pagination Next block. ([36562](https://github.com/WordPress/gutenberg/pull/36562))
-  - New Comments Pagination Previous block. ([36912](https://github.com/WordPress/gutenberg/pull/36912))
+-   Group/row blocks:
+    -   Add Gap support. ([37459](https://github.com/WordPress/gutenberg/pull/37459))
+    -   Add Typography support. ([37456](https://github.com/WordPress/gutenberg/pull/37456))
+-   New Author Name block. ([36001](https://github.com/WordPress/gutenberg/pull/36001))
+-   Comments Pagination:
+    -   New Comments Pagination Next block. ([36562](https://github.com/WordPress/gutenberg/pull/36562))
+    -   New Comments Pagination Previous block. ([36912](https://github.com/WordPress/gutenberg/pull/36912))
 
 ### Enhancements
 
 #### Block Library
 
-- Navigation:
-  - Enable even more compact setup state. ([37089](https://github.com/WordPress/gutenberg/pull/37089))
-  - Use rems for padding. ([37478](https://github.com/WordPress/gutenberg/pull/37478))
-- Site Logo: Add option to set site icon from Site Logo block. ([35892](https://github.com/WordPress/gutenberg/pull/35892))
-- Paragraph: Add font family support. ([37586](https://github.com/WordPress/gutenberg/pull/37586))
-- Comments Template: Add comments pagination. ([37610](https://github.com/WordPress/gutenberg/pull/37610))
-- Embeds: Simplify the embed loading state. ([37548](https://github.com/WordPress/gutenberg/pull/37548))
-- Spacer: Add custom units for height and width. ([36186](https://github.com/WordPress/gutenberg/pull/36186))
+-   Navigation:
+    -   Enable even more compact setup state. ([37089](https://github.com/WordPress/gutenberg/pull/37089))
+    -   Use rems for padding. ([37478](https://github.com/WordPress/gutenberg/pull/37478))
+-   Site Logo: Add option to set site icon from Site Logo block. ([35892](https://github.com/WordPress/gutenberg/pull/35892))
+-   Paragraph: Add font family support. ([37586](https://github.com/WordPress/gutenberg/pull/37586))
+-   Comments Template: Add comments pagination. ([37610](https://github.com/WordPress/gutenberg/pull/37610))
+-   Embeds: Simplify the embed loading state. ([37548](https://github.com/WordPress/gutenberg/pull/37548))
+-   Spacer: Add custom units for height and width. ([36186](https://github.com/WordPress/gutenberg/pull/36186))
 
 #### Global Styles
 
-- Make the global styles subtitles font smaller. ([37600](https://github.com/WordPress/gutenberg/pull/37600))
-- Add support for nameless font sizes. ([37410](https://github.com/WordPress/gutenberg/pull/37410))
+-   Make the global styles subtitles font smaller. ([37600](https://github.com/WordPress/gutenberg/pull/37600))
+-   Add support for nameless font sizes. ([37410](https://github.com/WordPress/gutenberg/pull/37410))
 
 #### Colors
 
-- Allow color gradient popover to be above the color toggle. ([37430](https://github.com/WordPress/gutenberg/pull/37430))
-- Make color styles labels simpler. ([37493](https://github.com/WordPress/gutenberg/pull/37493))
-- Use subtitle styles for the palette names. ([37460](https://github.com/WordPress/gutenberg/pull/37460))
+-   Allow color gradient popover to be above the color toggle. ([37430](https://github.com/WordPress/gutenberg/pull/37430))
+-   Make color styles labels simpler. ([37493](https://github.com/WordPress/gutenberg/pull/37493))
+-   Use subtitle styles for the palette names. ([37460](https://github.com/WordPress/gutenberg/pull/37460))
 
 #### Design Tools
 
-- Border panel: Collapse color controls. ([37425](https://github.com/WordPress/gutenberg/pull/37425))
+-   Border panel: Collapse color controls. ([37425](https://github.com/WordPress/gutenberg/pull/37425))
 
 #### Document Settings
 
-- Add class name to post author on edit post sidebar. ([36269](https://github.com/WordPress/gutenberg/pull/36269))
+-   Add class name to post author on edit post sidebar. ([36269](https://github.com/WordPress/gutenberg/pull/36269))
 
 #### Site Editor
 
-- Update save panel's cancel button from icon to visible text. ([37310](https://github.com/WordPress/gutenberg/pull/37310))
+-   Update save panel's cancel button from icon to visible text. ([37310](https://github.com/WordPress/gutenberg/pull/37310))
 
 #### Accessibility
 
-- Latest Posts: Add aria-label to featured links. ([36251](https://github.com/WordPress/gutenberg/pull/36251))
+-   Latest Posts: Add aria-label to featured links. ([36251](https://github.com/WordPress/gutenberg/pull/36251))
 
 ### Bug Fixes
 
 #### Block Library
 
-- Navigation:
-  - Restrict Navigation permissions and show UI warning if cannot create. ([37454](https://github.com/WordPress/gutenberg/pull/37454))
-  - Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. ([37358](https://github.com/WordPress/gutenberg/pull/37358))
-  - Fix navigation appender. ([37447](https://github.com/WordPress/gutenberg/pull/37447))
-  - Revert all margins on navigation-item in editor. ([37587](https://github.com/WordPress/gutenberg/pull/37587))
-  - Fix page list issues in overlay. ([37444](https://github.com/WordPress/gutenberg/pull/37444))
-  - Show a UI warning when user does not have permission to update/edit an existing Navigation block. ([37286](https://github.com/WordPress/gutenberg/pull/37286))
-  - Try cascading nav styles through classnames. ([37473](https://github.com/WordPress/gutenberg/pull/37473))
-- Query Loop:
-  - Fix editable post blocks in Query Loop with `zero` `queryId`. ([37629](https://github.com/WordPress/gutenberg/pull/37629))
-  - Changed the letter case for Post Type to Post type. ([37499](https://github.com/WordPress/gutenberg/pull/37499))
-  - Query Pagination Next: Hide block if custom query has no results. ([37553](https://github.com/WordPress/gutenberg/pull/37553))
-  - Revert Query Pagination Next/Previous placeholder(36681). ([37520](https://github.com/WordPress/gutenberg/pull/37520))
-- Site Logo: Fix block alignment issues. ([36627](https://github.com/WordPress/gutenberg/pull/36627))
-- Gallery: Fix block registration hook priority. ([37409](https://github.com/WordPress/gutenberg/pull/37409))
-- Post Content/Title: Reflect changes when previewing post. ([37622](https://github.com/WordPress/gutenberg/pull/37622))
-- Post Excerpt: Specify paragraph as post excerpt tag name. ([37412](https://github.com/WordPress/gutenberg/pull/37412))
-- Reusable Block: Fix embed handling. ([37554](https://github.com/WordPress/gutenberg/pull/37554))
-- Site icon: Fix site icon styling to display non-square site icons within a square button. ([37570](https://github.com/WordPress/gutenberg/pull/37570))
-- Template Part: Only display a missing notice in debug mode. ([37404](https://github.com/WordPress/gutenberg/pull/37404))
-- ServerSideRender: Fix loading state. ([37623](https://github.com/WordPress/gutenberg/pull/37623))
-- Comments Avatar Block: Show avatar drag handles only when selected. ([37567](https://github.com/WordPress/gutenberg/pull/37567))
+-   Navigation:
+    -   Restrict Navigation permissions and show UI warning if cannot create. ([37454](https://github.com/WordPress/gutenberg/pull/37454))
+    -   Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. ([37358](https://github.com/WordPress/gutenberg/pull/37358))
+    -   Fix navigation appender. ([37447](https://github.com/WordPress/gutenberg/pull/37447))
+    -   Revert all margins on navigation-item in editor. ([37587](https://github.com/WordPress/gutenberg/pull/37587))
+    -   Fix page list issues in overlay. ([37444](https://github.com/WordPress/gutenberg/pull/37444))
+    -   Show a UI warning when user does not have permission to update/edit an existing Navigation block. ([37286](https://github.com/WordPress/gutenberg/pull/37286))
+    -   Try cascading nav styles through classnames. ([37473](https://github.com/WordPress/gutenberg/pull/37473))
+-   Query Loop:
+    -   Fix editable post blocks in Query Loop with `zero` `queryId`. ([37629](https://github.com/WordPress/gutenberg/pull/37629))
+    -   Changed the letter case for Post Type to Post type. ([37499](https://github.com/WordPress/gutenberg/pull/37499))
+    -   Query Pagination Next: Hide block if custom query has no results. ([37553](https://github.com/WordPress/gutenberg/pull/37553))
+    -   Revert Query Pagination Next/Previous placeholder(36681). ([37520](https://github.com/WordPress/gutenberg/pull/37520))
+-   Site Logo: Fix block alignment issues. ([36627](https://github.com/WordPress/gutenberg/pull/36627))
+-   Gallery: Fix block registration hook priority. ([37409](https://github.com/WordPress/gutenberg/pull/37409))
+-   Post Content/Title: Reflect changes when previewing post. ([37622](https://github.com/WordPress/gutenberg/pull/37622))
+-   Post Excerpt: Specify paragraph as post excerpt tag name. ([37412](https://github.com/WordPress/gutenberg/pull/37412))
+-   Reusable Block: Fix embed handling. ([37554](https://github.com/WordPress/gutenberg/pull/37554))
+-   Site icon: Fix site icon styling to display non-square site icons within a square button. ([37570](https://github.com/WordPress/gutenberg/pull/37570))
+-   Template Part: Only display a missing notice in debug mode. ([37404](https://github.com/WordPress/gutenberg/pull/37404))
+-   ServerSideRender: Fix loading state. ([37623](https://github.com/WordPress/gutenberg/pull/37623))
+-   Comments Avatar Block: Show avatar drag handles only when selected. ([37567](https://github.com/WordPress/gutenberg/pull/37567))
 
 #### Global Styles
 
-- Color editor discards colors with default name. ([37496](https://github.com/WordPress/gutenberg/pull/37496))
-- Gradients are not being applied by class. ([37597](https://github.com/WordPress/gutenberg/pull/37597))
-- Impossible to edit theme and default colors. ([37497](https://github.com/WordPress/gutenberg/pull/37497))
-- Blank site editor when theme name contains a period. ([37167](https://github.com/WordPress/gutenberg/pull/37167))
-- Lower the specificity of font size CSS Custom Properties in the editor. ([37526](https://github.com/WordPress/gutenberg/pull/37526))
-- Use inset shadow on color indicators and adjust spacing. ([37500](https://github.com/WordPress/gutenberg/pull/37500))
+-   Color editor discards colors with default name. ([37496](https://github.com/WordPress/gutenberg/pull/37496))
+-   Gradients are not being applied by class. ([37597](https://github.com/WordPress/gutenberg/pull/37597))
+-   Impossible to edit theme and default colors. ([37497](https://github.com/WordPress/gutenberg/pull/37497))
+-   Blank site editor when theme name contains a period. ([37167](https://github.com/WordPress/gutenberg/pull/37167))
+-   Lower the specificity of font size CSS Custom Properties in the editor. ([37526](https://github.com/WordPress/gutenberg/pull/37526))
+-   Use inset shadow on color indicators and adjust spacing. ([37500](https://github.com/WordPress/gutenberg/pull/37500))
 
 #### Block Editor
 
-- Fix Enter handling for nested blocks. ([37453](https://github.com/WordPress/gutenberg/pull/37453))
-- Restrict delete multi selected blocks shortcut. ([37595](https://github.com/WordPress/gutenberg/pull/37595))
-- Avoid using CSS variables for block gap styles. ([37360](https://github.com/WordPress/gutenberg/pull/37360))
+-   Fix Enter handling for nested blocks. ([37453](https://github.com/WordPress/gutenberg/pull/37453))
+-   Restrict delete multi selected blocks shortcut. ([37595](https://github.com/WordPress/gutenberg/pull/37595))
+-   Avoid using CSS variables for block gap styles. ([37360](https://github.com/WordPress/gutenberg/pull/37360))
 
 #### Themes
 
-- Add comment-form and comment-list to default html5 theme support. ([37536](https://github.com/WordPress/gutenberg/pull/37536))
-- Avoid Duplicated "Theme File Editor" menu. ([37592](https://github.com/WordPress/gutenberg/pull/37592))
-- Fix conditional check "Theme File Editor" menu. ([37616](https://github.com/WordPress/gutenberg/pull/37616))
-- Fix duotone theme cache. ([36236](https://github.com/WordPress/gutenberg/pull/36236))
+-   Add comment-form and comment-list to default html5 theme support. ([37536](https://github.com/WordPress/gutenberg/pull/37536))
+-   Avoid Duplicated "Theme File Editor" menu. ([37592](https://github.com/WordPress/gutenberg/pull/37592))
+-   Fix conditional check "Theme File Editor" menu. ([37616](https://github.com/WordPress/gutenberg/pull/37616))
+-   Fix duotone theme cache. ([36236](https://github.com/WordPress/gutenberg/pull/36236))
 
 #### Template Editor
 
-- Avoid undo issues when reset parent blocks for controlled blocks. ([37484](https://github.com/WordPress/gutenberg/pull/37484))
-- Change color of welcome dialog close icon so it is visible against black background. ([37435](https://github.com/WordPress/gutenberg/pull/37435))
-- Template Editing Mode: Fix options dropdown. ([37442](https://github.com/WordPress/gutenberg/pull/37442))
-- Try to fix auto resizing in template part focus mode. ([37394](https://github.com/WordPress/gutenberg/pull/37394))
-- Update the template list action labels. ([37576](https://github.com/WordPress/gutenberg/pull/37576))
+-   Avoid undo issues when reset parent blocks for controlled blocks. ([37484](https://github.com/WordPress/gutenberg/pull/37484))
+-   Change color of welcome dialog close icon so it is visible against black background. ([37435](https://github.com/WordPress/gutenberg/pull/37435))
+-   Template Editing Mode: Fix options dropdown. ([37442](https://github.com/WordPress/gutenberg/pull/37442))
+-   Try to fix auto resizing in template part focus mode. ([37394](https://github.com/WordPress/gutenberg/pull/37394))
+-   Update the template list action labels. ([37576](https://github.com/WordPress/gutenberg/pull/37576))
 
 #### Site Editor
 
-- Add customized indicator to plugin templates that have been customized. ([37329](https://github.com/WordPress/gutenberg/pull/37329))
-- Register block editor shortcuts. ([37577](https://github.com/WordPress/gutenberg/pull/37577))
-- Update regex to handle 404 template slug. ([37579](https://github.com/WordPress/gutenberg/pull/37579))
-- Parse shortcode blocks outside the content. ([37545](https://github.com/WordPress/gutenberg/pull/37545))
+-   Add customized indicator to plugin templates that have been customized. ([37329](https://github.com/WordPress/gutenberg/pull/37329))
+-   Register block editor shortcuts. ([37577](https://github.com/WordPress/gutenberg/pull/37577))
+-   Update regex to handle 404 template slug. ([37579](https://github.com/WordPress/gutenberg/pull/37579))
+-   Parse shortcode blocks outside the content. ([37545](https://github.com/WordPress/gutenberg/pull/37545))
 
 #### Accessibility
 
-- Editor: Focus when navigation toggle receives state false. ([37265](https://github.com/WordPress/gutenberg/pull/37265))
-- Navigation: Only add dialog role when modal is open. ([37434](https://github.com/WordPress/gutenberg/pull/37434))
+-   Editor: Focus when navigation toggle receives state false. ([37265](https://github.com/WordPress/gutenberg/pull/37265))
+-   Navigation: Only add dialog role when modal is open. ([37434](https://github.com/WordPress/gutenberg/pull/37434))
 
 #### npm Packages
 
-- Fix missing peer dependencies where React is used indirectly. ([37578](https://github.com/WordPress/gutenberg/pull/37578))
+-   Fix missing peer dependencies where React is used indirectly. ([37578](https://github.com/WordPress/gutenberg/pull/37578))
 
 #### Testing
 
-- Fix flaky Navigation block end-to-end test by mocking out URL details endpoint to avoid 404. ([37501](https://github.com/WordPress/gutenberg/pull/37501))
+-   Fix flaky Navigation block end-to-end test by mocking out URL details endpoint to avoid 404. ([37501](https://github.com/WordPress/gutenberg/pull/37501))
 
 #### Post Editor
 
-- Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. ([37383](https://github.com/WordPress/gutenberg/pull/37383))
+-   Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. ([37383](https://github.com/WordPress/gutenberg/pull/37383))
 
 #### Components
 
-- ToolsPanel: Allow items to register when panelId is null. ([37273](https://github.com/WordPress/gutenberg/pull/37273))
+-   ToolsPanel: Allow items to register when panelId is null. ([37273](https://github.com/WordPress/gutenberg/pull/37273))
 
 #### Design Tools
 
-- Make block support tools panels compatible with multi-selection. ([37216](https://github.com/WordPress/gutenberg/pull/37216))
+-   Make block support tools panels compatible with multi-selection. ([37216](https://github.com/WordPress/gutenberg/pull/37216))
 
 ### Documentation
 
 #### Packages
 
-- Add automated core blocks documentation. ([36183](https://github.com/WordPress/gutenberg/pull/36183))
-- Added README for GradientPicker. ([37614](https://github.com/WordPress/gutenberg/pull/37614))
-- Add link to meta-block example in gutenberg-examples repo. ([37633](https://github.com/WordPress/gutenberg/pull/37633))
-- Fix parameter type in render function of file block. ([36262](https://github.com/WordPress/gutenberg/pull/36262))
-- Add changelog entry for \_\_experimentalIsRenderedInSidebar gradient components flag. ([37457](https://github.com/WordPress/gutenberg/pull/37457))
+-   Add automated core blocks documentation. ([36183](https://github.com/WordPress/gutenberg/pull/36183))
+-   Added README for GradientPicker. ([37614](https://github.com/WordPress/gutenberg/pull/37614))
+-   Add link to meta-block example in gutenberg-examples repo. ([37633](https://github.com/WordPress/gutenberg/pull/37633))
+-   Fix parameter type in render function of file block. ([36262](https://github.com/WordPress/gutenberg/pull/36262))
+-   Add changelog entry for \_\_experimentalIsRenderedInSidebar gradient components flag. ([37457](https://github.com/WordPress/gutenberg/pull/37457))
 
 #### Handbook
 
-- Switch code distinction to JSX & Plain. ([37348](https://github.com/WordPress/gutenberg/pull/37348))
-- Fix a grammatical error in the Create Block tutorial. ([37636](https://github.com/WordPress/gutenberg/pull/37636))
-- Fix plugin sidebar tutorial not publishing. ([37505](https://github.com/WordPress/gutenberg/pull/37505))
-- Update plugin sidebar to new how to guide template. ([37490](https://github.com/WordPress/gutenberg/pull/37490))
-- Update "Local by Flywheel" name and URL. ([37512](https://github.com/WordPress/gutenberg/pull/37512))
-- Update Meta Boxes to a single page how to guide. ([37621](https://github.com/WordPress/gutenberg/pull/37621))
+-   Switch code distinction to JSX & Plain. ([37348](https://github.com/WordPress/gutenberg/pull/37348))
+-   Fix a grammatical error in the Create Block tutorial. ([37636](https://github.com/WordPress/gutenberg/pull/37636))
+-   Fix plugin sidebar tutorial not publishing. ([37505](https://github.com/WordPress/gutenberg/pull/37505))
+-   Update plugin sidebar to new how to guide template. ([37490](https://github.com/WordPress/gutenberg/pull/37490))
+-   Update "Local by Flywheel" name and URL. ([37512](https://github.com/WordPress/gutenberg/pull/37512))
+-   Update Meta Boxes to a single page how to guide. ([37621](https://github.com/WordPress/gutenberg/pull/37621))
 
 ### Code Quality
 
 #### Compatibility with Core
 
-- Adds missing block template class properties. ([37556](https://github.com/WordPress/gutenberg/pull/37556))
+-   Adds missing block template class properties. ([37556](https://github.com/WordPress/gutenberg/pull/37556))
 
 #### Formatting
 
-- Fix lint issues. ([37618](https://github.com/WordPress/gutenberg/pull/37618))
-- Move block patterns compatibility code to lib/compat folder. ([37451](https://github.com/WordPress/gutenberg/pull/37451))
+-   Fix lint issues. ([37618](https://github.com/WordPress/gutenberg/pull/37618))
+-   Move block patterns compatibility code to lib/compat folder. ([37451](https://github.com/WordPress/gutenberg/pull/37451))
 
 #### Packages
 
-- Data:
-  - Block top level useSetting paths. ([37428](https://github.com/WordPress/gutenberg/pull/37428))
-  - Deprecate receiveUploadPermissions. ([37508](https://github.com/WordPress/gutenberg/pull/37508))
+-   Data:
+    -   Block top level useSetting paths. ([37428](https://github.com/WordPress/gutenberg/pull/37428))
+    -   Deprecate receiveUploadPermissions. ([37508](https://github.com/WordPress/gutenberg/pull/37508))
 
 #### Site Editor
 
-- Remove dead code. ([37581](https://github.com/WordPress/gutenberg/pull/37581))
+-   Remove dead code. ([37581](https://github.com/WordPress/gutenberg/pull/37581))
 
 #### Components
 
-- Storybook: Tweak configuration for v6.4 update. ([37544](https://github.com/WordPress/gutenberg/pull/37544))
+-   Storybook: Tweak configuration for v6.4 update. ([37544](https://github.com/WordPress/gutenberg/pull/37544))
 
 #### Security
 
-- Update `yargs` dependency for `@wordpress/env` to fix CVE-2021-3807. ([37601](https://github.com/WordPress/gutenberg/pull/37601))
+-   Update `yargs` dependency for `@wordpress/env` to fix CVE-2021-3807. ([37601](https://github.com/WordPress/gutenberg/pull/37601))
 
 ### Tools
 
 #### Testing
 
-- End to end:
-  - Switch to using a $eval to fill user creation fields. ([37469](https://github.com/WordPress/gutenberg/pull/37469))
-  - Fix and enable remaining navigation block end-to-end tests. ([37437](https://github.com/WordPress/gutenberg/pull/37437))
-  - Add block editor shortcuts end-to-end tests. ([37624](https://github.com/WordPress/gutenberg/pull/37624))
+-   End to end:
+    -   Switch to using a $eval to fill user creation fields. ([37469](https://github.com/WordPress/gutenberg/pull/37469))
+    -   Fix and enable remaining navigation block end-to-end tests. ([37437](https://github.com/WordPress/gutenberg/pull/37437))
+    -   Add block editor shortcuts end-to-end tests. ([37624](https://github.com/WordPress/gutenberg/pull/37624))
 
 #### Build Tooling
 
-- Add npm-run-all package to simplify running scripts. ([37558](https://github.com/WordPress/gutenberg/pull/37558))
-- Update caniuse to latest. ([37588](https://github.com/WordPress/gutenberg/pull/37588))
-- Fix pre commit hook to build block documentation. ([37613](https://github.com/WordPress/gutenberg/pull/37613))
-
-
-
+-   Add npm-run-all package to simplify running scripts. ([37558](https://github.com/WordPress/gutenberg/pull/37558))
+-   Update caniuse to latest. ([37588](https://github.com/WordPress/gutenberg/pull/37588))
+-   Fix pre commit hook to build block documentation. ([37613](https://github.com/WordPress/gutenberg/pull/37613))
 
 = 12.2.0 =
 
+## Changelog
+
 ### Enhancements
 
 #### Block Library
-- New block: Add `Comments Pagination Numbers` block. ([36890](https://github.com/WordPress/gutenberg/pull/36890))
-- Comment Template block: Handle nested comments. ([36065](https://github.com/WordPress/gutenberg/pull/36065))
-- Comments Query Loop: Improve context handling in inner blocks. ([37196](https://github.com/WordPress/gutenberg/pull/37196))
-- Image: Reflect media deletion in the editor. ([35973](https://github.com/WordPress/gutenberg/pull/35973))
-- Navigation:
-   - Add navigation blocks post-processing after migration from menu items. ([36950](https://github.com/WordPress/gutenberg/pull/36950))
-   - Refactor modal padding to be simpler and more flexible. ([37323](https://github.com/WordPress/gutenberg/pull/37323))
-   - Remove Navigation Menus from the Appearance menu. ([37212](https://github.com/WordPress/gutenberg/pull/37212))
-   - Add clearance for appender in submenus. ([36720](https://github.com/WordPress/gutenberg/pull/36720))
-- Refactor handling of padding for group and column blocks. ([37356](https://github.com/WordPress/gutenberg/pull/37356))
-- Template Part: Add actions that fire during the loading process of block template parts. ([36884](https://github.com/WordPress/gutenberg/pull/36884))
+
+-   New block: Add `Comments Pagination Numbers` block. ([36890](https://github.com/WordPress/gutenberg/pull/36890))
+-   Comment Template block: Handle nested comments. ([36065](https://github.com/WordPress/gutenberg/pull/36065))
+-   Comments Query Loop: Improve context handling in inner blocks. ([37196](https://github.com/WordPress/gutenberg/pull/37196))
+-   Image: Reflect media deletion in the editor. ([35973](https://github.com/WordPress/gutenberg/pull/35973))
+-   Navigation:
+    -   Add navigation blocks post-processing after migration from menu items. ([36950](https://github.com/WordPress/gutenberg/pull/36950))
+    -   Refactor modal padding to be simpler and more flexible. ([37323](https://github.com/WordPress/gutenberg/pull/37323))
+    -   Remove Navigation Menus from the Appearance menu. ([37212](https://github.com/WordPress/gutenberg/pull/37212))
+    -   Add clearance for appender in submenus. ([36720](https://github.com/WordPress/gutenberg/pull/36720))
+-   Refactor handling of padding for group and column blocks. ([37356](https://github.com/WordPress/gutenberg/pull/37356))
+-   Template Part: Add actions that fire during the loading process of block template parts. ([36884](https://github.com/WordPress/gutenberg/pull/36884))
 
 #### Styles and design tools
-- Add the `Welcome Guide` option to the `More Global Styles Actions` dropdown. ([37180](https://github.com/WordPress/gutenberg/pull/37180))
-- Make the `Blocks` section more distinguishable. ([37293](https://github.com/WordPress/gutenberg/pull/37293))
-- Move the `Edit colors` button to a standard menu item. ([36842](https://github.com/WordPress/gutenberg/pull/36842))
-- Move Duotone palette to the bottom of global styles gradients. ([37253](https://github.com/WordPress/gutenberg/pull/37253))
-- Border controls: display border properties in the `ToolPanel`. ([34061](https://github.com/WordPress/gutenberg/pull/34061))
+
+-   Add the `Welcome Guide` option to the `More Global Styles Actions` dropdown. ([37180](https://github.com/WordPress/gutenberg/pull/37180))
+-   Make the `Blocks` section more distinguishable. ([37293](https://github.com/WordPress/gutenberg/pull/37293))
+-   Move the `Edit colors` button to a standard menu item. ([36842](https://github.com/WordPress/gutenberg/pull/36842))
+-   Move Duotone palette to the bottom of global styles gradients. ([37253](https://github.com/WordPress/gutenberg/pull/37253))
+-   Border controls: display border properties in the `ToolPanel`. ([34061](https://github.com/WordPress/gutenberg/pull/34061))
 
 #### Components
-- FontSizePicker: Use an incremental sequence of numbers as labels for the available font sizes at the segmented control (conditionally). ([37038](https://github.com/WordPress/gutenberg/pull/37038))
-- ColorPalette: Improve accessibility and visibility. ([36925](https://github.com/WordPress/gutenberg/pull/36925))
-- ToolsPanel: Standardize input control label margin. ([36387](https://github.com/WordPress/gutenberg/pull/36387))
-- Unify styles for `ColorIndicator` with how they appear in Global Styles. ([37028](https://github.com/WordPress/gutenberg/pull/37028))
-- Update `PanelColorGradientSettings` component to use dropdowns. ([37067](https://github.com/WordPress/gutenberg/pull/37067))
+
+-   FontSizePicker: Use an incremental sequence of numbers as labels for the available font sizes at the segmented control (conditionally). ([37038](https://github.com/WordPress/gutenberg/pull/37038))
+-   ColorPalette: Improve accessibility and visibility. ([36925](https://github.com/WordPress/gutenberg/pull/36925))
+-   ToolsPanel: Standardize input control label margin. ([36387](https://github.com/WordPress/gutenberg/pull/36387))
+-   Unify styles for `ColorIndicator` with how they appear in Global Styles. ([37028](https://github.com/WordPress/gutenberg/pull/37028))
+-   Update `PanelColorGradientSettings` component to use dropdowns. ([37067](https://github.com/WordPress/gutenberg/pull/37067))
 
 #### Site Editor
-- Add the Customizer back to the Appearance menu. ([37175](https://github.com/WordPress/gutenberg/pull/37175))
-- Add client-side routing for Site Editor. ([36488](https://github.com/WordPress/gutenberg/pull/36488))
-- Add a new `aria-pressed` attribute to the `Toggle navigation` button. ([37351](https://github.com/WordPress/gutenberg/pull/37351))
-- Template revert flow: Make label description source agnostic. ([37004](https://github.com/WordPress/gutenberg/pull/37004))
+
+-   Add the Customizer back to the Appearance menu. ([37175](https://github.com/WordPress/gutenberg/pull/37175))
+-   Add client-side routing for Site Editor. ([36488](https://github.com/WordPress/gutenberg/pull/36488))
+-   Add a new `aria-pressed` attribute to the `Toggle navigation` button. ([37351](https://github.com/WordPress/gutenberg/pull/37351))
+-   Template revert flow: Make label description source agnostic. ([37004](https://github.com/WordPress/gutenberg/pull/37004))
 
 #### Packages
-- Scripts: Enable React Fast Refresh for block development. ([28273](https://github.com/WordPress/gutenberg/pull/28273))
-- List Reusable Blocks: Refactor `ImportForm` into a functional component and use hooks. ([36938](https://github.com/WordPress/gutenberg/pull/36938))
+
+-   Scripts: Enable React Fast Refresh for block development. ([28273](https://github.com/WordPress/gutenberg/pull/28273))
+-   List Reusable Blocks: Refactor `ImportForm` into a functional component and use hooks. ([36938](https://github.com/WordPress/gutenberg/pull/36938))
 
 #### Widgets Editor
-- Implement preview for blocks. ([37012](https://github.com/WordPress/gutenberg/pull/37012))
+
+-   Implement preview for blocks. ([37012](https://github.com/WordPress/gutenberg/pull/37012))
 
 #### Post Editor
-- Template Part block should not be available in the Post Editor inserter. ([37157](https://github.com/WordPress/gutenberg/pull/37157))
-
-### Bug Fixes
-
-- Remove 4 instances of `gutenberg` text-domain from Core. ([37229](https://github.com/WordPress/gutenberg/pull/37229))
-
-#### Block Library
-- Fix return type in the DocBlock. ([37352](https://github.com/WordPress/gutenberg/pull/37352))
-- Fix deprecated usage of passing null to `explode` function. ([37392](https://github.com/WordPress/gutenberg/pull/37392))
-- Gallery:
-   - Fix color issue for captions with hyperlinks in the Gallery block. ([37033](https://github.com/WordPress/gutenberg/pull/37033))
-   - Fix documentation and function naming for gallery block registration in PHP. ([37132](https://github.com/WordPress/gutenberg/pull/37132))
-   - Remove placeholder border. ([37050](https://github.com/WordPress/gutenberg/pull/37050))
-- Post Comments:
-   - Fix form-submit styles by adding button classes to the submit button in the post-comments block. ([37245](https://github.com/WordPress/gutenberg/pull/37245))
-   - Fix width of the post comment form input. ([37238](https://github.com/WordPress/gutenberg/pull/37238))
-   - Use block markup for the comment form button when using a block theme. ([37315](https://github.com/WordPress/gutenberg/pull/37315))
-- Comments Pagination Block: Add default styling. ([37057](https://github.com/WordPress/gutenberg/pull/37057))
-- Image:
-   - Set image display mode to `grid` when no alignment is set to align caption `onresize` event properly. ([35787](https://github.com/WordPress/gutenberg/pull/35787))
-   - Fix resizer controls being hidden in Safari when switching between alignments. ([37210](https://github.com/WordPress/gutenberg/pull/37210))
-- Navigation:
-   - Fix `gutenberg_` prefixed function references in Core. ([37021](https://github.com/WordPress/gutenberg/pull/37021))
-   - Fix navigation justifications. ([36991](https://github.com/WordPress/gutenberg/pull/36991))
-   - Fix vertical alignment of page list in the modal. ([37321](https://github.com/WordPress/gutenberg/pull/37321))
-   - Remove hardcoded typography units. ([37349](https://github.com/WordPress/gutenberg/pull/37349))
-   - Fix vertical layout. ([37009](https://github.com/WordPress/gutenberg/pull/37009))
-   - Switch to `addEventListener` event for load event in the navigation block view script. ([37135](https://github.com/WordPress/gutenberg/pull/37135))
-   - Don't request the deprecated navigation areas endpoint outside of the Gutenberg plugin. ([37187](https://github.com/WordPress/gutenberg/pull/37187))
-   - Navigation Link Control: Hide the `Transforms` component when no options are available. ([37284](https://github.com/WordPress/gutenberg/pull/37284))
-   - Remove the deprecated navigation area block from the inserter. ([37026](https://github.com/WordPress/gutenberg/pull/37026))
-- Query Loop: Add `useBlockPreview` component, fix alignment of the `Query Loop` block in the editor. ([36431](https://github.com/WordPress/gutenberg/pull/36431))
-- Query Pagination: `core/query-pagination-next` and `core/query-pagination-previous` blocks: change the markup on the first and last pages of the pagination. ([36681](https://github.com/WordPress/gutenberg/pull/36681))
-- Search: Fix application of border color class in the editor. ([37242](https://github.com/WordPress/gutenberg/pull/37242))
-- Template Part:
-   - Fix `isMissing` condition check. ([37370](https://github.com/WordPress/gutenberg/pull/37370))
-   - Use Core version of template and template part post types and REST endpoints for WordPress 5.9, with backward compatibility for WordPress 5.8. ([36898](https://github.com/WordPress/gutenberg/pull/36898))
-- Update the `micromodal` package to include a click-through fix. ([36837](https://github.com/WordPress/gutenberg/pull/36837))
-
-#### Components
-- Card: Support the `extraSmall` option for the `size` prop. ([37097](https://github.com/WordPress/gutenberg/pull/37097))
-- Drop Zone: Fix HTML drop issues with the Windows browsers. ([37151](https://github.com/WordPress/gutenberg/pull/37151))
-- Don't load `Radio` and `RadioGroup` components directly. ([36934](https://github.com/WordPress/gutenberg/pull/36934))
-- DuotonePicker typo fix. ([36662](https://github.com/WordPress/gutenberg/pull/36662))
-- Element: Ensure that the package uses the up-to-date React types. ([37365](https://github.com/WordPress/gutenberg/pull/37365))
-- Fix incorrect rendering of `ToggleGroupControl`'s active state. ([37332](https://github.com/WordPress/gutenberg/pull/37332))
-- Hide the `remove control point` button because removing it would break gradient control. ([37186](https://github.com/WordPress/gutenberg/pull/37186))
-- Import experimental `Heading` and `Text` Components. ([37290](https://github.com/WordPress/gutenberg/pull/37290))
-- Make the color popover on the gradient picker appear as expected. ([37115](https://github.com/WordPress/gutenberg/pull/37115))
-- Remove unused `reakit-utils` dependency from peer dependencies. ([37369](https://github.com/WordPress/gutenberg/pull/37369))
-- Storybook: Fix deprecated `disabled` key. ([37112](https://github.com/WordPress/gutenberg/pull/37112))
-- ToggleGroupControl: Fix extra update on incoming change. ([37224](https://github.com/WordPress/gutenberg/pull/37224))
-
-#### Site Editor
-- Allow global styles sidebar panels to fill vertical space. ([36845](https://github.com/WordPress/gutenberg/pull/36845))
-- Display a notice if export fails. ([37131](https://github.com/WordPress/gutenberg/pull/37131))
-- Fix edit template part link in header dropdown. ([37249](https://github.com/WordPress/gutenberg/pull/37249))
-- Fix template resolution to give precedence to PHP templates defined in a child theme. ([37074](https://github.com/WordPress/gutenberg/pull/37074))
-- Hide the block appender in the Template Part editor. ([37213](https://github.com/WordPress/gutenberg/pull/37213))
-- Improve notification when saving content in the Site Editor. ([36897](https://github.com/WordPress/gutenberg/pull/36897))
-- Improve handling of parsed requests. ([37209](https://github.com/WordPress/gutenberg/pull/37209))
-- Sync Export API error codes. ([37347](https://github.com/WordPress/gutenberg/pull/37347))
-- Template Editor Mode: Hide editor mode switcher. ([37359](https://github.com/WordPress/gutenberg/pull/37359))
-- Use server definition for the Template Areas. ([37215](https://github.com/WordPress/gutenberg/pull/37215))
-- Fixes the white screen of death on the Templates page when user avatars are disabled. ([37458](https://github.com/WordPress/gutenberg/pull/37458))
+
+-   Template Part block should not be available in the Post Editor inserter. ([37157](https://github.com/WordPress/gutenberg/pull/37157))
+
+### Bug Fixes
+
+-   Remove 4 instances of `gutenberg` text-domain from Core. ([37229](https://github.com/WordPress/gutenberg/pull/37229))
+
+#### Block Library
+
+-   Fix return type in the DocBlock. ([37352](https://github.com/WordPress/gutenberg/pull/37352))
+-   Fix deprecated usage of passing null to `explode` function. ([37392](https://github.com/WordPress/gutenberg/pull/37392))
+-   Gallery:
+    -   Fix color issue for captions with hyperlinks in the Gallery block. ([37033](https://github.com/WordPress/gutenberg/pull/37033))
+    -   Fix documentation and function naming for gallery block registration in PHP. ([37132](https://github.com/WordPress/gutenberg/pull/37132))
+    -   Remove placeholder border. ([37050](https://github.com/WordPress/gutenberg/pull/37050))
+-   Post Comments:
+    -   Fix form-submit styles by adding button classes to the submit button in the post-comments block. ([37245](https://github.com/WordPress/gutenberg/pull/37245))
+    -   Fix width of the post comment form input. ([37238](https://github.com/WordPress/gutenberg/pull/37238))
+    -   Use block markup for the comment form button when using a block theme. ([37315](https://github.com/WordPress/gutenberg/pull/37315))
+-   Comments Pagination Block: Add default styling. ([37057](https://github.com/WordPress/gutenberg/pull/37057))
+-   Image:
+    -   Set image display mode to `grid` when no alignment is set to align caption `onresize` event properly. ([35787](https://github.com/WordPress/gutenberg/pull/35787))
+    -   Fix resizer controls being hidden in Safari when switching between alignments. ([37210](https://github.com/WordPress/gutenberg/pull/37210))
+-   Navigation:
+    -   Fix `gutenberg_` prefixed function references in Core. ([37021](https://github.com/WordPress/gutenberg/pull/37021))
+    -   Fix navigation justifications. ([36991](https://github.com/WordPress/gutenberg/pull/36991))
+    -   Fix vertical alignment of page list in the modal. ([37321](https://github.com/WordPress/gutenberg/pull/37321))
+    -   Remove hardcoded typography units. ([37349](https://github.com/WordPress/gutenberg/pull/37349))
+    -   Fix vertical layout. ([37009](https://github.com/WordPress/gutenberg/pull/37009))
+    -   Switch to `addEventListener` event for load event in the navigation block view script. ([37135](https://github.com/WordPress/gutenberg/pull/37135))
+    -   Don't request the deprecated navigation areas endpoint outside of the Gutenberg plugin. ([37187](https://github.com/WordPress/gutenberg/pull/37187))
+    -   Navigation Link Control: Hide the `Transforms` component when no options are available. ([37284](https://github.com/WordPress/gutenberg/pull/37284))
+    -   Remove the deprecated navigation area block from the inserter. ([37026](https://github.com/WordPress/gutenberg/pull/37026))
+-   Query Loop: Add `useBlockPreview` component, fix alignment of the `Query Loop` block in the editor. ([36431](https://github.com/WordPress/gutenberg/pull/36431))
+-   Query Pagination: `core/query-pagination-next` and `core/query-pagination-previous` blocks: change the markup on the first and last pages of the pagination. ([36681](https://github.com/WordPress/gutenberg/pull/36681))
+-   Search: Fix application of border color class in the editor. ([37242](https://github.com/WordPress/gutenberg/pull/37242))
+-   Template Part:
+    -   Fix `isMissing` condition check. ([37370](https://github.com/WordPress/gutenberg/pull/37370))
+    -   Use Core version of template and template part post types and REST endpoints for WordPress 5.9, with backward compatibility for WordPress 5.8. ([36898](https://github.com/WordPress/gutenberg/pull/36898))
+-   Update the `micromodal` package to include a click-through fix. ([36837](https://github.com/WordPress/gutenberg/pull/36837))
+
+#### Components
+
+-   Card: Support the `extraSmall` option for the `size` prop. ([37097](https://github.com/WordPress/gutenberg/pull/37097))
+-   Drop Zone: Fix HTML drop issues with the Windows browsers. ([37151](https://github.com/WordPress/gutenberg/pull/37151))
+-   Don't load `Radio` and `RadioGroup` components directly. ([36934](https://github.com/WordPress/gutenberg/pull/36934))
+-   DuotonePicker typo fix. ([36662](https://github.com/WordPress/gutenberg/pull/36662))
+-   Element: Ensure that the package uses the up-to-date React types. ([37365](https://github.com/WordPress/gutenberg/pull/37365))
+-   Fix incorrect rendering of `ToggleGroupControl`'s active state. ([37332](https://github.com/WordPress/gutenberg/pull/37332))
+-   Hide the `remove control point` button because removing it would break gradient control. ([37186](https://github.com/WordPress/gutenberg/pull/37186))
+-   Import experimental `Heading` and `Text` Components. ([37290](https://github.com/WordPress/gutenberg/pull/37290))
+-   Make the color popover on the gradient picker appear as expected. ([37115](https://github.com/WordPress/gutenberg/pull/37115))
+-   Remove unused `reakit-utils` dependency from peer dependencies. ([37369](https://github.com/WordPress/gutenberg/pull/37369))
+-   Storybook: Fix deprecated `disabled` key. ([37112](https://github.com/WordPress/gutenberg/pull/37112))
+-   ToggleGroupControl: Fix extra update on incoming change. ([37224](https://github.com/WordPress/gutenberg/pull/37224))
+
+#### Site Editor
+
+-   Allow global styles sidebar panels to fill vertical space. ([36845](https://github.com/WordPress/gutenberg/pull/36845))
+-   Display a notice if export fails. ([37131](https://github.com/WordPress/gutenberg/pull/37131))
+-   Fix edit template part link in header dropdown. ([37249](https://github.com/WordPress/gutenberg/pull/37249))
+-   Fix template resolution to give precedence to PHP templates defined in a child theme. ([37074](https://github.com/WordPress/gutenberg/pull/37074))
+-   Hide the block appender in the Template Part editor. ([37213](https://github.com/WordPress/gutenberg/pull/37213))
+-   Improve notification when saving content in the Site Editor. ([36897](https://github.com/WordPress/gutenberg/pull/36897))
+-   Improve handling of parsed requests. ([37209](https://github.com/WordPress/gutenberg/pull/37209))
+-   Sync Export API error codes. ([37347](https://github.com/WordPress/gutenberg/pull/37347))
+-   Template Editor Mode: Hide editor mode switcher. ([37359](https://github.com/WordPress/gutenberg/pull/37359))
+-   Use server definition for the Template Areas. ([37215](https://github.com/WordPress/gutenberg/pull/37215))
+-   Fixes the white screen of death on the Templates page when user avatars are disabled. ([37458](https://github.com/WordPress/gutenberg/pull/37458))
 
 #### Styles
-- Allow selector ordering to ensure `theme.json` root selector margin takes precedence. ([36960](https://github.com/WordPress/gutenberg/pull/36960))
-- Custom keys from `theme.json`: Fix kebabCase conversion. ([37380](https://github.com/WordPress/gutenberg/pull/37380))
-- Do not remove theme presets if defaults are hidden. ([37008](https://github.com/WordPress/gutenberg/pull/37008))
-- Fix CSS Custom Properties for presets in the Site Editor. ([36851](https://github.com/WordPress/gutenberg/pull/36851))
-- Fix how `appearanceTools` works. ([37254](https://github.com/WordPress/gutenberg/pull/37254))
-- Fix styles for previews and patterns. ([37296](https://github.com/WordPress/gutenberg/pull/37296))
-- Font sizes: Update default values. ([37381](https://github.com/WordPress/gutenberg/pull/37381))
-- Remove CSS that causes conflict with `theme.json`. ([36424](https://github.com/WordPress/gutenberg/pull/36424))
+
+-   Allow selector ordering to ensure `theme.json` root selector margin takes precedence. ([36960](https://github.com/WordPress/gutenberg/pull/36960))
+-   Custom keys from `theme.json`: Fix kebabCase conversion. ([37380](https://github.com/WordPress/gutenberg/pull/37380))
+-   Do not remove theme presets if defaults are hidden. ([37008](https://github.com/WordPress/gutenberg/pull/37008))
+-   Fix CSS Custom Properties for presets in the Site Editor. ([36851](https://github.com/WordPress/gutenberg/pull/36851))
+-   Fix how `appearanceTools` works. ([37254](https://github.com/WordPress/gutenberg/pull/37254))
+-   Fix styles for previews and patterns. ([37296](https://github.com/WordPress/gutenberg/pull/37296))
+-   Font sizes: Update default values. ([37381](https://github.com/WordPress/gutenberg/pull/37381))
+-   Remove CSS that causes conflict with `theme.json`. ([36424](https://github.com/WordPress/gutenberg/pull/36424))
 
 #### Design Tools
-- Border Style Control: Update styling for consistency with border width control. ([37244](https://github.com/WordPress/gutenberg/pull/37244))
-- Border panel:
-   - Don't restore deselected border color when width gets changed. ([37049](https://github.com/WordPress/gutenberg/pull/37049))
-   - Update the value of the `ColorPicker` component when color is cleared. ([37048](https://github.com/WordPress/gutenberg/pull/37048))
-- Gradients
-   - Fix clearing a custom gradient from throwing a React warning. ([37051](https://github.com/WordPress/gutenberg/pull/37051))
-   - Enable adding custom gradient when gradients are disabled. ([36900](https://github.com/WordPress/gutenberg/pull/36900))
+
+-   Border Style Control: Update styling for consistency with border width control. ([37244](https://github.com/WordPress/gutenberg/pull/37244))
+-   Border panel:
+    -   Don't restore deselected border color when width gets changed. ([37049](https://github.com/WordPress/gutenberg/pull/37049))
+    -   Update the value of the `ColorPicker` component when color is cleared. ([37048](https://github.com/WordPress/gutenberg/pull/37048))
+-   Gradients
+    -   Fix clearing a custom gradient from throwing a React warning. ([37051](https://github.com/WordPress/gutenberg/pull/37051))
+    -   Enable adding custom gradient when gradients are disabled. ([36900](https://github.com/WordPress/gutenberg/pull/36900))
 
 #### Compatibility with Core and library code
-- Fix array key warning in block supports layout. ([37101](https://github.com/WordPress/gutenberg/pull/37101))
-- Templates: Search for old template names in the parent theme too. ([36910](https://github.com/WordPress/gutenberg/pull/36910))
-- Fix theme requirement validation when using WordPress 5.8. ([37226](https://github.com/WordPress/gutenberg/pull/37226))
-- Fix WordPress 5.9 check for conditionally running code. ([37235](https://github.com/WordPress/gutenberg/pull/37235))
-- Fix mistake in the`_remove_theme_attribute_in_block_template_content` function. ([37137](https://github.com/WordPress/gutenberg/pull/37137))
-- Gallery: Enable the new gallery block by default if running in Core. ([37134](https://github.com/WordPress/gutenberg/pull/37134))
 
+-   Fix array key warning in block supports layout. ([37101](https://github.com/WordPress/gutenberg/pull/37101))
+-   Templates: Search for old template names in the parent theme too. ([36910](https://github.com/WordPress/gutenberg/pull/36910))
+-   Fix theme requirement validation when using WordPress 5.8. ([37226](https://github.com/WordPress/gutenberg/pull/37226))
+-   Fix WordPress 5.9 check for conditionally running code. ([37235](https://github.com/WordPress/gutenberg/pull/37235))
+-   Fix mistake in the`_remove_theme_attribute_in_block_template_content` function. ([37137](https://github.com/WordPress/gutenberg/pull/37137))
+-   Gallery: Enable the new gallery block by default if running in Core. ([37134](https://github.com/WordPress/gutenberg/pull/37134))
 
 #### Packages
-- Core Data: Fix returning empty array in the `getEntityRecords` function for unknown entities. ([36984](https://github.com/WordPress/gutenberg/pull/36984))
-- Include `@babel/core` as a dependency where applicable. ([37328](https://github.com/WordPress/gutenberg/pull/37328))
-- Format library: Fix unsetting highlight color. ([37062](https://github.com/WordPress/gutenberg/pull/37062))
+
+-   Core Data: Fix returning empty array in the `getEntityRecords` function for unknown entities. ([36984](https://github.com/WordPress/gutenberg/pull/36984))
+-   Include `@babel/core` as a dependency where applicable. ([37328](https://github.com/WordPress/gutenberg/pull/37328))
+-   Format library: Fix unsetting highlight color. ([37062](https://github.com/WordPress/gutenberg/pull/37062))
 
 #### Block Editor
-- Mark the last change as persistent on save. ([36887](https://github.com/WordPress/gutenberg/pull/36887))
-- Fix content loss when ungrouping template parts or reusable blocks. ([37280](https://github.com/WordPress/gutenberg/pull/37280))
-- Simplify the `RESET_BLOCK` action to fix the loss of content when using template part focus mode. ([37283](https://github.com/WordPress/gutenberg/pull/37283))
+
+-   Mark the last change as persistent on save. ([36887](https://github.com/WordPress/gutenberg/pull/36887))
+-   Fix content loss when ungrouping template parts or reusable blocks. ([37280](https://github.com/WordPress/gutenberg/pull/37280))
+-   Simplify the `RESET_BLOCK` action to fix the loss of content when using template part focus mode. ([37283](https://github.com/WordPress/gutenberg/pull/37283))
 
 #### Post Editor
-- Multi-Entity Saving: Decode HTML entities in item titles. ([37353](https://github.com/WordPress/gutenberg/pull/37353))
+
+-   Multi-Entity Saving: Decode HTML entities in item titles. ([37353](https://github.com/WordPress/gutenberg/pull/37353))
 
 ### Documentation
 
-- Update documentation related to schemas. ([37294](https://github.com/WordPress/gutenberg/pull/37294))
-- Remove versioning in theme schema descriptions. ([37165](https://github.com/WordPress/gutenberg/pull/37165))
-- Fix the broken link on the plugin description page. ([37362](https://github.com/WordPress/gutenberg/pull/37362))
-
-- Handbook:
-   - Add information about skip links to the block theme overview. ([36555](https://github.com/WordPress/gutenberg/pull/36555))
-   - Add closing ticks for `blockGap` code example. ([37338](https://github.com/WordPress/gutenberg/pull/37338))
-   - Add how-to guide documentation template. ([36694](https://github.com/WordPress/gutenberg/pull/36694))
-   - Add link and details for `npx` in create block tutorial. ([37376](https://github.com/WordPress/gutenberg/pull/37376))
-   - Consolidate React Native documentation. ([36685](https://github.com/WordPress/gutenberg/pull/36685))
-   - Fix a link to the how-to guide template. ([37191](https://github.com/WordPress/gutenberg/pull/37191))
-   - Move classes used in the navigation block from the component to the new readme. ([37375](https://github.com/WordPress/gutenberg/pull/37375))
-   - Update Format API how-to guide. ([37298](https://github.com/WordPress/gutenberg/pull/37298))
-   - Update broken links. ([37121](https://github.com/WordPress/gutenberg/pull/37121))
-   - Improve formatting of headings in the contributors' guide. ([36689](https://github.com/WordPress/gutenberg/pull/36689))
-   - Fix `type` for `prefix` transformation. ([36362](https://github.com/WordPress/gutenberg/pull/36362))
-   - Fix broken links in the Resources section. ([37307](https://github.com/WordPress/gutenberg/pull/37307))
-   - Remove the semicolons from the JSON examples. ([37129](https://github.com/WordPress/gutenberg/pull/37129))
-
-- Packages:
-   - Block Editor:
-      - Add a documentation note about inner blocks and excerpts. ([36405](https://github.com/WordPress/gutenberg/pull/36405))
-      - Update example of usage for `suggestionsQuery` component. ([37281](https://github.com/WordPress/gutenberg/pull/37281))
-   - Componentes:
-      - Add missing changelog entries. ([37384](https://github.com/WordPress/gutenberg/pull/37384))
-      - Fix code formatting for card components. ([37268](https://github.com/WordPress/gutenberg/pull/37268))
-      - Fix importing from the wrong package. ([37192](https://github.com/WordPress/gutenberg/pull/37192))
-      - Fix missing link for shortcut documentation. ([36800](https://github.com/WordPress/gutenberg/pull/36800))
-      - Update `QueryControls` README.md. ([37233](https://github.com/WordPress/gutenberg/pull/37233))
-   - Site Editor: Update support documentation URL in the Welcome Guide. ([37176](https://github.com/WordPress/gutenberg/pull/37176))
+-   Update documentation related to schemas. ([37294](https://github.com/WordPress/gutenberg/pull/37294))
+-   Remove versioning in theme schema descriptions. ([37165](https://github.com/WordPress/gutenberg/pull/37165))
+-   Fix the broken link on the plugin description page. ([37362](https://github.com/WordPress/gutenberg/pull/37362))
+
+-   Handbook:
+
+    -   Add information about skip links to the block theme overview. ([36555](https://github.com/WordPress/gutenberg/pull/36555))
+    -   Add closing ticks for `blockGap` code example. ([37338](https://github.com/WordPress/gutenberg/pull/37338))
+    -   Add how-to guide documentation template. ([36694](https://github.com/WordPress/gutenberg/pull/36694))
+    -   Add link and details for `npx` in create block tutorial. ([37376](https://github.com/WordPress/gutenberg/pull/37376))
+    -   Consolidate React Native documentation. ([36685](https://github.com/WordPress/gutenberg/pull/36685))
+    -   Fix a link to the how-to guide template. ([37191](https://github.com/WordPress/gutenberg/pull/37191))
+    -   Move classes used in the navigation block from the component to the new readme. ([37375](https://github.com/WordPress/gutenberg/pull/37375))
+    -   Update Format API how-to guide. ([37298](https://github.com/WordPress/gutenberg/pull/37298))
+    -   Update broken links. ([37121](https://github.com/WordPress/gutenberg/pull/37121))
+    -   Improve formatting of headings in the contributors' guide. ([36689](https://github.com/WordPress/gutenberg/pull/36689))
+    -   Fix `type` for `prefix` transformation. ([36362](https://github.com/WordPress/gutenberg/pull/36362))
+    -   Fix broken links in the Resources section. ([37307](https://github.com/WordPress/gutenberg/pull/37307))
+    -   Remove the semicolons from the JSON examples. ([37129](https://github.com/WordPress/gutenberg/pull/37129))
+
+-   Packages:
+    -   Block Editor:
+        -   Add a documentation note about inner blocks and excerpts. ([36405](https://github.com/WordPress/gutenberg/pull/36405))
+        -   Update example of usage for `suggestionsQuery` component. ([37281](https://github.com/WordPress/gutenberg/pull/37281))
+    -   Componentes:
+        -   Add missing changelog entries. ([37384](https://github.com/WordPress/gutenberg/pull/37384))
+        -   Fix code formatting for card components. ([37268](https://github.com/WordPress/gutenberg/pull/37268))
+        -   Fix importing from the wrong package. ([37192](https://github.com/WordPress/gutenberg/pull/37192))
+        -   Fix missing link for shortcut documentation. ([36800](https://github.com/WordPress/gutenberg/pull/36800))
+        -   Update `QueryControls` README.md. ([37233](https://github.com/WordPress/gutenberg/pull/37233))
+    -   Site Editor: Update support documentation URL in the Welcome Guide. ([37176](https://github.com/WordPress/gutenberg/pull/37176))
 
 ### Code Quality
 
 #### Compatibility with Core
-- Better synchronization between Gutenberg and Core code. ([37141](https://github.com/WordPress/gutenberg/pull/37141))
-- Move WordPress 5.9 `wp-admin` menus compatibility code to `lib/compat` folder. ([37257](https://github.com/WordPress/gutenberg/pull/37257))
-- Move the block page templates hook into `compat/5.9` folder. ([37142](https://github.com/WordPress/gutenberg/pull/37142))
-- Move template loader hooks and functions into `lib/compat` folder. ([37149](https://github.com/WordPress/gutenberg/pull/37149))
-- Synchronize `wp_is_block_theme` function and `block-templates` block support with Core. ([37218](https://github.com/WordPress/gutenberg/pull/37218))
+
+-   Better synchronization between Gutenberg and Core code. ([37141](https://github.com/WordPress/gutenberg/pull/37141))
+-   Move WordPress 5.9 `wp-admin` menus compatibility code to `lib/compat` folder. ([37257](https://github.com/WordPress/gutenberg/pull/37257))
+-   Move the block page templates hook into `compat/5.9` folder. ([37142](https://github.com/WordPress/gutenberg/pull/37142))
+-   Move template loader hooks and functions into `lib/compat` folder. ([37149](https://github.com/WordPress/gutenberg/pull/37149))
+-   Synchronize `wp_is_block_theme` function and `block-templates` block support with Core. ([37218](https://github.com/WordPress/gutenberg/pull/37218))
 
 #### Global Styles
-- Do not register `Global Styles` custom post type in WordPress 5.9. ([37282](https://github.com/WordPress/gutenberg/pull/37282))
-- Port `Global Styles` code to `lib/compat/wordpress-5.9`:
-   - CSS custom properties. ([37334](https://github.com/WordPress/gutenberg/pull/37334))
-   - Front assets. ([37335](https://github.com/WordPress/gutenberg/pull/37335))
-- Rename `WP_Theme_JSON_Resolver` methods to make them compatible with Core. ([37393](https://github.com/WordPress/gutenberg/pull/37393))
+
+-   Do not register `Global Styles` custom post type in WordPress 5.9. ([37282](https://github.com/WordPress/gutenberg/pull/37282))
+-   Port `Global Styles` code to `lib/compat/wordpress-5.9`:
+    -   CSS custom properties. ([37334](https://github.com/WordPress/gutenberg/pull/37334))
+    -   Front assets. ([37335](https://github.com/WordPress/gutenberg/pull/37335))
+-   Rename `WP_Theme_JSON_Resolver` methods to make them compatible with Core. ([37393](https://github.com/WordPress/gutenberg/pull/37393))
 
 #### Packages
-- Dependency Extraction Webpack Plugin: Sort externalized dependencies report. ([37377](https://github.com/WordPress/gutenberg/pull/37377))
-- Block Editor:
-   - Iframe component: Use block settings to pass assets. ([37193](https://github.com/WordPress/gutenberg/pull/37193))
-   - Remove duplicate block styles. ([37133](https://github.com/WordPress/gutenberg/pull/37133))
-   - Specify the WordPress versions where API is deprecated. ([37150](https://github.com/WordPress/gutenberg/pull/37150))
-- Components
-   - Refactor `DatePicker` into a functional component. ([36835](https://github.com/WordPress/gutenberg/pull/36835))
-   - Storybook: Update to version 6.4. ([37367](https://github.com/WordPress/gutenberg/pull/37367))
-- Data
-   - Ensure that `redux` is listed as a dependency. ([37364](https://github.com/WordPress/gutenberg/pull/37364))
-   - @wordpress/data: Refactor `use-select` component in preparation for adding types. ([37017](https://github.com/WordPress/gutenberg/pull/37017))
-- Scripts: Update dependencies shared with other WordPress packages. ([37395](https://github.com/WordPress/gutenberg/pull/37395))
+
+-   Dependency Extraction Webpack Plugin: Sort externalized dependencies report. ([37377](https://github.com/WordPress/gutenberg/pull/37377))
+-   Block Editor:
+    -   Iframe component: Use block settings to pass assets. ([37193](https://github.com/WordPress/gutenberg/pull/37193))
+    -   Remove duplicate block styles. ([37133](https://github.com/WordPress/gutenberg/pull/37133))
+    -   Specify the WordPress versions where API is deprecated. ([37150](https://github.com/WordPress/gutenberg/pull/37150))
+-   Components
+    -   Refactor `DatePicker` into a functional component. ([36835](https://github.com/WordPress/gutenberg/pull/36835))
+    -   Storybook: Update to version 6.4. ([37367](https://github.com/WordPress/gutenberg/pull/37367))
+-   Data
+    -   Ensure that `redux` is listed as a dependency. ([37364](https://github.com/WordPress/gutenberg/pull/37364))
+    -   @wordpress/data: Refactor `use-select` component in preparation for adding types. ([37017](https://github.com/WordPress/gutenberg/pull/37017))
+-   Scripts: Update dependencies shared with other WordPress packages. ([37395](https://github.com/WordPress/gutenberg/pull/37395))
 
 #### Site Editor
-- Remove unused PHP code. ([36997](https://github.com/WordPress/gutenberg/pull/36997))
-- Revert `Site Editor: Set the <title> on the list page to be the same as the CPT name`. ([37270](https://github.com/WordPress/gutenberg/pull/37270))
+
+-   Remove unused PHP code. ([36997](https://github.com/WordPress/gutenberg/pull/36997))
+-   Revert `Site Editor: Set the <title> on the list page to be the same as the CPT name`. ([37270](https://github.com/WordPress/gutenberg/pull/37270))
 
 #### Block Library
-- Remove `gutenberg_` prefix from `@wordpress/block-library`. ([37341](https://github.com/WordPress/gutenberg/pull/37341))
-- Block Library: Rename Query Pagination blocks. ([37091](https://github.com/WordPress/gutenberg/pull/37091))
+
+-   Remove `gutenberg_` prefix from `@wordpress/block-library`. ([37341](https://github.com/WordPress/gutenberg/pull/37341))
+-   Block Library: Rename Query Pagination blocks. ([37091](https://github.com/WordPress/gutenberg/pull/37091))
 
 ### Tools
 
 #### Testing
-- End-to-end Tests:
-   - Increase delay in image block end-to-end test to fix intermittent failure when clearing URL field. ([37136](https://github.com/WordPress/gutenberg/pull/37136))
-   - Update Multi-Entity Saving test to improve reliability. ([37139](https://github.com/WordPress/gutenberg/pull/37139))
-   - Sanitize flaky test report file names. ([37390](https://github.com/WordPress/gutenberg/pull/37390))
-   - Retry login again after a bad nonce request to prevent intermittent test failures. ([37219](https://github.com/WordPress/gutenberg/pull/37219))
-   - Fix `Multi-entity saving` and `Template parts` related tests. ([37333](https://github.com/WordPress/gutenberg/pull/37333))
-   - Fix `Heading` test. ([37382](https://github.com/WordPress/gutenberg/pull/37382))
-   - Re-enable most of the navigation block end-to-end tests. ([37214](https://github.com/WordPress/gutenberg/pull/37214))
-   - Use global transients for PHPUnit tests. ([37122](https://github.com/WordPress/gutenberg/pull/37122))
-   - Fix usage of `useSetting('color.palette')`. ([37108](https://github.com/WordPress/gutenberg/pull/37108))
-   - Add tests for the new gallery hooks. ([36801](https://github.com/WordPress/gutenberg/pull/36801))
+
+-   End-to-end Tests:
+    -   Increase delay in image block end-to-end test to fix intermittent failure when clearing URL field. ([37136](https://github.com/WordPress/gutenberg/pull/37136))
+    -   Update Multi-Entity Saving test to improve reliability. ([37139](https://github.com/WordPress/gutenberg/pull/37139))
+    -   Sanitize flaky test report file names. ([37390](https://github.com/WordPress/gutenberg/pull/37390))
+    -   Retry login again after a bad nonce request to prevent intermittent test failures. ([37219](https://github.com/WordPress/gutenberg/pull/37219))
+    -   Fix `Multi-entity saving` and `Template parts` related tests. ([37333](https://github.com/WordPress/gutenberg/pull/37333))
+    -   Fix `Heading` test. ([37382](https://github.com/WordPress/gutenberg/pull/37382))
+    -   Re-enable most of the navigation block end-to-end tests. ([37214](https://github.com/WordPress/gutenberg/pull/37214))
+    -   Use global transients for PHPUnit tests. ([37122](https://github.com/WordPress/gutenberg/pull/37122))
+    -   Fix usage of `useSetting('color.palette')`. ([37108](https://github.com/WordPress/gutenberg/pull/37108))
+    -   Add tests for the new gallery hooks. ([36801](https://github.com/WordPress/gutenberg/pull/36801))
 
 #### Linting
-- ESLint:
-  - Add support for ESLint v8. ([36283](https://github.com/WordPress/gutenberg/pull/36283))
-  - Fix Babel config resolution when a custom ESLint config is present. ([37406](https://github.com/WordPress/gutenberg/pull/37406))
+
+-   ESLint:
+    -   Add support for ESLint v8. ([36283](https://github.com/WordPress/gutenberg/pull/36283))
+    -   Fix Babel config resolution when a custom ESLint config is present. ([37406](https://github.com/WordPress/gutenberg/pull/37406))
 
 #### Build Tooling
-- Specify PHP version in Composer. ([37007](https://github.com/WordPress/gutenberg/pull/37007))
-- Remove unused `jest-serializer-enzyme` dependency. ([37373](https://github.com/WordPress/gutenberg/pull/37373))
-- Remove some labels from the `Experiments` section of the changelog. ([37098](https://github.com/WordPress/gutenberg/pull/37098))
-- `npm`:
-   - Fix package dependencies issues discovered with `pnpm`. ([37396](https://github.com/WordPress/gutenberg/pull/37396))
-   - Use the latest minor version of webpack in Gutenberg. ([37371](https://github.com/WordPress/gutenberg/pull/37371))
-- Fix build failure on Windows. ([37189](https://github.com/WordPress/gutenberg/pull/37189))
 
+-   Specify PHP version in Composer. ([37007](https://github.com/WordPress/gutenberg/pull/37007))
+-   Remove unused `jest-serializer-enzyme` dependency. ([37373](https://github.com/WordPress/gutenberg/pull/37373))
+-   Remove some labels from the `Experiments` section of the changelog. ([37098](https://github.com/WordPress/gutenberg/pull/37098))
+-   `npm`:
+    -   Fix package dependencies issues discovered with `pnpm`. ([37396](https://github.com/WordPress/gutenberg/pull/37396))
+    -   Use the latest minor version of webpack in Gutenberg. ([37371](https://github.com/WordPress/gutenberg/pull/37371))
+-   Fix build failure on Windows. ([37189](https://github.com/WordPress/gutenberg/pull/37189))
 
 = 12.1.0 =
 
+## Changelog
+
 ### Enhancements
 
 #### Site Editor
-- Add Template List View. ([36379](https://github.com/WordPress/gutenberg/pull/36379))
-  - Show theme, plugin or author in Added By column with appropriate icon or avatar. ([36763](https://github.com/WordPress/gutenberg/pull/36763))
-  - Add success and error snackbars. ([36808](https://github.com/WordPress/gutenberg/pull/36808))
-  - Implement "Add New". ([36592](https://github.com/WordPress/gutenberg/pull/36592))
-  - Use table layout. ([36707](https://github.com/WordPress/gutenberg/pull/36707))
-  - Set the document title properly. ([36805](https://github.com/WordPress/gutenberg/pull/36805))
-  - Add rename action. ([36879](https://github.com/WordPress/gutenberg/pull/36879))
-  - Update delete template button. ([36815](https://github.com/WordPress/gutenberg/pull/36815))
-- Make Reusable blocks available in the Site Editor. ([36511](https://github.com/WordPress/gutenberg/pull/36511))
-- Remove the Styles link in Site Editor. ([36637](https://github.com/WordPress/gutenberg/pull/36637))
-- Update and align template descriptions. ([36000](https://github.com/WordPress/gutenberg/pull/36000))
-- Add icons to navigation sidebar items. ([36893](https://github.com/WordPress/gutenberg/pull/36893))
-- Allow editing custom template title. ([36933](https://github.com/WordPress/gutenberg/pull/36933))
-- Only render the site editor canvas when the global styles are loaded. ([36643](https://github.com/WordPress/gutenberg/pull/36643))
-- Remove extra border radius from the canvas. ([37022](https://github.com/WordPress/gutenberg/pull/37022))
-- Update navigation sidebar responsiveness. ([36638](https://github.com/WordPress/gutenberg/pull/36638))
-- Update resize handle styling in template part focus mode. ([36410](https://github.com/WordPress/gutenberg/pull/36410))
-
-#### Global Styles
-- Add elements support to the typography panel. ([36718](https://github.com/WordPress/gutenberg/pull/36718))
-- Add the gradient palette editor. ([36820](https://github.com/WordPress/gutenberg/pull/36820))
-- Add transparency support to the colors panel. ([36840](https://github.com/WordPress/gutenberg/pull/36840))
-- Add read-only duotone palette. ([36920](https://github.com/WordPress/gutenberg/pull/36920))
-- Do not show default palette if theme opts-out. ([36639](https://github.com/WordPress/gutenberg/pull/36639))
-- Make user able to change all color palette origins. ([36674](https://github.com/WordPress/gutenberg/pull/36674)) ([36747](https://github.com/WordPress/gutenberg/pull/36747)) ([36817](https://github.com/WordPress/gutenberg/pull/36817))
-- Rename `core` origin key to `default` for presets. ([36645](https://github.com/WordPress/gutenberg/pull/36645))
-- Count all color palette origins on the palette counter. ([36922](https://github.com/WordPress/gutenberg/pull/36922))
-- Add `appearanceTools` flag in theme.json to opt-in into appearance UI controls. ([36646](https://github.com/WordPress/gutenberg/pull/36646))
-- Switch the borders panel to ToolsPanel for displaying UI. ([33743](https://github.com/WordPress/gutenberg/pull/33743))
-- Improve the design and copy of the color panels. ([36959](https://github.com/WordPress/gutenberg/pull/36959)) ([36994](https://github.com/WordPress/gutenberg/pull/36994)) ([37015](https://github.com/WordPress/gutenberg/pull/37015)) ([37016](https://github.com/WordPress/gutenberg/pull/37016)) ([36921](https://github.com/WordPress/gutenberg/pull/36921)) ([36963](https://github.com/WordPress/gutenberg/pull/36963)) ([36622](https://github.com/WordPress/gutenberg/pull/36622)) ([36965](https://github.com/WordPress/gutenberg/pull/36965)) ([36819](https://github.com/WordPress/gutenberg/pull/36819)) ([36748](https://github.com/WordPress/gutenberg/pull/36748)) ([36940](https://github.com/WordPress/gutenberg/pull/36940)) ([36684](https://github.com/WordPress/gutenberg/pull/36684))
-- Schemas: Allow custom blocks in theme.json styles. ([36411](https://github.com/WordPress/gutenberg/pull/36411))
-
-#### Block Editor
-- Improve the position of the block appenders and behavior. ([36656](https://github.com/WordPress/gutenberg/pull/36656)) ([36605](https://github.com/WordPress/gutenberg/pull/36605))
-- Keyboard shortcuts: Double escape unselects all blocks. ([36945](https://github.com/WordPress/gutenberg/pull/36945))
-- Adjust order of theme blocks and reorder inserter items. ([36719](https://github.com/WordPress/gutenberg/pull/36719))
-- Block Editor List View: Use anchor elements instead of buttons. ([35655](https://github.com/WordPress/gutenberg/pull/35655))
-
-#### Block Library
--  Block Library: Add the Comments Pagination block. ([36872](https://github.com/WordPress/gutenberg/pull/36872))
-- Comment Author Avatar block: Add spacing support. ([36322](https://github.com/WordPress/gutenberg/pull/36322))
-- Navigation block: Only show submenu options and Show arrow button when relevant. ([36826](https://github.com/WordPress/gutenberg/pull/36826))
-- Navigation block: Implement suitable fallback for Nav block on front end of site when no menu selected. ([36849](https://github.com/WordPress/gutenberg/pull/36849)) ([36724](https://github.com/WordPress/gutenberg/pull/36724)) ([36850](https://github.com/WordPress/gutenberg/pull/36850)) ([36854](https://github.com/WordPress/gutenberg/pull/36854)) ([36740](https://github.com/WordPress/gutenberg/pull/36740))
-- Navigation block: Rename navigationMenuId to ref. ([36739](https://github.com/WordPress/gutenberg/pull/36739))
-- Navigation block: Automatically generate navigation post title. ([36760](https://github.com/WordPress/gutenberg/pull/36760))
-- Template Part block: Remove color, spacing, layout options and reusable block conversion. ([36571](https://github.com/WordPress/gutenberg/pull/36571)) ([36918](https://github.com/WordPress/gutenberg/pull/36918))
-- Gallery block: Turn on auto-migration of v1 Gallery blocks to v2 format when edited. ([36191](https://github.com/WordPress/gutenberg/pull/36191))
-- Update featured image placeholder graphic. ([36712](https://github.com/WordPress/gutenberg/pull/36712))
-- Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. ([36540](https://github.com/WordPress/gutenberg/pull/36540))
-
-#### Components
-- Font Size Picker: Allow non-integers as simple CSS values and in hints. ([36636](https://github.com/WordPress/gutenberg/pull/36636))
-- Divider: Improve `vertical` and RTL support. ([36579](https://github.com/WordPress/gutenberg/pull/36579))
-- ItemGroup: Experimenting with chevron icon. ([36654](https://github.com/WordPress/gutenberg/pull/36654))
-- Toggle Group Control: Add tooltip. ([36726](https://github.com/WordPress/gutenberg/pull/36726))
-- Modal: Support ref forwarding. ([36831](https://github.com/WordPress/gutenberg/pull/36831))
-- ZStack: Support RTL layouts when applying `offset`. ([36769](https://github.com/WordPress/gutenberg/pull/36769))
+
+-   Add Template List View. ([36379](https://github.com/WordPress/gutenberg/pull/36379))
+    -   Show theme, plugin or author in Added By column with appropriate icon or avatar. ([36763](https://github.com/WordPress/gutenberg/pull/36763))
+    -   Add success and error snackbars. ([36808](https://github.com/WordPress/gutenberg/pull/36808))
+    -   Implement "Add New". ([36592](https://github.com/WordPress/gutenberg/pull/36592))
+    -   Use table layout. ([36707](https://github.com/WordPress/gutenberg/pull/36707))
+    -   Set the document title properly. ([36805](https://github.com/WordPress/gutenberg/pull/36805))
+    -   Add rename action. ([36879](https://github.com/WordPress/gutenberg/pull/36879))
+    -   Update delete template button. ([36815](https://github.com/WordPress/gutenberg/pull/36815))
+-   Make Reusable blocks available in the Site Editor. ([36511](https://github.com/WordPress/gutenberg/pull/36511))
+-   Remove the Styles link in Site Editor. ([36637](https://github.com/WordPress/gutenberg/pull/36637))
+-   Update and align template descriptions. ([36000](https://github.com/WordPress/gutenberg/pull/36000))
+-   Add icons to navigation sidebar items. ([36893](https://github.com/WordPress/gutenberg/pull/36893))
+-   Allow editing custom template title. ([36933](https://github.com/WordPress/gutenberg/pull/36933))
+-   Only render the site editor canvas when the global styles are loaded. ([36643](https://github.com/WordPress/gutenberg/pull/36643))
+-   Remove extra border radius from the canvas. ([37022](https://github.com/WordPress/gutenberg/pull/37022))
+-   Update navigation sidebar responsiveness. ([36638](https://github.com/WordPress/gutenberg/pull/36638))
+-   Update resize handle styling in template part focus mode. ([36410](https://github.com/WordPress/gutenberg/pull/36410))
+
+#### Global Styles
+
+-   Add elements support to the typography panel. ([36718](https://github.com/WordPress/gutenberg/pull/36718))
+-   Add the gradient palette editor. ([36820](https://github.com/WordPress/gutenberg/pull/36820))
+-   Add transparency support to the colors panel. ([36840](https://github.com/WordPress/gutenberg/pull/36840))
+-   Add read-only duotone palette. ([36920](https://github.com/WordPress/gutenberg/pull/36920))
+-   Do not show default palette if theme opts-out. ([36639](https://github.com/WordPress/gutenberg/pull/36639))
+-   Make user able to change all color palette origins. ([36674](https://github.com/WordPress/gutenberg/pull/36674)) ([36747](https://github.com/WordPress/gutenberg/pull/36747)) ([36817](https://github.com/WordPress/gutenberg/pull/36817))
+-   Rename `core` origin key to `default` for presets. ([36645](https://github.com/WordPress/gutenberg/pull/36645))
+-   Count all color palette origins on the palette counter. ([36922](https://github.com/WordPress/gutenberg/pull/36922))
+-   Add `appearanceTools` flag in theme.json to opt-in into appearance UI controls. ([36646](https://github.com/WordPress/gutenberg/pull/36646))
+-   Switch the borders panel to ToolsPanel for displaying UI. ([33743](https://github.com/WordPress/gutenberg/pull/33743))
+-   Improve the design and copy of the color panels. ([36959](https://github.com/WordPress/gutenberg/pull/36959)) ([36994](https://github.com/WordPress/gutenberg/pull/36994)) ([37015](https://github.com/WordPress/gutenberg/pull/37015)) ([37016](https://github.com/WordPress/gutenberg/pull/37016)) ([36921](https://github.com/WordPress/gutenberg/pull/36921)) ([36963](https://github.com/WordPress/gutenberg/pull/36963)) ([36622](https://github.com/WordPress/gutenberg/pull/36622)) ([36965](https://github.com/WordPress/gutenberg/pull/36965)) ([36819](https://github.com/WordPress/gutenberg/pull/36819)) ([36748](https://github.com/WordPress/gutenberg/pull/36748)) ([36940](https://github.com/WordPress/gutenberg/pull/36940)) ([36684](https://github.com/WordPress/gutenberg/pull/36684))
+-   Schemas: Allow custom blocks in theme.json styles. ([36411](https://github.com/WordPress/gutenberg/pull/36411))
+
+#### Block Editor
+
+-   Improve the position of the block appenders and behavior. ([36656](https://github.com/WordPress/gutenberg/pull/36656)) ([36605](https://github.com/WordPress/gutenberg/pull/36605))
+-   Keyboard shortcuts: Double escape unselects all blocks. ([36945](https://github.com/WordPress/gutenberg/pull/36945))
+-   Adjust order of theme blocks and reorder inserter items. ([36719](https://github.com/WordPress/gutenberg/pull/36719))
+-   Block Editor List View: Use anchor elements instead of buttons. ([35655](https://github.com/WordPress/gutenberg/pull/35655))
+
+#### Block Library
+
+-   Block Library: Add the Comments Pagination block. ([36872](https://github.com/WordPress/gutenberg/pull/36872))
+-   Comment Author Avatar block: Add spacing support. ([36322](https://github.com/WordPress/gutenberg/pull/36322))
+-   Navigation block: Only show submenu options and Show arrow button when relevant. ([36826](https://github.com/WordPress/gutenberg/pull/36826))
+-   Navigation block: Implement suitable fallback for Nav block on front end of site when no menu selected. ([36849](https://github.com/WordPress/gutenberg/pull/36849)) ([36724](https://github.com/WordPress/gutenberg/pull/36724)) ([36850](https://github.com/WordPress/gutenberg/pull/36850)) ([36854](https://github.com/WordPress/gutenberg/pull/36854)) ([36740](https://github.com/WordPress/gutenberg/pull/36740))
+-   Navigation block: Rename navigationMenuId to ref. ([36739](https://github.com/WordPress/gutenberg/pull/36739))
+-   Navigation block: Automatically generate navigation post title. ([36760](https://github.com/WordPress/gutenberg/pull/36760))
+-   Template Part block: Remove color, spacing, layout options and reusable block conversion. ([36571](https://github.com/WordPress/gutenberg/pull/36571)) ([36918](https://github.com/WordPress/gutenberg/pull/36918))
+-   Gallery block: Turn on auto-migration of v1 Gallery blocks to v2 format when edited. ([36191](https://github.com/WordPress/gutenberg/pull/36191))
+-   Update featured image placeholder graphic. ([36712](https://github.com/WordPress/gutenberg/pull/36712))
+-   Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. ([36540](https://github.com/WordPress/gutenberg/pull/36540))
+
+#### Components
+
+-   Font Size Picker: Allow non-integers as simple CSS values and in hints. ([36636](https://github.com/WordPress/gutenberg/pull/36636))
+-   Divider: Improve `vertical` and RTL support. ([36579](https://github.com/WordPress/gutenberg/pull/36579))
+-   ItemGroup: Experimenting with chevron icon. ([36654](https://github.com/WordPress/gutenberg/pull/36654))
+-   Toggle Group Control: Add tooltip. ([36726](https://github.com/WordPress/gutenberg/pull/36726))
+-   Modal: Support ref forwarding. ([36831](https://github.com/WordPress/gutenberg/pull/36831))
+-   ZStack: Support RTL layouts when applying `offset`. ([36769](https://github.com/WordPress/gutenberg/pull/36769))
 
 #### Themes
-- Move the theme editor under tools for FSE themes. ([36723](https://github.com/WordPress/gutenberg/pull/36723))
-- Update the block theme folders to templates and parts. ([36647](https://github.com/WordPress/gutenberg/pull/36647))
 
+-   Move the theme editor under tools for FSE themes. ([36723](https://github.com/WordPress/gutenberg/pull/36723))
+-   Update the block theme folders to templates and parts. ([36647](https://github.com/WordPress/gutenberg/pull/36647))
 
 ### Bug Fixes
 
 #### Global Styles
-- Make the core color palette opt-in for themes with not `theme.json`. ([36496](https://github.com/WordPress/gutenberg/pull/36496))
-- Fix: Apply by slug on all origins. ([36841](https://github.com/WordPress/gutenberg/pull/36841))
-- Fix: Theme colors cannot override defaults. ([36811](https://github.com/WordPress/gutenberg/pull/36811))
+
+-   Make the core color palette opt-in for themes with not `theme.json`. ([36496](https://github.com/WordPress/gutenberg/pull/36496))
+-   Fix: Apply by slug on all origins. ([36841](https://github.com/WordPress/gutenberg/pull/36841))
+-   Fix: Theme colors cannot override defaults. ([36811](https://github.com/WordPress/gutenberg/pull/36811))
 
 #### Block Library
-- Cover block: Fix undo trap. ([36807](https://github.com/WordPress/gutenberg/pull/36807))
-- Navigation block: Add page list to navigation direct insert conditions. ([36591](https://github.com/WordPress/gutenberg/pull/36591))
-- Navigation block: Fix Nav block editing wrong entity on creation of new Menu. ([36880](https://github.com/WordPress/gutenberg/pull/36880))
-- Navigation block: Scale submenu icon. ([36714](https://github.com/WordPress/gutenberg/pull/36714)) ([36948](https://github.com/WordPress/gutenberg/pull/36948))
-- Navigation block: Fix non existent menu handling. ([36507](https://github.com/WordPress/gutenberg/pull/36507))
-- Navigation block: Fix page list missing button styles when set to open on click. ([36601](https://github.com/WordPress/gutenberg/pull/36601))
-- Navigation block: Include cascading properties in deprecation. ([36432](https://github.com/WordPress/gutenberg/pull/36432))
-- Navigation block: Remove absorb toolbar prop. ([36990](https://github.com/WordPress/gutenberg/pull/36990))
-- Navigation block: Add accessible labelling to submenu buttons. ([36631](https://github.com/WordPress/gutenberg/pull/36631))
-- Navigation block: Fix space-between. ([36441](https://github.com/WordPress/gutenberg/pull/36441))
-- Template Part block: Fix slug generation when creating through the block placeholder. ([36764](https://github.com/WordPress/gutenberg/pull/36764))
-- Gallery block: Allow clicks within replace media placeholder state. ([36804](https://github.com/WordPress/gutenberg/pull/36804))
-- Gallery block: Fix stuck image size options loader. ([36806](https://github.com/WordPress/gutenberg/pull/36806))
-- Post Featured Image: Add a "Reset" button. ([36572](https://github.com/WordPress/gutenberg/pull/36572))
-- Post Title block: Fix render error when setting Page to homepage. ([36786](https://github.com/WordPress/gutenberg/pull/36786))
-- Query Pagination Next/Previous blocks: Remove text and link color support. ([36954](https://github.com/WordPress/gutenberg/pull/36954))
+
+-   Cover block: Fix undo trap. ([36807](https://github.com/WordPress/gutenberg/pull/36807))
+-   Navigation block: Add page list to navigation direct insert conditions. ([36591](https://github.com/WordPress/gutenberg/pull/36591))
+-   Navigation block: Fix Nav block editing wrong entity on creation of new Menu. ([36880](https://github.com/WordPress/gutenberg/pull/36880))
+-   Navigation block: Scale submenu icon. ([36714](https://github.com/WordPress/gutenberg/pull/36714)) ([36948](https://github.com/WordPress/gutenberg/pull/36948))
+-   Navigation block: Fix non existent menu handling. ([36507](https://github.com/WordPress/gutenberg/pull/36507))
+-   Navigation block: Fix page list missing button styles when set to open on click. ([36601](https://github.com/WordPress/gutenberg/pull/36601))
+-   Navigation block: Include cascading properties in deprecation. ([36432](https://github.com/WordPress/gutenberg/pull/36432))
+-   Navigation block: Remove absorb toolbar prop. ([36990](https://github.com/WordPress/gutenberg/pull/36990))
+-   Navigation block: Add accessible labelling to submenu buttons. ([36631](https://github.com/WordPress/gutenberg/pull/36631))
+-   Navigation block: Fix space-between. ([36441](https://github.com/WordPress/gutenberg/pull/36441))
+-   Template Part block: Fix slug generation when creating through the block placeholder. ([36764](https://github.com/WordPress/gutenberg/pull/36764))
+-   Gallery block: Allow clicks within replace media placeholder state. ([36804](https://github.com/WordPress/gutenberg/pull/36804))
+-   Gallery block: Fix stuck image size options loader. ([36806](https://github.com/WordPress/gutenberg/pull/36806))
+-   Post Featured Image: Add a "Reset" button. ([36572](https://github.com/WordPress/gutenberg/pull/36572))
+-   Post Title block: Fix render error when setting Page to homepage. ([36786](https://github.com/WordPress/gutenberg/pull/36786))
+-   Query Pagination Next/Previous blocks: Remove text and link color support. ([36954](https://github.com/WordPress/gutenberg/pull/36954))
 
 #### Site Editor
-- Stabilize theme export Rest API endpoint. ([36559](https://github.com/WordPress/gutenberg/pull/36559)) ([36908](https://github.com/WordPress/gutenberg/pull/36908))
-- Template list view fixes. ([36947](https://github.com/WordPress/gutenberg/pull/36947)) ([36822](https://github.com/WordPress/gutenberg/pull/36822)) ([36705](https://github.com/WordPress/gutenberg/pull/36705))
-- Templates Rest API endpoint: Add missing 'is_custom' prop. ([36911](https://github.com/WordPress/gutenberg/pull/36911))
-- Templates Rest API endpoint: Add origin and author. ([36896](https://github.com/WordPress/gutenberg/pull/36896))
-- Validate the postType query argument. ([36706](https://github.com/WordPress/gutenberg/pull/36706))
-- Fix site editor region navigation. ([36709](https://github.com/WordPress/gutenberg/pull/36709))
-- Navigation Sidebar: Add aria-current="page" to active navigation item. ([36946](https://github.com/WordPress/gutenberg/pull/36946))
-- Navigation Sidebar: Highlight "Site" in the navigation panel. ([36762](https://github.com/WordPress/gutenberg/pull/36762))
-- Navigation Sidebar: Show all templates and template parts on the site editor list screens. ([36761](https://github.com/WordPress/gutenberg/pull/36761))
+
+-   Stabilize theme export Rest API endpoint. ([36559](https://github.com/WordPress/gutenberg/pull/36559)) ([36908](https://github.com/WordPress/gutenberg/pull/36908))
+-   Template list view fixes. ([36947](https://github.com/WordPress/gutenberg/pull/36947)) ([36822](https://github.com/WordPress/gutenberg/pull/36822)) ([36705](https://github.com/WordPress/gutenberg/pull/36705))
+-   Templates Rest API endpoint: Add missing 'is_custom' prop. ([36911](https://github.com/WordPress/gutenberg/pull/36911))
+-   Templates Rest API endpoint: Add origin and author. ([36896](https://github.com/WordPress/gutenberg/pull/36896))
+-   Validate the postType query argument. ([36706](https://github.com/WordPress/gutenberg/pull/36706))
+-   Fix site editor region navigation. ([36709](https://github.com/WordPress/gutenberg/pull/36709))
+-   Navigation Sidebar: Add aria-current="page" to active navigation item. ([36946](https://github.com/WordPress/gutenberg/pull/36946))
+-   Navigation Sidebar: Highlight "Site" in the navigation panel. ([36762](https://github.com/WordPress/gutenberg/pull/36762))
+-   Navigation Sidebar: Show all templates and template parts on the site editor list screens. ([36761](https://github.com/WordPress/gutenberg/pull/36761))
 
 #### Components
-- Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. ([36941](https://github.com/WordPress/gutenberg/pull/36941))
-- ColorPicker: Replace hardcoded "blue" with theme color. ([36153](https://github.com/WordPress/gutenberg/pull/36153))
-- Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. ([36588](https://github.com/WordPress/gutenberg/pull/36588))
-- DateTimePicker: Set PM hours correctly. ([36878](https://github.com/WordPress/gutenberg/pull/36878))
-- LinkControl: Fix wordbreak for URLs. ([36993](https://github.com/WordPress/gutenberg/pull/36993))
-- Offset the parent iframe when computing Popover position. ([36876](https://github.com/WordPress/gutenberg/pull/36876))
-- ToolsPanel: Prevent tools panel menu increasing empty panel height. ([36895](https://github.com/WordPress/gutenberg/pull/36895))
-- Update destructive tertiary button styles, and template list. ([36915](https://github.com/WordPress/gutenberg/pull/36915))
+
+-   Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. ([36941](https://github.com/WordPress/gutenberg/pull/36941))
+-   ColorPicker: Replace hardcoded "blue" with theme color. ([36153](https://github.com/WordPress/gutenberg/pull/36153))
+-   Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. ([36588](https://github.com/WordPress/gutenberg/pull/36588))
+-   DateTimePicker: Set PM hours correctly. ([36878](https://github.com/WordPress/gutenberg/pull/36878))
+-   LinkControl: Fix wordbreak for URLs. ([36993](https://github.com/WordPress/gutenberg/pull/36993))
+-   Offset the parent iframe when computing Popover position. ([36876](https://github.com/WordPress/gutenberg/pull/36876))
+-   ToolsPanel: Prevent tools panel menu increasing empty panel height. ([36895](https://github.com/WordPress/gutenberg/pull/36895))
+-   Update destructive tertiary button styles, and template list. ([36915](https://github.com/WordPress/gutenberg/pull/36915))
 
 #### Themes
-- Block Templates: Fix PHP notices on WP 5.8. ([36964](https://github.com/WordPress/gutenberg/pull/36964))
-- Don't try and render unstable location if Nav block has ID. ([36863](https://github.com/WordPress/gutenberg/pull/36863))
+
+-   Block Templates: Fix PHP notices on WP 5.8. ([36964](https://github.com/WordPress/gutenberg/pull/36964))
+-   Don't try and render unstable location if Nav block has ID. ([36863](https://github.com/WordPress/gutenberg/pull/36863))
 
 #### Design Tools
-- Border panel: Update to display multiple palette origins. ([36753](https://github.com/WordPress/gutenberg/pull/36753))
-- Cover: Move BoxControlVisualizer in the markup to make it visible. ([36635](https://github.com/WordPress/gutenberg/pull/36635))
-- Fix duotone first render in Safari. ([36754](https://github.com/WordPress/gutenberg/pull/36754))
+
+-   Border panel: Update to display multiple palette origins. ([36753](https://github.com/WordPress/gutenberg/pull/36753))
+-   Cover: Move BoxControlVisualizer in the markup to make it visible. ([36635](https://github.com/WordPress/gutenberg/pull/36635))
+-   Fix duotone first render in Safari. ([36754](https://github.com/WordPress/gutenberg/pull/36754))
 
 #### Icons
-- [Icons]: Fix Comment Author Name icon. ([36738](https://github.com/WordPress/gutenberg/pull/36738))
-- [Icons]: Fix property names for Comment Author Avatar icon. ([36737](https://github.com/WordPress/gutenberg/pull/36737))
 
-#### Milaceanous
+-   [Icons]: Fix Comment Author Name icon. ([36738](https://github.com/WordPress/gutenberg/pull/36738))
+-   [Icons]: Fix property names for Comment Author Avatar icon. ([36737](https://github.com/WordPress/gutenberg/pull/36737))
 
-- Block Styles: Add a separating margin to the default picker. ([36976](https://github.com/WordPress/gutenberg/pull/36976))
-- Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
-- Data package: Update types and fix type error. ([36190](https://github.com/WordPress/gutenberg/pull/36190))
-- Writing Flow Multi-select: Ensure post title content editable after multi-select. ([36843](https://github.com/WordPress/gutenberg/pull/36843))
-- Insertion point bar: Hide onBlur and onMouseLeave. ([36798](https://github.com/WordPress/gutenberg/pull/36798))
-- Dependency Extraction Webpack Plugin: Make the plugin work when using `optimizations.runtimeChunk = 'single'`. ([26214](https://github.com/WordPress/gutenberg/pull/26214))
-- Fix document typo. ([36776](https://github.com/WordPress/gutenberg/pull/36776))
-- Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. ([35986](https://github.com/WordPress/gutenberg/pull/35986))
-- Hide the columns inserter in pattern previews. ([36626](https://github.com/WordPress/gutenberg/pull/36626))
-- Update theme.json version. ([36917](https://github.com/WordPress/gutenberg/pull/36917))
-- Multi-entity save: Only set site entity to pending if really saving. ([36573](https://github.com/WordPress/gutenberg/pull/36573))
-- Widgets Editor: Add CSS fix for wp_footer called multiple times. ([36759](https://github.com/WordPress/gutenberg/pull/36759))
-- Fix the templates REST API endpoint for the almost pretty permalink config. ([36881](https://github.com/WordPress/gutenberg/pull/36881))
+#### Milaceanous
 
+-   Block Styles: Add a separating margin to the default picker. ([36976](https://github.com/WordPress/gutenberg/pull/36976))
+-   Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
+-   Data package: Update types and fix type error. ([36190](https://github.com/WordPress/gutenberg/pull/36190))
+-   Writing Flow Multi-select: Ensure post title content editable after multi-select. ([36843](https://github.com/WordPress/gutenberg/pull/36843))
+-   Insertion point bar: Hide onBlur and onMouseLeave. ([36798](https://github.com/WordPress/gutenberg/pull/36798))
+-   Dependency Extraction Webpack Plugin: Make the plugin work when using `optimizations.runtimeChunk = 'single'`. ([26214](https://github.com/WordPress/gutenberg/pull/26214))
+-   Fix document typo. ([36776](https://github.com/WordPress/gutenberg/pull/36776))
+-   Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. ([35986](https://github.com/WordPress/gutenberg/pull/35986))
+-   Hide the columns inserter in pattern previews. ([36626](https://github.com/WordPress/gutenberg/pull/36626))
+-   Update theme.json version. ([36917](https://github.com/WordPress/gutenberg/pull/36917))
+-   Multi-entity save: Only set site entity to pending if really saving. ([36573](https://github.com/WordPress/gutenberg/pull/36573))
+-   Widgets Editor: Add CSS fix for wp_footer called multiple times. ([36759](https://github.com/WordPress/gutenberg/pull/36759))
+-   Fix the templates REST API endpoint for the almost pretty permalink config. ([36881](https://github.com/WordPress/gutenberg/pull/36881))
 
 ### Performance
 
-- Improve performance of wp_navigation lookup. ([36891](https://github.com/WordPress/gutenberg/pull/36891))
-
+-   Improve performance of wp_navigation lookup. ([36891](https://github.com/WordPress/gutenberg/pull/36891))
 
 ### Experiments
 
-- Add `__unstable-large` size variant on `InputControl` `SelectControl` `UnitControl`. ([35646](https://github.com/WordPress/gutenberg/pull/35646))
-- Add experimental `ConfirmDialog`. ([34153](https://github.com/WordPress/gutenberg/pull/34153))
-
+-   Add `__unstable-large` size variant on `InputControl` `SelectControl` `UnitControl`. ([35646](https://github.com/WordPress/gutenberg/pull/35646))
+-   Add experimental `ConfirmDialog`. ([34153](https://github.com/WordPress/gutenberg/pull/34153))
 
 ### Documentation
 
-- Add brief information about blockGap to the theme.json how-to guide. ([36558](https://github.com/WordPress/gutenberg/pull/36558))
-- Add placeholder in URLInput documentation. ([36799](https://github.com/WordPress/gutenberg/pull/36799))
-- Block Supports: Update block supports documentation after typography reshaping. ([36894](https://github.com/WordPress/gutenberg/pull/36894))
-- Alphabetize the How to Guides section. ([35904](https://github.com/WordPress/gutenberg/pull/35904))
-- Fix broken link to @wordpress/stylelint-config. ([36936](https://github.com/WordPress/gutenberg/pull/36936))
-- Improvements on `Create a Block Tutorial` from `Block Editor handbook`. ([36553](https://github.com/WordPress/gutenberg/pull/36553))
-- Update history.md with description of the page. ([36888](https://github.com/WordPress/gutenberg/pull/36888))
-- Update Getting Started with info to stay informed. ([36498](https://github.com/WordPress/gutenberg/pull/36498))
-- Update Pattern block category and add documentation. ([36144](https://github.com/WordPress/gutenberg/pull/36144))
-- Various inline docblock corrections. ([36793](https://github.com/WordPress/gutenberg/pull/36793))
-- ToolsPanel: Update panel readme and stories. ([36557](https://github.com/WordPress/gutenberg/pull/36557))
-- Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). ([36744](https://github.com/WordPress/gutenberg/pull/36744))
-
+-   Add brief information about blockGap to the theme.json how-to guide. ([36558](https://github.com/WordPress/gutenberg/pull/36558))
+-   Add placeholder in URLInput documentation. ([36799](https://github.com/WordPress/gutenberg/pull/36799))
+-   Block Supports: Update block supports documentation after typography reshaping. ([36894](https://github.com/WordPress/gutenberg/pull/36894))
+-   Alphabetize the How to Guides section. ([35904](https://github.com/WordPress/gutenberg/pull/35904))
+-   Fix broken link to @wordpress/stylelint-config. ([36936](https://github.com/WordPress/gutenberg/pull/36936))
+-   Improvements on `Create a Block Tutorial` from `Block Editor handbook`. ([36553](https://github.com/WordPress/gutenberg/pull/36553))
+-   Update history.md with description of the page. ([36888](https://github.com/WordPress/gutenberg/pull/36888))
+-   Update Getting Started with info to stay informed. ([36498](https://github.com/WordPress/gutenberg/pull/36498))
+-   Update Pattern block category and add documentation. ([36144](https://github.com/WordPress/gutenberg/pull/36144))
+-   Various inline docblock corrections. ([36793](https://github.com/WordPress/gutenberg/pull/36793))
+-   ToolsPanel: Update panel readme and stories. ([36557](https://github.com/WordPress/gutenberg/pull/36557))
+-   Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). ([36744](https://github.com/WordPress/gutenberg/pull/36744))
 
 ### Code Quality
 
-- Blocks: Refactor generator-based actions to thunks. ([36468](https://github.com/WordPress/gutenberg/pull/36468))
-- Remove useless bubblesVirtually prop from BlockInspector. ([37024](https://github.com/WordPress/gutenberg/pull/37024))
-- Remove EditPostSettings context provider. ([36949](https://github.com/WordPress/gutenberg/pull/36949))
-- Report dependencies externalized with Dependency Extraction Plugin. ([35106](https://github.com/WordPress/gutenberg/pull/35106))
-- Comment Author Avatar block: Escape styles attribute. ([36988](https://github.com/WordPress/gutenberg/pull/36988))
-- Clarify i18n context for PostTemplateActions's "New" label. ([36679](https://github.com/WordPress/gutenberg/pull/36679))
-- Data: Remove usage of deprecated register methods. ([36344](https://github.com/WordPress/gutenberg/pull/36344))
+-   Blocks: Refactor generator-based actions to thunks. ([36468](https://github.com/WordPress/gutenberg/pull/36468))
+-   Remove useless bubblesVirtually prop from BlockInspector. ([37024](https://github.com/WordPress/gutenberg/pull/37024))
+-   Remove EditPostSettings context provider. ([36949](https://github.com/WordPress/gutenberg/pull/36949))
+-   Report dependencies externalized with Dependency Extraction Plugin. ([35106](https://github.com/WordPress/gutenberg/pull/35106))
+-   Comment Author Avatar block: Escape styles attribute. ([36988](https://github.com/WordPress/gutenberg/pull/36988))
+-   Clarify i18n context for PostTemplateActions's "New" label. ([36679](https://github.com/WordPress/gutenberg/pull/36679))
+-   Data: Remove usage of deprecated register methods. ([36344](https://github.com/WordPress/gutenberg/pull/36344))
 
 #### Global Styles
-- Move Global Styles code to `lib/compat/wordpress-5.9` folder. ([36978](https://github.com/WordPress/gutenberg/pull/36978))
-- Rename `gutenberg_` to `wp_` for some functions that land in WordPress 5.9. ([36913](https://github.com/WordPress/gutenberg/pull/36913))
-- Update global styles public API. ([36610](https://github.com/WordPress/gutenberg/pull/36610))
-- Update the `WP_Theme_JSON_Gutenberg` class to be like the core one. ([36973](https://github.com/WordPress/gutenberg/pull/36973))
-- Update the `WP_Theme_JSON_Resolver_Gutenberg` class to be like the core one. ([36974](https://github.com/WordPress/gutenberg/pull/36974))
-- `theme.json`: Sort keys alphabetically. ([36968](https://github.com/WordPress/gutenberg/pull/36968))
-- Update function names for the public global styles API functions. ([36907](https://github.com/WordPress/gutenberg/pull/36907))
+
+-   Move Global Styles code to `lib/compat/wordpress-5.9` folder. ([36978](https://github.com/WordPress/gutenberg/pull/36978))
+-   Rename `gutenberg_` to `wp_` for some functions that land in WordPress 5.9. ([36913](https://github.com/WordPress/gutenberg/pull/36913))
+-   Update global styles public API. ([36610](https://github.com/WordPress/gutenberg/pull/36610))
+-   Update the `WP_Theme_JSON_Gutenberg` class to be like the core one. ([36973](https://github.com/WordPress/gutenberg/pull/36973))
+-   Update the `WP_Theme_JSON_Resolver_Gutenberg` class to be like the core one. ([36974](https://github.com/WordPress/gutenberg/pull/36974))
+-   `theme.json`: Sort keys alphabetically. ([36968](https://github.com/WordPress/gutenberg/pull/36968))
+-   Update function names for the public global styles API functions. ([36907](https://github.com/WordPress/gutenberg/pull/36907))
 
 #### Block Library
-- Navigation: Remove outdated separate "Home" link styles. ([36608](https://github.com/WordPress/gutenberg/pull/36608))
-- Post Featured Image: Remove withNotices HOC. ([36596](https://github.com/WordPress/gutenberg/pull/36596))
-- [Comment Author Avatar]: Remove extraneous color link support flag. ([36956](https://github.com/WordPress/gutenberg/pull/36956))
-- Deprecate navigation areas. ([36981](https://github.com/WordPress/gutenberg/pull/36981)) ([36727](https://github.com/WordPress/gutenberg/pull/36727))
-- Remove unstable max pages attribute from Nav block. ([36877](https://github.com/WordPress/gutenberg/pull/36877))
-- Remove reference to gutenberg_, swap with wp_. ([36652](https://github.com/WordPress/gutenberg/pull/36652))
-- Add plugin meta data to Nav Area block deprecation notice. ([36777](https://github.com/WordPress/gutenberg/pull/36777))
+
+-   Navigation: Remove outdated separate "Home" link styles. ([36608](https://github.com/WordPress/gutenberg/pull/36608))
+-   Post Featured Image: Remove withNotices HOC. ([36596](https://github.com/WordPress/gutenberg/pull/36596))
+-   [Comment Author Avatar]: Remove extraneous color link support flag. ([36956](https://github.com/WordPress/gutenberg/pull/36956))
+-   Deprecate navigation areas. ([36981](https://github.com/WordPress/gutenberg/pull/36981)) ([36727](https://github.com/WordPress/gutenberg/pull/36727))
+-   Remove unstable max pages attribute from Nav block. ([36877](https://github.com/WordPress/gutenberg/pull/36877))
+-   Remove reference to gutenberg*, swap with wp*. ([36652](https://github.com/WordPress/gutenberg/pull/36652))
+-   Add plugin meta data to Nav Area block deprecation notice. ([36777](https://github.com/WordPress/gutenberg/pull/36777))
 
 #### Testing
-- Reorganize end-to-end tests folders and files. ([36734](https://github.com/WordPress/gutenberg/pull/36734))
-- Scripts: Upgrade Puppeteer to v11. ([36040](https://github.com/WordPress/gutenberg/pull/36040))
-- Update template controller unit test now that author support is in WP core. ([36987](https://github.com/WordPress/gutenberg/pull/36987))
-- end-to-end Tests: Fix failing image end-to-end test by waiting for required element. ([36982](https://github.com/WordPress/gutenberg/pull/36982))
-- Remove block template resolution unit tests. ([36855](https://github.com/WordPress/gutenberg/pull/36855))
 
+-   Reorganize end-to-end tests folders and files. ([36734](https://github.com/WordPress/gutenberg/pull/36734))
+-   Scripts: Upgrade Puppeteer to v11. ([36040](https://github.com/WordPress/gutenberg/pull/36040))
+-   Update template controller unit test now that author support is in WP core. ([36987](https://github.com/WordPress/gutenberg/pull/36987))
+-   end-to-end Tests: Fix failing image end-to-end test by waiting for required element. ([36982](https://github.com/WordPress/gutenberg/pull/36982))
+-   Remove block template resolution unit tests. ([36855](https://github.com/WordPress/gutenberg/pull/36855))
 
 = 12.0.2 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Variations
-- Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
-
-
-
 
+-   Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
 
 = 12.1.0-rc.1 =
 
-
+## Changelog
 
 ### Enhancements
 
 #### Components
-- Add `__unstable-large` size variant on `InputControl` `SelectControl` `UnitControl`. ([35646](https://github.com/WordPress/gutenberg/pull/35646))
-- Font Size Picker: Allow non-integers as simple CSS values and in hints. ([36636](https://github.com/WordPress/gutenberg/pull/36636))
-- Improve `vertical` and RTL support for `Divider`. ([36579](https://github.com/WordPress/gutenberg/pull/36579))
-- ItemGroup: Experimenting with chevron icon. ([36654](https://github.com/WordPress/gutenberg/pull/36654))
-- Toggle Group Control: Add tooltip. ([36726](https://github.com/WordPress/gutenberg/pull/36726))
-- `Modal`: Add `__experimentalHideHeader` prop, wrap in `forwardref`. ([36831](https://github.com/WordPress/gutenberg/pull/36831))
-- `ZStack`: Support RTL layouts when applying `offset`. ([36769](https://github.com/WordPress/gutenberg/pull/36769))
+
+-   Add `__unstable-large` size variant on `InputControl` `SelectControl` `UnitControl`. ([35646](https://github.com/WordPress/gutenberg/pull/35646))
+-   Font Size Picker: Allow non-integers as simple CSS values and in hints. ([36636](https://github.com/WordPress/gutenberg/pull/36636))
+-   Improve `vertical` and RTL support for `Divider`. ([36579](https://github.com/WordPress/gutenberg/pull/36579))
+-   ItemGroup: Experimenting with chevron icon. ([36654](https://github.com/WordPress/gutenberg/pull/36654))
+-   Toggle Group Control: Add tooltip. ([36726](https://github.com/WordPress/gutenberg/pull/36726))
+-   `Modal`: Add `__experimentalHideHeader` prop, wrap in `forwardref`. ([36831](https://github.com/WordPress/gutenberg/pull/36831))
+-   `ZStack`: Support RTL layouts when applying `offset`. ([36769](https://github.com/WordPress/gutenberg/pull/36769))
 
 #### Site Editor
-- Add icons to navigation sidebar items. ([36893](https://github.com/WordPress/gutenberg/pull/36893))
-- Allow editing custom template title. ([36933](https://github.com/WordPress/gutenberg/pull/36933))
-- Only render the site editor canvas when the global styles are ready. ([36643](https://github.com/WordPress/gutenberg/pull/36643))
-- Remove extra border radius. ([37022](https://github.com/WordPress/gutenberg/pull/37022))
-- Show theme, plugin or author in Added By column with appropriate icon or avatar. ([36763](https://github.com/WordPress/gutenberg/pull/36763))
-- Update navigation sidebar responsiveness. ([36638](https://github.com/WordPress/gutenberg/pull/36638))
+
+-   Add icons to navigation sidebar items. ([36893](https://github.com/WordPress/gutenberg/pull/36893))
+-   Allow editing custom template title. ([36933](https://github.com/WordPress/gutenberg/pull/36933))
+-   Only render the site editor canvas when the global styles are ready. ([36643](https://github.com/WordPress/gutenberg/pull/36643))
+-   Remove extra border radius. ([37022](https://github.com/WordPress/gutenberg/pull/37022))
+-   Show theme, plugin or author in Added By column with appropriate icon or avatar. ([36763](https://github.com/WordPress/gutenberg/pull/36763))
+-   Update navigation sidebar responsiveness. ([36638](https://github.com/WordPress/gutenberg/pull/36638))
 
 #### Global Styles
-- Borders: Switch to ToolsPanel for displaying UI. ([33743](https://github.com/WordPress/gutenberg/pull/33743))
-- Custom color palette: Add default color name. ([36940](https://github.com/WordPress/gutenberg/pull/36940))
-- Polish unset color indicator. ([36994](https://github.com/WordPress/gutenberg/pull/36994))
+
+-   Borders: Switch to ToolsPanel for displaying UI. ([33743](https://github.com/WordPress/gutenberg/pull/33743))
+-   Custom color palette: Add default color name. ([36940](https://github.com/WordPress/gutenberg/pull/36940))
+-   Polish unset color indicator. ([36994](https://github.com/WordPress/gutenberg/pull/36994))
 
 #### Block Editor
-- Always show the block appender when its parent is selected. ([36656](https://github.com/WordPress/gutenberg/pull/36656))
-- Insertion point bar: Hide onBlur and onMouseLeave. ([36798](https://github.com/WordPress/gutenberg/pull/36798))
-- Writing Flow: Double escape unselects all blocks. ([36945](https://github.com/WordPress/gutenberg/pull/36945))
+
+-   Always show the block appender when its parent is selected. ([36656](https://github.com/WordPress/gutenberg/pull/36656))
+-   Insertion point bar: Hide onBlur and onMouseLeave. ([36798](https://github.com/WordPress/gutenberg/pull/36798))
+-   Writing Flow: Double escape unselects all blocks. ([36945](https://github.com/WordPress/gutenberg/pull/36945))
 
 #### Block Library
-- Add spacing attributes to comment author avatar. ([36322](https://github.com/WordPress/gutenberg/pull/36322))
-- Only show submenu options and Show arrow button when relevant. ([36826](https://github.com/WordPress/gutenberg/pull/36826))
 
+-   Add spacing attributes to comment author avatar. ([36322](https://github.com/WordPress/gutenberg/pull/36322))
+-   Only show submenu options and Show arrow button when relevant. ([36826](https://github.com/WordPress/gutenberg/pull/36826))
 
 ### Bug Fixes
 
-- Dependency Extraction Webpack Plugin: Make the plugin work when using `optimizations.runtimeChunk = 'single'`. ([26214](https://github.com/WordPress/gutenberg/pull/26214))
-- Fix document typo. ([36776](https://github.com/WordPress/gutenberg/pull/36776))
-- Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. ([35986](https://github.com/WordPress/gutenberg/pull/35986))
-- Try: Hide the columns inserter in pattern previews. ([36626](https://github.com/WordPress/gutenberg/pull/36626))
-- Update theme.json version. ([36917](https://github.com/WordPress/gutenberg/pull/36917))
+-   Dependency Extraction Webpack Plugin: Make the plugin work when using `optimizations.runtimeChunk = 'single'`. ([26214](https://github.com/WordPress/gutenberg/pull/26214))
+-   Fix document typo. ([36776](https://github.com/WordPress/gutenberg/pull/36776))
+-   Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. ([35986](https://github.com/WordPress/gutenberg/pull/35986))
+-   Try: Hide the columns inserter in pattern previews. ([36626](https://github.com/WordPress/gutenberg/pull/36626))
+-   Update theme.json version. ([36917](https://github.com/WordPress/gutenberg/pull/36917))
 
 #### Block Library
-- Add page list to navigation direct insert conditions. ([36591](https://github.com/WordPress/gutenberg/pull/36591))
-- Cover: Fix undo trap. ([36807](https://github.com/WordPress/gutenberg/pull/36807))
-- Fix Nav block editing wrong entity on creation of new Menu. ([36880](https://github.com/WordPress/gutenberg/pull/36880))
-- Fix Nav block fallback DB query to match on full block grammar start tag. ([36854](https://github.com/WordPress/gutenberg/pull/36854))
-- Fix icon scaling. ([36948](https://github.com/WordPress/gutenberg/pull/36948))
-- Fix non existent menu handling in nav block. ([36507](https://github.com/WordPress/gutenberg/pull/36507))
-- Fix page list missing button styles when set to open on click. ([36601](https://github.com/WordPress/gutenberg/pull/36601))
-- Fix template part slug generation when creating through the block placeholder. ([36764](https://github.com/WordPress/gutenberg/pull/36764))
-- Gallery v1: Allow clicks within replace media placeholder state. ([36804](https://github.com/WordPress/gutenberg/pull/36804))
-- Gallery: Fix stuck image size options loader. ([36806](https://github.com/WordPress/gutenberg/pull/36806))
-- Include cascading properties in Navigation deprecation. ([36432](https://github.com/WordPress/gutenberg/pull/36432))
-- Navigation: Scale submenu icon. ([36714](https://github.com/WordPress/gutenberg/pull/36714))
-- Navigation: Try removing absorb toolbar prop. ([36990](https://github.com/WordPress/gutenberg/pull/36990))
-- Post Featured Image: Add the "Reset" button. ([36572](https://github.com/WordPress/gutenberg/pull/36572))
-- [Post Title]: Fix render error when setting Page to homepage. ([36786](https://github.com/WordPress/gutenberg/pull/36786))
-- [Query Pagination Next/Previous]: Remove text and link color support. ([36954](https://github.com/WordPress/gutenberg/pull/36954))
+
+-   Add page list to navigation direct insert conditions. ([36591](https://github.com/WordPress/gutenberg/pull/36591))
+-   Cover: Fix undo trap. ([36807](https://github.com/WordPress/gutenberg/pull/36807))
+-   Fix Nav block editing wrong entity on creation of new Menu. ([36880](https://github.com/WordPress/gutenberg/pull/36880))
+-   Fix Nav block fallback DB query to match on full block grammar start tag. ([36854](https://github.com/WordPress/gutenberg/pull/36854))
+-   Fix icon scaling. ([36948](https://github.com/WordPress/gutenberg/pull/36948))
+-   Fix non existent menu handling in nav block. ([36507](https://github.com/WordPress/gutenberg/pull/36507))
+-   Fix page list missing button styles when set to open on click. ([36601](https://github.com/WordPress/gutenberg/pull/36601))
+-   Fix template part slug generation when creating through the block placeholder. ([36764](https://github.com/WordPress/gutenberg/pull/36764))
+-   Gallery v1: Allow clicks within replace media placeholder state. ([36804](https://github.com/WordPress/gutenberg/pull/36804))
+-   Gallery: Fix stuck image size options loader. ([36806](https://github.com/WordPress/gutenberg/pull/36806))
+-   Include cascading properties in Navigation deprecation. ([36432](https://github.com/WordPress/gutenberg/pull/36432))
+-   Navigation: Scale submenu icon. ([36714](https://github.com/WordPress/gutenberg/pull/36714))
+-   Navigation: Try removing absorb toolbar prop. ([36990](https://github.com/WordPress/gutenberg/pull/36990))
+-   Post Featured Image: Add the "Reset" button. ([36572](https://github.com/WordPress/gutenberg/pull/36572))
+-   [Post Title]: Fix render error when setting Page to homepage. ([36786](https://github.com/WordPress/gutenberg/pull/36786))
+-   [Query Pagination Next/Previous]: Remove text and link color support. ([36954](https://github.com/WordPress/gutenberg/pull/36954))
 
 #### Site Editor
-- Stabilize export endpoint. ([36559](https://github.com/WordPress/gutenberg/pull/36559))
-- Templat list fallback to slug. ([36947](https://github.com/WordPress/gutenberg/pull/36947))
-- Templates Controller: Add missing 'is_custom' prop. ([36911](https://github.com/WordPress/gutenberg/pull/36911))
-- Update hrefs to not specifically refer to themes.php?page=gutenberg-edit-site. ([36705](https://github.com/WordPress/gutenberg/pull/36705))
-- Validate the postType query argument. ([36706](https://github.com/WordPress/gutenberg/pull/36706))
+
+-   Stabilize export endpoint. ([36559](https://github.com/WordPress/gutenberg/pull/36559))
+-   Templat list fallback to slug. ([36947](https://github.com/WordPress/gutenberg/pull/36947))
+-   Templates Controller: Add missing 'is_custom' prop. ([36911](https://github.com/WordPress/gutenberg/pull/36911))
+-   Update hrefs to not specifically refer to themes.php?page=gutenberg-edit-site. ([36705](https://github.com/WordPress/gutenberg/pull/36705))
+-   Validate the postType query argument. ([36706](https://github.com/WordPress/gutenberg/pull/36706))
 
 #### Components
-- Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. ([36941](https://github.com/WordPress/gutenberg/pull/36941))
-- ColorPicker: Replace hardcoded "blue" with theme color. ([36153](https://github.com/WordPress/gutenberg/pull/36153))
-- Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. ([36588](https://github.com/WordPress/gutenberg/pull/36588))
-- `DateTimePicker`: Set PM hours correctly. ([36878](https://github.com/WordPress/gutenberg/pull/36878))
+
+-   Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. ([36941](https://github.com/WordPress/gutenberg/pull/36941))
+-   ColorPicker: Replace hardcoded "blue" with theme color. ([36153](https://github.com/WordPress/gutenberg/pull/36153))
+-   Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. ([36588](https://github.com/WordPress/gutenberg/pull/36588))
+-   `DateTimePicker`: Set PM hours correctly. ([36878](https://github.com/WordPress/gutenberg/pull/36878))
 
 #### Themes
-- Block Templates: Fix PHP notices on WP 5.8. ([36964](https://github.com/WordPress/gutenberg/pull/36964))
-- Don't try and render unstable location if Nav block has ID. ([36863](https://github.com/WordPress/gutenberg/pull/36863))
-- Fix duotone first render in Safari. ([36754](https://github.com/WordPress/gutenberg/pull/36754))
+
+-   Block Templates: Fix PHP notices on WP 5.8. ([36964](https://github.com/WordPress/gutenberg/pull/36964))
+-   Don't try and render unstable location if Nav block has ID. ([36863](https://github.com/WordPress/gutenberg/pull/36863))
+-   Fix duotone first render in Safari. ([36754](https://github.com/WordPress/gutenberg/pull/36754))
 
 #### Accessibility
-- Add accessible labelling to submenu buttons. ([36631](https://github.com/WordPress/gutenberg/pull/36631))
-- Add aria-current="page" to active navigation item. ([36946](https://github.com/WordPress/gutenberg/pull/36946))
-- Fix site editor region navigation. ([36709](https://github.com/WordPress/gutenberg/pull/36709))
+
+-   Add accessible labelling to submenu buttons. ([36631](https://github.com/WordPress/gutenberg/pull/36631))
+-   Add aria-current="page" to active navigation item. ([36946](https://github.com/WordPress/gutenberg/pull/36946))
+-   Fix site editor region navigation. ([36709](https://github.com/WordPress/gutenberg/pull/36709))
 
 #### Block Editor
-- Fix wordbreak for URLs. ([36993](https://github.com/WordPress/gutenberg/pull/36993))
-- Writing Flow Multi-select: Ensure post title content editable after multi-select. ([36843](https://github.com/WordPress/gutenberg/pull/36843))
+
+-   Fix wordbreak for URLs. ([36993](https://github.com/WordPress/gutenberg/pull/36993))
+-   Writing Flow Multi-select: Ensure post title content editable after multi-select. ([36843](https://github.com/WordPress/gutenberg/pull/36843))
 
 #### Full Site Editing
-- Highlight "Site" in the navigation panel. ([36762](https://github.com/WordPress/gutenberg/pull/36762))
-- Show all templates and template parts on the site editor list screens. ([36761](https://github.com/WordPress/gutenberg/pull/36761))
+
+-   Highlight "Site" in the navigation panel. ([36762](https://github.com/WordPress/gutenberg/pull/36762))
+-   Show all templates and template parts on the site editor list screens. ([36761](https://github.com/WordPress/gutenberg/pull/36761))
 
 #### Design Tools
-- Border panel: Update to display multiple palette origins. ([36753](https://github.com/WordPress/gutenberg/pull/36753))
-- Cover: Move BoxControlVisualizer in the markup to make it visible. ([36635](https://github.com/WordPress/gutenberg/pull/36635))
+
+-   Border panel: Update to display multiple palette origins. ([36753](https://github.com/WordPress/gutenberg/pull/36753))
+-   Cover: Move BoxControlVisualizer in the markup to make it visible. ([36635](https://github.com/WordPress/gutenberg/pull/36635))
 
 #### Icons
-- [Icons]: Fix Comment Author Name icon. ([36738](https://github.com/WordPress/gutenberg/pull/36738))
-- [Icons]: Fix property names for Comment Author Avatar icon. ([36737](https://github.com/WordPress/gutenberg/pull/36737))
+
+-   [Icons]: Fix Comment Author Name icon. ([36738](https://github.com/WordPress/gutenberg/pull/36738))
+-   [Icons]: Fix property names for Comment Author Avatar icon. ([36737](https://github.com/WordPress/gutenberg/pull/36737))
 
 #### Block Variations
-- Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
+
+-   Block Styles: Check for existence of scroll container. ([37010](https://github.com/WordPress/gutenberg/pull/37010))
 
 #### Style Variations
-- Block Styles: Add a separating margin to the default picker. ([36976](https://github.com/WordPress/gutenberg/pull/36976))
+
+-   Block Styles: Add a separating margin to the default picker. ([36976](https://github.com/WordPress/gutenberg/pull/36976))
 
 #### Testing
-- Fix: Failing PHPUnit test. ([36931](https://github.com/WordPress/gutenberg/pull/36931))
+
+-   Fix: Failing PHPUnit test. ([36931](https://github.com/WordPress/gutenberg/pull/36931))
 
 #### Widgets Editor
-- Add CSS fix for 33580. ([36759](https://github.com/WordPress/gutenberg/pull/36759))
+
+-   Add CSS fix for 33580. ([36759](https://github.com/WordPress/gutenberg/pull/36759))
 
 #### Post Editor
-- Multi-entity save: Only set site entity to pending if really saving. ([36573](https://github.com/WordPress/gutenberg/pull/36573))
+
+-   Multi-entity save: Only set site entity to pending if really saving. ([36573](https://github.com/WordPress/gutenberg/pull/36573))
 
 #### Global Styles
-- Make the core color palette opt-in for themes with not `theme.json`. ([36496](https://github.com/WordPress/gutenberg/pull/36496))
+
+-   Make the core color palette opt-in for themes with not `theme.json`. ([36496](https://github.com/WordPress/gutenberg/pull/36496))
 
 #### Data Layer
-- Data: Update types and fix type error. ([36190](https://github.com/WordPress/gutenberg/pull/36190))
 
+-   Data: Update types and fix type error. ([36190](https://github.com/WordPress/gutenberg/pull/36190))
 
 ### Performance
 
 #### Block Library
-- Improve performance of wp_navigation lookup.. ([36891](https://github.com/WordPress/gutenberg/pull/36891))
 
+-   Improve performance of wp_navigation lookup.. ([36891](https://github.com/WordPress/gutenberg/pull/36891))
 
 ### Experiments
 
 #### Global Styles
-- Add elements support to the typography panel in global styles. ([36718](https://github.com/WordPress/gutenberg/pull/36718))
-- Add: Border indication to global styles colors. ([36959](https://github.com/WordPress/gutenberg/pull/36959))
-- Add: Corners to custom color picker popover. ([37015](https://github.com/WordPress/gutenberg/pull/37015))
-- Add: Gradient palette editor. ([36820](https://github.com/WordPress/gutenberg/pull/36820))
-- Add: Missing margin to the color picker clear button. ([37016](https://github.com/WordPress/gutenberg/pull/37016))
-- Add: Transparency support on global styles colors. ([36840](https://github.com/WordPress/gutenberg/pull/36840))
-- Add: Uneditable duotone palette on the palette gradient panel. ([36920](https://github.com/WordPress/gutenberg/pull/36920))
-- Call "palettes" and not "color palettes" on panel label. ([36921](https://github.com/WordPress/gutenberg/pull/36921))
-- Color Picker: Improve border, padding, and box shadow styles. ([36963](https://github.com/WordPress/gutenberg/pull/36963))
-- Color UI component: Reorder palettes and update names (core by defaults, user by custom). ([36622](https://github.com/WordPress/gutenberg/pull/36622))
-- Fix: Apply by slug on all origins. ([36841](https://github.com/WordPress/gutenberg/pull/36841))
-- Fix: Color palette is not being stored. ([36817](https://github.com/WordPress/gutenberg/pull/36817))
-- Fix: Custom color picker popover position. ([36965](https://github.com/WordPress/gutenberg/pull/36965))
-- Fix: Theme colors cannot override defaults. ([36811](https://github.com/WordPress/gutenberg/pull/36811))
-- GlobalStyles sidebar: Do not show default palette if theme opts-out. ([36639](https://github.com/WordPress/gutenberg/pull/36639))
-- Make links plural in global styles. ([36819](https://github.com/WordPress/gutenberg/pull/36819))
-- Make user able to change all color palette origins. ([36674](https://github.com/WordPress/gutenberg/pull/36674))
-- Rename `core` origin key to `default` for presets. ([36645](https://github.com/WordPress/gutenberg/pull/36645))
-- Update function names for the public global styles API functions. ([36907](https://github.com/WordPress/gutenberg/pull/36907))
-- Update: Global Styes: Count all color palette origins on the palette counter. ([36922](https://github.com/WordPress/gutenberg/pull/36922))
-- Update: Rename user preset origin to custom. ([36748](https://github.com/WordPress/gutenberg/pull/36748))
-- theme.json: Add `appearanceTools` flag to opt-in into appearance UI controls. ([36646](https://github.com/WordPress/gutenberg/pull/36646))
-
-#### Block Library
-- Allow filtering of Nav block fallback. ([36850](https://github.com/WordPress/gutenberg/pull/36850))
-- Deprecate navigation areas. ([36727](https://github.com/WordPress/gutenberg/pull/36727))
-- Implement suitable fallback for Nav block on front end of site when no menu selected. ([36724](https://github.com/WordPress/gutenberg/pull/36724))
-- Navigation: Fix space-between. ([36441](https://github.com/WordPress/gutenberg/pull/36441))
-- Remove navigationArea context. ([36981](https://github.com/WordPress/gutenberg/pull/36981))
-- Remove unstable max pages attribute from Nav block. ([36877](https://github.com/WordPress/gutenberg/pull/36877))
-- Rename navigationMenuId to ref. ([36739](https://github.com/WordPress/gutenberg/pull/36739))
-- Render empty Nav block if no fallback block can be utilised. ([36849](https://github.com/WordPress/gutenberg/pull/36849))
-- Try always generating navigation post title. ([36760](https://github.com/WordPress/gutenberg/pull/36760))
-- Use first non-empty Nav post as primary fallback for Nav block. ([36740](https://github.com/WordPress/gutenberg/pull/36740))
+
+-   Add elements support to the typography panel in global styles. ([36718](https://github.com/WordPress/gutenberg/pull/36718))
+-   Add: Border indication to global styles colors. ([36959](https://github.com/WordPress/gutenberg/pull/36959))
+-   Add: Corners to custom color picker popover. ([37015](https://github.com/WordPress/gutenberg/pull/37015))
+-   Add: Gradient palette editor. ([36820](https://github.com/WordPress/gutenberg/pull/36820))
+-   Add: Missing margin to the color picker clear button. ([37016](https://github.com/WordPress/gutenberg/pull/37016))
+-   Add: Transparency support on global styles colors. ([36840](https://github.com/WordPress/gutenberg/pull/36840))
+-   Add: Uneditable duotone palette on the palette gradient panel. ([36920](https://github.com/WordPress/gutenberg/pull/36920))
+-   Call "palettes" and not "color palettes" on panel label. ([36921](https://github.com/WordPress/gutenberg/pull/36921))
+-   Color Picker: Improve border, padding, and box shadow styles. ([36963](https://github.com/WordPress/gutenberg/pull/36963))
+-   Color UI component: Reorder palettes and update names (core by defaults, user by custom). ([36622](https://github.com/WordPress/gutenberg/pull/36622))
+-   Fix: Apply by slug on all origins. ([36841](https://github.com/WordPress/gutenberg/pull/36841))
+-   Fix: Color palette is not being stored. ([36817](https://github.com/WordPress/gutenberg/pull/36817))
+-   Fix: Custom color picker popover position. ([36965](https://github.com/WordPress/gutenberg/pull/36965))
+-   Fix: Theme colors cannot override defaults. ([36811](https://github.com/WordPress/gutenberg/pull/36811))
+-   GlobalStyles sidebar: Do not show default palette if theme opts-out. ([36639](https://github.com/WordPress/gutenberg/pull/36639))
+-   Make links plural in global styles. ([36819](https://github.com/WordPress/gutenberg/pull/36819))
+-   Make user able to change all color palette origins. ([36674](https://github.com/WordPress/gutenberg/pull/36674))
+-   Rename `core` origin key to `default` for presets. ([36645](https://github.com/WordPress/gutenberg/pull/36645))
+-   Update function names for the public global styles API functions. ([36907](https://github.com/WordPress/gutenberg/pull/36907))
+-   Update: Global Styes: Count all color palette origins on the palette counter. ([36922](https://github.com/WordPress/gutenberg/pull/36922))
+-   Update: Rename user preset origin to custom. ([36748](https://github.com/WordPress/gutenberg/pull/36748))
+-   theme.json: Add `appearanceTools` flag to opt-in into appearance UI controls. ([36646](https://github.com/WordPress/gutenberg/pull/36646))
+
+#### Block Library
+
+-   Allow filtering of Nav block fallback. ([36850](https://github.com/WordPress/gutenberg/pull/36850))
+-   Deprecate navigation areas. ([36727](https://github.com/WordPress/gutenberg/pull/36727))
+-   Implement suitable fallback for Nav block on front end of site when no menu selected. ([36724](https://github.com/WordPress/gutenberg/pull/36724))
+-   Navigation: Fix space-between. ([36441](https://github.com/WordPress/gutenberg/pull/36441))
+-   Remove navigationArea context. ([36981](https://github.com/WordPress/gutenberg/pull/36981))
+-   Remove unstable max pages attribute from Nav block. ([36877](https://github.com/WordPress/gutenberg/pull/36877))
+-   Rename navigationMenuId to ref. ([36739](https://github.com/WordPress/gutenberg/pull/36739))
+-   Render empty Nav block if no fallback block can be utilised. ([36849](https://github.com/WordPress/gutenberg/pull/36849))
+-   Try always generating navigation post title. ([36760](https://github.com/WordPress/gutenberg/pull/36760))
+-   Use first non-empty Nav post as primary fallback for Nav block. ([36740](https://github.com/WordPress/gutenberg/pull/36740))
 
 #### Full Site Editing
-- Add success and error snackbars to the templates list page. ([36808](https://github.com/WordPress/gutenberg/pull/36808))
-- Add templates list page for site editor. ([36379](https://github.com/WordPress/gutenberg/pull/36379))
-- Implement "Add New" for templates list in Site Editor. ([36592](https://github.com/WordPress/gutenberg/pull/36592))
-- Remove block template resolution unit tests. ([36855](https://github.com/WordPress/gutenberg/pull/36855))
-- Remove the Styles link in Site Editor. ([36637](https://github.com/WordPress/gutenberg/pull/36637))
-- Update and align template descriptions. ([36000](https://github.com/WordPress/gutenberg/pull/36000))
-- [REST] Restore the missing double slash in the ID received by /templates. ([36881](https://github.com/WordPress/gutenberg/pull/36881))
+
+-   Add success and error snackbars to the templates list page. ([36808](https://github.com/WordPress/gutenberg/pull/36808))
+-   Add templates list page for site editor. ([36379](https://github.com/WordPress/gutenberg/pull/36379))
+-   Implement "Add New" for templates list in Site Editor. ([36592](https://github.com/WordPress/gutenberg/pull/36592))
+-   Remove block template resolution unit tests. ([36855](https://github.com/WordPress/gutenberg/pull/36855))
+-   Remove the Styles link in Site Editor. ([36637](https://github.com/WordPress/gutenberg/pull/36637))
+-   Update and align template descriptions. ([36000](https://github.com/WordPress/gutenberg/pull/36000))
+-   [REST] Restore the missing double slash in the ID received by /templates. ([36881](https://github.com/WordPress/gutenberg/pull/36881))
 
 #### Accessibility
-- Use table layout in templates list screen. ([36707](https://github.com/WordPress/gutenberg/pull/36707))
 
+-   Use table layout in templates list screen. ([36707](https://github.com/WordPress/gutenberg/pull/36707))
 
 ### Documentation
 
-- Add brief information about blockGap to the theme.json how-to guide. ([36558](https://github.com/WordPress/gutenberg/pull/36558))
-- Add placeholder in URLInput documentation. ([36799](https://github.com/WordPress/gutenberg/pull/36799))
-- Block Supports: Update block supports documentation after typography reshaping. ([36894](https://github.com/WordPress/gutenberg/pull/36894))
-- Docs: Alphabetize the How to Guides section. ([35904](https://github.com/WordPress/gutenberg/pull/35904))
-- Docs: Fix broken link to @wordpress/stylelint-config. ([36936](https://github.com/WordPress/gutenberg/pull/36936))
-- Docs: Improvements on `Create a Block Tutorial` from `Block Editor handbook`. ([36553](https://github.com/WordPress/gutenberg/pull/36553))
-- Docs: Update history.md with description of the page. ([36888](https://github.com/WordPress/gutenberg/pull/36888))
-- Update Getting Started with info to stay informed. ([36498](https://github.com/WordPress/gutenberg/pull/36498))
-- Update Pattern block category and add documentation. ([36144](https://github.com/WordPress/gutenberg/pull/36144))
-- Various inline docblock corrections. ([36793](https://github.com/WordPress/gutenberg/pull/36793))
+-   Add brief information about blockGap to the theme.json how-to guide. ([36558](https://github.com/WordPress/gutenberg/pull/36558))
+-   Add placeholder in URLInput documentation. ([36799](https://github.com/WordPress/gutenberg/pull/36799))
+-   Block Supports: Update block supports documentation after typography reshaping. ([36894](https://github.com/WordPress/gutenberg/pull/36894))
+-   Docs: Alphabetize the How to Guides section. ([35904](https://github.com/WordPress/gutenberg/pull/35904))
+-   Docs: Fix broken link to @wordpress/stylelint-config. ([36936](https://github.com/WordPress/gutenberg/pull/36936))
+-   Docs: Improvements on `Create a Block Tutorial` from `Block Editor handbook`. ([36553](https://github.com/WordPress/gutenberg/pull/36553))
+-   Docs: Update history.md with description of the page. ([36888](https://github.com/WordPress/gutenberg/pull/36888))
+-   Update Getting Started with info to stay informed. ([36498](https://github.com/WordPress/gutenberg/pull/36498))
+-   Update Pattern block category and add documentation. ([36144](https://github.com/WordPress/gutenberg/pull/36144))
+-   Various inline docblock corrections. ([36793](https://github.com/WordPress/gutenberg/pull/36793))
 
 #### Components
-- ToolsPanel: Update panel readme and stories. ([36557](https://github.com/WordPress/gutenberg/pull/36557))
 
+-   ToolsPanel: Update panel readme and stories. ([36557](https://github.com/WordPress/gutenberg/pull/36557))
 
 ### Code Quality
 
-- Blocks: Refactor generator-based actions to thunks. ([36468](https://github.com/WordPress/gutenberg/pull/36468))
-- Remove useless bubblesVirtually prop from BlockInspector. ([37024](https://github.com/WordPress/gutenberg/pull/37024))
+-   Blocks: Refactor generator-based actions to thunks. ([36468](https://github.com/WordPress/gutenberg/pull/36468))
+-   Remove useless bubblesVirtually prop from BlockInspector. ([37024](https://github.com/WordPress/gutenberg/pull/37024))
 
 #### Global Styles
-- Move Global Styles code to `lib/compat/wordpress-5.9` folder. ([36978](https://github.com/WordPress/gutenberg/pull/36978))
-- Rename `gutenberg_` to `wp_` for some functions that land in WordPress 5.9. ([36913](https://github.com/WordPress/gutenberg/pull/36913))
-- Update global styles public API. ([36610](https://github.com/WordPress/gutenberg/pull/36610))
-- Update the `WP_Theme_JSON_Gutenberg` class to be like the core one. ([36973](https://github.com/WordPress/gutenberg/pull/36973))
-- Update the `WP_Theme_JSON_Resolver_Gutenberg` class to be like the core one. ([36974](https://github.com/WordPress/gutenberg/pull/36974))
-- `theme.json`: Sort keys alphabetically. ([36968](https://github.com/WordPress/gutenberg/pull/36968))
+
+-   Move Global Styles code to `lib/compat/wordpress-5.9` folder. ([36978](https://github.com/WordPress/gutenberg/pull/36978))
+-   Rename `gutenberg_` to `wp_` for some functions that land in WordPress 5.9. ([36913](https://github.com/WordPress/gutenberg/pull/36913))
+-   Update global styles public API. ([36610](https://github.com/WordPress/gutenberg/pull/36610))
+-   Update the `WP_Theme_JSON_Gutenberg` class to be like the core one. ([36973](https://github.com/WordPress/gutenberg/pull/36973))
+-   Update the `WP_Theme_JSON_Resolver_Gutenberg` class to be like the core one. ([36974](https://github.com/WordPress/gutenberg/pull/36974))
+-   `theme.json`: Sort keys alphabetically. ([36968](https://github.com/WordPress/gutenberg/pull/36968))
 
 #### Block Library
-- Navigation: Remove outdated separate "Home" link styles. ([36608](https://github.com/WordPress/gutenberg/pull/36608))
-- Post Featured Image: Remove withNotices HOC. ([36596](https://github.com/WordPress/gutenberg/pull/36596))
-- [Comment Author Avatar]: Remove extraneous color link support flag. ([36956](https://github.com/WordPress/gutenberg/pull/36956))
+
+-   Navigation: Remove outdated separate "Home" link styles. ([36608](https://github.com/WordPress/gutenberg/pull/36608))
+-   Post Featured Image: Remove withNotices HOC. ([36596](https://github.com/WordPress/gutenberg/pull/36596))
+-   [Comment Author Avatar]: Remove extraneous color link support flag. ([36956](https://github.com/WordPress/gutenberg/pull/36956))
 
 #### Post Editor
-- [Edit Post]: Remove EditPostSettings context provider. ([36949](https://github.com/WordPress/gutenberg/pull/36949))
 
+-   [Edit Post]: Remove EditPostSettings context provider. ([36949](https://github.com/WordPress/gutenberg/pull/36949))
 
 ### Tools
 
-- Add ajlende to JSON Schema codeowners. ([36580](https://github.com/WordPress/gutenberg/pull/36580))
-- Report dependencies externalized with Dependency Extraction Plugin. ([35106](https://github.com/WordPress/gutenberg/pull/35106))
-- Update CODEOWNERS for @mkaz and documentation cleanup. ([36581](https://github.com/WordPress/gutenberg/pull/36581))
-- Update mkaz codeowner on schemas. ([36686](https://github.com/WordPress/gutenberg/pull/36686))
+-   Add ajlende to JSON Schema codeowners. ([36580](https://github.com/WordPress/gutenberg/pull/36580))
+-   Report dependencies externalized with Dependency Extraction Plugin. ([35106](https://github.com/WordPress/gutenberg/pull/35106))
+-   Update CODEOWNERS for @mkaz and documentation cleanup. ([36581](https://github.com/WordPress/gutenberg/pull/36581))
+-   Update mkaz codeowner on schemas. ([36686](https://github.com/WordPress/gutenberg/pull/36686))
 
 #### Testing
-- Reorganize end-to-end tests folders and files. ([36734](https://github.com/WordPress/gutenberg/pull/36734))
-- Scripts: Upgrade Puppeteer to v11. ([36040](https://github.com/WordPress/gutenberg/pull/36040))
-- Update template controller unit test now that author support is in WP core. ([36987](https://github.com/WordPress/gutenberg/pull/36987))
-- end-to-end Tests: Fix failing image end-to-end test by waiting for required element. ([36982](https://github.com/WordPress/gutenberg/pull/36982))
 
+-   Reorganize end-to-end tests folders and files. ([36734](https://github.com/WordPress/gutenberg/pull/36734))
+-   Scripts: Upgrade Puppeteer to v11. ([36040](https://github.com/WordPress/gutenberg/pull/36040))
+-   Update template controller unit test now that author support is in WP core. ([36987](https://github.com/WordPress/gutenberg/pull/36987))
+-   end-to-end Tests: Fix failing image end-to-end test by waiting for required element. ([36982](https://github.com/WordPress/gutenberg/pull/36982))
 
 ### Security
 
 #### Block Library
-- [ Comment Author Avatar Block ] - Escape styles attribute. ([36988](https://github.com/WordPress/gutenberg/pull/36988))
 
+-   [ Comment Author Avatar Block ] - Escape styles attribute. ([36988](https://github.com/WordPress/gutenberg/pull/36988))
 
 ### Various
 
-- Add button text when no colors found. ([36684](https://github.com/WordPress/gutenberg/pull/36684))
-- Add origin and author to template rest api. ([36896](https://github.com/WordPress/gutenberg/pull/36896))
-- Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). ([36744](https://github.com/WordPress/gutenberg/pull/36744))
-- Clarify i18n context for PostTemplateActions's "New" label. ([36679](https://github.com/WordPress/gutenberg/pull/36679))
-- Mobile - Preformatted block - Fix showing the default background color. ([36883](https://github.com/WordPress/gutenberg/pull/36883))
-- Mobile - RichText - Fixes an issue where the font size value won't update. ([36621](https://github.com/WordPress/gutenberg/pull/36621))
-- Revert erroneous native editor package version bumps. ([36633](https://github.com/WordPress/gutenberg/pull/36633))
-- Schemas: Allow custom blocks in theme.json styles. ([36411](https://github.com/WordPress/gutenberg/pull/36411))
-- Site Editor: Sync export API. ([36908](https://github.com/WordPress/gutenberg/pull/36908))
-- Update: Migrate global styles user database data on the rest endpoint. ([36747](https://github.com/WordPress/gutenberg/pull/36747))
+-   Add button text when no colors found. ([36684](https://github.com/WordPress/gutenberg/pull/36684))
+-   Add origin and author to template rest api. ([36896](https://github.com/WordPress/gutenberg/pull/36896))
+-   Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). ([36744](https://github.com/WordPress/gutenberg/pull/36744))
+-   Clarify i18n context for PostTemplateActions's "New" label. ([36679](https://github.com/WordPress/gutenberg/pull/36679))
+-   Mobile - Preformatted block - Fix showing the default background color. ([36883](https://github.com/WordPress/gutenberg/pull/36883))
+-   Mobile - RichText - Fixes an issue where the font size value won't update. ([36621](https://github.com/WordPress/gutenberg/pull/36621))
+-   Revert erroneous native editor package version bumps. ([36633](https://github.com/WordPress/gutenberg/pull/36633))
+-   Schemas: Allow custom blocks in theme.json styles. ([36411](https://github.com/WordPress/gutenberg/pull/36411))
+-   Site Editor: Sync export API. ([36908](https://github.com/WordPress/gutenberg/pull/36908))
+-   Update: Migrate global styles user database data on the rest endpoint. ([36747](https://github.com/WordPress/gutenberg/pull/36747))
 
 #### Site Editor
-- Add 'Clear customizations' button to template list page. ([36802](https://github.com/WordPress/gutenberg/pull/36802))
-- Make Reusable blocks available in the Site Editor. ([36511](https://github.com/WordPress/gutenberg/pull/36511))
-- Remove color, spacing, and layout options for Template Part block. ([36571](https://github.com/WordPress/gutenberg/pull/36571))
-- Set the <title> on the list page to be same as the CPT name. ([36805](https://github.com/WordPress/gutenberg/pull/36805))
-- Template list add rename action. ([36879](https://github.com/WordPress/gutenberg/pull/36879))
-- Update delete template button. ([36815](https://github.com/WordPress/gutenberg/pull/36815))
-- Update some small style regressions in the template list. ([36822](https://github.com/WordPress/gutenberg/pull/36822))
+
+-   Add 'Clear customizations' button to template list page. ([36802](https://github.com/WordPress/gutenberg/pull/36802))
+-   Make Reusable blocks available in the Site Editor. ([36511](https://github.com/WordPress/gutenberg/pull/36511))
+-   Remove color, spacing, and layout options for Template Part block. ([36571](https://github.com/WordPress/gutenberg/pull/36571))
+-   Set the <title> on the list page to be same as the CPT name. ([36805](https://github.com/WordPress/gutenberg/pull/36805))
+-   Template list add rename action. ([36879](https://github.com/WordPress/gutenberg/pull/36879))
+-   Update delete template button. ([36815](https://github.com/WordPress/gutenberg/pull/36815))
+-   Update some small style regressions in the template list. ([36822](https://github.com/WordPress/gutenberg/pull/36822))
 
 #### Block Library
--  Block Library: Add the Comments Pagination block. ([36872](https://github.com/WordPress/gutenberg/pull/36872))
-- Gallery block: Turn on auto-migration of v1 Gallery blocks to v2 format when edited. ([36191](https://github.com/WordPress/gutenberg/pull/36191))
-- Remove reference to gutenberg_, swap with wp_. ([36652](https://github.com/WordPress/gutenberg/pull/36652))
-- Update featured image placeholder graphic. ([36712](https://github.com/WordPress/gutenberg/pull/36712))
-- [Template Part]:Remove support for conversion to Reusable block. ([36918](https://github.com/WordPress/gutenberg/pull/36918))
+
+-   Block Library: Add the Comments Pagination block. ([36872](https://github.com/WordPress/gutenberg/pull/36872))
+-   Gallery block: Turn on auto-migration of v1 Gallery blocks to v2 format when edited. ([36191](https://github.com/WordPress/gutenberg/pull/36191))
+-   Remove reference to gutenberg*, swap with wp*. ([36652](https://github.com/WordPress/gutenberg/pull/36652))
+-   Update featured image placeholder graphic. ([36712](https://github.com/WordPress/gutenberg/pull/36712))
+-   [Template Part]:Remove support for conversion to Reusable block. ([36918](https://github.com/WordPress/gutenberg/pull/36918))
 
 #### Components
-- Add experimental `ConfirmDialog`. ([34153](https://github.com/WordPress/gutenberg/pull/34153))
-- Offset the parent iframe when computing Popover position. ([36876](https://github.com/WordPress/gutenberg/pull/36876))
-- ToolsPanel: Prevent tools panel menu increasing empty panel height. ([36895](https://github.com/WordPress/gutenberg/pull/36895))
-- Update destructive tertiary button styles, and template list. ([36915](https://github.com/WordPress/gutenberg/pull/36915))
+
+-   Add experimental `ConfirmDialog`. ([34153](https://github.com/WordPress/gutenberg/pull/34153))
+-   Offset the parent iframe when computing Popover position. ([36876](https://github.com/WordPress/gutenberg/pull/36876))
+-   ToolsPanel: Prevent tools panel menu increasing empty panel height. ([36895](https://github.com/WordPress/gutenberg/pull/36895))
+-   Update destructive tertiary button styles, and template list. ([36915](https://github.com/WordPress/gutenberg/pull/36915))
 
 #### Themes
-- Move the theme editor under tools for FSE themes. ([36723](https://github.com/WordPress/gutenberg/pull/36723))
-- Update the block theme folders to templates and parts. ([36647](https://github.com/WordPress/gutenberg/pull/36647))
+
+-   Move the theme editor under tools for FSE themes. ([36723](https://github.com/WordPress/gutenberg/pull/36723))
+-   Update the block theme folders to templates and parts. ([36647](https://github.com/WordPress/gutenberg/pull/36647))
 
 #### Block Editor
-- Make appender fixed position to avoid jumps in the UI. ([36605](https://github.com/WordPress/gutenberg/pull/36605))
-- [Inserter]: Adjust order of theme blocks and reorder inserter items. ([36719](https://github.com/WordPress/gutenberg/pull/36719))
+
+-   Make appender fixed position to avoid jumps in the UI. ([36605](https://github.com/WordPress/gutenberg/pull/36605))
+-   [Inserter]: Adjust order of theme blocks and reorder inserter items. ([36719](https://github.com/WordPress/gutenberg/pull/36719))
 
 #### Block Validation/Deprecation
-- Add plugin meta data to Nav Area block deprecation notice. ([36777](https://github.com/WordPress/gutenberg/pull/36777))
+
+-   Add plugin meta data to Nav Area block deprecation notice. ([36777](https://github.com/WordPress/gutenberg/pull/36777))
 
 #### Design Tools
-- Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. ([36540](https://github.com/WordPress/gutenberg/pull/36540))
 
-#### Template Editor
-- Update resize handle styling in template part focus mode. ([36410](https://github.com/WordPress/gutenberg/pull/36410))
+-   Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. ([36540](https://github.com/WordPress/gutenberg/pull/36540))
 
-#### Data Layer
-- Data: Remove usage of deprecated register methods. ([36344](https://github.com/WordPress/gutenberg/pull/36344))
+#### Template Editor
 
-#### Accessibility
-- Block Editor List View: Use anchor elements instead of buttons. ([35655](https://github.com/WordPress/gutenberg/pull/35655))
+-   Update resize handle styling in template part focus mode. ([36410](https://github.com/WordPress/gutenberg/pull/36410))
 
+#### Data Layer
 
+-   Data: Remove usage of deprecated register methods. ([36344](https://github.com/WordPress/gutenberg/pull/36344))
 
+#### Accessibility
 
+-   Block Editor List View: Use anchor elements instead of buttons. ([35655](https://github.com/WordPress/gutenberg/pull/35655))
 
 = 12.0.1 =
 
+## Changelog
+
 ### Enhancements
 
 #### Global Styles
-- Add caching to `WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_custom_post_type()`. ([36584](https://github.com/WordPress/gutenberg/pull/36584))
 
+-   Add caching to `WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_custom_post_type()`. ([36584](https://github.com/WordPress/gutenberg/pull/36584))
 
 = 12.0.0 =
 
-### Features
+## Changelog
 
-- Disable BottomSheet swipe gesture to navigate backwards. ([36271](https://github.com/WordPress/gutenberg/pull/36271))
+### Features
 
+-   Disable BottomSheet swipe gesture to navigate backwards. ([36271](https://github.com/WordPress/gutenberg/pull/36271))
 
 ### Enhancements
 
 #### Block Library
-- Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core. ([36374](https://github.com/WordPress/gutenberg/pull/36374))
-- Let Featured Image block inherit dimensions, look like a placeholder. ([36517](https://github.com/WordPress/gutenberg/pull/36517))
-- Change all the uses of "website" to "site". ([36220](https://github.com/WordPress/gutenberg/pull/36220))
-- Enable Previews for Navigation Link Blocks. ([36412](https://github.com/WordPress/gutenberg/pull/36412))
+
+-   Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core. ([36374](https://github.com/WordPress/gutenberg/pull/36374))
+-   Let Featured Image block inherit dimensions, look like a placeholder. ([36517](https://github.com/WordPress/gutenberg/pull/36517))
+-   Change all the uses of "website" to "site". ([36220](https://github.com/WordPress/gutenberg/pull/36220))
+-   Enable Previews for Navigation Link Blocks. ([36412](https://github.com/WordPress/gutenberg/pull/36412))
 
 #### Site Editor
-- Add  welcome guide. ([36172](https://github.com/WordPress/gutenberg/pull/36172))
-- Update back button URL. ([36313](https://github.com/WordPress/gutenberg/pull/36313))
-- Improve compatiblity with menu endpoints WordPress 5.9. ([36372](https://github.com/WordPress/gutenberg/pull/36372))
-- React to any errors coming up in gutenberg_migrate_menu_to_navigation_post. ([36461](https://github.com/WordPress/gutenberg/pull/36461))
+
+-   Add welcome guide. ([36172](https://github.com/WordPress/gutenberg/pull/36172))
+-   Update back button URL. ([36313](https://github.com/WordPress/gutenberg/pull/36313))
+-   Improve compatiblity with menu endpoints WordPress 5.9. ([36372](https://github.com/WordPress/gutenberg/pull/36372))
+-   React to any errors coming up in gutenberg_migrate_menu_to_navigation_post. ([36461](https://github.com/WordPress/gutenberg/pull/36461))
 
 #### Block API
-- Update schema to require either a type or an enum. ([36267](https://github.com/WordPress/gutenberg/pull/36267))
-- Add `_wp_array_set` and `_wp_to_kebab_case` to 5.8 compat. ([36399](https://github.com/WordPress/gutenberg/pull/36399))
+
+-   Update schema to require either a type or an enum. ([36267](https://github.com/WordPress/gutenberg/pull/36267))
+-   Add `_wp_array_set` and `_wp_to_kebab_case` to 5.8 compat. ([36399](https://github.com/WordPress/gutenberg/pull/36399))
 
 #### Design Tools
-- Paragraph: Merge text settings into typography panel. ([36334](https://github.com/WordPress/gutenberg/pull/36334))
+
+-   Paragraph: Merge text settings into typography panel. ([36334](https://github.com/WordPress/gutenberg/pull/36334))
 
 #### Build Tooling
-- Add TypeScript for builds and tests. ([36260](https://github.com/WordPress/gutenberg/pull/36260))
-- stylelint-config: Widen the acceptable version range for the 'stylelint' peerDependency. ([36518](https://github.com/WordPress/gutenberg/pull/36518))
-- Update Babel packages to 7.16 version. ([36244](https://github.com/WordPress/gutenberg/pull/36244))
+
+-   Add TypeScript for builds and tests. ([36260](https://github.com/WordPress/gutenberg/pull/36260))
+-   stylelint-config: Widen the acceptable version range for the 'stylelint' peerDependency. ([36518](https://github.com/WordPress/gutenberg/pull/36518))
+-   Update Babel packages to 7.16 version. ([36244](https://github.com/WordPress/gutenberg/pull/36244))
 
 #### Style Variations
-- Block Styles: Show style preview when hovered or focused. ([34522](https://github.com/WordPress/gutenberg/pull/34522))
+
+-   Block Styles: Show style preview when hovered or focused. ([34522](https://github.com/WordPress/gutenberg/pull/34522))
 
 #### Schema
-- Update schema URL to wp.org domain. ([36316](https://github.com/WordPress/gutenberg/pull/36316))
-- Allow block.json attribute type to be an array. ([36295](https://github.com/WordPress/gutenberg/pull/36295))
+
+-   Update schema URL to wp.org domain. ([36316](https://github.com/WordPress/gutenberg/pull/36316))
+-   Allow block.json attribute type to be an array. ([36295](https://github.com/WordPress/gutenberg/pull/36295))
 
 ### Bug Fixes
 
-- Chore: Fix small typos on the rest endpoints. ([36272](https://github.com/WordPress/gutenberg/pull/36272))
-- DEWP: Fix deprecation warning. ([36285](https://github.com/WordPress/gutenberg/pull/36285))
-- Fix mobile horizontal scrollbar. ([36567](https://github.com/WordPress/gutenberg/pull/36567))
-- Fix schema to allow for custom blocks in theme.json. ([36341](https://github.com/WordPress/gutenberg/pull/36341))
-- Theme switch on the global styles rest api unit test. ([36277](https://github.com/WordPress/gutenberg/pull/36277))
-- Polish metabox container. ([36297](https://github.com/WordPress/gutenberg/pull/36297))
+-   Chore: Fix small typos on the rest endpoints. ([36272](https://github.com/WordPress/gutenberg/pull/36272))
+-   DEWP: Fix deprecation warning. ([36285](https://github.com/WordPress/gutenberg/pull/36285))
+-   Fix mobile horizontal scrollbar. ([36567](https://github.com/WordPress/gutenberg/pull/36567))
+-   Fix schema to allow for custom blocks in theme.json. ([36341](https://github.com/WordPress/gutenberg/pull/36341))
+-   Theme switch on the global styles rest api unit test. ([36277](https://github.com/WordPress/gutenberg/pull/36277))
+-   Polish metabox container. ([36297](https://github.com/WordPress/gutenberg/pull/36297))
 
 #### Block Library
-- Fix background colours in nested submenus. ([36476](https://github.com/WordPress/gutenberg/pull/36476))
-- Fix colour rendering in Navigation overlay. ([36479](https://github.com/WordPress/gutenberg/pull/36479))
-- Fix duplicate custom classnames in navigation submenu block. ([36478](https://github.com/WordPress/gutenberg/pull/36478))
-- Fix submenu justification and spacer orientation. ([36340](https://github.com/WordPress/gutenberg/pull/36340))
-- Group - Fix overzealous regex when restoring inner containers. ([36221](https://github.com/WordPress/gutenberg/pull/36221))
-- Hide visilibility and status for navigation posts. ([36363](https://github.com/WordPress/gutenberg/pull/36363))
-- Nav block menu switcher - decode HTML entities and utilise accessible markup pattern. ([36397](https://github.com/WordPress/gutenberg/pull/36397))
-- Navigation: Fix click-button size, submenu directions, scrollbars. ([36215](https://github.com/WordPress/gutenberg/pull/36215))
-- Page List block: Fix space before `href` attribute. ([36505](https://github.com/WordPress/gutenberg/pull/36505))
-- Page List: Use core entities instead of direct apiFetch. ([36531](https://github.com/WordPress/gutenberg/pull/36531))
-- Post Comments Form: Ensure typography styles are applied to child elements. ([36425](https://github.com/WordPress/gutenberg/pull/36425))
-- Post title block default CSS: Add a break-word rule by default. ([35703](https://github.com/WordPress/gutenberg/pull/35703))
+
+-   Fix background colours in nested submenus. ([36476](https://github.com/WordPress/gutenberg/pull/36476))
+-   Fix colour rendering in Navigation overlay. ([36479](https://github.com/WordPress/gutenberg/pull/36479))
+-   Fix duplicate custom classnames in navigation submenu block. ([36478](https://github.com/WordPress/gutenberg/pull/36478))
+-   Fix submenu justification and spacer orientation. ([36340](https://github.com/WordPress/gutenberg/pull/36340))
+-   Group - Fix overzealous regex when restoring inner containers. ([36221](https://github.com/WordPress/gutenberg/pull/36221))
+-   Hide visilibility and status for navigation posts. ([36363](https://github.com/WordPress/gutenberg/pull/36363))
+-   Nav block menu switcher - decode HTML entities and utilise accessible markup pattern. ([36397](https://github.com/WordPress/gutenberg/pull/36397))
+-   Navigation: Fix click-button size, submenu directions, scrollbars. ([36215](https://github.com/WordPress/gutenberg/pull/36215))
+-   Page List block: Fix space before `href` attribute. ([36505](https://github.com/WordPress/gutenberg/pull/36505))
+-   Page List: Use core entities instead of direct apiFetch. ([36531](https://github.com/WordPress/gutenberg/pull/36531))
+-   Post Comments Form: Ensure typography styles are applied to child elements. ([36425](https://github.com/WordPress/gutenberg/pull/36425))
+-   Post title block default CSS: Add a break-word rule by default. ([35703](https://github.com/WordPress/gutenberg/pull/35703))
 
 #### Block API
-- Use firstChild and lastChild when parsing lists from MS Word. ([36019](https://github.com/WordPress/gutenberg/pull/36019))
+
+-   Use firstChild and lastChild when parsing lists from MS Word. ([36019](https://github.com/WordPress/gutenberg/pull/36019))
 
 #### Mobile
-- [Android] Synchronize content retrieval over the bridge. ([36072](https://github.com/WordPress/gutenberg/pull/36072))
+
+-   [Android] Synchronize content retrieval over the bridge. ([36072](https://github.com/WordPress/gutenberg/pull/36072))
 
 #### Full Site Editing
-- Fix layout shift in `core/post-featured-image` block with `isLink` enabled. ([36552](https://github.com/WordPress/gutenberg/pull/36552))
-- Template Part Block: Add some guards. ([36324](https://github.com/WordPress/gutenberg/pull/36324))
-- Chore: Add rewrite false to global styles CPT. ([36273](https://github.com/WordPress/gutenberg/pull/36273))
-- Revert "theme.json: Adds a setting property that enables some other ones". ([36477](https://github.com/WordPress/gutenberg/pull/36477))
--  Update more references to __experimental menu endpoints to make them stable. ([36386](https://github.com/WordPress/gutenberg/pull/36386))
+
+-   Fix layout shift in `core/post-featured-image` block with `isLink` enabled. ([36552](https://github.com/WordPress/gutenberg/pull/36552))
+-   Template Part Block: Add some guards. ([36324](https://github.com/WordPress/gutenberg/pull/36324))
+-   Chore: Add rewrite false to global styles CPT. ([36273](https://github.com/WordPress/gutenberg/pull/36273))
+-   Revert "theme.json: Adds a setting property that enables some other ones". ([36477](https://github.com/WordPress/gutenberg/pull/36477))
+-   Update more references to \_\_experimental menu endpoints to make them stable. ([36386](https://github.com/WordPress/gutenberg/pull/36386))
 
 #### Site Editor
-- Fix site editor reset styles in WP 5.9. ([36390](https://github.com/WordPress/gutenberg/pull/36390))
-- Site Editor - prevent loading state from showing the admin menu. ([36455](https://github.com/WordPress/gutenberg/pull/36455))
+
+-   Fix site editor reset styles in WP 5.9. ([36390](https://github.com/WordPress/gutenberg/pull/36390))
+-   Site Editor - prevent loading state from showing the admin menu. ([36455](https://github.com/WordPress/gutenberg/pull/36455))
 
 #### Themes
-- Add the ability to opt-out of Core color palette V2. ([36492](https://github.com/WordPress/gutenberg/pull/36492))
+
+-   Add the ability to opt-out of Core color palette V2. ([36492](https://github.com/WordPress/gutenberg/pull/36492))
 
 #### Build Tooling
-- Fix not transforming logical assignments for packages. ([36484](https://github.com/WordPress/gutenberg/pull/36484))
+
+-   Fix not transforming logical assignments for packages. ([36484](https://github.com/WordPress/gutenberg/pull/36484))
 
 #### Global Styles
-- Replace get_theme_file_path in theme_has_support. ([36398](https://github.com/WordPress/gutenberg/pull/36398))
+
+-   Replace get_theme_file_path in theme_has_support. ([36398](https://github.com/WordPress/gutenberg/pull/36398))
 
 #### Block Editor
-- Strip meta tags from pasted links in Chromium. ([36356](https://github.com/WordPress/gutenberg/pull/36356))
-- Add `webp` extension in `filePasteHandler` and `getPasteEventData`. ([36361](https://github.com/WordPress/gutenberg/pull/36361))
+
+-   Strip meta tags from pasted links in Chromium. ([36356](https://github.com/WordPress/gutenberg/pull/36356))
+-   Add `webp` extension in `filePasteHandler` and `getPasteEventData`. ([36361](https://github.com/WordPress/gutenberg/pull/36361))
 
 #### CSS & Styling
-- Update theme styles for the code block. ([36282](https://github.com/WordPress/gutenberg/pull/36282))
 
+-   Update theme styles for the code block. ([36282](https://github.com/WordPress/gutenberg/pull/36282))
 
 ### Experiments
 
 #### Global Styles
-- Chore: Add comment to Remove filter to allow WP variables after min version is 5.8. ([36281](https://github.com/WordPress/gutenberg/pull/36281))
-- Chore: Update: Centralize safe_style_css usages. ([36280](https://github.com/WordPress/gutenberg/pull/36280))
-- Add block icon next to blocks list. ([36520](https://github.com/WordPress/gutenberg/pull/36520))
-- theme.json: Adds a setting property that enables some other ones. ([36246](https://github.com/WordPress/gutenberg/pull/36246))
+
+-   Chore: Add comment to Remove filter to allow WP variables after min version is 5.8. ([36281](https://github.com/WordPress/gutenberg/pull/36281))
+-   Chore: Update: Centralize safe_style_css usages. ([36280](https://github.com/WordPress/gutenberg/pull/36280))
+-   Add block icon next to blocks list. ([36520](https://github.com/WordPress/gutenberg/pull/36520))
+-   theme.json: Adds a setting property that enables some other ones. ([36246](https://github.com/WordPress/gutenberg/pull/36246))
 
 #### Block Library
-- Apply i18n functions to Nav block menu drops when selecting existing Menu. ([36301](https://github.com/WordPress/gutenberg/pull/36301))
-- Navigation: Refactor and simplify setup state. ([36375](https://github.com/WordPress/gutenberg/pull/36375))
-- Rename fse_navigation_area to wp_navigation_area. ([36460](https://github.com/WordPress/gutenberg/pull/36460))
-- Return wp error from wp_insert_post. ([36483](https://github.com/WordPress/gutenberg/pull/36483))
+
+-   Apply i18n functions to Nav block menu drops when selecting existing Menu. ([36301](https://github.com/WordPress/gutenberg/pull/36301))
+-   Navigation: Refactor and simplify setup state. ([36375](https://github.com/WordPress/gutenberg/pull/36375))
+-   Rename fse_navigation_area to wp_navigation_area. ([36460](https://github.com/WordPress/gutenberg/pull/36460))
+-   Return wp error from wp_insert_post. ([36483](https://github.com/WordPress/gutenberg/pull/36483))
 
 #### Full Site Editing
-- Add template_type guards. ([36318](https://github.com/WordPress/gutenberg/pull/36318))
 
+-   Add template_type guards. ([36318](https://github.com/WordPress/gutenberg/pull/36318))
 
 ### Documentation
 
-- "npm install" suggestion provides a better learning experience. ([36217](https://github.com/WordPress/gutenberg/pull/36217))
-- Added specific links to agenda and notes posts related to core editor meetings. ([36199](https://github.com/WordPress/gutenberg/pull/36199))
-- Schemastore - $schema is VS Code-specific. ([36179](https://github.com/WordPress/gutenberg/pull/36179))
-- Update GIF image in documentation with wp.org schema URL. ([36456](https://github.com/WordPress/gutenberg/pull/36456))
-- Update Versions in WordPress to include 5.9. ([36156](https://github.com/WordPress/gutenberg/pull/36156))
-- Update combobox-control component readme. ([36413](https://github.com/WordPress/gutenberg/pull/36413))
-- Update theme.json schema to refer to wp.org URL. ([36332](https://github.com/WordPress/gutenberg/pull/36332))
+-   "npm install" suggestion provides a better learning experience. ([36217](https://github.com/WordPress/gutenberg/pull/36217))
+-   Added specific links to agenda and notes posts related to core editor meetings. ([36199](https://github.com/WordPress/gutenberg/pull/36199))
+-   Schemastore - $schema is VS Code-specific. ([36179](https://github.com/WordPress/gutenberg/pull/36179))
+-   Update GIF image in documentation with wp.org schema URL. ([36456](https://github.com/WordPress/gutenberg/pull/36456))
+-   Update Versions in WordPress to include 5.9. ([36156](https://github.com/WordPress/gutenberg/pull/36156))
+-   Update combobox-control component readme. ([36413](https://github.com/WordPress/gutenberg/pull/36413))
+-   Update theme.json schema to refer to wp.org URL. ([36332](https://github.com/WordPress/gutenberg/pull/36332))
 
 #### Components
-- Update `@wordpress/components` changelog. ([36448](https://github.com/WordPress/gutenberg/pull/36448))
 
+-   Update `@wordpress/components` changelog. ([36448](https://github.com/WordPress/gutenberg/pull/36448))
 
 ### Code Quality
 
-- Change @package to WordPress in block-library. ([36494](https://github.com/WordPress/gutenberg/pull/36494))
-- postcss-themes: Fix PostCSS 8 deprecation warning. ([36284](https://github.com/WordPress/gutenberg/pull/36284))
+-   Change @package to WordPress in block-library. ([36494](https://github.com/WordPress/gutenberg/pull/36494))
+-   postcss-themes: Fix PostCSS 8 deprecation warning. ([36284](https://github.com/WordPress/gutenberg/pull/36284))
 
 #### Navigation Screen
-- Prepare navigation php code for core patch. ([36336](https://github.com/WordPress/gutenberg/pull/36336))
+
+-   Prepare navigation php code for core patch. ([36336](https://github.com/WordPress/gutenberg/pull/36336))
 
 #### Block Library
-- Add block.json schema defintion to core blocks. ([35900](https://github.com/WordPress/gutenberg/pull/35900))
 
+-   Add block.json schema defintion to core blocks. ([35900](https://github.com/WordPress/gutenberg/pull/35900))
 
 ### Tools
 
 #### Testing
-- E2E: Add more Cover block tests. ([36321](https://github.com/WordPress/gutenberg/pull/36321))
-- Fix Performance CI tests and make them always use the latest major as base branch. ([36463](https://github.com/WordPress/gutenberg/pull/36463))
-- Fix failing tests and compatibility with 5.9. ([36368](https://github.com/WordPress/gutenberg/pull/36368))
-- Add integration tests with core blocks schema validation. ([36351](https://github.com/WordPress/gutenberg/pull/36351))
-- Skip flaky image block test. ([36446](https://github.com/WordPress/gutenberg/pull/36446))
+
+-   E2E: Add more Cover block tests. ([36321](https://github.com/WordPress/gutenberg/pull/36321))
+-   Fix Performance CI tests and make them always use the latest major as base branch. ([36463](https://github.com/WordPress/gutenberg/pull/36463))
+-   Fix failing tests and compatibility with 5.9. ([36368](https://github.com/WordPress/gutenberg/pull/36368))
+-   Add integration tests with core blocks schema validation. ([36351](https://github.com/WordPress/gutenberg/pull/36351))
+-   Skip flaky image block test. ([36446](https://github.com/WordPress/gutenberg/pull/36446))
 
 #### Icons
-- Add the missing comment edit link icon. ([36565](https://github.com/WordPress/gutenberg/pull/36565))
-- Remove hard coded color from query pagination icons. ([35837](https://github.com/WordPress/gutenberg/pull/35837))
-- Remove hard-coded values on icons. ([36564](https://github.com/WordPress/gutenberg/pull/36564))
+
+-   Add the missing comment edit link icon. ([36565](https://github.com/WordPress/gutenberg/pull/36565))
+-   Remove hard coded color from query pagination icons. ([35837](https://github.com/WordPress/gutenberg/pull/35837))
+-   Remove hard-coded values on icons. ([36564](https://github.com/WordPress/gutenberg/pull/36564))
 
 #### Components
-- ToolsPanel: Allow additional props on ToolsPanel. ([36428](https://github.com/WordPress/gutenberg/pull/36428))
-- Typography Panel: Make letter spacing jsDoc and prop use consistent. ([36367](https://github.com/WordPress/gutenberg/pull/36367))
+
+-   ToolsPanel: Allow additional props on ToolsPanel. ([36428](https://github.com/WordPress/gutenberg/pull/36428))
+-   Typography Panel: Make letter spacing jsDoc and prop use consistent. ([36367](https://github.com/WordPress/gutenberg/pull/36367))
 
 #### Block Library
-- Remove textdomain from calendar block. ([36500](https://github.com/WordPress/gutenberg/pull/36500))
+
+-   Remove textdomain from calendar block. ([36500](https://github.com/WordPress/gutenberg/pull/36500))
 
 #### Site Editor
-- Update site editor title truncation. ([36436](https://github.com/WordPress/gutenberg/pull/36436))
+
+-   Update site editor title truncation. ([36436](https://github.com/WordPress/gutenberg/pull/36436))
 
 #### Design Tools
-- Letter spacing: Update label copy. ([36385](https://github.com/WordPress/gutenberg/pull/36385))
+
+-   Letter spacing: Update label copy. ([36385](https://github.com/WordPress/gutenberg/pull/36385))
 
 #### Block API
-- Add pattern to `name` key in block.json Schema. ([36343](https://github.com/WordPress/gutenberg/pull/36343))
+
+-   Add pattern to `name` key in block.json Schema. ([36343](https://github.com/WordPress/gutenberg/pull/36343))
 
 #### Data Layer
-- Data: Clean up registerGenericStore param names. ([36300](https://github.com/WordPress/gutenberg/pull/36300))
+
+-   Data: Clean up registerGenericStore param names. ([36300](https://github.com/WordPress/gutenberg/pull/36300))
 
 #### Template Editor
-- Change edit links for templates and template parts. ([36294](https://github.com/WordPress/gutenberg/pull/36294))
 
+-   Change edit links for templates and template parts. ([36294](https://github.com/WordPress/gutenberg/pull/36294))
 
 = 11.9.1 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Block Library
-- Gallery: Fix issue with columns and link destination not copying across when gallery updated to v2 format. ([36388](https://github.com/WordPress/gutenberg/pull/36388))
 
-#### Full Site Editing
-- Site editor: Add feature flag to toggle the new site editor sidebar. ([36516](https://github.com/WordPress/gutenberg/pull/36516))
-- Site editor: Prevent loading state from showing the admin menu. ([36455](https://github.com/WordPress/gutenberg/pull/36455))
-
-#### Testing
-- Cover Block: Fix regressions in opacity. ([36406](https://github.com/WordPress/gutenberg/pull/36406))
-- E2E: Add more Cover block tests ([36321](https://github.com/WordPress/gutenberg/pull/36321))
+-   Gallery: Fix issue with columns and link destination not copying across when gallery updated to v2 format. ([36388](https://github.com/WordPress/gutenberg/pull/36388))
 
+#### Full Site Editing
 
+-   Site editor: Add feature flag to toggle the new site editor sidebar. ([36516](https://github.com/WordPress/gutenberg/pull/36516))
+-   Site editor: Prevent loading state from showing the admin menu. ([36455](https://github.com/WordPress/gutenberg/pull/36455))
 
+#### Testing
 
+-   Cover Block: Fix regressions in opacity. ([36406](https://github.com/WordPress/gutenberg/pull/36406))
+-   E2E: Add more Cover block tests ([36321](https://github.com/WordPress/gutenberg/pull/36321))
 
 = 11.9.0 =
 
+## Changelog
+
 ### Features
 
 #### Block Library
-- New Block: Comment Reply Link. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
-- New Block: Comment Link. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
-- New Block: Comment Avatar. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
-- New Block: Comments Query Loop. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
+
+-   New Block: Comment Reply Link. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
+-   New Block: Comment Link. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
+-   New Block: Comment Avatar. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
+-   New Block: Comments Query Loop. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
 
 ### Enhancements
 
 #### Block Library
-- Buttons: Add flex layout and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
-- Code: Add support for padding, color, and border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
-- Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
-- Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
-- Comment Edit Link: Add alignment option. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
-- Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
-- Gallery: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
-- Image: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
-- Navigation: Add create new menu button. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
-- Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
-- Navigation: Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
-- Navigation: Add flex layout. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
-- Navigation: Add missing menu item attributes. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
-- Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
-- Navigation: Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
-- Navigation: Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
-- Navigation: Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
-- Navigation: Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
-- Navigation: Save data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
-- Navigation: Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
-- Navigation: Update block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
-- Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
-- Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
-- Post Author: Add spacing controls. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
-- Post Comment: Deprecate the block now that the Comment Query Loop block has been added. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
-- Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
-- Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
-- Post Comments: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
-- Post Comment Form: Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
-- Post Excerpt: Add spacing controls. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
-- Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
-- Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
-- Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
-- Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. ([36012](https://github.com/WordPress/gutenberg/pull/36012))
+
+-   Buttons: Add flex layout and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
+-   Code: Add support for padding, color, and border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
+-   Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
+-   Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
+-   Comment Edit Link: Add alignment option. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
+-   Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
+-   Gallery: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
+-   Image: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
+-   Navigation: Add create new menu button. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
+-   Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
+-   Navigation: Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
+-   Navigation: Add flex layout. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
+-   Navigation: Add missing menu item attributes. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
+-   Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
+-   Navigation: Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
+-   Navigation: Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
+-   Navigation: Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
+-   Navigation: Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
+-   Navigation: Save data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
+-   Navigation: Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
+-   Navigation: Update block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
+-   Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
+-   Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
+-   Post Author: Add spacing controls. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
+-   Post Comment: Deprecate the block now that the Comment Query Loop block has been added. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
+-   Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
+-   Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
+-   Post Comments: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
+-   Post Comment Form: Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
+-   Post Excerpt: Add spacing controls. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
+-   Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
+-   Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
+-   Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
+-   Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. ([36012](https://github.com/WordPress/gutenberg/pull/36012))
 
 #### Accessibility
-- Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
-- Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
-- Link editing: Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
-- Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
-- Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
+
+-   Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
+-   Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
+-   Link editing: Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
+-   Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
+-   Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
 
 #### Block Editor
-- Block toolbar: Remove visual clue from text alignment icon. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
-- Drag and drop: Show drag slot instead of hiding the block being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
-- Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
-- Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
-- Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
-- Use the block's name in the "remove block" menu item in the block settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
-- StripHTML: preserve leading and trailing spaces and strip script and on* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
+
+-   Block toolbar: Remove visual clue from text alignment icon. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
+-   Drag and drop: Show drag slot instead of hiding the block being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
+-   Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
+-   Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
+-   Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
+-   Use the block's name in the "remove block" menu item in the block settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
+-   StripHTML: preserve leading and trailing spaces and strip script and on\* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
 
 #### Full Site Editing
-- Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
-- Move the Site Editor menu item to sit under Appearance and rename to Editor. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
-- Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
-- Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
-- Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
-
-#### Components
-- ColorPicker: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
-- Duotone: Add description to clarify that the underlying image will not be affected. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
-- Modal: Wrap the modal contents in a StyleProvider. ([36261](https://github.com/WordPress/gutenberg/pull/36261))
-- ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
-- LinkControl: Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
+
+-   Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
+-   Move the Site Editor menu item to sit under Appearance and rename to Editor. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
+-   Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
+-   Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
+-   Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
+
+#### Components
+
+-   ColorPicker: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
+-   Duotone: Add description to clarify that the underlying image will not be affected. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
+-   Modal: Wrap the modal contents in a StyleProvider. ([36261](https://github.com/WordPress/gutenberg/pull/36261))
+-   ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
+-   LinkControl: Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
+
 #### Template Editor
-- Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
-- Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
+
+-   Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
+-   Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
 
 #### Global Styles
-- Remove the duplicated title in background, text and link views. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
-- Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
-- Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
-- Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
-- Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
+
+-   Remove the duplicated title in background, text and link views. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
+-   Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
+-   Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
+-   Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
+-   Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
 
 #### Design Tools
-- Duotone: Enable transparency. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
-- Layout: Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
-- Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
+
+-   Duotone: Enable transparency. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
+-   Layout: Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
+-   Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
 
 #### Media
-- Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
+
+-   Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
 
 #### Patterns
-- Add an `inserter` flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
+
+-   Add an `inserter` flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
 
 #### Themes
-- Remove experimental feature notice for block themes. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
+
+-   Remove experimental feature notice for block themes. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
 
 #### General Interface
-- Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
+
+-   Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
 
 #### REST API
-- Respect fields param for global styles REST API requests. ([36206](https://github.com/WordPress/gutenberg/pull/36206))
-- URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
+-   Respect fields param for global styles REST API requests. ([36206](https://github.com/WordPress/gutenberg/pull/36206))
+-   URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
 ### New APIs
 
 #### Global Styles
-- Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
-
-#### Block Library
-- Inner blocks: Add `useInnerBlocksProps.save` function for edit/save symmetry, and stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
-
-
-### Bug Fixes
-
-#### Block Library
-- Buttons: Address deprecation issues from Buttons flex layout PR. ([36192](https://github.com/WordPress/gutenberg/pull/36192))
-- Classic: Fix select all blocks side effect that overwrote paragraph block contents. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
-- Column: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
-- Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
-- Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
-- Navigation: Disable ability to edit wp_navigation menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
-- Fix incorrect attributes definitions. ([36264](https://github.com/WordPress/gutenberg/pull/36264))
-- Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
-- Fix incorrect attributes definitions for Column, Cover, and Group blocks. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
-- Gallery: Make sure the mobile warning notice only runs when images are added to a new block. ([36326](https://github.com/WordPress/gutenberg/pull/36326))
-- Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
-- Gallery: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
-- Group: Fix inner container regexes that relied on fixed div tag. ([36256](https://github.com/WordPress/gutenberg/pull/36256))
-- Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
-- Image: Make sure the Image block border radius is inherited if the image is linked. ([36289](https://github.com/WordPress/gutenberg/pull/36289))
-- Navigation Submenu: Fix PHP notice caused by stale id reference. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
-- Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
-- Navigation: Ensure menus exist before map operation. ([36355](https://github.com/WordPress/gutenberg/pull/36355))
-- Navigation: Fix accessibility issues. ([36292](https://github.com/WordPress/gutenberg/pull/36292))
-- Navigation: Fix dropdown indicator position. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
-- Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913)) and ([36105](https://github.com/WordPress/gutenberg/pull/36105))
-- Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
-- Navigation: Fix submenus not opening on click. ([36290](https://github.com/WordPress/gutenberg/pull/36290))
-- Navigation: Hide post attributes meta box. ([36358](https://github.com/WordPress/gutenberg/pull/36358))
-- Navigation: Small styling fixes and tweaks. ([36298](https://github.com/WordPress/gutenberg/pull/36298))
-- Pattern: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
-- Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
-- Post Navigation Link: Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
-- Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
-- Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
-- Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
-- Site Logo: Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
-- Prevent PHP notice in Elements block support for blocks with empty content. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
-
-#### Components
-- AnglePickerControl: Use admin color scheme. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
-- BaseControl: Fix undefined Help text id if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
-- ColorListPicker: Fix spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
-- ColorPalette: Fix className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
-- ColorPicker: Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
-- Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
-- RangeControl: Fix style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
-- Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
-- Text: Fix text color value to use correct gray color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
-
-#### Global Styles
-- Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
-- Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
-- Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
-- Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
-- Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
-- Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
-- Fix Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
-
-#### Block Editor
-- Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
-- Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
-- Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
-- Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
-- Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
-- Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
-- Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
-- Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
-- Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
-- Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
-- Fix `getPxFromCssUnit` test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
-- Link editing: Account for link anchor no longer being present when generating unique link instance key. ([36357](https://github.com/WordPress/gutenberg/pull/36357))
-- Preserve highlighted text selection when changing colors ([36263](https://github.com/WordPress/gutenberg/pull/36263))
+
+-   Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
+
+#### Block Library
+
+-   Inner blocks: Add `useInnerBlocksProps.save` function for edit/save symmetry, and stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
+
+### Bug Fixes
+
+#### Block Library
+
+-   Buttons: Address deprecation issues from Buttons flex layout PR. ([36192](https://github.com/WordPress/gutenberg/pull/36192))
+-   Classic: Fix select all blocks side effect that overwrote paragraph block contents. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
+-   Column: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
+-   Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
+-   Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
+-   Navigation: Disable ability to edit wp_navigation menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
+-   Fix incorrect attributes definitions. ([36264](https://github.com/WordPress/gutenberg/pull/36264))
+-   Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
+-   Fix incorrect attributes definitions for Column, Cover, and Group blocks. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
+-   Gallery: Make sure the mobile warning notice only runs when images are added to a new block. ([36326](https://github.com/WordPress/gutenberg/pull/36326))
+-   Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
+-   Gallery: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
+-   Group: Fix inner container regexes that relied on fixed div tag. ([36256](https://github.com/WordPress/gutenberg/pull/36256))
+-   Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
+-   Image: Make sure the Image block border radius is inherited if the image is linked. ([36289](https://github.com/WordPress/gutenberg/pull/36289))
+-   Navigation Submenu: Fix PHP notice caused by stale id reference. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
+-   Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
+-   Navigation: Ensure menus exist before map operation. ([36355](https://github.com/WordPress/gutenberg/pull/36355))
+-   Navigation: Fix accessibility issues. ([36292](https://github.com/WordPress/gutenberg/pull/36292))
+-   Navigation: Fix dropdown indicator position. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
+-   Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913)) and ([36105](https://github.com/WordPress/gutenberg/pull/36105))
+-   Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
+-   Navigation: Fix submenus not opening on click. ([36290](https://github.com/WordPress/gutenberg/pull/36290))
+-   Navigation: Hide post attributes meta box. ([36358](https://github.com/WordPress/gutenberg/pull/36358))
+-   Navigation: Small styling fixes and tweaks. ([36298](https://github.com/WordPress/gutenberg/pull/36298))
+-   Pattern: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
+-   Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
+-   Post Navigation Link: Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
+-   Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
+-   Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
+-   Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
+-   Site Logo: Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
+-   Prevent PHP notice in Elements block support for blocks with empty content. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
+
+#### Components
+
+-   AnglePickerControl: Use admin color scheme. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
+-   BaseControl: Fix undefined Help text id if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
+-   ColorListPicker: Fix spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
+-   ColorPalette: Fix className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
+-   ColorPicker: Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
+-   Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
+-   RangeControl: Fix style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
+-   Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
+-   Text: Fix text color value to use correct gray color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
+
+#### Global Styles
+
+-   Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
+-   Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
+-   Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
+-   Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
+-   Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
+-   Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
+-   Fix Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
+
+#### Block Editor
+
+-   Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
+-   Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
+-   Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
+-   Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
+-   Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
+-   Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
+-   Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
+-   Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
+-   Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
+-   Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
+-   Fix `getPxFromCssUnit` test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
+-   Link editing: Account for link anchor no longer being present when generating unique link instance key. ([36357](https://github.com/WordPress/gutenberg/pull/36357))
+-   Preserve highlighted text selection when changing colors ([36263](https://github.com/WordPress/gutenberg/pull/36263))
 
 #### Design Tools
-- Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
-- Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
-- Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
+
+-   Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
+-   Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
+-   Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
 
 #### Template Editor
-- Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
-- Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
+
+-   Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
+-   Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
 
 #### Core Data
-- Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
-- Fix getEntityRecords to ensure resolution on REST API failure. ([36353](https://github.com/WordPress/gutenberg/pull/36353))
-- Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
-- Make `saveEditedEntityRecord` use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
+
+-   Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
+-   Fix getEntityRecords to ensure resolution on REST API failure. ([36353](https://github.com/WordPress/gutenberg/pull/36353))
+-   Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
+-   Make `saveEditedEntityRecord` use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
 
 #### Patterns
-- Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
+
+-   Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
 
 #### Full Site Editing
-- Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
-- Fix missing `<MainDashboardButton>` slot fill in site editor. ([36369](https://github.com/WordPress/gutenberg/pull/36369))
-- Remove duplicate Editor menu item. ([36342](https://github.com/WordPress/gutenberg/pull/36342))
-- Theme resolver: Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
-- Unhook `_block_template_render_title_tag` to prevent duplicate title tags from rendering. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
+
+-   Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
+-   Fix missing `<MainDashboardButton>` slot fill in site editor. ([36369](https://github.com/WordPress/gutenberg/pull/36369))
+-   Remove duplicate Editor menu item. ([36342](https://github.com/WordPress/gutenberg/pull/36342))
+-   Theme resolver: Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
+-   Unhook `_block_template_render_title_tag` to prevent duplicate title tags from rendering. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
 
 #### Widgets Editor
-- Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
+
+-   Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
 
 #### CSS & Styling
-- Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
+
+-   Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
 
 #### History
-- Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
+-   Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
 ### Performance
 
 #### List View
-- Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
-- List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
+
+-   Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
+-   List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
 #### Block Editor
-- Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
+
+-   Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
 
 #### Widgets Editor
-- List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
+
+-   List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
 
 ### Experiments
 
 #### Block Library
-- Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
 
+-   Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
 
 #### Full Site Editing
-- Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
-- Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
-- Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
+
+-   Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
+-   Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
+-   Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
 
 #### REST API
 
 #### Navigation Editor
-- Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
+
+-   Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
 
 ### Documentation
-- Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
+
+-   Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
+
 #### Handbook
-- Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
-- Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
-- Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
-- Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
-- Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
-- Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
-- Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
-- Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
-- Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
-- Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
-- Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
-- Theme.json: Fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
-- Theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
-- Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
-- Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
+
+-   Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
+-   Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
+-   Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
+-   Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
+-   Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
+-   Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
+-   Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
+-   Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
+-   Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
+-   Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
+-   Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
+-   Theme.json: Fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
+-   Theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
+-   Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
+-   Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
 
 #### Packages
-- Components: Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
-- Create Block: Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
-- DOM: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
-- Env: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
-- Rich Text: Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
-- Schemas: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
+
+-   Components: Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
+-   Create Block: Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
+-   DOM: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
+-   Env: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
+-   Rich Text: Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
+-   Schemas: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
 
 ### Code Quality
 
 #### REST API
-- Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
-- Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
-- Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
 
+-   Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
+-   Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
+-   Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
 
 #### Block Library
-- Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
-- Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
-- Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
-- Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
-- Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
+
+-   Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
+-   Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
+-   Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
+-   Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
+-   Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
 
 #### Global Styles
-- Linting: Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
-- Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
-- Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
-- Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
+
+-   Linting: Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
+-   Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
+-   Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
+-   Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
 
 #### Post Editor
-- Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
-- Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
-- Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
-- Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
+
+-   Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
+-   Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
+-   Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
+-   Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
 
 #### Components
-- ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
-- Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
-- Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
+
+-   ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
+-   Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
+-   Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
 
 #### Other Packages
-- Create Block: Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
-- Data: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
-- Url: Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
-- Schemas: Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
-- Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
+
+-   Create Block: Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
+-   Data: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
+-   Url: Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
+-   Schemas: Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
+-   Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
 
 #### CSS & Styling
-- Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
+-   Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
 ### Tools
 
 #### Plugin and backporting to WordPress core
-- Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
-- Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
-- Temporarily pin .wp-env.json to WP 5.8.1. ([36333](https://github.com/WordPress/gutenberg/pull/36333))
+
+-   Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
+-   Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
+-   Temporarily pin .wp-env.json to WP 5.8.1. ([36333](https://github.com/WordPress/gutenberg/pull/36333))
 
 #### Testing
-- Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
-- Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
-- Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
-- Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
-- theme.json: Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
-- theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
-- Scripts: Increase timeout for end-to-end tests to 30 seconds. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
-- Improve unit test coverage for REST API menus endpoints. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
-- Update child theme.json merge test to match core. ([36329](https://github.com/WordPress/gutenberg/pull/36329))
+
+-   Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
+-   Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
+-   Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
+-   Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
+-   theme.json: Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
+-   theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
+-   Scripts: Increase timeout for end-to-end tests to 30 seconds. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
+-   Improve unit test coverage for REST API menus endpoints. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
+-   Update child theme.json merge test to match core. ([36329](https://github.com/WordPress/gutenberg/pull/36329))
 
 #### Debugging
-- Wp-env: Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
 
+-   Wp-env: Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
 
 = 11.8.3 =
 
+## Changelog
 
 ### Various
 
-- Fix Gutenberg WordPress trunk https://github.com/WordPress/gutenberg/pull/36347.
-
+-   Fix Gutenberg WordPress trunk https://github.com/WordPress/gutenberg/pull/36347.
 
 = 11.9.0-rc.3 =
 
+## Changelog
+
 ### Features
 
 #### Block Library
-- New Block: Comment Reply Link. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
-- New Block: Comment Link. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
-- New Block: Comment Avatar. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
-- New Block: Comments Query Loop. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
 
+-   New Block: Comment Reply Link. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
+-   New Block: Comment Link. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
+-   New Block: Comment Avatar. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
+-   New Block: Comments Query Loop. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
 
 ### Enhancements
 
-- Block toolbar: Remove visual clue from text alignment icon. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
-- Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
-- StripHTML: preserve leading and trailing spaces and strip script and on* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
-
-#### Block Library
-
-- Buttons: Add flex layout and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
-- Code: Add support for padding, color, and border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
-- Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
-- Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
-- Comment Edit Link: Add alignment option. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
-- Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
-- Gallery: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
-- Image: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
-- Navigation: Add create new menu button. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
-- Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
-- Navigation: Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
-- Navigation: Add flex layout. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
-- Navigation: Add missing menu item attributes. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
-- Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
-- Navigation: Save data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
-- Navigation: Update block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
-- Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
-- Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
-- Post Author: Add spacing controls. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
-- Post Comment: Deprecate the block now that the Comment Query Loop block has been added. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
-- Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
-- Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
-- Post Excerpt: Add spacing controls. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
-- Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
-- Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
-- Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
-- Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. ([36012](https://github.com/WordPress/gutenberg/pull/36012))
+-   Block toolbar: Remove visual clue from text alignment icon. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
+-   Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
+-   StripHTML: preserve leading and trailing spaces and strip script and on\* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
+
+#### Block Library
+
+-   Buttons: Add flex layout and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
+-   Code: Add support for padding, color, and border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
+-   Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
+-   Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
+-   Comment Edit Link: Add alignment option. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
+-   Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
+-   Gallery: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
+-   Image: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
+-   Navigation: Add create new menu button. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
+-   Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
+-   Navigation: Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
+-   Navigation: Add flex layout. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
+-   Navigation: Add missing menu item attributes. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
+-   Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
+-   Navigation: Save data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
+-   Navigation: Update block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
+-   Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
+-   Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
+-   Post Author: Add spacing controls. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
+-   Post Comment: Deprecate the block now that the Comment Query Loop block has been added. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
+-   Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
+-   Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
+-   Post Excerpt: Add spacing controls. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
+-   Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
+-   Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
+-   Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
+-   Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. ([36012](https://github.com/WordPress/gutenberg/pull/36012))
 
 #### Accessibility
-- Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
-- Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
-- Link editing: Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
-- Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
+
+-   Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
+-   Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
+-   Link editing: Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
+-   Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
 
 #### Block Editor
-- Drag and drop: Show drag slot instead of hiding the block being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
-- Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
-- Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
-- Use the block's name in the "remove block" menu item in the block settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
+
+-   Drag and drop: Show drag slot instead of hiding the block being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
+-   Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
+-   Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
+-   Use the block's name in the "remove block" menu item in the block settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
 
 #### Full Site Editing
-- Move the Site Editor menu item to sit under Appearance and rename to Editor. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
-- Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
-- Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
+
+-   Move the Site Editor menu item to sit under Appearance and rename to Editor. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
+-   Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
+-   Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
 
 #### Components
-- Duotone: Add description to clarify that the underlying image will not be affected. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
-- ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
+
+-   Duotone: Add description to clarify that the underlying image will not be affected. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
+-   ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
 
 #### Template Editor
-- Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
-- Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
+
+-   Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
+-   Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
 
 #### Global Styles
-- Remove the duplicated title in background, text and link views. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
-- Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
+
+-   Remove the duplicated title in background, text and link views. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
+-   Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
 
 #### Design Tools
-- Duotone: Enable transparency. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
-- Layout: Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
-- Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
+
+-   Duotone: Enable transparency. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
+-   Layout: Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
+-   Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
 
 #### Media
-- Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
+
+-   Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
 
 #### Patterns
-- Add an `inserter` flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
+
+-   Add an `inserter` flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
 
 #### Themes
-- Remove experimental feature notice for block themes. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
+
+-   Remove experimental feature notice for block themes. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
 
 #### Testing
-- Scripts: Increase timeout for end-to-end tests to 30 seconds. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
+
+-   Scripts: Increase timeout for end-to-end tests to 30 seconds. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
 
 #### Tools
-- Wp-env: Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
+
+-   Wp-env: Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
 
 #### REST API
-- URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
+-   URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
 ### New APIs
 
 #### Global Styles
-- Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
-
-#### Block Library
-- Inner blocks: Add `useInnerBlocksProps.save` function for edit/save symmetry, and stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
-
-
-### Bug Fixes
-
-- Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
-- Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
-- BaseControl: Fix undefined Help text id if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
-- Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
-- Disable ability to edit wp_navigation menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
-- Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
-- Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
-- Fix `getPxFromCssUnit` test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
-- Fix Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
-- Make `saveEditedEntityRecord` use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
-- Preserve highlighted text selection when changing colors ([36263](https://github.com/WordPress/gutenberg/pull/36263))
-- Prevent PHP notice in Elements block support for blocks with empty content. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
-- Theme resolver: Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
-- Unhook `_block_template_render_title_tag` to prevent duplicate title tags from rendering. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
-
-#### Block Library
-- Classic: Fix select all blocks side effect that overwrote paragraph block contents. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
-- Column: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
-- Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
-- Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
-- Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
-- Fix incorrect attributes definitions for Column, Cover, and Group blocks. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
-- Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
-- Gallery: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
-- Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
-- Navigation Submenu: Fix PHP notice caused by stale id reference. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
-- Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
-- Navigation: Fix dropdown indicator position. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
-- Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913)) and ([36105](https://github.com/WordPress/gutenberg/pull/36105))
-- Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
-- Pattern: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
-- Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
-- Post Content: Ensure the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
-- Post Navigation Link: Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
-- Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
-- Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
-- Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
-- Fix submenus not opening on click. ([36290](https://github.com/WordPress/gutenberg/pull/36290))
-
-
-#### Components
-- AnglePickerControl: Use admin color scheme. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
-- ColorListPicker: Fix spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
-- ColorPalette: Fix className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
-- ColorPicker: Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
-- Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
-- RangeControl: Fix style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
-- Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
-- Text: Fix text color value to use correct gray color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
-
-#### Global Styles
-- Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
-- Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
-- Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
-- Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
-- Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
-- Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
-
-#### Block Editor
-- Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
-- Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
-- Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
-- Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
-- Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
-- Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
+
+-   Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
+
+#### Block Library
+
+-   Inner blocks: Add `useInnerBlocksProps.save` function for edit/save symmetry, and stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
+
+### Bug Fixes
+
+-   Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
+-   Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
+-   BaseControl: Fix undefined Help text id if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
+-   Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
+-   Disable ability to edit wp_navigation menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
+-   Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
+-   Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
+-   Fix `getPxFromCssUnit` test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
+-   Fix Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
+-   Make `saveEditedEntityRecord` use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
+-   Preserve highlighted text selection when changing colors ([36263](https://github.com/WordPress/gutenberg/pull/36263))
+-   Prevent PHP notice in Elements block support for blocks with empty content. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
+-   Theme resolver: Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
+-   Unhook `_block_template_render_title_tag` to prevent duplicate title tags from rendering. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
+
+#### Block Library
+
+-   Classic: Fix select all blocks side effect that overwrote paragraph block contents. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
+-   Column: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
+-   Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
+-   Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
+-   Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
+-   Fix incorrect attributes definitions for Column, Cover, and Group blocks. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
+-   Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
+-   Gallery: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
+-   Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
+-   Navigation Submenu: Fix PHP notice caused by stale id reference. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
+-   Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
+-   Navigation: Fix dropdown indicator position. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
+-   Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913)) and ([36105](https://github.com/WordPress/gutenberg/pull/36105))
+-   Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
+-   Pattern: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
+-   Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
+-   Post Content: Ensure the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
+-   Post Navigation Link: Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
+-   Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
+-   Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
+-   Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
+-   Fix submenus not opening on click. ([36290](https://github.com/WordPress/gutenberg/pull/36290))
+
+#### Components
+
+-   AnglePickerControl: Use admin color scheme. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
+-   ColorListPicker: Fix spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
+-   ColorPalette: Fix className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
+-   ColorPicker: Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
+-   Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
+-   RangeControl: Fix style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
+-   Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
+-   Text: Fix text color value to use correct gray color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
+
+#### Global Styles
+
+-   Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
+-   Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
+-   Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
+-   Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
+-   Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
+-   Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
+
+#### Block Editor
+
+-   Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
+-   Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
+-   Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
+-   Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
+-   Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
+-   Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
 
 #### Design Tools
-- Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
-- Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
-- Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
+
+-   Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
+-   Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
+-   Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
 
 #### Template Editor
-- Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
-- Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
+
+-   Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
+-   Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
 
 #### Plugin
-- Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
+
+-   Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
 
 #### Patterns
-- Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
+
+-   Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
 
 #### Accessibility
-- Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
+
+-   Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
 
 #### Full Site Editing
-- Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
+
+-   Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
 
 #### Widgets Editor
-- Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
+
+-   Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
 
 #### CSS & Styling
-- Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
+
+-   Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
 
 #### History
-- Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
+-   Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
 ### Performance
 
 #### List View
-- Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
+
+-   Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
 
 #### Block Editor
-- Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
+
+-   Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
 
 #### Widgets Editor
-- List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
+
+-   List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
 
 #### Accessibility
-- List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
+-   List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
 ### Experiments
 
 #### Block Library
-- Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
-- Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
-- Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
-- Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
-- Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
-- Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
-- Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
-- Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
+
+-   Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
+-   Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
+-   Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
+-   Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
+-   Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
+-   Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
+-   Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
+-   Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
 
 #### Global Styles
-- Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
-- Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
-- Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
-- Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
-- Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
+
+-   Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
+-   Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
+-   Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
+-   Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
+-   Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
 
 #### Full Site Editing
-- Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
-- Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
-- Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
+
+-   Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
+-   Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
+-   Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
 
 #### REST API
-- Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
+
+-   Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
 
 #### Navigation Screen
-- Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
+
+-   Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
 
 #### Reusable Blocks
-- Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
+
+-   Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
 
 #### Components
-- Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
+
+-   Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
 
 #### Block Editor
-- Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
+-   Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
 ### Documentation
 
-- Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
-- Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
-- Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
-- Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
-- Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
-- Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
-- Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
-- Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
-- Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
-- Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
-- Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
-- Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
-- Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
-- Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
-- Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
-- Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
-- Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
-- Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
-- Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
-- Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
-- fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
-- theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
-
+-   Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
+-   Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
+-   Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
+-   Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
+-   Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
+-   Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
+-   Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
+-   Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
+-   Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
+-   Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
+-   Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
+-   Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
+-   Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
+-   Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
+-   Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
+-   Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
+-   Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
+-   Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
+-   Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
+-   Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
+-   fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
+-   theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
 
 ### Code Quality
 
-- Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
-- Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
-- Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
-- Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
-- Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
-- Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
-- Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
-- Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
-- Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
-- Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
-- Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
-- Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
-- block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
-- theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
+-   Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
+-   Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
+-   Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
+-   Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
+-   Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
+-   Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
+-   Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
+-   Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
+-   Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
+-   Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
+-   Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
+-   Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
+-   block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
+-   theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
 
 #### Block Library
-- Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
-- Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
-- Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
-- Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
+
+-   Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
+-   Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
+-   Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
+-   Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
 
 #### Global Styles
-- Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
-- Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
-- Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
+
+-   Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
+-   Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
+-   Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
 
 #### Post Editor
-- Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
-- Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
+
+-   Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
+-   Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
 
 #### Components
-- ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
-- Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
+
+-   ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
+-   Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
 
 #### Data Layer
-- [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
+
+-   [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
 
 #### CSS & Styling
-- Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
+-   Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
 ### Tools
 
-- Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
+-   Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
 
 #### Testing
-- Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
-- Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
-- Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
-- Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
+
+-   Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
+-   Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
+-   Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
+-   Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
 
 #### Block Library
-- Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
+-   Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
 ### Various
 
-- Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
-- Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
+-   Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
+-   Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
 
 #### Site Editor
-- Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
 
-#### Components
-- Modal: Wrap the modal contents in a StyleProvider. ([36261](https://github.com/WordPress/gutenberg/pull/36261))
+-   Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
 
+#### Components
 
+-   Modal: Wrap the modal contents in a StyleProvider. ([36261](https://github.com/WordPress/gutenberg/pull/36261))
 
 = 11.8.2 =
 
-
+## Changelog
 
 ### Various
 
 #### Block Library
-- Cover Block: Fix default background dim. ([36312](https://github.com/WordPress/gutenberg/pull/36312))
-
-
-
 
+-   Cover Block: Fix default background dim. ([36312](https://github.com/WordPress/gutenberg/pull/36312))
 
 = 11.9.0-rc.2 =
 
+## Changelog
+
 ### Various
 
-- Keep a copy of anchor ref to preserve highlighted text selection. ([36263](https://github.com/WordPress/gutenberg/pull/36263))
+-   Keep a copy of anchor ref to preserve highlighted text selection. ([36263](https://github.com/WordPress/gutenberg/pull/36263))
 
 ### Features
 
 #### Block Library
-- Add Media File and Attachment Page options to the native Image block Link To menu. ([34846](https://github.com/WordPress/gutenberg/pull/34846))
-- Add new Comment Reply Link block. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
-- Add new Edit Comment Link block. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
-- Site Editor: Add Comment Avatar Core Block. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
-- Site Editor: Add new Comments Query Loop block. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
+
+-   Add Media File and Attachment Page options to the native Image block Link To menu. ([34846](https://github.com/WordPress/gutenberg/pull/34846))
+-   Add new Comment Reply Link block. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
+-   Add new Edit Comment Link block. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
+-   Site Editor: Add Comment Avatar Core Block. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
+-   Site Editor: Add new Comments Query Loop block. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
 
 #### Block Editor
-- Enable native editor onboarding features globally. ([35201](https://github.com/WordPress/gutenberg/pull/35201))
 
+-   Enable native editor onboarding features globally. ([35201](https://github.com/WordPress/gutenberg/pull/35201))
 
 ### Enhancements
 
-- Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
-- Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
-- StripHTML - preserve leading and trailing spaces and strip script and on* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
-- Remove visual clue from text alignment toolbar. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
-- Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
-
-#### Block Library
-- Add alignment option to the Comment Edit Link block. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
-- Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
-- Add flex layout to Buttons block and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
-- Add spacing controls to Post Author block. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
-- Add spacing controls to Post Excerpt. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
-- Add create new menu button to nav block. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
-- Code block: Add support for padding, color & border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
-- Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
-- Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
-- Deprecate the Post Comment block. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
-- Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
-- Gallery block: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
-- Image Block: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
-- Navigation Block: Add missing menu item attributes to core/navigation. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
-- Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
-- Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
-- Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
-- Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
-- Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
-- Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
-- Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
-- Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
-- Save Navigation Block data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
-- Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
-- Try using flex layout on the Navigation block. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
-- Update navigation block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
+-   Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
+-   Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
+-   StripHTML - preserve leading and trailing spaces and strip script and on\* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
+-   Remove visual clue from text alignment toolbar. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
+-   Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
+
+#### Block Library
+
+-   Add alignment option to the Comment Edit Link block. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
+-   Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
+-   Add flex layout to Buttons block and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
+-   Add spacing controls to Post Author block. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
+-   Add spacing controls to Post Excerpt. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
+-   Add create new menu button to nav block. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
+-   Code block: Add support for padding, color & border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
+-   Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
+-   Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
+-   Deprecate the Post Comment block. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
+-   Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
+-   Gallery block: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
+-   Image Block: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
+-   Navigation Block: Add missing menu item attributes to core/navigation. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
+-   Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
+-   Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
+-   Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
+-   Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
+-   Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
+-   Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
+-   Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
+-   Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
+-   Save Navigation Block data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
+-   Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
+-   Try using flex layout on the Navigation block. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
+-   Update navigation block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
 
 #### Accessibility
-- Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
-- Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
-- Full Site Editing: Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
-- Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
-- Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
+
+-   Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
+-   Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
+-   Full Site Editing: Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
+-   Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
+-   Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
 
 #### Block Editor
-- Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
-- Try: Show drag slot instead of hiding the item being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
-- Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
+
+-   Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
+-   Try: Show drag slot instead of hiding the item being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
+-   Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
 
 #### Full Site Editing
-- Move and rename the site editor menu item. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
-- Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
+
+-   Move and rename the site editor menu item. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
+-   Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
 
 #### Components
-- Add duotone description. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
-- ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
+
+-   Add duotone description. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
+-   ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
 
 #### Template Editor
-- Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
-- Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
+
+-   Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
+-   Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
 
 #### Global Styles
-- Remove the duplicated title in background, text and link views in Global Styles. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
-- Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
+
+-   Remove the duplicated title in background, text and link views in Global Styles. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
+-   Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
 
 #### Design Tools
-- Enable transparency for duotone. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
-- Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
+
+-   Enable transparency for duotone. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
+-   Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
 
 #### Media
-- Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
+
+-   Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
 
 #### Patterns
-- [Patterns]: Add a flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
+
+-   [Patterns]: Add a flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
 
 #### Themes
-- Remove experimental feature notice. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
+
+-   Remove experimental feature notice. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
 
 #### Testing
-- Scripts: Increase timeout for end-to-end tests. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
+
+-   Scripts: Increase timeout for end-to-end tests. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
 
 #### REST API
-- URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
+-   URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
 ### New APIs
 
 #### Global Styles
-- Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
-
-#### Block Library
-- Inner blocks: Edit/save symmetry + stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
-
-
-### Bug Fixes
-
-- Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
-- Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
-- BaseControl: Help text id has undefined value if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
-- Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
-- Core Data uses hardcoded baseURL prefix for taxonomies and post types. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
-- Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
-- Disable ability to edit menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
-- Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
-- Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
-- Fix getPxFromCssUnit test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
-- Fix: Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
-- Make saveEditedEntityRecord use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
-- Prevent PHP notice from block-supports elements. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
-- Revert "Post Content: Fix float clearing on entry content (#35958)". ([36004](https://github.com/WordPress/gutenberg/pull/36004))
-- Try ensuring the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
-- Unhook _block_template_render_title_tag. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
-
-#### Block Library
-- Classic Block: Fix select all blocks side effect. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
-- Column block: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
-- Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
-- Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
-- Fix controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
-- Fix incorrect attributes definitions. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
-- Gallery block: Only show the gallery upload error message if mixed multiple files uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
-- Gallery block: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
-- Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
-- Navigation Submenu: Fix PHP notice. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
-- Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
-- Navigation: Fix dropdown indicator. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
-- Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913))
-- Navigation: Fix justifications. ([36105](https://github.com/WordPress/gutenberg/pull/36105))
-- Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
-- Pattern block: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
-- Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
-- Post Content: Fix float clearing on entry content. ([35958](https://github.com/WordPress/gutenberg/pull/35958))
-- Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
-- Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
-- Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
-
-#### Components
-- Fix ColorPalette className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
-- Fix `<Text>` component text color value to correct color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
-- Fix color list picker spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
-- Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
-- Fixes #34855 RangeControl style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
-- Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
-- Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
-- fix/35709: Set admin color scheme to angle color picker. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
-
-#### Global Styles
-- Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
-- Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
-- Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
-- Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
-- Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
-- Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
-
-#### Block Editor
-- Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
-- Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
-- Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
-- Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
-- Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
-- Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
+
+-   Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
+
+#### Block Library
+
+-   Inner blocks: Edit/save symmetry + stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
+
+### Bug Fixes
+
+-   Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
+-   Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
+-   BaseControl: Help text id has undefined value if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
+-   Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
+-   Core Data uses hardcoded baseURL prefix for taxonomies and post types. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
+-   Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
+-   Disable ability to edit menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
+-   Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
+-   Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
+-   Fix getPxFromCssUnit test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
+-   Fix: Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
+-   Make saveEditedEntityRecord use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
+-   Prevent PHP notice from block-supports elements. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
+-   Revert "Post Content: Fix float clearing on entry content (#35958)". ([36004](https://github.com/WordPress/gutenberg/pull/36004))
+-   Try ensuring the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
+-   Unhook \_block_template_render_title_tag. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
+
+#### Block Library
+
+-   Classic Block: Fix select all blocks side effect. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
+-   Column block: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
+-   Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
+-   Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
+-   Fix controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
+-   Fix incorrect attributes definitions. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
+-   Gallery block: Only show the gallery upload error message if mixed multiple files uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
+-   Gallery block: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
+-   Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
+-   Navigation Submenu: Fix PHP notice. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
+-   Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
+-   Navigation: Fix dropdown indicator. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
+-   Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913))
+-   Navigation: Fix justifications. ([36105](https://github.com/WordPress/gutenberg/pull/36105))
+-   Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
+-   Pattern block: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
+-   Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
+-   Post Content: Fix float clearing on entry content. ([35958](https://github.com/WordPress/gutenberg/pull/35958))
+-   Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
+-   Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
+-   Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
+
+#### Components
+
+-   Fix ColorPalette className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
+-   Fix `<Text>` component text color value to correct color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
+-   Fix color list picker spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
+-   Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
+-   Fixes #34855 RangeControl style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
+-   Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
+-   Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
+-   fix/35709: Set admin color scheme to angle color picker. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
+
+#### Global Styles
+
+-   Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
+-   Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
+-   Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
+-   Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
+-   Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
+-   Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
+
+#### Block Editor
+
+-   Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
+-   Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
+-   Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
+-   Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
+-   Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
+-   Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
 
 #### Design Tools
-- Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
-- Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
-- Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
+
+-   Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
+-   Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
+-   Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
 
 #### Template Editor
-- Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
-- Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
+
+-   Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
+-   Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
 
 #### Plugin
-- Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
+
+-   Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
 
 #### Patterns
-- Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
+
+-   Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
 
 #### Accessibility
-- Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
+
+-   Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
 
 #### Full Site Editing
-- Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
+
+-   Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
 
 #### Widgets Editor
-- Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
+
+-   Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
 
 #### CSS & Styling
-- Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
+
+-   Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
 
 #### History
-- Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
+-   Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
 ### Performance
 
 #### List View
-- Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
+
+-   Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
 
 #### Block Editor
-- Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
+
+-   Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
 
 #### Widgets Editor
-- List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
+
+-   List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
 
 #### Accessibility
-- List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
+-   List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
 ### Experiments
 
 #### Block Library
-- Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
-- Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
-- Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
-- Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
-- Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
-- Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
-- Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
-- Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
+
+-   Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
+-   Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
+-   Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
+-   Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
+-   Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
+-   Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
+-   Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
+-   Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
 
 #### Global Styles
-- Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
-- Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
-- Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
-- Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
-- Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
+
+-   Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
+-   Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
+-   Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
+-   Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
+-   Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
 
 #### Full Site Editing
-- Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
-- Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
-- Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
+
+-   Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
+-   Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
+-   Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
 
 #### REST API
-- Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
+
+-   Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
 
 #### Navigation Screen
-- Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
+
+-   Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
 
 #### Reusable Blocks
-- Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
+
+-   Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
 
 #### Components
-- Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
+
+-   Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
 
 #### Block Editor
-- Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
+-   Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
 ### Documentation
 
-- Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
-- Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
-- Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
-- Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
-- Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
-- Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
-- Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
-- Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
-- Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
-- Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
-- Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
-- Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
-- Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
-- Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
-- Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
-- Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
-- Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
-- Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
-- Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
-- Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
-- fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
-- theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
-
+-   Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
+-   Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
+-   Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
+-   Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
+-   Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
+-   Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
+-   Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
+-   Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
+-   Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
+-   Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
+-   Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
+-   Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
+-   Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
+-   Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
+-   Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
+-   Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
+-   Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
+-   Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
+-   Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
+-   Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
+-   fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
+-   theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
 
 ### Code Quality
 
-- Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
-- Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
-- Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
-- Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
-- Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
-- Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
-- Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
-- Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
-- Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
-- Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
-- Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
-- Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
-- block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
-- theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
+-   Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
+-   Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
+-   Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
+-   Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
+-   Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
+-   Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
+-   Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
+-   Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
+-   Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
+-   Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
+-   Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
+-   Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
+-   block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
+-   theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
 
 #### Block Library
-- Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
-- Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
-- Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
-- Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
+
+-   Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
+-   Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
+-   Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
+-   Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
 
 #### Global Styles
-- Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
-- Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
-- Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
+
+-   Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
+-   Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
+-   Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
 
 #### Post Editor
-- Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
-- Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
+
+-   Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
+-   Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
 
 #### Components
-- ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
-- Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
+
+-   ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
+-   Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
 
 #### Data Layer
-- [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
+
+-   [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
 
 #### CSS & Styling
-- Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
+-   Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
 ### Tools
 
-- Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
+-   Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
 
 #### Testing
-- Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
-- Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
-- Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
-- Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
+
+-   Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
+-   Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
+-   Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
+-   Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
 
 #### Block Library
-- Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
+-   Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
 ### Various
 
-- Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
-- Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
-- Mobile - Add support for the Mark HTML tag and updates Aztec iOS to 1.19.5. ([35956](https://github.com/WordPress/gutenberg/pull/35956))
-- Update Appium to 1.22.0. ([35829](https://github.com/WordPress/gutenberg/pull/35829))
-- Updates publish-to-s3 plugin to 0.7.0 for react-native-bridge & react-native-aztec Android and publishes '-sources.jar'. ([36034](https://github.com/WordPress/gutenberg/pull/36034))
-- Use the block name in the "remove block" menu item in the settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
+-   Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
+-   Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
+-   Mobile - Add support for the Mark HTML tag and updates Aztec iOS to 1.19.5. ([35956](https://github.com/WordPress/gutenberg/pull/35956))
+-   Update Appium to 1.22.0. ([35829](https://github.com/WordPress/gutenberg/pull/35829))
+-   Updates publish-to-s3 plugin to 0.7.0 for react-native-bridge & react-native-aztec Android and publishes '-sources.jar'. ([36034](https://github.com/WordPress/gutenberg/pull/36034))
+-   Use the block name in the "remove block" menu item in the settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
 
 #### Site Editor
-- Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
-
 
+-   Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
 
 = 11.8.1 =
 
-
+## Changelog
 
 ### Various
 
-- Keep a copy of anchor ref to preserve highlighted text selection. ([36263](https://github.com/WordPress/gutenberg/pull/36263))
-
-
-
-
+-   Keep a copy of anchor ref to preserve highlighted text selection. ([36263](https://github.com/WordPress/gutenberg/pull/36263))
 
 = 11.9.0-rc.1 =
 
+## Changelog
+
 ### Features
 
 #### Block Library
-- Add Media File and Attachment Page options to the native Image block Link To menu. ([34846](https://github.com/WordPress/gutenberg/pull/34846))
-- Add new Comment Reply Link block. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
-- Add new Edit Comment Link block. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
-- Site Editor: Add Comment Avatar Core Block. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
-- Site Editor: Add new Comments Query Loop block. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
+
+-   Add Media File and Attachment Page options to the native Image block Link To menu. ([34846](https://github.com/WordPress/gutenberg/pull/34846))
+-   Add new Comment Reply Link block. ([35774](https://github.com/WordPress/gutenberg/pull/35774))
+-   Add new Edit Comment Link block. ([35965](https://github.com/WordPress/gutenberg/pull/35965))
+-   Site Editor: Add Comment Avatar Core Block. ([35396](https://github.com/WordPress/gutenberg/pull/35396))
+-   Site Editor: Add new Comments Query Loop block. ([35231](https://github.com/WordPress/gutenberg/pull/35231))
 
 #### Block Editor
-- Enable native editor onboarding features globally. ([35201](https://github.com/WordPress/gutenberg/pull/35201))
 
+-   Enable native editor onboarding features globally. ([35201](https://github.com/WordPress/gutenberg/pull/35201))
 
 ### Enhancements
 
-- Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
-- Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
-- StripHTML - preserve leading and trailing spaces and strip script and on* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
-- Remove visual clue from text alignment toolbar. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
-- Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
-
-#### Block Library
-- Add alignment option to the Comment Edit Link block. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
-- Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
-- Add flex layout to Buttons block and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
-- Add spacing controls to Post Author block. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
-- Add spacing controls to Post Excerpt. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
-- Add create new menu button to nav block. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
-- Code block: Add support for padding, color & border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
-- Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
-- Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
-- Deprecate the Post Comment block. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
-- Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
-- Gallery block: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
-- Image Block: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
-- Navigation Block: Add missing menu item attributes to core/navigation. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
-- Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
-- Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
-- Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
-- Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
-- Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
-- Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
-- Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
-- Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
-- Save Navigation Block data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
-- Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
-- Try using flex layout on the Navigation block. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
-- Update navigation block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
+-   Disable Xdebug by default unless specified by user. ([34324](https://github.com/WordPress/gutenberg/pull/34324))
+-   Improve the initial loading of the site editor. ([36044](https://github.com/WordPress/gutenberg/pull/36044))
+-   StripHTML - preserve leading and trailing spaces and strip script and on\* attributes. ([35539](https://github.com/WordPress/gutenberg/pull/35539))
+-   Remove visual clue from text alignment toolbar. ([35922](https://github.com/WordPress/gutenberg/pull/35922))
+-   Add `flex-wrap` control to `flex` layout. ([36003](https://github.com/WordPress/gutenberg/pull/36003))
+
+#### Block Library
+
+-   Add alignment option to the Comment Edit Link block. ([36033](https://github.com/WordPress/gutenberg/pull/36033))
+-   Add featured transforms in Link Control for Navigation Link items. ([35857](https://github.com/WordPress/gutenberg/pull/35857))
+-   Add flex layout to Buttons block and new layout type. ([35819](https://github.com/WordPress/gutenberg/pull/35819))
+-   Add spacing controls to Post Author block. ([35963](https://github.com/WordPress/gutenberg/pull/35963))
+-   Add spacing controls to Post Excerpt. ([35959](https://github.com/WordPress/gutenberg/pull/35959))
+-   Add create new menu button to nav block. ([36245](https://github.com/WordPress/gutenberg/pull/36245))
+-   Code block: Add support for padding, color & border styles. ([27582](https://github.com/WordPress/gutenberg/pull/27582))
+-   Columns: Add padding support. ([35701](https://github.com/WordPress/gutenberg/pull/35701))
+-   Comment Author Name: Add spacing to have same options as Post Author Name. ([36213](https://github.com/WordPress/gutenberg/pull/36213))
+-   Deprecate the Post Comment block. ([36032](https://github.com/WordPress/gutenberg/pull/36032))
+-   Embed: Add Wolfram Cloud as an embed provider. ([35656](https://github.com/WordPress/gutenberg/pull/35656))
+-   Gallery block: Replace gallery experimental setting with a check for use_balanceTags. ([34979](https://github.com/WordPress/gutenberg/pull/34979))
+-   Image Block: Add data-id attribute on server side render for core galleries. ([35975](https://github.com/WordPress/gutenberg/pull/35975))
+-   Navigation Block: Add missing menu item attributes to core/navigation. ([35634](https://github.com/WordPress/gutenberg/pull/35634))
+-   Navigation: Add delete nav menu button. ([35981](https://github.com/WordPress/gutenberg/pull/35981))
+-   Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. ([36024](https://github.com/WordPress/gutenberg/pull/36024))
+-   Navigation: Use a single placeholder for the block. ([36023](https://github.com/WordPress/gutenberg/pull/36023))
+-   Page List: Create a JS version for the editor. ([31670](https://github.com/WordPress/gutenberg/pull/31670))
+-   Post Comment Author: Add alignment options. ([36045](https://github.com/WordPress/gutenberg/pull/36045))
+-   Post Comments: Even out the top margin inside the block. ([35887](https://github.com/WordPress/gutenberg/pull/35887))
+-   Post Excerpt: Don't print the wrapper when there is no excerpt. ([35749](https://github.com/WordPress/gutenberg/pull/35749))
+-   Post Title: Return no markup if title is empty. ([35861](https://github.com/WordPress/gutenberg/pull/35861))
+-   Save Navigation Block data to a wp_navigation post type. ([35746](https://github.com/WordPress/gutenberg/pull/35746))
+-   Search: Add contextual defaults when inserted in Navigation block. ([36125](https://github.com/WordPress/gutenberg/pull/36125))
+-   Try using flex layout on the Navigation block. ([36169](https://github.com/WordPress/gutenberg/pull/36169))
+-   Update navigation block entity automatic name generation and refine naming UI. ([36238](https://github.com/WordPress/gutenberg/pull/36238))
 
 #### Accessibility
-- Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
-- Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
-- Full Site Editing: Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
-- Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
-- Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
+
+-   Add announcement on formatting change for screen readers. ([35896](https://github.com/WordPress/gutenberg/pull/35896))
+-   Add aria-current to navigation link, submenu, page list. ([35880](https://github.com/WordPress/gutenberg/pull/35880))
+-   Full Site Editing: Use SearchControl component inside nav menu. ([36011](https://github.com/WordPress/gutenberg/pull/36011))
+-   Improve focus styles for Link UI preview title. ([35853](https://github.com/WordPress/gutenberg/pull/35853))
+-   Site Editor: Enable the "Save" keyboard shortcut. ([36138](https://github.com/WordPress/gutenberg/pull/36138))
 
 #### Block Editor
-- Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
-- Try: Show drag slot instead of hiding the item being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
-- Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
+
+-   Enable rich previews in the Link UI for the Site Editor. ([35951](https://github.com/WordPress/gutenberg/pull/35951))
+-   Try: Show drag slot instead of hiding the item being dragged. ([33950](https://github.com/WordPress/gutenberg/pull/33950))
+-   Update Link UI design for preview action buttons to use icons for edit and unlink. ([35833](https://github.com/WordPress/gutenberg/pull/35833))
 
 #### Full Site Editing
-- Move and rename the site editor menu item. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
-- Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
+
+-   Move and rename the site editor menu item. ([36064](https://github.com/WordPress/gutenberg/pull/36064))
+-   Use Heading component on NavigationMenu and NavigationGroup components. ([36009](https://github.com/WordPress/gutenberg/pull/36009))
 
 #### Components
-- Add duotone description. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
-- ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
+
+-   Add duotone description. ([36018](https://github.com/WordPress/gutenberg/pull/36018))
+-   ToolsPanel: Update typography panel layout. ([35911](https://github.com/WordPress/gutenberg/pull/35911))
 
 #### Template Editor
-- Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
-- Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
+
+-   Add resizer to template part focus mode. ([35728](https://github.com/WordPress/gutenberg/pull/35728))
+-   Auto resize the height of template part focus mode. ([35974](https://github.com/WordPress/gutenberg/pull/35974))
 
 #### Global Styles
-- Remove the duplicated title in background, text and link views in Global Styles. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
-- Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
+
+-   Remove the duplicated title in background, text and link views in Global Styles. ([35583](https://github.com/WordPress/gutenberg/pull/35583))
+-   Typography: Switch to ToolsPanel for block support UI. ([33744](https://github.com/WordPress/gutenberg/pull/33744))
 
 #### Design Tools
-- Enable transparency for duotone. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
-- Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
+
+-   Enable transparency for duotone. ([34130](https://github.com/WordPress/gutenberg/pull/34130))
+-   Typography block support: Add typography support and defaults. ([34064](https://github.com/WordPress/gutenberg/pull/34064))
 
 #### Media
-- Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
+
+-   Remove "security" verbiage from warning when filetype does not pass on upload. ([36226](https://github.com/WordPress/gutenberg/pull/36226))
 
 #### Patterns
-- [Patterns]: Add a flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
+
+-   [Patterns]: Add a flag to hide patterns from UI. ([36108](https://github.com/WordPress/gutenberg/pull/36108))
 
 #### Themes
-- Remove experimental feature notice. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
+
+-   Remove experimental feature notice. ([36083](https://github.com/WordPress/gutenberg/pull/36083))
 
 #### Testing
-- Scripts: Increase timeout for end-to-end tests. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
+
+-   Scripts: Increase timeout for end-to-end tests. ([35983](https://github.com/WordPress/gutenberg/pull/35983))
 
 #### REST API
-- URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
+-   URL Details: Update regex to include `og:Description`. ([35875](https://github.com/WordPress/gutenberg/pull/35875))
 
 ### New APIs
 
 #### Global Styles
-- Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
-
-#### Block Library
-- Inner blocks: Edit/save symmetry + stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
-
-
-### Bug Fixes
-
-- Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
-- Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
-- BaseControl: Help text id has undefined value if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
-- Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
-- Core Data uses hardcoded baseURL prefix for taxonomies and post types. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
-- Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
-- Disable ability to edit menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
-- Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
-- Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
-- Fix getPxFromCssUnit test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
-- Fix: Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
-- Make saveEditedEntityRecord use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
-- Prevent PHP notice from block-supports elements. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
-- Revert "Post Content: Fix float clearing on entry content (#35958)". ([36004](https://github.com/WordPress/gutenberg/pull/36004))
-- Try ensuring the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
-- Unhook _block_template_render_title_tag. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
-
-#### Block Library
-- Classic Block: Fix select all blocks side effect. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
-- Column block: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
-- Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
-- Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
-- Fix controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
-- Fix incorrect attributes definitions. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
-- Gallery block: Only show the gallery upload error message if mixed multiple files uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
-- Gallery block: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
-- Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
-- Navigation Submenu: Fix PHP notice. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
-- Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
-- Navigation: Fix dropdown indicator. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
-- Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913))
-- Navigation: Fix justifications. ([36105](https://github.com/WordPress/gutenberg/pull/36105))
-- Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
-- Pattern block: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
-- Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
-- Post Content: Fix float clearing on entry content. ([35958](https://github.com/WordPress/gutenberg/pull/35958))
-- Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
-- Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
-- Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
-
-#### Components
-- Fix ColorPalette className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
-- Fix `<Text>` component text color value to correct color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
-- Fix color list picker spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
-- Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
-- Fixes #34855 RangeControl style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
-- Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
-- Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
-- fix/35709: Set admin color scheme to angle color picker. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
-
-#### Global Styles
-- Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
-- Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
-- Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
-- Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
-- Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
-- Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
-
-#### Block Editor
-- Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
-- Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
-- Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
-- Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
-- Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
-- Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
+
+-   Add API to access global settings, styles, and stylesheet. ([34843](https://github.com/WordPress/gutenberg/pull/34843))
+
+#### Block Library
+
+-   Inner blocks: Edit/save symmetry + stabilise API. ([26031](https://github.com/WordPress/gutenberg/pull/26031))
+
+### Bug Fixes
+
+-   Allow moving metaboxes to previously empty area. ([25187](https://github.com/WordPress/gutenberg/pull/25187))
+-   Avoid showing deleted records in editor saving flow. ([36027](https://github.com/WordPress/gutenberg/pull/36027))
+-   BaseControl: Help text id has undefined value if no id is passed to component. ([35899](https://github.com/WordPress/gutenberg/pull/35899))
+-   Change `console.error` to `console.warn` for enqueued styles in the editor. ([35914](https://github.com/WordPress/gutenberg/pull/35914))
+-   Core Data uses hardcoded baseURL prefix for taxonomies and post types. ([35850](https://github.com/WordPress/gutenberg/pull/35850))
+-   Do not translate HTML tag. ([35930](https://github.com/WordPress/gutenberg/pull/35930))
+-   Disable ability to edit menus via `Appearance -> Navigation Menus` for non-FSE themes. ([36257](https://github.com/WordPress/gutenberg/pull/36257))
+-   Fix crash from calls to `undefined` functions. ([36248](https://github.com/WordPress/gutenberg/pull/36248))
+-   Fix WPCS lint errors in global styles. ([36058](https://github.com/WordPress/gutenberg/pull/36058))
+-   Fix getPxFromCssUnit test stability and test that memoized function works correctly. ([35939](https://github.com/WordPress/gutenberg/pull/35939))
+-   Fix: Rest global styles controller accessing configuration that may not exist. ([36047](https://github.com/WordPress/gutenberg/pull/36047))
+-   Make saveEditedEntityRecord use the entity key when available. ([36212](https://github.com/WordPress/gutenberg/pull/36212))
+-   Prevent PHP notice from block-supports elements. ([35836](https://github.com/WordPress/gutenberg/pull/35836))
+-   Revert "Post Content: Fix float clearing on entry content (#35958)". ([36004](https://github.com/WordPress/gutenberg/pull/36004))
+-   Try ensuring the item after post content clears floats. ([36006](https://github.com/WordPress/gutenberg/pull/36006))
+-   Unhook \_block_template_render_title_tag. ([36133](https://github.com/WordPress/gutenberg/pull/36133))
+
+#### Block Library
+
+-   Classic Block: Fix select all blocks side effect. ([35999](https://github.com/WordPress/gutenberg/pull/35999))
+-   Column block: Only add flex-basis if width contains a number. ([35831](https://github.com/WordPress/gutenberg/pull/35831))
+-   Comment Template: Move inner blocks container to separate components. ([36174](https://github.com/WordPress/gutenberg/pull/36174))
+-   Blocks: Fix relative URLs for inlined styles. ([35538](https://github.com/WordPress/gutenberg/pull/35538))
+-   Fix controlled inner blocks parent block attributes updates. ([35827](https://github.com/WordPress/gutenberg/pull/35827))
+-   Fix incorrect attributes definitions. ([36140](https://github.com/WordPress/gutenberg/pull/36140))
+-   Gallery block: Only show the gallery upload error message if mixed multiple files uploaded. ([35790](https://github.com/WordPress/gutenberg/pull/35790))
+-   Gallery block: Remove the arbitrary alt text that is added to gallery images. ([35936](https://github.com/WordPress/gutenberg/pull/35936))
+-   Heading: Avoid error on split when the paragraph isn't registered. ([35871](https://github.com/WordPress/gutenberg/pull/35871))
+-   Navigation Submenu: Fix PHP notice. ([35984](https://github.com/WordPress/gutenberg/pull/35984))
+-   Navigation overlay menu: Fix submenu spacing. ([35823](https://github.com/WordPress/gutenberg/pull/35823))
+-   Navigation: Fix dropdown indicator. ([36106](https://github.com/WordPress/gutenberg/pull/36106))
+-   Navigation: Fix issues with responsive justifications. ([35913](https://github.com/WordPress/gutenberg/pull/35913))
+-   Navigation: Fix justifications. ([36105](https://github.com/WordPress/gutenberg/pull/36105))
+-   Navigation: Fix padding for social links on mobile. ([35824](https://github.com/WordPress/gutenberg/pull/35824))
+-   Pattern block: Remove wrapping div. ([36090](https://github.com/WordPress/gutenberg/pull/36090))
+-   Post Comment: Handle the case where a comment does not exist. ([35810](https://github.com/WordPress/gutenberg/pull/35810))
+-   Post Content: Fix float clearing on entry content. ([35958](https://github.com/WordPress/gutenberg/pull/35958))
+-   Post Template Block: Move inner blocks container to separate component. ([35945](https://github.com/WordPress/gutenberg/pull/35945))
+-   Post Terms: Prevent the block from breaking on pages. ([35957](https://github.com/WordPress/gutenberg/pull/35957))
+-   Site Logo: Fix center alignment. ([35971](https://github.com/WordPress/gutenberg/pull/35971))
+
+#### Components
+
+-   Fix ColorPalette className. ([36016](https://github.com/WordPress/gutenberg/pull/36016))
+-   Fix `<Text>` component text color value to correct color value for Link UI preview description text. ([35851](https://github.com/WordPress/gutenberg/pull/35851))
+-   Fix color list picker spacing to accomodate the new color picker. ([36017](https://github.com/WordPress/gutenberg/pull/36017))
+-   Fix unexpected movements, and closing on first click in the color picker. ([35670](https://github.com/WordPress/gutenberg/pull/35670))
+-   Fixes #34855 RangeControl style issue in RTL. ([35777](https://github.com/WordPress/gutenberg/pull/35777))
+-   Popover: Check anchorDocument default view before removing events. ([35832](https://github.com/WordPress/gutenberg/pull/35832))
+-   Storybook: Lazy load LTR/RTL styles for consistent specificity. ([35771](https://github.com/WordPress/gutenberg/pull/35771))
+-   fix/35709: Set admin color scheme to angle color picker. ([35908](https://github.com/WordPress/gutenberg/pull/35908))
+
+#### Global Styles
+
+-   Fix navigation in global styles sidebar. ([36203](https://github.com/WordPress/gutenberg/pull/36203))
+-   Fix presets data for themes that do not provide any preset. ([36054](https://github.com/WordPress/gutenberg/pull/36054))
+-   Generate preset metadata for font-family in the site editor. ([36022](https://github.com/WordPress/gutenberg/pull/36022))
+-   Hotfix for leftovers of `WP_Theme_JSON_Resolver::Get_merged_data`. ([36173](https://github.com/WordPress/gutenberg/pull/36173))
+-   Lower the specificity of border & padding styles for the outline block style in the button block. ([35968](https://github.com/WordPress/gutenberg/pull/35968))
+-   Theme.json: Remove custom prefixes from properties that did not land in 5.8. ([34485](https://github.com/WordPress/gutenberg/pull/34485))
+
+#### Block Editor
+
+-   Fix inserter with block pattern categories. ([36116](https://github.com/WordPress/gutenberg/pull/36116))
+-   Fix navigation block link control zero value in it. ([36198](https://github.com/WordPress/gutenberg/pull/36198))
+-   Fix the update of link and suggestions in LinkControl. ([32320](https://github.com/WordPress/gutenberg/pull/32320))
+-   Make Link UI inactive if selection extends beyond format bounds or encounters new link. ([35946](https://github.com/WordPress/gutenberg/pull/35946))
+-   Fix selection by holding shift key for nested blocks. ([35668](https://github.com/WordPress/gutenberg/pull/35668))
+-   Fix shift+click on a child block with its parent selected. ([35988](https://github.com/WordPress/gutenberg/pull/35988))
 
 #### Design Tools
-- Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
-- Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
-- Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
+
+-   Font Appearance: Improve consistency of label in Typography panel. ([35860](https://github.com/WordPress/gutenberg/pull/35860))
+-   Font Family Support: Fix skip serialization check. ([36073](https://github.com/WordPress/gutenberg/pull/36073))
+-   Navigation: Force text decoration styles on nav item in editor. ([35859](https://github.com/WordPress/gutenberg/pull/35859))
 
 #### Template Editor
-- Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
-- Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
+
+-   Clear selected block when clicking outside in the template part focus mode. ([35816](https://github.com/WordPress/gutenberg/pull/35816))
+-   Templates: Only include templates for the current post types. ([35802](https://github.com/WordPress/gutenberg/pull/35802))
 
 #### Plugin
-- Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
+
+-   Fix fatal error in Site Logo block in WP 5.9. ([36195](https://github.com/WordPress/gutenberg/pull/36195))
 
 #### Patterns
-- Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
+
+-   Update unsaved navigation block flow. ([35976](https://github.com/WordPress/gutenberg/pull/35976))
 
 #### Accessibility
-- Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
+
+-   Try to communicate to screen readers that post title is textarea. ([35898](https://github.com/WordPress/gutenberg/pull/35898))
 
 #### Full Site Editing
-- Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
+
+-   Add fallback handling for plugins or themes using the Customizer. ([35877](https://github.com/WordPress/gutenberg/pull/35877))
 
 #### Widgets Editor
-- Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
+
+-   Fix layout styles not applying in widgets customizer. ([35865](https://github.com/WordPress/gutenberg/pull/35865))
 
 #### CSS & Styling
-- Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
+
+-   Editor defaults for themes with no editor styles and when user disables theme styles. ([35736](https://github.com/WordPress/gutenberg/pull/35736))
 
 #### History
-- Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
+-   Support disabling autosave for native Unsupported Block Editor. ([35639](https://github.com/WordPress/gutenberg/pull/35639))
 
 ### Performance
 
 #### List View
-- Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
+
+-   Fix pagedown/pageup and improve scrolling. ([36063](https://github.com/WordPress/gutenberg/pull/36063))
 
 #### Block Editor
-- Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
+
+-   Improve opening of the block inserter via manual token-based analysis of reusable blocks. ([35763](https://github.com/WordPress/gutenberg/pull/35763))
 
 #### Widgets Editor
-- List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
+
+-   List View: Avoid re-rendering all items on block focus. Enable persistent List View in the widget editor. ([35706](https://github.com/WordPress/gutenberg/pull/35706))
 
 #### Accessibility
-- List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
+-   List View: Render a fixed number of items. ([35230](https://github.com/WordPress/gutenberg/pull/35230))
 
 ### Experiments
 
 #### Block Library
-- Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
-- Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
-- Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
-- Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
-- Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
-- Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
-- Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
-- Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
+
+-   Adds in basic styling for post comment form. ([35704](https://github.com/WordPress/gutenberg/pull/35704))
+-   Navigation Area block. ([36178](https://github.com/WordPress/gutenberg/pull/36178))
+-   Migrate classic menus to block-based menus on theme switch. ([36255](https://github.com/WordPress/gutenberg/pull/36255))
+-   Post Comments block: Hide the "Comments Closed" message. ([35743](https://github.com/WordPress/gutenberg/pull/35743))
+-   Mobile responsive navigation by default. ([35917](https://github.com/WordPress/gutenberg/pull/35917))
+-   Reword navigation color labels. ([35916](https://github.com/WordPress/gutenberg/pull/35916))
+-   Show the placeholder again when moving from a valid menu to non-existing menu. ([36210](https://github.com/WordPress/gutenberg/pull/36210))
+-   Provide a way to manage wp_navigation posts from wp-admin. ([36126](https://github.com/WordPress/gutenberg/pull/36126))
 
 #### Global Styles
-- Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
-- Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
-- Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
-- Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
-- Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
+
+-   Add a Global Styles endpoint and use it in the site editor. ([35801](https://github.com/WordPress/gutenberg/pull/35801))
+-   Fix: Crash when resetting user color palette. ([36233](https://github.com/WordPress/gutenberg/pull/36233))
+-   Fix: Show user colors on palette indicator. ([36232](https://github.com/WordPress/gutenberg/pull/36232))
+-   Migrate theme.json v1 to v2. ([36155](https://github.com/WordPress/gutenberg/pull/36155))
+-   Update: Show all color and gradient origins (core, theme, and user). ([35970](https://github.com/WordPress/gutenberg/pull/35970))
 
 #### Full Site Editing
-- Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
-- Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
-- Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
+
+-   Always display Customizer menu item. ([36168](https://github.com/WordPress/gutenberg/pull/36168))
+-   Revert "Always display Customizer menu item". ([36189](https://github.com/WordPress/gutenberg/pull/36189))
+-   Remove slug and status columns from templates list in Appearance > Templates. ([35996](https://github.com/WordPress/gutenberg/pull/35996))
 
 #### REST API
-- Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
+
+-   Improve unit test coverage for REST API menus endpoints.. ([36177](https://github.com/WordPress/gutenberg/pull/36177))
 
 #### Navigation Screen
-- Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
+
+-   Navigation Editor: Show a warning when trying to save unsupported blocks. ([35993](https://github.com/WordPress/gutenberg/pull/35993))
 
 #### Reusable Blocks
-- Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
+
+-   Editor: Multi-Entity Saving UI Improvements. ([35933](https://github.com/WordPress/gutenberg/pull/35933))
 
 #### Components
-- Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
+
+-   Update: Implement new color palette editor component. ([35783](https://github.com/WordPress/gutenberg/pull/35783))
 
 #### Block Editor
-- Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
+-   Split control for URL and Text within Link UI. ([33849](https://github.com/WordPress/gutenberg/pull/33849))
 
 ### Documentation
 
-- Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
-- Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
-- Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
-- Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
-- Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
-- Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
-- Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
-- Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
-- Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
-- Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
-- Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
-- Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
-- Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
-- Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
-- Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
-- Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
-- Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
-- Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
-- Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
-- Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
-- fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
-- theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
-
+-   Add Thunks Tutorial. ([36051](https://github.com/WordPress/gutenberg/pull/36051))
+-   Add a more detailed guide for react native development. ([35529](https://github.com/WordPress/gutenberg/pull/35529))
+-   Add usage documentation for Rich Text package. ([35885](https://github.com/WordPress/gutenberg/pull/35885))
+-   Added link to Ways to keep up with Gutenberg & Full Site Editing. ([36077](https://github.com/WordPress/gutenberg/pull/36077))
+-   Blocks: Add view script to block schema and documentation. ([36175](https://github.com/WordPress/gutenberg/pull/36175))
+-   Blocks: Document changes to style and editorStyle in `block.json`. ([36218](https://github.com/WordPress/gutenberg/pull/36218))
+-   Docs: Add Getting Started level for documentation. ([35891](https://github.com/WordPress/gutenberg/pull/35891))
+-   Docs: Add section about using the schema during development. ([35835](https://github.com/WordPress/gutenberg/pull/35835))
+-   Docs: Fix Typos in widgets/overview.md. ([36078](https://github.com/WordPress/gutenberg/pull/36078))
+-   Docs: Fix schema file URL. ([36157](https://github.com/WordPress/gutenberg/pull/36157))
+-   Docs: Improve Getting Started landing page. ([35893](https://github.com/WordPress/gutenberg/pull/35893))
+-   Docs: Theme.json - fix typo. ([36139](https://github.com/WordPress/gutenberg/pull/36139))
+-   Docs: Tweak organization for getting-started documentation. ([34091](https://github.com/WordPress/gutenberg/pull/34091))
+-   Docs: Update the recommendation for the cadence of npm releases. ([35925](https://github.com/WordPress/gutenberg/pull/35925))
+-   Env docs: Update wordpress-develop example to clarify src/build location. ([35978](https://github.com/WordPress/gutenberg/pull/35978))
+-   Fix a small typo in the "Getting started" documentation. ([36109](https://github.com/WordPress/gutenberg/pull/36109))
+-   Fix wording in the Authoring Experience documentation. ([35969](https://github.com/WordPress/gutenberg/pull/35969))
+-   Move create-block changelog entries back to Unreleased section. ([35886](https://github.com/WordPress/gutenberg/pull/35886))
+-   Release Docs: Remove consecutive RCs warning. ([35855](https://github.com/WordPress/gutenberg/pull/35855))
+-   Update Components CONTRIBUTING.md indentation. ([35866](https://github.com/WordPress/gutenberg/pull/35866))
+-   fix: Backtick added around `<textarea>` input tag in readme file. ([34813](https://github.com/WordPress/gutenberg/pull/34813))
+-   theme.json docs: Add missing settings & styles. ([36137](https://github.com/WordPress/gutenberg/pull/36137))
 
 ### Code Quality
 
-- Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
-- Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
-- Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
-- Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
-- Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
-- Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
-- Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
-- Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
-- Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
-- Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
-- Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
-- Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
-- block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
-- theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
+-   Add Theme's base global styles endpoint. ([35985](https://github.com/WordPress/gutenberg/pull/35985))
+-   Add alexstine as code owner for post-title. ([36056](https://github.com/WordPress/gutenberg/pull/36056))
+-   Add block.json schema to generated file. ([35843](https://github.com/WordPress/gutenberg/pull/35843))
+-   Add schemas package. ([35998](https://github.com/WordPress/gutenberg/pull/35998))
+-   Improvements for the global styles endpoint. ([36071](https://github.com/WordPress/gutenberg/pull/36071))
+-   Make sure tests are pure. ([36253](https://github.com/WordPress/gutenberg/pull/36253))
+-   Move getStablePath function into the wordrpess/url package. ([35992](https://github.com/WordPress/gutenberg/pull/35992))
+-   Remove "experimental" from URL details REST controller and promote to `v1` namespace. ([35915](https://github.com/WordPress/gutenberg/pull/35915))
+-   Remove GB prefixed functions from template part. ([36180](https://github.com/WordPress/gutenberg/pull/36180))
+-   Schemas: Theme.json - Add `title` to templateParts. ([36145](https://github.com/WordPress/gutenberg/pull/36145))
+-   Updates `WP_Theme_JSON_Resolver` and tests to be equal to core. ([36223](https://github.com/WordPress/gutenberg/pull/36223))
+-   Update: Use small button on tools panel toggle. ([35935](https://github.com/WordPress/gutenberg/pull/35935))
+-   block-editor store: Migrate to thunks. ([35720](https://github.com/WordPress/gutenberg/pull/35720))
+-   theme.json: Update test data. ([35883](https://github.com/WordPress/gutenberg/pull/35883))
 
 #### Block Library
-- Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
-- Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
-- Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
-- Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
+
+-   Heading: Auto-generated anchors hide implementation details. ([35747](https://github.com/WordPress/gutenberg/pull/35747))
+-   Mark Post Comments as stable and Comments Query Loop as experimental. ([36132](https://github.com/WordPress/gutenberg/pull/36132))
+-   Mark Post Navigation Link and Term Description blocks as stable. ([36163](https://github.com/WordPress/gutenberg/pull/36163))
+-   Remove `post-` prefix from Comment Template inner blocks. ([36171](https://github.com/WordPress/gutenberg/pull/36171))
 
 #### Global Styles
-- Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
-- Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
-- Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
+
+-   Refactor theme.json migrations to be a single class. ([36182](https://github.com/WordPress/gutenberg/pull/36182))
+-   Remove locations we do not translate from `theme-i18n.json`. ([35881](https://github.com/WordPress/gutenberg/pull/35881))
+-   Update `theme.json` schema migrations. ([36154](https://github.com/WordPress/gutenberg/pull/36154))
 
 #### Post Editor
-- Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
-- Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
+
+-   Refactor FlatTermSelector into a functional component. ([33459](https://github.com/WordPress/gutenberg/pull/33459))
+-   Typo: Translated site properties. ([36097](https://github.com/WordPress/gutenberg/pull/36097))
 
 #### Components
-- ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
-- Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
+
+-   ToolsPanel: Use Grid component to handle layout. ([35621](https://github.com/WordPress/gutenberg/pull/35621))
+-   Update spacing in CircularOptionPicker. ([36014](https://github.com/WordPress/gutenberg/pull/36014))
 
 #### Data Layer
-- [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
+
+-   [data]: Rename types file from .d.ts to .ts. ([36062](https://github.com/WordPress/gutenberg/pull/36062))
 
 #### CSS & Styling
-- Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
+-   Remove invalid buttons block CSS property. ([33793](https://github.com/WordPress/gutenberg/pull/33793))
 
 ### Tools
 
-- Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
+-   Remove @chrisvanpatten from CODEOWNERS. ([35937](https://github.com/WordPress/gutenberg/pull/35937))
 
 #### Testing
-- Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
-- Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
-- Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
-- Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
+
+-   Add a method to disable auto-accepting dialogs. ([35828](https://github.com/WordPress/gutenberg/pull/35828))
+-   Skip broken widgets test. ([36239](https://github.com/WordPress/gutenberg/pull/36239))
+-   Skip flaky test for loading block stylesheets in iframe. ([35961](https://github.com/WordPress/gutenberg/pull/35961))
+-   Tests: Run block fixtures through KSES. ([35611](https://github.com/WordPress/gutenberg/pull/35611))
 
 #### Block Library
-- Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
+-   Mark FSE blocks as non experimental. ([35979](https://github.com/WordPress/gutenberg/pull/35979))
 
 ### Various
 
-- Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
-- Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
-- Mobile - Add support for the Mark HTML tag and updates Aztec iOS to 1.19.5. ([35956](https://github.com/WordPress/gutenberg/pull/35956))
-- Update Appium to 1.22.0. ([35829](https://github.com/WordPress/gutenberg/pull/35829))
-- Updates publish-to-s3 plugin to 0.7.0 for react-native-bridge & react-native-aztec Android and publishes '-sources.jar'. ([36034](https://github.com/WordPress/gutenberg/pull/36034))
-- Use the block name in the "remove block" menu item in the settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
+-   Apply borders to canvas rather than other UI elements. ([31081](https://github.com/WordPress/gutenberg/pull/31081))
+-   Changes for FSE backport in core. ([36201](https://github.com/WordPress/gutenberg/pull/36201))
+-   Mobile - Add support for the Mark HTML tag and updates Aztec iOS to 1.19.5. ([35956](https://github.com/WordPress/gutenberg/pull/35956))
+-   Update Appium to 1.22.0. ([35829](https://github.com/WordPress/gutenberg/pull/35829))
+-   Updates publish-to-s3 plugin to 0.7.0 for react-native-bridge & react-native-aztec Android and publishes '-sources.jar'. ([36034](https://github.com/WordPress/gutenberg/pull/36034))
+-   Use the block name in the "remove block" menu item in the settings dropdown. ([35872](https://github.com/WordPress/gutenberg/pull/35872))
 
 #### Site Editor
-- Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
 
+-   Remove navigation panel in site editor. ([36194](https://github.com/WordPress/gutenberg/pull/36194))
 
 = 11.8.0 =
 
+## Changelog
+
 ### Enhancements
 
 #### Block Library
-- Add spacing controls to all heading blocks. ([35772](https://github.com/WordPress/gutenberg/pull/35772))
-- Enable slash inserter for heading, list, and quote. ([35360](https://github.com/WordPress/gutenberg/pull/35360))
-- Unify theme block placeholder content. ([35517](https://github.com/WordPress/gutenberg/pull/35517))
-- Buttons: Add gap and vertical margin support. ([34546](https://github.com/WordPress/gutenberg/pull/34546))
-- Categories: Add support for showing only top-level categories. ([35726](https://github.com/WordPress/gutenberg/pull/35726))
-- Column: Allow the specification of blocks allowed within columns. ([35342](https://github.com/WordPress/gutenberg/pull/35342))
-- Comment Content Block: Add typography, color and padding support. ([35183](https://github.com/WordPress/gutenberg/pull/35183))
-- Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. ([31326](https://github.com/WordPress/gutenberg/pull/31326))
-- Cover: Add option to set opacity when background colour used. ([35065](https://github.com/WordPress/gutenberg/pull/35065))
-- Cover: Allow setting the height from the placeholder state. ([35068](https://github.com/WordPress/gutenberg/pull/35068))
-- Cover: Change dimRatio to 50 if media added and dimRatio is set to 100. ([35789](https://github.com/WordPress/gutenberg/pull/35789))
-- Cover: Only use white text when the background of the cover block is dark. ([33541](https://github.com/WordPress/gutenberg/pull/33541))
-- Cover: Use the description in the placeholder. ([34970](https://github.com/WordPress/gutenberg/pull/34970))
-- Embed: Add Pinterest as an embed provider. ([34895](https://github.com/WordPress/gutenberg/pull/34895))
-- Feature Image: Add spacing controls to the featured image block. ([35775](https://github.com/WordPress/gutenberg/pull/35775))
-- Featured image and Image: Remove descendent space. ([35466](https://github.com/WordPress/gutenberg/pull/35466))
-- Gallery Block: Get media data in a single request. ([34389](https://github.com/WordPress/gutenberg/pull/34389))
-- Heading: Autogenerate heading anchors. ([30825](https://github.com/WordPress/gutenberg/pull/30825))
-- Quote: Update deprecation to expect style block supports. ([35615](https://github.com/WordPress/gutenberg/pull/35615))
-- Page List: Show empty placeholder if no items. ([35441](https://github.com/WordPress/gutenberg/pull/35441))
-- Post Date: Add more typography options. ([35422](https://github.com/WordPress/gutenberg/pull/35422))
-- Post Comment Author: Add link settings and block supports. ([35595](https://github.com/WordPress/gutenberg/pull/35595))
-- Post Comment Date: Add link setting and block supports. ([35112](https://github.com/WordPress/gutenberg/pull/35112))
-- Quote: Added a "plain" style for quote blocks. ([29856](https://github.com/WordPress/gutenberg/pull/29856))
-- Search: Enable inheritance in search block. ([35723](https://github.com/WordPress/gutenberg/pull/35723))
-- Site Logo: Add a basic example to the site logo block. ([35588](https://github.com/WordPress/gutenberg/pull/35588))
-- Site Logo: Move the Reset button to the Replace menu dropdown. ([35372](https://github.com/WordPress/gutenberg/pull/35372))
-- Site Logo: placeholder tweaks. ([35397](https://github.com/WordPress/gutenberg/pull/35397))
-- Site Tagline: Add fontStyle control to Site Tagline block. ([35507](https://github.com/WordPress/gutenberg/pull/35507))
-- Site Tagline: Add wide + full support to the site tagline block. ([35589](https://github.com/WordPress/gutenberg/pull/35589))
-- Site Title: Add basic example to site-title block. ([35590](https://github.com/WordPress/gutenberg/pull/35590))
-- Site Logo: Remove "Reset" button icon. ([35434](https://github.com/WordPress/gutenberg/pull/35434))
-- Social Icons: Add top and bottom margin support. ([35374](https://github.com/WordPress/gutenberg/pull/35374))
-- Social Links: Polish logos only style. ([35586](https://github.com/WordPress/gutenberg/pull/35586))
+
+-   Add spacing controls to all heading blocks. ([35772](https://github.com/WordPress/gutenberg/pull/35772))
+-   Enable slash inserter for heading, list, and quote. ([35360](https://github.com/WordPress/gutenberg/pull/35360))
+-   Unify theme block placeholder content. ([35517](https://github.com/WordPress/gutenberg/pull/35517))
+-   Buttons: Add gap and vertical margin support. ([34546](https://github.com/WordPress/gutenberg/pull/34546))
+-   Categories: Add support for showing only top-level categories. ([35726](https://github.com/WordPress/gutenberg/pull/35726))
+-   Column: Allow the specification of blocks allowed within columns. ([35342](https://github.com/WordPress/gutenberg/pull/35342))
+-   Comment Content Block: Add typography, color and padding support. ([35183](https://github.com/WordPress/gutenberg/pull/35183))
+-   Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. ([31326](https://github.com/WordPress/gutenberg/pull/31326))
+-   Cover: Add option to set opacity when background colour used. ([35065](https://github.com/WordPress/gutenberg/pull/35065))
+-   Cover: Allow setting the height from the placeholder state. ([35068](https://github.com/WordPress/gutenberg/pull/35068))
+-   Cover: Change dimRatio to 50 if media added and dimRatio is set to 100. ([35789](https://github.com/WordPress/gutenberg/pull/35789))
+-   Cover: Only use white text when the background of the cover block is dark. ([33541](https://github.com/WordPress/gutenberg/pull/33541))
+-   Cover: Use the description in the placeholder. ([34970](https://github.com/WordPress/gutenberg/pull/34970))
+-   Embed: Add Pinterest as an embed provider. ([34895](https://github.com/WordPress/gutenberg/pull/34895))
+-   Feature Image: Add spacing controls to the featured image block. ([35775](https://github.com/WordPress/gutenberg/pull/35775))
+-   Featured image and Image: Remove descendent space. ([35466](https://github.com/WordPress/gutenberg/pull/35466))
+-   Gallery Block: Get media data in a single request. ([34389](https://github.com/WordPress/gutenberg/pull/34389))
+-   Heading: Autogenerate heading anchors. ([30825](https://github.com/WordPress/gutenberg/pull/30825))
+-   Quote: Update deprecation to expect style block supports. ([35615](https://github.com/WordPress/gutenberg/pull/35615))
+-   Page List: Show empty placeholder if no items. ([35441](https://github.com/WordPress/gutenberg/pull/35441))
+-   Post Date: Add more typography options. ([35422](https://github.com/WordPress/gutenberg/pull/35422))
+-   Post Comment Author: Add link settings and block supports. ([35595](https://github.com/WordPress/gutenberg/pull/35595))
+-   Post Comment Date: Add link setting and block supports. ([35112](https://github.com/WordPress/gutenberg/pull/35112))
+-   Quote: Added a "plain" style for quote blocks. ([29856](https://github.com/WordPress/gutenberg/pull/29856))
+-   Search: Enable inheritance in search block. ([35723](https://github.com/WordPress/gutenberg/pull/35723))
+-   Site Logo: Add a basic example to the site logo block. ([35588](https://github.com/WordPress/gutenberg/pull/35588))
+-   Site Logo: Move the Reset button to the Replace menu dropdown. ([35372](https://github.com/WordPress/gutenberg/pull/35372))
+-   Site Logo: placeholder tweaks. ([35397](https://github.com/WordPress/gutenberg/pull/35397))
+-   Site Tagline: Add fontStyle control to Site Tagline block. ([35507](https://github.com/WordPress/gutenberg/pull/35507))
+-   Site Tagline: Add wide + full support to the site tagline block. ([35589](https://github.com/WordPress/gutenberg/pull/35589))
+-   Site Title: Add basic example to site-title block. ([35590](https://github.com/WordPress/gutenberg/pull/35590))
+-   Site Logo: Remove "Reset" button icon. ([35434](https://github.com/WordPress/gutenberg/pull/35434))
+-   Social Icons: Add top and bottom margin support. ([35374](https://github.com/WordPress/gutenberg/pull/35374))
+-   Social Links: Polish logos only style. ([35586](https://github.com/WordPress/gutenberg/pull/35586))
 
 #### Design Tools
-- ToolsPanel: Switch to plus icon when no controls present in panel body. ([34107](https://github.com/WordPress/gutenberg/pull/34107))
-- Block Supports: Add panel specific className. ([35793](https://github.com/WordPress/gutenberg/pull/35793))
-- Block Supports: Switch dimensions inspector controls slot to bubble virtually. ([34725](https://github.com/WordPress/gutenberg/pull/34725))
-- Inspector Controls: Resort the order of the design tools associated with styles hooks. ([35574](https://github.com/WordPress/gutenberg/pull/35574))
+
+-   ToolsPanel: Switch to plus icon when no controls present in panel body. ([34107](https://github.com/WordPress/gutenberg/pull/34107))
+-   Block Supports: Add panel specific className. ([35793](https://github.com/WordPress/gutenberg/pull/35793))
+-   Block Supports: Switch dimensions inspector controls slot to bubble virtually. ([34725](https://github.com/WordPress/gutenberg/pull/34725))
+-   Inspector Controls: Resort the order of the design tools associated with styles hooks. ([35574](https://github.com/WordPress/gutenberg/pull/35574))
 
 #### Global Styles
-- Allow users to store duotone data. ([35318](https://github.com/WordPress/gutenberg/pull/35318))
-- Allow child theme.json to be merged with parent theme.json. ([35459](https://github.com/WordPress/gutenberg/pull/35459))
-- Extract the three color panels to their own global styles view. ([35400](https://github.com/WordPress/gutenberg/pull/35400))
-- Font family: Switch from CSS Custom Property to classes. ([31910](https://github.com/WordPress/gutenberg/pull/31910))
-- Move the global styles reset action to a dropdown menu. ([35559](https://github.com/WordPress/gutenberg/pull/35559))
-- Update descriptions for the different screens under global styles. ([35429](https://github.com/WordPress/gutenberg/pull/35429))
-- Update the global styles sidebar's root view to use Card components. ([35547](https://github.com/WordPress/gutenberg/pull/35547))
-- Use text color to render the Aa preview in global styles. ([35631](https://github.com/WordPress/gutenberg/pull/35631))
+
+-   Allow users to store duotone data. ([35318](https://github.com/WordPress/gutenberg/pull/35318))
+-   Allow child theme.json to be merged with parent theme.json. ([35459](https://github.com/WordPress/gutenberg/pull/35459))
+-   Extract the three color panels to their own global styles view. ([35400](https://github.com/WordPress/gutenberg/pull/35400))
+-   Font family: Switch from CSS Custom Property to classes. ([31910](https://github.com/WordPress/gutenberg/pull/31910))
+-   Move the global styles reset action to a dropdown menu. ([35559](https://github.com/WordPress/gutenberg/pull/35559))
+-   Update descriptions for the different screens under global styles. ([35429](https://github.com/WordPress/gutenberg/pull/35429))
+-   Update the global styles sidebar's root view to use Card components. ([35547](https://github.com/WordPress/gutenberg/pull/35547))
+-   Use text color to render the Aa preview in global styles. ([35631](https://github.com/WordPress/gutenberg/pull/35631))
 
 #### Theming
-- Add [data-block] to appender. ([35356](https://github.com/WordPress/gutenberg/pull/35356))
-- Enable theme supports automatically for FSE theme. ([35593](https://github.com/WordPress/gutenberg/pull/35593))
-- Remove default padding/margin on the body of the page and editor canvas. ([35421](https://github.com/WordPress/gutenberg/pull/35421))
-- Support title in templateParts. ([35626](https://github.com/WordPress/gutenberg/pull/35626))
-- CSS: Add a reset for image heights. ([30092](https://github.com/WordPress/gutenberg/pull/30092))
+
+-   Add [data-block] to appender. ([35356](https://github.com/WordPress/gutenberg/pull/35356))
+-   Enable theme supports automatically for FSE theme. ([35593](https://github.com/WordPress/gutenberg/pull/35593))
+-   Remove default padding/margin on the body of the page and editor canvas. ([35421](https://github.com/WordPress/gutenberg/pull/35421))
+-   Support title in templateParts. ([35626](https://github.com/WordPress/gutenberg/pull/35626))
+-   CSS: Add a reset for image heights. ([30092](https://github.com/WordPress/gutenberg/pull/30092))
 
 #### Patterns
-- Increase number of items per page for default Query Loop Block. ([35603](https://github.com/WordPress/gutenberg/pull/35603))
-- Featured patterns from pattern directory. ([35115](https://github.com/WordPress/gutenberg/pull/35115))
+
+-   Increase number of items per page for default Query Loop Block. ([35603](https://github.com/WordPress/gutenberg/pull/35603))
+-   Featured patterns from pattern directory. ([35115](https://github.com/WordPress/gutenberg/pull/35115))
 
 #### Block Editor
-- Add animations for insertion point, dropzone, and other elements. ([33132](https://github.com/WordPress/gutenberg/pull/33132))
-- Adjust Link UI visual styling. ([35414](https://github.com/WordPress/gutenberg/pull/35414))
-- Add some top margin. ([35717](https://github.com/WordPress/gutenberg/pull/35717))
-- Show ellipsis menu in the List View. ([35170](https://github.com/WordPress/gutenberg/pull/35170))
+
+-   Add animations for insertion point, dropzone, and other elements. ([33132](https://github.com/WordPress/gutenberg/pull/33132))
+-   Adjust Link UI visual styling. ([35414](https://github.com/WordPress/gutenberg/pull/35414))
+-   Add some top margin. ([35717](https://github.com/WordPress/gutenberg/pull/35717))
+-   Show ellipsis menu in the List View. ([35170](https://github.com/WordPress/gutenberg/pull/35170))
 
 #### Template Editor
-- Add more options to template areas in template details. ([35577](https://github.com/WordPress/gutenberg/pull/35577))
-- Add template areas to template inspector. ([35239](https://github.com/WordPress/gutenberg/pull/35239))
-- Add template details to template parts. ([35444](https://github.com/WordPress/gutenberg/pull/35444))
-- Align the layout of the template card with the block card. ([35391](https://github.com/WordPress/gutenberg/pull/35391))
-- Update site editor block placeholder styling. ([35513](https://github.com/WordPress/gutenberg/pull/35513))
-- Use a dark background for the site editor. ([35520](https://github.com/WordPress/gutenberg/pull/35520))
-
-#### Components
-- Add shortcut provider. ([35652](https://github.com/WordPress/gutenberg/pull/35652))
-- Iterate on the design of the colors and gradients panel. ([35535](https://github.com/WordPress/gutenberg/pull/35535))
-- Navigator: Update `Navigator` styling to facilitate sticky positioning. ([35518](https://github.com/WordPress/gutenberg/pull/35518))
-- Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. ([27374](https://github.com/WordPress/gutenberg/pull/27374))
-- Remove segmented control vertical separators. ([35497](https://github.com/WordPress/gutenberg/pull/35497))
-- Storybook: Add RTL switcher to toolbar. ([35711](https://github.com/WordPress/gutenberg/pull/35711))
-- Storybook: Add story for TypographyPanel. ([35293](https://github.com/WordPress/gutenberg/pull/35293))
-- Storybook: Enable Controls and disable Knobs by default. ([35682](https://github.com/WordPress/gutenberg/pull/35682))
-- Storybook: Remove outdated decorator configuration. ([35678](https://github.com/WordPress/gutenberg/pull/35678))
-- Support "any" step in NumberControl and RangeControl. ([34542](https://github.com/WordPress/gutenberg/pull/34542))
-- ToggleGroupControl: Allow custom aria-label. ([35423](https://github.com/WordPress/gutenberg/pull/35423))
-- Update range control metrics. ([35540](https://github.com/WordPress/gutenberg/pull/35540))
-- Update FontSize control. ([35395](https://github.com/WordPress/gutenberg/pull/35395))
+
+-   Add more options to template areas in template details. ([35577](https://github.com/WordPress/gutenberg/pull/35577))
+-   Add template areas to template inspector. ([35239](https://github.com/WordPress/gutenberg/pull/35239))
+-   Add template details to template parts. ([35444](https://github.com/WordPress/gutenberg/pull/35444))
+-   Align the layout of the template card with the block card. ([35391](https://github.com/WordPress/gutenberg/pull/35391))
+-   Update site editor block placeholder styling. ([35513](https://github.com/WordPress/gutenberg/pull/35513))
+-   Use a dark background for the site editor. ([35520](https://github.com/WordPress/gutenberg/pull/35520))
+
+#### Components
+
+-   Add shortcut provider. ([35652](https://github.com/WordPress/gutenberg/pull/35652))
+-   Iterate on the design of the colors and gradients panel. ([35535](https://github.com/WordPress/gutenberg/pull/35535))
+-   Navigator: Update `Navigator` styling to facilitate sticky positioning. ([35518](https://github.com/WordPress/gutenberg/pull/35518))
+-   Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. ([27374](https://github.com/WordPress/gutenberg/pull/27374))
+-   Remove segmented control vertical separators. ([35497](https://github.com/WordPress/gutenberg/pull/35497))
+-   Storybook: Add RTL switcher to toolbar. ([35711](https://github.com/WordPress/gutenberg/pull/35711))
+-   Storybook: Add story for TypographyPanel. ([35293](https://github.com/WordPress/gutenberg/pull/35293))
+-   Storybook: Enable Controls and disable Knobs by default. ([35682](https://github.com/WordPress/gutenberg/pull/35682))
+-   Storybook: Remove outdated decorator configuration. ([35678](https://github.com/WordPress/gutenberg/pull/35678))
+-   Support "any" step in NumberControl and RangeControl. ([34542](https://github.com/WordPress/gutenberg/pull/34542))
+-   ToggleGroupControl: Allow custom aria-label. ([35423](https://github.com/WordPress/gutenberg/pull/35423))
+-   Update range control metrics. ([35540](https://github.com/WordPress/gutenberg/pull/35540))
+-   Update FontSize control. ([35395](https://github.com/WordPress/gutenberg/pull/35395))
 
 #### Packages
-- Create Block: Add PascalCase slug to create-block template strings. ([35462](https://github.com/WordPress/gutenberg/pull/35462))
-- Create Block: Allow local directories to be passed to --template as relative paths. ([35645](https://github.com/WordPress/gutenberg/pull/35645))
-- Test Setup: Add more-complete mocks of common timer functions. ([35368](https://github.com/WordPress/gutenberg/pull/35368))
-- Scripts: Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. ([35371](https://github.com/WordPress/gutenberg/pull/35371))
 
+-   Create Block: Add PascalCase slug to create-block template strings. ([35462](https://github.com/WordPress/gutenberg/pull/35462))
+-   Create Block: Allow local directories to be passed to --template as relative paths. ([35645](https://github.com/WordPress/gutenberg/pull/35645))
+-   Test Setup: Add more-complete mocks of common timer functions. ([35368](https://github.com/WordPress/gutenberg/pull/35368))
+-   Scripts: Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. ([35371](https://github.com/WordPress/gutenberg/pull/35371))
 
 ### Accessibility
-- Rich text popovers: Move to block tools to fix tab order. ([34956](https://github.com/WordPress/gutenberg/pull/34956))
-- Save button: Prevent focus loss. ([34731](https://github.com/WordPress/gutenberg/pull/34731))
+
+-   Rich text popovers: Move to block tools to fix tab order. ([34956](https://github.com/WordPress/gutenberg/pull/34956))
+-   Save button: Prevent focus loss. ([34731](https://github.com/WordPress/gutenberg/pull/34731))
 
 ### Performance
 
 #### Global Styles
-- Pass only the data the site editor uses. ([35458](https://github.com/WordPress/gutenberg/pull/35458))
-- Use a context provider for global styles configuration. ([35622](https://github.com/WordPress/gutenberg/pull/35622))
+
+-   Pass only the data the site editor uses. ([35458](https://github.com/WordPress/gutenberg/pull/35458))
+-   Use a context provider for global styles configuration. ([35622](https://github.com/WordPress/gutenberg/pull/35622))
 
 ### Bug Fixes
 
 #### Block Library
-- Block Settings: Don't render 'Move to' if the block cannot be moved. ([35463](https://github.com/WordPress/gutenberg/pull/35463))
-- Cover: Update placeholder minHeight style to support non-px units. ([35614](https://github.com/WordPress/gutenberg/pull/35614))
-- Cover: Update 'templateLock' attribute. ([35671](https://github.com/WordPress/gutenberg/pull/35671))
-- Featured Image: Center placeholder chip contents. ([35417](https://github.com/WordPress/gutenberg/pull/35417))
-- Heading: Fix undo/redo "trap". ([35767](https://github.com/WordPress/gutenberg/pull/35767))
-- Heading: Remove anchor map when block unmounts. ([35761](https://github.com/WordPress/gutenberg/pull/35761))
-- Site Logo: Fix site logo block on dark backgrounds. ([35718](https://github.com/WordPress/gutenberg/pull/35718))
+
+-   Block Settings: Don't render 'Move to' if the block cannot be moved. ([35463](https://github.com/WordPress/gutenberg/pull/35463))
+-   Cover: Update placeholder minHeight style to support non-px units. ([35614](https://github.com/WordPress/gutenberg/pull/35614))
+-   Cover: Update 'templateLock' attribute. ([35671](https://github.com/WordPress/gutenberg/pull/35671))
+-   Featured Image: Center placeholder chip contents. ([35417](https://github.com/WordPress/gutenberg/pull/35417))
+-   Heading: Fix undo/redo "trap". ([35767](https://github.com/WordPress/gutenberg/pull/35767))
+-   Heading: Remove anchor map when block unmounts. ([35761](https://github.com/WordPress/gutenberg/pull/35761))
+-   Site Logo: Fix site logo block on dark backgrounds. ([35718](https://github.com/WordPress/gutenberg/pull/35718))
 
 #### i18n
-- Fix HelpHub link i18n for page-jumps. ([35404](https://github.com/WordPress/gutenberg/pull/35404))
-- Fix template part block untranslated strings. ([35715](https://github.com/WordPress/gutenberg/pull/35715))
-- Translation note for Home/end to avoid mistranslations. ([35669](https://github.com/WordPress/gutenberg/pull/35669))
+
+-   Fix HelpHub link i18n for page-jumps. ([35404](https://github.com/WordPress/gutenberg/pull/35404))
+-   Fix template part block untranslated strings. ([35715](https://github.com/WordPress/gutenberg/pull/35715))
+-   Translation note for Home/end to avoid mistranslations. ([35669](https://github.com/WordPress/gutenberg/pull/35669))
 
 #### Packages
-- Server Site Render: Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup. ([35433](https://github.com/WordPress/gutenberg/pull/35433))
-- Rich text: formats: allow format to filter value when changing tag name ([35516](https://github.com/WordPress/gutenberg/pull/35516/files))
+
+-   Server Site Render: Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup. ([35433](https://github.com/WordPress/gutenberg/pull/35433))
+-   Rich text: formats: allow format to filter value when changing tag name ([35516](https://github.com/WordPress/gutenberg/pull/35516/files))
 
 #### Components
-- Color Picker: Fix some issues on the color picker component; Remove tinycolor2;. ([35562](https://github.com/WordPress/gutenberg/pull/35562))
-- Navigator: Hide horizontal overflow in `Navigator`. ([35332](https://github.com/WordPress/gutenberg/pull/35332))
-- Popover: Fix __unstableBoundaryParent. ([35082](https://github.com/WordPress/gutenberg/pull/35082))
-- RawHTML component: Allow multiple children. ([35532](https://github.com/WordPress/gutenberg/pull/35532))
-- Rich text: Fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
-- Toggle Group Control: Fix visual state when no option is selected. ([35545](https://github.com/WordPress/gutenberg/pull/35545))
-- Toggle Group Control: Fixed condition to show separator correctly. ([35409](https://github.com/WordPress/gutenberg/pull/35409))
-- Toogle Group Control: Fix `ToggleGroupControlOption` not passing `ref` to the underlying element. ([35546](https://github.com/WordPress/gutenberg/pull/35546))
-- Tooltip: For Tooltips, prevent emitting events to child elements if they are disabled. ([35254](https://github.com/WordPress/gutenberg/pull/35254))
-- Tooltip: Remove extra comma character from Tooltip when underlying component is disabled. ([35247](https://github.com/WordPress/gutenberg/pull/35247))
+
+-   Color Picker: Fix some issues on the color picker component; Remove tinycolor2;. ([35562](https://github.com/WordPress/gutenberg/pull/35562))
+-   Navigator: Hide horizontal overflow in `Navigator`. ([35332](https://github.com/WordPress/gutenberg/pull/35332))
+-   Popover: Fix \_\_unstableBoundaryParent. ([35082](https://github.com/WordPress/gutenberg/pull/35082))
+-   RawHTML component: Allow multiple children. ([35532](https://github.com/WordPress/gutenberg/pull/35532))
+-   Rich text: Fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
+-   Toggle Group Control: Fix visual state when no option is selected. ([35545](https://github.com/WordPress/gutenberg/pull/35545))
+-   Toggle Group Control: Fixed condition to show separator correctly. ([35409](https://github.com/WordPress/gutenberg/pull/35409))
+-   Toogle Group Control: Fix `ToggleGroupControlOption` not passing `ref` to the underlying element. ([35546](https://github.com/WordPress/gutenberg/pull/35546))
+-   Tooltip: For Tooltips, prevent emitting events to child elements if they are disabled. ([35254](https://github.com/WordPress/gutenberg/pull/35254))
+-   Tooltip: Remove extra comma character from Tooltip when underlying component is disabled. ([35247](https://github.com/WordPress/gutenberg/pull/35247))
 
 #### Themes
-- Custom Templates: Use "title" from the theme.json. ([35592](https://github.com/WordPress/gutenberg/pull/35592))
-- Elements block support: Fix link color rendering on site front end. ([35446](https://github.com/WordPress/gutenberg/pull/35446))
-- Move the link color styles to the footer. ([35425](https://github.com/WordPress/gutenberg/pull/35425))
-- Reset margin for all children of flow layouts. ([35426](https://github.com/WordPress/gutenberg/pull/35426))
+
+-   Custom Templates: Use "title" from the theme.json. ([35592](https://github.com/WordPress/gutenberg/pull/35592))
+-   Elements block support: Fix link color rendering on site front end. ([35446](https://github.com/WordPress/gutenberg/pull/35446))
+-   Move the link color styles to the footer. ([35425](https://github.com/WordPress/gutenberg/pull/35425))
+-   Reset margin for all children of flow layouts. ([35426](https://github.com/WordPress/gutenberg/pull/35426))
 
 #### Template Editor
-- Use slug as template parts area item key. ([35796](https://github.com/WordPress/gutenberg/pull/35796))
-- Fix missing titles in general areas. ([35657](https://github.com/WordPress/gutenberg/pull/35657))
+
+-   Use slug as template parts area item key. ([35796](https://github.com/WordPress/gutenberg/pull/35796))
+-   Fix missing titles in general areas. ([35657](https://github.com/WordPress/gutenberg/pull/35657))
 
 #### Block API
-- Blocks: Apply the most recent filters to previously registered blocks. ([34299](https://github.com/WordPress/gutenberg/pull/34299))
-- Fix class serialization of font size and colors in dynamic blocks that use block supports. ([35751](https://github.com/WordPress/gutenberg/pull/35751))
+
+-   Blocks: Apply the most recent filters to previously registered blocks. ([34299](https://github.com/WordPress/gutenberg/pull/34299))
+-   Fix class serialization of font size and colors in dynamic blocks that use block supports. ([35751](https://github.com/WordPress/gutenberg/pull/35751))
 
 #### Design Tools
-- Border Radius Control: Fix undefined value on first click into RangeControl. ([35651](https://github.com/WordPress/gutenberg/pull/35651))
+
+-   Border Radius Control: Fix undefined value on first click into RangeControl. ([35651](https://github.com/WordPress/gutenberg/pull/35651))
 
 #### Block Editor
-- Fix updating the block list after block removal. ([35721](https://github.com/WordPress/gutenberg/pull/35721))
-- Fix sibling inserter animation. ([35729](https://github.com/WordPress/gutenberg/pull/35729))
-- Inserter: Fix gap between Search and Tabs. ([35537](https://github.com/WordPress/gutenberg/pull/35537))
-- Saving post: Transparent disabled button. ([35542](https://github.com/WordPress/gutenberg/pull/35542))
-- FSE: Coding standards: DOCTYPE should be the first line/character of any HTML document. ([35442](https://github.com/WordPress/gutenberg/pull/35442))
-- [Block Editor]: Fix displaying only the none alignment option ([35822](https://github.com/WordPress/gutenberg/pull/35822))
+
+-   Fix updating the block list after block removal. ([35721](https://github.com/WordPress/gutenberg/pull/35721))
+-   Fix sibling inserter animation. ([35729](https://github.com/WordPress/gutenberg/pull/35729))
+-   Inserter: Fix gap between Search and Tabs. ([35537](https://github.com/WordPress/gutenberg/pull/35537))
+-   Saving post: Transparent disabled button. ([35542](https://github.com/WordPress/gutenberg/pull/35542))
+-   FSE: Coding standards: DOCTYPE should be the first line/character of any HTML document. ([35442](https://github.com/WordPress/gutenberg/pull/35442))
+-   [Block Editor]: Fix displaying only the none alignment option ([35822](https://github.com/WordPress/gutenberg/pull/35822))
 
 #### REST API
-- Fix preloading middleware referencing stale data for OPTIONS requests. ([35527](https://github.com/WordPress/gutenberg/pull/35527))
+
+-   Fix preloading middleware referencing stale data for OPTIONS requests. ([35527](https://github.com/WordPress/gutenberg/pull/35527))
 
 #### List View
-- Fix expand and collapse when the icon is clicked. ([35526](https://github.com/WordPress/gutenberg/pull/35526))
+
+-   Fix expand and collapse when the icon is clicked. ([35526](https://github.com/WordPress/gutenberg/pull/35526))
 
 #### Global Styles
-- Fix presets that use a callback to validate user data. ([35255](https://github.com/WordPress/gutenberg/pull/35255))
+
+-   Fix presets that use a callback to validate user data. ([35255](https://github.com/WordPress/gutenberg/pull/35255))
 
 #### CSS & Styling
-- Remove font size classes that are enqueued in the global stylesheet. ([35182](https://github.com/WordPress/gutenberg/pull/35182))
+
+-   Remove font size classes that are enqueued in the global stylesheet. ([35182](https://github.com/WordPress/gutenberg/pull/35182))
 
 #### Block API
-- Allow more than 1 block stylesheets. ([32510](https://github.com/WordPress/gutenberg/pull/32510))
+
+-   Allow more than 1 block stylesheets. ([32510](https://github.com/WordPress/gutenberg/pull/32510))
 
 ### Experiments
 
 #### Navigation Block
-- Add block gap support. ([35277](https://github.com/WordPress/gutenberg/pull/35277))
-- Enable always on burger menu for responsive navigation menus. ([35568](https://github.com/WordPress/gutenberg/pull/35568))
-- Fix issue with space-between. ([35722](https://github.com/WordPress/gutenberg/pull/35722))
-- Submenu item paddings & fixes. ([35716](https://github.com/WordPress/gutenberg/pull/35716))
-- Fix navigation gap & padding issues. ([35752](https://github.com/WordPress/gutenberg/pull/35752))
-- Remove color inheritance specificity. ([35725](https://github.com/WordPress/gutenberg/pull/35725))
-- Remove deprecated classnames from Navigation Link block. ([35358](https://github.com/WordPress/gutenberg/pull/35358))
+
+-   Add block gap support. ([35277](https://github.com/WordPress/gutenberg/pull/35277))
+-   Enable always on burger menu for responsive navigation menus. ([35568](https://github.com/WordPress/gutenberg/pull/35568))
+-   Fix issue with space-between. ([35722](https://github.com/WordPress/gutenberg/pull/35722))
+-   Submenu item paddings & fixes. ([35716](https://github.com/WordPress/gutenberg/pull/35716))
+-   Fix navigation gap & padding issues. ([35752](https://github.com/WordPress/gutenberg/pull/35752))
+-   Remove color inheritance specificity. ([35725](https://github.com/WordPress/gutenberg/pull/35725))
+-   Remove deprecated classnames from Navigation Link block. ([35358](https://github.com/WordPress/gutenberg/pull/35358))
 -
-#### Navigation Screen
-- Use new core functions in menu items REST API. ([35648](https://github.com/WordPress/gutenberg/pull/35648))
-- Navigation: Preload more API requests. ([35402](https://github.com/WordPress/gutenberg/pull/35402))
-- Refactor `gutenberg_initialize_editor` function and remove `block_editor_preload_data` filter. ([35838](https://github.com/WordPress/gutenberg/pull/35838))
 
+#### Navigation Screen
 
+-   Use new core functions in menu items REST API. ([35648](https://github.com/WordPress/gutenberg/pull/35648))
+-   Navigation: Preload more API requests. ([35402](https://github.com/WordPress/gutenberg/pull/35402))
+-   Refactor `gutenberg_initialize_editor` function and remove `block_editor_preload_data` filter. ([35838](https://github.com/WordPress/gutenberg/pull/35838))
 
 #### Full Site Editing
-- Try: Remove dotted ancestor border. ([35637](https://github.com/WordPress/gutenberg/pull/35637))
 
+-   Try: Remove dotted ancestor border. ([35637](https://github.com/WordPress/gutenberg/pull/35637))
 
 ### Documentation
 
 #### Handbook
-- Add categories to TOC to help digest the FAQ. ([35519](https://github.com/WordPress/gutenberg/pull/35519))
-- Add missing documentation for the `wrapperProps` property for the `BlockListBlock` component returned by the `editor.blockListEdit` filter. ([26961](https://github.com/WordPress/gutenberg/pull/26961))
-- Add section on using theme.json schema. ([35739](https://github.com/WordPress/gutenberg/pull/35739))
-- Add Table of Contents to FAQ page. ([35455](https://github.com/WordPress/gutenberg/pull/35455))
-- Clarify documentation for InnerBlocks orientation prop. ([35712](https://github.com/WordPress/gutenberg/pull/35712))
-- CustomRadius - Remove plugin only text. ([35582](https://github.com/WordPress/gutenberg/pull/35582))
-- Update block categories. ([35523](https://github.com/WordPress/gutenberg/pull/35523))
-- Update `npm run build` command for developing with Gutenberg locally. ([35681](https://github.com/WordPress/gutenberg/pull/35681))
+
+-   Add categories to TOC to help digest the FAQ. ([35519](https://github.com/WordPress/gutenberg/pull/35519))
+-   Add missing documentation for the `wrapperProps` property for the `BlockListBlock` component returned by the `editor.blockListEdit` filter. ([26961](https://github.com/WordPress/gutenberg/pull/26961))
+-   Add section on using theme.json schema. ([35739](https://github.com/WordPress/gutenberg/pull/35739))
+-   Add Table of Contents to FAQ page. ([35455](https://github.com/WordPress/gutenberg/pull/35455))
+-   Clarify documentation for InnerBlocks orientation prop. ([35712](https://github.com/WordPress/gutenberg/pull/35712))
+-   CustomRadius - Remove plugin only text. ([35582](https://github.com/WordPress/gutenberg/pull/35582))
+-   Update block categories. ([35523](https://github.com/WordPress/gutenberg/pull/35523))
+-   Update `npm run build` command for developing with Gutenberg locally. ([35681](https://github.com/WordPress/gutenberg/pull/35681))
 
 #### Packages
-- Block Editor: Update default value of the viewportWidth attribute in documentation. ([35659](https://github.com/WordPress/gutenberg/pull/35659))
-- Components: Add the storybook link to the `/components` README. ([35493](https://github.com/WordPress/gutenberg/pull/35493))
-- Components: Add readme for SkipToSelectedBlock component. ([32958](https://github.com/WordPress/gutenberg/pull/32958))
-- Componentes: Add CHANGELOG entry for the fieldset removal from `FontAppearanceControl`. ([35585](https://github.com/WordPress/gutenberg/pull/35585))
-- Components: Add entry to CHANGELOG regarding new ColorPicker. ([35486](https://github.com/WordPress/gutenberg/pull/35486))
-- Components: Fix markdown highlighting on components CONTRIBUTING.md. ([35633](https://github.com/WordPress/gutenberg/pull/35633))
-- Components: Mark `CustomSelectControl` `hint` option as experimental. ([35673](https://github.com/WordPress/gutenberg/pull/35673))
-- Components: Polish `ToggleGroupControl`. ([35600](https://github.com/WordPress/gutenberg/pull/35600))
-- Components: Small tweaks to contributing guidelines. ([35620](https://github.com/WordPress/gutenberg/pull/35620))
-- Components: Update README for SelectControl. ([28811](https://github.com/WordPress/gutenberg/pull/28811))
-- Components: Update DateTimePicker component README to remove reference to isDayHighlighted callback. ([35363](https://github.com/WordPress/gutenberg/pull/35363))
-- Components, feat(SelectControl): Add children prop. ([29540](https://github.com/WordPress/gutenberg/pull/29540))
-- Create Block: Update documentation and readme post merge of #35645. ([35679](https://github.com/WordPress/gutenberg/pull/35679))
+
+-   Block Editor: Update default value of the viewportWidth attribute in documentation. ([35659](https://github.com/WordPress/gutenberg/pull/35659))
+-   Components: Add the storybook link to the `/components` README. ([35493](https://github.com/WordPress/gutenberg/pull/35493))
+-   Components: Add readme for SkipToSelectedBlock component. ([32958](https://github.com/WordPress/gutenberg/pull/32958))
+-   Componentes: Add CHANGELOG entry for the fieldset removal from `FontAppearanceControl`. ([35585](https://github.com/WordPress/gutenberg/pull/35585))
+-   Components: Add entry to CHANGELOG regarding new ColorPicker. ([35486](https://github.com/WordPress/gutenberg/pull/35486))
+-   Components: Fix markdown highlighting on components CONTRIBUTING.md. ([35633](https://github.com/WordPress/gutenberg/pull/35633))
+-   Components: Mark `CustomSelectControl` `hint` option as experimental. ([35673](https://github.com/WordPress/gutenberg/pull/35673))
+-   Components: Polish `ToggleGroupControl`. ([35600](https://github.com/WordPress/gutenberg/pull/35600))
+-   Components: Small tweaks to contributing guidelines. ([35620](https://github.com/WordPress/gutenberg/pull/35620))
+-   Components: Update README for SelectControl. ([28811](https://github.com/WordPress/gutenberg/pull/28811))
+-   Components: Update DateTimePicker component README to remove reference to isDayHighlighted callback. ([35363](https://github.com/WordPress/gutenberg/pull/35363))
+-   Components, feat(SelectControl): Add children prop. ([29540](https://github.com/WordPress/gutenberg/pull/29540))
+-   Create Block: Update documentation and readme post merge of #35645. ([35679](https://github.com/WordPress/gutenberg/pull/35679))
 
 ### Code Quality
-- Block Editor: Fix odd usage of transform-styles wrap function (and tighten types). ([23599](https://github.com/WordPress/gutenberg/pull/23599))
-- Constrained tabbing: Simplify. ([34836](https://github.com/WordPress/gutenberg/pull/34836))
-- Compose: Convert `usePrevious` hook to TypeScript. ([35597](https://github.com/WordPress/gutenberg/pull/35597))
-- Update Callers to handle when getBlockType return undefined. ([35097](https://github.com/WordPress/gutenberg/pull/35097))
-- Components: Polish ResizableBox and convert it to TypeScript. ([35062](https://github.com/WordPress/gutenberg/pull/35062))
-- Components: Remove tinycolor object usage from the gradient picker. ([35544](https://github.com/WordPress/gutenberg/pull/35544))
-- Components: Remove duplicated className in Card component. ([35333](https://github.com/WordPress/gutenberg/pull/35333))
-- Components: Remove unused `useJumpStep` utility. ([35561](https://github.com/WordPress/gutenberg/pull/35561))
-- Components: Use new color picker props. ([35566](https://github.com/WordPress/gutenberg/pull/35566))
-- Components: Replace the color picker component with the new version. ([35220](https://github.com/WordPress/gutenberg/pull/35220))
-- Components, FontAppearanceControl: Remove `fieldset` wrapper. ([35461](https://github.com/WordPress/gutenberg/pull/35461))
-- Components, ToolsPanel: Remove hardcoded classnames. ([35415](https://github.com/WordPress/gutenberg/pull/35415))
-- Components, UnitControl component: Refactor JSX components to TypeScript. ([35281](https://github.com/WordPress/gutenberg/pull/35281))
-- Global Styles: Refactor how the Global Styles access and sets data. ([35264](https://github.com/WordPress/gutenberg/pull/35264))
-- Post Editor: Fix-up Post Editor’s preferences modal. ([35369](https://github.com/WordPress/gutenberg/pull/35369))
-- Remove Tinycolor usage from component color utils. ([35553](https://github.com/WordPress/gutenberg/pull/35553))
-- Reusable Blocks: Thunkify reusable-blocks store. ([35217](https://github.com/WordPress/gutenberg/pull/35217))
 
+-   Block Editor: Fix odd usage of transform-styles wrap function (and tighten types). ([23599](https://github.com/WordPress/gutenberg/pull/23599))
+-   Constrained tabbing: Simplify. ([34836](https://github.com/WordPress/gutenberg/pull/34836))
+-   Compose: Convert `usePrevious` hook to TypeScript. ([35597](https://github.com/WordPress/gutenberg/pull/35597))
+-   Update Callers to handle when getBlockType return undefined. ([35097](https://github.com/WordPress/gutenberg/pull/35097))
+-   Components: Polish ResizableBox and convert it to TypeScript. ([35062](https://github.com/WordPress/gutenberg/pull/35062))
+-   Components: Remove tinycolor object usage from the gradient picker. ([35544](https://github.com/WordPress/gutenberg/pull/35544))
+-   Components: Remove duplicated className in Card component. ([35333](https://github.com/WordPress/gutenberg/pull/35333))
+-   Components: Remove unused `useJumpStep` utility. ([35561](https://github.com/WordPress/gutenberg/pull/35561))
+-   Components: Use new color picker props. ([35566](https://github.com/WordPress/gutenberg/pull/35566))
+-   Components: Replace the color picker component with the new version. ([35220](https://github.com/WordPress/gutenberg/pull/35220))
+-   Components, FontAppearanceControl: Remove `fieldset` wrapper. ([35461](https://github.com/WordPress/gutenberg/pull/35461))
+-   Components, ToolsPanel: Remove hardcoded classnames. ([35415](https://github.com/WordPress/gutenberg/pull/35415))
+-   Components, UnitControl component: Refactor JSX components to TypeScript. ([35281](https://github.com/WordPress/gutenberg/pull/35281))
+-   Global Styles: Refactor how the Global Styles access and sets data. ([35264](https://github.com/WordPress/gutenberg/pull/35264))
+-   Post Editor: Fix-up Post Editor’s preferences modal. ([35369](https://github.com/WordPress/gutenberg/pull/35369))
+-   Remove Tinycolor usage from component color utils. ([35553](https://github.com/WordPress/gutenberg/pull/35553))
+-   Reusable Blocks: Thunkify reusable-blocks store. ([35217](https://github.com/WordPress/gutenberg/pull/35217))
 
 ### Tools
 
 #### Packages
-- Scripts: Remove inject polyfill by default. ([35436](https://github.com/WordPress/gutenberg/pull/35436))
+
+-   Scripts: Remove inject polyfill by default. ([35436](https://github.com/WordPress/gutenberg/pull/35436))
 
 #### Testing
-- Child theme.json: Update test to better capture that childs can update single parts in isolation. ([35759](https://github.com/WordPress/gutenberg/pull/35759))
-- Border Radius Control: Add fallback px unit and add utils tests. ([35786](https://github.com/WordPress/gutenberg/pull/35786))
-- Fix preview end-to-end tests. ([35565](https://github.com/WordPress/gutenberg/pull/35565))
-- Flaky Tests: Fix taxonomies flaky tests. ([35534](https://github.com/WordPress/gutenberg/pull/35534))
-- Flaky Tests: Try another fix for flaky nav test. ([35443](https://github.com/WordPress/gutenberg/pull/35443))
-- Performance tests: Add more detailed loading metrics. ([32237](https://github.com/WordPress/gutenberg/pull/32237))
-- Components, Panel: Improve unit tests. ([35658](https://github.com/WordPress/gutenberg/pull/35658))
-- Enable/skipped metabox test. ([35594](https://github.com/WordPress/gutenberg/pull/35594))
+
+-   Child theme.json: Update test to better capture that childs can update single parts in isolation. ([35759](https://github.com/WordPress/gutenberg/pull/35759))
+-   Border Radius Control: Add fallback px unit and add utils tests. ([35786](https://github.com/WordPress/gutenberg/pull/35786))
+-   Fix preview end-to-end tests. ([35565](https://github.com/WordPress/gutenberg/pull/35565))
+-   Flaky Tests: Fix taxonomies flaky tests. ([35534](https://github.com/WordPress/gutenberg/pull/35534))
+-   Flaky Tests: Try another fix for flaky nav test. ([35443](https://github.com/WordPress/gutenberg/pull/35443))
+-   Performance tests: Add more detailed loading metrics. ([32237](https://github.com/WordPress/gutenberg/pull/32237))
+-   Components, Panel: Improve unit tests. ([35658](https://github.com/WordPress/gutenberg/pull/35658))
+-   Enable/skipped metabox test. ([35594](https://github.com/WordPress/gutenberg/pull/35594))
 
 #### Build Tooling
-- Revert version bump if build job fails. ([33239](https://github.com/WordPress/gutenberg/pull/33239))
-- Updates react-native-aztec android to use S3 dependency for Aztec editor. ([35606](https://github.com/WordPress/gutenberg/pull/35606))
 
+-   Revert version bump if build job fails. ([33239](https://github.com/WordPress/gutenberg/pull/33239))
+-   Updates react-native-aztec android to use S3 dependency for Aztec editor. ([35606](https://github.com/WordPress/gutenberg/pull/35606))
 
 = 11.7.1 =
 
-### Bug Fixes
+## Changelog
 
--  Rich text: formats: allow format to filter value when changing tag name ([35516](https://github.com/WordPress/gutenberg/pull/35516))
+### Bug Fixes
 
+-   Rich text: formats: allow format to filter value when changing tag name ([35516](https://github.com/WordPress/gutenberg/pull/35516))
 
 = 11.8.0-rc.1 =
 
-
+## Changelog
 
 ### Enhancements
 
-- Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. ([35371](https://github.com/WordPress/gutenberg/pull/35371))
-- Allow local directories to be passed to --template as relative paths. ([35645](https://github.com/WordPress/gutenberg/pull/35645))
-- Test Setup: Add more-complete mocks of common timer functions. ([35368](https://github.com/WordPress/gutenberg/pull/35368))
-
-#### Block Library
-- Add basic example to site logo block. ([35588](https://github.com/WordPress/gutenberg/pull/35588))
-- Add basic example to site-title block. ([35590](https://github.com/WordPress/gutenberg/pull/35590))
-- Add fontStyle control to Site Tagline block. ([35507](https://github.com/WordPress/gutenberg/pull/35507))
-- Add spacing controls to the featured image block. ([35775](https://github.com/WordPress/gutenberg/pull/35775))
-- Add wide + full support to the site tagline block. ([35589](https://github.com/WordPress/gutenberg/pull/35589))
-- Added a "plain" style for quote blocks. ([29856](https://github.com/WordPress/gutenberg/pull/29856))
-- Autogenerate heading anchors. ([30825](https://github.com/WordPress/gutenberg/pull/30825))
-- Comment Content Block: Add typography, color and padding support. ([35183](https://github.com/WordPress/gutenberg/pull/35183))
-- Cover block: Add option to set opacity when background colour used. ([35065](https://github.com/WordPress/gutenberg/pull/35065))
-- Cover block: Allow setting the height from the placeholder state. ([35068](https://github.com/WordPress/gutenberg/pull/35068))
-- Embed: Add Pinterest as an embed provider. ([34895](https://github.com/WordPress/gutenberg/pull/34895))
-- Enable always on burger menu for responsive navigation menus. ([35568](https://github.com/WordPress/gutenberg/pull/35568))
-- Enable slash inserter for heading, list, and quote. ([35360](https://github.com/WordPress/gutenberg/pull/35360))
-- Post editor: Add some top margin. ([35717](https://github.com/WordPress/gutenberg/pull/35717))
-- Try: Site Logo placeholder tweaks. ([35397](https://github.com/WordPress/gutenberg/pull/35397))
-- [Block: Post comment date]: Add link setting and block supports. ([35112](https://github.com/WordPress/gutenberg/pull/35112))
-- [Categories]: Add support for showing only top level categories. ([35726](https://github.com/WordPress/gutenberg/pull/35726))
-
-#### Components
-- Fix some issues on the color picker component; Remove tinycolor2;. ([35562](https://github.com/WordPress/gutenberg/pull/35562))
-- Iterate on the design of the colors and gradients panel. ([35535](https://github.com/WordPress/gutenberg/pull/35535))
-- Storybook: Add RTL switcher to toolbar. ([35711](https://github.com/WordPress/gutenberg/pull/35711))
-- Storybook: Enable Controls and disable Knobs by default. ([35682](https://github.com/WordPress/gutenberg/pull/35682))
-- Support "any" step in NumberControl and RangeControl. ([34542](https://github.com/WordPress/gutenberg/pull/34542))
-- ToggleGroupControl: Allow custom aria-label. ([35423](https://github.com/WordPress/gutenberg/pull/35423))
-- Try: Remove segmented control vertical separators. ([35497](https://github.com/WordPress/gutenberg/pull/35497))
-- Update `Navigator` styling to facilitate sticky positioning. ([35518](https://github.com/WordPress/gutenberg/pull/35518))
-- Update the global styles sidebar's root view to use Card components. ([35547](https://github.com/WordPress/gutenberg/pull/35547))
+-   Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. ([35371](https://github.com/WordPress/gutenberg/pull/35371))
+-   Allow local directories to be passed to --template as relative paths. ([35645](https://github.com/WordPress/gutenberg/pull/35645))
+-   Test Setup: Add more-complete mocks of common timer functions. ([35368](https://github.com/WordPress/gutenberg/pull/35368))
+
+#### Block Library
+
+-   Add basic example to site logo block. ([35588](https://github.com/WordPress/gutenberg/pull/35588))
+-   Add basic example to site-title block. ([35590](https://github.com/WordPress/gutenberg/pull/35590))
+-   Add fontStyle control to Site Tagline block. ([35507](https://github.com/WordPress/gutenberg/pull/35507))
+-   Add spacing controls to the featured image block. ([35775](https://github.com/WordPress/gutenberg/pull/35775))
+-   Add wide + full support to the site tagline block. ([35589](https://github.com/WordPress/gutenberg/pull/35589))
+-   Added a "plain" style for quote blocks. ([29856](https://github.com/WordPress/gutenberg/pull/29856))
+-   Autogenerate heading anchors. ([30825](https://github.com/WordPress/gutenberg/pull/30825))
+-   Comment Content Block: Add typography, color and padding support. ([35183](https://github.com/WordPress/gutenberg/pull/35183))
+-   Cover block: Add option to set opacity when background colour used. ([35065](https://github.com/WordPress/gutenberg/pull/35065))
+-   Cover block: Allow setting the height from the placeholder state. ([35068](https://github.com/WordPress/gutenberg/pull/35068))
+-   Embed: Add Pinterest as an embed provider. ([34895](https://github.com/WordPress/gutenberg/pull/34895))
+-   Enable always on burger menu for responsive navigation menus. ([35568](https://github.com/WordPress/gutenberg/pull/35568))
+-   Enable slash inserter for heading, list, and quote. ([35360](https://github.com/WordPress/gutenberg/pull/35360))
+-   Post editor: Add some top margin. ([35717](https://github.com/WordPress/gutenberg/pull/35717))
+-   Try: Site Logo placeholder tweaks. ([35397](https://github.com/WordPress/gutenberg/pull/35397))
+-   [Block: Post comment date]: Add link setting and block supports. ([35112](https://github.com/WordPress/gutenberg/pull/35112))
+-   [Categories]: Add support for showing only top level categories. ([35726](https://github.com/WordPress/gutenberg/pull/35726))
+
+#### Components
+
+-   Fix some issues on the color picker component; Remove tinycolor2;. ([35562](https://github.com/WordPress/gutenberg/pull/35562))
+-   Iterate on the design of the colors and gradients panel. ([35535](https://github.com/WordPress/gutenberg/pull/35535))
+-   Storybook: Add RTL switcher to toolbar. ([35711](https://github.com/WordPress/gutenberg/pull/35711))
+-   Storybook: Enable Controls and disable Knobs by default. ([35682](https://github.com/WordPress/gutenberg/pull/35682))
+-   Support "any" step in NumberControl and RangeControl. ([34542](https://github.com/WordPress/gutenberg/pull/34542))
+-   ToggleGroupControl: Allow custom aria-label. ([35423](https://github.com/WordPress/gutenberg/pull/35423))
+-   Try: Remove segmented control vertical separators. ([35497](https://github.com/WordPress/gutenberg/pull/35497))
+-   Update `Navigator` styling to facilitate sticky positioning. ([35518](https://github.com/WordPress/gutenberg/pull/35518))
+-   Update the global styles sidebar's root view to use Card components. ([35547](https://github.com/WordPress/gutenberg/pull/35547))
 
 #### Themes
-- Enable theme supports automatically for FSE theme. ([35593](https://github.com/WordPress/gutenberg/pull/35593))
-- Remove default padding/margin on the body of the page and editor canvas. ([35421](https://github.com/WordPress/gutenberg/pull/35421))
-- Support title in templateParts. ([35626](https://github.com/WordPress/gutenberg/pull/35626))
+
+-   Enable theme supports automatically for FSE theme. ([35593](https://github.com/WordPress/gutenberg/pull/35593))
+-   Remove default padding/margin on the body of the page and editor canvas. ([35421](https://github.com/WordPress/gutenberg/pull/35421))
+-   Support title in templateParts. ([35626](https://github.com/WordPress/gutenberg/pull/35626))
 
 #### Design Tools
-- Add spacing controls to all heading blocks. ([35772](https://github.com/WordPress/gutenberg/pull/35772))
-- ToolsPanel: Switch to plus icon when no controls present in panel body. ([34107](https://github.com/WordPress/gutenberg/pull/34107))
+
+-   Add spacing controls to all heading blocks. ([35772](https://github.com/WordPress/gutenberg/pull/35772))
+-   ToolsPanel: Switch to plus icon when no controls present in panel body. ([34107](https://github.com/WordPress/gutenberg/pull/34107))
 
 #### Patterns
-- Increase number of items per page for default Query Loop Block. ([35603](https://github.com/WordPress/gutenberg/pull/35603))
-- [Patterns]: Featured patterns from pattern directory. ([35115](https://github.com/WordPress/gutenberg/pull/35115))
+
+-   Increase number of items per page for default Query Loop Block. ([35603](https://github.com/WordPress/gutenberg/pull/35603))
+-   [Patterns]: Featured patterns from pattern directory. ([35115](https://github.com/WordPress/gutenberg/pull/35115))
 
 #### Global Styles
-- Extract the three color panels to their own global styles view. ([35400](https://github.com/WordPress/gutenberg/pull/35400))
-- Move the global styles reset action to a dropdown menu. ([35559](https://github.com/WordPress/gutenberg/pull/35559))
+
+-   Extract the three color panels to their own global styles view. ([35400](https://github.com/WordPress/gutenberg/pull/35400))
+-   Move the global styles reset action to a dropdown menu. ([35559](https://github.com/WordPress/gutenberg/pull/35559))
 
 #### List View
-- Show ellipsis menu in the List View. ([35170](https://github.com/WordPress/gutenberg/pull/35170))
+
+-   Show ellipsis menu in the List View. ([35170](https://github.com/WordPress/gutenberg/pull/35170))
 
 #### REST API
-- Gallery Block: Get media data in a single request. ([34389](https://github.com/WordPress/gutenberg/pull/34389))
 
+-   Gallery Block: Get media data in a single request. ([34389](https://github.com/WordPress/gutenberg/pull/34389))
 
 ### New APIs
 
-- Add PascalCase slug to create-block template strings. ([35462](https://github.com/WordPress/gutenberg/pull/35462))
-
+-   Add PascalCase slug to create-block template strings. ([35462](https://github.com/WordPress/gutenberg/pull/35462))
 
 ### Bug Fixes
 
-- Constrained tabbing: Simplify. ([34836](https://github.com/WordPress/gutenberg/pull/34836))
-- Fix HelpHub link i18n for page-jumps. ([35404](https://github.com/WordPress/gutenberg/pull/35404))
-- Fix invisible bottom sheet backdrop on Android. ([35557](https://github.com/WordPress/gutenberg/pull/35557))
-- Fix overflowing content for native Help screen. ([35552](https://github.com/WordPress/gutenberg/pull/35552))
-- Fix sibling inserter animation. ([35729](https://github.com/WordPress/gutenberg/pull/35729))
-- Fix template part block untranslated strings. ([35715](https://github.com/WordPress/gutenberg/pull/35715))
-- Fix updating the block list after block removal. ([35721](https://github.com/WordPress/gutenberg/pull/35721))
-- Fix: Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup. ([35433](https://github.com/WordPress/gutenberg/pull/35433))
-- Fixed condition to show separator correctly. ([35409](https://github.com/WordPress/gutenberg/pull/35409))
-- Popover: Fix __unstableBoundaryParent. ([35082](https://github.com/WordPress/gutenberg/pull/35082))
-- Rich text: Fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
-- Saving post: Transparent disabled button. ([35542](https://github.com/WordPress/gutenberg/pull/35542))
+-   Constrained tabbing: Simplify. ([34836](https://github.com/WordPress/gutenberg/pull/34836))
+-   Fix HelpHub link i18n for page-jumps. ([35404](https://github.com/WordPress/gutenberg/pull/35404))
+-   Fix invisible bottom sheet backdrop on Android. ([35557](https://github.com/WordPress/gutenberg/pull/35557))
+-   Fix overflowing content for native Help screen. ([35552](https://github.com/WordPress/gutenberg/pull/35552))
+-   Fix sibling inserter animation. ([35729](https://github.com/WordPress/gutenberg/pull/35729))
+-   Fix template part block untranslated strings. ([35715](https://github.com/WordPress/gutenberg/pull/35715))
+-   Fix updating the block list after block removal. ([35721](https://github.com/WordPress/gutenberg/pull/35721))
+-   Fix: Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup. ([35433](https://github.com/WordPress/gutenberg/pull/35433))
+-   Fixed condition to show separator correctly. ([35409](https://github.com/WordPress/gutenberg/pull/35409))
+-   Popover: Fix \_\_unstableBoundaryParent. ([35082](https://github.com/WordPress/gutenberg/pull/35082))
+-   Rich text: Fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
+-   Saving post: Transparent disabled button. ([35542](https://github.com/WordPress/gutenberg/pull/35542))
 
 #### Block Library
-- Block Settings: Don't render 'Move to' if the block cannot be moved. ([35463](https://github.com/WordPress/gutenberg/pull/35463))
-- Cover block: Update placeholder minHeight style to support non-px units. ([35614](https://github.com/WordPress/gutenberg/pull/35614))
-- Cover: Update 'templateLock' attribute. ([35671](https://github.com/WordPress/gutenberg/pull/35671))
-- Featured Image: Center placeholder chip contents. ([35417](https://github.com/WordPress/gutenberg/pull/35417))
-- Fix site logo block on dark backgrounds. ([35718](https://github.com/WordPress/gutenberg/pull/35718))
-- Heading: Fix undo/redo "trap". ([35767](https://github.com/WordPress/gutenberg/pull/35767))
-- Heading: Remove anchor map when block unmounts. ([35761](https://github.com/WordPress/gutenberg/pull/35761))
+
+-   Block Settings: Don't render 'Move to' if the block cannot be moved. ([35463](https://github.com/WordPress/gutenberg/pull/35463))
+-   Cover block: Update placeholder minHeight style to support non-px units. ([35614](https://github.com/WordPress/gutenberg/pull/35614))
+-   Cover: Update 'templateLock' attribute. ([35671](https://github.com/WordPress/gutenberg/pull/35671))
+-   Featured Image: Center placeholder chip contents. ([35417](https://github.com/WordPress/gutenberg/pull/35417))
+-   Fix site logo block on dark backgrounds. ([35718](https://github.com/WordPress/gutenberg/pull/35718))
+-   Heading: Fix undo/redo "trap". ([35767](https://github.com/WordPress/gutenberg/pull/35767))
+-   Heading: Remove anchor map when block unmounts. ([35761](https://github.com/WordPress/gutenberg/pull/35761))
 
 #### Components
-- Add shortcut provider. ([35652](https://github.com/WordPress/gutenberg/pull/35652))
-- Fix `ToggleGroupControlOption` not passing `ref` to the underlying element. ([35546](https://github.com/WordPress/gutenberg/pull/35546))
-- For Tooltips, prevent emitting events to child elements if they are disabled. ([35254](https://github.com/WordPress/gutenberg/pull/35254))
-- Hide horizontal overflow in `Navigator`. ([35332](https://github.com/WordPress/gutenberg/pull/35332))
-- RawHTML component: Allow multiple children. ([35532](https://github.com/WordPress/gutenberg/pull/35532))
-- Remove extra comma character from Tooltip when underlying component is disabled. ([35247](https://github.com/WordPress/gutenberg/pull/35247))
-- [ToggleGroupControl]: Fix visual state when no option is selected. ([35545](https://github.com/WordPress/gutenberg/pull/35545))
+
+-   Add shortcut provider. ([35652](https://github.com/WordPress/gutenberg/pull/35652))
+-   Fix `ToggleGroupControlOption` not passing `ref` to the underlying element. ([35546](https://github.com/WordPress/gutenberg/pull/35546))
+-   For Tooltips, prevent emitting events to child elements if they are disabled. ([35254](https://github.com/WordPress/gutenberg/pull/35254))
+-   Hide horizontal overflow in `Navigator`. ([35332](https://github.com/WordPress/gutenberg/pull/35332))
+-   RawHTML component: Allow multiple children. ([35532](https://github.com/WordPress/gutenberg/pull/35532))
+-   Remove extra comma character from Tooltip when underlying component is disabled. ([35247](https://github.com/WordPress/gutenberg/pull/35247))
+-   [ToggleGroupControl]: Fix visual state when no option is selected. ([35545](https://github.com/WordPress/gutenberg/pull/35545))
 
 #### Themes
-- Custom Templates: Use "title" from the theme.json. ([35592](https://github.com/WordPress/gutenberg/pull/35592))
-- Elements block support: Fix link color rendering on site front end. ([35446](https://github.com/WordPress/gutenberg/pull/35446))
-- Move the link color styles to the footer. ([35425](https://github.com/WordPress/gutenberg/pull/35425))
-- Reset margin for all children of flow layouts. ([35426](https://github.com/WordPress/gutenberg/pull/35426))
+
+-   Custom Templates: Use "title" from the theme.json. ([35592](https://github.com/WordPress/gutenberg/pull/35592))
+-   Elements block support: Fix link color rendering on site front end. ([35446](https://github.com/WordPress/gutenberg/pull/35446))
+-   Move the link color styles to the footer. ([35425](https://github.com/WordPress/gutenberg/pull/35425))
+-   Reset margin for all children of flow layouts. ([35426](https://github.com/WordPress/gutenberg/pull/35426))
 
 #### Template Editor
-- FSE: Use slug as template parts area item key. ([35796](https://github.com/WordPress/gutenberg/pull/35796))
-- Fix missing titles in general areas. ([35657](https://github.com/WordPress/gutenberg/pull/35657))
+
+-   FSE: Use slug as template parts area item key. ([35796](https://github.com/WordPress/gutenberg/pull/35796))
+-   Fix missing titles in general areas. ([35657](https://github.com/WordPress/gutenberg/pull/35657))
 
 #### Block API
-- Blocks: Apply the most recent filters to previously registered blocks. ([34299](https://github.com/WordPress/gutenberg/pull/34299))
-- Fix class serialization of font-size and colors in dynamic blocks that use block supports. ([35751](https://github.com/WordPress/gutenberg/pull/35751))
+
+-   Blocks: Apply the most recent filters to previously registered blocks. ([34299](https://github.com/WordPress/gutenberg/pull/34299))
+-   Fix class serialization of font-size and colors in dynamic blocks that use block supports. ([35751](https://github.com/WordPress/gutenberg/pull/35751))
 
 #### Design Tools
-- Border Radius Control: Fix undefined value on first click into RangeControl. ([35651](https://github.com/WordPress/gutenberg/pull/35651))
+
+-   Border Radius Control: Fix undefined value on first click into RangeControl. ([35651](https://github.com/WordPress/gutenberg/pull/35651))
 
 #### Block Editor
-- Inserter: Fix gap between Search and Tabs. ([35537](https://github.com/WordPress/gutenberg/pull/35537))
+
+-   Inserter: Fix gap between Search and Tabs. ([35537](https://github.com/WordPress/gutenberg/pull/35537))
 
 #### REST API
-- Fix preloading middleware referencing stale data for OPTIONS requests. ([35527](https://github.com/WordPress/gutenberg/pull/35527))
+
+-   Fix preloading middleware referencing stale data for OPTIONS requests. ([35527](https://github.com/WordPress/gutenberg/pull/35527))
 
 #### List View
-- Fix expand and collapsing when the icon is clicked. ([35526](https://github.com/WordPress/gutenberg/pull/35526))
+
+-   Fix expand and collapsing when the icon is clicked. ([35526](https://github.com/WordPress/gutenberg/pull/35526))
 
 #### Navigation Screen
-- Navigation: Preload more API requests. ([35402](https://github.com/WordPress/gutenberg/pull/35402))
 
+-   Navigation: Preload more API requests. ([35402](https://github.com/WordPress/gutenberg/pull/35402))
 
 ### Performance
 
 #### Global Styles
-- Pass only the data the site editor uses. ([35458](https://github.com/WordPress/gutenberg/pull/35458))
-- Use a context provider for global styles configuration. ([35622](https://github.com/WordPress/gutenberg/pull/35622))
+
+-   Pass only the data the site editor uses. ([35458](https://github.com/WordPress/gutenberg/pull/35458))
+-   Use a context provider for global styles configuration. ([35622](https://github.com/WordPress/gutenberg/pull/35622))
 
 #### CSS & Styling
-- Remove font size classes that are enqueued in the global stylesheet. ([35182](https://github.com/WordPress/gutenberg/pull/35182))
+
+-   Remove font size classes that are enqueued in the global stylesheet. ([35182](https://github.com/WordPress/gutenberg/pull/35182))
 
 #### Block API
-- Allow more than 1 block stylesheets. ([32510](https://github.com/WordPress/gutenberg/pull/32510))
 
+-   Allow more than 1 block stylesheets. ([32510](https://github.com/WordPress/gutenberg/pull/32510))
 
 ### Experiments
 
 #### Global Styles
-- Allow users to store duotone data. ([35318](https://github.com/WordPress/gutenberg/pull/35318))
-- FSE: Allow child theme.json to be merged with parent theme.json. ([35459](https://github.com/WordPress/gutenberg/pull/35459))
-- Fix presets that use a callback to validate user data. ([35255](https://github.com/WordPress/gutenberg/pull/35255))
-- Font family: Switch from CSS Custom Property to classes. ([31910](https://github.com/WordPress/gutenberg/pull/31910))
-- Update descriptions for the different screens under global styles. ([35429](https://github.com/WordPress/gutenberg/pull/35429))
-- Use text color to render the Aa preview in global styles. ([35631](https://github.com/WordPress/gutenberg/pull/35631))
+
+-   Allow users to store duotone data. ([35318](https://github.com/WordPress/gutenberg/pull/35318))
+-   FSE: Allow child theme.json to be merged with parent theme.json. ([35459](https://github.com/WordPress/gutenberg/pull/35459))
+-   Fix presets that use a callback to validate user data. ([35255](https://github.com/WordPress/gutenberg/pull/35255))
+-   Font family: Switch from CSS Custom Property to classes. ([31910](https://github.com/WordPress/gutenberg/pull/31910))
+-   Update descriptions for the different screens under global styles. ([35429](https://github.com/WordPress/gutenberg/pull/35429))
+-   Use text color to render the Aa preview in global styles. ([35631](https://github.com/WordPress/gutenberg/pull/35631))
 
 #### Block Library
-- Navigation: Fix issue with space-between. ([35722](https://github.com/WordPress/gutenberg/pull/35722))
-- Submenu item paddings & fixes. ([35716](https://github.com/WordPress/gutenberg/pull/35716))
-- Try: Fix navigation gap & padding issues. ([35752](https://github.com/WordPress/gutenberg/pull/35752))
-- Try: Remove color inheritance specificity. ([35725](https://github.com/WordPress/gutenberg/pull/35725))
+
+-   Navigation: Fix issue with space-between. ([35722](https://github.com/WordPress/gutenberg/pull/35722))
+-   Submenu item paddings & fixes. ([35716](https://github.com/WordPress/gutenberg/pull/35716))
+-   Try: Fix navigation gap & padding issues. ([35752](https://github.com/WordPress/gutenberg/pull/35752))
+-   Try: Remove color inheritance specificity. ([35725](https://github.com/WordPress/gutenberg/pull/35725))
 
 #### Navigation Screen
-- Use new core functions in menu items REST API. ([35648](https://github.com/WordPress/gutenberg/pull/35648))
+
+-   Use new core functions in menu items REST API. ([35648](https://github.com/WordPress/gutenberg/pull/35648))
 
 #### Full Site Editing
-- Try: Remove dotted ancestor border. ([35637](https://github.com/WordPress/gutenberg/pull/35637))
+
+-   Try: Remove dotted ancestor border. ([35637](https://github.com/WordPress/gutenberg/pull/35637))
 
 #### Design Tools
-- Navigation Block: Add block gap support. ([35277](https://github.com/WordPress/gutenberg/pull/35277))
+
+-   Navigation Block: Add block gap support. ([35277](https://github.com/WordPress/gutenberg/pull/35277))
 
 #### Themes
-- CSS: Add a reset for image heights. ([30092](https://github.com/WordPress/gutenberg/pull/30092))
 
+-   CSS: Add a reset for image heights. ([30092](https://github.com/WordPress/gutenberg/pull/30092))
 
 ### Documentation
 
-- Add readme for SkipToSelectedBlock component. ([32958](https://github.com/WordPress/gutenberg/pull/32958))
-- Added Table of Contents to FAQ page. ([35455](https://github.com/WordPress/gutenberg/pull/35455))
-- Added missing documentation for the `wrapperProps` property for the `BlockListBlock` component returned by the `editor.blockListEdit` filter. ([26961](https://github.com/WordPress/gutenberg/pull/26961))
-- Docs: Add section on using theme.json schema. ([35739](https://github.com/WordPress/gutenberg/pull/35739))
-- Docs: CustomRadius - Remove plugin only text. ([35582](https://github.com/WordPress/gutenberg/pull/35582))
-- Docs: Update block categories. ([35523](https://github.com/WordPress/gutenberg/pull/35523))
-- Fix markdown highlighting on components CONTRIBUTING.md. ([35633](https://github.com/WordPress/gutenberg/pull/35633))
-- Handbook: Add categories to TOC to help digest the FAQ. ([35519](https://github.com/WordPress/gutenberg/pull/35519))
-- Update README for SelectControl. ([28811](https://github.com/WordPress/gutenberg/pull/28811))
-- Update `npm run build` command for developing with Gutenberg locally. ([35681](https://github.com/WordPress/gutenberg/pull/35681))
-- Update default value of the viewportWidth attribute in documentation. ([35659](https://github.com/WordPress/gutenberg/pull/35659))
-- Update documentation and readme post merge of #35645. ([35679](https://github.com/WordPress/gutenberg/pull/35679))
+-   Add readme for SkipToSelectedBlock component. ([32958](https://github.com/WordPress/gutenberg/pull/32958))
+-   Added Table of Contents to FAQ page. ([35455](https://github.com/WordPress/gutenberg/pull/35455))
+-   Added missing documentation for the `wrapperProps` property for the `BlockListBlock` component returned by the `editor.blockListEdit` filter. ([26961](https://github.com/WordPress/gutenberg/pull/26961))
+-   Docs: Add section on using theme.json schema. ([35739](https://github.com/WordPress/gutenberg/pull/35739))
+-   Docs: CustomRadius - Remove plugin only text. ([35582](https://github.com/WordPress/gutenberg/pull/35582))
+-   Docs: Update block categories. ([35523](https://github.com/WordPress/gutenberg/pull/35523))
+-   Fix markdown highlighting on components CONTRIBUTING.md. ([35633](https://github.com/WordPress/gutenberg/pull/35633))
+-   Handbook: Add categories to TOC to help digest the FAQ. ([35519](https://github.com/WordPress/gutenberg/pull/35519))
+-   Update README for SelectControl. ([28811](https://github.com/WordPress/gutenberg/pull/28811))
+-   Update `npm run build` command for developing with Gutenberg locally. ([35681](https://github.com/WordPress/gutenberg/pull/35681))
+-   Update default value of the viewportWidth attribute in documentation. ([35659](https://github.com/WordPress/gutenberg/pull/35659))
+-   Update documentation and readme post merge of #35645. ([35679](https://github.com/WordPress/gutenberg/pull/35679))
 
 #### Components
-- Add CHANGELOG entry for the fieldset removal from `FontAppearanceControl`. ([35585](https://github.com/WordPress/gutenberg/pull/35585))
-- Add entry to CHANGELOG regarding new ColorPicker. ([35486](https://github.com/WordPress/gutenberg/pull/35486))
-- Mark `CustomSelectControl` `hint` option as experimental. ([35673](https://github.com/WordPress/gutenberg/pull/35673))
-- Polish `ToggleGroupControl`. ([35600](https://github.com/WordPress/gutenberg/pull/35600))
-- Small tweaks to contributing guidelines. ([35620](https://github.com/WordPress/gutenberg/pull/35620))
 
+-   Add CHANGELOG entry for the fieldset removal from `FontAppearanceControl`. ([35585](https://github.com/WordPress/gutenberg/pull/35585))
+-   Add entry to CHANGELOG regarding new ColorPicker. ([35486](https://github.com/WordPress/gutenberg/pull/35486))
+-   Mark `CustomSelectControl` `hint` option as experimental. ([35673](https://github.com/WordPress/gutenberg/pull/35673))
+-   Polish `ToggleGroupControl`. ([35600](https://github.com/WordPress/gutenberg/pull/35600))
+-   Small tweaks to contributing guidelines. ([35620](https://github.com/WordPress/gutenberg/pull/35620))
 
 ### Code Quality
 
-- Convert `usePrevious` hook to TypeScript. ([35597](https://github.com/WordPress/gutenberg/pull/35597))
-- Fix odd usage of transform-styles wrap function (and tighten types). ([23599](https://github.com/WordPress/gutenberg/pull/23599))
-- Update Callers to handle when getBlockType return undefined. ([35097](https://github.com/WordPress/gutenberg/pull/35097))
-- Use new color picker props. ([35566](https://github.com/WordPress/gutenberg/pull/35566))
+-   Convert `usePrevious` hook to TypeScript. ([35597](https://github.com/WordPress/gutenberg/pull/35597))
+-   Fix odd usage of transform-styles wrap function (and tighten types). ([23599](https://github.com/WordPress/gutenberg/pull/23599))
+-   Update Callers to handle when getBlockType return undefined. ([35097](https://github.com/WordPress/gutenberg/pull/35097))
+-   Use new color picker props. ([35566](https://github.com/WordPress/gutenberg/pull/35566))
 
 #### Components
-- Chore: Remove tinycolor object usage from the gradient picker. ([35544](https://github.com/WordPress/gutenberg/pull/35544))
-- FontAppearanceControl: Remove `fieldset` wrapper. ([35461](https://github.com/WordPress/gutenberg/pull/35461))
-- Polish ResizableBox and convert it to TypeScript. ([35062](https://github.com/WordPress/gutenberg/pull/35062))
-- Remove duplicated className in Card component. ([35333](https://github.com/WordPress/gutenberg/pull/35333))
-- Remove unused `useJumpStep` utility. ([35561](https://github.com/WordPress/gutenberg/pull/35561))
-- Replace the color picker component with the new version. ([35220](https://github.com/WordPress/gutenberg/pull/35220))
-- ToolsPanel: Remove hardcoded classnames. ([35415](https://github.com/WordPress/gutenberg/pull/35415))
-- UnitControl component: Refactor JSX components to TypeScript. ([35281](https://github.com/WordPress/gutenberg/pull/35281))
+
+-   Chore: Remove tinycolor object usage from the gradient picker. ([35544](https://github.com/WordPress/gutenberg/pull/35544))
+-   FontAppearanceControl: Remove `fieldset` wrapper. ([35461](https://github.com/WordPress/gutenberg/pull/35461))
+-   Polish ResizableBox and convert it to TypeScript. ([35062](https://github.com/WordPress/gutenberg/pull/35062))
+-   Remove duplicated className in Card component. ([35333](https://github.com/WordPress/gutenberg/pull/35333))
+-   Remove unused `useJumpStep` utility. ([35561](https://github.com/WordPress/gutenberg/pull/35561))
+-   Replace the color picker component with the new version. ([35220](https://github.com/WordPress/gutenberg/pull/35220))
+-   ToolsPanel: Remove hardcoded classnames. ([35415](https://github.com/WordPress/gutenberg/pull/35415))
+-   UnitControl component: Refactor JSX components to TypeScript. ([35281](https://github.com/WordPress/gutenberg/pull/35281))
 
 #### Global Styles
-- Child theme.json: Update test to better capture that childs can update single parts in isolation. ([35759](https://github.com/WordPress/gutenberg/pull/35759))
-- Refactor how the Global Styles access and sets data. ([35264](https://github.com/WordPress/gutenberg/pull/35264))
+
+-   Child theme.json: Update test to better capture that childs can update single parts in isolation. ([35759](https://github.com/WordPress/gutenberg/pull/35759))
+-   Refactor how the Global Styles access and sets data. ([35264](https://github.com/WordPress/gutenberg/pull/35264))
 
 #### Design Tools
-- Border Radius Control: Add fallback px unit and add utils tests. ([35786](https://github.com/WordPress/gutenberg/pull/35786))
+
+-   Border Radius Control: Add fallback px unit and add utils tests. ([35786](https://github.com/WordPress/gutenberg/pull/35786))
 
 #### Post Editor
-- Fix-up Post Editor’s preferences modal. ([35369](https://github.com/WordPress/gutenberg/pull/35369))
 
+-   Fix-up Post Editor’s preferences modal. ([35369](https://github.com/WordPress/gutenberg/pull/35369))
 
 ### Tools
 
-- Scripts: Remove inject polyfill by default. ([35436](https://github.com/WordPress/gutenberg/pull/35436))
+-   Scripts: Remove inject polyfill by default. ([35436](https://github.com/WordPress/gutenberg/pull/35436))
 
 #### Testing
-- Fix taxonomies flaky tests. ([35534](https://github.com/WordPress/gutenberg/pull/35534))
-- Performance tests: Add more detailed loading metrics. ([32237](https://github.com/WordPress/gutenberg/pull/32237))
-- Try another fix for flaky nav test. ([35443](https://github.com/WordPress/gutenberg/pull/35443))
-- [Automated Testing]: Fix preview end-to-end tests. ([35565](https://github.com/WordPress/gutenberg/pull/35565))
+
+-   Fix taxonomies flaky tests. ([35534](https://github.com/WordPress/gutenberg/pull/35534))
+-   Performance tests: Add more detailed loading metrics. ([32237](https://github.com/WordPress/gutenberg/pull/32237))
+-   Try another fix for flaky nav test. ([35443](https://github.com/WordPress/gutenberg/pull/35443))
+-   [Automated Testing]: Fix preview end-to-end tests. ([35565](https://github.com/WordPress/gutenberg/pull/35565))
 
 #### Build Tooling
-- Build Workflow: Revert version bump if build job fails. ([33239](https://github.com/WordPress/gutenberg/pull/33239))
-- Updates react-native-aztec android to use S3 dependency for Aztec editor. ([35606](https://github.com/WordPress/gutenberg/pull/35606))
+
+-   Build Workflow: Revert version bump if build job fails. ([33239](https://github.com/WordPress/gutenberg/pull/33239))
+-   Updates react-native-aztec android to use S3 dependency for Aztec editor. ([35606](https://github.com/WordPress/gutenberg/pull/35606))
 
 #### Components
-- Panel: Improve unit tests. ([35658](https://github.com/WordPress/gutenberg/pull/35658))
 
+-   Panel: Improve unit tests. ([35658](https://github.com/WordPress/gutenberg/pull/35658))
 
 ### Various
 
-- Add the storybook link to the `/components` README. ([35493](https://github.com/WordPress/gutenberg/pull/35493))
-- Allow the specification of blocks allowed within columns. ([35342](https://github.com/WordPress/gutenberg/pull/35342))
-- Enable/skipped metabox test. ([35594](https://github.com/WordPress/gutenberg/pull/35594))
-- FSE: Coding standards: DOCTYPE should be the first line/character of any HTML document. ([35442](https://github.com/WordPress/gutenberg/pull/35442))
-- Mobile - Update macos version from latest to 11. ([35770](https://github.com/WordPress/gutenberg/pull/35770))
-- Remove: Tinycolor usage from component color utils. ([35553](https://github.com/WordPress/gutenberg/pull/35553))
-- Storybook: Add story for TypographyPanel. ([35293](https://github.com/WordPress/gutenberg/pull/35293))
-- Translation note for Home/end to avoid mistranslations. ([35669](https://github.com/WordPress/gutenberg/pull/35669))
-- Unify theme block placeholder content. ([35517](https://github.com/WordPress/gutenberg/pull/35517))
-- Update DateTimePicker component README to remove reference to isDayHighlighted callback. ([35363](https://github.com/WordPress/gutenberg/pull/35363))
-- [Block: Post comment author]: Add link settings and block supports. ([35595](https://github.com/WordPress/gutenberg/pull/35595))
-- feat(SelectControl): Add children prop. ([29540](https://github.com/WordPress/gutenberg/pull/29540))
-
-#### Block Library
-- Add allowedBlocks and TemplateLock attributes in Cover Block. ([31326](https://github.com/WordPress/gutenberg/pull/31326))
-- Cover Block: Use the description in the placeholder. ([34970](https://github.com/WordPress/gutenberg/pull/34970))
-- Cover block: Change dimRatio to 50 if media added and dimRatio is set to 100. ([35789](https://github.com/WordPress/gutenberg/pull/35789))
-- Cover block: Only use white text when the background of the cover block is dark. ([33541](https://github.com/WordPress/gutenberg/pull/33541))
-- Enable inheritance in search block. ([35723](https://github.com/WordPress/gutenberg/pull/35723))
-- Featured image block and Image blocks: Remove descendent space. ([35466](https://github.com/WordPress/gutenberg/pull/35466))
-- Page List: Show empty placeholder if no items. ([35441](https://github.com/WordPress/gutenberg/pull/35441))
-- Polish logos only style. ([35586](https://github.com/WordPress/gutenberg/pull/35586))
-- Quote: Update deprecation to expect style block supports. ([35615](https://github.com/WordPress/gutenberg/pull/35615))
-- Remove deprecated classnames from Navigation Link block. ([35358](https://github.com/WordPress/gutenberg/pull/35358))
-- Site Logo: Move Reset button to the Replace menu dropdown. ([35372](https://github.com/WordPress/gutenberg/pull/35372))
-- Site Logo: Remove "Reset" button icon. ([35434](https://github.com/WordPress/gutenberg/pull/35434))
-- Social Icons: Add top and bottom margin support. ([35374](https://github.com/WordPress/gutenberg/pull/35374))
-- [Buttons block]: Add gap and vertical margin support. ([34546](https://github.com/WordPress/gutenberg/pull/34546))
-
-#### Components
-- Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. ([27374](https://github.com/WordPress/gutenberg/pull/27374))
-- Storybook: Remove outdated decorator configuration. ([35678](https://github.com/WordPress/gutenberg/pull/35678))
-- Update range control metrics. ([35540](https://github.com/WordPress/gutenberg/pull/35540))
-- [Components] Update FontSize control. ([35395](https://github.com/WordPress/gutenberg/pull/35395))
+-   Add the storybook link to the `/components` README. ([35493](https://github.com/WordPress/gutenberg/pull/35493))
+-   Allow the specification of blocks allowed within columns. ([35342](https://github.com/WordPress/gutenberg/pull/35342))
+-   Enable/skipped metabox test. ([35594](https://github.com/WordPress/gutenberg/pull/35594))
+-   FSE: Coding standards: DOCTYPE should be the first line/character of any HTML document. ([35442](https://github.com/WordPress/gutenberg/pull/35442))
+-   Mobile - Update macos version from latest to 11. ([35770](https://github.com/WordPress/gutenberg/pull/35770))
+-   Remove: Tinycolor usage from component color utils. ([35553](https://github.com/WordPress/gutenberg/pull/35553))
+-   Storybook: Add story for TypographyPanel. ([35293](https://github.com/WordPress/gutenberg/pull/35293))
+-   Translation note for Home/end to avoid mistranslations. ([35669](https://github.com/WordPress/gutenberg/pull/35669))
+-   Unify theme block placeholder content. ([35517](https://github.com/WordPress/gutenberg/pull/35517))
+-   Update DateTimePicker component README to remove reference to isDayHighlighted callback. ([35363](https://github.com/WordPress/gutenberg/pull/35363))
+-   [Block: Post comment author]: Add link settings and block supports. ([35595](https://github.com/WordPress/gutenberg/pull/35595))
+-   feat(SelectControl): Add children prop. ([29540](https://github.com/WordPress/gutenberg/pull/29540))
+
+#### Block Library
+
+-   Add allowedBlocks and TemplateLock attributes in Cover Block. ([31326](https://github.com/WordPress/gutenberg/pull/31326))
+-   Cover Block: Use the description in the placeholder. ([34970](https://github.com/WordPress/gutenberg/pull/34970))
+-   Cover block: Change dimRatio to 50 if media added and dimRatio is set to 100. ([35789](https://github.com/WordPress/gutenberg/pull/35789))
+-   Cover block: Only use white text when the background of the cover block is dark. ([33541](https://github.com/WordPress/gutenberg/pull/33541))
+-   Enable inheritance in search block. ([35723](https://github.com/WordPress/gutenberg/pull/35723))
+-   Featured image block and Image blocks: Remove descendent space. ([35466](https://github.com/WordPress/gutenberg/pull/35466))
+-   Page List: Show empty placeholder if no items. ([35441](https://github.com/WordPress/gutenberg/pull/35441))
+-   Polish logos only style. ([35586](https://github.com/WordPress/gutenberg/pull/35586))
+-   Quote: Update deprecation to expect style block supports. ([35615](https://github.com/WordPress/gutenberg/pull/35615))
+-   Remove deprecated classnames from Navigation Link block. ([35358](https://github.com/WordPress/gutenberg/pull/35358))
+-   Site Logo: Move Reset button to the Replace menu dropdown. ([35372](https://github.com/WordPress/gutenberg/pull/35372))
+-   Site Logo: Remove "Reset" button icon. ([35434](https://github.com/WordPress/gutenberg/pull/35434))
+-   Social Icons: Add top and bottom margin support. ([35374](https://github.com/WordPress/gutenberg/pull/35374))
+-   [Buttons block]: Add gap and vertical margin support. ([34546](https://github.com/WordPress/gutenberg/pull/34546))
+
+#### Components
+
+-   Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. ([27374](https://github.com/WordPress/gutenberg/pull/27374))
+-   Storybook: Remove outdated decorator configuration. ([35678](https://github.com/WordPress/gutenberg/pull/35678))
+-   Update range control metrics. ([35540](https://github.com/WordPress/gutenberg/pull/35540))
+-   [Components] Update FontSize control. ([35395](https://github.com/WordPress/gutenberg/pull/35395))
 
 #### Template Editor
-- Add more options to template areas in template details. ([35577](https://github.com/WordPress/gutenberg/pull/35577))
-- Add template areas to template inspector. ([35239](https://github.com/WordPress/gutenberg/pull/35239))
-- Add template details to template parts. ([35444](https://github.com/WordPress/gutenberg/pull/35444))
-- Align the layout of the template card with the block card. ([35391](https://github.com/WordPress/gutenberg/pull/35391))
+
+-   Add more options to template areas in template details. ([35577](https://github.com/WordPress/gutenberg/pull/35577))
+-   Add template areas to template inspector. ([35239](https://github.com/WordPress/gutenberg/pull/35239))
+-   Add template details to template parts. ([35444](https://github.com/WordPress/gutenberg/pull/35444))
+-   Align the layout of the template card with the block card. ([35391](https://github.com/WordPress/gutenberg/pull/35391))
 
 #### Design Tools
-- Block Supports: Switch dimensions inspector controls slot to bubble virtually. ([34725](https://github.com/WordPress/gutenberg/pull/34725))
-- Inspector Controls: Resort the order of the design tools associated with styles hooks. ([35574](https://github.com/WordPress/gutenberg/pull/35574))
-- Post Date: Add more typography options. ([35422](https://github.com/WordPress/gutenberg/pull/35422))
+
+-   Block Supports: Switch dimensions inspector controls slot to bubble virtually. ([34725](https://github.com/WordPress/gutenberg/pull/34725))
+-   Inspector Controls: Resort the order of the design tools associated with styles hooks. ([35574](https://github.com/WordPress/gutenberg/pull/35574))
+-   Post Date: Add more typography options. ([35422](https://github.com/WordPress/gutenberg/pull/35422))
 
 #### Site Editor
-- Update site editor block placeholder styling. ([35513](https://github.com/WordPress/gutenberg/pull/35513))
-- Use a dark background for the site editor. ([35520](https://github.com/WordPress/gutenberg/pull/35520))
+
+-   Update site editor block placeholder styling. ([35513](https://github.com/WordPress/gutenberg/pull/35513))
+-   Use a dark background for the site editor. ([35520](https://github.com/WordPress/gutenberg/pull/35520))
 
 #### Block Editor
-- Add animations for insertion point, dropzone, and other elements. ([33132](https://github.com/WordPress/gutenberg/pull/33132))
-- Adjust Link UI visual styling. ([35414](https://github.com/WordPress/gutenberg/pull/35414))
+
+-   Add animations for insertion point, dropzone, and other elements. ([33132](https://github.com/WordPress/gutenberg/pull/33132))
+-   Adjust Link UI visual styling. ([35414](https://github.com/WordPress/gutenberg/pull/35414))
 
 #### Accessibility
-- Rich text popovers: Move to block tools to fix tab order. ([34956](https://github.com/WordPress/gutenberg/pull/34956))
-- Save button: Prevent focus loss. ([34731](https://github.com/WordPress/gutenberg/pull/34731))
+
+-   Rich text popovers: Move to block tools to fix tab order. ([34956](https://github.com/WordPress/gutenberg/pull/34956))
+-   Save button: Prevent focus loss. ([34731](https://github.com/WordPress/gutenberg/pull/34731))
 
 #### CSS & Styling
-- Block Supports: Add panel specific className. ([35793](https://github.com/WordPress/gutenberg/pull/35793))
 
-#### Documentation
-- Clarify documentation for InnerBlocks orientation prop. ([35712](https://github.com/WordPress/gutenberg/pull/35712))
+-   Block Supports: Add panel specific className. ([35793](https://github.com/WordPress/gutenberg/pull/35793))
 
-#### Themes
-- Add [data-block] to appender. ([35356](https://github.com/WordPress/gutenberg/pull/35356))
+#### Documentation
 
-#### Reusable Blocks
-- Thunkify reusable-blocks store. ([35217](https://github.com/WordPress/gutenberg/pull/35217))
+-   Clarify documentation for InnerBlocks orientation prop. ([35712](https://github.com/WordPress/gutenberg/pull/35712))
 
+#### Themes
 
+-   Add [data-block] to appender. ([35356](https://github.com/WordPress/gutenberg/pull/35356))
 
+#### Reusable Blocks
 
+-   Thunkify reusable-blocks store. ([35217](https://github.com/WordPress/gutenberg/pull/35217))
 
 = 11.7.0 =
 
+## Changelog
+
 ### Enhancements
 
 #### Accessibility
-- Adjust wording for post format suggestions. ([14124](https://github.com/WordPress/gutenberg/pull/14124))
-- Add a visually hidden label for the Search block. ([35034](https://github.com/WordPress/gutenberg/pull/35034))
-- Add an accessible label to the Back button in preferences. ([35340](https://github.com/WordPress/gutenberg/pull/35340))
-- Global Styles: Add accessible label to Back button. ([35325](https://github.com/WordPress/gutenberg/pull/35325))
-- Template title: Include a button and label text when there is no post/page title. ([35148](https://github.com/WordPress/gutenberg/pull/35148))
-
-
-#### Block Editor
-- Allow other blocks to use the slash inserter. ([35196](https://github.com/WordPress/gutenberg/pull/35196))
-- Enable ability to create Pages from the inline Link UI. ([35083](https://github.com/WordPress/gutenberg/pull/35083))
-- Polish quick inserter. ([35339](https://github.com/WordPress/gutenberg/pull/35339))
-- Remove visual clue from alignment toolbar. ([35080](https://github.com/WordPress/gutenberg/pull/35080))
-- Remove native block inserter onboarding tooltip. ([35150](https://github.com/WordPress/gutenberg/pull/35150))
-
-#### Block Library
-- Site Logo: Add duotone support. ([35344](https://github.com/WordPress/gutenberg/pull/35344))
-- Columns block: Enable blockGap and vertical margin support. ([34630](https://github.com/WordPress/gutenberg/pull/34630))
-- File Block: Only display PDF preview height `RangeControl` when embed is enabled. ([35207](https://github.com/WordPress/gutenberg/pull/35207))
-- Navigation: Add transformations from a link to other allowed nav blocks. ([34978](https://github.com/WordPress/gutenberg/pull/34978))
-- Query Loop: Include a Query Pagination option on the block variations. ([35347](https://github.com/WordPress/gutenberg/pull/35347))
-- Show "none" as an alignment option and use contextual text to clarify settings. ([34710](https://github.com/WordPress/gutenberg/pull/34710))
-- Social Links: Add block gap support. ([35236](https://github.com/WordPress/gutenberg/pull/35236))
-- Site Title: Add option to toggle home link. ([31540](https://github.com/WordPress/gutenberg/pull/31540))
-- Site title: update block description. ([34474](https://github.com/WordPress/gutenberg/pull/34474))
-- Transform Nav Links with children into Submenus. ([34831](https://github.com/WordPress/gutenberg/pull/34831))
-- Add an option for displaying the label inside the Navigation Link block. ([34952](https://github.com/WordPress/gutenberg/pull/34952))
-- Add typography settings for the Navigation Link block. ([35324](https://github.com/WordPress/gutenberg/pull/35324))
-- Add option to remove/clear logo from the Site Logo block. ([34820](https://github.com/WordPress/gutenberg/pull/34820))
+
+-   Adjust wording for post format suggestions. ([14124](https://github.com/WordPress/gutenberg/pull/14124))
+-   Add a visually hidden label for the Search block. ([35034](https://github.com/WordPress/gutenberg/pull/35034))
+-   Add an accessible label to the Back button in preferences. ([35340](https://github.com/WordPress/gutenberg/pull/35340))
+-   Global Styles: Add accessible label to Back button. ([35325](https://github.com/WordPress/gutenberg/pull/35325))
+-   Template title: Include a button and label text when there is no post/page title. ([35148](https://github.com/WordPress/gutenberg/pull/35148))
+
+#### Block Editor
+
+-   Allow other blocks to use the slash inserter. ([35196](https://github.com/WordPress/gutenberg/pull/35196))
+-   Enable ability to create Pages from the inline Link UI. ([35083](https://github.com/WordPress/gutenberg/pull/35083))
+-   Polish quick inserter. ([35339](https://github.com/WordPress/gutenberg/pull/35339))
+-   Remove visual clue from alignment toolbar. ([35080](https://github.com/WordPress/gutenberg/pull/35080))
+-   Remove native block inserter onboarding tooltip. ([35150](https://github.com/WordPress/gutenberg/pull/35150))
+
+#### Block Library
+
+-   Site Logo: Add duotone support. ([35344](https://github.com/WordPress/gutenberg/pull/35344))
+-   Columns block: Enable blockGap and vertical margin support. ([34630](https://github.com/WordPress/gutenberg/pull/34630))
+-   File Block: Only display PDF preview height `RangeControl` when embed is enabled. ([35207](https://github.com/WordPress/gutenberg/pull/35207))
+-   Navigation: Add transformations from a link to other allowed nav blocks. ([34978](https://github.com/WordPress/gutenberg/pull/34978))
+-   Query Loop: Include a Query Pagination option on the block variations. ([35347](https://github.com/WordPress/gutenberg/pull/35347))
+-   Show "none" as an alignment option and use contextual text to clarify settings. ([34710](https://github.com/WordPress/gutenberg/pull/34710))
+-   Social Links: Add block gap support. ([35236](https://github.com/WordPress/gutenberg/pull/35236))
+-   Site Title: Add option to toggle home link. ([31540](https://github.com/WordPress/gutenberg/pull/31540))
+-   Site title: update block description. ([34474](https://github.com/WordPress/gutenberg/pull/34474))
+-   Transform Nav Links with children into Submenus. ([34831](https://github.com/WordPress/gutenberg/pull/34831))
+-   Add an option for displaying the label inside the Navigation Link block. ([34952](https://github.com/WordPress/gutenberg/pull/34952))
+-   Add typography settings for the Navigation Link block. ([35324](https://github.com/WordPress/gutenberg/pull/35324))
+-   Add option to remove/clear logo from the Site Logo block. ([34820](https://github.com/WordPress/gutenberg/pull/34820))
 
 #### Core data
-- Add 'context' to the query parts type definition. ([35069](https://github.com/WordPress/gutenberg/pull/35069))
+
+-   Add 'context' to the query parts type definition. ([35069](https://github.com/WordPress/gutenberg/pull/35069))
 
 #### Components
-- Add new Navigator components and use them in the global styles sidebar. ([34904](https://github.com/WordPress/gutenberg/pull/34904))
-- Use _builtin property of classes in navigation link PHP. ([35166](https://github.com/WordPress/gutenberg/pull/35166))
-- `Item`:  Remove `isAction` and use `onClick` to decide if it should render as `button`. ([35152](https://github.com/WordPress/gutenberg/pull/35152))
-- Make tooltip delay configurable with a property. ([35246](https://github.com/WordPress/gutenberg/pull/35246))
+
+-   Add new Navigator components and use them in the global styles sidebar. ([34904](https://github.com/WordPress/gutenberg/pull/34904))
+-   Use \_builtin property of classes in navigation link PHP. ([35166](https://github.com/WordPress/gutenberg/pull/35166))
+-   `Item`: Remove `isAction` and use `onClick` to decide if it should render as `button`. ([35152](https://github.com/WordPress/gutenberg/pull/35152))
+-   Make tooltip delay configurable with a property. ([35246](https://github.com/WordPress/gutenberg/pull/35246))
 
 #### Design Tools
-- Block gap: Only render CSS variable if corresponding theme setting is enabled. ([35209](https://github.com/WordPress/gutenberg/pull/35209))
-- Format library: Add background color. ([34680](https://github.com/WordPress/gutenberg/pull/34680))
-- Update: Custom gradient picker design. ([34712](https://github.com/WordPress/gutenberg/pull/34712))
+
+-   Block gap: Only render CSS variable if corresponding theme setting is enabled. ([35209](https://github.com/WordPress/gutenberg/pull/35209))
+-   Format library: Add background color. ([34680](https://github.com/WordPress/gutenberg/pull/34680))
+-   Update: Custom gradient picker design. ([34712](https://github.com/WordPress/gutenberg/pull/34712))
 
 #### Global Styles
-- Add Padding to the root level of global styles. ([35241](https://github.com/WordPress/gutenberg/pull/35241))
-- Add duotone theme.json styles support. ([34667](https://github.com/WordPress/gutenberg/pull/34667))
-- Extract the color palette to its own global styles screen. ([35109](https://github.com/WordPress/gutenberg/pull/35109))
-- Update the rules to hide/show blocks in the global styles sidebar. ([35178](https://github.com/WordPress/gutenberg/pull/35178))
+
+-   Add Padding to the root level of global styles. ([35241](https://github.com/WordPress/gutenberg/pull/35241))
+-   Add duotone theme.json styles support. ([34667](https://github.com/WordPress/gutenberg/pull/34667))
+-   Extract the color palette to its own global styles screen. ([35109](https://github.com/WordPress/gutenberg/pull/35109))
+-   Update the rules to hide/show blocks in the global styles sidebar. ([35178](https://github.com/WordPress/gutenberg/pull/35178))
 
 #### Icons
-- Add color icon. ([35187](https://github.com/WordPress/gutenberg/pull/35187))
-- Rename globe icon to url. ([35032](https://github.com/WordPress/gutenberg/pull/35032))
+
+-   Add color icon. ([35187](https://github.com/WordPress/gutenberg/pull/35187))
+-   Rename globe icon to url. ([35032](https://github.com/WordPress/gutenberg/pull/35032))
 
 #### Site Editor
-- Remove warning box from post terms. ([35242](https://github.com/WordPress/gutenberg/pull/35242))
+
+-   Remove warning box from post terms. ([35242](https://github.com/WordPress/gutenberg/pull/35242))
 
 #### Template Editor
-- Add back button for isolated template part editor. ([34732](https://github.com/WordPress/gutenberg/pull/34732))
-- Add template areas to template details. ([35202](https://github.com/WordPress/gutenberg/pull/35202))
 
+-   Add back button for isolated template part editor. ([34732](https://github.com/WordPress/gutenberg/pull/34732))
+-   Add template areas to template details. ([35202](https://github.com/WordPress/gutenberg/pull/35202))
 
 ### Bug Fixes
 
 #### Block Editor
-- Block Editor: Fix duplicate clientIds when dragging patterns. ([35124](https://github.com/WordPress/gutenberg/pull/35124))
-- Disallow creation of empty links using Link UI directly. ([35060](https://github.com/WordPress/gutenberg/pull/35060))
-- Fix Link UI when hyperlink has an empty `href` value. ([35043](https://github.com/WordPress/gutenberg/pull/35043))
-- Fix missing border in the quick inserter. ([35307](https://github.com/WordPress/gutenberg/pull/35307))
-- Fix toggle off for Duotone control and Post Date block’s date picking control. ([35024](https://github.com/WordPress/gutenberg/pull/35024))
-- useMultiSelection: Avoid crashing editor when block refs aren't available. ([35177](https://github.com/WordPress/gutenberg/pull/35177))
-- Rich text: fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
+
+-   Block Editor: Fix duplicate clientIds when dragging patterns. ([35124](https://github.com/WordPress/gutenberg/pull/35124))
+-   Disallow creation of empty links using Link UI directly. ([35060](https://github.com/WordPress/gutenberg/pull/35060))
+-   Fix Link UI when hyperlink has an empty `href` value. ([35043](https://github.com/WordPress/gutenberg/pull/35043))
+-   Fix missing border in the quick inserter. ([35307](https://github.com/WordPress/gutenberg/pull/35307))
+-   Fix toggle off for Duotone control and Post Date block’s date picking control. ([35024](https://github.com/WordPress/gutenberg/pull/35024))
+-   useMultiSelection: Avoid crashing editor when block refs aren't available. ([35177](https://github.com/WordPress/gutenberg/pull/35177))
+-   Rich text: fix internal paste across multiline and single line instances. ([35416](https://github.com/WordPress/gutenberg/pull/35416))
 
 #### Block Library
-- Embed: Remove meetup-com from variations. ([35146](https://github.com/WordPress/gutenberg/pull/35146))
-- Featured Image: Remove descendent space. ([35273](https://github.com/WordPress/gutenberg/pull/35273))
-- Fix: Broken disabled select style in the editor area. ([35135](https://github.com/WordPress/gutenberg/pull/35135))
-- Fix native BlockAlignmentControl. ([35191](https://github.com/WordPress/gutenberg/pull/35191))
-- Gallery block: Fix Safari image sizing issue. ([35309](https://github.com/WordPress/gutenberg/pull/35309))
-- Gallery block: Fix problem with caption showing encode tags when not selected. ([35131](https://github.com/WordPress/gutenberg/pull/35131))
-- Gallery block: Unset alignment on new images to prevent it breaking layout. ([35132](https://github.com/WordPress/gutenberg/pull/35132))
-- Post Template: Remove margins from the block. ([35193](https://github.com/WordPress/gutenberg/pull/35193))
-- Post Title: Always use blockProps. ([35286](https://github.com/WordPress/gutenberg/pull/35286))
-- Post Title: Only render link element if we have a post. ([35284](https://github.com/WordPress/gutenberg/pull/35284))
-- Query Pagination: Don't render an empty container. ([35092](https://github.com/WordPress/gutenberg/pull/35092))
-- Navigation Link: Fix PHP notice in the Navigation Link block. ([34984](https://github.com/WordPress/gutenberg/pull/34984))
-- Fix Post Comment Content block's edit function. ([35190](https://github.com/WordPress/gutenberg/pull/35190))
+
+-   Embed: Remove meetup-com from variations. ([35146](https://github.com/WordPress/gutenberg/pull/35146))
+-   Featured Image: Remove descendent space. ([35273](https://github.com/WordPress/gutenberg/pull/35273))
+-   Fix: Broken disabled select style in the editor area. ([35135](https://github.com/WordPress/gutenberg/pull/35135))
+-   Fix native BlockAlignmentControl. ([35191](https://github.com/WordPress/gutenberg/pull/35191))
+-   Gallery block: Fix Safari image sizing issue. ([35309](https://github.com/WordPress/gutenberg/pull/35309))
+-   Gallery block: Fix problem with caption showing encode tags when not selected. ([35131](https://github.com/WordPress/gutenberg/pull/35131))
+-   Gallery block: Unset alignment on new images to prevent it breaking layout. ([35132](https://github.com/WordPress/gutenberg/pull/35132))
+-   Post Template: Remove margins from the block. ([35193](https://github.com/WordPress/gutenberg/pull/35193))
+-   Post Title: Always use blockProps. ([35286](https://github.com/WordPress/gutenberg/pull/35286))
+-   Post Title: Only render link element if we have a post. ([35284](https://github.com/WordPress/gutenberg/pull/35284))
+-   Query Pagination: Don't render an empty container. ([35092](https://github.com/WordPress/gutenberg/pull/35092))
+-   Navigation Link: Fix PHP notice in the Navigation Link block. ([34984](https://github.com/WordPress/gutenberg/pull/34984))
+-   Fix Post Comment Content block's edit function. ([35190](https://github.com/WordPress/gutenberg/pull/35190))
 
 #### Components
-- Color Picker: Match figma metrics. ([35039](https://github.com/WordPress/gutenberg/pull/35039))
-- Remove shift-stepping from range in RangeControl. ([35020](https://github.com/WordPress/gutenberg/pull/35020))
-- Popover: fix __unstableBoundaryParent ([35082](https://github.com/WordPress/gutenberg/pull/35082))
+
+-   Color Picker: Match figma metrics. ([35039](https://github.com/WordPress/gutenberg/pull/35039))
+-   Remove shift-stepping from range in RangeControl. ([35020](https://github.com/WordPress/gutenberg/pull/35020))
+-   Popover: fix \_\_unstableBoundaryParent ([35082](https://github.com/WordPress/gutenberg/pull/35082))
 
 #### Design Tools
-- ToolsPanelItem: Add panelId check before calling toggle methods. ([35375](https://github.com/WordPress/gutenberg/pull/35375))
+
+-   ToolsPanelItem: Add panelId check before calling toggle methods. ([35375](https://github.com/WordPress/gutenberg/pull/35375))
 
 #### Media
-- MediaUpload: Ensure current images in a gallery are selected after opening media library. ([35070](https://github.com/WordPress/gutenberg/pull/35070))
+
+-   MediaUpload: Ensure current images in a gallery are selected after opening media library. ([35070](https://github.com/WordPress/gutenberg/pull/35070))
 
 #### Post Editor
-- Fix missing save label. ([34948](https://github.com/WordPress/gutenberg/pull/34948))
-- Keyboard shortcut: Prevent post saving through keyboard if post saving locked. ([35361](https://github.com/WordPress/gutenberg/pull/35361))
+
+-   Fix missing save label. ([34948](https://github.com/WordPress/gutenberg/pull/34948))
+-   Keyboard shortcut: Prevent post saving through keyboard if post saving locked. ([35361](https://github.com/WordPress/gutenberg/pull/35361))
 
 #### REST API
-- API Fetch: Improve isMediaUploadRequest check. ([34417](https://github.com/WordPress/gutenberg/pull/34417))
-- Fix slashing when creating or updating a menu item. ([35147](https://github.com/WordPress/gutenberg/pull/35147))
+
+-   API Fetch: Improve isMediaUploadRequest check. ([34417](https://github.com/WordPress/gutenberg/pull/34417))
+-   Fix slashing when creating or updating a menu item. ([35147](https://github.com/WordPress/gutenberg/pull/35147))
 
 #### Server Side Render
-- Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup ([35433](https://github.com/WordPress/gutenberg/pull/35433))
+
+-   Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup ([35433](https://github.com/WordPress/gutenberg/pull/35433))
 
 #### Template Editor
-- Fix the styling of template details. ([35285](https://github.com/WordPress/gutenberg/pull/35285))
+
+-   Fix the styling of template details. ([35285](https://github.com/WordPress/gutenberg/pull/35285))
 
 #### Widgets Editor
-- inspector-section: Track isOpen to make a better isContextuallyActive() function. ([35055](https://github.com/WordPress/gutenberg/pull/35055))
 
+-   inspector-section: Track isOpen to make a better isContextuallyActive() function. ([35055](https://github.com/WordPress/gutenberg/pull/35055))
 
 ### Performance
 
-- Edit Site: Optimize useSelect calls. ([35213](https://github.com/WordPress/gutenberg/pull/35213))
-- Memoize entity records selectors properly. ([34323](https://github.com/WordPress/gutenberg/pull/34323))
-- Widgets: Optimize useSelect calls. ([35256](https://github.com/WordPress/gutenberg/pull/35256))
-
+-   Edit Site: Optimize useSelect calls. ([35213](https://github.com/WordPress/gutenberg/pull/35213))
+-   Memoize entity records selectors properly. ([34323](https://github.com/WordPress/gutenberg/pull/34323))
+-   Widgets: Optimize useSelect calls. ([35256](https://github.com/WordPress/gutenberg/pull/35256))
 
 ### Experiments
 
 #### Block Library
-- Polish responsive navigation modal, inherit justifications, fix submenu direction. ([35077](https://github.com/WordPress/gutenberg/pull/35077))
-- Polish submenu indicator button. ([35030](https://github.com/WordPress/gutenberg/pull/35030))
-- Fix: Adding nav items from existing menu. ([34837](https://github.com/WordPress/gutenberg/pull/34837))
+
+-   Polish responsive navigation modal, inherit justifications, fix submenu direction. ([35077](https://github.com/WordPress/gutenberg/pull/35077))
+-   Polish submenu indicator button. ([35030](https://github.com/WordPress/gutenberg/pull/35030))
+-   Fix: Adding nav items from existing menu. ([34837](https://github.com/WordPress/gutenberg/pull/34837))
 
 #### Global Styles
-- Add Padding to the root level of global styles. ([35241](https://github.com/WordPress/gutenberg/pull/35241))
-- Add duotone theme.json styles support. ([34667](https://github.com/WordPress/gutenberg/pull/34667))
-- Block gap: Only render CSS variable if corresponding theme setting is enabled. ([35209](https://github.com/WordPress/gutenberg/pull/35209))
-- Extract the color palette to its own global styles screen. ([35109](https://github.com/WordPress/gutenberg/pull/35109))
-- Update the rules to hide/show blocks in the global styles sidebar. ([35178](https://github.com/WordPress/gutenberg/pull/35178))
-- Clean up logic to retrieve GS settings depending on context. ([35437](https://github.com/WordPress/gutenberg/pull/35437))
-- Synchronize user custom post type registration and UI visibility. ([35427](https://github.com/WordPress/gutenberg/pull/35427))
-- Enqueue preset styles for all themes in the editor. ([35424](https://github.com/WordPress/gutenberg/pull/35424))
 
+-   Add Padding to the root level of global styles. ([35241](https://github.com/WordPress/gutenberg/pull/35241))
+-   Add duotone theme.json styles support. ([34667](https://github.com/WordPress/gutenberg/pull/34667))
+-   Block gap: Only render CSS variable if corresponding theme setting is enabled. ([35209](https://github.com/WordPress/gutenberg/pull/35209))
+-   Extract the color palette to its own global styles screen. ([35109](https://github.com/WordPress/gutenberg/pull/35109))
+-   Update the rules to hide/show blocks in the global styles sidebar. ([35178](https://github.com/WordPress/gutenberg/pull/35178))
+-   Clean up logic to retrieve GS settings depending on context. ([35437](https://github.com/WordPress/gutenberg/pull/35437))
+-   Synchronize user custom post type registration and UI visibility. ([35427](https://github.com/WordPress/gutenberg/pull/35427))
+-   Enqueue preset styles for all themes in the editor. ([35424](https://github.com/WordPress/gutenberg/pull/35424))
 
 #### Navigation Screen
-- Remove i18n of help link in navigation editor. ([35313](https://github.com/WordPress/gutenberg/pull/35313))
-- Add a tooltip to Navigation items in a setup state. ([35139](https://github.com/WordPress/gutenberg/pull/35139))
-- Fix gap regression in navigation screen. ([35234](https://github.com/WordPress/gutenberg/pull/35234))
-- Truncate long menu names. ([35188](https://github.com/WordPress/gutenberg/pull/35188))
-- Insert Navigation Link blocks by default in Navigation block. ([34899](https://github.com/WordPress/gutenberg/pull/34899))
-- Migrate resolvers to thunks. ([35044](https://github.com/WordPress/gutenberg/pull/35044))
+
+-   Remove i18n of help link in navigation editor. ([35313](https://github.com/WordPress/gutenberg/pull/35313))
+-   Add a tooltip to Navigation items in a setup state. ([35139](https://github.com/WordPress/gutenberg/pull/35139))
+-   Fix gap regression in navigation screen. ([35234](https://github.com/WordPress/gutenberg/pull/35234))
+-   Truncate long menu names. ([35188](https://github.com/WordPress/gutenberg/pull/35188))
+-   Insert Navigation Link blocks by default in Navigation block. ([34899](https://github.com/WordPress/gutenberg/pull/34899))
+-   Migrate resolvers to thunks. ([35044](https://github.com/WordPress/gutenberg/pull/35044))
 
 #### Full Site Editing
-- Remove extra styling around "Post content" placeholder. ([35243](https://github.com/WordPress/gutenberg/pull/35243))
 
+-   Remove extra styling around "Post content" placeholder. ([35243](https://github.com/WordPress/gutenberg/pull/35243))
 
 ### Documentation
 
 #### Handbook
-- Docs: Update testing overview with minor fixes. ([35232](https://github.com/WordPress/gutenberg/pull/35232))
-- Fix typos, grammar in contributors release doc. ([35268](https://github.com/WordPress/gutenberg/pull/35268))
-- Update `nvm` to latest `0.38.0` version in Handbook. ([35125](https://github.com/WordPress/gutenberg/pull/35125))
-- Adding example readme template to contributing guidelines. ([34847](https://github.com/WordPress/gutenberg/pull/34847))
-- Fix erroneous usage of the word `master`. ([35392](https://github.com/WordPress/gutenberg/pull/35392))
+
+-   Docs: Update testing overview with minor fixes. ([35232](https://github.com/WordPress/gutenberg/pull/35232))
+-   Fix typos, grammar in contributors release doc. ([35268](https://github.com/WordPress/gutenberg/pull/35268))
+-   Update `nvm` to latest `0.38.0` version in Handbook. ([35125](https://github.com/WordPress/gutenberg/pull/35125))
+-   Adding example readme template to contributing guidelines. ([34847](https://github.com/WordPress/gutenberg/pull/34847))
+-   Fix erroneous usage of the word `master`. ([35392](https://github.com/WordPress/gutenberg/pull/35392))
 
 #### Packages
-- Add instructions for installing plugins/themes with wp-env. ([35064](https://github.com/WordPress/gutenberg/pull/35064))
-- MediaUpload: Reflect the correct filter name in the readme. ([35240](https://github.com/WordPress/gutenberg/pull/35240))
-- Update LinkControl documentation with additional examples. ([35199](https://github.com/WordPress/gutenberg/pull/35199))
-- Update doc block in block editor to fix documentation generation lint error. ([35295](https://github.com/WordPress/gutenberg/pull/35295))
-- Add missing doc blocks for the exported members of edit-widgets store. ([35263](https://github.com/WordPress/gutenberg/pull/35263))
+
+-   Add instructions for installing plugins/themes with wp-env. ([35064](https://github.com/WordPress/gutenberg/pull/35064))
+-   MediaUpload: Reflect the correct filter name in the readme. ([35240](https://github.com/WordPress/gutenberg/pull/35240))
+-   Update LinkControl documentation with additional examples. ([35199](https://github.com/WordPress/gutenberg/pull/35199))
+-   Update doc block in block editor to fix documentation generation lint error. ([35295](https://github.com/WordPress/gutenberg/pull/35295))
+-   Add missing doc blocks for the exported members of edit-widgets store. ([35263](https://github.com/WordPress/gutenberg/pull/35263))
 
 ### Code Quality
 
 #### Block Editor
-- Add colord package to block editor; Replace tinycolor2 with colord on duotone. (https://github.com/WordPress/gutenberg/pull/34616), [34605](https://github.com/WordPress/gutenberg/pull/34605), [35165](https://github.com/WordPress/gutenberg/pull/35165), [35164](https://github.com/WordPress/gutenberg/pull/35164))
-- Migrate the toggleFeature action to a thunk. ([35075](https://github.com/WordPress/gutenberg/pull/35075))
+
+-   Add colord package to block editor; Replace tinycolor2 with colord on duotone. (https://github.com/WordPress/gutenberg/pull/34616), [34605](https://github.com/WordPress/gutenberg/pull/34605), [35165](https://github.com/WordPress/gutenberg/pull/35165), [35164](https://github.com/WordPress/gutenberg/pull/35164))
+-   Migrate the toggleFeature action to a thunk. ([35075](https://github.com/WordPress/gutenberg/pull/35075))
 
 #### Block Library
-- Migrate store actions to thunks. ([35031](https://github.com/WordPress/gutenberg/pull/35031))
-- Post Title Block: Fix argument numbering in 'sprintf'. ([35338](https://github.com/WordPress/gutenberg/pull/35338))
-- Replace tinycolor2 with colord on block library package. ([35184](https://github.com/WordPress/gutenberg/pull/35184)
 
+-   Migrate store actions to thunks. ([35031](https://github.com/WordPress/gutenberg/pull/35031))
+-   Post Title Block: Fix argument numbering in 'sprintf'. ([35338](https://github.com/WordPress/gutenberg/pull/35338))
+-   Replace tinycolor2 with colord on block library package. ([35184](https://github.com/WordPress/gutenberg/pull/35184)
 
 #### Components
-- Refactor `Navigator*` folder structure, rename `Navigator` to `NavigatorProvider`. ([35160](https://github.com/WordPress/gutenberg/pull/35160))
-- Replace tinycolor2 with colord. ([35185](https://github.com/WordPress/gutenberg/pull/35185))
-- ToolsPanel component: Refactor to typescript. ([34028](https://github.com/WordPress/gutenberg/pull/34028))
-- UnitControl component: Refactor utils to TypeScript. ([35138](https://github.com/WordPress/gutenberg/pull/35138))
-- Do not export `SimpleColorSwatch` in Storybook examples for Item Group. ([35179](https://github.com/WordPress/gutenberg/pull/35179))
-- Refactor Navigator to TypeScript. ([35214](https://github.com/WordPress/gutenberg/pull/35214))
+
+-   Refactor `Navigator*` folder structure, rename `Navigator` to `NavigatorProvider`. ([35160](https://github.com/WordPress/gutenberg/pull/35160))
+-   Replace tinycolor2 with colord. ([35185](https://github.com/WordPress/gutenberg/pull/35185))
+-   ToolsPanel component: Refactor to typescript. ([34028](https://github.com/WordPress/gutenberg/pull/34028))
+-   UnitControl component: Refactor utils to TypeScript. ([35138](https://github.com/WordPress/gutenberg/pull/35138))
+-   Do not export `SimpleColorSwatch` in Storybook examples for Item Group. ([35179](https://github.com/WordPress/gutenberg/pull/35179))
+-   Refactor Navigator to TypeScript. ([35214](https://github.com/WordPress/gutenberg/pull/35214))
 
 #### Global Styles
-- Simplify code that deals with user data for clarity. ([35248](https://github.com/WordPress/gutenberg/pull/35248))
-- Simplify how we register preset metadata. ([35228](https://github.com/WordPress/gutenberg/pull/35228))
-- Reorganize the global styles UI code base. ([35218](https://github.com/WordPress/gutenberg/pull/35218))
-- Don't output preset classes for colors defined by the theme ([35514](https://github.com/WordPress/gutenberg/pull/35514))
+
+-   Simplify code that deals with user data for clarity. ([35248](https://github.com/WordPress/gutenberg/pull/35248))
+-   Simplify how we register preset metadata. ([35228](https://github.com/WordPress/gutenberg/pull/35228))
+-   Reorganize the global styles UI code base. ([35218](https://github.com/WordPress/gutenberg/pull/35218))
+-   Don't output preset classes for colors defined by the theme ([35514](https://github.com/WordPress/gutenberg/pull/35514))
 
 #### Post Editor
-- Keyboard Shortcuts: Use a new selector getter method. ([35385](https://github.com/WordPress/gutenberg/pull/35385))
+
+-   Keyboard Shortcuts: Use a new selector getter method. ([35385](https://github.com/WordPress/gutenberg/pull/35385))
 
 #### Navigation Component
-- Refactor the preferences modal to use the new Navigator components. ([35142](https://github.com/WordPress/gutenberg/pull/35142))
-- Navigation Editor: Remove duplicated stripHTML. ([35189](https://github.com/WordPress/gutenberg/pull/35189))
+
+-   Refactor the preferences modal to use the new Navigator components. ([35142](https://github.com/WordPress/gutenberg/pull/35142))
+-   Navigation Editor: Remove duplicated stripHTML. ([35189](https://github.com/WordPress/gutenberg/pull/35189))
 
 #### Widgets Editor
-- Migrate edit-widgets store to thunks. ([35110](https://github.com/WordPress/gutenberg/pull/35110))
+
+-   Migrate edit-widgets store to thunks. ([35110](https://github.com/WordPress/gutenberg/pull/35110))
 
 ### Tools
 
 #### Build Tooling
-- Remove polyfills from view.js block scripts. ([35038](https://github.com/WordPress/gutenberg/pull/35038))
+
+-   Remove polyfills from view.js block scripts. ([35038](https://github.com/WordPress/gutenberg/pull/35038))
 
 #### Testing
-- Add tests for `Navigator*`. ([35163](https://github.com/WordPress/gutenberg/pull/35163))
-- Enable flaky tests reporter bot in PRs. ([35029](https://github.com/WordPress/gutenberg/pull/35029))
-- Replace tinycolor2 with colord on getMostReadableColor util. Add unit test. ([34625](https://github.com/WordPress/gutenberg/pull/34625))
-- Try fixing flaky navigation test. ([35380](https://github.com/WordPress/gutenberg/pull/35380))
-- Fix not archiving failure artifacts for flaky tests. ([35379](https://github.com/WordPress/gutenberg/pull/35379))
 
+-   Add tests for `Navigator*`. ([35163](https://github.com/WordPress/gutenberg/pull/35163))
+-   Enable flaky tests reporter bot in PRs. ([35029](https://github.com/WordPress/gutenberg/pull/35029))
+-   Replace tinycolor2 with colord on getMostReadableColor util. Add unit test. ([34625](https://github.com/WordPress/gutenberg/pull/34625))
+-   Try fixing flaky navigation test. ([35380](https://github.com/WordPress/gutenberg/pull/35380))
+-   Fix not archiving failure artifacts for flaky tests. ([35379](https://github.com/WordPress/gutenberg/pull/35379))
 
 #### Plugins
-- Add `oandregal` and `tellthemachines` to codeowners file. ([35233](https://github.com/WordPress/gutenberg/pull/35233))
 
+-   Add `oandregal` and `tellthemachines` to codeowners file. ([35233](https://github.com/WordPress/gutenberg/pull/35233))
 
 = 11.6.0 =
 
+## Changelog
+
 ### Enhancements
 
 #### Block Library
-- Post Title block: Add typography formatting options. ([31623](https://github.com/WordPress/gutenberg/pull/31623))
-- Query Pagination block: Use flex layout. ([34876](https://github.com/WordPress/gutenberg/pull/34876))
-- Site logo: Add site logo crop. ([31607](https://github.com/WordPress/gutenberg/pull/31607))
-- Cover: Move cover min-height into dimensions panel via SlotFill. ([34065](https://github.com/WordPress/gutenberg/pull/34065))
-- Group Block: Add information about selected element types for Group Block. ([33976](https://github.com/WordPress/gutenberg/pull/33976))
-- Image Block: Create two-way data binding for ImageSizeControl. ([34649](https://github.com/WordPress/gutenberg/pull/34649))
-- Columns Block: Update block description of columns block. ([34705](https://github.com/WordPress/gutenberg/pull/34705))
-- Gallery block: Add toolbar button to convert old galleries to new format. ([34606](https://github.com/WordPress/gutenberg/pull/34606))
+
+-   Post Title block: Add typography formatting options. ([31623](https://github.com/WordPress/gutenberg/pull/31623))
+-   Query Pagination block: Use flex layout. ([34876](https://github.com/WordPress/gutenberg/pull/34876))
+-   Site logo: Add site logo crop. ([31607](https://github.com/WordPress/gutenberg/pull/31607))
+-   Cover: Move cover min-height into dimensions panel via SlotFill. ([34065](https://github.com/WordPress/gutenberg/pull/34065))
+-   Group Block: Add information about selected element types for Group Block. ([33976](https://github.com/WordPress/gutenberg/pull/33976))
+-   Image Block: Create two-way data binding for ImageSizeControl. ([34649](https://github.com/WordPress/gutenberg/pull/34649))
+-   Columns Block: Update block description of columns block. ([34705](https://github.com/WordPress/gutenberg/pull/34705))
+-   Gallery block: Add toolbar button to convert old galleries to new format. ([34606](https://github.com/WordPress/gutenberg/pull/34606))
 
 #### Block Editor
-- Format toolbar: Visual clue for hidden active items. ([21892](https://github.com/WordPress/gutenberg/pull/21892))
-- Increase Link UI search results to 10 on the Navigation Editor screen. ([34808](https://github.com/WordPress/gutenberg/pull/34808))
-- Inserter: Pass filter value when clicking Browse All. ([34912](https://github.com/WordPress/gutenberg/pull/34912))
+
+-   Format toolbar: Visual clue for hidden active items. ([21892](https://github.com/WordPress/gutenberg/pull/21892))
+-   Increase Link UI search results to 10 on the Navigation Editor screen. ([34808](https://github.com/WordPress/gutenberg/pull/34808))
+-   Inserter: Pass filter value when clicking Browse All. ([34912](https://github.com/WordPress/gutenberg/pull/34912))
 
 #### Components
-- ColorPicker: Enhance the new color picker design. ([34598](https://github.com/WordPress/gutenberg/pull/34598))
-- ColorPicker: Add reset timeout to ColorPicker's copy functionality. ([34601](https://github.com/WordPress/gutenberg/pull/34601))
-- ToolsPanel: Refine component behaviour. ([34530](https://github.com/WordPress/gutenberg/pull/34530))
-- Resize Handles: Fix stroke width of resize handles. ([34949](https://github.com/WordPress/gutenberg/pull/34949))
-- ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. ([28289](https://github.com/WordPress/gutenberg/pull/28289))
-- ServerSideRender: Delayed loading state of ServerSideRender component. ([35033](https://github.com/WordPress/gutenberg/pull/35033))
+
+-   ColorPicker: Enhance the new color picker design. ([34598](https://github.com/WordPress/gutenberg/pull/34598))
+-   ColorPicker: Add reset timeout to ColorPicker's copy functionality. ([34601](https://github.com/WordPress/gutenberg/pull/34601))
+-   ToolsPanel: Refine component behaviour. ([34530](https://github.com/WordPress/gutenberg/pull/34530))
+-   Resize Handles: Fix stroke width of resize handles. ([34949](https://github.com/WordPress/gutenberg/pull/34949))
+-   ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. ([28289](https://github.com/WordPress/gutenberg/pull/28289))
+-   ServerSideRender: Delayed loading state of ServerSideRender component. ([35033](https://github.com/WordPress/gutenberg/pull/35033))
 
 #### Global Styles
-- Add a simple Global Styles preview to the sidebar. ([34991](https://github.com/WordPress/gutenberg/pull/34991))
-- Update the Global Styles Icon and use it in the site editor's panel. ([34871](https://github.com/WordPress/gutenberg/pull/34871))
-- Update the global styles sidebar to use a navigation component. ([34885](https://github.com/WordPress/gutenberg/pull/34885))
+
+-   Add a simple Global Styles preview to the sidebar. ([34991](https://github.com/WordPress/gutenberg/pull/34991))
+-   Update the Global Styles Icon and use it in the site editor's panel. ([34871](https://github.com/WordPress/gutenberg/pull/34871))
+-   Update the global styles sidebar to use a navigation component. ([34885](https://github.com/WordPress/gutenberg/pull/34885))
 
 #### Widgets Editor
-- Widget Group: Make title directly editable. ([34799](https://github.com/WordPress/gutenberg/pull/34799))
+
+-   Widget Group: Make title directly editable. ([34799](https://github.com/WordPress/gutenberg/pull/34799))
 
 #### Template Editor
-- Add edit template part menu button. ([34679](https://github.com/WordPress/gutenberg/pull/34679))
+
+-   Add edit template part menu button. ([34679](https://github.com/WordPress/gutenberg/pull/34679))
 
 #### Themes
-- FSE: Add basic support for child themes. ([34354](https://github.com/WordPress/gutenberg/pull/34354))
+
+-   FSE: Add basic support for child themes. ([34354](https://github.com/WordPress/gutenberg/pull/34354))
 
 ### New APIs
 
 #### Block API
-- Introduce lock control at the block-type level. ([32457](https://github.com/WordPress/gutenberg/pull/32457))
+
+-   Introduce lock control at the block-type level. ([32457](https://github.com/WordPress/gutenberg/pull/32457))
 
 #### Design Tools
-- InspectorControls: Wrap block support slots in ToolsPanel. ([34157](https://github.com/WordPress/gutenberg/pull/34157))
+
+-   InspectorControls: Wrap block support slots in ToolsPanel. ([34157](https://github.com/WordPress/gutenberg/pull/34157))
 
 ### Accessibility
-- Improve file block accessibility by adding aria-describedby to download button. ([28062](https://github.com/WordPress/gutenberg/pull/28062))
-- Button Block: Add prefix to the description ID. ([34900](https://github.com/WordPress/gutenberg/pull/34900))
-- Snackbar: Fix focus loss on dismiss. ([34736](https://github.com/WordPress/gutenberg/pull/34736))
+
+-   Improve file block accessibility by adding aria-describedby to download button. ([28062](https://github.com/WordPress/gutenberg/pull/28062))
+-   Button Block: Add prefix to the description ID. ([34900](https://github.com/WordPress/gutenberg/pull/34900))
+-   Snackbar: Fix focus loss on dismiss. ([34736](https://github.com/WordPress/gutenberg/pull/34736))
 
 ### Performance
-- List View: Try disabling async mode provider around selected block in ListView. ([34519](https://github.com/WordPress/gutenberg/pull/34519))
+
+-   List View: Try disabling async mode provider around selected block in ListView. ([34519](https://github.com/WordPress/gutenberg/pull/34519))
 
 ### Bug Fixes
 
 #### Block Editor
-- Copy Handler: Only handle paste event once. ([34430](https://github.com/WordPress/gutenberg/pull/34430))
-- Fix save-state indicator appearance. ([34947](https://github.com/WordPress/gutenberg/pull/34947))
-- MediaReplaceFlow: Avoid React warning when selecting media. ([34618](https://github.com/WordPress/gutenberg/pull/34618))
-- Remove .has-link-color class upon clearing the link color. ([34700](https://github.com/WordPress/gutenberg/pull/34700))
-- Rich Text: Fix arrow navigation with consecutive formats. ([35014](https://github.com/WordPress/gutenberg/pull/35014))
-- Rich Text: Also strip object replacement character when removing padding. ([34851](https://github.com/WordPress/gutenberg/pull/34851))
-- Writing flow: Fix focus trap on non-text input types. ([32714](https://github.com/WordPress/gutenberg/pull/32714))
-- Fix bug in the receiveBlocks action resulting in a broken block list. ([35076](https://github.com/WordPress/gutenberg/pull/35076))
+
+-   Copy Handler: Only handle paste event once. ([34430](https://github.com/WordPress/gutenberg/pull/34430))
+-   Fix save-state indicator appearance. ([34947](https://github.com/WordPress/gutenberg/pull/34947))
+-   MediaReplaceFlow: Avoid React warning when selecting media. ([34618](https://github.com/WordPress/gutenberg/pull/34618))
+-   Remove .has-link-color class upon clearing the link color. ([34700](https://github.com/WordPress/gutenberg/pull/34700))
+-   Rich Text: Fix arrow navigation with consecutive formats. ([35014](https://github.com/WordPress/gutenberg/pull/35014))
+-   Rich Text: Also strip object replacement character when removing padding. ([34851](https://github.com/WordPress/gutenberg/pull/34851))
+-   Writing flow: Fix focus trap on non-text input types. ([32714](https://github.com/WordPress/gutenberg/pull/32714))
+-   Fix bug in the receiveBlocks action resulting in a broken block list. ([35076](https://github.com/WordPress/gutenberg/pull/35076))
 
 #### Block Library
-- HTML block: Prevent external styling of editing UI. ([34727](https://github.com/WordPress/gutenberg/pull/34727))
-- Page List Block: Fix gap in vertical page list. ([35026](https://github.com/WordPress/gutenberg/pull/35026))
-- MediaPlaceholder: Fix media library button opening the file upload modal. ([34894](https://github.com/WordPress/gutenberg/pull/34894))
-- QueryPagination: Fix layout support. ([34897](https://github.com/WordPress/gutenberg/pull/34897))
-- Query Pagination: Fix center alignment. ([34739](https://github.com/WordPress/gutenberg/pull/34739))
-- Group block: Lower CSS specificity of padding declaration. ([34854](https://github.com/WordPress/gutenberg/pull/34854))
+
+-   HTML block: Prevent external styling of editing UI. ([34727](https://github.com/WordPress/gutenberg/pull/34727))
+-   Page List Block: Fix gap in vertical page list. ([35026](https://github.com/WordPress/gutenberg/pull/35026))
+-   MediaPlaceholder: Fix media library button opening the file upload modal. ([34894](https://github.com/WordPress/gutenberg/pull/34894))
+-   QueryPagination: Fix layout support. ([34897](https://github.com/WordPress/gutenberg/pull/34897))
+-   Query Pagination: Fix center alignment. ([34739](https://github.com/WordPress/gutenberg/pull/34739))
+-   Group block: Lower CSS specificity of padding declaration. ([34854](https://github.com/WordPress/gutenberg/pull/34854))
 
 #### Global Styles
-- Cache global stylesheet keyed by theme. ([34704](https://github.com/WordPress/gutenberg/pull/34704))
-- Clean theme data when switching themes in the customizer. ([34540](https://github.com/WordPress/gutenberg/pull/34540))
-- Fix dimensions panel default controls display. ([34828](https://github.com/WordPress/gutenberg/pull/34828))
-- Fix for link color in containers. ([34689](https://github.com/WordPress/gutenberg/pull/34689))
+
+-   Cache global stylesheet keyed by theme. ([34704](https://github.com/WordPress/gutenberg/pull/34704))
+-   Clean theme data when switching themes in the customizer. ([34540](https://github.com/WordPress/gutenberg/pull/34540))
+-   Fix dimensions panel default controls display. ([34828](https://github.com/WordPress/gutenberg/pull/34828))
+-   Fix for link color in containers. ([34689](https://github.com/WordPress/gutenberg/pull/34689))
 
 #### Components
-- Fix Dropdown/DropdownMenu toggle closing in all UAs. ([31170](https://github.com/WordPress/gutenberg/pull/31170))
-- Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. ([34721](https://github.com/WordPress/gutenberg/pull/34721))
-- ToolsPanel: Allow SlotFill injection of panel items. ([34632](https://github.com/WordPress/gutenberg/pull/34632))
-- ToolsPanel: Remove / re-register panel items if the panelId changes. ([34726](https://github.com/WordPress/gutenberg/pull/34726))
-- ToogleGroupControl: Fix update when unmounted. ([34756](https://github.com/WordPress/gutenberg/pull/34756))
-- Unit Control: Always display current unit value if valid. ([34768](https://github.com/WordPress/gutenberg/pull/34768))
+
+-   Fix Dropdown/DropdownMenu toggle closing in all UAs. ([31170](https://github.com/WordPress/gutenberg/pull/31170))
+-   Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. ([34721](https://github.com/WordPress/gutenberg/pull/34721))
+-   ToolsPanel: Allow SlotFill injection of panel items. ([34632](https://github.com/WordPress/gutenberg/pull/34632))
+-   ToolsPanel: Remove / re-register panel items if the panelId changes. ([34726](https://github.com/WordPress/gutenberg/pull/34726))
+-   ToogleGroupControl: Fix update when unmounted. ([34756](https://github.com/WordPress/gutenberg/pull/34756))
+-   Unit Control: Always display current unit value if valid. ([34768](https://github.com/WordPress/gutenberg/pull/34768))
 
 #### Template Editor
-- Fixes left & right floats for blocks that are direct children of .wp-site-blocks. ([34635](https://github.com/WordPress/gutenberg/pull/34635))
-- Fix new template form onSubmit logic. ([34988](https://github.com/WordPress/gutenberg/pull/34988))
+
+-   Fixes left & right floats for blocks that are direct children of .wp-site-blocks. ([34635](https://github.com/WordPress/gutenberg/pull/34635))
+-   Fix new template form onSubmit logic. ([34988](https://github.com/WordPress/gutenberg/pull/34988))
 
 #### REST API
-- Add missing field _invalid in menu item REST API. ([34670](https://github.com/WordPress/gutenberg/pull/34670))
-- Fix 'menu_exists' response status code. ([34888](https://github.com/WordPress/gutenberg/pull/34888))
-- Remove parent and position validation from menu item REST API endpoint. ([34672](https://github.com/WordPress/gutenberg/pull/34672))
-- Filters are incorrectly applied in the __experimental/menu-items controller. ([34857](https://github.com/WordPress/gutenberg/pull/34857))
-- Fix the parent menu item field in REST API responses. ([34835](https://github.com/WordPress/gutenberg/pull/34835))
 
+-   Add missing field \_invalid in menu item REST API. ([34670](https://github.com/WordPress/gutenberg/pull/34670))
+-   Fix 'menu_exists' response status code. ([34888](https://github.com/WordPress/gutenberg/pull/34888))
+-   Remove parent and position validation from menu item REST API endpoint. ([34672](https://github.com/WordPress/gutenberg/pull/34672))
+-   Filters are incorrectly applied in the \_\_experimental/menu-items controller. ([34857](https://github.com/WordPress/gutenberg/pull/34857))
+-   Fix the parent menu item field in REST API responses. ([34835](https://github.com/WordPress/gutenberg/pull/34835))
 
 #### Themes
-- Fix block gap added to the block templates skip link. ([34986](https://github.com/WordPress/gutenberg/pull/34986))
+
+-   Fix block gap added to the block templates skip link. ([34986](https://github.com/WordPress/gutenberg/pull/34986))
 
 #### Widgets Editor
-- Fix disabled blocks logical error on Widgets screen. ([34634](https://github.com/WordPress/gutenberg/pull/34634))
-- Prevent welcome guide overflow x scroll. ([34713](https://github.com/WordPress/gutenberg/pull/34713))
+
+-   Fix disabled blocks logical error on Widgets screen. ([34634](https://github.com/WordPress/gutenberg/pull/34634))
+-   Prevent welcome guide overflow x scroll. ([34713](https://github.com/WordPress/gutenberg/pull/34713))
 
 ### Experiments
 
 #### Navigation Block
-- Add a Submenu block for use in Navigation. ([33775](https://github.com/WordPress/gutenberg/pull/33775))
-- Initialize responsive modals with window onload event. ([34544](https://github.com/WordPress/gutenberg/pull/34544))
-- Enable open on click for Page List inside Navigation. ([34675](https://github.com/WordPress/gutenberg/pull/34675))
-- Hide theme-provided underlines when menu item is in setup state. ([34486](https://github.com/WordPress/gutenberg/pull/34486))
-- Only capture toolbars on the parent Navigation block when not in vertical mode. ([34615](https://github.com/WordPress/gutenberg/pull/34615))
-- Polish wavy underline. ([34954](https://github.com/WordPress/gutenberg/pull/34954))
+
+-   Add a Submenu block for use in Navigation. ([33775](https://github.com/WordPress/gutenberg/pull/33775))
+-   Initialize responsive modals with window onload event. ([34544](https://github.com/WordPress/gutenberg/pull/34544))
+-   Enable open on click for Page List inside Navigation. ([34675](https://github.com/WordPress/gutenberg/pull/34675))
+-   Hide theme-provided underlines when menu item is in setup state. ([34486](https://github.com/WordPress/gutenberg/pull/34486))
+-   Only capture toolbars on the parent Navigation block when not in vertical mode. ([34615](https://github.com/WordPress/gutenberg/pull/34615))
+-   Polish wavy underline. ([34954](https://github.com/WordPress/gutenberg/pull/34954))
 
 #### Navigation Editor
-- Add initial navigation editor user documentation. ([34985](https://github.com/WordPress/gutenberg/pull/34985))
-- Adjust header toolbar icon styles. ([34833](https://github.com/WordPress/gutenberg/pull/34833))
-- Consolidate menu name and switcher. ([34786](https://github.com/WordPress/gutenberg/pull/34786))
-- Update Navigation Editor to support new submenu block. ([34281](https://github.com/WordPress/gutenberg/pull/34281))
-- Use response messages returned from API for notices. ([34903](https://github.com/WordPress/gutenberg/pull/34903))
-- Add global inserter to Navigation Editor. ([34619](https://github.com/WordPress/gutenberg/pull/34619))
-- Save menu items using the REST API. ([34541](https://github.com/WordPress/gutenberg/pull/34541))
-- Add space between menu name and switcher button. ([34960](https://github.com/WordPress/gutenberg/pull/34960))
-- Keep Navigation Editor snackbar from overflowing notices. ([34661](https://github.com/WordPress/gutenberg/pull/34661))
-- Navigation Editor: Avoid crash when transforming navigation link. ([34980](https://github.com/WordPress/gutenberg/pull/34980))
-- Correctly display notices. ([34852](https://github.com/WordPress/gutenberg/pull/34852))
-- Display error notice inside modal. ([34884](https://github.com/WordPress/gutenberg/pull/34884))
-- Fix navigation editor missing appender not showing appender when no blocks selected. ([34678](https://github.com/WordPress/gutenberg/pull/34678))
-- Fix navigation editor undo button being active when editor loads. ([34839](https://github.com/WordPress/gutenberg/pull/34839))
-- Open link control if submenu parent is link. ([34798](https://github.com/WordPress/gutenberg/pull/34798))
-- Stop submitting Create Menu form in busy state. ([34983](https://github.com/WordPress/gutenberg/pull/34983))
-- Fix saving locations using the "Manage Locations" popup. ([34714](https://github.com/WordPress/gutenberg/pull/34714))
-
-#### Site Editor
-- Site Editor - add basic plugin support. ([34460](https://github.com/WordPress/gutenberg/pull/34460))
+
+-   Add initial navigation editor user documentation. ([34985](https://github.com/WordPress/gutenberg/pull/34985))
+-   Adjust header toolbar icon styles. ([34833](https://github.com/WordPress/gutenberg/pull/34833))
+-   Consolidate menu name and switcher. ([34786](https://github.com/WordPress/gutenberg/pull/34786))
+-   Update Navigation Editor to support new submenu block. ([34281](https://github.com/WordPress/gutenberg/pull/34281))
+-   Use response messages returned from API for notices. ([34903](https://github.com/WordPress/gutenberg/pull/34903))
+-   Add global inserter to Navigation Editor. ([34619](https://github.com/WordPress/gutenberg/pull/34619))
+-   Save menu items using the REST API. ([34541](https://github.com/WordPress/gutenberg/pull/34541))
+-   Add space between menu name and switcher button. ([34960](https://github.com/WordPress/gutenberg/pull/34960))
+-   Keep Navigation Editor snackbar from overflowing notices. ([34661](https://github.com/WordPress/gutenberg/pull/34661))
+-   Navigation Editor: Avoid crash when transforming navigation link. ([34980](https://github.com/WordPress/gutenberg/pull/34980))
+-   Correctly display notices. ([34852](https://github.com/WordPress/gutenberg/pull/34852))
+-   Display error notice inside modal. ([34884](https://github.com/WordPress/gutenberg/pull/34884))
+-   Fix navigation editor missing appender not showing appender when no blocks selected. ([34678](https://github.com/WordPress/gutenberg/pull/34678))
+-   Fix navigation editor undo button being active when editor loads. ([34839](https://github.com/WordPress/gutenberg/pull/34839))
+-   Open link control if submenu parent is link. ([34798](https://github.com/WordPress/gutenberg/pull/34798))
+-   Stop submitting Create Menu form in busy state. ([34983](https://github.com/WordPress/gutenberg/pull/34983))
+-   Fix saving locations using the "Manage Locations" popup. ([34714](https://github.com/WordPress/gutenberg/pull/34714))
+
+#### Site Editor
+
+-   Site Editor - add basic plugin support. ([34460](https://github.com/WordPress/gutenberg/pull/34460))
 
 ### Documentation
 
 #### Handbook
-- Minor copy improvements. ([35015](https://github.com/WordPress/gutenberg/pull/35015))
-- Update versions to include 5.8.1. ([34789](https://github.com/WordPress/gutenberg/pull/34789))
-- Fix typography.customLineHeight value in the compatibility table. ([34791](https://github.com/WordPress/gutenberg/pull/34791))
+
+-   Minor copy improvements. ([35015](https://github.com/WordPress/gutenberg/pull/35015))
+-   Update versions to include 5.8.1. ([34789](https://github.com/WordPress/gutenberg/pull/34789))
+-   Fix typography.customLineHeight value in the compatibility table. ([34791](https://github.com/WordPress/gutenberg/pull/34791))
 
 #### Packages
-- Update the note about using polyfill for ES2015+ features. ([34878](https://github.com/WordPress/gutenberg/pull/34878))
-- Components
-  - Add Compound Components section to components CONTRIBUTING.md. ([34697](https://github.com/WordPress/gutenberg/pull/34697))
-  - Dropdown: Tidy up documentation. ([34861](https://github.com/WordPress/gutenberg/pull/34861))
-  - Fix small typo in the component's CONTRIBUTING guidelines documentation. ([34753](https://github.com/WordPress/gutenberg/pull/34753))
-  - ItemGroup: Add story showcasing more complex layouts. ([34708](https://github.com/WordPress/gutenberg/pull/34708))
-  - Update @wordpress/components package's contributing guidelines. ([33960](https://github.com/WordPress/gutenberg/pull/33960))
-  - Update AlignmentMatrixControl documentation post merge. ([34662](https://github.com/WordPress/gutenberg/pull/34662))
-  - Update components CONTRIBUTING.md structure. ([34877](https://github.com/WordPress/gutenberg/pull/34877))
-  - Update documentation for ClipboardButton component. ([34711](https://github.com/WordPress/gutenberg/pull/34711))
-- Create Block: Remove wp-cli callout since not recommended and outdated. ([34821](https://github.com/WordPress/gutenberg/pull/34821))
-- Navigation Editor:
-  - Fix inconsistencies and errors. ([34682](https://github.com/WordPress/gutenberg/pull/34682))
-  - Update the Hooks section in documentation. ([35035](https://github.com/WordPress/gutenberg/pull/35035))
-- Scripts: Add CHANGELOG entry for jest-dev-server upgrade. ([34657](https://github.com/WordPress/gutenberg/pull/34657))
+
+-   Update the note about using polyfill for ES2015+ features. ([34878](https://github.com/WordPress/gutenberg/pull/34878))
+-   Components
+    -   Add Compound Components section to components CONTRIBUTING.md. ([34697](https://github.com/WordPress/gutenberg/pull/34697))
+    -   Dropdown: Tidy up documentation. ([34861](https://github.com/WordPress/gutenberg/pull/34861))
+    -   Fix small typo in the component's CONTRIBUTING guidelines documentation. ([34753](https://github.com/WordPress/gutenberg/pull/34753))
+    -   ItemGroup: Add story showcasing more complex layouts. ([34708](https://github.com/WordPress/gutenberg/pull/34708))
+    -   Update @wordpress/components package's contributing guidelines. ([33960](https://github.com/WordPress/gutenberg/pull/33960))
+    -   Update AlignmentMatrixControl documentation post merge. ([34662](https://github.com/WordPress/gutenberg/pull/34662))
+    -   Update components CONTRIBUTING.md structure. ([34877](https://github.com/WordPress/gutenberg/pull/34877))
+    -   Update documentation for ClipboardButton component. ([34711](https://github.com/WordPress/gutenberg/pull/34711))
+-   Create Block: Remove wp-cli callout since not recommended and outdated. ([34821](https://github.com/WordPress/gutenberg/pull/34821))
+-   Navigation Editor:
+    -   Fix inconsistencies and errors. ([34682](https://github.com/WordPress/gutenberg/pull/34682))
+    -   Update the Hooks section in documentation. ([35035](https://github.com/WordPress/gutenberg/pull/35035))
+-   Scripts: Add CHANGELOG entry for jest-dev-server upgrade. ([34657](https://github.com/WordPress/gutenberg/pull/34657))
 
 #### Other
-- Update overall plugin description. ([34850](https://github.com/WordPress/gutenberg/pull/34850))
+
+-   Update overall plugin description. ([34850](https://github.com/WordPress/gutenberg/pull/34850))
 
 ### Code Quality
-- Add tests for slug to class/css variable conversion. ([34787](https://github.com/WordPress/gutenberg/pull/34787))
-- Refactor the core-data store to thunks. ([28389](https://github.com/WordPress/gutenberg/pull/28389))
-- Remove some low impact APIs that were deprecated on WP 5.3. ([34537](https://github.com/WordPress/gutenberg/pull/34537))
-- Rewrite FocusableIframe as hook API. ([26753](https://github.com/WordPress/gutenberg/pull/26753))
-- Rich text: Only merge neighbouring equal formats when applying a format. ([35016](https://github.com/WordPress/gutenberg/pull/35016))
-- Writing Flow: Merge place caret at edge functions. ([30481](https://github.com/WordPress/gutenberg/pull/30481))
-- Site editor: fix PHP notice: Undefined index: __unstableType. ([34735](https://github.com/WordPress/gutenberg/pull/34735))
-- Use rest_is_field_included function in menu endpoints. ([34673](https://github.com/WordPress/gutenberg/pull/34673))
-- Remove duplicate Theme JSON block gap key. ([34774](https://github.com/WordPress/gutenberg/pull/34774))
+
+-   Add tests for slug to class/css variable conversion. ([34787](https://github.com/WordPress/gutenberg/pull/34787))
+-   Refactor the core-data store to thunks. ([28389](https://github.com/WordPress/gutenberg/pull/28389))
+-   Remove some low impact APIs that were deprecated on WP 5.3. ([34537](https://github.com/WordPress/gutenberg/pull/34537))
+-   Rewrite FocusableIframe as hook API. ([26753](https://github.com/WordPress/gutenberg/pull/26753))
+-   Rich text: Only merge neighbouring equal formats when applying a format. ([35016](https://github.com/WordPress/gutenberg/pull/35016))
+-   Writing Flow: Merge place caret at edge functions. ([30481](https://github.com/WordPress/gutenberg/pull/30481))
+-   Site editor: fix PHP notice: Undefined index: \_\_unstableType. ([34735](https://github.com/WordPress/gutenberg/pull/34735))
+-   Use rest_is_field_included function in menu endpoints. ([34673](https://github.com/WordPress/gutenberg/pull/34673))
+-   Remove duplicate Theme JSON block gap key. ([34774](https://github.com/WordPress/gutenberg/pull/34774))
 
 #### Block Editor
-- Global shortcuts: Use React events (portal bubbles & contextual). ([34539](https://github.com/WordPress/gutenberg/pull/34539))
-- Rename experimental prop used in BlockControls. ([34644](https://github.com/WordPress/gutenberg/pull/34644))
-- Update callers to handle when getBlockType returns undefined. ([34891](https://github.com/WordPress/gutenberg/pull/34891))
+
+-   Global shortcuts: Use React events (portal bubbles & contextual). ([34539](https://github.com/WordPress/gutenberg/pull/34539))
+-   Rename experimental prop used in BlockControls. ([34644](https://github.com/WordPress/gutenberg/pull/34644))
+-   Update callers to handle when getBlockType returns undefined. ([34891](https://github.com/WordPress/gutenberg/pull/34891))
 
 #### Block Library
-- Latest Comments: Add missing parameter to widget_comments_args. ([29403](https://github.com/WordPress/gutenberg/pull/29403))
-- Navigation submenu block: Replace global shortcut event handlers with local ones. ([34812](https://github.com/WordPress/gutenberg/pull/34812))
+
+-   Latest Comments: Add missing parameter to widget_comments_args. ([29403](https://github.com/WordPress/gutenberg/pull/29403))
+-   Navigation submenu block: Replace global shortcut event handlers with local ones. ([34812](https://github.com/WordPress/gutenberg/pull/34812))
 
 #### Components
-- ColorPicker: Replace global shortcut event handlers with local ones. ([34508](https://github.com/WordPress/gutenberg/pull/34508))
-- Delete the createComponent utility function. ([34929](https://github.com/WordPress/gutenberg/pull/34929))
-- Refactor away from the createComponent function: CardMedia ([34915](https://github.com/WordPress/gutenberg/pull/34915)), ControlLabel ([34927](https://github.com/WordPress/gutenberg/pull/34927)), Elevation ([34916](https://github.com/WordPress/gutenberg/pull/34916)), FlexBlock ([34917](https://github.com/WordPress/gutenberg/pull/34917)), FlexItem ([34918](https://github.com/WordPress/gutenberg/pull/34918)), Grid ([34919](https://github.com/WordPress/gutenberg/pull/34919)), HStack ([34920](https://github.com/WordPress/gutenberg/pull/34920)), Heading ([34921](https://github.com/WordPress/gutenberg/pull/34921)), Scrollable ([34922](https://github.com/WordPress/gutenberg/pull/34922)), Spacer ([34923](https://github.com/WordPress/gutenberg/pull/34923)), Surface ([34924](https://github.com/WordPress/gutenberg/pull/34924)), Text ([34925](https://github.com/WordPress/gutenberg/pull/34925)), Truncate ([34926](https://github.com/WordPress/gutenberg/pull/34926)), VStack ([34928](https://github.com/WordPress/gutenberg/pull/34928)).
-- Remove all dashicon usages from Storybook stories. ([33984](https://github.com/WordPress/gutenberg/pull/33984))
-- Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. ([34966](https://github.com/WordPress/gutenberg/pull/34966))
+
+-   ColorPicker: Replace global shortcut event handlers with local ones. ([34508](https://github.com/WordPress/gutenberg/pull/34508))
+-   Delete the createComponent utility function. ([34929](https://github.com/WordPress/gutenberg/pull/34929))
+-   Refactor away from the createComponent function: CardMedia ([34915](https://github.com/WordPress/gutenberg/pull/34915)), ControlLabel ([34927](https://github.com/WordPress/gutenberg/pull/34927)), Elevation ([34916](https://github.com/WordPress/gutenberg/pull/34916)), FlexBlock ([34917](https://github.com/WordPress/gutenberg/pull/34917)), FlexItem ([34918](https://github.com/WordPress/gutenberg/pull/34918)), Grid ([34919](https://github.com/WordPress/gutenberg/pull/34919)), HStack ([34920](https://github.com/WordPress/gutenberg/pull/34920)), Heading ([34921](https://github.com/WordPress/gutenberg/pull/34921)), Scrollable ([34922](https://github.com/WordPress/gutenberg/pull/34922)), Spacer ([34923](https://github.com/WordPress/gutenberg/pull/34923)), Surface ([34924](https://github.com/WordPress/gutenberg/pull/34924)), Text ([34925](https://github.com/WordPress/gutenberg/pull/34925)), Truncate ([34926](https://github.com/WordPress/gutenberg/pull/34926)), VStack ([34928](https://github.com/WordPress/gutenberg/pull/34928)).
+-   Remove all dashicon usages from Storybook stories. ([33984](https://github.com/WordPress/gutenberg/pull/33984))
+-   Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. ([34966](https://github.com/WordPress/gutenberg/pull/34966))
 
 #### Global Styles
-- Fix Global Styles double border. ([34906](https://github.com/WordPress/gutenberg/pull/34906))
-- Rename globalStyles to styles. ([34946](https://github.com/WordPress/gutenberg/pull/34946))
+
+-   Fix Global Styles double border. ([34906](https://github.com/WordPress/gutenberg/pull/34906))
+-   Rename globalStyles to styles. ([34946](https://github.com/WordPress/gutenberg/pull/34946))
 
 #### i18n
-- Add a "translators:" comment in the core class used to implement a Block widget. ([34840](https://github.com/WordPress/gutenberg/pull/34840))
+
+-   Add a "translators:" comment in the core class used to implement a Block widget. ([34840](https://github.com/WordPress/gutenberg/pull/34840))
 
 ### Tools
 
 #### Testing
-- Add editor onboarding tests. ([34431](https://github.com/WordPress/gutenberg/pull/34431))
-- Fix flaky navigation editor test by waiting for required elements. ([34767](https://github.com/WordPress/gutenberg/pull/34767))
-- Fix native Latest Posts end-to-end device tests. ([34715](https://github.com/WordPress/gutenberg/pull/34715))
-- Iframed editor: Add jQuery integration end-to-end test. ([33007](https://github.com/WordPress/gutenberg/pull/33007))
-- Navigation Editor: Migrate from response mocking to rest api util. ([34869](https://github.com/WordPress/gutenberg/pull/34869))
-- Navigation Editor: Fix failing end-to-end test. ([34874](https://github.com/WordPress/gutenberg/pull/34874))
-- Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. ([34804](https://github.com/WordPress/gutenberg/pull/34804))
-- Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. ([35025](https://github.com/WordPress/gutenberg/pull/35025))
-- Try reporting flaky tests to issues. ([34432](https://github.com/WordPress/gutenberg/pull/34432))
-- Try to fix flaky iframe test. ([34776](https://github.com/WordPress/gutenberg/pull/34776))
-- Test that add_theme_supports are loaded for themes without theme.json. ([34998](https://github.com/WordPress/gutenberg/pull/34998))
-
-#### Build Tooling
-- Fix package lock inconsistencies. ([34790](https://github.com/WordPress/gutenberg/pull/34790))
-- Update caniuse package to the latest version. ([34685](https://github.com/WordPress/gutenberg/pull/34685))
-- VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. ([34269](https://github.com/WordPress/gutenberg/pull/34269))
-- Replace usages of workspaceRoot with workspaceFolder. ([34887](https://github.com/WordPress/gutenberg/pull/34887))
-- Bump jest-dev-server to v5. ([34560](https://github.com/WordPress/gutenberg/pull/34560))
-- ESLint Plugin: Update eslint jsdoc dependency. ([34338](https://github.com/WordPress/gutenberg/pull/34338))
-- Storybook: Remove G2 prefix from the Components section. ([34734](https://github.com/WordPress/gutenberg/pull/34734))
-- Block Editor: Update react-spring to 9.2.4. ([30979](https://github.com/WordPress/gutenberg/pull/30979))
-- Move react-native-url-polyfill to dev dependencies. ([34687](https://github.com/WordPress/gutenberg/pull/34687))
-- Use Jest related rules only when the package is installed. ([33120](https://github.com/WordPress/gutenberg/pull/33120))
-- Ensure that all *.asset.php files are included in plugin.zip. ([34875](https://github.com/WordPress/gutenberg/pull/34875))
-
-
 
+-   Add editor onboarding tests. ([34431](https://github.com/WordPress/gutenberg/pull/34431))
+-   Fix flaky navigation editor test by waiting for required elements. ([34767](https://github.com/WordPress/gutenberg/pull/34767))
+-   Fix native Latest Posts end-to-end device tests. ([34715](https://github.com/WordPress/gutenberg/pull/34715))
+-   Iframed editor: Add jQuery integration end-to-end test. ([33007](https://github.com/WordPress/gutenberg/pull/33007))
+-   Navigation Editor: Migrate from response mocking to rest api util. ([34869](https://github.com/WordPress/gutenberg/pull/34869))
+-   Navigation Editor: Fix failing end-to-end test. ([34874](https://github.com/WordPress/gutenberg/pull/34874))
+-   Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. ([34804](https://github.com/WordPress/gutenberg/pull/34804))
+-   Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. ([35025](https://github.com/WordPress/gutenberg/pull/35025))
+-   Try reporting flaky tests to issues. ([34432](https://github.com/WordPress/gutenberg/pull/34432))
+-   Try to fix flaky iframe test. ([34776](https://github.com/WordPress/gutenberg/pull/34776))
+-   Test that add_theme_supports are loaded for themes without theme.json. ([34998](https://github.com/WordPress/gutenberg/pull/34998))
 
+#### Build Tooling
 
+-   Fix package lock inconsistencies. ([34790](https://github.com/WordPress/gutenberg/pull/34790))
+-   Update caniuse package to the latest version. ([34685](https://github.com/WordPress/gutenberg/pull/34685))
+-   VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. ([34269](https://github.com/WordPress/gutenberg/pull/34269))
+-   Replace usages of workspaceRoot with workspaceFolder. ([34887](https://github.com/WordPress/gutenberg/pull/34887))
+-   Bump jest-dev-server to v5. ([34560](https://github.com/WordPress/gutenberg/pull/34560))
+-   ESLint Plugin: Update eslint jsdoc dependency. ([34338](https://github.com/WordPress/gutenberg/pull/34338))
+-   Storybook: Remove G2 prefix from the Components section. ([34734](https://github.com/WordPress/gutenberg/pull/34734))
+-   Block Editor: Update react-spring to 9.2.4. ([30979](https://github.com/WordPress/gutenberg/pull/30979))
+-   Move react-native-url-polyfill to dev dependencies. ([34687](https://github.com/WordPress/gutenberg/pull/34687))
+-   Use Jest related rules only when the package is installed. ([33120](https://github.com/WordPress/gutenberg/pull/33120))
+-   Ensure that all \*.asset.php files are included in plugin.zip. ([34875](https://github.com/WordPress/gutenberg/pull/34875))
 
 = 11.5.1 =
 
+## Changelog
+
 ### Bug Fixes
 
 #### Global Styles
 
-- Fix theme supports for themes without theme.json. ([34955](https://github.com/WordPress/gutenberg/pull/34955))
+-   Fix theme supports for themes without theme.json. ([34955](https://github.com/WordPress/gutenberg/pull/34955))
 
 ### Various
 
-- Build plugin zip: Verify npm cache before a clean install. ([34973](https://github.com/WordPress/gutenberg/pull/34973))
-
-
-
-
+-   Build plugin zip: Verify npm cache before a clean install. ([34973](https://github.com/WordPress/gutenberg/pull/34973))
 
 = 11.5.0 =
 
+## Changelog
+
 ### Features
 
 #### Design Tools
-- Block Support: Add gap block support feature. ([33991](https://github.com/WordPress/gutenberg/pull/33991))
+
+-   Block Support: Add gap block support feature. ([33991](https://github.com/WordPress/gutenberg/pull/33991))
 
 ### Enhancements
 
 #### Accessibility
-- Font weight screen reader description. ([34312](https://github.com/WordPress/gutenberg/pull/34312))
+
+-   Font weight screen reader description. ([34312](https://github.com/WordPress/gutenberg/pull/34312))
+
 #### Block Editor:
-- Media Placeholder: Change media URL input type to allow a local URL path. ([29138](https://github.com/WordPress/gutenberg/pull/29138))
-#### Block Library
-- Columns Block: Use `blockGap` between Columns blocks. ([34456](https://github.com/WordPress/gutenberg/pull/34456))
-- Group Block: Add a row variation. ([34535](https://github.com/WordPress/gutenberg/pull/34535))
-- Heading Block: Vertical heading levels menu. ([32926](https://github.com/WordPress/gutenberg/pull/32926))
-- Navigation Block: Allow Site Title and Logo inside Navigation block. ([33316](https://github.com/WordPress/gutenberg/pull/33316))
-- Navigation Block, List View: Do not show appender and avoid closing the modal on block select. ([34337](https://github.com/WordPress/gutenberg/pull/34337))
-- Navigation Block: Remove horizontal and vertical navigation block variations from inserter. ([34614](https://github.com/WordPress/gutenberg/pull/34614))
-- Navigation Block: Use gap instead of margin. ([32367](https://github.com/WordPress/gutenberg/pull/32367))
-- Post Author Block: Add duotone suport. ([34408](https://github.com/WordPress/gutenberg/pull/34408))
-- Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block's arrow. ([33656](https://github.com/WordPress/gutenberg/pull/33656))
-- Site Logo Block: Update block description to be concise. ([34471](https://github.com/WordPress/gutenberg/pull/34471))
-- Site Title Block: Update block description to be concise. ([34475](https://github.com/WordPress/gutenberg/pull/34475))
-- Social Links Block: Use the new `flex` layout. ([34493](https://github.com/WordPress/gutenberg/pull/34493))
-- Video Block: Use existing video poster image on insert. ([34415](https://github.com/WordPress/gutenberg/pull/34415))
-#### Components
-- MenuItem: Add right padding for unchecked radio and checkbox items. ([34406](https://github.com/WordPress/gutenberg/pull/34406))
-- ToggleGroupControl: Update stories to use knobs. ([34497](https://github.com/WordPress/gutenberg/pull/34497))
+
+-   Media Placeholder: Change media URL input type to allow a local URL path. ([29138](https://github.com/WordPress/gutenberg/pull/29138))
+
+#### Block Library
+
+-   Columns Block: Use `blockGap` between Columns blocks. ([34456](https://github.com/WordPress/gutenberg/pull/34456))
+-   Group Block: Add a row variation. ([34535](https://github.com/WordPress/gutenberg/pull/34535))
+-   Heading Block: Vertical heading levels menu. ([32926](https://github.com/WordPress/gutenberg/pull/32926))
+-   Navigation Block: Allow Site Title and Logo inside Navigation block. ([33316](https://github.com/WordPress/gutenberg/pull/33316))
+-   Navigation Block, List View: Do not show appender and avoid closing the modal on block select. ([34337](https://github.com/WordPress/gutenberg/pull/34337))
+-   Navigation Block: Remove horizontal and vertical navigation block variations from inserter. ([34614](https://github.com/WordPress/gutenberg/pull/34614))
+-   Navigation Block: Use gap instead of margin. ([32367](https://github.com/WordPress/gutenberg/pull/32367))
+-   Post Author Block: Add duotone suport. ([34408](https://github.com/WordPress/gutenberg/pull/34408))
+-   Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block's arrow. ([33656](https://github.com/WordPress/gutenberg/pull/33656))
+-   Site Logo Block: Update block description to be concise. ([34471](https://github.com/WordPress/gutenberg/pull/34471))
+-   Site Title Block: Update block description to be concise. ([34475](https://github.com/WordPress/gutenberg/pull/34475))
+-   Social Links Block: Use the new `flex` layout. ([34493](https://github.com/WordPress/gutenberg/pull/34493))
+-   Video Block: Use existing video poster image on insert. ([34415](https://github.com/WordPress/gutenberg/pull/34415))
+
+#### Components
+
+-   MenuItem: Add right padding for unchecked radio and checkbox items. ([34406](https://github.com/WordPress/gutenberg/pull/34406))
+-   ToggleGroupControl: Update stories to use knobs. ([34497](https://github.com/WordPress/gutenberg/pull/34497))
+
 #### Core Data
-- Add `isRawAttribute` to entity configuration. ([34388](https://github.com/WordPress/gutenberg/pull/34388))
+
+-   Add `isRawAttribute` to entity configuration. ([34388](https://github.com/WordPress/gutenberg/pull/34388))
+
 #### Design Tools
-- Add wide alignment control only if theme provides `layout.wideSize`. ([34586](https://github.com/WordPress/gutenberg/pull/34586))
-- Update justification control in `flex` layout. ([34651](https://github.com/WordPress/gutenberg/pull/34651))
-- ToolsPanel: Change icon from horizontal to vertical ellipsis. ([34369](https://github.com/WordPress/gutenberg/pull/34369))
+
+-   Add wide alignment control only if theme provides `layout.wideSize`. ([34586](https://github.com/WordPress/gutenberg/pull/34586))
+-   Update justification control in `flex` layout. ([34651](https://github.com/WordPress/gutenberg/pull/34651))
+-   ToolsPanel: Change icon from horizontal to vertical ellipsis. ([34369](https://github.com/WordPress/gutenberg/pull/34369))
+
 #### Full Site Editing
-- Limit FSE admin notices to the Themes screen. ([34353](https://github.com/WordPress/gutenberg/pull/34353))
+
+-   Limit FSE admin notices to the Themes screen. ([34353](https://github.com/WordPress/gutenberg/pull/34353))
+
 #### Global Styles
-- Allow disabling `text` and `background` color via `theme.json`. ([34420](https://github.com/WordPress/gutenberg/pull/34420))
-- Make global styles available to all themes. ([34334](https://github.com/WordPress/gutenberg/pull/34334))
+
+-   Allow disabling `text` and `background` color via `theme.json`. ([34420](https://github.com/WordPress/gutenberg/pull/34420))
+-   Make global styles available to all themes. ([34334](https://github.com/WordPress/gutenberg/pull/34334))
+
 #### i18n
-- Add context to 'none' strings for better translations. ([34341](https://github.com/WordPress/gutenberg/pull/34341))
-- Make permalinks documentation URL translatable. ([34282](https://github.com/WordPress/gutenberg/pull/34282))
+
+-   Add context to 'none' strings for better translations. ([34341](https://github.com/WordPress/gutenberg/pull/34341))
+-   Make permalinks documentation URL translatable. ([34282](https://github.com/WordPress/gutenberg/pull/34282))
+
 #### Post Editor
-- Expose `ThemeSupportCheck` component. ([20506](https://github.com/WordPress/gutenberg/pull/20506))
-- Title block gap. ([34570](https://github.com/WordPress/gutenberg/pull/34570))
+
+-   Expose `ThemeSupportCheck` component. ([20506](https://github.com/WordPress/gutenberg/pull/20506))
+-   Title block gap. ([34570](https://github.com/WordPress/gutenberg/pull/34570))
+
 #### Themes
-- Add default editor styles applied to themes without `theme.json` and without editor styles. ([34439](https://github.com/WordPress/gutenberg/pull/34439))
+
+-   Add default editor styles applied to themes without `theme.json` and without editor styles. ([34439](https://github.com/WordPress/gutenberg/pull/34439))
+
 #### Widgets Editor
-- Add 'Widget Group' block to widgets screens. ([34484](https://github.com/WordPress/gutenberg/pull/34484))
-- Legacy widget rendering endpoint. ([34230](https://github.com/WordPress/gutenberg/pull/34230))
+
+-   Add 'Widget Group' block to widgets screens. ([34484](https://github.com/WordPress/gutenberg/pull/34484))
+-   Legacy widget rendering endpoint. ([34230](https://github.com/WordPress/gutenberg/pull/34230))
 
 ### New APIs
 
 #### Design Tools
-- Allow themes with `theme.json` to opt-out of block gap styles. ([34491](https://github.com/WordPress/gutenberg/pull/34491))
+
+-   Allow themes with `theme.json` to opt-out of block gap styles. ([34491](https://github.com/WordPress/gutenberg/pull/34491))
 
 ### Bug Fixes
 
 #### Accessibility
-- Fix button block focus trap after a URL has been added. ([34314](https://github.com/WordPress/gutenberg/pull/34314))
-#### Block Editor
-- Fix menu item padding regression. ([34435](https://github.com/WordPress/gutenberg/pull/34435))
-- Fix text-menu min widths. ([34532](https://github.com/WordPress/gutenberg/pull/34532))
-- Keep id on paste if internal link points to it. ([31107](https://github.com/WordPress/gutenberg/pull/31107))
-- Fix caret position on block merging. ([34169](https://github.com/WordPress/gutenberg/pull/34169))
-#### Block Library
-- Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. ([34222](https://github.com/WordPress/gutenberg/pull/34222))
-- Gallery Block: Fix bug with stalled upload when image size too large. ([34371](https://github.com/WordPress/gutenberg/pull/34371))
-- Gallery Block: Fix media placeholder height in site editor. ([34629](https://github.com/WordPress/gutenberg/pull/34629))
-- Gallery Block: Fix problem with overflowing captions on new gallery block format. ([34402](https://github.com/WordPress/gutenberg/pull/34402))
-- Latest Posts: Fix various React warnings in development log. ([34428](https://github.com/WordPress/gutenberg/pull/34428))
-- Navigation: Fix navigation block classname issues. ([34344](https://github.com/WordPress/gutenberg/pull/34344))
-- Navigation: Fix Page List styles inside responsive Navigation. ([34517](https://github.com/WordPress/gutenberg/pull/34517))
-- Navigation: Fix responsive menu height regression. ([34488](https://github.com/WordPress/gutenberg/pull/34488))
-- Navigation: Fix submenu layout in navigation page list. ([34342](https://github.com/WordPress/gutenberg/pull/34342))
-- Navigation: Fix submenus to only take up space when visible. ([34382](https://github.com/WordPress/gutenberg/pull/34382))
-- Navigation: Fix undo/redo 'trap' in navigation link block. ([34565](https://github.com/WordPress/gutenberg/pull/34565))
-- Site Title: Allow empty title in edit mode. ([34274](https://github.com/WordPress/gutenberg/pull/34274))
-- Social Links Block: Fix deprecation. ([34639](https://github.com/WordPress/gutenberg/pull/34639))
-- Video Block: Fix `TypeError` when removing poster. ([34411](https://github.com/WordPress/gutenberg/pull/34411))
-#### Components
-- Align labels on focal point picker position controls above the inputs. ([34209](https://github.com/WordPress/gutenberg/pull/34209))
-- Check if in browser env before calling `CSS.supports`. ([34572](https://github.com/WordPress/gutenberg/pull/34572))
-- Combobox Component: Only force expanded state if the input has focus. ([34090](https://github.com/WordPress/gutenberg/pull/34090))
-- CustomSelectControl: Add describedBy fallback. ([34385](https://github.com/WordPress/gutenberg/pull/34385))
-- DateTime Component: Fix sizing of help info. ([34370](https://github.com/WordPress/gutenberg/pull/34370))
-- Fix `ToggleGroupControlBackdrop` not updating size when `isAdaptiveWidth` prop changes. ([34595](https://github.com/WordPress/gutenberg/pull/34595))
-- Fix selected value computation in `CustomSelectControl` when no initial `value` is set. ([34490](https://github.com/WordPress/gutenberg/pull/34490))
-- Fix subheadings from wrapping. ([34319](https://github.com/WordPress/gutenberg/pull/34319))
+
+-   Fix button block focus trap after a URL has been added. ([34314](https://github.com/WordPress/gutenberg/pull/34314))
+
+#### Block Editor
+
+-   Fix menu item padding regression. ([34435](https://github.com/WordPress/gutenberg/pull/34435))
+-   Fix text-menu min widths. ([34532](https://github.com/WordPress/gutenberg/pull/34532))
+-   Keep id on paste if internal link points to it. ([31107](https://github.com/WordPress/gutenberg/pull/31107))
+-   Fix caret position on block merging. ([34169](https://github.com/WordPress/gutenberg/pull/34169))
+
+#### Block Library
+
+-   Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. ([34222](https://github.com/WordPress/gutenberg/pull/34222))
+-   Gallery Block: Fix bug with stalled upload when image size too large. ([34371](https://github.com/WordPress/gutenberg/pull/34371))
+-   Gallery Block: Fix media placeholder height in site editor. ([34629](https://github.com/WordPress/gutenberg/pull/34629))
+-   Gallery Block: Fix problem with overflowing captions on new gallery block format. ([34402](https://github.com/WordPress/gutenberg/pull/34402))
+-   Latest Posts: Fix various React warnings in development log. ([34428](https://github.com/WordPress/gutenberg/pull/34428))
+-   Navigation: Fix navigation block classname issues. ([34344](https://github.com/WordPress/gutenberg/pull/34344))
+-   Navigation: Fix Page List styles inside responsive Navigation. ([34517](https://github.com/WordPress/gutenberg/pull/34517))
+-   Navigation: Fix responsive menu height regression. ([34488](https://github.com/WordPress/gutenberg/pull/34488))
+-   Navigation: Fix submenu layout in navigation page list. ([34342](https://github.com/WordPress/gutenberg/pull/34342))
+-   Navigation: Fix submenus to only take up space when visible. ([34382](https://github.com/WordPress/gutenberg/pull/34382))
+-   Navigation: Fix undo/redo 'trap' in navigation link block. ([34565](https://github.com/WordPress/gutenberg/pull/34565))
+-   Site Title: Allow empty title in edit mode. ([34274](https://github.com/WordPress/gutenberg/pull/34274))
+-   Social Links Block: Fix deprecation. ([34639](https://github.com/WordPress/gutenberg/pull/34639))
+-   Video Block: Fix `TypeError` when removing poster. ([34411](https://github.com/WordPress/gutenberg/pull/34411))
+
+#### Components
+
+-   Align labels on focal point picker position controls above the inputs. ([34209](https://github.com/WordPress/gutenberg/pull/34209))
+-   Check if in browser env before calling `CSS.supports`. ([34572](https://github.com/WordPress/gutenberg/pull/34572))
+-   Combobox Component: Only force expanded state if the input has focus. ([34090](https://github.com/WordPress/gutenberg/pull/34090))
+-   CustomSelectControl: Add describedBy fallback. ([34385](https://github.com/WordPress/gutenberg/pull/34385))
+-   DateTime Component: Fix sizing of help info. ([34370](https://github.com/WordPress/gutenberg/pull/34370))
+-   Fix `ToggleGroupControlBackdrop` not updating size when `isAdaptiveWidth` prop changes. ([34595](https://github.com/WordPress/gutenberg/pull/34595))
+-   Fix selected value computation in `CustomSelectControl` when no initial `value` is set. ([34490](https://github.com/WordPress/gutenberg/pull/34490))
+-   Fix subheadings from wrapping. ([34319](https://github.com/WordPress/gutenberg/pull/34319))
+
 #### Design Tools
-- Border Controls: Display color indicator and check selected color. ([34467](https://github.com/WordPress/gutenberg/pull/34467))
-- Border Support: Fix check for displaying border support panel. ([34516](https://github.com/WordPress/gutenberg/pull/34516))
-- Gap block support: Force gap change to cause the block to re-render (fix Safari issue). ([34567](https://github.com/WordPress/gutenberg/pull/34567))
-- Letter Spacing: Group letter spacing correctly under typography supports. ([34515](https://github.com/WordPress/gutenberg/pull/34515))
+
+-   Border Controls: Display color indicator and check selected color. ([34467](https://github.com/WordPress/gutenberg/pull/34467))
+-   Border Support: Fix check for displaying border support panel. ([34516](https://github.com/WordPress/gutenberg/pull/34516))
+-   Gap block support: Force gap change to cause the block to re-render (fix Safari issue). ([34567](https://github.com/WordPress/gutenberg/pull/34567))
+-   Letter Spacing: Group letter spacing correctly under typography supports. ([34515](https://github.com/WordPress/gutenberg/pull/34515))
+
 #### Global Styles
-- Fix block-level global styles color panels. ([34293](https://github.com/WordPress/gutenberg/pull/34293))
-- Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. ([34520](https://github.com/WordPress/gutenberg/pull/34520))
+
+-   Fix block-level global styles color panels. ([34293](https://github.com/WordPress/gutenberg/pull/34293))
+-   Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. ([34520](https://github.com/WordPress/gutenberg/pull/34520))
+
 #### Meta Boxes
-- Change default value of `enableCustomFields` to `undefined`. ([33931](https://github.com/WordPress/gutenberg/pull/33931))
-- Fix metabox reordering. ([30617](https://github.com/WordPress/gutenberg/pull/30617))
+
+-   Change default value of `enableCustomFields` to `undefined`. ([33931](https://github.com/WordPress/gutenberg/pull/33931))
+-   Fix metabox reordering. ([30617](https://github.com/WordPress/gutenberg/pull/30617))
+
 #### Packages
-- Blocks: Register block when invalid value provided for the icon. ([34350](https://github.com/WordPress/gutenberg/pull/34350))
-- Core Data: Add 'include' to the query key. ([34583](https://github.com/WordPress/gutenberg/pull/34583))
-- Core Data: Use `resolveSelect` instead of `select` in `saveEntityRecord`. ([34584](https://github.com/WordPress/gutenberg/pull/34584))
-- Interface: Block Toolbar & Popover component - Prevent sticky position from causing permanently obscured areas of the selected block. ([33981](https://github.com/WordPress/gutenberg/pull/33981))
-- Scripts: Only use svgr/webpack in js files. ([34394](https://github.com/WordPress/gutenberg/pull/34394))
-- Scripts: Convert legacy entry point arguments for compatibility with webpack 5. ([34264](https://github.com/WordPress/gutenberg/pull/34264))
+
+-   Blocks: Register block when invalid value provided for the icon. ([34350](https://github.com/WordPress/gutenberg/pull/34350))
+-   Core Data: Add 'include' to the query key. ([34583](https://github.com/WordPress/gutenberg/pull/34583))
+-   Core Data: Use `resolveSelect` instead of `select` in `saveEntityRecord`. ([34584](https://github.com/WordPress/gutenberg/pull/34584))
+-   Interface: Block Toolbar & Popover component - Prevent sticky position from causing permanently obscured areas of the selected block. ([33981](https://github.com/WordPress/gutenberg/pull/33981))
+-   Scripts: Only use svgr/webpack in js files. ([34394](https://github.com/WordPress/gutenberg/pull/34394))
+-   Scripts: Convert legacy entry point arguments for compatibility with webpack 5. ([34264](https://github.com/WordPress/gutenberg/pull/34264))
+
 #### REST API
-- Default batch processor: Respect the batch endpoint's `maxItems`. ([34280](https://github.com/WordPress/gutenberg/pull/34280))
+
+-   Default batch processor: Respect the batch endpoint's `maxItems`. ([34280](https://github.com/WordPress/gutenberg/pull/34280))
+
 #### Widgets Editor
-- Fix Block Settings sidebar unexpectedly collapsing. ([34543](https://github.com/WordPress/gutenberg/pull/34543))
-- Legacy widget's preview functionality is broken when the page is moved. ([34384](https://github.com/WordPress/gutenberg/pull/34384))
-- Prevent focus trap in Legacy Widget block’s preview iframe. ([33614](https://github.com/WordPress/gutenberg/pull/33614))
+
+-   Fix Block Settings sidebar unexpectedly collapsing. ([34543](https://github.com/WordPress/gutenberg/pull/34543))
+-   Legacy widget's preview functionality is broken when the page is moved. ([34384](https://github.com/WordPress/gutenberg/pull/34384))
+-   Prevent focus trap in Legacy Widget block’s preview iframe. ([33614](https://github.com/WordPress/gutenberg/pull/33614))
 
 ### Performance
 
 #### Block Editor
-- Improve the `getBlock` and `getBlocks` performance. ([34241](https://github.com/WordPress/gutenberg/pull/34241))
-- Remove duplicated `useValidAlignment` hook. ([34593](https://github.com/WordPress/gutenberg/pull/34593))
+
+-   Improve the `getBlock` and `getBlocks` performance. ([34241](https://github.com/WordPress/gutenberg/pull/34241))
+-   Remove duplicated `useValidAlignment` hook. ([34593](https://github.com/WordPress/gutenberg/pull/34593))
+
 #### Core Data
-- Move locks state from store to local variable. ([34374](https://github.com/WordPress/gutenberg/pull/34374))
+
+-   Move locks state from store to local variable. ([34374](https://github.com/WordPress/gutenberg/pull/34374))
+
 #### Global Styles
-- Remove colors classes from the packages that are already provided by global styles. ([34510](https://github.com/WordPress/gutenberg/pull/34510))
+
+-   Remove colors classes from the packages that are already provided by global styles. ([34510](https://github.com/WordPress/gutenberg/pull/34510))
 
 ### Experiments
 
 #### Navigation Editor
-- Add undo redo buttons in navigation editor. ([34533](https://github.com/WordPress/gutenberg/pull/34533))
-- Decode entities in the menu names. ([34263](https://github.com/WordPress/gutenberg/pull/34263))
-- Disable "block-nav-menus" feature for the purposes of removing the "experimental" status on the Navigation Editor. ([34444](https://github.com/WordPress/gutenberg/pull/34444))
-- Preload menu REST API requests on new navigation editor. ([34364](https://github.com/WordPress/gutenberg/pull/34364))
-- Update navigation editor placeholder. ([34568](https://github.com/WordPress/gutenberg/pull/34568))
+
+-   Add undo redo buttons in navigation editor. ([34533](https://github.com/WordPress/gutenberg/pull/34533))
+-   Decode entities in the menu names. ([34263](https://github.com/WordPress/gutenberg/pull/34263))
+-   Disable "block-nav-menus" feature for the purposes of removing the "experimental" status on the Navigation Editor. ([34444](https://github.com/WordPress/gutenberg/pull/34444))
+-   Preload menu REST API requests on new navigation editor. ([34364](https://github.com/WordPress/gutenberg/pull/34364))
+-   Update navigation editor placeholder. ([34568](https://github.com/WordPress/gutenberg/pull/34568))
 
 ### Documentation
 
 #### Handbook
-- Replace `withSelect` references with `useSelect`. ([34549](https://github.com/WordPress/gutenberg/pull/34549))
-- Updated Template Section copy. ([34383](https://github.com/WordPress/gutenberg/pull/34383))
-- Update block variations documentation about `block` scope. ([34455](https://github.com/WordPress/gutenberg/pull/34455))
+
+-   Replace `withSelect` references with `useSelect`. ([34549](https://github.com/WordPress/gutenberg/pull/34549))
+-   Updated Template Section copy. ([34383](https://github.com/WordPress/gutenberg/pull/34383))
+-   Update block variations documentation about `block` scope. ([34455](https://github.com/WordPress/gutenberg/pull/34455))
+
 #### Packages
-- Blocks: Correct typo in Blocks Documentation. ([34396](https://github.com/WordPress/gutenberg/pull/34396))
-- Componentes: Fix/update documentation alignment matrix control. ([34624](https://github.com/WordPress/gutenberg/pull/34624))
-- Componentes: Update `DuotonePicker` documentation for accuracy. ([34494](https://github.com/WordPress/gutenberg/pull/34494))
-- Eslint: Add `no-unsafe-wp-apis` to rules list in the documentation. ([34416](https://github.com/WordPress/gutenberg/pull/34416))
-- Prettier: Correct syntax in `README.md` for `prettier-config`. ([34600](https://github.com/WordPress/gutenberg/pull/34600))
 
+-   Blocks: Correct typo in Blocks Documentation. ([34396](https://github.com/WordPress/gutenberg/pull/34396))
+-   Componentes: Fix/update documentation alignment matrix control. ([34624](https://github.com/WordPress/gutenberg/pull/34624))
+-   Componentes: Update `DuotonePicker` documentation for accuracy. ([34494](https://github.com/WordPress/gutenberg/pull/34494))
+-   Eslint: Add `no-unsafe-wp-apis` to rules list in the documentation. ([34416](https://github.com/WordPress/gutenberg/pull/34416))
+-   Prettier: Correct syntax in `README.md` for `prettier-config`. ([34600](https://github.com/WordPress/gutenberg/pull/34600))
 
 ### Code Quality
 
 #### Block Editor
-- Code cleanup to the `getBlock` refactoring. ([34326](https://github.com/WordPress/gutenberg/pull/34326))
-- Ensure that `blockType` is defined when accessing `apiVersion`. ([34346](https://github.com/WordPress/gutenberg/pull/34346))
-- Migrate `lightBlockWrapper` support to `apiVersion` for blocks. ([34459](https://github.com/WordPress/gutenberg/pull/34459))
-- Fix Animated warning log. ([34197](https://github.com/WordPress/gutenberg/pull/34197))
-- Rich Text: Replace global event handlers with local ones. ([34492](https://github.com/WordPress/gutenberg/pull/34492))
-- Rich text (core): OnFocus method can be replaced with HTMLElement.focus. ([32054](https://github.com/WordPress/gutenberg/pull/32054))
-- Use Setting: Consolidate the `PATHS_WITH_MERGE` constant to one instance. ([34407](https://github.com/WordPress/gutenberg/pull/34407))
-#### Block Library
-- Gallery Block: Add docblock comments to the new gallery hooks. ([34562](https://github.com/WordPress/gutenberg/pull/34562))
-- Gallery Block: Remove IE specific CSS hacks. ([34372](https://github.com/WordPress/gutenberg/pull/34372))
-- Button Block: Replace global shortcut event handlers with local ones. ([34498](https://github.com/WordPress/gutenberg/pull/34498))
-- Navigation Block: Refactor to use generic classnames. ([34171](https://github.com/WordPress/gutenberg/pull/34171))
-- Navigation Link Block: Replace global shortcut event handlers with local ones. ([34500](https://github.com/WordPress/gutenberg/pull/34500))
-- Gallery Block: Remove redundant css selector. ([34277](https://github.com/WordPress/gutenberg/pull/34277))
-#### Components
-- CustomGradientBar: Replace global shortcut event handlers with local ones. ([34505](https://github.com/WordPress/gutenberg/pull/34505))
-- Guide: Replace global shortcut event handlers with local ones. ([34503](https://github.com/WordPress/gutenberg/pull/34503))
-- Navigate regions: Use React events for shortcuts (portal bubbles & contextual). ([33633](https://github.com/WordPress/gutenberg/pull/33633))
-- Rename `PolymorphicComponent*` types to `WordPressComponent*`. ([34330](https://github.com/WordPress/gutenberg/pull/34330))
-- Simplify Modal with hooks. ([34412](https://github.com/WordPress/gutenberg/pull/34412))
-- Simplify & polish heading levels. ([34378](https://github.com/WordPress/gutenberg/pull/34378))
+
+-   Code cleanup to the `getBlock` refactoring. ([34326](https://github.com/WordPress/gutenberg/pull/34326))
+-   Ensure that `blockType` is defined when accessing `apiVersion`. ([34346](https://github.com/WordPress/gutenberg/pull/34346))
+-   Migrate `lightBlockWrapper` support to `apiVersion` for blocks. ([34459](https://github.com/WordPress/gutenberg/pull/34459))
+-   Fix Animated warning log. ([34197](https://github.com/WordPress/gutenberg/pull/34197))
+-   Rich Text: Replace global event handlers with local ones. ([34492](https://github.com/WordPress/gutenberg/pull/34492))
+-   Rich text (core): OnFocus method can be replaced with HTMLElement.focus. ([32054](https://github.com/WordPress/gutenberg/pull/32054))
+-   Use Setting: Consolidate the `PATHS_WITH_MERGE` constant to one instance. ([34407](https://github.com/WordPress/gutenberg/pull/34407))
+
+#### Block Library
+
+-   Gallery Block: Add docblock comments to the new gallery hooks. ([34562](https://github.com/WordPress/gutenberg/pull/34562))
+-   Gallery Block: Remove IE specific CSS hacks. ([34372](https://github.com/WordPress/gutenberg/pull/34372))
+-   Button Block: Replace global shortcut event handlers with local ones. ([34498](https://github.com/WordPress/gutenberg/pull/34498))
+-   Navigation Block: Refactor to use generic classnames. ([34171](https://github.com/WordPress/gutenberg/pull/34171))
+-   Navigation Link Block: Replace global shortcut event handlers with local ones. ([34500](https://github.com/WordPress/gutenberg/pull/34500))
+-   Gallery Block: Remove redundant css selector. ([34277](https://github.com/WordPress/gutenberg/pull/34277))
+
+#### Components
+
+-   CustomGradientBar: Replace global shortcut event handlers with local ones. ([34505](https://github.com/WordPress/gutenberg/pull/34505))
+-   Guide: Replace global shortcut event handlers with local ones. ([34503](https://github.com/WordPress/gutenberg/pull/34503))
+-   Navigate regions: Use React events for shortcuts (portal bubbles & contextual). ([33633](https://github.com/WordPress/gutenberg/pull/33633))
+-   Rename `PolymorphicComponent*` types to `WordPressComponent*`. ([34330](https://github.com/WordPress/gutenberg/pull/34330))
+-   Simplify Modal with hooks. ([34412](https://github.com/WordPress/gutenberg/pull/34412))
+-   Simplify & polish heading levels. ([34378](https://github.com/WordPress/gutenberg/pull/34378))
+
 #### Core Data
-- Fix linting errors. ([34596](https://github.com/WordPress/gutenberg/pull/34596))
-- Fix linting error in trunk. ([34464](https://github.com/WordPress/gutenberg/pull/34464))
-- Migrate `canUser` resolver to thunks. ([34580](https://github.com/WordPress/gutenberg/pull/34580))
-- Migrate `entities.js` to thunks. ([34582](https://github.com/WordPress/gutenberg/pull/34582))
-- Migrate `getAutosaves` resolver to thunks. ([34581](https://github.com/WordPress/gutenberg/pull/34581))
-- Migrate `getEntityRecord` resolver to thunks. ([34576](https://github.com/WordPress/gutenberg/pull/34576))
-- Migrate `getEntityRecords` resolver to thunks. ([34578](https://github.com/WordPress/gutenberg/pull/34578))
-- Migrate resolvers to thunks: `GetAuthors`, `_getCurrentUser`, `__getCurrentTheme`, `__getThemeSupports`. ([34579](https://github.com/WordPress/gutenberg/pull/34579))
-- Refactor `deleteEntityRecord` to use thunks instead of generators. ([34386](https://github.com/WordPress/gutenberg/pull/34386))
-- Refactor `editEntityRecord`, undo, and redo to be thunks instead of generators. ([34387](https://github.com/WordPress/gutenberg/pull/34387))
-- Remove the `PROCESS_PENDING_LOCK_REQUESTS` action. ([34343](https://github.com/WordPress/gutenberg/pull/34343))
-- Refactor `saveEntityRecord` from `redux-rungen` to async thunks. ([33201](https://github.com/WordPress/gutenberg/pull/33201))
-- Remove extraction of raw values in `saveEntityRecords`. ([34502](https://github.com/WordPress/gutenberg/pull/34502))
+
+-   Fix linting errors. ([34596](https://github.com/WordPress/gutenberg/pull/34596))
+-   Fix linting error in trunk. ([34464](https://github.com/WordPress/gutenberg/pull/34464))
+-   Migrate `canUser` resolver to thunks. ([34580](https://github.com/WordPress/gutenberg/pull/34580))
+-   Migrate `entities.js` to thunks. ([34582](https://github.com/WordPress/gutenberg/pull/34582))
+-   Migrate `getAutosaves` resolver to thunks. ([34581](https://github.com/WordPress/gutenberg/pull/34581))
+-   Migrate `getEntityRecord` resolver to thunks. ([34576](https://github.com/WordPress/gutenberg/pull/34576))
+-   Migrate `getEntityRecords` resolver to thunks. ([34578](https://github.com/WordPress/gutenberg/pull/34578))
+-   Migrate resolvers to thunks: `GetAuthors`, `_getCurrentUser`, `__getCurrentTheme`, `__getThemeSupports`. ([34579](https://github.com/WordPress/gutenberg/pull/34579))
+-   Refactor `deleteEntityRecord` to use thunks instead of generators. ([34386](https://github.com/WordPress/gutenberg/pull/34386))
+-   Refactor `editEntityRecord`, undo, and redo to be thunks instead of generators. ([34387](https://github.com/WordPress/gutenberg/pull/34387))
+-   Remove the `PROCESS_PENDING_LOCK_REQUESTS` action. ([34343](https://github.com/WordPress/gutenberg/pull/34343))
+-   Refactor `saveEntityRecord` from `redux-rungen` to async thunks. ([33201](https://github.com/WordPress/gutenberg/pull/33201))
+-   Remove extraction of raw values in `saveEntityRecords`. ([34502](https://github.com/WordPress/gutenberg/pull/34502))
+
 #### Other Packages
-- Compose, useDropZone: Ensure drag event targets `HTMLElement`. ([34272](https://github.com/WordPress/gutenberg/pull/34272))
-- Editor: Replace hardcoded store key. ([34296](https://github.com/WordPress/gutenberg/pull/34296))
-- Env: Clarify config error within `parse-config.js`. ([34322](https://github.com/WordPress/gutenberg/pull/34322))
-- Post Editor: Fix gray W menu color. ([34318](https://github.com/WordPress/gutenberg/pull/34318))
-- URL: Add `getFilename` method to the URL package. ([34313](https://github.com/WordPress/gutenberg/pull/34313))
 
+-   Compose, useDropZone: Ensure drag event targets `HTMLElement`. ([34272](https://github.com/WordPress/gutenberg/pull/34272))
+-   Editor: Replace hardcoded store key. ([34296](https://github.com/WordPress/gutenberg/pull/34296))
+-   Env: Clarify config error within `parse-config.js`. ([34322](https://github.com/WordPress/gutenberg/pull/34322))
+-   Post Editor: Fix gray W menu color. ([34318](https://github.com/WordPress/gutenberg/pull/34318))
+-   URL: Add `getFilename` method to the URL package. ([34313](https://github.com/WordPress/gutenberg/pull/34313))
 
 ### Tools
 
 #### Build Tooling
-- ESLint: Add `useSelect` to direct function calls list. ([34301](https://github.com/WordPress/gutenberg/pull/34301))
-- ESLint: Update error message for `@emotion/css` with info about the `useCx` hook. ([34418](https://github.com/WordPress/gutenberg/pull/34418))
-- Fix build hang on Windows 10. ([23589](https://github.com/WordPress/gutenberg/pull/23589))
-- Linting: Remove global event listener warning. ([34528](https://github.com/WordPress/gutenberg/pull/34528))
-- More work on the stability of the performance metrics. ([34229](https://github.com/WordPress/gutenberg/pull/34229))
+
+-   ESLint: Add `useSelect` to direct function calls list. ([34301](https://github.com/WordPress/gutenberg/pull/34301))
+-   ESLint: Update error message for `@emotion/css` with info about the `useCx` hook. ([34418](https://github.com/WordPress/gutenberg/pull/34418))
+-   Fix build hang on Windows 10. ([23589](https://github.com/WordPress/gutenberg/pull/23589))
+-   Linting: Remove global event listener warning. ([34528](https://github.com/WordPress/gutenberg/pull/34528))
+-   More work on the stability of the performance metrics. ([34229](https://github.com/WordPress/gutenberg/pull/34229))
+
 #### Plugin
-- Added janw-me to the Codeowners for the PHP FSE folder. ([32990](https://github.com/WordPress/gutenberg/pull/32990))
-- Fix title missing in bug report form. ([34504](https://github.com/WordPress/gutenberg/pull/34504))
-- Update bug form to use drop downs. ([34458](https://github.com/WordPress/gutenberg/pull/34458))
-- Update the minimum supported WordPress version to 5.7. ([34536](https://github.com/WordPress/gutenberg/pull/34536))
+
+-   Added janw-me to the Codeowners for the PHP FSE folder. ([32990](https://github.com/WordPress/gutenberg/pull/32990))
+-   Fix title missing in bug report form. ([34504](https://github.com/WordPress/gutenberg/pull/34504))
+-   Update bug form to use drop downs. ([34458](https://github.com/WordPress/gutenberg/pull/34458))
+-   Update the minimum supported WordPress version to 5.7. ([34536](https://github.com/WordPress/gutenberg/pull/34536))
+
 #### Testing
-- Add unit tests for edit site editor utils. ([34401](https://github.com/WordPress/gutenberg/pull/34401))
-- Debug e2e-tests in vscode. ([29788](https://github.com/WordPress/gutenberg/pull/29788))
-- Jest Preset: Restore the default setting for the `verbose` option. ([34327](https://github.com/WordPress/gutenberg/pull/34327))
-- Make `Test_Widget` compatible with `WP_Widget`. ([34355](https://github.com/WordPress/gutenberg/pull/34355))
 
+-   Add unit tests for edit site editor utils. ([34401](https://github.com/WordPress/gutenberg/pull/34401))
+-   Debug e2e-tests in vscode. ([29788](https://github.com/WordPress/gutenberg/pull/29788))
+-   Jest Preset: Restore the default setting for the `verbose` option. ([34327](https://github.com/WordPress/gutenberg/pull/34327))
+-   Make `Test_Widget` compatible with `WP_Widget`. ([34355](https://github.com/WordPress/gutenberg/pull/34355))
 
 = 11.4.1 =
 
-### Bug Fixes
+## Changelog
 
-- Post title: Remove class from old div to fix alignment. ([34489](https://github.com/WordPress/gutenberg/pull/34489))
+### Bug Fixes
 
+-   Post title: Remove class from old div to fix alignment. ([34489](https://github.com/WordPress/gutenberg/pull/34489))
 
 = 11.4.0 =
 
+## Changelog
+
 ### Enhancements
-- Accessibility
-    - Cover Block: Allow alt text in Cover blocks. ([33226](https://github.com/WordPress/gutenberg/pull/33226))
-    - Add `aria-describedby` to custom select control component to describe currently-selected font size. ([33941](https://github.com/WordPress/gutenberg/pull/33941))
-- Block Editor
-    - Block Lists: improve iframe block, pattern and template previews. ([28165](https://github.com/WordPress/gutenberg/pull/28165))
-- Block Library
-    - Query Loop: update Post Template sub-block icon. ([34204](https://github.com/WordPress/gutenberg/pull/34204))
-    - Convert Gallery block to use Image blocks. ([25940](https://github.com/WordPress/gutenberg/pull/25940))
-    - Post Featured Image: add duotone block supports. ([34113](https://github.com/WordPress/gutenberg/pull/34113))
-    - Post Featured Image: add contextual help text to the `scale`property. ([34158](https://github.com/WordPress/gutenberg/pull/34158))
-    - File block: update transform from image to use image filename if caption is empty. ([34256](https://github.com/WordPress/gutenberg/pull/34256))
-    - Post date Block: add font weight support to the block. ([34070](https://github.com/WordPress/gutenberg/pull/34070))
-    - Post terms: add font weight support to the block. ([34142](https://github.com/WordPress/gutenberg/pull/34142))
-    - Site Tagline: add font weight support. ([33983](https://github.com/WordPress/gutenberg/pull/33983))
-    - Button: update spacing support to use axial padding. ([33859](https://github.com/WordPress/gutenberg/pull/33859))
-- Components
-    - Add deprecated props adapter for ColorPicker. ([34014](https://github.com/WordPress/gutenberg/pull/34014))
-    - Wrap SegmentedControl in a BaseControl with an added `help` property. ([34017](https://github.com/WordPress/gutenberg/pull/34017))
-    - Combobox: update the current selection if the list of suggestions is filtered. ([33928](https://github.com/WordPress/gutenberg/pull/33928))
-    - Post Title: use rich text hook and updating tag to `h1` ([31569](https://github.com/WordPress/gutenberg/pull/31569))
-- Design Tools
-    - Add layout default value support for blocks. ([34194](https://github.com/WordPress/gutenberg/pull/34194))
-    - Dimensions Panel: add padding tool as default for blocks where this is a common setting. ([34026](https://github.com/WordPress/gutenberg/pull/34026))
-- Navigation Screen
-    - Update navigation screen topbar. ([34166](https://github.com/WordPress/gutenberg/pull/34166))
-- Packages
-    - Updates the "settings" icon, which toggles the display of additional controls in an interface. ([34165](https://github.com/WordPress/gutenberg/pull/34165))
-- Post Editor
-    - Migrate post editor feature preferences to the interface package. ([34154](https://github.com/WordPress/gutenberg/pull/34154))
-- Widgets Editor
-    - Migrate customize widgets feature preferences to interface package. ([34135](https://github.com/WordPress/gutenberg/pull/34135))
-    - Refactor editor 'feature' preferences to interface package. ([33774](https://github.com/WordPress/gutenberg/pull/33774))
-
-### Bug Fixes
-- Block API
-    - Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. ([34059](https://github.com/WordPress/gutenberg/pull/34059))
-- Block Editor
-    - Font-size adjustment for tablet and mobile device previews. ([33342](https://github.com/WordPress/gutenberg/pull/33342))
-    - Fix single block selection by holding `shift` key. ([34137](https://github.com/WordPress/gutenberg/pull/34137))
-    - Fix unwanted additional spaces added around pasted text on Windows. ([33607](https://github.com/WordPress/gutenberg/pull/33607))
-    - Inserter: prevent non-deterministic order of inserter items. ([34078](https://github.com/WordPress/gutenberg/pull/34078))
-    - Try: Fix multiselect toolbar indent and reformat `BlockContextualToolbar()`. ([34038](https://github.com/WordPress/gutenberg/pull/34038)) ([34173](https://github.com/WordPress/gutenberg/pull/34173))
-- Block Library
-    - Latest Comments: use site locale in the editor. ([33944](https://github.com/WordPress/gutenberg/pull/33944))
-    - Navigation: fix vertical layout on the frontend. ([34226](https://github.com/WordPress/gutenberg/pull/34226))
-    - Navigation: add z-index value to responsive menu overlay. ([34228](https://github.com/WordPress/gutenberg/pull/34228))
-    - Navigation: enable flex on container to fix space between. ([34258](https://github.com/WordPress/gutenberg/pull/34258))
-    - Navigation: fix submenu icon positioning. ([34168](https://github.com/WordPress/gutenberg/pull/34168))
-    - Navigation block: add missing `</ul>` closing tag. ([34077](https://github.com/WordPress/gutenberg/pull/34077))
-    - Post Excerpt: remove interactive formatting. ([34083](https://github.com/WordPress/gutenberg/pull/34083))
-    - RichText: fix `space` key for button and summary elements. ([30244](https://github.com/WordPress/gutenberg/pull/30244))
-    - Search Block: add space between generated border class names. ([34025](https://github.com/WordPress/gutenberg/pull/34025))
-- Build Tooling
-    - Webpack: Fix watch on `.json` and `.php` files. ([34024](https://github.com/WordPress/gutenberg/pull/34024))
-    - Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. ([34422](https://github.com/WordPress/gutenberg/pull/34422))
-- Components
-    - Fix RTL on `Flex` component. ([33729](https://github.com/WordPress/gutenberg/pull/33729))
-    - NavigationSidebar: fix template content for content-navigation-item preview. ([34203](https://github.com/WordPress/gutenberg/pull/34203))
-    - Remove deprecated import style for storybook/addon-docs. ([34095](https://github.com/WordPress/gutenberg/pull/34095))
-    - ToolsPanel: add tools panel item deregistration. ([34085](https://github.com/WordPress/gutenberg/pull/34085))
-    - Post Title: remove wrapper div and fix border style. ([34167](https://github.com/WordPress/gutenberg/pull/34167))
-- Core Data
-    - `GetEntityRecords` returns items even if some included IDs don't exist. ([34034](https://github.com/WordPress/gutenberg/pull/34034))
-- Design Tools
-    - Allow zero values for `theme.json` styles. ([34251](https://github.com/WordPress/gutenberg/pull/34251))
-- Global Styles
-    - Site editor: fix for how CSS custom properties are generated. ([33932](https://github.com/WordPress/gutenberg/pull/33932))
-- Packages
-    - Rich Text: add check to `toTree()` in replacements before accessing its type. ([34020](https://github.com/WordPress/gutenberg/pull/34020))
-- Post Editor
-    - Fix selector params in `isPluginItemPinned()` selector. ([34155](https://github.com/WordPress/gutenberg/pull/34155))
 
+-   Accessibility
+    -   Cover Block: Allow alt text in Cover blocks. ([33226](https://github.com/WordPress/gutenberg/pull/33226))
+    -   Add `aria-describedby` to custom select control component to describe currently-selected font size. ([33941](https://github.com/WordPress/gutenberg/pull/33941))
+-   Block Editor
+    -   Block Lists: improve iframe block, pattern and template previews. ([28165](https://github.com/WordPress/gutenberg/pull/28165))
+-   Block Library
+    -   Query Loop: update Post Template sub-block icon. ([34204](https://github.com/WordPress/gutenberg/pull/34204))
+    -   Convert Gallery block to use Image blocks. ([25940](https://github.com/WordPress/gutenberg/pull/25940))
+    -   Post Featured Image: add duotone block supports. ([34113](https://github.com/WordPress/gutenberg/pull/34113))
+    -   Post Featured Image: add contextual help text to the `scale`property. ([34158](https://github.com/WordPress/gutenberg/pull/34158))
+    -   File block: update transform from image to use image filename if caption is empty. ([34256](https://github.com/WordPress/gutenberg/pull/34256))
+    -   Post date Block: add font weight support to the block. ([34070](https://github.com/WordPress/gutenberg/pull/34070))
+    -   Post terms: add font weight support to the block. ([34142](https://github.com/WordPress/gutenberg/pull/34142))
+    -   Site Tagline: add font weight support. ([33983](https://github.com/WordPress/gutenberg/pull/33983))
+    -   Button: update spacing support to use axial padding. ([33859](https://github.com/WordPress/gutenberg/pull/33859))
+-   Components
+    -   Add deprecated props adapter for ColorPicker. ([34014](https://github.com/WordPress/gutenberg/pull/34014))
+    -   Wrap SegmentedControl in a BaseControl with an added `help` property. ([34017](https://github.com/WordPress/gutenberg/pull/34017))
+    -   Combobox: update the current selection if the list of suggestions is filtered. ([33928](https://github.com/WordPress/gutenberg/pull/33928))
+    -   Post Title: use rich text hook and updating tag to `h1` ([31569](https://github.com/WordPress/gutenberg/pull/31569))
+-   Design Tools
+    -   Add layout default value support for blocks. ([34194](https://github.com/WordPress/gutenberg/pull/34194))
+    -   Dimensions Panel: add padding tool as default for blocks where this is a common setting. ([34026](https://github.com/WordPress/gutenberg/pull/34026))
+-   Navigation Screen
+    -   Update navigation screen topbar. ([34166](https://github.com/WordPress/gutenberg/pull/34166))
+-   Packages
+    -   Updates the "settings" icon, which toggles the display of additional controls in an interface. ([34165](https://github.com/WordPress/gutenberg/pull/34165))
+-   Post Editor
+    -   Migrate post editor feature preferences to the interface package. ([34154](https://github.com/WordPress/gutenberg/pull/34154))
+-   Widgets Editor
+    -   Migrate customize widgets feature preferences to interface package. ([34135](https://github.com/WordPress/gutenberg/pull/34135))
+    -   Refactor editor 'feature' preferences to interface package. ([33774](https://github.com/WordPress/gutenberg/pull/33774))
+
+### Bug Fixes
+
+-   Block API
+    -   Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. ([34059](https://github.com/WordPress/gutenberg/pull/34059))
+-   Block Editor
+    -   Font-size adjustment for tablet and mobile device previews. ([33342](https://github.com/WordPress/gutenberg/pull/33342))
+    -   Fix single block selection by holding `shift` key. ([34137](https://github.com/WordPress/gutenberg/pull/34137))
+    -   Fix unwanted additional spaces added around pasted text on Windows. ([33607](https://github.com/WordPress/gutenberg/pull/33607))
+    -   Inserter: prevent non-deterministic order of inserter items. ([34078](https://github.com/WordPress/gutenberg/pull/34078))
+    -   Try: Fix multiselect toolbar indent and reformat `BlockContextualToolbar()`. ([34038](https://github.com/WordPress/gutenberg/pull/34038)) ([34173](https://github.com/WordPress/gutenberg/pull/34173))
+-   Block Library
+    -   Latest Comments: use site locale in the editor. ([33944](https://github.com/WordPress/gutenberg/pull/33944))
+    -   Navigation: fix vertical layout on the frontend. ([34226](https://github.com/WordPress/gutenberg/pull/34226))
+    -   Navigation: add z-index value to responsive menu overlay. ([34228](https://github.com/WordPress/gutenberg/pull/34228))
+    -   Navigation: enable flex on container to fix space between. ([34258](https://github.com/WordPress/gutenberg/pull/34258))
+    -   Navigation: fix submenu icon positioning. ([34168](https://github.com/WordPress/gutenberg/pull/34168))
+    -   Navigation block: add missing `</ul>` closing tag. ([34077](https://github.com/WordPress/gutenberg/pull/34077))
+    -   Post Excerpt: remove interactive formatting. ([34083](https://github.com/WordPress/gutenberg/pull/34083))
+    -   RichText: fix `space` key for button and summary elements. ([30244](https://github.com/WordPress/gutenberg/pull/30244))
+    -   Search Block: add space between generated border class names. ([34025](https://github.com/WordPress/gutenberg/pull/34025))
+-   Build Tooling
+    -   Webpack: Fix watch on `.json` and `.php` files. ([34024](https://github.com/WordPress/gutenberg/pull/34024))
+    -   Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. ([34422](https://github.com/WordPress/gutenberg/pull/34422))
+-   Components
+    -   Fix RTL on `Flex` component. ([33729](https://github.com/WordPress/gutenberg/pull/33729))
+    -   NavigationSidebar: fix template content for content-navigation-item preview. ([34203](https://github.com/WordPress/gutenberg/pull/34203))
+    -   Remove deprecated import style for storybook/addon-docs. ([34095](https://github.com/WordPress/gutenberg/pull/34095))
+    -   ToolsPanel: add tools panel item deregistration. ([34085](https://github.com/WordPress/gutenberg/pull/34085))
+    -   Post Title: remove wrapper div and fix border style. ([34167](https://github.com/WordPress/gutenberg/pull/34167))
+-   Core Data
+    -   `GetEntityRecords` returns items even if some included IDs don't exist. ([34034](https://github.com/WordPress/gutenberg/pull/34034))
+-   Design Tools
+    -   Allow zero values for `theme.json` styles. ([34251](https://github.com/WordPress/gutenberg/pull/34251))
+-   Global Styles
+    -   Site editor: fix for how CSS custom properties are generated. ([33932](https://github.com/WordPress/gutenberg/pull/33932))
+-   Packages
+    -   Rich Text: add check to `toTree()` in replacements before accessing its type. ([34020](https://github.com/WordPress/gutenberg/pull/34020))
+-   Post Editor
+    -   Fix selector params in `isPluginItemPinned()` selector. ([34155](https://github.com/WordPress/gutenberg/pull/34155))
 
 ### Performance
-- Data Layer
-    - Data: Add a batch function to the data module to batch actions. ([34046](https://github.com/WordPress/gutenberg/pull/34046))
+
+-   Data Layer
+    -   Data: Add a batch function to the data module to batch actions. ([34046](https://github.com/WordPress/gutenberg/pull/34046))
 
 ### Experiments
-- Block API
-    - Block Editor: absorb parent block toolbar controls. ([33955](https://github.com/WordPress/gutenberg/pull/33955))
-    - Block Editor: use groups for InspectorControls. ([34069](https://github.com/WordPress/gutenberg/pull/34069))
-- Block Library
-    - Add generic classnames to children of Navigation. ([33918](https://github.com/WordPress/gutenberg/pull/33918))
-- Global Styles
-    - Add slashes back to the Theme JSON. ([33919](https://github.com/WordPress/gutenberg/pull/33919))
-    - Add block spacing gap configuration to `theme.json` and add support for this CSS variable to the "flow/default" layout. ([33812](https://github.com/WordPress/gutenberg/pull/33812))
 
+-   Block API
+    -   Block Editor: absorb parent block toolbar controls. ([33955](https://github.com/WordPress/gutenberg/pull/33955))
+    -   Block Editor: use groups for InspectorControls. ([34069](https://github.com/WordPress/gutenberg/pull/34069))
+-   Block Library
+    -   Add generic classnames to children of Navigation. ([33918](https://github.com/WordPress/gutenberg/pull/33918))
+-   Global Styles
+    -   Add slashes back to the Theme JSON. ([33919](https://github.com/WordPress/gutenberg/pull/33919))
+    -   Add block spacing gap configuration to `theme.json` and add support for this CSS variable to the "flow/default" layout. ([33812](https://github.com/WordPress/gutenberg/pull/33812))
 
 ### Documentation
-- Handbook
-    - Alphabetize glossary entries. ([34058](https://github.com/WordPress/gutenberg/pull/34058))
-    - Correct minor typos in `wp-plugin.md` ([34185](https://github.com/WordPress/gutenberg/pull/34185))
-    - Remove extraneous params from `block_type_metadata` hook. ([34151](https://github.com/WordPress/gutenberg/pull/34151))
-    - Update incorrect settings examples in "Global Settings & Styles". ([34084](https://github.com/WordPress/gutenberg/pull/34084))
-    - Use `block.json` to add attributes in create block tutorial. ([33978](https://github.com/WordPress/gutenberg/pull/33978))
-    - Fix typo in block gap documentation in `theme-json.md`. ([34231](https://github.com/WordPress/gutenberg/pull/34231))
-    - Fix broken mobile testing documentation link in `testing-overview.md`. ([34187](https://github.com/WordPress/gutenberg/pull/34187))
-    - Fix typo in `legacy-widget-block.md`. ([34103](https://github.com/WordPress/gutenberg/pull/34103))
-    - Update spelling and `fontSize` examples in `create-block-theme.md`. ([34152](https://github.com/WordPress/gutenberg/pull/34152))
-- Library
-    - Bump mobile version in experiments page for Gallery. ([34220](https://github.com/WordPress/gutenberg/pull/34220))
-- Packages
-    - Add documentation for mobile components directory. ([33872](https://github.com/WordPress/gutenberg/pull/33872))
-
-### Code Quality
-- Block Editor
-    - Render head and body with single portal for block previews. ([34208](https://github.com/WordPress/gutenberg/pull/34208))
-    - BlockList: refactor element context for style/svg appending. ([34183](https://github.com/WordPress/gutenberg/pull/34183))
-    - BlockList: use InnerBlocks internally. ([29895](https://github.com/WordPress/gutenberg/pull/29895))
-- Components
-    - Unit Control: add unit tests for `getValidParsedUnit` utility method. ([34029](https://github.com/WordPress/gutenberg/pull/34029))
-    - Rename `SegmentedControl` to `ToggleGroupControl`. ([34111](https://github.com/WordPress/gutenberg/pull/34111))
-    - Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping ([33995](https://github.com/WordPress/gutenberg/pull/33995))
-- Core Data
-    - Allow passing store definitions to controls. ([34170](https://github.com/WordPress/gutenberg/pull/34170))
-- Site Editor
-    - Remove extra DOM element used for template part overlay. ([34012](https://github.com/WordPress/gutenberg/pull/34012))
 
-### Tools
-- Build Tooling
-    - Automated Changelog: force group all documentation tasks under `Documentation`. ([34042](https://github.com/WordPress/gutenberg/pull/34042))
-    - Automated Changelog: rename "Editor" grouping to "Post Editor" to avoid ambiguity with other editors. ([34093](https://github.com/WordPress/gutenberg/pull/34093))
-    - Automated Changelog: sort feature groups by issue name. ([34071](https://github.com/WordPress/gutenberg/pull/34071))
-    - Automated Changelog: use nested headings for feature groups instead of indenting lists. ([34040](https://github.com/WordPress/gutenberg/pull/34040))
-    - Automated Changelog: remove `Uncategorized` header in output and place items at top. ([34037](https://github.com/WordPress/gutenberg/pull/34037))
-    - Add Typescript extensions to watched files. ([34094](https://github.com/WordPress/gutenberg/pull/34094))
-    - Remove obsolete step that pushes tags in NPM publishing flow. ([34114](https://github.com/WordPress/gutenberg/pull/34114))
-    - Release workflow: only commit modified changelogs. ([34211](https://github.com/WordPress/gutenberg/pull/34211))
-- ESLint
-    - Eslint plugin: use `@typescript-eslint/no-duplicate-imports` in TS projects. ([34055](https://github.com/WordPress/gutenberg/pull/34055))
-- GitHub Contributor Templates
-    - Issue Forms: simplify the bug report form template. ([34007](https://github.com/WordPress/gutenberg/pull/34007))
-- Logs
-    - Hide deprecation logs under a console group. ([34163](https://github.com/WordPress/gutenberg/pull/34163))
-- Testing
-    - Emulate reduced-motion in end-to-end tests. ([34132](https://github.com/WordPress/gutenberg/pull/34132))
-    - Re-enable Android end-to-end tests. ([34243](https://github.com/WordPress/gutenberg/pull/34243))
-    - Remove extra props from Cover deprecations. ([34066](https://github.com/WordPress/gutenberg/pull/34066))
-    - Remove the `ENVIRONMENT_DIRECTORY` env variable that was added to the performance jobs. ([34086](https://github.com/WordPress/gutenberg/pull/34086))
-    - Add snapshot test for changelog formatting. ([34049](https://github.com/WordPress/gutenberg/pull/34049))
-    - Experiment with using REST API in end-to-end tests to build up states. ([33414](https://github.com/WordPress/gutenberg/pull/33414))
+-   Handbook
+    -   Alphabetize glossary entries. ([34058](https://github.com/WordPress/gutenberg/pull/34058))
+    -   Correct minor typos in `wp-plugin.md` ([34185](https://github.com/WordPress/gutenberg/pull/34185))
+    -   Remove extraneous params from `block_type_metadata` hook. ([34151](https://github.com/WordPress/gutenberg/pull/34151))
+    -   Update incorrect settings examples in "Global Settings & Styles". ([34084](https://github.com/WordPress/gutenberg/pull/34084))
+    -   Use `block.json` to add attributes in create block tutorial. ([33978](https://github.com/WordPress/gutenberg/pull/33978))
+    -   Fix typo in block gap documentation in `theme-json.md`. ([34231](https://github.com/WordPress/gutenberg/pull/34231))
+    -   Fix broken mobile testing documentation link in `testing-overview.md`. ([34187](https://github.com/WordPress/gutenberg/pull/34187))
+    -   Fix typo in `legacy-widget-block.md`. ([34103](https://github.com/WordPress/gutenberg/pull/34103))
+    -   Update spelling and `fontSize` examples in `create-block-theme.md`. ([34152](https://github.com/WordPress/gutenberg/pull/34152))
+-   Library
+    -   Bump mobile version in experiments page for Gallery. ([34220](https://github.com/WordPress/gutenberg/pull/34220))
+-   Packages
+    -   Add documentation for mobile components directory. ([33872](https://github.com/WordPress/gutenberg/pull/33872))
 
+### Code Quality
 
+-   Block Editor
+    -   Render head and body with single portal for block previews. ([34208](https://github.com/WordPress/gutenberg/pull/34208))
+    -   BlockList: refactor element context for style/svg appending. ([34183](https://github.com/WordPress/gutenberg/pull/34183))
+    -   BlockList: use InnerBlocks internally. ([29895](https://github.com/WordPress/gutenberg/pull/29895))
+-   Components
+    -   Unit Control: add unit tests for `getValidParsedUnit` utility method. ([34029](https://github.com/WordPress/gutenberg/pull/34029))
+    -   Rename `SegmentedControl` to `ToggleGroupControl`. ([34111](https://github.com/WordPress/gutenberg/pull/34111))
+    -   Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping ([33995](https://github.com/WordPress/gutenberg/pull/33995))
+-   Core Data
+    -   Allow passing store definitions to controls. ([34170](https://github.com/WordPress/gutenberg/pull/34170))
+-   Site Editor
+    -   Remove extra DOM element used for template part overlay. ([34012](https://github.com/WordPress/gutenberg/pull/34012))
 
+### Tools
 
+-   Build Tooling
+    -   Automated Changelog: force group all documentation tasks under `Documentation`. ([34042](https://github.com/WordPress/gutenberg/pull/34042))
+    -   Automated Changelog: rename "Editor" grouping to "Post Editor" to avoid ambiguity with other editors. ([34093](https://github.com/WordPress/gutenberg/pull/34093))
+    -   Automated Changelog: sort feature groups by issue name. ([34071](https://github.com/WordPress/gutenberg/pull/34071))
+    -   Automated Changelog: use nested headings for feature groups instead of indenting lists. ([34040](https://github.com/WordPress/gutenberg/pull/34040))
+    -   Automated Changelog: remove `Uncategorized` header in output and place items at top. ([34037](https://github.com/WordPress/gutenberg/pull/34037))
+    -   Add Typescript extensions to watched files. ([34094](https://github.com/WordPress/gutenberg/pull/34094))
+    -   Remove obsolete step that pushes tags in NPM publishing flow. ([34114](https://github.com/WordPress/gutenberg/pull/34114))
+    -   Release workflow: only commit modified changelogs. ([34211](https://github.com/WordPress/gutenberg/pull/34211))
+-   ESLint
+    -   Eslint plugin: use `@typescript-eslint/no-duplicate-imports` in TS projects. ([34055](https://github.com/WordPress/gutenberg/pull/34055))
+-   GitHub Contributor Templates
+    -   Issue Forms: simplify the bug report form template. ([34007](https://github.com/WordPress/gutenberg/pull/34007))
+-   Logs
+    -   Hide deprecation logs under a console group. ([34163](https://github.com/WordPress/gutenberg/pull/34163))
+-   Testing
+    -   Emulate reduced-motion in end-to-end tests. ([34132](https://github.com/WordPress/gutenberg/pull/34132))
+    -   Re-enable Android end-to-end tests. ([34243](https://github.com/WordPress/gutenberg/pull/34243))
+    -   Remove extra props from Cover deprecations. ([34066](https://github.com/WordPress/gutenberg/pull/34066))
+    -   Remove the `ENVIRONMENT_DIRECTORY` env variable that was added to the performance jobs. ([34086](https://github.com/WordPress/gutenberg/pull/34086))
+    -   Add snapshot test for changelog formatting. ([34049](https://github.com/WordPress/gutenberg/pull/34049))
+    -   Experiment with using REST API in end-to-end tests to build up states. ([33414](https://github.com/WordPress/gutenberg/pull/33414))
 
 = 11.3.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Block Library
-  - Button: Add padding block support. ([31774](https://github.com/WordPress/gutenberg/pull/31774))
-  - Post Featured Image: Add basic dimension controls. ([31634](https://github.com/WordPress/gutenberg/pull/31634))
-  - Template Part: Try new icons for reusable blocks and template parts. ([34002](https://github.com/WordPress/gutenberg/pull/34002))
-- Block Patterns
-  - Add translation context on titles. ([33734](https://github.com/WordPress/gutenberg/pull/33734))
-- Block Editor
-  - Enable rich previews for internal links. ([33086](https://github.com/WordPress/gutenberg/pull/33086))
-- Components
-  - Add new ColorPicker. ([33714](https://github.com/WordPress/gutenberg/pull/33714))
-  - Promote `ItemGroup`. ([33701](https://github.com/WordPress/gutenberg/pull/33701))
-  - Polish the focus style for the segmented control. ([33842](https://github.com/WordPress/gutenberg/pull/33842))
-  - Tune appender margin. ([33866](https://github.com/WordPress/gutenberg/pull/33866))
-  - Update snackbar to use framer motion instead of react spring. ([33717](https://github.com/WordPress/gutenberg/pull/33717))
-  - Use updated range styles. ([33824](https://github.com/WordPress/gutenberg/pull/33824))
-- CSS & Styling
-  - Reduce specificity of reset & classic styles. ([32659](https://github.com/WordPress/gutenberg/pull/32659))
-- Document Settings
-  - Disable spellcheck and autocomplete in permalink slug field. ([33708](https://github.com/WordPress/gutenberg/pull/33708))
-- Global Styles
-  - Dimensions Panel: Add new ToolsPanel component and update spacing supports. ([32392](https://github.com/WordPress/gutenberg/pull/32392))
-- REST API
-  - Improve the likelihood of getting rich link previews by modifying UA string for URL Details REST API endpoint. ([33747](https://github.com/WordPress/gutenberg/pull/33747))
-- Site Editor
-  - Add error boundary. ([33921](https://github.com/WordPress/gutenberg/pull/33921))
-- Template Editor
-  - Template Mode: Add busy state to template creation modal. ([33076](https://github.com/WordPress/gutenberg/pull/33076))
-- Widgets Editor
-  - Add error boundaries to widget screens. ([33771](https://github.com/WordPress/gutenberg/pull/33771))
-
-### Bug Fixes
-
-- Accessibility
-  - Fix some JAWS bugs. ([33627](https://github.com/WordPress/gutenberg/pull/33627))
-- Block Library
-  - Button: Fix justification for button block when selected. ([33739](https://github.com/WordPress/gutenberg/pull/33739))
-  - Image: Fix issue with canInsertCover not being set to false for empty arrays. ([33863](https://github.com/WordPress/gutenberg/pull/33863))
-  - Query Pagination Numbers: Fix first page's link. ([33629](https://github.com/WordPress/gutenberg/pull/33629))
-- Block API
-  - Dimensions Support: Switch dimensions block support back to using spacing key. ([34030](https://github.com/WordPress/gutenberg/pull/34030))
-- Block Editor
-  - Closing the block inserter decrements block type impressions. ([33906](https://github.com/WordPress/gutenberg/pull/33906))
-  - Fix block appender position in classic themes. ([33895](https://github.com/WordPress/gutenberg/pull/33895))
-  - Fix positioning discrepancy with draggable chip. ([33893](https://github.com/WordPress/gutenberg/pull/33893))
-  - Force link text to wrap in the Link UI when encountering extra long link text. ([33753](https://github.com/WordPress/gutenberg/pull/33753))
-  - Improve display of LinkURL menu and fix spacing. ([33652](https://github.com/WordPress/gutenberg/pull/33652))
-  - Only show rich preview for image and description if data is available. ([33660](https://github.com/WordPress/gutenberg/pull/33660))
-  - URL Details: Avoid PHP notice when parsing protocol-relative icon URLs. ([33779](https://github.com/WordPress/gutenberg/pull/33779))
-- Components
-  - `useBreakpointIndex`: Attach `resize` event listener to `window` instead of `document`. ([33902](https://github.com/WordPress/gutenberg/pull/33902))
-  - Components: Fix RTL on custom gradient picker. ([33831](https://github.com/WordPress/gutenberg/pull/33831))
-  - FontSizePicker: Use number values when the initial value is a number. ([33679](https://github.com/WordPress/gutenberg/pull/33679))
-  - FormTokenField: Avoid error when maxLength value is hit. ([33623](https://github.com/WordPress/gutenberg/pull/33623))
-- CSS & Styling
-  - Fix navigation block placeholder preview markup. ([33963](https://github.com/WordPress/gutenberg/pull/33963))
-- Global Styles
-  - Avoid rendering duplicate elements stylesheet. ([33680](https://github.com/WordPress/gutenberg/pull/33680))
-  - Fix presets for blocks with multiple selectors. ([33951](https://github.com/WordPress/gutenberg/pull/33951))
-  - Fix Global Styles transient key clash. ([33844](https://github.com/WordPress/gutenberg/pull/33844))
-- Meta Boxes
-  - Fix Safari 13 metaboxes from overlapping the content. ([33817](https://github.com/WordPress/gutenberg/pull/33817))
-- Navigation Editor
-  - Avoid React warning when creating a new menu. ([33843](https://github.com/WordPress/gutenberg/pull/33843))
-  - Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. ([33748](https://github.com/WordPress/gutenberg/pull/33748))
-- Site Editor
-  - Fix the site editor breaking in firefox. ([33896](https://github.com/WordPress/gutenberg/pull/33896))
-- Post Editor
-  - Editor: Safer isPreviewingPost check. ([33840](https://github.com/WordPress/gutenberg/pull/33840))
-- Template Editor
-  - Only show post template actions to users with correct capabilities. ([33392](https://github.com/WordPress/gutenberg/pull/33392))
+-   Block Library
+    -   Button: Add padding block support. ([31774](https://github.com/WordPress/gutenberg/pull/31774))
+    -   Post Featured Image: Add basic dimension controls. ([31634](https://github.com/WordPress/gutenberg/pull/31634))
+    -   Template Part: Try new icons for reusable blocks and template parts. ([34002](https://github.com/WordPress/gutenberg/pull/34002))
+-   Block Patterns
+    -   Add translation context on titles. ([33734](https://github.com/WordPress/gutenberg/pull/33734))
+-   Block Editor
+    -   Enable rich previews for internal links. ([33086](https://github.com/WordPress/gutenberg/pull/33086))
+-   Components
+    -   Add new ColorPicker. ([33714](https://github.com/WordPress/gutenberg/pull/33714))
+    -   Promote `ItemGroup`. ([33701](https://github.com/WordPress/gutenberg/pull/33701))
+    -   Polish the focus style for the segmented control. ([33842](https://github.com/WordPress/gutenberg/pull/33842))
+    -   Tune appender margin. ([33866](https://github.com/WordPress/gutenberg/pull/33866))
+    -   Update snackbar to use framer motion instead of react spring. ([33717](https://github.com/WordPress/gutenberg/pull/33717))
+    -   Use updated range styles. ([33824](https://github.com/WordPress/gutenberg/pull/33824))
+-   CSS & Styling
+    -   Reduce specificity of reset & classic styles. ([32659](https://github.com/WordPress/gutenberg/pull/32659))
+-   Document Settings
+    -   Disable spellcheck and autocomplete in permalink slug field. ([33708](https://github.com/WordPress/gutenberg/pull/33708))
+-   Global Styles
+    -   Dimensions Panel: Add new ToolsPanel component and update spacing supports. ([32392](https://github.com/WordPress/gutenberg/pull/32392))
+-   REST API
+    -   Improve the likelihood of getting rich link previews by modifying UA string for URL Details REST API endpoint. ([33747](https://github.com/WordPress/gutenberg/pull/33747))
+-   Site Editor
+    -   Add error boundary. ([33921](https://github.com/WordPress/gutenberg/pull/33921))
+-   Template Editor
+    -   Template Mode: Add busy state to template creation modal. ([33076](https://github.com/WordPress/gutenberg/pull/33076))
+-   Widgets Editor
+    -   Add error boundaries to widget screens. ([33771](https://github.com/WordPress/gutenberg/pull/33771))
+
+### Bug Fixes
 
+-   Accessibility
+    -   Fix some JAWS bugs. ([33627](https://github.com/WordPress/gutenberg/pull/33627))
+-   Block Library
+    -   Button: Fix justification for button block when selected. ([33739](https://github.com/WordPress/gutenberg/pull/33739))
+    -   Image: Fix issue with canInsertCover not being set to false for empty arrays. ([33863](https://github.com/WordPress/gutenberg/pull/33863))
+    -   Query Pagination Numbers: Fix first page's link. ([33629](https://github.com/WordPress/gutenberg/pull/33629))
+-   Block API
+    -   Dimensions Support: Switch dimensions block support back to using spacing key. ([34030](https://github.com/WordPress/gutenberg/pull/34030))
+-   Block Editor
+    -   Closing the block inserter decrements block type impressions. ([33906](https://github.com/WordPress/gutenberg/pull/33906))
+    -   Fix block appender position in classic themes. ([33895](https://github.com/WordPress/gutenberg/pull/33895))
+    -   Fix positioning discrepancy with draggable chip. ([33893](https://github.com/WordPress/gutenberg/pull/33893))
+    -   Force link text to wrap in the Link UI when encountering extra long link text. ([33753](https://github.com/WordPress/gutenberg/pull/33753))
+    -   Improve display of LinkURL menu and fix spacing. ([33652](https://github.com/WordPress/gutenberg/pull/33652))
+    -   Only show rich preview for image and description if data is available. ([33660](https://github.com/WordPress/gutenberg/pull/33660))
+    -   URL Details: Avoid PHP notice when parsing protocol-relative icon URLs. ([33779](https://github.com/WordPress/gutenberg/pull/33779))
+-   Components
+    -   `useBreakpointIndex`: Attach `resize` event listener to `window` instead of `document`. ([33902](https://github.com/WordPress/gutenberg/pull/33902))
+    -   Components: Fix RTL on custom gradient picker. ([33831](https://github.com/WordPress/gutenberg/pull/33831))
+    -   FontSizePicker: Use number values when the initial value is a number. ([33679](https://github.com/WordPress/gutenberg/pull/33679))
+    -   FormTokenField: Avoid error when maxLength value is hit. ([33623](https://github.com/WordPress/gutenberg/pull/33623))
+-   CSS & Styling
+    -   Fix navigation block placeholder preview markup. ([33963](https://github.com/WordPress/gutenberg/pull/33963))
+-   Global Styles
+    -   Avoid rendering duplicate elements stylesheet. ([33680](https://github.com/WordPress/gutenberg/pull/33680))
+    -   Fix presets for blocks with multiple selectors. ([33951](https://github.com/WordPress/gutenberg/pull/33951))
+    -   Fix Global Styles transient key clash. ([33844](https://github.com/WordPress/gutenberg/pull/33844))
+-   Meta Boxes
+    -   Fix Safari 13 metaboxes from overlapping the content. ([33817](https://github.com/WordPress/gutenberg/pull/33817))
+-   Navigation Editor
+    -   Avoid React warning when creating a new menu. ([33843](https://github.com/WordPress/gutenberg/pull/33843))
+    -   Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. ([33748](https://github.com/WordPress/gutenberg/pull/33748))
+-   Site Editor
+    -   Fix the site editor breaking in firefox. ([33896](https://github.com/WordPress/gutenberg/pull/33896))
+-   Post Editor
+    -   Editor: Safer isPreviewingPost check. ([33840](https://github.com/WordPress/gutenberg/pull/33840))
+-   Template Editor
+    -   Only show post template actions to users with correct capabilities. ([33392](https://github.com/WordPress/gutenberg/pull/33392))
 
 ### Performance
 
-- Block Library
-  - Improve the rendering/update performance of the image block. ([33974](https://github.com/WordPress/gutenberg/pull/33974))
-  - Do not add to the block-library CSS bundle the colors that come from `theme.json`. ([33924](https://github.com/WordPress/gutenberg/pull/33924))
-- Block Editor
-  - Lazy render the inserter search results. ([33868](https://github.com/WordPress/gutenberg/pull/33868))
-  - Lazy render block types in the inserter. ([33749](https://github.com/WordPress/gutenberg/pull/33749))
-- Parsing
-  - Improve the performance of the parser by removing the automatic custom classnames handling. ([33903](https://github.com/WordPress/gutenberg/pull/33903))
-- Post Editor
-  - Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. ([33418](https://github.com/WordPress/gutenberg/pull/33418))
-- Template Editor
-  - Template Mode: Remove 'per_page' argument from the template data selector. ([33742](https://github.com/WordPress/gutenberg/pull/33742))
+-   Block Library
+    -   Improve the rendering/update performance of the image block. ([33974](https://github.com/WordPress/gutenberg/pull/33974))
+    -   Do not add to the block-library CSS bundle the colors that come from `theme.json`. ([33924](https://github.com/WordPress/gutenberg/pull/33924))
+-   Block Editor
+    -   Lazy render the inserter search results. ([33868](https://github.com/WordPress/gutenberg/pull/33868))
+    -   Lazy render block types in the inserter. ([33749](https://github.com/WordPress/gutenberg/pull/33749))
+-   Parsing
+    -   Improve the performance of the parser by removing the automatic custom classnames handling. ([33903](https://github.com/WordPress/gutenberg/pull/33903))
+-   Post Editor
+    -   Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. ([33418](https://github.com/WordPress/gutenberg/pull/33418))
+-   Template Editor
+    -   Template Mode: Remove 'per_page' argument from the template data selector. ([33742](https://github.com/WordPress/gutenberg/pull/33742))
 
 ### Experiments
 
-- Full Site Editing
-  - Site Editor: Implement a settings object filter. ([33737](https://github.com/WordPress/gutenberg/pull/33737))
-  - Template part selection popover - minor style updates for visiblity. ([33733](https://github.com/WordPress/gutenberg/pull/33733))
-  - Template Part placeholder - Add title step to creation flow. ([33703](https://github.com/WordPress/gutenberg/pull/33703))
-- Navigation Block
-  - Navigation: Fix navigation block appender invalid html. ([33964](https://github.com/WordPress/gutenberg/pull/33964))
-  - Enable the ability to remove a link from the Nav Link block in the Nav Block. ([33777](https://github.com/WordPress/gutenberg/pull/33777))
-  - Fix navigation margin collapsing. ([33021](https://github.com/WordPress/gutenberg/pull/33021))
-
+-   Full Site Editing
+    -   Site Editor: Implement a settings object filter. ([33737](https://github.com/WordPress/gutenberg/pull/33737))
+    -   Template part selection popover - minor style updates for visiblity. ([33733](https://github.com/WordPress/gutenberg/pull/33733))
+    -   Template Part placeholder - Add title step to creation flow. ([33703](https://github.com/WordPress/gutenberg/pull/33703))
+-   Navigation Block
+    -   Navigation: Fix navigation block appender invalid html. ([33964](https://github.com/WordPress/gutenberg/pull/33964))
+    -   Enable the ability to remove a link from the Nav Link block in the Nav Block. ([33777](https://github.com/WordPress/gutenberg/pull/33777))
+    -   Fix navigation margin collapsing. ([33021](https://github.com/WordPress/gutenberg/pull/33021))
 
 ### Documentation
 
-- Handbook
-  - Add documentation to disable remote calls for block patterns. ([33930](https://github.com/WordPress/gutenberg/pull/33930))
-  - Add missing comma. ([33764](https://github.com/WordPress/gutenberg/pull/33764))
-  - Add more details about block attributes. ([33880](https://github.com/WordPress/gutenberg/pull/33880))
-  - Add spaces in add_theme_support documentation code. ([33796](https://github.com/WordPress/gutenberg/pull/33796))
-  - Correct spelling and grammar in documentation. ([33860](https://github.com/WordPress/gutenberg/pull/33860))
-  - fix: `supports.color.gradients` is plural. ([33781](https://github.com/WordPress/gutenberg/pull/33781))
-  - fix: Broken link in documentation to block support mechanism. ([33780](https://github.com/WordPress/gutenberg/pull/33780))
-  - Update documentation to reflect new automated process for feature grouping. ([33573](https://github.com/WordPress/gutenberg/pull/33573))
-  - link fix: Block editor Sidebar Tutorial. ([33308](https://github.com/WordPress/gutenberg/pull/33308))
-- Library
-  - Fix gutenberg_resolve_template() return documentation. ([33800](https://github.com/WordPress/gutenberg/pull/33800))
-  - Fix misspelling of "queries" in filter documentation. ([33799](https://github.com/WordPress/gutenberg/pull/33799))
-- Packages
-  - Example for rest_endpoints filter in PHP. ([33738](https://github.com/WordPress/gutenberg/pull/33738))
-
+-   Handbook
+    -   Add documentation to disable remote calls for block patterns. ([33930](https://github.com/WordPress/gutenberg/pull/33930))
+    -   Add missing comma. ([33764](https://github.com/WordPress/gutenberg/pull/33764))
+    -   Add more details about block attributes. ([33880](https://github.com/WordPress/gutenberg/pull/33880))
+    -   Add spaces in add_theme_support documentation code. ([33796](https://github.com/WordPress/gutenberg/pull/33796))
+    -   Correct spelling and grammar in documentation. ([33860](https://github.com/WordPress/gutenberg/pull/33860))
+    -   fix: `supports.color.gradients` is plural. ([33781](https://github.com/WordPress/gutenberg/pull/33781))
+    -   fix: Broken link in documentation to block support mechanism. ([33780](https://github.com/WordPress/gutenberg/pull/33780))
+    -   Update documentation to reflect new automated process for feature grouping. ([33573](https://github.com/WordPress/gutenberg/pull/33573))
+    -   link fix: Block editor Sidebar Tutorial. ([33308](https://github.com/WordPress/gutenberg/pull/33308))
+-   Library
+    -   Fix gutenberg_resolve_template() return documentation. ([33800](https://github.com/WordPress/gutenberg/pull/33800))
+    -   Fix misspelling of "queries" in filter documentation. ([33799](https://github.com/WordPress/gutenberg/pull/33799))
+-   Packages
+    -   Example for rest_endpoints filter in PHP. ([33738](https://github.com/WordPress/gutenberg/pull/33738))
 
 ### Code Quality
 
-- Block Library
-  - Site Logo: Use getMedia shorthand. ([33992](https://github.com/WordPress/gutenberg/pull/33992))
-  - Featured Image: Use getMedia shorthand. ([33943](https://github.com/WordPress/gutenberg/pull/33943))
-  - Search Block: Removed components class from icon button and polished css. ([33961](https://github.com/WordPress/gutenberg/pull/33961))
-- Components
-  - Components utils: `rtl()` return type, `rtl.watch()` utility. ([33882](https://github.com/WordPress/gutenberg/pull/33882))
-  - InputControl to TypeScript. ([33696](https://github.com/WordPress/gutenberg/pull/33696))
-  - Use the `__unsafe_useEmotionCache` in the `useCx` hook. ([33982](https://github.com/WordPress/gutenberg/pull/33982))
-- Core Data
-  - Deprecate getAuthors in favor of getUsers. ([33725](https://github.com/WordPress/gutenberg/pull/33725))
-- Global Styles
-  - No longer read from `experimental-theme.json`. ([33904](https://github.com/WordPress/gutenberg/pull/33904))
-  - Remove the experimental prefix and rename `theme.json` files. ([33925](https://github.com/WordPress/gutenberg/pull/33925))
-- Post Editor
-  - Refactor MetaBoxesArea to to functional components using hooks. ([30542](https://github.com/WordPress/gutenberg/pull/30542))
-- Scripts
-  - Fix typo in format change message. ([33945](https://github.com/WordPress/gutenberg/pull/33945))
+-   Block Library
+    -   Site Logo: Use getMedia shorthand. ([33992](https://github.com/WordPress/gutenberg/pull/33992))
+    -   Featured Image: Use getMedia shorthand. ([33943](https://github.com/WordPress/gutenberg/pull/33943))
+    -   Search Block: Removed components class from icon button and polished css. ([33961](https://github.com/WordPress/gutenberg/pull/33961))
+-   Components
+    -   Components utils: `rtl()` return type, `rtl.watch()` utility. ([33882](https://github.com/WordPress/gutenberg/pull/33882))
+    -   InputControl to TypeScript. ([33696](https://github.com/WordPress/gutenberg/pull/33696))
+    -   Use the `__unsafe_useEmotionCache` in the `useCx` hook. ([33982](https://github.com/WordPress/gutenberg/pull/33982))
+-   Core Data
+    -   Deprecate getAuthors in favor of getUsers. ([33725](https://github.com/WordPress/gutenberg/pull/33725))
+-   Global Styles
+    -   No longer read from `experimental-theme.json`. ([33904](https://github.com/WordPress/gutenberg/pull/33904))
+    -   Remove the experimental prefix and rename `theme.json` files. ([33925](https://github.com/WordPress/gutenberg/pull/33925))
+-   Post Editor
+    -   Refactor MetaBoxesArea to to functional components using hooks. ([30542](https://github.com/WordPress/gutenberg/pull/30542))
+-   Scripts
+    -   Fix typo in format change message. ([33945](https://github.com/WordPress/gutenberg/pull/33945))
 
 ### Tools
 
-- Testing
-  - Add search performance measures and make other measures more stable. ([33848](https://github.com/WordPress/gutenberg/pull/33848))
-  - Avoid double parsing the content when loading the editor. ([33727](https://github.com/WordPress/gutenberg/pull/33727))
-  - Block Hierarchy Navigation waits for the column to be highlighted. ([33721](https://github.com/WordPress/gutenberg/pull/33721))
-  - Widgets Editor: Try to fix flaky customizer inspector test. ([33890](https://github.com/WordPress/gutenberg/pull/33890), [33965](https://github.com/WordPress/gutenberg/pull/33965))
-- Build Tooling
-  - Readable JS assets Plugin: Fix webpack 5 support. ([33785](https://github.com/WordPress/gutenberg/pull/33785))
-  - Scripts: Use cssnano to minimize CSS files with build. ([33750](https://github.com/WordPress/gutenberg/pull/33750))
-  - Scripts: Webpack configuration update to minimize CSS. ([33676](https://github.com/WordPress/gutenberg/pull/33676))
-  - Scripts: Update webpack to v5 (try 2). ([33818](https://github.com/WordPress/gutenberg/pull/33818))
-  - Scripts: Add missing fallback for target in webpack 5 configuration. ([34112](https://github.com/WordPress/gutenberg/pull/34112))
-
-- ESLint
-  - Include .jsx extenstion when linting import statements. ([33746](https://github.com/WordPress/gutenberg/pull/33746))
-- GitHub Contributor Templates
-  - Update bug issue template to use forms. ([33713](https://github.com/WordPress/gutenberg/pull/33713), [33786](https://github.com/WordPress/gutenberg/pull/33786), [33761](https://github.com/WordPress/gutenberg/pull/33761))
-- Plugin
-  - Plugin: Fix `jsdoc/check-line-alignment` ESLint warnings. ([33901](https://github.com/WordPress/gutenberg/pull/33901))
-  - Correct `function_exists()` check typo introduced in #33331. ([33513](https://github.com/WordPress/gutenberg/pull/33513))
-
+-   Testing
+    -   Add search performance measures and make other measures more stable. ([33848](https://github.com/WordPress/gutenberg/pull/33848))
+    -   Avoid double parsing the content when loading the editor. ([33727](https://github.com/WordPress/gutenberg/pull/33727))
+    -   Block Hierarchy Navigation waits for the column to be highlighted. ([33721](https://github.com/WordPress/gutenberg/pull/33721))
+    -   Widgets Editor: Try to fix flaky customizer inspector test. ([33890](https://github.com/WordPress/gutenberg/pull/33890), [33965](https://github.com/WordPress/gutenberg/pull/33965))
+-   Build Tooling
+
+    -   Readable JS assets Plugin: Fix webpack 5 support. ([33785](https://github.com/WordPress/gutenberg/pull/33785))
+    -   Scripts: Use cssnano to minimize CSS files with build. ([33750](https://github.com/WordPress/gutenberg/pull/33750))
+    -   Scripts: Webpack configuration update to minimize CSS. ([33676](https://github.com/WordPress/gutenberg/pull/33676))
+    -   Scripts: Update webpack to v5 (try 2). ([33818](https://github.com/WordPress/gutenberg/pull/33818))
+    -   Scripts: Add missing fallback for target in webpack 5 configuration. ([34112](https://github.com/WordPress/gutenberg/pull/34112))
+
+-   ESLint
+    -   Include .jsx extenstion when linting import statements. ([33746](https://github.com/WordPress/gutenberg/pull/33746))
+-   GitHub Contributor Templates
+    -   Update bug issue template to use forms. ([33713](https://github.com/WordPress/gutenberg/pull/33713), [33786](https://github.com/WordPress/gutenberg/pull/33786), [33761](https://github.com/WordPress/gutenberg/pull/33761))
+-   Plugin
+    -   Plugin: Fix `jsdoc/check-line-alignment` ESLint warnings. ([33901](https://github.com/WordPress/gutenberg/pull/33901))
+    -   Correct `function_exists()` check typo introduced in #33331. ([33513](https://github.com/WordPress/gutenberg/pull/33513))
 
 = 11.2.1 =
 
-### Bug Fixes
+## Changelog
 
-- Fix available alignments and layout for the post editor. ([33894](https://github.com/WordPress/gutenberg/pull/33894))
+### Bug Fixes
 
+-   Fix available alignments and layout for the post editor. ([33894](https://github.com/WordPress/gutenberg/pull/33894))
 
+= 11.2.0 =
 
+## Changelog
 
+### Features
 
-= 11.2.0 =
+-   Search Block: Add color support to search button. ([32416](https://github.com/WordPress/gutenberg/pull/32416))
+-   Search Block: Add border color support. ([31783](https://github.com/WordPress/gutenberg/pull/31783))
+-   Pullquote: Add border and color support. ([30951](https://github.com/WordPress/gutenberg/pull/30951))
 
-### Features
+### Enhancements
 
-- Search Block: Add color support to search button. ([32416](https://github.com/WordPress/gutenberg/pull/32416))
-- Search Block: Add border color support. ([31783](https://github.com/WordPress/gutenberg/pull/31783))
-- Pullquote: Add border and color support. ([30951](https://github.com/WordPress/gutenberg/pull/30951))
+-   Post Editor
 
+    -   Add a new page/post button on publish panel. ([33276](https://github.com/WordPress/gutenberg/pull/33276))
 
-### Enhancements
+-   Widgets Editor
 
-- Post Editor
-  - Add a new page/post button on publish panel. ([33276](https://github.com/WordPress/gutenberg/pull/33276))
+    -   Widget inserter: Clarify that the button toggles the inserter. ([33561](https://github.com/WordPress/gutenberg/pull/33561))
+    -   Update widget editor help links to point to the new support article. ([33482](https://github.com/WordPress/gutenberg/pull/33482))
 
-- Widgets Editor
-  - Widget inserter: Clarify that the button toggles the inserter. ([33561](https://github.com/WordPress/gutenberg/pull/33561))
-  - Update widget editor help links to point to the new support article. ([33482](https://github.com/WordPress/gutenberg/pull/33482))
+-   Components
 
-- Components
-  - `Spacer`: Change props override order, split types. ([33555](https://github.com/WordPress/gutenberg/pull/33555))
-  - `Elevation`: Reduced motion styles, updated documentation and README. ([33551](https://github.com/WordPress/gutenberg/pull/33551))
-  - components: Add unit values utils. ([33514](https://github.com/WordPress/gutenberg/pull/33514))
-  - components: Add isValueNumeric util. ([33206](https://github.com/WordPress/gutenberg/pull/33206))
-  - [Components]: Add SegmentedControl. ([31937](https://github.com/WordPress/gutenberg/pull/31937))
-  - Components: Promote VisuallyHidden from ui into full components (#31244). ([31902](https://github.com/WordPress/gutenberg/pull/31902))
+    -   `Spacer`: Change props override order, split types. ([33555](https://github.com/WordPress/gutenberg/pull/33555))
+    -   `Elevation`: Reduced motion styles, updated documentation and README. ([33551](https://github.com/WordPress/gutenberg/pull/33551))
+    -   components: Add unit values utils. ([33514](https://github.com/WordPress/gutenberg/pull/33514))
+    -   components: Add isValueNumeric util. ([33206](https://github.com/WordPress/gutenberg/pull/33206))
+    -   [Components]: Add SegmentedControl. ([31937](https://github.com/WordPress/gutenberg/pull/31937))
+    -   Components: Promote VisuallyHidden from ui into full components (#31244). ([31902](https://github.com/WordPress/gutenberg/pull/31902))
 
-- Accessibility
-  - Inserter: In text label mode, use "Close" label when inserter is open. ([33534](https://github.com/WordPress/gutenberg/pull/33534))
+-   Accessibility
 
-- Data
-  - Core Data: Pass query argument to data selector shortcuts. ([33689](https://github.com/WordPress/gutenberg/pull/33689))
+    -   Inserter: In text label mode, use "Close" label when inserter is open. ([33534](https://github.com/WordPress/gutenberg/pull/33534))
 
+-   Data
+    -   Core Data: Pass query argument to data selector shortcuts. ([33689](https://github.com/WordPress/gutenberg/pull/33689))
 
 ### Bug Fixes
 
-- Block Library
-  - Featured Image: Allow authors to select images uploaded by other users. ([33567](https://github.com/WordPress/gutenberg/pull/33567))
-  - Template Part: Avoid button layout shift. ([33362](https://github.com/WordPress/gutenberg/pull/33362))
-  - Remove instagram reference from embed block's description. ([33519](https://github.com/WordPress/gutenberg/pull/33519))
+-   Block Library
 
-- Block Editor
-  - Fixed that the block is selected instead of the title when using the select all shortcut. ([33621](https://github.com/WordPress/gutenberg/pull/33621))
+    -   Featured Image: Allow authors to select images uploaded by other users. ([33567](https://github.com/WordPress/gutenberg/pull/33567))
+    -   Template Part: Avoid button layout shift. ([33362](https://github.com/WordPress/gutenberg/pull/33362))
+    -   Remove instagram reference from embed block's description. ([33519](https://github.com/WordPress/gutenberg/pull/33519))
 
-- Post Editor
-  - Most Used Terms: Avoid 403 error for non-administrators. ([33569](https://github.com/WordPress/gutenberg/pull/33569))
-  - Editor: Set 'hide_empty' for the most used terms query. ([33457](https://github.com/WordPress/gutenberg/pull/33457))
-  - HierarchicalTermSelector: Use TextControl component. ([33545](https://github.com/WordPress/gutenberg/pull/33545))
-  - PWA manifest: icon: Fix error when admin bar is gone. ([33702](https://github.com/WordPress/gutenberg/pull/33702))
+-   Block Editor
 
-- Widgets Editor
-  - Fix plugin/theme incompatibility, call onChangeSectionExpanded conditionally. ([33618](https://github.com/WordPress/gutenberg/pull/33618))
+    -   Fixed that the block is selected instead of the title when using the select all shortcut. ([33621](https://github.com/WordPress/gutenberg/pull/33621))
 
-- Components
-  - Fix: Native UnitControl to handle single unit configuration. ([33641](https://github.com/WordPress/gutenberg/pull/33641))
-  - NumberControl: Allow empty values. ([33485](https://github.com/WordPress/gutenberg/pull/33485))
-  - BoxControl: Prevent invalid style values. ([33444](https://github.com/WordPress/gutenberg/pull/33444))
-  - FocalPointPicker: Check if value is NaN. ([33637](https://github.com/WordPress/gutenberg/pull/33637))
-  - UnitControl: Set correct unit when units has one option. ([33634](https://github.com/WordPress/gutenberg/pull/33634))
-  - components: Use useCx to fix iframe support. ([33301](https://github.com/WordPress/gutenberg/pull/33301))
-  - Card: Add missing `box-sizing` CSS rules. ([33511](https://github.com/WordPress/gutenberg/pull/33511))
-  - CardBody: Change default value of `isScrollable` to `false`. ([33490](https://github.com/WordPress/gutenberg/pull/33490))
-  - `ItemGroup`: Fix padding, split types, rename boolean props. ([33553](https://github.com/WordPress/gutenberg/pull/33553))
+-   Post Editor
 
-- Themes
-  - I18n: Fix broken loop in `WP_Theme_JSON_Resolver`. ([33624](https://github.com/WordPress/gutenberg/pull/33624))
+    -   Most Used Terms: Avoid 403 error for non-administrators. ([33569](https://github.com/WordPress/gutenberg/pull/33569))
+    -   Editor: Set 'hide_empty' for the most used terms query. ([33457](https://github.com/WordPress/gutenberg/pull/33457))
+    -   HierarchicalTermSelector: Use TextControl component. ([33545](https://github.com/WordPress/gutenberg/pull/33545))
+    -   PWA manifest: icon: Fix error when admin bar is gone. ([33702](https://github.com/WordPress/gutenberg/pull/33702))
 
-- Site Editor
-  - Site editor: Check template resolution. ([33527](https://github.com/WordPress/gutenberg/pull/33527))
-  - FSE: Fix content height. ([33698](https://github.com/WordPress/gutenberg/pull/33698))
+-   Widgets Editor
 
-- Media
-  - Format Library: Remove `style` from inline image if `width` not set. ([32516](https://github.com/WordPress/gutenberg/pull/32516))
+    -   Fix plugin/theme incompatibility, call onChangeSectionExpanded conditionally. ([33618](https://github.com/WordPress/gutenberg/pull/33618))
 
+-   Components
 
-### Performance
+    -   Fix: Native UnitControl to handle single unit configuration. ([33641](https://github.com/WordPress/gutenberg/pull/33641))
+    -   NumberControl: Allow empty values. ([33485](https://github.com/WordPress/gutenberg/pull/33485))
+    -   BoxControl: Prevent invalid style values. ([33444](https://github.com/WordPress/gutenberg/pull/33444))
+    -   FocalPointPicker: Check if value is NaN. ([33637](https://github.com/WordPress/gutenberg/pull/33637))
+    -   UnitControl: Set correct unit when units has one option. ([33634](https://github.com/WordPress/gutenberg/pull/33634))
+    -   components: Use useCx to fix iframe support. ([33301](https://github.com/WordPress/gutenberg/pull/33301))
+    -   Card: Add missing `box-sizing` CSS rules. ([33511](https://github.com/WordPress/gutenberg/pull/33511))
+    -   CardBody: Change default value of `isScrollable` to `false`. ([33490](https://github.com/WordPress/gutenberg/pull/33490))
+    -   `ItemGroup`: Fix padding, split types, rename boolean props. ([33553](https://github.com/WordPress/gutenberg/pull/33553))
+
+-   Themes
+
+    -   I18n: Fix broken loop in `WP_Theme_JSON_Resolver`. ([33624](https://github.com/WordPress/gutenberg/pull/33624))
+
+-   Site Editor
+
+    -   Site editor: Check template resolution. ([33527](https://github.com/WordPress/gutenberg/pull/33527))
+    -   FSE: Fix content height. ([33698](https://github.com/WordPress/gutenberg/pull/33698))
 
-- Drag and drop
-  - Set passive listener option for use popover scroll to avoid affecting scrolling performance. ([33478](https://github.com/WordPress/gutenberg/pull/33478))
-  - Drag items via transform property to avoid layout and re-paints. ([33395](https://github.com/WordPress/gutenberg/pull/33395))
+-   Media
+    -   Format Library: Remove `style` from inline image if `width` not set. ([32516](https://github.com/WordPress/gutenberg/pull/32516))
 
+### Performance
+
+-   Drag and drop
+    -   Set passive listener option for use popover scroll to avoid affecting scrolling performance. ([33478](https://github.com/WordPress/gutenberg/pull/33478))
+    -   Drag items via transform property to avoid layout and re-paints. ([33395](https://github.com/WordPress/gutenberg/pull/33395))
 
 ### Experiments
 
-- Full Site Editing
-  - Query Pagination: Update the arrows on the Next and Prev pagination blocks. ([33626](https://github.com/WordPress/gutenberg/pull/33626))
+-   Full Site Editing
 
-- Block Library
-  - Add flex layout support to the block editor. ([33359](https://github.com/WordPress/gutenberg/pull/33359))
+    -   Query Pagination: Update the arrows on the Next and Prev pagination blocks. ([33626](https://github.com/WordPress/gutenberg/pull/33626))
 
+-   Block Library
+    -   Add flex layout support to the block editor. ([33359](https://github.com/WordPress/gutenberg/pull/33359))
 
 ### Tools
 
-- Testing
-  - E2E: Navigation wait for links before counting them. ([33704](https://github.com/WordPress/gutenberg/pull/33704))
-  - Automation: Track Gutenberg performance metrics over time. ([33694](https://github.com/WordPress/gutenberg/pull/33694))
-  - Re-enable "Save flow should work as expected" end-to-end test. ([33548](https://github.com/WordPress/gutenberg/pull/33548))
-  - Skip some widgets editing related tests. ([33547](https://github.com/WordPress/gutenberg/pull/33547))
-  - Enable the reusable blocks skipped test. ([33510](https://github.com/WordPress/gutenberg/pull/33510))
-  - Skip end-to-end tests. ([33503](https://github.com/WordPress/gutenberg/pull/33503))
-  - Tests: Run Prettier after regenerating test fixture. ([33502](https://github.com/WordPress/gutenberg/pull/33502))
-  - Fix screenshots not being captured when snapshots failed. ([33448](https://github.com/WordPress/gutenberg/pull/33448))
-  - Add coverage folder to .gitignore. ([33413](https://github.com/WordPress/gutenberg/pull/33413))
-  - Automated Testing: Disable remote patterns in tests. ([33160](https://github.com/WordPress/gutenberg/pull/33160))
-  - Improve function widgets test. ([33489](https://github.com/WordPress/gutenberg/pull/33489))
-  - Make the performance CI job more stable. ([33710](https://github.com/WordPress/gutenberg/pull/33710))
-  - Update button block corner radius test to px. ([33562](https://github.com/WordPress/gutenberg/pull/33562))
-  - Add unsupported block title translation test. ([33340](https://github.com/WordPress/gutenberg/pull/33340))
-  - Re-enable skipped widgets end-to-end test. ([33449](https://github.com/WordPress/gutenberg/pull/33449))
-
-- Build Tooling
-  - Update sass version to 1.35.2 with fixes. ([33433](https://github.com/WordPress/gutenberg/pull/33433))
-  - Improve `Feature` mapping in automatically generated changelog. ([33625](https://github.com/WordPress/gutenberg/pull/33625))
-  - Add depth to git fetch in npm publishing. ([33595](https://github.com/WordPress/gutenberg/pull/33595))
-  - Release docs: Add process for creating a point release of the Plugin. ([33546](https://github.com/WordPress/gutenberg/pull/33546))
-  - Docs: Run Prettier after updating API in documentation. ([33498](https://github.com/WordPress/gutenberg/pull/33498))
-  - Publish android artifacts with publish to s3 gradle plugin. ([33441](https://github.com/WordPress/gutenberg/pull/33441))
-  - Build: Split configuration into two parts - blocks and packages. ([33293](https://github.com/WordPress/gutenberg/pull/33293))
-  - Automate grouping of release `Changelog` PRs by feature. ([33229](https://github.com/WordPress/gutenberg/pull/33229))
-  - Fix dependency extraction webpack v5 deprecation. ([33090](https://github.com/WordPress/gutenberg/pull/33090))
-  - Scripts: Update eslint-plugin-markdown version. ([33432](https://github.com/WordPress/gutenberg/pull/33432))
-  - Replace CRLF with LF when generating unminified assets. ([33509](https://github.com/WordPress/gutenberg/pull/33509))
-
+-   Testing
+
+    -   E2E: Navigation wait for links before counting them. ([33704](https://github.com/WordPress/gutenberg/pull/33704))
+    -   Automation: Track Gutenberg performance metrics over time. ([33694](https://github.com/WordPress/gutenberg/pull/33694))
+    -   Re-enable "Save flow should work as expected" end-to-end test. ([33548](https://github.com/WordPress/gutenberg/pull/33548))
+    -   Skip some widgets editing related tests. ([33547](https://github.com/WordPress/gutenberg/pull/33547))
+    -   Enable the reusable blocks skipped test. ([33510](https://github.com/WordPress/gutenberg/pull/33510))
+    -   Skip end-to-end tests. ([33503](https://github.com/WordPress/gutenberg/pull/33503))
+    -   Tests: Run Prettier after regenerating test fixture. ([33502](https://github.com/WordPress/gutenberg/pull/33502))
+    -   Fix screenshots not being captured when snapshots failed. ([33448](https://github.com/WordPress/gutenberg/pull/33448))
+    -   Add coverage folder to .gitignore. ([33413](https://github.com/WordPress/gutenberg/pull/33413))
+    -   Automated Testing: Disable remote patterns in tests. ([33160](https://github.com/WordPress/gutenberg/pull/33160))
+    -   Improve function widgets test. ([33489](https://github.com/WordPress/gutenberg/pull/33489))
+    -   Make the performance CI job more stable. ([33710](https://github.com/WordPress/gutenberg/pull/33710))
+    -   Update button block corner radius test to px. ([33562](https://github.com/WordPress/gutenberg/pull/33562))
+    -   Add unsupported block title translation test. ([33340](https://github.com/WordPress/gutenberg/pull/33340))
+    -   Re-enable skipped widgets end-to-end test. ([33449](https://github.com/WordPress/gutenberg/pull/33449))
+
+-   Build Tooling
+    -   Update sass version to 1.35.2 with fixes. ([33433](https://github.com/WordPress/gutenberg/pull/33433))
+    -   Improve `Feature` mapping in automatically generated changelog. ([33625](https://github.com/WordPress/gutenberg/pull/33625))
+    -   Add depth to git fetch in npm publishing. ([33595](https://github.com/WordPress/gutenberg/pull/33595))
+    -   Release docs: Add process for creating a point release of the Plugin. ([33546](https://github.com/WordPress/gutenberg/pull/33546))
+    -   Docs: Run Prettier after updating API in documentation. ([33498](https://github.com/WordPress/gutenberg/pull/33498))
+    -   Publish android artifacts with publish to s3 gradle plugin. ([33441](https://github.com/WordPress/gutenberg/pull/33441))
+    -   Build: Split configuration into two parts - blocks and packages. ([33293](https://github.com/WordPress/gutenberg/pull/33293))
+    -   Automate grouping of release `Changelog` PRs by feature. ([33229](https://github.com/WordPress/gutenberg/pull/33229))
+    -   Fix dependency extraction webpack v5 deprecation. ([33090](https://github.com/WordPress/gutenberg/pull/33090))
+    -   Scripts: Update eslint-plugin-markdown version. ([33432](https://github.com/WordPress/gutenberg/pull/33432))
+    -   Replace CRLF with LF when generating unminified assets. ([33509](https://github.com/WordPress/gutenberg/pull/33509))
 
 ### Documentation
 
-  - Add missing space in documentation. ([33690](https://github.com/WordPress/gutenberg/pull/33690))
-  - Added common steps of plugin translation. ([23535](https://github.com/WordPress/gutenberg/pull/23535))
-  - Packages: Ensure changelog entries are attributed to the correct release. ([33590](https://github.com/WordPress/gutenberg/pull/33590))
-  - Add i18n filters to documentation table of contents. ([33556](https://github.com/WordPress/gutenberg/pull/33556))
-  - Update the create a block theme how-to guide. ([33382](https://github.com/WordPress/gutenberg/pull/33382))
-  - Block API: Improve how blocks assets are versioned. ([33075](https://github.com/WordPress/gutenberg/pull/33075))
-  - Update the tested up to version in the readme file. ([33760](https://github.com/WordPress/gutenberg/pull/33760))
-  - Correct {% end%} tag - missing a space. ([33189](https://github.com/WordPress/gutenberg/pull/33189))
-  - Use tabs instead of spaces in block transform doc example. ([33549](https://github.com/WordPress/gutenberg/pull/33549))
-  - Fix flaky widgets end-to-end tests by waiting for the snackbar correctly. ([33317](https://github.com/WordPress/gutenberg/pull/33317))
-  - Scripts: Add changlog entry for module update. ([33473](https://github.com/WordPress/gutenberg/pull/33473))
-  - Create block: Update "Tested up to" in readme.txt. ([33493](https://github.com/WordPress/gutenberg/pull/33493))
-
+-   Add missing space in documentation. ([33690](https://github.com/WordPress/gutenberg/pull/33690))
+-   Added common steps of plugin translation. ([23535](https://github.com/WordPress/gutenberg/pull/23535))
+-   Packages: Ensure changelog entries are attributed to the correct release. ([33590](https://github.com/WordPress/gutenberg/pull/33590))
+-   Add i18n filters to documentation table of contents. ([33556](https://github.com/WordPress/gutenberg/pull/33556))
+-   Update the create a block theme how-to guide. ([33382](https://github.com/WordPress/gutenberg/pull/33382))
+-   Block API: Improve how blocks assets are versioned. ([33075](https://github.com/WordPress/gutenberg/pull/33075))
+-   Update the tested up to version in the readme file. ([33760](https://github.com/WordPress/gutenberg/pull/33760))
+-   Correct {% end%} tag - missing a space. ([33189](https://github.com/WordPress/gutenberg/pull/33189))
+-   Use tabs instead of spaces in block transform doc example. ([33549](https://github.com/WordPress/gutenberg/pull/33549))
+-   Fix flaky widgets end-to-end tests by waiting for the snackbar correctly. ([33317](https://github.com/WordPress/gutenberg/pull/33317))
+-   Scripts: Add changlog entry for module update. ([33473](https://github.com/WordPress/gutenberg/pull/33473))
+-   Create block: Update "Tested up to" in readme.txt. ([33493](https://github.com/WordPress/gutenberg/pull/33493))
 
 ### Code Quality
 
-- Block Library
-  - Fix optional params in page list rendering. ([33639](https://github.com/WordPress/gutenberg/pull/33639))
+-   Block Library
 
-- Block Editor
-  - Block editor: Use React events for shortcuts (portal bubbles & contextual). ([32323](https://github.com/WordPress/gutenberg/pull/32323))
-  - Block editor: Remove focus stopPropagation from appender. ([32003](https://github.com/WordPress/gutenberg/pull/32003))
-  - Block editor: iframe: Incorporate writing flow. ([33497](https://github.com/WordPress/gutenberg/pull/33497))
-  - Escape key sanity (avoid event.stopPropagation). ([33630](https://github.com/WordPress/gutenberg/pull/33630))
-  - Writing flow: select all: Remove early return for post title. ([33699](https://github.com/WordPress/gutenberg/pull/33699))
-  - Remove event.stopPropagation for past WritingFlow/ObserveTyping compatibility. ([33632](https://github.com/WordPress/gutenberg/pull/33632))
-
-- Post Editor
-  - Editor: Refactor Post Author component. ([33695](https://github.com/WordPress/gutenberg/pull/33695))
+    -   Fix optional params in page list rendering. ([33639](https://github.com/WordPress/gutenberg/pull/33639))
 
+-   Block Editor
 
+    -   Block editor: Use React events for shortcuts (portal bubbles & contextual). ([32323](https://github.com/WordPress/gutenberg/pull/32323))
+    -   Block editor: Remove focus stopPropagation from appender. ([32003](https://github.com/WordPress/gutenberg/pull/32003))
+    -   Block editor: iframe: Incorporate writing flow. ([33497](https://github.com/WordPress/gutenberg/pull/33497))
+    -   Escape key sanity (avoid event.stopPropagation). ([33630](https://github.com/WordPress/gutenberg/pull/33630))
+    -   Writing flow: select all: Remove early return for post title. ([33699](https://github.com/WordPress/gutenberg/pull/33699))
+    -   Remove event.stopPropagation for past WritingFlow/ObserveTyping compatibility. ([33632](https://github.com/WordPress/gutenberg/pull/33632))
 
+-   Post Editor
+    -   Editor: Refactor Post Author component. ([33695](https://github.com/WordPress/gutenberg/pull/33695))
 
 = 11.1.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Admin panel available as PWA. ([33102](https://github.com/WordPress/gutenberg/pull/33102), [33310](https://github.com/WordPress/gutenberg/pull/33310))
-- Block Breadcrumbs: Small chevron icon for breadcrumb separators. ([33042](https://github.com/WordPress/gutenberg/pull/33042))
-- Block Library:
-    - Columns Block:
-        - Add stack on mobile setting to allow for columns without mobile breakpoints. ([31816](https://github.com/WordPress/gutenberg/pull/31816))
-        - Add the percent unit to the default units in Core. ([33468](https://github.com/WordPress/gutenberg/pull/33468))
-    - Latest posts: Remove grey color for dark themes. ([33325](https://github.com/WordPress/gutenberg/pull/33325))
-    - List Block: Add link color control to list block. ([33185](https://github.com/WordPress/gutenberg/pull/33185))
-    - Post Terms Block: Add a "separator" attribute to post-terms block. ([32812](https://github.com/WordPress/gutenberg/pull/32812))
-    - RSS Block: Update block styles. ([33294](https://github.com/WordPress/gutenberg/pull/33294))
-    - Tag Cloud Block:
-        - Add ability to change number of tags shown. ([32201](https://github.com/WordPress/gutenberg/pull/32201))
-        - Remove editor style so editor matches frontend. ([33289](https://github.com/WordPress/gutenberg/pull/33289))
-- Design Tools, Border:
-    - Add support for custom border units. ([33315](https://github.com/WordPress/gutenberg/pull/33315))
-    - Update border support UI. ([31585](https://github.com/WordPress/gutenberg/pull/31585))
-    - Set border style none when border width zero. ([32080](https://github.com/WordPress/gutenberg/pull/32080))
-- Link Editing: Add Unlink button to LinkControl popover. ([32541](https://github.com/WordPress/gutenberg/pull/32541))
-- List View: Enable drag and drop in List View. ([33320](https://github.com/WordPress/gutenberg/pull/33320))
-- Widget Editor: Adds auxiliary class names for editor styles. ([33388](https://github.com/WordPress/gutenberg/pull/33388))
-- General UI:
-    - Block Settings Menu: Don't render 'Move to' if there is only one block. ([33158](https://github.com/WordPress/gutenberg/pull/33158))
-    - Disable 'Post Publish' button if saving non-post entities. ([33140](https://github.com/WordPress/gutenberg/pull/33140))
-    - Preferences: Polish labels and consolidate options in preferences. ([33133](https://github.com/WordPress/gutenberg/pull/33133))
+-   Admin panel available as PWA. ([33102](https://github.com/WordPress/gutenberg/pull/33102), [33310](https://github.com/WordPress/gutenberg/pull/33310))
+-   Block Breadcrumbs: Small chevron icon for breadcrumb separators. ([33042](https://github.com/WordPress/gutenberg/pull/33042))
+-   Block Library:
+    -   Columns Block:
+        -   Add stack on mobile setting to allow for columns without mobile breakpoints. ([31816](https://github.com/WordPress/gutenberg/pull/31816))
+        -   Add the percent unit to the default units in Core. ([33468](https://github.com/WordPress/gutenberg/pull/33468))
+    -   Latest posts: Remove grey color for dark themes. ([33325](https://github.com/WordPress/gutenberg/pull/33325))
+    -   List Block: Add link color control to list block. ([33185](https://github.com/WordPress/gutenberg/pull/33185))
+    -   Post Terms Block: Add a "separator" attribute to post-terms block. ([32812](https://github.com/WordPress/gutenberg/pull/32812))
+    -   RSS Block: Update block styles. ([33294](https://github.com/WordPress/gutenberg/pull/33294))
+    -   Tag Cloud Block:
+        -   Add ability to change number of tags shown. ([32201](https://github.com/WordPress/gutenberg/pull/32201))
+        -   Remove editor style so editor matches frontend. ([33289](https://github.com/WordPress/gutenberg/pull/33289))
+-   Design Tools, Border:
+    -   Add support for custom border units. ([33315](https://github.com/WordPress/gutenberg/pull/33315))
+    -   Update border support UI. ([31585](https://github.com/WordPress/gutenberg/pull/31585))
+    -   Set border style none when border width zero. ([32080](https://github.com/WordPress/gutenberg/pull/32080))
+-   Link Editing: Add Unlink button to LinkControl popover. ([32541](https://github.com/WordPress/gutenberg/pull/32541))
+-   List View: Enable drag and drop in List View. ([33320](https://github.com/WordPress/gutenberg/pull/33320))
+-   Widget Editor: Adds auxiliary class names for editor styles. ([33388](https://github.com/WordPress/gutenberg/pull/33388))
+-   General UI:
+    -   Block Settings Menu: Don't render 'Move to' if there is only one block. ([33158](https://github.com/WordPress/gutenberg/pull/33158))
+    -   Disable 'Post Publish' button if saving non-post entities. ([33140](https://github.com/WordPress/gutenberg/pull/33140))
+    -   Preferences: Polish labels and consolidate options in preferences. ([33133](https://github.com/WordPress/gutenberg/pull/33133))
 
 ### New APIs
 
-- REST API: Block editor settings endpoint. ([33128](https://github.com/WordPress/gutenberg/pull/33128))
-- UI Components: Add a SearchControl component and reuse across the UI. ([32935](https://github.com/WordPress/gutenberg/pull/32935))
+-   REST API: Block editor settings endpoint. ([33128](https://github.com/WordPress/gutenberg/pull/33128))
+-   UI Components: Add a SearchControl component and reuse across the UI. ([32935](https://github.com/WordPress/gutenberg/pull/32935))
 
 ### Performance
 
-- Improve List View performance. ([33320](https://github.com/WordPress/gutenberg/pull/33320))
-- Pattern Directory: Caching updates. ([33052](https://github.com/WordPress/gutenberg/pull/33052))
+-   Improve List View performance. ([33320](https://github.com/WordPress/gutenberg/pull/33320))
+-   Pattern Directory: Caching updates. ([33052](https://github.com/WordPress/gutenberg/pull/33052))
 
 ### Accessibility
 
-- Improve high contrast mode rendering of icon buttons. ([33062](https://github.com/WordPress/gutenberg/pull/33062))
-
-### Bug Fixes
-
-- Block Breadcrumbs: Fix breadcrumbs html structure and React warnings. ([33159](https://github.com/WordPress/gutenberg/pull/33159))
-- Block Editor:
-    - Move layout styles to document head (instead of rendering inline). ([32083](https://github.com/WordPress/gutenberg/pull/32083))
-    - Warn only in `edit` implementation when using `useBlockProps`. ([33380](https://github.com/WordPress/gutenberg/pull/33380))
-    - Iframe: Remove reset styles. ([33204](https://github.com/WordPress/gutenberg/pull/33204))
-- Block Library:
-    - Buttons Block: Remove green background color in button preview. ([33116](https://github.com/WordPress/gutenberg/pull/33116))
-    - Embed Block: Include missing attributes when upgrading embed block. ([33235](https://github.com/WordPress/gutenberg/pull/33235))
-    - Image Block:
-        - Improve "can switch to cover" check. ([33095](https://github.com/WordPress/gutenberg/pull/33095))
-        - Fix replace link control styling. ([33326](https://github.com/WordPress/gutenberg/pull/33326))
-    - Query Loop Block:
-        - Prevent entering invalid values in the Query Loop block configuration. ([33285](https://github.com/WordPress/gutenberg/pull/33285))
-        - Update getTermsInfo() to workaround parsing issue for translatable strings. ([33341](https://github.com/WordPress/gutenberg/pull/33341))
-    - Search Block:
-        - Fix search block button position dropdown accessibility/UX issues. ([33376](https://github.com/WordPress/gutenberg/pull/33376))
-        - Update search block to handle per corner border radii. ([33023](https://github.com/WordPress/gutenberg/pull/33023))
-    - Site Title: Decode entities in site title. ([33323](https://github.com/WordPress/gutenberg/pull/33323))
-    - Home Link: Remove padding. ([33461](https://github.com/WordPress/gutenberg/pull/33461))
-    - Post Except: Fix `excerpt_more` filter conflict and remove `wordCount` attribute. ([33366](https://github.com/WordPress/gutenberg/pull/33366))
-- Design Tools:
-    - Color: Prevent color panel from showing as empty. ([33369](https://github.com/WordPress/gutenberg/pull/33369))
-    - Duotone:
-        - Avoid rendering duplicate stylesheet and SVG. ([33233](https://github.com/WordPress/gutenberg/pull/33233))
-        - Update conditions to hide duotone panel. ([33295](https://github.com/WordPress/gutenberg/pull/33295))
-    - Theme.json
-        - Allow themes to provide empty values for `color.duotone` and `spacing.units`. ([33280](https://github.com/WordPress/gutenberg/pull/33280))
-        - Specify what settings can be part of `settings.layout`. ([33303](https://github.com/WordPress/gutenberg/pull/33303))
-- Rich text:
-     - Fix format deregistration. ([31518](https://github.com/WordPress/gutenberg/pull/31518))
-     - Autocomplete: Reset state for empty text. ([33450](https://github.com/WordPress/gutenberg/pull/33450))
-     - Run input rules after composition end. ([33416](https://github.com/WordPress/gutenberg/pull/33416))
-- Site Editor: Close navigation sidebar when all posts clicked. ([33393](https://github.com/WordPress/gutenberg/pull/33393))
-- Slash Inserter: Fix slash command focus style. ([33084](https://github.com/WordPress/gutenberg/pull/33084))
-- Widgets Editor:
-    - Fix moving inner blocks in the Widgets Customizer. ([33243](https://github.com/WordPress/gutenberg/pull/33243))
-    - Fix inserter size on Widgets Editor header. ([33118](https://github.com/WordPress/gutenberg/pull/33118))
-    - Merge conflicting `wp.editor` objects into a single, non-conflicting module. ([33228](https://github.com/WordPress/gutenberg/pull/33228))
-    - Retrieve latest widgets before loading sidebars. ([32997](https://github.com/WordPress/gutenberg/pull/32997))
-- Writing flow:
-    - Allow select all from empty selection. ([33446](https://github.com/WordPress/gutenberg/pull/33446))
-    - Attempt to fix preview end-to-end failure. ([33467](https://github.com/WordPress/gutenberg/pull/33467))
-- Components:
-     - Suggestion List: Check if a node exists to scroll into view. ([33419](https://github.com/WordPress/gutenberg/pull/33419))
-     - Navigation component: Fix item handling onClick twice. ([33286](https://github.com/WordPress/gutenberg/pull/33286))
-- Editor: Extract snackbars into a separate component. ([33355](https://github.com/WordPress/gutenberg/pull/33355))
+-   Improve high contrast mode rendering of icon buttons. ([33062](https://github.com/WordPress/gutenberg/pull/33062))
+
+### Bug Fixes
+
+-   Block Breadcrumbs: Fix breadcrumbs html structure and React warnings. ([33159](https://github.com/WordPress/gutenberg/pull/33159))
+-   Block Editor:
+    -   Move layout styles to document head (instead of rendering inline). ([32083](https://github.com/WordPress/gutenberg/pull/32083))
+    -   Warn only in `edit` implementation when using `useBlockProps`. ([33380](https://github.com/WordPress/gutenberg/pull/33380))
+    -   Iframe: Remove reset styles. ([33204](https://github.com/WordPress/gutenberg/pull/33204))
+-   Block Library:
+    -   Buttons Block: Remove green background color in button preview. ([33116](https://github.com/WordPress/gutenberg/pull/33116))
+    -   Embed Block: Include missing attributes when upgrading embed block. ([33235](https://github.com/WordPress/gutenberg/pull/33235))
+    -   Image Block:
+        -   Improve "can switch to cover" check. ([33095](https://github.com/WordPress/gutenberg/pull/33095))
+        -   Fix replace link control styling. ([33326](https://github.com/WordPress/gutenberg/pull/33326))
+    -   Query Loop Block:
+        -   Prevent entering invalid values in the Query Loop block configuration. ([33285](https://github.com/WordPress/gutenberg/pull/33285))
+        -   Update getTermsInfo() to workaround parsing issue for translatable strings. ([33341](https://github.com/WordPress/gutenberg/pull/33341))
+    -   Search Block:
+        -   Fix search block button position dropdown accessibility/UX issues. ([33376](https://github.com/WordPress/gutenberg/pull/33376))
+        -   Update search block to handle per corner border radii. ([33023](https://github.com/WordPress/gutenberg/pull/33023))
+    -   Site Title: Decode entities in site title. ([33323](https://github.com/WordPress/gutenberg/pull/33323))
+    -   Home Link: Remove padding. ([33461](https://github.com/WordPress/gutenberg/pull/33461))
+    -   Post Except: Fix `excerpt_more` filter conflict and remove `wordCount` attribute. ([33366](https://github.com/WordPress/gutenberg/pull/33366))
+-   Design Tools:
+    -   Color: Prevent color panel from showing as empty. ([33369](https://github.com/WordPress/gutenberg/pull/33369))
+    -   Duotone:
+        -   Avoid rendering duplicate stylesheet and SVG. ([33233](https://github.com/WordPress/gutenberg/pull/33233))
+        -   Update conditions to hide duotone panel. ([33295](https://github.com/WordPress/gutenberg/pull/33295))
+    -   Theme.json
+        -   Allow themes to provide empty values for `color.duotone` and `spacing.units`. ([33280](https://github.com/WordPress/gutenberg/pull/33280))
+        -   Specify what settings can be part of `settings.layout`. ([33303](https://github.com/WordPress/gutenberg/pull/33303))
+-   Rich text:
+    -   Fix format deregistration. ([31518](https://github.com/WordPress/gutenberg/pull/31518))
+    -   Autocomplete: Reset state for empty text. ([33450](https://github.com/WordPress/gutenberg/pull/33450))
+    -   Run input rules after composition end. ([33416](https://github.com/WordPress/gutenberg/pull/33416))
+-   Site Editor: Close navigation sidebar when all posts clicked. ([33393](https://github.com/WordPress/gutenberg/pull/33393))
+-   Slash Inserter: Fix slash command focus style. ([33084](https://github.com/WordPress/gutenberg/pull/33084))
+-   Widgets Editor:
+    -   Fix moving inner blocks in the Widgets Customizer. ([33243](https://github.com/WordPress/gutenberg/pull/33243))
+    -   Fix inserter size on Widgets Editor header. ([33118](https://github.com/WordPress/gutenberg/pull/33118))
+    -   Merge conflicting `wp.editor` objects into a single, non-conflicting module. ([33228](https://github.com/WordPress/gutenberg/pull/33228))
+    -   Retrieve latest widgets before loading sidebars. ([32997](https://github.com/WordPress/gutenberg/pull/32997))
+-   Writing flow:
+    -   Allow select all from empty selection. ([33446](https://github.com/WordPress/gutenberg/pull/33446))
+    -   Attempt to fix preview end-to-end failure. ([33467](https://github.com/WordPress/gutenberg/pull/33467))
+-   Components:
+    -   Suggestion List: Check if a node exists to scroll into view. ([33419](https://github.com/WordPress/gutenberg/pull/33419))
+    -   Navigation component: Fix item handling onClick twice. ([33286](https://github.com/WordPress/gutenberg/pull/33286))
+-   Editor: Extract snackbars into a separate component. ([33355](https://github.com/WordPress/gutenberg/pull/33355))
 
 ### Experiments
 
-- Component System:
-    - Promote g2 `Popover` as `Flyout`. ([32197](https://github.com/WordPress/gutenberg/pull/32197))
-    - Add useControlledValue. ([33039](https://github.com/WordPress/gutenberg/pull/33039))
-    - Add normalizeArrowKey. ([33208](https://github.com/WordPress/gutenberg/pull/33208))
-    - Add mergeEventHandlers. ([33205](https://github.com/WordPress/gutenberg/pull/33205))
-    - Add useCx. ([33172](https://github.com/WordPress/gutenberg/pull/33172))
-    - Add useLatestRef hook. ([33137](https://github.com/WordPress/gutenberg/pull/33137))
-    - Remove `@emotion/css` from Divider. ([33054](https://github.com/WordPress/gutenberg/pull/33054))
-- Navigation Block:
-    - Add Color Options for Submenus. ([31149](https://github.com/WordPress/gutenberg/pull/31149))
-    - Change Navigation block markup on front end only. ([30551](https://github.com/WordPress/gutenberg/pull/30551))
-    - Improve handling of open overlay. ([32886](https://github.com/WordPress/gutenberg/pull/32886))
-    - Menu item placeholder inheritance. ([32512](https://github.com/WordPress/gutenberg/pull/32512))
-    - Pass block attributes with rendering with location. ([33043](https://github.com/WordPress/gutenberg/pull/33043))
-    - Refactor of navigation block rendering using location attribute. ([33244](https://github.com/WordPress/gutenberg/pull/33244))
-- Global Styles:
-    - Cover against non existing styles. ([33127](https://github.com/WordPress/gutenberg/pull/33127))
-    - Missing link color on style properties to css var mapping. ([33150](https://github.com/WordPress/gutenberg/pull/33150))
-    - Preset variables not being user on the site editor. ([33149](https://github.com/WordPress/gutenberg/pull/33149))
+-   Component System:
+    -   Promote g2 `Popover` as `Flyout`. ([32197](https://github.com/WordPress/gutenberg/pull/32197))
+    -   Add useControlledValue. ([33039](https://github.com/WordPress/gutenberg/pull/33039))
+    -   Add normalizeArrowKey. ([33208](https://github.com/WordPress/gutenberg/pull/33208))
+    -   Add mergeEventHandlers. ([33205](https://github.com/WordPress/gutenberg/pull/33205))
+    -   Add useCx. ([33172](https://github.com/WordPress/gutenberg/pull/33172))
+    -   Add useLatestRef hook. ([33137](https://github.com/WordPress/gutenberg/pull/33137))
+    -   Remove `@emotion/css` from Divider. ([33054](https://github.com/WordPress/gutenberg/pull/33054))
+-   Navigation Block:
+    -   Add Color Options for Submenus. ([31149](https://github.com/WordPress/gutenberg/pull/31149))
+    -   Change Navigation block markup on front end only. ([30551](https://github.com/WordPress/gutenberg/pull/30551))
+    -   Improve handling of open overlay. ([32886](https://github.com/WordPress/gutenberg/pull/32886))
+    -   Menu item placeholder inheritance. ([32512](https://github.com/WordPress/gutenberg/pull/32512))
+    -   Pass block attributes with rendering with location. ([33043](https://github.com/WordPress/gutenberg/pull/33043))
+    -   Refactor of navigation block rendering using location attribute. ([33244](https://github.com/WordPress/gutenberg/pull/33244))
+-   Global Styles:
+    -   Cover against non existing styles. ([33127](https://github.com/WordPress/gutenberg/pull/33127))
+    -   Missing link color on style properties to css var mapping. ([33150](https://github.com/WordPress/gutenberg/pull/33150))
+    -   Preset variables not being user on the site editor. ([33149](https://github.com/WordPress/gutenberg/pull/33149))
 
 ### Documentation
 
-- Admin PWA: Make readme private. ([33216](https://github.com/WordPress/gutenberg/pull/33216))
-- Handbook:
-    - Block API:
-        - Apply enhancements included in WordPress 5.8. ([33252](https://github.com/WordPress/gutenberg/pull/33252))
-        - Clarify the type of `apiVersion` in block metadata. ([33249](https://github.com/WordPress/gutenberg/pull/33249))
-        - Fixes a typo in the documentation for block supports. ([33247](https://github.com/WordPress/gutenberg/pull/33247))
-    - Block Editor API: Changes to support multiple admin screens in WP 5.8. ([33262](https://github.com/WordPress/gutenberg/pull/33262))
-    - Custom Block Editor: Fixed bad image syntax and bold text. ([32897](https://github.com/WordPress/gutenberg/pull/32897))
-    - Fix API documentation for data reference guides. ([33384](https://github.com/WordPress/gutenberg/pull/33384))
-    - Plugin Release: Update Gutenberg release documentation to clarify release post workflow. ([33328](https://github.com/WordPress/gutenberg/pull/33328))
-    - `theme.json`:
-        - Add examples and highlight backward compatibility. ([33421](https://github.com/WordPress/gutenberg/pull/33421))
-        - Update `theme.json` documentation for WordPress 5.8. ([33131](https://github.com/WordPress/gutenberg/pull/33131))
-        - Fix codetabs syntax in `theme.json` documentation. ([33417](https://github.com/WordPress/gutenberg/pull/33417))
-    - Use markdown headings instead of links for API declarations. ([33381](https://github.com/WordPress/gutenberg/pull/33381))
-- Update documentation for link color in WordPress 5.8. ([33162](https://github.com/WordPress/gutenberg/pull/33162))
-- Packages:
-    - Add `PanelBody` for `InspectorControls`. ([33227](https://github.com/WordPress/gutenberg/pull/33227))
-    - Correct wrong setState call. ([32808](https://github.com/WordPress/gutenberg/pull/32808))
-    - Remove `withState` HOC references. ([33173](https://github.com/WordPress/gutenberg/pull/33173), [33222](https://github.com/WordPress/gutenberg/pull/33222), [33259](https://github.com/WordPress/gutenberg/pull/33259))
+-   Admin PWA: Make readme private. ([33216](https://github.com/WordPress/gutenberg/pull/33216))
+-   Handbook:
+    -   Block API:
+        -   Apply enhancements included in WordPress 5.8. ([33252](https://github.com/WordPress/gutenberg/pull/33252))
+        -   Clarify the type of `apiVersion` in block metadata. ([33249](https://github.com/WordPress/gutenberg/pull/33249))
+        -   Fixes a typo in the documentation for block supports. ([33247](https://github.com/WordPress/gutenberg/pull/33247))
+    -   Block Editor API: Changes to support multiple admin screens in WP 5.8. ([33262](https://github.com/WordPress/gutenberg/pull/33262))
+    -   Custom Block Editor: Fixed bad image syntax and bold text. ([32897](https://github.com/WordPress/gutenberg/pull/32897))
+    -   Fix API documentation for data reference guides. ([33384](https://github.com/WordPress/gutenberg/pull/33384))
+    -   Plugin Release: Update Gutenberg release documentation to clarify release post workflow. ([33328](https://github.com/WordPress/gutenberg/pull/33328))
+    -   `theme.json`:
+        -   Add examples and highlight backward compatibility. ([33421](https://github.com/WordPress/gutenberg/pull/33421))
+        -   Update `theme.json` documentation for WordPress 5.8. ([33131](https://github.com/WordPress/gutenberg/pull/33131))
+        -   Fix codetabs syntax in `theme.json` documentation. ([33417](https://github.com/WordPress/gutenberg/pull/33417))
+    -   Use markdown headings instead of links for API declarations. ([33381](https://github.com/WordPress/gutenberg/pull/33381))
+-   Update documentation for link color in WordPress 5.8. ([33162](https://github.com/WordPress/gutenberg/pull/33162))
+-   Packages:
+    -   Add `PanelBody` for `InspectorControls`. ([33227](https://github.com/WordPress/gutenberg/pull/33227))
+    -   Correct wrong setState call. ([32808](https://github.com/WordPress/gutenberg/pull/32808))
+    -   Remove `withState` HOC references. ([33173](https://github.com/WordPress/gutenberg/pull/33173), [33222](https://github.com/WordPress/gutenberg/pull/33222), [33259](https://github.com/WordPress/gutenberg/pull/33259))
 
 ### Code Quality
 
-- Avoid calling `gutenberg_` functions within code shipped through WordPress Core. ([33331](https://github.com/WordPress/gutenberg/pull/33331))
-- Block Editor:
-    - Refactor the user autocompleter to avoid apiFetch and rely on the data module. ([33028](https://github.com/WordPress/gutenberg/pull/33028))
-    - Warn when `useBlockProps` hook used with a wrong Block API version. ([33274](https://github.com/WordPress/gutenberg/pull/33274))
+-   Avoid calling `gutenberg_` functions within code shipped through WordPress Core. ([33331](https://github.com/WordPress/gutenberg/pull/33331))
+-   Block Editor:
+    -   Refactor the user autocompleter to avoid apiFetch and rely on the data module. ([33028](https://github.com/WordPress/gutenberg/pull/33028))
+    -   Warn when `useBlockProps` hook used with a wrong Block API version. ([33274](https://github.com/WordPress/gutenberg/pull/33274))
     -
-- Block Library:
-    - Image Block: Fix uncaught error. ([24334](https://github.com/WordPress/gutenberg/pull/24334))
-    - Latest Posts Block: Refactor to drop apiFetch usage in favor of using the data module. ([33063](https://github.com/WordPress/gutenberg/pull/33063))
-    - Template Part Block: Remove unnecessary function exists check on wp_filter_content_tags. ([33182](https://github.com/WordPress/gutenberg/pull/33182))
-- Components:
-    - BlockNavigation: Restructure the BlockNavigation component. ([31892](https://github.com/WordPress/gutenberg/pull/31892))
-    - Box Control: Rename VerticalHorizontalInputControls to AxialInputControls. ([33016](https://github.com/WordPress/gutenberg/pull/33016))
-    - GradientPicker: Stabilises GradientPicker and CustomGradientPicker components. ([31440](https://github.com/WordPress/gutenberg/pull/31440))
-    - Toolbar: Enforce `isAlternate` on `ToolbarDropdownMenu`. ([33129](https://github.com/WordPress/gutenberg/pull/33129))
-    - ZStack: Remove `@emotion/css` from ZStack. ([33053](https://github.com/WordPress/gutenberg/pull/33053))
-- Packages: Hoist dependencies for WordPress packages. ([33387](https://github.com/WordPress/gutenberg/pull/33387))
-- Plugin: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258))
+-   Block Library:
+    -   Image Block: Fix uncaught error. ([24334](https://github.com/WordPress/gutenberg/pull/24334))
+    -   Latest Posts Block: Refactor to drop apiFetch usage in favor of using the data module. ([33063](https://github.com/WordPress/gutenberg/pull/33063))
+    -   Template Part Block: Remove unnecessary function exists check on wp_filter_content_tags. ([33182](https://github.com/WordPress/gutenberg/pull/33182))
+-   Components:
+    -   BlockNavigation: Restructure the BlockNavigation component. ([31892](https://github.com/WordPress/gutenberg/pull/31892))
+    -   Box Control: Rename VerticalHorizontalInputControls to AxialInputControls. ([33016](https://github.com/WordPress/gutenberg/pull/33016))
+    -   GradientPicker: Stabilises GradientPicker and CustomGradientPicker components. ([31440](https://github.com/WordPress/gutenberg/pull/31440))
+    -   Toolbar: Enforce `isAlternate` on `ToolbarDropdownMenu`. ([33129](https://github.com/WordPress/gutenberg/pull/33129))
+    -   ZStack: Remove `@emotion/css` from ZStack. ([33053](https://github.com/WordPress/gutenberg/pull/33053))
+-   Packages: Hoist dependencies for WordPress packages. ([33387](https://github.com/WordPress/gutenberg/pull/33387))
+-   Plugin: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258))
 
 ### Tools
 
-- Testing:
-    - Add basic Site Title block coverage. ([32868](https://github.com/WordPress/gutenberg/pull/32868))
-    - Add some functionality to `createUser` and `deleteUser`. ([33067](https://github.com/WordPress/gutenberg/pull/33067))
-    - Enable previously skipped widgets tests. ([33121](https://github.com/WordPress/gutenberg/pull/33121))
-    - Skipping more end-to-end tests. ([33353](https://github.com/WordPress/gutenberg/pull/33353))
-    - Skip unstable end-to-end tests. ([33352](https://github.com/WordPress/gutenberg/pull/33352))
-    - Switch to new puppeteer APIs for emulating conditions. ([33410](https://github.com/WordPress/gutenberg/pull/33410))
-    - Update end-to-end tests to use new puppeteer drag and drop api. ([33386](https://github.com/WordPress/gutenberg/pull/33386))
-- Dependencies:
-    - Update CopyWebpackPlugin to v6. ([33220](https://github.com/WordPress/gutenberg/pull/33220))
-    - Upgrade Husky to 7.0.0 and git ignorance improved. ([33183](https://github.com/WordPress/gutenberg/pull/33183))
-    - Upgrade Puppeteer to 10.1. ([33327](https://github.com/WordPress/gutenberg/pull/33327))
-    - Upgrade Storybook to v6.3. ([33219](https://github.com/WordPress/gutenberg/pull/33219))
-- NPM Packages: Introduce release types to npm publishing script. ([33329](https://github.com/WordPress/gutenberg/pull/33329))
-- Plugin: Introduce `tools` folder with configuration files. ([33281](https://github.com/WordPress/gutenberg/pull/33281))
-- Workflows:
-    - Release Worflow: Remove “experimental” status from WP 5.8 stable items. ([33214](https://github.com/WordPress/gutenberg/pull/33214))
-    - Re-enable manually triggered workflows on forks. ([32821](https://github.com/WordPress/gutenberg/pull/32821))
-    - Use NPM caching built into `action/setup-node`. ([33190](https://github.com/WordPress/gutenberg/pull/33190))
-
+-   Testing:
+    -   Add basic Site Title block coverage. ([32868](https://github.com/WordPress/gutenberg/pull/32868))
+    -   Add some functionality to `createUser` and `deleteUser`. ([33067](https://github.com/WordPress/gutenberg/pull/33067))
+    -   Enable previously skipped widgets tests. ([33121](https://github.com/WordPress/gutenberg/pull/33121))
+    -   Skipping more end-to-end tests. ([33353](https://github.com/WordPress/gutenberg/pull/33353))
+    -   Skip unstable end-to-end tests. ([33352](https://github.com/WordPress/gutenberg/pull/33352))
+    -   Switch to new puppeteer APIs for emulating conditions. ([33410](https://github.com/WordPress/gutenberg/pull/33410))
+    -   Update end-to-end tests to use new puppeteer drag and drop api. ([33386](https://github.com/WordPress/gutenberg/pull/33386))
+-   Dependencies:
+    -   Update CopyWebpackPlugin to v6. ([33220](https://github.com/WordPress/gutenberg/pull/33220))
+    -   Upgrade Husky to 7.0.0 and git ignorance improved. ([33183](https://github.com/WordPress/gutenberg/pull/33183))
+    -   Upgrade Puppeteer to 10.1. ([33327](https://github.com/WordPress/gutenberg/pull/33327))
+    -   Upgrade Storybook to v6.3. ([33219](https://github.com/WordPress/gutenberg/pull/33219))
+-   NPM Packages: Introduce release types to npm publishing script. ([33329](https://github.com/WordPress/gutenberg/pull/33329))
+-   Plugin: Introduce `tools` folder with configuration files. ([33281](https://github.com/WordPress/gutenberg/pull/33281))
+-   Workflows:
+    -   Release Worflow: Remove “experimental” status from WP 5.8 stable items. ([33214](https://github.com/WordPress/gutenberg/pull/33214))
+    -   Re-enable manually triggered workflows on forks. ([32821](https://github.com/WordPress/gutenberg/pull/32821))
+    -   Use NPM caching built into `action/setup-node`. ([33190](https://github.com/WordPress/gutenberg/pull/33190))
 
+= 11.0.0 =
 
+## Changelog
 
+### Enhancements
 
+-   Template Parts & Reusable Blocks: Add editing overlay. ([31109](https://github.com/WordPress/gutenberg/pull/31109))
+-   General UI: Improve UI/UX for block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922))
+-   Widgets editor:
+    -   Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757))
+    -   Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953))
+    -   Set Legacy Widget form to display only when not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015))
+    -   Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905))
+    -   Add ability for Legacy custom HTML widget to transform into custom HTML block. ([32862](https://github.com/WordPress/gutenberg/pull/32862))
+    -   Remove the widget switcher block toolbar button for the Legacy Widget. ([32733](https://github.com/WordPress/gutenberg/pull/32733))
+    -   Wire `handle_legacy_widget_preview_iframe` to `admin_init_hook`. ([32854](https://github.com/WordPress/gutenberg/pull/32854))
+    -   Add <CopyHandler> to WidgetAreasBlockEditorProvider. ([33166](https://github.com/WordPress/gutenberg/pull/33166))
+    -   Replace "technical" error notice with a user-friendly version. ([33165](https://github.com/WordPress/gutenberg/pull/33165))
+    -   Replace legacy widget icon with its new version. ([33041](https://github.com/WordPress/gutenberg/pull/33041))
+-   Block Library:
+    -   Media Text block: allow drag and drop media replacement for Media & Text. ([29710](https://github.com/WordPress/gutenberg/pull/29710))
+    -   Categories block: Add a label for screen readers. ([33060](https://github.com/WordPress/gutenberg/pull/33060))
+    -   Post Template Block: Add post-classes in the loop for Post Template block. ([30497](https://github.com/WordPress/gutenberg/pull/30497))
+-   Global Styles and Templates:
+    -   Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810))
+    -   Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641))
+    -   Add filters to `get_block_templates` functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806))
+-   Core Data:
+    -   Allow making context-specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961))
+    -   Make `apiFetch` requests abortable via `AbortController` in `@wordpress/api-fetch`. ([32530](https://github.com/WordPress/gutenberg/pull/32530))
 
-= 11.0.0 =
+### New APIs
 
-### Enhancements
+-   Add an API to define the default template used for the template mode. ([32771](https://github.com/WordPress/gutenberg/pull/32771))
 
-- Template Parts & Reusable Blocks: Add editing overlay. ([31109](https://github.com/WordPress/gutenberg/pull/31109))
-- General UI: Improve UI/UX for block manager search. ([32922](https://github.com/WordPress/gutenberg/pull/32922))
-- Widgets editor:
-  - Display shortcuts for navigating regions. ([32757](https://github.com/WordPress/gutenberg/pull/32757))
-  - Improve insertion point and drag-n-drop in the widgets screen. ([32953](https://github.com/WordPress/gutenberg/pull/32953))
-  - Set Legacy Widget form to display only when not hidden. ([33015](https://github.com/WordPress/gutenberg/pull/33015))
-  - Stretch Widgets editor layout to full height. ([32905](https://github.com/WordPress/gutenberg/pull/32905))
-  - Add ability for Legacy custom HTML widget to transform into custom HTML block. ([32862](https://github.com/WordPress/gutenberg/pull/32862))
-  - Remove the widget switcher block toolbar button for the Legacy Widget. ([32733](https://github.com/WordPress/gutenberg/pull/32733))
-  - Wire `handle_legacy_widget_preview_iframe` to `admin_init_hook`. ([32854](https://github.com/WordPress/gutenberg/pull/32854))
-  - Add <CopyHandler> to WidgetAreasBlockEditorProvider. ([33166](https://github.com/WordPress/gutenberg/pull/33166))
-  - Replace "technical" error notice with a user-friendly version. ([33165](https://github.com/WordPress/gutenberg/pull/33165))
-  - Replace legacy widget icon with its new version. ([33041](https://github.com/WordPress/gutenberg/pull/33041))
-- Block Library:
-  - Media Text block: allow drag and drop media replacement for Media & Text. ([29710](https://github.com/WordPress/gutenberg/pull/29710))
-  - Categories block: Add a label for screen readers. ([33060](https://github.com/WordPress/gutenberg/pull/33060))
-  - Post Template Block: Add post-classes in the loop for Post Template block. ([30497](https://github.com/WordPress/gutenberg/pull/30497))
-- Global Styles and Templates:
-  - Allow left/right/center alignments when a layout is defined. ([32810](https://github.com/WordPress/gutenberg/pull/32810))
-  - Allow longhand and shorthand properties in `theme.json` and block attributes. ([31641](https://github.com/WordPress/gutenberg/pull/31641))
-  - Add filters to `get_block_templates` functions. ([31806](https://github.com/WordPress/gutenberg/pull/31806))
-- Core Data:
-  - Allow making context-specific requests using the data module. ([32961](https://github.com/WordPress/gutenberg/pull/32961))
-  - Make `apiFetch` requests abortable via `AbortController` in `@wordpress/api-fetch`. ([32530](https://github.com/WordPress/gutenberg/pull/32530))
+### Bug Fixes
 
-### New APIs
+-   Widgets Editor:
 
-- Add an API to define the default template used for the template mode. ([32771](https://github.com/WordPress/gutenberg/pull/32771))
-
-### Bug Fixes
-
-- Widgets Editor:
-
-  - Adjust widget form margins in the new Widgets Editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040))
-  - Adjust Legacy Widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974))
-  - Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978))
-  - Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976))
-  - Fix to allow adding the same image twice in Widgets Editor. ([32951](https://github.com/WordPress/gutenberg/pull/32951))
-  - Fix Legacy Widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871))
-  - Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066))
-  - Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683))
-  - Fix widget preview not working if widget registered via an instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781))
-  - Don't display admin notices on the Widgets Editor. ([32877](https://github.com/WordPress/gutenberg/pull/32877))
-  - Remove classic block in Widgets Editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800))
-  - Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761))
-  - Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738))
-  - Fix move to widget area checkmark. ([33213](https://github.com/WordPress/gutenberg/pull/33213))
-  - Fix Widget Block: `widget_id` is undefined when a widget is placed. ([33152](https://github.com/WordPress/gutenberg/pull/33152))
-  - Reset z-index on focused widget form. ([33122](https://github.com/WordPress/gutenberg/pull/33122))
-  - Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. ([33200](https://github.com/WordPress/gutenberg/pull/33200))
-  - Fix legacy widget height overflow. ([33191](https://github.com/WordPress/gutenberg/pull/33191))
-  - Fix pasting blocks by setting html block as freeform content handler. ([33164](https://github.com/WordPress/gutenberg/pull/33164))
-  - Fix slash inserter for widgets screen. ([33161](https://github.com/WordPress/gutenberg/pull/33161))
-  - Add `width: 100%` to `components-base-control` inside `wp-block-legacy-widget`. ([33141](https://github.com/WordPress/gutenberg/pull/33141))
-  - Fix error message - bail out if `get_current_screen()` returns null. ([33261](https://github.com/WordPress/gutenberg/pull/33261))
-  - Customizer:
-    - Fix block toolbar deselection when clicking scrollbar. ([32762]
-    - Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979))
-      (https://github.com/WordPress/gutenberg/pull/32762))
-    - Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749))
-    - Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479))
-
-- Block Library
-  - [Regression] Button block: Add deprecation for `style.border.radius` `number`. ([33117](https://github.com/WordPress/gutenberg/pull/33117))
-  - Query loop:
-    - Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737))
-    - Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037))
-    - Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892))
-    - Set default block variations not to inherit from global query. ([33163](https://github.com/WordPress/gutenberg/pull/33163))
-  - Group block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045))
-  - Button block:
-    - Use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017))
-    - Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089))
-  - Categories block:
-    - Fix broken experience for lower privileged users when fetching Categories . ([32994](https://github.com/WordPress/gutenberg/pull/32994))
-    - Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989))
-  - Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983))
-  - Archives block: add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971))
-  - Post terms block: Fix broken experience for lower privileged users when fetching Terms. ([32947](https://github.com/WordPress/gutenberg/pull/32947))
-  - Site Title and Site Tagline blocks: `readonly` view when the user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817))
-  - Image block:
-    - Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524))
-    - Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364))
-  - Site Logo block: fix broken experience for lower privileged users via permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919))
-  - Site Logo block: Update Site Logo block UI and option syncing. ([33179](https://github.com/WordPress/gutenberg/pull/33179))
-  - Show fewer warnings when blocks try to render themselves. ([33032](https://github.com/WordPress/gutenberg/pull/33032))
-- Block editor:
-  - Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031))
-  - Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024))
-  - Fix glitchy block focus style when multi selecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927))
-  - Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894))
-  - Fix unintended HTTP search request in `<LinkControl>` when `showSuggestions` is `false`. ([32857](https://github.com/WordPress/gutenberg/pull/32857))
-  - Ensure only valid URLs or anchors within the text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663))
-  - Fix drag and drop indices when a block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776))
-  - Consistent border with focus styles for block appender. ([33022](https://github.com/WordPress/gutenberg/pull/33022))
-  - Improve scrolling experience in Safari ([32824](https://github.com/WordPress/gutenberg/pull/32824))
-  - Avoid flash of background color when scrolling in Safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747))
-  - Refactor appender margin. ([33088](https://github.com/WordPress/gutenberg/pull/33088))
-  - Block Inserter: Prevent page scroll when searching a block. ([33012](https://github.com/WordPress/gutenberg/pull/33012))
-- Components:
-  - useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816))
-  - Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745))
-  - Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729))
-  - Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692))
-- CSS and styling:
-  - Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058))
-  - Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732))
-  - Rename `.interface-interface-skeleton__body` `z-index` to `.interface-interface-skeleton__content`. ([32869](https://github.com/WordPress/gutenberg/pull/32869))
-- Template editor:
-  - Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938))
-  - Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809))
-  - TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744))
-- Global styles:
-  - Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898))
-  - Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840))
-- Editor
-  - Fix "Select all" behavior in the editor. ([33167](https://github.com/WordPress/gutenberg/pull/33167))
-  - Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889))
-  - Revert "Prepublish Panel: Disable the Publish and Cancel buttons while saving". ([33113](https://github.com/WordPress/gutenberg/pull/33113))
+    -   Adjust widget form margins in the new Widgets Editor. ([33040](https://github.com/WordPress/gutenberg/pull/33040))
+    -   Adjust Legacy Widget form styles to match editor. ([32974](https://github.com/WordPress/gutenberg/pull/32974))
+    -   Fix creating and editing non-multi widgets. ([32978](https://github.com/WordPress/gutenberg/pull/32978))
+    -   Fix wide widget styles to allow floated contents. ([32976](https://github.com/WordPress/gutenberg/pull/32976))
+    -   Fix to allow adding the same image twice in Widgets Editor. ([32951](https://github.com/WordPress/gutenberg/pull/32951))
+    -   Fix Legacy Widget edit style bleed. ([32871](https://github.com/WordPress/gutenberg/pull/32871))
+    -   Fix flaky widgets-related end-to-end tests. ([33066](https://github.com/WordPress/gutenberg/pull/33066))
+    -   Fix widgets background when loading theme styles. ([32683](https://github.com/WordPress/gutenberg/pull/32683))
+    -   Fix widget preview not working if widget registered via an instance. ([32781](https://github.com/WordPress/gutenberg/pull/32781))
+    -   Don't display admin notices on the Widgets Editor. ([32877](https://github.com/WordPress/gutenberg/pull/32877))
+    -   Remove classic block in Widgets Editor. ([32800](https://github.com/WordPress/gutenberg/pull/32800))
+    -   Disable "FSE" blocks in Widgets Editor. ([32761](https://github.com/WordPress/gutenberg/pull/32761))
+    -   Align widget sidebar button. ([32738](https://github.com/WordPress/gutenberg/pull/32738))
+    -   Fix move to widget area checkmark. ([33213](https://github.com/WordPress/gutenberg/pull/33213))
+    -   Fix Widget Block: `widget_id` is undefined when a widget is placed. ([33152](https://github.com/WordPress/gutenberg/pull/33152))
+    -   Reset z-index on focused widget form. ([33122](https://github.com/WordPress/gutenberg/pull/33122))
+    -   Increase specificity of the NoPreview CSS rules to avoid conflicts with theme styles. ([33200](https://github.com/WordPress/gutenberg/pull/33200))
+    -   Fix legacy widget height overflow. ([33191](https://github.com/WordPress/gutenberg/pull/33191))
+    -   Fix pasting blocks by setting html block as freeform content handler. ([33164](https://github.com/WordPress/gutenberg/pull/33164))
+    -   Fix slash inserter for widgets screen. ([33161](https://github.com/WordPress/gutenberg/pull/33161))
+    -   Add `width: 100%` to `components-base-control` inside `wp-block-legacy-widget`. ([33141](https://github.com/WordPress/gutenberg/pull/33141))
+    -   Fix error message - bail out if `get_current_screen()` returns null. ([33261](https://github.com/WordPress/gutenberg/pull/33261))
+    -   Customizer:
+        -   Fix block toolbar deselection when clicking scrollbar. ([32762]
+        -   Avoid adding default block to empty widget areas in customizer. ([32979](https://github.com/WordPress/gutenberg/pull/32979))
+            (https://github.com/WordPress/gutenberg/pull/32762))
+        -   Fix apparent overflow in Customizer caused by widgets editor. ([32749](https://github.com/WordPress/gutenberg/pull/32749))
+        -   Fix scroll jitter in Customize Widgets. ([32479](https://github.com/WordPress/gutenberg/pull/32479))
+
+-   Block Library
+    -   [Regression] Button block: Add deprecation for `style.border.radius` `number`. ([33117](https://github.com/WordPress/gutenberg/pull/33117))
+    -   Query loop:
+        -   Select first Query Loop found from pattern selection. ([32737](https://github.com/WordPress/gutenberg/pull/32737))
+        -   Fix race condition for making Post blocks inside uneditable. ([33037](https://github.com/WordPress/gutenberg/pull/33037))
+        -   Fix full width children from scrolling horizontally only in the editor. ([32892](https://github.com/WordPress/gutenberg/pull/32892))
+        -   Set default block variations not to inherit from global query. ([33163](https://github.com/WordPress/gutenberg/pull/33163))
+    -   Group block: Avoid rendering the layout configuration twice. ([33045](https://github.com/WordPress/gutenberg/pull/33045))
+    -   Button block:
+        -   Use border support provided styles and classes. ([33017](https://github.com/WordPress/gutenberg/pull/33017))
+        -   Adding buttons should respect the preferred style. ([31089](https://github.com/WordPress/gutenberg/pull/31089))
+    -   Categories block:
+        -   Fix broken experience for lower privileged users when fetching Categories . ([32994](https://github.com/WordPress/gutenberg/pull/32994))
+        -   Fix crash when trying to access categories on insertion. ([32989](https://github.com/WordPress/gutenberg/pull/32989))
+    -   Latest Posts & Latest Comments blocks: Fix to remove the default indent in various editors. ([32983](https://github.com/WordPress/gutenberg/pull/32983))
+    -   Archives block: add custom classes to archive dropdown. ([32971](https://github.com/WordPress/gutenberg/pull/32971))
+    -   Post terms block: Fix broken experience for lower privileged users when fetching Terms. ([32947](https://github.com/WordPress/gutenberg/pull/32947))
+    -   Site Title and Site Tagline blocks: `readonly` view when the user has no the right permissions. ([32817](https://github.com/WordPress/gutenberg/pull/32817))
+    -   Image block:
+        -   Fix block validation errors when clearing height/width. ([32524](https://github.com/WordPress/gutenberg/pull/32524))
+        -   Correctly set image size slug. ([32364](https://github.com/WordPress/gutenberg/pull/32364))
+    -   Site Logo block: fix broken experience for lower privileged users via permissions handling. ([32919](https://github.com/WordPress/gutenberg/pull/32919))
+    -   Site Logo block: Update Site Logo block UI and option syncing. ([33179](https://github.com/WordPress/gutenberg/pull/33179))
+    -   Show fewer warnings when blocks try to render themselves. ([33032](https://github.com/WordPress/gutenberg/pull/33032))
+-   Block editor:
+    -   Fix switcher focus style. ([33031](https://github.com/WordPress/gutenberg/pull/33031))
+    -   Fix drag and drop indicator above first block and RTL drop indicators. ([33024](https://github.com/WordPress/gutenberg/pull/33024))
+    -   Fix glitchy block focus style when multi selecting blocks. ([32927](https://github.com/WordPress/gutenberg/pull/32927))
+    -   Fix collapsing appender when paragraph disabled. ([32894](https://github.com/WordPress/gutenberg/pull/32894))
+    -   Fix unintended HTTP search request in `<LinkControl>` when `showSuggestions` is `false`. ([32857](https://github.com/WordPress/gutenberg/pull/32857))
+    -   Ensure only valid URLs or anchors within the text are automatically created as links. ([32663](https://github.com/WordPress/gutenberg/pull/32663))
+    -   Fix drag and drop indices when a block list contains a style element. ([32776](https://github.com/WordPress/gutenberg/pull/32776))
+    -   Consistent border with focus styles for block appender. ([33022](https://github.com/WordPress/gutenberg/pull/33022))
+    -   Improve scrolling experience in Safari ([32824](https://github.com/WordPress/gutenberg/pull/32824))
+    -   Avoid flash of background color when scrolling in Safari. ([32747](https://github.com/WordPress/gutenberg/pull/32747))
+    -   Refactor appender margin. ([33088](https://github.com/WordPress/gutenberg/pull/33088))
+    -   Block Inserter: Prevent page scroll when searching a block. ([33012](https://github.com/WordPress/gutenberg/pull/33012))
+-   Components:
+    -   useNavigateRegions: Don't remove click event if there's no element. ([32816](https://github.com/WordPress/gutenberg/pull/32816))
+    -   Stop modifying the parent context and correctly memoize it. ([32745](https://github.com/WordPress/gutenberg/pull/32745))
+    -   Clear event listeners on unmount in Tooltip component. ([32729](https://github.com/WordPress/gutenberg/pull/32729))
+    -   Allow decimals in spacing controls. ([32692](https://github.com/WordPress/gutenberg/pull/32692))
+-   CSS and styling:
+    -   Remove "is-dark-theme" rules from mixins. ([33058](https://github.com/WordPress/gutenberg/pull/33058))
+    -   Set explicit z-index on interface body to ensure it’s pinned under interface header. ([32732](https://github.com/WordPress/gutenberg/pull/32732))
+    -   Rename `.interface-interface-skeleton__body` `z-index` to `.interface-interface-skeleton__content`. ([32869](https://github.com/WordPress/gutenberg/pull/32869))
+-   Template editor:
+    -   Fix: Template editor header area is difficult to navigate with screenreaders. ([32938](https://github.com/WordPress/gutenberg/pull/32938))
+    -   Do not allow users to create templates with blank titles. ([32809](https://github.com/WordPress/gutenberg/pull/32809))
+    -   TemplatePanel: Fixed a problem that when a new template is created, the template is not displayed in the select box. ([32744](https://github.com/WordPress/gutenberg/pull/32744))
+-   Global styles:
+    -   Fix a regression where `custom-units` are forced as an array. ([32898](https://github.com/WordPress/gutenberg/pull/32898))
+    -   Allow custom properties to merge. ([31840](https://github.com/WordPress/gutenberg/pull/31840))
+-   Editor
+    -   Fix "Select all" behavior in the editor. ([33167](https://github.com/WordPress/gutenberg/pull/33167))
+    -   Prepublish Panel: Disable the Publish and Cancel buttons while saving. ([32889](https://github.com/WordPress/gutenberg/pull/32889))
+    -   Revert "Prepublish Panel: Disable the Publish and Cancel buttons while saving". ([33113](https://github.com/WordPress/gutenberg/pull/33113))
 
 ### WordPress Core compatibility
 
-- Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977))
-- Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858))
-- Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814))
+-   Block Library: Improve view script integration to account for WordPress Core. ([32977](https://github.com/WordPress/gutenberg/pull/32977))
+-   Auto-enable the template editor for themes with theme.json only. ([32858](https://github.com/WordPress/gutenberg/pull/32858))
+-   Unify handling for block view scripts. ([32814](https://github.com/WordPress/gutenberg/pull/32814))
 
 ### Documentation
 
-- Handbook:
-  - Update ESnext code in the block toolbar documentation. ([32422](https://github.com/WordPress/gutenberg/pull/32422))
-  - Fix "Gutenberg" typo in dynamic blocks tutorial. ([33013](https://github.com/WordPress/gutenberg/pull/33013))
-  - Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770))
-  - Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759))
-  - Block Editor and Block API:
-    - Add link color supports to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936))
-    - Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850))
-  - Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921))
-  - Testing: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829))
-- Components:
-  - ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030))
-  - Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746))
-- Widgets: Add technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026))
+-   Handbook:
+    -   Update ESnext code in the block toolbar documentation. ([32422](https://github.com/WordPress/gutenberg/pull/32422))
+    -   Fix "Gutenberg" typo in dynamic blocks tutorial. ([33013](https://github.com/WordPress/gutenberg/pull/33013))
+    -   Polish the Gutenberg release docs, performance audit section. ([32770](https://github.com/WordPress/gutenberg/pull/32770))
+    -   Update filter in Widget Block Editor documentation. ([32759](https://github.com/WordPress/gutenberg/pull/32759))
+    -   Block Editor and Block API:
+        -   Add link color supports to Block API documentation. ([32936](https://github.com/WordPress/gutenberg/pull/32936))
+        -   Unify Block Editor readme language and example. ([31850](https://github.com/WordPress/gutenberg/pull/31850))
+    -   Architecture: Add a schema explaining the relationship between the packages that comprise the post editor. ([32921](https://github.com/WordPress/gutenberg/pull/32921))
+    -   Testing: Update testing overview documentation. ([32829](https://github.com/WordPress/gutenberg/pull/32829))
+-   Components:
+    -   ServerSideRender: Update documentation for placeholder props. ([33030](https://github.com/WordPress/gutenberg/pull/33030))
+    -   Add 'area' key to function doc for `gutenberg_get_block_templates`. ([32746](https://github.com/WordPress/gutenberg/pull/32746))
+-   Widgets: Add technical implementation details for Widgets Customizer. ([33026](https://github.com/WordPress/gutenberg/pull/33026))
 
 ### Code Quality
 
-- Block Library:
-  - Query Loop: use plain `div` for wrapper element in patterns. ([32867](https://github.com/WordPress/gutenberg/pull/32867))
-  - Post Template block: remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804))
-  - Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866))
-  - Improve block categories by moving several blocks from `Design` to `Theme`. ([32568](https://github.com/WordPress/gutenberg/pull/32568))
-- Typings:
-  - Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855))
-  - Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967))
-  - Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965))
-  - Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942))
-  - Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313))
-- Card component refactor:
-  - Remove the g2 implementation of `Card`. ([32764](https://github.com/WordPress/gutenberg/pull/32764))
-  - Update `Card` component Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763))
-  - Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743))
-  - Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566))
-- Components:
-  - Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852))
-  - Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774))
-  - Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796))
-- Editors & Interface:
-  - Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874))
-  - Update `FullscreenMode` from class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925))
-  - Remove `@wordpress/editor` as a dependency from `@wordpress/block-library`. ([32801](https://github.com/WordPress/gutenberg/pull/32801))
-- Testing:
-  - Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008))
-  - Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797))
-  - Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904))
-- Linting:
-  - Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537))
-  - Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516))
-- Data: Handle `context` state updates in `core-data` reducer on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991))
-- APIs: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258))
+-   Block Library:
+    -   Query Loop: use plain `div` for wrapper element in patterns. ([32867](https://github.com/WordPress/gutenberg/pull/32867))
+    -   Post Template block: remove `gutenberg` domain from Post Template block. ([32804](https://github.com/WordPress/gutenberg/pull/32804))
+    -   Ensure there is no direct import from core/editor store. ([32866](https://github.com/WordPress/gutenberg/pull/32866))
+    -   Improve block categories by moving several blocks from `Design` to `Theme`. ([32568](https://github.com/WordPress/gutenberg/pull/32568))
+-   Typings:
+    -   Begin adding types, starting with redus-store/meta/actions. ([32855](https://github.com/WordPress/gutenberg/pull/32855))
+    -   Type `promise-middleware`. ([32967](https://github.com/WordPress/gutenberg/pull/32967))
+    -   Add types to redux-store/metadata/selectors. ([32965](https://github.com/WordPress/gutenberg/pull/32965))
+    -   Add types to redux-store metadata reducer. ([32942](https://github.com/WordPress/gutenberg/pull/32942))
+    -   Redux routine: Add types. ([21313](https://github.com/WordPress/gutenberg/pull/21313))
+-   Card component refactor:
+    -   Remove the g2 implementation of `Card`. ([32764](https://github.com/WordPress/gutenberg/pull/32764))
+    -   Update `Card` component Storybook story. ([32763](https://github.com/WordPress/gutenberg/pull/32763))
+    -   Update components provider story. ([32743](https://github.com/WordPress/gutenberg/pull/32743))
+    -   Update to g2 implementation. ([32566](https://github.com/WordPress/gutenberg/pull/32566))
+-   Components:
+    -   Remove duplicated space utilities. ([32852](https://github.com/WordPress/gutenberg/pull/32852))
+    -   Unit control Utils: Update JS documentation and add basic test coverage. ([32774](https://github.com/WordPress/gutenberg/pull/32774))
+    -   Allow for non-polymorphic components. ([32796](https://github.com/WordPress/gutenberg/pull/32796))
+-   Editors & Interface:
+    -   Update pre-publish setting copy. ([32874](https://github.com/WordPress/gutenberg/pull/32874))
+    -   Update `FullscreenMode` from class components to functional components. ([32925](https://github.com/WordPress/gutenberg/pull/32925))
+    -   Remove `@wordpress/editor` as a dependency from `@wordpress/block-library`. ([32801](https://github.com/WordPress/gutenberg/pull/32801))
+-   Testing:
+    -   Iframed editor: Add Masonry integration end-to-end test. ([33008](https://github.com/WordPress/gutenberg/pull/33008))
+    -   Add regression end-to-end test for the bug that caused some wp_options to get corrupted data. ([32797](https://github.com/WordPress/gutenberg/pull/32797))
+    -   Fix broken the post-template-editor test. ([32904](https://github.com/WordPress/gutenberg/pull/32904))
+-   Linting:
+    -   Promote lint rule to error when validating store string literals. ([32537](https://github.com/WordPress/gutenberg/pull/32537))
+    -   Cleanup PHP Codesniffer warnings and enable fail. ([26516](https://github.com/WordPress/gutenberg/pull/26516))
+-   Data: Handle `context` state updates in `core-data` reducer on `edits`. ([32991](https://github.com/WordPress/gutenberg/pull/32991))
+-   APIs: Remove deprecated APIs that are no longer supported in version 11.0. ([33258](https://github.com/WordPress/gutenberg/pull/33258))
 
 ### Tools
 
-- Testing:
-  - Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832))
-  - Add `getCurrentUser()` to e2e test utils: , and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050))
-  - Fix WP editor metabox e2e test. ([32915](https://github.com/WordPress/gutenberg/pull/32915))
-  - Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888))
-- CSS & Styling:
-  - Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051))
-  - `@wordpress/scripts`: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834))
-  - Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930))
-- Linting:
-  - Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906))
-  - Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633))
-- Workflows:
-  - Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856))
-  - Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560))
+-   Testing:
+    -   Improve image caret e2e-test. ([32832](https://github.com/WordPress/gutenberg/pull/32832))
+    -   Add `getCurrentUser()` to e2e test utils: , and use it for user switching. ([33050](https://github.com/WordPress/gutenberg/pull/33050))
+    -   Fix WP editor metabox e2e test. ([32915](https://github.com/WordPress/gutenberg/pull/32915))
+    -   Fix failing PHPUnit test caused by changes in WP core. ([32888](https://github.com/WordPress/gutenberg/pull/32888))
+-   CSS & Styling:
+    -   Restrict imports of @emotion/css. ([33051](https://github.com/WordPress/gutenberg/pull/33051))
+    -   `@wordpress/scripts`: Support path-based chunk names in FixStyleWebpackPlugin. ([32834](https://github.com/WordPress/gutenberg/pull/32834))
+    -   Upgrade to Emotion 11. ([32930](https://github.com/WordPress/gutenberg/pull/32930))
+-   Linting:
+    -   Fix eslint-import resolver with extraneous dependencies. ([32906](https://github.com/WordPress/gutenberg/pull/32906))
+    -   Scripts: Update `lint-md-docs` script to use ignore-path. ([32633](https://github.com/WordPress/gutenberg/pull/32633))
+-   Workflows:
+    -   Recursively clear node modules when building for ci. ([32856](https://github.com/WordPress/gutenberg/pull/32856))
+    -   Allow point releases after a new RC is out. ([32560](https://github.com/WordPress/gutenberg/pull/32560))
 
 ### Performance
 
-- Add in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741))
+-   Add in memory cache for rich link previews data. ([32741](https://github.com/WordPress/gutenberg/pull/32741))
 
 ### Experiments
 
-- Navigation Block and Editor:
-  - Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918))
-  - Correct the case of navigation `__unstableLocation`. ([32783](https://github.com/WordPress/gutenberg/pull/32783)
-  - Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491))
-  - Avoid double encoding of URLs in Navigation Link block. ([32840](https://github.com/WordPress/gutenberg/pull/32840))
-- Site Editor:
-  - Fix logic error on site editor `useSetting`. ([32793](https://github.com/WordPress/gutenberg/pull/32793))
-  - Fix oEmbeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331))
-
+-   Navigation Block and Editor:
+    -   Update the function name and correct the comment. ([32918](https://github.com/WordPress/gutenberg/pull/32918))
+    -   Correct the case of navigation `__unstableLocation`. ([32783](https://github.com/WordPress/gutenberg/pull/32783)
+    -   Navigation block: Add an unstable location attribute. ([32491](https://github.com/WordPress/gutenberg/pull/32491))
+    -   Avoid double encoding of URLs in Navigation Link block. ([32840](https://github.com/WordPress/gutenberg/pull/32840))
+-   Site Editor:
+    -   Fix logic error on site editor `useSetting`. ([32793](https://github.com/WordPress/gutenberg/pull/32793))
+    -   Fix oEmbeds not working in block template parts. ([32331](https://github.com/WordPress/gutenberg/pull/32331))
 
 = 10.9.1 =
 
+## Changelog
+
 ### Bug Fixes
 
-- Autocomplete: Fix double popover. ([32988](https://github.com/WordPress/gutenberg/pull/32988))
+-   Autocomplete: Fix double popover. ([32988](https://github.com/WordPress/gutenberg/pull/32988))
 
+= 10.9.0 =
 
+## Changelog
 
+### Enhancements
 
-= 10.9.0 =
+-   Components:
+-   UnitControl: Reduce code duplication for defined units. ([32731](https://github.com/WordPress/gutenberg/pull/32731))
+-   BoxControl: Add support for grouped directions (vertical and horizontal controls). ([32610](https://github.com/WordPress/gutenberg/pull/32610))
+-   Notice: Added onDismiss option in createInfoNotice. ([32338](https://github.com/WordPress/gutenberg/pull/32338))
+-   Block Library:
+-   Latest Posts: Limit latest-post authors dropdown to users with published posts. ([32662](https://github.com/WordPress/gutenberg/pull/32662))
+-   Calendar: Add loading and empty state. ([31504](https://github.com/WordPress/gutenberg/pull/31504))
+-   Query Loop: Add helpful text to the block. ([32694](https://github.com/WordPress/gutenberg/pull/32694))
+-   Query Loop: Rename QueryLoop to PostTemplate and change Query label. ([32514](https://github.com/WordPress/gutenberg/pull/32514))
+-   Spacer: Try an alternate min-height fix. ([32543](https://github.com/WordPress/gutenberg/pull/32543))
+-   Heading: Show all heading levels in toolbar group. ([32483](https://github.com/WordPress/gutenberg/pull/32483))
+-   Post Terms: Add a CSS class to identify the taxonomy. ([31832](https://github.com/WordPress/gutenberg/pull/31832))
+-   Legacy Widget: Move block to `@wordpress/widgets`. ([32501](https://github.com/WordPress/gutenberg/pull/32501))
+-   Block Editor:
+-   Enhance link control UI with rich URL previews. ([31464](https://github.com/WordPress/gutenberg/pull/31464))
+-   List View: Allow expanding and collapsing of nested blocks. ([32117](https://github.com/WordPress/gutenberg/pull/32117))
+-   Editor Breadcrumb: Add a `rootLabelText` prop. ([32528](https://github.com/WordPress/gutenberg/pull/32528))
+-   Don't hardcode CSS units. ([32482](https://github.com/WordPress/gutenberg/pull/32482))
+-   Refactor LinkControl component to support React 17. ([32552](https://github.com/WordPress/gutenberg/pull/32552))
+-   Remove snapshots from tests for LinkControl. ([32592](https://github.com/WordPress/gutenberg/pull/32592))
+-   Block Support:
+-   Update border support to allow non-pixel units. ([31483](https://github.com/WordPress/gutenberg/pull/31483))
+-   Icons:
+-   Add new icons. ([32371](https://github.com/WordPress/gutenberg/pull/32371))
+-   Tweak people icon. ([32354](https://github.com/WordPress/gutenberg/pull/32354))
+-   Expose `trendingDown` and `trendindUp` icons. ([32124](https://github.com/WordPress/gutenberg/pull/32124))
+-   Template Editing Mode:
+-   Update welcome guide language for the template editor. ([32639](https://github.com/WordPress/gutenberg/pull/32639))
+-   Translate delete template confirmation message. ([32647](https://github.com/WordPress/gutenberg/pull/32647))
+-   Disable renaming templates named by core; Display descriptions. ([32636](https://github.com/WordPress/gutenberg/pull/32636))
+-   Update the template creation modal. ([32427](https://github.com/WordPress/gutenberg/pull/32427))
+-   Post Editor:
+-   Use the post type singular_name as the root Block Breadcrumb label. ([32609](https://github.com/WordPress/gutenberg/pull/32609))
+-   Absorb block manager within blocks preferences. ([32166](https://github.com/WordPress/gutenberg/pull/32166))
+-   Widget Editor:
+-   Hide some settings from the "Options" menu on small screens. ([32690](https://github.com/WordPress/gutenberg/pull/32690))
+-   Add Breadcrumbs Block. ([32498](https://github.com/WordPress/gutenberg/pull/32498))
+-   Use button block appender in widget areas. ([32580](https://github.com/WordPress/gutenberg/pull/32580))
+-   Add show block bread crumbs feature toggle to more menu. ([32569](https://github.com/WordPress/gutenberg/pull/32569))
+-   Unhide the classic menu widget. ([32431](https://github.com/WordPress/gutenberg/pull/32431))
 
-### Enhancements
+### Bug Fixes
 
-- Components:
-- UnitControl: Reduce code duplication for defined units. ([32731](https://github.com/WordPress/gutenberg/pull/32731))
-- BoxControl: Add support for grouped directions (vertical and horizontal controls). ([32610](https://github.com/WordPress/gutenberg/pull/32610))
-- Notice: Added onDismiss option in createInfoNotice. ([32338](https://github.com/WordPress/gutenberg/pull/32338))
-- Block Library:
-- Latest Posts: Limit latest-post authors dropdown to users with published posts. ([32662](https://github.com/WordPress/gutenberg/pull/32662))
-- Calendar: Add loading and empty state. ([31504](https://github.com/WordPress/gutenberg/pull/31504))
-- Query Loop: Add helpful text to the block. ([32694](https://github.com/WordPress/gutenberg/pull/32694))
-- Query Loop: Rename QueryLoop to PostTemplate and change Query label. ([32514](https://github.com/WordPress/gutenberg/pull/32514))
-- Spacer: Try an alternate min-height fix. ([32543](https://github.com/WordPress/gutenberg/pull/32543))
-- Heading: Show all heading levels in toolbar group. ([32483](https://github.com/WordPress/gutenberg/pull/32483))
-- Post Terms: Add a CSS class to identify the taxonomy. ([31832](https://github.com/WordPress/gutenberg/pull/31832))
-- Legacy Widget: Move block to `@wordpress/widgets`. ([32501](https://github.com/WordPress/gutenberg/pull/32501))
-- Block Editor:
-- Enhance link control UI with rich URL previews. ([31464](https://github.com/WordPress/gutenberg/pull/31464))
-- List View: Allow expanding and collapsing of nested blocks. ([32117](https://github.com/WordPress/gutenberg/pull/32117))
-- Editor Breadcrumb: Add a `rootLabelText` prop. ([32528](https://github.com/WordPress/gutenberg/pull/32528))
-- Don't hardcode CSS units. ([32482](https://github.com/WordPress/gutenberg/pull/32482))
-- Refactor LinkControl component to support React 17. ([32552](https://github.com/WordPress/gutenberg/pull/32552))
-- Remove snapshots from tests for LinkControl. ([32592](https://github.com/WordPress/gutenberg/pull/32592))
-- Block Support:
-- Update border support to allow non-pixel units. ([31483](https://github.com/WordPress/gutenberg/pull/31483))
-- Icons:
-- Add new icons. ([32371](https://github.com/WordPress/gutenberg/pull/32371))
-- Tweak people icon. ([32354](https://github.com/WordPress/gutenberg/pull/32354))
-- Expose `trendingDown` and `trendindUp` icons. ([32124](https://github.com/WordPress/gutenberg/pull/32124))
-- Template Editing Mode:
-- Update welcome guide language for the template editor. ([32639](https://github.com/WordPress/gutenberg/pull/32639))
-- Translate delete template confirmation message. ([32647](https://github.com/WordPress/gutenberg/pull/32647))
-- Disable renaming templates named by core; Display descriptions. ([32636](https://github.com/WordPress/gutenberg/pull/32636))
-- Update the template creation modal. ([32427](https://github.com/WordPress/gutenberg/pull/32427))
-- Post Editor:
-- Use the post type singular_name as the root Block Breadcrumb label. ([32609](https://github.com/WordPress/gutenberg/pull/32609))
-- Absorb block manager within blocks preferences. ([32166](https://github.com/WordPress/gutenberg/pull/32166))
-- Widget Editor:
-- Hide some settings from the "Options" menu on small screens. ([32690](https://github.com/WordPress/gutenberg/pull/32690))
-- Add Breadcrumbs Block. ([32498](https://github.com/WordPress/gutenberg/pull/32498))
-- Use button block appender in widget areas. ([32580](https://github.com/WordPress/gutenberg/pull/32580))
-- Add show block bread crumbs feature toggle to more menu. ([32569](https://github.com/WordPress/gutenberg/pull/32569))
-- Unhide the classic menu widget. ([32431](https://github.com/WordPress/gutenberg/pull/32431))
-
-
-### Bug Fixes
-
-- Block Library:
-- Image Block: Fix cover block exists check. ([32666](https://github.com/WordPress/gutenberg/pull/32666))
-- Embed: Fix embed to paragraph transform when caption has rich text formats. ([32355](https://github.com/WordPress/gutenberg/pull/32355))
-- Columns: Fix deprecation caused when adding a column. ([32378](https://github.com/WordPress/gutenberg/pull/32378))
-- Site Logo: Fix site-logo not getting removed on `remove_theme_mod`. ([32370](https://github.com/WordPress/gutenberg/pull/32370))
-- Social: Try to fix color inheritance for social links. ([32625](https://github.com/WordPress/gutenberg/pull/32625))
-- Social: Correctly position the link popover when List View is open. ([32525](https://github.com/WordPress/gutenberg/pull/32525))
-- Code: Try an experimentalSelector. ([31742](https://github.com/WordPress/gutenberg/pull/31742))
-- Block Editor:
-- RichText: Fix loss of list content when switching list types. ([32432](https://github.com/WordPress/gutenberg/pull/32432))
-- `useBlockDropZone`: Fix horizontal indicator. ([32589](https://github.com/WordPress/gutenberg/pull/32589))
-- Inserter: Fix insertion point displaying when there are no inserter items. ([32576](https://github.com/WordPress/gutenberg/pull/32576))
-- Drop indicator: Show around dragged block and show above selected block for file drop. ([31896](https://github.com/WordPress/gutenberg/pull/31896))
-- Fix vertical scroll in horizontal toolbar. ([32655](https://github.com/WordPress/gutenberg/pull/32655))
-- Fix block multi selection in nested blocks. ([32536](https://github.com/WordPress/gutenberg/pull/32536))
-- Fix block toolbar overlap with header. ([32424](https://github.com/WordPress/gutenberg/pull/32424))
-- Blocks:
-- Avoid keeping the same client ID when transforming blocks. ([32453](https://github.com/WordPress/gutenberg/pull/32453))
-- Allow themes to add inline styles for all blocks when using lazy styles loading. ([32275](https://github.com/WordPress/gutenberg/pull/32275))
-- Components:
-- RadioControl: Add `hideLabelFromVision` prop. ([32414](https://github.com/WordPress/gutenberg/pull/32414))
-- DatePicker: Fix crash when navigating between months. ([31751](https://github.com/WordPress/gutenberg/pull/31751))
-- Autocomplete: Prevent setting state for unmounted component. ([32654](https://github.com/WordPress/gutenberg/pull/32654))
-- Editor:
-- Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. ([32658](https://github.com/WordPress/gutenberg/pull/32658))
-- Widget Editor:
-- Don't delete a widget if it is moved to a different area. ([32608](https://github.com/WordPress/gutenberg/pull/32608))
-- Fix button spacing in header. ([32585](https://github.com/WordPress/gutenberg/pull/32585))
-- Decode HTML entities for name and description props. ([32503](https://github.com/WordPress/gutenberg/pull/32503))
-- Fix dirty state after adding new block. ([32573](https://github.com/WordPress/gutenberg/pull/32573))
-- Don't add undo levels when editing records on save. ([32572](https://github.com/WordPress/gutenberg/pull/32572))
-- Save deleted and restored widgets. ([32534](https://github.com/WordPress/gutenberg/pull/32534))
-- Don't show widgets in menu without theme support. ([32420](https://github.com/WordPress/gutenberg/pull/32420))
-- Fix inspector opening on click outside widget area. ([32450](https://github.com/WordPress/gutenberg/pull/32450))
-- Legacy Widget: Don't display "No preview" when widget has image tags. ([32605](https://github.com/WordPress/gutenberg/pull/32605))
-- Post Editor:
-- Prevent locking users in saving state when saving meta boxes fails. ([32485](https://github.com/WordPress/gutenberg/pull/32485))
-- Edit Post: Add metaBoxUpdatesFailure action. ([32623](https://github.com/WordPress/gutenberg/pull/32623))
-- Full Site Editing
-- Only add skip-link for block themes & templates on the frontend. ([32451](https://github.com/WordPress/gutenberg/pull/32451))
-- Storybook:
-- Fix misc warnings. ([32401](https://github.com/WordPress/gutenberg/pull/32401))
-- Data:
-- useSelect: Silently error (for block zombie children). ([32088](https://github.com/WordPress/gutenberg/pull/32088))
+-   Block Library:
+-   Image Block: Fix cover block exists check. ([32666](https://github.com/WordPress/gutenberg/pull/32666))
+-   Embed: Fix embed to paragraph transform when caption has rich text formats. ([32355](https://github.com/WordPress/gutenberg/pull/32355))
+-   Columns: Fix deprecation caused when adding a column. ([32378](https://github.com/WordPress/gutenberg/pull/32378))
+-   Site Logo: Fix site-logo not getting removed on `remove_theme_mod`. ([32370](https://github.com/WordPress/gutenberg/pull/32370))
+-   Social: Try to fix color inheritance for social links. ([32625](https://github.com/WordPress/gutenberg/pull/32625))
+-   Social: Correctly position the link popover when List View is open. ([32525](https://github.com/WordPress/gutenberg/pull/32525))
+-   Code: Try an experimentalSelector. ([31742](https://github.com/WordPress/gutenberg/pull/31742))
+-   Block Editor:
+-   RichText: Fix loss of list content when switching list types. ([32432](https://github.com/WordPress/gutenberg/pull/32432))
+-   `useBlockDropZone`: Fix horizontal indicator. ([32589](https://github.com/WordPress/gutenberg/pull/32589))
+-   Inserter: Fix insertion point displaying when there are no inserter items. ([32576](https://github.com/WordPress/gutenberg/pull/32576))
+-   Drop indicator: Show around dragged block and show above selected block for file drop. ([31896](https://github.com/WordPress/gutenberg/pull/31896))
+-   Fix vertical scroll in horizontal toolbar. ([32655](https://github.com/WordPress/gutenberg/pull/32655))
+-   Fix block multi selection in nested blocks. ([32536](https://github.com/WordPress/gutenberg/pull/32536))
+-   Fix block toolbar overlap with header. ([32424](https://github.com/WordPress/gutenberg/pull/32424))
+-   Blocks:
+-   Avoid keeping the same client ID when transforming blocks. ([32453](https://github.com/WordPress/gutenberg/pull/32453))
+-   Allow themes to add inline styles for all blocks when using lazy styles loading. ([32275](https://github.com/WordPress/gutenberg/pull/32275))
+-   Components:
+-   RadioControl: Add `hideLabelFromVision` prop. ([32414](https://github.com/WordPress/gutenberg/pull/32414))
+-   DatePicker: Fix crash when navigating between months. ([31751](https://github.com/WordPress/gutenberg/pull/31751))
+-   Autocomplete: Prevent setting state for unmounted component. ([32654](https://github.com/WordPress/gutenberg/pull/32654))
+-   Editor:
+-   Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. ([32658](https://github.com/WordPress/gutenberg/pull/32658))
+-   Widget Editor:
+-   Don't delete a widget if it is moved to a different area. ([32608](https://github.com/WordPress/gutenberg/pull/32608))
+-   Fix button spacing in header. ([32585](https://github.com/WordPress/gutenberg/pull/32585))
+-   Decode HTML entities for name and description props. ([32503](https://github.com/WordPress/gutenberg/pull/32503))
+-   Fix dirty state after adding new block. ([32573](https://github.com/WordPress/gutenberg/pull/32573))
+-   Don't add undo levels when editing records on save. ([32572](https://github.com/WordPress/gutenberg/pull/32572))
+-   Save deleted and restored widgets. ([32534](https://github.com/WordPress/gutenberg/pull/32534))
+-   Don't show widgets in menu without theme support. ([32420](https://github.com/WordPress/gutenberg/pull/32420))
+-   Fix inspector opening on click outside widget area. ([32450](https://github.com/WordPress/gutenberg/pull/32450))
+-   Legacy Widget: Don't display "No preview" when widget has image tags. ([32605](https://github.com/WordPress/gutenberg/pull/32605))
+-   Post Editor:
+-   Prevent locking users in saving state when saving meta boxes fails. ([32485](https://github.com/WordPress/gutenberg/pull/32485))
+-   Edit Post: Add metaBoxUpdatesFailure action. ([32623](https://github.com/WordPress/gutenberg/pull/32623))
+-   Full Site Editing
+-   Only add skip-link for block themes & templates on the frontend. ([32451](https://github.com/WordPress/gutenberg/pull/32451))
+-   Storybook:
+-   Fix misc warnings. ([32401](https://github.com/WordPress/gutenberg/pull/32401))
+-   Data:
+-   useSelect: Silently error (for block zombie children). ([32088](https://github.com/WordPress/gutenberg/pull/32088))
 
 ### Performance
 
-- Block Editor: Remove `is-typing` root class. ([32567](https://github.com/WordPress/gutenberg/pull/32567))
-- Header Toolbar: UseCallback to avoid unnecessary rerenders. ([32406](https://github.com/WordPress/gutenberg/pull/32406))
+-   Block Editor: Remove `is-typing` root class. ([32567](https://github.com/WordPress/gutenberg/pull/32567))
+-   Header Toolbar: UseCallback to avoid unnecessary rerenders. ([32406](https://github.com/WordPress/gutenberg/pull/32406))
 
 ### Experiments
-- Component System:
-- Promote `Scrollable` component to a full export. ([32446](https://github.com/WordPress/gutenberg/pull/32446))
-- Promote `Surface` component to a full export. ([32439](https://github.com/WordPress/gutenberg/pull/32439))
-- Global Styles:
-- Allow presets to provide an empty set of values. ([32679](https://github.com/WordPress/gutenberg/pull/32679))
-- Allow theme authors hook into the preset classes generated by global styles. ([32627](https://github.com/WordPress/gutenberg/pull/32627))
-- Update `WP_Theme_JSON` API so presets are always keyed by origin. ([32622](https://github.com/WordPress/gutenberg/pull/32622))
-- Make syntax errors in `theme.json` visible to users. ([32404](https://github.com/WordPress/gutenberg/pull/32404))
-- Enqueue global styles in editor only once. ([32377](https://github.com/WordPress/gutenberg/pull/32377))
-- Enqueue core and theme colors by using separate structures per origin. ([32358](https://github.com/WordPress/gutenberg/pull/32358))
-- Do not migrate the old typography support if core already did it. ([32487](https://github.com/WordPress/gutenberg/pull/32487))
-- Generate classes and custom properties for global styles in the same way the post editor does. ([32766](https://github.com/WordPress/gutenberg/pull/32766))
-- Full Site Editing:
-- Template resolution for new posts and pages. ([32442](https://github.com/WordPress/gutenberg/pull/32442))
-- Monopolize navigation in Site Editor. ([31810](https://github.com/WordPress/gutenberg/pull/31810))
-- Prevent duplicate queries. ([32700](https://github.com/WordPress/gutenberg/pull/32700))
-- Split `theme.css` styles loading. ([31239](https://github.com/WordPress/gutenberg/pull/31239))
-- Navigation Editor:
-- Alternative fix: Set persisted menu id when no menus or missing menu. ([32313](https://github.com/WordPress/gutenberg/pull/32313))
+
+-   Component System:
+-   Promote `Scrollable` component to a full export. ([32446](https://github.com/WordPress/gutenberg/pull/32446))
+-   Promote `Surface` component to a full export. ([32439](https://github.com/WordPress/gutenberg/pull/32439))
+-   Global Styles:
+-   Allow presets to provide an empty set of values. ([32679](https://github.com/WordPress/gutenberg/pull/32679))
+-   Allow theme authors hook into the preset classes generated by global styles. ([32627](https://github.com/WordPress/gutenberg/pull/32627))
+-   Update `WP_Theme_JSON` API so presets are always keyed by origin. ([32622](https://github.com/WordPress/gutenberg/pull/32622))
+-   Make syntax errors in `theme.json` visible to users. ([32404](https://github.com/WordPress/gutenberg/pull/32404))
+-   Enqueue global styles in editor only once. ([32377](https://github.com/WordPress/gutenberg/pull/32377))
+-   Enqueue core and theme colors by using separate structures per origin. ([32358](https://github.com/WordPress/gutenberg/pull/32358))
+-   Do not migrate the old typography support if core already did it. ([32487](https://github.com/WordPress/gutenberg/pull/32487))
+-   Generate classes and custom properties for global styles in the same way the post editor does. ([32766](https://github.com/WordPress/gutenberg/pull/32766))
+-   Full Site Editing:
+-   Template resolution for new posts and pages. ([32442](https://github.com/WordPress/gutenberg/pull/32442))
+-   Monopolize navigation in Site Editor. ([31810](https://github.com/WordPress/gutenberg/pull/31810))
+-   Prevent duplicate queries. ([32700](https://github.com/WordPress/gutenberg/pull/32700))
+-   Split `theme.css` styles loading. ([31239](https://github.com/WordPress/gutenberg/pull/31239))
+-   Navigation Editor:
+-   Alternative fix: Set persisted menu id when no menus or missing menu. ([32313](https://github.com/WordPress/gutenberg/pull/32313))
 
 ### Documentation
 
-- Handbook:
-- Update references to `register_block_type_from_metadata`. ([32582](https://github.com/WordPress/gutenberg/pull/32582))
-- Fix duotone support documentation. ([32440](https://github.com/WordPress/gutenberg/pull/32440))
-- Detail the Gutenberg release post process. ([32429](https://github.com/WordPress/gutenberg/pull/32429))
-- Update Legacy Widget documentation with new info on `show_instance_in_rest` feature. ([32726](https://github.com/WordPress/gutenberg/pull/32726))
+-   Handbook:
+-   Update references to `register_block_type_from_metadata`. ([32582](https://github.com/WordPress/gutenberg/pull/32582))
+-   Fix duotone support documentation. ([32440](https://github.com/WordPress/gutenberg/pull/32440))
+-   Detail the Gutenberg release post process. ([32429](https://github.com/WordPress/gutenberg/pull/32429))
+-   Update Legacy Widget documentation with new info on `show_instance_in_rest` feature. ([32726](https://github.com/WordPress/gutenberg/pull/32726))
 
 ### Code Quality
 
-- Components:
-- Remove duplicated compose dependencies. ([32709](https://github.com/WordPress/gutenberg/pull/32709))
-- Sort entries in `packages/components/tsconfig.json`. ([32675](https://github.com/WordPress/gutenberg/pull/32675))
-- Update the popover component to rely on `useDialog`. ([27675](https://github.com/WordPress/gutenberg/pull/27675))
-- Card: Add types. ([32561](https://github.com/WordPress/gutenberg/pull/32561))
-- Card: Refactor subcomponents folder structure. ([32557](https://github.com/WordPress/gutenberg/pull/32557))
-- Compose:
-- Add types to `useDialog` and `useFocusOnMount`. ([32676](https://github.com/WordPress/gutenberg/pull/32676))
-- Add types to `withSafeTimeout`. ([32674](https://github.com/WordPress/gutenberg/pull/32674))
-- Type `withState` as any. ([32326](https://github.com/WordPress/gutenberg/pull/32326))
-- Block Library:
-- Page List: Avoid generic function names for page list block internal functions. ([32736](https://github.com/WordPress/gutenberg/pull/32736))
-- Latest Comments: Correct the format used for duplicate hook documentation. ([32563](https://github.com/WordPress/gutenberg/pull/32563))
-- Login/out: Update documentation for render_block_core_loginout function. ([32158](https://github.com/WordPress/gutenberg/pull/32158))
-- Block Editor: Remove unused select block function. ([32532](https://github.com/WordPress/gutenberg/pull/32532))
-- Core Data: Fix typos. ([32480](https://github.com/WordPress/gutenberg/pull/32480))
-- Editor: Fix different typos in inline comments, deprecation warnings and variable names. ([32474](https://github.com/WordPress/gutenberg/pull/32474))
-- Linting:
-- Edit Post: Fix no-string-literals warning. ([32518](https://github.com/WordPress/gutenberg/pull/32518))
-- Add ESLint import resolver. ([31792](https://github.com/WordPress/gutenberg/pull/31792))
-- Plugin:
-- Copy `wp_should_load_separate_core_block_assets` function from core. ([32611](https://github.com/WordPress/gutenberg/pull/32611))
-- Fix PHPCS Warnings. ([32513](https://github.com/WordPress/gutenberg/pull/32513))
+-   Components:
+-   Remove duplicated compose dependencies. ([32709](https://github.com/WordPress/gutenberg/pull/32709))
+-   Sort entries in `packages/components/tsconfig.json`. ([32675](https://github.com/WordPress/gutenberg/pull/32675))
+-   Update the popover component to rely on `useDialog`. ([27675](https://github.com/WordPress/gutenberg/pull/27675))
+-   Card: Add types. ([32561](https://github.com/WordPress/gutenberg/pull/32561))
+-   Card: Refactor subcomponents folder structure. ([32557](https://github.com/WordPress/gutenberg/pull/32557))
+-   Compose:
+-   Add types to `useDialog` and `useFocusOnMount`. ([32676](https://github.com/WordPress/gutenberg/pull/32676))
+-   Add types to `withSafeTimeout`. ([32674](https://github.com/WordPress/gutenberg/pull/32674))
+-   Type `withState` as any. ([32326](https://github.com/WordPress/gutenberg/pull/32326))
+-   Block Library:
+-   Page List: Avoid generic function names for page list block internal functions. ([32736](https://github.com/WordPress/gutenberg/pull/32736))
+-   Latest Comments: Correct the format used for duplicate hook documentation. ([32563](https://github.com/WordPress/gutenberg/pull/32563))
+-   Login/out: Update documentation for render_block_core_loginout function. ([32158](https://github.com/WordPress/gutenberg/pull/32158))
+-   Block Editor: Remove unused select block function. ([32532](https://github.com/WordPress/gutenberg/pull/32532))
+-   Core Data: Fix typos. ([32480](https://github.com/WordPress/gutenberg/pull/32480))
+-   Editor: Fix different typos in inline comments, deprecation warnings and variable names. ([32474](https://github.com/WordPress/gutenberg/pull/32474))
+-   Linting:
+-   Edit Post: Fix no-string-literals warning. ([32518](https://github.com/WordPress/gutenberg/pull/32518))
+-   Add ESLint import resolver. ([31792](https://github.com/WordPress/gutenberg/pull/31792))
+-   Plugin:
+-   Copy `wp_should_load_separate_core_block_assets` function from core. ([32611](https://github.com/WordPress/gutenberg/pull/32611))
+-   Fix PHPCS Warnings. ([32513](https://github.com/WordPress/gutenberg/pull/32513))
 
 ### Tools
 
-- Workflow:
-- Fix the add milestone github action. ([32691](https://github.com/WordPress/gutenberg/pull/32691))
-- Use a different cache key for the PR automation workflow. ([32588](https://github.com/WordPress/gutenberg/pull/32588))
-- Improvements to NPM package caching across workflows. ([32458](https://github.com/WordPress/gutenberg/pull/32458))
-- Limit when release artifacts are built on forks: Pt. 2. ([32494](https://github.com/WordPress/gutenberg/pull/32494))
-- Build:
-- Load .min.js files even in dev mode, output unminified assets only in prod. ([32621](https://github.com/WordPress/gutenberg/pull/32621))
-- Upgrade husky package to the latest version. ([32077](https://github.com/WordPress/gutenberg/pull/32077))
-- Generate minified .min.js and unminified .js files for GB js entry points when building. ([31732](https://github.com/WordPress/gutenberg/pull/31732))
-- Include Legacy Widget block files in the plugin build. ([32803](https://github.com/WordPress/gutenberg/pull/32803))
-- End to End Tests:
-- Update mentions tests to use `toMatchInlineSnapshot`. ([32727](https://github.com/WordPress/gutenberg/pull/32727))
-- Add more user auto-completer (mentions) coverage. ([32697](https://github.com/WordPress/gutenberg/pull/32697))
-- Ignore JQMIGRATE (jQuery migrate) deprecation warnings. ([32656](https://github.com/WordPress/gutenberg/pull/32656))
-- Linting:
-- Update linting and formatting for test plugin files. ([28033](https://github.com/WordPress/gutenberg/pull/28033))
-- Update Eslint JSDoc package, introducing JSDoc line alignment check. ([25300](https://github.com/WordPress/gutenberg/pull/25300))
-- wp-env: Bump TT1 Blocks to v0.4.7. ([32661](https://github.com/WordPress/gutenberg/pull/32661))
-
-
-
-
+-   Workflow:
+-   Fix the add milestone github action. ([32691](https://github.com/WordPress/gutenberg/pull/32691))
+-   Use a different cache key for the PR automation workflow. ([32588](https://github.com/WordPress/gutenberg/pull/32588))
+-   Improvements to NPM package caching across workflows. ([32458](https://github.com/WordPress/gutenberg/pull/32458))
+-   Limit when release artifacts are built on forks: Pt. 2. ([32494](https://github.com/WordPress/gutenberg/pull/32494))
+-   Build:
+-   Load .min.js files even in dev mode, output unminified assets only in prod. ([32621](https://github.com/WordPress/gutenberg/pull/32621))
+-   Upgrade husky package to the latest version. ([32077](https://github.com/WordPress/gutenberg/pull/32077))
+-   Generate minified .min.js and unminified .js files for GB js entry points when building. ([31732](https://github.com/WordPress/gutenberg/pull/31732))
+-   Include Legacy Widget block files in the plugin build. ([32803](https://github.com/WordPress/gutenberg/pull/32803))
+-   End to End Tests:
+-   Update mentions tests to use `toMatchInlineSnapshot`. ([32727](https://github.com/WordPress/gutenberg/pull/32727))
+-   Add more user auto-completer (mentions) coverage. ([32697](https://github.com/WordPress/gutenberg/pull/32697))
+-   Ignore JQMIGRATE (jQuery migrate) deprecation warnings. ([32656](https://github.com/WordPress/gutenberg/pull/32656))
+-   Linting:
+-   Update linting and formatting for test plugin files. ([28033](https://github.com/WordPress/gutenberg/pull/28033))
+-   Update Eslint JSDoc package, introducing JSDoc line alignment check. ([25300](https://github.com/WordPress/gutenberg/pull/25300))
+-   wp-env: Bump TT1 Blocks to v0.4.7. ([32661](https://github.com/WordPress/gutenberg/pull/32661))
 
 = 10.8.2 =
 
-### Bug fixes
+## Changelog
 
-- Revert removal of lodash's kebabCase function https://github.com/WordPress/gutenberg/pull/32742
+### Bug fixes
 
+-   Revert removal of lodash's kebabCase function https://github.com/WordPress/gutenberg/pull/32742
 
 = 10.8.1 =
 
-
+## Changelog
 
 ### Bug Fixes
 
-- Fix Post Content block regression. ([32693](https://github.com/WordPress/gutenberg/pull/32693))
-- Fix Safari 13 issue. ([32581](https://github.com/WordPress/gutenberg/pull/32581))
+-   Fix Post Content block regression. ([32693](https://github.com/WordPress/gutenberg/pull/32693))
+-   Fix Safari 13 issue. ([32581](https://github.com/WordPress/gutenberg/pull/32581))
 
 ### Performance
 
-- Site editor: Add typing performance test. ([32553](https://github.com/WordPress/gutenberg/pull/32553))
+-   Site editor: Add typing performance test. ([32553](https://github.com/WordPress/gutenberg/pull/32553))
 
 ### Tools
 
-- Fix Post Title end-to-end test. ([32686](https://github.com/WordPress/gutenberg/pull/32686))
-
-
-
+-   Fix Post Title end-to-end test. ([32686](https://github.com/WordPress/gutenberg/pull/32686))
 
 = 10.8.0 =
 
+## Changelog
 
 ### Enhancements
 
-- Block Editor:
-  - Update Modal styling. ([31639](https://github.com/WordPress/gutenberg/pull/31639))
-- Block Library:
-  - Archives Block: Show the label for archives block dropdown. ([30527](https://github.com/WordPress/gutenberg/pull/30527))
-  - Audio Block: Add an example preview. ([32333](https://github.com/WordPress/gutenberg/pull/32333))
-  - File Block: Add an example preview. ([32350](https://github.com/WordPress/gutenberg/pull/32350))
-  - Heading Block: Add support for font-weight. ([27639](https://github.com/WordPress/gutenberg/pull/27639))
-  - List Block: Add font family to the list block. ([27510](https://github.com/WordPress/gutenberg/pull/27510))
-  - Page list block: Add active page classes. ([32134](https://github.com/WordPress/gutenberg/pull/32134))
-  - Site Logo: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
-- Components:
-  - BoxControl: Add allowReset option. ([32345](https://github.com/WordPress/gutenberg/pull/32345))
-General Interface:
-  - Remove opacity animation on canvas. ([32266](https://github.com/WordPress/gutenberg/pull/32266))
-- Design tools:
-  - Add Letter-spacing and enable this for site title and site tagline. ([31118](https://github.com/WordPress/gutenberg/pull/31118))
-  - Block Supports: Allow skipping spacing support serialization. ([31973](https://github.com/WordPress/gutenberg/pull/31973))
-- Reusable Block:
-  - Add Convert to Regular Blocks button to ellipsis Dropdown. ([32310](https://github.com/WordPress/gutenberg/pull/32310))
-- REST API:
-  - Improve parsing and retrieve additional data in REST url-details endpoint. ([31763](https://github.com/WordPress/gutenberg/pull/31763))
-- Template Editing Mode:
-  - Don't display snackbar with the Welcome Guide. ([32076](https://github.com/WordPress/gutenberg/pull/32076))
-  - Update the appearance of the template details popover. ([32042](https://github.com/WordPress/gutenberg/pull/32042))
-  - Update the title area in the template editor. ([32037](https://github.com/WordPress/gutenberg/pull/32037))
-- Block-based Widgets:
-  - Customizer:
-    - Add preferences menu group label to widgets and customize widget editor. ([32259](https://github.com/WordPress/gutenberg/pull/32259))
-    - Display wide widgets as popovers in Customizer. ([31736](https://github.com/WordPress/gutenberg/pull/31736))
-  - Editor:
-    - Link to widgets.php instead of themes.php?page=gutenberg-widgets. ([32299](https://github.com/WordPress/gutenberg/pull/32299))
-
-### Bug Fixes
-
-- Block Library:
-  - Image Block: Fix image border radius. ([32393](https://github.com/WordPress/gutenberg/pull/32393))
-  - List Block: Fix `theme.json` styles for the `core/list` block. ([32343](https://github.com/WordPress/gutenberg/pull/32343))
-  - Latest Posts: Limit latest posts featured image width to 100%. ([32245](https://github.com/WordPress/gutenberg/pull/32245))
-  - Legacy Widget Block:
-    - Fix legacy widget block preview iframe. ([32300](https://github.com/WordPress/gutenberg/pull/32300))
-    - Fix legacy widget previews. ([32260](https://github.com/WordPress/gutenberg/pull/32260))
-  - Search block: Fix vertical alignment of the search button text. ([32340](https://github.com/WordPress/gutenberg/pull/32340))
-- Block Editor:
-  - Block Variation Transforms: Make focus style valid CSS. ([32305](https://github.com/WordPress/gutenberg/pull/32305))
-  - Fixed Random Collapse of Colors Setting Section. ([32388](https://github.com/WordPress/gutenberg/pull/32388))
-  - Block Toolbar:
-    - Always close the options menu after toggling the sidebar. ([31921](https://github.com/WordPress/gutenberg/pull/31921))
-    - Fix toolbar alignment in widget block editor. ([31991](https://github.com/WordPress/gutenberg/pull/31991))
-  - Iframe: Fix embed dimensions with missing wp-embed-responsive class. ([32057](https://github.com/WordPress/gutenberg/pull/32057))
-  - Patterns: Fix allowed patterns check. ([32376](https://github.com/WordPress/gutenberg/pull/32376))
-- Block-Based Widgets:
-  - Editor:
-    - Fix error when saving empty Legacy Widget block. ([32359](https://github.com/WordPress/gutenberg/pull/32359))
-    - Assume light theme when editor canvas background color isn't set. ([32477](https://github.com/WordPress/gutenberg/pull/32477))
-  - Customizer:
-    - Center the welcome image in the narrow viewport of widgets customizer. ([32264](https://github.com/WordPress/gutenberg/pull/32264))
-    - Fix aspect ratio of welcome image. ([32302](https://github.com/WordPress/gutenberg/pull/32302))
-    - Fix deselecting block when inspector is opened. ([32361](https://github.com/WordPress/gutenberg/pull/32361))
-    - Fix escape key events in customizer closing the editor. ([32175](https://github.com/WordPress/gutenberg/pull/32175))
-    - Fix some smaller styling issues and bugs in Widgets Customizer. ([32072](https://github.com/WordPress/gutenberg/pull/32072))
-    - Fix creating and replacing legacy widgets in customizer. ([32005](https://github.com/WordPress/gutenberg/pull/32005))
-- Components:
-  - SuggestionsList: Try to use a unique "key". ([32344](https://github.com/WordPress/gutenberg/pull/32344))
-  - Update Dropdown’s close-on-blur logic to work inside dialogs. ([32133](https://github.com/WordPress/gutenberg/pull/32133))
-- Editor:
-  - Allow non-latin characters in slugs. ([32232](https://github.com/WordPress/gutenberg/pull/32232))
-  - Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. ([32341](https://github.com/WordPress/gutenberg/pull/32341))
-- General Interface: Fix overlap of Notices and block toolbar. ([32238](https://github.com/WordPress/gutenberg/pull/32238))
-- Template Editing Mode: Remove metaboxes from template mode. ([32315](https://github.com/WordPress/gutenberg/pull/32315))
-- Fix the layout definition in the template mode. ([32425](https://github.com/WordPress/gutenberg/pull/32425))
+-   Block Editor:
+    -   Update Modal styling. ([31639](https://github.com/WordPress/gutenberg/pull/31639))
+-   Block Library:
+    -   Archives Block: Show the label for archives block dropdown. ([30527](https://github.com/WordPress/gutenberg/pull/30527))
+    -   Audio Block: Add an example preview. ([32333](https://github.com/WordPress/gutenberg/pull/32333))
+    -   File Block: Add an example preview. ([32350](https://github.com/WordPress/gutenberg/pull/32350))
+    -   Heading Block: Add support for font-weight. ([27639](https://github.com/WordPress/gutenberg/pull/27639))
+    -   List Block: Add font family to the list block. ([27510](https://github.com/WordPress/gutenberg/pull/27510))
+    -   Page list block: Add active page classes. ([32134](https://github.com/WordPress/gutenberg/pull/32134))
+    -   Site Logo: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
+-   Components:
+    -   BoxControl: Add allowReset option. ([32345](https://github.com/WordPress/gutenberg/pull/32345))
+        General Interface:
+    -   Remove opacity animation on canvas. ([32266](https://github.com/WordPress/gutenberg/pull/32266))
+-   Design tools:
+    -   Add Letter-spacing and enable this for site title and site tagline. ([31118](https://github.com/WordPress/gutenberg/pull/31118))
+    -   Block Supports: Allow skipping spacing support serialization. ([31973](https://github.com/WordPress/gutenberg/pull/31973))
+-   Reusable Block:
+    -   Add Convert to Regular Blocks button to ellipsis Dropdown. ([32310](https://github.com/WordPress/gutenberg/pull/32310))
+-   REST API:
+    -   Improve parsing and retrieve additional data in REST url-details endpoint. ([31763](https://github.com/WordPress/gutenberg/pull/31763))
+-   Template Editing Mode:
+    -   Don't display snackbar with the Welcome Guide. ([32076](https://github.com/WordPress/gutenberg/pull/32076))
+    -   Update the appearance of the template details popover. ([32042](https://github.com/WordPress/gutenberg/pull/32042))
+    -   Update the title area in the template editor. ([32037](https://github.com/WordPress/gutenberg/pull/32037))
+-   Block-based Widgets:
+    -   Customizer:
+        -   Add preferences menu group label to widgets and customize widget editor. ([32259](https://github.com/WordPress/gutenberg/pull/32259))
+        -   Display wide widgets as popovers in Customizer. ([31736](https://github.com/WordPress/gutenberg/pull/31736))
+    -   Editor:
+        -   Link to widgets.php instead of themes.php?page=gutenberg-widgets. ([32299](https://github.com/WordPress/gutenberg/pull/32299))
+
+### Bug Fixes
+
+-   Block Library:
+    -   Image Block: Fix image border radius. ([32393](https://github.com/WordPress/gutenberg/pull/32393))
+    -   List Block: Fix `theme.json` styles for the `core/list` block. ([32343](https://github.com/WordPress/gutenberg/pull/32343))
+    -   Latest Posts: Limit latest posts featured image width to 100%. ([32245](https://github.com/WordPress/gutenberg/pull/32245))
+    -   Legacy Widget Block:
+        -   Fix legacy widget block preview iframe. ([32300](https://github.com/WordPress/gutenberg/pull/32300))
+        -   Fix legacy widget previews. ([32260](https://github.com/WordPress/gutenberg/pull/32260))
+    -   Search block: Fix vertical alignment of the search button text. ([32340](https://github.com/WordPress/gutenberg/pull/32340))
+-   Block Editor:
+    -   Block Variation Transforms: Make focus style valid CSS. ([32305](https://github.com/WordPress/gutenberg/pull/32305))
+    -   Fixed Random Collapse of Colors Setting Section. ([32388](https://github.com/WordPress/gutenberg/pull/32388))
+    -   Block Toolbar:
+        -   Always close the options menu after toggling the sidebar. ([31921](https://github.com/WordPress/gutenberg/pull/31921))
+        -   Fix toolbar alignment in widget block editor. ([31991](https://github.com/WordPress/gutenberg/pull/31991))
+    -   Iframe: Fix embed dimensions with missing wp-embed-responsive class. ([32057](https://github.com/WordPress/gutenberg/pull/32057))
+    -   Patterns: Fix allowed patterns check. ([32376](https://github.com/WordPress/gutenberg/pull/32376))
+-   Block-Based Widgets:
+    -   Editor:
+        -   Fix error when saving empty Legacy Widget block. ([32359](https://github.com/WordPress/gutenberg/pull/32359))
+        -   Assume light theme when editor canvas background color isn't set. ([32477](https://github.com/WordPress/gutenberg/pull/32477))
+    -   Customizer:
+        -   Center the welcome image in the narrow viewport of widgets customizer. ([32264](https://github.com/WordPress/gutenberg/pull/32264))
+        -   Fix aspect ratio of welcome image. ([32302](https://github.com/WordPress/gutenberg/pull/32302))
+        -   Fix deselecting block when inspector is opened. ([32361](https://github.com/WordPress/gutenberg/pull/32361))
+        -   Fix escape key events in customizer closing the editor. ([32175](https://github.com/WordPress/gutenberg/pull/32175))
+        -   Fix some smaller styling issues and bugs in Widgets Customizer. ([32072](https://github.com/WordPress/gutenberg/pull/32072))
+        -   Fix creating and replacing legacy widgets in customizer. ([32005](https://github.com/WordPress/gutenberg/pull/32005))
+-   Components:
+    -   SuggestionsList: Try to use a unique "key". ([32344](https://github.com/WordPress/gutenberg/pull/32344))
+    -   Update Dropdown’s close-on-blur logic to work inside dialogs. ([32133](https://github.com/WordPress/gutenberg/pull/32133))
+-   Editor:
+    -   Allow non-latin characters in slugs. ([32232](https://github.com/WordPress/gutenberg/pull/32232))
+    -   Post Preview Button: Prevent saving the post before previewing in locked/read-only mode. ([32341](https://github.com/WordPress/gutenberg/pull/32341))
+-   General Interface: Fix overlap of Notices and block toolbar. ([32238](https://github.com/WordPress/gutenberg/pull/32238))
+-   Template Editing Mode: Remove metaboxes from template mode. ([32315](https://github.com/WordPress/gutenberg/pull/32315))
+-   Fix the layout definition in the template mode. ([32425](https://github.com/WordPress/gutenberg/pull/32425))
 
 ### Performance
 
-- Buttons: Move options to constants to avoid unneeded renders. ([32356](https://github.com/WordPress/gutenberg/pull/32356))
-- Experimental Layout: Pass the same object when no data changes. ([32380](https://github.com/WordPress/gutenberg/pull/32380))
-- Navigation: Avoid rerendering when the placeholder does not change. ([32357](https://github.com/WordPress/gutenberg/pull/32357))
-- Update Welcome Guides to use external image URLs. ([32026](https://github.com/WordPress/gutenberg/pull/32026))
+-   Buttons: Move options to constants to avoid unneeded renders. ([32356](https://github.com/WordPress/gutenberg/pull/32356))
+-   Experimental Layout: Pass the same object when no data changes. ([32380](https://github.com/WordPress/gutenberg/pull/32380))
+-   Navigation: Avoid rerendering when the placeholder does not change. ([32357](https://github.com/WordPress/gutenberg/pull/32357))
+-   Update Welcome Guides to use external image URLs. ([32026](https://github.com/WordPress/gutenberg/pull/32026))
 
 ### Experiments
 
-- Block Editor:
-  - Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. ([32063](https://github.com/WordPress/gutenberg/pull/32063))
-- Component System:
-  - Add missing Divider, Heading type reference in tsconfig. ([32104](https://github.com/WordPress/gutenberg/pull/32104))
-  - Adds a new ZStack component. ([31613](https://github.com/WordPress/gutenberg/pull/31613))
-  - Adds new ItemGroup and Item components. ([30097](https://github.com/WordPress/gutenberg/pull/30097))
-  - Add new `BaseField` Component. ([32250](https://github.com/WordPress/gutenberg/pull/32250))
-  - Fix Shortcut polymorphism. ([31555](https://github.com/WordPress/gutenberg/pull/31555))
-  - Promotes the Elevation component to a full export. ([31614](https://github.com/WordPress/gutenberg/pull/31614))
-- Global Styles:
-  - Bugfix: Generate classes from preset slugs in the same way (server & client). ([32352](https://github.com/WordPress/gutenberg/pull/32352))
-  - Fix Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
-  - Fix incorrect useCustomUnits import. ([32248](https://github.com/WordPress/gutenberg/pull/32248))
-  - Group typographic block supports under a `typography` key. ([32252](https://github.com/WordPress/gutenberg/pull/32252))
-  - Letter spacing should also respect skip serialization flag. ([32459](https://github.com/WordPress/gutenberg/pull/32459))
-  - Skip typography serialization. ([32444](https://github.com/WordPress/gutenberg/pull/32444))
-- Full Site Editing:
-  - Align block hover and select styles across list view, site editor, select mode. ([31277](https://github.com/WordPress/gutenberg/pull/31277))
-  - Alignment styles: Centre blocks using grid not margins. ([32231](https://github.com/WordPress/gutenberg/pull/32231))
-  - Avoid duplicate skip-links in WP 5.8+. ([32346](https://github.com/WordPress/gutenberg/pull/32346))
-  - Remove now-obsolete get_template_hierarchy(). ([32116](https://github.com/WordPress/gutenberg/pull/32116))
-  - Templates: Remove now-obsolete `gutenberg_get_template_paths()`. ([32066](https://github.com/WordPress/gutenberg/pull/32066))
-- Navigation:
-  - Block:
-    - Fix css bleed from navigation. ([32384](https://github.com/WordPress/gutenberg/pull/32384))
-    - Fix collapsing regression of Navigation Menu. ([32081](https://github.com/WordPress/gutenberg/pull/32081))
-    - Lock the document from scrolling when the modal is open. ([32269](https://github.com/WordPress/gutenberg/pull/32269))
-    - Refactor Navigation block paddings/margins to inherit global styles. ([31878](https://github.com/WordPress/gutenberg/pull/31878))
-  - Editor:
-    - Allow block attributes passed to block renderer by way of wp_nav_menu. ([31911](https://github.com/WordPress/gutenberg/pull/31911))
-    - Hide sidebar when a menu isn't selected. ([32090](https://github.com/WordPress/gutenberg/pull/32090))
-    - Fix the visible widget area toolbar. ([32262](https://github.com/WordPress/gutenberg/pull/32262))
-    - Fix block toolbar position after scroll. ([32212](https://github.com/WordPress/gutenberg/pull/32212))
-    - Move modal state to ManageLocations component. ([32078](https://github.com/WordPress/gutenberg/pull/32078))
-- Site Editor:
-  - Fix broken template part converter modal styles. ([32097](https://github.com/WordPress/gutenberg/pull/32097))
-  - Remove title attribute from NavigationItem inside the site-editor. ([30744](https://github.com/WordPress/gutenberg/pull/30744))
+-   Block Editor:
+    -   Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. ([32063](https://github.com/WordPress/gutenberg/pull/32063))
+-   Component System:
+    -   Add missing Divider, Heading type reference in tsconfig. ([32104](https://github.com/WordPress/gutenberg/pull/32104))
+    -   Adds a new ZStack component. ([31613](https://github.com/WordPress/gutenberg/pull/31613))
+    -   Adds new ItemGroup and Item components. ([30097](https://github.com/WordPress/gutenberg/pull/30097))
+    -   Add new `BaseField` Component. ([32250](https://github.com/WordPress/gutenberg/pull/32250))
+    -   Fix Shortcut polymorphism. ([31555](https://github.com/WordPress/gutenberg/pull/31555))
+    -   Promotes the Elevation component to a full export. ([31614](https://github.com/WordPress/gutenberg/pull/31614))
+-   Global Styles:
+    -   Bugfix: Generate classes from preset slugs in the same way (server & client). ([32352](https://github.com/WordPress/gutenberg/pull/32352))
+    -   Fix Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
+    -   Fix incorrect useCustomUnits import. ([32248](https://github.com/WordPress/gutenberg/pull/32248))
+    -   Group typographic block supports under a `typography` key. ([32252](https://github.com/WordPress/gutenberg/pull/32252))
+    -   Letter spacing should also respect skip serialization flag. ([32459](https://github.com/WordPress/gutenberg/pull/32459))
+    -   Skip typography serialization. ([32444](https://github.com/WordPress/gutenberg/pull/32444))
+-   Full Site Editing:
+    -   Align block hover and select styles across list view, site editor, select mode. ([31277](https://github.com/WordPress/gutenberg/pull/31277))
+    -   Alignment styles: Centre blocks using grid not margins. ([32231](https://github.com/WordPress/gutenberg/pull/32231))
+    -   Avoid duplicate skip-links in WP 5.8+. ([32346](https://github.com/WordPress/gutenberg/pull/32346))
+    -   Remove now-obsolete get_template_hierarchy(). ([32116](https://github.com/WordPress/gutenberg/pull/32116))
+    -   Templates: Remove now-obsolete `gutenberg_get_template_paths()`. ([32066](https://github.com/WordPress/gutenberg/pull/32066))
+-   Navigation:
+    -   Block:
+        -   Fix css bleed from navigation. ([32384](https://github.com/WordPress/gutenberg/pull/32384))
+        -   Fix collapsing regression of Navigation Menu. ([32081](https://github.com/WordPress/gutenberg/pull/32081))
+        -   Lock the document from scrolling when the modal is open. ([32269](https://github.com/WordPress/gutenberg/pull/32269))
+        -   Refactor Navigation block paddings/margins to inherit global styles. ([31878](https://github.com/WordPress/gutenberg/pull/31878))
+    -   Editor:
+        -   Allow block attributes passed to block renderer by way of wp_nav_menu. ([31911](https://github.com/WordPress/gutenberg/pull/31911))
+        -   Hide sidebar when a menu isn't selected. ([32090](https://github.com/WordPress/gutenberg/pull/32090))
+        -   Fix the visible widget area toolbar. ([32262](https://github.com/WordPress/gutenberg/pull/32262))
+        -   Fix block toolbar position after scroll. ([32212](https://github.com/WordPress/gutenberg/pull/32212))
+        -   Move modal state to ManageLocations component. ([32078](https://github.com/WordPress/gutenberg/pull/32078))
+-   Site Editor:
+    -   Fix broken template part converter modal styles. ([32097](https://github.com/WordPress/gutenberg/pull/32097))
+    -   Remove title attribute from NavigationItem inside the site-editor. ([30744](https://github.com/WordPress/gutenberg/pull/30744))
 
 ### Documentation
 
-- Handbook:
-  - Fix broken contributors readme files. ([32272](https://github.com/WordPress/gutenberg/pull/32272))
-  - Fix misspelling in the Widgets Block Editor section. ([32242](https://github.com/WordPress/gutenberg/pull/32242))
-  - Mark all experimental components in the handbook. ([32147](https://github.com/WordPress/gutenberg/pull/32147))
-  - Update the create a block theme tutorial. ([31269](https://github.com/WordPress/gutenberg/pull/31269))
-  - Update iOS Simulator device command in React Native documentation. ([32383](https://github.com/WordPress/gutenberg/pull/32383))
-- Packages:
-  - Navigation Editor: Augment and improve Nav Editor (and block) documentation. ([31891](https://github.com/WordPress/gutenberg/pull/31891))
-  - Components: Fixed documentation for `units` attribute in Unit Control. ([31901](https://github.com/WordPress/gutenberg/pull/31901))
+-   Handbook:
+    -   Fix broken contributors readme files. ([32272](https://github.com/WordPress/gutenberg/pull/32272))
+    -   Fix misspelling in the Widgets Block Editor section. ([32242](https://github.com/WordPress/gutenberg/pull/32242))
+    -   Mark all experimental components in the handbook. ([32147](https://github.com/WordPress/gutenberg/pull/32147))
+    -   Update the create a block theme tutorial. ([31269](https://github.com/WordPress/gutenberg/pull/31269))
+    -   Update iOS Simulator device command in React Native documentation. ([32383](https://github.com/WordPress/gutenberg/pull/32383))
+-   Packages:
+    -   Navigation Editor: Augment and improve Nav Editor (and block) documentation. ([31891](https://github.com/WordPress/gutenberg/pull/31891))
+    -   Components: Fixed documentation for `units` attribute in Unit Control. ([31901](https://github.com/WordPress/gutenberg/pull/31901))
 
 ### Code Quality
 
-- Block Editor:
-  - Rich text:
-    - Contextual default shortcut removal. ([32327](https://github.com/WordPress/gutenberg/pull/32327))
-    - Remove inline display warning. ([32013](https://github.com/WordPress/gutenberg/pull/32013))
-  - Colors: Remove \_\_experimentalUseColors hook. ([31438](https://github.com/WordPress/gutenberg/pull/31438))
-  - Remove usages of `withState` from edit-post and editor. ([32349](https://github.com/WordPress/gutenberg/pull/32349))
-- Block Library:
-  - List View: Simplify the BlockNavigation component. ([31290](https://github.com/WordPress/gutenberg/pull/31290))
-  - Navigation: Simplify html selector in nav burger menu. ([32303](https://github.com/WordPress/gutenberg/pull/32303))
-  - Remove "class=" wrapper to already wrapped attributes. ([29214](https://github.com/WordPress/gutenberg/pull/29214))
-  - Query Block: Remove query context leftovers. ([32093](https://github.com/WordPress/gutenberg/pull/32093))
-- Blocks Package: Make getBlockSupport support any `lodash` path.. ([32322](https://github.com/WordPress/gutenberg/pull/32322))
-- Block Supports: Avoid a PHP Notice when `render_block()` is called without attributes. ([32135](https://github.com/WordPress/gutenberg/pull/32135))
-- Components:
-  - Button: Deprecate `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in favour of `variant` prop. ([31713](https://github.com/WordPress/gutenberg/pull/31713))
-  - Combobox: Remove duplicated ComboboxControl component. ([32397](https://github.com/WordPress/gutenberg/pull/32397))
-  - Dashicons: Add types to Icon . ([32219](https://github.com/WordPress/gutenberg/pull/32219))
-  - Disabled: Add types to Disabled components. ([32105](https://github.com/WordPress/gutenberg/pull/32105))
-  - Remove all `withNext` wrappers. ([32205](https://github.com/WordPress/gutenberg/pull/32205))
-  - Rename `ViewOwnProps` to `PolymorphicComponentProps`. ([32053](https://github.com/WordPress/gutenberg/pull/32053))
-  - Require explicit `children` prop for all components. ([31817](https://github.com/WordPress/gutenberg/pull/31817))
-  - UI Context: Delete unused types from `context`. ([32254](https://github.com/WordPress/gutenberg/pull/32254))
-  - UI Popover: Remove unused `content` property from types definitions. ([32049](https://github.com/WordPress/gutenberg/pull/32049))
-- Compose:
-  - Add types to useRefEffect and clipboard hooks. ([31603](https://github.com/WordPress/gutenberg/pull/31603))
-  - Add Types to `withGlobalEvents` as any. ([32290](https://github.com/WordPress/gutenberg/pull/32290))
-  - Add types to `useWarnOnChange`. ([32288](https://github.com/WordPress/gutenberg/pull/32288))
-  - Add types to `useViewportMatch`. ([32287](https://github.com/WordPress/gutenberg/pull/32287))
-  - Add types to `useDropZone`. ([32286](https://github.com/WordPress/gutenberg/pull/32286))
-  - Add types to `useDragging`. ([32285](https://github.com/WordPress/gutenberg/pull/32285))
-  - Add types to `useThrottle` and typecheck `useFocusOutside`. ([32170](https://github.com/WordPress/gutenberg/pull/32170))
-  - Add types to `useKeyboardShortcut`. ([32168](https://github.com/WordPress/gutenberg/pull/32168))
-  - Add types to `useResizeObserver` and type checking to `useIsomorphicLayoutEffect`. ([32111](https://github.com/WordPress/gutenberg/pull/32111))
-  - Add types to `useFocusReturn`. ([31949](https://github.com/WordPress/gutenberg/pull/31949))
-  - Add types to `usePrevious`. ([31944](https://github.com/WordPress/gutenberg/pull/31944))
-  - Add types to useReducedMotion and useMediaQuery. ([31941](https://github.com/WordPress/gutenberg/pull/31941))
-  - Add types to useMergeRefs. ([31939](https://github.com/WordPress/gutenberg/pull/31939))
-  - Add test to `useMergeRefs` for disabling refs + better documentation. ([32044](https://github.com/WordPress/gutenberg/pull/32044))
-  - Add types to `useDebounce`. ([32015](https://github.com/WordPress/gutenberg/pull/32015))
-  - Deprecate `withState` in favor of `useState`. ([32368](https://github.com/WordPress/gutenberg/pull/32368))
-  - Simplify `compose` function documentation and point to lodash documentation for it. ([32324](https://github.com/WordPress/gutenberg/pull/32324))
-- Global Styles:
-  - Avoid enqueuing global styles twice when running on WordPress 5.8. ([32372](https://github.com/WordPress/gutenberg/pull/32372))
-- Keyboard Shortcuts:
-  - Multi select: select all: Restore ref callback. ([32318](https://github.com/WordPress/gutenberg/pull/32318))
-- Linting:
-  - Fix eslint warnings in the core-data package. ([32198](https://github.com/WordPress/gutenberg/pull/32198))
-  - Fix eslint warnings in the edit-navigation package. ([32196](https://github.com/WordPress/gutenberg/pull/32196))
-  - Fix eslint warnings in the edit-post package. ([32195](https://github.com/WordPress/gutenberg/pull/32195))
-  - Fix eslint warnings in the edit-site package. ([32156](https://github.com/WordPress/gutenberg/pull/32156))
-  - Fix eslint warnings in the edit-widgets package. ([32155](https://github.com/WordPress/gutenberg/pull/32155))
-  - Fix eslint warnings in the editor package. ([32153](https://github.com/WordPress/gutenberg/pull/32153))
-  - Fix eslint warnings in the nux package. ([32145](https://github.com/WordPress/gutenberg/pull/32145))
-  - Fix eslint warnings in the rich-text package. ([32142](https://github.com/WordPress/gutenberg/pull/32142))
-  - Fix eslint warnings in the reusable-blocks package. ([32141](https://github.com/WordPress/gutenberg/pull/32141))
-- Navigation Editor:
-  - Fix React warning. ([32165](https://github.com/WordPress/gutenberg/pull/32165))
-
-### Tools
-
-- Babel presets: Prefix build with node command for Windows environments. (#32258). ([32329](https://github.com/WordPress/gutenberg/pull/32329))
-- Workflow:
-  - Limit when workflows run on forks. ([32114](https://github.com/WordPress/gutenberg/pull/32114))
-  - Only calculate the compressed size on pull requests when necessary. ([32161](https://github.com/WordPress/gutenberg/pull/32161))
-  - Performance Tests Workflow:
-    - Polish Bash script. ([32284](https://github.com/WordPress/gutenberg/pull/32284))
-    - Run suite atop latest stable major WordPress version. ([32244](https://github.com/WordPress/gutenberg/pull/32244))
-    - Use latest WP branch for release tests. ([32277](https://github.com/WordPress/gutenberg/pull/32277))
-- End to End Tests:
-  - Fix inserting cover block intermittent failure. ([32014](https://github.com/WordPress/gutenberg/pull/32014))
-  - Navigation Editor:
-    - Fix failing end-to-end tests. ([32043](https://github.com/WordPress/gutenberg/pull/32043))
-    - Skip "Change detection" tests. ([32151](https://github.com/WordPress/gutenberg/pull/32151))
-  - Move the Query and PostTitle end-to-end tests out of the experimental directory. ([31691](https://github.com/WordPress/gutenberg/pull/31691))
-  - Multi select: Add end-to-end test for gruadual select all. ([32304](https://github.com/WordPress/gutenberg/pull/32304))
-  - Remove redundant widget API endpoint tests. ([32298](https://github.com/WordPress/gutenberg/pull/32298))
-  - Skip tests that are failing with the latest WordPress core. ([32228](https://github.com/WordPress/gutenberg/pull/32228))
-- Eslint: Ignore some eslint rules in react-native folders. ([32143](https://github.com/WordPress/gutenberg/pull/32143))
-
-
-
-
-
+-   Block Editor:
+    -   Rich text:
+        -   Contextual default shortcut removal. ([32327](https://github.com/WordPress/gutenberg/pull/32327))
+        -   Remove inline display warning. ([32013](https://github.com/WordPress/gutenberg/pull/32013))
+    -   Colors: Remove \_\_experimentalUseColors hook. ([31438](https://github.com/WordPress/gutenberg/pull/31438))
+    -   Remove usages of `withState` from edit-post and editor. ([32349](https://github.com/WordPress/gutenberg/pull/32349))
+-   Block Library:
+    -   List View: Simplify the BlockNavigation component. ([31290](https://github.com/WordPress/gutenberg/pull/31290))
+    -   Navigation: Simplify html selector in nav burger menu. ([32303](https://github.com/WordPress/gutenberg/pull/32303))
+    -   Remove "class=" wrapper to already wrapped attributes. ([29214](https://github.com/WordPress/gutenberg/pull/29214))
+    -   Query Block: Remove query context leftovers. ([32093](https://github.com/WordPress/gutenberg/pull/32093))
+-   Blocks Package: Make getBlockSupport support any `lodash` path.. ([32322](https://github.com/WordPress/gutenberg/pull/32322))
+-   Block Supports: Avoid a PHP Notice when `render_block()` is called without attributes. ([32135](https://github.com/WordPress/gutenberg/pull/32135))
+-   Components:
+    -   Button: Deprecate `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in favour of `variant` prop. ([31713](https://github.com/WordPress/gutenberg/pull/31713))
+    -   Combobox: Remove duplicated ComboboxControl component. ([32397](https://github.com/WordPress/gutenberg/pull/32397))
+    -   Dashicons: Add types to Icon . ([32219](https://github.com/WordPress/gutenberg/pull/32219))
+    -   Disabled: Add types to Disabled components. ([32105](https://github.com/WordPress/gutenberg/pull/32105))
+    -   Remove all `withNext` wrappers. ([32205](https://github.com/WordPress/gutenberg/pull/32205))
+    -   Rename `ViewOwnProps` to `PolymorphicComponentProps`. ([32053](https://github.com/WordPress/gutenberg/pull/32053))
+    -   Require explicit `children` prop for all components. ([31817](https://github.com/WordPress/gutenberg/pull/31817))
+    -   UI Context: Delete unused types from `context`. ([32254](https://github.com/WordPress/gutenberg/pull/32254))
+    -   UI Popover: Remove unused `content` property from types definitions. ([32049](https://github.com/WordPress/gutenberg/pull/32049))
+-   Compose:
+    -   Add types to useRefEffect and clipboard hooks. ([31603](https://github.com/WordPress/gutenberg/pull/31603))
+    -   Add Types to `withGlobalEvents` as any. ([32290](https://github.com/WordPress/gutenberg/pull/32290))
+    -   Add types to `useWarnOnChange`. ([32288](https://github.com/WordPress/gutenberg/pull/32288))
+    -   Add types to `useViewportMatch`. ([32287](https://github.com/WordPress/gutenberg/pull/32287))
+    -   Add types to `useDropZone`. ([32286](https://github.com/WordPress/gutenberg/pull/32286))
+    -   Add types to `useDragging`. ([32285](https://github.com/WordPress/gutenberg/pull/32285))
+    -   Add types to `useThrottle` and typecheck `useFocusOutside`. ([32170](https://github.com/WordPress/gutenberg/pull/32170))
+    -   Add types to `useKeyboardShortcut`. ([32168](https://github.com/WordPress/gutenberg/pull/32168))
+    -   Add types to `useResizeObserver` and type checking to `useIsomorphicLayoutEffect`. ([32111](https://github.com/WordPress/gutenberg/pull/32111))
+    -   Add types to `useFocusReturn`. ([31949](https://github.com/WordPress/gutenberg/pull/31949))
+    -   Add types to `usePrevious`. ([31944](https://github.com/WordPress/gutenberg/pull/31944))
+    -   Add types to useReducedMotion and useMediaQuery. ([31941](https://github.com/WordPress/gutenberg/pull/31941))
+    -   Add types to useMergeRefs. ([31939](https://github.com/WordPress/gutenberg/pull/31939))
+    -   Add test to `useMergeRefs` for disabling refs + better documentation. ([32044](https://github.com/WordPress/gutenberg/pull/32044))
+    -   Add types to `useDebounce`. ([32015](https://github.com/WordPress/gutenberg/pull/32015))
+    -   Deprecate `withState` in favor of `useState`. ([32368](https://github.com/WordPress/gutenberg/pull/32368))
+    -   Simplify `compose` function documentation and point to lodash documentation for it. ([32324](https://github.com/WordPress/gutenberg/pull/32324))
+-   Global Styles:
+    -   Avoid enqueuing global styles twice when running on WordPress 5.8. ([32372](https://github.com/WordPress/gutenberg/pull/32372))
+-   Keyboard Shortcuts:
+    -   Multi select: select all: Restore ref callback. ([32318](https://github.com/WordPress/gutenberg/pull/32318))
+-   Linting:
+    -   Fix eslint warnings in the core-data package. ([32198](https://github.com/WordPress/gutenberg/pull/32198))
+    -   Fix eslint warnings in the edit-navigation package. ([32196](https://github.com/WordPress/gutenberg/pull/32196))
+    -   Fix eslint warnings in the edit-post package. ([32195](https://github.com/WordPress/gutenberg/pull/32195))
+    -   Fix eslint warnings in the edit-site package. ([32156](https://github.com/WordPress/gutenberg/pull/32156))
+    -   Fix eslint warnings in the edit-widgets package. ([32155](https://github.com/WordPress/gutenberg/pull/32155))
+    -   Fix eslint warnings in the editor package. ([32153](https://github.com/WordPress/gutenberg/pull/32153))
+    -   Fix eslint warnings in the nux package. ([32145](https://github.com/WordPress/gutenberg/pull/32145))
+    -   Fix eslint warnings in the rich-text package. ([32142](https://github.com/WordPress/gutenberg/pull/32142))
+    -   Fix eslint warnings in the reusable-blocks package. ([32141](https://github.com/WordPress/gutenberg/pull/32141))
+-   Navigation Editor:
+    -   Fix React warning. ([32165](https://github.com/WordPress/gutenberg/pull/32165))
 
+### Tools
 
+-   Babel presets: Prefix build with node command for Windows environments. (#32258). ([32329](https://github.com/WordPress/gutenberg/pull/32329))
+-   Workflow:
+    -   Limit when workflows run on forks. ([32114](https://github.com/WordPress/gutenberg/pull/32114))
+    -   Only calculate the compressed size on pull requests when necessary. ([32161](https://github.com/WordPress/gutenberg/pull/32161))
+    -   Performance Tests Workflow:
+        -   Polish Bash script. ([32284](https://github.com/WordPress/gutenberg/pull/32284))
+        -   Run suite atop latest stable major WordPress version. ([32244](https://github.com/WordPress/gutenberg/pull/32244))
+        -   Use latest WP branch for release tests. ([32277](https://github.com/WordPress/gutenberg/pull/32277))
+-   End to End Tests:
+    -   Fix inserting cover block intermittent failure. ([32014](https://github.com/WordPress/gutenberg/pull/32014))
+    -   Navigation Editor:
+        -   Fix failing end-to-end tests. ([32043](https://github.com/WordPress/gutenberg/pull/32043))
+        -   Skip "Change detection" tests. ([32151](https://github.com/WordPress/gutenberg/pull/32151))
+    -   Move the Query and PostTitle end-to-end tests out of the experimental directory. ([31691](https://github.com/WordPress/gutenberg/pull/31691))
+    -   Multi select: Add end-to-end test for gruadual select all. ([32304](https://github.com/WordPress/gutenberg/pull/32304))
+    -   Remove redundant widget API endpoint tests. ([32298](https://github.com/WordPress/gutenberg/pull/32298))
+    -   Skip tests that are failing with the latest WordPress core. ([32228](https://github.com/WordPress/gutenberg/pull/32228))
+-   Eslint: Ignore some eslint rules in react-native folders. ([32143](https://github.com/WordPress/gutenberg/pull/32143))
 
 = 10.7.4 =
 
-### Bug Fixes
+## Changelog
 
-- Site Logo block: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
+### Bug Fixes
 
+-   Site Logo block: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
 
 = 10.7.3 =
 
-### Bug Fixes
+## Changelog
 
-- Fix alligned blocks. ([32454](https://github.com/WordPress/gutenberg/pull/32454))
+### Bug Fixes
 
+-   Fix alligned blocks. ([32454](https://github.com/WordPress/gutenberg/pull/32454))
 
 = 10.7.2 =
 
-### Bug Fixes
+## Changelog
 
-- Fix Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
+### Bug Fixes
 
+-   Fix Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
 
 = 10.8.0-rc.1 =
 
-
+## Changelog
 
 ### Enhancements
 
-- BoxControl: Add allowReset option. ([32345](https://github.com/WordPress/gutenberg/pull/32345))
-- Add Convert to Regular Blocks button to ellipsis Dropdown. ([32310](https://github.com/WordPress/gutenberg/pull/32310))
-- Page list block: Add active page classes. ([32134](https://github.com/WordPress/gutenberg/pull/32134))
-- Template Mode: Don't display snackbar with the Welcome Guide. ([32076](https://github.com/WordPress/gutenberg/pull/32076))
-- Block Supports: Allow skipping spacing support serialization. ([31973](https://github.com/WordPress/gutenberg/pull/31973))
-
-### Bug Fixes
-
-- Fix image border radius. ([32393](https://github.com/WordPress/gutenberg/pull/32393))
-- Fix allowed patterns check. ([32376](https://github.com/WordPress/gutenberg/pull/32376))
-- Fix deselecting block when inspector is opened. ([32361](https://github.com/WordPress/gutenberg/pull/32361))
-- Generate classes from preset slugs in the same way (server & client). ([32352](https://github.com/WordPress/gutenberg/pull/32352))
-- Mobile - Gallery block - Fix gallery images caption text formatting. ([32351](https://github.com/WordPress/gutenberg/pull/32351))
-- File Block: Add an example preview. ([32350](https://github.com/WordPress/gutenberg/pull/32350))
-- Avoid duplicate skip-links in WP 5.8+. ([32346](https://github.com/WordPress/gutenberg/pull/32346))
-- SuggestionsList: Try to use a unique "key". ([32344](https://github.com/WordPress/gutenberg/pull/32344))
-- Fix `theme.json` styles for the `core/list` block. ([32343](https://github.com/WordPress/gutenberg/pull/32343))
-- Prevent saving the post before previewing in locked/read-only mode. ([32341](https://github.com/WordPress/gutenberg/pull/32341))
-- Audio Block: Add an example preview. ([32333](https://github.com/WordPress/gutenberg/pull/32333))
-- Try: Make focus style valid CSS. ([32305](https://github.com/WordPress/gutenberg/pull/32305))
-- Fix aspect ratio of welcome image. ([32302](https://github.com/WordPress/gutenberg/pull/32302))
-- Fix legacy widget block preview iframe. ([32300](https://github.com/WordPress/gutenberg/pull/32300))
-- Fix broken contributors readme files. ([32272](https://github.com/WordPress/gutenberg/pull/32272))
-- Center the welcome image in narrow viewport of widgets customizer. ([32264](https://github.com/WordPress/gutenberg/pull/32264))
-- Fix legacy widget previews. ([32260](https://github.com/WordPress/gutenberg/pull/32260))
-- Limit latest posts featured image width to 100%. ([32245](https://github.com/WordPress/gutenberg/pull/32245))
-- Fix mispelling in the Widgets Block Editor section. ([32242](https://github.com/WordPress/gutenberg/pull/32242))
-- Try: Fix notices below block toolbars. ([32238](https://github.com/WordPress/gutenberg/pull/32238))
-- Allow non-latin characters in slugs. ([32232](https://github.com/WordPress/gutenberg/pull/32232))
-- Fix escape key events in customizer closing the editor. ([32175](https://github.com/WordPress/gutenberg/pull/32175))
-- Update Dropdown’s close-on-blur logic to work inside dialogs. ([32133](https://github.com/WordPress/gutenberg/pull/32133))
-- components: Add missing Divider, Heading type reference in tsconfig. ([32104](https://github.com/WordPress/gutenberg/pull/32104))
-- Fix broken template part converter modal styles. ([32097](https://github.com/WordPress/gutenberg/pull/32097))
-- Fix some smaller styling issues and bugs in Widgets Customizer. ([32072](https://github.com/WordPress/gutenberg/pull/32072))
-- Iframed editor: Fix embed dimensions with missing wp-embed-responsive class. ([32057](https://github.com/WordPress/gutenberg/pull/32057))
-- Fix creating and replacing legacy widgets in customizer. ([32005](https://github.com/WordPress/gutenberg/pull/32005))
-- Block toolbar: Always close options menu after toggling sidebar. ([31921](https://github.com/WordPress/gutenberg/pull/31921))
-- UnitControl: Fixed documentation for `units` attribute. ([31901](https://github.com/WordPress/gutenberg/pull/31901))
-- Display wide widgets as popovers in Customizer. ([31736](https://github.com/WordPress/gutenberg/pull/31736))
-- compose: Add types to useRefEffect and clipboard hooks. ([31603](https://github.com/WordPress/gutenberg/pull/31603))
-- components: Fix Shortcut polymorphism. ([31555](https://github.com/WordPress/gutenberg/pull/31555))
+-   BoxControl: Add allowReset option. ([32345](https://github.com/WordPress/gutenberg/pull/32345))
+-   Add Convert to Regular Blocks button to ellipsis Dropdown. ([32310](https://github.com/WordPress/gutenberg/pull/32310))
+-   Page list block: Add active page classes. ([32134](https://github.com/WordPress/gutenberg/pull/32134))
+-   Template Mode: Don't display snackbar with the Welcome Guide. ([32076](https://github.com/WordPress/gutenberg/pull/32076))
+-   Block Supports: Allow skipping spacing support serialization. ([31973](https://github.com/WordPress/gutenberg/pull/31973))
+
+### Bug Fixes
+
+-   Fix image border radius. ([32393](https://github.com/WordPress/gutenberg/pull/32393))
+-   Fix allowed patterns check. ([32376](https://github.com/WordPress/gutenberg/pull/32376))
+-   Fix deselecting block when inspector is opened. ([32361](https://github.com/WordPress/gutenberg/pull/32361))
+-   Generate classes from preset slugs in the same way (server & client). ([32352](https://github.com/WordPress/gutenberg/pull/32352))
+-   Mobile - Gallery block - Fix gallery images caption text formatting. ([32351](https://github.com/WordPress/gutenberg/pull/32351))
+-   File Block: Add an example preview. ([32350](https://github.com/WordPress/gutenberg/pull/32350))
+-   Avoid duplicate skip-links in WP 5.8+. ([32346](https://github.com/WordPress/gutenberg/pull/32346))
+-   SuggestionsList: Try to use a unique "key". ([32344](https://github.com/WordPress/gutenberg/pull/32344))
+-   Fix `theme.json` styles for the `core/list` block. ([32343](https://github.com/WordPress/gutenberg/pull/32343))
+-   Prevent saving the post before previewing in locked/read-only mode. ([32341](https://github.com/WordPress/gutenberg/pull/32341))
+-   Audio Block: Add an example preview. ([32333](https://github.com/WordPress/gutenberg/pull/32333))
+-   Try: Make focus style valid CSS. ([32305](https://github.com/WordPress/gutenberg/pull/32305))
+-   Fix aspect ratio of welcome image. ([32302](https://github.com/WordPress/gutenberg/pull/32302))
+-   Fix legacy widget block preview iframe. ([32300](https://github.com/WordPress/gutenberg/pull/32300))
+-   Fix broken contributors readme files. ([32272](https://github.com/WordPress/gutenberg/pull/32272))
+-   Center the welcome image in narrow viewport of widgets customizer. ([32264](https://github.com/WordPress/gutenberg/pull/32264))
+-   Fix legacy widget previews. ([32260](https://github.com/WordPress/gutenberg/pull/32260))
+-   Limit latest posts featured image width to 100%. ([32245](https://github.com/WordPress/gutenberg/pull/32245))
+-   Fix mispelling in the Widgets Block Editor section. ([32242](https://github.com/WordPress/gutenberg/pull/32242))
+-   Try: Fix notices below block toolbars. ([32238](https://github.com/WordPress/gutenberg/pull/32238))
+-   Allow non-latin characters in slugs. ([32232](https://github.com/WordPress/gutenberg/pull/32232))
+-   Fix escape key events in customizer closing the editor. ([32175](https://github.com/WordPress/gutenberg/pull/32175))
+-   Update Dropdown’s close-on-blur logic to work inside dialogs. ([32133](https://github.com/WordPress/gutenberg/pull/32133))
+-   components: Add missing Divider, Heading type reference in tsconfig. ([32104](https://github.com/WordPress/gutenberg/pull/32104))
+-   Fix broken template part converter modal styles. ([32097](https://github.com/WordPress/gutenberg/pull/32097))
+-   Fix some smaller styling issues and bugs in Widgets Customizer. ([32072](https://github.com/WordPress/gutenberg/pull/32072))
+-   Iframed editor: Fix embed dimensions with missing wp-embed-responsive class. ([32057](https://github.com/WordPress/gutenberg/pull/32057))
+-   Fix creating and replacing legacy widgets in customizer. ([32005](https://github.com/WordPress/gutenberg/pull/32005))
+-   Block toolbar: Always close options menu after toggling sidebar. ([31921](https://github.com/WordPress/gutenberg/pull/31921))
+-   UnitControl: Fixed documentation for `units` attribute. ([31901](https://github.com/WordPress/gutenberg/pull/31901))
+-   Display wide widgets as popovers in Customizer. ([31736](https://github.com/WordPress/gutenberg/pull/31736))
+-   compose: Add types to useRefEffect and clipboard hooks. ([31603](https://github.com/WordPress/gutenberg/pull/31603))
+-   components: Fix Shortcut polymorphism. ([31555](https://github.com/WordPress/gutenberg/pull/31555))
 
 ### Performance
 
-- Experimental Layout: Pass the same object when no data changes. ([32380](https://github.com/WordPress/gutenberg/pull/32380))
-- Navigation: Avoid rerendering when placeholder does not change. ([32357](https://github.com/WordPress/gutenberg/pull/32357))
-- Buttons: Move options to constants to avoid unneeded renders. ([32356](https://github.com/WordPress/gutenberg/pull/32356))
-- Update Welcome Guides to use external image URLs. ([32026](https://github.com/WordPress/gutenberg/pull/32026))
+-   Experimental Layout: Pass the same object when no data changes. ([32380](https://github.com/WordPress/gutenberg/pull/32380))
+-   Navigation: Avoid rerendering when placeholder does not change. ([32357](https://github.com/WordPress/gutenberg/pull/32357))
+-   Buttons: Move options to constants to avoid unneeded renders. ([32356](https://github.com/WordPress/gutenberg/pull/32356))
+-   Update Welcome Guides to use external image URLs. ([32026](https://github.com/WordPress/gutenberg/pull/32026))
 
 ### Experiments
 
-- Page List: Fix css bleed from navigation. ([32384](https://github.com/WordPress/gutenberg/pull/32384))
-- Avoid enqueuing global styles twice when running on WordPress 5.8. ([32372](https://github.com/WordPress/gutenberg/pull/32372))
-- Widgets editor: Fix error when saving empty Legacy Widget block. ([32359](https://github.com/WordPress/gutenberg/pull/32359))
-- Simplify html selector in nav burger menu. ([32303](https://github.com/WordPress/gutenberg/pull/32303))
-- Link to widgets.php instead of themes.php?page=gutenberg-widgets. ([32299](https://github.com/WordPress/gutenberg/pull/32299))
-- Lock the document from scrolling when the modal is open. ([32269](https://github.com/WordPress/gutenberg/pull/32269))
-- Fix the visible widget area toolbar. ([32262](https://github.com/WordPress/gutenberg/pull/32262))
-- Add preferences menu group label to widgets and customize widget editor. ([32259](https://github.com/WordPress/gutenberg/pull/32259))
-- Group typographic block supports under a `typography` key. ([32252](https://github.com/WordPress/gutenberg/pull/32252))
-- Fix incorrect useCustomUnits import. ([32248](https://github.com/WordPress/gutenberg/pull/32248))
-- Alignment styles: Centre blocks using grid not margins. ([32231](https://github.com/WordPress/gutenberg/pull/32231))
-- site-logo block: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
-- Widgets editor: Fix block toolbar position after scroll. ([32212](https://github.com/WordPress/gutenberg/pull/32212))
-- Fix: Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
-- FSE: Remove now-obsolete get_template_hierarchy(). ([32116](https://github.com/WordPress/gutenberg/pull/32116))
-- Remove query context leftovers. ([32093](https://github.com/WordPress/gutenberg/pull/32093))
-- Navigation Screen: Hide sidebar when a menu isn't selected. ([32090](https://github.com/WordPress/gutenberg/pull/32090))
-- Navigation: Fix collapsing regression. ([32081](https://github.com/WordPress/gutenberg/pull/32081))
-- Templates: Remove now-obsolete `gutenberg_get_template_paths()`. ([32066](https://github.com/WordPress/gutenberg/pull/32066))
-- Fix toolbar alignment in widget block editor. ([31991](https://github.com/WordPress/gutenberg/pull/31991))
-- Allow block attributes passed to block renderer by way of wp_nav_menu. ([31911](https://github.com/WordPress/gutenberg/pull/31911))
-- Augment and improve Nav Editor (and block) documentation. ([31891](https://github.com/WordPress/gutenberg/pull/31891))
-- Refactor nav block paddings/margins to inherit global styles. ([31878](https://github.com/WordPress/gutenberg/pull/31878))
-- Align block hover and select styles across list view, site editor, select mode. ([31277](https://github.com/WordPress/gutenberg/pull/31277))
-- Add Letter-spacing and enable this for site title and site tagline. ([31118](https://github.com/WordPress/gutenberg/pull/31118))
-- Headings block: Add support for font weight. ([27639](https://github.com/WordPress/gutenberg/pull/27639))
+-   Page List: Fix css bleed from navigation. ([32384](https://github.com/WordPress/gutenberg/pull/32384))
+-   Avoid enqueuing global styles twice when running on WordPress 5.8. ([32372](https://github.com/WordPress/gutenberg/pull/32372))
+-   Widgets editor: Fix error when saving empty Legacy Widget block. ([32359](https://github.com/WordPress/gutenberg/pull/32359))
+-   Simplify html selector in nav burger menu. ([32303](https://github.com/WordPress/gutenberg/pull/32303))
+-   Link to widgets.php instead of themes.php?page=gutenberg-widgets. ([32299](https://github.com/WordPress/gutenberg/pull/32299))
+-   Lock the document from scrolling when the modal is open. ([32269](https://github.com/WordPress/gutenberg/pull/32269))
+-   Fix the visible widget area toolbar. ([32262](https://github.com/WordPress/gutenberg/pull/32262))
+-   Add preferences menu group label to widgets and customize widget editor. ([32259](https://github.com/WordPress/gutenberg/pull/32259))
+-   Group typographic block supports under a `typography` key. ([32252](https://github.com/WordPress/gutenberg/pull/32252))
+-   Fix incorrect useCustomUnits import. ([32248](https://github.com/WordPress/gutenberg/pull/32248))
+-   Alignment styles: Centre blocks using grid not margins. ([32231](https://github.com/WordPress/gutenberg/pull/32231))
+-   site-logo block: Use option instead of theme-mod. ([32229](https://github.com/WordPress/gutenberg/pull/32229))
+-   Widgets editor: Fix block toolbar position after scroll. ([32212](https://github.com/WordPress/gutenberg/pull/32212))
+-   Fix: Logic to enable custom colors, gradients, and font sizes. ([32200](https://github.com/WordPress/gutenberg/pull/32200))
+-   FSE: Remove now-obsolete get_template_hierarchy(). ([32116](https://github.com/WordPress/gutenberg/pull/32116))
+-   Remove query context leftovers. ([32093](https://github.com/WordPress/gutenberg/pull/32093))
+-   Navigation Screen: Hide sidebar when a menu isn't selected. ([32090](https://github.com/WordPress/gutenberg/pull/32090))
+-   Navigation: Fix collapsing regression. ([32081](https://github.com/WordPress/gutenberg/pull/32081))
+-   Templates: Remove now-obsolete `gutenberg_get_template_paths()`. ([32066](https://github.com/WordPress/gutenberg/pull/32066))
+-   Fix toolbar alignment in widget block editor. ([31991](https://github.com/WordPress/gutenberg/pull/31991))
+-   Allow block attributes passed to block renderer by way of wp_nav_menu. ([31911](https://github.com/WordPress/gutenberg/pull/31911))
+-   Augment and improve Nav Editor (and block) documentation. ([31891](https://github.com/WordPress/gutenberg/pull/31891))
+-   Refactor nav block paddings/margins to inherit global styles. ([31878](https://github.com/WordPress/gutenberg/pull/31878))
+-   Align block hover and select styles across list view, site editor, select mode. ([31277](https://github.com/WordPress/gutenberg/pull/31277))
+-   Add Letter-spacing and enable this for site title and site tagline. ([31118](https://github.com/WordPress/gutenberg/pull/31118))
+-   Headings block: Add support for font weight. ([27639](https://github.com/WordPress/gutenberg/pull/27639))
 
 ### Documentation
 
-- Components: Mark all experimental components in the handbook. ([32147](https://github.com/WordPress/gutenberg/pull/32147))
-- Update the create a block theme tutorial. ([31269](https://github.com/WordPress/gutenberg/pull/31269))
+-   Components: Mark all experimental components in the handbook. ([32147](https://github.com/WordPress/gutenberg/pull/32147))
+-   Update the create a block theme tutorial. ([31269](https://github.com/WordPress/gutenberg/pull/31269))
 
 ### Code Quality
 
-- Remove duplicated ComboboxControl component. ([32397](https://github.com/WordPress/gutenberg/pull/32397))
-- Remove usages of withState from edit-post and editor. ([32349](https://github.com/WordPress/gutenberg/pull/32349))
-- Rich text: Contextual default shortcut removal. ([32327](https://github.com/WordPress/gutenberg/pull/32327))
-- compose: Simplify `compose` fn documentation and point to lodash documentation for it. ([32324](https://github.com/WordPress/gutenberg/pull/32324))
-- Update: Make getBlockSupport support any lodash path.. ([32322](https://github.com/WordPress/gutenberg/pull/32322))
-- Multi select: select all: Restore ref callback. ([32318](https://github.com/WordPress/gutenberg/pull/32318))
-- compose: Type `withGlobalEvents` as any. ([32290](https://github.com/WordPress/gutenberg/pull/32290))
-- compose: Add types to `useWarnOnChange`. ([32288](https://github.com/WordPress/gutenberg/pull/32288))
-- compose: Add types to `useViewportMatch`. ([32287](https://github.com/WordPress/gutenberg/pull/32287))
-- compose: Add types to `useDropZone`. ([32286](https://github.com/WordPress/gutenberg/pull/32286))
-- compose: Add types to `useDragging`. ([32285](https://github.com/WordPress/gutenberg/pull/32285))
-- components: Delete unused types from `context`. ([32254](https://github.com/WordPress/gutenberg/pull/32254))
-- core-data: No-string-literals fix. ([32198](https://github.com/WordPress/gutenberg/pull/32198))
-- edit-navigation: No-string-literals fix. ([32196](https://github.com/WordPress/gutenberg/pull/32196))
-- edit-post: No-string-literals fix. ([32195](https://github.com/WordPress/gutenberg/pull/32195))
-- compose: Add types to `useThrottle` and typecheck `useFocusOutside`. ([32170](https://github.com/WordPress/gutenberg/pull/32170))
-- compose: Add types to `useKeyboardShortcut`. ([32168](https://github.com/WordPress/gutenberg/pull/32168))
-- Navigation Editor: Fix React warning. ([32165](https://github.com/WordPress/gutenberg/pull/32165))
-- edit-site: Fix no-string-literals warnings. ([32156](https://github.com/WordPress/gutenberg/pull/32156))
-- edit-widgets: Fix no-string-literal warnings. ([32155](https://github.com/WordPress/gutenberg/pull/32155))
-- Editor package: No-string-literals fix. ([32153](https://github.com/WordPress/gutenberg/pull/32153))
-- nux: No-string-literals fix. ([32145](https://github.com/WordPress/gutenberg/pull/32145))
-- rich-text: No-string-literals fix. ([32142](https://github.com/WordPress/gutenberg/pull/32142))
-- Reusable-block: No-string-literals fix. ([32141](https://github.com/WordPress/gutenberg/pull/32141))
-- Avoid a PHP Notice when `render_block()` is called without attributes. ([32135](https://github.com/WordPress/gutenberg/pull/32135))
-- compose: Add types to `useResizeObserver` and type checking to `useIsomorphicLayoutEffect`. ([32111](https://github.com/WordPress/gutenberg/pull/32111))
-- components: Add types to Disabled. ([32105](https://github.com/WordPress/gutenberg/pull/32105))
-- Components: Rename `ViewOwnProps` to `PolymorphicComponentProps`. ([32053](https://github.com/WordPress/gutenberg/pull/32053))
-- Popover: Remove unused `content` property from types definitions. ([32049](https://github.com/WordPress/gutenberg/pull/32049))
-- Compose: useMergeRefs: Add test for disabling refs + better documentation. ([32044](https://github.com/WordPress/gutenberg/pull/32044))
-- compose: Add types to `useFocusReturn`. ([31949](https://github.com/WordPress/gutenberg/pull/31949))
-- compose: Add types to `usePrevious`. ([31944](https://github.com/WordPress/gutenberg/pull/31944))
-- compose: Add types to useReducedMotion and useMediaQuery. ([31941](https://github.com/WordPress/gutenberg/pull/31941))
-- compose: Add types to useMergeRefs. ([31939](https://github.com/WordPress/gutenberg/pull/31939))
-- Components: Require explicit `children` prop for all components. ([31817](https://github.com/WordPress/gutenberg/pull/31817))
-- Button: Deprecate `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in favour of `variant` prop. ([31713](https://github.com/WordPress/gutenberg/pull/31713))
-- Remove: __experimentalUseColors hook. ([31438](https://github.com/WordPress/gutenberg/pull/31438))
-- List View: Simplify the BlockNavigation component. ([31290](https://github.com/WordPress/gutenberg/pull/31290))
+-   Remove duplicated ComboboxControl component. ([32397](https://github.com/WordPress/gutenberg/pull/32397))
+-   Remove usages of withState from edit-post and editor. ([32349](https://github.com/WordPress/gutenberg/pull/32349))
+-   Rich text: Contextual default shortcut removal. ([32327](https://github.com/WordPress/gutenberg/pull/32327))
+-   compose: Simplify `compose` fn documentation and point to lodash documentation for it. ([32324](https://github.com/WordPress/gutenberg/pull/32324))
+-   Update: Make getBlockSupport support any lodash path.. ([32322](https://github.com/WordPress/gutenberg/pull/32322))
+-   Multi select: select all: Restore ref callback. ([32318](https://github.com/WordPress/gutenberg/pull/32318))
+-   compose: Type `withGlobalEvents` as any. ([32290](https://github.com/WordPress/gutenberg/pull/32290))
+-   compose: Add types to `useWarnOnChange`. ([32288](https://github.com/WordPress/gutenberg/pull/32288))
+-   compose: Add types to `useViewportMatch`. ([32287](https://github.com/WordPress/gutenberg/pull/32287))
+-   compose: Add types to `useDropZone`. ([32286](https://github.com/WordPress/gutenberg/pull/32286))
+-   compose: Add types to `useDragging`. ([32285](https://github.com/WordPress/gutenberg/pull/32285))
+-   components: Delete unused types from `context`. ([32254](https://github.com/WordPress/gutenberg/pull/32254))
+-   core-data: No-string-literals fix. ([32198](https://github.com/WordPress/gutenberg/pull/32198))
+-   edit-navigation: No-string-literals fix. ([32196](https://github.com/WordPress/gutenberg/pull/32196))
+-   edit-post: No-string-literals fix. ([32195](https://github.com/WordPress/gutenberg/pull/32195))
+-   compose: Add types to `useThrottle` and typecheck `useFocusOutside`. ([32170](https://github.com/WordPress/gutenberg/pull/32170))
+-   compose: Add types to `useKeyboardShortcut`. ([32168](https://github.com/WordPress/gutenberg/pull/32168))
+-   Navigation Editor: Fix React warning. ([32165](https://github.com/WordPress/gutenberg/pull/32165))
+-   edit-site: Fix no-string-literals warnings. ([32156](https://github.com/WordPress/gutenberg/pull/32156))
+-   edit-widgets: Fix no-string-literal warnings. ([32155](https://github.com/WordPress/gutenberg/pull/32155))
+-   Editor package: No-string-literals fix. ([32153](https://github.com/WordPress/gutenberg/pull/32153))
+-   nux: No-string-literals fix. ([32145](https://github.com/WordPress/gutenberg/pull/32145))
+-   rich-text: No-string-literals fix. ([32142](https://github.com/WordPress/gutenberg/pull/32142))
+-   Reusable-block: No-string-literals fix. ([32141](https://github.com/WordPress/gutenberg/pull/32141))
+-   Avoid a PHP Notice when `render_block()` is called without attributes. ([32135](https://github.com/WordPress/gutenberg/pull/32135))
+-   compose: Add types to `useResizeObserver` and type checking to `useIsomorphicLayoutEffect`. ([32111](https://github.com/WordPress/gutenberg/pull/32111))
+-   components: Add types to Disabled. ([32105](https://github.com/WordPress/gutenberg/pull/32105))
+-   Components: Rename `ViewOwnProps` to `PolymorphicComponentProps`. ([32053](https://github.com/WordPress/gutenberg/pull/32053))
+-   Popover: Remove unused `content` property from types definitions. ([32049](https://github.com/WordPress/gutenberg/pull/32049))
+-   Compose: useMergeRefs: Add test for disabling refs + better documentation. ([32044](https://github.com/WordPress/gutenberg/pull/32044))
+-   compose: Add types to `useFocusReturn`. ([31949](https://github.com/WordPress/gutenberg/pull/31949))
+-   compose: Add types to `usePrevious`. ([31944](https://github.com/WordPress/gutenberg/pull/31944))
+-   compose: Add types to useReducedMotion and useMediaQuery. ([31941](https://github.com/WordPress/gutenberg/pull/31941))
+-   compose: Add types to useMergeRefs. ([31939](https://github.com/WordPress/gutenberg/pull/31939))
+-   Components: Require explicit `children` prop for all components. ([31817](https://github.com/WordPress/gutenberg/pull/31817))
+-   Button: Deprecate `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in favour of `variant` prop. ([31713](https://github.com/WordPress/gutenberg/pull/31713))
+-   Remove: \_\_experimentalUseColors hook. ([31438](https://github.com/WordPress/gutenberg/pull/31438))
+-   List View: Simplify the BlockNavigation component. ([31290](https://github.com/WordPress/gutenberg/pull/31290))
 
 ### Tools
 
-- Remove redundant widget API endpoint tests. ([32298](https://github.com/WordPress/gutenberg/pull/32298))
-- Performance Tests Workflow: Polish Bash script. ([32284](https://github.com/WordPress/gutenberg/pull/32284))
-- Performance Tests Workflow: Use latest WP branch for release tests. ([32277](https://github.com/WordPress/gutenberg/pull/32277))
-- Navigation Editor: Skip "Change detection" tests. ([32151](https://github.com/WordPress/gutenberg/pull/32151))
-- Ignore some eslint rules in react-native folders. ([32143](https://github.com/WordPress/gutenberg/pull/32143))
-- Navigation Editor: Fix failing end-to-end tests. ([32043](https://github.com/WordPress/gutenberg/pull/32043))
-- Move the Query and PostTitle end-to-end tests out of the experimental directory. ([31691](https://github.com/WordPress/gutenberg/pull/31691))
-- Fix Xcode 12.5 support. ([31632](https://github.com/WordPress/gutenberg/pull/31632))
+-   Remove redundant widget API endpoint tests. ([32298](https://github.com/WordPress/gutenberg/pull/32298))
+-   Performance Tests Workflow: Polish Bash script. ([32284](https://github.com/WordPress/gutenberg/pull/32284))
+-   Performance Tests Workflow: Use latest WP branch for release tests. ([32277](https://github.com/WordPress/gutenberg/pull/32277))
+-   Navigation Editor: Skip "Change detection" tests. ([32151](https://github.com/WordPress/gutenberg/pull/32151))
+-   Ignore some eslint rules in react-native folders. ([32143](https://github.com/WordPress/gutenberg/pull/32143))
+-   Navigation Editor: Fix failing end-to-end tests. ([32043](https://github.com/WordPress/gutenberg/pull/32043))
+-   Move the Query and PostTitle end-to-end tests out of the experimental directory. ([31691](https://github.com/WordPress/gutenberg/pull/31691))
+-   Fix Xcode 12.5 support. ([31632](https://github.com/WordPress/gutenberg/pull/31632))
 
 ### Various
 
-- Update iOS Simulator device command in React Native documentation. ([32383](https://github.com/WordPress/gutenberg/pull/32383))
-- Compose: Deprecate `withState` in favor of `useState`. ([32368](https://github.com/WordPress/gutenberg/pull/32368))
-- Search block : Fix vertical alignment of search button text. ([32340](https://github.com/WordPress/gutenberg/pull/32340))
-- Prefix build with node command for Windows environments. (#32258). ([32329](https://github.com/WordPress/gutenberg/pull/32329))
-- Remove metaboxes from template mode. ([32315](https://github.com/WordPress/gutenberg/pull/32315))
-- Revert "Alignment styles: Centre blocks using grid not margins". ([32312](https://github.com/WordPress/gutenberg/pull/32312))
-- Multi select: Add end-to-end test for gruadual select all. ([32304](https://github.com/WordPress/gutenberg/pull/32304))
-- Avoid unnecessary calculation or animation if tooltip is invisible. ([32289](https://github.com/WordPress/gutenberg/pull/32289))
-- Try: Remove opacity animation on canvas. ([32266](https://github.com/WordPress/gutenberg/pull/32266))
-- components: Add `BaseField`. ([32250](https://github.com/WordPress/gutenberg/pull/32250))
-- Workflows: Performance: Run suite atop latest stable major WordPress version. ([32244](https://github.com/WordPress/gutenberg/pull/32244))
-- Skip tests that are failing with latest WordPress core. ([32228](https://github.com/WordPress/gutenberg/pull/32228))
-- components: Add types to Icon. ([32219](https://github.com/WordPress/gutenberg/pull/32219))
-- components: Remove all `withNext` wrappers. ([32205](https://github.com/WordPress/gutenberg/pull/32205))
-- Only calculate the compressed size on pull requests when necessary. ([32161](https://github.com/WordPress/gutenberg/pull/32161))
-- Limit when workflows run on forks. ([32114](https://github.com/WordPress/gutenberg/pull/32114))
-- Navigation Editor: Move modal state to ManageLocations component. ([32078](https://github.com/WordPress/gutenberg/pull/32078))
-- Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. ([32063](https://github.com/WordPress/gutenberg/pull/32063))
-- Update the appearance of the template details popover. ([32042](https://github.com/WordPress/gutenberg/pull/32042))
-- Update the title area in the template editor. ([32037](https://github.com/WordPress/gutenberg/pull/32037))
-- compose: Add types to `useDebounce`. ([32015](https://github.com/WordPress/gutenberg/pull/32015))
-- Try fixing inserting cover block intermittent failure. ([32014](https://github.com/WordPress/gutenberg/pull/32014))
-- Rich text: Remove inline display warning. ([32013](https://github.com/WordPress/gutenberg/pull/32013))
-- Add native block inserter onboarding tooltip. ([32001](https://github.com/WordPress/gutenberg/pull/32001))
-- Improve parsing and retrieve additional data in REST url-details endpoint. ([31763](https://github.com/WordPress/gutenberg/pull/31763))
-- Update Modal styling. ([31639](https://github.com/WordPress/gutenberg/pull/31639))
-- components: Promote Elevation. ([31614](https://github.com/WordPress/gutenberg/pull/31614))
-- components: Add ZStack. ([31613](https://github.com/WordPress/gutenberg/pull/31613))
-- Remove title attribute from NavigationItem inside the site-editor. ([30744](https://github.com/WordPress/gutenberg/pull/30744))
-- Show the label for archives block dropdown. ([30527](https://github.com/WordPress/gutenberg/pull/30527))
-- Components: Add ItemGroup and Item. ([30097](https://github.com/WordPress/gutenberg/pull/30097))
-- Mobile - Slash inserter. ([29772](https://github.com/WordPress/gutenberg/pull/29772))
-- Remove class= wrapper to already wrapped attributes. Issue #29209. ([29214](https://github.com/WordPress/gutenberg/pull/29214))
-- List Block: Add font family to the list block. ([27510](https://github.com/WordPress/gutenberg/pull/27510))
-
-
-
+-   Update iOS Simulator device command in React Native documentation. ([32383](https://github.com/WordPress/gutenberg/pull/32383))
+-   Compose: Deprecate `withState` in favor of `useState`. ([32368](https://github.com/WordPress/gutenberg/pull/32368))
+-   Search block : Fix vertical alignment of search button text. ([32340](https://github.com/WordPress/gutenberg/pull/32340))
+-   Prefix build with node command for Windows environments. (#32258). ([32329](https://github.com/WordPress/gutenberg/pull/32329))
+-   Remove metaboxes from template mode. ([32315](https://github.com/WordPress/gutenberg/pull/32315))
+-   Revert "Alignment styles: Centre blocks using grid not margins". ([32312](https://github.com/WordPress/gutenberg/pull/32312))
+-   Multi select: Add end-to-end test for gruadual select all. ([32304](https://github.com/WordPress/gutenberg/pull/32304))
+-   Avoid unnecessary calculation or animation if tooltip is invisible. ([32289](https://github.com/WordPress/gutenberg/pull/32289))
+-   Try: Remove opacity animation on canvas. ([32266](https://github.com/WordPress/gutenberg/pull/32266))
+-   components: Add `BaseField`. ([32250](https://github.com/WordPress/gutenberg/pull/32250))
+-   Workflows: Performance: Run suite atop latest stable major WordPress version. ([32244](https://github.com/WordPress/gutenberg/pull/32244))
+-   Skip tests that are failing with latest WordPress core. ([32228](https://github.com/WordPress/gutenberg/pull/32228))
+-   components: Add types to Icon. ([32219](https://github.com/WordPress/gutenberg/pull/32219))
+-   components: Remove all `withNext` wrappers. ([32205](https://github.com/WordPress/gutenberg/pull/32205))
+-   Only calculate the compressed size on pull requests when necessary. ([32161](https://github.com/WordPress/gutenberg/pull/32161))
+-   Limit when workflows run on forks. ([32114](https://github.com/WordPress/gutenberg/pull/32114))
+-   Navigation Editor: Move modal state to ManageLocations component. ([32078](https://github.com/WordPress/gutenberg/pull/32078))
+-   Block Navigation: Try using CSS for indentation with known max indent instead of spacer divs. ([32063](https://github.com/WordPress/gutenberg/pull/32063))
+-   Update the appearance of the template details popover. ([32042](https://github.com/WordPress/gutenberg/pull/32042))
+-   Update the title area in the template editor. ([32037](https://github.com/WordPress/gutenberg/pull/32037))
+-   compose: Add types to `useDebounce`. ([32015](https://github.com/WordPress/gutenberg/pull/32015))
+-   Try fixing inserting cover block intermittent failure. ([32014](https://github.com/WordPress/gutenberg/pull/32014))
+-   Rich text: Remove inline display warning. ([32013](https://github.com/WordPress/gutenberg/pull/32013))
+-   Add native block inserter onboarding tooltip. ([32001](https://github.com/WordPress/gutenberg/pull/32001))
+-   Improve parsing and retrieve additional data in REST url-details endpoint. ([31763](https://github.com/WordPress/gutenberg/pull/31763))
+-   Update Modal styling. ([31639](https://github.com/WordPress/gutenberg/pull/31639))
+-   components: Promote Elevation. ([31614](https://github.com/WordPress/gutenberg/pull/31614))
+-   components: Add ZStack. ([31613](https://github.com/WordPress/gutenberg/pull/31613))
+-   Remove title attribute from NavigationItem inside the site-editor. ([30744](https://github.com/WordPress/gutenberg/pull/30744))
+-   Show the label for archives block dropdown. ([30527](https://github.com/WordPress/gutenberg/pull/30527))
+-   Components: Add ItemGroup and Item. ([30097](https://github.com/WordPress/gutenberg/pull/30097))
+-   Mobile - Slash inserter. ([29772](https://github.com/WordPress/gutenberg/pull/29772))
+-   Remove class= wrapper to already wrapped attributes. Issue #29209. ([29214](https://github.com/WordPress/gutenberg/pull/29214))
+-   List Block: Add font family to the list block. ([27510](https://github.com/WordPress/gutenberg/pull/27510))
 
 = 10.7.1 =
 
-
+## Changelog
 
 ### Bug Fixes
 
-- Latest Posts: Declare 'hasPosts' before 'inspectorControls'. ([32160](https://github.com/WordPress/gutenberg/pull/32160))
-- Fix image/cover transform duotone error. ([32006](https://github.com/WordPress/gutenberg/pull/32006))
+-   Latest Posts: Declare 'hasPosts' before 'inspectorControls'. ([32160](https://github.com/WordPress/gutenberg/pull/32160))
+-   Fix image/cover transform duotone error. ([32006](https://github.com/WordPress/gutenberg/pull/32006))
 
 ### Various
 
-- Block Patterns API: Update for core compatibility. ([32240](https://github.com/WordPress/gutenberg/pull/32240))
-- [Patterns]: Prepare GB bundled patterns for core back port. ([32086](https://github.com/WordPress/gutenberg/pull/32086))
-
-
-
+-   Block Patterns API: Update for core compatibility. ([32240](https://github.com/WordPress/gutenberg/pull/32240))
+-   [Patterns]: Prepare GB bundled patterns for core back port. ([32086](https://github.com/WordPress/gutenberg/pull/32086))
 
 = 10.7.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Block Editor:
-    - Standardize block styles cursor on hover. ([31188](https://github.com/WordPress/gutenberg/pull/31188))
-    - Support scripts in iframed editors. ([31873](https://github.com/WordPress/gutenberg/pull/31873))
-- Block Library:
-    - Normalize theme block toolbars. ([31952](https://github.com/WordPress/gutenberg/pull/31952))
-    - Buttons: Use `column-gap` for styling. ([31386](https://github.com/WordPress/gutenberg/pull/31386))
-    - Column: Add color and padding support to individual column block. ([31778](https://github.com/WordPress/gutenberg/pull/31778))
-    - Cover: Allow transforming from group block. ([30890](https://github.com/WordPress/gutenberg/pull/30890))
-    - Media & Text: Add media width control. ([31002](https://github.com/WordPress/gutenberg/pull/31002))
-    - Post Comments: Add basic CSS to the block. ([30382](https://github.com/WordPress/gutenberg/pull/30382))
-    - Post Excerpt: Update `read more` placeholder text. ([30959](https://github.com/WordPress/gutenberg/pull/30959))
-    - Post Featured Image: Change wrapper element to `figure`. ([31595](https://github.com/WordPress/gutenberg/pull/31595))
-    - Query:
-        - Add `layout` and `color` support. ([31833](https://github.com/WordPress/gutenberg/pull/31833))
-        - Update bundled patterns to have `inherit:False`. ([31856](https://github.com/WordPress/gutenberg/pull/31856))
-        - Allow term addition from user case-insensitive input. ([31301](https://github.com/WordPress/gutenberg/pull/31301))
-    - Site Logo:
-        - Add link toggle option. ([31162](https://github.com/WordPress/gutenberg/pull/31162))
-        - Use `custom_logo` theme-mod instead of `site_logo` setting for the site-logo block. ([31994](https://github.com/WordPress/gutenberg/pull/31994))
-    - Site Tagline:
-        - Add margin block support. ([31809](https://github.com/WordPress/gutenberg/pull/31809))
-        - Expand the site tagline block description. ([31426](https://github.com/WordPress/gutenberg/pull/31426))
-    - Site Title:
-        - Add additional text formatting options. ([31734](https://github.com/WordPress/gutenberg/pull/31734))
-        - Add margin block support. ([31728](https://github.com/WordPress/gutenberg/pull/31728))
-    - Social Links: Add some padding to the "click plus to add". ([31927](https://github.com/WordPress/gutenberg/pull/31927))
-- Components
-    - Add Spacer. ([31509](https://github.com/WordPress/gutenberg/pull/31509))
-    - Improve display for multiple action buttons in notices. ([31799](https://github.com/WordPress/gutenberg/pull/31799))
-    - Polish the switcher for horizontal blocks. ([31645](https://github.com/WordPress/gutenberg/pull/31645))
-    - Promote Divider and use readable prop names. ([31556](https://github.com/WordPress/gutenberg/pull/31556))
-    - Promote Grid. ([31559](https://github.com/WordPress/gutenberg/pull/31559))
-    - Promote View. ([31542](https://github.com/WordPress/gutenberg/pull/31542))
-    - Promote VStack and HStack. ([31300](https://github.com/WordPress/gutenberg/pull/31300))
-    - UnitControl: Add support for unit step per unit type. ([30376](https://github.com/WordPress/gutenberg/pull/30376))
-- Design tools:
-    - Add margin block support with configurable sides. ([30608](https://github.com/WordPress/gutenberg/pull/30608))
-    - Add option to disable duotone. ([32002](https://github.com/WordPress/gutenberg/pull/32002))
-    - Add reset button to Layout controls. ([30828](https://github.com/WordPress/gutenberg/pull/30828))
-    - Add server-side support for margins. ([31808](https://github.com/WordPress/gutenberg/pull/31808))
-- Icons: Update icons. ([31533](https://github.com/WordPress/gutenberg/pull/31533))
-- List View:
-    - Display block anchor in List View when set. ([31992](https://github.com/WordPress/gutenberg/pull/31992))
-    - Enable persistent List View in the post editor. ([31047](https://github.com/WordPress/gutenberg/pull/31047))
-- Patterns: Load patterns from wordpress.org API. ([28800](https://github.com/WordPress/gutenberg/pull/28800))
-- Template Editing Mode:
-    - Add a welcome guide to the template editor. ([31330](https://github.com/WordPress/gutenberg/pull/31330)) ([32055](https://github.com/WordPress/gutenberg/pull/32055))
-    - Add a `Delete template` action. ([31678](https://github.com/WordPress/gutenberg/pull/31678))
-- Word count: Adjust to count numbers as words. ([27288](https://github.com/WordPress/gutenberg/pull/27288))
+-   Block Editor:
+    -   Standardize block styles cursor on hover. ([31188](https://github.com/WordPress/gutenberg/pull/31188))
+    -   Support scripts in iframed editors. ([31873](https://github.com/WordPress/gutenberg/pull/31873))
+-   Block Library:
+    -   Normalize theme block toolbars. ([31952](https://github.com/WordPress/gutenberg/pull/31952))
+    -   Buttons: Use `column-gap` for styling. ([31386](https://github.com/WordPress/gutenberg/pull/31386))
+    -   Column: Add color and padding support to individual column block. ([31778](https://github.com/WordPress/gutenberg/pull/31778))
+    -   Cover: Allow transforming from group block. ([30890](https://github.com/WordPress/gutenberg/pull/30890))
+    -   Media & Text: Add media width control. ([31002](https://github.com/WordPress/gutenberg/pull/31002))
+    -   Post Comments: Add basic CSS to the block. ([30382](https://github.com/WordPress/gutenberg/pull/30382))
+    -   Post Excerpt: Update `read more` placeholder text. ([30959](https://github.com/WordPress/gutenberg/pull/30959))
+    -   Post Featured Image: Change wrapper element to `figure`. ([31595](https://github.com/WordPress/gutenberg/pull/31595))
+    -   Query:
+        -   Add `layout` and `color` support. ([31833](https://github.com/WordPress/gutenberg/pull/31833))
+        -   Update bundled patterns to have `inherit:False`. ([31856](https://github.com/WordPress/gutenberg/pull/31856))
+        -   Allow term addition from user case-insensitive input. ([31301](https://github.com/WordPress/gutenberg/pull/31301))
+    -   Site Logo:
+        -   Add link toggle option. ([31162](https://github.com/WordPress/gutenberg/pull/31162))
+        -   Use `custom_logo` theme-mod instead of `site_logo` setting for the site-logo block. ([31994](https://github.com/WordPress/gutenberg/pull/31994))
+    -   Site Tagline:
+        -   Add margin block support. ([31809](https://github.com/WordPress/gutenberg/pull/31809))
+        -   Expand the site tagline block description. ([31426](https://github.com/WordPress/gutenberg/pull/31426))
+    -   Site Title:
+        -   Add additional text formatting options. ([31734](https://github.com/WordPress/gutenberg/pull/31734))
+        -   Add margin block support. ([31728](https://github.com/WordPress/gutenberg/pull/31728))
+    -   Social Links: Add some padding to the "click plus to add". ([31927](https://github.com/WordPress/gutenberg/pull/31927))
+-   Components
+    -   Add Spacer. ([31509](https://github.com/WordPress/gutenberg/pull/31509))
+    -   Improve display for multiple action buttons in notices. ([31799](https://github.com/WordPress/gutenberg/pull/31799))
+    -   Polish the switcher for horizontal blocks. ([31645](https://github.com/WordPress/gutenberg/pull/31645))
+    -   Promote Divider and use readable prop names. ([31556](https://github.com/WordPress/gutenberg/pull/31556))
+    -   Promote Grid. ([31559](https://github.com/WordPress/gutenberg/pull/31559))
+    -   Promote View. ([31542](https://github.com/WordPress/gutenberg/pull/31542))
+    -   Promote VStack and HStack. ([31300](https://github.com/WordPress/gutenberg/pull/31300))
+    -   UnitControl: Add support for unit step per unit type. ([30376](https://github.com/WordPress/gutenberg/pull/30376))
+-   Design tools:
+    -   Add margin block support with configurable sides. ([30608](https://github.com/WordPress/gutenberg/pull/30608))
+    -   Add option to disable duotone. ([32002](https://github.com/WordPress/gutenberg/pull/32002))
+    -   Add reset button to Layout controls. ([30828](https://github.com/WordPress/gutenberg/pull/30828))
+    -   Add server-side support for margins. ([31808](https://github.com/WordPress/gutenberg/pull/31808))
+-   Icons: Update icons. ([31533](https://github.com/WordPress/gutenberg/pull/31533))
+-   List View:
+    -   Display block anchor in List View when set. ([31992](https://github.com/WordPress/gutenberg/pull/31992))
+    -   Enable persistent List View in the post editor. ([31047](https://github.com/WordPress/gutenberg/pull/31047))
+-   Patterns: Load patterns from wordpress.org API. ([28800](https://github.com/WordPress/gutenberg/pull/28800))
+-   Template Editing Mode:
+    -   Add a welcome guide to the template editor. ([31330](https://github.com/WordPress/gutenberg/pull/31330)) ([32055](https://github.com/WordPress/gutenberg/pull/32055))
+    -   Add a `Delete template` action. ([31678](https://github.com/WordPress/gutenberg/pull/31678))
+-   Word count: Adjust to count numbers as words. ([27288](https://github.com/WordPress/gutenberg/pull/27288))
 
 ### New APIs
 
-- Babel Preset Default: Configure @babel/preset-env preset to respect a local Browserslist configuration. ([31898](https://github.com/WordPress/gutenberg/pull/31898))
-- Blocks: Deprecate `registerBlockTypeFromMetadata` in favor of `registerBlockType`. ([32030](https://github.com/WordPress/gutenberg/pull/32030))
-- Global Styles: Rename and stabilize `useEditorFeature` as `useSetting`. ([31587](https://github.com/WordPress/gutenberg/pull/31587))
-- Stacked/unified block toolbar. ([31134](https://github.com/WordPress/gutenberg/pull/31134))
-- Babel Preset Default: Add polyfill for WordPress built from core-js. ([31279](https://github.com/WordPress/gutenberg/pull/31279))
-
-### Bug Fixes
-
-- Block Library:
-    - Cover:
-        - Remove fixed background when previewed in patterns list. ([31640](https://github.com/WordPress/gutenberg/pull/31640))
-        - Show placeholder only if it has no inner blocks. ([31402](https://github.com/WordPress/gutenberg/pull/31402))
-    - Gallery:
-        - Fix focus caption prop for native. ([32029](https://github.com/WordPress/gutenberg/pull/32029))
-        - Fix identical images getting duplicated when moving. ([30555](https://github.com/WordPress/gutenberg/pull/30555))
-    - Image:
-        - Remove figure margins consistently in image blocks. ([31650](https://github.com/WordPress/gutenberg/pull/31650))
-        - Fix cover transform and excessive re-rendering. ([32102](https://github.com/WordPress/gutenberg/pull/32102))
-    - Post Content: Apply the_content filter even if content is empty. ([31997](https://github.com/WordPress/gutenberg/pull/31997))
-    - Post Comments Count: Fix attributes declaration. ([31976](https://github.com/WordPress/gutenberg/pull/31976))
-    - Post Comment Form:
-        - Fix stylesheet dependency. ([31528](https://github.com/WordPress/gutenberg/pull/31528))
-        - Fix to allow post comment button to inherit button & global styles automatically. ([31338](https://github.com/WordPress/gutenberg/pull/31338))
-    - Post Featured Image:
-        - Fix non-interactive placeholder when outside of a post context. ([31663](https://github.com/WordPress/gutenberg/pull/31663))
-        - Fix placeholder regression. ([31709](https://github.com/WordPress/gutenberg/pull/31709))
-        - Fix selection scroll into view. ([31835](https://github.com/WordPress/gutenberg/pull/31835))
-        - Fix image width for wide aligned Post featured image. ([32070](https://github.com/WordPress/gutenberg/pull/32070))
-    - Site Logo:
-        - Fix duplicate `supports` declaration. ([31544](https://github.com/WordPress/gutenberg/pull/31544))
-        - Return nothing if logo is not set. ([31513](https://github.com/WordPress/gutenberg/pull/31513))
-        - Only request media entity when a site logo has been chosen. ([31673](https://github.com/WordPress/gutenberg/pull/31673))
-    - Template Part:
-        - Don't show the currently used template part as an option in the 'replace' flow. ([31720](https://github.com/WordPress/gutenberg/pull/31720))
-        - Fix template part selection searches to use title/area instead of slug/theme. ([31520](https://github.com/WordPress/gutenberg/pull/31520))
-        - Use label and icon per variation when displaying placeholders. ([31721](https://github.com/WordPress/gutenberg/pull/31721))
-- Block Editor:
-    - Clear selection on iframe html element click, fix bottom click redirect. ([31385](https://github.com/WordPress/gutenberg/pull/31385))
-    - Fix block ref when multiple useBlockProps hooks are called. ([31906](https://github.com/WordPress/gutenberg/pull/31906))
-    - Fix moving animation for nested blocks. ([31945](https://github.com/WordPress/gutenberg/pull/31945))
-    - Fix selecting aligned blocks. ([31904](https://github.com/WordPress/gutenberg/pull/31904))
-    - Fix scrolling to the inserted block issue in the iFramed block editor. ([31448](https://github.com/WordPress/gutenberg/pull/31448))
-    - Prevent rendering self also when the wrapper block matches the inserted block. ([31592](https://github.com/WordPress/gutenberg/pull/31592))
-    - Toolbar:
-        - Fix showing toolbar when caret enters formatting (and extract as implementation detail for the block editor). ([31664](https://github.com/WordPress/gutenberg/pull/31664))
-        - Fix toolbar in device preview. ([31600](https://github.com/WordPress/gutenberg/pull/31600))
-- Design tools:
-    - BoxControl:
-        - Filter out unit only values when checking values defined. ([31779](https://github.com/WordPress/gutenberg/pull/31779))
-        - Fix tooltip display for unlinked box control inputs. ([31741](https://github.com/WordPress/gutenberg/pull/31741))
-    - Color picker:
-        - Fixes color picker segmented control rendering and scrolling issues. ([30994](https://github.com/WordPress/gutenberg/pull/30994))
-        - Fix text. ([30039](https://github.com/WordPress/gutenberg/pull/30039))
-    - Duotone:
-        - Fix duotone transform not transferring settings between blocks. ([31801](https://github.com/WordPress/gutenberg/pull/31801))
-        - Fix duotone padding crash. ([31780](https://github.com/WordPress/gutenberg/pull/31780))
-    - Font-family: Fix typo in font-family supports for dynamic blocks. ([31974](https://github.com/WordPress/gutenberg/pull/31974))
-    - Spacing Support:
-        - Properly hide UI for disabled properties. ([31726](https://github.com/WordPress/gutenberg/pull/31726))
-        - Fix custom units for margin. ([31776](https://github.com/WordPress/gutenberg/pull/31776))
-- Inserter: Hide patterns tab if no patterns are available. ([31687](https://github.com/WordPress/gutenberg/pull/31687))
-- Patterns:
-    - Check for allowed blocks recursively in patterns. ([30366](https://github.com/WordPress/gutenberg/pull/30366))
-    - Fix unregister_block_pattern notices. ([32025](https://github.com/WordPress/gutenberg/pull/32025))
-- Post Editor: Fix template name displaying incorrectly. ([32035](https://github.com/WordPress/gutenberg/pull/32035))
-- Server Side Rendering: Re-enable passing post_id query arg (#31786). ([31787](https://github.com/WordPress/gutenberg/pull/31787))
-- Template Editing Mode: Fix wrapper block name for template mode. ([31985](https://github.com/WordPress/gutenberg/pull/31985))
-- Writing flow, multi-selection:
-    - Fix caret placing when the target is out of view. ([31506](https://github.com/WordPress/gutenberg/pull/31506))
-    - Gradually 'select all' layers of nested blocks. ([31859](https://github.com/WordPress/gutenberg/pull/31859))
-- Fix errors caused by commits to WordPress core. ([32176](https://github.com/WordPress/gutenberg/pull/32176)) ([32183](https://github.com/WordPress/gutenberg/pull/32183)) ([32059](https://github.com/WordPress/gutenberg/pull/32059))
-- Components: Fix the list of package dependencies. ([32167](https://github.com/WordPress/gutenberg/pull/32167))
-- Fix issue with customizer title overlapping block toolbar. ([32140](https://github.com/WordPress/gutenberg/pull/32140))
-- Correctly read rawRequest for frontend ESM. ([31917](https://github.com/WordPress/gutenberg/pull/31917))
-- Fix generation of presets classes per block. ([32190](https://github.com/WordPress/gutenberg/pull/32190))
-- Widget Screen:
-    - Fix unsaved changes notification. ([31757](https://github.com/WordPress/gutenberg/pull/31757))
-    - Fix call to undefined __experimentalRegisterExperimentalCoreBlocks. ([32138](https://github.com/WordPress/gutenberg/pull/32138))
+-   Babel Preset Default: Configure @babel/preset-env preset to respect a local Browserslist configuration. ([31898](https://github.com/WordPress/gutenberg/pull/31898))
+-   Blocks: Deprecate `registerBlockTypeFromMetadata` in favor of `registerBlockType`. ([32030](https://github.com/WordPress/gutenberg/pull/32030))
+-   Global Styles: Rename and stabilize `useEditorFeature` as `useSetting`. ([31587](https://github.com/WordPress/gutenberg/pull/31587))
+-   Stacked/unified block toolbar. ([31134](https://github.com/WordPress/gutenberg/pull/31134))
+-   Babel Preset Default: Add polyfill for WordPress built from core-js. ([31279](https://github.com/WordPress/gutenberg/pull/31279))
+
+### Bug Fixes
+
+-   Block Library:
+    -   Cover:
+        -   Remove fixed background when previewed in patterns list. ([31640](https://github.com/WordPress/gutenberg/pull/31640))
+        -   Show placeholder only if it has no inner blocks. ([31402](https://github.com/WordPress/gutenberg/pull/31402))
+    -   Gallery:
+        -   Fix focus caption prop for native. ([32029](https://github.com/WordPress/gutenberg/pull/32029))
+        -   Fix identical images getting duplicated when moving. ([30555](https://github.com/WordPress/gutenberg/pull/30555))
+    -   Image:
+        -   Remove figure margins consistently in image blocks. ([31650](https://github.com/WordPress/gutenberg/pull/31650))
+        -   Fix cover transform and excessive re-rendering. ([32102](https://github.com/WordPress/gutenberg/pull/32102))
+    -   Post Content: Apply the_content filter even if content is empty. ([31997](https://github.com/WordPress/gutenberg/pull/31997))
+    -   Post Comments Count: Fix attributes declaration. ([31976](https://github.com/WordPress/gutenberg/pull/31976))
+    -   Post Comment Form:
+        -   Fix stylesheet dependency. ([31528](https://github.com/WordPress/gutenberg/pull/31528))
+        -   Fix to allow post comment button to inherit button & global styles automatically. ([31338](https://github.com/WordPress/gutenberg/pull/31338))
+    -   Post Featured Image:
+        -   Fix non-interactive placeholder when outside of a post context. ([31663](https://github.com/WordPress/gutenberg/pull/31663))
+        -   Fix placeholder regression. ([31709](https://github.com/WordPress/gutenberg/pull/31709))
+        -   Fix selection scroll into view. ([31835](https://github.com/WordPress/gutenberg/pull/31835))
+        -   Fix image width for wide aligned Post featured image. ([32070](https://github.com/WordPress/gutenberg/pull/32070))
+    -   Site Logo:
+        -   Fix duplicate `supports` declaration. ([31544](https://github.com/WordPress/gutenberg/pull/31544))
+        -   Return nothing if logo is not set. ([31513](https://github.com/WordPress/gutenberg/pull/31513))
+        -   Only request media entity when a site logo has been chosen. ([31673](https://github.com/WordPress/gutenberg/pull/31673))
+    -   Template Part:
+        -   Don't show the currently used template part as an option in the 'replace' flow. ([31720](https://github.com/WordPress/gutenberg/pull/31720))
+        -   Fix template part selection searches to use title/area instead of slug/theme. ([31520](https://github.com/WordPress/gutenberg/pull/31520))
+        -   Use label and icon per variation when displaying placeholders. ([31721](https://github.com/WordPress/gutenberg/pull/31721))
+-   Block Editor:
+    -   Clear selection on iframe html element click, fix bottom click redirect. ([31385](https://github.com/WordPress/gutenberg/pull/31385))
+    -   Fix block ref when multiple useBlockProps hooks are called. ([31906](https://github.com/WordPress/gutenberg/pull/31906))
+    -   Fix moving animation for nested blocks. ([31945](https://github.com/WordPress/gutenberg/pull/31945))
+    -   Fix selecting aligned blocks. ([31904](https://github.com/WordPress/gutenberg/pull/31904))
+    -   Fix scrolling to the inserted block issue in the iFramed block editor. ([31448](https://github.com/WordPress/gutenberg/pull/31448))
+    -   Prevent rendering self also when the wrapper block matches the inserted block. ([31592](https://github.com/WordPress/gutenberg/pull/31592))
+    -   Toolbar:
+        -   Fix showing toolbar when caret enters formatting (and extract as implementation detail for the block editor). ([31664](https://github.com/WordPress/gutenberg/pull/31664))
+        -   Fix toolbar in device preview. ([31600](https://github.com/WordPress/gutenberg/pull/31600))
+-   Design tools:
+    -   BoxControl:
+        -   Filter out unit only values when checking values defined. ([31779](https://github.com/WordPress/gutenberg/pull/31779))
+        -   Fix tooltip display for unlinked box control inputs. ([31741](https://github.com/WordPress/gutenberg/pull/31741))
+    -   Color picker:
+        -   Fixes color picker segmented control rendering and scrolling issues. ([30994](https://github.com/WordPress/gutenberg/pull/30994))
+        -   Fix text. ([30039](https://github.com/WordPress/gutenberg/pull/30039))
+    -   Duotone:
+        -   Fix duotone transform not transferring settings between blocks. ([31801](https://github.com/WordPress/gutenberg/pull/31801))
+        -   Fix duotone padding crash. ([31780](https://github.com/WordPress/gutenberg/pull/31780))
+    -   Font-family: Fix typo in font-family supports for dynamic blocks. ([31974](https://github.com/WordPress/gutenberg/pull/31974))
+    -   Spacing Support:
+        -   Properly hide UI for disabled properties. ([31726](https://github.com/WordPress/gutenberg/pull/31726))
+        -   Fix custom units for margin. ([31776](https://github.com/WordPress/gutenberg/pull/31776))
+-   Inserter: Hide patterns tab if no patterns are available. ([31687](https://github.com/WordPress/gutenberg/pull/31687))
+-   Patterns:
+    -   Check for allowed blocks recursively in patterns. ([30366](https://github.com/WordPress/gutenberg/pull/30366))
+    -   Fix unregister_block_pattern notices. ([32025](https://github.com/WordPress/gutenberg/pull/32025))
+-   Post Editor: Fix template name displaying incorrectly. ([32035](https://github.com/WordPress/gutenberg/pull/32035))
+-   Server Side Rendering: Re-enable passing post_id query arg (#31786). ([31787](https://github.com/WordPress/gutenberg/pull/31787))
+-   Template Editing Mode: Fix wrapper block name for template mode. ([31985](https://github.com/WordPress/gutenberg/pull/31985))
+-   Writing flow, multi-selection:
+    -   Fix caret placing when the target is out of view. ([31506](https://github.com/WordPress/gutenberg/pull/31506))
+    -   Gradually 'select all' layers of nested blocks. ([31859](https://github.com/WordPress/gutenberg/pull/31859))
+-   Fix errors caused by commits to WordPress core. ([32176](https://github.com/WordPress/gutenberg/pull/32176)) ([32183](https://github.com/WordPress/gutenberg/pull/32183)) ([32059](https://github.com/WordPress/gutenberg/pull/32059))
+-   Components: Fix the list of package dependencies. ([32167](https://github.com/WordPress/gutenberg/pull/32167))
+-   Fix issue with customizer title overlapping block toolbar. ([32140](https://github.com/WordPress/gutenberg/pull/32140))
+-   Correctly read rawRequest for frontend ESM. ([31917](https://github.com/WordPress/gutenberg/pull/31917))
+-   Fix generation of presets classes per block. ([32190](https://github.com/WordPress/gutenberg/pull/32190))
+-   Widget Screen:
+    -   Fix unsaved changes notification. ([31757](https://github.com/WordPress/gutenberg/pull/31757))
+    -   Fix call to undefined \_\_experimentalRegisterExperimentalCoreBlocks. ([32138](https://github.com/WordPress/gutenberg/pull/32138))
 
 ### Performance
 
-- Block editor styles: Memoize transform. ([31553](https://github.com/WordPress/gutenberg/pull/31553))
-- Block editor async mode: Enable only for blocks out of view. ([30995](https://github.com/WordPress/gutenberg/pull/30995))
-- Improve performance of term search. ([31703](https://github.com/WordPress/gutenberg/pull/31703))
-- Blocks package: Memoize getBlockVariations selector. ([32120](https://github.com/WordPress/gutenberg/pull/32120))
+-   Block editor styles: Memoize transform. ([31553](https://github.com/WordPress/gutenberg/pull/31553))
+-   Block editor async mode: Enable only for blocks out of view. ([30995](https://github.com/WordPress/gutenberg/pull/30995))
+-   Improve performance of term search. ([31703](https://github.com/WordPress/gutenberg/pull/31703))
+-   Blocks package: Memoize getBlockVariations selector. ([32120](https://github.com/WordPress/gutenberg/pull/32120))
 
 ### Experiments
 
-- Block Library: Hide the PostAuthor block behind the Gutenberg experimental flag. ([31983](https://github.com/WordPress/gutenberg/pull/31983))
-- Block-based Widgets:
-    - API:
-        - Improve `get_merged_data` API so it requires less knowledge from the consumer. ([31552](https://github.com/WordPress/gutenberg/pull/31552))
-    - Customizer:
-        - Add 'more' menu. ([31970](https://github.com/WordPress/gutenberg/pull/31970))
-        - Add undo redo to Widgets Customizer. ([31653](https://github.com/WordPress/gutenberg/pull/31653))
-        - Add Welcome messaging. ([31968](https://github.com/WordPress/gutenberg/pull/31968))
-        - Clear selected block when focusing on element outside the editor. ([31530](https://github.com/WordPress/gutenberg/pull/31530))
-        - Fix removing legacy widget not working in customizer. ([31535](https://github.com/WordPress/gutenberg/pull/31535))
-        - Implement mobile responsive block toolbar. ([31589](https://github.com/WordPress/gutenberg/pull/31589))
-        - Remove Widgets Customizer experimental flag. ([31876](https://github.com/WordPress/gutenberg/pull/31876))
-    - Widgets Editor:
-        - Add default notices support. ([31578](https://github.com/WordPress/gutenberg/pull/31578))
-        - Add more menu. ([31926](https://github.com/WordPress/gutenberg/pull/31926))
-        - Add Welcome Guide. ([31925](https://github.com/WordPress/gutenberg/pull/31925))
-        - Remove widget screen empty link in admin. ([31408](https://github.com/WordPress/gutenberg/pull/31408))
-        - Update toolbar and notice positioning. ([31582](https://github.com/WordPress/gutenberg/pull/31582))
-- Navigation Editor and Block:
-    - Add home link block. ([30926](https://github.com/WordPress/gutenberg/pull/30926))
-    - API:
-        - Add locations to the menu response. ([31656](https://github.com/WordPress/gutenberg/pull/31656))
-        - Change default to 100 menu items returned. ([21243](https://github.com/WordPress/gutenberg/pull/21243))
-    - Allow space between on page list. ([29771](https://github.com/WordPress/gutenberg/pull/29771))
-    - Bring implementations of convert nav menu items to blocks back into sync. ([31602](https://github.com/WordPress/gutenberg/pull/31602))
-    - Editor:
-        - "Add new pages" use menu entity. ([31643](https://github.com/WordPress/gutenberg/pull/31643))
-        - Add padding for navigation screen. ([31583](https://github.com/WordPress/gutenberg/pull/31583))
-        - Clear 'stub' navigation post edits on save. ([31735](https://github.com/WordPress/gutenberg/pull/31735))
-        - Fix menu location assignment. ([31594](https://github.com/WordPress/gutenberg/pull/31594))
-        - Fix editor margin. ([31493](https://github.com/WordPress/gutenberg/pull/31493))
-        - On mobile viewports, reveal the block inspector when clicking the menu name button. ([31220](https://github.com/WordPress/gutenberg/pull/31220))
-        - Update sidebar. ([31821](https://github.com/WordPress/gutenberg/pull/31821))
-        - Warn the user about unsaved changes. ([31197](https://github.com/WordPress/gutenberg/pull/31197))
-    - Enable justification for burger menu. ([31877](https://github.com/WordPress/gutenberg/pull/31877))
-    - Extract Navigation Block data fetching and management to hook(s). ([31825](https://github.com/WordPress/gutenberg/pull/31825))
-    - Fix nav block hover z index. ([31929](https://github.com/WordPress/gutenberg/pull/31929))
-    - Fix nav placeholder colors and height. ([31875](https://github.com/WordPress/gutenberg/pull/31875))
-    - Improve the navigation block setup state / placeholder. ([31371](https://github.com/WordPress/gutenberg/pull/31371))
-    - Introduce `useMenuEntityProp` hook. ([31132](https://github.com/WordPress/gutenberg/pull/31132))
-    - Normalize converting nav menu items to blocks between Editor and Block. ([31606](https://github.com/WordPress/gutenberg/pull/31606))
-    - Responsive Navigation. ([30047](https://github.com/WordPress/gutenberg/pull/30047))
-    - Submenus shouldn't take space unless they're actually open. ([31881](https://github.com/WordPress/gutenberg/pull/31881))
-- Global Styles
-    - Block Supports: Allow skipping serialization of typography attributes. ([30880](https://github.com/WordPress/gutenberg/pull/30880))
-    - Fix condition for global styles on mobile. ([31844](https://github.com/WordPress/gutenberg/pull/31844))
-    - Fix global styles settings retrieval for REST. ([31534](https://github.com/WordPress/gutenberg/pull/31534))
-    - Make core color classes and custom properties always available. ([31669](https://github.com/WordPress/gutenberg/pull/31669))
-    - Remove color.link from valid styles and alphabetize the rest. ([31516](https://github.com/WordPress/gutenberg/pull/31516))
-    - Return consolidated global styles in REST Request. ([31762](https://github.com/WordPress/gutenberg/pull/31762))
-    - Use elements mechanism for link color instead of a CSS variable. ([31524](https://github.com/WordPress/gutenberg/pull/31524))
-    - Use mobile context in settings request & global styles. ([31819](https://github.com/WordPress/gutenberg/pull/31819))
-    - Use wp_theme taxonomy for wp_global_styles cpt. ([31436](https://github.com/WordPress/gutenberg/pull/31436))
-    - Theme.json:
-        - Make the `theme.json` examples copy-pasteable. ([32040](https://github.com/WordPress/gutenberg/pull/32040))
-        - Replace hardcoded `CSS_UNITS` and inherit units from `theme.json`. ([31822](https://github.com/WordPress/gutenberg/pull/31822))
-- Full Site Editing:
-    - Template Loader: Make templates arg required. ([31671](https://github.com/WordPress/gutenberg/pull/31671))
-    - Simplify template loader logic. ([31604](https://github.com/WordPress/gutenberg/pull/31604))
+-   Block Library: Hide the PostAuthor block behind the Gutenberg experimental flag. ([31983](https://github.com/WordPress/gutenberg/pull/31983))
+-   Block-based Widgets:
+    -   API:
+        -   Improve `get_merged_data` API so it requires less knowledge from the consumer. ([31552](https://github.com/WordPress/gutenberg/pull/31552))
+    -   Customizer:
+        -   Add 'more' menu. ([31970](https://github.com/WordPress/gutenberg/pull/31970))
+        -   Add undo redo to Widgets Customizer. ([31653](https://github.com/WordPress/gutenberg/pull/31653))
+        -   Add Welcome messaging. ([31968](https://github.com/WordPress/gutenberg/pull/31968))
+        -   Clear selected block when focusing on element outside the editor. ([31530](https://github.com/WordPress/gutenberg/pull/31530))
+        -   Fix removing legacy widget not working in customizer. ([31535](https://github.com/WordPress/gutenberg/pull/31535))
+        -   Implement mobile responsive block toolbar. ([31589](https://github.com/WordPress/gutenberg/pull/31589))
+        -   Remove Widgets Customizer experimental flag. ([31876](https://github.com/WordPress/gutenberg/pull/31876))
+    -   Widgets Editor:
+        -   Add default notices support. ([31578](https://github.com/WordPress/gutenberg/pull/31578))
+        -   Add more menu. ([31926](https://github.com/WordPress/gutenberg/pull/31926))
+        -   Add Welcome Guide. ([31925](https://github.com/WordPress/gutenberg/pull/31925))
+        -   Remove widget screen empty link in admin. ([31408](https://github.com/WordPress/gutenberg/pull/31408))
+        -   Update toolbar and notice positioning. ([31582](https://github.com/WordPress/gutenberg/pull/31582))
+-   Navigation Editor and Block:
+    -   Add home link block. ([30926](https://github.com/WordPress/gutenberg/pull/30926))
+    -   API:
+        -   Add locations to the menu response. ([31656](https://github.com/WordPress/gutenberg/pull/31656))
+        -   Change default to 100 menu items returned. ([21243](https://github.com/WordPress/gutenberg/pull/21243))
+    -   Allow space between on page list. ([29771](https://github.com/WordPress/gutenberg/pull/29771))
+    -   Bring implementations of convert nav menu items to blocks back into sync. ([31602](https://github.com/WordPress/gutenberg/pull/31602))
+    -   Editor:
+        -   "Add new pages" use menu entity. ([31643](https://github.com/WordPress/gutenberg/pull/31643))
+        -   Add padding for navigation screen. ([31583](https://github.com/WordPress/gutenberg/pull/31583))
+        -   Clear 'stub' navigation post edits on save. ([31735](https://github.com/WordPress/gutenberg/pull/31735))
+        -   Fix menu location assignment. ([31594](https://github.com/WordPress/gutenberg/pull/31594))
+        -   Fix editor margin. ([31493](https://github.com/WordPress/gutenberg/pull/31493))
+        -   On mobile viewports, reveal the block inspector when clicking the menu name button. ([31220](https://github.com/WordPress/gutenberg/pull/31220))
+        -   Update sidebar. ([31821](https://github.com/WordPress/gutenberg/pull/31821))
+        -   Warn the user about unsaved changes. ([31197](https://github.com/WordPress/gutenberg/pull/31197))
+    -   Enable justification for burger menu. ([31877](https://github.com/WordPress/gutenberg/pull/31877))
+    -   Extract Navigation Block data fetching and management to hook(s). ([31825](https://github.com/WordPress/gutenberg/pull/31825))
+    -   Fix nav block hover z index. ([31929](https://github.com/WordPress/gutenberg/pull/31929))
+    -   Fix nav placeholder colors and height. ([31875](https://github.com/WordPress/gutenberg/pull/31875))
+    -   Improve the navigation block setup state / placeholder. ([31371](https://github.com/WordPress/gutenberg/pull/31371))
+    -   Introduce `useMenuEntityProp` hook. ([31132](https://github.com/WordPress/gutenberg/pull/31132))
+    -   Normalize converting nav menu items to blocks between Editor and Block. ([31606](https://github.com/WordPress/gutenberg/pull/31606))
+    -   Responsive Navigation. ([30047](https://github.com/WordPress/gutenberg/pull/30047))
+    -   Submenus shouldn't take space unless they're actually open. ([31881](https://github.com/WordPress/gutenberg/pull/31881))
+-   Global Styles
+    -   Block Supports: Allow skipping serialization of typography attributes. ([30880](https://github.com/WordPress/gutenberg/pull/30880))
+    -   Fix condition for global styles on mobile. ([31844](https://github.com/WordPress/gutenberg/pull/31844))
+    -   Fix global styles settings retrieval for REST. ([31534](https://github.com/WordPress/gutenberg/pull/31534))
+    -   Make core color classes and custom properties always available. ([31669](https://github.com/WordPress/gutenberg/pull/31669))
+    -   Remove color.link from valid styles and alphabetize the rest. ([31516](https://github.com/WordPress/gutenberg/pull/31516))
+    -   Return consolidated global styles in REST Request. ([31762](https://github.com/WordPress/gutenberg/pull/31762))
+    -   Use elements mechanism for link color instead of a CSS variable. ([31524](https://github.com/WordPress/gutenberg/pull/31524))
+    -   Use mobile context in settings request & global styles. ([31819](https://github.com/WordPress/gutenberg/pull/31819))
+    -   Use wp_theme taxonomy for wp_global_styles cpt. ([31436](https://github.com/WordPress/gutenberg/pull/31436))
+    -   Theme.json:
+        -   Make the `theme.json` examples copy-pasteable. ([32040](https://github.com/WordPress/gutenberg/pull/32040))
+        -   Replace hardcoded `CSS_UNITS` and inherit units from `theme.json`. ([31822](https://github.com/WordPress/gutenberg/pull/31822))
+-   Full Site Editing:
+    -   Template Loader: Make templates arg required. ([31671](https://github.com/WordPress/gutenberg/pull/31671))
+    -   Simplify template loader logic. ([31604](https://github.com/WordPress/gutenberg/pull/31604))
 
 ### Documentation
 
-- Handbook:
-    - Add dedicated Block Styles page under Block API directory. ([31055](https://github.com/WordPress/gutenberg/pull/31055))
-    - Add info on how to connect to the WP ENV MySQL database. ([31975](https://github.com/WordPress/gutenberg/pull/31975))
-    - Capitalize GitHub properly in contributors README. ([31549](https://github.com/WordPress/gutenberg/pull/31549))
-    - Clarify 'Applying styles from a stylesheet' how-to guide. ([31824](https://github.com/WordPress/gutenberg/pull/31824))
-    - First pass at the documentation for the Widgets Block Editor. ([31577](https://github.com/WordPress/gutenberg/pull/31577))
-    - Fix link to ESNext in callout. ([31512](https://github.com/WordPress/gutenberg/pull/31512))
-    - Update Glossary with more FSE terminology. ([31525](https://github.com/WordPress/gutenberg/pull/31525))
-- Packages:
-    - Add required “directory” prop to package.json template in packages documentation. ([31570](https://github.com/WordPress/gutenberg/pull/31570))
-    - Fix typo: "packages" -> "package". ([32036](https://github.com/WordPress/gutenberg/pull/32036))
-    - Improve packages documentation - document root package json and public API knowledge. ([31598](https://github.com/WordPress/gutenberg/pull/31598))
-    - Remove duplicate 1.52.0 changelog entry. ([31659](https://github.com/WordPress/gutenberg/pull/31659))
-    - Scripts: Fix the CHANGELOG for `@wordpress/scripts` package. ([31532](https://github.com/WordPress/gutenberg/pull/31532))
-    - Typo in edit-navigation layout translators note. ([31541](https://github.com/WordPress/gutenberg/pull/31541))
+-   Handbook:
+    -   Add dedicated Block Styles page under Block API directory. ([31055](https://github.com/WordPress/gutenberg/pull/31055))
+    -   Add info on how to connect to the WP ENV MySQL database. ([31975](https://github.com/WordPress/gutenberg/pull/31975))
+    -   Capitalize GitHub properly in contributors README. ([31549](https://github.com/WordPress/gutenberg/pull/31549))
+    -   Clarify 'Applying styles from a stylesheet' how-to guide. ([31824](https://github.com/WordPress/gutenberg/pull/31824))
+    -   First pass at the documentation for the Widgets Block Editor. ([31577](https://github.com/WordPress/gutenberg/pull/31577))
+    -   Fix link to ESNext in callout. ([31512](https://github.com/WordPress/gutenberg/pull/31512))
+    -   Update Glossary with more FSE terminology. ([31525](https://github.com/WordPress/gutenberg/pull/31525))
+-   Packages:
+    -   Add required “directory” prop to package.json template in packages documentation. ([31570](https://github.com/WordPress/gutenberg/pull/31570))
+    -   Fix typo: "packages" -> "package". ([32036](https://github.com/WordPress/gutenberg/pull/32036))
+    -   Improve packages documentation - document root package json and public API knowledge. ([31598](https://github.com/WordPress/gutenberg/pull/31598))
+    -   Remove duplicate 1.52.0 changelog entry. ([31659](https://github.com/WordPress/gutenberg/pull/31659))
+    -   Scripts: Fix the CHANGELOG for `@wordpress/scripts` package. ([31532](https://github.com/WordPress/gutenberg/pull/31532))
+    -   Typo in edit-navigation layout translators note. ([31541](https://github.com/WordPress/gutenberg/pull/31541))
 
 ### Code Quality
 
-- Block editor:
-    - Block popover: Move scroll handling to block tools. ([31611](https://github.com/WordPress/gutenberg/pull/31611))
-    - Log an error if styles are loaded through the compatibility layer. ([31870](https://github.com/WordPress/gutenberg/pull/31870))
-- Block Library:
-    - Post Comments: Make CSS less specific. ([31711](https://github.com/WordPress/gutenberg/pull/31711))
-    - Image/Gallery: Remove use of unstableOnFocus. ([31796](https://github.com/WordPress/gutenberg/pull/31796))
-- Linting:
-    - Fix PHP lint issues. ([32039](https://github.com/WordPress/gutenberg/pull/32039))
-    - Fix PHPCS warning for alignment. ([31931](https://github.com/WordPress/gutenberg/pull/31931))
-    - Fix lint issues. ([31790](https://github.com/WordPress/gutenberg/pull/31790))
-    - Ignore data-no-store-string-literals rule for native files. ([31936](https://github.com/WordPress/gutenberg/pull/31936))
-- Components:
-    - Add ToolbarDropdownMenu to render dropdown menus properly inside toolbars. ([31460](https://github.com/WordPress/gutenberg/pull/31460))
-    - Don't pass down index through context. ([31852](https://github.com/WordPress/gutenberg/pull/31852))
-    - Remove `color()` utility function, use values directly. ([31661](https://github.com/WordPress/gutenberg/pull/31661))
-    - Remove `config()` utility function, use values directly. ([31646](https://github.com/WordPress/gutenberg/pull/31646))
-- Compose:
-    - Add types to withInstanceId and corresponding hook. ([31341](https://github.com/WordPress/gutenberg/pull/31341))
-    - Add types useConstrainedTabbing. ([31548](https://github.com/WordPress/gutenberg/pull/31548))
-    - Add types useAsyncList. ([31523](https://github.com/WordPress/gutenberg/pull/31523))
-- Docgen:
-    - Replace assertions for `getIntermediateRepresentation` unit tests with snapshots. ([31547](https://github.com/WordPress/gutenberg/pull/31547))
-    - Split `getIntermediateRepresentation` unit tests in smaller tests. ([31468](https://github.com/WordPress/gutenberg/pull/31468))
-- Inserter: Mark the inserter slot as unstable. ([31417](https://github.com/WordPress/gutenberg/pull/31417))
-- Multi-select:
-    - Use ref callback for focus out, merge native selection hooks. ([31618](https://github.com/WordPress/gutenberg/pull/31618))
-    - Use writing flow container for focus. ([31572](https://github.com/WordPress/gutenberg/pull/31572))
-- Rich text:
-    - Build in isSelected check for children. ([31802](https://github.com/WordPress/gutenberg/pull/31802))
-    - Consolidate applying from props. ([31635](https://github.com/WordPress/gutenberg/pull/31635))
-    - Each hook should create its own ref. ([31477](https://github.com/WordPress/gutenberg/pull/31477))
-    - Extract implementation-specific undo handling of automatic changes. ([31676](https://github.com/WordPress/gutenberg/pull/31676))
-    - Extract internal delete handling. ([31637](https://github.com/WordPress/gutenberg/pull/31637))
-    - Extract persistent change marking. ([31760](https://github.com/WordPress/gutenberg/pull/31760))
-    - Extract splitValue to separate file. ([31803](https://github.com/WordPress/gutenberg/pull/31803))
-    - Extract input and selection. ([31631](https://github.com/WordPress/gutenberg/pull/31631))
-    - Extract indent list item on space. ([31628](https://github.com/WordPress/gutenberg/pull/31628))
-    - Extract select object. ([31627](https://github.com/WordPress/gutenberg/pull/31627))
-    - Extract paste handler. ([31619](https://github.com/WordPress/gutenberg/pull/31619))
-    - Fix props on DOM element warnings. ([31883](https://github.com/WordPress/gutenberg/pull/31883))
-    - Move autocomplete key handler to ref callback. ([31770](https://github.com/WordPress/gutenberg/pull/31770))
-    - Move implementation specific attributes. ([31674](https://github.com/WordPress/gutenberg/pull/31674))
-    - Move implementation specific delete and enter handling. ([31644](https://github.com/WordPress/gutenberg/pull/31644))
-    - Remove avoiding setting selection on mount. ([31788](https://github.com/WordPress/gutenberg/pull/31788))
-    - Remove dependency on block client ID. ([31752](https://github.com/WordPress/gutenberg/pull/31752))
-    - Remove duplicate active formats state. ([31771](https://github.com/WordPress/gutenberg/pull/31771))
-    - Remove old broken format prop. ([31767](https://github.com/WordPress/gutenberg/pull/31767))
-    - Remove tag name dependency. ([31679](https://github.com/WordPress/gutenberg/pull/31679))
-    - Simplify with hooks. ([31718](https://github.com/WordPress/gutenberg/pull/31718))
-- Rename `construct_wp_query_args` to `build_query_vars_from_query_block`. ([32041](https://github.com/WordPress/gutenberg/pull/32041))
-- Theme.json:
-    - Remove unused code. ([31666](https://github.com/WordPress/gutenberg/pull/31666))
-    - Remove declarations so API has coherence. ([31596](https://github.com/WordPress/gutenberg/pull/31596))
-    - Remove: Declarations parameter from compute_style_properties. ([31573](https://github.com/WordPress/gutenberg/pull/31573))
-- Writing flow:
-    - Extract and simplify "select all". ([31855](https://github.com/WordPress/gutenberg/pull/31855))
-    - Extract arrow nav. ([31851](https://github.com/WordPress/gutenberg/pull/31851))
-    - Extract tab behavior to hook. ([31834](https://github.com/WordPress/gutenberg/pull/31834))
-- REST API: Use batch endpoint included in Core. ([32174](https://github.com/WordPress/gutenberg/pull/32174))
-- Prepare for adding the Widgets block editor to Core. ([32136](https://github.com/WordPress/gutenberg/pull/32136))
-- Remove `gutenberg` domain from core blocks. ([32152](https://github.com/WordPress/gutenberg/pull/32152))
-- Remove filter_var from blocks. ([32046](https://github.com/WordPress/gutenberg/pull/32046))
-- Plugin: Update block editor settings to work with context. ([32159](https://github.com/WordPress/gutenberg/pull/32159))
+-   Block editor:
+    -   Block popover: Move scroll handling to block tools. ([31611](https://github.com/WordPress/gutenberg/pull/31611))
+    -   Log an error if styles are loaded through the compatibility layer. ([31870](https://github.com/WordPress/gutenberg/pull/31870))
+-   Block Library:
+    -   Post Comments: Make CSS less specific. ([31711](https://github.com/WordPress/gutenberg/pull/31711))
+    -   Image/Gallery: Remove use of unstableOnFocus. ([31796](https://github.com/WordPress/gutenberg/pull/31796))
+-   Linting:
+    -   Fix PHP lint issues. ([32039](https://github.com/WordPress/gutenberg/pull/32039))
+    -   Fix PHPCS warning for alignment. ([31931](https://github.com/WordPress/gutenberg/pull/31931))
+    -   Fix lint issues. ([31790](https://github.com/WordPress/gutenberg/pull/31790))
+    -   Ignore data-no-store-string-literals rule for native files. ([31936](https://github.com/WordPress/gutenberg/pull/31936))
+-   Components:
+    -   Add ToolbarDropdownMenu to render dropdown menus properly inside toolbars. ([31460](https://github.com/WordPress/gutenberg/pull/31460))
+    -   Don't pass down index through context. ([31852](https://github.com/WordPress/gutenberg/pull/31852))
+    -   Remove `color()` utility function, use values directly. ([31661](https://github.com/WordPress/gutenberg/pull/31661))
+    -   Remove `config()` utility function, use values directly. ([31646](https://github.com/WordPress/gutenberg/pull/31646))
+-   Compose:
+    -   Add types to withInstanceId and corresponding hook. ([31341](https://github.com/WordPress/gutenberg/pull/31341))
+    -   Add types useConstrainedTabbing. ([31548](https://github.com/WordPress/gutenberg/pull/31548))
+    -   Add types useAsyncList. ([31523](https://github.com/WordPress/gutenberg/pull/31523))
+-   Docgen:
+    -   Replace assertions for `getIntermediateRepresentation` unit tests with snapshots. ([31547](https://github.com/WordPress/gutenberg/pull/31547))
+    -   Split `getIntermediateRepresentation` unit tests in smaller tests. ([31468](https://github.com/WordPress/gutenberg/pull/31468))
+-   Inserter: Mark the inserter slot as unstable. ([31417](https://github.com/WordPress/gutenberg/pull/31417))
+-   Multi-select:
+    -   Use ref callback for focus out, merge native selection hooks. ([31618](https://github.com/WordPress/gutenberg/pull/31618))
+    -   Use writing flow container for focus. ([31572](https://github.com/WordPress/gutenberg/pull/31572))
+-   Rich text:
+    -   Build in isSelected check for children. ([31802](https://github.com/WordPress/gutenberg/pull/31802))
+    -   Consolidate applying from props. ([31635](https://github.com/WordPress/gutenberg/pull/31635))
+    -   Each hook should create its own ref. ([31477](https://github.com/WordPress/gutenberg/pull/31477))
+    -   Extract implementation-specific undo handling of automatic changes. ([31676](https://github.com/WordPress/gutenberg/pull/31676))
+    -   Extract internal delete handling. ([31637](https://github.com/WordPress/gutenberg/pull/31637))
+    -   Extract persistent change marking. ([31760](https://github.com/WordPress/gutenberg/pull/31760))
+    -   Extract splitValue to separate file. ([31803](https://github.com/WordPress/gutenberg/pull/31803))
+    -   Extract input and selection. ([31631](https://github.com/WordPress/gutenberg/pull/31631))
+    -   Extract indent list item on space. ([31628](https://github.com/WordPress/gutenberg/pull/31628))
+    -   Extract select object. ([31627](https://github.com/WordPress/gutenberg/pull/31627))
+    -   Extract paste handler. ([31619](https://github.com/WordPress/gutenberg/pull/31619))
+    -   Fix props on DOM element warnings. ([31883](https://github.com/WordPress/gutenberg/pull/31883))
+    -   Move autocomplete key handler to ref callback. ([31770](https://github.com/WordPress/gutenberg/pull/31770))
+    -   Move implementation specific attributes. ([31674](https://github.com/WordPress/gutenberg/pull/31674))
+    -   Move implementation specific delete and enter handling. ([31644](https://github.com/WordPress/gutenberg/pull/31644))
+    -   Remove avoiding setting selection on mount. ([31788](https://github.com/WordPress/gutenberg/pull/31788))
+    -   Remove dependency on block client ID. ([31752](https://github.com/WordPress/gutenberg/pull/31752))
+    -   Remove duplicate active formats state. ([31771](https://github.com/WordPress/gutenberg/pull/31771))
+    -   Remove old broken format prop. ([31767](https://github.com/WordPress/gutenberg/pull/31767))
+    -   Remove tag name dependency. ([31679](https://github.com/WordPress/gutenberg/pull/31679))
+    -   Simplify with hooks. ([31718](https://github.com/WordPress/gutenberg/pull/31718))
+-   Rename `construct_wp_query_args` to `build_query_vars_from_query_block`. ([32041](https://github.com/WordPress/gutenberg/pull/32041))
+-   Theme.json:
+    -   Remove unused code. ([31666](https://github.com/WordPress/gutenberg/pull/31666))
+    -   Remove declarations so API has coherence. ([31596](https://github.com/WordPress/gutenberg/pull/31596))
+    -   Remove: Declarations parameter from compute_style_properties. ([31573](https://github.com/WordPress/gutenberg/pull/31573))
+-   Writing flow:
+    -   Extract and simplify "select all". ([31855](https://github.com/WordPress/gutenberg/pull/31855))
+    -   Extract arrow nav. ([31851](https://github.com/WordPress/gutenberg/pull/31851))
+    -   Extract tab behavior to hook. ([31834](https://github.com/WordPress/gutenberg/pull/31834))
+-   REST API: Use batch endpoint included in Core. ([32174](https://github.com/WordPress/gutenberg/pull/32174))
+-   Prepare for adding the Widgets block editor to Core. ([32136](https://github.com/WordPress/gutenberg/pull/32136))
+-   Remove `gutenberg` domain from core blocks. ([32152](https://github.com/WordPress/gutenberg/pull/32152))
+-   Remove filter_var from blocks. ([32046](https://github.com/WordPress/gutenberg/pull/32046))
+-   Plugin: Update block editor settings to work with context. ([32159](https://github.com/WordPress/gutenberg/pull/32159))
 
 ### Tools
 
-- End-to-end tests:
-    - Add template loader unit tests. ([31498](https://github.com/WordPress/gutenberg/pull/31498))
-    - Fix end-to-end test inserting cover block. ([31866](https://github.com/WordPress/gutenberg/pull/31866))
-    - Fix flaky change detection tests causing intermittent failures. ([31861](https://github.com/WordPress/gutenberg/pull/31861))
-    - Fix intermittent embeds failure. ([31860](https://github.com/WordPress/gutenberg/pull/31860))
-    - Fix intermittent failure of rich text end-to-end test. ([31864](https://github.com/WordPress/gutenberg/pull/31864))
-    - Increase test coverage for pattern transforms. ([31689](https://github.com/WordPress/gutenberg/pull/31689))
-    - Navigation: Add unit tests for onChange handler and fix cases around custom links tags and post-format. ([31259](https://github.com/WordPress/gutenberg/pull/31259))
-    - Remove i18n filters performance test. ([32028](https://github.com/WordPress/gutenberg/pull/32028))
-    - Skip unstable end-to-end tests. ([32031](https://github.com/WordPress/gutenberg/pull/32031))
-    - Try stabilizing customize widgets end-to-end tests. ([32023](https://github.com/WordPress/gutenberg/pull/32023))
-    - Update skip failing template mode end to end test. ([32017](https://github.com/WordPress/gutenberg/pull/32017))
-    - Update tests for changes in core logic. ([31982](https://github.com/WordPress/gutenberg/pull/31982))
-- Gutenberg plugin: Update compatibility layer for loading separate core block assets. ([31894](https://github.com/WordPress/gutenberg/pull/31894))
-- Workflow:
-    - Replace the Cancel workflow with native GitHub Action functionality. ([32016](https://github.com/WordPress/gutenberg/pull/32016))
-    - Remove Custom Properties PostCSS plugin. ([31715](https://github.com/WordPress/gutenberg/pull/31715))
-
-
-
+-   End-to-end tests:
+    -   Add template loader unit tests. ([31498](https://github.com/WordPress/gutenberg/pull/31498))
+    -   Fix end-to-end test inserting cover block. ([31866](https://github.com/WordPress/gutenberg/pull/31866))
+    -   Fix flaky change detection tests causing intermittent failures. ([31861](https://github.com/WordPress/gutenberg/pull/31861))
+    -   Fix intermittent embeds failure. ([31860](https://github.com/WordPress/gutenberg/pull/31860))
+    -   Fix intermittent failure of rich text end-to-end test. ([31864](https://github.com/WordPress/gutenberg/pull/31864))
+    -   Increase test coverage for pattern transforms. ([31689](https://github.com/WordPress/gutenberg/pull/31689))
+    -   Navigation: Add unit tests for onChange handler and fix cases around custom links tags and post-format. ([31259](https://github.com/WordPress/gutenberg/pull/31259))
+    -   Remove i18n filters performance test. ([32028](https://github.com/WordPress/gutenberg/pull/32028))
+    -   Skip unstable end-to-end tests. ([32031](https://github.com/WordPress/gutenberg/pull/32031))
+    -   Try stabilizing customize widgets end-to-end tests. ([32023](https://github.com/WordPress/gutenberg/pull/32023))
+    -   Update skip failing template mode end to end test. ([32017](https://github.com/WordPress/gutenberg/pull/32017))
+    -   Update tests for changes in core logic. ([31982](https://github.com/WordPress/gutenberg/pull/31982))
+-   Gutenberg plugin: Update compatibility layer for loading separate core block assets. ([31894](https://github.com/WordPress/gutenberg/pull/31894))
+-   Workflow:
+    -   Replace the Cancel workflow with native GitHub Action functionality. ([32016](https://github.com/WordPress/gutenberg/pull/32016))
+    -   Remove Custom Properties PostCSS plugin. ([31715](https://github.com/WordPress/gutenberg/pull/31715))
 
 = 10.6.2 =
 
-
+## Changelog
 
 ### Bug Fixes
 
-- Workflows: Fix "Stable tag:" readme.txt field in SVN upload. ([31897](https://github.com/WordPress/gutenberg/pull/31897))
-- Gallery: Fix Image Size regression. ([31884](https://github.com/WordPress/gutenberg/pull/31884))
+-   Workflows: Fix "Stable tag:" readme.txt field in SVN upload. ([31897](https://github.com/WordPress/gutenberg/pull/31897))
+-   Gallery: Fix Image Size regression. ([31884](https://github.com/WordPress/gutenberg/pull/31884))
 
 ### Various
 
-- Plugin: Guard `construct_wp_query_args` with check if implemented in WordPress Core. ([32008](https://github.com/WordPress/gutenberg/pull/32008))
-
-
-
+-   Plugin: Guard `construct_wp_query_args` with check if implemented in WordPress Core. ([32008](https://github.com/WordPress/gutenberg/pull/32008))
 
 = 10.6.1 =
 
-### Bug Fixes
+## Changelog
 
-- Revert "components: Promote VisuallyHidden from ui into full components (#31244)". ([31882](https://github.com/WordPress/gutenberg/pull/31882))
-- Allow more complex contentWidth & wideWidth values. ([31740](https://github.com/WordPress/gutenberg/pull/31740))
-- Fix link color selector. ([31820](https://github.com/WordPress/gutenberg/pull/31820))
-- Register template part variations server side. ([31761](https://github.com/WordPress/gutenberg/pull/31761))
-- Do not provide a default value for the link color property. ([31755](https://github.com/WordPress/gutenberg/pull/31755))
-- Fixes FSE Navigation sub-menu item styling regression. ([31754](https://github.com/WordPress/gutenberg/pull/31754))
+### Bug Fixes
 
+-   Revert "components: Promote VisuallyHidden from ui into full components (#31244)". ([31882](https://github.com/WordPress/gutenberg/pull/31882))
+-   Allow more complex contentWidth & wideWidth values. ([31740](https://github.com/WordPress/gutenberg/pull/31740))
+-   Fix link color selector. ([31820](https://github.com/WordPress/gutenberg/pull/31820))
+-   Register template part variations server side. ([31761](https://github.com/WordPress/gutenberg/pull/31761))
+-   Do not provide a default value for the link color property. ([31755](https://github.com/WordPress/gutenberg/pull/31755))
+-   Fixes FSE Navigation sub-menu item styling regression. ([31754](https://github.com/WordPress/gutenberg/pull/31754))
 
 = 10.6.0 =
 
+## Changelog
+
 ### New Features
 
-- Block Editor: Add duotone block supports. ([26752](https://github.com/WordPress/gutenberg/pull/26752))
-- Block Library:
-  - Stabilize some theme blocks for WP 5.8 release. ([31423](https://github.com/WordPress/gutenberg/pull/31423))
-  - Mark Log In/Out block as stable for 5.8 release. ([31499](https://github.com/WordPress/gutenberg/pull/31499))
-- Editor: Display most used terms in term selector. ([30598](https://github.com/WordPress/gutenberg/pull/30598))
+-   Block Editor: Add duotone block supports. ([26752](https://github.com/WordPress/gutenberg/pull/26752))
+-   Block Library:
+    -   Stabilize some theme blocks for WP 5.8 release. ([31423](https://github.com/WordPress/gutenberg/pull/31423))
+    -   Mark Log In/Out block as stable for 5.8 release. ([31499](https://github.com/WordPress/gutenberg/pull/31499))
+-   Editor: Display most used terms in term selector. ([30598](https://github.com/WordPress/gutenberg/pull/30598))
 
 ### Enhancements
 
-- Block Editor:
-  - Add Block Border Support. ([31264](https://github.com/WordPress/gutenberg/pull/31264))
-  - Spacing Support: configurable sides for padding support. ([30607](https://github.com/WordPress/gutenberg/pull/30607))
-  - Simplify insertion point. ([30301](https://github.com/WordPress/gutenberg/pull/30301))
-- Block Library:
-  - Post date: Add link color option. ([30827](https://github.com/WordPress/gutenberg/pull/30827))
-  - Table:
-    - Add border block support. ([31265](https://github.com/WordPress/gutenberg/pull/31265))
-    - Add colors block support. ([30791](https://github.com/WordPress/gutenberg/pull/30791))
-  - Query Block:
-    - Add semantic wrapper element. ([31421](https://github.com/WordPress/gutenberg/pull/31421))
-    - Add wrapper and `align` support. ([30804](https://github.com/WordPress/gutenberg/pull/30804))
-    - Show a spinner instead of the Loading text message. ([31095](https://github.com/WordPress/gutenberg/pull/31095))
-  - Unify the post tags and post categories block under a unique post terms block. ([31458](https://github.com/WordPress/gutenberg/pull/31458))
-- Components:
-  - Add component system `context`. ([30877](https://github.com/WordPress/gutenberg/pull/30877))
-  - Use `UnitControl` for font-size. ([31314](https://github.com/WordPress/gutenberg/pull/31314))
-  - Use vanilla emotion for `view`. ([31099](https://github.com/WordPress/gutenberg/pull/31099))
-  - Promote Heading. ([31299](https://github.com/WordPress/gutenberg/pull/31299))
-  - Promote Text to full components export. ([31291](https://github.com/WordPress/gutenberg/pull/31291))
-  - Promote ui/Flex and deprecate `isReversed` prop. ([31297](https://github.com/WordPress/gutenberg/pull/31297))
-  - Promote VisuallyHidden from ui into full components. ([31244](https://github.com/WordPress/gutenberg/pull/31244))
-- Core Data: Add experimental util to allow fetch remote URL data from REST API. ([31085](https://github.com/WordPress/gutenberg/pull/31085))
-- General Interface:
-  - Rename "Modes" to "Tools" in the header. ([31430](https://github.com/WordPress/gutenberg/pull/31430))
-  - RTL support for redo/undo icons. ([31219](https://github.com/WordPress/gutenberg/pull/31219))
-  - Update "trash" icon. ([31463](https://github.com/WordPress/gutenberg/pull/31463))
-- Patterns: Suggest block patterns in block placeholder states. ([29602](https://github.com/WordPress/gutenberg/pull/29602))
-- Site Editor:
-  - Add show more settings to block toolbars. ([31305](https://github.com/WordPress/gutenberg/pull/31305))
-  - Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. ([30664](https://github.com/WordPress/gutenberg/pull/30664))
-  - A11y: Constrain tabbing inside them multi-entity save panel. ([31136](https://github.com/WordPress/gutenberg/pull/31136))
-  - Iframe the template editor. ([31375](https://github.com/WordPress/gutenberg/pull/31375))
-  - Save panel - decouple Site Entity items for individual saving. ([30816](https://github.com/WordPress/gutenberg/pull/30816))
-  - Template part:
-    - Add patterns placeholder selection. ([31155](https://github.com/WordPress/gutenberg/pull/31155))
-    - Register block variations and area selection inputs from original area definitions. ([30821](https://github.com/WordPress/gutenberg/pull/30821))
-  - Site Tagline: Letter casing and padding. ([31042](https://github.com/WordPress/gutenberg/pull/31042))
-  - Site title: Add padding. ([31125](https://github.com/WordPress/gutenberg/pull/31125))
-  - Try: Blue parents. ([31196](https://github.com/WordPress/gutenberg/pull/31196))
-  - Verify if php template exists for a hybrid/universal theme with a block-based parent. ([31123](https://github.com/WordPress/gutenberg/pull/31123))
-- Template Editing Mode: Use a darker frame for template mode and previews. ([31044](https://github.com/WordPress/gutenberg/pull/31044))
+-   Block Editor:
+    -   Add Block Border Support. ([31264](https://github.com/WordPress/gutenberg/pull/31264))
+    -   Spacing Support: configurable sides for padding support. ([30607](https://github.com/WordPress/gutenberg/pull/30607))
+    -   Simplify insertion point. ([30301](https://github.com/WordPress/gutenberg/pull/30301))
+-   Block Library:
+    -   Post date: Add link color option. ([30827](https://github.com/WordPress/gutenberg/pull/30827))
+    -   Table:
+        -   Add border block support. ([31265](https://github.com/WordPress/gutenberg/pull/31265))
+        -   Add colors block support. ([30791](https://github.com/WordPress/gutenberg/pull/30791))
+    -   Query Block:
+        -   Add semantic wrapper element. ([31421](https://github.com/WordPress/gutenberg/pull/31421))
+        -   Add wrapper and `align` support. ([30804](https://github.com/WordPress/gutenberg/pull/30804))
+        -   Show a spinner instead of the Loading text message. ([31095](https://github.com/WordPress/gutenberg/pull/31095))
+    -   Unify the post tags and post categories block under a unique post terms block. ([31458](https://github.com/WordPress/gutenberg/pull/31458))
+-   Components:
+    -   Add component system `context`. ([30877](https://github.com/WordPress/gutenberg/pull/30877))
+    -   Use `UnitControl` for font-size. ([31314](https://github.com/WordPress/gutenberg/pull/31314))
+    -   Use vanilla emotion for `view`. ([31099](https://github.com/WordPress/gutenberg/pull/31099))
+    -   Promote Heading. ([31299](https://github.com/WordPress/gutenberg/pull/31299))
+    -   Promote Text to full components export. ([31291](https://github.com/WordPress/gutenberg/pull/31291))
+    -   Promote ui/Flex and deprecate `isReversed` prop. ([31297](https://github.com/WordPress/gutenberg/pull/31297))
+    -   Promote VisuallyHidden from ui into full components. ([31244](https://github.com/WordPress/gutenberg/pull/31244))
+-   Core Data: Add experimental util to allow fetch remote URL data from REST API. ([31085](https://github.com/WordPress/gutenberg/pull/31085))
+-   General Interface:
+    -   Rename "Modes" to "Tools" in the header. ([31430](https://github.com/WordPress/gutenberg/pull/31430))
+    -   RTL support for redo/undo icons. ([31219](https://github.com/WordPress/gutenberg/pull/31219))
+    -   Update "trash" icon. ([31463](https://github.com/WordPress/gutenberg/pull/31463))
+-   Patterns: Suggest block patterns in block placeholder states. ([29602](https://github.com/WordPress/gutenberg/pull/29602))
+-   Site Editor:
+    -   Add show more settings to block toolbars. ([31305](https://github.com/WordPress/gutenberg/pull/31305))
+    -   Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. ([30664](https://github.com/WordPress/gutenberg/pull/30664))
+    -   A11y: Constrain tabbing inside them multi-entity save panel. ([31136](https://github.com/WordPress/gutenberg/pull/31136))
+    -   Iframe the template editor. ([31375](https://github.com/WordPress/gutenberg/pull/31375))
+    -   Save panel - decouple Site Entity items for individual saving. ([30816](https://github.com/WordPress/gutenberg/pull/30816))
+    -   Template part:
+        -   Add patterns placeholder selection. ([31155](https://github.com/WordPress/gutenberg/pull/31155))
+        -   Register block variations and area selection inputs from original area definitions. ([30821](https://github.com/WordPress/gutenberg/pull/30821))
+    -   Site Tagline: Letter casing and padding. ([31042](https://github.com/WordPress/gutenberg/pull/31042))
+    -   Site title: Add padding. ([31125](https://github.com/WordPress/gutenberg/pull/31125))
+    -   Try: Blue parents. ([31196](https://github.com/WordPress/gutenberg/pull/31196))
+    -   Verify if php template exists for a hybrid/universal theme with a block-based parent. ([31123](https://github.com/WordPress/gutenberg/pull/31123))
+-   Template Editing Mode: Use a darker frame for template mode and previews. ([31044](https://github.com/WordPress/gutenberg/pull/31044))
 
 ### New APIs
 
-- Core Data: Add batched variants for start and finish resolution actions. ([31005](https://github.com/WordPress/gutenberg/pull/31005))
-- Block API: Allow "array of attributes to be compared" for `isActive` property in block variations. ([30913](https://github.com/WordPress/gutenberg/pull/30913))
-- Blocks: Introduce `registerBlockTypeFromMetadata` API. ([30293](https://github.com/WordPress/gutenberg/pull/30293))
-
-### Bug Fixes
-
-- Block Editor:
-  - Block Support: Fix server-side border color support check. ([31020](https://github.com/WordPress/gutenberg/pull/31020))
-  - Create `useBlockRef` and `useBlockElement` for better access. ([29573](https://github.com/WordPress/gutenberg/pull/29573))
-  - Fix focus handler in Safari. ([31103](https://github.com/WordPress/gutenberg/pull/31103))
-  - Fix selection clearer ref passed to `motion.div`. ([31469](https://github.com/WordPress/gutenberg/pull/31469))
-  - Left-align query patterns in the carousel. ([31233](https://github.com/WordPress/gutenberg/pull/31233))
-  - Persistent List View: Fix the list stealing focus from the canvas on item mount. ([31058](https://github.com/WordPress/gutenberg/pull/31058))
-  - Try: Toolbar gap. ([30983](https://github.com/WordPress/gutenberg/pull/30983))
-- Block Library:
-  - Allow for group and columns blocks to specify an unlocked template. ([29916](https://github.com/WordPress/gutenberg/pull/29916))
-  - Button Block: fix 100% width buttons alignment with other buttons. ([29794](https://github.com/WordPress/gutenberg/pull/29794))
-  - Image Block: Hide controls while in upload state. ([30891](https://github.com/WordPress/gutenberg/pull/30891))
-  - Fix: Make media playable on video and audio block backend. ([31257](https://github.com/WordPress/gutenberg/pull/31257))
-  - Prevent `PostDate` as link to load inside an iframe. ([31350](https://github.com/WordPress/gutenberg/pull/31350))
-  - Post Content: Prevent infinite recursion. ([31455](https://github.com/WordPress/gutenberg/pull/31455))
-- Components:
-  - Fix bug with color picker input state for falsy values. ([30799](https://github.com/WordPress/gutenberg/pull/30799))
-  - Fixed imports that resulted in build failing. ([31106](https://github.com/WordPress/gutenberg/pull/31106))
-  - Stop auto-memo antipattern and remove senseless default values. ([31246](https://github.com/WordPress/gutenberg/pull/31246))
-- Compose: Fix parameter name typo in `useRefEffect`. ([30597](https://github.com/WordPress/gutenberg/pull/30597))
-- General Interface:
-  - Remove tools dropdown menu from medium viewport when text labels mode is active. ([31431](https://github.com/WordPress/gutenberg/pull/31431))
-- Plugin:
-  - Call deprecated hooks only when new filters not present. ([31027](https://github.com/WordPress/gutenberg/pull/31027))
-  - Fix core-block-patterns support on GB. ([31546](https://github.com/WordPress/gutenberg/pull/31546))
-  - Use `require_once` instead of `require` when registering blocks. ([31148](https://github.com/WordPress/gutenberg/pull/31148))
-- Site Editor:
-  - Fix popover/inspector scrolling. ([31395](https://github.com/WordPress/gutenberg/pull/31395))
-  - List view improvements. ([31092](https://github.com/WordPress/gutenberg/pull/31092))
-  - Render out HTML characters in post and category titles. ([30661](https://github.com/WordPress/gutenberg/pull/30661))
-  - Use EditorNotices component for notices. ([31303](https://github.com/WordPress/gutenberg/pull/31303))
-- Themes:
-  - Hook `maybe_inline_styles` in the footer. ([31072](https://github.com/WordPress/gutenberg/pull/31072))
-  - Inlined core block styles should not override user-added inline styles. ([31268](https://github.com/WordPress/gutenberg/pull/31268))
-- Writing flow:
-  - Fix edge detection in Chrome. ([31150](https://github.com/WordPress/gutenberg/pull/31150))
-  - Fix RTL issues. ([31159](https://github.com/WordPress/gutenberg/pull/31159))
+-   Core Data: Add batched variants for start and finish resolution actions. ([31005](https://github.com/WordPress/gutenberg/pull/31005))
+-   Block API: Allow "array of attributes to be compared" for `isActive` property in block variations. ([30913](https://github.com/WordPress/gutenberg/pull/30913))
+-   Blocks: Introduce `registerBlockTypeFromMetadata` API. ([30293](https://github.com/WordPress/gutenberg/pull/30293))
+
+### Bug Fixes
+
+-   Block Editor:
+    -   Block Support: Fix server-side border color support check. ([31020](https://github.com/WordPress/gutenberg/pull/31020))
+    -   Create `useBlockRef` and `useBlockElement` for better access. ([29573](https://github.com/WordPress/gutenberg/pull/29573))
+    -   Fix focus handler in Safari. ([31103](https://github.com/WordPress/gutenberg/pull/31103))
+    -   Fix selection clearer ref passed to `motion.div`. ([31469](https://github.com/WordPress/gutenberg/pull/31469))
+    -   Left-align query patterns in the carousel. ([31233](https://github.com/WordPress/gutenberg/pull/31233))
+    -   Persistent List View: Fix the list stealing focus from the canvas on item mount. ([31058](https://github.com/WordPress/gutenberg/pull/31058))
+    -   Try: Toolbar gap. ([30983](https://github.com/WordPress/gutenberg/pull/30983))
+-   Block Library:
+    -   Allow for group and columns blocks to specify an unlocked template. ([29916](https://github.com/WordPress/gutenberg/pull/29916))
+    -   Button Block: fix 100% width buttons alignment with other buttons. ([29794](https://github.com/WordPress/gutenberg/pull/29794))
+    -   Image Block: Hide controls while in upload state. ([30891](https://github.com/WordPress/gutenberg/pull/30891))
+    -   Fix: Make media playable on video and audio block backend. ([31257](https://github.com/WordPress/gutenberg/pull/31257))
+    -   Prevent `PostDate` as link to load inside an iframe. ([31350](https://github.com/WordPress/gutenberg/pull/31350))
+    -   Post Content: Prevent infinite recursion. ([31455](https://github.com/WordPress/gutenberg/pull/31455))
+-   Components:
+    -   Fix bug with color picker input state for falsy values. ([30799](https://github.com/WordPress/gutenberg/pull/30799))
+    -   Fixed imports that resulted in build failing. ([31106](https://github.com/WordPress/gutenberg/pull/31106))
+    -   Stop auto-memo antipattern and remove senseless default values. ([31246](https://github.com/WordPress/gutenberg/pull/31246))
+-   Compose: Fix parameter name typo in `useRefEffect`. ([30597](https://github.com/WordPress/gutenberg/pull/30597))
+-   General Interface:
+    -   Remove tools dropdown menu from medium viewport when text labels mode is active. ([31431](https://github.com/WordPress/gutenberg/pull/31431))
+-   Plugin:
+    -   Call deprecated hooks only when new filters not present. ([31027](https://github.com/WordPress/gutenberg/pull/31027))
+    -   Fix core-block-patterns support on GB. ([31546](https://github.com/WordPress/gutenberg/pull/31546))
+    -   Use `require_once` instead of `require` when registering blocks. ([31148](https://github.com/WordPress/gutenberg/pull/31148))
+-   Site Editor:
+    -   Fix popover/inspector scrolling. ([31395](https://github.com/WordPress/gutenberg/pull/31395))
+    -   List view improvements. ([31092](https://github.com/WordPress/gutenberg/pull/31092))
+    -   Render out HTML characters in post and category titles. ([30661](https://github.com/WordPress/gutenberg/pull/30661))
+    -   Use EditorNotices component for notices. ([31303](https://github.com/WordPress/gutenberg/pull/31303))
+-   Themes:
+    -   Hook `maybe_inline_styles` in the footer. ([31072](https://github.com/WordPress/gutenberg/pull/31072))
+    -   Inlined core block styles should not override user-added inline styles. ([31268](https://github.com/WordPress/gutenberg/pull/31268))
+-   Writing flow:
+    -   Fix edge detection in Chrome. ([31150](https://github.com/WordPress/gutenberg/pull/31150))
+    -   Fix RTL issues. ([31159](https://github.com/WordPress/gutenberg/pull/31159))
 
 ### Performance
 
-- Improve the typing performance by render hooks panels for selected blocks only. ([31381](https://github.com/WordPress/gutenberg/pull/31381))
+-   Improve the typing performance by render hooks panels for selected blocks only. ([31381](https://github.com/WordPress/gutenberg/pull/31381))
 
 ### Experiments
 
-- Block-based Widgets:
-  - API:
-    - Remove widget screen dead code. ([31411](https://github.com/WordPress/gutenberg/pull/31411))
-    - Set order of Widgets submenu item. ([31214](https://github.com/WordPress/gutenberg/pull/31214))
-    - Use `gutenberg_get_block_categories` for getting block categories. ([31486](https://github.com/WordPress/gutenberg/pull/31486))
-  - Customizer:
-    - Add white background. ([31487](https://github.com/WordPress/gutenberg/pull/31487))
-    - Fix adding new legacy widget. ([31490](https://github.com/WordPress/gutenberg/pull/31490))
-    - Fix Legacy Widget block. ([31405](https://github.com/WordPress/gutenberg/pull/31405))
-    - Fix toolbar so that it overlaps preview. ([31077](https://github.com/WordPress/gutenberg/pull/31077))
-    - Fix unable to publish edited legacy widgets. ([31484](https://github.com/WordPress/gutenberg/pull/31484))
-    - Fix unable to get block refs in widgets customizer. ([31262](https://github.com/WordPress/gutenberg/pull/31262))
-    - Focus control in widgets customizer. ([31308](https://github.com/WordPress/gutenberg/pull/31308))
-    - Make the entire sidebar have a white background. ([31492](https://github.com/WordPress/gutenberg/pull/31492))
-    - Show blocks from plugins. ([31406](https://github.com/WordPress/gutenberg/pull/31406))
-  - Legacy Widget:
-    - Add 'Convert to blocks' button for text widgets. ([31215](https://github.com/WordPress/gutenberg/pull/31215))
-    - Implement design iterations. ([30889](https://github.com/WordPress/gutenberg/pull/30889))
-    - Ensure the control form's IDs have a consistent number. ([31485](https://github.com/WordPress/gutenberg/pull/31485))
-    - Refactor Form to not use React. ([31444](https://github.com/WordPress/gutenberg/pull/31444))
-  - Widget Editor:
-    - Ensure _Hello Dolly_ plugin text doesn't overlap the widgets screen UI. ([30729](https://github.com/WordPress/gutenberg/pull/30729))
-    - Fix entity deletion in widgets screen. ([31404](https://github.com/WordPress/gutenberg/pull/31404))
-    - Fix _move to widget area_ item checkmark. ([31494](https://github.com/WordPress/gutenberg/pull/31494))
-    - Improve theme switching experience. ([31407](https://github.com/WordPress/gutenberg/pull/31407))
-    - _Move to widget area_ iterations and fixes. ([31445](https://github.com/WordPress/gutenberg/pull/31445))
-- Global Styles:
-  - Add a new endpoint that exposes block editor settings through the REST API. ([29969](https://github.com/WordPress/gutenberg/pull/29969))
-  - Add theme origin to `getStyle`. ([31267](https://github.com/WordPress/gutenberg/pull/31267))
-  - Block Supports: Allow skipping serialization of font size. ([30879](https://github.com/WordPress/gutenberg/pull/30879))
-  - Create block metadata for all blocks. ([31590](https://github.com/WordPress/gutenberg/pull/31590))
-  - Cover against a block being unregistered. ([31588](https://github.com/WordPress/gutenberg/pull/31588))
-  - Fix Possible CSS units not passed to `useCustomUnits`. ([31057](https://github.com/WordPress/gutenberg/pull/31057))
-  - Make the configuration resilient to changes to `safecss_filter_attr()`. ([30888](https://github.com/WordPress/gutenberg/pull/30888))
-  - Preset classes for site editor: Generate them like in the front-end. ([31218](https://github.com/WordPress/gutenberg/pull/31218))
-  - Remove specificify for link color. ([31497](https://github.com/WordPress/gutenberg/pull/31497))
-  - Remove tests and make utility methods private. ([31224](https://github.com/WordPress/gutenberg/pull/31224))
-  - Rename `experimental-theme.json` to `theme.json` and add a fallback for backwards-compatibility. ([29981](https://github.com/WordPress/gutenberg/pull/29981))
-  - Site Editor:
-    - Fix generation of preset class for border color. ([31217](https://github.com/WordPress/gutenberg/pull/31217))
-    - Fix preset class specificity. ([31204](https://github.com/WordPress/gutenberg/pull/31204))
-  - Target global styles to the `body` element instead of `:root`. ([31302](https://github.com/WordPress/gutenberg/pull/31302))
-  - Themes: only split block styles loading for block themes. ([31309](https://github.com/WordPress/gutenberg/pull/31309))
-  - Update shape of theme.json. ([30541](https://github.com/WordPress/gutenberg/pull/30541))
-- Navigation Editor and Block:
-  - Block placeholder: fix font inheritance. ([31410](https://github.com/WordPress/gutenberg/pull/31410))
-  - Correctly display menu used on location text. ([31500](https://github.com/WordPress/gutenberg/pull/31500))
-  - Fix issue with missing styles for `Page List` in navigation. ([31368](https://github.com/WordPress/gutenberg/pull/31368))
-  - Fix navigation screen collapsing regression. ([31228](https://github.com/WordPress/gutenberg/pull/31228))
-  - Fix navigation screen padding again. ([31372](https://github.com/WordPress/gutenberg/pull/31372))
-  - Fix nav color regression. ([31495](https://github.com/WordPress/gutenberg/pull/31495))
-  - Fix nav editor links to correctly persist new tab target attribute. ([30956](https://github.com/WordPress/gutenberg/pull/30956))
-  - Fix padding and cursor for nav menu item placeholder. ([31275](https://github.com/WordPress/gutenberg/pull/31275))
-  - Fix submenu direction justification regression. ([31414](https://github.com/WordPress/gutenberg/pull/31414))
-  - Fix submenu hover issue. ([31195](https://github.com/WordPress/gutenberg/pull/31195))
-  - Fix vertical alignment. ([31376](https://github.com/WordPress/gutenberg/pull/31376))
-  - Indicate unsaved changes. ([31119](https://github.com/WordPress/gutenberg/pull/31119))
-  - Move selected menu ID to the store. ([31320](https://github.com/WordPress/gutenberg/pull/31320))
-  - Move the delete menu button at the bottom. ([31026](https://github.com/WordPress/gutenberg/pull/31026))
-  - Standardise and fix parsing and serialization of blocks and nav menu items. ([31004](https://github.com/WordPress/gutenberg/pull/31004))
-  - Sync menu name updates. ([31093](https://github.com/WordPress/gutenberg/pull/31093))
-  - Try: Remove padding from menu items when no background. ([30805](https://github.com/WordPress/gutenberg/pull/30805))
-  - Use `ajaxurl` global in `batchSave` action. ([31028](https://github.com/WordPress/gutenberg/pull/31028))
+-   Block-based Widgets:
+    -   API:
+        -   Remove widget screen dead code. ([31411](https://github.com/WordPress/gutenberg/pull/31411))
+        -   Set order of Widgets submenu item. ([31214](https://github.com/WordPress/gutenberg/pull/31214))
+        -   Use `gutenberg_get_block_categories` for getting block categories. ([31486](https://github.com/WordPress/gutenberg/pull/31486))
+    -   Customizer:
+        -   Add white background. ([31487](https://github.com/WordPress/gutenberg/pull/31487))
+        -   Fix adding new legacy widget. ([31490](https://github.com/WordPress/gutenberg/pull/31490))
+        -   Fix Legacy Widget block. ([31405](https://github.com/WordPress/gutenberg/pull/31405))
+        -   Fix toolbar so that it overlaps preview. ([31077](https://github.com/WordPress/gutenberg/pull/31077))
+        -   Fix unable to publish edited legacy widgets. ([31484](https://github.com/WordPress/gutenberg/pull/31484))
+        -   Fix unable to get block refs in widgets customizer. ([31262](https://github.com/WordPress/gutenberg/pull/31262))
+        -   Focus control in widgets customizer. ([31308](https://github.com/WordPress/gutenberg/pull/31308))
+        -   Make the entire sidebar have a white background. ([31492](https://github.com/WordPress/gutenberg/pull/31492))
+        -   Show blocks from plugins. ([31406](https://github.com/WordPress/gutenberg/pull/31406))
+    -   Legacy Widget:
+        -   Add 'Convert to blocks' button for text widgets. ([31215](https://github.com/WordPress/gutenberg/pull/31215))
+        -   Implement design iterations. ([30889](https://github.com/WordPress/gutenberg/pull/30889))
+        -   Ensure the control form's IDs have a consistent number. ([31485](https://github.com/WordPress/gutenberg/pull/31485))
+        -   Refactor Form to not use React. ([31444](https://github.com/WordPress/gutenberg/pull/31444))
+    -   Widget Editor:
+        -   Ensure _Hello Dolly_ plugin text doesn't overlap the widgets screen UI. ([30729](https://github.com/WordPress/gutenberg/pull/30729))
+        -   Fix entity deletion in widgets screen. ([31404](https://github.com/WordPress/gutenberg/pull/31404))
+        -   Fix _move to widget area_ item checkmark. ([31494](https://github.com/WordPress/gutenberg/pull/31494))
+        -   Improve theme switching experience. ([31407](https://github.com/WordPress/gutenberg/pull/31407))
+        -   _Move to widget area_ iterations and fixes. ([31445](https://github.com/WordPress/gutenberg/pull/31445))
+-   Global Styles:
+    -   Add a new endpoint that exposes block editor settings through the REST API. ([29969](https://github.com/WordPress/gutenberg/pull/29969))
+    -   Add theme origin to `getStyle`. ([31267](https://github.com/WordPress/gutenberg/pull/31267))
+    -   Block Supports: Allow skipping serialization of font size. ([30879](https://github.com/WordPress/gutenberg/pull/30879))
+    -   Create block metadata for all blocks. ([31590](https://github.com/WordPress/gutenberg/pull/31590))
+    -   Cover against a block being unregistered. ([31588](https://github.com/WordPress/gutenberg/pull/31588))
+    -   Fix Possible CSS units not passed to `useCustomUnits`. ([31057](https://github.com/WordPress/gutenberg/pull/31057))
+    -   Make the configuration resilient to changes to `safecss_filter_attr()`. ([30888](https://github.com/WordPress/gutenberg/pull/30888))
+    -   Preset classes for site editor: Generate them like in the front-end. ([31218](https://github.com/WordPress/gutenberg/pull/31218))
+    -   Remove specificify for link color. ([31497](https://github.com/WordPress/gutenberg/pull/31497))
+    -   Remove tests and make utility methods private. ([31224](https://github.com/WordPress/gutenberg/pull/31224))
+    -   Rename `experimental-theme.json` to `theme.json` and add a fallback for backwards-compatibility. ([29981](https://github.com/WordPress/gutenberg/pull/29981))
+    -   Site Editor:
+        -   Fix generation of preset class for border color. ([31217](https://github.com/WordPress/gutenberg/pull/31217))
+        -   Fix preset class specificity. ([31204](https://github.com/WordPress/gutenberg/pull/31204))
+    -   Target global styles to the `body` element instead of `:root`. ([31302](https://github.com/WordPress/gutenberg/pull/31302))
+    -   Themes: only split block styles loading for block themes. ([31309](https://github.com/WordPress/gutenberg/pull/31309))
+    -   Update shape of theme.json. ([30541](https://github.com/WordPress/gutenberg/pull/30541))
+-   Navigation Editor and Block:
+    -   Block placeholder: fix font inheritance. ([31410](https://github.com/WordPress/gutenberg/pull/31410))
+    -   Correctly display menu used on location text. ([31500](https://github.com/WordPress/gutenberg/pull/31500))
+    -   Fix issue with missing styles for `Page List` in navigation. ([31368](https://github.com/WordPress/gutenberg/pull/31368))
+    -   Fix navigation screen collapsing regression. ([31228](https://github.com/WordPress/gutenberg/pull/31228))
+    -   Fix navigation screen padding again. ([31372](https://github.com/WordPress/gutenberg/pull/31372))
+    -   Fix nav color regression. ([31495](https://github.com/WordPress/gutenberg/pull/31495))
+    -   Fix nav editor links to correctly persist new tab target attribute. ([30956](https://github.com/WordPress/gutenberg/pull/30956))
+    -   Fix padding and cursor for nav menu item placeholder. ([31275](https://github.com/WordPress/gutenberg/pull/31275))
+    -   Fix submenu direction justification regression. ([31414](https://github.com/WordPress/gutenberg/pull/31414))
+    -   Fix submenu hover issue. ([31195](https://github.com/WordPress/gutenberg/pull/31195))
+    -   Fix vertical alignment. ([31376](https://github.com/WordPress/gutenberg/pull/31376))
+    -   Indicate unsaved changes. ([31119](https://github.com/WordPress/gutenberg/pull/31119))
+    -   Move selected menu ID to the store. ([31320](https://github.com/WordPress/gutenberg/pull/31320))
+    -   Move the delete menu button at the bottom. ([31026](https://github.com/WordPress/gutenberg/pull/31026))
+    -   Standardise and fix parsing and serialization of blocks and nav menu items. ([31004](https://github.com/WordPress/gutenberg/pull/31004))
+    -   Sync menu name updates. ([31093](https://github.com/WordPress/gutenberg/pull/31093))
+    -   Try: Remove padding from menu items when no background. ([30805](https://github.com/WordPress/gutenberg/pull/30805))
+    -   Use `ajaxurl` global in `batchSave` action. ([31028](https://github.com/WordPress/gutenberg/pull/31028))
 
 ### Documentation
 
-- Docs
-  - Add in more high level overviews of major FSE projects. ([31295](https://github.com/WordPress/gutenberg/pull/31295))
-  - Create a Full Site Editing overview document. ([31065](https://github.com/WordPress/gutenberg/pull/31065))
-  - Fix the broken links of register block type documentation. ([31285](https://github.com/WordPress/gutenberg/pull/31285))
-  - Global Styles: Update documentation for theme.json. ([31507](https://github.com/WordPress/gutenberg/pull/31507))
-  - Link to CSS that `wp-block-styles` include. ([30433](https://github.com/WordPress/gutenberg/pull/30433))
-  - Minor design updates using callout. ([31398](https://github.com/WordPress/gutenberg/pull/31398))
-  - Organize and update block theme documentation. ([31167](https://github.com/WordPress/gutenberg/pull/31167))
-  - Packages: Drop suppport for IE 11 and non-LTS Node.js versions. ([31270](https://github.com/WordPress/gutenberg/pull/31270))
-  - Remove broken links to gutenberg-core team. ([31161](https://github.com/WordPress/gutenberg/pull/31161))
-  - Update Versions in WordPress to include 5.7.1 & 5.8. ([31439](https://github.com/WordPress/gutenberg/pull/31439))
-  - Update contributing documentation with callout notice usage. ([31202](https://github.com/WordPress/gutenberg/pull/31202))
-- Handbook:
-  - Add a deprecation notice to meta block attribute sources. ([31389](https://github.com/WordPress/gutenberg/pull/31389))
-  - Block Patterns Doc Updates. ([31060](https://github.com/WordPress/gutenberg/pull/31060))
+-   Docs
+    -   Add in more high level overviews of major FSE projects. ([31295](https://github.com/WordPress/gutenberg/pull/31295))
+    -   Create a Full Site Editing overview document. ([31065](https://github.com/WordPress/gutenberg/pull/31065))
+    -   Fix the broken links of register block type documentation. ([31285](https://github.com/WordPress/gutenberg/pull/31285))
+    -   Global Styles: Update documentation for theme.json. ([31507](https://github.com/WordPress/gutenberg/pull/31507))
+    -   Link to CSS that `wp-block-styles` include. ([30433](https://github.com/WordPress/gutenberg/pull/30433))
+    -   Minor design updates using callout. ([31398](https://github.com/WordPress/gutenberg/pull/31398))
+    -   Organize and update block theme documentation. ([31167](https://github.com/WordPress/gutenberg/pull/31167))
+    -   Packages: Drop suppport for IE 11 and non-LTS Node.js versions. ([31270](https://github.com/WordPress/gutenberg/pull/31270))
+    -   Remove broken links to gutenberg-core team. ([31161](https://github.com/WordPress/gutenberg/pull/31161))
+    -   Update Versions in WordPress to include 5.7.1 & 5.8. ([31439](https://github.com/WordPress/gutenberg/pull/31439))
+    -   Update contributing documentation with callout notice usage. ([31202](https://github.com/WordPress/gutenberg/pull/31202))
+-   Handbook:
+    -   Add a deprecation notice to meta block attribute sources. ([31389](https://github.com/WordPress/gutenberg/pull/31389))
+    -   Block Patterns Doc Updates. ([31060](https://github.com/WordPress/gutenberg/pull/31060))
 
 ### Code Quality
 
-- Block Editor:
-  - BlockList: Normalise `useSelect` selectors for callbacks. ([31078](https://github.com/WordPress/gutenberg/pull/31078))
-  - Default appender: Try editable paragraph instead of text area. ([30986](https://github.com/WordPress/gutenberg/pull/30986))
-  - In-between inserter:
-    - Use `useRefCallback` and `showInsertionPoint`. ([30285](https://github.com/WordPress/gutenberg/pull/30285))
-    - On hover: Preserve original behaviour. ([31266](https://github.com/WordPress/gutenberg/pull/31266))
-  - Move block tools components and styles to separate folder. ([31313](https://github.com/WordPress/gutenberg/pull/31313))
-  - Multi-selection:
-    - Move `shift+click` logic to hook. ([31358](https://github.com/WordPress/gutenberg/pull/31358))
-    - Move handlers to block ref callback. ([31334](https://github.com/WordPress/gutenberg/pull/31334))
-  - Writing flow: Move selector calls to event handlers. ([31332](https://github.com/WordPress/gutenberg/pull/31332))
-- Block Library:
-  - Remove no longer necessary `render_callback` for Cover block. ([31503](https://github.com/WordPress/gutenberg/pull/31503))
-  - Move translatable fields to `block.json` files. ([31120](https://github.com/WordPress/gutenberg/pull/31120))
-- Components:
-  - Remove all remnants of wp-g2. ([31292](https://github.com/WordPress/gutenberg/pull/31292))
-  - Remove wp-g2 from scrollable. ([31207](https://github.com/WordPress/gutenberg/pull/31207))
-  - Remove G2 portal and refactor Popover to no longer use G2. ([31209](https://github.com/WordPress/gutenberg/pull/31209))
-  - Remove wp-g2 fontsize control. ([31287](https://github.com/WordPress/gutenberg/pull/31287))
-  - Remove wp-g2 from flex, vstack, hstack, spinner and contr…. ([31243](https://github.com/WordPress/gutenberg/pull/31243))
-  - Remove wp-g2 from surface. ([31238](https://github.com/WordPress/gutenberg/pull/31238))
-  - Remove wp-g2 from form-group and control-label. ([31234](https://github.com/WordPress/gutenberg/pull/31234))
-  - Remove wp-g2 from tooltip. ([31232](https://github.com/WordPress/gutenberg/pull/31232))
-  - Remove wp-g2 imports from elevation. ([31230](https://github.com/WordPress/gutenberg/pull/31230))
-  - Remove wp-g2 imports from shortcut. ([31229](https://github.com/WordPress/gutenberg/pull/31229))
-  - Remove wp-g2 imports from ui/divider. ([31212](https://github.com/WordPress/gutenberg/pull/31212))
-  - Remove wp-g2 imports from visually-hidden. ([31210](https://github.com/WordPress/gutenberg/pull/31210))
-  - Remove ui/button and ui/button-group. ([31205](https://github.com/WordPress/gutenberg/pull/31205))
-  - Deprecate the heading prop for the CheckboxControl component. ([30594](https://github.com/WordPress/gutenberg/pull/30594))
-- Compose: Add types to `createHigherOrderComponent`, `ifCondition` and `pure`. ([30881](https://github.com/WordPress/gutenberg/pull/30881))
-- Core Data: Specify context=edit only when needed. ([30482](https://github.com/WordPress/gutenberg/pull/30482))
-- Data: Update `redux` dependency to the latest version. ([31318](https://github.com/WordPress/gutenberg/pull/31318))
-- Mark the `__experimentalBlockSettingsMenuFirstItem` slot as unstable. ([31420](https://github.com/WordPress/gutenberg/pull/31420))
-- Remove the block wrapper component. ([31419](https://github.com/WordPress/gutenberg/pull/31419))
-- General Interface: Fix typo - toogle / toggle. ([31225](https://github.com/WordPress/gutenberg/pull/31225))
-- Packages:
-  - Fix linting warnings for `core/block-editor` store. ([31146](https://github.com/WordPress/gutenberg/pull/31146))
-  - Update lodash to the latest patch version. ([31686](https://github.com/WordPress/gutenberg/pull/31686))
-- Plugin:
-  - Add missing textdomains. ([31131](https://github.com/WordPress/gutenberg/pull/31131))
-  - Cleanup unused function parameters. ([31130](https://github.com/WordPress/gutenberg/pull/31130))
-- Rich text:
-  - Extract undo automatic change. ([31449](https://github.com/WordPress/gutenberg/pull/31449))
-  - Move format boundaries to ref callback and separate file. ([31409](https://github.com/WordPress/gutenberg/pull/31409))
+-   Block Editor:
+    -   BlockList: Normalise `useSelect` selectors for callbacks. ([31078](https://github.com/WordPress/gutenberg/pull/31078))
+    -   Default appender: Try editable paragraph instead of text area. ([30986](https://github.com/WordPress/gutenberg/pull/30986))
+    -   In-between inserter:
+        -   Use `useRefCallback` and `showInsertionPoint`. ([30285](https://github.com/WordPress/gutenberg/pull/30285))
+        -   On hover: Preserve original behaviour. ([31266](https://github.com/WordPress/gutenberg/pull/31266))
+    -   Move block tools components and styles to separate folder. ([31313](https://github.com/WordPress/gutenberg/pull/31313))
+    -   Multi-selection:
+        -   Move `shift+click` logic to hook. ([31358](https://github.com/WordPress/gutenberg/pull/31358))
+        -   Move handlers to block ref callback. ([31334](https://github.com/WordPress/gutenberg/pull/31334))
+    -   Writing flow: Move selector calls to event handlers. ([31332](https://github.com/WordPress/gutenberg/pull/31332))
+-   Block Library:
+    -   Remove no longer necessary `render_callback` for Cover block. ([31503](https://github.com/WordPress/gutenberg/pull/31503))
+    -   Move translatable fields to `block.json` files. ([31120](https://github.com/WordPress/gutenberg/pull/31120))
+-   Components:
+    -   Remove all remnants of wp-g2. ([31292](https://github.com/WordPress/gutenberg/pull/31292))
+    -   Remove wp-g2 from scrollable. ([31207](https://github.com/WordPress/gutenberg/pull/31207))
+    -   Remove G2 portal and refactor Popover to no longer use G2. ([31209](https://github.com/WordPress/gutenberg/pull/31209))
+    -   Remove wp-g2 fontsize control. ([31287](https://github.com/WordPress/gutenberg/pull/31287))
+    -   Remove wp-g2 from flex, vstack, hstack, spinner and contr…. ([31243](https://github.com/WordPress/gutenberg/pull/31243))
+    -   Remove wp-g2 from surface. ([31238](https://github.com/WordPress/gutenberg/pull/31238))
+    -   Remove wp-g2 from form-group and control-label. ([31234](https://github.com/WordPress/gutenberg/pull/31234))
+    -   Remove wp-g2 from tooltip. ([31232](https://github.com/WordPress/gutenberg/pull/31232))
+    -   Remove wp-g2 imports from elevation. ([31230](https://github.com/WordPress/gutenberg/pull/31230))
+    -   Remove wp-g2 imports from shortcut. ([31229](https://github.com/WordPress/gutenberg/pull/31229))
+    -   Remove wp-g2 imports from ui/divider. ([31212](https://github.com/WordPress/gutenberg/pull/31212))
+    -   Remove wp-g2 imports from visually-hidden. ([31210](https://github.com/WordPress/gutenberg/pull/31210))
+    -   Remove ui/button and ui/button-group. ([31205](https://github.com/WordPress/gutenberg/pull/31205))
+    -   Deprecate the heading prop for the CheckboxControl component. ([30594](https://github.com/WordPress/gutenberg/pull/30594))
+-   Compose: Add types to `createHigherOrderComponent`, `ifCondition` and `pure`. ([30881](https://github.com/WordPress/gutenberg/pull/30881))
+-   Core Data: Specify context=edit only when needed. ([30482](https://github.com/WordPress/gutenberg/pull/30482))
+-   Data: Update `redux` dependency to the latest version. ([31318](https://github.com/WordPress/gutenberg/pull/31318))
+-   Mark the `__experimentalBlockSettingsMenuFirstItem` slot as unstable. ([31420](https://github.com/WordPress/gutenberg/pull/31420))
+-   Remove the block wrapper component. ([31419](https://github.com/WordPress/gutenberg/pull/31419))
+-   General Interface: Fix typo - toogle / toggle. ([31225](https://github.com/WordPress/gutenberg/pull/31225))
+-   Packages:
+    -   Fix linting warnings for `core/block-editor` store. ([31146](https://github.com/WordPress/gutenberg/pull/31146))
+    -   Update lodash to the latest patch version. ([31686](https://github.com/WordPress/gutenberg/pull/31686))
+-   Plugin:
+    -   Add missing textdomains. ([31131](https://github.com/WordPress/gutenberg/pull/31131))
+    -   Cleanup unused function parameters. ([31130](https://github.com/WordPress/gutenberg/pull/31130))
+-   Rich text:
+    -   Extract undo automatic change. ([31449](https://github.com/WordPress/gutenberg/pull/31449))
+    -   Move format boundaries to ref callback and separate file. ([31409](https://github.com/WordPress/gutenberg/pull/31409))
 
 ### Tools
 
-- Build Tooling:
-  - Also rebuild block-specific styles in dev mode. ([31274](https://github.com/WordPress/gutenberg/pull/31274))
-  - Remove support for IE11. ([31110](https://github.com/WordPress/gutenberg/pull/31110))
-  - Fix recursive filewatching on linux. ([31102](https://github.com/WordPress/gutenberg/pull/31102))
-- Testing:
-  - end-to-end wpDataSelect: Explain why it returns undefined sometimes. ([31227](https://github.com/WordPress/gutenberg/pull/31227))
-  - end-to-end testing: Use JSON serialization for getAllBlocks. ([31199](https://github.com/WordPress/gutenberg/pull/31199))
-  - end-to-end tests for Widgets Customizer. ([31185](https://github.com/WordPress/gutenberg/pull/31185))
-  - end-to-end Site Editor: Evaluate getEditedPostContent on the page. ([31121](https://github.com/WordPress/gutenberg/pull/31121))
-  - Fix entity saving intermittent test failure. ([31157](https://github.com/WordPress/gutenberg/pull/31157))
-  - Fix tests failing on expected site tagline snapshot. ([31473](https://github.com/WordPress/gutenberg/pull/31473))
-  - Fix not getting correct `computedName` with labels in chromium 91. ([31175](https://github.com/WordPress/gutenberg/pull/31175))
-  - Fix snapshots broken in trunk. ([31247](https://github.com/WordPress/gutenberg/pull/31247))
-  - Fix undo end-to-end test. ([31160](https://github.com/WordPress/gutenberg/pull/31160))
-  - Stabilise typewriter end-to-end test. ([31472](https://github.com/WordPress/gutenberg/pull/31472))
-  - Use `puppeteer-testing-library` in end-to-end tests. ([28380](https://github.com/WordPress/gutenberg/pull/28380))
-  - Use `jest-circus` in unit tests. ([31178](https://github.com/WordPress/gutenberg/pull/31178))
-  - Upgrade `puppeteer-testing-library` version. ([31133](https://github.com/WordPress/gutenberg/pull/31133))
-- Scripts:
-  - Add `.prettierignore`, use in `format` script. ([30844](https://github.com/WordPress/gutenberg/pull/30844))
-  - Add `postcss` as a dependency to ensure a correct version is used. ([31364](https://github.com/WordPress/gutenberg/pull/31364))
-  - Update `puppeteer-core` to the latest version. ([31138](https://github.com/WordPress/gutenberg/pull/31138))
-  - Update PostCSS minimum version to ensure it is secure. ([31685](https://github.com/WordPress/gutenberg/pull/31685))
-- Workflows:
-  - Run tests on release branches. ([31354](https://github.com/WordPress/gutenberg/pull/31354))
-  - Adds reporter that shows JS test errors on GitHub. ([31041](https://github.com/WordPress/gutenberg/pull/31041))
-- wp-env: fix can't checkout git repositories of a specific tag. ([31271](https://github.com/WordPress/gutenberg/pull/31271))
-- Native:
-  - Moves hermes and react-native mirror to S3. ([31441](https://github.com/WordPress/gutenberg/pull/31441))
-  - Publish android artifacts to s3. ([30421](https://github.com/WordPress/gutenberg/pull/30421))
-- Storybook: Update `BoxControl` stories. ([31029](https://github.com/WordPress/gutenberg/pull/31029))
+-   Build Tooling:
+    -   Also rebuild block-specific styles in dev mode. ([31274](https://github.com/WordPress/gutenberg/pull/31274))
+    -   Remove support for IE11. ([31110](https://github.com/WordPress/gutenberg/pull/31110))
+    -   Fix recursive filewatching on linux. ([31102](https://github.com/WordPress/gutenberg/pull/31102))
+-   Testing:
+    -   end-to-end wpDataSelect: Explain why it returns undefined sometimes. ([31227](https://github.com/WordPress/gutenberg/pull/31227))
+    -   end-to-end testing: Use JSON serialization for getAllBlocks. ([31199](https://github.com/WordPress/gutenberg/pull/31199))
+    -   end-to-end tests for Widgets Customizer. ([31185](https://github.com/WordPress/gutenberg/pull/31185))
+    -   end-to-end Site Editor: Evaluate getEditedPostContent on the page. ([31121](https://github.com/WordPress/gutenberg/pull/31121))
+    -   Fix entity saving intermittent test failure. ([31157](https://github.com/WordPress/gutenberg/pull/31157))
+    -   Fix tests failing on expected site tagline snapshot. ([31473](https://github.com/WordPress/gutenberg/pull/31473))
+    -   Fix not getting correct `computedName` with labels in chromium 91. ([31175](https://github.com/WordPress/gutenberg/pull/31175))
+    -   Fix snapshots broken in trunk. ([31247](https://github.com/WordPress/gutenberg/pull/31247))
+    -   Fix undo end-to-end test. ([31160](https://github.com/WordPress/gutenberg/pull/31160))
+    -   Stabilise typewriter end-to-end test. ([31472](https://github.com/WordPress/gutenberg/pull/31472))
+    -   Use `puppeteer-testing-library` in end-to-end tests. ([28380](https://github.com/WordPress/gutenberg/pull/28380))
+    -   Use `jest-circus` in unit tests. ([31178](https://github.com/WordPress/gutenberg/pull/31178))
+    -   Upgrade `puppeteer-testing-library` version. ([31133](https://github.com/WordPress/gutenberg/pull/31133))
+-   Scripts:
+    -   Add `.prettierignore`, use in `format` script. ([30844](https://github.com/WordPress/gutenberg/pull/30844))
+    -   Add `postcss` as a dependency to ensure a correct version is used. ([31364](https://github.com/WordPress/gutenberg/pull/31364))
+    -   Update `puppeteer-core` to the latest version. ([31138](https://github.com/WordPress/gutenberg/pull/31138))
+    -   Update PostCSS minimum version to ensure it is secure. ([31685](https://github.com/WordPress/gutenberg/pull/31685))
+-   Workflows:
+    -   Run tests on release branches. ([31354](https://github.com/WordPress/gutenberg/pull/31354))
+    -   Adds reporter that shows JS test errors on GitHub. ([31041](https://github.com/WordPress/gutenberg/pull/31041))
+-   wp-env: fix can't checkout git repositories of a specific tag. ([31271](https://github.com/WordPress/gutenberg/pull/31271))
+-   Native:
+    -   Moves hermes and react-native mirror to S3. ([31441](https://github.com/WordPress/gutenberg/pull/31441))
+    -   Publish android artifacts to s3. ([30421](https://github.com/WordPress/gutenberg/pull/30421))
+-   Storybook: Update `BoxControl` stories. ([31029](https://github.com/WordPress/gutenberg/pull/31029))
 
 ### Various
 
-- Plugin: Tweaks to accommodate latest changes in core for styles loading. ([31702](https://github.com/WordPress/gutenberg/pull/31702))
-- Site Logo: Rename sitelogo to site_logo. ([31511](https://github.com/WordPress/gutenberg/pull/31511))
-
+-   Plugin: Tweaks to accommodate latest changes in core for styles loading. ([31702](https://github.com/WordPress/gutenberg/pull/31702))
+-   Site Logo: Rename sitelogo to site_logo. ([31511](https://github.com/WordPress/gutenberg/pull/31511))
 
 = 10.5.4 =
 
-### Bug Fixes
-
-- Fix for template order logic. ([31478](https://github.com/WordPress/gutenberg/pull/31478))  ([31336](https://github.com/WordPress/gutenberg/pull/31336))
-
+## Changelog
 
+### Bug Fixes
 
+-   Fix for template order logic. ([31478](https://github.com/WordPress/gutenberg/pull/31478)) ([31336](https://github.com/WordPress/gutenberg/pull/31336))
 
 = 10.5.3 =
 
-## Bug Fixes
+## Changelog
 
- - Fix the stylesheet loading order for non FSE themes.
+### Bug Fixes
 
+-   Fix the stylesheet loading order for non FSE themes.
 
 = 10.5.2 =
 
-## Bug Fixes
+## Changelog
 
- - Include new API for useSelect to prevent the global editor white screen.
+### Bug Fixes
 
+-   Include new API for useSelect to prevent the global editor white screen.
 
 = 10.5.1 =
 
-
+## Changelog
 
 ### Bug Fixes
 
-- Plugin: Fix "Undefined variable: $image_default_size". ([31324](https://github.com/WordPress/gutenberg/pull/31324))
-- Select mode: Fix navigate by pointer. ([31321](https://github.com/WordPress/gutenberg/pull/31321))
-- Fix Inserter Drag and Drop. ([31319](https://github.com/WordPress/gutenberg/pull/31319))
+-   Plugin: Fix "Undefined variable: $image_default_size". ([31324](https://github.com/WordPress/gutenberg/pull/31324))
+-   Select mode: Fix navigate by pointer. ([31321](https://github.com/WordPress/gutenberg/pull/31321))
+-   Fix Inserter Drag and Drop. ([31319](https://github.com/WordPress/gutenberg/pull/31319))
 
 ### Code Quality
 
-- Plugin: Unregister only registered block patterns. ([31325](https://github.com/WordPress/gutenberg/pull/31325))
+-   Plugin: Unregister only registered block patterns. ([31325](https://github.com/WordPress/gutenberg/pull/31325))
 
+= 10.5.0 =
 
+## Changelog
 
+### Enhancements
 
-= 10.5.0 =
+-   Block Library:
+    -   Buttons:
+        -   Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394))
+        -   Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525))
+        -   Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870))
+    -   Columns: Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248))
+    -   File: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857))
+    -   List: Add placeholder attribute. ([30958](https://github.com/WordPress/gutenberg/pull/30958))
+    -   Post Comments Link: New block added. ([29564](https://github.com/WordPress/gutenberg/pull/29564))
+    -   Site Logo:
+        -   Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909))
+        -   Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907))
+    -   Site Title:
+        -   Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999))
+        -   Normalize the toolbar (II). ([31032](https://github.com/WordPress/gutenberg/pull/31032))
+    -   Social Links:
+        -   Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851))
+        -   Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721))
+    -   Template Part: Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731))
+    -   Term Description: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564))
+    -   Verse: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736))
+    -   Video: Add uploading state. ([30837](https://github.com/WordPress/gutenberg/pull/30837))
+-   Block Patterns:
+    -   Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973))
+    -   Small adjustments to bundled block patterns. ([31105](https://github.com/WordPress/gutenberg/pull/31105))
+    -   Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469))
+    -   Query Patterns:
+        -   Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763))
+        -   Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817))
+-   Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509))
+-   Design Tools:
+    -   Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124))
+    -   BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606))
+    -   Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869))
+-   General Interface:
+    -   Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802))
+    -   Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808))
+    -   Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075))
+    -   Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900))
+    -   Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339))
+-   Icons: Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673))
+-   i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419))
+-   Publishing Flow: Show post events in the post schedule calendar. ([29716](https://github.com/WordPress/gutenberg/pull/29716))
+-   Template Editing Mode:
+    -   Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438))
+    -   Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860))
+    -   Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793))
+    -   Updates the template mode canvas padding and adds a backlink. ([30658](https://github.com/WordPress/gutenberg/pull/30658))
+-   Site Editor:
+    -   Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395))
+    -   Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345))
+    -   Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336))
+    -   Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668))
+    -   Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599))
+-   Writing Flow: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924))
 
-### Enhancements
+### Bug Fixes
 
-- Block Library:
-  - Buttons:
-    - Add Typography support. ([30394](https://github.com/WordPress/gutenberg/pull/30394))
-    - Explicitly add text-align-center to legacy buttons. ([30525](https://github.com/WordPress/gutenberg/pull/30525))
-    - Update to use color support utils to retrieve classes and styles. ([30870](https://github.com/WordPress/gutenberg/pull/30870))
-  - Columns: Add column count to the column block label. ([30248](https://github.com/WordPress/gutenberg/pull/30248))
-  - File: Add support for embedding PDFs. ([30857](https://github.com/WordPress/gutenberg/pull/30857))
-  - List: Add placeholder attribute. ([30958](https://github.com/WordPress/gutenberg/pull/30958))
-  - Post Comments Link: New block added. ([29564](https://github.com/WordPress/gutenberg/pull/29564))
-  - Site Logo:
-    - Update the site logo description to be more illustrative. ([30909](https://github.com/WordPress/gutenberg/pull/30909))
-    - Add an initial value to the Site Logo block. ([30907](https://github.com/WordPress/gutenberg/pull/30907))
-  - Site Title:
-    - Normalize the toolbar. ([30999](https://github.com/WordPress/gutenberg/pull/30999))
-    - Normalize the toolbar (II). ([31032](https://github.com/WordPress/gutenberg/pull/31032))
-  - Social Links:
-    - Add text placeholder next to appender. ([29851](https://github.com/WordPress/gutenberg/pull/29851))
-    - Remove obsolete hardcoded focus style from Social Links. ([30721](https://github.com/WordPress/gutenberg/pull/30721))
-  - Template Part: Add active block variation information in Block Parent Selector. ([30731](https://github.com/WordPress/gutenberg/pull/30731))
-  - Term Description: Don't output if there's no description. ([30564](https://github.com/WordPress/gutenberg/pull/30564))
-  - Verse: Add support for custom colors. ([27736](https://github.com/WordPress/gutenberg/pull/27736))
-  - Video: Add uploading state. ([30837](https://github.com/WordPress/gutenberg/pull/30837))
-- Block Patterns:
-  - Revisit the bundled block patterns. ([29973](https://github.com/WordPress/gutenberg/pull/29973))
-  - Small adjustments to bundled block patterns. ([31105](https://github.com/WordPress/gutenberg/pull/31105))
-  - Suggest block pattern transformations that are contextual to the currently selected 'simple' blocks (no InnerBlocks). ([30469](https://github.com/WordPress/gutenberg/pull/30469))
-  - Query Patterns:
-    - Try more opinionated query block patterns. ([30763](https://github.com/WordPress/gutenberg/pull/30763))
-    - Add the small image and title pattern back in, fix excerpt length.. ([30817](https://github.com/WordPress/gutenberg/pull/30817))
-- Components: Add create-styles. ([30509](https://github.com/WordPress/gutenberg/pull/30509))
-- Design Tools:
-  - Add border color, style and width support. ([30124](https://github.com/WordPress/gutenberg/pull/30124))
-  - BoxControl: Allow configurable sides. ([30606](https://github.com/WordPress/gutenberg/pull/30606))
-  - Color Block Support: Add utilities to retrieve color classes and styles. ([30869](https://github.com/WordPress/gutenberg/pull/30869))
-- General Interface:
-  - Animate the canvas transitions. ([30802](https://github.com/WordPress/gutenberg/pull/30802))
-  - Include block title into block switcher label. ([30808](https://github.com/WordPress/gutenberg/pull/30808))
-  - Inspector Controls: Rephrase, polish, and make consistent color labels. ([30075](https://github.com/WordPress/gutenberg/pull/30075))
-  - Move the template mode edit and new links to a dedicated template panel. ([30900](https://github.com/WordPress/gutenberg/pull/30900))
-  - Update design of the resize handles. ([30339](https://github.com/WordPress/gutenberg/pull/30339))
-- Icons: Update icons for text overlay and crop. ([30673](https://github.com/WordPress/gutenberg/pull/30673))
-- i18n: Add `resetLocaleData` method. ([30419](https://github.com/WordPress/gutenberg/pull/30419))
-- Publishing Flow: Show post events in the post schedule calendar. ([29716](https://github.com/WordPress/gutenberg/pull/29716))
-- Template Editing Mode:
-  - Allow creating custom block templates in classic themes. ([30438](https://github.com/WordPress/gutenberg/pull/30438))
-  - Replace the document tab with a template tab in template mode. ([30860](https://github.com/WordPress/gutenberg/pull/30860))
-  - Unify saving flow between template mode and default mode. ([30793](https://github.com/WordPress/gutenberg/pull/30793))
-  - Updates the template mode canvas padding and adds a backlink. ([30658](https://github.com/WordPress/gutenberg/pull/30658))
-- Site Editor:
-  - Add 'area' selection to convert to template part flow. ([30395](https://github.com/WordPress/gutenberg/pull/30395))
-  - Add do_block_template_part function. ([30345](https://github.com/WordPress/gutenberg/pull/30345))
-  - Add skip link to block templates. ([30336](https://github.com/WordPress/gutenberg/pull/30336))
-  - Remove single-post from the default templates set. ([29668](https://github.com/WordPress/gutenberg/pull/29668))
-  - Themes: Fix template-hierarchy fallbacks. ([30599](https://github.com/WordPress/gutenberg/pull/30599))
-- Writing Flow: Scroll selected block only if it has no focus. ([30924](https://github.com/WordPress/gutenberg/pull/30924))
-
-
-### Bug Fixes
-
-- API Fetch: Make preloaded OPTIONS requests use `parse` setting. ([28862](https://github.com/WordPress/gutenberg/pull/28862))
-- Block Library:
-  - Duplicate media types to avoid bad imports. ([30973](https://github.com/WordPress/gutenberg/pull/30973))
-  - Image Block: Disable media buttons in the uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863))
-  - Query: Fix max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757))
-  - Post Title: Fix warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666))
-  - Site Title Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996))
-- Block Editor:
-  - Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955))
-  - Fix the position of vertical add a new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035))
-  - Template part: Fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928))
-- Components:
-  - Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010))
-  - Apply a StyleProvider around fills that can be used inside the iframe. ([31073](https://github.com/WordPress/gutenberg/pull/31073))
-  - Fix "RadioControl: checked" style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670))
-  - Fix Post Date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790))
-  - Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298))
-  - Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667))
-- General Interface: Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823))
-- Inserter: Stop event propagation for the select element's onBlur to fix the behavior in iOS when selecting a pattern category. ([30717](https://github.com/WordPress/gutenberg/pull/30717))
-- Site Editor:
-  - Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873))
-  - Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552))
-- Template Editing Mode: Hide the template selector and template mode from non-viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861))
+-   API Fetch: Make preloaded OPTIONS requests use `parse` setting. ([28862](https://github.com/WordPress/gutenberg/pull/28862))
+-   Block Library:
+    -   Duplicate media types to avoid bad imports. ([30973](https://github.com/WordPress/gutenberg/pull/30973))
+    -   Image Block: Disable media buttons in the uploading state. ([30863](https://github.com/WordPress/gutenberg/pull/30863))
+    -   Query: Fix max-height to query pattern preview. ([30757](https://github.com/WordPress/gutenberg/pull/30757))
+    -   Post Title: Fix warnings for RichText in inline containers. ([30666](https://github.com/WordPress/gutenberg/pull/30666))
+    -   Site Title Add default block after pressing enter at the end of Site Title. ([30996](https://github.com/WordPress/gutenberg/pull/30996))
+-   Block Editor:
+    -   Bring back imageDefaultSize shim for WP 5.7. ([30955](https://github.com/WordPress/gutenberg/pull/30955))
+    -   Fix the position of vertical add a new block in RTL mode. ([31035](https://github.com/WordPress/gutenberg/pull/31035))
+    -   Template part: Fix PHP notice for placeholder block. ([30928](https://github.com/WordPress/gutenberg/pull/30928))
+-   Components:
+    -   Add a StyleProvider to support CSS-in-JS components inside iframes. ([31010](https://github.com/WordPress/gutenberg/pull/31010))
+    -   Apply a StyleProvider around fills that can be used inside the iframe. ([31073](https://github.com/WordPress/gutenberg/pull/31073))
+    -   Fix "RadioControl: checked" style outside of Gutenberg. ([30670](https://github.com/WordPress/gutenberg/pull/30670))
+    -   Fix Post Date component. ([30790](https://github.com/WordPress/gutenberg/pull/30790))
+    -   Fix Post Publishing Popover moving when certain dates are clicked. ([30298](https://github.com/WordPress/gutenberg/pull/30298))
+    -   Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. ([30667](https://github.com/WordPress/gutenberg/pull/30667))
+-   General Interface: Fix is-link style to take colors from wp-admin theme. ([30823](https://github.com/WordPress/gutenberg/pull/30823))
+-   Inserter: Stop event propagation for the select element's onBlur to fix the behavior in iOS when selecting a pattern category. ([30717](https://github.com/WordPress/gutenberg/pull/30717))
+-   Site Editor:
+    -   Focus save button when entities save states panel is opened. ([30873](https://github.com/WordPress/gutenberg/pull/30873))
+    -   Remove call to wpautop that unintentionally alters block markup in template parts. ([30552](https://github.com/WordPress/gutenberg/pull/30552))
+-   Template Editing Mode: Hide the template selector and template mode from non-viewable post types. ([30861](https://github.com/WordPress/gutenberg/pull/30861))
 
 ### Experiments
 
-- Block-based Widgets:
-  - API:
-    - Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429))
-    - Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713))
-    - Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853))
-  - Customizer Integration:
-    - Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954))
-    - Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896))
-    - Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952))
-    - Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654))
-    - Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864))
-    - Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431))
-  - Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709))
-  - Widget editor:
-    - Add a toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826))
-    - Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989))
-- Navigation Editor and Block:
-  - Fix navigation placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824))
-  - Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441))
-  - Limit navigation nesting depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199))
-  - Nav-created drafts should not render on the front end. ([29692](https://github.com/WordPress/gutenberg/pull/29692))
-  - Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390))
-  - Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351))
-  - Use theme locations description instead of the slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797))
-- Global Styles:
-  - Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610))
-  - Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830))
-  - Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809))
-  - Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015))
-  - Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604))
-  - Only remove the default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895))
-  - Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801))
-  - Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605))
-  - theme.json: Add util to transform from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600))
+-   Block-based Widgets:
+    -   API:
+        -   Don't use deprecated widget_class property. ([30429](https://github.com/WordPress/gutenberg/pull/30429))
+        -   Fix null instance property when instance settings are empty. ([30713](https://github.com/WordPress/gutenberg/pull/30713))
+        -   Remove deprecated properties. ([30853](https://github.com/WordPress/gutenberg/pull/30853))
+    -   Customizer Integration:
+        -   Add media uploader capabilities to block-based widget customize screen. ([30954](https://github.com/WordPress/gutenberg/pull/30954))
+        -   Add move to widget area dropdown in customizer. ([30896](https://github.com/WordPress/gutenberg/pull/30896))
+        -   Add rich text formats. ([30952](https://github.com/WordPress/gutenberg/pull/30952))
+        -   Fix editing performance in Widgets Customizer. ([30654](https://github.com/WordPress/gutenberg/pull/30654))
+        -   Fix block-based widget customizer initializing too soon. ([30864](https://github.com/WordPress/gutenberg/pull/30864))
+        -   Refactor the inspector in Widgets Customizer to use core's controls. ([30431](https://github.com/WordPress/gutenberg/pull/30431))
+    -   Legacy Widget: Improve backwards compatibility. ([30709](https://github.com/WordPress/gutenberg/pull/30709))
+    -   Widget editor:
+        -   Add a toolbar button to move between widget areas. ([30826](https://github.com/WordPress/gutenberg/pull/30826))
+        -   Fix the undo/redo buttons in the standalone block-based widgets editor. ([30989](https://github.com/WordPress/gutenberg/pull/30989))
+-   Navigation Editor and Block:
+    -   Fix navigation placeholder height issue. ([30824](https://github.com/WordPress/gutenberg/pull/30824))
+    -   Fix alignment issue on the nav screen manage locations buttons. ([30441](https://github.com/WordPress/gutenberg/pull/30441))
+    -   Limit navigation nesting depth to 5. ([30199](https://github.com/WordPress/gutenberg/pull/30199))
+    -   Nav-created drafts should not render on the front end. ([29692](https://github.com/WordPress/gutenberg/pull/29692))
+    -   Page List: Add ability to convert to navigation links. ([30390](https://github.com/WordPress/gutenberg/pull/30390))
+    -   Show justification controls for vertical variant. ([30351](https://github.com/WordPress/gutenberg/pull/30351))
+    -   Use theme locations description instead of the slug for navigation screen location labels. ([30797](https://github.com/WordPress/gutenberg/pull/30797))
+-   Global Styles:
+    -   Absorb editor settings transformation in WP_Theme_JSON. ([30610](https://github.com/WordPress/gutenberg/pull/30610))
+    -   Clean cached data when switching themes. ([30830](https://github.com/WordPress/gutenberg/pull/30830))
+    -   Extract sanitize method. ([30809](https://github.com/WordPress/gutenberg/pull/30809))
+    -   Fix: CSS variable reference mechanism regression. ([31015](https://github.com/WordPress/gutenberg/pull/31015))
+    -   Make the dependency of the star matcher explicit when translating `theme.json`. ([30604](https://github.com/WordPress/gutenberg/pull/30604))
+    -   Only remove the default font family in the editor from themes with theme.json file. ([30895](https://github.com/WordPress/gutenberg/pull/30895))
+    -   Refactor how we iterate over the tree. ([30801](https://github.com/WordPress/gutenberg/pull/30801))
+    -   Remove no longer needed translations handled in PHP for settings. ([30605](https://github.com/WordPress/gutenberg/pull/30605))
+    -   theme.json: Add util to transform from a v0 schema to the latest. ([30600](https://github.com/WordPress/gutenberg/pull/30600))
 
 ### Documentation
 
-- docgen:
-  - Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971))
-  - Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681))
-  - Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675))
-  - Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945))
-- Handbook:
-  - Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039))
-  - Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040))
-  - Add fix to suggested prefixes of the branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953))
-  - Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911))
-  - Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569))
-  - Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819))
-  - Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818))
-  - Fixed a type and made the whole explanation more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487))
-  - Fixes broken GitHub links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875))
-  - Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946))
-  - Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792))
-  - Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980))
-  - Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733))
-  - Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447))
-- Libs:
-  - Blocks: Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050))
-  - Query Utils: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611))
-- License: Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383))
-- Packages:
-  - Block Library - Social Links: Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652))
-  - Components: Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796))
-  - Core Data: Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639))
-  - Block Editor: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704))
-  - Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501))
+-   docgen:
+    -   Add support for TS exported static non-function variables. ([30971](https://github.com/WordPress/gutenberg/pull/30971))
+    -   Add support for assignment patterns. ([30681](https://github.com/WordPress/gutenberg/pull/30681))
+    -   Add support for object-destructuring. ([30675](https://github.com/WordPress/gutenberg/pull/30675))
+    -   Find parameters by index rather than name and handle array destructuring. ([29945](https://github.com/WordPress/gutenberg/pull/29945))
+-   Handbook:
+    -   Add documentation for border block supports. ([31039](https://github.com/WordPress/gutenberg/pull/31039))
+    -   Add documentation for border styles. ([31040](https://github.com/WordPress/gutenberg/pull/31040))
+    -   Add fix to suggested prefixes of the branch. ([30953](https://github.com/WordPress/gutenberg/pull/30953))
+    -   Change references from Block Style Variations to Block Styles. ([30911](https://github.com/WordPress/gutenberg/pull/30911))
+    -   Fix Block Editor Accessibility link. ([30569](https://github.com/WordPress/gutenberg/pull/30569))
+    -   Fix more example for register_block_type - apiVersion to api_version. ([30819](https://github.com/WordPress/gutenberg/pull/30819))
+    -   Fix PHP example for register_block_type - apiVersion to api_version. ([30818](https://github.com/WordPress/gutenberg/pull/30818))
+    -   Fixed a type and made the whole explanation more clear. ([30487](https://github.com/WordPress/gutenberg/pull/30487))
+    -   Fixes broken GitHub links to commonly used labels. ([30875](https://github.com/WordPress/gutenberg/pull/30875))
+    -   Improve semantics in the block-based theme guide. ([30946](https://github.com/WordPress/gutenberg/pull/30946))
+    -   Include a note about `is_default` property for `register_block_style`. ([30792](https://github.com/WordPress/gutenberg/pull/30792))
+    -   Organize Block API Reference. ([30980](https://github.com/WordPress/gutenberg/pull/30980))
+    -   Packages: Further clarify the npm publishing process. ([30733](https://github.com/WordPress/gutenberg/pull/30733))
+    -   Update getting started with code. ([30447](https://github.com/WordPress/gutenberg/pull/30447))
+-   Libs:
+    -   Blocks: Fix PHPDocs of `gutenberg_block_has_support`. ([31050](https://github.com/WordPress/gutenberg/pull/31050))
+    -   Query Utils: Fix return type of `construct_wp_query_args()`. ([30611](https://github.com/WordPress/gutenberg/pull/30611))
+-   License: Interim dual license license of future contributions. ([30383](https://github.com/WordPress/gutenberg/pull/30383))
+-   Packages:
+    -   Block Library - Social Links: Update param type. ([30652](https://github.com/WordPress/gutenberg/pull/30652))
+    -   Components: Add documentation for the text prop on the Button component. ([30796](https://github.com/WordPress/gutenberg/pull/30796))
+    -   Core Data: Fixes return type for getEntitiesByKind. ([30639](https://github.com/WordPress/gutenberg/pull/30639))
+    -   Block Editor: Update import statement of ImageSizeControl component. ([30704](https://github.com/WordPress/gutenberg/pull/30704))
+    -   Hooks: Add namespace param clarification. ([30501](https://github.com/WordPress/gutenberg/pull/30501))
 
 ### Code Quality
 
-- Block Editor:
-  - Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036))
-  - Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245))
-- Block Library:
-  - Button Block: Use hook-based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194))
-  - Cover: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435))
-  - Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977))
-- Block Patterns: Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998))
-- Components: Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048))
-- dom:
-  - Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750))
-  - Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386))
-  - Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546))
-  - Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774))
-  - Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752))
-  - Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807))
-  - Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841))
-- Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310))
-- Gutenberg Plugin:
-  - Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894))
-  - Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715))
-  - Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714))
-  - Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794))
-  - Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938))
-- Improve get_merged_data() code. ([30612](https://github.com/WordPress/gutenberg/pull/30612))
-- Remove unnecessary semicolons in PHP. ([30780](https://github.com/WordPress/gutenberg/pull/30780))
-- Replace older-style PHP type conversion functions with typecasts. ([30531](https://github.com/WordPress/gutenberg/pull/30531))
+-   Block Editor:
+    -   Simplify focus capture. ([31036](https://github.com/WordPress/gutenberg/pull/31036))
+    -   Standardize loading default block editor settings. ([30245](https://github.com/WordPress/gutenberg/pull/30245))
+-   Block Library:
+    -   Button Block: Use hook-based border support. ([30194](https://github.com/WordPress/gutenberg/pull/30194))
+    -   Cover: Rename isBlogUrl to isUploadingMedia. ([30435](https://github.com/WordPress/gutenberg/pull/30435))
+    -   Cover: Use ALLOWED_MEDIA_TYPES shared constant. ([30977](https://github.com/WordPress/gutenberg/pull/30977))
+-   Block Patterns: Clean up bundled pattern titles & categories. ([30998](https://github.com/WordPress/gutenberg/pull/30998))
+-   Components: Remove `create-styles` in favor of vanilla emotion. ([31048](https://github.com/WordPress/gutenberg/pull/31048))
+-   dom:
+    -   Add types to caret placement functions. ([30750](https://github.com/WordPress/gutenberg/pull/30750))
+    -   Add types to document-has-selection. ([30386](https://github.com/WordPress/gutenberg/pull/30386))
+    -   Add types to is-edge and dependencies. ([30546](https://github.com/WordPress/gutenberg/pull/30546))
+    -   Add types to miscellaneous files. ([30774](https://github.com/WordPress/gutenberg/pull/30774))
+    -   Add types to removeInvalidHTML and stripHTML. ([30752](https://github.com/WordPress/gutenberg/pull/30752))
+    -   Only assert defined in development. ([30807](https://github.com/WordPress/gutenberg/pull/30807))
+    -   Type the remaining files. ([30841](https://github.com/WordPress/gutenberg/pull/30841))
+-   Drop zone: Rewrite without provider. ([30310](https://github.com/WordPress/gutenberg/pull/30310))
+-   Gutenberg Plugin:
+    -   Account for editor styles file removal on WP trunk. ([30894](https://github.com/WordPress/gutenberg/pull/30894))
+    -   Format all markdown files using Prettier formatter. ([30715](https://github.com/WordPress/gutenberg/pull/30715))
+    -   Format all JSON files using Prettier formatter. ([30714](https://github.com/WordPress/gutenberg/pull/30714))
+    -   Updated `.editorconfig` files to work with automatic file formatting. ([30794](https://github.com/WordPress/gutenberg/pull/30794))
+    -   Update WP compatibility check in `gutenberg_pre_init()`. ([29938](https://github.com/WordPress/gutenberg/pull/29938))
+-   Improve get_merged_data() code. ([30612](https://github.com/WordPress/gutenberg/pull/30612))
+-   Remove unnecessary semicolons in PHP. ([30780](https://github.com/WordPress/gutenberg/pull/30780))
+-   Replace older-style PHP type conversion functions with typecasts. ([30531](https://github.com/WordPress/gutenberg/pull/30531))
 
 ### Tools
 
-- Testing:
-  - Block Library - Cover Block:
-    - Add edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270))
-    - Replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306))
-  - Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449))
-  - Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813))
-  - Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748))
-  - Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981))
-  - Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984))
-- wp-env:
-  - Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882))
-  - Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045))
-  - Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651))
-  - Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053))
-  - Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692))
-  - Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638))
-  - Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808))
-  - Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646))
-- Build Tooling:
-  - Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629))
-  - Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341))
-  - Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628))
-  - Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615))
-  - Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868))
-  - Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347))
-  - Use consistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866))
-- Scripts:
-  - Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182))
-  - Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240))
-
+-   Testing:
+    -   Block Library - Cover Block:
+        -   Add edit media integration tests. ([30270](https://github.com/WordPress/gutenberg/pull/30270))
+        -   Replace media end-to-end test. ([30306](https://github.com/WordPress/gutenberg/pull/30306))
+    -   Fix end-to-end test failure screenshots not capturing at the right time. ([28449](https://github.com/WordPress/gutenberg/pull/28449))
+    -   Fixture regeneration: Infer tabs use from prettier configuration. ([30813](https://github.com/WordPress/gutenberg/pull/30813))
+    -   Skip unstable template part end-to-end test. ([30748](https://github.com/WordPress/gutenberg/pull/30748))
+    -   Trim block fixture HTML when generating other test fixture files. ([30981](https://github.com/WordPress/gutenberg/pull/30981))
+    -   Wire PHP tests for block editor settings. ([30984](https://github.com/WordPress/gutenberg/pull/30984))
+-   wp-env:
+    -   Better errors when Docker is not started. ([30882](https://github.com/WordPress/gutenberg/pull/30882))
+    -   Bump tt1-blocks dependency to v0.4.5. ([30045](https://github.com/WordPress/gutenberg/pull/30045))
+    -   Disable Xdebug for php < 7.2. ([30651](https://github.com/WordPress/gutenberg/pull/30651))
+    -   Fix chown cannot access 'wp-config.php'. ([30053](https://github.com/WordPress/gutenberg/pull/30053))
+    -   Fix issue with unquoted paths in docker-compose call. ([30692](https://github.com/WordPress/gutenberg/pull/30692))
+    -   Remove platform-specific destroy commands. ([30638](https://github.com/WordPress/gutenberg/pull/30638))
+    -   Set default environment type to local. ([28808](https://github.com/WordPress/gutenberg/pull/28808))
+    -   Update changelog and CI. ([30646](https://github.com/WordPress/gutenberg/pull/30646))
+-   Build Tooling:
+    -   Add comments to webpack entrypoint function. ([30629](https://github.com/WordPress/gutenberg/pull/30629))
+    -   Create frontend entry points for block-library, outputting code loadable from the browser.. ([30341](https://github.com/WordPress/gutenberg/pull/30341))
+    -   Perf Workflow: Trigger upon release publishing. ([30628](https://github.com/WordPress/gutenberg/pull/30628))
+    -   Pull trunk before pushing. ([30615](https://github.com/WordPress/gutenberg/pull/30615))
+    -   Remind about required cherry-picks after npm publishing. ([30868](https://github.com/WordPress/gutenberg/pull/30868))
+    -   Update development tools to work with PostCSS (try 2). ([30347](https://github.com/WordPress/gutenberg/pull/30347))
+    -   Use consistently latest keyword for npm publishing. ([30866](https://github.com/WordPress/gutenberg/pull/30866))
+-   Scripts:
+    -   Allow CSS modules in the build commands. ([29182](https://github.com/WordPress/gutenberg/pull/29182))
+    -   Include YAML files in prettification. ([30240](https://github.com/WordPress/gutenberg/pull/30240))
 
 = 10.4.1 =
 
-### Bug Fixes
+## Changelog
 
-- Editor: Handle case where unavailable siteData is causing WSOD. ([30812](https://github.com/WordPress/gutenberg/pull/30812))
-- Site Logo: Fix default size. ([30846](https://github.com/WordPress/gutenberg/pull/30846))
-- Latest posts block: Show error for password protected posts.
+### Bug Fixes
 
+-   Editor: Handle case where unavailable siteData is causing WSOD. ([30812](https://github.com/WordPress/gutenberg/pull/30812))
+-   Site Logo: Fix default size. ([30846](https://github.com/WordPress/gutenberg/pull/30846))
+-   Latest posts block: Show error for password protected posts.
 
 = 10.4.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Ensure Frontend/Editor block styles parity:
-  - Archives. ([30141](https://github.com/WordPress/gutenberg/pull/30141))
-  - Latest Comments. ([30134](https://github.com/WordPress/gutenberg/pull/30134))
-  - Quote. ([30190](https://github.com/WordPress/gutenberg/pull/30190))
-  - Separator. ([30255](https://github.com/WordPress/gutenberg/pull/30255)) ([30235](https://github.com/WordPress/gutenberg/pull/30235))
-  - Make the default padding match the browser's default padding. ([30277](https://github.com/WordPress/gutenberg/pull/30277)) ([30520](https://github.com/WordPress/gutenberg/pull/30520))
-- Block Library:
-  - Latest Comments: Remove list padding and margin. ([29402](https://github.com/WordPress/gutenberg/pull/29402))
-  - Post Date: Add option to make it a link. ([30499](https://github.com/WordPress/gutenberg/pull/30499))
-  - Post Excerpt: Fix toolbar for post excerpt warning. ([30280](https://github.com/WordPress/gutenberg/pull/30280))
-  - Post Title: Fix "'length' of undefined" error. ([30208](https://github.com/WordPress/gutenberg/pull/30208))
-  - Preformatted: Add color controls. ([28396](https://github.com/WordPress/gutenberg/pull/28396))
-  - Query: Use a WordPress loop for the query block. ([30405](https://github.com/WordPress/gutenberg/pull/30405))
-  - Search: Add border radius support. ([30227](https://github.com/WordPress/gutenberg/pull/30227))
-  - Site Logo: Style polishing. ([30526](https://github.com/WordPress/gutenberg/pull/30526))
-  - Template Part: Add padding support to template parts. ([29779](https://github.com/WordPress/gutenberg/pull/29779))
-  - Update placeholder text across blocks. ([30404](https://github.com/WordPress/gutenberg/pull/30404))
-- RichText:
-  - Add min width to show caret for empty inline container. ([30224](https://github.com/WordPress/gutenberg/pull/30224))
-  - Always show placholder on focus. ([30393](https://github.com/WordPress/gutenberg/pull/30393))
-- General Interaface:
-  - Add site icon and name to the publish flow. ([30231](https://github.com/WordPress/gutenberg/pull/30231))
-  - Use a darker canvas color. ([30282](https://github.com/WordPress/gutenberg/pull/30282))
-  - Update the save button label in the site editor. ([30439](https://github.com/WordPress/gutenberg/pull/30439))
-- Icons:
-  - Polish media & text icons. ([30239](https://github.com/WordPress/gutenberg/pull/30239))
-  - Update "close small" icon so that its shape matches the "add" icon dimensionally. ([30014](https://github.com/WordPress/gutenberg/pull/30014))
-  - Update site-logo block icon. ([30211](https://github.com/WordPress/gutenberg/pull/30211))
-- Inserter: Clarify that when the Inserter is open clicking the + button in the top bar will close it again. ([29759](https://github.com/WordPress/gutenberg/pull/29759))
-- Writing Flow: Use a shorter writing prompt. ([29611](https://github.com/WordPress/gutenberg/pull/29611))
-- List View: Improve the spacing, colors and icons ([30455](https://github.com/WordPress/gutenberg/pull/30455)) ([30303](https://github.com/WordPress/gutenberg/pull/30303))
-- Block Themes: Clarify the empty block templates message. ([30145](https://github.com/WordPress/gutenberg/pull/30145))
-- Site Editor:
-  - Allow reverting custom templates to their original theme-provided files. ([28141](https://github.com/WordPress/gutenberg/pull/28141))
-  - Use "Custom Styles" label to signal there are global styles changes in the saving panel. ([30521](https://github.com/WordPress/gutenberg/pull/30521))
-
-
-### Bug Fixes
-- Inserter: Show only the patterns that use allowed blocks. ([30300](https://github.com/WordPress/gutenberg/pull/30300))
-- Block Library:
-  - Buttons: Prevent overlapping button blocks in the frontend. ([30253](https://github.com/WordPress/gutenberg/pull/30253))
-  - Columns: Prevent having a width > 100%. ([30229](https://github.com/WordPress/gutenberg/pull/30229))
-  - Cover: Add 'object-position' to allowed inline style attributes list. ([30243](https://github.com/WordPress/gutenberg/pull/30243))
-  - Gallery: Avoid adding all media items in galleries using external URLs. ([30122](https://github.com/WordPress/gutenberg/pull/30122))
-  - Image: Do not preserve custom sizes when replacing images. ([29919](https://github.com/WordPress/gutenberg/pull/29919))
-  - Query:
-    - Fix undo trap during creation. ([30203](https://github.com/WordPress/gutenberg/pull/30203))
-    - Pagination Numbers: Print nothing if content is empty. ([30554](https://github.com/WordPress/gutenberg/pull/30554))
-  - RichText: Fix arrow navigation around emoji. ([30206](https://github.com/WordPress/gutenberg/pull/30206))
-  - Search block: Fix alignment issues. ([30444](https://github.com/WordPress/gutenberg/pull/30444))
-  - Site Logo: Delete sitelogo option when custom logo does not exist or was removed. ([30427](https://github.com/WordPress/gutenberg/pull/30427))
-- Block List: Fix mover position in the docked toolbar. ([30242](https://github.com/WordPress/gutenberg/pull/30242))
-- Code Editor: Revert save editors value on change (#27717). ([30524](https://github.com/WordPress/gutenberg/pull/30524))
-- Post Editor:
-  - Avoid focus attempt on a non-existent post title in code editor. ([29922](https://github.com/WordPress/gutenberg/pull/29922))
-  - Fix the post author selector for contributor roles. ([30218](https://github.com/WordPress/gutenberg/pull/30218))
-- Gutenberg Plugin: Ensure that plugin does not error with older versions of WordPress. ([30230](https://github.com/WordPress/gutenberg/pull/30230))
-- Inner blocks: Memoize allowedBlocks to prevent needlessly updating settings. ([30311](https://github.com/WordPress/gutenberg/pull/30311))
-- Server side renderer: Fix errors in template part editor context. ([29246](https://github.com/WordPress/gutenberg/pull/29246))
-- Writing Flow:
-  - Fix copy pasting non textual blocks. ([30225](https://github.com/WordPress/gutenberg/pull/30225))
-  - Fix horizontal caret placing for empty editable with placeholder. ([30463](https://github.com/WordPress/gutenberg/pull/30463))
-  - Fix multi-selection copying in Safari. ([30202](https://github.com/WordPress/gutenberg/pull/30202))
-- Site Editor:
-  - Fix nested template parts. ([30416](https://github.com/WordPress/gutenberg/pull/30416))
-  - Fix media upload behaviour and error state. ([30436](https://github.com/WordPress/gutenberg/pull/30436))
-  - Select the block inspector top upon selection. ([30387](https://github.com/WordPress/gutenberg/pull/30387))
-- Components: Stop matching autocompleter upon mismatch. ([30649](https://github.com/WordPress/gutenberg/pull/30649))
+-   Ensure Frontend/Editor block styles parity:
+    -   Archives. ([30141](https://github.com/WordPress/gutenberg/pull/30141))
+    -   Latest Comments. ([30134](https://github.com/WordPress/gutenberg/pull/30134))
+    -   Quote. ([30190](https://github.com/WordPress/gutenberg/pull/30190))
+    -   Separator. ([30255](https://github.com/WordPress/gutenberg/pull/30255)) ([30235](https://github.com/WordPress/gutenberg/pull/30235))
+    -   Make the default padding match the browser's default padding. ([30277](https://github.com/WordPress/gutenberg/pull/30277)) ([30520](https://github.com/WordPress/gutenberg/pull/30520))
+-   Block Library:
+    -   Latest Comments: Remove list padding and margin. ([29402](https://github.com/WordPress/gutenberg/pull/29402))
+    -   Post Date: Add option to make it a link. ([30499](https://github.com/WordPress/gutenberg/pull/30499))
+    -   Post Excerpt: Fix toolbar for post excerpt warning. ([30280](https://github.com/WordPress/gutenberg/pull/30280))
+    -   Post Title: Fix "'length' of undefined" error. ([30208](https://github.com/WordPress/gutenberg/pull/30208))
+    -   Preformatted: Add color controls. ([28396](https://github.com/WordPress/gutenberg/pull/28396))
+    -   Query: Use a WordPress loop for the query block. ([30405](https://github.com/WordPress/gutenberg/pull/30405))
+    -   Search: Add border radius support. ([30227](https://github.com/WordPress/gutenberg/pull/30227))
+    -   Site Logo: Style polishing. ([30526](https://github.com/WordPress/gutenberg/pull/30526))
+    -   Template Part: Add padding support to template parts. ([29779](https://github.com/WordPress/gutenberg/pull/29779))
+    -   Update placeholder text across blocks. ([30404](https://github.com/WordPress/gutenberg/pull/30404))
+-   RichText:
+    -   Add min width to show caret for empty inline container. ([30224](https://github.com/WordPress/gutenberg/pull/30224))
+    -   Always show placholder on focus. ([30393](https://github.com/WordPress/gutenberg/pull/30393))
+-   General Interaface:
+    -   Add site icon and name to the publish flow. ([30231](https://github.com/WordPress/gutenberg/pull/30231))
+    -   Use a darker canvas color. ([30282](https://github.com/WordPress/gutenberg/pull/30282))
+    -   Update the save button label in the site editor. ([30439](https://github.com/WordPress/gutenberg/pull/30439))
+-   Icons:
+    -   Polish media & text icons. ([30239](https://github.com/WordPress/gutenberg/pull/30239))
+    -   Update "close small" icon so that its shape matches the "add" icon dimensionally. ([30014](https://github.com/WordPress/gutenberg/pull/30014))
+    -   Update site-logo block icon. ([30211](https://github.com/WordPress/gutenberg/pull/30211))
+-   Inserter: Clarify that when the Inserter is open clicking the + button in the top bar will close it again. ([29759](https://github.com/WordPress/gutenberg/pull/29759))
+-   Writing Flow: Use a shorter writing prompt. ([29611](https://github.com/WordPress/gutenberg/pull/29611))
+-   List View: Improve the spacing, colors and icons ([30455](https://github.com/WordPress/gutenberg/pull/30455)) ([30303](https://github.com/WordPress/gutenberg/pull/30303))
+-   Block Themes: Clarify the empty block templates message. ([30145](https://github.com/WordPress/gutenberg/pull/30145))
+-   Site Editor:
+    -   Allow reverting custom templates to their original theme-provided files. ([28141](https://github.com/WordPress/gutenberg/pull/28141))
+    -   Use "Custom Styles" label to signal there are global styles changes in the saving panel. ([30521](https://github.com/WordPress/gutenberg/pull/30521))
+
+### Bug Fixes
+
+-   Inserter: Show only the patterns that use allowed blocks. ([30300](https://github.com/WordPress/gutenberg/pull/30300))
+-   Block Library:
+    -   Buttons: Prevent overlapping button blocks in the frontend. ([30253](https://github.com/WordPress/gutenberg/pull/30253))
+    -   Columns: Prevent having a width > 100%. ([30229](https://github.com/WordPress/gutenberg/pull/30229))
+    -   Cover: Add 'object-position' to allowed inline style attributes list. ([30243](https://github.com/WordPress/gutenberg/pull/30243))
+    -   Gallery: Avoid adding all media items in galleries using external URLs. ([30122](https://github.com/WordPress/gutenberg/pull/30122))
+    -   Image: Do not preserve custom sizes when replacing images. ([29919](https://github.com/WordPress/gutenberg/pull/29919))
+    -   Query:
+        -   Fix undo trap during creation. ([30203](https://github.com/WordPress/gutenberg/pull/30203))
+        -   Pagination Numbers: Print nothing if content is empty. ([30554](https://github.com/WordPress/gutenberg/pull/30554))
+    -   RichText: Fix arrow navigation around emoji. ([30206](https://github.com/WordPress/gutenberg/pull/30206))
+    -   Search block: Fix alignment issues. ([30444](https://github.com/WordPress/gutenberg/pull/30444))
+    -   Site Logo: Delete sitelogo option when custom logo does not exist or was removed. ([30427](https://github.com/WordPress/gutenberg/pull/30427))
+-   Block List: Fix mover position in the docked toolbar. ([30242](https://github.com/WordPress/gutenberg/pull/30242))
+-   Code Editor: Revert save editors value on change (#27717). ([30524](https://github.com/WordPress/gutenberg/pull/30524))
+-   Post Editor:
+    -   Avoid focus attempt on a non-existent post title in code editor. ([29922](https://github.com/WordPress/gutenberg/pull/29922))
+    -   Fix the post author selector for contributor roles. ([30218](https://github.com/WordPress/gutenberg/pull/30218))
+-   Gutenberg Plugin: Ensure that plugin does not error with older versions of WordPress. ([30230](https://github.com/WordPress/gutenberg/pull/30230))
+-   Inner blocks: Memoize allowedBlocks to prevent needlessly updating settings. ([30311](https://github.com/WordPress/gutenberg/pull/30311))
+-   Server side renderer: Fix errors in template part editor context. ([29246](https://github.com/WordPress/gutenberg/pull/29246))
+-   Writing Flow:
+    -   Fix copy pasting non textual blocks. ([30225](https://github.com/WordPress/gutenberg/pull/30225))
+    -   Fix horizontal caret placing for empty editable with placeholder. ([30463](https://github.com/WordPress/gutenberg/pull/30463))
+    -   Fix multi-selection copying in Safari. ([30202](https://github.com/WordPress/gutenberg/pull/30202))
+-   Site Editor:
+    -   Fix nested template parts. ([30416](https://github.com/WordPress/gutenberg/pull/30416))
+    -   Fix media upload behaviour and error state. ([30436](https://github.com/WordPress/gutenberg/pull/30436))
+    -   Select the block inspector top upon selection. ([30387](https://github.com/WordPress/gutenberg/pull/30387))
+-   Components: Stop matching autocompleter upon mismatch. ([30649](https://github.com/WordPress/gutenberg/pull/30649))
 
 ### APIs:
 
-- Add padding server-side block support. ([30332](https://github.com/WordPress/gutenberg/pull/30332))
-- Remove small APIs deprecated in WordPress 5.2. ([30283](https://github.com/WordPress/gutenberg/pull/30283))
-- Block Patterns: Remove `scope` from Query patterns and introduce `blockTypes`. ([30471](https://github.com/WordPress/gutenberg/pull/30471))
+-   Add padding server-side block support. ([30332](https://github.com/WordPress/gutenberg/pull/30332))
+-   Remove small APIs deprecated in WordPress 5.2. ([30283](https://github.com/WordPress/gutenberg/pull/30283))
+-   Block Patterns: Remove `scope` from Query patterns and introduce `blockTypes`. ([30471](https://github.com/WordPress/gutenberg/pull/30471))
 
 ### Experiments
 
-- Customizer
-  - Add customize widgets inserter. ([29549](https://github.com/WordPress/gutenberg/pull/29549))
-  - Add Legacy Widget block. ([30321](https://github.com/WordPress/gutenberg/pull/30321))
-  - Fix adding blocks in the widgets customizer. ([30221](https://github.com/WordPress/gutenberg/pull/30221))
-- Navigation Editor and Block
-  - Apply mover tweaks to navigation and widgets. ([30284](https://github.com/WordPress/gutenberg/pull/30284))
-  - Add src/navigation-link/index to side effect whitelist. ([30200](https://github.com/WordPress/gutenberg/pull/30200))
-  - Add post format variation to navigation link block. ([30403](https://github.com/WordPress/gutenberg/pull/30403))
-  - Avoid creating a new array/object on every render. ([30374](https://github.com/WordPress/gutenberg/pull/30374))
-  - De-emphasize "Link" block. ([30172](https://github.com/WordPress/gutenberg/pull/30172))
-  - Fix arrow inheritance, polish. ([30287](https://github.com/WordPress/gutenberg/pull/30287))
-  - Fix hardcoded color in navigation submenu icon. ([30385](https://github.com/WordPress/gutenberg/pull/30385))
-  - Fix Navigation Link block constantly updating its inner block list settings. ([30274](https://github.com/WordPress/gutenberg/pull/30274))
-  - Fix navigation link block dragging error. ([30219](https://github.com/WordPress/gutenberg/pull/30219))
-  - Fix snackbar list component blocking clicks to UI it overlaps. ([30381](https://github.com/WordPress/gutenberg/pull/30381))
-  - Flip orientation of submenus that are towards the right of the viewport. ([30342](https://github.com/WordPress/gutenberg/pull/30342))
-  - Indicate when a menu is deleted and show the menu switcher afterwards. ([29201](https://github.com/WordPress/gutenberg/pull/29201))
-  - Make the navigation placeholder clearer. ([30281](https://github.com/WordPress/gutenberg/pull/30281))
-  - Polish navigation menu submenus. ([30335](https://github.com/WordPress/gutenberg/pull/30335))
-  - Replace arrow with chevron. ([30180](https://github.com/WordPress/gutenberg/pull/30180))
-  - Save theme location on button click. ([30340](https://github.com/WordPress/gutenberg/pull/30340))
-  - Use same default implementation of __experimentalFetchLinkSuggestions in post, site, navigation, widget editor. ([29993](https://github.com/WordPress/gutenberg/pull/29993))
-- Widgets Editor
-  - Add manage with live preview link. ([29839](https://github.com/WordPress/gutenberg/pull/29839))
-  - Handle when $instance is empty and use str_replace instead of sprintf in the Widget block. ([30217](https://github.com/WordPress/gutenberg/pull/30217))
-  - Iterate on Legacy Widget block. ([29960](https://github.com/WordPress/gutenberg/pull/29960))
+-   Customizer
+    -   Add customize widgets inserter. ([29549](https://github.com/WordPress/gutenberg/pull/29549))
+    -   Add Legacy Widget block. ([30321](https://github.com/WordPress/gutenberg/pull/30321))
+    -   Fix adding blocks in the widgets customizer. ([30221](https://github.com/WordPress/gutenberg/pull/30221))
+-   Navigation Editor and Block
+    -   Apply mover tweaks to navigation and widgets. ([30284](https://github.com/WordPress/gutenberg/pull/30284))
+    -   Add src/navigation-link/index to side effect whitelist. ([30200](https://github.com/WordPress/gutenberg/pull/30200))
+    -   Add post format variation to navigation link block. ([30403](https://github.com/WordPress/gutenberg/pull/30403))
+    -   Avoid creating a new array/object on every render. ([30374](https://github.com/WordPress/gutenberg/pull/30374))
+    -   De-emphasize "Link" block. ([30172](https://github.com/WordPress/gutenberg/pull/30172))
+    -   Fix arrow inheritance, polish. ([30287](https://github.com/WordPress/gutenberg/pull/30287))
+    -   Fix hardcoded color in navigation submenu icon. ([30385](https://github.com/WordPress/gutenberg/pull/30385))
+    -   Fix Navigation Link block constantly updating its inner block list settings. ([30274](https://github.com/WordPress/gutenberg/pull/30274))
+    -   Fix navigation link block dragging error. ([30219](https://github.com/WordPress/gutenberg/pull/30219))
+    -   Fix snackbar list component blocking clicks to UI it overlaps. ([30381](https://github.com/WordPress/gutenberg/pull/30381))
+    -   Flip orientation of submenus that are towards the right of the viewport. ([30342](https://github.com/WordPress/gutenberg/pull/30342))
+    -   Indicate when a menu is deleted and show the menu switcher afterwards. ([29201](https://github.com/WordPress/gutenberg/pull/29201))
+    -   Make the navigation placeholder clearer. ([30281](https://github.com/WordPress/gutenberg/pull/30281))
+    -   Polish navigation menu submenus. ([30335](https://github.com/WordPress/gutenberg/pull/30335))
+    -   Replace arrow with chevron. ([30180](https://github.com/WordPress/gutenberg/pull/30180))
+    -   Save theme location on button click. ([30340](https://github.com/WordPress/gutenberg/pull/30340))
+    -   Use same default implementation of \_\_experimentalFetchLinkSuggestions in post, site, navigation, widget editor. ([29993](https://github.com/WordPress/gutenberg/pull/29993))
+-   Widgets Editor
+    -   Add manage with live preview link. ([29839](https://github.com/WordPress/gutenberg/pull/29839))
+    -   Handle when $instance is empty and use str_replace instead of sprintf in the Widget block. ([30217](https://github.com/WordPress/gutenberg/pull/30217))
+    -   Iterate on Legacy Widget block. ([29960](https://github.com/WordPress/gutenberg/pull/29960))
 
 ### Documentation
 
-- Handbook:
-  - Add description for `templateParts` in theme json. ([30118](https://github.com/WordPress/gutenberg/pull/30118))
-  - Add instructions for finding attributes for use in templates. ([30258](https://github.com/WordPress/gutenberg/pull/30258))
-  - Added a practical example of adding a component to the sidebar. ([30379](https://github.com/WordPress/gutenberg/pull/30379))
-  - Clarify what is meant by "block wrapper". ([30315](https://github.com/WordPress/gutenberg/pull/30315))
-  - Fix broken links to typescript documentation. ([30188](https://github.com/WordPress/gutenberg/pull/30188))
-  - Fix code snippet for disabling the block directory. ([30365](https://github.com/WordPress/gutenberg/pull/30365))
-  - Fix formatting. ([30309](https://github.com/WordPress/gutenberg/pull/30309))
-  - Fix typos in block-controls-toolbar-and-sidebar.md. ([30513](https://github.com/WordPress/gutenberg/pull/30513))
-  - Rename, changed URL Link. ([30483](https://github.com/WordPress/gutenberg/pull/30483))
-  - Rich Text: Add section for disabling specific format types. ([29383](https://github.com/WordPress/gutenberg/pull/29383))
-  - Updated documentation to reflect the output created currently by npx @wordpress/create-block gutenpride. ([30353](https://github.com/WordPress/gutenberg/pull/30353))
-  - Update feature deprecation guide. ([30220](https://github.com/WordPress/gutenberg/pull/30220))
-- Packages:
-  - Api-fetch: Fix example code for apiFetch middlewares. ([30534](https://github.com/WordPress/gutenberg/pull/30534))
-  - Block supports: Fix typos in layout supports comment. ([30537](https://github.com/WordPress/gutenberg/pull/30537))
-  - Block Editor: Fix block-editor typo. ([30401](https://github.com/WordPress/gutenberg/pull/30401))
-  - Components:
-    - Remove references to __experimental* in the DateTimePicker component documentation. ([29322](https://github.com/WordPress/gutenberg/pull/29322))
-    - Update CustomSelectControl component README.md. ([29854](https://github.com/WordPress/gutenberg/pull/29854))
-- docgen:
-  - Components: Add types to Draggable. ([29792](https://github.com/WordPress/gutenberg/pull/29792))
-  - Add types to clean-node-list. ([30412](https://github.com/WordPress/gutenberg/pull/30412))
-  - Add types progressively to dom modules. ([30103](https://github.com/WordPress/gutenberg/pull/30103))
-  - Add types to phrasing-content. ([30102](https://github.com/WordPress/gutenberg/pull/30102))
-  - Export all types from api-fetch. ([30539](https://github.com/WordPress/gutenberg/pull/30539))
-  - Fix arrow functions and TS index module support. ([30028](https://github.com/WordPress/gutenberg/pull/30028))
-  - deprecated: Export DeprecatedOptions to align with DefinitelyTyped. ([30677](https://github.com/WordPress/gutenberg/pull/30677))
-  - api-fetch: Align exported type names with DefinitelyTyped types. ([30570](https://github.com/WordPress/gutenberg/pull/30570))
+-   Handbook:
+    -   Add description for `templateParts` in theme json. ([30118](https://github.com/WordPress/gutenberg/pull/30118))
+    -   Add instructions for finding attributes for use in templates. ([30258](https://github.com/WordPress/gutenberg/pull/30258))
+    -   Added a practical example of adding a component to the sidebar. ([30379](https://github.com/WordPress/gutenberg/pull/30379))
+    -   Clarify what is meant by "block wrapper". ([30315](https://github.com/WordPress/gutenberg/pull/30315))
+    -   Fix broken links to typescript documentation. ([30188](https://github.com/WordPress/gutenberg/pull/30188))
+    -   Fix code snippet for disabling the block directory. ([30365](https://github.com/WordPress/gutenberg/pull/30365))
+    -   Fix formatting. ([30309](https://github.com/WordPress/gutenberg/pull/30309))
+    -   Fix typos in block-controls-toolbar-and-sidebar.md. ([30513](https://github.com/WordPress/gutenberg/pull/30513))
+    -   Rename, changed URL Link. ([30483](https://github.com/WordPress/gutenberg/pull/30483))
+    -   Rich Text: Add section for disabling specific format types. ([29383](https://github.com/WordPress/gutenberg/pull/29383))
+    -   Updated documentation to reflect the output created currently by npx @wordpress/create-block gutenpride. ([30353](https://github.com/WordPress/gutenberg/pull/30353))
+    -   Update feature deprecation guide. ([30220](https://github.com/WordPress/gutenberg/pull/30220))
+-   Packages:
+    -   Api-fetch: Fix example code for apiFetch middlewares. ([30534](https://github.com/WordPress/gutenberg/pull/30534))
+    -   Block supports: Fix typos in layout supports comment. ([30537](https://github.com/WordPress/gutenberg/pull/30537))
+    -   Block Editor: Fix block-editor typo. ([30401](https://github.com/WordPress/gutenberg/pull/30401))
+    -   Components:
+        -   Remove references to \_\_experimental\* in the DateTimePicker component documentation. ([29322](https://github.com/WordPress/gutenberg/pull/29322))
+        -   Update CustomSelectControl component README.md. ([29854](https://github.com/WordPress/gutenberg/pull/29854))
+-   docgen:
+    -   Components: Add types to Draggable. ([29792](https://github.com/WordPress/gutenberg/pull/29792))
+    -   Add types to clean-node-list. ([30412](https://github.com/WordPress/gutenberg/pull/30412))
+    -   Add types progressively to dom modules. ([30103](https://github.com/WordPress/gutenberg/pull/30103))
+    -   Add types to phrasing-content. ([30102](https://github.com/WordPress/gutenberg/pull/30102))
+    -   Export all types from api-fetch. ([30539](https://github.com/WordPress/gutenberg/pull/30539))
+    -   Fix arrow functions and TS index module support. ([30028](https://github.com/WordPress/gutenberg/pull/30028))
+    -   deprecated: Export DeprecatedOptions to align with DefinitelyTyped. ([30677](https://github.com/WordPress/gutenberg/pull/30677))
+    -   api-fetch: Align exported type names with DefinitelyTyped types. ([30570](https://github.com/WordPress/gutenberg/pull/30570))
 
 ### Code Quality
 
-- Block Editor: Use proper insertion point for drop. ([29933](https://github.com/WordPress/gutenberg/pull/29933))
-- Block Library: Fix Post Excerpt warnings for RichText in inline containers. ([30498](https://github.com/WordPress/gutenberg/pull/30498))
-- Components: Simplify ScrollLock, adding types. ([29634](https://github.com/WordPress/gutenberg/pull/29634))
-- Gutenberg Plugin:
-  - Prettify YAML scripts. ([30409](https://github.com/WordPress/gutenberg/pull/30409))
-  - Remove deprecations planned for 10.3 release. ([30417](https://github.com/WordPress/gutenberg/pull/30417))
-  - Update the `objectFitPolyfill` vendor library. ([30507](https://github.com/WordPress/gutenberg/pull/30507))
-- PHP Coding Standards fixes. ([30346](https://github.com/WordPress/gutenberg/pull/30346))
+-   Block Editor: Use proper insertion point for drop. ([29933](https://github.com/WordPress/gutenberg/pull/29933))
+-   Block Library: Fix Post Excerpt warnings for RichText in inline containers. ([30498](https://github.com/WordPress/gutenberg/pull/30498))
+-   Components: Simplify ScrollLock, adding types. ([29634](https://github.com/WordPress/gutenberg/pull/29634))
+-   Gutenberg Plugin:
+    -   Prettify YAML scripts. ([30409](https://github.com/WordPress/gutenberg/pull/30409))
+    -   Remove deprecations planned for 10.3 release. ([30417](https://github.com/WordPress/gutenberg/pull/30417))
+    -   Update the `objectFitPolyfill` vendor library. ([30507](https://github.com/WordPress/gutenberg/pull/30507))
+-   PHP Coding Standards fixes. ([30346](https://github.com/WordPress/gutenberg/pull/30346))
 
 ### Tools
 
-- Add `/packages/stylelint-config` to `CODEOWNERS`. ([30264](https://github.com/WordPress/gutenberg/pull/30264))
-- Build: Ensure non-JS changes are processed in the watch mode. ([30343](https://github.com/WordPress/gutenberg/pull/30343))
-- Testing:
-  - Added end-to-end tests for navigation menu name editor. ([29774](https://github.com/WordPress/gutenberg/pull/29774))
-  - GHA workflow improvements when setting up NodeJS. ([29078](https://github.com/WordPress/gutenberg/pull/29078))
-  - Include NodeJS version in the cache key. ([30512](https://github.com/WordPress/gutenberg/pull/30512))
-  - Remove button from forbidden elements. ([30223](https://github.com/WordPress/gutenberg/pull/30223))
-  - Remove cache `restore-keys`. ([30510](https://github.com/WordPress/gutenberg/pull/30510))
-  - Skip flaky end-to-end tests. ([30344](https://github.com/WordPress/gutenberg/pull/30344))
-
+-   Add `/packages/stylelint-config` to `CODEOWNERS`. ([30264](https://github.com/WordPress/gutenberg/pull/30264))
+-   Build: Ensure non-JS changes are processed in the watch mode. ([30343](https://github.com/WordPress/gutenberg/pull/30343))
+-   Testing:
+    -   Added end-to-end tests for navigation menu name editor. ([29774](https://github.com/WordPress/gutenberg/pull/29774))
+    -   GHA workflow improvements when setting up NodeJS. ([29078](https://github.com/WordPress/gutenberg/pull/29078))
+    -   Include NodeJS version in the cache key. ([30512](https://github.com/WordPress/gutenberg/pull/30512))
+    -   Remove button from forbidden elements. ([30223](https://github.com/WordPress/gutenberg/pull/30223))
+    -   Remove cache `restore-keys`. ([30510](https://github.com/WordPress/gutenberg/pull/30510))
+    -   Skip flaky end-to-end tests. ([30344](https://github.com/WordPress/gutenberg/pull/30344))
 
 = 10.3.2 =
 
+## Changelog
+
 ### Enhancements
 
-- Remove the default block margins from themes with theme.json file. ([30375](https://github.com/WordPress/gutenberg/pull/30375))
+-   Remove the default block margins from themes with theme.json file. ([30375](https://github.com/WordPress/gutenberg/pull/30375))
 
 ### Bug Fixes
 
-- Site title block: Remove custom theme.json selector. ([30558](https://github.com/WordPress/gutenberg/pull/30558))
-- Components: Query autocomplete by the term from last trigger prefix character. ([30540](https://github.com/WordPress/gutenberg/pull/30540))
-- Bug fixes backported in WordPress minor release. ([30528](https://github.com/WordPress/gutenberg/pull/30528))
-- Rich Text: Fix multi-select copy. ([30197](https://github.com/WordPress/gutenberg/pull/30197))
-
-
-
+-   Site title block: Remove custom theme.json selector. ([30558](https://github.com/WordPress/gutenberg/pull/30558))
+-   Components: Query autocomplete by the term from last trigger prefix character. ([30540](https://github.com/WordPress/gutenberg/pull/30540))
+-   Bug fixes backported in WordPress minor release. ([30528](https://github.com/WordPress/gutenberg/pull/30528))
+-   Rich Text: Fix multi-select copy. ([30197](https://github.com/WordPress/gutenberg/pull/30197))
 
 = 10.3.1 =
 
-### Bug Fixes
+## Changelog
 
-- Restore color preset CSS variables for custom links for themes with the  `experimental-link-color` support flag enabled. ([30452](https://github.com/WordPress/gutenberg/pull/30452))
-- Restore the inner `<div />` of the Group block in the editor for classic themes. ([30453](https://github.com/WordPress/gutenberg/pull/30453))
-- Fix content loss for Group block when used with lots of nesting. ([30460](https://github.com/WordPress/gutenberg/pull/30460))
+### Bug Fixes
 
+-   Restore color preset CSS variables for custom links for themes with the `experimental-link-color` support flag enabled. ([30452](https://github.com/WordPress/gutenberg/pull/30452))
+-   Restore the inner `<div />` of the Group block in the editor for classic themes. ([30453](https://github.com/WordPress/gutenberg/pull/30453))
+-   Fix content loss for Group block when used with lots of nesting. ([30460](https://github.com/WordPress/gutenberg/pull/30460))
 
 = 10.3.0 =
 
+## Changelog
+
 ### Enhancements
 
 -   Add `since` versions to the deprecated features. ([30072](https://github.com/WordPress/gutenberg/pull/30072))
@@ -14955,623 +39668,634 @@ General Interface:
 -   Packages: Enforce version bump for production packages after WP major. ([29903](https://github.com/WordPress/gutenberg/pull/29903))
 -   Unit Testing: Allow TypeScript modules for transpiled packages. ([29873](https://github.com/WordPress/gutenberg/pull/29873))
 
-
 = 10.2.1 =
 
-### Bug Fixes
+## Changelog
 
-- Button: Restore gradients support. ([29980](https://github.com/WordPress/gutenberg/pull/29980))
+### Bug Fixes
 
+-   Button: Restore gradients support. ([29980](https://github.com/WordPress/gutenberg/pull/29980))
 
 = 10.2.0 =
 
+## Changelog
+
 ### Features
 
-- Template part block: Add category panel. ([29159](https://github.com/WordPress/gutenberg/pull/29159))
+-   Template part block: Add category panel. ([29159](https://github.com/WordPress/gutenberg/pull/29159))
 
 ### Enhancements
 
-- Add check for button text before rendering button block. ([29717](https://github.com/WordPress/gutenberg/pull/29717))
-- Skip CSS minification via PHP. ([29624](https://github.com/WordPress/gutenberg/pull/29624))
-- Restore the margins of blocks relying on the figure element. ([29517](https://github.com/WordPress/gutenberg/pull/29517))
-- Add Columns transform from Media & Text. ([29415](https://github.com/WordPress/gutenberg/pull/29415))
-- Fix: Invert gallery gravity. ([29367](https://github.com/WordPress/gutenberg/pull/29367))
-- Components: Try to make the order of fills stable in regular slots. ([29287](https://github.com/WordPress/gutenberg/pull/29287))
-- Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. ([29110](https://github.com/WordPress/gutenberg/pull/29110))
-- Hide writing prompt from subsequent empty paragraphs. ([28275](https://github.com/WordPress/gutenberg/pull/28275))
+-   Add check for button text before rendering button block. ([29717](https://github.com/WordPress/gutenberg/pull/29717))
+-   Skip CSS minification via PHP. ([29624](https://github.com/WordPress/gutenberg/pull/29624))
+-   Restore the margins of blocks relying on the figure element. ([29517](https://github.com/WordPress/gutenberg/pull/29517))
+-   Add Columns transform from Media & Text. ([29415](https://github.com/WordPress/gutenberg/pull/29415))
+-   Fix: Invert gallery gravity. ([29367](https://github.com/WordPress/gutenberg/pull/29367))
+-   Components: Try to make the order of fills stable in regular slots. ([29287](https://github.com/WordPress/gutenberg/pull/29287))
+-   Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. ([29110](https://github.com/WordPress/gutenberg/pull/29110))
+-   Hide writing prompt from subsequent empty paragraphs. ([28275](https://github.com/WordPress/gutenberg/pull/28275))
 
 ### New APIs
 
-- Plugins: Add scoping functionality to the Plugins API. ([27438](https://github.com/WordPress/gutenberg/pull/27438))
-
-### Bug Fixes
-
-- Reusable Blocks:
-  - Fix editor crash when converting block with visible styles to reusable (after a save and page reload). ([29059](https://github.com/WordPress/gutenberg/pull/29059))
-  - Fix reusable block crash when converting a just created reusable block to blocks. ([29292](https://github.com/WordPress/gutenberg/pull/29292))
-- Buttons Block:
-  - Buttons: Fix links inside links. ([29273](https://github.com/WordPress/gutenberg/pull/29273))
-  - Fix legacy button center alignments inside the buttons block. ([29281](https://github.com/WordPress/gutenberg/pull/29281))
-- Cover Block:
-  - Fix cover block content position not migrating correctly from deprecated version. ([29542](https://github.com/WordPress/gutenberg/pull/29542))
-  - Fix solid-color only cover has small gray border in the editor only. ([29499](https://github.com/WordPress/gutenberg/pull/29499))
-- Social Icons and Links:
-  - Fix social icons vertical spacing issue. ([29657](https://github.com/WordPress/gutenberg/pull/29657))
-  - Yelp: Fix foreground color, make background transparent. ([29660](https://github.com/WordPress/gutenberg/pull/29660))
-  - Social Links: Replace CSS variables with block context approach. ([29330](https://github.com/WordPress/gutenberg/pull/29330))
-- Table of Contents block:
-  - Fix links when in archive loop or when using "Plain" permalink structure. ([29394](https://github.com/WordPress/gutenberg/pull/29394))
-  - Fix class attribute. ([29317](https://github.com/WordPress/gutenberg/pull/29317))
-- Add theme styles in the site editor. ([29704](https://github.com/WordPress/gutenberg/pull/29704))
-- Fix broken links to the block editor developer handbook. ([29663](https://github.com/WordPress/gutenberg/pull/29663))
-- Fix in between inserter edge case. ([29625](https://github.com/WordPress/gutenberg/pull/29625))
-- Fix the button component styles when used with a dashicon. ([29614](https://github.com/WordPress/gutenberg/pull/29614))
-- Revert moving is-typing class. ([29608](https://github.com/WordPress/gutenberg/pull/29608))
-- Fix inline block styles minification issues with calc(). ([29554](https://github.com/WordPress/gutenberg/pull/29554))
-- Packages: Update the publishing command for npm with next dist tag. ([29379](https://github.com/WordPress/gutenberg/pull/29379))
-- Ignore build folders when native unit tests. ([29371](https://github.com/WordPress/gutenberg/pull/29371))
-- Fix mobile issue template label. ([29344](https://github.com/WordPress/gutenberg/pull/29344))
-- Interface: Fix React warnings triggered in ActionItem component. ([29340](https://github.com/WordPress/gutenberg/pull/29340))
-- Search block: Add missing space to provide valid HTML. ([29314](https://github.com/WordPress/gutenberg/pull/29314))
-- Blocks: Ensure that metadata registered on the server for core block is preserved on the client (try 2). ([29302](https://github.com/WordPress/gutenberg/pull/29302))
-- Fix off-center appender in some themes. ([29290](https://github.com/WordPress/gutenberg/pull/29290))
-- Add enableCustomSpacing to block editor settings. ([29277](https://github.com/WordPress/gutenberg/pull/29277))
-- Border Radius Support: Fix application of zero radius values. ([28998](https://github.com/WordPress/gutenberg/pull/28998))
-- Fix Document Outline mouse click. ([28589](https://github.com/WordPress/gutenberg/pull/28589))
-- Fix typos in template part area tags. ([29937](https://github.com/WordPress/gutenberg/pull/29937))
-- Gallery Block: Fix the crop images setting. ([29823](https://github.com/WordPress/gutenberg/pull/29823))
-- Fix Error: Could not process the 'wp-config.php' transformation. ([29800](https://github.com/WordPress/gutenberg/pull/29800))
+-   Plugins: Add scoping functionality to the Plugins API. ([27438](https://github.com/WordPress/gutenberg/pull/27438))
+
+### Bug Fixes
+
+-   Reusable Blocks:
+    -   Fix editor crash when converting block with visible styles to reusable (after a save and page reload). ([29059](https://github.com/WordPress/gutenberg/pull/29059))
+    -   Fix reusable block crash when converting a just created reusable block to blocks. ([29292](https://github.com/WordPress/gutenberg/pull/29292))
+-   Buttons Block:
+    -   Buttons: Fix links inside links. ([29273](https://github.com/WordPress/gutenberg/pull/29273))
+    -   Fix legacy button center alignments inside the buttons block. ([29281](https://github.com/WordPress/gutenberg/pull/29281))
+-   Cover Block:
+    -   Fix cover block content position not migrating correctly from deprecated version. ([29542](https://github.com/WordPress/gutenberg/pull/29542))
+    -   Fix solid-color only cover has small gray border in the editor only. ([29499](https://github.com/WordPress/gutenberg/pull/29499))
+-   Social Icons and Links:
+    -   Fix social icons vertical spacing issue. ([29657](https://github.com/WordPress/gutenberg/pull/29657))
+    -   Yelp: Fix foreground color, make background transparent. ([29660](https://github.com/WordPress/gutenberg/pull/29660))
+    -   Social Links: Replace CSS variables with block context approach. ([29330](https://github.com/WordPress/gutenberg/pull/29330))
+-   Table of Contents block:
+    -   Fix links when in archive loop or when using "Plain" permalink structure. ([29394](https://github.com/WordPress/gutenberg/pull/29394))
+    -   Fix class attribute. ([29317](https://github.com/WordPress/gutenberg/pull/29317))
+-   Add theme styles in the site editor. ([29704](https://github.com/WordPress/gutenberg/pull/29704))
+-   Fix broken links to the block editor developer handbook. ([29663](https://github.com/WordPress/gutenberg/pull/29663))
+-   Fix in between inserter edge case. ([29625](https://github.com/WordPress/gutenberg/pull/29625))
+-   Fix the button component styles when used with a dashicon. ([29614](https://github.com/WordPress/gutenberg/pull/29614))
+-   Revert moving is-typing class. ([29608](https://github.com/WordPress/gutenberg/pull/29608))
+-   Fix inline block styles minification issues with calc(). ([29554](https://github.com/WordPress/gutenberg/pull/29554))
+-   Packages: Update the publishing command for npm with next dist tag. ([29379](https://github.com/WordPress/gutenberg/pull/29379))
+-   Ignore build folders when native unit tests. ([29371](https://github.com/WordPress/gutenberg/pull/29371))
+-   Fix mobile issue template label. ([29344](https://github.com/WordPress/gutenberg/pull/29344))
+-   Interface: Fix React warnings triggered in ActionItem component. ([29340](https://github.com/WordPress/gutenberg/pull/29340))
+-   Search block: Add missing space to provide valid HTML. ([29314](https://github.com/WordPress/gutenberg/pull/29314))
+-   Blocks: Ensure that metadata registered on the server for core block is preserved on the client (try 2). ([29302](https://github.com/WordPress/gutenberg/pull/29302))
+-   Fix off-center appender in some themes. ([29290](https://github.com/WordPress/gutenberg/pull/29290))
+-   Add enableCustomSpacing to block editor settings. ([29277](https://github.com/WordPress/gutenberg/pull/29277))
+-   Border Radius Support: Fix application of zero radius values. ([28998](https://github.com/WordPress/gutenberg/pull/28998))
+-   Fix Document Outline mouse click. ([28589](https://github.com/WordPress/gutenberg/pull/28589))
+-   Fix typos in template part area tags. ([29937](https://github.com/WordPress/gutenberg/pull/29937))
+-   Gallery Block: Fix the crop images setting. ([29823](https://github.com/WordPress/gutenberg/pull/29823))
+-   Fix Error: Could not process the 'wp-config.php' transformation. ([29800](https://github.com/WordPress/gutenberg/pull/29800))
 
 ### Performance
 
-- Revert "Block edit: Avoid memoized block context in favour of useSelect". ([29621](https://github.com/WordPress/gutenberg/pull/29621))
+-   Revert "Block edit: Avoid memoized block context in favour of useSelect". ([29621](https://github.com/WordPress/gutenberg/pull/29621))
 
 ### Experiments
 
-- Global Styles:
-  - Do not add padding sub-properties if there's no values in theme.json. ([29712](https://github.com/WordPress/gutenberg/pull/29712))
-  - Fix specificity conflict of blocks with single classes as selectors. ([29378](https://github.com/WordPress/gutenberg/pull/29378))
-  - Fix specificity issue between theme and user styles. ([29533](https://github.com/WordPress/gutenberg/pull/29533))
-  - Custom Link Color: Do not apply to buttons. ([29557](https://github.com/WordPress/gutenberg/pull/29557))
-  - Implement skip serialization for color key in style att. ([29253](https://github.com/WordPress/gutenberg/pull/29253))
-- Full-Site Editing:
-  - Site Title: Add text decoration and text transform controls. ([29622](https://github.com/WordPress/gutenberg/pull/29622))
-  - Make border work on the site editor. ([29618](https://github.com/WordPress/gutenberg/pull/29618))
-  - Prevent clicking on tag and category links in the site editor. ([29583](https://github.com/WordPress/gutenberg/pull/29583))
-  - Print nothing in the front end if there are no results in Query block. ([29521](https://github.com/WordPress/gutenberg/pull/29521))
-  - [Query block] Remove exclusion of current page id. ([29432](https://github.com/WordPress/gutenberg/pull/29432))
-  - Handle missing categories/tags in Query block. ([29424](https://github.com/WordPress/gutenberg/pull/29424))
-  - Query block setup with block patterns integration. ([28891](https://github.com/WordPress/gutenberg/pull/28891))
-  - Update template descriptions for clarity and humanity. ([29531](https://github.com/WordPress/gutenberg/pull/29531))
-  - i18n: Fix the template area unassigned type string. ([29617](https://github.com/WordPress/gutenberg/pull/29617))
-  - Template Part: Prevent infinite recursion. ([28456](https://github.com/WordPress/gutenberg/pull/28456))
-  - Update title, description, and icon of Post Categories. ([29400](https://github.com/WordPress/gutenberg/pull/29400))
-  - Show Site Logo's block toolbar when selected, after the editor loads. ([29336](https://github.com/WordPress/gutenberg/pull/29336))
-  - Remove delete toolbar option from Site Logo. ([29331](https://github.com/WordPress/gutenberg/pull/29331))
-- Navigation Editor and Block:
-  - Allow very thin menus. ([29555](https://github.com/WordPress/gutenberg/pull/29555))
-  - Refactor and simplify navigation block CSS. ([29465](https://github.com/WordPress/gutenberg/pull/29465))
-  - Make navigation placeholder state visible in dark themes. ([29366](https://github.com/WordPress/gutenberg/pull/29366))
-  - Update navigation editor menu selection dropdown. ([29202](https://github.com/WordPress/gutenberg/pull/29202))
-  - Make Spacer block width adjustable and add it to Navigation block. ([29133](https://github.com/WordPress/gutenberg/pull/29133))
-  - Navigation: Try adding navigation link variants via server. ([29095](https://github.com/WordPress/gutenberg/pull/29095))
-  - Navigation Editor: Allow menu renaming. ([29012](https://github.com/WordPress/gutenberg/pull/29012))
-- Group Block: Add support for custom border settings. ([29591](https://github.com/WordPress/gutenberg/pull/29591))
-- Pass block settings to the client for all blocks. ([29474](https://github.com/WordPress/gutenberg/pull/29474))
-- Button block: Add color support via block.json. ([29382](https://github.com/WordPress/gutenberg/pull/29382))
-- Add/new nav link icon. ([29369](https://github.com/WordPress/gutenberg/pull/29369))
-- Temporary hack to render blocks in customizer. ([29365](https://github.com/WordPress/gutenberg/pull/29365))
-- Fix shortcode not showing in the widgets screen. ([29282](https://github.com/WordPress/gutenberg/pull/29282))
-- Fix: More resilient appender CSS. ([28908](https://github.com/WordPress/gutenberg/pull/28908))
+-   Global Styles:
+    -   Do not add padding sub-properties if there's no values in theme.json. ([29712](https://github.com/WordPress/gutenberg/pull/29712))
+    -   Fix specificity conflict of blocks with single classes as selectors. ([29378](https://github.com/WordPress/gutenberg/pull/29378))
+    -   Fix specificity issue between theme and user styles. ([29533](https://github.com/WordPress/gutenberg/pull/29533))
+    -   Custom Link Color: Do not apply to buttons. ([29557](https://github.com/WordPress/gutenberg/pull/29557))
+    -   Implement skip serialization for color key in style att. ([29253](https://github.com/WordPress/gutenberg/pull/29253))
+-   Full-Site Editing:
+    -   Site Title: Add text decoration and text transform controls. ([29622](https://github.com/WordPress/gutenberg/pull/29622))
+    -   Make border work on the site editor. ([29618](https://github.com/WordPress/gutenberg/pull/29618))
+    -   Prevent clicking on tag and category links in the site editor. ([29583](https://github.com/WordPress/gutenberg/pull/29583))
+    -   Print nothing in the front end if there are no results in Query block. ([29521](https://github.com/WordPress/gutenberg/pull/29521))
+    -   [Query block] Remove exclusion of current page id. ([29432](https://github.com/WordPress/gutenberg/pull/29432))
+    -   Handle missing categories/tags in Query block. ([29424](https://github.com/WordPress/gutenberg/pull/29424))
+    -   Query block setup with block patterns integration. ([28891](https://github.com/WordPress/gutenberg/pull/28891))
+    -   Update template descriptions for clarity and humanity. ([29531](https://github.com/WordPress/gutenberg/pull/29531))
+    -   i18n: Fix the template area unassigned type string. ([29617](https://github.com/WordPress/gutenberg/pull/29617))
+    -   Template Part: Prevent infinite recursion. ([28456](https://github.com/WordPress/gutenberg/pull/28456))
+    -   Update title, description, and icon of Post Categories. ([29400](https://github.com/WordPress/gutenberg/pull/29400))
+    -   Show Site Logo's block toolbar when selected, after the editor loads. ([29336](https://github.com/WordPress/gutenberg/pull/29336))
+    -   Remove delete toolbar option from Site Logo. ([29331](https://github.com/WordPress/gutenberg/pull/29331))
+-   Navigation Editor and Block:
+    -   Allow very thin menus. ([29555](https://github.com/WordPress/gutenberg/pull/29555))
+    -   Refactor and simplify navigation block CSS. ([29465](https://github.com/WordPress/gutenberg/pull/29465))
+    -   Make navigation placeholder state visible in dark themes. ([29366](https://github.com/WordPress/gutenberg/pull/29366))
+    -   Update navigation editor menu selection dropdown. ([29202](https://github.com/WordPress/gutenberg/pull/29202))
+    -   Make Spacer block width adjustable and add it to Navigation block. ([29133](https://github.com/WordPress/gutenberg/pull/29133))
+    -   Navigation: Try adding navigation link variants via server. ([29095](https://github.com/WordPress/gutenberg/pull/29095))
+    -   Navigation Editor: Allow menu renaming. ([29012](https://github.com/WordPress/gutenberg/pull/29012))
+-   Group Block: Add support for custom border settings. ([29591](https://github.com/WordPress/gutenberg/pull/29591))
+-   Pass block settings to the client for all blocks. ([29474](https://github.com/WordPress/gutenberg/pull/29474))
+-   Button block: Add color support via block.json. ([29382](https://github.com/WordPress/gutenberg/pull/29382))
+-   Add/new nav link icon. ([29369](https://github.com/WordPress/gutenberg/pull/29369))
+-   Temporary hack to render blocks in customizer. ([29365](https://github.com/WordPress/gutenberg/pull/29365))
+-   Fix shortcode not showing in the widgets screen. ([29282](https://github.com/WordPress/gutenberg/pull/29282))
+-   Fix: More resilient appender CSS. ([28908](https://github.com/WordPress/gutenberg/pull/28908))
 
 ### Documentation
 
-- Add block variations page to Block API summary. ([29725](https://github.com/WordPress/gutenberg/pull/29725))
-- Update Readme of Animate Component to remove todo comment. ([29702](https://github.com/WordPress/gutenberg/pull/29702))
-- Docs; Organize contributors section using READMEs. ([29688](https://github.com/WordPress/gutenberg/pull/29688))
-- Remove mid-paragraph newlines. ([29674](https://github.com/WordPress/gutenberg/pull/29674))
-- Update Versions in WordPress to include release notes. ([29532](https://github.com/WordPress/gutenberg/pull/29532))
-- Extract block variations API into its own handbook page. ([29515](https://github.com/WordPress/gutenberg/pull/29515))
-- Docs: Fix deprecation message to be clear. ([29451](https://github.com/WordPress/gutenberg/pull/29451))
-- Fix typo in block-based-themes.md. ([29410](https://github.com/WordPress/gutenberg/pull/29410))
-- Fix typo in modularity. ([29405](https://github.com/WordPress/gutenberg/pull/29405))
-- Fix typos in git workflow documentation. ([29324](https://github.com/WordPress/gutenberg/pull/29324))
-- Docs: Table of contents - fix typos. ([29319](https://github.com/WordPress/gutenberg/pull/29319))
-- Add NVDA instructions to the accessibility testing documentation. ([29312](https://github.com/WordPress/gutenberg/pull/29312))
-- Component Systems: Update references to external module. ([29233](https://github.com/WordPress/gutenberg/pull/29233))
-- Docs: Add info about npm release types and their schedule. ([29028](https://github.com/WordPress/gutenberg/pull/29028))
-- Docs: Update slug for block-based theme tutorial. ([25839](https://github.com/WordPress/gutenberg/pull/25839))
+-   Add block variations page to Block API summary. ([29725](https://github.com/WordPress/gutenberg/pull/29725))
+-   Update Readme of Animate Component to remove todo comment. ([29702](https://github.com/WordPress/gutenberg/pull/29702))
+-   Docs; Organize contributors section using READMEs. ([29688](https://github.com/WordPress/gutenberg/pull/29688))
+-   Remove mid-paragraph newlines. ([29674](https://github.com/WordPress/gutenberg/pull/29674))
+-   Update Versions in WordPress to include release notes. ([29532](https://github.com/WordPress/gutenberg/pull/29532))
+-   Extract block variations API into its own handbook page. ([29515](https://github.com/WordPress/gutenberg/pull/29515))
+-   Docs: Fix deprecation message to be clear. ([29451](https://github.com/WordPress/gutenberg/pull/29451))
+-   Fix typo in block-based-themes.md. ([29410](https://github.com/WordPress/gutenberg/pull/29410))
+-   Fix typo in modularity. ([29405](https://github.com/WordPress/gutenberg/pull/29405))
+-   Fix typos in git workflow documentation. ([29324](https://github.com/WordPress/gutenberg/pull/29324))
+-   Docs: Table of contents - fix typos. ([29319](https://github.com/WordPress/gutenberg/pull/29319))
+-   Add NVDA instructions to the accessibility testing documentation. ([29312](https://github.com/WordPress/gutenberg/pull/29312))
+-   Component Systems: Update references to external module. ([29233](https://github.com/WordPress/gutenberg/pull/29233))
+-   Docs: Add info about npm release types and their schedule. ([29028](https://github.com/WordPress/gutenberg/pull/29028))
+-   Docs: Update slug for block-based theme tutorial. ([25839](https://github.com/WordPress/gutenberg/pull/25839))
 
 ### Code Quality
 
-- Rename load_separate_block_styles to load_separate_block_assets. ([29703](https://github.com/WordPress/gutenberg/pull/29703))
-- Update the minimum WordPress version required by the gutenberg plugin too 5.6. ([29701](https://github.com/WordPress/gutenberg/pull/29701))
-- Components: Ensure that SlotFill does not use portals in React Native. ([29631](https://github.com/WordPress/gutenberg/pull/29631))
-- Remove the subheading block. ([29627](https://github.com/WordPress/gutenberg/pull/29627))
-- useFocusFirstElement: Include useRef. ([29435](https://github.com/WordPress/gutenberg/pull/29435))
-- Include PHP: Replace `dirname( __FILE__ )` with `__DIR__`. ([29404](https://github.com/WordPress/gutenberg/pull/29404))
-- Run phpcbf to fix PHP CS issues. ([29368](https://github.com/WordPress/gutenberg/pull/29368))
-- Register style attribute when any color property is supported. ([29349](https://github.com/WordPress/gutenberg/pull/29349))
-- Block context:
-  - Remove unused onFocus block context. ([29318](https://github.com/WordPress/gutenberg/pull/29318))
-  - Reduce memoized block context: Class names. ([29186](https://github.com/WordPress/gutenberg/pull/29186))
-  - Remove obsolete block context. ([29313](https://github.com/WordPress/gutenberg/pull/29313))
-  - Block edit: Avoid memoized block context in favour of useSelect. ([29333](https://github.com/WordPress/gutenberg/pull/29333))
+-   Rename load_separate_block_styles to load_separate_block_assets. ([29703](https://github.com/WordPress/gutenberg/pull/29703))
+-   Update the minimum WordPress version required by the gutenberg plugin too 5.6. ([29701](https://github.com/WordPress/gutenberg/pull/29701))
+-   Components: Ensure that SlotFill does not use portals in React Native. ([29631](https://github.com/WordPress/gutenberg/pull/29631))
+-   Remove the subheading block. ([29627](https://github.com/WordPress/gutenberg/pull/29627))
+-   useFocusFirstElement: Include useRef. ([29435](https://github.com/WordPress/gutenberg/pull/29435))
+-   Include PHP: Replace `dirname( __FILE__ )` with `__DIR__`. ([29404](https://github.com/WordPress/gutenberg/pull/29404))
+-   Run phpcbf to fix PHP CS issues. ([29368](https://github.com/WordPress/gutenberg/pull/29368))
+-   Register style attribute when any color property is supported. ([29349](https://github.com/WordPress/gutenberg/pull/29349))
+-   Block context:
+    -   Remove unused onFocus block context. ([29318](https://github.com/WordPress/gutenberg/pull/29318))
+    -   Reduce memoized block context: Class names. ([29186](https://github.com/WordPress/gutenberg/pull/29186))
+    -   Remove obsolete block context. ([29313](https://github.com/WordPress/gutenberg/pull/29313))
+    -   Block edit: Avoid memoized block context in favour of useSelect. ([29333](https://github.com/WordPress/gutenberg/pull/29333))
 
 ### Tools
 
-- Scripts:
-  - Fork jest-environment-puppeteer to use puppeteer-core directly. ([29418](https://github.com/WordPress/gutenberg/pull/29418))
-  - Add TypeScript support to linting command. ([27143](https://github.com/WordPress/gutenberg/pull/27143))
-- Needs Info / Stale bot
-  - Add stale issues bot to help triage efforts. ([29321](https://github.com/WordPress/gutenberg/pull/29321))
-  - Do not automatically close message, update stale message. ([29310](https://github.com/WordPress/gutenberg/pull/29310))
-- Tests:
-  - Temporary skip flaky test. ([29601](https://github.com/WordPress/gutenberg/pull/29601))
-  - Paragraph block: Add test to ensure unwrapped editable paragraph. ([29299](https://github.com/WordPress/gutenberg/pull/29299))
-  - Testing: Use snapshot-diff serializer to remove noise in snapshots. ([29270](https://github.com/WordPress/gutenberg/pull/29270))
-  - Inserter: Add end-to-end test to make sure last inserted block is being focused. ([29187](https://github.com/WordPress/gutenberg/pull/29187))
-- Blocks: Preprocess validation log with util.format instead of sprintf. ([29334](https://github.com/WordPress/gutenberg/pull/29334))
-- Docs: Update release.md. ([29091](https://github.com/WordPress/gutenberg/pull/29091))
-- Docs/Tools/CI: Update references from `master` to `trunk`. ([28433](https://github.com/WordPress/gutenberg/pull/28433))
+-   Scripts:
+    -   Fork jest-environment-puppeteer to use puppeteer-core directly. ([29418](https://github.com/WordPress/gutenberg/pull/29418))
+    -   Add TypeScript support to linting command. ([27143](https://github.com/WordPress/gutenberg/pull/27143))
+-   Needs Info / Stale bot
+    -   Add stale issues bot to help triage efforts. ([29321](https://github.com/WordPress/gutenberg/pull/29321))
+    -   Do not automatically close message, update stale message. ([29310](https://github.com/WordPress/gutenberg/pull/29310))
+-   Tests:
+    -   Temporary skip flaky test. ([29601](https://github.com/WordPress/gutenberg/pull/29601))
+    -   Paragraph block: Add test to ensure unwrapped editable paragraph. ([29299](https://github.com/WordPress/gutenberg/pull/29299))
+    -   Testing: Use snapshot-diff serializer to remove noise in snapshots. ([29270](https://github.com/WordPress/gutenberg/pull/29270))
+    -   Inserter: Add end-to-end test to make sure last inserted block is being focused. ([29187](https://github.com/WordPress/gutenberg/pull/29187))
+-   Blocks: Preprocess validation log with util.format instead of sprintf. ([29334](https://github.com/WordPress/gutenberg/pull/29334))
+-   Docs: Update release.md. ([29091](https://github.com/WordPress/gutenberg/pull/29091))
+-   Docs/Tools/CI: Update references from `master` to `trunk`. ([28433](https://github.com/WordPress/gutenberg/pull/28433))
 
 ### Various
 
-- Full-Site Editing
-  - Site Editor: Browsing sidebar templates menu restructure. ([28291](https://github.com/WordPress/gutenberg/pull/28291))
-  - Site Editor: Persistent List View. ([28637](https://github.com/WordPress/gutenberg/pull/28637))
-  - Template part block: Add variations based on areas. ([29122](https://github.com/WordPress/gutenberg/pull/29122))
-  - Template Part: Update switching trigger. ([29257](https://github.com/WordPress/gutenberg/pull/29257))
-  - Template part 'area' term - reword confusing 'type' terminology. ([29679](https://github.com/WordPress/gutenberg/pull/29679))
-  - Add i18n support for template part variations' descriptions. ([29612](https://github.com/WordPress/gutenberg/pull/29612))
-  - Multi entity save panel - remove dynamic copy. ([29637](https://github.com/WordPress/gutenberg/pull/29637))
-- Table of Contents block
-  - Add Table of Contents block (dynamic rendering + hooks version). ([21234](https://github.com/WordPress/gutenberg/pull/21234))
-  - Deregister TOC block until issues are resolved. ([29718](https://github.com/WordPress/gutenberg/pull/29718))
-- Components:
-  - Add next Button, ButtonGroup. ([29230](https://github.com/WordPress/gutenberg/pull/29230))
-  - Add Card. ([29350](https://github.com/WordPress/gutenberg/pull/29350))
-  - Add Divider. ([29433](https://github.com/WordPress/gutenberg/pull/29433))
-  - Add Popover. ([29084](https://github.com/WordPress/gutenberg/pull/29084))
-  - Add TooltipButton. ([29523](https://github.com/WordPress/gutenberg/pull/29523))
-  - Add Tooltip and Shortcut. ([29385](https://github.com/WordPress/gutenberg/pull/29385))
-  - Do not use ViewOwnProps for Portal. ([29345](https://github.com/WordPress/gutenberg/pull/29345))
-  - Update Elevation story. ([29454](https://github.com/WordPress/gutenberg/pull/29454))
-- Component System:
-  - Add basic tests for style system. ([29320](https://github.com/WordPress/gutenberg/pull/29320))
-  - Add tests for color utils. ([29301](https://github.com/WordPress/gutenberg/pull/29301))
-- Types
-  - api-fetch: Add incremental type checking. ([29685](https://github.com/WordPress/gutenberg/pull/29685))
-  - docgen: Add TypeScript support. ([29189](https://github.com/WordPress/gutenberg/pull/29189))
-  - docgen: Incrementally add types. ([29684](https://github.com/WordPress/gutenberg/pull/29684))
-  - Dom: Add type-checking to data-transfer. ([29682](https://github.com/WordPress/gutenberg/pull/29682))
-  - Components: Add types to Shortcut. ([29633](https://github.com/WordPress/gutenberg/pull/29633))
-- Button Block: Removes "Link settings" panel. ([29664](https://github.com/WordPress/gutenberg/pull/29664))
-- Add regression test for editor JS crash caused by rtlcss parsing exception, take 2. ([29598](https://github.com/WordPress/gutenberg/pull/29598))
-- Reset all WP Admin styles in the wrapper of the editor styles. ([29590](https://github.com/WordPress/gutenberg/pull/29590))
-- Revert "[Mobile] - Fix splitting/merging of Paragraph and Heading". ([29587](https://github.com/WordPress/gutenberg/pull/29587))
-- Try updating the minimum required WordPress version for the plugin. ([29579](https://github.com/WordPress/gutenberg/pull/29579))
-- Documents how the widgets editor works. ([29572](https://github.com/WordPress/gutenberg/pull/29572))
-- Drop zone: Fix media lib duplicate issue. ([29567](https://github.com/WordPress/gutenberg/pull/29567))
-- Update the category icons. ([29553](https://github.com/WordPress/gutenberg/pull/29553))
-- Try: Remove important on disabled switcher state. ([29552](https://github.com/WordPress/gutenberg/pull/29552))
-- Remove base control negative help text margin. ([29550](https://github.com/WordPress/gutenberg/pull/29550))
-- Navigation: Re-enable navigation block end-to-end tests. ([29543](https://github.com/WordPress/gutenberg/pull/29543))
-- Accessibility improvement on #29530 issue. ([29534](https://github.com/WordPress/gutenberg/pull/29534))
-- Pin SHA values as version numbers for 3rd party GHAs. ([29485](https://github.com/WordPress/gutenberg/pull/29485))
-- Update the visual design of the Sidebar Menu. ([29476](https://github.com/WordPress/gutenberg/pull/29476))
-- Focus on block selection: Skip inner blocks. ([29434](https://github.com/WordPress/gutenberg/pull/29434))
-- Use correct classname for nested Navigation Link container. ([29380](https://github.com/WordPress/gutenberg/pull/29380))
-- Integrate AztecEditor-iOS 1.19.4. ([29355](https://github.com/WordPress/gutenberg/pull/29355))
-- Block context: Separate native context. ([29315](https://github.com/WordPress/gutenberg/pull/29315))
-- Focus input when InputControl spinner arrows are pressed. ([29305](https://github.com/WordPress/gutenberg/pull/29305))
-- WP Block Styles: Only load in the editor if a theme opts in. ([29252](https://github.com/WordPress/gutenberg/pull/29252))
-- Add new overlay text icon, and use for image. ([29215](https://github.com/WordPress/gutenberg/pull/29215))
-- Add Missing URL state to Navigation Link Block. ([28861](https://github.com/WordPress/gutenberg/pull/28861))
-- Improve dropcap behavior. ([28685](https://github.com/WordPress/gutenberg/pull/28685))
-- Improve the block editor handbook table of content. ([28665](https://github.com/WordPress/gutenberg/pull/28665))
-- RN: Add Bottom Sheet Select Control component. ([28543](https://github.com/WordPress/gutenberg/pull/28543))
-- RichText: Bypass paste filters for internal paste. ([27967](https://github.com/WordPress/gutenberg/pull/27967))
-- Block Directory: Update search results list UI. ([25521](https://github.com/WordPress/gutenberg/pull/25521))
-
+-   Full-Site Editing
+    -   Site Editor: Browsing sidebar templates menu restructure. ([28291](https://github.com/WordPress/gutenberg/pull/28291))
+    -   Site Editor: Persistent List View. ([28637](https://github.com/WordPress/gutenberg/pull/28637))
+    -   Template part block: Add variations based on areas. ([29122](https://github.com/WordPress/gutenberg/pull/29122))
+    -   Template Part: Update switching trigger. ([29257](https://github.com/WordPress/gutenberg/pull/29257))
+    -   Template part 'area' term - reword confusing 'type' terminology. ([29679](https://github.com/WordPress/gutenberg/pull/29679))
+    -   Add i18n support for template part variations' descriptions. ([29612](https://github.com/WordPress/gutenberg/pull/29612))
+    -   Multi entity save panel - remove dynamic copy. ([29637](https://github.com/WordPress/gutenberg/pull/29637))
+-   Table of Contents block
+    -   Add Table of Contents block (dynamic rendering + hooks version). ([21234](https://github.com/WordPress/gutenberg/pull/21234))
+    -   Deregister TOC block until issues are resolved. ([29718](https://github.com/WordPress/gutenberg/pull/29718))
+-   Components:
+    -   Add next Button, ButtonGroup. ([29230](https://github.com/WordPress/gutenberg/pull/29230))
+    -   Add Card. ([29350](https://github.com/WordPress/gutenberg/pull/29350))
+    -   Add Divider. ([29433](https://github.com/WordPress/gutenberg/pull/29433))
+    -   Add Popover. ([29084](https://github.com/WordPress/gutenberg/pull/29084))
+    -   Add TooltipButton. ([29523](https://github.com/WordPress/gutenberg/pull/29523))
+    -   Add Tooltip and Shortcut. ([29385](https://github.com/WordPress/gutenberg/pull/29385))
+    -   Do not use ViewOwnProps for Portal. ([29345](https://github.com/WordPress/gutenberg/pull/29345))
+    -   Update Elevation story. ([29454](https://github.com/WordPress/gutenberg/pull/29454))
+-   Component System:
+    -   Add basic tests for style system. ([29320](https://github.com/WordPress/gutenberg/pull/29320))
+    -   Add tests for color utils. ([29301](https://github.com/WordPress/gutenberg/pull/29301))
+-   Types
+    -   api-fetch: Add incremental type checking. ([29685](https://github.com/WordPress/gutenberg/pull/29685))
+    -   docgen: Add TypeScript support. ([29189](https://github.com/WordPress/gutenberg/pull/29189))
+    -   docgen: Incrementally add types. ([29684](https://github.com/WordPress/gutenberg/pull/29684))
+    -   Dom: Add type-checking to data-transfer. ([29682](https://github.com/WordPress/gutenberg/pull/29682))
+    -   Components: Add types to Shortcut. ([29633](https://github.com/WordPress/gutenberg/pull/29633))
+-   Button Block: Removes "Link settings" panel. ([29664](https://github.com/WordPress/gutenberg/pull/29664))
+-   Add regression test for editor JS crash caused by rtlcss parsing exception, take 2. ([29598](https://github.com/WordPress/gutenberg/pull/29598))
+-   Reset all WP Admin styles in the wrapper of the editor styles. ([29590](https://github.com/WordPress/gutenberg/pull/29590))
+-   Revert "[Mobile] - Fix splitting/merging of Paragraph and Heading". ([29587](https://github.com/WordPress/gutenberg/pull/29587))
+-   Try updating the minimum required WordPress version for the plugin. ([29579](https://github.com/WordPress/gutenberg/pull/29579))
+-   Documents how the widgets editor works. ([29572](https://github.com/WordPress/gutenberg/pull/29572))
+-   Drop zone: Fix media lib duplicate issue. ([29567](https://github.com/WordPress/gutenberg/pull/29567))
+-   Update the category icons. ([29553](https://github.com/WordPress/gutenberg/pull/29553))
+-   Try: Remove important on disabled switcher state. ([29552](https://github.com/WordPress/gutenberg/pull/29552))
+-   Remove base control negative help text margin. ([29550](https://github.com/WordPress/gutenberg/pull/29550))
+-   Navigation: Re-enable navigation block end-to-end tests. ([29543](https://github.com/WordPress/gutenberg/pull/29543))
+-   Accessibility improvement on #29530 issue. ([29534](https://github.com/WordPress/gutenberg/pull/29534))
+-   Pin SHA values as version numbers for 3rd party GHAs. ([29485](https://github.com/WordPress/gutenberg/pull/29485))
+-   Update the visual design of the Sidebar Menu. ([29476](https://github.com/WordPress/gutenberg/pull/29476))
+-   Focus on block selection: Skip inner blocks. ([29434](https://github.com/WordPress/gutenberg/pull/29434))
+-   Use correct classname for nested Navigation Link container. ([29380](https://github.com/WordPress/gutenberg/pull/29380))
+-   Integrate AztecEditor-iOS 1.19.4. ([29355](https://github.com/WordPress/gutenberg/pull/29355))
+-   Block context: Separate native context. ([29315](https://github.com/WordPress/gutenberg/pull/29315))
+-   Focus input when InputControl spinner arrows are pressed. ([29305](https://github.com/WordPress/gutenberg/pull/29305))
+-   WP Block Styles: Only load in the editor if a theme opts in. ([29252](https://github.com/WordPress/gutenberg/pull/29252))
+-   Add new overlay text icon, and use for image. ([29215](https://github.com/WordPress/gutenberg/pull/29215))
+-   Add Missing URL state to Navigation Link Block. ([28861](https://github.com/WordPress/gutenberg/pull/28861))
+-   Improve dropcap behavior. ([28685](https://github.com/WordPress/gutenberg/pull/28685))
+-   Improve the block editor handbook table of content. ([28665](https://github.com/WordPress/gutenberg/pull/28665))
+-   RN: Add Bottom Sheet Select Control component. ([28543](https://github.com/WordPress/gutenberg/pull/28543))
+-   RichText: Bypass paste filters for internal paste. ([27967](https://github.com/WordPress/gutenberg/pull/27967))
+-   Block Directory: Update search results list UI. ([25521](https://github.com/WordPress/gutenberg/pull/25521))
 
 = 10.1.1 =
 
+## Changelog
+
 ### Bug Fixes
 
-- withNotices:  Ensure that the callback props are stable. ([29491](https://github.com/WordPress/gutenberg/pull/29491))
+-   withNotices: Ensure that the callback props are stable. ([29491](https://github.com/WordPress/gutenberg/pull/29491))
 
 ### Various
 
-- withNotices: Memoize the noticeOperations object. ([29582](https://github.com/WordPress/gutenberg/pull/29582))
-
+-   withNotices: Memoize the noticeOperations object. ([29582](https://github.com/WordPress/gutenberg/pull/29582))
 
 = 10.1.0 =
 
+## Changelog
+
 ### Features
-- Use a modal for the reusable blocks creation flow. ([29040](https://github.com/WordPress/gutenberg/pull/29040))
-- Normalize Image's block toolbar. ([29205](https://github.com/WordPress/gutenberg/pull/29205))
-- Add Items Justification to Social Links. ([28980](https://github.com/WordPress/gutenberg/pull/28980))
+
+-   Use a modal for the reusable blocks creation flow. ([29040](https://github.com/WordPress/gutenberg/pull/29040))
+-   Normalize Image's block toolbar. ([29205](https://github.com/WordPress/gutenberg/pull/29205))
+-   Add Items Justification to Social Links. ([28980](https://github.com/WordPress/gutenberg/pull/28980))
 
 ### Enhancements
 
-- Improve the sorting algorithm while searching parent pages. ([29143](https://github.com/WordPress/gutenberg/pull/29143))
-- Buttons: Add space-between justification controls. ([29160](https://github.com/WordPress/gutenberg/pull/29160))
-- Avoid focusing blocks when inserting them into the canvas. ([28191](https://github.com/WordPress/gutenberg/pull/28191))
-- Create Block: Use register_block_type_from_metadata to register blocks on the server. ([28883](https://github.com/WordPress/gutenberg/pull/28883))
-- Greatly improve dragging performance of the focal point picker. ([28676](https://github.com/WordPress/gutenberg/pull/28676))
-- Improve block search input's accessible name and placeholder. ([28393](https://github.com/WordPress/gutenberg/pull/28393))
+-   Improve the sorting algorithm while searching parent pages. ([29143](https://github.com/WordPress/gutenberg/pull/29143))
+-   Buttons: Add space-between justification controls. ([29160](https://github.com/WordPress/gutenberg/pull/29160))
+-   Avoid focusing blocks when inserting them into the canvas. ([28191](https://github.com/WordPress/gutenberg/pull/28191))
+-   Create Block: Use register_block_type_from_metadata to register blocks on the server. ([28883](https://github.com/WordPress/gutenberg/pull/28883))
+-   Greatly improve dragging performance of the focal point picker. ([28676](https://github.com/WordPress/gutenberg/pull/28676))
+-   Improve block search input's accessible name and placeholder. ([28393](https://github.com/WordPress/gutenberg/pull/28393))
 
 ### New APIs
-- Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array. ([29099](https://github.com/WordPress/gutenberg/pull/29099))
-
-### Bug Fixes
-
-- Fix Slash Inserter position. ([29288](https://github.com/WordPress/gutenberg/pull/29288))
-- Fix issue with invisible reset template hover state. ([28912](https://github.com/WordPress/gutenberg/pull/28912))
-- InputControl: Fix labelPosition rendering with new ui/flex component. ([29226](https://github.com/WordPress/gutenberg/pull/29226))
-- Button sizing style fix. ([29208](https://github.com/WordPress/gutenberg/pull/29208))
-- Create Block: Fix the background color in esnext template. ([29223](https://github.com/WordPress/gutenberg/pull/29223))
-- Add border-collapse to default block styles in Table block. ([27628](https://github.com/WordPress/gutenberg/pull/27628))
-
-- Navigation Block:
-  - Fix Navigation Links when post type is not Page or Post. ([28892](https://github.com/WordPress/gutenberg/pull/28892))
-  - Fix inline style inheritance. ([28868](https://github.com/WordPress/gutenberg/pull/28868))
-  - Fix PHP notice shown when rendering a navigation link block. ([28999](https://github.com/WordPress/gutenberg/pull/28999))
-
-- Fix is-hovered event listener. ([28715](https://github.com/WordPress/gutenberg/pull/28715))
-- Fix function call in justify toolbar. ([28955](https://github.com/WordPress/gutenberg/pull/28955))
-- Fix footer icon color. ([29199](https://github.com/WordPress/gutenberg/pull/29199))
-- Show page titles special characters in the parent page selector. ([29104](https://github.com/WordPress/gutenberg/pull/29104))
-- Edit Post: Automatically connect a menu item with the pinnable sidebar plugin. ([29081](https://github.com/WordPress/gutenberg/pull/29081))
-- Make `Modal` component use the aria.labelledby prop. ([29020](https://github.com/WordPress/gutenberg/pull/29020))
-- Fix admin menu scroll on editor page. ([28959](https://github.com/WordPress/gutenberg/pull/28959))
-- Prioritize core blocks in the inserter. ([28945](https://github.com/WordPress/gutenberg/pull/28945))
-- Make the __experimentalCaptureToolbars option work reliably. ([28905](https://github.com/WordPress/gutenberg/pull/28905))
-- Ensure sticky tabs are in front of their panel’s descendants. ([28562](https://github.com/WordPress/gutenberg/pull/28562))
-- Navigation Component: Increase color and padding specificity. ([28619](https://github.com/WordPress/gutenberg/pull/28619))
-- Add note to indicate why priority queue callbacks may be undefined. ([28337](https://github.com/WordPress/gutenberg/pull/28337))
-- Keep initial formatting on paste for Preformatted and Verse components. ([27781](https://github.com/WordPress/gutenberg/pull/27781))
-- Rich text: Keep block ID on split. ([28505](https://github.com/WordPress/gutenberg/pull/28505))
-- Fix cursor on rich text blocks when outline mode is active. ([29106](https://github.com/WordPress/gutenberg/pull/29106))
 
+-   Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array. ([29099](https://github.com/WordPress/gutenberg/pull/29099))
 
-### Experiments
+### Bug Fixes
 
-- Improve loading method for block styles. ([28358](https://github.com/WordPress/gutenberg/pull/28358))
-- Do not use __experimentalSelector to check the panel title. ([29264](https://github.com/WordPress/gutenberg/pull/29264))
-- Update documentation for social links & theme.json. ([29294](https://github.com/WordPress/gutenberg/pull/29294))
-- Navigation Screen:
-  - Add block deselection when clicking canvas background. ([28876](https://github.com/WordPress/gutenberg/pull/28876))
-  - Improve experience for user creating their first menu. ([28767](https://github.com/WordPress/gutenberg/pull/28767))
-  - Fix positioning of nested submenus. ([28934](https://github.com/WordPress/gutenberg/pull/28934))
-- Full Site Editing:
-  - Use a modal for the template part creation flow. ([29108](https://github.com/WordPress/gutenberg/pull/29108))
-  - Add an 'area' term for Template Parts. ([28410](https://github.com/WordPress/gutenberg/pull/28410))
-  - Add content menu items preview in Navigation. ([29225](https://github.com/WordPress/gutenberg/pull/29225))
-  - Replace locate_template method. ([28942](https://github.com/WordPress/gutenberg/pull/28942))
-  - Site Editor:
-    - Inject theme attribute into template parts too. ([29080](https://github.com/WordPress/gutenberg/pull/29080))
-    - Organise semantic template parts. ([29030](https://github.com/WordPress/gutenberg/pull/29030))
-	- Show contextual icon in the Inspector's template tab. ([29195](https://github.com/WordPress/gutenberg/pull/29195))
-    - Add template tab to sidebar. ([28633](https://github.com/WordPress/gutenberg/pull/28633))
-- Global Styles:
-  - Support skipping serialization in the color hook (block supports mechanism). ([29142](https://github.com/WordPress/gutenberg/pull/29142))
-  - Fix invalid font-family list. ([28960](https://github.com/WordPress/gutenberg/pull/28960))
-- Widgets:
-  - Use textarea for editing block widgets. ([24899](https://github.com/WordPress/gutenberg/pull/24899))
-  - Set container classname dynamically depending on Widget block. ([26375](https://github.com/WordPress/gutenberg/pull/26375))
-  - Add Widgets REST API changes from Core-51460. ([29242](https://github.com/WordPress/gutenberg/pull/29242))
-- UI Components:
-  - Add Surface Component. ([28596](https://github.com/WordPress/gutenberg/pull/28596))
-  - Add Elevation Component. ([28593](https://github.com/WordPress/gutenberg/pull/28593))
-  - Add FormGroup + ControlLabel components. ([28568](https://github.com/WordPress/gutenberg/pull/28568))
-  - Add spinner. ([29146](https://github.com/WordPress/gutenberg/pull/29146))
-  - Rename ui files to match simpler scheme. ([28948](https://github.com/WordPress/gutenberg/pull/28948))
-  - Add hooks based Scrollable component wrapper. ([28979](https://github.com/WordPress/gutenberg/pull/28979))
-  - Add createComponent unit tests. ([28949](https://github.com/WordPress/gutenberg/pull/28949))
-  - Add hooks based VisuallyHidden. ([28887](https://github.com/WordPress/gutenberg/pull/28887))
-  - Add ControlGroup. ([28982](https://github.com/WordPress/gutenberg/pull/28982))
-  - Add Portal. ([28981](https://github.com/WordPress/gutenberg/pull/28981))
-  - Update documentation (README + inline docs). ([29128](https://github.com/WordPress/gutenberg/pull/29128))
-  - Update color-picker snapshot tests to use diff matching. ([28925](https://github.com/WordPress/gutenberg/pull/28925))
-- Bugs:
-  - Fix Site Logo Styles. ([29227](https://github.com/WordPress/gutenberg/pull/29227))
-  - Template Part: Fallback to missing state if slug or theme is invalid. ([29041](https://github.com/WordPress/gutenberg/pull/29041))
-  - Site Editor:
-    - Fix misalignment with navigation toggle and header. ([29093](https://github.com/WordPress/gutenberg/pull/29093))
-    - Fix navigation editor block selection clearing. ([29293](https://github.com/WordPress/gutenberg/pull/29293))
-    - Fix navigate to link error. ([29239](https://github.com/WordPress/gutenberg/pull/29239))
-    - Fix position and style of "Dashboard" link. ([29034](https://github.com/WordPress/gutenberg/pull/29034))
-	- Fix end-to-end test errors introduced by template sidebar. ([28950](https://github.com/WordPress/gutenberg/pull/28950))
-  - Widgets:
-    - Fix widgets preview URL typo. ([29062](https://github.com/WordPress/gutenberg/pull/29062))
-    - Fix php error in the widget screen. ([29137](https://github.com/WordPress/gutenberg/pull/29137))
-    - Fix legacy widgets not previewing and widgets saving issue. ([29111](https://github.com/WordPress/gutenberg/pull/29111))
-    - Fix server rendered widget not previewing. ([29197](https://github.com/WordPress/gutenberg/pull/29197))
+-   Fix Slash Inserter position. ([29288](https://github.com/WordPress/gutenberg/pull/29288))
+-   Fix issue with invisible reset template hover state. ([28912](https://github.com/WordPress/gutenberg/pull/28912))
+-   InputControl: Fix labelPosition rendering with new ui/flex component. ([29226](https://github.com/WordPress/gutenberg/pull/29226))
+-   Button sizing style fix. ([29208](https://github.com/WordPress/gutenberg/pull/29208))
+-   Create Block: Fix the background color in esnext template. ([29223](https://github.com/WordPress/gutenberg/pull/29223))
+-   Add border-collapse to default block styles in Table block. ([27628](https://github.com/WordPress/gutenberg/pull/27628))
+
+-   Navigation Block:
+
+    -   Fix Navigation Links when post type is not Page or Post. ([28892](https://github.com/WordPress/gutenberg/pull/28892))
+    -   Fix inline style inheritance. ([28868](https://github.com/WordPress/gutenberg/pull/28868))
+    -   Fix PHP notice shown when rendering a navigation link block. ([28999](https://github.com/WordPress/gutenberg/pull/28999))
+
+-   Fix is-hovered event listener. ([28715](https://github.com/WordPress/gutenberg/pull/28715))
+-   Fix function call in justify toolbar. ([28955](https://github.com/WordPress/gutenberg/pull/28955))
+-   Fix footer icon color. ([29199](https://github.com/WordPress/gutenberg/pull/29199))
+-   Show page titles special characters in the parent page selector. ([29104](https://github.com/WordPress/gutenberg/pull/29104))
+-   Edit Post: Automatically connect a menu item with the pinnable sidebar plugin. ([29081](https://github.com/WordPress/gutenberg/pull/29081))
+-   Make `Modal` component use the aria.labelledby prop. ([29020](https://github.com/WordPress/gutenberg/pull/29020))
+-   Fix admin menu scroll on editor page. ([28959](https://github.com/WordPress/gutenberg/pull/28959))
+-   Prioritize core blocks in the inserter. ([28945](https://github.com/WordPress/gutenberg/pull/28945))
+-   Make the \_\_experimentalCaptureToolbars option work reliably. ([28905](https://github.com/WordPress/gutenberg/pull/28905))
+-   Ensure sticky tabs are in front of their panel’s descendants. ([28562](https://github.com/WordPress/gutenberg/pull/28562))
+-   Navigation Component: Increase color and padding specificity. ([28619](https://github.com/WordPress/gutenberg/pull/28619))
+-   Add note to indicate why priority queue callbacks may be undefined. ([28337](https://github.com/WordPress/gutenberg/pull/28337))
+-   Keep initial formatting on paste for Preformatted and Verse components. ([27781](https://github.com/WordPress/gutenberg/pull/27781))
+-   Rich text: Keep block ID on split. ([28505](https://github.com/WordPress/gutenberg/pull/28505))
+-   Fix cursor on rich text blocks when outline mode is active. ([29106](https://github.com/WordPress/gutenberg/pull/29106))
+
+### Experiments
 
+-   Improve loading method for block styles. ([28358](https://github.com/WordPress/gutenberg/pull/28358))
+-   Do not use \_\_experimentalSelector to check the panel title. ([29264](https://github.com/WordPress/gutenberg/pull/29264))
+-   Update documentation for social links & theme.json. ([29294](https://github.com/WordPress/gutenberg/pull/29294))
+-   Navigation Screen:
+    -   Add block deselection when clicking canvas background. ([28876](https://github.com/WordPress/gutenberg/pull/28876))
+    -   Improve experience for user creating their first menu. ([28767](https://github.com/WordPress/gutenberg/pull/28767))
+    -   Fix positioning of nested submenus. ([28934](https://github.com/WordPress/gutenberg/pull/28934))
+-   Full Site Editing:
+    -   Use a modal for the template part creation flow. ([29108](https://github.com/WordPress/gutenberg/pull/29108))
+    -   Add an 'area' term for Template Parts. ([28410](https://github.com/WordPress/gutenberg/pull/28410))
+    -   Add content menu items preview in Navigation. ([29225](https://github.com/WordPress/gutenberg/pull/29225))
+    -   Replace locate_template method. ([28942](https://github.com/WordPress/gutenberg/pull/28942))
+    -   Site Editor:
+        -   Inject theme attribute into template parts too. ([29080](https://github.com/WordPress/gutenberg/pull/29080))
+        -   Organise semantic template parts. ([29030](https://github.com/WordPress/gutenberg/pull/29030))
+    -   Show contextual icon in the Inspector's template tab. ([29195](https://github.com/WordPress/gutenberg/pull/29195))
+        -   Add template tab to sidebar. ([28633](https://github.com/WordPress/gutenberg/pull/28633))
+-   Global Styles:
+    -   Support skipping serialization in the color hook (block supports mechanism). ([29142](https://github.com/WordPress/gutenberg/pull/29142))
+    -   Fix invalid font-family list. ([28960](https://github.com/WordPress/gutenberg/pull/28960))
+-   Widgets:
+    -   Use textarea for editing block widgets. ([24899](https://github.com/WordPress/gutenberg/pull/24899))
+    -   Set container classname dynamically depending on Widget block. ([26375](https://github.com/WordPress/gutenberg/pull/26375))
+    -   Add Widgets REST API changes from Core-51460. ([29242](https://github.com/WordPress/gutenberg/pull/29242))
+-   UI Components:
+    -   Add Surface Component. ([28596](https://github.com/WordPress/gutenberg/pull/28596))
+    -   Add Elevation Component. ([28593](https://github.com/WordPress/gutenberg/pull/28593))
+    -   Add FormGroup + ControlLabel components. ([28568](https://github.com/WordPress/gutenberg/pull/28568))
+    -   Add spinner. ([29146](https://github.com/WordPress/gutenberg/pull/29146))
+    -   Rename ui files to match simpler scheme. ([28948](https://github.com/WordPress/gutenberg/pull/28948))
+    -   Add hooks based Scrollable component wrapper. ([28979](https://github.com/WordPress/gutenberg/pull/28979))
+    -   Add createComponent unit tests. ([28949](https://github.com/WordPress/gutenberg/pull/28949))
+    -   Add hooks based VisuallyHidden. ([28887](https://github.com/WordPress/gutenberg/pull/28887))
+    -   Add ControlGroup. ([28982](https://github.com/WordPress/gutenberg/pull/28982))
+    -   Add Portal. ([28981](https://github.com/WordPress/gutenberg/pull/28981))
+    -   Update documentation (README + inline docs). ([29128](https://github.com/WordPress/gutenberg/pull/29128))
+    -   Update color-picker snapshot tests to use diff matching. ([28925](https://github.com/WordPress/gutenberg/pull/28925))
+-   Bugs:
+    -   Fix Site Logo Styles. ([29227](https://github.com/WordPress/gutenberg/pull/29227))
+    -   Template Part: Fallback to missing state if slug or theme is invalid. ([29041](https://github.com/WordPress/gutenberg/pull/29041))
+    -   Site Editor:
+        -   Fix misalignment with navigation toggle and header. ([29093](https://github.com/WordPress/gutenberg/pull/29093))
+        -   Fix navigation editor block selection clearing. ([29293](https://github.com/WordPress/gutenberg/pull/29293))
+        -   Fix navigate to link error. ([29239](https://github.com/WordPress/gutenberg/pull/29239))
+        -   Fix position and style of "Dashboard" link. ([29034](https://github.com/WordPress/gutenberg/pull/29034))
+    -   Fix end-to-end test errors introduced by template sidebar. ([28950](https://github.com/WordPress/gutenberg/pull/28950))
+    -   Widgets:
+        -   Fix widgets preview URL typo. ([29062](https://github.com/WordPress/gutenberg/pull/29062))
+        -   Fix php error in the widget screen. ([29137](https://github.com/WordPress/gutenberg/pull/29137))
+        -   Fix legacy widgets not previewing and widgets saving issue. ([29111](https://github.com/WordPress/gutenberg/pull/29111))
+        -   Fix server rendered widget not previewing. ([29197](https://github.com/WordPress/gutenberg/pull/29197))
 
 ### Documentation
 
-- Add accessibility testing instructions. ([28947](https://github.com/WordPress/gutenberg/pull/28947))
-- Updates to Outreach Page. ([28929](https://github.com/WordPress/gutenberg/pull/28929))
-- Update Create a Block tutorial to use `block.json`. ([29027](https://github.com/WordPress/gutenberg/pull/29027))
-- Expose Block Directory references in the handbook. ([29025](https://github.com/WordPress/gutenberg/pull/29025))
-- Update "key concepts". ([28973](https://github.com/WordPress/gutenberg/pull/28973))
-- Remove Font style, weight, decoration, and transform presets from the theme.json documentation. ([29200](https://github.com/WordPress/gutenberg/pull/29200))
-- Combobox Control: Update API doc. ([28787](https://github.com/WordPress/gutenberg/pull/28787))
-- Add block variations to FAQ. ([29154](https://github.com/WordPress/gutenberg/pull/29154), [29170](https://github.com/WordPress/gutenberg/pull/29170))
-- Add templates and global styles to key concepts. ([29071](https://github.com/WordPress/gutenberg/pull/29071))
-- Update block metadata section to promote PHP API. ([29023](https://github.com/WordPress/gutenberg/pull/29023))
-- Fix the header links, add link to user documentation. ([28857](https://github.com/WordPress/gutenberg/pull/28857))
+-   Add accessibility testing instructions. ([28947](https://github.com/WordPress/gutenberg/pull/28947))
+-   Updates to Outreach Page. ([28929](https://github.com/WordPress/gutenberg/pull/28929))
+-   Update Create a Block tutorial to use `block.json`. ([29027](https://github.com/WordPress/gutenberg/pull/29027))
+-   Expose Block Directory references in the handbook. ([29025](https://github.com/WordPress/gutenberg/pull/29025))
+-   Update "key concepts". ([28973](https://github.com/WordPress/gutenberg/pull/28973))
+-   Remove Font style, weight, decoration, and transform presets from the theme.json documentation. ([29200](https://github.com/WordPress/gutenberg/pull/29200))
+-   Combobox Control: Update API doc. ([28787](https://github.com/WordPress/gutenberg/pull/28787))
+-   Add block variations to FAQ. ([29154](https://github.com/WordPress/gutenberg/pull/29154), [29170](https://github.com/WordPress/gutenberg/pull/29170))
+-   Add templates and global styles to key concepts. ([29071](https://github.com/WordPress/gutenberg/pull/29071))
+-   Update block metadata section to promote PHP API. ([29023](https://github.com/WordPress/gutenberg/pull/29023))
+-   Fix the header links, add link to user documentation. ([28857](https://github.com/WordPress/gutenberg/pull/28857))
 
 ### Code Quality
-- Replace store name literals in `block-library`. ([28975](https://github.com/WordPress/gutenberg/pull/28975))
-- Fix typos in PHP comments. ([29198](https://github.com/WordPress/gutenberg/pull/29198))
-
-- Format TS files according to coding styles. ([29064](https://github.com/WordPress/gutenberg/pull/29064))
-- WP_Theme_JSON_Resolver: Update translate terminology. ([28944](https://github.com/WordPress/gutenberg/pull/28944))
-- Improve code readability by not passing variables by reference. ([28943](https://github.com/WordPress/gutenberg/pull/28943))
-- Convert navigation link to use hooks and context. ([28996](https://github.com/WordPress/gutenberg/pull/28996))
-- Block props: Avoid memo (block mode). ([29139](https://github.com/WordPress/gutenberg/pull/29139))
-
-- Reduce memoized context:
-  - Block props. ([29183](https://github.com/WordPress/gutenberg/pull/29183))
-  - Block nodes. ([29163](https://github.com/WordPress/gutenberg/pull/29163))
-- Use ref callback:
-  - Iframe, selection clearer, typing observer. ([29114](https://github.com/WordPress/gutenberg/pull/29114))
-  - Canvas click redirect & typewriter hooks. ([29105](https://github.com/WordPress/gutenberg/pull/29105))
-  - Clipboard handler. ([29090](https://github.com/WordPress/gutenberg/pull/29090))
-  - Hover hook. ([29089](https://github.com/WordPress/gutenberg/pull/29089))
-  - useBlockProps. ([28917](https://github.com/WordPress/gutenberg/pull/28917))
-  - Block nodes. ([29153](https://github.com/WordPress/gutenberg/pull/29153))
 
+-   Replace store name literals in `block-library`. ([28975](https://github.com/WordPress/gutenberg/pull/28975))
+-   Fix typos in PHP comments. ([29198](https://github.com/WordPress/gutenberg/pull/29198))
+
+-   Format TS files according to coding styles. ([29064](https://github.com/WordPress/gutenberg/pull/29064))
+-   WP_Theme_JSON_Resolver: Update translate terminology. ([28944](https://github.com/WordPress/gutenberg/pull/28944))
+-   Improve code readability by not passing variables by reference. ([28943](https://github.com/WordPress/gutenberg/pull/28943))
+-   Convert navigation link to use hooks and context. ([28996](https://github.com/WordPress/gutenberg/pull/28996))
+-   Block props: Avoid memo (block mode). ([29139](https://github.com/WordPress/gutenberg/pull/29139))
+
+-   Reduce memoized context:
+    -   Block props. ([29183](https://github.com/WordPress/gutenberg/pull/29183))
+    -   Block nodes. ([29163](https://github.com/WordPress/gutenberg/pull/29163))
+-   Use ref callback:
+    -   Iframe, selection clearer, typing observer. ([29114](https://github.com/WordPress/gutenberg/pull/29114))
+    -   Canvas click redirect & typewriter hooks. ([29105](https://github.com/WordPress/gutenberg/pull/29105))
+    -   Clipboard handler. ([29090](https://github.com/WordPress/gutenberg/pull/29090))
+    -   Hover hook. ([29089](https://github.com/WordPress/gutenberg/pull/29089))
+    -   useBlockProps. ([28917](https://github.com/WordPress/gutenberg/pull/28917))
+    -   Block nodes. ([29153](https://github.com/WordPress/gutenberg/pull/29153))
 
 ### Tools
 
-- Add support for native TypeScript. ([28879](https://github.com/WordPress/gutenberg/pull/28879))
-- Limit the npm version to be 6. ([29204](https://github.com/WordPress/gutenberg/pull/29204))
-- Run CI jobs on wp prefix branches. ([29194](https://github.com/WordPress/gutenberg/pull/29194))
-- Eslint plugin: Add suggestions to "data-no-store-string-literals" rule. ([28974](https://github.com/WordPress/gutenberg/pull/28974))
-- Update codeowners. ([29280](https://github.com/WordPress/gutenberg/pull/29280))
-- Scripts:
-  - Coerce live reload port to integer. ([29196](https://github.com/WordPress/gutenberg/pull/29196))
-  - Add Python 2.0 to other OSS licenses in license checker. ([28968](https://github.com/WordPress/gutenberg/pull/28968))
-
-
-- Create Block: Fix issue with processing unrelated engines. ([29066](https://github.com/WordPress/gutenberg/pull/29066))
-
-
-- Fix spacing in new contributor welcome message. ([28958](https://github.com/WordPress/gutenberg/pull/28958))
-- Add react-i18n package with i18n React bindings. ([28465](https://github.com/WordPress/gutenberg/pull/28465))
-- babel-plugin-makepot: Don't transpile the package code. ([28911](https://github.com/WordPress/gutenberg/pull/28911))
-- docgen:
-  - Don't transpile the package code. ([28910](https://github.com/WordPress/gutenberg/pull/28910))
-  - Replace doctrine with comment-parser. ([28615](https://github.com/WordPress/gutenberg/pull/28615))
-- wp-env:
-  - Use Simple Git instead of NodeGit. ([28848](https://github.com/WordPress/gutenberg/pull/28848))
-  - Fix issue where mappings sources were not downloaded. ([28930](https://github.com/WordPress/gutenberg/pull/28930))
-- Changelog script: More fine-grained Changelogs for patch releases. ([28424](https://github.com/WordPress/gutenberg/pull/28424))
-- End 2 End Tests:
-  - end-to-end Tests: Add gallery caption coverage. ([29127](https://github.com/WordPress/gutenberg/pull/29127))
-  - Add basic block preview coverage for inserter. ([29117](https://github.com/WordPress/gutenberg/pull/29117))
-  - Make navigation editor end-to-end tests more robust. ([28936](https://github.com/WordPress/gutenberg/pull/28936))
-- Testing: Add snapshot-diff. ([28897](https://github.com/WordPress/gutenberg/pull/28897))
-
-### Various
+-   Add support for native TypeScript. ([28879](https://github.com/WordPress/gutenberg/pull/28879))
+-   Limit the npm version to be 6. ([29204](https://github.com/WordPress/gutenberg/pull/29204))
+-   Run CI jobs on wp prefix branches. ([29194](https://github.com/WordPress/gutenberg/pull/29194))
+-   Eslint plugin: Add suggestions to "data-no-store-string-literals" rule. ([28974](https://github.com/WordPress/gutenberg/pull/28974))
+-   Update codeowners. ([29280](https://github.com/WordPress/gutenberg/pull/29280))
+-   Scripts:
 
-- Add a custom post type icon. ([29232](https://github.com/WordPress/gutenberg/pull/29232))
-- Update text color icon. ([29212](https://github.com/WordPress/gutenberg/pull/29212))
-- Blocks: Map block type definitions that use PHP naming convention for keys. ([28953](https://github.com/WordPress/gutenberg/pull/28953))
-- Safe access to window/document when in node context:
-  - FocalPointPickerGrid. ([29070](https://github.com/WordPress/gutenberg/pull/29070))
-  - Keycodes. ([29069](https://github.com/WordPress/gutenberg/pull/29069))
-  - dom-ready. ([29068](https://github.com/WordPress/gutenberg/pull/29068))
-  - ResizableBox utils. ([29067](https://github.com/WordPress/gutenberg/pull/29067))
-  - ScrollLock. ([29038](https://github.com/WordPress/gutenberg/pull/29038))
+    -   Coerce live reload port to integer. ([29196](https://github.com/WordPress/gutenberg/pull/29196))
+    -   Add Python 2.0 to other OSS licenses in license checker. ([28968](https://github.com/WordPress/gutenberg/pull/28968))
+
+-   Create Block: Fix issue with processing unrelated engines. ([29066](https://github.com/WordPress/gutenberg/pull/29066))
+
+-   Fix spacing in new contributor welcome message. ([28958](https://github.com/WordPress/gutenberg/pull/28958))
+-   Add react-i18n package with i18n React bindings. ([28465](https://github.com/WordPress/gutenberg/pull/28465))
+-   babel-plugin-makepot: Don't transpile the package code. ([28911](https://github.com/WordPress/gutenberg/pull/28911))
+-   docgen:
+    -   Don't transpile the package code. ([28910](https://github.com/WordPress/gutenberg/pull/28910))
+    -   Replace doctrine with comment-parser. ([28615](https://github.com/WordPress/gutenberg/pull/28615))
+-   wp-env:
+    -   Use Simple Git instead of NodeGit. ([28848](https://github.com/WordPress/gutenberg/pull/28848))
+    -   Fix issue where mappings sources were not downloaded. ([28930](https://github.com/WordPress/gutenberg/pull/28930))
+-   Changelog script: More fine-grained Changelogs for patch releases. ([28424](https://github.com/WordPress/gutenberg/pull/28424))
+-   End 2 End Tests:
+    -   end-to-end Tests: Add gallery caption coverage. ([29127](https://github.com/WordPress/gutenberg/pull/29127))
+    -   Add basic block preview coverage for inserter. ([29117](https://github.com/WordPress/gutenberg/pull/29117))
+    -   Make navigation editor end-to-end tests more robust. ([28936](https://github.com/WordPress/gutenberg/pull/28936))
+-   Testing: Add snapshot-diff. ([28897](https://github.com/WordPress/gutenberg/pull/28897))
 
+### Various
 
+-   Add a custom post type icon. ([29232](https://github.com/WordPress/gutenberg/pull/29232))
+-   Update text color icon. ([29212](https://github.com/WordPress/gutenberg/pull/29212))
+-   Blocks: Map block type definitions that use PHP naming convention for keys. ([28953](https://github.com/WordPress/gutenberg/pull/28953))
+-   Safe access to window/document when in node context:
+    -   FocalPointPickerGrid. ([29070](https://github.com/WordPress/gutenberg/pull/29070))
+    -   Keycodes. ([29069](https://github.com/WordPress/gutenberg/pull/29069))
+    -   dom-ready. ([29068](https://github.com/WordPress/gutenberg/pull/29068))
+    -   ResizableBox utils. ([29067](https://github.com/WordPress/gutenberg/pull/29067))
+    -   ScrollLock. ([29038](https://github.com/WordPress/gutenberg/pull/29038))
 
 = 10.0.2 =
 
-### Bug Fixes
+## Changelog
 
-- Fix white screen on RTL languages. ([29256](https://github.com/WordPress/gutenberg/pull/29256))
-- Fix Button block borders for the solid style variation.
+### Bug Fixes
 
+-   Fix white screen on RTL languages. ([29256](https://github.com/WordPress/gutenberg/pull/29256))
+-   Fix Button block borders for the solid style variation.
 
 = 10.0.1 =
 
-### Bug Fixes
+## Changelog
 
- - CSS-in-JS: Fix inline comment for select-dropdown (external module)
+### Bug Fixes
 
+-   CSS-in-JS: Fix inline comment for select-dropdown (external module)
 
 = 10.0.0 =
 
+## Changelog
+
 ### Features
 
-- Add basic pages block. ([28265](https://github.com/WordPress/gutenberg/pull/28265))
+-   Add basic pages block. ([28265](https://github.com/WordPress/gutenberg/pull/28265))
 
 ### Enhancements
 
-- Make the parent block selector visible and offset in the block toolbar. ([28598](https://github.com/WordPress/gutenberg/pull/28598)) ([28721](https://github.com/WordPress/gutenberg/pull/28721))
-- Update the social empty state for dark themes. ([28838](https://github.com/WordPress/gutenberg/pull/28838))
-- Add the tag name selector to the advanced panel of the Group block. ([28576](https://github.com/WordPress/gutenberg/pull/28576))
-- Categories block: Display message instead of empty content. ([28697](https://github.com/WordPress/gutenberg/pull/28697))
-- Show block patterns in the inserter for non-root level insert position. ([28459](https://github.com/WordPress/gutenberg/pull/28459))
--  A11y: Improve the keyboard navigation in the block patterns inserter. ([28520](https://github.com/WordPress/gutenberg/pull/28520))
-- Allow transforming Paragraph blocks to Buttons block. ([28508](https://github.com/WordPress/gutenberg/pull/28508))
-- Better top toolbar arrow gap. ([28832](https://github.com/WordPress/gutenberg/pull/28832))
-- Update layout icon to use the new design language. ([28651](https://github.com/WordPress/gutenberg/pull/28651))
-- Update the buttons icons. ([28583](https://github.com/WordPress/gutenberg/pull/28583))
+-   Make the parent block selector visible and offset in the block toolbar. ([28598](https://github.com/WordPress/gutenberg/pull/28598)) ([28721](https://github.com/WordPress/gutenberg/pull/28721))
+-   Update the social empty state for dark themes. ([28838](https://github.com/WordPress/gutenberg/pull/28838))
+-   Add the tag name selector to the advanced panel of the Group block. ([28576](https://github.com/WordPress/gutenberg/pull/28576))
+-   Categories block: Display message instead of empty content. ([28697](https://github.com/WordPress/gutenberg/pull/28697))
+-   Show block patterns in the inserter for non-root level insert position. ([28459](https://github.com/WordPress/gutenberg/pull/28459))
+-   A11y: Improve the keyboard navigation in the block patterns inserter. ([28520](https://github.com/WordPress/gutenberg/pull/28520))
+-   Allow transforming Paragraph blocks to Buttons block. ([28508](https://github.com/WordPress/gutenberg/pull/28508))
+-   Better top toolbar arrow gap. ([28832](https://github.com/WordPress/gutenberg/pull/28832))
+-   Update layout icon to use the new design language. ([28651](https://github.com/WordPress/gutenberg/pull/28651))
+-   Update the buttons icons. ([28583](https://github.com/WordPress/gutenberg/pull/28583))
 
 ### New APIs
 
-- @wordpress/data: Graduate the __experimentalResolveSelect function to a stable status. ([28544](https://github.com/WordPress/gutenberg/pull/28544))
-- @wordpress/compose: Add useMergeRef React hook. ([27768](https://github.com/WordPress/gutenberg/pull/27768))
-- Components: Allow extra props for RadioControl component. ([28631](https://github.com/WordPress/gutenberg/pull/28631))
-- Add JustifyToolbar component to `@wordpress/block-editor`. ([28439](https://github.com/WordPress/gutenberg/pull/28439))
-- @wordpress/i18n: Add new APIs for React bindings. ([28784](https://github.com/WordPress/gutenberg/pull/28784)) ([28725](https://github.com/WordPress/gutenberg/pull/28725))
-
+-   @wordpress/data: Graduate the \_\_experimentalResolveSelect function to a stable status. ([28544](https://github.com/WordPress/gutenberg/pull/28544))
+-   @wordpress/compose: Add useMergeRef React hook. ([27768](https://github.com/WordPress/gutenberg/pull/27768))
+-   Components: Allow extra props for RadioControl component. ([28631](https://github.com/WordPress/gutenberg/pull/28631))
+-   Add JustifyToolbar component to `@wordpress/block-editor`. ([28439](https://github.com/WordPress/gutenberg/pull/28439))
+-   @wordpress/i18n: Add new APIs for React bindings. ([28784](https://github.com/WordPress/gutenberg/pull/28784)) ([28725](https://github.com/WordPress/gutenberg/pull/28725))
 
 ### Bug Fixes
 
-- Fix block insertion a11y string. ([28871](https://github.com/WordPress/gutenberg/pull/28871))
-- Fix npm 7 compatability. ([28824](https://github.com/WordPress/gutenberg/pull/28824))
-- RangeControl: Fix input / slider widths. ([28816](https://github.com/WordPress/gutenberg/pull/28816))
-- Fix post title icon color. ([28727](https://github.com/WordPress/gutenberg/pull/28727))
-- Fix most used blocks usage persistence. ([28694](https://github.com/WordPress/gutenberg/pull/28694))
-- Use consistent icon width for the block icon in the block inspector. ([28666](https://github.com/WordPress/gutenberg/pull/28666))
-- Fix for Latest Posts focus not selectable. ([28660](https://github.com/WordPress/gutenberg/pull/28660))
-- Fix issue where gallery block requests all attachments when empty. ([28621](https://github.com/WordPress/gutenberg/pull/28621))
-- Fix handling of custom unit theme setting. ([28603](https://github.com/WordPress/gutenberg/pull/28603))
-- Fix wrong space-between style in the Buttons block. ([28485](https://github.com/WordPress/gutenberg/pull/28485))
-- Calculate insertion usage for block variations properly. ([28663](https://github.com/WordPress/gutenberg/pull/28663))
-- Fix the default Buttons block radius, and size. ([28514](https://github.com/WordPress/gutenberg/pull/28514))
-- Fix the Cover block height. ([28455](https://github.com/WordPress/gutenberg/pull/28455))
+-   Fix block insertion a11y string. ([28871](https://github.com/WordPress/gutenberg/pull/28871))
+-   Fix npm 7 compatability. ([28824](https://github.com/WordPress/gutenberg/pull/28824))
+-   RangeControl: Fix input / slider widths. ([28816](https://github.com/WordPress/gutenberg/pull/28816))
+-   Fix post title icon color. ([28727](https://github.com/WordPress/gutenberg/pull/28727))
+-   Fix most used blocks usage persistence. ([28694](https://github.com/WordPress/gutenberg/pull/28694))
+-   Use consistent icon width for the block icon in the block inspector. ([28666](https://github.com/WordPress/gutenberg/pull/28666))
+-   Fix for Latest Posts focus not selectable. ([28660](https://github.com/WordPress/gutenberg/pull/28660))
+-   Fix issue where gallery block requests all attachments when empty. ([28621](https://github.com/WordPress/gutenberg/pull/28621))
+-   Fix handling of custom unit theme setting. ([28603](https://github.com/WordPress/gutenberg/pull/28603))
+-   Fix wrong space-between style in the Buttons block. ([28485](https://github.com/WordPress/gutenberg/pull/28485))
+-   Calculate insertion usage for block variations properly. ([28663](https://github.com/WordPress/gutenberg/pull/28663))
+-   Fix the default Buttons block radius, and size. ([28514](https://github.com/WordPress/gutenberg/pull/28514))
+-   Fix the Cover block height. ([28455](https://github.com/WordPress/gutenberg/pull/28455))
 
 ### Experiments
 
-- Site Editor:
-    - Fix empty content when creating a new template. ([28882](https://github.com/WordPress/gutenberg/pull/28882))
-    - Fix complementary area not opening. ([28732](https://github.com/WordPress/gutenberg/pull/28732))
-    - Fix inserter can't be closed. ([28590](https://github.com/WordPress/gutenberg/pull/28590))
-    - Fix gray screen on refresh when editing pages and posts. ([28413](https://github.com/WordPress/gutenberg/pull/28413))
-    - Show single post template in posts templates in the navigation sidebar. ([28229](https://github.com/WordPress/gutenberg/pull/28229))
-    - Allow searching pages, posts and categories in the navigation sidebar. ([27280](https://github.com/WordPress/gutenberg/pull/27280))
-- Full Site Editing Architecture:
-    - Iterate on the public API of WP_Theme_JSON_Resolver. ([28855](https://github.com/WordPress/gutenberg/pull/28855))
-    - Rename pageTemplates configuration to customTemplates in theme.json. ([28830](https://github.com/WordPress/gutenberg/pull/28830))
-    - Move theme.json support check to class. ([28788](https://github.com/WordPress/gutenberg/pull/28788))
-    - Improve performance on file access of `experimental-theme.json`. ([28786](https://github.com/WordPress/gutenberg/pull/28786))
-    - Load page templates via theme.json abstractions. ([28700](https://github.com/WordPress/gutenberg/pull/28700))
-- Full Site Editing blocks:
-    - Post Featured Image block: Render nothing if featured image doesn't exist. ([28625](https://github.com/WordPress/gutenberg/pull/28625))
-    - Add a description to the template part block. ([28839](https://github.com/WordPress/gutenberg/pull/28839))
-    - Move template part title field to the block inspector. ([28835](https://github.com/WordPress/gutenberg/pull/28835))
-    - Use display title for template part block type toolbar anchor. ([28691](https://github.com/WordPress/gutenberg/pull/28691))
-     - Allow the query block to work on singular pages when inheriting the global query. ([28351](https://github.com/WordPress/gutenberg/pull/28351))
-    - Query Pagination block: cleanup. ([28831](https://github.com/WordPress/gutenberg/pull/28831))
-    - Enqueue comment-reply script when post-comments-form block gets rendered. ([28826](https://github.com/WordPress/gutenberg/pull/28826))
-- Navigation Block:
-    - Fix transparent navigation block submenus. ([28904](https://github.com/WordPress/gutenberg/pull/28904))
-    - Polish social links when inside navigation. ([28836](https://github.com/WordPress/gutenberg/pull/28836)), ([28448](https://github.com/WordPress/gutenberg/pull/28448)).
-    - Add block variation matcher to display information from a found match. ([28626](https://github.com/WordPress/gutenberg/pull/28626))
-    - Add new Post Navigation Link block. ([28602](https://github.com/WordPress/gutenberg/pull/28602))
-- Navigation screen:
-    - Fix failing request for menu items. ([28764](https://github.com/WordPress/gutenberg/pull/28764))
-    - Design Iteration. ([28675](https://github.com/WordPress/gutenberg/pull/28675))
-    - Clear block selection in the navigation editor when clicking editor canvas. ([28382](https://github.com/WordPress/gutenberg/pull/28382))
-- Block-based widgets screen and customizer:
-    - Add experimental flag and enable widgets screen in customizer. ([28618](https://github.com/WordPress/gutenberg/pull/28618))
-- Global Styles:
-    - Use context when translating entries in theme.json. ([28246](https://github.com/WordPress/gutenberg/pull/28246))
-- REST API:
-    - Add URL Details endpoint to REST API to allow retrieval of info about a remote URL. ([18042](https://github.com/WordPress/gutenberg/pull/18042))
-    - Pattern Directory API: Return the block pattern value as content. ([28799](https://github.com/WordPress/gutenberg/pull/28799))
-    - Pattern Directory API: Add a `keyword` filter parameter. ([28794](https://github.com/WordPress/gutenberg/pull/28794))
-- UI Components:
-    - Group all experimental components in the `ui` folder. ([28624](https://github.com/WordPress/gutenberg/pull/28624))
-    - Fix types. ([28571](https://github.com/WordPress/gutenberg/pull/28571))
-    - Add VStack component. ([28798](https://github.com/WordPress/gutenberg/pull/28798))
-    - Add HStack component. ([28707](https://github.com/WordPress/gutenberg/pull/28707))
-    - Add Flex component. ([28609](https://github.com/WordPress/gutenberg/pull/28609))
+-   Site Editor:
+    -   Fix empty content when creating a new template. ([28882](https://github.com/WordPress/gutenberg/pull/28882))
+    -   Fix complementary area not opening. ([28732](https://github.com/WordPress/gutenberg/pull/28732))
+    -   Fix inserter can't be closed. ([28590](https://github.com/WordPress/gutenberg/pull/28590))
+    -   Fix gray screen on refresh when editing pages and posts. ([28413](https://github.com/WordPress/gutenberg/pull/28413))
+    -   Show single post template in posts templates in the navigation sidebar. ([28229](https://github.com/WordPress/gutenberg/pull/28229))
+    -   Allow searching pages, posts and categories in the navigation sidebar. ([27280](https://github.com/WordPress/gutenberg/pull/27280))
+-   Full Site Editing Architecture:
+    -   Iterate on the public API of WP_Theme_JSON_Resolver. ([28855](https://github.com/WordPress/gutenberg/pull/28855))
+    -   Rename pageTemplates configuration to customTemplates in theme.json. ([28830](https://github.com/WordPress/gutenberg/pull/28830))
+    -   Move theme.json support check to class. ([28788](https://github.com/WordPress/gutenberg/pull/28788))
+    -   Improve performance on file access of `experimental-theme.json`. ([28786](https://github.com/WordPress/gutenberg/pull/28786))
+    -   Load page templates via theme.json abstractions. ([28700](https://github.com/WordPress/gutenberg/pull/28700))
+-   Full Site Editing blocks:
+    -   Post Featured Image block: Render nothing if featured image doesn't exist. ([28625](https://github.com/WordPress/gutenberg/pull/28625))
+    -   Add a description to the template part block. ([28839](https://github.com/WordPress/gutenberg/pull/28839))
+    -   Move template part title field to the block inspector. ([28835](https://github.com/WordPress/gutenberg/pull/28835))
+    -   Use display title for template part block type toolbar anchor. ([28691](https://github.com/WordPress/gutenberg/pull/28691))
+    -   Allow the query block to work on singular pages when inheriting the global query. ([28351](https://github.com/WordPress/gutenberg/pull/28351))
+    -   Query Pagination block: cleanup. ([28831](https://github.com/WordPress/gutenberg/pull/28831))
+    -   Enqueue comment-reply script when post-comments-form block gets rendered. ([28826](https://github.com/WordPress/gutenberg/pull/28826))
+-   Navigation Block:
+    -   Fix transparent navigation block submenus. ([28904](https://github.com/WordPress/gutenberg/pull/28904))
+    -   Polish social links when inside navigation. ([28836](https://github.com/WordPress/gutenberg/pull/28836)), ([28448](https://github.com/WordPress/gutenberg/pull/28448)).
+    -   Add block variation matcher to display information from a found match. ([28626](https://github.com/WordPress/gutenberg/pull/28626))
+    -   Add new Post Navigation Link block. ([28602](https://github.com/WordPress/gutenberg/pull/28602))
+-   Navigation screen:
+    -   Fix failing request for menu items. ([28764](https://github.com/WordPress/gutenberg/pull/28764))
+    -   Design Iteration. ([28675](https://github.com/WordPress/gutenberg/pull/28675))
+    -   Clear block selection in the navigation editor when clicking editor canvas. ([28382](https://github.com/WordPress/gutenberg/pull/28382))
+-   Block-based widgets screen and customizer:
+    -   Add experimental flag and enable widgets screen in customizer. ([28618](https://github.com/WordPress/gutenberg/pull/28618))
+-   Global Styles:
+    -   Use context when translating entries in theme.json. ([28246](https://github.com/WordPress/gutenberg/pull/28246))
+-   REST API:
+    -   Add URL Details endpoint to REST API to allow retrieval of info about a remote URL. ([18042](https://github.com/WordPress/gutenberg/pull/18042))
+    -   Pattern Directory API: Return the block pattern value as content. ([28799](https://github.com/WordPress/gutenberg/pull/28799))
+    -   Pattern Directory API: Add a `keyword` filter parameter. ([28794](https://github.com/WordPress/gutenberg/pull/28794))
+-   UI Components:
+    -   Group all experimental components in the `ui` folder. ([28624](https://github.com/WordPress/gutenberg/pull/28624))
+    -   Fix types. ([28571](https://github.com/WordPress/gutenberg/pull/28571))
+    -   Add VStack component. ([28798](https://github.com/WordPress/gutenberg/pull/28798))
+    -   Add HStack component. ([28707](https://github.com/WordPress/gutenberg/pull/28707))
+    -   Add Flex component. ([28609](https://github.com/WordPress/gutenberg/pull/28609))
 
 ### Documentation
 
-- Theme.json Documentation: Clarify naming schema for CSS Custom Properties. ([28639](https://github.com/WordPress/gutenberg/pull/28639))
-- Update Versions in WordPress to include 5.6.1 & 5.7. ([28641](https://github.com/WordPress/gutenberg/pull/28641))
-- Typos and tweaks: ([28667](https://github.com/WordPress/gutenberg/pull/28667)), ([28657](https://github.com/WordPress/gutenberg/pull/28657)), ([28655](https://github.com/WordPress/gutenberg/pull/28655)), ([28898](https://github.com/WordPress/gutenberg/pull/28898)), ([28894](https://github.com/WordPress/gutenberg/pull/28894)), ([28762](https://github.com/WordPress/gutenberg/pull/28762)), ([28877](https://github.com/WordPress/gutenberg/pull/28877)).
+-   Theme.json Documentation: Clarify naming schema for CSS Custom Properties. ([28639](https://github.com/WordPress/gutenberg/pull/28639))
+-   Update Versions in WordPress to include 5.6.1 & 5.7. ([28641](https://github.com/WordPress/gutenberg/pull/28641))
+-   Typos and tweaks: ([28667](https://github.com/WordPress/gutenberg/pull/28667)), ([28657](https://github.com/WordPress/gutenberg/pull/28657)), ([28655](https://github.com/WordPress/gutenberg/pull/28655)), ([28898](https://github.com/WordPress/gutenberg/pull/28898)), ([28894](https://github.com/WordPress/gutenberg/pull/28894)), ([28762](https://github.com/WordPress/gutenberg/pull/28762)), ([28877](https://github.com/WordPress/gutenberg/pull/28877)).
 
 ### Code Quality
 
-- Improve ButtonBlockAppender styles. ([28464](https://github.com/WordPress/gutenberg/pull/28464))
-- Blocks: Move the logic for Template Part label to the block. ([28828](https://github.com/WordPress/gutenberg/pull/28828))
-- @wordpress/block-directory package: Replace string store names. ([28777](https://github.com/WordPress/gutenberg/pull/28777))
-- @wordpress/block-editor package: Replace string store names. ([28775](https://github.com/WordPress/gutenberg/pull/28775))
-- Site Editor: Replace core/edit-site store name with store object. ([28722](https://github.com/WordPress/gutenberg/pull/28722)), ([28695](https://github.com/WordPress/gutenberg/pull/28695))
-- Relax JSDoc validation for typed packages. ([28729](https://github.com/WordPress/gutenberg/pull/28729))
-- Change apt command to apt-get command. ([28840](https://github.com/WordPress/gutenberg/pull/28840))
-- Refactor Buttons block to use JustifyToolbar controls. ([28768](https://github.com/WordPress/gutenberg/pull/28768))
-- i18n hooks: Don't use typeof to check value falsiness. ([28733](https://github.com/WordPress/gutenberg/pull/28733))
-- Components: Set a default for the ComboboxControl onFilterValueChange. ([28492](https://github.com/WordPress/gutenberg/pull/28492))
+-   Improve ButtonBlockAppender styles. ([28464](https://github.com/WordPress/gutenberg/pull/28464))
+-   Blocks: Move the logic for Template Part label to the block. ([28828](https://github.com/WordPress/gutenberg/pull/28828))
+-   @wordpress/block-directory package: Replace string store names. ([28777](https://github.com/WordPress/gutenberg/pull/28777))
+-   @wordpress/block-editor package: Replace string store names. ([28775](https://github.com/WordPress/gutenberg/pull/28775))
+-   Site Editor: Replace core/edit-site store name with store object. ([28722](https://github.com/WordPress/gutenberg/pull/28722)), ([28695](https://github.com/WordPress/gutenberg/pull/28695))
+-   Relax JSDoc validation for typed packages. ([28729](https://github.com/WordPress/gutenberg/pull/28729))
+-   Change apt command to apt-get command. ([28840](https://github.com/WordPress/gutenberg/pull/28840))
+-   Refactor Buttons block to use JustifyToolbar controls. ([28768](https://github.com/WordPress/gutenberg/pull/28768))
+-   i18n hooks: Don't use typeof to check value falsiness. ([28733](https://github.com/WordPress/gutenberg/pull/28733))
+-   Components: Set a default for the ComboboxControl onFilterValueChange. ([28492](https://github.com/WordPress/gutenberg/pull/28492))
 
 ### Tools
 
-- List all dependencies when checking licenses in NPM 7. ([28909](https://github.com/WordPress/gutenberg/pull/28909))
-- Allow blank GitHub issues again. ([28866](https://github.com/WordPress/gutenberg/pull/28866))
-- wp-env.json: Pin tt1-blocks dependency to v0.4.3. ([28741](https://github.com/WordPress/gutenberg/pull/28741))
-- Add eslint rule for preventing string literals in select/dispatch/useDispatch. ([28726](https://github.com/WordPress/gutenberg/pull/28726))
-- build-worker: Extract the functions that build CSS and JS. ([28724](https://github.com/WordPress/gutenberg/pull/28724))
-- Unit Tests Workflow: Enable for documentation-only PRs. ([28696](https://github.com/WordPress/gutenberg/pull/28696))
-- Fix end-to-end failures on 'Front Page' template. ([28638](https://github.com/WordPress/gutenberg/pull/28638))
-- Fix lint issues (proper number of spaces). ([28629](https://github.com/WordPress/gutenberg/pull/28629))
-- Fix legacy settings tests for custom spacing. ([28628](https://github.com/WordPress/gutenberg/pull/28628))
-- end-to-end tests: Handle upgrade screen. ([28592](https://github.com/WordPress/gutenberg/pull/28592))
-- Add eslint rules to guard against unexpected imports/exports. ([28513](https://github.com/WordPress/gutenberg/pull/28513))
-- Add a welcome comment to first time contributor PRs. ([28118](https://github.com/WordPress/gutenberg/pull/28118))
-- end-to-end Tests: Document Settings. ([27715](https://github.com/WordPress/gutenberg/pull/27715))
-- Updating composer packages for php8 compatibility. ([28623](https://github.com/WordPress/gutenberg/pull/28623))
+-   List all dependencies when checking licenses in NPM 7. ([28909](https://github.com/WordPress/gutenberg/pull/28909))
+-   Allow blank GitHub issues again. ([28866](https://github.com/WordPress/gutenberg/pull/28866))
+-   wp-env.json: Pin tt1-blocks dependency to v0.4.3. ([28741](https://github.com/WordPress/gutenberg/pull/28741))
+-   Add eslint rule for preventing string literals in select/dispatch/useDispatch. ([28726](https://github.com/WordPress/gutenberg/pull/28726))
+-   build-worker: Extract the functions that build CSS and JS. ([28724](https://github.com/WordPress/gutenberg/pull/28724))
+-   Unit Tests Workflow: Enable for documentation-only PRs. ([28696](https://github.com/WordPress/gutenberg/pull/28696))
+-   Fix end-to-end failures on 'Front Page' template. ([28638](https://github.com/WordPress/gutenberg/pull/28638))
+-   Fix lint issues (proper number of spaces). ([28629](https://github.com/WordPress/gutenberg/pull/28629))
+-   Fix legacy settings tests for custom spacing. ([28628](https://github.com/WordPress/gutenberg/pull/28628))
+-   end-to-end tests: Handle upgrade screen. ([28592](https://github.com/WordPress/gutenberg/pull/28592))
+-   Add eslint rules to guard against unexpected imports/exports. ([28513](https://github.com/WordPress/gutenberg/pull/28513))
+-   Add a welcome comment to first-time contributor PRs. ([28118](https://github.com/WordPress/gutenberg/pull/28118))
+-   end-to-end Tests: Document Settings. ([27715](https://github.com/WordPress/gutenberg/pull/27715))
+-   Updating composer packages for php8 compatibility. ([28623](https://github.com/WordPress/gutenberg/pull/28623))
 
 ### Various
 
-- Adjust defaults for COMPONENT_SYSTEM_PHASE variable. ([28772](https://github.com/WordPress/gutenberg/pull/28772))
-- build-worker: Call callback with error when no task for extension. ([28723](https://github.com/WordPress/gutenberg/pull/28723))
+-   Adjust defaults for COMPONENT_SYSTEM_PHASE variable. ([28772](https://github.com/WordPress/gutenberg/pull/28772))
+-   build-worker: Call callback with error when no task for extension. ([28723](https://github.com/WordPress/gutenberg/pull/28723))
 
 = 9.9.3 =
 
-### Bug fixes
+## Changelog
 
-- Gallery Block: Add z-index to fig caption to make sure it is still selectable ([28992](https://github.com/WordPress/gutenberg/pull/28992)
-- Inserter: Prevent focused block from stealing focus when inserting a new block ([28962](https://github.com/WordPress/gutenberg/pull/28962))
+### Bug fixes
 
+-   Gallery Block: Add z-index to fig caption to make sure it is still selectable ([28992](https://github.com/WordPress/gutenberg/pull/28992)
+-   Inserter: Prevent focused block from stealing focus when inserting a new block ([28962](https://github.com/WordPress/gutenberg/pull/28962))
 
 = 9.9.2 =
 
+## Changelog
+
 ### Bug fixes
 
-- Remove duplication of editor styles ([28837](https://github.com/WordPress/gutenberg/pull/28837))
-- Add useMergeRefs hook ([27768](https://github.com/WordPress/gutenberg/pull/27768)) (dependency of 28837)
-- Cover: add missing align attr to deprecation ([28796](https://github.com/WordPress/gutenberg/pull/28796))
+-   Remove duplication of editor styles ([28837](https://github.com/WordPress/gutenberg/pull/28837))
+-   Add useMergeRefs hook ([27768](https://github.com/WordPress/gutenberg/pull/27768)) (dependency of 28837)
+-   Cover: add missing align attr to deprecation ([28796](https://github.com/WordPress/gutenberg/pull/28796))
 
 = 9.9.1 =
 
-### Bug fixes
+## Changelog
 
-- Global Styles: enqueue preset classes in the front-end.
-- Global Styles: load styles in iframed site editor.
+### Bug fixes
 
+-   Global Styles: enqueue preset classes in the front-end.
+-   Global Styles: load styles in iframed site editor.
 
 = 9.9.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Try more muted sibling inserter. ([28550](https://github.com/WordPress/gutenberg/pull/28550))
-- Make sure toggleProps doesn't replace important props on ToolbarGroup. ([28401](https://github.com/WordPress/gutenberg/pull/28401))
-- Improve visual clarity of reusable block. ([28318](https://github.com/WordPress/gutenberg/pull/28318))
-- Dark Theme Support: Allow for theme modifications. ([28233](https://github.com/WordPress/gutenberg/pull/28233))
-- Add disabled support in ToggleControl and FormToggle. ([28228](https://github.com/WordPress/gutenberg/pull/28228))
-- Show the spacer block background on hover. ([28129](https://github.com/WordPress/gutenberg/pull/28129))
-- Social Icons: Add icon & background color options. ([28084](https://github.com/WordPress/gutenberg/pull/28084))
-- Support both horizontal and vertical in-between inserters. ([27860](https://github.com/WordPress/gutenberg/pull/27860))
-- Image Block: Add border radius support. ([27667](https://github.com/WordPress/gutenberg/pull/27667))
-- Overlay on disabled elements, to catch events and show tooltips. ([27529](https://github.com/WordPress/gutenberg/pull/27529))
-- Try: System font for vanilla editor styles. ([26822](https://github.com/WordPress/gutenberg/pull/26822))
-- Only consider legal block types for the block list when transforming files to blocks. ([26816](https://github.com/WordPress/gutenberg/pull/26816))
+-   Try more muted sibling inserter. ([28550](https://github.com/WordPress/gutenberg/pull/28550))
+-   Make sure toggleProps doesn't replace important props on ToolbarGroup. ([28401](https://github.com/WordPress/gutenberg/pull/28401))
+-   Improve visual clarity of reusable block. ([28318](https://github.com/WordPress/gutenberg/pull/28318))
+-   Dark Theme Support: Allow for theme modifications. ([28233](https://github.com/WordPress/gutenberg/pull/28233))
+-   Add disabled support in ToggleControl and FormToggle. ([28228](https://github.com/WordPress/gutenberg/pull/28228))
+-   Show the spacer block background on hover. ([28129](https://github.com/WordPress/gutenberg/pull/28129))
+-   Social Icons: Add icon & background color options. ([28084](https://github.com/WordPress/gutenberg/pull/28084))
+-   Support both horizontal and vertical in-between inserters. ([27860](https://github.com/WordPress/gutenberg/pull/27860))
+-   Image Block: Add border radius support. ([27667](https://github.com/WordPress/gutenberg/pull/27667))
+-   Overlay on disabled elements, to catch events and show tooltips. ([27529](https://github.com/WordPress/gutenberg/pull/27529))
+-   Try: System font for vanilla editor styles. ([26822](https://github.com/WordPress/gutenberg/pull/26822))
+-   Only consider legal block types for the block list when transforming files to blocks. ([26816](https://github.com/WordPress/gutenberg/pull/26816))
 
 ### New APIs
 
-- Block API: Allow overriding the category for block variations. ([28482](https://github.com/WordPress/gutenberg/pull/28482))
-- Create Block: Add optional support for wp-env. ([28234](https://github.com/WordPress/gutenberg/pull/28234))
-- Make i18n functions filter their return values. ([27966](https://github.com/WordPress/gutenberg/pull/27966))
+-   Block API: Allow overriding the category for block variations. ([28482](https://github.com/WordPress/gutenberg/pull/28482))
+-   Create Block: Add optional support for wp-env. ([28234](https://github.com/WordPress/gutenberg/pull/28234))
+-   Make i18n functions filter their return values. ([27966](https://github.com/WordPress/gutenberg/pull/27966))
 
 ### Breaking Change
 
 The [format](https://developer.wordpress.org/block-editor/developers/themes/theme-json/) of the `experimental-theme.json` has been updated as per
 
-- Split global block selector into root and defaults. ([28533](https://github.com/WordPress/gutenberg/pull/28533))
-- Make settings and style top-level keys. ([28110](https://github.com/WordPress/gutenberg/pull/28110))
+-   Split global block selector into root and defaults. ([28533](https://github.com/WordPress/gutenberg/pull/28533))
+-   Make settings and style top-level keys. ([28110](https://github.com/WordPress/gutenberg/pull/28110))
 
 Before:
 
@@ -15606,1167 +40330,1184 @@ After:
 
 ### Bug Fixes
 
-- Fix sibling inserter color. ([28579](https://github.com/WordPress/gutenberg/pull/28579))
-- Fix issues causing the cover block to black out with a fixed background. ([28565](https://github.com/WordPress/gutenberg/pull/28565))
-- Fix site editor pins. ([28547](https://github.com/WordPress/gutenberg/pull/28547))
-- Resolve issue where insertion point is in incorrect position after changing block selection. ([28542](https://github.com/WordPress/gutenberg/pull/28542))
-- Components: Fix truncate export. ([28527](https://github.com/WordPress/gutenberg/pull/28527))
-- Pinned items regression followup. ([28526](https://github.com/WordPress/gutenberg/pull/28526))
-- Fix regression with pinned plugin items on mobile. ([28521](https://github.com/WordPress/gutenberg/pull/28521))
-- Fix margins and width of 100%-width buttons. ([28467](https://github.com/WordPress/gutenberg/pull/28467))
-- Fix regression caused by #28395. ([28462](https://github.com/WordPress/gutenberg/pull/28462))
-- Fix aborted rendering of non-nested reusable blocks. ([28461](https://github.com/WordPress/gutenberg/pull/28461))
-- Show insertion point after the last block in a container. ([28418](https://github.com/WordPress/gutenberg/pull/28418))
-- Reusable blocks: Prevent infinite recursion. ([28405](https://github.com/WordPress/gutenberg/pull/28405))
-- Fix block inserter automatic reorder. ([28392](https://github.com/WordPress/gutenberg/pull/28392))
-- Create Block: Extract the package name from the template value. ([28383](https://github.com/WordPress/gutenberg/pull/28383))
-- Fix handling of raw transforms that return multiple blocks. ([28371](https://github.com/WordPress/gutenberg/pull/28371))
-- Fix repeated backgrounds with transparent images. ([28362](https://github.com/WordPress/gutenberg/pull/28362))
-- Ensure inline image width popover doesn't appear over media library modal. ([28333](https://github.com/WordPress/gutenberg/pull/28333))
-- Fix bad var name in BlockParentSelector. ([28325](https://github.com/WordPress/gutenberg/pull/28325))
-- Fix repeated backgrounds for cover srcset. ([28310](https://github.com/WordPress/gutenberg/pull/28310))
-- Simple wording fix. ([28288](https://github.com/WordPress/gutenberg/pull/28288))
-- Fix allowedFormats in RichText component. ([28282](https://github.com/WordPress/gutenberg/pull/28282))
-- Fix file formatting for end-to-end test plugin. ([28266](https://github.com/WordPress/gutenberg/pull/28266))
-- Fix backwards compatibility issue with Inline Image format. ([28223](https://github.com/WordPress/gutenberg/pull/28223))
-- Inserter: Fix left padding on Block Pattern Inserter dropdown. ([28150](https://github.com/WordPress/gutenberg/pull/28150))
-- Fix toolbar keyboard navigation after pressing alt+F10. ([28068](https://github.com/WordPress/gutenberg/pull/28068))
-- Image Block: Update linkDestination when editing image link URL. ([27801](https://github.com/WordPress/gutenberg/pull/27801))
-- Fix for: [Interface Skeleton] Limit the editor width to prevent some blocks to grow infinitely wide. ([27695](https://github.com/WordPress/gutenberg/pull/27695))
-- Button component: Add margin around the dash icon. ([27461](https://github.com/WordPress/gutenberg/pull/27461))
-- Fix issue where resetBlocks can result in an incorrect block selection. ([21598](https://github.com/WordPress/gutenberg/pull/21598))
-- Fix Cover block position. ([28653](https://github.com/WordPress/gutenberg/pull/28653))
-- Add minHeightUnit to latest core/cover deprecation. ([28627](https://github.com/WordPress/gutenberg/pull/28627))
+-   Fix sibling inserter color. ([28579](https://github.com/WordPress/gutenberg/pull/28579))
+-   Fix issues causing the cover block to black out with a fixed background. ([28565](https://github.com/WordPress/gutenberg/pull/28565))
+-   Fix site editor pins. ([28547](https://github.com/WordPress/gutenberg/pull/28547))
+-   Resolve issue where insertion point is in incorrect position after changing block selection. ([28542](https://github.com/WordPress/gutenberg/pull/28542))
+-   Components: Fix truncate export. ([28527](https://github.com/WordPress/gutenberg/pull/28527))
+-   Pinned items regression followup. ([28526](https://github.com/WordPress/gutenberg/pull/28526))
+-   Fix regression with pinned plugin items on mobile. ([28521](https://github.com/WordPress/gutenberg/pull/28521))
+-   Fix margins and width of 100%-width buttons. ([28467](https://github.com/WordPress/gutenberg/pull/28467))
+-   Fix regression caused by #28395. ([28462](https://github.com/WordPress/gutenberg/pull/28462))
+-   Fix aborted rendering of non-nested reusable blocks. ([28461](https://github.com/WordPress/gutenberg/pull/28461))
+-   Show insertion point after the last block in a container. ([28418](https://github.com/WordPress/gutenberg/pull/28418))
+-   Reusable blocks: Prevent infinite recursion. ([28405](https://github.com/WordPress/gutenberg/pull/28405))
+-   Fix block inserter automatic reorder. ([28392](https://github.com/WordPress/gutenberg/pull/28392))
+-   Create Block: Extract the package name from the template value. ([28383](https://github.com/WordPress/gutenberg/pull/28383))
+-   Fix handling of raw transforms that return multiple blocks. ([28371](https://github.com/WordPress/gutenberg/pull/28371))
+-   Fix repeated backgrounds with transparent images. ([28362](https://github.com/WordPress/gutenberg/pull/28362))
+-   Ensure inline image width popover doesn't appear over media library modal. ([28333](https://github.com/WordPress/gutenberg/pull/28333))
+-   Fix bad var name in BlockParentSelector. ([28325](https://github.com/WordPress/gutenberg/pull/28325))
+-   Fix repeated backgrounds for cover srcset. ([28310](https://github.com/WordPress/gutenberg/pull/28310))
+-   Simple wording fix. ([28288](https://github.com/WordPress/gutenberg/pull/28288))
+-   Fix allowedFormats in RichText component. ([28282](https://github.com/WordPress/gutenberg/pull/28282))
+-   Fix file formatting for end-to-end test plugin. ([28266](https://github.com/WordPress/gutenberg/pull/28266))
+-   Fix backwards compatibility issue with Inline Image format. ([28223](https://github.com/WordPress/gutenberg/pull/28223))
+-   Inserter: Fix left padding on Block Pattern Inserter dropdown. ([28150](https://github.com/WordPress/gutenberg/pull/28150))
+-   Fix toolbar keyboard navigation after pressing alt+F10. ([28068](https://github.com/WordPress/gutenberg/pull/28068))
+-   Image Block: Update linkDestination when editing image link URL. ([27801](https://github.com/WordPress/gutenberg/pull/27801))
+-   Fix for: [Interface Skeleton] Limit the editor width to prevent some blocks to grow infinitely wide. ([27695](https://github.com/WordPress/gutenberg/pull/27695))
+-   Button component: Add margin around the dash icon. ([27461](https://github.com/WordPress/gutenberg/pull/27461))
+-   Fix issue where resetBlocks can result in an incorrect block selection. ([21598](https://github.com/WordPress/gutenberg/pull/21598))
+-   Fix Cover block position. ([28653](https://github.com/WordPress/gutenberg/pull/28653))
+-   Add minHeightUnit to latest core/cover deprecation. ([28627](https://github.com/WordPress/gutenberg/pull/28627))
 
 ### Experiments
 
-- Try: Fix menu item word wrap. ([28516](https://github.com/WordPress/gutenberg/pull/28516))
-- Fix URL cutoff. ([28515](https://github.com/WordPress/gutenberg/pull/28515))
-- Mark Post Comments Warning as block. ([28511](https://github.com/WordPress/gutenberg/pull/28511))
-- Add widget id to blocks in the widgets screen. ([28379](https://github.com/WordPress/gutenberg/pull/28379))
-- Remove new navigation block features in the navigation editor. ([28378](https://github.com/WordPress/gutenberg/pull/28378))
-- Full Site Editing: Update theme attribute injection and removal. ([28368](https://github.com/WordPress/gutenberg/pull/28368))
-- Template Part - fix labels shown - use title instead of slug. ([28330](https://github.com/WordPress/gutenberg/pull/28330))
-- Root element & border radius. ([28320](https://github.com/WordPress/gutenberg/pull/28320))
-- FSE: Parse the template before <head> gets rendered. ([28319](https://github.com/WordPress/gutenberg/pull/28319))
-- Site Editor: Use correct title property in snackbar after inserting Template Part. ([28306](https://github.com/WordPress/gutenberg/pull/28306))
-- Edit Site: Fix templates export. ([28292](https://github.com/WordPress/gutenberg/pull/28292))
--  Hide query block toolbar settings if query is inherited. ([28290](https://github.com/WordPress/gutenberg/pull/28290))
-- Site Editor: Add template part missing state. ([28277](https://github.com/WordPress/gutenberg/pull/28277))
-- Site Editor: Hide resize handle. ([28272](https://github.com/WordPress/gutenberg/pull/28272))
-- Fix save, undo and redo keyboard shortcuts in navigation editor. ([28257](https://github.com/WordPress/gutenberg/pull/28257))
-- Fix template part border states. ([28241](https://github.com/WordPress/gutenberg/pull/28241))
-- Fix entity spotlight system. ([28239](https://github.com/WordPress/gutenberg/pull/28239))
-- Fix the nav menu justify controls menu style. ([28222](https://github.com/WordPress/gutenberg/pull/28222))
-- Polish the appender focus style. ([28219](https://github.com/WordPress/gutenberg/pull/28219))
-- Core Data: Add __experimentalBatch(). ([28210](https://github.com/WordPress/gutenberg/pull/28210))
-- Post Title block: Add placeholder state. ([28198](https://github.com/WordPress/gutenberg/pull/28198))
-- Fix navigation editor error. ([28190](https://github.com/WordPress/gutenberg/pull/28190))
-- Try: Allow space between on menu items. ([28169](https://github.com/WordPress/gutenberg/pull/28169))
-- Query pagination with InnerBlocks. ([28125](https://github.com/WordPress/gutenberg/pull/28125))
-- Template Parts: Fix loading issue. ([28088](https://github.com/WordPress/gutenberg/pull/28088))
-- Add support for border configuration via theme.json. ([28049](https://github.com/WordPress/gutenberg/pull/28049))
-- [Widgets screen] Fix categorization not showing in the global inserter. ([28036](https://github.com/WordPress/gutenberg/pull/28036))
-- Update the layout of the title in the top bar while template editing. ([27845](https://github.com/WordPress/gutenberg/pull/27845))
-- Expose group/ungroup buttons in site editor. ([27611](https://github.com/WordPress/gutenberg/pull/27611))
-- Disable alignment for innerBlocks of Nav Block. ([27365](https://github.com/WordPress/gutenberg/pull/27365))
-- Add thunk actions to replace rungen and controls. ([27276](https://github.com/WordPress/gutenberg/pull/27276))
-- Navigation Block: Placeholder empty state. ([26947](https://github.com/WordPress/gutenberg/pull/26947))
-- Open dropdown before focus on submenu item. ([25322](https://github.com/WordPress/gutenberg/pull/25322))
+-   Try: Fix menu item word wrap. ([28516](https://github.com/WordPress/gutenberg/pull/28516))
+-   Fix URL cutoff. ([28515](https://github.com/WordPress/gutenberg/pull/28515))
+-   Mark Post Comments Warning as block. ([28511](https://github.com/WordPress/gutenberg/pull/28511))
+-   Add widget id to blocks in the widgets screen. ([28379](https://github.com/WordPress/gutenberg/pull/28379))
+-   Remove new navigation block features in the navigation editor. ([28378](https://github.com/WordPress/gutenberg/pull/28378))
+-   Full Site Editing: Update theme attribute injection and removal. ([28368](https://github.com/WordPress/gutenberg/pull/28368))
+-   Template Part - fix labels shown - use title instead of slug. ([28330](https://github.com/WordPress/gutenberg/pull/28330))
+-   Root element & border radius. ([28320](https://github.com/WordPress/gutenberg/pull/28320))
+-   FSE: Parse the template before <head> gets rendered. ([28319](https://github.com/WordPress/gutenberg/pull/28319))
+-   Site Editor: Use correct title property in snackbar after inserting Template Part. ([28306](https://github.com/WordPress/gutenberg/pull/28306))
+-   Edit Site: Fix templates export. ([28292](https://github.com/WordPress/gutenberg/pull/28292))
+-   Hide query block toolbar settings if query is inherited. ([28290](https://github.com/WordPress/gutenberg/pull/28290))
+-   Site Editor: Add template part missing state. ([28277](https://github.com/WordPress/gutenberg/pull/28277))
+-   Site Editor: Hide resize handle. ([28272](https://github.com/WordPress/gutenberg/pull/28272))
+-   Fix save, undo and redo keyboard shortcuts in navigation editor. ([28257](https://github.com/WordPress/gutenberg/pull/28257))
+-   Fix template part border states. ([28241](https://github.com/WordPress/gutenberg/pull/28241))
+-   Fix entity spotlight system. ([28239](https://github.com/WordPress/gutenberg/pull/28239))
+-   Fix the nav menu justify controls menu style. ([28222](https://github.com/WordPress/gutenberg/pull/28222))
+-   Polish the appender focus style. ([28219](https://github.com/WordPress/gutenberg/pull/28219))
+-   Core Data: Add \_\_experimentalBatch(). ([28210](https://github.com/WordPress/gutenberg/pull/28210))
+-   Post Title block: Add placeholder state. ([28198](https://github.com/WordPress/gutenberg/pull/28198))
+-   Fix navigation editor error. ([28190](https://github.com/WordPress/gutenberg/pull/28190))
+-   Try: Allow space between on menu items. ([28169](https://github.com/WordPress/gutenberg/pull/28169))
+-   Query pagination with InnerBlocks. ([28125](https://github.com/WordPress/gutenberg/pull/28125))
+-   Template Parts: Fix loading issue. ([28088](https://github.com/WordPress/gutenberg/pull/28088))
+-   Add support for border configuration via theme.json. ([28049](https://github.com/WordPress/gutenberg/pull/28049))
+-   [Widgets screen] Fix categorization not showing in the global inserter. ([28036](https://github.com/WordPress/gutenberg/pull/28036))
+-   Update the layout of the title in the top bar while template editing. ([27845](https://github.com/WordPress/gutenberg/pull/27845))
+-   Expose group/ungroup buttons in site editor. ([27611](https://github.com/WordPress/gutenberg/pull/27611))
+-   Disable alignment for innerBlocks of Nav Block. ([27365](https://github.com/WordPress/gutenberg/pull/27365))
+-   Add thunk actions to replace rungen and controls. ([27276](https://github.com/WordPress/gutenberg/pull/27276))
+-   Navigation Block: Placeholder empty state. ([26947](https://github.com/WordPress/gutenberg/pull/26947))
+-   Open dropdown before focus on submenu item. ([25322](https://github.com/WordPress/gutenberg/pull/25322))
 
 ### Documentation
 
-- Docs: Add new page for i18n filters. ([28553](https://github.com/WordPress/gutenberg/pull/28553))
-- Docs: Update list of core block categories. ([28483](https://github.com/WordPress/gutenberg/pull/28483))
-- Fixed gramatical error. ([28452](https://github.com/WordPress/gutenberg/pull/28452))
-- Update the main readme with the current Gutenberg project phase. ([28359](https://github.com/WordPress/gutenberg/pull/28359))
-- Docs: Update links used in the developer portal. ([28354](https://github.com/WordPress/gutenberg/pull/28354))
-- Docs: Update links to reference HEAD instead of a specific branch. ([28331](https://github.com/WordPress/gutenberg/pull/28331))
-- Docs: Fix supports color gradient(s). ([28328](https://github.com/WordPress/gutenberg/pull/28328))
-- Chore: Add changelog for 28231. ([28232](https://github.com/WordPress/gutenberg/pull/28232))
-- Block Card: Update readme. ([28226](https://github.com/WordPress/gutenberg/pull/28226))
-- Improve the intro page of the Block Editor Handbook. ([28142](https://github.com/WordPress/gutenberg/pull/28142))
-- Update documentation to use allowedFormats instead of the deprecated formattingControls. ([25639](https://github.com/WordPress/gutenberg/pull/25639))
+-   Docs: Add new page for i18n filters. ([28553](https://github.com/WordPress/gutenberg/pull/28553))
+-   Docs: Update list of core block categories. ([28483](https://github.com/WordPress/gutenberg/pull/28483))
+-   Fixed gramatical error. ([28452](https://github.com/WordPress/gutenberg/pull/28452))
+-   Update the main readme with the current Gutenberg project phase. ([28359](https://github.com/WordPress/gutenberg/pull/28359))
+-   Docs: Update links used in the developer portal. ([28354](https://github.com/WordPress/gutenberg/pull/28354))
+-   Docs: Update links to reference HEAD instead of a specific branch. ([28331](https://github.com/WordPress/gutenberg/pull/28331))
+-   Docs: Fix supports color gradient(s). ([28328](https://github.com/WordPress/gutenberg/pull/28328))
+-   Chore: Add changelog for 28231. ([28232](https://github.com/WordPress/gutenberg/pull/28232))
+-   Block Card: Update readme. ([28226](https://github.com/WordPress/gutenberg/pull/28226))
+-   Improve the intro page of the Block Editor Handbook. ([28142](https://github.com/WordPress/gutenberg/pull/28142))
+-   Update documentation to use allowedFormats instead of the deprecated formattingControls. ([25639](https://github.com/WordPress/gutenberg/pull/25639))
 
 ### Code Quality
 
-- Try: Polish block menu and show only fills when available. ([28486](https://github.com/WordPress/gutenberg/pull/28486))
-- Rename some template part icons. ([28458](https://github.com/WordPress/gutenberg/pull/28458))
-- Block Editor: Add hook: UseNoRecursiveRenders. ([28428](https://github.com/WordPress/gutenberg/pull/28428))
-- Coding Standards: Fix PHPCS warnings. ([28343](https://github.com/WordPress/gutenberg/pull/28343))
-- Change the way RTL styles get enqueued. ([28274](https://github.com/WordPress/gutenberg/pull/28274))
-- Remove code no longer necessary. ([28188](https://github.com/WordPress/gutenberg/pull/28188))
-- Update/simplify case transforms. ([28171](https://github.com/WordPress/gutenberg/pull/28171))
-- Fix non static method WP_Block_Parser::Freeform called statically. ([28017](https://github.com/WordPress/gutenberg/pull/28017))
-- Refactor out CSS gradient from custom-gradient-bar. ([27936](https://github.com/WordPress/gutenberg/pull/27936))
+-   Try: Polish block menu and show only fills when available. ([28486](https://github.com/WordPress/gutenberg/pull/28486))
+-   Rename some template part icons. ([28458](https://github.com/WordPress/gutenberg/pull/28458))
+-   Block Editor: Add hook: UseNoRecursiveRenders. ([28428](https://github.com/WordPress/gutenberg/pull/28428))
+-   Coding Standards: Fix PHPCS warnings. ([28343](https://github.com/WordPress/gutenberg/pull/28343))
+-   Change the way RTL styles get enqueued. ([28274](https://github.com/WordPress/gutenberg/pull/28274))
+-   Remove code no longer necessary. ([28188](https://github.com/WordPress/gutenberg/pull/28188))
+-   Update/simplify case transforms. ([28171](https://github.com/WordPress/gutenberg/pull/28171))
+-   Fix non static method WP_Block_Parser::Freeform called statically. ([28017](https://github.com/WordPress/gutenberg/pull/28017))
+-   Refactor out CSS gradient from custom-gradient-bar. ([27936](https://github.com/WordPress/gutenberg/pull/27936))
 
 ### Tools
 
-- Dependencies: Upgrade TypeScript. ([28586](https://github.com/WordPress/gutenberg/pull/28586))
-- ESLint Plugin: Add missing eslint-plugin-import dependency. ([28545](https://github.com/WordPress/gutenberg/pull/28545))
-- Wp-env: Add MySQL port info to start logs. ([28441](https://github.com/WordPress/gutenberg/pull/28441))
-- Run the load time indicator computation multiple times. ([28419](https://github.com/WordPress/gutenberg/pull/28419))
-- Don't add default-custom-properties styles to all compiled files. ([28395](https://github.com/WordPress/gutenberg/pull/28395))
-- Fix typewriter test by using mouse.wheel and waiting for scroll. ([28376](https://github.com/WordPress/gutenberg/pull/28376))
-- Fix end-to-end tests in widgets screen. ([28375](https://github.com/WordPress/gutenberg/pull/28375))
-- Replace deprecated waitFor in end-to-end tests. ([28360](https://github.com/WordPress/gutenberg/pull/28360))
-- Improve robustness of nav screen test. ([28344](https://github.com/WordPress/gutenberg/pull/28344))
-- Preferences modal redesign. ([28329](https://github.com/WordPress/gutenberg/pull/28329))
-- Site Editor: Add end-to-end tests for templates export. ([28324](https://github.com/WordPress/gutenberg/pull/28324))
-- Site Editor: Add unit test for site templates export. ([28323](https://github.com/WordPress/gutenberg/pull/28323))
-- Fix widgets screen end-to-end tests. ([28264](https://github.com/WordPress/gutenberg/pull/28264))
-- Add more tests for processing theme.json logic. ([28202](https://github.com/WordPress/gutenberg/pull/28202))
-- Update nosolosw notifs. ([28189](https://github.com/WordPress/gutenberg/pull/28189))
-- Remove @talldan from some codeowners paths. ([28182](https://github.com/WordPress/gutenberg/pull/28182))
-- Add stale issue workflow for issues with need info requested. ([28179](https://github.com/WordPress/gutenberg/pull/28179))
-- Custom script distclean to remove node_modules of all packages. ([28177](https://github.com/WordPress/gutenberg/pull/28177))
-- Add some basic end-to-end tests for the widgets screen. ([28160](https://github.com/WordPress/gutenberg/pull/28160))
-- Testing: Add CI workflow covering Node.js 12. ([28139](https://github.com/WordPress/gutenberg/pull/28139))
-- wp-env: Fix upload directory conflict in phpunit service. ([28120](https://github.com/WordPress/gutenberg/pull/28120))
-- Update issue templates. ([27570](https://github.com/WordPress/gutenberg/pull/27570))
+-   Dependencies: Upgrade TypeScript. ([28586](https://github.com/WordPress/gutenberg/pull/28586))
+-   ESLint Plugin: Add missing eslint-plugin-import dependency. ([28545](https://github.com/WordPress/gutenberg/pull/28545))
+-   Wp-env: Add MySQL port info to start logs. ([28441](https://github.com/WordPress/gutenberg/pull/28441))
+-   Run the load time indicator computation multiple times. ([28419](https://github.com/WordPress/gutenberg/pull/28419))
+-   Don't add default-custom-properties styles to all compiled files. ([28395](https://github.com/WordPress/gutenberg/pull/28395))
+-   Fix typewriter test by using mouse.wheel and waiting for scroll. ([28376](https://github.com/WordPress/gutenberg/pull/28376))
+-   Fix end-to-end tests in widgets screen. ([28375](https://github.com/WordPress/gutenberg/pull/28375))
+-   Replace deprecated waitFor in end-to-end tests. ([28360](https://github.com/WordPress/gutenberg/pull/28360))
+-   Improve robustness of nav screen test. ([28344](https://github.com/WordPress/gutenberg/pull/28344))
+-   Preferences modal redesign. ([28329](https://github.com/WordPress/gutenberg/pull/28329))
+-   Site Editor: Add end-to-end tests for templates export. ([28324](https://github.com/WordPress/gutenberg/pull/28324))
+-   Site Editor: Add unit test for site templates export. ([28323](https://github.com/WordPress/gutenberg/pull/28323))
+-   Fix widgets screen end-to-end tests. ([28264](https://github.com/WordPress/gutenberg/pull/28264))
+-   Add more tests for processing theme.json logic. ([28202](https://github.com/WordPress/gutenberg/pull/28202))
+-   Update nosolosw notifs. ([28189](https://github.com/WordPress/gutenberg/pull/28189))
+-   Remove @talldan from some codeowners paths. ([28182](https://github.com/WordPress/gutenberg/pull/28182))
+-   Add stale issue workflow for issues with need info requested. ([28179](https://github.com/WordPress/gutenberg/pull/28179))
+-   Custom script distclean to remove node_modules of all packages. ([28177](https://github.com/WordPress/gutenberg/pull/28177))
+-   Add some basic end-to-end tests for the widgets screen. ([28160](https://github.com/WordPress/gutenberg/pull/28160))
+-   Testing: Add CI workflow covering Node.js 12. ([28139](https://github.com/WordPress/gutenberg/pull/28139))
+-   wp-env: Fix upload directory conflict in phpunit service. ([28120](https://github.com/WordPress/gutenberg/pull/28120))
+-   Update issue templates. ([27570](https://github.com/WordPress/gutenberg/pull/27570))
 
 ### Various
 
-- Make custom spacing work with core. ([28548](https://github.com/WordPress/gutenberg/pull/28548))
-- Component System: Add Grid Component. ([28531](https://github.com/WordPress/gutenberg/pull/28531))
-- Block Validation: Allow unitless zero CSS lengths. ([28501](https://github.com/WordPress/gutenberg/pull/28501))
-- Add check for zero to the FocalPointPicker mediaRef which prevents a division by zero error. ([28499](https://github.com/WordPress/gutenberg/pull/28499))
-- Social Link: Add a class to the anchor element. ([28494](https://github.com/WordPress/gutenberg/pull/28494))
-- Components: Integrate G2 Text component. ([28475](https://github.com/WordPress/gutenberg/pull/28475))
-- Block Mover wording: 'Move block position' to 'Change block position'. ([28454](https://github.com/WordPress/gutenberg/pull/28454))
-- [Documentation] : Fixing grammar. ([28447](https://github.com/WordPress/gutenberg/pull/28447))
-- Docs: Update tree and raw-content links to reference HEAD instead of a specific branch. ([28431](https://github.com/WordPress/gutenberg/pull/28431))
-- Image: Add flow for converting to cover block from toolbar. ([28414](https://github.com/WordPress/gutenberg/pull/28414))
-- Cover: Improve various states. ([28384](https://github.com/WordPress/gutenberg/pull/28384))
-- Update HTML Anchor description to refer to block instead of heading. ([28367](https://github.com/WordPress/gutenberg/pull/28367))
-- Packages: Use canary flag for npm releases with next dist tag. ([28357](https://github.com/WordPress/gutenberg/pull/28357))
-- Packages: Fully automate npm publishing with the latest and next tags. ([28335](https://github.com/WordPress/gutenberg/pull/28335))
-- CODEOWNERS: Tweak for ella. ([28326](https://github.com/WordPress/gutenberg/pull/28326))
-- Block Transform: Fix isMultiBlock property name. ([28321](https://github.com/WordPress/gutenberg/pull/28321))
-- Warning component: Remove extra margin. ([28316](https://github.com/WordPress/gutenberg/pull/28316))
-- Block Directory: Silently avoid re-installing local blocks. ([28304](https://github.com/WordPress/gutenberg/pull/28304))
-- Inserter: Add description to content used in search. ([28301](https://github.com/WordPress/gutenberg/pull/28301))
-- Try: Show reusable block parent border when child selected. ([28283](https://github.com/WordPress/gutenberg/pull/28283))
-- Components: Update dependencies shared with G2 components. ([28280](https://github.com/WordPress/gutenberg/pull/28280))
-- Try: Zero width space in empty paragraph. ([28268](https://github.com/WordPress/gutenberg/pull/28268))
-- Alow setting the crossOrigin attribute for the image transform's image using a filter. ([28255](https://github.com/WordPress/gutenberg/pull/28255))
-- Navigation component: Fix button outline. ([28230](https://github.com/WordPress/gutenberg/pull/28230))
-- Components: Add truncate. ([28176](https://github.com/WordPress/gutenberg/pull/28176))
-- Add panel button props. ([28147](https://github.com/WordPress/gutenberg/pull/28147))
-- Add "Show block breadcrumbs" preference. ([28133](https://github.com/WordPress/gutenberg/pull/28133))
-- NavigationMenu component: Add isSearchDebouncing prop. ([28102](https://github.com/WordPress/gutenberg/pull/28102))
-- Try: Make empty paragraphs take up the same space on the frontend, as in the editor. ([27995](https://github.com/WordPress/gutenberg/pull/27995))
-- Change the block editor inserter quick inserter border color. ([27866](https://github.com/WordPress/gutenberg/pull/27866))
-- Save editors value on change. ([27717](https://github.com/WordPress/gutenberg/pull/27717))
-- Component System: Upgrade FontSizePicker. ([27594](https://github.com/WordPress/gutenberg/pull/27594))
-- Adjust borders on gallery to prevent overlap. ([27312](https://github.com/WordPress/gutenberg/pull/27312))
-- Pattern Directory: Create endpoints to proxy api.w.org/patterns. ([26578](https://github.com/WordPress/gutenberg/pull/26578))
-- Show text labels in block toolbars when option is set. ([26135](https://github.com/WordPress/gutenberg/pull/26135))
-- Block Directory: Filter out disallowed blocks before showing available blocks. ([25926](https://github.com/WordPress/gutenberg/pull/25926))
+-   Make custom spacing work with core. ([28548](https://github.com/WordPress/gutenberg/pull/28548))
+-   Component System: Add Grid Component. ([28531](https://github.com/WordPress/gutenberg/pull/28531))
+-   Block Validation: Allow unitless zero CSS lengths. ([28501](https://github.com/WordPress/gutenberg/pull/28501))
+-   Add check for zero to the FocalPointPicker mediaRef which prevents a division by zero error. ([28499](https://github.com/WordPress/gutenberg/pull/28499))
+-   Social Link: Add a class to the anchor element. ([28494](https://github.com/WordPress/gutenberg/pull/28494))
+-   Components: Integrate G2 Text component. ([28475](https://github.com/WordPress/gutenberg/pull/28475))
+-   Block Mover wording: 'Move block position' to 'Change block position'. ([28454](https://github.com/WordPress/gutenberg/pull/28454))
+-   [Documentation] : Fixing grammar. ([28447](https://github.com/WordPress/gutenberg/pull/28447))
+-   Docs: Update tree and raw-content links to reference HEAD instead of a specific branch. ([28431](https://github.com/WordPress/gutenberg/pull/28431))
+-   Image: Add flow for converting to cover block from toolbar. ([28414](https://github.com/WordPress/gutenberg/pull/28414))
+-   Cover: Improve various states. ([28384](https://github.com/WordPress/gutenberg/pull/28384))
+-   Update HTML Anchor description to refer to block instead of heading. ([28367](https://github.com/WordPress/gutenberg/pull/28367))
+-   Packages: Use canary flag for npm releases with next dist tag. ([28357](https://github.com/WordPress/gutenberg/pull/28357))
+-   Packages: Fully automate npm publishing with the latest and next tags. ([28335](https://github.com/WordPress/gutenberg/pull/28335))
+-   CODEOWNERS: Tweak for ella. ([28326](https://github.com/WordPress/gutenberg/pull/28326))
+-   Block Transform: Fix isMultiBlock property name. ([28321](https://github.com/WordPress/gutenberg/pull/28321))
+-   Warning component: Remove extra margin. ([28316](https://github.com/WordPress/gutenberg/pull/28316))
+-   Block Directory: Silently avoid re-installing local blocks. ([28304](https://github.com/WordPress/gutenberg/pull/28304))
+-   Inserter: Add description to content used in search. ([28301](https://github.com/WordPress/gutenberg/pull/28301))
+-   Try: Show reusable block parent border when child selected. ([28283](https://github.com/WordPress/gutenberg/pull/28283))
+-   Components: Update dependencies shared with G2 components. ([28280](https://github.com/WordPress/gutenberg/pull/28280))
+-   Try: Zero width space in empty paragraph. ([28268](https://github.com/WordPress/gutenberg/pull/28268))
+-   Alow setting the crossOrigin attribute for the image transform's image using a filter. ([28255](https://github.com/WordPress/gutenberg/pull/28255))
+-   Navigation component: Fix button outline. ([28230](https://github.com/WordPress/gutenberg/pull/28230))
+-   Components: Add truncate. ([28176](https://github.com/WordPress/gutenberg/pull/28176))
+-   Add panel button props. ([28147](https://github.com/WordPress/gutenberg/pull/28147))
+-   Add "Show block breadcrumbs" preference. ([28133](https://github.com/WordPress/gutenberg/pull/28133))
+-   NavigationMenu component: Add isSearchDebouncing prop. ([28102](https://github.com/WordPress/gutenberg/pull/28102))
+-   Try: Make empty paragraphs take up the same space on the frontend, as in the editor. ([27995](https://github.com/WordPress/gutenberg/pull/27995))
+-   Change the block editor inserter quick inserter border color. ([27866](https://github.com/WordPress/gutenberg/pull/27866))
+-   Save editors value on change. ([27717](https://github.com/WordPress/gutenberg/pull/27717))
+-   Component System: Upgrade FontSizePicker. ([27594](https://github.com/WordPress/gutenberg/pull/27594))
+-   Adjust borders on gallery to prevent overlap. ([27312](https://github.com/WordPress/gutenberg/pull/27312))
+-   Pattern Directory: Create endpoints to proxy api.w.org/patterns. ([26578](https://github.com/WordPress/gutenberg/pull/26578))
+-   Show text labels in block toolbars when option is set. ([26135](https://github.com/WordPress/gutenberg/pull/26135))
+-   Block Directory: Filter out disallowed blocks before showing available blocks. ([25926](https://github.com/WordPress/gutenberg/pull/25926))
 
 = 9.8.4 =
 
-- Cover Block:
-  - Fix issues causing the cover block to black out with a fixed background ([28565](https://github.com/WordPress/gutenberg/pull/28565))
-  - Fix embed position ([28653](https://github.com/WordPress/gutenberg/pull/28653))
-- Pinned items:
-  - Fix regression with pinned plugin items on mobile ([28521](https://github.com/WordPress/gutenberg/pull/28521))
-  - Pinned items regression followup ([28526](https://github.com/WordPress/gutenberg/pull/28526))
+-   Cover Block:
+    -   Fix issues causing the cover block to black out with a fixed background ([28565](https://github.com/WordPress/gutenberg/pull/28565))
+    -   Fix embed position ([28653](https://github.com/WordPress/gutenberg/pull/28653))
+-   Pinned items:
+    -   Fix regression with pinned plugin items on mobile ([28521](https://github.com/WordPress/gutenberg/pull/28521))
+    -   Pinned items regression followup ([28526](https://github.com/WordPress/gutenberg/pull/28526))
 
 = 9.8.3 =
 
+## Changelog
+
 ### Bug Fixes
 
-- Cover Block: Add `minHeightUnit` to latest deprecation. ([28627](https://github.com/WordPress/gutenberg/pull/28627))
+-   Cover Block: Add `minHeightUnit` to latest deprecation. ([28627](https://github.com/WordPress/gutenberg/pull/28627))
 
 = 9.8.2 =
 
-### Bug Fixes
+## Changelog
 
-- Cover Block: Prevent division by zero in FocalPointPicker ([28499](https://github.com/WordPress/gutenberg/pull/28499))
-- Block Validation: Allow unitless zero CSS lengths ([28501](https://github.com/WordPress/gutenberg/pull/28501))
+### Bug Fixes
 
+-   Cover Block: Prevent division by zero in FocalPointPicker ([28499](https://github.com/WordPress/gutenberg/pull/28499))
+-   Block Validation: Allow unitless zero CSS lengths ([28501](https://github.com/WordPress/gutenberg/pull/28501))
 
 = 9.8.1 =
 
-### Bug Fixes
+## Changelog
 
-- Cover Block:
-  - Revert "Cover: Fix matrix alignment issue. (#28361)" ([28364](https://github.com/WordPress/gutenberg/pull/28364))
-  - Fix visual regression. ([28404](https://github.com/WordPress/gutenberg/pull/28404))
-- FSE: fix iframe error in Firefox. ([28212](https://github.com/WordPress/gutenberg/pull/28212))
+### Bug Fixes
 
+-   Cover Block:
+    -   Revert "Cover: Fix matrix alignment issue. (#28361)" ([28364](https://github.com/WordPress/gutenberg/pull/28364))
+    -   Fix visual regression. ([28404](https://github.com/WordPress/gutenberg/pull/28404))
+-   FSE: fix iframe error in Firefox. ([28212](https://github.com/WordPress/gutenberg/pull/28212))
 
 = 9.8.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Use a semi transparent background for the spacer block when selected. ([28103](https://github.com/WordPress/gutenberg/pull/28103))
-- Display matching variation icon in Block Switcher. ([27903](https://github.com/WordPress/gutenberg/pull/27903))
+-   Use a semi transparent background for the spacer block when selected. ([28103](https://github.com/WordPress/gutenberg/pull/28103))
+-   Display matching variation icon in Block Switcher. ([27903](https://github.com/WordPress/gutenberg/pull/27903))
 
 ### New APIs
 
-- Create Block: Allow using locally installed packages with templates. ([28105](https://github.com/WordPress/gutenberg/pull/28105))
-- Create block: Add support for static assets. ([28038](https://github.com/WordPress/gutenberg/pull/28038))
-- Compose: Export useIsomorphicLayoutEffect and use it. ([28023](https://github.com/WordPress/gutenberg/pull/28023))
-
-### Bug Fixes
-
-- Reusable Blocks:
-  - Show an error message when a reusable block has gone missing. ([28126](https://github.com/WordPress/gutenberg/pull/28126))
-  - Fix dismiss notice after error. ([28015](https://github.com/WordPress/gutenberg/pull/28015))
-- Cover Block:
-  - Fix nested cover block bug. ([28114](https://github.com/WordPress/gutenberg/pull/28114))
-  - Fix invalid cover block transforms. ([28087](https://github.com/WordPress/gutenberg/pull/28087))
-  - Fix cover regression. ([28287](https://github.com/WordPress/gutenberg/pull/28287))
-  - Fix Cover focal point picker. ([28350](https://github.com/WordPress/gutenberg/pull/28350))
-  - Fix matrix alignment issue. ([28361](https://github.com/WordPress/gutenberg/pull/28361))
-- Fix block error when transforming blocks with Link Popover opened. ([28136](https://github.com/WordPress/gutenberg/pull/28136))
-- Fix PHP Notice in navigation-link. ([28134](https://github.com/WordPress/gutenberg/pull/28134))
-- Prevent link paste in RichText components in Button and Navigation blocks. ([28130](https://github.com/WordPress/gutenberg/pull/28130))
-- Fix floating date status inferred for posts where the status has been edited. ([28127](https://github.com/WordPress/gutenberg/pull/28127))
-- BlockSwitcher: Fix crash due to null reference. ([28122](https://github.com/WordPress/gutenberg/pull/28122))
-- Verse: Fix line-wrap rendering on front-end of site. ([28109](https://github.com/WordPress/gutenberg/pull/28109))
-- FocalPointPicker: Fix rendering and dragging experience. ([28096](https://github.com/WordPress/gutenberg/pull/28096))
-- Block Directory: Fix "missing" block when the block can be installed from the directory. ([28030](https://github.com/WordPress/gutenberg/pull/28030))
-- Fix locked template not updating when inner blocks template prop changes. ([28007](https://github.com/WordPress/gutenberg/pull/28007))
-- Fix editor crash when registering a block pattern without `categories`. ([27970](https://github.com/WordPress/gutenberg/pull/27970))
-- Fix the RTL editor styles and the theme styles option. ([27947](https://github.com/WordPress/gutenberg/pull/27947))
-- Don't close the block inserter when clicking the scrollbar or an empty area. ([27946](https://github.com/WordPress/gutenberg/pull/27946))
-- Fix AlignmentMatrixControl focus issue. ([27945](https://github.com/WordPress/gutenberg/pull/27945))
-- Fix unexpected autosave for published posts. ([27942](https://github.com/WordPress/gutenberg/pull/27942))
-- Fix RadioGroup to support zero as a Radio value. ([27906](https://github.com/WordPress/gutenberg/pull/27906))
-- Update embed block transforms to permit multiple links to be pasted in a paragraph (#27551). ([27746](https://github.com/WordPress/gutenberg/pull/27746))
-- Change the week header and left button style to meet the date spacing. ([27730](https://github.com/WordPress/gutenberg/pull/27730))
-- Add aria labels to box control component inputs/button. ([27727](https://github.com/WordPress/gutenberg/pull/27727))
-- Use clientWidth when no width is available for cropper. ([27687](https://github.com/WordPress/gutenberg/pull/27687))
-- Core Data: Normalize `_fields` value for use in `stableKey`. ([27526](https://github.com/WordPress/gutenberg/pull/27526))
-- Fix appender margins again. ([27392](https://github.com/WordPress/gutenberg/pull/27392))
+-   Create Block: Allow using locally installed packages with templates. ([28105](https://github.com/WordPress/gutenberg/pull/28105))
+-   Create block: Add support for static assets. ([28038](https://github.com/WordPress/gutenberg/pull/28038))
+-   Compose: Export useIsomorphicLayoutEffect and use it. ([28023](https://github.com/WordPress/gutenberg/pull/28023))
+
+### Bug Fixes
+
+-   Reusable Blocks:
+    -   Show an error message when a reusable block has gone missing. ([28126](https://github.com/WordPress/gutenberg/pull/28126))
+    -   Fix dismiss notice after error. ([28015](https://github.com/WordPress/gutenberg/pull/28015))
+-   Cover Block:
+    -   Fix nested cover block bug. ([28114](https://github.com/WordPress/gutenberg/pull/28114))
+    -   Fix invalid cover block transforms. ([28087](https://github.com/WordPress/gutenberg/pull/28087))
+    -   Fix cover regression. ([28287](https://github.com/WordPress/gutenberg/pull/28287))
+    -   Fix Cover focal point picker. ([28350](https://github.com/WordPress/gutenberg/pull/28350))
+    -   Fix matrix alignment issue. ([28361](https://github.com/WordPress/gutenberg/pull/28361))
+-   Fix block error when transforming blocks with Link Popover opened. ([28136](https://github.com/WordPress/gutenberg/pull/28136))
+-   Fix PHP Notice in navigation-link. ([28134](https://github.com/WordPress/gutenberg/pull/28134))
+-   Prevent link paste in RichText components in Button and Navigation blocks. ([28130](https://github.com/WordPress/gutenberg/pull/28130))
+-   Fix floating date status inferred for posts where the status has been edited. ([28127](https://github.com/WordPress/gutenberg/pull/28127))
+-   BlockSwitcher: Fix crash due to null reference. ([28122](https://github.com/WordPress/gutenberg/pull/28122))
+-   Verse: Fix line-wrap rendering on front-end of site. ([28109](https://github.com/WordPress/gutenberg/pull/28109))
+-   FocalPointPicker: Fix rendering and dragging experience. ([28096](https://github.com/WordPress/gutenberg/pull/28096))
+-   Block Directory: Fix "missing" block when the block can be installed from the directory. ([28030](https://github.com/WordPress/gutenberg/pull/28030))
+-   Fix locked template not updating when inner blocks template prop changes. ([28007](https://github.com/WordPress/gutenberg/pull/28007))
+-   Fix editor crash when registering a block pattern without `categories`. ([27970](https://github.com/WordPress/gutenberg/pull/27970))
+-   Fix the RTL editor styles and the theme styles option. ([27947](https://github.com/WordPress/gutenberg/pull/27947))
+-   Don't close the block inserter when clicking the scrollbar or an empty area. ([27946](https://github.com/WordPress/gutenberg/pull/27946))
+-   Fix AlignmentMatrixControl focus issue. ([27945](https://github.com/WordPress/gutenberg/pull/27945))
+-   Fix unexpected autosave for published posts. ([27942](https://github.com/WordPress/gutenberg/pull/27942))
+-   Fix RadioGroup to support zero as a Radio value. ([27906](https://github.com/WordPress/gutenberg/pull/27906))
+-   Update embed block transforms to permit multiple links to be pasted in a paragraph (#27551). ([27746](https://github.com/WordPress/gutenberg/pull/27746))
+-   Change the week header and left button style to meet the date spacing. ([27730](https://github.com/WordPress/gutenberg/pull/27730))
+-   Add aria labels to box control component inputs/button. ([27727](https://github.com/WordPress/gutenberg/pull/27727))
+-   Use clientWidth when no width is available for cropper. ([27687](https://github.com/WordPress/gutenberg/pull/27687))
+-   Core Data: Normalize `_fields` value for use in `stableKey`. ([27526](https://github.com/WordPress/gutenberg/pull/27526))
+-   Fix appender margins again. ([27392](https://github.com/WordPress/gutenberg/pull/27392))
 
 ### Performance
 
-- Components: Expose composite API from Reakit. ([28085](https://github.com/WordPress/gutenberg/pull/28085))
-- Improve Inserter block hover performance. ([26348](https://github.com/WordPress/gutenberg/pull/26348))
+-   Components: Expose composite API from Reakit. ([28085](https://github.com/WordPress/gutenberg/pull/28085))
+-   Improve Inserter block hover performance. ([26348](https://github.com/WordPress/gutenberg/pull/26348))
 
 ### Experiments
 
-- Full Site Editing Framework:
-  - Load content in iframe. ([25775](https://github.com/WordPress/gutenberg/pull/25775))
-  - Avoid using auto-drafts for theme templates and template parts. ([27910](https://github.com/WordPress/gutenberg/pull/27910))
-    - Delete unused options while upgrading the plugin. ([28164](https://github.com/WordPress/gutenberg/pull/28164))
-    - Fix _wp_file_based term deletion in migration. ([28300](https://github.com/WordPress/gutenberg/pull/28300))
-  - Fix the border radius in the site editor. ([27986](https://github.com/WordPress/gutenberg/pull/27986))
-- theme.json:
-  - Add border radius to the theme styles schema. ([27791](https://github.com/WordPress/gutenberg/pull/27791))
-  - Add theme.json i18n mechanism and JSON file specifying which theme.json paths are translatable. ([27380](https://github.com/WordPress/gutenberg/pull/27380))
-  - Add: Save time theme.json escaping. ([28061](https://github.com/WordPress/gutenberg/pull/28061))
-- Group Block: Add border radius. ([27665](https://github.com/WordPress/gutenberg/pull/27665))
-- Hide the theme without comments.php deprecation message. ([28128](https://github.com/WordPress/gutenberg/pull/28128))
-- Fix navigation editor. ([28080](https://github.com/WordPress/gutenberg/pull/28080))
-- Widgets: Temporary fix for saving widgets. ([28078](https://github.com/WordPress/gutenberg/pull/28078))
-- Decouple query from edit site. ([27972](https://github.com/WordPress/gutenberg/pull/27972))
-- Only enable the template mode for viewable post types. ([27948](https://github.com/WordPress/gutenberg/pull/27948))
-- Box control units: Ensure custom units are preserved. ([27800](https://github.com/WordPress/gutenberg/pull/27800))
-- Navigation Block: Use draft status when user creates a post and don't render unpublished posts in menus. ([27207](https://github.com/WordPress/gutenberg/pull/27207))
+-   Full Site Editing Framework:
+    -   Load content in iframe. ([25775](https://github.com/WordPress/gutenberg/pull/25775))
+    -   Avoid using auto-drafts for theme templates and template parts. ([27910](https://github.com/WordPress/gutenberg/pull/27910))
+        -   Delete unused options while upgrading the plugin. ([28164](https://github.com/WordPress/gutenberg/pull/28164))
+        -   Fix \_wp_file_based term deletion in migration. ([28300](https://github.com/WordPress/gutenberg/pull/28300))
+    -   Fix the border radius in the site editor. ([27986](https://github.com/WordPress/gutenberg/pull/27986))
+-   theme.json:
+    -   Add border radius to the theme styles schema. ([27791](https://github.com/WordPress/gutenberg/pull/27791))
+    -   Add theme.json i18n mechanism and JSON file specifying which theme.json paths are translatable. ([27380](https://github.com/WordPress/gutenberg/pull/27380))
+    -   Add: Save time theme.json escaping. ([28061](https://github.com/WordPress/gutenberg/pull/28061))
+-   Group Block: Add border radius. ([27665](https://github.com/WordPress/gutenberg/pull/27665))
+-   Hide the theme without comments.php deprecation message. ([28128](https://github.com/WordPress/gutenberg/pull/28128))
+-   Fix navigation editor. ([28080](https://github.com/WordPress/gutenberg/pull/28080))
+-   Widgets: Temporary fix for saving widgets. ([28078](https://github.com/WordPress/gutenberg/pull/28078))
+-   Decouple query from edit site. ([27972](https://github.com/WordPress/gutenberg/pull/27972))
+-   Only enable the template mode for viewable post types. ([27948](https://github.com/WordPress/gutenberg/pull/27948))
+-   Box control units: Ensure custom units are preserved. ([27800](https://github.com/WordPress/gutenberg/pull/27800))
+-   Navigation Block: Use draft status when user creates a post and don't render unpublished posts in menus. ([27207](https://github.com/WordPress/gutenberg/pull/27207))
 
 ### Documentation
 
-- Docs: Improve README file for `@wordpress/create-block`. ([28052](https://github.com/WordPress/gutenberg/pull/28052))
-- Create Block: Update the demo included in the README file. ([28037](https://github.com/WordPress/gutenberg/pull/28037))
-- Docs: Switch heading to Quick Start for consistency. ([28019](https://github.com/WordPress/gutenberg/pull/28019))
-- Docs: A wether, as it turns out, is a castrated ram. ([28008](https://github.com/WordPress/gutenberg/pull/28008))
-- Update Quickstart guide for the Development Environment documentation. ([28005](https://github.com/WordPress/gutenberg/pull/28005))
-- Update copyright year to 2021 in `license.md`. ([27951](https://github.com/WordPress/gutenberg/pull/27951))
-- Block API: Add more inline comments. ([20257](https://github.com/WordPress/gutenberg/pull/20257))
-- Changelog: Group entries for 9.8.0-rc.1. ([28332](https://github.com/WordPress/gutenberg/pull/28332))
+-   Docs: Improve README file for `@wordpress/create-block`. ([28052](https://github.com/WordPress/gutenberg/pull/28052))
+-   Create Block: Update the demo included in the README file. ([28037](https://github.com/WordPress/gutenberg/pull/28037))
+-   Docs: Switch heading to Quick Start for consistency. ([28019](https://github.com/WordPress/gutenberg/pull/28019))
+-   Docs: A wether, as it turns out, is a castrated ram. ([28008](https://github.com/WordPress/gutenberg/pull/28008))
+-   Update Quickstart guide for the Development Environment documentation. ([28005](https://github.com/WordPress/gutenberg/pull/28005))
+-   Update copyright year to 2021 in `license.md`. ([27951](https://github.com/WordPress/gutenberg/pull/27951))
+-   Block API: Add more inline comments. ([20257](https://github.com/WordPress/gutenberg/pull/20257))
+-   Changelog: Group entries for 9.8.0-rc.1. ([28332](https://github.com/WordPress/gutenberg/pull/28332))
 
 ### Code Quality
 
-- Remove effects test file and remove unused refx dependency. ([28162](https://github.com/WordPress/gutenberg/pull/28162))
-- Annotations: Replace store name string with exposed store definition. ([28156](https://github.com/WordPress/gutenberg/pull/28156))
-- Edit Widgets: Replace store name string with exposed store definition. ([28044](https://github.com/WordPress/gutenberg/pull/28044))
-- Interface: Replace store name string with exposed store definition. ([28041](https://github.com/WordPress/gutenberg/pull/28041))
-- Upgrade Reakit to version 1.3.4. ([28013](https://github.com/WordPress/gutenberg/pull/28013))
-- Fix PHPCS warning: Undefined variable $i. ([27955](https://github.com/WordPress/gutenberg/pull/27955))
-- Consolidate block editor initializations. ([27954](https://github.com/WordPress/gutenberg/pull/27954))
-- Fix create-block PHP template files according to WordPress standards. ([27949](https://github.com/WordPress/gutenberg/pull/27949))
-- block-directory: Simplify the LOAD_ASSETS flow by making it an async function. ([25956](https://github.com/WordPress/gutenberg/pull/25956))
+-   Remove effects test file and remove unused refx dependency. ([28162](https://github.com/WordPress/gutenberg/pull/28162))
+-   Annotations: Replace store name string with exposed store definition. ([28156](https://github.com/WordPress/gutenberg/pull/28156))
+-   Edit Widgets: Replace store name string with exposed store definition. ([28044](https://github.com/WordPress/gutenberg/pull/28044))
+-   Interface: Replace store name string with exposed store definition. ([28041](https://github.com/WordPress/gutenberg/pull/28041))
+-   Upgrade Reakit to version 1.3.4. ([28013](https://github.com/WordPress/gutenberg/pull/28013))
+-   Fix PHPCS warning: Undefined variable $i. ([27955](https://github.com/WordPress/gutenberg/pull/27955))
+-   Consolidate block editor initializations. ([27954](https://github.com/WordPress/gutenberg/pull/27954))
+-   Fix create-block PHP template files according to WordPress standards. ([27949](https://github.com/WordPress/gutenberg/pull/27949))
+-   block-directory: Simplify the LOAD_ASSETS flow by making it an async function. ([25956](https://github.com/WordPress/gutenberg/pull/25956))
 
 ### Tools
 
-- Workflows (i.e. GitHub Actions):
-  - Create Release Draft when tagging version. ([27488](https://github.com/WordPress/gutenberg/pull/27488))
-  - Add action to upload release to SVN repo. ([27591](https://github.com/WordPress/gutenberg/pull/27591))
-  - Compare Performance upon Release. ([28046](https://github.com/WordPress/gutenberg/pull/28046))
-  - Build Plugin Workflow: Bump node version to 14. ([28048](https://github.com/WordPress/gutenberg/pull/28048))
-- End-to-end tests:
-  - FSE: Fix intermittent errors in multi entity editing test. ([28107](https://github.com/WordPress/gutenberg/pull/28107))
-  - Fix randomly failing end-to-end test. ([28073](https://github.com/WordPress/gutenberg/pull/28073))
-  - Upgrade puppeteer to 5.5.0. ([28055](https://github.com/WordPress/gutenberg/pull/28055))
-  - Performance tests: Fix. ([28026](https://github.com/WordPress/gutenberg/pull/28026))
-- Scripts:
-  - Align default engines for `check-engines` with the package. ([28143](https://github.com/WordPress/gutenberg/pull/28143))
-  - Add support for static assets in build commands. ([28043](https://github.com/WordPress/gutenberg/pull/28043))
-  - Make it possible to transpile `.jsx` files with build command. ([28002](https://github.com/WordPress/gutenberg/pull/28002))
-  - ESLint minor version upgrade to 7.17.0. ([27965](https://github.com/WordPress/gutenberg/pull/27965))
-  - Upgrade Jest to the new major version (26.x). ([27956](https://github.com/WordPress/gutenberg/pull/27956))
-  - Use @wordpress/stylelint-config in @wordpress/scripts. ([27810](https://github.com/WordPress/gutenberg/pull/27810))
-- Linting:
-  - ESLint Plugin: Enable import rules used in Gutenberg. ([27387](https://github.com/WordPress/gutenberg/pull/27387))
-  - Add no-unsafe-wp-apis to recommended configuration. ([27327](https://github.com/WordPress/gutenberg/pull/27327))
-  - Remove /wordpress from test/linting ignore paths. ([20270](https://github.com/WordPress/gutenberg/pull/20270))
-  - Update changelog for stylelint-config. ([28074](https://github.com/WordPress/gutenberg/pull/28074))
-- Testing: Prevent a direct usage of Reakit. ([28095](https://github.com/WordPress/gutenberg/pull/28095))
-- Update the minimum Node.js version to 12. ([27934](https://github.com/WordPress/gutenberg/pull/27934))
-- wp-env: Ensure the environment is used with the logs command. ([27907](https://github.com/WordPress/gutenberg/pull/27907))
-- Packages: Fully automate npm publishing with the latest and next tags ([28335](https://github.com/WordPress/gutenberg/pull/28335))
-- Upgrade webpack to version 5. ([26382](https://github.com/WordPress/gutenberg/pull/26382))
-- Revert "Upgrade webpack to version 5". ([27974](https://github.com/WordPress/gutenberg/pull/27974))
+-   Workflows (i.e. GitHub Actions):
+    -   Create Release Draft when tagging version. ([27488](https://github.com/WordPress/gutenberg/pull/27488))
+    -   Add action to upload release to SVN repo. ([27591](https://github.com/WordPress/gutenberg/pull/27591))
+    -   Compare Performance upon Release. ([28046](https://github.com/WordPress/gutenberg/pull/28046))
+    -   Build Plugin Workflow: Bump node version to 14. ([28048](https://github.com/WordPress/gutenberg/pull/28048))
+-   End-to-end tests:
+    -   FSE: Fix intermittent errors in multi entity editing test. ([28107](https://github.com/WordPress/gutenberg/pull/28107))
+    -   Fix randomly failing end-to-end test. ([28073](https://github.com/WordPress/gutenberg/pull/28073))
+    -   Upgrade puppeteer to 5.5.0. ([28055](https://github.com/WordPress/gutenberg/pull/28055))
+    -   Performance tests: Fix. ([28026](https://github.com/WordPress/gutenberg/pull/28026))
+-   Scripts:
+    -   Align default engines for `check-engines` with the package. ([28143](https://github.com/WordPress/gutenberg/pull/28143))
+    -   Add support for static assets in build commands. ([28043](https://github.com/WordPress/gutenberg/pull/28043))
+    -   Make it possible to transpile `.jsx` files with build command. ([28002](https://github.com/WordPress/gutenberg/pull/28002))
+    -   ESLint minor version upgrade to 7.17.0. ([27965](https://github.com/WordPress/gutenberg/pull/27965))
+    -   Upgrade Jest to the new major version (26.x). ([27956](https://github.com/WordPress/gutenberg/pull/27956))
+    -   Use @wordpress/stylelint-config in @wordpress/scripts. ([27810](https://github.com/WordPress/gutenberg/pull/27810))
+-   Linting:
+    -   ESLint Plugin: Enable import rules used in Gutenberg. ([27387](https://github.com/WordPress/gutenberg/pull/27387))
+    -   Add no-unsafe-wp-apis to recommended configuration. ([27327](https://github.com/WordPress/gutenberg/pull/27327))
+    -   Remove /wordpress from test/linting ignore paths. ([20270](https://github.com/WordPress/gutenberg/pull/20270))
+    -   Update changelog for stylelint-config. ([28074](https://github.com/WordPress/gutenberg/pull/28074))
+-   Testing: Prevent a direct usage of Reakit. ([28095](https://github.com/WordPress/gutenberg/pull/28095))
+-   Update the minimum Node.js version to 12. ([27934](https://github.com/WordPress/gutenberg/pull/27934))
+-   wp-env: Ensure the environment is used with the logs command. ([27907](https://github.com/WordPress/gutenberg/pull/27907))
+-   Packages: Fully automate npm publishing with the latest and next tags ([28335](https://github.com/WordPress/gutenberg/pull/28335))
+-   Upgrade webpack to version 5. ([26382](https://github.com/WordPress/gutenberg/pull/26382))
+-   Revert "Upgrade webpack to version 5". ([27974](https://github.com/WordPress/gutenberg/pull/27974))
 
 ### Various
 
-- Gutenpride Template:
-  - New Package to use with the tutorial. ([27881](https://github.com/WordPress/gutenberg/pull/27881))
-  - Create Block: Enhancements to Gutenpride tutorial template. ([28215](https://github.com/WordPress/gutenberg/pull/28215))
-- URL: Remove redundant array coercion. ([28072](https://github.com/WordPress/gutenberg/pull/28072))
-- Visual editor: Remove focusable wrapper. ([28058](https://github.com/WordPress/gutenberg/pull/28058))
-- Readme: Increase tested Version up to WP 5.6. ([28050](https://github.com/WordPress/gutenberg/pull/28050))
-- Interface: Remove deprecated prop from InterfaceSkeleton. ([28034](https://github.com/WordPress/gutenberg/pull/28034))
-- List View: Reduce whitespace and always show nested blocks. ([28029](https://github.com/WordPress/gutenberg/pull/28029))
-- Making the sidebar inspector's tabs stick when scrolling. ([28003](https://github.com/WordPress/gutenberg/pull/28003))
-- Chore: Update Lerna dependency. ([27990](https://github.com/WordPress/gutenberg/pull/27990))
-- Try: Make focus width a CSS variable. ([27968](https://github.com/WordPress/gutenberg/pull/27968))
-- Add translation context to all block's titles. ([27933](https://github.com/WordPress/gutenberg/pull/27933))
-- Add primary destructive button style. ([27774](https://github.com/WordPress/gutenberg/pull/27774))
-- Modifies the widgets dashboard link to point to the new widgets editor. ([26880](https://github.com/WordPress/gutenberg/pull/26880))
-- Use standard select element for small number of authors. ([26426](https://github.com/WordPress/gutenberg/pull/26426))
-- Add srcset for cover image. ([25171](https://github.com/WordPress/gutenberg/pull/25171))
-
+-   Gutenpride Template:
+    -   New Package to use with the tutorial. ([27881](https://github.com/WordPress/gutenberg/pull/27881))
+    -   Create Block: Enhancements to Gutenpride tutorial template. ([28215](https://github.com/WordPress/gutenberg/pull/28215))
+-   URL: Remove redundant array coercion. ([28072](https://github.com/WordPress/gutenberg/pull/28072))
+-   Visual editor: Remove focusable wrapper. ([28058](https://github.com/WordPress/gutenberg/pull/28058))
+-   Readme: Increase tested Version up to WP 5.6. ([28050](https://github.com/WordPress/gutenberg/pull/28050))
+-   Interface: Remove deprecated prop from InterfaceSkeleton. ([28034](https://github.com/WordPress/gutenberg/pull/28034))
+-   List View: Reduce whitespace and always show nested blocks. ([28029](https://github.com/WordPress/gutenberg/pull/28029))
+-   Making the sidebar inspector's tabs stick when scrolling. ([28003](https://github.com/WordPress/gutenberg/pull/28003))
+-   Chore: Update Lerna dependency. ([27990](https://github.com/WordPress/gutenberg/pull/27990))
+-   Try: Make focus width a CSS variable. ([27968](https://github.com/WordPress/gutenberg/pull/27968))
+-   Add translation context to all block's titles. ([27933](https://github.com/WordPress/gutenberg/pull/27933))
+-   Add primary destructive button style. ([27774](https://github.com/WordPress/gutenberg/pull/27774))
+-   Modifies the widgets dashboard link to point to the new widgets editor. ([26880](https://github.com/WordPress/gutenberg/pull/26880))
+-   Use standard select element for small number of authors. ([26426](https://github.com/WordPress/gutenberg/pull/26426))
+-   Add srcset for cover image. ([25171](https://github.com/WordPress/gutenberg/pull/25171))
 
 = 9.7.4 =
 
-### Bug Fixes
+## Changelog
 
-- Fix isRTL check by loading the ltr string explicitely.
+### Bug Fixes
 
+-   Fix isRTL check by loading the ltr string explicitely.
 
 = 9.7.3 =
 
-### Bug Fixes
+## Changelog
 
-- Prevent mangle of translation functions to fix RTL locales.
+### Bug Fixes
 
+-   Prevent mangle of translation functions to fix RTL locales.
 
 = 9.7.2 =
 
+## Changelog
+
 ### Bug Fixes
 
-- Keep the inserter opened when clicking the scrollbar.
+-   Keep the inserter opened when clicking the scrollbar.
 
 ### Various
 
-- Updated the "tested up to" WordPress version.
-
+-   Updated the "tested up to" WordPress version.
 
 = 9.7.1 =
 
-### Bug Fixes
+## Changelog
 
- - Fix styling of the verse block.
+### Bug Fixes
 
+-   Fix styling of the verse block.
 
 = 9.7.0 =
 
+## Changelog
+
 ### Features
 
-- Support drag and dropping block patterns from the inserter. ([27927](https://github.com/WordPress/gutenberg/pull/27927))
+-   Support drag and dropping block patterns from the inserter. ([27927](https://github.com/WordPress/gutenberg/pull/27927))
 
 ### Enhancements
 
-- Improve the Reusable Blocks UI by relying on multi entity save flow. ([27887](https://github.com/WordPress/gutenberg/pull/27887)) ([27885](https://github.com/WordPress/gutenberg/pull/27885))
-- Show the insertion point indicator below the inbetween inserter. ([27842](https://github.com/WordPress/gutenberg/pull/27842))
-- Add block transforms previews. ([27861](https://github.com/WordPress/gutenberg/pull/27861))
-- URL: RemoveQueryArgs should remove the ? char after removing all args. ([27812](https://github.com/WordPress/gutenberg/pull/27812))
-- Deburr the input of the Post Author and Parent Page controls when filitering results. ([26611](https://github.com/WordPress/gutenberg/pull/26611))
-- Display block icon, description and name by matching block variations. ([27469](https://github.com/WordPress/gutenberg/pull/27469))
-- RSS Block: Add an explicit border-box CSS rule. ([27767](https://github.com/WordPress/gutenberg/pull/27767))
+-   Improve the Reusable Blocks UI by relying on multi entity save flow. ([27887](https://github.com/WordPress/gutenberg/pull/27887)) ([27885](https://github.com/WordPress/gutenberg/pull/27885))
+-   Show the insertion point indicator below the inbetween inserter. ([27842](https://github.com/WordPress/gutenberg/pull/27842))
+-   Add block transforms previews. ([27861](https://github.com/WordPress/gutenberg/pull/27861))
+-   URL: RemoveQueryArgs should remove the ? char after removing all args. ([27812](https://github.com/WordPress/gutenberg/pull/27812))
+-   Deburr the input of the Post Author and Parent Page controls when filitering results. ([26611](https://github.com/WordPress/gutenberg/pull/26611))
+-   Display block icon, description and name by matching block variations. ([27469](https://github.com/WordPress/gutenberg/pull/27469))
+-   RSS Block: Add an explicit border-box CSS rule. ([27767](https://github.com/WordPress/gutenberg/pull/27767))
 
 ### New APIs
 
-- Create block: Allow to list npm packages to be installed in the template. ([27880](https://github.com/WordPress/gutenberg/pull/27880))
-- @wordpress/url: Add a maxLength argument to filterURLForDisplay. ([27530](https://github.com/WordPress/gutenberg/pull/27530))
-- Add new package `@wordpress/stylelint config`. ([22777](https://github.com/WordPress/gutenberg/pull/22777))
+-   Create block: Allow to list npm packages to be installed in the template. ([27880](https://github.com/WordPress/gutenberg/pull/27880))
+-   @wordpress/url: Add a maxLength argument to filterURLForDisplay. ([27530](https://github.com/WordPress/gutenberg/pull/27530))
+-   Add new package `@wordpress/stylelint config`. ([22777](https://github.com/WordPress/gutenberg/pull/22777))
 
 ### Bug Fixes
 
-- Show all taxonomies in Tag Cloud block. ([27930](https://github.com/WordPress/gutenberg/pull/27930))
-- HTML Block: Fix editor styles. ([27627](https://github.com/WordPress/gutenberg/pull/27627))
-- Don't ignore extra edits made in the server when saving posts. ([27929](https://github.com/WordPress/gutenberg/pull/27929))
-- Remove  the animation of post publish button during autosaving. ([27874](https://github.com/WordPress/gutenberg/pull/27874))
-- Prevent the inserter from closing when switching the pattern category. ([27792](https://github.com/WordPress/gutenberg/pull/27792))
-- LinkControl: Fix horizontal scrollbar within block toolbar. ([27777](https://github.com/WordPress/gutenberg/pull/27777))
-- Create Block: Fix support for external templates. ([27776](https://github.com/WordPress/gutenberg/pull/27776)) ([27784](https://github.com/WordPress/gutenberg/pull/27784))
-- Fix text color dropdown not opening. ([27596](https://github.com/WordPress/gutenberg/pull/27596))
+-   Show all taxonomies in Tag Cloud block. ([27930](https://github.com/WordPress/gutenberg/pull/27930))
+-   HTML Block: Fix editor styles. ([27627](https://github.com/WordPress/gutenberg/pull/27627))
+-   Don't ignore extra edits made in the server when saving posts. ([27929](https://github.com/WordPress/gutenberg/pull/27929))
+-   Remove the animation of post publish button during autosaving. ([27874](https://github.com/WordPress/gutenberg/pull/27874))
+-   Prevent the inserter from closing when switching the pattern category. ([27792](https://github.com/WordPress/gutenberg/pull/27792))
+-   LinkControl: Fix horizontal scrollbar within block toolbar. ([27777](https://github.com/WordPress/gutenberg/pull/27777))
+-   Create Block: Fix support for external templates. ([27776](https://github.com/WordPress/gutenberg/pull/27776)) ([27784](https://github.com/WordPress/gutenberg/pull/27784))
+-   Fix text color dropdown not opening. ([27596](https://github.com/WordPress/gutenberg/pull/27596))
 
 ### Experiments
 
-- Full Site Editing Framework:
-  - Add support for custom templates in FSE themes. ([27778](https://github.com/WordPress/gutenberg/pull/27778))
-  - Refactor the edit-site store to clarify the purpose of templateId and templatePartId. ([27839](https://github.com/WordPress/gutenberg/pull/27839))
-- Full Site Editing Blocks:
-  - Site Logo: Remove duplicate link. ([27924](https://github.com/WordPress/gutenberg/pull/27924))
-  - Post excerpt block: Fix incorrect quotes for the class attribute in the wrapper. ([27895](https://github.com/WordPress/gutenberg/pull/27895))
-- Global Styles:
-  - Add padding control to the Global Styles sidebar. ([27154](https://github.com/WordPress/gutenberg/pull/27154))
-- Navigation block: Fix the text color for links in the navigation block. ([26698](https://github.com/WordPress/gutenberg/pull/26698))
+-   Full Site Editing Framework:
+    -   Add support for custom templates in FSE themes. ([27778](https://github.com/WordPress/gutenberg/pull/27778))
+    -   Refactor the edit-site store to clarify the purpose of templateId and templatePartId. ([27839](https://github.com/WordPress/gutenberg/pull/27839))
+-   Full Site Editing Blocks:
+    -   Site Logo: Remove duplicate link. ([27924](https://github.com/WordPress/gutenberg/pull/27924))
+    -   Post excerpt block: Fix incorrect quotes for the class attribute in the wrapper. ([27895](https://github.com/WordPress/gutenberg/pull/27895))
+-   Global Styles:
+    -   Add padding control to the Global Styles sidebar. ([27154](https://github.com/WordPress/gutenberg/pull/27154))
+-   Navigation block: Fix the text color for links in the navigation block. ([26698](https://github.com/WordPress/gutenberg/pull/26698))
 
 ### Documentation
 
-- Improve documentation for withNotices HOC in components package. ([27863](https://github.com/WordPress/gutenberg/pull/27863))
-- Add ContrastChecker component readme. ([25570](https://github.com/WordPress/gutenberg/pull/25570))
-- Remove default style information from the documentation. ([27811](https://github.com/WordPress/gutenberg/pull/27811))
-- Storybook: Fix broken import statements for DateTime component. ([27794](https://github.com/WordPress/gutenberg/pull/27794))
-- Add additional information about lock inheritance. ([27834](https://github.com/WordPress/gutenberg/pull/27834))
-- Typos andd tweaks: ([27909](https://github.com/WordPress/gutenberg/pull/27909)), ([27799](https://github.com/WordPress/gutenberg/pull/27799))
+-   Improve documentation for withNotices HOC in components package. ([27863](https://github.com/WordPress/gutenberg/pull/27863))
+-   Add ContrastChecker component readme. ([25570](https://github.com/WordPress/gutenberg/pull/25570))
+-   Remove default style information from the documentation. ([27811](https://github.com/WordPress/gutenberg/pull/27811))
+-   Storybook: Fix broken import statements for DateTime component. ([27794](https://github.com/WordPress/gutenberg/pull/27794))
+-   Add additional information about lock inheritance. ([27834](https://github.com/WordPress/gutenberg/pull/27834))
+-   Typos andd tweaks: ([27909](https://github.com/WordPress/gutenberg/pull/27909)), ([27799](https://github.com/WordPress/gutenberg/pull/27799))
 
 ### Code Quality
 
-- Use a consistent way to check isRTL. ([27838](https://github.com/WordPress/gutenberg/pull/27838))
-- Update the minimum required WordPress version to 5.5. ([27807](https://github.com/WordPress/gutenberg/pull/27807))
-- Remove unused redux-optimist dependency. ([27798](https://github.com/WordPress/gutenberg/pull/27798))
-- Storybook: Perform cleanup in the Storybook setup. ([27786](https://github.com/WordPress/gutenberg/pull/27786)) ([27813](https://github.com/WordPress/gutenberg/pull/27813))
-- Raw handling: Remove duplicate code. ([27758](https://github.com/WordPress/gutenberg/pull/27758))
-- Refactor BlockSwitcher as a functional component. ([27674](https://github.com/WordPress/gutenberg/pull/27674))
-- Rich Text: Replace store name string with exposed store definition. ([27820](https://github.com/WordPress/gutenberg/pull/27820))
+-   Use a consistent way to check isRTL. ([27838](https://github.com/WordPress/gutenberg/pull/27838))
+-   Update the minimum required WordPress version to 5.5. ([27807](https://github.com/WordPress/gutenberg/pull/27807))
+-   Remove unused redux-optimist dependency. ([27798](https://github.com/WordPress/gutenberg/pull/27798))
+-   Storybook: Perform cleanup in the Storybook setup. ([27786](https://github.com/WordPress/gutenberg/pull/27786)) ([27813](https://github.com/WordPress/gutenberg/pull/27813))
+-   Raw handling: Remove duplicate code. ([27758](https://github.com/WordPress/gutenberg/pull/27758))
+-   Refactor BlockSwitcher as a functional component. ([27674](https://github.com/WordPress/gutenberg/pull/27674))
+-   Rich Text: Replace store name string with exposed store definition. ([27820](https://github.com/WordPress/gutenberg/pull/27820))
 
 ### Tools
 
-- Remove overrides for JSDoc rules downgraded to warnings. ([27912](https://github.com/WordPress/gutenberg/pull/27912)) ([27879](https://github.com/WordPress/gutenberg/pull/27879))
-- Plugin release tool: Fix svn add/rm commands for release tool. ([27886](https://github.com/WordPress/gutenberg/pull/27886))
-- Add types to the @wordpress/keycodes package. ([19520](https://github.com/WordPress/gutenberg/pull/19520))
-- end to end tests:
-  - Make end to end tests do not rely on font size picker classes. ([27825](https://github.com/WordPress/gutenberg/pull/27825))
-  - Remove expect.assertions count from multi-entity-saving tests. ([27802](https://github.com/WordPress/gutenberg/pull/27802)) ([27818](https://github.com/WordPress/gutenberg/pull/27818))
-  - Testing: Remove axe verification executed after every test case. ([26626](https://github.com/WordPress/gutenberg/pull/26626))
-  - Improve font size end to end tests to work with input changes on blur. ([27871](https://github.com/WordPress/gutenberg/pull/27871))
-
-
+-   Remove overrides for JSDoc rules downgraded to warnings. ([27912](https://github.com/WordPress/gutenberg/pull/27912)) ([27879](https://github.com/WordPress/gutenberg/pull/27879))
+-   Plugin release tool: Fix svn add/rm commands for release tool. ([27886](https://github.com/WordPress/gutenberg/pull/27886))
+-   Add types to the @wordpress/keycodes package. ([19520](https://github.com/WordPress/gutenberg/pull/19520))
+-   end to end tests:
+    -   Make end to end tests do not rely on font size picker classes. ([27825](https://github.com/WordPress/gutenberg/pull/27825))
+    -   Remove expect.assertions count from multi-entity-saving tests. ([27802](https://github.com/WordPress/gutenberg/pull/27802)) ([27818](https://github.com/WordPress/gutenberg/pull/27818))
+    -   Testing: Remove axe verification executed after every test case. ([26626](https://github.com/WordPress/gutenberg/pull/26626))
+    -   Improve font size end to end tests to work with input changes on blur. ([27871](https://github.com/WordPress/gutenberg/pull/27871))
 
 = 9.6.2 =
 
-### Bug Fixes
+## Changelog
 
- - Fix toolbar controls in the widgets screen.
- - Fix the slash inserter in the widgets screen.
+### Bug Fixes
 
+-   Fix toolbar controls in the widgets screen.
+-   Fix the slash inserter in the widgets screen.
 
 = 9.6.1 =
 
-### Bugfixes
+## Changelog
 
-- Include block's CSS in the release for FSE themes ([27884](https://github.com/WordPress/gutenberg/pull/27884))
+### Bugfixes
 
+-   Include block's CSS in the release for FSE themes ([27884](https://github.com/WordPress/gutenberg/pull/27884))
 
 = 9.6.0 =
 
+## Changelog
 
 ### Features
 
-- Allow dragging blocks from the inserter into the canvas. ([27669](https://github.com/WordPress/gutenberg/pull/27669))
-- Buttons: Add variations for vertical layout. ([27297](https://github.com/WordPress/gutenberg/pull/27297))
+-   Allow dragging blocks from the inserter into the canvas. ([27669](https://github.com/WordPress/gutenberg/pull/27669))
+-   Buttons: Add variations for vertical layout. ([27297](https://github.com/WordPress/gutenberg/pull/27297))
 
 ### Enhancements
 
-- Buttons block: Change position of the link popover. ([27408](https://github.com/WordPress/gutenberg/pull/27408))
+-   Buttons block: Change position of the link popover. ([27408](https://github.com/WordPress/gutenberg/pull/27408))
 
 ### New APIs
 
-- Add a useFocusOnMount hook to the @wordpress/compose package. ([27574](https://github.com/WordPress/gutenberg/pull/27574))
-- Add a useFocusReturn hook. ([27572](https://github.com/WordPress/gutenberg/pull/27572))
-- Add a useConstrainedTabbing hook. ([27544](https://github.com/WordPress/gutenberg/pull/27544))
-- Components: Introduce a isDisabled prop to the Disabled component. ([26730](https://github.com/WordPress/gutenberg/pull/26730))
-- Create block:
-  - Use Block API version 2. ([26098](https://github.com/WordPress/gutenberg/pull/26098))
-  - Fix for supporting external templates. ([27784](https://github.com/WordPress/gutenberg/pull/27784)) ([27776](https://github.com/WordPress/gutenberg/pull/27776))
-
-### Bug Fixes
-
-- Widget screen: Fix block select on focus. ([27755](https://github.com/WordPress/gutenberg/pull/27755))
-- [Embed block]: Add html and reusable support back. ([27733](https://github.com/WordPress/gutenberg/pull/27733))
-- Add useCallbackRef to avoid calling the ref multiple times with the same node. ([27710](https://github.com/WordPress/gutenberg/pull/27710))
-- Correct getRedistributedColumnWidths and related tests. ([27681](https://github.com/WordPress/gutenberg/pull/27681))
-- Remove CSS Custom Property in code block. ([27672](https://github.com/WordPress/gutenberg/pull/27672))
-- Fix regression on code block for font-size property ([27862](https://github.com/WordPress/gutenberg/pull/27862))
-- Block crashes if font family is not found. ([27654](https://github.com/WordPress/gutenberg/pull/27654))
-- popover flickering on small screens. ([27648](https://github.com/WordPress/gutenberg/pull/27648))
-- Adding single use block from main inserter causes focus loss and menu to be stuck open. ([27641](https://github.com/WordPress/gutenberg/pull/27641))
-- Changelog for 9.5.2. ([27638](https://github.com/WordPress/gutenberg/pull/27638))
-- Uncaught error with a custom generic store without a unsubscribe function in useSelect. ([27634](https://github.com/WordPress/gutenberg/pull/27634))
-- Revert date changes from branch 'replace-moment'. ([27550](https://github.com/WordPress/gutenberg/pull/27550))
-- useMediaQuery: Make it safe for SSR environments without window. ([27542](https://github.com/WordPress/gutenberg/pull/27542))
-- Fixes the width on the circle color picker popover. ([27523](https://github.com/WordPress/gutenberg/pull/27523))
-- ComboboxControl/FormTokenField: Fix iOS zooming for input. ([27471](https://github.com/WordPress/gutenberg/pull/27471))
-- Fallback to regular subscribe if the store doesn't exist in useSelect. ([27466](https://github.com/WordPress/gutenberg/pull/27466))
-- Global Styles getPresetVariable uses a wrong variable; Remove GLOBAL_CONTEXT. ([27450](https://github.com/WordPress/gutenberg/pull/27450))
-- Popover: Fix issue with undefined getBoundingClientRect. ([27445](https://github.com/WordPress/gutenberg/pull/27445))
-- Try fixing combobox a11y issues. ([27431](https://github.com/WordPress/gutenberg/pull/27431))
-- Support gradients with omitted stop positions in CustomGradientPicker. ([27413](https://github.com/WordPress/gutenberg/pull/27413))
-- Fix combobox suggestion list closure when clicking scrollbar. ([27367](https://github.com/WordPress/gutenberg/pull/27367))
-- Video Block: Let the video fill the container. ([27328](https://github.com/WordPress/gutenberg/pull/27328))
-- Media & Text “crop image to fill” to work with linked media. ([27211](https://github.com/WordPress/gutenberg/pull/27211))
-- Give editable fields in blocks better aria-labels. ([26582](https://github.com/WordPress/gutenberg/pull/26582))
-- Replace function should handle empty string callback return in the shortcode parser. ([16358](https://github.com/WordPress/gutenberg/pull/16358))
+-   Add a useFocusOnMount hook to the @wordpress/compose package. ([27574](https://github.com/WordPress/gutenberg/pull/27574))
+-   Add a useFocusReturn hook. ([27572](https://github.com/WordPress/gutenberg/pull/27572))
+-   Add a useConstrainedTabbing hook. ([27544](https://github.com/WordPress/gutenberg/pull/27544))
+-   Components: Introduce a isDisabled prop to the Disabled component. ([26730](https://github.com/WordPress/gutenberg/pull/26730))
+-   Create block:
+    -   Use Block API version 2. ([26098](https://github.com/WordPress/gutenberg/pull/26098))
+    -   Fix for supporting external templates. ([27784](https://github.com/WordPress/gutenberg/pull/27784)) ([27776](https://github.com/WordPress/gutenberg/pull/27776))
+
+### Bug Fixes
+
+-   Widget screen: Fix block select on focus. ([27755](https://github.com/WordPress/gutenberg/pull/27755))
+-   [Embed block]: Add html and reusable support back. ([27733](https://github.com/WordPress/gutenberg/pull/27733))
+-   Add useCallbackRef to avoid calling the ref multiple times with the same node. ([27710](https://github.com/WordPress/gutenberg/pull/27710))
+-   Correct getRedistributedColumnWidths and related tests. ([27681](https://github.com/WordPress/gutenberg/pull/27681))
+-   Remove CSS Custom Property in code block. ([27672](https://github.com/WordPress/gutenberg/pull/27672))
+-   Fix regression on code block for font-size property ([27862](https://github.com/WordPress/gutenberg/pull/27862))
+-   Block crashes if font family is not found. ([27654](https://github.com/WordPress/gutenberg/pull/27654))
+-   popover flickering on small screens. ([27648](https://github.com/WordPress/gutenberg/pull/27648))
+-   Adding single use block from main inserter causes focus loss and menu to be stuck open. ([27641](https://github.com/WordPress/gutenberg/pull/27641))
+-   Changelog for 9.5.2. ([27638](https://github.com/WordPress/gutenberg/pull/27638))
+-   Uncaught error with a custom generic store without a unsubscribe function in useSelect. ([27634](https://github.com/WordPress/gutenberg/pull/27634))
+-   Revert date changes from branch 'replace-moment'. ([27550](https://github.com/WordPress/gutenberg/pull/27550))
+-   useMediaQuery: Make it safe for SSR environments without window. ([27542](https://github.com/WordPress/gutenberg/pull/27542))
+-   Fixes the width on the circle color picker popover. ([27523](https://github.com/WordPress/gutenberg/pull/27523))
+-   ComboboxControl/FormTokenField: Fix iOS zooming for input. ([27471](https://github.com/WordPress/gutenberg/pull/27471))
+-   Fallback to regular subscribe if the store doesn't exist in useSelect. ([27466](https://github.com/WordPress/gutenberg/pull/27466))
+-   Global Styles getPresetVariable uses a wrong variable; Remove GLOBAL_CONTEXT. ([27450](https://github.com/WordPress/gutenberg/pull/27450))
+-   Popover: Fix issue with undefined getBoundingClientRect. ([27445](https://github.com/WordPress/gutenberg/pull/27445))
+-   Try fixing combobox a11y issues. ([27431](https://github.com/WordPress/gutenberg/pull/27431))
+-   Support gradients with omitted stop positions in CustomGradientPicker. ([27413](https://github.com/WordPress/gutenberg/pull/27413))
+-   Fix combobox suggestion list closure when clicking scrollbar. ([27367](https://github.com/WordPress/gutenberg/pull/27367))
+-   Video Block: Let the video fill the container. ([27328](https://github.com/WordPress/gutenberg/pull/27328))
+-   Media & Text “crop image to fill” to work with linked media. ([27211](https://github.com/WordPress/gutenberg/pull/27211))
+-   Give editable fields in blocks better aria-labels. ([26582](https://github.com/WordPress/gutenberg/pull/26582))
+-   Replace function should handle empty string callback return in the shortcode parser. ([16358](https://github.com/WordPress/gutenberg/pull/16358))
 
 ### Performance
 
-- Split core blocks assets loading. ([25220](https://github.com/WordPress/gutenberg/pull/25220))
+-   Split core blocks assets loading. ([25220](https://github.com/WordPress/gutenberg/pull/25220))
 
 ### Experiments
 
-- Add a useDialog hook and replace the duplicated PopoverWrapper. ([27643](https://github.com/WordPress/gutenberg/pull/27643))
-- Refactor withFocusOutside to hook. ([27369](https://github.com/WordPress/gutenberg/pull/27369))
-- FSE: Block Navigation: update Navigation block placeholder. ([27018](https://github.com/WordPress/gutenberg/pull/27018))
-- FSE: Block Query
-  - Add new post link to Query. ([27732](https://github.com/WordPress/gutenberg/pull/27732))
-  - Allow Query Loop only inside Query block. ([27637](https://github.com/WordPress/gutenberg/pull/27637))
-  - Adjust mobile margins for the Query block's grid view. ([27619](https://github.com/WordPress/gutenberg/pull/27619))
-  - Query block: Allow inheriting the global query arguments. ([27128](https://github.com/WordPress/gutenberg/pull/27128))
-- FSE: Blocks
-  - Add comment-form block styles. ([27673](https://github.com/WordPress/gutenberg/pull/27673))
-  - Tag Cloud block: Adjust styles for the different block alignments. ([27342](https://github.com/WordPress/gutenberg/pull/27342))
-  - Site Logo:
-    - Remove line height. ([27623](https://github.com/WordPress/gutenberg/pull/27623))
-    - Add a rounded block style. ([27621](https://github.com/WordPress/gutenberg/pull/27621))
-- FSE: Infrastructure
-  - Apply hover class in outline mode. ([27714](https://github.com/WordPress/gutenberg/pull/27714))
-  - Update documentation to show how a theme can have FSE automatically enabled. ([27680](https://github.com/WordPress/gutenberg/pull/27680))
-  - Make the inserter in the site editor behave as a popover. ([27502](https://github.com/WordPress/gutenberg/pull/27502))
-  - Add an outline mode and use it both Site Editor and Template mode. ([27499](https://github.com/WordPress/gutenberg/pull/27499))
-  - Load the block patterns in the site editor. ([27497](https://github.com/WordPress/gutenberg/pull/27497))
-  - Move the templates prePersist logic to core-data. ([27464](https://github.com/WordPress/gutenberg/pull/27464))
-  - Expand the multi-entity saving panel by default. ([27437](https://github.com/WordPress/gutenberg/pull/27437))
-  - Reveal block boundaries on hover in the Site Editor. ([27271](https://github.com/WordPress/gutenberg/pull/27271))
-  - Site Editor - add query args for current context. ([27124](https://github.com/WordPress/gutenberg/pull/27124))
-  - Full Site Editing: Introduce a template editing mode inside the post editor. ([26355](https://github.com/WordPress/gutenberg/pull/26355))
-  - Remove optimistic updates to solve the template revert issue ([27797](https://github.com/WordPress/gutenberg/pull/27797))
-- FSE: Style System
-  - Fix: Font Weight and Style don't work independently on global styles. ([27659](https://github.com/WordPress/gutenberg/pull/27659))
-  - Add custom units in BoxControl. ([27626](https://github.com/WordPress/gutenberg/pull/27626))
-  - Remove Font style, weight, decoration, and transform presets. ([27555](https://github.com/WordPress/gutenberg/pull/27555))
-  - Make client preset metadata match server. ([27453](https://github.com/WordPress/gutenberg/pull/27453))
-  - Do not pass selectors and supports information to the client. ([27449](https://github.com/WordPress/gutenberg/pull/27449))
-  - Add border radius support. ([25791](https://github.com/WordPress/gutenberg/pull/25791))
-  - Update font-weight names. ([27718](https://github.com/WordPress/gutenberg/pull/27718))
-  - Update performance of global styles code ([27779](https://github.com/WordPress/gutenberg/pull/27779))
+-   Add a useDialog hook and replace the duplicated PopoverWrapper. ([27643](https://github.com/WordPress/gutenberg/pull/27643))
+-   Refactor withFocusOutside to hook. ([27369](https://github.com/WordPress/gutenberg/pull/27369))
+-   FSE: Block Navigation: update Navigation block placeholder. ([27018](https://github.com/WordPress/gutenberg/pull/27018))
+-   FSE: Block Query
+    -   Add new post link to Query. ([27732](https://github.com/WordPress/gutenberg/pull/27732))
+    -   Allow Query Loop only inside Query block. ([27637](https://github.com/WordPress/gutenberg/pull/27637))
+    -   Adjust mobile margins for the Query block's grid view. ([27619](https://github.com/WordPress/gutenberg/pull/27619))
+    -   Query block: Allow inheriting the global query arguments. ([27128](https://github.com/WordPress/gutenberg/pull/27128))
+-   FSE: Blocks
+    -   Add comment-form block styles. ([27673](https://github.com/WordPress/gutenberg/pull/27673))
+    -   Tag Cloud block: Adjust styles for the different block alignments. ([27342](https://github.com/WordPress/gutenberg/pull/27342))
+    -   Site Logo:
+        -   Remove line height. ([27623](https://github.com/WordPress/gutenberg/pull/27623))
+        -   Add a rounded block style. ([27621](https://github.com/WordPress/gutenberg/pull/27621))
+-   FSE: Infrastructure
+    -   Apply hover class in outline mode. ([27714](https://github.com/WordPress/gutenberg/pull/27714))
+    -   Update documentation to show how a theme can have FSE automatically enabled. ([27680](https://github.com/WordPress/gutenberg/pull/27680))
+    -   Make the inserter in the site editor behave as a popover. ([27502](https://github.com/WordPress/gutenberg/pull/27502))
+    -   Add an outline mode and use it both Site Editor and Template mode. ([27499](https://github.com/WordPress/gutenberg/pull/27499))
+    -   Load the block patterns in the site editor. ([27497](https://github.com/WordPress/gutenberg/pull/27497))
+    -   Move the templates prePersist logic to core-data. ([27464](https://github.com/WordPress/gutenberg/pull/27464))
+    -   Expand the multi-entity saving panel by default. ([27437](https://github.com/WordPress/gutenberg/pull/27437))
+    -   Reveal block boundaries on hover in the Site Editor. ([27271](https://github.com/WordPress/gutenberg/pull/27271))
+    -   Site Editor - add query args for current context. ([27124](https://github.com/WordPress/gutenberg/pull/27124))
+    -   Full Site Editing: Introduce a template editing mode inside the post editor. ([26355](https://github.com/WordPress/gutenberg/pull/26355))
+    -   Remove optimistic updates to solve the template revert issue ([27797](https://github.com/WordPress/gutenberg/pull/27797))
+-   FSE: Style System
+    -   Fix: Font Weight and Style don't work independently on global styles. ([27659](https://github.com/WordPress/gutenberg/pull/27659))
+    -   Add custom units in BoxControl. ([27626](https://github.com/WordPress/gutenberg/pull/27626))
+    -   Remove Font style, weight, decoration, and transform presets. ([27555](https://github.com/WordPress/gutenberg/pull/27555))
+    -   Make client preset metadata match server. ([27453](https://github.com/WordPress/gutenberg/pull/27453))
+    -   Do not pass selectors and supports information to the client. ([27449](https://github.com/WordPress/gutenberg/pull/27449))
+    -   Add border radius support. ([25791](https://github.com/WordPress/gutenberg/pull/25791))
+    -   Update font-weight names. ([27718](https://github.com/WordPress/gutenberg/pull/27718))
+    -   Update performance of global styles code ([27779](https://github.com/WordPress/gutenberg/pull/27779))
 
 ### Documentation
 
-- Add missing dependency to code example. ([27742](https://github.com/WordPress/gutenberg/pull/27742))
-- Precise that element ref returned by the hooks that return a ref can change between function or object. ([27610](https://github.com/WordPress/gutenberg/pull/27610))
-- Add escaping functions to code examples. ([27603](https://github.com/WordPress/gutenberg/pull/27603))
-- Add missing @wordpress/components/CHANGELOG.md entry. ([27576](https://github.com/WordPress/gutenberg/pull/27576))
-- Minor changes to release documentation for clarity. ([27571](https://github.com/WordPress/gutenberg/pull/27571))
-- Capitalize JavaScript in accordance with the word mark. ([27539](https://github.com/WordPress/gutenberg/pull/27539))
-- Fix typo in attributes.md. ([27440](https://github.com/WordPress/gutenberg/pull/27440))
-- Try: Update readme screenshot. ([27223](https://github.com/WordPress/gutenberg/pull/27223))
-- Document the useBlockWrapper hook in the block registration documentation. ([26592](https://github.com/WordPress/gutenberg/pull/26592))
-- Add a document explaining the different block API versions. ([26277](https://github.com/WordPress/gutenberg/pull/26277))
-- Update the registration examples to use apiVersion 2. ([26100](https://github.com/WordPress/gutenberg/pull/26100))
+-   Add missing dependency to code example. ([27742](https://github.com/WordPress/gutenberg/pull/27742))
+-   Precise that element ref returned by the hooks that return a ref can change between function or object. ([27610](https://github.com/WordPress/gutenberg/pull/27610))
+-   Add escaping functions to code examples. ([27603](https://github.com/WordPress/gutenberg/pull/27603))
+-   Add missing @wordpress/components/CHANGELOG.md entry. ([27576](https://github.com/WordPress/gutenberg/pull/27576))
+-   Minor changes to release documentation for clarity. ([27571](https://github.com/WordPress/gutenberg/pull/27571))
+-   Capitalize JavaScript in accordance with the word mark. ([27539](https://github.com/WordPress/gutenberg/pull/27539))
+-   Fix typo in attributes.md. ([27440](https://github.com/WordPress/gutenberg/pull/27440))
+-   Try: Update readme screenshot. ([27223](https://github.com/WordPress/gutenberg/pull/27223))
+-   Document the useBlockWrapper hook in the block registration documentation. ([26592](https://github.com/WordPress/gutenberg/pull/26592))
+-   Add a document explaining the different block API versions. ([26277](https://github.com/WordPress/gutenberg/pull/26277))
+-   Update the registration examples to use apiVersion 2. ([26100](https://github.com/WordPress/gutenberg/pull/26100))
 
 ### Code Quality
 
-- Remove: Missed unused weights and style translation code. ([27739](https://github.com/WordPress/gutenberg/pull/27739))
-- useDialog: Remove mousedown propagation stopping. ([27725](https://github.com/WordPress/gutenberg/pull/27725))
-- Try: Simplify focus return. ([27705](https://github.com/WordPress/gutenberg/pull/27705))
-- Popover/Modal: Remove and deprecate IsolatedEventContainer. ([27703](https://github.com/WordPress/gutenberg/pull/27703))
-- Popover: Use focus outside hook. ([27700](https://github.com/WordPress/gutenberg/pull/27700))
-- refactor: Tooltip component from classical to functional with hooks. ([27682](https://github.com/WordPress/gutenberg/pull/27682))
-- Template-part padding: Use variables. ([27679](https://github.com/WordPress/gutenberg/pull/27679))
-- Scope image block style variations to only the image block. ([27649](https://github.com/WordPress/gutenberg/pull/27649))
-- Refactor the EditorProvider component and extract hooks. ([27605](https://github.com/WordPress/gutenberg/pull/27605))
-- Use store definition instead of string for notices packages. ([27548](https://github.com/WordPress/gutenberg/pull/27548))
-- Merge RootContainer with BlockList. ([27531](https://github.com/WordPress/gutenberg/pull/27531))
-- Block wrapper: Isolate functionality into smaller hooks. ([27503](https://github.com/WordPress/gutenberg/pull/27503))
-- Writing flow: Consider events only from DOM descendents. ([27489](https://github.com/WordPress/gutenberg/pull/27489))
-- Writing flow: Isolate multi select focus element. ([27482](https://github.com/WordPress/gutenberg/pull/27482))
-- Multi selection: Move hook to WritingFlow with other multi selection logic. ([27479](https://github.com/WordPress/gutenberg/pull/27479))
-- Insertion indicator: Render after last block if none is specified. ([27472](https://github.com/WordPress/gutenberg/pull/27472))
-- Rewrite selection clearer in Block editor. ([27468](https://github.com/WordPress/gutenberg/pull/27468))
-- Move block focus listener to block props hook. ([27463](https://github.com/WordPress/gutenberg/pull/27463))
-- Block editor: Refactor effect.js to controls. ([27298](https://github.com/WordPress/gutenberg/pull/27298))
-- Animate: Type getAnimateClassName. ([27123](https://github.com/WordPress/gutenberg/pull/27123))
-- Refactor image block's image editing tools into separate components. ([27089](https://github.com/WordPress/gutenberg/pull/27089))
-- Drop zone provider: Option to avoid wrapper element. ([27079](https://github.com/WordPress/gutenberg/pull/27079))
-- Audit variables stylesheet. ([26827](https://github.com/WordPress/gutenberg/pull/26827))
-- group block padding: Use variables. ([27676](https://github.com/WordPress/gutenberg/pull/27676))
+-   Remove: Missed unused weights and style translation code. ([27739](https://github.com/WordPress/gutenberg/pull/27739))
+-   useDialog: Remove mousedown propagation stopping. ([27725](https://github.com/WordPress/gutenberg/pull/27725))
+-   Try: Simplify focus return. ([27705](https://github.com/WordPress/gutenberg/pull/27705))
+-   Popover/Modal: Remove and deprecate IsolatedEventContainer. ([27703](https://github.com/WordPress/gutenberg/pull/27703))
+-   Popover: Use focus outside hook. ([27700](https://github.com/WordPress/gutenberg/pull/27700))
+-   refactor: Tooltip component from classical to functional with hooks. ([27682](https://github.com/WordPress/gutenberg/pull/27682))
+-   Template-part padding: Use variables. ([27679](https://github.com/WordPress/gutenberg/pull/27679))
+-   Scope image block style variations to only the image block. ([27649](https://github.com/WordPress/gutenberg/pull/27649))
+-   Refactor the EditorProvider component and extract hooks. ([27605](https://github.com/WordPress/gutenberg/pull/27605))
+-   Use store definition instead of string for notices packages. ([27548](https://github.com/WordPress/gutenberg/pull/27548))
+-   Merge RootContainer with BlockList. ([27531](https://github.com/WordPress/gutenberg/pull/27531))
+-   Block wrapper: Isolate functionality into smaller hooks. ([27503](https://github.com/WordPress/gutenberg/pull/27503))
+-   Writing flow: Consider events only from DOM descendents. ([27489](https://github.com/WordPress/gutenberg/pull/27489))
+-   Writing flow: Isolate multi select focus element. ([27482](https://github.com/WordPress/gutenberg/pull/27482))
+-   Multi selection: Move hook to WritingFlow with other multi selection logic. ([27479](https://github.com/WordPress/gutenberg/pull/27479))
+-   Insertion indicator: Render after last block if none is specified. ([27472](https://github.com/WordPress/gutenberg/pull/27472))
+-   Rewrite selection clearer in Block editor. ([27468](https://github.com/WordPress/gutenberg/pull/27468))
+-   Move block focus listener to block props hook. ([27463](https://github.com/WordPress/gutenberg/pull/27463))
+-   Block editor: Refactor effect.js to controls. ([27298](https://github.com/WordPress/gutenberg/pull/27298))
+-   Animate: Type getAnimateClassName. ([27123](https://github.com/WordPress/gutenberg/pull/27123))
+-   Refactor image block's image editing tools into separate components. ([27089](https://github.com/WordPress/gutenberg/pull/27089))
+-   Drop zone provider: Option to avoid wrapper element. ([27079](https://github.com/WordPress/gutenberg/pull/27079))
+-   Audit variables stylesheet. ([26827](https://github.com/WordPress/gutenberg/pull/26827))
+-   group block padding: Use variables. ([27676](https://github.com/WordPress/gutenberg/pull/27676))
 
 ### Tools
 
-- Release script: Set draft status, and only remove after uploading asset. ([27713](https://github.com/WordPress/gutenberg/pull/27713))
-- CI: Run date test timezone and locale variations using bash script. ([27600](https://github.com/WordPress/gutenberg/pull/27600))
-- Upgrade Babel packages to 7.12.x. ([27553](https://github.com/WordPress/gutenberg/pull/27553))
-- CI: Run package/date unit tests in different timezones. ([27552](https://github.com/WordPress/gutenberg/pull/27552))
-- Avoid cancelling other end-to-end test jobs when one fails. ([27541](https://github.com/WordPress/gutenberg/pull/27541))
-- Add webpack 5 support to dependency-extraction-webpack-plugin. ([27533](https://github.com/WordPress/gutenberg/pull/27533))
-- Add GitHub support document. ([27524](https://github.com/WordPress/gutenberg/pull/27524))
-- Stabilize adding blocks end to end test. ([27493](https://github.com/WordPress/gutenberg/pull/27493))
-- GitHub Actions: Use a build matrix for the end-to-end tests GH action. ([27487](https://github.com/WordPress/gutenberg/pull/27487))
-- Packages: Make it possible to select minimum version bump for publishing. ([27459](https://github.com/WordPress/gutenberg/pull/27459))
-- Upgrade wp-prettier to 2.2.1. ([27441](https://github.com/WordPress/gutenberg/pull/27441))
-- Testing: Make image size test more stable. ([27439](https://github.com/WordPress/gutenberg/pull/27439))
-- Packages: Improve the script that automates version bumps. ([27436](https://github.com/WordPress/gutenberg/pull/27436))
-- CI: Update bundle size workflow to use the latest version. ([27435](https://github.com/WordPress/gutenberg/pull/27435))
-- wp-env: Xdebug support. ([27346](https://github.com/WordPress/gutenberg/pull/27346))
-- Make zip-based URL parsing more general. ([27019](https://github.com/WordPress/gutenberg/pull/27019))
-- Add inserter performance measures. ([26634](https://github.com/WordPress/gutenberg/pull/26634))
+-   Release script: Set draft status, and only remove after uploading asset. ([27713](https://github.com/WordPress/gutenberg/pull/27713))
+-   CI: Run date test timezone and locale variations using bash script. ([27600](https://github.com/WordPress/gutenberg/pull/27600))
+-   Upgrade Babel packages to 7.12.x. ([27553](https://github.com/WordPress/gutenberg/pull/27553))
+-   CI: Run package/date unit tests in different timezones. ([27552](https://github.com/WordPress/gutenberg/pull/27552))
+-   Avoid cancelling other end-to-end test jobs when one fails. ([27541](https://github.com/WordPress/gutenberg/pull/27541))
+-   Add webpack 5 support to dependency-extraction-webpack-plugin. ([27533](https://github.com/WordPress/gutenberg/pull/27533))
+-   Add GitHub support document. ([27524](https://github.com/WordPress/gutenberg/pull/27524))
+-   Stabilize adding blocks end to end test. ([27493](https://github.com/WordPress/gutenberg/pull/27493))
+-   GitHub Actions: Use a build matrix for the end-to-end tests GH action. ([27487](https://github.com/WordPress/gutenberg/pull/27487))
+-   Packages: Make it possible to select minimum version bump for publishing. ([27459](https://github.com/WordPress/gutenberg/pull/27459))
+-   Upgrade wp-prettier to 2.2.1. ([27441](https://github.com/WordPress/gutenberg/pull/27441))
+-   Testing: Make image size test more stable. ([27439](https://github.com/WordPress/gutenberg/pull/27439))
+-   Packages: Improve the script that automates version bumps. ([27436](https://github.com/WordPress/gutenberg/pull/27436))
+-   CI: Update bundle size workflow to use the latest version. ([27435](https://github.com/WordPress/gutenberg/pull/27435))
+-   wp-env: Xdebug support. ([27346](https://github.com/WordPress/gutenberg/pull/27346))
+-   Make zip-based URL parsing more general. ([27019](https://github.com/WordPress/gutenberg/pull/27019))
+-   Add inserter performance measures. ([26634](https://github.com/WordPress/gutenberg/pull/26634))
 
 ### Various
 
-- Verse Block:
-  - Add support for custom padding. ([27341](https://github.com/WordPress/gutenberg/pull/27341))
-  - Add support for font family. ([27332](https://github.com/WordPress/gutenberg/pull/27332))
-  - Add support for font size. ([27735](https://github.com/WordPress/gutenberg/pull/27735))
-  - Update CSS for frontend and editor. ([27734](https://github.com/WordPress/gutenberg/pull/27734))
-- Popover: Use a11y hooks instead of HoCs. ([27707](https://github.com/WordPress/gutenberg/pull/27707))
-- Refactor focus on mount. ([27699](https://github.com/WordPress/gutenberg/pull/27699))
-- Search block: Use em values for padding. ([27678](https://github.com/WordPress/gutenberg/pull/27678))
-- Button: Is-busy state candybar animation fixed. ([27592](https://github.com/WordPress/gutenberg/pull/27592))
-- Preformatted block: Add support for font sizes. ([27584](https://github.com/WordPress/gutenberg/pull/27584))
-- Remove autoFocus prop from URLInput and from the inserter search form. ([27578](https://github.com/WordPress/gutenberg/pull/27578))
-- Package lock: Update ws. ([27532](https://github.com/WordPress/gutenberg/pull/27532))
-- Update block-patterns.md. ([27520](https://github.com/WordPress/gutenberg/pull/27520))
-- Update wp-env codeowners. ([27491](https://github.com/WordPress/gutenberg/pull/27491))
-- Update the backup icon to better align with WordPress icon package dna. ([27465](https://github.com/WordPress/gutenberg/pull/27465))
-- Update the rich text control titles to sentence case structure. ([27447](https://github.com/WordPress/gutenberg/pull/27447))
-- Search Block: Remove the button only option from the UI. ([27379](https://github.com/WordPress/gutenberg/pull/27379))
-- Add icons for template parts. ([27378](https://github.com/WordPress/gutenberg/pull/27378))
-- Increase radio dimensions to match checkboxes. ([27377](https://github.com/WordPress/gutenberg/pull/27377))
-- Adjusts settings modal height to 90%. ([27362](https://github.com/WordPress/gutenberg/pull/27362))
-- Change the Labels of the Vertical Align options. ([27356](https://github.com/WordPress/gutenberg/pull/27356))
-- Add element selector to template-part block. ([27101](https://github.com/WordPress/gutenberg/pull/27101))
-- Add explicit dismiss button and on dismiss callback to snackbar. ([26952](https://github.com/WordPress/gutenberg/pull/26952))
-- Make social list block align right able on published page & preview. ([26861](https://github.com/WordPress/gutenberg/pull/26861))
-- Update media-text focalPoint conditional rendering. ([25968](https://github.com/WordPress/gutenberg/pull/25968))
-- Remove default icon from PluginBlockSettingsMenuItem. ([21392](https://github.com/WordPress/gutenberg/pull/21392))
-- Add example preview to video block. ([20703](https://github.com/WordPress/gutenberg/pull/20703))
-
+-   Verse Block:
+    -   Add support for custom padding. ([27341](https://github.com/WordPress/gutenberg/pull/27341))
+    -   Add support for font family. ([27332](https://github.com/WordPress/gutenberg/pull/27332))
+    -   Add support for font size. ([27735](https://github.com/WordPress/gutenberg/pull/27735))
+    -   Update CSS for frontend and editor. ([27734](https://github.com/WordPress/gutenberg/pull/27734))
+-   Popover: Use a11y hooks instead of HoCs. ([27707](https://github.com/WordPress/gutenberg/pull/27707))
+-   Refactor focus on mount. ([27699](https://github.com/WordPress/gutenberg/pull/27699))
+-   Search block: Use em values for padding. ([27678](https://github.com/WordPress/gutenberg/pull/27678))
+-   Button: Is-busy state candybar animation fixed. ([27592](https://github.com/WordPress/gutenberg/pull/27592))
+-   Preformatted block: Add support for font sizes. ([27584](https://github.com/WordPress/gutenberg/pull/27584))
+-   Remove autoFocus prop from URLInput and from the inserter search form. ([27578](https://github.com/WordPress/gutenberg/pull/27578))
+-   Package lock: Update ws. ([27532](https://github.com/WordPress/gutenberg/pull/27532))
+-   Update block-patterns.md. ([27520](https://github.com/WordPress/gutenberg/pull/27520))
+-   Update wp-env codeowners. ([27491](https://github.com/WordPress/gutenberg/pull/27491))
+-   Update the backup icon to better align with WordPress icon package dna. ([27465](https://github.com/WordPress/gutenberg/pull/27465))
+-   Update the rich text control titles to sentence case structure. ([27447](https://github.com/WordPress/gutenberg/pull/27447))
+-   Search Block: Remove the button only option from the UI. ([27379](https://github.com/WordPress/gutenberg/pull/27379))
+-   Add icons for template parts. ([27378](https://github.com/WordPress/gutenberg/pull/27378))
+-   Increase radio dimensions to match checkboxes. ([27377](https://github.com/WordPress/gutenberg/pull/27377))
+-   Adjusts settings modal height to 90%. ([27362](https://github.com/WordPress/gutenberg/pull/27362))
+-   Change the Labels of the Vertical Align options. ([27356](https://github.com/WordPress/gutenberg/pull/27356))
+-   Add element selector to template-part block. ([27101](https://github.com/WordPress/gutenberg/pull/27101))
+-   Add explicit dismiss button and on dismiss callback to snackbar. ([26952](https://github.com/WordPress/gutenberg/pull/26952))
+-   Make social list block align right able on published page & preview. ([26861](https://github.com/WordPress/gutenberg/pull/26861))
+-   Update media-text focalPoint conditional rendering. ([25968](https://github.com/WordPress/gutenberg/pull/25968))
+-   Remove default icon from PluginBlockSettingsMenuItem. ([21392](https://github.com/WordPress/gutenberg/pull/21392))
+-   Add example preview to video block. ([20703](https://github.com/WordPress/gutenberg/pull/20703))
 
 = 9.5.2 =
 
-### Bug Fixes:
+## Changelog
 
-- Fix uncaught error with a custom generic store without a unsubscribe function in useSelect.
+### Bug Fixes:
 
+-   Fix uncaught error with a custom generic store without a unsubscribe function in useSelect.
 
 = 9.5.1 =
 
-### Bug Fixes:
+## Changelog
 
- - Revert date changes from branch 'replace-moment.
- - Popover: Fix issue with undefined getBoundingClientRect.
- - Fallback to regular subscribe if the store doesn't exist in useSelect.
+### Bug Fixes:
 
+-   Revert date changes from branch 'replace-moment.
+-   Popover: Fix issue with undefined getBoundingClientRect.
+-   Fallback to regular subscribe if the store doesn't exist in useSelect.
 
 = 9.5.0 =
 
+## Changelog
+
 ### Features
-- Full Height Alignment control: Implementation and Cover block integration. ([26615](https://github.com/WordPress/gutenberg/pull/26615))
-- Code block: Add support for font sizes. ([27294](https://github.com/WordPress/gutenberg/pull/27294))
+
+-   Full Height Alignment control: Implementation and Cover block integration. ([26615](https://github.com/WordPress/gutenberg/pull/26615))
+-   Code block: Add support for font sizes. ([27294](https://github.com/WordPress/gutenberg/pull/27294))
 
 ### Enhancements
 
-- Improve block patterns preview in the Inserter. ([27204](https://github.com/WordPress/gutenberg/pull/27204))
-- Enhance social links placeholder to look more like the end result. ([26953](https://github.com/WordPress/gutenberg/pull/26953))
-- Add labels to image zoom control. ([24574](https://github.com/WordPress/gutenberg/pull/24574))
+-   Improve block patterns preview in the Inserter. ([27204](https://github.com/WordPress/gutenberg/pull/27204))
+-   Enhance social links placeholder to look more like the end result. ([26953](https://github.com/WordPress/gutenberg/pull/26953))
+-   Add labels to image zoom control. ([24574](https://github.com/WordPress/gutenberg/pull/24574))
 
 ### New APIs
 
-- Data: Use store instance as param for select and dispatch. ([26655](https://github.com/WordPress/gutenberg/pull/26655))
-- Adds instance URL to wp-env start. ([27282](https://github.com/WordPress/gutenberg/pull/27282))
-
-### Bug Fixes
-
-- Fix crash when null date passed to TimePicker. ([27316](https://github.com/WordPress/gutenberg/pull/27316))
-- Add backward compatibility support for lightBlockWrapper in getSaveElement. ([27189](https://github.com/WordPress/gutenberg/pull/27189))
-- Restore the gray background in Post Editor. ([27188](https://github.com/WordPress/gutenberg/pull/27188))
-- Font size picker bug that adds px units to empty string values. ([27111](https://github.com/WordPress/gutenberg/pull/27111))
-- Font size unit back-compatibility does not executes on post edit. ([27106](https://github.com/WordPress/gutenberg/pull/27106))
-- Drop zone: Fix infinite loop in some contexts. ([27090](https://github.com/WordPress/gutenberg/pull/27090))
-- Interface regions: Fix focus style (on click). ([27074](https://github.com/WordPress/gutenberg/pull/27074))
-- Fix Separator editor styles. ([27071](https://github.com/WordPress/gutenberg/pull/27071))
-- Fix custom spacing support. ([27045](https://github.com/WordPress/gutenberg/pull/27045))
-- Fix jest process hanging. ([27008](https://github.com/WordPress/gutenberg/pull/27008))
-- Fix combobox suggestion list closure when clicking scrollbar. ([27367](https://github.com/WordPress/gutenberg/pull/27367))
-- Constrain tabbing to the popover in media replace flow. ([26939](https://github.com/WordPress/gutenberg/pull/26939))
-- Fix RangeControl mark placement and cursor styles. ([26745](https://github.com/WordPress/gutenberg/pull/26745))
-- New authors dropdown breaks author selection for editors. ([26554](https://github.com/WordPress/gutenberg/pull/26554))
-- Hooks: Use own instance's `doAction` for built-in hooks. ([26498](https://github.com/WordPress/gutenberg/pull/26498))
-- Inserter: Show preview in search results. ([27193](https://github.com/WordPress/gutenberg/pull/27193))
-- Gallery block:
-  - Fix duplicate css class. ([27311](https://github.com/WordPress/gutenberg/pull/27311))
-  - Adds back in icon and title for gallery block. ([27293](https://github.com/WordPress/gutenberg/pull/27293))
-- Search block: Fix icon strokeWidth properties. ([27308](https://github.com/WordPress/gutenberg/pull/27308))
-- Image block:
-  - Fix the zoom slider width. ([27285](https://github.com/WordPress/gutenberg/pull/27285))
-  - Fix double paste from clipboard. ([27199](https://github.com/WordPress/gutenberg/pull/27199))
-  - Hide some controls on multi selection of Image blocks. ([27105](https://github.com/WordPress/gutenberg/pull/27105))
-- Columns: Align single half width column to left. ([27142](https://github.com/WordPress/gutenberg/pull/27142))
+-   Data: Use store instance as param for select and dispatch. ([26655](https://github.com/WordPress/gutenberg/pull/26655))
+-   Adds instance URL to wp-env start. ([27282](https://github.com/WordPress/gutenberg/pull/27282))
+
+### Bug Fixes
+
+-   Fix crash when null date passed to TimePicker. ([27316](https://github.com/WordPress/gutenberg/pull/27316))
+-   Add backward compatibility support for lightBlockWrapper in getSaveElement. ([27189](https://github.com/WordPress/gutenberg/pull/27189))
+-   Restore the gray background in Post Editor. ([27188](https://github.com/WordPress/gutenberg/pull/27188))
+-   Font size picker bug that adds px units to empty string values. ([27111](https://github.com/WordPress/gutenberg/pull/27111))
+-   Font size unit back-compatibility does not executes on post edit. ([27106](https://github.com/WordPress/gutenberg/pull/27106))
+-   Drop zone: Fix infinite loop in some contexts. ([27090](https://github.com/WordPress/gutenberg/pull/27090))
+-   Interface regions: Fix focus style (on click). ([27074](https://github.com/WordPress/gutenberg/pull/27074))
+-   Fix Separator editor styles. ([27071](https://github.com/WordPress/gutenberg/pull/27071))
+-   Fix custom spacing support. ([27045](https://github.com/WordPress/gutenberg/pull/27045))
+-   Fix jest process hanging. ([27008](https://github.com/WordPress/gutenberg/pull/27008))
+-   Fix combobox suggestion list closure when clicking scrollbar. ([27367](https://github.com/WordPress/gutenberg/pull/27367))
+-   Constrain tabbing to the popover in media replace flow. ([26939](https://github.com/WordPress/gutenberg/pull/26939))
+-   Fix RangeControl mark placement and cursor styles. ([26745](https://github.com/WordPress/gutenberg/pull/26745))
+-   New authors dropdown breaks author selection for editors. ([26554](https://github.com/WordPress/gutenberg/pull/26554))
+-   Hooks: Use own instance's `doAction` for built-in hooks. ([26498](https://github.com/WordPress/gutenberg/pull/26498))
+-   Inserter: Show preview in search results. ([27193](https://github.com/WordPress/gutenberg/pull/27193))
+-   Gallery block:
+    -   Fix duplicate css class. ([27311](https://github.com/WordPress/gutenberg/pull/27311))
+    -   Adds back in icon and title for gallery block. ([27293](https://github.com/WordPress/gutenberg/pull/27293))
+-   Search block: Fix icon strokeWidth properties. ([27308](https://github.com/WordPress/gutenberg/pull/27308))
+-   Image block:
+    -   Fix the zoom slider width. ([27285](https://github.com/WordPress/gutenberg/pull/27285))
+    -   Fix double paste from clipboard. ([27199](https://github.com/WordPress/gutenberg/pull/27199))
+    -   Hide some controls on multi selection of Image blocks. ([27105](https://github.com/WordPress/gutenberg/pull/27105))
+-   Columns: Align single half width column to left. ([27142](https://github.com/WordPress/gutenberg/pull/27142))
 
 ### Performance
 
-- Minimize the calls in useSelect by subscribing to only the stores needed. ([26724](https://github.com/WordPress/gutenberg/pull/26724))
-- Update prefer lang constructs to functions. ([27070](https://github.com/WordPress/gutenberg/pull/27070))
+-   Minimize the calls in useSelect by subscribing to only the stores needed. ([26724](https://github.com/WordPress/gutenberg/pull/26724))
+-   Update prefer lang constructs to functions. ([27070](https://github.com/WordPress/gutenberg/pull/27070))
 
 ### Experiments
 
-- Full Site Editing Framework:
-  - Fix template resolution priorities. ([27303](https://github.com/WordPress/gutenberg/pull/27303))
-  - Update default templates. ([26941](https://github.com/WordPress/gutenberg/pull/26941))
-  - Add Support for Templates Default and Custom Titles and Descriptions (JS side - [27038](https://github.com/WordPress/gutenberg/pull/27038), PHP side [27036](https://github.com/WordPress/gutenberg/pull/27036))
-  - Add theme taxonomy to templates and template parts. ([27016](https://github.com/WordPress/gutenberg/pull/27016))
-- Full Site Editing Blocks:
-  - Make the post title block editable. ([27240](https://github.com/WordPress/gutenberg/pull/27240))
-  - Post Comment: Update placeholder. ([27013](https://github.com/WordPress/gutenberg/pull/27013))
-  - Enable Post Featured Image to be set and replaced. ([27224](https://github.com/WordPress/gutenberg/pull/27224))
-  - Add alignment controls to Post Featured Image block. ([27076](https://github.com/WordPress/gutenberg/pull/27076))
-  - Query block:
-    - Add grid view. ([27067](https://github.com/WordPress/gutenberg/pull/27067))
-    - Add Posts List variation. ([26990](https://github.com/WordPress/gutenberg/pull/26990))
-    - New settings icon in block toolbar. ([27057](https://github.com/WordPress/gutenberg/pull/27057))
-    - Fetch all available post types (#27049). ([27056](https://github.com/WordPress/gutenberg/pull/27056))
-    - Update Query block's icon. ([27048](https://github.com/WordPress/gutenberg/pull/27048))
-    - Query and QueryLoop use useInnerBlocksProps. ([27014](https://github.com/WordPress/gutenberg/pull/27014))
-
-- Site Editor:
-  - Avoid throwing warnings if there are no terms for a template or template part. ([27210](https://github.com/WordPress/gutenberg/pull/27210))
-  - Replace adminbar customize link with site-editor in FSE themes. ([27135](https://github.com/WordPress/gutenberg/pull/27135))
-  - Update the new templates dropdown list. ([27235](https://github.com/WordPress/gutenberg/pull/27235))
-  - Remove .block-editor selector dependency. ([27063](https://github.com/WordPress/gutenberg/pull/27063))
-  - Remove unused FullscreenModeClose component. ([26997](https://github.com/WordPress/gutenberg/pull/26997))
-  - Navigation:
-    - Fix item color and padding. ([27096](https://github.com/WordPress/gutenberg/pull/27096))
-    - Hide empty menus. ([27141](https://github.com/WordPress/gutenberg/pull/27141))
-    - Add isText prop to NavigationItem. ([27003](https://github.com/WordPress/gutenberg/pull/27003))
-    - Handle the no search results state. ([27160](https://github.com/WordPress/gutenberg/pull/27160))
-    - Add search to templates and template parts. ([26665](https://github.com/WordPress/gutenberg/pull/26665))
-    - Hide navigation item if target menu is empty. ([25746](https://github.com/WordPress/gutenberg/pull/25746))
-- Global Styles:
-  - Sort Global Styles block panels by panel title. ([27163](https://github.com/WordPress/gutenberg/pull/27163))
-  - Font Appearance should be enabled globally. ([27150](https://github.com/WordPress/gutenberg/pull/27150))
-  - Restrict edition of theme colors by users. ([27250](https://github.com/WordPress/gutenberg/pull/27250))
-  - Update mechanism that resolves Global Styles data. ([27237](https://github.com/WordPress/gutenberg/pull/27237))
-  - Include px units on default font sizes defined on theme.json. ([27083](https://github.com/WordPress/gutenberg/pull/27083))
-  - Update stylesheet generation at edit site. ([27065](https://github.com/WordPress/gutenberg/pull/27065))
-  - Add button to reset color palette. ([26975](https://github.com/WordPress/gutenberg/pull/26975))
-  - Abstract preset variable retrieving and setting. ([26970](https://github.com/WordPress/gutenberg/pull/26970))
-  - Update metadata and add support for padding. ([27099](https://github.com/WordPress/gutenberg/pull/27099))
-- Templates and Template Parts wp-admin lists:
-  - Update the template parts admin list with new columns and views. ([27156](https://github.com/WordPress/gutenberg/pull/27156))
-  - Add the theme source to the templates wp-admin list. ([27108](https://github.com/WordPress/gutenberg/pull/27108))
-  - Extend the wp_template admin list with new views and columns. ([27034](https://github.com/WordPress/gutenberg/pull/27034))
-
-- Support registry inheritance with atomic stores. ([27162](https://github.com/WordPress/gutenberg/pull/27162))
-- Code block: Paste plain text. ([27236](https://github.com/WordPress/gutenberg/pull/27236))
-- Generalize the atom family concept as an atom selector concept instead. ([27147](https://github.com/WordPress/gutenberg/pull/27147))
-- Bugs:
-  - Query block: Fix dirtying post on load. ([27323](https://github.com/WordPress/gutenberg/pull/27323))
-  - Preserve 'Your homepage displays' settings when updating the 'general' settings. ([27206](https://github.com/WordPress/gutenberg/pull/27206))
-  - Make sure templates and parts queries filter by tax_query. ([27113](https://github.com/WordPress/gutenberg/pull/27113))
-  - Fix Template Part Not Found message on Windows server. ([26772](https://github.com/WordPress/gutenberg/pull/26772))
-  - Respect filtered settings when they're ported to theme.json format. ([27010](https://github.com/WordPress/gutenberg/pull/27010))
-  - Preset controls need the preset CSS variables in scope. ([27119](https://github.com/WordPress/gutenberg/pull/27119))
-  - Site Editor:
-    - Show document title on small screens with nav sidebar open. ([27051](https://github.com/WordPress/gutenberg/pull/27051))
-    - Fix block toolbar positioning. ([27266](https://github.com/WordPress/gutenberg/pull/27266))
-    - Fix app header on small-medium screens. ([27310](https://github.com/WordPress/gutenberg/pull/27310))
+-   Full Site Editing Framework:
+    -   Fix template resolution priorities. ([27303](https://github.com/WordPress/gutenberg/pull/27303))
+    -   Update default templates. ([26941](https://github.com/WordPress/gutenberg/pull/26941))
+    -   Add Support for Templates Default and Custom Titles and Descriptions (JS side - [27038](https://github.com/WordPress/gutenberg/pull/27038), PHP side [27036](https://github.com/WordPress/gutenberg/pull/27036))
+    -   Add theme taxonomy to templates and template parts. ([27016](https://github.com/WordPress/gutenberg/pull/27016))
+-   Full Site Editing Blocks:
+
+    -   Make the post title block editable. ([27240](https://github.com/WordPress/gutenberg/pull/27240))
+    -   Post Comment: Update placeholder. ([27013](https://github.com/WordPress/gutenberg/pull/27013))
+    -   Enable Post Featured Image to be set and replaced. ([27224](https://github.com/WordPress/gutenberg/pull/27224))
+    -   Add alignment controls to Post Featured Image block. ([27076](https://github.com/WordPress/gutenberg/pull/27076))
+    -   Query block:
+        -   Add grid view. ([27067](https://github.com/WordPress/gutenberg/pull/27067))
+        -   Add Posts List variation. ([26990](https://github.com/WordPress/gutenberg/pull/26990))
+        -   New settings icon in block toolbar. ([27057](https://github.com/WordPress/gutenberg/pull/27057))
+        -   Fetch all available post types (#27049). ([27056](https://github.com/WordPress/gutenberg/pull/27056))
+        -   Update Query block's icon. ([27048](https://github.com/WordPress/gutenberg/pull/27048))
+        -   Query and QueryLoop use useInnerBlocksProps. ([27014](https://github.com/WordPress/gutenberg/pull/27014))
+
+-   Site Editor:
+    -   Avoid throwing warnings if there are no terms for a template or template part. ([27210](https://github.com/WordPress/gutenberg/pull/27210))
+    -   Replace adminbar customize link with site-editor in FSE themes. ([27135](https://github.com/WordPress/gutenberg/pull/27135))
+    -   Update the new templates dropdown list. ([27235](https://github.com/WordPress/gutenberg/pull/27235))
+    -   Remove .block-editor selector dependency. ([27063](https://github.com/WordPress/gutenberg/pull/27063))
+    -   Remove unused FullscreenModeClose component. ([26997](https://github.com/WordPress/gutenberg/pull/26997))
+    -   Navigation:
+        -   Fix item color and padding. ([27096](https://github.com/WordPress/gutenberg/pull/27096))
+        -   Hide empty menus. ([27141](https://github.com/WordPress/gutenberg/pull/27141))
+        -   Add isText prop to NavigationItem. ([27003](https://github.com/WordPress/gutenberg/pull/27003))
+        -   Handle the no search results state. ([27160](https://github.com/WordPress/gutenberg/pull/27160))
+        -   Add search to templates and template parts. ([26665](https://github.com/WordPress/gutenberg/pull/26665))
+        -   Hide navigation item if target menu is empty. ([25746](https://github.com/WordPress/gutenberg/pull/25746))
+-   Global Styles:
+    -   Sort Global Styles block panels by panel title. ([27163](https://github.com/WordPress/gutenberg/pull/27163))
+    -   Font Appearance should be enabled globally. ([27150](https://github.com/WordPress/gutenberg/pull/27150))
+    -   Restrict edition of theme colors by users. ([27250](https://github.com/WordPress/gutenberg/pull/27250))
+    -   Update mechanism that resolves Global Styles data. ([27237](https://github.com/WordPress/gutenberg/pull/27237))
+    -   Include px units on default font sizes defined on theme.json. ([27083](https://github.com/WordPress/gutenberg/pull/27083))
+    -   Update stylesheet generation at edit site. ([27065](https://github.com/WordPress/gutenberg/pull/27065))
+    -   Add button to reset color palette. ([26975](https://github.com/WordPress/gutenberg/pull/26975))
+    -   Abstract preset variable retrieving and setting. ([26970](https://github.com/WordPress/gutenberg/pull/26970))
+    -   Update metadata and add support for padding. ([27099](https://github.com/WordPress/gutenberg/pull/27099))
+-   Templates and Template Parts wp-admin lists:
+
+    -   Update the template parts admin list with new columns and views. ([27156](https://github.com/WordPress/gutenberg/pull/27156))
+    -   Add the theme source to the templates wp-admin list. ([27108](https://github.com/WordPress/gutenberg/pull/27108))
+    -   Extend the wp_template admin list with new views and columns. ([27034](https://github.com/WordPress/gutenberg/pull/27034))
+
+-   Support registry inheritance with atomic stores. ([27162](https://github.com/WordPress/gutenberg/pull/27162))
+-   Code block: Paste plain text. ([27236](https://github.com/WordPress/gutenberg/pull/27236))
+-   Generalize the atom family concept as an atom selector concept instead. ([27147](https://github.com/WordPress/gutenberg/pull/27147))
+-   Bugs:
+    -   Query block: Fix dirtying post on load. ([27323](https://github.com/WordPress/gutenberg/pull/27323))
+    -   Preserve 'Your homepage displays' settings when updating the 'general' settings. ([27206](https://github.com/WordPress/gutenberg/pull/27206))
+    -   Make sure templates and parts queries filter by tax_query. ([27113](https://github.com/WordPress/gutenberg/pull/27113))
+    -   Fix Template Part Not Found message on Windows server. ([26772](https://github.com/WordPress/gutenberg/pull/26772))
+    -   Respect filtered settings when they're ported to theme.json format. ([27010](https://github.com/WordPress/gutenberg/pull/27010))
+    -   Preset controls need the preset CSS variables in scope. ([27119](https://github.com/WordPress/gutenberg/pull/27119))
+    -   Site Editor:
+        -   Show document title on small screens with nav sidebar open. ([27051](https://github.com/WordPress/gutenberg/pull/27051))
+        -   Fix block toolbar positioning. ([27266](https://github.com/WordPress/gutenberg/pull/27266))
+        -   Fix app header on small-medium screens. ([27310](https://github.com/WordPress/gutenberg/pull/27310))
 
 ### Documentation
 
-- Expand on the Deprecations documentation. ([27286](https://github.com/WordPress/gutenberg/pull/27286))
-- Publish MainDashboardButton documentation to handbook. ([27317](https://github.com/WordPress/gutenberg/pull/27317))
-- Update: Creating a block-based theme tutorial. ([27257](https://github.com/WordPress/gutenberg/pull/27257))
-- ESLint Plugin: Include a note about the minimum version required. ([27203](https://github.com/WordPress/gutenberg/pull/27203))
-- Docs: Update `@wordpress/data` README with API changes. ([27180](https://github.com/WordPress/gutenberg/pull/27180))
-- Data: Improve documentation for new API added around stores. ([27061](https://github.com/WordPress/gutenberg/pull/27061))
-- wp-env: Improve documentation for "run" command. ([27053](https://github.com/WordPress/gutenberg/pull/27053))
-- Code block: Update the documentation. ([27333](https://github.com/WordPress/gutenberg/pull/27333))
-- Add block toolbar component readme. ([25245](https://github.com/WordPress/gutenberg/pull/25245))
-- Add block patterns list component readme. ([24983](https://github.com/WordPress/gutenberg/pull/24983))
-- [Contributors docs] JS meetings were shifted to 15:00GMT. ([27047](https://github.com/WordPress/gutenberg/pull/27047))
-- Typos and tweaks: ([27120](https://github.com/WordPress/gutenberg/pull/27120), [27081](https://github.com/WordPress/gutenberg/pull/27081), [27062](https://github.com/WordPress/gutenberg/pull/27062), [27060](https://github.com/WordPress/gutenberg/pull/27060), [27039](https://github.com/WordPress/gutenberg/pull/27039), [27153](https://github.com/WordPress/gutenberg/pull/27153))
+-   Expand on the Deprecations documentation. ([27286](https://github.com/WordPress/gutenberg/pull/27286))
+-   Publish MainDashboardButton documentation to handbook. ([27317](https://github.com/WordPress/gutenberg/pull/27317))
+-   Update: Creating a block-based theme tutorial. ([27257](https://github.com/WordPress/gutenberg/pull/27257))
+-   ESLint Plugin: Include a note about the minimum version required. ([27203](https://github.com/WordPress/gutenberg/pull/27203))
+-   Docs: Update `@wordpress/data` README with API changes. ([27180](https://github.com/WordPress/gutenberg/pull/27180))
+-   Data: Improve documentation for new API added around stores. ([27061](https://github.com/WordPress/gutenberg/pull/27061))
+-   wp-env: Improve documentation for "run" command. ([27053](https://github.com/WordPress/gutenberg/pull/27053))
+-   Code block: Update the documentation. ([27333](https://github.com/WordPress/gutenberg/pull/27333))
+-   Add block toolbar component readme. ([25245](https://github.com/WordPress/gutenberg/pull/25245))
+-   Add block patterns list component readme. ([24983](https://github.com/WordPress/gutenberg/pull/24983))
+-   [Contributors docs] JS meetings were shifted to 15:00GMT. ([27047](https://github.com/WordPress/gutenberg/pull/27047))
+-   Typos and tweaks: ([27120](https://github.com/WordPress/gutenberg/pull/27120), [27081](https://github.com/WordPress/gutenberg/pull/27081), [27062](https://github.com/WordPress/gutenberg/pull/27062), [27060](https://github.com/WordPress/gutenberg/pull/27060), [27039](https://github.com/WordPress/gutenberg/pull/27039), [27153](https://github.com/WordPress/gutenberg/pull/27153))
 
 ### Code Quality
-- Replace store name string with exposed store definition:
-   - Edit Navigation ([27182](https://github.com/WordPress/gutenberg/pull/27182), [27281](https://github.com/WordPress/gutenberg/pull/27281))
-   - Blocks ([27336](https://github.com/WordPress/gutenberg/pull/27336))
-   - Reusable Blocks ([27094](https://github.com/WordPress/gutenberg/pull/27094))
-   - Block Directory ([27178](https://github.com/WordPress/gutenberg/pull/27178))
-   - Keyboard Shortcuts ([27355](https://github.com/WordPress/gutenberg/pull/27355))
-- Search block: Remove invalid prop which was causing a React warning. ([27306](https://github.com/WordPress/gutenberg/pull/27306))
-- Refactor click redirect to avoid trailing div. ([27253](https://github.com/WordPress/gutenberg/pull/27253))
-
-- Editor styles: Convert to hook. ([27080](https://github.com/WordPress/gutenberg/pull/27080))
-- Add: PHP util function equivalent to lodash set. ([27077](https://github.com/WordPress/gutenberg/pull/27077))
-- Interface: Remove regions wrapper div. ([27066](https://github.com/WordPress/gutenberg/pull/27066))
-- Refactor typing observer. ([27043](https://github.com/WordPress/gutenberg/pull/27043))
-- Visual editor: Remove 4 wrapper divs. ([27035](https://github.com/WordPress/gutenberg/pull/27035))
-- Insertion point: Avoid wrapper div. ([26994](https://github.com/WordPress/gutenberg/pull/26994))
-- Typewriter: Rewrite with hooks. ([26986](https://github.com/WordPress/gutenberg/pull/26986))
-- Deprecate the withGlobalEvents HoC. ([26749](https://github.com/WordPress/gutenberg/pull/26749))
-- Edit Post: Refactor effects to action generators. ([27069](https://github.com/WordPress/gutenberg/pull/27069))
+
+-   Replace store name string with exposed store definition:
+    -   Edit Navigation ([27182](https://github.com/WordPress/gutenberg/pull/27182), [27281](https://github.com/WordPress/gutenberg/pull/27281))
+    -   Blocks ([27336](https://github.com/WordPress/gutenberg/pull/27336))
+    -   Reusable Blocks ([27094](https://github.com/WordPress/gutenberg/pull/27094))
+    -   Block Directory ([27178](https://github.com/WordPress/gutenberg/pull/27178))
+    -   Keyboard Shortcuts ([27355](https://github.com/WordPress/gutenberg/pull/27355))
+-   Search block: Remove invalid prop which was causing a React warning. ([27306](https://github.com/WordPress/gutenberg/pull/27306))
+-   Refactor click redirect to avoid trailing div. ([27253](https://github.com/WordPress/gutenberg/pull/27253))
+
+-   Editor styles: Convert to hook. ([27080](https://github.com/WordPress/gutenberg/pull/27080))
+-   Add: PHP util function equivalent to lodash set. ([27077](https://github.com/WordPress/gutenberg/pull/27077))
+-   Interface: Remove regions wrapper div. ([27066](https://github.com/WordPress/gutenberg/pull/27066))
+-   Refactor typing observer. ([27043](https://github.com/WordPress/gutenberg/pull/27043))
+-   Visual editor: Remove 4 wrapper divs. ([27035](https://github.com/WordPress/gutenberg/pull/27035))
+-   Insertion point: Avoid wrapper div. ([26994](https://github.com/WordPress/gutenberg/pull/26994))
+-   Typewriter: Rewrite with hooks. ([26986](https://github.com/WordPress/gutenberg/pull/26986))
+-   Deprecate the withGlobalEvents HoC. ([26749](https://github.com/WordPress/gutenberg/pull/26749))
+-   Edit Post: Refactor effects to action generators. ([27069](https://github.com/WordPress/gutenberg/pull/27069))
 
 ### Build Tooling
 
-- Add eslint rule to prohibit unsafe APIs. ([27301](https://github.com/WordPress/gutenberg/pull/27301))
-- Update package lock to fix CI failures. ([27098](https://github.com/WordPress/gutenberg/pull/27098), [27102](https://github.com/WordPress/gutenberg/pull/27102))
-- GitHub Actions: Build Plugin zip, store as artifact on every PR. ([26746](https://github.com/WordPress/gutenberg/pull/26746))
-- Scripts: Unpin ignore-emit-webpack-plugin dependency. ([26739](https://github.com/WordPress/gutenberg/pull/26739))
-- Adds Support to wp-env for setting the PHP version. ([25268](https://github.com/WordPress/gutenberg/pull/25268))
-- Configure phpunit-watcher to improve devex. ([27058](https://github.com/WordPress/gutenberg/pull/27058))
-- Run phpunit even when phpcs fails. ([27024](https://github.com/WordPress/gutenberg/pull/27024))
-- Scripts: Auto format TypeScript files with format-js. ([27138](https://github.com/WordPress/gutenberg/pull/27138))
-- End 2 End Tests:
-  - Fix randomly failing end-to-end test. ([27358](https://github.com/WordPress/gutenberg/pull/27358))
-  - Fix multi entity editing test. ([27347](https://github.com/WordPress/gutenberg/pull/27347))
-  - Add end-to-end tests for image editing tools. ([27262](https://github.com/WordPress/gutenberg/pull/27262))
+-   Add eslint rule to prohibit unsafe APIs. ([27301](https://github.com/WordPress/gutenberg/pull/27301))
+-   Update package lock to fix CI failures. ([27098](https://github.com/WordPress/gutenberg/pull/27098), [27102](https://github.com/WordPress/gutenberg/pull/27102))
+-   GitHub Actions: Build Plugin zip, store as artifact on every PR. ([26746](https://github.com/WordPress/gutenberg/pull/26746))
+-   Scripts: Unpin ignore-emit-webpack-plugin dependency. ([26739](https://github.com/WordPress/gutenberg/pull/26739))
+-   Adds Support to wp-env for setting the PHP version. ([25268](https://github.com/WordPress/gutenberg/pull/25268))
+-   Configure phpunit-watcher to improve devex. ([27058](https://github.com/WordPress/gutenberg/pull/27058))
+-   Run phpunit even when phpcs fails. ([27024](https://github.com/WordPress/gutenberg/pull/27024))
+-   Scripts: Auto format TypeScript files with format-js. ([27138](https://github.com/WordPress/gutenberg/pull/27138))
+-   End 2 End Tests:
+    -   Fix randomly failing end-to-end test. ([27358](https://github.com/WordPress/gutenberg/pull/27358))
+    -   Fix multi entity editing test. ([27347](https://github.com/WordPress/gutenberg/pull/27347))
+    -   Add end-to-end tests for image editing tools. ([27262](https://github.com/WordPress/gutenberg/pull/27262))
 
 ### Various
 
-- Simplify CSS for the code block. ([27314](https://github.com/WordPress/gutenberg/pull/27314))
-- Update the block variation widths in the block placeholder. ([27255](https://github.com/WordPress/gutenberg/pull/27255))
-- Don’t split translatable strings in block templates. ([27361](https://github.com/WordPress/gutenberg/pull/27361))
-- Reduce margin on placeholder for media. ([27252](https://github.com/WordPress/gutenberg/pull/27252))
-- Interface package: Move MainDashboardButton slot. ([27213](https://github.com/WordPress/gutenberg/pull/27213))
-- Decrease scrim when in a modal overlay. ([27054](https://github.com/WordPress/gutenberg/pull/27054))
-- Replace 'Remove from Reusable blocks' with 'Manage Reusable blocks'. ([27026](https://github.com/WordPress/gutenberg/pull/27026))
-- Mark AWAIT_PROMISE as unstable API. ([26852](https://github.com/WordPress/gutenberg/pull/26852))
-- Block Support: Separate opt in for font style and weight options. ([26844](https://github.com/WordPress/gutenberg/pull/26844))
-- Latest Posts: Don't use `target="_blank"`. ([25730](https://github.com/WordPress/gutenberg/pull/25730))
-
+-   Simplify CSS for the code block. ([27314](https://github.com/WordPress/gutenberg/pull/27314))
+-   Update the block variation widths in the block placeholder. ([27255](https://github.com/WordPress/gutenberg/pull/27255))
+-   Don’t split translatable strings in block templates. ([27361](https://github.com/WordPress/gutenberg/pull/27361))
+-   Reduce margin on placeholder for media. ([27252](https://github.com/WordPress/gutenberg/pull/27252))
+-   Interface package: Move MainDashboardButton slot. ([27213](https://github.com/WordPress/gutenberg/pull/27213))
+-   Decrease scrim when in a modal overlay. ([27054](https://github.com/WordPress/gutenberg/pull/27054))
+-   Replace 'Remove from Reusable blocks' with 'Manage Reusable blocks'. ([27026](https://github.com/WordPress/gutenberg/pull/27026))
+-   Mark AWAIT_PROMISE as unstable API. ([26852](https://github.com/WordPress/gutenberg/pull/26852))
+-   Block Support: Separate opt in for font style and weight options. ([26844](https://github.com/WordPress/gutenberg/pull/26844))
+-   Latest Posts: Don't use `target="_blank"`. ([25730](https://github.com/WordPress/gutenberg/pull/25730))
 
 = 9.4.1 =
 
-
-
 = 9.4.0 =
 
+## Changelog
+
 ### Features
 
-- Add Keyboard Input inline format. ([26801](https://github.com/WordPress/gutenberg/pull/26801))
-- Add Block variations transformations. ([26687](https://github.com/WordPress/gutenberg/pull/26687))
-- Add width selector for button block. ([25999](https://github.com/WordPress/gutenberg/pull/25999)) ([26781](https://github.com/WordPress/gutenberg/pull/26781)).
-- Add font size support to the List block. ([26257](https://github.com/WordPress/gutenberg/pull/26257))
-- Social Links: Add ability to change social icon sizes. ([25921](https://github.com/WordPress/gutenberg/pull/25921))
+-   Add Keyboard Input inline format. ([26801](https://github.com/WordPress/gutenberg/pull/26801))
+-   Add Block variations transformations. ([26687](https://github.com/WordPress/gutenberg/pull/26687))
+-   Add width selector for button block. ([25999](https://github.com/WordPress/gutenberg/pull/25999)) ([26781](https://github.com/WordPress/gutenberg/pull/26781)).
+-   Add font size support to the List block. ([26257](https://github.com/WordPress/gutenberg/pull/26257))
+-   Social Links: Add ability to change social icon sizes. ([25921](https://github.com/WordPress/gutenberg/pull/25921))
 
 ### Enhancements
 
-- Unify the inserter search UI. ([26595](https://github.com/WordPress/gutenberg/pull/26595))
-- Polish custom select menu styles. ([26956](https://github.com/WordPress/gutenberg/pull/26956))
-- Polish menu item styles. ([26889](https://github.com/WordPress/gutenberg/pull/26889)) ([26720](https://github.com/WordPress/gutenberg/pull/26720)) ([25218](https://github.com/WordPress/gutenberg/pull/25218)) ([26572](https://github.com/WordPress/gutenberg/pull/26572))
-- Polish the link interface. ([26551](https://github.com/WordPress/gutenberg/pull/26551))
-- Code & Preformatted Blocks: Delete on backspace if empty. ([26605](https://github.com/WordPress/gutenberg/pull/26605))
-- File Block: Move the URL button to the Block toolbar. ([26602](https://github.com/WordPress/gutenberg/pull/26602))
-- Allow adding a header by typing /h1, /h2 etc. ([26597](https://github.com/WordPress/gutenberg/pull/26597))
-- Polish Shortcode block styling. ([26456](https://github.com/WordPress/gutenberg/pull/26456))
-- Polish Search block styling. ([26446](https://github.com/WordPress/gutenberg/pull/26446))
-- Use a wider canvas for themes that don't provide a custom width. ([26357](https://github.com/WordPress/gutenberg/pull/26357))
-- Show reduced UI on hover. ([26882](https://github.com/WordPress/gutenberg/pull/26882))
-- Update Legacy Widget toolbar button font to match UI when displayed in Widget Screen. ([26841](https://github.com/WordPress/gutenberg/pull/26841))
-- Update token field icon. ([26726](https://github.com/WordPress/gutenberg/pull/26726))
-- Windows 10 high contrast mode improvements. ([26567](https://github.com/WordPress/gutenberg/pull/26567))
+-   Unify the inserter search UI. ([26595](https://github.com/WordPress/gutenberg/pull/26595))
+-   Polish custom select menu styles. ([26956](https://github.com/WordPress/gutenberg/pull/26956))
+-   Polish menu item styles. ([26889](https://github.com/WordPress/gutenberg/pull/26889)) ([26720](https://github.com/WordPress/gutenberg/pull/26720)) ([25218](https://github.com/WordPress/gutenberg/pull/25218)) ([26572](https://github.com/WordPress/gutenberg/pull/26572))
+-   Polish the link interface. ([26551](https://github.com/WordPress/gutenberg/pull/26551))
+-   Code & Preformatted Blocks: Delete on backspace if empty. ([26605](https://github.com/WordPress/gutenberg/pull/26605))
+-   File Block: Move the URL button to the Block toolbar. ([26602](https://github.com/WordPress/gutenberg/pull/26602))
+-   Allow adding a header by typing /h1, /h2 etc. ([26597](https://github.com/WordPress/gutenberg/pull/26597))
+-   Polish Shortcode block styling. ([26456](https://github.com/WordPress/gutenberg/pull/26456))
+-   Polish Search block styling. ([26446](https://github.com/WordPress/gutenberg/pull/26446))
+-   Use a wider canvas for themes that don't provide a custom width. ([26357](https://github.com/WordPress/gutenberg/pull/26357))
+-   Show reduced UI on hover. ([26882](https://github.com/WordPress/gutenberg/pull/26882))
+-   Update Legacy Widget toolbar button font to match UI when displayed in Widget Screen. ([26841](https://github.com/WordPress/gutenberg/pull/26841))
+-   Update token field icon. ([26726](https://github.com/WordPress/gutenberg/pull/26726))
+-   Windows 10 high contrast mode improvements. ([26567](https://github.com/WordPress/gutenberg/pull/26567))
 
 ### New APIs
 
-- Create block: Add support for external templates installed from npm. ([23712](https://github.com/WordPress/gutenberg/pull/23712))
-- Add optional icon to snackbar notices. ([26907](https://github.com/WordPress/gutenberg/pull/26907))
-- @wordpress/env: Add support for custom WP_HOME port. ([26507](https://github.com/WordPress/gutenberg/pull/26507))
-- @wordpress/lazy-import: Allow importing local paths. ([23751](https://github.com/WordPress/gutenberg/pull/23751))
-- Format library: Introduce useAnchorRef. ([26782](https://github.com/WordPress/gutenberg/pull/26782))
-
-### Bug Fixes
-
-- Fix block context injection hook after Core change in block rendering. ([26998](https://github.com/WordPress/gutenberg/pull/26998)) ([27011](https://github.com/WordPress/gutenberg/pull/27011))
-- Fix Query block's Toolbar popover width. ([26992](https://github.com/WordPress/gutenberg/pull/26992))
-- Fix IE11 interface bugs. ([26944](https://github.com/WordPress/gutenberg/pull/26944))
-- Improve arrow navigation between blocks. ([26921](https://github.com/WordPress/gutenberg/pull/26921))
-- Fix block alignments when theme styles are disabled. ([26912](https://github.com/WordPress/gutenberg/pull/26912)) ([26680](https://github.com/WordPress/gutenberg/pull/26680)) ([26376](https://github.com/WordPress/gutenberg/pull/26376))
-- Fix padding of text-only buttons mode. ([26769](https://github.com/WordPress/gutenberg/pull/26769))
-- Fix horizontal mover icon position. ([26761](https://github.com/WordPress/gutenberg/pull/26761))
-- Fix column width units. ([26757](https://github.com/WordPress/gutenberg/pull/26757))
-- FormTokenField input position when typing. ([26741](https://github.com/WordPress/gutenberg/pull/26741))
-- Fix applying colors to outlined buttons. ([26707](https://github.com/WordPress/gutenberg/pull/26707)) ([24626](https://github.com/WordPress/gutenberg/pull/24626))
-- Render big font sizes properly in the font size picker. ([26705](https://github.com/WordPress/gutenberg/pull/26705))
-- Use currentColor in quote blocks to better support dark themes. ([26684](https://github.com/WordPress/gutenberg/pull/26684))
-- Fix "Browse All" in Quick Inserter for container blocks. ([26443](https://github.com/WordPress/gutenberg/pull/26443))
-- Fix responsive embeds in the widget screen. ([26263](https://github.com/WordPress/gutenberg/pull/26263))
-- Fix undefined index notice in Social Link Block. ([25663](https://github.com/WordPress/gutenberg/pull/25663))
-- Buttons block: Fix default alignment icon in toolbar to reflect the actual default alignment of buttons. ([26910](https://github.com/WordPress/gutenberg/pull/26910))
-- Block Support: Fix font size style when applying block support. ([26762](https://github.com/WordPress/gutenberg/pull/26762))
-- Do not invalidate the entity record cache during optimistic update in saveEntityRecord. ([26627](https://github.com/WordPress/gutenberg/pull/26627))
-- Provide a minimum of code wrapping for the code block. ([26623](https://github.com/WordPress/gutenberg/pull/26623))
+-   Create block: Add support for external templates installed from npm. ([23712](https://github.com/WordPress/gutenberg/pull/23712))
+-   Add optional icon to snackbar notices. ([26907](https://github.com/WordPress/gutenberg/pull/26907))
+-   @wordpress/env: Add support for custom WP_HOME port. ([26507](https://github.com/WordPress/gutenberg/pull/26507))
+-   @wordpress/lazy-import: Allow importing local paths. ([23751](https://github.com/WordPress/gutenberg/pull/23751))
+-   Format library: Introduce useAnchorRef. ([26782](https://github.com/WordPress/gutenberg/pull/26782))
 
-### Experiments
+### Bug Fixes
 
-- Full Site Editing Framework: Rework templates and template parts synchronization. ([26650](https://github.com/WordPress/gutenberg/pull/26650)) ([26383](https://github.com/WordPress/gutenberg/pull/26383))
-- Full Site Editing Blocks:
-  - Post Excerpt block: Allow editing of generated excerpts. ([26637](https://github.com/WordPress/gutenberg/pull/26637))
-  - Post Excerpt block: Add missing closing div tag. ([26806](https://github.com/WordPress/gutenberg/pull/26806))
-  - Add wide and full alignment options to the post/site title blocks. ([26601](https://github.com/WordPress/gutenberg/pull/26601))
-  - Template Part block: Render preview as div. ([26873](https://github.com/WordPress/gutenberg/pull/26873))
-  - Post Taxonomies: Fix PHP Fatal erroor for unregistered taxonomy (#26851). ([26854](https://github.com/WordPress/gutenberg/pull/26854))
-  - PostAuthor: Safeguard to wait for authors to load. ([26776](https://github.com/WordPress/gutenberg/pull/26776))
-  - Query block: Update the order of settings and filters in the sidebar. ([26647](https://github.com/WordPress/gutenberg/pull/26647))
-- Site Editor:
-  - Fix responsiveness. ([26021](https://github.com/WordPress/gutenberg/pull/26021))
-  - Fix alignment of the new template button. ([26934](https://github.com/WordPress/gutenberg/pull/26934))
-  - Add default block widths styles. ([26853](https://github.com/WordPress/gutenberg/pull/26853))
-  - Refactor menu creation code. ([26966](https://github.com/WordPress/gutenberg/pull/26966))
-  - Only show auto-draft template parts corresponding to current theme. ([26948](https://github.com/WordPress/gutenberg/pull/26948))
-  - Polish the template navigation menu. ([26933](https://github.com/WordPress/gutenberg/pull/26933)), ([26930](https://github.com/WordPress/gutenberg/pull/26930)).
-  - Add navigation panel back button slot. ([26846](https://github.com/WordPress/gutenberg/pull/26846))
-  - Remove dashboard button focus on mount. ([26845](https://github.com/WordPress/gutenberg/pull/26845))
-  - Saving flow: Use template and template parts entities titles. ([26708](https://github.com/WordPress/gutenberg/pull/26708)) ([26653](https://github.com/WordPress/gutenberg/pull/26653))
-  - Reorder template creation dropdown. ([26610](https://github.com/WordPress/gutenberg/pull/26610))
-- Global styles:
-  - Fallback to theme color pallete. ([26783](https://github.com/WordPress/gutenberg/pull/26783)) ([26786](https://github.com/WordPress/gutenberg/pull/26786))
-  - Hide Block panels without content. ([26609](https://github.com/WordPress/gutenberg/pull/26609))
-  - Update styles to rely on CSS variables for colors and gradients. ([26319](https://github.com/WordPress/gutenberg/pull/26319))
-  - Fix Table block global styles selector. ([26973](https://github.com/WordPress/gutenberg/pull/26973))
-  - Hide the line height panel if disabled in theme.json file. ([26778](https://github.com/WordPress/gutenberg/pull/26778))
-  - Cache generated styles. ([25680](https://github.com/WordPress/gutenberg/pull/25680))
-  - Add: Mechanism to detect if a block instance matches a global styles selector. ([26945](https://github.com/WordPress/gutenberg/pull/26945)) ([26991](https://github.com/WordPress/gutenberg/pull/26991))
-  - Extract theme json processor. ([26803](https://github.com/WordPress/gutenberg/pull/26803))
-  - Add support for line height at the global level. ([26767](https://github.com/WordPress/gutenberg/pull/26767))
-  - Add preset classes generation on the client side. ([26224](https://github.com/WordPress/gutenberg/pull/26224))
-- Navigation block: Fix color support declaration. ([26928](https://github.com/WordPress/gutenberg/pull/26928))
-- Popover: Add sticky boundary element prop. ([26728](https://github.com/WordPress/gutenberg/pull/26728))
-- Block Support:
-  - Add font style and weight options with combined UI. ([26444](https://github.com/WordPress/gutenberg/pull/26444)) ([26868](https://github.com/WordPress/gutenberg/pull/26868))
-  - Add text transform block support flag. ([26060](https://github.com/WordPress/gutenberg/pull/26060)) ([26059](https://github.com/WordPress/gutenberg/pull/26059))
-  - Add: Font Family picking mechanism. ([24868](https://github.com/WordPress/gutenberg/pull/24868)), ([26750](https://github.com/WordPress/gutenberg/pull/26750)), ([26759](https://github.com/WordPress/gutenberg/pull/26759)).
+-   Fix block context injection hook after Core change in block rendering. ([26998](https://github.com/WordPress/gutenberg/pull/26998)) ([27011](https://github.com/WordPress/gutenberg/pull/27011))
+-   Fix Query block's Toolbar popover width. ([26992](https://github.com/WordPress/gutenberg/pull/26992))
+-   Fix IE11 interface bugs. ([26944](https://github.com/WordPress/gutenberg/pull/26944))
+-   Improve arrow navigation between blocks. ([26921](https://github.com/WordPress/gutenberg/pull/26921))
+-   Fix block alignments when theme styles are disabled. ([26912](https://github.com/WordPress/gutenberg/pull/26912)) ([26680](https://github.com/WordPress/gutenberg/pull/26680)) ([26376](https://github.com/WordPress/gutenberg/pull/26376))
+-   Fix padding of text-only buttons mode. ([26769](https://github.com/WordPress/gutenberg/pull/26769))
+-   Fix horizontal mover icon position. ([26761](https://github.com/WordPress/gutenberg/pull/26761))
+-   Fix column width units. ([26757](https://github.com/WordPress/gutenberg/pull/26757))
+-   FormTokenField input position when typing. ([26741](https://github.com/WordPress/gutenberg/pull/26741))
+-   Fix applying colors to outlined buttons. ([26707](https://github.com/WordPress/gutenberg/pull/26707)) ([24626](https://github.com/WordPress/gutenberg/pull/24626))
+-   Render big font sizes properly in the font size picker. ([26705](https://github.com/WordPress/gutenberg/pull/26705))
+-   Use currentColor in quote blocks to better support dark themes. ([26684](https://github.com/WordPress/gutenberg/pull/26684))
+-   Fix "Browse All" in Quick Inserter for container blocks. ([26443](https://github.com/WordPress/gutenberg/pull/26443))
+-   Fix responsive embeds in the widget screen. ([26263](https://github.com/WordPress/gutenberg/pull/26263))
+-   Fix undefined index notice in Social Link Block. ([25663](https://github.com/WordPress/gutenberg/pull/25663))
+-   Buttons block: Fix default alignment icon in toolbar to reflect the actual default alignment of buttons. ([26910](https://github.com/WordPress/gutenberg/pull/26910))
+-   Block Support: Fix font size style when applying block support. ([26762](https://github.com/WordPress/gutenberg/pull/26762))
+-   Do not invalidate the entity record cache during optimistic update in saveEntityRecord. ([26627](https://github.com/WordPress/gutenberg/pull/26627))
+-   Provide a minimum of code wrapping for the code block. ([26623](https://github.com/WordPress/gutenberg/pull/26623))
 
+### Experiments
+
+-   Full Site Editing Framework: Rework templates and template parts synchronization. ([26650](https://github.com/WordPress/gutenberg/pull/26650)) ([26383](https://github.com/WordPress/gutenberg/pull/26383))
+-   Full Site Editing Blocks:
+    -   Post Excerpt block: Allow editing of generated excerpts. ([26637](https://github.com/WordPress/gutenberg/pull/26637))
+    -   Post Excerpt block: Add missing closing div tag. ([26806](https://github.com/WordPress/gutenberg/pull/26806))
+    -   Add wide and full alignment options to the post/site title blocks. ([26601](https://github.com/WordPress/gutenberg/pull/26601))
+    -   Template Part block: Render preview as div. ([26873](https://github.com/WordPress/gutenberg/pull/26873))
+    -   Post Taxonomies: Fix PHP Fatal erroor for unregistered taxonomy (#26851). ([26854](https://github.com/WordPress/gutenberg/pull/26854))
+    -   PostAuthor: Safeguard to wait for authors to load. ([26776](https://github.com/WordPress/gutenberg/pull/26776))
+    -   Query block: Update the order of settings and filters in the sidebar. ([26647](https://github.com/WordPress/gutenberg/pull/26647))
+-   Site Editor:
+    -   Fix responsiveness. ([26021](https://github.com/WordPress/gutenberg/pull/26021))
+    -   Fix alignment of the new template button. ([26934](https://github.com/WordPress/gutenberg/pull/26934))
+    -   Add default block widths styles. ([26853](https://github.com/WordPress/gutenberg/pull/26853))
+    -   Refactor menu creation code. ([26966](https://github.com/WordPress/gutenberg/pull/26966))
+    -   Only show auto-draft template parts corresponding to current theme. ([26948](https://github.com/WordPress/gutenberg/pull/26948))
+    -   Polish the template navigation menu. ([26933](https://github.com/WordPress/gutenberg/pull/26933)), ([26930](https://github.com/WordPress/gutenberg/pull/26930)).
+    -   Add navigation panel back button slot. ([26846](https://github.com/WordPress/gutenberg/pull/26846))
+    -   Remove dashboard button focus on mount. ([26845](https://github.com/WordPress/gutenberg/pull/26845))
+    -   Saving flow: Use template and template parts entities titles. ([26708](https://github.com/WordPress/gutenberg/pull/26708)) ([26653](https://github.com/WordPress/gutenberg/pull/26653))
+    -   Reorder template creation dropdown. ([26610](https://github.com/WordPress/gutenberg/pull/26610))
+-   Global styles:
+    -   Fallback to theme color pallete. ([26783](https://github.com/WordPress/gutenberg/pull/26783)) ([26786](https://github.com/WordPress/gutenberg/pull/26786))
+    -   Hide Block panels without content. ([26609](https://github.com/WordPress/gutenberg/pull/26609))
+    -   Update styles to rely on CSS variables for colors and gradients. ([26319](https://github.com/WordPress/gutenberg/pull/26319))
+    -   Fix Table block global styles selector. ([26973](https://github.com/WordPress/gutenberg/pull/26973))
+    -   Hide the line height panel if disabled in theme.json file. ([26778](https://github.com/WordPress/gutenberg/pull/26778))
+    -   Cache generated styles. ([25680](https://github.com/WordPress/gutenberg/pull/25680))
+    -   Add: Mechanism to detect if a block instance matches a global styles selector. ([26945](https://github.com/WordPress/gutenberg/pull/26945)) ([26991](https://github.com/WordPress/gutenberg/pull/26991))
+    -   Extract theme json processor. ([26803](https://github.com/WordPress/gutenberg/pull/26803))
+    -   Add support for line height at the global level. ([26767](https://github.com/WordPress/gutenberg/pull/26767))
+    -   Add preset classes generation on the client side. ([26224](https://github.com/WordPress/gutenberg/pull/26224))
+-   Navigation block: Fix color support declaration. ([26928](https://github.com/WordPress/gutenberg/pull/26928))
+-   Popover: Add sticky boundary element prop. ([26728](https://github.com/WordPress/gutenberg/pull/26728))
+-   Block Support:
+    -   Add font style and weight options with combined UI. ([26444](https://github.com/WordPress/gutenberg/pull/26444)) ([26868](https://github.com/WordPress/gutenberg/pull/26868))
+    -   Add text transform block support flag. ([26060](https://github.com/WordPress/gutenberg/pull/26060)) ([26059](https://github.com/WordPress/gutenberg/pull/26059))
+    -   Add: Font Family picking mechanism. ([24868](https://github.com/WordPress/gutenberg/pull/24868)), ([26750](https://github.com/WordPress/gutenberg/pull/26750)), ([26759](https://github.com/WordPress/gutenberg/pull/26759)).
 
 ### Performance
 
-- Use 2-pass terser compression. ([24821](https://github.com/WordPress/gutenberg/pull/24821))
-- Memoize getEntityRecords to prevent infinite re-renders. ([26447](https://github.com/WordPress/gutenberg/pull/26447))
-- Resolve per-entity resolvers after receiving a list of records. ([26575](https://github.com/WordPress/gutenberg/pull/26575))
+-   Use 2-pass terser compression. ([24821](https://github.com/WordPress/gutenberg/pull/24821))
+-   Memoize getEntityRecords to prevent infinite re-renders. ([26447](https://github.com/WordPress/gutenberg/pull/26447))
+-   Resolve per-entity resolvers after receiving a list of records. ([26575](https://github.com/WordPress/gutenberg/pull/26575))
 
 ### Documentation
 
-- Update theme.json documentation with new properties added. ([26891](https://github.com/WordPress/gutenberg/pull/26891))
-- Interface: Add deprecation logic for leftSidebar prop. ([26826](https://github.com/WordPress/gutenberg/pull/26826))
-- Document the block supports style properties. ([26771](https://github.com/WordPress/gutenberg/pull/26771)) ([26931](https://github.com/WordPress/gutenberg/pull/26931)) ([26859](https://github.com/WordPress/gutenberg/pull/26859))
-- Update testing documentation with info about React Testing Library. ([23015](https://github.com/WordPress/gutenberg/pull/23015))
-- Add documentation for AutosaveMonitor. ([26663](https://github.com/WordPress/gutenberg/pull/26663))
-- Typos and tweaks: ([26797](https://github.com/WordPress/gutenberg/pull/26797)), ([26796](https://github.com/WordPress/gutenberg/pull/26796)), ([26795](https://github.com/WordPress/gutenberg/pull/26795)), ([26794](https://github.com/WordPress/gutenberg/pull/26794)), ([26793](https://github.com/WordPress/gutenberg/pull/26793)), ([26792](https://github.com/WordPress/gutenberg/pull/26792)), ([26791](https://github.com/WordPress/gutenberg/pull/26791)), ([26790](https://github.com/WordPress/gutenberg/pull/26790)), ([21607](https://github.com/WordPress/gutenberg/pull/21607)), ([27017](https://github.com/WordPress/gutenberg/pull/27017)), ([26919](https://github.com/WordPress/gutenberg/pull/26919)), ([26863](https://github.com/WordPress/gutenberg/pull/26863)), ([26857](https://github.com/WordPress/gutenberg/pull/26857)), ([26618](https://github.com/WordPress/gutenberg/pull/26618)), ([26029](https://github.com/WordPress/gutenberg/pull/26029)), ([25349](https://github.com/WordPress/gutenberg/pull/25349)), ([17878](https://github.com/WordPress/gutenberg/pull/17878)), ([16090](https://github.com/WordPress/gutenberg/pull/16090)), ([26799](https://github.com/WordPress/gutenberg/pull/26799)), ([26765](https://github.com/WordPress/gutenberg/pull/26765)), ([26654](https://github.com/WordPress/gutenberg/pull/26654)).
+-   Update theme.json documentation with new properties added. ([26891](https://github.com/WordPress/gutenberg/pull/26891))
+-   Interface: Add deprecation logic for leftSidebar prop. ([26826](https://github.com/WordPress/gutenberg/pull/26826))
+-   Document the block supports style properties. ([26771](https://github.com/WordPress/gutenberg/pull/26771)) ([26931](https://github.com/WordPress/gutenberg/pull/26931)) ([26859](https://github.com/WordPress/gutenberg/pull/26859))
+-   Update testing documentation with info about React Testing Library. ([23015](https://github.com/WordPress/gutenberg/pull/23015))
+-   Add documentation for AutosaveMonitor. ([26663](https://github.com/WordPress/gutenberg/pull/26663))
+-   Typos and tweaks: ([26797](https://github.com/WordPress/gutenberg/pull/26797)), ([26796](https://github.com/WordPress/gutenberg/pull/26796)), ([26795](https://github.com/WordPress/gutenberg/pull/26795)), ([26794](https://github.com/WordPress/gutenberg/pull/26794)), ([26793](https://github.com/WordPress/gutenberg/pull/26793)), ([26792](https://github.com/WordPress/gutenberg/pull/26792)), ([26791](https://github.com/WordPress/gutenberg/pull/26791)), ([26790](https://github.com/WordPress/gutenberg/pull/26790)), ([21607](https://github.com/WordPress/gutenberg/pull/21607)), ([27017](https://github.com/WordPress/gutenberg/pull/27017)), ([26919](https://github.com/WordPress/gutenberg/pull/26919)), ([26863](https://github.com/WordPress/gutenberg/pull/26863)), ([26857](https://github.com/WordPress/gutenberg/pull/26857)), ([26618](https://github.com/WordPress/gutenberg/pull/26618)), ([26029](https://github.com/WordPress/gutenberg/pull/26029)), ([25349](https://github.com/WordPress/gutenberg/pull/25349)), ([17878](https://github.com/WordPress/gutenberg/pull/17878)), ([16090](https://github.com/WordPress/gutenberg/pull/16090)), ([26799](https://github.com/WordPress/gutenberg/pull/26799)), ([26765](https://github.com/WordPress/gutenberg/pull/26765)), ([26654](https://github.com/WordPress/gutenberg/pull/26654)).
 
 ### Code Quality
 
-- Use date-fns and date-fns-tz instead of moment. ([25782](https://github.com/WordPress/gutenberg/pull/25782)) ([27002](https://github.com/WordPress/gutenberg/pull/27002))
-- is-shallow-equal: Convert to ESM. ([26833](https://github.com/WordPress/gutenberg/pull/26833))
-- Minor code refactoring in template part previews. ([26949](https://github.com/WordPress/gutenberg/pull/26949))
-- Drop zone: Rewrite with hooks and simplify. ([26893](https://github.com/WordPress/gutenberg/pull/26893))
-- PostTitle: Rewrite with hooks (+ avoid globals). ([26820](https://github.com/WordPress/gutenberg/pull/26820))
-- Avoid relying on a the global document. ([26834](https://github.com/WordPress/gutenberg/pull/26834)) ([26814](https://github.com/WordPress/gutenberg/pull/26814)) ([26813](https://github.com/WordPress/gutenberg/pull/26813)) ([26657](https://github.com/WordPress/gutenberg/pull/26657))
-- Format library: Use hooks for all components. ([26779](https://github.com/WordPress/gutenberg/pull/26779))
-- Sandbox: Use hooks and avoid withGlobalEvents. ([26742](https://github.com/WordPress/gutenberg/pull/26742))
-- Draggable: Use hooks and prepare for iframe. ([26897](https://github.com/WordPress/gutenberg/pull/26897))
-- PostLockedModal: Use hooks and avoid withGlobalEvents. ([26743](https://github.com/WordPress/gutenberg/pull/26743))
-- WpEmbedPreview: Use hooks and avoid withGlobalEvents. ([26740](https://github.com/WordPress/gutenberg/pull/26740))
-- FocusableIframe: Use hooks and avoid withGlobalEvents. ([26737](https://github.com/WordPress/gutenberg/pull/26737))
-- Navigation Component: Update styles to reference grid spacing helper. ([26523](https://github.com/WordPress/gutenberg/pull/26523))
-- Hooks: Type package. ([26430](https://github.com/WordPress/gutenberg/pull/26430))
-- Deprecated: Type package. ([26429](https://github.com/WordPress/gutenberg/pull/26429))
-- Movers: Small positioning refactor. ([26353](https://github.com/WordPress/gutenberg/pull/26353))
-- Use useAnimate for all Animate component usage. ([26201](https://github.com/WordPress/gutenberg/pull/26201))
-- Gallery block: Use API v2. ([26145](https://github.com/WordPress/gutenberg/pull/26145))
-- Gallery: Remove obsolete deprecation entry. ([26736](https://github.com/WordPress/gutenberg/pull/26736))
-- Cleanup: ([24831](https://github.com/WordPress/gutenberg/pull/24831)), ([23598](https://github.com/WordPress/gutenberg/pull/23598)), ([27000](https://github.com/WordPress/gutenberg/pull/27000)).
-- Remove `useMemo` in Query inspector controls. ([26658](https://github.com/WordPress/gutenberg/pull/26658))
-
+-   Use date-fns and date-fns-tz instead of moment. ([25782](https://github.com/WordPress/gutenberg/pull/25782)) ([27002](https://github.com/WordPress/gutenberg/pull/27002))
+-   is-shallow-equal: Convert to ESM. ([26833](https://github.com/WordPress/gutenberg/pull/26833))
+-   Minor code refactoring in template part previews. ([26949](https://github.com/WordPress/gutenberg/pull/26949))
+-   Drop zone: Rewrite with hooks and simplify. ([26893](https://github.com/WordPress/gutenberg/pull/26893))
+-   PostTitle: Rewrite with hooks (+ avoid globals). ([26820](https://github.com/WordPress/gutenberg/pull/26820))
+-   Avoid relying on a the global document. ([26834](https://github.com/WordPress/gutenberg/pull/26834)) ([26814](https://github.com/WordPress/gutenberg/pull/26814)) ([26813](https://github.com/WordPress/gutenberg/pull/26813)) ([26657](https://github.com/WordPress/gutenberg/pull/26657))
+-   Format library: Use hooks for all components. ([26779](https://github.com/WordPress/gutenberg/pull/26779))
+-   Sandbox: Use hooks and avoid withGlobalEvents. ([26742](https://github.com/WordPress/gutenberg/pull/26742))
+-   Draggable: Use hooks and prepare for iframe. ([26897](https://github.com/WordPress/gutenberg/pull/26897))
+-   PostLockedModal: Use hooks and avoid withGlobalEvents. ([26743](https://github.com/WordPress/gutenberg/pull/26743))
+-   WpEmbedPreview: Use hooks and avoid withGlobalEvents. ([26740](https://github.com/WordPress/gutenberg/pull/26740))
+-   FocusableIframe: Use hooks and avoid withGlobalEvents. ([26737](https://github.com/WordPress/gutenberg/pull/26737))
+-   Navigation Component: Update styles to reference grid spacing helper. ([26523](https://github.com/WordPress/gutenberg/pull/26523))
+-   Hooks: Type package. ([26430](https://github.com/WordPress/gutenberg/pull/26430))
+-   Deprecated: Type package. ([26429](https://github.com/WordPress/gutenberg/pull/26429))
+-   Movers: Small positioning refactor. ([26353](https://github.com/WordPress/gutenberg/pull/26353))
+-   Use useAnimate for all Animate component usage. ([26201](https://github.com/WordPress/gutenberg/pull/26201))
+-   Gallery block: Use API v2. ([26145](https://github.com/WordPress/gutenberg/pull/26145))
+-   Gallery: Remove obsolete deprecation entry. ([26736](https://github.com/WordPress/gutenberg/pull/26736))
+-   Cleanup: ([24831](https://github.com/WordPress/gutenberg/pull/24831)), ([23598](https://github.com/WordPress/gutenberg/pull/23598)), ([27000](https://github.com/WordPress/gutenberg/pull/27000)).
+-   Remove `useMemo` in Query inspector controls. ([26658](https://github.com/WordPress/gutenberg/pull/26658))
 
 ### Build Tooling
 
-- Add eslint rule to warn against using globals for addEventListener. ([26810](https://github.com/WordPress/gutenberg/pull/26810))
-- Update workflows to use Node 14.x. ([26835](https://github.com/WordPress/gutenberg/pull/26835))
-- Add command to format PHP files. ([26850](https://github.com/WordPress/gutenberg/pull/26850))
--  Build Tooling: Rebuild stylesheets when imported styles are modified. ([26649](https://github.com/WordPress/gutenberg/pull/26649))
-- Fix GH actions "cancel" step. ([27025](https://github.com/WordPress/gutenberg/pull/27025))
-- Run assign fixed issues and first time contributor label tasks for PRs from forks. ([26876](https://github.com/WordPress/gutenberg/pull/26876))
-- Update .nvmrc to use latest LTS. ([26855](https://github.com/WordPress/gutenberg/pull/26855))
-- Update nodegit to 0.27.0 in @wordpress/env. ([26712](https://github.com/WordPress/gutenberg/pull/26712))
-- Tests: Add fixture for Column deprecation. ([26774](https://github.com/WordPress/gutenberg/pull/26774))
-- Store screenshots of CI end-to-end failures as CI artifacts. ([26664](https://github.com/WordPress/gutenberg/pull/26664)) ([26957](https://github.com/WordPress/gutenberg/pull/26957))
-- End 2 End Tests:
-  - Fix improper assertion in template-part.test. ([26709](https://github.com/WordPress/gutenberg/pull/26709))
-  - Fix RTL end-to-end tests. ([26508](https://github.com/WordPress/gutenberg/pull/26508))
-  - Add regresion end-to-end test for the empty reusable block causing WSODs issue. ([26913](https://github.com/WordPress/gutenberg/pull/26913))
-  - Add block drag and drop test. ([26869](https://github.com/WordPress/gutenberg/pull/26869)) ([26904](https://github.com/WordPress/gutenberg/pull/26904))
-  - Add Delete on backspace from empty code/preformatted blocks test. ([26972](https://github.com/WordPress/gutenberg/pull/26972))
-  - Merge end-to-end test relying on order into one. ([26883](https://github.com/WordPress/gutenberg/pull/26883))
-  - Add template part conversion end-to-end tests. ([26788](https://github.com/WordPress/gutenberg/pull/26788))
-  - Make the allowed blocks test more stable. ([26631](https://github.com/WordPress/gutenberg/pull/26631))
-  - Add end-to-end test utils to install and activate themes. ([23685](https://github.com/WordPress/gutenberg/pull/23685))
+-   Add eslint rule to warn against using globals for addEventListener. ([26810](https://github.com/WordPress/gutenberg/pull/26810))
+-   Update workflows to use Node 14.x. ([26835](https://github.com/WordPress/gutenberg/pull/26835))
+-   Add command to format PHP files. ([26850](https://github.com/WordPress/gutenberg/pull/26850))
+-   Build Tooling: Rebuild stylesheets when imported styles are modified. ([26649](https://github.com/WordPress/gutenberg/pull/26649))
+-   Fix GH actions "cancel" step. ([27025](https://github.com/WordPress/gutenberg/pull/27025))
+-   Run assign fixed issues and first-time contributor label tasks for PRs from forks. ([26876](https://github.com/WordPress/gutenberg/pull/26876))
+-   Update .nvmrc to use latest LTS. ([26855](https://github.com/WordPress/gutenberg/pull/26855))
+-   Update nodegit to 0.27.0 in @wordpress/env. ([26712](https://github.com/WordPress/gutenberg/pull/26712))
+-   Tests: Add fixture for Column deprecation. ([26774](https://github.com/WordPress/gutenberg/pull/26774))
+-   Store screenshots of CI end-to-end failures as CI artifacts. ([26664](https://github.com/WordPress/gutenberg/pull/26664)) ([26957](https://github.com/WordPress/gutenberg/pull/26957))
+-   End 2 End Tests:
+    -   Fix improper assertion in template-part.test. ([26709](https://github.com/WordPress/gutenberg/pull/26709))
+    -   Fix RTL end-to-end tests. ([26508](https://github.com/WordPress/gutenberg/pull/26508))
+    -   Add regresion end-to-end test for the empty reusable block causing WSODs issue. ([26913](https://github.com/WordPress/gutenberg/pull/26913))
+    -   Add block drag and drop test. ([26869](https://github.com/WordPress/gutenberg/pull/26869)) ([26904](https://github.com/WordPress/gutenberg/pull/26904))
+    -   Add Delete on backspace from empty code/preformatted blocks test. ([26972](https://github.com/WordPress/gutenberg/pull/26972))
+    -   Merge end-to-end test relying on order into one. ([26883](https://github.com/WordPress/gutenberg/pull/26883))
+    -   Add template part conversion end-to-end tests. ([26788](https://github.com/WordPress/gutenberg/pull/26788))
+    -   Make the allowed blocks test more stable. ([26631](https://github.com/WordPress/gutenberg/pull/26631))
+    -   Add end-to-end test utils to install and activate themes. ([23685](https://github.com/WordPress/gutenberg/pull/23685))
 
 ### Various
 
-- TextControl: Support forwarding refs. ([26209](https://github.com/WordPress/gutenberg/pull/26209))
-- Update gutenberg_is_fse_theme function to make it filterable. ([27021](https://github.com/WordPress/gutenberg/pull/27021))
-- Windows: Use wp-env instead of file location. ([26671](https://github.com/WordPress/gutenberg/pull/26671))
-- Site Editor: Rename left sidebar → secondary sidebar. ([26517](https://github.com/WordPress/gutenberg/pull/26517))
-- Add State locks for concurrency control to @wordpress/core-data. ([26389](https://github.com/WordPress/gutenberg/pull/26389)) ([26661](https://github.com/WordPress/gutenberg/pull/26661))
-- Avoid PHP warnings when Gutenberg plugin folder isn't writable. ([17671](https://github.com/WordPress/gutenberg/pull/17671))
-
-
+-   TextControl: Support forwarding refs. ([26209](https://github.com/WordPress/gutenberg/pull/26209))
+-   Update gutenberg_is_fse_theme function to make it filterable. ([27021](https://github.com/WordPress/gutenberg/pull/27021))
+-   Windows: Use wp-env instead of file location. ([26671](https://github.com/WordPress/gutenberg/pull/26671))
+-   Site Editor: Rename left sidebar → secondary sidebar. ([26517](https://github.com/WordPress/gutenberg/pull/26517))
+-   Add State locks for concurrency control to @wordpress/core-data. ([26389](https://github.com/WordPress/gutenberg/pull/26389)) ([26661](https://github.com/WordPress/gutenberg/pull/26661))
+-   Avoid PHP warnings when Gutenberg plugin folder isn't writable. ([17671](https://github.com/WordPress/gutenberg/pull/17671))
 
 = 9.3.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Support for aall units in Font Size presets. ([26475](https://github.com/WordPress/gutenberg/pula/26475))
-- Sort post formats alphabetically by translated name. ([26305](https://github.com/WordPress/gutenberg/pull/26305))
-- Ensure Alignment options are always rendered in the same order. ([26269](https://github.com/WordPress/gutenberg/pull/26269))
-- Buttons block: Overhaul alignment and justification controls. ([23168](https://github.com/WordPress/gutenberg/pull/23168))
-- a11y: Retain focus position when tabbing back to the block toolbar. ([25760](https://github.com/WordPress/gutenberg/pull/25760))
-- Dark mode UI enhancements. ([26483](https://github.com/WordPress/gutenberg/pull/26483)) ([26510](https://github.com/WordPress/gutenberg/pull/26510))
-- Social Links: Add Patreon, Telegram, and Tiktok icons. ([26118](https://github.com/WordPress/gutenberg/pull/26118))
-
-### Bug Fixes
-
-- Fix Visual regression on the color palette editor. ([26614](https://github.com/WordPress/gutenberg/pull/26614))
-- @wordpress/scripts: Fix error in ignore-emit-webpack-plugin. ([26591](https://github.com/WordPress/gutenberg/pull/26591))
-- Cover block: Restore default overlay background. ([26569](https://github.com/WordPress/gutenberg/pull/26569)) ([26625](https://github.com/WordPress/gutenberg/pull/26625))
-- i18n: Fix incorrectly pluralised strings. ([26565](https://github.com/WordPress/gutenberg/pull/26565))
-- Limit the editor interface to max-width 100%. ([26552](https://github.com/WordPress/gutenberg/pull/26552))
-- Ensure editor footer remains at the bottom of the screen when navigating regions. ([26533](https://github.com/WordPress/gutenberg/pull/26533))
-- URLInput: Use debounce() instead of throttle(). ([26529](https://github.com/WordPress/gutenberg/pull/26529))
-- Heading Block: Fix double alignment controls in toolbar. ([26492](https://github.com/WordPress/gutenberg/pull/26492))
-- Fix Block preview vertical offset. ([26487](https://github.com/WordPress/gutenberg/pull/26487))
-- Reusable Blocks: Make the number retrieved from the API unlimited. ([26486](https://github.com/WordPress/gutenberg/pull/26486))
-- Fix editor error when an empty reusable block exist. ([26484](https://github.com/WordPress/gutenberg/pull/26484))
-- Latest Posts: Add missing classname. ([26477](https://github.com/WordPress/gutenberg/pull/26477))
-- Fix single column block display for smaller screens. ([26438](https://github.com/WordPress/gutenberg/pull/26438))
-- Turn off autocomplete for ComboboxControl components. ([26427](https://github.com/WordPress/gutenberg/pull/26427))
-- Fix parent post selector initial value and search. ([26397](https://github.com/WordPress/gutenberg/pull/26397))
-- Fix gallery block undo issue. ([26377](https://github.com/WordPress/gutenberg/pull/26377))
-- Fix spellings in Getting Started guide. ([26310](https://github.com/WordPress/gutenberg/pull/26310))
-- Fix embed blocks rendering in widget areas. ([26307](https://github.com/WordPress/gutenberg/pull/26307))
-- Fix design of color/gradient controls. ([26255](https://github.com/WordPress/gutenberg/pull/26255))
-- Fix drop zone indicators for non blocks. ([25986](https://github.com/WordPress/gutenberg/pull/25986))
-- Fix left and right alignments for video embeds. ([24847](https://github.com/WordPress/gutenberg/pull/24847))
-- Next Page block: Center text properly. ([26515](https://github.com/WordPress/gutenberg/pull/26515))
+-   Support for aall units in Font Size presets. ([26475](https://github.com/WordPress/gutenberg/pula/26475))
+-   Sort post formats alphabetically by translated name. ([26305](https://github.com/WordPress/gutenberg/pull/26305))
+-   Ensure Alignment options are always rendered in the same order. ([26269](https://github.com/WordPress/gutenberg/pull/26269))
+-   Buttons block: Overhaul alignment and justification controls. ([23168](https://github.com/WordPress/gutenberg/pull/23168))
+-   a11y: Retain focus position when tabbing back to the block toolbar. ([25760](https://github.com/WordPress/gutenberg/pull/25760))
+-   Dark mode UI enhancements. ([26483](https://github.com/WordPress/gutenberg/pull/26483)) ([26510](https://github.com/WordPress/gutenberg/pull/26510))
+-   Social Links: Add Patreon, Telegram, and Tiktok icons. ([26118](https://github.com/WordPress/gutenberg/pull/26118))
+
+### Bug Fixes
+
+-   Fix Visual regression on the color palette editor. ([26614](https://github.com/WordPress/gutenberg/pull/26614))
+-   @wordpress/scripts: Fix error in ignore-emit-webpack-plugin. ([26591](https://github.com/WordPress/gutenberg/pull/26591))
+-   Cover block: Restore default overlay background. ([26569](https://github.com/WordPress/gutenberg/pull/26569)) ([26625](https://github.com/WordPress/gutenberg/pull/26625))
+-   i18n: Fix incorrectly pluralised strings. ([26565](https://github.com/WordPress/gutenberg/pull/26565))
+-   Limit the editor interface to max-width 100%. ([26552](https://github.com/WordPress/gutenberg/pull/26552))
+-   Ensure editor footer remains at the bottom of the screen when navigating regions. ([26533](https://github.com/WordPress/gutenberg/pull/26533))
+-   URLInput: Use debounce() instead of throttle(). ([26529](https://github.com/WordPress/gutenberg/pull/26529))
+-   Heading Block: Fix double alignment controls in toolbar. ([26492](https://github.com/WordPress/gutenberg/pull/26492))
+-   Fix Block preview vertical offset. ([26487](https://github.com/WordPress/gutenberg/pull/26487))
+-   Reusable Blocks: Make the number retrieved from the API unlimited. ([26486](https://github.com/WordPress/gutenberg/pull/26486))
+-   Fix editor error when an empty reusable block exist. ([26484](https://github.com/WordPress/gutenberg/pull/26484))
+-   Latest Posts: Add missing classname. ([26477](https://github.com/WordPress/gutenberg/pull/26477))
+-   Fix single column block display for smaller screens. ([26438](https://github.com/WordPress/gutenberg/pull/26438))
+-   Turn off autocomplete for ComboboxControl components. ([26427](https://github.com/WordPress/gutenberg/pull/26427))
+-   Fix parent post selector initial value and search. ([26397](https://github.com/WordPress/gutenberg/pull/26397))
+-   Fix gallery block undo issue. ([26377](https://github.com/WordPress/gutenberg/pull/26377))
+-   Fix spellings in Getting Started guide. ([26310](https://github.com/WordPress/gutenberg/pull/26310))
+-   Fix embed blocks rendering in widget areas. ([26307](https://github.com/WordPress/gutenberg/pull/26307))
+-   Fix design of color/gradient controls. ([26255](https://github.com/WordPress/gutenberg/pull/26255))
+-   Fix drop zone indicators for non blocks. ([25986](https://github.com/WordPress/gutenberg/pull/25986))
+-   Fix left and right alignments for video embeds. ([24847](https://github.com/WordPress/gutenberg/pull/24847))
+-   Next Page block: Center text properly. ([26515](https://github.com/WordPress/gutenberg/pull/26515))
 
 ### New APIs
 
-- Allow text buttons in DropdownMenu. ([26425](https://github.com/WordPress/gutenberg/pull/26425))
-- Support custom viewportWidth in block previews (example). ([26346](https://github.com/WordPress/gutenberg/pull/26346))
-- Change updateSelection property to false for InnerBlocks. ([26312](https://github.com/WordPress/gutenberg/pull/26312))
+-   Allow text buttons in DropdownMenu. ([26425](https://github.com/WordPress/gutenberg/pull/26425))
+-   Support custom viewportWidth in block previews (example). ([26346](https://github.com/WordPress/gutenberg/pull/26346))
+-   Change updateSelection property to false for InnerBlocks. ([26312](https://github.com/WordPress/gutenberg/pull/26312))
 
 ### Experiments
 
-- Full Site Editing :
-  - Disable customizer and widgets screens. ([26594](https://github.com/WordPress/gutenberg/pull/26594))
-  - Automatically enable FSE experiment. ([26500](https://github.com/WordPress/gutenberg/pull/26500))
-  - Remove the demo templates. ([26419](https://github.com/WordPress/gutenberg/pull/26419))
-  - Strip post ids from template part blocks on export. ([26268](https://github.com/WordPress/gutenberg/pull/26268))
-  - Allow themes to live in a sub directory. ([26391](https://github.com/WordPress/gutenberg/pull/26391))
-- Introduce the layout prop to InnerBlocks. ([26380](https://github.com/WordPress/gutenberg/pull/26380))
-- Site Editor
-  - Add Dropdown to Create Generic Templates. ([26284](https://github.com/WordPress/gutenberg/pull/26284))
-  - Prevent inserter overscroll. ([26432](https://github.com/WordPress/gutenberg/pull/26432)) ([26583](https://github.com/WordPress/gutenberg/pull/26583))
-  - Fix dirty template and template parts on template creation. ([26560](https://github.com/WordPress/gutenberg/pull/26560))
-  - Fix composite role warnings triggered by template part previews. ([26406](https://github.com/WordPress/gutenberg/pull/26406))
-  - Reduce the Amount of Data Passed Through the Components Tree. ([26463](https://github.com/WordPress/gutenberg/pull/26463))
-  - Add the option to convert a template part to regular blocks. ([26488](https://github.com/WordPress/gutenberg/pull/26488))
-  - Fix Invisible Template Previews in the Sidebar. ([26424](https://github.com/WordPress/gutenberg/pull/26424))
-  - Add convert to template part flow. ([20445](https://github.com/WordPress/gutenberg/pull/20445))
-  - Fix custom template part theme meta. ([26587](https://github.com/WordPress/gutenberg/pull/26587))
-- Query block:
-  - Add initial variations. ([26378](https://github.com/WordPress/gutenberg/pull/26378))
-  - Add sticky support. ([26279](https://github.com/WordPress/gutenberg/pull/26279))
-- Global Styles:
-  - Use block settings on the block panels. ([26218](https://github.com/WordPress/gutenberg/pull/26218))
-  - Fix: Font size picker regression on edit site global styles. ([26603](https://github.com/WordPress/gutenberg/pull/26603))
-  - Process settings only once. ([26330](https://github.com/WordPress/gutenberg/pull/26330))
-- Navigation Component:
-  - Add Support for RTL Languages. ([26334](https://github.com/WordPress/gutenberg/pull/26334))
-  - Styling revisions. ([26338](https://github.com/WordPress/gutenberg/pull/26338))
-  - Fix focus behavior when opening the panel. ([26296](https://github.com/WordPress/gutenberg/pull/26296))
-  - Fix height of Navigation panel and make it scrollable. ([26187](https://github.com/WordPress/gutenberg/pull/26187))
-  - Search Control in Menu Titles. ([25315](https://github.com/WordPress/gutenberg/pull/25315))
-- Use a DropdownMenu for menu selection in the navigation screen. ([25390](https://github.com/WordPress/gutenberg/pull/25390))
+-   Full Site Editing :
+    -   Disable customizer and widgets screens. ([26594](https://github.com/WordPress/gutenberg/pull/26594))
+    -   Automatically enable FSE experiment. ([26500](https://github.com/WordPress/gutenberg/pull/26500))
+    -   Remove the demo templates. ([26419](https://github.com/WordPress/gutenberg/pull/26419))
+    -   Strip post ids from template part blocks on export. ([26268](https://github.com/WordPress/gutenberg/pull/26268))
+    -   Allow themes to live in a sub directory. ([26391](https://github.com/WordPress/gutenberg/pull/26391))
+-   Introduce the layout prop to InnerBlocks. ([26380](https://github.com/WordPress/gutenberg/pull/26380))
+-   Site Editor
+    -   Add Dropdown to Create Generic Templates. ([26284](https://github.com/WordPress/gutenberg/pull/26284))
+    -   Prevent inserter overscroll. ([26432](https://github.com/WordPress/gutenberg/pull/26432)) ([26583](https://github.com/WordPress/gutenberg/pull/26583))
+    -   Fix dirty template and template parts on template creation. ([26560](https://github.com/WordPress/gutenberg/pull/26560))
+    -   Fix composite role warnings triggered by template part previews. ([26406](https://github.com/WordPress/gutenberg/pull/26406))
+    -   Reduce the Amount of Data Passed Through the Components Tree. ([26463](https://github.com/WordPress/gutenberg/pull/26463))
+    -   Add the option to convert a template part to regular blocks. ([26488](https://github.com/WordPress/gutenberg/pull/26488))
+    -   Fix Invisible Template Previews in the Sidebar. ([26424](https://github.com/WordPress/gutenberg/pull/26424))
+    -   Add convert to template part flow. ([20445](https://github.com/WordPress/gutenberg/pull/20445))
+    -   Fix custom template part theme meta. ([26587](https://github.com/WordPress/gutenberg/pull/26587))
+-   Query block:
+    -   Add initial variations. ([26378](https://github.com/WordPress/gutenberg/pull/26378))
+    -   Add sticky support. ([26279](https://github.com/WordPress/gutenberg/pull/26279))
+-   Global Styles:
+    -   Use block settings on the block panels. ([26218](https://github.com/WordPress/gutenberg/pull/26218))
+    -   Fix: Font size picker regression on edit site global styles. ([26603](https://github.com/WordPress/gutenberg/pull/26603))
+    -   Process settings only once. ([26330](https://github.com/WordPress/gutenberg/pull/26330))
+-   Navigation Component:
+    -   Add Support for RTL Languages. ([26334](https://github.com/WordPress/gutenberg/pull/26334))
+    -   Styling revisions. ([26338](https://github.com/WordPress/gutenberg/pull/26338))
+    -   Fix focus behavior when opening the panel. ([26296](https://github.com/WordPress/gutenberg/pull/26296))
+    -   Fix height of Navigation panel and make it scrollable. ([26187](https://github.com/WordPress/gutenberg/pull/26187))
+    -   Search Control in Menu Titles. ([25315](https://github.com/WordPress/gutenberg/pull/25315))
+-   Use a DropdownMenu for menu selection in the navigation screen. ([25390](https://github.com/WordPress/gutenberg/pull/25390))
 
 ### Documentation
 
-- Update glossary to include more block based terminology. ([26478](https://github.com/WordPress/gutenberg/pull/26478))
-- Update triage documentation for clarity around closing issues and labels. ([26480](https://github.com/WordPress/gutenberg/pull/26480))
-- Update WordPress versions document to include 5.6. ([26365](https://github.com/WordPress/gutenberg/pull/26365))
-- Typos and tweaks: ([26491](https://github.com/WordPress/gutenberg/pull/26491)), ([26553](https://github.com/WordPress/gutenberg/pull/26553)), ([26437](https://github.com/WordPress/gutenberg/pull/26437)), ([26400](https://github.com/WordPress/gutenberg/pull/26400)), ([26566](https://github.com/WordPress/gutenberg/pull/26566)).
-- Storybook: Fix broken BlockDraggable story. ([26457](https://github.com/WordPress/gutenberg/pull/26457)) ([26431](https://github.com/WordPress/gutenberg/pull/26431))
+-   Update glossary to include more block based terminology. ([26478](https://github.com/WordPress/gutenberg/pull/26478))
+-   Update triage documentation for clarity around closing issues and labels. ([26480](https://github.com/WordPress/gutenberg/pull/26480))
+-   Update WordPress versions document to include 5.6. ([26365](https://github.com/WordPress/gutenberg/pull/26365))
+-   Typos and tweaks: ([26491](https://github.com/WordPress/gutenberg/pull/26491)), ([26553](https://github.com/WordPress/gutenberg/pull/26553)), ([26437](https://github.com/WordPress/gutenberg/pull/26437)), ([26400](https://github.com/WordPress/gutenberg/pull/26400)), ([26566](https://github.com/WordPress/gutenberg/pull/26566)).
+-   Storybook: Fix broken BlockDraggable story. ([26457](https://github.com/WordPress/gutenberg/pull/26457)) ([26431](https://github.com/WordPress/gutenberg/pull/26431))
 
 ### Code Quality
 
-- Remove anonymous components from global styles sidebar. ([26604](https://github.com/WordPress/gutenberg/pull/26604))
-- Add types to components:
-  - Tip. ([26173](https://github.com/WordPress/gutenberg/pull/26173))
-  - BaseControl and VisuallyHidden. ([26078](https://github.com/WordPress/gutenberg/pull/26078))
-- Improve @wordpress/I18n types. ([26171](https://github.com/WordPress/gutenberg/pull/26171))
-- Migrate to builtin data controls. ([25993](https://github.com/WordPress/gutenberg/pull/25993)) ([25949](https://github.com/WordPress/gutenberg/pull/25949)) ([25773](https://github.com/WordPress/gutenberg/pull/25773)) ([25990](https://github.com/WordPress/gutenberg/pull/25990)) ([26509](https://github.com/WordPress/gutenberg/pull/26509)) ([25772](https://github.com/WordPress/gutenberg/pull/25772))
-- Chore: Ensure WordPress packages share the same hoisted dependencies. ([26453](https://github.com/WordPress/gutenberg/pull/26453))
-- Use CSS-in-JS in @wordpress/components:
-  - Spinner. ([26433](https://github.com/WordPress/gutenberg/pull/26433))
-  - Disabled. ([25843](https://github.com/WordPress/gutenberg/pull/25843))
+-   Remove anonymous components from global styles sidebar. ([26604](https://github.com/WordPress/gutenberg/pull/26604))
+-   Add types to components:
+    -   Tip. ([26173](https://github.com/WordPress/gutenberg/pull/26173))
+    -   BaseControl and VisuallyHidden. ([26078](https://github.com/WordPress/gutenberg/pull/26078))
+-   Improve @wordpress/I18n types. ([26171](https://github.com/WordPress/gutenberg/pull/26171))
+-   Migrate to builtin data controls. ([25993](https://github.com/WordPress/gutenberg/pull/25993)) ([25949](https://github.com/WordPress/gutenberg/pull/25949)) ([25773](https://github.com/WordPress/gutenberg/pull/25773)) ([25990](https://github.com/WordPress/gutenberg/pull/25990)) ([26509](https://github.com/WordPress/gutenberg/pull/26509)) ([25772](https://github.com/WordPress/gutenberg/pull/25772))
+-   Chore: Ensure WordPress packages share the same hoisted dependencies. ([26453](https://github.com/WordPress/gutenberg/pull/26453))
+-   Use CSS-in-JS in @wordpress/components:
+    -   Spinner. ([26433](https://github.com/WordPress/gutenberg/pull/26433))
+    -   Disabled. ([25843](https://github.com/WordPress/gutenberg/pull/25843))
 
 ### Build Tooling
 
-- Components: Copy SCSS file from react-dates to components package. ([26534](https://github.com/WordPress/gutenberg/pull/26534))
-- webpack: Replace legacy namedChunks/namedModules options with chunkIds/moduleIds. ([26502](https://github.com/WordPress/gutenberg/pull/26502))
-- Rewrite sideEffects flags to use only positive patterns. ([26452](https://github.com/WordPress/gutenberg/pull/26452))
-- Load the Twenty Twenty-one theme by default in Gutenberg's local environement. ([26414](https://github.com/WordPress/gutenberg/pull/26414))
-- Build: Assign the library exports to window.wp rather than this.wp. ([26272](https://github.com/WordPress/gutenberg/pull/26272))
-- Move to Dart Sass compiler. ([25628](https://github.com/WordPress/gutenberg/pull/25628))
-- Fix composer test failures due to invalid lock. ([26472](https://github.com/WordPress/gutenberg/pull/26472))
-- Update node-watch to 0.7.0. ([26403](https://github.com/WordPress/gutenberg/pull/26403))
-- Release tool: Support multiple RCs. ([25971](https://github.com/WordPress/gutenberg/pull/25971))
-- jest-puppeteer-axe: Migrate to @axe-core/puppeteer. ([25659](https://github.com/WordPress/gutenberg/pull/25659))
-- Improve End-to-End tests stability:
-  - Fix autosave end-to-end tests. ([26416](https://github.com/WordPress/gutenberg/pull/26416))
-  - Fix 'Multi entity saving -> site editor' end-to-end failures. ([26371](https://github.com/WordPress/gutenberg/pull/26371))
-  - Fix Twenty Twenty One related end-to-end test failures. ([26341](https://github.com/WordPress/gutenberg/pull/26341))
-  - Fix demo test by disabling the welcome dialog. ([26314](https://github.com/WordPress/gutenberg/pull/26314))
-  - Disable BlockPreviews from axe-core tests. ([26527](https://github.com/WordPress/gutenberg/pull/26527))
-  - Site editor: Fix end-to-end tests navigation panel. ([26454](https://github.com/WordPress/gutenberg/pull/26454))
-  - Consolidate sequential multi-entity-saving tests. ([26373](https://github.com/WordPress/gutenberg/pull/26373))
-  - Make the adding patterns test stable. ([26345](https://github.com/WordPress/gutenberg/pull/26345))
-
+-   Components: Copy SCSS file from react-dates to components package. ([26534](https://github.com/WordPress/gutenberg/pull/26534))
+-   webpack: Replace legacy namedChunks/namedModules options with chunkIds/moduleIds. ([26502](https://github.com/WordPress/gutenberg/pull/26502))
+-   Rewrite sideEffects flags to use only positive patterns. ([26452](https://github.com/WordPress/gutenberg/pull/26452))
+-   Load the Twenty Twenty-one theme by default in Gutenberg's local environement. ([26414](https://github.com/WordPress/gutenberg/pull/26414))
+-   Build: Assign the library exports to window.wp rather than this.wp. ([26272](https://github.com/WordPress/gutenberg/pull/26272))
+-   Move to Dart Sass compiler. ([25628](https://github.com/WordPress/gutenberg/pull/25628))
+-   Fix composer test failures due to invalid lock. ([26472](https://github.com/WordPress/gutenberg/pull/26472))
+-   Update node-watch to 0.7.0. ([26403](https://github.com/WordPress/gutenberg/pull/26403))
+-   Release tool: Support multiple RCs. ([25971](https://github.com/WordPress/gutenberg/pull/25971))
+-   jest-puppeteer-axe: Migrate to @axe-core/puppeteer. ([25659](https://github.com/WordPress/gutenberg/pull/25659))
+-   Improve End-to-End tests stability:
+    -   Fix autosave end-to-end tests. ([26416](https://github.com/WordPress/gutenberg/pull/26416))
+    -   Fix 'Multi entity saving -> site editor' end-to-end failures. ([26371](https://github.com/WordPress/gutenberg/pull/26371))
+    -   Fix Twenty Twenty One related end-to-end test failures. ([26341](https://github.com/WordPress/gutenberg/pull/26341))
+    -   Fix demo test by disabling the welcome dialog. ([26314](https://github.com/WordPress/gutenberg/pull/26314))
+    -   Disable BlockPreviews from axe-core tests. ([26527](https://github.com/WordPress/gutenberg/pull/26527))
+    -   Site editor: Fix end-to-end tests navigation panel. ([26454](https://github.com/WordPress/gutenberg/pull/26454))
+    -   Consolidate sequential multi-entity-saving tests. ([26373](https://github.com/WordPress/gutenberg/pull/26373))
+    -   Make the adding patterns test stable. ([26345](https://github.com/WordPress/gutenberg/pull/26345))
 
 ### Various
 
-- Create Block: Update the list of categories to pick from. ([26448](https://github.com/WordPress/gutenberg/pull/26448))
-- Removes extra fullstop from preferences. ([26586](https://github.com/WordPress/gutenberg/pull/26586))
-- @wordpress/scripts: Configure all the tools to skip `vendor` folder. ([26450](https://github.com/WordPress/gutenberg/pull/26450))
-
+-   Create Block: Update the list of categories to pick from. ([26448](https://github.com/WordPress/gutenberg/pull/26448))
+-   Removes extra fullstop from preferences. ([26586](https://github.com/WordPress/gutenberg/pull/26586))
+-   @wordpress/scripts: Configure all the tools to skip `vendor` folder. ([26450](https://github.com/WordPress/gutenberg/pull/26450))
 
 = 9.2.2 =
 
+## Changelog
 
 ### Bug Fixes
 
-- Fix widget previews in the widget screen https://github.com/WordPress/gutenberg/pull/26356 https://github.com/WordPress/gutenberg/pull/26417
-
+-   Fix widget previews in the widget screen https://github.com/WordPress/gutenberg/pull/26356 https://github.com/WordPress/gutenberg/pull/26417
 
 = 9.2.1 =
 
-### Bug Fixes
+## Changelog
 
- - Code block: preserve indentation on paste
- - Fix block supports for inner blocks
- - Fix archives block render function
+### Bug Fixes
 
+-   Code block: preserve indentation on paste
+-   Fix block supports for inner blocks
+-   Fix archives block render function
 
 = 9.2.0 =
 
+## Changelog
+
 ### Features
 
 -   Add video tracks functionality. ([25861](https://github.com/WordPress/gutenberg/pull/25861))
@@ -17030,343 +41771,341 @@ After:
 -   Add a description to the Site Title block. ([23462](https://github.com/WordPress/gutenberg/pull/23462))
 -   Add storybook story for the FocusableIframe component. ([22324](https://github.com/WordPress/gutenberg/pull/22324))
 
-
 = 9.1.0 =
 
+## Changelog
+
 ### Features
 
-- Add "open in new tab" feature to Social Links Block. ([25468](https://github.com/WordPress/gutenberg/pull/25468))
-- Add Image Size control to the Media & Text block. ([24795](https://github.com/WordPress/gutenberg/pull/24795))
+-   Add "open in new tab" feature to Social Links Block. ([25468](https://github.com/WordPress/gutenberg/pull/25468))
+-   Add Image Size control to the Media & Text block. ([24795](https://github.com/WordPress/gutenberg/pull/24795))
 
 ### Enhancements
 
-- Inserter: Add block pattern category selection. ([24954](https://github.com/WordPress/gutenberg/pull/24954))
-- Reduce minimum height to 1px for the Spacer block. ([25528](https://github.com/WordPress/gutenberg/pull/25528))
-- Show the Fullscreen keyboard shortcut. ([25395](https://github.com/WordPress/gutenberg/pull/25395))
-- Improve the Audio block shortcode transform to account for all sources. ([25114](https://github.com/WordPress/gutenberg/pull/25114))
-- Code block: Allow HTML editing & rich text content. ([24689](https://github.com/WordPress/gutenberg/pull/24689))
-- Remove appender from unselected Buttons and Social Icons block. ([25518](https://github.com/WordPress/gutenberg/pull/25518))
-- Widgets Screen:
-  - Register legacy widgets as block variations. ([24905](https://github.com/WordPress/gutenberg/pull/24905))
-  - Use the default block list appender for the widget areas. ([25635](https://github.com/WordPress/gutenberg/pull/25635))
-  - Add titles to Legacy Widgets. ([25638](https://github.com/WordPress/gutenberg/pull/25638))
-- Buttons block: Lighten editor DOM. ([23222](https://github.com/WordPress/gutenberg/pull/23222))
-- Copy: Reword block settings menu item labels. ([22955](https://github.com/WordPress/gutenberg/pull/22955))
-- Add a tooltip to the Drag & Drop handle. ([25606](https://github.com/WordPress/gutenberg/pull/25606)) ([25614](https://github.com/WordPress/gutenberg/pull/25614))
-- A11y:
-  - Add aria-haspopup property to the BlockNavigation component. ([25605](https://github.com/WordPress/gutenberg/pull/25605))
-  - Add aria-haspopup property to the TableOfContents component. ([25603](https://github.com/WordPress/gutenberg/pull/25603))
-  - Add aria-haspopup to the ToolSelector. ([25600](https://github.com/WordPress/gutenberg/pull/25600))
-  - Add aria-haspopup to the MediaReplaceFlow button. ([25597](https://github.com/WordPress/gutenberg/pull/25597))
-  - Add aria-haspopup attribute to CustomGradientBar component. ([25571](https://github.com/WordPress/gutenberg/pull/25571))
-  - Add aria-haspopup to CircularOptionPicker component. ([25564](https://github.com/WordPress/gutenberg/pull/25564))
-  - Add aria-describedby to featured-image button. ([24888](https://github.com/WordPress/gutenberg/pull/24888))
-- Don't show heading ancestor blocks in Document Outline. ([25599](https://github.com/WordPress/gutenberg/pull/25599))
-- Support the default link config for the Gallery and Image blocks (`image_default_link_type`). ([25578](https://github.com/WordPress/gutenberg/pull/25578)) ([25582](https://github.com/WordPress/gutenberg/pull/25582))
-- Social Icons Block: Let icons wrap. ([25334](https://github.com/WordPress/gutenberg/pull/25334))
+-   Inserter: Add block pattern category selection. ([24954](https://github.com/WordPress/gutenberg/pull/24954))
+-   Reduce minimum height to 1px for the Spacer block. ([25528](https://github.com/WordPress/gutenberg/pull/25528))
+-   Show the Fullscreen keyboard shortcut. ([25395](https://github.com/WordPress/gutenberg/pull/25395))
+-   Improve the Audio block shortcode transform to account for all sources. ([25114](https://github.com/WordPress/gutenberg/pull/25114))
+-   Code block: Allow HTML editing & rich text content. ([24689](https://github.com/WordPress/gutenberg/pull/24689))
+-   Remove appender from unselected Buttons and Social Icons block. ([25518](https://github.com/WordPress/gutenberg/pull/25518))
+-   Widgets Screen:
+    -   Register legacy widgets as block variations. ([24905](https://github.com/WordPress/gutenberg/pull/24905))
+    -   Use the default block list appender for the widget areas. ([25635](https://github.com/WordPress/gutenberg/pull/25635))
+    -   Add titles to Legacy Widgets. ([25638](https://github.com/WordPress/gutenberg/pull/25638))
+-   Buttons block: Lighten editor DOM. ([23222](https://github.com/WordPress/gutenberg/pull/23222))
+-   Copy: Reword block settings menu item labels. ([22955](https://github.com/WordPress/gutenberg/pull/22955))
+-   Add a tooltip to the Drag & Drop handle. ([25606](https://github.com/WordPress/gutenberg/pull/25606)) ([25614](https://github.com/WordPress/gutenberg/pull/25614))
+-   A11y:
+    -   Add aria-haspopup property to the BlockNavigation component. ([25605](https://github.com/WordPress/gutenberg/pull/25605))
+    -   Add aria-haspopup property to the TableOfContents component. ([25603](https://github.com/WordPress/gutenberg/pull/25603))
+    -   Add aria-haspopup to the ToolSelector. ([25600](https://github.com/WordPress/gutenberg/pull/25600))
+    -   Add aria-haspopup to the MediaReplaceFlow button. ([25597](https://github.com/WordPress/gutenberg/pull/25597))
+    -   Add aria-haspopup attribute to CustomGradientBar component. ([25571](https://github.com/WordPress/gutenberg/pull/25571))
+    -   Add aria-haspopup to CircularOptionPicker component. ([25564](https://github.com/WordPress/gutenberg/pull/25564))
+    -   Add aria-describedby to featured-image button. ([24888](https://github.com/WordPress/gutenberg/pull/24888))
+-   Don't show heading ancestor blocks in Document Outline. ([25599](https://github.com/WordPress/gutenberg/pull/25599))
+-   Support the default link config for the Gallery and Image blocks (`image_default_link_type`). ([25578](https://github.com/WordPress/gutenberg/pull/25578)) ([25582](https://github.com/WordPress/gutenberg/pull/25582))
+-   Social Icons Block: Let icons wrap. ([25334](https://github.com/WordPress/gutenberg/pull/25334))
 
 ### New APIs
 
-- Add new ComboboxControl. ([25442](https://github.com/WordPress/gutenberg/pull/25442))
-- Data Controls: Add new syncSelect control. ([25336](https://github.com/WordPress/gutenberg/pull/25336))
-- DateTimePicker: Add support for highlighting days. ([22032](https://github.com/WordPress/gutenberg/pull/22032))
-
-### Bug Fixes
-
-- Widgets Screen:
-  - Auto expand the last selected widget area when opening the inserter. ([25669](https://github.com/WordPress/gutenberg/pull/25669))
-  - Ensure all widgets are properly initialized when they're added, do not unmount widgets once they're mounted. ([25645](https://github.com/WordPress/gutenberg/pull/25645))
-  - Fix Legacy widget block previews and use iFrames. ([25443](https://github.com/WordPress/gutenberg/pull/25443)) ([14643](https://github.com/WordPress/gutenberg/pull/14643))
-  - Report save errors. ([25408](https://github.com/WordPress/gutenberg/pull/25408))
-  - Fix global inserter. ([24908](https://github.com/WordPress/gutenberg/pull/24908))
-- Fix RangeControl direct entry in input field. ([25609](https://github.com/WordPress/gutenberg/pull/25609))
-- A11y:
-  - Fix the color contrast in the code editor. ([25593](https://github.com/WordPress/gutenberg/pull/25593))
-  - Fix Publish sidebar Cancel button not usable through screen readers. ([25441](https://github.com/WordPress/gutenberg/pull/25441))
-  - Fix keyboard navigation on the Image block toolbar. ([25127](https://github.com/WordPress/gutenberg/pull/25127))
-  - More block: Use an actual placeholder for input text. ([23836](https://github.com/WordPress/gutenberg/pull/23836))
-- Fix nested container smart margins. ([25527](https://github.com/WordPress/gutenberg/pull/25527))
-- Fix add_filter instead of apply_filters. ([25512](https://github.com/WordPress/gutenberg/pull/25512))
-- Fix the WordPress embed preview in the editor. ([25370](https://github.com/WordPress/gutenberg/pull/25370))
-- Remove Embed block aspect ratio classes on url change. ([25295](https://github.com/WordPress/gutenberg/pull/25295))
-- Remove duplicate help item. ([25283](https://github.com/WordPress/gutenberg/pull/25283))
-- Fix Block Directory author average rating formating. ([24732](https://github.com/WordPress/gutenberg/pull/24732))
-- @wordpress/api-fetch:
-  - Fix preloading middleware referencing stale data. ([25550](https://github.com/WordPress/gutenberg/pull/25550))
-  - Check nonce header value before skipping adding it. ([25458](https://github.com/WordPress/gutenberg/pull/25458))
-- Use esc_html instead of esc_attr in the Archives block. ([25476](https://github.com/WordPress/gutenberg/pull/25476))
-- Fix Canceling Drag and Drop using ESC key. ([25317](https://github.com/WordPress/gutenberg/pull/25317))
-- Cover block: Add explilcit box-sizing style. ([25115](https://github.com/WordPress/gutenberg/pull/25115))
-- Use a ComboboxControl for the post author selector to fix loading issues for sites with a big number of authors. ([23237](https://github.com/WordPress/gutenberg/pull/23237))
+-   Add new ComboboxControl. ([25442](https://github.com/WordPress/gutenberg/pull/25442))
+-   Data Controls: Add new syncSelect control. ([25336](https://github.com/WordPress/gutenberg/pull/25336))
+-   DateTimePicker: Add support for highlighting days. ([22032](https://github.com/WordPress/gutenberg/pull/22032))
+
+### Bug Fixes
+
+-   Widgets Screen:
+    -   Auto expand the last selected widget area when opening the inserter. ([25669](https://github.com/WordPress/gutenberg/pull/25669))
+    -   Ensure all widgets are properly initialized when they're added, do not unmount widgets once they're mounted. ([25645](https://github.com/WordPress/gutenberg/pull/25645))
+    -   Fix Legacy widget block previews and use iFrames. ([25443](https://github.com/WordPress/gutenberg/pull/25443)) ([14643](https://github.com/WordPress/gutenberg/pull/14643))
+    -   Report save errors. ([25408](https://github.com/WordPress/gutenberg/pull/25408))
+    -   Fix global inserter. ([24908](https://github.com/WordPress/gutenberg/pull/24908))
+-   Fix RangeControl direct entry in input field. ([25609](https://github.com/WordPress/gutenberg/pull/25609))
+-   A11y:
+    -   Fix the color contrast in the code editor. ([25593](https://github.com/WordPress/gutenberg/pull/25593))
+    -   Fix Publish sidebar Cancel button not usable through screen readers. ([25441](https://github.com/WordPress/gutenberg/pull/25441))
+    -   Fix keyboard navigation on the Image block toolbar. ([25127](https://github.com/WordPress/gutenberg/pull/25127))
+    -   More block: Use an actual placeholder for input text. ([23836](https://github.com/WordPress/gutenberg/pull/23836))
+-   Fix nested container smart margins. ([25527](https://github.com/WordPress/gutenberg/pull/25527))
+-   Fix add_filter instead of apply_filters. ([25512](https://github.com/WordPress/gutenberg/pull/25512))
+-   Fix the WordPress embed preview in the editor. ([25370](https://github.com/WordPress/gutenberg/pull/25370))
+-   Remove Embed block aspect ratio classes on url change. ([25295](https://github.com/WordPress/gutenberg/pull/25295))
+-   Remove duplicate help item. ([25283](https://github.com/WordPress/gutenberg/pull/25283))
+-   Fix Block Directory author average rating formating. ([24732](https://github.com/WordPress/gutenberg/pull/24732))
+-   @wordpress/api-fetch:
+    -   Fix preloading middleware referencing stale data. ([25550](https://github.com/WordPress/gutenberg/pull/25550))
+    -   Check nonce header value before skipping adding it. ([25458](https://github.com/WordPress/gutenberg/pull/25458))
+-   Use esc_html instead of esc_attr in the Archives block. ([25476](https://github.com/WordPress/gutenberg/pull/25476))
+-   Fix Canceling Drag and Drop using ESC key. ([25317](https://github.com/WordPress/gutenberg/pull/25317))
+-   Cover block: Add explilcit box-sizing style. ([25115](https://github.com/WordPress/gutenberg/pull/25115))
+-   Use a ComboboxControl for the post author selector to fix loading issues for sites with a big number of authors. ([23237](https://github.com/WordPress/gutenberg/pull/23237))
 
 ### Performance
 
-- Avoid relying on DOM events to measure the loading time. ([25288](https://github.com/WordPress/gutenberg/pull/25288))
+-   Avoid relying on DOM events to measure the loading time. ([25288](https://github.com/WordPress/gutenberg/pull/25288))
 
 ### Experiments
 
-- Site Editor Screen:
-  - Fix wrong close label in the block inspector. ([25424](https://github.com/WordPress/gutenberg/pull/25424))
-  - Add basic template information to editor header. ([25320](https://github.com/WordPress/gutenberg/pull/25320))
-  - Fix the footer styling. ([25152](https://github.com/WordPress/gutenberg/pull/25152))
-  - Add a reset button to global styles sidebar. ([25426](https://github.com/WordPress/gutenberg/pull/25426))
-  - Show document subtext if template part child is selected. ([25544](https://github.com/WordPress/gutenberg/pull/25544))
-  - Add navigation panel. ([25506](https://github.com/WordPress/gutenberg/pull/25506))
-  - Fix site base URL. ([25409](https://github.com/WordPress/gutenberg/pull/25409))
-- Post and Site Blocks:
-  - Add link option in PostTitle block. ([25341](https://github.com/WordPress/gutenberg/pull/25341)) ([25397](https://github.com/WordPress/gutenberg/pull/25397))
-  - Register the Site Logo block using `register_block_type_from_metadata`. ([25289](https://github.com/WordPress/gutenberg/pull/25289))
-- Themes and global styles:
-  - Support defining colors and gradients config from theme.json. ([25419](https://github.com/WordPress/gutenberg/pull/25419))
-  - Support defining font sizes config from theme.json. ([25516](https://github.com/WordPress/gutenberg/pull/25516))
-  - Support custom units on theme.json. ([25217](https://github.com/WordPress/gutenberg/pull/25217))
-  - Add separate support keys for color and background color. ([25314](https://github.com/WordPress/gutenberg/pull/25314))
-  - Allow themes to enqueue custom CSS variables via theme.json. ([25446](https://github.com/WordPress/gutenberg/pull/25446)) ([25619](https://github.com/WordPress/gutenberg/pull/25619))
-  - Refactor theme.json format. ([25301](https://github.com/WordPress/gutenberg/pull/25301)) ([25407](https://github.com/WordPress/gutenberg/pull/25407))
-  - Update theme json documentation to account for latest changes. ([25369](https://github.com/WordPress/gutenberg/pull/25369))
-- Block API: Introduce useBlockWrapperProps hook to use light block DOM in the editor. ([23034](https://github.com/WordPress/gutenberg/pull/23034)) ([25679](https://github.com/WordPress/gutenberg/pull/25679)) ([25554](https://github.com/WordPress/gutenberg/pull/25554)) ([25515](https://github.com/WordPress/gutenberg/pull/25515))
-- Navigation block and screen:
-  - Handle block menu items. ([24846](https://github.com/WordPress/gutenberg/pull/24846))
-  - Avoid auto-focusing Navigation block in Navigation screen. ([25592](https://github.com/WordPress/gutenberg/pull/25592))
-  - Change the block description. ([25531](https://github.com/WordPress/gutenberg/pull/25531)) ([25555](https://github.com/WordPress/gutenberg/pull/25555))
-  - Allow Social Links within Navigation Block. ([25357](https://github.com/WordPress/gutenberg/pull/25357))
-  - Wrap navigation editing features with filters. ([25329](https://github.com/WordPress/gutenberg/pull/25329))
-  - Add move markers to list view. ([25205](https://github.com/WordPress/gutenberg/pull/25205))
-- Iterating on the Navigation Component ([25608](https://github.com/WordPress/gutenberg/pull/25608)) ([25495](https://github.com/WordPress/gutenberg/pull/25495)) ([25572](https://github.com/WordPress/gutenberg/pull/25572)) ([25540](https://github.com/WordPress/gutenberg/pull/25540)) ([25520](https://github.com/WordPress/gutenberg/pull/25520)) ([25507](https://github.com/WordPress/gutenberg/pull/25507)) ([25367](https://github.com/WordPress/gutenberg/pull/25367)) ([25364](https://github.com/WordPress/gutenberg/pull/25364)) ([25340](https://github.com/WordPress/gutenberg/pull/25340)) ([25327](https://github.com/WordPress/gutenberg/pull/25327)) ([25281](https://github.com/WordPress/gutenberg/pull/25281)) ([25280](https://github.com/WordPress/gutenberg/pull/25280))
-
+-   Site Editor Screen:
+    -   Fix wrong close label in the block inspector. ([25424](https://github.com/WordPress/gutenberg/pull/25424))
+    -   Add basic template information to editor header. ([25320](https://github.com/WordPress/gutenberg/pull/25320))
+    -   Fix the footer styling. ([25152](https://github.com/WordPress/gutenberg/pull/25152))
+    -   Add a reset button to global styles sidebar. ([25426](https://github.com/WordPress/gutenberg/pull/25426))
+    -   Show document subtext if template part child is selected. ([25544](https://github.com/WordPress/gutenberg/pull/25544))
+    -   Add navigation panel. ([25506](https://github.com/WordPress/gutenberg/pull/25506))
+    -   Fix site base URL. ([25409](https://github.com/WordPress/gutenberg/pull/25409))
+-   Post and Site Blocks:
+    -   Add link option in PostTitle block. ([25341](https://github.com/WordPress/gutenberg/pull/25341)) ([25397](https://github.com/WordPress/gutenberg/pull/25397))
+    -   Register the Site Logo block using `register_block_type_from_metadata`. ([25289](https://github.com/WordPress/gutenberg/pull/25289))
+-   Themes and global styles:
+    -   Support defining colors and gradients config from theme.json. ([25419](https://github.com/WordPress/gutenberg/pull/25419))
+    -   Support defining font sizes config from theme.json. ([25516](https://github.com/WordPress/gutenberg/pull/25516))
+    -   Support custom units on theme.json. ([25217](https://github.com/WordPress/gutenberg/pull/25217))
+    -   Add separate support keys for color and background color. ([25314](https://github.com/WordPress/gutenberg/pull/25314))
+    -   Allow themes to enqueue custom CSS variables via theme.json. ([25446](https://github.com/WordPress/gutenberg/pull/25446)) ([25619](https://github.com/WordPress/gutenberg/pull/25619))
+    -   Refactor theme.json format. ([25301](https://github.com/WordPress/gutenberg/pull/25301)) ([25407](https://github.com/WordPress/gutenberg/pull/25407))
+    -   Update theme json documentation to account for latest changes. ([25369](https://github.com/WordPress/gutenberg/pull/25369))
+-   Block API: Introduce useBlockWrapperProps hook to use light block DOM in the editor. ([23034](https://github.com/WordPress/gutenberg/pull/23034)) ([25679](https://github.com/WordPress/gutenberg/pull/25679)) ([25554](https://github.com/WordPress/gutenberg/pull/25554)) ([25515](https://github.com/WordPress/gutenberg/pull/25515))
+-   Navigation block and screen:
+    -   Handle block menu items. ([24846](https://github.com/WordPress/gutenberg/pull/24846))
+    -   Avoid auto-focusing Navigation block in Navigation screen. ([25592](https://github.com/WordPress/gutenberg/pull/25592))
+    -   Change the block description. ([25531](https://github.com/WordPress/gutenberg/pull/25531)) ([25555](https://github.com/WordPress/gutenberg/pull/25555))
+    -   Allow Social Links within Navigation Block. ([25357](https://github.com/WordPress/gutenberg/pull/25357))
+    -   Wrap navigation editing features with filters. ([25329](https://github.com/WordPress/gutenberg/pull/25329))
+    -   Add move markers to list view. ([25205](https://github.com/WordPress/gutenberg/pull/25205))
+-   Iterating on the Navigation Component ([25608](https://github.com/WordPress/gutenberg/pull/25608)) ([25495](https://github.com/WordPress/gutenberg/pull/25495)) ([25572](https://github.com/WordPress/gutenberg/pull/25572)) ([25540](https://github.com/WordPress/gutenberg/pull/25540)) ([25520](https://github.com/WordPress/gutenberg/pull/25520)) ([25507](https://github.com/WordPress/gutenberg/pull/25507)) ([25367](https://github.com/WordPress/gutenberg/pull/25367)) ([25364](https://github.com/WordPress/gutenberg/pull/25364)) ([25340](https://github.com/WordPress/gutenberg/pull/25340)) ([25327](https://github.com/WordPress/gutenberg/pull/25327)) ([25281](https://github.com/WordPress/gutenberg/pull/25281)) ([25280](https://github.com/WordPress/gutenberg/pull/25280))
 
 ### Documentation
 
-- Add a data format and flow architecture document. ([25299](https://github.com/WordPress/gutenberg/pull/25299))
-- @wordpress/env: Add documentation for inspecting the docker compose file. ([25666](https://github.com/WordPress/gutenberg/pull/25666))
-- Add new block supports page to the handbook. ([25647](https://github.com/WordPress/gutenberg/pull/25647))
-- Block Directory: Add developer documentation. ([25591](https://github.com/WordPress/gutenberg/pull/25591))
-- Move custom-fields note to the 'Register Meta Field' documentation. ([25584](https://github.com/WordPress/gutenberg/pull/25584))
-- Add Block Editor Components documentation:
-  - Warning ([25574](https://github.com/WordPress/gutenberg/pull/25574))
-  - FontSizePicker ([25568](https://github.com/WordPress/gutenberg/pull/25568))
-  - UnitControl ([25565](https://github.com/WordPress/gutenberg/pull/25565))
-  - CopyHandler ([25342](https://github.com/WordPress/gutenberg/pull/25342))
-  - MultiSelection  ([25306](https://github.com/WordPress/gutenberg/pull/25306))
-  - LineHeightControl ([25303](https://github.com/WordPress/gutenberg/pull/25303))
-  - BlockAlignmentToolbar ([25212](https://github.com/WordPress/gutenberg/pull/25212))
-  - AlignmentToolbar ([25210](https://github.com/WordPress/gutenberg/pull/25210))
-  - BlockFormatControls ([25573](https://github.com/WordPress/gutenberg/pull/25573))
-- Add Caveats section for MAMP. ([25444](https://github.com/WordPress/gutenberg/pull/25444))
-- Add FormTokenField story. ([25439](https://github.com/WordPress/gutenberg/pull/25439))
-- Improve documentation for the data registry control and selector creators. ([25335](https://github.com/WordPress/gutenberg/pull/25335))
-- Update git workflow documentation. ([25164](https://github.com/WordPress/gutenberg/pull/25164))
-- Refresh the Getting Started guide. ([25090](https://github.com/WordPress/gutenberg/pull/25090))
-- Update JavaScript troubleshooting guide. ([24105](https://github.com/WordPress/gutenberg/pull/24105))
-- Enhance the Block Context documentation. ([25272](https://github.com/WordPress/gutenberg/pull/25272))
-- Typos: ([25359](https://github.com/WordPress/gutenberg/pull/25359)) ([25653](https://github.com/WordPress/gutenberg/pull/25653))
+-   Add a data format and flow architecture document. ([25299](https://github.com/WordPress/gutenberg/pull/25299))
+-   @wordpress/env: Add documentation for inspecting the docker compose file. ([25666](https://github.com/WordPress/gutenberg/pull/25666))
+-   Add new block supports page to the handbook. ([25647](https://github.com/WordPress/gutenberg/pull/25647))
+-   Block Directory: Add developer documentation. ([25591](https://github.com/WordPress/gutenberg/pull/25591))
+-   Move custom-fields note to the 'Register Meta Field' documentation. ([25584](https://github.com/WordPress/gutenberg/pull/25584))
+-   Add Block Editor Components documentation:
+    -   Warning ([25574](https://github.com/WordPress/gutenberg/pull/25574))
+    -   FontSizePicker ([25568](https://github.com/WordPress/gutenberg/pull/25568))
+    -   UnitControl ([25565](https://github.com/WordPress/gutenberg/pull/25565))
+    -   CopyHandler ([25342](https://github.com/WordPress/gutenberg/pull/25342))
+    -   MultiSelection ([25306](https://github.com/WordPress/gutenberg/pull/25306))
+    -   LineHeightControl ([25303](https://github.com/WordPress/gutenberg/pull/25303))
+    -   BlockAlignmentToolbar ([25212](https://github.com/WordPress/gutenberg/pull/25212))
+    -   AlignmentToolbar ([25210](https://github.com/WordPress/gutenberg/pull/25210))
+    -   BlockFormatControls ([25573](https://github.com/WordPress/gutenberg/pull/25573))
+-   Add Caveats section for MAMP. ([25444](https://github.com/WordPress/gutenberg/pull/25444))
+-   Add FormTokenField story. ([25439](https://github.com/WordPress/gutenberg/pull/25439))
+-   Improve documentation for the data registry control and selector creators. ([25335](https://github.com/WordPress/gutenberg/pull/25335))
+-   Update git workflow documentation. ([25164](https://github.com/WordPress/gutenberg/pull/25164))
+-   Refresh the Getting Started guide. ([25090](https://github.com/WordPress/gutenberg/pull/25090))
+-   Update JavaScript troubleshooting guide. ([24105](https://github.com/WordPress/gutenberg/pull/24105))
+-   Enhance the Block Context documentation. ([25272](https://github.com/WordPress/gutenberg/pull/25272))
+-   Typos: ([25359](https://github.com/WordPress/gutenberg/pull/25359)) ([25653](https://github.com/WordPress/gutenberg/pull/25653))
 
 ### Code Quality
 
-- Update the Dashicon component to rely on the font that ships with WordPress. ([20003](https://github.com/WordPress/gutenberg/pull/20003))
-- Add new $gray-200 SASS variable and use for skeleton borders. ([25491](https://github.com/WordPress/gutenberg/pull/25491))
-- Block Editor: Remove empty module focus-detector. ([25561](https://github.com/WordPress/gutenberg/pull/25561))
-- Image block: Avoid remounting to focus caption. ([25493](https://github.com/WordPress/gutenberg/pull/25493))
-- Add explicit boxSizing style to Placeholder component. ([25463](https://github.com/WordPress/gutenberg/pull/25463))
-- Remove classic block code used to support WP 4.9. ([25365](https://github.com/WordPress/gutenberg/pull/25365))
-- Add RichText value type definition. ([25363](https://github.com/WordPress/gutenberg/pull/25363))
-- Avoid global DOM dependencies. ([25332](https://github.com/WordPress/gutenberg/pull/25332))
-- Use controls from the Data Controls package instead of local ones. ([25235](https://github.com/WordPress/gutenberg/pull/25235))
-- RichText: Simplify withFormatTypes as hook. ([23145](https://github.com/WordPress/gutenberg/pull/23145))
-- Video block: Use hooks. ([25513](https://github.com/WordPress/gutenberg/pull/25513))
-- Remove wp_area custom post type. ([25497](https://github.com/WordPress/gutenberg/pull/25497))
-- Post Featured Image: Remove redundant condition. ([25490](https://github.com/WordPress/gutenberg/pull/25490))
-- Move legacy-widget block over to edit-widgets package. ([25371](https://github.com/WordPress/gutenberg/pull/25371)) ([25404](https://github.com/WordPress/gutenberg/pull/25404))
-- Don't use percent units for line-height. ([25398](https://github.com/WordPress/gutenberg/pull/25398))
-- Change wording and names to not include "whitelist". ([25396](https://github.com/WordPress/gutenberg/pull/25396))
-- Don't discard all promises results when one of them rejects. ([25302](https://github.com/WordPress/gutenberg/pull/25302))
-- Block Directory: Switch to `blocks.registerBlockType` filter. ([25264](https://github.com/WordPress/gutenberg/pull/25264))
-- Fix some javascript warnings. ([24996](https://github.com/WordPress/gutenberg/pull/24996))
+-   Update the Dashicon component to rely on the font that ships with WordPress. ([20003](https://github.com/WordPress/gutenberg/pull/20003))
+-   Add new $gray-200 SASS variable and use for skeleton borders. ([25491](https://github.com/WordPress/gutenberg/pull/25491))
+-   Block Editor: Remove empty module focus-detector. ([25561](https://github.com/WordPress/gutenberg/pull/25561))
+-   Image block: Avoid remounting to focus caption. ([25493](https://github.com/WordPress/gutenberg/pull/25493))
+-   Add explicit boxSizing style to Placeholder component. ([25463](https://github.com/WordPress/gutenberg/pull/25463))
+-   Remove classic block code used to support WP 4.9. ([25365](https://github.com/WordPress/gutenberg/pull/25365))
+-   Add RichText value type definition. ([25363](https://github.com/WordPress/gutenberg/pull/25363))
+-   Avoid global DOM dependencies. ([25332](https://github.com/WordPress/gutenberg/pull/25332))
+-   Use controls from the Data Controls package instead of local ones. ([25235](https://github.com/WordPress/gutenberg/pull/25235))
+-   RichText: Simplify withFormatTypes as hook. ([23145](https://github.com/WordPress/gutenberg/pull/23145))
+-   Video block: Use hooks. ([25513](https://github.com/WordPress/gutenberg/pull/25513))
+-   Remove wp_area custom post type. ([25497](https://github.com/WordPress/gutenberg/pull/25497))
+-   Post Featured Image: Remove redundant condition. ([25490](https://github.com/WordPress/gutenberg/pull/25490))
+-   Move legacy-widget block over to edit-widgets package. ([25371](https://github.com/WordPress/gutenberg/pull/25371)) ([25404](https://github.com/WordPress/gutenberg/pull/25404))
+-   Don't use percent units for line-height. ([25398](https://github.com/WordPress/gutenberg/pull/25398))
+-   Change wording and names to not include "whitelist". ([25396](https://github.com/WordPress/gutenberg/pull/25396))
+-   Don't discard all promises results when one of them rejects. ([25302](https://github.com/WordPress/gutenberg/pull/25302))
+-   Block Directory: Switch to `blocks.registerBlockType` filter. ([25264](https://github.com/WordPress/gutenberg/pull/25264))
+-   Fix some javascript warnings. ([24996](https://github.com/WordPress/gutenberg/pull/24996))
 
 ### Various
 
-- Remove the Block-based widgets editor from the customizer. ([25626](https://github.com/WordPress/gutenberg/pull/25626))
-- Cover block: Remove default position (center/center) className from rendering. ([25346](https://github.com/WordPress/gutenberg/pull/25346))
-- Fix the default label position in SelectControl. ([25427](https://github.com/WordPress/gutenberg/pull/25427))
-- DropdownMenu tooltip default to true. ([25391](https://github.com/WordPress/gutenberg/pull/25391))
-- Pass block pattern name when using replaceBlocks and insertBlocks. ([25165](https://github.com/WordPress/gutenberg/pull/25165)). ([25433](https://github.com/WordPress/gutenberg/pull/25433))
-- Babel Preset: Update Babel version to 7.11.x. ([25351](https://github.com/WordPress/gutenberg/pull/25351))
-- InputControl: Remove floating label variant. ([25308](https://github.com/WordPress/gutenberg/pull/25308))
-
+-   Remove the Block-based widgets editor from the customizer. ([25626](https://github.com/WordPress/gutenberg/pull/25626))
+-   Cover block: Remove default position (center/center) className from rendering. ([25346](https://github.com/WordPress/gutenberg/pull/25346))
+-   Fix the default label position in SelectControl. ([25427](https://github.com/WordPress/gutenberg/pull/25427))
+-   DropdownMenu tooltip default to true. ([25391](https://github.com/WordPress/gutenberg/pull/25391))
+-   Pass block pattern name when using replaceBlocks and insertBlocks. ([25165](https://github.com/WordPress/gutenberg/pull/25165)). ([25433](https://github.com/WordPress/gutenberg/pull/25433))
+-   Babel Preset: Update Babel version to 7.11.x. ([25351](https://github.com/WordPress/gutenberg/pull/25351))
+-   InputControl: Remove floating label variant. ([25308](https://github.com/WordPress/gutenberg/pull/25308))
 
 = 9.0.0 =
 
-### Features
+## Changelog
 
-- Query block:
-  - add search. ([25222](https://github.com/WordPress/gutenberg/pull/25222))
-  - add filtering by author support in Query block. ([25149](https://github.com/WordPress/gutenberg/pull/25149))
-  - add order and order by support. ([24691](https://github.com/WordPress/gutenberg/pull/24691))
-  - add tags support. ([25005](https://github.com/WordPress/gutenberg/pull/25005))
-- Navigation screen:
-  - add drag and drop to List View. ([23952](https://github.com/WordPress/gutenberg/pull/23952))
-  - implement redesign of screen. ([25178](https://github.com/WordPress/gutenberg/pull/25178))
-  - add support for advanced menu item properties. ([25062](https://github.com/WordPress/gutenberg/pull/25062))
+### Features
 
+-   Query block:
+    -   add search. ([25222](https://github.com/WordPress/gutenberg/pull/25222))
+    -   add filtering by author support in Query block. ([25149](https://github.com/WordPress/gutenberg/pull/25149))
+    -   add order and order by support. ([24691](https://github.com/WordPress/gutenberg/pull/24691))
+    -   add tags support. ([25005](https://github.com/WordPress/gutenberg/pull/25005))
+-   Navigation screen:
+    -   add drag and drop to List View. ([23952](https://github.com/WordPress/gutenberg/pull/23952))
+    -   implement redesign of screen. ([25178](https://github.com/WordPress/gutenberg/pull/25178))
+    -   add support for advanced menu item properties. ([25062](https://github.com/WordPress/gutenberg/pull/25062))
 
 ### Enhancements
 
-- Drag&Drop: add drag handle to block toolbar. ([24852](https://github.com/WordPress/gutenberg/pull/24852))
-- Drag&Drop: improve single block case. ([25107](https://github.com/WordPress/gutenberg/pull/25107))
-- Include the block variations on the inserter selector. ([25182](https://github.com/WordPress/gutenberg/pull/25182))
-- List view styling improvements. ([25143](https://github.com/WordPress/gutenberg/pull/25143))
-- Update pencil icon. ([25135](https://github.com/WordPress/gutenberg/pull/25135))
-- Refactor and make consistent post and site headers. ([25134](https://github.com/WordPress/gutenberg/pull/25134))
-- Limit the block slash inserter to 9 items and show most used by default. ([25113](https://github.com/WordPress/gutenberg/pull/25113))
-- Polish menu item icon locations. ([25106](https://github.com/WordPress/gutenberg/pull/25106))
-- Improve the block and patterns search algorithm. ([25105](https://github.com/WordPress/gutenberg/pull/25105))
-- Template part: attribute feature parity with group block. ([25029](https://github.com/WordPress/gutenberg/pull/25029))
-- Allow sharp gradients. ([24967](https://github.com/WordPress/gutenberg/pull/24967))
-- Post content: show placeholder if trying to render itself. ([24010](https://github.com/WordPress/gutenberg/pull/24010))
-- Add reusable block icon. ([23552](https://github.com/WordPress/gutenberg/pull/23552))
-- Let ID-less gallery shortcodes fall to Shortcode block. ([25144](https://github.com/WordPress/gutenberg/pull/25144))
-- Mirror WordPress plugin install text for blocks. ([25084](https://github.com/WordPress/gutenberg/pull/25084))
-- Allow inserting an h1 using # + space. ([25075](https://github.com/WordPress/gutenberg/pull/25075))
-- Widgets screen: add plugin area. ([25074](https://github.com/WordPress/gutenberg/pull/25074))
-- Add title attribute to Navigation Link block. ([24993](https://github.com/WordPress/gutenberg/pull/24993))
-- Add a way to change template parts. ([24990](https://github.com/WordPress/gutenberg/pull/24990))
-- Transform multiple heading blocks to list or paragraphs. ([24977](https://github.com/WordPress/gutenberg/pull/24977))
-- Remove redundant type badges in navigation link control. ([24885](https://github.com/WordPress/gutenberg/pull/24885))
-- Fix multiple trailing inserters for nested InnerBlocks. ([24836](https://github.com/WordPress/gutenberg/pull/24836))
-- Search Block: Add button, label, and width options. ([24666](https://github.com/WordPress/gutenberg/pull/24666))
-- Display labels instead of icons in top toolbar. ([24304](https://github.com/WordPress/gutenberg/pull/24304))
-- Add option to show icon labels. ([24234](https://github.com/WordPress/gutenberg/pull/24234))
-- Add a "reinstall" button when a block type is not found. ([22631](https://github.com/WordPress/gutenberg/pull/22631))
-
-
-### Bug Fixes
-
-- Template part: fix rename before customize bug. ([25206](https://github.com/WordPress/gutenberg/pull/25206))
-- Template part: fix auto-drafting to support sub-directories. ([25063](https://github.com/WordPress/gutenberg/pull/25063))
-- Template part: use cleaned slug to query. ([25030](https://github.com/WordPress/gutenberg/pull/25030))
-- Classic block: optional chain on possibly null editor. ([25163](https://github.com/WordPress/gutenberg/pull/25163))
-- Classic block: show contents on load. ([25162](https://github.com/WordPress/gutenberg/pull/25162))
-- Embed Block: Fix crash in isFromWordPress helper if preview.html is false. ([25140](https://github.com/WordPress/gutenberg/pull/25140))
-- Cover block: fix width regression. ([25103](https://github.com/WordPress/gutenberg/pull/25103))
-- Navigation block: reduce subnavigation arrow padding. ([24200](https://github.com/WordPress/gutenberg/pull/24200))
-- GlobalStyles: fix nested features algorithm. ([25215](https://github.com/WordPress/gutenberg/pull/25215))
-- GlobalStyles: fix settings name. ([25040](https://github.com/WordPress/gutenberg/pull/25040))
-- Widgets screen: convert the toolbar to ARIA toolbar. ([25111](https://github.com/WordPress/gutenberg/pull/25111))
-- Widgets screen: add labels for settings and close button. ([25101](https://github.com/WordPress/gutenberg/pull/25101))
-- Navigation screen: fix creating Navigation from pages or menu with HTML in title. ([24673](https://github.com/WordPress/gutenberg/pull/24673))
-- Element: add and upgrade @types/{react,react-dom} dependencies. ([25086](https://github.com/WordPress/gutenberg/pull/25086))
-- Add safeguard to AuthorSelect component until authors are fetched. ([25214](https://github.com/WordPress/gutenberg/pull/25214))
-- Fix PHP error when users don't have access to the Appearance menu. ([25073](https://github.com/WordPress/gutenberg/pull/25073))
-- Polish horizontal movers. ([25037](https://github.com/WordPress/gutenberg/pull/25037))
-- Fix PHP Notice: Check that the `query` arg exists before using it. ([25006](https://github.com/WordPress/gutenberg/pull/25006))
-- Fix gradient swatches stacking badly with scrollbar. ([25002](https://github.com/WordPress/gutenberg/pull/25002))
-- Fix unlinked padding controls JS error. ([25000](https://github.com/WordPress/gutenberg/pull/25000))
-- Show external icon on help button. ([24622](https://github.com/WordPress/gutenberg/pull/24622))
-- Check if block attributes exist before splitting. ([25229](https://github.com/WordPress/gutenberg/pull/25229))
-- Revert "InnerBlocks: Introduce prop to specify render callback for each block.". ([25196](https://github.com/WordPress/gutenberg/pull/25196))
-- Core Data: Bring back support for nested `_fields` values. ([25083](https://github.com/WordPress/gutenberg/pull/25083))
-- Prevent TypeError for projects without a local Prettier configuration. ([25068](https://github.com/WordPress/gutenberg/pull/25068))
-- Image Block: Properly show errors on drag n drop. ([25004](https://github.com/WordPress/gutenberg/pull/25004))
-- Add block inspector virtual bubbling option. ([24991](https://github.com/WordPress/gutenberg/pull/24991))
-- Remove extra slash from `$block_json_file`. ([24829](https://github.com/WordPress/gutenberg/pull/24829))
-- Inserter: Test to make sure the Inserter menu is closed. ([24610](https://github.com/WordPress/gutenberg/pull/24610))
-- Date: Update `moment-timezone` package to support string timezones. ([22866](https://github.com/WordPress/gutenberg/pull/22866))
-- Fix enqueue presets for global styles. ([25286](https://github.com/WordPress/gutenberg/pull/25286))
-- Fix stylesheet generation. ([25293](https://github.com/WordPress/gutenberg/pull/25293))
-
-### Experiments
-
-- Group block: add padding support. ([24966](https://github.com/WordPress/gutenberg/pull/24966))
-- Control the block editor via theme.json:
-  - support for custom link color. ([25148](https://github.com/WordPress/gutenberg/pull/25148))
-  - support for custom spacing. ([25141](https://github.com/WordPress/gutenberg/pull/25141))
-  - support for custom line heights. ([25043](https://github.com/WordPress/gutenberg/pull/25043))
-  - support for custom font sizes. ([25038](https://github.com/WordPress/gutenberg/pull/25038))
-  - support for custom gradients. ([24964](https://github.com/WordPress/gutenberg/pull/24964))
-- Navigation component: composition proposal. ([25057](https://github.com/WordPress/gutenberg/pull/25057))
-- Replace accessibilityLabel by label on RadioGroup. ([25128](https://github.com/WordPress/gutenberg/pull/25128))
-- Global styles:
-  - add sidebar at edit site screen. ([24250](https://github.com/WordPress/gutenberg/pull/24250))
-  - print minified css. ([24924](https://github.com/WordPress/gutenberg/pull/24924))
-  - centralize style & support mappings for blocks. ([25185](https://github.com/WordPress/gutenberg/pull/25185))
-  - centralize client side global styles mappings. ([25056](https://github.com/WordPress/gutenberg/pull/25056))
-  - set property to change one property accept all lodash paths. ([25159](https://github.com/WordPress/gutenberg/pull/25159))
+-   Drag&Drop: add drag handle to block toolbar. ([24852](https://github.com/WordPress/gutenberg/pull/24852))
+-   Drag&Drop: improve single block case. ([25107](https://github.com/WordPress/gutenberg/pull/25107))
+-   Include the block variations on the inserter selector. ([25182](https://github.com/WordPress/gutenberg/pull/25182))
+-   List view styling improvements. ([25143](https://github.com/WordPress/gutenberg/pull/25143))
+-   Update pencil icon. ([25135](https://github.com/WordPress/gutenberg/pull/25135))
+-   Refactor and make consistent post and site headers. ([25134](https://github.com/WordPress/gutenberg/pull/25134))
+-   Limit the block slash inserter to 9 items and show most used by default. ([25113](https://github.com/WordPress/gutenberg/pull/25113))
+-   Polish menu item icon locations. ([25106](https://github.com/WordPress/gutenberg/pull/25106))
+-   Improve the block and patterns search algorithm. ([25105](https://github.com/WordPress/gutenberg/pull/25105))
+-   Template part: attribute feature parity with group block. ([25029](https://github.com/WordPress/gutenberg/pull/25029))
+-   Allow sharp gradients. ([24967](https://github.com/WordPress/gutenberg/pull/24967))
+-   Post content: show placeholder if trying to render itself. ([24010](https://github.com/WordPress/gutenberg/pull/24010))
+-   Add reusable block icon. ([23552](https://github.com/WordPress/gutenberg/pull/23552))
+-   Let ID-less gallery shortcodes fall to Shortcode block. ([25144](https://github.com/WordPress/gutenberg/pull/25144))
+-   Mirror WordPress plugin install text for blocks. ([25084](https://github.com/WordPress/gutenberg/pull/25084))
+-   Allow inserting an h1 using # + space. ([25075](https://github.com/WordPress/gutenberg/pull/25075))
+-   Widgets screen: add plugin area. ([25074](https://github.com/WordPress/gutenberg/pull/25074))
+-   Add title attribute to Navigation Link block. ([24993](https://github.com/WordPress/gutenberg/pull/24993))
+-   Add a way to change template parts. ([24990](https://github.com/WordPress/gutenberg/pull/24990))
+-   Transform multiple heading blocks to list or paragraphs. ([24977](https://github.com/WordPress/gutenberg/pull/24977))
+-   Remove redundant type badges in navigation link control. ([24885](https://github.com/WordPress/gutenberg/pull/24885))
+-   Fix multiple trailing inserters for nested InnerBlocks. ([24836](https://github.com/WordPress/gutenberg/pull/24836))
+-   Search Block: Add button, label, and width options. ([24666](https://github.com/WordPress/gutenberg/pull/24666))
+-   Display labels instead of icons in top toolbar. ([24304](https://github.com/WordPress/gutenberg/pull/24304))
+-   Add option to show icon labels. ([24234](https://github.com/WordPress/gutenberg/pull/24234))
+-   Add a "reinstall" button when a block type is not found. ([22631](https://github.com/WordPress/gutenberg/pull/22631))
 
+### Bug Fixes
 
-### Documentation
+-   Template part: fix rename before customize bug. ([25206](https://github.com/WordPress/gutenberg/pull/25206))
+-   Template part: fix auto-drafting to support sub-directories. ([25063](https://github.com/WordPress/gutenberg/pull/25063))
+-   Template part: use cleaned slug to query. ([25030](https://github.com/WordPress/gutenberg/pull/25030))
+-   Classic block: optional chain on possibly null editor. ([25163](https://github.com/WordPress/gutenberg/pull/25163))
+-   Classic block: show contents on load. ([25162](https://github.com/WordPress/gutenberg/pull/25162))
+-   Embed Block: Fix crash in isFromWordPress helper if preview.html is false. ([25140](https://github.com/WordPress/gutenberg/pull/25140))
+-   Cover block: fix width regression. ([25103](https://github.com/WordPress/gutenberg/pull/25103))
+-   Navigation block: reduce subnavigation arrow padding. ([24200](https://github.com/WordPress/gutenberg/pull/24200))
+-   GlobalStyles: fix nested features algorithm. ([25215](https://github.com/WordPress/gutenberg/pull/25215))
+-   GlobalStyles: fix settings name. ([25040](https://github.com/WordPress/gutenberg/pull/25040))
+-   Widgets screen: convert the toolbar to ARIA toolbar. ([25111](https://github.com/WordPress/gutenberg/pull/25111))
+-   Widgets screen: add labels for settings and close button. ([25101](https://github.com/WordPress/gutenberg/pull/25101))
+-   Navigation screen: fix creating Navigation from pages or menu with HTML in title. ([24673](https://github.com/WordPress/gutenberg/pull/24673))
+-   Element: add and upgrade @types/{react,react-dom} dependencies. ([25086](https://github.com/WordPress/gutenberg/pull/25086))
+-   Add safeguard to AuthorSelect component until authors are fetched. ([25214](https://github.com/WordPress/gutenberg/pull/25214))
+-   Fix PHP error when users don't have access to the Appearance menu. ([25073](https://github.com/WordPress/gutenberg/pull/25073))
+-   Polish horizontal movers. ([25037](https://github.com/WordPress/gutenberg/pull/25037))
+-   Fix PHP Notice: Check that the `query` arg exists before using it. ([25006](https://github.com/WordPress/gutenberg/pull/25006))
+-   Fix gradient swatches stacking badly with scrollbar. ([25002](https://github.com/WordPress/gutenberg/pull/25002))
+-   Fix unlinked padding controls JS error. ([25000](https://github.com/WordPress/gutenberg/pull/25000))
+-   Show external icon on help button. ([24622](https://github.com/WordPress/gutenberg/pull/24622))
+-   Check if block attributes exist before splitting. ([25229](https://github.com/WordPress/gutenberg/pull/25229))
+-   Revert "InnerBlocks: Introduce prop to specify render callback for each block.". ([25196](https://github.com/WordPress/gutenberg/pull/25196))
+-   Core Data: Bring back support for nested `_fields` values. ([25083](https://github.com/WordPress/gutenberg/pull/25083))
+-   Prevent TypeError for projects without a local Prettier configuration. ([25068](https://github.com/WordPress/gutenberg/pull/25068))
+-   Image Block: Properly show errors on drag n drop. ([25004](https://github.com/WordPress/gutenberg/pull/25004))
+-   Add block inspector virtual bubbling option. ([24991](https://github.com/WordPress/gutenberg/pull/24991))
+-   Remove extra slash from `$block_json_file`. ([24829](https://github.com/WordPress/gutenberg/pull/24829))
+-   Inserter: Test to make sure the Inserter menu is closed. ([24610](https://github.com/WordPress/gutenberg/pull/24610))
+-   Date: Update `moment-timezone` package to support string timezones. ([22866](https://github.com/WordPress/gutenberg/pull/22866))
+-   Fix enqueue presets for global styles. ([25286](https://github.com/WordPress/gutenberg/pull/25286))
+-   Fix stylesheet generation. ([25293](https://github.com/WordPress/gutenberg/pull/25293))
 
-- Add readme for UngroupButton. ([25142](https://github.com/WordPress/gutenberg/pull/25142))
-- Fix typo in AlignmentMatrixControl readme. ([25125](https://github.com/WordPress/gutenberg/pull/25125))
-- Update AlignmentMatrixControl readme. ([25124](https://github.com/WordPress/gutenberg/pull/25124))
-- Add preview options component readme. ([25104](https://github.com/WordPress/gutenberg/pull/25104))
-- Add block types list component readme. ([25066](https://github.com/WordPress/gutenberg/pull/25066))
-- Fix typo in block base themes tutorial URL ([25024](https://github.com/WordPress/gutenberg/pull/25024))
-- Update block inspector component readme. ([24998](https://github.com/WordPress/gutenberg/pull/24998))
-- Add block variation picker component readme. ([24995](https://github.com/WordPress/gutenberg/pull/24995))
-- Update Versions in WordPress doc to include 5.5.1. ([24988](https://github.com/WordPress/gutenberg/pull/24988))
-- Add block parent selector component readme. ([24962](https://github.com/WordPress/gutenberg/pull/24962))
-- Add block icon component readme. ([24947](https://github.com/WordPress/gutenberg/pull/24947))
-- Update dev environment setup. ([24871](https://github.com/WordPress/gutenberg/pull/24871))
-- Correct @since version for block parser package. ([24819](https://github.com/WordPress/gutenberg/pull/24819))
-- Add BlockCard component readme. ([25150](https://github.com/WordPress/gutenberg/pull/25150))
-- Fix link to ubuntu docker notes. ([25060](https://github.com/WordPress/gutenberg/pull/25060))
-- Fix/block parent selector component readme. ([24997](https://github.com/WordPress/gutenberg/pull/24997))
-- Update Storybook URL from text to a real link. ([24974](https://github.com/WordPress/gutenberg/pull/24974))
-- Update triage doc to include pull request mentions. ([23105](https://github.com/WordPress/gutenberg/pull/23105))
+### Experiments
 
+-   Group block: add padding support. ([24966](https://github.com/WordPress/gutenberg/pull/24966))
+-   Control the block editor via theme.json:
+    -   support for custom link color. ([25148](https://github.com/WordPress/gutenberg/pull/25148))
+    -   support for custom spacing. ([25141](https://github.com/WordPress/gutenberg/pull/25141))
+    -   support for custom line heights. ([25043](https://github.com/WordPress/gutenberg/pull/25043))
+    -   support for custom font sizes. ([25038](https://github.com/WordPress/gutenberg/pull/25038))
+    -   support for custom gradients. ([24964](https://github.com/WordPress/gutenberg/pull/24964))
+-   Navigation component: composition proposal. ([25057](https://github.com/WordPress/gutenberg/pull/25057))
+-   Replace accessibilityLabel by label on RadioGroup. ([25128](https://github.com/WordPress/gutenberg/pull/25128))
+-   Global styles:
+    -   add sidebar at edit site screen. ([24250](https://github.com/WordPress/gutenberg/pull/24250))
+    -   print minified css. ([24924](https://github.com/WordPress/gutenberg/pull/24924))
+    -   centralize style & support mappings for blocks. ([25185](https://github.com/WordPress/gutenberg/pull/25185))
+    -   centralize client side global styles mappings. ([25056](https://github.com/WordPress/gutenberg/pull/25056))
+    -   set property to change one property accept all lodash paths. ([25159](https://github.com/WordPress/gutenberg/pull/25159))
 
+### Documentation
 
+-   Add readme for UngroupButton. ([25142](https://github.com/WordPress/gutenberg/pull/25142))
+-   Fix typo in AlignmentMatrixControl readme. ([25125](https://github.com/WordPress/gutenberg/pull/25125))
+-   Update AlignmentMatrixControl readme. ([25124](https://github.com/WordPress/gutenberg/pull/25124))
+-   Add preview options component readme. ([25104](https://github.com/WordPress/gutenberg/pull/25104))
+-   Add block types list component readme. ([25066](https://github.com/WordPress/gutenberg/pull/25066))
+-   Fix typo in block base themes tutorial URL ([25024](https://github.com/WordPress/gutenberg/pull/25024))
+-   Update block inspector component readme. ([24998](https://github.com/WordPress/gutenberg/pull/24998))
+-   Add block variation picker component readme. ([24995](https://github.com/WordPress/gutenberg/pull/24995))
+-   Update Versions in WordPress doc to include 5.5.1. ([24988](https://github.com/WordPress/gutenberg/pull/24988))
+-   Add block parent selector component readme. ([24962](https://github.com/WordPress/gutenberg/pull/24962))
+-   Add block icon component readme. ([24947](https://github.com/WordPress/gutenberg/pull/24947))
+-   Update dev environment setup. ([24871](https://github.com/WordPress/gutenberg/pull/24871))
+-   Correct @since version for block parser package. ([24819](https://github.com/WordPress/gutenberg/pull/24819))
+-   Add BlockCard component readme. ([25150](https://github.com/WordPress/gutenberg/pull/25150))
+-   Fix link to ubuntu docker notes. ([25060](https://github.com/WordPress/gutenberg/pull/25060))
+-   Fix/block parent selector component readme. ([24997](https://github.com/WordPress/gutenberg/pull/24997))
+-   Update Storybook URL from text to a real link. ([24974](https://github.com/WordPress/gutenberg/pull/24974))
+-   Update triage doc to include pull request mentions. ([23105](https://github.com/WordPress/gutenberg/pull/23105))
 
 ### Code Quality
 
-- Repo: Add .gitattributes to specify text=auto. ([25224](https://github.com/WordPress/gutenberg/pull/25224))
-- Block Directory: Use Array.filter to implement new/unused block selectors. ([25211](https://github.com/WordPress/gutenberg/pull/25211))
-- Data: Remove flowRight call from metadata reducer. ([25180](https://github.com/WordPress/gutenberg/pull/25180))
-- Data: Add a comment about why we normalize resolvers to objects with fulfill method. ([25102](https://github.com/WordPress/gutenberg/pull/25102))
-- Api-fetch: Remove redundant next parameter from middleware calls. ([25001](https://github.com/WordPress/gutenberg/pull/25001))
-- Api-fetch: Simplify the code that executes the handlers. ([24999](https://github.com/WordPress/gutenberg/pull/24999))
-- Block Supports: Ensure consistent output in different PHP versions. ([25240](https://github.com/WordPress/gutenberg/pull/25240))
-- Add regression end-to-end test for the classic block initialization issue. ([25169](https://github.com/WordPress/gutenberg/pull/25169))
-- Update or retire deprecated colors. ([25213](https://github.com/WordPress/gutenberg/pull/25213)
+-   Repo: Add .gitattributes to specify text=auto. ([25224](https://github.com/WordPress/gutenberg/pull/25224))
+-   Block Directory: Use Array.filter to implement new/unused block selectors. ([25211](https://github.com/WordPress/gutenberg/pull/25211))
+-   Data: Remove flowRight call from metadata reducer. ([25180](https://github.com/WordPress/gutenberg/pull/25180))
+-   Data: Add a comment about why we normalize resolvers to objects with fulfill method. ([25102](https://github.com/WordPress/gutenberg/pull/25102))
+-   Api-fetch: Remove redundant next parameter from middleware calls. ([25001](https://github.com/WordPress/gutenberg/pull/25001))
+-   Api-fetch: Simplify the code that executes the handlers. ([24999](https://github.com/WordPress/gutenberg/pull/24999))
+-   Block Supports: Ensure consistent output in different PHP versions. ([25240](https://github.com/WordPress/gutenberg/pull/25240))
+-   Add regression end-to-end test for the classic block initialization issue. ([25169](https://github.com/WordPress/gutenberg/pull/25169))
+-   Update or retire deprecated colors. ([25213](https://github.com/WordPress/gutenberg/pull/25213)
 
 ### Build Tooling
 
-- Env: Update docker volumes during wp-env start. ([24778](https://github.com/WordPress/gutenberg/pull/24778))
+-   Env: Update docker volumes during wp-env start. ([24778](https://github.com/WordPress/gutenberg/pull/24778))
 
 ### Various
 
-- Update package-lock.json. ([25223](https://github.com/WordPress/gutenberg/pull/25223))
-- Update gradle-node-plugin to use actively maintained fork. ([25208](https://github.com/WordPress/gutenberg/pull/25208))
-- Bump @storybook/react major version. ([25161](https://github.com/WordPress/gutenberg/pull/25161))
-- Use WordPress Menu API. ([25132](https://github.com/WordPress/gutenberg/pull/25132))
-- Update modularity.md. ([25007](https://github.com/WordPress/gutenberg/pull/25007))
-- Remove Embeds for Facebook and Instagram. ([24472](https://github.com/WordPress/gutenberg/pull/24472))
-
-
+-   Update package-lock.json. ([25223](https://github.com/WordPress/gutenberg/pull/25223))
+-   Update gradle-node-plugin to use actively maintained fork. ([25208](https://github.com/WordPress/gutenberg/pull/25208))
+-   Bump @storybook/react major version. ([25161](https://github.com/WordPress/gutenberg/pull/25161))
+-   Use WordPress Menu API. ([25132](https://github.com/WordPress/gutenberg/pull/25132))
+-   Update modularity.md. ([25007](https://github.com/WordPress/gutenberg/pull/25007))
+-   Remove Embeds for Facebook and Instagram. ([24472](https://github.com/WordPress/gutenberg/pull/24472))
 
 = 8.9.3 =
 
-### Bug fixes
+## Changelog
 
-- Show Classic block contents on load (#25162)
+### Bug fixes
 
+-   Show Classic block contents on load (#25162)
 
 = 8.9.2 =
 
-### Bug fixes
+## Changelog
 
-- Block supports: Fix block attribute (style and class) double-encoding (#25079)
-- Restore injection of build_dropdown_script_block_core_categories() (#25026)
-- Block supports: Restore root DOMDocument save (#25028)
+### Bug fixes
 
+-   Block supports: Fix block attribute (style and class) double-encoding (#25079)
+-   Restore injection of build_dropdown_script_block_core_categories() (#25026)
+-   Block supports: Restore root DOMDocument save (#25028)
 
 = 8.9.1 =
 
-### Bug Fixes
+## Changelog
 
+### Bug Fixes
 
 = 8.9.0 =
 
+## Changelog
+
 ### Features
 
 -   Enable the block-based widgets screen. ([24843](https://github.com/WordPress/gutenberg/pull/24843)), ([24087](https://github.com/WordPress/gutenberg/pull/24087))
@@ -17499,3119 +42238,3139 @@ After:
 
 = 8.8.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Copy: Use “block patterns” strings consistently. ([24457](https://github.com/WordPress/gutenberg/pull/24457))
-- Remove hardcoded color from the Recent Comments block. ([24410](https://github.com/WordPress/gutenberg/pull/24410))
-- Remove hardcoded styles from the Separator block. ([24366](https://github.com/WordPress/gutenberg/pull/24366))
-- Block toolbar: Split switcher from mover and simplify styles. ([23971](https://github.com/WordPress/gutenberg/pull/23971))
-- Use the block label API for BlockTitle component. ([23847](https://github.com/WordPress/gutenberg/pull/23847))
-- i18n: Translate all strings inside the Large Header Button block pattern. ([24499](https://github.com/WordPress/gutenberg/pull/24499))
-- Block Movers: Use a bigger mobile touch target. ([23761](https://github.com/WordPress/gutenberg/pull/23761))
-- Block Movers: Use a bigger visible focus rectangle. ([23760](https://github.com/WordPress/gutenberg/pull/23760))
-- Update the top toolbar buttons color. ([24420](https://github.com/WordPress/gutenberg/pull/24420))
-- Remove editor styles from front-facing stylesheets. ([24439](https://github.com/WordPress/gutenberg/pull/24439))
-- Block Toolbar More Menu: Switch back to the vertical ellipsis icon. ([24426](https://github.com/WordPress/gutenberg/pull/24426))
-- Removes hardcoded body text color from some block patterns. ([24424](https://github.com/WordPress/gutenberg/pull/24424))
+-   Copy: Use “block patterns” strings consistently. ([24457](https://github.com/WordPress/gutenberg/pull/24457))
+-   Remove hardcoded color from the Recent Comments block. ([24410](https://github.com/WordPress/gutenberg/pull/24410))
+-   Remove hardcoded styles from the Separator block. ([24366](https://github.com/WordPress/gutenberg/pull/24366))
+-   Block toolbar: Split switcher from mover and simplify styles. ([23971](https://github.com/WordPress/gutenberg/pull/23971))
+-   Use the block label API for BlockTitle component. ([23847](https://github.com/WordPress/gutenberg/pull/23847))
+-   i18n: Translate all strings inside the Large Header Button block pattern. ([24499](https://github.com/WordPress/gutenberg/pull/24499))
+-   Block Movers: Use a bigger mobile touch target. ([23761](https://github.com/WordPress/gutenberg/pull/23761))
+-   Block Movers: Use a bigger visible focus rectangle. ([23760](https://github.com/WordPress/gutenberg/pull/23760))
+-   Update the top toolbar buttons color. ([24420](https://github.com/WordPress/gutenberg/pull/24420))
+-   Remove editor styles from front-facing stylesheets. ([24439](https://github.com/WordPress/gutenberg/pull/24439))
+-   Block Toolbar More Menu: Switch back to the vertical ellipsis icon. ([24426](https://github.com/WordPress/gutenberg/pull/24426))
+-   Removes hardcoded body text color from some block patterns. ([24424](https://github.com/WordPress/gutenberg/pull/24424))
 
 ### New APIs
 
-- Support the default block classnames in dynamic blocks. ([24546](https://github.com/WordPress/gutenberg/pull/24546))
-- Support the custom classnames hook in dynamic blocks. ([24483](https://github.com/WordPress/gutenberg/pull/24483))
-- Stabilize the accessible Toolbar component and deprecate the old usage. ([23316](https://github.com/WordPress/gutenberg/pull/23316))
-- Add store icon to Icons package. ([23867](https://github.com/WordPress/gutenberg/pull/23867))
-- Allow POST requests in <ServerSideRender>. ([21068](https://github.com/WordPress/gutenberg/pull/21068))
-
-### Bug Fixes
-
-- Fix inserter expecting experimental settings to exist in the context. ([24554](https://github.com/WordPress/gutenberg/pull/24554))
-- Fix Image block caption jumps on Safari. ([24540](https://github.com/WordPress/gutenberg/pull/24540))
-- Fix Media Text block: Always show images on top on mobile. ([24468](https://github.com/WordPress/gutenberg/pull/24468))
-- Hide Preview menu on small viewports. ([24537](https://github.com/WordPress/gutenberg/pull/24537))
-- Fix canInsertBlockType selector returning true for blocks that don’t allow inner blocks. ([24514](https://github.com/WordPress/gutenberg/pull/24514))
-- Fix the huge font size on the editor when using the default font sizes presets. ([24492](https://github.com/WordPress/gutenberg/pull/24492))
-- Fix Cover block: Impossible to reset the minimum height value. ([24490](https://github.com/WordPress/gutenberg/pull/24490))
-- Fix Post preview button only appearing on small screens. ([24487](https://github.com/WordPress/gutenberg/pull/24487))
-- Fix deduplication of style rules for server-side block support flags. ([24486](https://github.com/WordPress/gutenberg/pull/24486))
-- Fix the quick inserter results limit for block variations. ([24481](https://github.com/WordPress/gutenberg/pull/24481))
-- Fix tiny editor preview when using Mobile or Tablet options with metaboxes enabled. ([24478](https://github.com/WordPress/gutenberg/pull/24478))
-- Fix custom gradient picker unable to change predefined gradients with hex colors. ([24470](https://github.com/WordPress/gutenberg/pull/24470))
-- Fixing duplicated wp-block classes in block-list. ([24466](https://github.com/WordPress/gutenberg/pull/24466))
-- A11y:
-    - Make the inserter behave as a popover. ([24429](https://github.com/WordPress/gutenberg/pull/24429))
-    - Fix incorrect aria description in the Block List View. ([24533](https://github.com/WordPress/gutenberg/pull/24533))
-    - Add arrow navigation in Preview menu. ([24465](https://github.com/WordPress/gutenberg/pull/24465))
-    - Add arrow navigation to Warning dropdown menu. ([24333](https://github.com/WordPress/gutenberg/pull/24333))
-    - Add an example to the buttons block to avoid focus loss issue. ([24434](https://github.com/WordPress/gutenberg/pull/24434))
-- Fix rendering non-Latin characters on aligned Cover blocks. ([24447](https://github.com/WordPress/gutenberg/pull/24447))
-- Remove --wp-admin-theme-color reference from frontend styles. ([24436](https://github.com/WordPress/gutenberg/pull/24436))
-- Prevent links from being focusable inside the Disabled component. ([24397](https://github.com/WordPress/gutenberg/pull/24397))
-- Image Editing: Fix alignment of aspect-ratio button. ([24343](https://github.com/WordPress/gutenberg/pull/24343))
-- Fix retrying of post-processing of edited images. ([24081](https://github.com/WordPress/gutenberg/pull/24081))
-- Set error state when there is an upload error in during file upload. ([24017](https://github.com/WordPress/gutenberg/pull/24017))
-- Block Directory: Decode entities in block title & description. ([24172](https://github.com/WordPress/gutenberg/pull/24172))
-- Preview menu: Remove redundant “opens in a new tab” hidden text. ([24427](https://github.com/WordPress/gutenberg/pull/24427))
-- Fix uploading PDFs in the File block. ([24318](https://github.com/WordPress/gutenberg/pull/24318))
+-   Support the default block classnames in dynamic blocks. ([24546](https://github.com/WordPress/gutenberg/pull/24546))
+-   Support the custom classnames hook in dynamic blocks. ([24483](https://github.com/WordPress/gutenberg/pull/24483))
+-   Stabilize the accessible Toolbar component and deprecate the old usage. ([23316](https://github.com/WordPress/gutenberg/pull/23316))
+-   Add store icon to Icons package. ([23867](https://github.com/WordPress/gutenberg/pull/23867))
+-   Allow POST requests in <ServerSideRender>. ([21068](https://github.com/WordPress/gutenberg/pull/21068))
+
+### Bug Fixes
+
+-   Fix inserter expecting experimental settings to exist in the context. ([24554](https://github.com/WordPress/gutenberg/pull/24554))
+-   Fix Image block caption jumps on Safari. ([24540](https://github.com/WordPress/gutenberg/pull/24540))
+-   Fix Media Text block: Always show images on top on mobile. ([24468](https://github.com/WordPress/gutenberg/pull/24468))
+-   Hide Preview menu on small viewports. ([24537](https://github.com/WordPress/gutenberg/pull/24537))
+-   Fix canInsertBlockType selector returning true for blocks that don’t allow inner blocks. ([24514](https://github.com/WordPress/gutenberg/pull/24514))
+-   Fix the huge font size on the editor when using the default font sizes presets. ([24492](https://github.com/WordPress/gutenberg/pull/24492))
+-   Fix Cover block: Impossible to reset the minimum height value. ([24490](https://github.com/WordPress/gutenberg/pull/24490))
+-   Fix Post preview button only appearing on small screens. ([24487](https://github.com/WordPress/gutenberg/pull/24487))
+-   Fix deduplication of style rules for server-side block support flags. ([24486](https://github.com/WordPress/gutenberg/pull/24486))
+-   Fix the quick inserter results limit for block variations. ([24481](https://github.com/WordPress/gutenberg/pull/24481))
+-   Fix tiny editor preview when using Mobile or Tablet options with metaboxes enabled. ([24478](https://github.com/WordPress/gutenberg/pull/24478))
+-   Fix custom gradient picker unable to change predefined gradients with hex colors. ([24470](https://github.com/WordPress/gutenberg/pull/24470))
+-   Fixing duplicated wp-block classes in block-list. ([24466](https://github.com/WordPress/gutenberg/pull/24466))
+-   A11y:
+    -   Make the inserter behave as a popover. ([24429](https://github.com/WordPress/gutenberg/pull/24429))
+    -   Fix incorrect aria description in the Block List View. ([24533](https://github.com/WordPress/gutenberg/pull/24533))
+    -   Add arrow navigation in Preview menu. ([24465](https://github.com/WordPress/gutenberg/pull/24465))
+    -   Add arrow navigation to Warning dropdown menu. ([24333](https://github.com/WordPress/gutenberg/pull/24333))
+    -   Add an example to the buttons block to avoid focus loss issue. ([24434](https://github.com/WordPress/gutenberg/pull/24434))
+-   Fix rendering non-Latin characters on aligned Cover blocks. ([24447](https://github.com/WordPress/gutenberg/pull/24447))
+-   Remove --wp-admin-theme-color reference from frontend styles. ([24436](https://github.com/WordPress/gutenberg/pull/24436))
+-   Prevent links from being focusable inside the Disabled component. ([24397](https://github.com/WordPress/gutenberg/pull/24397))
+-   Image Editing: Fix alignment of aspect-ratio button. ([24343](https://github.com/WordPress/gutenberg/pull/24343))
+-   Fix retrying of post-processing of edited images. ([24081](https://github.com/WordPress/gutenberg/pull/24081))
+-   Set error state when there is an upload error in during file upload. ([24017](https://github.com/WordPress/gutenberg/pull/24017))
+-   Block Directory: Decode entities in block title & description. ([24172](https://github.com/WordPress/gutenberg/pull/24172))
+-   Preview menu: Remove redundant “opens in a new tab” hidden text. ([24427](https://github.com/WordPress/gutenberg/pull/24427))
+-   Fix uploading PDFs in the File block. ([24318](https://github.com/WordPress/gutenberg/pull/24318))
 
 ### Experiments
 
-- InnerBlocks: Introduce prop to specify render callback for each block. ([24232](https://github.com/WordPress/gutenberg/pull/24232))
-- Navigation:
-    - Display children of inner block controllers in the block navigator. ([24083](https://github.com/WordPress/gutenberg/pull/24083))
-    - Add font-size support to the the Navigation block. ([24531](https://github.com/WordPress/gutenberg/pull/24531))
-- Template Parts and saving flow:
-    - Move the title to the block toolbar. ([24450](https://github.com/WordPress/gutenberg/pull/24450))
-    - Fix Template Part renaming error. ([24500](https://github.com/WordPress/gutenberg/pull/24500))
-    - Fix Site Title Save Bug. ([24302](https://github.com/WordPress/gutenberg/pull/24302))
-- Post Blocks:
-    - Post Tags block: Fix bug where no tags are rendered. ([24082](https://github.com/WordPress/gutenberg/pull/24082))
-    - Post Tags block: Support color, font-size and line-height customization. ([24069](https://github.com/WordPress/gutenberg/pull/24069))
-- Full Site Editing:
-    - Load php files only if experiment is enabled. ([24182](https://github.com/WordPress/gutenberg/pull/24182))
-- Global Styles:
-    - Consider any user changes to global styles as publishable. ([24293](https://github.com/WordPress/gutenberg/pull/24293))
-    - Add support for more style properties in the global context. ([24298](https://github.com/WordPress/gutenberg/pull/24298))
-- Widgets screen:
-    - Refactor the widgets screen to rely on dedicated endpoints. ([24290](https://github.com/WordPress/gutenberg/pull/24290))
-    - Make the list of widgets excluded from the legacy widget block extensible via a filter. ([24271](https://github.com/WordPress/gutenberg/pull/24271))
+-   InnerBlocks: Introduce prop to specify render callback for each block. ([24232](https://github.com/WordPress/gutenberg/pull/24232))
+-   Navigation:
+    -   Display children of inner block controllers in the block navigator. ([24083](https://github.com/WordPress/gutenberg/pull/24083))
+    -   Add font-size support to the the Navigation block. ([24531](https://github.com/WordPress/gutenberg/pull/24531))
+-   Template Parts and saving flow:
+    -   Move the title to the block toolbar. ([24450](https://github.com/WordPress/gutenberg/pull/24450))
+    -   Fix Template Part renaming error. ([24500](https://github.com/WordPress/gutenberg/pull/24500))
+    -   Fix Site Title Save Bug. ([24302](https://github.com/WordPress/gutenberg/pull/24302))
+-   Post Blocks:
+    -   Post Tags block: Fix bug where no tags are rendered. ([24082](https://github.com/WordPress/gutenberg/pull/24082))
+    -   Post Tags block: Support color, font-size and line-height customization. ([24069](https://github.com/WordPress/gutenberg/pull/24069))
+-   Full Site Editing:
+    -   Load php files only if experiment is enabled. ([24182](https://github.com/WordPress/gutenberg/pull/24182))
+-   Global Styles:
+    -   Consider any user changes to global styles as publishable. ([24293](https://github.com/WordPress/gutenberg/pull/24293))
+    -   Add support for more style properties in the global context. ([24298](https://github.com/WordPress/gutenberg/pull/24298))
+-   Widgets screen:
+    -   Refactor the widgets screen to rely on dedicated endpoints. ([24290](https://github.com/WordPress/gutenberg/pull/24290))
+    -   Make the list of widgets excluded from the legacy widget block extensible via a filter. ([24271](https://github.com/WordPress/gutenberg/pull/24271))
 
 ### Documentation
 
-- Add undocumented global styles blocks & properties. ([24421](https://github.com/WordPress/gutenberg/pull/24421))
-- Remove “experimental” from title of editor filters. ([24382](https://github.com/WordPress/gutenberg/pull/24382))
-- Add instructions for disabling the Block Directory. ([24357](https://github.com/WordPress/gutenberg/pull/24357))
-- Remove duplicate questions in FAQ. ([24355](https://github.com/WordPress/gutenberg/pull/24355))
-- Indicate custom-fields support is required for registering meta. ([24325](https://github.com/WordPress/gutenberg/pull/24325))
-- Add block directory submission guidelines. ([23545](https://github.com/WordPress/gutenberg/pull/23545))
-- Typos and tweaks: ([24511](https://github.com/WordPress/gutenberg/pull/24511)) (24244) (24491) (24361) (24340)
-- Update the “Create a Block” Tutorial. ([24545](https://github.com/WordPress/gutenberg/pull/24545))
-- Getting started: Add a MAMP section. ([24241](https://github.com/WordPress/gutenberg/pull/24241))
+-   Add undocumented global styles blocks & properties. ([24421](https://github.com/WordPress/gutenberg/pull/24421))
+-   Remove “experimental” from title of editor filters. ([24382](https://github.com/WordPress/gutenberg/pull/24382))
+-   Add instructions for disabling the Block Directory. ([24357](https://github.com/WordPress/gutenberg/pull/24357))
+-   Remove duplicate questions in FAQ. ([24355](https://github.com/WordPress/gutenberg/pull/24355))
+-   Indicate custom-fields support is required for registering meta. ([24325](https://github.com/WordPress/gutenberg/pull/24325))
+-   Add block directory submission guidelines. ([23545](https://github.com/WordPress/gutenberg/pull/23545))
+-   Typos and tweaks: ([24511](https://github.com/WordPress/gutenberg/pull/24511)) (24244) (24491) (24361) (24340)
+-   Update the “Create a Block” Tutorial. ([24545](https://github.com/WordPress/gutenberg/pull/24545))
+-   Getting started: Add a MAMP section. ([24241](https://github.com/WordPress/gutenberg/pull/24241))
 
 ### Code Quality
 
-- Refactor embed block to single block with block variations. ([24090](https://github.com/WordPress/gutenberg/pull/24090))
-- Upgrade React version to 16.13.1. ([21289](https://github.com/WordPress/gutenberg/pull/21289))
-- Update lodash to 4.17.19. ([24401](https://github.com/WordPress/gutenberg/pull/24401))
-- Register the block attributes server-side for blocks with support flags. ([24400](https://github.com/WordPress/gutenberg/pull/24400))
-- Refactor components as functional components:
-    - TimePicker. ([24348](https://github.com/WordPress/gutenberg/pull/24348))
-    - PostTextEditor. ([23897](https://github.com/WordPress/gutenberg/pull/23897))
-    - CalendarEdit. ([23072](https://github.com/WordPress/gutenberg/pull/23072))
-- Remove unnecessary selector from the PostTitle block. ([24418](https://github.com/WordPress/gutenberg/pull/24418))
-- Remove unnecessary ad-hoc class application for dynamic blocks. ([24223](https://github.com/WordPress/gutenberg/pull/24223))
+-   Refactor embed block to single block with block variations. ([24090](https://github.com/WordPress/gutenberg/pull/24090))
+-   Upgrade React version to 16.13.1. ([21289](https://github.com/WordPress/gutenberg/pull/21289))
+-   Update lodash to 4.17.19. ([24401](https://github.com/WordPress/gutenberg/pull/24401))
+-   Register the block attributes server-side for blocks with support flags. ([24400](https://github.com/WordPress/gutenberg/pull/24400))
+-   Refactor components as functional components:
+    -   TimePicker. ([24348](https://github.com/WordPress/gutenberg/pull/24348))
+    -   PostTextEditor. ([23897](https://github.com/WordPress/gutenberg/pull/23897))
+    -   CalendarEdit. ([23072](https://github.com/WordPress/gutenberg/pull/23072))
+-   Remove unnecessary selector from the PostTitle block. ([24418](https://github.com/WordPress/gutenberg/pull/24418))
+-   Remove unnecessary ad-hoc class application for dynamic blocks. ([24223](https://github.com/WordPress/gutenberg/pull/24223))
 
 ### Build Tooling
 
-- Run wp-env start before PHP unit tests in package scripts. ([23797](https://github.com/WordPress/gutenberg/pull/23797))
-- Upgrade eslint-plugin-jsdoc to latest version. ([24586](https://github.com/WordPress/gutenberg/pull/24586))
-- Add full parameters for emulateNetworkConditions. ([24144](https://github.com/WordPress/gutenberg/pull/24144))
-- Add an end-to-end regression test for the “Browse All” inserter button. ([24396](https://github.com/WordPress/gutenberg/pull/24396))
-
+-   Run wp-env start before PHP unit tests in package scripts. ([23797](https://github.com/WordPress/gutenberg/pull/23797))
+-   Upgrade eslint-plugin-jsdoc to latest version. ([24586](https://github.com/WordPress/gutenberg/pull/24586))
+-   Add full parameters for emulateNetworkConditions. ([24144](https://github.com/WordPress/gutenberg/pull/24144))
+-   Add an end-to-end regression test for the “Browse All” inserter button. ([24396](https://github.com/WordPress/gutenberg/pull/24396))
 
 = 8.7.1 =
 
-###  Bug Fixes
+## Changelog
 
- - Block Supports: Add missing UTF-8 conversion.
- - File block: Fix upload pdf file using Upload button but can using Media Library link.
+### Bug Fixes
 
+-   Block Supports: Add missing UTF-8 conversion.
+-   File block: Fix upload pdf file using Upload button but can using Media Library link.
 
 = 8.7.0 =
 
+## Changelog
+
 ### Enhancements
 
-*   Make "Attempt Block Recovery" the default option of block invalidation. ([24263](https://github.com/WordPress/gutenberg/pull/24263))
-*   Add a block example to the Buttons block. ([24249](https://github.com/WordPress/gutenberg/pull/24249))
-*   Make the padding for the nav block inserter content the same for all sides. ([24084](https://github.com/WordPress/gutenberg/pull/24084))
-*   Improve margin within the media replace popover. ([24309](https://github.com/WordPress/gutenberg/pull/24309))
-*   Move "Convert to regular blocks" button to the reusable block toolbar. ([24066](https://github.com/WordPress/gutenberg/pull/24066))
-*   Consistently autosave edits. ([23962](https://github.com/WordPress/gutenberg/pull/23962))
-*   Use Post Type label for Document tab in Settings Header. ([17311](https://github.com/WordPress/gutenberg/pull/17311))
-*   Update the Group block description. ([24297](https://github.com/WordPress/gutenberg/pull/24297))
-*   Remove bottom margin of components dropdown menu item. ([24227](https://github.com/WordPress/gutenberg/pull/24227))
-*   Core Block Patterns improvements:
-    *   Adds "Heading and paragraph" pattern. ([24143](https://github.com/WordPress/gutenberg/pull/24143))
-    *   Updates "Large header and a paragraph" pattern. ([24142](https://github.com/WordPress/gutenberg/pull/24142))
-    *   Updates the "Large header" pattern. ([24141](https://github.com/WordPress/gutenberg/pull/24141))
-    *   Updates the "Quote" pattern. ([24140](https://github.com/WordPress/gutenberg/pull/24140))
-    *   Updates "Two images" pattern. ([24139](https://github.com/WordPress/gutenberg/pull/24139)) ([23856](https://github.com/WordPress/gutenberg/pull/23856))
-    *   Updates "Three columns of text with buttons" pattern. ([24138](https://github.com/WordPress/gutenberg/pull/24138))
-    *   Updates "Three buttons" pattern. ([24137](https://github.com/WordPress/gutenberg/pull/24137))
-    *   Updates "Two buttons" pattern. ([24136](https://github.com/WordPress/gutenberg/pull/24136))
-    *   Updates '"wo columns of text" pattern. ([24135](https://github.com/WordPress/gutenberg/pull/24135))
-    *   Update "Two columns of text with images" pattern. ([24134](https://github.com/WordPress/gutenberg/pull/24134))
-    *   Update the "Large header and button" block pattern. ([24177](https://github.com/WordPress/gutenberg/pull/24177))
-*   Block Directory: Use local assets with automatic asset detection. ([24117](https://github.com/WordPress/gutenberg/pull/24117))
+-   Make "Attempt Block Recovery" the default option of block invalidation. ([24263](https://github.com/WordPress/gutenberg/pull/24263))
+-   Add a block example to the Buttons block. ([24249](https://github.com/WordPress/gutenberg/pull/24249))
+-   Make the padding for the nav block inserter content the same for all sides. ([24084](https://github.com/WordPress/gutenberg/pull/24084))
+-   Improve margin within the media replace popover. ([24309](https://github.com/WordPress/gutenberg/pull/24309))
+-   Move "Convert to regular blocks" button to the reusable block toolbar. ([24066](https://github.com/WordPress/gutenberg/pull/24066))
+-   Consistently autosave edits. ([23962](https://github.com/WordPress/gutenberg/pull/23962))
+-   Use Post Type label for Document tab in Settings Header. ([17311](https://github.com/WordPress/gutenberg/pull/17311))
+-   Update the Group block description. ([24297](https://github.com/WordPress/gutenberg/pull/24297))
+-   Remove bottom margin of components dropdown menu item. ([24227](https://github.com/WordPress/gutenberg/pull/24227))
+-   Core Block Patterns improvements:
+    -   Adds "Heading and paragraph" pattern. ([24143](https://github.com/WordPress/gutenberg/pull/24143))
+    -   Updates "Large header and a paragraph" pattern. ([24142](https://github.com/WordPress/gutenberg/pull/24142))
+    -   Updates the "Large header" pattern. ([24141](https://github.com/WordPress/gutenberg/pull/24141))
+    -   Updates the "Quote" pattern. ([24140](https://github.com/WordPress/gutenberg/pull/24140))
+    -   Updates "Two images" pattern. ([24139](https://github.com/WordPress/gutenberg/pull/24139)) ([23856](https://github.com/WordPress/gutenberg/pull/23856))
+    -   Updates "Three columns of text with buttons" pattern. ([24138](https://github.com/WordPress/gutenberg/pull/24138))
+    -   Updates "Three buttons" pattern. ([24137](https://github.com/WordPress/gutenberg/pull/24137))
+    -   Updates "Two buttons" pattern. ([24136](https://github.com/WordPress/gutenberg/pull/24136))
+    -   Updates '"wo columns of text" pattern. ([24135](https://github.com/WordPress/gutenberg/pull/24135))
+    -   Update "Two columns of text with images" pattern. ([24134](https://github.com/WordPress/gutenberg/pull/24134))
+    -   Update the "Large header and button" block pattern. ([24177](https://github.com/WordPress/gutenberg/pull/24177))
+-   Block Directory: Use local assets with automatic asset detection. ([24117](https://github.com/WordPress/gutenberg/pull/24117))
 
 ### New APIs
 
-*   Add support for delete operations to `@wordpress/core-data` entities. ([21557](https://github.com/WordPress/gutenberg/pull/21557))
-*   Add server-side handling for the block 'align' supports flag. ([24122](https://github.com/WordPress/gutenberg/pull/24122))
-*   Add isDestructive style to Button. ([22921](https://github.com/WordPress/gutenberg/pull/22921))
-*   @wordpress/create-block: Enable loading translations for created blocks. ([24125](https://github.com/WordPress/gutenberg/pull/24125))
-
-### Bug Fixes
-
-*   Fix html mode for non light blocks. ([24335](https://github.com/WordPress/gutenberg/pull/24335))
-*   Fix block movers overlapping. ([24349](https://github.com/WordPress/gutenberg/pull/24349))
-*   Fix List RichText backward compatibility for multiline root tag. ([24324](https://github.com/WordPress/gutenberg/pull/24324))
-*   Block patterns: Fix translatable strings. ([24317](https://github.com/WordPress/gutenberg/pull/24317))
-*   Preserve the seconds when editing dates using the TimePicker component<span>. (</span>[24305](https://github.com/WordPress/gutenberg/pull/24305)<span>)</span>
-*   A11y:
-    *   Announce block selection changes manually on windows. ([24299](https://github.com/WordPress/gutenberg/pull/24299))
-    *   Fix arrow navigation in the LinkControl suggestions. ([24222](https://github.com/WordPress/gutenberg/pull/24222))
-    *   Avoid focus style from being cut on the categories panel. ([24197](https://github.com/WordPress/gutenberg/pull/24197))
-    *   Avoid focusing the block selection button on each render. ([24195](https://github.com/WordPress/gutenberg/pull/24195))
-    *   Avoid rendering the clipboard textarea inside the button. ([24194](https://github.com/WordPress/gutenberg/pull/24194))
-    *   Fix missing focus outline in Add New Tag. ([24187](https://github.com/WordPress/gutenberg/pull/24187))
-    *   Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover. ([24186](https://github.com/WordPress/gutenberg/pull/24186))
-    *   Fix the gallery buttons focus style. ([24157](https://github.com/WordPress/gutenberg/pull/24157))
-    *   Update the editor landmark regions. ([24196](https://github.com/WordPress/gutenberg/pull/24196))
-    *   Mover control: Remove drag cursor. ([23759](https://github.com/WordPress/gutenberg/pull/23759))
-*   <span>Fix block insertion place after clicking Browse All in the inline inserter. (</span>[24285](https://github.com/WordPress/gutenberg/pull/24285)<span>)</span>
-*   Fix last.fm svg icon alignment. ([24278](https://github.com/WordPress/gutenberg/pull/24278))
-*   Cover: Fix padding controls showing null units. ([24251](https://github.com/WordPress/gutenberg/pull/24251))
-*   Consistently show the default style variation if none provided. ([24217](https://github.com/WordPress/gutenberg/pull/24217))
-*   Fix gradient RGBA/HSLA inputs' width. ([24214](https://github.com/WordPress/gutenberg/pull/24214))
-*   <span>Popover: Fix arrow color to match content border color. (</span>[24208](https://github.com/WordPress/gutenberg/pull/24208)<span>)</span>
-*   <span>Fix dragging multiple blocks dow</span>nw<span>ards resulted in blocks inserted in wrong position. (</span>[24183](https://github.com/WordPress/gutenberg/pull/24183)<span>)</span>
-*   <span>Fix Button block colors in the editor. (</span>[24153](https://github.com/WordPress/gutenberg/pull/24153)<span>)</span>
-*   Fix the save shortcut in the code editor. ([24151](https://github.com/WordPress/gutenberg/pull/24151))
-*   Fix PHP notices when a block hasn't declared 'supports'. ([24131](https://github.com/WordPress/gutenberg/pull/24131))
-*   Fix Block Directory icons<span>. (</span>[24086](https://github.com/WordPress/gutenberg/pull/24086)<span>)</span>
-*   Block Breadcrumb: Fix arrow direction in RTL. ([24074](https://github.com/WordPress/gutenberg/pull/24074))
-*   i18N:
-    *   Fix missing plural forms for block related strings. ([24071](https://github.com/WordPress/gutenberg/pull/24071))
-    *   Merge similar translation strings in the RSS block. ([24159](https://github.com/WordPress/gutenberg/pull/24159))
-    *   Merge similar translation strings - tables. ([24169](https://github.com/WordPress/gutenberg/pull/24169))
-*   <span>useBlockSync: Fix race condition when onChange callback changes. (</span>[24012](https://github.com/WordPress/gutenberg/pull/24012)<span>)</span>
-*   Allow enter to insert line breaks even if template is locked. ([23330](https://github.com/WordPress/gutenberg/pull/23330))
+-   Add support for delete operations to `@wordpress/core-data` entities. ([21557](https://github.com/WordPress/gutenberg/pull/21557))
+-   Add server-side handling for the block 'align' supports flag. ([24122](https://github.com/WordPress/gutenberg/pull/24122))
+-   Add isDestructive style to Button. ([22921](https://github.com/WordPress/gutenberg/pull/22921))
+-   @wordpress/create-block: Enable loading translations for created blocks. ([24125](https://github.com/WordPress/gutenberg/pull/24125))
+
+### Bug Fixes
+
+-   Fix html mode for non light blocks. ([24335](https://github.com/WordPress/gutenberg/pull/24335))
+-   Fix block movers overlapping. ([24349](https://github.com/WordPress/gutenberg/pull/24349))
+-   Fix List RichText backward compatibility for multiline root tag. ([24324](https://github.com/WordPress/gutenberg/pull/24324))
+-   Block patterns: Fix translatable strings. ([24317](https://github.com/WordPress/gutenberg/pull/24317))
+-   Preserve the seconds when editing dates using the TimePicker component<span>. (</span>[24305](https://github.com/WordPress/gutenberg/pull/24305)<span>)</span>
+-   A11y:
+    -   Announce block selection changes manually on windows. ([24299](https://github.com/WordPress/gutenberg/pull/24299))
+    -   Fix arrow navigation in the LinkControl suggestions. ([24222](https://github.com/WordPress/gutenberg/pull/24222))
+    -   Avoid focus style from being cut on the categories panel. ([24197](https://github.com/WordPress/gutenberg/pull/24197))
+    -   Avoid focusing the block selection button on each render. ([24195](https://github.com/WordPress/gutenberg/pull/24195))
+    -   Avoid rendering the clipboard textarea inside the button. ([24194](https://github.com/WordPress/gutenberg/pull/24194))
+    -   Fix missing focus outline in Add New Tag. ([24187](https://github.com/WordPress/gutenberg/pull/24187))
+    -   Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover. ([24186](https://github.com/WordPress/gutenberg/pull/24186))
+    -   Fix the gallery buttons focus style. ([24157](https://github.com/WordPress/gutenberg/pull/24157))
+    -   Update the editor landmark regions. ([24196](https://github.com/WordPress/gutenberg/pull/24196))
+    -   Mover control: Remove drag cursor. ([23759](https://github.com/WordPress/gutenberg/pull/23759))
+-   <span>Fix block insertion place after clicking Browse All in the inline inserter. (</span>[24285](https://github.com/WordPress/gutenberg/pull/24285)<span>)</span>
+-   Fix last.fm svg icon alignment. ([24278](https://github.com/WordPress/gutenberg/pull/24278))
+-   Cover: Fix padding controls showing null units. ([24251](https://github.com/WordPress/gutenberg/pull/24251))
+-   Consistently show the default style variation if none provided. ([24217](https://github.com/WordPress/gutenberg/pull/24217))
+-   Fix gradient RGBA/HSLA inputs' width. ([24214](https://github.com/WordPress/gutenberg/pull/24214))
+-   <span>Popover: Fix arrow color to match content border color. (</span>[24208](https://github.com/WordPress/gutenberg/pull/24208)<span>)</span>
+-   <span>Fix dragging multiple blocks dow</span>nw<span>ards resulted in blocks inserted in wrong position. (</span>[24183](https://github.com/WordPress/gutenberg/pull/24183)<span>)</span>
+-   <span>Fix Button block colors in the editor. (</span>[24153](https://github.com/WordPress/gutenberg/pull/24153)<span>)</span>
+-   Fix the save shortcut in the code editor. ([24151](https://github.com/WordPress/gutenberg/pull/24151))
+-   Fix PHP notices when a block hasn't declared 'supports'. ([24131](https://github.com/WordPress/gutenberg/pull/24131))
+-   Fix Block Directory icons<span>. (</span>[24086](https://github.com/WordPress/gutenberg/pull/24086)<span>)</span>
+-   Block Breadcrumb: Fix arrow direction in RTL. ([24074](https://github.com/WordPress/gutenberg/pull/24074))
+-   i18N:
+    -   Fix missing plural forms for block related strings. ([24071](https://github.com/WordPress/gutenberg/pull/24071))
+    -   Merge similar translation strings in the RSS block. ([24159](https://github.com/WordPress/gutenberg/pull/24159))
+    -   Merge similar translation strings - tables. ([24169](https://github.com/WordPress/gutenberg/pull/24169))
+-   <span>useBlockSync: Fix race condition when onChange callback changes. (</span>[24012](https://github.com/WordPress/gutenberg/pull/24012)<span>)</span>
+-   Allow enter to insert line breaks even if template is locked. ([23330](https://github.com/WordPress/gutenberg/pull/23330))
 
 ### Experiments
 
-*   Full Site Editing and Site editor:
-    *   Add alignment support to post content block. ([24014](https://github.com/WordPress/gutenberg/pull/24014)) ([24077](https://github.com/WordPress/gutenberg/pull/24077))
-    *   Post Title Block: Add style attributes. ([24246](https://github.com/WordPress/gutenberg/pull/24246))
-    *   Remove more initial PHP state. ([23775](https://github.com/WordPress/gutenberg/pull/23775))
-    *   Template Part: Improve title editing interactions. ([23661](https://github.com/WordPress/gutenberg/pull/23661))
-    *   Update the Post author, Excerpt and Comment blocks to use lightBlockWrapper. ([24253](https://github.com/WordPress/gutenberg/pull/24253))
-    *   Query blocks: Support wide alignments in the editor. ([24229](https://github.com/WordPress/gutenberg/pull/24229))
-    *   Post Comments Block: add block alignment support. ([24226](https://github.com/WordPress/gutenberg/pull/24226))
-    *   Post Excerpt block: Added icon and description to Post Excerpt block. ([24203](https://github.com/WordPress/gutenberg/pull/24203))
-    *   Post Date block: Added Post Date icon and updated block with icon and desc. ([24178](https://github.com/WordPress/gutenberg/pull/24178)) ([24225](https://github.com/WordPress/gutenberg/pull/24225))
-    *   Post Author block: Added a description. ([24171](https://github.com/WordPress/gutenberg/pull/24171))
-    *   Post Comments Counts: Add style attributes. ([24167](https://github.com/WordPress/gutenberg/pull/24167))
-    *   Post Comments Form: Add style attributes. ([24162](https://github.com/WordPress/gutenberg/pull/24162))
-    *   Post Author and Post Excerpt: change editor selector class. ([24104](https://github.com/WordPress/gutenberg/pull/24104))
-    *   Post Comments block: add style supports for text and background settings. ([24080](https://github.com/WordPress/gutenberg/pull/24080))
-    *   Post excerpt block: Add color, fontSize, lineHeight, and text alignment. ([23945](https://github.com/WordPress/gutenberg/pull/23945))
-    *   Add Post Tags block description and icon. ([23496](https://github.com/WordPress/gutenberg/pull/23496))
-    *   Add a description to the Post Title block. ([23494](https://github.com/WordPress/gutenberg/pull/23494))
-    *   Update Post Author block to use __experimentalColor and __experimentalLineHeight. ([23044](https://github.com/WordPress/gutenberg/pull/23044))
-
-*   Global styles:
-    *   Fix link color style property name in global styles. ([24296](https://github.com/WordPress/gutenberg/pull/24296))
-    *   Fix merge algorithm. ([24294](https://github.com/WordPress/gutenberg/pull/24294))
-*   Navigation Block and screen:
-    *   Fix Navigation Block submenu being overlapped by Cover block overlay. ([24062](https://github.com/WordPress/gutenberg/pull/24062))
-*   APIs:
-    *   Add initial support for themes to control the editor. ([24275](https://github.com/WordPress/gutenberg/pull/24275))
-    *   Prefix useSimulatedMediaQuery __experimental. ([24279](https://github.com/WordPress/gutenberg/pull/24279))
-    *   URLInput Customizable control rendering. ([24115](https://github.com/WordPress/gutenberg/pull/24115))
+-   Full Site Editing and Site editor:
+
+    -   Add alignment support to post content block. ([24014](https://github.com/WordPress/gutenberg/pull/24014)) ([24077](https://github.com/WordPress/gutenberg/pull/24077))
+    -   Post Title Block: Add style attributes. ([24246](https://github.com/WordPress/gutenberg/pull/24246))
+    -   Remove more initial PHP state. ([23775](https://github.com/WordPress/gutenberg/pull/23775))
+    -   Template Part: Improve title editing interactions. ([23661](https://github.com/WordPress/gutenberg/pull/23661))
+    -   Update the Post author, Excerpt and Comment blocks to use lightBlockWrapper. ([24253](https://github.com/WordPress/gutenberg/pull/24253))
+    -   Query blocks: Support wide alignments in the editor. ([24229](https://github.com/WordPress/gutenberg/pull/24229))
+    -   Post Comments Block: add block alignment support. ([24226](https://github.com/WordPress/gutenberg/pull/24226))
+    -   Post Excerpt block: Added icon and description to Post Excerpt block. ([24203](https://github.com/WordPress/gutenberg/pull/24203))
+    -   Post Date block: Added Post Date icon and updated block with icon and desc. ([24178](https://github.com/WordPress/gutenberg/pull/24178)) ([24225](https://github.com/WordPress/gutenberg/pull/24225))
+    -   Post Author block: Added a description. ([24171](https://github.com/WordPress/gutenberg/pull/24171))
+    -   Post Comments Counts: Add style attributes. ([24167](https://github.com/WordPress/gutenberg/pull/24167))
+    -   Post Comments Form: Add style attributes. ([24162](https://github.com/WordPress/gutenberg/pull/24162))
+    -   Post Author and Post Excerpt: change editor selector class. ([24104](https://github.com/WordPress/gutenberg/pull/24104))
+    -   Post Comments block: add style supports for text and background settings. ([24080](https://github.com/WordPress/gutenberg/pull/24080))
+    -   Post excerpt block: Add color, fontSize, lineHeight, and text alignment. ([23945](https://github.com/WordPress/gutenberg/pull/23945))
+    -   Add Post Tags block description and icon. ([23496](https://github.com/WordPress/gutenberg/pull/23496))
+    -   Add a description to the Post Title block. ([23494](https://github.com/WordPress/gutenberg/pull/23494))
+    -   Update Post Author block to use **experimentalColor and **experimentalLineHeight. ([23044](https://github.com/WordPress/gutenberg/pull/23044))
+
+-   Global styles:
+    -   Fix link color style property name in global styles. ([24296](https://github.com/WordPress/gutenberg/pull/24296))
+    -   Fix merge algorithm. ([24294](https://github.com/WordPress/gutenberg/pull/24294))
+-   Navigation Block and screen:
+    -   Fix Navigation Block submenu being overlapped by Cover block overlay. ([24062](https://github.com/WordPress/gutenberg/pull/24062))
+-   APIs:
+    -   Add initial support for themes to control the editor. ([24275](https://github.com/WordPress/gutenberg/pull/24275))
+    -   Prefix useSimulatedMediaQuery \_\_experimental. ([24279](https://github.com/WordPress/gutenberg/pull/24279))
+    -   URLInput Customizable control rendering. ([24115](https://github.com/WordPress/gutenberg/pull/24115))
 
 ### Documentation
 
-*   Update Gutenberg FAQ with more recent information. ([24202](https://github.com/WordPress/gutenberg/pull/24202))
-*   Clarify custom link color documentation for themes. ([24056](https://github.com/WordPress/gutenberg/pull/24056))
-*   Add a link to the WordPress Data guide. ([24327](https://github.com/WordPress/gutenberg/pull/24327))
-*   Document the new block tools theme support and core block patterns. ([24265](https://github.com/WordPress/gutenberg/pull/24265))
-*   Replace the demo link of the Gutenberg Storybook in the documentation. ([24212](https://github.com/WordPress/gutenberg/pull/24212))
-*   Docs: Update default values for Popover props 'noArrow' and 'position'. ([24207](https://github.com/WordPress/gutenberg/pull/24207))
-*   Added missing documentation link for contributor handbook. ([24179](https://github.com/WordPress/gutenberg/pull/24179))
-*   Docs: Convert Block Registration RFC to the Block Metadata document. ([23832](https://github.com/WordPress/gutenberg/pull/23832))
-*   Typos and tweaks: ([23899](https://github.com/WordPress/gutenberg/pull/23899)) ([24057](https://github.com/WordPress/gutenberg/pull/24057)) ([24033](https://github.com/WordPress/gutenberg/pull/24033)) ([24211](https://github.com/WordPress/gutenberg/pull/24211)) ([24100](https://github.com/WordPress/gutenberg/pull/24100))
+-   Update Gutenberg FAQ with more recent information. ([24202](https://github.com/WordPress/gutenberg/pull/24202))
+-   Clarify custom link color documentation for themes. ([24056](https://github.com/WordPress/gutenberg/pull/24056))
+-   Add a link to the WordPress Data guide. ([24327](https://github.com/WordPress/gutenberg/pull/24327))
+-   Document the new block tools theme support and core block patterns. ([24265](https://github.com/WordPress/gutenberg/pull/24265))
+-   Replace the demo link of the Gutenberg Storybook in the documentation. ([24212](https://github.com/WordPress/gutenberg/pull/24212))
+-   Docs: Update default values for Popover props 'noArrow' and 'position'. ([24207](https://github.com/WordPress/gutenberg/pull/24207))
+-   Added missing documentation link for contributor handbook. ([24179](https://github.com/WordPress/gutenberg/pull/24179))
+-   Docs: Convert Block Registration RFC to the Block Metadata document. ([23832](https://github.com/WordPress/gutenberg/pull/23832))
+-   Typos and tweaks: ([23899](https://github.com/WordPress/gutenberg/pull/23899)) ([24057](https://github.com/WordPress/gutenberg/pull/24057)) ([24033](https://github.com/WordPress/gutenberg/pull/24033)) ([24211](https://github.com/WordPress/gutenberg/pull/24211)) ([24100](https://github.com/WordPress/gutenberg/pull/24100))
 
 ### Code Quality
 
-*   Improve rootClientId comparison in useBlockDropZone. ([24307](https://github.com/WordPress/gutenberg/pull/24307))
-*   Clarify wp.blocks.createBlock error message. ([24287](https://github.com/WordPress/gutenberg/pull/24287))
-*   Convert blocks to function component with hooks:
-    *   BlockInvalidWarning. ([24284](https://github.com/WordPress/gutenberg/pull/24284))
-    *   ReusableBlockConvertButton. ([24015](https://github.com/WordPress/gutenberg/pull/24015))
-*   Add missing prop to `WPBlockVariation` type definition. ([24110](https://github.com/WordPress/gutenberg/pull/24110))
-*   Remove deprecated blockType.context support. ([24155](https://github.com/WordPress/gutenberg/pull/24155))
-*   Wrap LinkControlSearchInput in forwardRef. ([24119](https://github.com/WordPress/gutenberg/pull/24119))
+-   Improve rootClientId comparison in useBlockDropZone. ([24307](https://github.com/WordPress/gutenberg/pull/24307))
+-   Clarify wp.blocks.createBlock error message. ([24287](https://github.com/WordPress/gutenberg/pull/24287))
+-   Convert blocks to function component with hooks:
+    -   BlockInvalidWarning. ([24284](https://github.com/WordPress/gutenberg/pull/24284))
+    -   ReusableBlockConvertButton. ([24015](https://github.com/WordPress/gutenberg/pull/24015))
+-   Add missing prop to `WPBlockVariation` type definition. ([24110](https://github.com/WordPress/gutenberg/pull/24110))
+-   Remove deprecated blockType.context support. ([24155](https://github.com/WordPress/gutenberg/pull/24155))
+-   Wrap LinkControlSearchInput in forwardRef. ([24119](https://github.com/WordPress/gutenberg/pull/24119))
 
 ### Build Tooling
 
-*   Perf Tests: Set up branch only once for all test suites. ([24123](https://github.com/WordPress/gutenberg/pull/24123))
-*   Revert "Build: Use `.min.js` suffix for bundled JavaScript". ([24239](https://github.com/WordPress/gutenberg/pull/24239))
-*   Add a Git Diff to the output of the static checks job on failure. ([24154](https://github.com/WordPress/gutenberg/pull/24154))
+-   Perf Tests: Set up branch only once for all test suites. ([24123](https://github.com/WordPress/gutenberg/pull/24123))
+-   Revert "Build: Use `.min.js` suffix for bundled JavaScript". ([24239](https://github.com/WordPress/gutenberg/pull/24239))
+-   Add a Git Diff to the output of the static checks job on failure. ([24154](https://github.com/WordPress/gutenberg/pull/24154))
 
 ### Various
 
-*   Fix intermittent Navigation block test failure. ([24146](https://github.com/WordPress/gutenberg/pull/24146))
-
+-   Fix intermittent Navigation block test failure. ([24146](https://github.com/WordPress/gutenberg/pull/24146))
 
 = 8.6.1 =
 
-### Bug Fixes:
+## Changelog
 
- - Fix the plugin translations.
+### Bug Fixes:
 
+-   Fix the plugin translations.
 
 = 8.6.0 =
 
+## Changelog
+
 ### Features
 
-*   Cover Block: Add video position controls. ([22531](https://github.com/WordPress/gutenberg/pull/22531))
-*   Block pattern updates: _Large header and paragraph,_ _Large header,_ _Text two columns,_ _Three buttons,_ _Two buttons,_ _Quote._ ([23858](https://github.com/WordPress/gutenberg/pull/23858)) ([23857](https://github.com/WordPress/gutenberg/pull/23857)) ([23853](https://github.com/WordPress/gutenberg/pull/23853)) ([23849](https://github.com/WordPress/gutenberg/pull/23849)) ([23848](https://github.com/WordPress/gutenberg/pull/23848)) ([23881](https://github.com/WordPress/gutenberg/pull/23881))
+-   Cover Block: Add video position controls. ([22531](https://github.com/WordPress/gutenberg/pull/22531))
+-   Block pattern updates: _Large header and paragraph,_ _Large header,_ _Text two columns,_ _Three buttons,_ _Two buttons,_ _Quote._ ([23858](https://github.com/WordPress/gutenberg/pull/23858)) ([23857](https://github.com/WordPress/gutenberg/pull/23857)) ([23853](https://github.com/WordPress/gutenberg/pull/23853)) ([23849](https://github.com/WordPress/gutenberg/pull/23849)) ([23848](https://github.com/WordPress/gutenberg/pull/23848)) ([23881](https://github.com/WordPress/gutenberg/pull/23881))
 
 ### Enhancements
 
-*   Editor: Display Site Icon (if one is set) in full-screen mode. ([22952](https://github.com/WordPress/gutenberg/pull/22952))
-*   Block Variations: Add support for finding variations using keywords. ([24040](https://github.com/WordPress/gutenberg/pull/24040))
-*   a11y: Fix radio control in Windows High Contrast mode. ([23706](https://github.com/WordPress/gutenberg/pull/23706))
-*   Classic Block: Move the "convert to blocks" option from menu to own toolbar button. ([23704](https://github.com/WordPress/gutenberg/pull/23704))
-*   a11y: Use composite pattern to improve keyboard navigation on the inserter. ([23610](https://github.com/WordPress/gutenberg/pull/23610))
-*   Date: Add timezone hint to post-scheduling UI. ([23400](https://github.com/WordPress/gutenberg/pull/23400))
-*   Panel: Improve scroll view handling when expanding. ([23327](https://github.com/WordPress/gutenberg/pull/23327)) ([24046](https://github.com/WordPress/gutenberg/pull/24046))
+-   Editor: Display Site Icon (if one is set) in full-screen mode. ([22952](https://github.com/WordPress/gutenberg/pull/22952))
+-   Block Variations: Add support for finding variations using keywords. ([24040](https://github.com/WordPress/gutenberg/pull/24040))
+-   a11y: Fix radio control in Windows High Contrast mode. ([23706](https://github.com/WordPress/gutenberg/pull/23706))
+-   Classic Block: Move the "convert to blocks" option from menu to own toolbar button. ([23704](https://github.com/WordPress/gutenberg/pull/23704))
+-   a11y: Use composite pattern to improve keyboard navigation on the inserter. ([23610](https://github.com/WordPress/gutenberg/pull/23610))
+-   Date: Add timezone hint to post-scheduling UI. ([23400](https://github.com/WordPress/gutenberg/pull/23400))
+-   Panel: Improve scroll view handling when expanding. ([23327](https://github.com/WordPress/gutenberg/pull/23327)) ([24046](https://github.com/WordPress/gutenberg/pull/24046))
 
 ### New APIs
 
-*   Support disabling core block patterns. ([24042](https://github.com/WordPress/gutenberg/pull/24042))
-*   Make the line height and custom units theme support flags consistent and opt-in. ([23964](https://github.com/WordPress/gutenberg/pull/23964)) ([23904](https://github.com/WordPress/gutenberg/pull/23904))
-*   Image: Add the ability for a plugin to disable Image Editor. ([23966](https://github.com/WordPress/gutenberg/pull/23966))
+-   Support disabling core block patterns. ([24042](https://github.com/WordPress/gutenberg/pull/24042))
+-   Make the line height and custom units theme support flags consistent and opt-in. ([23964](https://github.com/WordPress/gutenberg/pull/23964)) ([23904](https://github.com/WordPress/gutenberg/pull/23904))
+-   Image: Add the ability for a plugin to disable Image Editor. ([23966](https://github.com/WordPress/gutenberg/pull/23966))
 
 ### Experiments
 
-*   Site Builder:
-    *   Change references to section back to template part. ([23765](https://github.com/WordPress/gutenberg/pull/23765))
-    *   Post Date Block: Add style attributes and restructure the edit function. ([23931](https://github.com/WordPress/gutenberg/pull/23931))
-    *   Edit Site: Integrate quick inserter. ([23516](https://github.com/WordPress/gutenberg/pull/23516))
-*   Navigation screen and blocks:
-    *   Try: Customizable toolbar contents. ([23613](https://github.com/WordPress/gutenberg/pull/23613))
-    *   Navigation screen: Restore block movers for blocks with just one sibling. ([23680](https://github.com/WordPress/gutenberg/pull/23680))
-    *   Navigation screen: Add error boundary to experimental navigation screen. ([23679](https://github.com/WordPress/gutenberg/pull/23679))
-    *   Navigation screen: Show block appender by default. ([23676](https://github.com/WordPress/gutenberg/pull/23676))
-    *   Block Navigation: Use quick inserter. ([23737](https://github.com/WordPress/gutenberg/pull/23737))
-    *   Navigation <mark>screen: Add .editor-styles-wra</mark>pper. ([23736](https://github.com/WordPress/gutenberg/pull/23736))
-*   Fix Inserter on the widgets screen. ([24045](https://github.com/WordPress/gutenberg/pull/24045))
-
-### Bug Fixes
-
-*   Prevent JavaScript error when using arrow navigation in URLInput. ([24047](https://github.com/WordPress/gutenberg/pull/24047))
-*   a11y: Components: Fix Toolbar arrow key navigation in RTL contexts. ([24043](https://github.com/WordPress/gutenberg/pull/24043))
-*   RichText: Restore aria-multiline. ([24041](https://github.com/WordPress/gutenberg/pull/24041))
-*   a11y: Fix Copy block button focus loss and try to remove the visually hidden textarea. ([24022](https://github.com/WordPress/gutenberg/pull/24022))
-*   Block Patterns: Override patterns that were registered by Core. ([24004](https://github.com/WordPress/gutenberg/pull/24004))
-*   Fix block wrapper selector. ([23991](https://github.com/WordPress/gutenberg/pull/23991))
-*   Fix block icon mouse-out gesture issue. ([23980](https://github.com/WordPress/gutenberg/pull/23980))
-*   Fix components utils export for use-update-effect. ([23969](https://github.com/WordPress/gutenberg/pull/23969))
-*   a11y: Persist tooltips on hover. ([23959](https://github.com/WordPress/gutenberg/pull/23959))
-*   Fix blocks dropping to incorrect position in inner block lists. ([23950](https://github.com/WordPress/gutenberg/pull/23950))
-*   RangeControl: Adapt slider color to color scheme. ([23936](https://github.com/WordPress/gutenberg/pull/23936))
-    *   (JS) Color Values: Rename brand to theme. Add fallback values. ([24059](https://github.com/WordPress/gutenberg/pull/24059))
-*   Prevent content loss after refreshing an editor with unsaved auto-draft post. ([23928](https://github.com/WordPress/gutenberg/pull/23928))
-*   Fix edited Classic block's content deletion when switching to Code editor. ([23927](https://github.com/WordPress/gutenberg/pull/23927))
-*   Fix drag and drop to empty block lists. ([23923](https://github.com/WordPress/gutenberg/pull/23923))
-*   Fix drag and drop for aligned blocks. ([23916](https://github.com/WordPress/gutenberg/pull/23916))
-*   Fix comment capitalization/punctuation. ([23912](https://github.com/WordPress/gutenberg/pull/23912))
-*   Fix block merging regression. ([23901](https://github.com/WordPress/gutenberg/pull/23901))
-*   Inserter: Order quick inserter items by frecency. ([23900](https://github.com/WordPress/gutenberg/pull/23900))
-*   Inserter: Set quick inserter content width to 100% on screens below 782px. ([23896](https://github.com/WordPress/gutenberg/pull/23896))
-*   Autocomplete: Fix closing slash inserter with ESC. ([23859](https://github.com/WordPress/gutenberg/pull/23859))
-*   Inserter: Hide inserter's block preview when searching. ([23827](https://github.com/WordPress/gutenberg/pull/23827))
-*   apiFetch: Fix fetch-all preloading. ([23807](https://github.com/WordPress/gutenberg/pull/23807))
-*   Fix error triggered when a tab is removed from TabPanel component. ([23784](https://github.com/WordPress/gutenberg/pull/23784))
-*   Fix block movers in navigator on experimental navigation page displaying horizontally. ([23779](https://github.com/WordPress/gutenberg/pull/23779))
-*   Search: Fix attribute defaults. ([23777](https://github.com/WordPress/gutenberg/pull/23777))
-*   Apply the reset mixin to the inserter panel. ([23744](https://github.com/WordPress/gutenberg/pull/23744))
-*   Sidebar controls: Add more space for German and other locales. ([23738](https://github.com/WordPress/gutenberg/pull/23738))
-*   Block Library: Standardize post block placeholders. ([23690](https://github.com/WordPress/gutenberg/pull/23690))
-    *   i18n: Block Library: Translate post block placeholders. ([23774](https://github.com/WordPress/gutenberg/pull/23774))
-*   Fix issue where block inserted in wrong place when selection is in nested block list, but root appender is used. ([23668](https://github.com/WordPress/gutenberg/pull/23668))
-*   Fix an issue where dragging while the page has no scrollbar results in a console error. ([23666](https://github.com/WordPress/gutenberg/pull/23666))
-*   Updated styling to match the post editor. ([23525](https://github.com/WordPress/gutenberg/pull/23525))
-*   UnitControl: Fix internal unit parsing to handle incoming unit prop. ([23521](https://github.com/WordPress/gutenberg/pull/23521))
-*   Table block: Fix focus loss in between row/column insertions. ([23508](https://github.com/WordPress/gutenberg/pull/23508))
-*   Editor: Fix block highlight rendering after block is moved. ([23425](https://github.com/WordPress/gutenberg/pull/23425))
-*   Inserter: Fix line to show again. ([20792](https://github.com/WordPress/gutenberg/pull/20792))
-*   Button: Properly handle border radius reset. ([23887](https://github.com/WordPress/gutenberg/pull/23887))
-*   Block Directory: Remove "contact admin" messaging. ([23948](https://github.com/WordPress/gutenberg/pull/23948))
+-   Site Builder:
+    -   Change references to section back to template part. ([23765](https://github.com/WordPress/gutenberg/pull/23765))
+    -   Post Date Block: Add style attributes and restructure the edit function. ([23931](https://github.com/WordPress/gutenberg/pull/23931))
+    -   Edit Site: Integrate quick inserter. ([23516](https://github.com/WordPress/gutenberg/pull/23516))
+-   Navigation screen and blocks:
+    -   Try: Customizable toolbar contents. ([23613](https://github.com/WordPress/gutenberg/pull/23613))
+    -   Navigation screen: Restore block movers for blocks with just one sibling. ([23680](https://github.com/WordPress/gutenberg/pull/23680))
+    -   Navigation screen: Add error boundary to experimental navigation screen. ([23679](https://github.com/WordPress/gutenberg/pull/23679))
+    -   Navigation screen: Show block appender by default. ([23676](https://github.com/WordPress/gutenberg/pull/23676))
+    -   Block Navigation: Use quick inserter. ([23737](https://github.com/WordPress/gutenberg/pull/23737))
+    -   Navigation <mark>screen: Add .editor-styles-wra</mark>pper. ([23736](https://github.com/WordPress/gutenberg/pull/23736))
+-   Fix Inserter on the widgets screen. ([24045](https://github.com/WordPress/gutenberg/pull/24045))
+
+### Bug Fixes
+
+-   Prevent JavaScript error when using arrow navigation in URLInput. ([24047](https://github.com/WordPress/gutenberg/pull/24047))
+-   a11y: Components: Fix Toolbar arrow key navigation in RTL contexts. ([24043](https://github.com/WordPress/gutenberg/pull/24043))
+-   RichText: Restore aria-multiline. ([24041](https://github.com/WordPress/gutenberg/pull/24041))
+-   a11y: Fix Copy block button focus loss and try to remove the visually hidden textarea. ([24022](https://github.com/WordPress/gutenberg/pull/24022))
+-   Block Patterns: Override patterns that were registered by Core. ([24004](https://github.com/WordPress/gutenberg/pull/24004))
+-   Fix block wrapper selector. ([23991](https://github.com/WordPress/gutenberg/pull/23991))
+-   Fix block icon mouse-out gesture issue. ([23980](https://github.com/WordPress/gutenberg/pull/23980))
+-   Fix components utils export for use-update-effect. ([23969](https://github.com/WordPress/gutenberg/pull/23969))
+-   a11y: Persist tooltips on hover. ([23959](https://github.com/WordPress/gutenberg/pull/23959))
+-   Fix blocks dropping to incorrect position in inner block lists. ([23950](https://github.com/WordPress/gutenberg/pull/23950))
+-   RangeControl: Adapt slider color to color scheme. ([23936](https://github.com/WordPress/gutenberg/pull/23936))
+    -   (JS) Color Values: Rename brand to theme. Add fallback values. ([24059](https://github.com/WordPress/gutenberg/pull/24059))
+-   Prevent content loss after refreshing an editor with unsaved auto-draft post. ([23928](https://github.com/WordPress/gutenberg/pull/23928))
+-   Fix edited Classic block's content deletion when switching to Code editor. ([23927](https://github.com/WordPress/gutenberg/pull/23927))
+-   Fix drag and drop to empty block lists. ([23923](https://github.com/WordPress/gutenberg/pull/23923))
+-   Fix drag and drop for aligned blocks. ([23916](https://github.com/WordPress/gutenberg/pull/23916))
+-   Fix comment capitalization/punctuation. ([23912](https://github.com/WordPress/gutenberg/pull/23912))
+-   Fix block merging regression. ([23901](https://github.com/WordPress/gutenberg/pull/23901))
+-   Inserter: Order quick inserter items by frecency. ([23900](https://github.com/WordPress/gutenberg/pull/23900))
+-   Inserter: Set quick inserter content width to 100% on screens below 782px. ([23896](https://github.com/WordPress/gutenberg/pull/23896))
+-   Autocomplete: Fix closing slash inserter with ESC. ([23859](https://github.com/WordPress/gutenberg/pull/23859))
+-   Inserter: Hide inserter's block preview when searching. ([23827](https://github.com/WordPress/gutenberg/pull/23827))
+-   apiFetch: Fix fetch-all preloading. ([23807](https://github.com/WordPress/gutenberg/pull/23807))
+-   Fix error triggered when a tab is removed from TabPanel component. ([23784](https://github.com/WordPress/gutenberg/pull/23784))
+-   Fix block movers in navigator on experimental navigation page displaying horizontally. ([23779](https://github.com/WordPress/gutenberg/pull/23779))
+-   Search: Fix attribute defaults. ([23777](https://github.com/WordPress/gutenberg/pull/23777))
+-   Apply the reset mixin to the inserter panel. ([23744](https://github.com/WordPress/gutenberg/pull/23744))
+-   Sidebar controls: Add more space for German and other locales. ([23738](https://github.com/WordPress/gutenberg/pull/23738))
+-   Block Library: Standardize post block placeholders. ([23690](https://github.com/WordPress/gutenberg/pull/23690))
+    -   i18n: Block Library: Translate post block placeholders. ([23774](https://github.com/WordPress/gutenberg/pull/23774))
+-   Fix issue where block inserted in wrong place when selection is in nested block list, but root appender is used. ([23668](https://github.com/WordPress/gutenberg/pull/23668))
+-   Fix an issue where dragging while the page has no scrollbar results in a console error. ([23666](https://github.com/WordPress/gutenberg/pull/23666))
+-   Updated styling to match the post editor. ([23525](https://github.com/WordPress/gutenberg/pull/23525))
+-   UnitControl: Fix internal unit parsing to handle incoming unit prop. ([23521](https://github.com/WordPress/gutenberg/pull/23521))
+-   Table block: Fix focus loss in between row/column insertions. ([23508](https://github.com/WordPress/gutenberg/pull/23508))
+-   Editor: Fix block highlight rendering after block is moved. ([23425](https://github.com/WordPress/gutenberg/pull/23425))
+-   Inserter: Fix line to show again. ([20792](https://github.com/WordPress/gutenberg/pull/20792))
+-   Button: Properly handle border radius reset. ([23887](https://github.com/WordPress/gutenberg/pull/23887))
+-   Block Directory: Remove "contact admin" messaging. ([23948](https://github.com/WordPress/gutenberg/pull/23948))
 
 ### Performance
 
-*   Optimize more selector calls. ([23930](https://github.com/WordPress/gutenberg/pull/23930))
-*   Performance testing: Cover Site Editor loading time. ([23842](https://github.com/WordPress/gutenberg/pull/23842))
-*   Avoid re-rendering the PostSavedState component on each change. ([23829](https://github.com/WordPress/gutenberg/pull/23829))
-*   Small performance tweaks. ([23825](https://github.com/WordPress/gutenberg/pull/23825))
-*   Env: Only perform expensive install work when required. ([23809](https://github.com/WordPress/gutenberg/pull/23809))
-*   Env: Improve install performance. ([23806](https://github.com/WordPress/gutenberg/pull/23806))
+-   Optimize more selector calls. ([23930](https://github.com/WordPress/gutenberg/pull/23930))
+-   Performance testing: Cover Site Editor loading time. ([23842](https://github.com/WordPress/gutenberg/pull/23842))
+-   Avoid re-rendering the PostSavedState component on each change. ([23829](https://github.com/WordPress/gutenberg/pull/23829))
+-   Small performance tweaks. ([23825](https://github.com/WordPress/gutenberg/pull/23825))
+-   Env: Only perform expensive install work when required. ([23809](https://github.com/WordPress/gutenberg/pull/23809))
+-   Env: Improve install performance. ([23806](https://github.com/WordPress/gutenberg/pull/23806))
 
 ### Documentation
 
-*   Expand and update block-based themes documentation page. ([23750](https://github.com/WordPress/gutenberg/pull/23750))
-*   Docs/update button component props. ([24013](https://github.com/WordPress/gutenberg/pull/24013))
-*   Docs: Update plugin FAQ with versions link. ([24005](https://github.com/WordPress/gutenberg/pull/24005))
-*   Remove the experimental flag from the block patterns documentation. ([23954](https://github.com/WordPress/gutenberg/pull/23954))
-*   Docs: Add links for Create a Block Tutorial. ([23946](https://github.com/WordPress/gutenberg/pull/23946))
-*   Adds basic documentation for the ToolbarButton component. ([23909](https://github.com/WordPress/gutenberg/pull/23909))
-*   Docs: Title and markdown formatting for table. ([23850](https://github.com/WordPress/gutenberg/pull/23850))
-*   Update documentation contributors guide. ([23840](https://github.com/WordPress/gutenberg/pull/23840))
-*   Create new page listing Gutenberg releases in each WordPress version. ([23773](https://github.com/WordPress/gutenberg/pull/23773))
-*   Docs: Clarify the interactive mode for create-block. ([23752](https://github.com/WordPress/gutenberg/pull/23752))
-*   Docs: Add a tutorial on how to create a block-based theme. ([23732](https://github.com/WordPress/gutenberg/pull/23732))
-*   Docs: Move ESNext to JavaScript tutorial. ([23725](https://github.com/WordPress/gutenberg/pull/23725))
-*   Docs: Move DevEnv to own section for documentation. ([23593](https://github.com/WordPress/gutenberg/pull/23593))
-*   Added readme to matrix alignment toolbar. ([23341](https://github.com/WordPress/gutenberg/pull/23341))
-*   Update nested-blocks-inner-blocks.md. ([23935](https://github.com/WordPress/gutenberg/pull/23935))
-*   Update block-registration.md. ([23933](https://github.com/WordPress/gutenberg/pull/23933))
-*   Link to theme-experiments repo in block-based theme documentation. ([23748](https://github.com/WordPress/gutenberg/pull/23748))
-*   Docs: Update device-tests readme with monorepo commands. ([23630](https://github.com/WordPress/gutenberg/pull/23630))
+-   Expand and update block-based themes documentation page. ([23750](https://github.com/WordPress/gutenberg/pull/23750))
+-   Docs/update button component props. ([24013](https://github.com/WordPress/gutenberg/pull/24013))
+-   Docs: Update plugin FAQ with versions link. ([24005](https://github.com/WordPress/gutenberg/pull/24005))
+-   Remove the experimental flag from the block patterns documentation. ([23954](https://github.com/WordPress/gutenberg/pull/23954))
+-   Docs: Add links for Create a Block Tutorial. ([23946](https://github.com/WordPress/gutenberg/pull/23946))
+-   Adds basic documentation for the ToolbarButton component. ([23909](https://github.com/WordPress/gutenberg/pull/23909))
+-   Docs: Title and markdown formatting for table. ([23850](https://github.com/WordPress/gutenberg/pull/23850))
+-   Update documentation contributors guide. ([23840](https://github.com/WordPress/gutenberg/pull/23840))
+-   Create new page listing Gutenberg releases in each WordPress version. ([23773](https://github.com/WordPress/gutenberg/pull/23773))
+-   Docs: Clarify the interactive mode for create-block. ([23752](https://github.com/WordPress/gutenberg/pull/23752))
+-   Docs: Add a tutorial on how to create a block-based theme. ([23732](https://github.com/WordPress/gutenberg/pull/23732))
+-   Docs: Move ESNext to JavaScript tutorial. ([23725](https://github.com/WordPress/gutenberg/pull/23725))
+-   Docs: Move DevEnv to own section for documentation. ([23593](https://github.com/WordPress/gutenberg/pull/23593))
+-   Added readme to matrix alignment toolbar. ([23341](https://github.com/WordPress/gutenberg/pull/23341))
+-   Update nested-blocks-inner-blocks.md. ([23935](https://github.com/WordPress/gutenberg/pull/23935))
+-   Update block-registration.md. ([23933](https://github.com/WordPress/gutenberg/pull/23933))
+-   Link to theme-experiments repo in block-based theme documentation. ([23748](https://github.com/WordPress/gutenberg/pull/23748))
+-   Docs: Update device-tests readme with monorepo commands. ([23630](https://github.com/WordPress/gutenberg/pull/23630))
 
 ### Code Quality
 
-*   Refactor URLPopover to use React Hook. ([23918](https://github.com/WordPress/gutenberg/pull/23918))
-*   Refactor Disabled component to use React Hooks. ([23917](https://github.com/WordPress/gutenberg/pull/23917))
-*   Refactor More block. ([23758](https://github.com/WordPress/gutenberg/pull/23758))
-*   Remove navigation block styles. ([23678](https://github.com/WordPress/gutenberg/pull/23678))
-*   Refactor MediaPlaceholder to function component. ([23671](https://github.com/WordPress/gutenberg/pull/23671))
-*   Remove duplicate selectors. ([23466](https://github.com/WordPress/gutenberg/pull/23466))
-*   Refactor Tag Cloud block to use React Hooks. ([23426](https://github.com/WordPress/gutenberg/pull/23426))
-*   Convert PostSavedState to functional component. ([23038](https://github.com/WordPress/gutenberg/pull/23038))
-*   Types: Improve project setup. ([21581](https://github.com/WordPress/gutenberg/pull/21581))
-*   Refactor ReusableBlockEditPanel to use hooks (and add type info). ([21181](https://github.com/WordPress/gutenberg/pull/21181))
-*   Updates text, buttons colors and lab<mark>e</mark>ls. ([23855](https://github.com/WordPress/gutenberg/pull/23855))
+-   Refactor URLPopover to use React Hook. ([23918](https://github.com/WordPress/gutenberg/pull/23918))
+-   Refactor Disabled component to use React Hooks. ([23917](https://github.com/WordPress/gutenberg/pull/23917))
+-   Refactor More block. ([23758](https://github.com/WordPress/gutenberg/pull/23758))
+-   Remove navigation block styles. ([23678](https://github.com/WordPress/gutenberg/pull/23678))
+-   Refactor MediaPlaceholder to function component. ([23671](https://github.com/WordPress/gutenberg/pull/23671))
+-   Remove duplicate selectors. ([23466](https://github.com/WordPress/gutenberg/pull/23466))
+-   Refactor Tag Cloud block to use React Hooks. ([23426](https://github.com/WordPress/gutenberg/pull/23426))
+-   Convert PostSavedState to functional component. ([23038](https://github.com/WordPress/gutenberg/pull/23038))
+-   Types: Improve project setup. ([21581](https://github.com/WordPress/gutenberg/pull/21581))
+-   Refactor ReusableBlockEditPanel to use hooks (and add type info). ([21181](https://github.com/WordPress/gutenberg/pull/21181))
+-   Updates text, buttons colors and lab<mark>e</mark>ls. ([23855](https://github.com/WordPress/gutenberg/pull/23855))
 
 ### Build Tooling
 
-*   Env:
-    *   Allow wp-env to start without configuration. ([23913](https://github.com/WordPress/gutenberg/pull/23913))
-    *   Add support for different options in each environment. ([22568](https://github.com/WordPress/gutenberg/pull/22568))
-*   Build: Use `.min.js` suffix for bundled JavaScript. ([23926](https://github.com/WordPress/gutenberg/pull/23926))
+-   Env:
+    -   Allow wp-env to start without configuration. ([23913](https://github.com/WordPress/gutenberg/pull/23913))
+    -   Add support for different options in each environment. ([22568](https://github.com/WordPress/gutenberg/pull/22568))
+-   Build: Use `.min.js` suffix for bundled JavaScript. ([23926](https://github.com/WordPress/gutenberg/pull/23926))
 
-*   Try running the performance tests as a GitHub action. ([23818](https://github.com/WordPress/gutenberg/pull/23818))
-*   Improve the performance tests setup. ([23817](https://github.com/WordPress/gutenberg/pull/23817))
-*   Automation:
-    *   Limit tests to not run on documentation-only changes. ([23834](https://github.com/WordPress/gutenberg/pull/23834))
-    *   Add paths-ignore **.md for unit tests checks. ([23845](https://github.com/WordPress/gutenberg/pull/23845))
-    *   Switch workflows to use paths-ignore and **.md. ([23843](https://github.com/WordPress/gutenberg/pull/23843))
+-   Try running the performance tests as a GitHub action. ([23818](https://github.com/WordPress/gutenberg/pull/23818))
+-   Improve the performance tests setup. ([23817](https://github.com/WordPress/gutenberg/pull/23817))
+-   Automation:
+    -   Limit tests to not run on documentation-only changes. ([23834](https://github.com/WordPress/gutenberg/pull/23834))
+    -   Add paths-ignore \*\*.md for unit tests checks. ([23845](https://github.com/WordPress/gutenberg/pull/23845))
+    -   Switch workflows to use paths-ignore and \*\*.md. ([23843](https://github.com/WordPress/gutenberg/pull/23843))
 
 Fix action GitHub action workflow YAML syntax errors. ([23844](https://github.com/WordPress/gutenberg/pull/23844))
 
 ### Various
 
-*   Embeds: Remove unsupported core-embed/hulu block. ([23984](https://github.com/WordPress/gutenberg/pull/23984))
-*   E2E: Remove duplicate blocks in setup file. ([23981](https://github.com/WordPress/gutenberg/pull/23981))
-*   REST API: Check for WP5.5 and skip registering routes. ([23880](https://github.com/WordPress/gutenberg/pull/23880))
-*   LinkControl: Extract reusable parts. ([23869](https://github.com/WordPress/gutenberg/pull/23869))
-*   Updates image size to match columns width. ([23854](https://github.com/WordPress/gutenberg/pull/23854))
-*   InputControl: Add prefix prop. ([23824](https://github.com/WordPress/gutenberg/pull/23824))
-*   Block Navigation: Change the visible labels for "Block navigation" to "List view". ([23796](https://github.com/WordPress/gutenberg/pull/23796))
-*   Site Tagline Block. ([23788](https://github.com/WordPress/gutenberg/pull/23788))
-*   Image Editor: When editing, pass the edited image src. ([23703](https://github.com/WordPress/gutenberg/pull/23703))
-*   Replace SEO settings nofollow toggle with rel text widget. ([23682](https://github.com/WordPress/gutenberg/pull/23682))
-*   Use global registry on the experimental navigation screen. ([23675](https://github.com/WordPress/gutenberg/pull/23675))
-*   Env: Mark breaking change in changelog. ([23776](https://github.com/WordPress/gutenberg/pull/23776))
-*   Cancel previous running workflows when a new commit is made. ([23587](https://github.com/WordPress/gutenberg/pull/23587))
-*   Add title to image and video selection sheets. ([23083](https://github.com/WordPress/gutenberg/pull/23083))
-*   Site Title: Add support settings for colors, fonts, and line height. ([23007](https://github.com/WordPress/gutenberg/pull/23007))
-*   Add fix to make inputs of type email return true from isTextField. ([21162](https://github.com/WordPress/gutenberg/pull/21162))
-*   Full Site Editing: Add a Site Logo block. ([18811](https://github.com/WordPress/gutenberg/pull/18811))
-
+-   Embeds: Remove unsupported core-embed/hulu block. ([23984](https://github.com/WordPress/gutenberg/pull/23984))
+-   E2E: Remove duplicate blocks in setup file. ([23981](https://github.com/WordPress/gutenberg/pull/23981))
+-   REST API: Check for WP5.5 and skip registering routes. ([23880](https://github.com/WordPress/gutenberg/pull/23880))
+-   LinkControl: Extract reusable parts. ([23869](https://github.com/WordPress/gutenberg/pull/23869))
+-   Updates image size to match columns width. ([23854](https://github.com/WordPress/gutenberg/pull/23854))
+-   InputControl: Add prefix prop. ([23824](https://github.com/WordPress/gutenberg/pull/23824))
+-   Block Navigation: Change the visible labels for "Block navigation" to "List view". ([23796](https://github.com/WordPress/gutenberg/pull/23796))
+-   Site Tagline Block. ([23788](https://github.com/WordPress/gutenberg/pull/23788))
+-   Image Editor: When editing, pass the edited image src. ([23703](https://github.com/WordPress/gutenberg/pull/23703))
+-   Replace SEO settings nofollow toggle with rel text widget. ([23682](https://github.com/WordPress/gutenberg/pull/23682))
+-   Use global registry on the experimental navigation screen. ([23675](https://github.com/WordPress/gutenberg/pull/23675))
+-   Env: Mark breaking change in changelog. ([23776](https://github.com/WordPress/gutenberg/pull/23776))
+-   Cancel previous running workflows when a new commit is made. ([23587](https://github.com/WordPress/gutenberg/pull/23587))
+-   Add title to image and video selection sheets. ([23083](https://github.com/WordPress/gutenberg/pull/23083))
+-   Site Title: Add support settings for colors, fonts, and line height. ([23007](https://github.com/WordPress/gutenberg/pull/23007))
+-   Add fix to make inputs of type email return true from isTextField. ([21162](https://github.com/WordPress/gutenberg/pull/21162))
+-   Full Site Editing: Add a Site Logo block. ([18811](https://github.com/WordPress/gutenberg/pull/18811))
 
 = 8.5.1 =
 
-### Bug Fixes
+## Changelog
 
- - Improve the performance of the Site builder page.
- - Load external images if local images not present.
+### Bug Fixes
 
+-   Improve the performance of the Site builder page.
+-   Load external images if local images not present.
 
 = 8.5.0 =
 
+## Changelog
+
 ### Features
 
-*   A11y: Add an option to keep the caret inside blocks in edit mode. ([23546](https://github.com/WordPress/gutenberg/pull/23546))
-*   Add anchor/id support to all static blocks. ([23197](https://github.com/WordPress/gutenberg/pull/23197))
+-   A11y: Add an option to keep the caret inside blocks in edit mode. ([23546](https://github.com/WordPress/gutenberg/pull/23546))
+-   Add anchor/id support to all static blocks. ([23197](https://github.com/WordPress/gutenberg/pull/23197))
 
 ### Enhancements
 
-*   Add an edit button to the gallery images. ([23554](https://github.com/WordPress/gutenberg/pull/23554))
-*   Image block: Allow uploading external image if image host allows it. ([23565](https://github.com/WordPress/gutenberg/pull/23565))
-*   Drag And Drop:
-    *   Enable for multi selection. ([23477](https://github.com/WordPress/gutenberg/pull/23477))
-    *   Improve the drag and scroll behavior. ([23082](https://github.com/WordPress/gutenberg/pull/23082)) ([23448](https://github.com/WordPress/gutenberg/pull/23448))
-    *   Don't show a cloned block while dragging. ([23024](https://github.com/WordPress/gutenberg/pull/23024))
-    *   Polish the block drag chip. ([23609](https://github.com/WordPress/gutenberg/pull/23609))
-*   Image editing:
-    *   Move zoom control to toolbar dropdown. ([23677](https://github.com/WordPress/gutenberg/pull/23677))
-    *   Add original aspect to dropdown. ([23659](https://github.com/WordPress/gutenberg/pull/23659))
-    *   Add filter to REST API image edit. ([23539](https://github.com/WordPress/gutenberg/pull/23539))
-    *   Polish zoom slider. ([23418](https://github.com/WordPress/gutenberg/pull/23418))
-    *   Add permission checks to the endpoint. ([23423](https://github.com/WordPress/gutenberg/pull/23423))
-*   Block Directory:
-    *   Return inactive plugins in search results. ([23688](https://github.com/WordPress/gutenberg/pull/23688))
-    *   Use CDN for block directory assets. ([23499](https://github.com/WordPress/gutenberg/pull/23499))
-*   Add line height rule to the post title. ([23656](https://github.com/WordPress/gutenberg/pull/23656))
-*   Avoid ordering block types per frecency inside block categories. ([23643](https://github.com/WordPress/gutenberg/pull/23643))
-*   Polish the document sidebar controls. ([23578](https://github.com/WordPress/gutenberg/pull/23578))
-*   Add modern color scheme support. ([23558](https://github.com/WordPress/gutenberg/pull/23558))
-*   Use a consistent close icon across the UI. ([23551](https://github.com/WordPress/gutenberg/pull/23551))
-*   Redesign the transform menu. ([23028](https://github.com/WordPress/gutenberg/pull/23028)) ([23449](https://github.com/WordPress/gutenberg/pull/23449))
-*   Redesign the canvas inserter. ([22789](https://github.com/WordPress/gutenberg/pull/22789))
-*   Unify tooltip styles. ([23382](https://github.com/WordPress/gutenberg/pull/23382))
-*   Add block variations to the slash inserter. ([23364](https://github.com/WordPress/gutenberg/pull/23364))
-*   Hide the most used blocks by default and add an option to enable it. ([23358](https://github.com/WordPress/gutenberg/pull/23358))
-*   Add reusable block tab to inserter. ([23296](https://github.com/WordPress/gutenberg/pull/23296))
-*   Add keyboard shortcuts for moving blocks. ([23276](https://github.com/WordPress/gutenberg/pull/23276))
-*   Cover block: Don't show the matrix alignment button when no background set. ([23196](https://github.com/WordPress/gutenberg/pull/23196))
-*   Spacer: Show tooltip with height value on resize. ([23077](https://github.com/WordPress/gutenberg/pull/23077))
-*   Improve post publish buttons alignment. ([22390](https://github.com/WordPress/gutenberg/pull/22390)) ([23487](https://github.com/WordPress/gutenberg/pull/23487))
-*   Make Preview and Save Draft buttons use the same style. ([21192](https://github.com/WordPress/gutenberg/pull/21192))
-*   Add unlink URL to buttons block. ([23445](https://github.com/WordPress/gutenberg/pull/23445))
-*   Clean the patterns list to include in core. ([23608](https://github.com/WordPress/gutenberg/pull/23608))
-*   Add pullquote block tranformations. ([23562](https://github.com/WordPress/gutenberg/pull/23562))
-*   Remove block label from child block appender. ([23393](https://github.com/WordPress/gutenberg/pull/23393))
-*   A11y: Move blocks between levels using keyboard. ([22453](https://github.com/WordPress/gutenberg/pull/22453))
+-   Add an edit button to the gallery images. ([23554](https://github.com/WordPress/gutenberg/pull/23554))
+-   Image block: Allow uploading external image if image host allows it. ([23565](https://github.com/WordPress/gutenberg/pull/23565))
+-   Drag And Drop:
+    -   Enable for multi selection. ([23477](https://github.com/WordPress/gutenberg/pull/23477))
+    -   Improve the drag and scroll behavior. ([23082](https://github.com/WordPress/gutenberg/pull/23082)) ([23448](https://github.com/WordPress/gutenberg/pull/23448))
+    -   Don't show a cloned block while dragging. ([23024](https://github.com/WordPress/gutenberg/pull/23024))
+    -   Polish the block drag chip. ([23609](https://github.com/WordPress/gutenberg/pull/23609))
+-   Image editing:
+    -   Move zoom control to toolbar dropdown. ([23677](https://github.com/WordPress/gutenberg/pull/23677))
+    -   Add original aspect to dropdown. ([23659](https://github.com/WordPress/gutenberg/pull/23659))
+    -   Add filter to REST API image edit. ([23539](https://github.com/WordPress/gutenberg/pull/23539))
+    -   Polish zoom slider. ([23418](https://github.com/WordPress/gutenberg/pull/23418))
+    -   Add permission checks to the endpoint. ([23423](https://github.com/WordPress/gutenberg/pull/23423))
+-   Block Directory:
+    -   Return inactive plugins in search results. ([23688](https://github.com/WordPress/gutenberg/pull/23688))
+    -   Use CDN for block directory assets. ([23499](https://github.com/WordPress/gutenberg/pull/23499))
+-   Add line height rule to the post title. ([23656](https://github.com/WordPress/gutenberg/pull/23656))
+-   Avoid ordering block types per frecency inside block categories. ([23643](https://github.com/WordPress/gutenberg/pull/23643))
+-   Polish the document sidebar controls. ([23578](https://github.com/WordPress/gutenberg/pull/23578))
+-   Add modern color scheme support. ([23558](https://github.com/WordPress/gutenberg/pull/23558))
+-   Use a consistent close icon across the UI. ([23551](https://github.com/WordPress/gutenberg/pull/23551))
+-   Redesign the transform menu. ([23028](https://github.com/WordPress/gutenberg/pull/23028)) ([23449](https://github.com/WordPress/gutenberg/pull/23449))
+-   Redesign the canvas inserter. ([22789](https://github.com/WordPress/gutenberg/pull/22789))
+-   Unify tooltip styles. ([23382](https://github.com/WordPress/gutenberg/pull/23382))
+-   Add block variations to the slash inserter. ([23364](https://github.com/WordPress/gutenberg/pull/23364))
+-   Hide the most used blocks by default and add an option to enable it. ([23358](https://github.com/WordPress/gutenberg/pull/23358))
+-   Add reusable block tab to inserter. ([23296](https://github.com/WordPress/gutenberg/pull/23296))
+-   Add keyboard shortcuts for moving blocks. ([23276](https://github.com/WordPress/gutenberg/pull/23276))
+-   Cover block: Don't show the matrix alignment button when no background set. ([23196](https://github.com/WordPress/gutenberg/pull/23196))
+-   Spacer: Show tooltip with height value on resize. ([23077](https://github.com/WordPress/gutenberg/pull/23077))
+-   Improve post publish buttons alignment. ([22390](https://github.com/WordPress/gutenberg/pull/22390)) ([23487](https://github.com/WordPress/gutenberg/pull/23487))
+-   Make Preview and Save Draft buttons use the same style. ([21192](https://github.com/WordPress/gutenberg/pull/21192))
+-   Add unlink URL to buttons block. ([23445](https://github.com/WordPress/gutenberg/pull/23445))
+-   Clean the patterns list to include in core. ([23608](https://github.com/WordPress/gutenberg/pull/23608))
+-   Add pullquote block tranformations. ([23562](https://github.com/WordPress/gutenberg/pull/23562))
+-   Remove block label from child block appender. ([23393](https://github.com/WordPress/gutenberg/pull/23393))
+-   A11y: Move blocks between levels using keyboard. ([22453](https://github.com/WordPress/gutenberg/pull/22453))
 
 ### New APIs
 
-*   Support **orientation** prop in InnerBlocks. ([23416](https://github.com/WordPress/gutenberg/pull/23416))
-*   Support a flexible **useItems** API for the autocompleters API. ([22853](https://github.com/WordPress/gutenberg/pull/22853)) ([23385](https://github.com/WordPress/gutenberg/pull/23385))
-*   Stabilize the image editing REST API endpoint. ([23536](https://github.com/WordPress/gutenberg/pull/23536))
-*   Stabilize the block directory REST API endpoint. ([23528](https://github.com/WordPress/gutenberg/pull/23528))
-*   Add descriptions to Block patterns. ([23070](https://github.com/WordPress/gutenberg/pull/23070))
+-   Support **orientation** prop in InnerBlocks. ([23416](https://github.com/WordPress/gutenberg/pull/23416))
+-   Support a flexible **useItems** API for the autocompleters API. ([22853](https://github.com/WordPress/gutenberg/pull/22853)) ([23385](https://github.com/WordPress/gutenberg/pull/23385))
+-   Stabilize the image editing REST API endpoint. ([23536](https://github.com/WordPress/gutenberg/pull/23536))
+-   Stabilize the block directory REST API endpoint. ([23528](https://github.com/WordPress/gutenberg/pull/23528))
+-   Add descriptions to Block patterns. ([23070](https://github.com/WordPress/gutenberg/pull/23070))
 
 ### Experiments
 
-*   Site Builder:
-    *   Remove the button block appender. ([23436](https://github.com/WordPress/gutenberg/pull/23436))
-    *   Improve the template parts insertion flow. ([23295](https://github.com/WordPress/gutenberg/pull/23295))
-    *   Fix template part resolution for edited files. ([23591](https://github.com/WordPress/gutenberg/pull/23591))
-    *   Fix inspector panels buttons. ([23464](https://github.com/WordPress/gutenberg/pull/23464))
-    *   Add template part block keyword. ([23623](https://github.com/WordPress/gutenberg/pull/23623))
-    *   Allow wide alignment. ([23488](https://github.com/WordPress/gutenberg/pull/23488))
-    *   Remove templateIds state. ([22893](https://github.com/WordPress/gutenberg/pull/22893))
-*   Navigation screen and block:
-    *   Fix saving issues. ([23559](https://github.com/WordPress/gutenberg/pull/23559))
-    *   A11y: Improve keyboard navigation on the Navigation block toolbar. ([23281](https://github.com/WordPress/gutenberg/pull/23281))
-    *   Fix text size no longer overwritten. ([23360](https://github.com/WordPress/gutenberg/pull/23360))
-    *   Adjust Navigation block submenu padding and spacing. ([23380](https://github.com/WordPress/gutenberg/pull/23380))
-    *   Update placeholder label. ([23297](https://github.com/WordPress/gutenberg/pull/23297))
-    *   Hide the block toolbar on the navigation screen. ([23021](https://github.com/WordPress/gutenberg/pull/23021))
-    *   Allow setting up menus that auto add new pages. ([22697](https://github.com/WordPress/gutenberg/pull/22697))
-    *   Allow Search block to be added alongside links. ([22656](https://github.com/WordPress/gutenberg/pull/22656))
-
-### Bug Fixes
-
-*   Block Directory:
-    *   Support .svg extension for results icons. ([23442](https://github.com/WordPress/gutenberg/pull/23442))
-    *   Throw error if we have an issue registering blocks. ([23439](https://github.com/WordPress/gutenberg/pull/23439))
-    *   Remove the overflow on the Add button. ([23409](https://github.com/WordPress/gutenberg/pull/23409))
-    *   Fix double border in block list. ([23625](https://github.com/WordPress/gutenberg/pull/23625))
-*   Fix the upload icon size. ([23553](https://github.com/WordPress/gutenberg/pull/23553))
-*   Allow scrolling over Popovers. ([23696](https://github.com/WordPress/gutenberg/pull/23696))
-*   Fix quote left border color in dark mode. ([23692](https://github.com/WordPress/gutenberg/pull/23692))
-*   Fix empty block list appender visibility on aligned blocks. ([23672](https://github.com/WordPress/gutenberg/pull/23672))
-*   Fix horizontal Block Mover Layout. ([23640](https://github.com/WordPress/gutenberg/pull/23640))
-*   Fix invisible drop target indicator. ([23638](https://github.com/WordPress/gutenberg/pull/23638))
-*   Rich text: Fix soft line break in caption on enter. ([23622](https://github.com/WordPress/gutenberg/pull/23622))
-*   Fix clicking Gallery items buttons on Safari. ([23586](https://github.com/WordPress/gutenberg/pull/23586))
-*   Hide block list appender in a reusable block if it's not being edited. ([23584](https://github.com/WordPress/gutenberg/pull/23584))
-*   Revert "Remove the style CSS class when the default style variation is chosen". ([23548](https://github.com/WordPress/gutenberg/pull/23548))
-*   Classic block:
-    *   Add height: Auto to content wrapper. ([23547](https://github.com/WordPress/gutenberg/pull/23547))
-    *   Add scroll to last edit position. ([23544](https://github.com/WordPress/gutenberg/pull/23544))
-    *   Adjust placement of the toolbar. ([23438](https://github.com/WordPress/gutenberg/pull/23438))
-    *   Prevent content loss by regularly dispatching changes. ([23408](https://github.com/WordPress/gutenberg/pull/23408))
-    *   Fix undo keyboard shortcut. ([23376](https://github.com/WordPress/gutenberg/pull/23376))
-*   Fix the Gallery images buttons rendering. ([23471](https://github.com/WordPress/gutenberg/pull/23471))
-*   Fix Post title top margin. ([23447](https://github.com/WordPress/gutenberg/pull/23447))
-*   Fix file names generation for edited image files. ([23440](https://github.com/WordPress/gutenberg/pull/23440))
-*   Fix React warning when cropping imùges. ([23432](https://github.com/WordPress/gutenberg/pull/23432))
-*   Polish block moving animation. ([23401](https://github.com/WordPress/gutenberg/pull/23401)) ([22640](https://github.com/WordPress/gutenberg/pull/22640))
-*   Fix small RTL regression in Buttons block. ([23390](https://github.com/WordPress/gutenberg/pull/23390))
-*   Fix centered legacy button. ([23381](https://github.com/WordPress/gutenberg/pull/23381))
-*   Fix React warning while unmounting slots. ([23365](https://github.com/WordPress/gutenberg/pull/23365))
-*   Don't show the "Move to trash" action if the user is not allowed to delete posts. ([23174](https://github.com/WordPress/gutenberg/pull/23174))
-*   add inline font-sizes and colors to the editor for themes that don't enqueue the preset classes. ([22356](https://github.com/WordPress/gutenberg/pull/22356)) ([22668](https://github.com/WordPress/gutenberg/pull/22668)) ([23717](https://github.com/WordPress/gutenberg/pull/23717))
-*   Create Block: Fix missing `scripts` section in scaffolded `package.json`. ([23443](https://github.com/WordPress/gutenberg/pull/23443))
-*   Scripts: Fix build script with style.css files. ([23710](https://github.com/WordPress/gutenberg/pull/23710))
-*   Restore removed props and behavior back to Query Controls. ([23419](https://github.com/WordPress/gutenberg/pull/23419))
-*   Add support for hexadecimal colors in gradient presets. ([23363](https://github.com/WordPress/gutenberg/pull/23363))
+-   Site Builder:
+    -   Remove the button block appender. ([23436](https://github.com/WordPress/gutenberg/pull/23436))
+    -   Improve the template parts insertion flow. ([23295](https://github.com/WordPress/gutenberg/pull/23295))
+    -   Fix template part resolution for edited files. ([23591](https://github.com/WordPress/gutenberg/pull/23591))
+    -   Fix inspector panels buttons. ([23464](https://github.com/WordPress/gutenberg/pull/23464))
+    -   Add template part block keyword. ([23623](https://github.com/WordPress/gutenberg/pull/23623))
+    -   Allow wide alignment. ([23488](https://github.com/WordPress/gutenberg/pull/23488))
+    -   Remove templateIds state. ([22893](https://github.com/WordPress/gutenberg/pull/22893))
+-   Navigation screen and block:
+    -   Fix saving issues. ([23559](https://github.com/WordPress/gutenberg/pull/23559))
+    -   A11y: Improve keyboard navigation on the Navigation block toolbar. ([23281](https://github.com/WordPress/gutenberg/pull/23281))
+    -   Fix text size no longer overwritten. ([23360](https://github.com/WordPress/gutenberg/pull/23360))
+    -   Adjust Navigation block submenu padding and spacing. ([23380](https://github.com/WordPress/gutenberg/pull/23380))
+    -   Update placeholder label. ([23297](https://github.com/WordPress/gutenberg/pull/23297))
+    -   Hide the block toolbar on the navigation screen. ([23021](https://github.com/WordPress/gutenberg/pull/23021))
+    -   Allow setting up menus that auto add new pages. ([22697](https://github.com/WordPress/gutenberg/pull/22697))
+    -   Allow Search block to be added alongside links. ([22656](https://github.com/WordPress/gutenberg/pull/22656))
+
+### Bug Fixes
+
+-   Block Directory:
+    -   Support .svg extension for results icons. ([23442](https://github.com/WordPress/gutenberg/pull/23442))
+    -   Throw error if we have an issue registering blocks. ([23439](https://github.com/WordPress/gutenberg/pull/23439))
+    -   Remove the overflow on the Add button. ([23409](https://github.com/WordPress/gutenberg/pull/23409))
+    -   Fix double border in block list. ([23625](https://github.com/WordPress/gutenberg/pull/23625))
+-   Fix the upload icon size. ([23553](https://github.com/WordPress/gutenberg/pull/23553))
+-   Allow scrolling over Popovers. ([23696](https://github.com/WordPress/gutenberg/pull/23696))
+-   Fix quote left border color in dark mode. ([23692](https://github.com/WordPress/gutenberg/pull/23692))
+-   Fix empty block list appender visibility on aligned blocks. ([23672](https://github.com/WordPress/gutenberg/pull/23672))
+-   Fix horizontal Block Mover Layout. ([23640](https://github.com/WordPress/gutenberg/pull/23640))
+-   Fix invisible drop target indicator. ([23638](https://github.com/WordPress/gutenberg/pull/23638))
+-   Rich text: Fix soft line break in caption on enter. ([23622](https://github.com/WordPress/gutenberg/pull/23622))
+-   Fix clicking Gallery items buttons on Safari. ([23586](https://github.com/WordPress/gutenberg/pull/23586))
+-   Hide block list appender in a reusable block if it's not being edited. ([23584](https://github.com/WordPress/gutenberg/pull/23584))
+-   Revert "Remove the style CSS class when the default style variation is chosen". ([23548](https://github.com/WordPress/gutenberg/pull/23548))
+-   Classic block:
+    -   Add height: Auto to content wrapper. ([23547](https://github.com/WordPress/gutenberg/pull/23547))
+    -   Add scroll to last edit position. ([23544](https://github.com/WordPress/gutenberg/pull/23544))
+    -   Adjust placement of the toolbar. ([23438](https://github.com/WordPress/gutenberg/pull/23438))
+    -   Prevent content loss by regularly dispatching changes. ([23408](https://github.com/WordPress/gutenberg/pull/23408))
+    -   Fix undo keyboard shortcut. ([23376](https://github.com/WordPress/gutenberg/pull/23376))
+-   Fix the Gallery images buttons rendering. ([23471](https://github.com/WordPress/gutenberg/pull/23471))
+-   Fix Post title top margin. ([23447](https://github.com/WordPress/gutenberg/pull/23447))
+-   Fix file names generation for edited image files. ([23440](https://github.com/WordPress/gutenberg/pull/23440))
+-   Fix React warning when cropping imùges. ([23432](https://github.com/WordPress/gutenberg/pull/23432))
+-   Polish block moving animation. ([23401](https://github.com/WordPress/gutenberg/pull/23401)) ([22640](https://github.com/WordPress/gutenberg/pull/22640))
+-   Fix small RTL regression in Buttons block. ([23390](https://github.com/WordPress/gutenberg/pull/23390))
+-   Fix centered legacy button. ([23381](https://github.com/WordPress/gutenberg/pull/23381))
+-   Fix React warning while unmounting slots. ([23365](https://github.com/WordPress/gutenberg/pull/23365))
+-   Don't show the "Move to trash" action if the user is not allowed to delete posts. ([23174](https://github.com/WordPress/gutenberg/pull/23174))
+-   add inline font-sizes and colors to the editor for themes that don't enqueue the preset classes. ([22356](https://github.com/WordPress/gutenberg/pull/22356)) ([22668](https://github.com/WordPress/gutenberg/pull/22668)) ([23717](https://github.com/WordPress/gutenberg/pull/23717))
+-   Create Block: Fix missing `scripts` section in scaffolded `package.json`. ([23443](https://github.com/WordPress/gutenberg/pull/23443))
+-   Scripts: Fix build script with style.css files. ([23710](https://github.com/WordPress/gutenberg/pull/23710))
+-   Restore removed props and behavior back to Query Controls. ([23419](https://github.com/WordPress/gutenberg/pull/23419))
+-   Add support for hexadecimal colors in gradient presets. ([23363](https://github.com/WordPress/gutenberg/pull/23363))
 
 ### Performance
 
-*   Improve the performance of the keyboard shortcuts binding. ([23394](https://github.com/WordPress/gutenberg/pull/23394))
+-   Improve the performance of the keyboard shortcuts binding. ([23394](https://github.com/WordPress/gutenberg/pull/23394))
 
 ### Documentation
 
-*   Add a documentation page explaining how the repository is organized. ([23563](https://github.com/WordPress/gutenberg/pull/23563))
-*   Document the WordPress 5.5 backported code. ([23478](https://github.com/WordPress/gutenberg/pull/23478)) ([23708](https://github.com/WordPress/gutenberg/pull/23708))
-*   Add .markdownlint.json configuration extending scripts configuration. ([23655](https://github.com/WordPress/gutenberg/pull/23655))
-*   Add "Create a Block" tutorial Create a Block tutorial. ([22831](https://github.com/WordPress/gutenberg/pull/22831)) ([23654](https://github.com/WordPress/gutenberg/pull/23654))
-*   Update wp-env Ubuntu documentation. ([23650](https://github.com/WordPress/gutenberg/pull/23650))
-*   Add documentation for InnerBlocks orientation prop. ([23641](https://github.com/WordPress/gutenberg/pull/23641))
-*   Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. ([23577](https://github.com/WordPress/gutenberg/pull/23577))
-*   Update categories in block registration documentation. ([23572](https://github.com/WordPress/gutenberg/pull/23572))
-*   Update ESNext usage in public API. ([23475](https://github.com/WordPress/gutenberg/pull/23475))
-*   Clarify the wp-block-styles documentation. ([23359](https://github.com/WordPress/gutenberg/pull/23359))
-*   Add documentation for setting up Prettier for markdown. ([23286](https://github.com/WordPress/gutenberg/pull/23286))
-*   Typos and tweaks: ([23542](https://github.com/WordPress/gutenberg/pull/23542)) ([23489](https://github.com/WordPress/gutenberg/pull/23489)) ([23590](https://github.com/WordPress/gutenberg/pull/23590)) ([23300](https://github.com/WordPress/gutenberg/pull/23300)) ([23534](https://github.com/WordPress/gutenberg/pull/23534)) ([23467](https://github.com/WordPress/gutenberg/pull/23467))
+-   Add a documentation page explaining how the repository is organized. ([23563](https://github.com/WordPress/gutenberg/pull/23563))
+-   Document the WordPress 5.5 backported code. ([23478](https://github.com/WordPress/gutenberg/pull/23478)) ([23708](https://github.com/WordPress/gutenberg/pull/23708))
+-   Add .markdownlint.json configuration extending scripts configuration. ([23655](https://github.com/WordPress/gutenberg/pull/23655))
+-   Add "Create a Block" tutorial Create a Block tutorial. ([22831](https://github.com/WordPress/gutenberg/pull/22831)) ([23654](https://github.com/WordPress/gutenberg/pull/23654))
+-   Update wp-env Ubuntu documentation. ([23650](https://github.com/WordPress/gutenberg/pull/23650))
+-   Add documentation for InnerBlocks orientation prop. ([23641](https://github.com/WordPress/gutenberg/pull/23641))
+-   Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. ([23577](https://github.com/WordPress/gutenberg/pull/23577))
+-   Update categories in block registration documentation. ([23572](https://github.com/WordPress/gutenberg/pull/23572))
+-   Update ESNext usage in public API. ([23475](https://github.com/WordPress/gutenberg/pull/23475))
+-   Clarify the wp-block-styles documentation. ([23359](https://github.com/WordPress/gutenberg/pull/23359))
+-   Add documentation for setting up Prettier for markdown. ([23286](https://github.com/WordPress/gutenberg/pull/23286))
+-   Typos and tweaks: ([23542](https://github.com/WordPress/gutenberg/pull/23542)) ([23489](https://github.com/WordPress/gutenberg/pull/23489)) ([23590](https://github.com/WordPress/gutenberg/pull/23590)) ([23300](https://github.com/WordPress/gutenberg/pull/23300)) ([23534](https://github.com/WordPress/gutenberg/pull/23534)) ([23467](https://github.com/WordPress/gutenberg/pull/23467))
 
 ### Code Quality
 
-*   Optimize useSelect calls (dependencies) ([23255](https://github.com/WordPress/gutenberg/pull/23255)) ([23247](https://github.com/WordPress/gutenberg/pull/23247)) ([23245](https://github.com/WordPress/gutenberg/pull/23245)) ([23249](https://github.com/WordPress/gutenberg/pull/23249))
-*   Reduced the number of SASS color variables. ([23648](https://github.com/WordPress/gutenberg/pull/23648)) ([23454](https://github.com/WordPress/gutenberg/pull/23454))
-*   Remove unused getBlockIndex selector from useBlockDropZone hook. ([23634](https://github.com/WordPress/gutenberg/pull/23634))
-*   Scroll on drag: Remove blockNodes context dependency. ([23561](https://github.com/WordPress/gutenberg/pull/23561))
-*   Add missing notices dependency. ([23517](https://github.com/WordPress/gutenberg/pull/23517))
-*   Remove BlockPopover key prop and related code. ([23504](https://github.com/WordPress/gutenberg/pull/23504))
-*   Show a warning when SlotFillProvider is missing. ([23493](https://github.com/WordPress/gutenberg/pull/23493))
-*   Block toolbar: Remove data-align attribute. ([23468](https://github.com/WordPress/gutenberg/pull/23468))
-*   Extract block draggable scroll behaviour into React hook. ([23444](https://github.com/WordPress/gutenberg/pull/23444))
-*   Refactor Dropdown to use functional component. ([23142](https://github.com/WordPress/gutenberg/pull/23142))
-*   Refactor Embed Edit component: Class component to Function component. ([22846](https://github.com/WordPress/gutenberg/pull/22846))
-*   Extract navigation link rendering code from the navigation block. ([21075](https://github.com/WordPress/gutenberg/pull/21075))
-*   Block editor: Use vanilla JS instead of Lodash if possible. ([21063](https://github.com/WordPress/gutenberg/pull/21063)) ([23633](https://github.com/WordPress/gutenberg/pull/23633))
-*   Add "engines" to the package.json and "engine-strict = true" to the package.json. ([23600](https://github.com/WordPress/gutenberg/pull/23600))
-*   Block Directory: Remove custom permission check in favor of `canUser`. ([23624](https://github.com/WordPress/gutenberg/pull/23624))
-*   Remove REST\_WP\_REST\_Block\_Types\_Controller\_Test which now exists in WordPress Core. ([23500](https://github.com/WordPress/gutenberg/pull/23500))
-*   Editor: Remove unnecessary block directory dependency. ([23476](https://github.com/WordPress/gutenberg/pull/23476))
-*   Plugin Controller: Return the plugin without the extension. ([23395](https://github.com/WordPress/gutenberg/pull/23395))
-*   Clean up image editor REST route. ([23368](https://github.com/WordPress/gutenberg/pull/23368))
-*   Make slash inserter tests more stable. ([23367](https://github.com/WordPress/gutenberg/pull/23367))
-*   Post Author block: Fix end-to-end test fixture indentation. ([23209](https://github.com/WordPress/gutenberg/pull/23209))
+-   Optimize useSelect calls (dependencies) ([23255](https://github.com/WordPress/gutenberg/pull/23255)) ([23247](https://github.com/WordPress/gutenberg/pull/23247)) ([23245](https://github.com/WordPress/gutenberg/pull/23245)) ([23249](https://github.com/WordPress/gutenberg/pull/23249))
+-   Reduced the number of SASS color variables. ([23648](https://github.com/WordPress/gutenberg/pull/23648)) ([23454](https://github.com/WordPress/gutenberg/pull/23454))
+-   Remove unused getBlockIndex selector from useBlockDropZone hook. ([23634](https://github.com/WordPress/gutenberg/pull/23634))
+-   Scroll on drag: Remove blockNodes context dependency. ([23561](https://github.com/WordPress/gutenberg/pull/23561))
+-   Add missing notices dependency. ([23517](https://github.com/WordPress/gutenberg/pull/23517))
+-   Remove BlockPopover key prop and related code. ([23504](https://github.com/WordPress/gutenberg/pull/23504))
+-   Show a warning when SlotFillProvider is missing. ([23493](https://github.com/WordPress/gutenberg/pull/23493))
+-   Block toolbar: Remove data-align attribute. ([23468](https://github.com/WordPress/gutenberg/pull/23468))
+-   Extract block draggable scroll behaviour into React hook. ([23444](https://github.com/WordPress/gutenberg/pull/23444))
+-   Refactor Dropdown to use functional component. ([23142](https://github.com/WordPress/gutenberg/pull/23142))
+-   Refactor Embed Edit component: Class component to Function component. ([22846](https://github.com/WordPress/gutenberg/pull/22846))
+-   Extract navigation link rendering code from the navigation block. ([21075](https://github.com/WordPress/gutenberg/pull/21075))
+-   Block editor: Use vanilla JS instead of Lodash if possible. ([21063](https://github.com/WordPress/gutenberg/pull/21063)) ([23633](https://github.com/WordPress/gutenberg/pull/23633))
+-   Add "engines" to the package.json and "engine-strict = true" to the package.json. ([23600](https://github.com/WordPress/gutenberg/pull/23600))
+-   Block Directory: Remove custom permission check in favor of `canUser`. ([23624](https://github.com/WordPress/gutenberg/pull/23624))
+-   Remove REST_WP_REST_Block_Types_Controller_Test which now exists in WordPress Core. ([23500](https://github.com/WordPress/gutenberg/pull/23500))
+-   Editor: Remove unnecessary block directory dependency. ([23476](https://github.com/WordPress/gutenberg/pull/23476))
+-   Plugin Controller: Return the plugin without the extension. ([23395](https://github.com/WordPress/gutenberg/pull/23395))
+-   Clean up image editor REST route. ([23368](https://github.com/WordPress/gutenberg/pull/23368))
+-   Make slash inserter tests more stable. ([23367](https://github.com/WordPress/gutenberg/pull/23367))
+-   Post Author block: Fix end-to-end test fixture indentation. ([23209](https://github.com/WordPress/gutenberg/pull/23209))
 
 ### Build Tooling
 
-*   Add new command for pre-releasing npm packages. ([23357](https://github.com/WordPress/gutenberg/pull/23357))
-*   Move the CI setup from Travis to GitHub actions. ([23523](https://github.com/WordPress/gutenberg/pull/23523)) ([23520](https://github.com/WordPress/gutenberg/pull/23520)) ([23518](https://github.com/WordPress/gutenberg/pull/23518)) ([23470](https://github.com/WordPress/gutenberg/pull/23470)) ([23538](https://github.com/WordPress/gutenberg/pull/23538))
-*   Add npm cache to GitHub workflows and use checkout v2. ([23482](https://github.com/WordPress/gutenberg/pull/23482))
-*   Update bin/validate-package-lock.js error message. ([23435](https://github.com/WordPress/gutenberg/pull/23435))
-*   Minor improvements to the release tool and release documentation. ([23441](https://github.com/WordPress/gutenberg/pull/23441))
-*   Tools: Always append prerelease to version update in package.json when preparing npm release. ([23480](https://github.com/WordPress/gutenberg/pull/23480))
-*   Scripts: Add custom TerserPlugin configuration. ([22990](https://github.com/WordPress/gutenberg/pull/22990))
-*   Scripts: Exclude node\_modules from source map processing in start script. ([23711](https://github.com/WordPress/gutenberg/pull/23711))
-*   Fix rc version number added to the CHANGELOG. ([23433](https://github.com/WordPress/gutenberg/pull/23433))
-*   Tests: Jest - Add typeahead plugin. ([23366](https://github.com/WordPress/gutenberg/pull/23366))
-*   Tests: Run end-to-end tests only as an admin. ([23588](https://github.com/WordPress/gutenberg/pull/23588))
-*   End-2-end Tests: Add test for using block variation with the slash inserter. ([23585](https://github.com/WordPress/gutenberg/pull/23585))
+-   Add new command for pre-releasing npm packages. ([23357](https://github.com/WordPress/gutenberg/pull/23357))
+-   Move the CI setup from Travis to GitHub actions. ([23523](https://github.com/WordPress/gutenberg/pull/23523)) ([23520](https://github.com/WordPress/gutenberg/pull/23520)) ([23518](https://github.com/WordPress/gutenberg/pull/23518)) ([23470](https://github.com/WordPress/gutenberg/pull/23470)) ([23538](https://github.com/WordPress/gutenberg/pull/23538))
+-   Add npm cache to GitHub workflows and use checkout v2. ([23482](https://github.com/WordPress/gutenberg/pull/23482))
+-   Update bin/validate-package-lock.js error message. ([23435](https://github.com/WordPress/gutenberg/pull/23435))
+-   Minor improvements to the release tool and release documentation. ([23441](https://github.com/WordPress/gutenberg/pull/23441))
+-   Tools: Always append prerelease to version update in package.json when preparing npm release. ([23480](https://github.com/WordPress/gutenberg/pull/23480))
+-   Scripts: Add custom TerserPlugin configuration. ([22990](https://github.com/WordPress/gutenberg/pull/22990))
+-   Scripts: Exclude node_modules from source map processing in start script. ([23711](https://github.com/WordPress/gutenberg/pull/23711))
+-   Fix rc version number added to the CHANGELOG. ([23433](https://github.com/WordPress/gutenberg/pull/23433))
+-   Tests: Jest - Add typeahead plugin. ([23366](https://github.com/WordPress/gutenberg/pull/23366))
+-   Tests: Run end-to-end tests only as an admin. ([23588](https://github.com/WordPress/gutenberg/pull/23588))
+-   End-2-end Tests: Add test for using block variation with the slash inserter. ([23585](https://github.com/WordPress/gutenberg/pull/23585))
 
 ### Various
 
-*   RangeControl: Integrate NumberControl + update internal state flow. ([23006](https://github.com/WordPress/gutenberg/pull/23006))
-*   Create Block: Generate a block.json file. ([23399](https://github.com/WordPress/gutenberg/pull/23399))
-*   Sync Block Context changes from Core. ([23602](https://github.com/WordPress/gutenberg/pull/23602))
-*   Scripts: Remove default exclude rule for node\_modules for SVG, CSS and Sass files. ([23495](https://github.com/WordPress/gutenberg/pull/23495))
-*   REST API: Sync /themes endpoint with Core's. ([23321](https://github.com/WordPress/gutenberg/pull/23321))
-
+-   RangeControl: Integrate NumberControl + update internal state flow. ([23006](https://github.com/WordPress/gutenberg/pull/23006))
+-   Create Block: Generate a block.json file. ([23399](https://github.com/WordPress/gutenberg/pull/23399))
+-   Sync Block Context changes from Core. ([23602](https://github.com/WordPress/gutenberg/pull/23602))
+-   Scripts: Remove default exclude rule for node_modules for SVG, CSS and Sass files. ([23495](https://github.com/WordPress/gutenberg/pull/23495))
+-   REST API: Sync /themes endpoint with Core's. ([23321](https://github.com/WordPress/gutenberg/pull/23321))
 
 = 8.4.0 =
 
+## Changelog
+
 ### Features
 
-- Add image editing. ([23349](https://github.com/WordPress/gutenberg/pull/23349))
-- Enable block directory. ([23389](https://github.com/WordPress/gutenberg/pull/23389))
-- Allow block attributes to be modified while multiple blocks are selected. ([22470](https://github.com/WordPress/gutenberg/pull/22470))
+-   Add image editing. ([23349](https://github.com/WordPress/gutenberg/pull/23349))
+-   Enable block directory. ([23389](https://github.com/WordPress/gutenberg/pull/23389))
+-   Allow block attributes to be modified while multiple blocks are selected. ([22470](https://github.com/WordPress/gutenberg/pull/22470))
 
 ### Enhancements
 
-- Show movers next to block switcher. ([22673](https://github.com/WordPress/gutenberg/pull/22673))
-- Support drag and drop in blocks like Social Links and improve drop zone detection. ([23020](https://github.com/WordPress/gutenberg/pull/23020))
-- Improve the accessibliity of toolbars by implementing roving tab index.
-  - Embed block toolbar. ([23278](https://github.com/WordPress/gutenberg/pull/23278))
-  - Custom HTML block toolbar. ([23277](https://github.com/WordPress/gutenberg/pull/23277))
-  - Table block toolbar. ([23252](https://github.com/WordPress/gutenberg/pull/23252))
-  - Grouped blocks toolbars. ([23216](https://github.com/WordPress/gutenberg/pull/23216))
-  - Header toolbar. ([22354](https://github.com/WordPress/gutenberg/pull/22354))
-- Tweak colors of disabled buttons to match rest of WP Admin. ([23229](https://github.com/WordPress/gutenberg/pull/23229))
-- Unify style of subheadings. ([23192](https://github.com/WordPress/gutenberg/pull/23192))
-- Make Popover scrolling and position behavior adapt to the content changes. ([23159](https://github.com/WordPress/gutenberg/pull/23159))
-- Reduce block appender hover delay. ([23046](https://github.com/WordPress/gutenberg/pull/23046))
-- Improve the alignment of children in the CardHeader and CardFooter components. ([22916](https://github.com/WordPress/gutenberg/pull/22916))
-- Add ability to transform a Preformatted block into a Code block. ([22634](https://github.com/WordPress/gutenberg/pull/22634))
-- Add a border to blocks while hovering with the Select tool active. ([22508](https://github.com/WordPress/gutenberg/pull/22508))
-- Consolidate disparate "copy block" actions. ([23088](https://github.com/WordPress/gutenberg/pull/23088))
-- Remove margin from last button if buttons in Buttons block are centered. ([23319](https://github.com/WordPress/gutenberg/pull/23319))
-- Adapt the block switcher styles to the new Popover component. ([23232](https://github.com/WordPress/gutenberg/pull/23232))
-- Make UI more consistent. ([23202](https://github.com/WordPress/gutenberg/pull/23202))
-- Remove canvas padding. ([22213](https://github.com/WordPress/gutenberg/pull/22213))
-- Image Editing
-  - Update Rich Image Icons. ([22819](https://github.com/WordPress/gutenberg/pull/22819))
-  - Consolidate crop ratios. ([22817](https://github.com/WordPress/gutenberg/pull/22817))
-  - Use snackbar notifications. ([23029](https://github.com/WordPress/gutenberg/pull/23029))
-  - Batch editing in cropper component. ([23284](https://github.com/WordPress/gutenberg/pull/23284))
-  - Move to image block. ([23053](https://github.com/WordPress/gutenberg/pull/23053))
-  - Change Edit label to crop icon. ([23387](https://github.com/WordPress/gutenberg/pull/23387))
-  - Use percentage instead of multiplier. ([23362](https://github.com/WordPress/gutenberg/pull/23362))
+-   Show movers next to block switcher. ([22673](https://github.com/WordPress/gutenberg/pull/22673))
+-   Support drag and drop in blocks like Social Links and improve drop zone detection. ([23020](https://github.com/WordPress/gutenberg/pull/23020))
+-   Improve the accessibliity of toolbars by implementing roving tab index.
+    -   Embed block toolbar. ([23278](https://github.com/WordPress/gutenberg/pull/23278))
+    -   Custom HTML block toolbar. ([23277](https://github.com/WordPress/gutenberg/pull/23277))
+    -   Table block toolbar. ([23252](https://github.com/WordPress/gutenberg/pull/23252))
+    -   Grouped blocks toolbars. ([23216](https://github.com/WordPress/gutenberg/pull/23216))
+    -   Header toolbar. ([22354](https://github.com/WordPress/gutenberg/pull/22354))
+-   Tweak colors of disabled buttons to match rest of WP Admin. ([23229](https://github.com/WordPress/gutenberg/pull/23229))
+-   Unify style of subheadings. ([23192](https://github.com/WordPress/gutenberg/pull/23192))
+-   Make Popover scrolling and position behavior adapt to the content changes. ([23159](https://github.com/WordPress/gutenberg/pull/23159))
+-   Reduce block appender hover delay. ([23046](https://github.com/WordPress/gutenberg/pull/23046))
+-   Improve the alignment of children in the CardHeader and CardFooter components. ([22916](https://github.com/WordPress/gutenberg/pull/22916))
+-   Add ability to transform a Preformatted block into a Code block. ([22634](https://github.com/WordPress/gutenberg/pull/22634))
+-   Add a border to blocks while hovering with the Select tool active. ([22508](https://github.com/WordPress/gutenberg/pull/22508))
+-   Consolidate disparate "copy block" actions. ([23088](https://github.com/WordPress/gutenberg/pull/23088))
+-   Remove margin from last button if buttons in Buttons block are centered. ([23319](https://github.com/WordPress/gutenberg/pull/23319))
+-   Adapt the block switcher styles to the new Popover component. ([23232](https://github.com/WordPress/gutenberg/pull/23232))
+-   Make UI more consistent. ([23202](https://github.com/WordPress/gutenberg/pull/23202))
+-   Remove canvas padding. ([22213](https://github.com/WordPress/gutenberg/pull/22213))
+-   Image Editing
+    -   Update Rich Image Icons. ([22819](https://github.com/WordPress/gutenberg/pull/22819))
+    -   Consolidate crop ratios. ([22817](https://github.com/WordPress/gutenberg/pull/22817))
+    -   Use snackbar notifications. ([23029](https://github.com/WordPress/gutenberg/pull/23029))
+    -   Batch editing in cropper component. ([23284](https://github.com/WordPress/gutenberg/pull/23284))
+    -   Move to image block. ([23053](https://github.com/WordPress/gutenberg/pull/23053))
+    -   Change Edit label to crop icon. ([23387](https://github.com/WordPress/gutenberg/pull/23387))
+    -   Use percentage instead of multiplier. ([23362](https://github.com/WordPress/gutenberg/pull/23362))
 
 ### New APIs
 
-- Update the theme colors to rely on CSS variables. ([23048](https://github.com/WordPress/gutenberg/pull/23048))
-- Extend `register_block_type_from_metadata` to handle assets. ([22519](https://github.com/WordPress/gutenberg/pull/22519))
-- Enable custom classnames on `<CustomSelectControl>`. ([23045](https://github.com/WordPress/gutenberg/pull/23045))
-- Add `onFilesPreUpload` property to`MediaPlaceholder`. ([23003](https://github.com/WordPress/gutenberg/pull/23003))
-- Improve error customization in`MediaReplaceFlow`. ([22995](https://github.com/WordPress/gutenberg/pull/22995))
-- Add context properties to block types REST endpoint. ([22686](https://github.com/WordPress/gutenberg/pull/22686))
-
-### Bug Fixes
-
-- Fix pixel shift for toggles. ([23191](https://github.com/WordPress/gutenberg/pull/23191))
-- Fix `useBlockSync` race condition. ([23292](https://github.com/WordPress/gutenberg/pull/23292))
-- Avoid overriding popover content padding. ([23270](https://github.com/WordPress/gutenberg/pull/23270))
-- Fix block parent selector border radius. ([23250](https://github.com/WordPress/gutenberg/pull/23250))
-- Fix plus radius. ([23240](https://github.com/WordPress/gutenberg/pull/23240))
-- Fix Inserter's handling of child blocks. ([23231](https://github.com/WordPress/gutenberg/pull/23231))
-- Create Block: Fix errors reported by CSS linter in ESNext template. ([23188](https://github.com/WordPress/gutenberg/pull/23188))
-- Add context property mapping to block registration. ([23180](https://github.com/WordPress/gutenberg/pull/23180))
-- Remove `z-index` from placeholder fieldset. ([23152](https://github.com/WordPress/gutenberg/pull/23152))
-- Fix possibly outdated `onChange` in color palette's color picker. ([23136](https://github.com/WordPress/gutenberg/pull/23136))
-- Fix updateSlot missing from default`SlotFillContext`. ([23108](https://github.com/WordPress/gutenberg/pull/23108))
-- Add check theme support is an array before indexing. ([23104](https://github.com/WordPress/gutenberg/pull/23104))
-- Add i18n to padding 'reset' button. ([23099](https://github.com/WordPress/gutenberg/pull/23099))
-- Fix group block moving animation not working correctly. ([23084](https://github.com/WordPress/gutenberg/pull/23084))
-- Use a light block DOM for the Media & Text block. ([23062](https://github.com/WordPress/gutenberg/pull/23062))
-- Popover: Ensure popovers consider border width's in their positioning. ([23035](https://github.com/WordPress/gutenberg/pull/23035))
-- Remove child space in`Tooltip`. ([23019](https://github.com/WordPress/gutenberg/pull/23019))
-- Fix drag and drop for blocks that don't use `__experimentalTagName` for their inner blocks. ([23016](https://github.com/WordPress/gutenberg/pull/23016))
-- Fix am / pm i18n bug. ([22963](https://github.com/WordPress/gutenberg/pull/22963))
-- Fix plugin document setting panel name. ([22763](https://github.com/WordPress/gutenberg/pull/22763))
-- Fix plus icon. ([22704](https://github.com/WordPress/gutenberg/pull/22704))
-- Fix Typography panel rendering from style hooks. ([22605](https://github.com/WordPress/gutenberg/pull/22605))
-- Fix "Cannot read property 'end' of undefined" error on babel-plugin-makepot. ([22394](https://github.com/WordPress/gutenberg/pull/22394))
-- Fix "React does not recognize isSelected prop in ComplementaryAreaToggle" warning. ([22967](https://github.com/WordPress/gutenberg/pull/22967))
-- Cover padding: Fix reset and visualize on hover. ([23041](https://github.com/WordPress/gutenberg/pull/23041))
-- Fix color picker saturation bug. ([23272](https://github.com/WordPress/gutenberg/pull/23272))
-- Fix image size feature. ([23342](https://github.com/WordPress/gutenberg/pull/23342))
-- Remove block preview paddings. ([23386](https://github.com/WordPress/gutenberg/pull/23386))
-- Block Directory
-  - Fix "no result" UI flash. ([22783](https://github.com/WordPress/gutenberg/pull/22783))
-  - Uninstall unused block types. ([22918](https://github.com/WordPress/gutenberg/pull/22918))
-  - Fix installing blocks. ([23096](https://github.com/WordPress/gutenberg/pull/23096))
-  - Add plugins REST API endpoints. ([22454](https://github.com/WordPress/gutenberg/pull/22454))
-  - Use plugin API for installing & deleting block-plugins. ([23219](https://github.com/WordPress/gutenberg/pull/23219))
-  - Use a more specific `<script>` matching pattern. ([23407](https://github.com/WordPress/gutenberg/pull/23407))
-  - Fix missing padding. ([23346](https://github.com/WordPress/gutenberg/pull/23346))
-- Image Editing
-  - Fix image size on crop. ([23173](https://github.com/WordPress/gutenberg/pull/23173))
-  - Avoid re-render on select. ([23009](https://github.com/WordPress/gutenberg/pull/23009))
-  - Preserve crop position through rotations. ([23374](https://github.com/WordPress/gutenberg/pull/23374))
+-   Update the theme colors to rely on CSS variables. ([23048](https://github.com/WordPress/gutenberg/pull/23048))
+-   Extend `register_block_type_from_metadata` to handle assets. ([22519](https://github.com/WordPress/gutenberg/pull/22519))
+-   Enable custom classnames on `<CustomSelectControl>`. ([23045](https://github.com/WordPress/gutenberg/pull/23045))
+-   Add `onFilesPreUpload` property to`MediaPlaceholder`. ([23003](https://github.com/WordPress/gutenberg/pull/23003))
+-   Improve error customization in`MediaReplaceFlow`. ([22995](https://github.com/WordPress/gutenberg/pull/22995))
+-   Add context properties to block types REST endpoint. ([22686](https://github.com/WordPress/gutenberg/pull/22686))
+
+### Bug Fixes
+
+-   Fix pixel shift for toggles. ([23191](https://github.com/WordPress/gutenberg/pull/23191))
+-   Fix `useBlockSync` race condition. ([23292](https://github.com/WordPress/gutenberg/pull/23292))
+-   Avoid overriding popover content padding. ([23270](https://github.com/WordPress/gutenberg/pull/23270))
+-   Fix block parent selector border radius. ([23250](https://github.com/WordPress/gutenberg/pull/23250))
+-   Fix plus radius. ([23240](https://github.com/WordPress/gutenberg/pull/23240))
+-   Fix Inserter's handling of child blocks. ([23231](https://github.com/WordPress/gutenberg/pull/23231))
+-   Create Block: Fix errors reported by CSS linter in ESNext template. ([23188](https://github.com/WordPress/gutenberg/pull/23188))
+-   Add context property mapping to block registration. ([23180](https://github.com/WordPress/gutenberg/pull/23180))
+-   Remove `z-index` from placeholder fieldset. ([23152](https://github.com/WordPress/gutenberg/pull/23152))
+-   Fix possibly outdated `onChange` in color palette's color picker. ([23136](https://github.com/WordPress/gutenberg/pull/23136))
+-   Fix updateSlot missing from default`SlotFillContext`. ([23108](https://github.com/WordPress/gutenberg/pull/23108))
+-   Add check theme support is an array before indexing. ([23104](https://github.com/WordPress/gutenberg/pull/23104))
+-   Add i18n to padding 'reset' button. ([23099](https://github.com/WordPress/gutenberg/pull/23099))
+-   Fix group block moving animation not working correctly. ([23084](https://github.com/WordPress/gutenberg/pull/23084))
+-   Use a light block DOM for the Media & Text block. ([23062](https://github.com/WordPress/gutenberg/pull/23062))
+-   Popover: Ensure popovers consider border width's in their positioning. ([23035](https://github.com/WordPress/gutenberg/pull/23035))
+-   Remove child space in`Tooltip`. ([23019](https://github.com/WordPress/gutenberg/pull/23019))
+-   Fix drag and drop for blocks that don't use `__experimentalTagName` for their inner blocks. ([23016](https://github.com/WordPress/gutenberg/pull/23016))
+-   Fix am / pm i18n bug. ([22963](https://github.com/WordPress/gutenberg/pull/22963))
+-   Fix plugin document setting panel name. ([22763](https://github.com/WordPress/gutenberg/pull/22763))
+-   Fix plus icon. ([22704](https://github.com/WordPress/gutenberg/pull/22704))
+-   Fix Typography panel rendering from style hooks. ([22605](https://github.com/WordPress/gutenberg/pull/22605))
+-   Fix "Cannot read property 'end' of undefined" error on babel-plugin-makepot. ([22394](https://github.com/WordPress/gutenberg/pull/22394))
+-   Fix "React does not recognize isSelected prop in ComplementaryAreaToggle" warning. ([22967](https://github.com/WordPress/gutenberg/pull/22967))
+-   Cover padding: Fix reset and visualize on hover. ([23041](https://github.com/WordPress/gutenberg/pull/23041))
+-   Fix color picker saturation bug. ([23272](https://github.com/WordPress/gutenberg/pull/23272))
+-   Fix image size feature. ([23342](https://github.com/WordPress/gutenberg/pull/23342))
+-   Remove block preview paddings. ([23386](https://github.com/WordPress/gutenberg/pull/23386))
+-   Block Directory
+    -   Fix "no result" UI flash. ([22783](https://github.com/WordPress/gutenberg/pull/22783))
+    -   Uninstall unused block types. ([22918](https://github.com/WordPress/gutenberg/pull/22918))
+    -   Fix installing blocks. ([23096](https://github.com/WordPress/gutenberg/pull/23096))
+    -   Add plugins REST API endpoints. ([22454](https://github.com/WordPress/gutenberg/pull/22454))
+    -   Use plugin API for installing & deleting block-plugins. ([23219](https://github.com/WordPress/gutenberg/pull/23219))
+    -   Use a more specific `<script>` matching pattern. ([23407](https://github.com/WordPress/gutenberg/pull/23407))
+    -   Fix missing padding. ([23346](https://github.com/WordPress/gutenberg/pull/23346))
+-   Image Editing
+    -   Fix image size on crop. ([23173](https://github.com/WordPress/gutenberg/pull/23173))
+    -   Avoid re-render on select. ([23009](https://github.com/WordPress/gutenberg/pull/23009))
+    -   Preserve crop position through rotations. ([23374](https://github.com/WordPress/gutenberg/pull/23374))
 
 ### Performance
 
-- Memoize useSelect callbacks on the header toolbar items. ([23337](https://github.com/WordPress/gutenberg/pull/23337))
-- Enqueue assets for rendered blocks only. ([22754](https://github.com/WordPress/gutenberg/pull/22754))
-- Call `isMultiSelecting` and `isNavigationMode` selectors where needed. ([22135](https://github.com/WordPress/gutenberg/pull/22135))
+-   Memoize useSelect callbacks on the header toolbar items. ([23337](https://github.com/WordPress/gutenberg/pull/23337))
+-   Enqueue assets for rendered blocks only. ([22754](https://github.com/WordPress/gutenberg/pull/22754))
+-   Call `isMultiSelecting` and `isNavigationMode` selectors where needed. ([22135](https://github.com/WordPress/gutenberg/pull/22135))
 
 ### Experiments
 
-- Full Site Editing
-  - Move initial template fetch to client. ([23186](https://github.com/WordPress/gutenberg/pull/23186))
-  - Fix Template Part Auto-draft creation. ([23050](https://github.com/WordPress/gutenberg/pull/23050))
-  - Fix template part switching instability. ([23282](https://github.com/WordPress/gutenberg/pull/23282))
-  - Fix `$theme-color` error in Template Part block. ([23221](https://github.com/WordPress/gutenberg/pull/23221))
-  - Add auto-drafting for theme supplied template parts. ([23254](https://github.com/WordPress/gutenberg/pull/23254))
-  - Add template part previews to placeholder block. ([22760](https://github.com/WordPress/gutenberg/pull/22760))
-  - Fetch template parts in Template Switcher from REST API. ([21878](https://github.com/WordPress/gutenberg/pull/21878))
-  - Post Title block: Add alignment and heading level support. ([22872](https://github.com/WordPress/gutenberg/pull/22872))
-  - Post Author block: Update functionality and visual parity. ([22877](https://github.com/WordPress/gutenberg/pull/22877))
-  - Add theme exporter. ([22922](https://github.com/WordPress/gutenberg/pull/22922))
-- Navigation block & Navigation screen
-  - Visual improvements to the block navigator. ([22796](https://github.com/WordPress/gutenberg/pull/22796))
-  - Improve flow when creating from menu. ([23187](https://github.com/WordPress/gutenberg/pull/23187))
-  - Renamed Navigation Link to Link. ([23163](https://github.com/WordPress/gutenberg/pull/23163))
-  - Only show appender for the currently selected block. ([22998](https://github.com/WordPress/gutenberg/pull/22998))
-  - Fix navigation block dark style appender. ([23165](https://github.com/WordPress/gutenberg/pull/23165))
-  - Fix saving on navigation screen. ([23157](https://github.com/WordPress/gutenberg/pull/23157))
-  - Extract and refactor placeholder from navigation block edit function. ([23109](https://github.com/WordPress/gutenberg/pull/23109))
-  - Better README for the `edit-navigation` package. ([23018](https://github.com/WordPress/gutenberg/pull/23018))
-  - Remove navigator from the navigation block inspector. ([23022](https://github.com/WordPress/gutenberg/pull/23022))
-  - Separate block navigator focus from the editor focus. ([22996](https://github.com/WordPress/gutenberg/pull/22996))
-  - Change `MenuLocationsEditor` to use a card instead of a panel. ([23151](https://github.com/WordPress/gutenberg/pull/23151))
-  - Change Create Menu UI to use a `Card` instead of`Panel`. ([23150](https://github.com/WordPress/gutenberg/pull/23150))
-  - Enable creation from existing WP Menus. ([18869](https://github.com/WordPress/gutenberg/pull/18869))
-  - Don't announce external value changes in custom select control. ([22815](https://github.com/WordPress/gutenberg/pull/22815))
-  - Refactor Navigation screen to use `@wordpress/data`. ([23033](https://github.com/WordPress/gutenberg/pull/23033))
+-   Full Site Editing
+    -   Move initial template fetch to client. ([23186](https://github.com/WordPress/gutenberg/pull/23186))
+    -   Fix Template Part Auto-draft creation. ([23050](https://github.com/WordPress/gutenberg/pull/23050))
+    -   Fix template part switching instability. ([23282](https://github.com/WordPress/gutenberg/pull/23282))
+    -   Fix `$theme-color` error in Template Part block. ([23221](https://github.com/WordPress/gutenberg/pull/23221))
+    -   Add auto-drafting for theme supplied template parts. ([23254](https://github.com/WordPress/gutenberg/pull/23254))
+    -   Add template part previews to placeholder block. ([22760](https://github.com/WordPress/gutenberg/pull/22760))
+    -   Fetch template parts in Template Switcher from REST API. ([21878](https://github.com/WordPress/gutenberg/pull/21878))
+    -   Post Title block: Add alignment and heading level support. ([22872](https://github.com/WordPress/gutenberg/pull/22872))
+    -   Post Author block: Update functionality and visual parity. ([22877](https://github.com/WordPress/gutenberg/pull/22877))
+    -   Add theme exporter. ([22922](https://github.com/WordPress/gutenberg/pull/22922))
+-   Navigation block & Navigation screen
+    -   Visual improvements to the block navigator. ([22796](https://github.com/WordPress/gutenberg/pull/22796))
+    -   Improve flow when creating from menu. ([23187](https://github.com/WordPress/gutenberg/pull/23187))
+    -   Renamed Navigation Link to Link. ([23163](https://github.com/WordPress/gutenberg/pull/23163))
+    -   Only show appender for the currently selected block. ([22998](https://github.com/WordPress/gutenberg/pull/22998))
+    -   Fix navigation block dark style appender. ([23165](https://github.com/WordPress/gutenberg/pull/23165))
+    -   Fix saving on navigation screen. ([23157](https://github.com/WordPress/gutenberg/pull/23157))
+    -   Extract and refactor placeholder from navigation block edit function. ([23109](https://github.com/WordPress/gutenberg/pull/23109))
+    -   Better README for the `edit-navigation` package. ([23018](https://github.com/WordPress/gutenberg/pull/23018))
+    -   Remove navigator from the navigation block inspector. ([23022](https://github.com/WordPress/gutenberg/pull/23022))
+    -   Separate block navigator focus from the editor focus. ([22996](https://github.com/WordPress/gutenberg/pull/22996))
+    -   Change `MenuLocationsEditor` to use a card instead of a panel. ([23151](https://github.com/WordPress/gutenberg/pull/23151))
+    -   Change Create Menu UI to use a `Card` instead of`Panel`. ([23150](https://github.com/WordPress/gutenberg/pull/23150))
+    -   Enable creation from existing WP Menus. ([18869](https://github.com/WordPress/gutenberg/pull/18869))
+    -   Don't announce external value changes in custom select control. ([22815](https://github.com/WordPress/gutenberg/pull/22815))
+    -   Refactor Navigation screen to use `@wordpress/data`. ([23033](https://github.com/WordPress/gutenberg/pull/23033))
 
 ### Documentation
 
-- `@wordpress/env`: add login details to documentation. ([23343](https://github.com/WordPress/gutenberg/pull/23343))
-- Grammatical fixes in `modularity.md`. ([23336](https://github.com/WordPress/gutenberg/pull/23336))
-- Update `modularity.md`. ([23322](https://github.com/WordPress/gutenberg/pull/23322))
-- Use correct package for importing `useState` in `BoxControl` examples. ([23243](https://github.com/WordPress/gutenberg/pull/23243))
-- Rename architecture `index.md` to `readme.md`. ([23242](https://github.com/WordPress/gutenberg/pull/23242))
-- Scripts: Update changelog to move unreleased entries to Unreleased section. ([23178](https://github.com/WordPress/gutenberg/pull/23178))
-- Handbook: Udpate documentation for package release. ([23162](https://github.com/WordPress/gutenberg/pull/23162))
-- Use deny/allow list. ([23120](https://github.com/WordPress/gutenberg/pull/23120))
-- Move ESNext as default code example. ([23117](https://github.com/WordPress/gutenberg/pull/23117))
-- Handbook: Update release documentation. ([23002](https://github.com/WordPress/gutenberg/pull/23002))
-- Update `theme-support.md` for experimental supports. ([23310](https://github.com/WordPress/gutenberg/pull/23310))
-- RichText: Add missing param documentation for `getActiveFormats()`. ([23160](https://github.com/WordPress/gutenberg/pull/23160))
-- API description: Use a period at the end. ([23097](https://github.com/WordPress/gutenberg/pull/23097))
-- Improve JSDoc comment in ESNext template in edit.js file. ([23164](https://github.com/WordPress/gutenberg/pull/23164))
-- Blocks: Update block registration default values. ([23348](https://github.com/WordPress/gutenberg/pull/23348))
+-   `@wordpress/env`: add login details to documentation. ([23343](https://github.com/WordPress/gutenberg/pull/23343))
+-   Grammatical fixes in `modularity.md`. ([23336](https://github.com/WordPress/gutenberg/pull/23336))
+-   Update `modularity.md`. ([23322](https://github.com/WordPress/gutenberg/pull/23322))
+-   Use correct package for importing `useState` in `BoxControl` examples. ([23243](https://github.com/WordPress/gutenberg/pull/23243))
+-   Rename architecture `index.md` to `readme.md`. ([23242](https://github.com/WordPress/gutenberg/pull/23242))
+-   Scripts: Update changelog to move unreleased entries to Unreleased section. ([23178](https://github.com/WordPress/gutenberg/pull/23178))
+-   Handbook: Udpate documentation for package release. ([23162](https://github.com/WordPress/gutenberg/pull/23162))
+-   Use deny/allow list. ([23120](https://github.com/WordPress/gutenberg/pull/23120))
+-   Move ESNext as default code example. ([23117](https://github.com/WordPress/gutenberg/pull/23117))
+-   Handbook: Update release documentation. ([23002](https://github.com/WordPress/gutenberg/pull/23002))
+-   Update `theme-support.md` for experimental supports. ([23310](https://github.com/WordPress/gutenberg/pull/23310))
+-   RichText: Add missing param documentation for `getActiveFormats()`. ([23160](https://github.com/WordPress/gutenberg/pull/23160))
+-   API description: Use a period at the end. ([23097](https://github.com/WordPress/gutenberg/pull/23097))
+-   Improve JSDoc comment in ESNext template in edit.js file. ([23164](https://github.com/WordPress/gutenberg/pull/23164))
+-   Blocks: Update block registration default values. ([23348](https://github.com/WordPress/gutenberg/pull/23348))
 
 ### Code Quality
 
-- Refactor header toolbar items to use `@wordpress/data` hooks. ([23315](https://github.com/WordPress/gutenberg/pull/23315))
-- Use `useLayoutEffect` to compute the popover position. ([23312](https://github.com/WordPress/gutenberg/pull/23312))
-- Reduce unnecessary selector specificity for Button block. ([23246](https://github.com/WordPress/gutenberg/pull/23246))
-- `Button` component - remove `isLarge` prop. ([23239](https://github.com/WordPress/gutenberg/pull/23239))
-- Upgrade Reakit to version 1.1.0. ([23236](https://github.com/WordPress/gutenberg/pull/23236))
-- Refactor column block to use hooks. ([23143](https://github.com/WordPress/gutenberg/pull/23143))
-- `RichText`: Rewrite with hooks. ([23132](https://github.com/WordPress/gutenberg/pull/23132))
-- Refactor `ToggleControl` to use functional component. ([23116](https://github.com/WordPress/gutenberg/pull/23116))
-- Refactor Media & Text to use functional components. ([23102](https://github.com/WordPress/gutenberg/pull/23102))
-- Image block: Split huge component. ([23093](https://github.com/WordPress/gutenberg/pull/23093))
-- Simplify`useImageSizes`. ([23091](https://github.com/WordPress/gutenberg/pull/23091))
-- Block: Move align wrapper out of Block element. ([23089](https://github.com/WordPress/gutenberg/pull/23089))
-- Remove Gutenberg plugin's deprected APIs for version 8.3.0. ([23001](https://github.com/WordPress/gutenberg/pull/23001))
-- Block: Remove animation component so it is just a hook. ([22936](https://github.com/WordPress/gutenberg/pull/22936))
-- Remove asterisk icon. ([22855](https://github.com/WordPress/gutenberg/pull/22855))
-- Image Editing
-  - Use hooks. ([23008](https://github.com/WordPress/gutenberg/pull/23008))
-  - REST API Code Cleanup. (23037)
+-   Refactor header toolbar items to use `@wordpress/data` hooks. ([23315](https://github.com/WordPress/gutenberg/pull/23315))
+-   Use `useLayoutEffect` to compute the popover position. ([23312](https://github.com/WordPress/gutenberg/pull/23312))
+-   Reduce unnecessary selector specificity for Button block. ([23246](https://github.com/WordPress/gutenberg/pull/23246))
+-   `Button` component - remove `isLarge` prop. ([23239](https://github.com/WordPress/gutenberg/pull/23239))
+-   Upgrade Reakit to version 1.1.0. ([23236](https://github.com/WordPress/gutenberg/pull/23236))
+-   Refactor column block to use hooks. ([23143](https://github.com/WordPress/gutenberg/pull/23143))
+-   `RichText`: Rewrite with hooks. ([23132](https://github.com/WordPress/gutenberg/pull/23132))
+-   Refactor `ToggleControl` to use functional component. ([23116](https://github.com/WordPress/gutenberg/pull/23116))
+-   Refactor Media & Text to use functional components. ([23102](https://github.com/WordPress/gutenberg/pull/23102))
+-   Image block: Split huge component. ([23093](https://github.com/WordPress/gutenberg/pull/23093))
+-   Simplify`useImageSizes`. ([23091](https://github.com/WordPress/gutenberg/pull/23091))
+-   Block: Move align wrapper out of Block element. ([23089](https://github.com/WordPress/gutenberg/pull/23089))
+-   Remove Gutenberg plugin's deprected APIs for version 8.3.0. ([23001](https://github.com/WordPress/gutenberg/pull/23001))
+-   Block: Remove animation component so it is just a hook. ([22936](https://github.com/WordPress/gutenberg/pull/22936))
+-   Remove asterisk icon. ([22855](https://github.com/WordPress/gutenberg/pull/22855))
+-   Image Editing
+    -   Use hooks. ([23008](https://github.com/WordPress/gutenberg/pull/23008))
+    -   REST API Code Cleanup. (23037)
 
 ### Copy
 
-- Cover block: update copy for Opacity label. ([23287](https://github.com/WordPress/gutenberg/pull/23287))
+-   Cover block: update copy for Opacity label. ([23287](https://github.com/WordPress/gutenberg/pull/23287))
 
 ### Build Tooling
 
-- Packages: Fix the changelong updater for initial npm release. ([23166](https://github.com/WordPress/gutenberg/pull/23166))
-- Scripts: Fix `style.css` handling in the build and start commands. ([23127](https://github.com/WordPress/gutenberg/pull/23127))
-- Scripts: Clean up the build folder via `clean-webpack-plugin`. ([23135](https://github.com/WordPress/gutenberg/pull/23135))
-- Scripts: Update stylelint dependencies to latest versions. ([23114](https://github.com/WordPress/gutenberg/pull/23114))
-- Remove volumes and networks in `wp-env` destroy. ([23101](https://github.com/WordPress/gutenberg/pull/23101))
-- Build: Replace "release" with "build" in script for building a package. ([23063](https://github.com/WordPress/gutenberg/pull/23063))
-- Release tool: Fix bug on reporting message error. ([22994](https://github.com/WordPress/gutenberg/pull/22994))
-- Scripts: Remove temporary workaround in ESLint configuration. ([22915](https://github.com/WordPress/gutenberg/pull/22915))
-- ESLint plugin: Allow ESLint 7.x as peer dependency. ([23190](https://github.com/WordPress/gutenberg/pull/23190))
-- Packages: Add "gutenberg" to the list of keywords in `package.json`. ([23161](https://github.com/WordPress/gutenberg/pull/23161))
-- Update `package-lock.json`. ([23052](https://github.com/WordPress/gutenberg/pull/23052))
+-   Packages: Fix the changelong updater for initial npm release. ([23166](https://github.com/WordPress/gutenberg/pull/23166))
+-   Scripts: Fix `style.css` handling in the build and start commands. ([23127](https://github.com/WordPress/gutenberg/pull/23127))
+-   Scripts: Clean up the build folder via `clean-webpack-plugin`. ([23135](https://github.com/WordPress/gutenberg/pull/23135))
+-   Scripts: Update stylelint dependencies to latest versions. ([23114](https://github.com/WordPress/gutenberg/pull/23114))
+-   Remove volumes and networks in `wp-env` destroy. ([23101](https://github.com/WordPress/gutenberg/pull/23101))
+-   Build: Replace "release" with "build" in script for building a package. ([23063](https://github.com/WordPress/gutenberg/pull/23063))
+-   Release tool: Fix bug on reporting message error. ([22994](https://github.com/WordPress/gutenberg/pull/22994))
+-   Scripts: Remove temporary workaround in ESLint configuration. ([22915](https://github.com/WordPress/gutenberg/pull/22915))
+-   ESLint plugin: Allow ESLint 7.x as peer dependency. ([23190](https://github.com/WordPress/gutenberg/pull/23190))
+-   Packages: Add "gutenberg" to the list of keywords in `package.json`. ([23161](https://github.com/WordPress/gutenberg/pull/23161))
+-   Update `package-lock.json`. ([23052](https://github.com/WordPress/gutenberg/pull/23052))
 
 ### Various
 
-- Initialize the content size used in Popover computation. ([23279](https://github.com/WordPress/gutenberg/pull/23279))
-- Make the block grouping test more stable. ([23266](https://github.com/WordPress/gutenberg/pull/23266))
-- Try to improve heading custom color E2E test stability. ([23260](https://github.com/WordPress/gutenberg/pull/23260))
-- Attempt to fix RTL end-to-end test. ([23203](https://github.com/WordPress/gutenberg/pull/23203))
-- Add verification for Create Block to Continues Integration. ([23195](https://github.com/WordPress/gutenberg/pull/23195))
-- Remove padding inheritance on lists in editor-styles. ([23080](https://github.com/WordPress/gutenberg/pull/23080))
-- Change select parent button styles. ([23230](https://github.com/WordPress/gutenberg/pull/23230))
-- Make link color control opt-in. ([23049](https://github.com/WordPress/gutenberg/pull/23049))
-- Use showBlockToolbar consistently in e2e tests. ([23311](https://github.com/WordPress/gutenberg/pull/23311))
-
+-   Initialize the content size used in Popover computation. ([23279](https://github.com/WordPress/gutenberg/pull/23279))
+-   Make the block grouping test more stable. ([23266](https://github.com/WordPress/gutenberg/pull/23266))
+-   Try to improve heading custom color E2E test stability. ([23260](https://github.com/WordPress/gutenberg/pull/23260))
+-   Attempt to fix RTL end-to-end test. ([23203](https://github.com/WordPress/gutenberg/pull/23203))
+-   Add verification for Create Block to Continues Integration. ([23195](https://github.com/WordPress/gutenberg/pull/23195))
+-   Remove padding inheritance on lists in editor-styles. ([23080](https://github.com/WordPress/gutenberg/pull/23080))
+-   Change select parent button styles. ([23230](https://github.com/WordPress/gutenberg/pull/23230))
+-   Make link color control opt-in. ([23049](https://github.com/WordPress/gutenberg/pull/23049))
+-   Use showBlockToolbar consistently in e2e tests. ([23311](https://github.com/WordPress/gutenberg/pull/23311))
 
 = 8.3.0 =
 
-## Features
-
-- New padding control to cover block. ([21492](https://github.com/WordPress/gutenberg/pull/21492), [23014](https://github.com/WordPress/gutenberg/pull/23041))
-- New link color control to paragraph, heading, group, columns, and media-text blocks. ([22722](https://github.com/WordPress/gutenberg/pull/22722), [23025](https://github.com/WordPress/gutenberg/pull/23025), [23049](https://github.com/WordPress/gutenberg/pull/21492))
-- Updated default block categories. ([19279](https://github.com/WordPress/gutenberg/pull/19279))
-- New parent block selector to child blocks. ([21056](https://github.com/WordPress/gutenberg/pull/21056))
-
-## Enhancements
-
-- Blocks:
-  - SiteTitle: add alignment and tag level support. ([22843](https://github.com/WordPress/gutenberg/pull/22843))
-  - Heading: use toolbar for heading level control. ([20246](https://github.com/WordPress/gutenberg/pull/20246))
-  - LatestPost: add ability to filter by author. ([16169](https://github.com/WordPress/gutenberg/pull/16169))
-  - Add caption split at end to all caption blocks. ([22934](https://github.com/WordPress/gutenberg/pull/22934))
-  - Add transforms between the core widgets that have equivalent blocks. ([22644](https://github.com/WordPress/gutenberg/pull/22644))
-- Interface package:
-  - Add block areas tabbed sidebar to the widgets screen. ([22467](https://github.com/WordPress/gutenberg/pull/22467))
-  - Use isActiveByDefault prop and local storage to determine whether is active or not. ([22381](https://github.com/WordPress/gutenberg/pull/22381))
-  - Add mechanism to render them on edit site. ([21430](https://github.com/WordPress/gutenberg/pull/21430))
-  - Sidebar reacts to screen size and refactor to use interface package. ([22565](https://github.com/WordPress/gutenberg/pull/22565))
-- Add heading to the block inserter tips and to the block inserter groups ([22898](https://github.com/WordPress/gutenberg/pull/22898), [22903](https://github.com/WordPress/gutenberg/pull/22903))
-- Move between nesting levels with arrow keys in navigate mode. ([22614](https://github.com/WordPress/gutenberg/pull/22614))
-- Add icons for image tools, other, and update list icons. ([22593](https://github.com/WordPress/gutenberg/pull/22593))
-- Block Navigator: Use default block appender. ([22590](https://github.com/WordPress/gutenberg/pull/22590))
-- Adds a default text label to the block appender when it can only insert a single block type ([22293](https://github.com/WordPress/gutenberg/pull/22293))
-- Make ToolbarButton API consistent. ([22961](https://github.com/WordPress/gutenberg/pull/22961))
-- Implement roving tabindex on the Image block. ([22696](https://github.com/WordPress/gutenberg/pull/22696))
-- Block Editor: Allow control over drop cap feature with `useEditorFeature` helper. ([22291](https://github.com/WordPress/gutenberg/pull/22291))
-- REST API:
-  - Add block styles register mechanism. ([22680](https://github.com/WordPress/gutenberg/pull/22680))
-  - Update default values for fields in the block type schema. ([22695](https://github.com/WordPress/gutenberg/pull/22695))
-
-## New APIs
-
-- Add new package `@wordpress/lazy-import` for lazily installed packages. ([22684](https://github.com/WordPress/gutenberg/pull/22684))
-- Added `_experimental/block-types` endpoint to expose all registered blocks. (REST API [21065](https://github.com/WordPress/gutenberg/pull/21065), register core blocks in the server [22491](https://github.com/WordPress/gutenberg/pull/22491)).
-
-## Experimental
-
-- Added experimental version of rich image editing tools. ([21024](https://github.com/WordPress/gutenberg/pull/21024), [22870](https://github.com/WordPress/gutenberg/pull/22870))
-- Full Site Editing
-  - New template creation flow for EditSite. ([22586](https://github.com/WordPress/gutenberg/pull/22586))
-  - Edit Site: Avoid dirtying un-customized templates on first load. ([22876](https://github.com/WordPress/gutenberg/pull/22876))
-  - Edit Site: Refactor business logic into store. ([22844](https://github.com/WordPress/gutenberg/pull/22844))
-  - Global Styles: make theme.json shape consistent with local styles shape. ([22744](https://github.com/WordPress/gutenberg/pull/22744)) and take block supports from block.json. ([22698](https://github.com/WordPress/gutenberg/pull/22698))
-  - Edit Site: fixes to template lookup and template parts auto-drafts ([22954](https://github.com/WordPress/gutenberg/pull/22954), [23050](https://github.com/WordPress/gutenberg/pull/23050))
-- Navigation screen
-  - Use panel for navigation structure on small screens only. ([22828](https://github.com/WordPress/gutenberg/pull/22828))
-  - Disable the navigator toolbar button. ([22792](https://github.com/WordPress/gutenberg/pull/22792))
-  - Atomic save using customizer API endpoint. ([22603](https://github.com/WordPress/gutenberg/pull/22603))
-  - Retain block IDs on save. ([22739](https://github.com/WordPress/gutenberg/pull/22739))
-  - Separate concerns in useNavigationBlocks. ([22825](https://github.com/WordPress/gutenberg/pull/22825))
-  - Fetch all menus for display in select menu. ([22591](https://github.com/WordPress/gutenberg/pull/22591))
-  - Fix keyboard navigation in Navigation block. ([22885](https://github.com/WordPress/gutenberg/pull/22885))
-  - Rename EllipsisMenu to BlockNavigationBlockSettings. ([22630](https://github.com/WordPress/gutenberg/pull/22630))
-  - Remove BlockNavigationEditor from navigation-link/edit.js. ([22629](https://github.com/WordPress/gutenberg/pull/22629))
-- Block directory:
-  - Update the state to store the installing status per block id. ([22881](https://github.com/WordPress/gutenberg/pull/22881))
-  - Use semantic element for block directory download heading. ([22713](https://github.com/WordPress/gutenberg/pull/22713))
-  - Add list of installed blocks to pre-publish sidebar. ([22752](https://github.com/WordPress/gutenberg/pull/22752))
-  - Store refactor. ([22388](https://github.com/WordPress/gutenberg/pull/22388))
-
-## Bug Fixes
-
-- Blocks
-  - Skip null values returned from the server during registration. ([22849](https://github.com/WordPress/gutenberg/pull/22849))
-  - LatestPost: fix author display. ([22937](https://github.com/WordPress/gutenberg/pull/22937))
-  - Legacy Widgets: widgets with special chars on classname did not load. ([22841](https://github.com/WordPress/gutenberg/pull/22841))
-  - Group: clean up block padding rules. ([22746](https://github.com/WordPress/gutenberg/pull/22746))
-  - Gallery: fix initial creation via media library. ([22659](https://github.com/WordPress/gutenberg/pull/22659))
-  - Cover: fix height reset on unit change. ([22642](https://github.com/WordPress/gutenberg/pull/22642))
-  - Navigation: fix submenu keyboard a11y in IE. ([22546](https://github.com/WordPress/gutenberg/pull/22546))
-  - Buttons: fix invalid property value for margin-right. ([22211](https://github.com/WordPress/gutenberg/pull/22211))
-- CustomSelectControl:
-  - Use default cursor style ([22926](https://github.com/WordPress/gutenberg/pull/22926))
-  - Fix arrow spacing. ([22925](https://github.com/WordPress/gutenberg/pull/22925))
-- Fix Drag and Drop in Safari by upgrading Reakit. ([22960](https://github.com/WordPress/gutenberg/pull/22960))
-- Font size picker reset button: make it visible in all languages. ([22896](https://github.com/WordPress/gutenberg/pull/22896))
-- Components: ToolbarButton use forwardRef. ([22970](https://github.com/WordPress/gutenberg/pull/22970))
-- Remove aria-label from iframe resizers. ([22868](https://github.com/WordPress/gutenberg/pull/22868))
-- LinkControl: avoid showing "Recently updated" when there are no recently updated Pages from the API. ([22856](https://github.com/WordPress/gutenberg/pull/22856))
-- CopyHandler: Fix unintended Copy override when copying from input or textarea elements. ([22793](https://github.com/WordPress/gutenberg/pull/22793))
-- Customizer complementary area should not include the block areas. ([22756](https://github.com/WordPress/gutenberg/pull/22756))
-- Icons: Fix package references. ([22702](https://github.com/WordPress/gutenberg/pull/22702))
-- Fix missing parentheses in usePrevious hook. ([22608](https://github.com/WordPress/gutenberg/pull/22608))
-- Fix presets in themes that use the default color & gradient palettes. ([22526](https://github.com/WordPress/gutenberg/pull/22526))
-
-## Performance
-
-- Remove ifBlockEditSelected internal higher-order component. ([22905](https://github.com/WordPress/gutenberg/pull/22905))
-- Remove withBlockEditContext internal higher-order component. ([22942](https://github.com/WordPress/gutenberg/pull/22942))
-
-## Documentation
-
-- Handbook
-  - Fix links for dynamic blocks page. ([22945](https://github.com/WordPress/gutenberg/pull/22945))
-  - theme.json specification: document link color feature ([22929](https://github.com/WordPress/gutenberg/pull/22929)) and features integration. ([22622](https://github.com/WordPress/gutenberg/pull/22622))
-  - Block Registration: document use of innerBlocks in example property. ([22633](https://github.com/WordPress/gutenberg/pull/22633))
-  - Reusable blocks: initial improvement to documentation. ([21843](https://github.com/WordPress/gutenberg/pull/21843))
-  - Default to ESNext syntax in MetaBox & Block tutorials. ([22748](https://github.com/WordPress/gutenberg/pull/22748), [22973](https://github.com/WordPress/gutenberg/pull/22973))
-  - Block Tutorial: fixed typo in the wp_register_script function. ([22755](https://github.com/WordPress/gutenberg/pull/22755))
-- JSDoc comments:
-  - __experimentalAddAnnotation ([22794](https://github.com/WordPress/gutenberg/pull/22794))
-  - Block Editor ([22981](https://github.com/WordPress/gutenberg/pull/22981)) ([22976](https://github.com/WordPress/gutenberg/pull/22976)) ([22975](https://github.com/WordPress/gutenberg/pull/22975))
-  - Block Library ([22982](https://github.com/WordPress/gutenberg/pull/22982))
-  - Blocks ([22943](https://github.com/WordPress/gutenberg/pull/22943))
-  - Components ([22971](https://github.com/WordPress/gutenberg/pull/22971))
-  - Core Data ([22966](https://github.com/WordPress/gutenberg/pull/22966))
-  - Edit Post ([22944](https://github.com/WordPress/gutenberg/pull/22944))
-  - end-to-end test utils ([22948](https://github.com/WordPress/gutenberg/pull/22948))
-  - Env ([22911](https://github.com/WordPress/gutenberg/pull/22911)) ([20522](https://github.com/WordPress/gutenberg/pull/20522))
-  - Format library ([22913](https://github.com/WordPress/gutenberg/pull/22913))
-  - Interface ([22964](https://github.com/WordPress/gutenberg/pull/22964))
-- Contributor docs:
-  - Add code examples section. ([22974](https://github.com/WordPress/gutenberg/pull/22974))
-  - Update triage to include release instructions. ([22335](https://github.com/WordPress/gutenberg/pull/22335))
-  - Update repository management with proposed guidelines. ([22679](https://github.com/WordPress/gutenberg/pull/22679))
-- Env:
-  - Reference destroy command. ([22643](https://github.com/WordPress/gutenberg/pull/22643))
-  - Fix use of backticks. ([22980](https://github.com/WordPress/gutenberg/pull/22980))
-- Improve e2e-test README. ([22661](https://github.com/WordPress/gutenberg/pull/22661), [22654](https://github.com/WordPress/gutenberg/pull/22654))
-- Move BlockDropZone react hook and update documentation. ([22619](https://github.com/WordPress/gutenberg/pull/22619))
-- Update PULL_REQUEST_TEMPLATE.md to include PR documentation nudge. ([22681](https://github.com/WordPress/gutenberg/pull/22681))
-
-## Code Quality
-
-- Refactor some components to use hooks:
-  - BlockTitle ([22910](https://github.com/WordPress/gutenberg/pull/22910))
-  - BlockCompare ([22909](https://github.com/WordPress/gutenberg/pull/22909))
-  - TabPanel ([22906](https://github.com/WordPress/gutenberg/pull/22906))
-  - AudioEdit([22901](https://github.com/WordPress/gutenberg/pull/22901))
-  - ImageSizeControl ([22899](https://github.com/WordPress/gutenberg/pull/22899))
-  - FormFileUpload ([22894](https://github.com/WordPress/gutenberg/pull/22894))
-- Polish ImageSizeControl. ([22917](https://github.com/WordPress/gutenberg/pull/22917))
-- Latest Posts Block: add key to category select box. ([22904](https://github.com/WordPress/gutenberg/pull/22904))
-- Rename the navigation mode BlockBreadcrumb component to BlockSelectionButton. ([22882](https://github.com/WordPress/gutenberg/pull/22882))
-- Extract inserter state into reusable hooks. ([22710](https://github.com/WordPress/gutenberg/pull/22710))
-- Replace function expressions with named function or arrow expression. ([22647](https://github.com/WordPress/gutenberg/pull/22647))
-- Remove unused isDraggable prop from BlockList. ([22615](https://github.com/WordPress/gutenberg/pull/22615))
-- Remove form control resets and include the styles in the components. ([22596](https://github.com/WordPress/gutenberg/pull/22596))
-- Project Management Automation: reorganize folder structure. ([22574](https://github.com/WordPress/gutenberg/pull/22574))
-- Dependency Extraction Webpack Plugin: add types. ([22498](https://github.com/WordPress/gutenberg/pull/22498))
-- Blocks: Avoid separate host matching constant for embeds. ([13755](https://github.com/WordPress/gutenberg/pull/13755))
-
-## Breaking Change
-
-- Scripts: Remove legacy env command. ([22953](https://github.com/WordPress/gutenberg/pull/22953))
-- ESLint Plugin/Scripts: Update ESLint and related deps to 7.1.0. ([22771](https://github.com/WordPress/gutenberg/pull/22771))
-
-## Build Tooling
-
-- Env package:
-  - Add an interactive bash command. ([22611](https://github.com/WordPress/gutenberg/pull/22611))
-  - Ensure correct port setting on related wp-config params. ([22559](https://github.com/WordPress/gutenberg/pull/22559))
-  - Update Source type to WPSource. ([22785](https://github.com/WordPress/gutenberg/pull/22785))
-  - Fix ssh-auth nodegit + better snap pack detection. ([22649](https://github.com/WordPress/gutenberg/pull/22649))
-  - Correct multisite support. ([22613](https://github.com/WordPress/gutenberg/pull/22613))
-  - Update copy-dir dependency to version 1.3.0. ([22682](https://github.com/WordPress/gutenberg/pull/22682))
-- Create Block:
-  - Integrate CSS import in JS with esnext template. ([22727](https://github.com/WordPress/gutenberg/pull/22727))
-  - Enhancements for the upcoming npm release. ([22978](https://github.com/WordPress/gutenberg/pull/22978))
-- Scripts:
-  - Add support for postcss.config.js. ([22735](https://github.com/WordPress/gutenberg/pull/22735))
-  - Support split Jest configuration for test commands. ([22477](https://github.com/WordPress/gutenberg/pull/22477))
-  - Split webpack loader rules for CSS and Sass files. ([22786](https://github.com/WordPress/gutenberg/pull/22786))
-- Release tool: warn about open issues in milestone before starting release. ([22764](https://github.com/WordPress/gutenberg/pull/22764))
-- Changelog tool: Enhance entry normalizations. ([22601](https://github.com/WordPress/gutenberg/pull/22601))
-- Performance tool: fixes to run across branches. ([22676](https://github.com/WordPress/gutenberg/pull/22676))
-
-## Various
-
-- Use Card instead of Panel for the block editor. ([22827](https://github.com/WordPress/gutenberg/pull/22827))
-- Revert add selectionStart and selectionEnd to transientEdits. ([22933](https://github.com/WordPress/gutenberg/pull/22933))
-- BlockEditor: fix readme syntax. ([22809](https://github.com/WordPress/gutenberg/pull/22809))
-- Trigger additional widget setup actions. ([22807](https://github.com/WordPress/gutenberg/pull/22807))
-- Align navigator icon and buttons to top. ([22790](https://github.com/WordPress/gutenberg/pull/22790))
-- Set default selection to the root navigation block. ([22737](https://github.com/WordPress/gutenberg/pull/22737))
-- end-to-end tests:
-  - Disable inconsistent test for gallery. ([22726](https://github.com/WordPress/gutenberg/pull/22726))
-  - Specify icon for block context test blocks. ([22811](https://github.com/WordPress/gutenberg/pull/22811))
-  - Configure Axe to ignore media modal markup. ([22719](https://github.com/WordPress/gutenberg/pull/22719))
-  - Define end-to-end test experimental features utility as lifecycle helper. ([22712](https://github.com/WordPress/gutenberg/pull/22712))
-- CODEOWNERS updates. ([22725](https://github.com/WordPress/gutenberg/pull/22725))
-- Add data-handle to all script tags in the admin. ([22721](https://github.com/WordPress/gutenberg/pull/22721))
-- Add onDeleteBlock to the extra data to re-render when it has changes. ([22716](https://github.com/WordPress/gutenberg/pull/22716))
-- Add support for page=1 and perPage=-1 to getMergedItemIds. ([22707](https://github.com/WordPress/gutenberg/pull/22707))
-- Replace three experimental flags (ellipsis menu w/ min level, navigator slots) with just __experimentalFeatures. ([22670](https://github.com/WordPress/gutenberg/pull/22670))
-- Add require headers to plugin and readme (php 5.6). ([22669](https://github.com/WordPress/gutenberg/pull/22669))
-- Update package-lock.json so that CI tests pass. ([22667](https://github.com/WordPress/gutenberg/pull/22667))
-- Framework: Upgrade to wp-prettier@2.x. ([22610](https://github.com/WordPress/gutenberg/pull/22610))
-- Remove the multi-block type check to make __experimentalConvert more useful. ([22577](https://github.com/WordPress/gutenberg/pull/22577))
-- Mousetrap: Update to latest stable version. ([22548](https://github.com/WordPress/gutenberg/pull/22548))
+## Changelog
+
+### New Features
+
+-   New padding control to cover block. ([21492](https://github.com/WordPress/gutenberg/pull/21492), [23014](https://github.com/WordPress/gutenberg/pull/23041))
+-   New link color control to paragraph, heading, group, columns, and media-text blocks. ([22722](https://github.com/WordPress/gutenberg/pull/22722), [23025](https://github.com/WordPress/gutenberg/pull/23025), [23049](https://github.com/WordPress/gutenberg/pull/21492))
+-   Updated default block categories. ([19279](https://github.com/WordPress/gutenberg/pull/19279))
+-   New parent block selector to child blocks. ([21056](https://github.com/WordPress/gutenberg/pull/21056))
+
+### Enhancements
+
+-   Blocks:
+    -   SiteTitle: add alignment and tag level support. ([22843](https://github.com/WordPress/gutenberg/pull/22843))
+    -   Heading: use toolbar for heading level control. ([20246](https://github.com/WordPress/gutenberg/pull/20246))
+    -   LatestPost: add ability to filter by author. ([16169](https://github.com/WordPress/gutenberg/pull/16169))
+    -   Add caption split at end to all caption blocks. ([22934](https://github.com/WordPress/gutenberg/pull/22934))
+    -   Add transforms between the core widgets that have equivalent blocks. ([22644](https://github.com/WordPress/gutenberg/pull/22644))
+-   Interface package:
+    -   Add block areas tabbed sidebar to the widgets screen. ([22467](https://github.com/WordPress/gutenberg/pull/22467))
+    -   Use isActiveByDefault prop and local storage to determine whether is active or not. ([22381](https://github.com/WordPress/gutenberg/pull/22381))
+    -   Add mechanism to render them on edit site. ([21430](https://github.com/WordPress/gutenberg/pull/21430))
+    -   Sidebar reacts to screen size and refactor to use interface package. ([22565](https://github.com/WordPress/gutenberg/pull/22565))
+-   Add heading to the block inserter tips and to the block inserter groups ([22898](https://github.com/WordPress/gutenberg/pull/22898), [22903](https://github.com/WordPress/gutenberg/pull/22903))
+-   Move between nesting levels with arrow keys in navigate mode. ([22614](https://github.com/WordPress/gutenberg/pull/22614))
+-   Add icons for image tools, other, and update list icons. ([22593](https://github.com/WordPress/gutenberg/pull/22593))
+-   Block Navigator: Use default block appender. ([22590](https://github.com/WordPress/gutenberg/pull/22590))
+-   Adds a default text label to the block appender when it can only insert a single block type ([22293](https://github.com/WordPress/gutenberg/pull/22293))
+-   Make ToolbarButton API consistent. ([22961](https://github.com/WordPress/gutenberg/pull/22961))
+-   Implement roving tabindex on the Image block. ([22696](https://github.com/WordPress/gutenberg/pull/22696))
+-   Block Editor: Allow control over drop cap feature with `useEditorFeature` helper. ([22291](https://github.com/WordPress/gutenberg/pull/22291))
+-   REST API:
+    -   Add block styles register mechanism. ([22680](https://github.com/WordPress/gutenberg/pull/22680))
+    -   Update default values for fields in the block type schema. ([22695](https://github.com/WordPress/gutenberg/pull/22695))
+
+### New APIs
+
+-   Add new package `@wordpress/lazy-import` for lazily installed packages. ([22684](https://github.com/WordPress/gutenberg/pull/22684))
+-   Added `_experimental/block-types` endpoint to expose all registered blocks. (REST API [21065](https://github.com/WordPress/gutenberg/pull/21065), register core blocks in the server [22491](https://github.com/WordPress/gutenberg/pull/22491)).
+
+### Experimental
+
+-   Added experimental version of rich image editing tools. ([21024](https://github.com/WordPress/gutenberg/pull/21024), [22870](https://github.com/WordPress/gutenberg/pull/22870))
+-   Full Site Editing
+    -   New template creation flow for EditSite. ([22586](https://github.com/WordPress/gutenberg/pull/22586))
+    -   Edit Site: Avoid dirtying un-customized templates on first load. ([22876](https://github.com/WordPress/gutenberg/pull/22876))
+    -   Edit Site: Refactor business logic into store. ([22844](https://github.com/WordPress/gutenberg/pull/22844))
+    -   Global Styles: make theme.json shape consistent with local styles shape. ([22744](https://github.com/WordPress/gutenberg/pull/22744)) and take block supports from block.json. ([22698](https://github.com/WordPress/gutenberg/pull/22698))
+    -   Edit Site: fixes to template lookup and template parts auto-drafts ([22954](https://github.com/WordPress/gutenberg/pull/22954), [23050](https://github.com/WordPress/gutenberg/pull/23050))
+-   Navigation screen
+    -   Use panel for navigation structure on small screens only. ([22828](https://github.com/WordPress/gutenberg/pull/22828))
+    -   Disable the navigator toolbar button. ([22792](https://github.com/WordPress/gutenberg/pull/22792))
+    -   Atomic save using customizer API endpoint. ([22603](https://github.com/WordPress/gutenberg/pull/22603))
+    -   Retain block IDs on save. ([22739](https://github.com/WordPress/gutenberg/pull/22739))
+    -   Separate concerns in useNavigationBlocks. ([22825](https://github.com/WordPress/gutenberg/pull/22825))
+    -   Fetch all menus for display in select menu. ([22591](https://github.com/WordPress/gutenberg/pull/22591))
+    -   Fix keyboard navigation in Navigation block. ([22885](https://github.com/WordPress/gutenberg/pull/22885))
+    -   Rename EllipsisMenu to BlockNavigationBlockSettings. ([22630](https://github.com/WordPress/gutenberg/pull/22630))
+    -   Remove BlockNavigationEditor from navigation-link/edit.js. ([22629](https://github.com/WordPress/gutenberg/pull/22629))
+-   Block directory:
+    -   Update the state to store the installing status per block id. ([22881](https://github.com/WordPress/gutenberg/pull/22881))
+    -   Use semantic element for block directory download heading. ([22713](https://github.com/WordPress/gutenberg/pull/22713))
+    -   Add list of installed blocks to pre-publish sidebar. ([22752](https://github.com/WordPress/gutenberg/pull/22752))
+    -   Store refactor. ([22388](https://github.com/WordPress/gutenberg/pull/22388))
+
+### Bug Fixes
+
+-   Blocks
+    -   Skip null values returned from the server during registration. ([22849](https://github.com/WordPress/gutenberg/pull/22849))
+    -   LatestPost: fix author display. ([22937](https://github.com/WordPress/gutenberg/pull/22937))
+    -   Legacy Widgets: widgets with special chars on classname did not load. ([22841](https://github.com/WordPress/gutenberg/pull/22841))
+    -   Group: clean up block padding rules. ([22746](https://github.com/WordPress/gutenberg/pull/22746))
+    -   Gallery: fix initial creation via media library. ([22659](https://github.com/WordPress/gutenberg/pull/22659))
+    -   Cover: fix height reset on unit change. ([22642](https://github.com/WordPress/gutenberg/pull/22642))
+    -   Navigation: fix submenu keyboard a11y in IE. ([22546](https://github.com/WordPress/gutenberg/pull/22546))
+    -   Buttons: fix invalid property value for margin-right. ([22211](https://github.com/WordPress/gutenberg/pull/22211))
+-   CustomSelectControl:
+    -   Use default cursor style ([22926](https://github.com/WordPress/gutenberg/pull/22926))
+    -   Fix arrow spacing. ([22925](https://github.com/WordPress/gutenberg/pull/22925))
+-   Fix Drag and Drop in Safari by upgrading Reakit. ([22960](https://github.com/WordPress/gutenberg/pull/22960))
+-   Font size picker reset button: make it visible in all languages. ([22896](https://github.com/WordPress/gutenberg/pull/22896))
+-   Components: ToolbarButton use forwardRef. ([22970](https://github.com/WordPress/gutenberg/pull/22970))
+-   Remove aria-label from iframe resizers. ([22868](https://github.com/WordPress/gutenberg/pull/22868))
+-   LinkControl: avoid showing "Recently updated" when there are no recently updated Pages from the API. ([22856](https://github.com/WordPress/gutenberg/pull/22856))
+-   CopyHandler: Fix unintended Copy override when copying from input or textarea elements. ([22793](https://github.com/WordPress/gutenberg/pull/22793))
+-   Customizer complementary area should not include the block areas. ([22756](https://github.com/WordPress/gutenberg/pull/22756))
+-   Icons: Fix package references. ([22702](https://github.com/WordPress/gutenberg/pull/22702))
+-   Fix missing parentheses in usePrevious hook. ([22608](https://github.com/WordPress/gutenberg/pull/22608))
+-   Fix presets in themes that use the default color & gradient palettes. ([22526](https://github.com/WordPress/gutenberg/pull/22526))
+
+### Performance
+
+-   Remove ifBlockEditSelected internal higher-order component. ([22905](https://github.com/WordPress/gutenberg/pull/22905))
+-   Remove withBlockEditContext internal higher-order component. ([22942](https://github.com/WordPress/gutenberg/pull/22942))
+
+### Documentation
+
+-   Handbook
+    -   Fix links for dynamic blocks page. ([22945](https://github.com/WordPress/gutenberg/pull/22945))
+    -   theme.json specification: document link color feature ([22929](https://github.com/WordPress/gutenberg/pull/22929)) and features integration. ([22622](https://github.com/WordPress/gutenberg/pull/22622))
+    -   Block Registration: document use of innerBlocks in example property. ([22633](https://github.com/WordPress/gutenberg/pull/22633))
+    -   Reusable blocks: initial improvement to documentation. ([21843](https://github.com/WordPress/gutenberg/pull/21843))
+    -   Default to ESNext syntax in MetaBox & Block tutorials. ([22748](https://github.com/WordPress/gutenberg/pull/22748), [22973](https://github.com/WordPress/gutenberg/pull/22973))
+    -   Block Tutorial: fixed typo in the wp_register_script function. ([22755](https://github.com/WordPress/gutenberg/pull/22755))
+-   JSDoc comments:
+    -   \_\_experimentalAddAnnotation ([22794](https://github.com/WordPress/gutenberg/pull/22794))
+    -   Block Editor ([22981](https://github.com/WordPress/gutenberg/pull/22981)) ([22976](https://github.com/WordPress/gutenberg/pull/22976)) ([22975](https://github.com/WordPress/gutenberg/pull/22975))
+    -   Block Library ([22982](https://github.com/WordPress/gutenberg/pull/22982))
+    -   Blocks ([22943](https://github.com/WordPress/gutenberg/pull/22943))
+    -   Components ([22971](https://github.com/WordPress/gutenberg/pull/22971))
+    -   Core Data ([22966](https://github.com/WordPress/gutenberg/pull/22966))
+    -   Edit Post ([22944](https://github.com/WordPress/gutenberg/pull/22944))
+    -   end-to-end test utils ([22948](https://github.com/WordPress/gutenberg/pull/22948))
+    -   Env ([22911](https://github.com/WordPress/gutenberg/pull/22911)) ([20522](https://github.com/WordPress/gutenberg/pull/20522))
+    -   Format library ([22913](https://github.com/WordPress/gutenberg/pull/22913))
+    -   Interface ([22964](https://github.com/WordPress/gutenberg/pull/22964))
+-   Contributor docs:
+    -   Add code examples section. ([22974](https://github.com/WordPress/gutenberg/pull/22974))
+    -   Update triage to include release instructions. ([22335](https://github.com/WordPress/gutenberg/pull/22335))
+    -   Update repository management with proposed guidelines. ([22679](https://github.com/WordPress/gutenberg/pull/22679))
+-   Env:
+    -   Reference destroy command. ([22643](https://github.com/WordPress/gutenberg/pull/22643))
+    -   Fix use of backticks. ([22980](https://github.com/WordPress/gutenberg/pull/22980))
+-   Improve e2e-test README. ([22661](https://github.com/WordPress/gutenberg/pull/22661), [22654](https://github.com/WordPress/gutenberg/pull/22654))
+-   Move BlockDropZone react hook and update documentation. ([22619](https://github.com/WordPress/gutenberg/pull/22619))
+-   Update PULL_REQUEST_TEMPLATE.md to include PR documentation nudge. ([22681](https://github.com/WordPress/gutenberg/pull/22681))
+
+### Code Quality
 
+-   Refactor some components to use hooks:
+    -   BlockTitle ([22910](https://github.com/WordPress/gutenberg/pull/22910))
+    -   BlockCompare ([22909](https://github.com/WordPress/gutenberg/pull/22909))
+    -   TabPanel ([22906](https://github.com/WordPress/gutenberg/pull/22906))
+    -   AudioEdit([22901](https://github.com/WordPress/gutenberg/pull/22901))
+    -   ImageSizeControl ([22899](https://github.com/WordPress/gutenberg/pull/22899))
+    -   FormFileUpload ([22894](https://github.com/WordPress/gutenberg/pull/22894))
+-   Polish ImageSizeControl. ([22917](https://github.com/WordPress/gutenberg/pull/22917))
+-   Latest Posts Block: add key to category select box. ([22904](https://github.com/WordPress/gutenberg/pull/22904))
+-   Rename the navigation mode BlockBreadcrumb component to BlockSelectionButton. ([22882](https://github.com/WordPress/gutenberg/pull/22882))
+-   Extract inserter state into reusable hooks. ([22710](https://github.com/WordPress/gutenberg/pull/22710))
+-   Replace function expressions with named function or arrow expression. ([22647](https://github.com/WordPress/gutenberg/pull/22647))
+-   Remove unused isDraggable prop from BlockList. ([22615](https://github.com/WordPress/gutenberg/pull/22615))
+-   Remove form control resets and include the styles in the components. ([22596](https://github.com/WordPress/gutenberg/pull/22596))
+-   Project Management Automation: reorganize folder structure. ([22574](https://github.com/WordPress/gutenberg/pull/22574))
+-   Dependency Extraction Webpack Plugin: add types. ([22498](https://github.com/WordPress/gutenberg/pull/22498))
+-   Blocks: Avoid separate host matching constant for embeds. ([13755](https://github.com/WordPress/gutenberg/pull/13755))
+
+### Breaking Changes
+
+-   Scripts: Remove legacy env command. ([22953](https://github.com/WordPress/gutenberg/pull/22953))
+-   ESLint Plugin/Scripts: Update ESLint and related deps to 7.1.0. ([22771](https://github.com/WordPress/gutenberg/pull/22771))
 
+### Build Tooling
+
+-   Env package:
+    -   Add an interactive bash command. ([22611](https://github.com/WordPress/gutenberg/pull/22611))
+    -   Ensure correct port setting on related wp-config params. ([22559](https://github.com/WordPress/gutenberg/pull/22559))
+    -   Update Source type to WPSource. ([22785](https://github.com/WordPress/gutenberg/pull/22785))
+    -   Fix ssh-auth nodegit + better snap pack detection. ([22649](https://github.com/WordPress/gutenberg/pull/22649))
+    -   Correct multisite support. ([22613](https://github.com/WordPress/gutenberg/pull/22613))
+    -   Update copy-dir dependency to version 1.3.0. ([22682](https://github.com/WordPress/gutenberg/pull/22682))
+-   Create Block:
+    -   Integrate CSS import in JS with esnext template. ([22727](https://github.com/WordPress/gutenberg/pull/22727))
+    -   Enhancements for the upcoming npm release. ([22978](https://github.com/WordPress/gutenberg/pull/22978))
+-   Scripts:
+    -   Add support for postcss.config.js. ([22735](https://github.com/WordPress/gutenberg/pull/22735))
+    -   Support split Jest configuration for test commands. ([22477](https://github.com/WordPress/gutenberg/pull/22477))
+    -   Split webpack loader rules for CSS and Sass files. ([22786](https://github.com/WordPress/gutenberg/pull/22786))
+-   Release tool: warn about open issues in milestone before starting release. ([22764](https://github.com/WordPress/gutenberg/pull/22764))
+-   Changelog tool: Enhance entry normalizations. ([22601](https://github.com/WordPress/gutenberg/pull/22601))
+-   Performance tool: fixes to run across branches. ([22676](https://github.com/WordPress/gutenberg/pull/22676))
+
+### Various
 
+-   Use Card instead of Panel for the block editor. ([22827](https://github.com/WordPress/gutenberg/pull/22827))
+-   Revert add selectionStart and selectionEnd to transientEdits. ([22933](https://github.com/WordPress/gutenberg/pull/22933))
+-   BlockEditor: fix readme syntax. ([22809](https://github.com/WordPress/gutenberg/pull/22809))
+-   Trigger additional widget setup actions. ([22807](https://github.com/WordPress/gutenberg/pull/22807))
+-   Align navigator icon and buttons to top. ([22790](https://github.com/WordPress/gutenberg/pull/22790))
+-   Set default selection to the root navigation block. ([22737](https://github.com/WordPress/gutenberg/pull/22737))
+-   end-to-end tests:
+    -   Disable inconsistent test for gallery. ([22726](https://github.com/WordPress/gutenberg/pull/22726))
+    -   Specify icon for block context test blocks. ([22811](https://github.com/WordPress/gutenberg/pull/22811))
+    -   Configure Axe to ignore media modal markup. ([22719](https://github.com/WordPress/gutenberg/pull/22719))
+    -   Define end-to-end test experimental features utility as lifecycle helper. ([22712](https://github.com/WordPress/gutenberg/pull/22712))
+-   CODEOWNERS updates. ([22725](https://github.com/WordPress/gutenberg/pull/22725))
+-   Add data-handle to all script tags in the admin. ([22721](https://github.com/WordPress/gutenberg/pull/22721))
+-   Add onDeleteBlock to the extra data to re-render when it has changes. ([22716](https://github.com/WordPress/gutenberg/pull/22716))
+-   Add support for page=1 and perPage=-1 to getMergedItemIds. ([22707](https://github.com/WordPress/gutenberg/pull/22707))
+-   Replace three experimental flags (ellipsis menu w/ min level, navigator slots) with just \_\_experimentalFeatures. ([22670](https://github.com/WordPress/gutenberg/pull/22670))
+-   Add require headers to plugin and readme (php 5.6). ([22669](https://github.com/WordPress/gutenberg/pull/22669))
+-   Update package-lock.json so that CI tests pass. ([22667](https://github.com/WordPress/gutenberg/pull/22667))
+-   Framework: Upgrade to wp-prettier@2.x. ([22610](https://github.com/WordPress/gutenberg/pull/22610))
+-   Remove the multi-block type check to make \_\_experimentalConvert more useful. ([22577](https://github.com/WordPress/gutenberg/pull/22577))
+-   Mousetrap: Update to latest stable version. ([22548](https://github.com/WordPress/gutenberg/pull/22548))
 
 = 8.2.1 =
 
-### Changelog:
+## Changelog
 
-- Fix Image alignments.
-- Fix gallery block initial creation via media library
+### Bug Fixes
 
+-   Fix Image alignments.
+-   Fix gallery block initial creation via media library
 
 = 8.2.0 =
 
-### Features
+## Changelog
 
-- Cover block: Support customizing the content alignment. ([21091](https://github.com/WordPress/gutenberg/pull/21091)) ([22322](https://github.com/WordPress/gutenberg/pull/22322))
-- Add Block Pattern Categories Support. ([22164](https://github.com/WordPress/gutenberg/pull/22164)) ([22410](https://github.com/WordPress/gutenberg/pull/22410))
-- Copy the whole block if no text is selected. ([22186](https://github.com/WordPress/gutenberg/pull/22186))
+### Features
 
+-   Cover block: Support customizing the content alignment. ([21091](https://github.com/WordPress/gutenberg/pull/21091)) ([22322](https://github.com/WordPress/gutenberg/pull/22322))
+-   Add Block Pattern Categories Support. ([22164](https://github.com/WordPress/gutenberg/pull/22164)) ([22410](https://github.com/WordPress/gutenberg/pull/22410))
+-   Copy the whole block if no text is selected. ([22186](https://github.com/WordPress/gutenberg/pull/22186))
 
 ### Enhancements
 
-- Limit the most used blocks in the inserter to 6 elements. ([22521](https://github.com/WordPress/gutenberg/pull/22521))
-- Allow split out of caption on Enter. ([22290](https://github.com/WordPress/gutenberg/pull/22290))
-- Buttons block: Allow split and merge. ([22436](https://github.com/WordPress/gutenberg/pull/22436))
-- Improve video backgrounds for the Cover block in iOS. ([22346](https://github.com/WordPress/gutenberg/pull/22346))
-- Combine Calendar Help and Close buttons in the date and time picker. ([22176](https://github.com/WordPress/gutenberg/pull/22176))
-- @wordpress/env: Better run command errors. ([22475](https://github.com/WordPress/gutenberg/pull/22475))
-- Add support for named orientations and literal colors on custom gradients. ([22239](https://github.com/WordPress/gutenberg/pull/22239))
-- Use theme color as focus color. ([22261](https://github.com/WordPress/gutenberg/pull/22261))
-- Refine the specificity of the embed block styles. ([21599](https://github.com/WordPress/gutenberg/pull/21599))
-- Change inserter search placeholder text color. ([22444](https://github.com/WordPress/gutenberg/pull/22444))
-- Improve interactions and add unit parsing to the unit selector used in Cover block. ([22329](https://github.com/WordPress/gutenberg/pull/22329))
-- Use smaller spacer and cover block step values. ([22320](https://github.com/WordPress/gutenberg/pull/22320))
-- A11y: Add explanatory text before the a11y.speak aria-live regions. ([22112](https://github.com/WordPress/gutenberg/pull/22112))
-- Add Animoto, Dailymotion block embed icons. ([21882](https://github.com/WordPress/gutenberg/pull/21882))
-- Group block: Match frontend markup in the editor. ([21867](https://github.com/WordPress/gutenberg/pull/21867))
-- Iterations on the welcome guide. ([21847](https://github.com/WordPress/gutenberg/pull/21847))
-- Don't show protocol in link suggestions. ([20350](https://github.com/WordPress/gutenberg/pull/20350))
-- New Block Patterns:
-  - Hero and two columns. ([21130](https://github.com/WordPress/gutenberg/pull/21130))
-  - Features or Services. ([20898](https://github.com/WordPress/gutenberg/pull/20898))
-
+-   Limit the most used blocks in the inserter to 6 elements. ([22521](https://github.com/WordPress/gutenberg/pull/22521))
+-   Allow split out of caption on Enter. ([22290](https://github.com/WordPress/gutenberg/pull/22290))
+-   Buttons block: Allow split and merge. ([22436](https://github.com/WordPress/gutenberg/pull/22436))
+-   Improve video backgrounds for the Cover block in iOS. ([22346](https://github.com/WordPress/gutenberg/pull/22346))
+-   Combine Calendar Help and Close buttons in the date and time picker. ([22176](https://github.com/WordPress/gutenberg/pull/22176))
+-   @wordpress/env: Better run command errors. ([22475](https://github.com/WordPress/gutenberg/pull/22475))
+-   Add support for named orientations and literal colors on custom gradients. ([22239](https://github.com/WordPress/gutenberg/pull/22239))
+-   Use theme color as focus color. ([22261](https://github.com/WordPress/gutenberg/pull/22261))
+-   Refine the specificity of the embed block styles. ([21599](https://github.com/WordPress/gutenberg/pull/21599))
+-   Change inserter search placeholder text color. ([22444](https://github.com/WordPress/gutenberg/pull/22444))
+-   Improve interactions and add unit parsing to the unit selector used in Cover block. ([22329](https://github.com/WordPress/gutenberg/pull/22329))
+-   Use smaller spacer and cover block step values. ([22320](https://github.com/WordPress/gutenberg/pull/22320))
+-   A11y: Add explanatory text before the a11y.speak aria-live regions. ([22112](https://github.com/WordPress/gutenberg/pull/22112))
+-   Add Animoto, Dailymotion block embed icons. ([21882](https://github.com/WordPress/gutenberg/pull/21882))
+-   Group block: Match frontend markup in the editor. ([21867](https://github.com/WordPress/gutenberg/pull/21867))
+-   Iterations on the welcome guide. ([21847](https://github.com/WordPress/gutenberg/pull/21847))
+-   Don't show protocol in link suggestions. ([20350](https://github.com/WordPress/gutenberg/pull/20350))
+-   New Block Patterns:
+    -   Hero and two columns. ([21130](https://github.com/WordPress/gutenberg/pull/21130))
+    -   Features or Services. ([20898](https://github.com/WordPress/gutenberg/pull/20898))
 
 ### New APIs
 
-- React Hooks:
-  - Add new React hook UseCopyOnClick as an alternative to the ClipboardButton component. ([22224](https://github.com/WordPress/gutenberg/pull/22224))
-  - Add usePrevious hook to @wordpress/compose package. ([22540](https://github.com/WordPress/gutenberg/pull/22540)) ([22597](https://github.com/WordPress/gutenberg/pull/22597))
-- @wordpress/env:
-  - Granular volume mappings. ([22256](https://github.com/WordPress/gutenberg/pull/22256))
-  - Add command to display Docker container logs. ([21737](https://github.com/WordPress/gutenberg/pull/21737))
-  - Add a destroy command. ([21529](https://github.com/WordPress/gutenberg/pull/21529))
-- @wordpress/scripts:
-  - Add CSS support to start and build scripts. ([21730](https://github.com/WordPress/gutenberg/pull/21730))
-  - Support enabling/disabling dev tools, bundle analyzer and externals for build and start scripts. ([22310](https://github.com/WordPress/gutenberg/pull/22310)) [22426](https://github.com/WordPress/gutenberg/pull/22426)
-  - Add phpunit support. ([20090](https://github.com/WordPress/gutenberg/pull/20090))
-- Support preloading API requests using the `fetchAllMiddleware` middleware. ([22510](https://github.com/WordPress/gutenberg/pull/22510))
-- Support controlled InnerBlocks. ([21368](https://github.com/WordPress/gutenberg/pull/21368)) ([22366](https://github.com/WordPress/gutenberg/pull/22366))
-- Add Close button filter. ([22323](https://github.com/WordPress/gutenberg/pull/22323))
-- Block API: Allow block registration without category. ([22280](https://github.com/WordPress/gutenberg/pull/22280))
-- Support customizing the `viewportWidth` for block patterns. ([22216](https://github.com/WordPress/gutenberg/pull/22216))
-
-
-### Bug Fixes
-
-- Fix theme CSS bleed in the Button component. ([22460](https://github.com/WordPress/gutenberg/pull/22460)) ([22522](https://github.com/WordPress/gutenberg/pull/22522))
-- Fix CSS validation error on Button block styles. ([22583](https://github.com/WordPress/gutenberg/pull/22583))
-- Fix editor crash potentially happening when hovering style variations. ([22490](https://github.com/WordPress/gutenberg/pull/22490))
-- @wordpress/env: Start database service before running tasks. ([22486](https://github.com/WordPress/gutenberg/pull/22486))
-- Fix editor crash when zooming. ([22408](https://github.com/WordPress/gutenberg/pull/22408))
-- Fix Button border radius set as 0. ([22393](https://github.com/WordPress/gutenberg/pull/22393))
-- Fix Cover block resizing. ([22349](https://github.com/WordPress/gutenberg/pull/22349))
-- Writing Flow: Fix reverse block selection after block deletion from rich text. ([22292](https://github.com/WordPress/gutenberg/pull/22292))
-- A11y: Include reusable blocks in announced inserter search results. ([22279](https://github.com/WordPress/gutenberg/pull/22279))
-- Remove the previous style CSS class when the default style variation is chosen. ([22266](https://github.com/WordPress/gutenberg/pull/22266))
-- Show the global inserter in container blocks nested inside locked templates. ([22115](https://github.com/WordPress/gutenberg/pull/22115))
-- Prevent the Page Break block from showing up as the first block in the inserter. ([22523](https://github.com/WordPress/gutenberg/pull/22523))
-- Polish code editor and fix iOS scrolling issue. ([22021](https://github.com/WordPress/gutenberg/pull/22021))
-- `LinkControl` component: Fix search result focus state border. ([22553](https://github.com/WordPress/gutenberg/pull/22553))
-- Prevent contributors for accessing the Media Modal. ([22306](https://github.com/WordPress/gutenberg/pull/22306))
+-   React Hooks:
+    -   Add new React hook UseCopyOnClick as an alternative to the ClipboardButton component. ([22224](https://github.com/WordPress/gutenberg/pull/22224))
+    -   Add usePrevious hook to @wordpress/compose package. ([22540](https://github.com/WordPress/gutenberg/pull/22540)) ([22597](https://github.com/WordPress/gutenberg/pull/22597))
+-   @wordpress/env:
+    -   Granular volume mappings. ([22256](https://github.com/WordPress/gutenberg/pull/22256))
+    -   Add command to display Docker container logs. ([21737](https://github.com/WordPress/gutenberg/pull/21737))
+    -   Add a destroy command. ([21529](https://github.com/WordPress/gutenberg/pull/21529))
+-   @wordpress/scripts:
+    -   Add CSS support to start and build scripts. ([21730](https://github.com/WordPress/gutenberg/pull/21730))
+    -   Support enabling/disabling dev tools, bundle analyzer and externals for build and start scripts. ([22310](https://github.com/WordPress/gutenberg/pull/22310)) [22426](https://github.com/WordPress/gutenberg/pull/22426)
+    -   Add phpunit support. ([20090](https://github.com/WordPress/gutenberg/pull/20090))
+-   Support preloading API requests using the `fetchAllMiddleware` middleware. ([22510](https://github.com/WordPress/gutenberg/pull/22510))
+-   Support controlled InnerBlocks. ([21368](https://github.com/WordPress/gutenberg/pull/21368)) ([22366](https://github.com/WordPress/gutenberg/pull/22366))
+-   Add Close button filter. ([22323](https://github.com/WordPress/gutenberg/pull/22323))
+-   Block API: Allow block registration without category. ([22280](https://github.com/WordPress/gutenberg/pull/22280))
+-   Support customizing the `viewportWidth` for block patterns. ([22216](https://github.com/WordPress/gutenberg/pull/22216))
+
+### Bug Fixes
 
+-   Fix theme CSS bleed in the Button component. ([22460](https://github.com/WordPress/gutenberg/pull/22460)) ([22522](https://github.com/WordPress/gutenberg/pull/22522))
+-   Fix CSS validation error on Button block styles. ([22583](https://github.com/WordPress/gutenberg/pull/22583))
+-   Fix editor crash potentially happening when hovering style variations. ([22490](https://github.com/WordPress/gutenberg/pull/22490))
+-   @wordpress/env: Start database service before running tasks. ([22486](https://github.com/WordPress/gutenberg/pull/22486))
+-   Fix editor crash when zooming. ([22408](https://github.com/WordPress/gutenberg/pull/22408))
+-   Fix Button border radius set as 0. ([22393](https://github.com/WordPress/gutenberg/pull/22393))
+-   Fix Cover block resizing. ([22349](https://github.com/WordPress/gutenberg/pull/22349))
+-   Writing Flow: Fix reverse block selection after block deletion from rich text. ([22292](https://github.com/WordPress/gutenberg/pull/22292))
+-   A11y: Include reusable blocks in announced inserter search results. ([22279](https://github.com/WordPress/gutenberg/pull/22279))
+-   Remove the previous style CSS class when the default style variation is chosen. ([22266](https://github.com/WordPress/gutenberg/pull/22266))
+-   Show the global inserter in container blocks nested inside locked templates. ([22115](https://github.com/WordPress/gutenberg/pull/22115))
+-   Prevent the Page Break block from showing up as the first block in the inserter. ([22523](https://github.com/WordPress/gutenberg/pull/22523))
+-   Polish code editor and fix iOS scrolling issue. ([22021](https://github.com/WordPress/gutenberg/pull/22021))
+-   `LinkControl` component: Fix search result focus state border. ([22553](https://github.com/WordPress/gutenberg/pull/22553))
+-   Prevent contributors for accessing the Media Modal. ([22306](https://github.com/WordPress/gutenberg/pull/22306))
 
 ### Performance
 
-- Adds a command to run performance tests across branches. ([22418](https://github.com/WordPress/gutenberg/pull/22418))
-- useMovingAnimation: Avoid initial transform animation. ([22536](https://github.com/WordPress/gutenberg/pull/22536))
-- Optimize resizable preview hooks. ([22511](https://github.com/WordPress/gutenberg/pull/22511))
-- Short-circuit validation for identical markup. ([22506](https://github.com/WordPress/gutenberg/pull/22506))
-- More accurate dependency list for useGenericPreviewBlock hook. ([22355](https://github.com/WordPress/gutenberg/pull/22355))
-- Add missing side-effect declarations. ([22300](https://github.com/WordPress/gutenberg/pull/22300))
-
+-   Adds a command to run performance tests across branches. ([22418](https://github.com/WordPress/gutenberg/pull/22418))
+-   useMovingAnimation: Avoid initial transform animation. ([22536](https://github.com/WordPress/gutenberg/pull/22536))
+-   Optimize resizable preview hooks. ([22511](https://github.com/WordPress/gutenberg/pull/22511))
+-   Short-circuit validation for identical markup. ([22506](https://github.com/WordPress/gutenberg/pull/22506))
+-   More accurate dependency list for useGenericPreviewBlock hook. ([22355](https://github.com/WordPress/gutenberg/pull/22355))
+-   Add missing side-effect declarations. ([22300](https://github.com/WordPress/gutenberg/pull/22300))
 
 ### Experimental
 
-- Full Site Editing and Site Editor screen:
-  - Add page-based navigation. ([22368](https://github.com/WordPress/gutenberg/pull/22368))
-  - Page and Template switchers improvements. ([22449](https://github.com/WordPress/gutenberg/pull/22449))
-  - Add Query block. ([22199](https://github.com/WordPress/gutenberg/pull/22199)) ([22364](https://github.com/WordPress/gutenberg/pull/22364))
-  - Use the inserter panel. ([22413](https://github.com/WordPress/gutenberg/pull/22413))
-  - Add basic "tools" menu. ([22539](https://github.com/WordPress/gutenberg/pull/22539))
-  - Implement post switcher and integrate with "navigate to link". ([22543](https://github.com/WordPress/gutenberg/pull/22543))
-  - Add focus mode and top toolbar modes. ([22537](https://github.com/WordPress/gutenberg/pull/22537))
-  - Add entity editor to post content block. ([22473](https://github.com/WordPress/gutenberg/pull/22473))
-  - Add 'Review changes' button for multi entity saving flow. ([22450](https://github.com/WordPress/gutenberg/pull/22450))
-  - Fix Post Author block render issues. ([22397](https://github.com/WordPress/gutenberg/pull/22397))
-  - Refactor Post Author block to use block context. ([22359](https://github.com/WordPress/gutenberg/pull/22359))
-  - Templates Endpoint: Add `resolved` query arg to return only relevant templates. ([21981](https://github.com/WordPress/gutenberg/pull/21981))
-- Navigation Block and Screen:
-  - Add block movers to the block navigator. ([18014](https://github.com/WordPress/gutenberg/pull/18014))
-  - Add ellipsis menu to block navigator. ([22427](https://github.com/WordPress/gutenberg/pull/22427)) ([22517](https://github.com/WordPress/gutenberg/pull/22517))
-  - Add standard notices to nav menu page. ([22374](https://github.com/WordPress/gutenberg/pull/22374))
-  - Implement the creation of menus on the edit navigation screen. ([22309](https://github.com/WordPress/gutenberg/pull/22309))
-  - Add menu location management. ([21351](https://github.com/WordPress/gutenberg/pull/21351))
-  - Link block: Add RichText split-at-end/merge/remove behavior. ([21764](https://github.com/WordPress/gutenberg/pull/21764))
-  - Fix navigation block placeholder overlap. ([22407](https://github.com/WordPress/gutenberg/pull/22407))
-  - Adds orientation class on frontend for the navigation block. ([22272](https://github.com/WordPress/gutenberg/pull/22272))
-  - Refactor block navigation block contents. ([22487](https://github.com/WordPress/gutenberg/pull/22487))
-  - Fix navigation screen crash with no menu items. ([22342](https://github.com/WordPress/gutenberg/pull/22342))
-  - Adds save and failure notices to the navigation screen. ([22326](https://github.com/WordPress/gutenberg/pull/22326))
-  - Display the block appender only for the currently active menu. ([22311](https://github.com/WordPress/gutenberg/pull/22311))
-  - Allow editing of new menu items from the block inspector. ([22210](https://github.com/WordPress/gutenberg/pull/22210))
-  - Submenu nesting and saving new nested items. ([21671](https://github.com/WordPress/gutenberg/pull/21671))
-- Block-based Widgets screen and Customizer tab:
-  - Use interface package on widgets screen sidebar. ([22304](https://github.com/WordPress/gutenberg/pull/22304))
-  - Use single block editor in the widgets screen. ([22140](https://github.com/WordPress/gutenberg/pull/22140)) ([22459](https://github.com/WordPress/gutenberg/pull/22459))
-  - Use the mobile view for the Customizer. ([22533](https://github.com/WordPress/gutenberg/pull/22533))
-  - Add legacy widget to calendar transform. ([14586](https://github.com/WordPress/gutenberg/pull/14586))
-- Global Styles and theme.json:
-  - Implement Managed CSS for Global Styles. ([20290](https://github.com/WordPress/gutenberg/pull/20290))
-  - Support theme.json in Post editor. ([22520](https://github.com/WordPress/gutenberg/pull/22520))
-- Block Directory:
-  - Activate deactivated blocks if already installed . ([22286](https://github.com/WordPress/gutenberg/pull/22286))
-  - Only support an array of assets when injecting assets. ([22289](https://github.com/WordPress/gutenberg/pull/22289))
-  - Remove the author rating when none exist. ([22184](https://github.com/WordPress/gutenberg/pull/22184))
-  - Update layout for smaller inserter width. ([22124](https://github.com/WordPress/gutenberg/pull/22124))
-  - Add error messages inline. ([20001](https://github.com/WordPress/gutenberg/pull/20001))
-
+-   Full Site Editing and Site Editor screen:
+    -   Add page-based navigation. ([22368](https://github.com/WordPress/gutenberg/pull/22368))
+    -   Page and Template switchers improvements. ([22449](https://github.com/WordPress/gutenberg/pull/22449))
+    -   Add Query block. ([22199](https://github.com/WordPress/gutenberg/pull/22199)) ([22364](https://github.com/WordPress/gutenberg/pull/22364))
+    -   Use the inserter panel. ([22413](https://github.com/WordPress/gutenberg/pull/22413))
+    -   Add basic "tools" menu. ([22539](https://github.com/WordPress/gutenberg/pull/22539))
+    -   Implement post switcher and integrate with "navigate to link". ([22543](https://github.com/WordPress/gutenberg/pull/22543))
+    -   Add focus mode and top toolbar modes. ([22537](https://github.com/WordPress/gutenberg/pull/22537))
+    -   Add entity editor to post content block. ([22473](https://github.com/WordPress/gutenberg/pull/22473))
+    -   Add 'Review changes' button for multi entity saving flow. ([22450](https://github.com/WordPress/gutenberg/pull/22450))
+    -   Fix Post Author block render issues. ([22397](https://github.com/WordPress/gutenberg/pull/22397))
+    -   Refactor Post Author block to use block context. ([22359](https://github.com/WordPress/gutenberg/pull/22359))
+    -   Templates Endpoint: Add `resolved` query arg to return only relevant templates. ([21981](https://github.com/WordPress/gutenberg/pull/21981))
+-   Navigation Block and Screen:
+    -   Add block movers to the block navigator. ([18014](https://github.com/WordPress/gutenberg/pull/18014))
+    -   Add ellipsis menu to block navigator. ([22427](https://github.com/WordPress/gutenberg/pull/22427)) ([22517](https://github.com/WordPress/gutenberg/pull/22517))
+    -   Add standard notices to nav menu page. ([22374](https://github.com/WordPress/gutenberg/pull/22374))
+    -   Implement the creation of menus on the edit navigation screen. ([22309](https://github.com/WordPress/gutenberg/pull/22309))
+    -   Add menu location management. ([21351](https://github.com/WordPress/gutenberg/pull/21351))
+    -   Link block: Add RichText split-at-end/merge/remove behavior. ([21764](https://github.com/WordPress/gutenberg/pull/21764))
+    -   Fix navigation block placeholder overlap. ([22407](https://github.com/WordPress/gutenberg/pull/22407))
+    -   Adds orientation class on frontend for the navigation block. ([22272](https://github.com/WordPress/gutenberg/pull/22272))
+    -   Refactor block navigation block contents. ([22487](https://github.com/WordPress/gutenberg/pull/22487))
+    -   Fix navigation screen crash with no menu items. ([22342](https://github.com/WordPress/gutenberg/pull/22342))
+    -   Adds save and failure notices to the navigation screen. ([22326](https://github.com/WordPress/gutenberg/pull/22326))
+    -   Display the block appender only for the currently active menu. ([22311](https://github.com/WordPress/gutenberg/pull/22311))
+    -   Allow editing of new menu items from the block inspector. ([22210](https://github.com/WordPress/gutenberg/pull/22210))
+    -   Submenu nesting and saving new nested items. ([21671](https://github.com/WordPress/gutenberg/pull/21671))
+-   Block-based Widgets screen and Customizer tab:
+    -   Use interface package on widgets screen sidebar. ([22304](https://github.com/WordPress/gutenberg/pull/22304))
+    -   Use single block editor in the widgets screen. ([22140](https://github.com/WordPress/gutenberg/pull/22140)) ([22459](https://github.com/WordPress/gutenberg/pull/22459))
+    -   Use the mobile view for the Customizer. ([22533](https://github.com/WordPress/gutenberg/pull/22533))
+    -   Add legacy widget to calendar transform. ([14586](https://github.com/WordPress/gutenberg/pull/14586))
+-   Global Styles and theme.json:
+    -   Implement Managed CSS for Global Styles. ([20290](https://github.com/WordPress/gutenberg/pull/20290))
+    -   Support theme.json in Post editor. ([22520](https://github.com/WordPress/gutenberg/pull/22520))
+-   Block Directory:
+    -   Activate deactivated blocks if already installed . ([22286](https://github.com/WordPress/gutenberg/pull/22286))
+    -   Only support an array of assets when injecting assets. ([22289](https://github.com/WordPress/gutenberg/pull/22289))
+    -   Remove the author rating when none exist. ([22184](https://github.com/WordPress/gutenberg/pull/22184))
+    -   Update layout for smaller inserter width. ([22124](https://github.com/WordPress/gutenberg/pull/22124))
+    -   Add error messages inline. ([20001](https://github.com/WordPress/gutenberg/pull/20001))
 
 ### Documentation
 
-- Document experimental theme.json. ([22518](https://github.com/WordPress/gutenberg/pull/22518))
-- Fix duplicate grammar docs. ([22466](https://github.com/WordPress/gutenberg/pull/22466))
-- Document the performance testing commands. ([22464](https://github.com/WordPress/gutenberg/pull/22464))
-- Docs: Update note for extraProps filter. ([22419](https://github.com/WordPress/gutenberg/pull/22419))
-- Recommend adding an API docs section. ([22415](https://github.com/WordPress/gutenberg/pull/22415))
-- Add side effect documentation. ([22379](https://github.com/WordPress/gutenberg/pull/22379))
-- Update block editor docs to incorporate the block-toolbar Popover Slot. ([22308](https://github.com/WordPress/gutenberg/pull/22308))
-- Adds a README to `MediaReplaceFlow`. ([22268](https://github.com/WordPress/gutenberg/pull/22268))
-- Typos and tweaks: ([22254](https://github.com/WordPress/gutenberg/pull/22254)) ([21968](https://github.com/WordPress/gutenberg/pull/21968)) ([21695](https://github.com/WordPress/gutenberg/pull/21695)) ([22554](https://github.com/WordPress/gutenberg/pull/22554))
-
+-   Document experimental theme.json. ([22518](https://github.com/WordPress/gutenberg/pull/22518))
+-   Fix duplicate grammar docs. ([22466](https://github.com/WordPress/gutenberg/pull/22466))
+-   Document the performance testing commands. ([22464](https://github.com/WordPress/gutenberg/pull/22464))
+-   Docs: Update note for extraProps filter. ([22419](https://github.com/WordPress/gutenberg/pull/22419))
+-   Recommend adding an API docs section. ([22415](https://github.com/WordPress/gutenberg/pull/22415))
+-   Add side effect documentation. ([22379](https://github.com/WordPress/gutenberg/pull/22379))
+-   Update block editor docs to incorporate the block-toolbar Popover Slot. ([22308](https://github.com/WordPress/gutenberg/pull/22308))
+-   Adds a README to `MediaReplaceFlow`. ([22268](https://github.com/WordPress/gutenberg/pull/22268))
+-   Typos and tweaks: ([22254](https://github.com/WordPress/gutenberg/pull/22254)) ([21968](https://github.com/WordPress/gutenberg/pull/21968)) ([21695](https://github.com/WordPress/gutenberg/pull/21695)) ([22554](https://github.com/WordPress/gutenberg/pull/22554))
 
 ### Code Quality
 
-- Avoid circular dependency issue in `AutoBlockPreview`. ([22425](https://github.com/WordPress/gutenberg/pull/22425))
-- Remove opinionated label color from `CustomSelectControl` component. ([22594](https://github.com/WordPress/gutenberg/pull/22594))
-- Image block:
-  - Use hooks. ([22499](https://github.com/WordPress/gutenberg/pull/22499)) ([22277](https://github.com/WordPress/gutenberg/pull/22277))
-  - Remove extra div wrapper in the editor. ([22585](https://github.com/WordPress/gutenberg/pull/22585))
-- Remove redundant condition from setting default grouping. ([22563](https://github.com/WordPress/gutenberg/pull/22563))
-- Testing: Replace require.requireActual with jest.requireActual. ([22370](https://github.com/WordPress/gutenberg/pull/22370))
-- Use a light block DOM for the Cover block to map frontend markup. ([22348](https://github.com/WordPress/gutenberg/pull/22348))
-- Rename a complementary area component property. ([22336](https://github.com/WordPress/gutenberg/pull/22336))
-- Block API: WP_Block: Document attributes class property. ([22222](https://github.com/WordPress/gutenberg/pull/22222))
-- Polish block wrapper elements file. ([21304](https://github.com/WordPress/gutenberg/pull/21304))
-- Move `supports` to `block.json` files for core blocks. ([22422](https://github.com/WordPress/gutenberg/pull/22422))
-- Create Block: Simplify the process of defining a config for templates. ([22235](https://github.com/WordPress/gutenberg/pull/22235))
-- Block Edit: Use hooks. ([22433](https://github.com/WordPress/gutenberg/pull/22433))
-- Add BlockContext component to type-checking. ([22353](https://github.com/WordPress/gutenberg/pull/22353))
-
+-   Avoid circular dependency issue in `AutoBlockPreview`. ([22425](https://github.com/WordPress/gutenberg/pull/22425))
+-   Remove opinionated label color from `CustomSelectControl` component. ([22594](https://github.com/WordPress/gutenberg/pull/22594))
+-   Image block:
+    -   Use hooks. ([22499](https://github.com/WordPress/gutenberg/pull/22499)) ([22277](https://github.com/WordPress/gutenberg/pull/22277))
+    -   Remove extra div wrapper in the editor. ([22585](https://github.com/WordPress/gutenberg/pull/22585))
+-   Remove redundant condition from setting default grouping. ([22563](https://github.com/WordPress/gutenberg/pull/22563))
+-   Testing: Replace require.requireActual with jest.requireActual. ([22370](https://github.com/WordPress/gutenberg/pull/22370))
+-   Use a light block DOM for the Cover block to map frontend markup. ([22348](https://github.com/WordPress/gutenberg/pull/22348))
+-   Rename a complementary area component property. ([22336](https://github.com/WordPress/gutenberg/pull/22336))
+-   Block API: WP_Block: Document attributes class property. ([22222](https://github.com/WordPress/gutenberg/pull/22222))
+-   Polish block wrapper elements file. ([21304](https://github.com/WordPress/gutenberg/pull/21304))
+-   Move `supports` to `block.json` files for core blocks. ([22422](https://github.com/WordPress/gutenberg/pull/22422))
+-   Create Block: Simplify the process of defining a config for templates. ([22235](https://github.com/WordPress/gutenberg/pull/22235))
+-   Block Edit: Use hooks. ([22433](https://github.com/WordPress/gutenberg/pull/22433))
+-   Add BlockContext component to type-checking. ([22353](https://github.com/WordPress/gutenberg/pull/22353))
 
 ### Build Tooling
 
-- ESLint Plugin: Fix dependency group checking for CommonJS. ([22230](https://github.com/WordPress/gutenberg/pull/22230))
--  Restore Playground GitHub Pages deploy. ([22443](https://github.com/WordPress/gutenberg/pull/22443))
-- Fix API Docs generation for filenames with spaces. ([22513](https://github.com/WordPress/gutenberg/pull/22513))
-- Fix check-latest-npm.js failure on Windows. ([22485](https://github.com/WordPress/gutenberg/pull/22485))
-- Refactor the changelog script as a release tool command. ([22380](https://github.com/WordPress/gutenberg/pull/22380))
-- Enable import/no-unresolved ESLint rule for Gutenberg. ([20905](https://github.com/WordPress/gutenberg/pull/20905))
-- Only allow ECMAScript stage 4 features. ([22083](https://github.com/WordPress/gutenberg/pull/22083))
-- Storybook: Use a consistent port number. ([22552](https://github.com/WordPress/gutenberg/pull/22552))
-- Add 0BSD to GPLv2 compatible licenses. ([22391](https://github.com/WordPress/gutenberg/pull/22391))
-- Refactor the release tool and split it into several command files. ([22003](https://github.com/WordPress/gutenberg/pull/22003))
-- Replace wp-scripts env usage with wp-env in CI. ([20280](https://github.com/WordPress/gutenberg/pull/20280))
-
+-   ESLint Plugin: Fix dependency group checking for CommonJS. ([22230](https://github.com/WordPress/gutenberg/pull/22230))
+-   Restore Playground GitHub Pages deploy. ([22443](https://github.com/WordPress/gutenberg/pull/22443))
+-   Fix API Docs generation for filenames with spaces. ([22513](https://github.com/WordPress/gutenberg/pull/22513))
+-   Fix check-latest-npm.js failure on Windows. ([22485](https://github.com/WordPress/gutenberg/pull/22485))
+-   Refactor the changelog script as a release tool command. ([22380](https://github.com/WordPress/gutenberg/pull/22380))
+-   Enable import/no-unresolved ESLint rule for Gutenberg. ([20905](https://github.com/WordPress/gutenberg/pull/20905))
+-   Only allow ECMAScript stage 4 features. ([22083](https://github.com/WordPress/gutenberg/pull/22083))
+-   Storybook: Use a consistent port number. ([22552](https://github.com/WordPress/gutenberg/pull/22552))
+-   Add 0BSD to GPLv2 compatible licenses. ([22391](https://github.com/WordPress/gutenberg/pull/22391))
+-   Refactor the release tool and split it into several command files. ([22003](https://github.com/WordPress/gutenberg/pull/22003))
+-   Replace wp-scripts env usage with wp-env in CI. ([20280](https://github.com/WordPress/gutenberg/pull/20280))
 
 ### Various
 
-- Update: ResizableBox make showHandle true by default. ([22360](https://github.com/WordPress/gutenberg/pull/22360))
-- Fix dirty state end-to-end test intermittent failuire. ([22532](https://github.com/WordPress/gutenberg/pull/22532))
-- Fix dirty state end-to-end test. ([22448](https://github.com/WordPress/gutenberg/pull/22448))
-- Add a simple block patterns end-to-end tests and a test utility. ([22414](https://github.com/WordPress/gutenberg/pull/22414)) ([22495](https://github.com/WordPress/gutenberg/pull/22495))
-- Remove insert block delay from end-to-end tests. ([22377](https://github.com/WordPress/gutenberg/pull/22377))
-- Add an end to end test to verify cover can be resized with drag & drop. ([22369](https://github.com/WordPress/gutenberg/pull/22369))
-- Upgrade Reakit to stable v1.0.0. ([22352](https://github.com/WordPress/gutenberg/pull/22352))
-- Use alternate display for the popover in alignment matrix. ([22351](https://github.com/WordPress/gutenberg/pull/22351))
-- Fix deprecated version used for register_pattern. ([22341](https://github.com/WordPress/gutenberg/pull/22341))
-- API Fetch: Remove deprecated useApiFetch. ([22333](https://github.com/WordPress/gutenberg/pull/22333))
-- Framework: Pin nvmrc to specific current LTS. ([22236](https://github.com/WordPress/gutenberg/pull/22236))
-
-
+-   Update: ResizableBox make showHandle true by default. ([22360](https://github.com/WordPress/gutenberg/pull/22360))
+-   Fix dirty state end-to-end test intermittent failuire. ([22532](https://github.com/WordPress/gutenberg/pull/22532))
+-   Fix dirty state end-to-end test. ([22448](https://github.com/WordPress/gutenberg/pull/22448))
+-   Add a simple block patterns end-to-end tests and a test utility. ([22414](https://github.com/WordPress/gutenberg/pull/22414)) ([22495](https://github.com/WordPress/gutenberg/pull/22495))
+-   Remove insert block delay from end-to-end tests. ([22377](https://github.com/WordPress/gutenberg/pull/22377))
+-   Add an end to end test to verify cover can be resized with drag & drop. ([22369](https://github.com/WordPress/gutenberg/pull/22369))
+-   Upgrade Reakit to stable v1.0.0. ([22352](https://github.com/WordPress/gutenberg/pull/22352))
+-   Use alternate display for the popover in alignment matrix. ([22351](https://github.com/WordPress/gutenberg/pull/22351))
+-   Fix deprecated version used for register_pattern. ([22341](https://github.com/WordPress/gutenberg/pull/22341))
+-   API Fetch: Remove deprecated useApiFetch. ([22333](https://github.com/WordPress/gutenberg/pull/22333))
+-   Framework: Pin nvmrc to specific current LTS. ([22236](https://github.com/WordPress/gutenberg/pull/22236))
 
 = 8.1.0 =
 
-### New features
+## Changelog
 
-- Pattern search ([21944](https://github.com/WordPress/gutenberg/pull/21944))
-- Testimonials block pattern. ([20894](https://github.com/WordPress/gutenberg/pull/20894))
-- New Transforms:
-    - Embed blocks into Paragraph blocks. ([17413](https://github.com/WordPress/gutenberg/pull/17413))
-    - Code to HTML block and the opposite. ([21779](https://github.com/WordPress/gutenberg/pull/21779))
-- Add copy action to the blocks. ([22214](https://github.com/WordPress/gutenberg/pull/22214))
+### New features
 
+-   Pattern search ([21944](https://github.com/WordPress/gutenberg/pull/21944))
+-   Testimonials block pattern. ([20894](https://github.com/WordPress/gutenberg/pull/20894))
+-   New Transforms:
+    -   Embed blocks into Paragraph blocks. ([17413](https://github.com/WordPress/gutenberg/pull/17413))
+    -   Code to HTML block and the opposite. ([21779](https://github.com/WordPress/gutenberg/pull/21779))
+-   Add copy action to the blocks. ([22214](https://github.com/WordPress/gutenberg/pull/22214))
 
 ### Enhancements
 
-- Implement Block Navigator selection on Nav Menus page. ([22017](https://github.com/WordPress/gutenberg/pull/22017))
-- Write block patterns in PHP to allow i18n. ([21946](https://github.com/WordPress/gutenberg/pull/21946))
-- Post title: handle paste as blocks. ([21758](https://github.com/WordPress/gutenberg/pull/21758))
-- Clear Publish Date Button. ([20914](https://github.com/WordPress/gutenberg/pull/20914))
-- Add gap between nested submenus. ([22227](https://github.com/WordPress/gutenberg/pull/22227))
-- Block Library: enhance the author's block. ([19894](https://github.com/WordPress/gutenberg/pull/19894))
-- Add "black" and "white" color options to default color palette. ([22082](https://github.com/WordPress/gutenberg/pull/22082))
-- Light blocks: social links. ([22078](https://github.com/WordPress/gutenberg/pull/22078))
-- CustomSelectControl: set aria-hidden to empty option list. ([21298](https://github.com/WordPress/gutenberg/pull/21298))
-- Add some more g2 icons. ([21825](https://github.com/WordPress/gutenberg/pull/21825))
-- Allow the column block in the inserter. ([20502](https://github.com/WordPress/gutenberg/pull/20502))
-- Delete menus in nav menus experimental screen. ([21486](https://github.com/WordPress/gutenberg/pull/21486))
-- Visual and experience improvements to existing sub-navigation flow. ([22107](https://github.com/WordPress/gutenberg/pull/22107))
-- Reduce font-size and line-height of "it's time". ([21627](https://github.com/WordPress/gutenberg/pull/21627))
-- Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter(). ([21980](https://github.com/WordPress/gutenberg/pull/21980))
-- Make parts of the BlockNavigationList overridable using slots. ([21948](https://github.com/WordPress/gutenberg/pull/21948))
-- Change the color alpha input step to match the slider step. ([21953](https://github.com/WordPress/gutenberg/pull/21953))
-- Navigation: fallback for undefined orientation. ([22057](https://github.com/WordPress/gutenberg/pull/22057))
-- Remove subscription button from blog template. ([22129](https://github.com/WordPress/gutenberg/pull/22129))
-- Move the Entities Saved States from Modal to Sidebar. ([21522](https://github.com/WordPress/gutenberg/pull/21522))
+-   Implement Block Navigator selection on Nav Menus page. ([22017](https://github.com/WordPress/gutenberg/pull/22017))
+-   Write block patterns in PHP to allow i18n. ([21946](https://github.com/WordPress/gutenberg/pull/21946))
+-   Post title: handle paste as blocks. ([21758](https://github.com/WordPress/gutenberg/pull/21758))
+-   Clear Publish Date Button. ([20914](https://github.com/WordPress/gutenberg/pull/20914))
+-   Add gap between nested submenus. ([22227](https://github.com/WordPress/gutenberg/pull/22227))
+-   Block Library: enhance the author's block. ([19894](https://github.com/WordPress/gutenberg/pull/19894))
+-   Add "black" and "white" color options to default color palette. ([22082](https://github.com/WordPress/gutenberg/pull/22082))
+-   Light blocks: social links. ([22078](https://github.com/WordPress/gutenberg/pull/22078))
+-   CustomSelectControl: set aria-hidden to empty option list. ([21298](https://github.com/WordPress/gutenberg/pull/21298))
+-   Add some more g2 icons. ([21825](https://github.com/WordPress/gutenberg/pull/21825))
+-   Allow the column block in the inserter. ([20502](https://github.com/WordPress/gutenberg/pull/20502))
+-   Delete menus in nav menus experimental screen. ([21486](https://github.com/WordPress/gutenberg/pull/21486))
+-   Visual and experience improvements to existing sub-navigation flow. ([22107](https://github.com/WordPress/gutenberg/pull/22107))
+-   Reduce font-size and line-height of "it's time". ([21627](https://github.com/WordPress/gutenberg/pull/21627))
+-   Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter(). ([21980](https://github.com/WordPress/gutenberg/pull/21980))
+-   Make parts of the BlockNavigationList overridable using slots. ([21948](https://github.com/WordPress/gutenberg/pull/21948))
+-   Change the color alpha input step to match the slider step. ([21953](https://github.com/WordPress/gutenberg/pull/21953))
+-   Navigation: fallback for undefined orientation. ([22057](https://github.com/WordPress/gutenberg/pull/22057))
+-   Remove subscription button from blog template. ([22129](https://github.com/WordPress/gutenberg/pull/22129))
+-   Move the Entities Saved States from Modal to Sidebar. ([21522](https://github.com/WordPress/gutenberg/pull/21522))
 
 ### API Changes
 
-- Update the Patterns API to avoid ambiguity. ([21970](https://github.com/WordPress/gutenberg/pull/21970))
-- Expose the registered pattern slugs in get_all_registered. ([21619](https://github.com/WordPress/gutenberg/pull/21619))
-- Fix doc-building pre-commit API hook issue. ([22116](https://github.com/WordPress/gutenberg/pull/22116))
-- REST API: Block directory - Typecast author_block_count as integer. ([17594](https://github.com/WordPress/gutenberg/pull/17594))
-- Block API: Block Context: Filter content, prepare attributes at render, pass a block to render. ([21925](https://github.com/WordPress/gutenberg/pull/21925))
+-   Update the Patterns API to avoid ambiguity. ([21970](https://github.com/WordPress/gutenberg/pull/21970))
+-   Expose the registered pattern slugs in get_all_registered. ([21619](https://github.com/WordPress/gutenberg/pull/21619))
+-   Fix doc-building pre-commit API hook issue. ([22116](https://github.com/WordPress/gutenberg/pull/22116))
+-   REST API: Block directory - Typecast author_block_count as integer. ([17594](https://github.com/WordPress/gutenberg/pull/17594))
+-   Block API: Block Context: Filter content, prepare attributes at render, pass a block to render. ([21925](https://github.com/WordPress/gutenberg/pull/21925))
 
 ### Experimental
 
-- Add undo-redo UI to edit-site and edit-widgets. ([21955](https://github.com/WordPress/gutenberg/pull/21955))
-- Light blocks: site title. ([22069](https://github.com/WordPress/gutenberg/pull/22069))
-- Update: Use EntityProvider on the widget area. ([22008](https://github.com/WordPress/gutenberg/pull/22008))
-- Site editor:
-    - Extract gutenberg_find_template_post helper. ([21959](https://github.com/WordPress/gutenberg/pull/21959))
-    - Fix default editor background. ([22182](https://github.com/WordPress/gutenberg/pull/22182))
-    - Refactor close button slot. ([22179](https://github.com/WordPress/gutenberg/pull/22179))
-    - Make close button replaceable. ([22001](https://github.com/WordPress/gutenberg/pull/22001))
-    - Add home icon to template switcher. ([22004](https://github.com/WordPress/gutenberg/pull/22004))
-    - Updated template content. ([22044](https://github.com/WordPress/gutenberg/pull/22044))
-    - Fix spelling mistake. ([21991](https://github.com/WordPress/gutenberg/pull/21991))
+-   Add undo-redo UI to edit-site and edit-widgets. ([21955](https://github.com/WordPress/gutenberg/pull/21955))
+-   Light blocks: site title. ([22069](https://github.com/WordPress/gutenberg/pull/22069))
+-   Update: Use EntityProvider on the widget area. ([22008](https://github.com/WordPress/gutenberg/pull/22008))
+-   Site editor:
+    -   Extract gutenberg_find_template_post helper. ([21959](https://github.com/WordPress/gutenberg/pull/21959))
+    -   Fix default editor background. ([22182](https://github.com/WordPress/gutenberg/pull/22182))
+    -   Refactor close button slot. ([22179](https://github.com/WordPress/gutenberg/pull/22179))
+    -   Make close button replaceable. ([22001](https://github.com/WordPress/gutenberg/pull/22001))
+    -   Add home icon to template switcher. ([22004](https://github.com/WordPress/gutenberg/pull/22004))
+    -   Updated template content. ([22044](https://github.com/WordPress/gutenberg/pull/22044))
+    -   Fix spelling mistake. ([21991](https://github.com/WordPress/gutenberg/pull/21991))
 
 ### Performance
 
-- Reduce re-renders from block nodes context. ([22134](https://github.com/WordPress/gutenberg/pull/22134))
-- Move memo() from BlockStyles to BlockPreview. ([21993](https://github.com/WordPress/gutenberg/pull/21993))
-- Avoid rerenders of the entire BlockInspector when block attributes change. ([21990](https://github.com/WordPress/gutenberg/pull/21990))
-- Optimize BlockStyles by using hooks and React.memo (instead of HOCs). ([21973](https://github.com/WordPress/gutenberg/pull/21973))
-
-### Bug Fixes
-
-- Popover: Fix closest().parentNode null error. ([22264](https://github.com/WordPress/gutenberg/pull/22264))
-- Correct color palette in color settings. ([22138](https://github.com/WordPress/gutenberg/pull/22138))
-- Remove import of inexistant component. ([22130](https://github.com/WordPress/gutenberg/pull/22130))
-- Build Tooling: Run packages build before lint. ([22088](https://github.com/WordPress/gutenberg/pull/22088))
-- RangeControl: Fix number input change interaction. ([22084](https://github.com/WordPress/gutenberg/pull/22084))
-- Fix entity selection through save panel. ([22011](https://github.com/WordPress/gutenberg/pull/22011))
-- ESLint Plugin: Relax check for i18n-text-domain rule. ([21928](https://github.com/WordPress/gutenberg/pull/21928))
-- Block Library: Fix React does not recognize isSelected prop in Spacer block. ([21924](https://github.com/WordPress/gutenberg/pull/21924))
-- Reinitialize the iframe after the parent block is moved around. ([21916](https://github.com/WordPress/gutenberg/pull/21916))
-- Configure the navigation editor with correct __experimentalFetchLinkSuggestions. ([21873](https://github.com/WordPress/gutenberg/pull/21873))
-- Create the proper shortcode on paste. ([21864](https://github.com/WordPress/gutenberg/pull/21864))
-- Refactor FontSizePicker component. Fix bug on undo. ([21757](https://github.com/WordPress/gutenberg/pull/21757))
-- Move caret to the end of pasted content. ([21755](https://github.com/WordPress/gutenberg/pull/21755))
-- Embed: use the same SmugMug URL regex as the core. ([21744](https://github.com/WordPress/gutenberg/pull/21744))
-- Navigation block: use new icon in placeholder. ([21713](https://github.com/WordPress/gutenberg/pull/21713))
-- Fix Template Part placeholder preview. ([21623](https://github.com/WordPress/gutenberg/pull/21623))
-- Restore the missing background color on the nested submenus. ([22228](https://github.com/WordPress/gutenberg/pull/22228))
-- fix: [#21777] Prevent focusing of FireFox address bar. ([22215](https://github.com/WordPress/gutenberg/pull/22215))
-- Fix flaky test in rich text. ([22202](https://github.com/WordPress/gutenberg/pull/22202))
-- Fix flaky test: <a> tag "target" attribute. ([22200](https://github.com/WordPress/gutenberg/pull/22200))
-- Fix extra tab stop on Modal component. ([22063](https://github.com/WordPress/gutenberg/pull/22063))
-- Writing flow: fix vertical arrow nav in table (and generally grid). ([22105](https://github.com/WordPress/gutenberg/pull/22105))
-- Gallery block / media-placeholder - Preserve changes made while upload in progress. ([19134](https://github.com/WordPress/gutenberg/pull/19134))
-- Add missing dependency. ([22086](https://github.com/WordPress/gutenberg/pull/22086))
+-   Reduce re-renders from block nodes context. ([22134](https://github.com/WordPress/gutenberg/pull/22134))
+-   Move memo() from BlockStyles to BlockPreview. ([21993](https://github.com/WordPress/gutenberg/pull/21993))
+-   Avoid rerenders of the entire BlockInspector when block attributes change. ([21990](https://github.com/WordPress/gutenberg/pull/21990))
+-   Optimize BlockStyles by using hooks and React.memo (instead of HOCs). ([21973](https://github.com/WordPress/gutenberg/pull/21973))
+
+### Bug Fixes
 
+-   Popover: Fix closest().parentNode null error. ([22264](https://github.com/WordPress/gutenberg/pull/22264))
+-   Correct color palette in color settings. ([22138](https://github.com/WordPress/gutenberg/pull/22138))
+-   Remove import of inexistant component. ([22130](https://github.com/WordPress/gutenberg/pull/22130))
+-   Build Tooling: Run packages build before lint. ([22088](https://github.com/WordPress/gutenberg/pull/22088))
+-   RangeControl: Fix number input change interaction. ([22084](https://github.com/WordPress/gutenberg/pull/22084))
+-   Fix entity selection through save panel. ([22011](https://github.com/WordPress/gutenberg/pull/22011))
+-   ESLint Plugin: Relax check for i18n-text-domain rule. ([21928](https://github.com/WordPress/gutenberg/pull/21928))
+-   Block Library: Fix React does not recognize isSelected prop in Spacer block. ([21924](https://github.com/WordPress/gutenberg/pull/21924))
+-   Reinitialize the iframe after the parent block is moved around. ([21916](https://github.com/WordPress/gutenberg/pull/21916))
+-   Configure the navigation editor with correct \_\_experimentalFetchLinkSuggestions. ([21873](https://github.com/WordPress/gutenberg/pull/21873))
+-   Create the proper shortcode on paste. ([21864](https://github.com/WordPress/gutenberg/pull/21864))
+-   Refactor FontSizePicker component. Fix bug on undo. ([21757](https://github.com/WordPress/gutenberg/pull/21757))
+-   Move caret to the end of pasted content. ([21755](https://github.com/WordPress/gutenberg/pull/21755))
+-   Embed: use the same SmugMug URL regex as the core. ([21744](https://github.com/WordPress/gutenberg/pull/21744))
+-   Navigation block: use new icon in placeholder. ([21713](https://github.com/WordPress/gutenberg/pull/21713))
+-   Fix Template Part placeholder preview. ([21623](https://github.com/WordPress/gutenberg/pull/21623))
+-   Restore the missing background color on the nested submenus. ([22228](https://github.com/WordPress/gutenberg/pull/22228))
+-   fix: [#21777] Prevent focusing of FireFox address bar. ([22215](https://github.com/WordPress/gutenberg/pull/22215))
+-   Fix flaky test in rich text. ([22202](https://github.com/WordPress/gutenberg/pull/22202))
+-   Fix flaky test: <a> tag "target" attribute. ([22200](https://github.com/WordPress/gutenberg/pull/22200))
+-   Fix extra tab stop on Modal component. ([22063](https://github.com/WordPress/gutenberg/pull/22063))
+-   Writing flow: fix vertical arrow nav in table (and generally grid). ([22105](https://github.com/WordPress/gutenberg/pull/22105))
+-   Gallery block / media-placeholder - Preserve changes made while upload in progress. ([19134](https://github.com/WordPress/gutenberg/pull/19134))
+-   Add missing dependency. ([22086](https://github.com/WordPress/gutenberg/pull/22086))
 
 ### Tooling
 
-- Build Tools: Validate package-lock.json for "resolved" errors. ([22237](https://github.com/WordPress/gutenberg/pull/22237))
-- Build Tools: Disable ESLint `no-console` for bin directory. ([22033](https://github.com/WordPress/gutenberg/pull/22033))
-- Build Tools: Changelog: Normalize entry to end with period. ([22010](https://github.com/WordPress/gutenberg/pull/22010))
-- Add `analyze-bundles` script. ([21827](https://github.com/WordPress/gutenberg/pull/21827))
-- Add changelog generator script. ([19866](https://github.com/WordPress/gutenberg/pull/19866))
-- Add a method for publishing patches to the lerna scripts. ([21844](https://github.com/WordPress/gutenberg/pull/21844))
-- Add additional e2e debugging option. ([21845](https://github.com/WordPress/gutenberg/pull/21845))
-- Replace espree with babel. ([21853](https://github.com/WordPress/gutenberg/pull/21853))
-- Update diff to 4.0.2 and work around tree-shaking issues. ([21994](https://github.com/WordPress/gutenberg/pull/21994))
-- Increase the severity of `jsdoc/no-undefined-types`. . ([21942](https://github.com/WordPress/gutenberg/pull/21942))
-
+-   Build Tools: Validate package-lock.json for "resolved" errors. ([22237](https://github.com/WordPress/gutenberg/pull/22237))
+-   Build Tools: Disable ESLint `no-console` for bin directory. ([22033](https://github.com/WordPress/gutenberg/pull/22033))
+-   Build Tools: Changelog: Normalize entry to end with period. ([22010](https://github.com/WordPress/gutenberg/pull/22010))
+-   Add `analyze-bundles` script. ([21827](https://github.com/WordPress/gutenberg/pull/21827))
+-   Add changelog generator script. ([19866](https://github.com/WordPress/gutenberg/pull/19866))
+-   Add a method for publishing patches to the lerna scripts. ([21844](https://github.com/WordPress/gutenberg/pull/21844))
+-   Add additional e2e debugging option. ([21845](https://github.com/WordPress/gutenberg/pull/21845))
+-   Replace espree with babel. ([21853](https://github.com/WordPress/gutenberg/pull/21853))
+-   Update diff to 4.0.2 and work around tree-shaking issues. ([21994](https://github.com/WordPress/gutenberg/pull/21994))
+-   Increase the severity of `jsdoc/no-undefined-types`. . ([21942](https://github.com/WordPress/gutenberg/pull/21942))
 
 ### Code Quality
 
-- Block: move new props to hook. ([22212](https://github.com/WordPress/gutenberg/pull/22212))
-- Block: avoid useLayoutEffect. ([22108](https://github.com/WordPress/gutenberg/pull/22108))
-- Try: Reduced specificity base block margins. ([22051](https://github.com/WordPress/gutenberg/pull/22051))
-- Update the audio and video blocks to use a light wrapper in the editor. ([22028](https://github.com/WordPress/gutenberg/pull/22028))
-- Remove unused animation lingering in paragraph file. ([22020](https://github.com/WordPress/gutenberg/pull/22020))
-- Columns. Remove top and bottom margin from individual column blocks. ([22018](https://github.com/WordPress/gutenberg/pull/22018))
-- Try better inserter toggle styling. ([22016](https://github.com/WordPress/gutenberg/pull/22016))
-- Block Editor: Rename block context in BlockListBlock. ([21922](https://github.com/WordPress/gutenberg/pull/21922))
-- Remove duplicate CopyHanddler. ([21817](https://github.com/WordPress/gutenberg/pull/21817))
-- Types: Restore element, icons, primitives types. ([21781](https://github.com/WordPress/gutenberg/pull/21781))
-- Convert core toolbar buttons into ToolbarButton. ([20008](https://github.com/WordPress/gutenberg/pull/20008))
-- Block Directory: Add end 2 end tests. ([20023](https://github.com/WordPress/gutenberg/pull/20023))
-- ClipboardButton: use hooks. ([22220](https://github.com/WordPress/gutenberg/pull/22220))
-- ClipboardButton: remove wrapper span. ([22218](https://github.com/WordPress/gutenberg/pull/22218))
-- Block Library: Update FSE blocks to use block context. ([21696](https://github.com/WordPress/gutenberg/pull/21696))
-- Group: Zero out the intrinsic margin set to every block in the editor. ([22209](https://github.com/WordPress/gutenberg/pull/22209))
-- Unset the inherit for links. ([22160](https://github.com/WordPress/gutenberg/pull/22160))
-- Template Loader: Get rid of _wp_current_template_part_ids globals. ([22143](https://github.com/WordPress/gutenberg/pull/22143))
-- Block Library: Post Author: Reference attributes by argument. ([22114](https://github.com/WordPress/gutenberg/pull/22114))
-- Remove pass by reference of the `$scripts` and `$styles` attributes in client-assets.php. ([21987](https://github.com/WordPress/gutenberg/pull/21987))
-- Use optional chaining, optional catch binding. ([21967](https://github.com/WordPress/gutenberg/pull/21967))
-- Extract block mover buttons so that they can be individually imported. ([22122](https://github.com/WordPress/gutenberg/pull/22122))sss
+-   Block: move new props to hook. ([22212](https://github.com/WordPress/gutenberg/pull/22212))
+-   Block: avoid useLayoutEffect. ([22108](https://github.com/WordPress/gutenberg/pull/22108))
+-   Try: Reduced specificity base block margins. ([22051](https://github.com/WordPress/gutenberg/pull/22051))
+-   Update the audio and video blocks to use a light wrapper in the editor. ([22028](https://github.com/WordPress/gutenberg/pull/22028))
+-   Remove unused animation lingering in paragraph file. ([22020](https://github.com/WordPress/gutenberg/pull/22020))
+-   Columns. Remove top and bottom margin from individual column blocks. ([22018](https://github.com/WordPress/gutenberg/pull/22018))
+-   Try better inserter toggle styling. ([22016](https://github.com/WordPress/gutenberg/pull/22016))
+-   Block Editor: Rename block context in BlockListBlock. ([21922](https://github.com/WordPress/gutenberg/pull/21922))
+-   Remove duplicate CopyHanddler. ([21817](https://github.com/WordPress/gutenberg/pull/21817))
+-   Types: Restore element, icons, primitives types. ([21781](https://github.com/WordPress/gutenberg/pull/21781))
+-   Convert core toolbar buttons into ToolbarButton. ([20008](https://github.com/WordPress/gutenberg/pull/20008))
+-   Block Directory: Add end 2 end tests. ([20023](https://github.com/WordPress/gutenberg/pull/20023))
+-   ClipboardButton: use hooks. ([22220](https://github.com/WordPress/gutenberg/pull/22220))
+-   ClipboardButton: remove wrapper span. ([22218](https://github.com/WordPress/gutenberg/pull/22218))
+-   Block Library: Update FSE blocks to use block context. ([21696](https://github.com/WordPress/gutenberg/pull/21696))
+-   Group: Zero out the intrinsic margin set to every block in the editor. ([22209](https://github.com/WordPress/gutenberg/pull/22209))
+-   Unset the inherit for links. ([22160](https://github.com/WordPress/gutenberg/pull/22160))
+-   Template Loader: Get rid of \_wp_current_template_part_ids globals. ([22143](https://github.com/WordPress/gutenberg/pull/22143))
+-   Block Library: Post Author: Reference attributes by argument. ([22114](https://github.com/WordPress/gutenberg/pull/22114))
+-   Remove pass by reference of the `$scripts` and `$styles` attributes in client-assets.php. ([21987](https://github.com/WordPress/gutenberg/pull/21987))
+-   Use optional chaining, optional catch binding. ([21967](https://github.com/WordPress/gutenberg/pull/21967))
+-   Extract block mover buttons so that they can be individually imported. ([22122](https://github.com/WordPress/gutenberg/pull/22122))sss
 
 ### Documentation
 
-- Scripts: Mark `env` script as deprecated. ([22158](https://github.com/WordPress/gutenberg/pull/22158))
-- Docs: Use InspectorControls from @wordpress/block-editor. ([22153](https://github.com/WordPress/gutenberg/pull/22153))
-- Fix bundle analysis change location in changelog. ([22136](https://github.com/WordPress/gutenberg/pull/22136))
-- Documentation: Improve the way CHANGELOG files are maintained. ([22126](https://github.com/WordPress/gutenberg/pull/22126))
-- ESLint Plugin: Add missing rules to root README. ([22042](https://github.com/WordPress/gutenberg/pull/22042))
-- Fix props, in example code for Edit Post module. ([21976](https://github.com/WordPress/gutenberg/pull/21976))
-- Document e2e test command options. ([21962](https://github.com/WordPress/gutenberg/pull/21962))
-- Add an example for how to choose a style variation for a block variation. ([21927](https://github.com/WordPress/gutenberg/pull/21927))
-- Add documentation for onSelectURL property. ([20799](https://github.com/WordPress/gutenberg/pull/20799))
-- Document the old patterns API deprecation. ([22177](https://github.com/WordPress/gutenberg/pull/22177))
-- Coding Guidelines:
-  - Document JavaScript language support commitment. ([22030](https://github.com/WordPress/gutenberg/pull/22030))
-  - Add "gotchas" section about ES2020 optional chaining. ([22029](https://github.com/WordPress/gutenberg/pull/22029))
-  - Recommend function components. ([22090](https://github.com/WordPress/gutenberg/pull/22090))
+-   Scripts: Mark `env` script as deprecated. ([22158](https://github.com/WordPress/gutenberg/pull/22158))
+-   Docs: Use InspectorControls from @wordpress/block-editor. ([22153](https://github.com/WordPress/gutenberg/pull/22153))
+-   Fix bundle analysis change location in changelog. ([22136](https://github.com/WordPress/gutenberg/pull/22136))
+-   Documentation: Improve the way CHANGELOG files are maintained. ([22126](https://github.com/WordPress/gutenberg/pull/22126))
+-   ESLint Plugin: Add missing rules to root README. ([22042](https://github.com/WordPress/gutenberg/pull/22042))
+-   Fix props, in example code for Edit Post module. ([21976](https://github.com/WordPress/gutenberg/pull/21976))
+-   Document e2e test command options. ([21962](https://github.com/WordPress/gutenberg/pull/21962))
+-   Add an example for how to choose a style variation for a block variation. ([21927](https://github.com/WordPress/gutenberg/pull/21927))
+-   Add documentation for onSelectURL property. ([20799](https://github.com/WordPress/gutenberg/pull/20799))
+-   Document the old patterns API deprecation. ([22177](https://github.com/WordPress/gutenberg/pull/22177))
+-   Coding Guidelines:
+    -   Document JavaScript language support commitment. ([22030](https://github.com/WordPress/gutenberg/pull/22030))
+    -   Add "gotchas" section about ES2020 optional chaining. ([22029](https://github.com/WordPress/gutenberg/pull/22029))
+    -   Recommend function components. ([22090](https://github.com/WordPress/gutenberg/pull/22090))
 
 ### Various
 
-- Expose presets declared via add_theme_support in global styles. ([22076](https://github.com/WordPress/gutenberg/pull/22076))
-- Update is-promise package to the latest version. ([21940](https://github.com/WordPress/gutenberg/pull/21940))
-- Blocks: Register FSE blocks if experiment is enabled. ([21536](https://github.com/WordPress/gutenberg/pull/21536))
+-   Expose presets declared via add_theme_support in global styles. ([22076](https://github.com/WordPress/gutenberg/pull/22076))
+-   Update is-promise package to the latest version. ([21940](https://github.com/WordPress/gutenberg/pull/21940))
+-   Blocks: Register FSE blocks if experiment is enabled. ([21536](https://github.com/WordPress/gutenberg/pull/21536))
 
 ### Mobile App
 
-- Add missing RTL support for some mobile components. ([21502](https://github.com/WordPress/gutenberg/pull/21502))
-- Remove separatorType prop from TextControl, RangeControl... ([21365](https://github.com/WordPress/gutenberg/pull/21365))
-- Color settings. ([21326](https://github.com/WordPress/gutenberg/pull/21326))
-- Global styles provider. ([21637](https://github.com/WordPress/gutenberg/pull/21637))
-- Update existing templates to use new blocks. ([21857](https://github.com/WordPress/gutenberg/pull/21857))
-- Enable pullquote block. ([21930](https://github.com/WordPress/gutenberg/pull/21930))
-- Merge release branch back to trunk for v1.27.1. ([22234](https://github.com/WordPress/gutenberg/pull/22234))
-- Wrap button blocks with buttons blocks in page templates. ([21939](https://github.com/WordPress/gutenberg/pull/21939))
-- Components: Create a separate .native entry for ToolbarItem. ([22229](https://github.com/WordPress/gutenberg/pull/22229))
+-   Add missing RTL support for some mobile components. ([21502](https://github.com/WordPress/gutenberg/pull/21502))
+-   Remove separatorType prop from TextControl, RangeControl... ([21365](https://github.com/WordPress/gutenberg/pull/21365))
+-   Color settings. ([21326](https://github.com/WordPress/gutenberg/pull/21326))
+-   Global styles provider. ([21637](https://github.com/WordPress/gutenberg/pull/21637))
+-   Update existing templates to use new blocks. ([21857](https://github.com/WordPress/gutenberg/pull/21857))
+-   Enable pullquote block. ([21930](https://github.com/WordPress/gutenberg/pull/21930))
+-   Merge release branch back to trunk for v1.27.1. ([22234](https://github.com/WordPress/gutenberg/pull/22234))
+-   Wrap button blocks with buttons blocks in page templates. ([21939](https://github.com/WordPress/gutenberg/pull/21939))
+-   Components: Create a separate .native entry for ToolbarItem. ([22229](https://github.com/WordPress/gutenberg/pull/22229))
 
 = 8.0.0 =
 
+## Changelog
+
 ### Features
 
-- Add subscript and superscript formatting options. ([21819](https://github.com/WordPress/gutenberg/pull/21819))
-- Move the Block Patterns UI to the inserter. ([20951](https://github.com/WordPress/gutenberg/pull/20951))
-- Improve layout and usability of code editor. ([21643](https://github.com/WordPress/gutenberg/pull/21643))
+-   Add subscript and superscript formatting options. ([21819](https://github.com/WordPress/gutenberg/pull/21819))
+-   Move the Block Patterns UI to the inserter. ([20951](https://github.com/WordPress/gutenberg/pull/20951))
+-   Improve layout and usability of code editor. ([21643](https://github.com/WordPress/gutenberg/pull/21643))
 
 ### Enhancements
 
-- Add inserter previews to more blocks. ([21740](https://github.com/WordPress/gutenberg/pull/21740))
-- Performance improvements:
-  - Import from individual react-dates component. ([21914](https://github.com/WordPress/gutenberg/pull/21914))
-  - Upgrade showdown Markdown processor library. ([21862](https://github.com/WordPress/gutenberg/pull/21862))
-- Allow title and button-based appender to inherit styles. ([21749](https://github.com/WordPress/gutenberg/pull/21749))
-- Output float clearing for all centered blocks. ([21608](https://github.com/WordPress/gutenberg/pull/21608))
-- Update 'Welcome Guide' illustrations. ([21515](https://github.com/WordPress/gutenberg/pull/21515))
+-   Add inserter previews to more blocks. ([21740](https://github.com/WordPress/gutenberg/pull/21740))
+-   Performance improvements:
+    -   Import from individual react-dates component. ([21914](https://github.com/WordPress/gutenberg/pull/21914))
+    -   Upgrade showdown Markdown processor library. ([21862](https://github.com/WordPress/gutenberg/pull/21862))
+-   Allow title and button-based appender to inherit styles. ([21749](https://github.com/WordPress/gutenberg/pull/21749))
+-   Output float clearing for all centered blocks. ([21608](https://github.com/WordPress/gutenberg/pull/21608))
+-   Update 'Welcome Guide' illustrations. ([21515](https://github.com/WordPress/gutenberg/pull/21515))
 
 ### New APIs
 
-- A new [Block Context API](https://github.com/WordPress/gutenberg/blob/HEAD/docs/designers-developers/developers/block-api/block-context.md) has been partially implemented, currently limited to block settings and editor APIs. PHP APIs will be implemented in the next plugin releases. ([21467](https://github.com/WordPress/gutenberg/pull/21467), [21868](https://github.com/WordPress/gutenberg/pull/21868), [21921](https://github.com/WordPress/gutenberg/pull/21921))
-- Add new "G2"-styled icons to the Icons package. ([21209](https://github.com/WordPress/gutenberg/pull/21209))
-
-### Bug Fixes
-
-- Change `wp_make_content_images_responsive` to `wp_filter_content_tags` to resolve warnings in WordPress 5.5-alpha. ([21514](https://github.com/WordPress/gutenberg/pull/21514))
-- Collapse selection to end after link insertion. ([17126](https://github.com/WordPress/gutenberg/pull/17126))
-- Fix selected category on existing Latest Posts blocks. ([21359](https://github.com/WordPress/gutenberg/pull/21359))
-- Fix overlapping column contents for embeds. ([21570](https://github.com/WordPress/gutenberg/pull/21570))
-- Fix focus styling for date picker calendar days. ([21600](https://github.com/WordPress/gutenberg/pull/21600))
-- NPM Packages
-  - Fix "Cannot find module '../utils'" error. ([21609](https://github.com/WordPress/gutenberg/pull/21609))
-  - Types: Hide element, primitives, icons declarations. ([21613](https://github.com/WordPress/gutenberg/pull/21613), [21784](https://github.com/WordPress/gutenberg/pull/21784))
-- Inherit font styles in block appender placeholder. ([21725](https://github.com/WordPress/gutenberg/pull/21725))
-- Allow default pasting behavior in FontSizePicker. ([21812](https://github.com/WordPress/gutenberg/pull/21812))
-- Prevent negative custom text sizes. ([21815](https://github.com/WordPress/gutenberg/pull/21815))
-- Fix image center alignment behavior. ([21911](https://github.com/WordPress/gutenberg/pull/21911))
-- Fix centered buttons margins. ([21947](https://github.com/WordPress/gutenberg/pull/21947))
-- Revert the button block to the previous markup. ([21923](https://github.com/WordPress/gutenberg/pull/21923))
-- Avoid using inline RichText element for Link. ([21856](https://github.com/WordPress/gutenberg/pull/21856))
-- Ensure `resetEditorBlocks` is synchronous. ([21839](https://github.com/WordPress/gutenberg/pull/21839))
-- Fix the button outline style for the old button markup. ([21816](https://github.com/WordPress/gutenberg/pull/21816))
-- Fix default attribute on audio preload. ([21735](https://github.com/WordPress/gutenberg/pull/21735))
-- Fix gradient picker double-click bug. ([21732](https://github.com/WordPress/gutenberg/pull/21732))
-- Fix broken links in handbook. ([21686](https://github.com/WordPress/gutenberg/pull/21686))
-- Make `useMediaQuery` return the correct value on the first render. ([21682](https://github.com/WordPress/gutenberg/pull/21682))
-- Fix visual issue on windows with 782px. ([21661](https://github.com/WordPress/gutenberg/pull/21661))
-- Allow wrapping for Navigation block links. ([21632](https://github.com/WordPress/gutenberg/pull/21632))
-- Remove redundant margins from the columns block. ([21615](https://github.com/WordPress/gutenberg/pull/21615))
-- Fix media Text padding on inner blocks. ([21612](https://github.com/WordPress/gutenberg/pull/21612))
-- Restore floated image margins. ([21500](https://github.com/WordPress/gutenberg/pull/21500))
-- Fix URL display for scheduled posts. ([21410](https://github.com/WordPress/gutenberg/pull/21410))
-- Test keycode modifiers for keyboard event as exclusive set. ([20733](https://github.com/WordPress/gutenberg/pull/20733))
-- Fix focus loss for Guide "Finish" button in Internet Explorer. ([20599](https://github.com/WordPress/gutenberg/pull/20599))
-- Replace incorrect Snackbar `label` attribute with `aria-label`. ([20540](https://github.com/WordPress/gutenberg/pull/20540))
+-   A new [Block Context API](https://github.com/WordPress/gutenberg/blob/HEAD/docs/designers-developers/developers/block-api/block-context.md) has been partially implemented, currently limited to block settings and editor APIs. PHP APIs will be implemented in the next plugin releases. ([21467](https://github.com/WordPress/gutenberg/pull/21467), [21868](https://github.com/WordPress/gutenberg/pull/21868), [21921](https://github.com/WordPress/gutenberg/pull/21921))
+-   Add new "G2"-styled icons to the Icons package. ([21209](https://github.com/WordPress/gutenberg/pull/21209))
+
+### Bug Fixes
+
+-   Change `wp_make_content_images_responsive` to `wp_filter_content_tags` to resolve warnings in WordPress 5.5-alpha. ([21514](https://github.com/WordPress/gutenberg/pull/21514))
+-   Collapse selection to end after link insertion. ([17126](https://github.com/WordPress/gutenberg/pull/17126))
+-   Fix selected category on existing Latest Posts blocks. ([21359](https://github.com/WordPress/gutenberg/pull/21359))
+-   Fix overlapping column contents for embeds. ([21570](https://github.com/WordPress/gutenberg/pull/21570))
+-   Fix focus styling for date picker calendar days. ([21600](https://github.com/WordPress/gutenberg/pull/21600))
+-   NPM Packages
+    -   Fix "Cannot find module '../utils'" error. ([21609](https://github.com/WordPress/gutenberg/pull/21609))
+    -   Types: Hide element, primitives, icons declarations. ([21613](https://github.com/WordPress/gutenberg/pull/21613), [21784](https://github.com/WordPress/gutenberg/pull/21784))
+-   Inherit font styles in block appender placeholder. ([21725](https://github.com/WordPress/gutenberg/pull/21725))
+-   Allow default pasting behavior in FontSizePicker. ([21812](https://github.com/WordPress/gutenberg/pull/21812))
+-   Prevent negative custom text sizes. ([21815](https://github.com/WordPress/gutenberg/pull/21815))
+-   Fix image center alignment behavior. ([21911](https://github.com/WordPress/gutenberg/pull/21911))
+-   Fix centered buttons margins. ([21947](https://github.com/WordPress/gutenberg/pull/21947))
+-   Revert the button block to the previous markup. ([21923](https://github.com/WordPress/gutenberg/pull/21923))
+-   Avoid using inline RichText element for Link. ([21856](https://github.com/WordPress/gutenberg/pull/21856))
+-   Ensure `resetEditorBlocks` is synchronous. ([21839](https://github.com/WordPress/gutenberg/pull/21839))
+-   Fix the button outline style for the old button markup. ([21816](https://github.com/WordPress/gutenberg/pull/21816))
+-   Fix default attribute on audio preload. ([21735](https://github.com/WordPress/gutenberg/pull/21735))
+-   Fix gradient picker double-click bug. ([21732](https://github.com/WordPress/gutenberg/pull/21732))
+-   Fix broken links in handbook. ([21686](https://github.com/WordPress/gutenberg/pull/21686))
+-   Make `useMediaQuery` return the correct value on the first render. ([21682](https://github.com/WordPress/gutenberg/pull/21682))
+-   Fix visual issue on windows with 782px. ([21661](https://github.com/WordPress/gutenberg/pull/21661))
+-   Allow wrapping for Navigation block links. ([21632](https://github.com/WordPress/gutenberg/pull/21632))
+-   Remove redundant margins from the columns block. ([21615](https://github.com/WordPress/gutenberg/pull/21615))
+-   Fix media Text padding on inner blocks. ([21612](https://github.com/WordPress/gutenberg/pull/21612))
+-   Restore floated image margins. ([21500](https://github.com/WordPress/gutenberg/pull/21500))
+-   Fix URL display for scheduled posts. ([21410](https://github.com/WordPress/gutenberg/pull/21410))
+-   Test keycode modifiers for keyboard event as exclusive set. ([20733](https://github.com/WordPress/gutenberg/pull/20733))
+-   Fix focus loss for Guide "Finish" button in Internet Explorer. ([20599](https://github.com/WordPress/gutenberg/pull/20599))
+-   Replace incorrect Snackbar `label` attribute with `aria-label`. ([20540](https://github.com/WordPress/gutenberg/pull/20540))
 
 ### Experiments
 
-- Add experimental `useEditorFeature` hook to simplify access to editor features. ([21646](https://github.com/WordPress/gutenberg/pull/21646))
-- Navigation menu page:
-  - Try a fixed toolbar in the navigation page. ([21340](https://github.com/WordPress/gutenberg/pull/21340))
-  - Fix panel collapsing in navigation page. ([21633](https://github.com/WordPress/gutenberg/pull/21633))
-  - Fix mobile layout for navigation menu page. ([21638](https://github.com/WordPress/gutenberg/pull/21638))
-  - Delete empty spaces in menu REST API endpoint strings. ([21453](https://github.com/WordPress/gutenberg/pull/21453))
-- Edit site:
-  - Add current theme to template switcher. ([21578](https://github.com/WordPress/gutenberg/pull/21578), [21768](https://github.com/WordPress/gutenberg/pull/21768))
-  - Declare attributes for Template Part block in `block.json`. ([21796](https://github.com/WordPress/gutenberg/pull/21796))
-  - Update end-to-end test for multi-entity saving in site editor. ([21363](https://github.com/WordPress/gutenberg/pull/21363))
-  - Add preview options component. ([21309](https://github.com/WordPress/gutenberg/pull/21309))
-  - Improve template parts resolution and saving behavior. ([21766](https://github.com/WordPress/gutenberg/pull/21766))
-  - Support REST API meta queries. ([21851](https://github.com/WordPress/gutenberg/pull/21851))
-  - Add extra validation when loading template parts. ([21636](https://github.com/WordPress/gutenberg/pull/21636))
-- Block directory:
-  - Add InserterPanel around block directory results. ([21748](https://github.com/WordPress/gutenberg/pull/21748))
-- Widgets:
-  - Fix legacy widgets z-index issue. ([21586](https://github.com/WordPress/gutenberg/pull/21586))
-  - Fix legacy widgets visual issues. ([21585](https://github.com/WordPress/gutenberg/pull/21585))
+-   Add experimental `useEditorFeature` hook to simplify access to editor features. ([21646](https://github.com/WordPress/gutenberg/pull/21646))
+-   Navigation menu page:
+    -   Try a fixed toolbar in the navigation page. ([21340](https://github.com/WordPress/gutenberg/pull/21340))
+    -   Fix panel collapsing in navigation page. ([21633](https://github.com/WordPress/gutenberg/pull/21633))
+    -   Fix mobile layout for navigation menu page. ([21638](https://github.com/WordPress/gutenberg/pull/21638))
+    -   Delete empty spaces in menu REST API endpoint strings. ([21453](https://github.com/WordPress/gutenberg/pull/21453))
+-   Edit site:
+    -   Add current theme to template switcher. ([21578](https://github.com/WordPress/gutenberg/pull/21578), [21768](https://github.com/WordPress/gutenberg/pull/21768))
+    -   Declare attributes for Template Part block in `block.json`. ([21796](https://github.com/WordPress/gutenberg/pull/21796))
+    -   Update end-to-end test for multi-entity saving in site editor. ([21363](https://github.com/WordPress/gutenberg/pull/21363))
+    -   Add preview options component. ([21309](https://github.com/WordPress/gutenberg/pull/21309))
+    -   Improve template parts resolution and saving behavior. ([21766](https://github.com/WordPress/gutenberg/pull/21766))
+    -   Support REST API meta queries. ([21851](https://github.com/WordPress/gutenberg/pull/21851))
+    -   Add extra validation when loading template parts. ([21636](https://github.com/WordPress/gutenberg/pull/21636))
+-   Block directory:
+    -   Add InserterPanel around block directory results. ([21748](https://github.com/WordPress/gutenberg/pull/21748))
+-   Widgets:
+    -   Fix legacy widgets z-index issue. ([21586](https://github.com/WordPress/gutenberg/pull/21586))
+    -   Fix legacy widgets visual issues. ([21585](https://github.com/WordPress/gutenberg/pull/21585))
 
 ### Deprecations
 
-- Add deprecation notice to `useApiFetch` hook. ([21723](https://github.com/WordPress/gutenberg/pull/21723))
+-   Add deprecation notice to `useApiFetch` hook. ([21723](https://github.com/WordPress/gutenberg/pull/21723))
 
 ### Code Quality
 
-- Remove nested breakpoint in fullscreen mode CSS. ([21496](https://github.com/WordPress/gutenberg/pull/21496))
-- Update npm-package-json-lint from 4.0.3 to 5.0.0. ([21597](https://github.com/WordPress/gutenberg/pull/21597))
-- Update npm dependencies that warn. ([21596](https://github.com/WordPress/gutenberg/pull/21596))
-- Fix license check script to ignore sub-dependencies of ignored packages. ([21606](https://github.com/WordPress/gutenberg/pull/21606))
-- Package TypeScript types improvements:
-  - Mark addQueryArgs arguments parameter as optional. ([21926](https://github.com/WordPress/gutenberg/pull/21926))
-  - Relax i18n sprintf arguments type. ([21919](https://github.com/WordPress/gutenberg/pull/21919))
-- Update PHPCS to latest version. ([21680](https://github.com/WordPress/gutenberg/pull/21680))
-- Unify how editor alignments are applied across blocks. ([21822](https://github.com/WordPress/gutenberg/pull/21822))
-- Remove obsolete editor alignment classes. ([21906](https://github.com/WordPress/gutenberg/pull/21906))
-- Remove old icons. ([21821](https://github.com/WordPress/gutenberg/pull/21821))
-- Implement `block.json` for blocks. ([21794](https://github.com/WordPress/gutenberg/pull/21794), [21783](https://github.com/WordPress/gutenberg/pull/21783), [21782](https://github.com/WordPress/gutenberg/pull/21782), [21775](https://github.com/WordPress/gutenberg/pull/21775), [21787](https://github.com/WordPress/gutenberg/pull/21787), [21774](https://github.com/WordPress/gutenberg/pull/21774), [21792](https://github.com/WordPress/gutenberg/pull/21792))
-- Use `register_block_type_from_metadata` in Latest Posts block. ([21788](https://github.com/WordPress/gutenberg/pull/21788))
-- Polish RSS block code. ([21773](https://github.com/WordPress/gutenberg/pull/21773))
-- Move `camelCaseDash` to the package where it is consumed. ([21736](https://github.com/WordPress/gutenberg/pull/21736))
-- Improve URLPopover code from review comments. ([21621](https://github.com/WordPress/gutenberg/pull/21621))
+-   Remove nested breakpoint in fullscreen mode CSS. ([21496](https://github.com/WordPress/gutenberg/pull/21496))
+-   Update npm-package-json-lint from 4.0.3 to 5.0.0. ([21597](https://github.com/WordPress/gutenberg/pull/21597))
+-   Update npm dependencies that warn. ([21596](https://github.com/WordPress/gutenberg/pull/21596))
+-   Fix license check script to ignore sub-dependencies of ignored packages. ([21606](https://github.com/WordPress/gutenberg/pull/21606))
+-   Package TypeScript types improvements:
+    -   Mark addQueryArgs arguments parameter as optional. ([21926](https://github.com/WordPress/gutenberg/pull/21926))
+    -   Relax i18n sprintf arguments type. ([21919](https://github.com/WordPress/gutenberg/pull/21919))
+-   Update PHPCS to latest version. ([21680](https://github.com/WordPress/gutenberg/pull/21680))
+-   Unify how editor alignments are applied across blocks. ([21822](https://github.com/WordPress/gutenberg/pull/21822))
+-   Remove obsolete editor alignment classes. ([21906](https://github.com/WordPress/gutenberg/pull/21906))
+-   Remove old icons. ([21821](https://github.com/WordPress/gutenberg/pull/21821))
+-   Implement `block.json` for blocks. ([21794](https://github.com/WordPress/gutenberg/pull/21794), [21783](https://github.com/WordPress/gutenberg/pull/21783), [21782](https://github.com/WordPress/gutenberg/pull/21782), [21775](https://github.com/WordPress/gutenberg/pull/21775), [21787](https://github.com/WordPress/gutenberg/pull/21787), [21774](https://github.com/WordPress/gutenberg/pull/21774), [21792](https://github.com/WordPress/gutenberg/pull/21792))
+-   Use `register_block_type_from_metadata` in Latest Posts block. ([21788](https://github.com/WordPress/gutenberg/pull/21788))
+-   Polish RSS block code. ([21773](https://github.com/WordPress/gutenberg/pull/21773))
+-   Move `camelCaseDash` to the package where it is consumed. ([21736](https://github.com/WordPress/gutenberg/pull/21736))
+-   Improve URLPopover code from review comments. ([21621](https://github.com/WordPress/gutenberg/pull/21621))
 
 ### Documentation
 
-- Remove duplicate sentence in glossary documentation. ([21565](https://github.com/WordPress/gutenberg/pull/21565))
-- Update `wp-env` docs to reflect current functionality of package. ([21809](https://github.com/WordPress/gutenberg/pull/21809))
-- Extract Block Transforms into its own handbook page. ([21734](https://github.com/WordPress/gutenberg/pull/21734))
-- Update the index of Block API to reflect current contents. ([21726](https://github.com/WordPress/gutenberg/pull/21726))
-- Clarify attribute type documentation. ([21694](https://github.com/WordPress/gutenberg/pull/21694))
-- Add location for components `style.css`. ([21654](https://github.com/WordPress/gutenberg/pull/21654))
-- Fix the JSDoc return type for `getEntityRecords`. ([21630](https://github.com/WordPress/gutenberg/pull/21630))
-- Update triage links to new document. ([21629](https://github.com/WordPress/gutenberg/pull/21629))
-- Update Getting Started instructions for remote server. ([21625](https://github.com/WordPress/gutenberg/pull/21625))
-- Update the "patterns" to reflect "user interface" instead. ([21562](https://github.com/WordPress/gutenberg/pull/21562))
-- Create document for contributing with triage. ([21350](https://github.com/WordPress/gutenberg/pull/21350))
-- Update triage.md to add more clarity and relevant links. ([21802](https://github.com/WordPress/gutenberg/pull/21802))
+-   Remove duplicate sentence in glossary documentation. ([21565](https://github.com/WordPress/gutenberg/pull/21565))
+-   Update `wp-env` docs to reflect current functionality of package. ([21809](https://github.com/WordPress/gutenberg/pull/21809))
+-   Extract Block Transforms into its own handbook page. ([21734](https://github.com/WordPress/gutenberg/pull/21734))
+-   Update the index of Block API to reflect current contents. ([21726](https://github.com/WordPress/gutenberg/pull/21726))
+-   Clarify attribute type documentation. ([21694](https://github.com/WordPress/gutenberg/pull/21694))
+-   Add location for components `style.css`. ([21654](https://github.com/WordPress/gutenberg/pull/21654))
+-   Fix the JSDoc return type for `getEntityRecords`. ([21630](https://github.com/WordPress/gutenberg/pull/21630))
+-   Update triage links to new document. ([21629](https://github.com/WordPress/gutenberg/pull/21629))
+-   Update Getting Started instructions for remote server. ([21625](https://github.com/WordPress/gutenberg/pull/21625))
+-   Update the "patterns" to reflect "user interface" instead. ([21562](https://github.com/WordPress/gutenberg/pull/21562))
+-   Create document for contributing with triage. ([21350](https://github.com/WordPress/gutenberg/pull/21350))
+-   Update triage.md to add more clarity and relevant links. ([21802](https://github.com/WordPress/gutenberg/pull/21802))
 
 ### Project Management
 
-- Update bug report template to help identify the editor version. ([21564](https://github.com/WordPress/gutenberg/pull/21564))
+-   Update bug report template to help identify the editor version. ([21564](https://github.com/WordPress/gutenberg/pull/21564))
 
 ### Various
 
-- End-to-end tests:
-  - Add test for template part block creation and insertion. ([21849](https://github.com/WordPress/gutenberg/pull/21849))
-  - Add test that template part block customizations are loaded from slug and theme attributes. ([21852](https://github.com/WordPress/gutenberg/pull/21852))
-  - Fix tests by removing unnecessary assertions and properly install dependencies in `@wordpress/api-fetch`. ([21780](https://github.com/WordPress/gutenberg/pull/21780))
-  - Add end-to-end test for pinned sidebar items. ([21652](https://github.com/WordPress/gutenberg/pull/21652))
-  - Add test which verifies reusable block after refresh. ([20605](https://github.com/WordPress/gutenberg/pull/20605))
-- Update cleanForSlug() to remove additional non-word characters. ([21007](https://github.com/WordPress/gutenberg/pull/21007))
-- `@wordpress/scripts`:
-  - Support debugging with `test-unit-js`. ([21631](https://github.com/WordPress/gutenberg/pull/21631), [21861](https://github.com/WordPress/gutenberg/pull/21861))
-  - Install Chromium on demand together with `test-e2e` script. ([20215](https://github.com/WordPress/gutenberg/pull/20215))
-- `@wordpress/create-block` block scaffold tool:
-  - Make it easier to provide most popular CLI options. ([21751](https://github.com/WordPress/gutenberg/pull/21751))
-  - Split JavaScript source files into parts for ESNext template. ([21750](https://github.com/WordPress/gutenberg/pull/21750))
-- `@wordpress/env` development environment:
-  - Expose port 3306 of MySQL container. ([21545](https://github.com/WordPress/gutenberg/pull/21545))
-- `@wordpress/eslint-plugin`:
-  - Add the recommended Prettier config to enforce WP coding styles. ([21602](https://github.com/WordPress/gutenberg/pull/21602))
-  - Fix `no-unused-vars-before-return` JSX identifier reference. ([21358](https://github.com/WordPress/gutenberg/pull/21358))
-- Navigation block:
-  - Revert changes to data fetching mechanics. ([21721](https://github.com/WordPress/gutenberg/pull/21721))
-- Bundle the block autocompleter in the block-editor package. ([21534](https://github.com/WordPress/gutenberg/pull/21534))
-- Storybook:
-  - Add FormToggle component. ([18085](https://github.com/WordPress/gutenberg/pull/18085))
-- Simplify Reusable Block description. ([21470](https://github.com/WordPress/gutenberg/pull/21470))
-- Build tooling:
-  - Install Composer dependencies as pre-lint step. ([21537](https://github.com/WordPress/gutenberg/pull/21537))
-  - Configure Webpack to watch only build files. ([21489](https://github.com/WordPress/gutenberg/pull/21489))
-  - Exit with non-zero status on docgen failed parse. ([21690](https://github.com/WordPress/gutenberg/pull/21690))
-
+-   End-to-end tests:
+    -   Add test for template part block creation and insertion. ([21849](https://github.com/WordPress/gutenberg/pull/21849))
+    -   Add test that template part block customizations are loaded from slug and theme attributes. ([21852](https://github.com/WordPress/gutenberg/pull/21852))
+    -   Fix tests by removing unnecessary assertions and properly install dependencies in `@wordpress/api-fetch`. ([21780](https://github.com/WordPress/gutenberg/pull/21780))
+    -   Add end-to-end test for pinned sidebar items. ([21652](https://github.com/WordPress/gutenberg/pull/21652))
+    -   Add test which verifies reusable block after refresh. ([20605](https://github.com/WordPress/gutenberg/pull/20605))
+-   Update cleanForSlug() to remove additional non-word characters. ([21007](https://github.com/WordPress/gutenberg/pull/21007))
+-   `@wordpress/scripts`:
+    -   Support debugging with `test-unit-js`. ([21631](https://github.com/WordPress/gutenberg/pull/21631), [21861](https://github.com/WordPress/gutenberg/pull/21861))
+    -   Install Chromium on demand together with `test-e2e` script. ([20215](https://github.com/WordPress/gutenberg/pull/20215))
+-   `@wordpress/create-block` block scaffold tool:
+    -   Make it easier to provide most popular CLI options. ([21751](https://github.com/WordPress/gutenberg/pull/21751))
+    -   Split JavaScript source files into parts for ESNext template. ([21750](https://github.com/WordPress/gutenberg/pull/21750))
+-   `@wordpress/env` development environment:
+    -   Expose port 3306 of MySQL container. ([21545](https://github.com/WordPress/gutenberg/pull/21545))
+-   `@wordpress/eslint-plugin`:
+    -   Add the recommended Prettier config to enforce WP coding styles. ([21602](https://github.com/WordPress/gutenberg/pull/21602))
+    -   Fix `no-unused-vars-before-return` JSX identifier reference. ([21358](https://github.com/WordPress/gutenberg/pull/21358))
+-   Navigation block:
+    -   Revert changes to data fetching mechanics. ([21721](https://github.com/WordPress/gutenberg/pull/21721))
+-   Bundle the block autocompleter in the block-editor package. ([21534](https://github.com/WordPress/gutenberg/pull/21534))
+-   Storybook:
+    -   Add FormToggle component. ([18085](https://github.com/WordPress/gutenberg/pull/18085))
+-   Simplify Reusable Block description. ([21470](https://github.com/WordPress/gutenberg/pull/21470))
+-   Build tooling:
+    -   Install Composer dependencies as pre-lint step. ([21537](https://github.com/WordPress/gutenberg/pull/21537))
+    -   Configure Webpack to watch only build files. ([21489](https://github.com/WordPress/gutenberg/pull/21489))
+    -   Exit with non-zero status on docgen failed parse. ([21690](https://github.com/WordPress/gutenberg/pull/21690))
 
 = 7.9.1 =
 
-### Bug Fixes
+## Changelog
 
- - Make sidebar plugins pinned by default.
- - Fix the button styles for old content.
+### Bug Fixes
 
+-   Make sidebar plugins pinned by default.
+-   Fix the button styles for old content.
 
 = 7.9.0 =
 
+## Changelog
+
 ### Features
 
-- Add gradients support to Group, Columns and Media & Text blocks. [21375](https://github.com/WordPress/gutenberg/pull/21375)
-- Add line height support to the Paragraph block. [20775](https://github.com/WordPress/gutenberg/pull/20775)
-- Add font size support to the Heading block. [21431](https://github.com/WordPress/gutenberg/pull/21431)
-- Add line height support to the Heading block. [21215](https://github.com/WordPress/gutenberg/pull/21215)
-- Add custom height unit support to the Cover block. [20888](https://github.com/WordPress/gutenberg/pull/20888)
+-   Add gradients support to Group, Columns and Media & Text blocks. [21375](https://github.com/WordPress/gutenberg/pull/21375)
+-   Add line height support to the Paragraph block. [20775](https://github.com/WordPress/gutenberg/pull/20775)
+-   Add font size support to the Heading block. [21431](https://github.com/WordPress/gutenberg/pull/21431)
+-   Add line height support to the Heading block. [21215](https://github.com/WordPress/gutenberg/pull/21215)
+-   Add custom height unit support to the Cover block. [20888](https://github.com/WordPress/gutenberg/pull/20888)
 
 ### Enhancements
 
-- New Patterns:
-  - Hero Two Columns [21128](https://github.com/WordPress/gutenberg/pull/21128)
-  - Numbered Features [21131](https://github.com/WordPress/gutenberg/pull/21131)
-  - It's Time [21132](https://github.com/WordPress/gutenberg/pull/21132)
-- Add a new keyboard shortcut to toggle Fullscreen Mode. [21436](https://github.com/WordPress/gutenberg/pull/21436)
-- Insert post title instead of URL, when adding a link to an existing post [21240](https://github.com/WordPress/gutenberg/pull/21240)
-- Social links block:
-  - Update tumblr icon [21329](https://github.com/WordPress/gutenberg/pull/21329)
-  - Update and massage social links colors. [21474](https://github.com/WordPress/gutenberg/pull/21474)
-- Allow reusable block top and bottom paddings to collapse. [21472](https://github.com/WordPress/gutenberg/pull/21472)
-- Update all block previews to use the auto-height behavior. [21014](https://github.com/WordPress/gutenberg/pull/21014)
-- Disable autocomplete for custom class name inputs. [21110](https://github.com/WordPress/gutenberg/pull/21110)
-- Several small tweaks to the new Block UI. [21476](https://github.com/WordPress/gutenberg/pull/21476)
-- Unify the focus styles across the UI. [21141](https://github.com/WordPress/gutenberg/pull/21141)
-- Improve block focus style. [21498](https://github.com/WordPress/gutenberg/pull/21498)
-- Remove the post permalink UI from the post title. [21099](https://github.com/WordPress/gutenberg/pull/21099)
-- Style the default toolbar buttons. [21252](https://github.com/WordPress/gutenberg/pull/21252)
-- Style tweaks to the patterns library sidebar. [21263](https://github.com/WordPress/gutenberg/pull/21263)
-- Smaller space between toolbar and block. [21166](https://github.com/WordPress/gutenberg/pull/21166)
+-   New Patterns:
+    -   Hero Two Columns [21128](https://github.com/WordPress/gutenberg/pull/21128)
+    -   Numbered Features [21131](https://github.com/WordPress/gutenberg/pull/21131)
+    -   It's Time [21132](https://github.com/WordPress/gutenberg/pull/21132)
+-   Add a new keyboard shortcut to toggle Fullscreen Mode. [21436](https://github.com/WordPress/gutenberg/pull/21436)
+-   Insert post title instead of URL, when adding a link to an existing post [21240](https://github.com/WordPress/gutenberg/pull/21240)
+-   Social links block:
+    -   Update tumblr icon [21329](https://github.com/WordPress/gutenberg/pull/21329)
+    -   Update and massage social links colors. [21474](https://github.com/WordPress/gutenberg/pull/21474)
+-   Allow reusable block top and bottom paddings to collapse. [21472](https://github.com/WordPress/gutenberg/pull/21472)
+-   Update all block previews to use the auto-height behavior. [21014](https://github.com/WordPress/gutenberg/pull/21014)
+-   Disable autocomplete for custom class name inputs. [21110](https://github.com/WordPress/gutenberg/pull/21110)
+-   Several small tweaks to the new Block UI. [21476](https://github.com/WordPress/gutenberg/pull/21476)
+-   Unify the focus styles across the UI. [21141](https://github.com/WordPress/gutenberg/pull/21141)
+-   Improve block focus style. [21498](https://github.com/WordPress/gutenberg/pull/21498)
+-   Remove the post permalink UI from the post title. [21099](https://github.com/WordPress/gutenberg/pull/21099)
+-   Style the default toolbar buttons. [21252](https://github.com/WordPress/gutenberg/pull/21252)
+-   Style tweaks to the patterns library sidebar. [21263](https://github.com/WordPress/gutenberg/pull/21263)
+-   Smaller space between toolbar and block. [21166](https://github.com/WordPress/gutenberg/pull/21166)
 
 ### Performance
 
-- Add block selection performance test. [21230](https://github.com/WordPress/gutenberg/pull/21230)
-- Improve the performance of the block moving animation. [21231](https://github.com/WordPress/gutenberg/pull/21231)
-- Render the patterns list asynchronously. [21322](https://github.com/WordPress/gutenberg/pull/21322)
-
-### Bug Fixes
-
-- Improve WordPress logo rendering for non-retina displays. [21217](https://github.com/WordPress/gutenberg/pull/21217)
-- Fix inserter popover direction. [21556](https://github.com/WordPress/gutenberg/pull/21556)
-- Fix Snackbar notice bottom margin. [18858](https://github.com/WordPress/gutenberg/pull/18858)
-- Fix YouTube Embed block from flickering and crashing on Safari. [21225](https://github.com/WordPress/gutenberg/pull/21225)
-- Fix sibling inserter being unclickable. [21232](https://github.com/WordPress/gutenberg/pull/21232)
-- Fix block duplication using keyboard shortcut [21317](https://github.com/WordPress/gutenberg/pull/21317)
-- Avoid creating an empty paragraph when selecting the parent's group block [21318](https://github.com/WordPress/gutenberg/pull/21318)
-- Fix the Buttons block margins. [21376](https://github.com/WordPress/gutenberg/pull/21376)
-- Prevent typing on a Popover from closing the block toolbar [21421](https://github.com/WordPress/gutenberg/pull/21421)
-- Prevent copy/paste on number inputs from copying the post content. [21457](https://github.com/WordPress/gutenberg/pull/21457)
-- Prevent scroll jumps when focusing long blocks. [21460](https://github.com/WordPress/gutenberg/pull/21460)
-- Fix Separator block RTL styles. [21525](https://github.com/WordPress/gutenberg/pull/21525)
-- Make dateI18n returns be affected by `gmt` parameter. [18982](https://github.com/WordPress/gutenberg/pull/18982)
-- Fixes the read more link added by themes in the Latest Posts block. [20541](https://github.com/WordPress/gutenberg/pull/20541)
-- Fix the Latest Posts block when `imageDimensions` is empty [21070](https://github.com/WordPress/gutenberg/pull/21070)
-- Fix transparent images used as Cover block backgrounds. [20904](https://github.com/WordPress/gutenberg/pull/20904)
-- IE11: fix focus on backspace. [21092](https://github.com/WordPress/gutenberg/pull/21092)
-- Fix IE11 breakage when hitting Enter. [21361](https://github.com/WordPress/gutenberg/pull/21361) [21366](https://github.com/WordPress/gutenberg/pull/21366)
-- Fix block movers on full-wide blocks. [21097](https://github.com/WordPress/gutenberg/pull/21097)
-- Fix Annotations classNames. [21184](https://github.com/WordPress/gutenberg/pull/21184)
-- RangeControl: Fix zero value handling with number input. [21187](https://github.com/WordPress/gutenberg/pull/21187)
-- Fix reusable block horizontal padding regression. [21312](https://github.com/WordPress/gutenberg/pull/21312)
-- Fix fullwide margins regression. [21201](https://github.com/WordPress/gutenberg/pull/21201)
-- Prevent the Cover block from overriding the children blocks colors [21254](https://github.com/WordPress/gutenberg/pull/21254)
-- Fix overly verbose aria-label in Social Link block [21369](https://github.com/WordPress/gutenberg/pull/21369)
-- Fix container block appenders and sibling inserters. [21149](https://github.com/WordPress/gutenberg/pull/21149) [21142](https://github.com/WordPress/gutenberg/pull/21142) [21143](https://github.com/WordPress/gutenberg/pull/21143)
+-   Add block selection performance test. [21230](https://github.com/WordPress/gutenberg/pull/21230)
+-   Improve the performance of the block moving animation. [21231](https://github.com/WordPress/gutenberg/pull/21231)
+-   Render the patterns list asynchronously. [21322](https://github.com/WordPress/gutenberg/pull/21322)
+
+### Bug Fixes
+
+-   Improve WordPress logo rendering for non-retina displays. [21217](https://github.com/WordPress/gutenberg/pull/21217)
+-   Fix inserter popover direction. [21556](https://github.com/WordPress/gutenberg/pull/21556)
+-   Fix Snackbar notice bottom margin. [18858](https://github.com/WordPress/gutenberg/pull/18858)
+-   Fix YouTube Embed block from flickering and crashing on Safari. [21225](https://github.com/WordPress/gutenberg/pull/21225)
+-   Fix sibling inserter being unclickable. [21232](https://github.com/WordPress/gutenberg/pull/21232)
+-   Fix block duplication using keyboard shortcut [21317](https://github.com/WordPress/gutenberg/pull/21317)
+-   Avoid creating an empty paragraph when selecting the parent's group block [21318](https://github.com/WordPress/gutenberg/pull/21318)
+-   Fix the Buttons block margins. [21376](https://github.com/WordPress/gutenberg/pull/21376)
+-   Prevent typing on a Popover from closing the block toolbar [21421](https://github.com/WordPress/gutenberg/pull/21421)
+-   Prevent copy/paste on number inputs from copying the post content. [21457](https://github.com/WordPress/gutenberg/pull/21457)
+-   Prevent scroll jumps when focusing long blocks. [21460](https://github.com/WordPress/gutenberg/pull/21460)
+-   Fix Separator block RTL styles. [21525](https://github.com/WordPress/gutenberg/pull/21525)
+-   Make dateI18n returns be affected by `gmt` parameter. [18982](https://github.com/WordPress/gutenberg/pull/18982)
+-   Fixes the read more link added by themes in the Latest Posts block. [20541](https://github.com/WordPress/gutenberg/pull/20541)
+-   Fix the Latest Posts block when `imageDimensions` is empty [21070](https://github.com/WordPress/gutenberg/pull/21070)
+-   Fix transparent images used as Cover block backgrounds. [20904](https://github.com/WordPress/gutenberg/pull/20904)
+-   IE11: fix focus on backspace. [21092](https://github.com/WordPress/gutenberg/pull/21092)
+-   Fix IE11 breakage when hitting Enter. [21361](https://github.com/WordPress/gutenberg/pull/21361) [21366](https://github.com/WordPress/gutenberg/pull/21366)
+-   Fix block movers on full-wide blocks. [21097](https://github.com/WordPress/gutenberg/pull/21097)
+-   Fix Annotations classNames. [21184](https://github.com/WordPress/gutenberg/pull/21184)
+-   RangeControl: Fix zero value handling with number input. [21187](https://github.com/WordPress/gutenberg/pull/21187)
+-   Fix reusable block horizontal padding regression. [21312](https://github.com/WordPress/gutenberg/pull/21312)
+-   Fix fullwide margins regression. [21201](https://github.com/WordPress/gutenberg/pull/21201)
+-   Prevent the Cover block from overriding the children blocks colors [21254](https://github.com/WordPress/gutenberg/pull/21254)
+-   Fix overly verbose aria-label in Social Link block [21369](https://github.com/WordPress/gutenberg/pull/21369)
+-   Fix container block appenders and sibling inserters. [21149](https://github.com/WordPress/gutenberg/pull/21149) [21142](https://github.com/WordPress/gutenberg/pull/21142) [21143](https://github.com/WordPress/gutenberg/pull/21143)
 
 ### New APIs
 
-- @wordpress/i18n: Add create-i18n function. [21182](https://github.com/WordPress/gutenberg/pull/21182)
-- @wordpress/interface:
-  - Add screen sidebar extensibility APIs. [20698](https://github.com/WordPress/gutenberg/pull/20698) [21260](https://github.com/WordPress/gutenberg/pull/21260)
-  - Prepare for npm release. [21417](https://github.com/WordPress/gutenberg/pull/21417)
-  - Add Fullscreen mode component. [21334](https://github.com/WordPress/gutenberg/pull/21334)
-  - Add InterfaceSkeleton component. [21335](https://github.com/WordPress/gutenberg/pull/21335)
-- @wordpress/icons: Add new icons: tablet, mobile, desktop, font, share... [21261](https://github.com/WordPress/gutenberg/pull/21261) [21278](https://github.com/WordPress/gutenberg/pull/21278)
-- Support changing the Group block's DOM element. [20218](https://github.com/WordPress/gutenberg/pull/20218)
-- Block API: Add new utility to register block types from metadata in PHP [20794](https://github.com/WordPress/gutenberg/pull/20794)
-- Add radio option to the ButtonGroup component. [20805](https://github.com/WordPress/gutenberg/pull/20805)
+-   @wordpress/i18n: Add create-i18n function. [21182](https://github.com/WordPress/gutenberg/pull/21182)
+-   @wordpress/interface:
+    -   Add screen sidebar extensibility APIs. [20698](https://github.com/WordPress/gutenberg/pull/20698) [21260](https://github.com/WordPress/gutenberg/pull/21260)
+    -   Prepare for npm release. [21417](https://github.com/WordPress/gutenberg/pull/21417)
+    -   Add Fullscreen mode component. [21334](https://github.com/WordPress/gutenberg/pull/21334)
+    -   Add InterfaceSkeleton component. [21335](https://github.com/WordPress/gutenberg/pull/21335)
+-   @wordpress/icons: Add new icons: tablet, mobile, desktop, font, share... [21261](https://github.com/WordPress/gutenberg/pull/21261) [21278](https://github.com/WordPress/gutenberg/pull/21278)
+-   Support changing the Group block's DOM element. [20218](https://github.com/WordPress/gutenberg/pull/20218)
+-   Block API: Add new utility to register block types from metadata in PHP [20794](https://github.com/WordPress/gutenberg/pull/20794)
+-   Add radio option to the ButtonGroup component. [20805](https://github.com/WordPress/gutenberg/pull/20805)
 
 ### Experiments
 
-- Full site editing and Site Editor screen:
-  - Use the default post comments template for the Post Comments block. [21012](https://github.com/WordPress/gutenberg/pull/21012)
-  - Use slug as template part display label.[21161](https://github.com/WordPress/gutenberg/pull/21161)
-  - Remove duplicate queries fetching template parts [18878](https://github.com/WordPress/gutenberg/pull/18878)
-  - Preload the edited template to avoid the white page effect. [21214](https://github.com/WordPress/gutenberg/pull/21214)
-  - Move the menu item to the top level. [21273](https://github.com/WordPress/gutenberg/pull/21273)
-  - Add block breadcrumb; [21274](https://github.com/WordPress/gutenberg/pull/21274)
-  - Prevent template switcher jumpiness. [21280](https://github.com/WordPress/gutenberg/pull/21280)
-  - Increase the viewport width used for template previews. [21287](https://github.com/WordPress/gutenberg/pull/21287)
-  - Add top level inserter. [21328](https://github.com/WordPress/gutenberg/pull/21328)
-  - Apply the editor styles. [20982](https://github.com/WordPress/gutenberg/pull/20982)
-  - Update the multi-entity saving flow UI. [21159](https://github.com/WordPress/gutenberg/pull/21159)
-  - Small updates to template selector. [21202](https://github.com/WordPress/gutenberg/pull/21202)
-- New navigation screen:
-  - Bootstrap the screen. [21036](https://github.com/WordPress/gutenberg/pull/21036)
-  - Implement the initial styling. [21314](https://github.com/WordPress/gutenberg/pull/21314)
-  - Add save shortcut. [21342](https://github.com/WordPress/gutenberg/pull/21342)
-  - Fix editor shortcuts. [21338](https://github.com/WordPress/gutenberg/pull/21338)
-  - Basic responsive styles. [21414](https://github.com/WordPress/gutenberg/pull/21414)
-- Navigation block:
-  - Make the submenus usable on mobile. [21471](https://github.com/WordPress/gutenberg/pull/21471)
-  - Fix block for contributor users [18669](https://github.com/WordPress/gutenberg/pull/18669)
-  - Fix submenus being overlapped by wrapping top-level nav links. [21140](https://github.com/WordPress/gutenberg/pull/21140)
-  - Add vertical variation. [21296](https://github.com/WordPress/gutenberg/pull/21296)
-  - Show color controls in toolbar only. [20884](https://github.com/WordPress/gutenberg/pull/20884)
-  - Add capture toolbars prop to inner blocks. [21095](https://github.com/WordPress/gutenberg/pull/21095)
-- Block API Support flags:
-  - Introduce a support key for support global style colors in blocks. [21021](https://github.com/WordPress/gutenberg/pull/21021) [21428](https://github.com/WordPress/gutenberg/pull/21428)
-  - Add the possibility to support gradients using the experimental color support flag; [21481](https://github.com/WordPress/gutenberg/pull/21481)
-  - Add a block support flag for font size. [21153](https://github.com/WordPress/gutenberg/pull/21153)
-- Remove experimentalUIParts API. [20979](https://github.com/WordPress/gutenberg/pull/20979)
-- Add experimental Text component. [21088](https://github.com/WordPress/gutenberg/pull/21088)
+-   Full site editing and Site Editor screen:
+    -   Use the default post comments template for the Post Comments block. [21012](https://github.com/WordPress/gutenberg/pull/21012)
+    -   Use slug as template part display label.[21161](https://github.com/WordPress/gutenberg/pull/21161)
+    -   Remove duplicate queries fetching template parts [18878](https://github.com/WordPress/gutenberg/pull/18878)
+    -   Preload the edited template to avoid the white page effect. [21214](https://github.com/WordPress/gutenberg/pull/21214)
+    -   Move the menu item to the top level. [21273](https://github.com/WordPress/gutenberg/pull/21273)
+    -   Add block breadcrumb; [21274](https://github.com/WordPress/gutenberg/pull/21274)
+    -   Prevent template switcher jumpiness. [21280](https://github.com/WordPress/gutenberg/pull/21280)
+    -   Increase the viewport width used for template previews. [21287](https://github.com/WordPress/gutenberg/pull/21287)
+    -   Add top level inserter. [21328](https://github.com/WordPress/gutenberg/pull/21328)
+    -   Apply the editor styles. [20982](https://github.com/WordPress/gutenberg/pull/20982)
+    -   Update the multi-entity saving flow UI. [21159](https://github.com/WordPress/gutenberg/pull/21159)
+    -   Small updates to template selector. [21202](https://github.com/WordPress/gutenberg/pull/21202)
+-   New navigation screen:
+    -   Bootstrap the screen. [21036](https://github.com/WordPress/gutenberg/pull/21036)
+    -   Implement the initial styling. [21314](https://github.com/WordPress/gutenberg/pull/21314)
+    -   Add save shortcut. [21342](https://github.com/WordPress/gutenberg/pull/21342)
+    -   Fix editor shortcuts. [21338](https://github.com/WordPress/gutenberg/pull/21338)
+    -   Basic responsive styles. [21414](https://github.com/WordPress/gutenberg/pull/21414)
+-   Navigation block:
+    -   Make the submenus usable on mobile. [21471](https://github.com/WordPress/gutenberg/pull/21471)
+    -   Fix block for contributor users [18669](https://github.com/WordPress/gutenberg/pull/18669)
+    -   Fix submenus being overlapped by wrapping top-level nav links. [21140](https://github.com/WordPress/gutenberg/pull/21140)
+    -   Add vertical variation. [21296](https://github.com/WordPress/gutenberg/pull/21296)
+    -   Show color controls in toolbar only. [20884](https://github.com/WordPress/gutenberg/pull/20884)
+    -   Add capture toolbars prop to inner blocks. [21095](https://github.com/WordPress/gutenberg/pull/21095)
+-   Block API Support flags:
+    -   Introduce a support key for support global style colors in blocks. [21021](https://github.com/WordPress/gutenberg/pull/21021) [21428](https://github.com/WordPress/gutenberg/pull/21428)
+    -   Add the possibility to support gradients using the experimental color support flag; [21481](https://github.com/WordPress/gutenberg/pull/21481)
+    -   Add a block support flag for font size. [21153](https://github.com/WordPress/gutenberg/pull/21153)
+-   Remove experimentalUIParts API. [20979](https://github.com/WordPress/gutenberg/pull/20979)
+-   Add experimental Text component. [21088](https://github.com/WordPress/gutenberg/pull/21088)
 
 ### Documentation
 
-- Docs: Describe tools used in E2E testing. [21295](https://github.com/WordPress/gutenberg/pull/21295)
-- WP-env: Add reference to docker log command to show error logs in terminal. [21308](https://github.com/WordPress/gutenberg/pull/21308)
-- Docs: Add section in block RFC about register_block_type_from_metadata. [21501](https://github.com/WordPress/gutenberg/pull/21501)
-- Update serverSideRender docs to include how to use from the wp global. [18722](https://github.com/WordPress/gutenberg/pull/18722)
-- Prescribe latest NPM for development environment. [21017](https://github.com/WordPress/gutenberg/pull/21017)
-- Update Documentation on how to update post meta values from a block. [21155](https://github.com/WordPress/gutenberg/pull/21155)
-- Document getAnchorRect prop for Popover component. [17709](https://github.com/WordPress/gutenberg/pull/17709)
-- Typos and tweaks: [21228](https://github.com/WordPress/gutenberg/pull/21228), [21364](https://github.com/WordPress/gutenberg/pull/21364), [21405](https://github.com/WordPress/gutenberg/pull/21405), [20660](https://github.com/WordPress/gutenberg/pull/20660), [21297](https://github.com/WordPress/gutenberg/pull/21297).
+-   Docs: Describe tools used in E2E testing. [21295](https://github.com/WordPress/gutenberg/pull/21295)
+-   WP-env: Add reference to docker log command to show error logs in terminal. [21308](https://github.com/WordPress/gutenberg/pull/21308)
+-   Docs: Add section in block RFC about register_block_type_from_metadata. [21501](https://github.com/WordPress/gutenberg/pull/21501)
+-   Update serverSideRender docs to include how to use from the wp global. [18722](https://github.com/WordPress/gutenberg/pull/18722)
+-   Prescribe latest NPM for development environment. [21017](https://github.com/WordPress/gutenberg/pull/21017)
+-   Update Documentation on how to update post meta values from a block. [21155](https://github.com/WordPress/gutenberg/pull/21155)
+-   Document getAnchorRect prop for Popover component. [17709](https://github.com/WordPress/gutenberg/pull/17709)
+-   Typos and tweaks: [21228](https://github.com/WordPress/gutenberg/pull/21228), [21364](https://github.com/WordPress/gutenberg/pull/21364), [21405](https://github.com/WordPress/gutenberg/pull/21405), [20660](https://github.com/WordPress/gutenberg/pull/20660), [21297](https://github.com/WordPress/gutenberg/pull/21297).
 
 ### Code Quality
 
-- Add types to WordPress packages:
-  - @wordpress/element [21248](https://github.com/WordPress/gutenberg/pull/21248)
-  - @wordpress/primitives [21482](https://github.com/WordPress/gutenberg/pull/21482)
-  - @wordpress/icons [21487](https://github.com/WordPress/gutenberg/pull/21487)
-  - @wordpress/autop, @wordpress/escape-html and @wordpress/html-entities [20669](https://github.com/WordPress/gutenberg/pull/20669)
-  - @wordpress/i18n [21224](https://github.com/WordPress/gutenberg/pull/21224)
-  - @wordpress/prettier-config [21381](https://github.com/WordPress/gutenberg/pull/21381) [21053](https://github.com/WordPress/gutenberg/pull/21053)
-  - @wordpress/block-editor DOM utils. [21362](https://github.com/WordPress/gutenberg/pull/21362)
-- Update the Buttons block to use the new color support flag. [21266](https://github.com/WordPress/gutenberg/pull/21266)
-- Update the Paragraph block to use the colors support flag. [21037](https://github.com/WordPress/gutenberg/pull/21037)
-- Update the Columns block to use the colors support flag. [21038](https://github.com/WordPress/gutenberg/pull/21038)
-- Update the Heading block to use the colors support flag. [21039](https://github.com/WordPress/gutenberg/pull/21039)
-- Update the Media & Text block to use the colors support flag. [21169](https://github.com/WordPress/gutenberg/pull/21169)
-- Refactor env commands into separate files .[21353](https://github.com/WordPress/gutenberg/pull/21353)
-- Remove the deprecated `request` dependency. [21398](https://github.com/WordPress/gutenberg/pull/21398)
-- Move default styles to editor normalisation stylesheet. [19837](https://github.com/WordPress/gutenberg/pull/19837)
-- Replace lodash.assign with vanilla JS. [21054](https://github.com/WordPress/gutenberg/pull/21054)
-- Remove the old block preview implementation. [21096](https://github.com/WordPress/gutenberg/pull/21096)
-- Make RichText window/document agnostic. [21105](https://github.com/WordPress/gutenberg/pull/21105)
-- Polish a11y package. [21148](https://github.com/WordPress/gutenberg/pull/21148)
-- Fix two typos in lib rest menu controller. [21418](https://github.com/WordPress/gutenberg/pull/21418)
-- Global tips: Add period at the end of sentence. [20601](https://github.com/WordPress/gutenberg/pull/20601)
-- Lighter block DOM:
-  - Verse block [20752](https://github.com/WordPress/gutenberg/pull/20752)
-  - Code block [21079](https://github.com/WordPress/gutenberg/pull/21079)
-  - Preformatted block [21146](https://github.com/WordPress/gutenberg/pull/21146)
-- Update the padding values on the Card component to align with proposed spacing system. [21111](https://github.com/WordPress/gutenberg/pull/21111)
-- Disable scroll in PlainText component. [21115](https://github.com/WordPress/gutenberg/pull/21115)
-- Simplify inserter hasItems check. [21138](https://github.com/WordPress/gutenberg/pull/21138)
-- Avoid string concatenation for the Latest Post block read more link. [21170](https://github.com/WordPress/gutenberg/pull/21170)
+-   Add types to WordPress packages:
+    -   @wordpress/element [21248](https://github.com/WordPress/gutenberg/pull/21248)
+    -   @wordpress/primitives [21482](https://github.com/WordPress/gutenberg/pull/21482)
+    -   @wordpress/icons [21487](https://github.com/WordPress/gutenberg/pull/21487)
+    -   @wordpress/autop, @wordpress/escape-html and @wordpress/html-entities [20669](https://github.com/WordPress/gutenberg/pull/20669)
+    -   @wordpress/i18n [21224](https://github.com/WordPress/gutenberg/pull/21224)
+    -   @wordpress/prettier-config [21381](https://github.com/WordPress/gutenberg/pull/21381) [21053](https://github.com/WordPress/gutenberg/pull/21053)
+    -   @wordpress/block-editor DOM utils. [21362](https://github.com/WordPress/gutenberg/pull/21362)
+-   Update the Buttons block to use the new color support flag. [21266](https://github.com/WordPress/gutenberg/pull/21266)
+-   Update the Paragraph block to use the colors support flag. [21037](https://github.com/WordPress/gutenberg/pull/21037)
+-   Update the Columns block to use the colors support flag. [21038](https://github.com/WordPress/gutenberg/pull/21038)
+-   Update the Heading block to use the colors support flag. [21039](https://github.com/WordPress/gutenberg/pull/21039)
+-   Update the Media & Text block to use the colors support flag. [21169](https://github.com/WordPress/gutenberg/pull/21169)
+-   Refactor env commands into separate files .[21353](https://github.com/WordPress/gutenberg/pull/21353)
+-   Remove the deprecated `request` dependency. [21398](https://github.com/WordPress/gutenberg/pull/21398)
+-   Move default styles to editor normalisation stylesheet. [19837](https://github.com/WordPress/gutenberg/pull/19837)
+-   Replace lodash.assign with vanilla JS. [21054](https://github.com/WordPress/gutenberg/pull/21054)
+-   Remove the old block preview implementation. [21096](https://github.com/WordPress/gutenberg/pull/21096)
+-   Make RichText window/document agnostic. [21105](https://github.com/WordPress/gutenberg/pull/21105)
+-   Polish a11y package. [21148](https://github.com/WordPress/gutenberg/pull/21148)
+-   Fix two typos in lib rest menu controller. [21418](https://github.com/WordPress/gutenberg/pull/21418)
+-   Global tips: Add period at the end of sentence. [20601](https://github.com/WordPress/gutenberg/pull/20601)
+-   Lighter block DOM:
+    -   Verse block [20752](https://github.com/WordPress/gutenberg/pull/20752)
+    -   Code block [21079](https://github.com/WordPress/gutenberg/pull/21079)
+    -   Preformatted block [21146](https://github.com/WordPress/gutenberg/pull/21146)
+-   Update the padding values on the Card component to align with proposed spacing system. [21111](https://github.com/WordPress/gutenberg/pull/21111)
+-   Disable scroll in PlainText component. [21115](https://github.com/WordPress/gutenberg/pull/21115)
+-   Simplify inserter hasItems check. [21138](https://github.com/WordPress/gutenberg/pull/21138)
+-   Avoid string concatenation for the Latest Post block read more link. [21170](https://github.com/WordPress/gutenberg/pull/21170)
 
 ### Various
 
-- Plugin: Bump tested up to info to WP 5.4 [21400](https://github.com/WordPress/gutenberg/pull/21400)
-- Output package type declarations. [18942](https://github.com/WordPress/gutenberg/pull/18942)
-- Exclude native files from type checking. [21491](https://github.com/WordPress/gutenberg/pull/21491)
-- docgen: Optimize README update script. [18840](https://github.com/WordPress/gutenberg/pull/18840)
-- Check Latest NPM on npm install. [21521](https://github.com/WordPress/gutenberg/pull/21521)
-- E2E Tests:
-  - Improve stability of image block test [21174](https://github.com/WordPress/gutenberg/pull/21174)
-  - Improve Allowed Inner Blocks test stability [21175](https://github.com/WordPress/gutenberg/pull/21175)
-  - Use waitForSelector to wait for sidebar presence [21180](https://github.com/WordPress/gutenberg/pull/21180)
-- Unit Tests:
-  - Fix @wordpress/env testPortNumberValidation unit test. [21394](https://github.com/WordPress/gutenberg/pull/21394)
-  - Introduce react-testing-library to some existing unit tests. [20428](https://github.com/WordPress/gutenberg/pull/20428)
-  - Components: Add SlotFill test. [21226](https://github.com/WordPress/gutenberg/pull/21226)
-  - Fail E2E when page displays warning notices [13452](https://github.com/WordPress/gutenberg/pull/13452)
-- Project Management: Prompt user to link GitHub account to WordPress.org profile [21221](https://github.com/WordPress/gutenberg/pull/21221) [21384](https://github.com/WordPress/gutenberg/pull/21384)
-- @wordpress/env: Bind "core" files to tests environment [21195](https://github.com/WordPress/gutenberg/pull/21195)
-- ESLint Plugin: Continue considering unused variables after encountering exception [21354](https://github.com/WordPress/gutenberg/pull/21354)
-- Enable prettier for JSX files [21151](https://github.com/WordPress/gutenberg/pull/21151)
-- Increase severity of JSDoc linting to error. [20427](https://github.com/WordPress/gutenberg/pull/20427)
-- Add I18N specific ESLint rules. [20555](https://github.com/WordPress/gutenberg/pull/20555) [20574](https://github.com/WordPress/gutenberg/pull/20574)
-- Update uuid to v7.0.2. [21258](https://github.com/WordPress/gutenberg/pull/21258)
-- Upgrade Reakit to version 1.0.0-rc.0; [21300](https://github.com/WordPress/gutenberg/pull/21300)
-- Framework: Add package-lock precommit check for latest NPM. [21306](https://github.com/WordPress/gutenberg/pull/21306)
-- Babel Preset: Update Babel version to 7.9.x. [21419](https://github.com/WordPress/gutenberg/pull/21419)
-- ESLint Plugin: Update ESLint and related dependencies to 6.8.x. [21424](https://github.com/WordPress/gutenberg/pull/21424)
-- Framework: Configure ESLint JSDoc plugin to target TypeScript mode. [18998](https://github.com/WordPress/gutenberg/pull/18998)
-- Major version upgrade for Jest in all packages. [20766](https://github.com/WordPress/gutenberg/pull/20766)
-- Storybook:
-  - Add TreeSelect component. [20496](https://github.com/WordPress/gutenberg/pull/20496)
-  - Update AnglePickerControl title. [21089](https://github.com/WordPress/gutenberg/pull/21089)
-- Automated Testing: composer non-interactive flag for Travis. [21118](https://github.com/WordPress/gutenberg/pull/21118)
-- REST API error message: Remove unnecessary space. [21178](https://github.com/WordPress/gutenberg/pull/21178)
-- SlotFill: Guard property access to possibly-undefined slot. [21205](https://github.com/WordPress/gutenberg/pull/21205)
-- Build: Add TypeScript version validation [21208](https://github.com/WordPress/gutenberg/pull/21208)
+-   Plugin: Bump tested up to info to WP 5.4 [21400](https://github.com/WordPress/gutenberg/pull/21400)
+-   Output package type declarations. [18942](https://github.com/WordPress/gutenberg/pull/18942)
+-   Exclude native files from type checking. [21491](https://github.com/WordPress/gutenberg/pull/21491)
+-   docgen: Optimize README update script. [18840](https://github.com/WordPress/gutenberg/pull/18840)
+-   Check Latest NPM on npm install. [21521](https://github.com/WordPress/gutenberg/pull/21521)
+-   E2E Tests:
+    -   Improve stability of image block test [21174](https://github.com/WordPress/gutenberg/pull/21174)
+    -   Improve Allowed Inner Blocks test stability [21175](https://github.com/WordPress/gutenberg/pull/21175)
+    -   Use waitForSelector to wait for sidebar presence [21180](https://github.com/WordPress/gutenberg/pull/21180)
+-   Unit Tests:
+    -   Fix @wordpress/env testPortNumberValidation unit test. [21394](https://github.com/WordPress/gutenberg/pull/21394)
+    -   Introduce react-testing-library to some existing unit tests. [20428](https://github.com/WordPress/gutenberg/pull/20428)
+    -   Components: Add SlotFill test. [21226](https://github.com/WordPress/gutenberg/pull/21226)
+    -   Fail E2E when page displays warning notices [13452](https://github.com/WordPress/gutenberg/pull/13452)
+-   Project Management: Prompt user to link GitHub account to WordPress.org profile [21221](https://github.com/WordPress/gutenberg/pull/21221) [21384](https://github.com/WordPress/gutenberg/pull/21384)
+-   @wordpress/env: Bind "core" files to tests environment [21195](https://github.com/WordPress/gutenberg/pull/21195)
+-   ESLint Plugin: Continue considering unused variables after encountering exception [21354](https://github.com/WordPress/gutenberg/pull/21354)
+-   Enable prettier for JSX files [21151](https://github.com/WordPress/gutenberg/pull/21151)
+-   Increase severity of JSDoc linting to error. [20427](https://github.com/WordPress/gutenberg/pull/20427)
+-   Add I18N specific ESLint rules. [20555](https://github.com/WordPress/gutenberg/pull/20555) [20574](https://github.com/WordPress/gutenberg/pull/20574)
+-   Update uuid to v7.0.2. [21258](https://github.com/WordPress/gutenberg/pull/21258)
+-   Upgrade Reakit to version 1.0.0-rc.0; [21300](https://github.com/WordPress/gutenberg/pull/21300)
+-   Framework: Add package-lock precommit check for latest NPM. [21306](https://github.com/WordPress/gutenberg/pull/21306)
+-   Babel Preset: Update Babel version to 7.9.x. [21419](https://github.com/WordPress/gutenberg/pull/21419)
+-   ESLint Plugin: Update ESLint and related dependencies to 6.8.x. [21424](https://github.com/WordPress/gutenberg/pull/21424)
+-   Framework: Configure ESLint JSDoc plugin to target TypeScript mode. [18998](https://github.com/WordPress/gutenberg/pull/18998)
+-   Major version upgrade for Jest in all packages. [20766](https://github.com/WordPress/gutenberg/pull/20766)
+-   Storybook:
+    -   Add TreeSelect component. [20496](https://github.com/WordPress/gutenberg/pull/20496)
+    -   Update AnglePickerControl title. [21089](https://github.com/WordPress/gutenberg/pull/21089)
+-   Automated Testing: composer non-interactive flag for Travis. [21118](https://github.com/WordPress/gutenberg/pull/21118)
+-   REST API error message: Remove unnecessary space. [21178](https://github.com/WordPress/gutenberg/pull/21178)
+-   SlotFill: Guard property access to possibly-undefined slot. [21205](https://github.com/WordPress/gutenberg/pull/21205)
+-   Build: Add TypeScript version validation [21208](https://github.com/WordPress/gutenberg/pull/21208)
 
+= 7.8.1 =
 
+= 7.8.0 =
 
-= 7.8.1 =
+## Changelog
 
+### Enhancements
 
+-   Add visible labels to BlockPatternPicker pattern selection buttons [19789](https://github.com/WordPress/gutenberg/pull/19789)
+-   Adds always on display of media URL [19504](https://github.com/WordPress/gutenberg/pull/19504)
+-   Adds current menu class to navigation block [20076](https://github.com/WordPress/gutenberg/pull/20076)
+-   Block: Outline when interacting with Toolbar Block Type/Movers [20938](https://github.com/WordPress/gutenberg/pull/20938)
+-   Create block: Improve how prompts and values provided are handled [20756](https://github.com/WordPress/gutenberg/pull/20756)
+-   Expand create block options and add readme.txt template [20694](https://github.com/WordPress/gutenberg/pull/20694)
+-   Patterns: Make adding patterns easier [20854](https://github.com/WordPress/gutenberg/pull/20854)
+-   Polish a few icons [20980](https://github.com/WordPress/gutenberg/pull/20980)
+-   Polish date-picker component [20824](https://github.com/WordPress/gutenberg/pull/20824)
+-   Improve permalink editing [12009](https://github.com/WordPress/gutenberg/pull/12009)
+-   Nicer block footprint for social links [20978](https://github.com/WordPress/gutenberg/pull/20978)
+-   Show inserter only when block selected for nesting contexts [20753](https://github.com/WordPress/gutenberg/pull/20753)
+-   URL: Use test data from web-platform-tests for isURL spec conformance [20537](https://github.com/WordPress/gutenberg/pull/20537)
+-   Adds multi-select to categories on Latest Posts [20781](https://github.com/WordPress/gutenberg/pull/20781)
+-   Add basic nav block example for inserter and styles previews [21011](https://github.com/WordPress/gutenberg/pull/21011)
 
-= 7.8.0 =
+### Bug Fixes
 
-## Enhancements
-​
-- Add visible labels to BlockPatternPicker pattern selection buttons [19789](https://github.com/WordPress/gutenberg/pull/19789)
-- Adds always on display of media URL [19504](https://github.com/WordPress/gutenberg/pull/19504)
-- Adds current menu class to navigation block [20076](https://github.com/WordPress/gutenberg/pull/20076)
-- Block: Outline when interacting with Toolbar Block Type/Movers [20938](https://github.com/WordPress/gutenberg/pull/20938)
-- Create block: Improve how prompts and values provided are handled [20756](https://github.com/WordPress/gutenberg/pull/20756)
-- Expand create block options and add readme.txt template [20694](https://github.com/WordPress/gutenberg/pull/20694)
-- Patterns: Make adding patterns easier [20854](https://github.com/WordPress/gutenberg/pull/20854)
-- Polish a few icons [20980](https://github.com/WordPress/gutenberg/pull/20980)
-- Polish date-picker component [20824](https://github.com/WordPress/gutenberg/pull/20824)
-- Improve permalink editing [12009](https://github.com/WordPress/gutenberg/pull/12009)
-- Nicer block footprint for social links [20978](https://github.com/WordPress/gutenberg/pull/20978)
-- Show inserter only when block selected for nesting contexts [20753](https://github.com/WordPress/gutenberg/pull/20753)
-- URL: Use test data from web-platform-tests for isURL spec conformance [20537](https://github.com/WordPress/gutenberg/pull/20537)
-- Adds multi-select to categories on Latest Posts [20781](https://github.com/WordPress/gutenberg/pull/20781)
-- Add basic nav block example for inserter and styles previews [21011](https://github.com/WordPress/gutenberg/pull/21011)
-​
-## Bug Fixes
-​
-- Allow media library in gallery mode to be reset [20675](https://github.com/WordPress/gutenberg/pull/20675)
-- Autocomplete: Add support for results with long titles [20962](https://github.com/WordPress/gutenberg/pull/20962)
-- Compat: Conditionally filter editor settings for image dimensions [20939](https://github.com/WordPress/gutenberg/pull/20939)
-- Compat: Use core-js-url-browser for URL polyfill [20225](https://github.com/WordPress/gutenberg/pull/20225)
-- Data: Migrate post editor persistence with fullscreenMode false [21082](https://github.com/WordPress/gutenberg/pull/21082)
-- Edit Post: Make sidebar header focusable for button focus normalization [21031](https://github.com/WordPress/gutenberg/pull/21031)
-- Fix auto-hiding appender regression [20780](https://github.com/WordPress/gutenberg/pull/20780)
-- Fix fullscreen mode device preview [21010](https://github.com/WordPress/gutenberg/pull/21010)
-- Fix link control search results spacing. [21003](https://github.com/WordPress/gutenberg/pull/21003)
-- Fix snackbar container block portion of UI while present [21000](https://github.com/WordPress/gutenberg/pull/21000)
-- Make the inner button block not allowed as a reusable block or editable as HTML [20948](https://github.com/WordPress/gutenberg/pull/20948)
-- URL: Fix getQueryString incorrect handling of hash fragment [20738](https://github.com/WordPress/gutenberg/pull/20738)
-- Update social links block to output a custom class on each individual link [20998](https://github.com/WordPress/gutenberg/pull/20998)
-- Update the inserter's block preview to use the AutoHeightPreview [20817](https://github.com/WordPress/gutenberg/pull/20817)
-- Latest Posts:
-	- Fix link for read more markup [20917](https://github.com/WordPress/gutenberg/pull/20917)
-	- Fixes the categories selector crash when category does not exist [20960](https://github.com/WordPress/gutenberg/pull/20960)
-- Fix input rules [20964](https://github.com/WordPress/gutenberg/pull/20964)
-- Trim input value in navigation search input field [19832](https://github.com/WordPress/gutenberg/pull/19832)
-- Fix mobile header [20946](https://github.com/WordPress/gutenberg/pull/20946)
-- Fix visually hidden classnames [20649](https://github.com/WordPress/gutenberg/pull/20649)
-- Fix/screen reader text [20607](https://github.com/WordPress/gutenberg/pull/20607)
-- Fix SelectControl example code synax highlight [19803](https://github.com/WordPress/gutenberg/pull/19803)
-​
-## New APIs
-​
-- Add initial API to register patterns from themes and plugins [21074](https://github.com/WordPress/gutenberg/pull/21074)
-- Convert \__experimentalCreateInterpolateElement to a stable API [20699](https://github.com/WordPress/gutenberg/pull/20699)
-​
-## Experiments
-​
-- Site Editor:
-	- Add Fullscreen mode [20691](https://github.com/WordPress/gutenberg/pull/20691)
-	- Add fullscreen close button [20989](https://github.com/WordPress/gutenberg/pull/20989)
-	- Add more menu and fullscreen toggle [21006](https://github.com/WordPress/gutenberg/pull/21006)
-	- Style resets for top level page [20886](https://github.com/WordPress/gutenberg/pull/20886)
-	- Get current template part correctly for auto drafts [20438](https://github.com/WordPress/gutenberg/pull/20438)
-	- Add template preview to the edit site template switcher [20958](https://github.com/WordPress/gutenberg/pull/20958)
-	- Add things required to load custom blocks to Site Editor page [20549](https://github.com/WordPress/gutenberg/pull/20549)
-	- Avoid page templates overwriting page title [20865](https://github.com/WordPress/gutenberg/pull/20865)
-- Lighter block DOM:
-	- Group [20586](https://github.com/WordPress/gutenberg/pull/20586)
-	- Navigation [20729](https://github.com/WordPress/gutenberg/pull/20729)
-- Navigation Block:
-	- Fix dynamic rendering recursive function name typo [21078](https://github.com/WordPress/gutenberg/pull/21078)
-	- Avoid hiding submenu when adding a link [21035](https://github.com/WordPress/gutenberg/pull/21035)
-	- Fix toolbar overlap on Links [21033](https://github.com/WordPress/gutenberg/pull/21033)
-- PlainText v2 [21076](https://github.com/WordPress/gutenberg/pull/21076)
-	- Editable Component [18361](https://github.com/WordPress/gutenberg/pull/18361)
-​
-## Documentation
-​
-- Add ESNext example for unregisterBlockType [20784](https://github.com/WordPress/gutenberg/pull/20784)
-- Docs/SlotFills: Small update for consistency [20767](https://github.com/WordPress/gutenberg/pull/20767)
-- Correct 2nd param of useViewportMatch() usage [20911](https://github.com/WordPress/gutenberg/pull/20911)
-- Include `npm run dev` guidance in "Getting Started" [21015](https://github.com/WordPress/gutenberg/pull/21015)
-- Document default login credentials and `wp-env run` command [20678](https://github.com/WordPress/gutenberg/pull/20678)
-- Fixes docblock for useViewportMatch [20919](https://github.com/WordPress/gutenberg/pull/20919)
-- Lowercase visual editor and code editor to match block editor and classic editor [20968](https://github.com/WordPress/gutenberg/pull/20968)
-- Update README.md [20913](https://github.com/WordPress/gutenberg/pull/20913)
-- Add Custom Block Editor to TOC and Manifest [20749](https://github.com/WordPress/gutenberg/pull/20749)
-- Add tutorial link to Table of Contents for Custom Block Editor [20750](https://github.com/WordPress/gutenberg/pull/20750)
-​
-## Code Quality
-​
-- Block Editor: Use useResizeObserver in place of direct react-resize-aware dependency [20889](https://github.com/WordPress/gutenberg/pull/20889)
-- E2E Test Utils: Improve durability of embedding matcher [20811](https://github.com/WordPress/gutenberg/pull/20811)
-- Framework: Migrate/remove temporary compatibility script initialization [19178](https://github.com/WordPress/gutenberg/pull/19178)
-- Framework: Use WHATWG URL in place of legacy url module [19823](https://github.com/WordPress/gutenberg/pull/19823)
-- Nav Block: Remove 'frontend' from style comments [21034](https://github.com/WordPress/gutenberg/pull/21034)
-- Project Management Automation: Add TypeScript type-checking [20850](https://github.com/WordPress/gutenberg/pull/20850)
-- Refactor the inserter menu component and split into multiple smaller components [20880](https://github.com/WordPress/gutenberg/pull/20880)
-- Remove iframe from content elements [20976](https://github.com/WordPress/gutenberg/pull/20976)
-- Update Search/RSS block render method [20977](https://github.com/WordPress/gutenberg/pull/20977)
-​
-## Various
-​
-- Update glossary [20934](https://github.com/WordPress/gutenberg/pull/20934)
-- Improve performance testing [20802](https://github.com/WordPress/gutenberg/pull/20802)
-- Edit Post: Register block patterns as separate plugin [20871](https://github.com/WordPress/gutenberg/pull/20871)
-- Accessibility: updated headings to reflect semantic relationship between html tag and it's content. [16444](https://github.com/WordPress/gutenberg/pull/16444)
-- Add Prettier shared config package [20026](https://github.com/WordPress/gutenberg/pull/20026)
-- Add default styles to the TabPanel component [20872](https://github.com/WordPress/gutenberg/pull/20872)
-- Add isFileURL method and use it on all native media upload checks. [20985](https://github.com/WordPress/gutenberg/pull/20985)
-- Add menus endpoints. [20292](https://github.com/WordPress/gutenberg/pull/20292)
-- Block Patterns: Update text-two-columns.json [20890](https://github.com/WordPress/gutenberg/pull/20890)
-- Block Styles: Remove the block margin in the style selector [19983](https://github.com/WordPress/gutenberg/pull/19983)
-- Block patterns: improve success notice [21005](https://github.com/WordPress/gutenberg/pull/21005)
-- Blocks: Allow the Default Style selector to be hidden. [20620](https://github.com/WordPress/gutenberg/pull/20620)
-- E2E Tests: Mock Embed response for InnerBlocks locking test [20481](https://github.com/WordPress/gutenberg/pull/20481)
-- ESLint Plugin: Relax `prefer-const` for destructuring assignment [20737](https://github.com/WordPress/gutenberg/pull/20737)
-- Gallery: Update UI of controls [20776](https://github.com/WordPress/gutenberg/pull/20776)
-- Improves RTL style conversion [20503](https://github.com/WordPress/gutenberg/pull/20503)
-- Minor change to switch Help link target to _blank, add rels [20800](https://github.com/WordPress/gutenberg/pull/20800)
-- Mobile: Add accessibility label to Block List Footer [20633](https://github.com/WordPress/gutenberg/pull/20633)
-- Moves category multi select from LatestPosts to QueryControls [20832](https://github.com/WordPress/gutenberg/pull/20832)
-- Paste: replace iframes with url [20983](https://github.com/WordPress/gutenberg/pull/20983)
-- Polish poster image button arrangement. [20754](https://github.com/WordPress/gutenberg/pull/20754)
-- Preview Button: Remove the separator and border, and reduce the size of the icon. [20683](https://github.com/WordPress/gutenberg/pull/20683)
-- RangeControl: Improve disabled rendering and interactions [20723](https://github.com/WordPress/gutenberg/pull/20723)
-- Reduce gap between block library and preview [20777](https://github.com/WordPress/gutenberg/pull/20777)
-- Remove aria-expanded from close button in Publish panel [20993](https://github.com/WordPress/gutenberg/pull/20993)
-- Remove feature flag for mobile page templates [20718](https://github.com/WordPress/gutenberg/pull/20718)
-- Remove inaccurate message from image block [20909](https://github.com/WordPress/gutenberg/pull/20909)
-- Removed the textarea width restriction for the Shortcode block [20624](https://github.com/WordPress/gutenberg/pull/20624)
-- Revert "Framework: Travis: Avoid skipping Puppeteer download" [20828](https://github.com/WordPress/gutenberg/pull/20828)
-- Show errors in the media replace control [19244](https://github.com/WordPress/gutenberg/pull/19244)
-- Styles Panel: Don't force it to be closed by default. [20617](https://github.com/WordPress/gutenberg/pull/20617)
-- Update Navigation Menu Item icon [20763](https://github.com/WordPress/gutenberg/pull/20763)
-- Update page template picker after design review [20883](https://github.com/WordPress/gutenberg/pull/20883)
-- Latest Posts: Testing larger margins [20563](https://github.com/WordPress/gutenberg/pull/20563)
-- Add codeowners for env package [20667](https://github.com/WordPress/gutenberg/pull/20667)
-- Scripts: Update all webpack related dependencies [20916](https://github.com/WordPress/gutenberg/pull/20916)
-- Dependencies webpack plugin: Let the output file be specified when output is combined [20844](https://github.com/WordPress/gutenberg/pull/20844)
+-   Allow media library in gallery mode to be reset [20675](https://github.com/WordPress/gutenberg/pull/20675)
+-   Autocomplete: Add support for results with long titles [20962](https://github.com/WordPress/gutenberg/pull/20962)
+-   Compat: Conditionally filter editor settings for image dimensions [20939](https://github.com/WordPress/gutenberg/pull/20939)
+-   Compat: Use core-js-url-browser for URL polyfill [20225](https://github.com/WordPress/gutenberg/pull/20225)
+-   Data: Migrate post editor persistence with fullscreenMode false [21082](https://github.com/WordPress/gutenberg/pull/21082)
+-   Edit Post: Make sidebar header focusable for button focus normalization [21031](https://github.com/WordPress/gutenberg/pull/21031)
+-   Fix auto-hiding appender regression [20780](https://github.com/WordPress/gutenberg/pull/20780)
+-   Fix fullscreen mode device preview [21010](https://github.com/WordPress/gutenberg/pull/21010)
+-   Fix link control search results spacing. [21003](https://github.com/WordPress/gutenberg/pull/21003)
+-   Fix snackbar container block portion of UI while present [21000](https://github.com/WordPress/gutenberg/pull/21000)
+-   Make the inner button block not allowed as a reusable block or editable as HTML [20948](https://github.com/WordPress/gutenberg/pull/20948)
+-   URL: Fix getQueryString incorrect handling of hash fragment [20738](https://github.com/WordPress/gutenberg/pull/20738)
+-   Update social links block to output a custom class on each individual link [20998](https://github.com/WordPress/gutenberg/pull/20998)
+-   Update the inserter's block preview to use the AutoHeightPreview [20817](https://github.com/WordPress/gutenberg/pull/20817)
+-   Latest Posts:
+    -   Fix link for read more markup [20917](https://github.com/WordPress/gutenberg/pull/20917)
+    -   Fixes the categories selector crash when category does not exist [20960](https://github.com/WordPress/gutenberg/pull/20960)
+-   Fix input rules [20964](https://github.com/WordPress/gutenberg/pull/20964)
+-   Trim input value in navigation search input field [19832](https://github.com/WordPress/gutenberg/pull/19832)
+-   Fix mobile header [20946](https://github.com/WordPress/gutenberg/pull/20946)
+-   Fix visually hidden classnames [20649](https://github.com/WordPress/gutenberg/pull/20649)
+-   Fix/screen reader text [20607](https://github.com/WordPress/gutenberg/pull/20607)
+-   Fix SelectControl example code synax highlight [19803](https://github.com/WordPress/gutenberg/pull/19803)
+
+### New APIs
+
+-   Add initial API to register patterns from themes and plugins [21074](https://github.com/WordPress/gutenberg/pull/21074)
+-   Convert \_\_experimentalCreateInterpolateElement to a stable API [20699](https://github.com/WordPress/gutenberg/pull/20699)
+
+### Experiments
+
+-   Site Editor:
+    -   Add Fullscreen mode [20691](https://github.com/WordPress/gutenberg/pull/20691)
+    -   Add fullscreen close button [20989](https://github.com/WordPress/gutenberg/pull/20989)
+    -   Add more menu and fullscreen toggle [21006](https://github.com/WordPress/gutenberg/pull/21006)
+    -   Style resets for top level page [20886](https://github.com/WordPress/gutenberg/pull/20886)
+    -   Get current template part correctly for auto drafts [20438](https://github.com/WordPress/gutenberg/pull/20438)
+    -   Add template preview to the edit site template switcher [20958](https://github.com/WordPress/gutenberg/pull/20958)
+    -   Add things required to load custom blocks to Site Editor page [20549](https://github.com/WordPress/gutenberg/pull/20549)
+    -   Avoid page templates overwriting page title [20865](https://github.com/WordPress/gutenberg/pull/20865)
+-   Lighter block DOM:
+    -   Group [20586](https://github.com/WordPress/gutenberg/pull/20586)
+    -   Navigation [20729](https://github.com/WordPress/gutenberg/pull/20729)
+-   Navigation Block:
+    -   Fix dynamic rendering recursive function name typo [21078](https://github.com/WordPress/gutenberg/pull/21078)
+    -   Avoid hiding submenu when adding a link [21035](https://github.com/WordPress/gutenberg/pull/21035)
+    -   Fix toolbar overlap on Links [21033](https://github.com/WordPress/gutenberg/pull/21033)
+-   PlainText v2 [21076](https://github.com/WordPress/gutenberg/pull/21076)
+    -   Editable Component [18361](https://github.com/WordPress/gutenberg/pull/18361)
+
+### Documentation
+
+-   Add ESNext example for unregisterBlockType [20784](https://github.com/WordPress/gutenberg/pull/20784)
+-   Docs/SlotFills: Small update for consistency [20767](https://github.com/WordPress/gutenberg/pull/20767)
+-   Correct 2nd param of useViewportMatch() usage [20911](https://github.com/WordPress/gutenberg/pull/20911)
+-   Include `npm run dev` guidance in "Getting Started" [21015](https://github.com/WordPress/gutenberg/pull/21015)
+-   Document default login credentials and `wp-env run` command [20678](https://github.com/WordPress/gutenberg/pull/20678)
+-   Fixes docblock for useViewportMatch [20919](https://github.com/WordPress/gutenberg/pull/20919)
+-   Lowercase visual editor and code editor to match block editor and classic editor [20968](https://github.com/WordPress/gutenberg/pull/20968)
+-   Update README.md [20913](https://github.com/WordPress/gutenberg/pull/20913)
+-   Add Custom Block Editor to TOC and Manifest [20749](https://github.com/WordPress/gutenberg/pull/20749)
+-   Add tutorial link to Table of Contents for Custom Block Editor [20750](https://github.com/WordPress/gutenberg/pull/20750)
+
+### Code Quality
+
+-   Block Editor: Use useResizeObserver in place of direct react-resize-aware dependency [20889](https://github.com/WordPress/gutenberg/pull/20889)
+-   E2E Test Utils: Improve durability of embedding matcher [20811](https://github.com/WordPress/gutenberg/pull/20811)
+-   Framework: Migrate/remove temporary compatibility script initialization [19178](https://github.com/WordPress/gutenberg/pull/19178)
+-   Framework: Use WHATWG URL in place of legacy url module [19823](https://github.com/WordPress/gutenberg/pull/19823)
+-   Nav Block: Remove 'frontend' from style comments [21034](https://github.com/WordPress/gutenberg/pull/21034)
+-   Project Management Automation: Add TypeScript type-checking [20850](https://github.com/WordPress/gutenberg/pull/20850)
+-   Refactor the inserter menu component and split into multiple smaller components [20880](https://github.com/WordPress/gutenberg/pull/20880)
+-   Remove iframe from content elements [20976](https://github.com/WordPress/gutenberg/pull/20976)
+-   Update Search/RSS block render method [20977](https://github.com/WordPress/gutenberg/pull/20977)
+
+### Various
+
+-   Update glossary [20934](https://github.com/WordPress/gutenberg/pull/20934)
+-   Improve performance testing [20802](https://github.com/WordPress/gutenberg/pull/20802)
+-   Edit Post: Register block patterns as separate plugin [20871](https://github.com/WordPress/gutenberg/pull/20871)
+-   Accessibility: updated headings to reflect semantic relationship between html tag and it's content. [16444](https://github.com/WordPress/gutenberg/pull/16444)
+-   Add Prettier shared config package [20026](https://github.com/WordPress/gutenberg/pull/20026)
+-   Add default styles to the TabPanel component [20872](https://github.com/WordPress/gutenberg/pull/20872)
+-   Add isFileURL method and use it on all native media upload checks. [20985](https://github.com/WordPress/gutenberg/pull/20985)
+-   Add menus endpoints. [20292](https://github.com/WordPress/gutenberg/pull/20292)
+-   Block Patterns: Update text-two-columns.json [20890](https://github.com/WordPress/gutenberg/pull/20890)
+-   Block Styles: Remove the block margin in the style selector [19983](https://github.com/WordPress/gutenberg/pull/19983)
+-   Block patterns: improve success notice [21005](https://github.com/WordPress/gutenberg/pull/21005)
+-   Blocks: Allow the Default Style selector to be hidden. [20620](https://github.com/WordPress/gutenberg/pull/20620)
+-   E2E Tests: Mock Embed response for InnerBlocks locking test [20481](https://github.com/WordPress/gutenberg/pull/20481)
+-   ESLint Plugin: Relax `prefer-const` for destructuring assignment [20737](https://github.com/WordPress/gutenberg/pull/20737)
+-   Gallery: Update UI of controls [20776](https://github.com/WordPress/gutenberg/pull/20776)
+-   Improves RTL style conversion [20503](https://github.com/WordPress/gutenberg/pull/20503)
+-   Minor change to switch Help link target to \_blank, add rels [20800](https://github.com/WordPress/gutenberg/pull/20800)
+-   Mobile: Add accessibility label to Block List Footer [20633](https://github.com/WordPress/gutenberg/pull/20633)
+-   Moves category multi select from LatestPosts to QueryControls [20832](https://github.com/WordPress/gutenberg/pull/20832)
+-   Paste: replace iframes with url [20983](https://github.com/WordPress/gutenberg/pull/20983)
+-   Polish poster image button arrangement. [20754](https://github.com/WordPress/gutenberg/pull/20754)
+-   Preview Button: Remove the separator and border, and reduce the size of the icon. [20683](https://github.com/WordPress/gutenberg/pull/20683)
+-   RangeControl: Improve disabled rendering and interactions [20723](https://github.com/WordPress/gutenberg/pull/20723)
+-   Reduce gap between block library and preview [20777](https://github.com/WordPress/gutenberg/pull/20777)
+-   Remove aria-expanded from close button in Publish panel [20993](https://github.com/WordPress/gutenberg/pull/20993)
+-   Remove feature flag for mobile page templates [20718](https://github.com/WordPress/gutenberg/pull/20718)
+-   Remove inaccurate message from image block [20909](https://github.com/WordPress/gutenberg/pull/20909)
+-   Removed the textarea width restriction for the Shortcode block [20624](https://github.com/WordPress/gutenberg/pull/20624)
+-   Revert "Framework: Travis: Avoid skipping Puppeteer download" [20828](https://github.com/WordPress/gutenberg/pull/20828)
+-   Show errors in the media replace control [19244](https://github.com/WordPress/gutenberg/pull/19244)
+-   Styles Panel: Don't force it to be closed by default. [20617](https://github.com/WordPress/gutenberg/pull/20617)
+-   Update Navigation Menu Item icon [20763](https://github.com/WordPress/gutenberg/pull/20763)
+-   Update page template picker after design review [20883](https://github.com/WordPress/gutenberg/pull/20883)
+-   Latest Posts: Testing larger margins [20563](https://github.com/WordPress/gutenberg/pull/20563)
+-   Add codeowners for env package [20667](https://github.com/WordPress/gutenberg/pull/20667)
+-   Scripts: Update all webpack related dependencies [20916](https://github.com/WordPress/gutenberg/pull/20916)
+-   Dependencies webpack plugin: Let the output file be specified when output is combined [20844](https://github.com/WordPress/gutenberg/pull/20844)
 
 = 7.7.1 =
 
-### Bug Fixes
+## Changelog
 
-- Fix Drag and Drop into the columns block.
-- Fix the columns block selection.
-- Fix applying colors and backgrounds to the columns block.
-- Fix the RangeControl controlled behavior.
+### Bug Fixes
 
+-   Fix Drag and Drop into the columns block.
+-   Fix the columns block selection.
+-   Fix applying colors and backgrounds to the columns block.
+-   Fix the RangeControl controlled behavior.
 
 = 7.7.0 =
 
+## Changelog
+
 ### Features
 
-- Add the initial version of the Patterns UI as a sidebar plugin (This is not the final interface and work is in progress to integrate with the main block inserter). [20354](https://github.com/WordPress/gutenberg/pull/20354), [20715](https://github.com/WordPress/gutenberg/pull/20715).
-  - Add an initial set of patterns [20724](https://github.com/WordPress/gutenberg/pull/20724).
+-   Add the initial version of the Patterns UI as a sidebar plugin (This is not the final interface and work is in progress to integrate with the main block inserter). [20354](https://github.com/WordPress/gutenberg/pull/20354), [20715](https://github.com/WordPress/gutenberg/pull/20715).
+    -   Add an initial set of patterns [20724](https://github.com/WordPress/gutenberg/pull/20724).
 
 ### Enhancements
 
-- Update the Block and editor UI. [19344](https://github.com/WordPress/gutenberg/pull/19344)
-  - New icons. [20464](https://github.com/WordPress/gutenberg/pull/20464)
-  - Avoid empty menu groups. [20495](https://github.com/WordPress/gutenberg/pull/20495)
-  - Block Placeholders. [20441](https://github.com/WordPress/gutenberg/pull/20441), [20676](https://github.com/WordPress/gutenberg/pull/20676).
-  - Various tweaks [20679](https://github.com/WordPress/gutenberg/pull/20679), [20578](https://github.com/WordPress/gutenberg/pull/20578).
-- Improve the Back to WP Admin button in Fullscreen Mode. [20603](https://github.com/WordPress/gutenberg/pull/20603)
-- Make the editor Fullscreen by default. [20611](https://github.com/WordPress/gutenberg/pull/20611)
-- Remove template locking from the columns block [20465](https://github.com/WordPress/gutenberg/pull/20465)
-- Make the inserter full height. [20526](https://github.com/WordPress/gutenberg/pull/20526)
-
-### Bug Fixes
-
-- A11y:
-  - Deselect first/last gallery images on blur. [14930](https://github.com/WordPress/gutenberg/pull/14930)
-  - Revert top toolbar tab order [20571](https://github.com/WordPress/gutenberg/pull/20571)
-- Add an overlay to the html block preview to fix block selection in Firefox. [20425](https://github.com/WordPress/gutenberg/pull/20425)
-- Add missing accessibility attributes in the SVG icons. [20538](https://github.com/WordPress/gutenberg/pull/20538)
-- Fix invalid syntax error on Safari 12. [20507](https://github.com/WordPress/gutenberg/pull/20507)
-- Use a consistent width for the link suggetions. [20448](https://github.com/WordPress/gutenberg/pull/20448)
-- Use full labels for directional block movers. [20664](https://github.com/WordPress/gutenberg/pull/20664)
-- Columns block: Force 50% column width at mid-range viewport. [20597](https://github.com/WordPress/gutenberg/pull/20597)
-- Media & Text block: Fix frontend styles when "Crop image to fill" is selected [20539](https://github.com/WordPress/gutenberg/pull/20539)
-- Latest Post block:
-  - Fix the excerpt length. [20313](https://github.com/WordPress/gutenberg/pull/20313)
-  - Don't trim manual exerptts [20432](https://github.com/WordPress/gutenberg/pull/20432)
-- Fix sidebar scroll issue on small viewports. [20491](https://github.com/WordPress/gutenberg/pull/20491)
-- Social Link block:
-  - Escape generated class name. [20479](https://github.com/WordPress/gutenberg/pull/20479)
-  - Fix label attribute type as string. [20468](https://github.com/WordPress/gutenberg/pull/20468)
-  - i18n: Use placeholder for the default label [20475](https://github.com/WordPress/gutenberg/pull/20475)
-- Simulated Queries (Device previews):
-  - Check for match in stylesheet host and protocol to prevent Chrome breakage. [20673](https://github.com/WordPress/gutenberg/pull/20673)
-  - Fix IE11 editor breakage. [20226](https://github.com/WordPress/gutenberg/pull/20226)
-  - Fix incorrectly displayed preview option for private post types. [20604](https://github.com/WordPress/gutenberg/pull/20604)
-  - Focus preview button after opening preview. [20570](https://github.com/WordPress/gutenberg/pull/20570)
-- Fix isURL regex to take account file urls. [20435](https://github.com/WordPress/gutenberg/pull/20435)
-- Fix error when deleting empty paragraphs in IE11. [20594](https://github.com/WordPress/gutenberg/pull/20594)
-- Fix hidden inserter toggle behind the popover. [20663](https://github.com/WordPress/gutenberg/pull/20663)
-- Fix block registration shared defaults reuse across blocks. [20565](https://github.com/WordPress/gutenberg/pull/20565)
-- Shim meta attributes for early block registrations. [20544](https://github.com/WordPress/gutenberg/pull/20544)
-- Fix bouncing Custom color formatter. [20612](https://github.com/WordPress/gutenberg/pull/20612)
-- Fix Gallery block styles in Edge causing editor breakage. [20690](https://github.com/WordPress/gutenberg/pull/20690)
+-   Update the Block and editor UI. [19344](https://github.com/WordPress/gutenberg/pull/19344)
+    -   New icons. [20464](https://github.com/WordPress/gutenberg/pull/20464)
+    -   Avoid empty menu groups. [20495](https://github.com/WordPress/gutenberg/pull/20495)
+    -   Block Placeholders. [20441](https://github.com/WordPress/gutenberg/pull/20441), [20676](https://github.com/WordPress/gutenberg/pull/20676).
+    -   Various tweaks [20679](https://github.com/WordPress/gutenberg/pull/20679), [20578](https://github.com/WordPress/gutenberg/pull/20578).
+-   Improve the Back to WP Admin button in Fullscreen Mode. [20603](https://github.com/WordPress/gutenberg/pull/20603)
+-   Make the editor Fullscreen by default. [20611](https://github.com/WordPress/gutenberg/pull/20611)
+-   Remove template locking from the columns block [20465](https://github.com/WordPress/gutenberg/pull/20465)
+-   Make the inserter full height. [20526](https://github.com/WordPress/gutenberg/pull/20526)
+
+### Bug Fixes
+
+-   A11y:
+    -   Deselect first/last gallery images on blur. [14930](https://github.com/WordPress/gutenberg/pull/14930)
+    -   Revert top toolbar tab order [20571](https://github.com/WordPress/gutenberg/pull/20571)
+-   Add an overlay to the html block preview to fix block selection in Firefox. [20425](https://github.com/WordPress/gutenberg/pull/20425)
+-   Add missing accessibility attributes in the SVG icons. [20538](https://github.com/WordPress/gutenberg/pull/20538)
+-   Fix invalid syntax error on Safari 12. [20507](https://github.com/WordPress/gutenberg/pull/20507)
+-   Use a consistent width for the link suggetions. [20448](https://github.com/WordPress/gutenberg/pull/20448)
+-   Use full labels for directional block movers. [20664](https://github.com/WordPress/gutenberg/pull/20664)
+-   Columns block: Force 50% column width at mid-range viewport. [20597](https://github.com/WordPress/gutenberg/pull/20597)
+-   Media & Text block: Fix frontend styles when "Crop image to fill" is selected [20539](https://github.com/WordPress/gutenberg/pull/20539)
+-   Latest Post block:
+    -   Fix the excerpt length. [20313](https://github.com/WordPress/gutenberg/pull/20313)
+    -   Don't trim manual exerptts [20432](https://github.com/WordPress/gutenberg/pull/20432)
+-   Fix sidebar scroll issue on small viewports. [20491](https://github.com/WordPress/gutenberg/pull/20491)
+-   Social Link block:
+    -   Escape generated class name. [20479](https://github.com/WordPress/gutenberg/pull/20479)
+    -   Fix label attribute type as string. [20468](https://github.com/WordPress/gutenberg/pull/20468)
+    -   i18n: Use placeholder for the default label [20475](https://github.com/WordPress/gutenberg/pull/20475)
+-   Simulated Queries (Device previews):
+    -   Check for match in stylesheet host and protocol to prevent Chrome breakage. [20673](https://github.com/WordPress/gutenberg/pull/20673)
+    -   Fix IE11 editor breakage. [20226](https://github.com/WordPress/gutenberg/pull/20226)
+    -   Fix incorrectly displayed preview option for private post types. [20604](https://github.com/WordPress/gutenberg/pull/20604)
+    -   Focus preview button after opening preview. [20570](https://github.com/WordPress/gutenberg/pull/20570)
+-   Fix isURL regex to take account file urls. [20435](https://github.com/WordPress/gutenberg/pull/20435)
+-   Fix error when deleting empty paragraphs in IE11. [20594](https://github.com/WordPress/gutenberg/pull/20594)
+-   Fix hidden inserter toggle behind the popover. [20663](https://github.com/WordPress/gutenberg/pull/20663)
+-   Fix block registration shared defaults reuse across blocks. [20565](https://github.com/WordPress/gutenberg/pull/20565)
+-   Shim meta attributes for early block registrations. [20544](https://github.com/WordPress/gutenberg/pull/20544)
+-   Fix bouncing Custom color formatter. [20612](https://github.com/WordPress/gutenberg/pull/20612)
+-   Fix Gallery block styles in Edge causing editor breakage. [20690](https://github.com/WordPress/gutenberg/pull/20690)
 
 ### New APIs:
 
-- @wordpress/env: Add support for ZIP URL sources. [20426](https://github.com/WordPress/gutenberg/pull/20426)
+-   @wordpress/env: Add support for ZIP URL sources. [20426](https://github.com/WordPress/gutenberg/pull/20426)
 
 ### Experiments
 
-- Lighter Block DOM: allow block types to render their own wrapper [19701](https://github.com/WordPress/gutenberg/pull/19701)
-  - Lighter InnerBlocks. [19910](https://github.com/WordPress/gutenberg/pull/19910)
-  - Automatically add block class. [20658](https://github.com/WordPress/gutenberg/pull/20658)
--  BlockPreview: Add __experimentalOnReady prop. [17242](https://github.com/WordPress/gutenberg/pull/17242)
-- Edit Site:
-  - Update template navigation to use new link control. [20366](https://github.com/WordPress/gutenberg/pull/20366)
-  - Update the edit site save modal UI. [20608](https://github.com/WordPress/gutenberg/pull/20608)
-- Fix the block toolbar in the Widgets and Site Edit screens. [20458](https://github.com/WordPress/gutenberg/pull/20458)
-- Fix widgets screen inserter [20680](https://github.com/WordPress/gutenberg/pull/20680)
+-   Lighter Block DOM: allow block types to render their own wrapper [19701](https://github.com/WordPress/gutenberg/pull/19701)
+    -   Lighter InnerBlocks. [19910](https://github.com/WordPress/gutenberg/pull/19910)
+    -   Automatically add block class. [20658](https://github.com/WordPress/gutenberg/pull/20658)
+-   BlockPreview: Add \_\_experimentalOnReady prop. [17242](https://github.com/WordPress/gutenberg/pull/17242)
+-   Edit Site:
+    -   Update template navigation to use new link control. [20366](https://github.com/WordPress/gutenberg/pull/20366)
+    -   Update the edit site save modal UI. [20608](https://github.com/WordPress/gutenberg/pull/20608)
+-   Fix the block toolbar in the Widgets and Site Edit screens. [20458](https://github.com/WordPress/gutenberg/pull/20458)
+-   Fix widgets screen inserter [20680](https://github.com/WordPress/gutenberg/pull/20680)
 
 ### Documentation
 
-- Add tutorial for creating a custom block editor instance. [20410](https://github.com/WordPress/gutenberg/pull/20410)
-- Create a new "Gutenberg as a Platform" page. [20666](https://github.com/WordPress/gutenberg/pull/20666)
-- Typos and tweaks: [20382](https://github.com/WordPress/gutenberg/pull/20382), [20386](https://github.com/WordPress/gutenberg/pull/20386), [20517](https://github.com/WordPress/gutenberg/pull/20517), [20662](https://github.com/WordPress/gutenberg/pull/20662), [20454](https://github.com/WordPress/gutenberg/pull/20454), [20659](https://github.com/WordPress/gutenberg/pull/20659).
+-   Add tutorial for creating a custom block editor instance. [20410](https://github.com/WordPress/gutenberg/pull/20410)
+-   Create a new "Gutenberg as a Platform" page. [20666](https://github.com/WordPress/gutenberg/pull/20666)
+-   Typos and tweaks: [20382](https://github.com/WordPress/gutenberg/pull/20382), [20386](https://github.com/WordPress/gutenberg/pull/20386), [20517](https://github.com/WordPress/gutenberg/pull/20517), [20662](https://github.com/WordPress/gutenberg/pull/20662), [20454](https://github.com/WordPress/gutenberg/pull/20454), [20659](https://github.com/WordPress/gutenberg/pull/20659).
 
 ### Code Quality
 
-- Refactoring to existing blocks to use a lighter DOM:
-  - List block. [20498](https://github.com/WordPress/gutenberg/pull/20498)
-  - Image block. [20576](https://github.com/WordPress/gutenberg/pull/20576)
-  - Heading. [20493](https://github.com/WordPress/gutenberg/pull/20493)
-- Consistent block focus behaviour on mount. [20577](https://github.com/WordPress/gutenberg/pull/20577)
-- Cleanup CSS variables. [20529](https://github.com/WordPress/gutenberg/pull/20529)
-- Use the EditorSkeleton component in the widgets and Edit Site pages. [20440](https://github.com/WordPress/gutenberg/pull/20440), [20431](https://github.com/WordPress/gutenberg/pull/20431).
-- Refactor SlotFill components. [19242](https://github.com/WordPress/gutenberg/pull/19242)
-- Remove useless style override for floats. [20501](https://github.com/WordPress/gutenberg/pull/20501)
-- Block popover: remove data-type. [20531](https://github.com/WordPress/gutenberg/pull/20531)
-- Resizable editor improvements. [20259](https://github.com/WordPress/gutenberg/pull/20259)
+-   Refactoring to existing blocks to use a lighter DOM:
+    -   List block. [20498](https://github.com/WordPress/gutenberg/pull/20498)
+    -   Image block. [20576](https://github.com/WordPress/gutenberg/pull/20576)
+    -   Heading. [20493](https://github.com/WordPress/gutenberg/pull/20493)
+-   Consistent block focus behaviour on mount. [20577](https://github.com/WordPress/gutenberg/pull/20577)
+-   Cleanup CSS variables. [20529](https://github.com/WordPress/gutenberg/pull/20529)
+-   Use the EditorSkeleton component in the widgets and Edit Site pages. [20440](https://github.com/WordPress/gutenberg/pull/20440), [20431](https://github.com/WordPress/gutenberg/pull/20431).
+-   Refactor SlotFill components. [19242](https://github.com/WordPress/gutenberg/pull/19242)
+-   Remove useless style override for floats. [20501](https://github.com/WordPress/gutenberg/pull/20501)
+-   Block popover: remove data-type. [20531](https://github.com/WordPress/gutenberg/pull/20531)
+-   Resizable editor improvements. [20259](https://github.com/WordPress/gutenberg/pull/20259)
 
 ### Various
 
-- @wordpress/env:
-  - Save the database as a volume. [20648](https://github.com/WordPress/gutenberg/pull/20648)
-  - Fix accidental quotes in Site Title. [20520](https://github.com/WordPress/gutenberg/pull/20520)
-  - Set owner of wp-content to www-data. [20406](https://github.com/WordPress/gutenberg/pull/20406)
-- @wordpress/create-block:
-  - Fix system requirements checks. [20461](https://github.com/WordPress/gutenberg/pull/20461) [20456](https://github.com/WordPress/gutenberg/pull/20456)
-- Fix React warning triggered by the BlockToolbar component. [20546](https://github.com/WordPress/gutenberg/pull/20546)
-- Skip the Type Writer effect component in IE 11. [20485](https://github.com/WordPress/gutenberg/pull/20485)
-- Update browserslist to fix out-of-date caniuse-lite messages [20709](https://github.com/WordPress/gutenberg/pull/20709)
-- Add storybook stories:
-  - TextControl [20467](https://github.com/WordPress/gutenberg/pull/20467)
-  - TextAreaControl [20472](https://github.com/WordPress/gutenberg/pull/20472)
-  - SelectControl [20482](https://github.com/WordPress/gutenberg/pull/20482)
-  - Tooltip [20322](https://github.com/WordPress/gutenberg/pull/20322)
-- E2E Tests:
-  - Add test for the Image block. [20622](https://github.com/WordPress/gutenberg/pull/20622)
-  - More stable embed test. [20668](https://github.com/WordPress/gutenberg/pull/20668)
-  - Fix intermittent RichText e2e test failure. [20457](https://github.com/WordPress/gutenberg/pull/20457)
-- Travis: Avoid skipping Puppeteer download. [20547](https://github.com/WordPress/gutenberg/pull/20547)
-- Plugin: Bump minimum WordPress version to 5.3 [20628](https://github.com/WordPress/gutenberg/pull/20628)
-- @wordrpess/priority-queue: Fix for environments that don't have `window` defined. [20486](https://github.com/WordPress/gutenberg/pull/20486)
-- Update jest configuration to only ignore tests from /wordpress/ as a subdirectory [20420](https://github.com/WordPress/gutenberg/pull/20420)
+-   @wordpress/env:
+    -   Save the database as a volume. [20648](https://github.com/WordPress/gutenberg/pull/20648)
+    -   Fix accidental quotes in Site Title. [20520](https://github.com/WordPress/gutenberg/pull/20520)
+    -   Set owner of wp-content to www-data. [20406](https://github.com/WordPress/gutenberg/pull/20406)
+-   @wordpress/create-block:
+    -   Fix system requirements checks. [20461](https://github.com/WordPress/gutenberg/pull/20461) [20456](https://github.com/WordPress/gutenberg/pull/20456)
+-   Fix React warning triggered by the BlockToolbar component. [20546](https://github.com/WordPress/gutenberg/pull/20546)
+-   Skip the Type Writer effect component in IE 11. [20485](https://github.com/WordPress/gutenberg/pull/20485)
+-   Update browserslist to fix out-of-date caniuse-lite messages [20709](https://github.com/WordPress/gutenberg/pull/20709)
+-   Add storybook stories:
+    -   TextControl [20467](https://github.com/WordPress/gutenberg/pull/20467)
+    -   TextAreaControl [20472](https://github.com/WordPress/gutenberg/pull/20472)
+    -   SelectControl [20482](https://github.com/WordPress/gutenberg/pull/20482)
+    -   Tooltip [20322](https://github.com/WordPress/gutenberg/pull/20322)
+-   E2E Tests:
+    -   Add test for the Image block. [20622](https://github.com/WordPress/gutenberg/pull/20622)
+    -   More stable embed test. [20668](https://github.com/WordPress/gutenberg/pull/20668)
+    -   Fix intermittent RichText e2e test failure. [20457](https://github.com/WordPress/gutenberg/pull/20457)
+-   Travis: Avoid skipping Puppeteer download. [20547](https://github.com/WordPress/gutenberg/pull/20547)
+-   Plugin: Bump minimum WordPress version to 5.3 [20628](https://github.com/WordPress/gutenberg/pull/20628)
+-   @wordrpess/priority-queue: Fix for environments that don't have `window` defined. [20486](https://github.com/WordPress/gutenberg/pull/20486)
+-   Update jest configuration to only ignore tests from /wordpress/ as a subdirectory [20420](https://github.com/WordPress/gutenberg/pull/20420)
 
+= 7.6.0 =
 
+## Changelog
 
-= 7.6.0 =
+### Features
+
+-   Add a rotating list of tips to the inserter help panel [20163](https://github.com/WordPress/gutenberg/pull/20163)
+
+### Enhancements
 
-## Features
-- Add a rotating list of tips to the inserter help panel [20163](https://github.com/WordPress/gutenberg/pull/20163)
-
-## Enhancements
-- Improve find-ability for social/video embeds [20224](https://github.com/WordPress/gutenberg/pull/20224)
-
-## New APIs
-- Ensure packages-update wp-scripts command works with missing dependencies [20408](https://github.com/WordPress/gutenberg/pull/20408)
-- Add new option in dependencies webpack plugin to combine assets files into one file [20330](https://github.com/WordPress/gutenberg/pull/20330)
-- Environment:
-    - Add custom port numbers to .wp-env.json [20158](https://github.com/WordPress/gutenberg/pull/20158)
-    - Add support for local override files. [20341](https://github.com/WordPress/gutenberg/pull/20341)
-    - Add debug mode. [20348](https://github.com/WordPress/gutenberg/pull/20348)
-
-## Experimental
-- New blocks:
-    - Post Featured Image. [19875](https://github.com/WordPress/gutenberg/pull/19875)
-    - Comments Count block. [19953](https://github.com/WordPress/gutenberg/pull/19953)
-    - Comments Form block. [19954](https://github.com/WordPress/gutenberg/pull/19954)
-    - Post Tags block. [19580](https://github.com/WordPress/gutenberg/pull/19580)
-- Add new features to the Post Excerpt block. [19715](https://github.com/WordPress/gutenberg/pull/19715)
-- Allow changing Site Title block heading level. [20361](https://github.com/WordPress/gutenberg/pull/20361)
-- Render the post comments form properly [20279](https://github.com/WordPress/gutenberg/pull/20279)
-- Add new features to the Post Date block. [19857](https://github.com/WordPress/gutenberg/pull/19857)
-- Add multiple template loading [19141](https://github.com/WordPress/gutenberg/pull/19141)
-- Show error when resolved block template is empty [20239](https://github.com/WordPress/gutenberg/pull/20239)
-
-## Bug Fixes
-- Overflowing `LinkControl` block editor component. [20154](https://github.com/WordPress/gutenberg/pull/20154)
-- Broken gallery to image transform and inconsistent types used in the gallery block [20084](https://github.com/WordPress/gutenberg/pull/20084)
-- Missing label on heading toolbar. [20248](https://github.com/WordPress/gutenberg/pull/20248)
-- Sidebar jumpiness. [20355](https://github.com/WordPress/gutenberg/pull/20355)
-- Fix wrong imports in PluginBlockSettingsMenuItem [20356](https://github.com/WordPress/gutenberg/pull/20356)
-- Color formatter appears when color choosing is not possible [20222](https://github.com/WordPress/gutenberg/pull/20222)
-- Crash when updating a post with the latest post block [20289](https://github.com/WordPress/gutenberg/pull/20289)
-- Inconsistency on Import from JSON button look [20416](https://github.com/WordPress/gutenberg/pull/20416)
-- Inline image width pop-up 'wanders' down page [20232](https://github.com/WordPress/gutenberg/pull/20232)
-- Styling problem on vertically aligned blocks [20368](https://github.com/WordPress/gutenberg/pull/20368)
-- Remove unnecessary aria-label from link formatter [18742](https://github.com/WordPress/gutenberg/pull/18742)
-- Make navigation button expand to fit longer nav link text [20230](https://github.com/WordPress/gutenberg/pull/20230)
-- Flow for gallery creation and editing [20287](https://github.com/WordPress/gutenberg/pull/20287)
-- Fix background color for dark themes on the spacer block [20296](https://github.com/WordPress/gutenberg/pull/20296)
-- Show metaboxes peeking in even on tiny screens. [20262](https://github.com/WordPress/gutenberg/pull/20262)
-- Add an edit state to media frames to fix an issue when opening a new tab. [17642](https://github.com/WordPress/gutenberg/pull/17642)
-
-## Documentation
-- Add a basic storybook story listing all the @wordpress/icons [20266](https://github.com/WordPress/gutenberg/pull/20266)
-- Add docs for variations in the block registration section [20145](https://github.com/WordPress/gutenberg/pull/20145)
-- Improve README for `<LinkControl />` component. [19677](https://github.com/WordPress/gutenberg/pull/19677)
-- Remove the devhub manifest file [20175](https://github.com/WordPress/gutenberg/pull/20175)
-- Several documentation improvements and typo fixes: [20385](https://github.com/WordPress/gutenberg/pull/20385), [20378](https://github.com/WordPress/gutenberg/pull/20378), [20392](https://github.com/WordPress/gutenberg/pull/20392), [20381](https://github.com/WordPress/gutenberg/pull/20381), [20388](https://github.com/WordPress/gutenberg/pull/20388), [20371](https://github.com/WordPress/gutenberg/pull/20371), [20380](https://github.com/WordPress/gutenberg/pull/20380), [20384](https://github.com/WordPress/gutenberg/pull/20384), [20379](https://github.com/WordPress/gutenberg/pull/20379), [20391](https://github.com/WordPress/gutenberg/pull/20391), [20251](https://github.com/WordPress/gutenberg/pull/20251)
-
-## Various
-- Create block: Add support for `format:js` to ESNext template [20335](https://github.com/WordPress/gutenberg/pull/20335)
-- Add check for minimum system requirements on create block [20398](https://github.com/WordPress/gutenberg/pull/20398)
-- Conditionally apply Editor Skeleton html element styles [20245](https://github.com/WordPress/gutenberg/pull/20245)
-- Environment:
-    - Check for legacy installs and provide the option to delete them. [20340](https://github.com/WordPress/gutenberg/pull/20340)
-    - Fix testsPath on local sources [20353](https://github.com/WordPress/gutenberg/pull/20353)
-    - Use user with UID=33 to run WP CLI commands [20403](https://github.com/WordPress/gutenberg/pull/20403)
-    - Fix issue where docker & wp had different URLs [20228](https://github.com/WordPress/gutenberg/pull/20228)
-    - No longer show error message twice [20157](https://github.com/WordPress/gutenberg/pull/20157)
-    - Support wp-config.php overrides. [20352](https://github.com/WordPress/gutenberg/pull/20352)
-    - Support overwriting generated file directory with an environment variable [20253](https://github.com/WordPress/gutenberg/pull/20253)
+-   Improve find-ability for social/video embeds [20224](https://github.com/WordPress/gutenberg/pull/20224)
+
+### New APIs
+
+-   Ensure packages-update wp-scripts command works with missing dependencies [20408](https://github.com/WordPress/gutenberg/pull/20408)
+-   Add new option in dependencies webpack plugin to combine assets files into one file [20330](https://github.com/WordPress/gutenberg/pull/20330)
+-   Environment:
+    -   Add custom port numbers to .wp-env.json [20158](https://github.com/WordPress/gutenberg/pull/20158)
+    -   Add support for local override files. [20341](https://github.com/WordPress/gutenberg/pull/20341)
+    -   Add debug mode. [20348](https://github.com/WordPress/gutenberg/pull/20348)
+
+### Experimental
+
+-   New blocks:
+    -   Post Featured Image. [19875](https://github.com/WordPress/gutenberg/pull/19875)
+    -   Comments Count block. [19953](https://github.com/WordPress/gutenberg/pull/19953)
+    -   Comments Form block. [19954](https://github.com/WordPress/gutenberg/pull/19954)
+    -   Post Tags block. [19580](https://github.com/WordPress/gutenberg/pull/19580)
+-   Add new features to the Post Excerpt block. [19715](https://github.com/WordPress/gutenberg/pull/19715)
+-   Allow changing Site Title block heading level. [20361](https://github.com/WordPress/gutenberg/pull/20361)
+-   Render the post comments form properly [20279](https://github.com/WordPress/gutenberg/pull/20279)
+-   Add new features to the Post Date block. [19857](https://github.com/WordPress/gutenberg/pull/19857)
+-   Add multiple template loading [19141](https://github.com/WordPress/gutenberg/pull/19141)
+-   Show error when resolved block template is empty [20239](https://github.com/WordPress/gutenberg/pull/20239)
+
+### Bug Fixes
+
+-   Overflowing `LinkControl` block editor component. [20154](https://github.com/WordPress/gutenberg/pull/20154)
+-   Broken gallery to image transform and inconsistent types used in the gallery block [20084](https://github.com/WordPress/gutenberg/pull/20084)
+-   Missing label on heading toolbar. [20248](https://github.com/WordPress/gutenberg/pull/20248)
+-   Sidebar jumpiness. [20355](https://github.com/WordPress/gutenberg/pull/20355)
+-   Fix wrong imports in PluginBlockSettingsMenuItem [20356](https://github.com/WordPress/gutenberg/pull/20356)
+-   Color formatter appears when color choosing is not possible [20222](https://github.com/WordPress/gutenberg/pull/20222)
+-   Crash when updating a post with the latest post block [20289](https://github.com/WordPress/gutenberg/pull/20289)
+-   Inconsistency on Import from JSON button look [20416](https://github.com/WordPress/gutenberg/pull/20416)
+-   Inline image width pop-up 'wanders' down page [20232](https://github.com/WordPress/gutenberg/pull/20232)
+-   Styling problem on vertically aligned blocks [20368](https://github.com/WordPress/gutenberg/pull/20368)
+-   Remove unnecessary aria-label from link formatter [18742](https://github.com/WordPress/gutenberg/pull/18742)
+-   Make navigation button expand to fit longer nav link text [20230](https://github.com/WordPress/gutenberg/pull/20230)
+-   Flow for gallery creation and editing [20287](https://github.com/WordPress/gutenberg/pull/20287)
+-   Fix background color for dark themes on the spacer block [20296](https://github.com/WordPress/gutenberg/pull/20296)
+-   Show metaboxes peeking in even on tiny screens. [20262](https://github.com/WordPress/gutenberg/pull/20262)
+-   Add an edit state to media frames to fix an issue when opening a new tab. [17642](https://github.com/WordPress/gutenberg/pull/17642)
+
+### Documentation
+
+-   Add a basic storybook story listing all the @wordpress/icons [20266](https://github.com/WordPress/gutenberg/pull/20266)
+-   Add docs for variations in the block registration section [20145](https://github.com/WordPress/gutenberg/pull/20145)
+-   Improve README for `<LinkControl />` component. [19677](https://github.com/WordPress/gutenberg/pull/19677)
+-   Remove the devhub manifest file [20175](https://github.com/WordPress/gutenberg/pull/20175)
+-   Several documentation improvements and typo fixes: [20385](https://github.com/WordPress/gutenberg/pull/20385), [20378](https://github.com/WordPress/gutenberg/pull/20378), [20392](https://github.com/WordPress/gutenberg/pull/20392), [20381](https://github.com/WordPress/gutenberg/pull/20381), [20388](https://github.com/WordPress/gutenberg/pull/20388), [20371](https://github.com/WordPress/gutenberg/pull/20371), [20380](https://github.com/WordPress/gutenberg/pull/20380), [20384](https://github.com/WordPress/gutenberg/pull/20384), [20379](https://github.com/WordPress/gutenberg/pull/20379), [20391](https://github.com/WordPress/gutenberg/pull/20391), [20251](https://github.com/WordPress/gutenberg/pull/20251)
+
+### Various
+
+-   Create block: Add support for `format:js` to ESNext template [20335](https://github.com/WordPress/gutenberg/pull/20335)
+-   Add check for minimum system requirements on create block [20398](https://github.com/WordPress/gutenberg/pull/20398)
+-   Conditionally apply Editor Skeleton html element styles [20245](https://github.com/WordPress/gutenberg/pull/20245)
+-   Environment:
+    -   Check for legacy installs and provide the option to delete them. [20340](https://github.com/WordPress/gutenberg/pull/20340)
+    -   Fix testsPath on local sources [20353](https://github.com/WordPress/gutenberg/pull/20353)
+    -   Use user with UID=33 to run WP CLI commands [20403](https://github.com/WordPress/gutenberg/pull/20403)
+    -   Fix issue where docker & wp had different URLs [20228](https://github.com/WordPress/gutenberg/pull/20228)
+    -   No longer show error message twice [20157](https://github.com/WordPress/gutenberg/pull/20157)
+    -   Support wp-config.php overrides. [20352](https://github.com/WordPress/gutenberg/pull/20352)
+    -   Support overwriting generated file directory with an environment variable [20253](https://github.com/WordPress/gutenberg/pull/20253)
 
 = 7.5.0 =
 
-## Features
-
-- Mark the Social Links block as a stable block [20134](https://github.com/WordPress/gutenberg/pull/20134) [19887](https://github.com/WordPress/gutenberg/pull/19887) [20074](https://github.com/WordPress/gutenberg/pull/20074) [20150](https://github.com/WordPress/gutenberg/pull/20150) [20101](https://github.com/WordPress/gutenberg/pull/20101)
-- Support aadding featured images to Latest Posts block [17151](https://github.com/WordPress/gutenberg/pull/17151)
-- Add support for TikTok video Embeds [19345](https://github.com/WordPress/gutenberg/pull/19345)
-- Add inline text color support [16014](https://github.com/WordPress/gutenberg/pull/16014)
-- Add text color support to Columns block [20016](https://github.com/WordPress/gutenberg/pull/20016)
-
-## Enhancements
-
-- Add type and angle picking to the custom gradient component [19582](https://github.com/WordPress/gutenberg/pull/19582)
-- Add transform for button to buttons block [20063](https://github.com/WordPress/gutenberg/pull/20063)
-- Navigation block:
-	- Implement new design for sub-menus [19681](https://github.com/WordPress/gutenberg/pull/19681)
-	- Set inherit color to anchor elements [20038](https://github.com/WordPress/gutenberg/pull/20038)
-	- Fix getting Navigation parent block [20032](https://github.com/WordPress/gutenberg/pull/20032) [20057](https://github.com/WordPress/gutenberg/pull/20057)
-	- Set width in order to show caret [20075](https://github.com/WordPress/gutenberg/pull/20075)
-    - Improve colors handling [20022](https://github.com/WordPress/gutenberg/pull/20022)
-    - Rename background color CSS class [20018](https://github.com/WordPress/gutenberg/pull/20018)
-- Block Library: Avoid column width auto-adjustment when sibling width changes [19515](https://github.com/WordPress/gutenberg/pull/19515) [20169](https://github.com/WordPress/gutenberg/pull/20169)
-- A11y:
-    - Incorporate settings in the edit state of the LinkControl component [20052](https://github.com/WordPress/gutenberg/pull/20052)
-    - Announce all Notice components messages [15745](https://github.com/WordPress/gutenberg/pull/15745)
-    - Button block: Remove title attribute [19735](https://github.com/WordPress/gutenberg/pull/19735)
-    - Navigation block: Remove title attribute [19990](https://github.com/WordPress/gutenberg/pull/19990)
-- Image block: Keep existing caption if the stored one is empty [19641](https://github.com/WordPress/gutenberg/pull/19641)
-- Enhance the custom gradient picker UI [20099](https://github.com/WordPress/gutenberg/pull/20099)
-
-## New APIs
-
-- Allow third-party keyboard shortcuts registration in the keyboard shortcuts modal [19965](https://github.com/WordPress/gutenberg/pull/19965)
-- Stabilize the AnglePickerControl component [20118](https://github.com/WordPress/gutenberg/pull/20118)
-- Add .wp-env.json config file support to @wordpress/env [20002](https://github.com/WordPress/gutenberg/pull/20002)
-- Blocks: Promote block variations to stable API [20068](https://github.com/WordPress/gutenberg/pull/20068)
-- Mark the gradients theme API as stable [20107](https://github.com/WordPress/gutenberg/pull/20107)
-
-## Experimental
-
-- Add ability to disable the block popover through __experimentalUIParts.hasPopover option [19922](https://github.com/WordPress/gutenberg/pull/19922)
-- Add the __experimentalEditorSkeleton component to the block-editor package [20050](https://github.com/WordPress/gutenberg/pull/20050) [20132](https://github.com/WordPress/gutenberg/pull/20132)
-
-## Bug Fixes
-
-- A11y: Show open button when the sidebar is closed and tabbing out of the content [19726](https://github.com/WordPress/gutenberg/pull/19726)
-- IE11 Compatibility: Add DOMRect polyfill [20110](https://github.com/WordPress/gutenberg/pull/20110)
-- Block Editor: Fix warning when rendering InnerBlocks [20082](https://github.com/WordPress/gutenberg/pull/20082)
-- Featured image appears cropped [20128](https://github.com/WordPress/gutenberg/pull/20128)
-- Fix predefined text colors used in the Group block on the frontend [20119](https://github.com/WordPress/gutenberg/pull/20119)
-- Use array form for contrast checkers. [20143](https://github.com/WordPress/gutenberg/pull/20143)
-- i18n: make experimentalUseColors labels translatable [20112](https://github.com/WordPress/gutenberg/pull/20112)
-- Multi select: remove inserter between selected blocks [20096](https://github.com/WordPress/gutenberg/pull/20096)
-- Remove alignment options from nested Button blocks [19824](https://github.com/WordPress/gutenberg/pull/19824)
-- URL: Conform to URL Living Standard definition of valid URL [19871](https://github.com/WordPress/gutenberg/pull/19871)
-- Select the correct media in the media modal when replacing existing media [20100](https://github.com/WordPress/gutenberg/pull/20100)
-- Avoid resizing the editor canvas when opening the publish panel [19843](https://github.com/WordPress/gutenberg/pull/19843)
-- Fix Media & Text block styling when media is set to show on the right [20125](https://github.com/WordPress/gutenberg/pull/20125)
-- Fix excerpt rendering in the Latest posts block [19669](https://github.com/WordPress/gutenberg/pull/19669)
-
-## Documentation
-
-- Docs: Contributor Guide update subpages [19939](https://github.com/WordPress/gutenberg/pull/19939)
-- Prettier: Update format-js to use default config, and update editor docs usage [20036](https://github.com/WordPress/gutenberg/pull/20036)
-- Target docs to manifest.json [15639](https://github.com/WordPress/gutenberg/pull/15639)
-- Update main project README [19743](https://github.com/WordPress/gutenberg/pull/19743)
-- Update the Getting Started Docs to use `wp-env` [20044](https://github.com/WordPress/gutenberg/pull/20044)
-- Typos and tweaks: [20055](https://github.com/WordPress/gutenberg/pull/20055) [20077](https://github.com/WordPress/gutenberg/pull/20077) [20025](https://github.com/WordPress/gutenberg/pull/20025) [20060](https://github.com/WordPress/gutenberg/pull/20060) [19470](https://github.com/WordPress/gutenberg/pull/19470)
-
-## Various
-
-- Block Editor: Update BEM syntax to CSS modifer guidelines [19738](https://github.com/WordPress/gutenberg/pull/19738)
-- Block Library: Standardize PHP function names used [20085](https://github.com/WordPress/gutenberg/pull/20085) [20039](https://github.com/WordPress/gutenberg/pull/20039)
-- Project Management Automation:
-	- Log skipped tasks and retain wrapped task names. [20034](https://github.com/WordPress/gutenberg/pull/20034)
-	- Support adding milestones for fork PRs. [20058](https://github.com/WordPress/gutenberg/pull/20058)
-	- Avoid gracefully handling error [20009](https://github.com/WordPress/gutenberg/pull/20009)
-	- Avoid milestone task for forks [20049](https://github.com/WordPress/gutenberg/pull/20049)
-	- Call core setFailed with error message [20012](https://github.com/WordPress/gutenberg/pull/20012)
-	- Check error object for parsed errors [20014](https://github.com/WordPress/gutenberg/pull/20014)
-	- Guard against non-matching commits in `addMilestone`. [20147](https://github.com/WordPress/gutenberg/pull/20147)
-	- Tolerate duplicate milestone [20011](https://github.com/WordPress/gutenberg/pull/20011)
-    - Pull Request Automation: Avoid automation tasks for forked repository [20021](https://github.com/WordPress/gutenberg/pull/20021)
-- @wordpress/env:
-	- Fix GitHub source pattern [20131](https://github.com/WordPress/gutenberg/pull/20131)
-	- Fix syntax error where spread operator could fail [20113](https://github.com/WordPress/gutenberg/pull/20113)
-- Move existing icons to the @wordpress/icons package [20091](https://github.com/WordPress/gutenberg/pull/20091) [20072](https://github.com/WordPress/gutenberg/pull/20072) [19959](https://github.com/WordPress/gutenberg/pull/19959) [20094](https://github.com/WordPress/gutenberg/pull/20094) [20087](https://github.com/WordPress/gutenberg/pull/20087)
-- Ensure the default Prettier config is used with `lint-js` when needed [20071](https://github.com/WordPress/gutenberg/pull/20071)
-- Data: Log first-pass `useSelect` errors [20122](https://github.com/WordPress/gutenberg/pull/20122)
-- Compat: Social Links: Remove legacy renderers from packages [20098](https://github.com/WordPress/gutenberg/pull/20098)
-- Core Data: Mark the `getEntityRecordNoResolver` selector as experimental. [20053](https://github.com/WordPress/gutenberg/pull/20053)
-- Core Data: Remove unused `__experimentalUseEntitySaving` hook. [20148](https://github.com/WordPress/gutenberg/pull/20148)
-- Hide the navigation block behind feature flag [20133](https://github.com/WordPress/gutenberg/pull/20133)
-- Fix Intermitent e2e test failures [20065](https://github.com/WordPress/gutenberg/pull/20065)
-- Move the e2e tests to the right folders [20135](https://github.com/WordPress/gutenberg/pull/20135)
-- Switch social link icons to import svg parts from primitives [19877](https://github.com/WordPress/gutenberg/pull/19877)
+## Changelog
+
+### Features
+
+-   Mark the Social Links block as a stable block [20134](https://github.com/WordPress/gutenberg/pull/20134) [19887](https://github.com/WordPress/gutenberg/pull/19887) [20074](https://github.com/WordPress/gutenberg/pull/20074) [20150](https://github.com/WordPress/gutenberg/pull/20150) [20101](https://github.com/WordPress/gutenberg/pull/20101)
+-   Support aadding featured images to Latest Posts block [17151](https://github.com/WordPress/gutenberg/pull/17151)
+-   Add support for TikTok video Embeds [19345](https://github.com/WordPress/gutenberg/pull/19345)
+-   Add inline text color support [16014](https://github.com/WordPress/gutenberg/pull/16014)
+-   Add text color support to Columns block [20016](https://github.com/WordPress/gutenberg/pull/20016)
+
+### Enhancements
+
+-   Add type and angle picking to the custom gradient component [19582](https://github.com/WordPress/gutenberg/pull/19582)
+-   Add transform for button to buttons block [20063](https://github.com/WordPress/gutenberg/pull/20063)
+-   Navigation block:
+    -   Implement new design for sub-menus [19681](https://github.com/WordPress/gutenberg/pull/19681)
+    -   Set inherit color to anchor elements [20038](https://github.com/WordPress/gutenberg/pull/20038)
+    -   Fix getting Navigation parent block [20032](https://github.com/WordPress/gutenberg/pull/20032) [20057](https://github.com/WordPress/gutenberg/pull/20057)
+    -   Set width in order to show caret [20075](https://github.com/WordPress/gutenberg/pull/20075)
+        -   Improve colors handling [20022](https://github.com/WordPress/gutenberg/pull/20022)
+        -   Rename background color CSS class [20018](https://github.com/WordPress/gutenberg/pull/20018)
+-   Block Library: Avoid column width auto-adjustment when sibling width changes [19515](https://github.com/WordPress/gutenberg/pull/19515) [20169](https://github.com/WordPress/gutenberg/pull/20169)
+-   A11y:
+    -   Incorporate settings in the edit state of the LinkControl component [20052](https://github.com/WordPress/gutenberg/pull/20052)
+    -   Announce all Notice components messages [15745](https://github.com/WordPress/gutenberg/pull/15745)
+    -   Button block: Remove title attribute [19735](https://github.com/WordPress/gutenberg/pull/19735)
+    -   Navigation block: Remove title attribute [19990](https://github.com/WordPress/gutenberg/pull/19990)
+-   Image block: Keep existing caption if the stored one is empty [19641](https://github.com/WordPress/gutenberg/pull/19641)
+-   Enhance the custom gradient picker UI [20099](https://github.com/WordPress/gutenberg/pull/20099)
+
+### New APIs
+
+-   Allow third-party keyboard shortcuts registration in the keyboard shortcuts modal [19965](https://github.com/WordPress/gutenberg/pull/19965)
+-   Stabilize the AnglePickerControl component [20118](https://github.com/WordPress/gutenberg/pull/20118)
+-   Add .wp-env.json config file support to @wordpress/env [20002](https://github.com/WordPress/gutenberg/pull/20002)
+-   Blocks: Promote block variations to stable API [20068](https://github.com/WordPress/gutenberg/pull/20068)
+-   Mark the gradients theme API as stable [20107](https://github.com/WordPress/gutenberg/pull/20107)
+
+### Experimental
+
+-   Add ability to disable the block popover through \_\_experimentalUIParts.hasPopover option [19922](https://github.com/WordPress/gutenberg/pull/19922)
+-   Add the \_\_experimentalEditorSkeleton component to the block-editor package [20050](https://github.com/WordPress/gutenberg/pull/20050) [20132](https://github.com/WordPress/gutenberg/pull/20132)
+
+### Bug Fixes
+
+-   A11y: Show open button when the sidebar is closed and tabbing out of the content [19726](https://github.com/WordPress/gutenberg/pull/19726)
+-   IE11 Compatibility: Add DOMRect polyfill [20110](https://github.com/WordPress/gutenberg/pull/20110)
+-   Block Editor: Fix warning when rendering InnerBlocks [20082](https://github.com/WordPress/gutenberg/pull/20082)
+-   Featured image appears cropped [20128](https://github.com/WordPress/gutenberg/pull/20128)
+-   Fix predefined text colors used in the Group block on the frontend [20119](https://github.com/WordPress/gutenberg/pull/20119)
+-   Use array form for contrast checkers. [20143](https://github.com/WordPress/gutenberg/pull/20143)
+-   i18n: make experimentalUseColors labels translatable [20112](https://github.com/WordPress/gutenberg/pull/20112)
+-   Multi select: remove inserter between selected blocks [20096](https://github.com/WordPress/gutenberg/pull/20096)
+-   Remove alignment options from nested Button blocks [19824](https://github.com/WordPress/gutenberg/pull/19824)
+-   URL: Conform to URL Living Standard definition of valid URL [19871](https://github.com/WordPress/gutenberg/pull/19871)
+-   Select the correct media in the media modal when replacing existing media [20100](https://github.com/WordPress/gutenberg/pull/20100)
+-   Avoid resizing the editor canvas when opening the publish panel [19843](https://github.com/WordPress/gutenberg/pull/19843)
+-   Fix Media & Text block styling when media is set to show on the right [20125](https://github.com/WordPress/gutenberg/pull/20125)
+-   Fix excerpt rendering in the Latest posts block [19669](https://github.com/WordPress/gutenberg/pull/19669)
+
+### Documentation
+
+-   Docs: Contributor Guide update subpages [19939](https://github.com/WordPress/gutenberg/pull/19939)
+-   Prettier: Update format-js to use default config, and update editor docs usage [20036](https://github.com/WordPress/gutenberg/pull/20036)
+-   Target docs to manifest.json [15639](https://github.com/WordPress/gutenberg/pull/15639)
+-   Update main project README [19743](https://github.com/WordPress/gutenberg/pull/19743)
+-   Update the Getting Started Docs to use `wp-env` [20044](https://github.com/WordPress/gutenberg/pull/20044)
+-   Typos and tweaks: [20055](https://github.com/WordPress/gutenberg/pull/20055) [20077](https://github.com/WordPress/gutenberg/pull/20077) [20025](https://github.com/WordPress/gutenberg/pull/20025) [20060](https://github.com/WordPress/gutenberg/pull/20060) [19470](https://github.com/WordPress/gutenberg/pull/19470)
+
+### Various
 
+-   Block Editor: Update BEM syntax to CSS modifer guidelines [19738](https://github.com/WordPress/gutenberg/pull/19738)
+-   Block Library: Standardize PHP function names used [20085](https://github.com/WordPress/gutenberg/pull/20085) [20039](https://github.com/WordPress/gutenberg/pull/20039)
+-   Project Management Automation:
+    -   Log skipped tasks and retain wrapped task names. [20034](https://github.com/WordPress/gutenberg/pull/20034)
+    -   Support adding milestones for fork PRs. [20058](https://github.com/WordPress/gutenberg/pull/20058)
+    -   Avoid gracefully handling error [20009](https://github.com/WordPress/gutenberg/pull/20009)
+    -   Avoid milestone task for forks [20049](https://github.com/WordPress/gutenberg/pull/20049)
+    -   Call core setFailed with error message [20012](https://github.com/WordPress/gutenberg/pull/20012)
+    -   Check error object for parsed errors [20014](https://github.com/WordPress/gutenberg/pull/20014)
+    -   Guard against non-matching commits in `addMilestone`. [20147](https://github.com/WordPress/gutenberg/pull/20147)
+    -   Tolerate duplicate milestone [20011](https://github.com/WordPress/gutenberg/pull/20011)
+        -   Pull Request Automation: Avoid automation tasks for forked repository [20021](https://github.com/WordPress/gutenberg/pull/20021)
+-   @wordpress/env:
+    -   Fix GitHub source pattern [20131](https://github.com/WordPress/gutenberg/pull/20131)
+    -   Fix syntax error where spread operator could fail [20113](https://github.com/WordPress/gutenberg/pull/20113)
+-   Move existing icons to the @wordpress/icons package [20091](https://github.com/WordPress/gutenberg/pull/20091) [20072](https://github.com/WordPress/gutenberg/pull/20072) [19959](https://github.com/WordPress/gutenberg/pull/19959) [20094](https://github.com/WordPress/gutenberg/pull/20094) [20087](https://github.com/WordPress/gutenberg/pull/20087)
+-   Ensure the default Prettier config is used with `lint-js` when needed [20071](https://github.com/WordPress/gutenberg/pull/20071)
+-   Data: Log first-pass `useSelect` errors [20122](https://github.com/WordPress/gutenberg/pull/20122)
+-   Compat: Social Links: Remove legacy renderers from packages [20098](https://github.com/WordPress/gutenberg/pull/20098)
+-   Core Data: Mark the `getEntityRecordNoResolver` selector as experimental. [20053](https://github.com/WordPress/gutenberg/pull/20053)
+-   Core Data: Remove unused `__experimentalUseEntitySaving` hook. [20148](https://github.com/WordPress/gutenberg/pull/20148)
+-   Hide the navigation block behind feature flag [20133](https://github.com/WordPress/gutenberg/pull/20133)
+-   Fix Intermitent e2e test failures [20065](https://github.com/WordPress/gutenberg/pull/20065)
+-   Move the e2e tests to the right folders [20135](https://github.com/WordPress/gutenberg/pull/20135)
+-   Switch social link icons to import svg parts from primitives [19877](https://github.com/WordPress/gutenberg/pull/19877)
 
 = 7.4.0 =
 
+## Changelog
+
 ### Features
 
-*   Add background color support to the Columns block. [17813](https://github.com/WordPress/gutenberg/pull/17813)
-*   Add text color support for the Group block. [19181](https://github.com/WordPress/gutenberg/pull/19181)
+-   Add background color support to the Columns block. [17813](https://github.com/WordPress/gutenberg/pull/17813)
+-   Add text color support for the Group block. [19181](https://github.com/WordPress/gutenberg/pull/19181)
 
 ### Enhancements
 
-*   Navigation Block:
-    *   Add submenu chevron indication setting. [19601](https://github.com/WordPress/gutenberg/pull/19601)
-    *   Save the ID to the destination entity. [18641](https://github.com/WordPress/gutenberg/pull/18641)
-    *   Select Parent Navigation Block after clicking "Create from all top-level pages". [19817](https://github.com/WordPress/gutenberg/pull/19817)
-    *   Update Appender visibility. [19598](https://github.com/WordPress/gutenberg/pull/19598) [19846](https://github.com/WordPress/gutenberg/pull/19846)
-    *   Move the Link Settings panel. [19917](https://github.com/WordPress/gutenberg/pull/19917)
-    *   Improve the UX to add links. [19686](https://github.com/WordPress/gutenberg/pull/19686)
-*   Multi-selection: don't focus first selected block. [19762](https://github.com/WordPress/gutenberg/pull/19762)
-*   Use the new link control component in the RichText link format. [19462](https://github.com/WordPress/gutenberg/pull/19462)
-*   Copy: Apply sentence case formatting to panel titles. [19901](https://github.com/WordPress/gutenberg/pull/19901)
-*   A11y: Add conditions and new translation strings for the BlockMover. [19757](https://github.com/WordPress/gutenberg/pull/19757)
+-   Navigation Block:
+    -   Add submenu chevron indication setting. [19601](https://github.com/WordPress/gutenberg/pull/19601)
+    -   Save the ID to the destination entity. [18641](https://github.com/WordPress/gutenberg/pull/18641)
+    -   Select Parent Navigation Block after clicking "Create from all top-level pages". [19817](https://github.com/WordPress/gutenberg/pull/19817)
+    -   Update Appender visibility. [19598](https://github.com/WordPress/gutenberg/pull/19598) [19846](https://github.com/WordPress/gutenberg/pull/19846)
+    -   Move the Link Settings panel. [19917](https://github.com/WordPress/gutenberg/pull/19917)
+    -   Improve the UX to add links. [19686](https://github.com/WordPress/gutenberg/pull/19686)
+-   Multi-selection: don't focus first selected block. [19762](https://github.com/WordPress/gutenberg/pull/19762)
+-   Use the new link control component in the RichText link format. [19462](https://github.com/WordPress/gutenberg/pull/19462)
+-   Copy: Apply sentence case formatting to panel titles. [19901](https://github.com/WordPress/gutenberg/pull/19901)
+-   A11y: Add conditions and new translation strings for the BlockMover. [19757](https://github.com/WordPress/gutenberg/pull/19757)
 
 ### New APIs
 
-*   Add a new @wordpress/create-block package for block scaffolding. [19773](https://github.com/WordPress/gutenberg/pull/19773) [19867](https://github.com/WordPress/gutenberg/pull/19867)
-*   Add a new @wordpress/icons package:
-    *   Introduce the package. [17055](https://github.com/WordPress/gutenberg/pull/17055)
-    *   Make it a package that is always embedded to avoid loading all the icons at once. [19809](https://github.com/WordPress/gutenberg/pull/19809)
-    *   Move icons used in the project to the package. [19944](https://github.com/WordPress/gutenberg/pull/19944) [19808](https://github.com/WordPress/gutenberg/pull/19808) [19834](https://github.com/WordPress/gutenberg/pull/19834) [19862](https://github.com/WordPress/gutenberg/pull/19862) [19838](https://github.com/WordPress/gutenberg/pull/19838) [19943](https://github.com/WordPress/gutenberg/pull/19943) [19926](https://github.com/WordPress/gutenberg/pull/19926)
-*   Add a new @wordpress/primitives package. [19781](https://github.com/WordPress/gutenberg/pull/19781) [19876](https://github.com/WordPress/gutenberg/pull/19876)
-
-### Bug Fixes
-
-*   Prevent gallery images from creating undo levels as they load. [19937](https://github.com/WordPress/gutenberg/pull/19937)
-*   FontSizePicker: Adjust Select Button size. [19479](https://github.com/WordPress/gutenberg/pull/19479)
-*   Remove post title escaping. [19955](https://github.com/WordPress/gutenberg/pull/19955)
-*   Fix Failure message styling in placeholders. [19673](https://github.com/WordPress/gutenberg/pull/19673)
-*   Fix RTL styles for the Media Text block. [18764](https://github.com/WordPress/gutenberg/pull/18764)
-*   Fix panel header styles. [19842](https://github.com/WordPress/gutenberg/pull/19842)
-*   Fix the editor fixed position at the 960px breakpoint. [19970](https://github.com/WordPress/gutenberg/pull/19970)
-*   Allow disabling color selection but keeping gradient support. [19925](https://github.com/WordPress/gutenberg/pull/19925)
-*   Prevent crash when creating a hierarchical post without a title. [19936](https://github.com/WordPress/gutenberg/pull/19936)
-*   Media & Text block: "Crop image to fill entire column" setting resets on image change. [19765](https://github.com/WordPress/gutenberg/pull/19765)
-*   Prevent Alt+F10 from scrolling to the top. [19896](https://github.com/WordPress/gutenberg/pull/19896)
-*   Fix clearing multi-selection with side click. [19787](https://github.com/WordPress/gutenberg/pull/19787)
-*   Update hover and focus selectors for "Move to Trash" to ensure the link is always red [19974](https://github.com/WordPress/gutenberg/pull/19974).
-*   Popover component:
-    *   clean up requestAnimationFrame. [19771](https://github.com/WordPress/gutenberg/pull/19771)
-    *   fix typo causing the mobile inserter to go out of view. [19978](https://github.com/WordPress/gutenberg/pull/19978)
-*   Fix bug in block multi-selection causing Rich text editing to be disabled. [19839](https://github.com/WordPress/gutenberg/pull/19839)
-*   Fix useSelect React hook timing and rerendering issues. [19286](https://github.com/WordPress/gutenberg/pull/19286)
-*   Core-data: do not publish outdated state to subscribers during updates. [19752](https://github.com/WordPress/gutenberg/pull/19752)
-*   LinkControl component (Navigation and buttons blocks):
-    *   Initialize inputValue state from value prop. [19737](https://github.com/WordPress/gutenberg/pull/19737)
-    *   Handle submission via form handler. [19651](https://github.com/WordPress/gutenberg/pull/19651)
-    *   Use URL as a link when title empty. [19739](https://github.com/WordPress/gutenberg/pull/19739)
-    *   Prevent focus loss in edit mode toggle. [19931](https://github.com/WordPress/gutenberg/pull/19931)
-    *   Resolve error when value is undefined. [19856](https://github.com/WordPress/gutenberg/pull/19856)
-    *   Handle Popover onClose for LinkControl. [19885](https://github.com/WordPress/gutenberg/pull/19885)
+-   Add a new @wordpress/create-block package for block scaffolding. [19773](https://github.com/WordPress/gutenberg/pull/19773) [19867](https://github.com/WordPress/gutenberg/pull/19867)
+-   Add a new @wordpress/icons package:
+    -   Introduce the package. [17055](https://github.com/WordPress/gutenberg/pull/17055)
+    -   Make it a package that is always embedded to avoid loading all the icons at once. [19809](https://github.com/WordPress/gutenberg/pull/19809)
+    -   Move icons used in the project to the package. [19944](https://github.com/WordPress/gutenberg/pull/19944) [19808](https://github.com/WordPress/gutenberg/pull/19808) [19834](https://github.com/WordPress/gutenberg/pull/19834) [19862](https://github.com/WordPress/gutenberg/pull/19862) [19838](https://github.com/WordPress/gutenberg/pull/19838) [19943](https://github.com/WordPress/gutenberg/pull/19943) [19926](https://github.com/WordPress/gutenberg/pull/19926)
+-   Add a new @wordpress/primitives package. [19781](https://github.com/WordPress/gutenberg/pull/19781) [19876](https://github.com/WordPress/gutenberg/pull/19876)
+
+### Bug Fixes
+
+-   Prevent gallery images from creating undo levels as they load. [19937](https://github.com/WordPress/gutenberg/pull/19937)
+-   FontSizePicker: Adjust Select Button size. [19479](https://github.com/WordPress/gutenberg/pull/19479)
+-   Remove post title escaping. [19955](https://github.com/WordPress/gutenberg/pull/19955)
+-   Fix Failure message styling in placeholders. [19673](https://github.com/WordPress/gutenberg/pull/19673)
+-   Fix RTL styles for the Media Text block. [18764](https://github.com/WordPress/gutenberg/pull/18764)
+-   Fix panel header styles. [19842](https://github.com/WordPress/gutenberg/pull/19842)
+-   Fix the editor fixed position at the 960px breakpoint. [19970](https://github.com/WordPress/gutenberg/pull/19970)
+-   Allow disabling color selection but keeping gradient support. [19925](https://github.com/WordPress/gutenberg/pull/19925)
+-   Prevent crash when creating a hierarchical post without a title. [19936](https://github.com/WordPress/gutenberg/pull/19936)
+-   Media & Text block: "Crop image to fill entire column" setting resets on image change. [19765](https://github.com/WordPress/gutenberg/pull/19765)
+-   Prevent Alt+F10 from scrolling to the top. [19896](https://github.com/WordPress/gutenberg/pull/19896)
+-   Fix clearing multi-selection with side click. [19787](https://github.com/WordPress/gutenberg/pull/19787)
+-   Update hover and focus selectors for "Move to Trash" to ensure the link is always red [19974](https://github.com/WordPress/gutenberg/pull/19974).
+-   Popover component:
+    -   clean up requestAnimationFrame. [19771](https://github.com/WordPress/gutenberg/pull/19771)
+    -   fix typo causing the mobile inserter to go out of view. [19978](https://github.com/WordPress/gutenberg/pull/19978)
+-   Fix bug in block multi-selection causing Rich text editing to be disabled. [19839](https://github.com/WordPress/gutenberg/pull/19839)
+-   Fix useSelect React hook timing and rerendering issues. [19286](https://github.com/WordPress/gutenberg/pull/19286)
+-   Core-data: do not publish outdated state to subscribers during updates. [19752](https://github.com/WordPress/gutenberg/pull/19752)
+-   LinkControl component (Navigation and buttons blocks):
+    -   Initialize inputValue state from value prop. [19737](https://github.com/WordPress/gutenberg/pull/19737)
+    -   Handle submission via form handler. [19651](https://github.com/WordPress/gutenberg/pull/19651)
+    -   Use URL as a link when title empty. [19739](https://github.com/WordPress/gutenberg/pull/19739)
+    -   Prevent focus loss in edit mode toggle. [19931](https://github.com/WordPress/gutenberg/pull/19931)
+    -   Resolve error when value is undefined. [19856](https://github.com/WordPress/gutenberg/pull/19856)
+    -   Handle Popover onClose for LinkControl. [19885](https://github.com/WordPress/gutenberg/pull/19885)
 
 ### Experiments
 
-*   Add AnglePicker Component and useDragging hook. [19637](https://github.com/WordPress/gutenberg/pull/19637)
-*   Add Global styles CSS variables generation mechanism. [19883](https://github.com/WordPress/gutenberg/pull/19883)
-*   Allow blocks to register variations that shows-up in the inserter. [19243](https://github.com/WordPress/gutenberg/pull/19243)
-*   Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. [19330](https://github.com/WordPress/gutenberg/pull/19330)
+-   Add AnglePicker Component and useDragging hook. [19637](https://github.com/WordPress/gutenberg/pull/19637)
+-   Add Global styles CSS variables generation mechanism. [19883](https://github.com/WordPress/gutenberg/pull/19883)
+-   Allow blocks to register variations that shows-up in the inserter. [19243](https://github.com/WordPress/gutenberg/pull/19243)
+-   Block Directory: Refactor the reducer by breaking out the block management actions into their own reducer. [19330](https://github.com/WordPress/gutenberg/pull/19330)
 
 ### Documentation
 
-*   Add docs for LocalAutosaveMonitor and __experimentalUpdateLocalAutosaveInterval. [19915](https://github.com/WordPress/gutenberg/pull/19915)
-*   Add markdownlint script to lint docs markup. [19855](https://github.com/WordPress/gutenberg/pull/19855)
-*   Add format-js detailed documentaation to @wordpress/scripts package. [19946](https://github.com/WordPress/gutenberg/pull/19946)
-*   Reorganize the Contributors Guide. [19853](https://github.com/WordPress/gutenberg/pull/19853)
-*   Clarify when isEligible function is called. [19899](https://github.com/WordPress/gutenberg/pull/19899)
-*   Typos and tweaks: [19833](https://github.com/WordPress/gutenberg/pull/19833), [19914](https://github.com/WordPress/gutenberg/pull/19914), [19736](https://github.com/WordPress/gutenberg/pull/19736), [19759](https://github.com/WordPress/gutenberg/pull/19759), [19869](https://github.com/WordPress/gutenberg/pull/19869), [19802](https://github.com/WordPress/gutenberg/pull/19802), [19813](https://github.com/WordPress/gutenberg/pull/19813).
+-   Add docs for LocalAutosaveMonitor and \_\_experimentalUpdateLocalAutosaveInterval. [19915](https://github.com/WordPress/gutenberg/pull/19915)
+-   Add markdownlint script to lint docs markup. [19855](https://github.com/WordPress/gutenberg/pull/19855)
+-   Add format-js detailed documentaation to @wordpress/scripts package. [19946](https://github.com/WordPress/gutenberg/pull/19946)
+-   Reorganize the Contributors Guide. [19853](https://github.com/WordPress/gutenberg/pull/19853)
+-   Clarify when isEligible function is called. [19899](https://github.com/WordPress/gutenberg/pull/19899)
+-   Typos and tweaks: [19833](https://github.com/WordPress/gutenberg/pull/19833), [19914](https://github.com/WordPress/gutenberg/pull/19914), [19736](https://github.com/WordPress/gutenberg/pull/19736), [19759](https://github.com/WordPress/gutenberg/pull/19759), [19869](https://github.com/WordPress/gutenberg/pull/19869), [19802](https://github.com/WordPress/gutenberg/pull/19802), [19813](https://github.com/WordPress/gutenberg/pull/19813).
 
 ### Various
 
-*   Introduce Prettier Formatting:
-    *   Add the formatting script. [18048](https://github.com/WordPress/gutenberg/pull/18048) [19994](https://github.com/WordPress/gutenberg/pull/19994)
-    *   Format the codebase. [19963](https://github.com/WordPress/gutenberg/pull/19963)
-    *   Set a consistent line width. [19992](https://github.com/WordPress/gutenberg/pull/19992)
-*   Automation:
-    *   Fix pull request merge automation errors. [19768](https://github.com/WordPress/gutenberg/pull/19768)
-    *   Run pull request automation on closed. [19742](https://github.com/WordPress/gutenberg/pull/19742)
-    *   Add a step that updates CHANGELOG files before npm releases. [19764](https://github.com/WordPress/gutenberg/pull/19764)
-*   Allow Babel Stage 4 features. [19831](https://github.com/WordPress/gutenberg/pull/19831) [19065](https://github.com/WordPress/gutenberg/pull/19065)
-*   Use a Link to the changelog instead of adding it inline in the plugin README. [19761](https://github.com/WordPress/gutenberg/pull/19761)
-*   Use require.resolve() in @wordpress/jest-preset-default config [19957](https://github.com/WordPress/gutenberg/pull/19957).
-*   Fix multi-selection intermittent e2e failure. [19865](https://github.com/WordPress/gutenberg/pull/19865)
-*   Add Placeholder component to Storybook. [19734](https://github.com/WordPress/gutenberg/pull/19734)
-*   Include block.json files in the plugin build output. [19786](https://github.com/WordPress/gutenberg/pull/19786)
-*   Rename patterns to variations in the Block API. [19966](https://github.com/WordPress/gutenberg/pull/19966)
-*   Paragraph block:
-    *   remove min-height. [19835](https://github.com/WordPress/gutenberg/pull/19835)
-    *   remove unnecessary CSS after shortcuts removal. [19821](https://github.com/WordPress/gutenberg/pull/19821)
-*   Refactor ObserveTyping as function component. [19881](https://github.com/WordPress/gutenberg/pull/19881)
-*   Move the is-navigate-mode classname to the WritingFlow component. 19868
-*   Block: use React context to provide the selected element. [19782](https://github.com/WordPress/gutenberg/pull/19782)
-*   Remove dead is-hovered selectors. [19870](https://github.com/WordPress/gutenberg/pull/19870)
-*   Remove the editor dependency from the block library. [16160](https://github.com/WordPress/gutenberg/pull/16160)
-*   Remove an unnecessary import from the playground. [19893](https://github.com/WordPress/gutenberg/pull/19893)
-*   Refactor the RichText wrapper to use React hooks for wrapper component. [19095](https://github.com/WordPress/gutenberg/pull/19095)
-*   RichText API: Limit "prefix" transformations to Paragraph blocks. [19727](https://github.com/WordPress/gutenberg/pull/19727)
-*   Apply width-based modifier classes to Placeholder only when the width is known. [19825](https://github.com/WordPress/gutenberg/pull/19825)
-*   Various:
-*   Refactor the server-side rendering of the Navigation block. [19989](https://github.com/WordPress/gutenberg/pull/19989) [19991](https://github.com/WordPress/gutenberg/pull/19991)
-*   Fix server-registered fixtures script. [19884](https://github.com/WordPress/gutenberg/pull/19884)
-*   Remove the RichText is-selected class. [19822](https://github.com/WordPress/gutenberg/pull/19822)
-*   Testing: Use deterministic selectors for incremented IDs. [19844](https://github.com/WordPress/gutenberg/pull/19844)
-
+-   Introduce Prettier Formatting:
+    -   Add the formatting script. [18048](https://github.com/WordPress/gutenberg/pull/18048) [19994](https://github.com/WordPress/gutenberg/pull/19994)
+    -   Format the codebase. [19963](https://github.com/WordPress/gutenberg/pull/19963)
+    -   Set a consistent line width. [19992](https://github.com/WordPress/gutenberg/pull/19992)
+-   Automation:
+    -   Fix pull request merge automation errors. [19768](https://github.com/WordPress/gutenberg/pull/19768)
+    -   Run pull request automation on closed. [19742](https://github.com/WordPress/gutenberg/pull/19742)
+    -   Add a step that updates CHANGELOG files before npm releases. [19764](https://github.com/WordPress/gutenberg/pull/19764)
+-   Allow Babel Stage 4 features. [19831](https://github.com/WordPress/gutenberg/pull/19831) [19065](https://github.com/WordPress/gutenberg/pull/19065)
+-   Use a Link to the changelog instead of adding it inline in the plugin README. [19761](https://github.com/WordPress/gutenberg/pull/19761)
+-   Use require.resolve() in @wordpress/jest-preset-default config [19957](https://github.com/WordPress/gutenberg/pull/19957).
+-   Fix multi-selection intermittent e2e failure. [19865](https://github.com/WordPress/gutenberg/pull/19865)
+-   Add Placeholder component to Storybook. [19734](https://github.com/WordPress/gutenberg/pull/19734)
+-   Include block.json files in the plugin build output. [19786](https://github.com/WordPress/gutenberg/pull/19786)
+-   Rename patterns to variations in the Block API. [19966](https://github.com/WordPress/gutenberg/pull/19966)
+-   Paragraph block:
+    -   remove min-height. [19835](https://github.com/WordPress/gutenberg/pull/19835)
+    -   remove unnecessary CSS after shortcuts removal. [19821](https://github.com/WordPress/gutenberg/pull/19821)
+-   Refactor ObserveTyping as function component. [19881](https://github.com/WordPress/gutenberg/pull/19881)
+-   Move the is-navigate-mode classname to the WritingFlow component. 19868
+-   Block: use React context to provide the selected element. [19782](https://github.com/WordPress/gutenberg/pull/19782)
+-   Remove dead is-hovered selectors. [19870](https://github.com/WordPress/gutenberg/pull/19870)
+-   Remove the editor dependency from the block library. [16160](https://github.com/WordPress/gutenberg/pull/16160)
+-   Remove an unnecessary import from the playground. [19893](https://github.com/WordPress/gutenberg/pull/19893)
+-   Refactor the RichText wrapper to use React hooks for wrapper component. [19095](https://github.com/WordPress/gutenberg/pull/19095)
+-   RichText API: Limit "prefix" transformations to Paragraph blocks. [19727](https://github.com/WordPress/gutenberg/pull/19727)
+-   Apply width-based modifier classes to Placeholder only when the width is known. [19825](https://github.com/WordPress/gutenberg/pull/19825)
+-   Various:
+-   Refactor the server-side rendering of the Navigation block. [19989](https://github.com/WordPress/gutenberg/pull/19989) [19991](https://github.com/WordPress/gutenberg/pull/19991)
+-   Fix server-registered fixtures script. [19884](https://github.com/WordPress/gutenberg/pull/19884)
+-   Remove the RichText is-selected class. [19822](https://github.com/WordPress/gutenberg/pull/19822)
+-   Testing: Use deterministic selectors for incremented IDs. [19844](https://github.com/WordPress/gutenberg/pull/19844)
 
 = 7.3.0 =
 
+## Changelog
+
+### Enhancements
+
+-   Add border to table header & footer [19450](https://github.com/WordPress/gutenberg/pull/19450)
+-   Add the new replace flow to the cover [19583](https://github.com/WordPress/gutenberg/pull/19583), media text [19198](https://github.com/WordPress/gutenberg/pull/19198), file [19174](https://github.com/WordPress/gutenberg/pull/19174), audio [19158](https://github.com/WordPress/gutenberg/pull/19158) and video [19162](https://github.com/WordPress/gutenberg/pull/19162) block.
+-   Components: improve ToolbarButton [18931](https://github.com/WordPress/gutenberg/pull/18931)
+-   Sibling inserter: fix dead zone between blocks [19719](https://github.com/WordPress/gutenberg/pull/19719) [19729](https://github.com/WordPress/gutenberg/pull/19729)
+-   Top toolbar: adjust tab order [19623](https://github.com/WordPress/gutenberg/pull/19623)
+-   Regions: position publish region after sidebar [19427](https://github.com/WordPress/gutenberg/pull/19427)
+-   Better accessibility labels for blocks [18132](https://github.com/WordPress/gutenberg/pull/18132)
+-   Breadcrumb: add accessibility label [19597](https://github.com/WordPress/gutenberg/pull/19597)
+-   Navigation: add background color [19108](https://github.com/WordPress/gutenberg/pull/19108)
+
+### Performance
+
+-   Lighter block DOM:
+    -   Put sibling inserter in popover [19456](https://github.com/WordPress/gutenberg/pull/19456)
+    -   Remove extra div wrapper [19010](https://github.com/WordPress/gutenberg/pull/19010)
+    -   Remove inner div wrapper [19593](https://github.com/WordPress/gutenberg/pull/19593)
+    -   Split out toolbar rendering [19564](https://github.com/WordPress/gutenberg/pull/19564)
+    -   Put side inserter in Popover [19406](https://github.com/WordPress/gutenberg/pull/19406)
+    -   Rewrite drop zone with hooks (useDropZone) [19514](https://github.com/WordPress/gutenberg/pull/19514)
+    -   Merge effects [19617](https://github.com/WordPress/gutenberg/pull/19617)
+    -   Fix alignments [19704](https://github.com/WordPress/gutenberg/pull/19704)
+    -   Clean up after control removal [19618](https://github.com/WordPress/gutenberg/pull/19618)
+    -   Reposition tabbable inserter [19596](https://github.com/WordPress/gutenberg/pull/19596)
+-   Avoid rerendering every block when caret moves in and out of formatting [19524](https://github.com/WordPress/gutenberg/pull/19524)
+
+### Bug Fixes
+
+-   Navigation:
+    -   Format the allowed styles [19477](https://github.com/WordPress/gutenberg/pull/19477)
+    -   Show recent pages as default suggestions when creating Nav Links [19458](https://github.com/WordPress/gutenberg/pull/19458)
+    -   Define allowedFormats option for NavigationLink [19507](https://github.com/WordPress/gutenberg/pull/19507)
+    -   Rename the LinkControl's edit button title [19505](https://github.com/WordPress/gutenberg/pull/19505)
+    -   Use underline instead of bottom border for nav links [19538](https://github.com/WordPress/gutenberg/pull/19538)
+    -   Do not output Links with empty labels [19652](https://github.com/WordPress/gutenberg/pull/19652)
+    -   Remove draggable from all navigation-link blocks [19648](https://github.com/WordPress/gutenberg/pull/19648)
+    -   Remove duplicate CSS from Navigation that is aleady in Link CSS [19540](https://github.com/WordPress/gutenberg/pull/19540)
+    -   Remove the text color button double border on the navigation block toolbar [19567](https://github.com/WordPress/gutenberg/pull/19567)
+    -   Replace, on editing a Link, the current label with the title of page or post [19461](https://github.com/WordPress/gutenberg/pull/19461)
+    -   Add description for the Link Settings Description in the Link Block settings [19508](https://github.com/WordPress/gutenberg/pull/19508)
+    -   Fix Link url escaping [19679](https://github.com/WordPress/gutenberg/pull/19679)
+    -   Fix alignment on left border between menu navigation controls and menu item [19511](https://github.com/WordPress/gutenberg/pull/19511)
+    -   Styling fixes after navigation feature merge [19455](https://github.com/WordPress/gutenberg/pull/19455)
+-   Add support for align wide to deprecated versions of gallery block [19522](https://github.com/WordPress/gutenberg/pull/19522)
+-   Block top toolbar: fix mover direction [19574](https://github.com/WordPress/gutenberg/pull/19574)
+-   Editor keyboard shortcuts: fix Toggle Sidebar [19605](https://github.com/WordPress/gutenberg/pull/19605)
+-   Editor: Fix Block Embed Input size [19438](https://github.com/WordPress/gutenberg/pull/19438)
+-   Fix ServerSideRender component showing className [19555](https://github.com/WordPress/gutenberg/pull/19555)
+-   Fix writing flow focus capturing [19621](https://github.com/WordPress/gutenberg/pull/19621)
+-   Fix small visual select glitch [19590](https://github.com/WordPress/gutenberg/pull/19590)
+-   Fix the height of the tags tokens [19592](https://github.com/WordPress/gutenberg/pull/19592)
+-   Fix buttons block Link shortcut not working with multiple buttons [19492](https://github.com/WordPress/gutenberg/pull/19492)
+-   Disable HTML on Link [19483](https://github.com/WordPress/gutenberg/pull/19483)
+-   Fix managing page break in the block manager [19303](https://github.com/WordPress/gutenberg/pull/19303)
+-   Show predefined colors in the navigation block [19493](https://github.com/WordPress/gutenberg/pull/19493)
+-   Update CSS rule on the widgets screen required for drag & drop [19428](https://github.com/WordPress/gutenberg/pull/19428)
+-   Multi block selection: fix tabbing [19700](https://github.com/WordPress/gutenberg/pull/19700)
+-   Multi block selection: set focus back after attempt [19720](https://github.com/WordPress/gutenberg/pull/19720)
+-   RichText: don't set focus when applying format [19536](https://github.com/WordPress/gutenberg/pull/19536)
+-   Writing Flow: fix list selection [19721](https://github.com/WordPress/gutenberg/pull/19721)
+-   Fix Color Picker Format Toggle placement [19607](https://github.com/WordPress/gutenberg/pull/19607)
+-   Fix Columns block pattern picker item margin. [19494](https://github.com/WordPress/gutenberg/pull/19494)
+-   Fix block styles for More block [19745](https://github.com/WordPress/gutenberg/pull/19745)
+-   Block: fix hasMovers BlockList setting for top toolbar [19619](https://github.com/WordPress/gutenberg/pull/19619)
+
+### New APIs
+
+-   Components: add ImageSizeControl component [17148](https://github.com/WordPress/gutenberg/pull/17148)
+-   Add block collections [17609](https://github.com/WordPress/gutenberg/pull/17609)
+-   Add `Text` component [18495](https://github.com/WordPress/gutenberg/pull/18495)
+-   Add warning package [19317](https://github.com/WordPress/gutenberg/pull/19317)
+-   Components: add isFocusable state to Button [19337](https://github.com/WordPress/gutenberg/pull/19337)
+
+### Experiments
+
+-   Edit Site:
+    -   Add a Post Author block [19576](https://github.com/WordPress/gutenberg/pull/19576)
+    -   Add a Post Date block [19578](https://github.com/WordPress/gutenberg/pull/19578)
+    -   Add a Post Excerpt block [19579](https://github.com/WordPress/gutenberg/pull/19579)
+    -   Implement Template Part block editing 2 [19203](https://github.com/WordPress/gutenberg/pull/19203)
+    -   Add template loading [19081](https://github.com/WordPress/gutenberg/pull/19081)
+-   Block Directory:
+    -   Change 'update' icon to text to be more communicative [19451](https://github.com/WordPress/gutenberg/pull/19451)
+    -   Update the action button label to read 'Add block' [19412](https://github.com/WordPress/gutenberg/pull/19412)
+-   useColors:
+    -   Fix contrast check [19500](https://github.com/WordPress/gutenberg/pull/19500)
+    -   Directly pass ref for color detecting [19474](https://github.com/WordPress/gutenberg/pull/19474)
+-   InnerBlocks: Fix toolbar capturing [19530](https://github.com/WordPress/gutenberg/pull/19530)
 
-## Enhancements
-
-- Add border to table header & footer [19450](https://github.com/WordPress/gutenberg/pull/19450)
-- Add the new replace flow to the cover [19583](https://github.com/WordPress/gutenberg/pull/19583), media text [19198](https://github.com/WordPress/gutenberg/pull/19198), file [19174](https://github.com/WordPress/gutenberg/pull/19174), audio [19158](https://github.com/WordPress/gutenberg/pull/19158) and video [19162](https://github.com/WordPress/gutenberg/pull/19162) block.
-- Components: improve ToolbarButton [18931](https://github.com/WordPress/gutenberg/pull/18931)
-- Sibling inserter: fix dead zone between blocks [19719](https://github.com/WordPress/gutenberg/pull/19719) [19729](https://github.com/WordPress/gutenberg/pull/19729)
-- Top toolbar: adjust tab order [19623](https://github.com/WordPress/gutenberg/pull/19623)
-- Regions: position publish region after sidebar [19427](https://github.com/WordPress/gutenberg/pull/19427)
-- Better accessibility labels for blocks [18132](https://github.com/WordPress/gutenberg/pull/18132)
-- Breadcrumb: add accessibility label [19597](https://github.com/WordPress/gutenberg/pull/19597)
-- Navigation: add background color [19108](https://github.com/WordPress/gutenberg/pull/19108)
-
-## Performance
-
-- Lighter block DOM:
-	- Put sibling inserter in popover [19456](https://github.com/WordPress/gutenberg/pull/19456)
-	- Remove extra div wrapper [19010](https://github.com/WordPress/gutenberg/pull/19010)
-	- Remove inner div wrapper [19593](https://github.com/WordPress/gutenberg/pull/19593)
-	- Split out toolbar rendering [19564](https://github.com/WordPress/gutenberg/pull/19564)
-	- Put side inserter in Popover [19406](https://github.com/WordPress/gutenberg/pull/19406)
-	- Rewrite drop zone with hooks (useDropZone) [19514](https://github.com/WordPress/gutenberg/pull/19514)
-	- Merge effects [19617](https://github.com/WordPress/gutenberg/pull/19617)
-	- Fix alignments [19704](https://github.com/WordPress/gutenberg/pull/19704)
-	- Clean up after control removal [19618](https://github.com/WordPress/gutenberg/pull/19618)
-	- Reposition tabbable inserter [19596](https://github.com/WordPress/gutenberg/pull/19596)
-- Avoid rerendering every block when caret moves in and out of formatting [19524](https://github.com/WordPress/gutenberg/pull/19524)
-
-## Bug Fixes
-
-- Navigation:
-	- Format the allowed styles [19477](https://github.com/WordPress/gutenberg/pull/19477)
-	- Show recent pages as default suggestions when creating Nav Links [19458](https://github.com/WordPress/gutenberg/pull/19458)
-	- Define allowedFormats option for NavigationLink [19507](https://github.com/WordPress/gutenberg/pull/19507)
-	- Rename the LinkControl's edit button title [19505](https://github.com/WordPress/gutenberg/pull/19505)
-	- Use underline instead of bottom border for nav links [19538](https://github.com/WordPress/gutenberg/pull/19538)
-	- Do not output Links with empty labels [19652](https://github.com/WordPress/gutenberg/pull/19652)
-	- Remove draggable from all navigation-link blocks [19648](https://github.com/WordPress/gutenberg/pull/19648)
-	- Remove duplicate CSS from Navigation that is aleady in Link CSS [19540](https://github.com/WordPress/gutenberg/pull/19540)
-	- Remove the text color button double border on the navigation block toolbar [19567](https://github.com/WordPress/gutenberg/pull/19567)
-	- Replace, on editing a Link, the current label with the title of page or post [19461](https://github.com/WordPress/gutenberg/pull/19461)
-	- Add description for the Link Settings Description in the Link Block settings [19508](https://github.com/WordPress/gutenberg/pull/19508)
-	- Fix Link url escaping [19679](https://github.com/WordPress/gutenberg/pull/19679)
-	- Fix alignment on left border between menu navigation controls and menu item [19511](https://github.com/WordPress/gutenberg/pull/19511)
-	- Styling fixes after navigation feature merge [19455](https://github.com/WordPress/gutenberg/pull/19455)
-- Add support for align wide to deprecated versions of gallery block [19522](https://github.com/WordPress/gutenberg/pull/19522)
-- Block top toolbar: fix mover direction [19574](https://github.com/WordPress/gutenberg/pull/19574)
-- Editor keyboard shortcuts: fix Toggle Sidebar [19605](https://github.com/WordPress/gutenberg/pull/19605)
-- Editor: Fix Block Embed Input size [19438](https://github.com/WordPress/gutenberg/pull/19438)
-- Fix ServerSideRender component showing className [19555](https://github.com/WordPress/gutenberg/pull/19555)
-- Fix writing flow focus capturing [19621](https://github.com/WordPress/gutenberg/pull/19621)
-- Fix small visual select glitch [19590](https://github.com/WordPress/gutenberg/pull/19590)
-- Fix the height of the tags tokens [19592](https://github.com/WordPress/gutenberg/pull/19592)
-- Fix buttons block Link shortcut not working with multiple buttons [19492](https://github.com/WordPress/gutenberg/pull/19492)
-- Disable HTML on Link [19483](https://github.com/WordPress/gutenberg/pull/19483)
-- Fix managing page break in the block manager [19303](https://github.com/WordPress/gutenberg/pull/19303)
-- Show predefined colors in the navigation block [19493](https://github.com/WordPress/gutenberg/pull/19493)
-- Update CSS rule on the widgets screen required for drag & drop [19428](https://github.com/WordPress/gutenberg/pull/19428)
-- Multi block selection: fix tabbing [19700](https://github.com/WordPress/gutenberg/pull/19700)
-- Multi block selection: set focus back after attempt [19720](https://github.com/WordPress/gutenberg/pull/19720)
-- RichText: don't set focus when applying format [19536](https://github.com/WordPress/gutenberg/pull/19536)
-- Writing Flow: fix list selection [19721](https://github.com/WordPress/gutenberg/pull/19721)
-- Fix Color Picker Format Toggle placement [19607](https://github.com/WordPress/gutenberg/pull/19607)
-- Fix Columns block pattern picker item margin. [19494](https://github.com/WordPress/gutenberg/pull/19494)
-- Fix block styles for More block [19745](https://github.com/WordPress/gutenberg/pull/19745)
-- Block: fix hasMovers BlockList setting for top toolbar [19619](https://github.com/WordPress/gutenberg/pull/19619)
-
-## New APIs
-
-- Components: add ImageSizeControl component [17148](https://github.com/WordPress/gutenberg/pull/17148)
-- Add block collections [17609](https://github.com/WordPress/gutenberg/pull/17609)
-- Add `Text` component [18495](https://github.com/WordPress/gutenberg/pull/18495)
-- Add warning package [19317](https://github.com/WordPress/gutenberg/pull/19317)
-- Components: add isFocusable state to Button [19337](https://github.com/WordPress/gutenberg/pull/19337)
-
-## Experiments
-
-- Edit Site:
-	- Add a Post Author block [19576](https://github.com/WordPress/gutenberg/pull/19576)
-	- Add a Post Date block [19578](https://github.com/WordPress/gutenberg/pull/19578)
-	- Add a Post Excerpt block [19579](https://github.com/WordPress/gutenberg/pull/19579)
-	- Implement Template Part block editing 2 [19203](https://github.com/WordPress/gutenberg/pull/19203)
-	- Add template loading [19081](https://github.com/WordPress/gutenberg/pull/19081)
-- Block Directory:
-	- Change 'update' icon to text to be more communicative [19451](https://github.com/WordPress/gutenberg/pull/19451)
-	- Update the action button label to read 'Add block' [19412](https://github.com/WordPress/gutenberg/pull/19412)
-- useColors:
-	- Fix contrast check [19500](https://github.com/WordPress/gutenberg/pull/19500)
-	- Directly pass ref for color detecting [19474](https://github.com/WordPress/gutenberg/pull/19474)
-- InnerBlocks: Fix toolbar capturing [19530](https://github.com/WordPress/gutenberg/pull/19530)
-
-## Documentation
-
-- Add js syntax highlighting to documentation [19467](https://github.com/WordPress/gutenberg/pull/19467)
-- Add lint-md section to scripts readme [19716](https://github.com/WordPress/gutenberg/pull/19716)
-- Add linting of source in markdown files [19518](https://github.com/WordPress/gutenberg/pull/19518)
-- Document packages-update wp-scripts command [19711](https://github.com/WordPress/gutenberg/pull/19711)
-- Linting Documentation [19543](https://github.com/WordPress/gutenberg/pull/19543)
-- More visibility to the theme opt-in styles documentation [19463](https://github.com/WordPress/gutenberg/pull/19463)
-- Remove spaces in title for consistency with other components and docs [19466](https://github.com/WordPress/gutenberg/pull/19466) [19464](https://github.com/WordPress/gutenberg/pull/19464)
-- Update block-filters.md [19595](https://github.com/WordPress/gutenberg/pull/19595) [19684](https://github.com/WordPress/gutenberg/pull/19684)
-- Update contributors guide with docker-compose info [19362](https://github.com/WordPress/gutenberg/pull/19362)
-- Add js syntax highlighting to documentation [19465](https://github.com/WordPress/gutenberg/pull/19465)
-- Use import statement instead of deconstruction in docs [19469](https://github.com/WordPress/gutenberg/pull/19469) [19471](https://github.com/WordPress/gutenberg/pull/19471)
-- Fix Navigable Container component usage code [19615](https://github.com/WordPress/gutenberg/pull/19615)
-
-## Various
-
-- Block Editor: Remove (more) legacy "editor-" class name compatibility [19489](https://github.com/WordPress/gutenberg/pull/19489)
-- Block toolbar: rewrite toolbar forcing [19527](https://github.com/WordPress/gutenberg/pull/19527)
-- Breadcrumb: isolate logic [19573](https://github.com/WordPress/gutenberg/pull/19573)
-- Contain selection logic in useMultiSelection [19529](https://github.com/WordPress/gutenberg/pull/19529)
-- Move navigation and selection logic to WritingFlow [19397](https://github.com/WordPress/gutenberg/pull/19397)
-- LinkControl
-	- Refactor LinkControl API [19396](https://github.com/WordPress/gutenberg/pull/19396)
-	- Remove Popover from LinkControl component [19638](https://github.com/WordPress/gutenberg/pull/19638)
-	- Add search results label for initial suggestions [19665](https://github.com/WordPress/gutenberg/pull/19665)
-	- Prevent space being reserved for scrollbar when items fit box [19633](https://github.com/WordPress/gutenberg/pull/19633)
-	- Remove non-public fetchSearchSuggestions from LinkControl documentation [19710](https://github.com/WordPress/gutenberg/pull/19710)
-	- Update Nav Block to use new showInitialSuggestions prop on LinkControl [19667](https://github.com/WordPress/gutenberg/pull/19667)
-	- Flatten LinkControl components by mocking useSelect for tests [19705](https://github.com/WordPress/gutenberg/pull/19705)
-- Remove core editor usage from block editor rich text [18789](https://github.com/WordPress/gutenberg/pull/18789)
-- Add script to automatically update core packages [19448](https://github.com/WordPress/gutenberg/pull/19448)
-- Adds tests for horizontal mover descriptions [19549](https://github.com/WordPress/gutenberg/pull/19549)
-- Remove: Gradient Picker from cover block placeholder [19712](https://github.com/WordPress/gutenberg/pull/19712)
-- Add SVGR support to wp-scripts [18243](https://github.com/WordPress/gutenberg/pull/18243)
-- Add storybook for Panel component [18541](https://github.com/WordPress/gutenberg/pull/18541)
-- Add supports html: false to new website blocks. [19646](https://github.com/WordPress/gutenberg/pull/19646)
-- Add: Block editor keyboard shortcuts on the widgets screen [19432](https://github.com/WordPress/gutenberg/pull/19432)
-- Added 8px padding to search input block. [19452](https://github.com/WordPress/gutenberg/pull/19452)
-- Adds a "(no title)" label to links to pages or posts with no title [19528](https://github.com/WordPress/gutenberg/pull/19528)
-- Array type attribute source query comma missing [19717](https://github.com/WordPress/gutenberg/pull/19717)
-- Block Editor: Make initial inner blocks non-dirtying. [19521](https://github.com/WordPress/gutenberg/pull/19521)
-- Block Popover: editor canvas as boundary [19322](https://github.com/WordPress/gutenberg/pull/19322)
-- Check for existing of avatar_urls array before trying to return the avatar img part of user autocomplete fragment [18259](https://github.com/WordPress/gutenberg/pull/18259)
-- Update downshift dependency to v4.0.5 [19661](https://github.com/WordPress/gutenberg/pull/19661)
-- Components: replace console.warn with @wordpress/warning [19687](https://github.com/WordPress/gutenberg/pull/19687)
-- DOM: Mark stripHTML as unstable [19725](https://github.com/WordPress/gutenberg/pull/19725)
-- Decode HTML entities for publish link [19517](https://github.com/WordPress/gutenberg/pull/19517)
-- Expose custom gradient picker [19480](https://github.com/WordPress/gutenberg/pull/19480)
-- Gallerys ids are saved as numbers [19163](https://github.com/WordPress/gutenberg/pull/19163)
-- Media & Text: Remove "Insert from URL" from the replacement flow. [19606](https://github.com/WordPress/gutenberg/pull/19606)
-- Page template previews [19106](https://github.com/WordPress/gutenberg/pull/19106)
-- Post-Author: Move HTML tags outside of the translatable string [19675](https://github.com/WordPress/gutenberg/pull/19675)
-- Priority Queue: Invoke callback when flushing queue [19282](https://github.com/WordPress/gutenberg/pull/19282)
-- RichText: split out inline warning [19545](https://github.com/WordPress/gutenberg/pull/19545)
-- Storybook: Update to latest 5.3 [19599](https://github.com/WordPress/gutenberg/pull/19599)
-- Update `npm-package-json-lint-config` docs [19584](https://github.com/WordPress/gutenberg/pull/19584)
-- Update the float on the Spinner to `none` [19338](https://github.com/WordPress/gutenberg/pull/19338)
-- Wrap color palette in fieldset with label inside of a legend [19546](https://github.com/WordPress/gutenberg/pull/19546)
-- Check Symbol.iterator not Symbol.toStringTag (redux-routine) [19666](https://github.com/WordPress/gutenberg/pull/19666)
-- Skip intermittent end to end test on the button block [19653](https://github.com/WordPress/gutenberg/pull/19653)
-- Fix e2e test failures via console log exception to handle temp `wpnonce` error [19532](https://github.com/WordPress/gutenberg/pull/19532)
-- Packages: Mark build-styles as side-effectful [19535](https://github.com/WordPress/gutenberg/pull/19535)
-- docgen: Omit unknown type tag from Markdown format output [19571](https://github.com/WordPress/gutenberg/pull/19571)
-- Build Tooling: Skip package for build if package.json unreadable [19439](https://github.com/WordPress/gutenberg/pull/19439)
+### Documentation
 
+-   Add js syntax highlighting to documentation [19467](https://github.com/WordPress/gutenberg/pull/19467)
+-   Add lint-md section to scripts readme [19716](https://github.com/WordPress/gutenberg/pull/19716)
+-   Add linting of source in markdown files [19518](https://github.com/WordPress/gutenberg/pull/19518)
+-   Document packages-update wp-scripts command [19711](https://github.com/WordPress/gutenberg/pull/19711)
+-   Linting Documentation [19543](https://github.com/WordPress/gutenberg/pull/19543)
+-   More visibility to the theme opt-in styles documentation [19463](https://github.com/WordPress/gutenberg/pull/19463)
+-   Remove spaces in title for consistency with other components and docs [19466](https://github.com/WordPress/gutenberg/pull/19466) [19464](https://github.com/WordPress/gutenberg/pull/19464)
+-   Update block-filters.md [19595](https://github.com/WordPress/gutenberg/pull/19595) [19684](https://github.com/WordPress/gutenberg/pull/19684)
+-   Update contributors guide with docker-compose info [19362](https://github.com/WordPress/gutenberg/pull/19362)
+-   Add js syntax highlighting to documentation [19465](https://github.com/WordPress/gutenberg/pull/19465)
+-   Use import statement instead of deconstruction in docs [19469](https://github.com/WordPress/gutenberg/pull/19469) [19471](https://github.com/WordPress/gutenberg/pull/19471)
+-   Fix Navigable Container component usage code [19615](https://github.com/WordPress/gutenberg/pull/19615)
 
+### Various
 
+-   Block Editor: Remove (more) legacy "editor-" class name compatibility [19489](https://github.com/WordPress/gutenberg/pull/19489)
+-   Block toolbar: rewrite toolbar forcing [19527](https://github.com/WordPress/gutenberg/pull/19527)
+-   Breadcrumb: isolate logic [19573](https://github.com/WordPress/gutenberg/pull/19573)
+-   Contain selection logic in useMultiSelection [19529](https://github.com/WordPress/gutenberg/pull/19529)
+-   Move navigation and selection logic to WritingFlow [19397](https://github.com/WordPress/gutenberg/pull/19397)
+-   LinkControl
+    -   Refactor LinkControl API [19396](https://github.com/WordPress/gutenberg/pull/19396)
+    -   Remove Popover from LinkControl component [19638](https://github.com/WordPress/gutenberg/pull/19638)
+    -   Add search results label for initial suggestions [19665](https://github.com/WordPress/gutenberg/pull/19665)
+    -   Prevent space being reserved for scrollbar when items fit box [19633](https://github.com/WordPress/gutenberg/pull/19633)
+    -   Remove non-public fetchSearchSuggestions from LinkControl documentation [19710](https://github.com/WordPress/gutenberg/pull/19710)
+    -   Update Nav Block to use new showInitialSuggestions prop on LinkControl [19667](https://github.com/WordPress/gutenberg/pull/19667)
+    -   Flatten LinkControl components by mocking useSelect for tests [19705](https://github.com/WordPress/gutenberg/pull/19705)
+-   Remove core editor usage from block editor rich text [18789](https://github.com/WordPress/gutenberg/pull/18789)
+-   Add script to automatically update core packages [19448](https://github.com/WordPress/gutenberg/pull/19448)
+-   Adds tests for horizontal mover descriptions [19549](https://github.com/WordPress/gutenberg/pull/19549)
+-   Remove: Gradient Picker from cover block placeholder [19712](https://github.com/WordPress/gutenberg/pull/19712)
+-   Add SVGR support to wp-scripts [18243](https://github.com/WordPress/gutenberg/pull/18243)
+-   Add storybook for Panel component [18541](https://github.com/WordPress/gutenberg/pull/18541)
+-   Add supports html: false to new website blocks. [19646](https://github.com/WordPress/gutenberg/pull/19646)
+-   Add: Block editor keyboard shortcuts on the widgets screen [19432](https://github.com/WordPress/gutenberg/pull/19432)
+-   Added 8px padding to search input block. [19452](https://github.com/WordPress/gutenberg/pull/19452)
+-   Adds a "(no title)" label to links to pages or posts with no title [19528](https://github.com/WordPress/gutenberg/pull/19528)
+-   Array type attribute source query comma missing [19717](https://github.com/WordPress/gutenberg/pull/19717)
+-   Block Editor: Make initial inner blocks non-dirtying. [19521](https://github.com/WordPress/gutenberg/pull/19521)
+-   Block Popover: editor canvas as boundary [19322](https://github.com/WordPress/gutenberg/pull/19322)
+-   Check for existing of avatar_urls array before trying to return the avatar img part of user autocomplete fragment [18259](https://github.com/WordPress/gutenberg/pull/18259)
+-   Update downshift dependency to v4.0.5 [19661](https://github.com/WordPress/gutenberg/pull/19661)
+-   Components: replace console.warn with @wordpress/warning [19687](https://github.com/WordPress/gutenberg/pull/19687)
+-   DOM: Mark stripHTML as unstable [19725](https://github.com/WordPress/gutenberg/pull/19725)
+-   Decode HTML entities for publish link [19517](https://github.com/WordPress/gutenberg/pull/19517)
+-   Expose custom gradient picker [19480](https://github.com/WordPress/gutenberg/pull/19480)
+-   Gallerys ids are saved as numbers [19163](https://github.com/WordPress/gutenberg/pull/19163)
+-   Media & Text: Remove "Insert from URL" from the replacement flow. [19606](https://github.com/WordPress/gutenberg/pull/19606)
+-   Page template previews [19106](https://github.com/WordPress/gutenberg/pull/19106)
+-   Post-Author: Move HTML tags outside of the translatable string [19675](https://github.com/WordPress/gutenberg/pull/19675)
+-   Priority Queue: Invoke callback when flushing queue [19282](https://github.com/WordPress/gutenberg/pull/19282)
+-   RichText: split out inline warning [19545](https://github.com/WordPress/gutenberg/pull/19545)
+-   Storybook: Update to latest 5.3 [19599](https://github.com/WordPress/gutenberg/pull/19599)
+-   Update `npm-package-json-lint-config` docs [19584](https://github.com/WordPress/gutenberg/pull/19584)
+-   Update the float on the Spinner to `none` [19338](https://github.com/WordPress/gutenberg/pull/19338)
+-   Wrap color palette in fieldset with label inside of a legend [19546](https://github.com/WordPress/gutenberg/pull/19546)
+-   Check Symbol.iterator not Symbol.toStringTag (redux-routine) [19666](https://github.com/WordPress/gutenberg/pull/19666)
+-   Skip intermittent end to end test on the button block [19653](https://github.com/WordPress/gutenberg/pull/19653)
+-   Fix e2e test failures via console log exception to handle temp `wpnonce` error [19532](https://github.com/WordPress/gutenberg/pull/19532)
+-   Packages: Mark build-styles as side-effectful [19535](https://github.com/WordPress/gutenberg/pull/19535)
+-   docgen: Omit unknown type tag from Markdown format output [19571](https://github.com/WordPress/gutenberg/pull/19571)
+-   Build Tooling: Skip package for build if package.json unreadable [19439](https://github.com/WordPress/gutenberg/pull/19439)
 
 = 7.2.0 =
 
+## Changelog
+
 ### New Features
 
-- Add a new Buttons block. [#17352](https://github.com/wordpress/gutenberg/pull/17352)
-- Support adding links to Media & Text block image. [#18139](https://github.com/wordpress/gutenberg/pull/18139)
-- Navigation block: Support changing the font size. [#19127](https://github.com/wordpress/gutenberg/pull/19127)
-- Gallery block: Add images size selector. [#18581](https://github.com/wordpress/gutenberg/pull/18581)
+-   Add a new Buttons block. [#17352](https://github.com/wordpress/gutenberg/pull/17352)
+-   Support adding links to Media & Text block image. [#18139](https://github.com/wordpress/gutenberg/pull/18139)
+-   Navigation block: Support changing the font size. [#19127](https://github.com/wordpress/gutenberg/pull/19127)
+-   Gallery block: Add images size selector. [#18581](https://github.com/wordpress/gutenberg/pull/18581)
 
 ### Enhancements
 
-- Improve the block inserter search algorithm. [#19122](https://github.com/wordpress/gutenberg/pull/19122)
-- Improve the block placeholders design and responsiveness. [#18745](https://github.com/wordpress/gutenberg/pull/18745)
-- Navigation mode: Auto-enable when tabbing to the block list with an existing block selection. [#19238](https://github.com/wordpress/gutenberg/pull/19238) [#19298](https://github.com/wordpress/gutenberg/pull/19298)
-- Use tabs for gradient and color. [#19133](https://github.com/wordpress/gutenberg/pull/19133)
-- Add "download" keyword to the File block. [#18995](https://github.com/wordpress/gutenberg/pull/18995)
-- Add "poem" keyword to the Verse block. [#19355](https://github.com/wordpress/gutenberg/pull/19355)
-- Convert to blocks:
-    - preserve text alignment. [#19097](https://github.com/wordpress/gutenberg/pull/19097)
-    - Skip shortcode if not on its own line. [#19059](https://github.com/wordpress/gutenberg/pull/19059)
-- Writing flow: Improve tabbing for Edit mode. [#19235](https://github.com/wordpress/gutenberg/pull/19235)
-- Use Popover for the block toolbar. [#18779](https://github.com/wordpress/gutenberg/pull/18779)
-- Improve the block multi-selection styles. [#19094](https://github.com/wordpress/gutenberg/pull/19094) [#19121](https://github.com/wordpress/gutenberg/pull/19121)
-- Support reduced-motion for Social Links transitions. [#18750](https://github.com/wordpress/gutenberg/pull/18750)
-- Use the default cursor for Select Tool [#19157](https://github.com/wordpress/gutenberg/pull/19157)
-- Round position attributes on cover focal point save. [#19183](https://github.com/wordpress/gutenberg/pull/19183)
-- Remove block inserter shortcuts. [#19045](https://github.com/wordpress/gutenberg/pull/19045)
-- Navigation block:
-    - Clarify the placeholder label. [#19105](https://github.com/wordpress/gutenberg/pull/19105)
-    - Removes the reusable block option from the items. [#19250](https://github.com/wordpress/gutenberg/pull/19250)
-    - Sub-items white background adjustment. [#18976](https://github.com/wordpress/gutenberg/pull/18976)
-- Adjustments to the welcome guide. [#19195](https://github.com/wordpress/gutenberg/pull/19195)
-- Audio block: Don't render an empty audio tag. [#18850](https://github.com/wordpress/gutenberg/pull/18850)
-- Make validation of block html tags and attributes case insensitive [#19207](https://github.com/wordpress/gutenberg/pull/19207)
-- Block examples: concatenate strings and add translators notes. [#19048](https://github.com/wordpress/gutenberg/pull/19048)
-- Show the trash button as a link. [#19131](https://github.com/wordpress/gutenberg/pull/19131)
-- Removed the bottom-margin for the RadioControl component. [#19340](https://github.com/wordpress/gutenberg/pull/19340)
-- Copy:
-    - Capitalize "Manager" in Block Manager. [#19375](https://github.com/wordpress/gutenberg/pull/19375)
-    - Expand on sentence case usage. [#18758](https://github.com/wordpress/gutenberg/pull/18758) [#19377](https://github.com/wordpress/gutenberg/pull/19377)
-    - Update the copy of the Experiments page [#18233](https://github.com/wordpress/gutenberg/pull/18233)
-    - Removes title case from alignments for text and image. [#18757](https://github.com/wordpress/gutenberg/pull/18757)
-    - Unify not capitalizing the heading for each of the attributes. [#19374](https://github.com/wordpress/gutenberg/pull/19374)
-    - Updates description of the navigation block. [#19098](https://github.com/wordpress/gutenberg/pull/19098)
+-   Improve the block inserter search algorithm. [#19122](https://github.com/wordpress/gutenberg/pull/19122)
+-   Improve the block placeholders design and responsiveness. [#18745](https://github.com/wordpress/gutenberg/pull/18745)
+-   Navigation mode: Auto-enable when tabbing to the block list with an existing block selection. [#19238](https://github.com/wordpress/gutenberg/pull/19238) [#19298](https://github.com/wordpress/gutenberg/pull/19298)
+-   Use tabs for gradient and color. [#19133](https://github.com/wordpress/gutenberg/pull/19133)
+-   Add "download" keyword to the File block. [#18995](https://github.com/wordpress/gutenberg/pull/18995)
+-   Add "poem" keyword to the Verse block. [#19355](https://github.com/wordpress/gutenberg/pull/19355)
+-   Convert to blocks:
+    -   preserve text alignment. [#19097](https://github.com/wordpress/gutenberg/pull/19097)
+    -   Skip shortcode if not on its own line. [#19059](https://github.com/wordpress/gutenberg/pull/19059)
+-   Writing flow: Improve tabbing for Edit mode. [#19235](https://github.com/wordpress/gutenberg/pull/19235)
+-   Use Popover for the block toolbar. [#18779](https://github.com/wordpress/gutenberg/pull/18779)
+-   Improve the block multi-selection styles. [#19094](https://github.com/wordpress/gutenberg/pull/19094) [#19121](https://github.com/wordpress/gutenberg/pull/19121)
+-   Support reduced-motion for Social Links transitions. [#18750](https://github.com/wordpress/gutenberg/pull/18750)
+-   Use the default cursor for Select Tool [#19157](https://github.com/wordpress/gutenberg/pull/19157)
+-   Round position attributes on cover focal point save. [#19183](https://github.com/wordpress/gutenberg/pull/19183)
+-   Remove block inserter shortcuts. [#19045](https://github.com/wordpress/gutenberg/pull/19045)
+-   Navigation block:
+    -   Clarify the placeholder label. [#19105](https://github.com/wordpress/gutenberg/pull/19105)
+    -   Removes the reusable block option from the items. [#19250](https://github.com/wordpress/gutenberg/pull/19250)
+    -   Sub-items white background adjustment. [#18976](https://github.com/wordpress/gutenberg/pull/18976)
+-   Adjustments to the welcome guide. [#19195](https://github.com/wordpress/gutenberg/pull/19195)
+-   Audio block: Don't render an empty audio tag. [#18850](https://github.com/wordpress/gutenberg/pull/18850)
+-   Make validation of block html tags and attributes case insensitive [#19207](https://github.com/wordpress/gutenberg/pull/19207)
+-   Block examples: concatenate strings and add translators notes. [#19048](https://github.com/wordpress/gutenberg/pull/19048)
+-   Show the trash button as a link. [#19131](https://github.com/wordpress/gutenberg/pull/19131)
+-   Removed the bottom-margin for the RadioControl component. [#19340](https://github.com/wordpress/gutenberg/pull/19340)
+-   Copy:
+    -   Capitalize "Manager" in Block Manager. [#19375](https://github.com/wordpress/gutenberg/pull/19375)
+    -   Expand on sentence case usage. [#18758](https://github.com/wordpress/gutenberg/pull/18758) [#19377](https://github.com/wordpress/gutenberg/pull/19377)
+    -   Update the copy of the Experiments page [#18233](https://github.com/wordpress/gutenberg/pull/18233)
+    -   Removes title case from alignments for text and image. [#18757](https://github.com/wordpress/gutenberg/pull/18757)
+    -   Unify not capitalizing the heading for each of the attributes. [#19374](https://github.com/wordpress/gutenberg/pull/19374)
+    -   Updates description of the navigation block. [#19098](https://github.com/wordpress/gutenberg/pull/19098)
 
 ### Performance:
 
-- Remove the BlockAsyncRenderProvider and render parents asynchronously [#19343](https://github.com/wordpress/gutenberg/pull/19343)
-
-###  Bugs:
-
-- A11y:
-    - Make text alignment items radio menu items. [#19233](https://github.com/wordpress/gutenberg/pull/19233)
-    - Add group role to the  block wrapper element. [#19213](https://github.com/wordpress/gutenberg/pull/19213)
-    - Prevent tabbing to the block drag handle. [#19211](https://github.com/wordpress/gutenberg/pull/19211)
-    - Add a label attribute to the Social Icons block. [#18651](https://github.com/wordpress/gutenberg/pull/18651)
-    - Improve Welcome guide and modal component. [#19261](https://github.com/wordpress/gutenberg/pull/19261) [#19290](https://github.com/wordpress/gutenberg/pull/19290)
-- Pasting:
-    - Content that results in a new block shouldn't be treated as inline content. [#19084](https://github.com/wordpress/gutenberg/pull/19084)
-    - Preserve inline images. [#19064](https://github.com/wordpress/gutenberg/pull/19064)
-    - Remove trailing br elements. [#19035](https://github.com/wordpress/gutenberg/pull/19035)
-    - Remove windows paste markers. [#19040](https://github.com/wordpress/gutenberg/pull/19040)
-    - Strip HTML formatting space for inline text. [#19043](https://github.com/wordpress/gutenberg/pull/19043)
-    - Apply active formats when pasting inline. [#14815](https://github.com/wordpress/gutenberg/pull/14815)
-- Rich Text:
-    - Fix applying a format across 2 other formats. [#19053](https://github.com/wordpress/gutenberg/pull/19053)
-    - Fix using composed characters on Safari. [#19171](https://github.com/wordpress/gutenberg/pull/19171)
-- Fix block navigation using the up arrow key. [#19135](https://github.com/wordpress/gutenberg/pull/19135)
-- Fix Welcome Guide modal display for Internet Explorer. [#19201](https://github.com/wordpress/gutenberg/pull/19201)
-- Fix Gallery block crashing on the contributor role. [#19060](https://github.com/wordpress/gutenberg/pull/19060)
-- Only show available image sizes for Image and Gallery blocks. [#19301](https://github.com/wordpress/gutenberg/pull/19301)
-- Remove the circle mask style from the Image block, and add a "rounded" style instead. [#19028](https://github.com/wordpress/gutenberg/pull/19028)
-- Fix the Jest Preset Default package: Update preset file extension for inclusion in NPM deployments. [#19306](https://github.com/wordpress/gutenberg/pull/19306)
-- Fix the Base Styles package: Import colors into variables. [#19159](https://github.com/wordpress/gutenberg/pull/19159)
-- Limit the Next Page (Page Break) block to root level only. [#18260](https://github.com/wordpress/gutenberg/pull/18260)
-- Navigation mode: fix reverse tabbing to the post title. [#19305](https://github.com/wordpress/gutenberg/pull/19305)
-- Reposition Popovers on click. [#19268](https://github.com/wordpress/gutenberg/pull/19268)
-- Fix RangeControl initialPosition prop to accept 0 as a value. [#18611](https://github.com/wordpress/gutenberg/pull/18611) [#19202](https://github.com/wordpress/gutenberg/pull/19202)
-- CustomSelectControl: Use items width instead of 100%. [#19150](https://github.com/wordpress/gutenberg/pull/19150)
-- Verse block: fix white space. [#19173](https://github.com/wordpress/gutenberg/pull/19173)
-- Add missing i18n to the Latest Posts block settings strings [#19032](https://github.com/wordpress/gutenberg/pull/19032)
-- Fix ColorPicker alpha value normalization. [#18991](https://github.com/wordpress/gutenberg/pull/18991)
-- Fix Post title encoding. [#19187](https://github.com/wordpress/gutenberg/pull/19187)
-- Fix dates alignments in the picker. [#19294](https://github.com/wordpress/gutenberg/pull/19294)
-- Media Replace Flow: Don't show the URL option unless there is a handler. [#19063](https://github.com/wordpress/gutenberg/pull/19063)
-- Popover: don't render fallback anchor if anchorRef is defined. [#19308](https://github.com/wordpress/gutenberg/pull/19308)
-- Fix cursor position when splitting blocks with IME keyboard. [#19055](https://github.com/wordpress/gutenberg/pull/19055)
-- URLInput: Avoid showing the suggestions loader when disabled. [#18979](https://github.com/wordpress/gutenberg/pull/18979)
-- Translate block example strings. [#18162](https://github.com/wordpress/gutenberg/pull/18162)
-- Writing flow: simplify & fix tabbing out of block. [#19312](https://github.com/wordpress/gutenberg/pull/19312)
+-   Remove the BlockAsyncRenderProvider and render parents asynchronously [#19343](https://github.com/wordpress/gutenberg/pull/19343)
+
+### Bugs:
+
+-   A11y:
+    -   Make text alignment items radio menu items. [#19233](https://github.com/wordpress/gutenberg/pull/19233)
+    -   Add group role to the block wrapper element. [#19213](https://github.com/wordpress/gutenberg/pull/19213)
+    -   Prevent tabbing to the block drag handle. [#19211](https://github.com/wordpress/gutenberg/pull/19211)
+    -   Add a label attribute to the Social Icons block. [#18651](https://github.com/wordpress/gutenberg/pull/18651)
+    -   Improve Welcome guide and modal component. [#19261](https://github.com/wordpress/gutenberg/pull/19261) [#19290](https://github.com/wordpress/gutenberg/pull/19290)
+-   Pasting:
+    -   Content that results in a new block shouldn't be treated as inline content. [#19084](https://github.com/wordpress/gutenberg/pull/19084)
+    -   Preserve inline images. [#19064](https://github.com/wordpress/gutenberg/pull/19064)
+    -   Remove trailing br elements. [#19035](https://github.com/wordpress/gutenberg/pull/19035)
+    -   Remove windows paste markers. [#19040](https://github.com/wordpress/gutenberg/pull/19040)
+    -   Strip HTML formatting space for inline text. [#19043](https://github.com/wordpress/gutenberg/pull/19043)
+    -   Apply active formats when pasting inline. [#14815](https://github.com/wordpress/gutenberg/pull/14815)
+-   Rich Text:
+    -   Fix applying a format across 2 other formats. [#19053](https://github.com/wordpress/gutenberg/pull/19053)
+    -   Fix using composed characters on Safari. [#19171](https://github.com/wordpress/gutenberg/pull/19171)
+-   Fix block navigation using the up arrow key. [#19135](https://github.com/wordpress/gutenberg/pull/19135)
+-   Fix Welcome Guide modal display for Internet Explorer. [#19201](https://github.com/wordpress/gutenberg/pull/19201)
+-   Fix Gallery block crashing on the contributor role. [#19060](https://github.com/wordpress/gutenberg/pull/19060)
+-   Only show available image sizes for Image and Gallery blocks. [#19301](https://github.com/wordpress/gutenberg/pull/19301)
+-   Remove the circle mask style from the Image block, and add a "rounded" style instead. [#19028](https://github.com/wordpress/gutenberg/pull/19028)
+-   Fix the Jest Preset Default package: Update preset file extension for inclusion in NPM deployments. [#19306](https://github.com/wordpress/gutenberg/pull/19306)
+-   Fix the Base Styles package: Import colors into variables. [#19159](https://github.com/wordpress/gutenberg/pull/19159)
+-   Limit the Next Page (Page Break) block to root level only. [#18260](https://github.com/wordpress/gutenberg/pull/18260)
+-   Navigation mode: fix reverse tabbing to the post title. [#19305](https://github.com/wordpress/gutenberg/pull/19305)
+-   Reposition Popovers on click. [#19268](https://github.com/wordpress/gutenberg/pull/19268)
+-   Fix RangeControl initialPosition prop to accept 0 as a value. [#18611](https://github.com/wordpress/gutenberg/pull/18611) [#19202](https://github.com/wordpress/gutenberg/pull/19202)
+-   CustomSelectControl: Use items width instead of 100%. [#19150](https://github.com/wordpress/gutenberg/pull/19150)
+-   Verse block: fix white space. [#19173](https://github.com/wordpress/gutenberg/pull/19173)
+-   Add missing i18n to the Latest Posts block settings strings [#19032](https://github.com/wordpress/gutenberg/pull/19032)
+-   Fix ColorPicker alpha value normalization. [#18991](https://github.com/wordpress/gutenberg/pull/18991)
+-   Fix Post title encoding. [#19187](https://github.com/wordpress/gutenberg/pull/19187)
+-   Fix dates alignments in the picker. [#19294](https://github.com/wordpress/gutenberg/pull/19294)
+-   Media Replace Flow: Don't show the URL option unless there is a handler. [#19063](https://github.com/wordpress/gutenberg/pull/19063)
+-   Popover: don't render fallback anchor if anchorRef is defined. [#19308](https://github.com/wordpress/gutenberg/pull/19308)
+-   Fix cursor position when splitting blocks with IME keyboard. [#19055](https://github.com/wordpress/gutenberg/pull/19055)
+-   URLInput: Avoid showing the suggestions loader when disabled. [#18979](https://github.com/wordpress/gutenberg/pull/18979)
+-   Translate block example strings. [#18162](https://github.com/wordpress/gutenberg/pull/18162)
+-   Writing flow: simplify & fix tabbing out of block. [#19312](https://github.com/wordpress/gutenberg/pull/19312)
 
 ### New APIs:
 
-- Button component:
-    - Support the icon prop and use a consistent button height. [#19193](https://github.com/wordpress/gutenberg/pull/19193) [#19366](https://github.com/wordpress/gutenberg/pull/19366) [#19123](https://github.com/wordpress/gutenberg/pull/19123) [#19058](https://github.com/wordpress/gutenberg/pull/19058)
-    - Deprecate IconButton and replace its usage with Button. [#19299](https://github.com/wordpress/gutenberg/pull/19299) [#19241](https://github.com/wordpress/gutenberg/pull/19241)
-    - Support isPressed prop in Button and SVG components. [#17748](https://github.com/wordpress/gutenberg/pull/17748)
-- New the @wordpress/keyboard-shortcuts package:
-    - Add the package. [#19100](https://github.com/wordpress/gutenberg/pull/19100)
-    - Optimize useShortcut performance. [#19341](https://github.com/wordpress/gutenberg/pull/19341)
-    - Refactor KeyboardShortcuts component to rely on useKeyboardShortcut hook. [#19325](https://github.com/wordpress/gutenberg/pull/19325)
-    - Refactor existing editor shortcuts to rely on the package. [#19320](https://github.com/wordpress/gutenberg/pull/19320) [#19327](https://github.com/wordpress/gutenberg/pull/19327) [#19332](https://github.com/wordpress/gutenberg/pull/19332) [#19318](https://github.com/wordpress/gutenberg/pull/19318) [#19334](https://github.com/wordpress/gutenberg/pull/19334) [#19385](https://github.com/wordpress/gutenberg/pull/19385) [#19395](https://github.com/wordpress/gutenberg/pull/19395)
-- New React hook: useInstanceId. [#19091](https://github.com/wordpress/gutenberg/pull/19091)
-- Support running arbitrary commands on the @wordpress/env containers and use it for linting and server registered fixtures. [#18986](https://github.com/wordpress/gutenberg/pull/18986)
-- Font Size Picker: Add default size [#18273](https://github.com/wordpress/gutenberg/pull/18273)
-
+-   Button component:
+    -   Support the icon prop and use a consistent button height. [#19193](https://github.com/wordpress/gutenberg/pull/19193) [#19366](https://github.com/wordpress/gutenberg/pull/19366) [#19123](https://github.com/wordpress/gutenberg/pull/19123) [#19058](https://github.com/wordpress/gutenberg/pull/19058)
+    -   Deprecate IconButton and replace its usage with Button. [#19299](https://github.com/wordpress/gutenberg/pull/19299) [#19241](https://github.com/wordpress/gutenberg/pull/19241)
+    -   Support isPressed prop in Button and SVG components. [#17748](https://github.com/wordpress/gutenberg/pull/17748)
+-   New the @wordpress/keyboard-shortcuts package:
+    -   Add the package. [#19100](https://github.com/wordpress/gutenberg/pull/19100)
+    -   Optimize useShortcut performance. [#19341](https://github.com/wordpress/gutenberg/pull/19341)
+    -   Refactor KeyboardShortcuts component to rely on useKeyboardShortcut hook. [#19325](https://github.com/wordpress/gutenberg/pull/19325)
+    -   Refactor existing editor shortcuts to rely on the package. [#19320](https://github.com/wordpress/gutenberg/pull/19320) [#19327](https://github.com/wordpress/gutenberg/pull/19327) [#19332](https://github.com/wordpress/gutenberg/pull/19332) [#19318](https://github.com/wordpress/gutenberg/pull/19318) [#19334](https://github.com/wordpress/gutenberg/pull/19334) [#19385](https://github.com/wordpress/gutenberg/pull/19385) [#19395](https://github.com/wordpress/gutenberg/pull/19395)
+-   New React hook: useInstanceId. [#19091](https://github.com/wordpress/gutenberg/pull/19091)
+-   Support running arbitrary commands on the @wordpress/env containers and use it for linting and server registered fixtures. [#18986](https://github.com/wordpress/gutenberg/pull/18986)
+-   Font Size Picker: Add default size [#18273](https://github.com/wordpress/gutenberg/pull/18273)
 
 ### Experiments
 
-- Full Site Editing:
-    - Add package with barebones site editor screen. [#19054](https://github.com/wordpress/gutenberg/pull/19054)
-    - Add Multi-Entity Saving flow. [#18029](https://github.com/wordpress/gutenberg/pull/18029) [#19155](https://github.com/wordpress/gutenberg/pull/19155)
-- Widgets screen & customizer:
-    - Fix Customiser block editor crash. [#19023](https://github.com/wordpress/gutenberg/pull/19023)
-    - Fix Drag & Drop not working on the widgets screen. [#19029](https://github.com/wordpress/gutenberg/pull/19029)
-- Allow parent Block to consume child Block's toolbar. [#18440](https://github.com/wordpress/gutenberg/pull/18440)
-- Allow disabling the Block UI. [#18173](https://github.com/wordpress/gutenberg/pull/18173)
-- Block Directory:
-    - Update the regular expression that determines whether the plugin is using an img URL or an icon slug. [#19316](https://github.com/wordpress/gutenberg/pull/19316)
-    - Use the block's title for alt text on block directory plugin items. [#19263](https://github.com/wordpress/gutenberg/pull/19263)
+-   Full Site Editing:
+    -   Add package with barebones site editor screen. [#19054](https://github.com/wordpress/gutenberg/pull/19054)
+    -   Add Multi-Entity Saving flow. [#18029](https://github.com/wordpress/gutenberg/pull/18029) [#19155](https://github.com/wordpress/gutenberg/pull/19155)
+-   Widgets screen & customizer:
+    -   Fix Customiser block editor crash. [#19023](https://github.com/wordpress/gutenberg/pull/19023)
+    -   Fix Drag & Drop not working on the widgets screen. [#19029](https://github.com/wordpress/gutenberg/pull/19029)
+-   Allow parent Block to consume child Block's toolbar. [#18440](https://github.com/wordpress/gutenberg/pull/18440)
+-   Allow disabling the Block UI. [#18173](https://github.com/wordpress/gutenberg/pull/18173)
+-   Block Directory:
+    -   Update the regular expression that determines whether the plugin is using an img URL or an icon slug. [#19316](https://github.com/wordpress/gutenberg/pull/19316)
+    -   Use the block's title for alt text on block directory plugin items. [#19263](https://github.com/wordpress/gutenberg/pull/19263)
 
 ### Documentation
 
-- Add types documention:
-    - @wordpress/a11y [#19096](https://github.com/wordpress/gutenberg/pull/19096)
-    - @wordpress/blob [#19092](https://github.com/wordpress/gutenberg/pull/19092)
-    - @wordpress/dom-ready [#19089](https://github.com/wordpress/gutenberg/pull/19089)
-    - @wordpress/is-shallow-equal [#19090](https://github.com/wordpress/gutenberg/pull/19090)
-    - @wordpress/priority-queue [#18997](https://github.com/wordpress/gutenberg/pull/18997)
-    - @wordpress/i18n [#19099](https://github.com/wordpress/gutenberg/pull/19099)
-- Document the CustomSelectControl component. [#19026](https://github.com/wordpress/gutenberg/pull/19026)
-- Document the WritingFlow component. [#19314](https://github.com/wordpress/gutenberg/pull/19314)
-- Link to the User Support Documentation. [#19361](https://github.com/wordpress/gutenberg/pull/19361)
-- Add more documentation for @wordpress/env. [#19194](https://github.com/wordpress/gutenberg/pull/19194)
-- Add nested block / InnerBlocks tutorial. [#17559](https://github.com/wordpress/gutenberg/pull/17559)
-- Add Developer Tools setup in Getting Started. [#19074](https://github.com/wordpress/gutenberg/pull/19074)
-- Use ESNext as default code example format. [#17873](https://github.com/wordpress/gutenberg/pull/17873)
-- Add standalone npm package release docs [#19381](https://github.com/wordpress/gutenberg/pull/19381)
-- Typos and tweaks: [#19280](https://github.com/wordpress/gutenberg/pull/19280) [#19236](https://github.com/wordpress/gutenberg/pull/19236) [#19376](https://github.com/wordpress/gutenberg/pull/19376) [#19146](https://github.com/wordpress/gutenberg/pull/19146) [#19022](https://github.com/wordpress/gutenberg/pull/19022) [#19005](https://github.com/wordpress/gutenberg/pull/19005) [#18423](https://github.com/wordpress/gutenberg/pull/18423) [#19347](https://github.com/wordpress/gutenberg/pull/19347)
-
+-   Add types documention:
+    -   @wordpress/a11y [#19096](https://github.com/wordpress/gutenberg/pull/19096)
+    -   @wordpress/blob [#19092](https://github.com/wordpress/gutenberg/pull/19092)
+    -   @wordpress/dom-ready [#19089](https://github.com/wordpress/gutenberg/pull/19089)
+    -   @wordpress/is-shallow-equal [#19090](https://github.com/wordpress/gutenberg/pull/19090)
+    -   @wordpress/priority-queue [#18997](https://github.com/wordpress/gutenberg/pull/18997)
+    -   @wordpress/i18n [#19099](https://github.com/wordpress/gutenberg/pull/19099)
+-   Document the CustomSelectControl component. [#19026](https://github.com/wordpress/gutenberg/pull/19026)
+-   Document the WritingFlow component. [#19314](https://github.com/wordpress/gutenberg/pull/19314)
+-   Link to the User Support Documentation. [#19361](https://github.com/wordpress/gutenberg/pull/19361)
+-   Add more documentation for @wordpress/env. [#19194](https://github.com/wordpress/gutenberg/pull/19194)
+-   Add nested block / InnerBlocks tutorial. [#17559](https://github.com/wordpress/gutenberg/pull/17559)
+-   Add Developer Tools setup in Getting Started. [#19074](https://github.com/wordpress/gutenberg/pull/19074)
+-   Use ESNext as default code example format. [#17873](https://github.com/wordpress/gutenberg/pull/17873)
+-   Add standalone npm package release docs [#19381](https://github.com/wordpress/gutenberg/pull/19381)
+-   Typos and tweaks: [#19280](https://github.com/wordpress/gutenberg/pull/19280) [#19236](https://github.com/wordpress/gutenberg/pull/19236) [#19376](https://github.com/wordpress/gutenberg/pull/19376) [#19146](https://github.com/wordpress/gutenberg/pull/19146) [#19022](https://github.com/wordpress/gutenberg/pull/19022) [#19005](https://github.com/wordpress/gutenberg/pull/19005) [#18423](https://github.com/wordpress/gutenberg/pull/18423) [#19347](https://github.com/wordpress/gutenberg/pull/19347)
 
 ### Various
 
-- Block Editor: Remove legacy "editor-" class name compatibility. [#19050](https://github.com/wordpress/gutenberg/pull/19050)(https://github.com/wordpress/gutenberg/pull/19046)
-- Block Editor: Test ContrastChecker notices by string comparison. [#19169](https://github.com/wordpress/gutenberg/pull/19169)
-- Fix useColors crashes on storybook. [#19046]
-- Data: Remove unused forceRender argument [#19206](https://github.com/wordpress/gutenberg/pull/19206)
-- Define useSelect dependencies properly. [#19044](https://github.com/wordpress/gutenberg/pull/19044)
-- Deprecate @wordpress/nux package. [#18981](https://github.com/wordpress/gutenberg/pull/18981)
-- E2E Test Utils: Remove empty, unused KeyboardMode file. [#19166](https://github.com/wordpress/gutenberg/pull/19166)
-- Popover: remove buffer options [#19283](https://github.com/wordpress/gutenberg/pull/19283)
-- Refactor the MediaReplaceFlow component to use Dropdown. [#19126](https://github.com/wordpress/gutenberg/pull/19126)
-- Remove unused is-hovered class from the block wrapper. [#19390](https://github.com/wordpress/gutenberg/pull/19390)
-- RichText:
-    - Rewrite withFilters with hooks. [#19117](https://github.com/wordpress/gutenberg/pull/19117)
-    - split out boundary style calculation. [#19319](https://github.com/wordpress/gutenberg/pull/19319)
-- WritingFlow: rewrite with hooks. [#19393](https://github.com/wordpress/gutenberg/pull/19393)
-- Project management: Add prepublish packages command for npm releases. [#19214](https://github.com/wordpress/gutenberg/pull/19214)
-- Remove unused blocks-font-size classname. [#19208](https://github.com/wordpress/gutenberg/pull/19208)
-- Add a pre-commit hook to check whether API docs are updated. [#18820](https://github.com/wordpress/gutenberg/pull/18820)
-- Add mechanism to set a width on withViewportMatch. [#17085](https://github.com/wordpress/gutenberg/pull/17085)
-- Add minimum and maximum values to the Gallery columns attribute. [#16314](https://github.com/wordpress/gutenberg/pull/16314)
-- Include demo block templates in build ZIP. [#19072](https://github.com/wordpress/gutenberg/pull/19072)
-- Fix CSS Coding Standards issue. [#19272](https://github.com/wordpress/gutenberg/pull/19272)
-- Resolve WordPress package type imports. [#18927](https://github.com/wordpress/gutenberg/pull/18927)
-- Add e2e tests:
-    - Splitting and merging text. [#19049](https://github.com/wordpress/gutenberg/pull/19049)
-    - InnerBlocks renderAppender. [#14996](https://github.com/wordpress/gutenberg/pull/14996)
-    - Navigation block. [#19189](https://github.com/wordpress/gutenberg/pull/19189)
-    - Validate embed rendering before proceeding to next [#19042](https://github.com/wordpress/gutenberg/pull/19042)
-- Add unit tests to the useViewportMatch and useMediaQuery React hooks. [#19019](https://github.com/wordpress/gutenberg/pull/19019)
-
-
+-   Block Editor: Remove legacy "editor-" class name compatibility. [#19050](https://github.com/wordpress/gutenberg/pull/19050)(https://github.com/wordpress/gutenberg/pull/19046)
+-   Block Editor: Test ContrastChecker notices by string comparison. [#19169](https://github.com/wordpress/gutenberg/pull/19169)
+-   Fix useColors crashes on storybook. [#19046]
+-   Data: Remove unused forceRender argument [#19206](https://github.com/wordpress/gutenberg/pull/19206)
+-   Define useSelect dependencies properly. [#19044](https://github.com/wordpress/gutenberg/pull/19044)
+-   Deprecate @wordpress/nux package. [#18981](https://github.com/wordpress/gutenberg/pull/18981)
+-   E2E Test Utils: Remove empty, unused KeyboardMode file. [#19166](https://github.com/wordpress/gutenberg/pull/19166)
+-   Popover: remove buffer options [#19283](https://github.com/wordpress/gutenberg/pull/19283)
+-   Refactor the MediaReplaceFlow component to use Dropdown. [#19126](https://github.com/wordpress/gutenberg/pull/19126)
+-   Remove unused is-hovered class from the block wrapper. [#19390](https://github.com/wordpress/gutenberg/pull/19390)
+-   RichText:
+    -   Rewrite withFilters with hooks. [#19117](https://github.com/wordpress/gutenberg/pull/19117)
+    -   split out boundary style calculation. [#19319](https://github.com/wordpress/gutenberg/pull/19319)
+-   WritingFlow: rewrite with hooks. [#19393](https://github.com/wordpress/gutenberg/pull/19393)
+-   Project management: Add prepublish packages command for npm releases. [#19214](https://github.com/wordpress/gutenberg/pull/19214)
+-   Remove unused blocks-font-size classname. [#19208](https://github.com/wordpress/gutenberg/pull/19208)
+-   Add a pre-commit hook to check whether API docs are updated. [#18820](https://github.com/wordpress/gutenberg/pull/18820)
+-   Add mechanism to set a width on withViewportMatch. [#17085](https://github.com/wordpress/gutenberg/pull/17085)
+-   Add minimum and maximum values to the Gallery columns attribute. [#16314](https://github.com/wordpress/gutenberg/pull/16314)
+-   Include demo block templates in build ZIP. [#19072](https://github.com/wordpress/gutenberg/pull/19072)
+-   Fix CSS Coding Standards issue. [#19272](https://github.com/wordpress/gutenberg/pull/19272)
+-   Resolve WordPress package type imports. [#18927](https://github.com/wordpress/gutenberg/pull/18927)
+-   Add e2e tests:
+    -   Splitting and merging text. [#19049](https://github.com/wordpress/gutenberg/pull/19049)
+    -   InnerBlocks renderAppender. [#14996](https://github.com/wordpress/gutenberg/pull/14996)
+    -   Navigation block. [#19189](https://github.com/wordpress/gutenberg/pull/19189)
+    -   Validate embed rendering before proceeding to next [#19042](https://github.com/wordpress/gutenberg/pull/19042)
+-   Add unit tests to the useViewportMatch and useMediaQuery React hooks. [#19019](https://github.com/wordpress/gutenberg/pull/19019)
 
 = 7.1.0 =
 
+## Changelog
+
 ### Features
 
-* Adding a menu to visually [switch between edit and](https://github.com/WordPress/gutenberg/pull/18624) [navigation](https://github.com/WordPress/gutenberg/pull/18829) [modes](https://github.com/WordPress/gutenberg/pull/18805) and announce the mode changes to screen reader users.
-* Support adding [a caption to the Table block](https://github.com/WordPress/gutenberg/pull/15554).
-* Implement a [Welcome Guide](https://github.com/WordPress/gutenberg/pull/18041) modal.
+-   Adding a menu to visually [switch between edit and](https://github.com/WordPress/gutenberg/pull/18624) [navigation](https://github.com/WordPress/gutenberg/pull/18829) [modes](https://github.com/WordPress/gutenberg/pull/18805) and announce the mode changes to screen reader users.
+-   Support adding [a caption to the Table block](https://github.com/WordPress/gutenberg/pull/15554).
+-   Implement a [Welcome Guide](https://github.com/WordPress/gutenberg/pull/18041) modal.
 
 ### Enhancements
 
-* Use a [Fixed Block](https://github.com/WordPress/gutenberg/pull/18686) [Toolbar](https://github.com/WordPress/gutenberg/pull/18945https://github.com/WordPress/gutenberg/pull/18945) [on](https://github.com/WordPress/gutenberg/pull/19014) Mobile Web.
-* Block UI:
-    * [Remove the parent block from the block title](https://github.com/WordPress/gutenberg/pull/18795) component.
-    * [Remove dashed](https://github.com/WordPress/gutenberg/pull/18105) [outlines](https://github.com/WordPress/gutenberg/pull/18865) for child and parent blocks.
-    * Remove [hover](https://github.com/WordPress/gutenberg/pull/18862) [styles](https://github.com/WordPress/gutenberg/pull/18904).
-* Navigation block:
-    * Keep a single place to trigger the “[Open in a new tab](https://github.com/WordPress/gutenberg/pull/18532)” option.
-    * Fix overflow by allowing [wrapping of menu items](https://github.com/WordPress/gutenberg/pull/18431).
-    * Fix [double click to open the appender](https://github.com/WordPress/gutenberg/pull/18379).
-    * Add a **type=submit** to the [search suggestion buttons](https://github.com/WordPress/gutenberg/pull/18933).
-    * Support [justifying the menu items](https://github.com/WordPress/gutenberg/pull/18909).
-    * Use [correct classnames](https://github.com/WordPress/gutenberg/pull/18926) for Link block save output.
-    * Remove the [inspector controls](https://github.com/WordPress/gutenberg/pull/18948).
-* Improve the block multi-selection:
-    * A11y: [Use the browser’s selection](https://github.com/WordPress/gutenberg/pull/16835) default color. 
-    * Polish the [styles](https://github.com/WordPress/gutenberg/pull/18867).
-    * [Responsive](https://github.com/WordPress/gutenberg/pull/18915) multi-selection.
-    * [Allow pasting](https://github.com/WordPress/gutenberg/pull/18746) on multi-selection.
-* Improve the [Image blocks replacement flow/UI](https://github.com/WordPress/gutenberg/pull/16200).
-* Disable the [HTML mode in the Cover block](https://github.com/WordPress/gutenberg/pull/18730).
-* Add [friendly offline error messages](https://github.com/WordPress/gutenberg/pull/17961) on Rest API request failures.
-* [Round the focal point](https://github.com/WordPress/gutenberg/pull/18765) coordinates.
-* Popover & Dropdowns: Consistently and [smoothly](https://github.com/WordPress/gutenberg/pull/18813) [adjust](https://github.com/WordPress/gutenberg/pull/18936) the [position on scroll](https://github.com/WordPress/gutenberg/pull/17867).
-* Remove [clearing the block selection](https://github.com/WordPress/gutenberg/pull/18621) on sidebar tab switch.
-* [Separate editor notices](https://github.com/WordPress/gutenberg/pull/18871) by border instead of margin.
-* Allow [drag and dropping images into the featured image](https://github.com/WordPress/gutenberg/pull/17486https://github.com/WordPress/gutenberg/pull/17486) box.
-
-### Bug Fixes
-
-* Prevent [resized Image blocks](https://github.com/WordPress/gutenberg/pull/18728) from overlapping the boundaries of the block.
-* Fix [wrong link to attachment page](https://github.com/WordPress/gutenberg/pull/18731) after replacing images.
-* Fix Media & Text block: "[Crop image to fill entire column](https://github.com/WordPress/gutenberg/pull/18729)" reset on image change.
-* Fix the [Snackbar notices position](https://github.com/WordPress/gutenberg/pull/18801).
-* Save the [Verse block line breaks](https://github.com/WordPress/gutenberg/pull/18372) as single characters.
-* [Remove has-background-dim-NaN classname](https://github.com/WordPress/gutenberg/pull/18011) from the Cover block.
-* Normalize the keys of the [apiFetch preloaded data](https://github.com/WordPress/gutenberg/pull/18724) to avoid unnecessary Rest API calls.
-* Fix [CSS styles of the ColorPicker](https://github.com/WordPress/gutenberg/pull/18448) component.
-* Update the Inspector slots to use the bubblesVirtually slots Fixing [RichText usage in Inspector controls](https://github.com/WordPress/gutenberg/pull/16807).
-* Move the [Modals and Popovers](https://github.com/WordPress/gutenberg/pull/18775) to the right position in the DOM.
-* Fix [alignment of date picker days](https://github.com/WordPress/gutenberg/pull/18856) when used in block.
-* Fix alignment of [ToggleControl label](https://github.com/WordPress/gutenberg/pull/18815).
-* Fix [the toggled state](https://github.com/WordPress/gutenberg/pull/18868) in the block toolbar buttons.
-* Fix the [multi-select inspector padding](https://github.com/WordPress/gutenberg/pull/18847).
-* Fix the behavior that allows writing by [clicking anywhere in the canvas](https://github.com/WordPress/gutenberg/pull/18732).
-* Prevent [private posts with a future date](https://github.com/WordPress/gutenberg/pull/18834) from becoming public on update.
-* Fix [useColors crashes if contrast checkers](https://github.com/WordPress/gutenberg/pull/18884) are not specified.
-* Render [metaboxes as a single seemless unit](https://github.com/WordPress/gutenberg/pull/18873) to fix styling issues for themes with colored backgrounds.
-* Fix the [FontSizePicker custom option](https://github.com/WordPress/gutenberg/pull/18842).
-* Fix [reusable blocks](https://github.com/WordPress/gutenberg/pull/18902) showing up as too tall.
-* Fix [Drop Cap + alignment](https://github.com/WordPress/gutenberg/pull/18831) producing a gap between paragraphs.
-* Fix [Cover to Image block transform](https://github.com/WordPress/gutenberg/pull/18023) when no image is used in the Cover block.
-* Ensure [empty classname is not output](https://github.com/WordPress/gutenberg/pull/18861) onto table element.
-* Fix [scrolling the sidebar on mobile](https://github.com/WordPress/gutenberg/pull/18937).
-* I18: Fix the [Code block](https://github.com/WordPress/gutenberg/pull/18964) [example](https://github.com/WordPress/gutenberg/pull/18993) [string](https://github.com/WordPress/gutenberg/pull/18973).
+-   Use a [Fixed Block](https://github.com/WordPress/gutenberg/pull/18686) [Toolbar](https://github.com/WordPress/gutenberg/pull/18945https://github.com/WordPress/gutenberg/pull/18945) [on](https://github.com/WordPress/gutenberg/pull/19014) Mobile Web.
+-   Block UI:
+    -   [Remove the parent block from the block title](https://github.com/WordPress/gutenberg/pull/18795) component.
+    -   [Remove dashed](https://github.com/WordPress/gutenberg/pull/18105) [outlines](https://github.com/WordPress/gutenberg/pull/18865) for child and parent blocks.
+    -   Remove [hover](https://github.com/WordPress/gutenberg/pull/18862) [styles](https://github.com/WordPress/gutenberg/pull/18904).
+-   Navigation block:
+    -   Keep a single place to trigger the “[Open in a new tab](https://github.com/WordPress/gutenberg/pull/18532)” option.
+    -   Fix overflow by allowing [wrapping of menu items](https://github.com/WordPress/gutenberg/pull/18431).
+    -   Fix [double click to open the appender](https://github.com/WordPress/gutenberg/pull/18379).
+    -   Add a **type=submit** to the [search suggestion buttons](https://github.com/WordPress/gutenberg/pull/18933).
+    -   Support [justifying the menu items](https://github.com/WordPress/gutenberg/pull/18909).
+    -   Use [correct classnames](https://github.com/WordPress/gutenberg/pull/18926) for Link block save output.
+    -   Remove the [inspector controls](https://github.com/WordPress/gutenberg/pull/18948).
+-   Improve the block multi-selection:
+    -   A11y: [Use the browser’s selection](https://github.com/WordPress/gutenberg/pull/16835) default color.
+    -   Polish the [styles](https://github.com/WordPress/gutenberg/pull/18867).
+    -   [Responsive](https://github.com/WordPress/gutenberg/pull/18915) multi-selection.
+    -   [Allow pasting](https://github.com/WordPress/gutenberg/pull/18746) on multi-selection.
+-   Improve the [Image blocks replacement flow/UI](https://github.com/WordPress/gutenberg/pull/16200).
+-   Disable the [HTML mode in the Cover block](https://github.com/WordPress/gutenberg/pull/18730).
+-   Add [friendly offline error messages](https://github.com/WordPress/gutenberg/pull/17961) on Rest API request failures.
+-   [Round the focal point](https://github.com/WordPress/gutenberg/pull/18765) coordinates.
+-   Popover & Dropdowns: Consistently and [smoothly](https://github.com/WordPress/gutenberg/pull/18813) [adjust](https://github.com/WordPress/gutenberg/pull/18936) the [position on scroll](https://github.com/WordPress/gutenberg/pull/17867).
+-   Remove [clearing the block selection](https://github.com/WordPress/gutenberg/pull/18621) on sidebar tab switch.
+-   [Separate editor notices](https://github.com/WordPress/gutenberg/pull/18871) by border instead of margin.
+-   Allow [drag and dropping images into the featured image](https://github.com/WordPress/gutenberg/pull/17486https://github.com/WordPress/gutenberg/pull/17486) box.
+
+### Bug Fixes
+
+-   Prevent [resized Image blocks](https://github.com/WordPress/gutenberg/pull/18728) from overlapping the boundaries of the block.
+-   Fix [wrong link to attachment page](https://github.com/WordPress/gutenberg/pull/18731) after replacing images.
+-   Fix Media & Text block: "[Crop image to fill entire column](https://github.com/WordPress/gutenberg/pull/18729)" reset on image change.
+-   Fix the [Snackbar notices position](https://github.com/WordPress/gutenberg/pull/18801).
+-   Save the [Verse block line breaks](https://github.com/WordPress/gutenberg/pull/18372) as single characters.
+-   [Remove has-background-dim-NaN classname](https://github.com/WordPress/gutenberg/pull/18011) from the Cover block.
+-   Normalize the keys of the [apiFetch preloaded data](https://github.com/WordPress/gutenberg/pull/18724) to avoid unnecessary Rest API calls.
+-   Fix [CSS styles of the ColorPicker](https://github.com/WordPress/gutenberg/pull/18448) component.
+-   Update the Inspector slots to use the bubblesVirtually slots Fixing [RichText usage in Inspector controls](https://github.com/WordPress/gutenberg/pull/16807).
+-   Move the [Modals and Popovers](https://github.com/WordPress/gutenberg/pull/18775) to the right position in the DOM.
+-   Fix [alignment of date picker days](https://github.com/WordPress/gutenberg/pull/18856) when used in block.
+-   Fix alignment of [ToggleControl label](https://github.com/WordPress/gutenberg/pull/18815).
+-   Fix [the toggled state](https://github.com/WordPress/gutenberg/pull/18868) in the block toolbar buttons.
+-   Fix the [multi-select inspector padding](https://github.com/WordPress/gutenberg/pull/18847).
+-   Fix the behavior that allows writing by [clicking anywhere in the canvas](https://github.com/WordPress/gutenberg/pull/18732).
+-   Prevent [private posts with a future date](https://github.com/WordPress/gutenberg/pull/18834) from becoming public on update.
+-   Fix [useColors crashes if contrast checkers](https://github.com/WordPress/gutenberg/pull/18884) are not specified.
+-   Render [metaboxes as a single seemless unit](https://github.com/WordPress/gutenberg/pull/18873) to fix styling issues for themes with colored backgrounds.
+-   Fix the [FontSizePicker custom option](https://github.com/WordPress/gutenberg/pull/18842).
+-   Fix [reusable blocks](https://github.com/WordPress/gutenberg/pull/18902) showing up as too tall.
+-   Fix [Drop Cap + alignment](https://github.com/WordPress/gutenberg/pull/18831) producing a gap between paragraphs.
+-   Fix [Cover to Image block transform](https://github.com/WordPress/gutenberg/pull/18023) when no image is used in the Cover block.
+-   Ensure [empty classname is not output](https://github.com/WordPress/gutenberg/pull/18861) onto table element.
+-   Fix [scrolling the sidebar on mobile](https://github.com/WordPress/gutenberg/pull/18937).
+-   I18: Fix the [Code block](https://github.com/WordPress/gutenberg/pull/18964) [example](https://github.com/WordPress/gutenberg/pull/18993) [string](https://github.com/WordPress/gutenberg/pull/18973).
 
 ### APIs
 
-* Support a [**disabled** prop in the RichText](https://github.com/WordPress/gutenberg/pull/18792) component.
-* Add a [new](https://github.com/WordPress/gutenberg/pull/18827) [CustomSelectControl](https://github.com/WordPress/gutenberg/pull/17926) [component](https://github.com/WordPress/gutenberg/pull/18944).
-* Add a new [TextHighlight](https://github.com/WordPress/gutenberg/pull/18609) component.
-* Add a new [CustomGradientPicker](https://github.com/WordPress/gutenberg/pull/17603) component.
-* Add [useViewportMatch](https://github.com/WordPress/gutenberg/pull/18816) [React hook](https://github.com/WordPress/gutenberg/pull/18950) to the @wordpress/compose package.
-* Allowing [changing the aXe config](https://github.com/WordPress/gutenberg/pull/18712) in the @wordpress/just-puppeteer-axe package.
+-   Support a [**disabled** prop in the RichText](https://github.com/WordPress/gutenberg/pull/18792) component.
+-   Add a [new](https://github.com/WordPress/gutenberg/pull/18827) [CustomSelectControl](https://github.com/WordPress/gutenberg/pull/17926) [component](https://github.com/WordPress/gutenberg/pull/18944).
+-   Add a new [TextHighlight](https://github.com/WordPress/gutenberg/pull/18609) component.
+-   Add a new [CustomGradientPicker](https://github.com/WordPress/gutenberg/pull/17603) component.
+-   Add [useViewportMatch](https://github.com/WordPress/gutenberg/pull/18816) [React hook](https://github.com/WordPress/gutenberg/pull/18950) to the @wordpress/compose package.
+-   Allowing [changing the aXe config](https://github.com/WordPress/gutenberg/pull/18712) in the @wordpress/just-puppeteer-axe package.
 
 ### Experiments
 
-* Block Content Areas:
-    * Add a [demo templates](https://github.com/WordPress/gutenberg/pull/18554) directory. 
-    * Add the [Template Part](https://github.com/WordPress/gutenberg/pull/18736) block.
-    * Add [documentation](https://github.com/WordPress/gutenberg/pull/18890) for the current state of the experiment.
-* Widgets screen:
-    * Clear the block selection when [clicking outside the widget areas](https://github.com/WordPress/gutenberg/pull/17851).
-* APIs:
-    * Add a new [\_\_experimentalResolveSelect](https://github.com/WordPress/gutenberg/pull/17558https://github.com/WordPress/gutenberg/pull/17558) API to the data package.
-    * Add [color detection and contrast checks support](https://github.com/WordPress/gutenberg/pull/18547) to the useColors hook.
+-   Block Content Areas:
+    -   Add a [demo templates](https://github.com/WordPress/gutenberg/pull/18554) directory.
+    -   Add the [Template Part](https://github.com/WordPress/gutenberg/pull/18736) block.
+    -   Add [documentation](https://github.com/WordPress/gutenberg/pull/18890) for the current state of the experiment.
+-   Widgets screen:
+    -   Clear the block selection when [clicking outside the widget areas](https://github.com/WordPress/gutenberg/pull/17851).
+-   APIs:
+    -   Add a new [\_\_experimentalResolveSelect](https://github.com/WordPress/gutenberg/pull/17558https://github.com/WordPress/gutenberg/pull/17558) API to the data package.
+    -   Add [color detection and contrast checks support](https://github.com/WordPress/gutenberg/pull/18547) to the useColors hook.
 
 ### Documentation
 
-* Improvements to the [Getting Started](https://github.com/WordPress/gutenberg/pull/18769) documentation.
-* Include [TypeScript type checking](https://github.com/WordPress/gutenberg/pull/18879) in Testing Overview.
-* Add [JSDoc recommendations](https://github.com/WordPress/gutenberg/pull/18920).
-* Reintroduce [NodeJS LTS](https://github.com/WordPress/gutenberg/pull/18923) support commitment.
-* Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/18752), [2](https://github.com/WordPress/gutenberg/pull/18882), [3](https://github.com/WordPress/gutenberg/pull/18882), [4](https://github.com/WordPress/gutenberg/pull/18916), [5](https://github.com/WordPress/gutenberg/pull/18961), [6](https://github.com/WordPress/gutenberg/pull/19012).
+-   Improvements to the [Getting Started](https://github.com/WordPress/gutenberg/pull/18769) documentation.
+-   Include [TypeScript type checking](https://github.com/WordPress/gutenberg/pull/18879) in Testing Overview.
+-   Add [JSDoc recommendations](https://github.com/WordPress/gutenberg/pull/18920).
+-   Reintroduce [NodeJS LTS](https://github.com/WordPress/gutenberg/pull/18923) support commitment.
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/18752), [2](https://github.com/WordPress/gutenberg/pull/18882), [3](https://github.com/WordPress/gutenberg/pull/18882), [4](https://github.com/WordPress/gutenberg/pull/18916), [5](https://github.com/WordPress/gutenberg/pull/18961), [6](https://github.com/WordPress/gutenberg/pull/19012).
 
 ### Performance
 
-* Avoid [rerendering the EditorRegions component](https://github.com/WordPress/gutenberg/pull/18776) on each click.
-* Flatten and simplify the [align hook](https://github.com/WordPress/gutenberg/pull/18963) [rendering](https://github.com/WordPress/gutenberg/pull/19008).
-* Shim the [meta attribute source](https://github.com/WordPress/gutenberg/pull/18960) on block registration.
+-   Avoid [rerendering the EditorRegions component](https://github.com/WordPress/gutenberg/pull/18776) on each click.
+-   Flatten and simplify the [align hook](https://github.com/WordPress/gutenberg/pull/18963) [rendering](https://github.com/WordPress/gutenberg/pull/19008).
+-   Shim the [meta attribute source](https://github.com/WordPress/gutenberg/pull/18960) on block registration.
 
 ### Various
 
-* Storybook: Add [StoryShots integration](https://github.com/WordPress/gutenberg/pull/18031) to generate unit tests.
-* Work on the stability of e2e tests: [1](https://github.com/WordPress/gutenberg/pull/18662), [2](https://github.com/WordPress/gutenberg/pull/18754), [3](https://github.com/WordPress/gutenberg/pull/18753), [4](https://github.com/WordPress/gutenberg/pull/18773), [5](https://github.com/WordPress/gutenberg/pull/18771).
-* Use [consistent theme colors and font sizes](https://github.com/WordPress/gutenberg/pull/18761) in e2e tests.
-* Travis: [Skip the deploy stage](https://github.com/WordPress/gutenberg/pull/18788) on PRs.
-* And a Travis job to check the [IE11 compatibility of the produced JavaScript builds](https://github.com/WordPress/gutenberg/pull/18774).
-* Avoid usage of [editor store on block editor](https://github.com/WordPress/gutenberg/pull/18784) reusable blocks inserter.
-* Replace the [fs-extra dependency with rimraf](https://github.com/WordPress/gutenberg/pull/18790).
-* RSS block: Remove [PHP 5.2 compatibility code](https://github.com/WordPress/gutenberg/pull/15806).
-* Update the [Columns block to use the Patterns API](https://github.com/WordPress/gutenberg/pull/18283).
-* Refactor the [BlockToolbar component](https://github.com/WordPress/gutenberg/pull/18843) to use React hooks.
-* Refactor the [BlockDraggable](https://github.com/WordPress/gutenberg/pull/18756) component for a simpler React tree.
-* Refactor the [BlockHTML](https://github.com/WordPress/gutenberg/pull/18968) component to use React hooks.
-* Refactor the [BlockList](https://github.com/WordPress/gutenberg/pull/18821) component to use React hooks.
-* Refactor the [BlockInsertionPoint](https://github.com/WordPress/gutenberg/pull/18821) component to use React hooks.
-* [Split @wordpress/urls into multiple modules](https://github.com/WordPress/gutenberg/pull/18689https://github.com/WordPress/gutenberg/pull/18689)/files to allow better tree-shaking.
-* Improve the Storybook setup to allow [updates on style changes](https://github.com/WordPress/gutenberg/pull/18676).
-* Enforce consistent usage of [Button and ToolbarGroup](https://github.com/WordPress/gutenberg/pull/18817) components.
-* Use the [colors hook in the Paragraph block](https://github.com/WordPress/gutenberg/pull/18148).
-* Add missing actions and tests for [lockPostAutosaving, unlockPostAutosaving](https://github.com/WordPress/gutenberg/pull/18854).
-* [Collapse passed](https://github.com/WordPress/gutenberg/pull/16755) [tests](https://github.com/WordPress/gutenberg/pull/18896) in Travis jobs.
-* Add [side effects property to the @wordpress/components package](https://github.com/WordPress/gutenberg/pull/18911) to allow tree-shaking.
-* Add a [script to perform patch releases](https://github.com/WordPress/gutenberg/pull/18938) for old npm package versions.
-* Reuse the [URLInput component in the Social Links](https://github.com/WordPress/gutenberg/pull/18905) block and [disable suggestions](https://github.com/WordPress/gutenberg/pull/18946).
-* Improve and simplify [reusable block](https://github.com/WordPress/gutenberg/pull/18903) [styles](https://github.com/WordPress/gutenberg/pull/18958).
-* Refactor the [Gallery edit component](https://github.com/WordPress/gutenberg/pull/18265) to be semi-cross-platform.
-* Run tests using the same [environment](https://github.com/WordPress/gutenberg/pull/18703) version used for development.
-* Add [CPU/Network slowdown configuration](https://github.com/WordPress/gutenberg/pull/18770) options to the e2e tests setup.
-* Enable [Type checking for the @wordpress/token-list](https://github.com/WordPress/gutenberg/pull/18839) package.
-* Move the [changelog.txt and readme.txt files](https://github.com/WordPress/gutenberg/pull/18828) to the GitHub repository.
+-   Storybook: Add [StoryShots integration](https://github.com/WordPress/gutenberg/pull/18031) to generate unit tests.
+-   Work on the stability of e2e tests: [1](https://github.com/WordPress/gutenberg/pull/18662), [2](https://github.com/WordPress/gutenberg/pull/18754), [3](https://github.com/WordPress/gutenberg/pull/18753), [4](https://github.com/WordPress/gutenberg/pull/18773), [5](https://github.com/WordPress/gutenberg/pull/18771).
+-   Use [consistent theme colors and font sizes](https://github.com/WordPress/gutenberg/pull/18761) in e2e tests.
+-   Travis: [Skip the deploy stage](https://github.com/WordPress/gutenberg/pull/18788) on PRs.
+-   And a Travis job to check the [IE11 compatibility of the produced JavaScript builds](https://github.com/WordPress/gutenberg/pull/18774).
+-   Avoid usage of [editor store on block editor](https://github.com/WordPress/gutenberg/pull/18784) reusable blocks inserter.
+-   Replace the [fs-extra dependency with rimraf](https://github.com/WordPress/gutenberg/pull/18790).
+-   RSS block: Remove [PHP 5.2 compatibility code](https://github.com/WordPress/gutenberg/pull/15806).
+-   Update the [Columns block to use the Patterns API](https://github.com/WordPress/gutenberg/pull/18283).
+-   Refactor the [BlockToolbar component](https://github.com/WordPress/gutenberg/pull/18843) to use React hooks.
+-   Refactor the [BlockDraggable](https://github.com/WordPress/gutenberg/pull/18756) component for a simpler React tree.
+-   Refactor the [BlockHTML](https://github.com/WordPress/gutenberg/pull/18968) component to use React hooks.
+-   Refactor the [BlockList](https://github.com/WordPress/gutenberg/pull/18821) component to use React hooks.
+-   Refactor the [BlockInsertionPoint](https://github.com/WordPress/gutenberg/pull/18821) component to use React hooks.
+-   [Split @wordpress/urls into multiple modules](https://github.com/WordPress/gutenberg/pull/18689https://github.com/WordPress/gutenberg/pull/18689)/files to allow better tree-shaking.
+-   Improve the Storybook setup to allow [updates on style changes](https://github.com/WordPress/gutenberg/pull/18676).
+-   Enforce consistent usage of [Button and ToolbarGroup](https://github.com/WordPress/gutenberg/pull/18817) components.
+-   Use the [colors hook in the Paragraph block](https://github.com/WordPress/gutenberg/pull/18148).
+-   Add missing actions and tests for [lockPostAutosaving, unlockPostAutosaving](https://github.com/WordPress/gutenberg/pull/18854).
+-   [Collapse passed](https://github.com/WordPress/gutenberg/pull/16755) [tests](https://github.com/WordPress/gutenberg/pull/18896) in Travis jobs.
+-   Add [side effects property to the @wordpress/components package](https://github.com/WordPress/gutenberg/pull/18911) to allow tree-shaking.
+-   Add a [script to perform patch releases](https://github.com/WordPress/gutenberg/pull/18938) for old npm package versions.
+-   Reuse the [URLInput component in the Social Links](https://github.com/WordPress/gutenberg/pull/18905) block and [disable suggestions](https://github.com/WordPress/gutenberg/pull/18946).
+-   Improve and simplify [reusable block](https://github.com/WordPress/gutenberg/pull/18903) [styles](https://github.com/WordPress/gutenberg/pull/18958).
+-   Refactor the [Gallery edit component](https://github.com/WordPress/gutenberg/pull/18265) to be semi-cross-platform.
+-   Run tests using the same [environment](https://github.com/WordPress/gutenberg/pull/18703) version used for development.
+-   Add [CPU/Network slowdown configuration](https://github.com/WordPress/gutenberg/pull/18770) options to the e2e tests setup.
+-   Enable [Type checking for the @wordpress/token-list](https://github.com/WordPress/gutenberg/pull/18839) package.
+-   Move the [changelog.txt and readme.txt files](https://github.com/WordPress/gutenberg/pull/18828) to the GitHub repository.
 
 = 7.0.0 =
 
+## Changelog
+
 ### Features
 
-*   Add a new Navigation block (previously available as an experiment)
-    *   [Highlight menu items](https://github.com/WordPress/gutenberg/pull/18435) without defined URL.
-    *   Prevent [error in Firefox](https://github.com/WordPress/gutenberg/pull/18455) when removing the block.
-    *   [Remove background color](https://github.com/WordPress/gutenberg/pull/18407) from the Navigation block and rely on the Group block.
-    *   Remove the [background shadow](https://github.com/WordPress/gutenberg/pull/18485) for the submenus dropdown.
-    *   [Rename "Navigation Menu Item"](https://github.com/WordPress/gutenberg/pull/18422https://github.com/WordPress/gutenberg/pull/18422) block to "Link".
-    *   Remove [unnecessary color attributes](https://github.com/WordPress/gutenberg/pull/18540).
-    *   Allow [addition CSS](https://github.com/WordPress/gutenberg/pull/18466) [classes](https://github.com/WordPress/gutenberg/pull/18629).
-    *   Drop the [“menu” suffix from the block name](https://github.com/WordPress/gutenberg/pull/18551).
-    *   [Escape special](https://github.com/WordPress/gutenberg/pull/18607) [characters](https://github.com/WordPress/gutenberg/pull/18617) in the frontend.
-    *   Remove from [experimental features](https://github.com/WordPress/gutenberg/pull/18594).
-    *   Add [style variations](https://github.com/WordPress/gutenberg/pull/18553).
+-   Add a new Navigation block (previously available as an experiment)
+    -   [Highlight menu items](https://github.com/WordPress/gutenberg/pull/18435) without defined URL.
+    -   Prevent [error in Firefox](https://github.com/WordPress/gutenberg/pull/18455) when removing the block.
+    -   [Remove background color](https://github.com/WordPress/gutenberg/pull/18407) from the Navigation block and rely on the Group block.
+    -   Remove the [background shadow](https://github.com/WordPress/gutenberg/pull/18485) for the submenus dropdown.
+    -   [Rename "Navigation Menu Item"](https://github.com/WordPress/gutenberg/pull/18422https://github.com/WordPress/gutenberg/pull/18422) block to "Link".
+    -   Remove [unnecessary color attributes](https://github.com/WordPress/gutenberg/pull/18540).
+    -   Allow [addition CSS](https://github.com/WordPress/gutenberg/pull/18466) [classes](https://github.com/WordPress/gutenberg/pull/18629).
+    -   Drop the [“menu” suffix from the block name](https://github.com/WordPress/gutenberg/pull/18551).
+    -   [Escape special](https://github.com/WordPress/gutenberg/pull/18607) [characters](https://github.com/WordPress/gutenberg/pull/18617) in the frontend.
+    -   Remove from [experimental features](https://github.com/WordPress/gutenberg/pull/18594).
+    -   Add [style variations](https://github.com/WordPress/gutenberg/pull/18553).
 
 ### Enhancements
 
-*   Use [gradient classnames](https://github.com/WordPress/gutenberg/pull/18590) instead of inline styles for the Cover block.
-*   Inserter: Add [keyboard shortcut styling](https://github.com/WordPress/gutenberg/pull/18623) to "/" in the default tip.
-*   [Restore the caret position](https://github.com/WordPress/gutenberg/pull/17824) properly on undo.
-*   Add keywords to improve the [discoverability of the Audio block](https://github.com/WordPress/gutenberg/pull/18673).
-*   Show [video preview on Cover block](https://github.com/WordPress/gutenberg/pull/18009) inspector panel.
-
-### Bug Fixes
-
-*   Fix [hidden nested images](https://github.com/WordPress/gutenberg/pull/18347) in the content column.
-*   Fix [double border issue](https://github.com/WordPress/gutenberg/pull/18358) in the keyboard shortcuts modal.
-*   Fix [off-centered publish button](https://github.com/WordPress/gutenberg/pull/17726).
-*   Fix [error when isRTL config is not provided](https://github.com/WordPress/gutenberg/pull/18526) in the block editor settings.
-*   Fix [full width Table block](https://github.com/WordPress/gutenberg/pull/18469) mobile regression.
-*   A11y: Add a screen reader text [label for the Search block](https://github.com/WordPress/gutenberg/pull/17983).
-*   Fix [text patterns undo](https://github.com/WordPress/gutenberg/pull/18533) after mouse move.
-*   Fix block [drag and drop for the  contributor role](https://github.com/WordPress/gutenberg/pull/15054).
-*   [Update the link when switching the image used](https://github.com/WordPress/gutenberg/pull/17226) in the Image block.
-*   Fix php [error triggered when **gutenberg_register_packages_scripts**](https://github.com/WordPress/gutenberg/pull/18599) is run more than once.
-*   Fix special characters [escaping for the post title](https://github.com/WordPress/gutenberg/pull/18616).
-*   Fix [JavaScript errors triggered when selectors are called](https://github.com/WordPress/gutenberg/pull/18559) before the editor being initialized.
-*   Fix [BaseControl component label](https://github.com/WordPress/gutenberg/pull/18646) when no id is passed.
-*   [Preserve whitespace](https://github.com/WordPress/gutenberg/pull/18656) when converting blocks Preformatted and Paragraph blocks.
-*   Fix [multiple paste issues](https://github.com/WordPress/gutenberg/pull/17470) creating unnecessary empty spaces.
+-   Use [gradient classnames](https://github.com/WordPress/gutenberg/pull/18590) instead of inline styles for the Cover block.
+-   Inserter: Add [keyboard shortcut styling](https://github.com/WordPress/gutenberg/pull/18623) to "/" in the default tip.
+-   [Restore the caret position](https://github.com/WordPress/gutenberg/pull/17824) properly on undo.
+-   Add keywords to improve the [discoverability of the Audio block](https://github.com/WordPress/gutenberg/pull/18673).
+-   Show [video preview on Cover block](https://github.com/WordPress/gutenberg/pull/18009) inspector panel.
+
+### Bug Fixes
+
+-   Fix [hidden nested images](https://github.com/WordPress/gutenberg/pull/18347) in the content column.
+-   Fix [double border issue](https://github.com/WordPress/gutenberg/pull/18358) in the keyboard shortcuts modal.
+-   Fix [off-centered publish button](https://github.com/WordPress/gutenberg/pull/17726).
+-   Fix [error when isRTL config is not provided](https://github.com/WordPress/gutenberg/pull/18526) in the block editor settings.
+-   Fix [full width Table block](https://github.com/WordPress/gutenberg/pull/18469) mobile regression.
+-   A11y: Add a screen reader text [label for the Search block](https://github.com/WordPress/gutenberg/pull/17983).
+-   Fix [text patterns undo](https://github.com/WordPress/gutenberg/pull/18533) after mouse move.
+-   Fix block [drag and drop for the  contributor role](https://github.com/WordPress/gutenberg/pull/15054).
+-   [Update the link when switching the image used](https://github.com/WordPress/gutenberg/pull/17226) in the Image block.
+-   Fix php [error triggered when **gutenberg_register_packages_scripts**](https://github.com/WordPress/gutenberg/pull/18599) is run more than once.
+-   Fix special characters [escaping for the post title](https://github.com/WordPress/gutenberg/pull/18616).
+-   Fix [JavaScript errors triggered when selectors are called](https://github.com/WordPress/gutenberg/pull/18559) before the editor being initialized.
+-   Fix [BaseControl component label](https://github.com/WordPress/gutenberg/pull/18646) when no id is passed.
+-   [Preserve whitespace](https://github.com/WordPress/gutenberg/pull/18656) when converting blocks Preformatted and Paragraph blocks.
+-   Fix [multiple paste issues](https://github.com/WordPress/gutenberg/pull/17470) creating unnecessary empty spaces.
 
 ### New APIs
 
-*   Add a new [Card component](https://github.com/WordPress/gutenberg/pull/17963) [to](https://github.com/WordPress/gutenberg/pull/18681) @wordpress/components.
-*   Add [label support for the URLInput](https://github.com/WordPress/gutenberg/pull/15669) [component](https://github.com/WordPress/gutenberg/pull/18488).
-*   Support the [isMatch option for the shorcode transforms](https://github.com/WordPress/gutenberg/pull/18459).
+-   Add a new [Card component](https://github.com/WordPress/gutenberg/pull/17963) [to](https://github.com/WordPress/gutenberg/pull/18681) @wordpress/components.
+-   Add [label support for the URLInput](https://github.com/WordPress/gutenberg/pull/15669) [component](https://github.com/WordPress/gutenberg/pull/18488).
+-   Support the [isMatch option for the shorcode transforms](https://github.com/WordPress/gutenberg/pull/18459).
 
 ### Experiments
 
-*   Block Content areas:
-    *   Add [Post Title and Post Content](https://github.com/WordPress/gutenberg/pull/18461) [blocks](https://github.com/WordPress/gutenberg/pull/18543).
-    *   Add [template parts](https://github.com/WordPress/gutenberg/pull/18339) CPT and the theme resolution logic.
-*   Widgets Screen:
-    *   [Refactor the legacy widgets block](https://github.com/WordPress/gutenberg/pull/15801) to support all blocks.
-    *   Fix [widget areas margins](https://github.com/WordPress/gutenberg/pull/18528).
-    *   Add [isRTL setting](https://github.com/WordPress/gutenberg/pull/18545).
-*   APIs
-    *   **useColors** hook: Enhance the [contrast checking API](https://github.com/WordPress/gutenberg/pull/18237) and provide [access to the color value](https://github.com/WordPress/gutenberg/pull/18544).
-    *   Introduce [createInterpolateElement](https://github.com/WordPress/gutenberg/pull/17376) to allow translation of complex strings with HTML content.
-    *   A11y: Refactor the [accessibility behavior of the Toolbar](https://github.com/WordPress/gutenberg/pull/18534) component.
-*   Social Links:
-    *   [Capitalize LinkedIn](https://github.com/WordPress/gutenberg/pull/18638) and [GitHub](https://github.com/WordPress/gutenberg/pull/18714) properly.
-    *   Fix frontend [styling](https://github.com/WordPress/gutenberg/pull/18410).
+-   Block Content areas:
+    -   Add [Post Title and Post Content](https://github.com/WordPress/gutenberg/pull/18461) [blocks](https://github.com/WordPress/gutenberg/pull/18543).
+    -   Add [template parts](https://github.com/WordPress/gutenberg/pull/18339) CPT and the theme resolution logic.
+-   Widgets Screen:
+    -   [Refactor the legacy widgets block](https://github.com/WordPress/gutenberg/pull/15801) to support all blocks.
+    -   Fix [widget areas margins](https://github.com/WordPress/gutenberg/pull/18528).
+    -   Add [isRTL setting](https://github.com/WordPress/gutenberg/pull/18545).
+-   APIs
+    -   **useColors** hook: Enhance the [contrast checking API](https://github.com/WordPress/gutenberg/pull/18237) and provide [access to the color value](https://github.com/WordPress/gutenberg/pull/18544).
+    -   Introduce [createInterpolateElement](https://github.com/WordPress/gutenberg/pull/17376) to allow translation of complex strings with HTML content.
+    -   A11y: Refactor the [accessibility behavior of the Toolbar](https://github.com/WordPress/gutenberg/pull/18534) component.
+-   Social Links:
+    -   [Capitalize LinkedIn](https://github.com/WordPress/gutenberg/pull/18638) and [GitHub](https://github.com/WordPress/gutenberg/pull/18714) properly.
+    -   Fix frontend [styling](https://github.com/WordPress/gutenberg/pull/18410).
 
 ### Documentation
 
-*   Add a [Backward Compatibility policy](https://github.com/WordPress/gutenberg/pull/18499) document.
-*   Clarify the [npm packages release](https://github.com/WordPress/gutenberg/pull/18516) documentation.
-*   Add documentation for the [@wordpress/env wp-env.json config file](https://github.com/WordPress/gutenberg/pull/18643).
-*   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/18400), [2](https://github.com/WordPress/gutenberg/pull/18404), [3](https://github.com/WordPress/gutenberg/pull/18449), [4](https://github.com/WordPress/gutenberg/pull/18403), [5](https://github.com/WordPress/gutenberg/pull/18452), [6](https://github.com/WordPress/gutenberg/pull/18460), [7](https://github.com/WordPress/gutenberg/pull/18475), [8](https://github.com/WordPress/gutenberg/pull/18507), [9](https://github.com/WordPress/gutenberg/pull/18059), [10](https://github.com/WordPress/gutenberg/pull/17911), [11](https://github.com/WordPress/gutenberg/pull/18558), [12](https://github.com/WordPress/gutenberg/pull/18277), [13](https://github.com/WordPress/gutenberg/pull/18572), [14](https://github.com/WordPress/gutenberg/pull/18587), [15](https://github.com/WordPress/gutenberg/pull/18592), [16](https://github.com/WordPress/gutenberg/pull/18436), [17](https://github.com/WordPress/gutenberg/pull/18446), [18](https://github.com/WordPress/gutenberg/pull/18707), [19](https://github.com/WordPress/gutenberg/pull/18450), [20](https://github.com/WordPress/gutenberg/pull/18713).
+-   Add a [Backward Compatibility policy](https://github.com/WordPress/gutenberg/pull/18499) document.
+-   Clarify the [npm packages release](https://github.com/WordPress/gutenberg/pull/18516) documentation.
+-   Add documentation for the [@wordpress/env wp-env.json config file](https://github.com/WordPress/gutenberg/pull/18643).
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/18400), [2](https://github.com/WordPress/gutenberg/pull/18404), [3](https://github.com/WordPress/gutenberg/pull/18449), [4](https://github.com/WordPress/gutenberg/pull/18403), [5](https://github.com/WordPress/gutenberg/pull/18452), [6](https://github.com/WordPress/gutenberg/pull/18460), [7](https://github.com/WordPress/gutenberg/pull/18475), [8](https://github.com/WordPress/gutenberg/pull/18507), [9](https://github.com/WordPress/gutenberg/pull/18059), [10](https://github.com/WordPress/gutenberg/pull/17911), [11](https://github.com/WordPress/gutenberg/pull/18558), [12](https://github.com/WordPress/gutenberg/pull/18277), [13](https://github.com/WordPress/gutenberg/pull/18572), [14](https://github.com/WordPress/gutenberg/pull/18587), [15](https://github.com/WordPress/gutenberg/pull/18592), [16](https://github.com/WordPress/gutenberg/pull/18436), [17](https://github.com/WordPress/gutenberg/pull/18446), [18](https://github.com/WordPress/gutenberg/pull/18707), [19](https://github.com/WordPress/gutenberg/pull/18450), [20](https://github.com/WordPress/gutenberg/pull/18713).
 
 ### Various
 
-*   Refactor the [RichText component](https://github.com/WordPress/gutenberg/pull/17779): Remove the inner Editable component.
-*   Integrate [the](https://github.com/WordPress/gutenberg/pull/18514) [Gutenberg Playground](https://github.com/WordPress/gutenberg/pull/18191) into Storybook.
-*   Increase [WordPress minimum supported](https://github.com/WordPress/gutenberg/pull/15809) by the plugin to 5.2.0.
-*   Refactor the [Paragraph block edit function](https://github.com/WordPress/gutenberg/pull/18125) as a functional component.
-*   Refactor the [Cover block edit function](https://github.com/WordPress/gutenberg/pull/18116) as a functional component.
-*   Add new components to Storybook.
-    *   [RadioControl](https://github.com/WordPress/gutenberg/pull/18474) component.
-    *   [TabPanel](https://github.com/WordPress/gutenberg/pull/18402) component.
-    *   [Popover](https://github.com/WordPress/gutenberg/pull/18096) component.
-    *   [BaseControl](https://github.com/WordPress/gutenberg/pull/18648) component.
-    *   [Tip](https://github.com/WordPress/gutenberg/pull/18542) component.
-*   Include [WordPress eslint plugin](https://github.com/WordPress/gutenberg/pull/18457) in React eslint ruleset in @wordpress/eslint-plugin.
-*   [Block PRs  on mobile unit test failures](https://github.com/WordPress/gutenberg/pull/18454) in Travis.
-*   Polish the [PostSchedule popover styling](https://github.com/WordPress/gutenberg/pull/18235).
-*   Fix the [API documentation generation tool](https://github.com/WordPress/gutenberg/pull/18253) when spaces are used in folder names.
-*   Add [missing @babel/runtime dependency](https://github.com/WordPress/gutenberg/pull/18626) to the @wordpress/jest-puppeteer-axe.
-*   [Refactor the Layout component](https://github.com/WordPress/gutenberg/pull/18044) [to](https://github.com/WordPress/gutenberg/pull/18658) [separate](https://github.com/WordPress/gutenberg/pull/18683) the UI from the content.
-*   Align [Dropdown and DropdownMenu](https://github.com/WordPress/gutenberg/pull/18631) components styling.
-*   Remove [max-width style from the Image block](https://github.com/WordPress/gutenberg/pull/14911).
-*   Remove the [CollegeHumor embed](https://github.com/WordPress/gutenberg/pull/18591) block.
-*   Add unit tests: 
-    *   Ensure [consecutive edits](https://github.com/WordPress/gutenberg/pull/17917) to the same attribute are considered persistent.
-    *   Test the [core-data undo reducer](https://github.com/WordPress/gutenberg/pull/18642).
+-   Refactor the [RichText component](https://github.com/WordPress/gutenberg/pull/17779): Remove the inner Editable component.
+-   Integrate [the](https://github.com/WordPress/gutenberg/pull/18514) [Gutenberg Playground](https://github.com/WordPress/gutenberg/pull/18191) into Storybook.
+-   Increase [WordPress minimum supported](https://github.com/WordPress/gutenberg/pull/15809) by the plugin to 5.2.0.
+-   Refactor the [Paragraph block edit function](https://github.com/WordPress/gutenberg/pull/18125) as a functional component.
+-   Refactor the [Cover block edit function](https://github.com/WordPress/gutenberg/pull/18116) as a functional component.
+-   Add new components to Storybook.
+    -   [RadioControl](https://github.com/WordPress/gutenberg/pull/18474) component.
+    -   [TabPanel](https://github.com/WordPress/gutenberg/pull/18402) component.
+    -   [Popover](https://github.com/WordPress/gutenberg/pull/18096) component.
+    -   [BaseControl](https://github.com/WordPress/gutenberg/pull/18648) component.
+    -   [Tip](https://github.com/WordPress/gutenberg/pull/18542) component.
+-   Include [WordPress eslint plugin](https://github.com/WordPress/gutenberg/pull/18457) in React eslint ruleset in @wordpress/eslint-plugin.
+-   [Block PRs  on mobile unit test failures](https://github.com/WordPress/gutenberg/pull/18454) in Travis.
+-   Polish the [PostSchedule popover styling](https://github.com/WordPress/gutenberg/pull/18235).
+-   Fix the [API documentation generation tool](https://github.com/WordPress/gutenberg/pull/18253) when spaces are used in folder names.
+-   Add [missing @babel/runtime dependency](https://github.com/WordPress/gutenberg/pull/18626) to the @wordpress/jest-puppeteer-axe.
+-   [Refactor the Layout component](https://github.com/WordPress/gutenberg/pull/18044) [to](https://github.com/WordPress/gutenberg/pull/18658) [separate](https://github.com/WordPress/gutenberg/pull/18683) the UI from the content.
+-   Align [Dropdown and DropdownMenu](https://github.com/WordPress/gutenberg/pull/18631) components styling.
+-   Remove [max-width style from the Image block](https://github.com/WordPress/gutenberg/pull/14911).
+-   Remove the [CollegeHumor embed](https://github.com/WordPress/gutenberg/pull/18591) block.
+-   Add unit tests:
+    -   Ensure [consecutive edits](https://github.com/WordPress/gutenberg/pull/17917) to the same attribute are considered persistent.
+    -   Test the [core-data undo reducer](https://github.com/WordPress/gutenberg/pull/18642).
 
 = 6.9.0 =
 
+## Changelog
+
 ### Features
 
-* Support changing the [image title attribute](https://github.com/WordPress/gutenberg/pull/11070) in the Image block.
+-   Support changing the [image title attribute](https://github.com/WordPress/gutenberg/pull/11070) in the Image block.
 
 ### Bugs
 
-* Fix  [invalid Pullquote blocks](https://github.com/WordPress/gutenberg/pull/18194) when setting a color from the palette presets.
-* Fix the columns left/right [full-width margins](https://github.com/WordPress/gutenberg/pull/18021).
-* Prevent [fast consecutive updates](https://github.com/WordPress/gutenberg/pull/18219) from triggering blocks reset.
-* Fix block [movers for floated blocks](https://github.com/WordPress/gutenberg/pull/18230).
-* Fix [Radio buttons styling](https://github.com/WordPress/gutenberg/pull/18183) in meta boxes.
-* Fix the [default image sizes used for featured images](https://github.com/WordPress/gutenberg/pull/15844) displayed in the editor.
-* Prevent the unsaved changes warning from popping-up when [deleting posts](https://github.com/WordPress/gutenberg/pull/18275).
-* Revert [img and iframe styles](https://github.com/WordPress/gutenberg/pull/18287) to block editor container scope.
-* Block Merge: guard for [undefined attribute definition](https://github.com/WordPress/gutenberg/pull/17937).
+-   Fix  [invalid Pullquote blocks](https://github.com/WordPress/gutenberg/pull/18194) when setting a color from the palette presets.
+-   Fix the columns left/right [full-width margins](https://github.com/WordPress/gutenberg/pull/18021).
+-   Prevent [fast consecutive updates](https://github.com/WordPress/gutenberg/pull/18219) from triggering blocks reset.
+-   Fix block [movers for floated blocks](https://github.com/WordPress/gutenberg/pull/18230).
+-   Fix [Radio buttons styling](https://github.com/WordPress/gutenberg/pull/18183) in meta boxes.
+-   Fix the [default image sizes used for featured images](https://github.com/WordPress/gutenberg/pull/15844) displayed in the editor.
+-   Prevent the unsaved changes warning from popping-up when [deleting posts](https://github.com/WordPress/gutenberg/pull/18275).
+-   Revert [img and iframe styles](https://github.com/WordPress/gutenberg/pull/18287) to block editor container scope.
+-   Block Merge: guard for [undefined attribute definition](https://github.com/WordPress/gutenberg/pull/17937).
 
 ### Enhancements
 
-* Inserter: [Immediately insert block](https://github.com/WordPress/gutenberg/pull/16708) when only one block type is allowed.
-* Update the list of the [default available gradients](https://github.com/WordPress/gutenberg/pull/18214).
-* [Disable indent/outdent buttons](https://github.com/WordPress/gutenberg/pull/17819) when necessary in the List block.
+-   Inserter: [Immediately insert block](https://github.com/WordPress/gutenberg/pull/16708) when only one block type is allowed.
+-   Update the list of the [default available gradients](https://github.com/WordPress/gutenberg/pull/18214).
+-   [Disable indent/outdent buttons](https://github.com/WordPress/gutenberg/pull/17819) when necessary in the List block.
 
 ### New APIs
 
-* Add theme support API to define [custom gradients presets](https://github.com/WordPress/gutenberg/pull/17841).
-* Mark the [AsyncMode](https://github.com/WordPress/gutenberg/pull/18154) data module API as stable.
-* Mark the [mediaUpload @wordpress/block-editor setting](https://github.com/WordPress/gutenberg/pull/18156) as stable.
-* Add a **wpenv.json** [config file support for](https://github.com/WordPress/gutenberg/pull/18121) [@wordpress/env](https://github.com/WordPress/gutenberg/pull/18294).
+-   Add theme support API to define [custom gradients presets](https://github.com/WordPress/gutenberg/pull/17841).
+-   Mark the [AsyncMode](https://github.com/WordPress/gutenberg/pull/18154) data module API as stable.
+-   Mark the [mediaUpload @wordpress/block-editor setting](https://github.com/WordPress/gutenberg/pull/18156) as stable.
+-   Add a **wpenv.json** [config file support for](https://github.com/WordPress/gutenberg/pull/18121) [@wordpress/env](https://github.com/WordPress/gutenberg/pull/18294).
 
 ### Various
 
-* Refactor the way [HTML is escaped by the RichText](https://github.com/WordPress/gutenberg/pull/17994) component.
-* Refactor and [simplify the block margins CSS](https://github.com/WordPress/gutenberg/pull/18346) in the editor.
-* Use [HTTPS git clone](https://github.com/WordPress/gutenberg/pull/18136) in the Gutenberg release tool for more stability.
-* Update [ExternalLink](https://github.com/WordPress/gutenberg/pull/18142), [BaseControl and FormTokenField](https://github.com/WordPress/gutenberg/pull/18165) components to use the VisuallyHidden component for the screen reader text.
-* Add several components to Storybook: 
-  * [Spinner](https://github.com/WordPress/gutenberg/pull/18145),
-  * [Draggable](https://github.com/WordPress/gutenberg/pull/18070),
-  * [RangeControl](https://github.com/WordPress/gutenberg/pull/17846),
-  * [FontSizePicker](https://github.com/WordPress/gutenberg/pull/18149),
-  * [Modal](https://github.com/WordPress/gutenberg/pull/18083),
-  * [Snackbar](https://github.com/WordPress/gutenberg/pull/18386),
-  * [ToggleControl](https://github.com/WordPress/gutenberg/pull/18388),
-  * [ResizableBox](https://github.com/WordPress/gutenberg/pull/18097/files).
-* Refactor the [block-directory search to insert](https://github.com/WordPress/gutenberg/pull/17576) as an Inserter plugin.
-* Improve the experimental [useColors React](https://github.com/WordPress/gutenberg/pull/18147) [hook](https://github.com/WordPress/gutenberg/pull/18286).
-* Upgrade [Puppeteer](https://github.com/WordPress/gutenberg/pull/18205) to the last version.
-* Update to the [last version of npm-package-json-lint](https://github.com/WordPress/gutenberg/pull/18160).
-* **i18n**: Fix string concatenation in the [Verse block example](https://github.com/WordPress/gutenberg/pull/18365) and add `translators` string.
-* Change Detection: Add an [e2e test case for post trashing](https://github.com/WordPress/gutenberg/pull/18290).
-* Fix the [e2e tests watch command](https://github.com/WordPress/gutenberg/pull/18391).
+-   Refactor the way [HTML is escaped by the RichText](https://github.com/WordPress/gutenberg/pull/17994) component.
+-   Refactor and [simplify the block margins CSS](https://github.com/WordPress/gutenberg/pull/18346) in the editor.
+-   Use [HTTPS git clone](https://github.com/WordPress/gutenberg/pull/18136) in the Gutenberg release tool for more stability.
+-   Update [ExternalLink](https://github.com/WordPress/gutenberg/pull/18142), [BaseControl and FormTokenField](https://github.com/WordPress/gutenberg/pull/18165) components to use the VisuallyHidden component for the screen reader text.
+-   Add several components to Storybook:
+    -   [Spinner](https://github.com/WordPress/gutenberg/pull/18145),
+    -   [Draggable](https://github.com/WordPress/gutenberg/pull/18070),
+    -   [RangeControl](https://github.com/WordPress/gutenberg/pull/17846),
+    -   [FontSizePicker](https://github.com/WordPress/gutenberg/pull/18149),
+    -   [Modal](https://github.com/WordPress/gutenberg/pull/18083),
+    -   [Snackbar](https://github.com/WordPress/gutenberg/pull/18386),
+    -   [ToggleControl](https://github.com/WordPress/gutenberg/pull/18388),
+    -   [ResizableBox](https://github.com/WordPress/gutenberg/pull/18097/files).
+-   Refactor the [block-directory search to insert](https://github.com/WordPress/gutenberg/pull/17576) as an Inserter plugin.
+-   Improve the experimental [useColors React](https://github.com/WordPress/gutenberg/pull/18147) [hook](https://github.com/WordPress/gutenberg/pull/18286).
+-   Upgrade [Puppeteer](https://github.com/WordPress/gutenberg/pull/18205) to the last version.
+-   Update to the [last version of npm-package-json-lint](https://github.com/WordPress/gutenberg/pull/18160).
+-   **i18n**: Fix string concatenation in the [Verse block example](https://github.com/WordPress/gutenberg/pull/18365) and add `translators` string.
+-   Change Detection: Add an [e2e test case for post trashing](https://github.com/WordPress/gutenberg/pull/18290).
+-   Fix the [e2e tests watch command](https://github.com/WordPress/gutenberg/pull/18391).
 
 ### Experimental
 
-* Block Content Areas:
-  * Support [loading block templates](https://github.com/WordPress/gutenberg/pull/18247) from themes.
-* Navigation block:
-  * Add [default frontend styles](https://github.com/WordPress/gutenberg/pull/18094) for the Navigation block.
-  * Use [RichText for navigation menu item](https://github.com/WordPress/gutenberg/pull/18182) instead of TextControl.
-  * Add [block navigator](https://github.com/WordPress/gutenberg/pull/18202) to the inspector panel.
-  * Use an [SVG icon](https://github.com/WordPress/gutenberg/pull/18222) for the color selector.
-  * Add a new API for [horizontal movers](https://github.com/WordPress/gutenberg/pull/16615) and [use](https://github.com/WordPress/gutenberg/pull/18234) it for the navigation block.
-  * Add a new [Link creation](https://github.com/WordPress/gutenberg/pull/17846) [and](https://github.com/WordPress/gutenberg/pull/18405) [edition](https://github.com/WordPress/gutenberg/pull/18225) [UI](https://github.com/WordPress/gutenberg/pull/18285) and [use](https://github.com/WordPress/gutenberg/pull/18062) it for the navigation block.
-  * Add an [appender](https://github.com/WordPress/gutenberg/pull/18100) to the block navigator.
-  * Add a block [placeholder](https://github.com/WordPress/gutenberg/pull/18363).
-  * Various fixes and refactorings: [1](https://github.com/WordPress/gutenberg/pull/18189), [2](https://github.com/WordPress/gutenberg/pull/18178), [3](https://github.com/WordPress/gutenberg/pull/18188), [4](https://github.com/WordPress/gutenberg/pull/18153), [5](https://github.com/WordPress/gutenberg/pull/18221), [6](https://github.com/WordPress/gutenberg/pull/18278), [7](https://github.com/WordPress/gutenberg/pull/18172), [8](https://github.com/WordPress/gutenberg/pull/18346), [9](https://github.com/WordPress/gutenberg/pull/18376), [10](https://github.com/WordPress/gutenberg/pull/18150), [11](https://github.com/WordPress/gutenberg/pull/18292), [12](https://github.com/WordPress/gutenberg/pull/18374), [13](https://github.com/WordPress/gutenberg/pull/18367), [14](https://github.com/WordPress/gutenberg/pull/18350), [15](https://github.com/WordPress/gutenberg/pull/18412).
-* Add [ResponsiveBlockControl](https://github.com/WordPress/gutenberg/pull/16790) component.
-* Add initial [API for block patterns](https://github.com/WordPress/gutenberg/pull/18270).
+-   Block Content Areas:
+    -   Support [loading block templates](https://github.com/WordPress/gutenberg/pull/18247) from themes.
+-   Navigation block:
+    -   Add [default frontend styles](https://github.com/WordPress/gutenberg/pull/18094) for the Navigation block.
+    -   Use [RichText for navigation menu item](https://github.com/WordPress/gutenberg/pull/18182) instead of TextControl.
+    -   Add [block navigator](https://github.com/WordPress/gutenberg/pull/18202) to the inspector panel.
+    -   Use an [SVG icon](https://github.com/WordPress/gutenberg/pull/18222) for the color selector.
+    -   Add a new API for [horizontal movers](https://github.com/WordPress/gutenberg/pull/16615) and [use](https://github.com/WordPress/gutenberg/pull/18234) it for the navigation block.
+    -   Add a new [Link creation](https://github.com/WordPress/gutenberg/pull/17846) [and](https://github.com/WordPress/gutenberg/pull/18405) [edition](https://github.com/WordPress/gutenberg/pull/18225) [UI](https://github.com/WordPress/gutenberg/pull/18285) and [use](https://github.com/WordPress/gutenberg/pull/18062) it for the navigation block.
+    -   Add an [appender](https://github.com/WordPress/gutenberg/pull/18100) to the block navigator.
+    -   Add a block [placeholder](https://github.com/WordPress/gutenberg/pull/18363).
+    -   Various fixes and refactorings: [1](https://github.com/WordPress/gutenberg/pull/18189), [2](https://github.com/WordPress/gutenberg/pull/18178), [3](https://github.com/WordPress/gutenberg/pull/18188), [4](https://github.com/WordPress/gutenberg/pull/18153), [5](https://github.com/WordPress/gutenberg/pull/18221), [6](https://github.com/WordPress/gutenberg/pull/18278), [7](https://github.com/WordPress/gutenberg/pull/18172), [8](https://github.com/WordPress/gutenberg/pull/18346), [9](https://github.com/WordPress/gutenberg/pull/18376), [10](https://github.com/WordPress/gutenberg/pull/18150), [11](https://github.com/WordPress/gutenberg/pull/18292), [12](https://github.com/WordPress/gutenberg/pull/18374), [13](https://github.com/WordPress/gutenberg/pull/18367), [14](https://github.com/WordPress/gutenberg/pull/18350), [15](https://github.com/WordPress/gutenberg/pull/18412).
+-   Add [ResponsiveBlockControl](https://github.com/WordPress/gutenberg/pull/16790) component.
+-   Add initial [API for block patterns](https://github.com/WordPress/gutenberg/pull/18270).
 
 ### Documentation
 
-* Add an introduction [README for Storybook](https://github.com/WordPress/gutenberg/pull/18245).
-* Typos and fixes: [1](https://github.com/WordPress/gutenberg/pull/18187), [2](https://github.com/WordPress/gutenberg/pull/18198), [3](https://github.com/WordPress/gutenberg/pull/18204https://github.com/WordPress/gutenberg/pull/18204), [4](https://github.com/WordPress/gutenberg/pull/18218), [5](https://github.com/WordPress/gutenberg/pull/18221), [6](https://github.com/WordPress/gutenberg/pull/18226).
-
+-   Add an introduction [README for Storybook](https://github.com/WordPress/gutenberg/pull/18245).
+-   Typos and fixes: [1](https://github.com/WordPress/gutenberg/pull/18187), [2](https://github.com/WordPress/gutenberg/pull/18198), [3](https://github.com/WordPress/gutenberg/pull/18204https://github.com/WordPress/gutenberg/pull/18204), [4](https://github.com/WordPress/gutenberg/pull/18218), [5](https://github.com/WordPress/gutenberg/pull/18221), [6](https://github.com/WordPress/gutenberg/pull/18226).
 
 = 6.8.0 =
 
+## Changelog
+
 ### Features
 
-*   [Support gradients](https://github.com/WordPress/gutenberg/pull/18001) in Cover block.
-*   Add a breadcrumb bar to support [block hierarchy selection](https://github.com/WordPress/gutenberg/pull/17838).
+-   [Support gradients](https://github.com/WordPress/gutenberg/pull/18001) in Cover block.
+-   Add a breadcrumb bar to support [block hierarchy selection](https://github.com/WordPress/gutenberg/pull/17838).
 
 ### Enhancements
 
-*   Cover block: change the [minimum height input step size](https://github.com/WordPress/gutenberg/pull/17927) to one.
-*   Allow setting a [display name for blocks](https://github.com/WordPress/gutenberg/pull/17519) based on their content in the BlockNavigator.
-*   [Hide the gradients panel](https://github.com/WordPress/gutenberg/pull/18091) if an empty set of gradients is explicitly defined.
-*   [Do not transform list items into paragraphs](https://github.com/WordPress/gutenberg/pull/18032) when deleting first list item and list is not empty.
-*   Replace inline styles with [classnames for the gradient palette](https://github.com/WordPress/gutenberg/pull/18008).
-*   [Preserve list attributes](https://github.com/WordPress/gutenberg/pull/17144) (start, type and reversed) when pasting or converting HTML to blocks. 
+-   Cover block: change the [minimum height input step size](https://github.com/WordPress/gutenberg/pull/17927) to one.
+-   Allow setting a [display name for blocks](https://github.com/WordPress/gutenberg/pull/17519) based on their content in the BlockNavigator.
+-   [Hide the gradients panel](https://github.com/WordPress/gutenberg/pull/18091) if an empty set of gradients is explicitly defined.
+-   [Do not transform list items into paragraphs](https://github.com/WordPress/gutenberg/pull/18032) when deleting first list item and list is not empty.
+-   Replace inline styles with [classnames for the gradient palette](https://github.com/WordPress/gutenberg/pull/18008).
+-   [Preserve list attributes](https://github.com/WordPress/gutenberg/pull/17144) (start, type and reversed) when pasting or converting HTML to blocks.
 
-### Bugs
+### Bug Fixes
+
+-   [Clear local autosaves](https://github.com/WordPress/gutenberg/pull/18051) after successful saves.
+-   Fix the [columns block](https://github.com/WordPress/gutenberg/pull/17968) width overflow issue when using more than two columns.
+-   Fix the [Link Rel input](https://github.com/WordPress/gutenberg/pull/17398) not showing the saved value of the link rel attribute.
+-   Fix JavaScript errors triggered when using [links without href](https://github.com/WordPress/gutenberg/pull/17928) in HTML mode.
+-   Move the [default list styles](https://github.com/WordPress/gutenberg/pull/17958) to the theme editor styles.
+-   Fix [Invalid import](https://github.com/WordPress/gutenberg/pull/17969) statement for deprecated call in the Modal component.
+-   Fix a small visual glitch in the [Publish button](https://github.com/WordPress/gutenberg/pull/18016).
+-   Prevent blank page when using the [Media Modal Edit Image "back"](https://github.com/WordPress/gutenberg/pull/18007) button.
+-   Allow the [shortcode transform](https://github.com/WordPress/gutenberg/pull/17925) to apply to all the provided shortcode aliases.
+-   Fix JavaScript error triggered when using arrows on an [empty URLInput](https://github.com/WordPress/gutenberg/pull/18088).
+-   Fix [extra margins added to Gallery blocks](https://github.com/WordPress/gutenberg/pull/18019) by list editor styles.
+-   Fix [custom button background color](https://github.com/WordPress/gutenberg/pull/18037) not reflected on reload.
+-   [Preserve List block attributes](https://github.com/WordPress/gutenberg/pull/18102) when splitting into multiple lists.
+-   Fix [checkbox styles](https://github.com/WordPress/gutenberg/pull/18108) when used in metaboxes.
+-   Make the [FontSizePicker style](https://github.com/WordPress/gutenberg/pull/18078) independent from WordPress core styles.
+-   Fix overlapping controls in the [Inline Image formatting toolbar](https://github.com/WordPress/gutenberg/pull/18090).
+-   Fix [strikethrough formatting](https://github.com/WordPress/gutenberg/pull/17187) when copy/pasting from Google Docs in Safari.
+-   Allow [media upload post processing](https://github.com/WordPress/gutenberg/pull/18106) for all 5xx REST API responses.
+
+### Experiments
 
-*   [Clear local autosaves](https://github.com/WordPress/gutenberg/pull/18051) after successful saves.
-*   Fix the [columns block](https://github.com/WordPress/gutenberg/pull/17968) width overflow issue when using more than two columns.
-*   Fix the [Link Rel input](https://github.com/WordPress/gutenberg/pull/17398) not showing the saved value of the link rel attribute.
-*   Fix JavaScript errors triggered when using [links without href](https://github.com/WordPress/gutenberg/pull/17928) in HTML mode.
-*   Move the [default list styles](https://github.com/WordPress/gutenberg/pull/17958) to the theme editor styles.
-*   Fix [Invalid import](https://github.com/WordPress/gutenberg/pull/17969) statement for deprecated call in the Modal component.
-*   Fix a small visual glitch in the [Publish button](https://github.com/WordPress/gutenberg/pull/18016).
-*   Prevent blank page when using the [Media Modal Edit Image "back"](https://github.com/WordPress/gutenberg/pull/18007) button.
-*   Allow the [shortcode transform](https://github.com/WordPress/gutenberg/pull/17925) to apply to all the provided shortcode aliases. 
-*   Fix JavaScript error triggered when using arrows on an [empty URLInput](https://github.com/WordPress/gutenberg/pull/18088).
-*   Fix [extra margins added to Gallery blocks](https://github.com/WordPress/gutenberg/pull/18019) by list editor styles.
-*   Fix [custom button background color](https://github.com/WordPress/gutenberg/pull/18037) not reflected on reload.
-*   [Preserve List block attributes](https://github.com/WordPress/gutenberg/pull/18102) when splitting into multiple lists. 
-*   Fix [checkbox styles](https://github.com/WordPress/gutenberg/pull/18108) when used in metaboxes.
-*   Make the [FontSizePicker style](https://github.com/WordPress/gutenberg/pull/18078) independent from WordPress core styles.
-*   Fix overlapping controls in the [Inline Image formatting toolbar](https://github.com/WordPress/gutenberg/pull/18090).
-*   Fix [strikethrough formatting](https://github.com/WordPress/gutenberg/pull/17187) when copy/pasting from Google Docs in Safari.
-*   Allow [media upload post processing](https://github.com/WordPress/gutenberg/pull/18106) for all 5xx REST API responses.
-
-## Experiments
-
-*   Navigation block:
-    *   Support [color customization](https://github.com/WordPress/gutenberg/pull/17832).
-    *   Improve the [Link edition UI](https://github.com/WordPress/gutenberg/pull/17986).
-*   Block Content Areas:
-    *   Implement a frontend [template loader](https://github.com/WordPress/gutenberg/pull/17626) based on the  **wp_template** CPT.
-    *   Add a temporary [UI to edit **wp_template**](https://github.com/WordPress/gutenberg/pull/17625) CPT posts.
-    *   Add a [Site title block](https://github.com/WordPress/gutenberg/pull/17207).
+-   Navigation block:
+    -   Support [color customization](https://github.com/WordPress/gutenberg/pull/17832).
+    -   Improve the [Link edition UI](https://github.com/WordPress/gutenberg/pull/17986).
+-   Block Content Areas:
+    -   Implement a frontend [template loader](https://github.com/WordPress/gutenberg/pull/17626) based on the  **wp_template** CPT.
+    -   Add a temporary [UI to edit **wp_template**](https://github.com/WordPress/gutenberg/pull/17625) CPT posts.
+    -   Add a [Site title block](https://github.com/WordPress/gutenberg/pull/17207).
 
 ### New APIs
 
-*   Add [VisuallyHidden](https://github.com/WordPress/gutenberg/pull/18022) component.
-*   Add [**@wordpress/base-styles**](https://github.com/WordPress/gutenberg/pull/17883) package to share the common variables/mixins used by the WordPress packages.
-*   Add [Platform component](https://github.com/WordPress/gutenberg/pull/18058) to allow writing platform (web, mobile) specific logic.
-*   Add isInvalidDate prop to [DatePicker](https://github.com/WordPress/gutenberg/pull/17498).
-*   @wordpress/env improvements:
-    *   Support [custom ports](https://github.com/WordPress/gutenberg/pull/17697).
-    *   Support using it for [themes](https://github.com/WordPress/gutenberg/pull/17732).
-*   Add a new experimental React  hook to [support colors in blocks](https://github.com/WordPress/gutenberg/pull/16781).
-*   Add a new experimental [DimentionControl](https://github.com/WordPress/gutenberg/pull/16791) component.
+-   Add [VisuallyHidden](https://github.com/WordPress/gutenberg/pull/18022) component.
+-   Add [**@wordpress/base-styles**](https://github.com/WordPress/gutenberg/pull/17883) package to share the common variables/mixins used by the WordPress packages.
+-   Add [Platform component](https://github.com/WordPress/gutenberg/pull/18058) to allow writing platform (web, mobile) specific logic.
+-   Add isInvalidDate prop to [DatePicker](https://github.com/WordPress/gutenberg/pull/17498).
+-   @wordpress/env improvements:
+    -   Support [custom ports](https://github.com/WordPress/gutenberg/pull/17697).
+    -   Support using it for [themes](https://github.com/WordPress/gutenberg/pull/17732).
+-   Add a new experimental React  hook to [support colors in blocks](https://github.com/WordPress/gutenberg/pull/16781).
+-   Add a new experimental [DimentionControl](https://github.com/WordPress/gutenberg/pull/16791) component.
 
 ### Various
 
-*   Storybook:
-    *   Add a story for the [CheckboxControl](https://github.com/WordPress/gutenberg/pull/17891) component.
-    *   Add a story for the [Dashicon](https://github.com/WordPress/gutenberg/pull/18027) component.
-    *   Add a story for the [ColorPalette](https://github.com/WordPress/gutenberg/pull/17997) component.
-    *   Add a story for the [ColorPicker](https://github.com/WordPress/gutenberg/pull/18013) component.
-    *   Add a story for the [ExternalLink](https://github.com/WordPress/gutenberg/pull/18084) component.
+-   Storybook:
+    -   Add a story for the [CheckboxControl](https://github.com/WordPress/gutenberg/pull/17891) component.
+    -   Add a story for the [Dashicon](https://github.com/WordPress/gutenberg/pull/18027) component.
+    -   Add a story for the [ColorPalette](https://github.com/WordPress/gutenberg/pull/17997) component.
+    -   Add a story for the [ColorPicker](https://github.com/WordPress/gutenberg/pull/18013) component.
+    -   Add a story for the [ExternalLink](https://github.com/WordPress/gutenberg/pull/18084) component.
 
 Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/pull/18015).
 
-*   Several other [enhancements to existing stories](https://github.com/WordPress/gutenberg/pull/18030).
-*   [Linting fixes](https://github.com/WordPress/gutenberg/pull/17981) for Storybook config.
-*   Fix Lint warnings triggered by [JSDoc definitions](https://github.com/WordPress/gutenberg/pull/18025).
-*   [Reorganize e2e tests](https://github.com/WordPress/gutenberg/pull/17990) [specs](https://github.com/WordPress/gutenberg/pull/18020) into three folders: editor, experimental and plugin.
-*   Cleanup [skipped e2e tests](https://github.com/WordPress/gutenberg/pull/18003).
-*   Add a [link to Storybook](https://github.com/WordPress/gutenberg/pull/17982) from the Gutenberg playground.
-*   Optimize the **@wordpress/compose** package to [support tree-shaking](https://github.com/WordPress/gutenberg/pull/17945).
-*   Code Quality:
-    *   Refactor the [Button block edit function](https://github.com/WordPress/gutenberg/pull/18006) to use a functional component.
-    *   Change the name of the [accumulated variables](https://github.com/WordPress/gutenberg/pull/17893) in reduce functions.
-    *   Remove wrapper around the [Table block cells](https://github.com/WordPress/gutenberg/pull/17711).
-*   Fix several issues related to [Node 12](https://github.com/WordPress/gutenberg/pull/18054) [becoming](https://github.com/WordPress/gutenberg/pull/18057) LTS.
-*   Add the [Block Inspector](https://github.com/WordPress/gutenberg/pull/18077) to the Gutenberg playground.
+-   Several other [enhancements to existing stories](https://github.com/WordPress/gutenberg/pull/18030).
+-   [Linting fixes](https://github.com/WordPress/gutenberg/pull/17981) for Storybook config.
+-   Fix Lint warnings triggered by [JSDoc definitions](https://github.com/WordPress/gutenberg/pull/18025).
+-   [Reorganize e2e tests](https://github.com/WordPress/gutenberg/pull/17990) [specs](https://github.com/WordPress/gutenberg/pull/18020) into three folders: editor, experimental and plugin.
+-   Cleanup [skipped e2e tests](https://github.com/WordPress/gutenberg/pull/18003).
+-   Add a [link to Storybook](https://github.com/WordPress/gutenberg/pull/17982) from the Gutenberg playground.
+-   Optimize the **@wordpress/compose** package to [support tree-shaking](https://github.com/WordPress/gutenberg/pull/17945).
+-   Code Quality:
+    -   Refactor the [Button block edit function](https://github.com/WordPress/gutenberg/pull/18006) to use a functional component.
+    -   Change the name of the [accumulated variables](https://github.com/WordPress/gutenberg/pull/17893) in reduce functions.
+    -   Remove wrapper around the [Table block cells](https://github.com/WordPress/gutenberg/pull/17711).
+-   Fix several issues related to [Node 12](https://github.com/WordPress/gutenberg/pull/18054) [becoming](https://github.com/WordPress/gutenberg/pull/18057) LTS.
+-   Add the [Block Inspector](https://github.com/WordPress/gutenberg/pull/18077) to the Gutenberg playground.
 
 ### Documentation
 
-*   Enhance the [Git workflow](https://github.com/WordPress/gutenberg/pull/17662) documentation.
-*   Clarify [block naming conventions](https://github.com/WordPress/gutenberg/pull/18117).
-*   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/17980), [2](https://github.com/WordPress/gutenberg/pull/18039).
+-   Enhance the [Git workflow](https://github.com/WordPress/gutenberg/pull/17662) documentation.
+-   Clarify [block naming conventions](https://github.com/WordPress/gutenberg/pull/18117).
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/17980), [2](https://github.com/WordPress/gutenberg/pull/18039).
 
 = 6.7.0 =
 
+## Changelog
+
 ### Features
 
-*   Add [gradient backgrounds support](https://github.com/WordPress/gutenberg/pull/17169) to the Button block.
-
-### Bug Fixes
-
-*   i18n : Include the plural version of the “[remove block](https://github.com/WordPress/gutenberg/pull/17665)” string.
-*   Update dropdown menu items to match [hover](https://github.com/WordPress/gutenberg/pull/17621) [style](https://github.com/WordPress/gutenberg/pull/17581) in other places.
-*   Smoothly [reposition Popovers on scroll](https://github.com/WordPress/gutenberg/pull/17699).
-*   Fix [margin styles for Gallery](https://github.com/WordPress/gutenberg/pull/17694) and Social links blocks.
-*   Fix [popovers hidden on mobile](https://github.com/WordPress/gutenberg/pull/17696).
-*   Ensure [sidebar plugins do not get auto-closed](https://github.com/WordPress/gutenberg/pull/17712) when opened on small screens.
-*   Fix the design of the [Checkbox component in IE11](https://github.com/WordPress/gutenberg/pull/17714).
-*   Add [has-text-color](https://github.com/WordPress/gutenberg/pull/17742) classname to heading block.
-*   Prevent [figure margin reset CSS](https://github.com/WordPress/gutenberg/pull/17737) from being included in the frontend.
-*   Fix the [scaling of the pinned plugins menu icons](https://github.com/WordPress/gutenberg/pull/17752).
-*   Fix [Heading and paragraph colors](https://github.com/WordPress/gutenberg/pull/17728) not applied inside the cover block.
-*   [Close Nux tips](https://github.com/WordPress/gutenberg/pull/17663) when clicking outside the tip.
-*   Fix [meta attribute source](https://github.com/WordPress/gutenberg/pull/17820) for post types other than post.
-*   Fix ”[Open in New Tab](https://github.com/WordPress/gutenberg/pull/17794)” not being persisted.
-*   Fix [redo](https://github.com/WordPress/gutenberg/pull/17827) [behavior](https://github.com/WordPress/gutenberg/pull/17861) and expand test coverage.
-*   I18n: Fix missing translation for the [“All content copied” string](https://github.com/WordPress/gutenberg/pull/17828).
-*   Fix the [block preview padding](https://github.com/WordPress/gutenberg/pull/17807) in themes with custom backgrounds.
-*   Fix [merging list blocks](https://github.com/WordPress/gutenberg/pull/17845) with indented list items.
-*   Fix [inline image controls](https://github.com/WordPress/gutenberg/pull/17750) display condition.
-*   Fix clicking the [redirect element](https://github.com/WordPress/gutenberg/pull/17798) focuses the inserted paragraph.
-*   Fix [editing meta attributes](https://github.com/WordPress/gutenberg/pull/17850) with multiple set to true.
-*   Add [No Preview Available](https://github.com/WordPress/gutenberg/pull/17848) text to the inserter preview panel.
-*   [Prevent block controls from disappearing](https://github.com/WordPress/gutenberg/pull/17876) when switching the List block type.
-*   Avoid [trailing space](https://github.com/WordPress/gutenberg/pull/17842) at the end of a translatable string.
-*   Fix [left aligned nested blocks](https://github.com/WordPress/gutenberg/pull/17804).
-*   Fix the top margin of the [RadioControl help text](https://github.com/WordPress/gutenberg/pull/17677).
-*   Fix [invalid HTML](https://github.com/WordPress/gutenberg/pull/17754) used in the Featured Image panel.
-*   Make sure that all [edits after saving](https://github.com/WordPress/gutenberg/pull/17888) are considered persistent by default.
-*   Ensure that [sidebar is closed on the first visit](https://github.com/WordPress/gutenberg/pull/17902) on small screens.
-*   Update the [columns block example](https://github.com/WordPress/gutenberg/pull/17904) to avoid overlapping issues.
-*   Remove unnecessary default styles for [H2 heading inside Cover blocks](https://github.com/WordPress/gutenberg/pull/17815).
-*   Fix [Media & Text block alignment](https://github.com/WordPress/gutenberg/pull/10812) in IE11.
-*   Remove [unnecessary padding](https://github.com/WordPress/gutenberg/pull/17907https://github.com/WordPress/gutenberg/pull/17907) in the Columns block.
-*   Fix the [Columns block height](https://github.com/WordPress/gutenberg/pull/17901) in IE11.
-*   Correctly update [RichText value after undo](https://github.com/WordPress/gutenberg/pull/17840).
-*   Prevent the [snackbar link components](https://github.com/WordPress/gutenberg/pull/17887) from hiding on focus.
-*   Fix [block toolbar position](https://github.com/WordPress/gutenberg/pull/17894) in IE11.
-*   Retry [uploading images](https://github.com/WordPress/gutenberg/pull/17858) on failures.
+-   Add [gradient backgrounds support](https://github.com/WordPress/gutenberg/pull/17169) to the Button block.
+
+### Bug Fixes
+
+-   i18n : Include the plural version of the “[remove block](https://github.com/WordPress/gutenberg/pull/17665)” string.
+-   Update dropdown menu items to match [hover](https://github.com/WordPress/gutenberg/pull/17621) [style](https://github.com/WordPress/gutenberg/pull/17581) in other places.
+-   Smoothly [reposition Popovers on scroll](https://github.com/WordPress/gutenberg/pull/17699).
+-   Fix [margin styles for Gallery](https://github.com/WordPress/gutenberg/pull/17694) and Social links blocks.
+-   Fix [popovers hidden on mobile](https://github.com/WordPress/gutenberg/pull/17696).
+-   Ensure [sidebar plugins do not get auto-closed](https://github.com/WordPress/gutenberg/pull/17712) when opened on small screens.
+-   Fix the design of the [Checkbox component in IE11](https://github.com/WordPress/gutenberg/pull/17714).
+-   Add [has-text-color](https://github.com/WordPress/gutenberg/pull/17742) classname to heading block.
+-   Prevent [figure margin reset CSS](https://github.com/WordPress/gutenberg/pull/17737) from being included in the frontend.
+-   Fix the [scaling of the pinned plugins menu icons](https://github.com/WordPress/gutenberg/pull/17752).
+-   Fix [Heading and paragraph colors](https://github.com/WordPress/gutenberg/pull/17728) not applied inside the cover block.
+-   [Close Nux tips](https://github.com/WordPress/gutenberg/pull/17663) when clicking outside the tip.
+-   Fix [meta attribute source](https://github.com/WordPress/gutenberg/pull/17820) for post types other than post.
+-   Fix ”[Open in New Tab](https://github.com/WordPress/gutenberg/pull/17794)” not being persisted.
+-   Fix [redo](https://github.com/WordPress/gutenberg/pull/17827) [behavior](https://github.com/WordPress/gutenberg/pull/17861) and expand test coverage.
+-   I18n: Fix missing translation for the [“All content copied” string](https://github.com/WordPress/gutenberg/pull/17828).
+-   Fix the [block preview padding](https://github.com/WordPress/gutenberg/pull/17807) in themes with custom backgrounds.
+-   Fix [merging list blocks](https://github.com/WordPress/gutenberg/pull/17845) with indented list items.
+-   Fix [inline image controls](https://github.com/WordPress/gutenberg/pull/17750) display condition.
+-   Fix clicking the [redirect element](https://github.com/WordPress/gutenberg/pull/17798) focuses the inserted paragraph.
+-   Fix [editing meta attributes](https://github.com/WordPress/gutenberg/pull/17850) with multiple set to true.
+-   Add [No Preview Available](https://github.com/WordPress/gutenberg/pull/17848) text to the inserter preview panel.
+-   [Prevent block controls from disappearing](https://github.com/WordPress/gutenberg/pull/17876) when switching the List block type.
+-   Avoid [trailing space](https://github.com/WordPress/gutenberg/pull/17842) at the end of a translatable string.
+-   Fix [left aligned nested blocks](https://github.com/WordPress/gutenberg/pull/17804).
+-   Fix the top margin of the [RadioControl help text](https://github.com/WordPress/gutenberg/pull/17677).
+-   Fix [invalid HTML](https://github.com/WordPress/gutenberg/pull/17754) used in the Featured Image panel.
+-   Make sure that all [edits after saving](https://github.com/WordPress/gutenberg/pull/17888) are considered persistent by default.
+-   Ensure that [sidebar is closed on the first visit](https://github.com/WordPress/gutenberg/pull/17902) on small screens.
+-   Update the [columns block example](https://github.com/WordPress/gutenberg/pull/17904) to avoid overlapping issues.
+-   Remove unnecessary default styles for [H2 heading inside Cover blocks](https://github.com/WordPress/gutenberg/pull/17815).
+-   Fix [Media & Text block alignment](https://github.com/WordPress/gutenberg/pull/10812) in IE11.
+-   Remove [unnecessary padding](https://github.com/WordPress/gutenberg/pull/17907https://github.com/WordPress/gutenberg/pull/17907) in the Columns block.
+-   Fix the [Columns block height](https://github.com/WordPress/gutenberg/pull/17901) in IE11.
+-   Correctly update [RichText value after undo](https://github.com/WordPress/gutenberg/pull/17840).
+-   Prevent the [snackbar link components](https://github.com/WordPress/gutenberg/pull/17887) from hiding on focus.
+-   Fix [block toolbar position](https://github.com/WordPress/gutenberg/pull/17894) in IE11.
+-   Retry [uploading images](https://github.com/WordPress/gutenberg/pull/17858) on failures.
 
 ### Performance
 
-*   Avoid [continuously reset browser selection](https://github.com/WordPress/gutenberg/pull/17869) (improve typing performance in iOS).
+-   Avoid [continuously reset browser selection](https://github.com/WordPress/gutenberg/pull/17869) (improve typing performance in iOS).
 
 ### Enhancements
 
-*   Polish [FontSize Picker design](https://github.com/WordPress/gutenberg/pull/17647).
-*   Use body color for the [post publish panel](https://github.com/WordPress/gutenberg/pull/17731).
-*   Limit the width and height of the [pinnable plugins icons](https://github.com/WordPress/gutenberg/pull/17722).
-*   Add a [max width to the Search block](https://github.com/WordPress/gutenberg/pull/17648) input.
+-   Polish [FontSize Picker design](https://github.com/WordPress/gutenberg/pull/17647).
+-   Use body color for the [post publish panel](https://github.com/WordPress/gutenberg/pull/17731).
+-   Limit the width and height of the [pinnable plugins icons](https://github.com/WordPress/gutenberg/pull/17722).
+-   Add a [max width to the Search block](https://github.com/WordPress/gutenberg/pull/17648) input.
 
 ### Experiments
 
-*   Menu Navigation block:
-*   Implement initial state containing [top level pages](https://github.com/WordPress/gutenberg/pull/17637).
-*   Fix [menu alignment](https://github.com/WordPress/gutenberg/pull/17630).
-*   Fix the [classname](https://github.com/WordPress/gutenberg/pull/17853) in frontend.
-*   Block Directory
-*   Change the [relative time string](https://github.com/WordPress/gutenberg/pull/17535).
-*   Widgets Screen
-*   Fix the [styling of the inspector panel](https://github.com/WordPress/gutenberg/pull/17880).
+-   Menu Navigation block:
+-   Implement initial state containing [top level pages](https://github.com/WordPress/gutenberg/pull/17637).
+-   Fix [menu alignment](https://github.com/WordPress/gutenberg/pull/17630).
+-   Fix the [classname](https://github.com/WordPress/gutenberg/pull/17853) in frontend.
+-   Block Directory
+-   Change the [relative time string](https://github.com/WordPress/gutenberg/pull/17535).
+-   Widgets Screen
+-   Fix the [styling of the inspector panel](https://github.com/WordPress/gutenberg/pull/17880).
 
 ### Documentation
 
-*   Fix [@wordpress/data-controls examples](https://github.com/WordPress/gutenberg/pull/17773).
-*   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/17821), [2](https://github.com/WordPress/gutenberg/pull/17909).
+-   Fix [@wordpress/data-controls examples](https://github.com/WordPress/gutenberg/pull/17773).
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/17821), [2](https://github.com/WordPress/gutenberg/pull/17909).
 
 ### Various
 
-*   Introduce the [@wordpress/env](https://github.com/WordPress/gutenberg/pull/17668) package, A zero-config, self-contained local WordPress environment for development and testing.
-*   Add [Storybook](https://github.com/WordPress/gutenberg/pull/17475) [to](https://github.com/WordPress/gutenberg/pull/17762) develop and showcase UI components:
-*   [Add](https://github.com/WordPress/gutenberg/pull/17910) [ButtonGroup](https://github.com/WordPress/gutenberg/pull/17884) component.
-*   Add [ScrollLock](https://github.com/WordPress/gutenberg/pull/17886) component.
-*   Add [Animate](https://github.com/WordPress/gutenberg/pull/17890https://github.com/WordPress/gutenberg/pull/17890) component.
-*   Add [Icon and IconButton](https://github.com/WordPress/gutenberg/pull/17868) components.
-*   Add [ClipboardButton](https://github.com/WordPress/gutenberg/pull/17913) component.
-*   Add [ColorIndicator](https://github.com/WordPress/gutenberg/pull/17924) component.
-*   [Remove RichText](https://github.com/WordPress/gutenberg/pull/17607) [wrapper](https://github.com/WordPress/gutenberg/pull/17713) and use Popover for the inline toolbar.
-*   Improve the way the [lock file](https://github.com/WordPress/gutenberg/pull/17705) handles local dependencies.
-*   Refactor [ColorPalette](https://github.com/WordPress/gutenberg/pull/17154) by extracting its design.
-*   Improve [E2E test reliability](https://github.com/WordPress/gutenberg/pull/17679) by consuming synchronous data and bailing on save failure.
-*   Replace the [isDismissable prop with isDismissible](https://github.com/WordPress/gutenberg/pull/17689) in the Modal component.
-*   Add eslint-plugin-jest to the default @wordpress/scripts [linting config](https://github.com/WordPress/gutenberg/pull/17744).
-*   Update @wordpress/scripts to use the [latest version of webpack](https://github.com/WordPress/gutenberg/pull/17753) for build and start commands.
-*   Cleanup [Dashicon component](https://github.com/WordPress/gutenberg/pull/17741).
-*   Update the [Excerpt help link](https://github.com/WordPress/gutenberg/pull/17753).
-*   [Release tool](https://github.com/WordPress/gutenberg/pull/17717): fix wrong package.json used when bumping the stable released version.
-*   Fix several [typos](https://github.com/WordPress/gutenberg/pull/17666) in [code](https://github.com/WordPress/gutenberg/pull/17800) and [files](https://github.com/WordPress/gutenberg/pull/17782).
-*   Update [E2E tests](https://github.com/WordPress/gutenberg/pull/17859) to accommodate WP 5.3 Beta 3 changes.
-*   Define the “[sideEffects](https://github.com/WordPress/gutenberg/pull/17862)” property for @wordpress packages.
-*   Add [nested embed e2e test](https://github.com/WordPress/gutenberg/pull/15909).
-*   I18N: Always return the [translation file](https://github.com/WordPress/gutenberg/pull/17900) prefixed with `gutenberg-`.
-*   Use [wp.org CDN for images](https://github.com/WordPress/gutenberg/pull/17935) used in block preview.
+-   Introduce the [@wordpress/env](https://github.com/WordPress/gutenberg/pull/17668) package, A zero-config, self-contained local WordPress environment for development and testing.
+-   Add [Storybook](https://github.com/WordPress/gutenberg/pull/17475) [to](https://github.com/WordPress/gutenberg/pull/17762) develop and showcase UI components:
+-   [Add](https://github.com/WordPress/gutenberg/pull/17910) [ButtonGroup](https://github.com/WordPress/gutenberg/pull/17884) component.
+-   Add [ScrollLock](https://github.com/WordPress/gutenberg/pull/17886) component.
+-   Add [Animate](https://github.com/WordPress/gutenberg/pull/17890https://github.com/WordPress/gutenberg/pull/17890) component.
+-   Add [Icon and IconButton](https://github.com/WordPress/gutenberg/pull/17868) components.
+-   Add [ClipboardButton](https://github.com/WordPress/gutenberg/pull/17913) component.
+-   Add [ColorIndicator](https://github.com/WordPress/gutenberg/pull/17924) component.
+-   [Remove RichText](https://github.com/WordPress/gutenberg/pull/17607) [wrapper](https://github.com/WordPress/gutenberg/pull/17713) and use Popover for the inline toolbar.
+-   Improve the way the [lock file](https://github.com/WordPress/gutenberg/pull/17705) handles local dependencies.
+-   Refactor [ColorPalette](https://github.com/WordPress/gutenberg/pull/17154) by extracting its design.
+-   Improve [E2E test reliability](https://github.com/WordPress/gutenberg/pull/17679) by consuming synchronous data and bailing on save failure.
+-   Replace the [isDismissable prop with isDismissible](https://github.com/WordPress/gutenberg/pull/17689) in the Modal component.
+-   Add eslint-plugin-jest to the default @wordpress/scripts [linting config](https://github.com/WordPress/gutenberg/pull/17744).
+-   Update @wordpress/scripts to use the [latest version of webpack](https://github.com/WordPress/gutenberg/pull/17753) for build and start commands.
+-   Cleanup [Dashicon component](https://github.com/WordPress/gutenberg/pull/17741).
+-   Update the [Excerpt help link](https://github.com/WordPress/gutenberg/pull/17753).
+-   [Release tool](https://github.com/WordPress/gutenberg/pull/17717): fix wrong package.json used when bumping the stable released version.
+-   Fix several [typos](https://github.com/WordPress/gutenberg/pull/17666) in [code](https://github.com/WordPress/gutenberg/pull/17800) and [files](https://github.com/WordPress/gutenberg/pull/17782).
+-   Update [E2E tests](https://github.com/WordPress/gutenberg/pull/17859) to accommodate WP 5.3 Beta 3 changes.
+-   Define the “[sideEffects](https://github.com/WordPress/gutenberg/pull/17862)” property for @wordpress packages.
+-   Add [nested embed e2e test](https://github.com/WordPress/gutenberg/pull/15909).
+-   I18N: Always return the [translation file](https://github.com/WordPress/gutenberg/pull/17900) prefixed with `gutenberg-`.
+-   Use [wp.org CDN for images](https://github.com/WordPress/gutenberg/pull/17935) used in block preview.
 
 = 6.6.0 =
 
+## Changelog
+
 ### Enhancements
 
 -   Turn [Stack on mobile toggle on by default](https://github.com/WordPress/gutenberg/pull/14364) in the Media & Text block.
 -   Only show the Inserter [help panel in the topbar inserter](https://github.com/WordPress/gutenberg/pull/17545).
 -   Use minimum height instead of height for [Cover height control label](https://github.com/WordPress/gutenberg/pull/17634).
--   Update the [buttons](https://github.com/WordPress/gutenberg/pull/17645)  [styling](https://github.com/WordPress/gutenberg/pull/17651) to match core.
+-   Update the [buttons](https://github.com/WordPress/gutenberg/pull/17645) [styling](https://github.com/WordPress/gutenberg/pull/17651) to match core.
 -   Add [preview examples](https://github.com/WordPress/gutenberg/pull/17493) for multiple core blocks.
 
 ### New APIs
@@ -20634,7 +45393,7 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 -   Gallery block: [Don't show the caption gradient overlay](https://github.com/WordPress/gutenberg/pull/17561) unless image is selected or a caption is set.
 -   Gallery block: Fix [custom alignment layouts](https://github.com/WordPress/gutenberg/pull/17586)
 -   Fix [dirtiness detection when server-side saving filters](https://github.com/WordPress/gutenberg/pull/17532) are used.
--   Remove [wrong i18n](https://github.com/WordPress/gutenberg/pull/17546)  [domain](https://github.com/WordPress/gutenberg/pull/17591).
+-   Remove [wrong i18n](https://github.com/WordPress/gutenberg/pull/17546) [domain](https://github.com/WordPress/gutenberg/pull/17591).
 -   Fix [invalid block warning](https://github.com/WordPress/gutenberg/pull/17572) panel.
 -   Fix various issues in related to the [BlockDirectory inserter](https://github.com/WordPress/gutenberg/pull/17517).
 -   Cover block: [Show Height control](https://github.com/WordPress/gutenberg/pull/17371) only if an image background is selected.
@@ -20659,7 +45418,7 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 ### Various
 
 -   [Replace registered social links blocks](https://github.com/WordPress/gutenberg/pull/17494) if already registered in Core.
--   More stable [List block e2e](https://github.com/WordPress/gutenberg/pull/17482)  [tests](https://github.com/WordPress/gutenberg/pull/17599).
+-   More stable [List block e2e](https://github.com/WordPress/gutenberg/pull/17482) [tests](https://github.com/WordPress/gutenberg/pull/17599).
 -   Add e2e tests to validate the [date picker UI](https://github.com/WordPress/gutenberg/pull/17490) behavior.
 -   Add e2e tests to validate the [local auto-save](https://github.com/WordPress/gutenberg/pull/17503) behavior.
 -   Mark the [social links block as experimental](https://github.com/WordPress/gutenberg/pull/17526).
@@ -20684,105 +45443,123 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 
 = 6.5.0 =
 
+## Changelog
+
 ### Features
-*   Add a [new](https://github.com/WordPress/gutenberg/pull/17402) [Social links](https://github.com/WordPress/gutenberg/pull/16897) [block](https://github.com/WordPress/gutenberg/pull/17380).
-*   Support [border radius changes](https://github.com/WordPress/gutenberg/pull/17253) in the Button block.
-*   Support [adding a caption to the Gallery block](https://github.com/WordPress/gutenberg/pull/17101).
-*   Support [local autosaves](https://github.com/WordPress/gutenberg/pull/16490).
+
+-   Add a [new](https://github.com/WordPress/gutenberg/pull/17402) [Social links](https://github.com/WordPress/gutenberg/pull/16897) [block](https://github.com/WordPress/gutenberg/pull/17380).
+-   Support [border radius changes](https://github.com/WordPress/gutenberg/pull/17253) in the Button block.
+-   Support [adding a caption to the Gallery block](https://github.com/WordPress/gutenberg/pull/17101).
+-   Support [local autosaves](https://github.com/WordPress/gutenberg/pull/16490).
+
 ### Enhancements
-*   [Disable the click-through](https://github.com/WordPress/gutenberg/pull/17239) behavior in desktop.
-*   Update the [labels width](https://github.com/WordPress/gutenberg/pull/14478) to fit their content.
-*   Avoid displaying console warnings when [blocks are upgraded using deprecated versions](https://github.com/WordPress/gutenberg/pull/16862).
-*   Reduce the [padding around the in-between block inserter](https://github.com/WordPress/gutenberg/pull/17136).
-*   Improve the design of [the](https://github.com/WordPress/gutenberg/pull/17315) [block movers](https://github.com/WordPress/gutenberg/pull/17216).
-*   Align the [Gallery block image](https://github.com/WordPress/gutenberg/pull/17316) [controls](https://github.com/WordPress/gutenberg/pull/17374) with the block movers design.
-*   [Remove child blocks](https://github.com/WordPress/gutenberg/pull/17128) from the block manager.
-*   [Remove duplicated "Enable" label](https://github.com/WordPress/gutenberg/pull/17375) from the options panel.
-*   Use [sentence case](https://github.com/WordPress/gutenberg/pull/17336) for all tooltips.
-*   [Remove the forced gray scale](https://github.com/WordPress/gutenberg/pull/17415) from the category icons.
-*   Move the [alignment controls to toolbar of the Heading](https://github.com/WordPress/gutenberg/pull/17419) block.
-*   Use the [featured image frame](https://github.com/WordPress/gutenberg/pull/17410) in the Media modal.
-### Bug Fixes
-*   Update the [Post Schedule label](https://github.com/WordPress/gutenberg/pull/15757) to correctly reflect the date and time display settings.
-*   Clean up the [block toolbar position](https://github.com/WordPress/gutenberg/pull/17197) for wide full blocks.
-*   Fix the [cropped focus indicator](https://github.com/WordPress/gutenberg/pull/17215) in the block inserter.
-*   Browser incompatibilities:
-    *   [Fallback to setTimeout in RichText](https://github.com/WordPress/gutenberg/pull/17213) if no requestIdleCallback is not supported.
-    *   [Block toolbar fixes](https://github.com/WordPress/gutenberg/pull/17214) for IE11.
-    *   Fix [Backspace usage in RichText](https://github.com/WordPress/gutenberg/pull/17256) for IE11.
-*   Prevent clicking the [next/previous month in the Post Schedule](https://github.com/WordPress/gutenberg/pull/17201) popover from closing it.
-*   Prevent the [private posts from triggering the unsaved changes](https://github.com/WordPress/gutenberg/pull/17210) [warnings](https://github.com/WordPress/gutenberg/pull/17257) after saving.
-*   Fix the usage of the [useReducedMotion hook in Node.js](https://github.com/WordPress/gutenberg/pull/17165) context.
-*   A11y:
-    *   Use [darker form field borders](https://github.com/WordPress/gutenberg/pull/17218).
-    *   Fix the [modal escape key propagation](https://github.com/WordPress/gutenberg/pull/17297).
-    *   [Move focus back from the Modal to the More Menu](https://github.com/WordPress/gutenberg/pull/16964) when it was used to open the Modal.
-*   [Trim leading and trailing whitespaces](https://github.com/WordPress/gutenberg/pull/17320) when inserting links.
-*   Prevent using the paragraph block when [pasting unformatted text into RichText](https://github.com/WordPress/gutenberg/pull/17140).
-*   Fix styling of [classic block's block controls](https://github.com/WordPress/gutenberg/pull/17323).
-*   Fix the [showing/hiding logic of the **Group** menu item](https://github.com/WordPress/gutenberg/pull/17353) in the block settings menu.
-*   Fix [invalid HTML nesting](https://github.com/WordPress/gutenberg/pull/17342) of buttons.
-*   Fix [React warning when using withFocusReturn](https://github.com/WordPress/gutenberg/pull/17354) Higher-order component.
-*   Fix [lengthy content cuts](https://github.com/WordPress/gutenberg/pull/17365) in the Cover block.
-*   Disable [multi-selection when resizing](https://github.com/WordPress/gutenberg/pull/17359).
-*   Fix the [permalink UI in RTL](https://github.com/WordPress/gutenberg/pull/13919) languages.
-*   Fix multiple issues related to the [reusable blocks](https://github.com/WordPress/gutenberg/pull/14367) editing/previewing UI.
-*   Remove filter that [unsets auto-draft titles](https://github.com/WordPress/gutenberg/pull/17317).
-*   Fix the [Move to trash](https://github.com/WordPress/gutenberg/pull/17427) button redirection.
-*   Prevent [undo/redo history cleaning on autosaves](https://github.com/WordPress/gutenberg/pull/17420).
-*   Add i18n support for title [Content Blocks string](https://github.com/WordPress/gutenberg/pull/17435).
-*   Add missing extra [classnames to the Column block](https://github.com/WordPress/gutenberg/pull/17422).
-*   Fix  JavaScript error triggered when using a [multi-line RichText](https://github.com/WordPress/gutenberg/pull/17447).
-*   Fix [RichText](https://github.com/WordPress/gutenberg/pull/17451) [focus](https://github.com/WordPress/gutenberg/pull/17450) related issues.
-*   Fix [undo levels](https://github.com/WordPress/gutenberg/pull/17259) [inconsistencies](https://github.com/WordPress/gutenberg/pull/17452).
-*   Fix [multiple post meta fields edits](https://github.com/WordPress/gutenberg/pull/17455).
-*   Fix [selecting custom colors](https://github.com/WordPress/gutenberg/pull/17381) in RTL languages.
+
+-   [Disable the click-through](https://github.com/WordPress/gutenberg/pull/17239) behavior in desktop.
+-   Update the [labels width](https://github.com/WordPress/gutenberg/pull/14478) to fit their content.
+-   Avoid displaying console warnings when [blocks are upgraded using deprecated versions](https://github.com/WordPress/gutenberg/pull/16862).
+-   Reduce the [padding around the in-between block inserter](https://github.com/WordPress/gutenberg/pull/17136).
+-   Improve the design of [the](https://github.com/WordPress/gutenberg/pull/17315) [block movers](https://github.com/WordPress/gutenberg/pull/17216).
+-   Align the [Gallery block image](https://github.com/WordPress/gutenberg/pull/17316) [controls](https://github.com/WordPress/gutenberg/pull/17374) with the block movers design.
+-   [Remove child blocks](https://github.com/WordPress/gutenberg/pull/17128) from the block manager.
+-   [Remove duplicated "Enable" label](https://github.com/WordPress/gutenberg/pull/17375) from the options panel.
+-   Use [sentence case](https://github.com/WordPress/gutenberg/pull/17336) for all tooltips.
+-   [Remove the forced gray scale](https://github.com/WordPress/gutenberg/pull/17415) from the category icons.
+-   Move the [alignment controls to toolbar of the Heading](https://github.com/WordPress/gutenberg/pull/17419) block.
+-   Use the [featured image frame](https://github.com/WordPress/gutenberg/pull/17410) in the Media modal.
+
+### Bug Fixes
+
+-   Update the [Post Schedule label](https://github.com/WordPress/gutenberg/pull/15757) to correctly reflect the date and time display settings.
+-   Clean up the [block toolbar position](https://github.com/WordPress/gutenberg/pull/17197) for wide full blocks.
+-   Fix the [cropped focus indicator](https://github.com/WordPress/gutenberg/pull/17215) in the block inserter.
+-   Browser incompatibilities:
+    -   [Fallback to setTimeout in RichText](https://github.com/WordPress/gutenberg/pull/17213) if no requestIdleCallback is not supported.
+    -   [Block toolbar fixes](https://github.com/WordPress/gutenberg/pull/17214) for IE11.
+    -   Fix [Backspace usage in RichText](https://github.com/WordPress/gutenberg/pull/17256) for IE11.
+-   Prevent clicking the [next/previous month in the Post Schedule](https://github.com/WordPress/gutenberg/pull/17201) popover from closing it.
+-   Prevent the [private posts from triggering the unsaved changes](https://github.com/WordPress/gutenberg/pull/17210) [warnings](https://github.com/WordPress/gutenberg/pull/17257) after saving.
+-   Fix the usage of the [useReducedMotion hook in Node.js](https://github.com/WordPress/gutenberg/pull/17165) context.
+-   A11y:
+    -   Use [darker form field borders](https://github.com/WordPress/gutenberg/pull/17218).
+    -   Fix the [modal escape key propagation](https://github.com/WordPress/gutenberg/pull/17297).
+    -   [Move focus back from the Modal to the More Menu](https://github.com/WordPress/gutenberg/pull/16964) when it was used to open the Modal.
+-   [Trim leading and trailing whitespaces](https://github.com/WordPress/gutenberg/pull/17320) when inserting links.
+-   Prevent using the paragraph block when [pasting unformatted text into RichText](https://github.com/WordPress/gutenberg/pull/17140).
+-   Fix styling of [classic block's block controls](https://github.com/WordPress/gutenberg/pull/17323).
+-   Fix the [showing/hiding logic of the **Group** menu item](https://github.com/WordPress/gutenberg/pull/17353) in the block settings menu.
+-   Fix [invalid HTML nesting](https://github.com/WordPress/gutenberg/pull/17342) of buttons.
+-   Fix [React warning when using withFocusReturn](https://github.com/WordPress/gutenberg/pull/17354) Higher-order component.
+-   Fix [lengthy content cuts](https://github.com/WordPress/gutenberg/pull/17365) in the Cover block.
+-   Disable [multi-selection when resizing](https://github.com/WordPress/gutenberg/pull/17359).
+-   Fix the [permalink UI in RTL](https://github.com/WordPress/gutenberg/pull/13919) languages.
+-   Fix multiple issues related to the [reusable blocks](https://github.com/WordPress/gutenberg/pull/14367) editing/previewing UI.
+-   Remove filter that [unsets auto-draft titles](https://github.com/WordPress/gutenberg/pull/17317).
+-   Fix the [Move to trash](https://github.com/WordPress/gutenberg/pull/17427) button redirection.
+-   Prevent [undo/redo history cleaning on autosaves](https://github.com/WordPress/gutenberg/pull/17420).
+-   Add i18n support for title [Content Blocks string](https://github.com/WordPress/gutenberg/pull/17435).
+-   Add missing extra [classnames to the Column block](https://github.com/WordPress/gutenberg/pull/17422).
+-   Fix JavaScript error triggered when using a [multi-line RichText](https://github.com/WordPress/gutenberg/pull/17447).
+-   Fix [RichText](https://github.com/WordPress/gutenberg/pull/17451) [focus](https://github.com/WordPress/gutenberg/pull/17450) related issues.
+-   Fix [undo levels](https://github.com/WordPress/gutenberg/pull/17259) [inconsistencies](https://github.com/WordPress/gutenberg/pull/17452).
+-   Fix [multiple post meta fields edits](https://github.com/WordPress/gutenberg/pull/17455).
+-   Fix [selecting custom colors](https://github.com/WordPress/gutenberg/pull/17381) in RTL languages.
+
 ### Experiments
-*   Add [one-click search and install blocks](https://github.com/WordPress/gutenberg/pull/17431) from the block directory to the inserter.
-*   Refactor the [Navigation block](https://github.com/WordPress/gutenberg/pull/16796) [to](https://github.com/WordPress/gutenberg/pull/17343) [be](https://github.com/WordPress/gutenberg/pull/17328) a dynamic block.
-*   Add a [block navigator to the Navigation](https://github.com/WordPress/gutenberg/pull/17265) [block](https://github.com/WordPress/gutenberg/pull/17446).
-*   Only show the [customizer block based widgets](https://github.com/WordPress/gutenberg/pull/16956) if the experimental widget screen is enabled.
+
+-   Add [one-click search and install blocks](https://github.com/WordPress/gutenberg/pull/17431) from the block directory to the inserter.
+-   Refactor the [Navigation block](https://github.com/WordPress/gutenberg/pull/16796) [to](https://github.com/WordPress/gutenberg/pull/17343) [be](https://github.com/WordPress/gutenberg/pull/17328) a dynamic block.
+-   Add a [block navigator to the Navigation](https://github.com/WordPress/gutenberg/pull/17265) [block](https://github.com/WordPress/gutenberg/pull/17446).
+-   Only show the [customizer block based widgets](https://github.com/WordPress/gutenberg/pull/16956) if the experimental widget screen is enabled.
+
 ### APIs
-*   Add a [disableDropZone prop for MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/17077) component.
-*   Add [post autosave locking](https://github.com/WordPress/gutenberg/pull/16249).
-*   [PluginPrePublishPanel](https://github.com/WordPress/gutenberg/pull/16378) and [PluginPostPublishPanel](https://github.com/WordPress/gutenberg/pull/16383) support icon prop and inherits from registerPlugin.
-*   Allow [disabling the Post Status](https://github.com/WordPress/gutenberg/pull/17117) settings panel.
-*   Restore the [keepPlaceholderOnFocus](https://github.com/WordPress/gutenberg/pull/17439) [RichText](https://github.com/WordPress/gutenberg/pull/17445) prop.
+
+-   Add a [disableDropZone prop for MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/17077) component.
+-   Add [post autosave locking](https://github.com/WordPress/gutenberg/pull/16249).
+-   [PluginPrePublishPanel](https://github.com/WordPress/gutenberg/pull/16378) and [PluginPostPublishPanel](https://github.com/WordPress/gutenberg/pull/16383) support icon prop and inherits from registerPlugin.
+-   Allow [disabling the Post Status](https://github.com/WordPress/gutenberg/pull/17117) settings panel.
+-   Restore the [keepPlaceholderOnFocus](https://github.com/WordPress/gutenberg/pull/17439) [RichText](https://github.com/WordPress/gutenberg/pull/17445) prop.
+
 ### Various
-*   Upgrade [React and React DOM](https://github.com/WordPress/gutenberg/pull/16982) to 16.9.0.
-*   Add [TypeScript JSDoc linting](https://github.com/WordPress/gutenberg/pull/17014) to the @wordpress/url package.
-*   Run [npm audit](https://github.com/WordPress/gutenberg/pull/17192) to fix the reported vulnerabilities.
-*   Switch the local environment to an [environment based on the](https://github.com/WordPress/gutenberg/pull/17004) [Core setup](https://github.com/WordPress/gutenberg/pull/17296).
-*   Set a constant namespace for [module sourcemaps](https://github.com/WordPress/gutenberg/pull/17024).
-*   [Refactor the loading animation](https://github.com/WordPress/gutenberg/pull/17106) to rely on the Animate component.
-*   Code improvements to [block PHP files](https://github.com/WordPress/gutenberg/pull/17288).
-*   Enable the [duplicate style property](https://github.com/WordPress/gutenberg/pull/17287) linting rule.
-*   Update [Husky & Lint-staged](https://github.com/WordPress/gutenberg/pull/17310) to the latest versions.
-*   Restore the usage of the [latest npm version](https://github.com/WordPress/gutenberg/pull/17171) in CI.
-*   Add [ESLint as peer dependency to eslint-plugin](https://github.com/WordPress/gutenberg/pull/17417).
-*   [Conditionally include the block styles](https://github.com/WordPress/gutenberg/pull/17429) functionality to avoid conflicts with Core.
-*   Add missing [deprecated setFocusedElement prop](https://github.com/WordPress/gutenberg/pull/17421) to the RichText component.
-*   Support [generating assets in PHP format](https://github.com/WordPress/gutenberg/pull/17298) in the webpack dependency extraction plugin.
+
+-   Upgrade [React and React DOM](https://github.com/WordPress/gutenberg/pull/16982) to 16.9.0.
+-   Add [TypeScript JSDoc linting](https://github.com/WordPress/gutenberg/pull/17014) to the @wordpress/url package.
+-   Run [npm audit](https://github.com/WordPress/gutenberg/pull/17192) to fix the reported vulnerabilities.
+-   Switch the local environment to an [environment based on the](https://github.com/WordPress/gutenberg/pull/17004) [Core setup](https://github.com/WordPress/gutenberg/pull/17296).
+-   Set a constant namespace for [module sourcemaps](https://github.com/WordPress/gutenberg/pull/17024).
+-   [Refactor the loading animation](https://github.com/WordPress/gutenberg/pull/17106) to rely on the Animate component.
+-   Code improvements to [block PHP files](https://github.com/WordPress/gutenberg/pull/17288).
+-   Enable the [duplicate style property](https://github.com/WordPress/gutenberg/pull/17287) linting rule.
+-   Update [Husky & Lint-staged](https://github.com/WordPress/gutenberg/pull/17310) to the latest versions.
+-   Restore the usage of the [latest npm version](https://github.com/WordPress/gutenberg/pull/17171) in CI.
+-   Add [ESLint as peer dependency to eslint-plugin](https://github.com/WordPress/gutenberg/pull/17417).
+-   [Conditionally include the block styles](https://github.com/WordPress/gutenberg/pull/17429) functionality to avoid conflicts with Core.
+-   Add missing [deprecated setFocusedElement prop](https://github.com/WordPress/gutenberg/pull/17421) to the RichText component.
+-   Support [generating assets in PHP format](https://github.com/WordPress/gutenberg/pull/17298) in the webpack dependency extraction plugin.
+
 ### Documentation
-*   Update the [reviews and merging documentation](https://github.com/WordPress/gutenberg/pull/16915).
-*   Fix [type docs](https://github.com/WordPress/gutenberg/pull/17206) for the Notices package.
-*   Add a link to the [fixtures tests document](https://github.com/WordPress/gutenberg/pull/17283) in the Testing Overview.
-*   Adds documentation for the [onClose prop of MediaUpload](https://github.com/WordPress/gutenberg/pull/17403).
-*   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/17097), [2](https://github.com/WordPress/gutenberg/pull/17285), [3](https://github.com/WordPress/gutenberg/pull/17292), [4](https://github.com/WordPress/gutenberg/pull/17286), [5](https://github.com/WordPress/gutenberg/pull/17304), [6](https://github.com/WordPress/gutenberg/pull/17349), [7](https://github.com/WordPress/gutenberg/pull/17377), [8](https://github.com/WordPress/gutenberg/pull/17436).
 
+-   Update the [reviews and merging documentation](https://github.com/WordPress/gutenberg/pull/16915).
+-   Fix [type docs](https://github.com/WordPress/gutenberg/pull/17206) for the Notices package.
+-   Add a link to the [fixtures tests document](https://github.com/WordPress/gutenberg/pull/17283) in the Testing Overview.
+-   Adds documentation for the [onClose prop of MediaUpload](https://github.com/WordPress/gutenberg/pull/17403).
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/17097), [2](https://github.com/WordPress/gutenberg/pull/17285), [3](https://github.com/WordPress/gutenberg/pull/17292), [4](https://github.com/WordPress/gutenberg/pull/17286), [5](https://github.com/WordPress/gutenberg/pull/17304), [6](https://github.com/WordPress/gutenberg/pull/17349), [7](https://github.com/WordPress/gutenberg/pull/17377), [8](https://github.com/WordPress/gutenberg/pull/17436).
 
 = 6.4.0 =
 
+## Changelog
+
 ### Features
-- Add the option to [select the style that is automatically applied](https://github.com/WordPress/gutenberg/pull/16465).
-- Add the option to [resize Cover Block ](https://github.com/WordPress/gutenberg/pull/17143).
-- Allow directly setting a [solid background color on Cover](https://github.com/WordPress/gutenberg/pull/17041) block.
-- Add [list start, reversed settings](https://github.com/WordPress/gutenberg/pull/15113).
-- Add a [help panel to the inserter available in all blocks](https://github.com/WordPress/gutenberg/pull/16813).
-- [Typewriter experience](https://github.com/WordPress/gutenberg/pull/16460).
-- Add [circle-crop variation](https://github.com/WordPress/gutenberg/pull/16475) to Image block.
+
+-   Add the option to [select the style that is automatically applied](https://github.com/WordPress/gutenberg/pull/16465).
+-   Add the option to [resize Cover Block ](https://github.com/WordPress/gutenberg/pull/17143).
+-   Allow directly setting a [solid background color on Cover](https://github.com/WordPress/gutenberg/pull/17041) block.
+-   Add [list start, reversed settings](https://github.com/WordPress/gutenberg/pull/15113).
+-   Add a [help panel to the inserter available in all blocks](https://github.com/WordPress/gutenberg/pull/16813).
+-   [Typewriter experience](https://github.com/WordPress/gutenberg/pull/16460).
+-   Add [circle-crop variation](https://github.com/WordPress/gutenberg/pull/16475) to Image block.
 
 ### Enhancements
+
 -   Add [overflow support inside block switcher](https://github.com/WordPress/gutenberg/pull/16984).
 -   Update [GitHub action exit codes.](https://github.com/WordPress/gutenberg/pull/17002)
 -   Core Data: [return updated record in saveEntityRecord](https://github.com/WordPress/gutenberg/pull/17030).
@@ -20790,37 +45567,39 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 -   [Remove borders around inserter items for blocks with children blocks](https://github.com/WordPress/gutenberg/pull/17083).
 -   Add [disabled block count](https://github.com/WordPress/gutenberg/pull/17103) in the block manager.
 -   Writing Flow:
-	-   Add [splitting in the quote block](https://github.com/WordPress/gutenberg/pull/17121).
-	-   Allow [undoing of patterns with BACKSPACE and ESC.](https://github.com/WordPress/gutenberg/pull/14776)
+    -   Add [splitting in the quote block](https://github.com/WordPress/gutenberg/pull/17121).
+    -   Allow [undoing of patterns with BACKSPACE and ESC.](https://github.com/WordPress/gutenberg/pull/14776)
 
 ### Experiments
+
 -   Widgets Screen:
-	-   Fix: [Blocks are too close together](https://github.com/WordPress/gutenberg/issues/16992).
-	-   Add [Button block appender](https://github.com/WordPress/gutenberg/pull/16971).
+    -   Fix: [Blocks are too close together](https://github.com/WordPress/gutenberg/issues/16992).
+    -   Add [Button block appender](https://github.com/WordPress/gutenberg/pull/16971).
 
 ### New APIs
-- Add [callbacks to ServerSideRenderer](https://github.com/WordPress/gutenberg/pull/16512) to handle failures with custom renderers.
-- Add the [block example API](https://github.com/WordPress/gutenberg/pull/17124) and use it for inserter and switcher previews.
-- Enable an [optional namespace parameter for hasAction & hasFilter ](https://github.com/WordPress/gutenberg/pull/15362).
-
-
-### Bug Fixes
-- The [duplicate button appears even if the block is not allowed](https://github.com/WordPress/gutenberg/pull/17007).
-- [Double scrollbar appearing](https://github.com/WordPress/gutenberg/pull/17031) in full-screen mode.
-- RichText: [ignore selection changes during composition](https://github.com/WordPress/gutenberg/pull/16960)
-- Missing [default functions as props in BlockEditorProvider](https://github.com/WordPress/gutenberg/pull/17036).
-- [Button block does not center](https://github.com/WordPress/gutenberg/pull/17063)  on the editor.
-- Guard [block component against zombie state](https://github.com/WordPress/gutenberg/pull/17092) bug.
-- Add [truthy check for the Popover component](https://github.com/WordPress/gutenberg/pull/17100) onClose prop before calling it.
-- Make InnerBlocks [only force the template on directly set lockings](https://github.com/WordPress/gutenberg/pull/16973).
-- Check to [ensure focus has intentionally left the wrapped component in withFocusOutside](https://github.com/WordPress/gutenberg/pull/17051) HOC.
-- Correctly [transform images with external sources](https://github.com/WordPress/gutenberg/pull/16548) into a gallery.
-- [Block toolbar appears above sidebar](https://github.com/WordPress/gutenberg/pull/17108) on medium viewports.
-- [Basecontrol name undefined](https://github.com/WordPress/gutenberg/pull/17044/files) triggring eslint-plugin TypeError.
-- [Image flickering & focus lose](https://github.com/WordPress/gutenberg/pull/17175) on resizing.
-- Add [get_item_schema function to WP_REST_Widget_Areas_Controller ](https://github.com/WordPress/gutenberg/pull/15981).
-- [Empty Classic Editor inside innerBlock fatal error](https://github.com/WordPress/gutenberg/pull/17164).
-- [Changing month in post publish date closes the popover](https://github.com/WordPress/gutenberg/pull/17164).
+
+-   Add [callbacks to ServerSideRenderer](https://github.com/WordPress/gutenberg/pull/16512) to handle failures with custom renderers.
+-   Add the [block example API](https://github.com/WordPress/gutenberg/pull/17124) and use it for inserter and switcher previews.
+-   Enable an [optional namespace parameter for hasAction & hasFilter ](https://github.com/WordPress/gutenberg/pull/15362).
+
+### Bug Fixes
+
+-   The [duplicate button appears even if the block is not allowed](https://github.com/WordPress/gutenberg/pull/17007).
+-   [Double scrollbar appearing](https://github.com/WordPress/gutenberg/pull/17031) in full-screen mode.
+-   RichText: [ignore selection changes during composition](https://github.com/WordPress/gutenberg/pull/16960)
+-   Missing [default functions as props in BlockEditorProvider](https://github.com/WordPress/gutenberg/pull/17036).
+-   [Button block does not center](https://github.com/WordPress/gutenberg/pull/17063) on the editor.
+-   Guard [block component against zombie state](https://github.com/WordPress/gutenberg/pull/17092) bug.
+-   Add [truthy check for the Popover component](https://github.com/WordPress/gutenberg/pull/17100) onClose prop before calling it.
+-   Make InnerBlocks [only force the template on directly set lockings](https://github.com/WordPress/gutenberg/pull/16973).
+-   Check to [ensure focus has intentionally left the wrapped component in withFocusOutside](https://github.com/WordPress/gutenberg/pull/17051) HOC.
+-   Correctly [transform images with external sources](https://github.com/WordPress/gutenberg/pull/16548) into a gallery.
+-   [Block toolbar appears above sidebar](https://github.com/WordPress/gutenberg/pull/17108) on medium viewports.
+-   [Basecontrol name undefined](https://github.com/WordPress/gutenberg/pull/17044/files) triggring eslint-plugin TypeError.
+-   [Image flickering & focus lose](https://github.com/WordPress/gutenberg/pull/17175) on resizing.
+-   Add [get_item_schema function to WP_REST_Widget_Areas_Controller ](https://github.com/WordPress/gutenberg/pull/15981).
+-   [Empty Classic Editor inside innerBlock fatal error](https://github.com/WordPress/gutenberg/pull/17164).
+-   [Changing month in post publish date closes the popover](https://github.com/WordPress/gutenberg/pull/17164).
 
 ### Various
 
@@ -20829,35 +45608,38 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 -   [Fix performance tests with the introduction of the navigation mode](https://github.com/WordPress/gutenberg/pull/17034)
 -   RichText code improvements: [#16905](https://github.com/WordPress/gutenberg/pull/16905), [#16962](https://github.com/WordPress/gutenberg/pull/16962).
 -   Scripts:
-	- Improve the way [test files are discovered](https://github.com/WordPress/gutenberg/pull/17033).
-	- Improve [recommended settings](https://github.com/WordPress/gutenberg/pull/17027) included in the package.
-	- Use [the SCSS shared stylelint-config-wordpress config](https://github.com/WordPress/gutenberg/pull/17060).
+    -   Improve the way [test files are discovered](https://github.com/WordPress/gutenberg/pull/17033).
+    -   Improve [recommended settings](https://github.com/WordPress/gutenberg/pull/17027) included in the package.
+    -   Use [the SCSS shared stylelint-config-wordpress config](https://github.com/WordPress/gutenberg/pull/17060).
 -   [Ignore the WordPress directory](https://github.com/WordPress/gutenberg/pull/16243) in stylelint.
 -   Fix: [edit post sets some default block appender styles](https://github.com/WordPress/gutenberg/pull/16943).
 -   Build: [remove global install of latest npm](https://github.com/WordPress/gutenberg/pull/17134).
 -   Project automation:
-    - Rewrite [actions using JavaScript](https://github.com/WordPress/gutenberg/pull/17080).
-    - Fix: [Add first-time contributor label](https://github.com/WordPress/gutenberg/pull/17156).
-    - Fix: [Add milestone](https://github.com/WordPress/gutenberg/pull/17157).
+    -   Rewrite [actions using JavaScript](https://github.com/WordPress/gutenberg/pull/17080).
+    -   Fix: [Add first-time contributor label](https://github.com/WordPress/gutenberg/pull/17156).
+    -   Fix: [Add milestone](https://github.com/WordPress/gutenberg/pull/17157).
 -   Remove [unused CSS from ColorPalette](https://github.com/WordPress/gutenberg/pull/17152) component.
 
-
 ### Documentation
+
 -   Add [examples for the lockPostSaving and unlockPostSaving](https://github.com/WordPress/gutenberg/pull/16713)actions.
 -   Add guidance for [adding/proposing/suggesting new components](https://github.com/WordPress/gutenberg/pull/16845) to the wordpress/components npm package.
 -   Add section about [updating package after new releases](https://github.com/WordPress/gutenberg/pull/17026).
 -   Add [ESNext examples to format API](https://github.com/WordPress/gutenberg/pull/16804) tutorial.
 -   Document [server-side functions that allow registering block styles](https://github.com/WordPress/gutenberg/pull/16997).
 
-
 ### Mobile
+
 -   [Reset toolbar scroll on content change](https://github.com/WordPress/gutenberg/pull/16945).
 -   [Extract caption component](https://github.com/WordPress/gutenberg/pull/16825).
 -   [Not use ListEdit](https://github.com/WordPress/gutenberg/pull/17070).
 -   [Hide replaceable blocks when adding blocks](https://github.com/WordPress/gutenberg/pull/16931).
 -   Make [tapping at the end of post always insert at the end of the post.](https://github.com/WordPress/gutenberg/pull/16934)
+
 = 6.3.0 =
 
+## Changelog
+
 ### Features
 
 -   A11y: Support [Navigation and Edit modes](https://github.com/WordPress/gutenberg/pull/16500) to ease navigating between blocks.
@@ -20867,18 +45649,18 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 ### Enhancements
 
 -   Improvements to the BlockPreview component:
-	-   Support [previewing a multiple blocks](https://github.com/WordPress/gutenberg/pull/16033) (a template).
-	-   [Unify BlockPreview and BlockPreviewContent](https://github.com/WordPress/gutenberg/pull/16801) into a unique component.
-	-   Hide [block appenders](https://github.com/WordPress/gutenberg/pull/16887).
-	-   [Expose the component](https://github.com/WordPress/gutenberg/pull/16834) in the block-editor module.
-	-   [Scale the preview content](https://github.com/WordPress/gutenberg/pull/16873) according to the width of the preview container.
+    -   Support [previewing a multiple blocks](https://github.com/WordPress/gutenberg/pull/16033) (a template).
+    -   [Unify BlockPreview and BlockPreviewContent](https://github.com/WordPress/gutenberg/pull/16801) into a unique component.
+    -   Hide [block appenders](https://github.com/WordPress/gutenberg/pull/16887).
+    -   [Expose the component](https://github.com/WordPress/gutenberg/pull/16834) in the block-editor module.
+    -   [Scale the preview content](https://github.com/WordPress/gutenberg/pull/16873) according to the width of the preview container.
 -   Improvements to the Modal component design:
-	-   Increase the [padding of the Modal component](https://github.com/WordPress/gutenberg/pull/16690).
-	-   Correct the [position of the close button](https://github.com/WordPress/gutenberg/pull/16883).
+    -   Increase the [padding of the Modal component](https://github.com/WordPress/gutenberg/pull/16690).
+    -   Correct the [position of the close button](https://github.com/WordPress/gutenberg/pull/16883).
 -   Use classnames instead of inline styles for text alignments in:
-	-   [Verse block](https://github.com/WordPress/gutenberg/pull/16777).
-	-   [Quote block](https://github.com/WordPress/gutenberg/pull/16779).
-	-   [Paragraph block](https://github.com/WordPress/gutenberg/pull/16794).
+    -   [Verse block](https://github.com/WordPress/gutenberg/pull/16777).
+    -   [Quote block](https://github.com/WordPress/gutenberg/pull/16779).
+    -   [Paragraph block](https://github.com/WordPress/gutenberg/pull/16794).
 -   Add a [purple color option](https://github.com/WordPress/gutenberg/pull/16833) to the default color palette.
 -   A11y: Visible [focus and active styles for Windows high contrast mode](https://github.com/WordPress/gutenberg/pull/16554).
 -   Improve the design of the [inline image controls](https://github.com/WordPress/gutenberg/pull/16793) in the Gallery block.
@@ -20893,15 +45675,15 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 ### Experiments
 
 -   Add a settings page to the plugin to [enable/disable experimental features](https://github.com/WordPress/gutenberg/pull/16626).
--   Add [padding when interacting with](https://github.com/WordPress/gutenberg/pull/14961)  [nested blocks](https://github.com/WordPress/gutenberg/pull/16820) to ease parent block selections.
+-   Add [padding when interacting with](https://github.com/WordPress/gutenberg/pull/14961) [nested blocks](https://github.com/WordPress/gutenberg/pull/16820) to ease parent block selections.
 -   Widgets Screen:
-	-   Prevent the [block toolbar from overlapping](https://github.com/WordPress/gutenberg/pull/16765) the widget area header.
-	-   Add the [BlockEditorKeyboardShortcuts](https://github.com/WordPress/gutenberg/pull/16972) component.
-	-   Fixed [block paddings](https://github.com/WordPress/gutenberg/pull/16944).
+    -   Prevent the [block toolbar from overlapping](https://github.com/WordPress/gutenberg/pull/16765) the widget area header.
+    -   Add the [BlockEditorKeyboardShortcuts](https://github.com/WordPress/gutenberg/pull/16972) component.
+    -   Fixed [block paddings](https://github.com/WordPress/gutenberg/pull/16944).
 
 ### New APIs
 
--   Support [Entities](https://github.com/WordPress/gutenberg/pull/16823)  [Local Edits](https://github.com/WordPress/gutenberg/pull/16867) in the Core Data Module.
+-   Support [Entities](https://github.com/WordPress/gutenberg/pull/16823) [Local Edits](https://github.com/WordPress/gutenberg/pull/16867) in the Core Data Module.
 -   Support [autosaving entities](https://github.com/WordPress/gutenberg/pull/16903) in the Core Data Module.
 -   Add support for [disabled dropdown items](https://github.com/WordPress/gutenberg/pull/15976) in SelectControl.
 -   Add [onFocusOutside](https://github.com/WordPress/gutenberg/pull/14851) prop as a replacement to Popover onClickOutside.
@@ -20924,7 +45706,7 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 -   [Link to the full size images](https://github.com/WordPress/gutenberg/pull/16011) in the Gallery block.
 -   Avoid leaking CSS transforms when [disabling block animations](https://github.com/WordPress/gutenberg/pull/16893).
 -   A11y: Avoid focusing the PostTitle component when [switching between code and visual editor](https://github.com/WordPress/gutenberg/pull/16874).
--   A11y: Add a [confirmation step to enable the Custom Fields](https://github.com/WordPress/gutenberg/pull/15688)  [option](https://github.com/WordPress/gutenberg/pull/16918).
+-   A11y: Add a [confirmation step to enable the Custom Fields](https://github.com/WordPress/gutenberg/pull/15688) [option](https://github.com/WordPress/gutenberg/pull/16918).
 -   [Disable block insertion buttons](https://github.com/WordPress/gutenberg/pull/15024) and [prevent moving blocks](https://github.com/WordPress/gutenberg/pull/14924) depending on the contextual restrictions (template locking and default block availability).
 -   Fix [Block manager not honoring the allowed_block_types](https://github.com/WordPress/gutenberg/pull/16586) hook.
 -   [Keep the Image block alt and caption attributes](https://github.com/WordPress/gutenberg/pull/16051) while uploading a new image.
@@ -20934,21 +45716,22 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 -   Make API Fetch [refresh nonces as soon as they expired](https://github.com/WordPress/gutenberg/pull/16683).
 
 ### Various
+
 -   GitHub actions:
-	-   [Automatically assign issues](https://github.com/WordPress/gutenberg/pull/16700) to PR authors.
-	-   Automatically assign the [First-time Contributor label](https://github.com/WordPress/gutenberg/pull/16762).
+    -   [Automatically assign issues](https://github.com/WordPress/gutenberg/pull/16700) to PR authors.
+    -   Automatically assign the [First-time Contributor label](https://github.com/WordPress/gutenberg/pull/16762).
 -   Avoid [unguarded getRangeAt usage](https://github.com/WordPress/gutenberg/pull/16212) and add eslint rule.
 -   Make the [e2e transforms tests](https://github.com/WordPress/gutenberg/pull/16739) more stable.
 -   [ESLint no-unused-vars-before-return rule](https://github.com/WordPress/gutenberg/pull/16799): Exempt destructuring only if to multiple properties.
 -   Output an [informational message for deprecations](https://github.com/WordPress/gutenberg/pull/16774) when no version provided.
 -   Refactor [registry selectors](https://github.com/WordPress/gutenberg/pull/16692) to allow calling them from other regular selectors.
 -   Bail early in the [deactivatePlugin e2e test utility](https://github.com/WordPress/gutenberg/pull/16816) if plugin is already inactive.
--   Fix the [CheckboxControl](https://github.com/WordPress/gutenberg/pull/16551)  [styles](https://github.com/WordPress/gutenberg/pull/16863) in a WordPress agnostic context.
+-   Fix the [CheckboxControl](https://github.com/WordPress/gutenberg/pull/16551) [styles](https://github.com/WordPress/gutenberg/pull/16863) in a WordPress agnostic context.
 -   Move the [auto-draft status and default title handling](https://github.com/WordPress/gutenberg/pull/16814) to the server.
 -   Code quality tweaks to the [Table block e2e tests](https://github.com/WordPress/gutenberg/pull/16872).
 -   [Fix JSDocs errors](https://github.com/WordPress/gutenberg/pull/16870) across the entire repository.
 -   [Upgrade Lerna](https://github.com/WordPress/gutenberg/pull/16919) to the latest version (3.16.4).
--   [Upgrade](https://github.com/WordPress/gutenberg/pull/16875)  [Puppeteer](https://github.com/WordPress/gutenberg/pull/16937) to the latest version (1.19.0).
+-   [Upgrade](https://github.com/WordPress/gutenberg/pull/16875) [Puppeteer](https://github.com/WordPress/gutenberg/pull/16937) to the latest version (1.19.0).
 -   [Upgrade ESLint](https://github.com/WordPress/gutenberg/pull/16921) to the latest version (6.1.0).
 -   Run [npm audit fix](https://github.com/WordPress/gutenberg/pull/16963) to fix dependency vulnerabilities.
 -   Audit and fix all [missing or obsolete package dependencies](https://github.com/WordPress/gutenberg/pull/16969).
@@ -20962,5076 +45745,5154 @@ Add knobs to the [ColorIndicator Story](https://github.com/WordPress/gutenberg/p
 ### Documentation
 
 -   Enhance the components Design Documentation and guidelines:
-	-   [DateTime](https://github.com/WordPress/gutenberg/pull/16757) component.
-	-   [Spinner](https://github.com/WordPress/gutenberg/pull/16760) component.
-	-   [ClipboardButton](https://github.com/WordPress/gutenberg/pull/16758) component.
--   Add section about adding [new dependencies to WordPress](https://github.com/WordPress/gutenberg/pull/16876)  [packages](https://github.com/WordPress/gutenberg/pull/16923).
+    -   [DateTime](https://github.com/WordPress/gutenberg/pull/16757) component.
+    -   [Spinner](https://github.com/WordPress/gutenberg/pull/16760) component.
+    -   [ClipboardButton](https://github.com/WordPress/gutenberg/pull/16758) component.
+-   Add section about adding [new dependencies to WordPress](https://github.com/WordPress/gutenberg/pull/16876) [packages](https://github.com/WordPress/gutenberg/pull/16923).
 -   Add [Figma ressources](https://github.com/WordPress/gutenberg/pull/16892) to the Design documentation.
 -   Document [URL inputs reusable components](https://github.com/WordPress/gutenberg/pull/16566).
 -   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/16852), [2](https://github.com/WordPress/gutenberg/pull/16832), [3](https://github.com/WordPress/gutenberg/pull/16908).
 
 ### Mobile
 
--   Refactor [BlockToolbar out of](https://github.com/WordPress/gutenberg/pull/16677)  [BlockList](https://github.com/WordPress/gutenberg/pull/16906).
+-   Refactor [BlockToolbar out of](https://github.com/WordPress/gutenberg/pull/16677) [BlockList](https://github.com/WordPress/gutenberg/pull/16906).
 -   Fix [toolbar bottom inset for iPhone X](https://github.com/WordPress/gutenberg/pull/16961) devices.
 
 = 6.2.0 =
 
+## Changelog
+
 ### Enhancements
-- Introduce [Link Target](https://github.com/WordPress/gutenberg/pull/10128)  [support](https://github.com/WordPress/gutenberg/pull/16497) in Button block.
-- Limit the [maximum height of the HTML block](https://github.com/WordPress/gutenberg/pull/16187).
-- Show the [preview button on mobile viewports](http://update/show-post-preview-button-on-mobile).
-- [Remove nested block restrictions](https://github.com/WordPress/gutenberg/pull/16751) from the Cover and Media & Text blocks.
-- A11y: Improving and standardize the [block styles focus and active states](https://github.com/WordPress/gutenberg/pull/16545).
-- Always [collapse block alignment toolbars](https://github.com/WordPress/gutenberg/pull/16557).
-
-### Bug Fixes
-- Fix using the [Classic block in nested contexts](https://github.com/WordPress/gutenberg/pull/16477).
-- Fix [lost nested blocks](https://github.com/WordPress/gutenberg/pull/14443) if the container block is missing.
-- Fix [pasting content into nested blocks](https://github.com/WordPress/gutenberg/pull/16717).
-- Fix [race condition in the block moving animation](https://github.com/WordPress/gutenberg/pull/16750) causing blocks to overlap.
-- A11y: Make the [Table block accessible](https://github.com/WordPress/gutenberg/pull/16324) at high zoom levels.
-- A11y: Change the [font size picker markup](https://github.com/WordPress/gutenberg/pull/16148) to use select.
-- A11y: Match the [primary button disabled](https://github.com/WordPress/gutenberg/pull/16103)  [state](https://github.com/WordPress/gutenberg/pull/16769) to Core's color contrast.
-- Fix the [z-index of the block toolbars](https://github.com/WordPress/gutenberg/pull/16530) for blocks following wide aligned blocks.
-- [Hide the columns count control](https://github.com/WordPress/gutenberg/pull/16476) when the columns block placeholder is shown.
-- [Prevent the block movers from disappearing](https://github.com/WordPress/gutenberg/pull/16579) on middle breakpoints for full/wide blocks.
-- [Slimmer top/bottom spacing inside notices](https://github.com/WordPress/gutenberg/pull/16589) shown outside the editor canvas.
-- Fix [converting video shortcode into video blocks](https://github.com/WordPress/gutenberg/pull/16588) when file type sources are used.
-- [Localize the read more link](https://github.com/WordPress/gutenberg/pull/16665) in the latest posts block.
-- Fix issue with [inconsistent nesting appender](https://github.com/WordPress/gutenberg/pull/16453).
-- Fix styling of [IconButton used in ButtonGroup](https://github.com/WordPress/gutenberg/pull/16686) components.
-- [Remove Change Permalinks button](https://github.com/WordPress/gutenberg/pull/16395) when permalink is not editable.
-- Fix [aspect ratio typo and recalculate padding](https://github.com/WordPress/gutenberg/pull/16573) in embed block.
-- Ensure [hour/minute fields are always shown left to right](https://github.com/WordPress/gutenberg/pull/16375) in RTL languages.
-- Refactor the empty line padding in the RichText component. This fixes [padding issues in the list block in Firefox](https://github.com/WordPress/gutenberg/pull/14846).
-- Improve the stability of the [RichText placeholder](https://github.com/WordPress/gutenberg/pull/16733).
-- Add [custom placeholder support](https://github.com/WordPress/gutenberg/pull/16783) for the button block.
-- Show the [image size labels on the block-based widget screen](https://github.com/WordPress/gutenberg/pull/16763).
+
+-   Introduce [Link Target](https://github.com/WordPress/gutenberg/pull/10128) [support](https://github.com/WordPress/gutenberg/pull/16497) in Button block.
+-   Limit the [maximum height of the HTML block](https://github.com/WordPress/gutenberg/pull/16187).
+-   Show the [preview button on mobile viewports](http://update/show-post-preview-button-on-mobile).
+-   [Remove nested block restrictions](https://github.com/WordPress/gutenberg/pull/16751) from the Cover and Media & Text blocks.
+-   A11y: Improving and standardize the [block styles focus and active states](https://github.com/WordPress/gutenberg/pull/16545).
+-   Always [collapse block alignment toolbars](https://github.com/WordPress/gutenberg/pull/16557).
+
+### Bug Fixes
+
+-   Fix using the [Classic block in nested contexts](https://github.com/WordPress/gutenberg/pull/16477).
+-   Fix [lost nested blocks](https://github.com/WordPress/gutenberg/pull/14443) if the container block is missing.
+-   Fix [pasting content into nested blocks](https://github.com/WordPress/gutenberg/pull/16717).
+-   Fix [race condition in the block moving animation](https://github.com/WordPress/gutenberg/pull/16750) causing blocks to overlap.
+-   A11y: Make the [Table block accessible](https://github.com/WordPress/gutenberg/pull/16324) at high zoom levels.
+-   A11y: Change the [font size picker markup](https://github.com/WordPress/gutenberg/pull/16148) to use select.
+-   A11y: Match the [primary button disabled](https://github.com/WordPress/gutenberg/pull/16103) [state](https://github.com/WordPress/gutenberg/pull/16769) to Core's color contrast.
+-   Fix the [z-index of the block toolbars](https://github.com/WordPress/gutenberg/pull/16530) for blocks following wide aligned blocks.
+-   [Hide the columns count control](https://github.com/WordPress/gutenberg/pull/16476) when the columns block placeholder is shown.
+-   [Prevent the block movers from disappearing](https://github.com/WordPress/gutenberg/pull/16579) on middle breakpoints for full/wide blocks.
+-   [Slimmer top/bottom spacing inside notices](https://github.com/WordPress/gutenberg/pull/16589) shown outside the editor canvas.
+-   Fix [converting video shortcode into video blocks](https://github.com/WordPress/gutenberg/pull/16588) when file type sources are used.
+-   [Localize the read more link](https://github.com/WordPress/gutenberg/pull/16665) in the latest posts block.
+-   Fix issue with [inconsistent nesting appender](https://github.com/WordPress/gutenberg/pull/16453).
+-   Fix styling of [IconButton used in ButtonGroup](https://github.com/WordPress/gutenberg/pull/16686) components.
+-   [Remove Change Permalinks button](https://github.com/WordPress/gutenberg/pull/16395) when permalink is not editable.
+-   Fix [aspect ratio typo and recalculate padding](https://github.com/WordPress/gutenberg/pull/16573) in embed block.
+-   Ensure [hour/minute fields are always shown left to right](https://github.com/WordPress/gutenberg/pull/16375) in RTL languages.
+-   Refactor the empty line padding in the RichText component. This fixes [padding issues in the list block in Firefox](https://github.com/WordPress/gutenberg/pull/14846).
+-   Improve the stability of the [RichText placeholder](https://github.com/WordPress/gutenberg/pull/16733).
+-   Add [custom placeholder support](https://github.com/WordPress/gutenberg/pull/16783) for the button block.
+-   Show the [image size labels on the block-based widget screen](https://github.com/WordPress/gutenberg/pull/16763).
 
 ### Documentation
-- Clarify the [block title and description conventions](https://github.com/WordPress/gutenberg/pull/16458).
-- Add [RichText component documentation](https://github.com/WordPress/gutenberg/pull/15956) to the Block Editor Handbook.
-- Improve the [repository triage docs](https://github.com/WordPress/gutenberg/pull/16234).
-- Adds documentation for the [PluginDocumentSettingPanel SlotFill](https://github.com/WordPress/gutenberg/pull/16620).
-- Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16438), [2](https://github.com/WordPress/gutenberg/pull/16455), [3](https://github.com/WordPress/gutenberg/pull/16468), [4](https://github.com/WordPress/gutenberg/pull/16456), [5](https://github.com/WordPress/gutenberg/pull/16470), [6](https://github.com/WordPress/gutenberg/pull/16469), [7](https://github.com/WordPress/gutenberg/pull/16526), [8](https://github.com/WordPress/gutenberg/pull/16531), [9](https://github.com/WordPress/gutenberg/pull/16528), [10](https://github.com/WordPress/gutenberg/pull/16610), [11](https://github.com/WordPress/gutenberg/pull/16450), [12](https://github.com/WordPress/gutenberg/pull/16756) , [13](https://github.com/WordPress/gutenberg/pull/16693), [14](https://github.com/WordPress/gutenberg/pull/16787).
+
+-   Clarify the [block title and description conventions](https://github.com/WordPress/gutenberg/pull/16458).
+-   Add [RichText component documentation](https://github.com/WordPress/gutenberg/pull/15956) to the Block Editor Handbook.
+-   Improve the [repository triage docs](https://github.com/WordPress/gutenberg/pull/16234).
+-   Adds documentation for the [PluginDocumentSettingPanel SlotFill](https://github.com/WordPress/gutenberg/pull/16620).
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16438), [2](https://github.com/WordPress/gutenberg/pull/16455), [3](https://github.com/WordPress/gutenberg/pull/16468), [4](https://github.com/WordPress/gutenberg/pull/16456), [5](https://github.com/WordPress/gutenberg/pull/16470), [6](https://github.com/WordPress/gutenberg/pull/16469), [7](https://github.com/WordPress/gutenberg/pull/16526), [8](https://github.com/WordPress/gutenberg/pull/16531), [9](https://github.com/WordPress/gutenberg/pull/16528), [10](https://github.com/WordPress/gutenberg/pull/16610), [11](https://github.com/WordPress/gutenberg/pull/16450), [12](https://github.com/WordPress/gutenberg/pull/16756) , [13](https://github.com/WordPress/gutenberg/pull/16693), [14](https://github.com/WordPress/gutenberg/pull/16787).
 
 ### Divers
-- Add a [simple API to register block style variations](https://github.com/WordPress/gutenberg/pull/16356) on the server.
-- Allow alternative blocks to be used to handle [Grouping interactions](https://github.com/WordPress/gutenberg/pull/16278).
-- Fix Travis instability by [waiting for MySQL availability](https://github.com/WordPress/gutenberg/pull/16461) before install the plugin.
-- Continue the [generic RichText component](https://github.com/WordPress/gutenberg/pull/16309) refactoring.
-- Remove the [usage of the editor store](https://github.com/WordPress/gutenberg/pull/16184) from the block editor module.
-- Update the [MilestoneIt GitHub action](https://github.com/WordPress/gutenberg/pull/16511) to read the plugin version from trunk.
-- Refactor the post meta block attributes to use a generic [custom sources mechanism](https://github.com/WordPress/gutenberg/pull/16402).
-- Expose [position prop in DotTip](https://github.com/WordPress/gutenberg/pull/14972) component.
-- Avoid docker [containers automatic restart](https://github.com/WordPress/gutenberg/pull/16547).
-- Bump [Lodash dependencies to 4.17.14](https://github.com/WordPress/gutenberg/pull/16567).
-- Fix the [build command on Windows](https://github.com/WordPress/gutenberg/pull/16029) environments.
-- Add allowedFormats and withoutInteractiveFormats props to the RichText component to [control the available formats per RichText](https://github.com/WordPress/gutenberg/pull/14542).
-- Remove [inappropriate executable permissions](https://github.com/WordPress/gutenberg/pull/16687) from core-data package files.
-- ESLint Plugin: [Exempt React hooks from no-unused-vars-before-return](https://github.com/WordPress/gutenberg/pull/16737).
-- Use React [Portal based slots for the block toolbar](https://github.com/WordPress/gutenberg/pull/16421).
-- Use [combineReducers utility from the data module](https://github.com/WordPress/gutenberg/pull/16752) instead of redux.
-- Support [hideLabelFromVision prop](https://github.com/WordPress/gutenberg/pull/16701) in all control components.
-- Adds missing [babel-jest and core-js](https://github.com/WordPress/gutenberg/pull/16259) dependencies to the scripts package.
+
+-   Add a [simple API to register block style variations](https://github.com/WordPress/gutenberg/pull/16356) on the server.
+-   Allow alternative blocks to be used to handle [Grouping interactions](https://github.com/WordPress/gutenberg/pull/16278).
+-   Fix Travis instability by [waiting for MySQL availability](https://github.com/WordPress/gutenberg/pull/16461) before install the plugin.
+-   Continue the [generic RichText component](https://github.com/WordPress/gutenberg/pull/16309) refactoring.
+-   Remove the [usage of the editor store](https://github.com/WordPress/gutenberg/pull/16184) from the block editor module.
+-   Update the [MilestoneIt GitHub action](https://github.com/WordPress/gutenberg/pull/16511) to read the plugin version from trunk.
+-   Refactor the post meta block attributes to use a generic [custom sources mechanism](https://github.com/WordPress/gutenberg/pull/16402).
+-   Expose [position prop in DotTip](https://github.com/WordPress/gutenberg/pull/14972) component.
+-   Avoid docker [containers automatic restart](https://github.com/WordPress/gutenberg/pull/16547).
+-   Bump [Lodash dependencies to 4.17.14](https://github.com/WordPress/gutenberg/pull/16567).
+-   Fix the [build command on Windows](https://github.com/WordPress/gutenberg/pull/16029) environments.
+-   Add allowedFormats and withoutInteractiveFormats props to the RichText component to [control the available formats per RichText](https://github.com/WordPress/gutenberg/pull/14542).
+-   Remove [inappropriate executable permissions](https://github.com/WordPress/gutenberg/pull/16687) from core-data package files.
+-   ESLint Plugin: [Exempt React hooks from no-unused-vars-before-return](https://github.com/WordPress/gutenberg/pull/16737).
+-   Use React [Portal based slots for the block toolbar](https://github.com/WordPress/gutenberg/pull/16421).
+-   Use [combineReducers utility from the data module](https://github.com/WordPress/gutenberg/pull/16752) instead of redux.
+-   Support [hideLabelFromVision prop](https://github.com/WordPress/gutenberg/pull/16701) in all control components.
+-   Adds missing [babel-jest and core-js](https://github.com/WordPress/gutenberg/pull/16259) dependencies to the scripts package.
 
 ### Mobile
-- [Tapping on an empty editor](https://github.com/WordPress/gutenberg/pull/16439) area creates a new paragraph block.
-- [Fix video uploads](https://github.com/WordPress/gutenberg/pull/16331) when the connection is lost and restored.
-- Track [unsupported block list](https://github.com/WordPress/gutenberg/pull/16434).
-- Insert [new block below the post title](https://github.com/WordPress/gutenberg/pull/16440) if the post title is selected.
-- Run the [mobile tests in the Gutenberg CI](https://github.com/WordPress/gutenberg/pull/16404) server.
-- Replace use of [deprecated componentWillReceiveProps](https://github.com/WordPress/gutenberg/pull/16577) in ImageEdit.
-- Show placeholder when [adding block from the post title](https://github.com/WordPress/gutenberg/pull/16539).
-- [Blur post title](https://github.com/WordPress/gutenberg/pull/16642) any time another block is selected.
-- Inserting block from the post title [replaces empty blocks](https://github.com/WordPress/gutenberg/pull/16574).
-- [Update Video caption placeholder color](https://github.com/WordPress/gutenberg/pull/16716) to match other placeholder text styles.
-- Move the [post title selection state](https://github.com/WordPress/gutenberg/pull/16704) to the store.
 
+-   [Tapping on an empty editor](https://github.com/WordPress/gutenberg/pull/16439) area creates a new paragraph block.
+-   [Fix video uploads](https://github.com/WordPress/gutenberg/pull/16331) when the connection is lost and restored.
+-   Track [unsupported block list](https://github.com/WordPress/gutenberg/pull/16434).
+-   Insert [new block below the post title](https://github.com/WordPress/gutenberg/pull/16440) if the post title is selected.
+-   Run the [mobile tests in the Gutenberg CI](https://github.com/WordPress/gutenberg/pull/16404) server.
+-   Replace use of [deprecated componentWillReceiveProps](https://github.com/WordPress/gutenberg/pull/16577) in ImageEdit.
+-   Show placeholder when [adding block from the post title](https://github.com/WordPress/gutenberg/pull/16539).
+-   [Blur post title](https://github.com/WordPress/gutenberg/pull/16642) any time another block is selected.
+-   Inserting block from the post title [replaces empty blocks](https://github.com/WordPress/gutenberg/pull/16574).
+-   [Update Video caption placeholder color](https://github.com/WordPress/gutenberg/pull/16716) to match other placeholder text styles.
+-   Move the [post title selection state](https://github.com/WordPress/gutenberg/pull/16704) to the store.
 
 = 6.1.1 =
 
+## Changelog
+
 ### Bug Fixes
 
-- Prevent automatic conversion of widgets to blocks when using the customizer.
-- Fix missing block properties on block registration filters used for the deprecated versions.
+-   Prevent automatic conversion of widgets to blocks when using the customizer.
+-   Fix missing block properties on block registration filters used for the deprecated versions.
 
 = 6.1.0 =
 
+## Changelog
+
 ### Enhancements
 
-*   [Introduce motion](https://github.com/WordPress/gutenberg/pull/16065)/animation when reordering/adding/removing blocks.
-*   Improve the [Image block link settings](https://github.com/WordPress/gutenberg/pull/15570) and move it to the block toolbar.
-*   Use a snackbar notice when clicking “[Copy all content](https://github.com/WordPress/gutenberg/pull/16265)”.
-*   Show [REST API error messages](https://github.com/WordPress/gutenberg/pull/15657) as notices.
-*   Clarify the wording of the view link in the [Permalink panel](https://github.com/WordPress/gutenberg/pull/16041).
-*   [Hide the “Copy all content”](https://github.com/WordPress/gutenberg/pull/16286) button if the post is empty.
-*   [Hide the ungroup action](https://github.com/WordPress/gutenberg/pull/16332) when there are no inner blocks.
-*   Use admin schemes dependent [focus state for primary buttons](https://github.com/WordPress/gutenberg/pull/16275).
-*   Add support for the [table cells scope attribute](https://github.com/WordPress/gutenberg/pull/16154) when pasting.
+-   [Introduce motion](https://github.com/WordPress/gutenberg/pull/16065)/animation when reordering/adding/removing blocks.
+-   Improve the [Image block link settings](https://github.com/WordPress/gutenberg/pull/15570) and move it to the block toolbar.
+-   Use a snackbar notice when clicking “[Copy all content](https://github.com/WordPress/gutenberg/pull/16265)”.
+-   Show [REST API error messages](https://github.com/WordPress/gutenberg/pull/15657) as notices.
+-   Clarify the wording of the view link in the [Permalink panel](https://github.com/WordPress/gutenberg/pull/16041).
+-   [Hide the “Copy all content”](https://github.com/WordPress/gutenberg/pull/16286) button if the post is empty.
+-   [Hide the ungroup action](https://github.com/WordPress/gutenberg/pull/16332) when there are no inner blocks.
+-   Use admin schemes dependent [focus state for primary buttons](https://github.com/WordPress/gutenberg/pull/16275).
+-   Add support for the [table cells scope attribute](https://github.com/WordPress/gutenberg/pull/16154) when pasting.
 
 ### Experiments
 
-*   Introduce a new [Customizer Panel](https://github.com/WordPress/gutenberg/pull/16204) to edit block-based widget areas.
-*   Add the [block inspector](https://github.com/WordPress/gutenberg/pull/16203) to the widgets screen.
-*   Add a [global inserter](http://add/inserter-widget-areas) to the widgets screen.
-
-### Bug Fixes
-
-*   Show the [pre-publish panel for contributors](https://github.com/WordPress/gutenberg/pull/16424).
-*   Fix the [save in progress state](https://github.com/WordPress/gutenberg/pull/16303) of the Publish/Update Button.
-*   Fix [adding/removing columns from the table block](https://github.com/WordPress/gutenberg/pull/16410) when using header/footer sections.
-*   Fix Image block not [preserving custom dimensions](https://github.com/WordPress/gutenberg/pull/16125) when opening the media library.
-*   [Resize Image blocks](https://github.com/WordPress/gutenberg/pull/16398) properly when changing the width from the inspector.
-*   Fix php error that can potentially be triggered by [gutenberg_is_block_editor](https://github.com/WordPress/gutenberg/pull/16201).
-*   Fix error when using the [“tag” block attribute source type](https://github.com/WordPress/gutenberg/pull/16290).
-*   Fix [chrome rendering bug](https://github.com/WordPress/gutenberg/pull/16325) happening when resizing images.
-*   Fix the [data-block style selector](https://github.com/WordPress/gutenberg/pull/16207) to avoid affecting third-party components.
-*   Allow the [columns layout options](https://github.com/WordPress/gutenberg/pull/16371) to wrap on small screens.
-*   Fix [isShallowEqual](https://github.com/WordPress/gutenberg/pull/16329) edge case when the second argument is undefined.
-*   Prevent the [disabled block switcher icon](https://github.com/WordPress/gutenberg/pull/16390) from becoming unreadable.
-*   Fix [Group Block deprecation](https://github.com/WordPress/gutenberg/pull/16348) and any deprecation relying on hooks.
-*   A11y:
-    *   Make the [top toolbar wrap](https://github.com/WordPress/gutenberg/pull/16250) at high zoom levels.
-    *   Fix the [sticky notices](https://github.com/WordPress/gutenberg/pull/16255) at high zoom levels.
+-   Introduce a new [Customizer Panel](https://github.com/WordPress/gutenberg/pull/16204) to edit block-based widget areas.
+-   Add the [block inspector](https://github.com/WordPress/gutenberg/pull/16203) to the widgets screen.
+-   Add a [global inserter](http://add/inserter-widget-areas) to the widgets screen.
+
+### Bug Fixes
+
+-   Show the [pre-publish panel for contributors](https://github.com/WordPress/gutenberg/pull/16424).
+-   Fix the [save in progress state](https://github.com/WordPress/gutenberg/pull/16303) of the Publish/Update Button.
+-   Fix [adding/removing columns from the table block](https://github.com/WordPress/gutenberg/pull/16410) when using header/footer sections.
+-   Fix Image block not [preserving custom dimensions](https://github.com/WordPress/gutenberg/pull/16125) when opening the media library.
+-   [Resize Image blocks](https://github.com/WordPress/gutenberg/pull/16398) properly when changing the width from the inspector.
+-   Fix php error that can potentially be triggered by [gutenberg_is_block_editor](https://github.com/WordPress/gutenberg/pull/16201).
+-   Fix error when using the [“tag” block attribute source type](https://github.com/WordPress/gutenberg/pull/16290).
+-   Fix [chrome rendering bug](https://github.com/WordPress/gutenberg/pull/16325) happening when resizing images.
+-   Fix the [data-block style selector](https://github.com/WordPress/gutenberg/pull/16207) to avoid affecting third-party components.
+-   Allow the [columns layout options](https://github.com/WordPress/gutenberg/pull/16371) to wrap on small screens.
+-   Fix [isShallowEqual](https://github.com/WordPress/gutenberg/pull/16329) edge case when the second argument is undefined.
+-   Prevent the [disabled block switcher icon](https://github.com/WordPress/gutenberg/pull/16390) from becoming unreadable.
+-   Fix [Group Block deprecation](https://github.com/WordPress/gutenberg/pull/16348) and any deprecation relying on hooks.
+-   A11y:
+    -   Make the [top toolbar wrap](https://github.com/WordPress/gutenberg/pull/16250) at high zoom levels.
+    -   Fix the [sticky notices](https://github.com/WordPress/gutenberg/pull/16255) at high zoom levels.
 
 ### Performance
 
-*   Improve the performance of the [i18n Tannin library](https://github.com/WordPress/gutenberg/pull/16337).
-*   Track the [block parent](https://github.com/WordPress/gutenberg/pull/16392) in the state to optimize hierarchy selectors.
-*   Add a [cache key](https://github.com/WordPress/gutenberg/pull/16407) tracked in state to optimize the getBlock selector.
+-   Improve the performance of the [i18n Tannin library](https://github.com/WordPress/gutenberg/pull/16337).
+-   Track the [block parent](https://github.com/WordPress/gutenberg/pull/16392) in the state to optimize hierarchy selectors.
+-   Add a [cache key](https://github.com/WordPress/gutenberg/pull/16407) tracked in state to optimize the getBlock selector.
 
 ### Documentation
 
-*   Document the [plugin release tool](https://github.com/WordPress/gutenberg/pull/16366).
-*   Document the use-cases of the [dynamic blocks](https://github.com/WordPress/gutenberg/pull/16228).
-*   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16267), [2](https://github.com/WordPress/gutenberg/pull/16153), [3](https://github.com/WordPress/gutenberg/pull/16170), [4](https://github.com/WordPress/gutenberg/pull/16312), [5](https://github.com/WordPress/gutenberg/pull/16320), [6](https://github.com/WordPress/gutenberg/pull/16138).
+-   Document the [plugin release tool](https://github.com/WordPress/gutenberg/pull/16366).
+-   Document the use-cases of the [dynamic blocks](https://github.com/WordPress/gutenberg/pull/16228).
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16267), [2](https://github.com/WordPress/gutenberg/pull/16153), [3](https://github.com/WordPress/gutenberg/pull/16170), [4](https://github.com/WordPress/gutenberg/pull/16312), [5](https://github.com/WordPress/gutenberg/pull/16320), [6](https://github.com/WordPress/gutenberg/pull/16138).
 
 ### Various
 
-*   Introduce a [PluginDocumentSettingPanel](https://github.com/WordPress/gutenberg/pull/13361) slot to allow third-party plugins to add panels to the document sidebar tab.
-*   [Deploy the playground](https://github.com/WordPress/gutenberg/pull/16345) automatically to GitHub Pages. [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)
-*   Extract a [generic RichText](http://try/move-rich-text) [component](https://github.com/WordPress/gutenberg/pull/16299) to the @wordpress/rich-text package.
-*   Refactor the [editor initialization](https://github.com/WordPress/gutenberg/pull/15444) to rely on a component.
-*   Remove unused internal [asType utility](https://github.com/WordPress/gutenberg/pull/16291).
-*   Fix [react-no-unsafe-timeout ESlint rule](https://github.com/WordPress/gutenberg/pull/16292) when using variable assignment.
-*   Add support for [watching block.json files](https://github.com/WordPress/gutenberg/pull/16150) when running “npm run dev”.
-*   Remove: experimental status from [blockEditor.transformStyles](https://github.com/WordPress/gutenberg/pull/16126).
-*   Upgrade [PHPCS composer dependencies](https://github.com/WordPress/gutenberg/pull/16387) and use [strict comparisons](https://github.com/WordPress/gutenberg/pull/16381) to align with the PHPCS guidelines.
-*   Fix a small console warning when running [performance tests](https://github.com/WordPress/gutenberg/pull/16409).
+-   Introduce a [PluginDocumentSettingPanel](https://github.com/WordPress/gutenberg/pull/13361) slot to allow third-party plugins to add panels to the document sidebar tab.
+-   [Deploy the playground](https://github.com/WordPress/gutenberg/pull/16345) automatically to GitHub Pages. [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)
+-   Extract a [generic RichText](http://try/move-rich-text) [component](https://github.com/WordPress/gutenberg/pull/16299) to the @wordpress/rich-text package.
+-   Refactor the [editor initialization](https://github.com/WordPress/gutenberg/pull/15444) to rely on a component.
+-   Remove unused internal [asType utility](https://github.com/WordPress/gutenberg/pull/16291).
+-   Fix [react-no-unsafe-timeout ESlint rule](https://github.com/WordPress/gutenberg/pull/16292) when using variable assignment.
+-   Add support for [watching block.json files](https://github.com/WordPress/gutenberg/pull/16150) when running “npm run dev”.
+-   Remove: experimental status from [blockEditor.transformStyles](https://github.com/WordPress/gutenberg/pull/16126).
+-   Upgrade [PHPCS composer dependencies](https://github.com/WordPress/gutenberg/pull/16387) and use [strict comparisons](https://github.com/WordPress/gutenberg/pull/16381) to align with the PHPCS guidelines.
+-   Fix a small console warning when running [performance tests](https://github.com/WordPress/gutenberg/pull/16409).
 
 ### Mobile
 
-*   Correct the position of the [block insertion indicator](https://github.com/WordPress/gutenberg/pull/16272).
-*   Unify [Editor and Layout](https://github.com/WordPress/gutenberg/pull/16260) components with the web component hierarchy.
-
+-   Correct the position of the [block insertion indicator](https://github.com/WordPress/gutenberg/pull/16272).
+-   Unify [Editor and Layout](https://github.com/WordPress/gutenberg/pull/16260) components with the web component hierarchy.
 
 = 6.0.0 =
 
+## Changelog
+
 ### Features
 
-* Support choosing a [pre-defined layout for the Columns block](https://github.com/WordPress/gutenberg/pull/16129). 
+-   Support choosing a [pre-defined layout for the Columns block](https://github.com/WordPress/gutenberg/pull/16129).
 
 ### Enhancements
 
-* Add [Snackbar notices](https://github.com/WordPress/gutenberg/pull/16020) support to the widgets screen.
-* Add an [inner container to the Group](https://github.com/WordPress/gutenberg/pull/15210) [block](https://github.com/WordPress/gutenberg/pull/16202) to simplify theme styling.
-* Avoid stacking successive [MediaPlaceholder errors](https://github.com/WordPress/gutenberg/pull/14721).
-* Adjust the [DatePicker margins](https://github.com/WordPress/gutenberg/pull/16097).
-* Update the [Tag Cloud block](https://github.com/WordPress/gutenberg/pull/16098) [copy](https://github.com/WordPress/gutenberg/pull/16107) when no terms are found.
-* Add descriptive text and a link to [documentation in embed blocks](https://github.com/WordPress/gutenberg/pull/16101).
-* Improve placeholder text [phrasing for media blocks](https://github.com/WordPress/gutenberg/pull/16135).
-* Use classnames for the [text alignments in the heading block](https://github.com/WordPress/gutenberg/pull/16035).
-* Make the [inserter category icons grayscale](https://github.com/WordPress/gutenberg/pull/16163).
-* A11y: Make the [modal overlay scrim darker](https://github.com/WordPress/gutenberg/pull/15974).
-
-### Bug Fixes
-
-* Fix [warning messages triggered by the Group block](https://github.com/WordPress/gutenberg/pull/16096) icons.
-* Fix [horizontal scrollbar on full-wide blocks](https://github.com/WordPress/gutenberg/pull/16085) with nesting.
-* A11y: 
-  * Re-enable the [menu item hover state](https://github.com/WordPress/gutenberg/pull/16168) on small screens.
-  * Correct text zoom issue in the [Content Structure popover](https://github.com/WordPress/gutenberg/pull/15984).
-* Fix the [Popovers position](https://github.com/WordPress/gutenberg/pull/15949) in the widgets screen.
-* Fix the behavior of the [block toolbars in the widgets screen](https://github.com/WordPress/gutenberg/pull/15470).
-* Fix the editor in IE11 (use the [CJS version of react-spring](https://github.com/WordPress/gutenberg/pull/16196)).
-* Fix formatting of the [validation error messages](https://github.com/WordPress/gutenberg/pull/16173) in the console.
-* Fix breakage when the [CPT doesn’t support title](https://github.com/WordPress/gutenberg/pull/16236).
+-   Add [Snackbar notices](https://github.com/WordPress/gutenberg/pull/16020) support to the widgets screen.
+-   Add an [inner container to the Group](https://github.com/WordPress/gutenberg/pull/15210) [block](https://github.com/WordPress/gutenberg/pull/16202) to simplify theme styling.
+-   Avoid stacking successive [MediaPlaceholder errors](https://github.com/WordPress/gutenberg/pull/14721).
+-   Adjust the [DatePicker margins](https://github.com/WordPress/gutenberg/pull/16097).
+-   Update the [Tag Cloud block](https://github.com/WordPress/gutenberg/pull/16098) [copy](https://github.com/WordPress/gutenberg/pull/16107) when no terms are found.
+-   Add descriptive text and a link to [documentation in embed blocks](https://github.com/WordPress/gutenberg/pull/16101).
+-   Improve placeholder text [phrasing for media blocks](https://github.com/WordPress/gutenberg/pull/16135).
+-   Use classnames for the [text alignments in the heading block](https://github.com/WordPress/gutenberg/pull/16035).
+-   Make the [inserter category icons grayscale](https://github.com/WordPress/gutenberg/pull/16163).
+-   A11y: Make the [modal overlay scrim darker](https://github.com/WordPress/gutenberg/pull/15974).
+
+### Bug Fixes
+
+-   Fix [warning messages triggered by the Group block](https://github.com/WordPress/gutenberg/pull/16096) icons.
+-   Fix [horizontal scrollbar on full-wide blocks](https://github.com/WordPress/gutenberg/pull/16085) with nesting.
+-   A11y:
+    -   Re-enable the [menu item hover state](https://github.com/WordPress/gutenberg/pull/16168) on small screens.
+    -   Correct text zoom issue in the [Content Structure popover](https://github.com/WordPress/gutenberg/pull/15984).
+-   Fix the [Popovers position](https://github.com/WordPress/gutenberg/pull/15949) in the widgets screen.
+-   Fix the behavior of the [block toolbars in the widgets screen](https://github.com/WordPress/gutenberg/pull/15470).
+-   Fix the editor in IE11 (use the [CJS version of react-spring](https://github.com/WordPress/gutenberg/pull/16196)).
+-   Fix formatting of the [validation error messages](https://github.com/WordPress/gutenberg/pull/16173) in the console.
+-   Fix breakage when the [CPT doesn’t support title](https://github.com/WordPress/gutenberg/pull/16236).
 
 ### Various
 
-* Document and simplify the [multi-entrypoints support](https://github.com/WordPress/gutenberg/pull/15982) in the @wordpress/scripts package. 
-* Create sub-registry automatically when using [EditorProvider](https://github.com/WordPress/gutenberg/pull/15989).
-* Use classnames utility instead of concatenating [classnames in the TabPanel](https://github.com/WordPress/gutenberg/pull/16081) component.
-* Remove the default value for the [required onRequestClose prop](https://github.com/WordPress/gutenberg/pull/16074) in the Modal component.
-* Remove the [editor package dependency](https://github.com/WordPress/gutenberg/pull/15548) from the media blocks.
-* Fix the [playground build](https://github.com/WordPress/gutenberg/pull/15947) script.
-* Fix the [GitHub action assigning milestones](https://github.com/WordPress/gutenberg/pull/16084).
-* Fix [naming conventions](https://github.com/WordPress/gutenberg/pull/16091) for function containing CLI keyword.
-* Fix the [Travis build artifacts job](http://update/build-artifacts-npm-install) to use a full npm install while building.
-* Make [Calendar block resilient](https://github.com/WordPress/gutenberg/pull/16161) to the editor module not being present.
-* Ensure the Snackbar component is only used with a [single action button](https://github.com/WordPress/gutenberg/pull/16095).
-* Remove [SlotFillProvider and DropZoneProvider](https://github.com/WordPress/gutenberg/pull/15988) from the BlockEditorProvider.
-* Add the initial version of the [Block Registration RFC](https://github.com/WordPress/gutenberg/pull/13693).
-* Add [popoverProps prop to the Dropdown](https://github.com/WordPress/gutenberg/pull/14867) component.
-* Update [Image Block's image classes](https://github.com/WordPress/gutenberg/pull/15464) with dimensions.
-* Support registering [custom grouping blocks](https://github.com/WordPress/gutenberg/pull/15774).
-* Fix h1 heading typo so [h1 is same size as title](https://github.com/WordPress/gutenberg/pull/16253).
-* Remove the [custom class support from the legacy widget](https://github.com/WordPress/gutenberg/pull/16231) block.
+-   Document and simplify the [multi-entrypoints support](https://github.com/WordPress/gutenberg/pull/15982) in the @wordpress/scripts package.
+-   Create sub-registry automatically when using [EditorProvider](https://github.com/WordPress/gutenberg/pull/15989).
+-   Use classnames utility instead of concatenating [classnames in the TabPanel](https://github.com/WordPress/gutenberg/pull/16081) component.
+-   Remove the default value for the [required onRequestClose prop](https://github.com/WordPress/gutenberg/pull/16074) in the Modal component.
+-   Remove the [editor package dependency](https://github.com/WordPress/gutenberg/pull/15548) from the media blocks.
+-   Fix the [playground build](https://github.com/WordPress/gutenberg/pull/15947) script.
+-   Fix the [GitHub action assigning milestones](https://github.com/WordPress/gutenberg/pull/16084).
+-   Fix [naming conventions](https://github.com/WordPress/gutenberg/pull/16091) for function containing CLI keyword.
+-   Fix the [Travis build artifacts job](http://update/build-artifacts-npm-install) to use a full npm install while building.
+-   Make [Calendar block resilient](https://github.com/WordPress/gutenberg/pull/16161) to the editor module not being present.
+-   Ensure the Snackbar component is only used with a [single action button](https://github.com/WordPress/gutenberg/pull/16095).
+-   Remove [SlotFillProvider and DropZoneProvider](https://github.com/WordPress/gutenberg/pull/15988) from the BlockEditorProvider.
+-   Add the initial version of the [Block Registration RFC](https://github.com/WordPress/gutenberg/pull/13693).
+-   Add [popoverProps prop to the Dropdown](https://github.com/WordPress/gutenberg/pull/14867) component.
+-   Update [Image Block's image classes](https://github.com/WordPress/gutenberg/pull/15464) with dimensions.
+-   Support registering [custom grouping blocks](https://github.com/WordPress/gutenberg/pull/15774).
+-   Fix h1 heading typo so [h1 is same size as title](https://github.com/WordPress/gutenberg/pull/16253).
+-   Remove the [custom class support from the legacy widget](https://github.com/WordPress/gutenberg/pull/16231) block.
 
 ### Documentation
 
-* Prefer [register\_post\_meta](https://github.com/WordPress/gutenberg/pull/16032) over register\_meta.
-* Add [mention of Figma](https://github.com/WordPress/gutenberg/pull/16140) to the design contributing docs.
-* Add [supported attribute types](https://github.com/WordPress/gutenberg/pull/16220) for the Blocks API.
-* Enhance the [Annotations API](https://github.com/WordPress/gutenberg/pull/16233) documentation.
-* Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16083), [2](https://github.com/WordPress/gutenberg/pull/16073), [3](https://github.com/WordPress/gutenberg/pull/16087), [4](https://github.com/WordPress/gutenberg/pull/16102), [5](https://github.com/WordPress/gutenberg/pull/16145), [6](https://github.com/WordPress/gutenberg/pull/16143), [7](https://github.com/WordPress/gutenberg/pull/16144), [8](https://github.com/WordPress/gutenberg/pull/16232), [9](https://github.com/WordPress/gutenberg/pull/16121), [10](https://github.com/WordPress/gutenberg/pull/16235), [11](https://github.com/WordPress/gutenberg/pull/15394).
+-   Prefer [register_post_meta](https://github.com/WordPress/gutenberg/pull/16032) over register_meta.
+-   Add [mention of Figma](https://github.com/WordPress/gutenberg/pull/16140) to the design contributing docs.
+-   Add [supported attribute types](https://github.com/WordPress/gutenberg/pull/16220) for the Blocks API.
+-   Enhance the [Annotations API](https://github.com/WordPress/gutenberg/pull/16233) documentation.
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/16083), [2](https://github.com/WordPress/gutenberg/pull/16073), [3](https://github.com/WordPress/gutenberg/pull/16087), [4](https://github.com/WordPress/gutenberg/pull/16102), [5](https://github.com/WordPress/gutenberg/pull/16145), [6](https://github.com/WordPress/gutenberg/pull/16143), [7](https://github.com/WordPress/gutenberg/pull/16144), [8](https://github.com/WordPress/gutenberg/pull/16232), [9](https://github.com/WordPress/gutenberg/pull/16121), [10](https://github.com/WordPress/gutenberg/pull/16235), [11](https://github.com/WordPress/gutenberg/pull/15394).
 
 ### Mobile
 
-* Fix [multiline Image block captions](https://github.com/WordPress/gutenberg/pull/16071) in iOS.
-* Avoid unnecessary [div elements in the content of Quote](https://github.com/WordPress/gutenberg/pull/16072) blocks.
-* Update the default [colors used in the RichText](https://github.com/WordPress/gutenberg/pull/16016) component.
-* Fix [pasting text on Post Title](https://github.com/WordPress/gutenberg/pull/16116).
-* Unify the web and mobile components hierarchy:
-  * [BlockPicker and Inserter](https://github.com/WordPress/gutenberg/pull/16114).
-  * [BlockToolbar](https://github.com/WordPress/gutenberg/pull/16213).
-  * [BlockMobileToolbar](https://github.com/WordPress/gutenberg/pull/16177).
-  * [BlockListBlock](https://github.com/WordPress/gutenberg/pull/16223).
-  * [BlockList](https://github.com/WordPress/gutenberg/pull/16239).
-* Add native component [HTMLTextInput](https://github.com/WordPress/gutenberg/pull/16226).
-* Update the video player to [open the URL by browser](https://github.com/WordPress/gutenberg/pull/16089) on Android.
-* Re-enable the [Video block on Android](https://github.com/WordPress/gutenberg/pull/16215).
+-   Fix [multiline Image block captions](https://github.com/WordPress/gutenberg/pull/16071) in iOS.
+-   Avoid unnecessary [div elements in the content of Quote](https://github.com/WordPress/gutenberg/pull/16072) blocks.
+-   Update the default [colors used in the RichText](https://github.com/WordPress/gutenberg/pull/16016) component.
+-   Fix [pasting text on Post Title](https://github.com/WordPress/gutenberg/pull/16116).
+-   Unify the web and mobile components hierarchy:
+    -   [BlockPicker and Inserter](https://github.com/WordPress/gutenberg/pull/16114).
+    -   [BlockToolbar](https://github.com/WordPress/gutenberg/pull/16213).
+    -   [BlockMobileToolbar](https://github.com/WordPress/gutenberg/pull/16177).
+    -   [BlockListBlock](https://github.com/WordPress/gutenberg/pull/16223).
+    -   [BlockList](https://github.com/WordPress/gutenberg/pull/16239).
+-   Add native component [HTMLTextInput](https://github.com/WordPress/gutenberg/pull/16226).
+-   Update the video player to [open the URL by browser](https://github.com/WordPress/gutenberg/pull/16089) on Android.
+-   Re-enable the [Video block on Android](https://github.com/WordPress/gutenberg/pull/16215).
 
 = 5.9.2 =
 
+## Changelog
+
 ### Bug Fixes
 
- - Fix Regression for blocks using InnerBlocks.Content from the editor package (support forwardRef components in the block serializer).
+-   Fix Regression for blocks using InnerBlocks.Content from the editor package (support forwardRef components in the block serializer).
 
 = 5.9.1 =
 
+## Changelog
+
 ### Bug Fixes
 
-* Fix the issue where [statics for deprecated components were not hoisted](https://github.com/WordPress/gutenberg/pull/16152)
+-   Fix the issue where [statics for deprecated components were not hoisted](https://github.com/WordPress/gutenberg/pull/16152)
 
 = 5.9.0 =
 
+## Changelog
+
 ### Features
 
-*   Allow [grouping/ungrouping blocks](https://github.com/WordPress/gutenberg/pull/14908) using the Group block.
+-   Allow [grouping/ungrouping blocks](https://github.com/WordPress/gutenberg/pull/14908) using the Group block.
 
 ### Enhancements
 
-*   Improve the selection of inner blocks: [Clickthrough selection](https://github.com/WordPress/gutenberg/pull/15537).
-*   Introduce the [snackbar notices](https://github.com/WordPress/gutenberg/pull/15594) and use them for the save success notices.
-*   Use [consistent colors in the different menus](https://github.com/WordPress/gutenberg/pull/15531) items.
-*   [Consolidate the different dropdown menus](https://github.com/WordPress/gutenberg/pull/14843) to use the DropdownMenu component.
-*   Expand the [**prefered-reduced-motion** support](https://github.com/WordPress/gutenberg/pull/15850) to all the animations.
-*   Add a subtle [animation to the snackbar](https://github.com/WordPress/gutenberg/pull/15908) notices and provide new React hooks for media queries.
-*   Redesign the [Table block placeholder](https://github.com/WordPress/gutenberg/pull/15903).
-*   [Always show the side inserter](https://github.com/WordPress/gutenberg/pull/15864) on the last empty paragraph block.
-*   Widgets Screen:
-    *   Add the [in progress state](https://github.com/WordPress/gutenberg/pull/16019) to the save button.
-    *   Add the RichText [Format Library](https://github.com/WordPress/gutenberg/pull/15948).
-*   Improve the [Group and Ungroup icons](https://github.com/WordPress/gutenberg/pull/16001).
-*   The [Spacer block clears all](https://github.com/WordPress/gutenberg/pull/15874) the previous floated blocks.
-
-### Bug Fixes
-
-*   [Focus the Button block’s input](https://github.com/WordPress/gutenberg/pull/15951) upon creation.
-*   Prevent [Embed block crashes](https://github.com/WordPress/gutenberg/pull/15866) when used inside locked containers.
-*   Properly [center the default appender placeholder](https://github.com/WordPress/gutenberg/pull/15868).
-*   Correct [default appender icon transition jump](https://github.com/WordPress/gutenberg/pull/15892) in Safari.
-*   Only apply [appender margins](https://github.com/WordPress/gutenberg/pull/15888) when the appender is inside of a block.
-*   Avoid loading [reusable blocks editor styles](https://github.com/WordPress/gutenberg/pull/14607) in the frontend.
-*   Correct [position of the "Remove Featured Image" button](https://github.com/WordPress/gutenberg/pull/15928) on small screens.
-*   Allow the [legacy widget block to render core widgets](https://github.com/WordPress/gutenberg/pull/15396).
-*   A11y:
-    *   Fix [wrong tab order in the data picker](https://github.com/WordPress/gutenberg/pull/15936) component.
-    *   Remove the [access keyboard shortcuts](https://github.com/WordPress/gutenberg/pull/15191) from the Format Library.
-*   Bail early in [createUpgradedEmbedBlock](https://github.com/WordPress/gutenberg/pull/15885) for invalid block types.
-*   Fix [DateTimePicker styles](https://github.com/WordPress/gutenberg/pull/15389) when used outside the WordPress context.
-*   Prevent the [Spacer block from being deselected](https://github.com/WordPress/gutenberg/pull/15884) when resized.
-*   Remove the [word breaking from the Media & Text](https://github.com/WordPress/gutenberg/pull/15871) block.
-*   [Keep the seconds value untouched](https://github.com/WordPress/gutenberg/pull/15495) when editing dates using the DateTimePicker component.
-*   Fix [tooltips styles](https://github.com/WordPress/gutenberg/pull/16043) specificity.
-*   Fix php errors happening when [calling get_current_screen](https://github.com/WordPress/gutenberg/pull/15983).
+-   Improve the selection of inner blocks: [Clickthrough selection](https://github.com/WordPress/gutenberg/pull/15537).
+-   Introduce the [snackbar notices](https://github.com/WordPress/gutenberg/pull/15594) and use them for the save success notices.
+-   Use [consistent colors in the different menus](https://github.com/WordPress/gutenberg/pull/15531) items.
+-   [Consolidate the different dropdown menus](https://github.com/WordPress/gutenberg/pull/14843) to use the DropdownMenu component.
+-   Expand the [**prefered-reduced-motion** support](https://github.com/WordPress/gutenberg/pull/15850) to all the animations.
+-   Add a subtle [animation to the snackbar](https://github.com/WordPress/gutenberg/pull/15908) notices and provide new React hooks for media queries.
+-   Redesign the [Table block placeholder](https://github.com/WordPress/gutenberg/pull/15903).
+-   [Always show the side inserter](https://github.com/WordPress/gutenberg/pull/15864) on the last empty paragraph block.
+-   Widgets Screen:
+    -   Add the [in progress state](https://github.com/WordPress/gutenberg/pull/16019) to the save button.
+    -   Add the RichText [Format Library](https://github.com/WordPress/gutenberg/pull/15948).
+-   Improve the [Group and Ungroup icons](https://github.com/WordPress/gutenberg/pull/16001).
+-   The [Spacer block clears all](https://github.com/WordPress/gutenberg/pull/15874) the previous floated blocks.
+
+### Bug Fixes
+
+-   [Focus the Button block’s input](https://github.com/WordPress/gutenberg/pull/15951) upon creation.
+-   Prevent [Embed block crashes](https://github.com/WordPress/gutenberg/pull/15866) when used inside locked containers.
+-   Properly [center the default appender placeholder](https://github.com/WordPress/gutenberg/pull/15868).
+-   Correct [default appender icon transition jump](https://github.com/WordPress/gutenberg/pull/15892) in Safari.
+-   Only apply [appender margins](https://github.com/WordPress/gutenberg/pull/15888) when the appender is inside of a block.
+-   Avoid loading [reusable blocks editor styles](https://github.com/WordPress/gutenberg/pull/14607) in the frontend.
+-   Correct [position of the "Remove Featured Image" button](https://github.com/WordPress/gutenberg/pull/15928) on small screens.
+-   Allow the [legacy widget block to render core widgets](https://github.com/WordPress/gutenberg/pull/15396).
+-   A11y:
+    -   Fix [wrong tab order in the data picker](https://github.com/WordPress/gutenberg/pull/15936) component.
+    -   Remove the [access keyboard shortcuts](https://github.com/WordPress/gutenberg/pull/15191) from the Format Library.
+-   Bail early in [createUpgradedEmbedBlock](https://github.com/WordPress/gutenberg/pull/15885) for invalid block types.
+-   Fix [DateTimePicker styles](https://github.com/WordPress/gutenberg/pull/15389) when used outside the WordPress context.
+-   Prevent the [Spacer block from being deselected](https://github.com/WordPress/gutenberg/pull/15884) when resized.
+-   Remove the [word breaking from the Media & Text](https://github.com/WordPress/gutenberg/pull/15871) block.
+-   [Keep the seconds value untouched](https://github.com/WordPress/gutenberg/pull/15495) when editing dates using the DateTimePicker component.
+-   Fix [tooltips styles](https://github.com/WordPress/gutenberg/pull/16043) specificity.
+-   Fix php errors happening when [calling get_current_screen](https://github.com/WordPress/gutenberg/pull/15983).
 
 ### Various
 
-*   Introduce [useSelect](https://github.com/WordPress/gutenberg/pull/15737) and [useDispatch](https://github.com/WordPress/gutenberg/pull/15896) hooks to the data module.
-*   Adding embedded [performance tests](https://github.com/WordPress/gutenberg/pull/14506) to the repository.
-*   Support the [full plugin release process](https://github.com/WordPress/gutenberg/pull/15848) in the automated release tool.
-*   Speed up the [packages build](https://github.com/WordPress/gutenberg/pull/15230) [tool](https://github.com/WordPress/gutenberg/pull/15920) script and the [Gutenberg plugin build](https://github.com/WordPress/gutenberg/pull/15226) config.
-*   Extract media upload logic part into a new [@wordpress/media-utils package](https://github.com/WordPress/gutenberg/pull/15521).
-*   Introduce [**Milestone-It** GitHub Action](https://github.com/WordPress/gutenberg/pull/15826) to auto-assign milestones to merged PRs.
-*   Move the [transformStyles function](https://github.com/WordPress/gutenberg/pull/15572) to the block-editor package to use in the widgets screen.
-*   Allow plugin authors to [override the default anchor attribute](https://github.com/WordPress/gutenberg/pull/15959) definition.
-*   Add [overlayColor classname to cover blocks](https://github.com/WordPress/gutenberg/pull/15939) editor markup.
-*   [Skip downloading chromium](https://github.com/WordPress/gutenberg/pull/15886) when building the plugin zip.
-*   Add an [e2e test to check the heading colors](https://github.com/WordPress/gutenberg/pull/15784) [feature](https://github.com/WordPress/gutenberg/pull/15917).
-*   [Lint the ESlint config file](https://github.com/WordPress/gutenberg/pull/15887) (meta).
-*   Fix [i18n ESlint rules](https://github.com/WordPress/gutenberg/pull/15839) and use them in the [Gutenberg setup](https://github.com/WordPress/gutenberg/pull/15877).
-*   Fix error in the [plugin release tool](https://github.com/WordPress/gutenberg/pull/15840) when switching branches.
-*   Remove [unused stylesheet file](https://github.com/WordPress/gutenberg/pull/15845).
-*   Improve the setup of the WordPress packages [package.json files](https://github.com/WordPress/gutenberg/pull/15879).
-*   Remove the use of [popular plugins in e2e tests](https://github.com/WordPress/gutenberg/pull/15940).
-*   Ignore [linting files located in build](https://github.com/WordPress/gutenberg/pull/15977) folders by default.
-*   Add [default file patterns for the lint command](https://github.com/WordPress/gutenberg/pull/15890) of @wordpress/scripts.
-*   Extract the [ServerSideRender](https://github.com/WordPress/gutenberg/pull/15635) component to an independent package.
-*   Refactor the [HoverArea component as a React Hook](https://github.com/WordPress/gutenberg/pull/15038) instead.
-*   Remove [useless dependency](https://github.com/WordPress/gutenberg/pull/16034) from the @wordpress/edit-post package.
-*   [Deprecate components/selectors and actions](https://github.com/WordPress/gutenberg/pull/15770) moved to the editor package.
-*   Update [browserslist](https://github.com/WordPress/gutenberg/pull/16066) dependency.
+-   Introduce [useSelect](https://github.com/WordPress/gutenberg/pull/15737) and [useDispatch](https://github.com/WordPress/gutenberg/pull/15896) hooks to the data module.
+-   Adding embedded [performance tests](https://github.com/WordPress/gutenberg/pull/14506) to the repository.
+-   Support the [full plugin release process](https://github.com/WordPress/gutenberg/pull/15848) in the automated release tool.
+-   Speed up the [packages build](https://github.com/WordPress/gutenberg/pull/15230) [tool](https://github.com/WordPress/gutenberg/pull/15920) script and the [Gutenberg plugin build](https://github.com/WordPress/gutenberg/pull/15226) config.
+-   Extract media upload logic part into a new [@wordpress/media-utils package](https://github.com/WordPress/gutenberg/pull/15521).
+-   Introduce [**Milestone-It** GitHub Action](https://github.com/WordPress/gutenberg/pull/15826) to auto-assign milestones to merged PRs.
+-   Move the [transformStyles function](https://github.com/WordPress/gutenberg/pull/15572) to the block-editor package to use in the widgets screen.
+-   Allow plugin authors to [override the default anchor attribute](https://github.com/WordPress/gutenberg/pull/15959) definition.
+-   Add [overlayColor classname to cover blocks](https://github.com/WordPress/gutenberg/pull/15939) editor markup.
+-   [Skip downloading chromium](https://github.com/WordPress/gutenberg/pull/15886) when building the plugin zip.
+-   Add an [e2e test to check the heading colors](https://github.com/WordPress/gutenberg/pull/15784) [feature](https://github.com/WordPress/gutenberg/pull/15917).
+-   [Lint the ESlint config file](https://github.com/WordPress/gutenberg/pull/15887) (meta).
+-   Fix [i18n ESlint rules](https://github.com/WordPress/gutenberg/pull/15839) and use them in the [Gutenberg setup](https://github.com/WordPress/gutenberg/pull/15877).
+-   Fix error in the [plugin release tool](https://github.com/WordPress/gutenberg/pull/15840) when switching branches.
+-   Remove [unused stylesheet file](https://github.com/WordPress/gutenberg/pull/15845).
+-   Improve the setup of the WordPress packages [package.json files](https://github.com/WordPress/gutenberg/pull/15879).
+-   Remove the use of [popular plugins in e2e tests](https://github.com/WordPress/gutenberg/pull/15940).
+-   Ignore [linting files located in build](https://github.com/WordPress/gutenberg/pull/15977) folders by default.
+-   Add [default file patterns for the lint command](https://github.com/WordPress/gutenberg/pull/15890) of @wordpress/scripts.
+-   Extract the [ServerSideRender](https://github.com/WordPress/gutenberg/pull/15635) component to an independent package.
+-   Refactor the [HoverArea component as a React Hook](https://github.com/WordPress/gutenberg/pull/15038) instead.
+-   Remove [useless dependency](https://github.com/WordPress/gutenberg/pull/16034) from the @wordpress/edit-post package.
+-   [Deprecate components/selectors and actions](https://github.com/WordPress/gutenberg/pull/15770) moved to the editor package.
+-   Update [browserslist](https://github.com/WordPress/gutenberg/pull/16066) dependency.
 
 ### Documentation
 
-*   Document the [remaining APIs](https://github.com/WordPress/gutenberg/pull/15176) of the data module.
-*   Add an [ESNext example](https://github.com/WordPress/gutenberg/pull/15828) to the i18n docs.
-*   Fix inline docs and add tests for [color utils](https://github.com/WordPress/gutenberg/pull/15861).
-*   Document missing [MenuItem prop](https://github.com/WordPress/gutenberg/pull/16061).
-*   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/15835), [2](https://github.com/WordPress/gutenberg/pull/15836), [3](https://github.com/WordPress/gutenberg/pull/15831), [4](https://github.com/WordPress/gutenberg/pull/15697), [5](https://github.com/WordPress/gutenberg/pull/14841), [6](https://github.com/WordPress/gutenberg/pull/15717), [7](https://github.com/WordPress/gutenberg/pull/15942), [8](https://github.com/WordPress/gutenberg/pull/15950), [9](https://github.com/WordPress/gutenberg/pull/16059).
+-   Document the [remaining APIs](https://github.com/WordPress/gutenberg/pull/15176) of the data module.
+-   Add an [ESNext example](https://github.com/WordPress/gutenberg/pull/15828) to the i18n docs.
+-   Fix inline docs and add tests for [color utils](https://github.com/WordPress/gutenberg/pull/15861).
+-   Document missing [MenuItem prop](https://github.com/WordPress/gutenberg/pull/16061).
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/15835), [2](https://github.com/WordPress/gutenberg/pull/15836), [3](https://github.com/WordPress/gutenberg/pull/15831), [4](https://github.com/WordPress/gutenberg/pull/15697), [5](https://github.com/WordPress/gutenberg/pull/14841), [6](https://github.com/WordPress/gutenberg/pull/15717), [7](https://github.com/WordPress/gutenberg/pull/15942), [8](https://github.com/WordPress/gutenberg/pull/15950), [9](https://github.com/WordPress/gutenberg/pull/16059).
 
 ### Mobile
 
-*   Fix [caret position](https://github.com/WordPress/gutenberg/pull/15833) when splitting text blocks.
-*   Fix the initial value of the [“Open in New Tab” toggle](https://github.com/WordPress/gutenberg/pull/15812).
-*   Fix [Video block crash](https://github.com/WordPress/gutenberg/pull/15857) on drawing on Android.
-*   Fix caret position after [inline paste](https://github.com/WordPress/gutenberg/pull/15701).
-*   [Focus the RichText component](https://github.com/WordPress/gutenberg/pull/15878) on block mount.
-*   Port [KeyboardAvoidingView, KeyboardAwareFlatList and ReadableContentView](https://github.com/WordPress/gutenberg/pull/15913) to the @wordpress/components package.
-*   Fix [press of Enter on post title](https://github.com/WordPress/gutenberg/pull/15944).
-*   Move the [native unit tests](https://github.com/WordPress/gutenberg/pull/15589) to the Gutenberg repository.
-*   Improve the [styling of the Quote block](https://github.com/WordPress/gutenberg/pull/15990).
-*   Share [RichText line separator logic](https://github.com/WordPress/gutenberg/pull/15946) between web and native implementations.
-*   Fix [Video block showing a black background](https://github.com/WordPress/gutenberg/pull/15991) when upload is in progress or upload has failed.
-*   Allow passing a [style prop to the Icon](https://github.com/WordPress/gutenberg/pull/15778) component.
-*   Enable [sound on the Video block](https://github.com/WordPress/gutenberg/pull/15997).
-*   [Start playback immediately](https://github.com/WordPress/gutenberg/pull/15998) after video goes full screen.
-*   Fix [mobile quotes](https://github.com/WordPress/gutenberg/pull/16013) insertion and removal of empty lines.
-*   Move [unselected block accessibility handling](https://github.com/WordPress/gutenberg/pull/15225) to block-holder.
-*   Make the [More block ready-only](https://github.com/WordPress/gutenberg/pull/16005).
-*   Fix crash when [deleting all content of RichText](https://github.com/WordPress/gutenberg/pull/16018) based block.
-*   Fix for [extra BR tag on Title field](https://github.com/WordPress/gutenberg/pull/16021) on Android.
-*   Open [Video, Quote and More blocks](https://github.com/WordPress/gutenberg/pull/16031) to public.
+-   Fix [caret position](https://github.com/WordPress/gutenberg/pull/15833) when splitting text blocks.
+-   Fix the initial value of the [“Open in New Tab” toggle](https://github.com/WordPress/gutenberg/pull/15812).
+-   Fix [Video block crash](https://github.com/WordPress/gutenberg/pull/15857) on drawing on Android.
+-   Fix caret position after [inline paste](https://github.com/WordPress/gutenberg/pull/15701).
+-   [Focus the RichText component](https://github.com/WordPress/gutenberg/pull/15878) on block mount.
+-   Port [KeyboardAvoidingView, KeyboardAwareFlatList and ReadableContentView](https://github.com/WordPress/gutenberg/pull/15913) to the @wordpress/components package.
+-   Fix [press of Enter on post title](https://github.com/WordPress/gutenberg/pull/15944).
+-   Move the [native unit tests](https://github.com/WordPress/gutenberg/pull/15589) to the Gutenberg repository.
+-   Improve the [styling of the Quote block](https://github.com/WordPress/gutenberg/pull/15990).
+-   Share [RichText line separator logic](https://github.com/WordPress/gutenberg/pull/15946) between web and native implementations.
+-   Fix [Video block showing a black background](https://github.com/WordPress/gutenberg/pull/15991) when upload is in progress or upload has failed.
+-   Allow passing a [style prop to the Icon](https://github.com/WordPress/gutenberg/pull/15778) component.
+-   Enable [sound on the Video block](https://github.com/WordPress/gutenberg/pull/15997).
+-   [Start playback immediately](https://github.com/WordPress/gutenberg/pull/15998) after video goes full screen.
+-   Fix [mobile quotes](https://github.com/WordPress/gutenberg/pull/16013) insertion and removal of empty lines.
+-   Move [unselected block accessibility handling](https://github.com/WordPress/gutenberg/pull/15225) to block-holder.
+-   Make the [More block ready-only](https://github.com/WordPress/gutenberg/pull/16005).
+-   Fix crash when [deleting all content of RichText](https://github.com/WordPress/gutenberg/pull/16018) based block.
+-   Fix for [extra BR tag on Title field](https://github.com/WordPress/gutenberg/pull/16021) on Android.
+-   Open [Video, Quote and More blocks](https://github.com/WordPress/gutenberg/pull/16031) to public.
 
 = 5.8.0 =
 
-# Features
-
-- Support changing the text color in the Heading block.
-- Support reordering gallery images.
-- Complete the initial version of the widgets screen POC
-  - Add an experimental endpoint to fetch the block-based widget areas.
-  - Connect the screen to the widget areas endpoint.
-  - Load the widget scripts.
-  - Load colors, font sizes and file upload settings in the widgets screen.
-  - Render the block based widget areas in the frontend.
-
-# Enhancements
-
-- Clarify the label of the custom classname inspector panel.
-- Update Calendar block icon for better alignment with the Archives block icon.
-- Add width constraints to the Media & Text block.
-- Allow dropping blocks into container blocks using the new block appender.
-- Provide default margins for the Latest Posts block excerpts.
-
-# Bug Fixes
-
-- Support block style variations for container blocks.
-- A11y
-  - Use semantic markup for the document outline.
-  - Fix the reading order of the keyboard shortcuts modal.
-  - Add a visible help text to the tags input.
-  - Update the icon of the Heading block.
-  - Move the View Posts anchor out of the toolbar section in the header.
-  - Close the block settings menu after removing the block.
-- Fix the blurriness of the disabled block switcher icons.
-- Fix missing template validation warning.
-- Fix several content spitting issues and make the onSplit prop stable.
-- Allow the Shortcode block field to expand automatically.
-- Left pad the DateTimePicker minutes input.
-- Fix the frontend classname used for the Latest Posts block excerpts.
-- Fix error happening when deleting the last block if the paragraph block is unregistered.
-- Fix focus jumps when typing in meta block fields.
-
-# Documentation
-
-- Improve the Slot/Fill documentation.
-- Document the GitHub teams used in the repository.
-- Document the icon prop for the MediaPlaceholder component.
-- Update the changelogs maintenance documentation.
-- Clarify the save function documentation to discourage side effects.
-- Clarify the block attributes documentation.
-- Replace @link with @see in JSDocs.
-- Fixes and tweaks to the API docs generation tool.
-- Typos and tweaks: 1, 2, 3, 4, 5, 6, 7, 8.
-
-# Various
-
-- Add a new editor setting to allow disabling the code editor.
-- Add a new @wordpress/data-controls package.
-- Add an automation tool to simplify the Gutenberg release process.
-- Support the all hook in non-production environments.
-- Expose hasResolver property on the data module selectors.
-- Support multiple pattern replacement for the custom-templated-path-webpack-plugin package.
-- Update node-sass dependency to support the latest Node.js version.
-- Fix React warning showing when loading the editor (Fill component).
-- Fix React warning message when using the Image block.
-- Refactor the popover component using React Hooks.
-- Remove WebpackRTLPlugin usage.
-- Remove an outdated chrome fix for iframes drag and drop.
-- Skip Chromium download in Travis by default.
-- Rewrite Node.js packages to use CommonJS exports.
-- Speed up Docker and e2e tests setup Travis.
-- Extracted the deprecated block version declarations to their own files.
-- Add missing file from the published @wordpress/dependency-extraction-webpack-plugin-files package.
-- Upgrade package dependencies: Lerna and Webpack Bundle Analyzer.
-
-# Mobile
-
-- Add the Quote block.
-- Make the Video block publicly available.
-- Fix bug when merging blocks.
-- Improve the UI/UX of the different media blocks.
-- Support nested lists.
-- Fix Image block with an undefined url.
-- Support rich captions in the Image block.
-- Improve screen reader support on BottomSheet’s cells.
-- Fix several focus related bugs.
-- Fix undo related issue.
-- Update onSplit method on the native RichText component to the latest version.
-- Move the BottomSheet component to the @wordpress/components package.
-- Handle the iOS z-gesture to exit modals and block selection.
-- Implement the invalid block content UI.
+## Changelog
+
+### Features
+
+-   Support changing the text color in the Heading block.
+-   Support reordering gallery images.
+-   Complete the initial version of the widgets screen POC
+    -   Add an experimental endpoint to fetch the block-based widget areas.
+    -   Connect the screen to the widget areas endpoint.
+    -   Load the widget scripts.
+    -   Load colors, font sizes and file upload settings in the widgets screen.
+    -   Render the block based widget areas in the frontend.
+
+### Enhancements
+
+-   Clarify the label of the custom classname inspector panel.
+-   Update Calendar block icon for better alignment with the Archives block icon.
+-   Add width constraints to the Media & Text block.
+-   Allow dropping blocks into container blocks using the new block appender.
+-   Provide default margins for the Latest Posts block excerpts.
+
+### Bug Fixes
+
+-   Support block style variations for container blocks.
+-   A11y
+    -   Use semantic markup for the document outline.
+    -   Fix the reading order of the keyboard shortcuts modal.
+    -   Add a visible help text to the tags input.
+    -   Update the icon of the Heading block.
+    -   Move the View Posts anchor out of the toolbar section in the header.
+    -   Close the block settings menu after removing the block.
+-   Fix the blurriness of the disabled block switcher icons.
+-   Fix missing template validation warning.
+-   Fix several content spitting issues and make the onSplit prop stable.
+-   Allow the Shortcode block field to expand automatically.
+-   Left pad the DateTimePicker minutes input.
+-   Fix the frontend classname used for the Latest Posts block excerpts.
+-   Fix error happening when deleting the last block if the paragraph block is unregistered.
+-   Fix focus jumps when typing in meta block fields.
+
+### Documentation
+
+-   Improve the Slot/Fill documentation.
+-   Document the GitHub teams used in the repository.
+-   Document the icon prop for the MediaPlaceholder component.
+-   Update the changelogs maintenance documentation.
+-   Clarify the save function documentation to discourage side effects.
+-   Clarify the block attributes documentation.
+-   Replace @link with @see in JSDocs.
+-   Fixes and tweaks to the API docs generation tool.
+-   Typos and tweaks: 1, 2, 3, 4, 5, 6, 7, 8.
+
+### Various
+
+-   Add a new editor setting to allow disabling the code editor.
+-   Add a new @wordpress/data-controls package.
+-   Add an automation tool to simplify the Gutenberg release process.
+-   Support the all hook in non-production environments.
+-   Expose hasResolver property on the data module selectors.
+-   Support multiple pattern replacement for the custom-templated-path-webpack-plugin package.
+-   Update node-sass dependency to support the latest Node.js version.
+-   Fix React warning showing when loading the editor (Fill component).
+-   Fix React warning message when using the Image block.
+-   Refactor the popover component using React Hooks.
+-   Remove WebpackRTLPlugin usage.
+-   Remove an outdated chrome fix for iframes drag and drop.
+-   Skip Chromium download in Travis by default.
+-   Rewrite Node.js packages to use CommonJS exports.
+-   Speed up Docker and e2e tests setup Travis.
+-   Extracted the deprecated block version declarations to their own files.
+-   Add missing file from the published @wordpress/dependency-extraction-webpack-plugin-files package.
+-   Upgrade package dependencies: Lerna and Webpack Bundle Analyzer.
+
+### Mobile
+
+-   Add the Quote block.
+-   Make the Video block publicly available.
+-   Fix bug when merging blocks.
+-   Improve the UI/UX of the different media blocks.
+-   Support nested lists.
+-   Fix Image block with an undefined url.
+-   Support rich captions in the Image block.
+-   Improve screen reader support on BottomSheet’s cells.
+-   Fix several focus related bugs.
+-   Fix undo related issue.
+-   Update onSplit method on the native RichText component to the latest version.
+-   Move the BottomSheet component to the @wordpress/components package.
+-   Handle the iOS z-gesture to exit modals and block selection.
+-   Implement the invalid block content UI.
 
 = 5.7.0 =
 
-## Features
-
-*   Support setting a [width to the column block](https://github.com/WordPress/gutenberg/pull/15499).
-*   Support showing [Post Content or excerpt in the Latest Posts](https://github.com/WordPress/gutenberg/pull/14627) [block](https://github.com/WordPress/gutenberg/pull/15453).
-*   Support [headers and footers in the Table block](https://github.com/WordPress/gutenberg/pull/15409).
-
-## Enhancement
-
-*   Improve the UX of the Group block by using the [individual block appender](https://github.com/WordPress/gutenberg/pull/14943).
-*   Support [updating images using Drag & Drop](https://github.com/WordPress/gutenberg/pull/14983).
-*   Clarify the name of the [inline code format](https://github.com/WordPress/gutenberg/pull/15199).
-*   Add a usability [warning when audio/video autoplay](https://github.com/WordPress/gutenberg/pull/15575) is applied.
-*   Replace the [Page Break block icon](https://github.com/WordPress/gutenberg/pull/15627) with Material version.
-
-## Bug Fixes
-
-*   A11y:
-    *   Fix [focal point picker input labels](https://github.com/WordPress/gutenberg/pull/15255).
-    *   Add role to the [copy all content menu item](https://github.com/WordPress/gutenberg/pull/15383).
-    *   Add [focus style to the document outline](https://github.com/WordPress/gutenberg/pull/15479) panel.
-    *   Update the [save indicator contrast](https://github.com/WordPress/gutenberg/pull/15514) to pass AA.
-    *   Fix The [tabbing order in the Gallery Block](https://github.com/WordPress/gutenberg/pull/15540).
-    *   Improve the [contrast of the button focus styles](https://github.com/WordPress/gutenberg/pull/15544).
-    *   Fixed [focus state of pressed AM/PM buttons](https://github.com/WordPress/gutenberg/pull/15582).
-    *   Fix the [URLInput aria properties](https://github.com/WordPress/gutenberg/pull/15564).
-    *   Avoid showing [pre-publish panel buttons](https://github.com/WordPress/gutenberg/pull/15460) as links.
-    *   Fix the [focus state of the links shown as buttons](https://github.com/WordPress/gutenberg/pull/15601).
-*   Fix [RTL keyboard interactions](https://github.com/WordPress/gutenberg/pull/15496).
-*   Fix [updates to RichText formats not being reflected in the UI](https://github.com/WordPress/gutenberg/pull/15573) synchronously.
-*   Fix extra line breaks added when [pasting from Google Docs](https://github.com/WordPress/gutenberg/pull/15557).
-*   Fix [copy, paste JavaScript errors](https://github.com/WordPress/gutenberg/pull/14712) in paragraph blocks with locking enabled.
-*   Fix [format buttons incorrectly toggled](https://github.com/WordPress/gutenberg/pull/15466) on RichText blur.
-*   Preserve the [caret’s horizontal position](https://github.com/WordPress/gutenberg/pull/15624) when navigating blocks.
-*   [Case-insensitive search](https://github.com/WordPress/gutenberg/pull/14786) for existing categories.
-*   Prevent the [Code block from rendering embeds](https://github.com/WordPress/gutenberg/pull/13996) or shortcodes.
-*   Fix the [SandBox component usage outside the WP-admin](https://github.com/WordPress/gutenberg/pull/15415) context.
-*   Fix the  [Cover block’s deprecated version](https://github.com/WordPress/gutenberg/pull/15449) attributes.
-*   Fix the [webpack dependency plugin](https://github.com/WordPress/gutenberg/pull/15430): filename function handling.
-*   Support [watching block.json changes](https://github.com/WordPress/gutenberg/pull/15455) in our build tool.
-*   Fix [ServerSideRender remaining in loading state](https://github.com/WordPress/gutenberg/pull/15412) when nothing is rendered.
-*   Fix the [server-side registered blocks](https://github.com/WordPress/gutenberg/pull/15414) in the widgets screen.
-*   Show the [block movers in the widgets](https://github.com/WordPress/gutenberg/pull/15076) screen.
-*   Decode the [HTML entities in the post author selector](https://github.com/WordPress/gutenberg/pull/15090).
-*   Fix [inconsistent heading sizes](https://github.com/WordPress/gutenberg/pull/15393) between the classic and the heading blocks.
-*   Add [check for author in post data before meta boxes save](https://github.com/WordPress/gutenberg/pull/15375) request submission.
-*   [Allow blocks drag & drop](https://github.com/WordPress/gutenberg/pull/14521) if locking is set to "insert".
-*   Fix [Youtube embed styles](https://github.com/WordPress/gutenberg/pull/14748) when used multiple times in a post.
-*   [Proxy the code/block-editor replaceBlock](https://github.com/WordPress/gutenberg/pull/15528) action in the core/editor package.
-*   Use [block-editor instead of editor in cover block](https://github.com/WordPress/gutenberg/pull/15547).
-*   Fix [block showing an error in Safari](https://github.com/WordPress/gutenberg/pull/15576) when focused.
-*   Fix small visual error in the [active state of the formatting buttons](https://github.com/WordPress/gutenberg/pull/15592).
-*   Fix the pinned [plugins buttons styles](https://github.com/WordPress/gutenberg/pull/15609) when toggled.
-*   Set caret position correctly when [merging blocks using the Delete key](https://github.com/WordPress/gutenberg/pull/15599).
-
-## Documentation
-
-*   Clarify [best practices pertaining to Color Palette](https://github.com/WordPress/gutenberg/pull/15006) values.
-*   Use [Block Editor instead of Gutenberg](https://github.com/WordPress/gutenberg/pull/15411) when appropriate in the Handbook.
-*   [Omit docblocks with private tag](https://github.com/WordPress/gutenberg/pull/15173) in the API Docs generation.
-*   Update docs for [selectors & actions moved to block-editor](https://github.com/WordPress/gutenberg/pull/15424).
-*   Update i18n docs to use [make-json command](https://github.com/WordPress/gutenberg/pull/15303) from wp-cli.
-*   Consolidate [doc generation tools](https://github.com/WordPress/gutenberg/pull/15421).
-*   Fix [next/previous links issue](https://github.com/WordPress/gutenberg/pull/15456).
-*   Webpack dependency plugin: Document [unsupported multiple instances](https://github.com/WordPress/gutenberg/pull/15451).
-*   Add a [DevHub manifest file](https://github.com/WordPress/gutenberg/pull/15254) to allow synchronizing the documentation to the DevHub.
-*   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/15251), [2](https://github.com/WordPress/gutenberg/pull/15204), [3](https://github.com/WordPress/gutenberg/pull/15260), [4](https://github.com/WordPress/gutenberg/pull/15262), [5](https://github.com/WordPress/gutenberg/pull/15170), [6](https://github.com/WordPress/gutenberg/pull/15386), [7](https://github.com/WordPress/gutenberg/pull/15423), [8](https://github.com/WordPress/gutenberg/pull/15448), [9](https://github.com/WordPress/gutenberg/pull/15454), [10](https://github.com/WordPress/gutenberg/pull/15494), [11](https://github.com/WordPress/gutenberg/pull/15506), [12](https://github.com/WordPress/gutenberg/pull/15527), [13](https://github.com/WordPress/gutenberg/pull/15508), [14](https://github.com/WordPress/gutenberg/pull/15505), [15](https://github.com/WordPress/gutenberg/pull/15612).
-
-## Various
-
-*   Support and use the [shorthand Fragment](https://github.com/WordPress/gutenberg/pull/15120) [syntax](https://github.com/WordPress/gutenberg/pull/15261).
-*   Update to [Babel 7.4 and core-js 3](https://github.com/WordPress/gutenberg/pull/15139).
-*   Upgrade [simple-html-tokenizer](https://github.com/WordPress/gutenberg/pull/15246) dependency.
-*   Pass individual files as arguments from watch to [build script](https://github.com/WordPress/gutenberg/pull/15219).
-*   Automate the [scripts dependencies](https://github.com/WordPress/gutenberg/pull/15124) generation.
-*   [Clean DropZone](https://github.com/WordPress/gutenberg/pull/15224) component’s unused state.
-*   remove [\_\_unstablePositionedAtSelection](https://github.com/WordPress/gutenberg/pull/15035) component.
-*   Refactor core/edit-post [INIT effect to use action-generators](https://github.com/WordPress/gutenberg/pull/14740) and controls.
-*   Improve [eslint disable comments](https://github.com/WordPress/gutenberg/pull/15384).
-*   Fix NaN [warning when initializing the FocalPointPicker](https://github.com/WordPress/gutenberg/pull/15400) component.
-*   [Export React.memo](https://github.com/WordPress/gutenberg/pull/15385) in the @wordpress/element package.
-*   Improve the [specificity of the custom colors styles](https://github.com/WordPress/gutenberg/pull/15167).
-*   [Preload the autosaves endpoint](https://github.com/WordPress/gutenberg/pull/15067) to avoid request when loading the editor.
-*   A11y: Add support for [Axe verification in e2e tests](https://github.com/WordPress/gutenberg/pull/15018).
-*   Refactor the [File block to use the block.json](https://github.com/WordPress/gutenberg/pull/14862) syntax.
-*   Remove [redundant duplicated reducers](https://github.com/WordPress/gutenberg/pull/15142).
-*   Add [integration tests for blocks with deprecations](https://github.com/WordPress/gutenberg/pull/15268).
-*   Allow [non-production env in wp-scripts build](https://github.com/WordPress/gutenberg/pull/15480).
-*   Use [React Hooks in the BlockListBlock component](https://github.com/WordPress/gutenberg/pull/14985).
-*   Add an [e2e test for custom taxonomies](https://github.com/WordPress/gutenberg/pull/15151).
-*   Fix [intermittent failures on block transforms](https://github.com/WordPress/gutenberg/pull/15485) tests.
-*   Remove [componentWillReceiveProps usage from ColorPicker](https://github.com/WordPress/gutenberg/pull/11772).
-*   Add an [experimental](https://github.com/WordPress/gutenberg/pull/15563) [CPT to be used in the block based widgets screen](https://github.com/WordPress/gutenberg/pull/15014).
-*   Split [JavaScript CI tasks to individual jobs](https://github.com/WordPress/gutenberg/pull/15229).
-*   Remove [unnecessary aria-label from the block inserter](https://github.com/WordPress/gutenberg/pull/15382) list items.
-
-## Mobile
-
-*   Add a first version of the [video block](https://github.com/WordPress/gutenberg/pull/14912).
-*   Fix the [Auto-scroll behavior on List](https://github.com/WordPress/gutenberg/pull/15048) block.
-*   Fix the [list handling on Android](https://github.com/WordPress/gutenberg/pull/15168).
-*   Improve [accessibility of the missing block](https://github.com/WordPress/gutenberg/pull/15457).
+## Changelog
+
+### Features
+
+-   Support setting a [width to the column block](https://github.com/WordPress/gutenberg/pull/15499).
+-   Support showing [Post Content or excerpt in the Latest Posts](https://github.com/WordPress/gutenberg/pull/14627) [block](https://github.com/WordPress/gutenberg/pull/15453).
+-   Support [headers and footers in the Table block](https://github.com/WordPress/gutenberg/pull/15409).
+
+### Enhancement
+
+-   Improve the UX of the Group block by using the [individual block appender](https://github.com/WordPress/gutenberg/pull/14943).
+-   Support [updating images using Drag & Drop](https://github.com/WordPress/gutenberg/pull/14983).
+-   Clarify the name of the [inline code format](https://github.com/WordPress/gutenberg/pull/15199).
+-   Add a usability [warning when audio/video autoplay](https://github.com/WordPress/gutenberg/pull/15575) is applied.
+-   Replace the [Page Break block icon](https://github.com/WordPress/gutenberg/pull/15627) with Material version.
+
+### Bug Fixes
+
+-   A11y:
+    -   Fix [focal point picker input labels](https://github.com/WordPress/gutenberg/pull/15255).
+    -   Add role to the [copy all content menu item](https://github.com/WordPress/gutenberg/pull/15383).
+    -   Add [focus style to the document outline](https://github.com/WordPress/gutenberg/pull/15479) panel.
+    -   Update the [save indicator contrast](https://github.com/WordPress/gutenberg/pull/15514) to pass AA.
+    -   Fix The [tabbing order in the Gallery Block](https://github.com/WordPress/gutenberg/pull/15540).
+    -   Improve the [contrast of the button focus styles](https://github.com/WordPress/gutenberg/pull/15544).
+    -   Fixed [focus state of pressed AM/PM buttons](https://github.com/WordPress/gutenberg/pull/15582).
+    -   Fix the [URLInput aria properties](https://github.com/WordPress/gutenberg/pull/15564).
+    -   Avoid showing [pre-publish panel buttons](https://github.com/WordPress/gutenberg/pull/15460) as links.
+    -   Fix the [focus state of the links shown as buttons](https://github.com/WordPress/gutenberg/pull/15601).
+-   Fix [RTL keyboard interactions](https://github.com/WordPress/gutenberg/pull/15496).
+-   Fix [updates to RichText formats not being reflected in the UI](https://github.com/WordPress/gutenberg/pull/15573) synchronously.
+-   Fix extra line breaks added when [pasting from Google Docs](https://github.com/WordPress/gutenberg/pull/15557).
+-   Fix [copy, paste JavaScript errors](https://github.com/WordPress/gutenberg/pull/14712) in paragraph blocks with locking enabled.
+-   Fix [format buttons incorrectly toggled](https://github.com/WordPress/gutenberg/pull/15466) on RichText blur.
+-   Preserve the [caret’s horizontal position](https://github.com/WordPress/gutenberg/pull/15624) when navigating blocks.
+-   [Case-insensitive search](https://github.com/WordPress/gutenberg/pull/14786) for existing categories.
+-   Prevent the [Code block from rendering embeds](https://github.com/WordPress/gutenberg/pull/13996) or shortcodes.
+-   Fix the [SandBox component usage outside the WP-admin](https://github.com/WordPress/gutenberg/pull/15415) context.
+-   Fix the  [Cover block’s deprecated version](https://github.com/WordPress/gutenberg/pull/15449) attributes.
+-   Fix the [webpack dependency plugin](https://github.com/WordPress/gutenberg/pull/15430): filename function handling.
+-   Support [watching block.json changes](https://github.com/WordPress/gutenberg/pull/15455) in our build tool.
+-   Fix [ServerSideRender remaining in loading state](https://github.com/WordPress/gutenberg/pull/15412) when nothing is rendered.
+-   Fix the [server-side registered blocks](https://github.com/WordPress/gutenberg/pull/15414) in the widgets screen.
+-   Show the [block movers in the widgets](https://github.com/WordPress/gutenberg/pull/15076) screen.
+-   Decode the [HTML entities in the post author selector](https://github.com/WordPress/gutenberg/pull/15090).
+-   Fix [inconsistent heading sizes](https://github.com/WordPress/gutenberg/pull/15393) between the classic and the heading blocks.
+-   Add [check for author in post data before meta boxes save](https://github.com/WordPress/gutenberg/pull/15375) request submission.
+-   [Allow blocks drag & drop](https://github.com/WordPress/gutenberg/pull/14521) if locking is set to "insert".
+-   Fix [Youtube embed styles](https://github.com/WordPress/gutenberg/pull/14748) when used multiple times in a post.
+-   [Proxy the code/block-editor replaceBlock](https://github.com/WordPress/gutenberg/pull/15528) action in the core/editor package.
+-   Use [block-editor instead of editor in cover block](https://github.com/WordPress/gutenberg/pull/15547).
+-   Fix [block showing an error in Safari](https://github.com/WordPress/gutenberg/pull/15576) when focused.
+-   Fix small visual error in the [active state of the formatting buttons](https://github.com/WordPress/gutenberg/pull/15592).
+-   Fix the pinned [plugins buttons styles](https://github.com/WordPress/gutenberg/pull/15609) when toggled.
+-   Set caret position correctly when [merging blocks using the Delete key](https://github.com/WordPress/gutenberg/pull/15599).
+
+### Documentation
+
+-   Clarify [best practices pertaining to Color Palette](https://github.com/WordPress/gutenberg/pull/15006) values.
+-   Use [Block Editor instead of Gutenberg](https://github.com/WordPress/gutenberg/pull/15411) when appropriate in the Handbook.
+-   [Omit docblocks with private tag](https://github.com/WordPress/gutenberg/pull/15173) in the API Docs generation.
+-   Update docs for [selectors & actions moved to block-editor](https://github.com/WordPress/gutenberg/pull/15424).
+-   Update i18n docs to use [make-json command](https://github.com/WordPress/gutenberg/pull/15303) from wp-cli.
+-   Consolidate [doc generation tools](https://github.com/WordPress/gutenberg/pull/15421).
+-   Fix [next/previous links issue](https://github.com/WordPress/gutenberg/pull/15456).
+-   Webpack dependency plugin: Document [unsupported multiple instances](https://github.com/WordPress/gutenberg/pull/15451).
+-   Add a [DevHub manifest file](https://github.com/WordPress/gutenberg/pull/15254) to allow synchronizing the documentation to the DevHub.
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/15251), [2](https://github.com/WordPress/gutenberg/pull/15204), [3](https://github.com/WordPress/gutenberg/pull/15260), [4](https://github.com/WordPress/gutenberg/pull/15262), [5](https://github.com/WordPress/gutenberg/pull/15170), [6](https://github.com/WordPress/gutenberg/pull/15386), [7](https://github.com/WordPress/gutenberg/pull/15423), [8](https://github.com/WordPress/gutenberg/pull/15448), [9](https://github.com/WordPress/gutenberg/pull/15454), [10](https://github.com/WordPress/gutenberg/pull/15494), [11](https://github.com/WordPress/gutenberg/pull/15506), [12](https://github.com/WordPress/gutenberg/pull/15527), [13](https://github.com/WordPress/gutenberg/pull/15508), [14](https://github.com/WordPress/gutenberg/pull/15505), [15](https://github.com/WordPress/gutenberg/pull/15612).
+
+### Various
+
+-   Support and use the [shorthand Fragment](https://github.com/WordPress/gutenberg/pull/15120) [syntax](https://github.com/WordPress/gutenberg/pull/15261).
+-   Update to [Babel 7.4 and core-js 3](https://github.com/WordPress/gutenberg/pull/15139).
+-   Upgrade [simple-html-tokenizer](https://github.com/WordPress/gutenberg/pull/15246) dependency.
+-   Pass individual files as arguments from watch to [build script](https://github.com/WordPress/gutenberg/pull/15219).
+-   Automate the [scripts dependencies](https://github.com/WordPress/gutenberg/pull/15124) generation.
+-   [Clean DropZone](https://github.com/WordPress/gutenberg/pull/15224) component’s unused state.
+-   remove [\_\_unstablePositionedAtSelection](https://github.com/WordPress/gutenberg/pull/15035) component.
+-   Refactor core/edit-post [INIT effect to use action-generators](https://github.com/WordPress/gutenberg/pull/14740) and controls.
+-   Improve [eslint disable comments](https://github.com/WordPress/gutenberg/pull/15384).
+-   Fix NaN [warning when initializing the FocalPointPicker](https://github.com/WordPress/gutenberg/pull/15400) component.
+-   [Export React.memo](https://github.com/WordPress/gutenberg/pull/15385) in the @wordpress/element package.
+-   Improve the [specificity of the custom colors styles](https://github.com/WordPress/gutenberg/pull/15167).
+-   [Preload the autosaves endpoint](https://github.com/WordPress/gutenberg/pull/15067) to avoid request when loading the editor.
+-   A11y: Add support for [Axe verification in e2e tests](https://github.com/WordPress/gutenberg/pull/15018).
+-   Refactor the [File block to use the block.json](https://github.com/WordPress/gutenberg/pull/14862) syntax.
+-   Remove [redundant duplicated reducers](https://github.com/WordPress/gutenberg/pull/15142).
+-   Add [integration tests for blocks with deprecations](https://github.com/WordPress/gutenberg/pull/15268).
+-   Allow [non-production env in wp-scripts build](https://github.com/WordPress/gutenberg/pull/15480).
+-   Use [React Hooks in the BlockListBlock component](https://github.com/WordPress/gutenberg/pull/14985).
+-   Add an [e2e test for custom taxonomies](https://github.com/WordPress/gutenberg/pull/15151).
+-   Fix [intermittent failures on block transforms](https://github.com/WordPress/gutenberg/pull/15485) tests.
+-   Remove [componentWillReceiveProps usage from ColorPicker](https://github.com/WordPress/gutenberg/pull/11772).
+-   Add an [experimental](https://github.com/WordPress/gutenberg/pull/15563) [CPT to be used in the block based widgets screen](https://github.com/WordPress/gutenberg/pull/15014).
+-   Split [JavaScript CI tasks to individual jobs](https://github.com/WordPress/gutenberg/pull/15229).
+-   Remove [unnecessary aria-label from the block inserter](https://github.com/WordPress/gutenberg/pull/15382) list items.
+
+### Mobile
+
+-   Add a first version of the [video block](https://github.com/WordPress/gutenberg/pull/14912).
+-   Fix the [Auto-scroll behavior on List](https://github.com/WordPress/gutenberg/pull/15048) block.
+-   Fix the [list handling on Android](https://github.com/WordPress/gutenberg/pull/15168).
+-   Improve [accessibility of the missing block](https://github.com/WordPress/gutenberg/pull/15457).
 
 = 5.6.1 =
 
-## Miscellaneous
+## Changelog
+
+### Miscellaneous
 
-- Republish Gutenberg 5.6.0.
+-   Republish Gutenberg 5.6.0.
 
 = 5.6.0 =
 
-## Enhancements
-
-- Improve [focus state for button block](https://github.com/WordPress/gutenberg/pull/15058).
-- [Reduce specificity of block styles](https://github.com/WordPress/gutenberg/pull/14407) to make it easier for themes to style the editor.
-- Optimize data subscribers to [avoid unnecessary work](https://github.com/WordPress/gutenberg/pull/15041) on each editor change.
-- Avoid [overlapping block breadcrumb](https://github.com/WordPress/gutenberg/pull/15112) when block movers are visible for full- and wide-aligned blocks.
-- Preload [user permissions for reusable blocks](https://github.com/WordPress/gutenberg/pull/15061) to avoid UI flickering for block settings menu options.
-- Remove [unnecessary bottom padding](https://github.com/WordPress/gutenberg/pull/15158) for nested lists.
-- Restore [block movers to focus mode](https://github.com/WordPress/gutenberg/pull/15109).
-- Improve display of [categories list panel](https://github.com/WordPress/gutenberg/pull/15075).
-
-## Bug Fixes
-
-- [Restore block movers](https://github.com/WordPress/gutenberg/pull/15022) to full- and wide-aligned blocks.
-- Always show [drag handles](https://github.com/WordPress/gutenberg/pull/15025) for nested blocks, even when only a single block exists.
-- Improve [HTML output for formatted text](https://github.com/WordPress/gutenberg/pull/14555).
-- Fix an [error preventing registerFormatType to be called](https://github.com/WordPress/gutenberg/pull/15072) wrongly indicated as duplicate.
-- Resolve problematic [post lock release behavior](https://github.com/WordPress/gutenberg/pull/14994) when leaving the editor when using newer versions of Chrome.
-- Resolve an issue to [detect autosave presence at editor load](https://github.com/WordPress/gutenberg/pull/7945) in considering saveability.
-- Resolve a typo which could interfere with [audio shortcode transforms](https://github.com/WordPress/gutenberg/pull/15118).
-- [Apply RichText attributes correctly](https://github.com/WordPress/gutenberg/pull/15070) to resolve an issue with registerFormatType.
-- [Preserve attributes](https://github.com/WordPress/gutenberg/pull/15128) of a multi-line classic block paragraph.
-- Resolve an issue for Windows and Linux development mode due to a [access key safeguard](https://github.com/WordPress/gutenberg/pull/15044).
-
-## Various
-
-- Refactor a number of core blocks toward better interoperability with the Blocks RFC: [[1]](https://github.com/WordPress/gutenberg/pull/14979), [[2]](https://github.com/WordPress/gutenberg/pull/14902), [[3]](https://github.com/WordPress/gutenberg/pull/14903), [[4]](https://github.com/WordPress/gutenberg/pull/14899).
-- [Move selection state](https://github.com/WordPress/gutenberg/pull/14640) for RichText components to the block editor store, to enable future work to resolve or improve selection behavior.
-- Change the behavior of reusable blocks autocomplete to [fetch upon input](https://github.com/WordPress/gutenberg/pull/14915), improving reliability of tests and avoiding unnecessary network requests.
-- Allow [development mode constant](https://github.com/WordPress/gutenberg/pull/14165) to be redefined by plugins.
-- Improve reliability of e2e tests: [[1]](https://github.com/WordPress/gutenberg/pull/13161), [[2]](https://github.com/WordPress/gutenberg/pull/15046), [[3]](https://github.com/WordPress/gutenberg/pull/15063).
-- Avoid running [files contained in the git subfolder](https://github.com/WordPress/gutenberg/pull/14997) as tests.
-- Resolve an [issue with e2e errors](https://github.com/WordPress/gutenberg/pull/14998) related to dependencies updates.
-- Add a new ESLint rule to [enforce accessible use of BaseControl](https://github.com/WordPress/gutenberg/pull/14151).
-- Remove [redundant CSS styles](https://github.com/WordPress/gutenberg/pull/14520).
-- Add e2e tests for [dynamic allowed blocks](https://github.com/WordPress/gutenberg/pull/14992), [transforms from media to embed block](https://github.com/WordPress/gutenberg/pull/13997), [explicit persistence undo regression](https://github.com/WordPress/gutenberg/pull/15049).
-- Add a new [`wpDataSelect` e2e test utility](https://github.com/WordPress/gutenberg/pull/15052).
-- Include a [React hooks ESLint configuration](https://github.com/WordPress/gutenberg/pull/14995).
-- Add a [new Webpack plugin](https://github.com/WordPress/gutenberg/pull/14869) to help externalize and extract script dependencies (not yet published).
-
-## Documentation
-
-- Include auto-generated documentation for [core data module actions and selectors](https://github.com/WordPress/gutenberg/pull/15200).
-- Update [contributing documentation](https://github.com/WordPress/gutenberg/pull/15187) to extract detailed sections to their own documents.
-- Document the [withGlobalEvents](https://github.com/WordPress/gutenberg/pull/15175) higher-order component creator.
-- Add [related resources](https://github.com/WordPress/gutenberg/pull/15194) for BlockEditor components.
-- Clarify [requirements for e2e-test-utils](https://github.com/WordPress/gutenberg/pull/15171) package.
-- [Exclude private, experimental, and unstable APIs](https://github.com/WordPress/gutenberg/pull/15188) from auto-generated data documentation.
-- Include [missing DropZone component props](https://github.com/WordPress/gutenberg/pull/15223) in documentation.
-- Mention [component stylesheets](https://github.com/WordPress/gutenberg/pull/15241) in usage instructions.
-- Update [copy/paste support list](https://github.com/WordPress/gutenberg/pull/15149) to reflect paste support of images from Microsoft Word and Libre/Open Office.
-- Add [missing "Code is Poetry" footers](https://github.com/WordPress/gutenberg/pull/15140).
-- Improve [wording of JavaScript Tutorial](https://github.com/WordPress/gutenberg/pull/14838) document.
-- Improve [Travis build performance](https://github.com/WordPress/gutenberg/pull/15228) by expanding containers for e2e tests.
-
-## Mobile
-
-- [Refine transitions](https://github.com/WordPress/gutenberg/pull/14831) for bottom sheets.
-- Extract a [HorizontalRule component](https://github.com/WordPress/gutenberg/pull/14361) for use in a cross-platform separator block.
-- Fix an [error with changing list types](https://github.com/WordPress/gutenberg/pull/15010).
-- [Avoid setting caret](https://github.com/WordPress/gutenberg/pull/15021) when rich-text text will be trimmed.
-- Fix [title not focusing](https://github.com/WordPress/gutenberg/pull/15069).
-- Improve [post title accessibility](https://github.com/WordPress/gutenberg/pull/15106).
-- Improve image block accessibility for [deselected](https://github.com/WordPress/gutenberg/pull/14713), and [selected](https://github.com/WordPress/gutenberg/pull/15122) states.
-- Add [accessibility label for unselected paragraph](https://github.com/WordPress/gutenberg/pull/15126).
-- Fix [history stack when not empty](https://github.com/WordPress/gutenberg/pull/15055) on a fresh start of the editor.
-- Improve [Heading block accessibility](https://github.com/WordPress/gutenberg/pull/15144).
-- Make [accessibility string properly localizable](https://github.com/WordPress/gutenberg/pull/15161).
-- [Update string concatenation](https://github.com/WordPress/gutenberg/pull/15181) for accessibility labels.
+## Changelog
+
+### Enhancements
+
+-   Improve [focus state for button block](https://github.com/WordPress/gutenberg/pull/15058).
+-   [Reduce specificity of block styles](https://github.com/WordPress/gutenberg/pull/14407) to make it easier for themes to style the editor.
+-   Optimize data subscribers to [avoid unnecessary work](https://github.com/WordPress/gutenberg/pull/15041) on each editor change.
+-   Avoid [overlapping block breadcrumb](https://github.com/WordPress/gutenberg/pull/15112) when block movers are visible for full- and wide-aligned blocks.
+-   Preload [user permissions for reusable blocks](https://github.com/WordPress/gutenberg/pull/15061) to avoid UI flickering for block settings menu options.
+-   Remove [unnecessary bottom padding](https://github.com/WordPress/gutenberg/pull/15158) for nested lists.
+-   Restore [block movers to focus mode](https://github.com/WordPress/gutenberg/pull/15109).
+-   Improve display of [categories list panel](https://github.com/WordPress/gutenberg/pull/15075).
+
+### Bug Fixes
+
+-   [Restore block movers](https://github.com/WordPress/gutenberg/pull/15022) to full- and wide-aligned blocks.
+-   Always show [drag handles](https://github.com/WordPress/gutenberg/pull/15025) for nested blocks, even when only a single block exists.
+-   Improve [HTML output for formatted text](https://github.com/WordPress/gutenberg/pull/14555).
+-   Fix an [error preventing registerFormatType to be called](https://github.com/WordPress/gutenberg/pull/15072) wrongly indicated as duplicate.
+-   Resolve problematic [post lock release behavior](https://github.com/WordPress/gutenberg/pull/14994) when leaving the editor when using newer versions of Chrome.
+-   Resolve an issue to [detect autosave presence at editor load](https://github.com/WordPress/gutenberg/pull/7945) in considering saveability.
+-   Resolve a typo which could interfere with [audio shortcode transforms](https://github.com/WordPress/gutenberg/pull/15118).
+-   [Apply RichText attributes correctly](https://github.com/WordPress/gutenberg/pull/15070) to resolve an issue with registerFormatType.
+-   [Preserve attributes](https://github.com/WordPress/gutenberg/pull/15128) of a multi-line classic block paragraph.
+-   Resolve an issue for Windows and Linux development mode due to a [access key safeguard](https://github.com/WordPress/gutenberg/pull/15044).
+
+### Various
+
+-   Refactor a number of core blocks toward better interoperability with the Blocks RFC: [[1]](https://github.com/WordPress/gutenberg/pull/14979), [[2]](https://github.com/WordPress/gutenberg/pull/14902), [[3]](https://github.com/WordPress/gutenberg/pull/14903), [[4]](https://github.com/WordPress/gutenberg/pull/14899).
+-   [Move selection state](https://github.com/WordPress/gutenberg/pull/14640) for RichText components to the block editor store, to enable future work to resolve or improve selection behavior.
+-   Change the behavior of reusable blocks autocomplete to [fetch upon input](https://github.com/WordPress/gutenberg/pull/14915), improving reliability of tests and avoiding unnecessary network requests.
+-   Allow [development mode constant](https://github.com/WordPress/gutenberg/pull/14165) to be redefined by plugins.
+-   Improve reliability of e2e tests: [[1]](https://github.com/WordPress/gutenberg/pull/13161), [[2]](https://github.com/WordPress/gutenberg/pull/15046), [[3]](https://github.com/WordPress/gutenberg/pull/15063).
+-   Avoid running [files contained in the git subfolder](https://github.com/WordPress/gutenberg/pull/14997) as tests.
+-   Resolve an [issue with e2e errors](https://github.com/WordPress/gutenberg/pull/14998) related to dependencies updates.
+-   Add a new ESLint rule to [enforce accessible use of BaseControl](https://github.com/WordPress/gutenberg/pull/14151).
+-   Remove [redundant CSS styles](https://github.com/WordPress/gutenberg/pull/14520).
+-   Add e2e tests for [dynamic allowed blocks](https://github.com/WordPress/gutenberg/pull/14992), [transforms from media to embed block](https://github.com/WordPress/gutenberg/pull/13997), [explicit persistence undo regression](https://github.com/WordPress/gutenberg/pull/15049).
+-   Add a new [`wpDataSelect` e2e test utility](https://github.com/WordPress/gutenberg/pull/15052).
+-   Include a [React hooks ESLint configuration](https://github.com/WordPress/gutenberg/pull/14995).
+-   Add a [new Webpack plugin](https://github.com/WordPress/gutenberg/pull/14869) to help externalize and extract script dependencies (not yet published).
+
+### Documentation
+
+-   Include auto-generated documentation for [core data module actions and selectors](https://github.com/WordPress/gutenberg/pull/15200).
+-   Update [contributing documentation](https://github.com/WordPress/gutenberg/pull/15187) to extract detailed sections to their own documents.
+-   Document the [withGlobalEvents](https://github.com/WordPress/gutenberg/pull/15175) higher-order component creator.
+-   Add [related resources](https://github.com/WordPress/gutenberg/pull/15194) for BlockEditor components.
+-   Clarify [requirements for e2e-test-utils](https://github.com/WordPress/gutenberg/pull/15171) package.
+-   [Exclude private, experimental, and unstable APIs](https://github.com/WordPress/gutenberg/pull/15188) from auto-generated data documentation.
+-   Include [missing DropZone component props](https://github.com/WordPress/gutenberg/pull/15223) in documentation.
+-   Mention [component stylesheets](https://github.com/WordPress/gutenberg/pull/15241) in usage instructions.
+-   Update [copy/paste support list](https://github.com/WordPress/gutenberg/pull/15149) to reflect paste support of images from Microsoft Word and Libre/Open Office.
+-   Add [missing "Code is Poetry" footers](https://github.com/WordPress/gutenberg/pull/15140).
+-   Improve [wording of JavaScript Tutorial](https://github.com/WordPress/gutenberg/pull/14838) document.
+-   Improve [Travis build performance](https://github.com/WordPress/gutenberg/pull/15228) by expanding containers for e2e tests.
+
+### Mobile
+
+-   [Refine transitions](https://github.com/WordPress/gutenberg/pull/14831) for bottom sheets.
+-   Extract a [HorizontalRule component](https://github.com/WordPress/gutenberg/pull/14361) for use in a cross-platform separator block.
+-   Fix an [error with changing list types](https://github.com/WordPress/gutenberg/pull/15010).
+-   [Avoid setting caret](https://github.com/WordPress/gutenberg/pull/15021) when rich-text text will be trimmed.
+-   Fix [title not focusing](https://github.com/WordPress/gutenberg/pull/15069).
+-   Improve [post title accessibility](https://github.com/WordPress/gutenberg/pull/15106).
+-   Improve image block accessibility for [deselected](https://github.com/WordPress/gutenberg/pull/14713), and [selected](https://github.com/WordPress/gutenberg/pull/15122) states.
+-   Add [accessibility label for unselected paragraph](https://github.com/WordPress/gutenberg/pull/15126).
+-   Fix [history stack when not empty](https://github.com/WordPress/gutenberg/pull/15055) on a fresh start of the editor.
+-   Improve [Heading block accessibility](https://github.com/WordPress/gutenberg/pull/15144).
+-   Make [accessibility string properly localizable](https://github.com/WordPress/gutenberg/pull/15161).
+-   [Update string concatenation](https://github.com/WordPress/gutenberg/pull/15181) for accessibility labels.
 
 = 5.5.0 =
 
-## Features
-
-- Add a new [Group](https://github.com/WordPress/gutenberg/pull/13964) [block](https://github.com/WordPress/gutenberg/pull/14920).
-- Add [vertical alignment](https://github.com/WordPress/gutenberg/pull/13989) support to the Media & Text block.
-- Add [the image fill option](https://github.com/WordPress/gutenberg/pull/14445) to the Media & Text block.
-
-## Enhancements
-
-- Improvements to the [Image Block](https://github.com/WordPress/gutenberg/pull/14142) [flows](https://github.com/WordPress/gutenberg/pull/14807).
-- Automatically [add `mailto:` to email addresses](https://github.com/WordPress/gutenberg/pull/14857) when linking.
-- Add [visual handles for side resizers](https://github.com/WordPress/gutenberg/pull/14543) for various blocks.
-- Improve the [performance of the](https://github.com/WordPress/gutenberg/pull/14664) [annotations](https://github.com/WordPress/gutenberg/pull/14808) by avoiding excessive memoization.
-- Announce the [color accessibility issues](https://github.com/WordPress/gutenberg/pull/14649) to screen readers.
-- Add [enum block attributes validation](https://github.com/WordPress/gutenberg/pull/14810) to browser block parser.
-- Use a [consistent grey background](https://github.com/WordPress/gutenberg/pull/14719) in the Shortcode block.
-- Improve accessibility of video block [select poster image](https://github.com/WordPress/gutenberg/pull/14752).
-- Respect [prefers-reduced-motion for fixed backgrounds](https://github.com/WordPress/gutenberg/pull/14848) in Cover block.
-- Prevent ArrowLeft key press in multi-line selection from [prematurely triggering multi-selection](https://github.com/WordPress/gutenberg/pull/14906).
-
-## Bug Fixes
-
-- Avoid keeping the [RichText value in cache](https://github.com/WordPress/gutenberg/pull/14750) indefinitely.
-- Fix the [post title input borders](https://github.com/WordPress/gutenberg/pull/14771) in the code editor.
-- Fix the [block restrictions](https://github.com/WordPress/gutenberg/pull/14003) to insert, replace or move blocks.
-- [Select gallery images](https://github.com/WordPress/gutenberg/pull/14813) on focus.
-- Fix [removing gallery images](https://github.com/WordPress/gutenberg/pull/14822) on delete/backspace key press.
-- Fix small visual regression in the [block autocompete popover](https://github.com/WordPress/gutenberg/pull/14772).
-- Fix the data module[ resolver resolution status](https://github.com/WordPress/gutenberg/pull/14711).
-- Avoid [saving metaboxes when previewing](https://github.com/WordPress/gutenberg/pull/14877) [changes](https://github.com/WordPress/gutenberg/pull/14894).
-- Fix [selecting the separator block](https://github.com/WordPress/gutenberg/pull/14854).
-- Fix displaying the [color palette](https://github.com/WordPress/gutenberg/pull/14693) [tooltips](https://github.com/WordPress/gutenberg/pull/14944) on hover.
-- Fix Firefox/NVDA bug not [announcing the toggle settings](https://github.com/WordPress/gutenberg/pull/14475) button.
-- Fix [arrow navigation in paragraph](https://github.com/WordPress/gutenberg/pull/14804) blocks with backgrounds.
-- Fix the [columns block click to select](https://github.com/WordPress/gutenberg/pull/14876).
-- Fix [post dirtiness](https://github.com/WordPress/gutenberg/pull/14916) after fetching reusable blocks.
-- Fix the hover and focus styles for [buttons with the isBusy](https://github.com/WordPress/gutenberg/pull/14469) prop.
-- Remove the box [shadow from the side inserter](https://github.com/WordPress/gutenberg/pull/14936) button.
-- Changing the [region navigation shortcuts](https://github.com/WordPress/gutenberg/pull/14681) to avoid conflicts.
-- Fix [space insertion in the Button block](https://github.com/WordPress/gutenberg/pull/14925) in Firefox.
-- Prevent the [link popover from animating constantly](https://github.com/WordPress/gutenberg/pull/14938) as we type. 
-- Fix the warning triggered by [clearing the height of the spacer block](https://github.com/WordPress/gutenberg/pull/14785).
-- Fix [undo behavior](https://github.com/WordPress/gutenberg/pull/14955) after fresh post loading.
-
-## Documentation
-
-- Add design documentation to the [Modal component](https://github.com/WordPress/gutenberg/pull/14757).
-- Clarify the [CSS naming coding guidelines](https://github.com/WordPress/gutenberg/pull/14556).
-- Add [InspectorControls usage example](https://github.com/WordPress/gutenberg/pull/11736).
-- Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/14736), [2](https://github.com/WordPress/gutenberg/pull/14737), [3](https://github.com/WordPress/gutenberg/pull/14762), [4](https://github.com/WordPress/gutenberg/pull/14741), [5](https://github.com/WordPress/gutenberg/pull/14756), [6](https://github.com/WordPress/gutenberg/pull/14778), [7](https://github.com/WordPress/gutenberg/pull/14827), [8](https://github.com/WordPress/gutenberg/pull/14895), [9](https://github.com/WordPress/gutenberg/pull/14909), [10](https://github.com/WordPress/gutenberg/pull/14917), [11](https://github.com/WordPress/gutenberg/pull/14940), [12](https://github.com/WordPress/gutenberg/pull/14941), [13](https://github.com/WordPress/gutenberg/pull/14964).
-
-## Various
-
-- Bootstrap the design of the [new widgets screen](https://github.com/WordPress/gutenberg/pull/14612) (non functional yet).
-- Reorganization of the block-library code base:
-    - Use a babel plugin to [load block.json files](https://github.com/WordPress/gutenberg/pull/14551).
-    - Introduce [block.json metadata](https://github.com/WordPress/gutenberg/pull/14770) [for](https://github.com/WordPress/gutenberg/pull/14863) all client side blocks.
-    - Move [the edit functions and the icons](https://github.com/WordPress/gutenberg/pull/14743) to separate files.
-    - Move the [transforms and save functions](https://github.com/WordPress/gutenberg/pull/14882) to separate files.
-- Add [forwardRef support to the PlainText](https://github.com/WordPress/gutenberg/pull/14866) component.
-- Support [Button Block Appender](https://github.com/WordPress/gutenberg/pull/14241) in the InnerBlocks component.
-- [Unset the focal point attributes](https://github.com/WordPress/gutenberg/pull/14746) from the Cover block if not needed.
-- [Consistently return promises](https://github.com/WordPress/gutenberg/pull/14830) from the data module action calls.
-- Remove obsolete [CSS currentColor](https://github.com/WordPress/gutenberg/pull/14119) usage.
-- Improve the [e2e test CLI arguments](https://github.com/WordPress/gutenberg/pull/14717) and docs.
-- Improve the [e2e test login stability](https://github.com/WordPress/gutenberg/pull/14243) on MacOS.
-- Remove [is-plain-obj package](https://github.com/WordPress/gutenberg/pull/14751) dependency.
-- Remove invalid urls and ids from [media test](https://github.com/WordPress/gutenberg/pull/14625/files) [fixtures](https://github.com/WordPress/gutenberg/pull/14790).
-- Remove the [deprecated Gutenberg plugin functions](https://github.com/WordPress/gutenberg/pull/14806) slated for 5.4 and 5.5.
-- remove or rename [undocumented RichText package functions](https://github.com/WordPress/gutenberg/pull/14239) and constants.
-- Adjust [paragraph block spacing](https://github.com/WordPress/gutenberg/pull/14679) to use standardised variables.
-- Allow [spaces in file paths](https://github.com/WordPress/gutenberg/pull/14789) for package build process. 
-- Update pre-commit to [check modified files only](https://github.com/WordPress/gutenberg/pull/14971).
-- Improve the [performance of the webpack build](https://github.com/WordPress/gutenberg/pull/14860) configuration.
-- [Update dependencies](https://github.com/WordPress/gutenberg/pull/14978) with known vulnerabilities.
-- Fix [typo in variable names](https://github.com/WordPress/gutenberg/pull/14970).
-
-## Mobile
-
-- [Accessibility improvements to the Button](https://github.com/WordPress/gutenberg/pull/14697) component.
-- Enhance the [unsupported block type](https://github.com/WordPress/gutenberg/pull/14577). 
-- Fix [image upload progress](https://github.com/WordPress/gutenberg/pull/14799) not being displayed consistently.
-- Support [copy/pasting images](https://github.com/WordPress/gutenberg/pull/14802).
-- Add [the](https://github.com/WordPress/gutenberg/pull/14865) [list block](https://github.com/WordPress/gutenberg/pull/14636).
-- Visual [refinements for the native nextpage](https://github.com/WordPress/gutenberg/pull/14826) block.
-- Fix [importing the column](https://github.com/WordPress/gutenberg/pull/14880) block.
-- Remove DOM logic from the [list block toolbar](https://github.com/WordPress/gutenberg/pull/14840).
-- Put the caret at the end of the text field after [merging blocks](https://github.com/WordPress/gutenberg/pull/14820).
-- Fix caret position [after](https://github.com/WordPress/gutenberg/pull/14957) [inline paste](https://github.com/WordPress/gutenberg/pull/14893).
+## Changelog
+
+### Features
+
+-   Add a new [Group](https://github.com/WordPress/gutenberg/pull/13964) [block](https://github.com/WordPress/gutenberg/pull/14920).
+-   Add [vertical alignment](https://github.com/WordPress/gutenberg/pull/13989) support to the Media & Text block.
+-   Add [the image fill option](https://github.com/WordPress/gutenberg/pull/14445) to the Media & Text block.
+
+### Enhancements
+
+-   Improvements to the [Image Block](https://github.com/WordPress/gutenberg/pull/14142) [flows](https://github.com/WordPress/gutenberg/pull/14807).
+-   Automatically [add `mailto:` to email addresses](https://github.com/WordPress/gutenberg/pull/14857) when linking.
+-   Add [visual handles for side resizers](https://github.com/WordPress/gutenberg/pull/14543) for various blocks.
+-   Improve the [performance of the](https://github.com/WordPress/gutenberg/pull/14664) [annotations](https://github.com/WordPress/gutenberg/pull/14808) by avoiding excessive memoization.
+-   Announce the [color accessibility issues](https://github.com/WordPress/gutenberg/pull/14649) to screen readers.
+-   Add [enum block attributes validation](https://github.com/WordPress/gutenberg/pull/14810) to browser block parser.
+-   Use a [consistent grey background](https://github.com/WordPress/gutenberg/pull/14719) in the Shortcode block.
+-   Improve accessibility of video block [select poster image](https://github.com/WordPress/gutenberg/pull/14752).
+-   Respect [prefers-reduced-motion for fixed backgrounds](https://github.com/WordPress/gutenberg/pull/14848) in Cover block.
+-   Prevent ArrowLeft key press in multi-line selection from [prematurely triggering multi-selection](https://github.com/WordPress/gutenberg/pull/14906).
+
+### Bug Fixes
+
+-   Avoid keeping the [RichText value in cache](https://github.com/WordPress/gutenberg/pull/14750) indefinitely.
+-   Fix the [post title input borders](https://github.com/WordPress/gutenberg/pull/14771) in the code editor.
+-   Fix the [block restrictions](https://github.com/WordPress/gutenberg/pull/14003) to insert, replace or move blocks.
+-   [Select gallery images](https://github.com/WordPress/gutenberg/pull/14813) on focus.
+-   Fix [removing gallery images](https://github.com/WordPress/gutenberg/pull/14822) on delete/backspace key press.
+-   Fix small visual regression in the [block autocompete popover](https://github.com/WordPress/gutenberg/pull/14772).
+-   Fix the data module[ resolver resolution status](https://github.com/WordPress/gutenberg/pull/14711).
+-   Avoid [saving metaboxes when previewing](https://github.com/WordPress/gutenberg/pull/14877) [changes](https://github.com/WordPress/gutenberg/pull/14894).
+-   Fix [selecting the separator block](https://github.com/WordPress/gutenberg/pull/14854).
+-   Fix displaying the [color palette](https://github.com/WordPress/gutenberg/pull/14693) [tooltips](https://github.com/WordPress/gutenberg/pull/14944) on hover.
+-   Fix Firefox/NVDA bug not [announcing the toggle settings](https://github.com/WordPress/gutenberg/pull/14475) button.
+-   Fix [arrow navigation in paragraph](https://github.com/WordPress/gutenberg/pull/14804) blocks with backgrounds.
+-   Fix the [columns block click to select](https://github.com/WordPress/gutenberg/pull/14876).
+-   Fix [post dirtiness](https://github.com/WordPress/gutenberg/pull/14916) after fetching reusable blocks.
+-   Fix the hover and focus styles for [buttons with the isBusy](https://github.com/WordPress/gutenberg/pull/14469) prop.
+-   Remove the box [shadow from the side inserter](https://github.com/WordPress/gutenberg/pull/14936) button.
+-   Changing the [region navigation shortcuts](https://github.com/WordPress/gutenberg/pull/14681) to avoid conflicts.
+-   Fix [space insertion in the Button block](https://github.com/WordPress/gutenberg/pull/14925) in Firefox.
+-   Prevent the [link popover from animating constantly](https://github.com/WordPress/gutenberg/pull/14938) as we type.
+-   Fix the warning triggered by [clearing the height of the spacer block](https://github.com/WordPress/gutenberg/pull/14785).
+-   Fix [undo behavior](https://github.com/WordPress/gutenberg/pull/14955) after fresh post loading.
+
+### Documentation
+
+-   Add design documentation to the [Modal component](https://github.com/WordPress/gutenberg/pull/14757).
+-   Clarify the [CSS naming coding guidelines](https://github.com/WordPress/gutenberg/pull/14556).
+-   Add [InspectorControls usage example](https://github.com/WordPress/gutenberg/pull/11736).
+-   Tweaks and typos: [1](https://github.com/WordPress/gutenberg/pull/14736), [2](https://github.com/WordPress/gutenberg/pull/14737), [3](https://github.com/WordPress/gutenberg/pull/14762), [4](https://github.com/WordPress/gutenberg/pull/14741), [5](https://github.com/WordPress/gutenberg/pull/14756), [6](https://github.com/WordPress/gutenberg/pull/14778), [7](https://github.com/WordPress/gutenberg/pull/14827), [8](https://github.com/WordPress/gutenberg/pull/14895), [9](https://github.com/WordPress/gutenberg/pull/14909), [10](https://github.com/WordPress/gutenberg/pull/14917), [11](https://github.com/WordPress/gutenberg/pull/14940), [12](https://github.com/WordPress/gutenberg/pull/14941), [13](https://github.com/WordPress/gutenberg/pull/14964).
+
+### Various
+
+-   Bootstrap the design of the [new widgets screen](https://github.com/WordPress/gutenberg/pull/14612) (non functional yet).
+-   Reorganization of the block-library code base:
+    -   Use a babel plugin to [load block.json files](https://github.com/WordPress/gutenberg/pull/14551).
+    -   Introduce [block.json metadata](https://github.com/WordPress/gutenberg/pull/14770) [for](https://github.com/WordPress/gutenberg/pull/14863) all client side blocks.
+    -   Move [the edit functions and the icons](https://github.com/WordPress/gutenberg/pull/14743) to separate files.
+    -   Move the [transforms and save functions](https://github.com/WordPress/gutenberg/pull/14882) to separate files.
+-   Add [forwardRef support to the PlainText](https://github.com/WordPress/gutenberg/pull/14866) component.
+-   Support [Button Block Appender](https://github.com/WordPress/gutenberg/pull/14241) in the InnerBlocks component.
+-   [Unset the focal point attributes](https://github.com/WordPress/gutenberg/pull/14746) from the Cover block if not needed.
+-   [Consistently return promises](https://github.com/WordPress/gutenberg/pull/14830) from the data module action calls.
+-   Remove obsolete [CSS currentColor](https://github.com/WordPress/gutenberg/pull/14119) usage.
+-   Improve the [e2e test CLI arguments](https://github.com/WordPress/gutenberg/pull/14717) and docs.
+-   Improve the [e2e test login stability](https://github.com/WordPress/gutenberg/pull/14243) on MacOS.
+-   Remove [is-plain-obj package](https://github.com/WordPress/gutenberg/pull/14751) dependency.
+-   Remove invalid urls and ids from [media test](https://github.com/WordPress/gutenberg/pull/14625/files) [fixtures](https://github.com/WordPress/gutenberg/pull/14790).
+-   Remove the [deprecated Gutenberg plugin functions](https://github.com/WordPress/gutenberg/pull/14806) slated for 5.4 and 5.5.
+-   remove or rename [undocumented RichText package functions](https://github.com/WordPress/gutenberg/pull/14239) and constants.
+-   Adjust [paragraph block spacing](https://github.com/WordPress/gutenberg/pull/14679) to use standardised variables.
+-   Allow [spaces in file paths](https://github.com/WordPress/gutenberg/pull/14789) for package build process.
+-   Update pre-commit to [check modified files only](https://github.com/WordPress/gutenberg/pull/14971).
+-   Improve the [performance of the webpack build](https://github.com/WordPress/gutenberg/pull/14860) configuration.
+-   [Update dependencies](https://github.com/WordPress/gutenberg/pull/14978) with known vulnerabilities.
+-   Fix [typo in variable names](https://github.com/WordPress/gutenberg/pull/14970).
+
+### Mobile
+
+-   [Accessibility improvements to the Button](https://github.com/WordPress/gutenberg/pull/14697) component.
+-   Enhance the [unsupported block type](https://github.com/WordPress/gutenberg/pull/14577).
+-   Fix [image upload progress](https://github.com/WordPress/gutenberg/pull/14799) not being displayed consistently.
+-   Support [copy/pasting images](https://github.com/WordPress/gutenberg/pull/14802).
+-   Add [the](https://github.com/WordPress/gutenberg/pull/14865) [list block](https://github.com/WordPress/gutenberg/pull/14636).
+-   Visual [refinements for the native nextpage](https://github.com/WordPress/gutenberg/pull/14826) block.
+-   Fix [importing the column](https://github.com/WordPress/gutenberg/pull/14880) block.
+-   Remove DOM logic from the [list block toolbar](https://github.com/WordPress/gutenberg/pull/14840).
+-   Put the caret at the end of the text field after [merging blocks](https://github.com/WordPress/gutenberg/pull/14820).
+-   Fix caret position [after](https://github.com/WordPress/gutenberg/pull/14957) [inline paste](https://github.com/WordPress/gutenberg/pull/14893).
 
 = 5.4.0 =
 
+## Changelog
+
 ### Features
 
-- Add [vertical alignment support for the columns](https://github.com/WordPress/gutenberg/pull/13899) [block](https://github.com/WordPress/gutenberg/pull/14614).
-- Add [playsinline support](https://github.com/WordPress/gutenberg/pull/14500) for the video block.
+-   Add [vertical alignment support for the columns](https://github.com/WordPress/gutenberg/pull/13899) [block](https://github.com/WordPress/gutenberg/pull/14614).
+-   Add [playsinline support](https://github.com/WordPress/gutenberg/pull/14500) for the video block.
 
 ### Enhancements
 
-- Add the [Media Library button](https://github.com/WordPress/gutenberg/issues/8309) to the gallery block appender.
-- Improve appearance of the block [hover state on colored backgrounds](https://github.com/WordPress/gutenberg/pull/14501).
-- Move the [color and font size caption styles](https://github.com/WordPress/gutenberg/pull/14366) into theme styles.
-- Replace the [verse block icon](https://github.com/WordPress/gutenberg/pull/14622).
-- Standardize [align and className attributes](https://github.com/WordPress/gutenberg/pull/14533) for dynamic blocks.
-- Remove the [title from mobile inserters](https://github.com/WordPress/gutenberg/pull/14493).
-- Capitalize [button labels](https://github.com/WordPress/gutenberg/pull/14591).
-- [Remove menu toggling](https://github.com/WordPress/gutenberg/pull/14456) on checkbox, radio buttons clicks.
-- Make the [invisible image resize handlers](https://github.com/WordPress/gutenberg/pull/14481) bigger.
-- Improve the [alt text field description](https://github.com/WordPress/gutenberg/pull/14668).
-
-### Bug Fixes
-
-- Improve the [format boundary styles](https://github.com/WordPress/gutenberg/pull/14519).
-- [Convert void blocks properly](https://github.com/WordPress/gutenberg/pull/14536) when converting or pasting content.
-- Fix the [ClipboardButton](https://github.com/WordPress/gutenberg/pull/7106) component behavior in Safari.
-- Fix [expanding the text selection](https://github.com/WordPress/gutenberg/pull/14487) when using shift + vertical arrows.
-- Fix the alignment of the [third-party block settings items](https://github.com/WordPress/gutenberg/pull/14569).
-- Fix [invalid HTML](https://github.com/WordPress/gutenberg/pull/14423) [in](https://github.com/WordPress/gutenberg/pull/14599) some more menu items.
-- Fix [JavaScript error in the columns](https://github.com/WordPress/gutenberg/pull/14605) block.
-- Fix [radio button](https://github.com/WordPress/gutenberg/pull/14624) [appearance](https://github.com/WordPress/gutenberg/pull/14684) on small screens.
-- Save [line breaks in the preformatted](https://github.com/WordPress/gutenberg/pull/14653) block.
-- Fix edge case in the [is_gutenberg_page](https://github.com/WordPress/gutenberg/pull/14558) plugin function.
-- Fix [toolbar position](https://github.com/WordPress/gutenberg/pull/14669) in full size aligned blocks on small screens.
-- Fix [double scrollbar issue](https://github.com/WordPress/gutenberg/pull/14677) in Full Screen mode.
-- Fix JavaScript error when [downgrading to an old Gutenberg version](https://github.com/WordPress/gutenberg/pull/14691).
-- Fix the [WordPress embed block](https://github.com/WordPress/gutenberg/pull/14658) resolution.
-- Fix embedding [links with trailing slashes](https://github.com/WordPress/gutenberg/pull/14705).
-- Fix the [preloading apiFetch middleware](https://github.com/WordPress/gutenberg/pull/14714) when initialized empty.
-- Fix php notice when using [widgets without](https://github.com/WordPress/gutenberg/pull/14587) [description](https://github.com/WordPress/gutenberg/pull/14615).
-- Better [horizontal edge detection](https://github.com/WordPress/gutenberg/pull/14462) to fix the arrow key navigation in the table block.
-- Fix error in [API Fetch initialization](https://github.com/WordPress/gutenberg/pull/14714).
-- Fix [unwanted margin](https://github.com/WordPress/gutenberg/pull/14614) in Column block.
-- Fixes [issue where emoji would be destroyed](https://github.com/WordPress/gutenberg/pull/14411).
+-   Add the [Media Library button](https://github.com/WordPress/gutenberg/issues/8309) to the gallery block appender.
+-   Improve appearance of the block [hover state on colored backgrounds](https://github.com/WordPress/gutenberg/pull/14501).
+-   Move the [color and font size caption styles](https://github.com/WordPress/gutenberg/pull/14366) into theme styles.
+-   Replace the [verse block icon](https://github.com/WordPress/gutenberg/pull/14622).
+-   Standardize [align and className attributes](https://github.com/WordPress/gutenberg/pull/14533) for dynamic blocks.
+-   Remove the [title from mobile inserters](https://github.com/WordPress/gutenberg/pull/14493).
+-   Capitalize [button labels](https://github.com/WordPress/gutenberg/pull/14591).
+-   [Remove menu toggling](https://github.com/WordPress/gutenberg/pull/14456) on checkbox, radio buttons clicks.
+-   Make the [invisible image resize handlers](https://github.com/WordPress/gutenberg/pull/14481) bigger.
+-   Improve the [alt text field description](https://github.com/WordPress/gutenberg/pull/14668).
+
+### Bug Fixes
+
+-   Improve the [format boundary styles](https://github.com/WordPress/gutenberg/pull/14519).
+-   [Convert void blocks properly](https://github.com/WordPress/gutenberg/pull/14536) when converting or pasting content.
+-   Fix the [ClipboardButton](https://github.com/WordPress/gutenberg/pull/7106) component behavior in Safari.
+-   Fix [expanding the text selection](https://github.com/WordPress/gutenberg/pull/14487) when using shift + vertical arrows.
+-   Fix the alignment of the [third-party block settings items](https://github.com/WordPress/gutenberg/pull/14569).
+-   Fix [invalid HTML](https://github.com/WordPress/gutenberg/pull/14423) [in](https://github.com/WordPress/gutenberg/pull/14599) some more menu items.
+-   Fix [JavaScript error in the columns](https://github.com/WordPress/gutenberg/pull/14605) block.
+-   Fix [radio button](https://github.com/WordPress/gutenberg/pull/14624) [appearance](https://github.com/WordPress/gutenberg/pull/14684) on small screens.
+-   Save [line breaks in the preformatted](https://github.com/WordPress/gutenberg/pull/14653) block.
+-   Fix edge case in the [is_gutenberg_page](https://github.com/WordPress/gutenberg/pull/14558) plugin function.
+-   Fix [toolbar position](https://github.com/WordPress/gutenberg/pull/14669) in full size aligned blocks on small screens.
+-   Fix [double scrollbar issue](https://github.com/WordPress/gutenberg/pull/14677) in Full Screen mode.
+-   Fix JavaScript error when [downgrading to an old Gutenberg version](https://github.com/WordPress/gutenberg/pull/14691).
+-   Fix the [WordPress embed block](https://github.com/WordPress/gutenberg/pull/14658) resolution.
+-   Fix embedding [links with trailing slashes](https://github.com/WordPress/gutenberg/pull/14705).
+-   Fix the [preloading apiFetch middleware](https://github.com/WordPress/gutenberg/pull/14714) when initialized empty.
+-   Fix php notice when using [widgets without](https://github.com/WordPress/gutenberg/pull/14587) [description](https://github.com/WordPress/gutenberg/pull/14615).
+-   Better [horizontal edge detection](https://github.com/WordPress/gutenberg/pull/14462) to fix the arrow key navigation in the table block.
+-   Fix error in [API Fetch initialization](https://github.com/WordPress/gutenberg/pull/14714).
+-   Fix [unwanted margin](https://github.com/WordPress/gutenberg/pull/14614) in Column block.
+-   Fixes [issue where emoji would be destroyed](https://github.com/WordPress/gutenberg/pull/14411).
 
 ### Documentation
 
-- Document the [block editor module](https://github.com/WordPress/gutenberg/pull/14566).
-- Add design documentation for the [Panel](https://github.com/WordPress/gutenberg/pull/14504) component.
-- Document [webpack config extensibility](https://github.com/WordPress/gutenberg/pull/14590).
-- Clarify [experimental and unstable API](https://github.com/WordPress/gutenberg/pull/14557) guidelines.
-- Setup automatic [API documentation for the data](https://github.com/WordPress/gutenberg/pull/14277) module.
-- Improve the [automatic](https://github.com/WordPress/gutenberg/pull/14549) [API](https://github.com/WordPress/gutenberg/pull/14656) documentation tool.
-- Enhance the components documentation:
-  - [FormFileUpload](https://github.com/WordPress/gutenberg/pull/14661) component.
-  - [MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/14645) component.
-  - [Notice](https://github.com/WordPress/gutenberg/pull/14514) component.
-  - [TextControl](https://github.com/WordPress/gutenberg/pull/14710) component.
-- Updates the [blocks creation tutorial](https://github.com/WordPress/gutenberg/pull/14584).
-- Typos & tweaks: [1](https://github.com/WordPress/gutenberg/pull/14490), [2](https://github.com/WordPress/gutenberg/pull/14516), [3](https://github.com/WordPress/gutenberg/pull/14530), [4](https://github.com/WordPress/gutenberg/pull/14565), [5](https://github.com/WordPress/gutenberg/pull/14597), [6](https://github.com/WordPress/gutenberg/pull/14368), [7](https://github.com/WordPress/gutenberg/pull/14666), [8](https://github.com/WordPress/gutenberg/pull/14686), [9](https://github.com/WordPress/gutenberg/pull/14690).
+-   Document the [block editor module](https://github.com/WordPress/gutenberg/pull/14566).
+-   Add design documentation for the [Panel](https://github.com/WordPress/gutenberg/pull/14504) component.
+-   Document [webpack config extensibility](https://github.com/WordPress/gutenberg/pull/14590).
+-   Clarify [experimental and unstable API](https://github.com/WordPress/gutenberg/pull/14557) guidelines.
+-   Setup automatic [API documentation for the data](https://github.com/WordPress/gutenberg/pull/14277) module.
+-   Improve the [automatic](https://github.com/WordPress/gutenberg/pull/14549) [API](https://github.com/WordPress/gutenberg/pull/14656) documentation tool.
+-   Enhance the components documentation:
+    -   [FormFileUpload](https://github.com/WordPress/gutenberg/pull/14661) component.
+    -   [MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/14645) component.
+    -   [Notice](https://github.com/WordPress/gutenberg/pull/14514) component.
+    -   [TextControl](https://github.com/WordPress/gutenberg/pull/14710) component.
+-   Updates the [blocks creation tutorial](https://github.com/WordPress/gutenberg/pull/14584).
+-   Typos & tweaks: [1](https://github.com/WordPress/gutenberg/pull/14490), [2](https://github.com/WordPress/gutenberg/pull/14516), [3](https://github.com/WordPress/gutenberg/pull/14530), [4](https://github.com/WordPress/gutenberg/pull/14565), [5](https://github.com/WordPress/gutenberg/pull/14597), [6](https://github.com/WordPress/gutenberg/pull/14368), [7](https://github.com/WordPress/gutenberg/pull/14666), [8](https://github.com/WordPress/gutenberg/pull/14686), [9](https://github.com/WordPress/gutenberg/pull/14690).
 
 ### Various
 
-- Implement a built-in static [Gutenberg Playground](https://github.com/WordPress/gutenberg/pull/14497).
-- [Override core block server-side code](https://github.com/WordPress/gutenberg/pull/13521) when using the plugin.
-- Make the [block](https://github.com/WordPress/gutenberg/pull/14527) [editor](https://github.com/WordPress/gutenberg/pull/14387) [module](https://github.com/WordPress/gutenberg/pull/14548) [more](https://github.com/WordPress/gutenberg/pull/14678) reusable.
-- Expose the [lazy and Suspence](https://github.com/WordPress/gutenberg/pull/14412) React features in the element package.
-- Avoid assuming persisted [preferences state shape](https://github.com/WordPress/gutenberg/pull/14692).
-- Remove dead code from the [calendar block renderer](https://github.com/WordPress/gutenberg/pull/14546).
-- Extract [global CSS resets](https://github.com/WordPress/gutenberg/pull/14509) [into](https://github.com/WordPress/gutenberg/pull/14572) reusable mixins.
-- Replace [image urls by base 64 encoded images](https://github.com/WordPress/gutenberg/pull/14544) in reusable CSS files.
-- Add default empty implementation for the [block types save](https://github.com/WordPress/gutenberg/pull/14510) [function](https://github.com/WordPress/gutenberg/pull/14529).
-- Add a new data action to [replace the inner blocks](https://github.com/WordPress/gutenberg/pull/14291).
-- Support [parent data registry inheritance](https://github.com/WordPress/gutenberg/pull/14369) in the data module.
-- Add [extra props support for the Dashicon](https://github.com/WordPress/gutenberg/pull/14631) component.
-- Add a [BaseControl.VisualLabel](https://github.com/WordPress/gutenberg/pull/14179) component for purely visual labels.
-- Refactor [setupEditor effects to actions](https://github.com/WordPress/gutenberg/pull/14513).
-- Refactor the [core/data store](https://github.com/WordPress/gutenberg/pull/14634) to be independent from the registry object.
-- Remove [componentWillMount](https://github.com/WordPress/gutenberg/pull/14637) usage from LatestPostEdit component.
-- Add a generic [e2e test for block transforms](https://github.com/WordPress/gutenberg/pull/12336) and work on its [stability](https://github.com/WordPress/gutenberg/pull/14632).
-- Allow e2e test failures for [php versions lower than 5.6](https://github.com/WordPress/gutenberg/pull/14541).
-- Add eslint rule to prevent [incorrect truthy length property](https://github.com/WordPress/gutenberg/pull/14579/) checks.
-- Add eslint rule to [prevent unsafe setTimeout usage](https://github.com/WordPress/gutenberg/pull/14650) in components.
-- Run the local gutenberg environment in [debug mode](https://github.com/WordPress/gutenberg/pull/14371).
-- Disable [debug mode in local e2e tests](https://github.com/WordPress/gutenberg/pull/14638).
-- [Exclude test files](https://github.com/WordPress/gutenberg/pull/14468) while rebuilding packages.
-- [Make E2E tests resilient](https://github.com/WordPress/gutenberg/pull/14632) against transforms added by plugins.
-- Add [LGPL](https://github.com/WordPress/gutenberg/pull/14734) as an OSS license.
+-   Implement a built-in static [Gutenberg Playground](https://github.com/WordPress/gutenberg/pull/14497).
+-   [Override core block server-side code](https://github.com/WordPress/gutenberg/pull/13521) when using the plugin.
+-   Make the [block](https://github.com/WordPress/gutenberg/pull/14527) [editor](https://github.com/WordPress/gutenberg/pull/14387) [module](https://github.com/WordPress/gutenberg/pull/14548) [more](https://github.com/WordPress/gutenberg/pull/14678) reusable.
+-   Expose the [lazy and Suspence](https://github.com/WordPress/gutenberg/pull/14412) React features in the element package.
+-   Avoid assuming persisted [preferences state shape](https://github.com/WordPress/gutenberg/pull/14692).
+-   Remove dead code from the [calendar block renderer](https://github.com/WordPress/gutenberg/pull/14546).
+-   Extract [global CSS resets](https://github.com/WordPress/gutenberg/pull/14509) [into](https://github.com/WordPress/gutenberg/pull/14572) reusable mixins.
+-   Replace [image urls by base 64 encoded images](https://github.com/WordPress/gutenberg/pull/14544) in reusable CSS files.
+-   Add default empty implementation for the [block types save](https://github.com/WordPress/gutenberg/pull/14510) [function](https://github.com/WordPress/gutenberg/pull/14529).
+-   Add a new data action to [replace the inner blocks](https://github.com/WordPress/gutenberg/pull/14291).
+-   Support [parent data registry inheritance](https://github.com/WordPress/gutenberg/pull/14369) in the data module.
+-   Add [extra props support for the Dashicon](https://github.com/WordPress/gutenberg/pull/14631) component.
+-   Add a [BaseControl.VisualLabel](https://github.com/WordPress/gutenberg/pull/14179) component for purely visual labels.
+-   Refactor [setupEditor effects to actions](https://github.com/WordPress/gutenberg/pull/14513).
+-   Refactor the [core/data store](https://github.com/WordPress/gutenberg/pull/14634) to be independent from the registry object.
+-   Remove [componentWillMount](https://github.com/WordPress/gutenberg/pull/14637) usage from LatestPostEdit component.
+-   Add a generic [e2e test for block transforms](https://github.com/WordPress/gutenberg/pull/12336) and work on its [stability](https://github.com/WordPress/gutenberg/pull/14632).
+-   Allow e2e test failures for [php versions lower than 5.6](https://github.com/WordPress/gutenberg/pull/14541).
+-   Add eslint rule to prevent [incorrect truthy length property](https://github.com/WordPress/gutenberg/pull/14579/) checks.
+-   Add eslint rule to [prevent unsafe setTimeout usage](https://github.com/WordPress/gutenberg/pull/14650) in components.
+-   Run the local gutenberg environment in [debug mode](https://github.com/WordPress/gutenberg/pull/14371).
+-   Disable [debug mode in local e2e tests](https://github.com/WordPress/gutenberg/pull/14638).
+-   [Exclude test files](https://github.com/WordPress/gutenberg/pull/14468) while rebuilding packages.
+-   [Make E2E tests resilient](https://github.com/WordPress/gutenberg/pull/14632) against transforms added by plugins.
+-   Add [LGPL](https://github.com/WordPress/gutenberg/pull/14734) as an OSS license.
 
 = 5.3.0 =
 
+## Changelog
+
 ### Features
 
- - Add the [block management modal](https://github.com/WordPress/gutenberg/pull/14224): Ability to hide/show blocks in the inserter.
- - Support [nested blocks for the Cover Block](https://github.com/WordPress/gutenberg/pull/13822).
- - Add an experimental [Legacy Widget Block](https://github.com/WordPress/gutenberg/pull/13511) (enabled only in the plugin for the moment).
+-   Add the [block management modal](https://github.com/WordPress/gutenberg/pull/14224): Ability to hide/show blocks in the inserter.
+-   Support [nested blocks for the Cover Block](https://github.com/WordPress/gutenberg/pull/13822).
+-   Add an experimental [Legacy Widget Block](https://github.com/WordPress/gutenberg/pull/13511) (enabled only in the plugin for the moment).
 
 ### Enhancements
 
- - Update the [block outlines](https://github.com/WordPress/gutenberg/pull/14145) for the hover and selected states.
- - Allow [undoing automatic pattern block transformations](https://github.com/WordPress/gutenberg/pull/13917).
- - Add a [RichText collapsed format toolbar](https://github.com/WordPress/gutenberg/pull/14233) for code, inline image and strikethrough formats.
- - Allow [collapsing inserter panels](https://github.com/WordPress/gutenberg/pull/13884) when searching.
- - Add ability to transform [video shortcodes to video blocks](https://github.com/WordPress/gutenberg/pull/14042).
- - Add ability to transform [audio shortcodes to audio blocks](https://github.com/WordPress/gutenberg/pull/14045).
- - Add new @wordpress/data actions to [invalidate the resolvers cache](https://github.com/WordPress/gutenberg/pull/14225).
- - Support [custom classNames in the ToggleControl](https://github.com/WordPress/gutenberg/pull/13804) component.
- - Clarify the [button to exit the post lock](https://github.com/WordPress/gutenberg/pull/14347) modal.
- - Improve the [block validation error message](https://github.com/WordPress/gutenberg/pull/13499).
- - [Automatically use the WordPress](https://github.com/WordPress/gutenberg/pull/13877)  [babel config](https://github.com/WordPress/gutenberg/pull/14168) when using @wordpress/scripts CLI.
- - Add keyboard [shortcuts to indent/outdent](https://github.com/WordPress/gutenberg/pull/14343) list items.
- - Use [links instead of buttons](https://github.com/WordPress/gutenberg/pull/10815) in the document outline.
- - Use [`<s>` for strikethrough](https://github.com/WordPress/gutenberg/pull/14389), [not `<del>`](https://github.com/WordPress/gutenberg/pull/14430).
- - Center the [tooltips content](https://github.com/WordPress/gutenberg/pull/14473).
- - Update wording of the [block switcher tooltip](https://github.com/WordPress/gutenberg/pull/14470).
- - Add [support for the reduced motion](https://github.com/WordPress/gutenberg/pull/14021) browser mode.
-
-### Bug Fixes
-
- - Always show the [current month in the Calendar](https://github.com/WordPress/gutenberg/pull/13873) block for All CPTs but post.
- - In the Latest posts block, [avoid full line clickable titles](https://github.com/WordPress/gutenberg/pull/14109).
- - Avoid relying on DOM nodes to add the [empty line in RichText](https://github.com/WordPress/gutenberg/pull/13850)  [component](https://github.com/WordPress/gutenberg/pull/14315). This fixes a number of lingering empty lines.
- - Fix the [MediaPlaceholder icon color](https://github.com/WordPress/gutenberg/pull/14257) on dark backgrounds.
- - Fix the [Classic block toolbar in RTL](https://github.com/WordPress/gutenberg/pull/14088) languages.
- - Fix the [more tag in the Classic block](https://github.com/WordPress/gutenberg/pull/14173).
- - Fix the [quote to heading](https://github.com/WordPress/gutenberg/pull/14348) block transformation.
- - Fix “null” appearing when [merging empty headings](https://github.com/WordPress/gutenberg/pull/13981) and paragraphs.
- - Fix the [block insertion restrictions](https://github.com/WordPress/gutenberg/pull/14020) in the global inserter.
- - Fix the [prepareEditableTree](https://github.com/WordPress/gutenberg/pull/14284) custom RichText Format API.
- - [Changes to the internal RichText format](https://github.com/WordPress/gutenberg/pull/14380) representation to separate objects (inline image..) from formats (bold…). This fixes a number of RichText issues.
- - Fix the [Spinner component styling](https://github.com/WordPress/gutenberg/pull/14418) in RTL languages.
- - Fix [focus loss when using the Set Featured Image](https://github.com/WordPress/gutenberg/pull/14415) buttons.
- - Fix [template lock](https://github.com/WordPress/gutenberg/pull/14390) not being taken into consideration.
- - Fix [composed characters](https://github.com/WordPress/gutenberg/pull/14449) at the beginning of RichText.
- - Fix several [block multi-selection](https://github.com/WordPress/gutenberg/pull/14448)  [bugs](https://github.com/WordPress/gutenberg/pull/14453).
- - Allow using a [float number as a step](https://github.com/WordPress/gutenberg/pull/14322) when using the RangeControl component.
- - Fix error when pasting a [caption shortcode without an image](https://github.com/WordPress/gutenberg/pull/14365) tag.
- - Fix [focus loss](https://github.com/WordPress/gutenberg/pull/14444) when combining sidebars and modals (or popovers).
- - Escape the [greater than character](https://github.com/WordPress/gutenberg/pull/9963) when serializing the blocks content into HTML.
- - Fix [pasting links into the classic block](https://github.com/WordPress/gutenberg/pull/14485).
- - Include missing [CSS in the classic block](https://github.com/WordPress/gutenberg/pull/12441).
+-   Update the [block outlines](https://github.com/WordPress/gutenberg/pull/14145) for the hover and selected states.
+-   Allow [undoing automatic pattern block transformations](https://github.com/WordPress/gutenberg/pull/13917).
+-   Add a [RichText collapsed format toolbar](https://github.com/WordPress/gutenberg/pull/14233) for code, inline image and strikethrough formats.
+-   Allow [collapsing inserter panels](https://github.com/WordPress/gutenberg/pull/13884) when searching.
+-   Add ability to transform [video shortcodes to video blocks](https://github.com/WordPress/gutenberg/pull/14042).
+-   Add ability to transform [audio shortcodes to audio blocks](https://github.com/WordPress/gutenberg/pull/14045).
+-   Add new @wordpress/data actions to [invalidate the resolvers cache](https://github.com/WordPress/gutenberg/pull/14225).
+-   Support [custom classNames in the ToggleControl](https://github.com/WordPress/gutenberg/pull/13804) component.
+-   Clarify the [button to exit the post lock](https://github.com/WordPress/gutenberg/pull/14347) modal.
+-   Improve the [block validation error message](https://github.com/WordPress/gutenberg/pull/13499).
+-   [Automatically use the WordPress](https://github.com/WordPress/gutenberg/pull/13877) [babel config](https://github.com/WordPress/gutenberg/pull/14168) when using @wordpress/scripts CLI.
+-   Add keyboard [shortcuts to indent/outdent](https://github.com/WordPress/gutenberg/pull/14343) list items.
+-   Use [links instead of buttons](https://github.com/WordPress/gutenberg/pull/10815) in the document outline.
+-   Use [`<s>` for strikethrough](https://github.com/WordPress/gutenberg/pull/14389), [not `<del>`](https://github.com/WordPress/gutenberg/pull/14430).
+-   Center the [tooltips content](https://github.com/WordPress/gutenberg/pull/14473).
+-   Update wording of the [block switcher tooltip](https://github.com/WordPress/gutenberg/pull/14470).
+-   Add [support for the reduced motion](https://github.com/WordPress/gutenberg/pull/14021) browser mode.
+
+### Bug Fixes
+
+-   Always show the [current month in the Calendar](https://github.com/WordPress/gutenberg/pull/13873) block for All CPTs but post.
+-   In the Latest posts block, [avoid full line clickable titles](https://github.com/WordPress/gutenberg/pull/14109).
+-   Avoid relying on DOM nodes to add the [empty line in RichText](https://github.com/WordPress/gutenberg/pull/13850) [component](https://github.com/WordPress/gutenberg/pull/14315). This fixes a number of lingering empty lines.
+-   Fix the [MediaPlaceholder icon color](https://github.com/WordPress/gutenberg/pull/14257) on dark backgrounds.
+-   Fix the [Classic block toolbar in RTL](https://github.com/WordPress/gutenberg/pull/14088) languages.
+-   Fix the [more tag in the Classic block](https://github.com/WordPress/gutenberg/pull/14173).
+-   Fix the [quote to heading](https://github.com/WordPress/gutenberg/pull/14348) block transformation.
+-   Fix “null” appearing when [merging empty headings](https://github.com/WordPress/gutenberg/pull/13981) and paragraphs.
+-   Fix the [block insertion restrictions](https://github.com/WordPress/gutenberg/pull/14020) in the global inserter.
+-   Fix the [prepareEditableTree](https://github.com/WordPress/gutenberg/pull/14284) custom RichText Format API.
+-   [Changes to the internal RichText format](https://github.com/WordPress/gutenberg/pull/14380) representation to separate objects (inline image..) from formats (bold…). This fixes a number of RichText issues.
+-   Fix the [Spinner component styling](https://github.com/WordPress/gutenberg/pull/14418) in RTL languages.
+-   Fix [focus loss when using the Set Featured Image](https://github.com/WordPress/gutenberg/pull/14415) buttons.
+-   Fix [template lock](https://github.com/WordPress/gutenberg/pull/14390) not being taken into consideration.
+-   Fix [composed characters](https://github.com/WordPress/gutenberg/pull/14449) at the beginning of RichText.
+-   Fix several [block multi-selection](https://github.com/WordPress/gutenberg/pull/14448) [bugs](https://github.com/WordPress/gutenberg/pull/14453).
+-   Allow using a [float number as a step](https://github.com/WordPress/gutenberg/pull/14322) when using the RangeControl component.
+-   Fix error when pasting a [caption shortcode without an image](https://github.com/WordPress/gutenberg/pull/14365) tag.
+-   Fix [focus loss](https://github.com/WordPress/gutenberg/pull/14444) when combining sidebars and modals (or popovers).
+-   Escape the [greater than character](https://github.com/WordPress/gutenberg/pull/9963) when serializing the blocks content into HTML.
+-   Fix [pasting links into the classic block](https://github.com/WordPress/gutenberg/pull/14485).
+-   Include missing [CSS in the classic block](https://github.com/WordPress/gutenberg/pull/12441).
 
 ### Documentation
 
- - Enhance the [i18n process documentation](https://github.com/WordPress/gutenberg/pull/13909) with a complete example.
- - Add design guidelines to several components:
- - The [Button](https://github.com/WordPress/gutenberg/pull/14194) component
- - The [CheckboxControl](https://github.com/WordPress/gutenberg/pull/14153) component
- - The [MenuItemsChoice](https://github.com/WordPress/gutenberg/pull/14465) component.
- - The [MenuGroup](https://github.com/WordPress/gutenberg/pull/14466) component.
- - Update the [JavaScript setup tutorial](https://github.com/WordPress/gutenberg/pull/14440) to rely on the @wordpress/scripts package.
- - Lowercase [block editor](https://github.com/WordPress/gutenberg/pull/14205) and [classic editor](https://github.com/WordPress/gutenberg/pull/14203) terms to conform to the copy guidelines.
- - Use [a central script](https://github.com/WordPress/gutenberg/pull/14216) to generate the JavaScript API documentation and run [in parallel](https://github.com/WordPress/gutenberg/pull/14295).
- - Update the [packages release](https://github.com/WordPress/gutenberg/pull/14136)  [process](https://github.com/WordPress/gutenberg/pull/14260).
- - Update the plugin release docs to rely on a [lighter SVN checkout](https://github.com/WordPress/gutenberg/pull/14259).
- - Add automatic generation of JavaScript API documentation for:
-   - [@wordpress/element](https://github.com/WordPress/gutenberg/pull/14269)
-   - [@wordpress/escape-html](https://github.com/WordPress/gutenberg/pull/14268)
-   - [@wordpress/html-entities](https://github.com/WordPress/gutenberg/pull/14267)
-   - [@wordpress/keycodes](https://github.com/WordPress/gutenberg/pull/14265)
-   - [@wordpress/a11y](https://github.com/WordPress/gutenberg/pull/14288)
-   - [@wordpress/blob](https://github.com/WordPress/gutenberg/pull/14286)
-   - [@wordpress/block-library](https://github.com/WordPress/gutenberg/pull/14282)
-   - [@wordpress/compose](https://github.com/WordPress/gutenberg/pull/14278)
-   - [@wordpress/dom](https://github.com/WordPress/gutenberg/pull/14273)
-   - [@wordpress/i18n](https://github.com/WordPress/gutenberg/pull/14266)
-   - [@wordpress/autop](https://github.com/WordPress/gutenberg/pull/14287)
-   - [@wordpress/dom-ready](https://github.com/WordPress/gutenberg/pull/14272)
-   - [@wordpress/block-editor](https://github.com/WordPress/gutenberg/pull/14285)
-   - [@wordpress/rich-text](https://github.com/WordPress/gutenberg/pull/14220)
-   - [@wordpress/blocks](https://github.com/WordPress/gutenberg/pull/14279)
-   - [@wordpress/deprecated](https://github.com/WordPress/gutenberg/pull/14275)
-   - [@wordpress/priority-queue](https://github.com/WordPress/gutenberg/pull/14262)
-   - [@wordpress/shortcode](https://github.com/WordPress/gutenberg/pull/14218)
-   - [@wordpress/viewport](https://github.com/WordPress/gutenberg/pull/14214)
-   - [@wordpress/url](https://github.com/WordPress/gutenberg/pull/14217)
-   - [@wordpress/redux-routine](https://github.com/WordPress/gutenberg/pull/14228)
-   - [@wordpress/date](https://github.com/WordPress/gutenberg/pull/14276)
-   - [@wordpress/block-serialization-default-parser](https://github.com/WordPress/gutenberg/pull/14280)
-   - [@wordpress/plugins](https://github.com/WordPress/gutenberg/pull/14263)
-   - [@wordpress/wordcount](https://github.com/WordPress/gutenberg/pull/14213)
-   - [@wordpress/edit-post](https://github.com/WordPress/gutenberg/pull/14271)
- - Link to the [editor user documentation](https://github.com/WordPress/gutenberg/pull/14316) and remove the user documentation [markdown file](https://github.com/WordPress/gutenberg/pull/14318/files).
- - Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/14321), [2](https://github.com/WordPress/gutenberg/pull/14355), [3](https://github.com/WordPress/gutenberg/pull/14382), [4](https://github.com/WordPress/gutenberg/pull/14439), [5](https://github.com/WordPress/gutenberg/pull/14471).
+-   Enhance the [i18n process documentation](https://github.com/WordPress/gutenberg/pull/13909) with a complete example.
+-   Add design guidelines to several components:
+-   The [Button](https://github.com/WordPress/gutenberg/pull/14194) component
+-   The [CheckboxControl](https://github.com/WordPress/gutenberg/pull/14153) component
+-   The [MenuItemsChoice](https://github.com/WordPress/gutenberg/pull/14465) component.
+-   The [MenuGroup](https://github.com/WordPress/gutenberg/pull/14466) component.
+-   Update the [JavaScript setup tutorial](https://github.com/WordPress/gutenberg/pull/14440) to rely on the @wordpress/scripts package.
+-   Lowercase [block editor](https://github.com/WordPress/gutenberg/pull/14205) and [classic editor](https://github.com/WordPress/gutenberg/pull/14203) terms to conform to the copy guidelines.
+-   Use [a central script](https://github.com/WordPress/gutenberg/pull/14216) to generate the JavaScript API documentation and run [in parallel](https://github.com/WordPress/gutenberg/pull/14295).
+-   Update the [packages release](https://github.com/WordPress/gutenberg/pull/14136) [process](https://github.com/WordPress/gutenberg/pull/14260).
+-   Update the plugin release docs to rely on a [lighter SVN checkout](https://github.com/WordPress/gutenberg/pull/14259).
+-   Add automatic generation of JavaScript API documentation for:
+    -   [@wordpress/element](https://github.com/WordPress/gutenberg/pull/14269)
+    -   [@wordpress/escape-html](https://github.com/WordPress/gutenberg/pull/14268)
+    -   [@wordpress/html-entities](https://github.com/WordPress/gutenberg/pull/14267)
+    -   [@wordpress/keycodes](https://github.com/WordPress/gutenberg/pull/14265)
+    -   [@wordpress/a11y](https://github.com/WordPress/gutenberg/pull/14288)
+    -   [@wordpress/blob](https://github.com/WordPress/gutenberg/pull/14286)
+    -   [@wordpress/block-library](https://github.com/WordPress/gutenberg/pull/14282)
+    -   [@wordpress/compose](https://github.com/WordPress/gutenberg/pull/14278)
+    -   [@wordpress/dom](https://github.com/WordPress/gutenberg/pull/14273)
+    -   [@wordpress/i18n](https://github.com/WordPress/gutenberg/pull/14266)
+    -   [@wordpress/autop](https://github.com/WordPress/gutenberg/pull/14287)
+    -   [@wordpress/dom-ready](https://github.com/WordPress/gutenberg/pull/14272)
+    -   [@wordpress/block-editor](https://github.com/WordPress/gutenberg/pull/14285)
+    -   [@wordpress/rich-text](https://github.com/WordPress/gutenberg/pull/14220)
+    -   [@wordpress/blocks](https://github.com/WordPress/gutenberg/pull/14279)
+    -   [@wordpress/deprecated](https://github.com/WordPress/gutenberg/pull/14275)
+    -   [@wordpress/priority-queue](https://github.com/WordPress/gutenberg/pull/14262)
+    -   [@wordpress/shortcode](https://github.com/WordPress/gutenberg/pull/14218)
+    -   [@wordpress/viewport](https://github.com/WordPress/gutenberg/pull/14214)
+    -   [@wordpress/url](https://github.com/WordPress/gutenberg/pull/14217)
+    -   [@wordpress/redux-routine](https://github.com/WordPress/gutenberg/pull/14228)
+    -   [@wordpress/date](https://github.com/WordPress/gutenberg/pull/14276)
+    -   [@wordpress/block-serialization-default-parser](https://github.com/WordPress/gutenberg/pull/14280)
+    -   [@wordpress/plugins](https://github.com/WordPress/gutenberg/pull/14263)
+    -   [@wordpress/wordcount](https://github.com/WordPress/gutenberg/pull/14213)
+    -   [@wordpress/edit-post](https://github.com/WordPress/gutenberg/pull/14271)
+-   Link to the [editor user documentation](https://github.com/WordPress/gutenberg/pull/14316) and remove the user documentation [markdown file](https://github.com/WordPress/gutenberg/pull/14318/files).
+-   Typos and tweaks: [1](https://github.com/WordPress/gutenberg/pull/14321), [2](https://github.com/WordPress/gutenberg/pull/14355), [3](https://github.com/WordPress/gutenberg/pull/14382), [4](https://github.com/WordPress/gutenberg/pull/14439), [5](https://github.com/WordPress/gutenberg/pull/14471).
 
 ### Various
 
- - Upgrade to [React 16.8.4](https://github.com/WordPress/gutenberg/pull/14400) ([React Hooks](https://github.com/WordPress/gutenberg/pull/14425)).
- - Fix the [dependencies of the e2e-tests](https://github.com/WordPress/gutenberg/pull/14212) and the [e2e-test-utils](https://github.com/WordPress/gutenberg/pull/14374) npm packages.
- - Avoid disabling [regeneratorRuntime in the babel config](https://github.com/WordPress/gutenberg/pull/14130) to avoid globals in npm packages.
- - [Work](https://github.com/WordPress/gutenberg/pull/14244)  [on](https://github.com/WordPress/gutenberg/pull/14247)  [various](https://github.com/WordPress/gutenberg/pull/14340)  [e2e tests](https://github.com/WordPress/gutenberg/pull/14219)  [stability](https://github.com/WordPress/gutenberg/pull/14230) improvements.
- - Regenerate RSS/Search block [test fixtures](https://github.com/WordPress/gutenberg/pull/14122).
- - [Move to travis.com](https://github.com/WordPress/gutenberg/pull/14250) as a CI server.
- - Add [clickBlockToolbarButton](https://github.com/WordPress/gutenberg/pull/14254) e2e test utility.
- - Add e2e tests:
-   - to check the [keyboard navigation](https://github.com/WordPress/gutenberg/pull/13455) through blocks.
-   - to verify that [the default block is selected](https://github.com/WordPress/gutenberg/pull/14191) after removing all the blocks.
-   - to check the InnerBlocks [allowed blocks restrictions](https://github.com/WordPress/gutenberg/pull/14054).
- - Add unit tests [for the isKeyboardEvent](https://github.com/WordPress/gutenberg/pull/14073) utility.
- - Remove [CC-BY-3.0](https://github.com/WordPress/gutenberg/pull/14329) from the GPLv2 compatible licenses.
- - Polish the @wordpress/block-editor module:
-   - Move the [block specific components](https://github.com/WordPress/gutenberg/pull/14112) to the package.
-   - [Update the classnames](https://github.com/WordPress/gutenberg/pull/14420) to follow the CSS guidelines.
- - Update [eslint rules npm](https://github.com/WordPress/gutenberg/pull/14077)  [packages](https://github.com/WordPress/gutenberg/pull/14339).
- - Simplify the [hierarchical term selector strings](https://github.com/WordPress/gutenberg/pull/13938).
- - Update the [Latest comments block to use the “align support config”](https://github.com/WordPress/gutenberg/pull/11411) instead of a custom implementation.
- - Remove the [block snapshots tests](https://github.com/WordPress/gutenberg/pull/14349).
- - Remove [post install scripts](https://github.com/WordPress/gutenberg/pull/14353) and only run these in CI to improve test performance.
- - Tweak the plugin build zip script to [avoid prompting](https://github.com/WordPress/gutenberg/pull/14352) when the build environment is clean.
- - Add [withRegistry](https://github.com/WordPress/gutenberg/pull/14370) higher-order component to the @wordpress/data module.
- - Add missing [module entry point to the notices](https://github.com/WordPress/gutenberg/pull/14388) package.json.
- - Remove the Gutenberg [5.3 deprecated functions](https://github.com/WordPress/gutenberg/pull/14380).
- - Ensure [sourcemaps published to npm](https://github.com/WordPress/gutenberg/pull/14409) contain safe relative paths.
- - Remove the [replace_block filter usage](https://github.com/WordPress/gutenberg/pull/13569) and extend core editor settings instead.
- - Improve handling of [transpiled packages in unit tests](https://github.com/WordPress/gutenberg/pull/14432).
- - Add CLI arguments to launch [e2e tests in interactive mode](https://github.com/WordPress/gutenberg/pull/14129) more easily.
- -  Select a [unique radio input](https://github.com/WordPress/gutenberg/pull/14128) in a group when using the tabbables utility.
+-   Upgrade to [React 16.8.4](https://github.com/WordPress/gutenberg/pull/14400) ([React Hooks](https://github.com/WordPress/gutenberg/pull/14425)).
+-   Fix the [dependencies of the e2e-tests](https://github.com/WordPress/gutenberg/pull/14212) and the [e2e-test-utils](https://github.com/WordPress/gutenberg/pull/14374) npm packages.
+-   Avoid disabling [regeneratorRuntime in the babel config](https://github.com/WordPress/gutenberg/pull/14130) to avoid globals in npm packages.
+-   [Work](https://github.com/WordPress/gutenberg/pull/14244) [on](https://github.com/WordPress/gutenberg/pull/14247) [various](https://github.com/WordPress/gutenberg/pull/14340) [e2e tests](https://github.com/WordPress/gutenberg/pull/14219) [stability](https://github.com/WordPress/gutenberg/pull/14230) improvements.
+-   Regenerate RSS/Search block [test fixtures](https://github.com/WordPress/gutenberg/pull/14122).
+-   [Move to travis.com](https://github.com/WordPress/gutenberg/pull/14250) as a CI server.
+-   Add [clickBlockToolbarButton](https://github.com/WordPress/gutenberg/pull/14254) e2e test utility.
+-   Add e2e tests:
+    -   to check the [keyboard navigation](https://github.com/WordPress/gutenberg/pull/13455) through blocks.
+    -   to verify that [the default block is selected](https://github.com/WordPress/gutenberg/pull/14191) after removing all the blocks.
+    -   to check the InnerBlocks [allowed blocks restrictions](https://github.com/WordPress/gutenberg/pull/14054).
+-   Add unit tests [for the isKeyboardEvent](https://github.com/WordPress/gutenberg/pull/14073) utility.
+-   Remove [CC-BY-3.0](https://github.com/WordPress/gutenberg/pull/14329) from the GPLv2 compatible licenses.
+-   Polish the @wordpress/block-editor module:
+    -   Move the [block specific components](https://github.com/WordPress/gutenberg/pull/14112) to the package.
+    -   [Update the classnames](https://github.com/WordPress/gutenberg/pull/14420) to follow the CSS guidelines.
+-   Update [eslint rules npm](https://github.com/WordPress/gutenberg/pull/14077) [packages](https://github.com/WordPress/gutenberg/pull/14339).
+-   Simplify the [hierarchical term selector strings](https://github.com/WordPress/gutenberg/pull/13938).
+-   Update the [Latest comments block to use the “align support config”](https://github.com/WordPress/gutenberg/pull/11411) instead of a custom implementation.
+-   Remove the [block snapshots tests](https://github.com/WordPress/gutenberg/pull/14349).
+-   Remove [post install scripts](https://github.com/WordPress/gutenberg/pull/14353) and only run these in CI to improve test performance.
+-   Tweak the plugin build zip script to [avoid prompting](https://github.com/WordPress/gutenberg/pull/14352) when the build environment is clean.
+-   Add [withRegistry](https://github.com/WordPress/gutenberg/pull/14370) higher-order component to the @wordpress/data module.
+-   Add missing [module entry point to the notices](https://github.com/WordPress/gutenberg/pull/14388) package.json.
+-   Remove the Gutenberg [5.3 deprecated functions](https://github.com/WordPress/gutenberg/pull/14380).
+-   Ensure [sourcemaps published to npm](https://github.com/WordPress/gutenberg/pull/14409) contain safe relative paths.
+-   Remove the [replace_block filter usage](https://github.com/WordPress/gutenberg/pull/13569) and extend core editor settings instead.
+-   Improve handling of [transpiled packages in unit tests](https://github.com/WordPress/gutenberg/pull/14432).
+-   Add CLI arguments to launch [e2e tests in interactive mode](https://github.com/WordPress/gutenberg/pull/14129) more easily.
+-   Select a [unique radio input](https://github.com/WordPress/gutenberg/pull/14128) in a group when using the tabbables utility.
 
 = 5.2.0 =
 
+## Changelog
+
 ### Enhancements
 
-- Update the [button block description](https://github.com/WordPress/gutenberg/pull/13933) wording.
-- Design and a11y [improvements for the custom color picker](https://github.com/WordPress/gutenberg/pull/13708).
-- Tweak the [FontSizePicker height](https://github.com/WordPress/gutenberg/pull/11555) to match regular select elements.
-- Improvements to the [local state persistence](https://github.com/WordPress/gutenberg/pull/13951) behavior.
-- Improvements to the [URL input popove](https://github.com/WordPress/gutenberg/pull/13973) [design](https://github.com/WordPress/gutenberg/pull/14015).
-- Disable [block navigation and document outline items](https://github.com/WordPress/gutenberg/pull/14081) in text mode.
-- Improve the [quote block icons](https://github.com/WordPress/gutenberg/pull/14091).
-- Animate the [sidebar tabs switching](https://github.com/WordPress/gutenberg/pull/13956).
-
-### Bug Fixes
-
-- Select [the last block](https://github.com/WordPress/gutenberg/pull/13294) when pasting content.
-- Fix the block validation when the [default attribute value](https://github.com/WordPress/gutenberg/pull/12757) of a block is changed.
-- Forces the [min/max value validation](https://github.com/WordPress/gutenberg/pull/12952) in the RangeControl component.
-- Display HTML properly in [the post titles](https://github.com/WordPress/gutenberg/pull/13622) of the latest posts block.
-- Fix drag and [dropping a column](https://github.com/WordPress/gutenberg/pull/13941) block on itself.
-- Fix [new lines](https://github.com/WordPress/gutenberg/pull/13799) in the preformatted block.
-- Fix [text underline shortcut](https://github.com/WordPress/gutenberg/pull/14008).
-- Fix calling [gutenberg plugin functions in the frontend](https://github.com/WordPress/gutenberg/pull/14096) context.
-- Fix [pasting a single line](https://github.com/WordPress/gutenberg/pull/14138) from Google Docs (ignoring the strong element).
-- Fix FocalPointPicker rendering [unlabelled input fields](https://github.com/WordPress/gutenberg/pull/14152).
-- Show the [images uploaded in the gallery block](https://github.com/WordPress/gutenberg/pull/12435) in the media modal.
-- Fix [wordwise selection](https://github.com/WordPress/gutenberg/pull/14184) on Windows.
-- [Preserve empty table cells](https://github.com/WordPress/gutenberg/pull/14137) when pasting content.
-- Fix [focus loss](https://github.com/WordPress/gutenberg/pull/14189) when deleting the last block.
+-   Update the [button block description](https://github.com/WordPress/gutenberg/pull/13933) wording.
+-   Design and a11y [improvements for the custom color picker](https://github.com/WordPress/gutenberg/pull/13708).
+-   Tweak the [FontSizePicker height](https://github.com/WordPress/gutenberg/pull/11555) to match regular select elements.
+-   Improvements to the [local state persistence](https://github.com/WordPress/gutenberg/pull/13951) behavior.
+-   Improvements to the [URL input popove](https://github.com/WordPress/gutenberg/pull/13973) [design](https://github.com/WordPress/gutenberg/pull/14015).
+-   Disable [block navigation and document outline items](https://github.com/WordPress/gutenberg/pull/14081) in text mode.
+-   Improve the [quote block icons](https://github.com/WordPress/gutenberg/pull/14091).
+-   Animate the [sidebar tabs switching](https://github.com/WordPress/gutenberg/pull/13956).
+
+### Bug Fixes
+
+-   Select [the last block](https://github.com/WordPress/gutenberg/pull/13294) when pasting content.
+-   Fix the block validation when the [default attribute value](https://github.com/WordPress/gutenberg/pull/12757) of a block is changed.
+-   Forces the [min/max value validation](https://github.com/WordPress/gutenberg/pull/12952) in the RangeControl component.
+-   Display HTML properly in [the post titles](https://github.com/WordPress/gutenberg/pull/13622) of the latest posts block.
+-   Fix drag and [dropping a column](https://github.com/WordPress/gutenberg/pull/13941) block on itself.
+-   Fix [new lines](https://github.com/WordPress/gutenberg/pull/13799) in the preformatted block.
+-   Fix [text underline shortcut](https://github.com/WordPress/gutenberg/pull/14008).
+-   Fix calling [gutenberg plugin functions in the frontend](https://github.com/WordPress/gutenberg/pull/14096) context.
+-   Fix [pasting a single line](https://github.com/WordPress/gutenberg/pull/14138) from Google Docs (ignoring the strong element).
+-   Fix FocalPointPicker rendering [unlabelled input fields](https://github.com/WordPress/gutenberg/pull/14152).
+-   Show the [images uploaded in the gallery block](https://github.com/WordPress/gutenberg/pull/12435) in the media modal.
+-   Fix [wordwise selection](https://github.com/WordPress/gutenberg/pull/14184) on Windows.
+-   [Preserve empty table cells](https://github.com/WordPress/gutenberg/pull/14137) when pasting content.
+-   Fix [focus loss](https://github.com/WordPress/gutenberg/pull/14189) when deleting the last block.
 
 ### Documentation
 
-- Add [the Block specific toolbar button](https://github.com/WordPress/gutenberg/pull/14113) sample to the format api tutorial.
-- Introduce a package to automatically generate the [API documentation](https://github.com/WordPress/gutenberg/pull/13329).
-- Tweaks: [1](https://github.com/WordPress/gutenberg/pull/13906), [2](https://github.com/WordPress/gutenberg/pull/13920), [3](https://github.com/WordPress/gutenberg/pull/13940), [4](https://github.com/WordPress/gutenberg/pull/13954), [5](https://github.com/WordPress/gutenberg/pull/13993), [6](https://github.com/WordPress/gutenberg/pull/13995), [7](https://github.com/WordPress/gutenberg/pull/14083), [8](https://github.com/WordPress/gutenberg/pull/14099), [9](https://github.com/WordPress/gutenberg/pull/14089), [10](https://github.com/WordPress/gutenberg/pull/14177).
+-   Add [the Block specific toolbar button](https://github.com/WordPress/gutenberg/pull/14113) sample to the format api tutorial.
+-   Introduce a package to automatically generate the [API documentation](https://github.com/WordPress/gutenberg/pull/13329).
+-   Tweaks: [1](https://github.com/WordPress/gutenberg/pull/13906), [2](https://github.com/WordPress/gutenberg/pull/13920), [3](https://github.com/WordPress/gutenberg/pull/13940), [4](https://github.com/WordPress/gutenberg/pull/13954), [5](https://github.com/WordPress/gutenberg/pull/13993), [6](https://github.com/WordPress/gutenberg/pull/13995), [7](https://github.com/WordPress/gutenberg/pull/14083), [8](https://github.com/WordPress/gutenberg/pull/14099), [9](https://github.com/WordPress/gutenberg/pull/14089), [10](https://github.com/WordPress/gutenberg/pull/14177).
 
 ### Various
 
-- Introduce [a](https://github.com/WordPress/gutenberg/pull/14082) [generic](https://github.com/WordPress/gutenberg/pull/13088) [block](https://github.com/WordPress/gutenberg/pull/13105) [editor](https://github.com/WordPress/gutenberg/pull/14116) [module](https://github.com/WordPress/gutenberg/pull/14161).
-- Creates [an empty page](https://github.com/WordPress/gutenberg/pull/13912) that will contain the future widget screen explorations.
-- Fix [emoji in the demo content](https://github.com/WordPress/gutenberg/pull/13969).
-- Warn when the user is using an [inline element as a RichText container](https://github.com/WordPress/gutenberg/pull/13921).
-- Make Babel [import JSX pragma plugin](https://github.com/WordPress/gutenberg/pull/13809/) [aware](https://github.com/WordPress/gutenberg/pull/14106) of the createElement usage.
-- [Include the JSX pragma plugin](https://github.com/WordPress/gutenberg/pull/13540) into the default WordPress babel config.
-- Update the [non-embeddable URLs](https://github.com/WordPress/gutenberg/pull/13715) wording.
+-   Introduce [a](https://github.com/WordPress/gutenberg/pull/14082) [generic](https://github.com/WordPress/gutenberg/pull/13088) [block](https://github.com/WordPress/gutenberg/pull/13105) [editor](https://github.com/WordPress/gutenberg/pull/14116) [module](https://github.com/WordPress/gutenberg/pull/14161).
+-   Creates [an empty page](https://github.com/WordPress/gutenberg/pull/13912) that will contain the future widget screen explorations.
+-   Fix [emoji in the demo content](https://github.com/WordPress/gutenberg/pull/13969).
+-   Warn when the user is using an [inline element as a RichText container](https://github.com/WordPress/gutenberg/pull/13921).
+-   Make Babel [import JSX pragma plugin](https://github.com/WordPress/gutenberg/pull/13809/) [aware](https://github.com/WordPress/gutenberg/pull/14106) of the createElement usage.
+-   [Include the JSX pragma plugin](https://github.com/WordPress/gutenberg/pull/13540) into the default WordPress babel config.
+-   Update the [non-embeddable URLs](https://github.com/WordPress/gutenberg/pull/13715) wording.
 
 ### Chore
 
-- Refactoring of the [block fixtures tests](https://github.com/WordPress/gutenberg/pull/13658).
-- Refactoring the eslint [custom import lint rule](https://github.com/WordPress/gutenberg/pull/13937).
-- Refactoring the selection of [previous/next blocks actions](https://github.com/WordPress/gutenberg/pull/13924).
-- Refactoring the [post editor effects](https://github.com/WordPress/gutenberg/pull/13716) to use actions and resolvers instead.
-- Use [forEach instead of map](https://github.com/WordPress/gutenberg/pull/13953) when appropriate and enforce it with an [eslint rule](https://github.com/WordPress/gutenberg/pull/14154).
-- Remove [TinyMCE external dependency](https://github.com/WordPress/gutenberg/pull/13971) mapping.
-- Extract [webpack config](https://github.com/WordPress/gutenberg/pull/13814) into the scripts package.
-- Improve [e2e](https://github.com/WordPress/gutenberg/pull/14048) [tests](https://github.com/WordPress/gutenberg/pull/14108) stability.t
-- Avoid mutating [webpack imported config](https://github.com/WordPress/gutenberg/pull/14039).
-- [Upgrade Jest](https://github.com/WordPress/gutenberg/pull/13922) to version 24.
-- Add [repository.directory field](https://github.com/WordPress/gutenberg/pull/14059) to the npm packages and an [linting rule](https://github.com/WordPress/gutenberg/pull/14200) to enforce it.
-- Update [server blocks script to use core](https://github.com/WordPress/gutenberg/pull/14097) equivalent function.
-- Remove the [vendor scripts registration](https://github.com/WordPress/gutenberg/pull/13573).
-- Use the editor settings to pass a [mediaUpload handler](https://github.com/WordPress/gutenberg/pull/14115).
-- Remove [deprecated Gutenberg plugin functions](https://github.com/WordPress/gutenberg/pull/14090) and [features](https://github.com/WordPress/gutenberg/pull/14144) moved to core.
-- Remove unnecessary [Enzyme React 16 workarounds](https://github.com/WordPress/gutenberg/pull/14156) from the unit tests.
-- Remove [wp-editor-font stylesheet override](https://github.com/WordPress/gutenberg/pull/14176).
-- [Preserve inline scripts](https://github.com/WordPress/gutenberg/pull/13581) when overriding core scripts.
-- Support [referencing the IconButton](https://github.com/WordPress/gutenberg/pull/14163) component.
-- Refactor the [i18n setup](https://github.com/WordPress/gutenberg/pull/12559) of the Gutenberg plugin.
+-   Refactoring of the [block fixtures tests](https://github.com/WordPress/gutenberg/pull/13658).
+-   Refactoring the eslint [custom import lint rule](https://github.com/WordPress/gutenberg/pull/13937).
+-   Refactoring the selection of [previous/next blocks actions](https://github.com/WordPress/gutenberg/pull/13924).
+-   Refactoring the [post editor effects](https://github.com/WordPress/gutenberg/pull/13716) to use actions and resolvers instead.
+-   Use [forEach instead of map](https://github.com/WordPress/gutenberg/pull/13953) when appropriate and enforce it with an [eslint rule](https://github.com/WordPress/gutenberg/pull/14154).
+-   Remove [TinyMCE external dependency](https://github.com/WordPress/gutenberg/pull/13971) mapping.
+-   Extract [webpack config](https://github.com/WordPress/gutenberg/pull/13814) into the scripts package.
+-   Improve [e2e](https://github.com/WordPress/gutenberg/pull/14048) [tests](https://github.com/WordPress/gutenberg/pull/14108) stability.t
+-   Avoid mutating [webpack imported config](https://github.com/WordPress/gutenberg/pull/14039).
+-   [Upgrade Jest](https://github.com/WordPress/gutenberg/pull/13922) to version 24.
+-   Add [repository.directory field](https://github.com/WordPress/gutenberg/pull/14059) to the npm packages and an [linting rule](https://github.com/WordPress/gutenberg/pull/14200) to enforce it.
+-   Update [server blocks script to use core](https://github.com/WordPress/gutenberg/pull/14097) equivalent function.
+-   Remove the [vendor scripts registration](https://github.com/WordPress/gutenberg/pull/13573).
+-   Use the editor settings to pass a [mediaUpload handler](https://github.com/WordPress/gutenberg/pull/14115).
+-   Remove [deprecated Gutenberg plugin functions](https://github.com/WordPress/gutenberg/pull/14090) and [features](https://github.com/WordPress/gutenberg/pull/14144) moved to core.
+-   Remove unnecessary [Enzyme React 16 workarounds](https://github.com/WordPress/gutenberg/pull/14156) from the unit tests.
+-   Remove [wp-editor-font stylesheet override](https://github.com/WordPress/gutenberg/pull/14176).
+-   [Preserve inline scripts](https://github.com/WordPress/gutenberg/pull/13581) when overriding core scripts.
+-   Support [referencing the IconButton](https://github.com/WordPress/gutenberg/pull/14163) component.
+-   Refactor the [i18n setup](https://github.com/WordPress/gutenberg/pull/12559) of the Gutenberg plugin.
 
 ### Mobile
 
-- Add an [image placeholder](https://github.com/WordPress/gutenberg/pull/13777) when the size is being computed.
-- Update the [image thumbnail](https://github.com/WordPress/gutenberg/pull/13764) when the image is being uploaded.
-- Support the [Format Library](https://github.com/WordPress/gutenberg/pull/12249).
-- Bottom Sheet [design](https://github.com/WordPress/gutenberg/pull/13855) [improvements](https://github.com/WordPress/gutenberg/pull/13882).
-- Update the default [block appender placehoder](https://github.com/WordPress/gutenberg/pull/13880).
-- Support [pasting content](https://github.com/WordPress/gutenberg/pull/13841) using the Gutenberg paste handler.
-- Fix [alignment issues](https://github.com/WordPress/gutenberg/pull/13945) for the appender and paragraph block placeholders.
+-   Add an [image placeholder](https://github.com/WordPress/gutenberg/pull/13777) when the size is being computed.
+-   Update the [image thumbnail](https://github.com/WordPress/gutenberg/pull/13764) when the image is being uploaded.
+-   Support the [Format Library](https://github.com/WordPress/gutenberg/pull/12249).
+-   Bottom Sheet [design](https://github.com/WordPress/gutenberg/pull/13855) [improvements](https://github.com/WordPress/gutenberg/pull/13882).
+-   Update the default [block appender placehoder](https://github.com/WordPress/gutenberg/pull/13880).
+-   Support [pasting content](https://github.com/WordPress/gutenberg/pull/13841) using the Gutenberg paste handler.
+-   Fix [alignment issues](https://github.com/WordPress/gutenberg/pull/13945) for the appender and paragraph block placeholders.
 
 = 5.1.1 =
 
-## Bug Fixes
+## Changelog
+
+### Bug Fixes
 
-- Fixes a [Firefox regression](https://github.com/WordPress/gutenberg/pull/13986) causing block content to be deleted.
+-   Fixes a [Firefox regression](https://github.com/WordPress/gutenberg/pull/13986) causing block content to be deleted.
 
 = 5.1.0 =
 
-## Features
-
-*   Add a new [Search block](https://github.com/WordPress/gutenberg/pull/13583).
-*   Add a new [Calendar](https://github.com/WordPress/gutenberg/pull/13772) block.
-*   Add a new [Tag Cloud](https://github.com/WordPress/gutenberg/pull/7875) block.
-
-## Enhancements
-
-*   Add micro-animations to the editor UI:
-    *   Opening [Popovers](https://github.com/WordPress/gutenberg/pull/13617).
-    *   Opening [Sidebars](https://github.com/WordPress/gutenberg/pull/13635).
-*   [Restore the block movers](https://github.com/WordPress/gutenberg/pull/12758) for the floated blocks.
-*   [Consistency in alignment options](https://github.com/WordPress/gutenberg/pull/9469) between archives and categories blocks.
-*   Set the minimum size for [form fields on mobile](https://github.com/WordPress/gutenberg/pull/13639).
-*   [Disable the block navigation](https://github.com/WordPress/gutenberg/pull/12185) in the code editor mode.
-*   Consistency for the [modal styles](https://github.com/WordPress/gutenberg/pull/13669).
-*   Improve the [FormToggle](https://github.com/WordPress/gutenberg/pull/12385) styling when used outside of WordPress context.
-*   Use the block [icons in the media placeholders](https://github.com/WordPress/gutenberg/pull/11788).
-*   Fix [rounded corners](https://github.com/WordPress/gutenberg/pull/13659) for the block svg icons.
-*   Improve the [CSS specificity](https://github.com/WordPress/gutenberg/pull/13025) [of the paragraph](https://github.com/WordPress/gutenberg/pull/12998) block [styles](https://github.com/WordPress/gutenberg/pull/13821).
-*   Require an initial [click on embed previews](https://github.com/WordPress/gutenberg/pull/12981) before being interactive.
-*   Improve the [disabled block switcher](https://github.com/WordPress/gutenberg/pull/13721) styles.
-*   [Do not split paragraph line breaks](https://github.com/WordPress/gutenberg/pull/13832) when transforming multiple paragraphs to a list.
-*   Enhance the Quote block styling for [different text alignments](https://github.com/WordPress/gutenberg/pull/13248).
-*   Remove the [left padding from the Quote](https://github.com/WordPress/gutenberg/pull/13846) block when it’s centered.
-*   A11y:
-    *   Improve the [permalink field label](https://github.com/WordPress/gutenberg/pull/12959).
-    *   Improve the [region navigation](https://github.com/WordPress/gutenberg/pull/8554) styling.
-*   Remove the [3 keywords limit](https://github.com/WordPress/gutenberg/pull/13848) for the block registration.
-*   Add consistent background colors to the [hovered menu items](https://github.com/WordPress/gutenberg/pull/13732).
-*   Allow the [editor notices to push down](https://github.com/WordPress/gutenberg/pull/13614) the content.
-*   Rename the [default block styles](https://github.com/WordPress/gutenberg/pull/13670).
-
-## Bug Fixes
-
-*   Fix a number of formatting issues:
-    *   [Multiple formats](https://github.com/WordPress/gutenberg/issues/12973).
-    *   [Flashing backgrounds](https://github.com/WordPress/gutenberg/issues/12978) when typing.
-    *   [Highlighted format](https://github.com/WordPress/gutenberg/issues/11091) buttons.
-    *   [Inline code](https://github.com/WordPress/gutenberg/pull/13807) with [backticks](https://github.com/WordPress/gutenberg/issues/11276).
-    *   [Spaces deleted](https://github.com/WordPress/gutenberg/issues/12529) after formats.
-    *   Inline [boundaries styling](https://github.com/WordPress/gutenberg/issues/11423) issues.
-    *   [Touch Bar](https://github.com/WordPress/gutenberg/pull/13833) format buttons.
-*   Fix a number of list block writing flow issues:
-    *   Allow [line breaks](https://github.com/WordPress/gutenberg/pull/13546) in list items.
-    *   [Empty items](https://github.com/WordPress/gutenberg/issues/13864) not being removed.
-    *   Backspace [merging list items](https://github.com/WordPress/gutenberg/issues/12398).
-    *   [Selecting formats](https://github.com/WordPress/gutenberg/issues/11741) at the beginning of list items.
-*   Fix the [color picker styling](https://github.com/WordPress/gutenberg/pull/12747).
-*   Set default values for the [image dimensions inputs](https://github.com/WordPress/gutenberg/pull/7687).
-*   Fix [sidebar panels spacing](https://github.com/WordPress/gutenberg/pull/13181).
-*   Fix [wording of the nux tip](https://github.com/WordPress/gutenberg/pull/12911) nudging about the sidebar settings.
-*   Fix [the translator comments](https://github.com/WordPress/gutenberg/pull/9440) pot extraction.
-*   Fix the [plugins icons](https://github.com/WordPress/gutenberg/pull/13719) color overriding.
-*   Fix [conflicting notices styles](https://github.com/WordPress/gutenberg/pull/13817) when using editor styles.
-*   Fix [controls recursion](https://github.com/WordPress/gutenberg/pull/13818) in the redux-routine package.
-*   Fix the generic embed block when using [Giphy as provider](https://github.com/WordPress/gutenberg/pull/13825).
-*   Fix the [i18n message](https://github.com/WordPress/gutenberg/pull/13830) used in the Gallery block edit button.
-*   Fix the [icon size](https://github.com/WordPress/gutenberg/pull/13767) of the block switcher menu.
-*   Fix the [loading state](https://github.com/WordPress/gutenberg/pull/13758) of the FlatTermSelector (tags selector).
-*   Fix the [embed placeholders](https://github.com/WordPress/gutenberg/pull/13590) styling.
-*   Fix incorrectly triggered [auto-saves for published posts](https://github.com/WordPress/gutenberg/pull/12624).
-*   Fix [missing classname](https://github.com/WordPress/gutenberg/pull/13834) in the Latest comments block.
-*   Fix [HTML in shortcodes](https://github.com/WordPress/gutenberg/pull/13609) breaking block validation.
-*   Fix JavaScript errors when [typing quickly](https://github.com/WordPress/gutenberg/pull/11209) and creating undo levels.
-*   Fix issue with [mover colors](https://github.com/WordPress/gutenberg/pull/13869) in dark themes.
-*   Fix [internationalisation issue](https://github.com/WordPress/gutenberg/pull/13551) with permalink slugs.
-
-## Various
-
-*   Implement the [inline format boundaries](https://github.com/WordPress/gutenberg/pull/13697) without relying on the DOM.
-*   Introduce the [Registry Selectors](https://github.com/WordPress/gutenberg/pull/13662) in the data module.
-*   Introduce the [Registry Controls](https://github.com/WordPress/gutenberg/pull/13722) in the data module.
-*   Allow extending the [latest posts block query](https://github.com/WordPress/gutenberg/pull/11984) by using get_posts.
-*   Extend the [range of allowed years](https://github.com/WordPress/gutenberg/pull/13602) in the DateTime component.
-*   Allow [null values](https://github.com/WordPress/gutenberg/pull/12963) for the DateTime component.
-*   Do not render the [FontSizePicker](https://github.com/WordPress/gutenberg/pull/13782) if [no sizes](https://github.com/WordPress/gutenberg/pull/13824) [defined](https://github.com/WordPress/gutenberg/pull/13844).
-*   Add className prop support to the [UrlInput](https://github.com/WordPress/gutenberg/pull/13800) component.
-*   Add [inline image resizing UI](https://github.com/WordPress/gutenberg/pull/13737).
-
-## Chore
-
-*   Update [lodash](https://github.com/WordPress/gutenberg/pull/13651) and [deasync](https://github.com/WordPress/gutenberg/pull/13839) [dependencies](https://github.com/WordPress/gutenberg/pull/13876).
-*   Use [addQueryArgs](https://github.com/WordPress/gutenberg/pull/13653) consistently to generate WordPress links.
-*   Remove merged PHP code:
-    *   jQuery to Hooks [heartbeat proxyfying](https://github.com/WordPress/gutenberg/pull/13576).
-    *   References to the [classic editor](https://github.com/WordPress/gutenberg/pull/13544).
-    *   [gutenberg_can_edit_post](https://github.com/WordPress/gutenberg/pull/13470) function.
-*   [Disable CSS](https://github.com/WordPress/gutenberg/pull/13769) [animations](https://github.com/WordPress/gutenberg/pull/13779) in e2e tests.
-*   ESLint
-    *   Add a rule to ensure the [consistency](https://github.com/WordPress/gutenberg/pull/13785) [of the import groups](https://github.com/WordPress/gutenberg/pull/13757).
-    *   Add a rule to protect against [invalid sprintf use](https://github.com/WordPress/gutenberg/pull/13756).
-*   Remove [obsolete](https://github.com/WordPress/gutenberg/pull/13871) [CSS](https://github.com/WordPress/gutenberg/pull/13867) rules.
-*   Add e2e tests for [tags creation](https://github.com/WordPress/gutenberg/pull/13129).
-*   Add the [feature flags](https://github.com/WordPress/gutenberg/pull/13324) setup.
-*   Implement [block editor styles](https://github.com/WordPress/gutenberg/pull/13625) using a filter.
-
-## Documentation
-
-*   Add a new [tutorial about the editor notices](https://github.com/WordPress/gutenberg/pull/13703).
-*   Add JavaScript [build tools](https://github.com/WordPress/gutenberg/pull/13629) [documentation](https://github.com/WordPress/gutenberg/pull/13853).
-*   Enhance the block’s [edit/save documentation](https://github.com/WordPress/gutenberg/pull/13578) and code examples.
-*   Use [Title Case](https://github.com/WordPress/gutenberg/pull/13714) consistently.
-*   Add [e2e test utils](https://github.com/WordPress/gutenberg/pull/13856) documentation.
-*   Small enhancements and typos: [1](https://github.com/WordPress/gutenberg/pull/13593), [2](https://github.com/WordPress/gutenberg/pull/13671), [3](https://github.com/WordPress/gutenberg/pull/13711), [4](https://github.com/WordPress/gutenberg/pull/13746), [5](https://github.com/WordPress/gutenberg/pull/13742), [6](https://github.com/WordPress/gutenberg/pull/13733), [7](https://github.com/WordPress/gutenberg/pull/13744), [8](https://github.com/WordPress/gutenberg/pull/13752), [9](https://github.com/WordPress/gutenberg/pull/13574), [10](https://github.com/WordPress/gutenberg/pull/13745), [11](https://github.com/WordPress/gutenberg/pull/13781), [12](https://github.com/WordPress/gutenberg/pull/13694), [13](https://github.com/WordPress/gutenberg/pull/13810), [14](https://github.com/WordPress/gutenberg/pull/13891).
-
-## Mobile
-
-*   Add bottom sheet settings for the image block:
-    *   [alt description](https://github.com/WordPress/gutenberg/pull/13631).
-    *   [Links](https://github.com/WordPress/gutenberg/pull/13654).
-*   Implement [the media upload options](https://github.com/WordPress/gutenberg/pull/13656) sheet.
-*   Implementing [Clear All Settings](https://github.com/WordPress/gutenberg/pull/13753) button on Image Settings.
-*   [Avoid hard-coded font family](https://github.com/WordPress/gutenberg/pull/13677) styling for the image blocks.
-*   Improve [the post title](https://github.com/WordPress/gutenberg/pull/13548) [component](https://github.com/WordPress/gutenberg/pull/13874).
-*   Fix the bottom sheet [styling for RTL](https://github.com/WordPress/gutenberg/pull/13815) layouts.
-*   Support the [placeholder](https://github.com/WordPress/gutenberg/pull/13699) [prop](https://github.com/WordPress/gutenberg/pull/13738) in the RichText component.
+## Changelog
+
+### Features
+
+-   Add a new [Search block](https://github.com/WordPress/gutenberg/pull/13583).
+-   Add a new [Calendar](https://github.com/WordPress/gutenberg/pull/13772) block.
+-   Add a new [Tag Cloud](https://github.com/WordPress/gutenberg/pull/7875) block.
+
+### Enhancements
+
+-   Add micro-animations to the editor UI:
+    -   Opening [Popovers](https://github.com/WordPress/gutenberg/pull/13617).
+    -   Opening [Sidebars](https://github.com/WordPress/gutenberg/pull/13635).
+-   [Restore the block movers](https://github.com/WordPress/gutenberg/pull/12758) for the floated blocks.
+-   [Consistency in alignment options](https://github.com/WordPress/gutenberg/pull/9469) between archives and categories blocks.
+-   Set the minimum size for [form fields on mobile](https://github.com/WordPress/gutenberg/pull/13639).
+-   [Disable the block navigation](https://github.com/WordPress/gutenberg/pull/12185) in the code editor mode.
+-   Consistency for the [modal styles](https://github.com/WordPress/gutenberg/pull/13669).
+-   Improve the [FormToggle](https://github.com/WordPress/gutenberg/pull/12385) styling when used outside of WordPress context.
+-   Use the block [icons in the media placeholders](https://github.com/WordPress/gutenberg/pull/11788).
+-   Fix [rounded corners](https://github.com/WordPress/gutenberg/pull/13659) for the block svg icons.
+-   Improve the [CSS specificity](https://github.com/WordPress/gutenberg/pull/13025) [of the paragraph](https://github.com/WordPress/gutenberg/pull/12998) block [styles](https://github.com/WordPress/gutenberg/pull/13821).
+-   Require an initial [click on embed previews](https://github.com/WordPress/gutenberg/pull/12981) before being interactive.
+-   Improve the [disabled block switcher](https://github.com/WordPress/gutenberg/pull/13721) styles.
+-   [Do not split paragraph line breaks](https://github.com/WordPress/gutenberg/pull/13832) when transforming multiple paragraphs to a list.
+-   Enhance the Quote block styling for [different text alignments](https://github.com/WordPress/gutenberg/pull/13248).
+-   Remove the [left padding from the Quote](https://github.com/WordPress/gutenberg/pull/13846) block when it’s centered.
+-   A11y:
+    -   Improve the [permalink field label](https://github.com/WordPress/gutenberg/pull/12959).
+    -   Improve the [region navigation](https://github.com/WordPress/gutenberg/pull/8554) styling.
+-   Remove the [3 keywords limit](https://github.com/WordPress/gutenberg/pull/13848) for the block registration.
+-   Add consistent background colors to the [hovered menu items](https://github.com/WordPress/gutenberg/pull/13732).
+-   Allow the [editor notices to push down](https://github.com/WordPress/gutenberg/pull/13614) the content.
+-   Rename the [default block styles](https://github.com/WordPress/gutenberg/pull/13670).
+
+### Bug Fixes
+
+-   Fix a number of formatting issues:
+    -   [Multiple formats](https://github.com/WordPress/gutenberg/issues/12973).
+    -   [Flashing backgrounds](https://github.com/WordPress/gutenberg/issues/12978) when typing.
+    -   [Highlighted format](https://github.com/WordPress/gutenberg/issues/11091) buttons.
+    -   [Inline code](https://github.com/WordPress/gutenberg/pull/13807) with [backticks](https://github.com/WordPress/gutenberg/issues/11276).
+    -   [Spaces deleted](https://github.com/WordPress/gutenberg/issues/12529) after formats.
+    -   Inline [boundaries styling](https://github.com/WordPress/gutenberg/issues/11423) issues.
+    -   [Touch Bar](https://github.com/WordPress/gutenberg/pull/13833) format buttons.
+-   Fix a number of list block writing flow issues:
+    -   Allow [line breaks](https://github.com/WordPress/gutenberg/pull/13546) in list items.
+    -   [Empty items](https://github.com/WordPress/gutenberg/issues/13864) not being removed.
+    -   Backspace [merging list items](https://github.com/WordPress/gutenberg/issues/12398).
+    -   [Selecting formats](https://github.com/WordPress/gutenberg/issues/11741) at the beginning of list items.
+-   Fix the [color picker styling](https://github.com/WordPress/gutenberg/pull/12747).
+-   Set default values for the [image dimensions inputs](https://github.com/WordPress/gutenberg/pull/7687).
+-   Fix [sidebar panels spacing](https://github.com/WordPress/gutenberg/pull/13181).
+-   Fix [wording of the nux tip](https://github.com/WordPress/gutenberg/pull/12911) nudging about the sidebar settings.
+-   Fix [the translator comments](https://github.com/WordPress/gutenberg/pull/9440) pot extraction.
+-   Fix the [plugins icons](https://github.com/WordPress/gutenberg/pull/13719) color overriding.
+-   Fix [conflicting notices styles](https://github.com/WordPress/gutenberg/pull/13817) when using editor styles.
+-   Fix [controls recursion](https://github.com/WordPress/gutenberg/pull/13818) in the redux-routine package.
+-   Fix the generic embed block when using [Giphy as provider](https://github.com/WordPress/gutenberg/pull/13825).
+-   Fix the [i18n message](https://github.com/WordPress/gutenberg/pull/13830) used in the Gallery block edit button.
+-   Fix the [icon size](https://github.com/WordPress/gutenberg/pull/13767) of the block switcher menu.
+-   Fix the [loading state](https://github.com/WordPress/gutenberg/pull/13758) of the FlatTermSelector (tags selector).
+-   Fix the [embed placeholders](https://github.com/WordPress/gutenberg/pull/13590) styling.
+-   Fix incorrectly triggered [auto-saves for published posts](https://github.com/WordPress/gutenberg/pull/12624).
+-   Fix [missing classname](https://github.com/WordPress/gutenberg/pull/13834) in the Latest comments block.
+-   Fix [HTML in shortcodes](https://github.com/WordPress/gutenberg/pull/13609) breaking block validation.
+-   Fix JavaScript errors when [typing quickly](https://github.com/WordPress/gutenberg/pull/11209) and creating undo levels.
+-   Fix issue with [mover colors](https://github.com/WordPress/gutenberg/pull/13869) in dark themes.
+-   Fix [internationalisation issue](https://github.com/WordPress/gutenberg/pull/13551) with permalink slugs.
+
+### Various
+
+-   Implement the [inline format boundaries](https://github.com/WordPress/gutenberg/pull/13697) without relying on the DOM.
+-   Introduce the [Registry Selectors](https://github.com/WordPress/gutenberg/pull/13662) in the data module.
+-   Introduce the [Registry Controls](https://github.com/WordPress/gutenberg/pull/13722) in the data module.
+-   Allow extending the [latest posts block query](https://github.com/WordPress/gutenberg/pull/11984) by using get_posts.
+-   Extend the [range of allowed years](https://github.com/WordPress/gutenberg/pull/13602) in the DateTime component.
+-   Allow [null values](https://github.com/WordPress/gutenberg/pull/12963) for the DateTime component.
+-   Do not render the [FontSizePicker](https://github.com/WordPress/gutenberg/pull/13782) if [no sizes](https://github.com/WordPress/gutenberg/pull/13824) [defined](https://github.com/WordPress/gutenberg/pull/13844).
+-   Add className prop support to the [UrlInput](https://github.com/WordPress/gutenberg/pull/13800) component.
+-   Add [inline image resizing UI](https://github.com/WordPress/gutenberg/pull/13737).
+
+### Chore
+
+-   Update [lodash](https://github.com/WordPress/gutenberg/pull/13651) and [deasync](https://github.com/WordPress/gutenberg/pull/13839) [dependencies](https://github.com/WordPress/gutenberg/pull/13876).
+-   Use [addQueryArgs](https://github.com/WordPress/gutenberg/pull/13653) consistently to generate WordPress links.
+-   Remove merged PHP code:
+    -   jQuery to Hooks [heartbeat proxyfying](https://github.com/WordPress/gutenberg/pull/13576).
+    -   References to the [classic editor](https://github.com/WordPress/gutenberg/pull/13544).
+    -   [gutenberg_can_edit_post](https://github.com/WordPress/gutenberg/pull/13470) function.
+-   [Disable CSS](https://github.com/WordPress/gutenberg/pull/13769) [animations](https://github.com/WordPress/gutenberg/pull/13779) in e2e tests.
+-   ESLint
+    -   Add a rule to ensure the [consistency](https://github.com/WordPress/gutenberg/pull/13785) [of the import groups](https://github.com/WordPress/gutenberg/pull/13757).
+    -   Add a rule to protect against [invalid sprintf use](https://github.com/WordPress/gutenberg/pull/13756).
+-   Remove [obsolete](https://github.com/WordPress/gutenberg/pull/13871) [CSS](https://github.com/WordPress/gutenberg/pull/13867) rules.
+-   Add e2e tests for [tags creation](https://github.com/WordPress/gutenberg/pull/13129).
+-   Add the [feature flags](https://github.com/WordPress/gutenberg/pull/13324) setup.
+-   Implement [block editor styles](https://github.com/WordPress/gutenberg/pull/13625) using a filter.
+
+### Documentation
+
+-   Add a new [tutorial about the editor notices](https://github.com/WordPress/gutenberg/pull/13703).
+-   Add JavaScript [build tools](https://github.com/WordPress/gutenberg/pull/13629) [documentation](https://github.com/WordPress/gutenberg/pull/13853).
+-   Enhance the block’s [edit/save documentation](https://github.com/WordPress/gutenberg/pull/13578) and code examples.
+-   Use [Title Case](https://github.com/WordPress/gutenberg/pull/13714) consistently.
+-   Add [e2e test utils](https://github.com/WordPress/gutenberg/pull/13856) documentation.
+-   Small enhancements and typos: [1](https://github.com/WordPress/gutenberg/pull/13593), [2](https://github.com/WordPress/gutenberg/pull/13671), [3](https://github.com/WordPress/gutenberg/pull/13711), [4](https://github.com/WordPress/gutenberg/pull/13746), [5](https://github.com/WordPress/gutenberg/pull/13742), [6](https://github.com/WordPress/gutenberg/pull/13733), [7](https://github.com/WordPress/gutenberg/pull/13744), [8](https://github.com/WordPress/gutenberg/pull/13752), [9](https://github.com/WordPress/gutenberg/pull/13574), [10](https://github.com/WordPress/gutenberg/pull/13745), [11](https://github.com/WordPress/gutenberg/pull/13781), [12](https://github.com/WordPress/gutenberg/pull/13694), [13](https://github.com/WordPress/gutenberg/pull/13810), [14](https://github.com/WordPress/gutenberg/pull/13891).
+
+### Mobile
+
+-   Add bottom sheet settings for the image block:
+    -   [alt description](https://github.com/WordPress/gutenberg/pull/13631).
+    -   [Links](https://github.com/WordPress/gutenberg/pull/13654).
+-   Implement [the media upload options](https://github.com/WordPress/gutenberg/pull/13656) sheet.
+-   Implementing [Clear All Settings](https://github.com/WordPress/gutenberg/pull/13753) button on Image Settings.
+-   [Avoid hard-coded font family](https://github.com/WordPress/gutenberg/pull/13677) styling for the image blocks.
+-   Improve [the post title](https://github.com/WordPress/gutenberg/pull/13548) [component](https://github.com/WordPress/gutenberg/pull/13874).
+-   Fix the bottom sheet [styling for RTL](https://github.com/WordPress/gutenberg/pull/13815) layouts.
+-   Support the [placeholder](https://github.com/WordPress/gutenberg/pull/13699) [prop](https://github.com/WordPress/gutenberg/pull/13738) in the RichText component.
 
 = 5.0.0 =
 
+## Changelog
+
 ### Features
-- Add a new [RSS block](https://github.com/WordPress/gutenberg/pull/7966) and follow-up improvements: [1](https://github.com/WordPress/gutenberg/pull/13501), [2](https://github.com/WordPress/gutenberg/pull/13502).
-- Add a new [Amazon Kindle embed block](https://github.com/WordPress/gutenberg/pull/13510).
-- Add a new [FocalPointPicker](https://github.com/WordPress/gutenberg/pull/10925) component and use it to define the focal point of the Cover block background.
+
+-   Add a new [RSS block](https://github.com/WordPress/gutenberg/pull/7966) and follow-up improvements: [1](https://github.com/WordPress/gutenberg/pull/13501), [2](https://github.com/WordPress/gutenberg/pull/13502).
+-   Add a new [Amazon Kindle embed block](https://github.com/WordPress/gutenberg/pull/13510).
+-   Add a new [FocalPointPicker](https://github.com/WordPress/gutenberg/pull/10925) component and use it to define the focal point of the Cover block background.
 
 ### Enhancements
-- Optimize the re-rendering performance when [inserting/removing blocks](https://github.com/WordPress/gutenberg/pull/13067).
-- Improve the [Reusable Blocks UX](https://github.com/WordPress/gutenberg/pull/12378) for contributor users.
-- Disable [embed previews](https://github.com/WordPress/gutenberg/pull/12961) for the smugmug provider.
-- Make [the fullscreen mode](https://github.com/WordPress/gutenberg/pull/13425) a desktop-only feature.
-- Accessibility: Add [speak messages](https://github.com/WordPress/gutenberg/pull/13385) when using the FeatureToggle component.
-- Accessibility:  Change the inserter [search result message](https://github.com/WordPress/gutenberg/pull/13388) from assertive to polite.
-- Accessibility:  Remove [duplicate aria label](https://github.com/WordPress/gutenberg/pull/12955) from menu items.
-- Remove the "[Show Download Button](https://github.com/WordPress/gutenberg/pull/13485)" toggle help text in the File block.
-- Render [the block switcher as disabled](https://github.com/WordPress/gutenberg/pull/13431) if not available in a multi-selection.
-- Use a back arrow icon to clarify the [Fullscreen mode exit button](https://github.com/WordPress/gutenberg/pull/13403).
-- Limit the [Gallery block columns count](https://github.com/WordPress/gutenberg/pull/13488) to the images count.
-- Automatically set a [default block style](https://github.com/WordPress/gutenberg/pull/12519) if missing.
-- Hide [empty categories](https://github.com/WordPress/gutenberg/pull/13549) from the Categories block in the editor.
-- Increase the padding of [the gallery captions](https://github.com/WordPress/gutenberg/pull/13623).
-- Add [left/right alignments](https://github.com/WordPress/gutenberg/pull/8814) to the latest posts block.
-- Improve the [columns margins](https://github.com/WordPress/gutenberg/pull/12199).
-- Add a [help text for the hide teaser toggle](https://github.com/WordPress/gutenberg/pull/13630) in the More block.
-- Improve the wording of the [embed block messages](https://github.com/WordPress/gutenberg/pull/13644).
-
-### Bug Fixes
-- Accessibility: Fix [the tab order](https://github.com/WordPress/gutenberg/pull/11863) of the date picker component.
-- Support [non hierarchical taxonomies](https://github.com/WordPress/gutenberg/pull/13076) in the category selector component.
-- Fix blocks [marked invalid incorrectly](https://github.com/WordPress/gutenberg/pull/13512) due to special HTML characters.
-- Fix the [Notice component styling](https://github.com/WordPress/gutenberg/pull/13371).
-- Fix the [:root selector](https://github.com/WordPress/gutenberg/pull/13325) in the editor styles.
-- Fix [duplicate block](https://github.com/WordPress/gutenberg/pull/12882) toolbars.
-- Fix [warning message](https://github.com/WordPress/gutenberg/pull/12933) when using the DateTimePicker component.
-- Fix the [File block](https://github.com/WordPress/gutenberg/pull/13432) and [Categories block](https://github.com/WordPress/gutenberg/pull/13439) style when applying custom classnames.
-- Fix the [Gallery block styling](https://github.com/WordPress/gutenberg/pull/13326) in Microsoft Edge.
-- Fix the [Button block styling](https://github.com/WordPress/gutenberg/pull/12183) when links are visited.
-- Fix Block Style [preview not dismissed](https://github.com/WordPress/gutenberg/pull/12317) after selection.
-- Fix [TabPanel buttons](https://github.com/WordPress/gutenberg/pull/11944) incorrectly submitting forms.
-- Fix [hierarchical dropdown](https://github.com/WordPress/gutenberg/pull/13567) in the Categories block.
-- Fix [wording](https://github.com/WordPress/gutenberg/pull/13479) for the color picker saturation.
-- Fix the [save keyboard shortcut](https://github.com/WordPress/gutenberg/pull/13159) while in the code editor mode.
-- Fix the [Google Docs table](https://github.com/WordPress/gutenberg/pull/13543) pasting.
-- Fix [jumps when indenting/outdenting](https://github.com/WordPress/gutenberg/pull/12941) list items.
-- Fix [FontSizePicker max width](https://github.com/WordPress/gutenberg/pull/13264) on mobile.
-- Fix PHP 5.2.2 [Parser issue](https://github.com/WordPress/gutenberg/pull/13369).
-- Fix [plural messages](https://github.com/WordPress/gutenberg/pull/13577) POT generation.
+
+-   Optimize the re-rendering performance when [inserting/removing blocks](https://github.com/WordPress/gutenberg/pull/13067).
+-   Improve the [Reusable Blocks UX](https://github.com/WordPress/gutenberg/pull/12378) for contributor users.
+-   Disable [embed previews](https://github.com/WordPress/gutenberg/pull/12961) for the smugmug provider.
+-   Make [the fullscreen mode](https://github.com/WordPress/gutenberg/pull/13425) a desktop-only feature.
+-   Accessibility: Add [speak messages](https://github.com/WordPress/gutenberg/pull/13385) when using the FeatureToggle component.
+-   Accessibility: Change the inserter [search result message](https://github.com/WordPress/gutenberg/pull/13388) from assertive to polite.
+-   Accessibility: Remove [duplicate aria label](https://github.com/WordPress/gutenberg/pull/12955) from menu items.
+-   Remove the "[Show Download Button](https://github.com/WordPress/gutenberg/pull/13485)" toggle help text in the File block.
+-   Render [the block switcher as disabled](https://github.com/WordPress/gutenberg/pull/13431) if not available in a multi-selection.
+-   Use a back arrow icon to clarify the [Fullscreen mode exit button](https://github.com/WordPress/gutenberg/pull/13403).
+-   Limit the [Gallery block columns count](https://github.com/WordPress/gutenberg/pull/13488) to the images count.
+-   Automatically set a [default block style](https://github.com/WordPress/gutenberg/pull/12519) if missing.
+-   Hide [empty categories](https://github.com/WordPress/gutenberg/pull/13549) from the Categories block in the editor.
+-   Increase the padding of [the gallery captions](https://github.com/WordPress/gutenberg/pull/13623).
+-   Add [left/right alignments](https://github.com/WordPress/gutenberg/pull/8814) to the latest posts block.
+-   Improve the [columns margins](https://github.com/WordPress/gutenberg/pull/12199).
+-   Add a [help text for the hide teaser toggle](https://github.com/WordPress/gutenberg/pull/13630) in the More block.
+-   Improve the wording of the [embed block messages](https://github.com/WordPress/gutenberg/pull/13644).
+
+### Bug Fixes
+
+-   Accessibility: Fix [the tab order](https://github.com/WordPress/gutenberg/pull/11863) of the date picker component.
+-   Support [non hierarchical taxonomies](https://github.com/WordPress/gutenberg/pull/13076) in the category selector component.
+-   Fix blocks [marked invalid incorrectly](https://github.com/WordPress/gutenberg/pull/13512) due to special HTML characters.
+-   Fix the [Notice component styling](https://github.com/WordPress/gutenberg/pull/13371).
+-   Fix the [:root selector](https://github.com/WordPress/gutenberg/pull/13325) in the editor styles.
+-   Fix [duplicate block](https://github.com/WordPress/gutenberg/pull/12882) toolbars.
+-   Fix [warning message](https://github.com/WordPress/gutenberg/pull/12933) when using the DateTimePicker component.
+-   Fix the [File block](https://github.com/WordPress/gutenberg/pull/13432) and [Categories block](https://github.com/WordPress/gutenberg/pull/13439) style when applying custom classnames.
+-   Fix the [Gallery block styling](https://github.com/WordPress/gutenberg/pull/13326) in Microsoft Edge.
+-   Fix the [Button block styling](https://github.com/WordPress/gutenberg/pull/12183) when links are visited.
+-   Fix Block Style [preview not dismissed](https://github.com/WordPress/gutenberg/pull/12317) after selection.
+-   Fix [TabPanel buttons](https://github.com/WordPress/gutenberg/pull/11944) incorrectly submitting forms.
+-   Fix [hierarchical dropdown](https://github.com/WordPress/gutenberg/pull/13567) in the Categories block.
+-   Fix [wording](https://github.com/WordPress/gutenberg/pull/13479) for the color picker saturation.
+-   Fix the [save keyboard shortcut](https://github.com/WordPress/gutenberg/pull/13159) while in the code editor mode.
+-   Fix the [Google Docs table](https://github.com/WordPress/gutenberg/pull/13543) pasting.
+-   Fix [jumps when indenting/outdenting](https://github.com/WordPress/gutenberg/pull/12941) list items.
+-   Fix [FontSizePicker max width](https://github.com/WordPress/gutenberg/pull/13264) on mobile.
+-   Fix PHP 5.2.2 [Parser issue](https://github.com/WordPress/gutenberg/pull/13369).
+-   Fix [plural messages](https://github.com/WordPress/gutenberg/pull/13577) POT generation.
 
 ### Various
-- Add [ESnext build setup](https://github.com/WordPress/gutenberg/pull/12837) and commands to the @wordpress/scripts package.
-- Add "[focus on mount](https://github.com/WordPress/gutenberg/pull/12855)" config to the DropDown component.
-- Improve [the error handling](https://github.com/WordPress/gutenberg/pull/13315) in the data module resulting in clearer messages displayed in the console.
-- Support [marking days as invalid](https://github.com/WordPress/gutenberg/pull/12962) in the DatePicker component.
-- Support [block transforms](https://github.com/WordPress/gutenberg/pull/11979) with inner blocks.
-- Improve the styles of the [editor notices with actions](https://github.com/WordPress/gutenberg/pull/13116).
-- Replace Polldaddy embed block with [Crowdsignal](https://github.com/WordPress/gutenberg/pull/12854).
-- Avoid [setting the generic Edit Post](https://github.com/WordPress/gutenberg/pull/13552) Title on load.
-- Deprecate [window._wpLoadGutenbergEditor](https://github.com/WordPress/gutenberg/pull/13547).
-- [Avoid an empty classname](https://github.com/WordPress/gutenberg/pull/11831) when deleting custom classnames.
-- Add [className prop support](https://github.com/WordPress/gutenberg/pull/13568) to the ServerSideRender component.
+
+-   Add [ESnext build setup](https://github.com/WordPress/gutenberg/pull/12837) and commands to the @wordpress/scripts package.
+-   Add "[focus on mount](https://github.com/WordPress/gutenberg/pull/12855)" config to the DropDown component.
+-   Improve [the error handling](https://github.com/WordPress/gutenberg/pull/13315) in the data module resulting in clearer messages displayed in the console.
+-   Support [marking days as invalid](https://github.com/WordPress/gutenberg/pull/12962) in the DatePicker component.
+-   Support [block transforms](https://github.com/WordPress/gutenberg/pull/11979) with inner blocks.
+-   Improve the styles of the [editor notices with actions](https://github.com/WordPress/gutenberg/pull/13116).
+-   Replace Polldaddy embed block with [Crowdsignal](https://github.com/WordPress/gutenberg/pull/12854).
+-   Avoid [setting the generic Edit Post](https://github.com/WordPress/gutenberg/pull/13552) Title on load.
+-   Deprecate [window.\_wpLoadGutenbergEditor](https://github.com/WordPress/gutenberg/pull/13547).
+-   [Avoid an empty classname](https://github.com/WordPress/gutenberg/pull/11831) when deleting custom classnames.
+-   Add [className prop support](https://github.com/WordPress/gutenberg/pull/13568) to the ServerSideRender component.
 
 ### Documentation
-- Improve the components README files DropdownMenu & RangeControl.
-- Add code example of the [MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/13389) component.
-- Add a [accessibility dedicated](https://github.com/WordPress/gutenberg/pull/13169) page.
-- Add a [Git workflow](https://github.com/WordPress/gutenberg/pull/13534) documentation page.
-- Reorganize [the contributors guide](https://github.com/WordPress/gutenberg/pull/13352).
-- Mention [the dark theme support](https://github.com/WordPress/gutenberg/pull/13375) in the design docs.
-- Enhance [the compose package](https://github.com/WordPress/gutenberg/pull/13496)  [documentation](https://github.com/WordPress/gutenberg/pull/13504).
-- Expand [the block templates](https://github.com/WordPress/gutenberg/pull/13494/) code examples.
-- Fix [unregisterBlockType](https://github.com/WordPress/gutenberg/pull/13273) code examples.
-- Clarify the block styles [isDefault property](https://github.com/WordPress/gutenberg/pull/11478).
-- Move the [npm packages management](https://github.com/WordPress/gutenberg/pull/13418/) documentation to a dedicated page.
-- Add a section explaining [the links usage](https://github.com/WordPress/gutenberg/pull/13422) in the documentation.
-- Add a note about the [wp-editor dependency](https://github.com/WordPress/gutenberg/pull/12731) when using RichText.
-- Update the [isShallowEqual package](https://github.com/WordPress/gutenberg/pull/13526) documentation and tests.
-- Refresh the [repository management](https://github.com/WordPress/gutenberg/pull/13495) doc.
-- Typos: [1](https://github.com/WordPress/gutenberg/pull/13409), [2](https://github.com/WordPress/gutenberg/pull/13302), [3](https://github.com/WordPress/gutenberg/pull/13541), [4](https://github.com/WordPress/gutenberg/pull/13524), [5](https://github.com/WordPress/gutenberg/pull/13531), [6](https://github.com/WordPress/gutenberg/pull/13582), [7](https://github.com/WordPress/gutenberg/pull/13595).
+
+-   Improve the components README files DropdownMenu & RangeControl.
+-   Add code example of the [MediaPlaceholder](https://github.com/WordPress/gutenberg/pull/13389) component.
+-   Add a [accessibility dedicated](https://github.com/WordPress/gutenberg/pull/13169) page.
+-   Add a [Git workflow](https://github.com/WordPress/gutenberg/pull/13534) documentation page.
+-   Reorganize [the contributors guide](https://github.com/WordPress/gutenberg/pull/13352).
+-   Mention [the dark theme support](https://github.com/WordPress/gutenberg/pull/13375) in the design docs.
+-   Enhance [the compose package](https://github.com/WordPress/gutenberg/pull/13496) [documentation](https://github.com/WordPress/gutenberg/pull/13504).
+-   Expand [the block templates](https://github.com/WordPress/gutenberg/pull/13494/) code examples.
+-   Fix [unregisterBlockType](https://github.com/WordPress/gutenberg/pull/13273) code examples.
+-   Clarify the block styles [isDefault property](https://github.com/WordPress/gutenberg/pull/11478).
+-   Move the [npm packages management](https://github.com/WordPress/gutenberg/pull/13418/) documentation to a dedicated page.
+-   Add a section explaining [the links usage](https://github.com/WordPress/gutenberg/pull/13422) in the documentation.
+-   Add a note about the [wp-editor dependency](https://github.com/WordPress/gutenberg/pull/12731) when using RichText.
+-   Update the [isShallowEqual package](https://github.com/WordPress/gutenberg/pull/13526) documentation and tests.
+-   Refresh the [repository management](https://github.com/WordPress/gutenberg/pull/13495) doc.
+-   Typos: [1](https://github.com/WordPress/gutenberg/pull/13409), [2](https://github.com/WordPress/gutenberg/pull/13302), [3](https://github.com/WordPress/gutenberg/pull/13541), [4](https://github.com/WordPress/gutenberg/pull/13524), [5](https://github.com/WordPress/gutenberg/pull/13531), [6](https://github.com/WordPress/gutenberg/pull/13582), [7](https://github.com/WordPress/gutenberg/pull/13595).
 
 ### Chore
-- Remove PHP Code maintained in Core and bump [minimum WordPress version](https://github.com/WordPress/gutenberg/pull/13370):
-  - [Block registration](https://github.com/WordPress/gutenberg/pull/13412).
-  - [REST API](https://github.com/WordPress/gutenberg/pull/13408) Endpoints.
-  - [Markdown](https://github.com/WordPress/gutenberg/pull/13473) support fix.
-  - Gutenberg [body classname](https://github.com/WordPress/gutenberg/pull/13572) and [responsive classname](https://github.com/WordPress/gutenberg/pull/13461).
-  - [Preloading](https://github.com/WordPress/gutenberg/pull/13453) API calls.
-  - [Block detection utilities](https://github.com/WordPress/gutenberg/pull/13467).
-  - [List screen](https://github.com/WordPress/gutenberg/pull/13459)  [integration](https://github.com/WordPress/gutenberg/pull/13471).
-  - [Block content version](https://github.com/WordPress/gutenberg/pull/13469).
-  - [Block categories](https://github.com/WordPress/gutenberg/pull/13454) hook.
-  - [TinyMCE scripts](https://github.com/WordPress/gutenberg/pull/13466) registration.
-  - [Reusable blocks post type](https://github.com/WordPress/gutenberg/pull/13468)  [labels](https://github.com/WordPress/gutenberg/pull/13472) and [listing page](https://github.com/WordPress/gutenberg/pull/13456).
-  - [Block Types Initialization](https://github.com/WordPress/gutenberg/pull/13457).
-  - [PHP Unit tests](https://github.com/WordPress/gutenberg/pull/13513).
-  - [Compatibility](https://github.com/WordPress/gutenberg/pull/13442) script.
-  - [Meta boxes](https://github.com/WordPress/gutenberg/pull/13449) support.
-  - [Polyfills](https://github.com/WordPress/gutenberg/pull/13536).
-  - [oEmbed Proxy](https://github.com/WordPress/gutenberg/pull/13575) Endpoint filter.
-  - [Visual Editing](https://github.com/WordPress/gutenberg/pull/13608) Disabling.
-- Update [browserlist dependency](https://github.com/WordPress/gutenberg/pull/13395).
-- New E2E tests: [Date floating for pending posts](https://github.com/WordPress/gutenberg/pull/13281).
-- New ESlint rules:
-  - Enforce ES6 [object shorthand](https://github.com/WordPress/gutenberg/pull/13400) syntax.
-  - [Declare variables](https://github.com/WordPress/gutenberg/pull/12828) only when used.
-- Use [ES5 eslint config](https://github.com/WordPress/gutenberg/pull/13428) for the is-shallow-equal package.
-- Mark the eslint config as [a root config](https://github.com/WordPress/gutenberg/pull/13483).
-- Remove [the feedback form](https://github.com/WordPress/gutenberg/pull/10705) from the plugin.
-- I18n:
-  - Use [a placeholder](https://github.com/WordPress/gutenberg/pull/13487) for the WordPress minimum version.
-  - Use [Sentence case](https://github.com/WordPress/gutenberg/pull/12239) in toolbar tooltips.
-- Add [the FontAwesome licenses](https://github.com/WordPress/gutenberg/pull/12929) to the GPL 2 compatible licenses.
-- Move the [generated spec parser](https://github.com/WordPress/gutenberg/pull/13493) to the corresponding package.
-- Refactor the [nonce  apiFetch middleware](https://github.com/WordPress/gutenberg/pull/13451).
-- Refactor the list block [indent/outdent buttons](https://github.com/WordPress/gutenberg/pull/12667).
-- Fix [watching file changes](https://github.com/WordPress/gutenberg/pull/13448) on Linux.
-- Update [the question issue template](https://github.com/WordPress/gutenberg/pull/13351) in GitHub to redirect help requests.
-- Fix [wp-settings permissions](https://github.com/WordPress/gutenberg/pull/13539) in the local development environment.
-- Use a filter to [populate the demo content](https://github.com/WordPress/gutenberg/pull/13553).
+
+-   Remove PHP Code maintained in Core and bump [minimum WordPress version](https://github.com/WordPress/gutenberg/pull/13370):
+    -   [Block registration](https://github.com/WordPress/gutenberg/pull/13412).
+    -   [REST API](https://github.com/WordPress/gutenberg/pull/13408) Endpoints.
+    -   [Markdown](https://github.com/WordPress/gutenberg/pull/13473) support fix.
+    -   Gutenberg [body classname](https://github.com/WordPress/gutenberg/pull/13572) and [responsive classname](https://github.com/WordPress/gutenberg/pull/13461).
+    -   [Preloading](https://github.com/WordPress/gutenberg/pull/13453) API calls.
+    -   [Block detection utilities](https://github.com/WordPress/gutenberg/pull/13467).
+    -   [List screen](https://github.com/WordPress/gutenberg/pull/13459) [integration](https://github.com/WordPress/gutenberg/pull/13471).
+    -   [Block content version](https://github.com/WordPress/gutenberg/pull/13469).
+    -   [Block categories](https://github.com/WordPress/gutenberg/pull/13454) hook.
+    -   [TinyMCE scripts](https://github.com/WordPress/gutenberg/pull/13466) registration.
+    -   [Reusable blocks post type](https://github.com/WordPress/gutenberg/pull/13468) [labels](https://github.com/WordPress/gutenberg/pull/13472) and [listing page](https://github.com/WordPress/gutenberg/pull/13456).
+    -   [Block Types Initialization](https://github.com/WordPress/gutenberg/pull/13457).
+    -   [PHP Unit tests](https://github.com/WordPress/gutenberg/pull/13513).
+    -   [Compatibility](https://github.com/WordPress/gutenberg/pull/13442) script.
+    -   [Meta boxes](https://github.com/WordPress/gutenberg/pull/13449) support.
+    -   [Polyfills](https://github.com/WordPress/gutenberg/pull/13536).
+    -   [oEmbed Proxy](https://github.com/WordPress/gutenberg/pull/13575) Endpoint filter.
+    -   [Visual Editing](https://github.com/WordPress/gutenberg/pull/13608) Disabling.
+-   Update [browserlist dependency](https://github.com/WordPress/gutenberg/pull/13395).
+-   New E2E tests: [Date floating for pending posts](https://github.com/WordPress/gutenberg/pull/13281).
+-   New ESlint rules:
+    -   Enforce ES6 [object shorthand](https://github.com/WordPress/gutenberg/pull/13400) syntax.
+    -   [Declare variables](https://github.com/WordPress/gutenberg/pull/12828) only when used.
+-   Use [ES5 eslint config](https://github.com/WordPress/gutenberg/pull/13428) for the is-shallow-equal package.
+-   Mark the eslint config as [a root config](https://github.com/WordPress/gutenberg/pull/13483).
+-   Remove [the feedback form](https://github.com/WordPress/gutenberg/pull/10705) from the plugin.
+-   I18n:
+    -   Use [a placeholder](https://github.com/WordPress/gutenberg/pull/13487) for the WordPress minimum version.
+    -   Use [Sentence case](https://github.com/WordPress/gutenberg/pull/12239) in toolbar tooltips.
+-   Add [the FontAwesome licenses](https://github.com/WordPress/gutenberg/pull/12929) to the GPL 2 compatible licenses.
+-   Move the [generated spec parser](https://github.com/WordPress/gutenberg/pull/13493) to the corresponding package.
+-   Refactor the [nonce apiFetch middleware](https://github.com/WordPress/gutenberg/pull/13451).
+-   Refactor the list block [indent/outdent buttons](https://github.com/WordPress/gutenberg/pull/12667).
+-   Fix [watching file changes](https://github.com/WordPress/gutenberg/pull/13448) on Linux.
+-   Update [the question issue template](https://github.com/WordPress/gutenberg/pull/13351) in GitHub to redirect help requests.
+-   Fix [wp-settings permissions](https://github.com/WordPress/gutenberg/pull/13539) in the local development environment.
+-   Use a filter to [populate the demo content](https://github.com/WordPress/gutenberg/pull/13553).
 
 ### Mobile
-- Improve the [hide keyboard](https://github.com/WordPress/gutenberg/pull/13415) button.
-- Add the [PostTitle](https://github.com/WordPress/gutenberg/pull/13199) component support.
-- Support [Enter key press](https://github.com/WordPress/gutenberg/pull/13500) in the post title.
-- Support [native Media Upload](https://github.com/WordPress/gutenberg/pull/13128).
-- Support [undo/redo](https://github.com/WordPress/gutenberg/pull/13514) in the post title.
-- Make the [InspectorControls](https://github.com/WordPress/gutenberg/pull/13597) available for mobile blocks.
-- Add [failed media upload](https://github.com/WordPress/gutenberg/pull/13615) support and cancel buttons.
-- Introduce the [BottomSheet](https://github.com/WordPress/gutenberg/pull/13612)  [component](https://github.com/WordPress/gutenberg/pull/13633).
+
+-   Improve the [hide keyboard](https://github.com/WordPress/gutenberg/pull/13415) button.
+-   Add the [PostTitle](https://github.com/WordPress/gutenberg/pull/13199) component support.
+-   Support [Enter key press](https://github.com/WordPress/gutenberg/pull/13500) in the post title.
+-   Support [native Media Upload](https://github.com/WordPress/gutenberg/pull/13128).
+-   Support [undo/redo](https://github.com/WordPress/gutenberg/pull/13514) in the post title.
+-   Make the [InspectorControls](https://github.com/WordPress/gutenberg/pull/13597) available for mobile blocks.
+-   Add [failed media upload](https://github.com/WordPress/gutenberg/pull/13615) support and cancel buttons.
+-   Introduce the [BottomSheet](https://github.com/WordPress/gutenberg/pull/13612) [component](https://github.com/WordPress/gutenberg/pull/13633).
 
 = 4.9.0 =
 
+## Changelog
+
 ### Performance
-- Implement an async rendering mode for the data module updates.
-- Avoid rerendering the block components when selecting a block.
-- Improve the performance of isEditorEmptyPost selector (13% typing performance improvement).
-- Data Module: Avoid persisting unchanged values.
-- Update withSelect to use type-optimized isShallowEqual.
-- Move data selection to event handlers (called only when necessary).
-- Improve the initial rendering time by optimizing the withFilters Higher-order component.
-
-### Bug Fixes
-- Fix RichText toolbar when using multiline=”li”.
-- Correct the margin of the block icons in the inserter.
-- Fix ampersand in post tags causing editor crash.
-- Remove alignundefined class from gallery block edit markup.
-- Disable the button to open the publish sidebar if locked.
-- Correct the default margin for buttons with icons.
-- Keep the date floating when for posts with "pending" status.
-- Fix using the EXIF title when uploading images.
-- Fix font size picker on mobile.
-- Fix z-index of the Reusable Block Inserter button.
-- Fix autop behavior when a text is followed by a div.
-- Fix warning when returning null from a data module generator.
-- Announce the screen reader messages in the correct order in Safari.
-- Check Post Type support in the options modal.
+
+-   Implement an async rendering mode for the data module updates.
+-   Avoid rerendering the block components when selecting a block.
+-   Improve the performance of isEditorEmptyPost selector (13% typing performance improvement).
+-   Data Module: Avoid persisting unchanged values.
+-   Update withSelect to use type-optimized isShallowEqual.
+-   Move data selection to event handlers (called only when necessary).
+-   Improve the initial rendering time by optimizing the withFilters Higher-order component.
+
+### Bug Fixes
+
+-   Fix RichText toolbar when using multiline=”li”.
+-   Correct the margin of the block icons in the inserter.
+-   Fix ampersand in post tags causing editor crash.
+-   Remove alignundefined class from gallery block edit markup.
+-   Disable the button to open the publish sidebar if locked.
+-   Correct the default margin for buttons with icons.
+-   Keep the date floating when for posts with "pending" status.
+-   Fix using the EXIF title when uploading images.
+-   Fix font size picker on mobile.
+-   Fix z-index of the Reusable Block Inserter button.
+-   Fix autop behavior when a text is followed by a div.
+-   Fix warning when returning null from a data module generator.
+-   Announce the screen reader messages in the correct order in Safari.
+-   Check Post Type support in the options modal.
 
 ### Enhancements
-- Support customizing the table background colors.
-- Support underlining text using the keyboard shortcut ctrl+U.
-- Apply the editor styles to the HTML Block Preview.
-- Improve the color swatch selection indicator.
-- Improve scrolling behavior in Fullscreen Mode in Edge.
-- Remove deprecated embed providers.
-- Refactor the alignements support in the Cover Block and the Categories Block.
-- Code quality improvement to getBlockContentSchema
-- Internationalize the excerpt documentation link.
-- Improve pasting of quotes with citations.
-- A11y
-   - Add a tooltip to the block list appender.
-   - Improve the color contrast of the inserter shortcuts.
-   - Remove the label from the Warning component’s menu.
-- Add an option to overwrite the block in the Warning component.
+
+-   Support customizing the table background colors.
+-   Support underlining text using the keyboard shortcut ctrl+U.
+-   Apply the editor styles to the HTML Block Preview.
+-   Improve the color swatch selection indicator.
+-   Improve scrolling behavior in Fullscreen Mode in Edge.
+-   Remove deprecated embed providers.
+-   Refactor the alignements support in the Cover Block and the Categories Block.
+-   Code quality improvement to getBlockContentSchema
+-   Internationalize the excerpt documentation link.
+-   Improve pasting of quotes with citations.
+-   A11y
+    -   Add a tooltip to the block list appender.
+    -   Improve the color contrast of the inserter shortcuts.
+    -   Remove the label from the Warning component’s menu.
+-   Add an option to overwrite the block in the Warning component.
 
 ### Extensibility
-- Support custom fetch handlers for wp.apiFetch.
-- Support additional data passed to the mediaUpload utility.
-- Add filter for the preview interstitial markup.
-- Avoid appending empty query string in wp.url.addQueryArgs.
-- Dispatch heartbeat events as hook actions to avoid the jQuery dependency.
-- Support adding classnames to the plugins sidebar panels.
-- Add a className to the parent page selector.
+
+-   Support custom fetch handlers for wp.apiFetch.
+-   Support additional data passed to the mediaUpload utility.
+-   Add filter for the preview interstitial markup.
+-   Avoid appending empty query string in wp.url.addQueryArgs.
+-   Dispatch heartbeat events as hook actions to avoid the jQuery dependency.
+-   Support adding classnames to the plugins sidebar panels.
+-   Add a className to the parent page selector.
 
 ### Documentation
-- Add tutorials for
-   - Creating sidebar plugins.
-   - Using the Format API.
-   - Creating meta blocks.
-- Reorganize the tutorials page.
-- Improve the UI component documentation:
-   - The ButtonGroup component.
-   - The IconButton component.
-   - The SelectControl component.
-   - The TextareaControl component.
-   - The TabPanel component.
-   - The Toolbar component.
-   - The FormToggle component.
-- Update the Gutenberg Release and the Repository Management docs.
-- Add new section on scoping JS code.
-- Use Block Editor instead of Gutenberg in the docs.
-- Mention the Advanced Controls Panel in the design guidelines.
-- Clarify the unregisterBlockStyle documentation.
-- Clarify the difference between the button block and the button component.
-- Scope JavaScript ES5 code example.
-- Fix incorrect code example.
-- Clarify the deprecated APIs.
-- Fix typos 1 2 3 4 5 6 7.
+
+-   Add tutorials for
+    -   Creating sidebar plugins.
+    -   Using the Format API.
+    -   Creating meta blocks.
+-   Reorganize the tutorials page.
+-   Improve the UI component documentation:
+    -   The ButtonGroup component.
+    -   The IconButton component.
+    -   The SelectControl component.
+    -   The TextareaControl component.
+    -   The TabPanel component.
+    -   The Toolbar component.
+    -   The FormToggle component.
+-   Update the Gutenberg Release and the Repository Management docs.
+-   Add new section on scoping JS code.
+-   Use Block Editor instead of Gutenberg in the docs.
+-   Mention the Advanced Controls Panel in the design guidelines.
+-   Clarify the unregisterBlockStyle documentation.
+-   Clarify the difference between the button block and the button component.
+-   Scope JavaScript ES5 code example.
+-   Fix incorrect code example.
+-   Clarify the deprecated APIs.
+-   Fix typos 1 2 3 4 5 6 7.
 
 ### Chore
-- Improve CI build times.
-- Extract error messages from console logging in E2E tests.
-- Reorganization of the E2E tests setup and expose it as npm packages.
-- Add aXe accessibility E2E tests support.
-- Add E2E tests for the excerpt meta box plugin.
+
+-   Improve CI build times.
+-   Extract error messages from console logging in E2E tests.
+-   Reorganization of the E2E tests setup and expose it as npm packages.
+-   Add aXe accessibility E2E tests support.
+-   Add E2E tests for the excerpt meta box plugin.
 
 ### Mobile
-- Fix the Image Size implementation.
-- Fix scrolling long text content.
+
+-   Fix the Image Size implementation.
+-   Fix scrolling long text content.
 
 = 4.8.0 =
 
+## Changelog
+
 ### Performance
 
- - Improve page initialization time by optimizing the addHook function and the viewport state initialization.
- - Improve typing performance by splitting the state tree.
- - Optimize partial application of runSelector.
- - Move selector calls to the event handles to avoid useless component rerenders.
- - Render DropZone children only when dragging elements over it.
- - Initialize variables only when needed.
+-   Improve page initialization time by optimizing the addHook function and the viewport state initialization.
+-   Improve typing performance by splitting the state tree.
+-   Optimize partial application of runSelector.
+-   Move selector calls to the event handles to avoid useless component rerenders.
+-   Render DropZone children only when dragging elements over it.
+-   Initialize variables only when needed.
 
 ### Enhancements
 
- - Add error messages to the image block on upload failures.
- - Merge similar i18n strings.
- - Disable clipboard button in file block during upload.
- - Persist alignment when transforming a gallery to an image and vice-versa.
- - Copy enhancement to the embed block help text.
- - Improve the scrolling of the WordPress navigation menu.
+-   Add error messages to the image block on upload failures.
+-   Merge similar i18n strings.
+-   Disable clipboard button in file block during upload.
+-   Persist alignment when transforming a gallery to an image and vice-versa.
+-   Copy enhancement to the embed block help text.
+-   Improve the scrolling of the WordPress navigation menu.
 
 ### Bug Fixes
 
- - Fix RTL support for the DatePicker component.
- - Change the header level in the BlockCompare component.
- - Show all the taxonomies in the sidebar.
- - Fix the latest posts date className.
- - Fix the “align center” button in Latest Posts block in the backend.
- - Fix block height when DropCap is used.
- - Fix converting caption shortcode with link.
- - Fix edge case in addQueryArgs function.
- - Don’t return the permalink if the CPT is not publicly viewable.
- - Fix error when saving non public CPTs.
- - Properly disable the Publish button when saving is disabled.
+-   Fix RTL support for the DatePicker component.
+-   Change the header level in the BlockCompare component.
+-   Show all the taxonomies in the sidebar.
+-   Fix the latest posts date className.
+-   Fix the “align center” button in Latest Posts block in the backend.
+-   Fix block height when DropCap is used.
+-   Fix converting caption shortcode with link.
+-   Fix edge case in addQueryArgs function.
+-   Don’t return the permalink if the CPT is not publicly viewable.
+-   Fix error when saving non public CPTs.
+-   Properly disable the Publish button when saving is disabled.
 
 ### Various
 
- - Show a message in the browser’s console when in Quirks Mode.
- - Improvements to the @wordpress/scripts package: A new a check-engines command, a lint-style command and an update to lint-js.
+-   Show a message in the browser’s console when in Quirks Mode.
+-   Improvements to the @wordpress/scripts package: A new a check-engines command, a lint-style command and an update to lint-js.
 
 ### Documentation
 
- - Add a getting started with JavaScript tutorial.
- - Document the blocks’ setup states in the design guidelines.
- - Add content to Contributors index page.
- - Improve the components documentation:
-    - The MenuItem component.
-    - The RadioControl component.
-    - The ServerSideRender component.
- - Organise the documentation assets in a dedicated folder.
- - Clarify immutability of the block attributes.
- - Fix the metabox back compat code example.
- - Fix incorrect data module example.
- - Improve the plugin release docs.
- - Remove useless property from the colors code example.
- - Improve the contributing documentation.
- - Fix npm README links.
- - Update the design resources link.
- - Typo fixes.
+-   Add a getting started with JavaScript tutorial.
+-   Document the blocks’ setup states in the design guidelines.
+-   Add content to Contributors index page.
+-   Improve the components documentation:
+    -   The MenuItem component.
+    -   The RadioControl component.
+    -   The ServerSideRender component.
+-   Organise the documentation assets in a dedicated folder.
+-   Clarify immutability of the block attributes.
+-   Fix the metabox back compat code example.
+-   Fix incorrect data module example.
+-   Improve the plugin release docs.
+-   Remove useless property from the colors code example.
+-   Improve the contributing documentation.
+-   Fix npm README links.
+-   Update the design resources link.
+-   Typo fixes.
 
 ### Chore
 
- - Run e2e tests with popular plugins enabled.
- - Add new e2e tests:
-    - The permalink panel.
-    - The categories panel.
-    - Blocks with meta attributes.
- - Update node-sass to fix Node 11 support.
- - Move the dev dependencies to the root package.json.
- - Improve the Pull Request Template.
- - More logs to the CI jobs.
- - Code style fixes and expand the phpcs coverage.
- - Disable fragile e2e tests.
- - Avoid PHP notices when running the e2e tests in debug mode.
+-   Run e2e tests with popular plugins enabled.
+-   Add new e2e tests:
+    -   The permalink panel.
+    -   The categories panel.
+    -   Blocks with meta attributes.
+-   Update node-sass to fix Node 11 support.
+-   Move the dev dependencies to the root package.json.
+-   Improve the Pull Request Template.
+-   More logs to the CI jobs.
+-   Code style fixes and expand the phpcs coverage.
+-   Disable fragile e2e tests.
+-   Avoid PHP notices when running the e2e tests in debug mode.
 
 ### Mobile
 
- - Make a simple version of DefaultBlockAppender.
- - Stop using classname-to-style autotransform in react native.
- - Fix SVG styles.
- - Implement Enter press to add a default block.
- - Hide keyboard when non textual block is selected.
- - Fix undo/redo on new blocks.
- - Pass the blockType prop to RNAztecView.
- - Expose unregisterBlockType.
+-   Make a simple version of DefaultBlockAppender.
+-   Stop using classname-to-style autotransform in react native.
+-   Fix SVG styles.
+-   Implement Enter press to add a default block.
+-   Hide keyboard when non textual block is selected.
+-   Fix undo/redo on new blocks.
+-   Pass the blockType prop to RNAztecView.
+-   Expose unregisterBlockType.
 
 = 4.7.1 =
 
-### Bug fix
+## Changelog
+
+### Bug fixes
 
-* Editor: Restore the block prop in the BlockListBlock filter
+-   Editor: Restore the block prop in the BlockListBlock filter
 
 = 4.7.0 =
 
+## Changelog
+
 ### Performance improvements
 
-* Optimize isViewportMatch
-* Performance: BlockListAppender: 1.7x increase on key press
-* Date: Optimize the usage of moment-timezone to save some kilobytes
-* RichText: selectionChange: bind on focus, unbind on blur
-* RichText: only replace range and nodes if different
-* Cache createBlock call in isUnmodifiedDefaultBlock
-* Edit Post: Select blocks only once multiple verified
-* RichText: Do not run valueToEditableHTML on every render
-* RichText: Reuse DOM document across calls to createEmpty
-* Only initialise TinyMCE once per instance
-* Optimize the insertion point component
-* Avoid rerending the current block if the previous block change
-* Avoid getBlock in block-list/block
-* Pass the registry argument to withDispatch to allow selectors to be used
+-   Optimize isViewportMatch
+-   Performance: BlockListAppender: 1.7x increase on key press
+-   Date: Optimize the usage of moment-timezone to save some kilobytes
+-   RichText: selectionChange: bind on focus, unbind on blur
+-   RichText: only replace range and nodes if different
+-   Cache createBlock call in isUnmodifiedDefaultBlock
+-   Edit Post: Select blocks only once multiple verified
+-   RichText: Do not run valueToEditableHTML on every render
+-   RichText: Reuse DOM document across calls to createEmpty
+-   Only initialise TinyMCE once per instance
+-   Optimize the insertion point component
+-   Avoid rerending the current block if the previous block change
+-   Avoid getBlock in block-list/block
+-   Pass the registry argument to withDispatch to allow selectors to be used
 
 ### Bug fixes
 
-* Annotations: Apply annotation className as string
-* RichText: Ensure instance is selected before setting back selection
-* Meta Boxes: Don’t hide disabled meta boxes by modifying DOM
-* Fix: Problems on Media & Text block resizing; Load wp-block-library styles before wp-edit-blocks
-* When a post is saved, check for tinymce and save any editors.
-* Fix: Undoing Image Selection from Media Library in Image Block breaks it
-* Add an end-to-end test for the HTML block
-* Fix regression when copying or cutting content in the editor
-* Fix issue where default appender has icons overlaying the text
-* Set document title for preview loading interstitial
-* Fix: Upload permissions error on end-to-end inline tokens test
-* Ensure classic block caret is in correct position after blur
-* Fix tab navigation sometimes skipping block UI
-* Improve font size picker accessibility: Use a menuitemradio role and better labels
-* Don’t show trashed reusable blocks in the editor or frontend
-* Rename functions, removing gutenberg_ prefix
-* Add block switcher end-to-end tests
-* Allow links in plugin group in the editor more menu
-* Introduce searching of block categories from slash inserter
-* Convert HTML formatting whitespace to spaces
-* Label link format with selected text, not full text
-* Ensure permalink panel is only displayed when a permalink is allowed
-* Allow the user to convert unembeddable URLs to links and try embedding again
-* Improve the top bar tools interaction and consistency
-* Fix overflowing content in the facebook embed preview screen
-* Add an action to set a category icon and correct block categories documentation
-* Fix: pasting a tag that is part of a transform and not matched ignores the content.
-* Packages: Extract Eslint config package
-* Add end-to-end test to catch revert of title during a preview after saving a draft
-* Avoid react warnings when merging two adjacent paragraphs
-* Avoid PHP notice in the recent comments block
+-   Annotations: Apply annotation className as string
+-   RichText: Ensure instance is selected before setting back selection
+-   Meta Boxes: Don’t hide disabled meta boxes by modifying DOM
+-   Fix: Problems on Media & Text block resizing; Load wp-block-library styles before wp-edit-blocks
+-   When a post is saved, check for tinymce and save any editors.
+-   Fix: Undoing Image Selection from Media Library in Image Block breaks it
+-   Add an end-to-end test for the HTML block
+-   Fix regression when copying or cutting content in the editor
+-   Fix issue where default appender has icons overlaying the text
+-   Set document title for preview loading interstitial
+-   Fix: Upload permissions error on end-to-end inline tokens test
+-   Ensure classic block caret is in correct position after blur
+-   Fix tab navigation sometimes skipping block UI
+-   Improve font size picker accessibility: Use a menuitemradio role and better labels
+-   Don’t show trashed reusable blocks in the editor or frontend
+-   Rename functions, removing gutenberg\_ prefix
+-   Add block switcher end-to-end tests
+-   Allow links in plugin group in the editor more menu
+-   Introduce searching of block categories from slash inserter
+-   Convert HTML formatting whitespace to spaces
+-   Label link format with selected text, not full text
+-   Ensure permalink panel is only displayed when a permalink is allowed
+-   Allow the user to convert unembeddable URLs to links and try embedding again
+-   Improve the top bar tools interaction and consistency
+-   Fix overflowing content in the facebook embed preview screen
+-   Add an action to set a category icon and correct block categories documentation
+-   Fix: pasting a tag that is part of a transform and not matched ignores the content.
+-   Packages: Extract Eslint config package
+-   Add end-to-end test to catch revert of title during a preview after saving a draft
+-   Avoid react warnings when merging two adjacent paragraphs
+-   Avoid PHP notice in the recent comments block
 
 = 4.6.1 =
 
-* Parser: Make attribute parsing possessive (Fix High CPU usage).
+-   Parser: Make attribute parsing possessive (Fix High CPU usage).
 
 = 4.6.0 =
 
-* Fix issue with drag-and-drop in columns.
-* Fix TinyMCE list plugin registration.
-* Fix IE11 flexbox alignment when min-width is set.
-* Fix IE11 focus loss after TinyMCE init. Add IE check.
-* Fix getSelectedBlockClientId selector.
-* Fix issue where unregistering a block type would cause blocks that convert to it to break.
-* Fix Classic block not showing galleries on a grid.
-* Fix visual issues with Button block text wrap.
-* Fix modals in Edge.
-* Fix Categories block filter effect on the front-end.
-* Fix an issue where the block toolbar would cause an image to jump downwards when the wide or full - alignments were activated.
-* Apply IE11 input fix only when mounting TinyMCE.
-* Improve block preview styling.
-* Make the Image Link URL field readonly.
-* Disable HTML edit from Media & Text block.
-* Avoid loading theme editor styles if not existing (RTL languages).
-* Improve scoping of nested paragraph right-padding CSS rule.
-* Add e2e tests for the format API.
-* Merge similar text strings for i18n.
-* Move editor specific styles from style.scss to editor.scss in Cover block.
-* Simplify sidebar tabs aria-labels.
-* Remove onSplit from RichText docs.
-* Remove textdomain from the block library.
-* Avoid rendering AdminNotices compatibility component.
-* Avoid changing default wpautop priority.
-* Change @package names to WordPress.
-* Update published packages changelogs.
+-   Fix issue with drag-and-drop in columns.
+-   Fix TinyMCE list plugin registration.
+-   Fix IE11 flexbox alignment when min-width is set.
+-   Fix IE11 focus loss after TinyMCE init. Add IE check.
+-   Fix getSelectedBlockClientId selector.
+-   Fix issue where unregistering a block type would cause blocks that convert to it to break.
+-   Fix Classic block not showing galleries on a grid.
+-   Fix visual issues with Button block text wrap.
+-   Fix modals in Edge.
+-   Fix Categories block filter effect on the front-end.
+-   Fix an issue where the block toolbar would cause an image to jump downwards when the wide or full - alignments were activated.
+-   Apply IE11 input fix only when mounting TinyMCE.
+-   Improve block preview styling.
+-   Make the Image Link URL field readonly.
+-   Disable HTML edit from Media & Text block.
+-   Avoid loading theme editor styles if not existing (RTL languages).
+-   Improve scoping of nested paragraph right-padding CSS rule.
+-   Add e2e tests for the format API.
+-   Merge similar text strings for i18n.
+-   Move editor specific styles from style.scss to editor.scss in Cover block.
+-   Simplify sidebar tabs aria-labels.
+-   Remove onSplit from RichText docs.
+-   Remove textdomain from the block library.
+-   Avoid rendering AdminNotices compatibility component.
+-   Avoid changing default wpautop priority.
+-   Change @package names to WordPress.
+-   Update published packages changelogs.
 
 = 4.5.1 =
 
-* Raw Handling: fix consecutive lists with one item
-* Avoid showing draft revert message on autosaves
-* Honor the Disable Visual Editor setting in the Gutenberg editor page
-* Docs: Fix dead links in CONTRIBUTING.md
-* Fix undefined index warnings in Latest Comments & Latest Posts
-* Add `react-native` module property to html-entities package.json
-* RichText: List: Sync DOM after editor command
-* Fix RichText infinte rerendering
-* Fix keycodes package missing i18n dependencies
+-   Raw Handling: fix consecutive lists with one item
+-   Avoid showing draft revert message on autosaves
+-   Honor the Disable Visual Editor setting in the Gutenberg editor page
+-   Docs: Fix dead links in CONTRIBUTING.md
+-   Fix undefined index warnings in Latest Comments & Latest Posts
+-   Add `react-native` module property to html-entities package.json
+-   RichText: List: Sync DOM after editor command
+-   Fix RichText infinte rerendering
+-   Fix keycodes package missing i18n dependencies
 
 = 4.5.0 =
 
-* Add relevant attribute data from images to be used server side to handle things like theme specific responsive media.
-* In order to be able to use srcset and sizes on the front end, wp-image-### CSS class has been added to the media and text block.
-* Add minimal multi-selection block panel to replace “Coming Soon” message. It shows word and block count for the selection.
-* Exclude reusable blocks from the global block count in Document Outline.
-* Upgrade admin notices to use Notices module at runtime. It attempts to seamlessly upgrade notices output via an admin_notices or all_admin_notices action server-side.
-* Adjust the prefix transforms so that they only execute when they match text right at the caret so that they are undoable. Also makes it faster by checking if the previous character is a space.
-* Add ability to specify a different default editor font per locale.
-* Add link rel and link class settings to Image block inspector.
-* Transform an Image and Audio block to an Embed block if the URL matches an embed.
-* Respect the “Disable Visual Editor” setting per user.
-* Make it easy to access image IDs server-side on the Gallery block.
-* Recursively step through edits to track individually changed post meta in Block API. This prevents saving the default value for each registered meta when only one of them is changed.
-* Perform a complete draft save on preview.
-* Save all meta-boxes when clicking the preview button. Set preview URL only after saving is complete.
-* Disable hover interaction on mobile to improve scrolling.
-* Update the displayed permalink when the slug is cleared.
-* When converting to blocks, place unhandled HTML within an HTML block.
-* Ensure content that cannot be handled in quotes is preserved within an HTML block.
-* Localize the DateTimePicker Component.
-* Fixes the behavior of link validation including properly handling URL fragments, validating forward slashes in HTTP URLs, more strictness to match getProtocol, addressing false positives in E2E tests.
-* Fix issue where existing reusable blocks on a post would not render if the user was an author or a contributor. This happens because requests to fetch a single block or post are blocked when ?context=edit is passed and the current user is not an editor.
-* Make sure the media library collection is refreshed when a user uploads media outside of the Media Library workflow (i.e. file drops, file uploads, etc).
-* Update the editor reducer so that RESET_BLOCKS will only remove blocks that are actually in the post.
-* It used to be possible to add a reusable block inside the same reusable block in the UI, e.g. someone could create a column block inside another column block. Now it is not.
-* Deleting after certain types of selection was causing the caret to appear in the wrong place, now that it fixed, along with unexpected behavior of Ctrl+A after other kinds of selection, and the associated E2E tests updated.
-* Remove permalink-based features from non-public CPTs.
-* Address various issues with post locking modal.
-* Fix issue with duplicating blocks and undo on Top Toolbar mode.
-* Visual fix of margin on icons that are not dashicons in placeholders.
-* Visual fix for centre-aligned text on coverblocks.
-* Visual fix for embeds that are wider than the mobile breakpoint, cropping them to fit within the screen.
-* Adds MediaUploadCheck before some MediaUpload components where it was not being checked in time, creating a confusing experience for users in the “contributor” role.
-* Fix undefined variable warning in gutenberg.php.
-* Add missing stringifier and iterator in TokenList component.
-* Address i18n issue in MultiSelectionInspector.
-* Fix small visual regression with button variation preview.
-* Fix interaction regression with Sibling Inserter.
-* Fix issue with the Privacy Policy help notice.
-* Fix post visibility popover not appearing on mobile.
-* Fix issue with toolbar in IE11.
-* Fix small gap in style variation button.
-* Fix popovers position in RTL languages.
-* Fix double border issue with disabled toggle control.
-* Fix the TinyMCE init array.
-* RichText content that comes from headings content attribute should use the RichText.Content instead of rendering it directly.
-* Makes the escape key consistently exit the inline link popover – previously this could behave unexpectedly depending on focus.
-* Improve accessibility of permalink sidebar panel using external link component.
-* Display selected block outlines on Top Toolbar mode.
-* Avoid responding to componentDidUpdate in withDispatch.
-* Allow previewing changes to the post featured image.
-* Preserve unknown attributes and respect null in server attributes preparation
-* Adds missing periods to notification that another user has control of the post.
-* Restore the help modal in the Classic block.
-* Reduce specificity in core button styles to reduce conflicts with theme styles.
-* Update name of “Unified Toolbar” to “Top Toolbar” for extra clarity.
-* Make it possible to have an editor-only annotation format that stays in
-* position when typing inside RichText.
-* Adds missing periods to notification that the user does not have permission to read the blocks of the post.
-* Only add data-align for wide/full aligns if editor/theme supports them.
-* Updates jest to latest version to address vulnerabilities.
-* Removes redundant code now that TinyMCE is not being used to handle paste events.
-* Remove the gutenberg text-domain from dynamic blocks.
-* Remove redundant word from media and text block description.
-* Makes the URL for the classic editor translatable, so that the appropriate translated version can be linked to.
-* Update More block description.
-* Avoid .default on browser global assignments.
-* Mirror packages dependencies registration with core.
-* Remove absolute positions in the link popover E2E test.
-* Improve keyboard mappings in E2E tests, replacing custom utils with modifiers from the keycodes package.
-* Add missing imports on some E2E test utilities.
-* Update API Fetch documentation – removes unnecessary wp-json.
-* Remove iOS scroll adjusting now that enter behavior is more smooth.
-* Register the paragraph block as the default block.
-* Handle isSelected in plain text blocks (currently Code and More blocks).
+-   Add relevant attribute data from images to be used server side to handle things like theme specific responsive media.
+-   In order to be able to use srcset and sizes on the front end, wp-image-### CSS class has been added to the media and text block.
+-   Add minimal multi-selection block panel to replace “Coming Soon” message. It shows word and block count for the selection.
+-   Exclude reusable blocks from the global block count in Document Outline.
+-   Upgrade admin notices to use Notices module at runtime. It attempts to seamlessly upgrade notices output via an admin_notices or all_admin_notices action server-side.
+-   Adjust the prefix transforms so that they only execute when they match text right at the caret so that they are undoable. Also makes it faster by checking if the previous character is a space.
+-   Add ability to specify a different default editor font per locale.
+-   Add link rel and link class settings to Image block inspector.
+-   Transform an Image and Audio block to an Embed block if the URL matches an embed.
+-   Respect the “Disable Visual Editor” setting per user.
+-   Make it easy to access image IDs server-side on the Gallery block.
+-   Recursively step through edits to track individually changed post meta in Block API. This prevents saving the default value for each registered meta when only one of them is changed.
+-   Perform a complete draft save on preview.
+-   Save all meta-boxes when clicking the preview button. Set preview URL only after saving is complete.
+-   Disable hover interaction on mobile to improve scrolling.
+-   Update the displayed permalink when the slug is cleared.
+-   When converting to blocks, place unhandled HTML within an HTML block.
+-   Ensure content that cannot be handled in quotes is preserved within an HTML block.
+-   Localize the DateTimePicker Component.
+-   Fixes the behavior of link validation including properly handling URL fragments, validating forward slashes in HTTP URLs, more strictness to match getProtocol, addressing false positives in E2E tests.
+-   Fix issue where existing reusable blocks on a post would not render if the user was an author or a contributor. This happens because requests to fetch a single block or post are blocked when ?context=edit is passed and the current user is not an editor.
+-   Make sure the media library collection is refreshed when a user uploads media outside of the Media Library workflow (i.e. file drops, file uploads, etc).
+-   Update the editor reducer so that RESET_BLOCKS will only remove blocks that are actually in the post.
+-   It used to be possible to add a reusable block inside the same reusable block in the UI, e.g. someone could create a column block inside another column block. Now it is not.
+-   Deleting after certain types of selection was causing the caret to appear in the wrong place, now that it fixed, along with unexpected behavior of Ctrl+A after other kinds of selection, and the associated E2E tests updated.
+-   Remove permalink-based features from non-public CPTs.
+-   Address various issues with post locking modal.
+-   Fix issue with duplicating blocks and undo on Top Toolbar mode.
+-   Visual fix of margin on icons that are not dashicons in placeholders.
+-   Visual fix for centre-aligned text on coverblocks.
+-   Visual fix for embeds that are wider than the mobile breakpoint, cropping them to fit within the screen.
+-   Adds MediaUploadCheck before some MediaUpload components where it was not being checked in time, creating a confusing experience for users in the “contributor” role.
+-   Fix undefined variable warning in gutenberg.php.
+-   Add missing stringifier and iterator in TokenList component.
+-   Address i18n issue in MultiSelectionInspector.
+-   Fix small visual regression with button variation preview.
+-   Fix interaction regression with Sibling Inserter.
+-   Fix issue with the Privacy Policy help notice.
+-   Fix post visibility popover not appearing on mobile.
+-   Fix issue with toolbar in IE11.
+-   Fix small gap in style variation button.
+-   Fix popovers position in RTL languages.
+-   Fix double border issue with disabled toggle control.
+-   Fix the TinyMCE init array.
+-   RichText content that comes from headings content attribute should use the RichText.Content instead of rendering it directly.
+-   Makes the escape key consistently exit the inline link popover – previously this could behave unexpectedly depending on focus.
+-   Improve accessibility of permalink sidebar panel using external link component.
+-   Display selected block outlines on Top Toolbar mode.
+-   Avoid responding to componentDidUpdate in withDispatch.
+-   Allow previewing changes to the post featured image.
+-   Preserve unknown attributes and respect null in server attributes preparation
+-   Adds missing periods to notification that another user has control of the post.
+-   Restore the help modal in the Classic block.
+-   Reduce specificity in core button styles to reduce conflicts with theme styles.
+-   Update name of “Unified Toolbar” to “Top Toolbar” for extra clarity.
+-   Make it possible to have an editor-only annotation format that stays in
+-   position when typing inside RichText.
+-   Adds missing periods to notification that the user does not have permission to read the blocks of the post.
+-   Only add data-align for wide/full aligns if editor/theme supports them.
+-   Updates jest to latest version to address vulnerabilities.
+-   Removes redundant code now that TinyMCE is not being used to handle paste events.
+-   Remove the gutenberg text-domain from dynamic blocks.
+-   Remove redundant word from media and text block description.
+-   Makes the URL for the classic editor translatable, so that the appropriate translated version can be linked to.
+-   Update More block description.
+-   Avoid .default on browser global assignments.
+-   Mirror packages dependencies registration with core.
+-   Remove absolute positions in the link popover E2E test.
+-   Improve keyboard mappings in E2E tests, replacing custom utils with modifiers from the keycodes package.
+-   Add missing imports on some E2E test utilities.
+-   Update API Fetch documentation – removes unnecessary wp-json.
+-   Remove iOS scroll adjusting now that enter behavior is more smooth.
+-   Register the paragraph block as the default block.
+-   Handle isSelected in plain text blocks (currently Code and More blocks).
 
 = 4.4.0 =
 
-* Improves discoverability of permalinks by adding permalink panel to the document sidebar.
-* Improves margins, column child block, and mobile display of columns.
-* Allow for programmatically removing editor document panels.
-* Replaces the uploading indicator of images and galleries with a spinner and faded out image.
-* Toolbar for floats was a little offset beyond the mobile breakpoint, now fixed.
-* Text and code editing blocks did not have width set, now set to fill the space.
-* Correctly align URL input autocomplete.
-* Improve animations: new, consistent naming convention, adds editor prefix, and moves keyframe animations (which don’t work well with mixins) into the edit post style.
-* Hover styles were showing on mobile, where hover is not available – now disabled.
-* Click and drag was incorrectly triggering a selection event in the block list under the popover, resulting in the popover dismissing. This was causing blocks to be selected when trying to set links to open in a new tab, for example. Fixed by preventing the mouse down event from propagating.
-* Adds some padding to the block inserter so that it never overlaps text in nested contexts or mobile views.
-* Better handle images larger than the editor by allowing a 2.5x buffer. Allows images inserted in TwentyNineteen and other themes that have a wider than 580px editor width, to look as expected, but prevents infinite resizing of images.
-* Stop mousedown event propagating through the toolbar, fixing problem of unexpectedly selecting blocks.
-* Improve the way that long words are broken on multiple lines, using word-break: keep-all;
-* Preserve the ratio of video backgrounds in cover blocks, videos may be cropped to fit but will keep their original ratio.
-* It was not possible to scroll a long menu on first load of Gutenberg, fixed by removing sticky-menu.
-* Properly check for allowed types of Media in Media Placeholder components.
-* “Resolve” and “Convert to HTML” buttons were not clickable (regression), now resolved.
-* Exclude HTML editing from Columns and Column blocks.
-* Better handle links without href, which were showing as `undefined`.
-* Renders block appender after the template is processed, to prevent incorrectly inserting new paragraphs.
-* Parent pages were being lost when draft pages were autosaved, fixed by removing parent pages from autosave requests and refactoring to stop using “parent” as the path argument name.
-* Adding line breaks in formatted content in quote blocks were not working correctly, fixed by persisting formats when new lines are added.
-* Prevent users in the contributor role from using blocks that require upload privileges.
-* Fix block selection in removing blocks, correct typo in comparison.
-* Japanese text (double byte characters) was not usable in the list block, fixed by changing handling of composition events.
-* Better handles different text encodings (e.g. emoji) within a block in block validation.
-* Use a query argument instead of data to prevent error being thrown on post refresh.
-* Keyboard navigation was not working as expected in Firefox, added extra key binding.
-* Adds missing alt values to images when editing.
-* Better communicate block nesting level by using unordered lists.
-* Fix sidebar icons being incorrectly announced in NVDA by adding a span with `aria-hidden=”true”`.
-* Fixes block toolbar aria label to announce “block tools toolbar” rather than “block toolbar (a11y).
-* Adjusts focus on media and text blocks to select the overall block, not the child paragraph block.
-* Refactors i18n module to replaces Jed with Tannin for significant performance improvements.
-* Replace `getSelectedBlock` and `getMultiSelectedBlocks` with more performant `getSelectedBlockClientId` and a `getBlocks` selectors in copy handler.
-* Replace `getBlock` selector in favor of the more performant `getBlockName`.
-* Replace `getSelectedBlock` with more performant `getSelectedBlockClientId` and new `isBlockValid` selectors in the BlockToolbar.
-* Replace `getSelectedBlock` with more performant `getSelectedBlockClientId` and new `isBlockValid` selectors in the Block Inspector.
-* Replaces `getInserterItems` with a new `hasInserterItems` selector which is more performant, and makes some adjustments to memorization.
-* Avoid using the `getSelectedBlock` selector in autocompleters.
-* Remove use of `getBlock` selector in the DefaultBlockAppender and EditorKeyboardShortcuts components.
-* Move undo handling out of TinyMCE and into the RichText component.
-* `is_gutenberg_page` incorrectly assumes `get_current_screen` exists, add check.
-* Brings code inline with CSS standards by switching font weight to numeric values.
-* Wrapped component would not the most up-to-date store values if it incurred a store state change during its own mount (e.g. dispatching during its own constructor), resolved by rerunning selection.
-* Display an error message if Javascript is disabled.
-* Update to React 16.6.3.
-* Adds missing components dependency for RichText.
-* Refactors list block to remove previously exposed RichText/TinyMCE logic.
-* Removes `focusOnMount` prop from NavigableToolbar components, which was generating a warning.
-* Refactor checks for upload permissions, removing unnecessary checks for store permissions.
-* Use the large image size when inserting images in both galleries and image blocks.
-* Fixes dependency of `wp-polyfill` which needs to be registered before React and React-Dom when plugins (like Yoast) rely on Gutenberg’s React.
-* Mark `onSplit` as unstable as it is pending refactor.
-* Remove 4.4 deprecated features.
-* Fix SCSS syntax error.
-* Remove export of previously removed function.
-* Add an E2E test for unsupported blocks.
-* Refactor E2E utility functions.
-* Formatting updates to copy guidelines.
-* Makes headings consistent in the dropdown documentation.
-* Removes outdated documentation referring to function support in `registerBlockType`.
-* Fixes some typos and line breaks in block design documentation.
-* Fixes some typos and improves readability of README.
-* Adds toolbar to the editing block, and edit button.
-* Passes the `isSelected` prop down to the implementation of RichText components to make them respond properly to focus changes.
+-   Improves discoverability of permalinks by adding permalink panel to the document sidebar.
+-   Improves margins, column child block, and mobile display of columns.
+-   Allow for programmatically removing editor document panels.
+-   Replaces the uploading indicator of images and galleries with a spinner and faded out image.
+-   Toolbar for floats was a little offset beyond the mobile breakpoint, now fixed.
+-   Text and code editing blocks did not have width set, now set to fill the space.
+-   Correctly align URL input autocomplete.
+-   Improve animations: new, consistent naming convention, adds editor prefix, and moves keyframe animations (which don’t work well with mixins) into the edit post style.
+-   Hover styles were showing on mobile, where hover is not available – now disabled.
+-   Click and drag was incorrectly triggering a selection event in the block list under the popover, resulting in the popover dismissing. This was causing blocks to be selected when trying to set links to open in a new tab, for example. Fixed by preventing the mouse down event from propagating.
+-   Adds some padding to the block inserter so that it never overlaps text in nested contexts or mobile views.
+-   Better handle images larger than the editor by allowing a 2.5x buffer. Allows images inserted in TwentyNineteen and other themes that have a wider than 580px editor width, to look as expected, but prevents infinite resizing of images.
+-   Stop mousedown event propagating through the toolbar, fixing problem of unexpectedly selecting blocks.
+-   Improve the way that long words are broken on multiple lines, using word-break: keep-all;
+-   Preserve the ratio of video backgrounds in cover blocks, videos may be cropped to fit but will keep their original ratio.
+-   It was not possible to scroll a long menu on first load of Gutenberg, fixed by removing sticky-menu.
+-   Properly check for allowed types of Media in Media Placeholder components.
+-   “Resolve” and “Convert to HTML” buttons were not clickable (regression), now resolved.
+-   Exclude HTML editing from Columns and Column blocks.
+-   Better handle links without href, which were showing as `undefined`.
+-   Renders block appender after the template is processed, to prevent incorrectly inserting new paragraphs.
+-   Parent pages were being lost when draft pages were autosaved, fixed by removing parent pages from autosave requests and refactoring to stop using “parent” as the path argument name.
+-   Adding line breaks in formatted content in quote blocks were not working correctly, fixed by persisting formats when new lines are added.
+-   Prevent users in the contributor role from using blocks that require upload privileges.
+-   Fix block selection in removing blocks, correct typo in comparison.
+-   Japanese text (double byte characters) was not usable in the list block, fixed by changing handling of composition events.
+-   Better handles different text encodings (e.g. emoji) within a block in block validation.
+-   Use a query argument instead of data to prevent error being thrown on post refresh.
+-   Keyboard navigation was not working as expected in Firefox, added extra key binding.
+-   Adds missing alt values to images when editing.
+-   Better communicate block nesting level by using unordered lists.
+-   Fix sidebar icons being incorrectly announced in NVDA by adding a span with `aria-hidden=”true”`.
+-   Fixes block toolbar aria label to announce “block tools toolbar” rather than “block toolbar (a11y).
+-   Adjusts focus on media and text blocks to select the overall block, not the child paragraph block.
+-   Refactors i18n module to replaces Jed with Tannin for significant performance improvements.
+-   Replace `getSelectedBlock` and `getMultiSelectedBlocks` with more performant `getSelectedBlockClientId` and a `getBlocks` selectors in copy handler.
+-   Replace `getBlock` selector in favor of the more performant `getBlockName`.
+-   Replace `getSelectedBlock` with more performant `getSelectedBlockClientId` and new `isBlockValid` selectors in the BlockToolbar.
+-   Replace `getSelectedBlock` with more performant `getSelectedBlockClientId` and new `isBlockValid` selectors in the Block Inspector.
+-   Replaces `getInserterItems` with a new `hasInserterItems` selector which is more performant, and makes some adjustments to memorization.
+-   Avoid using the `getSelectedBlock` selector in autocompleters.
+-   Remove use of `getBlock` selector in the DefaultBlockAppender and EditorKeyboardShortcuts components.
+-   Move undo handling out of TinyMCE and into the RichText component.
+-   `is_gutenberg_page` incorrectly assumes `get_current_screen` exists, add check.
+-   Brings code inline with CSS standards by switching font weight to numeric values.
+-   Wrapped component would not the most up-to-date store values if it incurred a store state change during its own mount (e.g. dispatching during its own constructor), resolved by rerunning selection.
+-   Display an error message if JavaScript is disabled.
+-   Update to React 16.6.3.
+-   Adds missing components dependency for RichText.
+-   Refactors list block to remove previously exposed RichText/TinyMCE logic.
+-   Removes `focusOnMount` prop from NavigableToolbar components, which was generating a warning.
+-   Refactor checks for upload permissions, removing unnecessary checks for store permissions.
+-   Use the large image size when inserting images in both galleries and image blocks.
+-   Fixes dependency of `wp-polyfill` which needs to be registered before React and React-Dom when plugins (like Yoast) rely on Gutenberg’s React.
+-   Mark `onSplit` as unstable as it is pending refactor.
+-   Remove 4.4 deprecated features.
+-   Fix SCSS syntax error.
+-   Remove export of previously removed function.
+-   Add an E2E test for unsupported blocks.
+-   Refactor E2E utility functions.
+-   Formatting updates to copy guidelines.
+-   Makes headings consistent in the dropdown documentation.
+-   Removes outdated documentation referring to function support in `registerBlockType`.
+-   Fixes some typos and line breaks in block design documentation.
+-   Fixes some typos and improves readability of README.
+-   Adds toolbar to the editing block, and edit button.
+-   Passes the `isSelected` prop down to the implementation of RichText components to make them respond properly to focus changes.
 
 = 4.3.0 =
 
-* Allow toggling the core custom fields meta box.
-* Introduce Annotations API across Block and Formatting.
-* Allow using a YouTube URL (or other sources) in the Video block and transparently convert it to Embed.
-* Allow Alt+F10 keyboard shortcut to navigate to block toolbar regardless of the toolbar visibility (isTyping, etc).
-* Return focus to element that opened the post publish panel after it is closed.
-* Avoid unnecessary re-renders when navigating between blocks.
-* Improve interactions around Columns block.
-* Improve keyboard navigation through the Gallery block.
-* Use full parser in do_blocks with nested block support. This switch will allow dynamic blocks which contain nested blocks inside of them and it will pave the way for a filtering API to structurally process blocks.
-* Refactor contextual toolbar to work better with floats.
-* Auto-refresh Popovers position but only refresh if the anchor position changes.
-* Add min-width to audio block.
-* Avoid auto-saving with empty post content.
-* Display correct Taxonomy labels.
-* Fix incorrect import name.
-* Fix styling issue with checkboxes.
-* Add full set of reusable block post type labels (addresses “no blocks found” state).
-* Fix right to left block alignment.
-* Fix “updating failed” notices showing on long-open tabs.
-* Fix default PHP parser to cast inner blocks as arrays.
-* Fix JS/PHP inconsistencies with empty attributes on parsing.
-* Link to the source image in the media block.
-* Fix select all keyboard shortcut for Safari and Firefox.
-* Create multiple blocks when multiple files are drag and dropped.
-* Fixes potential theme syle.css clash.
-* Makes preview button a link (a11y).
-* Stop re-rendering all blocks on arrow navigation.
-* Add constraint tabbing to post publish panel (a11y).
-* Fix image uploading bug (incorrect JSON in apiFetch).
-* Fix taxonomy visibility for contributors.
-* Adds aria labels to images in gallery blocks during editing (a11y).
-* Formatting fix for blockquotes.
-* Hide custom fields when meta box is disabled.
-* Limits blockquote color auto-selection to solid color blocks for readability.
-* Fixes announcement on multi-selection of blocks (a11y).
-* Display upload errors in the image block.
-* Fixes selection of embed type blocks.
-* Fixes JSON attribute parsing.
-* Fixes post publish focus (a11y).
-* Resolve macOS Firefox / Safari sibling inserter behavior.
-* Fix visibility of sibling inserter on tab focus.
-* Fix issue with pasting from Word where an image would be created instead of text.
-* Fix multi-selection for float elements.
-* Fetch all tag terms, not just first 100.
-* Correctly displays media on the right.
-* Only show named image sizes.
-* Improves handling of paste action.
-* Updates displayed permalink after permalink is edited.
-* Adjust font size for contrast warning (a11y).
-* Better handles formatting – nested and Google Docs.
-* Fixes suggestion list scrolling when using keyboard (a11y).
-* Fixes block and menu navigation a11y.
-* Click to close dropdown popover.
-* Fix save lock control.
-* Timezone handling fix.
-* Improve a11y of empty text blocks.
-* Fix states for publish buttons.
-* Fix backspace behavior.
-* Change aria labels for paragraph blocks (a11y).
-* Add support for prepare RichText tree.
-* With this change we force the browser to treat the textarea for the
-* code editor as auto when handling direction for its display to preserve the ability to interact with the block delimiters.
-* Rename parentClientId to rootClientId.
-* Remove deprecated findDOMNode call from Tooltip component.
-* Remove unused ref assignment to RichText.
-* Remove redundant onClickOutside handler from Dropdown.
-* Refactor block state.
-* Remove Cloudflare warning for blocked API calls.
-* Remove _wpGutenbergCodeEditorSettings (dead code).
-* Adds periods to block a11y descriptions.
-* Refactor embed block.
-* Handle metabox warning exceptions.
-* Refactor RichText to update formatting bar on format availability changes.
-* Rename wp-polyfill-ecmascript.
-* Update translator comments for quote and pullquote.
-* Remove findDOMNode useage from NavigableToolbar.
-* Changes handling of dates to properly handling scheduling.
-* Remove findDomNode from withHoverAreas.
-* Fixes missing translator comments.
-* Refactor to import Format API components.
-* Refactor of change detection: initial edits.
-* Adds better translation comments to “resolve” and “resolve block”.
-* Adds option for blocks with child blocks to change selection behavior.
-* Allows blocks to disable being converted to reusable blocks.
-* Improve undo/redo states.
-* Updates parsing to better handle nested content.
-* Remove undefined className argument from save().
-* Use different tooltips for different alignment buttons.
-* Improve performance and handling of autosave.
-* Improve gallery upload for multiple images: load one by one.
-* Adds context variable to RichText component.
-* Avoid calling missing get_current_screen function.
-* Make cssnano remove all style comments.
-* Refactor normalizeBlockType.
-* Shows icon in block toolbar.
-* Makes kitchensink button removable from plugins.
-* Fix popover sizing on screen change (autorefresh)
-* Improvement to Columns block.
-* Update block description for consistency.
-* Refactor block styles registration.
-* Use apostrophe instead of single-quote character in strings.
-* Add transformations between video and media and text block.
-* Version update for NPM packages.
-* Update Lerna to latest version.
-* Validates link format in RichText.
-* Refactor contextual toolbar to work better with floats.
-* Move wp-polyfill-ecmascript override to scripts registration.
-* Improves consistency of parser tests.
-* Remove code coverage.
-* Adds mocking helpers for E2E tests.
-* Runs E2E tests with the user in author role.
-* Adds tests for Format API.
-* Adds E2E test for rapid enter presses.
-* Fix typo in documentation.
-* Fix typos in block API documentation.
-* Improved documentation and examples for withFilters.
-* Fix some broken links in documentation.
-* Fix typo and quote consistency.
-* Remove duplicated word.
-* Adds custom block icon instructions.
-* Update documentation on keyboard shortcuts.
-* Updates isSelectionEnabledDocumentation.
-* Update FontSizePicker component documentation.
-* Export `switchToBlockType` function.
-* Remove mobile RN test suite (temporary measure).
-* Improve styling of next page block.
-* Removes fixed cover on iOS (unsupported in mobile Safari).
-* Adds support for native media picker.
-* Remove onChange delay.
-* Exposes slot/fill pattern to mobile.
-* Expose @wordpress/editor to mobile.
-* Refreshes native post block merge.
-* Properly handle cancel on the media picker.
+-   Allow toggling the core custom fields meta box.
+-   Introduce Annotations API across Block and Formatting.
+-   Allow using a YouTube URL (or other sources) in the Video block and transparently convert it to Embed.
+-   Allow Alt+F10 keyboard shortcut to navigate to block toolbar regardless of the toolbar visibility (isTyping, etc).
+-   Return focus to element that opened the post publish panel after it is closed.
+-   Avoid unnecessary re-renders when navigating between blocks.
+-   Improve interactions around Columns block.
+-   Improve keyboard navigation through the Gallery block.
+-   Use full parser in do_blocks with nested block support. This switch will allow dynamic blocks which contain nested blocks inside of them and it will pave the way for a filtering API to structurally process blocks.
+-   Refactor contextual toolbar to work better with floats.
+-   Auto-refresh Popovers position but only refresh if the anchor position changes.
+-   Add min-width to audio block.
+-   Avoid auto-saving with empty post content.
+-   Display correct Taxonomy labels.
+-   Fix incorrect import name.
+-   Fix styling issue with checkboxes.
+-   Add full set of reusable block post type labels (addresses “no blocks found” state).
+-   Fix right to left block alignment.
+-   Fix “updating failed” notices showing on long-open tabs.
+-   Fix default PHP parser to cast inner blocks as arrays.
+-   Fix JS/PHP inconsistencies with empty attributes on parsing.
+-   Link to the source image in the media block.
+-   Fix select all keyboard shortcut for Safari and Firefox.
+-   Create multiple blocks when multiple files are drag and dropped.
+-   Fixes potential theme syle.css clash.
+-   Makes preview button a link (a11y).
+-   Stop re-rendering all blocks on arrow navigation.
+-   Add constraint tabbing to post publish panel (a11y).
+-   Fix image uploading bug (incorrect JSON in apiFetch).
+-   Fix taxonomy visibility for contributors.
+-   Adds aria labels to images in gallery blocks during editing (a11y).
+-   Formatting fix for blockquotes.
+-   Hide custom fields when meta box is disabled.
+-   Limits blockquote color auto-selection to solid color blocks for readability.
+-   Fixes announcement on multi-selection of blocks (a11y).
+-   Display upload errors in the image block.
+-   Fixes selection of embed type blocks.
+-   Fixes JSON attribute parsing.
+-   Fixes post publish focus (a11y).
+-   Resolve macOS Firefox / Safari sibling inserter behavior.
+-   Fix visibility of sibling inserter on tab focus.
+-   Fix issue with pasting from Word where an image would be created instead of text.
+-   Fix multi-selection for float elements.
+-   Fetch all tag terms, not just first 100.
+-   Correctly displays media on the right.
+-   Only show named image sizes.
+-   Improves handling of paste action.
+-   Updates displayed permalink after permalink is edited.
+-   Adjust font size for contrast warning (a11y).
+-   Better handles formatting – nested and Google Docs.
+-   Fixes suggestion list scrolling when using keyboard (a11y).
+-   Fixes block and menu navigation a11y.
+-   Click to close dropdown popover.
+-   Fix save lock control.
+-   Timezone handling fix.
+-   Improve a11y of empty text blocks.
+-   Fix states for publish buttons.
+-   Fix backspace behavior.
+-   Change aria labels for paragraph blocks (a11y).
+-   Add support for prepare RichText tree.
+-   With this change we force the browser to treat the textarea for the
+-   code editor as auto when handling direction for its display to preserve the ability to interact with the block delimiters.
+-   Rename parentClientId to rootClientId.
+-   Remove deprecated findDOMNode call from Tooltip component.
+-   Remove unused ref assignment to RichText.
+-   Remove redundant onClickOutside handler from Dropdown.
+-   Refactor block state.
+-   Remove Cloudflare warning for blocked API calls.
+-   Remove \_wpGutenbergCodeEditorSettings (dead code).
+-   Adds periods to block a11y descriptions.
+-   Refactor embed block.
+-   Handle metabox warning exceptions.
+-   Refactor RichText to update formatting bar on format availability changes.
+-   Rename wp-polyfill-ecmascript.
+-   Update translator comments for quote and pullquote.
+-   Remove findDOMNode useage from NavigableToolbar.
+-   Changes handling of dates to properly handling scheduling.
+-   Remove findDomNode from withHoverAreas.
+-   Fixes missing translator comments.
+-   Refactor to import Format API components.
+-   Refactor of change detection: initial edits.
+-   Adds better translation comments to “resolve” and “resolve block”.
+-   Adds option for blocks with child blocks to change selection behavior.
+-   Allows blocks to disable being converted to reusable blocks.
+-   Improve undo/redo states.
+-   Updates parsing to better handle nested content.
+-   Remove undefined className argument from save().
+-   Use different tooltips for different alignment buttons.
+-   Improve performance and handling of autosave.
+-   Improve gallery upload for multiple images: load one by one.
+-   Adds context variable to RichText component.
+-   Avoid calling missing get_current_screen function.
+-   Make cssnano remove all style comments.
+-   Refactor normalizeBlockType.
+-   Shows icon in block toolbar.
+-   Makes kitchensink button removable from plugins.
+-   Fix popover sizing on screen change (autorefresh)
+-   Improvement to Columns block.
+-   Update block description for consistency.
+-   Refactor block styles registration.
+-   Use apostrophe instead of single-quote character in strings.
+-   Add transformations between video and media and text block.
+-   Version update for NPM packages.
+-   Update Lerna to latest version.
+-   Validates link format in RichText.
+-   Refactor contextual toolbar to work better with floats.
+-   Move wp-polyfill-ecmascript override to scripts registration.
+-   Improves consistency of parser tests.
+-   Remove code coverage.
+-   Adds mocking helpers for E2E tests.
+-   Runs E2E tests with the user in author role.
+-   Adds tests for Format API.
+-   Adds E2E test for rapid enter presses.
+-   Fix typo in documentation.
+-   Fix typos in block API documentation.
+-   Improved documentation and examples for withFilters.
+-   Fix some broken links in documentation.
+-   Fix typo and quote consistency.
+-   Remove duplicated word.
+-   Adds custom block icon instructions.
+-   Update documentation on keyboard shortcuts.
+-   Updates isSelectionEnabledDocumentation.
+-   Update FontSizePicker component documentation.
+-   Export `switchToBlockType` function.
+-   Remove mobile RN test suite (temporary measure).
+-   Improve styling of next page block.
+-   Removes fixed cover on iOS (unsupported in mobile Safari).
+-   Adds support for native media picker.
+-   Remove onChange delay.
+-   Exposes slot/fill pattern to mobile.
+-   Expose @wordpress/editor to mobile.
+-   Refreshes native post block merge.
+-   Properly handle cancel on the media picker.
 
 = 4.2.0 =
 
-* Introduce the Formatting API for extending RichText.
-* Use default Inserter for sibling block insertion.
-* Support adding and updating entities in data module.
-* Update block descriptions for added clarity and consistency.
-* Add support for displaying icons in new block categories.
-* Append registered toolbar buttons in RichText.
-* Optimize SlotFill rendering to avoid props destructuring.
-* Optimize Inserter props generation and reconciliation.
-* Improve writing flow by unsetting typing flag if Escape pressed.
-* Add support for non-Latin inputs in slash autocomplete block inserter.
-* Use an animated WP logo for preview screen.
-* Add “img” as a keyword for the Image block.
-* Delay TinyMCE initialisation to focus.
-* Announce number of filtered results from block inserter to screen readers.
-* Add audible feedback for link editing.
-* Avoid focus loss on active tab change within the Sidebar.
-* Add Alt + F10 (navigate to the nearest toolbar) to the shortcut docs and modal.
-* Add some more URL helpers to the url package.
-* Add has-dates class to Latest Posts block if applicable.
-* Improve mobile display of “options” modal.
-* Add “link target” option in Image block.
-* Use currentcolor as border-color for outline button style.
-* Introduce a new middleware to the api-fetch package which adds ?_locale=user to every REST API request.
-* Refactor and optimize withSelect, withDispatch handling of registry change.
-* Refactor and update DropZone context API.
-* Rephrase description of responsive toggle.
-* Ensure buttons on end of row in media-placeholder have no margin on the right.
-* Include implicit core styles in SelectControl.
-* Use better help text for ALT text input.
-* Flatten Inserter mapSelectToProps to optimize rendering.
-* Cleanup Embed code and add better test coverage.
-* Add space above exit code editor button.
-* Return 0 in WordCount if text is empty.
-* Avoid setting a value on the File block download attribute.
-* Set download attribute on File block as empty.
-* Remove Cover block ‘strong’ style.
-* Reduce frequency of actions updating isCaretWithinFormattedText.
-* Add a function to unregister a block style variation.
-* Add lodash deburr to autocomplete so that is works with diacritics.
-* Avoid making WordPress post embeds responsive.
-* Improve handling of centered 1-column galleries with small images.
-* Make pre-publish prompts more generic.
-* Improve the style variation control aria-label.
-* Improve preloading request code.
-* Add missing context to various i18n strings.
-* Add post saving lock APIs so plugins can add and remove locks.
-* Take the viewport size into account when it comes to decide whether to show the button or toggle logic for “submit for review”.
-* Improve accessibility of settings sidebar tabs.
-* Improve the header toolbar aria-label.
-* Add styles to stop Classic block buttons from inheriting italics from themes.
-* Add aria-label to links that open in new windows.
-* Add more descriptive aria-labels for the open and closed states of sidebar settings.
-* Add key event handler to activate block styles with keyboard.
-* Add field that allows changing image alt text from the sidebar in Media & Text.
-* Add aria-label to describe action of featured image update button.
-* Restore displaying formatting shortcuts in toolbar.
-* Add i18n context to “Resolve” button for invalid blocks.
-* Update the editor styles wrapper to avoid specificity issues.
-* Fix converting a reusable block with nested blocks into a static block.
-* Fix regression with mobile toolbar spacing.
-* Fix size regression in block icon.
-* Fix multi-selected warning block highlight.
-* Fix: Show resizer on “Media & Text” block on unified toolbar mode
-* Fix some RichText shortcuts and add e2e tests.
-* Fix issue with tertiary button hit areas.
-* Fix issue with unified toolbar not always fitting in smaller viewports.
-* Fix issue with “remove tag” button in long tag names.
-* Fix rich text value for nested lists.
-* Use color function for defining the background in DateTimePicker.
-* Fix usage of preg_quote() in block parsing.
-* Fix flow of scheduling and then publishing.
-* Fix focus issue on Gallery remove button.
-* Fix keyboard interaction (up/down arrow keys) causing focus to transfer out of the default block’s insertion menu.
-* Fix regression causing dynamic blocks not rendering in the frontend.
-* Fix vertical alignment issue on Media & Text block.
-* Fix some linter errors in trunk branch.
-* Fix dash line in More/Next-Page blocks.
-* Fix missing Categories block label.
-* Fix embedding and demo tests.
-* Fix issue with vanilla stylesheet.
-* Fix documentation for openModal() and closeModal().
-* Fix blocks navigation menu SVG icon size.
-* Fix link popover keyboard accessibility.
-* Fix issue with multiselect using shift + arrow.
-* Fix issue with format placeholder.
-* Fix Safari issue where hover outlines sometimes linger.
-* Resolve an issue where the “Copy Post Text” button in the error boundary would not actually copy post text, since it used a legacy retrieval method for post content.
-* Make preview placeholder text translatable.
-* Load translations in the reusable block listing page.
-* Avoid adding isDirty prop to DOM.
-* Improve translation string and replace placeholder handling for MediaPlaceholder instructions.
-* Refactor rich text package to avoid using blocks packages as a dependency.
-* Handle 204 response code in API Fetch.
-* Remove HTML source string normalization.
-* Normalize function arguments in Block API.
-* Remove unused code path.
-* Deprecate layout attribute.
-* Add class for -dropdown/-list in Archives block.
-* Update registration method signature of RichText.
-* Add filter for preloading API paths.
-* Add missing @return tag to gutenberg_meta_box_save_redirect() function.
-* Rename id attribute to tipId in DotTip.
-* Only silence REST errors if the REST server is present
-* Use consistent help text in DatePicker.
-* Export both the DropZone and MediaPlaceholder editor components with the withFilters HOC.
-* Remove “half” keyword from Media & Text block.
-* Remove redundant hooks initialization.
-* Mark getSettings in Date package as experimental.
-* Remove unused variable fallbacks in RichText.
-* Improve the Toggle Control elements DOM order for better accessibility.
-* Mark Reusable blocks API as experimental pending future refactor.
-* Set correct media type for video poster image and manage focus properly.
-* Avoid PHP notices due to non-available meta boxes.
-* Implement fetchAllMiddleware to handle per_page=-1 through pagination in wp.apiFetch.
-* Add do’s and don’ts to block design documentation.
-* Update creating-dynamic-blocks.md.
-* Update editor package changelog.
-* Add notices package.
-* Add styles property to block-api.md.
-* Add documentation for responsive-embeds theme option.
-* Add missing e2e tests for Plugins API.
-* Add an eslint rule to use cross-environment SVG primitives.
-* Use turbo-combine-reducers in place of Redux
-* Update react-click-outside to 3.0.
-* Update @wordpress/hooks README to include namespace mention.
-* Fix Heading blocks validation errors after block splitting
-* Expose setUnregisteredTypeHandlerName / getUnregisteredTypeHandlerName for mobile.
-* Fix a refresh issue with iOS when splitting blocks.
-* Simplify onEnter handling.
-* Hook onBackSpace in RichText component.
-* Introduce the ability to merge two blocks together on Backspace.
-* Properly refresh blocks when merging them under iOS.
-* Port nextpage block to the ReactNative mobile app.
-* RichText: fix buggy enter/delete behaviour (Extra br elements).
-* Fix showing categories for contributors.
+-   Introduce the Formatting API for extending RichText.
+-   Use default Inserter for sibling block insertion.
+-   Support adding and updating entities in data module.
+-   Update block descriptions for added clarity and consistency.
+-   Add support for displaying icons in new block categories.
+-   Append registered toolbar buttons in RichText.
+-   Optimize SlotFill rendering to avoid props destructuring.
+-   Optimize Inserter props generation and reconciliation.
+-   Improve writing flow by unsetting typing flag if Escape pressed.
+-   Add support for non-Latin inputs in slash autocomplete block inserter.
+-   Use an animated WP logo for preview screen.
+-   Add “img” as a keyword for the Image block.
+-   Delay TinyMCE initialisation to focus.
+-   Announce number of filtered results from block inserter to screen readers.
+-   Add audible feedback for link editing.
+-   Avoid focus loss on active tab change within the Sidebar.
+-   Add Alt + F10 (navigate to the nearest toolbar) to the shortcut docs and modal.
+-   Add some more URL helpers to the url package.
+-   Add has-dates class to Latest Posts block if applicable.
+-   Improve mobile display of “options” modal.
+-   Add “link target” option in Image block.
+-   Use currentcolor as border-color for outline button style.
+-   Introduce a new middleware to the api-fetch package which adds ?\_locale=user to every REST API request.
+-   Refactor and optimize withSelect, withDispatch handling of registry change.
+-   Refactor and update DropZone context API.
+-   Rephrase description of responsive toggle.
+-   Ensure buttons on end of row in media-placeholder have no margin on the right.
+-   Include implicit core styles in SelectControl.
+-   Use better help text for ALT text input.
+-   Flatten Inserter mapSelectToProps to optimize rendering.
+-   Cleanup Embed code and add better test coverage.
+-   Add space above exit code editor button.
+-   Return 0 in WordCount if text is empty.
+-   Avoid setting a value on the File block download attribute.
+-   Set download attribute on File block as empty.
+-   Remove Cover block ‘strong’ style.
+-   Reduce frequency of actions updating isCaretWithinFormattedText.
+-   Add a function to unregister a block style variation.
+-   Add lodash deburr to autocomplete so that is works with diacritics.
+-   Avoid making WordPress post embeds responsive.
+-   Improve handling of centered 1-column galleries with small images.
+-   Make pre-publish prompts more generic.
+-   Improve the style variation control aria-label.
+-   Improve preloading request code.
+-   Add missing context to various i18n strings.
+-   Add post saving lock APIs so plugins can add and remove locks.
+-   Take the viewport size into account when it comes to decide whether to show the button or toggle logic for “submit for review”.
+-   Improve accessibility of settings sidebar tabs.
+-   Improve the header toolbar aria-label.
+-   Add styles to stop Classic block buttons from inheriting italics from themes.
+-   Add aria-label to links that open in new windows.
+-   Add more descriptive aria-labels for the open and closed states of sidebar settings.
+-   Add key event handler to activate block styles with keyboard.
+-   Add field that allows changing image alt text from the sidebar in Media & Text.
+-   Add aria-label to describe action of featured image update button.
+-   Restore displaying formatting shortcuts in toolbar.
+-   Add i18n context to “Resolve” button for invalid blocks.
+-   Update the editor styles wrapper to avoid specificity issues.
+-   Fix converting a reusable block with nested blocks into a static block.
+-   Fix regression with mobile toolbar spacing.
+-   Fix size regression in block icon.
+-   Fix multi-selected warning block highlight.
+-   Fix: Show resizer on “Media & Text” block on unified toolbar mode
+-   Fix some RichText shortcuts and add e2e tests.
+-   Fix issue with tertiary button hit areas.
+-   Fix issue with unified toolbar not always fitting in smaller viewports.
+-   Fix issue with “remove tag” button in long tag names.
+-   Fix rich text value for nested lists.
+-   Use color function for defining the background in DateTimePicker.
+-   Fix usage of preg_quote() in block parsing.
+-   Fix flow of scheduling and then publishing.
+-   Fix focus issue on Gallery remove button.
+-   Fix keyboard interaction (up/down arrow keys) causing focus to transfer out of the default block’s insertion menu.
+-   Fix regression causing dynamic blocks not rendering in the frontend.
+-   Fix vertical alignment issue on Media & Text block.
+-   Fix some linter errors in trunk branch.
+-   Fix dash line in More/Next-Page blocks.
+-   Fix missing Categories block label.
+-   Fix embedding and demo tests.
+-   Fix issue with vanilla stylesheet.
+-   Fix documentation for openModal() and closeModal().
+-   Fix blocks navigation menu SVG icon size.
+-   Fix link popover keyboard accessibility.
+-   Fix issue with multiselect using shift + arrow.
+-   Fix issue with format placeholder.
+-   Fix Safari issue where hover outlines sometimes linger.
+-   Resolve an issue where the “Copy Post Text” button in the error boundary would not actually copy post text, since it used a legacy retrieval method for post content.
+-   Make preview placeholder text translatable.
+-   Load translations in the reusable block listing page.
+-   Avoid adding isDirty prop to DOM.
+-   Improve translation string and replace placeholder handling for MediaPlaceholder instructions.
+-   Refactor rich text package to avoid using blocks packages as a dependency.
+-   Handle 204 response code in API Fetch.
+-   Remove HTML source string normalization.
+-   Normalize function arguments in Block API.
+-   Remove unused code path.
+-   Deprecate layout attribute.
+-   Add class for -dropdown/-list in Archives block.
+-   Update registration method signature of RichText.
+-   Add filter for preloading API paths.
+-   Add missing @return tag to gutenberg_meta_box_save_redirect() function.
+-   Rename id attribute to tipId in DotTip.
+-   Only silence REST errors if the REST server is present
+-   Use consistent help text in DatePicker.
+-   Export both the DropZone and MediaPlaceholder editor components with the withFilters HOC.
+-   Remove “half” keyword from Media & Text block.
+-   Remove redundant hooks initialization.
+-   Mark getSettings in Date package as experimental.
+-   Remove unused variable fallbacks in RichText.
+-   Improve the Toggle Control elements DOM order for better accessibility.
+-   Mark Reusable blocks API as experimental pending future refactor.
+-   Set correct media type for video poster image and manage focus properly.
+-   Avoid PHP notices due to non-available meta boxes.
+-   Implement fetchAllMiddleware to handle per_page=-1 through pagination in wp.apiFetch.
+-   Add do’s and don’ts to block design documentation.
+-   Update creating-dynamic-blocks.md.
+-   Update editor package changelog.
+-   Add notices package.
+-   Add styles property to block-api.md.
+-   Add documentation for responsive-embeds theme option.
+-   Add missing e2e tests for Plugins API.
+-   Add an eslint rule to use cross-environment SVG primitives.
+-   Use turbo-combine-reducers in place of Redux
+-   Update react-click-outside to 3.0.
+-   Update @wordpress/hooks README to include namespace mention.
+-   Fix Heading blocks validation errors after block splitting
+-   Expose setUnregisteredTypeHandlerName / getUnregisteredTypeHandlerName for mobile.
+-   Fix a refresh issue with iOS when splitting blocks.
+-   Simplify onEnter handling.
+-   Hook onBackSpace in RichText component.
+-   Introduce the ability to merge two blocks together on Backspace.
+-   Properly refresh blocks when merging them under iOS.
+-   Port nextpage block to the ReactNative mobile app.
+-   RichText: fix buggy enter/delete behaviour (Extra br elements).
+-   Fix showing categories for contributors.
 
 = 4.1.1 =
 
-* Fix dynamic blocks not rendering in the frontend when meta-boxes present.
+-   Fix dynamic blocks not rendering in the frontend when meta-boxes present.
 
 = 4.1.0 =
 
-* Implement a block navigation system that allows selecting child or parent blocks within nested blocks (like folder path traversal) as well as functioning as a general fast navigation system when a root block is selected.
-* Add a Media & Text block that can facilitate the creation of split column content and allows the split to be resizable.
-* Show block style selector in the block inspector.
-* Rename Cover Image to just Cover and add support for video backgrounds.
-* Add a new accessible Date Picker. This was months in the works.
-* Reimplement the Color Picker component to greatly improve keyboard navigation and screenreader operations.
-* Add style variation for Table block with stripe design.
-* Add “Options” modal to toggle on/off the different document panels.
-* Allow toggling visibility of registered meta-boxes from the “Options” modal.
-* Handle cases where a block is on the page but the block is not registered by showing a dialog with the available options.
-* Ensure compatibility with WordPress 5.0.
-* When pasting single lines of text, treat them as inline text.
-* Add ability to insert images from URL directly in the Image block.
-* Make Columns block responsive.
-* Make responsive embeds a theme option.
-* Add direction attribute / LTR button to the Paragraph block.
-* Display accurate updated and publish notices based on post type.
-* Update buttons in the editor header area to improve consistency (save, revert to draft, etc).
-* Avoid horizontal writing flow navigation in native inputs.
-* Move toggle buttons to the left of their control handle.
-* Add explicit bottom margin to figure elements (like image and embed).
-* Allow transforming a Pullquote to a Quote and viceversa.
-* Allow block inserter to search for blocks by typing their category.
-* Add a label to the URL field in the Publishing Flow panel.
-* Use the stored date format in settings for the LatestPosts block.
-* Remove the placeholder text and use visible label instead in TokenField.
-* Add translator comment for “View” menu label.
-* Make YouTube embed classes consistent between front-end and back-end.
-* Take into account citation when transforming a Quote to a Paragraph.
-* Restore ⌘A’s “select all blocks” behaviour.
-* Allow themes to disable custom font size functionality.
-* Make missing custom font sizes labels translatable.
-* Ensure cite is string when merging quote.
-* Defer fetching non-hierarchical terms in FlatTermSelector.
-* Move the theme support data previously exposed at the REST API index into a read-only theme controller for the active theme.
-* Detect oEmbed responses where the oEmbed provider is missing.
-* Use “Save as Pending” when the Pending checkbox is active.
-* Use the post type’s REST controller class as autosave parent controller.
-* Use post type labels in PostFeaturedImage component.
-* Enforce text color within inline boundaries to ensure contrast and legibility.
-* Add self-closing tag support (like path element) when comparing HTML.
-* Make sure autocomplete triggers are regex safe.
-* Silence PHP errors on REST API responses.
-* Show permalink label as bold text.
-* Change the block renderer controller endpoint and namespace from /gutenberg/v1/block-renderer/ to /wp/v2/block-renderer/.
-* Hide “edit image” toolbar buttons when no image is selected.
-* Hide “Add to Reusable Blocks” action when ‘core/block’ is disabled.
-* Handle blocks passing null as RichText value.
-* Improve validation for attribute names in rich-text toHTMLString.
-* Allow to globally overwrite defined colors in PanelColorSettings.
-* Fix regressions with Button block preview display.
-* Fix issue with color picker not appearing on mobile.
-* Fix publish buttons with long text.
-* Fix link to manifest file in contributing file.
-* Fix demo content crash on malformed URL.
-* Fix issue in docs manifest.
-* Fix media caption processing with the new RichText structure.
-* Fix problem with Gallery losing assigned columns when alignments are applied.
-* Fix an issue where the Categories block would always use the center class alignment regardless of what was set.
-* Fix scroll issue on small viewports.
-* Fix formatting in getEditorSettings docs and update getTokenSettings docs.
-* Fix padding in block validation modal.
-* Fix extra instances of old rich text value source.
-* Fix issue with adding links from the auto-completer.
-* Fix outdated docs for RichText.
-* Fix pre-publish panel overflow issue.
-* Fix missing styles for medium and huge font size classes.
-* Fix autocomplete keyboard navigation in link popover.
-* Fix a text selection exception in Safari.
-* Fix WordPress embed URL resolution and embeds as reusable blocks.
-* Avoid triggering a redirect when creating a new Table block.
-* Only use rich text value internally to the RichText component.
-* Ensure multiline prop is either “p” or “li” in RichText.
-* Do not use dangerouslySetInnerHTML with i18n string.
-* Account for null value in redux-routine createRuntime.
-* Extract link container from RichText.
-* Allow default_title, default_content, and default_excerpt filters to function as expected.
-* Replace gutenberg in classNames with block-editor.
-* Restore the order of actions usually fired in edit-form-advanced.php.
-* Update REST Search controller to use ‘wp/v2’ namespace.
-* Improve keyboard shortcuts section in FAQ.
-* Change all occurrences of ‘new window’ to ‘new tab’.
-* Conditionally load PHP classes in preparation for inclusion in core.
-* Update rich-text source mentions in docs.
-* Deprecate PanelColor components.
-* Use mock response for demo test if Vimeo is down.
-* Adding a bit more verbosity to the install script instructions.
-* Document isDefault option for block styles.
-* Update docs for new REST API namespace.
-* Update shortcut docs with new block navigation menu shortcut.
-* Further improve Release docs.
-* Updated custom icon documentation links.
-* Add all available script handles to documentation.
-* Add wp-polyfill to scripts.md.
-* Add e2e tests for List and Quote transformations.
-* Fail CI build if local changes exist.
-* Attempt to always use the latest version of nvm.
-* Add bare handling for lint-js script.
-* Add support for Webpack bundle analyzer.
-* Improve setup of Lerna.
-* Update clipboard dependency to at least 2.0.1.
-* Recreate the demo content post as an e2e test using keyboard commands.
-* Add mobile SVG compatibility for SVG block icons.
-* Fix className style in SVG primitive.
-* Split Paragraph and Heading blocks on enter.KEY. Refactor block splitting code on paragraph and heading blocks.
-* Add caption support for image block.
-* Rename PHP functions to prevent conflict with core
-* Fix some typos
-* Improve the Toggle Control elements DOM order for better accessibility
-* Set correct media type for video poster image and manage focus properly.
-* Implement fetchAllMiddleware to handle per_page=-1 through pagination in wp.apiFetch
-* Fix Slash autocomplete: Support non-Latin inputs
-* Add WordPress logo animation for preview
+-   Implement a block navigation system that allows selecting child or parent blocks within nested blocks (like folder path traversal) as well as functioning as a general fast navigation system when a root block is selected.
+-   Add a Media & Text block that can facilitate the creation of split column content and allows the split to be resizable.
+-   Show block style selector in the block inspector.
+-   Rename Cover Image to just Cover and add support for video backgrounds.
+-   Add a new accessible Date Picker. This was months in the works.
+-   Reimplement the Color Picker component to greatly improve keyboard navigation and screenreader operations.
+-   Add style variation for Table block with stripe design.
+-   Add “Options” modal to toggle on/off the different document panels.
+-   Allow toggling visibility of registered meta-boxes from the “Options” modal.
+-   Handle cases where a block is on the page but the block is not registered by showing a dialog with the available options.
+-   Ensure compatibility with WordPress 5.0.
+-   When pasting single lines of text, treat them as inline text.
+-   Add ability to insert images from URL directly in the Image block.
+-   Make Columns block responsive.
+-   Make responsive embeds a theme option.
+-   Add direction attribute / LTR button to the Paragraph block.
+-   Display accurate updated and publish notices based on post type.
+-   Update buttons in the editor header area to improve consistency (save, revert to draft, etc).
+-   Avoid horizontal writing flow navigation in native inputs.
+-   Move toggle buttons to the left of their control handle.
+-   Add explicit bottom margin to figure elements (like image and embed).
+-   Allow transforming a Pullquote to a Quote and viceversa.
+-   Allow block inserter to search for blocks by typing their category.
+-   Add a label to the URL field in the Publishing Flow panel.
+-   Use the stored date format in settings for the LatestPosts block.
+-   Remove the placeholder text and use visible label instead in TokenField.
+-   Add translator comment for “View” menu label.
+-   Make YouTube embed classes consistent between front-end and back-end.
+-   Take into account citation when transforming a Quote to a Paragraph.
+-   Restore ⌘A’s “select all blocks” behaviour.
+-   Allow themes to disable custom font size functionality.
+-   Make missing custom font sizes labels translatable.
+-   Ensure cite is string when merging quote.
+-   Defer fetching non-hierarchical terms in FlatTermSelector.
+-   Move the theme support data previously exposed at the REST API index into a read-only theme controller for the active theme.
+-   Detect oEmbed responses where the oEmbed provider is missing.
+-   Use “Save as Pending” when the Pending checkbox is active.
+-   Use the post type’s REST controller class as autosave parent controller.
+-   Use post type labels in PostFeaturedImage component.
+-   Enforce text color within inline boundaries to ensure contrast and legibility.
+-   Add self-closing tag support (like path element) when comparing HTML.
+-   Make sure autocomplete triggers are regex safe.
+-   Silence PHP errors on REST API responses.
+-   Show permalink label as bold text.
+-   Change the block renderer controller endpoint and namespace from /gutenberg/v1/block-renderer/ to /wp/v2/block-renderer/.
+-   Hide “edit image” toolbar buttons when no image is selected.
+-   Hide “Add to Reusable Blocks” action when ‘core/block’ is disabled.
+-   Handle blocks passing null as RichText value.
+-   Improve validation for attribute names in rich-text toHTMLString.
+-   Allow to globally overwrite defined colors in PanelColorSettings.
+-   Fix regressions with Button block preview display.
+-   Fix issue with color picker not appearing on mobile.
+-   Fix publish buttons with long text.
+-   Fix link to manifest file in contributing file.
+-   Fix demo content crash on malformed URL.
+-   Fix issue in docs manifest.
+-   Fix media caption processing with the new RichText structure.
+-   Fix problem with Gallery losing assigned columns when alignments are applied.
+-   Fix an issue where the Categories block would always use the center class alignment regardless of what was set.
+-   Fix scroll issue on small viewports.
+-   Fix formatting in getEditorSettings docs and update getTokenSettings docs.
+-   Fix padding in block validation modal.
+-   Fix extra instances of old rich text value source.
+-   Fix issue with adding links from the auto-completer.
+-   Fix outdated docs for RichText.
+-   Fix pre-publish panel overflow issue.
+-   Fix missing styles for medium and huge font size classes.
+-   Fix autocomplete keyboard navigation in link popover.
+-   Fix a text selection exception in Safari.
+-   Fix WordPress embed URL resolution and embeds as reusable blocks.
+-   Avoid triggering a redirect when creating a new Table block.
+-   Only use rich text value internally to the RichText component.
+-   Ensure multiline prop is either “p” or “li” in RichText.
+-   Do not use dangerouslySetInnerHTML with i18n string.
+-   Account for null value in redux-routine createRuntime.
+-   Extract link container from RichText.
+-   Allow default_title, default_content, and default_excerpt filters to function as expected.
+-   Replace gutenberg in classNames with block-editor.
+-   Restore the order of actions usually fired in edit-form-advanced.php.
+-   Update REST Search controller to use ‘wp/v2’ namespace.
+-   Improve keyboard shortcuts section in FAQ.
+-   Change all occurrences of ‘new window’ to ‘new tab’.
+-   Conditionally load PHP classes in preparation for inclusion in core.
+-   Update rich-text source mentions in docs.
+-   Deprecate PanelColor components.
+-   Use mock response for demo test if Vimeo is down.
+-   Adding a bit more verbosity to the install script instructions.
+-   Document isDefault option for block styles.
+-   Update docs for new REST API namespace.
+-   Update shortcut docs with new block navigation menu shortcut.
+-   Further improve Release docs.
+-   Updated custom icon documentation links.
+-   Add all available script handles to documentation.
+-   Add wp-polyfill to scripts.md.
+-   Add e2e tests for List and Quote transformations.
+-   Fail CI build if local changes exist.
+-   Attempt to always use the latest version of nvm.
+-   Add bare handling for lint-js script.
+-   Add support for Webpack bundle analyzer.
+-   Improve setup of Lerna.
+-   Update clipboard dependency to at least 2.0.1.
+-   Recreate the demo content post as an e2e test using keyboard commands.
+-   Add mobile SVG compatibility for SVG block icons.
+-   Fix className style in SVG primitive.
+-   Split Paragraph and Heading blocks on enter.KEY. Refactor block splitting code on paragraph and heading blocks.
+-   Add caption support for image block.
+-   Rename PHP functions to prevent conflict with core
+-   Fix some typos
+-   Improve the Toggle Control elements DOM order for better accessibility
+-   Set correct media type for video poster image and manage focus properly.
+-   Implement fetchAllMiddleware to handle per_page=-1 through pagination in wp.apiFetch
+-   Fix Slash autocomplete: Support non-Latin inputs
+-   Add WordPress logo animation for preview
 
 = 4.0.0 =
 
+## Changelog
+
 ### New Features
-* Add ability to change overlay color in Cover Image.
-* Introduce new Font Size Picker with clear labels and size comparison.
-* Introduce new RichText data structure to allow better manipulation of inline content.
-* Add Pullquote style variation and color palette support.
-* Add support for post locking when multiple authors interact with the editor.
-* Add an alternative block appender when the container doesn’t support the default block (paragraph).
-* Improve the UI and interactions around floats.
-* Add option to skip PublishSidebar on publishing.
-* Add support for shortcode embeds that enqueue scripts.
-* Add a button to exit the Code Editor.
-* Introduce a reusable ResizableBox component.
-* Style nested `<ul>`s with circles instead of normal bullets.
-* Show hierarchical terms sorted by name and allow them to be filterable through search. Hide the filter box if there are fewer than 8 terms.
-* Improve messaging around invalid block detection.
-* Use text color for links when a paragraph has a color applied.
-* Allow extended usage of the controls API in resolvers within data layer.
-* Ensure that a default block is inserted (and selected) when all other blocks are removed.
-* Enhance the block parser to support multiple type, in accordance with JSON schema.
-* Add a larger target area for resize drag handles.
-* Add media button to classic block.
-* Add control to toggle responsive mechanism on embed blocks.
-* Update sidebar design to have a lighter feeling.
-* Update resolvers in data layer to rely on controls instead of async generators.
-* Set template validity on block reset.
-* Remove dirty detection from Meta Boxes to reduce false positives of “unsaved changes”.
-* Show “Publish: Immediately” for new drafts by inferring floating date.
-* Add a slight transition to Full Screen mode.
-* Improve spacing setup in Gallery Block.
-* Remove additional side padding from blocks.
-* Improve the reusable blocks “Export as JSON” link.
-* Enforce a default block icon size to allow flex alignment and fix unaligned labels.
-* Consider single unmodified default block as empty content.
-* Only display URL input field when “Link To” is set for Image Block.
-* Make backspace behavior consistent among Quote, Verse and Preformatted.
-* Expose refresh method from Dropdown component.
-* Omit style tags when pasting.
-* Use best fitting embed aspect ratio if exact match doesn’t exist.
-* Avoid dispatching undefined results in promise middleware.
-* Change keyboard shortcut for removing a block to access + z.
-* Replace the Full Screen mode “x” icon with a back arrow.
-* Make drag handle visible on hover while in nested contexts.
-* Pass the tab title to the TabPanel component for situations where it may need to be highlighted.
-* Allow setting no alignment when a default alignment exists.
-* Improve title and appender margin fix.
-* Avoid focusing on the close button on modal and try a modal appear animation.
-* Change the URL Input label to match Classic.
-* Adjust media upload source for RichText.
-* Handle edge cases in with-constrained-tabbing and add tests.
-* Set a consistent input field width in media placeholders.
-* Add a hover state to sidebar panel headers.
-* Change settings title from “Writing” to “View”.
-* Convert the “tools” menu group into internal plugin.
-* Normalize data types and fix default implementation in parser.
-* Cleanup CSS specificity issues on Button component for portability.
-* Display error when attempting to embed URLs that can’t be embedded and don’t generate a fallback.
-* Update some edit and save button labels and styles for consistency.
-* Make “Manage Reusable Blocks” a link instead of an icon button.
-
-### Bug Fixes
-* Fix issue with Enter and the Read More block.
-* Fix menu item hover colors.
-* Fix issue with editor styles and fullscreen mode.
-* Fix popover link repositioning.
-* Fix Space Block layout issues on small screens.
-* Fix custom classNames for dynamic blocks.
-* Fix spacing of post-publish close button in other languages.
-* Fix Async Generator resolvers resolution.
-* Fix issue with Spacer Block not being resizable when using unified toolbar and spotlight mode.
-* Fix grammar.md manifest entry and update data docs.
-* Fix issue with region focus on the header area on IE11.
-* Fix reusable block broken button dimensions on IE11.
-* Fix issues with dropping blocks after dragging when calculating new block index.
-* Fix InnerBlock templates sync conditions to avoid a forced locking.
-* Fix typo in @wordpress/api-fetch README.md.
-* Fix regression with Button Block placeholder text.
-* Fix dropzone issue in Edge (event.dataTransfer.types not being an array).
-* Fix documentation for registerBlockStyle arguments and clarify getSaveElement filter.
-* Fix raw transforms not working in Edge when pasting content.
-* Fix a regression where wide images would cause horizontal scrollbars.
-* Fix issue with gallery margin while typing a caption.
-* Fix Block alignment CSS rules affecting nested blocks.
-* Fix CSS issue with nested paragraph placeholder.
-* Fix links in docs and add documentation for isPublishSidebarEnabled.
-* Fix shortcode package dependencies.
-* Fix overscroll issues locking scroll up on long pages.
-* Fix reference to SVG component in docs.
-* Fix Table Block header and body column misalignment.
-* Fix an issue where inserting like breaks would throw an error.
-* Fix regressions with placeholder text color (Cover Image, captions).
-* Fix Editor Styles regression.
-* Fix faulty Jed state after setLocaleData.
-* Fix small line-height issue in editor style.
-* Fix Pullquote margin regressions.
-* Fix issues with File Block and new RichText structures.
-* Fix Writing Flow E2E test.
-* Fix issues with “tips” popup margins.
-* Fix issue with mentions after rich text value merge.
-* Fix clipping issue with Instagram embed.
-* Fix ESNext example code.
-* Fix usage of tabs / spaces in parser code.
-* Fix Classic Block toolbar regression.
-* Fix issues with Table Block alignments.
-* Fix inserter misalignment regression.
+
+-   Add ability to change overlay color in Cover Image.
+-   Introduce new Font Size Picker with clear labels and size comparison.
+-   Introduce new RichText data structure to allow better manipulation of inline content.
+-   Add Pullquote style variation and color palette support.
+-   Add support for post locking when multiple authors interact with the editor.
+-   Add an alternative block appender when the container doesn’t support the default block (paragraph).
+-   Improve the UI and interactions around floats.
+-   Add option to skip PublishSidebar on publishing.
+-   Add support for shortcode embeds that enqueue scripts.
+-   Add a button to exit the Code Editor.
+-   Introduce a reusable ResizableBox component.
+-   Style nested `<ul>`s with circles instead of normal bullets.
+-   Show hierarchical terms sorted by name and allow them to be filterable through search. Hide the filter box if there are fewer than 8 terms.
+-   Improve messaging around invalid block detection.
+-   Use text color for links when a paragraph has a color applied.
+-   Allow extended usage of the controls API in resolvers within data layer.
+-   Ensure that a default block is inserted (and selected) when all other blocks are removed.
+-   Enhance the block parser to support multiple type, in accordance with JSON schema.
+-   Add a larger target area for resize drag handles.
+-   Add media button to classic block.
+-   Add control to toggle responsive mechanism on embed blocks.
+-   Update sidebar design to have a lighter feeling.
+-   Update resolvers in data layer to rely on controls instead of async generators.
+-   Set template validity on block reset.
+-   Remove dirty detection from Meta Boxes to reduce false positives of “unsaved changes”.
+-   Show “Publish: Immediately” for new drafts by inferring floating date.
+-   Add a slight transition to Full Screen mode.
+-   Improve spacing setup in Gallery Block.
+-   Remove additional side padding from blocks.
+-   Improve the reusable blocks “Export as JSON” link.
+-   Enforce a default block icon size to allow flex alignment and fix unaligned labels.
+-   Consider single unmodified default block as empty content.
+-   Only display URL input field when “Link To” is set for Image Block.
+-   Make backspace behavior consistent among Quote, Verse and Preformatted.
+-   Expose refresh method from Dropdown component.
+-   Omit style tags when pasting.
+-   Use best fitting embed aspect ratio if exact match doesn’t exist.
+-   Avoid dispatching undefined results in promise middleware.
+-   Change keyboard shortcut for removing a block to access + z.
+-   Replace the Full Screen mode “x” icon with a back arrow.
+-   Make drag handle visible on hover while in nested contexts.
+-   Pass the tab title to the TabPanel component for situations where it may need to be highlighted.
+-   Allow setting no alignment when a default alignment exists.
+-   Improve title and appender margin fix.
+-   Avoid focusing on the close button on modal and try a modal appear animation.
+-   Change the URL Input label to match Classic.
+-   Adjust media upload source for RichText.
+-   Handle edge cases in with-constrained-tabbing and add tests.
+-   Set a consistent input field width in media placeholders.
+-   Add a hover state to sidebar panel headers.
+-   Change settings title from “Writing” to “View”.
+-   Convert the “tools” menu group into internal plugin.
+-   Normalize data types and fix default implementation in parser.
+-   Cleanup CSS specificity issues on Button component for portability.
+-   Display error when attempting to embed URLs that can’t be embedded and don’t generate a fallback.
+-   Update some edit and save button labels and styles for consistency.
+-   Make “Manage Reusable Blocks” a link instead of an icon button.
+
+### Bug Fixes
+
+-   Fix issue with Enter and the Read More block.
+-   Fix menu item hover colors.
+-   Fix issue with editor styles and fullscreen mode.
+-   Fix popover link repositioning.
+-   Fix Space Block layout issues on small screens.
+-   Fix custom classNames for dynamic blocks.
+-   Fix spacing of post-publish close button in other languages.
+-   Fix Async Generator resolvers resolution.
+-   Fix issue with Spacer Block not being resizable when using unified toolbar and spotlight mode.
+-   Fix grammar.md manifest entry and update data docs.
+-   Fix issue with region focus on the header area on IE11.
+-   Fix reusable block broken button dimensions on IE11.
+-   Fix issues with dropping blocks after dragging when calculating new block index.
+-   Fix InnerBlock templates sync conditions to avoid a forced locking.
+-   Fix typo in @wordpress/api-fetch README.md.
+-   Fix regression with Button Block placeholder text.
+-   Fix dropzone issue in Edge (event.dataTransfer.types not being an array).
+-   Fix documentation for registerBlockStyle arguments and clarify getSaveElement filter.
+-   Fix raw transforms not working in Edge when pasting content.
+-   Fix a regression where wide images would cause horizontal scrollbars.
+-   Fix issue with gallery margin while typing a caption.
+-   Fix Block alignment CSS rules affecting nested blocks.
+-   Fix CSS issue with nested paragraph placeholder.
+-   Fix links in docs and add documentation for isPublishSidebarEnabled.
+-   Fix shortcode package dependencies.
+-   Fix overscroll issues locking scroll up on long pages.
+-   Fix reference to SVG component in docs.
+-   Fix Table Block header and body column misalignment.
+-   Fix an issue where inserting like breaks would throw an error.
+-   Fix regressions with placeholder text color (Cover Image, captions).
+-   Fix Editor Styles regression.
+-   Fix faulty Jed state after setLocaleData.
+-   Fix small line-height issue in editor style.
+-   Fix Pullquote margin regressions.
+-   Fix issues with File Block and new RichText structures.
+-   Fix Writing Flow E2E test.
+-   Fix issues with “tips” popup margins.
+-   Fix issue with mentions after rich text value merge.
+-   Fix clipping issue with Instagram embed.
+-   Fix ESNext example code.
+-   Fix usage of tabs / spaces in parser code.
+-   Fix Classic Block toolbar regression.
+-   Fix issues with Table Block alignments.
+-   Fix inserter misalignment regression.
 
 ### Other Changes
-* Minor i18n fixes after deprecations were removed.
-* Rename parameter from mapStateToProps to mapSelectToProps in withSelect.
-* Rename AccessibleSVG to SVG and make it work with React Native.
-* Change createObjectUrl to createBlobURL.
-* Clean up Sass variables, comments, reduce complexity.
-* Move Classic Block to packages.
-* Move HTML Block into the blocks library package.
-* Move embed scripts into the body in preview documents.
-* Ensure that the return value of apiFetch is always a valid Promise object in Firefox.
-* Allow negative numbers in order field for Page Attributes.
-* Make sure the demo page loads without marking itself as having changes.
-* Refactor MediaUpload, MediaPlaceholder, and mediaUpload to support arrays with multiple supported types.
-* Add new icons to dashicons package.
-* Add link to “add_theme_support” docs.
-* Remove glob and just include necessary files.
-* Remove unused isButton prop.
-* Remove Vine embed.
-* Replace length check with RichText.isEmpty in Image Block.
-* Replace TinyMCE function to decode entities with existing Gutenberg package.
-* Extract the edit-post module as a reusable package.
-* Pass editor initial settings as direct argument.
-* Pass feature image ID to media upload component.
-* Pass all available properties in the media object.
-* Replace element-closest with registered vendor script.
-* Add new handbook introduction and docs about “blocks as the interface”.
-* Add utils to the wp-data script dependencies.
-* Disable alternate diff drivers in setup script.
-* Clarify RichText.Content readme docs.
-* Document `isDefault` option for block styles.
-* Update Panel component documentation.
-* Update full post content test fixtures.
-* Add ESLint rule about not allowing string literals in IDs.
-* Add a test for the new Code → Preformatted transform and use snapshots.
-* Add E2E test to visit demo page and verify errors.
-* Add E2E tests for list creation.
-* Update Redux to the latest version.
+
+-   Minor i18n fixes after deprecations were removed.
+-   Rename parameter from mapStateToProps to mapSelectToProps in withSelect.
+-   Rename AccessibleSVG to SVG and make it work with React Native.
+-   Change createObjectUrl to createBlobURL.
+-   Clean up Sass variables, comments, reduce complexity.
+-   Move Classic Block to packages.
+-   Move HTML Block into the blocks library package.
+-   Move embed scripts into the body in preview documents.
+-   Ensure that the return value of apiFetch is always a valid Promise object in Firefox.
+-   Allow negative numbers in order field for Page Attributes.
+-   Make sure the demo page loads without marking itself as having changes.
+-   Refactor MediaUpload, MediaPlaceholder, and mediaUpload to support arrays with multiple supported types.
+-   Add new icons to dashicons package.
+-   Add link to “add_theme_support” docs.
+-   Remove glob and just include necessary files.
+-   Remove unused isButton prop.
+-   Remove Vine embed.
+-   Replace length check with RichText.isEmpty in Image Block.
+-   Replace TinyMCE function to decode entities with existing Gutenberg package.
+-   Extract the edit-post module as a reusable package.
+-   Pass editor initial settings as direct argument.
+-   Pass feature image ID to media upload component.
+-   Pass all available properties in the media object.
+-   Replace element-closest with registered vendor script.
+-   Add new handbook introduction and docs about “blocks as the interface”.
+-   Add utils to the wp-data script dependencies.
+-   Disable alternate diff drivers in setup script.
+-   Clarify RichText.Content readme docs.
+-   Document `isDefault` option for block styles.
+-   Update Panel component documentation.
+-   Update full post content test fixtures.
+-   Add ESLint rule about not allowing string literals in IDs.
+-   Add a test for the new Code → Preformatted transform and use snapshots.
+-   Add E2E test to visit demo page and verify errors.
+-   Add E2E tests for list creation.
+-   Update Redux to the latest version.
 
 ### Mobile
-* Add the React Native entry point to more packages.
-* Need to define isRichTextValueEmpty for mobile.
-* Have Travis run mobile tests that use the parent code.
-* Wire onEnter to requestHTMLWithCursor command in RichText.
+
+-   Add the React Native entry point to more packages.
+-   Need to define isRichTextValueEmpty for mobile.
+-   Have Travis run mobile tests that use the parent code.
+-   Wire onEnter to requestHTMLWithCursor command in RichText.
 
 = 3.9.0 =
 
-* 🏗 Add support for creating reusable blocks out of multi-selected groups of blocks not just individual blocks. This means the ability to easily save templates out of an existing set of blocks.
-* 🚀 Add support for importing and exporting reusable blocks (using a JSON file transport). Note that locality of resources can be a problem if importing on a separate WordPress site.
-* 🔍 Allow to visually show differences between conversion options when a block is detected as invalid.
-* Add a clear drag handle next to the block arrow controls to drag and move a block. Also further polishes the drag and drop experience.
-* Instrument collapsible groups for the block toolbar. It allows to display groups of options as a dropdown and reduce the length and imposition of the toolbar as a whole.
-* Allow conversion from Cover Image to Image and back, using caption if it exists as the main text.
-* Move the reusable block UI options to the top of the block or block group.
-* Focus the title when loading the editor if it’s empty.
-* Adjust margin rules for nested blocks.
-* Preserve aspect ratio on embedded content at different alignments and widths.
-* Unselect blocks and disable inserter when switching to Code Editor.
-* Add new default block icon (used when no icon is defined).
-* Avoid showing stacked icon group on parent blocks if all of its children are meant to be hidden from the inserter.
-* Add dark editor style support.
-* Add a figure wrapper to Pullquote block.
-* Add needed attributes to kses allowed tags for the Gallery block.
-* Improve visual display of Classic block toolbar.
-* Adjust unified block toolbar padding at medium breakpoints.
-* Better align the close, chevrons, and ellipsis icons in the sidebar panel.
-* Improve cropping of galleries in IE11.
-* Adjust gallery caption flex alignment.
-* Include Caption Styles in Video Block.
-* Update RichText usage to avoid inline elements.
-* Add shortcut aria label for unreadable shortcuts.
-* Avoid triggering invalid block mechanisms on empty HTML content.
-* Rename the Speaker block to Speaker Deck.
-* Disable inserter on Column block and avoid showing stacked icon on columns.
-* Send post_id to the REST API in the ServerSideRender component within the editor. This ensures the global $post object is set properly.
-* Use pseudo element to prevent inspector tab width from changing when selected.
-* Apply consistent spacing on the post visibility menu.
-* Fix notice styling regression.
-* Fix ability to select small table cells.
-* Fix issue with drag and drop in Chrome when the document has iframes.
-* Fix HTML validation issues.
-* Fix margin style regression with block appender.
-* Fix link source for outreach/articles.
-* Fix Archives block alignment and issue with custom classes.
-* Fix error when a taxonomy has no attached post type.
-* Fix invalid block scrim overflowing toolbar on mobile.
-* Fix block settings menu appearance in non wp-admin contexts.
-* Fix incorrect unlink shortcut.
-* Fix placeholder text contrast.
-* Fix issue with shortcut inserter on invalid paragraphs.
-* Fix camelCase and cross-component class name.
-* Fix qs dependency typo.
-* Pluralize “kind” to fix typo.
-* Remove isButton prop.
-* Remove wrapper div from Categories block.
-* Remove prop-type-like check in Popover component.
-* Remove unnecessary duplicated class from Embed placeholder.
-* Flatten BlockListLayout into base BlockList.
-* Add isEmptyElement utility function under wp.Element.
-* Use HTML Document for finding iframe in embed previews.
-* Add wp-polyfill as central polyfill.
-* Update docke-compose setup order to create MySQL container before WordPress container.
-* Improve comments in transforms object of Quote block.
-* Do not assume that singular form in _n() is used just for single item.
-* Update examples for components to look according to guidelines.
-* Update release docs to include process for RC.
-* Add simplified block grammar spec to the handbook.
-* Add lint rule for path on Lodash property functions.
-* Add user for cli image in docker-compose.
-* Show lint errors when there are lint problems.
-* Minor updates and improvements to documents and code references.
-* Improve docs build to consider memoized selectors.
-* Add Heading toolbar for changing heading sizes.
-* Save level to heading block attributes for parsing.
-* Add onEnter callback and function placeholder to RichText implementation.
-* Add Image block placeholder.
-* Avoid propagating eventCount to components.
-* Parser: Output freeform content before void blocks.
-* Fix export block as JSON in IE11 and Firefox.
-* Update demo content to avoid invalidations or automated post updates.
+-   🏗 Add support for creating reusable blocks out of multi-selected groups of blocks not just individual blocks. This means the ability to easily save templates out of an existing set of blocks.
+-   🚀 Add support for importing and exporting reusable blocks (using a JSON file transport). Note that locality of resources can be a problem if importing on a separate WordPress site.
+-   🔍 Allow to visually show differences between conversion options when a block is detected as invalid.
+-   Add a clear drag handle next to the block arrow controls to drag and move a block. Also further polishes the drag and drop experience.
+-   Instrument collapsible groups for the block toolbar. It allows to display groups of options as a dropdown and reduce the length and imposition of the toolbar as a whole.
+-   Allow conversion from Cover Image to Image and back, using caption if it exists as the main text.
+-   Move the reusable block UI options to the top of the block or block group.
+-   Focus the title when loading the editor if it’s empty.
+-   Adjust margin rules for nested blocks.
+-   Preserve aspect ratio on embedded content at different alignments and widths.
+-   Unselect blocks and disable inserter when switching to Code Editor.
+-   Add new default block icon (used when no icon is defined).
+-   Avoid showing stacked icon group on parent blocks if all of its children are meant to be hidden from the inserter.
+-   Add dark editor style support.
+-   Add a figure wrapper to Pullquote block.
+-   Add needed attributes to kses allowed tags for the Gallery block.
+-   Improve visual display of Classic block toolbar.
+-   Adjust unified block toolbar padding at medium breakpoints.
+-   Better align the close, chevrons, and ellipsis icons in the sidebar panel.
+-   Improve cropping of galleries in IE11.
+-   Adjust gallery caption flex alignment.
+-   Include Caption Styles in Video Block.
+-   Update RichText usage to avoid inline elements.
+-   Add shortcut aria label for unreadable shortcuts.
+-   Avoid triggering invalid block mechanisms on empty HTML content.
+-   Rename the Speaker block to Speaker Deck.
+-   Disable inserter on Column block and avoid showing stacked icon on columns.
+-   Send post_id to the REST API in the ServerSideRender component within the editor. This ensures the global $post object is set properly.
+-   Use pseudo element to prevent inspector tab width from changing when selected.
+-   Apply consistent spacing on the post visibility menu.
+-   Fix notice styling regression.
+-   Fix ability to select small table cells.
+-   Fix issue with drag and drop in Chrome when the document has iframes.
+-   Fix HTML validation issues.
+-   Fix margin style regression with block appender.
+-   Fix link source for outreach/articles.
+-   Fix Archives block alignment and issue with custom classes.
+-   Fix error when a taxonomy has no attached post type.
+-   Fix invalid block scrim overflowing toolbar on mobile.
+-   Fix block settings menu appearance in non wp-admin contexts.
+-   Fix incorrect unlink shortcut.
+-   Fix placeholder text contrast.
+-   Fix issue with shortcut inserter on invalid paragraphs.
+-   Fix camelCase and cross-component class name.
+-   Fix qs dependency typo.
+-   Pluralize “kind” to fix typo.
+-   Remove isButton prop.
+-   Remove wrapper div from Categories block.
+-   Remove prop-type-like check in Popover component.
+-   Remove unnecessary duplicated class from Embed placeholder.
+-   Flatten BlockListLayout into base BlockList.
+-   Add isEmptyElement utility function under wp.Element.
+-   Use HTML Document for finding iframe in embed previews.
+-   Add wp-polyfill as central polyfill.
+-   Update docke-compose setup order to create MySQL container before WordPress container.
+-   Improve comments in transforms object of Quote block.
+-   Do not assume that singular form in \_n() is used just for single item.
+-   Update examples for components to look according to guidelines.
+-   Update release docs to include process for RC.
+-   Add simplified block grammar spec to the handbook.
+-   Add lint rule for path on Lodash property functions.
+-   Add user for cli image in docker-compose.
+-   Show lint errors when there are lint problems.
+-   Minor updates and improvements to documents and code references.
+-   Improve docs build to consider memoized selectors.
+-   Add Heading toolbar for changing heading sizes.
+-   Save level to heading block attributes for parsing.
+-   Add onEnter callback and function placeholder to RichText implementation.
+-   Add Image block placeholder.
+-   Avoid propagating eventCount to components.
+-   Parser: Output freeform content before void blocks.
+-   Fix export block as JSON in IE11 and Firefox.
+-   Update demo content to avoid invalidations or automated post updates.
 
 = 3.8.0 =
 
-* Add Full Screen mode. 📺
-* Add UI for bulk managing reusable blocks.
-* Implement a more sophisticated Editor Styles mechanism. 🖍 It allows themes to register editor styles for blocks by targeting the blocks themselves without having to fight CSS specificity, and without having to know the internal DOM structure for the editor.
-* Move the block settings menu to the block toolbar, further consolidating the UI elements.
-* Switch to a new hand-coded default block parser implementation and expand documentation.
-* - Implemented in both PHP and JS.
-* - Brings great performance improvements in both time and memory.
-* - Makes server-side parsing in PHP viable for accessing blocks as a tree.
-* Use flex-box to render the block inserter layout to address different issues with spacing.
-* Show a warning when a disallowed filetype is dropped on a MediaUpload.
-* Show "no archives to show" message on Archives Block.
-* Add AccessibleSVG component and use consistently for block icons.
-* Improve Classic editor and Cloudflare notification modals.
-* Refactor Draggable component to decouple the drag handle from the DOM node being dragged.
-* Move video caption styles to style.scss.
-* Treat Verse lines consistently on the front-end.
-* Make sure all available taxonomies are loaded in the editor.
-* Improve empty elements filters in Slot implementation.
-* Fix case with PostTextEditor where intended state value is not always reflected in the rendered textarea when empty.
-* Fix background clashing with some themes in Separator alternative styles.
-* Fix case where hasSelectedInnerBlock did not account for multi-selected innerBlocks. This caused an edge case in Spotlight mode where multiple blocks selected inside a column would appear unfocused.
-* Fix regression with margins around image captions.
-* Fix issue with author select overflowing on IE11.
-* Fix the publish panel top position in FullScreen mode.
-* Fix radio button alignment in post visibility menu.
-* Fix issues with centering of images.
-* Fix BlockIcon usage in embed placeholder when resource cannot be previewed.
-* Fix font size regression in PostTitle.
-* Fix codetabs block in extensibility documentation.
-* Fix import source of RangeControl in Readme file.
-* Fix broken link in documentation inside element/README.md.
-* Deprecate usage of RichText provider component.
-* Deprecate getI18n, dcnpgettext.
-* Remove deprecated selectors from docs.
-* Revert shortcut change in block-deletion e2e test.
-* Pin fetch polyfill to 3.0 UMD distributable to resolve an issue where it was no longer usable in IE11.
-* Ensure Gutenberg repository is clean after install.
-* Include block serialization default parser in plugin.
-* Change how required built-ins are polyfilled with Babel 7.
+-   Add Full Screen mode. 📺
+-   Add UI for bulk managing reusable blocks.
+-   Implement a more sophisticated Editor Styles mechanism. 🖍 It allows themes to register editor styles for blocks by targeting the blocks themselves without having to fight CSS specificity, and without having to know the internal DOM structure for the editor.
+-   Move the block settings menu to the block toolbar, further consolidating the UI elements.
+-   Switch to a new hand-coded default block parser implementation and expand documentation.
+-   -   Implemented in both PHP and JS.
+-   -   Brings great performance improvements in both time and memory.
+-   -   Makes server-side parsing in PHP viable for accessing blocks as a tree.
+-   Use flex-box to render the block inserter layout to address different issues with spacing.
+-   Show a warning when a disallowed filetype is dropped on a MediaUpload.
+-   Show "no archives to show" message on Archives Block.
+-   Add AccessibleSVG component and use consistently for block icons.
+-   Improve Classic editor and Cloudflare notification modals.
+-   Refactor Draggable component to decouple the drag handle from the DOM node being dragged.
+-   Move video caption styles to style.scss.
+-   Treat Verse lines consistently on the front-end.
+-   Make sure all available taxonomies are loaded in the editor.
+-   Improve empty elements filters in Slot implementation.
+-   Fix case with PostTextEditor where intended state value is not always reflected in the rendered textarea when empty.
+-   Fix background clashing with some themes in Separator alternative styles.
+-   Fix case where hasSelectedInnerBlock did not account for multi-selected innerBlocks. This caused an edge case in Spotlight mode where multiple blocks selected inside a column would appear unfocused.
+-   Fix regression with margins around image captions.
+-   Fix issue with author select overflowing on IE11.
+-   Fix the publish panel top position in FullScreen mode.
+-   Fix radio button alignment in post visibility menu.
+-   Fix issues with centering of images.
+-   Fix BlockIcon usage in embed placeholder when resource cannot be previewed.
+-   Fix font size regression in PostTitle.
+-   Fix codetabs block in extensibility documentation.
+-   Fix import source of RangeControl in Readme file.
+-   Fix broken link in documentation inside element/README.md.
+-   Deprecate usage of RichText provider component.
+-   Deprecate getI18n, dcnpgettext.
+-   Remove deprecated selectors from docs.
+-   Revert shortcut change in block-deletion e2e test.
+-   Pin fetch polyfill to 3.0 UMD distributable to resolve an issue where it was no longer usable in IE11.
+-   Ensure Gutenberg repository is clean after install.
+-   Include block serialization default parser in plugin.
+-   Change how required built-ins are polyfilled with Babel 7.
 
 = 3.7.0 =
 
-* New “Spotlight Mode” that focuses on a single block at a time and an updated “Unified Toolbar” design. Both can be combined.
-* Refactor to how image floats are handled.
-* Improve visual clarity of block switcher menu.
-* Add a delay to the block type label when hovering.
-* Allow converting a multiline-paragraph into a list with corresponding items.
-* Position caret at end of previous block for any type of block removal.
-* Automatically create an Audio block when drag-and-dropping an audio file.
-* Update icons used for Paragraph, Heading, and Subheading blocks for added clarity.
-* Adhere to OS guidelines when showing keyboard shortcuts (icons for Mac).
-* Improve link insertion by continuing to show highlighted text when URL input is toggled.
-* Automatically create a link when selected text is a URL.
-* Expand on capabilities of invalid block actions by adding an ellipsis menu and an option to convert to classic block.
-* Ignore leading slash when searching blocks in the inserter.
-* Pass the title attribute when uploading an image.
-* Allow blocks which support alignments to have a default option.
-* Add poster image support for Video Block.
-* Add support for preload attribute in Video Block.
-* Add description for Reusable Blocks, show in the inspector.
-* Update Heading Block description for clarity.
-* Small design update to the editor fixed toolbar.
-* Improve visual display of post visibility settings.
-* Apply enhancements to the coloring mechanism and the exposed components (withColors).
-* Only show transforms for blocks that can be inserted on the root block. Also orders them by frequency / use.
-* Remove margin-bottom from the last element on panel body.
-* Store and restore the global post object around dynamic block callbacks to allow for loops.
-* Move first editor tip about inserter to the toolbar.
-* Use double quotes in all NUX tips.
-* Use sentence case for text in Tooltips.
-* Only request embed preview if there is a URL.
-* Change keyboard shortcut for remove block to Cmd+Shift+X / Ctrl+Shift+X.
-* Reset value of RangeControl when setting it to empty.
-* Add Text Columns → Columns transform.
-* Add Code → Preformatted transform.
-* Add “blockquote” as a keyword for the Quote block.
-* Clear the floating element for clearing color values. Update the appearance so that it’s consistent with other button settings.
-* Rewrite Table Block to use a simpler RichText value.
-* Add RichText.isEmpty API.
-* Allow disabling Google Fonts URL by translators.
-* Refactor post format block implementation to assign as template setting.
-* Improve settings consistency of blocks under widget category.
-* Fix issue where pasting malformed HTML into a block the HTML tokenizer could break by wrapping it with an exception handler.
-* Restore option to add links within a Verse Block.
-* Fix excess whitespace in block style class name.
-* Fix issue where hit-area for the inserter between blocks was not perfectly centered.
-* Fix incorrect example code for withSelect higher-order component.
-* Fix flex-box issue on IE11 for keyboard shortcuts help panel.
-* Fix lint issues found in block-serialization-spec-parser packages.
-* Fix malformed SVGs for Facebook.
-* Fix small alignment issue with the inserter arrow.
-* Fix issue with recent blocks showing on mobile.
-* Fix another issue with page publishing.
-* Fix issue with string that was not showing up for translation.
-* Fix left margin of Archives Block.
-* Fix styling issue with block inserter.
-* Fix regression with missing SVG roles and attributes.
-* Fix script registration of TinyMCE to account for compression.
-* Fix embed block pattern mismatch.
-* Fix issue with tooltips not being shown on IconButtons with DotTip children.
-* Fix some regressions with Table Block and make sure it behaves responsibly.
-* Fix regression with textbox spacing and a focus issue.
-* Resolve an issue where removing all blocks from a post with a template assigned would reintroduce the template blocks after saving and reloading the editor.
-* Switch order of operations so that post content is parsed first regardless of the presence of a template.
-* Add doAction when a deprecated feature is encountered.
-* Deprecate Subheading block.
-* Change title and description of Text Columns to include deprecation notice.
-* Remove extra classNames from integration test.
-* Make sure property for gallery=multiple is only set when type of media is image.
-* Avoid changing the public API of the warning component to avoid potential backwards compatibility issues.
-* Check for window in data registry.
-* Update FocusableIframe component URL example.
-* Drop explicit window reference from withSafeTimeout in compose.
-* Prevent case where early editor checks might bail out preventing hidden meta-boxes from being actually hidden.
-* Use “post” instead of “page” in the warning when the post contains blocks.
-* Make alt text for image in example post translatable.
-* Remove TinyMCE paste plugin as it’s absorbed in raw handling modules.
-* Extract LinkContainer from FormatToolbar.
-* Document how to add block style variations.
-* Add mention of Material Design icons to the design docs.
-* Update documentation for block controls.
-* Extend guidelines for managing packages and publishing them to npm.
-* Update contributing guidelines to include local wp dev instructions.
-* Update FAQ doc with info about keyboard shortcuts.
-* Update package-lock.json to expected values.
-* Deprecate onSetup and getSettings as unstable APIs from RichText.
-* Some general updates to handbook documents.
-* Add documentation about floats.
-* Add e2e test for font size mechanism.
-* Make usage of core-data explicit.
-* Create new spec-parser package.
-* Restores the test URL we should be using for e2e tests.
-* Upgrade WP Coding Standards to 1.0.0.
-* Update npm-package-json-lint lock to 3.3.1.
-* Update stylelint to 9.5.0 and stylelint-config-wordpress to 13.1.0.
-* Update lint-staged and docs/manifest.js.
-* Mobile Native
-* - Initial implementation of Toolbar.
-* - Add basic text toolbar actions.
-* - Update on the event interface for contentSizeChange on Aztec component.
-* - Fix toolbar status when pressing buttons on Android (and iOS).
+-   New “Spotlight Mode” that focuses on a single block at a time and an updated “Unified Toolbar” design. Both can be combined.
+-   Refactor to how image floats are handled.
+-   Improve visual clarity of block switcher menu.
+-   Add a delay to the block type label when hovering.
+-   Allow converting a multiline-paragraph into a list with corresponding items.
+-   Position caret at end of previous block for any type of block removal.
+-   Automatically create an Audio block when drag-and-dropping an audio file.
+-   Update icons used for Paragraph, Heading, and Subheading blocks for added clarity.
+-   Adhere to OS guidelines when showing keyboard shortcuts (icons for Mac).
+-   Improve link insertion by continuing to show highlighted text when URL input is toggled.
+-   Automatically create a link when selected text is a URL.
+-   Expand on capabilities of invalid block actions by adding an ellipsis menu and an option to convert to classic block.
+-   Ignore leading slash when searching blocks in the inserter.
+-   Pass the title attribute when uploading an image.
+-   Allow blocks which support alignments to have a default option.
+-   Add poster image support for Video Block.
+-   Add support for preload attribute in Video Block.
+-   Add description for Reusable Blocks, show in the inspector.
+-   Update Heading Block description for clarity.
+-   Small design update to the editor fixed toolbar.
+-   Improve visual display of post visibility settings.
+-   Apply enhancements to the coloring mechanism and the exposed components (withColors).
+-   Only show transforms for blocks that can be inserted on the root block. Also orders them by frequency / use.
+-   Remove margin-bottom from the last element on panel body.
+-   Store and restore the global post object around dynamic block callbacks to allow for loops.
+-   Move first editor tip about inserter to the toolbar.
+-   Use double quotes in all NUX tips.
+-   Use sentence case for text in Tooltips.
+-   Only request embed preview if there is a URL.
+-   Change keyboard shortcut for remove block to Cmd+Shift+X / Ctrl+Shift+X.
+-   Reset value of RangeControl when setting it to empty.
+-   Add Text Columns → Columns transform.
+-   Add Code → Preformatted transform.
+-   Add “blockquote” as a keyword for the Quote block.
+-   Clear the floating element for clearing color values. Update the appearance so that it’s consistent with other button settings.
+-   Rewrite Table Block to use a simpler RichText value.
+-   Add RichText.isEmpty API.
+-   Allow disabling Google Fonts URL by translators.
+-   Refactor post format block implementation to assign as template setting.
+-   Improve settings consistency of blocks under widget category.
+-   Fix issue where pasting malformed HTML into a block the HTML tokenizer could break by wrapping it with an exception handler.
+-   Restore option to add links within a Verse Block.
+-   Fix excess whitespace in block style class name.
+-   Fix issue where hit-area for the inserter between blocks was not perfectly centered.
+-   Fix incorrect example code for withSelect higher-order component.
+-   Fix flex-box issue on IE11 for keyboard shortcuts help panel.
+-   Fix lint issues found in block-serialization-spec-parser packages.
+-   Fix malformed SVGs for Facebook.
+-   Fix small alignment issue with the inserter arrow.
+-   Fix issue with recent blocks showing on mobile.
+-   Fix another issue with page publishing.
+-   Fix issue with string that was not showing up for translation.
+-   Fix left margin of Archives Block.
+-   Fix styling issue with block inserter.
+-   Fix regression with missing SVG roles and attributes.
+-   Fix script registration of TinyMCE to account for compression.
+-   Fix embed block pattern mismatch.
+-   Fix issue with tooltips not being shown on IconButtons with DotTip children.
+-   Fix some regressions with Table Block and make sure it behaves responsibly.
+-   Fix regression with textbox spacing and a focus issue.
+-   Resolve an issue where removing all blocks from a post with a template assigned would reintroduce the template blocks after saving and reloading the editor.
+-   Switch order of operations so that post content is parsed first regardless of the presence of a template.
+-   Add doAction when a deprecated feature is encountered.
+-   Deprecate Subheading block.
+-   Change title and description of Text Columns to include deprecation notice.
+-   Remove extra classNames from integration test.
+-   Make sure property for gallery=multiple is only set when type of media is image.
+-   Avoid changing the public API of the warning component to avoid potential backwards compatibility issues.
+-   Check for window in data registry.
+-   Update FocusableIframe component URL example.
+-   Drop explicit window reference from withSafeTimeout in compose.
+-   Prevent case where early editor checks might bail out preventing hidden meta-boxes from being actually hidden.
+-   Use “post” instead of “page” in the warning when the post contains blocks.
+-   Make alt text for image in example post translatable.
+-   Remove TinyMCE paste plugin as it’s absorbed in raw handling modules.
+-   Extract LinkContainer from FormatToolbar.
+-   Document how to add block style variations.
+-   Add mention of Material Design icons to the design docs.
+-   Update documentation for block controls.
+-   Extend guidelines for managing packages and publishing them to npm.
+-   Update contributing guidelines to include local wp dev instructions.
+-   Update FAQ doc with info about keyboard shortcuts.
+-   Update package-lock.json to expected values.
+-   Deprecate onSetup and getSettings as unstable APIs from RichText.
+-   Some general updates to handbook documents.
+-   Add documentation about floats.
+-   Add e2e test for font size mechanism.
+-   Make usage of core-data explicit.
+-   Create new spec-parser package.
+-   Restores the test URL we should be using for e2e tests.
+-   Upgrade WP Coding Standards to 1.0.0.
+-   Update npm-package-json-lint lock to 3.3.1.
+-   Update stylelint to 9.5.0 and stylelint-config-wordpress to 13.1.0.
+-   Update lint-staged and docs/manifest.js.
+-   Mobile Native
+-   -   Initial implementation of Toolbar.
+-   -   Add basic text toolbar actions.
+-   -   Update on the event interface for contentSizeChange on Aztec component.
+-   -   Fix toolbar status when pressing buttons on Android (and iOS).
 
 = 3.6.2 =
 
-* Restore min-width to popover.
-* Fix wide toolbar regression
-* Add e2e test for publishing a page
-* Fix typo for removing excerpt block stripping
+-   Restore min-width to popover.
+-   Fix wide toolbar regression
+-   Add e2e test for publishing a page
+-   Fix typo for removing excerpt block stripping
 
 = 3.6.1 =
 
-* Fixed an issue that caused page publishing to fail.
-* Fixed an issue with the block options menu appearing too narrow.
+-   Fixed an issue that caused page publishing to fail.
+-   Fixed an issue with the block options menu appearing too narrow.
 
 = 3.6.0 =
 
-* Updated block inserter and library with new icons for all core blocks.
-* Allow showing the sidebar and inspector controls when editing a block in HTML mode.
-* Add new block keyboard shortcuts and consolidate their display in menus:
-* * Insert Before / After block.
-* * Duplicating block.
-* * Toggling the inspector.
-* * Remove block keyboard shortcut.
-* Updated block inserter and library with new icons for all core blocks.
-* Allow showing the sidebar and inspector controls when editing a block in HTML mode.
-* Add new block keyboard shortcuts and consolidate their display in menus:
-* Insert Before / After block.
-* Duplicating block.
-* Toggling the inspector.
-* Remove block keyboard shortcut.
-* Add new keyboard shortcuts help modal documenting available shortcuts.
-* Hide keyboard shortcuts on mobile screens.
-* Open new window if prior preview window has been closed.
-* Bring the preview tab to the front when clicking the preview button.
-* Avoid changing the label of the “publish” button if an auto-save is being performed.
-* Update the Block Inserter to allow searching for terms that contain diacritics.
-* Take into account children blocks when handling disabled blocks.
-* Offer chance to add and revise Tags and Post Format during pre-publish flow.
-* Let menus grow based on the length of its elements.
-* Add visual padding to menus.
-* Avoid scrollbars on Audio block when shown full-width.
-* Improve permalink UI and make it responsive.
-* Change color of links in gallery block caption.
-* Simplify the styling of the “Toggle publish panel” aria-region to avoid content jumps.
-* Make active pill button look pressed.
-* Make sure Latest Posts alignment class behaviour is consistent.
-* Show drop-zone background when file is dragged.
-* Reset active sidebar tab on initial load.
-* Apply new checkbox CSS to radio buttons and fix border radius.
-* Add a couple new dashicons for insert before / after block.
-* Add styles for Spinner component (was relying on core before).
-* Add styles for Notice component.
-* Refactor template select field to use SelectControl.
-* Correctly handle per_page=-1 in the queried data state.
-* Create dummy context components for type switch.
-* Add RegistryConsumer export to data module.
-* Add has_blocks function to the repertoire.
-* Add has_block function and unit tests.
-* Add has_block function and unit tests for it.
-* Introduce strip_dynamic_blocks() for excerpts.
-* Fix issue with default appender placeholder on IE11.
-* Fix issue with shortcode block UI on IE11.
-* Fix tag input interface on IE11.
-* Fix issue with custom element serializer on IE11.
-* Fix issue with meta boxes overlapping the content on IE11.
-* Fix invalidation case of custom block classes.
-* Fix unhandled error dialog styling issue.
-* Fix paragraph splits on react native implementation.
-* Fix code block style regression.
-* Fix issue with code font-size on heading contexts.
-* Fix case where crashed block would overlap with surrounding blocks.
-* Fix issue with block styles on IE11.
-* Fix the heading level buttons on IE11.
-* Fix issues with drag and drop over text.
-* Fix small bug with recent blocks hover style.
-* Use argument swapping instead of named arguments for string placeholders.
-* Pass the the search result object to props.onChange on UrlInput.
-* Add localization context to occurrences of “More” string.
-* Add a Heading block implementation for mobile app.
-* Add the react-native entrypoint to all runtime packages.
-* Move MoreMenu specific styling away from Popover CSS.
-* Ensure meta box functions are available in editor context.
-* Ensure the full content integration test is run.
-* Remove client-side document title updates.
-* Remove TinyMCE shim that was removed in WP 4.9.7.
-* Remove the workaround for intermittent multiple-tab preview test failure.
-* Remove Promise.resolve call that’s already handled by the JS runtime.
-* Remove redundant event handlers from default block appender.
-* Deprecate withContext HOC and remove its usage.
-* Some localization & spelling fixes.
-* Update docs for templateLock’s insert option.
-* Extract Core Blocks to a block-library npm package.
-* Add a license checker script.
-* Allow access to the WordPress installation if DOCKER_ENV=localwpdev.
-* Bring the handbook design up to date.
+-   Updated block inserter and library with new icons for all core blocks.
+-   Allow showing the sidebar and inspector controls when editing a block in HTML mode.
+-   Add new block keyboard shortcuts and consolidate their display in menus:
+-   -   Insert Before / After block.
+-   -   Duplicating block.
+-   -   Toggling the inspector.
+-   -   Remove block keyboard shortcut.
+-   Updated block inserter and library with new icons for all core blocks.
+-   Allow showing the sidebar and inspector controls when editing a block in HTML mode.
+-   Add new block keyboard shortcuts and consolidate their display in menus:
+-   Insert Before / After block.
+-   Duplicating block.
+-   Toggling the inspector.
+-   Remove block keyboard shortcut.
+-   Add new keyboard shortcuts help modal documenting available shortcuts.
+-   Hide keyboard shortcuts on mobile screens.
+-   Open new window if prior preview window has been closed.
+-   Bring the preview tab to the front when clicking the preview button.
+-   Avoid changing the label of the “publish” button if an auto-save is being performed.
+-   Update the Block Inserter to allow searching for terms that contain diacritics.
+-   Take into account children blocks when handling disabled blocks.
+-   Offer chance to add and revise Tags and Post Format during pre-publish flow.
+-   Let menus grow based on the length of its elements.
+-   Add visual padding to menus.
+-   Avoid scrollbars on Audio block when shown full-width.
+-   Improve permalink UI and make it responsive.
+-   Change color of links in gallery block caption.
+-   Simplify the styling of the “Toggle publish panel” aria-region to avoid content jumps.
+-   Make active pill button look pressed.
+-   Make sure Latest Posts alignment class behaviour is consistent.
+-   Show drop-zone background when file is dragged.
+-   Reset active sidebar tab on initial load.
+-   Apply new checkbox CSS to radio buttons and fix border radius.
+-   Add a couple new dashicons for insert before / after block.
+-   Add styles for Spinner component (was relying on core before).
+-   Add styles for Notice component.
+-   Refactor template select field to use SelectControl.
+-   Correctly handle per_page=-1 in the queried data state.
+-   Create dummy context components for type switch.
+-   Add RegistryConsumer export to data module.
+-   Add has_blocks function to the repertoire.
+-   Add has_block function and unit tests.
+-   Add has_block function and unit tests for it.
+-   Introduce strip_dynamic_blocks() for excerpts.
+-   Fix issue with default appender placeholder on IE11.
+-   Fix issue with shortcode block UI on IE11.
+-   Fix tag input interface on IE11.
+-   Fix issue with custom element serializer on IE11.
+-   Fix issue with meta boxes overlapping the content on IE11.
+-   Fix invalidation case of custom block classes.
+-   Fix unhandled error dialog styling issue.
+-   Fix paragraph splits on react native implementation.
+-   Fix code block style regression.
+-   Fix issue with code font-size on heading contexts.
+-   Fix case where crashed block would overlap with surrounding blocks.
+-   Fix issue with block styles on IE11.
+-   Fix the heading level buttons on IE11.
+-   Fix issues with drag and drop over text.
+-   Fix small bug with recent blocks hover style.
+-   Use argument swapping instead of named arguments for string placeholders.
+-   Pass the the search result object to props.onChange on UrlInput.
+-   Add localization context to occurrences of “More” string.
+-   Add a Heading block implementation for mobile app.
+-   Add the react-native entrypoint to all runtime packages.
+-   Move MoreMenu specific styling away from Popover CSS.
+-   Ensure meta box functions are available in editor context.
+-   Ensure the full content integration test is run.
+-   Remove client-side document title updates.
+-   Remove TinyMCE shim that was removed in WP 4.9.7.
+-   Remove the workaround for intermittent multiple-tab preview test failure.
+-   Remove Promise.resolve call that’s already handled by the JS runtime.
+-   Remove redundant event handlers from default block appender.
+-   Deprecate withContext HOC and remove its usage.
+-   Some localization & spelling fixes.
+-   Update docs for templateLock’s insert option.
+-   Extract Core Blocks to a block-library npm package.
+-   Add a license checker script.
+-   Allow access to the WordPress installation if DOCKER_ENV=localwpdev.
+-   Bring the handbook design up to date.
 
 = 3.5.0 =
 
-* Add an edit button to embed blocks to modify the source.
-* Improve margin collapse within column blocks.
-* De-emphasize inline tokens within the inserter for a better user experience.
-* Polish focus and active styles around buttons and inputs.
-* Polish styles for checkbox component, update usages of toggle to checkbox where appropriate. Update documentation.
-* Improve pre-publish panel styling and textual copy.
-* Prevent duplicate DotTips from appearing.
-* Integrate "queries data" into the entities abstraction for data module.
-* Hide block movers if there are no blocks before and after.
-* Initial improvements for responsive image handling in galleries.
-* Use correct color for primary button bottom border.
-* Allow transitioning post status from scheduled to draft.
-* Improvements for auto-completer keyboard interactions.
-* Place strikethrough formatting button after link as it's less important.
-* Resolve issue with preview sometimes opening redundant tabs.
-* Align timepicker with calendar on pre-publish panel.
-* Expand date filter select box width within media library.
-* Constrain media blocks to content area width in front-end.
-* Reapply box-sizing to slider thumbs.
-* Avoid showing line separator in block settings menu when it's the last item.
-* Introduce additional keyboard shortcuts to navigate through the navigateRegions component.
-* shift+alt+n to go to the next region.
-* shift+alt+p to go to the previous region.
-* Replace all withAPIData usage and deprecate the higher-order component.
-* Add persistence via data plugin interface.
-* Introduce new redux-routine package for synchronous generator in data module.
-* Move embed API call out of block and into data module.
-* Remove no longer needed workaround targeted at resolving a TinyMCE error.
-* Abort selection range set on unset range target. Resolves an issue when merging two empty paragraph blocks created while at the end of an inline boundary.
-* Removing or merging RichText should only trigger if the selection is collapsed:
-* Fix issue with backspace not working as expected when deleting text content from the first block.
-* Fix case where paragraph content could move to previous paragraph when deleted.
-* Remove provisional block behaviour to improve reliability of various interactions.
-* Restore horizontal edge traversal implementation to address issue where pressing Backspace may not place the caret in the correct position if within or after a RichText field.
-* Ensure Gutenberg is disabled when editing the assigned blog posts page.
-* Initialize the Autosaves controller even if revisions are disabled. Fixes several bugs around saving with revisions turned off.
-* Display warning when Cloudflare blocks REST API requests.
-* Improve validation for attribute names in serializer.
-* Add Slot to block menu settings for extensibility.
-* Fix File Block center align behavior.
-* Fix behaviours when deleting on an empty RichText field.
-* Fix parent-dropdown missing for custom post-types.
-* Fix import style statements in ColorIndicator.
-* Fix height of used-once block warning.
-* Fix link for innerBlocks docs.
-* Fix link to server-side-render component.
-* Fix race condition with DomReady.
-* Fix awkward capitalisation in demo post content.
-* Fix warning for unrecognised forwardedRef prop.
-* Fix regression with URL input focus box.
-* Fix error in custom HTML preview when block is empty.
-* Fix colspan bug in table block for tables with thead tags.
-* Fix issue with image inspector controls disappearing once an image block is set to wide/full alignment.
-* Fix issue when image size remains blurry if manually set to a smaller size (i.e., medium) and then changed alignment to wide/full.
-* Fix issue with meta boxes being absent when script enqueued in head depends on wp-edit-post.
-* Resolve an issue where removing all text from a Button block by backspace would cause subsequent text changes to not be accurately reflected. Broader issue with TinyMCE inline elements as containers.
-* Avoid using remove() because it's unavailable in IE11.
-* Address further feedback on duplicated DotTips implementation.
-* Update re-resizable to version 4.7.1 — fix image & spacer blocks resizing on IE.
-* Use a unique querystring package instead of three different ones.
-* Introduce filters to allow developers the ability to customize the Taxonomy Selector UI for custom taxonomies.
-* Introduce RichText component for mobile native and implement the Paragraph Block with it.
-* Use standard label for Alt Text input.
-* Consolidate similar i18n strings.
-* Remove title attributes from the Classic Editor warning.
-* Remove unused code in taxonomies panel.
-* Remove oEmbed fixture files.
-* Remove jQuery dependency from @wordpress/api-fetch.
-* Remove filler spaces from empty constructs.
-* Remove REST API shims for code introduced in WP 4.9.8.
-* Remove unused terms, taxonomies, and categories code.
-* Replace the apiRequest module with api-fetch module.
-* Add inline comment that explains a stopPropagation() within tips implementation.
-* Add gutenberg_can_edit_post filter.
-* Add watch support for stylesheets in packages.
-* Add JSDoc comment to Popover's focus() method.
-* Add readme docs for all components.
-* Autogenerate documentation from readme files.
-* Add doc note about automatically applied attributes in save.
-* Add test for block mover.
-* Allow demo content to be translatable.
-* Update CSS selectors from :before to ::before.
-* Export the description for server-registered blocks.
-* Export getBlockTypes on react native interface.
-* Expose redux-routine to react native.
-* Expose unknown-type handler methods for mobile.
-* Specify missing wp-url dependencies.
-* Improve JS packages descriptions.
-* Downgrade Docker image version for WordPress for test validation.
-* Move CI back to latest WordPress version and bump minimum version to 4.9.8
-* Use @wordpress/compose instead of @wordpress/components.
-* Update docs for Button component.
-* Update package-lock.json.
-* Updated dependencies: jest, npm-package-json-lint and read-pkg-up.
-* Add Babel runtime dependency to redux routine.
-* Prevent Travis from running when changes are only made to .md files.
-* Add stylelint for SCSS linting.
-* Set babel dependencies to fixed version and add core-js2 support.
-* Trigger E2E test failure on console logging.
-* Update doc links to resources moved to packages folder.
-* Update api-fetch package documentation.
-* Update Lerna to 3.0.0-rc.0.
-* Generate source maps and read those from the webpack build.
-* Rewrite e2e tests using jest-puppeter preset.
-* Introduce a new Extending Editor document specific to editor filters.
-* Improve test configuration and mocking strategy.
+-   Add an edit button to embed blocks to modify the source.
+-   Improve margin collapse within column blocks.
+-   De-emphasize inline tokens within the inserter for a better user experience.
+-   Polish focus and active styles around buttons and inputs.
+-   Polish styles for checkbox component, update usages of toggle to checkbox where appropriate. Update documentation.
+-   Improve pre-publish panel styling and textual copy.
+-   Prevent duplicate DotTips from appearing.
+-   Integrate "queries data" into the entities abstraction for data module.
+-   Hide block movers if there are no blocks before and after.
+-   Initial improvements for responsive image handling in galleries.
+-   Use correct color for primary button bottom border.
+-   Allow transitioning post status from scheduled to draft.
+-   Improvements for auto-completer keyboard interactions.
+-   Place strikethrough formatting button after link as it's less important.
+-   Resolve issue with preview sometimes opening redundant tabs.
+-   Align timepicker with calendar on pre-publish panel.
+-   Expand date filter select box width within media library.
+-   Constrain media blocks to content area width in front-end.
+-   Reapply box-sizing to slider thumbs.
+-   Avoid showing line separator in block settings menu when it's the last item.
+-   Introduce additional keyboard shortcuts to navigate through the navigateRegions component.
+-   shift+alt+n to go to the next region.
+-   shift+alt+p to go to the previous region.
+-   Replace all withAPIData usage and deprecate the higher-order component.
+-   Add persistence via data plugin interface.
+-   Introduce new redux-routine package for synchronous generator in data module.
+-   Move embed API call out of block and into data module.
+-   Remove no longer needed workaround targeted at resolving a TinyMCE error.
+-   Abort selection range set on unset range target. Resolves an issue when merging two empty paragraph blocks created while at the end of an inline boundary.
+-   Removing or merging RichText should only trigger if the selection is collapsed:
+-   Fix issue with backspace not working as expected when deleting text content from the first block.
+-   Fix case where paragraph content could move to previous paragraph when deleted.
+-   Remove provisional block behaviour to improve reliability of various interactions.
+-   Restore horizontal edge traversal implementation to address issue where pressing Backspace may not place the caret in the correct position if within or after a RichText field.
+-   Ensure Gutenberg is disabled when editing the assigned blog posts page.
+-   Initialize the Autosaves controller even if revisions are disabled. Fixes several bugs around saving with revisions turned off.
+-   Display warning when Cloudflare blocks REST API requests.
+-   Improve validation for attribute names in serializer.
+-   Add Slot to block menu settings for extensibility.
+-   Fix File Block center align behavior.
+-   Fix behaviours when deleting on an empty RichText field.
+-   Fix parent-dropdown missing for custom post-types.
+-   Fix import style statements in ColorIndicator.
+-   Fix height of used-once block warning.
+-   Fix link for innerBlocks docs.
+-   Fix link to server-side-render component.
+-   Fix race condition with DomReady.
+-   Fix awkward capitalisation in demo post content.
+-   Fix warning for unrecognised forwardedRef prop.
+-   Fix regression with URL input focus box.
+-   Fix error in custom HTML preview when block is empty.
+-   Fix colspan bug in table block for tables with thead tags.
+-   Fix issue with image inspector controls disappearing once an image block is set to wide/full alignment.
+-   Fix issue when image size remains blurry if manually set to a smaller size (i.e., medium) and then changed alignment to wide/full.
+-   Fix issue with meta boxes being absent when script enqueued in head depends on wp-edit-post.
+-   Resolve an issue where removing all text from a Button block by backspace would cause subsequent text changes to not be accurately reflected. Broader issue with TinyMCE inline elements as containers.
+-   Avoid using remove() because it's unavailable in IE11.
+-   Address further feedback on duplicated DotTips implementation.
+-   Update re-resizable to version 4.7.1 — fix image & spacer blocks resizing on IE.
+-   Use a unique querystring package instead of three different ones.
+-   Introduce filters to allow developers the ability to customize the Taxonomy Selector UI for custom taxonomies.
+-   Introduce RichText component for mobile native and implement the Paragraph Block with it.
+-   Use standard label for Alt Text input.
+-   Consolidate similar i18n strings.
+-   Remove title attributes from the Classic Editor warning.
+-   Remove unused code in taxonomies panel.
+-   Remove oEmbed fixture files.
+-   Remove jQuery dependency from @wordpress/api-fetch.
+-   Remove filler spaces from empty constructs.
+-   Remove REST API shims for code introduced in WP 4.9.8.
+-   Remove unused terms, taxonomies, and categories code.
+-   Replace the apiRequest module with api-fetch module.
+-   Add inline comment that explains a stopPropagation() within tips implementation.
+-   Add gutenberg_can_edit_post filter.
+-   Add watch support for stylesheets in packages.
+-   Add JSDoc comment to Popover's focus() method.
+-   Add readme docs for all components.
+-   Autogenerate documentation from readme files.
+-   Add doc note about automatically applied attributes in save.
+-   Add test for block mover.
+-   Allow demo content to be translatable.
+-   Update CSS selectors from :before to ::before.
+-   Export the description for server-registered blocks.
+-   Export getBlockTypes on react native interface.
+-   Expose redux-routine to react native.
+-   Expose unknown-type handler methods for mobile.
+-   Specify missing wp-url dependencies.
+-   Improve JS packages descriptions.
+-   Downgrade Docker image version for WordPress for test validation.
+-   Move CI back to latest WordPress version and bump minimum version to 4.9.8
+-   Use @wordpress/compose instead of @wordpress/components.
+-   Update docs for Button component.
+-   Update package-lock.json.
+-   Updated dependencies: jest, npm-package-json-lint and read-pkg-up.
+-   Add Babel runtime dependency to redux routine.
+-   Prevent Travis from running when changes are only made to .md files.
+-   Add stylelint for SCSS linting.
+-   Set babel dependencies to fixed version and add core-js2 support.
+-   Trigger E2E test failure on console logging.
+-   Update doc links to resources moved to packages folder.
+-   Update api-fetch package documentation.
+-   Update Lerna to 3.0.0-rc.0.
+-   Generate source maps and read those from the webpack build.
+-   Rewrite e2e tests using jest-puppeter preset.
+-   Introduce a new Extending Editor document specific to editor filters.
+-   Improve test configuration and mocking strategy.
 
 = 3.4.0 =
 
-* Add the Inline Blocks API.
-* Rename Shared Blocks to Reusable Blocks.
-* Add a Modal component.
-* Add a REST API Search controller.
-* Add a warning in the classic editor when attempting to edit a post that contains blocks.
-* Add ability for themes to configure font sizes.
-* Add RTL CSS to all packages.
-* Add an edit button to embed blocks.
-* Remove all wp.api usage from the editor package.
-* Add error handling for file block drag-and-drop.
-* Add registerBlockStyleVariation, for registering block style variations.
-* Add a border between panels in the block sidebar.
-* Add a editor.PostFeaturedImage.imageSize filter for the Featured Image.
-* Create a video block when dropping a video on an insertion point.
-* Expose a custom class name hook for mobile.
-* Add a React Native entrypoint for mobile.
-* Only disable wpautop on the main classic editor instance.
-* Retain the id attribute when converting heading tags to heading blocks.
-* Retain target="_blank" on links in converted paragraphs.
-* Improve the handling of imported shortcode blocks.
-* Replace the File block’s filename editor with a RichText.
-* Tweak the block warning style.
-* Add a max-height to the table of contents.
-* Remove the inset shadow from the table of contents.
-* Fix the tag placeholder text for long translations.
-* Fix the table of contents sometimes causing JavaScript errors.
-* Fix the link suggestion dropdown not allowing the first suggestion to be selected by keyboard.
-* Make tooltips persist when hovering them.
-* Add missing aria-labels to the audio and video block UIs.
-* Add an icon and accessibility text to links that open in a new tab.
-* Fixed shared blocks adding unnecessary rewrite rules.
-* Fix a regression in the colour picker width.
-* Fix the colour picker focus border being off-centre.
-* Combine ColorPalettes into a single panel for Button and Paragraph blocks.
-* Fix the ColorIndicator style import.
-* Fix auto-linking a URL pasted on top of another URL.
-* Add persistent store support to the data module.
-* Fix the Latest Comments block using admin imports.
-* Fix a warning when adding an image block.
-* Fix the classic block toolbar alignment.
-* Fix a warning in the block menu.
-* Change all blocks to use supports: align, instead of the align attribute.
-* Improve the ContrastChecker logic for large font sizes.
-* Update the is-shallow-equal package to use ES5 code.
-* Deprecate getMimeTypesArray, mediaUpload, and preloadImage.
-* Deprecate wideAlign in favour of alignWide.
-* Document Node version switching in the testing documentation.
-* Document examples of the registerBlockType hook.
-* Document an example of the block transforms property.
-* Document Gutenberg’s camelCase coding style.
-* Improved all of the package descriptions.
-* Update coding standards to allow double quoted strings to avoid escaping single quotes.
-* Standardise the package descriptions and titles.
-* Extract the editor package.
-* Isolate and reset e2e tests every run.
-* Improve test configuration and mocking strategy.
-* Fix test coverage configuration.
-* Fix the block icons e2e tests.
-* Bump the Puppeteer version.
-* Use simpler jest.fn() mocks for api-fetch calls in unit tests.
+-   Add the Inline Blocks API.
+-   Rename Shared Blocks to Reusable Blocks.
+-   Add a Modal component.
+-   Add a REST API Search controller.
+-   Add a warning in the classic editor when attempting to edit a post that contains blocks.
+-   Add ability for themes to configure font sizes.
+-   Add RTL CSS to all packages.
+-   Add an edit button to embed blocks.
+-   Remove all wp.api usage from the editor package.
+-   Add error handling for file block drag-and-drop.
+-   Add registerBlockStyleVariation, for registering block style variations.
+-   Add a border between panels in the block sidebar.
+-   Add a editor.PostFeaturedImage.imageSize filter for the Featured Image.
+-   Create a video block when dropping a video on an insertion point.
+-   Expose a custom class name hook for mobile.
+-   Add a React Native entrypoint for mobile.
+-   Only disable wpautop on the main classic editor instance.
+-   Retain the id attribute when converting heading tags to heading blocks.
+-   Retain target="\_blank" on links in converted paragraphs.
+-   Improve the handling of imported shortcode blocks.
+-   Replace the File block’s filename editor with a RichText.
+-   Tweak the block warning style.
+-   Add a max-height to the table of contents.
+-   Remove the inset shadow from the table of contents.
+-   Fix the tag placeholder text for long translations.
+-   Fix the table of contents sometimes causing JavaScript errors.
+-   Fix the link suggestion dropdown not allowing the first suggestion to be selected by keyboard.
+-   Make tooltips persist when hovering them.
+-   Add missing aria-labels to the audio and video block UIs.
+-   Add an icon and accessibility text to links that open in a new tab.
+-   Fixed shared blocks adding unnecessary rewrite rules.
+-   Fix a regression in the colour picker width.
+-   Fix the colour picker focus border being off-centre.
+-   Combine ColorPalettes into a single panel for Button and Paragraph blocks.
+-   Fix the ColorIndicator style import.
+-   Fix auto-linking a URL pasted on top of another URL.
+-   Add persistent store support to the data module.
+-   Fix the Latest Comments block using admin imports.
+-   Fix a warning when adding an image block.
+-   Fix the classic block toolbar alignment.
+-   Fix a warning in the block menu.
+-   Change all blocks to use supports: align, instead of the align attribute.
+-   Improve the ContrastChecker logic for large font sizes.
+-   Update the is-shallow-equal package to use ES5 code.
+-   Deprecate getMimeTypesArray, mediaUpload, and preloadImage.
+-   Deprecate wideAlign in favour of alignWide.
+-   Document Node version switching in the testing documentation.
+-   Document examples of the registerBlockType hook.
+-   Document an example of the block transforms property.
+-   Document Gutenberg’s camelCase coding style.
+-   Improved all of the package descriptions.
+-   Update coding standards to allow double quoted strings to avoid escaping single quotes.
+-   Standardise the package descriptions and titles.
+-   Extract the editor package.
+-   Isolate and reset e2e tests every run.
+-   Improve test configuration and mocking strategy.
+-   Fix test coverage configuration.
+-   Fix the block icons e2e tests.
+-   Bump the Puppeteer version.
+-   Use simpler jest.fn() mocks for api-fetch calls in unit tests.
 
 = 3.3.0 =
 
-* Add new Archives block for displaying site archives.
-* Add new Latest Comments block to widgets category.
-* Add “Convert to blocks” option in HTML block.
-* Correct caret placement when merging to inline boundary.
-* Move block switcher from header to multi-block toolbar for multiselection.
-* Add video block attributes for Autoplay, Controls, Loop, Muted.
-* Remove HTML beautification and preserve whitespace on save.
-* Formalize RichText children value abstraction.
-* Allow transformation of image block to file block and vice-versa.
-* Support preload attribute for Audio Block.
-* Avoid popover refresh on Tip mount.
-* Introduce “registry” concept to the Data Module.
-* Convert successive shortcodes properly.
-* Hide “Convert to Shared Block” button on Classic blocks.
-* Update spacing in pre-publish panel titles.
-* Use do_blocks to render core blocks content.
-* Remove restoreContentAndSplit in RichText.
-* Hide insertion point when it is not possible to insert the default block.
-* Refactor block converters to share common UI functionality.
-* Replace the apiRequest module with api-fetch module.
-* Add audio/video settings title to settings panel.
-* Normalize the behavior of BlockListBlock’s “Enter” key handling to insert the default block.
-* Rename baseUrl entities property as baseURL in entities.
-* Rename UrlInput component as URLInput.
-* Give File block a low files transform priority.
-* Make tooltips persist when hovering them.
-* Optimise design of heading line heights.
-* Add a filter(‘editor.FeaturedImage’) for the FeaturedImage component.
-* Fix vertical arrow navigation skips in writing flow.
-* Fix incorrect polyfill script handles.
-* Fix template example so that it is correct.
-* Fix exception error when saving a new shared block.
-* Fix getInserterItems caching bug and add new test case.
-* Fix issue with spacer block resizing and sibling inserter.
-* Fix files configuration entry in package.json for wordpress/babel-preset-default.
-* Fix config and regenerate updated docs.
-* Fix dependency mistake in api-fetch.
-* Fix metaboxes save request (parse: false).
-* Fix issue with name field not being focused when a shared block is created.
-* Fix box sizing for pseudo elements.
-* Fix an error which occurs when assigning the URL of a Button block.
-* Improve usage and documentation of the landmark region labels.
-* Substitute the remaining uses of unfiltered_html capability and withAPIData.
-* Remove the “Extended Settings” meta box wrapper.
-* Remove NewBlock event handling from RichText.
-* Remove legacy context API child context from Block API.
-* Remove Text Columns block from insertion menus in preparation for Try outreach.
-* Remove unused autocompleter backcompat case.
-* Change label in Cover Image block for background opacity.
-* Change the text label on Image block from “Source Type” to “Image Size”.
-* Backup and restore global $post when preloading API data.
-* Move packages repository into Gutenberg with its history.
-* Enhance the deprecated module to log a message only once per session.
-* Switch tests away from using enzyme (enzyme.shallow, enzyme.mount, etc).
-* Unblock tests from being skipped.
-* Add basic test for shortcode transformation.
-* Add e2e test for block icons.
-* Add e2e tests for the NUX tips.
-* Add e2e tests for shared blocks.
-* Remove data-test attribute from UrlInputButton output.
-* Deprecate id prop in favor of clientId.
-* Rename MediaPlaceholder onSelectUrl prop as onSelectURL.
-* Remove unnecessary default prop from test.
-* Point the package entry to src directly for native mobile.
-* Use clearer filenames for saved vendor scripts.
-* Update local install instructions and add add more verbose instructions when node versions don’t match.
-* Reorder package.json devDependencies alphabetically.
-* Coding Guidelines: Prescribe specific camelCasing behaviors.
-* Regenerate docs using docs:build command.
-* Add documentation for ALLOWED_BLOCKS in Columns.
-* Add link to support forum in plugin menu.
-* Deprecate buildTermTree function in utilities.
-* Deprecate property source in Block API.
-* Deprecate uid in favor of clientId.
-* Deprecate grouped inner blocks layouts.
-* Improve eslint checks for deep imports.
-* Improve IntelliSense support when using VS Code.
-* Move the components module partially to the packages folder.
-* Add the blocks module to the packages folder.
-* Add wp-deprecated dependency to wp-element.
-* Add @babel/runtime as a dependency to wordpress/components.
-* Add @babel/runtime as a dependency for packages.
-* Add a new compose package.
-* Extract entities package.
-* Extract viewport package.
-* Extract @wordpress/nux package.
-* Create new spec-parser package.
-* Update Dashicons to latest build.
-* Update test for babel-preset-default.
-* Update code to work with Babel 7.
-* Update package-lock.json with eslint-scope version 3.7.3.
-* Update node-sass.
+-   Add new Archives block for displaying site archives.
+-   Add new Latest Comments block to widgets category.
+-   Add “Convert to blocks” option in HTML block.
+-   Correct caret placement when merging to inline boundary.
+-   Move block switcher from header to multi-block toolbar for multiselection.
+-   Add video block attributes for Autoplay, Controls, Loop, Muted.
+-   Remove HTML beautification and preserve whitespace on save.
+-   Formalize RichText children value abstraction.
+-   Allow transformation of image block to file block and vice-versa.
+-   Support preload attribute for Audio Block.
+-   Avoid popover refresh on Tip mount.
+-   Introduce “registry” concept to the Data Module.
+-   Convert successive shortcodes properly.
+-   Hide “Convert to Shared Block” button on Classic blocks.
+-   Update spacing in pre-publish panel titles.
+-   Use do_blocks to render core blocks content.
+-   Remove restoreContentAndSplit in RichText.
+-   Hide insertion point when it is not possible to insert the default block.
+-   Refactor block converters to share common UI functionality.
+-   Replace the apiRequest module with api-fetch module.
+-   Add audio/video settings title to settings panel.
+-   Normalize the behavior of BlockListBlock’s “Enter” key handling to insert the default block.
+-   Rename baseUrl entities property as baseURL in entities.
+-   Rename UrlInput component as URLInput.
+-   Give File block a low files transform priority.
+-   Make tooltips persist when hovering them.
+-   Optimise design of heading line heights.
+-   Add a filter(‘editor.FeaturedImage’) for the FeaturedImage component.
+-   Fix vertical arrow navigation skips in writing flow.
+-   Fix incorrect polyfill script handles.
+-   Fix template example so that it is correct.
+-   Fix exception error when saving a new shared block.
+-   Fix getInserterItems caching bug and add new test case.
+-   Fix issue with spacer block resizing and sibling inserter.
+-   Fix files configuration entry in package.json for wordpress/babel-preset-default.
+-   Fix config and regenerate updated docs.
+-   Fix dependency mistake in api-fetch.
+-   Fix metaboxes save request (parse: false).
+-   Fix issue with name field not being focused when a shared block is created.
+-   Fix box sizing for pseudo elements.
+-   Fix an error which occurs when assigning the URL of a Button block.
+-   Improve usage and documentation of the landmark region labels.
+-   Substitute the remaining uses of unfiltered_html capability and withAPIData.
+-   Remove the “Extended Settings” meta box wrapper.
+-   Remove NewBlock event handling from RichText.
+-   Remove legacy context API child context from Block API.
+-   Remove Text Columns block from insertion menus in preparation for Try outreach.
+-   Remove unused autocompleter backcompat case.
+-   Change label in Cover Image block for background opacity.
+-   Change the text label on Image block from “Source Type” to “Image Size”.
+-   Backup and restore global $post when preloading API data.
+-   Move packages repository into Gutenberg with its history.
+-   Enhance the deprecated module to log a message only once per session.
+-   Switch tests away from using enzyme (enzyme.shallow, enzyme.mount, etc).
+-   Unblock tests from being skipped.
+-   Add basic test for shortcode transformation.
+-   Add e2e test for block icons.
+-   Add e2e tests for the NUX tips.
+-   Add e2e tests for shared blocks.
+-   Remove data-test attribute from UrlInputButton output.
+-   Deprecate id prop in favor of clientId.
+-   Rename MediaPlaceholder onSelectUrl prop as onSelectURL.
+-   Remove unnecessary default prop from test.
+-   Point the package entry to src directly for native mobile.
+-   Use clearer filenames for saved vendor scripts.
+-   Update local install instructions and add add more verbose instructions when node versions don’t match.
+-   Reorder package.json devDependencies alphabetically.
+-   Coding Guidelines: Prescribe specific camelCasing behaviors.
+-   Regenerate docs using docs:build command.
+-   Add documentation for ALLOWED_BLOCKS in Columns.
+-   Add link to support forum in plugin menu.
+-   Deprecate buildTermTree function in utilities.
+-   Deprecate property source in Block API.
+-   Deprecate uid in favor of clientId.
+-   Deprecate grouped inner blocks layouts.
+-   Improve eslint checks for deep imports.
+-   Improve IntelliSense support when using VS Code.
+-   Move the components module partially to the packages folder.
+-   Add the blocks module to the packages folder.
+-   Add wp-deprecated dependency to wp-element.
+-   Add @babel/runtime as a dependency to wordpress/components.
+-   Add @babel/runtime as a dependency for packages.
+-   Add a new compose package.
+-   Extract entities package.
+-   Extract viewport package.
+-   Extract @wordpress/nux package.
+-   Create new spec-parser package.
+-   Update Dashicons to latest build.
+-   Update test for babel-preset-default.
+-   Update code to work with Babel 7.
+-   Update package-lock.json with eslint-scope version 3.7.3.
+-   Update node-sass.
 
 = 3.2.0 =
 
-* Add block styles variations to the Block API.
-* Add support for Inline Images and Inline Blocks API.
-* Convert Columns to a set of parent and child blocks, including a wrapper element and more reliable front-end presentation.
-* Allow registering new block categories.
-* Add support for locking Inner Block areas.
-* Add File Block for uploading and listing documents, with drag and drop support.
-* Introduce Modal component to expand the extensibility suite of UI components.
-* Redesign block transformation menu.
-* Improve style display of region focus areas.
-* Prevent blocks from being draggable if a template lock exists.
-* Parse superfluous classes as custom classes preventing a block being considered invalid for such cases.
-* Support “Autoplay” and “Loop” in Audio Block “Playback Controls”.
-* Always show “new gallery item” below the gallery.
-* When dragging images to create a gallery, immediately show the images while uploading is happening.
-* Optimize withSelect to avoid generating merge props on equal props.
-* Remove the “scroll shadow” at the bottom of the inserter library.
-* Remove the bottom border on the last collapsible panel.
-* Remove wrapping div from paragraph block (in the editor) for performance audit.
-* Add Image Block ‘Link to’ setting.
-* Allow margins to collapse & refactor block toolbar.
-* Keep NUX tips open when the user clicks outside.
-* Add initialTabName prop to Tab Panel component.
-* Add higher order component to constrain Tab keyboard navigation.
-* Display server error message on media upload when one exists.
-* Improve “add block” text in NUX onboarding.
-* Improve experience of using image resize handles — placing them at the middle of the edges instead of the corners.
-* Update color of the Shared panel icon to be the same as all other icons.
-* Verify if block icon background and foreground colors are readable. Warn in the console otherwise.
-* Address various design details on Plugin API icon treatment in header and popover.
-* Include all image sizes on the media upload object when they exist.
-* Move the delete block action to the ellipsis menu for the block. Introduce separator in the menu.
-* Make the inserter results panel focusable and improve accessibility.
-* Improve publish panel accessibility and add new publish landmark region.
-* Open preview to previewLink if not autosaveable.
-* Make sure autocompleted values make it into the block’s saved content.
-* Avoid setAttributes on end-of-paragraph seeking to resolve unnecessary performance degradations.
-* Avoid re-render and subsequent action dispatch by adopting module constant.
-* Avoid focusing link in new NUX tooltip
-* Avoid showing hover effect if the ancestor of a block is multi-selected.
-* Schedule render by store update via setState. Fixes condition where appender would insert two copies of a block.
-* Inner Blocks refactor:
-* * Update deprecated componentWillReceiveProps to equivalent componentDidUpdate.
-* * Avoid deep equality check on flat allowedBlocks prop shape.
-* * Avoid handling unexpected case where UPDATE_BLOCK_LIST_SETTINGS is not passed an id.
-* * Avoid creating new references for blockListSettings when settings not set, but the id never existed in state anyways.
-* * Avoid switch fallthrough on case where previous updateIsRequired condition would be false, which could have introduced future maintainability issues if additional case statements were added.
-* * Add test to verify state reference is not changed when no update is needed.
-* * Consistently name allowedBlocks (previously also referred to as supportedBlocks).
-* Consider horizontal handled by stopPropagation in RichText. Fixes edge case with inline boundaries at the end of lines. With further improvements.
-* Ensure ellipsis icon button is visible when block settings menu is open.
-* Simplify RichText to have a single function for setting content vs. the current updateContent and setContent, by removing updateContent.
-* Optimize RichText by removing the creation of undo levels at split and merge steps.
-* Simplify the RichText component’s getContent function to remove a call to TinyMCE’s isEmpty function, which incurs a DOM walk to determine emptiness.
-* Optimize the RichText component to avoid needing to keep a focusPosition state.
-* Reenable pointer events on insertion point hover for Firefox.
-* Introduce colors slugs in color palette definitions to ensure localization.
-* Respect inner blocks locking when displaying default block appender.
-* Use color styles on the editor even if the classes were not set.
-* Move “opinionated” Gutenberg block styles to theme.scss.
-* Don’t allow negative values in image dimensions.
-* Fix IE11 formatting toolbar visibility.
-* Fix issues with gallery block in IE11.
-* Fix import statement for InnerBlocks.
-* Fix broken links in documentation.
-* Fix text wrapping issues in Firefox.
-* Fix showing the permalink edit box on the title element.
-* Fix focus logic error in Tips and tidy up docs.
-* Fix instance of keycode package import.
-* Fix case where an explicit string value assigned as an attribute would be wrongly interpreted as false when assigned as a boolean attribute type in the parser.
-* Fix the data module docs by moving them to the root level of the handbook.
-* Fix specificity issue with button group selector.
-* Fix CSS property serialization.
-* Fix left / right alignments of blocks.
-* Fix CSS vendor-prefixed property serialization.
-* Fix arrows navigation in the block more options menu.
-* Let ⌘A’s select all blocks again.
-* Check for forwardedRef in withGlobalEvents.
-* Address issues with left / right align improvements in RTL.
-* Different approach for fixing sibling inserter in Firefox.
-* Correctly handle case where ‘post-thumbnails’ is array of post types.
-* Remove blocks/index.native as the default is compatible with React Native app.
-* Allow editor color palette to be empty.
-* Support setup with single array argument in Color Palette registration.
-* Only save metaboxes when it’s not an autosave.
-* Force the display of hidden meta boxes.
-* Implement core style of including revisions data on Post response.
-* Remove post type ‘viewable’ compatibility shim.
-* Remove unused block-transformations component.
-* Use withSafeTimeout in NUX tips to handle cases where plugins modify the $post global.
-* Update HOCs to use createHigherOrderComponent.
-* Deprecate property source in Block API.
-* Documentation: fix rich-text markdown source.
-* Tweak release docs and improve release build script.
-* Add focusOnMount change to deprecations.
-* Add e2e test for sidebar behaviours on mobile and desktop.
-* Add e2e test for PluginPostStatusInfo.
-* Add snapshot update script.
-* Update import from @wordpress/deprecated.
-* Extract “keycodes” into its own package and rework the Readme file.
-* Add shortcode package instead of global.
-* Add package: @wordpress/babel-plugin-import-jsx-pragma.
-* Update nested templates to new columns format.
-* Generate the manifest dynamically to include the data module docs in the handbook.
-* Expose the grammar parser to the mobile app.
-* Drop the .js extension from @wordpress/element’s package.json entry-point so when used in the mobile RN app the correct module (index.native.js) can be resolved by Metro.
-* Add packages Readme files to the handbook.
-* Add link in documentation to supported browsers.
-* Add initial document on copy guidelines.
-* Add missing documentation for InnerBlocks props.
-* Regenerate package-lock.json to address unintentional changes.
-* Use cross-env for plugin build scripts to address issues on Windows machines.
-* Invert JSX pragma application condition.
-* Ignore non-JS file events in packages.
-* Drop deprecations slated for 3.2 removal.
-* Publish multiple new versions of packages.
+-   Add block styles variations to the Block API.
+-   Add support for Inline Images and Inline Blocks API.
+-   Convert Columns to a set of parent and child blocks, including a wrapper element and more reliable front-end presentation.
+-   Allow registering new block categories.
+-   Add support for locking Inner Block areas.
+-   Add File Block for uploading and listing documents, with drag and drop support.
+-   Introduce Modal component to expand the extensibility suite of UI components.
+-   Redesign block transformation menu.
+-   Improve style display of region focus areas.
+-   Prevent blocks from being draggable if a template lock exists.
+-   Parse superfluous classes as custom classes preventing a block being considered invalid for such cases.
+-   Support “Autoplay” and “Loop” in Audio Block “Playback Controls”.
+-   Always show “new gallery item” below the gallery.
+-   When dragging images to create a gallery, immediately show the images while uploading is happening.
+-   Optimize withSelect to avoid generating merge props on equal props.
+-   Remove the “scroll shadow” at the bottom of the inserter library.
+-   Remove the bottom border on the last collapsible panel.
+-   Remove wrapping div from paragraph block (in the editor) for performance audit.
+-   Add Image Block ‘Link to’ setting.
+-   Allow margins to collapse & refactor block toolbar.
+-   Keep NUX tips open when the user clicks outside.
+-   Add initialTabName prop to Tab Panel component.
+-   Add higher order component to constrain Tab keyboard navigation.
+-   Display server error message on media upload when one exists.
+-   Improve “add block” text in NUX onboarding.
+-   Improve experience of using image resize handles — placing them at the middle of the edges instead of the corners.
+-   Update color of the Shared panel icon to be the same as all other icons.
+-   Verify if block icon background and foreground colors are readable. Warn in the console otherwise.
+-   Address various design details on Plugin API icon treatment in header and popover.
+-   Include all image sizes on the media upload object when they exist.
+-   Move the delete block action to the ellipsis menu for the block. Introduce separator in the menu.
+-   Make the inserter results panel focusable and improve accessibility.
+-   Improve publish panel accessibility and add new publish landmark region.
+-   Open preview to previewLink if not autosaveable.
+-   Make sure autocompleted values make it into the block’s saved content.
+-   Avoid setAttributes on end-of-paragraph seeking to resolve unnecessary performance degradations.
+-   Avoid re-render and subsequent action dispatch by adopting module constant.
+-   Avoid focusing link in new NUX tooltip
+-   Avoid showing hover effect if the ancestor of a block is multi-selected.
+-   Schedule render by store update via setState. Fixes condition where appender would insert two copies of a block.
+-   Inner Blocks refactor:
+-   -   Update deprecated componentWillReceiveProps to equivalent componentDidUpdate.
+-   -   Avoid deep equality check on flat allowedBlocks prop shape.
+-   -   Avoid handling unexpected case where UPDATE_BLOCK_LIST_SETTINGS is not passed an id.
+-   -   Avoid creating new references for blockListSettings when settings not set, but the id never existed in state anyways.
+-   -   Avoid switch fallthrough on case where previous updateIsRequired condition would be false, which could have introduced future maintainability issues if additional case statements were added.
+-   -   Add test to verify state reference is not changed when no update is needed.
+-   -   Consistently name allowedBlocks (previously also referred to as supportedBlocks).
+-   Consider horizontal handled by stopPropagation in RichText. Fixes edge case with inline boundaries at the end of lines. With further improvements.
+-   Ensure ellipsis icon button is visible when block settings menu is open.
+-   Simplify RichText to have a single function for setting content vs. the current updateContent and setContent, by removing updateContent.
+-   Optimize RichText by removing the creation of undo levels at split and merge steps.
+-   Simplify the RichText component’s getContent function to remove a call to TinyMCE’s isEmpty function, which incurs a DOM walk to determine emptiness.
+-   Optimize the RichText component to avoid needing to keep a focusPosition state.
+-   Reenable pointer events on insertion point hover for Firefox.
+-   Introduce colors slugs in color palette definitions to ensure localization.
+-   Respect inner blocks locking when displaying default block appender.
+-   Use color styles on the editor even if the classes were not set.
+-   Move “opinionated” Gutenberg block styles to theme.scss.
+-   Don’t allow negative values in image dimensions.
+-   Fix IE11 formatting toolbar visibility.
+-   Fix issues with gallery block in IE11.
+-   Fix import statement for InnerBlocks.
+-   Fix broken links in documentation.
+-   Fix text wrapping issues in Firefox.
+-   Fix showing the permalink edit box on the title element.
+-   Fix focus logic error in Tips and tidy up docs.
+-   Fix instance of keycode package import.
+-   Fix case where an explicit string value assigned as an attribute would be wrongly interpreted as false when assigned as a boolean attribute type in the parser.
+-   Fix the data module docs by moving them to the root level of the handbook.
+-   Fix specificity issue with button group selector.
+-   Fix CSS property serialization.
+-   Fix left / right alignments of blocks.
+-   Fix CSS vendor-prefixed property serialization.
+-   Fix arrows navigation in the block more options menu.
+-   Let ⌘A’s select all blocks again.
+-   Check for forwardedRef in withGlobalEvents.
+-   Address issues with left / right align improvements in RTL.
+-   Different approach for fixing sibling inserter in Firefox.
+-   Correctly handle case where ‘post-thumbnails’ is array of post types.
+-   Remove blocks/index.native as the default is compatible with React Native app.
+-   Allow editor color palette to be empty.
+-   Support setup with single array argument in Color Palette registration.
+-   Only save metaboxes when it’s not an autosave.
+-   Force the display of hidden meta boxes.
+-   Implement core style of including revisions data on Post response.
+-   Remove post type ‘viewable’ compatibility shim.
+-   Remove unused block-transformations component.
+-   Use withSafeTimeout in NUX tips to handle cases where plugins modify the $post global.
+-   Update HOCs to use createHigherOrderComponent.
+-   Deprecate property source in Block API.
+-   Documentation: fix rich-text markdown source.
+-   Tweak release docs and improve release build script.
+-   Add focusOnMount change to deprecations.
+-   Add e2e test for sidebar behaviours on mobile and desktop.
+-   Add e2e test for PluginPostStatusInfo.
+-   Add snapshot update script.
+-   Update import from @wordpress/deprecated.
+-   Extract “keycodes” into its own package and rework the Readme file.
+-   Add shortcode package instead of global.
+-   Add package: @wordpress/babel-plugin-import-jsx-pragma.
+-   Update nested templates to new columns format.
+-   Generate the manifest dynamically to include the data module docs in the handbook.
+-   Expose the grammar parser to the mobile app.
+-   Drop the .js extension from @wordpress/element’s package.json entry-point so when used in the mobile RN app the correct module (index.native.js) can be resolved by Metro.
+-   Add packages Readme files to the handbook.
+-   Add link in documentation to supported browsers.
+-   Add initial document on copy guidelines.
+-   Add missing documentation for InnerBlocks props.
+-   Regenerate package-lock.json to address unintentional changes.
+-   Use cross-env for plugin build scripts to address issues on Windows machines.
+-   Invert JSX pragma application condition.
+-   Ignore non-JS file events in packages.
+-   Drop deprecations slated for 3.2 removal.
+-   Publish multiple new versions of packages.
 
 = 3.1.1 =
 
-* Fix permalink editor not appearing.
-* Fix sibling block inserter not working in Firefox and Safari.
+-   Fix permalink editor not appearing.
+-   Fix sibling block inserter not working in Firefox and Safari.
 
 = 3.1.0 =
 
-* Implement Tips Interface to guide a user in the new editor interface.
-* New design version of sibling inserter (the ability to insert blocks between other blocks).
-* Allow users to re-enable Tips.
-* Allow the user to preview changes to a published post without first updating the post.
-* Show the preview mode for HTML blocks converted into shared blocks. This streamlines the process of creating straightforward HTML blocks and letting users insert them visually.
-* Exclude the currently focused block from the block completer options. (i.e. don’t show paragraph as an option if already on a paragraph)
-* Trigger autosave as standard save for draft by current user.
-* Add mime type checking to the pre-upload error messaging system when uploading media.
-* Allow block hover outlines to draw color from admin theme.
-* Allow transforming multiple paragraph blocks into a single quote block.
-* Block API: move useOnce block configuration to supports.multiple = false.
-* Add strikethrough support for Markdown conversion when pasting.
-* Add yAxis=middle support to Popover to allow showing arrows vertically centered for NUX tips.
-* Add BlockIconWithColors component and use it for the block header with description in the inspector.
-* Add error notices mechanism directly to media placeholder.
-* Refactor the initialization of the editor to only require a post ID.
-* Optimize the default column width for character length and use the same width for the text editor.
-* Incremental improvements and polish to the mobile block toolbar.
-* Visually compensate nested blocks for block padding.
-* Prevent slash autocompleter from letting users insert two cases of a useOnce block.
-* Let screen readers announce the block aria label.
-* Improve the accessibility of featured images.
-* Make aria-multiline true by default in RichText so the content field is properly announced.
-* Add back role textbox to the List block and improve aria-multiline usage.
-* Replace the renderBlockMenu prop with Slot/Fill.
-* Hide disabled blocks from shortcut inserter.
-* Avoid deprecated React Lifecycle hooks in withAPIData.
-* Improve the element serializer to avoid double ampersand encoding of valid character references.
-* Update drop-cap design to better balance line length.
-* Describe expanded state of “more options” panel.
-* Improve DotTip positioning fix.
-* Implement Button component as assigning ref via forwardRef (new React API).
-* Improve serialising JSON to PHP-compatible query strings.
-* Introduce rendererPathWithAttributes() for ServerSideRender.
-* Refactor the getPostEdits selector to avoid relying on Lodash’s _.get.
-* Refactor withSelect to use getDerivedStateFromProps.
-* Replace JSON-escaped quotation mark with unicode escape sequence in Block API. Fixes PlainText component not properly escaping attributes under some specific user roles.
-* Fix regression in Columns block’s front-end style.
-* Fix regression in SVG support for block icons.
-* Fix PHP 5.2 notice by ensuring $memo is always an array.
-* Fix margins of embed block content.
-* Fix autocomplete behaviour in IE11.
-* Fix regression with formatting toolbar not showing divider between some block controls.
-* Fix issue where pasting an inline shortcode would produce a separate shortcode block.
-* Fix issue when copy pasting images in Chrome.
-* Fix typos in code comments.
-* Fix consistency of hover styles in toolbars.
-* Fix option for linking to attachment page on gallery block.
-* Fix Classic Editor adding paragraphs from block boundaries.
-* Fix post publish panel showing incorrect UX for contributors who don’t have publishing capability.
-* Fix issues with floats and the side UI on wide and full-wide.
-* Fix issue where server side upload errors disappear automatically.
-* Fix block inserter popover in RTL mode.
-* Fix mp3 uploads on chrome.
-* Fix getMimeTypesArray return documentation.
-* Avoid showing error if autosave runs and there are no changes to save.
-* Prevent any disabled button from changing the cursor to pointer.
-* Remove ‘who’=>’authors’ compatibility shim as it’s part of WP 4.9.6.
-* Remove confusing “wrap text” from Button settings.
-* Remove the usage of the componentWillMount lifecycle.
-* Remove the componentWillReceiveProps lifecycle usage.
-* Remove createInnerBlockList utility / context. This should be a simplification of block context, potentially with some performance and/or memory improvements, as an intermediary component is no longer created.
-* Improve translatable strings containing “%s” to have a translator comment.
-* Move trash post URL change to the BrowserUrl component. Consolidates all browser navigation (url changes and actual navigation).
-* Simplify the withColors HOC so we can avoid the usage of memoize while still having a correct implementation without unnecessary rerenders.
-* Refactor Higher-order components in data module to avoid the use of componentWillMount.
-* Use mdash for block description in cover image.
-* Ensure that only the latest promise updates the autocompleter state for more predictable behaviour.
-* Wrap PluginPostStatusInfo with PanelRow rather than Slot. Fix issue with hard to style divs.
-* Update demo content to avoid dirtying embed.
-* Allow using ServerSideRender component without defined attributes.
-* Avoid loading Gutenberg assets in other admin pages.
-* Add a new @wordpress/api-request package. Instead of relying on globals to set the nonce/rootURL, it users configurable middlewares. Preloading support is also built as a middleware.
-* Move the Core Data Module to packages.
-* Move Plugins module to packages.
-* Rename all the hooks moved from blocks to editor.
-* Add NUX e2e tests.
-* Add e2e tests for Plugins API.
-* Add es5 samples to edit-post and plugins.
-* Add e2e test to blocks.BlockEdit filter.
-* Add snapshot test for MoreMenu component.
-* Fix broken links in readme files.
-* Build tooling: add linting for package.json files.
-* Further explanation for why .normalize() is optional in raw-handling.
-* Update icon color readme example.
-* Generate docs for the data module.
-* Enable Strict-Mode of React.
-* Publish new versions of WP packages.
-* Regenerate integrity checks to sha512.
-* Drop deprecations slated for 3.1 removal.
-* Upgrade React 16.3.2 to React 16.4.1.
+-   Implement Tips Interface to guide a user in the new editor interface.
+-   New design version of sibling inserter (the ability to insert blocks between other blocks).
+-   Allow users to re-enable Tips.
+-   Allow the user to preview changes to a published post without first updating the post.
+-   Show the preview mode for HTML blocks converted into shared blocks. This streamlines the process of creating straightforward HTML blocks and letting users insert them visually.
+-   Exclude the currently focused block from the block completer options. (i.e. don’t show paragraph as an option if already on a paragraph)
+-   Trigger autosave as standard save for draft by current user.
+-   Add mime type checking to the pre-upload error messaging system when uploading media.
+-   Allow block hover outlines to draw color from admin theme.
+-   Allow transforming multiple paragraph blocks into a single quote block.
+-   Block API: move useOnce block configuration to supports.multiple = false.
+-   Add strikethrough support for Markdown conversion when pasting.
+-   Add yAxis=middle support to Popover to allow showing arrows vertically centered for NUX tips.
+-   Add BlockIconWithColors component and use it for the block header with description in the inspector.
+-   Add error notices mechanism directly to media placeholder.
+-   Refactor the initialization of the editor to only require a post ID.
+-   Optimize the default column width for character length and use the same width for the text editor.
+-   Incremental improvements and polish to the mobile block toolbar.
+-   Visually compensate nested blocks for block padding.
+-   Prevent slash autocompleter from letting users insert two cases of a useOnce block.
+-   Let screen readers announce the block aria label.
+-   Improve the accessibility of featured images.
+-   Make aria-multiline true by default in RichText so the content field is properly announced.
+-   Add back role textbox to the List block and improve aria-multiline usage.
+-   Replace the renderBlockMenu prop with Slot/Fill.
+-   Hide disabled blocks from shortcut inserter.
+-   Avoid deprecated React Lifecycle hooks in withAPIData.
+-   Improve the element serializer to avoid double ampersand encoding of valid character references.
+-   Update drop-cap design to better balance line length.
+-   Describe expanded state of “more options” panel.
+-   Improve DotTip positioning fix.
+-   Implement Button component as assigning ref via forwardRef (new React API).
+-   Improve serialising JSON to PHP-compatible query strings.
+-   Introduce rendererPathWithAttributes() for ServerSideRender.
+-   Refactor the getPostEdits selector to avoid relying on Lodash’s \_.get.
+-   Refactor withSelect to use getDerivedStateFromProps.
+-   Replace JSON-escaped quotation mark with unicode escape sequence in Block API. Fixes PlainText component not properly escaping attributes under some specific user roles.
+-   Fix regression in Columns block’s front-end style.
+-   Fix regression in SVG support for block icons.
+-   Fix PHP 5.2 notice by ensuring $memo is always an array.
+-   Fix margins of embed block content.
+-   Fix autocomplete behaviour in IE11.
+-   Fix regression with formatting toolbar not showing divider between some block controls.
+-   Fix issue where pasting an inline shortcode would produce a separate shortcode block.
+-   Fix issue when copy pasting images in Chrome.
+-   Fix typos in code comments.
+-   Fix consistency of hover styles in toolbars.
+-   Fix option for linking to attachment page on gallery block.
+-   Fix Classic Editor adding paragraphs from block boundaries.
+-   Fix post publish panel showing incorrect UX for contributors who don’t have publishing capability.
+-   Fix issues with floats and the side UI on wide and full-wide.
+-   Fix issue where server side upload errors disappear automatically.
+-   Fix block inserter popover in RTL mode.
+-   Fix mp3 uploads on chrome.
+-   Fix getMimeTypesArray return documentation.
+-   Avoid showing error if autosave runs and there are no changes to save.
+-   Prevent any disabled button from changing the cursor to pointer.
+-   Remove ‘who’=>’authors’ compatibility shim as it’s part of WP 4.9.6.
+-   Remove confusing “wrap text” from Button settings.
+-   Remove the usage of the componentWillMount lifecycle.
+-   Remove the componentWillReceiveProps lifecycle usage.
+-   Remove createInnerBlockList utility / context. This should be a simplification of block context, potentially with some performance and/or memory improvements, as an intermediary component is no longer created.
+-   Improve translatable strings containing “%s” to have a translator comment.
+-   Move trash post URL change to the BrowserUrl component. Consolidates all browser navigation (url changes and actual navigation).
+-   Simplify the withColors HOC so we can avoid the usage of memoize while still having a correct implementation without unnecessary rerenders.
+-   Refactor Higher-order components in data module to avoid the use of componentWillMount.
+-   Use mdash for block description in cover image.
+-   Ensure that only the latest promise updates the autocompleter state for more predictable behaviour.
+-   Wrap PluginPostStatusInfo with PanelRow rather than Slot. Fix issue with hard to style divs.
+-   Update demo content to avoid dirtying embed.
+-   Allow using ServerSideRender component without defined attributes.
+-   Avoid loading Gutenberg assets in other admin pages.
+-   Add a new @wordpress/api-request package. Instead of relying on globals to set the nonce/rootURL, it users configurable middlewares. Preloading support is also built as a middleware.
+-   Move the Core Data Module to packages.
+-   Move Plugins module to packages.
+-   Rename all the hooks moved from blocks to editor.
+-   Add NUX e2e tests.
+-   Add e2e tests for Plugins API.
+-   Add es5 samples to edit-post and plugins.
+-   Add e2e test to blocks.BlockEdit filter.
+-   Add snapshot test for MoreMenu component.
+-   Fix broken links in readme files.
+-   Build tooling: add linting for package.json files.
+-   Further explanation for why .normalize() is optional in raw-handling.
+-   Update icon color readme example.
+-   Generate docs for the data module.
+-   Enable Strict-Mode of React.
+-   Publish new versions of WP packages.
+-   Regenerate integrity checks to sha512.
+-   Drop deprecations slated for 3.1 removal.
+-   Upgrade React 16.3.2 to React 16.4.1.
 
 = 3.0.1 =
 
-* Fix regression in Columns block's front-end style
-* Fix regression in SVG support for block icons
-* Build tooling: Add linting for package.json files
+-   Fix regression in Columns block's front-end style
+-   Fix regression in SVG support for block icons
+-   Build tooling: Add linting for package.json files
 
 = 3.0.0 =
 
-* Redesign the inserter with collapsible panels.
-* Add support for Child Blocks. These create a relationship between blocks and updates the inserter to show blocks based on context.
-* Implement a new block hover and select approach to improve nested block selection and clarity.
-* Allow expanding selection on consecutive Meta+A presses.
-* Add shared blocks to the blocks autocompleter.
-* Iterate on behaviour of the “between blocks inserter”.
-* Multiple longstanding fixes to the UrlInput box by using Popover component instead of custom positioning.
-* Allow themes to opt-in to the visual styles provided by core blocks.
-* Allow custom colors in block icons.
-* When focused on a parent with InnerBlocks set, show available child blocks clearly at the top. Blocks with children are marked visually in the root inserter.
-* Add publish panels support for plugins.
-* Scroll the inserter menu to the relevant position when opening a panel.
-* Expand matching categories when searching the block library.
-* Introduce a dedicated autosaves endpoint for handling autosave behavior. Improves general handling of revisions through REST API saves.
-* Show autosave notice when autosave exists.
-* Send all fields when transmitting an autosave, fixing missing titles.
-* Allow clicking the block’s input fields.
-* Move “Saved” blocks to the bottom and show distinct icon on the panel name.
-* Improve max-upload size error message.
-* Normalize unicode in raw handling.
-* Allow inserting a link with no text selected.
-* Center the background of the cover image block.
-* Make the Classic block toolbar sticky while scrolling.
-* Make Button component styles independent from Core Styles.
-* Use new "theme" style mechanism to restore Quote styles on the front.
-* Make various greys less dull when used with opacity.
-* Set the correct min-width for the ChromePicker popover.
-* Unify all the media blocks placeholders under a unique component.
-* Address focus style regression in menu and improve display of keyboard shortcut.
-* Refactor popover to clarify computations and address multiple cases of overflow issues.
-* Avoid URL redirect for published post autosave.
-* Refactor URL redirect as BrowserURL component and ensure redirect for new posts.
-* Avoid superfluous changes in RichText.
-* Improve performance for PublishPanel and extensions.
-* Unselect blocks when opening the document settings.
-* Add text alignment options to verse block toolbar.
-* Make sure the Title element uses the same max-width as blocks.
-* Improve title component so it works with and without editor styles.
-* Properly associate the spacer height input label.
-* Further visual polish to new inserter design.
-* Simplify inserter accessibility.
-* Fix block icon alignment in block inspector.
-* Fix issue with excerpt textarea height overflow.
-* Fix typo in withRehydration function call.
-* Fix Post Formats UI not showing.
-* Fix regressions with Button component after PostCSS.
-* Fix issue with applied formats being lost.
-* Fix unset background-color on sidebar headings.
-* Fix case where inbetweenserter would linger if you clicked to insert and then clicked away.
-* Fix issue with rich text toolbar being gone in captions.
-* Fix padding and outline style for expander panel.
-* Fix CodeEditor component not loading when WordPress is installed in a subfolder.
-* Fix regression with sticky toolbar border.
-* Fix some intermittent E2E test failures.
-* Fix “no results” message within inserter.
-* Fix visual issue with normal buttons with icons.
-* Fix issue where the sidebar would remain open on mobile when the page loaded if it was opened before.
-* Fix fileName not being respected when the image is uploaded via drag & drop.
-* Fix regression in spacer block.
-* Fix getInserterItems cache.
-* Fix intermittent adding-blocks E2E test failure.
-* Fix issue with shared block preview being rendered hidden.
-* Fix alignment issue with hover label on wide and full-wide.
-* Fix Windows-unfriendly theme.scss loader rule.
-* Fix issue where pasting would fail in IE11.
-* Fix issue with editing paragraph blocks in shared blocks.
-* Address small code style fixes on the core-data module.
-* Add support for getEntityRecords selectors/resolvers to the core data module to avoid duplication across the different entities.
-* Remove drag handle from block breadcrumb.
-* Improve Child Blocks code footprint.
-* Address package issues with npm audit fix.
-* Use Core’s TinyMCE version to avoid conflicts.
-* Scope the rule adding a white background to the html element.
-* Remove onFocus from core blocks’ RichText usage.
-* Remove post type capabilities from the user object.
-* Remove the dependency on the editor module code from blocks tests.
-* Expose preview_link through the REST API and use within client.
-* Only load Gutenberg Polyfill in editor pages.
-* Refine code statement of image classes.
-* Add support for the default_page_template_title filter in page-attributes meta-box.
-* Add additional condition to “Available templates” meta-box logic.
-* Ensure the wp-editor script is also enqueued soon using the enqueue_block_assets hook.
-* Cleanup shared block tests.
-* Provide cross-browser node containment checking.
-* Add unit tests for core-blocks/more/edit.js components.
-* Add documentation about ServerSideRender.
-* Auto-generate human-readable version of Gutenberg block grammar.
-* Doc Block cleanup for rich-text component.
-* Address multiple typos in code comments.
-* Skip test files when generating build folders for packages.
-* Fail E2E tests when uncaught page error occurs.
-* Extract new blob package out of utils module.
-* Update the wait function name to discourage its use in E2E tests.
-* Introduce new module with deprecation utility.
-* Introduce insertBlock() utility for E2E tests.
-* Move data module to the package maintained by Lerna.
-* Avoid using spread for objects to work with all node 8x versions.
-* Add lint rule to check that memize() is used.
-* Add global guard against ZWSP in E2E content retrieval.
-* Add building/watching support to Gutenberg packages.
-* Add further explanation for why .normalize() is optional.
-* Add new webpack plugin to handle library default export.
-* Reload the page after webpack watch compile.
-* Publish numerous WP packages updates from repository.
-* Drop deprecations slated for 3.0 removal.
-* Always publish main and module distributions in packages.
-* Upgrade mousetrap to 1.6.2.
-* Update all WordPress packages to the latest version.
-* Bump WordPress requirements to 4.9.6.
+-   Redesign the inserter with collapsible panels.
+-   Add support for Child Blocks. These create a relationship between blocks and updates the inserter to show blocks based on context.
+-   Implement a new block hover and select approach to improve nested block selection and clarity.
+-   Allow expanding selection on consecutive Meta+A presses.
+-   Add shared blocks to the blocks autocompleter.
+-   Iterate on behaviour of the “between blocks inserter”.
+-   Multiple longstanding fixes to the UrlInput box by using Popover component instead of custom positioning.
+-   Allow themes to opt-in to the visual styles provided by core blocks.
+-   Allow custom colors in block icons.
+-   When focused on a parent with InnerBlocks set, show available child blocks clearly at the top. Blocks with children are marked visually in the root inserter.
+-   Add publish panels support for plugins.
+-   Scroll the inserter menu to the relevant position when opening a panel.
+-   Expand matching categories when searching the block library.
+-   Introduce a dedicated autosaves endpoint for handling autosave behavior. Improves general handling of revisions through REST API saves.
+-   Show autosave notice when autosave exists.
+-   Send all fields when transmitting an autosave, fixing missing titles.
+-   Allow clicking the block’s input fields.
+-   Move “Saved” blocks to the bottom and show distinct icon on the panel name.
+-   Improve max-upload size error message.
+-   Normalize unicode in raw handling.
+-   Allow inserting a link with no text selected.
+-   Center the background of the cover image block.
+-   Make the Classic block toolbar sticky while scrolling.
+-   Make Button component styles independent from Core Styles.
+-   Use new "theme" style mechanism to restore Quote styles on the front.
+-   Make various greys less dull when used with opacity.
+-   Set the correct min-width for the ChromePicker popover.
+-   Unify all the media blocks placeholders under a unique component.
+-   Address focus style regression in menu and improve display of keyboard shortcut.
+-   Refactor popover to clarify computations and address multiple cases of overflow issues.
+-   Avoid URL redirect for published post autosave.
+-   Refactor URL redirect as BrowserURL component and ensure redirect for new posts.
+-   Avoid superfluous changes in RichText.
+-   Improve performance for PublishPanel and extensions.
+-   Unselect blocks when opening the document settings.
+-   Add text alignment options to verse block toolbar.
+-   Make sure the Title element uses the same max-width as blocks.
+-   Improve title component so it works with and without editor styles.
+-   Properly associate the spacer height input label.
+-   Further visual polish to new inserter design.
+-   Simplify inserter accessibility.
+-   Fix block icon alignment in block inspector.
+-   Fix issue with excerpt textarea height overflow.
+-   Fix typo in withRehydration function call.
+-   Fix Post Formats UI not showing.
+-   Fix regressions with Button component after PostCSS.
+-   Fix issue with applied formats being lost.
+-   Fix unset background-color on sidebar headings.
+-   Fix case where inbetweenserter would linger if you clicked to insert and then clicked away.
+-   Fix issue with rich text toolbar being gone in captions.
+-   Fix padding and outline style for expander panel.
+-   Fix CodeEditor component not loading when WordPress is installed in a subfolder.
+-   Fix regression with sticky toolbar border.
+-   Fix some intermittent E2E test failures.
+-   Fix “no results” message within inserter.
+-   Fix visual issue with normal buttons with icons.
+-   Fix issue where the sidebar would remain open on mobile when the page loaded if it was opened before.
+-   Fix fileName not being respected when the image is uploaded via drag & drop.
+-   Fix regression in spacer block.
+-   Fix getInserterItems cache.
+-   Fix intermittent adding-blocks E2E test failure.
+-   Fix issue with shared block preview being rendered hidden.
+-   Fix alignment issue with hover label on wide and full-wide.
+-   Fix Windows-unfriendly theme.scss loader rule.
+-   Fix issue where pasting would fail in IE11.
+-   Fix issue with editing paragraph blocks in shared blocks.
+-   Address small code style fixes on the core-data module.
+-   Add support for getEntityRecords selectors/resolvers to the core data module to avoid duplication across the different entities.
+-   Remove drag handle from block breadcrumb.
+-   Improve Child Blocks code footprint.
+-   Address package issues with npm audit fix.
+-   Use Core’s TinyMCE version to avoid conflicts.
+-   Scope the rule adding a white background to the html element.
+-   Remove onFocus from core blocks’ RichText usage.
+-   Remove post type capabilities from the user object.
+-   Remove the dependency on the editor module code from blocks tests.
+-   Expose preview_link through the REST API and use within client.
+-   Only load Gutenberg Polyfill in editor pages.
+-   Refine code statement of image classes.
+-   Add support for the default_page_template_title filter in page-attributes meta-box.
+-   Add additional condition to “Available templates” meta-box logic.
+-   Ensure the wp-editor script is also enqueued soon using the enqueue_block_assets hook.
+-   Cleanup shared block tests.
+-   Provide cross-browser node containment checking.
+-   Add unit tests for core-blocks/more/edit.js components.
+-   Add documentation about ServerSideRender.
+-   Auto-generate human-readable version of Gutenberg block grammar.
+-   Doc Block cleanup for rich-text component.
+-   Address multiple typos in code comments.
+-   Skip test files when generating build folders for packages.
+-   Fail E2E tests when uncaught page error occurs.
+-   Extract new blob package out of utils module.
+-   Update the wait function name to discourage its use in E2E tests.
+-   Introduce new module with deprecation utility.
+-   Introduce insertBlock() utility for E2E tests.
+-   Move data module to the package maintained by Lerna.
+-   Avoid using spread for objects to work with all node 8x versions.
+-   Add lint rule to check that memize() is used.
+-   Add global guard against ZWSP in E2E content retrieval.
+-   Add building/watching support to Gutenberg packages.
+-   Add further explanation for why .normalize() is optional.
+-   Add new webpack plugin to handle library default export.
+-   Reload the page after webpack watch compile.
+-   Publish numerous WP packages updates from repository.
+-   Drop deprecations slated for 3.0 removal.
+-   Always publish main and module distributions in packages.
+-   Upgrade mousetrap to 1.6.2.
+-   Update all WordPress packages to the latest version.
+-   Bump WordPress requirements to 4.9.6.
 
 = 2.9.2 =
 
-* Ensure the Title uses the same max-width as blocks
-* Center the background of the cover image block
-* Fix formatting controls regression
-* Fix classic editor visual mode regression
+-   Ensure the Title uses the same max-width as blocks
+-   Center the background of the cover image block
+-   Fix formatting controls regression
+-   Fix classic editor visual mode regression
 
 = 2.9.1 =
 
-* Ensure the wp-editor script is also enqueued soon using the `enqueue_block_assets` hook
-* Allow clicking the block's input fields (regression fix)
-* Remove post type capabilities from the user object
+-   Ensure the wp-editor script is also enqueued soon using the `enqueue_block_assets` hook
+-   Allow clicking the block's input fields (regression fix)
+-   Remove post type capabilities from the user object
 
 = 2.9.0 =
 
-* Add support for pinning plugin items in the main editor header. This is an important part of the editor Plugin API seeking to both grant plugins high visibility while offering users a consistent and flexible UI that can scale better.
-* Add shortcut tooltips for main toolbar.
-* Add remaining RichText shortcuts for formatting toolbar. Display them in tooltips.
-* Display the block toolbar and controls below the block on mobile.
-* Add automatic handling of focus for RichText component.
-* New reusable component: FontSizePicker. Example use in paragraph block.
-* Query for all authors with an unbounded per_page=-1 request. Makes sure no users appear missing.
-* Make the editor canvas friendly towards colored backgrounds. Improves support of nested structures over backgrounds as well.
-* Remove block alignment from paragraph block with deprecation handling.
-* Ensure contributors can create tags and manage categories.
-* Exclude private blocks from the slash autocompleter.
-* Close the post publish panel only when the post becomes dirty.
-* Add toggle to set fixed widths in Table block.
-* Surface and style the resizing tool in Table block.
-* Iterate on table block front-end styles.
-* Transform into the correct embed block based on URL patterns.
-* Allow resetting the permalink by saving it as empty.
-* Add text alignment options to Subhead block.
-* Move Heading block alignment options from the inspector to the toolbar.
-* Writing Flow: consider tabbable edge if no adjacent tabbable.
-* Implement Button as assigning ref via forwardRef.
-* Avoid adding terms when tabbing away from the tag selector field.
-* Add a max-height to Table of Contents menu.
-* Make any iframe embed responsive in the editor.
-* Update PostExcerpt component to use TextareaControl.
-* Show block remove button on empty paragraph blocks.
-* Introduce wp:action-publish and update corresponding UI to reference it. Use wp:action-publish to determine whether to display publish UI.
-* Use wp:action-assign-author to indicate if user can assign authors. Fixes issues with author selector not appearing under certain circumstances.
-* Permit unbounded per_page=-1 requests for Pages and Shared Blocks. Removes limit on how many items are retrieved.
-* Permit unbounded per_page=-1 requests for Categories and Tags.
-* Improve written descriptions of core blocks.
-* Show caption and description settings in featured image modal.
-* Make sidebar toggle button open the block inspector if a block is selected.
-* Avoid setting font-style when using dropcap.
-* Preserve image ID in raw handling.
-* Add a data store to manage the block/categories registration.
-* Avoid change in RichText when possible. It prevents unnecessary history records.
-* Stop unnecessary re-renders caused by withColors. Also solve memoize problems.
-* Move components from the blocks to the editor module.
-* Move editorMediaUpload to the editor module.
-* Move the editor settings into the editor’s store.
-* Change subhead block to subheading.
-* Add cache to getUserQueryResults and avoid authors rerender on every key press.
-* Rename isPrivate → supports.inserter in Block API.
-* Fix multi selection with arrows + shift.
-* Fix caretRangeFromPoint for Firefox.
-* Fix a PHP Notice in REST API responses.
-* Fix broken example in withAPIData README.
-* Fix issue with UrlInput autofocus when used in a custom block.
-* Fix issue with high contrast indicator in Edge.
-* Fix and update block fixture regeneration.
-* Fix gallery width to match width of other elements.
-* Fix Fragment render error on empty children.
-* Fix ServerSideRender bug with Columns block.
-* Fix block icon alignment.
-* Fix absent editor styles in Classic block.
-* Fix state variable name in core-data.
-* Fix generating admin schemes styles.
-* Fix captions on resized images.
-* Fix case where link modal would hide on rerender.
-* Fix paste with selection/caret at start or end.
-* Fix appender height to match paragraph block.
-* Use core-blocks prefix for class names.
-* Prevent classname override when passing className as argument.
-* Remove document outline from the sidebar.
-* Framework work to support React Native mobile app explorations:
-* Refactor the Code block .
-* Refactor “More” block.
-* Extract edit to their own file (part 1, part 2).
-* Use targetSchema of JSON Hyper Schema to communicate sticky action.
-* Tweak targetSchema Response for sticky posts.
-* Load additional REST API files if controller is defined.
-* Restore the wp-blocks stylesheet for backwards compatibility concerns.
-* Add documentation for title and modalClass props in MediaUpload.
-* Copy edits to theme extensibility.
-* Add a lint rule for enforcing ellipsis use.
-* Use a postcss plugin to generate the admin-schemes styles.
-* Move date module to packages maintained by Lerna. Move element to packages maintained by Lerna.
-* Extract dom package and make it maintained with Lerna.
-* Move blocks raw handling tests to test/integration folder.
-* Remove skipped tests which fail, enable those that pass.
-* Add missing unit test for received entity records.
-* Update Notice README.
-* Update wordcount package to prevent crash.
-* Update dom-react to 2.2.1.
-* Update React to 16.3.2.
-* Update packages to pass npm audit.
-* Upgrade rememo dependency to 3.0.0.
-* Updates the minimum required version of npm to version 6.0.0 or greater.
-* Update testing-overview document.
-* Update package-lock.json for fsevents.
-* Avoid tail-ing the PHP 5.2/3 build logs.
-* Remove Docker compose deprecated parallel option.
-* Remove fsevents from optionalDependencies.
-* Remove %s from Lerna publish message.
-* Deprecate isExtraSmall utility function.
-* Add npm update to build script.
-* Make lerna a dependency rather than a devDependency.
-* Support adding a human-readable deprecation hint.
-* Drop features slated for 2.9 removal.
-* Introduce the common build folder to be used by all modules.
+-   Add support for pinning plugin items in the main editor header. This is an important part of the editor Plugin API seeking to both grant plugins high visibility while offering users a consistent and flexible UI that can scale better.
+-   Add shortcut tooltips for main toolbar.
+-   Add remaining RichText shortcuts for formatting toolbar. Display them in tooltips.
+-   Display the block toolbar and controls below the block on mobile.
+-   Add automatic handling of focus for RichText component.
+-   New reusable component: FontSizePicker. Example use in paragraph block.
+-   Query for all authors with an unbounded per_page=-1 request. Makes sure no users appear missing.
+-   Make the editor canvas friendly towards colored backgrounds. Improves support of nested structures over backgrounds as well.
+-   Remove block alignment from paragraph block with deprecation handling.
+-   Ensure contributors can create tags and manage categories.
+-   Exclude private blocks from the slash autocompleter.
+-   Close the post publish panel only when the post becomes dirty.
+-   Add toggle to set fixed widths in Table block.
+-   Surface and style the resizing tool in Table block.
+-   Iterate on table block front-end styles.
+-   Transform into the correct embed block based on URL patterns.
+-   Allow resetting the permalink by saving it as empty.
+-   Add text alignment options to Subhead block.
+-   Move Heading block alignment options from the inspector to the toolbar.
+-   Writing Flow: consider tabbable edge if no adjacent tabbable.
+-   Implement Button as assigning ref via forwardRef.
+-   Avoid adding terms when tabbing away from the tag selector field.
+-   Add a max-height to Table of Contents menu.
+-   Make any iframe embed responsive in the editor.
+-   Update PostExcerpt component to use TextareaControl.
+-   Show block remove button on empty paragraph blocks.
+-   Introduce wp:action-publish and update corresponding UI to reference it. Use wp:action-publish to determine whether to display publish UI.
+-   Use wp:action-assign-author to indicate if user can assign authors. Fixes issues with author selector not appearing under certain circumstances.
+-   Permit unbounded per_page=-1 requests for Pages and Shared Blocks. Removes limit on how many items are retrieved.
+-   Permit unbounded per_page=-1 requests for Categories and Tags.
+-   Improve written descriptions of core blocks.
+-   Show caption and description settings in featured image modal.
+-   Make sidebar toggle button open the block inspector if a block is selected.
+-   Avoid setting font-style when using dropcap.
+-   Preserve image ID in raw handling.
+-   Add a data store to manage the block/categories registration.
+-   Avoid change in RichText when possible. It prevents unnecessary history records.
+-   Stop unnecessary re-renders caused by withColors. Also solve memoize problems.
+-   Move components from the blocks to the editor module.
+-   Move editorMediaUpload to the editor module.
+-   Move the editor settings into the editor’s store.
+-   Change subhead block to subheading.
+-   Add cache to getUserQueryResults and avoid authors rerender on every key press.
+-   Rename isPrivate → supports.inserter in Block API.
+-   Fix multi selection with arrows + shift.
+-   Fix caretRangeFromPoint for Firefox.
+-   Fix a PHP Notice in REST API responses.
+-   Fix broken example in withAPIData README.
+-   Fix issue with UrlInput autofocus when used in a custom block.
+-   Fix issue with high contrast indicator in Edge.
+-   Fix and update block fixture regeneration.
+-   Fix gallery width to match width of other elements.
+-   Fix Fragment render error on empty children.
+-   Fix ServerSideRender bug with Columns block.
+-   Fix block icon alignment.
+-   Fix absent editor styles in Classic block.
+-   Fix state variable name in core-data.
+-   Fix generating admin schemes styles.
+-   Fix captions on resized images.
+-   Fix case where link modal would hide on rerender.
+-   Fix paste with selection/caret at start or end.
+-   Fix appender height to match paragraph block.
+-   Use core-blocks prefix for class names.
+-   Prevent classname override when passing className as argument.
+-   Remove document outline from the sidebar.
+-   Framework work to support React Native mobile app explorations:
+-   Refactor the Code block .
+-   Refactor “More” block.
+-   Extract edit to their own file (part 1, part 2).
+-   Use targetSchema of JSON Hyper Schema to communicate sticky action.
+-   Tweak targetSchema Response for sticky posts.
+-   Load additional REST API files if controller is defined.
+-   Restore the wp-blocks stylesheet for backwards compatibility concerns.
+-   Add documentation for title and modalClass props in MediaUpload.
+-   Copy edits to theme extensibility.
+-   Add a lint rule for enforcing ellipsis use.
+-   Use a postcss plugin to generate the admin-schemes styles.
+-   Move date module to packages maintained by Lerna. Move element to packages maintained by Lerna.
+-   Extract dom package and make it maintained with Lerna.
+-   Move blocks raw handling tests to test/integration folder.
+-   Remove skipped tests which fail, enable those that pass.
+-   Add missing unit test for received entity records.
+-   Update Notice README.
+-   Update wordcount package to prevent crash.
+-   Update dom-react to 2.2.1.
+-   Update React to 16.3.2.
+-   Update packages to pass npm audit.
+-   Upgrade rememo dependency to 3.0.0.
+-   Updates the minimum required version of npm to version 6.0.0 or greater.
+-   Update testing-overview document.
+-   Update package-lock.json for fsevents.
+-   Avoid tail-ing the PHP 5.2/3 build logs.
+-   Remove Docker compose deprecated parallel option.
+-   Remove fsevents from optionalDependencies.
+-   Remove %s from Lerna publish message.
+-   Deprecate isExtraSmall utility function.
+-   Add npm update to build script.
+-   Make lerna a dependency rather than a devDependency.
+-   Support adding a human-readable deprecation hint.
+-   Drop features slated for 2.9 removal.
+-   Introduce the common build folder to be used by all modules.
 
 = 2.8.0 =
 
-* Add a pasting schema in raw content handling. It simplifies allowed tags and reduces the amount of filters run. Should improve reliability, clarity, markdown conversion, and usage in blocks.
-* Add “Spacer” block to create empty areas.
-* Add Server Side Render component.
-* Expand public InnerBlocks API with support for template configuration and allowedBlocks logic.
-* ColorPalette improvements:
-	* Implement mechanism to use classes for configured colors instead of inline styles. Use it in Button block as well.
-	* Use color name in ColorPalette aria-label for making color selection more accessible.
-	* Improve accessibility of PanelColor by announcing currently set color by name.
-	* Hide color pickers in paragraph and button if no colors are available.
-* Add a format prop to allow HTML string values to be used in RichText component. This should be a useful API addition for plugin developers.
-* Improve the make gallery modal and allow it to use the correct mode when editing.
-* Improve performance by avoiding creating a new uids prop on each block rerender.
-* Make sure createInnerBlockList never updates when passed using context.
-* Introduce initial “entities” data model abstraction to automatically build state selectors.
-* Hide the movers and the block menu when typing.
-* Optimize the shouldComponentUpdate path of withSelect.
-* Use support: align API in Columns block, fixes issue with alignment.
-* Filter the PostFormat list to those supported by the theme.
-* Used fallback styles to compute font size slider initial position.
-* Indent serialized block output with tabs as part of Block API.
-* Add a RichText.Content component to be used in conjunction with RichText.
-* Determine emptiness by value in RichText.
-* Call resolver isFulfilled once per argument set in data modules.
-* Extend BlockEdit context with name and use it for autocompleters.
-* Improve order of block shortcuts within inline inserter.
-* Improve terms token feedback and accessibility.
-* Introduce theme_supports with formats to REST API index.
-* Switch post-author component to use /wp/v2/users/?who=authors. Related #42202.
-* Further harden who=authors check by author support for post type.
-* Disable link suggestions when value is URL.
-* Make CodeEditor component more extensible.
-* Allow the new “block remove” button appear on focus.
-* Add new “pure” higher order component to wp/element.
-* Add Embed Preview support for classic embed providers. This handled legacy embeds.
-* Add missing label and focus style to the code editor textarea.
-* Introduce editorMediaUpload wrapper and fix issue with images not being attached to a post.
-* Used editorMediaUpload in Gallery files transform (images drag&drop).
-* Make URL creation mechanism smarter around relative links.
-* Add a type attribute to input elements.
-* Add missing custom class in latest posts & categories block.
-* Add visible label to shared block name input.
-* Add ref="noreferrer noopener" for target="_blank" links.
-* Add drop cap help text in paragraph block.
-* Remove the text alignment from the block inspector in Cover Image.
-* Make sure aria-disabled buttons (movers) stay disabled on focus.
-* Simplify the BlockBreadcrumb component and its semantics.
-* Only display featured image UI when theme supports it.
-* Improve display of URL input.
-* Improve consistency in how + icon is shown on the inserters.
-* Extract block library to separate module.
-* Improve handling of admin theme colors.
-* Avoid calculating the closest positioned parent by binding the RichText wrapper div.
-* Use IconButton on breadcrumbs to increase consistency and accessibility.
-* Reset change detection on post update, resolving an issue where changes made while a post is saving are not accurately reflected in change detection.
-* Hide inspector controls if no image is selected in Cover Image.
-* Minor improvements for the permalink “Copy to clipboard” button.
-* Fix scrolling issues with very long and multi-line captions.
-* Fix problem with front-end output of LatestsPosts block.
-* Fix issue with using zero min value in RangeControl.
-* Fix Markdown paste containing HTML.
-* Fix permalink linking to preview URL instead of live.
-* Fix issue with update button becoming invisible on mobile on already published posts.
-* Fix showing/hiding the right block side UI on RTL languages.
-* Fix Classic block regression after extraction of the blocks into a separate script.
-* Fix issue where when creating a new post would default to the block sidebar if it was opened before.
-* Fix issue when pasting content with inline shortcodes would produce a separate block.
-* Fix BlockEdit hooks not working properly with context.
-* Fix regression with select box.
-* Fix translation strings in embed block.
-* Fix regression with formatting button hover/focus style.
-* Fix arrow navigation in the shared block more options menu.
-* Fix orderby typo in latest posts block.
-* Fix the clipboard button as IconButton usage.
-* Restore hiding drop cap on focus to prevent bugs with contenteditable.
-* Restore priority on embed block for raw transforming.
-* Remove no longer mandatory use of isSelected in block edit.
-* Remove permalink_structure from REST API index as per #42465.
-* Remove old solution for focus after deprecation period.
-* Refactor withColors HOC to allow configuring the mapping when instantiating the component.
-* Refactor PanelColor to avoid the need for the colorName prop.
-* Use a “users” reducer combined with a “queries” sub state to map authors to users.
-* Make sure block assets are always registered before wp-edit-post script.
-* Expose Gutenberg Data Format version in the REST API response.
-* Split loading of API actions and filters to its own file.
-* Switch to rest_get_server() for compatibility with trunk.
-* Pre-load REST API index data to avoid flash of missing data.
-* Deprecate event proxying in RichText.
-* Avoid duplicate save request in shared block which could cause race conditions.
-* Update docs folder structure and make all internal handbook links relative.
-* Update theme extensibility documentation to include editor widths.
-* Add section about translating the plugin to the contributing doc.
-* Improve documentation and clarity of the Toolbar component.
-* Add documentation for undefined attribute source.
-* Add isDebounced prop in autocompleter doc.
-* Add arrow-spacing rule to eslint config.
-* Add arrow-parens rule to eslint config.
-* Enforce array as Lodash path argument.
-* Upgrade react-datepicker to 1.4.1.
-* Upgrade showdown to 1.8.6.
-* Drop deprecations slated for 2.8 removal.
-* Use the @wordpress/word-count package.
-* Use @wordpress/is-shallow-equal for shallow equality.
-* Build Tools: Fix the package plugin script.
-* Improve the G in Gutenberg ASCII
+-   Add a pasting schema in raw content handling. It simplifies allowed tags and reduces the amount of filters run. Should improve reliability, clarity, markdown conversion, and usage in blocks.
+-   Add “Spacer” block to create empty areas.
+-   Add Server Side Render component.
+-   Expand public InnerBlocks API with support for template configuration and allowedBlocks logic.
+-   ColorPalette improvements:
+    -   Implement mechanism to use classes for configured colors instead of inline styles. Use it in Button block as well.
+    -   Use color name in ColorPalette aria-label for making color selection more accessible.
+    -   Improve accessibility of PanelColor by announcing currently set color by name.
+    -   Hide color pickers in paragraph and button if no colors are available.
+-   Add a format prop to allow HTML string values to be used in RichText component. This should be a useful API addition for plugin developers.
+-   Improve the make gallery modal and allow it to use the correct mode when editing.
+-   Improve performance by avoiding creating a new uids prop on each block rerender.
+-   Make sure createInnerBlockList never updates when passed using context.
+-   Introduce initial “entities” data model abstraction to automatically build state selectors.
+-   Hide the movers and the block menu when typing.
+-   Optimize the shouldComponentUpdate path of withSelect.
+-   Use support: align API in Columns block, fixes issue with alignment.
+-   Filter the PostFormat list to those supported by the theme.
+-   Used fallback styles to compute font size slider initial position.
+-   Indent serialized block output with tabs as part of Block API.
+-   Add a RichText.Content component to be used in conjunction with RichText.
+-   Determine emptiness by value in RichText.
+-   Call resolver isFulfilled once per argument set in data modules.
+-   Extend BlockEdit context with name and use it for autocompleters.
+-   Improve order of block shortcuts within inline inserter.
+-   Improve terms token feedback and accessibility.
+-   Introduce theme_supports with formats to REST API index.
+-   Switch post-author component to use /wp/v2/users/?who=authors. Related #42202.
+-   Further harden who=authors check by author support for post type.
+-   Disable link suggestions when value is URL.
+-   Make CodeEditor component more extensible.
+-   Allow the new “block remove” button appear on focus.
+-   Add new “pure” higher order component to wp/element.
+-   Add Embed Preview support for classic embed providers. This handled legacy embeds.
+-   Add missing label and focus style to the code editor textarea.
+-   Introduce editorMediaUpload wrapper and fix issue with images not being attached to a post.
+-   Used editorMediaUpload in Gallery files transform (images drag&drop).
+-   Make URL creation mechanism smarter around relative links.
+-   Add a type attribute to input elements.
+-   Add missing custom class in latest posts & categories block.
+-   Add visible label to shared block name input.
+-   Add ref="noreferrer noopener" for target="\_blank" links.
+-   Add drop cap help text in paragraph block.
+-   Remove the text alignment from the block inspector in Cover Image.
+-   Make sure aria-disabled buttons (movers) stay disabled on focus.
+-   Simplify the BlockBreadcrumb component and its semantics.
+-   Only display featured image UI when theme supports it.
+-   Improve display of URL input.
+-   Improve consistency in how + icon is shown on the inserters.
+-   Extract block library to separate module.
+-   Improve handling of admin theme colors.
+-   Avoid calculating the closest positioned parent by binding the RichText wrapper div.
+-   Use IconButton on breadcrumbs to increase consistency and accessibility.
+-   Reset change detection on post update, resolving an issue where changes made while a post is saving are not accurately reflected in change detection.
+-   Hide inspector controls if no image is selected in Cover Image.
+-   Minor improvements for the permalink “Copy to clipboard” button.
+-   Fix scrolling issues with very long and multi-line captions.
+-   Fix problem with front-end output of LatestsPosts block.
+-   Fix issue with using zero min value in RangeControl.
+-   Fix Markdown paste containing HTML.
+-   Fix permalink linking to preview URL instead of live.
+-   Fix issue with update button becoming invisible on mobile on already published posts.
+-   Fix showing/hiding the right block side UI on RTL languages.
+-   Fix Classic block regression after extraction of the blocks into a separate script.
+-   Fix issue where when creating a new post would default to the block sidebar if it was opened before.
+-   Fix issue when pasting content with inline shortcodes would produce a separate block.
+-   Fix BlockEdit hooks not working properly with context.
+-   Fix regression with select box.
+-   Fix translation strings in embed block.
+-   Fix regression with formatting button hover/focus style.
+-   Fix arrow navigation in the shared block more options menu.
+-   Fix orderby typo in latest posts block.
+-   Fix the clipboard button as IconButton usage.
+-   Restore hiding drop cap on focus to prevent bugs with contenteditable.
+-   Restore priority on embed block for raw transforming.
+-   Remove no longer mandatory use of isSelected in block edit.
+-   Remove permalink_structure from REST API index as per #42465.
+-   Remove old solution for focus after deprecation period.
+-   Refactor withColors HOC to allow configuring the mapping when instantiating the component.
+-   Refactor PanelColor to avoid the need for the colorName prop.
+-   Use a “users” reducer combined with a “queries” sub state to map authors to users.
+-   Make sure block assets are always registered before wp-edit-post script.
+-   Expose Gutenberg Data Format version in the REST API response.
+-   Split loading of API actions and filters to its own file.
+-   Switch to rest_get_server() for compatibility with trunk.
+-   Pre-load REST API index data to avoid flash of missing data.
+-   Deprecate event proxying in RichText.
+-   Avoid duplicate save request in shared block which could cause race conditions.
+-   Update docs folder structure and make all internal handbook links relative.
+-   Update theme extensibility documentation to include editor widths.
+-   Add section about translating the plugin to the contributing doc.
+-   Improve documentation and clarity of the Toolbar component.
+-   Add documentation for undefined attribute source.
+-   Add isDebounced prop in autocompleter doc.
+-   Add arrow-spacing rule to eslint config.
+-   Add arrow-parens rule to eslint config.
+-   Enforce array as Lodash path argument.
+-   Upgrade react-datepicker to 1.4.1.
+-   Upgrade showdown to 1.8.6.
+-   Drop deprecations slated for 2.8 removal.
+-   Use the @wordpress/word-count package.
+-   Use @wordpress/is-shallow-equal for shallow equality.
+-   Build Tools: Fix the package plugin script.
+-   Improve the G in Gutenberg ASCII
 
 = 2.7.0 =
 
-* Add pagination block (handles page breaks core functionality).
-* Add left/right block hover areas for displaying contextual block tools. This aims to reduce the visual UI and make it more aware of intention when hovering around blocks.
-* Improve emulated caret positioning in writing flow, which places caret at the right position when clicking below the editor.
-* Several updates to link insertion interface:
-  * Restore the "Open in new window" setting.
-  * Remove the Unlink button. Instead, links can be removed by toggling off the Link button in the formatting toolbar.
-  * Move link settings to the left.
-  * Update suggested links dropdown design.
-  * Allow UI to expand to fit long URLs when not in editing mode.
-  * Improve visibility of insertion UI when selecting a link
-* Rework Classic block visual display to show old style toolbar. This aims to help clarify when you have content being displayed through a Classic block.
-* Add ability to edit post permalinks from the post title area.
-* Improve display of image placeholder buttons to accommodate i18n and smaller screens.
-* Add nesting support to document outline feature.
-* Refactor and expose PluginSidebar as final API.
-* Refactor and expose SidebarMoreMenuItem as part of Plugins API.
-* Simplify block development by leveraging context API to let block controls render on their own when a block is selected.
-* Add ability to manage innerBlocks while migrating deprecated blocks.
-* Add a "Skip link" to jump back from the inspector to the selected block.
-* Add preloading support to wp.apiRequest.
-* Add isFulfilled API for advanced resolver use cases in data module.
-* Add support for custom icon in Placeholder component.
-* Disable Drag & Drop into empty placeholders.
-* Refine the UI of the sides of a block.
-* Assure the "saved" message is shown for at least a second when meta-boxes are present.
-* Make sure block controls don't show over the sidebar on small viewport.
-* Add ability to manually set image dimensions.
-* Make Popover initial focus work with screen readers.
-* Improve Disabled component (disabled attribute, tabindex removal, pointer-events).
-* Improve visual display of captions within galleries.
-* Remove default font weight from Pullquote block.
-* Keep "advanced" block settings panel closed by default.
-* Use fallback styles to compute font size slider initial value.
-* Allow filtering of allowed_block_types based on post object.
-* Allow really long captions to scroll in galleries.
-* Redesign toggle switch UI component to add clarity.
-* Improve handling of empty containers in DOM utilities.
-* Filter out private taxonomies from sidebar UI.
-* Make input styles consistent.
-* Update inline "code" background color when part of multi-selection.
-* Replace TextControl with TextareaControl for image alt attribute.
-* Allow mod+shift+alt+m (toggle between Visual and Code modes) keyboard shortcut to work regardless of focus area and context.
-* Allow ctrl+backtick and ctrl+shift+backtick (navigate across regions) keyboard shortcuts to work regardless of focus area and context.
-* Improve Classic block accessibility by supporting keyboard (alt+f10 and arrows) navigation.
-* Apply wrapper div for RawHTML with non-children props.
-* Improve and clarify allowedBlockTypes in inserter.
-* Improve handling of block hover areas.
-* Improve figure widths and floats in imagery blocks, improving theming experience.
-* Eliminate obsolete call to onChange when RichText componentWillUnmount.
-* Unify styling of Read More and Pagination blocks.
-* Replace instances of smaller font with default font size.
-* Fix styling issue with nested blocks ghost.
-* Fix CSS bug that made it impossible to close the sidebar on mobile with meta-boxes present.
-* Fix disappearing input when adding link to image.
-* Fix issue with publish button text occasionally showing HTML entity.
-* Fix issue with side UI not showing as expected on selected blocks.
-* Fix sticky post saving when using meta-boxes.
-* Fix nested blocks' contextual toolbar not being fixed to top when requested.
-* Fix centered image caption toolbar on IE11.
-* Fix issue with meta-box saving case by only attempt apiRequest preload if path is set. Also improve tests for meta-boxes.
-* Fix JS error when wp.apiRequest has no preload data.
-* Fix regression with image link UI, and another.
-* Fix regression with columns appender.
-* Avoid focus losses in Shared block form.
-* Fix ability to select Embed blocks via clicking.
-* Fix handling of long strings in permalink container.
-* Fix resizing behavior of Image block upon browser resize.
-* Show Image block with external image URL and support resizing.
-* Fix hiding of update/publish confirmation notices under WP-Admin sidebar.
-* Fix ID and key generation in SelectControl and RadioControl components.
-* Fix z-index of link UI.
-* Fix default width of embeds in the editor.
-* Revert unintended changes in default font size handling on Paragraph.
-* Disable the Preview button when post type isn't viewable.
-* Remove unused variable.
-* Rename "advanced settings" in block menu to "block settings". Update labels and docs accordingly.
-* Improve description of embed blocks.
-* Default to empty object for previous defined wp-utils.
-* Finalize renaming of reusable blocks to shared blocks.
-* Update 20 components from the editor module to use wp.data's withSelect and withDispatch instead of react-redux's connect.
-* Update another batch of components from the editor module to use wp.data's tools.
-* Replace remaining uses of react-redux in the editor module.
-* Update a batch of core blocks to drop explicit management of isSelected thanks to new context API.
-* Attempt to avoid triggering modsec rules.
-* Use wp-components script handle to pass locale data to wp.i18n.
-* Reference lodash as an external module. This also reduces bundle size.
-* Use border-box on input and textarea within meta-boxes to restore radio buttons to normal appearance.
-* Clarify demo instructions on wide image support.
-* Update docs to address broken sketch file links.
-* Reduce and rename rules in Gutenberg block grammar for clarity.
-* Add test confirming that withFilters does not rerender.
-* Allow E2E tests to work in a larger variety of environments.
-* Add mention of JSON workaround to including structured data in attributes.
-* Document use of GitHub projects in Repository Management.
-* Fix some documentation links.
-* Add accessibility standards checkbox and reference to the project's pull request template.
-* Remove emoji script as it causes different issues. Pending resolution on how to introduce it back.
-* Avoid needing navigation timeout in Puppeteer.
-* Disable login screen autofocus in Puppeteer tests.
-* Allow developers to opt out from some devtool settings to speed up incremental builds.
-* Use the WordPress i18n package and remove the built-in implementation. Update to 1.1.0.
-* Remove deprecated function `getWrapperDisplayName`.
+-   Add pagination block (handles page breaks core functionality).
+-   Add left/right block hover areas for displaying contextual block tools. This aims to reduce the visual UI and make it more aware of intention when hovering around blocks.
+-   Improve emulated caret positioning in writing flow, which places caret at the right position when clicking below the editor.
+-   Several updates to link insertion interface:
+    -   Restore the "Open in new window" setting.
+    -   Remove the Unlink button. Instead, links can be removed by toggling off the Link button in the formatting toolbar.
+    -   Move link settings to the left.
+    -   Update suggested links dropdown design.
+    -   Allow UI to expand to fit long URLs when not in editing mode.
+    -   Improve visibility of insertion UI when selecting a link
+-   Rework Classic block visual display to show old style toolbar. This aims to help clarify when you have content being displayed through a Classic block.
+-   Add ability to edit post permalinks from the post title area.
+-   Improve display of image placeholder buttons to accommodate i18n and smaller screens.
+-   Add nesting support to document outline feature.
+-   Refactor and expose PluginSidebar as final API.
+-   Refactor and expose SidebarMoreMenuItem as part of Plugins API.
+-   Simplify block development by leveraging context API to let block controls render on their own when a block is selected.
+-   Add ability to manage innerBlocks while migrating deprecated blocks.
+-   Add a "Skip link" to jump back from the inspector to the selected block.
+-   Add preloading support to wp.apiRequest.
+-   Add isFulfilled API for advanced resolver use cases in data module.
+-   Add support for custom icon in Placeholder component.
+-   Disable Drag & Drop into empty placeholders.
+-   Refine the UI of the sides of a block.
+-   Assure the "saved" message is shown for at least a second when meta-boxes are present.
+-   Make sure block controls don't show over the sidebar on small viewport.
+-   Add ability to manually set image dimensions.
+-   Make Popover initial focus work with screen readers.
+-   Improve Disabled component (disabled attribute, tabindex removal, pointer-events).
+-   Improve visual display of captions within galleries.
+-   Remove default font weight from Pullquote block.
+-   Keep "advanced" block settings panel closed by default.
+-   Use fallback styles to compute font size slider initial value.
+-   Allow filtering of allowed_block_types based on post object.
+-   Allow really long captions to scroll in galleries.
+-   Redesign toggle switch UI component to add clarity.
+-   Improve handling of empty containers in DOM utilities.
+-   Filter out private taxonomies from sidebar UI.
+-   Make input styles consistent.
+-   Update inline "code" background color when part of multi-selection.
+-   Replace TextControl with TextareaControl for image alt attribute.
+-   Allow mod+shift+alt+m (toggle between Visual and Code modes) keyboard shortcut to work regardless of focus area and context.
+-   Allow ctrl+backtick and ctrl+shift+backtick (navigate across regions) keyboard shortcuts to work regardless of focus area and context.
+-   Improve Classic block accessibility by supporting keyboard (alt+f10 and arrows) navigation.
+-   Apply wrapper div for RawHTML with non-children props.
+-   Improve and clarify allowedBlockTypes in inserter.
+-   Improve handling of block hover areas.
+-   Improve figure widths and floats in imagery blocks, improving theming experience.
+-   Eliminate obsolete call to onChange when RichText componentWillUnmount.
+-   Unify styling of Read More and Pagination blocks.
+-   Replace instances of smaller font with default font size.
+-   Fix styling issue with nested blocks ghost.
+-   Fix CSS bug that made it impossible to close the sidebar on mobile with meta-boxes present.
+-   Fix disappearing input when adding link to image.
+-   Fix issue with publish button text occasionally showing HTML entity.
+-   Fix issue with side UI not showing as expected on selected blocks.
+-   Fix sticky post saving when using meta-boxes.
+-   Fix nested blocks' contextual toolbar not being fixed to top when requested.
+-   Fix centered image caption toolbar on IE11.
+-   Fix issue with meta-box saving case by only attempt apiRequest preload if path is set. Also improve tests for meta-boxes.
+-   Fix JS error when wp.apiRequest has no preload data.
+-   Fix regression with image link UI, and another.
+-   Fix regression with columns appender.
+-   Avoid focus losses in Shared block form.
+-   Fix ability to select Embed blocks via clicking.
+-   Fix handling of long strings in permalink container.
+-   Fix resizing behavior of Image block upon browser resize.
+-   Show Image block with external image URL and support resizing.
+-   Fix hiding of update/publish confirmation notices under WP-Admin sidebar.
+-   Fix ID and key generation in SelectControl and RadioControl components.
+-   Fix z-index of link UI.
+-   Fix default width of embeds in the editor.
+-   Revert unintended changes in default font size handling on Paragraph.
+-   Disable the Preview button when post type isn't viewable.
+-   Remove unused variable.
+-   Rename "advanced settings" in block menu to "block settings". Update labels and docs accordingly.
+-   Improve description of embed blocks.
+-   Default to empty object for previous defined wp-utils.
+-   Finalize renaming of reusable blocks to shared blocks.
+-   Update 20 components from the editor module to use wp.data's withSelect and withDispatch instead of react-redux's connect.
+-   Update another batch of components from the editor module to use wp.data's tools.
+-   Replace remaining uses of react-redux in the editor module.
+-   Update a batch of core blocks to drop explicit management of isSelected thanks to new context API.
+-   Attempt to avoid triggering modsec rules.
+-   Use wp-components script handle to pass locale data to wp.i18n.
+-   Reference lodash as an external module. This also reduces bundle size.
+-   Use border-box on input and textarea within meta-boxes to restore radio buttons to normal appearance.
+-   Clarify demo instructions on wide image support.
+-   Update docs to address broken sketch file links.
+-   Reduce and rename rules in Gutenberg block grammar for clarity.
+-   Add test confirming that withFilters does not rerender.
+-   Allow E2E tests to work in a larger variety of environments.
+-   Add mention of JSON workaround to including structured data in attributes.
+-   Document use of GitHub projects in Repository Management.
+-   Fix some documentation links.
+-   Add accessibility standards checkbox and reference to the project's pull request template.
+-   Remove emoji script as it causes different issues. Pending resolution on how to introduce it back.
+-   Avoid needing navigation timeout in Puppeteer.
+-   Disable login screen autofocus in Puppeteer tests.
+-   Allow developers to opt out from some devtool settings to speed up incremental builds.
+-   Use the WordPress i18n package and remove the built-in implementation. Update to 1.1.0.
+-   Remove deprecated function `getWrapperDisplayName`.
 
 = 2.6.0 =
 
-* Add drag and drop functionality to reorder blocks (in addition to arrow movers).
-* Improve side UI around nested groups and introduce a block name label on hover.
-* Focus the block inspector automatically when a block is selected.
-* Allow extending auto-completers via filters — this also exposes the "user" auto-complete to all RichText component instances, making it much easier to leverage for external blocks.
-* Use debounced search request in user auto-complete mechanism improving the experience of mentioning in sites with more than 100 users.
-* Use custom serializer for texturize compatibility. This removes dependency on react-dom/server and integrates better with wptexturize expectations.
-* Group advanced block settings (class name and anchor) in a panel.
-* Move Post Types Data Fetching to the core-data module.
-* Refactor DocumentOutline to use the data module.
-* Improve performance of drag and drop by avoiding excessive re-rendering.
-* Various UI improvements to controls and components in Block Inspector.
-* Remove react-redux usage from the edit-post module, replacing it with the data module. Also improves performance on some block operations.
-* Add role=menuitem to the More Options menu items.
-* Renamed "Frequent" to "Suggested" in block inserter tab.
-* Invert speak messages in block inspector button.
-* Include only known terms in rendered Terms selector, fixing issue with occasional empty tags.
-* Apply centering style to the theme style output.
-* Avoid term request if term set is empty array.
-* Provide createHigherOrderComponent helper to Element abstraction.
-* Reset block selection when replacing with empty set.
-* Prevent unnecessary state updates to edit-post preferences.
-* Update Sidebar and Menu Item implementations to use React 16.3 context API.
-* Generalise and comment on DOMRect calculation and storage.
-* Reopen sidebar when going to viewport sizes larger than medium.
-* Widen dropzone indicator to match block width.
-* Reset margin and padding values for gallery.
-* More defensive checks when accessing capabilities and terms.
-* Fix autosave condition while editing a post using the Text Mode editor.
-* Fix block movers aria-label info on multi-select groups.
-* Fix centered multiline labels in the block settings menu.
-* Fix issue with Publish button caused by moment timezone configuration.
-* Fix arrow movement inside search input in Inserter.
-* Fix broken translation in FormTokenField placeholder.
-* Fix issue with invalid string value passed to caption in Image block.
-* Fix findDOMNode lint warning.
-* Fix error when DOCKER is not defined.
-* Fix Safari flashing a white screen just before the editor is loaded.
-* Fix problem with meta-boxes toggling.
-* Fix WordCounter error when loading meta boxes.
-* Fix clone function to allow cloning nested blocks.
-* Fix issue with meta-boxes and file inputs.
-* Fix issue with block more button when multi selected.
-* Handle post ID and WP_Post objects passed to gutenberg_can_edit_post().
-* Clear attribute and reset text back to default when cleared in the "More" block.
-* Remove an invalid test case from isCurrentPostScheduled.
-* Remove code transform for uppercase text in Tooltip component.
-* Remove unused PrismJS dependency.
-* Remove redundant z-index in block mover.
-* Remove background color from paragraph and fixed contrast checker on transparent colors.
-* Make block preview title translatable.
-* Make the click-redirector responsive (handles clicking on the bottom area of the editor to focus on last field).
-* Replace cases of bold font weight with weight 600.
-* Various Sass code improvements.
-* Add E2E test for splitting/merging paragraph blocks with Enter/Backspace.
-* Add test to check CPT templates initialization in E2E tests.
-* Add helpers to install/activate/deactivate and remove plugins in E2E tests.
-* Re-incorporate Webpack devtool into development build for improved debugging.
-* Add $HOME/.npm to Travis cache after addition of Puppeteer library.
-* Improve MediaUpload docs.
-* Rework all the extensibility related docs to add structure and clarity.
-* Remove deprecations slated for 2.6.
-* Upgrade React to version 16.3.0.
-* Migrate to Webpack 4.
+-   Add drag and drop functionality to reorder blocks (in addition to arrow movers).
+-   Improve side UI around nested groups and introduce a block name label on hover.
+-   Focus the block inspector automatically when a block is selected.
+-   Allow extending auto-completers via filters — this also exposes the "user" auto-complete to all RichText component instances, making it much easier to leverage for external blocks.
+-   Use debounced search request in user auto-complete mechanism improving the experience of mentioning in sites with more than 100 users.
+-   Use custom serializer for texturize compatibility. This removes dependency on react-dom/server and integrates better with wptexturize expectations.
+-   Group advanced block settings (class name and anchor) in a panel.
+-   Move Post Types Data Fetching to the core-data module.
+-   Refactor DocumentOutline to use the data module.
+-   Improve performance of drag and drop by avoiding excessive re-rendering.
+-   Various UI improvements to controls and components in Block Inspector.
+-   Remove react-redux usage from the edit-post module, replacing it with the data module. Also improves performance on some block operations.
+-   Add role=menuitem to the More Options menu items.
+-   Renamed "Frequent" to "Suggested" in block inserter tab.
+-   Invert speak messages in block inspector button.
+-   Include only known terms in rendered Terms selector, fixing issue with occasional empty tags.
+-   Apply centering style to the theme style output.
+-   Avoid term request if term set is empty array.
+-   Provide createHigherOrderComponent helper to Element abstraction.
+-   Reset block selection when replacing with empty set.
+-   Prevent unnecessary state updates to edit-post preferences.
+-   Update Sidebar and Menu Item implementations to use React 16.3 context API.
+-   Generalise and comment on DOMRect calculation and storage.
+-   Reopen sidebar when going to viewport sizes larger than medium.
+-   Widen dropzone indicator to match block width.
+-   Reset margin and padding values for gallery.
+-   More defensive checks when accessing capabilities and terms.
+-   Fix autosave condition while editing a post using the Text Mode editor.
+-   Fix block movers aria-label info on multi-select groups.
+-   Fix centered multiline labels in the block settings menu.
+-   Fix issue with Publish button caused by moment timezone configuration.
+-   Fix arrow movement inside search input in Inserter.
+-   Fix broken translation in FormTokenField placeholder.
+-   Fix issue with invalid string value passed to caption in Image block.
+-   Fix findDOMNode lint warning.
+-   Fix error when DOCKER is not defined.
+-   Fix Safari flashing a white screen just before the editor is loaded.
+-   Fix problem with meta-boxes toggling.
+-   Fix WordCounter error when loading meta boxes.
+-   Fix clone function to allow cloning nested blocks.
+-   Fix issue with meta-boxes and file inputs.
+-   Fix issue with block more button when multi selected.
+-   Handle post ID and WP_Post objects passed to gutenberg_can_edit_post().
+-   Clear attribute and reset text back to default when cleared in the "More" block.
+-   Remove an invalid test case from isCurrentPostScheduled.
+-   Remove code transform for uppercase text in Tooltip component.
+-   Remove unused PrismJS dependency.
+-   Remove redundant z-index in block mover.
+-   Remove background color from paragraph and fixed contrast checker on transparent colors.
+-   Make block preview title translatable.
+-   Make the click-redirector responsive (handles clicking on the bottom area of the editor to focus on last field).
+-   Replace cases of bold font weight with weight 600.
+-   Various Sass code improvements.
+-   Add E2E test for splitting/merging paragraph blocks with Enter/Backspace.
+-   Add test to check CPT templates initialization in E2E tests.
+-   Add helpers to install/activate/deactivate and remove plugins in E2E tests.
+-   Re-incorporate Webpack devtool into development build for improved debugging.
+-   Add $HOME/.npm to Travis cache after addition of Puppeteer library.
+-   Improve MediaUpload docs.
+-   Rework all the extensibility related docs to add structure and clarity.
+-   Remove deprecations slated for 2.6.
+-   Upgrade React to version 16.3.0.
+-   Migrate to Webpack 4.
 
 = 2.5.0 =
 
-* Add support for sharing nested blocks.
-* Introduce a declarative approach to handling display of sidebar content to the Plugin API with PluginSidebar component and portals.
-* Introduce menu item and related components to handle entry point for editor plugin operations, further extending capabilities and available tools in the Plugin API.
-* Add block template validation and ability to reset a template.
-* Add new abstracted data querying interface that provides better handling of declarative data needs and side effects. Introduces registerResolvers enhanced by withSelect.
-* Add predefined sets of font sizes and corresponding UI controls.
-* Improve block margin implementation in order to simplify work needed for nesting blocks.
-* Don't show insertion point between blocks when a template is locked.
-* Update shared block UI to better indicate that a block is reusable.
-* Add support for transforms prioritization to the block API.
-* Improve initial focus allocation within content structure popover for accessibility.
-* Add visibile text to gallery "add item" button for accessibility.
-* Update post taxonomies wp.apiRequest to not depend on ajax specific implementation.
-* Some visual refinements to the main block library inserter.
-* Include custom classes in the block markup within the editor, matching the final render on the front-end.
-* Improve display of block transformation options.
-* Fine-tune the pre- and post-publish flows depending on post status and user role.
-* Improve the accessibility of the MenuItemsToggle buttons and add a speak message for screen reader users to confirm when they switch editor mode.
-* Improve the accessibility of RichText elements by providing textbox roles and aria-multiline attributes.
-* Improve the accessibility of inserter items by providing aria-label attributes.
-* Clear selected block on canvas focus only if it is selected.
-* Avoid styling meta-boxes inputs to look like Gutenberg UI.
-* Use "perfect fourth" rule of typographic scale for heading display.
-* Inherit color styling on meta-boxes area.
-* Increase width of meta-boxes area.
-* Default to content-box box-sizing for the meta-box area.
-* Improve handling of transformations (backticks for Code and dashes for Separator) when pressing enter.
-* Expose combineReducer helper in data module.
-* Make it possible to override the default class name generation logic.
-* Remove edit-post styles from editor components.
-* Ignore mid-word underscores when pasting markdown text.
-* Add label element to the post title.
-* Improve block mover labels for speech recognition software.
-* Correct onChange handler in SelectControl component to support multi-value changes.
-* Make MediaUpload component extensible.
-* Improve display of color palette items (like white) by adding a subtle transparent inset shadow.
-* Ignore "Disable visual editor" setting to address case where Classic block would not load for the user.
-* Improve display of sidebar heights on mobile.
-* Update blockSelection reducer to clear selection when removing the selected block.
-* Show "no title" placeholder on the mobile sidebar when post title is empty.
-* Address case where cancelling edits on a shared block not discarding unsaved changes that have been made to that block.
-* Introduce new MenuGroup and MenuItem components and refactor for clarity.
-* Improve the block inserter UI on mobile by displaying the post title in a header above the search bar. Extends as optional support for all popovers.
-* Refactor media fetching to use the core data module. Shields from REST API specific nomenclature.
-* Add a label and a role to the block appender to make it discoverable by text readers.
-* Use up and down arrow icons for the meta boxes panels.
-* Hide reusable block indicator from the inserter preview.
-* Fix issue with embed placeholder breaking on reload.
-* Fix error when collapsing categories panel.
-* Fix case where inserting a block after removal inserts it at the top of the post.
-* Fix issue with Button block text wrap.
-* Fix bug with meta-boxes data collection that occasionally prevented them from showing.
-* Fix meta-box configuration persistence to be per postType.
-* Fix issue with multiple previews in Firefox by unsetting popup window upon close.
-* Fix scroll bleed when displaying modal UI on mobile.
-* Fix z-index issue with admin bar quick links and content structure tooltip.
-* Fix image href attribute matcher to not interfere with anchors inside the caption.
-* Fix help text position on toggle control and range control.
-* Fix centering of small videos.
-* Fix timezone conflicts when setting global moment default timezone.
-* Fix issue with getDocumentTitle and undefined titles.
-* Fix missing rerender of plugin area upon registration or unregistration.
-* Remove title from Table of Contents and warn user if theme doesn't support titles.
-* Prevent potential fatal error when registering shared block post type if a specific core user role has been removed.
-* Avoid collecting meta-box information on non-Gutenberg screens.
-* Update contrast checker to respect recent changes on Notice component.
-* Rename isProvisionalBlock action property to selectPrevious in removeBlock and removeBlocks functions.
-* Address issue with heartbeat dependency (only use when available).
-* Allow calling functions passed as props in the Fill.
-* Improve style handling and specificity of dashicon SVGs.
-* Unify "citation" translatable strings for quotes and pullquotes.
-* Clean up nomenclature inconsistencies in blocks and components modules.
-* Correct documentation example for withDispatch.
-* Update documentation on extending the editor via PluginSidebar and PluginMoreMenuItem.
-* Dynamically pick JS/CSS build files for plugin ZIP generation.
-* Copy improvements to documentation.
-* Attempt to avoid cases where hosts block certain HTTP verbs on wp-api.js requests. This is part of similar issues being exposed by Gutenberg being the first Core WordPress feature that makes significant use of the REST API.
-* Add a shim to override wp.apiRequest, allowing HTTP/1.0 emulation.
-* Update react-autosize-textarea package.
-* Update @wordpress/hooks to v1.1.6.
-* Use CustomTemplatedPathPlugin which was extracted and updated for Webpack 4.
-* Use wordpress/es6 ESLint config.
-* Add Gutenberg Hub to the resources.
-* Properly detect NVM path on macOS using homebrew.
-* Remove Cypress for E2E testing in favor of Puppeteer. Refactor all existing tests and integrations.
-* Remove deprecations slated for 2.5.0 removal.
+-   Add support for sharing nested blocks.
+-   Introduce a declarative approach to handling display of sidebar content to the Plugin API with PluginSidebar component and portals.
+-   Introduce menu item and related components to handle entry point for editor plugin operations, further extending capabilities and available tools in the Plugin API.
+-   Add block template validation and ability to reset a template.
+-   Add new abstracted data querying interface that provides better handling of declarative data needs and side effects. Introduces registerResolvers enhanced by withSelect.
+-   Add predefined sets of font sizes and corresponding UI controls.
+-   Improve block margin implementation in order to simplify work needed for nesting blocks.
+-   Don't show insertion point between blocks when a template is locked.
+-   Update shared block UI to better indicate that a block is reusable.
+-   Add support for transforms prioritization to the block API.
+-   Improve initial focus allocation within content structure popover for accessibility.
+-   Add visibile text to gallery "add item" button for accessibility.
+-   Update post taxonomies wp.apiRequest to not depend on ajax specific implementation.
+-   Some visual refinements to the main block library inserter.
+-   Include custom classes in the block markup within the editor, matching the final render on the front-end.
+-   Improve display of block transformation options.
+-   Fine-tune the pre- and post-publish flows depending on post status and user role.
+-   Improve the accessibility of the MenuItemsToggle buttons and add a speak message for screen reader users to confirm when they switch editor mode.
+-   Improve the accessibility of RichText elements by providing textbox roles and aria-multiline attributes.
+-   Improve the accessibility of inserter items by providing aria-label attributes.
+-   Clear selected block on canvas focus only if it is selected.
+-   Avoid styling meta-boxes inputs to look like Gutenberg UI.
+-   Use "perfect fourth" rule of typographic scale for heading display.
+-   Inherit color styling on meta-boxes area.
+-   Increase width of meta-boxes area.
+-   Default to content-box box-sizing for the meta-box area.
+-   Improve handling of transformations (backticks for Code and dashes for Separator) when pressing enter.
+-   Expose combineReducer helper in data module.
+-   Make it possible to override the default class name generation logic.
+-   Remove edit-post styles from editor components.
+-   Ignore mid-word underscores when pasting markdown text.
+-   Add label element to the post title.
+-   Improve block mover labels for speech recognition software.
+-   Correct onChange handler in SelectControl component to support multi-value changes.
+-   Make MediaUpload component extensible.
+-   Improve display of color palette items (like white) by adding a subtle transparent inset shadow.
+-   Ignore "Disable visual editor" setting to address case where Classic block would not load for the user.
+-   Improve display of sidebar heights on mobile.
+-   Update blockSelection reducer to clear selection when removing the selected block.
+-   Show "no title" placeholder on the mobile sidebar when post title is empty.
+-   Address case where cancelling edits on a shared block not discarding unsaved changes that have been made to that block.
+-   Introduce new MenuGroup and MenuItem components and refactor for clarity.
+-   Improve the block inserter UI on mobile by displaying the post title in a header above the search bar. Extends as optional support for all popovers.
+-   Refactor media fetching to use the core data module. Shields from REST API specific nomenclature.
+-   Add a label and a role to the block appender to make it discoverable by text readers.
+-   Use up and down arrow icons for the meta boxes panels.
+-   Hide reusable block indicator from the inserter preview.
+-   Fix issue with embed placeholder breaking on reload.
+-   Fix error when collapsing categories panel.
+-   Fix case where inserting a block after removal inserts it at the top of the post.
+-   Fix issue with Button block text wrap.
+-   Fix bug with meta-boxes data collection that occasionally prevented them from showing.
+-   Fix meta-box configuration persistence to be per postType.
+-   Fix issue with multiple previews in Firefox by unsetting popup window upon close.
+-   Fix scroll bleed when displaying modal UI on mobile.
+-   Fix z-index issue with admin bar quick links and content structure tooltip.
+-   Fix image href attribute matcher to not interfere with anchors inside the caption.
+-   Fix help text position on toggle control and range control.
+-   Fix centering of small videos.
+-   Fix timezone conflicts when setting global moment default timezone.
+-   Fix issue with getDocumentTitle and undefined titles.
+-   Fix missing rerender of plugin area upon registration or unregistration.
+-   Remove title from Table of Contents and warn user if theme doesn't support titles.
+-   Prevent potential fatal error when registering shared block post type if a specific core user role has been removed.
+-   Avoid collecting meta-box information on non-Gutenberg screens.
+-   Update contrast checker to respect recent changes on Notice component.
+-   Rename isProvisionalBlock action property to selectPrevious in removeBlock and removeBlocks functions.
+-   Address issue with heartbeat dependency (only use when available).
+-   Allow calling functions passed as props in the Fill.
+-   Improve style handling and specificity of dashicon SVGs.
+-   Unify "citation" translatable strings for quotes and pullquotes.
+-   Clean up nomenclature inconsistencies in blocks and components modules.
+-   Correct documentation example for withDispatch.
+-   Update documentation on extending the editor via PluginSidebar and PluginMoreMenuItem.
+-   Dynamically pick JS/CSS build files for plugin ZIP generation.
+-   Copy improvements to documentation.
+-   Attempt to avoid cases where hosts block certain HTTP verbs on wp-api.js requests. This is part of similar issues being exposed by Gutenberg being the first Core WordPress feature that makes significant use of the REST API.
+-   Add a shim to override wp.apiRequest, allowing HTTP/1.0 emulation.
+-   Update react-autosize-textarea package.
+-   Update @wordpress/hooks to v1.1.6.
+-   Use CustomTemplatedPathPlugin which was extracted and updated for Webpack 4.
+-   Use wordpress/es6 ESLint config.
+-   Add Gutenberg Hub to the resources.
+-   Properly detect NVM path on macOS using homebrew.
+-   Remove Cypress for E2E testing in favor of Puppeteer. Refactor all existing tests and integrations.
+-   Remove deprecations slated for 2.5.0 removal.
 
 = 2.4.0 =
 
-* Show the full block inserter (+ button) to the left of empty paragraphs and the default appender. Quick block options (based on compound frequency and recency) remain on the right.
-* Insert default block as provisional — this reduces the proliferation of empty blocks as the editor removes these provisional blocks when unfocusing.
-* When pressing enter from post title, insert initial block as provisional.
-* Fade out the side inserter when typing on the newly created block.
-* Group common block definition on inserters. Use 'frecency' to sort items on top of it.
-* Improve the visual focus style for inbetween inserter.
-* Move isTyping behaviour to a separate component.
-* Inserting a block should only shift focus to a text field, otherwise focusing the block's "focus stop".
-* Example: Inserting an image should focus the top-level placeholder.
-* Pressing backspace or enter from the block's focus stop should respectively delete or insert a subsequent paragraph block.
-* Example: Pressing enter or delete on an image placeholder.
-* Pressing down arrow from a non-text-field should proceed with a tab transition as expected.
-* Multi-selection at the last text field in a block now accounts for non-contenteditable text fields.
-* Better internal identification of text fields for writing flow transitions. Previously, if a block contained a checkbox, radio, or other non-text input tags, they would be erroneously included in the writing flow sequence.
-* Inserting paragraph block (quote, etc; those with text fields) via autocomplete should move focus to the cursor.
-* Shift-arrow from a text field engages multi-selection, but not if there are other text fields in the intended direction in the same block.
-* Cancel isTyping state when focusing non text field.
-* Improve reliability of the block click-to-clear behavior.
-* When clicking below the editor move focus to last text field — this includes creating a new provisional block if last block is not text. This is equivalent to the default block appender spanning the entire viewport height of the editable canvas.
-* Introduce same undo buffering for general text to the post title (and other post properties).
-* Allow breaking out of List block upon Enter on last empty line.
-* Address conflicts between WritingFlow's selection transitioning and nested blocks by moving selection to the block's focus handler.
-* Improve reusable block creation flow by focusing the title field and allowing the user to name their block immediately.
-* Avoid calling callbacks on DropZone component if a file is dropped on another dropzone.
-* Improve settings UI on mobile devices.
-* Allow text to wrap within Button block.
-* Restrict Popover focusOnMount to keyboard interaction. This seeks to improve the experience of interacting with popovers and popover menus based on usability and accessibility concerns.
-* Optimize the behavior of subscribe to avoid calling a listener except in the case that state has in-fact changed.
-* Move the behaviors to transition focus to a newly selected block from the WritingFlow component to the BlockListBlock component.
-* Extract scroll preservation from BlockList as non-visual component
-* Add Upload button to audio and video blocks.
-* Refactor image uploads and added auto-filled captions using the image metadata.
-* Limit CSS rules for lists to the visual editor area.
-* Add aria-label to the post title.
-* Add new distinctive icon for Cover Image block.
-* Refactor PostTitle for easier select, deselect.
-* Use ifViewportMatches HoC to render BlockMobileToolbar as appropriate.
-* Introduce a new reusable Disabled component which intends to manage all field disabling automatically.
-* Expand editor canvas as flex region improving deselect behaviour.
-* Bump minimum font-size to 13px.
-* Allow emojis to be displayed in permalink visual component.
-* Respect HTML when readding paragraph-tags.
-* Allow undefined return from withSelect mapSelectToProps.
-* Update datepicker styling to inherit font-family/colour scheme.
-* Move QueryControls and expose them for general use under components module.
-* Address design issues with block dialog warnings on blocks that are too tall.
-* Preserve "More" order during block conversion.
-* Add capabilities handling for reusable blocks mapping to default roles.
-* Add a "Write your story" filter.
-* Return focus from Toolbar to selection when escape is pressed.
-* Improve keyboard interaction on inserter tab panels.
-* Simplify state management for the sidebar to make it easier to maintain.
-* Update cover image markup and CSS.
-* Fix sent parameter in onChange function of CheckboxControl.
-* Fix errors in some localized strings.
-* Fix problem with arrow navigation within Block Menu buttons.
-* Fix issue with demo page being marked immediately as unsaved (and the subsequent autosave).
-* Fix issue with a Reusable Blocks being keyboard navigable even when it is not supposed to be edited.
-* Fix focusable matching elements with "contenteditable=false".
-* Fix issue with empty paragraphs appearing after images when the images are inside an anchor.
-* Fix issue when a block cannot be removed after being transformed into another block type.
-* Fix issue with updating the author on published posts.
-* Fix edgecases in Windows high contrast mode.
-* Fix regression with inserter tabs colors.
-* Fix handling of HTML captions on gallery and image.
-* Fix heading subscript regression.
-* Resolve a performance regression caused by a bailout condition in our chosen shallow-equality library.
-* Handle calculateFrequency edge case on upgrading.
-* Use lodash includes in NavigableMenu to address IE11 issue.
-* Refer to reusable blocks as 'Shared Blocks'.
-* Add domain argument to localization functions. Allow setting locale data by domain.
-* Update localization functions to absorb errors from Jed.
-* Make UrlInput a controlled component.
-* Decode HTML entities in placeholders.
-* Only allow whitespace around URL when attempting to transform pasted Embeds.
-* Make preferences reducer deterministic.
-* Remove max-width for meta boxes area inputs.
-* Default to content-box box-sizing for the metabox area.
-* Adjust inside padding of meta boxes to better accommodate plugins.
-* Remove !important clauses from button styles.
-* Keep update button enabled when there are metaboxes present.
-* Clarify some inner workings of Block API functionality with comments.
-* Rewrite data document as a walkthrough of wordpress/data.
-* Revert the eslint --fix Git precommit hook.
-* Extract shared eslint config.
-* Add tests for the BlockSwitcher component.
-* Add test cases for REQUEST_POST_UPDATE_FAILURE effect.
-* Fail the build via ESLint error when deprecations marked for removal in a given version change are not removed.
-* Update redux-optmist to 1.0.0.
-* Update package-lock.json.
-* Remove Deprecated Features planned for this release and start documenting them in a deprecated document.
+-   Show the full block inserter (+ button) to the left of empty paragraphs and the default appender. Quick block options (based on compound frequency and recency) remain on the right.
+-   Insert default block as provisional — this reduces the proliferation of empty blocks as the editor removes these provisional blocks when unfocusing.
+-   When pressing enter from post title, insert initial block as provisional.
+-   Fade out the side inserter when typing on the newly created block.
+-   Group common block definition on inserters. Use 'frecency' to sort items on top of it.
+-   Improve the visual focus style for inbetween inserter.
+-   Move isTyping behaviour to a separate component.
+-   Inserting a block should only shift focus to a text field, otherwise focusing the block's "focus stop".
+-   Example: Inserting an image should focus the top-level placeholder.
+-   Pressing backspace or enter from the block's focus stop should respectively delete or insert a subsequent paragraph block.
+-   Example: Pressing enter or delete on an image placeholder.
+-   Pressing down arrow from a non-text-field should proceed with a tab transition as expected.
+-   Multi-selection at the last text field in a block now accounts for non-contenteditable text fields.
+-   Better internal identification of text fields for writing flow transitions. Previously, if a block contained a checkbox, radio, or other non-text input tags, they would be erroneously included in the writing flow sequence.
+-   Inserting paragraph block (quote, etc; those with text fields) via autocomplete should move focus to the cursor.
+-   Shift-arrow from a text field engages multi-selection, but not if there are other text fields in the intended direction in the same block.
+-   Cancel isTyping state when focusing non text field.
+-   Improve reliability of the block click-to-clear behavior.
+-   When clicking below the editor move focus to last text field — this includes creating a new provisional block if last block is not text. This is equivalent to the default block appender spanning the entire viewport height of the editable canvas.
+-   Introduce same undo buffering for general text to the post title (and other post properties).
+-   Allow breaking out of List block upon Enter on last empty line.
+-   Address conflicts between WritingFlow's selection transitioning and nested blocks by moving selection to the block's focus handler.
+-   Improve reusable block creation flow by focusing the title field and allowing the user to name their block immediately.
+-   Avoid calling callbacks on DropZone component if a file is dropped on another dropzone.
+-   Improve settings UI on mobile devices.
+-   Allow text to wrap within Button block.
+-   Restrict Popover focusOnMount to keyboard interaction. This seeks to improve the experience of interacting with popovers and popover menus based on usability and accessibility concerns.
+-   Optimize the behavior of subscribe to avoid calling a listener except in the case that state has in-fact changed.
+-   Move the behaviors to transition focus to a newly selected block from the WritingFlow component to the BlockListBlock component.
+-   Extract scroll preservation from BlockList as non-visual component
+-   Add Upload button to audio and video blocks.
+-   Refactor image uploads and added auto-filled captions using the image metadata.
+-   Limit CSS rules for lists to the visual editor area.
+-   Add aria-label to the post title.
+-   Add new distinctive icon for Cover Image block.
+-   Refactor PostTitle for easier select, deselect.
+-   Use ifViewportMatches HoC to render BlockMobileToolbar as appropriate.
+-   Introduce a new reusable Disabled component which intends to manage all field disabling automatically.
+-   Expand editor canvas as flex region improving deselect behaviour.
+-   Bump minimum font-size to 13px.
+-   Allow emojis to be displayed in permalink visual component.
+-   Respect HTML when readding paragraph-tags.
+-   Allow undefined return from withSelect mapSelectToProps.
+-   Update datepicker styling to inherit font-family/colour scheme.
+-   Move QueryControls and expose them for general use under components module.
+-   Address design issues with block dialog warnings on blocks that are too tall.
+-   Preserve "More" order during block conversion.
+-   Add capabilities handling for reusable blocks mapping to default roles.
+-   Add a "Write your story" filter.
+-   Return focus from Toolbar to selection when escape is pressed.
+-   Improve keyboard interaction on inserter tab panels.
+-   Simplify state management for the sidebar to make it easier to maintain.
+-   Update cover image markup and CSS.
+-   Fix sent parameter in onChange function of CheckboxControl.
+-   Fix errors in some localized strings.
+-   Fix problem with arrow navigation within Block Menu buttons.
+-   Fix issue with demo page being marked immediately as unsaved (and the subsequent autosave).
+-   Fix issue with a Reusable Blocks being keyboard navigable even when it is not supposed to be edited.
+-   Fix focusable matching elements with "contenteditable=false".
+-   Fix issue with empty paragraphs appearing after images when the images are inside an anchor.
+-   Fix issue when a block cannot be removed after being transformed into another block type.
+-   Fix issue with updating the author on published posts.
+-   Fix edgecases in Windows high contrast mode.
+-   Fix regression with inserter tabs colors.
+-   Fix handling of HTML captions on gallery and image.
+-   Fix heading subscript regression.
+-   Resolve a performance regression caused by a bailout condition in our chosen shallow-equality library.
+-   Handle calculateFrequency edge case on upgrading.
+-   Use lodash includes in NavigableMenu to address IE11 issue.
+-   Refer to reusable blocks as 'Shared Blocks'.
+-   Add domain argument to localization functions. Allow setting locale data by domain.
+-   Update localization functions to absorb errors from Jed.
+-   Make UrlInput a controlled component.
+-   Decode HTML entities in placeholders.
+-   Only allow whitespace around URL when attempting to transform pasted Embeds.
+-   Make preferences reducer deterministic.
+-   Remove max-width for meta boxes area inputs.
+-   Default to content-box box-sizing for the metabox area.
+-   Adjust inside padding of meta boxes to better accommodate plugins.
+-   Remove !important clauses from button styles.
+-   Keep update button enabled when there are metaboxes present.
+-   Clarify some inner workings of Block API functionality with comments.
+-   Rewrite data document as a walkthrough of wordpress/data.
+-   Revert the eslint --fix Git precommit hook.
+-   Extract shared eslint config.
+-   Add tests for the BlockSwitcher component.
+-   Add test cases for REQUEST_POST_UPDATE_FAILURE effect.
+-   Fail the build via ESLint error when deprecations marked for removal in a given version change are not removed.
+-   Update redux-optmist to 1.0.0.
+-   Update package-lock.json.
+-   Remove Deprecated Features planned for this release and start documenting them in a deprecated document.
 
 = 2.3.0 =
 
-* Continue editing flow iterations by adding a line between blocks to insert new content — it also works within nested groups.
-* Add support for nested templates.
-* Allow duplicating a block through a menu button.
-* Automatically set a matching block as the default when a post format is set and the post is empty. This continues the path of matching blocks with post formats.
-* Add CodeMirror (core library) to the HTML block for syntax highlighting.
-* Simplify design presentation of editor header area for better consistency. (Add label for "Preview" action.)
-* Introduce new API for allowing plugins to register sidebars. ⭐  It allows plugins to further extend Gutenberg natively with non-content functionality. Note: the public facing functions are marked as experimental as they are being iterated in the context of the major extensibility work going on outside of blocks.
-* Improve the "invalid block" dialog by reducing the options and adding a new convert to blocks feature as we have solidified the transformations.
-* Allow adding images to a gallery without going through the media library.
-* Show the block appender even if the last block is non empty paragraph.
-* Show the side inserter on empty paragraphs within nested blocks.
-* Add a script that creates a PHP file based on a POT to make the plugin translatable.
-* Refactor float alignment to avoid margin calculations and simplify rendering.
-* Support registering and invoking actions in the data module.
-* Add hook to validate useOnce blocks.
-* Add viewport module. (Showing explorations with data module.)
-* Provide a fix for apiRequest in sites configured to use plain permalinks. (Reported several times!)
-* Remove specific grammar support for more tag as we consolidate the syntax and reduce weight.
-* Move filter for registering block types before validation happens.
-* Allow removing the selected image in a gallery block using backspace/delete keys.
-* Make saved blocks preview available to keyboard users.
-* Refactor reducer enhancers as higher-order reducer creators.
-* Refactor query HOC usage with withSelect.
-* Refactor API calls in Gutenberg to always use wp.apiRequest.
-* Register core blocks on init hook.
-* Removed DefaultBlockAppender when a template Lock exits.
-* Reduce and simplify float code.
-* Refactor and cleanup for the Ellipsis and More Menu components.
-* Add focus styles for Windows High Contrast mode.
-* Move meta boxes out of the generic editor module.
-* Make the "more" tag visible in the Classic block.
-* Expose ImagePlaceholder component in wp.blocks.
-* Rename TermTreeSelect to TreeSelect and move it to components.
-* Reuse isHorizontalEdge for RichText component and remove duplication.
-* Improve CSS for gallery caption and avoid UI shifts.
-* Use TreeSelect in HierarchicalTermSelector.
-* Flatten components modes directory organization.
-* Mutate editor store reference in middlewares application.
-* Consider term names as case insensitive.
-* Resolve an issue where removing a block which had contained inner blocks would not clear those inner blocks from state.
-* Make sure block usage is incremented (for calculating frequency and recency) when adding blocks with the side inserter.
-* Hide non editor specific notices, pending further improvements.
-* Update shortcode block icon.
-* Disable post format input if the theme does not support post formats.
-* Remove margin from initial insertion point and fix misalignment.
-* Polish header for mobile and accommodate other more languages.
-* Show taxonomies in the document inspector separately, uncoupling Categories & Tags.
-* Improve handling of block toolbar on mobile.
-* Fix issue with gallery images not cropping within link wrappers.
-* Fix bug in paragraph blocks affecting input behaviour when block is positioned on left or right.
-* Fix minor inconsistency with block margins and the default appender.
-* Fix description typo in freeform block.
-* Fix issue with focus transfering between citation and content.
-* Fix issue with floated block toolbar on adjacent floats.
-* Fix duplicate upload of media on drag.
-* Fix issue that prevented adding new rows or columns in Table block.
-* Fix issues with z-index and the sidebar.
-* Fix accessibility issues with mover icons.
-* Fix issue with default block replace resulting in incorrect order.
-* Fix sidebar tab padding.
-* Fix certain conflicts with markdown plugins.
-* Fix IconButton indent regression.
-* Fix issue with self embedding WP posts and the processing of the embed markup.
-* Fix extraction of _nx translation function.
-* Fix wp.data.query backwards compatibility with props.
-* Fix problem with delete key in empty contentEditables.
-* Resolve an issue with the data module's unsubscribe behavior which can result in a listener callback being invoked even after its been unsubscribed.
-* Remove the api-request JavaScript shim which had existed while WordPress 4.9 was in pre-release.
-* Remove explicit handling of "bottom reached" within writing flow as redundant.
-* Remove invalid reference to WeakMap polyfill.
-* Remove unused wpautop fixture files.
-* Remove non-functional custom taxonomies meta boxes.
-* Remove is- prefix from embed alignment class.
-* Switch get_locale() to get_user_locale().
-* Remove unnecessary $current_screen code.
-* Reduce duplication in 'No saved blocks' and 'No blocks found' component messages.
-* Include string extraction in production build.
-* Add deprecation helper functions for consistent messaging.
-* Improve string cast render test.
-* Add Gutenberg svg to docs.
-* Add documentation describing block transforms.
-* Add documentation for nested template definitions.
-* Add documentation for registering sidebar APIs. Move them to extensibility docs.
-* Update WordPress packages to the latest versions.
+-   Continue editing flow iterations by adding a line between blocks to insert new content — it also works within nested groups.
+-   Add support for nested templates.
+-   Allow duplicating a block through a menu button.
+-   Automatically set a matching block as the default when a post format is set and the post is empty. This continues the path of matching blocks with post formats.
+-   Add CodeMirror (core library) to the HTML block for syntax highlighting.
+-   Simplify design presentation of editor header area for better consistency. (Add label for "Preview" action.)
+-   Introduce new API for allowing plugins to register sidebars. ⭐ It allows plugins to further extend Gutenberg natively with non-content functionality. Note: the public facing functions are marked as experimental as they are being iterated in the context of the major extensibility work going on outside of blocks.
+-   Improve the "invalid block" dialog by reducing the options and adding a new convert to blocks feature as we have solidified the transformations.
+-   Allow adding images to a gallery without going through the media library.
+-   Show the block appender even if the last block is non empty paragraph.
+-   Show the side inserter on empty paragraphs within nested blocks.
+-   Add a script that creates a PHP file based on a POT to make the plugin translatable.
+-   Refactor float alignment to avoid margin calculations and simplify rendering.
+-   Support registering and invoking actions in the data module.
+-   Add hook to validate useOnce blocks.
+-   Add viewport module. (Showing explorations with data module.)
+-   Provide a fix for apiRequest in sites configured to use plain permalinks. (Reported several times!)
+-   Remove specific grammar support for more tag as we consolidate the syntax and reduce weight.
+-   Move filter for registering block types before validation happens.
+-   Allow removing the selected image in a gallery block using backspace/delete keys.
+-   Make saved blocks preview available to keyboard users.
+-   Refactor reducer enhancers as higher-order reducer creators.
+-   Refactor query HOC usage with withSelect.
+-   Refactor API calls in Gutenberg to always use wp.apiRequest.
+-   Register core blocks on init hook.
+-   Removed DefaultBlockAppender when a template Lock exits.
+-   Reduce and simplify float code.
+-   Refactor and cleanup for the Ellipsis and More Menu components.
+-   Add focus styles for Windows High Contrast mode.
+-   Move meta boxes out of the generic editor module.
+-   Make the "more" tag visible in the Classic block.
+-   Expose ImagePlaceholder component in wp.blocks.
+-   Rename TermTreeSelect to TreeSelect and move it to components.
+-   Reuse isHorizontalEdge for RichText component and remove duplication.
+-   Improve CSS for gallery caption and avoid UI shifts.
+-   Use TreeSelect in HierarchicalTermSelector.
+-   Flatten components modes directory organization.
+-   Mutate editor store reference in middlewares application.
+-   Consider term names as case insensitive.
+-   Resolve an issue where removing a block which had contained inner blocks would not clear those inner blocks from state.
+-   Make sure block usage is incremented (for calculating frequency and recency) when adding blocks with the side inserter.
+-   Hide non editor specific notices, pending further improvements.
+-   Update shortcode block icon.
+-   Disable post format input if the theme does not support post formats.
+-   Remove margin from initial insertion point and fix misalignment.
+-   Polish header for mobile and accommodate other more languages.
+-   Show taxonomies in the document inspector separately, uncoupling Categories & Tags.
+-   Improve handling of block toolbar on mobile.
+-   Fix issue with gallery images not cropping within link wrappers.
+-   Fix bug in paragraph blocks affecting input behaviour when block is positioned on left or right.
+-   Fix minor inconsistency with block margins and the default appender.
+-   Fix description typo in freeform block.
+-   Fix issue with focus transfering between citation and content.
+-   Fix issue with floated block toolbar on adjacent floats.
+-   Fix duplicate upload of media on drag.
+-   Fix issue that prevented adding new rows or columns in Table block.
+-   Fix issues with z-index and the sidebar.
+-   Fix accessibility issues with mover icons.
+-   Fix issue with default block replace resulting in incorrect order.
+-   Fix sidebar tab padding.
+-   Fix certain conflicts with markdown plugins.
+-   Fix IconButton indent regression.
+-   Fix issue with self embedding WP posts and the processing of the embed markup.
+-   Fix extraction of \_nx translation function.
+-   Fix wp.data.query backwards compatibility with props.
+-   Fix problem with delete key in empty contentEditables.
+-   Resolve an issue with the data module's unsubscribe behavior which can result in a listener callback being invoked even after its been unsubscribed.
+-   Remove the api-request JavaScript shim which had existed while WordPress 4.9 was in pre-release.
+-   Remove explicit handling of "bottom reached" within writing flow as redundant.
+-   Remove invalid reference to WeakMap polyfill.
+-   Remove unused wpautop fixture files.
+-   Remove non-functional custom taxonomies meta boxes.
+-   Remove is- prefix from embed alignment class.
+-   Switch get_locale() to get_user_locale().
+-   Remove unnecessary $current_screen code.
+-   Reduce duplication in 'No saved blocks' and 'No blocks found' component messages.
+-   Include string extraction in production build.
+-   Add deprecation helper functions for consistent messaging.
+-   Improve string cast render test.
+-   Add Gutenberg svg to docs.
+-   Add documentation describing block transforms.
+-   Add documentation for nested template definitions.
+-   Add documentation for registering sidebar APIs. Move them to extensibility docs.
+-   Update WordPress packages to the latest versions.
 
 = 2.2.0 =
 
-* Block Nesting is live! It comes with an experimental Columns block. (Note: converting a nested block into a reusable block is disabled on this first version.) Furthermore, this is not a specific implementation for columns alone — any block author can take advantage of defining nested areas.
-* Refined block insertion experience:
-* Introduce block shortcuts on every empty paragraph block. This also temporarily disables the sibling inserter as we work on refining this interaction.
-* Add trailing text area at the bottom of a post to continue writing.
-* Preview saved blocks while hovering on the inserter. Allows users to quickly see what they are inserting before inserting.
-* Enable triggering onChange events within RichText component on every keystroke. This was an enforced limitation that prevented saved post checks from being faithful.
-* Rework undo levels to use history "buffer" and leverage the mechanism to aid in continuous syncing of RichText history records.
-* Collapse the publish sidebar when making edits to a published post automatically.
-* Improve writing flow by triggering isTyping mode as soon as the user clicks on the default text appender.
-* Hide hover effects when typing.
-* Add a confirmation message before reverting a published post to draft.
-* When using the inserter, replace the selected block if it's empty.
-* Display reusable blocks in the "recent blocks" tab.
-* Make sure blue line indicators appear consistently when using dropzones.
-* Ensure that hitting enter at the end of a paragraph creates an empty paragraph when using RichText.
-* Ensure the block settings menu and the block movers are shown when the default block is selected and user is not typing.
-* Deselect individual gallery images when clicking outside the block or selecting another image.
-* Add support for setting a page template.
-* Add support for individual image captions in galleries.
-* Add support for saving a post with Cmd/Ctrl+S shortcuts. This is possible after these RichText changes.
-* Support unwrapped paragraph text via native block deprecation mechanism. (Ensures paragraphs without p tags are correctly interpreted.) Also readdresses code that was applying autop selectively on the server for posts made with gutenberg as it is handled at the block level when needed.
-* Add raw handling (pasting mechanism) for iframes (e.g. Google Maps).
-* Allow WP to make images responsive via class.
-* Drop focus/setFocus props in favor of isSelected prop.
-* New PlainText component for raw content that is styled as editable text. Renamed Editable to RichText for extra clarity and separation.
-* Add RawHTML component, drop support for HTML string block save.
-* Absorb multiple-image uploads in generic image placeholder component and reuse it for galleries.
-* Refactor Default Colors and the ColorPalette component. Moves the default colors to the frontend making the Editor script more reusable without the need of the server-side bootstraping.
-* Reimplement block alignment as a common extension.
-* Use block API functions in reusable block effects.
-* Check for duplication in addGeneratedClassName.
-* Assign default for all allowed blockTypes.
-* Update ToggleControl to pass boolean onChange.
-* Add withSafeTimeout higher-order component.
-* Expose getEditedPostAttribute selector.
-* Move selected block focus to BlockListBlock.
-* Allow themes to disable custom color functionality across blocks.
-* Added slug selector to data modules collection.
-* Defer registration of all core blocks until editor loads. Generally useful for extensibility hooks.
-* Add a subscribe function to the editor data module. Also, separate reducers into multiple stores to avoid unallowed access to the actions.
-* Support multiple stores in data module for the redux dev tools.
-* Expose registered selectors as functions.
-* Remove Popover isOpen prop, render by presence.
-* Fix issue with store persistence and switching to fixed toolbar.
-* Fix issue with formatting toolbar hover.
-* Fix block menu render when multi-selecting.
-* Fix TinyMCE custom buttons width in Classic block.
-* Fix sidebar tab admin theme regression.
-* Fix center alignment on resized images.
-* Fix some float issues.
-* Fix type error when merging blocks.
-* Fix regression when converting gallery from shortcode.
-* Fix unset variable in meta-boxes functions.
-* Fix code error in blocks-control.md.
-* Fix loss of focus when navigating from multi-selection.
-* Fix scrollbars on blank preview loading screen.
-* Fix broken nested lists and Evernote test in pasting functionality.
-* Fix lingering dropzone placeholder at the end of the editor.
-* Fix Button block line break presentation.
-* Fix lingering visual editor classes.
-* Fix codepen embeds width.
-* Fix merging blocks after nested blocks refactoring.
-* Fix Cypress path checks to allow sub-directory.
-* Fix error when pasting image inside caption.
-* Fix some issues when pasting from Word.
-* Fix bug when pasting content with custom styles in a paragraph block.
-* Fix image caption select behaviour.
-* Fix broken nested content caused by overly aggressive cache.
-* Fix issue with comments and pingbacks being set to off on new posts.
-* Fix regression with RichText placeholder whitespace.
-* Fix incorrect directory to load text domain.
-* Fix issue with quote to heading transformation.
-* Fix focus transfer between citation and content.
-* Fix gallery link attribute selector.
-* Attempt to correct Slack's Markdown code block variant.
-* Disable customClassName support on Classic block.
-* Avoid autofocus behavior for blocks without focusable elements.
-* Ignore focus if explicitOriginalTarget is not node (Firefox issue).
-* Extract "edit-post" to its own module — this is preparation work for the eventual template editor in v2 onwards.
-* Remove redundant handling of inserter position, simplifying the implementation for nesting.
-* Prioritize specific block handling over generic shortcode catch-all transform.
-* Avoid running a full-parse when rendering a post, instead only intercepting dynamic blocks to handle their callbacks.
-* Ensure string return value from render_callback.
-* Avoid parameters in memoized selectors getDependants.
-* Guard against falsey block container in WritingFlow.
-* Refactor BlockList to use minimal block UIDs array.
-* Pass selection start as UID in BlockList to prevent unnecessary rerenders.
-* Refactor TableOfContents panel to separate component for performance improvements.
-* Restore new post setup as non-dirtying change. This resolves an issue where saving a new post which has an empty title will set the title as "Auto Draft".
-* Center spinner when images are loading in the gallery block.
-* Use isTypingInBlock to avoid unnecessary block rerenders.
-* Add the i18n messages to the built plugin.
-* General design improvements to the full-post code editor. Also removes the dummy quicktag buttons that were non-functional.
-* Only start multi selection from inside the content.
-* Cache columns layouts configurations.
-* General polish to the Classic block and some quote block style errors.
-* Remove wrapper from image raw transform and added tests.
-* Make sure reusable blocks models exist before initializing.
-* Persist withFocusOutside event for async usage.
-* Pass selected block UID as string on WritingFlow.
-* Add label to range control.
-* Remove throttling inputs on RichText.
-* Replace global hover state with local component state. This reduces excesive dispatching of mouse events.
-* Simplify Editor State initialization using a single action to fix undo/redo initialization.
-* Access state paths directly in selector dependants for getBlock.
-* Refactor insertion point to include rootUID and layout.
-* Set new post status to draft in initialization.
-* Strip comment demarcations in content filtering for the front-end after refactoring work.
-* Improve presentation of List block.
-* Optimize getMultiSelectedBlocks by returning shared array reference in empty multi-selection.
-* Increase maximum number of recent blocks to nine in order to accommodate the current design.
-* Avoid cases of rerendering when the previous or next block updates.
-* Restore missing selectionStart props in BlockList.
-* Improve edit and insert link label display.
-* Extract copy and scroll-into-view logic to separate non-visual components in BlockList.
-* Make sure that styles do not contain duplicates in development mode.
-* Use trivial block count check to determine emptiness.
-* Use proper labels provided by the rest API on taxonomies.
-* Use menu order to order pages in the parent page dropdown.
-* Persist link attribute to fix invalid galleries.
-* Update the Dashicons component with new icons.
-* Use correct label on Featured Image Panel.
-* Small improvement to the meta-box partial page file.
-* Delete unused global import in gutenberg_menu function.
-* Improve serialize persistence action name.
-* Improve logic around replacing the editor in PHP.
-* Improve consistency of tooltips text.
-* Improve sandbox component readme.
-* Improve gutenberg_intercept_* functions.
-* Improve "Add New" button logic.
-* Revert updates giving Meta Boxes' #poststuff div a broader scope.
-* Simplify "New Post" button logic.
-* Simplify scripts registration.
-* Replace focus with isSelected verification on hooks.
-* Automate memoized selector setup clear.
-* Consolidate module build JS, CSS, map inclusion.
-* Remove unused code after WP 4.9.
-* Update deprecated BlockDescription in Subhead.
-* Add doc explaining the deprecated block API. (Handbook.)
-* Add doc for Editable component (now RichText).
-* Document block validation, clarify extensibility validation.
-* JSDoc: prefer @return over @retuns.
-* Integrate dependencies from WordPress packages. Brings wp-scriptsinto gutenberg.
-* Move components in wp.blocks.InspectorControls to wp.components.
-* Add lint:fix ESLint "fix" npm script.
-* Add an eslint --fix Git precommit hook.
-* Add reusable block render tests.
-* Add tests for ContrastChecker component.
-* Add more details about unit testing JavaScript code.
-* Add mention to create-guten-block repo.
-* Add partial test coverage to RichText component.
-* Add first version of repository management doc.
-* Assign preferred JSDoc tags and types.
-* Assign edit-post global as wp.editPost.
-* Assign explicit user for Docker WordPress install in tests.
-* Mention installing docker-compose in local dev setup.
-* Update refx to version 3.x.
-* Update memize and rememo dependencies.
-* Code is Poetry footer to main readme.
+-   Block Nesting is live! It comes with an experimental Columns block. (Note: converting a nested block into a reusable block is disabled on this first version.) Furthermore, this is not a specific implementation for columns alone — any block author can take advantage of defining nested areas.
+-   Refined block insertion experience:
+-   Introduce block shortcuts on every empty paragraph block. This also temporarily disables the sibling inserter as we work on refining this interaction.
+-   Add trailing text area at the bottom of a post to continue writing.
+-   Preview saved blocks while hovering on the inserter. Allows users to quickly see what they are inserting before inserting.
+-   Enable triggering onChange events within RichText component on every keystroke. This was an enforced limitation that prevented saved post checks from being faithful.
+-   Rework undo levels to use history "buffer" and leverage the mechanism to aid in continuous syncing of RichText history records.
+-   Collapse the publish sidebar when making edits to a published post automatically.
+-   Improve writing flow by triggering isTyping mode as soon as the user clicks on the default text appender.
+-   Hide hover effects when typing.
+-   Add a confirmation message before reverting a published post to draft.
+-   When using the inserter, replace the selected block if it's empty.
+-   Display reusable blocks in the "recent blocks" tab.
+-   Make sure blue line indicators appear consistently when using dropzones.
+-   Ensure that hitting enter at the end of a paragraph creates an empty paragraph when using RichText.
+-   Ensure the block settings menu and the block movers are shown when the default block is selected and user is not typing.
+-   Deselect individual gallery images when clicking outside the block or selecting another image.
+-   Add support for setting a page template.
+-   Add support for individual image captions in galleries.
+-   Add support for saving a post with Cmd/Ctrl+S shortcuts. This is possible after these RichText changes.
+-   Support unwrapped paragraph text via native block deprecation mechanism. (Ensures paragraphs without p tags are correctly interpreted.) Also readdresses code that was applying autop selectively on the server for posts made with gutenberg as it is handled at the block level when needed.
+-   Add raw handling (pasting mechanism) for iframes (e.g. Google Maps).
+-   Allow WP to make images responsive via class.
+-   Drop focus/setFocus props in favor of isSelected prop.
+-   New PlainText component for raw content that is styled as editable text. Renamed Editable to RichText for extra clarity and separation.
+-   Add RawHTML component, drop support for HTML string block save.
+-   Absorb multiple-image uploads in generic image placeholder component and reuse it for galleries.
+-   Refactor Default Colors and the ColorPalette component. Moves the default colors to the frontend making the Editor script more reusable without the need of the server-side bootstraping.
+-   Reimplement block alignment as a common extension.
+-   Use block API functions in reusable block effects.
+-   Check for duplication in addGeneratedClassName.
+-   Assign default for all allowed blockTypes.
+-   Update ToggleControl to pass boolean onChange.
+-   Add withSafeTimeout higher-order component.
+-   Expose getEditedPostAttribute selector.
+-   Move selected block focus to BlockListBlock.
+-   Allow themes to disable custom color functionality across blocks.
+-   Added slug selector to data modules collection.
+-   Defer registration of all core blocks until editor loads. Generally useful for extensibility hooks.
+-   Add a subscribe function to the editor data module. Also, separate reducers into multiple stores to avoid unallowed access to the actions.
+-   Support multiple stores in data module for the redux dev tools.
+-   Expose registered selectors as functions.
+-   Remove Popover isOpen prop, render by presence.
+-   Fix issue with store persistence and switching to fixed toolbar.
+-   Fix issue with formatting toolbar hover.
+-   Fix block menu render when multi-selecting.
+-   Fix TinyMCE custom buttons width in Classic block.
+-   Fix sidebar tab admin theme regression.
+-   Fix center alignment on resized images.
+-   Fix some float issues.
+-   Fix type error when merging blocks.
+-   Fix regression when converting gallery from shortcode.
+-   Fix unset variable in meta-boxes functions.
+-   Fix code error in blocks-control.md.
+-   Fix loss of focus when navigating from multi-selection.
+-   Fix scrollbars on blank preview loading screen.
+-   Fix broken nested lists and Evernote test in pasting functionality.
+-   Fix lingering dropzone placeholder at the end of the editor.
+-   Fix Button block line break presentation.
+-   Fix lingering visual editor classes.
+-   Fix codepen embeds width.
+-   Fix merging blocks after nested blocks refactoring.
+-   Fix Cypress path checks to allow sub-directory.
+-   Fix error when pasting image inside caption.
+-   Fix some issues when pasting from Word.
+-   Fix bug when pasting content with custom styles in a paragraph block.
+-   Fix image caption select behaviour.
+-   Fix broken nested content caused by overly aggressive cache.
+-   Fix issue with comments and pingbacks being set to off on new posts.
+-   Fix regression with RichText placeholder whitespace.
+-   Fix incorrect directory to load text domain.
+-   Fix issue with quote to heading transformation.
+-   Fix focus transfer between citation and content.
+-   Fix gallery link attribute selector.
+-   Attempt to correct Slack's Markdown code block variant.
+-   Disable customClassName support on Classic block.
+-   Avoid autofocus behavior for blocks without focusable elements.
+-   Ignore focus if explicitOriginalTarget is not node (Firefox issue).
+-   Extract "edit-post" to its own module — this is preparation work for the eventual template editor in v2 onwards.
+-   Remove redundant handling of inserter position, simplifying the implementation for nesting.
+-   Prioritize specific block handling over generic shortcode catch-all transform.
+-   Avoid running a full-parse when rendering a post, instead only intercepting dynamic blocks to handle their callbacks.
+-   Ensure string return value from render_callback.
+-   Avoid parameters in memoized selectors getDependants.
+-   Guard against falsey block container in WritingFlow.
+-   Refactor BlockList to use minimal block UIDs array.
+-   Pass selection start as UID in BlockList to prevent unnecessary rerenders.
+-   Refactor TableOfContents panel to separate component for performance improvements.
+-   Restore new post setup as non-dirtying change. This resolves an issue where saving a new post which has an empty title will set the title as "Auto Draft".
+-   Center spinner when images are loading in the gallery block.
+-   Use isTypingInBlock to avoid unnecessary block rerenders.
+-   Add the i18n messages to the built plugin.
+-   General design improvements to the full-post code editor. Also removes the dummy quicktag buttons that were non-functional.
+-   Only start multi selection from inside the content.
+-   Cache columns layouts configurations.
+-   General polish to the Classic block and some quote block style errors.
+-   Remove wrapper from image raw transform and added tests.
+-   Make sure reusable blocks models exist before initializing.
+-   Persist withFocusOutside event for async usage.
+-   Pass selected block UID as string on WritingFlow.
+-   Add label to range control.
+-   Remove throttling inputs on RichText.
+-   Replace global hover state with local component state. This reduces excesive dispatching of mouse events.
+-   Simplify Editor State initialization using a single action to fix undo/redo initialization.
+-   Access state paths directly in selector dependants for getBlock.
+-   Refactor insertion point to include rootUID and layout.
+-   Set new post status to draft in initialization.
+-   Strip comment demarcations in content filtering for the front-end after refactoring work.
+-   Improve presentation of List block.
+-   Optimize getMultiSelectedBlocks by returning shared array reference in empty multi-selection.
+-   Increase maximum number of recent blocks to nine in order to accommodate the current design.
+-   Avoid cases of rerendering when the previous or next block updates.
+-   Restore missing selectionStart props in BlockList.
+-   Improve edit and insert link label display.
+-   Extract copy and scroll-into-view logic to separate non-visual components in BlockList.
+-   Make sure that styles do not contain duplicates in development mode.
+-   Use trivial block count check to determine emptiness.
+-   Use proper labels provided by the rest API on taxonomies.
+-   Use menu order to order pages in the parent page dropdown.
+-   Persist link attribute to fix invalid galleries.
+-   Update the Dashicons component with new icons.
+-   Use correct label on Featured Image Panel.
+-   Small improvement to the meta-box partial page file.
+-   Delete unused global import in gutenberg_menu function.
+-   Improve serialize persistence action name.
+-   Improve logic around replacing the editor in PHP.
+-   Improve consistency of tooltips text.
+-   Improve sandbox component readme.
+-   Improve gutenberg*intercept*\* functions.
+-   Improve "Add New" button logic.
+-   Revert updates giving Meta Boxes' #poststuff div a broader scope.
+-   Simplify "New Post" button logic.
+-   Simplify scripts registration.
+-   Replace focus with isSelected verification on hooks.
+-   Automate memoized selector setup clear.
+-   Consolidate module build JS, CSS, map inclusion.
+-   Remove unused code after WP 4.9.
+-   Update deprecated BlockDescription in Subhead.
+-   Add doc explaining the deprecated block API. (Handbook.)
+-   Add doc for Editable component (now RichText).
+-   Document block validation, clarify extensibility validation.
+-   JSDoc: prefer @return over @retuns.
+-   Integrate dependencies from WordPress packages. Brings wp-scriptsinto gutenberg.
+-   Move components in wp.blocks.InspectorControls to wp.components.
+-   Add lint:fix ESLint "fix" npm script.
+-   Add an eslint --fix Git precommit hook.
+-   Add reusable block render tests.
+-   Add tests for ContrastChecker component.
+-   Add more details about unit testing JavaScript code.
+-   Add mention to create-guten-block repo.
+-   Add partial test coverage to RichText component.
+-   Add first version of repository management doc.
+-   Assign preferred JSDoc tags and types.
+-   Assign edit-post global as wp.editPost.
+-   Assign explicit user for Docker WordPress install in tests.
+-   Mention installing docker-compose in local dev setup.
+-   Update refx to version 3.x.
+-   Update memize and rememo dependencies.
+-   Code is Poetry footer to main readme.
 
 = 2.1.0 =
 
-* Iterate on the design of up/down arrows and how focus is managed. This seeks to further reduce the visual and cognitive weight of the up/down movers.
-* Show immediate visual feedback when dragging and dropping images into the editor. (Expands on the previous release work.)
-* Expose state through data module using selectors. This is an important piece of the extensibility puzzle.
-* New button outline and focus styles.
-* Show original block icon after converting to reusable block. Also hides the generic reusable block from inserters. This moves data logic out of the inserter.
-* Introduce a migration function for block versioning.
-* Add HTML handler to dropzone. Allows drag and dropping images from other web pages directly.
-* Trigger typing mode when ENTER or BACKSPACE are pressed. This improves the writing flow but engaging the UI-less mode more frequently.
-* Added ability to align the text content of a cover image to the right, left, or center of the image.
-* Refactor CopyContentButton as a core extension to illustrate how to add functionality to the editor outside of blocks.
-* Allow collapsing/sorting meta-boxes panels.
-* Remove dirty-checking from meta-boxes state, fixes issues with default values and updating certain text fields.
-* Defer registration of all core blocks until editor loads. Improves ability to hook into registerBlockType.
-* Only trigger select block action when block is unselected.
-* Try new markup for Galleries using lists.
-* Try new subheading editorial block.
-* Reduce sibling inserter initial height.
-* Force an update when a new filter is added or removed while using withFilters higher-order component. This improves the rendering flow of filters.
-* Refactor the MediaUploadButton to be agnostic to its rendered UI.
-* Change "size" label to "level" in Heading block settings.
-* Remove breaking spaces logic on List block.
-* Update progress button color state based on theme used.
-* Update Video block description.
-* Refactor the multi-selection behavior to dispatch the multi-selection start action only after the cursor begins to move after a mousedown event.
-* Avoid persisting mobile and publish sidebars.
-* Move drag handling to instance-bound handler.
-* Remove "Open in new window" link option.
-* Use username slug instead of name and remove ephemeral link from it.
-* Ensure isLoading set to false after request error.
-* Allow copying individual text from a block that is not purely text without copying the whole block.
-* Match consistency of tooltip text with Classic Editor.
-* Fix issue with Lists having additional lines when used in a reusable block.
-* Fix errors when adding duplicate tags.
-* Fix inconsistency with applyOrUnset().
-* Fix incorrect display when loading a saved block with no content.
-* Fix issue where black rectangle would briefly blink on new paragraphs.
-* Fix cursor jumps in link-editing dialog.
-* Fix post content validation.
-* Fix scrolling issues around nav menus.
-* Remove Vine embed support as it's no longer supported.
-* Ensure editor still exists after timeout.
-* Add regression check for block edit interface using snapshots.
-* Add missing alt attributes to image (and gallery) blocks when alt returns an empty value.
-* Better build tools with Docker.
-* Register Gutenberg scripts & styles before enqueuing.
-* Force wp-api.js to use HTTP/1.0 for better compatibility.
-* Avoid the deprecated (from 5.0 to 5.2) is_a() function.
-* Remove unused dependency.
-* Update contributing instructions with steps.
-* Consistency cleanup in doc return statements.
-* Include how to assign a template to a default Post Type in the documentation. Also add more context to the code.
-* Improve incremental development build performance by only minimizing -rtl files for production builds.
-* More JSDoc fixes.
-* Remove warning from plugin header.
-* Add new page explaining how to create a block using WP-CLI.
-* Add security reporting instructions.
-* Improve useOnce documentation.
-* Bump copyright year to 2018 in license.md.
-* Disable Travis branch builds except for trunk.
+-   Iterate on the design of up/down arrows and how focus is managed. This seeks to further reduce the visual and cognitive weight of the up/down movers.
+-   Show immediate visual feedback when dragging and dropping images into the editor. (Expands on the previous release work.)
+-   Expose state through data module using selectors. This is an important piece of the extensibility puzzle.
+-   New button outline and focus styles.
+-   Show original block icon after converting to reusable block. Also hides the generic reusable block from inserters. This moves data logic out of the inserter.
+-   Introduce a migration function for block versioning.
+-   Add HTML handler to dropzone. Allows drag and dropping images from other web pages directly.
+-   Trigger typing mode when ENTER or BACKSPACE are pressed. This improves the writing flow but engaging the UI-less mode more frequently.
+-   Added ability to align the text content of a cover image to the right, left, or center of the image.
+-   Refactor CopyContentButton as a core extension to illustrate how to add functionality to the editor outside of blocks.
+-   Allow collapsing/sorting meta-boxes panels.
+-   Remove dirty-checking from meta-boxes state, fixes issues with default values and updating certain text fields.
+-   Defer registration of all core blocks until editor loads. Improves ability to hook into registerBlockType.
+-   Only trigger select block action when block is unselected.
+-   Try new markup for Galleries using lists.
+-   Try new subheading editorial block.
+-   Reduce sibling inserter initial height.
+-   Force an update when a new filter is added or removed while using withFilters higher-order component. This improves the rendering flow of filters.
+-   Refactor the MediaUploadButton to be agnostic to its rendered UI.
+-   Change "size" label to "level" in Heading block settings.
+-   Remove breaking spaces logic on List block.
+-   Update progress button color state based on theme used.
+-   Update Video block description.
+-   Refactor the multi-selection behavior to dispatch the multi-selection start action only after the cursor begins to move after a mousedown event.
+-   Avoid persisting mobile and publish sidebars.
+-   Move drag handling to instance-bound handler.
+-   Remove "Open in new window" link option.
+-   Use username slug instead of name and remove ephemeral link from it.
+-   Ensure isLoading set to false after request error.
+-   Allow copying individual text from a block that is not purely text without copying the whole block.
+-   Match consistency of tooltip text with Classic Editor.
+-   Fix issue with Lists having additional lines when used in a reusable block.
+-   Fix errors when adding duplicate tags.
+-   Fix inconsistency with applyOrUnset().
+-   Fix incorrect display when loading a saved block with no content.
+-   Fix issue where black rectangle would briefly blink on new paragraphs.
+-   Fix cursor jumps in link-editing dialog.
+-   Fix post content validation.
+-   Fix scrolling issues around nav menus.
+-   Remove Vine embed support as it's no longer supported.
+-   Ensure editor still exists after timeout.
+-   Add regression check for block edit interface using snapshots.
+-   Add missing alt attributes to image (and gallery) blocks when alt returns an empty value.
+-   Better build tools with Docker.
+-   Register Gutenberg scripts & styles before enqueuing.
+-   Force wp-api.js to use HTTP/1.0 for better compatibility.
+-   Avoid the deprecated (from 5.0 to 5.2) is_a() function.
+-   Remove unused dependency.
+-   Update contributing instructions with steps.
+-   Consistency cleanup in doc return statements.
+-   Include how to assign a template to a default Post Type in the documentation. Also add more context to the code.
+-   Improve incremental development build performance by only minimizing -rtl files for production builds.
+-   More JSDoc fixes.
+-   Remove warning from plugin header.
+-   Add new page explaining how to create a block using WP-CLI.
+-   Add security reporting instructions.
+-   Improve useOnce documentation.
+-   Bump copyright year to 2018 in license.md.
+-   Disable Travis branch builds except for trunk.
 
 = 2.0.0 =
 
-* Replace publish dropdown menu with a sidebar panel.
-* Expand latest post blocks with more querying options — order by and category.
-* Allow dragging multiple images to create a gallery.
-* Improve markdown pasting (allows lists to be interpreted).
-* Allow pasting copied images directly.
-* Pasting within lists and headings.
-* Improve handling of inline spans.
-* Allow copying a single block.
-* Make sure inline pasting mechanism does not take place if pasting shortcodes.
-* Preserve alignment classes during raw transformations (like pasting an old WordPress post).
-* Support shortcode synonyms.
-* Allow continued writing when pressing down arrow at the end of a post.
-* Mobile design: move block controls to the bottom of a block.
-* Allow deleting reusable blocks globally.
-* Display description and type on the sidebar. (Also replace BlockDescription component with a property.)
-* New table of contents and document counts design.
-* Add button to copy the full document quickly.
-* Expand inserter to three columns and a wider container.
-* Allow using down-arrow keys directly to navigate when searching a block in the inserter.
-* Deselect images in Gallery block when losing focus.
-* Include post title in document outline feature.
-* Rework display of notices and address various issues with overlaps.
-* Added keyboard shortcut to toggle editor mode. Also displays the relevant keyboard combination next to the menu item.
-* Improve deleting empty paragraphs when backspacing into a block that has no merge function (example, deleting a paragraph after an image).
-* Improve the way scroll-position is updated when moving a block.
-* Show block transformations in ellipsis menu.
-* Add drag and drop support for cover image.
-* Allow transforming operations between Heading and Cover Image blocks.
-* Add focus outline for blocks that don't have focusable fields.
-* Allow both navigation orientations in NavigableContainer.
-* Improve the behavior of focusing embed blocks.
-* Unify UI of audio and video blocks.
-* Show message on the inserter when no blocks are found.
-* Show message when no saved blocks are available.
-* Do not show the publish panel when updating / scheduling / submitting a post.
-* Update quote style in front-end.
-* Convert text columns to a div using grid layout.
-* Update button block CSS and add class to link.
-* Allow text in Button block to wrap.
-* Prevent useOnce blocks from being inserted using the convenient blocks shortcut menu.
-* Show correct symbol (⌘ or Ctrl) depending on system context.
-* Rename "insert" to "add" in the UI.
-* Clear block selection when opening sibling or bottom inserter.
-* Always show the insertion point when the inserter is opened.
-* Increase padding on "more options" block toggle.
-* Rename "Classic Text" to "Classic".
-* Improve display of dotted outline around reusable blocks.
-* Updated messages around reusable blocks interactions.
-* Align both the quote and the citation in the visual editor.
-* Exit edit mode when unfocusing a reusable block.
-* Set floated image width (when unresized) in % value.
-* Add withState higher-order component.
-* Initial introduction of wp.data module.
-* Restrict the state access to the module registering the reducer only.
-* Refactor PostSchedule to make Calendar and Clock available as reusable components.
-* Allow overwriting colors (defaults and theme provided) when consuming ColorPalette component.
-* Switch orientation of popover component only if there is more space for the new position.
-* New ImagePlaceholder reusable component that handles upload buttons and draggable areas for the block author.
-* Add speak message when a category is added.
-* Announce notices to assertive technologies with speak.
-* Add aria-labels to Code and HTML blocks.
-* Warn if multiple h1 headings are being used.
-* Add speak message and make "block settings" button label dynamic.
-* Make excerpt functionality more accessible.
-* Add various headings around editor areas for screen-readers.
-* Improve accessibility of menu items in the main ellipsis menu.
-* Add missing tooltips to icon buttons.
-* Render toolbar always by the block on mobile.
-* Improve performance of responsive calculations using matchMedia.
-* Avoid shifts around toolbar and scrolling issues on mobile.
-* Improve how the fixed-to-block toolbar looks on mobile. Change how the fixed position toolbars behave, making them sticky.
-* Prevent Mobile Safari from zooming the entire page when you open the inserter.
-* Initial explorations to migrate to server-registered blocks as part of raising awareness of available blocks.
-* Move supportHTML property into the general "support" object.
-* Replace getLatestPosts usage with withAPIData HOC.
-* Convert all filters for components to behave like HOCs (withFilters).
-* Replace flowRight usage with compose for HOCs.
-* Apply filters without function wrappers.
-* Improve Tags/Categories response size by limiting the requested fields.
-* Limit requested fields in category feature of "latest posts".
-* Request only required post fields in latest posts.
-* Replace getCategories usage with withAPIData component.
-* Don't show fields that are not used in media modal when adding a featured image.
-* Polish inserter tabs so the focus style isn't clipped.
-* Make inspector controls available when categories are loading.
-* Improve overlay over meta-boxes during save operations.
-* Hide excerpts panel if not supported by the CPT.
-* Hide Taxonomies panel if no taxonomy is available for the current CPT.
-* Hide several other panels when the CPT doesn't support them.
-* Use _.includes to find available taxonomies. Mitigates non-schema-conforming taxonomy registrations.
-* Defer applying filters for component until it is about to be mounted.
-* Prevent "Add New" dropdown from overriding other plugin functionality.
-* Improve paragraph block description.
-* Refactor to simplify block toolbar rendering.
-* Add missing aligment classes to cover image.
-* Add parent page dropdown to page attributes panel.
-* Allow pressing ENTER to change Reusable Block name.
-* Disable HTML mode for reusable blocks.
-* Add support for the "advanced" meta-box location.
-* Make sure super admins can publish in any site of the network.
-* Rename theme support for wide images to align-wide.
-* Move selectors and actions files to the store folder.
-* Center arrows of popovers relative to their parent.
-* Use fainter disabled state.
-* Add breakpoint grid to latest posts block and update color of date.
-* Move logic for auto-generating the block class name to BlockEdit.
-* Respect the "enter_title_here" hook.
-* Prevent meta-box hooks from running multiple times.
-* Don't set font-family on pullquotes.
-* Remove superfluous parentheses from include statements.
-* Remove redundant CSS property updates.
-* Use "columns-x" class only for grid layout in latest posts.
-* Use flatMap for mapping toolbar controls for a small performance gain.
-* Introduce jest matchers for console object.
-* Updated various npm packages; update Jest. Update node-sass. Update WordPress packages.
-* Switch TinyMCE to unpkg.
-* Reorganize handbook docs navigation.
-* Added FAQ section for meta-boxes compatibility.
-* Added initial "templates" document.
-* Add documentation about dynamic blocks.
-* Updated "outreach" docs.
-* Improve block-controls document.
-* Display a hint that files need to be built.
-* Add WordPress JSDoc ESLint configuration.
-* Update licenses in package.json & composer.json to adhere to SPDX v3.0 specification.
-* Add tests to cover REQUEST_POST_UPDATE_SUCCESS effect.
-* Add tests for color palette component.
-* Add tests for Editable.getSettings and adaptFormatter.
-* Use newly published jest-console package in test setup.
-* Update info about test fixtures generation.
-* Also style footer in quote blocks to ensure backwards compatibility.
-* Add a PHPUnit Docker Container.
-* Fix wrong "return to editor" link when comparing revisions.
-* Fix error when pressing enter from a heading block.
-* Fix error with merging lists into paragraphs.
-* Fix revisions button target area.
-* Remove duplicated styles.
-* Fix z-index rebase issues.
-* Fix tag name warning ordering in validation.
-* Fix text encoding of titles in url-input.
-* Fix endless loop in reusable blocks code.
-* Fix edit button in Audio block using invalid buttonProps attribute.
-* Fix block creation with falsey default attribute.
-* Fix radio control checked property.
-* Fix styling issues of blocks when they are used as part of a reusable block.
-* Fix list wrapping issues.
-* Fix problem when converting shortcodes due to sorting.
-* Fix issue with time-picker not working.
-* Fix hide advanced settings interaction in block menu.
-* Fix issue with url input on images.
-* Fix style regression in textual placeholder on cover image.
-* Fix return type hint in gutenberg_get_rest_link().
-* Fix bug when changing number of Latests Posts rapidly was leading to some numbers being defunct.
-* Fix isInputField check and add tests.
-* Fix unsetting block alignment flagging block as invalid.
-* Fix CSS bleed from admin-specific gallery styles.
-* Fix image handlers at the top from being unclickable.
-* Fix unexpected keyboard navigations behaviour on some nodes.
-* Fix inserter position for floated blocks.
-* Fix bug on empty cover image placeholder used on a saved block.
-* Fix errors when adding duplicate categories.
-* Fix broken custom color bubble in ColorPalette.
+-   Replace publish dropdown menu with a sidebar panel.
+-   Expand latest post blocks with more querying options — order by and category.
+-   Allow dragging multiple images to create a gallery.
+-   Improve markdown pasting (allows lists to be interpreted).
+-   Allow pasting copied images directly.
+-   Pasting within lists and headings.
+-   Improve handling of inline spans.
+-   Allow copying a single block.
+-   Make sure inline pasting mechanism does not take place if pasting shortcodes.
+-   Preserve alignment classes during raw transformations (like pasting an old WordPress post).
+-   Support shortcode synonyms.
+-   Allow continued writing when pressing down arrow at the end of a post.
+-   Mobile design: move block controls to the bottom of a block.
+-   Allow deleting reusable blocks globally.
+-   Display description and type on the sidebar. (Also replace BlockDescription component with a property.)
+-   New table of contents and document counts design.
+-   Add button to copy the full document quickly.
+-   Expand inserter to three columns and a wider container.
+-   Allow using down-arrow keys directly to navigate when searching a block in the inserter.
+-   Deselect images in Gallery block when losing focus.
+-   Include post title in document outline feature.
+-   Rework display of notices and address various issues with overlaps.
+-   Added keyboard shortcut to toggle editor mode. Also displays the relevant keyboard combination next to the menu item.
+-   Improve deleting empty paragraphs when backspacing into a block that has no merge function (example, deleting a paragraph after an image).
+-   Improve the way scroll-position is updated when moving a block.
+-   Show block transformations in ellipsis menu.
+-   Add drag and drop support for cover image.
+-   Allow transforming operations between Heading and Cover Image blocks.
+-   Add focus outline for blocks that don't have focusable fields.
+-   Allow both navigation orientations in NavigableContainer.
+-   Improve the behavior of focusing embed blocks.
+-   Unify UI of audio and video blocks.
+-   Show message on the inserter when no blocks are found.
+-   Show message when no saved blocks are available.
+-   Do not show the publish panel when updating / scheduling / submitting a post.
+-   Update quote style in front-end.
+-   Convert text columns to a div using grid layout.
+-   Update button block CSS and add class to link.
+-   Allow text in Button block to wrap.
+-   Prevent useOnce blocks from being inserted using the convenient blocks shortcut menu.
+-   Show correct symbol (⌘ or Ctrl) depending on system context.
+-   Rename "insert" to "add" in the UI.
+-   Clear block selection when opening sibling or bottom inserter.
+-   Always show the insertion point when the inserter is opened.
+-   Increase padding on "more options" block toggle.
+-   Rename "Classic Text" to "Classic".
+-   Improve display of dotted outline around reusable blocks.
+-   Updated messages around reusable blocks interactions.
+-   Align both the quote and the citation in the visual editor.
+-   Exit edit mode when unfocusing a reusable block.
+-   Set floated image width (when unresized) in % value.
+-   Add withState higher-order component.
+-   Initial introduction of wp.data module.
+-   Restrict the state access to the module registering the reducer only.
+-   Refactor PostSchedule to make Calendar and Clock available as reusable components.
+-   Allow overwriting colors (defaults and theme provided) when consuming ColorPalette component.
+-   Switch orientation of popover component only if there is more space for the new position.
+-   New ImagePlaceholder reusable component that handles upload buttons and draggable areas for the block author.
+-   Add speak message when a category is added.
+-   Announce notices to assertive technologies with speak.
+-   Add aria-labels to Code and HTML blocks.
+-   Warn if multiple h1 headings are being used.
+-   Add speak message and make "block settings" button label dynamic.
+-   Make excerpt functionality more accessible.
+-   Add various headings around editor areas for screen-readers.
+-   Improve accessibility of menu items in the main ellipsis menu.
+-   Add missing tooltips to icon buttons.
+-   Render toolbar always by the block on mobile.
+-   Improve performance of responsive calculations using matchMedia.
+-   Avoid shifts around toolbar and scrolling issues on mobile.
+-   Improve how the fixed-to-block toolbar looks on mobile. Change how the fixed position toolbars behave, making them sticky.
+-   Prevent Mobile Safari from zooming the entire page when you open the inserter.
+-   Initial explorations to migrate to server-registered blocks as part of raising awareness of available blocks.
+-   Move supportHTML property into the general "support" object.
+-   Replace getLatestPosts usage with withAPIData HOC.
+-   Convert all filters for components to behave like HOCs (withFilters).
+-   Replace flowRight usage with compose for HOCs.
+-   Apply filters without function wrappers.
+-   Improve Tags/Categories response size by limiting the requested fields.
+-   Limit requested fields in category feature of "latest posts".
+-   Request only required post fields in latest posts.
+-   Replace getCategories usage with withAPIData component.
+-   Don't show fields that are not used in media modal when adding a featured image.
+-   Polish inserter tabs so the focus style isn't clipped.
+-   Make inspector controls available when categories are loading.
+-   Improve overlay over meta-boxes during save operations.
+-   Hide excerpts panel if not supported by the CPT.
+-   Hide Taxonomies panel if no taxonomy is available for the current CPT.
+-   Hide several other panels when the CPT doesn't support them.
+-   Use \_.includes to find available taxonomies. Mitigates non-schema-conforming taxonomy registrations.
+-   Defer applying filters for component until it is about to be mounted.
+-   Prevent "Add New" dropdown from overriding other plugin functionality.
+-   Improve paragraph block description.
+-   Refactor to simplify block toolbar rendering.
+-   Add missing aligment classes to cover image.
+-   Add parent page dropdown to page attributes panel.
+-   Allow pressing ENTER to change Reusable Block name.
+-   Disable HTML mode for reusable blocks.
+-   Add support for the "advanced" meta-box location.
+-   Make sure super admins can publish in any site of the network.
+-   Rename theme support for wide images to align-wide.
+-   Move selectors and actions files to the store folder.
+-   Center arrows of popovers relative to their parent.
+-   Use fainter disabled state.
+-   Add breakpoint grid to latest posts block and update color of date.
+-   Move logic for auto-generating the block class name to BlockEdit.
+-   Respect the "enter_title_here" hook.
+-   Prevent meta-box hooks from running multiple times.
+-   Don't set font-family on pullquotes.
+-   Remove superfluous parentheses from include statements.
+-   Remove redundant CSS property updates.
+-   Use "columns-x" class only for grid layout in latest posts.
+-   Use flatMap for mapping toolbar controls for a small performance gain.
+-   Introduce jest matchers for console object.
+-   Updated various npm packages; update Jest. Update node-sass. Update WordPress packages.
+-   Switch TinyMCE to unpkg.
+-   Reorganize handbook docs navigation.
+-   Added FAQ section for meta-boxes compatibility.
+-   Added initial "templates" document.
+-   Add documentation about dynamic blocks.
+-   Updated "outreach" docs.
+-   Improve block-controls document.
+-   Display a hint that files need to be built.
+-   Add WordPress JSDoc ESLint configuration.
+-   Update licenses in package.json & composer.json to adhere to SPDX v3.0 specification.
+-   Add tests to cover REQUEST_POST_UPDATE_SUCCESS effect.
+-   Add tests for color palette component.
+-   Add tests for Editable.getSettings and adaptFormatter.
+-   Use newly published jest-console package in test setup.
+-   Update info about test fixtures generation.
+-   Also style footer in quote blocks to ensure backwards compatibility.
+-   Add a PHPUnit Docker Container.
+-   Fix wrong "return to editor" link when comparing revisions.
+-   Fix error when pressing enter from a heading block.
+-   Fix error with merging lists into paragraphs.
+-   Fix revisions button target area.
+-   Remove duplicated styles.
+-   Fix z-index rebase issues.
+-   Fix tag name warning ordering in validation.
+-   Fix text encoding of titles in url-input.
+-   Fix endless loop in reusable blocks code.
+-   Fix edit button in Audio block using invalid buttonProps attribute.
+-   Fix block creation with falsey default attribute.
+-   Fix radio control checked property.
+-   Fix styling issues of blocks when they are used as part of a reusable block.
+-   Fix list wrapping issues.
+-   Fix problem when converting shortcodes due to sorting.
+-   Fix issue with time-picker not working.
+-   Fix hide advanced settings interaction in block menu.
+-   Fix issue with url input on images.
+-   Fix style regression in textual placeholder on cover image.
+-   Fix return type hint in gutenberg_get_rest_link().
+-   Fix bug when changing number of Latests Posts rapidly was leading to some numbers being defunct.
+-   Fix isInputField check and add tests.
+-   Fix unsetting block alignment flagging block as invalid.
+-   Fix CSS bleed from admin-specific gallery styles.
+-   Fix image handlers at the top from being unclickable.
+-   Fix unexpected keyboard navigations behaviour on some nodes.
+-   Fix inserter position for floated blocks.
+-   Fix bug on empty cover image placeholder used on a saved block.
+-   Fix errors when adding duplicate categories.
+-   Fix broken custom color bubble in ColorPalette.
 
 = 1.9.1 =
 
-* Fix error in Safari when loading Gutenberg with meta boxes present.
-* Fix error / incompatibility with Yoast SEO Premium terms display.
-* Resolve incorrect modal and tooltip layering.
-* Remove unintended commas from Page Options content.
+-   Fix error in Safari when loading Gutenberg with meta boxes present.
+-   Fix error / incompatibility with Yoast SEO Premium terms display.
+-   Resolve incorrect modal and tooltip layering.
+-   Remove unintended commas from Page Options content.
 
 = 1.9.0 =
 
-* Introducing reusable global blocks. (Stored in a wp_blocks post type.)
-* Add ability to lock down the editor when using templates so edits can happen but blocks can't be removed, moved, nor added.
-* Handle and upgrade deprecated blocks. This allows to migrate attributes without invalidating blocks and an important part of the block API.
-* Drag and drop upload support to gallery block.
-* Extensibility:
-* Expose packages/hooks public API under wp.hooks.
-* Introduces withFilters higher-order component to make component filtering easier.
-* Introduces getWrapperDisplayName helper function to make debugging React tree easier.
-* Introduces compose function to unify composing higher-order components.
-* Exposes hook for Block component.
-* Updated demo post with a nicer presentation for people to test with.
-* Added automated RTL support.
-* Convert unknown shortcodes to Shortcode block when pasting.
-* Avoid splitting blocks during rich text pasting.
-* Disable block selection when resizing image.
-* Prefetch meta-boxes and don't reload them on save.
-* Support for all admin color schemes.
-* Close sidebar when resizing from non mobile breakpoints to mobile sizes.
-* Apply content autop disabling filter before do_blocks. Also fixes case where server-side rendered blocks produce extraneous whitespace in output.
-* Use cite element instead of footer for quote and pull-quote source markup.
-* Respect recency order when displaying Recent blocks.
-* Update the behavior of notices reducer to respect ID as a unique identifier, removing duplicate entries.
-* Improve quote to paragraph transformations. Fixes cases where quote would be split into two.
-* Use two flex rows instead of one wrapped row in Url modal for cleaner and more consistent display.
-* Avoid restricting endpoints to /wp/v2 in withApiData.
-* Remove duplicated and simplify inserter between blocks styles.
-* Remove unnecessary padding on top of editor when fixed toolbar is off.
-* Avoid intercepting rendering of removed meta boxes.
-* Replace redux-responsive with a simpler custom alternative, fixing a bug with IE11.
-* Fix issues with bullet-point positioning affecting block display.
-* Fix meta attributes selector not returning the correct value if edited.
-* Fix inconsistent animation on settings button.
-* Fix style issues on Custom HTML block's toolbar.
-* Fix broken styles in "edit as HTML" mode.
-* Fix image block description when no image is set.
-* Fix horizontal overflow for selects with long names in sidebar.
-* Fix case where link modal closes upon typing into UrlInput when toolbar is docked to the paragraph.
-* Fix webpack config issue on Node 6.
-* Fix issue with vertical arrow keys leaking to horizontal menu when toolbar is fixed to block.
-* Fix keyboard trap in the form token component and improve accessibility.
-* Fix React warning when saving reusable blocks.
-* Fix issue with horizontal arrow key closing link dialog in fixed toolbar mode.
-* Fix image resize handlers in RTL mode.
-* Prevent "Add New" dropdown from overriding other plugin functionality.
-* Split Sass variables file into multiple files.
-* Updated blue links for better contrast.
-* Resolve notice when template variable is not set.
-* Added unit tests for row panel, color panel (snapshot), and warning components.
-* Add unit tests for editor actions (with further cleanup).
-* Added snapshots tests for BlockControls.
-* Added documentation for Editable component.
-* Avoid caching vendor directory in Travis.
-* Add document on snapshot testing.
-* Add node and npm version check before build gets started.
-* Update cypress and use the newly introduced Cypress.platform functionality.
-* Improve composer.json setup.
-* Improve testing overview document.
+-   Introducing reusable global blocks. (Stored in a wp_blocks post type.)
+-   Add ability to lock down the editor when using templates so edits can happen but blocks can't be removed, moved, nor added.
+-   Handle and upgrade deprecated blocks. This allows to migrate attributes without invalidating blocks and an important part of the block API.
+-   Drag and drop upload support to gallery block.
+-   Extensibility:
+-   Expose packages/hooks public API under wp.hooks.
+-   Introduces withFilters higher-order component to make component filtering easier.
+-   Introduces getWrapperDisplayName helper function to make debugging React tree easier.
+-   Introduces compose function to unify composing higher-order components.
+-   Exposes hook for Block component.
+-   Updated demo post with a nicer presentation for people to test with.
+-   Added automated RTL support.
+-   Convert unknown shortcodes to Shortcode block when pasting.
+-   Avoid splitting blocks during rich text pasting.
+-   Disable block selection when resizing image.
+-   Prefetch meta-boxes and don't reload them on save.
+-   Support for all admin color schemes.
+-   Close sidebar when resizing from non mobile breakpoints to mobile sizes.
+-   Apply content autop disabling filter before do_blocks. Also fixes case where server-side rendered blocks produce extraneous whitespace in output.
+-   Use cite element instead of footer for quote and pull-quote source markup.
+-   Respect recency order when displaying Recent blocks.
+-   Update the behavior of notices reducer to respect ID as a unique identifier, removing duplicate entries.
+-   Improve quote to paragraph transformations. Fixes cases where quote would be split into two.
+-   Use two flex rows instead of one wrapped row in Url modal for cleaner and more consistent display.
+-   Avoid restricting endpoints to /wp/v2 in withApiData.
+-   Remove duplicated and simplify inserter between blocks styles.
+-   Remove unnecessary padding on top of editor when fixed toolbar is off.
+-   Avoid intercepting rendering of removed meta boxes.
+-   Replace redux-responsive with a simpler custom alternative, fixing a bug with IE11.
+-   Fix issues with bullet-point positioning affecting block display.
+-   Fix meta attributes selector not returning the correct value if edited.
+-   Fix inconsistent animation on settings button.
+-   Fix style issues on Custom HTML block's toolbar.
+-   Fix broken styles in "edit as HTML" mode.
+-   Fix image block description when no image is set.
+-   Fix horizontal overflow for selects with long names in sidebar.
+-   Fix case where link modal closes upon typing into UrlInput when toolbar is docked to the paragraph.
+-   Fix webpack config issue on Node 6.
+-   Fix issue with vertical arrow keys leaking to horizontal menu when toolbar is fixed to block.
+-   Fix keyboard trap in the form token component and improve accessibility.
+-   Fix React warning when saving reusable blocks.
+-   Fix issue with horizontal arrow key closing link dialog in fixed toolbar mode.
+-   Fix image resize handlers in RTL mode.
+-   Prevent "Add New" dropdown from overriding other plugin functionality.
+-   Split Sass variables file into multiple files.
+-   Updated blue links for better contrast.
+-   Resolve notice when template variable is not set.
+-   Added unit tests for row panel, color panel (snapshot), and warning components.
+-   Add unit tests for editor actions (with further cleanup).
+-   Added snapshots tests for BlockControls.
+-   Added documentation for Editable component.
+-   Avoid caching vendor directory in Travis.
+-   Add document on snapshot testing.
+-   Add node and npm version check before build gets started.
+-   Update cypress and use the newly introduced Cypress.platform functionality.
+-   Improve composer.json setup.
+-   Improve testing overview document.
 
 = 1.8.1 =
 
-* Add ability to switch published post back to draft.
-* Fix issue with when changing column count in "text columns" block.
-* Prioritize common items in the autocomplete inserter.
-* Avoid changing publish/update button label when saving draft.
-* Add bottom padding to the editor container to improve experience of writing long posts.
-* Adjust the Classic block toolbar so it's doesn't jump.
-* Colorize the little arrow on the left of the admin menu to white to match body content.
-* Abort focus update when editor is not yet initialized.
-* Update autocomplete suggestions colors to have a sufficient color contrast ratio.
+-   Add ability to switch published post back to draft.
+-   Fix issue with when changing column count in "text columns" block.
+-   Prioritize common items in the autocomplete inserter.
+-   Avoid changing publish/update button label when saving draft.
+-   Add bottom padding to the editor container to improve experience of writing long posts.
+-   Adjust the Classic block toolbar so it's doesn't jump.
+-   Colorize the little arrow on the left of the admin menu to white to match body content.
+-   Abort focus update when editor is not yet initialized.
+-   Update autocomplete suggestions colors to have a sufficient color contrast ratio.
 
 = 1.8.0 =
 
-* Introduce block-templates as a list of blocks specification. Allows a custom post type to define a pre-configured set of blocks to be render upon creation of a new item.
-* New tools menu design, preparing the way for more extensibility options.
-* Block API change: use simpler JS object notation for declaring attribute sources.
-* Add function to allow filtering allowed block types.
-* Show popovers full screen on mobile, improving several mobile interactions.
-* Began work on publishing flow improvements with an indication of publishing (or updating a published post) action by introducing a button state and label updates.
-* Made docked-toolbar the default after different rounds of feedback and testing. Both options are still present.
-* Provide mechanism for plugin authors to fallback to classic editor when registering meta-boxes. Also includes the ability to disable a specific meta-box in the context of Gutenberg alone.
-* Updated color pickers with color indications and collapsible panels.
-* Update icon and tooltip for table of contents menu.
-* Added contrast checker for paragraph color options.
-* Improve pasting plaintext and shortcode data.
-* Convert unknown shortcode into shortcode block when pasting.
-* Updated notices design and positioning.
-* Move the URL handler when pasting to the raw handler mechanism.
-* Define custom classNames support for blocks using the new extensibility hooks with opt-out behaviour.
-* Add reusable blocks state effects.
-* Remove sibling inserter from inside multi-selection blocks.
-* Image block alt text enhancements.
-* Increase minimum width and height of resized images.
-* Allow using escape key to deselect a multi-selection.
-* Preserve settings when rebooting from crash.
-* Improve structure of store persist mechanism.
-* Extract reusable BlockList component to allow nesting compositions.
-* Extract BlockToolbar, BlockMover, BlockSwitcher, PostTitle, WritingFlow, TableOfContents, Undo/Redo Buttons, MultiBlockSwitcher, PostPublishWithDropdown, KeyboardShortcuts, DocumentOutlineCheck, PostTrashCheck, Notices,  as reusable components.
-* Consolidate block naming requirements.
-* Avoid persisting sidebar state on mobile devices.
-* Ensure backwards compatibility to matchers syntax.
-* Show untitled posts as (no title) in url auto-complete.
-* Extract fixedToolbar as a prop of BlockList.
-* Restore insertion point blue line.
-* Display outline tree even if only one heading is used.
-* Allow media upload button to specify a custom title (and fix grammar issue).
-* Fix issue with block mover showing on top of url input.
-* Fix case where tooltips would get stuck on buttons.
-* Fix transformations between quote and list blocks.
-* Fix issue with converting empty classic text to multiple blocks.
-* Fix issue with audio block not updating the toolbar area.
-* Fix contrast issues in button block.
-* Fix change detection to maintain multiple instances of state.
-* Fix text columns focus style.
-* Fix embed category example in docs.
-* Fix button link modal not closing.
-* Fix styling issue with sibling inserter.
-* Fix alignment of block toolbar in wide and full-width.
-* Fix issue when inserting image with empty caption.
-* Fix issue with sibling inserter not appearing in IE11.
-* Fix issue when inserting pullquotes.
-* Fix horizontal scrollbar when floating images to the left.
-* Fix alignment issue with embed videos.
-* Drop withContext optional mapSettingsToProps and fix issue when inserting new image.
-* Require @wordpress import path for application entry points.
-* Resolve errors in IE11 when using the inserter.
-* Added tests for Notice and UrlInput components.
-* Added tests for DefaultBlockAppender.
-* Log debugging messages for invalid blocks.
-* Reduce build size significantly by fixing import statements.
-* Update re-resizeable dependency.
-* Initial document page for extensibility purposes.
-* Added documentation for Editable component.
-* Move all components related to the specific post-edit page into its own folder.
-* Introduce snapshots for testing.
+-   Introduce block-templates as a list of blocks specification. Allows a custom post type to define a pre-configured set of blocks to be render upon creation of a new item.
+-   New tools menu design, preparing the way for more extensibility options.
+-   Block API change: use simpler JS object notation for declaring attribute sources.
+-   Add function to allow filtering allowed block types.
+-   Show popovers full screen on mobile, improving several mobile interactions.
+-   Began work on publishing flow improvements with an indication of publishing (or updating a published post) action by introducing a button state and label updates.
+-   Made docked-toolbar the default after different rounds of feedback and testing. Both options are still present.
+-   Provide mechanism for plugin authors to fallback to classic editor when registering meta-boxes. Also includes the ability to disable a specific meta-box in the context of Gutenberg alone.
+-   Updated color pickers with color indications and collapsible panels.
+-   Update icon and tooltip for table of contents menu.
+-   Added contrast checker for paragraph color options.
+-   Improve pasting plaintext and shortcode data.
+-   Convert unknown shortcode into shortcode block when pasting.
+-   Updated notices design and positioning.
+-   Move the URL handler when pasting to the raw handler mechanism.
+-   Define custom classNames support for blocks using the new extensibility hooks with opt-out behaviour.
+-   Add reusable blocks state effects.
+-   Remove sibling inserter from inside multi-selection blocks.
+-   Image block alt text enhancements.
+-   Increase minimum width and height of resized images.
+-   Allow using escape key to deselect a multi-selection.
+-   Preserve settings when rebooting from crash.
+-   Improve structure of store persist mechanism.
+-   Extract reusable BlockList component to allow nesting compositions.
+-   Extract BlockToolbar, BlockMover, BlockSwitcher, PostTitle, WritingFlow, TableOfContents, Undo/Redo Buttons, MultiBlockSwitcher, PostPublishWithDropdown, KeyboardShortcuts, DocumentOutlineCheck, PostTrashCheck, Notices, as reusable components.
+-   Consolidate block naming requirements.
+-   Avoid persisting sidebar state on mobile devices.
+-   Ensure backwards compatibility to matchers syntax.
+-   Show untitled posts as (no title) in url auto-complete.
+-   Extract fixedToolbar as a prop of BlockList.
+-   Restore insertion point blue line.
+-   Display outline tree even if only one heading is used.
+-   Allow media upload button to specify a custom title (and fix grammar issue).
+-   Fix issue with block mover showing on top of url input.
+-   Fix case where tooltips would get stuck on buttons.
+-   Fix transformations between quote and list blocks.
+-   Fix issue with converting empty classic text to multiple blocks.
+-   Fix issue with audio block not updating the toolbar area.
+-   Fix contrast issues in button block.
+-   Fix change detection to maintain multiple instances of state.
+-   Fix text columns focus style.
+-   Fix embed category example in docs.
+-   Fix button link modal not closing.
+-   Fix styling issue with sibling inserter.
+-   Fix alignment of block toolbar in wide and full-width.
+-   Fix issue when inserting image with empty caption.
+-   Fix issue with sibling inserter not appearing in IE11.
+-   Fix issue when inserting pullquotes.
+-   Fix horizontal scrollbar when floating images to the left.
+-   Fix alignment issue with embed videos.
+-   Drop withContext optional mapSettingsToProps and fix issue when inserting new image.
+-   Require @wordpress import path for application entry points.
+-   Resolve errors in IE11 when using the inserter.
+-   Added tests for Notice and UrlInput components.
+-   Added tests for DefaultBlockAppender.
+-   Log debugging messages for invalid blocks.
+-   Reduce build size significantly by fixing import statements.
+-   Update re-resizeable dependency.
+-   Initial document page for extensibility purposes.
+-   Added documentation for Editable component.
+-   Move all components related to the specific post-edit page into its own folder.
+-   Introduce snapshots for testing.
 
 = 1.7.0 =
 
-* Add toggle to switch between top-level toolbar and toolbars attached to each block. We have gotten great feedback on the benefits of both approaches and want to expand testing of each.
-* Ability to transform multiple-selected blocks at once — multiple images into a gallery, multiple paragraphs into lists.
-* Add @-mention autocomplete for users in a site.
-* Add data layer for reusable blocks and wp_blocks post type name.
-* Allow pasting standalone images and uploading them (also supports pasting base64 encoded images).
-* Allow block nesting from a parser point of view. This is the foundation for handling nested blocks in the UI.
-* Full design update to focus styles around the UI.
-* Block Extensibility (Hooks): filters may inspect and mutate block settings before the block is registered using hooks available at wp.blocks.addFilter. Testing with internal functionality first.
-* Moved docs to https://wordpress.org/gutenberg/handbook/
-* Refactor "changed post" functionality into higher order component and fix issue with wrongly reporting unsaved changes.
-* Refactor meta-boxes to render inline, without iframes.
-* Disable auto-p for block based posts, solving various issues around conflicting paragraph structures, freeform content, and text blocks.
-* Placed "table of contents" button in the header area and disable when there are no blocks in the content.
-* Redesigned the button block with inline URL field.
-* Improve performance by refactoring block-multi-controls out of VisualEditorBlock.
-* Replace react-slot-fill with our own first-party implementation. Part one, and part two for better handling of event bubbling within portals.
-* Improve autocomplete behaviour by using focus outside utility. This solves an issue with selecting items on mobile.
-* Capture and recover from application errors, offering the option to copy the existing contents to the clipboard.
-* Expose editor reusable components. These will allow editor variations to be constructed with more ease.
-* Add polyfill for permalink_structure option to wp-json. (Corresponding trac ticket.) Several REST API compat issues are going to be addressed like this. This allows Gutenberg to implement permalink editing.
-* Unslash post content before parsing during save, fixing bugs with block attributes.
-* Keyboard navigation overhaul of the inserter with accessibility improvements (accessing tabs, etc).
-* Add paragraph count to table of contents element.
-* General Navigable family of components.
-* Add contrast checker message when color combinations are hard to read.
-* Add "no posts found" message to latest posts block.
-* Improve color highlight selection and browser consistency.
-* Add aria-expanded attribute to settings button.
-* Add loading message to preview window.
-* Extract PostFeaturedImage, PostLastRevision, PostComments, PostTaxonomies, PageAttributes, PostTextEditor, BlockInspector, into reusable modules.
-* Collapse advanced block controls by default.
-* Update max number of columns when removing an image from a gallery.
-* Prevent the post schedule component from having invalid dates.
-* Make sure the inspector for a gallery block is shown when it has just one image.
-* Accessibility improvements for inline autocomplete components.
-* Update caption color for contrast.
-* Update visual display of the "remove x" button on gallery-items.
-* Improve classic block toolbar display and behaviour.
-* Dismiss tooltip when clicking a button or when wrapper node becomes disabled.
-* Restore block movers on floated items.
-* Add spacing around date and label.
-* Adjust raw handler "mode" option for readability.
-* Improve e2e testing performance.
-* Add fixture for undelimited freeform block.
-* Hold jQuery ready only when there are metaboxes and ignore advanced ones.
-* Make sure image size values are integers.
-* Fix floated gallery styles in the front-end.
-* Fix issue with image block not loading properly.
-* Fix issue with missing function in IE11.
-* Fix transformation of empty images into gallery and back.
-* Fix overflow issues on mobile.
-* Fix accidental block hover on iOS.
-* Fix toolbar state issue with slot-fill utility.
-* Fix case of too many undo levels building up.
-* Fix stylesheet load ordering issue.
-* Prevent input events from URLInput from being captured by Editable.
-* Force onChange to be updated with TinyMCE content before merge.
-* Polish heading toolbar buttons.
-* Remove image resizing on mobile.
-* Remove findDOMNode usage from Autocomplete component.
-* Rename references of rawContent as innerHTML.
-* Add tests and handle empty fills in slot-fill.
-* Add tests for block mover.
-* Add multi-select e2e test and fix issue with escape key.
-* Bump node version to active LTS.
-* Update TinyMCE to 4.7.2, fixing several bugs like toolbar flickering, visible placeholders when there is text, navigation breaks when encountering format boundaries, typing in FF after starting a bullet-list.
+-   Add toggle to switch between top-level toolbar and toolbars attached to each block. We have gotten great feedback on the benefits of both approaches and want to expand testing of each.
+-   Ability to transform multiple-selected blocks at once — multiple images into a gallery, multiple paragraphs into lists.
+-   Add @-mention autocomplete for users in a site.
+-   Add data layer for reusable blocks and wp_blocks post type name.
+-   Allow pasting standalone images and uploading them (also supports pasting base64 encoded images).
+-   Allow block nesting from a parser point of view. This is the foundation for handling nested blocks in the UI.
+-   Full design update to focus styles around the UI.
+-   Block Extensibility (Hooks): filters may inspect and mutate block settings before the block is registered using hooks available at wp.blocks.addFilter. Testing with internal functionality first.
+-   Moved docs to https://wordpress.org/gutenberg/handbook/
+-   Refactor "changed post" functionality into higher order component and fix issue with wrongly reporting unsaved changes.
+-   Refactor meta-boxes to render inline, without iframes.
+-   Disable auto-p for block based posts, solving various issues around conflicting paragraph structures, freeform content, and text blocks.
+-   Placed "table of contents" button in the header area and disable when there are no blocks in the content.
+-   Redesigned the button block with inline URL field.
+-   Improve performance by refactoring block-multi-controls out of VisualEditorBlock.
+-   Replace react-slot-fill with our own first-party implementation. Part one, and part two for better handling of event bubbling within portals.
+-   Improve autocomplete behaviour by using focus outside utility. This solves an issue with selecting items on mobile.
+-   Capture and recover from application errors, offering the option to copy the existing contents to the clipboard.
+-   Expose editor reusable components. These will allow editor variations to be constructed with more ease.
+-   Add polyfill for permalink_structure option to wp-json. (Corresponding trac ticket.) Several REST API compat issues are going to be addressed like this. This allows Gutenberg to implement permalink editing.
+-   Unslash post content before parsing during save, fixing bugs with block attributes.
+-   Keyboard navigation overhaul of the inserter with accessibility improvements (accessing tabs, etc).
+-   Add paragraph count to table of contents element.
+-   General Navigable family of components.
+-   Add contrast checker message when color combinations are hard to read.
+-   Add "no posts found" message to latest posts block.
+-   Improve color highlight selection and browser consistency.
+-   Add aria-expanded attribute to settings button.
+-   Add loading message to preview window.
+-   Extract PostFeaturedImage, PostLastRevision, PostComments, PostTaxonomies, PageAttributes, PostTextEditor, BlockInspector, into reusable modules.
+-   Collapse advanced block controls by default.
+-   Update max number of columns when removing an image from a gallery.
+-   Prevent the post schedule component from having invalid dates.
+-   Make sure the inspector for a gallery block is shown when it has just one image.
+-   Accessibility improvements for inline autocomplete components.
+-   Update caption color for contrast.
+-   Update visual display of the "remove x" button on gallery-items.
+-   Improve classic block toolbar display and behaviour.
+-   Dismiss tooltip when clicking a button or when wrapper node becomes disabled.
+-   Restore block movers on floated items.
+-   Add spacing around date and label.
+-   Adjust raw handler "mode" option for readability.
+-   Improve e2e testing performance.
+-   Add fixture for undelimited freeform block.
+-   Hold jQuery ready only when there are metaboxes and ignore advanced ones.
+-   Make sure image size values are integers.
+-   Fix floated gallery styles in the front-end.
+-   Fix issue with image block not loading properly.
+-   Fix issue with missing function in IE11.
+-   Fix transformation of empty images into gallery and back.
+-   Fix overflow issues on mobile.
+-   Fix accidental block hover on iOS.
+-   Fix toolbar state issue with slot-fill utility.
+-   Fix case of too many undo levels building up.
+-   Fix stylesheet load ordering issue.
+-   Prevent input events from URLInput from being captured by Editable.
+-   Force onChange to be updated with TinyMCE content before merge.
+-   Polish heading toolbar buttons.
+-   Remove image resizing on mobile.
+-   Remove findDOMNode usage from Autocomplete component.
+-   Rename references of rawContent as innerHTML.
+-   Add tests and handle empty fills in slot-fill.
+-   Add tests for block mover.
+-   Add multi-select e2e test and fix issue with escape key.
+-   Bump node version to active LTS.
+-   Update TinyMCE to 4.7.2, fixing several bugs like toolbar flickering, visible placeholders when there is text, navigation breaks when encountering format boundaries, typing in FF after starting a bullet-list.
 
 = 1.6.1 =
 
-* Handle pasting shortcodes and converting to blocks.
-* Show loading message when opening preview.
-* Fix inline pasting (auto-link feature).
-* Fix undoing multi-selection delete operation.
-* Remove focus state after a selection is finished during multi-select.
-* Remove the "command" shortcut to navigate to the editor toolbar.
+-   Handle pasting shortcodes and converting to blocks.
+-   Show loading message when opening preview.
+-   Fix inline pasting (auto-link feature).
+-   Fix undoing multi-selection delete operation.
+-   Remove focus state after a selection is finished during multi-select.
+-   Remove the "command" shortcut to navigate to the editor toolbar.
 
 = 1.6.0 =
 
-* Move the block toolbar to the editor's top header. This experiment seeks to reduce the presence of UI obscuring content.
-* Alternate style for block boundaries and multi-selection. Also engages "edit" mode when using arrow keys (hides UI).
-* Complete rework of arrow keys navigation between blocks—faster, clearer, and respects caret position while traversing text blocks.
-* Added keyboard shortcuts to navigate regions.
-* Implement multi-selection mode using just arrow with shift keys and support horizontal arrows.
-* Suggest a post format for additional blocks (embeds, gallery, audio, video) and expand on the heuristics to include case of one format-block at the top plus a paragraph of text below as valid.
-* Allow converting a classic block (post) into several Gutenblocks.
-* Several performance improvements 🎉
-* * Avoid re-rendering all blocks on selection changes.
-* * Add memoization for multi-select selectors.
-* * Rework implementation of blockRef to avoid render cascade from block list.
-* * Use flatMap when allocating the block list for rendering.
-* * Reorganize logic to determine when a post can be saved to be less expensive.
-* Refactor handling of revisions to avoid loading them up-front, significantly reducing load time on long posts with many revisions.
-* Further memoization on selectors based on specific state keys.
-* Render meta-boxes as part of the main column, not as a collapsible box.
-* Improve handling of undo action stack by resetting only on setup. This makes undo a lot more usable in general.
-* Changes to block inserter design positioning tabs at the top. (1.5.1)
-* Remove multi-select buffer zone and throttle delay for a faster response.
-* API for handling custom formats/tokens in Editable.
-* Improve withApiData component to be able to serve cached data (if available) during an initial render.
-* Show block toolbar in HTML mode for mobile.
-* Update Shortcode block to use a textarea instead of single line input.
-* Increase width of invalid block message.
-* Avoid redirecting to Gutenberg when saving on classic editor. (1.5.2)
-* Don't show "edit as HTML" for the Code and Shortcode blocks.
-* Refactor notices state reducer as array optimizing performance.
-* Disable front-end styles for basic quote block.
-* Reorganize the meta-boxes components for code clarity.
-* Extract reusable PostSticky, PostFormat, PostPendingStatus, PostAuthor, PostTrash, PostExcerpt components.
-* Resolve issue with having to tab twice on the toolbar due to focusReturn utility interfering with button tooltips.
-* Reset min-width of Tooltip component.
-* Avoid function instantiation in render of WritingFlow component.
-* Add the gutenberg_can_edit_post_type filter for plugins to add or remove support for custom post types.
-* Update header toolbar keyboard navigation to include undo and redo buttons.
-* Don't show the classic editor dropdown on unsupported post types.
-* Drop resizable-box in favor of re-resizable to use in the image block resize handlers.
-* Correct placement of link-dialog after moving toolbar to the top.
-* Adjust revisions logic to link to latest entry.
-* Allow editable to accept aria attributes.
-* Add generic focus effect to popovers.
-* Remove unused focus prop from Button component.
-* Remove core namespace from demo content.
-* Enable iOS smooth scrolling within scroll containers.
-* Make sure link menu appears above sibling inserter.
-* Improve layout paneling for short-height viewports.
-* Fix problem with multi-select not working again after a group of blocks has been moved.
-* Fix problem with deleting a block in HTML mode.
-* Fix issue with keyboard navigation entering textareas (non contentEditable) and losing caret position.
-* Fix issue where clicking on an item within autocomplete would dismiss the popover and not select anything.
-* Fix visual issue with the document info popover. (1.5.2)
-* Fix bug with deleting featured image on a post.
-* Fix error with removing a block placeholder.
-* Fix problem with FF and meta-boxes.
-* Fix issue with Classic Text description showing all the time.
-* Fix issue with the color picker width.
-* Fix quick inserter display of custom block icons.
-* Fix missing node check when blurring a paragraph block.
-* Warn about misuses of z-index mappings.
-* Make use of the "build stages" feature in the travis config file.
-* Upgrade ESLint dependencies.
-* Move test configuration files to test/unit.
-* Add easy local environment setup and Cypress e2e tests.
+-   Move the block toolbar to the editor's top header. This experiment seeks to reduce the presence of UI obscuring content.
+-   Alternate style for block boundaries and multi-selection. Also engages "edit" mode when using arrow keys (hides UI).
+-   Complete rework of arrow keys navigation between blocks—faster, clearer, and respects caret position while traversing text blocks.
+-   Added keyboard shortcuts to navigate regions.
+-   Implement multi-selection mode using just arrow with shift keys and support horizontal arrows.
+-   Suggest a post format for additional blocks (embeds, gallery, audio, video) and expand on the heuristics to include case of one format-block at the top plus a paragraph of text below as valid.
+-   Allow converting a classic block (post) into several Gutenblocks.
+-   Several performance improvements 🎉
+-   -   Avoid re-rendering all blocks on selection changes.
+-   -   Add memoization for multi-select selectors.
+-   -   Rework implementation of blockRef to avoid render cascade from block list.
+-   -   Use flatMap when allocating the block list for rendering.
+-   -   Reorganize logic to determine when a post can be saved to be less expensive.
+-   Refactor handling of revisions to avoid loading them up-front, significantly reducing load time on long posts with many revisions.
+-   Further memoization on selectors based on specific state keys.
+-   Render meta-boxes as part of the main column, not as a collapsible box.
+-   Improve handling of undo action stack by resetting only on setup. This makes undo a lot more usable in general.
+-   Changes to block inserter design positioning tabs at the top. (1.5.1)
+-   Remove multi-select buffer zone and throttle delay for a faster response.
+-   API for handling custom formats/tokens in Editable.
+-   Improve withApiData component to be able to serve cached data (if available) during an initial render.
+-   Show block toolbar in HTML mode for mobile.
+-   Update Shortcode block to use a textarea instead of single line input.
+-   Increase width of invalid block message.
+-   Avoid redirecting to Gutenberg when saving on classic editor. (1.5.2)
+-   Don't show "edit as HTML" for the Code and Shortcode blocks.
+-   Refactor notices state reducer as array optimizing performance.
+-   Disable front-end styles for basic quote block.
+-   Reorganize the meta-boxes components for code clarity.
+-   Extract reusable PostSticky, PostFormat, PostPendingStatus, PostAuthor, PostTrash, PostExcerpt components.
+-   Resolve issue with having to tab twice on the toolbar due to focusReturn utility interfering with button tooltips.
+-   Reset min-width of Tooltip component.
+-   Avoid function instantiation in render of WritingFlow component.
+-   Add the gutenberg_can_edit_post_type filter for plugins to add or remove support for custom post types.
+-   Update header toolbar keyboard navigation to include undo and redo buttons.
+-   Don't show the classic editor dropdown on unsupported post types.
+-   Drop resizable-box in favor of re-resizable to use in the image block resize handlers.
+-   Correct placement of link-dialog after moving toolbar to the top.
+-   Adjust revisions logic to link to latest entry.
+-   Allow editable to accept aria attributes.
+-   Add generic focus effect to popovers.
+-   Remove unused focus prop from Button component.
+-   Remove core namespace from demo content.
+-   Enable iOS smooth scrolling within scroll containers.
+-   Make sure link menu appears above sibling inserter.
+-   Improve layout paneling for short-height viewports.
+-   Fix problem with multi-select not working again after a group of blocks has been moved.
+-   Fix problem with deleting a block in HTML mode.
+-   Fix issue with keyboard navigation entering textareas (non contentEditable) and losing caret position.
+-   Fix issue where clicking on an item within autocomplete would dismiss the popover and not select anything.
+-   Fix visual issue with the document info popover. (1.5.2)
+-   Fix bug with deleting featured image on a post.
+-   Fix error with removing a block placeholder.
+-   Fix problem with FF and meta-boxes.
+-   Fix issue with Classic Text description showing all the time.
+-   Fix issue with the color picker width.
+-   Fix quick inserter display of custom block icons.
+-   Fix missing node check when blurring a paragraph block.
+-   Warn about misuses of z-index mappings.
+-   Make use of the "build stages" feature in the travis config file.
+-   Upgrade ESLint dependencies.
+-   Move test configuration files to test/unit.
+-   Add easy local environment setup and Cypress e2e tests.
 
 = 1.5.2 =
 
-* Add the `gutenberg_can_edit_post_type` filter for plugins to add or remove support for custom post types.
-* Fix Classic Editor redirecting to Gutenberg when saving a post.
-* Fix Classic Editor dropdown showing on post types that don't support Gutenberg.
-* Fix Classic Editor dropdown hiding behind notices.
-* Fix an issue with collapsing popover content.
+-   Add the `gutenberg_can_edit_post_type` filter for plugins to add or remove support for custom post types.
+-   Fix Classic Editor redirecting to Gutenberg when saving a post.
+-   Fix Classic Editor dropdown showing on post types that don't support Gutenberg.
+-   Fix Classic Editor dropdown hiding behind notices.
+-   Fix an issue with collapsing popover content.
 
 = 1.5.1 =
 
-* New design for the inserter with tabs at the top and more space for text.
-* Fix problem with Firefox and the meta-boxes resize script.
-* Fix issue with Classic Text description showing without focus.
+-   New design for the inserter with tabs at the top and more space for text.
+-   Fix problem with Firefox and the meta-boxes resize script.
+-   Fix issue with Classic Text description showing without focus.
 
 = 1.5.0 =
 
-* Set Gutenberg as the default editor (still allow creating new posts in Classic Editor).
-* Add metabox support—this is an initial pass at supporting existing meta-boxes without intervention.
-* Display inserter button between blocks.
-* Improve block navigation performance.
-* Hide core namespace in comment serialization. wp:core/gallery becomes wp:gallery.
-* Implement a dropdown for Publish flow.
-* Allow multiselect to work on shift-click.
-* Insert new block from title on enter.
-* Use a dropdown for the block menu (settings, delete, edit as HTML).
-* Add expandable panel for post visibility.
-* Add expandable panel for post scheduling.
-* Implement more inline formatting boundaries.
-* Better clearing of block selection.
-* Show placeholder hint for slash autocomplete on new text blocks.
-* Remove multi-selection header in favor of default block controls (mover and menu).
-* Allow blocks to disable HTML edit mode.
-* Adjust transition and delay of inserter between blocks.
-* Added text color option for button block.
-* Hide extended settings if sidebar is closed.
-* New embed icons.
-* Move the store initialization to a dedicated component.
-* Improve scroll position of scrollable elements.
-* Drop undefined blocks from recent blocks.
-* Update HTML block description.
-* Update embed block description.
-* Add description for classic block.
-* PHPCS-specific improvements.
-* Add a default block icon.
-* Adjust line height of classic text to match paragraph blocks.
-* Adjust filter order in classic block so plugins that extend it can work properly.
-* Set textarea value as prop and not children.
-* Fix mobile issues with block setting menu.
-* Fix undefined colors warning.
-* Fix broken upload button on image placeholder.
-* Fix post edit URL when saving a post/page/CPT.
-* Fix conflict with new TinyMCE version and heading blocks.
-* Tweak block sibling element for better target surface.
-* Avoid loading Gutenberg assets on non-Gutenberg pages.
-* Adjust Jest configuration.
-* Document supportAnchor in block API.
-* Updated TinyMCE to latest.
-* Document block name usage in serialization and add example of serialized block.
-* Updated FAQ section.
-* Upgrade React and Enzyme dependencies.
+-   Set Gutenberg as the default editor (still allow creating new posts in Classic Editor).
+-   Add metabox support—this is an initial pass at supporting existing meta-boxes without intervention.
+-   Display inserter button between blocks.
+-   Improve block navigation performance.
+-   Hide core namespace in comment serialization. wp:core/gallery becomes wp:gallery.
+-   Implement a dropdown for Publish flow.
+-   Allow multiselect to work on shift-click.
+-   Insert new block from title on enter.
+-   Use a dropdown for the block menu (settings, delete, edit as HTML).
+-   Add expandable panel for post visibility.
+-   Add expandable panel for post scheduling.
+-   Implement more inline formatting boundaries.
+-   Better clearing of block selection.
+-   Show placeholder hint for slash autocomplete on new text blocks.
+-   Remove multi-selection header in favor of default block controls (mover and menu).
+-   Allow blocks to disable HTML edit mode.
+-   Adjust transition and delay of inserter between blocks.
+-   Added text color option for button block.
+-   Hide extended settings if sidebar is closed.
+-   New embed icons.
+-   Move the store initialization to a dedicated component.
+-   Improve scroll position of scrollable elements.
+-   Drop undefined blocks from recent blocks.
+-   Update HTML block description.
+-   Update embed block description.
+-   Add description for classic block.
+-   PHPCS-specific improvements.
+-   Add a default block icon.
+-   Adjust line height of classic text to match paragraph blocks.
+-   Adjust filter order in classic block so plugins that extend it can work properly.
+-   Set textarea value as prop and not children.
+-   Fix mobile issues with block setting menu.
+-   Fix undefined colors warning.
+-   Fix broken upload button on image placeholder.
+-   Fix post edit URL when saving a post/page/CPT.
+-   Fix conflict with new TinyMCE version and heading blocks.
+-   Tweak block sibling element for better target surface.
+-   Avoid loading Gutenberg assets on non-Gutenberg pages.
+-   Adjust Jest configuration.
+-   Document supportAnchor in block API.
+-   Updated TinyMCE to latest.
+-   Document block name usage in serialization and add example of serialized block.
+-   Updated FAQ section.
+-   Upgrade React and Enzyme dependencies.
 
 = 1.4.0 =
 
-* Redesigned the header area of the editor for clarity—groups content actions in the left, and post action in the right.
-* Initial REST API infrastructure for reusable global blocks.
-* Group block settings (delete, inspector, edit HTML) on an ellipsis button.
-* Added new reusable Dropdown component.
-* Show frequently used blocks in the inserter shortcuts (at the bottom of the post).
-* Offer option for the button block to clear content.
-* Refactor block toolbar component in preparation for some iterations (docked toolbar, for example).
-* Allow partial URLs in link input.
-* Avoid using state for tracking arrow key navigation in WritingFlow to prevent re-renders.
-* Improve mobile header after design cleanup.
-* Add focusReturn for Dropdown component.
-* Updated Audio block markup to use figure element.
-* Removed transition on multi-select affecting the perception of speed of the interaction.
-* Show Gallery block description even if there are no images.
-* Persist custom class names.
-* Merge initialization actions into a single action.
-* Fix scroll position when reordering blocks.
-* Fix case where the responsive treatment of the header area was hiding valuable actions.
-* Fix focus styles on the inserter.
-* Fix submenu visibility issue for certain users.
-* Cleanup no longer used code.
-* Document useOnce block API feature.
+-   Redesigned the header area of the editor for clarity—groups content actions in the left, and post action in the right.
+-   Initial REST API infrastructure for reusable global blocks.
+-   Group block settings (delete, inspector, edit HTML) on an ellipsis button.
+-   Added new reusable Dropdown component.
+-   Show frequently used blocks in the inserter shortcuts (at the bottom of the post).
+-   Offer option for the button block to clear content.
+-   Refactor block toolbar component in preparation for some iterations (docked toolbar, for example).
+-   Allow partial URLs in link input.
+-   Avoid using state for tracking arrow key navigation in WritingFlow to prevent re-renders.
+-   Improve mobile header after design cleanup.
+-   Add focusReturn for Dropdown component.
+-   Updated Audio block markup to use figure element.
+-   Removed transition on multi-select affecting the perception of speed of the interaction.
+-   Show Gallery block description even if there are no images.
+-   Persist custom class names.
+-   Merge initialization actions into a single action.
+-   Fix scroll position when reordering blocks.
+-   Fix case where the responsive treatment of the header area was hiding valuable actions.
+-   Fix focus styles on the inserter.
+-   Fix submenu visibility issue for certain users.
+-   Cleanup no longer used code.
+-   Document useOnce block API feature.
 
 = 1.3.0 =
 
-* Add an opacity range slider to the cover image block.
-* Offer the option to convert a single block to an HTML block when conflicting content is detected.
-* Persist recently used blocks through sessions.
-* Added support for pasting plain text markdown content and converting to blocks.
-* The block inspector groups features and settings in expandable panels.
-* Accessibility improvements to the color palette component.
-* Added a “feedback” link in the Gutenberg side menu.
-* Use expandable panels for advanced block features (class name and anchor).
-* Removed touch listeners from multi select.
-* Added block descriptions to blocks that didn’t have them.
-* Allow stored values to be updated with new defaults.
-* Refactor image block to use withApiData and fix issues with .tiff images.
-* Clean up non inline elements when pasting inline content.
-* Remove unused code in BlockList component.
-* Added “transform into” text to block switcher.
-* Fixed sidebar overflow causing extra scrollbars.
-* Fixed multi-select inside new scroll container.
-* Fixed image block error with .tiff image.
-* Fixed the content overflowing outside the verse block container.
-* Fixed issues with sticky quick toolbar position.
-* Fixed hitting enter when a block is selected creating a default block after selected block.
-* Fixed teaser markup in demo content.
-* Clean working directory before packaging plugin.
-* Updated Webpack dependencies.
-* Updated Jest and React.
+-   Add an opacity range slider to the cover image block.
+-   Offer the option to convert a single block to an HTML block when conflicting content is detected.
+-   Persist recently used blocks through sessions.
+-   Added support for pasting plain text markdown content and converting to blocks.
+-   The block inspector groups features and settings in expandable panels.
+-   Accessibility improvements to the color palette component.
+-   Added a “feedback” link in the Gutenberg side menu.
+-   Use expandable panels for advanced block features (class name and anchor).
+-   Removed touch listeners from multi select.
+-   Added block descriptions to blocks that didn’t have them.
+-   Allow stored values to be updated with new defaults.
+-   Refactor image block to use withApiData and fix issues with .tiff images.
+-   Clean up non inline elements when pasting inline content.
+-   Remove unused code in BlockList component.
+-   Added “transform into” text to block switcher.
+-   Fixed sidebar overflow causing extra scrollbars.
+-   Fixed multi-select inside new scroll container.
+-   Fixed image block error with .tiff image.
+-   Fixed the content overflowing outside the verse block container.
+-   Fixed issues with sticky quick toolbar position.
+-   Fixed hitting enter when a block is selected creating a default block after selected block.
+-   Fixed teaser markup in demo content.
+-   Clean working directory before packaging plugin.
+-   Updated Webpack dependencies.
+-   Updated Jest and React.
 
 = 1.2.1 =
 
-* Fix issue where invalid block resolution options were not clickable.
+-   Fix issue where invalid block resolution options were not clickable.
 
 = 1.2.0 =
 
-* Resolve block conflicts when editing a block post in the classic editor. Gutenberg's strict content validation has helped identify formatting incompatibilities, and continued improvements are planned for future releases.
-* Add word and block count to table of contents.
-* Add support for meta attributes (custom fields) in block attributes. This allows block authors to specify attributes to live outside of post_content entirely.
-* Allow Gutenberg to be the default editor for posts with blocks and add links to classic editor.
-* Accessibility: add landmark regions.
-* Add metabox placeholder shell.
-* Add crash recovery for blocks which error while saving.
-* Hide Sidebar panels if the user doesn't have the right capabilities.
-* Refactor PostTaxonomies to use 'withApiData'.
-* Create 'withApiData' higher order component for managing API data.
-* Make casing consistent.
-* Allow toolbar wrapper to be clicked through.
-* Support and bootstrap server-registered block attribute schemas.
-* Shift focus into popover when opened.
-* Reuse the tabbable utility to retrieve the tabbables elements in WritingFlow.
-* Change placeholder text on button.
-* Persist the sate of the sidebar across refresh.
-* Use a small multiselect buffer zone, improving multiple block selection.
-* Close popover by escape keypress.
-* Improve dropzone contrast ratio.
-* Improve search message to add context.
-* Improve string extraction for localized strings.
-* Fixed z-index issue of gallery image inline menu.
-* Fixed image block resizing to set the figure wrapper.
-* Fixed column widths in gallery block.
-* Fixed parsing in do_blocks() and rendering of blocks on frontend in the_content.
-* Fixed position of upload svg on mobile.
+-   Resolve block conflicts when editing a block post in the classic editor. Gutenberg's strict content validation has helped identify formatting incompatibilities, and continued improvements are planned for future releases.
+-   Add word and block count to table of contents.
+-   Add support for meta attributes (custom fields) in block attributes. This allows block authors to specify attributes to live outside of post_content entirely.
+-   Allow Gutenberg to be the default editor for posts with blocks and add links to classic editor.
+-   Accessibility: add landmark regions.
+-   Add metabox placeholder shell.
+-   Add crash recovery for blocks which error while saving.
+-   Hide Sidebar panels if the user doesn't have the right capabilities.
+-   Refactor PostTaxonomies to use 'withApiData'.
+-   Create 'withApiData' higher order component for managing API data.
+-   Make casing consistent.
+-   Allow toolbar wrapper to be clicked through.
+-   Support and bootstrap server-registered block attribute schemas.
+-   Shift focus into popover when opened.
+-   Reuse the tabbable utility to retrieve the tabbables elements in WritingFlow.
+-   Change placeholder text on button.
+-   Persist the sate of the sidebar across refresh.
+-   Use a small multiselect buffer zone, improving multiple block selection.
+-   Close popover by escape keypress.
+-   Improve dropzone contrast ratio.
+-   Improve search message to add context.
+-   Improve string extraction for localized strings.
+-   Fixed z-index issue of gallery image inline menu.
+-   Fixed image block resizing to set the figure wrapper.
+-   Fixed column widths in gallery block.
+-   Fixed parsing in do_blocks() and rendering of blocks on frontend in the_content.
+-   Fixed position of upload svg on mobile.
 
 = 1.1.0 =
 
-* Add blocks "slash" autocomplete—shortcut to continue adding new block without leaving the keyboard.
-* Add ability to remove an image from a gallery from within the block (selecting image).
-* Add option to open a created link in a new window.
-* Support and bootstrap server-registered block attribute schemas.
-* Improve accessibility of add-new-category form.
-* Documentation gets an updated design and content improvements.
-* Adjust column width calculation in gallery block to properly respect column count.
-* Move pending review control together with sticky toggle at the bottom.
-* Add caption styling for video block.
-* Allow removing a "classic text" block with backspaces.
-* Allow Button block to show placeholder text.
-* Drop the deprecated button-secondary class name.
-* Fix link dialog not showing in Safari when caret is in the middle of the word.
-* Fix adding new categories and position newly added term at the top.
-* Fix the resetting of drop-zone states after dropping a file.
-* Fix embed saving "undefined" text when URL is not set.
-* Fix placeholder styling on Text when background color is set.
-* Update Composer + PHPCS.
-* Rename default block handlers.
-* Update code syntax tabs in docutron.
-* Link to plugin download and github repo from docutron.
-* Added block API document.
-* Add "Edit and Save" document.
+-   Add blocks "slash" autocomplete—shortcut to continue adding new block without leaving the keyboard.
+-   Add ability to remove an image from a gallery from within the block (selecting image).
+-   Add option to open a created link in a new window.
+-   Support and bootstrap server-registered block attribute schemas.
+-   Improve accessibility of add-new-category form.
+-   Documentation gets an updated design and content improvements.
+-   Adjust column width calculation in gallery block to properly respect column count.
+-   Move pending review control together with sticky toggle at the bottom.
+-   Add caption styling for video block.
+-   Allow removing a "classic text" block with backspaces.
+-   Allow Button block to show placeholder text.
+-   Drop the deprecated button-secondary class name.
+-   Fix link dialog not showing in Safari when caret is in the middle of the word.
+-   Fix adding new categories and position newly added term at the top.
+-   Fix the resetting of drop-zone states after dropping a file.
+-   Fix embed saving "undefined" text when URL is not set.
+-   Fix placeholder styling on Text when background color is set.
+-   Update Composer + PHPCS.
+-   Rename default block handlers.
+-   Update code syntax tabs in docutron.
+-   Link to plugin download and github repo from docutron.
+-   Added block API document.
+-   Add "Edit and Save" document.
 
 = 1.0.0 =
-* Restored keyboard navigation with more robust implementation, addressing previous browser issues.
-* Added drag and drop for media with pointer to create new blocks.
-* Merged paragraph and cover text blocks (includes the colors and font size options).
-* Reworked color palette picker with a "clear" and a "custom color" option.
-* Further improvements to inline pasting and fixing errant empty blocks.
-* Added thumbnail size selector to image blocks.
-* Added support for url input and align and edit buttons to audio block.
-* Persist the state of the sidebar across page refresh.
-* Persist state of sidebar panels on page refresh.
-* Persist editor mode on page refresh.
-* New withAPIData higher-order component for making it easier to manage data needs.
-* Preserve unknown block and remove "freeform" comment delimiters (unrecognized HTML is handled without comment delimiters).
-* Show "add new term" in hierarchical taxonomies (including categories).
-* Show tooltip only after mouseover delay.
-* Show post formats only if the post type supports them.
-* Added align and edit buttons to video block.
-* Preload data in withApiData to improve perceived performance.
-* Improve accessibility of sidebar modes.
-* Allow changing cover-image settings before uploading an image.
-* Improve validation leniency around non-meaningful differences.
-* Take into account capabilities for publishing action.
-* Update author selector to show only users capable of authoring posts.
-* Normalize pasted blockquote contents.
-* Refactored featured image, page attributes to use withApiData
-* Added a fix to avoid cloning nodes by passing pasted HTML string.
-* Added a fix to avoid re-encoding on encoded posts.
-* Fixed resetting the focus config when block already selected.
-* Allowing adding of plain text after insert link at the end of a paragraph.
-* Update to latest TinyMCE version.
-* Show only users capable of authoring posts.
-* Add submit for review to publish for contributor.
-* Delete or backspace in an empty "classic text" block now removes it.
-* Check for type in block transformations logic.
-* Fixed drop-down menu issue on classic text.
-* Added filter to allow post types to disable "edit in gutenberg" links.
-* Made UrlInput and UrlInputButton available as reusable components.
-* Use wordpress/a11y package instead of global.
-* Added npm5 package-lock.
-* We welcome all your feedback and contributions on the project repository, or ping us in #core-editor. Follow the "gutenberg" tag for past updates.
+
+-   Restored keyboard navigation with more robust implementation, addressing previous browser issues.
+-   Added drag and drop for media with pointer to create new blocks.
+-   Merged paragraph and cover text blocks (includes the colors and font size options).
+-   Reworked color palette picker with a "clear" and a "custom color" option.
+-   Further improvements to inline pasting and fixing errant empty blocks.
+-   Added thumbnail size selector to image blocks.
+-   Added support for url input and align and edit buttons to audio block.
+-   Persist the state of the sidebar across page refresh.
+-   Persist state of sidebar panels on page refresh.
+-   Persist editor mode on page refresh.
+-   New withAPIData higher-order component for making it easier to manage data needs.
+-   Preserve unknown block and remove "freeform" comment delimiters (unrecognized HTML is handled without comment delimiters).
+-   Show "add new term" in hierarchical taxonomies (including categories).
+-   Show tooltip only after mouseover delay.
+-   Show post formats only if the post type supports them.
+-   Added align and edit buttons to video block.
+-   Preload data in withApiData to improve perceived performance.
+-   Improve accessibility of sidebar modes.
+-   Allow changing cover-image settings before uploading an image.
+-   Improve validation leniency around non-meaningful differences.
+-   Take into account capabilities for publishing action.
+-   Update author selector to show only users capable of authoring posts.
+-   Normalize pasted blockquote contents.
+-   Refactored featured image, page attributes to use withApiData
+-   Added a fix to avoid cloning nodes by passing pasted HTML string.
+-   Added a fix to avoid re-encoding on encoded posts.
+-   Fixed resetting the focus config when block already selected.
+-   Allowing adding of plain text after insert link at the end of a paragraph.
+-   Update to latest TinyMCE version.
+-   Show only users capable of authoring posts.
+-   Add submit for review to publish for contributor.
+-   Delete or backspace in an empty "classic text" block now removes it.
+-   Check for type in block transformations logic.
+-   Fixed drop-down menu issue on classic text.
+-   Added filter to allow post types to disable "edit in gutenberg" links.
+-   Made UrlInput and UrlInputButton available as reusable components.
+-   Use wordpress/a11y package instead of global.
+-   Added npm5 package-lock.
+-   We welcome all your feedback and contributions on the project repository, or ping us in #core-editor. Follow the "gutenberg" tag for past updates.
 
 = 0.9.0 =
-* Added ability to change font-size in cover text using slider and number input.
-* Added support for custom anchors (ids) on blocks, allowing to link directly to a section of the post.
-* Updated pull-quote design.
-* Created custom color palette component with "clear" option and "custom color" option. (And better markup and accessibility.)
-* Improve pasting: recognizing more elements, adding tests, stripping non-semantic markup, etc.
-* Improve gallery visual design and fix cropping in Safari.
-* Allow selecting a heading block from the table-of-contents panel directly.
-* Make toolbar slide horizontally for mobile.
-* Improve range-input control with a number input.
-* Fix pasting problems (handling of block attributes).
-* More stripping of unhandled elements during paste.
-* Show post format selector only for posts.
-* Display nicer URLs when editing links.
-* More compact save indicator.
-* Disabled arrow key navigation between blocks as we refine implementation.
-* Removed blank target from "view post" in notices.
-* Fix empty links still rendering ont he front-end.
-* Fix shadow on inline toolbars.
-* Fix problem with inserting pull-quotes.
-* Fix drag and drop on image block.
-* Removed warning when publishing.
-* Don't provide version for vendor scripts.
-* Clean category code in block registration.
-* Added history and resources docs.
+
+-   Added ability to change font-size in cover text using slider and number input.
+-   Added support for custom anchors (ids) on blocks, allowing to link directly to a section of the post.
+-   Updated pull-quote design.
+-   Created custom color palette component with "clear" option and "custom color" option. (And better markup and accessibility.)
+-   Improve pasting: recognizing more elements, adding tests, stripping non-semantic markup, etc.
+-   Improve gallery visual design and fix cropping in Safari.
+-   Allow selecting a heading block from the table-of-contents panel directly.
+-   Make toolbar slide horizontally for mobile.
+-   Improve range-input control with a number input.
+-   Fix pasting problems (handling of block attributes).
+-   More stripping of unhandled elements during paste.
+-   Show post format selector only for posts.
+-   Display nicer URLs when editing links.
+-   More compact save indicator.
+-   Disabled arrow key navigation between blocks as we refine implementation.
+-   Removed blank target from "view post" in notices.
+-   Fix empty links still rendering ont he front-end.
+-   Fix shadow on inline toolbars.
+-   Fix problem with inserting pull-quotes.
+-   Fix drag and drop on image block.
+-   Removed warning when publishing.
+-   Don't provide version for vendor scripts.
+-   Clean category code in block registration.
+-   Added history and resources docs.
 
 = 0.8.0 =
-* New Categories Block (based on existing widget).
-* New Text Columns Block (initial exploration of text-only multiple columns).
-* New Video Block.
-* New Shortcode Block.
-* New Audio Block.
-* Added resizing handlers to Image Block.
-* Added direct image upload button to Image Block and Gallery Block.
-* Give option to transform a block to Classic when it encounters problems.
-* Give option to Overwrite changes on a block detected as invalid.
-* Added "link to" option in galleries.
-* Added support for custom taxonomies.
-* Added post formats selector to post settings.
-* Added keywords support (aliases) to various blocks to improve search discovery.
-* Significant improvements to the way attributes are specified in the Block API and its clarity (handles defaults and types).
-* Added Tooltip component displaying aria-labels from buttons.
-* Removed stats tracking code.
-* Updated design document.
-* Capture and recover from block rendering runtime errors.
-* Handle enter when focusing on outer boundary of a block.
-* Reduce galleries json attributes data to a minimum.
-* Added caption styles to the front-end for images and embeds.
-* Added missing front-end alignment classes for table and cover-text blocks.
-* Only reset blocks on initial load to prevent state fluctuations.
-* Improve calculation of dirty state by making a diff against saved post.
-* Improve visual weight of toolbar by reducing its silhouette.
-* Improve rendering of galleries on the front-end.
-* Improve Cover Image placeholder visual presentation.
-* Improve front-end display of quotes.
-* Improve responsive design of galleries on the front-end.
-* Allow previewing new posts that are yet to be saved.
-* Reset scrolling position within inserter when switching tabs.
-* Refactor popover to render at root of document.
-* Refactor withFocusReturn to handle accessibility better in more contexts.
-* Prevent overlap between multi-selection and within-block selection.
-* Clear save notices when triggering a new save.
-* Disable "preview" button if post is not saveable.
-* Renamed blocks.query to blocks.source for clarity and updated documentation.
-* Rearrange block stylesheets to reflect display and editor styles.
-* Use @wordpress dependencies consistently.
-* Added validation checks for specifying a block's category.
-* Fix problems with quote initialization and list transformation.
-* Fix issue where Cover Image was being considered invalid after edits.
-* Fix errors in editable coming from Table block commands.
-* Fix error in latest posts block when date is not set for a post.
-* Fix issue with active color in ColorPalette component.
-* Prevent class=false serialization issue in covert-text.
-* Treat range control value as numeric.
-* Added warning when using Editable and passing non-array values.
-* Show block switcher above link input.
-* Updated rememo dependency.
-* Start consuming from separate @wordpress dependencies.
-* Fix problem with inserting new galleries.
-* Fix issue with embeds and missing captions.
-* Added outreach section to docs.
+
+-   New Categories Block (based on existing widget).
+-   New Text Columns Block (initial exploration of text-only multiple columns).
+-   New Video Block.
+-   New Shortcode Block.
+-   New Audio Block.
+-   Added resizing handlers to Image Block.
+-   Added direct image upload button to Image Block and Gallery Block.
+-   Give option to transform a block to Classic when it encounters problems.
+-   Give option to Overwrite changes on a block detected as invalid.
+-   Added "link to" option in galleries.
+-   Added support for custom taxonomies.
+-   Added post formats selector to post settings.
+-   Added keywords support (aliases) to various blocks to improve search discovery.
+-   Significant improvements to the way attributes are specified in the Block API and its clarity (handles defaults and types).
+-   Added Tooltip component displaying aria-labels from buttons.
+-   Removed stats tracking code.
+-   Updated design document.
+-   Capture and recover from block rendering runtime errors.
+-   Handle enter when focusing on outer boundary of a block.
+-   Reduce galleries json attributes data to a minimum.
+-   Added caption styles to the front-end for images and embeds.
+-   Added missing front-end alignment classes for table and cover-text blocks.
+-   Only reset blocks on initial load to prevent state fluctuations.
+-   Improve calculation of dirty state by making a diff against saved post.
+-   Improve visual weight of toolbar by reducing its silhouette.
+-   Improve rendering of galleries on the front-end.
+-   Improve Cover Image placeholder visual presentation.
+-   Improve front-end display of quotes.
+-   Improve responsive design of galleries on the front-end.
+-   Allow previewing new posts that are yet to be saved.
+-   Reset scrolling position within inserter when switching tabs.
+-   Refactor popover to render at root of document.
+-   Refactor withFocusReturn to handle accessibility better in more contexts.
+-   Prevent overlap between multi-selection and within-block selection.
+-   Clear save notices when triggering a new save.
+-   Disable "preview" button if post is not saveable.
+-   Renamed blocks.query to blocks.source for clarity and updated documentation.
+-   Rearrange block stylesheets to reflect display and editor styles.
+-   Use @wordpress dependencies consistently.
+-   Added validation checks for specifying a block's category.
+-   Fix problems with quote initialization and list transformation.
+-   Fix issue where Cover Image was being considered invalid after edits.
+-   Fix errors in editable coming from Table block commands.
+-   Fix error in latest posts block when date is not set for a post.
+-   Fix issue with active color in ColorPalette component.
+-   Prevent class=false serialization issue in covert-text.
+-   Treat range control value as numeric.
+-   Added warning when using Editable and passing non-array values.
+-   Show block switcher above link input.
+-   Updated rememo dependency.
+-   Start consuming from separate @wordpress dependencies.
+-   Fix problem with inserting new galleries.
+-   Fix issue with embeds and missing captions.
+-   Added outreach section to docs.
 
 = 0.7.1 =
-* Address problem with the freeform block and Jetpack's contact form.
+
+-   Address problem with the freeform block and Jetpack's contact form.
 
 = 0.7.0 =
-* Hide placeholders on focus—reduces visual distractions while writing.
-* Add PostAuthor dropdown to the UI.
-* Add theme support for customized color palettes and a shared component (applies to cover text and button blocks).
-* Add theme support for wide images.
-* Report on missing headings in the document outline feature.
-* Update block validation to make it less prone to over-eagerness with trivial changes (like whitespace and new lines).
-* Attempt to create an embed block automatically when pasting URL on a single line.
-* Save post before previewing.
-* Improve operations with "lists", enter on empty item creates new paragraph block, handling backspace, etc.
-* Don't serialize attributes that match default attributes.
-* Order link suggestions by relevance.
-* Order embeds for easier discoverability.
-* Added "keywords" property for searching blocks with aliases.
-* Added responsive styles for Table block in the front end.
-* Set default list type to be unordered list.
-* Improve accessibility of UrlInput component.
-* Improve accessibility and keyboard interaction of DropdownMenu.
-* Improve Popover component and use for PostVisibility.
-* Added higher order component for managing spoken messages.
-* Localize schema for WP API, avoiding initialization delay if schema is present.
-* Do not expose editor.settings to block authors.
-* Do not remove tables on pasting.
-* Consolidate block server-side files with client ones in the same directory.
-* Removed array of paragraphs structure from text block.
-* Trim whitespace when searching for blocks.
-* Document, test, and refactor DropdownMenu component.
-* Use separate mousetrap instance per component instance.
-* Add npm organization scope to WordPress dependencies.
-* Expand utilities around fixture regeneration.
-* Renamed "Text" to "Paragraph".
-* Fix multi-selection "delete" functionality.
-* Fix text color inline style.
-* Fix issue caused by changes with React build process.
-* Fix splitting editable without child nodes.
-* Use addQueryArgs in oEmbed proxy url.
-* Update dashicons with new icons.
-* Clarify enqueuing block assets functions.
-* Added code coverage information to docs.
-* Document how to create new docs.
-* Add example of add_theme_support in docs.
-* Added opt-in mechanism for learning what blocks are being added to the content.
+
+-   Hide placeholders on focus—reduces visual distractions while writing.
+-   Add PostAuthor dropdown to the UI.
+-   Add theme support for customized color palettes and a shared component (applies to cover text and button blocks).
+-   Add theme support for wide images.
+-   Report on missing headings in the document outline feature.
+-   Update block validation to make it less prone to over-eagerness with trivial changes (like whitespace and new lines).
+-   Attempt to create an embed block automatically when pasting URL on a single line.
+-   Save post before previewing.
+-   Improve operations with "lists", enter on empty item creates new paragraph block, handling backspace, etc.
+-   Don't serialize attributes that match default attributes.
+-   Order link suggestions by relevance.
+-   Order embeds for easier discoverability.
+-   Added "keywords" property for searching blocks with aliases.
+-   Added responsive styles for Table block in the front end.
+-   Set default list type to be unordered list.
+-   Improve accessibility of UrlInput component.
+-   Improve accessibility and keyboard interaction of DropdownMenu.
+-   Improve Popover component and use for PostVisibility.
+-   Added higher order component for managing spoken messages.
+-   Localize schema for WP API, avoiding initialization delay if schema is present.
+-   Do not expose editor.settings to block authors.
+-   Do not remove tables on pasting.
+-   Consolidate block server-side files with client ones in the same directory.
+-   Removed array of paragraphs structure from text block.
+-   Trim whitespace when searching for blocks.
+-   Document, test, and refactor DropdownMenu component.
+-   Use separate mousetrap instance per component instance.
+-   Add npm organization scope to WordPress dependencies.
+-   Expand utilities around fixture regeneration.
+-   Renamed "Text" to "Paragraph".
+-   Fix multi-selection "delete" functionality.
+-   Fix text color inline style.
+-   Fix issue caused by changes with React build process.
+-   Fix splitting editable without child nodes.
+-   Use addQueryArgs in oEmbed proxy url.
+-   Update dashicons with new icons.
+-   Clarify enqueuing block assets functions.
+-   Added code coverage information to docs.
+-   Document how to create new docs.
+-   Add example of add_theme_support in docs.
+-   Added opt-in mechanism for learning what blocks are being added to the content.
 
 = 0.6.0 =
-* Split paragraphs on enter—we have been exploring different behaviours here.
-* Added grid layout option for latest posts with columns slider control.
-* Show internal posts / pages results when creating links.
-* Added "Cover Text" block with background, text color, and full-width options.
-* Autosaving drafts.
-* Added "Read More" block.
-* Added color options to the button block.
-* Added mechanism for validating and protecting blocks that may have suffered unrecognized edits.
-* Add patterns plugin for text formatting shortcuts: create lists by adding * at the beginning of a text line, use # to create headings, and backticks for code.
-* Implement initial support for Cmd/Ctrl+Z (undo) and Cmd/Ctrl+Shift+Z (redo).
-* Improve pasting experience from outside editors by transforming content before converting to blocks.
-* Improve gallery creation flow by opening into "gallery" mode from placeholder.
-* Added page attributes with menu order setting.
-* Use two distinct icons for quote style variations.
-* Created KeyboardShortcuts component to handle keyboard events.
-* Add support for custom icons (non dashicons) on blocks.
-* Initialize new posts with auto-draft to match behaviour of existing editor.
-* Don't display "save" button for published posts.
-* Added ability to set a block as "use once" only (example: "read more" block).
-* Hide gallery display settings in media modal.
-* Simplify "cover image" markup and resolve conflict state in demo.
-* Introduce PHP classes for interacting with block types.
-* Announce block search results to assistive technologies.
-* Reveal "continue writing" shortcuts on focus.
-* Update document.title when the post title changes.
-* Added focus styles to several elements in the UI.
-* Added external-link component to handle links opening in new tabs or windows.
-* Improve responsive video on embed previews.
-* Improve "speak" messages for tag suggestions.
-* Make sure newly created blocks are marked as valid.
-* Preserve valid state during transformations.
-* Allow tabbing away from table.
-* Improve display of focused panel titles.
-* Adjust padding and margins across various design elements for consistency and normalization.
-* Fix pasting freeform content.
-* Fix proper propagation of updated block attributes.
-* Fix parsing and serialization of multi-paragraph pullquotes.
-* Fix a case where toggling pending preview would consider post as saved.
-* Fix positioning of block mover on full-width blocks.
-* Fix line height regression in quote styles.
-* Fix IE11 with polyfill for fetch method.
-* Fix case where blocks are created with isTyping and it never clears.
-* Fix block warning display in IE11.
-* Polish inspector visual design.
-* Prevent unhandled actions from returning new state reference.
-* Prevent unintentionally clearing link input value.
-* Added focus styles to switch toggle components.
-* Avoid navigating outside the editor with arrow keys.
-* Add short description to Verse block.
-* Initialize demo content only for new demo posts.
-* Improve insert link accessibility.
-* Improve version compare checks for plugin compatibility.
-* Clean up obsolete poststoshowattribute in LatestPosts block.
-* Consolidate addQueryArgs usage.
-* Add unit tests to inserter.
-* Update fixtures with latest modifications and ensure all end in newlines.
-* Added codecov for code coverage.
-* Clean up JSDoc comments.
-* Link to new docs within main readme.
+
+-   Split paragraphs on enter—we have been exploring different behaviours here.
+-   Added grid layout option for latest posts with columns slider control.
+-   Show internal posts / pages results when creating links.
+-   Added "Cover Text" block with background, text color, and full-width options.
+-   Autosaving drafts.
+-   Added "Read More" block.
+-   Added color options to the button block.
+-   Added mechanism for validating and protecting blocks that may have suffered unrecognized edits.
+-   Add patterns plugin for text formatting shortcuts: create lists by adding \* at the beginning of a text line, use # to create headings, and backticks for code.
+-   Implement initial support for Cmd/Ctrl+Z (undo) and Cmd/Ctrl+Shift+Z (redo).
+-   Improve pasting experience from outside editors by transforming content before converting to blocks.
+-   Improve gallery creation flow by opening into "gallery" mode from placeholder.
+-   Added page attributes with menu order setting.
+-   Use two distinct icons for quote style variations.
+-   Created KeyboardShortcuts component to handle keyboard events.
+-   Add support for custom icons (non dashicons) on blocks.
+-   Initialize new posts with auto-draft to match behaviour of existing editor.
+-   Don't display "save" button for published posts.
+-   Added ability to set a block as "use once" only (example: "read more" block).
+-   Hide gallery display settings in media modal.
+-   Simplify "cover image" markup and resolve conflict state in demo.
+-   Introduce PHP classes for interacting with block types.
+-   Announce block search results to assistive technologies.
+-   Reveal "continue writing" shortcuts on focus.
+-   Update document.title when the post title changes.
+-   Added focus styles to several elements in the UI.
+-   Added external-link component to handle links opening in new tabs or windows.
+-   Improve responsive video on embed previews.
+-   Improve "speak" messages for tag suggestions.
+-   Make sure newly created blocks are marked as valid.
+-   Preserve valid state during transformations.
+-   Allow tabbing away from table.
+-   Improve display of focused panel titles.
+-   Adjust padding and margins across various design elements for consistency and normalization.
+-   Fix pasting freeform content.
+-   Fix proper propagation of updated block attributes.
+-   Fix parsing and serialization of multi-paragraph pullquotes.
+-   Fix a case where toggling pending preview would consider post as saved.
+-   Fix positioning of block mover on full-width blocks.
+-   Fix line height regression in quote styles.
+-   Fix IE11 with polyfill for fetch method.
+-   Fix case where blocks are created with isTyping and it never clears.
+-   Fix block warning display in IE11.
+-   Polish inspector visual design.
+-   Prevent unhandled actions from returning new state reference.
+-   Prevent unintentionally clearing link input value.
+-   Added focus styles to switch toggle components.
+-   Avoid navigating outside the editor with arrow keys.
+-   Add short description to Verse block.
+-   Initialize demo content only for new demo posts.
+-   Improve insert link accessibility.
+-   Improve version compare checks for plugin compatibility.
+-   Clean up obsolete poststoshowattribute in LatestPosts block.
+-   Consolidate addQueryArgs usage.
+-   Add unit tests to inserter.
+-   Update fixtures with latest modifications and ensure all end in newlines.
+-   Added codecov for code coverage.
+-   Clean up JSDoc comments.
+-   Link to new docs within main readme.
 
 = 0.5.0 =
-* New tabs mode for the sidebar to switch between post settings and block inspector.
-* Implement recent blocks display.
-* Mobile implementation of block mover, settings, and delete actions.
-* Search through all tabs on the inserter and hide tabs.
-* New documentation app to serve all tutorials, faqs, docs, etc.
-* Enable ability to add custom classes to blocks (via inspector).
-* Add ability to drag-and-drop on image block placeholders to upload images.
-* Add "table of contents" document outline for headings (with empty heading validation).
-* Refactor tests to use Jest API.
-* New block: Verse (intended for poetry, respecting whitespace).
-* Avoid showing UI when typing and starting a new paragraph (text block).
-* Display warning message when navigating away from the editor with unsaved changes.
-* Use old editor as "freeform".
-* Improve PHP parser compatibility with different server configurations ("mbstring" extension and PCRE settings).
-* Improve PostVisibility markup and accessibility.
-* Add shortcuts to manage indents and levels in List block.
-* Add alignment options to latest posts block.
-* Add focus styles for quick tags buttons in text mode.
-* Add way to report PHP parsing performance.
-* Add labels and roles to UrlInput.
-* Add ability to set custom placeholders for text and headings as attributes.
-* Show error message when trashing action fails.
-* Pass content to dynamic block render functions in PHP.
-* Fix various z-index issues and clarify reasonings.
-* Fix DropdownMenu arrows navigation and add missing aria-label.
-* Update sandboxed iframe size calculations.
-* Export inspector controls component under wp.blocks.
-* Adjust Travis JS builds to improve task allocation.
-* Fix warnings during tests.
-* Fix caret jumping when switching formatting in Editable.
-* Explicitly define prop-types as dependency.
-* Update list of supported browsers for consistency with core.
+
+-   New tabs mode for the sidebar to switch between post settings and block inspector.
+-   Implement recent blocks display.
+-   Mobile implementation of block mover, settings, and delete actions.
+-   Search through all tabs on the inserter and hide tabs.
+-   New documentation app to serve all tutorials, faqs, docs, etc.
+-   Enable ability to add custom classes to blocks (via inspector).
+-   Add ability to drag-and-drop on image block placeholders to upload images.
+-   Add "table of contents" document outline for headings (with empty heading validation).
+-   Refactor tests to use Jest API.
+-   New block: Verse (intended for poetry, respecting whitespace).
+-   Avoid showing UI when typing and starting a new paragraph (text block).
+-   Display warning message when navigating away from the editor with unsaved changes.
+-   Use old editor as "freeform".
+-   Improve PHP parser compatibility with different server configurations ("mbstring" extension and PCRE settings).
+-   Improve PostVisibility markup and accessibility.
+-   Add shortcuts to manage indents and levels in List block.
+-   Add alignment options to latest posts block.
+-   Add focus styles for quick tags buttons in text mode.
+-   Add way to report PHP parsing performance.
+-   Add labels and roles to UrlInput.
+-   Add ability to set custom placeholders for text and headings as attributes.
+-   Show error message when trashing action fails.
+-   Pass content to dynamic block render functions in PHP.
+-   Fix various z-index issues and clarify reasonings.
+-   Fix DropdownMenu arrows navigation and add missing aria-label.
+-   Update sandboxed iframe size calculations.
+-   Export inspector controls component under wp.blocks.
+-   Adjust Travis JS builds to improve task allocation.
+-   Fix warnings during tests.
+-   Fix caret jumping when switching formatting in Editable.
+-   Explicitly define prop-types as dependency.
+-   Update list of supported browsers for consistency with core.
 
 = 0.4.0 =
-* Initial FAQ (in progress).
-* API for handling pasted content. (Aim is to have specific handling for converting Word, Markdown, Google Docs to native WordPress blocks.)
-* Added support for linking to a url on image blocks.
-* Navigation between blocks using arrow keys.
-* Added alternate Table block with TinyMCE functionality for adding/removing rows/cells, etc. Retired previous one.
-* Parse more/noteaser comment tokens from core.
-* Re-engineer the approach for rendering embed frames.
-* First pass at adding aria-labels to blocks list.
-* Setting up Jest for better testing environment.
-* Improve performance of server-side parsing.
-* Update blocks documentation with latest API functions and clearer examples.
-* Use fixed position for notices.
-* Make inline mode the default for Editable.
-* Add actions for plugins to register frontend and editor assets.
-* Supress gallery settings sidebar on media library when editing gallery.
-* Validate save and edit render when registering a block.
-* Prevent media library modal from opening when loading placeholders.
-* Update to sidebar design and behaviour on mobile.
-* Improve font-size in inserter and latest posts block.
-* Improve rendering of button block in the front end.
-* Add aria-label to edit image button.
-* Add aria-label to embed input url input.
-* Use pointer cursor for tabs in inserter.
-* Update design docs with regard to selected/unselected states.
-* Improve generation of wp-block-* classes for consistency.
-* Select first cell of table block when initializing.
-* Fix wide and full alignment on the front-end when images have no caption.
-* Fix initial state of freeform block.
-* Fix ability to navigate to resource on link viewer.
-* Fix clearing floats on inserter.
-* Fix loading of images in library.
-* Fix auto-focusing on table block being too agressive.
-* Clean double reference to pegjs in dependencies.
-* Include messages to ease debugging parser.
-* Check for exact match for serialized content in parser tests.
-* Add allow-presentation to fix issue with sandboxed iframe in Chrome.
-* Declare use of classnames module consistently.
-* Add translation to embed title.
-* Add missing text domains and adjust PHPCS to warn about them.
-* Added template for creating new issues including mentions of version number.
+
+-   Initial FAQ (in progress).
+-   API for handling pasted content. (Aim is to have specific handling for converting Word, Markdown, Google Docs to native WordPress blocks.)
+-   Added support for linking to a url on image blocks.
+-   Navigation between blocks using arrow keys.
+-   Added alternate Table block with TinyMCE functionality for adding/removing rows/cells, etc. Retired previous one.
+-   Parse more/noteaser comment tokens from core.
+-   Re-engineer the approach for rendering embed frames.
+-   First pass at adding aria-labels to blocks list.
+-   Setting up Jest for better testing environment.
+-   Improve performance of server-side parsing.
+-   Update blocks documentation with latest API functions and clearer examples.
+-   Use fixed position for notices.
+-   Make inline mode the default for Editable.
+-   Add actions for plugins to register frontend and editor assets.
+-   Supress gallery settings sidebar on media library when editing gallery.
+-   Validate save and edit render when registering a block.
+-   Prevent media library modal from opening when loading placeholders.
+-   Update to sidebar design and behaviour on mobile.
+-   Improve font-size in inserter and latest posts block.
+-   Improve rendering of button block in the front end.
+-   Add aria-label to edit image button.
+-   Add aria-label to embed input url input.
+-   Use pointer cursor for tabs in inserter.
+-   Update design docs with regard to selected/unselected states.
+-   Improve generation of wp-block-\* classes for consistency.
+-   Select first cell of table block when initializing.
+-   Fix wide and full alignment on the front-end when images have no caption.
+-   Fix initial state of freeform block.
+-   Fix ability to navigate to resource on link viewer.
+-   Fix clearing floats on inserter.
+-   Fix loading of images in library.
+-   Fix auto-focusing on table block being too agressive.
+-   Clean double reference to pegjs in dependencies.
+-   Include messages to ease debugging parser.
+-   Check for exact match for serialized content in parser tests.
+-   Add allow-presentation to fix issue with sandboxed iframe in Chrome.
+-   Declare use of classnames module consistently.
+-   Add translation to embed title.
+-   Add missing text domains and adjust PHPCS to warn about them.
+-   Added template for creating new issues including mentions of version number.
 
 = 0.3.0 =
-* Added framework for notices and implemented publishing and saving ones.
-* Implemented tabs on the inserter.
-* Added text and image quick inserts next to inserter icon at the end of the post.
-* Generate front-end styles for core blocks and enqueue them.
-* Include generated block classname in edit environment.
-* Added "edit image" button to image and cover image blocks.
-* Added option to visually crop images in galleries for nicer alignment.
-* Added option to disable dimming the background in cover images.
-* Added buffer for multi-select flows.
-* Added option to display date and to configure number of posts in LatestPosts block.
-* Added PHP parser based on PEG.js to unify grammars.
-* Split block styles for display so they can be loaded on the theme.
-* Auto-focusing for inserter search field.
-* Added text formatting to CoverImage block.
-* Added toggle option for fixed background in CoverImage.
-* Switched to store attributes in unescaped JSON format within the comments.
-* Added placeholder for all text blocks.
-* Added placeholder text for headings, quotes, etc.
-* Added BlockDescription component and applied it to several blocks.
-* Implemented sandboxing iframe for embeds.
-* Include alignment classes on embeds with wrappers.
-* Changed the block name declaration for embeds to be "core-embed/name-of-embed".
-* Simplified and made more robust the rendering of embeds.
-* Different fixes for quote blocks (parsing and transformations).
-* Improve display of text within cover image.
-* Fixed placeholder positioning in several blocks.
-* Fixed parsing of HTML block.
-* Fixed toolbar calculations on blocks without toolbars.
-* Added heading alignments and levels to inspector.
-* Added sticky post setting and toggle.
-* Added focus styles to inserter search.
-* Add design blueprints and principles to the storybook.
-* Enhance FormTokenField with accessibility improvements.
-* Load word-count module.
-* Updated icons for trash button, and Custom HTML.
-* Design tweaks for inserter, placeholders, and responsiveness.
-* Improvements to sidebar headings and gallery margins.
-* Allow deleting selected blocks with "delete" key.
-* Return more than 10 categories/tags in post settings.
-* Accessibility improvements with FormToggle.
-* Fix media button in gallery placeholder.
-* Fix sidebar breadcrumb.
-* Fix for block-mover when blocks are floated.
-* Fixed inserting Freeform block (now classic text).
-* Fixed missing keys on inserter.
-* Updated drop-cap class implementation.
-* Showcasing full-width cover image in demo content.
-* Copy fixes on demo content.
-* Hide meta-boxes icons for screen readers.
-* Handle null values in link attributes.
+
+-   Added framework for notices and implemented publishing and saving ones.
+-   Implemented tabs on the inserter.
+-   Added text and image quick inserts next to inserter icon at the end of the post.
+-   Generate front-end styles for core blocks and enqueue them.
+-   Include generated block classname in edit environment.
+-   Added "edit image" button to image and cover image blocks.
+-   Added option to visually crop images in galleries for nicer alignment.
+-   Added option to disable dimming the background in cover images.
+-   Added buffer for multi-select flows.
+-   Added option to display date and to configure number of posts in LatestPosts block.
+-   Added PHP parser based on PEG.js to unify grammars.
+-   Split block styles for display so they can be loaded on the theme.
+-   Auto-focusing for inserter search field.
+-   Added text formatting to CoverImage block.
+-   Added toggle option for fixed background in CoverImage.
+-   Switched to store attributes in unescaped JSON format within the comments.
+-   Added placeholder for all text blocks.
+-   Added placeholder text for headings, quotes, etc.
+-   Added BlockDescription component and applied it to several blocks.
+-   Implemented sandboxing iframe for embeds.
+-   Include alignment classes on embeds with wrappers.
+-   Changed the block name declaration for embeds to be "core-embed/name-of-embed".
+-   Simplified and made more robust the rendering of embeds.
+-   Different fixes for quote blocks (parsing and transformations).
+-   Improve display of text within cover image.
+-   Fixed placeholder positioning in several blocks.
+-   Fixed parsing of HTML block.
+-   Fixed toolbar calculations on blocks without toolbars.
+-   Added heading alignments and levels to inspector.
+-   Added sticky post setting and toggle.
+-   Added focus styles to inserter search.
+-   Add design blueprints and principles to the storybook.
+-   Enhance FormTokenField with accessibility improvements.
+-   Load word-count module.
+-   Updated icons for trash button, and Custom HTML.
+-   Design tweaks for inserter, placeholders, and responsiveness.
+-   Improvements to sidebar headings and gallery margins.
+-   Allow deleting selected blocks with "delete" key.
+-   Return more than 10 categories/tags in post settings.
+-   Accessibility improvements with FormToggle.
+-   Fix media button in gallery placeholder.
+-   Fix sidebar breadcrumb.
+-   Fix for block-mover when blocks are floated.
+-   Fixed inserting Freeform block (now classic text).
+-   Fixed missing keys on inserter.
+-   Updated drop-cap class implementation.
+-   Showcasing full-width cover image in demo content.
+-   Copy fixes on demo content.
+-   Hide meta-boxes icons for screen readers.
+-   Handle null values in link attributes.
 
 = 0.2.0 =
-* Include "paste" as default plugin in Editable.
-* Extract block alignment controls as a reusable component.
-* Added button to delete a block.
-* Added button to open block settings in the inspector.
-* New block: Custom HTML (to write your own HTML and preview it).
-* New block: Cover Image (with text over image support).
-* Rename "Freeform" block to "Classic Text".
-* Added support for pages and custom post types.
-* Improve display of "saving" label while saving.
-* Drop usage of controls property in favor of components in render.
-* Add ability to select all blocks with ctrl/command+A.
-* Automatically generate wrapper class for styling blocks.
-* Avoid triggering multi-select on right click.
-* Improve target of post previewing.
-* Use imports instead of accessing the wp global.
-* Add block alignment and proper placeholders to pullquote block.
-* Wait for wp.api before loading the editor. (Interim solution.)
-* Adding several reusable inspector controls.
-* Design improvements to floats, switcher, and headings.
-* Add width classes on figure wrapper when using captions in images.
-* Add image alt attributes.
-* Added html generation for photo type embeds.
-* Make sure plugin is run on WP 4.8.
-* Update revisions button to only show when there are revisions.
-* Parsing fixes on do_blocks.
-* Avoid being keyboard trapped on editor content.
-* Don't show block toolbars when pressing modifier keys.
-* Fix overlapping controls in Button block.
-* Fix post-title line height.
-* Fix parsing void blocks.
-* Fix splitting inline Editable instances with shift+enter.
-* Fix transformation between text and list, and quote and list.
-* Fix saving new posts by making post-type mandatory.
-* Render popovers above all elements.
-* Improvements to block deletion using backspace.
-* Changing the way block outlines are rendered on hover.
-* Updated PHP parser to handle shorthand block syntax, and fix newlines.
-* Ability to cancel adding a link from link menu.
+
+-   Include "paste" as default plugin in Editable.
+-   Extract block alignment controls as a reusable component.
+-   Added button to delete a block.
+-   Added button to open block settings in the inspector.
+-   New block: Custom HTML (to write your own HTML and preview it).
+-   New block: Cover Image (with text over image support).
+-   Rename "Freeform" block to "Classic Text".
+-   Added support for pages and custom post types.
+-   Improve display of "saving" label while saving.
+-   Drop usage of controls property in favor of components in render.
+-   Add ability to select all blocks with ctrl/command+A.
+-   Automatically generate wrapper class for styling blocks.
+-   Avoid triggering multi-select on right click.
+-   Improve target of post previewing.
+-   Use imports instead of accessing the wp global.
+-   Add block alignment and proper placeholders to pullquote block.
+-   Wait for wp.api before loading the editor. (Interim solution.)
+-   Adding several reusable inspector controls.
+-   Design improvements to floats, switcher, and headings.
+-   Add width classes on figure wrapper when using captions in images.
+-   Add image alt attributes.
+-   Added html generation for photo type embeds.
+-   Make sure plugin is run on WP 4.8.
+-   Update revisions button to only show when there are revisions.
+-   Parsing fixes on do_blocks.
+-   Avoid being keyboard trapped on editor content.
+-   Don't show block toolbars when pressing modifier keys.
+-   Fix overlapping controls in Button block.
+-   Fix post-title line height.
+-   Fix parsing void blocks.
+-   Fix splitting inline Editable instances with shift+enter.
+-   Fix transformation between text and list, and quote and list.
+-   Fix saving new posts by making post-type mandatory.
+-   Render popovers above all elements.
+-   Improvements to block deletion using backspace.
+-   Changing the way block outlines are rendered on hover.
+-   Updated PHP parser to handle shorthand block syntax, and fix newlines.
+-   Ability to cancel adding a link from link menu.
 
 = 0.1.0 =
-* First release of the plugin.
+
+-   First release of the plugin.
diff --git a/composer.json b/composer.json
index 3f16ba495a94ca..982a71a975223d 100644
--- a/composer.json
+++ b/composer.json
@@ -23,19 +23,28 @@
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true,
 			"composer/installers": true
-		}
+		},
+		"lock": false
 	},
 	"require-dev": {
-		"dealerdirect/phpcodesniffer-composer-installer": "^0.7",
-		"squizlabs/php_codesniffer": "^3.5",
 		"phpcompatibility/phpcompatibility-wp": "^2.1.3",
-		"wp-coding-standards/wpcs": "^2.2",
+		"wp-coding-standards/wpcs": "^3.0",
 		"sirbrillig/phpcs-variable-analysis": "^2.8",
 		"spatie/phpunit-watcher": "^1.23",
-		"yoast/phpunit-polyfills": "^1.0"
+		"yoast/phpunit-polyfills": "^1.1.0",
+		"gutenberg/gutenberg-coding-standards": "@dev"
 	},
+	"repositories": [
+		{
+			"type": "path",
+			"url": "./test/php/gutenberg-coding-standards",
+			"options": {
+				"symlink": false
+			}
+		}
+	],
 	"require": {
-		"composer/installers": "~1.0"
+		"composer/installers": "^1.0 || ^2.0"
 	},
 	"scripts": {
 		"format": "phpcbf --standard=phpcs.xml.dist --report-summary --report-source",
diff --git a/docs/README.md b/docs/README.md
index 1fe569f7356cbe..31471a9928b2cf 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,41 +1,58 @@
 # Block Editor Handbook
 
-**Gutenberg** is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. The project is right now in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, **Customization** (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual -- and is focused on a new editing experience, the block editor (which is the topic of the current documentation).
+Welcome to the Block Editor Handbook.
 
-![Quick view of the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/trunk/docs/assets/quick-view-of-the-block-editor.png)
+The [**Block Editor**](https://wordpress.org/gutenberg/) is a modern paradigm for WordPress site building and publishing. It uses a modular system of **blocks** to compose and format content and is designed to create rich and flexible layouts for websites and digital products.
 
-**Legend :**
+The Block Editor consists of several primary elements, as shown in the following figure:
 
-1. Block Inserter
-2. Block editor content area
-3. Settings Sidebar
+![Quick view of the Block Editor](https://raw.githubusercontent.com/WordPress/gutenberg/trunk/docs/assets/overview-block-editor-2023.png)
 
-Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created in the unit of blocks instead of freeform text with inserted media, embeds and Shortcodes (there's a Shortcode block though).
+The elements highlighted are:
 
-Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes. The new editor is designed with progressive enhancement, meaning that it is back-compatible with all legacy content, and it also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls.
+1. **Inserter:** A panel for inserting blocks into the content canvas
+2. **Content canvas:** The content editor, which holds content created with blocks
+3. **Settings Panel** A panel for configuring a block’s settings when selected or the settings of the post
 
-The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins.
+Through the Block Editor, you create content modularly using blocks. Many [blocks](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/) are available in WordPress by default, and you can also [create your own](https://developer.wordpress.org/block-editor/getting-started/create-block/).
 
-[Learn to use the block editor](https://wordpress.org/support/article/wordpress-editor/) to create media-rich posts and pages.
+A [block](https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/#blocks) is a discrete element such as a Paragraph, Heading, Media, or Embed. Each block is treated as a separate element with individual editing and format controls. When all these components are pieced together, they make up the content of the page or post, which is then [stored in the WordPress database](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/#serialization-and-parsing).
 
-## Quick links
+The Block Editor is the result of the work done on the [**Gutenberg project**](https://developer.wordpress.org/block-editor/getting-started/faq/#what-is-gutenberg), which aims to revolutionize the WordPress editing experience.
 
-### Create a Block Tutorial
+Besides offering an [enhanced editing experience](https://wordpress.org/gutenberg/) through visual content creation tools, the Block Editor is also a powerful developer platform with a [rich feature set of APIs](https://developer.wordpress.org/block-editor/reference-guides/) that allow it to be manipulated and extended in countless ways.
 
-[Learn how to create your first block](/docs/getting-started/create-block/README.md) for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all what you need to know to get started with the block editor.
+## Navigating this handbook
 
-### Develop for the block editor
+This handbook is focused on block development and is divided into five major sections.
 
-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.
+- **[Getting Started](https://developer.wordpress.org/block-editor/getting-started/):** For those just starting out with block development, this is where you can get set up with a [development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) and learn the [fundamentals of block development](https://developer.wordpress.org/block-editor/getting-started/fundamentals/). Its [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/) and [Tutorial: Build your first block](https://developer.wordpress.org/block-editor/getting-started/tutorial/) are great places to start learning block development.
 
--   [Gutenberg Architecture](/docs/explanations/architecture/README.md)
--   [Block Styles](/docs/reference-guides/filters/block-filters.md#block-styles)
--   [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)
--   [Block Editor Accessibility](/docs/how-to-guides/accessibility.md)
--   [Internationalization](/docs/how-to-guides/internationalization.md)
+- **[How-to Guides](https://developer.wordpress.org/block-editor/how-to-guides/):** Here, you can build on what you learned in the Getting Started section and learn how to solve particular problems. You will also find tutorials and example code to reuse in your own projects, such as [working with WordPress data](https://developer.wordpress.org/block-editor/how-to-guides/data-basics/) or [Curating the Editor Experience](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/).
 
-### Contribute to the block editor
+- **[Reference Guides](https://developer.wordpress.org/block-editor/reference-guides/):** This section is the heart of the handbook and is where you can get down to the nitty-gritty and look up the details of the particular API you’re working with or need information on. Among other things, the [Block API Reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/) covers most of what you will want to do with a block, and each [component](https://developer.wordpress.org/block-editor/reference-guides/components/) and [package](https://developer.wordpress.org/block-editor/reference-guides/packages/) is also documented here. _Components are also documented via [Storybook](https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page)._
 
-Everything you need to know to [start contributing to the block editor](/docs/contributors/README.md) . Whether you are interested in the design, code, triage, documentation, support or internationalization of the block editor, you will find here guides to help you.
+- **[Explanations](https://developer.wordpress.org/block-editor/explanations/):** This section enables you to go deeper and reinforce your practical knowledge with a theoretical understanding of the [Architecture](https://developer.wordpress.org/block-editor/explanations/architecture/) of the Block Editor.
+
+- **[Contributor Guide](https://developer.wordpress.org/block-editor/contributors/):** Gutenberg is open-source software, and everyone is welcome to contribute to the project. This section details how to contribute, whether with [code](https://developer.wordpress.org/block-editor/contributors/code/), [design](https://developer.wordpress.org/block-editor/contributors/design/), [documentation](https://developer.wordpress.org/block-editor/contributors/documentation/), or in some other way.
+
+## Further resources
+
+This handbook should be considered the canonical resource for all things related to block development. However, there are other resources that can help you.
+
+- **[WordPress Developer Blog](https://developer.wordpress.org/news/):** An ever-growing resource of technical articles covering specific topics related to block development and a wide variety of use cases. The blog is also an excellent way to [keep up with the latest developments in WordPress](https://developer.wordpress.org/news/tag/roundup/).
+- **[Learn WordPress](https://learn.wordpress.org/):** The WordPress hub for learning resources where you can find courses like [Introduction to Block Development: Build your first custom block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/), [Converting a Shortcode to a Block](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/), or [Using the WordPress Data Layer](https://learn.wordpress.org/course/using-the-wordpress-data-layer/)
+- **[WordPress.tv](https://wordpress.tv/):** A hub of WordPress-related videos (from talks at WordCamps to recordings of online workshops) curated and moderated by the WordPress community. You’re sure to find something to aid your learning about [block development](https://wordpress.tv/?s=block%20development&sort=newest) or the [Block Editor](https://wordpress.tv/?s=block%20editor&sort=relevance) here.
+- **[Gutenberg repository](https://github.com/WordPress/gutenberg/):** Development of the Block Editor takes place on GitHub. The repository contains the code of interesting packages such as [`block-library`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src) (core blocks) or [`components`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) (common UI elements). _The [block-development-examples](https://github.com/WordPress/block-development-examples) repository is another useful reference._
+- **[End User Documentation](https://wordpress.org/documentation/):** This documentation site is targeted to the end user (not developers), where you can also find documentation about the [Block Editor](https://wordpress.org/documentation/category/block-editor/) and [working with blocks](https://wordpress.org/documentation/article/work-with-blocks/).
+
+## Are you in the right place?
+
+The Block Editor Handbook is designed for those looking to create and develop for the Block Editor. However, it's important to note that there are multiple other handbooks available within the [Developer Resources](http://developer.wordpress.org/) that you may find beneficial:
+
+- [Theme Handbook](https://developer.wordpress.org/themes)
+- [Plugin Handbook](https://developer.wordpress.org/plugins)
+- [Common APIs Handbook](https://developer.wordpress.org/apis)
+- [Advanced Administration Handbook](https://developer.wordpress.org/advanced-administration)
+- [REST API Handbook](https://developer.wordpress.org/rest-api/)
+- [Coding Standards Handbook](https://developer.wordpress.org/coding-standards)
diff --git a/docs/assets/overview-block-editor-2023.png b/docs/assets/overview-block-editor-2023.png
new file mode 100644
index 00000000000000..ad3a6e1ff71923
Binary files /dev/null and b/docs/assets/overview-block-editor-2023.png differ
diff --git a/docs/assets/plugin-sidebar-closed-state.png b/docs/assets/plugin-sidebar-closed-state.png
deleted file mode 100644
index 025da900ffcdd5..00000000000000
Binary files a/docs/assets/plugin-sidebar-closed-state.png and /dev/null differ
diff --git a/docs/assets/plugin-sidebar-open-state.png b/docs/assets/plugin-sidebar-open-state.png
index f1c3781a500f00..a114f7119020ab 100644
Binary files a/docs/assets/plugin-sidebar-open-state.png and b/docs/assets/plugin-sidebar-open-state.png differ
diff --git a/docs/assets/plugin-sidebar-text-control-custom-field.png b/docs/assets/plugin-sidebar-text-control-custom-field.png
new file mode 100644
index 00000000000000..0a0d6d2e088eb2
Binary files /dev/null and b/docs/assets/plugin-sidebar-text-control-custom-field.png differ
diff --git a/docs/assets/text-decoration-component.png b/docs/assets/text-decoration-component.png
new file mode 100644
index 00000000000000..4626f953cf9c13
Binary files /dev/null and b/docs/assets/text-decoration-component.png differ
diff --git a/docs/assets/text-transform-component.png b/docs/assets/text-transform-component.png
new file mode 100644
index 00000000000000..2155fbdb8ebef6
Binary files /dev/null and b/docs/assets/text-transform-component.png differ
diff --git a/docs/contributors/README.md b/docs/contributors/README.md
index 33255d778526f6..ccf56119917329 100644
--- a/docs/contributors/README.md
+++ b/docs/contributors/README.md
@@ -18,7 +18,7 @@ Find the section below based on what you are looking to contribute:
 
 -   **Internationalization?** See the [localizing and translating section](/docs/contributors/localizing.md)
 
-### Repository Management
+### Repository management
 
 The Gutenberg project uses GitHub for managing code and tracking issues. Please see the following sections for the project methodologies using GitHub.
 
diff --git a/docs/contributors/accessibility-testing.md b/docs/contributors/accessibility-testing.md
index 46085df4afb817..ded036e19cb5a5 100644
--- a/docs/contributors/accessibility-testing.md
+++ b/docs/contributors/accessibility-testing.md
@@ -2,11 +2,11 @@
 
 This is a guide on how to test accessibility on Gutenberg. This is a living document that can be improved over time with new approaches and techniques.
 
-## Getting Started
+## Getting started
 
 Make sure you have set up your local environment following the instructions on [Getting Started](/docs/contributors/code/getting-started-with-code-contribution.md).
 
-## Keyboard Testing
+## Keyboard testing
 
 In addition to mouse, make sure the interface is fully accessible for keyboard-only users. Try to interact with your changes using only the keyboard:
 
@@ -18,7 +18,7 @@ If the elements can be focused using arrow keys, but not <kbd>Tab</kbd> or <kbd>
 
 If the interaction is complex or confusing to you, consider that it's also going to impact keyboard-only users.
 
-## Screen Reader Testing
+## Screen reader testing
 
 According to the [WebAIM: Screen Reader User Survey #8 Results](https://webaim.org/projects/screenreadersurvey8/#usage), these are the most common screen reader and browser combinations:
 
@@ -34,7 +34,7 @@ According to the [WebAIM: Screen Reader User Survey #8 Results](https://webaim.o
 | NVDA with Internet Explorer | 14               | 1.2%             |
 | Other combinations          | 126              | 10.4%            |
 
-When testing with screen readers, try to use some of the combinations at the top of this list. For example, when testing with VoiceOver, it's preferrable to use Safari.
+When testing with screen readers, try to use some of the combinations at the top of this list. For example, when testing with VoiceOver, it's preferable to use Safari.
 
 ### NVDA with Firefox
 
diff --git a/docs/final-g-wapuu-black.svg b/docs/contributors/assets/gutenberg-logo-black.svg
similarity index 100%
rename from docs/final-g-wapuu-black.svg
rename to docs/contributors/assets/gutenberg-logo-black.svg
diff --git a/docs/contributors/code/README.md b/docs/contributors/code/README.md
index caaa9221f240fe..4c965e69dbcefa 100644
--- a/docs/contributors/code/README.md
+++ b/docs/contributors/code/README.md
@@ -4,17 +4,17 @@ A guide on how to get started contributing code to the Gutenberg project.
 
 ## Discussions
 
-The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development: including announcements, product goals, meeting notes, meeting agendas, and more.
+The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development, including announcements, product goals, meeting notes, meeting agendas, and more.
 
-Real-time discussions for development take place in `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). Weekly meetings for the editor component are on Wednesdays at 14:00UTC, and for the JavaScript component on Tuesday at 15:00UTC, in their respective Slack channels.
+Development discussions take place in real-time in the `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required).
 
 ## Development Hub
 
-The Gutenberg project uses GitHub for managing code and tracking issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg).
+The Gutenberg project uses GitHub to manage code and track issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg).
 
 Browse [the issues list](https://github.com/wordpress/gutenberg/issues) to find issues to work on. The [good first issue](https://github.com/wordpress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22) and [good first review](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+label%3A%22Good+First+Review%22) labels are good starting points.
 
-## Contributor Resources
+## Contributor resources
 
 -   [Getting Started](/docs/contributors/code/getting-started-with-code-contribution.md) documents getting your development environment setup, this includes your test site and developer tools suggestions.
 -   [Git Workflow](/docs/contributors/code/git-workflow.md) documents the git process for deploying changes using pull requests.
diff --git a/docs/contributors/code/back-merging-to-wp-core.md b/docs/contributors/code/back-merging-to-wp-core.md
new file mode 100644
index 00000000000000..2ae1efb1727415
--- /dev/null
+++ b/docs/contributors/code/back-merging-to-wp-core.md
@@ -0,0 +1,38 @@
+# Back-merging code to WordPress Core
+
+For major releases of the WordPress software, Gutenberg features need to be merged into WordPress Core. Typically this involves taking changes made in `.php` files within the Gutenberg repository and making the equivalent updates in the WP Core codebase.
+
+## Criteria
+
+### Files/Directories
+
+Changes to files within the following files/directories will typically require back-merging to WP Core:
+
+-   `lib/`
+-   `phpunit/`
+
+### Ignored directories/files
+
+The following directories/files do _not_ require back-merging to WP Core:
+
+-   `lib/load.php` - Plugin specific code.
+-   `lib/experiments-page.php` - experiments are Plugin specific.
+-   `packages/block-library` - this is handled automatically during the packages sync process.
+-   `packages/e2e-tests/plugins` - PHP files related to e2e tests only. Mostly fixture data generators.
+-   `phpunit/blocks` - the code is maintained in Gutenberg so the test should be as well.
+
+Please note this list is not exhaustive.
+
+### Pull Request Criteria
+
+In general, all PHP code committed to the Gutenberg repository since the date of the final Gutenberg release that was included in [the _last_ stable WP Core release](https://developer.wordpress.org/block-editor/contributors/versions-in-wordpress/) should be considered for back merging to WP Core.
+
+There are however certain exceptions to that rule. PRs with the following criteria do _not_ require back-merging to WP Core:
+
+-   Does not contain changes to PHP code.
+-   Has label `Backport from WordPress Core` - this code is already in WP Core and is being synchronized back to Gutenberg.
+-   Has label `Backported to WordPress Core` - this code has already been synchronized to WP Core.
+
+## Further Reading
+
+Please see also additional documentation regarding [Gutenberg PHP code](/lib/README.md).
diff --git a/docs/contributors/code/backward-compatibility.md b/docs/contributors/code/backward-compatibility.md
index 96615fe793a505..ce0f58a079c759 100644
--- a/docs/contributors/code/backward-compatibility.md
+++ b/docs/contributors/code/backward-compatibility.md
@@ -61,7 +61,7 @@ deprecated( 'wp.components.ClipboardButton', {
 } );
 ```
 
-## Dev Notes
+## Dev notes
 
 Dev notes are [posts published on the make/core site](https://make.wordpress.org/core/tag/dev-notes/) prior to WordPress releases to inform third-party developers about important changes to the developer APIs, these changes can include:
 
@@ -70,7 +70,7 @@ Dev notes are [posts published on the make/core site](https://make.wordpress.org
 -   Unavoidable backward compatibility breakage, with reasoning and migration flows.
 -   Important deprecations (even without breakage), with reasoning and migration flows.
 
-### Dev Note Workflow
+### Dev note workflow
 
 -   When working on a pull request and the need for a dev note is discovered, add the **Needs Dev Note** label to the PR.
 -   If possible, add a comment to the PR explaining why the dev note is needed.
diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md
index 556833ca89b7ee..d8a5220c70ca24 100644
--- a/docs/contributors/code/coding-guidelines.md
+++ b/docs/contributors/code/coding-guidelines.md
@@ -39,13 +39,13 @@ Components may be assigned with class names that indicate states (for example, a
 
 **Example:**
 
-Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`classnames` package](https://www.npmjs.com/package/classnames) can be a helpful utility for conditionally applying modifier class names.
+Consider again the Notices example. We may want to apply specific styling for dismissible notices. The [`clsx` package](https://www.npmjs.com/package/clsx) can be a helpful utility for conditionally applying modifier class names.
 
 ```jsx
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 export default function Notice( { children, onRemove, isDismissible } ) {
-	const classes = classnames( 'components-notice', {
+	const classes = clsx( 'components-notice', {
 		'is-dismissible': isDismissible,
 	} );
 
@@ -55,7 +55,7 @@ export default function Notice( { children, onRemove, isDismissible } ) {
 
 A component's class name should **never** be used outside its own folder (with rare exceptions such as [`_z-index.scss`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/base-styles/_z-index.scss)). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by isolating shared components as a reusable interface, reducing the surface area of similar UI elements by adapting a limited set of common components to support a varied set of use-cases.
 
-#### SCSS File Naming Conventions for Blocks
+#### SCSS file naming conventions for blocks
 
 The build process will split SCSS from within the blocks library directory into two separate CSS files when Webpack runs.
 
@@ -65,7 +65,7 @@ Examples of styles that appear in both the theme and the editor include gallery
 
 ## JavaScript
 
-JavaScript in Gutenberg uses modern language features of the [ECMAScript language specification](https://www.ecma-international.org/ecma-262/) as well as the [JSX language syntax extension](https://reactjs.org/docs/introducing-jsx.html). These are enabled through a combination of preset configurations, notably [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default) which is used as a preset in the project's [Babel](https://babeljs.io/) configuration.
+JavaScript in Gutenberg uses modern language features of the [ECMAScript language specification](https://www.ecma-international.org/ecma-262/) as well as the [JSX language syntax extension](https://react.dev/learn/writing-markup-with-jsx). These are enabled through a combination of preset configurations, notably [`@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default) which is used as a preset in the project's [Babel](https://babeljs.io/) configuration.
 
 While the [staged process](https://tc39.es/process-document/) for introducing a new JavaScript language feature offers an opportunity to use new features before they are considered complete, **the Gutenberg project and the `@wordpress/babel-preset-default` configuration will only target support for proposals which have reached Stage 4 ("Finished")**.
 
@@ -75,7 +75,7 @@ In the Gutenberg project, we use [the ES2015 import syntax](https://developer.mo
 
 These separations are identified by multi-line comments at the top of a file which imports code from another file or source.
 
-#### External Dependencies
+#### External dependencies
 
 An external dependency is third-party code that is not maintained by WordPress contributors, but instead [included in WordPress as a default script](https://developer.wordpress.org/reference/functions/wp_enqueue_script/#default-scripts-included-and-registered-by-wordpress) or referenced from an outside package manager like [npm](https://www.npmjs.com/).
 
@@ -88,7 +88,7 @@ Example:
 import moment from 'moment';
 ```
 
-#### WordPress Dependencies
+#### WordPress dependencies
 
 To encourage reusability between features, our JavaScript is split into domain-specific modules which [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) one or more functions or objects. In the Gutenberg project, we've distinguished these modules under top-level directories. Each module serve an independent purpose, and often code is shared between them. For example, in order to localize its text, editor code will need to include functions from the `i18n` module.
 
@@ -101,7 +101,7 @@ Example:
 import { __ } from '@wordpress/i18n';
 ```
 
-#### Internal Dependencies
+#### Internal dependencies
 
 Within a specific feature, code is organized into separate files and folders. As is the case with external and WordPress dependencies, you can bring this code into scope by using the `import` keyword. The main distinction here is that when importing internal files, you should use relative paths specific to top-level directory you're working in.
 
@@ -114,31 +114,346 @@ Example:
 import VisualEditor from '../visual-editor';
 ```
 
-### Experimental and Unstable APIs
+### Legacy experimental APIs, plugin-only APIs, and private APIs
 
-Experimental and unstable APIs are temporary values exported from a module whose existence is either pending future revision or provides an immediate means to an end.
+#### Legacy experimental APIs
+
+Historically, Gutenberg has used the `__experimental` and `__unstable` prefixes to indicate that a given API is not yet stable and may be subject to change. This is a legacy convention which should be avoided in favor of the plugin-only API pattern or a private API pattern described below.
+
+The problem with using the prefixes was that these APIs rarely got stabilized or removed. As of June 2022, WordPress Core contained 280 publicly exported experimental APIs merged from the Gutenberg plugin during the major WordPress releases. Many plugins and themes started relying on these experimental APIs for essential features that couldn't be accessed in any other way.
+
+The legacy `__experimental` APIs can't be removed on a whim anymore. They became a part of the WordPress public API and fall under the [WordPress Backwards Compatibility policy](https://developer.wordpress.org/block-editor/contributors/code/backward-compatibility/). Removing them involves a deprecation process. It may be relatively easy for some APIs, but it may require effort and span multiple WordPress releases for others.
+
+All in all, don't use the `__experimental` prefix for new APIs. Use plugin-only APIs and private APIs instead.
+
+#### Plugin-only APIs
+
+Plugin-only APIs are temporary values exported from a module whose existence is either pending future revision or provides an immediate means to an end.
 
 _To External Consumers:_
 
-**There is no support commitment for experimental and unstable APIs.** They can and will be removed or changed without advance warning, including as part of a minor or patch release. As an external consumer, you should avoid these APIs.
+**There is no support commitment for plugin-only APIs.** They can and will be removed or changed without advance warning, including as part of a minor or patch release. As an external consumer, you should avoid these APIs.
 
 _To Project Contributors:_
 
-An experimental or unstable API is named as such to communicate instability of a function whose interface is not yet finalized. Aside from references within the code, these APIs should neither be documented nor mentioned in any CHANGELOG. They should effectively be considered to not exist from an external perspective. In most cases, they should only be exposed to satisfy requirements between packages maintained in this repository.
+An **plugin-only API** is one which is planned for eventual public availability, but is subject to further experimentation, testing, and discussion. It should be made stable or removed at the earliest opportunity.
+
+Plugin-only APIs are excluded from WordPress Core and only available in the Gutenberg Plugin:
+
+```js
+// Using globalThis.IS_GUTENBERG_PLUGIN allows Webpack to exclude this
+// export from WordPress core:
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	export { doSomethingExciting } from './api';
+}
+```
+
+The public interface of such APIs is not yet finalized. Aside from references within the code, they APIs should neither be documented nor mentioned in any CHANGELOG. They should effectively be considered to not exist from an external perspective. In most cases, they should only be exposed to satisfy requirements between packages maintained in this repository.
+
+While a plugin-only API may often stabilize into a publicly-available API, there is no guarantee that it will.
+
+#### Private APIs
+
+Each `@wordpress` package wanting to privately access or expose a private APIs can
+do so by opting-in to `@wordpress/private-apis`:
+
+```js
+// In packages/block-editor/private-apis.js:
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/block-editor' // Name of the package calling __dangerousOptInToUnstableAPIsOnlyForCoreModules,
+		// (not the name of the package whose APIs you want to access)
+	);
+```
+
+Each `@wordpress` package may only opt-in once. The process clearly communicates the extenders are not supposed
+to use it. This document will focus on the usage examples, but you can [find out more about the `@wordpress/private-apis` package in the its README.md](/packages/private-apis/README.md).
+
+Once the package opted-in, you can use the `lock()` and `unlock()` utilities:
+
+```js
+// Say this object is exported from a package:
+export const publicObject = {};
+
+// However, this string is internal and should not be publicly available:
+const privateString = 'private information';
+
+// Solution: lock the string "inside" of the object:
+lock( publicObject, privateString );
+
+// The string is not nested in the object and cannot be extracted from it:
+console.log( publicObject );
+// {}
+
+// The only way to access the string is by "unlocking" the object:
+console.log( unlock( publicObject ) );
+// "private information"
+
+// lock() accepts all data types, not just strings:
+export const anotherObject = {};
+lock( anotherObject, function privateFn() {} );
+console.log( unlock( anotherObject ) );
+// function privateFn() {}
+```
+
+Keep reading to learn how to use `lock()` and `unlock()` to avoid publicly exporting
+different kinds of `private` APIs.
+
+##### Private selectors and actions
+
+You can attach private selectors and actions to a public store:
+
+```js
+// In packages/package1/store.js:
+import { privateHasContentRoleAttribute } from './private-selectors';
+import { privateToggleFeature } from './private-actions';
+// The `lock` function is exported from the internal private-apis.js file where
+// the opt-in function was called.
+import { lock, unlock } from './lock-unlock';
+
+export const store = registerStore( /* ... */ );
+// Attach a private action to the exported store:
+unlock( store ).registerPrivateActions( {
+	privateToggleFeature,
+} );
+
+// Attach a private action to the exported store:
+unlock( store ).registerPrivateSelectors( {
+	privateHasContentRoleAttribute,
+} );
+```
+
+```js
+// In packages/package2/MyComponent.js:
+import { store } from '@wordpress/package1';
+import { useSelect } from '@wordpress/data';
+// The `unlock` function is exported from the internal private-apis.js file where
+// the opt-in function was called.
+import { unlock } from './lock-unlock';
+
+function MyComponent() {
+	const hasRole = useSelect(
+		( select ) =>
+			// Use the private selector:
+			unlock( select( store ) ).privateHasContentRoleAttribute()
+		// Note the unlock() is required. This line wouldn't work:
+		// select( store ).privateHasContentRoleAttribute()
+	);
+
+	// Use the private action:
+	unlock( useDispatch( store ) ).privateToggleFeature();
+
+	// ...
+}
+```
+
+##### Private functions, classes, and variables
+
+```js
+// In packages/package1/index.js:
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+/* Attach private data to the exported object */
+lock( privateApis, {
+	privateCallback: function () {},
+	privateReactComponent: function PrivateComponent() {
+		return <div />;
+	},
+	privateClass: class PrivateClass {},
+	privateVariable: 5,
+} );
+```
+
+```js
+// In packages/package2/index.js:
+import { privateApis } from '@wordpress/package1';
+import { unlock } from './lock-unlock';
+
+const {
+	privateCallback,
+	privateReactComponent,
+	privateClass,
+	privateVariable,
+} = unlock( privateApis );
+```
+
+Remember to always register the private actions and selectors on the **registered** store.
+
+Sometimes that's easy:
+
+```js
+export const store = createReduxStore( STORE_NAME, storeConfig() );
+// `register` uses the same `store` object created from `createReduxStore`.
+register( store );
+unlock( store ).registerPrivateActions( {
+	// ...
+} );
+```
 
-An experimental or unstable function or object should be prefixed respectively using `__experimental` or `__unstable`.
+However some package might call both `createReduxStore` **and** `registerStore`. In this case, always choose the store that gets registered:
 
 ```js
-export { __experimentalDoExcitingExperimentalAction } from './api';
-export { __unstableDoTerribleAwfulAction } from './api';
+export const store = createReduxStore( STORE_NAME, {
+	...storeConfig,
+	persist: [ 'preferences' ],
+} );
+const registeredStore = registerStore( STORE_NAME, {
+	...storeConfig,
+	persist: [ 'preferences' ],
+} );
+unlock( registeredStore ).registerPrivateActions( {
+	// ...
+} );
 ```
 
--   An **experimental API** is one which is planned for eventual public availability, but is subject to further experimentation, testing, and discussion.
--   An **unstable API** is one which serves as a means to an end. It is not desired to ever be converted into a public API.
+#### Private function arguments
+
+To add a private argument to a stable function you'll need
+to prepare a stable and a private version of that function.
+Then, export the stable function and `lock()` the unstable function
+inside it:
+
+```js
+// In @wordpress/package1/index.js:
+import { lock } from './lock-unlock';
+
+// A private function contains all the logic
+function privateValidateBlocks( formula, privateIsStrict ) {
+	let isValid = false;
+	// ...complex logic we don't want to duplicate...
+	if ( privateIsStrict ) {
+		// ...
+	}
+	// ...complex logic we don't want to duplicate...
+
+	return isValid;
+}
+
+// The stable public function is a thin wrapper that calls the
+// private function with the private features disabled
+export function validateBlocks( blocks ) {
+	privateValidateBlocks( blocks, false );
+}
 
-In both cases, the API should be made stable or removed at the earliest opportunity.
+export const privateApis = {};
+lock( privateApis, { privateValidateBlocks } );
+```
+
+```js
+// In @wordpress/package2/index.js:
+import { privateApis as package1PrivateApis } from '@wordpress/package1';
+import { unlock } from './lock-unlock';
 
-While an experimental API may often stabilize into a publicly-available API, there is no guarantee that it will. The conversion to a stable API will inherently be considered a breaking change by the mere fact that the function name must be changed to remove the `__experimental` prefix.
+// The private function may be "unlocked" given the stable function:
+const { privateValidateBlocks } = unlock( package1PrivateApis );
+privateValidateBlocks( blocks, true );
+```
+
+#### Private React component properties
+
+To add an private argument to a stable component you'll need
+to prepare a stable and an private version of that component.
+Then, export the stable function and `lock()` the unstable function
+inside it:
+
+```js
+// In @wordpress/package1/index.js:
+import { lock } from './lock-unlock';
+
+// The private component contains all the logic
+const PrivateMyButton = ( { title, privateShowIcon = true } ) => {
+	// ...complex logic we don't want to duplicate...
+
+	return (
+		<button>
+			{ privateShowIcon && <Icon src={ someIcon } /> } { title }
+		</button>
+	);
+};
+
+// The stable public component is a thin wrapper that calls the
+// private component with the private features disabled
+export const MyButton = ( { title } ) => (
+	<PrivateMyButton title={ title } privateShowIcon={ false } />
+);
+
+export const privateApis = {};
+lock( privateApis, { PrivateMyButton } );
+```
+
+```js
+// In @wordpress/package2/index.js:
+import { privateApis } from '@wordpress/package1';
+import { unlock } from './lock-unlock';
+
+// The private component may be "unlocked" given the stable component:
+const { PrivateMyButton } = unlock( privateApis );
+export function MyComponent() {
+	return <PrivateMyButton data={ data } privateShowIcon={ true } />;
+}
+```
+
+#### Private editor settings
+
+WordPress extenders cannot update the private block settings on their own. The `updateSettings()` actions of the `@wordpress/block-editor` store will filter out all the settings that are **not** a part of the public API. The only way to actually store them is via the private action `__experimentalUpdateSettings()`.
+
+To privatize a block editor setting, add it to the `privateSettings` list in [/packages/block-editor/src/store/actions.js](/packages/block-editor/src/store/actions.js):
+
+```js
+const privateSettings = [
+	'inserterMediaCategories',
+	// List a block editor setting here to make it private
+];
+```
+
+#### Private block.json and theme.json APIs
+
+As of today, there is no way to restrict the `block.json` and `theme.json` APIs
+to the Gutenberg codebase. In the future, however, the new private APIs
+will only apply to the core WordPress blocks and plugins and themes will not be
+able to access them.
+
+#### Inline small actions in thunks
+
+Finally, instead of introducing a new action creator, consider using a [thunk](/docs/how-to-guides/thunks.md):
+
+```js
+export function toggleFeature( scope, featureName ) {
+	return function ( { dispatch } ) {
+		dispatch( { type: '__private_BEFORE_TOGGLE' } );
+		// ...
+	};
+}
+```
+
+### Exposing private APIs publicly
+
+Some private APIs could benefit from community feedback and it makes sense to expose them to WordPress extenders. At the same time, it doesn't make sense to turn them into a public API in WordPress core. What should you do?
+
+You can re-export that private API as a plugin-only API to expose it publicly only in the Gutenberg plugin:
+
+```js
+// This function can't be used by extenders in any context:
+function privateEverywhere() {}
+
+// This function can be used by extenders with the Gutenberg plugin but not in vanilla WordPress Core:
+function privateInCorePublicInPlugin() {}
+
+// Gutenberg treats both functions as private APIs internally:
+const privateApis = {};
+lock( privateApis, { privateEverywhere, privateInCorePublicInPlugin } );
+
+// The privateInCorePublicInPlugin function is explicitly exported,
+// but this export will not be merged into WordPress core thanks to
+// the globalThis.IS_GUTENBERG_PLUGIN check.
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	export const privateInCorePublicInPlugin =
+		unlock( privateApis ).privateInCorePublicInPlugin;
+}
+```
 
 ### Objects
 
@@ -151,7 +466,7 @@ const a = 10;
 // Bad:
 const object = {
 	a: a,
-	performAction: function() {
+	performAction: function () {
 		// ...
 	},
 };
@@ -202,7 +517,7 @@ alert( 'My name is ' + name + '.' );
 alert( `My name is ${ name }.` );
 ```
 
-### Optional Chaining
+### Optional chaining
 
 [Optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) is a new language feature introduced in version 2020 of the ECMAScript specification. While the feature can be very convenient for property access on objects which are potentially null-ish (`null` or `undefined`), there are a number of common pitfalls to be aware of when using optional chaining. These may be issues that linting and/or type-checking can help protect against at some point in the future. In the meantime, you will want to be cautious of the following items:
 
@@ -214,11 +529,11 @@ alert( `My name is ${ name }.` );
     -   Example: `document.body.classList.toggle( 'has-focus', nodeRef.current?.contains( document.activeElement ) );` may wrongly _add_ the class, since [the second argument is optional](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle). If `undefined` is passed, it would not unset the class as it would when `false` is passed.
     -   Example: `<input value={ state.selected?.value.trim() } />` may inadvertently cause warnings in React by toggling between [controlled and uncontrolled inputs](https://reactjs.org/docs/uncontrolled-components.html). This is an easy trap to fall into when eagerly assuming that a result of `trim()` will always return a string value, overlooking the fact the optional chaining may have caused evaluation to abort earlier with a value of `undefined`.
 
-### `@wordpress/element` (React) Components
+### React components
 
-It is preferred to implement all components as [function components](https://reactjs.org/docs/components-and-props.html), using [hooks](https://reactjs.org/docs/hooks-reference.html) to manage component state and lifecycle. With the exception of [error boundaries](https://reactjs.org/docs/error-boundaries.html), you should never encounter a situation where you must use a class component. Note that the [WordPress guidance on Code Refactoring](https://make.wordpress.org/core/handbook/contribute/code-refactoring/) applies here: There needn't be a concentrated effort to update class components in bulk. Instead, consider it as a good refactoring opportunity in combination with some other change.
+It is preferred to implement all components as [function components](https://react.dev/learn/your-first-component), using [hooks](https://react.dev/reference/react/hooks) to manage component state and lifecycle. With the exception of [error boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary), you should never encounter a situation where you must use a class component. Note that the [WordPress guidance on Code Refactoring](https://make.wordpress.org/core/handbook/contribute/code-refactoring/) applies here: There needn't be a concentrated effort to update class components in bulk. Instead, consider it as a good refactoring opportunity in combination with some other change.
 
-## JavaScript Documentation using JSDoc
+## JavaScript documentation using JSDoc
 
 Gutenberg follows the [WordPress JavaScript Documentation Standards](https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/), with additional guidelines relevant for its distinct use of [import semantics](/docs/contributors/code/coding-guidelines.md#imports) in organizing files, the [use of TypeScript tooling](/docs/contributors/code/testing-overview.md#javascript-testing) for types validation, and automated documentation generation using [`@wordpress/docgen`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/docgen).
 
@@ -227,7 +542,7 @@ For additional guidance, consult the following resources:
 -   [JSDoc Official Documentation](https://jsdoc.app/index.html)
 -   [TypeScript Supported JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)
 
-### Custom Types
+### Custom types
 
 Define custom types using the [JSDoc `@typedef` tag](https://jsdoc.app/tags-typedef.html).
 
@@ -262,7 +577,7 @@ Custom types can also be used to describe a set of predefined options. While the
 
 Note the use of quotes when defining a set of string literals. As in the [JavaScript Coding Standards](https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/), single quotes should be used when assigning a string literal either as the type or as a [default function parameter](#nullable-undefined-and-void-types), or when [specifying the path](#importing-and-exporting-types) of an imported type.
 
-### Importing and Exporting Types
+### Importing and exporting types
 
 Use the [TypeScript `import` function](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#import-types) to import type declarations from other files or third-party dependencies.
 
@@ -284,7 +599,7 @@ When considering which types should be made available from a WordPress package,
 
 In this snippet, the `@typedef` will support the usage of the previous example's `import('@wordpress/data')`.
 
-#### External Dependencies
+#### External dependencies
 
 Many third-party dependencies will distribute their own TypeScript typings. For these, the `import` semantics should "just work".
 
@@ -294,7 +609,7 @@ If you use a [TypeScript integration](https://github.com/Microsoft/TypeScript/wi
 
 For packages which do not distribute their own TypeScript types, you are welcomed to install and use the [DefinitelyTyped](http://definitelytyped.org/) community-maintained types definitions, if one exists.
 
-### Generic Types
+### Generic types
 
 When documenting a generic type such as `Object`, `Function`, `Promise`, etc., always include details about the expected record types.
 
@@ -344,7 +659,7 @@ Similar to the "Custom Types" advice concerning type unions and with literal val
 const BREAKPOINTS = { huge: 1440 /* , ... */ };
 ```
 
-### Nullable, Undefined, and Void Types
+### Nullable, undefined, and void types
 
 You can express a nullable type using a leading `?`. Use the nullable form of a type only if you're describing either the type or an explicit `null` value. Do not use the nullable form as an indicator of an optional parameter.
 
@@ -405,7 +720,7 @@ function getConfigurationValue( key ) {
 }
 ```
 
-When documenting a [function type](https://github.com/WordPress/gutenberg/blob/add/typescript-jsdoc-guidelines/docs/contributors/coding-guidelines.md#record-types), you must always include the `void` return value type, as otherwise the function is inferred to return a mixed ("any") value, not a void result.
+When documenting a [function type](#generic-types), you must always include the `void` return value type, as otherwise the function is inferred to return a mixed ("any") value, not a void result.
 
 ```js
 /**
@@ -416,7 +731,7 @@ When documenting a [function type](https://github.com/WordPress/gutenberg/blob/a
  */
 ```
 
-### Documenting Examples
+### Documenting examples
 
 Because the documentation generated using the `@wordpress/docgen` tool will include `@example` tags if they are defined, it is considered a best practice to include usage examples for functions and components. This is especially important for documented members of a package's public API.
 
@@ -441,9 +756,9 @@ When documenting an example, use the markdown <code>\`\`\`</code> code block to
  */
 ````
 
-### Documenting `@wordpress/element` (React) Components
+### Documenting React components
 
-When possible, all components should be implemented as [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components), using [hooks](https://reactjs.org/docs/hooks-intro.html) for managing component lifecycle and state.
+When possible, all components should be implemented as [function components](https://react.dev/learn/your-first-component), using [hooks](https://react.dev/reference/react/hooks) for managing component lifecycle and state.
 
 Documenting a function component should be treated the same as any other function. The primary caveat in documenting a component is being aware that the function typically accepts only a single argument (the "props"), which may include many property members. Use the [dot syntax for parameter properties](https://jsdoc.app/tags-param.html#parameters-with-properties) to document individual prop types.
 
@@ -465,7 +780,7 @@ Documenting a function component should be treated the same as any other functio
  */
 ````
 
-For class components, there is no recommendation for documenting the props of the component. Gutenberg does not use or endorse the [`propTypes` static class member](https://reactjs.org/docs/typechecking-with-proptypes.html).
+For class components, there is no recommendation for documenting the props of the component. Gutenberg does not use or endorse the [`propTypes` static class member](https://react.dev/reference/react/Component#static-proptypes).
 
 ## PHP
 
diff --git a/docs/contributors/code/deprecations.md b/docs/contributors/code/deprecations.md
index 7463a99b319d5c..51f0165c409da0 100644
--- a/docs/contributors/code/deprecations.md
+++ b/docs/contributors/code/deprecations.md
@@ -183,7 +183,7 @@ For features included in the Gutenberg plugin, the deprecation policy is intende
 
 ## 3.8.0
 
--   `wp.components.withContext` has been removed. Please use `wp.element.createContext` instead. See: https://reactjs.org/docs/context.html.
+-   `wp.components.withContext` has been removed. Please use `wp.element.createContext` instead. See: https://react.dev/reference/react/createContext.
 -   `wp.coreBlocks.registerCoreBlocks` has been removed. Please use `wp.blockLibrary.registerCoreBlocks` instead.
 -   `wp.editor.DocumentTitle` component has been removed.
 -   `getDocumentTitle` selector (`core/editor`) has been removed.
diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md
new file mode 100644
index 00000000000000..5aa4e21be909fe
--- /dev/null
+++ b/docs/contributors/code/e2e/README.md
@@ -0,0 +1,117 @@
+# End-to-End Testing
+
+This living document serves to prescribe instructions and best practices for writing end-to-end (E2E) tests with Playwright in the Gutenberg project.
+
+<div class="callout callout-info">
+
+See the dedicated guide if you're working with the previous Jest + Puppeteer framework. See the <a href="https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/migration.md">migration guide</a> if you're migrating tests from Jest + Puppeteer.
+</div>
+
+
+## Running tests
+
+```bash
+# Run all available tests.
+npm run test:e2e
+
+# Run in headed mode.
+npm run test:e2e -- --headed
+
+# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
+npm run test:e2e -- --project=webkit --project=firefox
+
+# Run a single test file.
+npm run test:e2e -- <path_to_test_file> # E.g., npm run test:e2e -- site-editor/title.spec.js
+
+# Debugging.
+npm run test:e2e -- --debug
+```
+
+If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
+
+```bash
+# Run all available tests.
+xvfb-run npm run test:e2e
+
+# Only run webkit tests.
+xvfb-run -- npm run test:e2e -- --project=webkit
+```
+If you're already editing in VS Code, you may find the [Playwright extension](https://playwright.dev/docs/getting-started-vscode) helpful for running, writing and debugging tests.
+
+## Best practices
+
+Read the [best practices](https://playwright.dev/docs/best-practices) guide for Playwright.
+
+### Forbid `$`, use `locator` instead
+
+In fact, any API that returns `ElementHandle` is [discouraged](https://playwright.dev/docs/api/class-page#page-query-selector). This includes `$`, `$$`, `$eval`, `$$eval`, etc. [`Locator`](https://playwright.dev/docs/api/class-locator) is a much better API and can be used with playwright's [assertions](https://playwright.dev/docs/api/class-locatorassertions). This also works great with Page Object Model since that locator is lazy and doesn't return a promise.
+
+### Use accessible selectors
+
+Use [`getByRole`](https://playwright.dev/docs/locators#locate-by-role) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations.
+
+```js
+// Select a button which includes the accessible name "Hello World" (case-insensitive).
+page.getByRole( 'button', { name: 'Hello World' } );
+```
+
+It can also be chained to perform complex queries:
+
+```js
+// Select an option with a name "Buttons" under the "Block Library" region.
+page.getByRole( 'region', { name: 'Block Library' } )
+	.getByRole( 'option', { name: 'Buttons' } )
+```
+
+See the [official documentation](https://playwright.dev/docs/locators) for more info on how to use them.
+
+### Selectors are strict by default
+
+To encourage better practices for querying elements, selectors are [strict](https://playwright.dev/docs/api/class-browser#browser-new-page-option-strict-selectors) by default, meaning that it will throw an error if the query returns more than one element.
+
+### Don't overload test-utils, inline simple utils
+
+`e2e-test-utils` are too bloated with too many utils. Most of them are simple enough to be inlined directly in tests. With the help of accessible selectors, simple utils are easier to write now. For utils that only take place on a certain page, use Page Object Model instead (with an exception of clearing states with `requestUtils` which are better placed in `e2e-test-utils`). Otherwise, only create an util if the action is complex and repetitive enough.
+
+### Favor Page Object Model over utils
+
+As mentioned above, [Page Object Model](https://playwright.dev/docs/pom) is the preferred way to create reusable utility functions on a certain page.
+
+The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`.
+
+### Restify actions to clear or set states
+
+It's slow to set states manually before or after tests, especially when they're repeated multiple times between tests. It's recommended to set them via API calls. Use `requestUtils.rest` and `requestUtils.batchRest` instead to call the [REST API](https://developer.wordpress.org/rest-api/reference/) (and add them to `requestUtils` if needed). We should still add a test for manually setting them, but that should only be tested once.
+
+### Avoid global variables
+
+Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed as global variables. This makes it harder to work with when we have multiple pages/tabs in the same test, or if we want to run multiple tests in parallel. `@playwright/test` has the concept of [fixtures](https://playwright.dev/docs/test-fixtures) which allows us to inject `page`, `browser`, and other parameters into the tests.
+
+### Make explicit assertions
+
+We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read
+
+## Common pitfalls
+
+### [Overusing snapshots](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/overusing-snapshots.md)
+
+
+## Cross-browser testing
+
+By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
+
+```js
+test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
+	// ...
+} );
+
+test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
+	// ...
+} );
+
+test.describe( 'Grouping tests (@webkit, -chromium)', () => {
+	test( 'I will only run in webkit', async ( { page } ) => {
+		// ...
+	} );
+} );
+```
diff --git a/docs/contributors/code/e2e/migration.md b/docs/contributors/code/e2e/migration.md
new file mode 100644
index 00000000000000..7d8d44c3dc40cf
--- /dev/null
+++ b/docs/contributors/code/e2e/migration.md
@@ -0,0 +1,37 @@
+# Migration guide
+
+This document outlines a typical flow of migrating a Jest + Puppeteer test to Playwright. Note that the migration process is also a good opportunity to refactor or rewrite parts of the tests. Please read the [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices) guide before starting the migration.
+
+## Migration steps for tests
+
+1. Choose a test suite to migrate in `packages/e2e-tests/specs`, rename `.test.js` into `.spec.js` and put it in the same folder structure inside `test/e2e/specs`.
+2. Require the test helpers from `@wordpress/e2e-test-utils-playwright`:
+    ```js
+    const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+    ```
+3. Change all occurrences of `describe`, `beforeAll`, `beforeEach`, `afterEach` and `afterAll` with the `test.` prefix. For instance, `describe` turns into `test.describe`.
+4. Use the [fixtures API](https://playwright.dev/docs/test-fixtures) to require previously global variables like `page` and `browser`.
+5. Delete all the imports of `e2e-test-utils`. Instead, use the fixtures API to directly get the `admin`, `editor`, `pageUtils` and `requestUtils`. (However, `admin`, `editor` and `pageUtils` are not allowed in `beforeAll` and `afterAll`, rewrite them using `requestUtils` instead.)
+6. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below.
+7. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
+
+## Migration steps for test utils
+
+Before migrating a test utility function, think twice about whether it's necessary. Playwright offers a lot of readable and powerful APIs which make a lot of the utils obsolete. Try implementing the same thing inline directly in the test first. Only follow the below guide if that doesn't work for you. Some examples of utils that deserve to be implemented in the `e2e-test-utils-playwright` package include complex browser APIs (like `pageUtils.dragFiles` and `pageUtils.pressKeys`) and APIs that set states (`requestUtils.*`).
+
+<div class="callout callout-info">
+The <code>e2e-test-utils-playwright</code> package is not meant to be a drop-in replacement of the Jest + Puppeteer's <code>e2e-test-utils</code> package. Some utils are only created to ease the migration process, but they are not necessarily required.
+</div>
+
+Playwright utilities are organized a little differently from those in the `e2e-test-utils` package. The `e2e-test-utils-playwright` package has the following folders that utils are divided up into:
+- `admin` - Utilities related to WordPress admin or WordPress admin's user interface (e.g. `visitAdminPage`).
+- `editor` - Utilities for the block editor (e.g. `clickBlockToolbarButton`).
+- `pageUtils` - General utilities for interacting with the browser (e.g. `pressKeys`).
+- `requestUtils` - Utilities for making REST API requests (e.g. `activatePlugin`). These utilities are used for setup and teardown of tests.
+
+1. Copy the existing file in `e2e-test-utils` and paste it in the `admin`, `editor`, `page` or `request` folder in `e2e-test-utils-playwright` depending on the type of util.
+2. Update any parts of the util that need to be rewritten:
+    - The `page` and `browser` variables are available in `admin`, `editor` and `pageUtils` as `this.page` and `this.browser`.
+    - All the other utils in the same class are available in `this` and bound to the same instance. You can remove any `import` statements and use `this` to access them.
+    - Consider updating the util to use TypeScript if you're comfortable doing so.
+3. Import the newly migrated util in `index.ts` and put it inside the `Admin`/`Editor`/`PageUtils`/`RequestUtils` class as an instance field.
diff --git a/docs/contributors/code/e2e/overusing-snapshots.md b/docs/contributors/code/e2e/overusing-snapshots.md
new file mode 100644
index 00000000000000..6364fd7394789e
--- /dev/null
+++ b/docs/contributors/code/e2e/overusing-snapshots.md
@@ -0,0 +1,125 @@
+# Overusing snapshots
+
+Take a look at the below code. Could you understand what the test is trying to do at first glance?
+
+```js
+await editor.insertBlock( { name: 'core/quote' } );
+await page.keyboard.type( '1' );
+await page.keyboard.press( 'Enter' );
+await page.keyboard.press( 'Enter' );
+
+expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+await page.keyboard.press( 'Backspace' );
+await page.keyboard.type( '2' );
+
+expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+```
+
+This is borrowed from the real code in gutenberg, with the test title and the comments removed and refactored into Playwright. Ideally, E2E tests should be self-documented and readable to end users; in the end, they are trying to resemble how end users interact with the app. However, there are a couple of red flags in the code.
+
+## Problems with snapshot testing
+
+Popularized by Jest, [snapshot testing](https://jestjs.io/docs/snapshot-testing) is a great tool to help test our app _when it makes sense_. However, probably because it's so powerful, it's often overused by developers. There are already multiple [articles](https://kentcdodds.com/blog/effective-snapshot-testing) about this. In this particular case, snapshot testing fails to reflect the developer's intention. It's not clear what the assertions are about without looking into other information. This makes the code harder to understand and creates a mental overhead for all the other readers other than the one who wrote it. As readers, we have to jump around the code to fully understand them. The added complexity of the code discourages contributors from changing the test to fit their needs. It could sometimes even confuse the authors and make them accidentally [commit the wrong snapshots](https://github.com/WordPress/gutenberg/pull/42780#discussion_r949865612).
+
+Here's the same test with the test title and comments. Now you know what these assertions are actually about.
+
+```js
+it( 'can be split at the end', async () => {
+	// ...
+
+	// Expect empty paragraph outside quote block.
+	expect( await getEditedPostContent() ).toMatchSnapshot();
+
+	// ...
+
+	// Expect the paragraph to be merged into the quote block.
+	expect( await getEditedPostContent() ).toMatchSnapshot();
+} );
+```
+
+The developer's intention is a bit more readable, but it still feels disconnected from the test. You might be tempted to try [inline snapshots](https://jestjs.io/docs/snapshot-testing#inline-snapshots), which do solve the issue of having to jump around files, but they're still not self-documented nor explicit. We can do better.
+
+## The solution
+
+Instead of writing the assertions in comments, we can try directly writing them out explicitly. With the help of `editor.getBlocks`, we can rewrite them into simpler and atomic assertions.
+
+```js
+// ...
+
+// Expect empty paragraph outside quote block.
+await expect.poll( editor.getBlocks ).toMatchObject( [
+	{
+		name: 'core/quote',
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+		],
+	},
+	{
+		name: 'core/paragraph',
+		attributes: { content: '' },
+	}
+] );
+
+// ...
+
+// Expect the paragraph to be merged into the quote block.
+await expect.poll( editor.getBlocks ).toMatchObject( [ {
+	name: 'core/quote',
+	innerBlocks: [
+		{
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		},
+		{
+			name: 'core/paragraph',
+			attributes: { content: '2' },
+		},
+	],
+} ] );
+```
+
+These assertions are more readable and explicit. You can add additional assertions or split existing ones into multiple ones to highlight their importance. Whether to keep the comments is up to you, but it's usually fine to omit them when the code is already readable without them.
+
+## Snapshot variants
+
+Due to the lack of inline snapshots in Playwright, some migrated tests are using string assertions (`toBe`) to simulate similar effects without having to create dozens of snapshot files.
+
+```js
+expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:paragraph -->
+<p>Paragraph</p>
+<!-- /wp:paragraph -->` );
+```
+
+We can consider this pattern as a variant of snapshot testing, and we should follow the same rule when writing them. It's often better to rewrite them using `editor.getBlocks` or other methods to make explicit assertions.
+
+```js
+await expect.poll( editor.getBlocks ).toMatchObject( [ {
+	name: 'core/paragraph',
+	attributes: { content: 'Paragraph' },
+} ] );
+```
+
+## What about test coverage?
+
+Comparing the explicit assertions to snapshot testing, we're definitely losing some test coverage in this test. Snapshot testing is still useful when we want to assert the full serialized content of the block. Fortunately, though, some tests in the integration test already assert the [full content](https://github.com/WordPress/gutenberg/blob/trunk/test/integration/fixtures/blocks/README.md) of each core block. They run in Node.js, making them way faster than repeating the same test in Playwright. Running 273 test cases in my machine only costs about 5.7 seconds. These sorts of tests work great at the unit or integration level, and we can run them much faster without losing test coverage.
+
+## Best practices
+
+Snapshot testing should rarely be required in E2E tests, often there are better alternatives that leverage explicit assertions. For times when there isn't any other suitable alternative, we should follow the best practices when using them.
+
+### Avoid huge snapshots
+
+Huge snapshots are hard to read and difficult to review. Moreover, when everything is important then nothing is important. Huge snapshots prevent us from focusing on the important parts of the snapshots.
+
+### Avoid repetitive snapshots
+
+If you find yourself creating multiple snapshots of similar contents in the same test, then it's probably a sign that you want to make more atomic assertions instead. Rethink what you want to test, if the first snapshot is only just a reference for the second one, then what you want is likely the **difference** between the snapshots. Store the first result in a variable and assert the difference between the results instead.
+
+## Further readings
+
+- [Effective Snapshot Testing - Kent C. Dodds](https://kentcdodds.com/blog/effective-snapshot-testing)
+- [Common Testing Mistakes - Kent C. Dodds](https://kentcdodds.com/blog/common-testing-mistakes)
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index dd15f2f8dd3711..df6b305f35983e 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -5,7 +5,7 @@ The following guide is for setting up your local environment to contribute to th
 ## Prerequisites
 
 -   Node.js
-    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v14, and npm v6. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
+    Gutenberg is a JavaScript project that requires [Node.js](https://nodejs.org/). The project is currently built using Node.js v20 and npm v10. Though best efforts are made to always use the Active LTS version of Node.js, this will not always be the case. For more details, please refer to the [Node.js release schedule](https://github.com/nodejs/Release#release-schedule).
 
 We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) since it is the easiest way to install and manage node for macOS, Linux, and Windows 10 using WSL2. See [our Development Tools guide](/docs/getting-started/devenv/README.md#development-tools) or the Nodejs site for additional installation instructions.
 
@@ -16,7 +16,10 @@ We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nv
     We recommend using the [wp-env package](/packages/env/README.md) for setting WordPress environment locally. You'll need to install Docker to use `wp-env`. See the [Development Environment tutorial for additional details](/docs/getting-started/devenv/README.md).
     > Note: To install Docker on Windows 10 Home Edition, follow the [install instructions from Docker for Windows with WSL2](https://docs.docker.com/docker-for-windows/wsl/).
 
-As an alternative to Docker setup, you can use [Local](https://localwp.com/), [WampServer](http://www.wampserver.com/en/), or [MAMP](https://www.mamp.info/), or even use a remote server.
+As an alternative to Docker setup, you can use [Local](https://localwp.com/), [WampServer](https://wampserver.aviatechno.net/), or [MAMP](https://www.mamp.info/), or even use a remote server.
+
+-   GitHub CLI
+    Although not a requirement, the [GitHub CLI](https://cli.github.com/) can be very useful in helping you checkout pull requests locally. Both from the Gutenberg repo and forked repos. This can be a major time saver while code reviewing and testing pull requests.
 
 ## Getting the Gutenberg code
 
@@ -123,7 +126,7 @@ Port: {MYSQL_PORT_NUMBER}
 
 **Please note**: the MySQL port number will change each time `wp-env` restarts. If you find you can no longer access your database, simply repeat the steps above to find the new port number and restore your connection.
 
-**Tip**: [Sequel Ace](https://sequel-ace.com/) is a useful GUI tool for accessing a MySQL database. Other tools are available and documented in this [article on accessing the WordPress database](https://wordpress.org/support/article/creating-database-for-wordpress/).
+**Tip**: [Sequel Ace](https://sequel-ace.com/) is a useful GUI tool for accessing a MySQL database. Other tools are available and documented in this [article on accessing the WordPress database](https://developer.wordpress.org/advanced-administration/before-install/creating-database/).
 
 #### Troubleshooting
 
@@ -131,7 +134,7 @@ If you run into an issue, check the [troubleshooting section in `wp-env` documen
 
 ### Using Local or MAMP
 
-As an alternative to Docker and `wp-env`, you can also use [Local](https://localwp.com/), [WampServer](http://www.wampserver.com/en/), or [MAMP](https://www.mamp.info/) to run a local WordPress environment. To do so clone and install Gutenberg as a regular plugin in your installation by creating a symlink or copying the directory to the proper `wp-content/plugins` directory.
+As an alternative to Docker and `wp-env`, you can also use [Local](https://localwp.com/), [WampServer](https://wampserver.aviatechno.net/), or [MAMP](https://www.mamp.info/) to run a local WordPress environment. To do so clone and install Gutenberg as a regular plugin in your installation by creating a symlink or copying the directory to the proper `wp-content/plugins` directory.
 
 You will also need some extra configuration to be able to run the e2e tests.
 
@@ -180,7 +183,7 @@ If so, you need to instruct Apache to allow following such links:
 
 Tools like MAMP tend to configure MySQL to use ports other than the default 3306, often preferring 8889. This may throw off WP-CLI, which will fail after trying to connect to the database. To remedy this, edit `wp-config.php` and change the `DB_HOST` constant from `define( 'DB_HOST', 'localhost' )` to `define( 'DB_HOST', '127.0.0.1:8889' )`.
 
-### On A Remote Server
+### On a remote server
 
 You can use a remote server in development by building locally and then uploading the built files as a plugin to the remote server.
 
@@ -200,7 +203,7 @@ You can launch Storybook by running `npm run storybook:dev` locally. It will ope
 
 You can also test Storybook for the current `trunk` branch on GitHub Pages: [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)
 
-## Developer Tools
+## Developer tools
 
 We recommend configuring your editor to automatically check for syntax and lint errors. This will help you save time as you develop by automatically fixing minor formatting issues. Here are some directions for setting up Visual Studio Code, a popular editor used by many of the core developers, these tools are also available for other editors.
 
diff --git a/docs/contributors/code/git-workflow.md b/docs/contributors/code/git-workflow.md
index 4e4e886f670a80..f2ad1345355deb 100644
--- a/docs/contributors/code/git-workflow.md
+++ b/docs/contributors/code/git-workflow.md
@@ -23,7 +23,7 @@ See the [repository management document](/docs/contributors/repository-managemen
 
 ## Git Workflow Walkthrough
 
-The workflow for code and documentation is the same, since both are managed in GitHub. You can watch a [video walk-through of contributing documentation](https://wordpress.tv/2020/09/02/marcus-kazmierczak-contribute-developer-documentation-to-gutenberg/) and the accompanying [slides for contributing to Gutenberg](https://mkaz.blog/wordpress/contribute-documentation-to-gutenberg/).
+The workflow for code and documentation is the same, since both are managed in GitHub. You can watch a [video walk-through of contributing documentation](https://wordpress.tv/2020/09/02/marcus-kazmierczak-contribute-developer-documentation-to-gutenberg/) and the accompanying [tutorial for contributing to Gutenberg](https://mkaz.blog/wordpress/contribute-developer-documentation-to-gutenberg/).
 
 Here is a visual overview of the Git workflow:
 
@@ -73,7 +73,7 @@ Do not make a new pull request for updates; by pushing your change to your repos
 
 That’s it! Once approved and merged, your change will be incorporated into the main repository. 🎉
 
-## Branch Naming
+## Branch naming
 
 You should name your branches using a prefixes and short description, like this: `[type]/[change]`.
 
@@ -87,7 +87,7 @@ Suggested prefixes:
 
 For example, `add/gallery-block` means you're working on adding a new gallery block.
 
-## Keeping Your Branch Up To Date
+## Keeping your branch up to date
 
 When many different people are working on a project simultaneously, pull requests can go stale quickly. A "stale" pull request is one that is no longer up to date with the main line of development, and it needs to be updated before it can be merged into the project.
 
@@ -105,7 +105,7 @@ git rebase trunk
 git push --force-with-lease origin your-branch-name
 ```
 
-## Keeping Your Fork Up To Date
+## Keeping your fork up to date
 
 Working on pull request starts with forking the Gutenberg repository, your separate working copy. Which can easily go out of sync as new pull requests are merged into the main repository. Here your working repository is a `fork` and the main Gutenberg repository is `upstream`. When working on new pull request you should always update your fork before you do `git checkout -b my-new-branch` to work on a feature or fix.
 
@@ -138,7 +138,7 @@ The above commands will update your `trunk` branch from _upstream_. To update an
 
 ## Miscellaneous
 
-### Git Archeology
+### Git archeology
 
 When looking for a commit that introduced a specific change, it might be helpful to ignore revisions that only contain styling or formatting changes.
 
diff --git a/docs/contributors/code/grammar.md b/docs/contributors/code/grammar.md
deleted file mode 100644
index ae59259932f91e..00000000000000
--- a/docs/contributors/code/grammar.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Block Grammar
-
-<dl><dt></dt><dd><pre><header>Block_List</header>  = $(!Block .)* (Block $(!Block .)*)* $(.*)</pre></dd><dt></dt><dd><pre><header>Block</header>  = Block_Void
-  / Block_Balanced</pre></dd><dt></dt><dd><pre><header>Block_Void</header>  = "&lt;!--" __ "wp:" Block_Name __ (Block_Attributes __)? "/-->"</pre></dd><dt></dt><dd><pre><header>Block_Balanced</header>  = Block_Start (Block / $(!Block !Block_End .)+)* Block_End</pre></dd><dt></dt><dd><pre><header>Block_Start</header>  = "&lt;!--" __ "wp:" Block_Name __ (Block_Attributes __)? "-->"</pre></dd><dt></dt><dd><pre><header>Block_End</header>  = "&lt;!--" __ "/wp:" Block_Name __ "-->"</pre></dd><dt></dt><dd><pre><header>Block_Name</header>  = Namespaced_Block_Name
-  / Core_Block_Name</pre></dd><dt></dt><dd><pre><header>Namespaced_Block_Name</header>  = $(Block_Name_Part "/" Block_Name_Part)</pre></dd><dt></dt><dd><pre><header>Core_Block_Name</header>  = $(Block_Name_Part)</pre></dd><dt></dt><dd><pre><header>Block_Name_Part</header>  = $([a-z] [a-z0-9_-]*)</pre></dd><dt>JSON-encoded attributes embedded in a block's opening comment</dt><dd><pre><header>Block_Attributes</header>  = $("{" (!("}" __ "" "/"? "-->") .)* "}")</pre></dd><dt></dt><dd><pre><header>__</header>  = [ \t\r\n]+</pre></dd></dl>
diff --git a/docs/contributors/code/managing-packages.md b/docs/contributors/code/managing-packages.md
index bfea8fed81242b..8ad0266b1482bf 100644
--- a/docs/contributors/code/managing-packages.md
+++ b/docs/contributors/code/managing-packages.md
@@ -1,11 +1,7 @@
 # Managing Packages
 
-This repository uses [monorepo] to manage WordPress modules and publish them with [lerna] as packages to [npm]. This enforces certain steps in the workflow which are described in details in [packages](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md) documentation.
+This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) to manage WordPress packages and [lerna](https://lerna.js.org/) to publish them to [npm](https://www.npmjs.com/). This enforces certain steps in the workflow which are described in details in [packages](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md) documentation.
 
 Maintaining dozens of npm packages is difficult—it can be tough to keep track of changes. That's why we use `CHANGELOG.md` files for each package to simplify the release process. As a contributor, you should add an entry to the aforementioned file each time you contribute adding production code as described in [Maintaining Changelogs](https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md#maintaining-changelogs) section.
 
 Publishing WordPress packages to npm is automated by synchronizing it with the bi-weekly Gutenberg plugin RC1 release. You can learn more about this process and other ways to publish new versions of npm packages in the [Gutenberg Release Process document](/docs/contributors/code/release.md#packages-releases-to-npm-and-wordpress-core-updates).
-
-[lerna]: https://lerna.js.org/
-[monorepo]: https://monorepo.tools
-[npm]: https://www.npmjs.com/
diff --git a/docs/contributors/code/react-native/README.md b/docs/contributors/code/react-native/README.md
index f5b8fc79aba865..dd6afc2e8bd561 100644
--- a/docs/contributors/code/react-native/README.md
+++ b/docs/contributors/code/react-native/README.md
@@ -1,6 +1,6 @@
 # React Native mobile editor
 
-The Gutenberg repository includes the source for the [React Native](https://facebook.github.io/react-native/) based editor for mobile.
+The Gutenberg repository includes the source for the [React Native](https://reactnative.dev/) based editor for mobile.
 
 ## Mind the mobile
 
@@ -20,8 +20,8 @@ Also, the mobile client is packaged and released via the [official WordPress app
 
 If you encounter a failed Android/iOS test on your pull request, we recommend the following steps:
 
-1. Re-running the failed GitHub Action job ([guide for how to re-run](https://docs.github.com/en/actions/configuring-and-managing-workflows/managing-a-workflow-run#viewing-your-workflow-history)) - This should fix failed tests the majority of the time. Cases where you need to re-run tests for a pass should go down in the near future as flakiness in tests is actively being worked on. See the following GitHub issue for updated info on known failures: https://github.com/WordPress/gutenberg/issues/23949
-2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [mobile getting started guide](/docs/contributors/code/react-native/getting-started-react-native.md#ui-tests), with even more relevant info in the [relevant directory README.md](https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-editor/__device-tests__#running-the-tests-locally)
+1. Re-running the failed GitHub Action job ([guide for how to re-run](https://docs.github.com/en/actions/configuring-and-managing-workflows/managing-a-workflow-run#viewing-your-workflow-history)) - This should fix failed tests the majority of the time.
+2. You can check if the test is failing locally by following the steps to run the E2E test on your machine from the [E2E testing documentation](/packages/react-native-editor/__device-tests__/README.md).
 3. In addition to reading the logs from the E2E test, you can download a video recording from the Artifacts section of the GitHub job that may have additional useful information.
 4. Check if any changes in your PR would require corresponding changes to `.native.js` versions of files.
 5. Lastly, if you're stuck on a failing mobile test, feel free to reach out to contributors on Slack in the #mobile or #core-editor chats in the WordPress Core Slack, [free to join](https://make.wordpress.org/chat/).
@@ -32,4 +32,4 @@ Follow the instructions in [Native mobile testing](/docs/contributors/code/react
 
 ## Internationalization (i18n)
 
-Further information about this topic can be found in the [React Native Internationalization Guide](/docs/contributors/code/react-native/internationalization-guide.md).
\ No newline at end of file
+Further information about this topic can be found in the [React Native Internationalization Guide](/docs/contributors/code/react-native/internationalization-guide.md).
diff --git a/docs/contributors/code/react-native/getting-started-react-native.md b/docs/contributors/code/react-native/getting-started-react-native.md
index 72cad307673861..48dc0e81f260eb 100644
--- a/docs/contributors/code/react-native/getting-started-react-native.md
+++ b/docs/contributors/code/react-native/getting-started-react-native.md
@@ -7,7 +7,7 @@ Welcome! This is the Getting Started guide for the native mobile port of the blo
 For a developer experience closer to the one the project maintainers current have, make sure you have the following tools installed:
 
 -   git
--   [nvm](https://github.com/creationix/nvm)
+-   [nvm](https://github.com/nvm-sh/nvm)
 -   Node.js and npm (use nvm to install them)
 -   [Android Studio](https://developer.android.com/studio/) to be able to compile the Android version of the app
 -   [Xcode](https://developer.apple.com/xcode/) to be able to compile the iOS app
@@ -28,6 +28,7 @@ Note that the commands described here should be run in the top-level directory o
 ```sh
 nvm install
 npm ci
+npm run native preios
 ```
 
 ## Run
@@ -54,7 +55,7 @@ npm run native ios
 
 which will attempt to open your app in the iOS Simulator if you're on a Mac and have it installed.
 
-### Running on Other iOS Device Simulators
+### Running on other iOS device simulators
 
 To compile and run the app using a different device simulator, use the following, noting the double sets of `--` to pass the simulator option down to the `react-native` CLI.
 
@@ -70,6 +71,40 @@ npm run native ios -- -- --simulator="iPhone Xs Max"
 
 To see a list of all of your available iOS devices, use `xcrun simctl list devices`.
 
+### Customizing the demo Editor
+
+By default, the Demo editor renders most of the supported core blocks. This is helpful to showcase the editor's capabilities, but can be distracting when focusing on a specific block or feature. One can customize the editor's initial state by leveraging the `native.block_editor_props` hook in a `packages/react-native-editor/src/setup-local.js` file.
+
+<details><summary>Example setup-local.js</summary>
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+export default () => {
+	addFilter(
+		'native.block_editor_props',
+		'core/react-native-editor',
+		( props ) => {
+			return {
+				...props,
+				initialHtml,
+			};
+		}
+	);
+};
+
+const initialHtml = `
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Just a Heading</h2>
+<!-- /wp:heading -->
+`;
+```
+
+</details>
+
 ### Troubleshooting
 
 If the Android emulator doesn't start correctly, or compiling fails with `Could not initialize class org.codehaus.groovy.runtime.InvokerHelper` or similar, it may help to double check the set up of your development environment against the latest requirements in [React Native's documentation](https://reactnative.dev/docs/environment-setup). With Android Studio, for example, you will need to configure the `ANDROID_HOME` environment variable and ensure that your version of JDK matches the latest requirements.
@@ -84,12 +119,12 @@ When you first open the project in Visual Studio, you will be prompted to instal
 
 One of the extensions we are using is the [React Native Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native). This allows you to run the packager from VSCode or launch the application on iOS or Android. It also adds some debug configurations so you can set breakpoints and debug the application directly from VSCode. Take a look at the [extension documentation](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native) for more details.
 
-## Unit Tests
+## Unit tests
 
 Use the following command to run the test suite:
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 It will run the [jest](https://github.com/facebook/jest) test runner on your tests. The tests are running on the desktop against Node.js.
@@ -97,43 +132,17 @@ It will run the [jest](https://github.com/facebook/jest) test runner on your tes
 To run the tests with debugger support, start it with the following CLI command:
 
 ```sh
-npm run native test:debug
+npm run test:native:debug
 ```
 
 Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "Remote Target" section). While testing/developing, feel free to sprinkle `debugger` statements anywhere in the code that you'd like the debugger to break.
 
-## Writing and Running Unit Tests
-
-This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/src/test/api-fetch-setup.test.js). The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).
-
-## UI Tests
-
-This repository uses Appium to run UI tests. The tests live in `__device-tests__` and are written using Appium to run tests against simulators and real devices. To run these you'll need to check off a few things:
-
--   When running the tests, you'll need to ensure the Metro bundler (`npm run native start`) is not running.
--   [Appium CLI](https://github.com/appium/appium/blob/HEAD/docs/en/about-appium/getting-started.md) installed and available globally. We also recommend using [appium-doctor](https://github.com/appium/appium-doctor) to ensure all of Appium's dependencies are good to go. You don't have to worry about starting the server yourself, the tests handle starting the server on port 4723, just be sure that the port is free or feel free to change the port number in the test file.
--   For iOS a simulator should automatically launch but for Android you'll need to have an emulator _with at least platform version 8.0_ fired up and running.
-
-Then, to run the UI tests on iOS:
-
-```sh
-npm run native test:e2e:ios:local
-```
-
-and for Android:
+## Writing and running unit tests
 
-```sh
-npm run native test:e2e:android:local
-```
-
-To run a single test instead of the entire suite, use `npm run native device-tests:local`. Here's an example that runs only `gutenberg-editor-paragraph.test.js`:
-
-```sh
-npm run native test:e2e:android:local gutenberg-editor-paragraph.test.js
-```
+This project is set up to use [jest](https://jestjs.io/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/src/test/api-fetch-setup.test.js). The [jest documentation](https://jestjs.io/docs/getting-started) is also a wonderful resource, as is the [React Native testing tutorial](https://jestjs.io/docs/tutorial-react-native).
 
-Note: You might experience problems that seem to be related to the tests starting the Appium server, e.g. errors that say `Connection Refused`, `Connection Reset` or `The requested environment is not available`. For now, you can manually start the Appium server via [appium desktop](https://github.com/appium/appium-desktop) or the CLI, then change the port number in the tests while (optionally) commenting out related code in the `beforeAll` and `afterAll` block.
+## End-to-end tests
 
-For a more detailed outline of the UI tests and how to get started writing one, please visit the [UI Test documentation](/packages/react-native-editor/__device-tests__/README.md) and our [contributing guide](/packages/react-native-editor/__device-tests__/CONTRIBUTING.md).
+In addition to unit tests, the Mobile Gutenberg (MG) project relies upon end-to-end (E2E) tests to automate testing critical flows in an environment similar to that of an end user. We generally prefer unit tests due to their speed and ease of maintenance. However, assertions that require OS-level features (e.g. complex gestures, text selection) or visual regression testing (e.g. dark mode, contrast levels) we use E2E tests.
 
-You might want to use Visual Studio Code as an editor. The project includes the configuration needed to use the above codestyle and linting tools automatically.
+The E2E tests are found in the [`packages/react-native-editor/__device-tests__`](/packages/react-native-editor/__device-tests__) directory. Additional documentation on running and contributing to these tests can be found in the [tests directory](/packages/react-native-editor/__device-tests__#readme).
diff --git a/docs/contributors/code/react-native/integration-test-guide.md b/docs/contributors/code/react-native/integration-test-guide.md
index af810a3a5dff24..d4da7bbd1d201c 100644
--- a/docs/contributors/code/react-native/integration-test-guide.md
+++ b/docs/contributors/code/react-native/integration-test-guide.md
@@ -121,42 +121,32 @@ const radiusSlider = getByTestId( 'Slider Border Radius' );
 
 Note that either a plain string or a regular expression can be passed into these queries. A regular expression is best for querying part of a string (e.g. any element whose accessibility label contains `Unsupported Block. Row 1`). Note that special characters such as `.` need to be escaped.
 
-### Use of `waitFor`
+### Use of `find` queries
 
-After rendering the components or firing an event, side effects might happen due to potential state updates so the element we’re looking for might not be yet rendered. In this case, we would need to wait for the element to be available and for this purpose, we can use the `waitFor` function, which periodically executes the provided callback to determine whether the element appeared or not.
+After rendering the components or firing an event, side effects might happen due to potential state updates so the element we’re looking for might not be yet rendered. In this case, we would need to wait for the element to be available and for this purpose, we can use the `find*` versions of query functions, which internally use `waitFor` and periodically check whether the element appeared or not.
 
 Here are some examples:
 
 ```js
-const mediaLibraryButton = await waitFor( () =>
-	getByText( 'WordPress Media Library' )
-);
+const mediaLibraryButton = await findByText( 'WordPress Media Library' );
 ```
 
 ```js
-const missingBlock = await waitFor( () =>
-	getByLabelText( /Unsupported Block\. Row 1/ )
-);
+const missingBlock = await findByLabelText( /Unsupported Block\. Row 1/ );
 ```
 
 ```js
-const radiusSlider = await waitFor( () =>
-	getByTestId( 'Slider Border Radius' )
-);
+const radiusSlider = await findByTestId( 'Slider Border Radius' );
 ```
 
-In most cases we’ll use the `waitFor` function, but it’s important to note that it should be restricted to those queries that actually require waiting for the element to be available.
-
-NOTE: The `react-native-testing-library` package provides the `query*` and `find*` functions for this purpose too, but we should avoid using them for now because there’s a [known issue](https://github.com/callstack/react-native-testing-library/issues/379) that would make the test fail.
+In most cases we’ll use the `find*` functions, but it’s important to note that it should be restricted to those queries that actually require waiting for the element to be available.
 
 ### `within` queries
 
 It’s also possible to query elements contained in other elements via the `within` function, here is an example:
 
 ```js
-const missingBlock = await waitFor( () =>
-	getByLabelText( /Unsupported Block\. Row 1/ )
-);
+const missingBlock = await findByLabelText( /Unsupported Block\. Row 1/ );
 const translatedTableTitle = within( missingBlock ).getByText( 'Tabla' );
 ```
 
@@ -236,7 +226,7 @@ Here is an example of how to insert a Paragraph block:
 
 ```js
 // Open the inserter menu
-fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
+fireEvent.press( await findByLabelText( 'Add block' ) );
 
 const blockList = getByTestId( 'InserterUI-Blocks' );
 // onScroll event used to force the FlatList to render all items
@@ -249,7 +239,7 @@ fireEvent.scroll( blockList, {
 } );
 
 // Insert a Paragraph block
-fireEvent.press( await waitFor( () => getByText( `Paragraph` ) ) );
+fireEvent.press( await findByText( `Paragraph` ) );
 ```
 
 ### Open block settings
@@ -259,7 +249,7 @@ The block settings can be accessed by tapping the "Open Settings" button after s
 ```js
 fireEvent.press( block );
 
-const settingsButton = await waitFor( () => getByLabelText( 'Open Settings' ) );
+const settingsButton = await findByLabelText( 'Open Settings' );
 fireEvent.press( settingsButton );
 ```
 
@@ -301,9 +291,7 @@ fireEvent.scroll( blockList, {
 Sliders found in bottom sheets should be queried using their `testID`:
 
 ```js
-const radiusSlider = await waitFor( () =>
-	getByTestId( 'Slider Border Radius' )
-);
+const radiusSlider = await findByTestId( 'Slider Border Radius' );
 fireEvent( radiusSlider, 'valueChange', '30' );
 ```
 
@@ -314,8 +302,8 @@ Note that a slider’s `testID` is "Slider " + label. So for a slider with a lab
 One caveat when adding blocks is that if they contain inner blocks, these inner blocks are not rendered. The following example shows how we can make a Buttons block render its inner Button blocks (assumes we’ve already obtained a reference to the Buttons block as `buttonsBlock`):
 
 ```js
-const innerBlockListWrapper = await waitFor( () =>
-	within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+const innerBlockListWrapper = await within( buttonsBlock ).findByTestId(
+	'block-list-wrapper'
 );
 fireEvent( innerBlockListWrapper, 'layout', {
 	nativeEvent: {
@@ -325,8 +313,8 @@ fireEvent( innerBlockListWrapper, 'layout', {
 	},
 } );
 
-const buttonInnerBlock = await waitFor( () =>
-	within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
+const buttonInnerBlock = await within( buttonsBlock ).findByLabelText(
+	/Button Block\. Row 1/
 );
 fireEvent.press( buttonInnerBlock );
 ```
diff --git a/docs/contributors/code/react-native/osx-setup-guide.md b/docs/contributors/code/react-native/osx-setup-guide.md
index 98b6721f4cd023..dab5f33448b74d 100644
--- a/docs/contributors/code/react-native/osx-setup-guide.md
+++ b/docs/contributors/code/react-native/osx-setup-guide.md
@@ -74,7 +74,7 @@ Install [Xcode](https://developer.apple.com/xcode/) via the app store and then o
 -   Accept the license agreement.
 -   Verify that `Xcode > Preferences > Locations > Command Line Tools` points to the current Xcode version.
 
-<img src="https://developer.wordpress.org/files/2021/10/xcode-command-line-tools.png" width="700px" alt="Screenshot of XCode command line tools settings.">
+<img src="https://developer.wordpress.org/files/2021/10/xcode-command-line-tools.png" width="700px" alt="Screenshot of Xcode command line tools settings.">
 
 ### react-native doctor
 
@@ -212,7 +212,7 @@ After a bit of a wait, we’ll see something like this:
 ## Unit Tests
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 ## Integration Tests
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index 4ce35e189fd700..ec3af0d7bd4cb2 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -1,176 +1,352 @@
 # Gutenberg Release Process
 
-This Repository is used to perform several types of releases. This document serves as a checklist for each one of these. It is helpful if you'd like to understand the different workflows.
+The [Gutenberg repository](https://github.com/WordPress/gutenberg) on GitHub is used to perform several types of releases. This document serves as a checklist for each of these releases, and it can help you understand the different workflows involved.
 
-To release a stable version of the Gutenberg plugin you need to be part of the [Gutenberg development team](/docs/block-editor/contributors/repository-management/#teams). On top of that, you need approval from a member of the Gutenberg Core team for the final step of the release process (upload to the WordPress.org plugin repo -- see below). If you aren't a member yourself, make sure to contact one ahead of time so they'll be around at the time of the release. You can ping in the [#core-editor Slack channel](https://wordpress.slack.com/messages/C02QB2JS7).
+Before you begin, there are some requirements that must be met in order to successfully release a stable version of the Gutenberg plugin. You will need to:
 
-To [release WordPress's npm packages](#packages-releases-to-npm-and-wordpress-core-updates), similar requirements apply.
+-   Be a member of the [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams). This gives you the ability to launch the GitHub actions that are related to the release process and to backport pull requests (PRs) to the release branch.
+-   Have write permissions on the [Make WordPress Core](http://make.wordpress.org/core) blog. This allows you to draft the release post.
+-   Obtain approval from a member of the Gutenberg Core team in order to upload the new version Gutenberg to the WordPress.org plugin directory.
 
-## Plugin Releases
+Similar requirements apply to releasing WordPress's [npm packages](https://developer.wordpress.org/block-editor/contributors/code/release/#packages-releases-to-npm-and-wordpress-core-updates).
 
-### Schedule
+## Gutenberg plugin releases
 
-We release a new major version approximately every two weeks. The current and next versions are [tracked in GitHub milestones](https://github.com/WordPress/gutenberg/milestones), along with each version's tagging date (the day when _the release candidate_ is to be tagged).
+The first step in releasing a stable version of the Gutenberg plugin is to [create an issue](https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&projects=&template=New_release.md) in the Gutenberg repository. The issue template is called "Gutenberg Release," and it contains a checklist for the complete release process, from release candidate to changelog curation to cherry-picking, stable release, and release post. The issue for [Gutenberg 15.7](https://github.com/WordPress/gutenberg/issues/50092) is a good example.
 
--   **On the date of the current milestone**, we publish a release candidate and make it available for plugin authors and users to test. If any regressions are found with a release candidate, a new one can be published. On this date, all remaining PRs on the milestone are moved automatically to the next release. Release candidates should be versioned incrementally, starting with `-rc.1`, then `-rc.2`, and so on. [Preparation of the release post starts here](/docs/block-editor/contributors/code/release/#writing-the-release-notes-and-post) and spans until the final release.
+The checklist helps you coordinate with developers and other teams involved in the release process. It ensures that all of the necessary steps are completed and that everyone is aware of the schedule and important milestones.
 
--   **One week after the first release candidate**, the stable version is created based on the last release candidate and any necessary regression fixes. Once the stable version is released, the release post is published, including a [performance audit](/docs/block-editor/contributors/testing-overview/#performance-testing).
+### Release schedule
 
-If critical bugs are discovered on stable versions of the plugin, patch versions can be released at any time.
+A new major version of Gutenberg is released approximately every two weeks. The current and next versions are tracked in [GitHub milestones](https://github.com/WordPress/gutenberg/milestones), along with the date when each version will be tagged.
 
-### Release Tool
+**On the date of the current milestone**, also called the tagging date, the first release candidate (RC) of Gutenberg is published. This is a pre-release version of the plugin that is made available for testing by plugin authors and users. If any regressions are found, a new RC can be published.
 
-The plugin release process is entirely automated and happens solely on GitHub -- i.e. it doesn't require any steps to be run locally on your machine.
+Release candidates are versioned incrementally, starting with `-rc.1`, then `-rc.2`, and so on. As soon as the first RC (RC1) is published, preparation for the release post begins.
 
-For your convenience, here's an [11-minute video walkthrough](https://youtu.be/TnSgJd3zpJY) that demonstrates the release process. It's recommended to watch this if you're unfamiliar with it. The process is also documented in the following paragraphs.
+**One week after the RC1**, the stable version is created based on the last RC and any necessary regression fixes. Once the stable version is released, the release post is published.
 
-#### Running workflow
+If critical bugs are discovered in stable versions of the plugin, patch versions can be released at any time.
 
-In order to start the release process, go to Gutenberg's GitHub repository's Actions tab, and locate the ["Build Gutenberg Plugin Zip" action](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml). Note the blue banner that says "This workflow has a `workflow_dispatch` event trigger.", and expand the "Run workflow" dropdown on its right hand side.
+### Release management
 
-![Run workflow dropdown for the plugin release](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/code/workflow-dispatch-plugin-banner.png)
+Each major Gutenberg release is run by a release manager, also known as a release lead. This individual, or small team of individuals, is responsible for the release of Gutenberg with support from the broader [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams).
 
-To release a release candidate (RC) version of the plugin, enter `rc`. To release a stable version, enter `stable`. In each case, press the green "Run workflow" button.
+The release manager is responsible for initiating all release activities, and their approval is required for any changes to the release plan. In the event of an emergency or if the release manager is unavailable, other team members may take appropriate action, but they should keep the release manager informed.
 
-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.
+<div class="callout callout-tip">
+If you are a member of the <a href="https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> and are interested in leading a Gutenberg release, reach out in the <a href="https://wordpress.slack.com/messages/C02QB2JS7">#core-editor</a> Slack channel.</div>
 
-#### View the release draft
+### Preparing a release
 
-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).
+The plugin release process is mostly automated and happens on GitHub. You do not need to run any steps locally on your machine. However, it’s a good idea to have a local copy of Gutenberg for changelog preparation, general testing, and in case multiple release candidates are required. But more on that later.
 
-The changelog draft will be at least partially pre-organized (based on GitHub label) into sections and within those into "features". Take some time to read the generated notes and then edit them to ensure legibility and accuracy.
+Here is an [11-minute video](https://youtu.be/TnSgJd3zpJY) that demonstrates the plugin release process. If you are unfamiliar with the process, we recommend watching the video first. The process is also documented in the following paragraphs, which provide more detailed instructions.
 
-Don't rush this part -- it's important to bring the release notes into a nice shape. You don't have to do it all in one go -- you can save the draft and come back to it later.
+#### Organizing and labeling milestone PRs
 
-When editing the notes, you should be sure to:
+<div class="callout callout-info">
+    <strong>Quick reference</strong>
+    <ul>
+        <li>Ensure all PRs are properly labeled.</li>
+        <li>Each PR must have one label prefixed by <code>[Type]</code>.</li>
+    </ul>
+</div>
 
-1. Delete the `Various` section and move anything under it to a more appropriate section.
-2. Move all features under `Uncategorized` bullet points to a more suitable feature.
+The first step in preparing a Gutenberg release is to organize all PRs assigned to the current [milestone](https://github.com/WordPress/gutenberg/milestones) and ensure that each is properly labeled. [Labels](https://github.com/WordPress/gutenberg/labels) are used to automatically generate the changelog, and changing the labels on PRs is much faster than reorganizing an existing changelog in the release section afterward.
 
-You can find some more tips on writing the release notes and post in the section below.
+To test the changelog automation that will be run as part of the release workflow, you can use the following command in your local copy of Gutenberg using the milestone of the stable release version you are working on:
 
-#### Publishing the release
+```
+npm run other:changelog -- --milestone="Gutenberg 16.2"
+```
 
-Only once you're happy with the shape of the release notes should you press the green "Publish release" button. This will create a `git` tag for the version, publish the release, and trigger [another GHA workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) that has a twofold purpose:
+The output of this command is the changelog for the provided milestone, which in the above example is Gutenberg 16.2. You can copy and paste the output into a Markdown document, which will make it easier to view and allow you to follow the links to each PR.
 
-1. Use the release notes that you just edited to update `changelog.txt`, and
-2. Upload the new plugin version to the WordPress.org plugin repository (SVN) (only if you're releasing a stable version).
+All PRs should have a label prefixed by `[Type]` as well as labels for sub-categories. The two most common labels are `[Type] Bug` and `[Type] Enhancement`. When reviewing the generated changelog, pay close attention to the following:
 
-The latter step needs approval by a member of the Gutenberg Core team. Locate the ["Upload Gutenberg plugin to WordPress.org plugin repo" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+-   **Enhancements:** Look for PRs that don't have any subcategories attached.
+-   **Bug fixes:** Also look for PRs that don't have any subcategories attached.
+-   **Various:** PRs in this section don't have any labels at all.
 
-This will cause the new version to be available to users of WordPress all over the globe! 💃
-You should check that folks can install the new version from their Dashboard.
+Update the labels on each PR as needed. You can continue generating the changelog until you are comfortable proceeding. Now you are ready to start the release candidate workflow.
 
-Once released, all that's left to do is writing a release post on [make.wordpress.org/core](https://make.wordpress.org/core/). You can find some tips on that below.
+<div class="callout callout-tip">
+You can see how the changelog is generated from the PR labels in the <a href="https://github.com/WordPress/gutenberg/blob/trunk/bin/plugin/commands/changelog.js">changelog.js</a> file.
+</div>
 
-### Documenting the release with the Release Notes and Post
+#### Running the release workflow
 
 <div class="callout callout-info">
-Documenting the release is a group effort between the release manager, Gutenberg core team developers, and designers , comprised of a series of sequential steps that, because of the amount of people involved and the coordination required, need to adhere to a timeline between the RC and stable releases. The release manager will get pinged by a core member to kick-off and coordinate this process.
+    <strong>Quick reference</strong>
+    <ul>
+        <li>
+            Announce in <a href="https://wordpress.slack.com/messages/C02QB2JS7">#core-editor</a> that you are about to start the release workflow.
+        </li>
+        <li>
+            Run the <a href="https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml">Build Gutenberg Plugin Zip</a> workflow.
+        </li>
+    </ul>
 </div>
 
-1. Curating the changelog - Wednesday after the RC release to Friday
-2. Selecting the release highlights - Friday to Monday
-3. Drafting the release post - Monday to Wednesday
-4. Running the performance tests - Wednesday right after the stable release
-5. Publishing the post - Wednesday after stable release
+Before you begin, announce in [#core-editor](https://wordpress.slack.com/messages/C02QB2JS7) Slack channel that you are about to start the workflow and indicate whether you are releasing a stable version of Gutenberg or an RC.
+
+Then go to the Gutenberg repository, click on the Actions tab, and then locate the [Build Gutenberg Plugin Zip](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) action. Note the blue banner that says, “This workflow has a `workflow_dispatch` event trigger.” Expand the “Run workflow” dropdown on its right-hand side.
+
+![Run workflow dropdown for the plugin release](https://developer.wordpress.org/files/2023/07/image-3-1.png)
+
+To release an RC version of the plugin, enter `rc `in the text field. To release a stable version, enter `stable`. In each case, press the button “Run workflow”.
 
-#### 1. Curating the changelog
+This will trigger a GitHub Actions (GHA) workflow that will bump the plugin version, build the Gutenberg plugin `.zip` file, create a release draft, and attach the plugin `.zip` file. This part of the process typically takes about six minutes. The workflow will appear at the top of the list, right under the blue banner. Once it is finished, the workflow's status icon will change from a yellow dot to a green checkmark. You can follow along for a more detailed view by clicking on the workflow.
 
-The release notes draft is auto-generated by a script that looks for pull requests for the current milestone, and:
+#### Publishing the @wordpress packages to NPM
 
-1. Groups them into sections (by pull request label).
-2. Sub-groups them into "features" within each section (again by pull request label)
+As part of the release workflow, all of the @wordpress packages are published to NPM. After the [Build Gutenberg Plugin Zip](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) action has created the draft release, you may see a message that the [Publish npm packages](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) action requires someone with appropriate permissions to trigger it.
 
-This is intended to be a starting point for release notes, and manually reviewing and curating the changelog entries is still required. The release candidate changelog is reused in the stable release and greatly helps select the highlights; because depending on the release it can be a very time-consuming process, **it is recommended to start this process as soon as the milestone is closed** and the release candidate is published.
+This message is misleading. You do not need to take any action to publish the @wordpress packages to NPM. The process is automated and will automatically run after the release notes are published.
 
-Guidelines for proof-reading include:
+#### Viewing the release draft
 
--   Move _all_ entries under the `Various` section to a more appropriate section.
--   Move _all_ features listed under the `Uncategorized` bullet points to a more suitable feature grouping.
+As soon as the workflow has finished, you’ll find the release draft under [Gutenberg Releases](https://github.com/WordPress/gutenberg/releases). The draft is pre-populated with changelog entries based on previous RCs 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, delete any RC version headers (that are only there for your information) and move the more recent changes to the correct section (see below).
+
+#### Curating the release changelog
+
+The best time to work on the changelog is when it is first created during the release candidate workflow. This is when the changelog automation is called, and the first version of the changelog becomes available. The changelog process is mostly automated, but it depends heavily on the proper labeling of the PRs in the milestone, as mentioned above.
+
+The stable release process takes the changelogs of the RCs and adds them to the stable release. However, there is one important thing to note: the stable release only "remembers" the first version of the changelog, which is the version that was available when RC1 was published. Any subsequent changes to the changelog of RC1 will not be included in the stable release.
+
+That means if you curate the whole changelog before you publish RC1, you won’t have to work on it for the stable release, except for the few items of subsequent RC2 or RC3 releases that will also be added to the stable release.
+
+Once the release changelog is available in the draft, take some time to read the notes and edit them to make sure they are easy to read and accurate. Don't rush this part. It's important to make sure the release notes are as organized as possible, but you don't have to finish them all at once. You can save the draft and come back to it later.
+
+If you're worried that people won't be able to access the release candidate version until you publish the release, you can share the release artifact with the [#core-editor](https://wordpress.slack.com/messages/C02QB2JS7) Slack channel. This will give people access to the release candidate version while you finish curating the changelog.
+
+Here are some additional tips for preparing clear and concise changelogs:
+
+-   Move all entries under the `Various` section to a more appropriate section.
 -   Fix spelling errors or clarify wording. Phrasing should be easy to understand where the intended audience is those who use the plugin or are keeping up with ongoing development.
 -   Create new groupings as applicable, and move pull requests between.
--   When multiple pull requests relate to the same task (such as a follow-up pull request), try to combine them to a single entry.
--   If subtasks of a related set of pull requests are substantial, consider organizing as entries in a nested list.
--   If one or more pull requests revert one or more pull requests in the same release netting a zero-sum of code changes, remove them.
--   Remove all mobile app pull request entries (the only exception to this rule is if the mobile PR also updates functionality for the web).
+-   When multiple PRs relate to the same task (such as a follow-up pull request), try to combine them into a single entry. Good examples for this are PRs around removing Lodash for performance purposes, replacement of Puppeteer E2D tests with Playwright or efforts to convert public components to TypeScript.
+-   If subtasks of a related set of PRs are substantial, consider organizing as entries in a nested list.
+-   Remove PRs that revert other PRs in the same release if the net change in code is zero.
+-   Remove all PRs that only update the mobile app. The only exception to this rule is if the mobile app pull request also updates functionality for the web.
+-   If a subheader only has one PR listed, remove the subheader and move the PR to the next matching subheader with more than one item listed.
 
-#### 2. Selecting the release highlights
+#### Creating release candidate patches (cherry-picking)
 
-Once the changelog is cleaned up, the next step is to choose a few changes to highlight in the release post. These highlights usually focus on new features and enhancements, including performance and accessibility ones, but can also include important API changes or critical bug fixes.
+<div class="callout callout-info">
+    <strong>Quick reference</strong>
+    <ul>
+        <li>Ensure all PRs that need cherry-picking have the <code>Backport to Gutenberg RC</code> label.</li>
+        <li>In your local clone of the Gutenberg repository, switch to the release branch: <code>git checkout release/X.Y</code></li>
+        <li>Cherry-pick all merged PRs using the automated script: </code>npm run other:cherry-pick "Backport to Gutenberg RC"</code></li>
+    </ul>
+</div>
 
-Given the big scope of Gutenberg and the high number of pull requests merged in each milestone, it is not uncommon to overlook impactful changes worth highlighting; because of this, this step is a collaborative effort between the release manager, design, and Gutenberg Core team members.
+After an RC is published but before the final stable release, some bugs related to the release might be fixed and committed to `trunk`. The stable release will not automatically include these fixes. Including them is a manual process, which is called cherry-picking.
 
-#### 3. Drafting the release post
+There are a couple of ways you might be made aware of these bugs as a release manager:
 
-Because of the nature of the release post content, responsibilities are divided in this step. While the post **can either be drafted by the release manager or delegated to another core member** agreed upon in advance, **visual assets are created by the design team**.
+-   Contributors may add the `Backport to Gutenberg RC` label to a closed PR. [Do a search for any of these PRs](https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+label%3A%22Backport+to+Gutenberg+RC%22+is%3Aclosed) before publishing the final release.
+-   You may receive a direct message or a ping in the [#core-editor](https://wordpress.slack.com/messages/C02QB2JS7) Slack channel notifying you of PRs that need to be included in the RC. Even when this is the case, the `Backport to Gutenberg RC` should always be added to the PR.
 
-When possible, the highlighted changes in the release post should include an animation (video or GIF) or a static image of them in use. Choosing between an animation or a static image will depend on the best way to showcase each highlight: while animations are better to demonstrate workflows, more direct highlights can be shown with an image; having too many video players adds a layer of friction for users to see the highlight, whereas too many simultaneous animated GIFs can distract and overwhelm the reader.
+##### Automated cherry-picking
 
-These visual assets should maintain consistency with previous release posts; using lean, white themes helps in this regard and visually integrate well with the [make.wordpress.org/core](https://make.wordpress.org/core/) blog aesthetics. Including copyrighted material should be avoided, and browser plugins that can be seen in the browser canvas (spell checkers, form fillers, etc.) disabled when capturing the assets.
+The cherry-picking process can be automated with the `npm run other:cherry-pick "[Insert Label]"` script, which is included in Gutenberg. You will need to use the label `Backport to Gutenberg RC` when running the command and ensure all PRs that need cherry-picking have the label assigned.
 
-#### 4. Running the performance tests
+<div class="callout callout-warning">
+To cherry-pick PRs, you must clone (not fork) the Gutenberg repository and have write access. Only members of the <a href="https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> have the necessary permissions to perform this action.</div>
 
-The post should also include a performance audit at the end, comparing the current Gutenberg release with both the previous one and the latest WordPress major version. There are GitHub worfklows in place to do this comparison as part of the Continuous Integration setup, so the performance audit results can be found at the workflow run generated by the release commit in the [Performance Tests workflows](https://github.com/WordPress/gutenberg/actions/workflows/performance.yml) page, with the job name `Compare performance with current WordPress Core and previous Gutenberg versions`.
+Once you have cloned the Gutenberg repository to your local development environment, begin by switching to the release branch:
 
-If the GitHub workflow fails, the performance audit can be executed locally using `bin/plugin/cli.js perf` and passing the branches to run the performance suite against as parameters. In addition, the current major WP version can be passed to avoid running tests against the WP `trunk`. Example:
+```
+git checkout release/X.Y
+```
 
+Next, cherry-pick all the merged PRs with the appropriate backport label:
+
+```
+npm run other:cherry-pick "Backport to Gutenberg RC"
 ```
-node ./bin/plugin/cli.js perf release/x.y release/x.z wp/a.b --wp-version wp.major
+
+Behind the scenes, the script will:
+
+-   Cherry-pick all PRs with the label `Backport to Gutenberg RC`
+-   Add them to the release milestone
+-   `git push` all changes to the release branch
+-   Add a comment to the PR indicating it’s been cherry-picked
+-   Remove the label `Backport to Gutenberg RC` from the PR
+
+Here is a screenshot of the process:
+
+![Automated cherry-picking](https://developer.wordpress.org/files/2023/07/image-7.png)
+
+##### Manual cherry-picking
+
+If you need to handle cherry-picking one at a time and one step at a time, you can follow this sequence manually. After checking out the corresponding release branch:
+
+1. Cherry-pick each PR (in chronological order) using `git cherry-pick [SHA]`.
+2. When done, push the changes to GitHub using `git push`.
+3. Remove the `Backport to Gutenberg RC` label and update the milestone to the current release for all cherry-picked PRs.
+
+To find the `[SHA]` for a pull request, open the PR, and you’ll see a message “`[Username]` merged commit `[SHA]` into `trunk`” near the end.
+
+![Manual cherry-picking](https://developer.wordpress.org/files/2023/07/image-5.png)
+
+If the cherry-picked fixes deserve another release candidate before the stable version is published, create one by following the instructions above. Let other contributors know that a new release candidate has been released in the [#core-editor](https://wordpress.slack.com/messages/C02QB2JS7) Slack channel.
+
+#### Publishing the release
+
+<div class="callout callout-info">
+    <strong>Quick reference</strong>
+    <ul>
+        <li>In the release draft, press the “Publish release” button.</li>
+        <li>If publishing a stable release, get approval from a member of the <a href="https://github.com/orgs/WordPress/teams/gutenberg-release">Gutenberg Release</a>, <a href="https://github.com/orgs/WordPress/teams/gutenberg-core">Gutenberg Core</a>, or the <a href="https://github.com/orgs/WordPress/teams/wordpress-core">WordPress Core</a> teams to upload the new plugin version to the WordPress.org plugin repository (SVN).</li>
+        <li>Once uploaded, confirm that the latest version can be downloaded and updated from the WordPress plugin dashboard.</li>
+    </ul>
+</div>
+
+Only once you’re happy with the shape of the changelog in the release draft, press the “Publish release” button.
+
+Note that you do not need to change the checkboxes above the button. If you are publishing an RC, the “Set as a pre-release” will automatically be selected, and “Set as the latest release” will be selected if you are publishing the stable version.
+
+![Publishing the release checkboxes for an RC](https://developer.wordpress.org/files/2023/07/image.png)
+
+Publishing the release will create a `git` tag for the version, publish the release, and trigger [another GHA workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) with a twofold purpose:
+
+1. Use the release notes that you just edited to update `changelog.txt`, and
+2. Upload the new plugin version to the WordPress.org plugin repository (SVN) (only if you’re releasing a stable version).
+
+The last step needs approval by a member of either the [Gutenberg Release](https://github.com/orgs/WordPress/teams/gutenberg-release), [Gutenberg Core](https://github.com/orgs/WordPress/teams/gutenberg-core), or the [WordPress Core](https://github.com/orgs/WordPress/teams/wordpress-core) teams. These teams get a notification email when the release is ready to be approved, but if time is of the essence, you can ask in the #core-editor Slack channel or ping the [Gutenberg Release team](https://github.com/orgs/WordPress/teams/gutenberg-release)) to accelerate the process. Reaching out before launching the release process so that somebody is ready to approve is recommended. Locate the [“Upload Gutenberg plugin to WordPress.org plugin repo” workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+
+Once approved, the new Gutenberg version will be available to WordPress users all over the globe. Once uploaded, confirm that the latest version can be downloaded and updated from the WordPress plugin dashboard.
+
+The final step is to write a release post on [make.wordpress.org/core](https://make.wordpress.org/core/). You can find some tips on that below.
+
+### Troubleshooting the release
+
+> The plugin was published to the WordPress.org plugin directory but the workflow failed.
+
+This has happened occasionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
+
+It's important to check that:
+
+- the plugin from the directory works as expected
+- the ZIP contents (see [Downloads](https://plugins.trac.wordpress.org/browser/gutenberg/)) looks correct (doesn't have anything obvious missing)
+- the [Gutenberg SVN repo](https://plugins.trac.wordpress.org/browser/gutenberg/) has two new commits (see [the log](https://plugins.trac.wordpress.org/browser/gutenberg/)):
+  - the `trunk` folder should have "Commiting version X.Y.Z"
+  - there is a new `tags/X.Y.Z` folder with the same contents as `trunk` whose latest commit is "Tagging version X.Y.Z"
+
+Most likely, the tag folder couldn't be created. This is a [known issue](https://plugins.trac.wordpress.org/browser/gutenberg/) that [can be fixed manually](https://github.com/WordPress/gutenberg/issues/55295#issuecomment-1759292978).
+
+Either substitute SVN_USERNAME, SVN_PASSWORD, and VERSION for the proper values or set them as global environment variables first:
+
+```sh
+# CHECKOUT THE REPOSITORY
+svn checkout https://plugins.svn.wordpress.org/gutenberg/trunk --username "$SVN_USERNAME" --password "$SVN_PASSWORD" gutenberg-svn
+
+# MOVE TO THE LOCAL FOLDER
+cd gutenberg-svn
+
+# IF YOU HAPPEN TO HAVE ALREADY THE REPO LOCALLY
+# AND DIDN'T CHECKOUT, MAKE SURE IT IS UPDATED
+# svn up .
+
+# COPY CURRENT TRUNK INTO THE NEW TAGS FOLDER
+svn copy https://plugins.svn.wordpress.org/gutenberg/trunk https://plugins.svn.wordpress.org/gutenberg/tags/$VERSION -m 'Tagging version $VERSION' --no-auth-cache --non-interactive  --username "$SVN_USERNAME" --password "$SVN_PASSWORD"
 ```
 
-The performance values usually displayed in the release post are:
+Ask around if you need help with any of this.
+
+### Documenting the release
+
+Documenting the release is led by the release manager with the help of [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams) members. This process is comprised of a series of sequential steps that, because of the number of people involved, and the coordination required, need to adhere to a timeline between the RC and stable releases. Stable Gutenberg releases happen on Wednesdays, one week after the initial RC.
+
+<div class="callout callout-info">
+    <strong>Timeline</strong>
+    <ol>
+        <li>Make a copy of the <a href="https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit">Google Doc Template for release posts</a> – Wednesday to Friday</li>
+        <li>Select the release highlights – Friday to Monday</li>
+        <li>Request release assets (images, videos) from the Design team once highlights are finalized – Friday to Monday</li>
+        <li>Draft the release post and request peer review – Monday to Wednesday</li>
+        <li>Publishing the post after the stable version is released – Wednesday</li>
+    </ol>
+</div>
+
+#### Selecting the release highlights
+
+Once the changelog is cleaned up, the next step is to choose a few changes to highlight in the release post. These highlights usually focus on new features and enhancements, including performance and accessibility ones, but can also include important API changes or critical bug fixes.
+
+Given the big scope of Gutenberg and the high number of PRs merged in each milestone, it is not uncommon to overlook impactful changes worth highlighting; because of this, this step is a collaborative effort between the release manager and other Gutenberg development team members. If you don’t know what to pick, reach out to others on the team for assistance.
 
--   Time to the first block (test named `firstBlock`)
--   KeyPress Event (typing) (test named `type`)
+#### Requesting release assets
 
-#### 5. Publishing the post
+After identifying the highlights of a new WordPress release, the release manager requests visual assets from the Design team. The request is made in the [#design](https://wordpress.slack.com/archives/C02S78ZAL) Slack channel, and an example post for 15.8 can be found [here](https://wordpress.slack.com/archives/C02S78ZAL/p1684161811926279). The assets will be provided in a [Google Drive folder](https://drive.google.com/drive/folders/1U8bVbjOc0MekWjpMjNaVFVhHFEzQkYLB) assigned to the specific release.
 
-Once the post content is ready, an author already having permissions to post in [make.wordpress.org/core](https://make.wordpress.org/core/) will create a new draft and import the content; this post should be published after the actual release, helping external media to echo and amplify the release news. Remember asking for peer review is encouraged by the [make/core posting guidelines](https://make.wordpress.org/core/handbook/best-practices/post-comment-guidelines/#peer-review)!
+When creating visual assets for a WordPress release, use animations (video or GIF) or static images to showcase the highlights. Use [previous release posts](https://make.wordpress.org/core/tag/gutenberg-new/) as a guide, and keep in mind that animations are better for demonstrating workflows, while more direct highlights can be shown with an image. When creating assets, avoid using copyrighted material and disable browser plugins that can be seen in the browser canvas.
 
-### Creating Release Candidate Patches (done via `git cherry-pick`)
+#### Drafting the release post
 
-If a bug is found in a release candidate and a fix is committed to `trunk`, we should include that fix in the stable version (or optionally in another release candidate before that). To do this you'll need to use `git cherry-pick` to add these changes to the milestone's release branch. This way only the desired fixes are added rather than all the new code that has landed on `trunk` since tagging:
+The release manager is responsible for drafting the release post based on the [Google Doc Template](https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit). That said, because of the nature of the release post content, responsibilities can be divided up and delegated to other team members if agreed upon in advance. Once the draft is complete, ask for peer review.
 
-1. Checkout the corresponding release branch with: `git checkout release/x.x`.
-2. Cherry-pick fix commits (in chronological order) with `git cherry-pick [SHA]`. The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
-3. When done, push the changes to GitHub: `git push`.
+#### Publishing the release post
 
-If you decide that the fixes deserve another release candidate before the stable version is published, create one by following the instructions above. Let other contributors know that a new release candidate has been released in the [`#core-editor` channel](https://wordpress.slack.com/messages/C02QB2JS7).
+Once the post content is ready, an author with permission to post on [make.wordpress.org/core](https://make.wordpress.org/core/) will create a new draft and import the content. The post should include the following tags:
 
-### Creating Point Releases
+-   [#block-editor](https://make.wordpress.org/core/tag/block-editor/)
+-   [#core-editor](https://make.wordpress.org/core/tag/core-editor/)
+-   [#gutenberg](https://make.wordpress.org/core/tag/gutenberg/)
+-   [#gutenberg-new](https://make.wordpress.org/core/tag/gutenberg-new/)
 
-Occasionally it's necessary to create a point release (i.e. X.Y._Z_) of the Plugin. This is most commonly to push fixes for regressions and/or bugs.
+The author should then enable public preview on the post and ask for a final peer review. This is encouraged by the [make/core posting guidelines](https://make.wordpress.org/core/handbook/best-practices/post-comment-guidelines/#peer-review).
 
-As you proceed with the following process, it's worth bearing in mind that such point releases are not created as branches in their own right (e.g. `release/12.5.0`) but are simply [tags](https://github.com/WordPress/gutenberg/releases/tag/v12.5.1).
+Finally, the post should be published after the stable version is released and is available on WordPress.org. This will help external media to echo and amplify the release.
 
-The method for point releases is nearly identical to the main Plugin release process (see above) but has some notable exceptions. Please make sure to read _the whole_ of this guide before proceeding.
+### Creating minor releases
+
+Occasionally it's necessary to create a minor release (i.e. X.Y.**Z**) of the Plugin. This is usually done to expedite fixes for bad regressions or bugs. The `Backport to Gutenberg Minor Release` is usually used to identify PRs that need to be included in a minor release, but as release coordinator you may also be notified more informally through slack. Even so, it's good to ensure all relevant PRs have the correct label.
+
+As you proceed with the following process, it's worth bearing in mind that such minor releases are not created as branches in their own right (e.g. `release/12.5.0`) but are simply [tags](https://github.com/WordPress/gutenberg/releases/tag/v12.5.1).
+
+The method for minor releases is nearly identical to the main Plugin release process (see above) but has some notable exceptions. Please make sure to read _the entire_ guide before proceeding.
 
 #### Updating the release branch
 
-The point release should only contain the _specific commits_ required. To do this you should checkout the previous _minor_ stable (i.e. non-RC) release branch (e.g. `release/12.5`) locally and then cherry pick any commits that you require into that branch.
+The minor release should only contain the _specific commits_ required. To do this you should checkout the previous _major_ stable (i.e. non-RC) release branch (e.g. `release/12.5`) locally and then cherry pick any commits that you require into that branch.
+
+<div class="callout callout-alert">
+If an RC already exists for a new version, you _need_ to cherry-pick the same commits in the respective release branch, as they will not be included automatically. E.g.: If you're about to release a new minor release for 12.5 and just cherry-picked into `release/12.5`, but 12.6.0-rc.1 is already out, then you need to cherry-pick the same commits into the `release/12.6` branch, or they won't be included in subsequent releases for 12.6! Usually it's best to coordinate this process with the release coordinator for the next release.
+</div>
 
-The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
+The cherry-picking process can be automated with the [`npm run cherry-pick`](/docs/contributors/code/auto-cherry-picking.md) script, but be sure to use the `Backport to Gutenberg Minor Release` label when running the script.
 
-You must also ensure that all PRs being included are assigned to the Github Milestone on which the point release is based. Bear in mind, that when PRs are _merged_ they are automatically assigned a milestone for the next _stable_ release. Therefore you will need to go back through each PR in Github and re-assign the Milestone.
+You must also ensure that all PRs being included are assigned to the GitHub Milestone on which the minor release is based. Bear in mind, that when PRs are _merged_ they are automatically assigned a milestone for the next _stable_ release. Therefore you will need to go back through each PR in GitHub and re-assign the Milestone.
 
 For example, if you are releasing version `12.5.4`, then all PRs picked for that release must be unassigned from the `12.6` Milestone and instead assigned to the `12.5` Milestone.
 
-Once you have the stable release branch in order and the correct Milestone assigned to your PRs you can _push the branch to Github_ and continue with the release process using the Github website GUI.
+Once cherry picking is complete, you can also remove the `Backport to Gutenberg Minor Release` label from the PRs.
 
-#### Running the point release
+Once you have the stable release branch in order and the correct Milestone assigned to your PRs you can _push the branch to GitHub_ and continue with the release process using the GitHub website GUI.
 
-![Run workflow dropdown for the plugin release](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/code/workflow-dispatch-plugin-banner.png)
+#### Running the minor release
+
+![Run workflow dropdown for the plugin release](https://developer.wordpress.org/files/2023/07/image-1.png)
 
 Go to Gutenberg's GitHub repository's Actions tab, and locate the ["Build Gutenberg Plugin Zip" action](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml). You should now _carefully_ choose the next action based on information about the current Plugin release version:
 
-_If_ the previous release version was **stable** (`X.Y.Z` - e.g. `12.5.0`, `12.5.1` .etc) leave the `Use workflow from` field as `trunk` and then specify `stable` in the text input field. The workflow will automatically create a point release, with z incremented (`x.y.(z+1)`) as required.
+_If_ the previous release version was **stable** (`X.Y.Z` - e.g. `12.5.0`, `12.5.1` .etc) leave the `Use workflow from` field as `trunk` and then specify `stable` in the text input field. The workflow will automatically create a minor release, with z incremented (`x.y.(z+1)`) as required.
 
 _If_ however, the previous release was an **RC** (e.g. `X.Y.0-rc.1`) you will need to _manually_ select the _stable version's release branch_ (e.g. `12.5.0`) when creating the release. Failure to do this will cause the workflow to release the next major _stable_ version (e.g. `12.6.0`) which is not what you want.
 
 To do this, when running the Workflow, select the appropriate `release/` branch from the `Use workflow from` dropdown (e.g. `release/12.5`) and specify `stable` in the text input field.
 
-Please note you **cannot create point releases for previous stable releases once a more recent stable release has been published** as this would require significant changes to how we upload plugin versions to the WP.org plugin SVN repo). Always check the latest release version before you proceed (see [this Issue](https://github.com/WordPress/gutenberg/issues/33277#issuecomment-876289457) for more information).
+##### Creating a minor release for previous stable releases
+
+It is possible to create a minor release for any release branch even after a more recent stable release has been published. This can be done for _any_ previous release branches, allowing more flexibility in delivering updates to users. In the past, users had to wait for the next stable release, potentially taking days. Now, fixes can be swiftly shipped to any previous release branches as required.
+
+The process is identical to the one documented above when an RC is already out: choose a previous release branch, type `stable`, and click "Run workflow". The release will be published on the GitHub releases page for Gutenberg and to the WordPress core repository SVN as a `tag` under http://plugins.svn.wordpress.org/gutenberg/tags/. The SVN `trunk` directory will not be touched.
+
+**IMPORTANT:** When publishing the draft created by the ["Build Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml), make sure to leave the "Set as last release" checkbox unchecked. If it is left checked by accident, the ["Upload Gutenberg plugin to WordPress.org plugin" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) will still correctly upload it **as a tag (and will _not_ replace the `trunk` version)** to the WordPress plugin repository SVN - the workflow will perform some version arithmetic to determine how the plugin should be shipped - but you'll still need to fix the state on GitHub by setting the right release as `latest` on the [releases](https://github.com/WordPress/gutenberg/releases/) page!
 
 #### Troubleshooting
 
@@ -190,33 +366,33 @@ This is expected. The draft release will contain only the plugin zip. Only once
 
 > Do I need to publish point releases to WordPress.org?
 
-Yes. The method for this is identical to the main Plugin release process. You will need a Gutenberg Core team member to approve the release workflow.
+Yes. The method for this is identical to the main Plugin release process. You will need a member of the Gutenberg Core team the Gutenberg Release team to approve the release workflow.
 
 > The release process failed to cherry-pick version bump commit to the trunk branch.
 
 First, confirm that the step failed by checking the latest commits on `trunk` do not include the version bump commit. Then revert the version bump commit on the release branch - `git revert --no-edit {commitHash}`. Finally, push the changes and start the release process again.
 
-## Packages Releases to npm and WordPress Core Updates
+## Packages releases to NPM and WordPress Core updates
 
 The Gutenberg repository follows the [WordPress SVN repository's](https://make.wordpress.org/core/handbook/about/release-cycle/) branching strategy for every major WordPress release. In addition to that, it also contains two other special branches that control npm publishing workflows:
 
 -   The `wp/latest` branch contains the same version of packages as those published to npm with the `latest` distribution tag. The goal here is to have this branch synchronized with the last Gutenberg plugin release, and the only exception would be an unplanned [bugfix release](#standalone-bugfix-package-releases).
 -   The `wp/next` branch contains the same version of packages as those published to npm with the `next` distribution tag. It always gets synchronized with the `trunk` branch. Projects should use those packages for development or testing purposes only.
--   A Gutenberg branch `wp/*` (example `wp/6.0`) targeting a specific WordPress major release (including its further minor increments) gets created based on the `wp/latest` Gutenberg branch just after the last Gutenberg release planned for inclusion in the next major WordPress release.
+-   A Gutenberg branch `wp/X.Y` (example `wp/6.2`) targeting a specific WordPress major release (including its further minor increments) gets created based on the current Gutenberg plugin release branch `release/X.Y` (example `release/15.1`) shortly after the last release planned for inclusion in the next major WordPress release.
 
 Release types and their schedule:
 
--   [Synchronizing Gutenberg Plugin](#synchronizing-gutenberg-plugin) (`latest` dist tag) – publishing happens automatically every two weeks based on the newly created `release/*` (example `release/12.8`) branch with the RC1 version of the Gutenberg plugin.
--   [WordPress Releases](#wordpress-releases) (`patch` dist tag) – publishing gets triggered manually from the `wp/*` (example `wp/6.0`) branch. Once we reach the point in the WordPress major release cycle (usually after Beta 1) where we only cherry-pick commits from the Gutenberg repository to the WordPress core, we use `wp/*` branch (created from `wp/latest`) for npm publishing with the `patch` dist-tag. It's also possible to use older branches to backport bug or security fixes to the corresponding older versions of WordPress Core.
+-   [Synchronizing Gutenberg Plugin](#synchronizing-gutenberg-plugin) (`latest` dist tag) – publishing happens automatically every two weeks based on the newly created `release/X.Y` (example `release/12.8`) branch with the RC1 version of the Gutenberg plugin.
+-   [WordPress Releases](#wordpress-releases) (`wp-X.Y` dist tag, example `wp-6.2`) – publishing gets triggered on demand from the `wp/X.Y` (example `wp/6.2`) branch. Once we reach the point in the WordPress major release cycle (shortly before Beta 1) where we only cherry-pick commits from the Gutenberg repository to the WordPress core, we use `wp/X.Y` branch (created from `release/X.Y` branch, example `release/15.1`) for npm publishing with the `wp-X.Y` dist-tag. It's also possible to use older branches to backport bug or security fixes to the corresponding older versions of WordPress Core.
 -   [Development Releases](#development-releases) (`next` dist tag) – it is also possible to perform development releases at any time when there is a need to test the upcoming changes.
 
 There is also an option to perform [Standalone Bugfix Package Releases](#standalone-bugfix-package-releases) at will. It should be reserved only for critical bug fixes or security releases that must be published to _npm_ outside of regular cycles.
 
-### Synchronizing Gutenberg Plugin
+### Synchronizing the Gutenberg plugin
 
 For each Gutenberg plugin release, we also publish to npm an updated version of WordPress packages. This is automated with the [Release Tool](#release-tool) that handles releases for the Gutenberg plugin. A successful RC1 release triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Build Gutenberg Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
 
-We deliberately update the `wp/latest` branch within the Gutenberg repo with the content from the Gutenberg release `release/*` (example `release/12.7`) branch at the time of the Gutenberg RC1 release. This is done to ensure that the `wp/latest` branch is as close as possible to the latest version of the Gutenberg plugin. It also practically removes the chances of conflicts while backporting to `trunk` commits with updates applied during publishing to `package.json` and `CHANGELOG.md` files. In the past, we had many issues in that aspect when doing npm publishing after the regular Gutenberg release a week later. When publishing the new package versions to npm, we pick at least the `minor` version bump to account for future bugfix or security releases.
+We deliberately update the `wp/latest` branch within the Gutenberg repo with the content from the Gutenberg release `release/X.Y` (example `release/12.7`) branch at the time of the Gutenberg RC1 release. This is done to ensure that the `wp/latest` branch is as close as possible to the latest version of the Gutenberg plugin. It also practically removes the chances of conflicts while backporting to `trunk` commits with updates applied during publishing to `package.json` and `CHANGELOG.md` files. In the past, we had many issues in that aspect when doing npm publishing after the regular Gutenberg release a week later. When publishing the new package versions to npm, we pick at least the `minor` version bump to account for future bugfix or security releases.
 
 Behind the scenes, all steps are automated via `./bin/plugin/cli.js npm-latest` command. For the record, the manual process would look very close to the following steps:
 
@@ -229,13 +405,13 @@ Behind the scenes, all steps are automated via `./bin/plugin/cli.js npm-latest`
 7. Update the `CHANGELOG.md` files of the packages with the new publish version calculated and commit to the `wp/latest` branch. Assuming the package versions are written using this format `major.minor.patch`, make sure to bump at least the `minor` version bumps gets applied. For example, if the CHANGELOG of the package to be released indicates that the next unreleased version is `5.6.1`, choose `5.7.0` as a version in case of `minor` version. This is important as the patch version numbers should be reserved in case bug fixes are needed for a minor WordPress release (see below).
 8. Log-in to npm via the console: `npm login`. Note that you should have 2FA enabled.
 9. From the `wp/latest` branch, install npm dependencies with `npm ci`.
-10. Run the script `npm run publish:latest`.
+10. Run the script `npx lerna publish --no-private`.
     - When asked for the version numbers to choose for each package pick the values of the updated CHANGELOG files.
     - You'll be asked for your One-Time Password (OTP) a couple of times. This is the code from the 2FA authenticator app you use. Depending on how many packages are to be released you may be asked for more than one OTP, as they tend to expire before all packages are released.
-    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`lerna publish from-package`](https://github.com/lerna/lerna/tree/HEAD/commands/publish#bump-from-package).
+    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
 11. Finally, now that the npm packages are published, cherry-pick the commits created by lerna ("Publish" and the CHANGELOG update) into the `trunk` branch of Gutenberg.
 
-### WordPress Releases
+### WordPress releases
 
 The following workflow is needed when bug or security fixes need to be backported into WordPress Core. This can happen in a few use-cases:
 
@@ -243,21 +419,21 @@ The following workflow is needed when bug or security fixes need to be backporte
 -   For WordPress minor releases and WordPress security releases (example `5.1.1`).
 
 1. Check out the relevant WordPress major branch (If the minor release is 5.2.1, check out `wp/5.2`).
-2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it. The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
+2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it. The cherry-picking process can be automated with the [`npm run other:cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
 3. Create a Pull Request from this branch targeting the WordPress major branch used above.
 4. Merge the Pull Request using the "Rebase and Merge" button to keep the history of the commits.
 
 Now, the `wp/X.Y` branch is ready for publishing npm packages. In order to start the process, go to Gutenberg's GitHub repository's Actions tab, and locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml). Note the blue banner that says "This workflow has a `workflow_dispatch` event trigger.", and expand the "Run workflow" dropdown on its right hand side.
 
-![Run workflow dropdown for npm publishing](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/code/workflow-dispatch-npm-banner.png)
+![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-2.png)
 
-To publish packages to npm for the WordPress major release, select `wp` from the "Release type" dropdown and enter `X.Y` (example `5.2`) in the "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+To publish packages to npm for the WordPress major release, select `trunk` as the branch to run the workflow from (this means that the script used to run the workflow comes from the trunk branch, though the packages themselves will published from the release branch as long as the correct "Release type" is selected below), then select `wp` from the "Release type" dropdown and enter `X.Y` (example `5.2`) in the "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
 
 For the record, the manual process would look like the following:
 
 1. Check out the WordPress branch used before (example `wp/5.2`).
 2. `git pull`.
-3. Run the `npm run publish:patch` command (see more in [package release process]) but when asked for the version numbers to choose for each package, (assuming the package versions are written using this format `major.minor.patch`) make sure to bump only the `patch` version number. For example, if the last published package version for this WordPress branch was `5.6.0`, choose `5.6.1` as a version.
+3. Run the `npx lerna publish patch --no-private --dist-tag wp-5.2` command (see more in [package release process]) but when asked for the version numbers to choose for each package, (assuming the package versions are written using this format `major.minor.patch`) make sure to bump only the `patch` version number. For example, if the last published package version for this WordPress branch was `5.6.0`, choose `5.6.1` as a version.
 
 **Note:** For WordPress `5.0` and WordPress `5.1`, a different release process was used. This means that when choosing npm package versions targeting these two releases, you won't be able to use the next `patch` version number as it may have been already used. You should use the "metadata" modifier for these. For example, if the last published package version for this WordPress branch was `5.6.1`, choose `5.6.1+patch.1` as a version.
 
@@ -266,7 +442,7 @@ For the record, the manual process would look like the following:
 
 Now, the npm packages should be ready and a patch can be created and committed into the corresponding WordPress SVN branch.
 
-### Standalone Bugfix Package Releases
+### Standalone bugfix package releases
 
 The following workflow is needed when packages require bug fixes or security releases to be published to _npm_ outside of a regular release cycle.
 
@@ -286,7 +462,7 @@ Open a terminal and perform the following steps:
 Before porting commits check that the `wp/latest` branch does not have any outstanding packages waiting to be published:
 
 1. `git checkout wp/latest`
-2. `npm run publish:check`
+2. `npx lerna updated`
 
 Now _cherry-pick_ the commits from `trunk` to `wp/latest`, use `-m 1 commithash` if the commit was a pull request merge commit:
 
@@ -296,11 +472,11 @@ Now _cherry-pick_ the commits from `trunk` to `wp/latest`, use `-m 1 commithash`
 Whilst waiting for the GitHub actions build for `wp/latest`[branch to pass](https://github.com/WordPress/gutenberg/actions?query=branch%3Awp%2Ftrunk), identify and begin updating the `CHANGELOG.md` files:
 
 1. `git checkout wp/latest`
-2. `npm run publish:check`
+2. `npx lerna updated`
     > Example
     >
     > ```shell
-    > npm run publish:check
+    > npx lerna updated
     > @wordpress/e2e-tests
     > @wordpress/jest-preset-default
     > @wordpress/scripts
@@ -313,7 +489,7 @@ Note: You may discover the current version of each package is not up to date, if
 
 Now, the `wp/latest` branch is ready for publishing npm packages. In order to start the process, go to Gutenberg's GitHub repository's Actions tab, and locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml). Note the blue banner that says "This workflow has a `workflow_dispatch` event trigger.", and expand the "Run workflow" dropdown on its right hand side.
 
-![Run workflow dropdown for npm publishing](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/code/workflow-dispatch-npm-banner.png)
+![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-6.png)
 
 To publish packages to npm with bugfixes, select `bugfix` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
 
@@ -323,13 +499,13 @@ Behind the scenes, the rest of the process is automated with `./bin/plugin/cli.j
 2. Update the `CHANGELOG.md` files of the packages with the new publish version calculated and commit to the `wp/latest` branch.
 3. Log-in to npm via the console: `npm login`. Note that you should have 2FA enabled.
 4. From the `wp/latest` branch, install npm dependencies with `npm ci`.
-5. Run the script `npm run publish:latest`.
+5. Run the script `npx lerna publish --no-private`.
     - When asked for the version numbers to choose for each package pick the values of the updated CHANGELOG files.
     - You'll be asked for your One-Time Password (OTP) a couple of times. This is the code from the 2FA authenticator app you use. Depending on how many packages are to be released you may be asked for more than one OTP, as they tend to expire before all packages are released.
-    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`lerna publish from-package`](https://github.com/lerna/lerna/tree/HEAD/commands/publish#bump-from-package).
+    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
 6. Finally, now that the npm packages are published, cherry-pick the commits created by lerna ("Publish" and the CHANGELOG update) into the `trunk` branch of Gutenberg.
 
-### Development Releases
+### Development releases
 
 As noted in the [Synchronizing Gutenberg Plugin](#synchronizing-gutenberg-plugin) section, packages publishing happens every two weeks from the `wp/latest` branch. It's also possible to use the development release to test the upcoming changes present in the `trunk` branch at any time. We are taking advantage of [package distribution tags](https://docs.npmjs.com/cli/v7/commands/npm-dist-tag) that make it possible to consume the future version of the codebase according to npm guidelines:
 
@@ -343,12 +519,12 @@ npm install @wordpress/components@next
 
 In order to start the publishing process for development version of npm packages, go to Gutenberg's GitHub repository's Actions tab, and locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml). Note the blue banner that says "This workflow has a `workflow_dispatch` event trigger.", and expand the "Run workflow" dropdown on its right hand side.
 
-![Run workflow dropdown for npm publishing](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/code/workflow-dispatch-npm-banner.png)
+![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-4.png)
 
 To publish development packages to npm, select `development` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
 
 Behind the scenes, the release process is fully automated via `./bin/plugin/cli.js npm-next` command. It ensures
-the `wp/next` branch is synchronized with the latest release branch (`release/*`) created for the Gutenberg plugin. To avoid collisions in the versioning of packages, we always include the newest commit's `sha`, for example, `@wordpress/block-editor@5.2.10-next.645224df70.0`.
+the `wp/next` branch is synchronized with the latest release branch (`release/X.Y`) created for the Gutenberg plugin. To avoid collisions in the versioning of packages, we always include the newest commit's `sha`, for example, `@wordpress/block-editor@5.2.10-next.645224df70.0`.
 
 [plugin repository]: https://plugins.trac.wordpress.org/browser/gutenberg/
 [package release process]: https://github.com/WordPress/gutenberg/blob/HEAD/packages/README.md#releasing-packages
diff --git a/docs/contributors/code/scripts.md b/docs/contributors/code/scripts.md
index 3b36c8f4be4956..bcbbdbabc15a1e 100644
--- a/docs/contributors/code/scripts.md
+++ b/docs/contributors/code/scripts.md
@@ -2,7 +2,7 @@
 
 The editor provides several vendor and internal scripts to plugin developers. Script names, handles, and descriptions are documented in the table below.
 
-## WP Scripts
+## WordPress scripts
 
 The editor includes a number of packages to enable various pieces of functionality. Plugin developers can utilize them to create blocks, editor plugins, or generic plugins.
 
@@ -41,7 +41,7 @@ The editor includes a number of packages to enable various pieces of functionali
 | [Viewport](/packages/viewport/README.md)                                                     | wp-viewport                           | Module for responding to changes in the browser viewport size                                                                                                 |
 | [Wordcount](/packages/wordcount/README.md)                                                   | wp-wordcount                          | WordPress word count utility                                                                                                                                  |
 
-## Vendor Scripts
+## Vendor scripts
 
 The editor also uses some popular third-party packages and scripts. Plugin developers can use these scripts as well without bundling them in their code (and increasing file sizes).
 
@@ -52,9 +52,10 @@ The editor also uses some popular third-party packages and scripts. Plugin devel
 | [Moment](https://momentjs.com/)                      | moment    | Parse, validate, manipulate, and display dates and times in JavaScript                                |
 | [Lodash](https://lodash.com)                         | lodash    | Lodash is a JavaScript library which provides utility functions for common programming tasks          |
 
-## Polyfill Scripts
+## Polyfill scripts
 
 The editor also provides polyfills for certain features that may not be available in all modern browsers.
+
 It is recommended to use the main `wp-polyfill` script handle which takes care of loading all the below mentioned polyfills.
 
 | Script Name                                                               | Handle                      | Description                                                                                          |
@@ -63,17 +64,11 @@ It is recommended to use the main `wp-polyfill` script handle which takes care o
 | [Fetch Polyfill](https://www.npmjs.com/package/whatwg-fetch)              | wp-polyfill-fetch           | Polyfill that implements a subset of the standard Fetch specification                                |
 | [Promise Polyfill](https://www.npmjs.com/package/promise-polyfill)        | wp-polyfill-promise         | Lightweight ES6 Promise polyfill for the browser and node                                            |
 | [Formdata Polyfill](https://www.npmjs.com/package/formdata-polyfill)      | wp-polyfill-formdata        | Polyfill conditionally replaces the native implementation                                            |
-| [Node Contains Polyfill](https://polyfill.io)                             | wp-polyfill-node-contains   | Polyfill for Node.contains                                                                           |
+| [Node Contains Polyfill](https://www.npmjs.com/package/polyfill-library)  | wp-polyfill-node-contains   | Polyfill for Node.contains                                                                           |
 | [Element Closest Polyfill](https://www.npmjs.com/package/element-closest) | wp-polyfill-element-closest | Return the closest element matching a selector up the DOM tree                                       |
 
 ## Bundling and code sharing
 
-When using a JavaScript bundler like [webpack](https://webpack.js.org/), the scripts mentioned here
-can be excluded from the bundle and provided by WordPress in the form of script dependencies [(see
-`wp_enqueue_script`)][https://developer.wordpress.org/reference/functions/wp_enqueue_script/#default-scripts-included-and-registered-by-wordpress].
+When using a JavaScript bundler like [webpack](https://webpack.js.org/), the scripts mentioned here can be excluded from the bundle and provided by WordPress in the form of script dependencies see [`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/#default-scripts-included-and-registered-by-wordpress).
 
-The
-[`@wordpress/dependency-extraction-webpack-plugin`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/dependency-extraction-webpack-plugin)
-provides a webpack plugin to help extract WordPress dependencies from bundles. `@wordpress/scripts`
-[`build`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/scripts#build) script includes
-the plugin by default.
+The [`@wordpress/dependency-extraction-webpack-plugin`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/dependency-extraction-webpack-plugin) provides a webpack plugin to help extract WordPress dependencies from bundles. The `@wordpress/scripts` [`build`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/scripts#build) script includes the plugin by default.
diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md
index f68469f6a893f4..6afa5aed865b7d 100644
--- a/docs/contributors/code/testing-overview.md
+++ b/docs/contributors/code/testing-overview.md
@@ -17,7 +17,7 @@ When writing tests consider the following:
 -   Does the test test what we think it is testing? Or are we introducing false positives/negatives?
 -   Is it readable? Will other contributors be able to understand how our code behaves by looking at its corresponding test?
 
-## JavaScript Testing
+## JavaScript testing
 
 Tests for JavaScript use [Jest](https://jestjs.io/) as the test runner and its API for [globals](https://jestjs.io/docs/en/api.html) (`describe`, `test`, `beforeEach` and so on) [assertions](https://jestjs.io/docs/en/expect.html), [mocks](https://jestjs.io/docs/en/mock-functions.html), [spies](https://jestjs.io/docs/en/jest-object.html#jestspyonobject-methodname) and [mock functions](https://jestjs.io/docs/en/mock-function-api.html). If needed, you can also use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) for React component testing.
 
@@ -90,7 +90,7 @@ describe( 'CheckboxWithLabel', () => {
 } );
 ```
 
-### Setup and Teardown methods
+### Setup and teardown methods
 
 The Jest API includes some nifty [setup and teardown methods](https://jestjs.io/docs/en/setup-teardown.html) that allow you to perform tasks _before_ and _after_ each or all of your tests, or tests within a specific `describe` block.
 
@@ -257,11 +257,10 @@ test( 'fires onChange when a new value is typed', () => {
 **Good**: using `user-event` to simulate user events.
 
 ```javascript
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-test('fires onChange when a new value is typed', async () => {
+test( 'fires onChange when a new value is typed', async () => {
 	const user = userEvent.setup();
 
 	const spyOnChange = jest.fn();
@@ -287,10 +286,31 @@ test('fires onChange when a new value is typed', async () => {
 	await user.selectOptions( select, [ 'optionValue' ] );
 
 	// ...
-})
+} );
+```
+
+### Integration testing for block UI
+
+Integration testing is defined as a type of testing where different parts are tested as a group. In this case, the parts that we want to test are the different components that are required to be rendered for a specific block or editor logic. In the end, they are very similar to unit tests as they are run with the same command using the Jest library. The main difference is that for the integration tests the blocks are run within a [`special instance of the block editor`](https://github.com/WordPress/gutenberg/blob/trunk/test/integration/helpers/integration-test-editor.js#L60).
+
+The advantage of this approach is that the bulk of a block editor's functionality (block toolbar and inspector panel interactions, etc.) can be tested without having to fire up the full e2e test framework. This means the tests can run much faster and more reliably. It is suggested that as much of a block's UI functionality as possible is covered with integration tests, with e2e tests used for interactions that require a full browser environment, eg. file uploads, drag and drop, etc.
+
+[`The Cover block`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/test/edit.js) is an example of a block that uses this level of testing to provide coverage for a large percentage of the editor interactions.
+
+To set up a jest file for integration tests:
+
+```js
+import { initializeEditor } from 'test/integration/helpers/integration-test-editor';
+
+async function setup( attributes ) {
+	const testBlock = { name: 'core/cover', attributes };
+	return initializeEditor( testBlock );
+}
 ```
 
+The `initializeEditor` function returns the output of the `@testing-library/react` `render` method. It will also accept an array of block metadata objects, allowing you to set up the editor with multiple blocks.
 
+The integration test editor module also exports a `selectBlock` which can be used to select the block to be tested by the aria-label on the block wrapper, eg. "Block: Cover".
 
 ### Snapshot testing
 
@@ -307,10 +327,7 @@ However, if the change was intentional, follow these steps to update the snapsho
 npm run test:unit -- --updateSnapshot --testPathPattern path/to/tests
 
 # Update snapshot for e2e tests
-npm run test:e2e -- --updateSnapshot --testPathPattern path/to/e2e-tests
-
-# Update snapshot for Playwright
-npm run test:e2e:playwright -- --update-snapshots path/to/spec
+npm run test:e2e -- --update-snapshots path/to/spec
 ```
 
 1. Review the diff and ensure the changes are expected and intentional.
@@ -447,9 +464,7 @@ Similarly, the `toMatchStyleDiffSnapshot` function allows to snapshot only the d
 test( 'should render margin', () => {
 	const { container: spacer } = render( <Spacer /> );
 	const { container: spacerWithMargin } = render( <Spacer margin={ 5 } /> );
-	expect( spacerWithMargin ).toMatchStyleDiffSnapshot(
-		spacer
-	);
+	expect( spacerWithMargin ).toMatchStyleDiffSnapshot( spacer );
 } );
 ```
 
@@ -474,7 +489,7 @@ Part of the unit-tests suite is a set of Jest tests run exercise native-mobile c
 To locally run the tests in debug mode, follow these steps:
 
 0. Make sure you have ran `npm ci` to install all the packages
-1. Run `npm run native test:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
+1. Run `npm run test:native:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
 2. Open `chrome://inspect` in Chrome
 3. Under the "Remote Target" section, look for a `../../node_modules/.bin/jest` target and click on the "inspect" link. That will open a new window with the Chrome DevTools debugger attached to the process and stopped at the beginning of the `jest.js` file. Alternatively, if the targets are not visible, click on the `Open dedicated DevTools for Node` link in the same page.
 4. You can place breakpoints or `debugger;` statements throughout the code, including the tests code, to stop and inspect
@@ -489,11 +504,11 @@ Contributors to Gutenberg will note that PRs include continuous integration E2E
 
 There is an ongoing effort to add integration tests to the native mobile project using the [`react-native-testing-library`](https://testing-library.com/docs/react-native-testing-library/intro/) library. A guide to writing integration tests can be found [here](/docs/contributors/code/react-native/integration-test-guide.md).
 
-## End-to-end Testing
+## End-to-end testing
 
-End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
+Most existing End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
 
-> There's a ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. See the [README](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/README.md) of the new E2E tests for the updated guideline and best practices.
+There's an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. **It's recommended to write new e2e tests in Playwright whenever possible**. The sections below mostly apply to the old Jest + Puppeteer framework. See the dedicated [guide](/docs/contributors/code/e2e/README.md) if you're writing tests with Playwright.
 
 ### Using wp-env
 
@@ -541,7 +556,7 @@ Then to run the tests, specify the base URL, username, and passwords for your si
 WP_BASE_URL=http://wp.test npm run test:e2e -- --wordpress-username=admin --wordpress-password=password
 ```
 
-### Scenario Testing
+### Scenario testing
 
 If you find that end-to-end tests pass when run locally, but fail in GitHub Actions, you may be able to isolate a CPU- or network-bound race condition by simulating a slow CPU or network:
 
@@ -569,15 +584,15 @@ OFFLINE=true npm run test:e2e
 
 See [Chrome docs: emulateNetworkConditions](https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions)
 
-### Core Block Testing
+### Core block testing
 
 Every core block is required to have at least one set of fixture files for its main save function and one for each deprecation. These fixtures test the parsing and serialization of the block. See [the integration tests fixtures readme](https://github.com/wordpress/gutenberg/blob/HEAD/test/integration/fixtures/blocks/README.md) for more information and instructions.
 
-### Flaky Tests
+### Flaky tests
 
-A test is considered to be **flaky** when it can pass and fail across multiple retry attempts without any code changes. We auto retry failed tests at most **twice** on CI to detect and report them to GitHub issues automatically under the [`[Type] Flaky Test`](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22%5BType%5D+Flaky+Test%22) label via [`report-flaky-tests`](https://github.com/WordPress/gutenberg/blob/trunk/.github/report-flaky-tests/index.js) GitHub action. Note that a test that failed three times in a row is not counted as a flaky test and will not be reported to an issue.
+A test is considered to be **flaky** when it can pass and fail across multiple retry attempts without any code changes. We auto retry failed tests at most **twice** on CI to detect and report them to GitHub issues automatically under the [`[Type] Flaky Test`](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22%5BType%5D+Flaky+Test%22) label via [`report-flaky-tests`](https://github.com/WordPress/gutenberg/tree/trunk/packages/report-flaky-tests) GitHub action. Note that a test that failed three times in a row is not counted as a flaky test and will not be reported to an issue.
 
-## PHP Testing
+## PHP testing
 
 Tests for PHP use [PHPUnit](https://phpunit.de/) as the testing framework. If you're using the built-in [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment), you can run the PHP tests locally using this command:
 
@@ -602,9 +617,9 @@ To run unit tests only, without the linter, use `npm run test:unit:php` instead.
 [snapshot testing]: https://jestjs.io/docs/en/snapshot-testing.html
 [update snapshots]: https://jestjs.io/docs/en/snapshot-testing.html#updating-snapshots
 
-## Performance Testing
+## Performance testing
 
-To ensure that the editor stays performant as we add features, we monitor the impact pull requests and releases can have on some key metrics:
+To ensure that the editor stays performant as we add features, we monitor the impact pull requests and releases can have on some key metrics including:
 
 -   The time it takes to load the editor.
 -   The time it takes for the browser to respond when typing.
@@ -617,7 +632,6 @@ To set up the e2e testing environment, checkout the Gutenberg repository and swi
 ```
 nvm use && npm install
 npm run build:packages
-npm run wp-env start
 ```
 
 To run the tests run the following command:
diff --git a/docs/contributors/code/workflow-dispatch-npm-banner.png b/docs/contributors/code/workflow-dispatch-npm-banner.png
deleted file mode 100644
index 8c552ede815acd..00000000000000
Binary files a/docs/contributors/code/workflow-dispatch-npm-banner.png and /dev/null differ
diff --git a/docs/contributors/code/workflow-dispatch-plugin-banner.png b/docs/contributors/code/workflow-dispatch-plugin-banner.png
deleted file mode 100644
index d05c88d753f2f8..00000000000000
Binary files a/docs/contributors/code/workflow-dispatch-plugin-banner.png and /dev/null differ
diff --git a/docs/contributors/design/README.md b/docs/contributors/design/README.md
index acf1b6cc9b2342..abc077b8fdc072 100644
--- a/docs/contributors/design/README.md
+++ b/docs/contributors/design/README.md
@@ -8,7 +8,7 @@ The [Make WordPress Design blog](https://make.wordpress.org/design/) is the prim
 
 Real-time discussions for design take place in the `#design` channel in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). Weekly meetings for the Design team are on Wednesdays at 19:00UTC.
 
-## How Can Designers Contribute?
+## How can designers contribute?
 
 The Gutenberg project uses GitHub for managing code and tracking issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg).
 
@@ -20,7 +20,9 @@ The [WordPress Design team](http://make.wordpress.org/design/) uses [Figma](http
 
 This section outlines the design principles and patterns of the editor interface—to explain the background of the design, inform future improvements, and help people design great blocks.
 
-![Gutenberg Logo](https://cldup.com/J2MgjuShPv-3000x3000.png)
+<img width="200" src="https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/assets/gutenberg-logo-black.svg" alt="Gutenberg Logo" />
+
+The Gutenberg logo was made by [Cristel Rossignol](https://twitter.com/cristelrossi), and is released under the GPL license. [Download the SVG logo](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/contributors/assets/gutenberg-logo-black.svg).
 
 ### Goal of Gutenberg
 
@@ -57,26 +59,3 @@ Gutenberg wants to make it easier to author rich content. This means ensuring go
 **Direct manipulation is intuitive.** The block interface allows users to manipulate content directly on the page. Plugin and theme authors will support and extend this experience by building their own custom blocks.
 
 **Code editing shouldn't be necessary for customization.** Customizing traditionally required complicated markup, and complicated markup is easy to break. With Gutenberg, customizing becomes more intuitive — and safer. A developer will be able to provide custom blocks that directly render portions of a layout (a three column grid of features, for instance) and clearly specify what can be directly edited by the user. That means the user can update text, swap images, reduce the number of columns, without having to ask a developer, or worrying about breaking things.
-
-### Future Opportunities
-
-The initial phase of Gutenberg as described in the kickoff goal is primarily limited to the content area (specifically `post_content`) of posts and pages. Within those confines, we are embracing the web as a vertical river of content by appending blocks sequentially, then adding layout options to each block.
-
-That said, there isn’t any fixed limit to the kind of layouts Gutenberg will be able to create. It’s very possible for Gutenberg to grow beyond the confines of post and page content, to include the whole page — one could think of a theme template as a comma-separated list of blocks, like this:
-
-```js
-{
-	'theme/header',
-	'theme/sidebar',
-	'core/content' {
-		'core/cover-image',
-		'theme/author-card',
-		'core/text',
-	},
-	'theme/footer',
-}
-```
-
-Every block nested inside the content block would be _rearrangeable_. Every block would be _editable_. Every block would use the same API, and both the editor and the theme would load the same `style.css` file directly. In the end, both the editor/page builder and theme/front-end would appear near-identical, allowing for a true WYSIWYG experience.
-
-This concept is speculative, but it’s one direction Gutenberg could go in the future.
diff --git a/docs/contributors/design/reference.md b/docs/contributors/design/reference.md
deleted file mode 100644
index 13cec883926a31..00000000000000
--- a/docs/contributors/design/reference.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Reference
-
--   [Glossary](/docs/explanations/glossary.md)
--   [Coding Guidelines](/docs/contributors/code/coding-guidelines.md)
--   [Testing Overview](/docs/contributors/code/testing-overview.md)
--   [Frequently Asked Questions](/docs/explanations/faq.md)
-
-## Logo
-
-<img width="200" src="https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/final-g-wapuu-black.svg?sanitize=true" alt="Gutenberg Logo" />
-
-Released under GPL license, made by [Cristel Rossignol](https://twitter.com/cristelrossi).
-
-[Download the SVG logo](https://github.com/WordPress/gutenberg/blob/HEAD/docs/final-g-wapuu-black.svg).
-
-## Mockups
-
-Mockup Sketch files are available in [the User Interface section](/docs/explanations/user-interface/design-resources.md).
diff --git a/docs/contributors/design/the-block.md b/docs/contributors/design/the-block.md
index f35e17d0195928..463d3eb9b9e1a0 100644
--- a/docs/contributors/design/the-block.md
+++ b/docs/contributors/design/the-block.md
@@ -11,7 +11,7 @@ So, for example, a user can add an image, write its caption, change its width an
 -   Users only need to learn one interface — the block — to add and edit everything on their site. Users shouldn’t have to write shortcodes, custom HTML, or understand hidden mechanisms to embed content.
 -   Gutenberg makes core features more discoverable, reducing hard-to-find “Mystery meat.” WordPress supports a large number of blocks and 30+ embeds. Let’s increase their visibility.
 
-## Building Blocks
+## Building blocks
 
 What does this mean for designers and developers? The block structure plus the principle of direct manipulation mean thinking differently about how to design and develop WordPress components. Let’s take another look at the architecture of a block:
 
diff --git a/docs/contributors/documentation/README.md b/docs/contributors/documentation/README.md
index f06abf9d0de7c4..ec8013cd99a21c 100644
--- a/docs/contributors/documentation/README.md
+++ b/docs/contributors/documentation/README.md
@@ -4,7 +4,7 @@ A guide on how to get started contributing documentation to the Gutenberg projec
 
 ## Discussions
 
-The [Make WordPress Docs blog](https://make.wordpress.org/docs/) is the primary spot for the latest information around WordPress documentation: including announcements, product goals, meeting notes, meeting agendas, and more.
+The [Make WordPress Docs blog](https://make.wordpress.org/docs/) is the primary spot for the latest information around WordPress documentation, including announcements, product goals, meeting notes, meeting agendas, and more.
 
 Real-time discussions for documentation take place in the `#docs` channel in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). Weekly meetings for the Documentation team are on Tuesdays at 14:00UTC.
 
@@ -14,7 +14,7 @@ The Gutenberg project uses GitHub for managing code and tracking issues. The mai
 
 There are two major sets of documentation for the Gutenberg project:
 
-1. [User documentation](https://wordpress.org/support/article/wordpress-editor/) is information on how to use the Editor as an author publishing posts. For contributing to user docs, follow the docs blog, or ask in the #docs Slack channel, to understand the current priorities.
+1. [User documentation](https://wordpress.org/documentation/article/wordpress-block-editor/) is information on how to use the Editor as an author publishing posts. For contributing to user docs, follow the docs blog or ask in the #docs Slack channel to understand the current priorities.
 2. [Block editor handbook](https://developer.wordpress.org/block-editor/) is everything related to the Gutenberg project including: developing, extending, and—what you are reading right now—contributing specific to Gutenberg.
 
 The rest of this document covers contributing to the block editor handbook.
@@ -25,48 +25,48 @@ The block editor handbook is a mix of markdown files in the `/docs/` directory o
 
 An automated job publishes the docs every 15 minutes to the [block editor handbook site](https://developer.wordpress.org/block-editor/).
 
-See [the Git Workflow](/docs/contributors/code/git-workflow.md) documentation for how to use git to deploy changes using pull requests. Additionally, see the [video walk-through](https://wordpress.tv/2020/09/02/marcus-kazmierczak-contribute-developer-documentation-to-gutenberg/) and the accompanying [slides for contributing documentation to Gutenberg](https://mkaz.blog/wordpress/contribute-documentation-to-gutenberg/).
+See [the Git Workflow](/docs/contributors/code/git-workflow.md) documentation for how to use git to deploy changes using pull requests. Additionally, see the [video walk-through](https://wordpress.tv/2020/09/02/marcus-kazmierczak-contribute-developer-documentation-to-gutenberg/) and the accompanying [slides for contributing documentation to Gutenberg](https://mkaz.blog/wordpress/contribute-developer-documentation-to-gutenberg/).
 
 ### Handbook structure
 
-The handbook is organized into four sections based on the functional types of documents. [The Documentation System](https://documentation.divio.com/) does a great job explaining the needs and functions of each type, but in short they are:
+The handbook is organized into four sections based on the functional types of documents. [The Documentation System](https://documentation.divio.com/) does a great job explaining the needs and functions of each type, but in short, they are:
 
--   **Getting started tutorials** - full lessons that take learners step by step to complete an objective, for example the [create a block tutorial](/docs/getting-started/create-block/README.md).
--   **How to guides** - short lessons specific to completing a small specific task, for example [how to add a button to the block toolbar](/docshow-to-guides/format-api/README.md).
+-   **Getting started tutorials** - full lessons that take learners step by step to complete an objective, for example the [create a block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md).
+-   **How-to guides** - short lessons specific to completing a small specific task, for example [how to add a button to the block toolbar](/docs/how-to-guides/format-api.md).
 -   **Reference guides** - API documentation, purely functional descriptions,
 -   **Explanations** - longer documentation focused on learning, not a specific task.
 
 ### Templates
 
-A [how to guide template](https://raw.githubusercontent.com/WordPress/gutenberg/trunk/docs/contributors/documentation/how-to-guide-template.md) is available to provide a common structure to guides. If starting a new how to guide, copy the markdown from the template to get started.
+A [how-to guide template](https://raw.githubusercontent.com/WordPress/gutenberg/trunk/docs/contributors/documentation/how-to-guide-template.md) is available to provide a common structure to guides. If starting a new how-to guide, copy the markdown from the template to get started.
 
-The template is based on examples from The Good Docs Project, see their [template repository for additional examples](https://github.com/thegooddocsproject/templates) to help you create quality documentation.
+The template is based on examples from The Good Docs Project. See their [template repository](https://github.com/thegooddocsproject/templates) for additional examples to help you create quality documentation.
 
 ### Update a document
 
 To update an existing page:
 
-1. Check out the gutenberg repository.
+1. Check out the Gutenberg repository.
 2. Create a branch to work, for example `docs/update-contrib-guide`.
 3. Make the necessary changes to the existing document.
 4. Commit your changes.
-5. Create a pull request using "\[Type\] Documentation" label.
+5. Create a pull request using the [\[Type\] Developer Documentation](https://github.com/WordPress/gutenberg/labels/%5BType%5D%20Developer%20Documentation) label.
 
 ### Create a new document
 
 To add a new document requires a working JavaScript development environment to build the documentation, see the [JavaScript build setup documentation](/docs/how-to-guides/javascript/js-build-setup.md):
 
 1. Create a Markdown file in the [docs](https://github.com/WordPress/gutenberg/tree/HEAD/docs) folder, use lower-case, no spaces, if needed a dash separator, and `.md` extension.
-2. Add content, all documents require one and only H1 tag, using markdown notation.
-3. Add document entry to the [toc.json](https://github.com/WordPress/gutenberg/blob/HEAD/docs/toc.json) hierarchy, see existing entries for format.
+2. Add content using markdown notation. All documents require one and only `h1` tag.
+3. Add document entry to the [toc.json](https://github.com/WordPress/gutenberg/blob/HEAD/docs/toc.json) hierarchy. See existing entries for format.
 4. Run `npm run docs:build` to update `manifest.json`.
 5. Commit `manifest.json` with other files updated.
 
-If you forget to run, `npm run docs:build` your PR will fail the static analysis check, since the `manifest.json` file is an uncommitted local change that must be committed.
+If you forget to run, `npm run docs:build` your PR will fail the static analysis check since the `manifest.json` file is an uncommitted local change that must be committed.
 
-### Documenting Packages
+### Documenting packages
 
-Package documentation is generated automatically by the documentation tool by pulling the contents of the README.md file located in the root of the package. Sometimes however, it is preferable to split the contents of the README out into smaller, easier to read portions.
+Package documentation is generated automatically by the documentation tool by pulling the contents of the README.md file located in the root of the package. Sometimes, however, it is preferable to split the contents of the README into smaller, easier-to-read portions.
 
 This can be accomplished by creating a `docs` directory in the package and adding `toc.json` file that contains references other markdown files also contained in the `docs` directory. The `toc.json` file should contain an array of pages to be added as sub-pages of the main README file. The formatting follows the [`manifest.json`](https://github.com/WordPress/gutenberg/blob/HEAD/docs/manifest.json) file that is generated automatically.
 
@@ -85,7 +85,7 @@ In order for these pages to be nested under the main package name, be sure to se
 
 ### Using links
 
-It's likely at some point you'll want to link to other internal documentation pages. It's worth emphasizing all documents can be browsed in different contexts:
+It's likely at some point, you'll want to link to other internal documentation pages. It's worth emphasizing all documents can be browsed in different contexts:
 
 -   Block editor handbook
 -   GitHub website
@@ -97,17 +97,21 @@ To create links that work in all contexts, you must use absolute path links with
 -   `/packages/*/README.md`
 -   `/packages/components/src/**/README.md`
 
-This way they will be properly handled in all three aforementioned contexts.
+This way, they will be properly handled in all three aforementioned contexts.
 
-Use the full directory and filename from the Gutenberg repository, not the published path; the Block Editor Handbook creates short URLs—you can see this in the tutorials section. Likewise, the `readme.md` portion is dropped in the handbook, but should be included in links.
+Use the full directory and filename from the Gutenberg repository, not the published path; the Block Editor Handbook creates short URLs—you can see this in the tutorials section. Likewise, the `readme.md` portion is dropped in the handbook but should be included in the links.
 
 An example, the link to this page is: `/docs/contributors/documentation/README.md`
 
+<div class="callout callout-warning">
+<b>Note:</b> The usual link transformation is not applied to links in callouts. See below. 
+</div>
+
 ### Code examples
 
 The code example in markdown should be wrapped in three tick marks \`\`\` and should additionally include a language specifier. See this [GitHub documentation around fenced code blocks](https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks).
 
-A unique feature to the Gutenberg documentation is the `codetabs` toggle, this allows two versions of code to be shown at once. This is used for showing both `JSX` and `Plain` code samples. For example, [on this block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
+A unique feature to the Gutenberg documentation is the `codetabs` toggle, this allows two versions of code to be shown at once. This is used for showing both `JSX` and `Plain` code samples.
 
 Here is an example `codetabs` section:
 
@@ -124,7 +128,7 @@ Here is an example `codetabs` section:
     \{\% end \%\}
 ````
 
-The preferred format for code examples is JSX, this should be the default view. The example placed first in source will be shown as the default.
+The preferred format for code examples is JSX. This should be the default view. The example placed first in source will be shown as the default.
 
 **Note:** It is not required to include plain JavaScript code examples for every guide. The recommendation is to include plain code for beginner tutorials or short examples, but the majority of code in Gutenberg packages and across the larger React and JavaScript ecosystem are in JSX that requires a build process.
 
@@ -156,6 +160,14 @@ This is an **alert** callout.
 This is a **warning** callout.
 </div>
 
+<div class="callout callout-warning">
+Note: In callout notices, links also need to be HTML `&lt;a href>&lt;/a>` notations. 
+The usual link transformation is not applied to links in callouts.
+For instance, to reach the Getting started > Create Block page, the URL in GitHub is
+https://developer.wordpress.org/docs/getting-started/devenv/get-started-with-create-block.md
+and will have to be hardcoded for the endpoint in the Block Editor Handbook as 
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">https://developer.wordpress.org/block-editor/getting-started/create-block/</a> to link correctly in the handbook. 
+</div>
 ### Editor config
 
 You should configure your editor to use Prettier to auto-format markdown documents. See the [Getting Started documentation](/docs/contributors/code/getting-started-with-code-contribution.md) for complete details.
@@ -169,12 +181,32 @@ An example config for using Visual Studio Code and the Prettier extensions:
 },
 ```
 
- <div class="callout callout-info">
- Note: depending on where you are viewing this document, the brackets may show as double, the proper format is just a single bracket.
+<div class="callout callout-info">
+Depending on where you are viewing this document, the brackets may show as double. The proper format is just a single bracket.
+</div>
+
+### Video embeds
+
+Videos in the Block Editor Handbook need to be hosted on the [WordPress YouTube channel](https://www.youtube.com/@WordPress) as unlisted videos. This process requires additional permissions. Reach out in the #marketing Slack channel for assistance.
+
+Once the video has been uploaded to YouTube, retrieve the video embed link. It should look something like this: 
+
+```
+https://www.youtube.com/embed/nrut8SfXA44?si=YxvmHmAoYx-BDCog
+```
+
+Then, place the following code where you want the video to be embedded in the documentation. Update the embed link and video title accordingly.
+
+```html
+<iframe width="960" height="540" src="[Video embed link]" title="[Video title]" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
+```
+
+<div class="callout callout-info">
+Videos should have an aspect ratio of <code>16:9</code> and be filmed at the highest resolution possible.
 </div>
 
 ## Resources
 
--   [Copy Guidelines](/docs/contributors/documentation/copy-guide.md) for writing instructions, documentations, or other contributions to Gutenberg project.
+-   [Copy Guidelines](/docs/contributors/documentation/copy-guide.md) for writing instructions, documentation, or other contributions to the Gutenberg project.
 
 -   [Tone and Voice Guide](https://make.wordpress.org/docs/handbook/documentation-team-handbook/tone-and-voice-guide/) from WordPress Documentation.
diff --git a/docs/contributors/folder-structure.md b/docs/contributors/folder-structure.md
index 9cee302794cdab..e20ba81708a064 100644
--- a/docs/contributors/folder-structure.md
+++ b/docs/contributors/folder-structure.md
@@ -7,7 +7,6 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── README.md
     ├── SECURITY.md
     ├── CONTRIBUTING.md
-    ├── CODE_OF_CONDUCT.md
     │
     ├── .editorconfig
     ├── .eslintignore
@@ -76,9 +75,19 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── docs/*.md
     │   Set of documentation pages composing the [Block editor handbook](https://developer.wordpress.org/block-editor/).
     │
+    ├── platform-docs
+    │   Documentation website targeted to non WordPress developers 
+    │   using Gutenberg in their own applications. 
+    │   Deployed on [https://wordpress.org/gutenberg-framework/](https://wordpress.org/gutenberg-framework/).
+    │
+    │
     ├── lib
     │   PHP Source code of the Gutenberg plugin.
     │
+    ├── lib/compact/wordpress-x.x
+    │   PHP code that was include in WordPress ont the WordPrexx X.X version.
+    │   It is kept to ensure plugin compatibility with older WordPress versions.
+    │
     ├── packages
     │   Source code of the WordPress packages.
     │   Packages can be:
@@ -108,10 +117,6 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── packages/{packageName}/src/**/{ComponentName}/stories/*.js
     │   Component Stories to load on the Gutenberg storybook.
     │
-    ├── packages/e2e-tests
-    │   End-2-end tests of the Gutenberg plugin.
-    │   Distributed as a package for potential reuse in Core and other plugins.
-    │
     ├── phpunit
     │   Unit tests for the PHP code of the Gutenberg plugin.
     │
@@ -124,11 +129,17 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── test/native
     │   Configuration for the Gutenberg Mobile unit tests.
     │
-    └── test/unit
+    ├── test/unit
     │   Configuration for the Packages unit tests.
     │
-    └── tools/eslint
+    ├── test/e2e
+    │   End-2-end tests of the Gutenberg plugin.
+    │
+    ├── test/performance
+    │   Performance metrics. Results are tracked on the [Gutenberg performance dashboard](https://codevitals.run/project/gutenberg).
+    │
+    ├── tools/eslint
     │   Configuration files for the ESLint linter.
     │
-    └── tools/webpack
+    ├── tools/webpack
     │   Configuration files for the webpack build.
diff --git a/docs/contributors/localizing.md b/docs/contributors/localizing.md
index 1745569f68f324..8b434e32d1ce8d 100644
--- a/docs/contributors/localizing.md
+++ b/docs/contributors/localizing.md
@@ -1,6 +1,6 @@
-# Localizing Gutenberg Plugin
+# Localizing Gutenberg
 
-The Gutenberg plugin is translated via the general plugin translation system (GlotPress) at https://translate.wordpress.org. Review the [GlotPress translation process documentation] (https://make.wordpress.org/polyglots/handbook/tools/glotpress-translate-wordpress-org/) for additional information.
+The Gutenberg plugin is translated via the general plugin translation system (GlotPress) at https://translate.wordpress.org. Review the [GlotPress translation process documentation](https://make.wordpress.org/polyglots/handbook/tools/glotpress-translate-wordpress-org/) for additional information.
 
 To translate Gutenberg in your locale or language, [select your locale here](https://translate.wordpress.org/projects/wp-plugins/gutenberg) and translate *Development* (which contains the plugin's string) and/or *Development Readme* (please translate what you see in the Details tab of the [plugin page](https://wordpress.org/plugins/gutenberg/)).
 
diff --git a/docs/contributors/release-screenshot.png b/docs/contributors/release-screenshot.png
deleted file mode 100644
index 63334f489c0b2c..00000000000000
Binary files a/docs/contributors/release-screenshot.png and /dev/null differ
diff --git a/docs/contributors/repository-management.md b/docs/contributors/repository-management.md
index 9bce2d06fd1566..5bb971bfaf2efc 100644
--- a/docs/contributors/repository-management.md
+++ b/docs/contributors/repository-management.md
@@ -55,7 +55,7 @@ Here are some milestones you might see:
 -   [X.Y (Gutenberg)](https://github.com/WordPress/gutenberg/milestone/85): PRs targeted for the Gutenberg Plugin X.Y release.
 -   [Future](https://github.com/WordPress/gutenberg/milestone/35): this is something that is confirmed by everyone as a good thing but doesn’t fall into other criteria.
 
-### Triaging Issues
+### Triaging issues
 
 To keep the issue list healthy, it needs to be triaged regularly. _Triage_ is the practice of reviewing existing issues to make sure they’re relevant, actionable, and have all the information they need.
 
@@ -63,7 +63,7 @@ Anyone can help triage, although you’ll need contributor permission on the Gut
 
 See the [Triage Contributors guide](/docs/contributors/triage.md) for details.
 
-## Pull Requests
+## Pull requests
 
 Gutenberg follows a feature branch pull request workflow for all code and documentation changes. At a high-level, the process looks like this:
 
@@ -86,7 +86,7 @@ Along with this process, there are a few important points to mention:
 -   To make it far easier to merge your code, each pull request should only contain one conceptual change. Keeping contributions atomic keeps the pull request discussion focused on one topic and makes it possible to approve changes on a case-by-case basis.
 -   Separate pull requests can address different items or todos from their linked issue, there’s no need for a single pull request to cover a single issue if the issue is non-trivial.
 
-### Code Review
+### Code review
 
 Every pull request goes through a manual code review, in addition to automated tests. The objectives for the code review are best thought of as:
 
@@ -106,7 +106,7 @@ If you are not yet comfortable leaving a full review, try commenting on a PR. Qu
 
 If you struggle with getting a review, see: [How To Get Your Pull Request Reviewed?](/docs/contributors/code/how-to-get-your-pull-request-reviewed.md)
 
-### Design Review
+### Design review
 
 If your pull request impacts the design/UI, you need to label appropriately to alert design. To request a design review, add the [Needs Design Feedback](https://github.com/WordPress/gutenberg/labels/Needs%20Design%20Feedback) label to your PR. If there are any PRs that require an update to the design/UI, please use the [Figma Library Update](https://github.com/WordPress/gutenberg/labels/Figma%20Library%20Update) label.
 
@@ -116,7 +116,7 @@ As a guide, changes that should be reviewed:
 -   Anything that changes something visually.
 -   If you just want design feedback on an idea or exploration.
 
-### Merging Pull Requests
+### Merging pull requests
 
 A pull request can generally be merged once it is:
 
@@ -134,7 +134,7 @@ All members of the WordPress organization on GitHub have the ability to review a
 
 Most pull requests will be automatically assigned a release milestone, but please make sure your merged pull request was assigned one. Doing so creates the historical legacy of what code landed when, and makes it possible for all project contributors (even non-technical ones) to access this information.
 
-### Closing Pull Requests
+### Closing pull requests
 
 Sometimes, a pull request may not be mergeable, no matter how much additional effort is applied to it (e.g. out of scope). In these cases, it’s best to communicate with the contributor graciously while describing why the pull request was closed, this encourages productive future involvement.
 
@@ -165,9 +165,3 @@ If you meet this criterion of several meaningful contributions having been accep
 ## Projects
 
 We use [GitHub projects](https://github.com/WordPress/gutenberg/projects) to keep track of details that aren't immediately actionable, but that we want to keep around for future reference.
-
-Some key projects include:
-
--   [Phase 2](https://github.com/WordPress/gutenberg/projects/13) - Development tasks needed for Phase 2 of Gutenberg.
--   [Phase 2 design](https://github.com/WordPress/gutenberg/projects/21) - Tasks for design in Phase 2. Note: specific projects may have their own boards.
--   [Ideas](https://github.com/WordPress/gutenberg/projects/8) - Project containing tickets that, while closed for the time being, can be revisited in the future.
diff --git a/docs/contributors/roadmap.md b/docs/contributors/roadmap.md
deleted file mode 100644
index ae7aa5ea797731..00000000000000
--- a/docs/contributors/roadmap.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Upcoming Projects & Roadmap
-
-_Complementary to [Phase 2 Scope](https://github.com/WordPress/gutenberg/issues/13113)._
-
-This document outlines some of the features currently in development or being considered for the project. It should not be confused with the product roadmap for WordPress itself, even if some areas naturally overlap. The main purpose of it is to give visibility to some of the key problems remaining to be solved and as an invitation for those wanting to collaborate on some of the more complex issues to learn about what needs help.
-
-Gutenberg is already in use by millions of sites through WordPress, so in order to make substantial changes to the design or updating specifications it is advisable to consider a discussion process ("Request for Comments") showing both an understanding of the impact, both positives and negatives, trade offs and opportunities.
-
-## Projects
-
--   **Block Registry** — define an entry point for block identification. ([See active RFC](https://github.com/WordPress/gutenberg/pull/13693).)
--   **Live Component Library** — a place to visualize and interact with the UI components and block tools included in the packages.
--   **Modular Editor** — allow loading the block editor in several contexts without a dependency to a post object. (Ongoing [pending tasks](https://github.com/WordPress/gutenberg/issues/14043).)
--   **Better Validation** — continue to refine the mechanisms used in validating editor content. (See in depth overview at [#11440](https://github.com/WordPress/gutenberg/issues/11440) and [#7604](https://github.com/WordPress/gutenberg/issues/7604).)
--   **Block Areas** — build support for areas of blocks that fall outside the content (including relationship with templates, registration, storage, and so on). ([See overview](https://github.com/WordPress/gutenberg/issues/13489).)
--   **Multi-Block Editing** — allow modifying attributes of multiple blocks of the same kind at once.
--   **Rich Text Roadmap** — continue to develop the capabilities of the rich text package. ([See overview](https://github.com/WordPress/gutenberg/issues/13778).)
--   **Common Block Functionality** — coalesce into a preferred mechanism for creating and sharing chunks of functionality (block alignment, color tools, etc) across blocks with a simple and intuitive code interface. (Suggested exploration: React Hooks, [see overview](https://github.com/WordPress/gutenberg/issues/15450).)
--   **Responsive Images** — propose mechanisms for handling flexible image sources that can be optimized for loading and takes into account their placement on a page (within main content, a column, sidebar, etc).
--   **Async Loading** — propose a strategy for loading block code only when necessary in the editor without overhead for the developer or disrupting the user experience.
--   **Styles** — continue to develop the mechanisms for managing block styles and other styling solutions. (See overview at [#7551](https://github.com/WordPress/gutenberg/issues/7551) and [#9534](https://github.com/WordPress/gutenberg/issues/9534).)
--   **Bundling Front-end Assets** — explore ways in which front-end styles for blocks could be assembled based on which blocks are used in a given page response. ([See overview](https://github.com/WordPress/gutenberg/issues/5445).)
--   **Transforms API** — improve the transform API to allow advanced use-cases: support for async-transforms, access to the block editor settings and bring consistency between the different types of transforms. ([See related issue](https://github.com/WordPress/gutenberg/issues/14755).)
-
-## Timeline
-
-The projects outlined above indicate areas of interest but not necessarily development priorities. Sometimes, a product need will accelerate a resolution (as is the case of the block registry), other times community interest might be the driving force.
-
--   2019 Q1: Block Registry — First phase. Required for plugin directory "meta" project.
--   2019 Q2: Modular Editor — Requirement for most of phase 2.
--   2019 Q3: Block Areas.
diff --git a/docs/contributors/triage.md b/docs/contributors/triage.md
index c44dc0a4b8843b..33275b8d3df014 100644
--- a/docs/contributors/triage.md
+++ b/docs/contributors/triage.md
@@ -1,8 +1,10 @@
-### Get involved in triage
+# Triage
 
-To keep the repository healthy, it needs to be triaged regularly. Triage is the practice of reviewing existing issues and pull requests to make sure they’re relevant, actionable, and have all the information they need. Anyone can help triage, although you’ll need to be a member of the triage team for the Gutenberg repository to modify an issue’s labels or edit its title.
+To keep the repository healthy, it needs to be triaged regularly. **Triage is the practice of reviewing existing issues and pull requests to make sure they’re relevant, actionable, and have all the information they need**. Anyone can help triage, although you’ll need to be a member of the triage team for the Gutenberg repository to modify an issue’s labels or edit its title.
 
-### Join the triage team
+> Besides this page, the [How to do triage on GitHub](https://learn.wordpress.org/tutorial/how-to-do-triage-on-github/) tutorial is another great resource to get introduced to triage
+
+## Join the triage team
 
 The triage team is an open group of people with a particular role of making sure triage is done consistently across the Gutenberg repo. There are various types of triage which happen:
 
@@ -18,35 +20,35 @@ These are the expectations of being a triage team member:
 
 If you would like to join this team, simply ask in #core-editor [Slack](https://make.wordpress.org/chat/) at any time.
 
-### Getting started
+## Triage your first issues
 
 To start simply choose from one of these filtered lists below. Note: You can find most of these filters by selecting the “Sort” option from the [overall Issues page](https://github.com/wordpress/gutenberg/issues).
 
--   All Gutenberg issues [without an assigned label](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+no%3Alabel+sort%3Aupdated-asc). Triaging by simply adding labels helps people focused on certain aspects of Gutenberg find relevant issues easier and start working on them.
--   All Gutenberg pull requests [without an assigned label](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+no%3Alabel). This requires a level of comfortability with code. For more guidance on which labels are best to use, please [review this section on labeling pull requests](/docs/contributors/repository-management.md#pull-requests) for contributors. You can also always check with the person authoring the pull request to make sure the labels match what they are intending to do.
--   [The least recently updated](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+sort%3Aupdated-asc) Gutenberg issues. Triaging issues that are getting old and possibly out of date keeps important work from being overlooked.
--   All Gutenberg issues [with no comments](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+comments%3A0+). Triaging this list helps make sure all issues are acknowledged, and can help identify issues that may need more information or discussion before they are actionable.
--   [The least commented](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Acomments-asc) on Gutenberg issues. Triaging this list helps the community figure out what things might still need traction for certain proposals.
--   [The most commented](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Acomments-desc) on Gutenberg issues. If you feel comfortable chiming in and the conversation has stagnated, the best way to triage these kinds of issues is to summarize the discussion thus far and do your best to identify action items, blockers, etc. Triaging this list allows finding solutions to important and complex issues to move forward.
--   You can also create your own custom set of filters on GitHub. If you have a filter you think might be useful for the community, feel free to submit a PR to add it to this list.
+-   **All Gutenberg issues [without an assigned label](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+no%3Alabel+sort%3Aupdated-asc)**. Triaging by simply adding labels helps people focused on certain aspects of Gutenberg find relevant issues easier and start working on them.
+-   **All Gutenberg pull requests [without an assigned label](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+no%3Alabel)**. This requires a level of comfortability with code. For more guidance on which labels are best to use, please [review this section on labeling pull requests](/docs/contributors/repository-management.md#pull-requests) for contributors. You can also always check with the person authoring the pull request to make sure the labels match what they are intending to do.
+-  **[The least recently updated](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+sort%3Aupdated-asc) Gutenberg issues**. Triaging issues that are getting old and possibly out of date keeps important work from being overlooked.
+-  **All Gutenberg issues [with no comments](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+comments%3A0+)**. Triaging this list helps make sure all issues are acknowledged, and can help identify issues that may need more information or discussion before they are actionable.
+-  **[The least commented](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Acomments-asc) on Gutenberg issues**. Triaging this list helps the community figure out what things might still need traction for certain proposals.
+-  **[The most commented](https://github.com/wordpress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Acomments-desc) on Gutenberg issues**. If you feel comfortable chiming in and the conversation has stagnated, the best way to triage these kinds of issues is to summarize the discussion thus far and do your best to identify action items, blockers, etc. Triaging this list allows finding solutions to important and complex issues to move forward.
+-  You can also **create your own custom set of filters on GitHub**. If you have a filter you think might be useful for the community, feel free to submit a PR to add it to this list.
 
-### General triage process
+## General triage process
 
 When triaging, either one of the lists above or issues in general, work through issues one-by-one. Here are some steps you can perform for each issue:
 
--   First search for duplicates. If the issue is duplicate, close it by commenting with “Duplicate of #” and add any relevant new details to the existing issue. (Don’t forget to search for duplicates among closed issues as well!).
--   If the issue is missing labels, add some to better categorize it (requires proper permissions given after joining the triage team). A good starting place when adding labels is to apply one of the labels prefixed [Type] (e.g. [Type] Enhancement or [Type] Bug) to indicate what kind of issue it is. After that consider adding more descriptive labels. If the issue concerns a particular core block, add one of the labels prefixed [Block]. Or if the issue affects a particular feature there are [Feature] labels. Finally, there are labels that affect particular interest areas, like Accessibility and Internationalization. You can view all possible labels [here](https://github.com/WordPress/gutenberg/labels).
--   If the title doesn’t communicate the issue clearly enough, edit it for clarity (requires proper permissions). Specifically, we’d recommend having the main feature the issue relates to in the beginning of the title ([example](https://github.com/WordPress/gutenberg/issues/6193)) and for the title to generally be as succinct yet descriptive as possible ([example](https://github.com/WordPress/gutenberg/issues/6193)).
--   If it’s a bug report, test to confirm the report or add the Needs Testing label. If there is not enough information to confirm the report, add the [Status] Needs More Info label and ask for the details needed. It’s particularly beneficial when a bug report has steps for reproduction so ask the reporter to add those if they’re missing.
--   Remove the [Status] Needs More Info if the author of the issue has responded with enough details.
--   Close the issue with a note if it has a [Status] Needs More Info label but the author didn't respond in 2+ weeks.
--   If there was a conversation on the issue but no actionable steps identified, follow up with the participants to see what’s actionable. Make sure to @ each participant when responding in a comment.
--   If you feel comfortable triaging the issue further, then you can also:
-    -   Check that the bug report is valid by debugging it to see if you can track down the technical specifics.
-    -   Check if the issue is missing some detail and see if you can fill in those details. For instance, if a bug report is missing visual detail, it’s helpful to reproduce the issue locally and upload a screenshot or GIF.
-    -   Consider adding the Good First Issue label if you believe this is a relatively easy issue for a first-time contributor to try to solve.
+1. First **search for duplicates**. If the issue is duplicate, close it by commenting with “Duplicate of #” and add any relevant new details to the existing issue. (Don’t forget to search for duplicates among closed issues as well!).
+2. If the **issue is missing labels, add some** to better categorize it (requires proper permissions given after joining the triage team). A good starting place when adding labels is to apply one of the labels prefixed [Type] (e.g. [Type] Enhancement or [Type] Bug) to indicate what kind of issue it is. After that consider adding more descriptive labels. If the issue concerns a particular core block, add one of the labels prefixed [Block]. Or if the issue affects a particular feature there are [Feature] labels. Finally, there are labels that affect particular interest areas, like Accessibility and Internationalization. You can view all possible labels [here](https://github.com/WordPress/gutenberg/labels).
+3. If the **title doesn’t communicate the issue clearly enough, edit it for clarity** (requires proper permissions). Specifically, we’d recommend having the main feature the issue relates to in the beginning of the title ([example](https://github.com/WordPress/gutenberg/issues/6193)) and for the title to generally be as succinct yet descriptive as possible ([example](https://github.com/WordPress/gutenberg/issues/6193)).
+4. If it’s a **bug report, test to confirm the report or add the `Needs Testing` label**. If there is not enough information to confirm the report, add the `[Status] Needs More Info` label and ask for the details needed. It’s particularly beneficial when a bug report has steps for reproduction so ask the reporter to add those if they’re missing.
+5. **Remove the `[Status] Needs More Info` when is no longer needed**, for example if the author of the issue has responded with enough details.
+6. **Close the inactive `[Status] Needs More Info` issues with a note** if the author didn't respond in 2+ weeks.
+7. If there was a conversation on the issue but **no actionable steps identified, follow up with the participants to see what’s actionable**. Make sure to @ each participant when responding in a comment.
+8. If you feel comfortable triaging the issue further, then you can also:
+    - Check that the bug report is valid by debugging it to see if you can track down the technical specifics.
+    - Check if the issue is missing some detail and see if you can fill in those details. For instance, if a bug report is missing visual detail, it’s helpful to reproduce the issue locally and upload a screenshot or GIF.
+    - Consider adding the Good First Issue label if you believe this is a relatively easy issue for a first-time contributor to try to solve.
 
-**Commonly Used Labels**
+**Commonly used labels**
 
 Generally speaking, the following labels are very useful for triaging issues and will likely be the ones you use the most consistently. You can view all possible labels [here](https://github.com/WordPress/gutenberg/labels).
 
@@ -59,17 +61,16 @@ Generally speaking, the following labels are very useful for triaging issues and
 | `Needs More Info`          | When it’s not clear what the issue is or it would help to provide additional details.     |
 | `Needs Testing`            | When a new issue needs to be confirmed or old bugs seem like they are no longer relevant. |
 
-**Determining Priority Labels**
+**Determining priority labels**
 
 If you have enough knowledge about the report at hand and feel confident in doing so, you can consider adding priority. Note that it’s on purpose that no priority label infers a normal level.
 
 | Label                | Reason                                                                                                                                                                                                                                                     |
 | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Priority OMGWTFBBQ` | Major issues that are causing failures and are reported frequently. Typically, these are issues that are critical because they break important behavior or functionality. An example might be, “Unable to remove a block after it is added to the editor”. |
 | `Priority: High`     | Fits one of the current focuses and is causing a major broken experience (including flow, visual bugs and blocks).                                                                                                                                         |
 | `Priority: Low`      | Enhancements that aren’t part of focuses, niche bugs, problems with old browsers.                                                                                                                                                                          |
 
-### Closing issues
+## Closing issues
 
 Issues are closed for the following reasons:
 
@@ -80,21 +81,23 @@ Issues are closed for the following reasons:
 -   An issue that needs more information that the author of the issue hasn't responded to for 2+ weeks.
 -   An item that is determined as unable to be fixed or is working as intended.
 
+## Specific triages
+
 ### Release specific triage
 
 Here are some guidelines to follow when doing triage specifically around the time of a release. This is important to differentiate compared to general triage so problematic, release blocking bugs are properly identified and solutions are found.
 
--   If a bug is introduced in a release candidate (RC) and it's going to break many workflows, add it to the version milestone and flag in the #core-editor channel in WordPress.org slack.
--   If a bug was introduced in the most recent version, and a next RC hasn’t yet happened, ideally the developers can push to fix it prior to RC! The amount of push for a fix should scale proportional to the potential of breakage. In this case, add to the RC milestone and, if deemed urgent, ping in the #core-editor channel in WordPress.org slack.
--   If a bug wasn’t introduced in the most recent version, do not add a milestone. Instead, use labels like “[Priority] High” if it’s a pressing issue, and if needed you can call attention to it in the weekly core meetings.
+-  **If a bug is introduced in a release candidate (RC) and it's going to break many workflows**, add it to the version milestone and flag in the [#core-editor](https://wordpress.slack.com/archives/C02QB2JS7) channel in WordPress.org slack.
+-  **If a bug was introduced in the most recent version, and a next RC hasn’t yet happened**, ideally the developers can push to fix it prior to RC! The amount of push for a fix should scale proportional to the potential of breakage. In this case, add to the RC milestone and, if deemed urgent, ping in the [#core-editor](https://wordpress.slack.com/archives/C02QB2JS7) channel in WordPress.org slack.
+-  **If a bug wasn’t introduced in the most recent version**, do not add a milestone. Instead, use labels like `[Priority] High` if it’s a pressing issue, and if needed you can call attention to it in the weekly core meetings.
 
 ### Design specific triage
 
 Along with the general triage flows listed previously, there are some specific additions to the flows for more design-centric triage for design minded folks participating in triage.
 
 -   PR testing and reviews: this should be your first stop for daily self triage.
--   Needs design feedback: check if the issue does need design feedback and, if possible, give it. You can organize this by priority, project boards or by least commented. Once there are enough opinions, please remove this label and decide on next steps (ie adding the Needs Design label).
--   Needs design: Does it really need a design? Does this fit a focus? If it has a design mark as ‘needs design feedback’ to better categorize the issue.
+-  Label `Needs Design Feedback`: check if the issue does need design feedback and, if possible, give it. You can organize this by priority, project boards or by least commented. Once there are enough opinions, please remove this label and decide on next steps (ie adding the Needs Design label).
+- Label  `Needs Design`: Does it really need a design? Does this fit a focus? If it has a design mark as `Needs Design Feedback` to better categorize the issue.
 
 Reminders:
 
diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
index cb23c072e8e4e8..c2be7e3fa4e884 100644
--- a/docs/contributors/versions-in-wordpress.md
+++ b/docs/contributors/versions-in-wordpress.md
@@ -6,34 +6,169 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 18.6-19.3          | 6.7.1             |
+| 18.6-19.3          | 6.7               |
+| 17.8-18.5          | 6.6.2             |
+| 17.8-18.5          | 6.6.1             |
+| 17.8-18.5          | 6.6               |
+| 16.8-17.7          | 6.5.5             |
+| 16.8-17.7          | 6.5.4             |
+| 16.8-17.7          | 6.5.3             |
+| 16.8-17.7          | 6.5.2             |
+| 16.8-17.7          | 6.5               |
+| 16.2-16.7          | 6.4.4             |
+| 16.2-16.7          | 6.4.5             |
+| 16.2-16.7          | 6.4.3             |
+| 16.2-16.7          | 6.4.2             |
+| 16.2-16.7          | 6.4.1             |
+| 16.2-16.7          | 6.4               |
+| 15.2-16.1          | 6.3.5             |
+| 15.2-16.1          | 6.3.4             |
+| 15.2-16.1          | 6.3.3             |
+| 15.2-16.1          | 6.3.2             |
+| 15.2-16.1          | 6.3.1             |
+| 15.2-16.1          | 6.3               |
+| 14.2-15.1          | 6.2.6             |
+| 14.2-15.1          | 6.2.5             |
+| 14.2-15.1          | 6.2.4             |
+| 14.2-15.1          | 6.2.3             |
+| 14.2-15.1          | 6.2.2             |
+| 14.2-15.1          | 6.2.1             |
+| 14.2-15.1          | 6.2               |
+| 13.1-14.1          | 6.1.7             |
+| 13.1-14.1          | 6.1.6             |
+| 13.1-14.1          | 6.1.5             |
+| 13.1-14.1          | 6.1.4             |
+| 13.1-14.1          | 6.1.3             |
+| 13.1-14.1          | 6.1.2             |
+| 13.1-14.1          | 6.1.1             |
 | 13.1-14.1          | 6.1               |
+| 12.0-13.0          | 6.0.9             |
+| 12.0-13.0          | 6.0.8             |
+| 12.0-13.0          | 6.0.7             |
+| 12.0-13.0          | 6.0.6             |
+| 12.0-13.0          | 6.0.5             |
+| 12.0-13.0          | 6.0.4             |
 | 12.0-13.0          | 6.0.3             |
 | 12.0-13.0          | 6.0.2             |
 | 12.0-13.0          | 6.0.1             |
 | 12.0-13.0          | 6.0               |
+| 10.8-11.9          | 5.9.10            |
+| 10.8-11.9          | 5.9.9             |
+| 10.8-11.9          | 5.9.8             |
+| 10.8-11.9          | 5.9.7             |
+| 10.8-11.9          | 5.9.6             |
+| 10.8-11.9          | 5.9.5             |
+| 10.8-11.9          | 5.9.4             |
 | 10.8-11.9          | 5.9.3             |
 | 10.8-11.9          | 5.9.2             |
 | 10.8-11.9          | 5.9.1             |
 | 10.8-11.9          | 5.9               |
+| 10.0-10.7          | 5.8.10            |
+| 10.0-10.7          | 5.8.9             |
+| 10.0-10.7          | 5.8.8             |
+| 10.0-10.7          | 5.8.7             |
+| 10.0-10.7          | 5.8.6             |
+| 10.0-10.7          | 5.8.5             |
+| 10.0-10.7          | 5.8.4             |
 | 10.0-10.7          | 5.8.3             |
 | 10.0-10.7          | 5.8.2             |
 | 10.0-10.7          | 5.8.1             |
 | 10.0-10.7          | 5.8               |
+| 9.3-9.9            | 5.7.12            |
+| 9.3-9.9            | 5.7.11            |
+| 9.3-9.9            | 5.7.10            |
+| 9.3-9.9            | 5.7.9             |
+| 9.3-9.9            | 5.7.8             |
+| 9.3-9.9            | 5.7.7             |
+| 9.3-9.9            | 5.7.6             |
+| 9.3-9.9            | 5.7.5             |
+| 9.3-9.9            | 5.7.4             |
+| 9.3-9.9            | 5.7.3             |
+| 9.3-9.9            | 5.7.2             |
 | 9.3-9.9            | 5.7.1             |
 | 9.3-9.9            | 5.7               |
+| 8.6-9.2            | 5.6.14            |
+| 8.6-9.2            | 5.6.13            |
+| 8.6-9.2            | 5.6.12            |
+| 8.6-9.2            | 5.6.11            |
+| 8.6-9.2            | 5.6.10            |
+| 8.6-9.2            | 5.6.9             |
+| 8.6-9.2            | 5.6.8             |
+| 8.6-9.2            | 5.6.7             |
+| 8.6-9.2            | 5.6.6             |
+| 8.6-9.2            | 5.6.5             |
+| 8.6-9.2            | 5.6.4             |
+| 8.6-9.2            | 5.6.3             |
+| 8.6-9.2            | 5.6.2             |
 | 8.6-9.2            | 5.6.1             |
 | 8.6-9.2            | 5.6               |
+| 7.6-8.5            | 5.5.15            |
+| 7.6-8.5            | 5.5.14            |
+| 7.6-8.5            | 5.5.13            |
+| 7.6-8.5            | 5.5.12            |
+| 7.6-8.5            | 5.5.11            |
+| 7.6-8.5            | 5.5.10            |
+| 7.6-8.5            | 5.5.9             |
+| 7.6-8.5            | 5.5.8             |
+| 7.6-8.5            | 5.5.7             |
+| 7.6-8.5            | 5.5.6             |
+| 7.6-8.5            | 5.5.5             |
+| 7.6-8.5            | 5.5.4             |
 | 7.6-8.5            | 5.5.3             |
 | 7.6-8.5            | 5.5.2             |
 | 7.6-8.5            | 5.5.1             |
 | 7.6-8.5            | 5.5               |
+| 6.6-7.5            | 5.4.16            |
+| 6.6-7.5            | 5.4.15            |
+| 6.6-7.5            | 5.4.14            |
+| 6.6-7.5            | 5.4.13            |
+| 6.6-7.5            | 5.4.12            |
+| 6.6-7.5            | 5.4.11            |
+| 6.6-7.5            | 5.4.10            |
+| 6.6-7.5            | 5.4.9             |
+| 6.6-7.5            | 5.4.8             |
+| 6.6-7.5            | 5.4.7             |
+| 6.6-7.5            | 5.4.6             |
+| 6.6-7.5            | 5.4.5             |
+| 6.6-7.5            | 5.4.4             |
+| 6.6-7.5            | 5.4.3             |
 | 6.6-7.5            | 5.4.2             |
-| 6.6-7.5            | 5.4.0             |
+| 6.6-7.5            | 5.4.1             |
+| 6.6-7.5            | 5.4               |
+| 5.5-6.5            | 5.3.18            |
+| 5.5-6.5            | 5.3.17            |
+| 5.5-6.5            | 5.3.16            |
+| 5.5-6.5            | 5.3.15            |
+| 5.5-6.5            | 5.3.14            |
+| 5.5-6.5            | 5.3.13            |
+| 5.5-6.5            | 5.3.12            |
+| 5.5-6.5            | 5.3.11            |
+| 5.5-6.5            | 5.3.10            |
+| 5.5-6.5            | 5.3.9             |
+| 5.5-6.5            | 5.3.8             |
+| 5.5-6.5            | 5.3.7             |
+| 5.5-6.5            | 5.3.6             |
+| 5.5-6.5            | 5.3.5             |
 | 5.5-6.5            | 5.3.4             |
 | 5.5-6.5            | 5.3.3             |
 | 5.5-6.5            | 5.3.2             |
 | 5.5-6.5            | 5.3.1             |
-| 5.5-6.5            | 5.3.0             |
+| 5.5-6.5            | 5.3               |
+| 4.9-5.4            | 5.2.21            |
+| 4.9-5.4            | 5.2.20            |
+| 4.9-5.4            | 5.2.19            |
+| 4.9-5.4            | 5.2.18            |
+| 4.9-5.4            | 5.2.17            |
+| 4.9-5.4            | 5.2.16            |
+| 4.9-5.4            | 5.2.15            |
+| 4.9-5.4            | 5.2.14            |
+| 4.9-5.4            | 5.2.13            |
+| 4.9-5.4            | 5.2.12            |
+| 4.9-5.4            | 5.2.11            |
+| 4.9-5.4            | 5.2.10            |
+| 4.9-5.4            | 5.2.9             |
+| 4.9-5.4            | 5.2.8             |
 | 4.9-5.4            | 5.2.7             |
 | 4.9-5.4            | 5.2.6             |
 | 4.9-5.4            | 5.2.5             |
@@ -41,14 +176,39 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 4.9-5.4            | 5.2.3             |
 | 4.9-5.4            | 5.2.2             |
 | 4.9-5.4            | 5.2.1             |
-| 4.9-5.4            | 5.2.0             |
+| 4.9-5.4            | 5.2               |
+| 4.8                | 5.1.19            |
+| 4.8                | 5.1.18            |
+| 4.8                | 5.1.17            |
+| 4.8                | 5.1.16            |
+| 4.8                | 5.1.15            |
+| 4.8                | 5.1.14            |
+| 4.8                | 5.1.13            |
+| 4.8                | 5.1.12            |
+| 4.8                | 5.1.11            |
+| 4.8                | 5.1.10            |
+| 4.8                | 5.1.9             |
+| 4.8                | 5.1.8             |
+| 4.8                | 5.1.7             |
 | 4.8                | 5.1.6             |
 | 4.8                | 5.1.5             |
 | 4.8                | 5.1.4             |
 | 4.8                | 5.1.3             |
 | 4.8                | 5.1.2             |
 | 4.8                | 5.1.1             |
-| 4.8                | 5.1.0             |
+| 4.8                | 5.1               |
+| 4.7.1              | 5.0.22            |
+| 4.7.1              | 5.0.21            |
+| 4.7.1              | 5.0.20            |
+| 4.7.1              | 5.0.19            |
+| 4.7.1              | 5.0.18            |
+| 4.7.1              | 5.0.17            |
+| 4.7.1              | 5.0.16            |
+| 4.7.1              | 5.0.15            |
+| 4.7.1              | 5.0.14            |
+| 4.7.1              | 5.0.13            |
+| 4.7.1              | 5.0.12            |
+| 4.7.1              | 5.0.11            |
 | 4.7.1              | 5.0.10            |
 | 4.7.1              | 5.0.9             |
 | 4.7.1              | 5.0.8             |
@@ -59,4 +219,4 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 | 4.7.1              | 5.0.3             |
 | 4.7.0              | 5.0.2             |
 | 4.6.1              | 5.0.1             |
-| 4.6.1              | 5.0.0             |
+| 4.6.1              | 5.0               |
diff --git a/docs/explanations/README.md b/docs/explanations/README.md
index 04d9f8e9e15b52..2d0da6cabdf67c 100644
--- a/docs/explanations/README.md
+++ b/docs/explanations/README.md
@@ -8,5 +8,5 @@
 -   [Block Editor Performance](/docs/explanations/architecture/performance.md).
 -   What are the decision decisions behind the Data Module?
 -   [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
--   [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md/#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
+-   [What’s the difference between the different editor packages? What’s the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
 -   [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md)
diff --git a/docs/explanations/architecture/README.md b/docs/explanations/architecture/README.md
index 723bce3ce4e2f4..ec49318bb38cfa 100644
--- a/docs/explanations/architecture/README.md
+++ b/docs/explanations/architecture/README.md
@@ -2,12 +2,17 @@
 
 Let’s look at the big picture and the architectural and UX principles of the block editor and the Gutenberg repository.
 
--   [Key Concepts](/docs/explanations/architecture/key-concepts.md)
--   [Data Format And Data Flow](/docs/explanations/architecture/data-flow.md)
--   [Understand the repository folder structure](/docs/contributors/folder-structure.md).
+## Editor
+
+-   [Key concepts](/docs/explanations/architecture/key-concepts.md).
+-   [Data format and data flow](/docs/explanations/architecture/data-flow.md).
+-   [Entities and undo/redo](/docs/explanations/architecture/entities.md).
+-   [Site editing templates](/docs/explanations/architecture/full-site-editing-templates.md).
+-   [Styles in the editor](/docs/explanations/architecture/styles.md).
+-   [Performance](/docs/explanations/architecture/performance.md).
+
+## Gutenberg repository
+
 -   [Modularity and WordPress Packages](/docs/explanations/architecture/modularity.md).
--   [Block Editor Performance](/docs/explanations/architecture/performance.md).
--   What are the decision decisions behind the Data Module?
--   [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md)
--   [What's the difference between the different editor packages? What's the purpose of each package?](/docs/explanations/architecture/modularity.md#whats-the-difference-between-the-different-editor-packages-whats-the-purpose-of-each-package)
--   [Template and template parts flows](/docs/explanations/architecture/full-site-editing-templates.md)
+-   [Understand the repository folder structure](/docs/contributors/folder-structure.md).
+-   **Outdated!** [Why is Puppeteer the tool of choice for end-to-end tests?](/docs/explanations/architecture/automated-testing.md).
diff --git a/docs/explanations/architecture/data-flow.md b/docs/explanations/architecture/data-flow.md
index e000cd33b46317..c594ceda704431 100644
--- a/docs/explanations/architecture/data-flow.md
+++ b/docs/explanations/architecture/data-flow.md
@@ -74,7 +74,7 @@ const columnsBlock = {
 };
 ```
 
-## Serialization and Parsing
+## Serialization and parsing
 
 ![Diagram](https://docs.google.com/drawings/d/1iuownt5etcih7rMMvPvh0Mny8zUA1Z28saxjxaWmfJ0/pub?w=1234&h=453)
 
@@ -88,7 +88,7 @@ This is one end of the process. The other is how to recreate the collection of b
 
 They just happen, incidentally, to be stored inside of `post_content` in a way in which they require no transformation in order to be viewable by any legacy system. It's true that loading the stored HTML into a browser without the corresponding machinery might degrade the experience, and if it included dynamic blocks of content, the dynamic elements may not load, server-generated content may not appear, and interactive content may remain static. However, it at least protects against not being able to view block editor posts on themes and installations that are blocks-unaware, and it provides the most accessible way to the content. In other words, the post remains mostly intact even if the saved HTML is rendered as is.
 
-### Delimiters and Parsing Expression Grammar
+### Delimiters and parsing expression grammar
 
 We chose instead to try to find a way to keep the formality, explicitness, and unambiguity in the existing HTML syntax. Within the HTML there were a number of options.
 
@@ -102,7 +102,7 @@ This has dramatic implications for how simple and performant we can make our par
 
 _N.B.:_ The defining aspects of blocks are their semantics and the isolation mechanism they provide: in other words, their identity. On the other hand, where their data is stored is a more liberal aspect. Blocks support more than just static local data (via JSON literals inside the HTML comment or within the block's HTML), and more mechanisms (_e.g._, global blocks or otherwise resorting to storage in complementary `WP_Post` objects) are expected. See [attributes](/docs/reference-guides/block-api/block-attributes.md) for details.
 
-### The Anatomy of a Serialized Block
+### The anatomy of a serialized block
 
 When blocks are saved to the content after the editing session, its attributes—depending on the nature of the block—are serialized to these explicit comment delimiters.
 
@@ -118,7 +118,7 @@ A purely dynamic block that is to be server-rendered before display could look l
 <!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->
 ```
 
-## The Data Lifecycle
+## The data lifecycle
 
 In summary, the block editor workflow parses the saved document to an in-memory tree of blocks, using token delimiters to help. During editing, all manipulations happen within the block tree. The process ends by serializing the blocks back to the `post_content`.
 
diff --git a/docs/explanations/architecture/entities.md b/docs/explanations/architecture/entities.md
new file mode 100644
index 00000000000000..7f2df3cc2bcadc
--- /dev/null
+++ b/docs/explanations/architecture/entities.md
@@ -0,0 +1,71 @@
+# Entities and Undo/Redo
+
+The WordPress editors, whether it's the Post or Site Editor, manipulate what we call entity records. These are objects that represent a post, a page, a user, a term, a template, etc. They are the data that is stored in the database, and that is manipulated by the editor. Each editor can fetch, edit, and save multiple entity records at the same time. 
+
+For instance, when opening a page in the Site Editor:
+
+ - You can edit properties of the page itself (title, content, etc.)
+ - You can edit properties of the template of the page (content of the template, design, etc.)
+ - You can edit properties of template parts (header, footer) used with the template.
+
+The editor keeps track of all these modifications and orchestrates the saving of all these modified records. This happens within the `@wordpress/core-data` package.
+
+
+## Editing entities
+
+To be able to edit an entity, you need to first fetch it and load it into the `core-data` store. For example, the following code loads the post with ID 1 into the store. (The entity is the post, the post 1 is the entity record).
+
+````js
+wp.data.select( 'core' ).getEntityRecord( 'postType', 'post', 1 );
+````
+
+Once the entity is loaded, you can edit it. For example, the following code sets the title of the post to "Hello World". For each fetched entity record, the `core-data` store keeps track of the following:
+
+ - **The "persisted" record:** The last state of the record as it was fetched from the backend.
+ - **A list of "edits":** Unsaved local modifications for one or several properties of the record. 
+ 
+The package also exposes a set of actions to manipulate the fetched entity records.
+
+To edit an entity record, you can call `editEntityRecord`, which takes the entity type, the entity ID, and the new entity record as parameters. The following example sets the title of the post with ID 1 to "Hello World".
+
+````js
+wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, { title: 'Hello World' } );
+````
+
+Once you have edited an entity record, you can save it. The following code saves the post with ID 1.
+
+````js
+wp.data.dispatch( 'core' ).saveEditedEntityRecord( 'postType', 'post', 1 );
+````
+
+## Undo/Redo
+
+Since the WordPress editors allow multiple entity records to be edited at the same time, the `core-data` package keeps track of all the entity records that have been fetched and edited in a common undo/redo stack. Each step in the undo/redo stack contains a list of "edits" that should be undone or redone at the same time when calling the `undo` or `redo` action.
+
+And to be able to perform both undo and redo operations properly, each modification in the list of edits contains the following information:
+
+ - **Entity kind and name:** Each entity in core-data is identified by the pair _(kind, name)_. This corresponds to the identifier of the modified entity. 
+ - **Entity Record ID:** The ID of the modified record.
+ - **Property:** The name of the modified property.
+ - **From:** The previous value of the property (needed to apply the undo operation).
+ - **To:** The new value of the property (needed to apply the redo operation).
+ 
+For example, let's say a user edits the title of a post, followed by a modification to the post slug, and then a modification of the title of a reusable block used with the post. The following information is stored in the undo/redo stack:
+
+ - `[ { kind: 'postType', name: 'post', id: 1, property: 'title', from: '', to: 'Hello World' } ]`
+ - `[ { kind: 'postType', name: 'post', id: 1, property: 'slug', from: 'Previous slug', to: 'This is the slug of the hello world post' } ]`
+ - `[ { kind: 'postType', name: 'wp_block', id: 2, property: 'title', from: 'Reusable Block', to: 'Awesome Reusable Block' } ]`
+
+The store also keeps track of a "pointer" to the current "undo/redo" step. By default, the pointer always points to the last item in the stack. This pointer is updated when the user performs an undo or redo operation.
+
+### Cached changes
+
+The undo/redo core behavior also supports what we call "cached modifications". These are modifications that are not stored in the undo/redo stack right away. For instance, when a user starts typing in a text field, the value of the field is modified in the store, but this modification is not stored in the undo/redo stack until after the user moves to the next word or after a few milliseconds. This is done to avoid creating a new undo/redo step for each character typed by the user.
+
+Cached changes are kept outside the undo/redo stack in what is called a "cache" of modifications, and these modifications are only stored in the undo/redo stack when we explicitly call `__unstableCreateUndoLevel` or when the next modification is not a cached one.
+
+By default, all calls to `editEntityRecord` are considered "non-cached" unless the `isCached` option is passed as true. Example:
+
+```js
+wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, { title: 'Hello World' }, { isCached: true } );
+```
diff --git a/docs/explanations/architecture/full-site-editing-templates.md b/docs/explanations/architecture/full-site-editing-templates.md
index 76bc3a0f5861f2..a1138b4cdad189 100644
--- a/docs/explanations/architecture/full-site-editing-templates.md
+++ b/docs/explanations/architecture/full-site-editing-templates.md
@@ -1,8 +1,8 @@
-# Full Site Editing Templates
+# Site Editing Templates
 
 ## Template and template part flows
 
-This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend. For an introduction about block themes and Full site editing templates, refer to the [block theme documentation](/docs/how-to-guides/themes/block-theme-overview.md).
+This document will explain the internals of how templates and templates parts are rendered in the frontend and edited in the backend.
 
 ## Storage
 
diff --git a/docs/explanations/architecture/key-concepts.md b/docs/explanations/architecture/key-concepts.md
index b246724e5d5838..30318d29422d37 100644
--- a/docs/explanations/architecture/key-concepts.md
+++ b/docs/explanations/architecture/key-concepts.md
@@ -12,7 +12,7 @@ The settings and content of a block can be customized in three main places: the
 
 Blocks are meant to be combined in different ways. Blocks are hierarchical in that a block can be nested within another block. Nested blocks and its container are also called _children_ and _parent_ respectively. For example, a _Columns_ block can be the parent block to multiple child blocks in each of its columns. The API that governs child block usage is named `InnerBlocks`.
 
-### Data & Attributes
+### Data and attributes
 
 Blocks understand content as attributes and are serializable to HTML. To this point, there is a new Block Grammar. Distilled, the block grammar is an HTML comment, either a self-closing tag or with a beginning tag and ending tag. In the main tag, depending on the block type and user customizations, there can be a JSON object. This raw form of the block is referred to as serialized.
 
@@ -26,39 +26,45 @@ Blocks can be static or dynamic. Static blocks contain rendered content and an o
 
 Each block contains Attributes or configuration settings, which can be sourced from raw HTML in the content via meta or other customizable origins.
 
-### Transformations
+More on [Data format and data flow](/docs/explanations/architecture/data-flow.md).
 
-Blocks have the ability to be transformed into other block types. This allows basic operations like converting a paragraph into a heading, but also more intricate ones like multiple images becoming a gallery. Transformations work for single blocks and for multi-block selections. Internal block variations are also possible transformation targets.
+### Block transforms
 
-### Variations
+Blocks have the ability to be transformed into other block types. This allows basic operations like converting a paragraph into a heading, but also more intricate ones like multiple images becoming a gallery. Block transforms work for single blocks and for multi-block selections. Internal block variations are also possible transformation targets.
+
+### Block variations
 
 Given a block type, a block variation is a predefined set of its initial attributes. This API allows creating a single block from which multiple configurations are possible. Variations provide different possible interfaces, including showing up as entirely new blocks in the library, or as presets when inserting a new block. Read [the API documentation](/docs/reference-guides/block-api/block-registration.md#variations-optional) for more details.
 
-**More on Blocks**
+**More on blocks**
 
 -   **[Block API](/docs/reference-guides/block-api/README.md)**
--   **[Tutorial: Building A Custom Block](/docs/getting-started/create-block/README.md)**
+-   **[Tutorial: Building A Custom Block](/docs/getting-started/devenv/get-started-with-create-block.md)**
 
-## Reusable Blocks
+## Reusable blocks
 
-A reusable blocks is a block (or multiple blocks) that can be inserted and edited globally at once. If a reusable block is edited in one place, those changes are reflected across all posts and pages that block is used. Examples of reusable blocks include a block consisting of a heading whose content and a custom color that would be appear on multiple pages of the site and sidebar widgets that would appear on every page.
+A reusable blocks is **an instance** of a block (or multiple blocks) that can be inserted and edited in multiples places, remaining in sync everywhere. If a reusable block is edited in one place, those changes are reflected across all posts and pages that block is used. Examples of reusable blocks include a block consisting of a heading whose content and a custom color that would be appear on multiple pages of the site and sidebar widgets that would appear on every page.
 
 Any edits to a reusable block will appear on every other use of that block, saving time from having to make the same edit on different posts.
 
-In technical details, reusable blocks are stored as a hidden post type (`wp_block`) and are dynamic blocks that "ref" or reference the `post_id` and return the `post_content` for that block.
+Internally, reusable blocks are stored as a hidden post type (`wp_block`) and are dynamic blocks that "ref" or reference the `post_id` and return the `post_content` for that block.
 
 ## Patterns
 
-A [block pattern](/docs/reference-guides/block-api/block-patterns.md) is a group of blocks that have been combined together creating a design pattern. These design patterns provide a starting point for building more advanced pages and layouts quickly. A block pattern can be as small as a single block or as large as a full page of content. Unlike reusable blocks, once a pattern is inserted it doesn't remain in sync with the original content as the blocks contained are meant to be edited and customized by the user. Underneath the surface, patterns are just regular blocks composed together. Themes can register patterns to offer users quick starting points with a design language familiar to that theme's aesthetics.
+A [block pattern](/docs/reference-guides/block-api/block-patterns.md) is a group of blocks that have been combined together creating a design pattern. These design patterns provide a starting point for building more advanced pages and layouts quickly, instead of inserting individual blocks. A block pattern can be as small as a single block or as large as a full page of content. Unlike reusable blocks, once a pattern is inserted it doesn't remain in sync with the original content as the blocks contained are meant to be edited and customized by the user. Underneath the surface, patterns are just regular blocks composed together. Themes can register patterns to offer users quick starting points with a design language familiar to that theme's aesthetics.
+
+## Templates
 
-## Templates (in progress)
+While the post editor concentrates on the content of a post, the [template](/docs/reference-guides/block-api/block-templates.md) editor allows declaring and editing an entire site using blocks, from header to footer. Templates are broken down between templates (that describe a full page) and template parts (that describe reusable areas within a template, including semantic areas like header, sidebar, and footer).
 
-While the post editor concentrates on the content of a post, the [template](/docs/reference-guides/block-api/block-templates.md) editor allows declaring and editing an entire site using blocks, from header to footer. To support these efforts there's a collection of blocks that interact with different parts of a site (like the site title, description, logo, navigation, etc) as well as semantic areas like header, sidebar, and footer. Templates are broken down between templates (that describe a full page) and template parts (that describe reusable areas within a template). These templates and template parts can be composed together and registered by a theme. They are also entirely editable by users using the block editor. Customized templates are saved in a `wp_template` post type. Block templates include both static pages and dynamic ones, like archives, singular, home, 404, etc.
+These templates and template parts can be composed together and registered by a theme. They are also entirely editable by users using the block editor; a collection of blocks that interact with different properties and settings of the site (like the site title, description, logo, navigation, etc) are especially useful when editing templates and template parts. Customized templates are saved in a `wp_template` post type. Block templates include both static pages and dynamic ones, like archives, singular, home, 404, etc.
 
 Note: custom post types can also be initialized with a starting `post_content` template that should not be confused with the theme template system described above.
 
-## Global Styles
+More on [Site editing templates](/docs/explanations/architecture/full-site-editing-templates.md).
+
+## Styles
 
-Global Styles is both an interface (which users access through the site editor) and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/theme-json.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
+Styles, formerly known as Global Styles and as such referenced in the code, is both an interface that users access through the editor and a configuration system done through [a `theme.json` file](/docs/how-to-guides/themes/global-settings-and-styles.md). This file absorbs most of the configuration aspects usually scattered through various `add_theme_support` calls to simplify communicating with the editor. It thus aims to improve declaring what settings should be enabled, what specific tools a theme offers (like a custom color palette), the available design tools present, and an infrastructure that allows to coordinate the styles coming from WordPress, the active theme, and the user.
 
 Learn more about [Global Styles](/docs/explanations/architecture/styles.md#global-styles).
diff --git a/docs/explanations/architecture/modularity.md b/docs/explanations/architecture/modularity.md
index 266e4da1d2325b..ff619ccbfdf5b7 100644
--- a/docs/explanations/architecture/modularity.md
+++ b/docs/explanations/architecture/modularity.md
@@ -42,8 +42,8 @@ function MyApp() {
 
 ```php
 // myplugin.php
-// Example of script registration dependending on the "components" and "element packages.
-wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "wp-element" ) );
+// Example of script registration depending on the "components" and "element packages.
+wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "react" ) );
 ```
 
 ```js
@@ -76,7 +76,7 @@ If you're using one of these stores to access and manipulate WordPress data in y
 
 These are packages used in development mode to help developers with daily tasks to develop, build and ship JavaScript applications, WordPress plugins and themes. They include tools for linting your codebase, building it, testing it...
 
-## Editor Packages
+## Editor packages
 
 ![Post Editor Modules Architecture](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/explanations/architecture/assets/modules.png)
 
diff --git a/docs/explanations/architecture/performance.md b/docs/explanations/architecture/performance.md
index 94848d1386d980..8c1034ad9de331 100644
--- a/docs/explanations/architecture/performance.md
+++ b/docs/explanations/architecture/performance.md
@@ -6,11 +6,13 @@ Performance is a key feature for editor applications and the Block editor is not
 
 To ensure the block editor stays performant across releases and development, we monitor some key metrics using [performance benchmark job](#the-performance-benchmark-job).
 
-**Loading Time:** The time it takes to load an editor page. This includes time the server takes to respond, times to first paint, first contentful paint, DOM content load complete, load complete and first block render.
-**Typing Time:** The time it takes for the browser to respond while typing on the editor.
-**Block Selection Time:** The time it takes for the browser to respond after a user selects block. (Inserting a block is also equivalent to selecting a block. Monitoring the selection is sufficient to cover both metrics).
+Some of the main important metrics are:
 
-## Key Performance Decisions and Solutions
+- **Loading Time:** The time it takes to load an editor page. This includes time the server takes to respond, times to first paint, first contentful paint, DOM content load complete, load complete and first block render (both in post and site).
+- **Typing Time:** The time it takes for the browser to respond while typing on the editor.
+- **Block Selection Time:** The time it takes for the browser to respond after a user selects block. (Inserting a block is also equivalent to selecting a block. Monitoring the selection is sufficient to cover both metrics).
+
+## Key performance decisions and solutions
 
 **Data Module Async Mode**
 
@@ -53,15 +55,43 @@ To achieve that the command first prepares the following folder structure:
 
 Once the directory above is in place, the performance command loop over the performance test suites (post editor and site editor) and does the following:
 
- 1- Start the environment for branch1
- 2- Run the performance test for the current suite
- 3- Stop the environment for branch1
- 4- Repeat the first 3 steps for all other branches
- 5- Repeat the previous 4 steps 3 times.
- 6- Compute medians for all the performance metrics of the current suite.
+1. Start the environment for `branch1`
+2. Run the performance test for the current suite
+3. Stop the environment for `branch1`
+4. Repeat the first 3 steps for all other branches
+5. Compute medians for all the performance metrics of the current suite.
 
 Once all the test suites are executed, a summary report is printed.
 
+## Tracking performance using CodeVitals.
+
+The performance results for each commit are pushed to codevitals and can be seen on the [Gutenberg dashboard there](https://www.codevitals.run/project/gutenberg). The graphs allow us to track the evolution of a given metric over time.
+
+It's thus very important to ensure that the metric being computed is stable. Meaning, if you run the same test twice with the same code and environment, you'll get results that are close.
+
+Our performance job runs GitHub CI which means that we can't trust the consistency of the numbers that we get between two similar job runs. GitHub CI may allocate different CPU and memory resources for us over time for instance. To alleviate this problem, each time we run the performance job on the trunk branch, we compare the current commit's performance to a fixed reference commit hash, which allows us to track the relative difference between the current commit and the reference commit consistently regardless of environment changes.
+
+### Update the reference commit
+
+Gutenberg supports only two WP versions, this impacts the performance job in two ways:
+
+ - The base WP version used to run the performance job needs to be updated, when the minimum version supported by Gutenberg changes. In order to do that, we rely on the `Tested up to` flag of the plugin's `readme.txt` file. So each time that flag is changed, the version used for the performance job is changed as well.
+
+ - Updating the WP version used for performance jobs means that there's a high chance that the reference commit used for performance test stability becomes incompatible with the WP version that is used. So every time, the `Tested up to` flag is updated in the `readme.txt` is changed, we also have to update the reference commit that is used in `.github/workflows/performance.yml`.
+
+The new reference commit hash that is chosen needs to meet the following requirements:
+
+ - Be compatible with the new WP version used in the "Tested up to" flag.
+ - Is already tracked on "codevitals.run" for all existing metrics.
+
+When releasing a plugin update with changes to the minimum WordPress version requirements, the end-to-end test GitHub Action workflow in Core SVN will need to be updated for any branch losing support. Otherwise the first run of that workflow on that branch following the release will fail.
+
+The version of the plugin used in the workflow can be pinned by adding the `gutenberg-version` input to the test matrix. [Core-59221](https://core.trac.wordpress.org/changeset/59221) is an example of this change for the 6.4 branch.
+
+**Note:** Always use the final release including bug fixes (ie. `x.y.2` or `x.y.3`). If the final release is not yet known, create a [Trac ticket](https://core.trac.wordpress.org/ticket/62488) so it's not forgotten.
+
+**A simple way to choose commit is to pick a very recent commit on trunk with a passing performance job.**
+
 ## Going further
 
 -   [Journey towards a performant editor](https://riad.blog/2020/02/14/a-journey-towards-a-performant-web-editor/)
diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md
index 416eef796bec8f..5f5e73d1372f7b 100644
--- a/docs/explanations/architecture/styles.md
+++ b/docs/explanations/architecture/styles.md
@@ -1,25 +1,8 @@
-## Styles in the block editor
+# Styles in the Editor
 
 This document introduces the main concepts related to styles that affect the user content in the block editor. It points to the relevant reference guides and tutorials for readers to dig deeper into each one of the ideas presented. It's aimed to block authors and people working in the block editor project.
 
-1. [HTML and CSS](#html-and-css)
-2. [Block styles](#block-styles)
-  - [From UI controls to HTML markup](#from-ui-controls-to-html-markup)
-  - [Block Supports API](#block-supports-api)
-  - [Current limitations of the Block Supports API](#current-limitations-of-the-block-supports-api)
-3. [Global styles](#global-styles)
-  - [Gather data](#gather-data)
-  - [Consolidate data](#consolidate-data)
-  - [From data to styles](#from-data-to-styles)
-  - [Current limitations of the Global Styles API](#current-limitations-of-the-global-styles-api)
-4. [Layout styles](#layout-styles)
-  - [Base layout styles](#base-layout-styles)
-  - [Individual layout styles](#individual-layout-styles)
-  - [Available layout types](#available-layout-types)
-  - [Targeting layout or container blocks from themes](#targeting-layout-or-container-blocks-from-themes)
-  - [Opting out of generated layout styles](#opting-out-of-generated-layout-styles)
-
-### HTML and CSS
+## HTML and CSS
 
 By creating a post in the block editor the user is creating a number of artifacts: a HTML document plus a number of CSS stylesheets, either embedded in the document or external.
 
@@ -32,12 +15,12 @@ The final HTML document is the result of a few things:
 The stylesheets loaded in the front end include:
 
 -   **Blocks**. The stylesheets that come with the block. In the front end, you can find a single stylesheet with all block styles defined by WordPress (`wp-block-library-*` ) or separate stylesheets per block in use (as in `wp-block-group-*`, `wp-block-columns-*`, etc). See [this note](https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/) for the full details.
--   **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`.
+-   **Global styles**. These styles are generated on the fly by using data coming from a theme.json file: see [note](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/), [reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/), and [how to guide](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/). Specifically, it merges the contents of the theme.json from WordPress, the theme.json from the theme (if it has one), and the user data provided via the global styles sidebar in the site editor. The result of processing this data is an embedded stylesheet whose id is `global-styles-inline-css`.
 -   **Theme**. Historically, themes have enqueued their own stylesheets, where the id is based on the theme name, as in `twentytwentytwo-style-css`. In addition to having their own stylesheets they can now declare a theme.json file containing styles that will be part of the stylesheet generated by global styles.
 -   **User**. Some of the user actions in the editor will generate style content. This is the case for features such as duotone, layout, or link color.
 -   **Other**. WordPress and plugins can also enqueue stylesheets.
 
-### Block styles
+## Block styles
 
 Since the introduction of the block editor in WordPress 5.0, there were tools for the users to "add styles" to specific blocks. By using these tools, the user would attach new classes or inline styles to the blocks, modifying their visual aspect.
 
@@ -64,7 +47,7 @@ This is what we refer to as "user-provided block styles", also know as "local st
 
 The ability to modify a block state coupled with the fact that a block can live within any other block (think of a paragraph within a group), creates a vast amount of potential states and style possibilities.
 
-#### From UI controls to HTML markup
+### From UI controls to HTML markup
 
 If you follow the [block tutorial](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/) you can learn up about the different parts of the [block API](https://developer.wordpress.org/block-editor/reference-guides/block-api/) presented here in more detail and also build your own block. This is an introduction to the general concepts of how a block can let users edit its state.
 
@@ -77,7 +60,7 @@ To build an experience like the one described above a block author needs a few p
 
 In essence, these are the essential mechanics a block author needs to care about for their block to be able to be styled by the user. While this can be done completely manually, there's an API that automates this process for common style needs: block supports.
 
-#### Block Supports API
+### Block Supports API
 
 [Block Supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) is an API that allows a block to declare what features it supports. By adding some info to their [block.json file](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/), the block tells the system what kind of actions a user can do to it.
 
@@ -97,7 +80,7 @@ For example:
 
 The paragraph declares support for font size in its `block.json`. This means the block will show a UI control for users to tweak its font size, unless it's disabled by the theme (learn more about how themes can disable UI controls in [the `theme.json` reference](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/)). The system will also take care of setting up the UI control data (the font size of the block if it has one already assigned, the list of available font sizes to show), and will serialize the block data into HTML markup upon user changes (attach classes and inline styles appropriately).
 
-By using the block supports mechanism via `block.json`, the block author is able to create the same experience as before just by writing a couple of lines. Check the tutorials for adding block supports to [static](/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md) and [dynamic](/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md) blocks.
+By using the block supports mechanism via `block.json`, the block author is able to create the same experience as before just by writing a couple of lines. Check the [block supports api](/docs/reference-guides/block-api/block-supports.md) for adding block supports to static or dynamic blocks.
 
 Besides the benefit of having to do less work to achieve the same results, there's a few other advantages:
 
@@ -105,7 +88,7 @@ Besides the benefit of having to do less work to achieve the same results, there
 -   the block will use the UI controls other blocks use for the same styles, creating a more coherent user experience
 -   the UI controls in use by the block will be automatically updated as they are improved, without the block author having to do anything
 
-#### Current limitations of the Block Supports API
+### Current limitations of the Block Supports API
 
 While the Block Supports API provides value, it also comes with some limitations a block author needs to be aware of. To better visualize what they are, let's run with the following example of a table block:
 
@@ -142,7 +125,7 @@ The block supports API only serializes the font size value to the wrapper, resul
 
 This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress.
 
-While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example:
+While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example:
 
 ```json
 {
@@ -151,7 +134,7 @@ While work continues in that proposal, there's an escape hatch, an experimental
 	"supports": {
 		"typography": {
 			"fontSize": true,
-			"__experimentalSkipSerialization": true
+			"skipSerialization": true
 		}
 	}
 }
@@ -159,7 +142,7 @@ While work continues in that proposal, there's an escape hatch, an experimental
 
 This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress.
 
-Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
+Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
 
 To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected.
 
@@ -171,7 +154,7 @@ To enable for a _single_ property only, you may use an array to declare which pr
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalSkipSerialization": [ "fontSize" ]
+			"skipSerialization": [ "fontSize" ]
 		}
 	}
 }
@@ -179,7 +162,7 @@ To enable for a _single_ property only, you may use an array to declare which pr
 
 Support for this feature was [added in this PR](https://github.com/WordPress/gutenberg/pull/36293).
 
-### Global styles
+## Global styles
 
 Global Styles refers to a mechanism that generates site-wide styles. Unlike the block styles described in the previous section, these are not serialized into the post content and are not attached to the block HTML. Instead, the output of this system is a new stylesheet with id `global-styles-inline-css`.
 
@@ -195,19 +178,19 @@ The process of generating the stylesheet has, in essence, three steps:
 2. Consolidate data: the structured information from different origins -WordPress defaults, theme, and user- is normalized and merged into a single structure.
 3. Convert data into a stylesheet: convert the internal representation into CSS style rules and enqueue them as a stylesheet.
 
-#### Gather data
+### Gather data
 
 The data can come from three different origins: WordPress defaults, the active theme, or the user. All three of them use the same [`theme.json` format](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/).
 
 Data from WordPress and the active theme is retrieved from the corresponding `theme.json` file. Data from the user is pulled from the database, where it's stored after the user saves the changes they did via the global styles sidebar in the site editor.
 
-#### Consolidate data
+### Consolidate data
 
 The goal of this phase is to build a consolidated structure.
 
 There are two important processes going on in this phase. First, the system needs to normalize all the incoming data, as different origins may be using different versions of the `theme.json` format. For example, a theme may be using [v1](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-v1/) while the WordPress base is using [the latest version](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/). Second, the system needs to decide how to merge the input into a single structure. This will be the focus of the following sections.
 
-##### Styles
+#### Styles
 
 Different parts of the incoming `theme.json` structure are treated differently. The data present in the `styles` section is blended together following this logic: user data overrides theme data, and theme data overrides WordPress data.
 
@@ -263,7 +246,7 @@ The result after the consolidation would be:
 }
 ```
 
-##### Settings
+#### Settings
 
 The `settings` section works differently than styles. Most of the settings are only used to configure the editor and have no effect on the global styles. Only a few of them are part of the resulting stylesheet: the presets.
 
@@ -329,11 +312,11 @@ The result after the consolidation would be:
 }
 ```
 
-#### From data to styles
+### From data to styles
 
 The last phase of generating the stylesheet is converting the consolidated data into CSS style rules.
 
-##### Styles to CSS rules
+#### Styles to CSS rules
 
 The `styles` section can be thought of as a structured representation of CSS rules, each chunk representing a CSS rule:
 
@@ -402,7 +385,7 @@ p {
 }
 ```
 
-##### Settings to CSS rules
+#### Settings to CSS rules
 
 From the `settings` section, all the values of any given presets will be converted to a CSS Custom Property that follows this naming structure: `--wp--preset--<category>-<slug>`. The selectors follow the same rules described in the styles section above.
 
@@ -480,89 +463,89 @@ In addition to the CSS Custom Properties, all presets but duotone generate CSS c
 .wp-block-site-title .has-foreground-border-color { border-color: var(--wp--preset--color--foreground) !important; }
 ```
 
-#### Current limitations of the Global Styles API
+### Current limitations of the Global Styles API
 
-##### 1. **Setting a different CSS selector for blocks requires server-registration**
+#### 1. **Setting a different CSS selector for blocks requires server-registration**
 
 By default, the selector assigned to a block is `.wp-block-<block-name>`. However, blocks can change this should they need. They can provide a CSS selector via the `__experimentalSelector` property in its `block.json`.
 
 If blocks do this, they need to be registered in the server using the `block.json`, otherwise, the global styles code doesn't have access to that information and will use the default CSS selector for the block.
 
-##### 2. **Can't target different HTML nodes for different styles**
+#### 2. **Can't target different HTML nodes for different styles**
 
 Every chunk of styles can only use a single selector.
 
-This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
+This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
 
-##### 3. **Only a single property per block**
+#### 3. **Only a single property per block**
 
 Similarly to block supports, there can be only one instance of any style in use by the block. For example, the block can only have a single font size. See related "Current limitations of block supports".
 
-##### 4. **Only blocks using block supports are shown in the Global Styles UI**
+#### 4. **Only blocks using block supports are shown in the Global Styles UI**
 
 The global styles UI in the site editor has a screen for per-block styles. The list of blocks is generated dynamically using the block supports from the `block.json` of blocks. If a block wants to be listed there, it needs to use the block supports mechanism.
 
-### Layout styles
+## Layout styles
 
 In addition to styles at the individual block level and in global styles, there is the concept of layout styles that are output for both blocks-based and classic themes.
 
-The layout block support is an experimental approach for outputting common layout styles that are shared between blocks that are used for creating layouts. Layout styles are useful for providing common styling for any block that is a container for other blocks. Examples of blocks that depend on these layout styles include Group, Row, Columns, Buttons, and Social Icons.
-
-While the feature is part of WordPress core, it is still flagged as experimental in the sense that the features and output are still undergoing active development. It is therefore not yet a stable feature from the perspective of 3rd party blocks, as the API is likely to change. The feature is enabled in core blocks via the `__experimentalLayout` setting under `supports` in a block's `block.json` file.
+The layout block support outputs common layout styles that are shared between blocks used for creating layouts. Layout styles are useful for providing common styling for any block that is a container for other blocks. Examples of blocks that depend on these layout styles include Group, Row, Columns, Buttons, and Social Icons. The feature is enabled in core blocks via the `layout` setting under `supports` in a block's `block.json` file.
 
 There are two primary places where Layout styles are output:
 
-#### Base layout styles
+### Base layout styles
 
 Base layout styles are those styles that are common to all blocks that opt in to a particular layout type. Examples of common base layout styling include setting `display: flex` for blocks that use the Flex layout type (such as Buttons and Social Icons), and providing default max-width for constrained layouts.
 
 Base layout styles are output from within [the main PHP class](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/class-wp-theme-json.php) that handles global styles, and form part of the global styles stylesheet. In order to provide support for core blocks in classic themes, these styles are always output, irrespective of whether the theme provides its own `theme.json` file.
 
-Common layout definitions are stored in [the core `theme.json` file](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/theme.json), but are not intended to be extended or overridden by themes.
+Common layout definitions are stored in [the core layout block support file](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php).
 
-#### Individual layout styles
+### Individual layout styles
 
-When a block that opts in to the experimental layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php):
+When a block that opts in to layout support is rendered, two things are processed and added to the output via [`layout.php`](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/layout.php):
 
-- Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification.
-- Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/).
+-   Semantic class names are added to the block markup to indicate which layout settings are in use. For example, `is-layout-flow` is for blocks (such as Group) that use the default/flow layout, and `is-content-justification-right` is added when a user sets a block to use right justification.
+-   Individual styles are generated for non-default layout values that are set on the individual block being rendered. These styles are attached to the block via a container class name using the form `wp-container-$id` where the `$id` is a [unique number](https://developer.wordpress.org/reference/functions/wp_unique_id/).
 
-#### Available layout types
+### Available layout types
 
-There are currently three layout types in use:
+There are currently four layout types in use:
 
-* Default/Flow: Items are stacked vertically. The parent container block is set to `display: flow` and the spacing between children is handled via vertical margins.
-* Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
-* Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
+-   Default/Flow: Items are stacked vertically. The parent container block's display value isn't specified, so that it may use the default value for that HTML element. For most elements that will usually be `block`. The spacing between children is handled via vertical margins.
+-   Constrained: Items are stacked vertically, using the same spacing logic as the Flow layout. Features constrained widths for child content, outputting widths for standard content size and wide size. Defaults to using global `contentSize` and `wideSize` values set in `settings.layout` in the `theme.json`.
+-   Flex: Items are displayed using a Flexbox layout. Defaults to a horizontal orientation. Spacing between children is handled via the `gap` CSS property.
+-   Grid: Items are displayed using a Grid layout. Defaults to an `auto-fill` approach to column generation but can also be set to a fixed number of columns. Spacing between children is handled via the `gap` CSS property.
 
-For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it).
+For controlling spacing between blocks, and enabling block spacing controls see: [What is blockGap and how can I use it?](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/#what-is-blockgap-and-how-can-i-use-it).
 
-#### Targeting layout or container blocks from themes
+### Targeting layout or container blocks from themes
 
 The layout block support is designed to enable control over layout features from within the block and site editors. Where possible, try to use the features of the blocks to determine particular layout requirements rather than relying upon additional stylesheets.
 
-For themes that wish to target container blocks in order to add or adjust particular styles, the block's class name is often the best class name to use. Class names such as `wp-block-group` or `wp-block-columns` are usually reliable class names for targeting a particular block.
+For themes that wish to target container blocks in order to add or adjust particular styles, the block's class name is often the best class name to use. Class names such as `wp-block-group` or `wp-block-columns` are usually reliable class names for targeting a particular block. In addition to block and layout classnames, there is also a classname composed of block and layout together: for example, for a Group block with a constrained layout it will be `wp-block-group-is-layout-constrained`.
 
 For targeting a block that uses a particular layout type, avoid targeting `wp-container-` as container classes may not always be present in the rendered markup.
 
-##### Semantic class names
+#### Semantic class names
 
 Work is currently underway to expand stable semantic classnames in Layout block support output. The task is being discussed in [this issue](https://github.com/WordPress/gutenberg/issues/38719).
 
 The current semantic class names that can be output by the Layout block support are:
 
-* `is-layout-flow`: Blocks that use the Default/Flow layout type.
-* `is-layout-constrained`: Blocks that use the Constrained layout type.
-* `is-layout-flex`: Blocks that use the Flex layout type.
-* `wp-container-$id`: Where `$id` is a semi-random number. A container class that only exists when the block contains non-default Layout values. This class should not be used directly for any CSS targeting as it may or may not be present.
-* `is-horizontal`: When a block explicitly sets `orientation` to `horizontal`.
-* `is-vertical`: When a block explicitly sets `orientation` to `vertical`.
-* `is-content-justification-left`: When a block explicitly sets `justifyContent` to `left`.
-* `is-content-justification-center`: When a block explicitly sets `justifyContent` to `center`.
-* `is-content-justification-right`: When a block explicitly sets `justifyContent` to `right`.
-* `is-content-justification-space-between`: When a block explicitly sets `justifyContent` to `space-between`.
-* `is-nowrap`: When a block explicitly sets `flexWrap` to `nowrap`.
-
-#### Opting out of generated layout styles
+-   `is-layout-flow`: Blocks that use the Default/Flow layout type.
+-   `is-layout-constrained`: Blocks that use the Constrained layout type.
+-   `is-layout-flex`: Blocks that use the Flex layout type.
+-   `is-layout-grid`: Blocks that used the Grid layout type.
+-   `wp-container-$id`: Where `$id` is a semi-random number. A container class that only exists when the block contains non-default Layout values. This class should not be used directly for any CSS targeting as it may or may not be present.
+-   `is-horizontal`: When a block explicitly sets `orientation` to `horizontal`.
+-   `is-vertical`: When a block explicitly sets `orientation` to `vertical`.
+-   `is-content-justification-left`: When a block explicitly sets `justifyContent` to `left`.
+-   `is-content-justification-center`: When a block explicitly sets `justifyContent` to `center`.
+-   `is-content-justification-right`: When a block explicitly sets `justifyContent` to `right`.
+-   `is-content-justification-space-between`: When a block explicitly sets `justifyContent` to `space-between`.
+-   `is-nowrap`: When a block explicitly sets `flexWrap` to `nowrap`.
+
+### Opting out of generated layout styles
 
 Layout styles output is switched on by default because the styles are required by core structural blocks. However, themes can opt out of generated block layout styles while retaining semantic class name output by using the `disable-layout-styles` block support. Such themes will be responsible for providing all their own layout styles. See [the entry under Theme Support](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#disabling-base-layout-styles).
diff --git a/docs/explanations/faq.md b/docs/explanations/faq.md
deleted file mode 100644
index c56dd2e0c3c6ca..00000000000000
--- a/docs/explanations/faq.md
+++ /dev/null
@@ -1,479 +0,0 @@
-# Frequently Asked Questions
-
-What follows is a set of questions that have come up from the last few years of Gutenberg development. If you have any questions you’d like to have answered and included here, [just open up a GitHub issue](https://github.com/WordPress/gutenberg/issues) with your question. We’d love the chance to answer and provide clarity to questions we might not have thought to answer. For a look back historically, please see Matt's November 2018 post [WordPress 5.0: A Gutenberg FAQ](https://ma.tt/2018/11/a-gutenberg-faq/).
-
-
-## Table of Contents
-
-### The Gutenberg Project
-- [What is Gutenberg?](#what-is-gutenberg)
-- [What’s on the roadmap long term?](#whats-on-the-roadmap-long-term)
-- [When was Gutenberg started?](#when-was-gutenberg-started)
-- [When was Gutenberg merged into WordPress?](#when-was-gutenberg-merged-into-wordpress)
-- [WordPress is already the world's most popular publishing platform. Why change the editor at all?](#wordpress-is-already-the-worlds-most-popular-publishing-platform-why-change-the-editor-at-all)
-
-
-### The Editing Experience
-- [What are “blocks” and why are we using them?](#what-are-blocks-and-why-are-we-using-them)
-- [What is the writing experience like?](#what-is-the-writing-experience-like)
-- [Is Gutenberg built on top of TinyMCE?](#is-gutenberg-built-on-top-of-tinymce)
-- [Are there Keyboard Shortcuts for Gutenberg?](#are-there-keyboard-shortcuts-for-gutenberg)
-  * [Editor shortcuts](#editor-shortcuts)
-  * [Selection shortcuts](#selection-shortcuts)
-  * [Block shortcuts](#block-shortcuts)
-  * [Text formatting](#text-formatting)
-- [Does Gutenberg support columns?](#does-gutenberg-support-columns)
-- [Does Gutenberg support nested blocks?](#does-gutenberg-support-nested-blocks)
-- [Does drag and drop work for rearranging blocks?](#does-drag-and-drop-work-for-rearranging-blocks)
-
-### The Development Experience
-- [How do I make my own block?](#how-do-i-make-my-own-block)
-- [Does Gutenberg involve editing posts/pages in the front-end?](#does-gutenberg-involve-editing-posts-pages-in-the-front-end)
-- [Given Gutenberg is built in JavaScript, how do old meta boxes (PHP) work?](#given-gutenberg-is-built-in-javascript-how-do-old-meta-boxes-php-work)
-- [How can plugins extend the Gutenberg UI?](#how-can-plugins-extend-the-gutenberg-ui)
-- [Are Custom Post Types still supported?](#are-custom-post-types-still-supported)
-
-### Styles
-- [Can themes _style_ blocks?](#can-themes-_style_-blocks)
-- [How do block styles work in both the front-end and back-end?](#how-do-block-styles-work-in-both-the-front-end-and-back-end)
-- [What are block variations? Are they the same as block styles?](#what-are-block-variations-are-they-the-same-as-block-styles)
-- [How do editor styles work?](#how-do-editor-styles-work)
-
-### Compatibility
-- [What browsers does Gutenberg support?](#what-browsers-does-gutenberg-support)
-- [Should I be concerned that Gutenberg will make my plugin obsolete?](#should-i-be-concerned-that-gutenberg-will-make-my-plugin-obsolete)
-- [Is it possible to opt out of Gutenberg for my site?](#is-it-possible-to-opt-out-of-gutenberg-for-my-site)
-- [How do custom TinyMCE buttons work in Gutenberg?](#how-do-custom-tinymce-buttons-work-in-gutenberg)
-- [How do shortcodes work in Gutenberg?](#how-do-shortcodes-work-in-gutenberg)
-- [Should I move shortcodes to content blocks?](#should-i-move-shortcodes-to-content-blocks)
-
-### Miscellaneous
-- [Is Gutenberg made to be properly accessible?](#is-gutenberg-made-to-be-properly-accessible)
-- [How is data stored? I've seen HTML comments, what is their purpose?](#how-is-data-stored-ive-seen-html-comments-what-is-their-purpose)
-- [How can I parse the post content back out into blocks in PHP or JS?](#how-can-i-parse-the-post-content-back-out-into-blocks-in-php-or-js)
-
-----
-
-## What is Gutenberg?
-
-
-“Gutenberg” is the name of the project to create a new editor experience for WordPress — contributors have been working on it since January 2017 and it’s one of the most significant changes to WordPress in years. It’s built on the idea of using “blocks” to write and design posts and pages. This will serve as the foundation for future improvements to WordPress, including blocks as a way not just to design posts and pages, but also entire sites. The overall goal is to simplify the first-time user experience of WordPress — for those who are writing, editing, publishing, and designing web pages. The editing experience is intended to give users a better visual representation of what their post or page will look like when they hit publish. Originally, this was the kickoff goal:
-
-> The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
-
-Key takeaways include the following points:
-
--   Authoring richly laid-out posts is a key strength of WordPress.
--   By embracing blocks as an interaction paradigm, we can unify multiple different interfaces into one. Instead of learning how to write shortcodes and custom HTML, or pasting URLs to embed media, there's a common, reliable flow for inserting any kind of content.
--   “Mystery meat” refers to hidden features in software, features that you have to discover. WordPress already supports a large number of blocks and 30+ embeds, so let's surface them.
-
-Gutenberg is developed on [GitHub](https://github.com/WordPress/gutenberg) under the WordPress organization. The block editor has been available in core WordPress since 5.0. If you want to test upcoming features from Gutenberg project, it is [available in the plugin repository](https://wordpress.org/plugins/gutenberg/).
-
-## What’s on the roadmap long term?
-
-There are four phases of Gutenberg which you can see on the [official WordPress roadmap](https://wordpress.org/about/roadmap/). As of writing this, we’re currently in phase 2:
-
-1. Easier Editing — Already available in WordPress since 5.0, with ongoing improvements.
-2. Customization — Full Site editing, Block Patterns, Block Directory, Block based themes.
-3. Collaboration — A more intuitive way to co-author content
-4. Multi-lingual — Core implementation for Multi-lingual sites
-
-## When was Gutenberg started?
-
-The editor focus started in early 2017 with the first three months spent designing, planning, prototyping, and testing prototypes, to help us inform how to approach this project. The first plugin was launched during WordCamp Europe in June 2017.
-
-## When was Gutenberg merged into WordPress?
-
-Gutenberg was first merged into [WordPress 5.0](https://wordpress.org/news/2018/12/bebo/) in December 2018. See [the versions in WordPress page](https://developer.wordpress.org/block-editor/principles/versions-in-wordpress/) for a complete list of Gutenberg plugin versions merged into WordPress core releases.
-
-## WordPress is already the world's most popular publishing platform. Why change the editor at all?
-
-The Editor is where most of the action happens in WordPress’s daily use, and it was a place where we could polish and perfect the block experience in a contained environment. Further, as an open-source project, we believe that it is critical for WordPress to continue to innovate and keep working to make the core experience intuitive and enjoyable for all users. As a community project, Gutenberg has the potential to do just that, and we’re excited to pursue this goal together. If you’d like to test, contribute, or offer feedback, we welcome you to [share what you find on GitHub](https://github.com/WordPress/gutenberg/issues).
-
-## What are “blocks” and why are we using them?
-
-The classic WordPress editor is an open text window—it’s always been a wonderful blank canvas for writing, but when it comes to building posts and pages with images, multimedia, embedded content from social media, polls, and other elements, it required a mix of different approaches that were not always intuitive:
-
--   Media library/HTML for images, multimedia and approved files.
--   Pasted links for embeds.
--   Shortcodes for specialized assets from plugins.
--   Featured images for the image at the top of a post or page.
--   Excerpts for subheadings.
--   Widgets for content on the side of a page.
-
-As we thought about these uses and how to make them obvious and consistent, we began to embrace the concept of “blocks.” All of the above items could be blocks: easy to search and understand, and easy to dynamically shift around the page. The block concept is very powerful, and when designed thoughtfully, can offer an outstanding editing and publishing experience. Ultimately, the idea with blocks is to create a new common language across WordPress, a new way to connect users to plugins, and replace a number of older content types — things like shortcodes and widgets — that one usually has to be well-versed in the idiosyncrasies of WordPress to understand.
-
-## What is the writing experience like?
-
-Our goal with Gutenberg is not just to create a seamless post- and page-building experience. We also want to ensure that it provides a seamless writing experience. To test this out yourself, [head to this demo and give it a try](https://wordpress.org/gutenberg/)!
-
-## Is Gutenberg built on top of TinyMCE?
-
-No. [TinyMCE](https://www.tinymce.com/) is only used for the "Classic" block.
-
-## Are there Keyboard Shortcuts for Gutenberg?
-
-Yes. There are a lot! There is a help modal showing all available keyboard shortcuts.
-
-You can see the whole list going to the top right corner menu of the new editor and clicking on “Keyboard Shortcuts” (or by using the keyboard shortcut <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd> on Linux/Windows and <kbd>⌃</kbd><kbd>⌥</kbd><kbd>H</kbd> on macOS).
-
-This is the canonical list of keyboard shortcuts:
-
-### Editor shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Display keyboard shortcuts.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>H</kbd></td>
-		</tr>
-		<tr>
-			<td>Save your changes.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
-			<td><kbd>⌘</kbd><kbd>S</kbd></td>
-		</tr>
-		<tr>
-			<td>Undo your last changes.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⌘</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Redo your last undo.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Show or hide the settings sidebar.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
-		</tr>
-		<tr>
-			<td>Open the list view menu.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>O</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>O</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the next part of the editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>`</kbd></td>
-			<td><kbd>⌃</kbd><kbd>`</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the previous part of the editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⇧</kbd><kbd>`</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the next part of the editor (alternative).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>N</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>N</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the previous part of the editor (alternative).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>P</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>P</kbd></td>
-		</tr>
-		<tr>
-			<td>Navigate to the nearest toolbar.</td>
-			<td><kbd>Alt</kbd>+<kbd>F10</kbd></td>
-			<td><kbd>⌥</kbd><kbd>F10</kbd></td>
-		</tr>
-		<tr>
-			<td>Switch between visual editor and code editor.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>M</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>M</kbd></td>
-		</tr>
-		<tr>
-			<td>Toggle fullscreen mode.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>F</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>F</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-### Selection shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Select all text when typing. Press again to select all blocks.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>A</kbd></td>
-			<td><kbd>⌘</kbd><kbd>A</kbd></td>
-		</tr>
-		<tr>
-			<td>Clear selection.</td>
-			<td><kbd>Esc</kbd></td>
-			<td><kbd>Esc</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-### Block shortcuts
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Duplicate the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>D</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove the selected block(s).</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>Z</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>Z</kbd></td>
-		</tr>
-		<tr>
-			<td>Insert a new block before the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>T</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>T</kbd></td>
-		</tr>
-		<tr>
-			<td>Insert a new block after the selected block(s).</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Y</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>Y</kbd></td>
-		</tr>
-		<tr>
-			<td>Move the selected block(s) up.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>T</kbd></td>
-		</tr>
-		<tr>
-			<td>Move the selected block(s) down.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>Y</kbd></td>
-			<td><kbd>⌥</kbd><kbd>⌘</kbd><kbd>⇧</kbd><kbd>Y</kbd></td>
-		</tr>
-		<tr>
-			<td>Change the block type after adding a new paragraph.</td>
-			<td><kbd>/</kbd></td>
-			<td><kbd>/</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove multiple selected blocks.</td>
-			<td></td>
-			<td><kbd>del</kbd><kbd>backspace</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-### Text formatting
-
-<table>
-	<thead>
-		<tr>
-			<th>Shortcut description</th>
-			<th>Linux/Windows shortcut</th>
-			<th>macOS shortcut</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>Make the selected text bold.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>B</kbd></td>
-			<td><kbd>⌘</kbd><kbd>B</kbd></td>
-		</tr>
-		<tr>
-			<td>Make the selected text italic.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>I</kbd></td>
-			<td><kbd>⌘</kbd><kbd>I</kbd></td>
-		</tr>
-		<tr>
-			<td>Underline the selected text.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>U</kbd></td>
-			<td><kbd>⌘</kbd><kbd>U</kbd></td>
-		</tr>
-		<tr>
-			<td>Convert the selected text into a link.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>K</kbd></td>
-			<td><kbd>⌘</kbd><kbd>K</kbd></td>
-		</tr>
-		<tr>
-			<td>Remove a link.</td>
-			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd></td>
-			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd></td>
-		</tr>
-		<tr>
-			<td>Add a strikethrough to the selected text.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>D</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>D</kbd></td>
-		</tr>
-		<tr>
-			<td>Display the selected text in a monospaced font.</td>
-			<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>X</kbd></td>
-			<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>X</kbd></td>
-		</tr>
-	</tbody>
-</table>
-
-Here is a brief animation illustrating how to find and use the keyboard shortcuts:
-
-![GIF showing how to access keyboard shortcuts](https://make.wordpress.org/core/files/2020/07/keyboard-shortcuts.gif)
-
-## Does Gutenberg support columns?
-
-Yes, a columns block is available in Gutenberg.
-
-## Does Gutenberg support nested blocks?
-
-Yes, it is supported. You can have multiple levels of nesting – blocks within blocks within blocks. See the [Nested Block Tutorial](https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/) for more information.
-
-## Does drag and drop work for rearranging blocks?
-
-Yes, you can drag and drop blocks to rearrange their order.
-
-
-## How do I make my own block?
-
-The best place to start is the [Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/).
-
-## Does Gutenberg involve editing posts/pages in the front-end?
-
-No, we are designing Gutenberg primarily as a replacement for the post and page editing screens. That said, front-end editing is often confused with an editor that looks exactly like the front end. And that is something that Gutenberg will allow as themes customize individual blocks and provide those styles to the editor. Since content is designed to be distributed across so many different experiences—from desktop and mobile to full-text feeds and syndicated article platforms—we believe it's not ideal to create or design posts from just one front-end experience.
-
-## Given Gutenberg is built in JavaScript, how do old meta boxes (PHP) work?
-
-See the [Meta Box Tutorial](https://developer.wordpress.org/block-editor/how-to-guides/metabox/) for more information on using Meta boxes with the new block editor.
-
-## How can plugins extend the Gutenberg UI?
-
-The main extension point we want to emphasize is creating new blocks. Blocks are added to the block editor using plugins, see the [Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-stared/create-block/) to get started.
-
-## Are Custom Post Types still supported?
-
-Indeed. There are multiple ways in which custom post types can leverage Gutenberg. The plan is to allow them to specify the blocks they support, as well as defining a default block for the post type. It's not currently the case, but if a post type disables the content field, the “advanced” section at the bottom would fill the page.
-
-## Does Gutenberg support columns?
-
-Yes, a columns block is available in Gutenberg.
-
-## Does Gutenberg support nested blocks?
-
-Yes, it is supported. You can have multiple levels of nesting – blocks within blocks within blocks. See the [Nested Block Tutorial](/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md) for more information.
-
-## Does drag and drop work for rearranging blocks?
-
-Yes, you can drag and drop blocks to rearrange their order.
-
-
-## Can themes _style_ blocks?
-
-Yes. Blocks can provide their own styles, which themes can add to or override, or they can provide no styles at all and rely fully on what the theme provides.
-
-## How do block styles work in both the front-end and back-end?
-
-Blocks are able to provide base structural CSS styles, and themes can add styles on top of this. Some blocks, like a Separator (`<hr/>`), likely don't need any front-end styles, while others, like a Gallery, need a few.
-
-Other features, like the new _wide_ and _full-wide_ alignment options, are simply CSS classes applied to blocks that offer this alignment. We are looking at how a theme can opt in to this feature, for example using `add_theme_support`.
-
-This is currently a work in progress and we recommend reviewing the [block based theme documentation](/docs/how-to-guides/themes/block-theme-overview.md) to learn more.
-
-## What are block variations? Are they the same as block styles?
-
-No, [block variations](/docs/reference-guides/block-api/block-variations.md) are different versions of a single base block, sharing a similar functionality, but with slight differences in their implementation, or settings (attributes, InnerBlocks,etc). Block variations are transparent for users, and once there is a registered block variation, it will appear as a new block. For example, the `embed` block registers different block variations to embed content from specific providers.
-
-Meanwhile, [block styles](/docs/reference-guides/filters/block-filters.md#block-style-variations) allow you to provide alternative styles to existing blocks, and they work by adding a className to the block’s wrapper. Once a block has registered block styles, a block style selector will appear in its sidebar so that users can choose among the different registered styles.
-
-## How do editor styles work?
-
-Regular editor styles are opt-in and work as is in most cases. Themes can also load extra stylesheets by using the following hook:
-
-```php
-function gutenbergtheme_editor_styles() {
-    wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
-}
-add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );
-```
-
-_See:_ [Editor Styles](/docs/how-to-guides/themes/theme-support.md#editor-styles)
-
-## What browsers does Gutenberg support?
-
-Gutenberg works in modern browsers, and Internet Explorer 11.
-
-Our [list of supported browsers can be found in the Make WordPress handbook](https://make.wordpress.org/core/handbook/best-practices/browser-support/). By “modern browsers” we generally mean the _current and past two versions_ of each major browser.
-
-## Should I be concerned that Gutenberg will make my plugin obsolete?
-
-The goal of Gutenberg is not to put anyone out of business. It's to evolve WordPress so there's more business to be had in the future, for everyone.
-
-Aside from enabling a rich post and page building experience, a meta goal is to _move WordPress forward_ as a platform. Not only by modernizing the UI, but by modernizing the foundation.
-
-We realize it's a big change. We also think there will be many new opportunities for plugins. WordPress is likely to ship with a range of basic blocks, but there will be plenty of room for highly tailored premium plugins to augment existing blocks or add new blocks to the mix.
-
-## Is it possible to opt out of Gutenberg for my site?
-
-There is a “Classic” block, which is virtually the same as the current editor, except in block form.
-
-There is also the [Classic Editor plugin](https://wordpress.org/plugins/classic-editor/) which restores the previous editor, see the plugin for more information. The WordPress Core team has committed to supporting the Classic Editor plugin [until December 2021](https://make.wordpress.org/core/2018/11/07/classic-editor-plugin-support-window/).
-
-## How do custom TinyMCE buttons work in Gutenberg?
-
-Custom TinyMCE buttons still work in the “Classic” block, which is a block version of the classic editor you know today.
-
-Gutenberg comes with a new universal inserter tool, which gives you access to every block available, searchable, sorted by recency and categories. This inserter tool levels the playing field for every plugin that adds content to the editor, and provides a single interface to learn how to use.
-
-## How do shortcodes work in Gutenberg?
-
-Shortcodes continue to work as they do now.
-
-However we see the block as an evolution of the `[shortcode]`. Instead of having to type out code, you can use the universal inserter tray to pick a block and get a richer interface for both configuring the block and previewing it. We would recommend people eventually upgrade their shortcodes to be blocks.
-
-## Should I move shortcodes to content blocks?
-
-We think so for a variety of reasons including but not limited to:
-
--   Blocks have visual editing built-in which creates a more rich, dynamic experience for building your site.
--   Blocks are simply html and don’t persist things the browser doesn't understand on the frontend. In comparison, if you disable a plugin that powers a shortcode, you end up with strange visuals on the frontend (often just showing the shortcode in plain text).
--   Blocks will be discovered more readily with the launch of the block directory in a way shortcodes never could be allowing for more people to get more functionality.
-
-Ultimately, Blocks are designed to be visually representative of the final look, and, with the launch of the Block Directory in 5.5, they will become the expected way in which users will discover and insert content in WordPress.
-
-## Is Gutenberg made to be properly accessible?
-
-Accessibility is not an afterthought. Not every aspect of Gutenberg is accessible at the moment. You can check logged issues [here](https://github.com/WordPress/gutenberg/labels/Accessibility%20%28a11y%29). We understand that WordPress is for everyone, and that accessibility is about inclusion. This is a key value for us.
-
-If you would like to contribute to the accessibility of Gutenberg, we can always use more people to test and contribute.
-
-## How is data stored? I've seen HTML comments, what is their purpose?
-
-Our approach—as outlined in [the technical overview introduction](https://make.wordpress.org/core/2017/01/17/editor-technical-overview/)—is to augment the existing data format in a way that doesn’t break the decade-and-a-half-fabric of content WordPress provides. In other terms, this optimizes for a format that prioritizes human readability (the HTML document of the web) and easy-to-render-anywhere over a machine convenient file (JSON in post-meta) that benefits the editing context primarily.
-
-This also [gives us the flexibility](https://github.com/WordPress/gutenberg/issues/1516) to store those blocks that are inherently separate from the content stream (reusable pieces like widgets or small post type elements) elsewhere, and just keep token references for their placement.
-
-We suggest you look at the [Gutenberg key concepts](/docs/getting-started/architecture/key-concepts.md) to learn more about how this aspect of the project works.
-
-## How can I parse the post content back out into blocks in PHP or JS?
-
-In JS:
-
-```js
-var blocks = wp.blocks.parse( postContent );
-```
-
-In PHP:
-
-```php
-$blocks = parse_blocks( $post_content );
-```
-
-
diff --git a/docs/explanations/history.md b/docs/explanations/history.md
index db2b7518bd8969..c5d8cbf8554f5a 100644
--- a/docs/explanations/history.md
+++ b/docs/explanations/history.md
@@ -2,22 +2,35 @@
 
 A set of links and resources covering the history of the Gutenberg project, how it got started, sources of inspiration, and initial thinking.
 
-## Survey
-
-There was a survey done: [https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/](https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/)
-
 ## Inspiration
 
-This includes a list of historical articles and influences on the Gutenberg project.
+A community [Editor Experience Survey](https://make.wordpress.org/core/2017/04/07/editor-experience-survey-results/) was conducted in early 2017, which reinforced the need for a new editing experience in WordPress.
 
--   LivingDocs: [https://beta.livingdocs.io/articles](https://beta.livingdocs.io/articles)
--   Parrot: [https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/](https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/)
+This is a list of historical articles and products that influenced the Gutenberg project and the creation of the Block Editor.
+
+-   [Parrot: an integrated site builder and editor concept for WordPress](https://intenseminimalism.com/2017/parrot-an-integrated-site-builder-and-editor-concept-for-wordpress/)
+-   LivingDocs
 -   Apple Keynote
 -   Slack
 -   Google Sites v2
 
-## Blog posts by the team
-
--   Gutenberg tag on make/core: updates and much more: [https://make.wordpress.org/core/tag/gutenberg/](https://make.wordpress.org/core/tag/gutenberg/)
--   Suggested revised timeline: [https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/](https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/)
--   Discovering Gutenberg: [https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/](https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/)
+### Gutenberg updates and feature overviews
+
+-   [Themes of the Future](https://wordpress.tv/2021/01/21/eileen-violini-themes-of-the-future-the-new-frontier-of-gutenberg-block-based-themes-and-theme-development/), Eileen Violini (January 2021)
+-   [Status Check: Site Editing & Customization](https://make.wordpress.org/core/2020/12/10/status-check-site-editing-and-customization/), Matías Ventura Bausero (December 2020)
+-   [State of the Word 2020 FSE Demo](https://youtu.be/QI3qCoiuG3w?t=1279), Matt Mullenweg (December 2020)
+-   [Embrace the Modularity](https://riad.blog/2020/01/28/embrace-the-modularity/), Riad Benguella (January 2020)
+-   [State of the Word 2019 Gutenberg Demo](https://www.youtube.com/watch?v=LezbkeV059Q), Matt Mullenweg (December 2019)
+-   [Growing JavaScript Skills with WordPress](https://gziolo.pl/2019/07/15/growing-javascript-skills-with-wordpress/) at JavaScript for WordPress conference (July 2019)
+-   [Beyond Gutenberg](https://wordpress.tv/2018/07/09/matias-ventura-beyond-gutenberg/), Matías Ventura Bausero (July 2018)
+-   [Anatomy of a block: Gutenberg design patterns](https://wordpress.tv/2018/07/08/tammie-lister-anatomy-of-a-block-gutenberg-design-patterns/), Tammie Lister (July 2018)
+-   [The Language of Gutenberg](https://lamda.blog/2018/04/22/the-language-of-gutenberg/), Miguel Fonseca (April 2018)
+-   [State of the Word 2017 Gutenberg Demo](https://youtu.be/XOY3ZUO6P0k?t=2100), Matt Mullenweg with demo by Matías Ventura Bausero (December 2017)
+-   [Gutenberg, or the Ship of Theseus](https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/), Matías Ventura Bausero (October 2017)
+-   [We Called It Gutenberg for a Reason](https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/), Matt Mullenweg (August 2017)
+-   [How Gutenberg is Changing WordPress Development](https://riad.blog/2017/10/06/how-gutenberg-is-changing-wordpress-development/), Riad Benguella (October 2017)
+-   [Revised suggested roadmap for Gutenberg and Customization](https://make.wordpress.org/core/2017/08/11/revised-suggested-roadmap-for-gutenberg-and-customization/), Tammie Lister (August 2017)
+-   [Discovering Gutenberg and next steps](https://make.wordpress.org/core/2017/08/08/discovering-gutenberg-and-next-steps/), Tammie Lister (August 2017)
+-   [How Gutenberg Will Shape the Future of WordPress](https://www.linkedin.com/pulse/gutenberg-morten-rand-hendriksen/), Morten Rand-Henrikson (August 2017)
+
+You can also view this [Index of Gutenberg related posts](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/) for more resources.
\ No newline at end of file
diff --git a/docs/explanations/user-interface/block-design.md b/docs/explanations/user-interface/block-design.md
index 5df99b5398867f..66411744fa5663 100644
--- a/docs/explanations/user-interface/block-design.md
+++ b/docs/explanations/user-interface/block-design.md
@@ -64,7 +64,7 @@ Group toolbar controls in logical segments. Don't add a segment for each.
 
 ![A screenshot comparing a block toolbar with good vs. bad toolbar segment groupings.](https://make.wordpress.org/design/files/2021/03/docs__block-toolbar-do-dont.png)
 
-### Block Identification
+### Block identification
 
 A block should have a straightforward, short name so users can easily find it in the block library. A block named "YouTube" is easy to find and understand. The same block, named "Embedded Video (YouTube)", would be less clear and harder to find in the block library.
 
@@ -74,7 +74,7 @@ When referring to a block in documentation or UI, use title case for the block t
 -   Latest Posts block
 -   Media & Text block
 
-Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://material.io/tools/icons/). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration.
+Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://fonts.google.com/icons). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration.
 
 ![A screenshot of the block library with concise block names](https://developer.wordpress.org/files/2022/01/blocks-do.png)
 **Do:**
@@ -84,7 +84,7 @@ Use concise block names.
 **Don't:**
 Avoid long, multi-line block names.
 
-### Block Description
+### Block description
 
 Every block should include a description that clearly explains the block's function. The description will display in the Settings Sidebar.
 
@@ -116,7 +116,7 @@ Provide an instructive placeholder state.
 **Don't:**
 Avoid branding and relying on the title alone to convey instructions.
 
-### Selected and Unselected States
+### Selected and unselected states
 
 When unselected, your block should preview its content as closely to the front-end output as possible.
 
@@ -130,7 +130,7 @@ For controls that are essential for the operation of the block, provide them dir
 **Don't:**
 Do not put controls that are essential to the block in the sidebar, otherwise the block will appear non-functional to mobile users or desktop users who have dismissed the sidebar.
 
-### Advanced Block Settings
+### Advanced block settings
 
 The “Block” tab of the Settings Sidebar can contain additional block options and configuration. Keep in mind that a user can dismiss the sidebar and never use it. You should not put critical options in the Sidebar.
 
@@ -156,11 +156,11 @@ The most basic unit of the editor. The Paragraph block is a simple input field.
 
 ![Paragraph block](https://cldup.com/HVJe5bGZ8H-3000x3000.png)
 
-### Placeholder:
+#### Placeholder
 
 -   Simple placeholder text that reads “Type / to choose a block”. The placeholder disappears when the block is selected.
 
-### Selected state:
+#### Selected state
 
 -   Block Toolbar: Has a switcher to perform transformations to headings, etc.
 -   Block Toolbar: Has basic text alignments
@@ -172,11 +172,11 @@ Basic image block.
 
 ![Image block placeholder](https://cldup.com/w6FNywNsj1-3000x3000.png)
 
-### Placeholder:
+#### Placeholder
 
 -   A generic gray placeholder block with options to upload an image, drag and drop an image directly on it, or pick an image from the media library.
 
-### Selected state:
+#### Selected state
 
 -   Block Toolbar: Alignments, including wide and full-width if the theme supports it.
 -   Block Toolbar: Edit Image, to open the Media Library
@@ -185,7 +185,7 @@ Basic image block.
 
 ![Image Block](https://cldup.com/6YYXstl_xX-3000x3000.png)
 
-### Block settings:
+#### Block settings
 
 -   Has description: “They're worth 1,000 words! Insert a single image.”
 -   Has options for changing or adding alt text and adding additional custom CSS classes.
@@ -196,18 +196,18 @@ _Future improvements to the Image block could include getting rid of the media m
 
 ![Latest Post Block](https://cldup.com/8lyAByDpy_-3000x3000.png)
 
-### Placeholder:
+#### Placeholder
 
 Has no placeholder as it works immediately upon insertion. The default inserted state shows the last 5 posts.
 
-### Selected state:
+#### Selected state
 
 -   Block Toolbar: Alignments
 -   Block Toolbar: Options for picking list view or grid view
 
 _Note that the Block Toolbar does not include the Block Chip in this case, since there are no similar blocks to switch to._
 
-### Block settings:
+#### Block settings
 
 -   Has description: “Display a list of your most recent posts.”
 -   Has options for post order, narrowing the list by category, changing the default number of posts to show, and showing the post date.
diff --git a/docs/explanations/user-interface/design-resources.md b/docs/explanations/user-interface/design-resources.md
index 235951e4839e98..4a2a78f6822a5d 100644
--- a/docs/explanations/user-interface/design-resources.md
+++ b/docs/explanations/user-interface/design-resources.md
@@ -2,7 +2,7 @@
 
 ## Figma
 
-The [WordPress Design team](https://make.wordpress.org/design/) uses [Figma](https://www.figma.com/) to collaborate and share work. If you'd like to contribute, join the [#design channel](https://app.slack.com/client/T024MFP4J/C02S78ZAL) in [Slack](https://make.wordpress.org/chat/) and ask the team to set you up with a free Figma account. This will give you access to a helpful library of components used in WordPress. They are stable, fully supported, up to date, and ready for use in designs and prototypes.
+The [WordPress Design team](https://make.wordpress.org/design/) uses [Figma](https://www.figma.com/) to collaborate and share work. If you'd like to contribute, you can use [the WordPress Figma design library](https://make.wordpress.org/design/handbook/get-involved/tools-figma/) to make mockups. You can also join the [#design channel](https://app.slack.com/client/T024MFP4J/C02S78ZAL) in [Slack](https://make.wordpress.org/chat/) and if you'd like to ask for advice or otherwise. Figma accounts are free, and with one you can use components from the shared libraries, or duplicate files to your draft if you need to make edits. Full edit access to the WordPress libraries is paid and reserved for the design team.
 
 ### How to contribute
 
diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md
index 9c32f67239cc54..f1b5999ae31472 100644
--- a/docs/getting-started/README.md
+++ b/docs/getting-started/README.md
@@ -1,60 +1,41 @@
 # Getting Started
 
-Welcome! Let's get started building with blocks. Blocks are at the core of extending WordPress. You can create custom blocks, your own block patterns, or combine them together to build a block theme. At a high level, here are a few ways to begin your journey but read on to explore more:
+Welcome to the Getting Started documentation. From setting up your development environment and building your first block to understanding the fundamentals, this section is the perfect starting point if you are new to block development or want to improve your skills.
 
-- Learn more about where this work is going by [reviewing the long term roadmap](https://wordpress.org/about/roadmap/).
-- Explore the [GitHub repo](https://github.com/WordPress/gutenberg/) to see the latest issues and PRs folks are working on, especially [Good First Issues](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22).
-- Join the [Slack community](https://make.wordpress.org/chat/) to join meetings, ongoing conversations, and more. 
-- Take courses on how to use the block editor and more on [Learn WordPress](https://learn.wordpress.org/). 
-- Expand your knowledge by reviewing more developer docs at the overall [developer.wordpress.org resource](https://developer.wordpress.org/).
-- Subscribe to [updates on Make Core](https://make.wordpress.org/core/), the main site where ongoing project updates happen.
+## Navigating this chapter
 
-## Tutorials
+Use the following links to locate a topic within this chapter. If you have never built a block before, consider reading through the documentation in the order listed.
 
-[Development Environment](/docs/getting-started/devenv/README.md) - A guide to setup your local environment for JavaScript development for creating plugins, themes, and the tools you will need to extend WordPress or contribute to the block editor.
+- **[Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/):** Set up the right development environment to create blocks and get introduced to basic tools for block development such as [`wp-env`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/), [`create-block`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/), and [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/)
+- **[Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/):** Get a custom block up and running in less than one minute.
+- **[Tutorial: Build your first block](https://developer.wordpress.org/block-editor/getting-started/tutorial/):** Learn how to build a fully functional custom block from the ground up.
+- **[Fundamentals of Block Development](https://developer.wordpress.org/block-editor/getting-started/fundamentals/):** Learn the most relevant concepts in block development.
+- **[Glossary](https://developer.wordpress.org/block-editor/getting-started/glossary/):** A glossary of common terms you will encounter when working with the Block Editor.
+- **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/getting-started/faq/):** Common questions (and answers) that have come up from the last few years of Gutenberg's development. 
 
-[Create a Block Tutorial](/docs/getting-started/create-block/README.md) - Learn how to create your first block for the WordPress block editor.
+## Keeping up with the WordPress project
 
-[Full Site Editing](/docs/getting-started/full-site-editing.md) - Full Site Editing (FSE) is an umbrella project name for the collection of features that bring the experience and extendability of blocks to all parts of your site—from settings and styles, to templates and themes, and more.
+Once you have finished reviewing this chapter, you will have a solid understanding of blocks and how to develop for the Block Editor, but what's next? 
 
--   Learn [about using theme.json](/docs/how-to-guides/themes/theme-json.md) to define settings and styles for your theme.
+The WordPress project, and Gutenberg in particular, iterates quickly. Staying up-to-date on all the changes can be challenging. So, here are a few essential developer resources you should be aware of. Each person will have their own unique needs in keeping up with a project of this scale, so choose what's right for you.
 
--   [Create a Block Theme](/docs/how-to-guides/themes/create-block-theme.md) - Learn how block themes use blocks to build templates and the theme.json to provide styles.
--   [Convert as Classic Theme to a Block Theme](https://developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/) - Learn how to adopt various pieces of full site editing in your classic theme.
+- **[WordPress Roadmap](https://wordpress.org/about/roadmap/):** The high-level roadmap for WordPress and Gutenberg.
+- **[Make Core](https://make.wordpress.org/core/):** The primary blog for WordPress Core where all major project updates are posted.
+- **[WordPress Slack](https://make.wordpress.org/chat/):** The official Slack community for all WordPress contributors is the hub for team meetings, ongoing conversations, and more. Make sure to join the `#core` and `#core-editor` channels.
+- **[Gutenberg GitHub repository](https://github.com/WordPress/gutenberg/):** This is where all Block Editor development happens. Keeping a close eye on the repository will give you a real-time understanding of what’s being worked on by fellow contributors.
+- **[Keeping up with Gutenberg](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/):** A compilation of Gutenberg-related posts from the many [Make teams](https://make.wordpress.org/), including Core, Design, Meta, and Themes.
+- **["What's new in Gutenberg?"](https://make.wordpress.org/core/tag/gutenberg-new/):** Biweekly posts published on Make Core with each Gutenberg release. They are a great way to review the most relevant new features and the full changelog.
+- **["What's new for developers?"](https://developer.wordpress.org/news/):** Monthly posts on the WordPress Developer Blog that showcase the most important developer-related changes that happened in WordPress the previous month.
 
-## Ways to Stay Informed
+## Additional resources
 
-New features and changes are important to keep up to date on as the Gutenberg project continues. Each person will have their own unique needs in keeping up with a project of this scale. What follows is more of a catalogue of ways to keep up rather than a recommendation for how to do so. 
+For more resources on block development and extending the Block Editor, review the additional sections here in the Block Editor Handbook. Further practical examples are also available in the [block-development-examples](https://github.com/wptrainingteam/block-development-examples) GitHub repository.
 
-**Yearly:**
+If you are looking for more educational content, check out [Learn WordPress](https://learn.wordpress.org/), where you can find [tutorials](https://learn.wordpress.org/tutorials/), [courses](https://learn.wordpress.org/courses/), and [online workshops](https://learn.wordpress.org/online-workshops/). Here is a selection of current offerings:
 
-The [WordPress.org Roadmap](https://wordpress.org/about/roadmap/) with Four Phases of Gutenberg updated by project leadership. This is the highest level overview of the changes coming to WordPress.
-
-**Quarterly:**
-
-[Quarterly Updates](https://make.wordpress.org/updates/tag/quarterly-updates/) from Contribution Teams. These updates give an overview on what each team is working on, struggling with, and how to get involved.
-
-**Monthly:**
-
-[“What’s Next In Gutenberg?” posts](https://make.wordpress.org/core/tag/gutenberg-next/). These updates are wrangled by the Core Editor team and highlight areas of work aligned with the Gutenberg roadmap for contributors to help, how to get involved, and more. 
-
-[Block Based Themes Meeting](https://make.wordpress.org/themes/tags/block-based-meeting/). These meetings are currently wrangled in the #themereview Slack channel and are dedicated to sharing FSE changes that will specifically impact themes. Agendas and summaries are shared on the [Make Themes blog](https://make.wordpress.org/themes/). 
-
-**Biweekly:**
-
-[“What’s New In Gutenberg?” release posts](https://make.wordpress.org/core/tag/gutenberg-new/). These updates are wrangled by the Core Editor team and focus on what’s been released in each biweekly Gutenberg release. They include the most relevant features released and a full changelog.
-
-**Weekly:**
-
-[Core Editor meetings](https://make.wordpress.org/core/tag/core-editor-summary/). These meetings are wrangled by volunteer members in the #core-editor Slack channel. [Agendas](https://make.wordpress.org/core/tag/core-editor-summary/) and [summaries](https://make.wordpress.org/core/tag/core-editor-summary/) are shared on the [Make Core blog](https://make.wordpress.org/core/). They focus on task coordination and relevant discussions around Gutenberg releases. There is an Open Floor period in each chat where people can suggest topics to discuss.
-
-[Weekly Theme Related Gutenberg Updates](https://make.wordpress.org/themes/tags/gutenberg-themes-roundup/). These posts are focused on themes, including everything from current discussions to recent changes, as well as helpful resources for theme authors. 
-
-**Daily:**
-
-Checking in on [issues](https://github.com/WordPress/gutenberg/issues) and [PRs](https://github.com/WordPress/gutenberg/pulls) on GitHub. This will give you a nearly real-time understanding of what’s being worked on by the developers and designers. 
-
--   [Glossary](/docs/explanations/glossary.md)
--   [Frequently Asked Questions](/docs/explanations/faq.md)
--   [Project History](/docs/explanations/history.md)
--   [Outreach](/docs/getting-started/outreach.md)
+-   [Intro to Block Development: Build Your First Custom Block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/)
+-   [Converting a Shortcode to a Block](https://learn.wordpress.org/course/converting-a-shortcode-to-a-block/)
+-   [Using the WordPress Data Layer](https://learn.wordpress.org/course/using-the-wordpress-data-layer/)
+-   [Registering Block Patterns](https://learn.wordpress.org/workshop/registering-block-patterns/)
+-   [Intro to Gutenberg Block Development](https://learn.wordpress.org/workshop/intro-to-gutenberg-block-development/)
+-   [Intro to Publishing with the Block Editor](https://learn.wordpress.org/workshop/intro-to-publishing-with-the-block-editor/)
diff --git a/docs/getting-started/create-block/README.md b/docs/getting-started/create-block/README.md
deleted file mode 100644
index ae56e4b123f0e9..00000000000000
--- a/docs/getting-started/create-block/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Create a Block Tutorial
-
-Let's get you started creating your first block for the WordPress Block Editor. We will create a simple block that allows the user to type a message and style it.
-
-The tutorial includes setting up your development environment, tools, and getting comfortable with the new development model. If you are already comfortable, try the quick start below, otherwise step through whatever part of the tutorial you need.
-
-## Prerequisites
-
-The first thing you need is a development environment and tools. This includes setting up your WordPress environment, Node, NPM, and your code editor. If you need help, see the [setting up your development environment documentation](/docs/getting-started/devenv/README.md).
-
-## Quick Start
-
-The `@wordpress/create-block` package exists to create the necessary block scaffolding to get you started. See [create-block package documentation](https://www.npmjs.com/package/@wordpress/create-block) for additional features. This quick start assumes you have a development environment with node installed, and a WordPress site.
-
-From your plugins directory, to create your block run:
-
-```sh
-npx @wordpress/create-block gutenpride --template @wordpress/create-block-tutorial-template
-```
-
-The [npx command](https://docs.npmjs.com/cli/v8/commands/npx) runs a command from a remote package, in this case our create-block package that will create a new directory called `gutenpride`, installs the necessary files, and builds the block plugin. If you want an interactive mode that prompts you for details, run the command without the `gutenpride` name.
-
-You now need to activate the plugin from inside wp-admin plugins page.
-
-After activated, go to the block editor and use the inserter to search and add your new block.
-
-## Table of Contents
-
-The create a block tutorials breaks down to the following sections.
-
-1. [WordPress Plugin](/docs/getting-started/create-block/wp-plugin.md)
-2. [Anatomy of a Gutenberg Block ](/docs/getting-started/create-block/block-anatomy.md)
-3. [Block Attributes](/docs/getting-started/create-block/attributes.md)
-4. [Code Implementation](/docs/getting-started/create-block/block-code.md)
-5. [Authoring Experience](/docs/getting-started/create-block/author-experience.md)
-6. [Finishing Touches](/docs/getting-started/create-block/finishing.md)
-7. [Share your Block with the World](/docs/getting-started/create-block/submitting-to-block-directory.md)
diff --git a/docs/getting-started/create-block/attributes.md b/docs/getting-started/create-block/attributes.md
deleted file mode 100644
index 5ec6f60c3d6a4d..00000000000000
--- a/docs/getting-started/create-block/attributes.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# Block Attributes
-
-Attributes are the way a block stores data, they define how a block is parsed to extract data from the saved content.
-
-For this block tutorial, we want to allow the user to type in a message that we will display stylized in the published post. So, we need to add a **message** attribute that will hold the user message. The following code defines a **message** attribute; the attribute type is a string; the source is the text from the selector which is a `div` tag.
-
-```json
-"attributes": {
-	"message": {
-		"type": "string",
-		"source": "text",
-		"selector": "div",
-		"default": ""
-	}
-},
-```
-
-Add this to the `src/block.json` file. The `attributes` are at the same level as the _name_ and _title_ fields.
-
-When the block loads it will look at the saved content for the block, look for the div tag, take the text portion, and store the content in an `attributes.message` variable.
-
-Note: The text portion is equivalent to `innerText` attribute of a DOM element. For more details and other examples see the [Block Attributes documentation](/docs/reference-guides/block-api/block-attributes.md).
-
-## 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` is a JavaScript object containing the values of each attribute, or default values if defined. The `setAttributes` is a function to update an attribute.
-
-```js
-export default function Edit( { attributes, setAttributes } ) {
-	// ...
-}
-```
-
-## TextControl Component
-
-For our example block, the component we are going to use is the **TextControl** component, it is similar to an HTML text input field. You can see [documentation for TextControl component](/packages/components/src/text-control/README.md). You can browse an [interactive set of components in this Storybook](https://wordpress.github.io/gutenberg/).
-
-The component is added similar to an HTML tag, setting a label, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the message attribute value.
-
-The save function will simply write the `attributes.message` as a div tag since that is how we defined it to be parsed.
-
-OPTIONAL: For IDE support (code completion and hints), you can install the `@wordpress/components` module which is where the TextControl component is imported from. This install command is optional since the build process automatically detects `@wordpress/*` imports and specifies as dependencies in the assets file.
-
-```shell
-npm install @wordpress/components --save
-```
-
-Update the edit.js and save.js files to the following, replacing the existing functions.
-
-**edit.js** file:
-
-```js
-import { __ } from '@wordpress/i18n';
-import { useBlockProps } from '@wordpress/block-editor';
-import { TextControl } from '@wordpress/components';
-import './editor.scss';
-
-export default function Edit( { attributes, setAttributes } ) {
-	return (
-		<div { ...useBlockProps() }>
-			<TextControl
-				label={ __( 'Message', 'gutenpride' ) }
-				value={ attributes.message }
-				onChange={ ( val ) => setAttributes( { message: val } ) }
-			/>
-		</div>
-	);
-}
-```
-
-**save.js** file:
-
-```jsx
-import { useBlockProps } from '@wordpress/block-editor';
-
-export default function save( { attributes } ) {
-	const blockProps = useBlockProps.save();
-	return <div { ...blockProps }>{ attributes.message }</div>;
-}
-```
-
-If you have previously run `npm run start`, and the script is still running, you can reload the editor now and add the block to test.
-Otherwise rebuild the block using `npm run build`, reload the editor and add the block. Type a message in the editor, save, and view it in the post.
-
-Next Section: [Code Implementation](/docs/getting-started/create-block/block-code.md)
diff --git a/docs/getting-started/create-block/author-experience.md b/docs/getting-started/create-block/author-experience.md
deleted file mode 100644
index a52ea808f69658..00000000000000
--- a/docs/getting-started/create-block/author-experience.md
+++ /dev/null
@@ -1,147 +0,0 @@
-# Authoring Experience
-
-## Background
-
-One of the primary tenets of Gutenberg as a WYSIWYG editor is that what you see in the editor should be as close as possible to what you get when published. Keep this in mind when building blocks.
-
-## Placeholder
-
-The state when a block has been inserted, but no data has been entered yet, is called a placeholder. There is a `Placeholder` component built that gives us a standard look. You can see example placeholders in use with the image and embed blocks.
-
-To use the Placeholder, wrap the `<TextControl>` component so it becomes a child element of the `<Placeholder>` component. Try it out in your code. After updating, you might have something like:
-
-```jsx
-import { useBlockProps } from '@wordpress/block-editor';
-import { Placeholder, TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function Edit( { attributes, className, setAttributes } ) {
-	return (
-		<div { ...useBlockProps() }>
-			<Placeholder
-				label={ __( 'Gutenpride Block', 'gutenpride' ) }
-				instructions={ __( 'Add your message', 'gutenpride' ) }
-			>
-				<TextControl
-					value={ attributes.message }
-					onChange={ ( val ) => setAttributes( { message: val } ) }
-				/>
-			</Placeholder>
-		</div>
-	);
-}
-```
-
-## isSelected Ternary Function
-
-The placeholder looks ok, for a simple text message it may or may not be what you are looking for. However, the placeholder can be useful if you are replacing the block after what is typed in, similar to the embed blocks.
-
-For this we can use a ternary function, to display content based on a value being set or not. A ternary function is an inline if-else statement, using the syntax:
-
-```js
-clause ? doIfTrue : doIfFalse;
-```
-
-This can be used inside a block to control what shows when a parameter is set or not. A simple case that displays a `message` if set, otherwise show the form element:
-
-```jsx
-return (
-	<div { ...useBlockProps() }>
-		{ attributes.message ? (
-			<div>Message: { attributes.message }</div>
-		) : (
-			<div>
-				<p>No Message.</p>
-				<TextControl
-					value={ attributes.message }
-					onChange={ ( val ) => setAttributes( { message: val } ) }
-				/>
-			</div>
-		) }
-	</div>
-);
-```
-
-There is a problem with the above, if we only use the `attributes.message` check, as soon as we type in the text field it would disappear since the message would then be set to a value. So we need to pair with an additional `isSelected` parameter.
-
-The `isSelected` parameter is passed in to the `edit` function and is set to true if the block is selected in the editor (currently editing) otherwise set to false (editing elsewhere).
-
-Using that parameter, we can use the logic:
-
-```js
-attributes.message && ! isSelected;
-```
-
-If the message is set and `!isSelected`, meaning we are not editing the block, the focus is elsewhere, then display the message not the text field.
-
-All of this combined together, here's what the edit function looks like:
-
-```jsx
-import { Placeholder, TextControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useBlockProps } from "@wordpress/block-editor";
-
-export default function Edit( { attributes, isSelected, setAttributes } ) {
-	return (
-		<div { ...useBlockProps() }>
-			{ attributes.message && ! isSelected ? (
-				<div>{ attributes.message }</div>
-			) : (
-				<Placeholder
-					label="Gutenpride Block"
-					instructions="Add your message"
-				>
-					<TextControl
-						value={ attributes.message }
-						onChange={ ( val ) =>
-							setAttributes( { message: val } )
-						}
-					/>
-				</Placeholder>
-			) }
-		</div>
-	);
-}
-```
-
-With that in place, rebuild and reload and when you are not editing the message is displayed as it would be for the view, when you click into the block you see the text field.
-
-## A Better Solution
-
-The switching between a Placeholder and input control works well with a visual element like an image or video, but for the text example in this block we can do better.
-
-The simpler and better solution is to modify the `src/editor.scss` to include the proper stylized text while typing.
-
-Update `src/editor.scss` to:
-
-```scss
-.wp-block-create-block-gutenpride input[type='text'] {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
-	color: inherit;
-	background: inherit;
-	border: 0;
-}
-```
-
-The edit function can simply be:
-
-```jsx
-import { TextControl } from '@wordpress/components';
-import { useBlockProps } from '@wordpress/block-editor';
-
-import './editor.scss';
-
-export default function Edit( { attributes, setAttributes } ) {
-	const blockProps = useBlockProps();
-	return (
-		<TextControl
-			{ ...blockProps }
-			value={ attributes.message }
-			onChange={ ( val ) => setAttributes( { message: val } ) }
-		/>
-	);
-}
-```
-
-Next Section: [Finishing Touches](/docs/getting-started/create-block/finishing.md)
diff --git a/docs/getting-started/create-block/block-anatomy.md b/docs/getting-started/create-block/block-anatomy.md
deleted file mode 100644
index 3f43c018cea39c..00000000000000
--- a/docs/getting-started/create-block/block-anatomy.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Anatomy of a Block
-
-At its simplest, a block in the WordPress block editor is a JSON object with a specific set of properties.
-
-<div class="callout callout-info">
-<strong>Note:</strong> Block development uses ESNext syntax, this refers to the latest JavaScript standard. If this is unfamiliar, review the <a href="https://developer.wordpress.org/block-editor/how-to-guides/javascript/esnext-js/">ESNext syntax documentation</a> to familiarize yourself with the newer syntax.
-</div>
-
-The javascript part is done in the `src/index.js` file.
-
-```js
-import { registerBlockType } from '@wordpress/blocks';
-
-import './style.scss';
-
-import Edit from './edit';
-import save from './save';
-import metadata from './block.json';
-
-registerBlockType( metadata.name, {
-	/**
-	 * @see ./edit.js
-	 */
-	edit: Edit,
-	/**
-	 * @see ./save.js
-	 */
-	save,
-} );
-```
-
-The first parameter in the **registerBlockType** function is the block name, this should match exactly to the name registered in the PHP file.
-
-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.
-
-The last two block object properties are **edit** and **save**, these are the key parts of a block. Both properties are functions that are included via the import above.
-
-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.
-
-Most of the properties are set in the `src/block.json` file.
-
-```json
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "create-block/gutenpride",
-	"version": "0.1.0",
-	"title": "Gutenpride",
-	"category": "text",
-	"icon": "flag",
-	"description": "A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.",
-	"supports": {
-		"html": false
-	},
-	"textdomain": "gutenpride",
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css"
-}
-```
-
-The **title** is the title of the block shown in the Inserter and in other areas of the editor.
-
-The **icon** is the icon shown in the Inserter. The icon property expects any Dashicon name as a string, see [list of available icons](https://developer.wordpress.org/resource/dashicons/). You can also provide an SVG object, but for now it's easiest to just pick a Dashicon name.
-
-The **category** specified is a string and must be one of: "common, formatting, layout, widgets, or embed". You can create your own custom category name, [see documentation for details](/docs/reference-guides/filters/block-filters.md#managing-block-categories).
-
-## Internationalization
-
-If you look at the generated `src/save.js` file, the block title and description are wrapped in a function that looks like this:
-
-```js
-__( 'Gutenpride – hello from the saved content!', 'gutenpride' );
-```
-
-This is an internationalization wrapper that allows for the string "Gutenpride" to be translated. The second parameter, "gutenpride" is called the text domain and gives context for where the string is from. The JavaScript internationalization, often abbreviated i18n, matches the core WordPress internationalization process. See the [Internationalization in Plugin Developer Handbook](https://developer.wordpress.org/plugins/internationalization/) for more details.
-
-Next Section: [Block Attributes](/docs/getting-started/create-block/attributes.md)
diff --git a/docs/getting-started/create-block/block-code.md b/docs/getting-started/create-block/block-code.md
deleted file mode 100644
index 11f478772c6dfe..00000000000000
--- a/docs/getting-started/create-block/block-code.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Code Implementation
-
-The basic block is in place, the next step is to add styles to the block. Feel free to style and adjust for your own preference, the main lesson is showing how to create and load external resources. For this example we're going to load the colorized gilbert font from [Type with Pride](https://www.typewithpride.com/).
-
-Note: The color may not work with all browsers until they support the proper color font properly, but the font itself still loads and styles. See [colorfonts.wtf](https://www.colorfonts.wtf/) for browser support and details on color fonts.
-
-## Load Font File
-
-Download and extract the font from the Type with Pride site, and copy it in the `assets` directory of your plugin naming it `gilbert-color.otf`. To load the font file, we need to add CSS using standard WordPress enqueue, [see Including CSS & JavaScript documentation](https://developer.wordpress.org/themes/basics/including-css-javascript/).
-
-In the `gutenpride.php` file, the enqueue process is already setup from the generated script, so `build/index.css` and `build/style-index.css` files are loaded using:
-
-```php
-function create_block_gutenpride_block_init() {
-	register_block_type( __DIR__ . '/build' );
-}
-add_action( 'init', 'create_block_gutenpride_block_init' );
-```
-
-This function checks the `build/block.json` file for JS and CSS files, and will pass them on to [enqueue](https://developer.wordpress.org/themes/basics/including-css-javascript/) these files, so they are loaded on the appropriate pages.
-
-The `build/index.css` is compiled from `src/editor.scss` and loads only within the editor, and after the `style-index.css`.
-The `build/style-index.css` is compiled from `src/style.scss` and loads in both the editor and front-end — published post view.
-
-## Add CSS Style for Block
-
-We only need to add the style to `build/style-index.css` since it will show while editing and viewing the post. Edit the `src/style.scss` to add the following.
-
-Note: the block classname is prefixed with `wp-block`. The `create-block/gutenpride` is converted to the classname `.wp-block-create-block-gutenpride`.
-
-```scss
-@font-face {
-	font-family: Gilbert;
-	src: url( ../assets/gilbert-color.otf );
-	font-weight: 700;
-}
-
-.wp-block-create-block-gutenpride {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
-}
-```
-
-After updating, rebuild the block using `npm run build` then reload the post and refresh the browser. If you are using a browser that supports color fonts (Firefox) then you will see it styled.
-
-Next Section: [Authoring Experience](/docs/getting-started/create-block/author-experience.md)
diff --git a/docs/getting-started/create-block/finishing.md b/docs/getting-started/create-block/finishing.md
deleted file mode 100644
index 227e01e212276f..00000000000000
--- a/docs/getting-started/create-block/finishing.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Finishing Touches
-
-This tutorial covers general concepts and structure for creating basic blocks.
-
-## Additional Components
-
-The block editor provides a [components package](/packages/components/README.md) which contains numerous prebuilt components you can use to build your block.
-
-You can visually browse the components and what their implementation looks like using the Storybook tool published at [https://wordpress.github.io/gutenberg](https://wordpress.github.io/gutenberg).
-
-## Additional Tutorials
-
-The **RichText component** allows for creating a richer input besides plain text, allowing for bold, italic, links, and other inline formating. See the [RichText Reference](/docs/reference-guides/richtext.md) for documentation using this component.
-
-The InspectorPanel (the settings on the right for a block) and Block Controls (toolbar controls) have a standard way to be implemented. See the [Block controls tutorial](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for additional information.
-
-The [Sidebar tutorial](/docs/how-to-guides/sidebar-tutorial/plugin-sidebar-0.md) is a good resource on how to create a sidebar for your plugin.
-
-Nested blocks, a block that contains additional blocks, is a common pattern used by various blocks such as Columns, Cover, and Social Links. The **InnerBlocks component** enables this functionality, see the [Using InnerBlocks documentation](/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md).
-
-## How did they do that
-
-One of the best sources for information and reference is the Block Editor itself, all the core blocks are built the same way. A good way to learn how things are done is to find a core block code that does something close to what you are interested in and then using the same approach for your own block.
-
-All core blocks source are in the [block library package on GitHub](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src).
-
-Next Section: [Share your Block with the World](/docs/getting-started/create-block/submitting-to-block-directory.md)
diff --git a/docs/getting-started/create-block/submitting-to-block-directory.md b/docs/getting-started/create-block/submitting-to-block-directory.md
deleted file mode 100644
index fc32814c364a3d..00000000000000
--- a/docs/getting-started/create-block/submitting-to-block-directory.md
+++ /dev/null
@@ -1,104 +0,0 @@
-# Share your Block with the World
-
-So you've created an awesome block? Care to share?
-
-**Contents**:
-
-1. Help users understand your block
-2. Analyze your plugin
-3. Zip & Submit
-
-## Step 1: Help users understand your block
-
-It is important to the Block Directory and our end users to provide easy to understand information on how your block was created.
-
-**Guidelines**:
-
--   Name your block based on what it does
--   Clearly describe your block
--   Add Keywords for all contexts
--   Choose the right category
-
-### Name your block based on what it does
-
-Users typically search the Block Directory within the Block Editor and do so in the context of a task. For example, when building their post, a user may search the Block Directory for an “image gallery”. Naming your block accordingly will help the Block Directory surface it when it's needed.
-
-**Not So Good**: WebTeam5 Image Works
-**Good**: Responsive Image Slider by WebTeam5
-
-**Question: What happens when there are multiple blocks with similar names?**
-Try your best to make your block's name functional and unique to make it stand out. Look for applicable synonyms or include a prefix if necessary.
-
-### Clearly describe your block
-
-The description really helps to communicate what your block does.The quicker a user understands how your block will help them, the more likely it is a user will use your block. Users will be reading your block's description within the Block Editor where space can be limited. Try to keep it short and concise.
-
-**Not So Good**: The best way to show images on your website using jQuery and CSS.
-**Good**: A responsive image gallery block.
-
-**Tip**: It’s not about marketing your block, in fact we want to avoid marketing in blocks. You can read more about it in the [plugin guidelines]. Stick to being as clear as you can. The Block Directory will provide metrics to let users know how awesome your block is!
-
-### Add Keywords for broader context
-
-Keywords add extra context to your block and make it more likely to be found in the inserter.
-
-Examples for an Image Slider block:
-
--   slider
--   carousel
--   gallery
-
-[Read more about keywords.](/docs/reference-guides/block-api/block-metadata.md#keywords)
-
-### Choose the right category
-
-The Block Editor allows you to indicate the category your block belongs in, making it easier for users to locate your block in the menu.
-
-**Possible Values**:
-
--   text
--   media
--   design
--   widgets
--   theme
--   embed
-
-[Read more about categories.](/docs/reference-guides/block-api/block-metadata.md#category)
-
-Wondering where to input all this information? Read the next section :)
-
-## Step 2: Analyze your plugin
-
-Each block in your plugin should have a corresponding `block.json` file with the [block metadata](/docs/reference-guides/block-api/block-metadata.md). This file provides the Block Directory important information about your block. Along with being the place to store contextual information about your block like the: `name`, `description`, `keywords` and `category`, the `block.json` file stores the location of your block’s files.
-
-Block plugins submitted to the Block Directory can contain mutliple blocks only if they are children of a single parent/ancestor. There should only be one main block. For example, a list block can contain list-item blocks. Children blocks must set the `parent` property in their `block.json` file.
-
-Double check that the following is true for your block:
-
--   `editorScript` is pointing to the JavaScript bundle that includes all the code used in the **editor**.
--   `editorStyle` is pointing to the CSS bundle that includes all the css used in the **editor**.
--   `script` is pointing to the JavaScript bundle that includes all the code used on the **website**.
--   `style` is pointing to the CSS bundle that includes all the code used on the **website**.
-
-We encourage the separation of code by using both editorScript/editorStyle and script/style files listed in your block.json to keep the backend and frontend interfaces running smoothly. Even though only one file is required.
-
-Here is an example of a basic block.json file.
-
-```json
-{
-	"name": "plugin-slug/image-slider",
-	"title": "Responsive Image Slider",
-	"description": "A responsive and easy to use image gallery block.",
-	"keywords": [ "slider", "carousel", "gallery" ],
-	"category": "media",
-	"editorScript": "file:./dist/editor.js"
-}
-```
-
-The `block.json` file also contains other important properties. Take a look at an [example block.json](/docs/reference-guides/block-api/block-metadata.md) for additional properties to be included in the block.json file.
-
-## Step 3: Zip & Submit
-
-The community is thankful for your contribution. It is time to submit your plugin.
-
-Go through [the block guidelines](https://github.com/WordPress/wporg-plugin-guidelines/blob/block-guidelines/blocks.md). Create a zip file of your block and go to the [block plugin validator](https://wordpress.org/plugins/developers/block-plugin-validator/) and upload your plugin.
diff --git a/docs/getting-started/create-block/wp-plugin.md b/docs/getting-started/create-block/wp-plugin.md
deleted file mode 100644
index 33142659680b94..00000000000000
--- a/docs/getting-started/create-block/wp-plugin.md
+++ /dev/null
@@ -1,146 +0,0 @@
-# WordPress Plugin
-
-A block is added to the block editor using a WordPress plugin. You can create your own plugin, and after installing and activating the plugin use the block. Let's first look at what makes up a WordPress plugin.
-
-## Plugin Details
-
-A WordPress plugin is a set of files within the site's `wp-content/plugins` directory. For our tutorial, we will use the `@wordpress/create-block` package to generate the necessary plugin files.
-
-### Switch to Working Directory
-
-(1A) If you do not plan to use `wp-env`, change to your local WordPress plugin directory. For example in Local it is: `~\Local Sites\mywp\app\public\wp-content\plugins`
-
--or-
-
-(1B) If using `wp-env start`, you can work from any directory for your project; `wp-env` will map it as a plugin directory for your site.
-
-### Generate Plugin Files
-
-(2) Once in the right directory for your environment, the next step is to run the following command to generate plugin files:
-
-```sh
-npx @wordpress/create-block gutenpride
-cd gutenpride
-```
-
-A new directory `gutenpride` is created with all the necessary plugin files. This tutorial will walk through and explain the plugin files, please explore and become familiar with them also.
-
-The main plugin file created is the PHP file `gutenpride.php`, at the top of this file is the Plugin Header comment block that defines the plugin.
-
-```php
-/**
- * Plugin Name:       Gutenpride
- * Description:       Example static block scaffolded with Create Block tool.
- * Requires at least: 5.8
- * Requires PHP:      7.0
- * Version:           0.1.0
- * Author:            The WordPress Contributors
- * License:           GPL-2.0-or-later
- * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
- * Text Domain:       gutenpride
- *
- * @package           create-block
- */
-```
-
-### Start WordPress
-
-Let's confirm the plugin is loaded and working.
-
-(3A) If you are using Local, or other environment confirm your WordPress site is started.
-
--or-
-
-(3B) If you are using `wp-env`, see [Development Environment setup](/docs/getting-started/devenv/README.md), then you should now run from inside the `gutenpride` directory:
-
-```sh
-wp-env start
-```
-
-This will start your local WordPress site and use the current directory as your plugin directory. In your browser, go to http://localhost:8888/wp-admin/ and login, the default username is "admin" and password is "password", no quotes.
-
-### Confirm Plugin Installed
-
-The generated plugin should now be listed on the Plugins admin page in your WordPress install. Switch WordPress to the plugins page and activate.
-
-For more on creating a WordPress plugin see [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/), and [Plugin Header requirements](https://developer.wordpress.org/plugins/plugin-basics/header-requirements/) for explanation and additional fields you can include in your plugin header.
-
-## package.json
-
-The `package.json` file defines the JavaScript properties for your project. This is a standard file used by NPM for defining properties and scripts it can run, the file and process is not specific to WordPress.
-
-A `package.json` file was created with the create script, this defines the dependencies and scripts needed. You can install dependencies. The only initial dependency is the `@wordpress/scripts` package that bundles the tools and configurations needed to build blocks.
-
-In `package.json`, there is a `scripts` property that defines what command to run when using `npm run (cmd)`. In our generated `package.json` file, the two main scripts point to the commands in the `wp-scripts` package:
-
-```json
-  "scripts": {
-    "build": "wp-scripts build",
-    "start": "wp-scripts start"
-  },
-```
-
-These scripts are run by using: `npm run build` or `npm run start`.
-
-Use `npm run build` for running once to create a "production" build. This compresses the code down so it downloads faster, but makes it harder to read using browser tools—good for final deployment but not while developing.
-
-Use `npm run start` for creating a "development" build, this does not compress the code so it is easier to read using browser tools, plus [source maps](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map) that make debugging easier. Additionally, development build will start a watch process that waits and watches for changes to the file and will rebuild each time it is saved; so you don't have to run the command for each change.
-
-By default, the build scripts looks for `src/index.js` for the JavaScript file to build and will save the built file to `build/index.js`. In the upcoming sections, we will look closer at that script, but first let's make sure it is loaded in WordPress.
-
-## Plugin to Load Script
-
-To load the built script, so it is run within the editor, you need to tell WordPress about the script. This is done in the init action in the `gutenpride.php` file.
-
-```php
-function create_block_gutenpride_block_init() {
-	register_block_type( __DIR__ . '/build' );
-}
-add_action( 'init', 'create_block_gutenpride_block_init' );
-```
-
-The `register_block_type` function registers the block we are going to create and specifies the editor script handle registered from the metadata provided in `build/block.json` file with the `editorScript` field. So now when the editor loads it will load this script. The source metadata file `src/block.json` is copied during the build process:
-
-```json
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"name": "create-block/gutenpride",
-	"version": "0.1.0",
-	"title": "Gutenpride",
-	"category": "widgets",
-	"icon": "smiley",
-	"description": "Example static block scaffolded with Create Block tool.",
-	"supports": {
-		"html": false
-	},
-	"textdomain": "gutenpride",
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css"
-}
-```
-
-For the `editorScript` provided in the block metadata, the build process creates a secondary asset file that contains the list of dependencies and a file version based on the timestamp, this is the `build/index.asset.php` file.
-
-The `wp_register_script` function used internally registers a name, called the handle, and relates that name to the script file. The dependencies are used to specify if the script requires including other libraries. The version is specified so the browser will reload if the file changed.
-
-The `wp_set_script_translations` function tells WordPress to load translations for this script, if they exist. See more about [translations & internationalization.](/docs/how-to-guides/internationalization.md)
-
-With the above in place, create a new post to load the editor and check your plugin is in the inserter. You can use `/` to search, or click the box with the [+] and search for "Gutenpride" to find the block.
-
-## Troubleshooting
-
-It is a good skill to learn and get comfortable using the web console. This is where JavaScript errors are shown and a nice way to test out snippets of JavaScript. See [Firefox Developer Tools documentation](https://developer.mozilla.org/en-US/docs/Tools).
-
-To open the developer tools in Firefox, use the menu selecting Web Developer : Toggle Tools, on Chrome, select More Tools -> Developers Tools. For both browsers, the keyboard shortcut on Windows is Ctrl+Shift+I, or on Mac Cmd+Shift+I. On Windows & Linux, the F12 key also works. You can then click Console to view logs.
-
-Try running `npm run start` that will start the watch process for automatic rebuilds. If you then make an update to `src/index.js` file, you will see the build run, and if you reload the WordPress editor you'll see the change.
-
-For more info, see the build section of the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/js-build-setup.md) in the Block Editor Handbook.
-
-## Summary
-
-Hopefully, at this point, you have your plugin created and activated. We have the `package.json` with the `@wordpress/scripts` dependency, that defines the build and start scripts. The basic block is in place and can be added to the editor.
-
-Next Section: [Anatomy of a Block](/docs/getting-started/create-block/block-anatomy.md)
diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index ecafeadc0dc370..4539dacbdf5047 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -1,228 +1,60 @@
-# Development Environment
+# Block Development Environment
 
-This guide is for setting up your local environment for JavaScript development for creating plugins and tools to extend WordPress and the block editor. If you are looking to contribute to Gutenberg project itself, see additional documentation in the [Getting Started guide](/docs/contributors/code/getting-started-with-code-contribution.md).
+This guide will help you set up the right development environment to create blocks and other plugins that extend and modify the Block Editor in WordPress.
 
-A development environment is a catch-all term for what you need setup on your computer to work. The three main pieces needed for our development environment are:
+A block development environment includes the tools you need on your computer to successfully develop for the Block Editor. The three essential requirements are:
 
-1. Node/NPM Development Tools
-2. WordPress Development Site
-3. Code Editor
+1.  [Code editor](#code-editor)
+2.  [Node.js development tools](#node-js-development-tools)
+3.  [Local WordPress environment (site)](#local-wordpress-environment)
 
-## Quick Start
+<div class="callout callout-info">
+    To contribute to the Gutenberg project itself, refer to the additional documentation in the <a href="https://developer.wordpress.org/block-editor/contributors/code/getting-started-with-code-contribution">code contribution guide</a>.
+</div>
 
-Here is a summary of the guide. See each section for additional details and explanations.
+## Code editor
 
-**1. Install Node development tools**
+A code editor is used to write code. You can use whichever editor you're most comfortable with. The key is having a way to open, edit, and save text files.
 
-Download and install [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm)
+If you do not already have a preferred code editor, [Visual Studio Code](https://code.visualstudio.com/) (VS Code) is a popular choice for JavaScript development among Core contributors. It works well across the three major platforms (Windows, Linux, and Mac), is open-source, and is actively maintained by Microsoft. VS Code also has a vibrant community providing plugins and extensions, including many for WordPress development.
 
-```
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
-```
+## Node.js development tools
 
-Quit and restart terminal
-Install Node.js v14.
+Node.js (`node`) is an open-source runtime environment that allows you to execute JavaScript outside of the web browser. While Node.js is not required for all WordPress JavaScript development, it's essential when working with modern JavaScript tools and developing for the Block Editor.
 
-```
-nvm install 14
-```
+Node.js and its accompanying development tools allow you to:
 
-**2. WordPress Development Site**
+-   Install and run WordPress packages needed for Block Editor development, such as `wp-scripts`
+-   Setup local WordPress environments with `wp-env` and `wp-now`
+-   Use the latest ECMAScript features and write code in ESNext
+-   Lint, format, and test JavaScript code
+-   Scaffold custom blocks with the `create-block` package
 
-First download, install, and start [Docker Desktop](https://www.docker.com/products/docker-desktop) following the instructions for your OS.
+The list goes on. While modern JavaScript development can be challenging, WordPress provides several tools, like [`wp-scripts`](/docs/getting-started/devenv/get-started-with-wp-scripts.md) and [`create-block`](/docs/getting-started/devenv/get-started-with-create-block.md), that streamline the process and are made possible by Node.js development tools.
 
--   Install WordPress environment tool
+**The recommended Node.js version for block development is [Active LTS](https://nodejs.org/en/about/previous-releases) (Long Term Support)**. However, there are times when you need to use different versions. A Node.js version manager tool like `nvm` is strongly recommended and allows you to change your `node` version when required. You will also need Node Package Manager (`npm`) and the Node Package eXecute (`npx`) to work with some WordPress packages. Both are installed automatically with Node.js.
 
-```
-npm -g install @wordpress/env
-```
+To be able to use the Node.js tools and [packages provided by WordPress](https://github.com/WordPress/gutenberg/tree/trunk/packages) for block development, you'll need to set a proper Node.js runtime environment on your machine. To learn more about how to do this, refer to the links below.
 
-Start the environment from an existing plugin or theme directory, or a new working directory:
+-   [Install Node.js for Mac and Linux](/docs/getting-started/devenv/nodejs-development-environment.md#node-js-installation-on-mac-and-linux-with-nvm)
+-   [Install Node.js for Windows](/docs/getting-started/devenv/nodejs-development-environment.md#node-js-installation-on-windows-and-others)
 
-```
-wp-env start
-```
+## Local WordPress environment
 
-You will have a full WordPress site installed, navigate to: http://localhost:8888/ using your browser, log in to the WordPress dashboard at http://localhost:8888/wp-admin/ using Username "admin" and Password "password", without the quotes.
+A local WordPress environment (site) provides a controlled, efficient, and secure space for development, allowing you to build and test your code before deploying it to a production site. The same [requirements](https://en-gb.wordpress.org/about/requirements/) for WordPress apply to local sites.
 
-**3. Code Editor**
+In the broader WordPress community, many tools are available for setting up a local WordPress environment on your computer. The Block Editor Handbook covers `wp-env`, which is open-source and maintained by the WordPress project itself. It's also the recommended tool for Gutenberg development. 
 
-You can use any text editor to write code. For example, [Visual Studio Code](https://code.visualstudio.com/) is a popular open-source editor. You can follow instructions on their site to install it for your OS.
+Refer to the [Get started with `wp-env`](/docs/getting-started/devenv/get-started-with-wp-env.md) guide for setup instructions.
 
-## Node Development Tools
+<div class="callout callout-info">
+    Throughout the Handbook, you may also see references to <code><a href="https://github.com/WordPress/playground-tools/tree/trunk/packages/wp-now">wp-now</a></code>. This is a lightweight tool powered by <a hre="https://developer.wordpress.org/playground/">WordPress Playground</a> that streamlines setting up a simple local WordPress environment. While still experimental, this tool is great for quickly testing WordPress releases, plugins, and themes. 
+</div>
 
-The tools needed for development are **Node** and **NPM**. **Nodejs** is a runtime environment that allows running JavaScript outside of the browser. NPM is the Node Package Manager, it is used for installing dependencies and running scripts. The script `npx` is also installed with Nodejs—this script is used to run packages not yet installed—we will use `npx` to bootstrap a block.
+This list is not exhaustive, but here are several additional options to choose from if you prefer not to use `wp-env`:
 
-The tools are used to convert the JavaScript we are going to write into a format that browsers can run. This is called transpiling or the build step.
-
-For Mac and Linux, it is recommended to use the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm). Using `nvm` to install node allows installing specific versions, plus installs locally in your home directory and avoids any global permission issues.
-
-For Windows, or alternative installs, you can [download a Nodejs installer](https://nodejs.org/en/download/) directly from the main Node.js website, v14 is recommended. Installers are available for Windows and Mac, and binaries available for Linux. See Node.js site for additional installation methods.
-
-Here are the quick instructions to install using nvm, see the [full installation instructions](https://github.com/nvm-sh/nvm#installing-and-updating) for additional details.
-
-Run the following on the command-line to install nvm:
-
-```sh
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
-```
-
-Note: On macOS, the required developer tools are not installed by default, if not already installed you may be prompted to download the install.
-
-<img src="https://developer.wordpress.org/files/2020/07/git-install-prompt.png" alt="Mac git command requies command line developer tools" width="400" height="195"/>
-
-After installing nvm, you need to use it to install Node.js, to install v14, run:
-
-```sh
-nvm install 14
-```
-
-If there is an error running the above command, for example a common error that occurs is:
-
-```sh
-$ nvm install 14
-zsh: command not found: nvm
-```
-
-First, try quitting and restarting your terminal to pick up the installed config.
-
-If restarting did not resolve the problem, you might need to create the default profile file.
-
-On macOS Catalina, the default shell is zsh, to create the profile file type `touch ~/.zshrc` on the command-line. It is fine to run if the file already exists. Note, `~/` is a shortcut to your home directory. For Ubuntu, including WSL, the default profile is bash, use `touch ~/.bashrc` to create.
-
-After creating the profile file, re-run the install command:
-
-```sh
-nvm install 14
-```
-
-The important part after installing is being able to use them in your terminal. Open a terminal command-line and type `node -v` and `npm -v` to confirm they are installed.
-
-```sh
-> node -v
-v14.19.0
-
-> npm -v
-6.14.16
-```
-
-Your versions may not match exactly, that is fine. The minimum version for Node.js is >= 12 and for npm >= 6.9, using v14 will be supported until upgrade is required.
-
-## WordPress Development Site
-
-There are several ways to run WordPress locally on your own computer, or you could even develop on a cloud hosted computer, though this may be slower.
-
-The WordPress [wp-env package](https://www.npmjs.com/package/@wordpress/env) lets you set up a local WordPress environment for building and testing plugins and themes, without any additional configuration.
-
-The `wp-env` tool uses Docker to create a virtual machine that runs the WordPress site. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [other versions of Windows 10](https://docs.docker.com/docker-for-windows/wsl/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script). If using Ubuntu, see our additional notes for [help installing Docker on Ubuntu](/docs/getting-started/devenv/docker-ubuntu.md).
-
-After you have installed Docker, go ahead and install the `wp-env` tool. This command will install the tool globally, which means you can run it from any directory:
-
-```sh
-npm -g install @wordpress/env
-```
-
-To confirm it is installed and available, run:
-
-```sh
-wp-env --version
-> 1.6.0
-```
-
-The `wp-env` script is used to create a Docker WordPress environment. You can use this script to start an environment with your plugin activated by running it from the directory containing your plugin. For example if you are following the create block tutorial, this would be in the generated directory like so:
-
-```sh
-npx @wordpress/create-block starter-block
-cd starter-block
-wp-env start
-```
-
-You can access your environment in your browser at: [http://localhost:8888/](http://localhost:8888/), the default username is `admin` and default password is `password`. For more information controlling the Docker environment see the [@wordpress/env package readme](/packages/env/README.md).
-
-When using the script while developing a single plugin, `wp-env start` can mount and activate the plugin automatically when run from the directory containing the plugin. Note: This also works for themes when run from the directory in which you are developing the theme.
-
-If you run `wp-env start` from a directory that is not a plugin or theme, a generic WordPress environment will be created. The script will display the following warning, it is fine if this is your intention.
-
-```
-!! Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.
-```
-
-You can use the `.wp-env.json` configuration file to create an environment that works with multiple plugins and/or themes. See the [@wordpress/env package for additional details](/packages/env/README.md#wp-envjson).
-
-#### Troubleshooting
-
-A common issue when running `wp-env` is `Error while running docker-compose command.`
-
--   Check that Docker Desktop is started and running.
--   Check Docker Desktop dashboard for logs, restart, or remove existing VMs.
-
-If you see the error: `Host is already in use by another container`
-
--   The container is already running, or another one is. You can stop an existing container running use `wp-env stop` from the directory you started it.
--   If you do not remember the directory you started wp-env in, you can stop all containers with `docker stop $(docker ps -q)`. Please note, this will stop all containers, use caution with this command.
-
-### Alternative to Docker
-
-Docker is just one method to run a local WordPress environment. Block development and extending WordPress is done using normal plugins, so any WordPress environment can be used. Here are some alternatives that you can consider which do not require installing Docker.
-
--   [Local](https://localwp.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
-
--   [WampServer](http://www.wampserver.com/en/) or [MAMP](https://www.mamp.info/) environments, both are quite similar to Local, combining a web server, PHP, and database. However these tools are not WordPress specific, so if you are not already using them, Local might be an easier option.
-
--   Remote server - you can work on a remote server, most hosts provide a quick WordPress setup. However, this will require additional time thorughout development syncing to the server, or working directly on the remote server.
-
-The important part is having a WordPress site installed, and know where and how to update files in the plugins directory.
-
-## Code Editor
-
-[Visual Studio Code](https://code.visualstudio.com/) is a popular code editor for JavaScript development. It works quite well across the three major platforms (Windows, Linux, and Mac), it is open-source and actively maintained by Microsoft. Plus Visual Studio Code has a vibrant community providing plugins and extensions; it is becoming the defacto standard for web development.
-
-Alternative editors include [Sublime Text](https://www.sublimetext.com/) that is also available across platforms, though is a commercial product; or other free alternatives include [Vim](https://www.vim.org/), [Atom](https://atom.io/), and [Notepad++](https://notepad-plus-plus.org/) all support standard JavaScript style development.
-
-You can use any editor you're comfortable with, it is more a personal preference. The development setup for WordPress block editor is a common JavaScript environment and most editors have plugins and support. The key is having a way to open, edit, and save text files.
-
-## Uninstall - Start Over
-
-Here are a few instructions if you need to start over, or want to remove what was installed.
-
-### Local Environment
-
--   If you just want to reset and clean the WordPress database:
-
-```
-wp-env clean all
-```
-
--   To remove the local environment completely for a specific project:
-
-```
-wp-env destroy
-```
-
--   To completely uninstall wp-env tool:
-
-```
-npm -g uninstall @wordpress/env
-```
-
--   To uninstall Docker, or Visual Studio Code use your OS method to remove packages. For example, on Windows run "Add or remove programs". You can additionally uninstall from the Docker Desktop app, click the bug icon at the top to switch to this Troubleshoot screen. Click Uninstall or remove.
-
-![Docker Troubleshoot Screenshot](https://developer.wordpress.org/files/2020/08/docker-uninstall-screen.png)
-
-### Uninstall Node/NVM
-
-To uninstall Node/NVM, delete the NVM directory, this is typically installed at `$HOME/.nvm`, delete using
-
-```
-rm -rf "$HOME/.nvm"
-```
-
-If this does not work and the `$NVM_DIR` environment variable is set you can remove using `rm -rf "$NVM_DIR"`
-
-To clean up any installed JavaScript packages remove the global `.npm` directory at `$HOME/.npm`,
-
-```
-rm -rf "$HOME/.npm"
-```
-
-Just as you confirmed the installation worked, you can confirm the uninstall worked. First quit and restart terminal and then try to run `npm -v`, `node -v`, and `nvm -v` you should then see a "command not found" error in the terminal.
+- [Local](https://localwp.com/)
+- [WP Studio](https://developer.wordpress.com/studio/)
+- [XAMPP](https://www.apachefriends.org/)
+- [MAMP](https://www.mamp.info/en/mamp/mac/)
+- [Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/) (VVV)
diff --git a/docs/getting-started/devenv/docker-ubuntu.md b/docs/getting-started/devenv/docker-ubuntu.md
deleted file mode 100644
index f26ca0826140ef..00000000000000
--- a/docs/getting-started/devenv/docker-ubuntu.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# How to setup local WordPress environment on Ubuntu
-
-This article covers setting up the local WordPress development environment using Docker on Ubuntu.
-
-For Ubuntu 20.04.1, the standard docker binaries in the repository work as needed:
-
-```
-sudo apt install docker.io docker-compose
-```
-
-For earlier versions of Ubuntu, the docker binaries included in repositories did not support the features needed for the WordPress environment.
-
--   For Ubuntu prior to 20.04.1, follow these [directions from Docker to install](https://docs.docker.com/install/linux/docker-ce/ubuntu/). Additionally `docker-compose` is required, you may need to install separately, see [ Docker compose documentation](https://docs.docker.com/compose/install/).
-
-## Troubleshooting
-
-If you run into this error, when running `npm run wp-env` from the Gutenberg directory:
-
-```
-ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?
-
-If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
-```
-
-First, make sure docker is running. You can check using `ps -ef | grep docker` which should show something like:
-
-```
-/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
-```
-
-If docker is not running, try to start the service using:
-
-```
-sudo systemctl start docker.service
-```
-
-If docker is running, then it is not listening how the WordPress environment is trying to communicate. Try adding the following service override file to include listening on tcp. See docker documentation, [How do I enable the remote API for dockerd](https://success.docker.com/article/how-do-i-enable-the-remote-api-for-dockerd)
-
-```
-# /etc/systemd/system/docker.service.d/override.conf
-[Service]
-ExecStart=
-ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2376
-```
-
-Restart the service from the command-line
-
-```
-sudo systemctl daemon-reload
-sudo systemctl restart docker.service
-```
-
-After restarting the services, set the environment variable DOCKER_HOST and try starting using:
-
-```
-export DOCKER_HOST=tcp://127.0.0.1:2376
-npm run wp-env start
-```
-
-Your environment should be setup at: http://localhost:8888/
diff --git a/docs/getting-started/devenv/get-started-with-create-block.md b/docs/getting-started/devenv/get-started-with-create-block.md
new file mode 100644
index 00000000000000..2d46dd18cffe55
--- /dev/null
+++ b/docs/getting-started/devenv/get-started-with-create-block.md
@@ -0,0 +1,95 @@
+# Get started with create-block
+
+Custom blocks for the Block Editor in WordPress are typically registered using plugins and are defined through a specific set of files. The [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package is an officially supported tool to scaffold the structure of files needed to create and register a block. It generates all the necessary code to start a project and integrates a modern JavaScript build setup (using [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)) with no configuration required. 
+
+The package is designed to help developers quickly set up a block development environment following WordPress best practices.
+
+## Quick start
+
+### Installation
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+You can use `create-block` to scaffold a block just about anywhere and then [use `wp-env`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/) from the inside of the generated plugin folder. This will create a local WordPress development environment with your new block plugin installed and activated.
+
+If you have your own [local WordPress development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment) already set up, navigate to the `plugins/` folder using the terminal.
+
+Run the following command to scaffold an example block plugin:
+
+```bash
+npx @wordpress/create-block@latest todo-list
+cd todo-list
+```
+
+The `slug` provided (`todo-list`) defines the folder name for the scaffolded plugin and the internal block name. 
+
+Navigate to the Plugins page of our local WordPress installation and activate the "Todo List" plugin. The example block will then be available in the Editor. 
+
+### Basic usage
+
+The `create-block` assumes you will use modern JavaScript (ESNext and JSX) to build your block. This requires a build step to compile the code into a format that browsers can understand. Luckily, the `wp-scripts` package handles this process for you. Refer to the [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts) for an introduction to this package. 
+
+ When `create-block` scaffolds the block, it installs `wp-scripts` and adds the most common scripts to the block's `package.json` file. By default, those include:
+
+```json
+{
+    "scripts": {
+		"build": "wp-scripts build",
+		"format": "wp-scripts format",
+		"lint:css": "wp-scripts lint-style",
+		"lint:js": "wp-scripts lint-js",
+		"packages-update": "wp-scripts packages-update",
+		"plugin-zip": "wp-scripts plugin-zip",
+		"start": "wp-scripts start"
+	}
+}
+```
+
+These scripts can then be run using the command `npm run {script name}`. The two scripts you will use most often are `start` and `build` since they handle the build step.
+
+When working on your block, use the `npm run start` command. This will start a development server and automatically rebuild the block whenever any code change is detected.
+
+When you are ready to deploy your block, use the `npm run build` command. This optimizes your code and makes it production-ready.
+
+See the `wp-scripts` [package documentation](https://developer.wordpress.org/block-editor/packages/packages-scripts/) for more details about each available script.
+
+## Alternate implementations
+
+### Interactive mode
+
+For developers who prefer a more guided experience, the `create-block` package provides an interactive mode. Instead of manually specifying all options upfront, like the `slug` in the above example, this mode will prompt you for inputs step-by-step.
+
+To use this mode, run the command:
+
+```bash
+npx @wordpress/create-block@latest
+```
+
+Follow the prompts to configure your block settings interactively.
+
+### Quick start mode using options
+
+If you're already familiar with the `create-block` [options](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#options) and want a more streamlined setup, you can use quick start mode. This allows you to pass specific options directly in the command line, eliminating the need for interactive prompts.
+
+For instance, to quickly create a block named "my-block" with a namespace of "my-plugin" that is a Dynamic block, use this command:
+
+```bash
+npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"
+```
+
+### Using templates
+
+The `create-block` package also supports the use of templates, enabling you to create blocks based on predefined configurations and structures. This is especially useful when you have a preferred block structure or when you're building multiple blocks with similar configurations.
+
+To use a template, specify the `--template` option followed by the template name or path:
+```bash
+npx @wordpress/create-block --template="my-custom-template"
+```
+
+Templates must be set up in advance so the `create-block` package knows where to find them. Learn more in the `create-block` [documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#template), and review the [External Project Templates](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/packages-create-block-external-template/) guide.
+
+## Additional resources
+
+- [Using the create-block tool](https://learn.wordpress.org/tutorial/using-the-create-block-tool/) (Learn WordPress tutorial)
+- [@wordpress/create-block](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) (Official documentation)
+- [@wordpress/scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) (Official documentation)
diff --git a/docs/getting-started/devenv/get-started-with-wp-env.md b/docs/getting-started/devenv/get-started-with-wp-env.md
new file mode 100644
index 00000000000000..74942ea3ee93bf
--- /dev/null
+++ b/docs/getting-started/devenv/get-started-with-wp-env.md
@@ -0,0 +1,144 @@
+# Get started with wp-env
+
+The [@wordpress/env](https://www.npmjs.com/package/@wordpress/env) package (`wp-env`) lets you set up a local WordPress environment (site) for building and testing plugins and themes, without any additional configuration.
+
+Before following this guide, install [Node.js development tools](/docs/getting-started/devenv#node-js-development-tools) if you have not already done so.
+
+![wp-env basics diagram](https://developer.wordpress.org/files/2023/10/wp-env-diagram.png)
+
+## Quick start
+ 
+1. Download, install, and start [Docker Desktop](https://www.docker.com/products/docker-desktop) following the instructions for your operating system.
+2. Run `npm -g install @wordpress/env` in the terminal to install `wp-env` globally.
+3. In the terminal, navigate to an existing plugin directory, theme directory, or a new working directory.
+4. Run `wp-env start` in the terminal to start the local WordPress environment.
+5. After the script runs, navigate to <code>http://localhost:8888/wp-admin</code> and log into the WordPress dashboard using username `admin` and password `password`.
+
+## Set up Docker Desktop
+
+The `wp-env` tool uses [Docker](https://www.docker.com/) to create a virtual machine that runs the local WordPress site. The Docker Desktop application is free for small businesses, personal use, education, and non-commercial open-source projects. See their [FAQ](https://docs.docker.com/desktop/faqs/general/#do-i-need-to-pay-to-use-docker-desktop) for more information.
+
+Use the links below to download and install Docker Desktop for your operating system.
+
+- [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/)
+- [Docker Desktop for Windows](https://docs.docker.com/desktop/install/windows-install/)
+- [Docker Desktop for Linux](https://docs.docker.com/desktop/install/linux-install/)
+
+If you are using a version of Ubuntu prior to 20.04.1, see the additional [troubleshooting notes](#ubuntu-docker-setup) below.
+
+After successful installation, start the Docker Desktop application and follow the prompts to get set up. You should generally use the recommended (default) settings, and creating a Docker account is optional.
+
+## Install and run `wp-env`
+
+The `wp-env` tool is used to create a local WordPress environment with Docker. So, after you have set up Docker Desktop, open the terminal and install the `wp-env` by running the command:
+
+```sh
+npm -g install @wordpress/env
+```
+
+This will install the `wp-env` globally, allowing the tool to be run from any directory. To confirm it's installed and available, run `wp-env --version`, and the version number should appear. 
+
+Next, navigate to an existing plugin directory, theme directory, or a new working directory in the terminal and run:
+
+```sh
+wp-env start
+```
+
+Once the script completes, you can access the local environment at: <code>http://localhost:8888</code>. Log into the WordPress dashboard using username `admin` and password `password`.
+
+<div class="callout callout-tip">
+    Some projects, like Gutenberg, include their own specific <code>wp-env</code> configurations, and the documentation might prompt you to run <code>npm run start wp-env</code> instead.
+</div>
+
+For more information on controlling the Docker environment, see the [@wordpress/env package](/packages/env/README.md) readme.
+
+### Where to run `wp-env`
+
+The `wp-env` tool can run from practically anywhere. When using the script while developing a single plugin, `wp-env start` can mount and activate the plugin automatically when run from the directory containing the plugin. This also works for themes when run from the directory in which you are developing the theme.
+
+A generic WordPress environment will be created if you run `wp-env start` from a directory that is not a plugin or theme. The script will display the following warning, but ignore if this is your intention.
+
+```
+!! Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.
+```
+
+You can also use the `.wp-env.json` configuration file to create an environment that works with multiple plugins and/or themes. See the [@wordpress/env package](/packages/env/README.md#wp-envjson) readme for more configuration details.
+
+### Uninstall or reset `wp-env`
+
+Here are a few instructions if you need to start over or want to remove what was installed.
+
+-   If you just want to reset and clean the WordPress database, run `wp-env clean all`
+-   To remove the local environment completely for a specific project, run `wp-env destroy`
+-   To globally uninstall the `wp-env` tool, run `npm -g uninstall @wordpress/env`
+
+## Troubleshooting
+
+### Common errors
+
+When using `wp-env`, it's common to get the error: `Error while running docker-compose command`
+
+-   Check that Docker Desktop is started and running.
+-   Check Docker Desktop dashboard for logs, restart, or remove existing virtual machines.
+-   Then try rerunning `wp-env start`.
+
+If you see the error: `Host is already in use by another container`
+
+-   The container you are attempting to start is already running, or another container is. You can stop an existing container by running `wp-env stop` from the directory that you started it in.
+-   If you do not remember the directory where you started `wp-env`, you can stop all containers by running `docker stop $(docker ps -q)`. This will stop all Docker containers, so use with caution.
+-   Then try rerunning `wp-env start`.
+
+### Ubuntu Docker setup
+
+If you are using a version of Ubuntu prior to 20.04.1, you may encounter errors when setting up a local WordPress environment with `wp-env`. 
+
+To resolve this, start by following the [installation guide](https://docs.docker.com/install/linux/docker-ce/ubuntu/) from Docker. `docker-compose` is also required, which you may need to install separately. Refer to the [Docker compose documentation](https://docs.docker.com/compose/install/).
+
+Once Docker and `wp-env` are installed, and assuming `wp-env` is configured globally, try running `wp-env start` in a directory. If you run into this error:
+
+```
+ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?
+
+If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
+```
+
+First, make sure Docker is running. You can check by running `ps -ef | grep docker`, which should return something like:
+
+```
+/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
+```
+
+If Docker is not running, try starting the service by running `sudo systemctl start docker.service`.
+
+If Docker is running, then it is not listening to how the WordPress environment is trying to communicate. Try adding the following service override file to include listening on `tcp`. See [this Docker documentation](https://docs.docker.com/config/daemon/remote-access/) on how to configure remote access for Docker daemon.
+
+```
+# /etc/systemd/system/docker.service.d/override.conf
+[Service]
+ExecStart=
+ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2376
+```
+
+Restart the service from the command-line:
+
+```
+sudo systemctl daemon-reload
+sudo systemctl restart docker.service
+```
+
+After restarting the services, set the environment variable `DOCKER_HOST` and try starting `wp-env` with:
+
+```
+export DOCKER_HOST=tcp://127.0.0.1:2376
+wp-env start
+```
+
+Your environment should now be set up at <code>http://localhost:8888</code>.
+
+## Additional resources
+
+- [@wordpress/env](https://www.npmjs.com/package/@wordpress/env) (Official documentation)
+- [Docker Desktop](https://docs.docker.com/desktop) (Official documentation)
+- [Quick and easy local WordPress development with wp-env](https://developer.wordpress.org/news/2023/03/quick-and-easy-local-wordpress-development-with-wp-env/) (WordPress Developer Blog)
+- [wp-env: Simple Local Environments for WordPress](https://make.wordpress.org/core/2020/03/03/wp-env-simple-local-environments-for-wordpress/) (Make WordPress Core Blog)
+- [`wp-env` Basics diagram](https://excalidraw.com/#json=8Tp55B-R6Z6-pNGtmenU6,_DeBR1IBxuHNIKPTVEaseA) (Excalidraw)
diff --git a/docs/getting-started/devenv/get-started-with-wp-scripts.md b/docs/getting-started/devenv/get-started-with-wp-scripts.md
new file mode 100644
index 00000000000000..16f1bbc6015b5b
--- /dev/null
+++ b/docs/getting-started/devenv/get-started-with-wp-scripts.md
@@ -0,0 +1,150 @@
+# Get started with wp-scripts
+
+The [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) package, commonly referred to as `wp-scripts`, is a set of configuration files and scripts that primarily aims to standardize and simplify the development process of WordPress projects that require a JavaScript build step.
+
+A JavaScript build step refers to the process of transforming, bundling, and optimizing JavaScript source code and related assets into a format suitable for production environments. These build steps often take modern JavaScript (ESNext and JSX) and convert it to a version compatible with most browsers. They can also bundle multiple files into one, minify the code to reduce file size and perform various other tasks to optimize the code.
+
+You will typically be working with ESNext and JSX when building for the Block Editor, and all examples in the Block Editor Handbook are written in these syntaxes. Learning how to set up a build step is essential. However, configuring the necessary tools like [webpack](https://webpack.js.org/), [Babel](https://babeljs.io/), and [ESLint](https://eslint.org/) can become complex. This is where `wp-scripts` comes in.
+
+Here are a few things that `wp-scripts` can do: 
+
+- **Compilation:** Converts modern JavaScript (ESNext and JSX) into code compatible with most browsers, using Babel.
+- **Bundling:** Uses webpack to combine multiple JavaScript files into a single bundle for better performance.
+- **Code Linting:** Provides configurations for ESLint to help ensure code quality and conformity to coding standards.
+- **Code Formatting:** Incorporates Prettier for automated code styling to maintain consistent code formatting across projects.
+- **Sass Compilation:** Converts Sass (.scss or .sass) files to standard CSS.
+- **Code Minification:** Reduces the size of the JavaScript code for production to ensure faster page loads.
+
+The package abstracts away much of the initial setup, configuration, and boilerplate code associated with JavaScript development for modern WordPress. You can then focus on building blocks and Block Editor extensions.
+
+## Quick start
+
+<div class="callout callout-tip">
+    If you use <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/"><code>@wordpress/create-block</code></a> package to scaffold the structure of files needed to create and register a block, you'll also get a modern JavaScript build setup (using <code>wp-scripts</code>) with no configuration required, so you don't need to worry about installing <code>wp-scripts</code> or enqueuing assets. Refer to <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/">Get started with <code>create-block</code></a> for more details.
+</div>
+
+### Installation
+
+Ensure you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not. 
+
+Then, create a project folder and ensure it contains a `package.json` file, a `build` folder, and an `src` folder. The `src` folder should also include an `index.js` file. 
+
+If you have not created a `package.json` file before, navigate to the project folder in the terminal and run the `npm init` command. An interactive prompt will walk you through the steps. Configure as you like, but when it asks for the "entry point", enter `build/index.js`.
+
+Of course, there are many ways to set up a project using `wp-scripts`, but this is the recommended approach used throughout the Block Editor Handbook.
+
+Finally, install the `wp-scripts` package as a development dependency by running the command:
+
+```bash
+npm install @wordpress/scripts --save-dev
+```
+
+Once the installation is complete, your project folder should look like this:
+
+```bash
+example-project-folder/
+├── build/
+├── node_modules/ (autogenerated)
+├── src/
+│   └── index.js
+├── package-lock.json (autogenerated)
+└── package.json
+```
+
+### Basic usage
+
+Once installed, you can run the predefined scripts provided with `wp-scripts` by referencing them in the scripts section of your `package.json` file. Here’s an example:
+
+```json
+{
+    "scripts": {
+        "start": "wp-scripts start",
+        "build": "wp-scripts build"
+    }
+}
+```
+
+These scripts can then be run using the command `npm run {script name}`. 
+
+### The build process with `wp-scripts`
+
+The two scripts you will use most often are `start` and `build` since they handle the build step. See the [package documentation](https://developer.wordpress.org/block-editor/packages/packages-scripts/) for all options.
+
+When working on your project, use the `npm run start` command. This will start a development server and automatically rebuild the project whenever any change is detected. Note that the compiled code in `build/index.js` will not be optimized.
+
+When you are ready to deploy your project, use the `npm run build` command. This optimizes your code and makes it production-ready.
+
+After the build finishes, you will see the compiled JavaScript file created at `build/index.js`. 
+
+A `build/index.asset.php` file will also be created in the build process, which contains an array of dependencies and a version number (for cache busting). Please, note that to register a block without this `wp-scripts` build process you'll need to manually create `*.asset.php` dependencies files (see [example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-no-build-e621a6)).
+
+### Enqueuing assets
+
+If you register a block via `register_block_type` the scripts defined in `block.json` will be automatically enqueued (see [example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda))
+
+To manually enqueue files in the editor, in any other context, you can refer to the [Enqueueing assets in the Editor](https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/) guide for more information, but here's a typical implementation. 
+
+```php
+/**
+ * Enqueue Editor assets.
+ */
+function example_project_enqueue_editor_assets() {
+    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
+
+    wp_enqueue_script(
+        'example-editor-scripts',
+        plugins_url( 'build/index.js', __FILE__ ),
+        $asset_file['dependencies'],
+        $asset_file['version']
+    );
+}
+add_action( 'enqueue_block_editor_assets', 'example_project_enqueue_editor_assets' );
+```
+
+Here's [an example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) of manually enqueuing files in the editor.
+
+## Next steps
+
+While `start` and `build` will be the two most used scripts, several other useful tools come with `wp-scripts` that are worth exploring. Here's a look at a few.
+
+### Maintaining code quality
+
+To help developers improve the quality of their code, `wp-scripts` comes pre-configured with tools like ESLint and Prettier. ESLint ensures your JavaScript adheres to best practices and the [WordPress coding standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/), while Prettier automatically formats your code. The available scripts include: 
+
+```json
+{
+    "scripts": {
+        "format": "wp-scripts format",
+        "lint:css": "wp-scripts lint-style",
+        "lint:js": "wp-scripts lint-js",
+    }
+}
+```
+
+Regularly linting and formatting your code ensures it's functional, clear, and maintainable for yourself and other developers.
+
+### Running tests
+
+Beyond just writing code, verifying its functionality is crucial. `wp-scripts` includes [Jest](https://jestjs.io/), a JavaScript testing framework, and both end-to-end and unit testing scripts:
+
+```json
+{
+    "scripts": {
+        "test:e2e": "wp-scripts test-e2e",
+        "test:unit": "wp-scripts test-unit-js"
+    }
+}
+```
+
+Unit tests validate individual units of code, such as functions, ensuring they work as intended, while end-to-end (E2E) tests evaluate the entire project by simulating real-world user scenarios to ensure all parts of the system work seamlessly together.
+
+### Advanced configurations 
+
+While `wp-scripts` provides a solid default configuration, there might be cases where you need more specialized setups. The good news is `wp-scripts` is highly adaptable. For example, you can extend and override the default webpack configuration, allowing you to add loaders and plugins or modify almost any part of the build process. This flexibility ensures that as your project grows or its requirements change, `wp-scripts` can be tailored to your evolving needs.
+
+See the `wp-scripts` [package documentation](https://developer.wordpress.org/block-editor/packages/packages-scripts/) for all configuration options.
+
+## Additional resources
+
+- [@wordpress/scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) (Official documentation)
+- [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) (WordPress Developer Blog)
diff --git a/docs/getting-started/devenv/nodejs-development-environment.md b/docs/getting-started/devenv/nodejs-development-environment.md
new file mode 100644
index 00000000000000..8eb72bd88268da
--- /dev/null
+++ b/docs/getting-started/devenv/nodejs-development-environment.md
@@ -0,0 +1,50 @@
+# Node.js development environment
+
+When developing for the Block Editor, you will need [Node.js](https://nodejs.org/en) development tools along with a code editor and a local WordPress environment (see [Block Development Environment](/docs/getting-started/devenv/README.md)). Node.js (`node`) is an open-source runtime environment that allows you to execute JavaScript code from the terminal (also known as a command-line interface, CLI, or shell)
+
+Installing `node` will automatically include the Node Package Manager (`npm`) and the Node Package eXecute (`npx`), two tools you will frequently use in block and plugin development.
+
+Node Package Manager ([`npm`](https://docs.npmjs.com/cli/v10/commands/npm)) serves multiple purposes, including dependency management and script execution. It's the recommended package manager and is extensively featured in all documentation.
+
+The Node Package eXecute ([`npx`](https://docs.npmjs.com/cli/v10/commands/npx)) tool is used to run commands from packages without installing them globally and is commonly used when scaffolding blocks with the [`create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package.
+
+
+## Node.js installation on Mac and Linux (with `nvm`)
+
+It's recommended that you use [Node Version Manager](https://github.com/nvm-sh/nvm) (`nvm`) to install Node.js. This allows you to install and manage specific versions of `node`, which are installed locally in your home directory, avoiding any global permission issues.
+
+Here are the quick instructions for installing `node` using `nvm` and setting the recommended Node.js version for block development. See the [complete installation guide](https://github.com/nvm-sh/nvm#installing-and-updating) for more details.
+
+1. Open the terminal and run the following to install `nvm`. On macOS, the required developer tools are not installed by default. Install them if prompted.
+
+```sh
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+```
+
+2. Quit and restart the terminal.
+3. Run `nvm install --lts` in the terminal to install the latest [LTS](https://nodejs.org/en/about/previous-releases) (Long Term Support) version of Node.js.
+4. Run `node -v` and `npm -v` in the terminal to verify the installed `node` and `npm` versions.
+
+If needed, you can also install specific versions of `node`. For example, install version 18 by running `nvm install 18`, and switch between different versions by running `nvm use [version-number]`. See the `nvm` [usage guide](https://github.com/nvm-sh/nvm#usage) for more details.
+
+Some projects, like Gutenberg, include an [`.nvmrc`](https://github.com/WordPress/gutenberg/blob/trunk/.nvmrc) file which specifies the version of `node` that should be used. In this case, running `nvm use` will automatically select the correct version. If the version is not yet installed, you will get an error that tells you what version needs to be added. Run `nvm install [version-number]` followed by `nvm use`.
+
+## Node.js installation on Windows and others
+
+You can [download a Node.js installer](https://nodejs.org/en/download/) directly from the main Node.js website. The latest version is recommended. Installers are available for Windows and Mac, and binaries are available for Linux. 
+
+Microsoft also provides a [detailed guide](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows#install-nvm-windows-nodejs-and-npm) on how to install `nvm` and Node.js on Windows and WSL.
+
+## Troubleshooting
+
+If you encounter the error `zsh: command not found: nvm` when attempting to install `node`, you might need to create the default profile file. 
+
+The default shell is `zsh` on macOS, so create the profile file by running `touch ~/.zshrc` in the terminal. It's fine to run if the file already exists. The default profile is `bash` for Ubuntu, including WSL, so use `touch ~/.bashrc` instead. Then repeat steps 2-4.
+
+The latest `node` version should work for most development projects, but be aware that some packages and tools have specific requirements. If you encounter issues, you might need to install and use a previous `node` version. Also, make sure to check if the project has an `.nvmrc` and use the `node` version indicated.
+
+## Additional resources
+
+-   [Node.js](https://nodejs.org/en) (Official documentation)
+-   [Node Version Manager](https://github.com/nvm-sh/nvm) (Official documentation)
+-   [Installing Node.js and npm for local WordPress development](https://learn.wordpress.org/tutorial/installing-node-js-and-npm-for-local-wordpress-development/) (Learn WordPress tutorial)
\ No newline at end of file
diff --git a/docs/getting-started/faq.md b/docs/getting-started/faq.md
new file mode 100644
index 00000000000000..8ac489e3c154a2
--- /dev/null
+++ b/docs/getting-started/faq.md
@@ -0,0 +1,219 @@
+# Frequently Asked Questions
+
+What follows is a set of questions that have come up from the last few years of Gutenberg development. If you have any questions you’d like to have answered and included here, [just open up a GitHub issue](https://github.com/WordPress/gutenberg/issues) with your question. We’d love the chance to answer and provide clarity to questions we might not have thought to answer. For a look back historically, please see Matt's November 2018 post [WordPress 5.0: A Gutenberg FAQ](https://ma.tt/2018/11/a-gutenberg-faq/).
+
+## The Gutenberg Project
+
+### What is Gutenberg?
+
+“Gutenberg” is the name of the project to create a new editor experience for WordPress — contributors have been working on it since January 2017 and it’s one of the most significant changes to WordPress in years. It’s built on the idea of using “blocks” to write and design posts and pages. This will serve as the foundation for future improvements to WordPress, including blocks as a way not just to design posts and pages, but also entire sites. The overall goal is to simplify the first-time user experience of WordPress — for those who are writing, editing, publishing, and designing web pages. The editing experience is intended to give users a better visual representation of what their post or page will look like when they hit publish. Originally, this was the kickoff goal:
+
+> The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
+
+Key takeaways include the following points:
+
+-   Authoring richly laid-out posts is a key strength of WordPress.
+-   By embracing blocks as an interaction paradigm, we can unify multiple different interfaces into one. Instead of learning how to write shortcodes and custom HTML, or pasting URLs to embed media, there's a common, reliable flow for inserting any kind of content.
+-   “Mystery meat” refers to hidden features in software, features that you have to discover. WordPress already supports a large number of blocks and 30+ embeds, so let's surface them.
+
+Gutenberg is developed on [GitHub](https://github.com/WordPress/gutenberg) under the WordPress organization. The block editor has been available in core WordPress since 5.0. If you want to test upcoming features from Gutenberg project, it is [available in the plugin repository](https://wordpress.org/plugins/gutenberg/).
+
+### What’s on the roadmap long term?
+
+There are four phases of Gutenberg which you can see on the [official WordPress roadmap](https://wordpress.org/about/roadmap/). As of writing this, we’re currently in phase 2:
+
+1. Easier Editing — Already available in WordPress since 5.0, with ongoing improvements.
+2. Customization — Full Site editing, Block Patterns, Block Directory, Block based themes.
+3. Collaboration — A more intuitive way to co-author content
+4. Multi-lingual — Core implementation for Multi-lingual sites
+
+### When was Gutenberg started?
+
+The editor focus started in early 2017 with the first three months spent designing, planning, prototyping, and testing prototypes, to help us inform how to approach this project. The first plugin was launched during WordCamp Europe in June 2017.
+
+### When was Gutenberg merged into WordPress?
+
+Gutenberg was first merged into [WordPress 5.0](https://wordpress.org/news/2018/12/bebo/) in December 2018. See [the versions in WordPress page](https://developer.wordpress.org/block-editor/principles/versions-in-wordpress/) for a complete list of Gutenberg plugin versions merged into WordPress core releases.
+
+### WordPress is already the world's most popular publishing platform. Why change the editor at all?
+
+The Editor is where most of the action happens in WordPress’s daily use, and it was a place where we could polish and perfect the block experience in a contained environment. Further, as an open-source project, we believe that it is critical for WordPress to continue to innovate and keep working to make the core experience intuitive and enjoyable for all users. As a community project, Gutenberg has the potential to do just that, and we’re excited to pursue this goal together. If you’d like to test, contribute, or offer feedback, we welcome you to [share what you find on GitHub](https://github.com/WordPress/gutenberg/issues).
+
+## The Editing Experience
+
+### What are “blocks” and why are we using them?
+
+The classic WordPress editor is an open text window—it’s always been a wonderful blank canvas for writing, but when it comes to building posts and pages with images, multimedia, embedded content from social media, polls, and other elements, it required a mix of different approaches that were not always intuitive:
+
+-   Media library/HTML for images, multimedia and approved files.
+-   Pasted links for embeds.
+-   Shortcodes for specialized assets from plugins.
+-   Featured images for the image at the top of a post or page.
+-   Excerpts for subheadings.
+-   Widgets for content on the side of a page.
+
+As we thought about these uses and how to make them obvious and consistent, we began to embrace the concept of “blocks.” All of the above items could be blocks: easy to search and understand, and easy to dynamically shift around the page. The block concept is very powerful, and when designed thoughtfully, can offer an outstanding editing and publishing experience. Ultimately, the idea with blocks is to create a new common language across WordPress, a new way to connect users to plugins, and replace a number of older content types — things like shortcodes and widgets — that one usually has to be well-versed in the idiosyncrasies of WordPress to understand.
+
+### What is the writing experience like?
+
+Our goal with Gutenberg is not just to create a seamless post- and page-building experience. We also want to ensure that it provides a seamless writing experience. To test this out yourself, [head to this demo and give it a try](https://wordpress.org/gutenberg/)!
+
+### Is Gutenberg built on top of TinyMCE?
+
+No. [TinyMCE](https://www.tinymce.com/) is only used for the "Classic" block.
+
+### Are there Keyboard Shortcuts for Gutenberg?
+
+Yes. There are a lot! There is a help modal showing all available keyboard shortcuts.
+
+You can see the whole list going to the top right corner menu of the new editor and clicking on “Keyboard Shortcuts” (or by using the keyboard shortcut <kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd> on Linux/Windows and <kbd>⌃</kbd><kbd>⌥</kbd><kbd>H</kbd> on macOS).
+
+Here is a brief animation illustrating how to find and use the keyboard shortcuts:
+
+![GIF showing how to access keyboard shortcuts](https://make.wordpress.org/core/files/2020/07/keyboard-shortcuts.gif)
+
+### Does Gutenberg support columns?
+
+Yes, a columns block is available in Gutenberg.
+
+### Does Gutenberg support nested blocks?
+
+Yes, it is supported. You can have multiple levels of nesting – blocks within blocks within blocks. See the [Nested Block Tutorial](https://developer.wordpress.org/block-editor/tutorials/block-tutorial/nested-blocks-inner-blocks/) for more information.
+
+### Does drag and drop work for rearranging blocks?
+
+Yes, you can drag and drop blocks to rearrange their order.
+
+
+## The Development Experience
+
+### How do I make my own block?
+
+The best place to start is the [Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/).
+
+### Does Gutenberg involve editing posts/pages in the front end?
+
+No, we are designing Gutenberg primarily as a replacement for the post and page editing screens. That said, front-end editing is often confused with an editor that looks exactly like the front end. And that is something that Gutenberg will allow as themes customize individual blocks and provide those styles to the editor. Since content is designed to be distributed across so many different experiences—from desktop and mobile to full-text feeds and syndicated article platforms—we believe it's not ideal to create or design posts from just one front-end experience.
+
+### Given Gutenberg is built in JavaScript, how do old meta boxes (PHP) work?
+
+See the [Meta Box Tutorial](https://developer.wordpress.org/block-editor/how-to-guides/metabox/) for more information on using Meta boxes with the new block editor.
+
+### How can plugins extend the Gutenberg UI?
+
+The main extension point we want to emphasize is creating new blocks. Blocks are added to the block editor using plugins, see the [Build your first block Tutorial](https://developer.wordpress.org/block-editor/getting-started/tutorial/) to get started.
+
+### Are Custom Post Types still supported?
+
+Indeed. There are multiple ways in which custom post types can leverage Gutenberg. The plan is to allow them to specify the blocks they support, as well as defining a default block for the post type. It's not currently the case, but if a post type disables the content field, the “advanced” section at the bottom would fill the page.
+
+## Styles
+
+### Can themes _style_ blocks?
+
+Yes. Blocks can provide their own styles, which themes can add to or override, or they can provide no styles at all and rely fully on what the theme provides.
+
+### How do block styles work in both the front-end and back-end?
+
+Blocks are able to provide base structural CSS styles, and themes can add styles on top of this. Some blocks, like a Separator (`<hr/>`), likely don't need any front-end styles, while others, like a Gallery, need a few.
+
+Other features, like the new _wide_ and _full-wide_ alignment options, are simply CSS classes applied to blocks that offer this alignment. We are looking at how a theme can opt into this feature, for example using `add_theme_support`.
+
+This is currently a work in progress and we recommend reviewing the [block based theme documentation](https://developer.wordpress.org/themes/block-themes/) to learn more.
+
+### What are block variations? Are they the same as block styles?
+
+No, [block variations](/docs/reference-guides/block-api/block-variations.md) are different versions of a single base block, sharing a similar functionality but with slight differences in their implementation or settings (attributes, InnerBlocks, etc.). Block variations are transparent for users, and once there is a registered block variation, it will appear as a new block. For example, the `embed` block registers different block variations to embed content from specific providers.
+
+Meanwhile, [block styles](/docs/reference-guides/filters/block-filters.md#block-style-variations) allow you to provide alternative styles to existing blocks, and they work by adding a `className` to the block’s wrapper. Once a block has registered block styles, a block style selector will appear in its sidebar so that users can choose among the different registered styles.
+
+### How do editor styles work?
+
+Regular editor styles are opt-in and work as is in most cases. Themes can also load extra stylesheets by using the following hook:
+
+```php
+function gutenbergtheme_editor_styles() {
+    wp_enqueue_style( 'gutenbergtheme-blocks-style', get_template_directory_uri() . '/blocks.css');
+}
+add_action( 'enqueue_block_editor_assets', 'gutenbergtheme_editor_styles' );
+```
+
+_See:_ [Editor Styles](/docs/how-to-guides/themes/theme-support.md#editor-styles)
+
+## Compatibility
+
+### What browsers does Gutenberg support?
+
+Gutenberg works in modern browsers.
+
+The [list of supported browsers can be found in the Make WordPress handbook](https://make.wordpress.org/core/handbook/best-practices/browser-support/). The term “modern browsers” generally refers to the _current and previous two versions_ of each major browser.
+
+Since WordPress 5.8, Gutenberg no longer supports any version of Internet Explorer.
+
+### Should I be concerned that Gutenberg will make my plugin obsolete?
+
+The goal of Gutenberg is not to put anyone out of business. It's to evolve WordPress so there's more business to be had in the future, for everyone.
+
+Aside from enabling a rich post and page building experience, a meta goal is to _move WordPress forward_ as a platform. Not only by modernizing the UI, but by modernizing the foundation.
+
+We realize it's a big change. We also think there will be many new opportunities for plugins. WordPress is likely to ship with a range of basic blocks, but there will be plenty of room for highly tailored premium plugins to augment existing blocks or add new blocks to the mix.
+
+### Is it possible to opt out of Gutenberg for my site?
+
+There is a “Classic” block, which is virtually the same as the current editor, except in block form.
+
+There is also the [Classic Editor plugin](https://wordpress.org/plugins/classic-editor/) which restores the previous editor, see the plugin for more information. The WordPress Core team has committed to supporting the Classic Editor plugin [until December 2021](https://make.wordpress.org/core/2018/11/07/classic-editor-plugin-support-window/).
+
+### How do custom TinyMCE buttons work in Gutenberg?
+
+Custom TinyMCE buttons still work in the “Classic” block, which is a block version of the classic editor you know today.
+
+Gutenberg comes with a new universal inserter tool, which gives you access to every block available, searchable, sorted by recency and categories. This inserter tool levels the playing field for every plugin that adds content to the editor, and provides a single interface to learn how to use.
+
+### How do shortcodes work in Gutenberg?
+
+Shortcodes continue to work as they do now.
+
+However we see the block as an evolution of the `[shortcode]`. Instead of having to type out code, you can use the universal inserter tray to pick a block and get a richer interface for both configuring the block and previewing it. We would recommend people eventually upgrade their shortcodes to be blocks.
+
+### Should I move shortcodes to content blocks?
+
+We think so for a variety of reasons including but not limited to:
+
+-   Blocks have visual editing built-in which creates a more rich, dynamic experience for building your site.
+-   Blocks are simply html and don’t persist things the browser doesn't understand on the front-end. In comparison, if you disable a plugin that powers a shortcode, you end up with strange visuals on the front-end (often just showing the shortcode in plain text).
+-   Blocks will be discovered more readily with the launch of the block directory in a way shortcodes never could be allowing for more people to get more functionality.
+
+Ultimately, Blocks are designed to be visually representative of the final look, and, with the launch of the Block Directory in 5.5, they will become the expected way in which users will discover and insert content in WordPress.
+
+## Miscellaneous
+
+### Is Gutenberg made to be properly accessible?
+
+Accessibility is not an afterthought. Not every aspect of Gutenberg is accessible at the moment. You can check logged issues [here](https://github.com/WordPress/gutenberg/labels/Accessibility%20%28a11y%29). We understand that WordPress is for everyone, and that accessibility is about inclusion. This is a key value for us.
+
+If you would like to contribute to the accessibility of Gutenberg, we can always use more people to test and contribute.
+
+### How is data stored? I've seen HTML comments. What is their purpose?
+
+Our approach—as outlined in [the technical overview introduction](https://make.wordpress.org/core/2017/01/17/editor-technical-overview/)—is to augment the existing data format in a way that doesn’t break the decade-and-a-half-fabric of content WordPress provides. In other terms, this optimizes for a format that prioritizes human readability (the HTML document of the web) and easy-to-render-anywhere over a machine convenient file (JSON in post-meta) that benefits the editing context primarily.
+
+This also [gives us the flexibility](https://github.com/WordPress/gutenberg/issues/1516) to store those blocks that are inherently separate from the content stream (reusable pieces like widgets or small post type elements) elsewhere, and just keep token references for their placement.
+
+We suggest you look at the [Gutenberg key concepts](/docs/explanations/architecture/key-concepts.md) to learn more about how this aspect of the project works.
+
+### How can I parse the post content back out into blocks in PHP or JS?
+
+In JS:
+
+```js
+var blocks = wp.blocks.parse( postContent );
+```
+
+In PHP:
+
+```php
+$blocks = parse_blocks( $post_content );
+```
+
+
diff --git a/docs/getting-started/full-site-editing.md b/docs/getting-started/full-site-editing.md
deleted file mode 100644
index 3c3e4153cd422c..00000000000000
--- a/docs/getting-started/full-site-editing.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Full Site Editing
-
-At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551): 
-
-- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more. 
-- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses. 
-- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below. 
-- Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications).
-- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block). 
-- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc. 
-- Navigation Block: a new block that allows you to edit a site's navigation menu, both in terms of structure and design.
-- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality. 
-
-There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places.
-
-**Jump in:**
-
-The best way to learn something is start playing with it. So jump in by installing the Gutenberg plugin from the plugins directory and activating a block theme on a test site. We recommend the [TT1 Blocks theme](https://wordpress.org/themes/tt1-blocks/), it is listed in the theme diretory and our development reference theme. You can find other themes in the directory using the [full-site-editing feature tag](https://wordpress.org/themes/tags/full-site-editing/).
-
-## Get Involved
-
-An ongoing [FSE Outreach program](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/) is in place with calls for testing and is a great way to get involved and learn about the new features.
-
-- Join in on [WordPress Slack](https://make.wordpress.org/chat/) at [#fse-outreach-experiment](https://wordpress.slack.com/archives/C015GUFFC00)
-- Participate in the [Calls for Testing](https://make.wordpress.org/test/tag/fse-testing-call/) by testing and giving feedback.
-- See detailed [How to Test FSE instructions](https://make.wordpress.org/test/handbook/full-site-editing-outreach-experiment/how-to-test-fse/) to get setup to test FSE features.
-
-## Block Themes
-
-If you are using the Gutenberg plugin you can run, test, and develop block themes. Block themes are themes built using templates composed using blocks. See [block theme overview](/docs/how-to-guides/themes/block-theme-overview.md) for additional details.
-
-- See the [Create a Block Theme](/docs/how-to-guides/themes/create-block-theme.md) tutorial for a walk-through of the pieces of a block theme.
-
-- For examples, see the [WordPress/theme-experiments](https://github.com/WordPress/theme-experiments/) repository with several block themes there including the source for the above mentioned TT1 Blocks.
-
-- Use the `empty-theme.php` script from theme-experiments repo to generate a starter block theme, it will prompt you with a few questions and create a theme.
-
-```
-❯ git clone https://github.com/WordPress/theme-experiments
-❯ cd theme-experiments
-❯ php new-empty-theme.php
-Please provide the following information:
-Theme name: TestTheme
-Description: A theme to test
-Author: Marcus Kazmierczak
-Theme URI: https://github.com/mkaz
-
-Your new theme is ready!
-```
-
-You can then copy the generated directory to your `wp-content/themes` directory and start playing with the Site Editor to build and extend the theme.
-
-### Template and Template Parts
-
-See the [architecture document on templates](/docs/explanations/architecture/full-site-editing-templates.md) for an explanation on the internals of how templates and templates parts are rendered in the frontend and edited in the backend.
-
-### theme.json
-
-Instead of the proliferation of theme support flags or alternative methods, a new `theme.json` file is being used to define theme settings.
-
-See [documentation for theme.json](/docs/how-to-guides/themes/theme-json.md).
diff --git a/docs/getting-started/fundamentals/README.md b/docs/getting-started/fundamentals/README.md
new file mode 100644
index 00000000000000..42dbace9d7ba3f
--- /dev/null
+++ b/docs/getting-started/fundamentals/README.md
@@ -0,0 +1,12 @@
+# Fundamentals of Block Development
+
+This section provides an introduction to the most relevant concepts in block development. Use the following links to learn more:
+
+1. **[File structure of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block):** The purpose of each file that composes a block plugin, the relationships between them, and their role in the block output.
+1. **[`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json):** How a block is defined using its `block.json` metadata and some relevant properties of this file (such as `attributes` and `supports`).
+1. **[Registration of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block):** How a block is registered on both the server and in the client.
+1. **[Block wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper):** How to apply the proper attributes to the block's markup wrapper.
+1. **[The block in the Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-in-the-editor):** How a block, as a React component, is loaded in the Block Editor and an overview of its structure.
+1. **[Markup representation of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block):** How blocks are represented in the database, theme templates, and patterns.
+1. **[Static or Dynamic rendering of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering):** How blocks generate their front-end output either dynamically or statically.
+1. **[JavaScript in the Block Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor):** How to work with modern JavaScript when developing for the Block Editor.
diff --git a/docs/getting-started/fundamentals/block-in-the-editor.md b/docs/getting-started/fundamentals/block-in-the-editor.md
new file mode 100644
index 00000000000000..1d51239907d8b5
--- /dev/null
+++ b/docs/getting-started/fundamentals/block-in-the-editor.md
@@ -0,0 +1,169 @@
+# The block in the Editor
+
+The Block Editor is a React Single Page Application (SPA). Every block in the Editor is displayed through a React component defined in the `edit` property of the settings object used to [register the block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registering-a-block-with-javascript-client-side) on the client. 
+
+The `props` object received by the block's `Edit` React component includes:
+
+- **[`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#attributes):** An object of all the block's attributes.
+- **[`setAttributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#setattributes):** A method to update the attributes object.
+- **[`isSelected`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#isselected):** A boolean value that communicates whether the block is currently selected
+
+WordPress provides many built-in standard components that can be used to define the block interface in the Editor. These built-in components are available via packages such as [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) and [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/).
+
+<div class="callout">
+	The WordPress Gutenberg project uses <a href="https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page">Storybook</a> to document the user interface components that are available in WordPress packages.
+</div>
+
+Custom settings controls for the block in the Block Toolbar or the Settings Sidebar can also be defined through this `Edit` React component via built-in components such as:
+
+- [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) 
+- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls) 
+
+## Built-in components
+
+The package [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) includes a library of generic WordPress components to create common UI elements for the Block Editor and the WordPress dashboard. Some of the  most commonly used components from this package are:
+
+- [`TextControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-textcontrol--docs) 
+- [`Panel`](https://wordpress.github.io/gutenberg/?path=/docs/components-panel--docs)
+- [`ToggleControl`](https://wordpress.github.io/gutenberg/?path=/docs/components-togglecontrol--docs)
+- [`ExternalLink`](https://wordpress.github.io/gutenberg/?path=/docs/components-externallink--docs)
+
+The package [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/) includes a library of components and hooks for the Block Editor, including those to define custom settings controls for the block. Some of the components most commonly used from this package are:
+
+- [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)
+- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls)
+- [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md)
+- [`InnerBlocks`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md)
+
+<div class="callout callout-info">
+	The package <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/"><code>@wordpress/block-editor</code></a> also provides the tools to create and use standalone block editors.
+</div>
+
+A good workflow when using a component for the Block Editor is:
+
+- Import the component from a WordPress package.
+- Add the corresponding code for the component to your project in JSX format.
+- Most built-in components will be used to set [block attributes](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#using-attributes-to-store-block-data), so define any necessary attributes in `block.json` and create event handlers to update those attributes with `setAttributes` in your component.
+- Adapt the code to be serialized and stored in the database if needed.
+
+## Block Controls: Block Toolbar and Settings Sidebar
+
+To simplify block customization and ensure a consistent user experience, there are several built-in UI patterns to help generate the Editor preview of a block. 
+
+The image below details the Block Toolbar and the Settings Sidebar of a selected Paragraph block.
+
+![Diagram showing the Block Toolbar and the Settings Sidebar when a Paragraph block is selected](https://developer.wordpress.org/files/2023/12/block-toolbar-settings-sidebar.png)
+
+### Block Toolbar
+
+When the user selects a block, a number of control buttons may be shown in a toolbar above the selected block. Some of these block-level controls may be included automatically, but you can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `Edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.
+
+```jsx
+export default function Edit( { className, attributes: attr, setAttributes } ) {
+
+	const onChangeContent = ( newContent ) => {
+		setAttributes( { content: newContent } );
+	};
+
+	const onChangeAlignment = ( newAlignment ) => {
+		setAttributes( {
+			alignment: newAlignment === undefined ? 'none' : newAlignment,
+		} );
+	};
+
+	return (
+		<div { ...useBlockProps() }>
+			<BlockControls>
+				<ToolbarGroup>
+					<AlignmentToolbar
+						value={ attr.alignment }
+						onChange={ onChangeAlignment }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
+			<RichText
+				className={ className }
+				style={ { textAlign: attr.alignment } }
+				tagName="p"
+				onChange={ onChangeContent }
+				value={ attr.content }
+			/>
+		</div>
+	);
+}
+```
+
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-toolbar-ab967f) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/block-toolbar-ab967f/src/edit.js)._
+
+Note that `BlockControls` is only visible when the block is currently selected and in visual editing mode. `BlockControls` are not shown when editing a block in HTML editing mode.
+
+### Settings Sidebar
+
+The Settings Sidebar is used to display less-often-used settings or those that require more screen space. The Settings Sidebar should be used for **block-level settings only** and is shown when a block is selected.
+
+If a setting only affects selected content inside a block, such as "bolding" text, **do not place the setting inside the Settings Sidebar**. Use a toolbar instead. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings.
+
+Similar to rendering a toolbar, if you include an `InspectorControls` component in the `return` value of your block type's `Edit` function, those controls will be shown in the Settings Sidebar region.
+
+```jsx
+export default function Edit( { attributes, setAttributes } ) {
+	const onChangeBGColor = ( hexColor ) => {
+		setAttributes( { bg_color: hexColor } );
+	};
+
+	const onChangeTextColor = ( hexColor ) => {
+		setAttributes( { text_color: hexColor } );
+	};
+
+	return (
+		<div { ...useBlockProps() }>
+			<InspectorControls key="setting">
+				<div>
+					<fieldset>
+						<legend className="blocks-base-control__label">
+							{ __( 'Background color', 'block-development-examples' ) }
+						</legend>
+						<ColorPalette // Element Tag for Gutenberg standard color selector
+							onChange={ onChangeBGColor } // onChange event callback
+						/>
+					</fieldset>
+					<fieldset>
+						<legend className="blocks-base-control__label">
+							{ __( 'Text color', 'block-development-examples' ) }
+						</legend>
+						<ColorPalette
+							onChange={ onChangeTextColor }
+						/>
+					</fieldset>
+				</div>
+			</InspectorControls>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ attributes.message }
+				onChange={ ( val ) => setAttributes( { message: val } ) }
+				style={ {
+					backgroundColor: attributes.bg_color,
+					color: attributes.text_color,
+				} }
+			/>
+		</div>
+	);
+}
+```
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/settings-sidebar-82c525) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/settings-sidebar-82c525/src/edit.js)._
+
+Block controls rendered in both the toolbar and sidebar will also be available when multiple blocks of the same type are selected.
+
+<div class="callout callout-note">
+	For common customization settings, including color, border, spacing, and more, you can rely on <a href="https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#enable-ui-settings-panels-for-the-block-with-supports">block supports</a> instead of a custom solution. Block supports provide a consistent UI with the same functionality as other Core blocks.
+</div>
+
+## Additional resources
+
+- [Storybook for WordPress components](https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page)
+- [@wordpress/block-editor](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/)
+- [@wordpress/components](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/)
+- [`InspectorControls`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md)
+- [`BlockControls`](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-controls)
diff --git a/docs/getting-started/fundamentals/block-json.md b/docs/getting-started/fundamentals/block-json.md
new file mode 100644
index 00000000000000..a0e81a84a5f751
--- /dev/null
+++ b/docs/getting-started/fundamentals/block-json.md
@@ -0,0 +1,135 @@
+# block.json
+
+The `block.json` file simplifies the process of defining and registering a block by using the same block's definition in JSON format to register the block on both the server and the client (Block Editor).
+
+The diagram below details the basic structure of the `block.json` file.
+
+[![Open block.json diagram image](https://developer.wordpress.org/files/2023/11/block-json.png)](https://developer.wordpress.org/files/2023/11/block-json.png "Open block.json diagram image")
+
+<div class="callout callout-info">
+	To view a complete block example and its associated <a href="https://github.com/WordPress/block-development-examples/blob/trunk/plugins/block-supports-6aa4dd/src/block.json"><code>block.json</code></a> file, visit the <a href="https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-supports-6aa4dd">Block Development Examples</a> GitHub repository.
+</div>
+
+Besides simplifying a block's registration, using a `block.json` has [several benefits](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file), including improved performance.
+
+The [Metadata in block.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) documentation has a comprehensive guide on all the properties you can use in a `block.json` file for a block. This article will cover the most common options, which allow you to specify:
+
+- The block's basic metadata.
+- The files that dictate the block's functionality, appearance, and output.
+- How data is stored within the block.
+- The block's setting panels within the user interface.
+
+## Basic metadata of a block
+
+Using `block.json` properties, you can define how the block will be uniquely identified and what information is displayed in the Block Editor. These properties include:
+
+- **[`apiVersion`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#api-version):** Specifies the [API](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/) version the block uses. Use the latest version unless you have specific requirements.
+- **[`name`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#name):**  The unique name of the block, including namespace (e.g., `my-plugin/my-custom-block`).
+- **[`title`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#title):** The display title for the block, shown in the Inserter.
+- **[`category`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#category):** The category under which the block appears in the Inserter. Common categories include `text`, `media`, `design`, `widgets`, and `theme`.
+- **[`icon`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#icon):**  An icon representing the block in the Inserter. This can be a [Dashicon](https://developer.wordpress.org/resource/dashicons) slug or a custom SVG icon.
+- **[`description`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#description):**  A short description of the block, providing more context than the title.
+- **[`keywords`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#keywords):** An array of keywords to help users find the block when searching.
+- **[`textdomain`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#text-domain):** The text domain for the block, used for internationalization.
+
+## Files for the block's behavior, output, or style 
+
+The `block.json` file also allows you to specify the essential files for a block's functionality:
+
+- **[`editorScript`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-script):** A JavaScript file or files for use only in the Block Editor.
+- **[`editorStyle`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style):** A CSS file or files for styling within the Block Editor.
+- **[`script`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script):** A JavaScript file or files loaded in both the Block Editor and the front end.
+- **[`style`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style):** A CSS file or files applied in both the Block Editor and the front end.
+- **[`viewScript`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script):** A JavaScript file or files intended solely for the front end.
+
+For all these properties, you can provide a [file path](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#wpdefinedpath) (starting with `file:`), a [handle](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#wpdefinedasset) that has been registered using `wp_register_script` or `wp_register_style`, or an array combining both options.
+
+Additionally, the [`render`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#render) property, [introduced on WordPress 6.1](https://make.wordpress.org/core/2022/10/12/block-api-changes-in-wordpress-6-1/), specifies the path to a PHP template file responsible for generating a [dynamically rendered](/docs/getting-started/fundamentals/static-dynamic-rendering.md) block's front-end markup. This approach is used if a `$render_callback` function is not provided to the `register_block_type()` function.
+
+## Using block `attributes` to store data
+
+Block [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#attributes) are settings or data assigned to blocks. They can determine various aspects of a block, such as its content, layout, style, and any other specific information you need to store along with your block's structure. If the user changes a block, such as modifying the font size, you need a way to persist these changes. Attributes are the solution. 
+
+When registering a new block type, the `attributes` property of `block.json` describes the custom data the block requires and how they're stored in the database. This allows the Block Editor to parse these values correctly and pass the `attributes` to the block's `Edit` component and `save` function.
+
+Here's an example of three attributes defined in `block.json`:
+
+```json
+"attributes": {
+	"fallbackCurrentYear": {
+		"type": "string"
+	},
+	"showStartingYear": {
+		"type": "boolean"
+	},
+	"startingYear": {
+		"type": "string"
+	}
+},
+```
+
+Blocks are "delimited" using HTML-style comment tags that contain specific JSON-like attributes. These delimiters make it possible to recognize block boundaries and parse block attributes when rendering post content or editing a post in the Block Editor. 
+
+The code example below demonstrates the attributes defined in the block delimiter. 
+
+```html
+<!-- wp:block-development-examples/copyright-date-block-09aac3 {"fallbackCurrentYear":"2023","showStartingYear":true,"startingYear":"2020"} -->
+<p class="wp-block-block-development-examples-copyright-date-block-09aac3">© 2020–2023</p>
+<!-- /wp:block-development-examples/copyright-date-block-09aac3 -->
+```
+ 
+All attributes are serialized and stored in the block's delimiter by default, but this can be configured to suit your needs. Check out the [Understanding Block Attributes](https://developer.wordpress.org/news/2023/09/understanding-block-attributes/) article to learn more.
+
+### Reading and updating attributes 
+
+These [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#attributes) are passed to the block's `Edit` React component for display in the Block Editor, to the `save` function for generating the markup that gets stored in the database, and to any server-side rendering definition for the block.
+
+The `Edit` component uniquely possesses the ability to modify these attributes through the [`setAttributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#setattributes) function.
+
+The following diagram details how attributes are stored, read, and updated in a typical block.
+
+[![Open Attributes diagram image](https://developer.wordpress.org/files/2023/11/attributes.png)](https://developer.wordpress.org/files/2023/11/attributes.png "Open Attributes diagram image")
+
+_See how the attributes are passed to the [`Edit`](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/copyright-date-block-09aac3/src/edit.js) component, the [`save`](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/copyright-date-block-09aac3/src/save.js) function, and [`render.php`](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/copyright-date-block-09aac3/src/render.php) in this [complete block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/copyright-date-block-09aac3)._
+
+For more information about attributes and how to use them in your custom blocks, visit the [Attributes API](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) reference page. 
+
+## Using block supports to enable settings and styles
+
+Many blocks, including Core blocks, offer similar customization options, such as background color, text color, and padding adjustments.
+
+The [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#supports) property in `block.json` allows a block to declare support for a set of these common customization options. When enabled, users of the block can then adjust things like color or padding directly from the Settings Sidebar.
+
+Leveraging these predefined block supports helps ensure your block behaves consistently with Core blocks, eliminating the need to recreate similar functionalities from scratch.
+
+Here's an example of color supports defined in `block.json`:
+
+```json
+"supports": {
+	"color": {
+		"text": true,
+		"link": true,
+		"background": true
+	}
+}
+```
+
+The use of block supports generates a set of properties that need to be manually added to the [wrapping element of the block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/). This ensures they're properly stored as part of the block data and taken into account when generating the markup of the block that will be delivered to the front end.
+
+The following code demonstrates how the attributes and CSS classes generated by enabling block supports are stored in the markup representation of the block.
+
+```html
+<!-- wp:block-development-examples/block-supports-6aa4dd {"backgroundColor":"contrast","textColor":"accent-4"} -->
+<p class="wp-block-block-development-examples-block-supports-6aa4dd has-accent-4-color has-contrast-background-color has-text-color has-background">Hello World</p>
+<!-- /wp:block-development-examples/block-supports-6aa4dd -->
+```
+
+_See the [complete block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-supports-6aa4dd) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/block-supports-6aa4dd/src/block.json)._
+
+For more information about supports and how to use them in your custom blocks, visit the [Supports API](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) reference page. 
+
+
+## Additional resources
+
+- [block.json diagram](https://excalidraw.com/#json=v1GrIkGsYGKv8P14irBy6,Yy0vl8q7DTTL2VsH5Ww27A)
+- [Attributes diagram](https://excalidraw.com/#json=pSgCZy8q9GbH7r0oz2fL1,MFCLd6ddQHqi_UqNp5ZSgg)
\ No newline at end of file
diff --git a/docs/getting-started/fundamentals/block-wrapper.md b/docs/getting-started/fundamentals/block-wrapper.md
new file mode 100644
index 00000000000000..98c435f6ebe2f7
--- /dev/null
+++ b/docs/getting-started/fundamentals/block-wrapper.md
@@ -0,0 +1,111 @@
+# The block wrapper
+
+Every block in the Block Editor is contained within an HTML wrapper, which must have specific attributes to function correctly both in the Editor and on the front end. As developers, we can directly manipulate this markup, and WordPress offers tools like `useBlockProps()` to modify the attributes added to a block's wrapper.
+
+Ensuring proper attributes to the block wrapper is especially important when using custom styling or features like [block supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/).
+
+A block in WordPress can be defined with three distinct types of markup, each serving a unique role:
+
+- **Editor Markup:** This is the visual representation of the block within the Block Editor. It's defined using an `Edit` React component when the block is registered on the client side via [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#registerblocktype).
+- **Save Markup:** This markup is what gets saved to the database when the block's content is saved. It's specified through a `save` function, also provided to `registerBlockType` during block registration. If the block doesn't utilize dynamic rendering, this saved markup is what will be displayed on the front end.
+- **Dynamic Render Markup:** When a block's content needs to be generated dynamically, this markup comes into play. It's defined server-side, either through a `render_callback` function in [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) or a [`render.php`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#render) file specified in `block.json`. If present, this markup overrides any saved markup and is used for the block's front-end display.
+
+For both the [`Edit` component and the `save` function](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/), it's important to use a wrapper element that's a standard DOM element (like a `<div>`) or a React component that passes all additional props to native DOM elements. Using React Fragments (`<Fragment>`) or the `<ServerSideRender>` component won't work for these wrappers.
+
+## Editor markup
+
+The [`useBlockProps()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops) hook, provided by the [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor) package, is used to define the outer markup of a block in the `Edit` component.
+
+This hook simplifies several tasks, including:
+
+- Assigning a unique `id` to the block's HTML structure.
+- Adding various accessibility and `data-` attributes for enhanced functionality and information.
+- Incorporating classes and inline styles that reflect the block's custom settings. By default, this includes:
+    - The `wp-block` class for general block styling.
+    - A block-specific class that combines the block's namespace and name, ensuring unique and targeted styling capabilities.
+
+In the following example, the Editor markup of the block is defined in the `Edit` component using the `useBlockProps()` hook.
+
+```js
+const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
+
+registerBlockType( ..., {
+	edit: Edit
+} );
+```
+
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/src/index.js)._
+
+The markup of the block in the Block Editor could look like this, where the classes and attributes are applied automatically:
+
+```html
+<p
+    tabindex="0"
+    id="block-4462939a-b918-44bb-9b7c-35a0db5ab8fe"
+    role="document"
+    aria-label="Block: Minimal Gutenberg Block ca6eda"
+    data-block="4462939a-b918-44bb-9b7c-35a0db5ab8fe"
+    data-type="block-development-examples/minimal-block-ca6eda"
+    data-title="Minimal Gutenberg Block ca6eda"
+    class="
+        block-editor-block-list__block
+        wp-block
+        is-selected
+        wp-block-block-development-examples-minimal-block-ca6eda
+    "
+>Hello World - Block Editor</p>
+```
+
+In a block's `Edit` component, use the `useBlockProps()` hook to include additional classes and attributes by passing them as arguments. (See [example](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/edit.js))
+
+When you enable features using the `supports` property, any corresponding classes or attributes are included in the object returned by `useBlockProps` automatically.
+
+## Save markup
+
+When saving the markup in the database, it’s important to add the props returned by `useBlockProps.save()` to the wrapper element of your block. `useBlockProps.save()` ensures that the block class name is rendered correctly in addition to any HTML attributes injected by the block supports API.
+
+Consider the following code that registers a block in the client. Notice how it defines the markup that should be used when editing the block and when the block is saved in the database.
+
+```js
+const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
+const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;
+
+registerBlockType( ..., {
+	edit: Edit,
+	save,
+} );
+```
+
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/src/index.js)._
+
+The markup of the block on the front end could look like this, where the class is applied automatically:
+
+```html
+<p class="wp-block-block-development-examples-minimal-block-ca6eda">Hello World – Frontend</p>
+```
+
+If you want to add any additional classes or attributes to the `save` function of the block, they should be passed as an argument of `useBlockProps.save()`. (See [example](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/stylesheets-79a4c3/src/save.js))
+
+When you add `supports` for any feature, the proper classes get added to the object returned by the `useBlockProps.save()` hook. Text and background color classes have been added to the Paragraph block in the example below.
+
+```html
+<p class="
+    wp-block-block-development-examples-block-supports-6aa4dd
+    has-accent-4-color
+    has-contrast-background-color
+    has-text-color
+    has-background
+">Hello World</p>
+```
+
+The [example block](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/block-supports-6aa4dd) that generated this HTML is available in the [Block Development Examples](https://github.com/WordPress/block-development-examples) repository.
+
+## Dynamic render markup
+
+In dynamic blocks, where the front-end markup is rendered server-side, you can utilize the [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) function to output the necessary classes and attributes just like you would use `useBlockProps.save()` in the `save` function. (See [example](https://github.com/WordPress/block-development-examples/blob/f68640f42d993f0866d1879f67c73910285ca114/plugins/block-dynamic-rendering-64756b/src/render.php#L11))
+
+```php
+<p <?php echo get_block_wrapper_attributes(); ?>>
+	<?php esc_html_e( 'Block with Dynamic Rendering – hello!!!', 'block-development-examples' ); ?>
+</p>
+```
diff --git a/docs/getting-started/fundamentals/file-structure-of-a-block.md b/docs/getting-started/fundamentals/file-structure-of-a-block.md
new file mode 100644
index 00000000000000..24972b219e0b60
--- /dev/null
+++ b/docs/getting-started/fundamentals/file-structure-of-a-block.md
@@ -0,0 +1,90 @@
+# File structure of a block
+
+When developing custom blocks for WordPress, it's best practice to register them within plugins rather than themes. This strategy guarantees that your blocks stay accessible, even when users switch themes. While there might be situations where embedding blocks directly into a theme could be appropriate, this guide focuses on blocks housed within a plugin. Specifically, it details the file structure as produced by the [`create-block`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/) tool.
+
+Adhering to the `create-block` tool's structure is not mandatory, but it serves as a reliable reference. The files it generates encompass everything needed for a block's definition and registration. Following this structure can help maintain consistency and ensure your blocks are well-organized and easy to maintain.
+
+[![Open File Structure of a Block diagram image](https://developer.wordpress.org/files/2023/11/file-structure-block.png)](https://developer.wordpress.org/files/2023/11/file-structure-block.png "Open File Structure of a Block diagram image")
+
+## `<plugin-file>.php`
+
+
+When creating a block in a WordPress plugin, you usually register the block on the server in the main PHP file of the plugin. This is done using the [`register_block_type()`](https://developer.wordpress.org/reference/functions/register_block_type/) function. 
+
+<div class="callout callout-info">
+    For more on creating a WordPress plugin, refer to the documentation on <a href="https://developer.wordpress.org/plugins/plugin-basics/">Plugin Basics</a> and the <a href="https://developer.wordpress.org/plugins/plugin-basics/header-requirements/"> Header Requirements</a> for the main PHP file.
+</div>
+
+## `package.json`
+
+The `package.json` file is used to configure a Node.js project, which is technically what a block plugin is. In this file, you define the `npm` dependencies of the block and the scripts used for local development.
+
+## `src` folder
+
+In a standard project, the `src` (source) folder contains the raw, uncompiled code, including JavaScript, CSS, and other assets necessary for developing the block. This is where you write and edit your block's source code, utilizing modern JavaScript features and JSX for React components.
+
+The [build process](docs/block-editor/getting-started/fundamentals/javascript-in-the-block-editor/#javascript-build-process.md) provided by `wp-scripts` will then take the files from this folder and generate the production-ready files in the project's `build` folder. 
+
+### `block.json`
+
+The `block.json` file contains the [block's metadata](docs/block-editor/reference-guides/block-api/block-metadata/), streamlining its definition and registration across client-side and server-side environments. 
+
+This file includes the block name, description, [attributes](docs/block-editor/reference-guides/block-api/block-attributes/), [supports](docs/block-editor/reference-guides/block-api/block-supports/), and more, as well as the locations of essential files responsible for the block's functionality, appearance, and styling. 
+
+When a build process is applied, the `block.json` file and the other generated files are moved to a designated folder, often the `build` folder. Consequently, the file paths specified within `block.json` point to these processed, bundled versions of the files. 
+
+A few of the most important properties that can be defined in a `block.json` are:
+
+- **[`editorScript`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-script):** Usually set with the path of a bundled `index.js` file that was built from `src/index.js`.
+- **[`style`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style):** Usually set with the path of a bundled `style-index.css` file that was built from `src/style.(css|scss|sass)`.
+- **[`editorStyle`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style):** Usually set with the path of a bundled `index.css` that was built from `src/editor.(css|scss|sass)`.
+- **[`render`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#render):** Usually set with the path of a bundled `render.php` that was copied from `src/render.php`.
+- **[`viewScript`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script):** Usually set with the path of a bundled `view.js` that was built from `src/view.js`.
+
+[![Open Build Output Diagram in excalidraw](https://developer.wordpress.org/files/2023/11/file-structure-build-output.png)](https://excalidraw.com/#json=c22LROgcG4JkD-7SkuE-N,rQW_ViJBq0Yk3qhCgqD6zQ "Open Build Output Diagram in excalidraw")
+
+### `index.js`
+
+The `index.js` file (or any other file defined in the `editorScript` property of `block.json`) is the entry point file for JavaScript that should only get loaded in the Block Editor. It's responsible for calling the `registerBlockType` function to register the block on the client and typically imports the `edit.js` and `save.js` files to get the functions required for block registration.
+
+### `edit.js`
+
+The `edit.js` file contains the React component responsible for rendering the block's editing user interface, allowing users to interact with and customize the block's content and settings in the Block Editor. This component gets passed to the [`edit`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit) property of the `registerBlockType` function in the `index.js` file.
+
+### `save.js`
+
+The `save.js` exports the function that returns the static HTML markup that gets saved to the WordPress database. This function gets passed to the [`save`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save) property of the `registerBlockType` function in the `index.js` file.
+
+### `style.(css|scss|sass)`
+
+A `style` file with extensions `.css`, `.scss`, or `.sass` contains the styles of the block that will be loaded in both the Block Editor and on the front end. In the build process, this file is converted into `style-index.css`, which is usually defined using the [`style`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) property in `block.json`
+
+<div class="callout callout-info">
+    The webpack configuration used internally by <code>wp-scripts</code> includes a <a href="https://webpack.js.org/loaders/css-loader/">css-loader</a> chained with <a herf="https://webpack.js.org/loaders/postcss-loader/">postcss-loader</a> and <a href="https://webpack.js.org/loaders/sass-loader/">sass-loader</a> that allows it to process CSS, SASS or SCSS files. Check <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#default-webpack-config">Default webpack config</a> for more info
+</div>
+
+### `editor.(css|scss|sass)`
+
+An `editor` file with extensions `.css`, `.scss`, or `.sass` contains the additional styles applied to the block in the Block Editor. You will often use this file for styles specific to the block's user interface. This file is converted to `index.css` during the build process, usually defined using the `editorStyle` property in `block.json`.
+
+### `render.php`
+
+The `render.php` file (or any other file defined in the [`render`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#render) property of `block.json`) defines the server-side process that returns the markup for the block when there is a request from the front end. If defined, this file will take precedence over other ways to render the block's markup on the front end.
+
+### `view.js`
+
+The `view.js` file (or any other file defined in the [`viewScript`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script) property of `block.json`) will be loaded in the front end when the block is displayed.
+
+## `build` folder
+
+The `build` folder contains the compiled and optimized versions of the code from the `src` folder. These files are generated from the [build process](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/#the-build-process-with-wp-scripts), triggered by the `build` or `start` commands of `wp-scripts`.
+
+This transformation process includes minification, transpilation from modern JavaScript to a version compatible with a wider range of browsers, and bundling of assets for efficient loading. WordPress ultimately enqueues and uses the `build` folder's contents to render the block in the Block Editor and on the front end.
+
+<div class="callout callout-info">
+    You can use <code>webpack-src-dir</code> and <code>output-path</code> option of <code>wp-scripts</code> build commands to <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#automatic-block-json-detection-and-the-source-code-directory">customize the entry and output points</a>.
+</div>
+
+## Additional resources
+
+- [Diagram featuring the file structure of a block](https://excalidraw.com/#json=YYpeR-kY1ZMhFKVZxGhMi,mVZewfwNAh_oL-7bj4gmdw)
diff --git a/docs/getting-started/fundamentals/javascript-in-the-block-editor.md b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md
new file mode 100644
index 00000000000000..348b95ba88da3c
--- /dev/null
+++ b/docs/getting-started/fundamentals/javascript-in-the-block-editor.md
@@ -0,0 +1,94 @@
+# Working with JavaScript for the Block Editor
+
+Developing blocks for the Block Editor often involves using modern JavaScript (ESNext and JSX), and most examples here in the Block Editor Handbook are written in these syntaxes.
+
+However, this form of JavaScript must be transformed into a browser-compatible format, necessitating a build step. This process transforms, bundles, and optimizes JavaScript source code and related assets into a format suitable for production environments.
+
+## JavaScript with a build process
+
+Using a build process for block development unlocks the full potential of modern JavaScript, facilitating the use of ESNext and JSX.
+
+[ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#standardization_process) refers to JavaScript's most recent syntax and features. [JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension developed by the React project that enables you to write JavaScript that resembles HTML.
+
+Since browsers cannot directly execute ESNext and JSX, these syntaxes must be transformed into browser-compatible JavaScript.
+
+[webpack](https://webpack.js.org/concepts/why-webpack/) is a pluggable tool that processes and bundles JavaScript for browser compatibility. [Babel](https://babeljs.io/), a plugin for webpack, converts ESNext and JSX into standard JavaScript.
+
+Configuring webpack and Babel can be challenging, so it's recommended that you use the [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) package. This tool simplifies development by preconfiguring both, so you rarely need to write custom webpack or Babel configurations.
+
+For an introduction, refer to the [Get started with wp-scripts](/docs/getting-started/devenv/get-started-with-wp-scripts.md) guide.
+
+### An overview of `wp-scripts`
+
+The diagram below provides an overview of the build process when using the `wp-scripts` package. It's designed to work out of the box with [standard configurations](/docs/getting-started/devenv/get-started-with-wp-scripts.md#basic-usage) for development and production environments.
+
+[![Open Build Process diagram image](https://developer.wordpress.org/files/2023/11/build-process.png)](https://developer.wordpress.org/files/2023/11/build-process.png "Open Build Process diagram image")
+
+- **Production Mode (`npm run build`):** In this mode, `wp-scripts` compiles your JavaScript, minifying the output to reduce file size and improve loading times in the browser. This is ideal for deploying your code to a live site.
+
+- **Development Mode (`npm run start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time.
+
+The `wp-scripts` package also facilitates the use of JavaScript modules, allowing code distribution across multiple files and resulting in a streamlined bundle after the build process. The [block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub repository provides some good examples.
+
+<div class="callout callout-tip">
+    In most situations, no customization will be needed, but you can provide a <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#provide-your-own-webpack-config"><code>webpack.config.js</code></a> when using <code>wp-scripts</code> to modify the build process to suit your needs.
+</div>
+
+## JavaScript without a build process
+
+Integrating JavaScript into your WordPress projects without a build process can be the most straightforward approach in specific scenarios. This is particularly true for projects that don't leverage JSX or other advanced JavaScript features requiring compilation.
+
+When you opt out of a build process, you interact directly with WordPress's [JavaScript APIs](/docs/reference-guides/packages/) through the global `wp` object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding [the handle](/docs/contributors/code/scripts.md) of each corresponding package to the dependency array of your enqueued JavaScript file.
+
+For example, suppose you're creating a script that registers a new block [variation](/docs/reference-guides/block-api/block-variations.md) using the `registerBlockVariation` function from the [`blocks`](/docs/reference-guides/packages/packages-blocks.md) package. You must include `wp-blocks` in your script's dependency array. This guarantees that the `wp.blocks.registerBlockVariation` method is available and defined by the time your script executes.
+
+In the following example, the `wp-blocks` dependency is defined when enqueuing the `variations.js` file.
+
+```php
+function example_enqueue_block_variations() {
+	wp_enqueue_script(
+		'example-enqueue-block-variations',
+		get_template_directory_uri() . '/assets/js/variations.js',
+		array( 'wp-blocks' ),
+		wp_get_theme()->get( 'Version' ),
+		false
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );
+```
+
+Then in the `variations.js` file, you can register a new variation for the Media & Text block like so:
+
+```js
+wp.blocks.registerBlockVariation(
+	'core/media-text',
+	{
+		name: 'media-text-custom',
+		title: 'Media & Text Custom',
+		attributes: {
+			align: 'wide',
+			backgroundColor: 'tertiary'
+		},
+	}
+);
+```
+
+For scripts that need to run in the Block Editor, make sure you use the [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) hook coupled with the standard [`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) function.
+
+Refer to [Enqueueing assets in the Editor](/docs/how-to-guides/enqueueing-assets-in-the-editor.md) for more information. You can also visit the [block-development-example](https://github.com/wptrainingteam/block-theme-examples/blob/master/example-block-variation/functions.php) GitHub repository for more practical examples.
+
+<div class="callout callout-tip">
+    Open your browser's dev tools and try running <code>wp.data.select('core/editor').getBlocks()</code> in the console when editing a post or when using the Site Editor. This command will return all available blocks.
+</div>
+
+## Additional resources
+
+- [Package reference](/docs/reference-guides/packages.md)
+- [Get started with wp-scripts](/docs/getting-started/devenv/get-started-with-wp-scripts.md)
+- [Enqueueing assets in the Editor](/docs/how-to-guides/enqueueing-assets-in-the-editor.md)
+- [WordPress package handles](/docs/contributors/code/scripts.md)
+- [JavaScript reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | MDN Web Docs
+- [block-development-examples](https://github.com/WordPress/block-development-examples) | GitHub repository
+- [block-theme-examples](https://github.com/wptrainingteam/block-theme-examples) | GitHub repository
+- [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) | Developer Blog
+- [Build process diagram](https://excalidraw.com/#json=4aNG9JUti3pMnsfoga35b,ihEAI8p5dwkpjWr6gQmjuw)
diff --git a/docs/getting-started/fundamentals/markup-representation-block.md b/docs/getting-started/fundamentals/markup-representation-block.md
new file mode 100644
index 00000000000000..b9cbb528b49db8
--- /dev/null
+++ b/docs/getting-started/fundamentals/markup-representation-block.md
@@ -0,0 +1,51 @@
+# Markup representation of a block
+
+Blocks are stored in the database or within HTML templates using a unique [HTML-based syntax](https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/#data-and-attributes), distinguished by HTML comments that serve as clear block delimiters. This ensures that block markup is technically valid HTML.
+
+Here are a few guidelines for the markup that defines a block:
+
+- Core blocks begin with the `wp:` prefix, followed by the block name (e.g., `wp:image`). Notably, the `core` namespace is omitted.
+- Custom blocks begin with the `wp:` prefix, followed by the block namespace and name (e.g., `wp:namespace/name`).
+- The comment can be a single line, self-closing, or wrapper for HTML content.
+- Block settings and attributes are stored as a JSON object inside the block comment.
+
+The following is the simplified markup representation of an Image block:
+
+```html
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large">
+    <img src="source.jpg" alt="" />
+</figure>
+<!-- /wp:image -->
+```
+
+The markup for a block is crucial both in the Block Editor and for displaying the block on the front end:
+
+- WordPress analyzes the block's markup within the Editor to extract its data and present the editable version to the user.
+- On the front end, WordPress again parses the markup to extract data and render the final HTML output.
+
+<div class="callout callout-tip">
+    Refer to the <a href="https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/">Data Flow</a> article for a more in-depth look at how block data is parsed in WordPress.
+</div>
+
+When a block is saved, the `save` function—defined when the [block is registered in the client](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-javascript-client-side)—is executed to generate the markup stored in the database, wrapped in block delimiter comments. For dynamically rendered blocks, which typically set `save` to `null`, only a placeholder comment with block attributes is saved.
+
+Here is the markup representation of a dynamically rendered block (`save` = `null`). Notice there is no HTML markup besides the comment.
+
+```html
+<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->
+```
+
+When a block has a `save` function, the Block Editor checks that the markup created by the `save` function is identical to the block's markup saved to the database:
+
+- Discrepancies will trigger a [validation error](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#validation), often due to changes in the `save` function's output.
+- Developers can address potential validation issues by implementing [block deprecations](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/) to account for changes.
+
+As the example above shows, the stored markup is minimal for dynamically rendered blocks. Generally, this is just a delimiter comment containing block attributes, which is not subject to the Block Editor's validation. This approach reflects the dynamic nature of these blocks, where the actual HTML is generated server-side and is not stored in the database.
+
+## Additional resources
+
+- [Data Flow and Data Format](https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/)
+- [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/) | Developer Blog
+- [Block deprecation – a tutorial](https://developer.wordpress.org/news/2023/03/10/block-deprecation-a-tutorial/) | Developer Blog
+- [Introduction to Templates > Block markup](https://developer.wordpress.org/themes/templates/introduction-to-templates/#block-markup) | Theme Handbook 
\ No newline at end of file
diff --git a/docs/getting-started/fundamentals/registration-of-a-block.md b/docs/getting-started/fundamentals/registration-of-a-block.md
new file mode 100644
index 00000000000000..5c80422f6f8574
--- /dev/null
+++ b/docs/getting-started/fundamentals/registration-of-a-block.md
@@ -0,0 +1,99 @@
+# Registration of a block
+
+Blocks in WordPress are typically bundled in a plugin and registered on both the server and client-side using `block.json` metadata.
+
+While it's possible to register blocks solely on the client-side, best practices strongly advise registering them on both the server and client. This dual registration is crucial for enabling server-side features such as Dynamic Rendering, Block Supports, Block Hooks, and Style Variations. Without server-side registration, these functionalities will not operate correctly.
+
+For instance, if you want a block [to be styled via `theme.json`](https://developer.wordpress.org/themes/global-settings-and-styles/settings/blocks/), it must be registered on the server. Otherwise, the block won't recognize or apply any styles assigned to it in `theme.json`.
+
+The following diagram details the registration process for a block.
+
+[![Open Block Registration diagram image](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png)](https://developer.wordpress.org/files/2023/11/block-registration-e1700493399839.png "Open Block Registration diagram image")
+
+## Registering a block with PHP (server-side)
+
+Block registration on the server usually takes place in the main plugin PHP file with the [`register_block_type()`](https://developer.wordpress.org/reference/functions/register_block_type/) function called on the [`init`](https://developer.wordpress.org/reference/hooks/init/) hook. This function simplifies block type registration by reading metadata stored in a `block.json` file.
+
+This function is designed to register block types and primarily uses two parameters in this context, although it can accommodate more variations:
+
+- **`$block_type` (`string`):** This can either be the path to the directory containing the `block.json` file or the complete path to the metadata file if it has a different name. This parameter tells WordPress where to find the block's configuration.
+
+- **`$args` (`array`):** This is an optional parameter where you can specify additional arguments for the block type. By default, this is an empty array, but it can include various options, one of which is the `$render_callback`. This callback is used to render blocks on the front end and is an alternative to the `render` property in `block.json`.
+
+During the development process, the `block.json` file is typically moved from the `src` (source) directory to the `build` directory as part of compiling your code. Therefore, when registering your block, ensure the `$block_type` path points to the `block.json` file within the `build` directory.
+
+The `register_block_type()` function returns the registered block type (`WP_Block_Type`) on success or `false` on failure. Here is a simple example using the `render_callback`.
+
+```php
+register_block_type(
+	__DIR__ . '/build',
+	array(
+		'render_callback' => 'render_block_core_notice',
+	)
+);
+```
+
+Here is a more complete example, including the `init` hook.
+
+```php
+function minimal_block_ca6eda___register_block() {
+	register_block_type( __DIR__ . '/build' );
+}
+add_action( 'init', 'minimal_block_ca6eda___register_block' );
+```
+
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the  [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/index.php)_
+
+## Registering a block with JavaScript (client-side)
+
+When the block has already been registered on the server, you only need to register the client-side settings in JavaScript using the [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype) method from the `@wordpress/blocks` package. You just need to make sure you use the same block name as defined in the block's `block.json` file. Here's an example:
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+
+registerBlockType( 'my-plugin/notice', {
+	edit: Edit,
+	// ...other client-side settings
+} );
+```
+
+While it's generally advised to register blocks on the server using PHP for the benefits outlined in the ["Benefits using the metadata file"](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) section, you can opt to register a block solely on the client-side. The `registerBlockType` method allows you to register a block type using metadata.
+
+The function accepts two parameters:
+
+- **`blockNameOrMetadata` (`string`|`Object`):** This can either be the block type's name as a string or an object containing the block's metadata, which is typically loaded from the `block.json` file.
+- **`settings` (`Object`):** This is an object containing the block's client-side settings.
+
+<div class="callout callout-tip">
+	You can import the contents of the <code>block.json</code> file (or any other <code>.json</code> file) directly into your JavaScript files if you're using a build process, such as the one provided by <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/#the-build-process-with-wp-scripts"><code>wp-scripts</code></a>.
+</div>
+
+The `settings` object passed as the second parameter includes many properties, but these are the two most important ones:
+
+- **`edit`:** The React component that gets used in the Editor for our block.
+- **`save`:** The function that returns the static HTML markup that gets saved to the database.
+
+The `registerBlockType()` function returns the registered block type (`WPBlock`) on success or `undefined` on failure. Here's an example:
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import metadata from './block.json';
+
+const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
+const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save,
+} );
+```
+
+_See the [full block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda) of the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/src/index.js)_
+
+## Additional resources
+
+- [`register_block_type` PHP function](https://developer.wordpress.org/reference/functions/register_block_type/)
+- [`registerBlockType` JS function](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/#registerblocktype)
+- [Why a block needs to be registered in both the server and the client?](https://github.com/WordPress/gutenberg/discussions/55884) | GitHub Discussion
+- [Block Registration diagram](https://excalidraw.com/#json=PUQu7jpvbKsUHYfpHWn7s,61QnhpZtjykp3s44lbUN_g)
diff --git a/docs/getting-started/fundamentals/static-dynamic-rendering.md b/docs/getting-started/fundamentals/static-dynamic-rendering.md
new file mode 100644
index 00000000000000..dfb6a7123b44b3
--- /dev/null
+++ b/docs/getting-started/fundamentals/static-dynamic-rendering.md
@@ -0,0 +1,179 @@
+# Static or Dynamic rendering of a block
+
+A block's front-end markup can either be dynamically generated server-side upon request (dynamic blocks) or statically generated during the save process in the Block Editor (static blocks). This article explores each method.
+
+<div class="callout callout-tip">
+The post <a href="https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/">Static vs. dynamic blocks: What’s the difference?</a> provides a great introduction to this topic.
+</div>
+
+## Static rendering
+
+Blocks with "static rendering" produce front-end output that is fixed and stored in the database upon saving. These blocks rely solely on their `save` function to define their [HTML markup](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block/), which remains unchanged unless manually edited in the Block Editor.
+
+If a block does not use a dynamic rendering method—meaning it doesn't generate content on the fly via PHP when the page loads—it's considered a "static block."
+
+The diagram below illustrates how static block content is saved in the database and then retrieved and rendered as HTML on the front end.
+
+![Blocks with static rendering diagram](https://developer.wordpress.org/files/2024/01/static-rendering.png)
+
+### How to define static rendering for a block
+
+The `save` function, which can be defined when [registering a block on the client](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-javascript-client-side), specifies the block's HTML structure that gets saved in the database whenever you save the block in the Editor. This saved HTML is then used to display the block on the front end.
+
+Blocks in WordPress are encapsulated within special comment tags that serve as unique [block delimiters](https://developer.wordpress.org/block-editor/getting-started/fundamentals/markup-representation-block/). However, only the HTML defined in the static block's `save` function—excluding these delimiters—is rendered.
+
+<details><summary><strong>View an example of static rendering in the Preformatted block</strong></summary>
+<br/>
+The following <a href="https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/preformatted/save.js"><code>save</code> function</a> for the <a href="https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/preformatted">Preformatted</a> core block looks like this:
+
+```js
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { content } = attributes;
+
+	return (
+		<pre { ...useBlockProps.save() }>
+			<RichText.Content value={ content } />
+		</pre>
+	);
+}
+```
+
+The function generates the following markup representation of the block when `attributes.content` has the value `"This is some preformatted text"`:
+
+```html
+<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">This is some preformatted text</pre>
+<!-- /wp:preformatted -->
+```
+
+On the front end, the block will return the following markup. Notice how the delimiters are no longer present.
+
+```html
+<pre class="wp-block-preformatted">This is some preformatted text</pre>
+```
+</details>
+<br/>
+
+Dynamic blocks, which we'll explore in the following section, can specify an initial HTML structure through a `save` function, similar to static blocks. However, dynamic blocks primarily rely on server-side rendering to generate their content. If, for any reason, the dynamic rendering isn't available—perhaps due to the block's plugin being deactivated—the system will fall back to using the HTML structure saved in the database to display the block on the front end.
+
+For a practical demonstration of how this works, refer to the [Building your first block](/docs/getting-started/tutorial.md) tutorial. Specifically, the [Adding static rendering](/docs/getting-started/tutorial.md#adding-static-rendering) section illustrates how a block can have both a saved HTML structure and dynamic rendering capabilities.
+
+<div class="callout callout-info">
+WordPress provides mechanisms like the <a href="https://developer.wordpress.org/reference/functions/render_block/"><code>render_block</code></a> and the <a href="https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/"><code>render_callback</code></a> function to alter the saved HTML of a block before it appears on the front end. These tools offer developers the capability to customize block output dynamically, catering to complex and interactive user experiences.
+</div>
+
+Additional examples of WordPress blocks that use static rendering, meaning their output is fixed at the time of saving and doesn't rely on server-side processing, include:
+
+- [Separator](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/separator/save.js)
+- [Spacer](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/spacer/save.js)
+- [Button](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/save.js)
+
+
+## Dynamic rendering
+
+Blocks with "dynamic rendering" are designed to generate their content and structure in real-time when requested on the front end. Unlike static blocks, which have a fixed HTML structure saved in the database, "dynamic blocks" rely on server-side processing to construct their output dynamically, making them highly versatile and suitable for content that needs to be updated frequently or is dependent on external data.
+
+The diagram below illustrates how the representation of a dynamic block is saved in the database and then retrieved and dynamically rendered as HTML on the front end.
+
+![Blocks with dynamic rendering diagram](https://developer.wordpress.org/files/2024/01/dynamic-rendering.png)
+
+There are some common use cases for dynamic blocks:
+
+1. **Blocks where content should change even if a post has not been updated:** An example is the [Latest Posts](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-posts) block, which will automatically update whenever a new post is published.
+2. **Blocks where updates to the markup should be immediately shown on the front end:** If you update the structure of a block by adding a new class, adding an HTML element, or changing the layout in any other way, using a dynamic block ensures those changes are applied immediately on all occurrences of that block across the site. Without dynamic blocks, similar updates could trigger [validation errors](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#validation) in the Block Editor.
+
+### How to define dynamic rendering for a block
+
+A block can define dynamic rendering in two main ways:
+
+1. Using the `render_callback` argument that can be passed to the [`register_block_type()`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/#registration-of-the-block-with-php-server-side) function.
+2. Using a separate PHP file usually named `render.php`. This file's path should be defined using the [`render`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#files-for-the-blocks-behavior-output-or-style) property in the `block.json` file.
+
+Both of these methods receive the following data:
+
+ - `$attributes`: The array of attributes for the block.
+ - `$content`: The markup of the block as stored in the database, if any.
+ - `$block`: The instance of the [WP_Block](https://developer.wordpress.org/reference/classes/wp_block/) class that represents the rendered block ([metadata of the block](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)).
+
+<details><summary><strong>View an example of dynamic rendering in the Site Title block</strong></summary>
+<br/>
+
+The [Site Title](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/site-title) block uses the following [`render_callback`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/site-title/index.php):
+
+```php
+function render_block_core_site_title( $attributes ) {
+	$site_title = get_bloginfo( 'name' );
+	if ( ! $site_title ) {
+		return;
+	}
+
+	$tag_name = 'h1';
+	$classes  = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes .= ' has-link-color';
+	}
+
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
+	}
+
+	if ( $attributes['isLink'] ) {
+		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
+
+		$site_title = sprintf(
+			'<a href="%1$s" target="%2$s" rel="home"%3$s>%4$s</a>',
+			esc_url( home_url() ),
+			esc_attr( $link_target ),
+			$aria_current,
+			esc_html( $site_title )
+		);
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classes ) ) );
+
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		// already pre-escaped if it is a link.
+		$attributes['isLink'] ? $site_title : esc_html( $site_title )
+	);
+}
+```
+
+However, there is no `save` function defined for this block, as you can see from its [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/site-title/index.js) file, which means the markup representation of the block in the database looks like this:
+
+```html
+<!-- wp:site-title /-->
+```
+
+On the front end, the `render_callback` is used to dynamically render the markup for the block depending on the specific values on the server at the time the block is requested. These values include the current site title, URL, link target, etc.
+
+```
+<h1 class="wp-block-site-title"><a href="https://www.wp.org" target="_self" rel="home">My WordPress Website</a></h1>
+```
+
+</details>
+<br/>
+
+### HTML representation of dynamic blocks in the database (`save`)
+
+For dynamic blocks, the `save` callback function can return just `null`, which tells the editor to save only the block delimiter comment (along with any existing [block attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/)) to the database. These attributes are then passed into the server-side rendering callback, which will determine how to display the block on the front end of your site.
+
+When `save` is `null`, the Block Editor will skip the [block markup validation process](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#validation), avoiding issues with frequently changing markup.
+
+Blocks with dynamic rendering can also save an HTML representation of the block as a backup. If you provide a server-side rendering callback, the HTML representing the block in the database will be replaced with the output of your callback but will be rendered if your block is deactivated (the plugin that registers the block is uninstalled), or your render callback is removed.
+
+In some cases, the block saves an HTML representation of the block and uses a dynamic rendering to fine-tune this markup if some conditions are met. Some examples of core blocks using this approach are:
+
+- The [Cover](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover) block [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/save.js) a full HTML representation of the block in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L74), which [dynamically injects](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/cover/index.php#L16) the featured image if the "Use featured image" setting is enabled.
+- The [Image](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image) block also [saves](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/image/save.js) its HTML representation in the database. This markup is processed via a [`render_callback`](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L363), which [adds additional attributes](https://github.com/WordPress/gutenberg/blob/22741661998834e69db74ad863705ee2ce97b446/packages/block-library/src/image/index.php#L18) to the markup if specific conditions are met.
+
+If you are using [InnerBlocks](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/) in a dynamic block, you will need to save the `InnerBlocks` in the `save` callback function using `<InnerBlocks.Content/>`.
+
+## Additional resources
+
+- [Static vs. dynamic blocks: What’s the difference?](https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/) | Developer Blog
+- [Block deprecation – a tutorial](https://developer.wordpress.org/news/2023/03/10/block-deprecation-a-tutorial/) | Developer Blog
diff --git a/docs/explanations/glossary.md b/docs/getting-started/glossary.md
similarity index 97%
rename from docs/explanations/glossary.md
rename to docs/getting-started/glossary.md
index bff8925e4619e1..3c7ba7f722c445 100644
--- a/docs/explanations/glossary.md
+++ b/docs/getting-started/glossary.md
@@ -70,7 +70,7 @@ This refers to a collection of features that ultimately allows users to edit the
 
 The CSS styles generated by WordPress and enqueued as an embedded stylesheet in the front end of the site. The stylesheet ID is `global-styles-inline-css`. The contents of this stylesheet come from the default `theme.json` of WordPress, the theme's `theme.json`, and the styles provided by the user via the global styles sidebar in the site editor.
 
-See [theme.json reference docs](/docs/reference-guides/theme-json-reference.md)</a>, the [how to guide](/docs/how-to-guides/themes/theme-json.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md).
+See [theme.json reference docs](/docs/reference-guides/theme-json-reference/README.md)</a>, the [how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md), and an introduction to [styles in the block editor](/docs/explanations/architecture/styles.md).
 
 Compare to <a href="#block-styles">block styles</a>.
 
diff --git a/docs/getting-started/outreach.md b/docs/getting-started/outreach.md
deleted file mode 100644
index 3bfb29d595bc0d..00000000000000
--- a/docs/getting-started/outreach.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Outreach
-
-This includes articles, talks, demos and anything the community is doing to discuss, learn about, and contribute to Gutenberg. This is not an exhaustive list; if we are missing your event or article, just let us know in the [#core-editor slack channel](https://make.wordpress.org/chat/).
-
-## Articles
-
-A short list of useful articles around defining, extending, and contributing to Gutenberg.
-
-### Overviews of Gutenberg
-
--   [Status Check: Site Editing & Customization](https://make.wordpress.org/core/2020/12/10/status-check-site-editing-and-customization/), Matías Ventura Bausero (December 2020)
--   [Embrace the Modularity](https://riad.blog/2020/01/28/embrace-the-modularity/), Riad Benguella (January 2020)
--   [The Language of Gutenberg](https://lamda.blog/2018/04/22/the-language-of-gutenberg/), Miguel Fonseca (April 2018)
--   [Gutenberg, or the Ship of Theseus](https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/), Matías Ventura Bausero (October 2017)
--   [We Called It Gutenberg for a Reason](https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/), Matt Mullenweg (August 2017)
--   [How Gutenberg is Changing WordPress Development](https://riad.blog/2017/10/06/how-gutenberg-is-changing-wordpress-development/), Riad Benguella (October 2017)
--   [How Gutenberg Will Shape the Future of WordPress](https://www.linkedin.com/pulse/gutenberg-morten-rand-hendriksen/), Morten Rand-Henrikson (August 2017)
-
-You can view this [Index of Gutenberg related posts](https://make.wordpress.org/core/handbook/references/keeping-up-with-gutenberg-index/) for more information.
-
-### Extending Gutenberg
-
--   [How to Start Block Development with Scaffolding](https://gziolo.pl/2020/12/22/how-to-start-block-development-with-scaffolding/), Grzegorz Ziółkowski (December 2020)
--   [Introducing BlockBook for WordPress](https://riad.blog/2020/07/22/introducing-blockbook-for-wordpress/), Riad Benguella (July 2020)
--   [AsBlocks: an encrypted collaborative environment](https://riad.blog/2020/06/11/write-as-blocks-in-an-encrypted-collaborative-environment/), Riad Benguella (June 2020)
--   [Thoughts on Themes](https://matiasventura.com/post/thoughts-on-themes/), Matías Ventura Bausero (April 2020)
--   [Build a Block Series](https://mkaz.blog/code/build-a-block-series-1/), Marcus Kazmierczak (January 2020)
--   [With Gutenberg, what happens to my Custom Fields?](https://riad.blog/2017/12/11/with-gutenberg-what-happens-to-my-custom-fields/), Riad Benguella (December 2017)
--   [One thousand and one ways to extend Gutenberg today](https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/), Riad Benguella (October 2017)
--   [Gutenberg Plugin Boilerplate](https://github.com/ahmadawais/Gutenberg-Boilerplate/), Ahmad Awais (August 2017)
-
-### Community Contribution
-
--   [The WordPress block editor: a maintainer’s story](https://riad.blog/2020/10/26/the-wordpress-block-editor-a-maintainers-story/), Riad Benguella (October 2020)
--   [Good first issue on Gutenberg](https://mkaz.blog/code/good-first-issue-on-gutenberg/), Marcus Kazmierczak (August 2020)
--   [How to Use the New WordPress Block Editor](https://www.codeinwp.com/blog/wordpress-gutenberg-guide/), Colin Newcomer (July 2020)
--   [WordPress Gutenberg Developer’s Guide](https://awhitepixel.com/guides/wordpress-gutenberg-developers-guide/), A White Pixel (2020)
--   [Gutenberg Block Library](https://editorblockswp.com/library), Danny Cooper (August 2018)
--   [A zero-configuration developer toolkit for building WordPress Gutenberg block plugins](https://ahmadawais.com/create-guten-block-toolkit/), Ahmad Awais (January 2018)
--   [Contributing to Gutenberg Without Code](https://wordimpress.com/a-pot-stirrer-amongst-chefs-contributing-to-gutenberg-without-code/), Kevin Hoffman (August 2017)
--   [Testing Flow in Gutenberg: Instructions for how to contribute to usability testing](https://make.wordpress.org/test/2017/11/22/testing-flow-in-gutenberg/), Anna Harrison (November 2017)
-
-### Article Compilations
-
--   [Full-Site-Editing: MVP and Ultimate Resource List](https://gutenbergtimes.com/full-site-editing/), Birgit Pauli-Haack (February 2021)
--   [Theme Shaper posts about Block Themes](https://themeshaper.com/tag/block-based-themes/), various authors (2020-2021)
--   [Gutenberg Times Updates](https://gutenbergtimes.com/category/updates/), Birgit Pauli-Haack
--   [Curated Collection of Gutenberg Articles, Plugins, Blocks, Tutorials, etc](http://gutenberghub.com/), Munir Kamal
--   [Gutenberg articles on ManageWP.org](https://managewp.org/search?q=gutenberg)
-
-## Talks
-
-Talks given about Gutenberg, including slides and videos as they are available.
-
-### Slides
-
--   [Growing JavaScript Skills with WordPress](https://gziolo.pl/2019/07/15/growing-javascript-skills-with-wordpress/) at JavaScript for WordPress conference (July 2019)
--   [The new core WordPress editor](http://kimb.me/talk-bigwp-london-new-core-wordpress-editor/) at BigWP London (May 2017)
--   [Gutenberg Notes](http://haiku2.com/2017/09/bend-wordpress-meetup-gutenberg-notes/) at Bend WordPress Meetup (September 2017)
--   [Gutenberg and the Future of Content in WordPress](https://www.slideshare.net/andrewmduthie/gutenberg-and-the-future-of-content-in-wordpress) (September 2017)
--   [Head first into Gutenberg](https://speakerdeck.com/prtksxna/head-first-into-gutenberg) at the [WordPress Goa Meet-up](https://www.meetup.com/WordPressGoa/events/245275573/) (December 2017)
--   [Gutenberg : vers une approche plus fine du contenu](https://imathi.eu/2018/02/16/gutenberg-vers-une-approche-plus-fine-du-contenu/) at [WP Paris](https://wpparis.fr/) (February 2018)
-
-### Videos
-
--   [All `Gutenberg` tagged Talks at WordPress.tv](https://wordpress.tv/tag/gutenberg/)
--   [Themes of the Future](https://wordpress.tv/2021/01/21/eileen-violini-themes-of-the-future-the-new-frontier-of-gutenberg-block-based-themes-and-theme-development/), Eileen Violini (January 2021)
--   [Content Creation in WordPress using Gutenberg](https://wordpress.tv/2021/02/06/sayed-taqui-content-creation-in-wordpress-using-gutenberg/),
-    Sayed Taqui (January 2021)
--   [Updates on WordPress Site-Editor (FSE) and Themes](https://www.youtube.com/watch?v=z-5OJq-OBjI&t), Gutenberg Times (January 2021)
--   [State of the Word 2020 FSE Demo](https://youtu.be/QI3qCoiuG3w?t=1279), Matt Mullenweg (December 2020)
--   [Full Site Editing! It's Coming, But Will Change How We Use WordPress?](https://www.youtube.com/watch?v=JHxsDSAImn0), WPCrafter.com (December 2020)
--   [Advanced Layouts with the Block Editor](https://wordpress.tv/2020/12/06/advanced-layouts-with-the-block-editor/), Mel Choyce (December 2020)
--   [State of the Word 2019 Gutenberg Demo](https://www.youtube.com/watch?v=LezbkeV059Q), Matt Mullenweg (December 2019)
--   [Beyond Gutenberg](https://wordpress.tv/2018/07/09/matias-ventura-beyond-gutenberg/), Matías Ventura Bausero (July 2018)
--   [Anatomy of a block: Gutenberg design patterns](https://wordpress.tv/2018/07/08/tammie-lister-anatomy-of-a-block-gutenberg-design-patterns/), Tammie Lister (July 2018)
--   [State of the Word 2017 Gutenberg Demo](https://youtu.be/XOY3ZUO6P0k?t=2100), Matt Mullenweg with demo by Matías Ventura Bausero (December 2017)
--   [Gutenberg is Coming (Don’t Be Afraid)](https://training.ithemes.com/webinar/gutenberg-is-coming-dont-be-afraid/), iThemes Training (September 2017)
-
-## Learn WordPress Courses
-
-You can access all courses [here](https://learn.wordpress.org/).
-
--   [Registering Block Patterns](https://learn.wordpress.org/workshop/registering-block-patterns/), Daisy Olsen (January 2021)
--   [Intro to Gutenberg Block Development](https://learn.wordpress.org/workshop/intro-to-gutenberg-block-development/), Jonathan Bossenger (August 2020)
--   [Intro to Publishing with the Block Editor](https://learn.wordpress.org/workshop/intro-to-publishing-with-the-block-editor/), Erica Varlese (August 2020)
diff --git a/docs/getting-started/quick-start-guide.md b/docs/getting-started/quick-start-guide.md
new file mode 100644
index 00000000000000..d218d0ee806070
--- /dev/null
+++ b/docs/getting-started/quick-start-guide.md
@@ -0,0 +1,54 @@
+# Quick Start Guide
+
+This guide is designed to demonstrate the basic principles of block development in WordPress using a hands-on approach. Following the steps below, you will create a custom block plugin that uses modern JavaScript (ESNext and JSX) in a matter of minutes. The example block displays the copyright symbol (©) and the current year, the perfect addition to any website's footer. You can see these steps in action through this short video demonstration.
+
+<iframe width="960" height="540" src="https://www.youtube.com/embed/nrut8SfXA44?si=YxvmHmAoYx-BDCog" title="WordPress Block Development: Quick Start Guide Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
+
+## Scaffold the block plugin
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+Next, use the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package and the [`@wordpress/create-block-tutorial-template`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block-tutorial-template/) template to scaffold the complete “Copyright Date Block” plugin. 
+
+<div class="callout callout-info">
+    <p>You can use <code>create-block</code> to scaffold a block just about anywhere and then use <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> inside the generated plugin folder. This will create a local WordPress development environment with your new block plugin installed and activated.</p>
+    <p>If you already have your own <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment">local WordPress development environment</a>, navigate to the <code>plugins/</code> folder using the terminal.</p>
+</div>
+
+Choose the folder where you want to create the plugin, and then execute the following command in the terminal from within that folder:
+
+```sh
+npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
+```
+
+The `slug` provided (`copyright-date-block`) defines the folder name for the scaffolded plugin and the internal block name.
+
+Navigate to the Plugins page of your local WordPress installation and activate the “Copyright Date Block” plugin. The example block will then be available in the Editor.
+
+## Basic usage
+
+With the plugin activated, you can explore how the block works. Use the following command to move into the newly created plugin folder and start the development process.
+
+```sh
+cd copyright-date-block && npm start
+```
+
+When `create-block` scaffolds the block, it installs `wp-scripts` and adds the most common scripts to the block’s `package.json` file. Refer to the [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/) article for an introduction to this package.
+
+The `npm start` command will start a development server and watch for changes in the block’s code, rebuilding the block whenever modifications are made. 
+
+When you are finished making changes, run the `npm run build` command. This optimizes the block code and makes it production-ready.
+
+## View the block in action
+
+You can use any local WordPress development environment to test your new block, but the scaffolded plugin includes configuration for `wp-env`. You must have [Docker](https://www.docker.com/products/docker-desktop) already installed and running on your machine, but if you do, run the `npx wp-env start` command. 
+
+Once the script finishes running, you can access the local environment at: <code>http://localhost:8888</code>. Log into the WordPress dashboard using username `admin` and password `password`. The plugin will already be installed and activated. Open the Editor or Site Editor, and insert the Copyright Date Block as you would any other block.
+
+Visit the [Getting started](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/) guide to learn more about `wp-env`.
+
+## Additional resources
+
+- [Get started with create-block](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/)
+- [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/)
+- [Get started with wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
new file mode 100644
index 00000000000000..2a5dd979d3a569
--- /dev/null
+++ b/docs/getting-started/tutorial.md
@@ -0,0 +1,1014 @@
+# Tutorial: Build your first block
+
+In this tutorial, you will build a "Copyright Date Block"—a basic yet practical block that displays the copyright symbol (©), the current year, and an optional starting year. This type of content is commonly used in website footers.
+
+The tutorial will guide you through the complete process, from scaffolding the block plugin using the [`create-block`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/) package to modifying each file. While previous WordPress development experience is beneficial, it's not a prerequisite for this tutorial.
+
+By the end of this guide, you will have a clear understanding of block development fundamentals and the necessary skills to create your own WordPress blocks.
+
+## What you're going to build
+
+Here's a quick look at what you're going to build.
+
+![What you're going to build](https://developer.wordpress.org/files/2023/12/block-tutorial-1.png)
+
+You can also interact with the finished project in [WordPress Playground](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/copyright-date-block-09aac3/_playground/blueprint.json) or use the [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/) to install the complete block plugin in your local WordPress environment.
+
+## Prerequisites
+
+To complete this tutorial, you will need:
+
+1. Code editor
+2. Node.js development tools
+3. Local WordPress environment
+
+If you don't have one or more of these items, the [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) documentation will help you get started. Come back here once you are all set up.
+
+<div class="callout callout-info">
+	This tutorial uses <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> to create a local WordPress development environment. However, feel free to use any development environment that meets the abovementioned prerequisites.
+</div>
+
+## Scaffolding the block
+
+The first step in creating the Copyright Date Block is to scaffold the initial block structure using the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package.
+
+<div class="callout callout-info">
+	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/">Get started with create-block</a> documentation for an introduction to using this package.
+</div>
+
+You can use `create-block` from just about any directory (folder) on your computer and then use `wp-env` to create a local WordPress development environment with your new block plugin installed and activated.
+
+Therefore, choose a directory to place the block plugin or optionally create a new folder called "Block Tutorial". Open your terminal and `cd` to this directory. Then run the following command.
+
+<div class="callout callout-info">
+	If you are not using <code>wp-env</code>, instead, navigate to the <code>plugins/</code> folder in your local WordPress installation using the terminal and run the following command.
+</div>
+
+```bash
+npx @wordpress/create-block@latest copyright-date-block --variant=dynamic
+cd copyright-date-block
+```
+
+After executing this command, you'll find a new directory named `copyright-date-block` in the plugins folder. This directory contains all the initial files needed to start customizing your block.
+
+This command also sets up the basic structure of your block, with `copyright-date-block` as its slug. This slug uniquely identifies your block within WordPress.
+
+<div class="callout callout-info">
+	You might have noticed that the command uses the <code>--variant=dynamic</code> flag. This tells <code>create-block</code> you want to scaffold a dynamically rendered block. Later in this tutorial, you will learn about dynamic and static rendering and add static rendering to this block.
+</div>
+
+Navigate to the Plugins page in the WordPress admin and confirm that the plugin is active. Then, create a new page or post and ensure you can insert the Copyright Date Block. It should look like this once inserted.
+
+![The scaffolded block in the Editor](https://developer.wordpress.org/files/2023/12/block-tutorial-2.png)
+
+## Reviewing the files
+Before we begin modifying the scaffolded block, it's important to review the plugin's file structure. Open the plugin folder in your code editor.
+
+![The files that make up the block plugin](https://developer.wordpress.org/files/2023/12/block-tutorial-3.png)
+
+Next, look at the [File structure of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/) documentation for a thorough overview of what each file does. Don't worry if this is overwhelming right now. You will learn how to use each file throughout this tutorial.
+
+<div class="callout callout-info">
+	Since you scaffolded a dynamic block, you will not see a <code>save.js</code> file. Later in the tutorial, you will add this file to the plugin to enable static rendering, so stay tuned.
+</div>
+
+## Initial setup
+
+Let's start by creating the simplest Copyright Date Block possible, which will be a dynamically rendered block that simply displays the copyright symbol (©) and the current year. We'll also add a few controls allowing the user to modify font size and text color.
+
+Before proceeding to the following steps, run `npm run start` in the terminal from within the plugin directory. This command will watch each file in the `/src` folder for changes. The block's build files will be updated each time you save a file.
+
+Check out the [Working with JavaScript for the Block Editor](https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor/) documentation to learn more.
+
+### Updating block.json
+
+Open the `block.json` file in the `/src` folder.
+
+```json
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "create-block/copyright-date-block",
+	"version": "0.1.0",
+	"title": "Copyright Date Block",
+	"category": "widgets",
+	"icon": "smiley",
+	"description": "Example block scaffolded with Create Block tool.",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"textdomain": "copyright-date-block",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php",
+	"viewScript": "file:./view.js"
+}
+```
+
+<div class="callout callout-info">
+	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/">block.json</a> documentation for an introduction to this file.
+</div>
+
+Since this scaffolding process created this file, it requires some updating to suit the needs of the Copyright Date Block.
+
+#### Modifying the block identity
+
+Begin by removing the icon and adding a more appropriate description. You will add a custom icon later.
+
+1. Remove the line for `icon`
+2. Update the description to "Display your site's copyright date."
+3. Save the file
+
+After you refresh the Editor, you should now see that the block no longer has the smiley face icon, and its description has been updated.
+
+![The block in the Editor with updated information](https://developer.wordpress.org/files/2023/12/block-tutorial-4.png)
+
+#### Adding block supports
+
+Next, let's add a few [block supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) so that the user can control the font size and text color of the block.
+
+<div class="callout callout-tip">
+	You should always try to use native block supports before building custom functionality. This approach provides users with a consistent editing experience across blocks, and your block benefits from Core functionality with only a few lines of code.
+</div>
+
+Update the [`supports`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#enable-ui-settings-panels-for-the-block-with-supports) section of the `block.json` file to look like this.
+
+```json
+"supports": {
+	"color": {
+		"background": false,
+		"text": true
+	},
+	"html": false,
+	"typography": {
+		"fontSize": true
+	}
+},
+```
+
+Note that when you enable text color support with `"text": true`, the background color is also enabled by default. You are welcome to keep it enabled, but it's not required for this tutorial, so you can manually set `"background": false`.
+
+Save the file and select the block in the Editor. You will now see both Color and Typography panels in the Settings Sidebar. Try modifying the settings and see what happens.
+
+![The block in the Editor with block supports](https://developer.wordpress.org/files/2023/12/block-tutorial-5.png)
+
+#### Removing unnecessary code
+
+For simplicity, the styling for the Copyright Date Block will be controlled entirely by the color and typography block supports. This block also does not have any front-end JavaScript. Therefore, you don't need to specify stylesheets or a `viewScript` in the `block.json` file.
+
+1. Remove the line for `editorStyle`
+2. Remove the line for `style`
+3. Remove the line for `viewScript`
+4. Save the file
+
+Refresh the Editor, and you will see that the block styling now matches your current theme.
+
+![The block in the Editor without default styling](https://developer.wordpress.org/files/2023/12/block-tutorial-6.png)
+
+#### Putting it all together
+
+Your final `block.json` file should look like this:
+
+```json
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "create-block/copyright-date-block",
+	"version": "0.1.0",
+	"title": "Copyright Date Block",
+	"category": "widgets",
+	"description": "Display your site's copyright date.",
+	"example": {},
+	"supports": {
+		"color": {
+			"background": false,
+			"text": true
+		},
+		"html": false,
+		"typography": {
+			"fontSize": true
+		}
+	},
+	"textdomain": "copyright-date-block",
+	"editorScript": "file:./index.js",
+	"render": "file:./render.php"
+}
+```
+
+### Updating index.js
+
+Before you start building the functionality of the block itself, let's do a bit more cleanup and add a custom icon to the block.
+
+Open the [`index.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#index-js) file. This is the main JavaScript file of the block and is used to register it on the client. You can learn more about client-side and server-side registration in the [Registration of a block](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/) documentation.
+
+Start by looking at the [`registerBlockType`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/) function. This function accepts the name of the block, which we are getting from the imported `block.json` file, and the block configuration object.
+
+```js
+import Edit from './edit';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+} );
+```
+
+By default, the object just includes the `edit` property, but you can add many more, including `icon`. While most of these properties are already defined in `block.json`, you need to specify the icon here to use a custom SVG.
+
+#### Adding a custom icon
+
+Using the calendar icon from the [Gutenberg Storybook](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library), add the SVG to the function like so:
+
+```js
+const calendarIcon = (
+	<svg
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
+	</svg>
+);
+
+registerBlockType( metadata.name, {
+	icon: calendarIcon,
+	edit: Edit
+} );
+```
+
+<div class="callout callout-tip">
+	All block icons should be 24 pixels square. Note the <code>viewBox</code> parameter above.
+</div>
+
+Save the `index.js` file and refresh the Editor. You will now see the calendar icon instead of the default.
+
+![The block in the Editor a custom icon](https://developer.wordpress.org/files/2023/12/block-tutorial-7.png)
+
+At this point, the block's icon and description are correct, and block supports allow you to change the font size and text color. Now, it's time to move on to the actual functionality of the block.
+
+### Updating edit.js
+
+The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message "Copyright Date Block – hello from the editor!". Let's change that.
+
+Open the file and see that the `Edit()` function returns a paragraph tag with the default message.
+
+```js
+export default function Edit() {
+	return (
+		<p { ...useBlockProps() }>
+			{ __(
+				'Copyright Date Block – hello from the editor!',
+				'copyright-date-block-demo'
+			) }
+		</p>
+	);
+}
+```
+
+It looks a bit more complicated than it is.
+
+- [`useBlockProps()`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#block-wrapper-props) outputs all the necessary CSS classes and styles in the [block's wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-edit-components-markup) needed by the Editor, which includes the style provided by the block supports you added earlier
+- [`__()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/) is used for the internationalization of text strings
+
+<div class="callout callout-info">
+	Review the <a href="https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/">block wrapper</a> documentation for an introductory guide on how to ensure the block's markup wrapper has the proper attributes.
+</div>
+
+As a reminder, the main purpose of this block is to display the copyright symbol (©) and the current year. So, you first need to get the current year in string form, which can be done with the following code.
+
+```js
+const currentYear = new Date().getFullYear().toString();
+```
+
+Next, update the function to display the correct information.
+
+```js
+export default function Edit() {
+	const currentYear = new Date().getFullYear().toString();
+
+	return (
+		<p { ...useBlockProps() }>© { currentYear }</p>
+	);
+}
+```
+
+Save the `edit.js` file and refresh the Editor. You will now see the copyright symbol (©) followed by the current year.
+
+![The block in the Editor displays the correct content](https://developer.wordpress.org/files/2023/12/block-tutorial-8.png)
+
+### Updating render.php
+
+While the block is working properly in the Editor, the default block message is still being displayed on the front end. To fix this, open the [`render.php`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#render-php) file, and you will see the following.
+
+```php
+<?php
+...
+?>
+<p <?php echo get_block_wrapper_attributes(); ?>>
+	<?php esc_html_e( 'Copyright Date Block – hello from a dynamic block!', 'copyright-date-block' ); ?>
+</p>
+
+```
+
+Similar to the `useBlockProps()` function in the Editor, [`get_block_wrapper_attributes()`](https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/) outputs all the necessary CSS classes and styles in the [block's wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-server-side-render-markup). Only the content needs to be updated.
+
+You can use `date( "Y" )` to get the current year in PHP, and your `render.php` should look like this.
+
+```php
+<?php
+...
+?>
+<p <?php echo get_block_wrapper_attributes(); ?>>© <?php echo date( "Y" ); ?></p>
+```
+
+Save the file and confirm that the block appears correctly in the Editor and on the front end.
+
+### Cleaning up
+
+When you use the `create-block` package to scaffold a block, it might include files that you don't need. In the case of this tutorial, the block doesn't use stylesheets or front end JavaScript. Clean up the plugin's `src/` folder with the following actions.
+
+1. In the `edit.js` file, remove the lines that import `editor.scss`
+2. In the `index.js` file, remove the lines that import `style.scss`
+3. Delete the editor.scss, style.scss, and view.js files
+
+Finally, make sure that there are no unsaved changes and then terminate the `npm run start` command. Run `npm run build` to optimize your code and make it production-ready.
+
+You have built a fully functional WordPress block, but let's not stop here. In the next sections, we'll add functionality and enable static rendering.
+
+## Adding block attributes
+
+The Copyright Date Block you have built shows the current year, but what if you wanted to display a starting year as well?
+
+![What you're going to build](https://developer.wordpress.org/files/2023/12/block-tutorial-1.png)
+
+This functionality would require users to enter their starting year somewhere on the block. They should also have the ability to toggle it on or off.
+
+You could implement this in different ways, but all would require [block attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/). Attributes allow you to store custom data for the block that can then be used to modify the block's markup.
+
+To enable this starting year functionality, you will need one attribute to store the starting year and another that will be used to tell WordPress whether the starting year should be displayed or not.
+
+### Updating block.json
+
+Block attributes are generally specified in the [`block.json`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-json/#data-storage-in-the-block-with-attributes) file. So open up the file and add the following section after the `example` property.
+
+```json
+"example": {},
+"attributes": {
+	"showStartingYear": {
+		"type": "boolean"
+	},
+	"startingYear": {
+		"type": "string"
+	}
+},
+```
+
+You must indicate the `type` when defining attributes. In this case, the `showStartingYear` should be true or false, so it's set to `boolean`. The `startingYear` is just a string.
+
+Save the file, and you can now move on to the Editor.
+
+### Updating edit.js
+
+Open the `edit.js` file. You will need to accomplish two tasks.
+
+- Add a user interface that allows the user to enter a starting year, toggle the functionality on or off, and store these settings as attributes.
+- Update the block to display the correct content depending on the defined attributes.
+
+#### Adding the user interface
+
+Earlier in this tutorial, you added block supports that automatically created Color and Typography panels in the Settings Sidebar of the block. You can create your own custom panels using the `InspectorControls` component.
+
+##### Inspector controls
+
+The `InspectorControls` belongs to the [`@wordpress/block-editor`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/) package, so you can import it into the `edit.js` file by adding the component name on line 14. The result should look like this.
+
+```js
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+```
+
+Next, update the Edit function to return the current block content and an `InspectorControls` component that includes the text "Testing." You can wrap everything in a [Fragment](https://react.dev/reference/react/Fragment) (`<></>`) to ensure proper JSX syntax. The result should look like this.
+
+```js
+export default function Edit() {
+	const currentYear = new Date().getFullYear().toString();
+
+	return (
+		<>
+			<InspectorControls>
+				Testing
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { currentYear }</p>
+		</>
+	);
+}
+```
+Save the file and refresh the Editor. When selecting the block, you should see the "Testing" message in the Settings Sidebar.
+
+![The Setting Sidebar now displays the message](https://developer.wordpress.org/files/2023/12/block-tutorial-9.png)
+
+##### Components and panels
+
+Now, let's use a few more Core components to add a custom panel and the user interface for the starting year functionality. You will want to import [`PanelBody`](https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody), [`TextControl`](https://developer.wordpress.org/block-editor/reference-guides/components/text-control/), and [`ToggleControl`](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/) from the [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-components/) package.
+
+Add the following line below the other imports in the `edit.js` file.
+
+```js
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
+```
+
+Then wrap the "Testing" message in the `PanelBody` component and set the `title` parameter to "Settings". Refer to the [component documentation](https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody) for additional parameter options.
+
+```js
+export default function Edit() {
+	const currentYear = new Date().getFullYear().toString();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
+					Testing
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { currentYear }</p>
+		</>
+	);
+}
+```
+
+Save the file and refresh the Editor. You should now see the new Settings panel.
+
+![The Setting Sidebar now displays a custom panel](https://developer.wordpress.org/files/2023/12/block-tutorial-10.png)
+
+##### Text control
+
+The next step is to replace the "Testing" message with a `TextControl` component that allows the user to set the `startingYear` attribute. However, you must include two parameters in the `Edit()` function before doing so.
+
+- `attributes` is an object that contains all the attributes for the block
+- `setAttributes` is a function that allows you to update the value of an attribute
+
+With these parameters included, you can fetch the `showStartingYear` and `startingYear` attributes.
+
+Update the top of the `Edit()` function to look like this.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+	const { showStartingYear, startingYear } = attributes;
+	...
+```
+
+<div class="callout callout-tip">
+	To see all the attributes associated with the Copyright Date Block, add <code>console.log( attributes );</code> at the top of the <code>Edit()</code> function. This can be useful when building and testing a custom block.
+</div>
+
+Now, you can remove the "Testing" message and add a `TextControl`. It should include:
+
+1. A `label` property set to "Starting year"
+2. A `value` property set to the attribute `startingYear`
+3. An `onChange` property that updates the `startingYear` attribute whenever the value changes
+
+Putting it all together, the `Edit()` function should look like the following.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+	const { showStartingYear, startingYear } = attributes;
+	const currentYear = new Date().getFullYear().toString();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
+					<TextControl
+					    __nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __(
+							'Starting year',
+							'copyright-date-block'
+						) }
+						value={ startingYear || '' }
+						onChange={ ( value ) =>
+							setAttributes( { startingYear: value } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { currentYear }</p>
+		</>
+	);
+}
+```
+
+<div class="callout callout-tip">
+	You may have noticed that the <code>value</code> property has a value of <code>startingYear || ''</code>. The symbol <code>||</code> is called the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR</a> (logical disjunction) operator. This prevents warnings in React when the <code>startingYear</code> is empty. See <a href="https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components">Controlled and uncontrolled components</a> for details.
+</div>
+
+Save the file and refresh the Editor. Confirm that a text field now exists in the Settings panel. Add a starting year and confirm that when you update the page, the value is saved.
+
+![A live look at editing the new Starting Year field in the Settings Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-11.gif)
+
+##### Toggle control
+
+Next, let's add a toggle that will turn the starting year functionality on or off. You can do this with a `ToggleControl` component that sets the `showStartingYear` attribute. It should include:
+
+1. A `label` property set to "Show starting year"
+2. A `checked` property set to the attribute `showStartingYear`
+3. An `onChange` property that updates the `showStartingYear` attribute whenever the toggle is checked or unchecked
+
+You can also update the "Starting year" text input so it's only displayed when `showStartingYear` is `true`, which can be done using the `&&` logical operator.
+
+The `Edit()` function should look like the following.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+	const { showStartingYear, startingYear } = attributes;
+	const currentYear = new Date().getFullYear().toString();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
+					<ToggleControl
+						checked={ !! showStartingYear }
+						label={ __(
+							'Show starting year',
+							'copyright-date-block'
+						) }
+						onChange={ () =>
+							setAttributes( {
+								showStartingYear: ! showStartingYear,
+							} )
+						}
+					/>
+					{ showStartingYear && (
+						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __(
+								'Starting year',
+								'copyright-date-block'
+							) }
+							value={ startingYear || '' }
+							onChange={ ( value ) =>
+								setAttributes( { startingYear: value } )
+							}
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { currentYear }</p>
+		</>
+	);
+}
+```
+
+Save the file and refresh the Editor. Confirm that clicking the toggle displays the text input, and when you update the page, the toggle remains active.
+
+![A live look at editing the new Show Starting Year toggle in the Settings Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-12.gif)
+
+#### Updating the block content
+
+So far, you have created the user interface for adding a starting year and updating the associated block attributes. Now you need to actually update the block content in the Editor.
+
+Let's create a new variable called `displayDate`. When `showStartingYear` is `true` and the user has provided a `startingYear`, the `displayDate` should include the `startingYear` and the `currentYear` separated by an em dash. Otherwise, just display the `currentYear`.
+
+The code should look something like this.
+
+```js
+let displayDate;
+
+if ( showStartingYear && startingYear ) {
+	displayDate = startingYear + '–' + currentYear;
+} else {
+	displayDate = currentYear;
+}
+```
+
+<div class="callout callout-tip">
+	When you declare a variable with <code>let</code>, it means that the variable may be reassigned later. Declaring a variable with <code>const</code> means that the variable will never change. You could rewrite this code using <code>const</code>. It's just a matter of personal preference.
+</div>
+
+Next, you just need to update the block content to use the `displayDate` instead of the `currentYear` variable.
+
+The `Edit()` function should look like the following.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+	const { showStartingYear, startingYear } = attributes;
+	const currentYear = new Date().getFullYear().toString();
+
+	let displayDate;
+
+	if ( showStartingYear && startingYear ) {
+			displayDate = startingYear + '–' + currentYear;
+	} else {
+		displayDate = currentYear;
+	}
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
+					<ToggleControl
+						checked={ !! showStartingYear }
+						label={ __(
+							'Show starting year',
+							'copyright-date-block'
+						) }
+						onChange={ () =>
+							setAttributes( {
+								showStartingYear: ! showStartingYear,
+							} )
+						}
+					/>
+					{ showStartingYear && (
+						<TextControl
+							label={ __(
+								'Starting year',
+								'copyright-date-block'
+							) }
+							value={ startingYear || '' }
+							onChange={ ( value ) =>
+								setAttributes( { startingYear: value } )
+							}
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { displayDate }</p>
+		</>
+	);
+}
+```
+
+Save the file and refresh the Editor. Confirm that the block content updates correctly when you make changes in the Settings panel.
+
+![A live look at the block content being updated by the new fields in the Setting Sidebar](https://developer.wordpress.org/files/2023/12/block-tutorial-13.gif)
+
+### Updating render.php
+
+While the Editor looks great, the starting year functionality has yet to be added to the front end. Let's fix that by updating the `render.php` file.
+
+Start by adding a variable called `$display_date` and replicate what you did in the `Edit()` function above.
+
+This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` if the `showStartingYear` attribute is `false`.
+
+<div class="callout callout-tip">
+	<p>Three variables are exposed in <code>render.php</code>, which you can use to customize the block's output:</p>
+	<ul>
+		<li><code>$attributes</code> (array): The block attributes.</li>
+		<li><code>$content</code> (string): The block default content.</li>
+		<li><code>$block</code> (WP_Block): The block instance.</li>
+	</ul>
+</div>
+
+The code should look something like this.
+
+```php
+if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
+	$display_date = $attributes['startingYear'] . '–' . $current_year;
+} else {
+	$display_date = $current_year;
+}
+```
+
+Next, you just need to update the block content to use the `$display_date` instead of the `$current_year` variable.
+
+Your final `render.php` file should look like this.
+
+```php
+<?php
+$current_year = date( "Y" );
+
+if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
+	$display_date = $attributes['startingYear'] . '–' . $current_year;
+} else {
+	$display_date = $current_year;
+}
+?>
+<p <?php echo get_block_wrapper_attributes(); ?>>
+    © <?php echo esc_html( $display_date ); ?>
+</p>
+```
+
+Save the file and confirm that the correct block content is now appearing on the front end of your site.
+
+You have now successfully built a dynamically rendered custom block that utilizes block supports, core WordPress components, and custom attributes. In many situations, this is as far as you would need to go for a block displaying the copyright date with some additional functionality.
+
+In the next section, however, you will add static rendering to the block. This exercise will illustrate how block data is stored in WordPress and provide a fallback should this plugin ever be inadvertently disabled.
+
+## Adding static rendering
+
+A block can utilize dynamic rendering, static rendering, or both. The block you have built so far is dynamically rendered. Its block markup and associated attributes are stored in the database, but its HTML output is not.
+
+Statically rendered blocks will always store the block markup, attributes, and output in the database. Blocks can also store static output in the database while being further enhanced dynamically on the front end, a combination of both methods.
+
+You will see the following if you switch to the Code editor from within the Editor.
+
+```html
+<!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} /-->
+```
+
+Compare this to a statically rendered block like the Paragraph block.
+
+```html
+<!-- wp:paragraph -->
+<p>This is a test.</p>
+<!-- /wp:paragraph -->
+```
+
+The HTML of the paragraph is stored in post content and saved in the database.
+
+You can learn more about dynamic and static rendering in the [Fundamentals documentation](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). While most blocks are either dynamically or statically rendered, you can build a block that utilizes both methods.
+
+### Why add static rendering?
+
+When you add static rendering to a dynamically rendered block, the `render.php` file will still control the output on the front end, but the block's HTML content will be saved in the database. This means that the content will remain if the plugin is ever removed from the site. In the case of this Copyright Date Block, the content will revert to a Custom HTML block that you can easily convert to a Paragraph block.
+
+![An error message in the Editor when a block type no longer exists](https://developer.wordpress.org/files/2023/12/block-tutorial-14.png)
+
+While not necessary in all situations, adding static rendering to a dynamically rendered block can provide a helpful fallback should the plugin ever be disabled unintentionally.
+
+Also, consider a situation where the block markup is included in a block pattern or theme template. If a user installs that theme or uses the pattern without the Copyright Date Block installed, they will get a notice that the block is not available, but the content will still be displayed.
+
+Adding static rendering is also a good exploration of how block content is stored and rendered in WordPress.
+
+### Adding a save function
+
+Start by adding a new file named `save.js` to the `src/` folder. In this file, add the following.
+
+```js
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<p { ...useBlockProps.save() }>
+			{ 'Copyright Date Block – hello from the saved content!' }
+		</p>
+	);
+}
+```
+
+This should look similar to the original `edit.js` file, and you can refer to the [block wrapper](https://developer.wordpress.org/block-editor/getting-started/fundamentals/block-wrapper/#the-save-components-markup) documentation for additional information.
+
+Next, in the `index.js` file, import this `save()` function and add a save property to the `registerBlockType()` function. Here's a simplified view of the updated file.
+
+```js
+import save from './save';
+
+...
+
+registerBlockType( metadata.name, {
+	icon: calendarIcon,
+	edit: Edit,
+	save
+} );
+```
+
+<div class="callout callout-tip">
+	When defining properties of an object, if the property name and the variable name are the same, you can use shorthand property names. This is why the code above uses <code>save</code> instead of <code>save: save</code>.
+</div>
+
+Save both `save.js` and `index.js` files and refresh the Editor. It should look like this.
+
+![A block validation error message in the Editor](https://developer.wordpress.org/files/2023/12/block-tutorial-15.png)
+
+Don't worry, the error is expected. If you open the inspector in your browser, you should see the following message.
+
+![A block validation error message in the console](https://developer.wordpress.org/files/2023/12/block-tutorial-16.png)
+
+This block validation error occurs because the `save()` function returns block content, but no HTML is stored in the block markup since the previously saved block was dynamic. Remember that this is what the markup currently looks like.
+
+```html
+<!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} /-->
+```
+
+You will see more of these errors as you update the `save()` function in subsequent steps. Just click "Attempt Block Recovery" and update the page.
+
+After performing block recovery, open the Code editor and you will see the markup now looks like this.
+
+```html
+<!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} -->
+<p class="wp-block-create-block-copyright-date-block">Copyright Date Block – hello from the saved content!</p>
+<!-- /wp:create-block/copyright-date-block -->
+```
+
+You will often encounter block validation errors when building a block with static rendering, and that's ok. The output of the `save()` function must match the HTML in the post content exactly, which may end up out of sync as you add functionality. So long as there are no validation errors when you're completely finished building the block, you will be all set.
+
+### Updating save.js
+
+Next, let's update the output of the `save()` function to display the correct content. Start by copying the same approach used in `edit.js`.
+
+1. Add the `attributes` parameter to the function
+2. Define the `showStartingYear` and `startingYear` variables
+3. Define a `currentYear` variable
+4. Define a `displayDate` variable depending on the values of `currentYear`, `showStartingYear`, and `startingYear`
+
+The result should look like this.
+
+```js
+export default function save( { attributes } ) {
+	const { showStartingYear, startingYear } = attributes;
+	const currentYear = new Date().getFullYear().toString();
+
+	let displayDate;
+
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + currentYear;
+	} else {
+		displayDate = currentYear;
+	}
+
+	return (
+		<p { ...useBlockProps.save() }>© { displayDate }</p>
+	);
+}
+```
+
+Save the file and refresh the Editor. Click "Attempt Block Recovery" and update the page. Check the Code editor, and the block markup should now look something like this.
+
+```html
+<!-- wp:create-block/copyright-date-block {"showStartingYear":true,"startingYear":"2017"} -->
+<p class="wp-block-create-block-copyright-date-block">© 2017–2023</p>
+<!-- /wp:create-block/copyright-date-block -->
+```
+
+At this point, it might look like you're done. The block content is now saved as HTML in the database and the output on the front end is dynamically rendered. However, there are still a few things that need to be addressed.
+
+Consider the situation where the user added the block to a page in 2023 and then went back to edit the page in 2024. The front end will update as expected, but in the Editor, there will be a block validation error. The `save()` function knows that it's 2024, but the block content saved in the database still says 2023.
+
+Let's fix this in the next section.
+
+### Handling dynamic content in statically rendered blocks
+
+Generally, you want to avoid dynamic content in statically rendered blocks. This is part of the reason why the term "dynamic" is used when referring to dynamic rendering.
+
+That said, in this tutorial, you are combining both rendering methods, and you just need a bit more code to avoid any block validation errors when the year changes.
+
+The root of the issue is that the `currentYear` variable is set dynamically in the `save()` function. Instead, this should be a static variable within the function, which can be solved with an additional attribute.
+
+#### Adding a new attribute
+
+Open the `block.json` file and add a new attribute called `fallbackCurrentYear` with the type `string`. The `attributes` section of the file should now look like this.
+
+```json
+"attributes": {
+    "fallbackCurrentYear": {
+		"type": "string"
+    },
+    "showStartingYear": {
+		"type": "boolean"
+    },
+    "startingYear": {
+		"type": "string"
+	}
+},
+```
+
+Next, open the `save.js` file and use the new `fallbackCurrentYear` attribute in place of `currentYear`. Your updated `save()` function should look like this.
+
+```js
+export default function save( { attributes } ) {
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+
+	let displayDate;
+
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + fallbackCurrentYear;
+	} else {
+		displayDate = fallbackCurrentYear;
+	}
+
+	return (
+		<p { ...useBlockProps.save() }>© { displayDate }</p>
+	);
+}
+```
+
+Now, what happens if the `fallbackCurrentYear` is undefined?
+
+Before the `currentYear` was defined within the function, so the `save()` function always had content to return, even if `showStartingYear` and `startingYear` were undefined.
+
+Instead of returning just the copyright symbol, let's add a condition that if `fallbackCurrentYear` is not set, return `null`. It's generally better to save no HTML in the database than incomplete data.
+
+The final `save()` function should look like this.
+
+```js
+export default function save( { attributes } ) {
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+
+	if ( ! fallbackCurrentYear ) {
+		return null;
+	}
+
+	let displayDate;
+
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + fallbackCurrentYear;
+	} else {
+		displayDate = fallbackCurrentYear;
+	}
+
+	return (
+		<p { ...useBlockProps.save() }>© { displayDate }</p>
+	);
+}
+```
+
+Save both the `block.json` and `save.js` files; you won't need to make any more changes.
+
+#### Setting the attribute in edit.js
+
+The `save()` function now uses the new `fallbackCurrentYear`, so it needs to be set somewhere. Let's use the `Edit()` function.
+
+Open the `edit.js` file and start by defining the `fallbackCurrentYear` variable at the top of the `Edit()` functional alongside the other attributes. Next, review what's happening in the function.
+
+When the block loads in the Editor, the `currentYear` variable is defined. The function then uses this variable to set the content of the block.
+
+Now, let's set the `fallbackCurrentYear` attribute to the `currentYear` when the block loads if the attribute is not already set.
+
+```js
+if ( currentYear !== fallbackCurrentYear ) {
+	setAttributes( { fallbackCurrentYear: currentYear } );
+}
+```
+
+This will work but can be improved by ensuring this code only runs once when the block is initialized. To do so, you can use the [`useEffect`](https://react.dev/reference/react/useEffect) React hook. Refer to the React documentation for more information about how to use this hook.
+
+First, import `useEffect` with the following code.
+
+```js
+import { useEffect } from 'react';
+```
+
+Then wrap the `setAttribute()` code above in a `useEffect` and place this code after the `currentYear` definition in the `Edit()` function. The result should look like this.
+
+```js
+export default function Edit( { attributes, setAttributes } ) {
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+
+	// Get the current year and make sure it's a string.
+	const currentYear = new Date().getFullYear().toString();
+
+	// When the block loads, set the fallbackCurrentYear attribute to the
+	// current year if it's not already set.
+	useEffect( () => {
+		if ( currentYear !== fallbackCurrentYear ) {
+			setAttributes( { fallbackCurrentYear: currentYear } );
+		}
+	}, [ currentYear, fallbackCurrentYear, setAttributes ] );
+
+	...
+```
+
+When the block is initialized in the Editor, the `fallbackCurrentYear` attribute will be immediately set. This value will then be available to the `save()` function, and the correct block content will be displayed without block validation errors.
+
+The one caveat is when the year changes. If a Copyright Date Block was added to a page in 2023 and then edited in 2024, the `fallbackCurrentYear` attribute will no longer equal the `currentYear`, and the attribute will be automatically updated to `2024`. This will update the HTML returned by the `save()` function.
+
+You will not get any block validation errors, but the Editor will detect that changes have been made to the page and prompt you to update.
+
+#### Optimizing render.php
+
+The final step is to optimize the `render.php` file. If the `currentYear` and the `fallbackCurrentYear` attribute are the same, then there is no need to dynamically create the block content. It is already saved in the database and is available in the  `render.php` file via the `$content` variable.
+
+Therefore, update the file to render the generated content if `currentYear` and `fallbackCurrentYear` do not match.
+
+```php
+$current_year = date( "Y" );
+
+// Determine which content to display.
+if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
+
+	// The current year is the same as the fallback, so use the block content saved in the database (by the save.js function).
+	$block_content = $content;
+} else {
+
+	// The current year is different from the fallback, so render the updated block content.
+	if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
+		$display_date = $attributes['startingYear'] . '–' . $current_year;
+	} else {
+		$display_date = $current_year;
+	}
+
+	$block_content = '<p ' . get_block_wrapper_attributes() . '>© ' . esc_html( $display_date ) . '</p>';
+}
+
+echo wp_kses_post( $block_content );
+```
+
+That's it! You now have a block that utilizes both dynamic and static rendering.
+
+## Wrapping up
+
+Congratulations on completing this tutorial and building your very own Copyright Date Block. Throughout this journey, you have gained a solid foundation in WordPress block development and are now ready to start building your own blocks.
+
+For final reference, the complete code for this tutorial is available in the [Block Development Examples](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/copyright-date-block-09aac3) repository on GitHub.
+
+Now, whether you're now looking to refine your skills, tackle more advanced projects, or stay updated with the latest WordPress trends, the following resources will help you improve your block development skills:
+
+- [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/)
+- [Fundamentals of Block Development](https://developer.wordpress.org/block-editor/getting-started/fundamentals/)
+- [WordPress Developer Blog](https://developer.wordpress.org/news/)
+- [Block Development Examples](https://github.com/WordPress/block-development-examples) | GitHub repository
+
+Remember, every expert was once a beginner. Keep learning, experimenting, and, most importantly, have fun building with WordPress.
diff --git a/docs/how-to-guides/README.md b/docs/how-to-guides/README.md
index c0a2bd7f1fe6f8..c57dcad7a35289 100644
--- a/docs/how-to-guides/README.md
+++ b/docs/how-to-guides/README.md
@@ -2,13 +2,13 @@
 
 The new editor is highly flexible, like most of WordPress. You can build custom blocks, modify the editor's appearance, add special plugins, and much more.
 
-## Creating Blocks
+## Creating blocks
 
 The editor is about blocks, and the main extensibility API is the Block API. It allows you to create your own static blocks, [Dynamic Blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md) ( rendered on the server ) and also blocks capable of saving data to Post Meta for more structured content.
 
-If you want to learn more about block creation, see the [Create a Block tutorial](/docs/getting-started/create-block/README.md) for the best place to start.
+If you want to learn more about block creation, see the [Create a Block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) for the best place to start.
 
-## Extending Blocks
+## Extending blocks
 
 It is also possible to modify the behavior of existing blocks or even remove them completely using filters.
 
@@ -24,11 +24,11 @@ Refer to the [Plugins](/packages/plugins/README.md) and [Edit Post](/packages/ed
 
 You can also filter certain aspects of the editor; this is documented on the [Editor Filters](/docs/reference-guides/filters/editor-filters.md) page.
 
-## Meta Boxes
+## Meta boxes
 
 Porting PHP meta boxes to blocks or sidebar plugins is highly encouraged, learn how in the [meta box](/docs/how-to-guides/metabox.md) and [sidebar plugin](/docs/how-to-guides/plugin-sidebar-0.md) guides.
 
-## Theme Support
+## Theme support
 
 By default, blocks provide their styles to enable basic support for blocks in themes without any change. Themes can add/override these styles, or rely on defaults.
 
@@ -38,7 +38,7 @@ There are some advanced block features which require opt-in support in the theme
 
 Autocompleters within blocks may be extended and overridden. Learn more about the [autocomplete](/docs/reference-guides/filters/autocomplete-filters.md) filters.
 
-## Block Parsing and Serialization
+## Block parsing and serialization
 
 Posts in the editor move through a couple of different stages between being stored in `post_content` and appearing in the editor. Since the blocks themselves are data structures that live in memory it takes a parsing and serialization step to transform out from and into the stored format in the database.
 
diff --git a/docs/how-to-guides/accessibility.md b/docs/how-to-guides/accessibility.md
index 75458d6690cab4..bdf9c977b5cf44 100644
--- a/docs/how-to-guides/accessibility.md
+++ b/docs/how-to-guides/accessibility.md
@@ -4,7 +4,7 @@ Accessibility documentation for developers working on the Gutenberg Project.
 
 For more information on accessibility and WordPress see the [Make WordPress Accessibility Handbook](https://make.wordpress.org/accessibility/handbook/) and the [Accessibility Team section](https://make.wordpress.org/accessibility/).
 
-## Landmark Regions
+## Landmark regions
 
 It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.
 
diff --git a/docs/how-to-guides/block-tutorial/README.md b/docs/how-to-guides/block-tutorial/README.md
index b1ff5a19119c2b..8688bd09416d7b 100644
--- a/docs/how-to-guides/block-tutorial/README.md
+++ b/docs/how-to-guides/block-tutorial/README.md
@@ -2,7 +2,9 @@
 
 The purpose of this tutorial is to step through the fundamentals of creating a new block type. Beginning with the simplest possible example, each new section will incrementally build upon the last to include more of the common functionality you could expect to need when implementing your own block types.
 
-To follow along with this tutorial, you can [download the accompanying WordPress plugin](https://github.com/WordPress/gutenberg-examples) which includes all of the examples for you to try on your own site. At each step along the way, experiment by modifying the examples with your own ideas, and observe the effects they have on the block's behavior.
+To follow along with this tutorial, you can download the [accompanying WordPress plugin](https://github.com/WordPress/block-development-examples) which includes all of the examples for you to try on your own site. At each step along the way, experiment by modifying the examples with your own ideas, and observe the effects they have on the block's behavior.
+
+> To find the latest version of the .zip file go to the repo's [releases page](https://github.com/WordPress/block-development-examples/releases) and look in the latest release under 'Assets'.
 
 Code snippets are provided in two formats "JSX" and "Plain". JSX refers to JavaScript code that uses JSX syntax which requires a build step. Plain refers to "classic" JavaScript that does not require building. You can change between them using tabs found above each code example. Using JSX, does require you to run [the JavaScript build step](/docs/how-to-guides/javascript/js-build-setup/) to compile your code to a browser compatible format.
 
diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
index e668a6ac762388..85ac956ff74ba6 100644
--- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
+++ b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
@@ -6,7 +6,7 @@ A block typically inserts markup (HTML) into post content that you want to style
 
 ## Before you start
 
-You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [create a basic block](/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md) or [block tutorial](/docs/getting-started/create-block/README.md) to get setup.
+You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [Quick Start Guide](/docs/getting-started/quick-start-guide.md) or [block tutorial](/docs/getting-started/tutorial.md) to get set up.
 
 ## Methods to add style
 
@@ -18,9 +18,6 @@ The first method shows adding the style inline. This transforms the defined styl
 
 The `useBlockProps` React hook is used to set and apply properties on the block's wrapper element. The following example shows how:
 
-{% codetabs %}
-{% JSX %}
-
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -55,49 +52,6 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 } );
 ```
 
-{% Plain %}
-
-```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
-		edit: function ( props ) {
-			const greenBackground = {
-				backgroundColor: '#090',
-				color: '#fff',
-				padding: '20px',
-			};
-			const blockProps = blockEditor.useBlockProps( {
-				style: greenBackground,
-			} );
-			return el(
-				'p',
-				blockProps,
-				'Hello World (from the editor, in green).'
-			);
-		},
-		save: function () {
-			const redBackground = {
-				backgroundColor: '#090',
-				color: '#fff',
-				padding: '20px',
-			};
-			const blockProps = blockEditor.useBlockProps.save( {
-				style: redBackground,
-			} );
-			return el(
-				'p',
-				blockProps,
-				'Hello World (from the frontend, in red).'
-			);
-		},
-	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
-```
-
-{% end %}
-
 ## Method 2: Block classname
 
 The inline style works well for a small amount of CSS to apply. If you have much more than the above you will likely find that it is easier to manage with them in a separate stylesheet file.
@@ -106,9 +60,6 @@ The `useBlockProps` hooks includes the classname for the block automatically, it
 
 For example the block name: `gutenberg-examples/example-02-stylesheets` would get the classname: `wp-block-gutenberg-examples-example-02-stylesheets`. It might be a bit long but best to avoid conflicts with other blocks.
 
-{% codetabs %}
-{% JSX %}
-
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
@@ -131,77 +82,28 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 } );
 ```
 
-{% Plain %}
-
-```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
-		edit: function ( props ) {
-			var blockProps = blockEditor.useBlockProps();
-			return el(
-				'p',
-				blockProps,
-				'Hello World (from the editor, in green).'
-			);
-		},
-		save: function () {
-			var blockProps = blockEditor.useBlockProps.save();
-			return el(
-				'p',
-				blockProps,
-				'Hello World (from the frontend, in red).'
-			);
-		},
-	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
-```
-
-{% end %}
-
 ### Build or add dependency
 
-In order to include the blockEditor as a dependancy, make sure to run the build step, or update the asset php file.
-
-{% codetabs %}
-{% JSX %}
+In order to include the blockEditor as a dependency, make sure to run the build step, or update the asset php file.
 
 Build the scripts and update the asset file which is used to keep track of dependencies and the build version.
 ```bash
 npm run build
 ```
 
-{% Plain %}
-
-Edit the asset file to include the block-editor dependancy for the scripts.
-
-```php
-<?php return
-	array( 'dependencies' =>
-		array(
-			'wp-blocks',
-			'wp-element',
-			'wp-block-editor',
-			'wp-polyfill'
-		),
-		'version' => '0.1'
-	);
-```
-
-{% end %}
-
 ### Enqueue stylesheets
 
 Like scripts, you can enqueue your block's styles using the `block.json` file.
 
-Use the `editorStyle` property to a CSS file you want to load in the editor view, and use the `style` property for a CSS file you want to load on the frontend when the block is used.
+Use the `editorStyle` property to a CSS file you want to load in the editor view only, use the `style` property for a CSS file you want to load both in the editor view and on the frontend when the block is used, and use the `viewStyle` property for a CSS file you want to load only on the frontend when the block is used.
+
+It is worth noting that, if the editor content is iframed, both the `style` and `editorStyle` will load in the iframe. `editorStyle` will also load outside the iframe, so it can be used for editor content as well as UI.
 
 For example:
 
 ```json
 {
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "gutenberg-examples/example-02-stylesheets",
 	"title": "Example: Stylesheets",
 	"icon": "universal-access-alt",
@@ -236,6 +138,17 @@ And a `style.css` file to load on the frontend:
 
 The files will automatically be enqueued when specified in the block.json.
 
+<div class="callout callout-info">
+
+If you are using `@wordpress/scripts` you will need to import your stylesheet within your corresponding JavaScript file in order for `@wordpress/scripts` to process the stylesheet.
+
+Example:
+
+- In `edit.js` you would place `import './editor.scss';`
+- In `index.js` you would place `import './style.scss';`
+- In `view.js` you would place `import './view.scss';` (interactive block template)
+</div>
+
 **Note:** If you have multiple files to include, you can use standard `wp_enqueue_style` functions like any other plugin or theme. You will want to use the following hooks for the block editor:
 
 -   `enqueue_block_editor_assets` - to load only in editor view
@@ -245,4 +158,4 @@ The files will automatically be enqueued when specified in the block.json.
 
 This guide showed a couple of different ways to apply styles to your block, by either inline or in its own style sheet. Both of these methods use the `useBlockProps` hook, see the [block wrapper reference documentation](/docs/reference-guides/block-api/block-edit-save.md#block-wrapper-props) for additional details.
 
-See the complete [example-02-stylesheets](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/02-stylesheets) code in the [gutenberg-examples repository](https://github.com/WordPress/gutenberg-examples).
+See the complete [stylesheets-79a4c3](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/stylesheets-79a4c3) code in the [block-development-examples repository](https://github.com/WordPress/block-development-examples).
diff --git a/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md b/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md
deleted file mode 100644
index cd110973b124f2..00000000000000
--- a/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md
+++ /dev/null
@@ -1,283 +0,0 @@
-# Block Controls: Block Toolbar and Settings Sidebar
-
-To simplify block customization and ensure a consistent experience for users, there are a number of built-in UI patterns to help generate the editor preview. Like with the `RichText` component covered in the previous chapter, the `wp.editor` global includes a few other common components to render editing interfaces. In this chapter, we'll explore toolbars and the block inspector.
-
-## Block Toolbar
-
-![Screenshot of the rich text toolbar applied to a Paragraph block inside the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/toolbar-text.png)
-
-When the user selects a block, a number of control buttons may be shown in a toolbar above the selected block. Some of these block-level controls are included automatically if the editor is able to transform the block to another type, or if the focused element is a RichText component.
-
-You can also customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, those controls will be shown in the selected block's toolbar.
-
-{% codetabs %}
-{% JSX %}
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-
-import {
-	useBlockProps,
-	RichText,
-	AlignmentToolbar,
-	BlockControls,
-} from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
-	apiVersion: 2,
-	title: 'Example: Controls (esnext)',
-	icon: 'universal-access-alt',
-	category: 'design',
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'p',
-		},
-		alignment: {
-			type: 'string',
-			default: 'none',
-		},
-	},
-	example: {
-		attributes: {
-			content: 'Hello World',
-			alignment: 'right',
-		},
-	},
-	edit: ( { attributes, setAttributes } ) => {
-		const onChangeContent = ( newContent ) => {
-			setAttributes( { content: newContent } );
-		};
-
-		const onChangeAlignment = ( newAlignment ) => {
-			setAttributes( {
-				alignment: newAlignment === undefined ? 'none' : newAlignment,
-			} );
-		};
-
-		return (
-			<div { ...useBlockProps() }>
-				{
-					<BlockControls>
-						<AlignmentToolbar
-							value={ attributes.alignment }
-							onChange={ onChangeAlignment }
-						/>
-					</BlockControls>
-				}
-				<RichText
-					className={ attributes.className }
-					style={ { textAlign: attributes.alignment } }
-					tagName="p"
-					onChange={ onChangeContent }
-					value={ attributes.content }
-				/>
-			</div>
-		);
-	},
-	save: ( props ) => {
-		const blockProps = useBlockProps.save();
-
-		return (
-			<div { ...blockProps }>
-				<RichText.Content
-					className={ `gutenberg-examples-align-${ props.attributes.alignment }` }
-					tagName="p"
-					value={ props.attributes.content }
-				/>
-			</div>
-		);
-	},
-} );
-```
-
-{% Plain %}
-
-```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
-	var RichText = blockEditor.RichText;
-	var AlignmentToolbar = blockEditor.AlignmentToolbar;
-	var BlockControls = blockEditor.BlockControls;
-	var useBlockProps = blockEditor.useBlockProps;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-04-controls', {
-		title: 'Example: Controls',
-		icon: 'universal-access-alt',
-		category: 'design',
-
-		attributes: {
-			content: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-			alignment: {
-				type: 'string',
-				default: 'none',
-			},
-		},
-		example: {
-			attributes: {
-				content: 'Hello World',
-				alignment: 'right',
-			},
-		},
-		edit: function ( props ) {
-			var content = props.attributes.content;
-			var alignment = props.attributes.alignment;
-
-			function onChangeContent( newContent ) {
-				props.setAttributes( { content: newContent } );
-			}
-
-			function onChangeAlignment( newAlignment ) {
-				props.setAttributes( {
-					alignment:
-						newAlignment === undefined ? 'none' : newAlignment,
-				} );
-			}
-
-			return el(
-				'div',
-				useBlockProps(),
-				el(
-					BlockControls,
-					{ key: 'controls' },
-					el( AlignmentToolbar, {
-						value: alignment,
-						onChange: onChangeAlignment,
-					} )
-				),
-				el( RichText, {
-					key: 'richtext',
-					tagName: 'p',
-					style: { textAlign: alignment },
-					onChange: onChangeContent,
-					value: content,
-				} )
-			);
-		},
-
-		save: function ( props ) {
-			var blockProps = useBlockProps.save();
-
-			return el(
-				'div',
-				blockProps,
-				el( RichText.Content, {
-					tagName: 'p',
-					className:
-						'gutenberg-examples-align-' +
-						props.attributes.alignment,
-					value: props.attributes.content,
-				} )
-			);
-		},
-	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
-```
-
-{% end %}
-
-Note that `BlockControls` is only visible when the block is currently selected and in visual editing mode. `BlockControls` are not shown when editing a block in HTML editing mode.
-
-## Settings Sidebar
-
-![Screenshot of the inspector panel focused on the settings for a Paragraph block](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/inspector.png)
-
-The Settings Sidebar is used to display less-often-used settings or settings that require more screen space. The Settings Sidebar should be used for **block-level settings only**.
-
-If you have settings that affects only selected content inside a block (example: the "bold" setting for selected text inside a paragraph): **do not place it inside the Settings Sidebar**. The Settings Sidebar is displayed even when editing a block in HTML mode, so it should only contain block-level settings.
-
-The Block Tab is shown in place of the Document Tab when a block is selected.
-
-Similar to rendering a toolbar, if you include an `InspectorControls` element in the return value of your block type's `edit` function, those controls will be shown in the Settings Sidebar region.
-The following example adds 2 color palettes to the sidebar, one for the text color and one for the background color.
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-
-import {
-	useBlockProps,
-	ColorPalette,
-	InspectorControls,
-} from '@wordpress/block-editor';
-
-registerBlockType( 'create-block/gutenpride', {
-	apiVersion: 2,
-	attributes: {
-		message: {
-			type: 'string',
-			source: 'text',
-			selector: 'div',
-			default: '', // empty default
-		},
-		bg_color: { type: 'string', default: '#000000' },
-		text_color: { type: 'string', default: '#ffffff' },
-	},
-	edit: ( { attributes, setAttributes } ) => {
-		const onChangeBGColor = ( hexColor ) => {
-			setAttributes( { bg_color: hexColor } );
-		};
-
-		const onChangeTextColor = ( hexColor ) => {
-			setAttributes( { text_color: hexColor } );
-		};
-
-		return (
-			<div { ...useBlockProps() }>
-				<InspectorControls key="setting">
-					<div id="gutenpride-controls">
-						<fieldset>
-							<legend className="blocks-base-control__label">
-								{ __( 'Background color', 'gutenpride' ) }
-							</legend>
-							<ColorPalette // Element Tag for Gutenberg standard colour selector
-								onChange={ onChangeBGColor } // onChange event callback
-							/>
-						</fieldset>
-						<fieldset>
-							<legend className="blocks-base-control__label">
-								{ __( 'Text color', 'gutenpride' ) }
-							</legend>
-							<ColorPalette // Element Tag for Gutenberg standard colour selector
-								onChange={ onChangeTextColor } // onChange event callback
-							/>
-						</fieldset>
-					</div>
-				</InspectorControls>
-				<TextControl
-					value={ attributes.message }
-					onChange={ ( val ) => setAttributes( { message: val } ) }
-					style={ {
-						backgroundColor: attributes.bg_color,
-						color: attributes.text_color,
-					} }
-				/>
-			</div>
-		);
-	},
-	save: ( { attributes } ) => {
-		return (
-			<div
-				{ ...useBlockProps.save() }
-				style={ {
-					backgroundColor: attributes.bg_color,
-					color: attributes.text_color,
-				} }
-			>
-				{ attributes.message }
-			</div>
-		);
-	},
-} );
-```
-
-Block controls rendered in both the toolbar and sidebar will also be used when
-multiple blocks of the same type are selected.
-
-**Note :** In the example above, we added text and background color customization support to our block to demonstrate the use of `InspectorControls` to add custom controls to the sidebar. That said, for common customization settings including color, border, spacing customization and more, we will see on the [next chapter](/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md) that you can rely on block supports to provide the same functionality in a more efficient way.
diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md
deleted file mode 100644
index b458b135104f90..00000000000000
--- a/docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md
+++ /dev/null
@@ -1,217 +0,0 @@
-# Block Supports in dynamic blocks
-
-Dynamic blocks are blocks that build their structure and content on the fly when the block is rendered on the front end.
-
-**Note :** All the details about the creation of dynamic blocks are documented [here](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md). The below examples demonstrate the usage of `block supports` in dynamic blocks.
-
-A lot of blocks, including core blocks, offer similar customization options. Whether that is to change the background color, text color, or to add padding, margin customization options...
-
-Let's examine the scenario to enable a user to change the background color and text color of a block.
-
-### Without using block supports
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import {
-	useBlockProps,
-	ColorPalette,
-	InspectorControls,
-} from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
-	title: 'Example: last post title',
-	icon: 'megaphone',
-	category: 'widgets',
-	attributes: {
-		bgColor: { type: 'string' },
-		textColor: { type: 'string' },
-	},
-	edit: function BlockEdit( {
-		attributes: { bgColor, textColor },
-		setAttributes,
-	} ) {
-		const blockProps = useBlockProps();
-		const posts = useSelect( ( select ) => {
-			return select( 'core' ).getEntityRecords( 'postType', 'post', {
-				per_page: 1,
-			} );
-		}, [] );
-		const onChangeBGColor = ( hexColor ) => {
-			setAttributes( { bgColor: hexColor } );
-		};
-		const onChangeTextColor = ( newColor ) => {
-			setAttributes( { textColor: newColor } );
-		};
-		if ( ! posts ) {
-			return null;
-		}
-		return (
-			<div { ...blockProps }>
-				<InspectorControls key="setting">
-					<fieldset>
-						<legend className="blocks-base-control__label">
-							{ __( 'Background color' ) }
-						</legend>
-						<ColorPalette // Element Tag for Gutenberg standard colour selector
-							onChange={ onChangeBGColor } // onChange event callback
-						/>
-					</fieldset>
-					<fieldset>
-						<legend className="blocks-base-control__label">
-							{ __( 'Text color' ) }
-						</legend>
-						<ColorPalette // Element Tag for Gutenberg standard colour selector
-							onChange={ onChangeTextColor } // onChange event callback
-						/>
-					</fieldset>
-				</InspectorControls>
-				{ !! posts.length && (
-					<h3
-						style={ {
-							backgroundColor: bgColor,
-							color: textColor,
-						} }
-					>
-						{ posts[ 0 ].title.rendered }
-					</h3>
-				) }
-			</div>
-		);
-	},
-} );
-```
-
-Because it is a dynamic block it doesn't need to override the default `save` implementation on the client. Instead, it needs a server component. The contents in the front of your site depend on the function called by the `render_callback` property of `register_block_type`.
-
-```php
-<?php
-
-function gutenberg_examples_dynamic_render_callback( $block_attributes, $content ) {
-	$recent_posts = wp_get_recent_posts( array(
-		'numberposts' => 1,
-		'post_status' => 'publish',
-	) );
-	if ( count( $recent_posts ) === 0 ) {
-		return 'No posts';
-	}
-	$post    = $recent_posts[ 0 ];
-	$post_id = $post['ID'];
-	$styles  = '';
-	if ( ! empty( $block_attributes['bgColor'] ) ) {
-		$styles .= "background-color:{$block_attributes['bgColor']};";
-	}
-	if ( ! empty( $block_attributes['textColor'] ) ) {
-		$styles .= "color:{$block_attributes['textColor']};";
-	}
-	$wrapper_attributes = get_block_wrapper_attributes();
-	return sprintf(
-		'<h3 %1$s href="%2$s" style="%3$s">%4$s<h3>',
-		$wrapper_attributes,
-		esc_url( get_permalink( $post_id ) ),
-		esc_attr( $styles ),
-		esc_html( get_the_title( $post_id ) )
-	);
-}
-
-function gutenberg_examples_dynamic() {
-	register_block_type(
-		'gutenberg-examples/example-dynamic',
-		array(
-			'api_version'       => 2,
-			'category'          => 'widgets',
-			'attributes'        => array(
-				'bgColor'   => array( 'type' => 'string' ),
-				'textColor' => array( 'type' => 'string' ),
-			),
-			'render_callback'   => 'gutenberg_examples_dynamic_render_callback',
-			'skip_inner_blocks' => true,
-		)
-	);
-}
-add_action( 'init', 'gutenberg_examples_dynamic' );
-
-```
-
-### With block supports
-
-Let's see how we can achieve the same functionality, but by using `block supports`.
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { useBlockProps } from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-dynamic-block-supports', {
-	apiVersion: 2,
-	title: 'Example: last post title(block supports)',
-	icon: 'megaphone',
-	category: 'widgets',
-	edit: function BlockEdit() {
-		const blockProps = useBlockProps();
-		const posts = useSelect( ( select ) => {
-			return select( 'core' ).getEntityRecords( 'postType', 'post', {
-				per_page: 1,
-			} );
-		}, [] );
-		if ( ! posts ) {
-			return null;
-		}
-		return (
-			<div { ...blockProps }>
-				{ !! posts.length && <h3>{ posts[ 0 ].title.rendered }</h3> }
-			</div>
-		);
-	},
-	supports: { color: true },
-} );
-```
-
-And the server side part becomes:
-
-```php
-<?php
-function gutenberg_examples_dynamic_block_supports_render_callback( $block_attributes, $content ) {
-	$recent_posts = wp_get_recent_posts( array(
-		'numberposts' => 1,
-		'post_status' => 'publish',
-	) );
-	if ( count( $recent_posts ) === 0 ) {
-		return 'No posts';
-	}
-	$post    = $recent_posts[ 0 ];
-	$post_id = $post['ID'];
-	$wrapper_attributes = get_block_wrapper_attributes();
-	return sprintf(
-		'<h3 %1$s href="%2$s">%3$s<h3>',
-		$wrapper_attributes,
-		esc_url( get_permalink( $post_id ) ),
-		esc_html( get_the_title( $post_id ) )
-	);
-}
-
-function gutenberg_examples_dynamic_block_supports() {
-	register_block_type(
-		'gutenberg-examples/example-dynamic-block-supports',
-		array(
-			'api_version'       => 2,
-			'category'          => 'widgets',
-			'supports'          => array( 'color' => true ),
-			'render_callback'   => 'gutenberg_examples_dynamic_block_supports_render_callback',
-			'skip_inner_blocks' => true,
-		)
-	);
-}
-add_action( 'init', 'gutenberg_examples_dynamic_block_supports' );
-
-```
-
-And that's it, the addition of the "supports" key above, will automatically make the following changes to the block:
-
--   Add a `style` attribute to the block to store the link, text and background colors.
--   Add a "Colors" panel to the sidebar of the block editor to allow users to tweak the text, link and background colors.
--   Automatically use the `theme.json` config: allow disabling colors, inherit palettes...
--   Automatically inject the right styles and apply them to the block wrapper when the user make changes to the colors.
-
-To learn more about the block supports and see all the available properties that you can enable for your own blocks, please refer to [the supports documentation](/docs/reference-guides/block-api/block-supports.md).
diff --git a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md b/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md
deleted file mode 100644
index ee478602fd1e9b..00000000000000
--- a/docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Block Supports
-
-A lot of blocks, including core blocks, offer similar customization options. Whether that is to change the background color, text color, or to add padding, margin customization options...
-
-To avoid duplicating the same logic over and over in your blocks and to align the behavior of your block with core blocks, you can make use of the different `supports` properties.
-
-Let's take the block we wrote in the previous chapter (example 3) and with just a single line of code, add support for text, link and background color customizations.
-
-Here's the exact same code we used to register the block previously.
-
-{% codetabs %}
-{% JSX %}
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { useBlockProps, RichText } from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
-	apiVersion: 2,
-	title: 'Example: Basic with block supports',
-	icon: 'universal-access-alt',
-	category: 'design',
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'p',
-		},
-	},
-	example: {
-		attributes: {
-			content: 'Hello World',
-		},
-	},
-	edit: ( props ) => {
-		const {
-			attributes: { content },
-			setAttributes,
-			className,
-		} = props;
-		const blockProps = useBlockProps();
-		const onChangeContent = ( newContent ) => {
-			setAttributes( { content: newContent } );
-		};
-		return (
-			<RichText
-				{ ...blockProps }
-				tagName="p"
-				onChange={ onChangeContent }
-				value={ content }
-			/>
-		);
-	},
-	save: ( props ) => {
-		const blockProps = useBlockProps.save();
-		return (
-			<RichText.Content
-				{ ...blockProps }
-				tagName="p"
-				value={ props.attributes.content }
-			/>
-		);
-	},
-} );
-```
-
-{% Plain %}
-
-```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
-	var RichText = blockEditor.RichText;
-	var useBlockProps = blockEditor.useBlockProps;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
-		apiVersion: 2,
-		title: 'Example: Basic with block supports',
-		icon: 'universal-access-alt',
-		category: 'design',
-
-		attributes: {
-			content: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-		},
-		example: {
-			attributes: {
-				content: 'Hello World',
-			},
-		},
-		edit: function ( props ) {
-			var blockProps = useBlockProps();
-			var content = props.attributes.content;
-			function onChangeContent( newContent ) {
-				props.setAttributes( { content: newContent } );
-			}
-
-			return el(
-				RichText,
-				Object.assign( blockProps, {
-					tagName: 'p',
-					onChange: onChangeContent,
-					value: content,
-				} )
-			);
-		},
-
-		save: function ( props ) {
-			var blockProps = useBlockProps.save();
-			return el(
-				RichText.Content,
-				Object.assign( blockProps, {
-					tagName: 'p',
-					value: props.attributes.content,
-				} )
-			);
-		},
-	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
-```
-
-{% end %}
-
-Now, let's alter the block.json file for that block, and add the supports key. (If you're not using a block.json file, you can also add the key to the `registerBlockType` function call)
-
-```json
-{
-	"apiVersion": 2,
-	"name": "gutenberg-examples/example-03-editable-esnext",
-	"title": "Example: Basic with block supports",
-	"icon": "universal-access-alt",
-	"category": "layout",
-	"editorScript": "file:./build/index.js",
-	"supports": {
-		"color": {
-			"text": true,
-			"background": true,
-			"link": true
-		}
-	}
-}
-```
-
-And that's it, the addition of the "supports" key above, will automatically make the following changes to the block:
-
- - Add a `style` attribute to the block to store the link, text and background colors.
- - Add a "Colors" panel to the sidebar of the block editor to allow users to tweak the text, link and background colors.
- - Automatically use the `theme.json` config: allow disabling colors, inherit palettes...
- - Automatically inject the right styles and apply them to the block wrapper when the user make changes to the colors.
-
-To learn more about the block supports and see all the available properties that you can enable for your own blocks, please refer to [the supports documentation](/docs/reference-guides/block-api/block-supports.md).
diff --git a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
index 9f5eff3883b6a7..89ef666abe494f 100644
--- a/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
+++ b/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md
@@ -17,8 +17,7 @@ Block attributes can be used for any content or setting you want to save for tha
 
 The following code example shows how to create a dynamic block that shows only the last post as a link.
 
-{% codetabs %}
-{% JSX %}
+
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
@@ -26,7 +25,7 @@ import { useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -52,47 +51,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 } );
 ```
 
-{% Plain %}
-
-```js
-( function ( blocks, element, data, blockEditor ) {
-	var el = element.createElement,
-		registerBlockType = blocks.registerBlockType,
-		useSelect = data.useSelect,
-		useBlockProps = blockEditor.useBlockProps;
-
-	registerBlockType( 'gutenberg-examples/example-dynamic', {
-		apiVersion: 2,
-		title: 'Example: last post',
-		icon: 'megaphone',
-		category: 'widgets',
-		edit: function () {
-			var content;
-			var blockProps = useBlockProps();
-			var posts = useSelect( function ( select ) {
-				return select( 'core' ).getEntityRecords( 'postType', 'post' );
-			}, [] );
-			if ( ! posts ) {
-				content = 'Loading...';
-			} else if ( posts.length === 0 ) {
-				content = 'No posts';
-			} else {
-				var post = posts[ 0 ];
-				content = el( 'a', { href: post.link }, post.title.rendered );
-			}
-
-			return el( 'div', blockProps, content );
-		},
-	} );
-} )(
-	window.wp.blocks,
-	window.wp.element,
-	window.wp.data,
-	window.wp.blockEditor
-);
-```
 
-{% end %}
 
 Because it is a dynamic block it doesn't need to override the default `save` implementation on the client. Instead, it needs a server component. The contents in the front of your site depend on the function called by the `render_callback` property of `register_block_type`.
 
@@ -132,7 +91,7 @@ function gutenberg_examples_dynamic() {
 	);
 
 	register_block_type( 'gutenberg-examples/example-dynamic', array(
-		'api_version' => 2,
+		'api_version' => 3,
 		'editor_script' => 'gutenberg-examples-dynamic',
 		'render_callback' => 'gutenberg_examples_dynamic_render_callback'
 	) );
@@ -156,8 +115,7 @@ Gutenberg 2.8 added the [`<ServerSideRender>`](/packages/server-side-render/READ
 
 _Server-side render is meant as a fallback; client-side rendering in JavaScript is always preferred (client rendering is faster and allows better editor manipulation)._
 
-{% codetabs %}
-{% JSX %}
+
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
@@ -165,7 +123,7 @@ import ServerSideRender from '@wordpress/server-side-render';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'gutenberg-examples/example-dynamic', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: 'Example: last post',
 	icon: 'megaphone',
 	category: 'widgets',
@@ -184,41 +142,6 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 } );
 ```
 
-{% Plain %}
-
-```js
-( function ( blocks, element, serverSideRender, blockEditor ) {
-	var el = element.createElement,
-		registerBlockType = blocks.registerBlockType,
-		ServerSideRender = serverSideRender,
-		useBlockProps = blockEditor.useBlockProps;
-
-	registerBlockType( 'gutenberg-examples/example-dynamic', {
-		apiVersion: 2,
-		title: 'Example: last post',
-		icon: 'megaphone',
-		category: 'widgets',
-
-		edit: function ( props ) {
-			var blockProps = useBlockProps();
-			return el(
-				'div',
-				blockProps,
-				el( ServerSideRender, {
-					block: 'gutenberg-examples/example-dynamic',
-					attributes: props.attributes,
-				} )
-			);
-		},
-	} );
-} )(
-	window.wp.blocks,
-	window.wp.element,
-	window.wp.serverSideRender,
-	window.wp.blockEditor
-);
-```
 
-{% end %}
 
-Note that this code uses the `wp-server-side-render` package but not `wp-data`. Make sure to update the dependencies in the PHP code. You can use wp-scripts to automatically build dependencies (see the [gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext) for PHP code setup).
+Note that this code uses the `wp-server-side-render` package but not `wp-data`. Make sure to update the dependencies in the PHP code. You can use wp-scripts to automatically build dependencies (see the [block-development-examples repo](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-esnext-a2ab62) for PHP code setup).
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..a59875ae43522b 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
@@ -12,9 +12,14 @@ By registering your own block variation with some specific Query Loop block sett
 
 With the block variations API you can provide the default settings that make the most sense for your use-case.
 
+In order to have a Query Loop variation properly working, we'll need to:
+- Register the block variation for the `core/query` block with some default values
+- Define a layout for the block variation
+- Use the `namespace` attribute in the `isActive` block variation property
+
 Let's go on a journey, for example, of setting up a variation for a plugin which registers a `book` [custom post type](https://developer.wordpress.org/plugins/post-types/).
 
-### Offer sensible defaults
+### 1. Offer sensible defaults
 
 Your first step would be to create a variation which will be set up in such a way to provide a block variation which will display by default a list of books instead of blog posts. The full variation code will look something like this:
 
@@ -91,7 +96,9 @@ In this way, your block will show up just like any other block while the user is
 
 At this point, your custom variation will be virtually indistinguishable from a stand-alone block. Completely branded to your plugin, easy to discover and directly available to the user as a drop in.
 
-### Customize your variation layout
+However, your query loop variation won't work just yet — we still need to define a layout so that it can render properly.
+
+### 2. Customize your variation layout
 
 Please note that the Query Loop block supports `'block'` as a string in the `scope` property. In theory, that's to allow the variation to be picked up after inserting the block itself. Read more about the Block Variation Picker [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md).
 
@@ -119,7 +126,13 @@ 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/).
 
-### Making Gutenberg recognize your variation
+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.
+
+### 3. 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.
 
@@ -172,7 +185,9 @@ As of Gutenberg version 14.2, the following controls are available:
 -   `sticky` - Shows a dropdown to select how to handle sticky posts.
 -   `taxQuery` - Shows available taxonomies filters for the currently selected post type.
 -   `author` - Shows an input field to filter the query by author.
--   `search` - Shows an input filed to filter the query by keywords.
+-   `search` - Shows an input field to filter the query by keywords.
+-   `format` - Shows an input field to filter the query by array/collection of [formats](https://developer.wordpress.org/advanced-administration/wordpress/post-formats/#supported-formats).
+-   `parents` - Shows an input field to filter the query using parent(s) entity.
 
 In our case, the property would look like this:
 
@@ -196,19 +211,19 @@ import { InspectorControls } from '@wordpress/block-editor';
 
 export const withBookQueryControls = ( BlockEdit ) => ( props ) => {
 	// We only want to add these controls if it is our variation,
-	// so here we can implement a custom logic to check for that, similiar
+	// so here we can implement a custom logic to check for that, similar
 	// to the `isActive` function described above.
 	// The following assumes that you wrote a custom `isMyBooksVariation`
 	// function to handle that.
 	return isMyBooksVariation( props ) ? (
 		<>
-			<BlockEdit { ...props } />
+			<BlockEdit key="edit" { ...props } />
 			<InspectorControls>
 				<BookAuthorSelector /> { /** Our custom component */ }
 			</InspectorControls>
 		</>
 	) : (
-		<BlockEdit { ...props } />
+		<BlockEdit key="edit" { ...props } />
 	);
 };
 
diff --git a/docs/how-to-guides/block-tutorial/generate-blocks-with-wp-cli.md b/docs/how-to-guides/block-tutorial/generate-blocks-with-wp-cli.md
deleted file mode 100644
index 891f8e7d4e1b80..00000000000000
--- a/docs/how-to-guides/block-tutorial/generate-blocks-with-wp-cli.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Generate Blocks with WP-CLI
-
-## WARNING
-
-**Deprecated:** It is no longer recommended to use WP-CLI or create-guten-block to generate block scaffolding.
-
-The official script to generate a block is the new [@wordpress/create-block](/packages/create-block/README.md) package. This package follows the new block directory guidelines, and creates the proper block, environment, and standards set by the project. See the new [Create a Block tutorial](/docs/getting-started/create-block/README.md) for a complete walk-through.
diff --git a/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md b/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md
deleted file mode 100644
index b0def1aff4d08e..00000000000000
--- a/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# Introducing Attributes and Editable Fields
-
-The example blocks so far are still not very interesting because they lack options to customize the appearance of the message. In this section, we will implement a RichText field allowing the user to specify their own message. Before doing so, it's important to understand how the state of a block (its "attributes") is maintained and changed over time.
-
-## Attributes
-
-Until now, the `edit` and `save` functions have returned a simple representation of a paragraph element. We also learned how these functions are responsible for _describing_ the structure of the block's appearance. If the user changes a block, this structure may need to change. To achieve this, the state of a block is maintained throughout the editing session as a plain JavaScript object, and when an update occurs, the `edit` function is invoked again. Put another way: **the output of a block is a function of its attributes**.
-
-One challenge of maintaining the representation of a block as a JavaScript object is that we must be able to extract this object again from the saved content of a post. This is achieved with the block type's `attributes` property:
-
-```js
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'p',
-		},
-	},
-```
-
-When registering a new block type, the `attributes` property describes the shape of the attributes object you'd like to receive in the `edit` and `save` functions. Each value is a [source function](/docs/reference-guides/block-api/block-attributes.md) to find the desired value from the markup of the block.
-
-In the code snippet above, when loading the editor, the `content` value will be extracted from the HTML of the paragraph element in the saved post's markup.
-
-## Components and the `RichText` Component
-
-Earlier examples used the `createElement` function to create DOM nodes, but it's also possible to encapsulate this behavior into "components". This abstraction helps you share common behaviors and hide complexity in self-contained units.
-
-There are a number of [components available](/docs/reference-guides/packages/packages-editor.md#components) to use in implementing your blocks. You can see one such component in the code below: the [`RichText` component](/docs/reference-guides/richtext.md) is part of the `wp-block-editor` package.
-
-The `RichText` component can be considered as a super-powered `textarea` element, enabling rich content editing including bold, italics, hyperlinks, etc.
-
-To use the `RichText` component, and using ES5 code, remember to add `wp-block-editor` to the dependency array of registered script handles when calling `wp_register_script`.
-
-```php
-// automatically load dependencies and version
-$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
-
-wp_register_script(
-	'gutenberg-examples-03-esnext',
-	plugins_url( 'build/index.js', __FILE__ ),
-	$asset_file['dependencies'],
-	$asset_file['version']
-);
-```
-
-Do not forget to also update the `editor_script` handle in `register_block_type` to `gutenberg-examples-03-esnext`.
-
-Implementing this behavior as a component enables you as the block implementer to be much more granular about editable fields. Your block may not need `RichText` at all, or it may need many independent `RichText` elements, each operating on a subset of the overall block state.
-
-Because `RichText` allows for nested nodes, you'll most often use it in conjunction with the `html` attribute source when extracting the value from saved content. You'll also use `RichText.Content` in the `save` function to output RichText values.
-
-Here is the complete block definition for Example 03.
-
-{% codetabs %}
-{% JSX %}
-
-```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { useBlockProps, RichText } from '@wordpress/block-editor';
-
-registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
-	apiVersion: 2,
-	title: 'Example: Editable (esnext)',
-	icon: 'universal-access-alt',
-	category: 'design',
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'p',
-		},
-	},
-	example: {
-		attributes: {
-			content: 'Hello World',
-		},
-	},
-	edit: ( props ) => {
-		const {
-			attributes: { content },
-			setAttributes,
-			className,
-		} = props;
-		const blockProps = useBlockProps();
-		const onChangeContent = ( newContent ) => {
-			setAttributes( { content: newContent } );
-		};
-		return (
-			<RichText
-				{ ...blockProps }
-				tagName="p"
-				onChange={ onChangeContent }
-				value={ content }
-			/>
-		);
-	},
-	save: ( props ) => {
-		const blockProps = useBlockProps.save();
-		return (
-			<RichText.Content
-				{ ...blockProps }
-				tagName="p"
-				value={ props.attributes.content }
-			/>
-		);
-	},
-} );
-```
-
-{% Plain %}
-
-```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
-	var RichText = blockEditor.RichText;
-	var useBlockProps = blockEditor.useBlockProps;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
-		apiVersion: 2,
-		title: 'Example: Editable',
-		icon: 'universal-access-alt',
-		category: 'design',
-
-		attributes: {
-			content: {
-				type: 'string',
-				source: 'html',
-				selector: 'p',
-			},
-		},
-		example: {
-			attributes: {
-				content: 'Hello World',
-			},
-		},
-		edit: function ( props ) {
-			var blockProps = useBlockProps();
-			var content = props.attributes.content;
-			function onChangeContent( newContent ) {
-				props.setAttributes( { content: newContent } );
-			}
-
-			return el(
-				RichText,
-				Object.assign( blockProps, {
-					tagName: 'p',
-					onChange: onChangeContent,
-					value: content,
-				} )
-			);
-		},
-
-		save: function ( props ) {
-			var blockProps = useBlockProps.save();
-			return el(
-				RichText.Content,
-				Object.assign( blockProps, {
-					tagName: 'p',
-					value: props.attributes.content,
-				} )
-			);
-		},
-	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
-```
-
-{% end %}
diff --git a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
index 92936bd0ad484f..b90b4668530797 100644
--- a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
+++ b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
@@ -6,8 +6,6 @@ Note: A single block can only contain one `InnerBlocks` component.
 
 Here is the basic InnerBlocks usage.
 
-{% codetabs %}
-{% JSX %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -38,45 +36,18 @@ registerBlockType( 'gutenberg-examples/example-06', {
 } );
 ```
 
-{% Plain %}
+## Allowed blocks
 
-```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
-	var InnerBlocks = blockEditor.InnerBlocks;
-	var useBlockProps = blockEditor.useBlockProps;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-06', {
-		title: 'Example: Inner Blocks',
-		category: 'design',
-
-		edit: function () {
-			var blockProps = useBlockProps();
-
-			return el( 'div', blockProps, el( InnerBlocks ) );
-		},
-
-		save: function () {
-			var blockProps = useBlockProps.save();
-
-			return el( 'div', blockProps, el( InnerBlocks.Content ) );
-		},
-	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
-```
-
-{% end %}
-
-## Allowed Blocks
-
-Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the blocks that can be included only to those listed, all other blocks will not show in the inserter.
+Using the `allowedBlocks` prop, you can further limit, in addition to the `allowedBlocks` field in `block.json`, which blocks can be inserted as direct descendants of this block. It is useful to determine the list of allowed blocks dynamically, individually for each block. For example, determined by a block attribute:
 
 ```js
-const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
+const { allowedBlocks } = attributes;
 //...
-<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;
+<InnerBlocks allowedBlocks={ allowedBlocks } />;
 ```
 
+If the list of allowed blocks is always the same, prefer the [`allowedBlocks` block setting](#defining-a-children-block-relationship) instead.
+
 ## Orientation
 
 By default, `InnerBlocks` expects its blocks to be shown in a vertical list. A valid use-case is to style inner blocks to appear horizontally, for instance by adding CSS flex or grid properties to the inner blocks wrapper. When blocks are styled in such a way, the `orientation` prop can be set to indicate that a horizontal layout is being used:
@@ -87,12 +58,20 @@ By default, `InnerBlocks` expects its blocks to be shown in a vertical list. A v
 
 Specifying this prop does not affect the layout of the inner blocks, but results in the block mover icons in the child blocks being displayed horizontally, and also ensures that drag and drop works correctly.
 
+## Default block
+
+By default `InnerBlocks` opens a list of permitted blocks via `allowedBlocks` when the block appender is clicked. You can modify the default block and its attributes that are inserted when the initial block appender is clicked by using the `defaultBlock` property. For example:
+
+```js
+<InnerBlocks defaultBlock={['core/paragraph', {placeholder: "Lorem ipsum..."}]} directInsert />
+```
+
+By default this behavior is disabled until the `directInsert` prop is set to `true`. This allows you to specify conditions for when the default block should or should not be inserted.
+
 ## Template
 
 Use the template property to define a set of blocks that prefill the InnerBlocks component when inserted. You can set attributes on the blocks to define their use. The example below shows a book review template using InnerBlocks component and setting placeholders values to show the block usage.
 
-{% codetabs %}
-{% JSX %}
 
 ```js
 const MY_TEMPLATE = [
@@ -113,33 +92,10 @@ const MY_TEMPLATE = [
 	},
 ```
 
-{% Plain %}
-
-```js
-const MY_TEMPLATE = [
-	[ 'core/image', {} ],
-	[ 'core/heading', { placeholder: 'Book Title' } ],
-	[ 'core/paragraph', { placeholder: 'Summary' } ],
-];
-
-//...
-
-	edit: function( props ) {
-		return el(
-			InnerBlocks,
-			{
-				template: MY_TEMPLATE,
-				templateLock: "all",
-			}
-		);
-	},
-```
-
-{% end %}
 
 Use the `templateLock` property to lock down the template. Using `all` locks the template completely so no changes can be made. Using `insert` prevents additional blocks from being inserted, but existing blocks can be reordered. See [templateLock documentation](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inner-blocks/README.md#templatelock) for additional information.
 
-### Post Template
+### Post template
 
 Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks.
 
@@ -155,13 +111,21 @@ add_action( 'init', function() {
 } );
 ```
 
-## Child InnerBlocks: Parent and Ancestors
+## Using parent, ancestor and children relationships in blocks
+
+A common pattern for using InnerBlocks is to create a custom block that will only be available if its parent block is inserted. This allows builders to establish a relationship between blocks, while limiting a nested block's discoverability. There are three relationships that builders can use: `parent`, `ancestor` and `allowedBlocks`. The differences are:
+
+- If you assign a `parent` then you’re stating that the nested block can only be used and inserted as a __direct descendant of the parent__.
+- If you assign an `ancestor` then you’re stating that the nested block can only be used and inserted as a __descendent of the parent__.
+- If you assign the `allowedBlocks` then you’re stating a relationship in the opposite direction, i.e., which blocks can be used and inserted as __direct descendants of this block__.
 
-A common pattern for using InnerBlocks is to create a custom block that will be included only in the InnerBlocks. 
+The key difference between `parent` and `ancestor` is `parent` has finer specificity, while an `ancestor` has greater flexibility in its nested hierarchy.
 
-An example of this is the Columns block, that creates a single parent block called `columns` and then creates an child block called `column`. The parent block is defined to only allow the child blocks. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column).
+### Defining parent block relationship
 
-When defining a child block, use the `parent` block setting to define which block is the parent. This prevents the block showing in the inserter outside of the InnerBlock it is defined for.
+An example of this is the Column block, which is assigned the `parent` block setting. This allows the Column block to only be available as a nested direct descendant in its parent Columns block. Otherwise, the Column block will not be available as an option within the block inserter. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column).
+
+When defining a direct descendent block, use the `parent` block setting to define which block is the parent. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
 
 ```json
 {
@@ -172,7 +136,13 @@ When defining a child block, use the `parent` block setting to define which bloc
 }
 ```
 
-Another example is using the `ancestors` block setting to define a block that must be present as an ancestor, but it doesn't need to be the direct parent (like with `parent`). This prevents the block from showing in the inserter if the ancestor is not in the tree, but other blocks can be added in between, like a Columns or Group block. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name).
+### Defining an ancestor block relationship
+
+An example of this is the Comment Author Name block, which is assigned the `ancestor` block setting. This allows the Comment Author Name block to only be available as a nested descendant in its ancestral Comment Template block. Otherwise, the Comment Author Name block will not be available as an option within the block inserter. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name).
+
+The `ancestor` relationship allows the Comment Author Name block to be anywhere in the hierarchical tree, and not _just_ a direct child of the parent Comment Template block, while still limiting its availability within the block inserter to only be visible an an option to insert if the Comment Template block is available.
+
+When defining a descendent block, use the `ancestor` block setting. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
 
 ```json
 {
@@ -182,3 +152,135 @@ Another example is using the `ancestors` block setting to define a block that mu
 	// ...
 }
 ```
+
+### Defining a children block relationship
+
+An example of this is the Navigation block, which is assigned the `allowedBlocks` block setting. This makes only a certain subset of block types to be available as direct descendants of the Navigation block. See [Navigation code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/navigation).
+
+The `allowedBlocks` setting can be extended by builders of custom blocks. The custom block can hook into the `blocks.registerBlockType` filter and add itself to the available children of the Navigation.
+
+When defining a set of possible descendant blocks, use the `allowedBlocks` block setting. This limits what blocks are showing in the inserter when inserting a new child block.
+
+```json
+{
+	"title": "Navigation",
+	"name": "core/navigation",
+	"allowedBlocks": [ "core/navigation-link", "core/search", "core/social-links", "core/page-list", "core/spacer" ],
+	// ...
+}
+```
+
+## Using a React hook
+
+You can use a react hook called `useInnerBlocksProps` instead of the `InnerBlocks` component. This hook allows you to take more control over the markup of inner blocks areas.
+
+The `useInnerBlocksProps` is exported from the `@wordpress/block-editor` package same as the `InnerBlocks` component itself and supports everything the component does. It also works like the `useBlockProps` hook.
+
+Here is the basic `useInnerBlocksProps` hook usage.
+
+
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const innerBlocksProps = useInnerBlocksProps();
+
+		return (
+			<div { ...blockProps }>
+				<div {...innerBlocksProps} />
+			</div>
+		);
+	},
+
+	save: () => {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save();
+
+		return (
+			<div { ...blockProps }>
+				<div {...innerBlocksProps} />
+			</div>
+		);
+	},
+} );
+```
+
+This hook can also pass objects returned from the `useBlockProps` hook to the `useInnerBlocksProps` hook. This reduces the number of elements we need to create.
+
+
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const innerBlocksProps = useInnerBlocksProps( blockProps );
+
+		return (
+			<div {...innerBlocksProps} />
+		);
+	},
+
+	save: () => {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+		return (
+			<div {...innerBlocksProps} />
+		);
+	},
+} );
+```
+
+
+The above code will render to the following markup in the editor:
+
+```html
+<div>
+	<!-- Inner Blocks get inserted here -->
+</div>
+```
+
+Another benefit to using the hook approach is using the returned value, which is just an object, and deconstruct to get the react children from the object. This property contains the actual child inner blocks thus we can place elements on the same level as our inner blocks.
+
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps );
+
+		return (
+			<div {...innerBlocksProps}>
+    			{ children }
+				<!-- Insert any arbitrary html here at the same level as the children -->
+			</div>
+		);
+	},
+
+	// ...
+} );
+```
+
+
+```html
+<div>
+	<!-- Inner Blocks get inserted here -->
+	<!-- The custom html gets rendered on the same level -->
+</div>
+```
diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
deleted file mode 100644
index a65a9473d5e1d3..00000000000000
--- a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
+++ /dev/null
@@ -1,203 +0,0 @@
-# Create a basic block
-
-This guide takes you through creating a basic block to display a message in a post. This message will be fixed, we won't allow the user to edit the message, the goal of the guide is to show how to register and load a block.
-
-## Overview
-
-There are two main types of blocks: static and dynamic, this guide focuses on static blocks. A static block is used to insert HTML content into the post and save it with the post. A dynamic block builds the content on the fly when rendered on the front end, see the [dynamic blocks guide](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md).
-
-This guide focuses on just the block, see the [Create a Block tutorial](/docs/getting-started/create-block/README.md) for a complete setup.
-
-## Before you start
-
-Static blocks are implemented in JavaScript, so a basic level of JavaScript is helpful, see the [Getting Started with JavaScript](/docs/how-to-guides/javascript/README.md) for a refresher.
-
-Blocks are added to WordPress using plugins, so you will need:
-
--   WordPress development environment, see [setup guide](/docs/getting-started/devenv/README.md)
--   JavaScript build tools (node/npm) if using JSX example
-
-## Step-by-step guide
-
-### Step 1: Configure block.json
-
-The functions of a static block are defined in JavaScript, however the settings and other metadata should be defined in a block.json file.
-
-Here are the basic settings:
-
--   `apiVersion`: Block API version
--   `title`: Block title shown in inserter
--   `name`: Unique name defines your block
--   `category`: Category in inserter (text, media, design, widgets, theme, embed)
--   `icon`: Dashicon icon displayed for block
--   `editorScript`: JavaScript file to load for block
-
-The `block.json` file should be added to your plugin. To start a new plugin, create a directory in `/wp-content/plugins/` in your WordPress.
-
-Create a basic `block.json` file there:
-
-{% codetabs %}
-{% JSX %}
-
-```json
-{
-	"apiVersion": 2,
-	"title": "Example: Basic (ESNext)",
-	"name": "gutenberg-examples/example-01-basic-esnext",
-	"category": "layout",
-	"icon": "universal-access-alt",
-	"editorScript": "file:./build/index.js"
-}
-```
-
-{% Plain %}
-
-```json
-{
-	"apiVersion": 2,
-	"title": "Example: Basic",
-	"name": "gutenberg-examples/example-01-basic",
-	"category": "layout",
-	"icon": "universal-access-alt",
-	"editorScript": "file:./block.js"
-}
-```
-
-{% end %}
-
-### Step 2: Register block in plugin
-
-With the `block.json` in place, the registration for the block is a single function call in PHP, this will setup the block and JavaScript file specified in the `editorScript` property to load in the editor.
-
-Create a full plugin file, `index.php` like the following, the same PHP code works for both JSX and Plain code.
-
-```php
-<?php
-/**
- * Plugin Name: Gutenberg examples 01
- */
-function gutenberg_examples_01_register_block() {
-	register_block_type( __DIR__ );
-}
-add_action( 'init', 'gutenberg_examples_01_register_block' );
-```
-
-### Step 3: Block edit and save functions
-
-The `editorScript` entry is enqueued automatically in the block editor. This file contains the JavaScript portion of the block registration and defines two important functions for the block, the `edit` and `save` functions.
-
-The `edit` function is a component that is shown in the editor when the block is inserted.
-
-The `save` function is a component that defines the final markup returned by the block and saved in `post_content`.
-
-{% codetabs %}
-{% JSX %}
-
-Add the following in `src/index.js`
-
-```jsx
-/**
- * WordPress dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-
-// Register the block
-registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
-	edit: function () {
-		return <p> Hello world (from the editor)</p>;
-	},
-	save: function () {
-		return <p> Hola mundo (from the frontend) </p>;
-	},
-} );
-```
-
-{% Plain %}
-
-Add the following to `block.js`
-
-```js
-( function ( blocks, element ) {
-	var el = element.createElement;
-
-	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
-		edit: function () {
-			return el( 'p', {}, 'Hello World (from the editor).' );
-		},
-		save: function () {
-			return el( 'p', {}, 'Hola mundo (from the frontend).' );
-		},
-	} );
-} )( window.wp.blocks, window.wp.element );
-```
-
-{% end %}
-
-### Step 4: Build or add dependency
-
-In order to register the block, an asset php file is required in the same directory as the directory used in `register_block_type()` and must begin with the script's filename.
-
-{% codetabs %}
-{% JSX %}
-
-Build the scripts and asset file which is used to keep track of dependencies and the build version.
-```bash
-npm run build
-```
-
-{% Plain %}
-
-Create the asset file to load the dependencies for the scripts. The name of this file should be the name of the js file then .asset.php. For this example, create `block.asset.php` with the following:
-
-```php
-<?php return
-	array( 'dependencies' =>
-		array(
-			'wp-blocks',
-			'wp-element',
-			'wp-polyfill'
-		),
-		'version' => '0.1'
-	);
-```
-
-{% end %}
-
-### Step 5: Confirm
-
-Open your editor and try adding your new block. It will show in the inserter using the `title`.
-When inserted you will see the `Hello World (from the editor)` message.
-
-When you save the post and view it published, you will see the `Hola mundo (from the frontend)` message.
-
-**Troubleshooting** - If you run into any issues, here are a few things to try:
-
--   Check the filenames are correct and loading properly,
--   Check the developer console in your browser for errors,
--   If using JSX remember to build after each change
-
-## Conclusion
-
-This shows the most basic static block. The [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository has complete examples for both.
-
--   [Basic Example with JSX build](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext)
-
--   [Basic Example Plain JavaScript](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/01-basic),
-
-**NOTE:** The examples include a more complete block setup with translation features included, it is recommended to follow those examples for a production block. The internationalization features were left out of this guide for simplicity and focusing on the very basics of a block.
-
-### Additional
-
-A couple of things to note when creating your blocks:
-
--   A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name. In this example, the namespace is `gutenberg-examples`.
-
--   Block names _must_ include only lowercase alphanumeric characters or dashes and start with a letter. Example: `my-plugin/my-custom-block`.
-
-### Resources
-
--   block.json [metadata reference](/docs/reference-guides/block-api/block-metadata.md) documentation
-
--   Block [edit and save function reference](/docs/reference-guides/block-api/block-edit-save.md)
-
--   [Dashicons icon set](https://developer.wordpress.org/resource/dashicons/)
diff --git a/docs/how-to-guides/curating-the-editor-experience.md b/docs/how-to-guides/curating-the-editor-experience.md
deleted file mode 100644
index 584e6dc18b8a04..00000000000000
--- a/docs/how-to-guides/curating-the-editor-experience.md
+++ /dev/null
@@ -1,332 +0,0 @@
-# Curating the Editor Experience
-
-The purpose of this guide is to offer various ways one can lock down and curate the experience of using WordPress, especially with the introduction of more design tools and full site editing functionality. 
-
-For information around adding functionality to a theme, rather than curating and locking, please review this guide on [Converting a classic theme to a block theme](https://developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/).
-
-## Locking APIs
-
-**Lock the ability to move or remove specific blocks**
-
-Users have the ability to lock and unlock blocks via the editor. The locking UI has options for preventing blocks from being moved within the content canvas or removed:
-
-![Image of locking interface](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/Locking%20interface.png?raw=true)
-
-Keep in mind that each block you want to lock will need to be individually locked as desired. There is not a way to mass lock blocks currently. 
-
-**Apply block locking to patterns or templates**
-
-When building patterns or templates, theme authors can use these same UI tools to set the default locked state of blocks. For example, a theme author could lock various pieces of a header. Keep in mind that by default, users with editing access can unlock these blocks. [Here’s an example of a pattern](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805) with various blocks locked in different ways and here’s more context on [creating a template with locked blocks](https://make.wordpress.org/core/2022/02/09/core-editor-improvement-curated-experiences-with-locking-apis-theme-json/). You can build these patterns in the editor itself, including adding locking options, before following the [documentation to register them](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/).
-
-**Apply content only editing in patterns or templates**
-
-This functionality was introduced in WordPress 6.1. In contrast to block locking, which disables the ability to move or remove blocks, content only editing is both designed for use at the pattern or template level and hides all design tools, while still allowing for the ability to edit the content of the blocks. This provides a great way to simplify the interface for users and preserve a design. When this option is added, the following changes occur:  
-
-- Non-content child blocks (containers, spacers, columns, etc) are hidden from list view, un-clickable on the canvas, and entirely un-editable.
-- The Inspector will display a list of all child 'content' blocks. Clicking a block in this list reveals its settings panel. 
-- The main List View only shows content blocks, all at the same level regardless of actual nesting.
-- Children blocks within the overall content locked container are automatically move / remove locked.
-- Additional child blocks cannot be inserted, further preserving the design and layout.
-- There is a link in the block toolbar to ‘Modify’ that a user can toggle on/off to have access to the broader design tools. Currently, it's not possibly to programmatically remove this option.
-
-This option can be applied to Columns, Cover, and Group blocks as well as third-party blocks that have the templateLock attribute in its block.json. To adopt this functionality, you need to use `"templateLock":"contentOnly"`. [Here's an example of a pattern](https://gist.github.com/annezazu/d62acd2514cea558be6cea97fe28ff3c) with this functionality in place. For more information, please [review the relevant documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#locking). 
-
-Note: There is no UI in place to manage content locking and it must be managed at the code level. 
-
-**Change permissions to control locking ability**
-
-Agencies and plugin authors can offer an even more curated experience by limiting which users have [permission to lock and unlock blocks](https://make.wordpress.org/core/2022/05/05/block-locking-settings-in-wordpress-6-0/). By default, anyone who is an administrator will have access to lock and unlock blocks. 
-
-Developers can add a filter to the [block_editor_settings_all](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) hook to configure permissions around locking blocks.  The hook passes two parameters to the callback function:
-
-- `$settings` - An array of configurable settings for the editor.
-
-- `$context` - An instance of WP_Block_Editor_Context, an object that contains information about the current editor.
-
-Specifically, developers can alter the `$settings['canLockBlocks']` value by setting it to `true` or `false`, typically by running through one or more conditional checks. 
-
-The following example disables block locking permissions for all users when editing a page:
-
-```
-add_filter( 'block_editor_settings_all', function( $settings, $context ) {
-	if ( $context->post && 'page' === $context->post->post_type ) {
-		$settings['canLockBlocks'] = false;
-	}
-
-	return $settings;
-}, 10, 2 );
-```
-
-Another common use case may be to only allow users who can edit the visual design of the site (theme editing) to lock or unlock blocks.  The best option would be to test against the `edit_theme_options` capability, as shown in the following code snippet:
-
-```
-add_filter( 'block_editor_settings_all', function( $settings ) {
-	$settings['canLockBlocks'] = current_user_can( 'edit_theme_options' );
-
-	return $settings;
-} );
-```
-
-Developers may use any type of conditional check to determine who can lock/unlock blocks. This is merely a small sampling of what is possible via the filter hook.
-
-
-## Providing default controls/options
-
-**Define default options**
-
-Since theme.json acts as a configuration tool, there are numerous ways to define at a granular level what options are available. This section will use duotone as an example since it showcases a feature that cuts across a few blocks and allows for varying levels of access.   
-
-*Duotone with Core options and customization available for each image related block:*
-
-```
-{
-"version": 2,
-	"settings": {
-		"color": {
-			"customDuotone": true,
-			"duotone": [
-			]
-		}
-	}
-}
-```
-
-*Duotone with theme defined color options, Core options, and customization available for each image related block:*
-```
-{
-	"version": 2,
-	"settings": {
-		"color": {
-			"duotone": [
-				{
-					"colors": [ "#000000", "#ffffff" ],
-					"slug": "foreground-and-background",
-					"name": "Foreground and background"
-				},
-				{
-					"colors": [ "#000000", "#ff0200" ],
-					"slug": "foreground-and-secondary",
-					"name": "Foreground and secondary"
-				},
-				{
-					"colors": [ "#000000", "#7f5dee" ],
-					"slug": "foreground-and-tertiary",
-					"name": "Foreground and tertiary"
-				},
-			]
-		}
-	}
-}
-```
-
-*Duotone with defined default options and all customization available for the Post Featured Image block:*
-
-```
-{
-	"schema": "https://schemas.wp.org/trunk/theme.json",
-	"version": 2,
-	"settings": {
-	      "color": {
-              	"custom": true,
-              	"customDuotone": true
-        	},
-		"blocks": {
-              	"core/post-featured-image": {
-                   		"color": {
-                          		"duotone": [
-						{
-                   		 			"colors": [ "#282828", "#ff5837" ],
-                   		 			"slug": "black-and-orange",
-                   		 			"name": "Black and Orange"
-               				},
-						{
-                   		 			"colors": [ "#282828", "#0288d1" ],
-                   		 			"slug": "black-and-blue", 
-                   		 			"name": "Black and Blue"
-               				}
-					],
-                          		"customDuotone": true,
-                          		"custom": true
-				}
-			}
-} 
-}
-}
-```
-
-*Duotone with only defined default options and core options available for the Post Featured Image block (no customization):*
-
-```
-{
-	"schema": "https://schemas.wp.org/trunk/theme.json",
-	"version": 2,
-	"settings": {
-	      "color": {
-              	"custom": true,
-              	"customDuotone": true
-},	
-		"blocks": {
-              	"core/post-featured-image": {
-                   		"color": {
-                          		"duotone": [
-						{
-                   		 			"colors": [ "#282828", "#ff5837" ],
-                   		 			"slug": "black-and-orange",
-                   		 			"name": "Black and Orange"
-               				},
-						{
-                   		 			"colors": [ "#282828", "#0288d1" ],
-                   		 			"slug": "black-and-blue",
-                   		 			"name": "Black and Blue"
-               				}
-					],
-                          		"customDuotone": false,
-                          		"custom": false
-				}
-			}
-} 
-}
-}
-```
-
-## Limiting interface options with theme.json
-
-**Limit options on a per block basis**
-
-Beyond defining default values, using theme.json allows you to also remove options entirely and instead rely on what the theme has set in place. Below is a visual showing two extremes with the same paragraph block: 
-
-![Image of restricted interface](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/Locking%20comparison%20visual.png?raw=true)
-
-Continuing the examples with duotone, this means you could allow full access to all Duotone functionality for Image blocks and only limit the Post Featured Image block like so:
-
-```
-{
-	"schema": "https://schemas.wp.org/trunk/theme.json",
-	"version": 2,
-	"settings": {
-	      "color": {
-            		"custom": true,
-      			"customDuotone": true
-        	},
-		"blocks": {
-           	"core/image": {
-           		"color": {
-                      	"duotone": [],
-                      	"customDuotone": true,
-                 		"custom": true
-				}
-			},
-			"core/post-featured-image": {
-                 	"color": {
-                      	"duotone": [],
-                      	"customDuotone": false,
-                      	"custom": false
-				}
-			}
-} 
-}
-}
-```
-
-You can read more about how best to [turn on/off options with theme.json here](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/). 
-
-**Disable inherit default layout**
-
-To disable the “Inherit default layout” setting for container blocks like the Group block, remove the following section: 
-
-```
-"layout": {
-	"contentSize": null,
-	"wideSize": null
-},
-```
-
-**Limit options globally**
-
-When using theme.json in a block or classic theme, these settings will stop the default color and typography controls from being enabled globally, greatly limiting what’s possible:
-
-```
-{
-	"$schema": "http://schemas.wp.org/trunk/theme.json",
-	"version": 2,
-	"settings": {
-		"layout": {
-			"contentSize": "750px"
-		},
-		"color": {
-			"background": false,
-			"custom": false,
-			"customDuotone": false,
-			"customGradient": false,
-			"defaultGradients": false,
-			"defaultPalette": false,
-			"text": false
-		},
-		"typography": {
-			"customFontSize": false,
-			"dropCap": false,
-			"fontStyle": false,
-			"fontWeight": false,
-			"letterSpacing": false,
-			"lineHeight": false,
-			"textDecoration": false,
-			"textTransform": false
-		}
-	}
-}
-```
-
-To enable something from the above, just set whatever value you want to change to `true` for more granularity.
-
-## Remove access to functionality
-
-**Remove access to the template editor**
-
-Whether you’re using [theme.json in a Classic Theme](https://developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/#adding-theme-json-in-classic-themes) or Block Theme, you can add the following to your functions.php file to remove access to the Template Editor that is available when editing posts or pages:
-
-`remove_theme_support( 'block-templates');`
-
-This prevents both the ability to both create new block templates or edit them from within the Post Editor. 
-
-**Create an allow or disallow list to limit block options**
-
-There might be times when you don’t want access to a block at all to be available for users. To control what’s available in the inserter, you can take two approaches: [an allow list](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#using-an-allow-list) that disables all blocks except those on the list or a [deny list that unregisters specific blocks](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#using-a-deny-list). 
-
-**Disable pattern directory**
-
-To fully remove patterns bundled with WordPress core from being accessed in the Inserter, the following can be added to your functions.php file: 
-
-`remove_theme_support( 'core-block-patterns' );`
-
-## Utilizing patterns
-
-**Prioritize post content patterns for new pages**
-
-When a user creates a page, they are met with an empty page. However, that experience can be improved thanks to the option to have patterns from a specific type prioritized upon page creation in a modal. The modal appears each time the user creates a new page when there are patterns on their website that declare support for the core/post-content block types. By default, WordPress 6.0  does not include any of these patterns, so the modal will not appear without some of these post content patterns being added.
-
-Read more about this functionality in the [Page creation patterns in WordPress 6.0 dev note](https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/).
-
-**Lock patterns**
-
-As mentioned in the prior section on Locking APIs, aspects of patterns themselves can be locked so that the important aspects of the design can be preserved. [Here’s an example of a pattern](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805) with various blocks locked in different ways. You can build these patterns in the editor itself, including adding locking options, before [following the documentation to register them](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/). 
-
-**Prioritize specific patterns from the Pattern Directory**
-
-With WordPress 6.0 themes can register patterns from [Pattern Directory](https://wordpress.org/patterns/) through theme.json. To accomplish this, themes should use the new patterns top level key in theme.json. Within this field, themes can list patterns to register from the Pattern Directory. The patterns field is an array of pattern slugs from the Pattern Directory. Pattern slugs can be extracted by the url in a single pattern view at the Pattern Directory. Example: This url https://wordpress.org/patterns/pattern/partner-logos the slug is partner-logos.
-```
-{
-    "version": 2,
-    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
-}
-```
-
-Note that this field requires using [version 2 of theme.json](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/). The content creator will then find the respective Pattern in the inserter “Patterns” tab in the categories that match the categories from the Pattern Directory.
-
-## Combining approaches
-
-Keep in mind that the above approaches can be combined as you see fit. For example, you can provide custom patterns to use when creating a new page while also limiting the amount of customization that can be done to aspects of them, like only allowing certain preset colors to be used for the background of a Cover block or locking down what blocks can be deleted. When considering the approaches to take, think about the specific ways you might want to both open up the experience and curate it. 
-
-## Additional Resources
-
-- [Builder Basics – Working with Templates in Full Site Editing (Part 3)](https://wordpress.tv/2022/05/24/nick-diego-builder-basics-working-with-templates-in-full-site-editing-part-3/)
-- [Core Editor Improvement: Curated experiences with locking APIs & theme.json](https://make.wordpress.org/core/2022/02/09/core-editor-improvement-curated-experiences-with-locking-apis-theme-json/)
diff --git a/docs/how-to-guides/curating-the-editor-experience/README.md b/docs/how-to-guides/curating-the-editor-experience/README.md
new file mode 100644
index 00000000000000..3b348d67dee26d
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/README.md
@@ -0,0 +1,25 @@
+# Curating the Editor Experience
+
+Curating the editing experience in WordPress is important because it allows you to streamline the editing process, ensuring consistency and alignment with the site's style and branding guidelines. It also makes it easier for users to create and manage content effectively without accidental modifications or layout changes. This leads to a more efficient and personalized experience.
+
+The purpose of this guide is to offer various ways you can lock down and curate the experience of using WordPress, especially with the introduction of more design tools and the Site Editor. 
+
+In this section, you will learn:
+
+1. [**Block locking**](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/block-locking): how to restrict user interactions with specific blocks in the Editor for better content control
+1. [**Patterns**](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/patterns): about creating and implementing predefined block layouts to ensure design and content uniformity
+1. [**theme.json**](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/theme-json): to configure global styles and settings for your theme using the theme.json file
+1. [**Filters and hooks**](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/filters-and-hooks): about the essential filters and hooks used to modify the Editor
+1. [**Disabling Editor functionality**](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/disable-editor-functionality): about additional ways to selectively disable features or components in the Editor to streamline the user experience
+
+## Combining approaches
+
+Remember that the approaches provided in the documentation above can be combined as you see fit. For example, you can provide custom patterns to use when creating a new page while also limiting the amount of customization that can be done to aspects of them, like only allowing specific preset colors to be used for the background of a Cover block or locking down what blocks can be deleted. 
+
+When considering the approaches to take, think about the specific ways you might want to both open up the experience and curate it. 
+
+## Additional resources
+
+- [Builder Basics – Working with Templates in Full Site Editing (Part 3)](https://wordpress.tv/2022/05/24/nick-diego-builder-basics-working-with-templates-in-full-site-editing-part-3/)
+- [Core Editor Improvement: Curated experiences with locking APIs & theme.json](https://make.wordpress.org/core/2022/02/09/core-editor-improvement-curated-experiences-with-locking-apis-theme-json/)
+- [Learn WordPress session on Curating the Editor Experience](https://wordpress.tv/2022/07/22/nick-diego-curating-the-editor-experience/)
diff --git a/docs/how-to-guides/curating-the-editor-experience/block-locking.md b/docs/how-to-guides/curating-the-editor-experience/block-locking.md
new file mode 100644
index 00000000000000..83f26ea87a479e
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/block-locking.md
@@ -0,0 +1,69 @@
+# Block Locking API
+
+The Block Locking API allows you to restrict actions on specific blocks within the Editor. This API can be used to prevent users from moving, removing, or editing certain blocks, ensuring layout consistency and content integrity.
+
+## Lock the ability to move or remove specific blocks
+
+Users can lock and unlock blocks via the Editor. The locking UI has options for preventing blocks from being moved within the content canvas or removed:
+
+![Image of locking interface](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/Locking%20interface.png?raw=true)
+
+Keep in mind that you can apply locking options to blocks nested inside of a containing block by turning on the "Apply to all blocks inside" option. However, you cannot mass lock blocks otherwise.
+
+## Lock the ability to edit certain blocks
+
+Alongside the ability to lock moving or removing blocks, the [Navigation Block](https://github.com/WordPress/gutenberg/pull/44739) and [Reusable block](https://github.com/WordPress/gutenberg/pull/39950) have an additional capability: lock the ability to edit the contents of the block. This locks the ability to make changes to any blocks inside of either block type. 
+
+## Apply block locking to patterns or templates
+
+When building patterns or templates, theme authors can use these same UI tools to set the default locked state of blocks. For example, a theme author could lock various pieces of a header. Keep in mind that by default, users with editing access can unlock these blocks. [Here’s an example of a pattern](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805) with various blocks locked in different ways and here’s more context on [creating a template with locked blocks](https://make.wordpress.org/core/2022/02/09/core-editor-improvement-curated-experiences-with-locking-apis-theme-json/). You can build these patterns in the Editor itself, including adding locking options, before following the [documentation to register them](/docs/reference-guides/block-api/block-patterns.md).
+
+## Apply content-only editing in patterns or templates
+
+This functionality was introduced in WordPress 6.1. In contrast to block locking, which disables the ability to move or remove blocks, content-only editing is both designed for use at the pattern or template level and hides all design tools, while still allowing for the ability to edit the content of the blocks. This provides a great way to simplify the interface for users and preserve a design. When this option is added, the following changes occur:  
+
+- Non-content child blocks (containers, spacers, columns, etc) are hidden from list view, un-clickable on the canvas, and entirely un-editable.
+- The Inspector will display a list of all child 'content' blocks. Clicking a block in this list reveals its settings panel. 
+- The main List View only shows content blocks, all at the same level regardless of actual nesting.
+- Children blocks within the overall content locked container are automatically move / remove locked.
+- Additional child blocks cannot be inserted, further preserving the design and layout.
+- There is a link in the block toolbar to ‘Modify’ that a user can toggle on/off to have access to the broader design tools. Currently, it's not possibly to programmatically remove this option.
+
+This option can be applied to Columns, Cover, and Group blocks as well as third-party blocks that have the templateLock attribute in its block.json. To adopt this functionality, you need to use `"templateLock":"contentOnly"`. [Here's an example of a pattern](https://gist.github.com/annezazu/d62acd2514cea558be6cea97fe28ff3c) with this functionality in place. For more information, please [review the relevant documentation](/docs/reference-guides/block-api/block-templates.md#locking). 
+
+Note: There is no UI in place to manage content locking and it must be managed at the code level. 
+
+## Change permissions to control locking ability
+
+Agencies and plugin authors can offer an even more curated experience by limiting which users have [permission to lock and unlock blocks](https://make.wordpress.org/core/2022/05/05/block-locking-settings-in-wordpress-6-0/). By default, anyone who is an administrator will have access to lock and unlock blocks. 
+
+Developers can add a filter to the [block_editor_settings_all](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) hook to configure permissions around locking blocks.  The hook passes two parameters to the callback function:
+
+- `$settings` - An array of configurable settings for the Editor.
+- `$context` - An instance of WP_Block_Editor_Context, an object that contains information about the current Editor.
+
+Specifically, developers can alter the `$settings['canLockBlocks']` value by setting it to `true` or `false`, typically by running through one or more conditional checks. 
+
+The following example disables block locking permissions for all users when editing a page:
+
+```php
+add_filter( 'block_editor_settings_all', function( $settings, $context ) {
+	if ( $context->post && 'page' === $context->post->post_type ) {
+		$settings['canLockBlocks'] = false;
+	}
+
+	return $settings;
+}, 10, 2 );
+```
+
+Another common use case may be to only allow users who can edit the visual design of the site (theme editing) to lock or unlock blocks. Now, the best option would be to test against the `edit_theme_options` capability, as shown in the following code snippet:
+
+```php
+add_filter( 'block_editor_settings_all', function( $settings ) {
+	$settings['canLockBlocks'] = current_user_can( 'edit_theme_options' );
+
+	return $settings;
+} );
+```
+
+Developers may use any type of conditional check to determine who can lock/unlock blocks. This is merely a small sampling of what is possible via the filter hook.
\ No newline at end of file
diff --git a/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md
new file mode 100644
index 00000000000000..a20d2cf9d8b8a7
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md
@@ -0,0 +1,138 @@
+# Disable Editor functionality
+
+This page is dedicated to the many ways you can disable specific functionality in the Post Editor and Site Editor that are not covered in other areas of the curation documentation.
+
+## Restrict block options
+
+There might be times when you don’t want access to a block at all to be available for users. To control what’s available in the inserter, you can take two approaches: [an allow list](/docs/reference-guides/filters/block-filters.md#using-an-allow-list) that disables all blocks except those on the list or a [deny list that unregisters specific blocks](/docs/reference-guides/filters/block-filters.md#using-a-deny-list).
+
+## Curate heading levels
+
+Core WordPress blocks with a heading level dropdown include support for the `levelOptions` attribute. This applies to the Heading, Site Title, Site Tagline, Query Title, Post Title, and Comments Title blocks. The `levelOptions` attribute accepts an array of numbers corresponding to heading levels, where `1` represents H1, `2` represents H2, and so on.
+
+This attribute allows you to specify which heading levels should appear in the dropdown UI, providing a lightweight curation method that does not require block deprecations. Any existing heading levels are preserved in the markup, while `levelOptions` only affects the UI display.
+
+You can apply this attribute directly in the block markup, a technique that will be commonly used in block templates, template parts, and patterns. For example, the following markup disables H1, H2, and H6 in the Heading block by setting `"levelOptions":[3,4,5]`.
+
+```html
+<!-- wp:heading {"level":3,"levelOptions":[3,4,5],"className":"wp-block-heading"} -->
+<h3 class="wp-block-heading">Markup example</h3>
+<!-- /wp:heading -->
+```
+
+You can also use [block filters](/docs/reference-guides/filters/block-filters.md) to set the default value of this attribute globally or for specific blocks. The example below disables H1, H2, and H6 for all Heading blocks. You can further customize this by restricting certain heading levels based on conditions like user capabilities.
+
+```php
+function example_modify_heading_levels_globally( $args, $block_type ) {
+	
+	if ( 'core/heading' !== $block_type ) {
+		return $args;
+	}
+
+	// Remove H1, H2, and H6.
+	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
+	
+	return $args;
+}
+add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );
+```
+
+## Disable the Pattern Directory
+
+To fully remove patterns bundled with WordPress core from being accessed in the Inserter, the following can be added to your `functions.php` file:
+
+```php
+function example_theme_support() {
+	remove_theme_support( 'core-block-patterns' );
+}
+add_action( 'after_setup_theme', 'example_theme_support' );
+```
+
+## Disable block variations
+
+Some Core blocks are actually [block variations](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/). A great example is the Row and Stack blocks, which are actually variations of the Group block. If you want to disable these "blocks", you actually need to disable the respective variations.
+
+Block variations are registered using JavaScript and need to be disabled with JavaScript. The code below will disable the Row variation.
+
+```js
+wp.domReady( () => {
+	wp.blocks.unregisterBlockVariation( 'core/group', 'group-row' );
+});
+```
+
+Assuming the code was placed in a `disable-variations.js` file located in the root of your theme folder, you can enqueue this file in the theme's `functions.php` using the code below.
+
+```php
+function example_disable_variations_script() {
+	wp_enqueue_script(
+		'example-disable-variations-script',
+		get_template_directory_uri() . '/disable-variations.js',
+       	array( 'wp-dom-ready' ),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+}
+add_action( 'enqueue_block_editor_assets', 'example_disable_variations_script' );
+```
+
+## Disable block styles
+
+There are a few Core blocks that include their own [block styles](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/). An example is the Image block, which includes a block style for rounded images called "Rounded". You many not want your users to round images, or you might prefer to use the border-radius control instead of the block style. Either way, it's easy to disable any unwanted block styles.
+
+Unlike block variations, you can register styles in either JavaScript or PHP. If a style was registered in JavaScript, it must be disabled with JavaScript. If registered using PHP, the style can be disabled with either. All Core block styles are registered in JavaScript.
+
+So, you would use the following code to disable the "Rounded" block style for the Image block.
+
+```js
+wp.domReady( () => {
+	wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' );
+});
+```
+
+This JavaScript should be enqueued much like the block variation example above. Refer to the [block styles](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/) documentation for how to register and unregister styles using PHP.
+
+## Disable access to the Template Editor
+
+Whether you’re using theme.json in a Classic or Block theme, you can add the following to your `functions.php` file to remove access to the Template Editor that is available when editing posts or pages:
+
+```php
+function example_theme_support() {
+	remove_theme_support( 'block-templates');
+}
+add_action( 'after_setup_theme', 'example_theme_support' );
+```
+
+This prevents both the ability to create new block templates or edit them from within the Post Editor.
+
+## Disable access to the Code Editor
+
+The Code Editor allows you to view the underlying block markup for a page or post. While this view is handy for experienced users, you can inadvertently break block markup by editing content. Add the following to your `functions.php` file to restrict access.
+
+```php
+function example_restrict_code_editor_access( $settings, $context ) {
+    $settings[ 'codeEditingEnabled' ] = false;
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'example_restrict_code_editor_access', 10, 2 );
+```
+
+This code prevents all users from accessing the Code Editor. You could also add [capability](https://wordpress.org/documentation/article/roles-and-capabilities/) checks to disable access for specific users.
+
+## Disable formatting options for RichText blocks
+
+Blocks that support [RichText](https://developer.wordpress.org/block-editor/reference-guides/richtext/) come with the default formatting options provided by WordPress.
+
+Formatting options need to be disabled with JavaScript using `unregisterFormatType`. The code below will globally disable the Inline Image, Language, Keyboard Input, Subscript, and Superscript options.
+
+```js
+wp.domReady( () => {
+	wp.richText.unregisterFormatType( 'core/image' );
+	wp.richText.unregisterFormatType( 'core/language' );
+	wp.richText.unregisterFormatType( 'core/keyboard' );
+	wp.richText.unregisterFormatType( 'core/subscript' );
+	wp.richText.unregisterFormatType( 'core/superscript' );
+});
+```
+
+This JavaScript should be enqueued much like the block variation example above.
\ No newline at end of file
diff --git a/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md b/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md
new file mode 100644
index 00000000000000..b28fdf7d9e5db1
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md
@@ -0,0 +1,179 @@
+# Filters and hooks
+
+The Editor provides numerous filters and hooks that allow you to modify the editing experience. Here are a few.
+
+## Editor settings
+
+One of the most common ways to modify the Editor is through the [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) PHP filter, which is applied before settings are sent to the initialized Editor. 
+
+The `block_editor_settings_all` hook passes two parameters to the callback function:
+
+- `$settings` – An array of [configurable settings](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#editor-settings) for the Editor.
+- `$context` – An instance of [`WP_Block_Editor_Context`](https://developer.wordpress.org/reference/classes/wp_block_editor_context/), an object that contains information about the current Editor.
+
+The following example disables the Code Editor for users who cannot activate plugins (Administrators). Add this to a plugin or your theme's `functions.php` file to test it.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
+
+function example_restrict_code_editor( $settings ) {
+	$can_active_plugins = current_user_can( 'activate_plugins' );
+
+	// Disable the Code Editor for users that cannot activate plugins (Administrators).
+	if ( ! $can_active_plugins ) {
+		$settings[ 'codeEditingEnabled' ] = false;
+	}
+
+	return $settings;
+}
+```
+
+For more examples, check out the [Editor Hooks](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/) documentation that includes the following use cases: 
+
+- [Set a default image size](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#set-a-default-image-size)
+- [Disable Openverse](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-openverse)
+- [Disable the Font Library](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-the-font-library)
+- [Disable block inspector tabs](https://developer.wordpress.org/block-editor/reference-guides/filters/editor-filters/#disable-block-inspector-tabs)
+
+## Server-side theme.json filters
+
+The theme.json file is a great way to control interface options, but it only allows for global or block-level modifications, which can be limiting in some scenarios.
+
+For instance, in the previous section, color and typography controls were disabled globally using theme.json. But let's say you want to enable color settings for users who are Administrators. 
+
+To provide more flexibility, WordPress 6.1 introduced server-side filters allowing you to customize theme.json data at four different data layers.
+
+- [`wp_theme_json_data_default`](https://developer.wordpress.org/reference/hooks/wp_theme_json_data_default/) - Hooks into the default data provided by WordPress
+- [`wp_theme_json_data_blocks`](https://developer.wordpress.org/reference/hooks/wp_theme_json_data_blocks/) - Hooks into the data provided by blocks.
+- [`wp_theme_json_data_theme`](https://developer.wordpress.org/reference/hooks/wp_theme_json_data_theme/) - Hooks into the data provided by the current theme.
+- [`wp_theme_json_data_user`](https://developer.wordpress.org/reference/hooks/wp_theme_json_data_user/) - Hooks into the data provided by the user.
+
+In the following example, the data from the current theme's theme.json file is updated using the `wp_theme_json_data_theme` filter. Color controls are restored if the current user is an Administrator.
+
+```php
+// Disable color controls for all users except Administrators.
+function example_filter_theme_json_data_theme( $theme_json ){
+    $is_administrator = current_user_can( 'edit_theme_options' );
+
+    if ( $is_administrator ) {
+        $new_data = array(
+            'version'  => 2,
+            'settings' => array(
+                'color' => array(
+                    'background'       => true,
+                    'custom'           => true,
+                    'customDuotone'    => true,
+                    'customGradient'   => true,
+                    'defaultGradients' => true,
+                    'defaultPalette'   => true,
+                    'text'             => true,
+                ),
+            ),
+        );
+    }
+
+	return $theme_json->update_with( $new_data );
+}
+add_filter( 'wp_theme_json_data_theme', 'example_filter_theme_json_data_theme' );
+```
+
+The filter receives an instance of the `WP_Theme_JSON_Data class` with the data for the respective layer. Then, you pass new data in a valid theme.json-like structure to the `update_with( $new_data )` method. A theme.json version number is required in `$new_data`. 
+
+
+## Client-side (Editor) filters
+
+WordPress 6.2 introduced a new client-side filter allowing you to modify block-level [theme.json settings](/docs/reference-guides/theme-json-reference/theme-json-living.md#settings) before the Editor is rendered.
+
+The filter is called `blockEditor.useSetting.before` and can be used in the JavaScript code as follows:
+
+```js
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Limit the Column block's spacing options to pixels.
+ */
+addFilter(
+	'blockEditor.useSetting.before',
+	'example/useSetting.before',
+	( settingValue, settingName, clientId, blockName ) => {
+		if ( blockName === 'core/column' && settingName === 'spacing.units' ) {
+			return [ 'px' ];
+		}
+		return settingValue;
+	}
+);
+```
+
+This example will restrict the available spacing units for the Column block to just pixels. As discussed above, a similar restriction could be applied using theme.json filters or directly in a theme’s theme.json file using block-level settings.
+
+However, the `blockEditor.useSetting.before` filter is unique because it allows you to modify settings according to the block’s location, neighboring blocks, the current user’s role, and more. The possibilities for customization are extensive.
+
+In the following example, text color controls are disabled for the Heading block whenever the block is placed inside of a Media & Text block.
+
+```js
+import { select } from  '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Disable text color controls on Heading blocks when placed inside of Media & Text blocks.
+ */
+addFilter(
+	'blockEditor.useSetting.before',
+	'example/useSetting.before',
+	( settingValue, settingName, clientId, blockName ) => {
+		if ( blockName === 'core/heading' ) {
+			const { getBlockParents, getBlockName } = select( 'core/block-editor' );
+			const blockParents = getBlockParents( clientId, true );
+			const inMediaText = blockParents.some( ( ancestorId ) => getBlockName( ancestorId ) === 'core/media-text' );
+
+			if ( inMediaText && settingName === 'color.text' ) {
+			    return false;
+			}
+		}
+
+		return settingValue;
+	}
+);
+```
+
+## Block Filters
+
+Beyond curating the Editor itself, there are many ways that you can modify individual blocks. Perhaps you want to disable particular block supports like background color or define which settings should be displayed by default on specific blocks.
+
+One of the most commonly used filters is [`block_type_metadata`](https://developer.wordpress.org/reference/hooks/block_type_metadata/). It allows you to filter the raw metadata loaded from a block's `block.json` file when a block type is registered on the server with PHP. 
+
+The filter takes one parameter:
+
+- `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
+
+The `$metadata` array contains everything you might want to know about a block, from its description and [attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) to block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/). 
+
+In the following example, background color and gradient support are disabled for Heading blocks.
+
+```php
+function example_disable_heading_background_color_and_gradients( $metadata ) {
+
+    // Only apply the filter to Heading blocks.
+    if ( ! isset( $metadata['name'] ) || 'core/heading' !== $metadata['name'] ) {
+        return $metadata;
+    }
+
+    // Check if 'supports' key exists.
+    if ( isset( $metadata['supports'] ) && isset( $metadata['supports']['color'] ) ) {
+
+        // Remove Background color and Gradients support.
+        $metadata['supports']['color']['background'] = false;
+        $metadata['supports']['color']['gradients']  = false;
+    }
+
+    return $metadata;
+}
+add_filter( 'block_type_metadata', 'example_disable_heading_background_color_and_gradients' );
+```
+
+You can learn more about the available block filters in the [Block Filters](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/) documentation.
+
+## Additional resources
+
+- [How to modify theme.json data using server-side filters](https://developer.wordpress.org/news/2023/07/05/how-to-modify-theme-json-data-using-server-side-filters/) (WordPress Developer Blog)
+- [Curating the Editor experience with client-side filters](https://developer.wordpress.org/news/2023/05/24/curating-the-editor-experience-with-client-side-filters/) (WordPress Developer Blog)
\ No newline at end of file
diff --git a/docs/how-to-guides/curating-the-editor-experience/patterns.md b/docs/how-to-guides/curating-the-editor-experience/patterns.md
new file mode 100644
index 00000000000000..abb7d131041dfb
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/patterns.md
@@ -0,0 +1,90 @@
+# Patterns
+
+Block [patterns](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/) are one of the best ways to provide users with unique and curated editing experiences. 
+
+## Prioritize starter patterns for any post type
+
+When a user creates new content, regardless of post type, they are met with an empty canvas. However, that experience can be improved thanks to the option to have patterns from a specific type prioritized upon creation of a new piece of content. The modal appears each time the user creates a new item when there are patterns on their website that declare support for the `core/post-content` block types. By default, WordPress does not include any of these patterns, so the modal will not appear without at least two of these post content patterns being added. 
+
+To opt into this, include `core/post-content` in the Block Types for your pattern. From there, you can control which post types the pattern should show up for via the Post Types option. Here's an example of a pattern that would appear when creating a new post. 
+
+```php
+<?php
+ /**
+  * Title: New Event Announcement
+  * Slug: twentytwentytwo/new-event-announcement
+  * Block Types: core/post-content
+  * Post Types: post
+  * Categories: featured, text
+  */
+?>
+
+<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
+<h2>Details</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
+<h2>Directions</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
+<h2>RSVP</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
+<p>To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"lock":{"move":true,"remove":false}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Learn more</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
+<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write titleā€¦","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">We hope to see you there!</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+```
+
+Read more about this functionality in the [Page creation patterns in WordPress 6.0 dev note](https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/) and [note that WordPress 6.1 brought this functionality to all post types](https://make.wordpress.org/core/2022/10/10/miscellaneous-editor-changes-for-wordpress-6-1/#start-content-patterns-for-all-post-types).  
+
+## Prioritize starter patterns for template creation
+
+In the same way patterns can be prioritized for new posts or pages, the same experience can be added to the template creation process. When patterns declare support for the 'templateTypes' property, the patterns will appear anytime a template that matches the designation is created, along with the options to start from a blank state or use the current fallback of the template. By default, WordPress does not include any of these patterns. 
+
+To opt into this, a pattern needs to specify a property called `templateTypes`, which is an array containing the templates where the patterns can be used as the full content. Here's an example of a pattern that would appear when creating a 404 template:
+
+```php
+register_block_pattern(
+  'wp-my-theme/404-template-pattern',
+  array(
+      'title'         => __( '404 Only template pattern', 'wp-my-theme' ),
+      'templateTypes' => array( '404' ),
+      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
+  )
+);
+```
+
+Read more about this functionality in the [Patterns on the create a new template modal in the WordPress 6.3 dev note](https://make.wordpress.org/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/#patterns-on-the-create-a-new-template-modal).
+
+## Lock patterns
+
+As mentioned in the prior section on Locking APIs, aspects of patterns themselves can be locked so that the important aspects of the design can be preserved. [Here’s an example of a pattern](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805) with various blocks locked in different ways. You can build these patterns in the editor itself, including adding locking options, before [following the documentation to register them](/docs/reference-guides/block-api/block-patterns.md). 
+
+## Prioritize specific patterns from the Pattern Directory
+
+With WordPress 6.0 themes can register patterns from [Pattern Directory](https://wordpress.org/patterns/) through theme.json. To accomplish this, themes should use the new patterns top level key in theme.json. Within this field, themes can list patterns to register from the Pattern Directory. The patterns field is an array of pattern slugs from the Pattern Directory. Pattern slugs can be extracted by the url in a single pattern view at the Pattern Directory. Example: This url https://wordpress.org/patterns/pattern/partner-logos the slug is partner-logos.
+
+```json
+{
+    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
+}
+```
+
+The content creator will then find the respective Pattern in the inserter “Patterns” tab in the categories that match the categories from the Pattern Directory.
+
+## Additional resources
+
+- [Using template patterns to build multiple homepage designs](https://developer.wordpress.org/news/2023/04/13/using-template-patterns-to-build-multiple-homepage-designs/) (WordPress Developer Blog)
\ No newline at end of file
diff --git a/docs/how-to-guides/curating-the-editor-experience/theme-json.md b/docs/how-to-guides/curating-the-editor-experience/theme-json.md
new file mode 100644
index 00000000000000..d14f29e0a76f3e
--- /dev/null
+++ b/docs/how-to-guides/curating-the-editor-experience/theme-json.md
@@ -0,0 +1,206 @@
+# theme.json
+
+A theme's theme.json file is one of the best ways to curate the Editor experience and will likely be the first tool you use before reaching for more sophisticated solutions. 
+
+## Providing default controls/options
+
+Since theme.json acts as a configuration tool, there are numerous ways to define at a granular level what options are available. This section will use duotone as an example since it showcases a feature that cuts across a few blocks and allows for varying levels of access.   
+
+*Duotone with Core options and customization available for each image related block:*
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"customDuotone": true,
+			"duotone": [
+			]
+		}
+	}
+}
+```
+
+*Duotone with theme defined color options, Core options, and customization available for each image related block:*
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"duotone": [
+				{
+					"colors": [ "#000000", "#ffffff" ],
+					"slug": "foreground-and-background",
+					"name": "Foreground and background"
+				},
+				{
+					"colors": [ "#000000", "#ff0200" ],
+					"slug": "foreground-and-secondary",
+					"name": "Foreground and secondary"
+				},
+				{
+					"colors": [ "#000000", "#7f5dee" ],
+					"slug": "foreground-and-tertiary",
+					"name": "Foreground and tertiary"
+				},
+			]
+		}
+	}
+}
+```
+
+*Duotone with defined default options and all customization available for the Post Featured Image block:*
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"custom": true,
+			"customDuotone": true
+		},
+		"blocks": {
+			"core/post-featured-image": {
+				"color": {
+					"duotone": [
+						{
+							"colors": [ "#282828", "#ff5837" ],
+							"slug": "black-and-orange",
+							"name": "Black and Orange"
+						},
+						{
+							"colors": [ "#282828", "#0288d1" ],
+							"slug": "black-and-blue", 
+							"name": "Black and Blue"
+						}
+					],
+					"customDuotone": true,
+					"custom": true
+				}
+			}
+		}
+	}
+}
+```
+
+*Duotone with only defined default options and core options available for the Post Featured Image block (no customization):*
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"custom": true,
+			"customDuotone": true
+		},	
+		"blocks": {
+			"core/post-featured-image": {
+				"color": {
+					"duotone": [
+						{
+							"colors": [ "#282828", "#ff5837" ],
+							"slug": "black-and-orange",
+							"name": "Black and Orange"
+						},
+						{
+							"colors": [ "#282828", "#0288d1" ],
+							"slug": "black-and-blue",
+							"name": "Black and Blue"
+						}
+					],
+					"customDuotone": false,
+					"custom": false
+				}
+			}
+		} 
+	}
+}
+```
+
+## Limiting interface options with theme.json
+
+### Limit options on a per-block basis
+
+Beyond defining default values, using theme.json allows you to also remove options entirely and instead rely on what the theme has set in place. Below is a visual showing two extremes with the same paragraph block: 
+
+![Image of restricted interface](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/Locking%20comparison%20visual.png?raw=true)
+
+Continuing the examples with duotone, this means you could allow full access to all Duotone functionality for Image blocks and only limit the Post Featured Image block like so:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"custom": true,
+			"customDuotone": true
+		},
+		"blocks": {
+			"core/image": {
+				"color": {
+					"duotone": [],
+					"customDuotone": true,
+					"custom": true
+				}
+			},
+			"core/post-featured-image": {
+				"color": {
+					"duotone": [],
+					"customDuotone": false,
+					"custom": false
+				}
+			}
+		}
+	}
+}
+```
+
+You can read more about how best to [turn on/off options with theme.json here](/docs/how-to-guides/themes/global-settings-and-styles.md). 
+
+### Disable inherit default layout
+
+To disable the “Inherit default layout” setting for container blocks like the Group block, remove the following section: 
+
+```json
+"layout": {
+	"contentSize": null,
+	"wideSize": null
+},
+```
+
+### Limit options globally
+
+When using theme.json in a block or classic theme, these settings will stop the default color and typography controls from being enabled globally, greatly limiting what’s possible:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"layout": {
+			"contentSize": "750px"
+		},
+		"color": {
+			"background": false,
+			"custom": false,
+			"customDuotone": false,
+			"customGradient": false,
+			"defaultGradients": false,
+			"defaultPalette": false,
+			"text": false
+		},
+		"typography": {
+			"customFontSize": false,
+			"dropCap": false,
+			"fontStyle": false,
+			"fontWeight": false,
+			"letterSpacing": false,
+			"lineHeight": false,
+			"textDecoration": false,
+			"textTransform": false
+		}
+	}
+}
+```
+
+To enable something from the above, just set whatever value you want to change to `true` for more granularity.
\ No newline at end of file
diff --git a/docs/how-to-guides/data-basics/1-data-basics-setup.md b/docs/how-to-guides/data-basics/1-data-basics-setup.md
index d9abd07967c8ce..d3208ceb352b4b 100644
--- a/docs/how-to-guides/data-basics/1-data-basics-setup.md
+++ b/docs/how-to-guides/data-basics/1-data-basics-setup.md
@@ -10,7 +10,7 @@ We'll do all the development inside of a WordPress plugin. Let's start by creati
 
 -   my-first-gutenberg-app.php – to create a new admin page
 -   src/index.js – for our JavaScript application
--   style.css – for the minimal stylesheet
+-   src/style.css – for the minimal stylesheet
 -   package.json – for the build process
 
 Go ahead and create these files using the following snippets:
@@ -18,25 +18,25 @@ Go ahead and create these files using the following snippets:
 **src/index.js:**
 
 ```js
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom';
 
 function MyFirstApp() {
 	return <span>Hello from JavaScript!</span>;
 }
 
+const root = createRoot( document.getElementById( 'my-first-gutenberg-app' ) );
 window.addEventListener(
 	'load',
 	function () {
-		render(
+		root.render(
 			<MyFirstApp />,
-			document.querySelector( '#my-first-gutenberg-app' )
 		);
 	},
 	false
 );
 ```
 
-**style.css:**
+**src/style.css:**
 
 ```css
 .toplevel_page_my-first-gutenberg-app #wpcontent {
@@ -149,7 +149,7 @@ function load_custom_wp_admin_scripts( $hook ) {
 	// Load our style.css.
 	wp_register_style(
 		'my-first-gutenberg-app',
-		plugins_url( 'style.css', __FILE__ ),
+		plugins_url( 'build/style-index.css', __FILE__ ),
 		array(),
 		$asset_file['version']
 	);
@@ -212,4 +212,4 @@ Congratulations! You are now ready to start building the app!
 
 -   Previous part: [Introduction](/docs/how-to-guides/data-basics/README.md)
 -   Next part: [Building a basic list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
--   (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+-   (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
index e9d0c50d1d2113..955bc1f869ad85 100644
--- a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
+++ b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
@@ -150,8 +150,8 @@ The list of pages is short for now; however, the longer it grows, the harder it
 Let’s start by adding a search field:
 
 ```js
+import { useState } from 'react';
 import { SearchControl } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 
 function MyFirstApp() {
 	const [searchTerm, setSearchTerm] = useState( '' );
@@ -172,7 +172,7 @@ Note that instead of using an `input` tag, we took advantage of the [SearchContr
 
 ![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter-field.jpg)
 
-The field starts empty, and the contents are stored in the `searchTerm` state value. If you aren’t familiar with the [useState](https://reactjs.org/docs/hooks-state.html) hook, you can learn more in [React’s documentation](https://reactjs.org/docs/hooks-state.html).
+The field starts empty, and the contents are stored in the `searchTerm` state value. If you aren’t familiar with the [useState](https://react.dev/reference/react/useState) hook, you can learn more in [React’s documentation](https://react.dev/reference/react/useState).
 
 We can now request only the pages matching the `searchTerm`.
 
@@ -211,8 +211,9 @@ The `searchTerm` is now used as a `search` query parameter when provided. Note t
 Finally, here’s how `MyFirstApp` looks once we wire it all together:
 
 ```js
+import { useState } from 'react';
+import { createRoot } from 'react-dom';
 import { SearchControl } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 
@@ -247,7 +248,7 @@ Voila! We can now filter the results:
 Let’s take a pause for a moment to consider the downsides of an alternative approach we could have taken - working with the API directly. Imagine we sent the API requests directly:
 
 ```js
-import { apiFetch } from '@wordpress/api-fetch';
+import apiFetch from '@wordpress/api-fetch';
 function MyFirstApp() {
 	// ...
 	const [pages, setPages] = useState( [] );
@@ -262,7 +263,7 @@ function MyFirstApp() {
 
 Working outside of core-data, we would need to solve two problems here.
 
-Firstly, out-of-order updates. Searching for „About” would trigger five API requests filtering for `A`, `Ab`, `Abo`, `Abou`, and `About`. Theese requests could finish in a different order than they started. It is possible that _search=A_ would resolve after _ search=About_ and thus we’d display the wrong data.
+Firstly, out-of-order updates. Searching for „About” would trigger five API requests filtering for `A`, `Ab`, `Abo`, `Abou`, and `About`. These requests could finish in a different order than they started. It is possible that _search=A_ would resolve after _ search=About_ and thus we’d display the wrong data.
 
 Gutenberg data helps by handling the asynchronous part behind the scenes. `useSelect` remembers the most recent call and returns only the data we expect.
 
@@ -359,8 +360,9 @@ And voilà! That's it.
 All the pieces are in place, great! Here’s the complete JavaScript code of our app:
 
 ```js
+import { useState } from 'react';
+import { createRoot } from 'react-dom';
 import { SearchControl, Spinner } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -421,12 +423,14 @@ function PagesList( { hasResolved, pages } ) {
 	);
 }
 
+const root = createRoot(
+	document.querySelector( '#my-first-gutenberg-app' )
+);
 window.addEventListener(
 	'load',
 	function () {
-		render(
-			<MyFirstApp />,
-			document.querySelector( '#my-first-gutenberg-app' )
+		root.render(
+			<MyFirstApp />
 		);
 	},
 	false
@@ -442,4 +446,4 @@ All that’s left is to refresh the page and enjoy the brand new status indicato
 
 * **Previous part:** [Setup](/docs/how-to-guides/data-basics/1-data-basics-setup.md)
 * **Next part:** [Building an edit form](/docs/how-to-guides/data-basics/3-building-an-edit-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/3-building-an-edit-form.md b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
index 754a31f1bc4921..1e2b4453e59ee2 100644
--- a/docs/how-to-guides/data-basics/3-building-an-edit-form.md
+++ b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
@@ -63,6 +63,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				value=''
 				label='Page title:'
 			/>
@@ -120,7 +122,7 @@ Great! We now have a basic user interface to work with.
 
 We want the `EditPageForm` to display the title of the currently edited page. You may have noticed that it doesn't receive a `page` prop, only `pageId`. That's okay. Gutenberg Data allows us to easily access entity records from any component.
 
-In this case, we need to use the [`getEntityRecord`](/docs/reference-guides/data/data-core/#getentityrecord) selector. The list of records is already available thanks to the `getEntityRecords` call in `MyFirstApp`, so there won't even be any additional HTTP requests involved – we'll get the cached record right away.
+In this case, we need to use the [`getEntityRecord`](/docs/reference-guides/data/data-core.md#getentityrecord) selector. The list of records is already available thanks to the `getEntityRecords` call in `MyFirstApp`, so there won't even be any additional HTTP requests involved – we'll get the cached record right away.
 
 Here's how you can try it in your browser's dev tools:
 
@@ -139,6 +141,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label='Page title:'
 				value={ page.title.rendered }
 			/>
@@ -164,6 +168,8 @@ function VanillaReactForm({ initialTitle }) {
 	const [title, setTitle] = useState( initialTitle );
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			value={ title }
 			onChange={ setTitle }
 		/>
@@ -215,7 +221,7 @@ As you can see, the `title` of an Entity Record is an object, but the `title` of
 
 This is no accident. Fields like `title`, `excerpt`, and `content` may contain [shortcodes](https://developer.wordpress.org/apis/handbook/shortcode/) or [dynamic blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md), which means they can only be rendered on the server. For such fields, the REST API exposes both the `raw` markup _and_ the `rendered` string. For example, in the block editor, `content.rendered` could used as a visual preview, and `content.raw` could be used to populate the code editor.
 
-So why is the `content` of an Edited Entity Record a string? Since Javascript is not be able to properly render arbitrary block markup, it stores only the `raw` markup without the `rendered` part. And since that's a string, the entire field becomes a string.
+So why is the `content` of an Edited Entity Record a string? Since JavaScript is not be able to properly render arbitrary block markup, it stores only the `raw` markup without the `rendered` part. And since that's a string, the entire field becomes a string.
 
 We can now update `EditPageForm` accordingly. We can access the actions using the [`useDispatch`](/packages/data/README.md#usedispatch) hook similarly to how we use `useSelect` to access selectors:
 
@@ -233,6 +239,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Page title:"
 				value={ page.title }
 				onChange={ handleChange }
@@ -501,6 +509,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Page title:"
 				value={ page.title }
 				onChange={ handleChange }
@@ -539,5 +549,5 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 ## What's next?
 
 * **Previous part:** [Building a list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
-* **Next part:** Building a *New Page* form (coming soon)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* **Next part:** [Building a Create Page form](/docs/how-to-guides/data-basics/4-building-a-create-page-form.md)
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
index 19aada07c2fc78..c880a1a3897488 100644
--- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
+++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
@@ -1,4 +1,4 @@
-# Part 4: Building a Create page form
+# Building a Create page form
 
 In the [previous part](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) we created an *Edit page* feature, and in this part we will add a *Create page* feature. Here's a glimpse of what we're going to build:
 
@@ -87,6 +87,8 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Page title:"
 				value={ title }
 				onChange={ onChangeTitle }
@@ -346,6 +348,8 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 	return (
 		<div className="my-gutenberg-form">
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label="Page title:"
 				value={ title }
 				onChange={ onChangeTitle }
@@ -389,4 +393,4 @@ All that’s left is to refresh the page and enjoy the form:
 
 * **Next part:** [Adding a delete button](/docs/how-to-guides/data-basics/5-adding-a-delete-button.md)
 * **Previous part:** [Building an edit form](/docs/how-to-guides/data-basics/3-building-an-edit-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
index 261c4bda071ab7..e0a0b0d1e93370 100644
--- a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
+++ b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
@@ -142,7 +142,7 @@ wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )
 Here's how we can apply it in `DeletePageButton`:
 
 ```js
-import { useEffect } from '@wordpress/element';
+import { useEffect } from 'react';
 const DeletePageButton = ({ pageId }) => {
 	// ...
 	const { error, /* ... */ } = useSelect(
@@ -252,8 +252,8 @@ Now we're ready to tell the user about any errors that may have occurred.
 With the SnackbarNotices component in place, we're ready to dispatch some notifications! Here's how:
 
 ```js
+import { useEffect } from 'react';
 import { store as noticesStore } from '@wordpress/notices';
-import { useEffect } from '@wordpress/element';
 function DeletePageButton( { pageId } ) {
 	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
 	// useSelect returns a list of selectors if you pass the store handle
@@ -307,8 +307,8 @@ And that's it!
 All the pieces are in place, great! Here’s all the changes we've made in this chapter:
 
 ```js
+import { useState, useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { Button, Modal, TextControl } from '@wordpress/components';
 
 function MyFirstApp() {
@@ -446,4 +446,4 @@ function DeletePageButton( { pageId } ) {
 ## What's next?
 
 * **Previous part:** [Building a *Create page form*](/docs/how-to-guides/data-basics/4-building-a-create-page-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/README.md b/docs/how-to-guides/data-basics/README.md
index 88e901a90e11db..3e92a216b60c55 100644
--- a/docs/how-to-guides/data-basics/README.md
+++ b/docs/how-to-guides/data-basics/README.md
@@ -2,9 +2,10 @@
 
 This tutorial aims to get you comfortable with the Gutenberg data layer. It guides you through building a simple React application that enables the user to manage their WordPress pages. The finished app will look like this:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/part1-finished.jpg)
 
-You may review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository.
+[![Open demo in WordPress Playground](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/part1-finished.jpg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/data-basics-59c8f8/_playground/blueprint.json "Opens demo in WordPress Playground")
+
+You may review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository.
 
 ### Table of Contents
 
diff --git a/docs/how-to-guides/enqueueing-assets-in-the-editor.md b/docs/how-to-guides/enqueueing-assets-in-the-editor.md
new file mode 100644
index 00000000000000..fb0efb88e67967
--- /dev/null
+++ b/docs/how-to-guides/enqueueing-assets-in-the-editor.md
@@ -0,0 +1,120 @@
+# Enqueueing assets in the Editor
+
+This guide is designed to be the definitive reference for enqueueing assets (scripts and styles) in the Editor. The approaches outlined here represent the recommended practices but keep in mind that this resource will evolve as WordPress does. Updates are encouraged.
+
+As of WordPress 6.3, the Post Editor is iframed if all registered blocks have a [`Block API version 3`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) or higher and no traditional metaboxes are registered. The Site Editor has always been iframed. This guide assumes you are looking to enqueue assets for the iframed Editor, but refer to the backward compatibility section below for additional considerations.
+
+For more information about why the Editor is iframed, please revisit the post [Blocks in an iframed (template) editor](https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/).
+
+## The Editor versus Editor content
+Before enqueueing assets in the Editor, you must first identify what you are trying to target.
+
+Do you want to add styling or JavaScript to the user-generated content (blocks) in the Editor? Or do you want to modify the Editor user interface (UI) components or interact with Editor APIs? This could include everything from creating custom block controls to registering block variations.
+
+There are different hooks to use depending on the answers to these questions, and if you are building a block or a theme, there are additional approaches to consider. Refer to the designated sections below.
+
+## Scenarios for enqueuing assets
+### Editor scripts and styles
+
+Whenever you need to enqueue assets for the Editor itself (i.e. not the user-generated content), you should use the [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) hook coupled with the standard [`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) and [`wp_enqueue_style`](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) functions.
+
+Examples might be adding custom inspector or toolbar controls, registering block styles and variations in JavaScript, registering Editor plugins, etc.
+
+```php
+/**
+ * Enqueue Editor assets.
+ */
+function example_enqueue_editor_assets() {
+    wp_enqueue_script(
+        'example-editor-scripts',
+        plugins_url( 'editor-scripts.js', __FILE__ )
+    );
+    wp_enqueue_style(
+        'example-editor-styles',
+        plugins_url( 'editor-styles.css', __FILE__ )
+    );
+}
+add_action( 'enqueue_block_editor_assets', 'example_enqueue_editor_assets' );
+```
+
+While not the recommended approach, it's important to note that `enqueue_block_editor_assets` can be used to style Editor content for backward compatibility. See below for more details.
+
+### Editor content scripts and styles
+
+As of WordPress 6.3, all assets added through the [`enqueue_block_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_assets/) PHP action will also be enqueued in the iframed Editor. See [#48286](https://github.com/WordPress/gutenberg/pull/48286) for more details.
+
+This is the primary method you should use to enqueue assets for user-generated content (blocks), and this hook fires both in the Editor and on the front end of your site. It should not be used to add assets intended for the Editor UI or to interact with Editor APIs. See below for a note on backward compatibility.
+
+There are instances where you may only want to add assets in the Editor and not on the front end. You can achieve this by using an [`is_admin()`](https://developer.wordpress.org/reference/functions/is_admin/) check.
+
+```php
+/**
+ * Enqueue content assets but only in the Editor.
+ */
+function example_enqueue_editor_content_assets() {
+    if ( is_admin() ) {
+        wp_enqueue_script(
+            'example-editor-content-scripts',
+            plugins_url( 'content-scripts.js', __FILE__ )
+        );
+        wp_enqueue_style(
+            'example-editor-content-styles',
+            plugins_url( 'content-styles.css', __FILE__ )
+        );
+    }
+}
+add_action( 'enqueue_block_assets', 'example_enqueue_editor_content_assets' );
+```
+
+You can also use the hook [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) to modify Editor settings directly. This method is a bit more complicated to implement but provides greater flexibility. It should only be used if `enqueue_block_assets` does not meet your needs.
+
+The following example sets the default text color for all paragraphs to `green`.
+
+```php
+/**
+ * Modify the Editor settings by adding custom styles.
+ *
+ * @param array  $editor_settings An array containing the current Editor settings.
+ * @param string $editor_context  The context of the editor.
+ *
+ * @return array Modified editor settings with the added custom CSS style.
+ */
+function example_modify_editor_settings( $editor_settings, $editor_context ) {
+    $editor_settings["styles"][] = array(
+        "css" => 'p { color: green }'
+    );
+
+    return $editor_settings;
+}
+add_filter( 'block_editor_settings_all', 'example_modify_editor_settings', 10,2 );
+```
+
+These styles are inlined in the `body` of the iframed Editor and prefixed by `.editor-styles-wrapper`. The resulting markup will look like this:
+
+```css
+<style>.editor-styles-wrapper p { color: green; }</style>
+```
+
+Beginning in WordPress 6.3, you can also use this method of modifying Editor settings to change styles dynamically with JavaScript. See [#52767](https://github.com/WordPress/gutenberg/pull/52767#top) for more details.
+
+### Block scripts and styles
+
+When building a block, `block.json` is the recommended way to enqueue all scripts and styles that are specifically required for the block itself. You are able to enqueue assets for the Editor, the front end, or both. See the [Block Metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) article for more details.
+
+### Theme scripts and styles
+
+If you need to enqueue Editor JavaScript in a theme, you can use either `enqueue_block_assets` or `enqueue_block_editor_assets` as outlined above. Editor-specific stylesheets should almost always be added with [`add_editor_style()`](https://developer.wordpress.org/reference/functions/add_editor_style/) or [`wp_enqueue_block_style()`](https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/).
+
+The `wp_enqueue_block_style()` function allows you to load per-block stylesheets in the Editor and on the front end. Coupled with `theme.json`, this is one of the best methods of styling blocks. See the WordPress Developer Blog article [Leveraging theme.json and per-block styles for more performant themes](https://developer.wordpress.org/news/2022/12/leveraging-theme-json-and-per-block-styles-for-more-performant-themes/) for more details.
+
+## Backward compatibility and known issues
+
+As a general rule, when you enqueue assets in the iframed Editor, they will also be enqueued when the Editor is not iframed so long as you are using WordPress 6.3+. The opposite is not always true.
+
+Suppose you are building a plugin or theme that requires backward compatibility to 6.2 or lower while maintaining compatibility with WordPress 6.3. In that case, you will not be able to use `enqueue_block_assets` since this hook does not enqueue assets in the content of the iframed Editor prior to 6.3.
+
+As an alternative, you can use `enqueue_block_editor_assets` so long as the enqueued stylesheet contains at least one of the following selectors: `.editor-styles-wrapper`, `.wp-block`, or `.wp-block-*`. A warning message will be logged in the console, but the hook will apply the styles to the content of the Editor.
+
+It’s also important to note that as of WordPress 6.3, assets enqueued by `enqueue_block_assets` are loaded both inside and outside Editor's iframe for backward compatibility. Depending on the script libraries that you are trying to enqueue, this might cause problems. An ongoing discussion about this approach is happening in the Gutenberg [GitHub repository](https://github.com/WordPress/gutenberg/issues/53590).
+
+If you experience issues using any of the methods outlined in this guide that have not been previously reported, please [submit an issue](https://github.com/WordPress/gutenberg/issues/new/choose) on GitHub.
diff --git a/docs/how-to-guides/feature-flags.md b/docs/how-to-guides/feature-flags.md
index 49fb8ba487edf5..11c5ae881337dd 100644
--- a/docs/how-to-guides/feature-flags.md
+++ b/docs/how-to-guides/feature-flags.md
@@ -2,13 +2,13 @@
 
 'Feature flags' are variables that allow you to prevent specific code in the Gutenberg project from being shipped to WordPress core, and to run certain experimental features only in the plugin.
 
-## Introducing `process.env.IS_GUTENBERG_PLUGIN`
+## Introducing `globalThis.IS_GUTENBERG_PLUGIN`
 
-The `process.env.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin. 
+The `globalThis.IS_GUTENBERG_PLUGIN` is an environment variable whose value 'flags' whether code is running within the Gutenberg plugin.
 
 When the codebase is built for the plugin, this variable will be set to `true`. When building for WordPress core, it will be set to `false` or `undefined`.
 
-## Basic Use
+## Basic usage
 
 ### Exporting features
 
@@ -19,8 +19,9 @@ function myPluginOnlyFeature() {
 	// implementation
 }
 
-export const pluginOnlyFeature =
-	process.env.IS_GUTENBERG_PLUGIN ? myPluginOnlyFeature : undefined;
+export const pluginOnlyFeature = globalThis.IS_GUTENBERG_PLUGIN
+	? myPluginOnlyFeature
+	: undefined;
 ```
 
 In the above example, the `pluginOnlyFeature` export will be `undefined` in non-plugin environments such as WordPress core.
@@ -32,44 +33,46 @@ If you're attempting to import and call a plugin-only feature, be sure to wrap t
 ```js
 import { pluginOnlyFeature } from '@wordpress/foo';
 
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	pluginOnlyFeature();
 }
 ```
 
 ## How it works
 
-During the webpack build, instances of `process.env.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/).
+During the webpack build, instances of `globalThis.IS_GUTENBERG_PLUGIN` will be replaced using webpack's [define plugin](https://webpack.js.org/plugins/define-plugin/).
 
 For example, in the following code –
 
 ```js
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	pluginOnlyFeature();
 }
 ```
 
-– the variable `process.env.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build:
+– the variable `globalThis.IS_GUTENBERG_PLUGIN` will be replaced with the boolean `true` during the plugin-only build:
 
 ```js
-if ( true ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `true`
+if ( true ) {
+	// Wepack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `true`
 	pluginOnlyFeature();
 }
 ```
 
 This ensures that code within the body of the `if` statement will always be executed.
 
-In WordPress core, the `process.env.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this:
+In WordPress core, the `globalThis.IS_GUTENBERG_PLUGIN` variable is replaced with `undefined`. The built code looks like this:
 
 ```js
-if ( undefined ) { // Wepack has replaced `process.env.IS_GUTENBERG_PLUGIN` with `undefined`
+if ( undefined ) {
+	// Webpack has replaced `globalThis.IS_GUTENBERG_PLUGIN` with `undefined`
 	pluginOnlyFeature();
 }
 ```
 
 `undefined` evaluates to `false` so the plugin-only feature will not be executed.
 
-### Dead Code Elimination
+### Dead code elimination
 
 For production builds, webpack ['minifies'](https://en.wikipedia.org/wiki/Minification_(programming)) the code, removing as much unnecessary JavaScript as it can. 
 
@@ -97,8 +100,8 @@ if ( undefined ) {
 
 In this case, the minification process will remove the entire `if` statement including the body, ensuring plugin-only code is not included in WordPress core build.
 
-## FAQ
+## Frequently asked questions
 
-#### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN === 2`?
+### Why shouldn't I assign the result of an expression involving `IS_GUTENBERG_PLUGIN` to a variable, e.g. `const isMyFeatureActive = ! Object.is( undefined, globalThis.IS_GUTENBERG_PLUGIN )`?
 
 Introducing complexity may prevent webpack's minifier from identifying and therefore eliminating dead code. Therefore it is recommended to use the examples in this document to ensure your feature flag functions as intended. For further details, see the [Dead Code Elimination](#dead-code-elimination) section.
diff --git a/docs/how-to-guides/format-api.md b/docs/how-to-guides/format-api.md
index a23293bbb27e3f..188bc1725c3633 100644
--- a/docs/how-to-guides/format-api.md
+++ b/docs/how-to-guides/format-api.md
@@ -10,7 +10,7 @@ In WordPress lingo, a _format_ is a [HTML tag with text-level semantics](https:/
 
 ## Before you start
 
-This guide assumes you are already familiar with WordPress plugins and loading JavaScript with them, see the [Plugin Handbook](https://developer.wordpress.org/plugins/) or [JavaScript Tutorial](/docs/how-to-guides/javascript/README.md) to brush up.
+This guide assumes you are already familiar with WordPress plugins and loading JavaScript with them, see the [Plugin Handbook](https://developer.wordpress.org/plugins/) or [JavaScript Tutorial](/docs/getting-started/fundamentals/javascript-in-the-block-editor.md) to brush up.
 
 You will need:
 
@@ -18,7 +18,7 @@ You will need:
 -   A minimal plugin activated and setup ready to edit
 -   JavaScript setup for building and enqueuing
 
-The [complete format-api example](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/format-api) is available that you can use as a reference for your setup.
+The [complete format-api example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) is available that you can use as a reference for your setup.
 
 ## Step-by-step guide
 
@@ -173,7 +173,7 @@ registerFormatType( 'my-custom-format/sample-output', {
 } );
 ```
 
-### Step5: Add a button outside of the dropdown (Optional)
+### Step 5: Add a button outside of the dropdown (Optional)
 
 Using the `RichTextToolbarButton` component, the button is added to the default dropdown menu. You can add the button directly to the toolbar by using the `BlockControls` component.
 
@@ -220,7 +220,7 @@ If you run into errors:
 -   Confirm the JavaScript is loading in the editor.
 -   Check for any console error messages.
 
-## Additional Resources
+## Additional resources
 
 Reference documentation used in this guide:
 
@@ -234,4 +234,4 @@ Reference documentation used in this guide:
 
 The guide showed you how to add a button to the toolbar and have it apply a format to the selected text. Try it out and see what you can build with it in your next plugin.
 
-Download the [format-api example](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/format-api) from the [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository.
+Download the [format-api example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) from the [block-development-examples](https://github.com/WordPress/block-development-examples) repository.
diff --git a/docs/how-to-guides/internationalization.md b/docs/how-to-guides/internationalization.md
index fa28b78b376904..cd341f1b9c6c5d 100644
--- a/docs/how-to-guides/internationalization.md
+++ b/docs/how-to-guides/internationalization.md
@@ -1,6 +1,6 @@
 # Internationalization
 
-## What is Internationalization?
+## What is internationalization?
 
 Internationalization is the process to provide multiple language support to software, in this case WordPress. Internationalization is often abbreviated as **i18n**, where 18 stands for the number of letters between the first _i_ and the last _n_.
 
@@ -24,11 +24,11 @@ function myguten_block_init() {
     wp_register_script(
         'myguten-script',
         plugins_url( 'block.js', __FILE__ ),
-        array( 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-block-editor' )
+        array( 'wp-blocks', 'react', 'wp-i18n', 'wp-block-editor' )
     );
 
     register_block_type( 'myguten/simple', array(
-		'api_version' => 2,
+		'api_version' => 3,
         'editor_script' => 'myguten-script',
     ) );
 }
@@ -37,16 +37,13 @@ add_action( 'init', 'myguten_block_init' );
 
 In your code, you can include the i18n functions. The most common function is **\_\_** (a double underscore) which provides translation of a simple string. Here is a basic block example:
 
-{% codetabs %}
-{% JSX %}
-
 ```js
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
 
 registerBlockType( 'myguten/simple', {
-	apiVersion: 2,
+	apiVersion: 3,
 	title: __( 'Simple Block', 'myguten' ),
 	category: 'widgets',
 
@@ -64,33 +61,6 @@ registerBlockType( 'myguten/simple', {
 } );
 ```
 
-{% Plain %}
-
-```js
-const { __ } = wp.i18n;
-const el = wp.element.createElement;
-const { registerBlockType } = wp.blocks;
-const { useBlockProps } = wp.blockEditor;
-
-registerBlockType( 'myguten/simple', {
-	title: __( 'Simple Block', 'myguten' ),
-	category: 'widgets',
-
-	edit: function () {
-		const blockProps = useBlockProps( { style: { color: 'red' } } );
-
-		return el( 'p', blockProps, __( 'Hello World', 'myguten' ) );
-	},
-
-	save: function () {
-		const blockProps = useBlockProps.save( { style: { color: 'red' } } );
-		return el( 'p', blockProps, __( 'Hello World', 'myguten' ) );
-	},
-} );
-```
-
-{% end %}
-
 In the above example, the function will use the first argument for the string to be translated. The second argument is the text domain which must match the text domain slug specified by your plugin.
 
 Common functions available, these mirror their PHP counterparts are:
@@ -117,11 +87,11 @@ This is all you need to make your plugin JavaScript code translatable.
 
 When you set script translations for a handle WordPress will automatically figure out if a translations file exists on translate.wordpress.org, and if so ensure that it's loaded into `wp.i18n` before your script runs. With translate.wordpress.org, plugin authors also do not need to worry about setting up their own infrastructure for translations and can rely on a global community with dozens of active locales. Read more about [WordPress Translations](https://make.wordpress.org/meta/handbook/documentation/translations/).
 
-## Provide Your Own Translations
+## Provide your own translations
 
 You can create and ship your own translations with your plugin, if you have sufficient knowledge of the language(s) you can ensure the translations are available.
 
-### Create Translation File
+### Create the translation file
 
 The translation files must be in the JED 1.x JSON format.
 
@@ -234,7 +204,7 @@ This will generate the JSON file `myguten-eo-[md5].json` with the contents:
 }
 ```
 
-### Load Translation File
+### Load the translation file
 
 The final part is to tell WordPress where it can look to find the translation file. The `wp_set_script_translations` function accepts an optional third argument that is the path it will first check for translations. For example:
 
@@ -250,12 +220,12 @@ WordPress will check for a file in that path with the format `${domain}-${locale
 
 Using `make-json` automatically names the file with the md5 hash, so it is ready as-is. You could rename the file to use the handle instead, in which case the file name would be `myguten-eo-myguten-script.json`.
 
-### Test Translations
+### Test translations
 
 You will need to set your WordPress installation to Esperanto language. Go to Settings > General and change your site language to Esperanto.
 
 With the language set, create a new post, add the block, and you will see the translations used.
 
-### Filtering Translations
+### Filtering translations
 
 The outputs of the translation functions (`__()`, `_x()`, `_n()`, and `_nx()`) are filterable, see [i18n Filters](/docs/reference-guides/filters/i18n-filters.md) for full information.
diff --git a/docs/how-to-guides/javascript/README.md b/docs/how-to-guides/javascript/README.md
deleted file mode 100644
index 4b2d123c8ab136..00000000000000
--- a/docs/how-to-guides/javascript/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# How to use JavaScript with the Block Editor
-
-The Block Editor Handbook contains information on the APIs available for working with this new setup. The goal of this tutorial is to get you comfortable using the API reference and snippets of code found within.
-
-### What is JavaScript
-
-JavaScript is a programming language which is loaded and executed in your web browser; compared to PHP which is run by a web server with the results sent to the browser, typically as HTML.
-
-The block editor introduced in WordPress 5.0 is written in JavaScript, with the code run in the browser, and not on the server, this allows for a richer and more dynamic user experience. It also requires you to learn how to use JavaScript to extend and enhance the block editor.
-
-### Table of Contents
-
-1. [Plugins Background](/docs/how-to-guides/javascript/plugins-background.md)
-2. [Loading JavaScript](/docs/how-to-guides/javascript/loading-javascript.md)
-3. [Extending the Block Editor](/docs/how-to-guides/javascript/extending-the-block-editor.md)
-4. [Troubleshooting](/docs/how-to-guides/javascript/troubleshooting.md)
-5. [JavaScript Versions and Building](/docs/how-to-guides/javascript/versions-and-building.md)
-6. [Scope your code](/docs/how-to-guides/javascript/scope-your-code.md)
-7. [JavaScript Build Step](/docs/how-to-guides/javascript/js-build-setup.md)
-8. [ESNext Syntax](/docs/how-to-guides/javascript/esnext-js.md)
diff --git a/docs/how-to-guides/javascript/esnext-js.md b/docs/how-to-guides/javascript/esnext-js.md
deleted file mode 100644
index f478d1fd596eaa..00000000000000
--- a/docs/how-to-guides/javascript/esnext-js.md
+++ /dev/null
@@ -1,123 +0,0 @@
-# ESNext Syntax
-
-The JavaScript language continues to evolve, the syntax used to write JavaScript code is not fixed but changes over time. [Ecma International](https://en.wikipedia.org/wiki/Ecma_International) is the organization that sets the standard for the language, officially called [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript). A new standard for JavaScript is published each year, the 6th edition published in 2015 is often referred to as ES6. Our usage would more appropriately be **ESNext** referring to the latest standard. The build step is what converts this latest syntax of JavaScript to a version understood by browsers.
-
-Here are some common ESNext syntax patterns used throughout the Gutenberg project.
-
-## Destructuring Assignments
-
-The [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax allows you to pull apart arrays, or properties from objects into their own variable.
-
-For the object `const obj = { foo: "bar" }`
-
-Creating and assigning a new variable `foo` can be done in a single step: `const { foo } = obj;`
-
-The curly brackets on the left side tells JavaScript to inspect the object `obj` for the property `foo` and assign its value to the new variable of the same name.
-
-## Arrow Functions
-
-Arrow functions provide a shorter syntax for defining a function; this is such a common task in JavaScript that having a syntax a bit shorter is quite helpful.
-
-Before you might define a function like:
-
-```js
-const f = function ( param ) {
-	console.log( param );
-};
-```
-
-Using arrow function, you can define the same using:
-
-```js
-const g = ( param ) => {
-	console.log( param );
-};
-```
-
-Or even shorter, if the function is only a single-line you can omit the
-curly braces:
-
-```js
-const g2 = ( param ) => console.log( param );
-```
-
-In the examples above, using `console.log` we aren't too concerned about the return values. However, when using arrow functions in this way, the return value is set whatever the line returns.
-
-For example, our save function could be shortened from:
-
-```js
-save: ( { attributes } ) => {
-	return <div className="theurl">{ attributes.url }</div>;
-};
-```
-
-To:
-
-```js
-save: ( { attributes } ) => <div className="theurl">{ attributes.url }</div>;
-```
-
-There are even more ways to shorten code, but you don't want to take it too far and make it harder to read what is going on.
-
-## Imports
-
-The [import statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) is used to import variables or functions from an exported file. You can use destructuring on imports, for example:
-
-```js
-import { TextControl } from '@wordpress/components';
-```
-
-This will look in the `@wordpress/components` package for the exported `TextControl` variable.
-
-A package or file can also set a `default` export, this is imported without using the curly brackets. For example
-
-```js
-const edit = ( { attributes, setAttributes } ) => {
-    return (
-        <div>
-            <TextControl
-                label="URL"
-                value={ attributes.url }
-                onChange={ ... }
-            />
-        </div>
-    );
-};
-
-export default edit;
-```
-
-To import, you would use:
-
-```js
-import edit from './edit';
-
-registerBlockType( 'mkaz/qrcode-block', {
-	title: 'QRCode Block',
-	icon: 'visibility',
-	category: 'widgets',
-	attributes: {
-		url: {
-			type: 'string',
-			source: 'text',
-			selector: '.theurl',
-		},
-	},
-	edit,
-	save: ( { attributes } ) => {
-		return <div> ... </div>;
-	},
-} );
-```
-
-Note, you can also shorten `edit: edit` to just `edit` as shown above. JavaScript will automatically assign the property `edit` to the value of `edit`. This is another form of destructuring.
-
-## Summary
-
-It helps to become familiar with the ESNext syntax and the common shorter forms. It will give you a greater understanding of reading code examples and what is going on.
-
-Here are a few more resources that may help
-
--   [ES5 vs ES6 with example code](https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc)
--   [Top 10 ES6 Features by Example](https://blog.pragmatists.com/top-10-es6-features-by-example-80ac878794bb)
--   [ES6 Syntax and Feature Overview](https://www.taniarascia.com/es6-syntax-and-feature-overview/)
diff --git a/docs/how-to-guides/javascript/extending-the-block-editor.md b/docs/how-to-guides/javascript/extending-the-block-editor.md
deleted file mode 100644
index 75442628f83ac5..00000000000000
--- a/docs/how-to-guides/javascript/extending-the-block-editor.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# 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.
-
-Replace the existing `console.log()` code in your `myguten.js` file with:
-
-```js
-wp.blocks.registerBlockStyle( 'core/quote', {
-	name: 'fancy-quote',
-	label: 'Fancy Quote',
-} );
-```
-
-**Important:** Notice that you are using a function from `wp.blocks` package. This means you must specify it as a dependency when you enqueue the script. Update the `myguten-plugin.php` file to:
-
-```php
-<?php
-/*
-Plugin Name: Fancy Quote
-*/
-
-function myguten_enqueue() {
-	wp_enqueue_script( 'myguten-script',
-		plugins_url( 'myguten.js', __FILE__ ),
-		array( 'wp-blocks' )
-	);
-}
-add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
-```
-
-The last argument in the `wp_enqueue_script()` function is an array of dependencies. WordPress makes packages available under the `wp` namespace. In the example, you use `wp.blocks` to access the items that the blocks package exports (in this case the `registerBlockStyle()` function).
-
-See [Packages](/docs/reference-guides/packages.md) for list of available packages and what objects they export.
-
-After you have updated both JavaScript and PHP files, go to the block editor and create a new post.
-
-Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed.
-
-Click the Fancy Quote to select and apply that style to your quote block:
-
-![Fancy Quote Style in Inspector](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/fancy-quote-in-inspector.png)
-
-Even if you Preview or Publish the post you will not see a visible change. However, if you look at the source, you will see the `is-style-fancy-quote` class name is now attached to your quote block.
-
-Let's add some style. In your plugin folder, create a `style.css` file with:
-
-```css
-.is-style-fancy-quote {
-	color: tomato;
-}
-```
-
-You enqueue the CSS file by adding the following to your `myguten-plugin.php`:
-
-```php
-function myguten_stylesheet() {
-	wp_enqueue_style( 'myguten-style', plugins_url( 'style.css', __FILE__ ) );
-}
-add_action( 'enqueue_block_assets', 'myguten_stylesheet' );
-```
-
-Now when you view in the editor and publish, you will see your Fancy Quote style, a delicious tomato color text:
-
-![Fancy Quote with Style](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/fancy-quote-with-style.png)
diff --git a/docs/how-to-guides/javascript/js-build-setup.md b/docs/how-to-guides/javascript/js-build-setup.md
deleted file mode 100644
index d6a2669da50378..00000000000000
--- a/docs/how-to-guides/javascript/js-build-setup.md
+++ /dev/null
@@ -1,182 +0,0 @@
-# JavaScript Build Setup
-
-ESNext is JavaScript written using syntax and features only available in a version newer than browser support—the support browser versions is referred to as ECMAScript 5 (ES5). [JSX](https://reactjs.org/docs/introducing-jsx.html) is a custom syntax extension to JavaScript, created by React project, that allows you to write JavaScript using a familiar HTML tag-like syntax.
-
-See the [ESNext syntax documentation](/docs/how-to-guides/javascript/esnext-js.md) for explanation and examples about common code differences between standard JavaScript and ESNext.
-
-Let's set up your development environment to use these syntaxes, we'll cover development for your plugin to work with the Gutenberg project (ie: the block editor). If you want to develop on Gutenberg itself, see the [Getting Started](/docs/contributors/code/getting-started-with-code-contribution.md) documentation.
-
-Browsers cannot interpret or run ESNext and JSX syntaxes, so we must use a transformation step to convert these syntaxes to code that browsers can understand.
-
-There are a few reasons to use ESNext and this extra step of transformation:
-
--   It makes for simpler code that is easier to read and write.
--   Using a transformation step allows for tools to optimize the code to work on the widest variety of browsers.
--   By using a build step you can organize your code into smaller modules and files that can be bundled together into a single download.
-
-There are different tools that can perform this transformation or build step; WordPress uses webpack and Babel.
-
-[webpack](https://webpack.js.org/) is a pluggable tool that processes JavaScript and creates a compiled bundle that runs in a browser. [Babel](https://babeljs.io/) transforms JavaScript from one format to another. You use Babel as a plugin to webpack to transform both ESNext and JSX to JavaScript.
-
-The [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts) package abstracts these libraries away to standardize and simplify development, so you won't need to handle the details for configuring webpack or babel. See the [@wordpress/scripts package documentation](https://developer.wordpress.org/block-editor/packages/packages-scripts/) for configuration details.
-
-## Quick Start
-
-If you prefer a quick start, you can use one of the examples from the [Gutenberg Examples repository](https://github.com/wordpress/gutenberg-examples/) and skip below. Each one of the `-esnext` directories in the examples repository contain the necessary files for working with ESNext and JSX.
-
-## Setup
-
-Both webpack and Babel are tools written in JavaScript and run using [Node.js](https://nodejs.org/) (node). Node.js is a runtime environment for JavaScript outside of a browser. Simply put, node allows you to run JavaScript code on the command-line.
-
-First, you need to set up Node.js for your development environment. The steps required depend on your operating system, if you have a package manager installed, setup can be as straightforward as:
-
--   Ubuntu: `apt install nodejs npm`
--   macOS: `brew install node`
--   Windows: `choco install node`
-
-If you are not using a package manager, see the [developer environment setup documentation](/docs/getting-started/devenv/README.md) for setting up Node using nvm, or see the official [Node.js download page](https://nodejs.org/en/download/) for installers and binaries.
-
-**Note:** The build tools and process occur on the command-line, so basic familiarity using a terminal application is required. Some text editors have a terminal built-in that is fine to use; Visual Studio Code and PhpStorm are two popular options.
-
-### Node Package Manager (npm)
-
-The Node Package Manager (npm) is a tool included with node. npm allows you to install and manage JavaScript packages. npm can also generate and process a special file called `package.json`, that contains information about your project and the packages your project uses.
-
-To start a new node project, first create a directory to work in:
-
-```sh
-mkdir myguten-block
-cd myguten-block
-```
-
-You create a new package.json running `npm init` in your terminal. This will walk you through creating your package.json file:
-
-```sh
-npm init
-
-package name: (myguten-block) myguten-block
-version: (1.0.0)
-description: Test block
-entry point: (index.js) build/index.js
-test command:
-git repository:
-keywords:
-author: mkaz
-license: (ISC) GPL-2.0-only
-About to write to /home/mkaz/src/wp/scratch/package.json:
-
-{
-  "name": "myguten-block",
-  "version": "1.0.0",
-  "description": "Test block",
-  "main": "block.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "mkaz",
-  "license": "GPL-2.0-only"
-}
-
-
-Is this OK? (yes) yes
-```
-
-### Using npm to install packages
-
-The next step is to install the packages required. You can install packages using the npm command `npm install`. If you pass the `--save-dev` parameter, npm will write the package as a dev dependency in the package.json file. The `--save-exact` parameter instructs npm to save an exact version of a dependency, not a range of valid versions. See [npm install documentation](https://docs.npmjs.com/cli/install) for more details.
-
-Run `npm install --save-dev --save-exact @wordpress/scripts`
-
-After installing, a `node_modules` directory is created with the modules and their dependencies.
-
-Also, if you look at package.json file it will include a new section:
-
-```json
-"devDependencies": {
-  "@wordpress/scripts": "6.0.0"
-}
-```
-
-## Setting Up wp-scripts build
-
-The `@wordpress/scripts` package handles the dependencies and default configuration for webpack and Babel. The scripts package expects the source file to compile to be found at `src/index.js`, and will save the compiled output to `build/index.js`.
-
-With that in mind, let's set up a basic block. Create a file at `src/index.js` with the following content:
-
-```js
-import { registerBlockType } from '@wordpress/blocks';
-
-registerBlockType( 'myguten/test-block', {
-	title: 'Basic Example',
-	icon: 'smiley',
-	category: 'design',
-	edit: () => <div>Hola, mundo!</div>,
-	save: () => <div>Hola, mundo!</div>,
-} );
-```
-
-To configure npm to run a script, you use the scripts section in `package.json` webpack:
-
-```json
-  "scripts": {
-    "build": "wp-scripts build"
-  },
-```
-
-You can then run the build using: `npm run build`.
-
-After the build finishes, you will see the built file created at `build/index.js`. Enqueue this file in the admin screen as you would any JavaScript in WordPress, see [loading JavaScript step in this tutorial](/docs/how-to-guides/javascript/loading-javascript.md), and the block will load in the editor.
-
-## Development Mode
-
-The **build** command in `@wordpress/scripts` runs in "production" mode. This shrinks the code down so it downloads faster, but makes it difficult to read in the process. You can use the **start** command which runs in development mode that does not shrink the code, and additionally continues a running process to watch the source file for more changes and rebuilds as you develop.
-
-The start command can be added to the same scripts section of `package.json`:
-
-```json
-  "scripts": {
-    "start": "wp-scripts start",
-    "build": "wp-scripts build"
-  },
-```
-
-Now, when you run `npm start` a watcher will run in the terminal. You can then edit away in your text editor; after each save, it will automatically build. You can then use the familiar edit/save/reload development process.
-
-**Note:** keep an eye on your terminal for any errors. If you make a typo or syntax error, the build will fail and the error will be in the terminal.
-
-## Source Control
-
-Because a typical `node_modules` folder will contain thousands of files that change with every software update, you should exclude `node_modules/` from your source control. If you ever start from a fresh clone, simply run `npm install` in the same folder your `package.json` is located to pull your required packages.
-
-Likewise, you do not need to include `node_modules` or any of the above configuration files in your plugin because they will be bundled inside the file that webpack builds. **Be sure to enqueue the `build/index.js` file** in your plugin PHP. This is the main JavaScript file needed for your block to run.
-
-## Dependency Management
-
-Using `wp-scripts` ver 5.0.0+ build step will also produce an `index.asset.php` file that contains an array of dependencies and a version number for your block. For our simple example above, it is something like:
-`array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'fc93c4a9675c108725227db345898bcc');`
-
-Here is how to use this asset file to automatically set the dependency list for enqueuing the script. This prevents having to manually update the dependencies, it will be created based on the package imports used within your block.
-
-```php
-$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
-
-wp_register_script(
-	'myguten-block',
-	plugins_url( 'build/index.js', __FILE__ ),
-	$asset_file['dependencies'],
-	$asset_file['version']
-);
-```
-
-See [ESNext blocks in gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples) for full examples.
-
-## Summary
-
-Yes, the initial setup is a bit more involved, but the additional features and benefits are usually worth the trade off in setup time.
-
-With a setup in place, the standard workflow is:
-
-1. Install dependencies: `npm install`
-2. Start development builds: `npm start`
-3. Develop. Test. Repeat.
-4. Create production build: `npm run build`
diff --git a/docs/how-to-guides/javascript/loading-javascript.md b/docs/how-to-guides/javascript/loading-javascript.md
deleted file mode 100644
index 80150f14445a1d..00000000000000
--- a/docs/how-to-guides/javascript/loading-javascript.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# Loading JavaScript
-
-With the plugin in place, you can add the code that loads the JavaScript. This methodology follows the standard WordPress procedure of enqueuing scripts, see [enqueuing section of the Plugin Handbook](https://developer.wordpress.org/plugins/javascript/enqueuing/).
-
-Add the following code to your `myguten-plugin.php` file:
-
-```php
-function myguten_enqueue() {
-	wp_enqueue_script(
-		'myguten-script',
-		plugins_url( 'myguten.js', __FILE__ )
-	);
-}
-add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
-```
-
-The `enqueue_block_editor_assets` hook is used, which is called when the block editor loads, and will enqueue the JavaScript file `myguten.js`.
-
-Create a file called `myguten.js` and add:
-
-```js
-console.log( "I'm loaded!" );
-```
-
-Next, create a new post in the block editor.
-
-We'll check the JavaScript console in your browser's Developer Tools, to see if the message is displayed. If you're not sure what developer tools are, Mozilla's ["What are browser developer tools?"](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) documentation provides more information, including more background on the [JavaScript console](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console).
-
-If your code is registered and enqueued correctly, you should see a message in your console:
-
-![Console Log Message Success](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/js-tutorial-console-log-success.png)
-
-**Note for Theme Developers:** The above method of enqueuing is used for plugins. If you are extending the block editor for your theme there is a minor difference, you will use the `get_template_directory_uri()` function instead of `plugins_url()`. So for a theme, the enqueue example is:
-
-```php
-function myguten_enqueue() {
-	wp_enqueue_script(
-		'myguten-script',
-		get_template_directory_uri() . '/myguten.js'
-	);
-}
-add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
-```
-
-### Recap
-
-At this point, you have a plugin in the directory `wp-content/plugins/myguten-plugin` with two files: the PHP server-side code in `myguten-plugin.php`, and the JavaScript which runs in the browser in `myguten.js`.
-
-This puts all the initial pieces in place for you to start extending the block editor.
diff --git a/docs/how-to-guides/javascript/plugins-background.md b/docs/how-to-guides/javascript/plugins-background.md
deleted file mode 100644
index 617cbe64e05ede..00000000000000
--- a/docs/how-to-guides/javascript/plugins-background.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# Plugins Background
-
-The primary means of extending WordPress is the plugin. The WordPress [Plugin Basics](https://developer.wordpress.org/plugins/plugin-basics/) documentation provides details on building a plugin.
-
-The quickest way to start is to create a new directory in `wp-content/plugins/` to contain your plugin code. For this example, call it `myguten-plugin`.
-
-Inside this new directory, create a file called `myguten-plugin.php`. This is the server-side code that runs when your plugin is active.
-
-For now, add the following code in the file:
-
-```php
-<?php
-/*
-Plugin Name: Fancy Quote
-*/
-```
-
-To summarize, you should have a directory `wp-content/plugins/myguten-plugin/` which has the single file `myguten-plugin.php`.
-
-Once that is in place, go to your plugins list in `wp-admin` and you should see your plugin listed.
-
-Click **Activate** and your plugin will load with WordPress.
diff --git a/docs/how-to-guides/javascript/scope-your-code.md b/docs/how-to-guides/javascript/scope-your-code.md
deleted file mode 100644
index 39d52cd6ab934b..00000000000000
--- a/docs/how-to-guides/javascript/scope-your-code.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# Scope Your Code
-
-Historically, JavaScript files loaded in a web page share the same scope. This means that a global variable declared in one file will be seen by the code in other files.
-
-To see how this works, create a web page that loads three JavaScript files. The `first.js` file will be:
-
-```js
-var pluginName = 'MyPlugin';
-console.log( 'Plugin name is ', pluginName );
-```
-
-Let's create `second.js` as:
-
-```js
-var pluginName = 'DifferentPlugin';
-console.log( 'Plugin name is ', pluginName );
-```
-
-And, finally, `third.js`:
-
-```js
-console.log( 'Plugin name is ', pluginName );
-```
-
-When loaded on the same page, `first.js` and `second.js` will output the plugin name declared within itself. They will override the value of the global `pluginName` variable if one was already declared. It's not known what gets printed in the console when `third.js` is executed, though - it depends on the value of the global `pluginName` variable when `third.js` is executed, which will depend on the order the files are loaded.
-
-This behavior can be problematic, and is the reason we need to scope the code. By scoping the code—ensuring each file is isolated from each other—we can prevent values unexpectedly changing.
-
-## Scoping Code Within a Function
-
-In JavaScript, you can scope your code by writing it within a function. Functions have "local scope", or a scope that is specific only to that function. Additionally, in JavaScript you can write anonymous functions, functions without a name, which will also prevent your function name from being overridden in the global scope.
-
-Taking advantage of these two JavaScript features, `first.js` could be scoped as:
-
-```js
-function() {
-	var pluginName = 'MyPlugin';
-	console.log( 'Plugin name is ', pluginName );
-}
-```
-
-`second.js` as:
-
-```js
-function() {
-	var pluginName = 'DifferentPlugin';
-	console.log( 'Plugin name is ', pluginName );
-}
-```
-
-And `third.js`:
-
-```js
-function() {
-	console.log( 'Plugin name is ', pluginName );
-}
-```
-
-With this trick, the different files won't override each other's variables. Unfortunately, they also won't work as expected, because these functions are being called by no one. We've only _defined_ the functions; we haven't _executed_ them yet.
-
-## Automatically Execute Anonymous Functions
-
-It turns out there are a few ways to execute anonymous functions in JavaScript, but the most popular is this:
-
-```js
-( function () {
-	// your code goes here
-} )();
-```
-
-You wrap your function between parentheses, and then call it like any other named function. This pattern is known as [Immediately-Invoked Function Expression](http://benalman.com/news/2010/11/immediately-invoked-function-expression/), or IIFE for short.
-
-This is `first.js` written as an IIFE:
-
-```js
-( function () {
-	var pluginName = 'MyPlugin';
-	console.log( 'Plugin name is ', pluginName );
-} )();
-```
-
-And this is `second.js`:
-
-```js
-( function () {
-	var pluginName = 'DifferentPlugin';
-	console.log( 'Plugin name is ', pluginName );
-} )();
-```
-
-And this is `third.js`:
-
-```js
-( function () {
-	console.log( 'Plugin name is ', pluginName );
-} )();
-```
-
-The code in `first.js` and `second.js` is unaffected by other variables in the global scope, so it's safe and deterministic.
-
-On the other hand, `third.js` doesn't declare a `pluginName` variable, but needs to be provided one. IIFEs still allow you to take a variable from the global scope and pass it into your function. Provided that there was a global `window.pluginName` variable, we could rewrite `third.js` as:
-
-```js
-( function ( name ) {
-	console.log( 'Plugin name is ', name );
-} )( window.pluginName );
-```
-
-## Future Changes
-
-At the beginning we mentioned that:
-
-> Historically, JavaScript files loaded in a web page share the same scope.
-
-Notice the _historically_.
-
-JavaScript has evolved quite a bit since its creation. As of 2015, the language supports modules, also known as _ES6 modules_, that introduce separate scope per file: a global variable in `first.js` wouldn't be exposed to `second.js`. This feature is already [supported by modern browsers](https://caniuse.com/#feat=es6-module), but not all of them do. If your code needs to run in browsers that don't support modules, your last resort is using IIFEs.
diff --git a/docs/how-to-guides/javascript/troubleshooting.md b/docs/how-to-guides/javascript/troubleshooting.md
deleted file mode 100644
index 99484054d7b012..00000000000000
--- a/docs/how-to-guides/javascript/troubleshooting.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Troubleshooting
-
-If you're having trouble getting your JavaScript code to work, here are a few tips on how to find errors to help you troubleshoot.
-
-## Console Log
-
-The console log is a JavaScript developer's best friend. It is a good practice to work with it open, as it displays errors and notices in one place. See Mozilla's [JavaScript console](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console) documentation for more.
-
-To open the JavaScript console, find the correct key combination for your browser and OS:
-
-| Browser | Windows      | Linux        | Mac       |
-| ------- | ------------ | ------------ | --------- |
-| Firefox | Ctrl+Shift+K | Ctrl+Shift+K | Cmd+Opt+K |
-| Chrome  | Ctrl+Shift+J | Ctrl+Shift+J | Cmd+Opt+J |
-| Edge    | Ctrl+Shift+J | Ctrl+Shift+J | Cmd+Opt+J |
-| Safari  |              |              | Cmd+Opt+C |
-
-### First Step
-
-Your first step in debugging should be to check the JavaScript console for any errors. Here is an example, which shows a syntax error on line 6:
-
-![console error](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/js-tutorial-console-log-error.png)
-
-### Display your message in console log
-
-You can also write directly to the console from your JavaScript code for debugging and checking variable values. Use the `console.log` function like so:
-
-```js
-console.log( 'My message' );
-```
-
-Or if you want to include a message and variable, in this case display the contents of settings variable:
-
-```js
-console.log( 'Settings value:', settings );
-```
-
-### Using console log
-
-You can also write JavaScript directly in the console if you want to test a short command. The commands you run apply to the open browser window. Try this example with the [wp.data package](/packages/data/README.md) to count how many blocks are in the editor. Play with it and also try to use the console to browse available functions.
-
-```js
-wp.data.select( 'core/block-editor' ).getBlockCount();
-```
-
-![JavaScript example command](https://developer.wordpress.org/files/2020/07/js-console-cmd.gif)
-
-### Using the `debugger` statement
-
-If you would like to pause code execution at a certain line of code, you can write `debugger;` anywhere in your code. Once the browser sees the statement `debugger;`, it will pause execution of your code. This allows you to inspect all variables around the `debugger` statement, which is very useful. [See this MDN page for more information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger).
-
-## Confirm JavaScript is loading
-
-If you are not seeing your changes, and no errors, check that your JavaScript file is being enqueued. Open the page source in your browser's web inspector (some browsers may allow you to view the page source by right clicking on the page and selecting "View Page Source"), and look for the `<script>` tag that loads your file. In the JavaScript tutorial example, you would search for `myguten.js` and confirm it is being loaded.
-
-If you do not see the file being loaded, double check the enqueue function is correct. You can also check your server logs to see if there is an error messages.
-
-Add a test message to confirm your JavaScript is loading, add a `console.log("Here");` at the top of your code, and confirm the message is shown. If not, it is likely the file is not loading properly, [review the loading JavaScript page](/docs/how-to-guides/javascript/loading-javascript.md) for details on enqueuing JavaScript properly.
-
-## Confirm all dependencies are loading
-
-The console log will show an error if a dependency your JavaScript code uses has not been declared and loaded in the browser. In the JavaScript tutorial example, if `myguten.js` script is enqueued without declaring the `wp-blocks` dependency, the console log will show:
-
-<img src="https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/js-tutorial-error-blocks-undefined.png" width=448 title="error wp.blocks is undefined"/>
-
-You can correct by checking your `wp_enqueue_script` function includes all packages listed that are used:
-
-```js
-wp_enqueue_script(
-	'myguten-script',
-	plugins_url( 'myguten.js', __FILE__ ),
-	array( 'wp-blocks' )
-);
-```
-
-For automated dependency management, it is recommended to [use wp-scripts to build step your JavaScript](/docs/how-to-guides/javascript/js-build-setup.md#dependency-management).
diff --git a/docs/how-to-guides/javascript/versions-and-building.md b/docs/how-to-guides/javascript/versions-and-building.md
deleted file mode 100644
index 257b73c6866f16..00000000000000
--- a/docs/how-to-guides/javascript/versions-and-building.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# JavaScript Versions and Build Step
-
-The Block Editor Handbook shows JavaScript examples in two syntaxes: JSX and Plain.
-
-Plain refers to JavaScript code compatible with WordPress's minimum [target for browser support](https://make.wordpress.org/core/handbook/best-practices/browser-support/) without requiring a transpilation step. This step is commonly referred to as a build process.
-
-"JSX" doesn't refer to a specific version of JavaScript, but refers to the latest language definition plus
-[JSX syntax](https://reactjs.org/docs/introducing-jsx.html), a syntax that blends HTML and JavaScript. JSX makes it easier to read and write markup code, but does require a build step to transpile into code compatible with browsers. Webpack and babel are the tools that perform this transpilation step.
-
-For simplicity, the JavaScript tutorial uses the Plain definition, without JSX. This code can run straight in your browser and does not require an additional build step. In many cases, it is perfectly fine to follow the same approach for simple plugins or experimenting. As your codebase grows in complexity it might be a good idea to switch to JSX. You will find the majority of code and documentation across the block editor uses JSX.
-
-See the [JavaScript Build Setup documentation](/docs/how-to-guides/javascript/js-build-setup.md) for setting up a development environment using JSX syntax.
-
-See the [ESNext syntax documentation](/docs/how-to-guides/javascript/esnext-js.md) for explanation and examples about common code differences between standard JavaScript and more modern approaches.
diff --git a/docs/how-to-guides/metabox.md b/docs/how-to-guides/metabox.md
index 382afd602ed3de..707505d165c7fa 100644
--- a/docs/how-to-guides/metabox.md
+++ b/docs/how-to-guides/metabox.md
@@ -8,7 +8,7 @@ The block editor does support most existing meta boxes, see [the backward compat
 
 If you are interested in working with the post meta outside the editor, check out the [Sidebar Tutorial](/docs/how-to-guides/sidebar-tutorial/plugin-sidebar-0.md).
 
-### Use Blocks to Store Meta
+### Use blocks to store meta
 
 Typically, blocks store attribute values in the serialized block HTML. However, you can also create a block that saves its attribute values as post meta, that can be accessed programmatically anywhere in your template.
 
@@ -16,9 +16,9 @@ This guide shows how to create a block that prompts a user for a single value, a
 
 ## Before you start
 
-This guide assumes you are already familiar with WordPress plugins, post meta, and basic JavaScript. Review the [Getting started with JavaScript tutorial](/docs/how-to-guides/javascript/README.md) for an introduction.
+This guide assumes you are already familiar with WordPress plugins, post meta, and basic JavaScript. Review the [Getting started with JavaScript tutorial](/docs/getting-started/fundamentals/javascript-in-the-block-editor.md) for an introduction.
 
-The guide will walk through creating a basic block, but recommended to go through the [Create Block tutorial](/docs/getting-started/create-block/README.md) for a deeper understanding of creating custom blocks.
+The guide will walk through creating a basic block, but recommended to go through the [Create Block tutorial](/docs/getting-started/tutorial.md) for a deeper understanding of creating custom blocks.
 
 You will need:
 
@@ -26,7 +26,7 @@ You will need:
 -   A minimal plugin activated and ready to edit
 -   JavaScript setup for building and enqueuing
 
-A [complete meta-block example](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/meta-block) is available that you can use as a reference for your setup.
+A [complete meta-block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/meta-block-bb1e55) is available that you can use as a reference for your setup.
 
 ## Step-by-step guide
 
@@ -35,7 +35,7 @@ A [complete meta-block example](https://github.com/WordPress/gutenberg-examples/
 3. [Use Post Meta Data](#step-3-use-post-meta-data)
 4. [Finishing Touches](#step-4-use-block-templates-optional)
 
-### Step 1: Register Meta Field
+### Step 1: Register meta field
 
 A post meta field is a WordPress object used to store extra data about a post. You need to first register a new meta field prior to use. See Managing [Post Metadata](https://developer.wordpress.org/plugins/metadata/managing-post-metadata/) to learn more about post meta.
 
@@ -58,7 +58,7 @@ function myguten_register_post_meta() {
 add_action( 'init', 'myguten_register_post_meta' );
 ```
 
-### Step 2: Add Meta Block
+### Step 2: Add meta block
 
 With the meta field registered in the previous step, next create a new block to display the field value to the user.
 
@@ -91,6 +91,8 @@ registerBlockType( 'myguten/meta-block', {
 		return (
 			<div { ...blockProps }>
 				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize				
 					label="Meta Block Field"
 					value={ metaFieldValue }
 					onChange={ updateMetaValue }
@@ -107,18 +109,17 @@ registerBlockType( 'myguten/meta-block', {
 } );
 ```
 
-Confirm this works by creating a post and add the Meta Block. You will see your field that you can type a value in. When you save the post, either as a draft or published, the post meta value will be saved too. You can verify by
-saving and reloading your draft, the form will still be filled in on reload.
+Confirm this works by creating a post and add the Meta Block. You will see your field that you can type a value in. When you save the post, either as a draft or published, the post meta value will be saved too. You can verify by saving and reloading your draft, the form will still be filled in on reload.
 
 You could also confirm the data is saved by checking the database table `wp_postmeta` and confirm the new post id contains the new field data.
 
 **Troubleshooting**: Be sure to build your code between changes, you updated the PHP code from Step 1, and JavaScript files are enqueued. Check the build output and developer console for errors.
 
-### Step 3: Use Post Meta Data
+### Step 3: Use post meta data
 
 You can use the post meta data stored in the last step in multiple ways.
 
-#### Use Post Meta in PHP
+#### Use post meta in PHP
 
 The first example uses the value from the post meta field and appends it to the end of the post content wrapped in a `H4` tag.
 
@@ -134,7 +135,7 @@ function myguten_content_filter( $content ) {
 add_filter( 'the_content', 'myguten_content_filter' );
 ```
 
-#### Use Post Meta in Block
+#### Use post meta in a block
 
 You can also use the post meta data in other blocks. For this example the data is loaded at the end of every Paragraph block when it is rendered, ie. shown to the user. You can replace this for any core or custom block types as needed.
 
@@ -152,12 +153,12 @@ function myguten_render_paragraph( $block_attributes, $content ) {
 }
 
 register_block_type( 'core/paragraph', array(
-	'api_version' => 2,
+	'api_version' => 3,
 	'render_callback' => 'myguten_render_paragraph',
 ) );
 ```
 
-### Step 4: Use Block Templates (optional)
+### Step 4: Use block templates (optional)
 
 One problem using a meta block is the block is easy for an author to forget, since it requires being added to each post. You solve this by using [block templates](/docs/reference-guides/block-api/block-templates.md). A block template is a predefined list of block items per post type. Templates allow you to specify a default initial state for a post type.
 
@@ -181,9 +182,9 @@ You can also add other block types in the array, including placeholders, or even
 
 This guide showed how using blocks you can read and write to post meta. See the section below for backward compatibility with existing meta boxes.
 
-## Backward Compatibility
+## Backward compatibility
 
-### Testing, Converting, and Maintaining Existing Meta Boxes
+### Testing, converting, and maintaining existing meta boxes
 
 Before converting meta boxes to blocks, it may be easier to test if a meta box works with the block editor, and explicitly mark it as such.
 
@@ -213,7 +214,7 @@ add_meta_box( 'my-meta-box', 'My Meta Box', 'my_meta_box_callback',
 
 When the block editor is used, this meta box will no longer be displayed in the meta box area, as it now only exists for backward compatibility purposes. It will display as before in the classic editor.
 
-### Meta Box Data Collection
+### Meta box data collection
 
 On each block editor page load, we register an action that collects the meta box data to determine if an area is empty. The original global state is reset upon collection of meta box data.
 
@@ -227,14 +228,14 @@ Then each location for this particular type of meta box is checked for whether i
 
 Ideally, this could be done at instantiation of the editor and help simplify this flow. However, it is not possible to know the meta box state before `admin_enqueue_scripts`, where we are calling `initializeEditor()`. This will have to do, unless we want to move `initializeEditor()` to fire in the footer or at some point after `admin_head`. With recent changes to editor bootstrapping this might now be possible. Test with ACF to make sure.
 
-### Redux and React Meta Box Management
+### Redux and React meta box management
 
 When rendering the block editor, the meta boxes are rendered to a hidden div `#metaboxes`.
 
 _The Redux store will hold all meta boxes as inactive by default_. When
 `INITIALIZE_META_BOX_STATE` comes in, the store will update any active meta box areas by setting the `isActive` flag to `true`. Once this happens React will check for the new props sent in by Redux on the `MetaBox` component. If that `MetaBox` is now active, instead of rendering null, a `MetaBoxArea` component will be rendered. The `MetaBox` component is the container component that mediates between the `MetaBoxArea` and the Redux Store. _If no meta boxes are active, nothing happens. This will be the default behavior, as all core meta boxes have been stripped._
 
-#### MetaBoxArea Component
+#### MetaBoxArea component
 
 When the component renders it will store a reference to the meta boxes container and retrieve the meta boxes HTML from the prefetch location.
 
@@ -244,13 +245,13 @@ When the meta box area is saving, we display an updating overlay, to prevent use
 
 An example save url would look like:
 
-`mysite.com/wp-admin/post.php?post=1&action=edit&meta-box-loader=1`
+`example.org/wp-admin/post.php?post=1&action=edit&meta-box-loader=1`
 
 This url is automatically passed into React via a `_wpMetaBoxUrl` global variable.
 
 This page mimics the `post.php` post form, so when it is submitted it will fire all of the normal hooks and actions, and have the proper global state to correctly fire any PHP meta box mumbo jumbo without needing to modify any existing code. On successful submission, React will signal a `handleMetaBoxReload` to remove the updating overlay.
 
-### Common Compatibility Issues
+### Common compatibility issues
 
 Most PHP meta boxes should continue to work in the block editor, but some meta boxes that include advanced functionality could break. Here are some common reasons why meta boxes might not work as expected in the block editor:
 
@@ -259,3 +260,7 @@ Most PHP meta boxes should continue to work in the block editor, but some meta b
 -   Plugins making updates to their DOM on "submit" or on "save".
 
 Please also note that if your plugin triggers a PHP warning or notice to be output on the page, this will cause the HTML document type (`<!DOCTYPE html>`) to be output incorrectly. This will cause the browser to render using "Quirks Mode", which is a compatibility layer that gets enabled when the browser doesn't know what type of document it is parsing. The block editor is not meant to work in this mode, but it can _appear_ to be working just fine. If you encounter issues such as _meta boxes overlaying the editor_ or other layout issues, please check the raw page source of your document to see that the document type definition is the first thing output on the page. There will also be a warning in the JavaScript console, noting the issue.
+
+## Additional resources
+
+- [Creating a custom block that stores post meta](https://developer.wordpress.org/news/2023/03/03/creating-a-custom-block-that-stores-post-meta/)
diff --git a/docs/how-to-guides/notices/README.md b/docs/how-to-guides/notices/README.md
index 4b9a32c664a96c..15895e2bd32131 100644
--- a/docs/how-to-guides/notices/README.md
+++ b/docs/how-to-guides/notices/README.md
@@ -71,9 +71,9 @@ To better understand the specific code example above:
 -   `wp.data.dispatch('core/notices')` accesses functionality registered to the block editor data store by the Notices package.
 -   `createNotice()` is a function offered by the Notices package to register a new notice. The block editor reads from the notice data store in order to know which notices to display.
 
-Check out the [_Loading JavaScript_](/docs/how-to-guides/javascript/loading-javascript.md) tutorial for a primer on how to load your custom JavaScript into the block editor.
+Check out the [_Enqueueing assets in the Editor_](/docs/how-to-guides/enqueueing-assets-in-the-editor.md) tutorial for a primer on how to load your custom JavaScript into the block editor.
 
-## Learn More
+## Learn more
 
 The block editor offers a complete API for generating notices. The official documentation is a great place to review what's possible.
 
diff --git a/docs/how-to-guides/platform/README.md b/docs/how-to-guides/platform/README.md
index f63f8b6a5cbb1c..731ae26a1ead58 100644
--- a/docs/how-to-guides/platform/README.md
+++ b/docs/how-to-guides/platform/README.md
@@ -2,7 +2,7 @@
 
 The Gutenberg Project is not only building a better editor for WordPress, but also creating a platform to build upon. This platform consists of a set of JavaScript packages and tools that you can use in your web application. [View the list of packages available on npm](https://www.npmjs.com/org/wordpress).
 
-## UI Components
+## UI components
 
 The [WordPress Components package](/packages/components/README.md) contains a set of UI components you can use in your project. See the [WordPress Storybook site](https://wordpress.github.io/gutenberg/) for an interactive guide to the available components and settings.
 
@@ -26,7 +26,7 @@ function MyApp() {
 
 Many components include CSS to add style, you will need to include for the components to appear correctly. The component stylesheet can be found in `node_modules/@wordpress/components/build-style/style.css`, you can link directly or copy and include it in your project.
 
-## Development Scripts
+## Development scripts
 
 The [`@wordpress/scripts` package](/packages/scripts/README.md) is a collection of reusable scripts for JavaScript development — includes scripts for building, linting, and testing — all with no additional configuration files.
 
@@ -57,4 +57,5 @@ For more info, see the [Getting Started with JavaScript tutorial](/docs/how-to-g
 
 The [`@wordpress/block-editor` package](https://developer.wordpress.org/block-editor/packages/packages-block-editor/) allows you to create and use standalone block editors.
 
-You can learn more by reading the [tutorial "Building a custom block editor"](/docs/how-to-guides/platform/custom-block-editor/README.md).
+You can learn more by reading the [tutorial "Building a custom block editor"](/docs/how-to-guides/platform/custom-block-editor.md).
+
diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
new file mode 100644
index 00000000000000..e100820ea0e8b6
--- /dev/null
+++ b/docs/how-to-guides/platform/custom-block-editor.md
@@ -0,0 +1,545 @@
+# Building a custom block editor
+
+The WordPress block editor is a powerful tool that allows you to create and format content in various ways. It is powered, in part, by the [`@wordpress/block-editor`](/packages/block-editor/README.md) package, which is a JavaScript library that provides the core functionality of the editor.
+
+This package can also be used to create custom block editors for virtually any other web application. This means that you can use the same blocks and block editing experience outside of WordPress.
+
+![alt text](https://developer.wordpress.org/files/2023/07/custom-block-editor.png 'The Standalone Editor instance populated with example Blocks within a custom WordPress admin page.')
+
+This flexibility and interoperability makes blocks a powerful tool for building and managing content across multiple applications. It also makes it simpler for developers to create content editors that work best for their users.
+
+This guide covers the basics of creating your first custom block editor.
+
+## Introduction
+
+With its many packages and components, the Gutenberg codebase can be daunting at first. But at its core, it's all about managing and editing blocks. So if you want to work on the editor, it's essential to understand how block editing works at a fundamental level.
+
+This guide will walk you through building a fully functioning, custom block editor "instance" within WordPress. Along the way, we'll introduce you to the key packages and components, so you can see how the block editor works under the hood.
+
+By the end of this article, you will have a solid understanding of the block editor's inner workings and be well on your way to creating your own block editor instances.
+
+<div class="callout callout-tip">
+	The code used throughout this guide is available for download in the <a href="https://github.com/getdave/standalone-block-editor">accompanying WordPress plugin</a>. The demo code in this plugin as an essential resource.
+</div>
+
+## Code syntax
+
+The code snippets in this guide use JSX syntax. However, you could use plain JavaScript if you prefer. However, once familiar with JSX, many developers find it easier to read and write, so all code examples in the Block Editor Handbook use this syntax.
+
+## What you're going to be building
+
+Throughout this guide, you will create an (almost) fully functioning block editor instance. The result will look something like this:
+
+![The Standalone Editor instance populated with example Blocks within a custom WordPress admin page](https://developer.wordpress.org/files/2023/07/custom-block-editor.png)
+
+While it looks similar, this editor will not be the same _Block Editor_ you are familiar with when creating posts and pages in WordPress. Instead, it will be an entirely custom instance that will live within a custom WordPress admin page called "Block Editor."
+
+The editor will have the following features:
+
+-   Ability to add and edit all Core blocks.
+-   Familiar visual styles and main/sidebar layout.
+-   _Basic_ block persistence between page reloads.
+
+## Plugin setup and organization
+
+The custom editor is going to be built as a WordPress plugin. To keep things simple, the plugin will be named `Standalone Block Editor Demo` because that is what it does.
+
+The plugin file structure will look like this:
+
+![alt text](https://wordpress.org/gutenberg/files/2020/03/repo-files.png 'Screenshot showing file structure of the Plugin at https://github.com/getdave/standalone-block-editor.')
+
+Here is a brief summary of what's going on:
+
+-   `plugin.php` – Standard plugin "entry" file with comment meta data, which requires `init.php`.
+-   `init.php` - Handles the initialization of the main plugin logic.
+-   `src/` (directory) - This is where the JavaScript and CSS source files will live. These files are _not_ directly enqueued by the plugin.
+-   `webpack.config.js` - A custom Webpack config extending the defaults provided by the [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) npm package to allow for custom CSS styles (via Sass).
+
+The only item not shown above is the `build/` directory, which is where the _compiled_ JS and CSS files are outputted by `@wordpress/scripts`. These files are enqueued by the plugin separately.
+
+<div class="callout callout-info">
+	Throughout this guide, filename references will be placed in a comment at the top of each code snippet so you can follow along.
+</div>
+
+With the basic file structure in place, let's look at what packages will be needed.
+
+## The "Core" of the editor
+
+While the WordPress Editor is comprised of many moving parts, at its core is the [`@wordpress/block-editor`](/packages/block-editor/README.md) package, which is best summarized by its own `README` file:
+
+> This module allows you to create and use standalone block editors.
+
+Perfect, this is the main package you will use to create the custom block editor instance. But first, you need to create a home for the editor.
+
+## Creating the custom "Block Editor" page
+
+Let's begin by creating a custom page within WordPress admin that will house the custom block editor instance.
+
+<div class="callout callout-info">
+	If you're already comfortable with the process of creating custom admin pages in WordPress, you might want to <a href="#registering-and-rendering-our-custom-block-editor">skip ahead</a>.
+</div>
+
+### Registering the page
+
+To do this, you need to [register a custom admin page](https://developer.wordpress.org/reference/functions/add_menu_page/) using the standard WordPress [`add_menu_page()`](https://developer.wordpress.org/reference/functions/add_menu_page/) helper:
+
+```php
+// File: init.php
+
+add_menu_page(
+    'Standalone Block Editor',         // Visible page name
+    'Block Editor',                    // Menu label
+    'edit_posts',                      // Required capability
+    'getdavesbe',                      // Hook/slug of page
+    'getdave_sbe_render_block_editor', // Function to render the page
+    'dashicons-welcome-widgets-menus'  // Custom icon
+);
+```
+
+The `getdave_sbe_render_block_editor` function will be used to render the contents of the admin page. As a reminder, the source code for each step is available in the [accompanying plugin](https://github.com/getdave/standalone-block-editor).
+
+### Adding the target HTML
+
+Since the block editor is a React-powered application, you need to output some HTML into the custom page where JavaScript can render the block editor.
+
+Let's use the `getdave_sbe_render_block_editor` function referenced in the step above.
+
+```php
+// File: init.php
+
+function getdave_sbe_render_block_editor() {
+	?>
+	<div
+		id="getdave-sbe-block-editor"
+		class="getdave-sbe-block-editor"
+	>
+		Loading Editor...
+	</div>
+	<?php
+}
+```
+
+The function outputs some basic placeholder HTML. Note the `id` attribute `getdave-sbe-block-editor`, which will be used shortly.
+
+### Enqueuing JavaScript and CSS
+
+With the target HTML in place, you can now enqueue some JavaScript and CSS so that they will run on the custom admin page.
+
+To do this, let's hook into [`admin_enqueue_scripts`](https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/).
+
+First, you must ensure the custom code is only run on the custom admin page. So, at the top of the callback function, exit early if the page doesn't match the page's identifier:
+
+```php
+// File: init.php
+
+function getdave_sbe_block_editor_init( $hook ) {
+
+    // Exit if not the correct page.
+	if ( 'toplevel_page_getdavesbe' !== $hook ) {
+		return;
+    }
+}
+
+add_action( 'admin_enqueue_scripts', 'getdave_sbe_block_editor_init' );
+```
+
+With this in place, you can then safely register the main JavaScript file using the standard WordPress [`wp_enqueue_script()`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) function:
+
+```php
+// File: init.php
+
+wp_enqueue_script( $script_handle, $script_url, $script_asset['dependencies'], $script_asset['version'] );
+```
+
+To save time and space, the `$script_` variables assignment has been omitted. You can [review these here](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/init.php#L19).
+
+Note the third argument for script dependencies, `$script_asset['dependencies']`. These dependencies are
+dynamically generated using [@wordpress/dependency-extraction-webpack-plugin](https://developer.wordpress.org/block-editor/packages/packages-dependency-extraction-webpack-plugin/) which will
+[ensure that](https://developer.wordpress.org/block-editor/packages/packages-scripts/#default-webpack-config) WordPress provided scripts are not included in the built
+bundle.
+
+You also need to register both your custom CSS styles and the WordPress default formatting library to take advantage of some nice default styling:
+
+```php
+// File: init.php
+
+// Enqueue default editor styles.
+wp_enqueue_style( 'wp-format-library' );
+
+// Enqueue custom styles.
+wp_enqueue_style(
+    'getdave-sbe-styles',                       // Handle
+    plugins_url( 'build/index.css', __FILE__ ), // Block editor CSS
+    array( 'wp-edit-blocks' ),                  // Dependency to include the CSS after it
+    filemtime( __DIR__ . '/build/index.css' )
+);
+```
+
+### Inlining the editor settings
+
+Looking at the `@wordpress/block-editor` package, you can see that it accepts a [settings object](https://github.com/WordPress/gutenberg/tree/4c472c3443513d070a50ba1e96f3a476861447b3/packages/block-editor#SETTINGS_DEFAULTS) to configure the default settings for the editor. These are available on the server side, so you need to expose them for use within JavaScript.
+
+To do this, let's [inline the settings object as JSON](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/init.php#L48) assigned to the global `window.getdaveSbeSettings` object:
+
+```php
+// File: init.php
+
+// Get custom editor settings.
+$settings = getdave_sbe_get_block_editor_settings();
+
+// Inline all settings.
+wp_add_inline_script( $script_handle, 'window.getdaveSbeSettings = ' . wp_json_encode( $settings ) . ';' );
+```
+
+## Registering and rendering the custom block editor
+
+With the PHP above in place to create the admin page, you’re now finally ready to use JavaScript to render a block editor into the page’s HTML.
+
+Begin by opening the main `src/index.js` file. Then pull in the required JavaScript packages and import the CSS styles. Note that using Sass requires [extending](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/webpack.config.js#L13) the default `@wordpress/scripts` Webpack config.
+
+```js
+// File: src/index.js
+
+// External dependencies.
+import { createRoot } from 'react-dom';
+
+// WordPress dependencies.
+import domReady from '@wordpress/dom-ready';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+// Internal dependencies.
+import Editor from './editor';
+import './styles.scss';
+```
+
+Next, once the DOM is ready you will need to run a function which:
+
+- Grabs the editor settings from `window.getdaveSbeSettings` (previously inlined from PHP).
+- Registers all the Core WordPress blocks using `registerCoreBlocks`.
+- Renders an `<Editor>` component into the waiting `<div>` on the custom admin page.
+
+```jsx
+domReady( function () {
+	const root = createRoot( document.getElementById( 'getdave-sbe-block-editor' ) );
+	const settings = window.getdaveSbeSettings || {};
+	registerCoreBlocks();
+	root.render(
+		<Editor settings={ settings } />
+	);
+} );
+```
+
+<div class="callout callout-info">
+	It is possible to render the editor from PHP without creating an unnecessary JS global. Check out the <a href="https://href.li/?https://github.com/WordPress/gutenberg/blob/c6821d7e64a54eb322583a35daedc6c192ece850/lib/edit-site-page.php#L135">Edit Site</a> package in the Gutenberg plugin for an example of this.
+</div>
+
+## Reviewing the `<Editor>` component
+
+Let's take a closer look at the `<Editor>` component that was used in the code above and lives in `src/editor.js` of the [companion plugin](https://github.com/getdave/standalone-block-editor).
+
+Despite its name, this is not the actual core of the block editor. Rather, it is a _wrapper_ component that will contain the components that form the custom editor's main body.
+
+### Dependencies
+
+The first thing to do inside `<Editor>` is to pull in some dependencies.
+
+```jsx
+// File: src/editor.js
+
+import Notices from 'components/notices';
+import Header from 'components/header';
+import Sidebar from 'components/sidebar';
+import BlockEditor from 'components/block-editor';
+```
+
+The most important of these are the internal components `BlockEditor` and `Sidebar`, which will be covered shortly.
+
+The remaining components consist mostly of static elements that form the editor's layout and surrounding user interface (UI). These elements include the header and notice areas, among others.
+
+### Editor render
+
+With these components available, you can define the `<Editor>` component.
+
+```jsx
+// File: src/editor.js
+
+function Editor( { settings } ) {
+	return (
+		<DropZoneProvider>
+			<div className="getdavesbe-block-editor-layout">
+				<Notices />
+				<Header />
+				<Sidebar />
+				<BlockEditor settings={ settings } />
+			</div>
+		</DropZoneProvider>
+	);
+}
+```
+
+In this process, the core of the editor's layout is being scaffolded, along with a few specialized [context providers](https://react.dev/reference/react/createContext#provider) that make specific functionality available throughout the component hierarchy.
+
+Let's examine these in more detail:
+
+-   `<DropZoneProvider>` – Enables the use of [dropzones for drag and drop functionality](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/drop-zone)
+-   `<Notices>` – Provides a "snack bar" Notice that will be rendered if any messages are dispatched to the `core/notices` store
+-   `<Header>` – Renders the static title "Standalone Block Editor" at the top of the editor UI
+-   `<BlockEditor>` – The custom block editor component
+
+### Keyboard navigation
+
+With this basic component structure in place, the only remaining thing left to do
+is wrap everything in the [`navigateRegions` HOC](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/higher-order/navigate-regions) to provide keyboard navigation between the different "regions" in the layout.
+
+```jsx
+// File: src/editor.js
+
+export default navigateRegions( Editor );
+```
+
+## The custom `<BlockEditor>`
+
+Now the core layouts and components are in place. It's time to explore the custom implementation of the block editor itself.
+
+The component for this is called `<BlockEditor>`, and this is where the magic happens.
+
+Opening `src/components/block-editor/index.js` reveals that it's the most complex component encountered thus far. A lot going on, so start by focusing on what is being rendered by the `<BlockEditor>` component:
+
+```js
+// File: src/components/block-editor/index.js
+
+return (
+	<div className="getdavesbe-block-editor">
+		<BlockEditorProvider
+			value={ blocks }
+			onInput={ updateBlocks }
+			onChange={ persistBlocks }
+			settings={ settings }
+		>
+			<Sidebar.InspectorFill>
+				<BlockInspector />
+			</Sidebar.InspectorFill>
+			<BlockCanvas height="400px" />
+		</BlockEditorProvider>
+	</div>
+);
+```
+
+The key components are `<BlockEditorProvider>` and `<BlockList>`. Let's examine these.
+
+### Understanding the `<BlockEditorProvider>` component
+
+[`<BlockEditorProvider>`](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/provider) is one of the most important components in the hierarchy. It establishes a new block editing context for a new block editor.
+
+As a result, it is _fundamental_ to the entire goal of this project.
+
+The children of `<BlockEditorProvider>` comprise the UI for the block editor. These components then have access to data (via `Context`), enabling them to _render_ and _manage_ the blocks and their behaviors within the editor.
+
+```jsx
+// File: src/components/block-editor/index.js
+
+<BlockEditorProvider
+	value={ blocks }           // Array of block objects
+	onInput={ updateBlocks }   // Handler to manage Block updates
+	onChange={ persistBlocks } // Handler to manage Block updates/persistence
+	settings={ settings }      // Editor "settings" object
+/>
+```
+
+#### `BlockEditor` props
+
+You can see that `<BlockEditorProvider>` accepts an array of (parsed) block objects as its `value` prop and, when there's a change detected within the editor, calls the `onChange` and/or `onInput` handler prop (passing the new Blocks as an argument).
+
+Internally it does this by subscribing to the provided `registry` (via the [`withRegistryProvider` HOC](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/provider/index.js#L158)), listening to block change events, determining whether the block changing was persistent, and then calling the appropriate `onChange|Input` handler accordingly.
+
+For the purposes of this simple project, these features allow you to:
+
+-   Store the array of current blocks in state as `blocks`.
+-   Update the `blocks` state in memory on `onInput` by calling the hook setter
+    `updateBlocks(blocks)`.
+-   Handle basic persistence of blocks into `localStorage` using `onChange`. This is [fired when block updates are considered "committed"](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/provider#onchange).
+
+It's also worth recalling that the component accepts a `settings` property. This is where you will add the editor settings inlined earlier as JSON within `init.php`. You can use these settings to configure features such as custom colors, available image sizes, and [much more](https://github.com/WordPress/gutenberg/tree/4c472c3443513d070a50ba1e96f3a476861447b3/packages/block-editor#SETTINGS_DEFAULTS).
+
+### Understanding the `<BlockList>` component
+
+Alongside `<BlockEditorProvider>` the next most interesting component is [`<BlockList>`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/block-list/index.js).
+
+This is one of the most important components as it's role is to **render a list of blocks into the editor**.
+
+It does this in part thanks to being placed as a child of `<BlockEditorProvider>`, which affords it full access to all information about the state of the current blocks in the editor.
+
+#### How does `BlockList` work?
+
+Under the hood, `<BlockList>` relies on several other lower-level components in order to render the list of blocks.
+
+The hierarchy of these components can be _approximated_ as follows:
+
+```jsx
+// Pseudo code for example purposes only.
+
+<BlockList>
+	/* renders a list of blocks from the rootClientId. */
+	<BlockListBlock>
+		/* renders a single block from the BlockList. */
+		<BlockEdit>
+			/* renders the standard editable area of a block. */
+			<Component /> /* renders the block UI as defined by its `edit()` implementation.
+			*/
+		</BlockEdit>
+	</BlockListBlock>
+</BlockList>
+```
+
+Here is roughly how this works together to render the list of blocks:
+
+-   `<BlockList>` loops over all the block `clientIds` and
+    renders each via [`<BlockListBlock />`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/block-list/block.js).
+-   `<BlockListBlock />`, in turn, renders the individual block
+    using its own subcomponent [`<BlockEdit>`](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-edit/index.js).
+-   Finally, the [block itself](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-edit/edit.js) is rendered using the `Component` placeholder component.
+
+The `@wordpress/block-editor` package components are among the most complex and involved. Understanding them is crucial if you want to grasp how the editor functions at a fundamental level. Studying these components is strongly advised.
+
+## Reviewing the sidebar
+
+Also within the render of the `<BlockEditor>`, is the `<Sidebar>` component.
+
+```jsx
+// File: src/components/block-editor/index.js
+
+return (
+    <div className="getdavesbe-block-editor">
+        <BlockEditorProvider>
+            <Sidebar.InspectorFill> /* <-- SIDEBAR */
+                <BlockInspector />
+            </Sidebar.InspectorFill>
+            <BlockCanvas height="400px" />
+        </BlockEditorProvider>
+    </div>
+);
+```
+
+This is used, in part, to display advanced block settings via the `<BlockInspector>` component.
+
+```jsx
+<Sidebar.InspectorFill>
+	<BlockInspector />
+</Sidebar.InspectorFill>
+```
+
+However, the keen-eyed readers amongst you will have already noted the presence of a `<Sidebar>` component within the `<Editor>` (`src/editor.js`) component's
+layout:
+
+```jsx
+// File: src/editor.js
+<Notices />
+<Header />
+<Sidebar /> // <-- What's this?
+<BlockEditor settings={ settings } />
+
+```
+
+Opening the `src/components/sidebar/index.js` file, you can see that this is, in fact, the component rendered within `<Editor>` above. However, the implementation utilises
+Slot/Fill to expose a `Fill` (`<Sidebar.InspectorFill>`), which is subsequently imported and rendered inside of the `<BlockEditor>` component (see above).
+
+With this in place, you then can render `<BlockInspector />` as a child of the `Sidebar.InspectorFill`. This has the result of allowing you to keep `<BlockInspector>` within the React context of `<BlockEditorProvider>` whilst allowing it to be rendered into the DOM in a separate location (i.e. in the `<Sidebar>`).
+
+This might seem overly complex, but it is required in order for `<BlockInspector>` to have access to information about the current block. Without Slot/Fill, this setup would be extremely difficult to achieve.
+
+And with that you have covered the render of you custom `<BlockEditor>`.
+
+<div class="callout callout-tip">
+<a href="https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-inspector/index.js"><code>&lt;BlockInspector&gt;</code></a>
+itself actually renders a <code>Slot</code> for <a href="https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inspector-controls"><code>&lt;InspectorControls&gt;</code></a>. This is what allows you <a href="https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-library/src/paragraph/edit.js#L127">render</a> a <code>&lt;InspectorControls>&gt;</code> component inside
+the <code>edit()</code> definition for your block and have
+it display within the editor's sidebar. Exploring this component in more detail is recommended.
+</div>
+
+## Block Persistence
+
+You have come a long way on your journey to create a custom block editor. But there is one major area left to touch upon - block persistence. In other words, having your
+blocks saved and available _between_ page refreshes.
+
+![alt text](https://developer.wordpress.org/files/2023/07/custom-block-editor-persistance.gif 'Screencapture showing blocks being restored between page refreshes.')
+
+As this is only an _experiment_, this guide has opted to utilize the browser's `localStorage` API to handle saving block data. In a real-world scenario, you would likely choose a more reliable and robust system (e.g. a database).
+
+That said, let's take a closer look at how to handle save blocks.
+
+### Storing blocks in state
+
+Looking at the `src/components/block-editor/index.js` file, you will notice that some state has been created to store the blocks as an array:
+
+```jsx
+// File: src/components/block-editor/index.js
+
+const [ blocks, updateBlocks ] = useState( [] );
+```
+
+As mentioned earlier, `blocks` is passed to the "controlled" component `<BlockEditorProvider>` as its `value` prop. This "hydrates" it with an initial set of blocks. Similarly, the `updateBlocks` setter is hooked up to the `onInput` callback on `<BlockEditorProvider>`, which ensures that the block state is kept in sync with changes made to blocks within the editor.
+
+### Saving block data
+
+If you now turn your attention to the `onChange` handler, you will notice it is hooked up to a function `persistBlocks()` which is defined as follows:
+
+```js
+// File: src/components/block-editor/index.js
+
+function persistBlocks( newBlocks ) {
+	updateBlocks( newBlocks );
+	window.localStorage.setItem( 'getdavesbeBlocks', serialize( newBlocks ) );
+}
+```
+
+This function accepts an array of "committed" block changes and calls the state setter `updateBlocks`. It also stores the blocks within LocalStorage under the key `getdavesbeBlocks`. In order to achieve this, the block data is serialized into [Gutenberg "Block Grammar"](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks) format, meaning it can be safely stored as a string.
+
+If you open DeveloperTools and inspect the LocalStorage you will see serialized block data stored and updated as changes occur within the editor. Below is an example of the format:
+
+```
+<!-- wp:heading -->
+<h2>An experiment with a standalone Block Editor in the WordPress admin</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is an experiment to discover how easy (or otherwise) it is to create a standalone instance of the Block Editor in the WordPress admin.</p>
+<!-- /wp:paragraph -->
+```
+
+### Retrieving previous block data
+
+Having persistence in place is all well and good, but it's only useful if that data is retrieved and _restored_ within the editor upon each full page reload.
+
+Accessing data is a side effect, so you must use the `useEffect` hook to handle this.
+
+```jsx
+// File: src/components/block-editor/index.js
+
+useEffect( () => {
+	const storedBlocks = window.localStorage.getItem( 'getdavesbeBlocks' );
+
+	if ( storedBlocks && storedBlocks.length ) {
+		updateBlocks( () => parse( storedBlocks ) );
+		createInfoNotice( 'Blocks loaded', {
+			type: 'snackbar',
+			isDismissible: true,
+		} );
+	}
+}, [] );
+```
+
+This handler:
+
+-   Grabs the serialized block data from local storage.
+-   Converts the serialized blocks back to JavaScript objects using the `parse()` utility.
+-   Calls the state setter `updateBlocks` causing the `blocks` value to be updated in state to reflect the blocks retrieved from LocalStorage.
+
+As a result of these operations, the controlled `<BlockEditorProvider>` component is updated with the blocks restored from LocalStorage, causing the editor to show these blocks.
+
+Finally, you will want to generate a notice - which will display in the `<Notice>` component as a "snackbar" notice - to indicate that the blocks have been restored.
+
+## Wrapping up
+
+Congratulations for completing this guide. You should now have a better understanding of how the block editor works under the hood. 
+
+The full code for the custom block editor you have just built is [available on GitHub](https://github.com/getdave/standalone-block-editor). Download and try it out for yourself. Experiment, then and take things even further.
diff --git a/docs/how-to-guides/platform/custom-block-editor/README.md b/docs/how-to-guides/platform/custom-block-editor/README.md
deleted file mode 100644
index b21907577c150e..00000000000000
--- a/docs/how-to-guides/platform/custom-block-editor/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Building a custom block editor
-
-The purpose of [this tutorial](/docs/how-to-guides/platform/custom-block-editor/tutorial.md) is to step through the fundamentals of creating a custom instance of a "block editor".
-
-![alt text](https://wordpress.org/gutenberg/files/2020/03/editor.png 'The Standalone Editor instance populated with example Blocks within a custom WP Admin page.')
-
-The editor you will see in this tutorial (as above) is **_not_ the same Block Editor you are familiar with when creating Posts** in with WordPress. Rather it is an entirely **custom block editor instance** built using the lower-level [`@wordpress/block-editor`](/packages/block-editor/README.md) package (and friends).
-
-## Following this tutorial
-
-To follow along with this tutorial, you can [download the accompanying WordPress plugin](https://github.com/getdave/standalone-block-editor) which includes all of the examples for you to try on your own site.
-
-## Code Syntax
-
-Code snippets are provided using JSX syntax. Note it is not required to use JSX to create blocks or extend the editor, you can use plain JavaScript. However, once familiar with JSX, many developers tend find it is easier to read and write, thus most code examples you'll find use that syntax.
-
--   [Start custom block editor tutorial](/docs/how-to-guides/platform/custom-block-editor/tutorial.md)
diff --git a/docs/how-to-guides/platform/custom-block-editor/tutorial.md b/docs/how-to-guides/platform/custom-block-editor/tutorial.md
deleted file mode 100644
index 1e49433da3e654..00000000000000
--- a/docs/how-to-guides/platform/custom-block-editor/tutorial.md
+++ /dev/null
@@ -1,623 +0,0 @@
-# Tutorial: building a custom block editor
-
-This tutorial will step through the fundamentals of creating a custom instance
-of a "block editor" using the `@wordpress/block-editor` package.
-
-## Table of Contents
-
--   [Introduction](#introduction).
--   [What we're going to be building](#what-were-going-to-be-building).
--   [Plugin setup and organization](#plugin-setup-and-organization).
--   [The "Core" of the Editor](#the-core-of-the-editor).
--   [Creating the custom "Block Editor" page in WP Admin](#creating-the-custom-block-editor-page-in-wp-admin).
--   [Registering and Rendering our custom block editor](#registering-and-rendering-our-custom-block-editor).
--   [Reviewing the `<Editor>` component](#reviewing-the-editor-component).
--   [The custom `<BlockEditor>`](#the-custom-blockeditor).
--   [Reviewing the Sidebar](#reviewing-the-sidebar).
--   [Block Persistence](#block-persistence).
--   [Wrapping up](#wrapping-up).
-
-## Introduction
-
-The Gutenberg codebase is complex, with many packages and components, but at its core it is a tool for managing and editing blocks. Therefore, when working on the editor it is important to gain a better understanding of how block editing works at a _fundamental_ level.
-
-To do this, this tutorial will walk you through building a **fully functioning, _custom_ block editor "instance"** within WordPress, introducing you to the key packages and components along the way.
-
-By the end of this article, you should have gained a good understanding of how the block editor works and some of the knowledge required to put together your own block editor instances.
-
-## What we're going to be building
-
-We're going to be creating an (almost) fully functioning Block Editor instance.
-
-![The Standalone Editor instance populated with example Blocks within a custom WP Admin page](https://wordpress.org/gutenberg/files/2020/03/editor.png)
-
-This block editor will not be the same _Block Editor_ you are familiar with when creating `Post`s in WP Admin. Rather it will be an entirely custom instance which will live within a custom WP Admin page called (imaginatively) "Block Editor".
-
-Our editor will have the following features:
-
--   Ability to add and edit all Core Blocks.
--   Familiar visual styles and main/sidebar layout.
--   _Basic_ block persistence between page reloads.
-
-With that in mind, let's start taking our first steps towards building this.
-
-## Plugin setup and organization
-
-Our custom editor is going to be built as a WordPress Plugin. To keep things simple. we'll call this `Standalone Block Editor Demo` because that is what it does. Nice!
-
-Let's take a look at our Plugin file structure:
-
-![alt text](https://wordpress.org/gutenberg/files/2020/03/repo-files.png 'Screenshot showing file structure of the Plugin at https://github.com/getdave/standalone-block-editor.')
-
-Here's a brief summary of what's going on:
-
--   `plugin.php` - standard Plugin "entry" file with comment meta data. Requires `init.php`.
--   `init.php` - handles the initialization of the main Plugin logic. We'll be spending a lot of time here.
--   `src/` (directory) - this is where our JavaScript (and CSS) source files will live. These files are _not_ directly enqueued by the Plugin.
--   `webpack.config.js` - a custom Webpack config extending the defaults provided by the `@wordpress/scripts` npm package to allow for custom CSS styles (via Sass).
-
-The only item not shown above is the `build/` directory, which is where our _compiled_ JS and CSS files will be outputted by `@wordpress/scripts` ready to be enqueued by our Plugin.
-
-**Note:** throughout this tutorial, filename references will be placed in a comment at the top of each code snippet so you can follow along.
-
-With our basic file structure in place, we can now start looking at what package we're going to need.
-
-## The "Core" of the Editor
-
-Whilst the Gutenberg Editor is comprised of many moving parts, at it's core is the `@wordpress/block-editor` package.
-
-It's role is perhaps best summarized by its own `README` file:
-
-> This module allows you to create and use standalone block editors.
-
-This is great and exactly what we need! Indeed, it is the main package we'll be using to create our custom block editor instance.
-
-However, before we can get to working with this package in code, we're going to need to create a home for our editor within WP Admin.
-
-## Creating the custom "Block Editor" page in WP Admin
-
-As a first step, we need to create a custom page within WP Admin.
-
-**Note**: if you're already comfortable with the process of creating custom Admin pages in WordPress you might want to [skip ahead](#registering-and-rendering-our-custom-block-editor).
-
-### Registering the Page
-
-To do this we [register our custom admin page](https://developer.wordpress.org/reference/functions/add_menu_page/) using the standard WP `add_menu_page()` helper:
-
-```php
-// init.php
-
-add_menu_page(
-    'Standalone Block Editor', // visible page name
-    'Block Editor', // menu label
-    'edit_posts', // required capability
-    'getdavesbe', // hook/slug of page
-    'getdave_sbe_render_block_editor', // function to render the page
-    'dashicons-welcome-widgets-menus' // custom icon
-);
-```
-
-Note the reference to a function `getdave_sbe_render_block_editor` which is the function which we will use to render the contents of the admin page.
-
-### Adding the target HTML
-
-As the block editor is a React powered application, we now need to output some HTML into our custom page into which the JavaScript can render the block editor.
-
-To do this we need to look at our `getdave_sbe_render_block_editor` function referenced in the step above.
-
-```php
-// init.php
-
-function getdave_sbe_render_block_editor() {
-	?>
-	<div
-		id="getdave-sbe-block-editor"
-		class="getdave-sbe-block-editor"
-	>
-		Loading Editor...
-	</div>
-	<?php
-}
-```
-
-Here we simply output some basic placeholder HTML.
-
-Note that we've included an `id` attribute `getdave-sbe-block-editor`. Keep a note of that, as we'll be using it shortly.
-
-### Enqueuing JavaScript and CSS
-
-With our target HTML in place we can now enqueue some JavaScript (as well as some CSS styles) so that they will run on our custom Admin page.
-
-To do this we hook into `admin_enqueue_scripts`.
-
-First, we need to make sure we only run our custom code on our own admin page, so at the top of our callback function let's exit early if the page doesn't match our page's identifier:
-
-```php
-// init.php
-
-function getdave_sbe_block_editor_init( $hook ) {
-
-    // Exit if not the correct page
-	if ( 'toplevel_page_getdavesbe' !== $hook ) {
-		return;
-    }
-}
-
-add_action( 'admin_enqueue_scripts', 'getdave_sbe_block_editor_init' );
-```
-
-With this in place, we can then safely register our main JavaScript file using the standard WP `wp_enqueue_script` function:
-
-```php
-// init.php
-
-wp_enqueue_script( $script_handle, $script_url, $script_asset['dependencies'], $script_asset['version'] );
-```
-
-To save time and space, the assignment of the `$script_` variables has been omitted. You can [review these here](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/init.php#L19).
-
-Note that we register our script dependencies (`$script_asset['dependencies']`) as the 3rd argument - these deps are being
-dynamically generated using [@wordpress/dependency-extraction-webpack-plugin](https://developer.wordpress.org/block-editor/packages/packages-dependency-extraction-webpack-plugin/) which will
-[ensure that WordPress provided scripts are not included in the built
-bundle](https://developer.wordpress.org/block-editor/packages/packages-scripts/#default-webpack-config).
-
-We also need to register both our custom CSS styles and the WordPress default formatting library in order take advantage of some nice default styling:
-
-```php
-// init.php
-
-// Editor default styles
-wp_enqueue_style( 'wp-format-library' );
-
-// Custom styles
-wp_enqueue_style(
-    'getdave-sbe-styles', // Handle.
-    plugins_url( 'build/index.css', __FILE__ ), // Block editor CSS.
-    array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
-    filemtime( __DIR__ . '/build/index.css' )
-);
-```
-
-### Inlining the editor settings
-
-Looking at the `@wordpress/block-editor` package, we can see that it [accepts a settings object to configure the default settings for the editor](https://github.com/WordPress/gutenberg/tree/4c472c3443513d070a50ba1e96f3a476861447b3/packages/block-editor#SETTINGS_DEFAULTS). These are available on the server side so we need to expose them for use within the JavaScript.
-
-To do this we [inline the settings object as JSON](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/init.php#L48) assigned to the global `window.getdaveSbeSettings` object:
-
-```php
-// init.php
-
-// Inline the Editor Settings
-$settings = getdave_sbe_get_block_editor_settings();
-wp_add_inline_script( $script_handle, 'window.getdaveSbeSettings = ' . wp_json_encode( $settings ) . ';' );
-```
-
-## Registering and Rendering our custom block editor
-
-With the PHP above in place to create our admin page, we’re now finally ready to use JavaScript to render a Block Editor into the page’s HTML.
-
-Let's open up our main `src/index.js` file.
-
-Here we first pull in required JS packages and import our CSS styles (note using Sass requires [extending the default `@wordpress/scripts` Webpack config](https://github.com/getdave/standalone-block-editor/blob/974a59dcbc539a0595e8fa34670e75ec541853ab/webpack.config.js#L13)).
-
-```js
-// src/index.js
-
-import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
-import { registerCoreBlocks } from '@wordpress/block-library';
-import Editor from './editor';
-
-import './styles.scss';
-```
-
-Next, once the DOM is ready we run a function which:
-
--   Grabs our editor settings from `window.getdaveSbeSettings` (inlined from PHP -
-    see above).
--   Registers all the Core Gutenberg Blocks using `registerCoreBlocks`.
--   Renders an `<Editor>` component into the waiting `<div>` on our custom Admin page.
-
-```jsx
-domReady( function () {
-	const settings = window.getdaveSbeSettings || {};
-	registerCoreBlocks();
-	render(
-		<Editor settings={ settings } />,
-		document.getElementById( 'getdave-sbe-block-editor' )
-	);
-} );
-```
-
-**Note**: it is possible to render the editor from PHP without creating an unnecessary JS global. Check out [the Edit Site package in Gutenberg Core for an example of this](https://href.li/?https://github.com/WordPress/gutenberg/blob/c6821d7e64a54eb322583a35daedc6c192ece850/lib/edit-site-page.php#L135).
-
-## Reviewing the `<Editor>` component
-
-Let's take a closer look at the `<Editor>` component we saw being used above.
-
-Despite its name, this _is not_ the actual core of the block editor. Rather it is a _wrapper_ component we've created to contain the components which form the main body of our custom editor.
-
-### Dependencies
-
-The first thing we do inside `<Editor>` is to pull in some dependencies.
-
-```jsx
-// src/editor.js
-
-import Notices from 'components/notices';
-import Header from 'components/header';
-import Sidebar from 'components/sidebar';
-import BlockEditor from 'components/block-editor';
-```
-
-The most important of these are the internal components `BlockEditor` and `Sidebar`, which we will explore in greater detail shortly.
-
-The remaining components are largely static elements which form the layout and surrounding UI of the editor (eg: header and notice areas).
-
-### Editor Render
-
-With these components available we can proceed to define our `<Editor>` component.
-
-```jsx
-// src/editor.js
-
-function Editor( { settings } ) {
-	return (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<div className="getdavesbe-block-editor-layout">
-					<Notices />
-					<Header />
-					<Sidebar />
-					<BlockEditor settings={ settings } />
-				</div>
-				<Popover.Slot />
-			</DropZoneProvider>
-		</SlotFillProvider>
-	);
-}
-```
-
-Here we are scaffolding the core of the editor's layout alongside a few specialised [context providers](https://reactjs.org/docs/context.html#contextprovider) which make particular functionality available throughout the component hierarchy.
-
-Let's examine these in more detail:
-
--   `<SlotFillProvider>` - enables the use of the ["Slot/Fill"
-    pattern](/docs/reference-guides/slotfills/README.md) through our component tree.
--   `<DropZoneProvider>` - enables the use of [dropzones for drag and drop functionality](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/drop-zone).
--   `<Notices>` - custom component. Provides a "snack bar" Notice that will be rendered if any messages are dispatched to `core/notices` store.
--   `<Header>` - renders the static title "Standalone Block Editor" at the top of the
-    editor UI.
--   `<BlockEditor>` - our custom block editor component. This is where things get
-    interesting. We'll focus a little more on this in a moment.
--   `<Popover.Slot />` - renders a slot into which `<Popover>`s can be rendered
-    using the Slot/Fill mechanic.
-
-### Keyboard Navigation
-
-With this basic component structure in place the only remaining thing left to do
-is wrap everything in [the `navigateRegions` HOC](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/higher-order/navigate-regions) to provide keyboard navigation between the different "regions" in the layout.
-
-```jsx
-// src/editor.js
-
-export default navigateRegions( Editor );
-```
-
-## The custom `<BlockEditor>`
-
-Now we have a our core layouts and components in place, it's time to explore our
-custom implementation of the block editor itself.
-
-The component for this is called `<BlockEditor>` and this is where the magic happens.
-
-Opening `src/components/block-editor/index.js` we see that this is the most
-complex of the components we have encountered thus far.
-
-There's a lot going on so let's break this down!
-
-### Understanding the render
-
-To start, let's focus on what is being rendered by the `<BlockEditor>` component:
-
-```js
-// src/components/block-editor/index.js
-
-return (
-	<div className="getdavesbe-block-editor">
-		<BlockEditorProvider
-			value={ blocks }
-			onInput={ updateBlocks }
-			onChange={ persistBlocks }
-			settings={ settings }
-		>
-			<Sidebar.InspectorFill>
-				<BlockInspector />
-			</Sidebar.InspectorFill>
-			<div className="editor-styles-wrapper">
-				<BlockEditorKeyboardShortcuts />
-				<WritingFlow>
-					<ObserveTyping>
-						<BlockList className="getdavesbe-block-editor__block-list" />
-					</ObserveTyping>
-				</WritingFlow>
-			</div>
-		</BlockEditorProvider>
-	</div>
-);
-```
-
-The key components to focus on here are `<BlockEditorProvider>` and `<BlockList>`. Let's examine these.
-
-### Understanding the `<BlockEditorProvider>` component
-
-[`<BlockEditorProvider>`](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/provider) is one of the most important components in the hierarchy. As we learnt earlier, it establishes a new block editing context for a new block editor.
-
-As a result, it is _fundamental_ to the entire goal of our project.
-
-The children of `<BlockEditorProvider>` comprise the UI for the block
-editor. These components then have access to data (via `Context`) which enables
-them to _render_ and _manage_ the Blocks and their behaviors within the editor.
-
-```jsx
-// src/components/block-editor/index.js
-
-<BlockEditorProvider
-	value={ blocks } // array of block objects
-	onInput={ updateBlocks } // handler to manage Block updates
-	onChange={ persistBlocks } // handler to manage Block updates/persistence
-	settings={ settings } // editor "settings" object
-/>
-```
-
-#### `BlockEditor` props
-
-We can see that `<BlockEditorProvider>` accepts array of (parsed) block objects as its `value` prop and, when there's a change detected within the editor, calls the `onChange` and/or `onInput` handler prop (passing the new Blocks as a argument).
-
-Internally it does this by subscribing to the provided `registry` (via the [`withRegistryProvider` HOC](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/provider/index.js#L158)), listening to block change events, determining whether Block changing was persistent, and then calling the appropriate `onChange|Input` handler accordingly.
-
-For the purposes of our simple project these features allow us to:
-
--   Store the array of current blocks in state as `blocks`.
--   Update the `blocks` state in memory on `onInput` by calling the hook setter
-    `updateBlocks(blocks)`.
--   Handle basic persistence of blocks into `localStorage` using `onChange`. This is [fired when block updates are considered
-    "committed"](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/provider#onchange).
-
-It's also worth recalling that the component accepts a `settings` prop. This accepts the editor settings which we inlined as JSON within `init.php` earlier. This configures features such as custom colors, available image sizes and [much more](https://github.com/WordPress/gutenberg/tree/4c472c3443513d070a50ba1e96f3a476861447b3/packages/block-editor#SETTINGS_DEFAULTS).
-
-### Understanding the `<BlockList>` component
-
-Alongside `<BlockEditorProvider>` the next most interesting component is [`<BlockList>`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/block-list/index.js).
-
-This is one of the most important components as it's role is to **render a list of Blocks into the editor**.
-
-It does this in part thanks to being placed as a child of `<BlockEditorProvider>` which affords it full access to all information about the state of the current Blocks in the editor.
-
-#### How does `BlockList` work?
-
-Under the hood `<BlockList>` relies on several other lower-level components in order to render the list of Blocks.
-
-The hierarchy of these components can be _approximated_ as follows:
-
-```jsx
-// Pseudo code - example purposes only
-
-<BlockList>
-	/* renders a list of Blocks from the rootClientId. */
-	<BlockListBlock>
-		/* renders a single "Block" from the BlockList. */
-		<BlockEdit>
-			/* renders the standard editable area of a Block. */
-			<Component /> /* renders the Block UI as defined by its `edit()` implementation.
-			*/
-		</BlockEdit>
-	</BlockListBlock>
-</BlockList>
-```
-
-Here's roughly how this works together to render our list of blocks:
-
--   `<BlockList>` loops over all the Block clientIds and
-    renders each via [`<BlockListBlock />`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/block-list/block.js).
--   `<BlockListBlock />` in turn renders the individual "Block"
-    via it's own subcomponent [`<BlockEdit>`](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-edit/index.js).
--   Finally [the Block itself](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-edit/edit.js) is rendered using the `Component` placeholder component.
-
-These are some of the most complex and involved components within the `@wordpress/block-editor` package. That said, if you want to have a strong grasp of how the editor works at a fundamental level, I strongly advise making a study of these components. I leave this as an exercise for the reader!
-
-### Utility components in our custom block editor
-
-Jumping back to our own custom `<BlockEditor>` component, it is also worth noting the following "utility" components:
-
-```js
-// src/components/block-editor/index.js
-
-<div className="editor-styles-wrapper">
-	<BlockEditorKeyboardShortcuts /> /* 1. */
-	<WritingFlow>
-		/* 2. */
-		<ObserveTyping>
-			/* 3. */
-			<BlockList className="getdavesbe-block-editor__block-list" />
-		</ObserveTyping>
-	</WritingFlow>
-</div>
-```
-
-These provide other important elements of functionality for our editor instance.
-
-1. [`<BlockEditorKeyboardShortcuts />`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/keyboard-shortcuts/index.js) - enables and usage of keyboard shortcuts within the editor.
-2. [`<WritingFlow>`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/writing-flow/index.js) - handles selection, focus management and navigation across blocks.
-3. [`<ObserveTyping>`](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/observe-typing)- used to manage the editor's internal `isTyping` flag. This is used in various places, most commonly to show/hide the Block toolbar in response to typing.
-
-## Reviewing the Sidebar
-
-Also within the render of our `<BlockEditor>`, is our `<Sidebar>` component.
-
-```jsx
-// src/components/block-editor/index.js
-
-return (
-    <div className="getdavesbe-block-editor">
-        <BlockEditorProvider>
-            <Sidebar.InspectorFill> /* <-- SIDEBAR */
-                <BlockInspector />
-            </Sidebar.InspectorFill>
-            <div className="editor-styles-wrapper">
-                // snip
-            </div>
-        </BlockEditorProvider>
-    </div>
-);
-```
-
-This is used - alongside other things - to display advanced Block settings via the `<BlockInspector>` component.
-
-```jsx
-<Sidebar.InspectorFill>
-	<BlockInspector />
-</Sidebar.InspectorFill>
-```
-
-However, the keen-eyed readers amongst you will have already noted the presence
-of a `<Sidebar>` component within our `<Editor>` (`src/editor.js`) component's
-layout:
-
-```jsx
-// src/editor.js
-<Notices />
-<Header />
-<Sidebar /> // <-- eh!?
-<BlockEditor settings={ settings } />
-
-```
-
-Opening `src/components/sidebar/index.js` we see that this is in fact the
-component rendered within `<Editor>` above. However, the implementation utilises
-Slot/Fill to expose a `Fill` (`<Sidebar.InspectorFill>`) which we subsequently
-`import` and render inside of our `<BlockEditor>` component (see above).
-
-With this in place, we then render `<BlockInspector />` as a child of the
-`Sidebar.InspectorFill`. This has the result of allowing us to keep
-`<BlockInspector>` within the React context of `<BlockEditorProvider>` whilst
-allowing it to be rendered into the DOM in a separate location (ie: in the `<Sidebar>`).
-
-This might seem overly complex, but it is required in order that
-`<BlockInspector>` can have access to information about the current Block.
-Without Slot/Fill this setup would be extremely difficult to achieve.
-
-Aside:
-[`<BlockInspector>`](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-editor/src/components/block-inspector/index.js)
-itself actually renders a `Slot` for [`<InspectorControls>`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inspector-controls). This is what allows you [render a `<InspectorControls>` component inside
-the `edit()` definition for your block](https://github.com/WordPress/gutenberg/blob/def076809d25e2ad680beda8b9205ab9dea45a0f/packages/block-library/src/paragraph/edit.js#L127) and have
-it display within Gutenberg's sidebar. I recommend looking into this component
-in more detail.
-
-And with that we have covered the render of our custom `<BlockEditor>`!
-
-## Block Persistence
-
-We've come a long way on our journey to create a custom block editor. But there is
-one major area left to touch upon - Block persistence; that is the act of having our
-Blocks saved and **available _between_ page refreshes**.
-
-![alt text](https://wordpress.org/gutenberg/files/2020/03/block-persistance.gif 'Screencapture showing added Blocks being restored between page refreshes.')
-
-As this is only an _experiment_ we've opted to utilise the browser's
-`localStorage` API to handle saving Block data. In a real-world scenario however
-you'd like choose a more reliable and robust system (eg: a database).
-
-That said, let's take a closer look at how we're handling saving our Blocks.
-
-### Storing blocks in state
-
-Opening `src/components/block-editor/index.js` we will notice we have created
-some state to store our Blocks as an array:
-
-```jsx
-// src/components/block-editor/index.js
-
-const [ blocks, updateBlocks ] = useState( [] );
-```
-
-As mentioned earlier, `blocks` is passed to the "controlled" component `<BlockEditorProvider>` as its `value` prop. This "hydrates" it with an initial set of Blocks. Similarly, the `updateBlocks` setter is hooked up to the `onInput` callback on `<BlockEditorProvider>` which ensures that our block state is kept in sync with changes made to blocks within the editor.
-
-### Saving Block data
-
-If we now turn our attention to the `onChange` handler, we will notice it is
-hooked up to a function `persistBlocks()` which is defined as follows:
-
-```js
-// src/components/block-editor/index.js
-
-function persistBlocks( newBlocks ) {
-	updateBlocks( newBlocks );
-	window.localStorage.setItem( 'getdavesbeBlocks', serialize( newBlocks ) );
-}
-```
-
-This function accepts an array of "committed" block changes and calls the state
-setter `updateBlocks`. In addition to this however, it also stores the blocks
-within LocalStorage under the key `getdavesbeBlocks`. In order to achieve this
-the Block data is serialized into [Gutenberg "Block Grammar"](https://developer.wordpress.org/block-editor/principles/key-concepts/#blocks) format, meaning it can be safely stored as a string.
-
-If we open DeveloperTools and inspect our LocalStorage we will see serialized
-Block data stored and updated as changes occur within the editor. Below is an
-example of the format:
-
-```
-<!-- wp:heading -->
-<h2>An experiment with a standalone Block Editor in WPAdmin</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>This is an experiment to discover how easy (or otherwise) it is to create a standalone instance of the Block Editor in WPAdmin.</p>
-<!-- /wp:paragraph -->
-```
-
-### Retrieving previous block data
-
-Having persistence in place is all well and good, but it's useless unless that
-data is retrieved and _restored_ within the editor upon each full page reload.
-
-Accessing data is a side effect, so naturally we reach for our old (new!?)
-friend the `useEffect` hook to handle this.
-
-```jsx
-// src/components/block-editor/index.js
-
-useEffect( () => {
-	const storedBlocks = window.localStorage.getItem( 'getdavesbeBlocks' );
-
-	if ( storedBlocks && storedBlocks.length ) {
-		updateBlocks( () => parse( storedBlocks ) );
-		createInfoNotice( 'Blocks loaded', {
-			type: 'snackbar',
-			isDismissible: true,
-		} );
-	}
-}, [] );
-```
-
-In this handler, we:
-
--   Grab the serialized block data from local storage.
--   Convert the serialized blocks back to JavaScript objects using the `parse()`
-    utility.
--   Call the state setter `updateBlocks` causing the `blocks` value to be updated
-    in state to reflect the blocks retrieved from LocalStorage.
-
-As a result of these operations the controlled `<BlockEditorProvider>` component
-is updated with the blocks restored from LocalStorage causing the editor to
-show these blocks.
-
-Finally, for good measure we generate a notice - which will display in our `<Notice>` component as a "snackbar" notice - to indicate that the blocks have been restored.
-
-## Wrapping up
-
-If you've made it this far then congratulations! I hope you now have a better understanding of how the block editor works under the hood.
-
-In addition, you've reviewed an working example of the code required to implement your own custom functioning block editor. This information should prove useful, especially as Gutenberg expands beyond editing just the `Post` and into Widgets, Full Site Editing and beyond!
-
-The full code for the custom functioning block editor we've just built is [available on GitHub](https://github.com/getdave/standalone-block-editor). I encourage you to download and try it out for yourself. Experiment, then and take things even further!
diff --git a/docs/how-to-guides/plugin-sidebar-0.md b/docs/how-to-guides/plugin-sidebar-0.md
index 306ef3319a0c18..76ef54bb9d3082 100644
--- a/docs/how-to-guides/plugin-sidebar-0.md
+++ b/docs/how-to-guides/plugin-sidebar-0.md
@@ -6,25 +6,25 @@ How to add a sidebar to your plugin. A sidebar is the region to the far right of
 
 ![Example sidebar](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/sidebar-up-and-running.png)
 
-_Note: this tutorial covers a custom sidebar, if you are looking to add controls to the sidebar see the [Block Toolbar and Settings Sidebar](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md)_
+_Note: this tutorial covers a custom sidebar, if you are looking to add controls to the sidebar see the [Block Toolbar and Settings Sidebar](/docs/getting-started/fundamentals/block-in-the-editor.md)_
 
 ## Before you start
 
-The tutorial assumes you have an existing plugin setup and are ready to add PHP and JavaScript code. Please, refer to [Getting started with JavaScript](/docs/how-to-guides/javascript/README.md) tutorial for an introduction to WordPress plugins and how to use JavaScript to extend the block editor.
+The tutorial assumes you have an existing plugin setup and are ready to add PHP and JavaScript code. Please, refer to [Getting started with JavaScript](/docs/getting-started/fundamentals/javascript-in-the-block-editor.md) tutorial for an introduction to WordPress plugins and how to use JavaScript to extend the block editor.
 
 ## Step-by-step guide
 
-### Step 1: Get a Sidebar up and Running
+### Step 1: Get a sidebar up and running
 
-The first step is to tell the editor that there is a new plugin that will have its own sidebar. Use the [registerPlugin](/packages/plugins/README.md), [PluginSidebar](/packages/edit-post/README.md#pluginsidebar), and [createElement](/packages/element/README.md) utilities provided by the `@wordpress/plugins`, `@wordpress/edit-post`, and `@wordpress/element` packages, respectively.
+The first step is to tell the editor that there is a new plugin that will have its own sidebar. Use the [registerPlugin](/packages/plugins/README.md), [PluginSidebar](/packages/editor/README.md#pluginsidebar), and [createElement](/packages/element/README.md) utilities provided by the `@wordpress/plugins`, `@wordpress/editor`, and `react` packages, respectively.
 
 Add the following code to a JavaScript file called `plugin-sidebar.js` and save it within your plugin's directory:
 
 ```js
-( function ( wp ) {
+( function ( wp, React ) {
+	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
-	var el = wp.element.createElement;
+	var PluginSidebar = wp.editor.PluginSidebar;
 
 	registerPlugin( 'my-plugin-sidebar', {
 		render: function () {
@@ -39,10 +39,10 @@ Add the following code to a JavaScript file called `plugin-sidebar.js` and save
 			);
 		},
 	} );
-} )( window.wp );
+} )( window.wp, window.React );
 ```
 
-For this code to work, those utilities need to be available in the browser, so you must specify `wp-plugins`, `wp-edit-post`, and `wp-element` as dependencies of your script.
+For this code to work, those utilities need to be available in the browser, so you must specify `wp-plugins`, `wp-edit-post`, and `react` as dependencies of your script.
 
 Here is the PHP code to register your script and specify the dependencies:
 
@@ -57,7 +57,7 @@ function sidebar_plugin_register() {
 	wp_register_script(
 		'plugin-sidebar-js',
 		plugins_url( 'plugin-sidebar.js', __FILE__ ),
-		array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
+		array( 'wp-plugins', 'wp-editor', 'react' )
 	);
 }
 add_action( 'init', 'sidebar_plugin_register' );
@@ -80,9 +80,9 @@ To visualize and edit the meta field value you'll use an input component. The `@
 
 ```js
 ( function ( wp ) {
+	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
-	var el = wp.element.createElement;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 
 	registerPlugin( 'my-plugin-sidebar', {
@@ -142,9 +142,9 @@ function sidebar_plugin_register() {
 		'plugin-sidebar-js',
 		plugins_url( 'plugin-sidebar.js', __FILE__ ),
 		array(
+			'react',
 			'wp-plugins',
-			'wp-edit-post',
-			'wp-element',
+			'wp-editor',
 			'wp-components'
 		)
 	);
@@ -168,7 +168,7 @@ Reload the editor and open the sidebar:
 
 This code doesn't let users store or retrieve data just yet, so the next steps will focus on how to connect it to the meta block field.
 
-### Step 3: Register the Meta Field
+### Step 3: Register the meta field
 
 To work with fields in the `post_meta` table, use the [register_post_meta](https://developer.wordpress.org/reference/functions/register_post_meta/). function to create a new field called `sidebar_plugin_meta_block_field`.
 
@@ -194,15 +194,15 @@ The function will return an object containing the registered meta field you regi
 
 If the code returns `undefined` make sure your post type supports `custom-fields`. Either when [registering the post](https://developer.wordpress.org/reference/functions/register_post_type/#supports) or with [add_post_type_support function](https://developer.wordpress.org/reference/functions/add_post_type_support/).
 
-### Step 4: Initialize the Input Control
+### Step 4: Initialize the input control
 
 With the field available in the editor store, it can now be surfaced to the UI. We extract the input control to a function to keep the code clean as we add functionality.
 
 ```js
 ( function ( wp ) {
+	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
-	var el = wp.element.createElement;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 
 	var MetaBlockField = function () {
@@ -241,9 +241,9 @@ The `useSelect` function is used to fetch data when the component loads and will
 
 ```js
 ( function ( wp ) {
+	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
-	var el = wp.element.createElement;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var Text = wp.components.TextControl;
 	var useSelect = wp.data.useSelect;
 
@@ -297,16 +297,16 @@ wp.data
 
 You can observe the content changing in the input component.
 
-### Step 5: Update the Meta Field When the Input's Content Changes
+### Step 5: Update the meta field when the input's content changes
 
 The last step is to update the meta field when the input content changes.
 The `useDispatch` function takes a store name as its only argument and returns methods that you can use to update the store, in this case we'll use `editPost`
 
 ```js
 ( function ( wp ) {
+	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
-	var el = wp.element.createElement;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 	var useSelect = wp.data.useSelect;
 	var useDispatch = wp.data.useDispatch;
@@ -379,4 +379,32 @@ Functions used in this guide:
 
 You now have a custom sidebar that you can use to update `post_meta` content.
 
-A complete example is available, download the [plugin-sidebar example](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/plugin-sidebar) from the [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository.
+A complete example is available, download the [plugin-sidebar example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) from the [block-development-examples](https://github.com/WordPress/block-development-examples) repository.
+
+### Note
+
+If you have enabled Custom Fields in the 'Panels' page of the Editor 'Preferences' (via the three dots in top right), a field with the same name as the TextControl, in this case `sidebar_plugin_meta_block_field`, will also appear in the custom fields panel at the bottom of the editor window. These two fields have access to the same meta property.
+
+![Text Control and Custom Field](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-text-control-custom-field.png)
+
+On saving the post the value in the TextControl will be saved first and the value in the custom field will be saved second, so that is the one that ends up persisting in the database. So if you change the value in the TextControl it is still the one in the custom field that ends up getting saved.
+
+This problem does not exist if Custom Fields is not enabled.
+
+If you need to have Custom Fields enabled and also have post meta in the sidebar there are two possible solutions:
+
+1. Precede the name of the meta field with an underscore, so the name in the above example would be `_sidebar_plugin_meta_block_field`. This indicates that the post meta should be treated as private so it will not be visible in the Custom Fields section of a post. With this solution an error will be generated when you save the post unless you add an `auth_callback` property to the `args` array passed to `register_post_meta` with a function that ultimately returns `true`.  See the `args` documentation in the [post_meta](https://developer.wordpress.org/reference/functions/register_meta/#parameters) page for more info.
+2. In the TextControl's `onChange` function, target the Value field textarea and set the value there to be the same as the value in the TextControl meta field. The value will then be identical in both places and so you can be assured that if the value is changed in the TextControl then it will still be saved to the database.
+
+```js
+return el( TextControl, {
+  label: 'Meta Block Field',
+  value: metaFieldValue,
+  onChange: function ( content ) {
+    editPost( {
+      meta: { sidebar_plugin_meta_block_field: content }
+    })
+    document.querySelector( {the-value-textarea} ).innerHTML = content;
+  },
+} );
+```
diff --git a/docs/how-to-guides/propagating-updates.md b/docs/how-to-guides/propagating-updates.md
index 15b3da96be8ff4..8079048a47a89c 100644
--- a/docs/how-to-guides/propagating-updates.md
+++ b/docs/how-to-guides/propagating-updates.md
@@ -22,7 +22,7 @@ How to manage block updates depends on the nature of the block itself. If the bl
 
 ### Patterns
 
-**For content that you want updated later on, do not use patterns and instead rely on reusable blocks or template parts.** Patterns cannot be updated after you insert one into your site. For context, you can think of Patterns as more like sample/example/starter content. While Patterns exposed in the Inserter might evolve over time, those changes won't be automatically applied to any current useage of the pattern. Once inserted, patterns become completely detached from the original pattern unlike Reusable block or Template Part block.
+**For content that you want updated later on, do not use patterns and instead rely on reusable blocks or template parts.** Patterns cannot be updated after you insert one into your site. For context, you can think of Patterns as more like sample/example/starter content. While Patterns exposed in the Inserter might evolve over time, those changes won't be automatically applied to any current usage of the pattern. Once inserted, patterns become completely detached from the original pattern unlike Reusable block or Template Part block.
 
 If needed, one potential workaround for patterns with custom styles is to add a class name to the wrapping block for a pattern. For example, the following adds a themeslug-special class to a Group block:
 
@@ -36,11 +36,11 @@ If needed, one potential workaround for patterns with custom styles is to add a
 
 It is not fool-proof because users can modify the class via the editor UI.  However, because this setting is under the "Advanced" panel it is likely to stay intact in most instances. This gives theme authors some CSS control for some pattern types, allowing them to update existing uses. However, it does not prevent users from making massive alterations that cannot be updated.
 
-### Reusable blocks
+### Synced Patterns
 
-As the name suggests, these blocks are inherently synced across your site. Keep in mind that there are currently limitations with relying on reusable blocks to handle certain updates since content, HTML structure, and styles will all stay in sync when updates happen. If you require more nuance than that, this is a key element to factor in and a dynamic block might be a better approach.
+As the name suggests, these patterns are inherently synced across your site. Keep in mind that there are currently limitations with relying on synced patterns to handle certain updates since content, HTML structure, and styles will all stay in sync when updates happen. If you require more nuance than that, this is a key element to factor in and a dynamic block might be a better approach.
 
-### Template Parts and Templates
+### Template parts and templates
 
 Because block themes allow users to directly edit templates and template parts, how changes are managed need to be adjusted in light of the greater access given to users. For context, when templates or template parts are changed by the user, the updated templates from the theme update don’t show for the user. Only new users of the theme or users who have not yet edited a template are experiencing the updated template. If users haven’t modified the files then the changes you make on the file system will be reflected on the user’s sites – you just need to update the files and they’ll get the changes. However if they have made changes to their templates then the only way you can update their templates is to:
 
@@ -55,7 +55,7 @@ Likewise, it is generally poor practice to delete template parts in theme update
 
 ### Resources
 
-- [Comparing Patterns, Template Parts, and Reusable Blocks](https://wordpress.org/support/article/comparing-patterns-template-parts-and-reusable-blocks/)
+- [Comparing Patterns, Template Parts, and Reusable Blocks](https://wordpress.org/documentation/article/comparing-patterns-template-parts-and-reusable-blocks/)
 - [Block deprecation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/)
 - [Create Block tool](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/)
 
diff --git a/docs/how-to-guides/themes/README.md b/docs/how-to-guides/themes/README.md
index 2b2137ce49ce47..1510b20c30047f 100644
--- a/docs/how-to-guides/themes/README.md
+++ b/docs/how-to-guides/themes/README.md
@@ -6,7 +6,7 @@ The block editor provides a number of options for theme designers and developers
 
 ### Classic theme
 
-In terms of block editor terminology this is any theme that defines its templates in the traditional `.php` file format, and that doesn't have an `index.html` format template in the `/block-templates` or `/templates` folders. A `Classic` theme has the ability to provide configuration and styling options to the block editor, and block content, via [Theme Supports](/docs/how-to-guides/themes/theme-support.md), or by including a [theme.json](/docs/how-to-guides/themes/theme-json.md) file. A theme does not have to be a `Block` theme in order to take advantage of some of the flexibility provided by the use of a `theme.json` file.
+In terms of block editor terminology this is any theme that defines its templates in the traditional `.php` file format, and that doesn't have an `index.html` format template in the `/block-templates` or `/templates` folders. A `Classic` theme has the ability to provide configuration and styling options to the block editor, and block content, via [Theme Supports](/docs/how-to-guides/themes/theme-support.md), or by including a [theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md) file. A theme does not have to be a `Block` theme in order to take advantage of some of the flexibility provided by the use of a `theme.json` file.
 
 ### Block theme
 
@@ -18,6 +18,5 @@ There isn't an FSE specific theme type. In WordPress > 5.9 FSE is enabled for an
 
 **Contents**
 
-- [Block Theme Overview](/docs/how-to-guides/themes/block-theme-overview.md)
-- [Global Settings (theme.json)](/docs/how-to-guides/themes/theme-json.md)
+- [Global Settings (theme.json)](/docs/how-to-guides/themes/global-settings-and-styles.md)
 - [Theme Support](/docs/how-to-guides/themes/theme-support.md)
diff --git a/docs/how-to-guides/themes/block-theme-overview.md b/docs/how-to-guides/themes/block-theme-overview.md
deleted file mode 100644
index 48a3621aa0fd08..00000000000000
--- a/docs/how-to-guides/themes/block-theme-overview.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# Block Theme
-
-These features are experimental and part of the Gutenberg plugin.
-For block theme features supported by WordPress 5.9 see the [Theme Developer Handbook](https://developer.wordpress.org/themes/block-themes/).
-
-You can provide feedback in the weekly #core-editor chats, or #fse-outreach-experiment channels, or async using GitHub issues.
-
-## What is a block theme?
-
-A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, ...), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.
-
-## Global styles presets
-
-In addition to the default theme.json file, Block Themes can define multiple global styles presets for users to pick from. For example, a theme author might provide multiple theme color variations for the theme.
-
-To provide a global styles preset, themes can add multiple JSON files inside their `/styles` folder. Each one of these JSON file is a mini theme.json file containing `styles` and/or `settings` that overrides any of the default `theme.json` file settings or styles.
-
-**Example**
-
-```json
-// styles/red.json
-{
-	styles: {
-		colors: {
-			text: 'red',
-			background: 'white'
-		}
-	}
-}
-```
-
-```json
-// styles/dark.json
-{
-	styles: {
-		colors: {
-			text: 'white',
-			background: 'black'
-		}
-	}
-}
-```
diff --git a/docs/how-to-guides/themes/create-block-theme.md b/docs/how-to-guides/themes/create-block-theme.md
deleted file mode 100644
index 356be104bbf795..00000000000000
--- a/docs/how-to-guides/themes/create-block-theme.md
+++ /dev/null
@@ -1,4 +0,0 @@
-
-##This content has moved
-
-You can find documentation about how to create a block theme in the [Theme Developer Handbook](https://developer.wordpress.org/themes/block-themes/).
diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md
new file mode 100644
index 00000000000000..f71bd67bfaf2ec
--- /dev/null
+++ b/docs/how-to-guides/themes/global-settings-and-styles.md
@@ -0,0 +1,1332 @@
+# Global Settings & Styles (theme.json)
+
+WordPress 5.8 comes with [a new mechanism](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/) to configure the editor that enables a finer-grained control and introduces the first step in managing styles for future WordPress releases: the `theme.json` file.
+
+## Rationale
+
+The Block Editor API has evolved at different velocities and there are some growing pains, specially in areas that affect themes. Examples of this are: the ability to [control the editor programmatically](https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/), or [a block style system](https://github.com/WordPress/gutenberg/issues/9534) that facilitates user, theme, and core style preferences.
+
+This describes the current efforts to consolidate the various APIs related to styles into a single point – a `theme.json` file that should be located inside the root of the theme directory.
+
+### Settings for the block editor
+
+Instead of the proliferation of theme support flags or alternative methods, the `theme.json` files provides a canonical way to define the settings of the block editor. These settings includes things like:
+
+-   What customization options should be made available or hidden from the user.
+-   What are the default colors, font sizes... available to the user.
+-   Defines the default layout of the editor (widths and available alignments).
+
+### Settings can be controlled per block
+
+For more granularity, these settings also work at the block level in `theme.json`.
+
+Examples of what can be achieved are:
+
+-   Use a particular preset for a block (e.g.: table) but the common one for the rest of blocks.
+-   Enable font size UI controls for all blocks but the headings block.
+-   etc.
+
+### Styles are managed
+
+By using the `theme.json` file to set style properties in a structured way, the Block Editor can "manage" the CSS that comes from different origins (user, theme, and core CSS). For example, if a theme and a user set the font size for paragraphs, we only enqueue the style coming from the user and not the theme's.
+
+Some of the advantages are:
+
+- Reduce the amount of CSS enqueued.
+- Prevent specificity wars.
+
+### CSS Custom Properties: presets & custom
+
+There are some areas of styling that would benefit from having shared values that can change across a site.
+
+To address this need, we've started to experiment with CSS Custom Properties, aka CSS Variables, in some places:
+
+- **Presets**: [color palettes](/docs/how-to-guides/themes/theme-support.md#block-color-palettes), [font sizes](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or [gradients](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors.
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"name": "Black",
+					"slug": "black",
+					"color": "#000000"
+				},
+				{
+					"name": "White",
+					"slug": "white",
+					"color": "#ffffff"
+				}
+			]
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	--wp--preset--color--black: #000000;
+	--wp--preset--color--white: #ffffff;
+}
+```
+
+{% end %}
+
+-   **Custom properties**: there's also a mechanism to create your own CSS Custom Properties.
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"custom": {
+			"line-height": {
+				"body": 1.7,
+				"heading": 1.3
+			}
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	--wp--custom--line-height--body: 1.7;
+	--wp--custom--line-height--heading: 1.3;
+}
+```
+
+{% end %}
+
+## Specification
+
+This specification is the same for the three different origins that use this format: core, themes, and users. Themes can override core's defaults by creating a file called `theme.json`. Users, via the site editor, will also be able to override theme's or core's preferences via an user interface that is being worked on.
+
+```json
+{
+	"version": 3,
+	"settings": {},
+	"styles": {},
+	"customTemplates": {},
+	"templateParts": {}
+}
+```
+
+### Version
+
+This field describes the format of the `theme.json` file. The latest version is [version 3](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/) introduced in WordPress 6.6.
+
+New versions are introduced when a breaking change needs to be made. This allows theme authors to choose when to opt-in to the breaking changes and migrate their theme.json files to the new format.
+
+Older versions of `theme.json` are backwards-compatible and will continue to work with newer versions of WordPress and the Gutenberg plugin. However new features will be developed on the latest version.
+
+Follow the instructions in [migrating to newer versions](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-migrations/) for details on updating to the latest version.
+
+### Settings
+
+<div class="callout callout-alert">
+The Gutenberg plugin extends the settings available from WordPress 5.8, so they can be used with other WordPress versions and they go through a maturation process before being ported to core.
+
+The tabs below show WordPress 5.8 supported settings and the ones supported by the Gutenberg plugin.
+</div>
+
+The settings section has the following structure:
+
+{% codetabs %}
+{% WordPress %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"border": {
+			"radius": false,
+			"color": false,
+			"style": false,
+			"width": false
+		},
+		"color": {
+			"custom": true,
+			"customDuotone": true,
+			"customGradient": true,
+			"duotone": [],
+			"gradients": [],
+			"link": false,
+			"palette": [],
+			"text": true,
+			"background": true,
+			"defaultGradients": true,
+			"defaultPalette": true
+		},
+		"custom": {},
+		"layout": {
+			"contentSize": "800px",
+			"wideSize": "1000px"
+		},
+		"spacing": {
+			"margin": false,
+			"padding": false,
+			"blockGap": null,
+			"units": [ "px", "em", "rem", "vh", "vw" ]
+		},
+		"typography": {
+			"customFontSize": true,
+			"lineHeight": false,
+			"dropCap": true,
+			"fluid": false,
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"textDecoration": true,
+			"textTransform": true,
+			"fontSizes": [],
+			"fontFamilies": []
+		},
+		"blocks": {
+			"core/paragraph": {
+				"color": {},
+				"custom": {},
+				"layout": {},
+				"spacing": {},
+				"typography": {}
+			},
+			"core/heading": {},
+			"etc": {}
+		}
+	}
+}
+```
+
+{% Gutenberg %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"appearanceTools": false,
+		"border": {
+			"color": false,
+			"radius": false,
+			"style": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"custom": true,
+			"customDuotone": true,
+			"customGradient": true,
+			"defaultGradients": true,
+			"defaultPalette": true,
+			"duotone": [],
+			"gradients": [],
+			"link": false,
+			"palette": [],
+			"text": true
+		},
+		"custom": {},
+		"dimensions": {
+			"aspectRatio": false,
+			"minHeight": false,
+		},
+		"layout": {
+			"contentSize": "800px",
+			"wideSize": "1000px"
+		},
+		"spacing": {
+			"blockGap": null,
+			"margin": false,
+			"padding": false,
+			"customSpacingSize": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ],
+			"spacingScale": {
+				"operator": "*",
+				"increment": 1.5,
+				"steps": 7,
+				"mediumStep": 1.5,
+				"unit": "rem"
+			},
+			"spacingSizes": []
+		},
+		"typography": {
+			"customFontSize": true,
+			"dropCap": true,
+			"fluid": false,
+			"fontFamilies": [],
+			"fontSizes": [],
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"lineHeight": false,
+			"textAlign": true,
+			"textColumns": false,
+			"textDecoration": true,
+			"textTransform": true
+		},
+		"blocks": {
+			"core/paragraph": {
+				"border": {},
+				"color": {},
+				"custom": {},
+				"layout": {},
+				"spacing": {},
+				"typography": {}
+			},
+			"core/heading": {},
+			"etc": {}
+		}
+	}
+}
+```
+{% end %}
+
+Each block can configure any of these settings separately, providing a more fine-grained control over what exists via `add_theme_support`. The settings declared at the top-level affect to all blocks, unless a particular block overwrites it. It's a way to provide inheritance and configure all blocks at once.
+
+Note, however, that not all settings are relevant for all blocks. The settings section provides an opt-in/opt-out mechanism for themes, but it's the block's responsibility to add support for the features that are relevant to it. For example, if a block doesn't implement the `dropCap` feature, a theme can't enable it for such a block through `theme.json`.
+
+### Opt-in into UI controls
+
+There's one special setting property, `appearanceTools`, which is a boolean and its default value is false. Themes can use this setting to enable the following ones:
+
+- background: backgroundImage, backgroundSize
+- border: color, radius, style, width
+- color: link
+- dimensions: aspectRatio, minHeight
+- position: sticky
+- spacing: blockGap, margin, padding
+- typography: lineHeight
+
+#### Backward compatibility with add_theme_support
+
+To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences:
+
+| add_theme_support           | theme.json setting                                            |
+| --------------------------- | ------------------------------------------------------------- |
+| `custom-line-height`        | Set `typography.lineHeight` to `true`.                        |
+| `custom-spacing`            | Set `spacing.padding` to `true`.                              |
+| `custom-units`              | Provide the list of units via `spacing.units`.                |
+| `disable-custom-colors`     | Set `color.custom` to `false`.                                |
+| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.                   |
+| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                        |
+| `editor-color-palette`      | Provide the list of colors via `color.palette`.               |
+| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`.     |
+| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.          |
+| `editor-spacing-sizes`      | Provide the list of spacing sizes via `spacing.spacingSizes`. |
+| `appearance-tools`          | Set `appearanceTools` to `true`.                              |
+| `border`                    | Set `border: color, radius, style, width` to `true`.          |
+| `link-color `               | Set `color.link` to `true`.                                   |
+
+#### Presets
+
+Presets are part of the settings section. They are values that are shown to the user via some UI controls. By defining them via `theme.json` the engine can do more for themes, such as automatically translate the preset name or enqueue the corresponding CSS classes and custom properties.
+
+The following presets can be defined via `theme.json`:
+
+- `color.duotone`: doesn't generate classes or custom properties.
+- `color.gradients`: generates a single class and custom property per preset value.
+- `color.palette`:
+    - generates 3 classes per preset value: color, background-color, and border-color.
+    - generates a single custom property per preset value.
+- `spacing.spacingSizes`/`spacing.spacingScale`: generates a single custom property per preset value.
+- `typography.fontSizes`: generates a single class and custom property per preset value.
+- `typography.fontFamilies`: generates a single custom property per preset value.
+
+The naming schema for the classes and the custom properties is as follows:
+
+- Custom Properties: `--wp--preset--{preset-category}--{preset-slug}` such as `--wp--preset--color--black`
+- Classes: `.has-{preset-slug}-{preset-category}` such as `.has-black-color`.
+
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"duotone": [
+				{
+					"colors": [ "#000", "#FFF" ],
+					"slug": "black-and-white",
+					"name": "Black and White"
+				}
+			],
+			"gradients": [
+				{
+					"slug": "blush-bordeaux",
+					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+					"name": "Blush bordeaux"
+				},
+				{
+					"slug": "blush-light-purple",
+					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+					"name": "Blush light purple"
+				}
+			],
+			"palette": [
+				{
+					"slug": "strong-magenta",
+					"color": "#a156b4",
+					"name": "Strong magenta"
+				},
+				{
+					"slug": "very-dark-grey",
+					"color": "rgb(131, 12, 8)",
+					"name": "Very dark grey"
+				}
+			]
+		},
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell, \"Helvetica Neue\",sans-serif",
+					"slug": "system-font",
+					"name": "System Font"
+				},
+				{
+					"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
+					"slug": "helvetica-arial",
+					"name": "Helvetica or Arial"
+				}
+			],
+			"fontSizes": [
+				{
+					"slug": "big",
+					"size": 32,
+					"name": "Big"
+				},
+				{
+					"slug": "x-large",
+					"size": 46,
+					"name": "Large"
+				}
+			]
+		},
+		"spacing": {
+			"spacingScale": {
+				"operator": "*",
+				"increment": 1.5,
+				"steps": 7,
+				"mediumStep": 1.5,
+				"unit": "rem"
+			},
+			"spacingSizes": [
+				{
+					"slug": "40",
+					"size": "1rem",
+					"name": "Small"
+				},
+				{
+					"slug": "50",
+					"size": "1.5rem",
+					"name": "Medium"
+				},
+				{
+					"slug": "60",
+					"size": "2rem",
+					"name": "Large"
+				}
+			]
+		},
+		"blocks": {
+			"core/group": {
+				"color": {
+					"palette": [
+						{
+							"slug": "black",
+							"color": "#000000",
+							"name": "Black"
+						},
+						{
+							"slug": "white",
+							"color": "#ffffff",
+							"name": "White"
+						}
+					]
+				}
+			}
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+/* Top-level custom properties */
+body {
+	--wp--preset--color--strong-magenta: #a156b4;
+	--wp--preset--color--very-dark-grey: #444;
+	--wp--preset--gradient--blush-bordeaux: linear-gradient( 135deg, rgb( 254, 205, 165 ) 0%, rgb( 254, 45, 45 ) 50%, rgb( 107, 0, 62 ) 100% );
+	--wp--preset--gradient--blush-light-purple: linear-gradient( 135deg, rgb( 255, 206, 236 ) 0%, rgb( 152, 150, 240 ) 100% );
+	--wp--preset--font-size--x-large: 46;
+	--wp--preset--font-size--big: 32;
+	--wp--preset--font-family--helvetica-arial: Helvetica Neue, Helvetica, Arial, sans-serif;
+	--wp--preset--font-family--system: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell, \"Helvetica Neue\",sans-serif;
+	--wp--preset--spacing--20: 0.44rem;
+	--wp--preset--spacing--30: 0.67rem;
+	--wp--preset--spacing--40: 1rem;
+	--wp--preset--spacing--50: 1.5rem;
+	--wp--preset--spacing--60: 2.25rem;
+	--wp--preset--spacing--70: 3.38rem;
+	--wp--preset--spacing--80: 5.06rem;
+}
+
+/* Block-level custom properties (bounded to the group block) */
+.wp-block-group {
+	--wp--preset--color--black: #000000;
+	--wp--preset--color--white: #ffffff;
+}
+
+/* Top-level classes */
+.has-strong-magenta-color { color: #a156b4 !important; }
+.has-strong-magenta-background-color { background-color: #a156b4 !important; }
+.has-strong-magenta-border-color { border-color: #a156b4 !important; }
+.has-very-dark-grey-color { color: #444 !important; }
+.has-very-dark-grey-background-color { background-color: #444 !important; }
+.has-very-dark-grey-border-color { border-color: #444 !important; }
+.has-blush-bordeaux-background { background: linear-gradient( 135deg, rgb( 254, 205, 165 ) 0%, rgb( 254, 45, 45 ) 50%, rgb( 107, 0, 62 ) 100% ) !important; }
+.has-blush-light-purple-background { background: linear-gradient( 135deg, rgb( 255, 206, 236 ) 0%, rgb( 152, 150, 240 ) 100% ) !important; }
+.has-big-font-size { font-size: 32; }
+.has-normal-font-size { font-size: 16; }
+
+/* Block-level classes (bounded to the group block) */
+.wp-block-group.has-black-color { color: #a156b4 !important; }
+.wp-block-group.has-black-background-color { background-color: #a156b4 !important; }
+.wp-block-group.has-black-border-color { border-color: #a156b4 !important; }
+.wp-block-group.has-white-color { color: #444 !important; }
+.wp-block-group.has-white-background-color { background-color: #444 !important; }
+.wp-block-group.has-white-border-color { border-color: #444 !important; }
+
+```
+{% end %}
+
+To maintain backward compatibility, the presets declared via `add_theme_support` will also generate the CSS Custom Properties. If the `theme.json` contains any presets, these will take precedence over the ones declared via `add_theme_support`.
+
+Preset classes are attached to the content of a post by some user action. That's why the engine will add `!important` to these, because user styles should take precedence over theme styles.
+
+#### Custom
+
+In addition to create CSS Custom Properties for the presets, the `theme.json` also allows for themes to create their own, so they don't have to be enqueued separately. Any values declared within the `custom` field will be transformed to CSS Custom Properties following this naming schema: `--wp--custom--<variable-name>`.
+
+For example:
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"custom": {
+			"baseFont": 16,
+			"lineHeight": {
+				"small": 1.2,
+				"medium": 1.4,
+				"large": 1.8
+			}
+		},
+		"blocks": {
+			"core/group": {
+				"custom": {
+					"baseFont": 32
+				}
+			}
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	--wp--custom--base-font: 16;
+	--wp--custom--line-height--small: 1.2;
+	--wp--custom--line-height--medium: 1.4;
+	--wp--custom--line-height--large: 1.8;
+}
+.wp-block-group {
+	--wp--custom--base-font: 32;
+}
+```
+
+{% end %}
+
+Note that the name of the variable is created by adding `--` in between each nesting level and `camelCase` fields are transformed to `kebab-case`.
+
+#### Settings examples
+
+- Enable custom colors only for the paragraph block:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"custom": false
+		},
+		"blocks": {
+			"core/paragraph": {
+				"color": {
+					"custom": true
+				}
+			}
+		}
+	}
+}
+```
+
+- Disable border radius for the button block:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": false
+				}
+			}
+		}
+	}
+}
+```
+
+- Provide the group block a different palette than the rest:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "black",
+					"color": "#000000",
+					"name": "Black"
+				},
+				{
+					"slug": "white",
+					"color": "#FFFFFF",
+					"name": "White"
+				},
+				{
+					"slug": "red",
+					"color": "#FF0000",
+					"name": "Red"
+				},
+				{
+					"slug": "green",
+					"color": "#00FF00",
+					"name": "Green"
+				},
+				{
+					"slug": "blue",
+					"color": "#0000FF",
+					"name": "Blue"
+				}
+			]
+		},
+		"blocks": {
+			"core/group": {
+				"color": {
+					"palette": [
+						{
+							"slug": "black",
+							"color": "#000000",
+							"name": "Black"
+						},
+						{
+							"slug": "white",
+							"color": "#FFF",
+							"name": "White"
+						}
+					]
+				}
+			}
+		}
+	}
+}
+```
+
+### Styles
+
+<div class="callout callout-alert">
+The Gutenberg plugin extends the styles available from WordPress 5.8, so they can be used with other WordPress versions and they go through a maturation process before being ported to core.
+
+The tabs below show WordPress 5.8 supported styles and the ones supported by the Gutenberg plugin.
+</div>
+
+Each block declares which style properties it exposes via the [block supports mechanism](/docs/reference-guides/block-api/block-supports.md). The support declarations are used to automatically generate the UI controls for the block in the editor. Themes can use any style property via the `theme.json` for any block ― it's the theme's responsibility to verify that it works properly according to the block markup, etc.
+
+{% codetabs %}
+{% WordPress %}
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"border": {
+			"radius": "value",
+			"color": "value",
+			"style": "value",
+			"width": "value"
+		},
+		"filter": {
+			"duotone": "value"
+		},
+		"color": {
+			"background": "value",
+			"gradient": "value",
+			"text": "value"
+		},
+		"spacing": {
+			"blockGap": "value",
+			"margin": {
+				"top": "value",
+				"right": "value",
+				"bottom": "value",
+				"left": "value",
+			},
+			"padding": {
+				"top": "value",
+				"right": "value",
+				"bottom": "value",
+				"left": "value"
+			}
+		},
+		"typography": {
+			"fontSize": "value",
+			"fontStyle": "value",
+			"fontWeight": "value",
+			"letterSpacing": "value",
+			"lineHeight": "value",
+			"textDecoration": "value",
+			"textTransform": "value"
+		},
+		"elements": {
+			"link": {
+				"border": {},
+				"color": {},
+				"spacing": {},
+				"typography": {}
+			},
+			"h1": {},
+			"h2": {},
+			"h3": {},
+			"h4": {},
+			"h5": {},
+			"h6": {}
+		},
+		"blocks": {
+			"core/group": {
+				"border": {},
+				"color": {},
+				"spacing": {},
+				"typography": {},
+				"elements": {
+					"link": {},
+					"h1": {},
+					"h2": {},
+					"h3": {},
+					"h4": {},
+					"h5": {},
+					"h6": {}
+				}
+			},
+			"etc": {}
+		}
+	}
+}
+```
+{% Gutenberg %}
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"border": {
+			"color": "value",
+			"radius": "value",
+			"style": "value",
+			"width": "value"
+		},
+		"color": {
+			"background": "value",
+			"gradient": "value",
+			"text": "value"
+		},
+		"dimensions": {
+			"aspectRatio": "value",
+			"minHeight": "value"
+		},
+		"filter": {
+			"duotone": "value"
+		},
+		"spacing": {
+			"blockGap": "value",
+			"margin": {
+				"top": "value",
+				"right": "value",
+				"bottom": "value",
+				"left": "value"
+			},
+			"padding": {
+				"top": "value",
+				"right": "value",
+				"bottom": "value",
+				"left": "value"
+			}
+		},
+		"typography": {
+			"fontFamily": "value",
+			"fontSize": "value",
+			"fontStyle": "value",
+			"fontWeight": "value",
+			"letterSpacing": "value",
+			"lineHeight": "value",
+			"textColumns": "value",
+			"textDecoration": "value",
+			"textTransform": "value"
+		},
+		"elements": {
+			"link": {
+				"border": {},
+				"color": {},
+				"spacing": {},
+				"typography": {}
+			},
+			"h1": {},
+			"h2": {},
+			"h3": {},
+			"h4": {},
+			"h5": {},
+			"h6": {},
+			"heading": {},
+			"button": {},
+			"caption": {}
+		},
+		"blocks": {
+			"core/group": {
+				"border": {},
+				"color": {},
+				"dimensions": {},
+				"spacing": {},
+				"typography": {},
+				"elements": {
+					"link": {},
+					"h1": {},
+					"h2": {},
+					"h3": {},
+					"h4": {},
+					"h5": {},
+					"h6": {}
+				}
+			},
+			"etc": {}
+		}
+	}
+}
+```
+{% end %}
+### Top-level styles
+
+Styles found at the top-level will be enqueued using the `body` selector.
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"color": {
+			"text": "var(--wp--preset--color--primary)"
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	color: var( --wp--preset--color--primary );
+}
+```
+
+{% end %}
+### Block styles
+
+Styles found within a block will be enqueued using the block selector.
+
+By default, the block selector is generated based on its name such as `.wp-block-<blockname-without-namespace>`. For example, `.wp-block-group` for the `core/group` block. There are some blocks that want to opt-out from this default behavior. They can do so by explicitly telling the system which selector to use for them via the `__experimentalSelector` key within the `supports` section of its `block.json` file. Note that the block needs to be registered server-side for the `__experimentalSelector` field to be available to the style engine.
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"color": {
+			"text": "var(--wp--preset--color--primary)"
+		},
+		"blocks": {
+			"core/paragraph": {
+				"color": {
+					"text": "var(--wp--preset--color--secondary)"
+				}
+			},
+			"core/group": {
+				"color": {
+					"text": "var(--wp--preset--color--tertiary)"
+				}
+			}
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	color: var( --wp--preset--color--primary );
+}
+p { /* The core/paragraph opts out from the default behaviour and uses p as a selector. */
+	color: var( --wp--preset--color--secondary );
+}
+.wp-block-group {
+	color: var( --wp--preset--color--tertiary );
+}
+```
+{% end %}
+
+#### Referencing a style
+
+A block can be styled using a reference to a root level style. This feature is supported by Gutenberg.
+If you register a background color for the root using styles.color.background:
+
+```JSON
+"styles": {
+		"color": {
+			"background": "var(--wp--preset--color--primary)"
+		}
+	}
+```
+
+You can use `ref: "styles.color.background"`  to re-use the style for a block:
+
+```JSON
+{
+	"color": {
+		"text": { "ref": "styles.color.background" }
+	}
+}
+```
+
+#### Element styles
+
+In addition to top-level and block-level styles, there's the concept of elements that can be used in both places. There's a closed set of them:
+
+Supported by Gutenberg:
+
+- `button`: maps to the `wp-element-button` CSS class. Also maps to `wp-block-button__link` for backwards compatibility.
+- `caption`: maps to the `.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` CSS classes.
+- `heading`: maps to all headings, the `h1 to h6` CSS selectors.
+
+Supported by WordPress:
+
+- `h1`: maps to the `h1` CSS selector.
+- `h2`: maps to the `h2` CSS selector.
+- `h3`: maps to the `h3` CSS selector.
+- `h4`: maps to the `h4` CSS selector.
+- `h5`: maps to the `h5` CSS selector.
+- `h6`: maps to the `h6` CSS selector.
+- `link`: maps to the `a` CSS selector.
+
+If they're found in the top-level the element selector will be used. If they're found within a block, the selector to be used will be the element's appended to the corresponding block.
+
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"typography": {
+			"fontSize": "var(--wp--preset--font-size--normal)"
+		},
+		"elements": {
+			"h1": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--huge)"
+				}
+			},
+			"h2": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--big)"
+				}
+			},
+			"h3": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--medium)"
+				}
+			}
+		},
+		"blocks": {
+			"core/group": {
+				"elements": {
+					"h2": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--small)"
+						}
+					},
+					"h3": {
+						"typography": {
+							"fontSize": "var(--wp--preset--font-size--smaller)"
+						}
+					}
+				}
+			}
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	font-size: var( --wp--preset--font-size--normal );
+}
+h1 {
+	font-size: var( --wp--preset--font-size--huge );
+}
+h2 {
+	font-size: var( --wp--preset--font-size--big );
+}
+h3 {
+	font-size: var( --wp--preset--font-size--medium );
+}
+.wp-block-group h2 {
+	font-size: var( --wp--preset--font-size--small );
+}
+.wp-block-group h3 {
+	font-size: var( --wp--preset--font-size--smaller );
+}
+```
+{% end %}
+##### Element pseudo selectors
+
+Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link` are supported by Gutenberg.
+
+```json
+"elements": {
+		"link": {
+			"color": {
+				"text": "green"
+			},
+			":hover": {
+				"color": {
+					"text": "hotpink"
+				}
+			}
+		}
+	}
+```
+
+#### Variations
+
+A block can have a "style variation", as defined per the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the theme.json file. Styles for unregistered style variations will be ignored.
+
+Note that variations are a "block concept", they only exist bound to blocks. The `theme.json` specification respects that distinction by only allowing `variations` at the block-level but not at the top-level. It's also worth highlighting that only variations defined in the `block.json` file of the block are considered "registered": so far, the style variations added via `register_block_style` or in the client are ignored, see [this issue](https://github.com/WordPress/gutenberg/issues/49602) for more information.
+
+For example, this is how to provide styles for the existing `plain` variation for the `core/quote` block:
+
+```json
+{
+	"version": 3,
+	"styles":{
+		"blocks": {
+			"core/quote": {
+				"variations": {
+					"plain": {
+						"color": {
+							"background": "red"
+						}
+					}
+				}
+			}
+		}
+	}
+}
+```
+
+The resulting CSS output is this:
+
+```css
+.wp-block-quote.is-style-plain {
+	background-color: red;
+}
+```
+
+### customTemplates
+
+<div class="callout callout-alert">Supported in WordPress from version 5.9.</div>
+
+Within this field themes can list the custom templates present in the `templates` folder. For example, for a custom template named `my-custom-template.html`, the `theme.json` can declare what post types can use it and what's the title to show the user:
+
+- name: mandatory.
+- title: mandatory, translatable.
+- postTypes: optional, only applies to the `page` by default.
+
+```json
+{
+    "version": 3,
+	"customTemplates": [
+		{
+			"name": "my-custom-template",
+			"title": "The template title",
+			"postTypes": [
+				"page",
+				"post",
+				"my-cpt"
+			]
+		}
+	]
+}
+```
+
+### templateParts
+
+<div class="callout callout-alert">Supported in WordPress from version 5.9.</div>
+
+Within this field themes can list the template parts present in the `parts` folder. For example, for a template part named `my-template-part.html`, the `theme.json` can declare the area term for the template part entity which is responsible for rendering the corresponding block variation (Header block, Footer block, etc.) in the editor. Defining this area term in the json will allow the setting to persist across all uses of that template part entity, as opposed to a block attribute that would only affect one block. Defining area as a block attribute is not recommended as this is only used 'behind the scenes' to aid in bridging the gap between placeholder flows and entity creation.
+
+Currently block variations exist for "header" and "footer" values of the area term, any other values and template parts not defined in the json will default to the general template part block. Variations will be denoted by specific icons within the editor's interface, will default to the corresponding semantic HTML element for the wrapper (this can also be overridden by the `tagName` attribute set on the template part block), and will contextualize the template part allowing more custom flows in future editor improvements.
+
+- name: mandatory.
+- title: optional, translatable.
+- area: optional, will be set to `uncategorized` by default and trigger no block variation.
+
+```json
+{
+    "version": 3,
+	"templateParts": [
+		{
+			"name": "my-template-part",
+			"title": "Header",
+			"area": "header"
+		}
+	]
+}
+```
+
+### patterns
+
+<div class="callout callout-alert">Supported in WordPress from version 6.0.</div>
+
+Within this field themes can list patterns to register from [Pattern Directory](https://wordpress.org/patterns/). The `patterns` field is an array of pattern `slugs` from the Pattern Directory. Pattern slugs can be extracted by the `url` in single pattern view at the Pattern Directory. For example in this url `https://wordpress.org/patterns/pattern/partner-logos` the slug is `partner-logos`.
+
+```json
+{
+	"version": 3,
+	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
+}
+```
+
+## Developing with theme.json
+
+It can be difficult to remember the theme.json settings and properties and which versions of WordPress support which settings while you develop, so it can be helpful to use the provided JSON schema for theme.json.
+
+Many code editors support JSON schema and can provide help like tooltips, autocomplete, or schema validation right in your editor.
+
+Theme.json schemas for each WordPress version are available at `https://schemas.wp.org/wp/{{version}}/theme.json`. For example a schema for WordPress 5.8 is available at `https://schemas.wp.org/wp/5.8/theme.json`. To ensure that you're only using features available to your users, it's best to use the oldest version that your theme supports.
+
+The latest schema including all the latest changes from the Gutenberg plugin is available at `https://schemas.wp.org/trunk/theme.json`.
+
+Check your editor's documentation for JSON schema support. In Visual Studio Code, for example, you need to add `"$schema": "https://schemas.wp.org/wp/x.x/theme.json"` as a top-level property of your theme.json file, but other editors may be configured differently.
+
+![Example using validation with schema](https://developer.wordpress.org/files/2021/11/theme-json-schema-updated.gif)
+
+
+## Frequently Asked Questions
+
+### The naming schema of CSS Custom Properties
+
+One thing you may have noticed is the naming schema used for the CSS Custom Properties the system creates, including the use of double hyphen, `--`, to separate the different "concepts". Take the following examples.
+
+**Presets** such as `--wp--preset--color--black` can be divided into the following chunks:
+
+- `--wp`: prefix to namespace the CSS variable.
+- `preset `: indicates is a CSS variable that belongs to the presets.
+- `color`: indicates which preset category the variable belongs to. It can be `color`, `font-size`, `gradients`.
+- `black`: the `slug` of the particular preset value.
+
+**Custom** properties such as `--wp--custom--line-height--body`, which can be divided into the following chunks:
+
+- `--wp`: prefix to namespace the CSS variable.
+- `custom`: indicates is a "free-form" CSS variable created by the theme.
+- `line-height--body`: the result of converting the "custom" object keys into a string.
+
+The `--` as a separator has two functions:
+
+- Readability, for human understanding. It can be thought as similar to the BEM naming schema, it separates "categories".
+- Parsability, for machine understanding. Using a defined structure allows machines to understand the meaning of the property `--wp--preset--color--black`: it's a value bounded to the color preset whose slug is "black", which then gives us room to do more things with them.
+
+### Why using `--` as a separator?
+
+We could have used any other separator, such as a single `-`.
+
+However, that'd have been problematic, as it'd have been impossible to tell how `--wp-custom-line-height-template-header` should be converted back into an object, unless we force theme authors not to use `-` in their variable names.
+
+By reserving `--` as a category separator and let theme authors use `-` for word-boundaries, the naming is clearer: `--wp--custom--line-height--template-header`.
+
+### How settings under "custom" create new CSS Custom Properties
+
+The algorithm to create CSS Variables out of the settings under the "custom" key works this way:
+
+This is for clarity, but also because we want a mechanism to parse back a variable name such `--wp--custom--line-height--body` to its object form in theme.json. We use the same separation for presets.
+
+For example:
+
+{% codetabs %}
+{% Input %}
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"custom": {
+			"lineHeight": {
+				"body": 1.7
+			},
+			"font-primary": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
+		}
+	}
+}
+```
+
+{% Output %}
+
+```css
+body {
+	--wp--custom--line-height--body: 1.7;
+	--wp--custom--font-primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
+}
+```
+{% end %}
+
+A few notes about this process:
+
+- `camelCased` keys are transformed into its `kebab-case` form, as to follow the CSS property naming schema. Example: `lineHeight` is transformed into `line-height`.
+- Keys at different depth levels are separated by `--`. That's why `line-height` and `body` are separated by `--`.
+- You shouldn't use `--` in the names of the keys within the `custom` object. Example, **don't do** this:
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"custom": {
+			"line--height": { // DO NOT DO THIS
+				"body": 1.7
+			}
+		}
+	}
+}
+```
+
+### Global Stylesheet
+
+In WordPress 5.8, the CSS for some of the presets defined by WordPress (font sizes, colors, and gradients) was loaded twice for most themes: in the block-library stylesheet plus in the global stylesheet. Additionally, there were slight differences in the CSS in both places.
+
+In WordPress 5.9 release, CSS of presets are consolidated into the global stylesheet, that is now loaded for all themes. Each preset value generates a single CSS Custom Property and a class, as in:
+
+```css
+/* CSS Custom Properties for the preset values */
+body {
+  --wp--preset--<PRESET_TYPE>--<PRESET_SLUG>: <DEFAULT_VALUE>;
+  --wp--preset--color--pale-pink: #f78da7;
+  --wp--preset--font-size--large: 36px;
+  /* etc. */
+}
+
+/* CSS classes for the preset values */
+.has-<PRESET_SLUG>-<PRESET_TYPE> { ... }
+.has-pale-pink-color { color: var(--wp--preset--color--pale-pink) !important; }
+.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
+```
+
+For themes to override the default values they can use the `theme.json` and provide the same slug. Themes that do not use a `theme.json` can still override the default values by enqueuing some CSS that sets the corresponding CSS Custom Property.
+
+`Example` (sets a new value for the default large font size):
+
+```css
+body {
+ --wp--preset--font-size--large: <NEW_VALUE>;
+}
+```
+
+### Specificity for link colors provided by the user
+
+In WordPress 5.8, when a user selected a link color for a specific block we attached a class to that block in the form of `.wp-element-<ID>` and then enqueued the following style:
+
+```css
+.wp-element-<ID> a { color: <USER_COLOR_VALUE> !important; }
+```
+
+While this preserved user preferences at all times, the specificity was too strong and conflicted with some blocks with legit uses of an HTML element that shouldn’t be considered links. To [address this issue](https://github.com/WordPress/gutenberg/pull/34689), in WordPress 5.9 release, the `!important` was removed and updated the corresponding blocks to style the a elements with a specificity higher than the user link color, which now is:
+
+```css
+.wp-element-<ID> a { color: <USER_COLOR_VALUE>; }
+```
+
+As a result of this change, it’s now the block author and theme author’s responsibility to make sure the user choices are respected at all times and that the link color provided by the user (specificity 011) is not overridden.
+
+### What is blockGap and how can I use it?
+
+For blocks that contain inner blocks, such as Group, Columns, Buttons, and Social Icons, `blockGap` controls the spacing between inner blocks. For `blockGap` to work, the block must also opt in to the [`layout` block support](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout), which provides layout styles that can be adjusted via the block spacing controls. Depending on the layout of the block, the `blockGap` value will be output as either a vertical margin or a `gap` value. In the editor, the control for the `blockGap` value is called _Block spacing_, located in the Dimensions panel.
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"spacing": {
+			"blockGap": true,
+		}
+	},
+	"styles": {
+		"spacing": {
+			"blockGap": "1.5rem"
+		}
+	}
+}
+```
+
+The setting for `blockGap` is either a boolean or `null` value and is `null` by default. This allows an extra level of control over style output. The `settings.spacing.blockGap` setting in a `theme.json` file accepts the following values:
+
+- `true`: Opt into displaying _Block spacing_ controls in the editor UI and output `blockGap` styles.
+- `false`: Opt out of displaying _Block spacing_ controls in the editor UI, with `blockGap` styles stored in `theme.json` still being rendered. This allows themes to use `blockGap` values without allowing users to make changes within the editor.
+- `null` (default): Opt out of displaying _Block spacing_ controls, _and_ prevent the output of `blockGap` styles.
+
+The value defined for the root `styles.spacing.blockGap` style is also output as a CSS property, named `--wp--style--block-gap`.
+
+### Why does it take so long to update the styles in the browser?
+
+When you are actively developing with theme.json you may notice it takes 30+ seconds for your changes to show up in the browser, this is because `theme.json` is cached. To remove this caching issue, set either [`WP_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#wp_debug) or [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) to 'true' in your [`wp-config.php`](https://developer.wordpress.org/advanced-administration/wordpress/wp-config/). This tells WordPress to skip the cache and always use fresh data.
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
deleted file mode 100644
index c62ecb3cdbb48d..00000000000000
--- a/docs/how-to-guides/themes/theme-json.md
+++ /dev/null
@@ -1,1312 +0,0 @@
-# Global Settings & Styles (theme.json)
-
-WordPress 5.8 comes with [a new mechanism](https://make.wordpress.org/core/2021/06/25/introducing-theme-json-in-wordpress-5-8/) to configure the editor that enables a finer-grained control and introduces the first step in managing styles for future WordPress releases: the `theme.json` file. Then `theme.json` [evolved to a v2](https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/) with WordPress 5.9 release. This page documents its format.
-
-- Rationale
-    - Settings for the block editor
-    - Settings can be controlled per block
-    - Styles are managed
-    - CSS Custom Properties: presets & custom
-- Specification
-    - version
-    - settings
-        - Backward compatibility with add_theme_support
-        - Presets
-        - Custom
-        - Setting examples
-    - styles
-        - Top-level
-        - Block-level
-        - Elements
-    - customTemplates
-    - templateParts
-    - patterns
-- FAQ
-    - The naming schema of CSS Custom Properties
-    - Why using -- as a separator?
-    - How settings under "custom" create new CSS Custom Properties
-    - Why does it take so long to update the styles in the browser?
-
-## Rationale
-
-The Block Editor API has evolved at different velocities and there are some growing pains, specially in areas that affect themes. Examples of this are: the ability to [control the editor programmatically](https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/), or [a block style system](https://github.com/WordPress/gutenberg/issues/9534) that facilitates user, theme, and core style preferences.
-
-This describes the current efforts to consolidate the various APIs related to styles into a single point – a `theme.json` file that should be located inside the root of the theme directory.
-
-### Settings for the block editor
-
-Instead of the proliferation of theme support flags or alternative methods, the `theme.json` files provides a canonical way to define the settings of the block editor. These settings includes things like:
-
--   What customization options should be made available or hidden from the user.
--   What are the default colors, font sizes... available to the user.
--   Defines the default layout of the editor (widths and available alignments).
-
-### Settings can be controlled per block
-
-For more granularity, these settings also work at the block level in `theme.json`.
-
-Examples of what can be achieved are:
-
--   Use a particular preset for a block (e.g.: table) but the common one for the rest of blocks.
--   Enable font size UI controls for all blocks but the headings block.
--   etc.
-
-### Styles are managed
-
-By using the `theme.json` file to set style properties in a structured way, the Block Editor can "manage" the CSS that comes from different origins (user, theme, and core CSS). For example, if a theme and a user set the font size for paragraphs, we only enqueue the style coming from the user and not the theme's.
-
-Some of the advantages are:
-
-- Reduce the amount of CSS enqueued.
-- Prevent specificity wars.
-
-### CSS Custom Properties: presets & custom
-
-There are some areas of styling that would benefit from having shared values that can change across a site.
-
-To address this need, we've started to experiment with CSS Custom Properties, aka CSS Variables, in some places:
-
-- **Presets**: [color palettes](/docs/how-to-guides/themes/theme-support.md#block-color-palettes), [font sizes](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or [gradients](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"color": {
-			"palette": [
-				{
-					"name": "Black",
-					"slug": "black",
-					"color": "#000000"
-				},
-				{
-					"name": "White",
-					"slug": "white",
-					"color": "#ffffff"
-				}
-			]
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	--wp--preset--color--black: #000000;
-	--wp--preset--color--white: #ffffff;
-}
-```
-
-{% end %}
-
--   **Custom properties**: there's also a mechanism to create your own CSS Custom Properties.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"custom": {
-			"line-height": {
-				"body": 1.7,
-				"heading": 1.3
-			}
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	--wp--custom--line-height--body: 1.7;
-	--wp--custom--line-height--heading: 1.3;
-}
-```
-
-{% end %}
-
-## Specification
-
-This specification is the same for the three different origins that use this format: core, themes, and users. Themes can override core's defaults by creating a file called `theme.json`. Users, via the site editor, will also be able to override theme's or core's preferences via an user interface that is being worked on.
-
-```json
-{
-	"version": 2,
-	"settings": {},
-	"styles": {},
-	"customTemplates": {},
-	"templateParts": {}
-}
-```
-
-### Version
-
-This field describes the format of the `theme.json` file. The current version is [v2](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/), [introduced in WordPress 5.9](https://make.wordpress.org/core/2022/01/08/updates-for-settings-styles-and-theme-json/). It also works with the current Gutenberg plugin.
-
-If you have used [v1](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-v1/) previously, you don’t need to update the version in the v1 file to v2, as it’ll be [migrated](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-migrations/) into v2 at runtime for you.
-
-
-### Settings
-
-<div class="callout callout-alert">
-The Gutenberg plugin extends the settings available from WordPress 5.8, so they can be used with other WordPress versions and they go through a maturation process before being ported to core.
-
-The tabs below show WordPress 5.8 supported settings and the ones supported by the Gutenberg plugin.
-</div>
-
-The settings section has the following structure:
-
-{% codetabs %}
-{% WordPress %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"border": {
-			"radius": false,
-			"color": false,
-			"style": false,
-			"width": false
-		},
-		"color": {
-			"custom": true,
-			"customDuotone": true,
-			"customGradient": true,
-			"duotone": [],
-			"gradients": [],
-			"link": false,
-			"palette": [],
-			"text": true,
-			"background": true,
-			"defaultGradients": true,
-			"defaultPalette": true
-		},
-		"custom": {},
-		"layout": {
-			"contentSize": "800px",
-			"wideSize": "1000px"
-		},
-		"spacing": {
-			"margin": false,
-			"padding": false,
-			"blockGap": null,
-			"units": [ "px", "em", "rem", "vh", "vw" ]
-		},
-		"typography": {
-			"customFontSize": true,
-			"lineHeight": false,
-			"dropCap": true,
-			"fontStyle": true,
-			"fontWeight": true,
-			"letterSpacing": true,
-			"textDecoration": true,
-			"textTransform": true,
-			"fontSizes": [],
-			"fontFamilies": []
-		},
-		"blocks": {
-			"core/paragraph": {
-				"color": {},
-				"custom": {},
-				"layout": {},
-				"spacing": {},
-				"typography": {}
-			},
-			"core/heading": {},
-			"etc": {}
-		}
-	}
-}
-```
-
-{% Gutenberg %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"appearanceTools": false,
-		"border": {
-			"color": false,
-			"radius": false,
-			"style": false,
-			"width": false
-		},
-		"color": {
-			"background": true,
-			"custom": true,
-			"customDuotone": true,
-			"customGradient": true,
-			"defaultGradients": true,
-			"defaultPalette": true,
-			"duotone": [],
-			"gradients": [],
-			"link": false,
-			"palette": [],
-			"text": true
-		},
-		"custom": {},
-		"layout": {
-			"contentSize": "800px",
-			"wideSize": "1000px"
-		},
-		"spacing": {
-			"blockGap": null,
-			"margin": false,
-			"padding": false,
-			"customSpacingSize": true,
-			"units": [ "px", "em", "rem", "vh", "vw" ],
-			"spacingScale": {
-				"operator": "*",
-				"increment": 1.5,
-				"steps": 7,
-				"mediumStep": 1.5,
-				"unit": "rem"
-			},
-			"spacingSizes": []
-		},
-		"typography": {
-			"customFontSize": true,
-			"dropCap": true,
-			"fontFamilies": [],
-			"fontSizes": [],
-			"fontStyle": true,
-			"fontWeight": true,
-			"letterSpacing": true,
-			"lineHeight": false,
-			"textDecoration": true,
-			"textTransform": true
-		},
-		"blocks": {
-			"core/paragraph": {
-				"border": {},
-				"color": {},
-				"custom": {},
-				"layout": {},
-				"spacing": {},
-				"typography": {}
-			},
-			"core/heading": {},
-			"etc": {}
-		}
-	}
-}
-```
-
-{% end %}
-
-Each block can configure any of these settings separately, providing a more fine-grained control over what exists via `add_theme_support`. The settings declared at the top-level affect to all blocks, unless a particular block overwrites it. It's a way to provide inheritance and configure all blocks at once.
-
-Note, however, that not all settings are relevant for all blocks. The settings section provides an opt-in/opt-out mechanism for themes, but it's the block's responsibility to add support for the features that are relevant to it. For example, if a block doesn't implement the `dropCap` feature, a theme can't enable it for such a block through `theme.json`.
-
-### Opt-in into UI controls
-
-There's one special setting property, `appearanceTools`, which is a boolean and its default value is false. Themes can use this setting to enable the following ones:
-
-- border: color, radius, style, width
-- color: link
-- spacing: blockGap, margin, padding
-- typography: lineHeight
-
-#### Backward compatibility with add_theme_support
-
-To retain backward compatibility, the existing `add_theme_support` declarations that configure the block editor are retrofit in the proper categories for the top-level section. For example, if a theme uses `add_theme_support('disable-custom-colors')`, it'll be the same as setting `settings.color.custom` to `false`. If the `theme.json` contains any settings, these will take precedence over the values declared via `add_theme_support`. This is the complete list of equivalences:
-
-| add_theme_support           | theme.json setting                                        |
-| --------------------------- | --------------------------------------------------------- |
-| `custom-line-height`        | Set `typography.lineHeight` to `true`.              |
-| `custom-spacing`            | Set `spacing.padding` to `true`.                    |
-| `custom-units`              | Provide the list of units via `spacing.units`.            |
-| `disable-custom-colors`     | Set `color.custom` to `false`.                            |
-| `disable-custom-font-sizes` | Set `typography.customFontSize` to `false`.               |
-| `disable-custom-gradients`  | Set `color.customGradient` to `false`.                    |
-| `editor-color-palette`      | Provide the list of colors via `color.palette`.           |
-| `editor-font-sizes`         | Provide the list of font size via `typography.fontSizes`. |
-| `editor-gradient-presets`   | Provide the list of gradients via `color.gradients`.      |
-| `experimental-link-color`   | Set `color.link` to `true`. `experimental-link-color` will be removed when the plugin requires WordPress 5.9 as the minimum version. |
-| `appearance-tools`          | Set `appearanceTools` to `true`.                          |
-
-#### Presets
-
-Presets are part of the settings section. They are values that are shown to the user via some UI controls. By defining them via `theme.json` the engine can do more for themes, such as automatically translate the preset name or enqueue the corresponding CSS classes and custom properties.
-
-The following presets can be defined via `theme.json`:
-
-- `color.duotone`: doesn't generate classes or custom properties.
-- `color.gradients`: generates a single class and custom property per preset value.
-- `color.palette`:
-    - generates 3 classes per preset value: color, background-color, and border-color.
-    - generates a single custom property per preset value.
-- `spacing.spacingScale`: used to generate an array of spacing preset sizes for use with padding, margin, and gap settings.
-    - `operator`: specifies how to calculate the steps with either `*` for multiplier, or `+` for sum.
-    - `increment`: the amount to increment each step by. Core by default uses a 'perfect 5th' multiplier of `1.5`.
-    - `steps`: the number of steps to generate in the spacing scale. The default is 7. To prevent the generation of the spacing presets, and to disable the related UI, this can be set to `0`.
-    - `mediumStep`: the steps in the scale are generated descending and ascending from a medium step, so this should be the size value of the medium space, without the unit. The default medium step is `1.5rem` so the mediumStep value is `1.5`.
-    - `unit`: the unit the scale uses, eg. `px, rem, em, %`. The default is `rem`.
-- `spacing.spacingSizes`: themes can choose to include a static `spacing.spacingSizes` array of spacing preset sizes if they have a sequence of sizes that can't be generated via an increment or mulitplier. 
-    - `name`: a human readable name for the size, eg. `Small, Medium, Large`.
-    - `slug`: the machine readable name. In order to provide the best cross site/theme compatibility the slugs should be in the format, "10","20","30","40","50","60", with "50" representing the `Medium` size value.
-    - `size`: the size, including the unit, eg. `1.5rem`. It is possible to include fluid values like `clamp(2rem, 10vw, 20rem)`. 
-- `typography.fontSizes`: generates a single class and custom property per preset value.
-- `typography.fontFamilies`: generates a single custom property per preset value.
-
-The naming schema for the classes and the custom properties is as follows:
-
-- Custom Properties: `--wp--preset--{preset-category}--{preset-slug}` such as `--wp--preset--color--black`
-- Classes: `.has-{preset-slug}-{preset-category}` such as `.has-black-color`.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"color": {
-			"duotone": [
-				{
-					"colors": [ "#000", "#FFF" ],
-					"slug": "black-and-white",
-					"name": "Black and White"
-				}
-			],
-			"gradients": [
-				{
-					"slug": "blush-bordeaux",
-					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
-					"name": "Blush bordeaux"
-				},
-				{
-					"slug": "blush-light-purple",
-					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
-					"name": "Blush light purple"
-				}
-			],
-			"palette": [
-				{
-					"slug": "strong-magenta",
-					"color": "#a156b4",
-					"name": "Strong magenta"
-				},
-				{
-					"slug": "very-dark-grey",
-					"color": "rgb(131, 12, 8)",
-					"name": "Very dark grey"
-				}
-			]
-		},
-		"typography": {
-			"fontFamilies": [
-				{
-					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell, \"Helvetica Neue\",sans-serif",
-					"slug": "system-font",
-					"name": "System Font"
-				},
-				{
-					"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
-					"slug": "helvetica-arial",
-					"name": "Helvetica or Arial"
-				}
-			],
-			"fontSizes": [
-				{
-					"slug": "big",
-					"size": 32,
-					"name": "Big"
-				},
-				{
-					"slug": "x-large",
-					"size": 46,
-					"name": "Large"
-				}
-			]
-		},
-		"spacing": {
-			"spacingScale": {
-				"operator": "*",
-				"increment": 1.5,
-				"steps": 7,
-				"mediumStep": 1.5,
-				"unit": "rem"
-			},
-			"spacingSizes": [
-				{
-					"slug": "40",
-					"size": "1rem",
-					"name": "Small"
-				},
-				{
-					"slug": "50",
-					"size": "1.5rem",
-					"name": "Medium"
-				},
-				{
-					"slug": "60",
-					"size": "2rem",
-					"name": "Large"
-				}
-			]
-		},
-		"blocks": {
-			"core/group": {
-				"color": {
-					"palette": [
-						{
-							"slug": "black",
-							"color": "#000000",
-							"name": "Black"
-						},
-						{
-							"slug": "white",
-							"color": "#ffffff",
-							"name": "White"
-						}
-					]
-				}
-			}
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-/* Top-level custom properties */
-body {
-	--wp--preset--color--strong-magenta: #a156b4;
-	--wp--preset--color--very-dark-grey: #444;
-	--wp--preset--gradient--blush-bordeaux: linear-gradient( 135deg, rgb( 254, 205, 165 ) 0%, rgb( 254, 45, 45 ) 50%, rgb( 107, 0, 62 ) 100% );
-	--wp--preset--gradient--blush-light-purple: linear-gradient( 135deg, rgb( 255, 206, 236 ) 0%, rgb( 152, 150, 240 ) 100% );
-	--wp--preset--font-size--x-large: 46;
-	--wp--preset--font-size--big: 32;
-	--wp--preset--font-family--helvetica-arial: Helvetica Neue, Helvetica, Arial, sans-serif;
-	--wp--preset--font-family--system: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell, \"Helvetica Neue\",sans-serif;
-	--wp--preset--spacing--20: 0.44rem;
-	--wp--preset--spacing--30: 0.67rem;
-	--wp--preset--spacing--40: 1rem;
-	--wp--preset--spacing--50: 1.5rem;
-	--wp--preset--spacing--60: 2.25rem;
-	--wp--preset--spacing--70: 3.38rem;
-	--wp--preset--spacing--80: 5.06rem;
-}
-
-/* Block-level custom properties (bounded to the group block) */
-.wp-block-group {
-	--wp--preset--color--black: #000000;
-	--wp--preset--color--white: #ffffff;
-}
-
-/* Top-level classes */
-.has-strong-magenta-color { color: #a156b4 !important; }
-.has-strong-magenta-background-color { background-color: #a156b4 !important; }
-.has-strong-magenta-border-color { border-color: #a156b4 !important; }
-.has-very-dark-grey-color { color: #444 !important; }
-.has-very-dark-grey-background-color { background-color: #444 !important; }
-.has-very-dark-grey-border-color { border-color: #444 !important; }
-.has-blush-bordeaux-background { background: linear-gradient( 135deg, rgb( 254, 205, 165 ) 0%, rgb( 254, 45, 45 ) 50%, rgb( 107, 0, 62 ) 100% ) !important; }
-.has-blush-light-purple-background { background: linear-gradient( 135deg, rgb( 255, 206, 236 ) 0%, rgb( 152, 150, 240 ) 100% ) !important; }
-.has-big-font-size { font-size: 32; }
-.has-normal-font-size { font-size: 16; }
-
-/* Block-level classes (bounded to the group block) */
-.wp-block-group.has-black-color { color: #a156b4 !important; }
-.wp-block-group.has-black-background-color { background-color: #a156b4 !important; }
-.wp-block-group.has-black-border-color { border-color: #a156b4 !important; }
-.wp-block-group.has-white-color { color: #444 !important; }
-.wp-block-group.has-white-background-color { background-color: #444 !important; }
-.wp-block-group.has-white-border-color { border-color: #444 !important; }
-
-```
-
-{% end %}
-
-To maintain backward compatibility, the presets declared via `add_theme_support` will also generate the CSS Custom Properties. If the `theme.json` contains any presets, these will take precedence over the ones declared via `add_theme_support`.
-
-Preset classes are attached to the content of a post by some user action. That's why the engine will add `!important` to these, because user styles should take precedence over theme styles.
-
-#### Custom
-
-In addition to create CSS Custom Properties for the presets, the `theme.json` also allows for themes to create their own, so they don't have to be enqueued separately. Any values declared within the `custom` field will be transformed to CSS Custom Properties following this naming schema: `--wp--custom--<variable-name>`.
-
-For example:
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"custom": {
-			"baseFont": 16,
-			"lineHeight": {
-				"small": 1.2,
-				"medium": 1.4,
-				"large": 1.8
-			}
-		},
-		"blocks": {
-			"core/group": {
-				"custom": {
-					"baseFont": 32
-				}
-			}
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	--wp--custom--base-font: 16;
-	--wp--custom--line-height--small: 1.2;
-	--wp--custom--line-height--medium: 1.4;
-	--wp--custom--line-height--large: 1.8;
-}
-.wp-block-group {
-	--wp--custom--base-font: 32;
-}
-```
-
-{% end %}
-
-Note that the name of the variable is created by adding `--` in between each nesting level and `camelCase` fields are transformed to `kebab-case`.
-
-#### Settings examples
-
-- Enable custom colors only for the paragraph block:
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"color": {
-			"custom": false
-		},
-		"blocks": {
-			"core/paragraph": {
-				"color": {
-					"custom": true
-				}
-			}
-		}
-	}
-}
-```
-
-- Disable border radius for the button block:
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"blocks": {
-			"core/button": {
-				"border": {
-					"radius": false
-				}
-			}
-		}
-	}
-}
-```
-
-- Provide the group block a different palette than the rest:
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"color": {
-			"palette": [
-				{
-					"slug": "black",
-					"color": "#000000",
-					"name": "Black"
-				},
-				{
-					"slug": "white",
-					"color": "#FFFFFF",
-					"name": "White"
-				},
-				{
-					"slug": "red",
-					"color": "#FF0000",
-					"name": "Red"
-				},
-				{
-					"slug": "green",
-					"color": "#00FF00",
-					"name": "Green"
-				},
-				{
-					"slug": "blue",
-					"color": "#0000FF",
-					"name": "Blue"
-				}
-			]
-		},
-		"blocks": {
-			"core/group": {
-				"color": {
-					"palette": [
-						{
-							"slug": "black",
-							"color": "#000000",
-							"name": "Black"
-						},
-						{
-							"slug": "white",
-							"color": "#FFF",
-							"name": "White"
-						}
-					]
-				}
-			}
-		}
-	}
-}
-```
-
-### Styles
-
-<div class="callout callout-alert">
-The Gutenberg plugin extends the styles available from WordPress 5.8, so they can be used with other WordPress versions and they go through a maturation process before being ported to core.
-
-The tabs below show WordPress 5.8 supported styles and the ones supported by the Gutenberg plugin.
-</div>
-
-Each block declares which style properties it exposes via the [block supports mechanism](/docs/reference-guides/block-api/block-supports.md). The support declarations are used to automatically generate the UI controls for the block in the editor. Themes can use any style property via the `theme.json` for any block ― it's the theme's responsibility to verify that it works properly according to the block markup, etc.
-
-{% codetabs %}
-
-{% WordPress %}
-
-```json
-{
-	"version": 2,
-	"styles": {
-		"border": {
-			"radius": "value",
-			"color": "value",
-			"style": "value",
-			"width": "value"
-		},
-		"filter": {
-			"duotone": "value"
-		},
-		"color": {
-			"background": "value",
-			"gradient": "value",
-			"text": "value"
-		},
-		"spacing": {
-			"blockGap": "value",
-			"margin": {
-				"top": "value",
-				"right": "value",
-				"bottom": "value",
-				"left": "value",
-			},
-			"padding": {
-				"top": "value",
-				"right": "value",
-				"bottom": "value",
-				"left": "value"
-			}
-		},
-		"typography": {
-			"fontSize": "value",
-			"fontStyle": "value",
-			"fontWeight": "value",
-			"letterSpacing": "value",
-			"lineHeight": "value",
-			"textDecoration": "value",
-			"textTransform": "value"
-		},
-		"elements": {
-			"link": {
-				"border": {},
-				"color": {},
-				"spacing": {},
-				"typography": {}
-			},
-			"h1": {},
-			"h2": {},
-			"h3": {},
-			"h4": {},
-			"h5": {},
-			"h6": {}
-		},
-		"blocks": {
-			"core/group": {
-				"border": {},
-				"color": {},
-				"spacing": {},
-				"typography": {},
-				"elements": {
-					"link": {},
-					"h1": {},
-					"h2": {},
-					"h3": {},
-					"h4": {},
-					"h5": {},
-					"h6": {}
-				}
-			},
-			"etc": {}
-		}
-	}
-}
-```
-
-{% Gutenberg %}
-
-```json
-{
-	"version": 2,
-	"styles": {
-		"border": {
-			"color": "value",
-			"radius": "value",
-			"style": "value",
-			"width": "value"
-		},
-		"color": {
-			"background": "value",
-			"gradient": "value",
-			"text": "value"
-		},
-		"filter": {
-			"duotone": "value"
-		},
-		"spacing": {
-			"blockGap": "value",
-			"margin": {
-				"top": "value",
-				"right": "value",
-				"bottom": "value",
-				"left": "value"
-			},
-			"padding": {
-				"top": "value",
-				"right": "value",
-				"bottom": "value",
-				"left": "value"
-			}
-		},
-		"typography": {
-			"fontFamily": "value",
-			"fontSize": "value",
-			"fontStyle": "value",
-			"fontWeight": "value",
-			"letterSpacing": "value",
-			"lineHeight": "value",
-			"textDecoration": "value",
-			"textTransform": "value"
-		},
-		"elements": {
-			"link": {
-				"border": {},
-				"color": {},
-				"spacing": {},
-				"typography": {}
-			},
-			"h1": {},
-			"h2": {},
-			"h3": {},
-			"h4": {},
-			"h5": {},
-			"h6": {},
-			"heading": {},
-			"button": {},
-			"caption": {}
-		},
-		"blocks": {
-			"core/group": {
-				"border": {},
-				"color": {},
-				"spacing": {},
-				"typography": {},
-				"elements": {
-					"link": {},
-					"h1": {},
-					"h2": {},
-					"h3": {},
-					"h4": {},
-					"h5": {},
-					"h6": {}
-				}
-			},
-			"etc": {}
-		}
-	}
-}
-```
-
-{% end %}
-
-### Top-level styles
-
-Styles found at the top-level will be enqueued using the `body` selector.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 1,
-	"styles": {
-		"color": {
-			"text": "var(--wp--preset--color--primary)"
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	color: var( --wp--preset--color--primary );
-}
-```
-
-{% end %}
-
-### Block styles
-
-Styles found within a block will be enqueued using the block selector.
-
-By default, the block selector is generated based on its name such as `.wp-block-<blockname-without-namespace>`. For example, `.wp-block-group` for the `core/group` block. There are some blocks that want to opt-out from this default behavior. They can do so by explicitly telling the system which selector to use for them via the `__experimentalSelector` key within the `supports` section of its `block.json` file. Note that the block needs to be registered server-side for the `__experimentalSelector` field to be available to the style engine.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 1,
-	"styles": {
-		"color": {
-			"text": "var(--wp--preset--color--primary)"
-		},
-		"blocks": {
-			"core/paragraph": {
-				"color": {
-					"text": "var(--wp--preset--color--secondary)"
-				}
-			},
-			"core/group": {
-				"color": {
-					"text": "var(--wp--preset--color--tertiary)"
-				}
-			}
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	color: var( --wp--preset--color--primary );
-}
-p { /* The core/paragraph opts out from the default behaviour and uses p as a selector. */
-	color: var( --wp--preset--color--secondary );
-}
-.wp-block-group {
-	color: var( --wp--preset--color--tertiary );
-}
-```
-
-{% end %}
-
-#### Referencing a style
-
-A block can be styled using a reference to a root level style. This feature is supported by Gutenberg.
-If you register a background color for the root using styles.color.background:
-
-```JSON
-"styles": {
-		"color": {
-			"background": "var(--wp--preset--color--primary)"
-		}
-	}
-```
-
-You can use `ref: "styles.color.background"`  to re-use the style for a block:
-
-```JSON
-{
-	"color": {
-		"text": { ref: "styles.color.background" }
-	}
-}
-```
-
-#### Element styles
-
-In addition to top-level and block-level styles, there's the concept of elements that can be used in both places. There's a closed set of them:
-
-Supported by Gutenberg:
-
-- `button`: maps to the `wp-element-button` CSS class. Also maps to `wp-block-button__link` for backwards compatibility.
-- `caption`: maps to the `.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` CSS classes.
-- `heading`: maps to all headings, the `h1 to h6` CSS selectors.
-
-Supported by WordPress:
-
-- `h1`: maps to the `h1` CSS selector.
-- `h2`: maps to the `h2` CSS selector.
-- `h3`: maps to the `h3` CSS selector.
-- `h4`: maps to the `h4` CSS selector.
-- `h5`: maps to the `h5` CSS selector.
-- `h6`: maps to the `h6` CSS selector.
-- `link`: maps to the `a` CSS selector.
-
-If they're found in the top-level the element selector will be used. If they're found within a block, the selector to be used will be the element's appended to the corresponding block.
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 1,
-	"styles": {
-		"typography": {
-			"fontSize": "var(--wp--preset--font-size--normal)"
-		},
-		"elements": {
-			"h1": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--huge)"
-				}
-			},
-			"h2": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--big)"
-				}
-			},
-			"h3": {
-				"typography": {
-					"fontSize": "var(--wp--preset--font-size--medium)"
-				}
-			}
-		},
-		"blocks": {
-			"core/group": {
-				"elements": {
-					"h2": {
-						"typography": {
-							"fontSize": "var(--wp--preset--font-size--small)"
-						}
-					},
-					"h3": {
-						"typography": {
-							"fontSize": "var(--wp--preset--font-size--smaller)"
-						}
-					}
-				}
-			}
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	font-size: var( --wp--preset--font-size--normal );
-}
-h1 {
-	font-size: var( --wp--preset--font-size--huge );
-}
-h2 {
-	font-size: var( --wp--preset--font-size--big );
-}
-h3 {
-	font-size: var( --wp--preset--font-size--medium );
-}
-.wp-block-group h2 {
-	font-size: var( --wp--preset--font-size--small );
-}
-.wp-block-group h3 {
-	font-size: var( --wp--preset--font-size--smaller );
-}
-```
-
-{% end %}
-
-##### Element pseudo selectors
-
-Pseudo selectors `:hover`, `:focus`, `:visited` are supported by Gutenberg.
-
-```json
-"elements": {
-		"link": {
-			"color": {
-				"text": "green"
-			},
-			":hover": {
-				"color": {
-					"text": "hotpink"
-				}
-			}
-		}
-	}
-```
-
-### customTemplates
-
-<div class="callout callout-alert">Supported in WordPress from version 5.9.</div>
-
-Within this field themes can list the custom templates present in the `templates` folder. For example, for a custom template named `my-custom-template.html`, the `theme.json` can declare what post types can use it and what's the title to show the user:
-
-- name: mandatory.
-- title: mandatory, translatable.
-- postTypes: optional, only applies to the `page` by default.
-
-```json
-{
-    "version": 2,
-	"customTemplates": [
-		{
-			"name": "my-custom-template",
-			"title": "The template title",
-			"postTypes": [
-				"page",
-				"post",
-				"my-cpt"
-			]
-		}
-	]
-}
-```
-
-### templateParts
-
-<div class="callout callout-alert">Supported in WordPress from version 5.9.</div>
-
-Within this field themes can list the template parts present in the `parts` folder. For example, for a template part named `my-template-part.html`, the `theme.json` can declare the area term for the template part entity which is responsible for rendering the corresponding block variation (Header block, Footer block, etc.) in the editor. Defining this area term in the json will allow the setting to persist across all uses of that template part entity, as opposed to a block attribute that would only affect one block. Defining area as a block attribute is not recommended as this is only used 'behind the scenes' to aid in bridging the gap between placeholder flows and entity creation.
-
-Currently block variations exist for "header" and "footer" values of the area term, any other values and template parts not defined in the json will default to the general template part block. Variations will be denoted by specific icons within the editor's interface, will default to the corresponding semantic HTML element for the wrapper (this can also be overridden by the `tagName` attribute set on the template part block), and will contextualize the template part allowing more custom flows in future editor improvements.
-
-- name: mandatory.
-- title: optional, translatable.
-- area: optional, will be set to `uncategorized` by default and trigger no block variation.
-
-```json
-{
-    "version": 2,
-	"templateParts": [
-		{
-			"name": "my-template-part",
-			"title": "Header",
-			"area": "header"
-		}
-	]
-}
-```
-
-### patterns
-
-<div class="callout callout-alert">Supported in WordPress from version 6.0 using [version 2](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/) of `theme.json`.</div>
-
-Within this field themes can list patterns to register from [Pattern Directory](https://wordpress.org/patterns/). The `patterns` field is an array of pattern `slugs` from the Pattern Directory. Pattern slugs can be extracted by the `url` in single pattern view at the Pattern Directory. For example in this url `https://wordpress.org/patterns/pattern/partner-logos` the slug is `partner-logos`.
-
-```json
-{
-	"version": 2,
-	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
-}
-```
-
-## Developing with theme.json
-
-It can be difficult to remember the theme.json settings and properties while you develop, so a JSON scheme was created to help. The schema is available at https://schemas.wp.org/trunk/theme.json
-
-Code editors can pick up the schema and can provide help like tooltips, autocomplete, or schema validation in the editor. To use the schema in Visual Studio Code, add `"$schema": "https://schemas.wp.org/trunk/theme.json"` to the beginning of your theme.json file.
-
-![Example using validation with schema](https://developer.wordpress.org/files/2021/11/theme-json-schema-updated.gif)
-
-
-## Frequently Asked Questions
-
-### The naming schema of CSS Custom Properties
-
-One thing you may have noticed is the naming schema used for the CSS Custom Properties the system creates, including the use of double hyphen, `--`, to separate the different "concepts". Take the following examples.
-
-**Presets** such as `--wp--preset--color--black` can be divided into the following chunks:
-
-- `--wp`: prefix to namespace the CSS variable.
-- `preset `: indicates is a CSS variable that belongs to the presets.
-- `color`: indicates which preset category the variable belongs to. It can be `color`, `font-size`, `gradients`.
-- `black`: the `slug` of the particular preset value.
-
-**Custom** properties such as `--wp--custom--line-height--body`, which can be divided into the following chunks:
-
-- `--wp`: prefix to namespace the CSS variable.
-- `custom`: indicates is a "free-form" CSS variable created by the theme.
-- `line-height--body`: the result of converting the "custom" object keys into a string.
-
-The `--` as a separator has two functions:
-
-- Readability, for human understanding. It can be thought as similar to the BEM naming schema, it separates "categories".
-- Parsability, for machine understanding. Using a defined structure allows machines to understand the meaning of the property `--wp--preset--color--black`: it's a value bounded to the color preset whose slug is "black", which then gives us room to do more things with them.
-
-### Why using `--` as a separator?
-
-We could have used any other separator, such as a single `-`.
-
-However, that'd have been problematic, as it'd have been impossible to tell how `--wp-custom-line-height-template-header` should be converted back into an object, unless we force theme authors not to use `-` in their variable names.
-
-By reserving `--` as a category separator and let theme authors use `-` for word-boundaries, the naming is clearer: `--wp--custom--line-height--template-header`.
-
-### How settings under "custom" create new CSS Custom Properties
-
-The algorithm to create CSS Variables out of the settings under the "custom" key works this way:
-
-This is for clarity, but also because we want a mechanism to parse back a variable name such `--wp--custom--line-height--body` to its object form in theme.json. We use the same separation for presets.
-
-For example:
-
-{% codetabs %}
-{% Input %}
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"custom": {
-			"lineHeight": {
-				"body": 1.7
-			},
-			"font-primary": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
-		}
-	}
-}
-```
-
-{% Output %}
-
-```css
-body {
-	--wp--custom--line-height--body: 1.7;
-	--wp--custom--font-primary: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
-}
-```
-
-{% end %}
-
-A few notes about this process:
-
-- `camelCased` keys are transformed into its `kebab-case` form, as to follow the CSS property naming schema. Example: `lineHeight` is transformed into `line-height`.
-- Keys at different depth levels are separated by `--`. That's why `line-height` and `body` are separated by `--`.
-- You shouldn't use `--` in the names of the keys within the `custom` object. Example, **don't do** this:
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"custom": {
-			"line--height": { // DO NOT DO THIS
-				"body": 1.7
-			}
-		}
-	}
-}
-```
-
-### Global Stylesheet
-
-In WordPress 5.8, the CSS for some of the presets defined by WordPress (font sizes, colors, and gradients) was loaded twice for most themes: in the block-library stylesheet plus in the global stylesheet. Additionally, there were slight differences in the CSS in both places.
-
-In WordPress 5.9 release, CSS of presets are consolidated into the global stylesheet, that is now loaded for all themes. Each preset value generates a single CSS Custom Property and a class, as in:
-
-```css
-/* CSS Custom Properties for the preset values */
-body {
-  --wp--preset--<PRESET_TYPE>--<PRESET_SLUG>: <DEFAULT_VALUE>;
-  --wp--preset--color--pale-pink: #f78da7;
-  --wp--preset--font-size--large: 36px;
-  /* etc. */
-}
-
-/* CSS classes for the preset values */
-.has-<PRESET_SLUG>-<PRESET_TYPE> { ... }
-.has-pale-pink-color { color: var(--wp--preset--color--pale-pink) !important; }
-.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
-```
-
-For themes to override the default values they can use the `theme.json` and provide the same slug. Themes that do not use a `theme.json` can still override the default values by enqueuing some CSS that sets the corresponding CSS Custom Property.
-
-`Example` (sets a new value for the default large font size):
-
-```css
-body {
- --wp--preset--font-size--large: <NEW_VALUE>;
-}
-```
-
-### Specificity for link colors provided by the user
-
-In v1, when a user selected a link color for a specific block we attached a class to that block in the form of `.wp-element-<ID>` and then enqueued the following style:
-
-```css
-.wp-element-<ID> a { color: <USER_COLOR_VALUE> !important; }
-```
-
-While this preserved user preferences at all times, the specificity was too strong and conflicted with some blocks with legit uses of an HTML element that shouldn’t be considered links. To [address this issue](https://github.com/WordPress/gutenberg/pull/34689), in WordPress 5.9 release, the `!important` was removed and updated the corresponding blocks to style the a elements with a specificity higher than the user link color, which now is:
-
-```css
-.wp-element-<ID> a { color: <USER_COLOR_VALUE>; }
-```
-
-As a result of this change, it’s now the block author and theme author’s responsibility to make sure the user choices are respected at all times and that the link color provided by the user (specificity 011) is not overridden.
-
-### What is blockGap and how can I use it?
-
-For blocks that contain inner blocks, such as Group, Columns, Buttons, and Social Icons, `blockGap` controls the spacing between inner blocks. Depending on the layout of the block, the `blockGap` value will be output as either a vertical margin or a `gap` value. In the editor, the control for the `blockGap` value is called _Block spacing_, located in the Dimensions panel.
-
-```json
-{
-	"version": 2,
-	"settings": {
-		"spacing": {
-			"blockGap": true,
-		}
-	},
-	"styles": {
-		"spacing": {
-			"blockGap": "1.5rem"
-		}
-	}
-}
-```
-
-The setting for `blockGap` is either a boolean or `null` value and is `null` by default. This allows an extra level of control over style output. The `settings.spacing.blockGap` setting in a `theme.json` file accepts the following values:
-
-- `true`: Opt into displaying _Block spacing_ controls in the editor UI and output `blockGap` styles.
-- `false`: Opt out of displaying _Block spacing_ controls in the editor UI, with `blockGap` styles stored in `theme.json` still being rendered. This allows themes to use `blockGap` values without allowing users to make changes within the editor.
-- `null` (default): Opt out of displaying _Block spacing_ controls, _and_ prevent the output of `blockGap` styles.
-
-The value defined for the root `styles.spacing.blockGap` style is also output as a CSS property, named `--wp--style--block-gap`.
-
-### Why does it take so long to update the styles in the browser?
-
-When you are actively developing with theme.json you may notice it takes 30+ seconds for your changes to show up in the browser, this is because `theme.json` is cached. To remove this caching issue, set either [`WP_DEBUG`](https://wordpress.org/support/article/debugging-in-wordpress/#wp_debug) or [`SCRIPT_DEBUG`](https://wordpress.org/support/article/debugging-in-wordpress/#script_debug) to 'true' in your [`wp-config.php`](https://wordpress.org/support/article/editing-wp-config-php/). This tells WordPress to skip the cache and always use fresh data.
diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md
index 562b0c502e58ca..e5d6c34e4081ce 100644
--- a/docs/how-to-guides/themes/theme-support.md
+++ b/docs/how-to-guides/themes/theme-support.md
@@ -52,7 +52,9 @@ add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );
 
 Core blocks include default structural styles. These are loaded in both the editor and the front end by default. An example of these styles is the CSS that powers the columns block. Without these rules, the block would result in a broken layout containing no columns at all.
 
-The block editor allows themes to opt-in to slightly more opinionated styles for the front end. An example of these styles is the default color bar to the left of blockquotes. If you'd like to use these opinionated styles in your theme, add theme support for `wp-block-styles`:
+### Opinionated block styles
+
+The block editor allows themes to opt in to slightly more opinionated styles for the front end. An example of these styles is the default color bar to the left of blockquotes. If you'd like to use these opinionated styles in a classic theme, add theme support for `wp-block-styles`:
 
 ```php
 add_theme_support( 'wp-block-styles' );
@@ -60,6 +62,8 @@ add_theme_support( 'wp-block-styles' );
 
 You can see the CSS that will be included in the [block library theme file](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/theme.scss).
 
+For block themes or themes providing a `theme.json` file, it is not recommended to use this theme support. Instead, to ensure there is no styling conflict between global styles rules and block styles, add the desired block styles to the theme's `theme.json` file.
+
 ### Wide Alignment:
 
 Some blocks such as the image block have the possibility to define a "wide" or "full" alignment by adding the corresponding classname to the block's wrapper ( `alignwide` or `alignfull` ). A theme can opt-in for this feature by calling:
@@ -136,16 +140,16 @@ The colors will be shown in order on the palette, and there's no limit to how ma
 Themes are responsible for creating the classes that apply the colors in different contexts. Core blocks use "color", "background-color", and "border-color" contexts. So to correctly apply "strong magenta" to all contexts of core blocks a theme should implement the classes itself. The class name is built appending 'has-', followed by the class name _using_ kebab case and ending with the context name.
 
 ```css
-.has-strong-magenta-background-color {
-	background-color: #a156b4;
-}
-
 .has-strong-magenta-color {
 	color: #a156b4;
 }
 
+.has-strong-magenta-background-color {
+	background-color: #a156b4;
+}
+
 .has-strong-magenta-border-color {
-	color: #a156b4;
+	border-color: #a156b4;
 }
 ```
 
@@ -315,7 +319,7 @@ Themes can opt out of generated block layout styles that provide default structu
 add_theme_support( 'disable-layout-styles' );
 ```
 
-For themes looking to customize `blockGap` styles or block spacing, see [the developer docs on Global Settings & Styles](/docs/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it).
+For themes looking to customize `blockGap` styles or block spacing, see [the developer docs on Global Settings & Styles](/docs/how-to-guides/themes/global-settings-and-styles.md#what-is-blockgap-and-how-can-i-use-it).
 
 ### Supporting custom line heights
 
@@ -434,11 +438,10 @@ add_theme_support( 'custom-spacing' );
 
 ## Link color control
 
-Link support has been made stable as part of WordPress 5.8. It's `false` by default and themes can enable it via the [theme.json file](./theme-json.md):
+Link support has been made stable as part of WordPress 5.8. It's `false` by default and themes can enable it via the [theme.json file](/docs/how-to-guides/curating-the-editor-experience/theme-json.md):
 
 ```json
 {
-	"version": 1,
 	"settings": {
 		"color": {
 			"link": true
@@ -472,11 +475,29 @@ Use this setting to enable the following Global Styles settings:
 - color: link
 - spacing: blockGap, margin, padding
 - typography: lineHeight
+- dimensions: aspectRatio, minHeight
+- position: sticky
 
 ```php
 add_theme_support( 'appearance-tools' );
 ```
 
+## Border
+
+Use this to enable all border settings:
+
+```php
+add_theme_support( 'border' );
+```
+
+## Link color
+
+Use this to enable the link color setting:
+
+```php
+add_theme_support( 'link-color' );
+```
+
 ## Block Based Template Parts
 
 Block Based Template parts allow administrators to edit parts of the site using blocks. This is off by default, and requires the theme to opt in by declaring support:
diff --git a/docs/how-to-guides/widgets/legacy-widget-block.md b/docs/how-to-guides/widgets/legacy-widget-block.md
index e349829acb25c8..80353f5d690658 100644
--- a/docs/how-to-guides/widgets/legacy-widget-block.md
+++ b/docs/how-to-guides/widgets/legacy-widget-block.md
@@ -18,7 +18,7 @@ For example, a widget might want to show a "Password" field when the "Change pas
 
 ```js
 ( function ( $ ) {
-	$( document ).on( 'widget-added', function ( $control ) {
+	$( document ).on( 'widget-added', function ( $event, $control ) {
 		$control.find( '.change-password' ).on( 'change', function () {
 			var isChecked = $( this ).prop( 'checked' );
 			$control.find( '.password' ).toggleClass( 'hidden', ! isChecked );
diff --git a/docs/manifest.json b/docs/manifest.json
index 8cc39af57531e4..8f267e79ef4feb 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -12,75 +12,111 @@
 		"parent": null
 	},
 	{
-		"title": "Development Environment",
+		"title": "Block Development Environment",
 		"slug": "devenv",
 		"markdown_source": "../docs/getting-started/devenv/README.md",
 		"parent": "getting-started"
 	},
 	{
-		"title": "How to setup local WordPress environment on Ubuntu",
-		"slug": "docker-ubuntu",
-		"markdown_source": "../docs/getting-started/devenv/docker-ubuntu.md",
+		"title": "Node.js development environment",
+		"slug": "nodejs-development-environment",
+		"markdown_source": "../docs/getting-started/devenv/nodejs-development-environment.md",
 		"parent": "devenv"
 	},
 	{
-		"title": "Create a Block Tutorial",
-		"slug": "create-block",
-		"markdown_source": "../docs/getting-started/create-block/README.md",
+		"title": "Get started with wp-env",
+		"slug": "get-started-with-wp-env",
+		"markdown_source": "../docs/getting-started/devenv/get-started-with-wp-env.md",
+		"parent": "devenv"
+	},
+	{
+		"title": "Get started with create-block",
+		"slug": "get-started-with-create-block",
+		"markdown_source": "../docs/getting-started/devenv/get-started-with-create-block.md",
+		"parent": "devenv"
+	},
+	{
+		"title": "Get started with wp-scripts",
+		"slug": "get-started-with-wp-scripts",
+		"markdown_source": "../docs/getting-started/devenv/get-started-with-wp-scripts.md",
+		"parent": "devenv"
+	},
+	{
+		"title": "Quick Start Guide",
+		"slug": "quick-start-guide",
+		"markdown_source": "../docs/getting-started/quick-start-guide.md",
+		"parent": "getting-started"
+	},
+	{
+		"title": "Tutorial: Build your first block",
+		"slug": "tutorial",
+		"markdown_source": "../docs/getting-started/tutorial.md",
 		"parent": "getting-started"
 	},
 	{
-		"title": "WordPress Plugin",
-		"slug": "wp-plugin",
-		"markdown_source": "../docs/getting-started/create-block/wp-plugin.md",
-		"parent": "create-block"
+		"title": "Fundamentals of Block Development",
+		"slug": "fundamentals",
+		"markdown_source": "../docs/getting-started/fundamentals/README.md",
+		"parent": "getting-started"
+	},
+	{
+		"title": "File structure of a block",
+		"slug": "file-structure-of-a-block",
+		"markdown_source": "../docs/getting-started/fundamentals/file-structure-of-a-block.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Anatomy of a Block",
-		"slug": "block-anatomy",
-		"markdown_source": "../docs/getting-started/create-block/block-anatomy.md",
-		"parent": "create-block"
+		"title": "block.json",
+		"slug": "block-json",
+		"markdown_source": "../docs/getting-started/fundamentals/block-json.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Block Attributes",
-		"slug": "attributes",
-		"markdown_source": "../docs/getting-started/create-block/attributes.md",
-		"parent": "create-block"
+		"title": "Registration of a block",
+		"slug": "registration-of-a-block",
+		"markdown_source": "../docs/getting-started/fundamentals/registration-of-a-block.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Code Implementation",
-		"slug": "block-code",
-		"markdown_source": "../docs/getting-started/create-block/block-code.md",
-		"parent": "create-block"
+		"title": "The block wrapper",
+		"slug": "block-wrapper",
+		"markdown_source": "../docs/getting-started/fundamentals/block-wrapper.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Authoring Experience",
-		"slug": "author-experience",
-		"markdown_source": "../docs/getting-started/create-block/author-experience.md",
-		"parent": "create-block"
+		"title": "The block in the Editor",
+		"slug": "block-in-the-editor",
+		"markdown_source": "../docs/getting-started/fundamentals/block-in-the-editor.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Finishing Touches",
-		"slug": "finishing",
-		"markdown_source": "../docs/getting-started/create-block/finishing.md",
-		"parent": "create-block"
+		"title": "Markup representation of a block",
+		"slug": "markup-representation-block",
+		"markdown_source": "../docs/getting-started/fundamentals/markup-representation-block.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Share your Block with the World",
-		"slug": "submitting-to-block-directory",
-		"markdown_source": "../docs/getting-started/create-block/submitting-to-block-directory.md",
-		"parent": "create-block"
+		"title": "Static or Dynamic rendering of a block",
+		"slug": "static-dynamic-rendering",
+		"markdown_source": "../docs/getting-started/fundamentals/static-dynamic-rendering.md",
+		"parent": "fundamentals"
 	},
 	{
-		"title": "Full Site Editing",
-		"slug": "full-site-editing",
-		"markdown_source": "../docs/getting-started/full-site-editing.md",
+		"title": "Working with JavaScript for the Block Editor",
+		"slug": "javascript-in-the-block-editor",
+		"markdown_source": "../docs/getting-started/fundamentals/javascript-in-the-block-editor.md",
+		"parent": "fundamentals"
+	},
+	{
+		"title": "Glossary",
+		"slug": "glossary",
+		"markdown_source": "../docs/getting-started/glossary.md",
 		"parent": "getting-started"
 	},
 	{
-		"title": "Outreach",
-		"slug": "outreach",
-		"markdown_source": "../docs/getting-started/outreach.md",
+		"title": "Frequently Asked Questions",
+		"slug": "faq",
+		"markdown_source": "../docs/getting-started/faq.md",
 		"parent": "getting-started"
 	},
 	{
@@ -101,54 +137,18 @@
 		"markdown_source": "../docs/how-to-guides/block-tutorial/README.md",
 		"parent": "how-to-guides"
 	},
-	{
-		"title": "Create a basic block",
-		"slug": "writing-your-first-block-type",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/writing-your-first-block-type.md",
-		"parent": "block-tutorial"
-	},
 	{
 		"title": "Use styles and stylesheets",
 		"slug": "applying-styles-with-stylesheets",
 		"markdown_source": "../docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md",
 		"parent": "block-tutorial"
 	},
-	{
-		"title": "Introducing Attributes and Editable Fields",
-		"slug": "introducing-attributes-and-editable-fields",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md",
-		"parent": "block-tutorial"
-	},
-	{
-		"title": "Block Controls: Block Toolbar and Settings Sidebar",
-		"slug": "block-controls-toolbar-and-sidebar",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md",
-		"parent": "block-tutorial"
-	},
-	{
-		"title": "Block Supports",
-		"slug": "block-supports-in-static-blocks",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md",
-		"parent": "block-tutorial"
-	},
 	{
 		"title": "Creating dynamic blocks",
 		"slug": "creating-dynamic-blocks",
 		"markdown_source": "../docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md",
 		"parent": "block-tutorial"
 	},
-	{
-		"title": "Block Supports in dynamic blocks",
-		"slug": "block-supports-in-dynamic-blocks",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md",
-		"parent": "block-tutorial"
-	},
-	{
-		"title": "Generate Blocks with WP-CLI",
-		"slug": "generate-blocks-with-wp-cli",
-		"markdown_source": "../docs/how-to-guides/block-tutorial/generate-blocks-with-wp-cli.md",
-		"parent": "block-tutorial"
-	},
 	{
 		"title": "Nested Blocks: Using InnerBlocks",
 		"slug": "nested-blocks-inner-blocks",
@@ -170,15 +170,9 @@
 	{
 		"title": "Building a custom block editor",
 		"slug": "custom-block-editor",
-		"markdown_source": "../docs/how-to-guides/platform/custom-block-editor/README.md",
+		"markdown_source": "../docs/how-to-guides/platform/custom-block-editor.md",
 		"parent": "platform"
 	},
-	{
-		"title": "Tutorial: building a custom block editor",
-		"slug": "tutorial",
-		"markdown_source": "../docs/how-to-guides/platform/custom-block-editor/tutorial.md",
-		"parent": "custom-block-editor"
-	},
 	{
 		"title": "Create your First App with Gutenberg Data",
 		"slug": "data-basics",
@@ -204,7 +198,7 @@
 		"parent": "data-basics"
 	},
 	{
-		"title": "Part 4: Building a Create page form",
+		"title": "Building a Create page form",
 		"slug": "4-building-a-create-page-form",
 		"markdown_source": "../docs/how-to-guides/data-basics/4-building-a-create-page-form.md",
 		"parent": "data-basics"
@@ -218,74 +212,56 @@
 	{
 		"title": "Curating the Editor Experience",
 		"slug": "curating-the-editor-experience",
-		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience.md",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/README.md",
 		"parent": "how-to-guides"
 	},
 	{
-		"title": "Feature Flags",
-		"slug": "feature-flags",
-		"markdown_source": "../docs/how-to-guides/feature-flags.md",
-		"parent": "how-to-guides"
+		"title": "Block Locking API",
+		"slug": "block-locking",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/block-locking.md",
+		"parent": "curating-the-editor-experience"
 	},
 	{
-		"title": "Formatting Toolbar API",
-		"slug": "format-api",
-		"markdown_source": "../docs/how-to-guides/format-api.md",
-		"parent": "how-to-guides"
-	},
-	{
-		"title": "How to use JavaScript with the Block Editor",
-		"slug": "javascript",
-		"markdown_source": "../docs/how-to-guides/javascript/README.md",
-		"parent": "how-to-guides"
-	},
-	{
-		"title": "Plugins Background",
-		"slug": "plugins-background",
-		"markdown_source": "../docs/how-to-guides/javascript/plugins-background.md",
-		"parent": "javascript"
-	},
-	{
-		"title": "Loading JavaScript",
-		"slug": "loading-javascript",
-		"markdown_source": "../docs/how-to-guides/javascript/loading-javascript.md",
-		"parent": "javascript"
+		"title": "Patterns",
+		"slug": "patterns",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/patterns.md",
+		"parent": "curating-the-editor-experience"
 	},
 	{
-		"title": "Extending the Block Editor",
-		"slug": "extending-the-block-editor",
-		"markdown_source": "../docs/how-to-guides/javascript/extending-the-block-editor.md",
-		"parent": "javascript"
+		"title": "theme.json",
+		"slug": "theme-json",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/theme-json.md",
+		"parent": "curating-the-editor-experience"
 	},
 	{
-		"title": "Troubleshooting",
-		"slug": "troubleshooting",
-		"markdown_source": "../docs/how-to-guides/javascript/troubleshooting.md",
-		"parent": "javascript"
+		"title": "Filters and hooks",
+		"slug": "filters-and-hooks",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md",
+		"parent": "curating-the-editor-experience"
 	},
 	{
-		"title": "JavaScript Versions and Build Step",
-		"slug": "versions-and-building",
-		"markdown_source": "../docs/how-to-guides/javascript/versions-and-building.md",
-		"parent": "javascript"
+		"title": "Disable Editor functionality",
+		"slug": "disable-editor-functionality",
+		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md",
+		"parent": "curating-the-editor-experience"
 	},
 	{
-		"title": "Scope Your Code",
-		"slug": "scope-your-code",
-		"markdown_source": "../docs/how-to-guides/javascript/scope-your-code.md",
-		"parent": "javascript"
+		"title": "Enqueueing assets in the Editor",
+		"slug": "enqueueing-assets-in-the-editor",
+		"markdown_source": "../docs/how-to-guides/enqueueing-assets-in-the-editor.md",
+		"parent": "how-to-guides"
 	},
 	{
-		"title": "JavaScript Build Setup",
-		"slug": "js-build-setup",
-		"markdown_source": "../docs/how-to-guides/javascript/js-build-setup.md",
-		"parent": "javascript"
+		"title": "Feature Flags",
+		"slug": "feature-flags",
+		"markdown_source": "../docs/how-to-guides/feature-flags.md",
+		"parent": "how-to-guides"
 	},
 	{
-		"title": "ESNext Syntax",
-		"slug": "esnext-js",
-		"markdown_source": "../docs/how-to-guides/javascript/esnext-js.md",
-		"parent": "javascript"
+		"title": "Formatting Toolbar API",
+		"slug": "format-api",
+		"markdown_source": "../docs/how-to-guides/format-api.md",
+		"parent": "how-to-guides"
 	},
 	{
 		"title": "Internationalization",
@@ -323,16 +299,10 @@
 		"markdown_source": "../docs/how-to-guides/themes/README.md",
 		"parent": "how-to-guides"
 	},
-	{
-		"title": "Block Theme",
-		"slug": "block-theme-overview",
-		"markdown_source": "../docs/how-to-guides/themes/block-theme-overview.md",
-		"parent": "themes"
-	},
 	{
 		"title": "Global Settings & Styles (theme.json)",
-		"slug": "theme-json",
-		"markdown_source": "../docs/how-to-guides/themes/theme-json.md",
+		"slug": "global-settings-and-styles",
+		"markdown_source": "../docs/how-to-guides/themes/global-settings-and-styles.md",
 		"parent": "themes"
 	},
 	{
@@ -401,6 +371,12 @@
 		"markdown_source": "../docs/reference-guides/block-api/block-attributes.md",
 		"parent": "block-api"
 	},
+	{
+		"title": "Bindings",
+		"slug": "block-bindings",
+		"markdown_source": "../docs/reference-guides/block-api/block-bindings.md",
+		"parent": "block-api"
+	},
 	{
 		"title": "Context",
 		"slug": "block-context",
@@ -437,6 +413,12 @@
 		"markdown_source": "../docs/reference-guides/block-api/block-registration.md",
 		"parent": "block-api"
 	},
+	{
+		"title": "Selectors",
+		"slug": "block-selectors",
+		"markdown_source": "../docs/reference-guides/block-api/block-selectors.md",
+		"parent": "block-api"
+	},
 	{
 		"title": "Styles",
 		"slug": "block-styles",
@@ -450,7 +432,7 @@
 		"parent": "block-api"
 	},
 	{
-		"title": "Block Templates",
+		"title": "Templates",
 		"slug": "block-templates",
 		"markdown_source": "../docs/reference-guides/block-api/block-templates.md",
 		"parent": "block-api"
@@ -480,7 +462,7 @@
 		"parent": "reference-guides"
 	},
 	{
-		"title": "Block Hooks",
+		"title": "Block Filters",
 		"slug": "block-filters",
 		"markdown_source": "../docs/reference-guides/filters/block-filters.md",
 		"parent": "filters"
@@ -515,6 +497,66 @@
 		"markdown_source": "../docs/reference-guides/filters/global-styles-filters.md",
 		"parent": "filters"
 	},
+	{
+		"title": "Interactivity API Reference",
+		"slug": "interactivity-api",
+		"markdown_source": "../docs/reference-guides/interactivity-api/README.md",
+		"parent": "reference-guides"
+	},
+	{
+		"title": "Core Concepts",
+		"slug": "core-concepts",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/README.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "The Reactive and Declarative mindset",
+		"slug": "the-reactive-and-declarative-mindset",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Understanding global state, local context and derived state",
+		"slug": "undestanding-global-state-local-context-and-derived-state",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Server-side rendering: Processing directives on the server",
+		"slug": "server-side-rendering",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Using TypeScript",
+		"slug": "using-typescript",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/using-typescript.md",
+		"parent": "core-concepts"
+	},
+	{
+		"title": "Quick start guide",
+		"slug": "iapi-quick-start-guide",
+		"markdown_source": "../docs/reference-guides/interactivity-api/iapi-quick-start-guide.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "API Reference",
+		"slug": "api-reference",
+		"markdown_source": "../docs/reference-guides/interactivity-api/api-reference.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "About the Interactivity API",
+		"slug": "iapi-about",
+		"markdown_source": "../docs/reference-guides/interactivity-api/iapi-about.md",
+		"parent": "interactivity-api"
+	},
+	{
+		"title": "Frequently Asked Questions",
+		"slug": "iapi-faq",
+		"markdown_source": "../docs/reference-guides/interactivity-api/iapi-faq.md",
+		"parent": "interactivity-api"
+	},
 	{
 		"title": "SlotFills Reference",
 		"slug": "slotfills",
@@ -588,23 +630,35 @@
 		"parent": "reference-guides"
 	},
 	{
-		"title": "Version 2 (living reference)",
+		"title": "Theme.json Version 3 Reference (latest)",
 		"slug": "theme-json-living",
 		"markdown_source": "../docs/reference-guides/theme-json-reference/theme-json-living.md",
 		"parent": "theme-json-reference"
 	},
 	{
-		"title": "Version 1 Reference",
+		"title": "Theme.json Version 1 Reference",
 		"slug": "theme-json-v1",
 		"markdown_source": "../docs/reference-guides/theme-json-reference/theme-json-v1.md",
 		"parent": "theme-json-reference"
 	},
 	{
-		"title": "Migrating to Newer Versions",
+		"title": "Theme.json Version 2 Reference",
+		"slug": "theme-json-v2",
+		"markdown_source": "../docs/reference-guides/theme-json-reference/theme-json-v2.md",
+		"parent": "theme-json-reference"
+	},
+	{
+		"title": "Migrating Theme.json to Newer Versions",
 		"slug": "theme-json-migrations",
 		"markdown_source": "../docs/reference-guides/theme-json-reference/theme-json-migrations.md",
 		"parent": "theme-json-reference"
 	},
+	{
+		"title": "Available Styles Options",
+		"slug": "styles-versions",
+		"markdown_source": "../docs/reference-guides/theme-json-reference/styles-versions.md",
+		"parent": "theme-json-reference"
+	},
 	{
 		"title": "Component Reference",
 		"slug": "components",
@@ -641,12 +695,6 @@
 		"markdown_source": "../packages/components/src/base-control/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "BaseField",
-		"slug": "base-field",
-		"markdown_source": "../packages/components/src/base-field/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "BorderBoxControl",
 		"slug": "border-box-control",
@@ -719,6 +767,12 @@
 		"markdown_source": "../packages/components/src/checkbox-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CircularOptionPicker",
+		"slug": "circular-option-picker",
+		"markdown_source": "../packages/components/src/circular-option-picker/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ClipboardButton",
 		"slug": "clipboard-button",
@@ -749,6 +803,12 @@
 		"markdown_source": "../packages/components/src/combobox-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Composite",
+		"slug": "composite",
+		"markdown_source": "../packages/components/src/composite/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ConfirmDialog",
 		"slug": "confirm-dialog",
@@ -1044,27 +1104,9 @@
 		"parent": "components"
 	},
 	{
-		"title": "NavigatorBackButton",
-		"slug": "navigator-back-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-back-button/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorButton",
-		"slug": "navigator-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-button/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorProvider",
-		"slug": "navigator-provider",
-		"markdown_source": "../packages/components/src/navigator/navigator-provider/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorScreen",
-		"slug": "navigator-screen",
-		"markdown_source": "../packages/components/src/navigator/navigator-screen/README.md",
+		"title": "Navigator",
+		"slug": "navigator",
+		"markdown_source": "../packages/components/src/navigator/README.md",
 		"parent": "components"
 	},
 	{
@@ -1097,6 +1139,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ProgressBar",
+		"slug": "progress-bar",
+		"markdown_source": "../packages/components/src/progress-bar/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",
@@ -1229,12 +1277,6 @@
 		"markdown_source": "../packages/components/src/textarea-control/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "Theme",
-		"slug": "theme",
-		"markdown_source": "../packages/components/src/theme/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "ToggleControl",
 		"slug": "toggle-control",
@@ -1268,31 +1310,31 @@
 	{
 		"title": "ToolbarButton",
 		"slug": "toolbar-button",
-		"markdown_source": "../packages/components/src/toolbar-button/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-button/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarDropdownMenu",
 		"slug": "toolbar-dropdown-menu",
-		"markdown_source": "../packages/components/src/toolbar-dropdown-menu/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-dropdown-menu/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarGroup",
 		"slug": "toolbar-group",
-		"markdown_source": "../packages/components/src/toolbar-group/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-group/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "ToolbarItem",
 		"slug": "toolbar-item",
-		"markdown_source": "../packages/components/src/toolbar-item/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar-item/README.md",
 		"parent": "components"
 	},
 	{
 		"title": "Toolbar",
 		"slug": "toolbar",
-		"markdown_source": "../packages/components/src/toolbar/README.md",
+		"markdown_source": "../packages/components/src/toolbar/toolbar/README.md",
 		"parent": "components"
 	},
 	{
@@ -1463,6 +1505,12 @@
 		"markdown_source": "../packages/browserslist-config/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/commands",
+		"slug": "packages-commands",
+		"markdown_source": "../packages/commands/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/components",
 		"slug": "packages-components",
@@ -1475,12 +1523,24 @@
 		"markdown_source": "../packages/compose/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/core-commands",
+		"slug": "packages-core-commands",
+		"markdown_source": "../packages/core-commands/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/core-data",
 		"slug": "packages-core-data",
 		"markdown_source": "../packages/core-data/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/create-block-interactive-template",
+		"slug": "packages-create-block-interactive-template",
+		"markdown_source": "../packages/create-block-interactive-template/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/create-block-tutorial-template",
 		"slug": "packages-create-block-tutorial-template",
@@ -1499,12 +1559,6 @@
 		"markdown_source": "../packages/create-block/docs/external-template.md",
 		"parent": "packages-create-block"
 	},
-	{
-		"title": "@wordpress/custom-templated-path-webpack-plugin",
-		"slug": "packages-custom-templated-path-webpack-plugin",
-		"markdown_source": "../packages/custom-templated-path-webpack-plugin/README.md",
-		"parent": "packages"
-	},
 	{
 		"title": "@wordpress/customize-widgets",
 		"slug": "packages-customize-widgets",
@@ -1523,6 +1577,12 @@
 		"markdown_source": "../packages/data/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/dataviews",
+		"slug": "packages-dataviews",
+		"markdown_source": "../packages/dataviews/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/date",
 		"slug": "packages-date",
@@ -1559,6 +1619,12 @@
 		"markdown_source": "../packages/dom/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/e2e-test-utils-playwright",
+		"slug": "packages-e2e-test-utils-playwright",
+		"markdown_source": "../packages/e2e-test-utils-playwright/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/e2e-test-utils",
 		"slug": "packages-e2e-test-utils",
@@ -1620,9 +1686,9 @@
 		"parent": "packages"
 	},
 	{
-		"title": "@wordpress/experiments",
-		"slug": "packages-experiments",
-		"markdown_source": "../packages/experiments/README.md",
+		"title": "@wordpress/fields",
+		"slug": "packages-fields",
+		"markdown_source": "../packages/fields/README.md",
 		"parent": "packages"
 	},
 	{
@@ -1655,6 +1721,18 @@
 		"markdown_source": "../packages/icons/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/interactivity-router",
+		"slug": "packages-interactivity-router",
+		"markdown_source": "../packages/interactivity-router/README.md",
+		"parent": "packages"
+	},
+	{
+		"title": "@wordpress/interactivity",
+		"slug": "packages-interactivity",
+		"markdown_source": "../packages/interactivity/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/interface",
 		"slug": "packages-interface",
@@ -1703,12 +1781,6 @@
 		"markdown_source": "../packages/lazy-import/README.md",
 		"parent": "packages"
 	},
-	{
-		"title": "@wordpress/library-export-default-webpack-plugin",
-		"slug": "packages-library-export-default-webpack-plugin",
-		"markdown_source": "../packages/library-export-default-webpack-plugin/README.md",
-		"parent": "packages"
-	},
 	{
 		"title": "@wordpress/list-reusable-blocks",
 		"slug": "packages-list-reusable-blocks",
@@ -1739,6 +1811,12 @@
 		"markdown_source": "../packages/nux/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/patterns",
+		"slug": "packages-patterns",
+		"markdown_source": "../packages/patterns/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/plugins",
 		"slug": "packages-plugins",
@@ -1787,6 +1865,12 @@
 		"markdown_source": "../packages/priority-queue/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/private-apis",
+		"slug": "packages-private-apis",
+		"markdown_source": "../packages/private-apis/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/project-management-automation",
 		"slug": "packages-project-management-automation",
@@ -1823,6 +1907,12 @@
 		"markdown_source": "../packages/rich-text/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/router",
+		"slug": "packages-router",
+		"markdown_source": "../packages/router/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/scripts",
 		"slug": "packages-scripts",
@@ -1859,12 +1949,24 @@
 		"markdown_source": "../packages/stylelint-config/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/sync",
+		"slug": "packages-sync",
+		"markdown_source": "../packages/sync/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/token-list",
 		"slug": "packages-token-list",
 		"markdown_source": "../packages/token-list/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/undo-manager",
+		"slug": "packages-undo-manager",
+		"markdown_source": "../packages/undo-manager/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/url",
 		"slug": "packages-url",
@@ -1931,6 +2033,12 @@
 		"markdown_source": "../docs/reference-guides/data/data-core-blocks.md",
 		"parent": "data"
 	},
+	{
+		"title": "The Commands Data",
+		"slug": "data-core-commands",
+		"markdown_source": "../docs/reference-guides/data/data-core-commands.md",
+		"parent": "data"
+	},
 	{
 		"title": "Customize Widgets",
 		"slug": "data-core-customize-widgets",
@@ -2027,6 +2135,12 @@
 		"markdown_source": "../docs/explanations/architecture/data-flow.md",
 		"parent": "architecture"
 	},
+	{
+		"title": "Entities and Undo/Redo",
+		"slug": "entities",
+		"markdown_source": "../docs/explanations/architecture/entities.md",
+		"parent": "architecture"
+	},
 	{
 		"title": "Modularity",
 		"slug": "modularity",
@@ -2046,13 +2160,13 @@
 		"parent": "architecture"
 	},
 	{
-		"title": "Full Site Editing Templates",
+		"title": "Site Editing Templates",
 		"slug": "full-site-editing-templates",
 		"markdown_source": "../docs/explanations/architecture/full-site-editing-templates.md",
 		"parent": "architecture"
 	},
 	{
-		"title": "Styles",
+		"title": "Styles in the Editor",
 		"slug": "styles",
 		"markdown_source": "../docs/explanations/architecture/styles.md",
 		"parent": "architecture"
@@ -2081,18 +2195,6 @@
 		"markdown_source": "../docs/explanations/user-interface/design-resources.md",
 		"parent": "user-interface"
 	},
-	{
-		"title": "Frequently Asked Questions",
-		"slug": "faq",
-		"markdown_source": "../docs/explanations/faq.md",
-		"parent": "explanations"
-	},
-	{
-		"title": "Glossary",
-		"slug": "glossary",
-		"markdown_source": "../docs/explanations/glossary.md",
-		"parent": "explanations"
-	},
 	{
 		"title": "History",
 		"slug": "history",
@@ -2136,10 +2238,22 @@
 		"parent": "code"
 	},
 	{
-		"title": "Block Grammar",
-		"slug": "grammar",
-		"markdown_source": "../docs/contributors/code/grammar.md",
-		"parent": "code"
+		"title": "End-to-End Testing",
+		"slug": "e2e",
+		"markdown_source": "../docs/contributors/code/e2e/README.md",
+		"parent": "testing-overview"
+	},
+	{
+		"title": "Migration guide",
+		"slug": "migration",
+		"markdown_source": "../docs/contributors/code/e2e/migration.md",
+		"parent": "e2e"
+	},
+	{
+		"title": "Overusing snapshots",
+		"slug": "overusing-snapshots",
+		"markdown_source": "../docs/contributors/code/e2e/overusing-snapshots.md",
+		"parent": "e2e"
 	},
 	{
 		"title": "Scripts",
@@ -2225,12 +2339,6 @@
 		"markdown_source": "../docs/contributors/design/the-block.md",
 		"parent": "design"
 	},
-	{
-		"title": "Reference",
-		"slug": "reference",
-		"markdown_source": "../docs/contributors/design/reference.md",
-		"parent": "design"
-	},
 	{
 		"title": "Documentation Contributions",
 		"slug": "documentation",
@@ -2250,7 +2358,7 @@
 		"parent": "contributors"
 	},
 	{
-		"title": "Localizing Gutenberg Plugin",
+		"title": "Localizing Gutenberg",
 		"slug": "localizing",
 		"markdown_source": "../docs/contributors/localizing.md",
 		"parent": "contributors"
@@ -2278,11 +2386,5 @@
 		"slug": "versions-in-wordpress",
 		"markdown_source": "../docs/contributors/versions-in-wordpress.md",
 		"parent": "contributors"
-	},
-	{
-		"title": "Upcoming Projects & Roadmap",
-		"slug": "roadmap",
-		"markdown_source": "../docs/contributors/roadmap.md",
-		"parent": "contributors"
 	}
 ]
diff --git a/docs/reference-guides/README.md b/docs/reference-guides/README.md
index 33fdd9aa602414..cc30aa87526058 100644
--- a/docs/reference-guides/README.md
+++ b/docs/reference-guides/README.md
@@ -18,7 +18,7 @@
 
 ## [Hooks Reference](/docs/reference-guides/filters/README.md)
 
--   [Block Hooks](/docs/reference-guides/filters/block-filters.md)
+-   [Block Filters](/docs/reference-guides/filters/block-filters.md)
 -   [Editor Hooks](/docs/reference-guides/filters/editor-filters.md)
 -   [i18n Hooks](/docs/reference-guides/filters/i18n-filters.md)
 -   [Parser Hooks](/docs/reference-guides/filters/parser-filters.md)
@@ -39,7 +39,8 @@
 
 ## [Theme.json Reference](/docs/reference-guides/theme-json-reference/README.md)
 
--   [Version 2 (living reference)](/docs/reference-guides/theme-json-reference/theme-json-living.md)
+-   [Version 3 (latest)](/docs/reference-guides/theme-json-reference/theme-json-living.md)
+-   [Version 2](/docs/reference-guides/theme-json-reference/theme-json-v2.md)
 -   [Version 1](/docs/reference-guides/theme-json-reference/theme-json-v1.md)
 -   [Migrating to Newer Versions](/docs/reference-guides/theme-json-reference/theme-json-migrations.md)
 
diff --git a/docs/reference-guides/block-api/README.md b/docs/reference-guides/block-api/README.md
index e2de21d99f85e0..1b89b9246d8292 100644
--- a/docs/reference-guides/block-api/README.md
+++ b/docs/reference-guides/block-api/README.md
@@ -4,16 +4,19 @@ Blocks are the fundamental element of the editor. They are the primary way in wh
 
 The following sections will walk you through the existing block APIs:
 
--   [API Versions](/docs/reference-guides/block-api/block-api-versions.md)
 -   [Annotations](/docs/reference-guides/block-api/block-annotations.md)
+-   [API Versions](/docs/reference-guides/block-api/block-api-versions.md)
 -   [Attributes](/docs/reference-guides/block-api/block-attributes.md)
+-   [Bindings](/docs/reference-guides/block-api/block-bindings.md)
 -   [Context](/docs/reference-guides/block-api/block-context.md)
 -   [Deprecation](/docs/reference-guides/block-api/block-deprecation.md)
 -   [Edit and Save](/docs/reference-guides/block-api/block-edit-save.md)
+-   [Metadata in block.json](/docs/reference-guides/block-api/block-metadata.md)
 -   [Patterns](/docs/reference-guides/block-api/block-patterns.md)
 -   [Registration](/docs/reference-guides/block-api/block-registration.md)
+-   [Selectors](/docs/reference-guides/block-api/block-selectors.md)
+-   [Styles](/docs/reference-guides/block-api/block-styles.md)
 -   [Supports](/docs/reference-guides/block-api/block-supports.md)
 -   [Transformations](/docs/reference-guides/block-api/block-transforms.md)
 -   [Templates](/docs/reference-guides/block-api/block-templates.md)
--   [Metadata](/docs/reference-guides/block-api/block-metadata.md)
 -   [Variations](/docs/reference-guides/block-api/block-variations.md)
diff --git a/docs/reference-guides/block-api/block-annotations.md b/docs/reference-guides/block-api/block-annotations.md
index b24beddb7af465..89f64b43fa3b92 100644
--- a/docs/reference-guides/block-api/block-annotations.md
+++ b/docs/reference-guides/block-api/block-annotations.md
@@ -13,7 +13,7 @@ To see the API for yourself the easiest way is to have a block that is at least
 ```js
 wp.data.dispatch( 'core/annotations' ).addAnnotation( {
 	source: 'my-annotations-plugin',
-	blockClientId: wp.data.select( 'core/editor' ).getBlockOrder()[ 0 ],
+	blockClientId: wp.data.select( 'core/block-editor' ).getBlockOrder()[ 0 ],
 	richTextIdentifier: 'content',
 	range: {
 		start: 50,
@@ -43,7 +43,7 @@ It is also possible to annotate a block completely. In that case just provide th
 ```js
 wp.data.dispatch( 'core/annotations' ).addAnnotation( {
 	source: 'my-annotations-plugin',
-	blockClientId: wp.data.select( 'core/editor' ).getBlockOrder()[ 0 ],
+	blockClientId: wp.data.select( 'core/block-editor' ).getBlockOrder()[ 0 ],
 	selector: 'block',
 } );
 ```
diff --git a/docs/reference-guides/block-api/block-api-versions.md b/docs/reference-guides/block-api/block-api-versions.md
index 6b2e858aae70c3..d89362777ca58c 100644
--- a/docs/reference-guides/block-api/block-api-versions.md
+++ b/docs/reference-guides/block-api/block-api-versions.md
@@ -2,6 +2,9 @@
 
 This document lists the changes made between the different API versions.
 
+## Version 3 (>= WordPress 6.3)
+- The post editor will be iframed if all registered blocks have a Block API version 3 or higher. Adding version 3 support means that the block should work inside an iframe, though the block may still be rendered outside the iframe if not all blocks support version 3.
+
 ## Version 2 (>= WordPress 5.6)
 
 -   To render the block element wrapper for the block's `edit` implementation, the block author must use the `useBlockProps()` hook.
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index eafc73c79938f3..544f35593106f1 100644
--- a/docs/reference-guides/block-api/block-attributes.md
+++ b/docs/reference-guides/block-api/block-attributes.md
@@ -1,6 +1,6 @@
 # Attributes
 
-Block attributes provide information about the data stored by a block. For example, rich content, a list of image URLs, a background colour, or a button title.
+Block attributes provide information about the data stored by a block. For example, rich content, a list of image URLs, a background color, or a button title.
 
 A block can contain any number of attributes, and these are specified by the `attributes` field - an object where each key is the name of the attribute, and the value is the attribute definition.
 
@@ -66,9 +66,9 @@ The saved HTML will contain the `title` and `size` in the comment delimiter, and
 <!-- /block:your-block -->
 ```
 
-If an attributes change over time then a [block deprecation](/docs/reference-guides/block-api/block-deprecation.md) can help migrate from an older attribute, or remove it entirely.
+If an attribute changes over time then a [block deprecation](/docs/reference-guides/block-api/block-deprecation.md) can help migrate from an older attribute, or remove it entirely.
 
-## Type Validation
+## Type validation
 
 The `type` indicates the type of data that is stored by the attribute. It does not indicate where the data is stored, which is defined by the `source` field.
 
@@ -86,7 +86,7 @@ The `type` field MUST be one of the following:
 
 Note that the validity of an `object` is determined by your `source`. For an example, see the `query` details below.
 
-## Enum Validation
+## Enum validation
 
 An attribute can be defined as one of a fixed set of values. This is specified by an `enum`, which contains an array of allowed values:
 
@@ -100,7 +100,7 @@ _Example_: Example `enum`.
 }
 ```
 
-## Value Source
+## Value source
 
 Attribute sources are used to define how the attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.
 
@@ -305,39 +305,6 @@ Attribute available in the block:
 { "content": "The inner text of the <strong>figcaption</strong> element" }
 ```
 
-Use the `multiline` property to extract the inner HTML of matching tag names for the use in `RichText` with the `multiline` prop.
-
-_Example_: Extract the `content` attribute from a blockquote element found in the block's markup.
-
-Saved content:
-```html
-<div>
-	Block Content
-
-	<blockquote>
-		<p>First line</p>
-		<p>Second line</p>
-	</blockquote>
-</div>
-```
-
-Attribute definition:
-```js
-{
-	content: {
-		type: 'string',
-		source: 'html',
-		multiline: 'p',
-		selector: 'blockquote',
-	}
-}
-```
-
-Attribute available in the block:
-```js
-{ "content": "<p>First line</p><p>Second line</p>" }
-```
-
 ### `query` source
 
 Use `query` to extract an array of values from markup. Entries of the array are determined by the `selector` argument, where each matched element within the block will have an entry structured corresponding to the second argument, an object of attribute sources.
@@ -390,7 +357,7 @@ Attribute available in the block:
 ### Meta source (deprecated)
 
 <div class="callout callout-alert">
-Although attributes may be obtained from a post's meta, meta attribute sources are considered deprecated; <a href="https://github.com/WordPress/gutenberg/blob/c367c4e2765f9e6b890d1565db770147efca5d66/packages/core-data/src/entity-provider.js">EntityProvider and related hook APIs</a> should be used instead, as shown in the <a href="/block-editor/how-to-guides/metabox/#step-2-add-meta-block">Create Meta Block how-to</a>.
+Although attributes may be obtained from a post's meta, meta attribute sources are considered deprecated; <a href="https://github.com/WordPress/gutenberg/blob/c367c4e2765f9e6b890d1565db770147efca5d66/packages/core-data/src/entity-provider.js">EntityProvider and related hook APIs</a> should be used instead, as shown in the <a href="https://developer.wordpress.org/block-editor/how-to-guides/metabox/#step-2-add-meta-block">Create Meta Block how-to</a>.
 </div>
 
 Attributes may be obtained from a post's meta rather than from the block's representation in saved post content. For this, an attribute is required to specify its corresponding meta key under the `meta` key.
@@ -408,9 +375,6 @@ Attribute definition:
 
 From here, meta attributes can be read and written by a block using the same interface as any attribute:
 
-{% codetabs %}
-{% JSX %}
-
 ```js
 edit( { attributes, setAttributes } ) {
 	function onChange( event ) {
@@ -421,22 +385,6 @@ edit( { attributes, setAttributes } ) {
 },
 ```
 
-{% Plain %}
-
-```js
-edit: function( props ) {
-	function onChange( event ) {
-		props.setAttributes( { author: event.target.value } );
-	}
-
-	return el( 'input', {
-		value: props.attributes.author,
-		onChange: onChange,
-	} );
-},
-```
-
-{% end %}
 
 #### Considerations
 
@@ -479,7 +427,7 @@ function onChange( event ) {
 }
 ```
 
-## Default Value
+## Default value
 
 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.
 
diff --git a/docs/reference-guides/block-api/block-bindings.md b/docs/reference-guides/block-api/block-bindings.md
new file mode 100644
index 00000000000000..479396abc13c9c
--- /dev/null
+++ b/docs/reference-guides/block-api/block-bindings.md
@@ -0,0 +1,330 @@
+# Bindings
+
+<div class="callout callout-alert">
+Block Bindings API is only available for WordPress 6.5 and above.
+</div>
+
+The Block Bindings API lets you “bind” dynamic data to the block’s attributes, which are then reflected in the final HTML markup that is output to the browser on the front end.
+
+An example could be connecting an Image block `url` attribute to a function that returns random images from an external API.
+
+```html
+<!-- wp:image {
+	"metadata":{
+		"bindings":{
+			"url":{
+				"source":"my-plugin/get-random-images"
+			}
+		}
+	}
+} -->
+```
+
+
+## Compatible blocks and their attributes
+
+Right now, not all block attributes are compatible with block bindings. There is some ongoing effort to increase this compatibility, but for now, this is the list:
+
+| Supported Blocks    | Supported Attributes       |
+| ----------------    | --------------------       |
+| Paragraph           | content                    |
+| Heading             | content                    |
+| Image               | id, url, title, alt        |
+| Button              | text, url, linkTarget, rel |
+
+## Registering a custom source
+
+Registering a source requires defining at least `name`, a `label` and a `callback` function that gets a value from the source and passes it back to a block attribute.
+
+Once a source is registered, any supporting block's `metadata.bindings` attribute can be configured to read a value from that source.
+
+Registration can be done on the server via PHP or in the editor via JavaScript, and both can coexist.
+
+The label defined in server registration will be overridden by the label defined in the editor.
+
+### Server registration
+
+Server registration allows applying a callback that will be executed on the frontend for the bound attribute.
+
+The function to register a custom source is `register_block_bindings_source($name, $args)`:
+
+- `name`: `string` that sets the unique ID for the custom source.
+- `args`: `array` that contains:
+    - `label`: `string` with the human-readable name of the custom source.
+    - `uses_context`: `array` with the block context that is passed to the callback (optional).
+    - `get_value_callback`: `function` that will run on the bound block's render function. It accepts three arguments: `source_args`, `block_instance` and `attribute_name`. This value can be overridden with the filter `block_bindings_source_value`.
+
+Note that `register_block_bindings_source()` should be called from a handler attached to the `init` hook.
+
+Here is an example:
+
+```php
+add_action(
+	'init',
+	function () {
+		register_block_bindings_source(
+			'wpmovies/visualization-date',
+			array(
+				'label'              => __( 'Visualization Date', 'custom-bindings' ),
+				'get_value_callback' => function ( array $source_args, $block_instance ) {
+					$post_id = $block_instance->context['postId'];
+					if ( isset( $source_args['key'] ) ) {
+						return get_post_meta( $post_id, $source_args['key'], true );
+					}
+				},
+				'uses_context'       => array( 'postId' ),
+			)
+		);
+	}
+);
+```
+
+This example needs a `post_meta` registered, and, also, a filter can be used to return a default `$visualization_date` value, which will be shown in the next heading.
+
+```php
+add_action(
+	'init',
+	function () {
+		register_meta(
+			'post',
+			'wp_movies_visualization_date',
+			array(
+				'show_in_rest' => true,
+				'single'       => true,
+				'type'         => 'string',
+				'label'        => __( 'Movie visualization date', 'custom-bindings' ),
+			)
+		);
+	}
+);
+```
+
+#### Block bindings source value filter
+
+_**Note:** Since WordPress 6.7._
+
+The value returned by `get_value_callback` can be modified with the `block_bindings_source_value` filter.
+The filter has the following parameters:
+
+- `value`: The value to be filtered.
+- `name`: The name of the source.
+- `source_args`: `array` containing source arguments.
+- `block_instance`: The block instance object.
+- `attribute_name`: The name of the attribute.
+
+Example:
+
+```php
+function wpmovies_format_visualization_date( $value, $name ) {
+	// Prevent the filter to be applied to other sources.
+	if ( $name !== 'wpmovies/visualization-date' ) {
+		return $value;
+	}
+	if ( ! $value ) {
+		return date( 'm/d/Y' );
+	}
+	return date( 'm/d/Y', strtotime( $value ) );
+}
+
+add_filter( 'block_bindings_source_value', 'wpmovies_format_visualization_date', 10, 2 );
+```
+
+#### Server registration Core examples
+
+There are a few examples in Core that can be used as reference.
+
+- Post Meta. [Source code](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-bindings/post-meta.php)
+- Pattern overrides. [Source code](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-bindings/pattern-overrides.php)
+- Twenty Twenty-Five theme. [Source code](https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentytwentyfive/functions.php)
+
+
+### Editor registration
+
+_**Note:** Since WordPress 6.7._
+
+Editor registration on the client allows defining what the bound block will do when the value is retrieved or when the value is edited.
+
+The function to register a custom source is `registerBlockBindingsSource( args )`:
+
+- `args`: `object` with the following structure:
+    - `name`: `string` with the unique and machine-readable name.
+    - `label`: `string` with the human readable name of the custom source. In case it was defined already on the server, the server label will be overriden by this one, in that case, it is not recommended to be defined here. (optional)
+    - `usesContext`: `array` with the block context that the custom source may need. In case it was defined already on the server, it should not be defined here. (optional)
+    - `getValues`: `function` that retrieves the values from the source. (optional)
+    - `setValues`: `function` that allows updating the values connected to the source. (optional)
+    - `canUserEditValue`: `function` to determine if the user can edit the value. The user won't be able to edit by default. (optional)
+
+
+This example will show a custom post meta date in the editor and, if it doesn't exist, it will show today's date. The user can edit the value of the date. (Caution: This example does not format the user input as a date—it's only for educational purposes.)
+
+```js
+import {
+	registerBlockBindingsSource,
+} from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+registerBlockBindingsSource( {
+	name: 'wpmovies/visualization-date',
+	label: __( 'Visualization Date', 'custom-bindings' ), // We can skip the label, as it was already defined in the server in the previous example.
+	usesContext: [ 'postType' ], // We can skip postId, as it was already defined in the server in the previous example.
+	getValues( { select, context } ) {
+		let wpMoviesVisualizationDate;
+		const { getEditedEntityRecord } = select( coreDataStore );
+		if ( context?.postType && context?.postId ) {
+			wpMoviesVisualizationDate = getEditedEntityRecord(
+				'postType',
+				context?.postType,
+				context?.postId
+			).meta?.wp_movies_visualization_date;
+		}
+		if ( wpMoviesVisualizationDate ) {
+			return {
+				content: wpMoviesVisualizationDate,
+			};
+		}
+
+		return {
+			content: new Date().toLocaleDateString( 'en-US' ),
+		};
+	},
+	setValues( { select, dispatch, context, bindings } ) {
+		dispatch( coreDataStore ).editEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId,
+			{
+				meta: {
+					wp_movies_visualization_date: bindings?.content?.newValue,
+				},
+			}
+		);
+	},
+	canUserEditValue( { select, context } ) {
+		return true;
+	},
+} );
+```
+
+#### getValues
+
+The `getValues` function retrieves the value from the source on block loading. It receives an `object` as an argument with the following properties:
+
+- `bindings` returns the bindings object of the specific source. It must have the attributes as a key, and the value can be a `string` or an `object` with arguments.
+- `clientId` returns a `string` with the current block client ID.
+- `context` returns an `object` of the current block context, defined in the `usesContext` property. [More about block context.](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/).
+- `select` returns an `object` of a given store's selectors. [More info in their docs.](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#select).
+
+The function must return an `object` with this structure:
+`{ 'block attribute' : value }`
+
+#### setValues
+
+The `setValues` function updates all the values of the source of the block bound. It receives an `object` as an argument with the following properties:
+
+- `bindings` returns the bindings object of the specific source. It must have the attributes as a key, and the value can be a `string` or an `object` with arguments. This object contains a `newValue` property with the user's input.
+- `clientId` returns a `string` with the current block client ID.
+- `context` returns an `object` of the current block context, defined in the `usesContext` property. [More about block context.](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/).
+- `dispatch` returns an `object` of the store's action creators. [More about dispatch](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#dispatch).
+- `select` returns an `object` of a given store's selectors. [More info in their docs.](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#select).
+
+
+#### Editor registration Core examples
+
+There are a few examples in Core that can be used as reference.
+
+- Post Meta. [Source code](https://github.com/WordPress/gutenberg/blob/5afd6c27bfba2be2e06b502257753fbfff1ae9f0/packages/editor/src/bindings/post-meta.js#L74-L146)
+- Pattern overrides. [Source code](https://github.com/WordPress/gutenberg/blob/5afd6c27bfba2be2e06b502257753fbfff1ae9f0/packages/editor/src/bindings/pattern-overrides.js#L8-L100)
+
+## Unregistering a source
+
+_**Note:** Since WordPress 6.7._
+
+`unregisterBlockBindingsSource` unregisters a block bindings source by providing its name.
+
+```js
+import { unregisterBlockBindingsSource } from '@wordpress/blocks';
+
+unregisterBlockBindingsSource( 'plugin/my-custom-source' );
+```
+
+## Getting all sources
+
+_**Note:** Since WordPress 6.7._
+
+`getBlockBindingsSources` returns all registered block bindings sources.
+
+```js
+import { getBlockBindingsSources } from '@wordpress/blocks';
+
+const registeredSources = getBlockBindingsSources();
+```
+
+## Getting one specific source
+
+_**Note:** Since WordPress 6.7._
+
+`getBlockBindingsSource` return a specific block bindings source by its name.
+
+```js
+import { getBlockBindingsSource } from '@wordpress/blocks';
+
+const blockBindingsSource = getBlockBindingsSource( 'plugin/my-custom-source' );
+```
+
+## Block Bindings Utils
+
+_**Note:** Since WordPress 6.7._
+
+UseBlockBindingUtils is a hook with two helpers that allows developers to edit the `metadata.bindings` attribute easily.
+
+It accepts a `clientId` string as a parameter, if it is not set, the function will use the current block client ID from the context.
+
+Example:
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+
+const { updateBlockBindings } = useBlockBindingsUtils('my-block-client-id-12345');
+...
+```
+
+### updateBlockBindings
+
+`updateBlockBindings` works similarly to `updateBlockAttributes`, and can be used to create, update, or remove specific connections.
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+
+const { updateBlockBindings } = useBlockBindingsUtils();
+
+function updateBlockBindingsURLSource( url ) {
+	updateBlockBindings({
+		url: {
+			source: 'myplugin/new-source',
+		}
+	})
+}
+
+// Remove binding from url attribute.
+function removeBlockBindingsURLSource() {
+	updateBlockBindings( { url: undefined } );
+}
+```
+
+### removeAllBlockBindings
+
+`removeAllBlockBindings` will remove all existing connections in a block by removing the `metadata.bindings` attribute.
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+
+const { removeAllBlockBindings } = useBlockBindingsUtils();
+
+function clearBlockBindings() {
+	removeAllBlockBindings();
+}
+```
+
+
+
diff --git a/docs/reference-guides/block-api/block-context.md b/docs/reference-guides/block-api/block-context.md
index 0dc32fb0d88562..c5fcfaedbae349 100644
--- a/docs/reference-guides/block-api/block-context.md
+++ b/docs/reference-guides/block-api/block-context.md
@@ -4,15 +4,15 @@ Block context is a feature which enables ancestor blocks to provide values which
 
 This is especially useful in full-site editing where, for example, the contents of a block may depend on the context of the post in which it is displayed. A blogroll template may show excerpts of many different posts. Using block context, there can still be one single "Post Excerpt" block which displays the contents of the post based on an inherited post ID.
 
-If you are familiar with [React Context](https://reactjs.org/docs/context.html), block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of React Context. Block context is also supported in server-side `render_callback` implementations, demonstrated in the examples below.
+If you are familiar with [React Context](https://react.dev/learn/passing-data-deeply-with-context), block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of React Context. Block context is also supported in server-side `render_callback` implementations, demonstrated in the examples below.
 
-## Defining Block Context
+## Defining block context
 
 Block context is defined in the registered settings of a block. A block can provide a context value, or consume a value it seeks to inherit.
 
-### Providing Block Context
+### Providing block context
 
-A block can provide a context value by assigning a `providesContext` property in its registered settings. This is an object which maps a context name to one of the block's own attribute. The value corresponding to that attribute value is made available to descendent blocks and can be referenced by the same context name. Currently, block context only supports values derived from the block's own attributes. This could be enhanced in the future to support additional sources of context values.
+A block can provide a context value by assigning a `providesContext` property in its registered settings. This is an object which maps a context name to one of the block's own attributes. The value corresponding to that attribute value is made available to descendent blocks and can be referenced by the same context name. Currently, block context only supports values derived from the block's own attributes. This could be enhanced in the future to support additional sources of context values.
 
 ```js
 	attributes: {
@@ -26,11 +26,13 @@ A block can provide a context value by assigning a `providesContext` property in
 	},
 ```
 
-For complete example, refer below section.
+For a complete example, refer to the section below.
+
+#### Include a namespace
 
 As seen in the above example, it is recommended that you include a namespace as part of the name of the context key so as to avoid potential conflicts with other plugins or default context values provided by WordPress. The context namespace should be specific to your plugin, and in most cases can be the same as used in the name of the block itself.
 
-### Consuming Block Context
+### Consuming block context
 
 A block can inherit a context value from an ancestor provider by assigning a `usesContext` property in its registered settings. This should be assigned as an array of the context names the block seeks to inherit.
 
@@ -43,7 +45,7 @@ registerBlockType('my-plugin/record-title', {
 
 ```
 
-## Using Block Context
+## Using block context
 
 Once a block has defined the context it seeks to inherit, this can be accessed in the implementation of `edit` (JavaScript) and `render_callback` (PHP). It is provided as an object (JavaScript) or associative array (PHP) of the context values which have been defined for the block. Note that a context value will only be made available if the block explicitly defines a desire to inherit that value.
 
@@ -74,14 +76,14 @@ register_block_type( 'my-plugin/record-title', array(
 
 ## Example
 
-1. Create `record` block.
+1. Create a `record` block.
 
 ```
 npm init @wordpress/block --namespace my-plugin record
 cd record
 ```
 
-2. Edit `src/index.js`. Insert `recordId` attribute and `providesContext` property in `registerBlockType` function and add registration of `record-title` block at the bottom.
+2. Edit `src/index.js`. Insert the `recordId` attribute and `providesContext` property in the `registerBlockType` function and add the registration of the `record-title` block at the bottom:
 
 ```js
 registerBlockType( 'my-plugin/record', {
@@ -124,7 +126,7 @@ registerBlockType( 'my-plugin/record-title', {
 } );
 ```
 
-3. Edit `src/edit.js`. Replace `Edit` function by following code.
+3. Edit `src/edit.js` for the `record` block. Replace the `Edit` function with the following code:
 
 ```js
 import { TextControl } from '@wordpress/components';
@@ -139,7 +141,9 @@ export default function Edit( props ) {
 	return (
 		<div>
 			<TextControl
-				label={ __( 'Record ID:' ) }
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'Record ID' ) }
 				value={ recordId }
 				onChange={ ( val ) =>
 					setAttributes( { recordId: Number( val ) } )
@@ -151,7 +155,7 @@ export default function Edit( props ) {
 }
 ```
 
-4. Edit `src/save.js`. Replace `save` function by following code.
+4. Edit `src/save.js` for the `record` block. Replace the `save` function with the following code:
 
 ```js
 export default function save( props ) {
@@ -159,6 +163,6 @@ export default function save( props ) {
 }
 ```
 
-5. Create new post and add `record` block. If you type number in the above box, you'll see the same number is shown in below box.
+5. Create a new post and add the `record` block. If you type a number in the text box, you'll see the same number is shown in the `record-title` block below it.
 
 ![Block Context Example](https://user-images.githubusercontent.com/8876600/93000215-c8570380-f561-11ea-9bd0-0b2bd0ca1752.png)
diff --git a/docs/reference-guides/block-api/block-deprecation.md b/docs/reference-guides/block-api/block-deprecation.md
index 1bb24694749a0f..0da85ee02d1ec0 100644
--- a/docs/reference-guides/block-api/block-deprecation.md
+++ b/docs/reference-guides/block-api/block-deprecation.md
@@ -1,5 +1,7 @@
 # Deprecation
 
+> This page provides a comprehensive guide to the principles and usage of the Deprecation API. For an introduction check out the [tutorial on the basics of block deprecation](https://developer.wordpress.org/news/2023/03/block-deprecation-a-tutorial/) which can be found on the [Developer Blog](https://developer.wordpress.org/news/).
+
 When updating static blocks markup and attributes, block authors need to consider existing posts using the old versions of their block. To provide a good upgrade path, you can choose one of the following strategies:
 
 -   Do not deprecate the block and create a new one (a different name)
@@ -21,7 +23,7 @@ It is also important to note that if a deprecation's `save` method imports addit
 
 For blocks with multiple deprecations, it may be easier to save each deprecation to a constant with the version of the block it applies to, and then add each of these to the block's `deprecated` array. The deprecations in the array should be in reverse chronological order. This allows the block editor to attempt to apply the most recent and likely deprecations first, avoiding unnecessary and expensive processing.
 
-### Example:
+**Example**
 
 ```js
 const v1 = {};
@@ -37,15 +39,27 @@ Deprecations are defined on a block type as its `deprecated` property, an array
 -   `attributes` (Object): The [attributes definition](/docs/reference-guides/block-api/block-attributes.md) of the deprecated form of the block.
 -   `supports` (Object): The [supports definition](/docs/reference-guides/block-api/block-registration.md) of the deprecated form of the block.
 -   `save` (Function): The [save implementation](/docs/reference-guides/block-api/block-edit-save.md) of the deprecated form of the block.
--   `migrate` (Function, Optional): A function which, given the old attributes and inner blocks is expected to return either the new attributes or a tuple array of `[ attributes, innerBlocks ]` compatible with the block. As mentioned above, a deprecation's `migrate` will not be run if its `save` function does not return a valid block so you will need to make sure your migrations are available in all the deprecations where they are relevant.
--   `isEligible` (Function, Optional): A function which, given the attributes and inner blocks of the parsed block, returns true if the deprecation can handle the block migration even if the block is valid. This is particularly useful in cases where a block is technically valid even once deprecated, but still requires updates to its attributes or inner blocks. This function is not called when the results of all previous deprecations' `save` functions were invalid.
-
-It's important to note that `attributes`, `supports`, and `save` are not automatically inherited from the current version, since they can impact parsing and serialization of a block, so they must be defined on the deprecated object in order to be processed during a migration.
-
-### Example:
-
-{% codetabs %}
-{% JSX %}
+-   `migrate`: (Function, Optional). A function which, given the old attributes and inner blocks is expected to return either the new attributes or a tuple array of attributes and inner blocks compatible with the block. As mentioned above, a deprecation's `migrate` will not be run if its `save` function does not return a valid block so you will need to make sure your migrations are available in all the deprecations where they are relevant.
+	- _Parameters_
+		- `attributes`: The block's old attributes.
+		- `innerBlocks`: The block's old inner blocks.
+	- _Return_
+		- `Object | Array`: Either the updated block attributes or tuple array `[attributes, innerBlocks]`.
+-   `isEligible`: (Function, Optional). A function which returns `true` if the deprecation can handle the block migration even if the block is valid. It is particularly useful in cases where a block is technically valid even once deprecated, but still requires updates to its attributes or inner blocks. This function is **not** called when the results of all previous deprecations' save functions were invalid.
+	- _Parameters_
+		- `attributes`: The raw block attributes as parsed from the serialized HTML, and before the block type code is applied.
+		- `innerBlocks`: The block's current inner blocks.
+		- `data`: An object containing properties representing the block node and its resulting block object.
+			- `data.blockNode`: The raw form of the block as a result of parsing the serialized HTML.
+			- `data.block`: The block object, which is the result of applying the block type to the `blockNode`.
+	- _Return_
+		- `boolean`: Whether or not this otherwise valid block is eligible to be migrated by this deprecation.
+
+<div class="callout callout-alert">
+It's important to note that <code>attributes</code>, <code>supports</code>, and <code>save</code> are not automatically inherited from the current version, since they can impact parsing and serialization of a block, so they must be defined on the deprecated object in order to be processed during a migration.
+</div>
+
+**Example**
 
 ```js
 const { registerBlockType } = wp.blocks;
@@ -63,7 +77,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... other block properties go here
 
 	attributes,
-	
+
 	supports,
 
 	save( props ) {
@@ -73,7 +87,7 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	deprecated: [
 		{
 			attributes,
-			
+
 			supports,
 
 			save( props ) {
@@ -84,56 +98,14 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 } );
 ```
 
-{% Plain %}
-
-```js
-var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType,
-	attributes = {
-		text: {
-			type: 'string',
-			default: 'some random value',
-		},
-	},
-	supports = {
-		className: false,
-	};
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
-	// ... other block properties go here
-
-	attributes: attributes,
-
-	supports: supports,
-
-	save: function ( props ) {
-		return el( 'div', {}, props.attributes.text );
-	},
-
-	deprecated: [
-		{
-			attributes: attributes,
-
-			save: function ( props ) {
-				return el( 'p', {}, props.attributes.text );
-			},
-		},
-	],
-} );
-```
-
-{% end %}
-
 In the example above we updated the markup of the block to use a `div` instead of `p`.
 
 ## Changing the attributes set
 
 Sometimes, you need to update the attributes set to rename or modify old attributes.
 
-### Example:
+**Example**
 
-{% codetabs %}
-{% JSX %}
 
 ```js
 const { registerBlockType } = wp.blocks;
@@ -175,50 +147,6 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 } );
 ```
 
-{% Plain %}
-
-```js
-var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType;
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
-	// ... other block properties go here
-
-	attributes: {
-		content: {
-			type: 'string',
-			default: 'some random value',
-		},
-	},
-
-	save: function ( props ) {
-		return el( 'div', {}, props.attributes.content );
-	},
-
-	deprecated: [
-		{
-			attributes: {
-				text: {
-					type: 'string',
-					default: 'some random value',
-				},
-			},
-
-			migrate: function ( attributes ) {
-				return {
-					content: attributes.text,
-				};
-			},
-
-			save: function ( props ) {
-				return el( 'p', {}, props.attributes.text );
-			},
-		},
-	],
-} );
-```
-
-{% end %}
 
 In the example above we updated the markup of the block to use a `div` instead of `p` and rename the `text` attribute to `content`.
 
@@ -227,14 +155,10 @@ In the example above we updated the markup of the block to use a `div` instead o
 Situations may exist where when migrating the block we may need to add or remove innerBlocks.
 E.g: a block wants to migrate a title attribute to a paragraph innerBlock.
 
-### Example:
-
-{% codetabs %}
-{% JSX %}
+**Example**
 
 ```js
 const { registerBlockType } = wp.blocks;
-const { omit } = lodash;
 
 registerBlockType( 'gutenberg/block-with-deprecated-version', {
 	// ... block properties go here
@@ -254,8 +178,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,
@@ -274,48 +200,6 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
 } );
 ```
 
-{% Plain %}
-
-```js
-var el = wp.element.createElement,
-	registerBlockType = wp.blocks.registerBlockType,
-	omit = lodash.omit;
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
-	// ... block properties go here
-
-	deprecated: [
-		{
-			attributes: {
-				title: {
-					type: 'string',
-					source: 'html',
-					selector: 'p',
-				},
-			},
-
-			migrate: function ( attributes, innerBlocks ) {
-				return [
-					omit( attributes, 'title' ),
-					[
-						createBlock( 'core/paragraph', {
-							content: attributes.title,
-							fontSize: 'large',
-						} ),
-					].concat( innerBlocks ),
-				];
-			},
-
-			save: function ( props ) {
-				return el( 'p', {}, props.attributes.title );
-			},
-		},
-	],
-} );
-```
-
-{% end %}
-
 In the example above we updated the block to use an inner Paragraph block with a title instead of a title attribute.
 
 _Above are example cases of block deprecation. For more, real-world examples, check for deprecations in the [core block library](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src). Core blocks have been updated across releases and contain simple and complex deprecations._
diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md
index 5d660992f6abb9..86721c77e463c6 100644
--- a/docs/reference-guides/block-api/block-edit-save.md
+++ b/docs/reference-guides/block-api/block-edit-save.md
@@ -1,20 +1,18 @@
 # Edit and Save
 
-When registering a block, the `edit` and `save` functions provide the interface for how a block is going to be rendered within the editor, how it will operate and be manipulated, and how it will be saved.
+When registering a block with JavaScript on the client, the `edit` and `save` functions provide the interface for how a block is going to be rendered within the editor, how it will operate and be manipulated, and how it will be saved.
 
 ## Edit
 
 The `edit` function describes the structure of your block in the context of the editor. This represents what the editor will render when the block is used.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 import { useBlockProps } from '@wordpress/block-editor';
 
 // ...
 const blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 
@@ -26,39 +24,19 @@ const blockSettings = {
 };
 ```
 
-{% Plain %}
-
-```js
-var blockSettings = {
-	apiVersion: 2,
-
-	// ...
-
-	edit: function () {
-		var blockProps = wp.blockEditor.useBlockProps();
-
-		return wp.element.createElement( 'div', blockProps, 'Your block.' );
-	},
-};
-```
-
-{% end %}
-
-### block wrapper props
+### Block wrapper props
 
 The first thing to notice here is the use of the `useBlockProps` React hook on the block wrapper element. In the example above, the block wrapper renders a "div" in the editor, but in order for the Gutenberg editor to know how to manipulate the block, add any extra classNames that are needed for the block... the block wrapper element should apply props retrieved from the `useBlockProps` react hook call. The block wrapper element should be a native DOM element, like `<div>` and `<table>`, or a React component that forwards any additional props to native DOM elements. Using a `<Fragment>` or `<ServerSideRender>` component, for instance, would be invalid.
 
 If the element wrapper needs any extra custom HTML attributes, these need to be passed as an argument to the `useBlockProps` hook. For example to add a `my-random-classname` className to the wrapper, you can use the following code:
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 import { useBlockProps } from '@wordpress/block-editor';
 
 // ...
 const blockSettings = {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	// ...
 
@@ -72,25 +50,6 @@ const blockSettings = {
 };
 ```
 
-{% Plain %}
-
-```js
-var blockSettings = {
-	apiVersion: 2,
-
-	// ...
-
-	edit: function () {
-		var blockProps = wp.blockEditor.useBlockProps( {
-			className: 'my-random-classname',
-		} );
-
-		return wp.element.createElement( 'div', blockProps, 'Your block.' );
-	},
-};
-```
-
-{% end %}
 
 ### attributes
 
@@ -100,8 +59,6 @@ The `attributes` property surfaces all the available attributes and their corres
 
 In this case, assuming we had defined an attribute of `content` during block registration, we would receive and use that value in our edit function:
 
-{% codetabs %}
-{% JSX %}
 
 ```js
 edit: ( { attributes } ) => {
@@ -111,30 +68,13 @@ edit: ( { attributes } ) => {
 };
 ```
 
-{% Plain %}
-
-```js
-edit: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps();
-
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		props.attributes.content
-	);
-}
-```
-
-{% end %}
 
 The value of `attributes.content` will be displayed inside the `div` when inserting the block in the editor.
 
 ### isSelected
 
-The isSelected property is an boolean that communicates whether the block is currently selected.
+The isSelected property is a boolean that communicates whether the block is currently selected.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 edit: ( { attributes, isSelected } ) => {
@@ -151,35 +91,10 @@ edit: ( { attributes, isSelected } ) => {
 };
 ```
 
-{% Plain %}
-
-```js
-edit: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps();
-
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		[
-			'Your block.',
-			props.isSelected ? wp.element.createElement(
-				'span',
-				null,
-				'Shows only when the block is selected.'
-			)
-		]
-	);
-}
-```
-
-{% end %}
-
 ### setAttributes
 
 This function allows the block to update individual attributes based on user interactions.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 edit: ( { attributes, setAttributes, isSelected } ) => {
@@ -201,40 +116,8 @@ edit: ( { attributes, setAttributes, isSelected } ) => {
 };
 ```
 
-{% Plain %}
-
-```js
-edit: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps();
-
-	// Simplify access to attributes
-	let content = props.attributes.content;
-	let mySetting = props.attributes.mySetting;
-
-	// Toggle a setting when the user clicks the button
-	let toggleSetting = () => props.setAttributes( { mySetting: ! mySetting } );
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		[
-			content,
-			props.isSelected ? wp.element.createElement(
-				'button',
-				{ onClick: toggleSetting },
-				'Toggle setting'
-			) : null
-		]
-	);
-},
-```
-
-{% end %}
-
 When using attributes that are objects or arrays it's a good idea to copy or clone the attribute prior to updating it:
 
-{% codetabs %}
-{% JSX %}
-
 ```js
 // Good - a new array is created from the old list attribute and a new list item:
 const { list } = attributes;
@@ -249,25 +132,6 @@ const addListItem = ( newListItem ) => {
 };
 ```
 
-{% Plain %}
-
-```js
-// Good - cloning the old list
-var newList = attributes.list.slice();
-
-var addListItem = function ( newListItem ) {
-	setAttributes( { list: newList.concat( [ newListItem ] ) } );
-};
-
-// Bad - the list from the existing attribute is modified directly to add the new list item:
-var list = attributes.list;
-var addListItem = function ( newListItem ) {
-	list.push( newListItem );
-	setAttributes( { list: list } );
-};
-```
-
-{% end %}
 
 Why do this? In JavaScript, arrays and objects are passed by reference, so this practice ensures changes won't affect other code that might hold references to the same data. Furthermore, the Gutenberg project follows the philosophy of the Redux library that [state should be immutable](https://redux.js.org/faq/immutable-data#what-are-the-benefits-of-immutability)—data should not be changed directly, but instead a new version of the data created containing the changes.
 
@@ -275,8 +139,6 @@ Why do this? In JavaScript, arrays and objects are passed by reference, so this
 
 The `save` function defines the way in which the different attributes should be combined into the final markup, which is then serialized into `post_content`.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 save: () => {
@@ -286,21 +148,6 @@ save: () => {
 };
 ```
 
-{% Plain %}
-
-```js
-save: function() {
-	var blockProps = wp.blockEditor.useBlockProps.save();
-
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		'Your block.'
-	);
-}
-```
-
-{% end %}
 
 For most blocks, the return value of `save` should be an [instance of WordPress Element](/packages/element/README.md) representing how the block is to appear on the front of the site.
 
@@ -326,8 +173,6 @@ Like the `edit` function, when rendering static blocks, it's important to add th
 
 As with `edit`, the `save` function also receives an object argument including attributes which can be inserted into the markup.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 save: ( { attributes } ) => {
@@ -337,32 +182,16 @@ save: ( { attributes } ) => {
 };
 ```
 
-{% Plain %}
 
-```js
-save: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps.save();
-
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		props.attributes.content
-	);
-}
-```
-
-{% end %}
 
 When saving your block, you want to save the attributes in the same format specified by the attribute source definition. If no attribute source is specified, the attribute will be saved to the block's comment delimiter. See the [Block Attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details.
 
 ## Examples
 
-Here are a couple examples of using attributes, edit, and save all together. For a full working example, see the [Introducing Attributes and Editable Fields](/docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md) section of the Block Tutorial.
+Here are a couple examples of using attributes, edit, and save all together.
 
 ### Saving Attributes to Child Elements
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 attributes: {
@@ -381,11 +210,13 @@ edit: ( { attributes, setAttributes } ) => {
 	return (
 		<div { ...blockProps }>
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label='My Text Field'
 				value={ attributes.content }
 				onChange={ updateFieldValue }
 			/>
-		</p>
+		</div>
 	);
 },
 
@@ -396,46 +227,6 @@ save: ( { attributes } ) => {
 },
 ```
 
-{% Plain %}
-
-```js
-attributes: {
-	content: {
-		type: 'string',
-		source: 'html',
-		selector: 'p'
-	}
-},
-
-edit: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps();
-	var updateFieldValue = function( val ) {
-		props.setAttributes( { content: val } );
-	}
-
-	return wp.element.createElement(
-		'div',
-		blockProps,
-		wp.element.createElement(
-			wp.components.TextControl,
-			{
-				label: 'My Text Field',
-				value: props.attributes.content,
-				onChange: updateFieldValue,
-
-			}
-		)
-	);
-},
-
-save: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps.save();
-
-	return wp.element.createElement( 'div', blockProps, props.attributes.content );
-},
-```
-
-{% end %}
 
 ### Saving Attributes via Serialization
 
@@ -443,8 +234,6 @@ Ideally, the attributes saved should be included in the markup. However, there a
 
 This example could be for a dynamic block, such as the [Latest Posts block](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-library/src/latest-posts/index.js), which renders the markup server-side. The save function is still required, however in this case it simply returns null since the block is not saving content from the editor.
 
-{% codetabs %}
-{% JSX %}
 
 ```jsx
 attributes: {
@@ -459,13 +248,15 @@ edit: ( { attributes, setAttributes } ) => {
 	return (
 		<div { ...blockProps }>
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label='Number Posts to Show'
 				value={ attributes.postsToShow }
 				onChange={ ( val ) => {
 					setAttributes( { postsToShow: parseInt( val ) } );
 				}}
 			/>
-		</p>
+		</div>
 	);
 },
 
@@ -474,41 +265,6 @@ save: () => {
 }
 ```
 
-{% Plain %}
-
-```js
-attributes: {
-	postsToShow: {
-		type: 'number',
-	}
-},
-
-edit: function( props ) {
-	var blockProps = wp.blockEditor.useBlockProps();
-
-	return wp.element.createEleement(
-		'div',
-		blockProps,
-		wp.element.createElement(
-			wp.components.TextControl,
-			{
-				label: 'Number Posts to Show',
-				value: props.attributes.postsToShow,
-				onChange: function( val ) {
-					props.setAttributes( { postsToShow: parseInt( val ) } );
-				},
-			}
-		)
-	);
-},
-
-save: function() {
-	return null;
-}
-```
-
-{% end %}
-
 ## Validation
 
 When the editor loads, all blocks within post content are validated to determine their accuracy in order to protect against content loss. This is closely related to the saving implementation of a block, as a user may unintentionally remove or modify their content if the editor is unable to restore a block correctly. During editor initialization, the saved markup for each block is regenerated using the attributes that were parsed from the post's content. If the newly-generated markup does not match what was already stored in post content, the block is marked as invalid. This is because we assume that unless the user makes edits, the markup should remain identical to the saved content.
@@ -517,14 +273,14 @@ If a block is detected to be invalid, the user will be prompted to choose how to
 
 ![Invalid block prompt](https://user-images.githubusercontent.com/7753001/88754471-4cf7e900-d191-11ea-9123-3cee20719d10.png)
 
-Clicking **Attempt Block Recovery** button will attempt recovery action as much as possible.
+Clicking the **Attempt Block Recovery** button will attempt a recovery action as much as possible.
 
 Clicking the "3-dot" menu on the side of the block displays three options:
 
 -   **Resolve**: Open Resolve Block dialog box with two buttons:
-    -   **Convert to HTML**: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
-    -   **Convert to Blocks**: Protects the original markup from the saved post content and convert the block from its original type to the validated block type.
--   **Convert to HTML**: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
+    -   **Convert to HTML**: Protects the original markup from the saved post content and converts the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
+    -   **Convert to Blocks**: Protects the original markup from the saved post content and converts the block from its original type to the validated block type.
+-   **Convert to HTML**: Protects the original markup from the saved post content and converts the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.
 -   **Convert to Classic Block**: Protects the original markup from the saved post content as correct. Since the block will be converted from its original type to the Classic block type, it will no longer be possible to edit the content using controls available for the original block type.
 
 ### Validation FAQ
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index 6185043353fc24..d79f1cdb6c56b1 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -1,13 +1,13 @@
 # Metadata in block.json
 
-Starting in WordPress 5.8 release, we encourage using the `block.json` metadata file as the canonical way to register block types. Here is an example `block.json` file that would define the metadata for a plugin create a notice block.
+Starting with the WordPress 5.8 release, we recommend using the `block.json` metadata file as the canonical way to register block types with both PHP (server-side) and JavaScript (client-side). Here is an example `block.json` file that would define the metadata for a plugin create a notice block.
 
 **Example:**
 
 ```json
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "my-plugin/notice",
 	"title": "Notice",
 	"category": "text",
@@ -28,6 +28,9 @@ Starting in WordPress 5.8 release, we encourage using the `block.json` metadata
 		"my-plugin/message": "message"
 	},
 	"usesContext": [ "groupId" ],
+	"selectors": {
+		"root": ".wp-block-my-plugin-notice"
+	},
 	"supports": {
 		"align": true
 	},
@@ -54,11 +57,12 @@ Starting in WordPress 5.8 release, we encourage using the `block.json` metadata
 	"viewScript": [ "file:./view.js", "example-shared-view-script" ],
 	"editorStyle": "file:./index.css",
 	"style": [ "file:./style.css", "example-shared-style" ],
+	"viewStyle": [ "file:./view.css", "example-view-style" ],
 	"render": "file:./render.php"
 }
 ```
 
-## Benefits using the metadata file
+## Benefits of using the metadata file
 
 The block definition allows code sharing between JavaScript, PHP, and other languages when processing block types stored as JSON, and registering blocks with the `block.json` metadata file provides multiple benefits on top of it.
 
@@ -66,7 +70,7 @@ From a performance perspective, when themes support lazy loading assets, blocks
 
 Furthermore, because the [Block Type REST API Endpoint](https://developer.wordpress.org/rest-api/reference/block-types/) can only list blocks registered on the server, registering blocks server-side is recommended; using the `block.json` file simplifies this registration.
 
-The [WordPress Plugins Directory](https://wordpress.org/plugins/) can detect `block.json` files, highlight blocks included in plugins, and extract their metadata. If you wish to [submit your block(s) to the Block Directory](/docs/getting-started/create-block/submitting-to-block-directory.md), all blocks contained in your plugin must have a `block.json` file for the Block Directory to recognize them.
+The [WordPress Plugins Directory](https://wordpress.org/plugins/) can detect `block.json` files, highlight blocks included in plugins, and extract their metadata. If you wish to submit your block(s) to the Block Directory all blocks contained in your plugin must have a `block.json` file for the Block Directory to recognize them.
 
 Development is improved by using a defined schema definition file. Supported editors can provide help like tooltips, autocomplete, and schema validation. To use the schema, add the following to the top of the `block.json`.
 
@@ -74,71 +78,15 @@ Development is improved by using a defined schema definition file. Supported edi
 "$schema": "https://schemas.wp.org/trunk/block.json"
 ```
 
-## Block registration
-
-### PHP (server-side)
-
-The [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) function that aims to simplify the block type registration on the server, can read metadata stored in the `block.json` file.
-
-This function takes two params relevant in this context (`$block_type` accepts more types and variants):
-
--   `$block_type` (`string`) – path to the folder where the `block.json` file is located or full path to the metadata file if named differently.
--   `$args` (`array`) – an optional array of block type arguments. Default value: `[]`. Any arguments may be defined. However, the one described below is supported by default:
-    -   `$render_callback` (`callable`) – callback used to render blocks of this block type, it's an alternative to the `render` field in `block.json`.
-
-It returns the registered block type (`WP_Block_Type`) on success or `false` on failure.
-
-**Example:**
-
-```php
-register_block_type(
-	__DIR__ . '/notice',
-	array(
-		'render_callback' => 'render_block_core_notice',
-	)
-);
-```
-
-### JavaScript (client-side)
-
-When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name.
-
-**Example:**
-
-```js
-registerBlockType( 'my-plugin/notice', {
-	edit: Edit,
-	// ...other client-side settings
-} );
-```
-
-Although registering the block also on the server with PHP is still recommended for the reasons above, if you want to register it only client-side you can now use `registerBlockType` method from `@wordpress/blocks` package to register a block type using the metadata loaded from `block.json` file.
-
-The function takes two params:
-
--   `$blockNameOrMetadata` (`string`|`Object`) – block type name (supported previously) or the metadata object loaded from the `block.json` file with a bundler (e.g., webpack) or a custom Babel plugin.
--   `$settings` (`Object`) – client-side block settings.
-
-It returns the registered block type (`WPBlock`) on success or `undefined` on failure.
-
-**Example:**
-
-```js
-import { registerBlockType } from '@wordpress/blocks';
-import Edit from './edit';
-import metadata from './block.json';
-
-registerBlockType( metadata, {
-	edit: Edit,
-	// ...other client-side settings
-} );
-```
+<div class="callout callout-info">
+Check <a href="https://developer.wordpress.org/block-editor/getting-started/fundamentals-block-development/registration-of-a-block">Registration of a block</a> to learn more about how to register a block using its metadata.
+</div>
 
 ## Block API
 
 This section describes all the properties that can be added to the `block.json` file to define the behavior and metadata of block types.
 
-### API Version
+### API version
 
 -   Type: `number`
 -   Optional
@@ -147,12 +95,12 @@ This section describes all the properties that can be added to the `block.json`
 -   Default: `1`
 
 ```json
-{ "apiVersion": 2 }
+{ "apiVersion": 3 }
 ```
 
-The version of the Block API used by the block. The most recent version is `2` and it was introduced in WordPress 5.6.
+The version of the Block API used by the block. The most recent version is `3` and it was introduced in WordPress 6.3.
 
-See the [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details.
+See [the API versions documentation](/docs/reference-guides/block-api/block-api-versions.md) for more details.
 
 ### Name
 
@@ -237,7 +185,21 @@ Setting `parent` lets a block require that it is only available when nested with
 { "ancestor": [ "my-block/product" ] }
 ```
 
-The `ancestor` property makes a block available inside the specified block types at any position of the ancestor block subtree. That allows, for example, to place a ‘Comment Content’ block inside a ‘Column’ block, as long as ‘Column’ is somewhere within a ‘Comment Template’ block. In comparrison to the `parent` property blocks that specify their `ancestor` can be placed anywhere in the subtree whilst blocks with a specified `parent` need to be direct children.
+The `ancestor` property makes a block available inside the specified block types at any position of the ancestor block subtree. That allows, for example, to place a ‘Comment Content’ block inside a ‘Column’ block, as long as ‘Column’ is somewhere within a ‘Comment Template’ block. In comparison to the `parent` property blocks that specify their `ancestor` can be placed anywhere in the subtree whilst blocks with a specified `parent` need to be direct children.
+
+### Allowed Blocks
+
+-   Type: `string[]`
+-   Optional
+-   Localized: No
+-   Property: `allowedBlocks`
+-   Since: `WordPress 6.5.0`
+
+```json
+{ "allowedBlocks": [ "my-block/product" ] }
+```
+
+The `allowedBlocks` specifies which block types can be the direct children of the block. For example, a ‘List’ block can allow only ‘List Item’ blocks as children.
 
 ### Icon
 
@@ -250,9 +212,9 @@ The `ancestor` property makes a block available inside the specified block types
 { "icon": "smile" }
 ```
 
-An icon property should be specified to make it easier to identify a block. These can be any of WordPress' Dashicons (slug serving also as a fallback in non-js contexts).
+An icon property should be specified to make it easier to identify a block. These can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/) (slug serving also as a fallback in non-js contexts).
 
-**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. This colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.primitives.SVG](/packages/packages-primitives) component to add accessibility attributes (aria-hidden, role, and focusable).
+**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. These colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.primitives.SVG](/packages/primitives/README.md) component to add accessibility attributes (aria-hidden, role, and focusable).
 
 ### Description
 
@@ -339,7 +301,7 @@ The [gettext](https://www.gnu.org/software/gettext/) text domain of the plugin/b
 
 Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.
 
-See the [the attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details.
+See [the attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details.
 
 ### Provides Context
 
@@ -349,7 +311,7 @@ See the [the attributes documentation](/docs/reference-guides/block-api/block-at
 -   Property: `providesContext`
 -   Default: `{}`
 
-Context provided for available access by descendants of blocks of this type, in the form of an object which maps a context name to one of the block's own attribute.
+Context provided for available access by descendants of blocks of this type, in the form of an object which maps a context name to one of the block's own attributes.
 
 See [the block context documentation](/docs/reference-guides/block-api/block-context.md) for more details.
 
@@ -379,6 +341,38 @@ See [the block context documentation](/docs/reference-guides/block-api/block-con
 }
 ```
 
+### Selectors
+
+-   Type: `object`
+-   Optional
+-   Localized: No
+-   Property: `selectors`
+-   Default: `{}`
+-   Since: `WordPress 6.3.0`
+
+Any custom CSS selectors, keyed by `root`, feature, or sub-feature, to be used
+when generating block styles for theme.json (global styles) stylesheets.
+Providing custom selectors allows more fine grained control over which styles
+apply to what block elements, e.g. applying typography styles only to an inner
+heading while colors are still applied on the outer block wrapper etc.
+
+See [the selectors documentation](/docs/reference-guides/block-api/block-selectors.md) for more details.
+
+```json
+{
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": {
+			"text": ".my-custom-block-selector p"
+		},
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
 ### Supports
 
 -   Type: `object`
@@ -387,7 +381,7 @@ See [the block context documentation](/docs/reference-guides/block-api/block-con
 -   Property: `supports`
 -   Default: `{}`
 
-It contains as set of options to control features used in the editor. See the [the supports documentation](/docs/reference-guides/block-api/block-supports.md) for more details.
+It contains a set of options to control features used in the editor. See [the supports documentation](/docs/reference-guides/block-api/block-supports.md) for more details.
 
 ### Block Styles
 
@@ -408,7 +402,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 styles](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 ### Example
 
@@ -429,11 +423,11 @@ Plugins and Themes can also register [custom block style](/docs/reference-guides
 
 It provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block.
 
-See the [the example documentation](/docs/reference-guides/block-api/block-registration.md#example-optional) for more details.
+See the [Example documentation](/docs/reference-guides/block-api/block-registration.md#example-optional) for more details.
 
 ### Variations
 
--   Type: `object[]`
+-   Type: `object[]|WPDefinedPath` ([learn more](#wpdefinedpath))
 -   Optional
 -   Localized: Yes (`title`, `description`, and `keywords` of each variation only)
 -   Property: `variations`
@@ -460,9 +454,70 @@ Block Variations is the API that allows a block to have similar versions of it,
 
 _Note: In JavaScript you can provide a function for the `isActive` property, and a React element for the `icon`. In the `block.json` file both only support strings_
 
-See the [the variations documentation](/docs/reference-guides/block-api/block-variations.md) for more details.
+Starting with version 6.7, it is possible to specify a PHP file in `block.json` that generates the list of block variations on the server side:
+
+```json
+{ "variations": "file:./variations.php" }
+```
+
+That PHP file is expected to `return` an array that contains the block variations. Strings found in the variations returned from the PHP file will not be localized automatically; instead, use the `__()` function as usual.
+
+For example:
+
+```php
+<?php
+// Generate variations for a Social Icon kind of block.
+
+return array(
+	array(
+		'isDefault'  => true,
+		'name'       => 'wordpress',
+		'title'      => 'WordPress',
+		'icon'       => 'wordpress',
+		'attributes' => array(
+			'service' => 'wordpress',
+		),
+		'isActive'   => array( 'service' )
+	),
+	array(
+		'name'       => 'mail',
+		'title'      => __( 'Mail' ),
+		'keywords'   => array(
+			__( 'email' ),
+			__( 'e-mail' )
+		),
+		'icon'       => 'mail',
+		'attributes' => array(
+			'service' => 'mail',
+		),
+		'isActive'   => array( 'mail' )
+	),
+);
+
+```
+
+See [the variations documentation](/docs/reference-guides/block-api/block-variations.md) for more details.
+
+### Block Hooks
+
+-   Type: `object`
+-   Optional
+-   Property: `blockHooks`
+-   Since: `WordPress 6.4.0`
+
+```json
+{
+	"blockHooks": {
+		"my-plugin/banner": "after"
+	}
+}
+```
+
+Block Hooks is an API that allows a block to automatically insert itself next to all instances of a given block type, in a relative position also specified by the "hooked" block. That is, a block can opt to be inserted before or after a given block type, or as its first or last child (i.e. to be prepended or appended to the list of its child blocks, respectively). Hooked blocks will appear both on the frontend and in the editor (to allow for customization by the user).
 
-### Editor Script
+The key is the name of the block (`string`) to hook into, and the value is the position to hook into (`string`). Take a look at the [Block Hooks documentation](/docs/reference-guides/block-api/block-registration.md#block-hooks-optional) for more info about available configurations.
+
+### Editor script
 
 -   Type: `WPDefinedAsset`|`WPDefinedAsset[]` ([learn more](#wpdefinedasset))
 -   Optional
@@ -496,7 +551,7 @@ It's possible to pass a script handle registered with the [`wp_register_script`]
 
 _Note: An option to pass also an array of scripts exists since WordPress `6.1.0`._
 
-### View Script
+### View script
 
 -   Type: `WPDefinedAsset`|`WPDefinedAsset[]` ([learn more](#wpdefinedasset))
 -   Optional
@@ -514,7 +569,27 @@ It's possible to pass a script handle registered with the [`wp_register_script`]
 
 _Note: An option to pass also an array of view scripts exists since WordPress `6.1.0`._
 
-### Editor Style
+### View script module
+
+-   Type: `WPDefinedAsset`|`WPDefinedAsset[]` ([learn more](#wpdefinedasset))
+-   Optional
+-   Localized: No
+-   Property: `viewScriptModule`
+-   Since: `WordPress 6.5.0`
+
+```json
+{ "viewScriptModule": [ "file:./view.js", "example-shared-script-module-id" ] }
+```
+
+Block type frontend script module definition. They will be enqueued only when viewing the content on the front of the site.
+
+It's possible to pass a script module ID registered with the [`wp_register_script_module`](https://developer.wordpress.org/reference/functions/wp_register_script_module/) function, a path to a JavaScript module relative to the `block.json` file, or a list with a mix of both ([learn more](#wpdefinedasset)).
+
+WordPress scripts and WordPress script modules are not compatible at the moment. If frontend view assets depend on WordPress scripts, `viewScript` should be used. If they depend on WordPress script modules —the Interactivity API at this time— `viewScriptModule` should be used. [More functionality](https://core.trac.wordpress.org/ticket/60647) will gradually become available to Script Modules.
+
+_Note: Available since WordPress `6.5.0`._
+
+### Editor style
 
 -   Type: `WPDefinedAsset`|`WPDefinedAsset[]` ([learn more](#wpdefinedasset))
 -   Optional
@@ -548,6 +623,24 @@ It's possible to pass a style handle registered with the [`wp_register_style`](h
 
 _Note: An option to pass also an array of styles exists since WordPress `5.9.0`._
 
+### View Style
+
+-   Type: `WPDefinedAsset`|`WPDefinedAsset[]` ([learn more](#wpdefinedasset))
+-   Optional
+-   Localized: No
+-   Property: `viewStyle`
+-   Since: `WordPress 6.5.0`
+
+```json
+{ "viewStyle": [ "file:./view.css", "example-view-style" ] }
+```
+
+Block type frontend styles definition. They will be enqueued only when viewing the content on the front of the site.
+
+It's possible to pass a style handle registered with the [`wp_register_style`](https://developer.wordpress.org/reference/functions/wp_register_style/) function, a path to a CSS file relative to the `block.json` file, or a list with a mix of both ([learn more](#wpdefinedasset)).
+
+Frontend-only styles are especially useful for interactive blocks, to style parts that will only be visible after a user performs some action and where those styles will never be needed in the editor. You can start with using the `style` property to put all your common styles in one stylesheet. Only when you need editor-specific styling or frontend-specific styling, you can expand to `editorStyle` and `viewStyle`, but still keep the common part of your styling in the main stylesheet.
+
 ### Render
 
 -   Type: `WPDefinedPath` ([learn more](#wpdefinedpath))
@@ -566,11 +659,21 @@ PHP file to use when rendering the block type on the server to show on the front
 -   `$content` (`string`): The block default content.
 -   `$block` (`WP_Block`): The block instance.
 
+An example implementation of the `render.php` file defined with `render` could look like:
+
+```php
+<div <?php echo get_block_wrapper_attributes(); ?>>
+	<?php echo esc_html( $attributes['label'] ); ?>
+</div>
+```
+
+_Note: This file loads for every instance of the block type when rendering the page HTML on the server. Accounting for that is essential when declaring functions or classes in the file. The simplest way to avoid the risk of errors is to consume that shared logic from another file._
+
 ## Assets
 
 ### `WPDefinedPath`
 
-The `WPDefinedPath` type is a subtype of string, where the value represents a path to a JavaScript, CSS or PHP file relative to where `block.json` file is located. The path provided must be prefixed with `file:`. This approach is based on how npm handles [local paths](https://docs.npmjs.com/files/package.json#local-paths) for packages.
+The `WPDefinedPath` type is a subtype of string, where the value represents a path to a JavaScript, CSS or PHP file relative to where the `block.json` file is located. The path provided must be prefixed with `file:`. This approach is based on how npm handles [local paths](https://docs.npmjs.com/files/package.json#local-paths) for packages.
 
 **Example:**
 
@@ -584,7 +687,7 @@ In `block.json`:
 
 ### `WPDefinedAsset`
 
-It extends `WPDefinedPath` for JavaScript and CSS files. An alternative to the file path would be a script or style handle name referencing an already registered asset using WordPress helpers.
+It extends `WPDefinedPath` for JavaScript and CSS files. An alternative to the file path would be a script handle, script module ID, or style handle referencing an already registered asset using WordPress helpers.
 
 **Example:**
 
@@ -594,23 +697,27 @@ In `block.json`:
 {
 	"editorScript": "file:./index.js",
 	"script": "file:./script.js",
-	"viewScript": [ "file:./view.js", "example-shared-view-script" ],
+	"viewScriptModule": [
+		"file:./view.js",
+		"example-registered-script-module-id"
+	],
 	"editorStyle": "file:./index.css",
-	"style": [ "file:./style.css", "example-shared-style" ]
+	"style": [ "file:./style.css", "example-shared-style" ],
+	"viewStyle": [ "file:./view.css", "example-view-style" ]
 }
 ```
 
-In the context of WordPress, when a block is registered with PHP, it will automatically register all scripts and styles that are found in the `block.json` file and use file paths rather than asset handles.
+In the context of WordPress, when a block is registered with PHP, it will automatically register all scripts, script modules, and styles that are found in the `block.json` file and use file paths rather than asset handles.
 
-That's why, the `WPDefinedAsset` type has to offer a way to mirror also the shape of params necessary to register scripts and styles using [`wp_register_script`](https://developer.wordpress.org/reference/functions/wp_register_script/) and [`wp_register_style`](https://developer.wordpress.org/reference/functions/wp_register_style/), and then assign these as handles associated with your block using the `script`, `style`, `editor_script`, and `editor_style` block type registration settings.
+That's why the `WPDefinedAsset` type has to offer a way to mirror the parameters necessary to register scripts, script modules, and styles using [`wp_register_script`](https://developer.wordpress.org/reference/functions/wp_register_script/), [`wp_register_script_module`](https://developer.wordpress.org/reference/functions/wp_register_script_module/), and [`wp_register_style`](https://developer.wordpress.org/reference/functions/wp_register_style/), and then assign these as handles or script module IDs associated with the block.
 
 It's possible to provide an object which takes the following shape:
 
 -   `handle` (`string`) - the name of the script. If omitted, it will be auto-generated.
--   `dependencies` (`string[]`) - an array of registered script handles this script depends on. Default value: `[]`.
--   `version` (`string`|`false`|`null`) - string specifying the script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If the version is set to `false`, a version number is automatically added equal to current installed WordPress version. If set to `null`, no version is added. Default value: `false`.
+-   `dependencies` (`string[]`|`{ id: string, import?: 'dynamic'|'static' }[]`) - an array of registered script handles this script depends on. Script modules may use a simple string for static dependencies or the object form to indicate a dynamic dependency. Dynamic dependencies are dependencies that may or may not be used at runtime and are typically used with the dynamic `import('module-id')` syntax. Default value: `[]`.
+-   `version` (`string`|`false`|`null`) - string specifying the script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If the version is set to `false`, a version number is automatically added equal to the currently installed WordPress version. If set to `null`, no version is added. Default value: `false`.
 
-The definition is stored inside separate PHP file which ends with `.asset.php` and is located next to the JS/CSS file listed in `block.json`. WordPress will automatically detect this file through pattern matching. This option is the preferred one as it is expected it will become an option to auto-generate those asset files with `@wordpress/scripts` package.
+The definition is stored inside a separate PHP file which ends with `.asset.php` and is located next to the JS/CSS file listed in `block.json`. WordPress will automatically detect this file through pattern matching. This option is the preferred one as it is expected it will become an option to auto-generate those asset files with `@wordpress/scripts` package.
 
 **Example:**
 
@@ -633,21 +740,22 @@ In `build/index.asset.php`:
 <?php
 return array(
 	'dependencies' => array(
+		'react',
 		'wp-blocks',
-		'wp-element',
 		'wp-i18n',
 	),
 	'version'      => '3be55b05081a63d8f9d0ecb466c42cfd',
 );
 ```
 
-### Frontend Enqueueing
+### Frontend enqueueing
 
 Starting in the WordPress 5.8 release, it is possible to instruct WordPress to enqueue scripts and styles for a block type only when rendered on the frontend. It applies to the following asset fields in the `block.json` file:
 
 -   `script`
 -   `viewScript`
 -   `style`
+-   `viewStyle` (Added in WordPress 6.5.0)
 
 ## Internationalization
 
@@ -679,7 +787,7 @@ $metadata = array(
 );
 ```
 
-Implementation follows the existing [get_plugin_data](https://codex.wordpress.org/Function_Reference/get_plugin_data) function which parses the plugin contents to retrieve the plugin’s metadata, and it applies translations dynamically.
+Implementation follows the existing [get_plugin_data](https://developer.wordpress.org/reference/functions/get_plugin_data) function which parses the plugin contents to retrieve the plugin’s metadata, and it applies translations dynamically.
 
 ### JavaScript
 
@@ -698,7 +806,7 @@ registerBlockType( metadata, {
 } );
 ```
 
-## Backward Compatibility
+## Backward compatibility
 
 The existing registration mechanism (both server side and frontend) will continue to work, it will serve as low-level implementation detail for the `block.json` based registration.
 
@@ -731,4 +839,4 @@ registerBlockType( 'my-plugin/block-name', {
 } );
 ```
 
-In the case of [dynamic blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md) supported by WordPress, it should be still possible to register `render_callback` property using both [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) function on the server.
+In the case of [dynamic blocks](/docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md) supported by WordPress, it should still be possible to register the `render_callback` property using both [`register_block_type`](https://developer.wordpress.org/reference/functions/register_block_type/) functions on the server.
diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md
index 12fac7b479361a..b0096e24791de8 100644
--- a/docs/reference-guides/block-api/block-patterns.md
+++ b/docs/reference-guides/block-api/block-patterns.md
@@ -1,20 +1,8 @@
 # Patterns
 
-Block Patterns are predefined block layouts, available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.
-
-In this Document:
-- [Patterns](#patterns)
-	- [Block Patterns](#block-patterns)
-		- [register_block_pattern](#register_block_pattern)
-	- [Unregistering Block Patterns](#unregistering-block-patterns)
-		- [unregister_block_pattern](#unregister_block_pattern)
-	- [Block Pattern Categories](#block-pattern-categories)
-		- [register_block_pattern_category](#register_block_pattern_category)
-		- [unregister_block_pattern_category](#unregister_block_pattern_category)
-	- [Block patterns contextual to block types and pattern transformations](#block-patterns-contextual-to-block-types-and-pattern-transformations)
-	- [Semantic block patterns](#semantic-block-patterns)
-
-## Block Patterns
+Block Patterns are predefined block layouts available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.
+
+## Block patterns
 
 ### register_block_pattern
 
@@ -33,10 +21,12 @@ The properties available for block patterns are:
 -   `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching.
 -   `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.
+-   `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, for example, `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`.
+-   `source` (optional): A string that denotes the source of the pattern. For a plugin registering a pattern, pass the string `plugin`. For a theme, pass the string `theme`.
 
-The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':
+The following code sample registers a block pattern named `my-plugin/my-awesome-pattern`:
 
 ```php
 register_block_pattern(
@@ -49,9 +39,7 @@ register_block_pattern(
 );
 ```
 
-_Note:_
-
-`register_block_pattern()` should be called from a handler attached to the init hook.
+Note that `register_block_pattern()` should be called from a handler attached to the `init` hook.
 
 ```php
 function my_plugin_register_my_patterns() {
@@ -61,14 +49,15 @@ function my_plugin_register_my_patterns() {
 add_action( 'init', 'my_plugin_register_my_patterns' );
 ```
 
-## Unregistering Block Patterns
+## Unregistering block patterns
 
 ### unregister_block_pattern
 
-The `unregister_block_pattern` helper function allows for a previously registered block pattern to be unregistered from a theme or plugin and receives one argument.
+The `unregister_block_pattern` helper function allows a previously registered block pattern to be unregistered from a theme or plugin and receives one argument.
+
 -   `title`: The name of the block pattern to be unregistered.
 
-The following code sample unregisters the block pattern named 'my-plugin/my-awesome-pattern':
+The following code sample unregisters the block pattern named `my-plugin/my-awesome-pattern`:
 
 ```php
 unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
@@ -86,13 +75,14 @@ function my_plugin_unregister_my_patterns() {
 add_action( 'init', 'my_plugin_unregister_my_patterns' );
 ```
 
-## Block Pattern Categories
+## Block pattern categories
 
 Block patterns can be grouped using categories. The block editor comes with bundled categories you can use on your custom block patterns. You can also register your own block pattern categories.
 
 ### register_block_pattern_category
 
 The `register_block_pattern_category` helper function receives two arguments.
+
 -   `title`: A machine-readable title for the block pattern category.
 -	`properties`: An array describing properties of the pattern category.
 
@@ -100,7 +90,7 @@ The properties of the pattern categories include:
 
 -   `label` (required): A human-readable label for the pattern category.
 
-The following code sample registers the category named 'hero':
+The following code sample registers the category named `hero`:
 
 ```php
 register_block_pattern_category(
@@ -113,6 +103,8 @@ _Note:_
 
 `register_block_pattern_category()` should be called from a handler attached to the init hook.
 
+The category will not show under Patterns unless a pattern has been assigned to that category.
+
 ```php
 function my_plugin_register_my_pattern_categories() {
   register_block_pattern_category( ... );
@@ -123,12 +115,11 @@ add_action( 'init', 'my_plugin_register_my_pattern_categories' );
 
 ### unregister_block_pattern_category
 
-`unregister_block_pattern_category` allows unregistering a pattern category.
-
 The `unregister_block_pattern_category` helper function allows for a previously registered block pattern category to be unregistered from a theme or plugin and receives one argument.
+
 -   `title`: The name of the block pattern category to be unregistered.
 
-The following code sample unregisters the category named 'hero':
+The following code sample unregisters the category named `hero`:
 
 ```php
 unregister_block_pattern_category( 'hero' );
@@ -150,7 +141,7 @@ add_action( 'init', 'my_plugin_unregister_my_pattern_categories' );
 
 It is possible to attach a block pattern to one or more block types. This adds the block pattern as an available transform for that block type.
 
-Currently these transformations are available only to simple blocks (blocks without inner blocks). In order for a pattern to be suggested, **every selected block must be present in the block pattern**.
+Currently, these transformations are available only to simple blocks (blocks without inner blocks). In order for a pattern to be suggested, **every selected block must be present in the block pattern**.
 
 For instance:
 
@@ -167,9 +158,9 @@ register_block_pattern(
 );
 ```
 
-The above code registers a block pattern named 'my-plugin/powered-by-wordpress' and also shows the pattern in the "transform menu" of paragraph blocks. The transformation result will be keeping the paragraph's existing content and also apply the other attributes - in this case the background and text color.
+The above code registers a block pattern named `my-plugin/powered-by-wordpress` and shows the pattern in the "transform menu" of paragraph blocks. The transformation result will keep the paragraph's existing content and apply the other attributes - in this case, the background and text color.
 
-As mentioned above pattern transformations for simple blocks can also work if we have selected multiple blocks and there are matching contextual patterns to these blocks. Let's see an example of a pattern where two block types are attached.
+As mentioned above, pattern transformations for simple blocks can also work if we have selected multiple blocks and there are matching contextual patterns to these blocks. Let's see an example of a pattern where two block types are attached.
 
 ```php
 register_block_pattern(
@@ -190,7 +181,7 @@ register_block_pattern(
 );
 ```
 
-In the above example if we select **one of the two** block types, either a paragraph or a heading block, this pattern will be suggested by transforming the selected block using its content and will also add the remaing blocks from the pattern. If on the other hand we multi select one paragraph and one heading block, both blocks will be transformed.
+In the above example, if we select **one of the two** block types, either a paragraph or a heading block, this pattern will be suggested by transforming the selected block using its content and will also add the remaining blocks from the pattern. If, on the other hand, we multi-select one paragraph and one heading block, both blocks will be transformed.
 
 Blocks can also use these contextual block patterns in other places. For instance, when inserting a new Query Loop block, the user is provided with a list of all patterns attached to the block.
 
diff --git a/docs/reference-guides/block-api/block-registration.md b/docs/reference-guides/block-api/block-registration.md
index 5c38bf7f79c361..92be19ee48c9fa 100644
--- a/docs/reference-guides/block-api/block-registration.md
+++ b/docs/reference-guides/block-api/block-registration.md
@@ -2,7 +2,11 @@
 
 Block registration API reference.
 
-**Note:** You can use the functions documented on this page to register a block on the client-side only, but a flexible method to register new block types is to use the `block.json` metadata file. See [metadata documentation for complete information](/docs/reference-guides/block-api/block-metadata.md).
+<div class="callout callout-alert">
+You can use the functions documented on this page to register a block with JavaScript only on the client, but the recommended method is to register new block types also with PHP on the server using the `block.json` metadata file. See <a href="https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/">metadata documentation for complete information</a>
+<br/>
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">Learn how to create your first block</a> for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
+</div>
 
 ## `registerBlockType`
 
@@ -25,7 +29,7 @@ _Note:_ A block name can only contain lowercase alphanumeric characters and dash
 
 _Note:_ This name is used on the comment delimiters as `<!-- wp:my-plugin/book -->`. Those blocks provided by core don't include a namespace when serialized.
 
-### Block Configuration
+### Block configuration
 
 -   **Type:** `Object` [ `{ key: value }` ]
 
@@ -35,7 +39,7 @@ A block requires a few properties to be specified before it can be registered su
 
 -   **Type:** `String`
 
-This is the display title for your block, which can be translated with our translation functions. The title will display in the Inserter and in other areas of the editor. 
+This is the display title for your block, which can be translated with our translation functions. The title will display in the Inserter and in other areas of the editor.
 
 ```js
 // Our data object
@@ -90,11 +94,11 @@ icon: 'book-alt',
 icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><path d="M19 13H5v-2h14v2z" /></svg>,
 ```
 
-**Note:** Custom SVG icons are automatically wrapped in the [`wp.primitives.SVG` component](/packages/primitives/src/svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
+**Note:** Custom SVG icons are automatically wrapped in the [`wp.primitives.SVG` component](/packages/primitives/README.md) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`).
 
 An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property.
 
-Besides src the object can contain background and foreground colors, this colors will appear with the icon when they are applicable e.g.: in the inserter.
+Besides src the object can contain background and foreground colors, these colors will appear with the icon when they are applicable e.g.: in the inserter.
 
 ```js
 icon: {
@@ -145,7 +149,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 styles](/docs/reference-guides/block-api/block-styles.md) for existing blocks.
 
 #### attributes (optional)
 
@@ -179,7 +183,7 @@ attributes: {
 
 -   **Type:** `Object`
 
-Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block.
+Example provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block and in the Styles panel when the block is selected.
 
 The data provided in the example object should match the attributes defined. For example:
 
@@ -193,7 +197,7 @@ example: {
 },
 ```
 
-If `example` is not defined, the preview will not be shown. So even if no-attributes are defined, setting a empty example object `example: {}` will trigger the preview to show.
+If `example` is not defined, the preview will not be shown. So even if no attributes are defined, setting an empty example object `example: {}` will trigger the preview to show.
 
 It's also possible to extend the block preview with inner blocks via `innerBlocks`. For example:
 
@@ -230,6 +234,7 @@ example: {
 #### variations (optional)
 
 -   **Type:** `Object[]`
+-   **Since**: `WordPress 5.9.0`
 
 Similarly to how the block's styles can be declared, a block type can define block variations that the user can pick from. The difference is that, rather than changing only the visual appearance, this field provides a way to apply initial custom attributes and inner blocks at the time when a block is inserted. See the [Block Variations API](/docs/reference-guides/block-api/block-variations.md) for more details.
 
@@ -237,13 +242,13 @@ Similarly to how the block's styles can be declared, a block type can define blo
 
 -   **_Type:_** `Object`
 
-Supports contains as set of options to control features used in the editor. See the [the supports documentation](/docs/reference-guides/block-api/block-supports.md) for more details.
+Supports contains a set of options to control features used in the editor. See [the `supports` documentation](/docs/reference-guides/block-api/block-supports.md) for more details.
 
 #### transforms (optional)
 
 -   **Type:** `Object`
 
-Transforms provide rules for what a block can be transformed from and what it can be transformed to. A block can be transformed from another block, a shortcode, a regular expression, a file or a raw DOM node. Take a look at the [Block Transforms API](/docs/reference-guides/block-api/block-transforms.md) for more info about each available transformation.
+Transforms provide rules for what a block can be transformed from and what it can be transformed to. A block can be transformed from another block, a shortcode, a regular expression, a file, or a raw DOM node. Take a look at the [Block Transforms API](/docs/reference-guides/block-api/block-transforms.md) for more info about each available transformation.
 
 #### parent (optional)
 
@@ -258,7 +263,60 @@ Setting `parent` lets a block require that it is only available when nested with
 parent: [ 'core/columns' ],
 ```
 
-## Block Collections
+#### ancestor (optional)
+
+-   **Type:** `Array`
+-   **Since**: `WordPress 6.0.0`
+
+The `ancestor` property makes a block available inside the specified block types at any position of the ancestor block subtree. That allows, for example, to place a 'Comment Content' block inside a 'Column' block, as long as 'Column' is somewhere within a 'Comment Template' block. In comparison to the `parent` property, blocks that specify their `ancestor` can be placed anywhere in the subtree whilst blocks with a specified `parent` need to be direct children.
+
+```js
+// Only allow this block when it is nested at any level in a Columns block.
+ancestor: [ 'core/columns' ],
+```
+
+#### allowedBlocks (optional)
+
+-   **Type:** `Array`
+-   **Since**: `WordPress 6.5.0`
+
+Setting the `allowedBlocks` property will limit which block types can be nested as direct children of the block.
+
+```js
+// Only allow the Columns block to be nested as direct child of this block
+allowedBlocks: [ 'core/columns' ],
+```
+
+#### blockHooks (optional)
+
+-   **Type:** `Object`
+-   **Since**: `WordPress 6.4.0`
+
+Block Hooks is an API that allows a block to automatically insert itself next to all instances of a given block type, in a relative position also specified by the "hooked" block. That is, a block can opt to be inserted before or after a given block type, or as its first or last child (i.e. to be prepended or appended to the list of its child blocks, respectively). Hooked blocks will appear both on the frontend and in the editor (to allow for customization by the user).
+
+The key is the name of the block (`string`) to hook into, and the value is the position to hook into (`string`). Allowed target values are:
+
+-   `before` – inject before the target block.
+-   `after` - inject after the target block.
+-   `firstChild` - inject before the first inner block of the target container block.
+-   `lastChild` - inject after the last inner block of the target container block.
+
+```js
+{
+	blockHooks: {
+		'core/verse': 'before',
+		'core/spacer': 'after',
+		'core/column': 'firstChild',
+		'core/group': 'lastChild',
+	}
+}
+```
+
+It’s crucial to emphasize that the Block Hooks feature is only designed to work with _static_ block-based templates, template parts, and patterns. For patterns, this includes those provided by the theme, from [Block Pattern Directory](https://wordpress.org/patterns/), or from calls to [`register_block_pattern`](https://developer.wordpress.org/reference/functions/register_block_pattern/).
+
+Block Hooks will not work with post content or patterns crafted by the user, such as synced patterns, or theme templates and template parts that have been modified by the user.
+
+## Block collections
 
 ## `registerBlockCollection`
 
diff --git a/docs/reference-guides/block-api/block-selectors.md b/docs/reference-guides/block-api/block-selectors.md
new file mode 100644
index 00000000000000..ab810c32bb8f30
--- /dev/null
+++ b/docs/reference-guides/block-api/block-selectors.md
@@ -0,0 +1,120 @@
+# Selectors
+
+Block Selectors is the API that allows blocks to customize the CSS selector used
+when their styles are generated.
+
+A block may customize its CSS selectors at three levels: root, feature, and
+subfeature.
+
+## Root selector
+
+The root selector is the block's primary CSS selector.
+
+All blocks require a primary CSS selector for their style declarations to be
+included under. If one is not provided through the Block Selectors API, a
+default is generated in the form of `.wp-block-<name>`.
+
+### Example
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector"
+	}
+}
+```
+
+## Feature selectors
+
+Feature selectors relate to styles for a block support, e.g. border, color,
+typography, etc.
+
+A block may wish to apply the styles for specific features to different
+elements within a block. An example might be using colors on the block's wrapper
+but applying the typography styles to an inner heading only.
+
+### Example
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": ".my-custom-block-selector",
+		"typography": ".my-custom-block-selector > h2"
+	}
+}
+```
+
+## Subfeature selectors
+
+These selectors relate to individual styles provided by a block support e.g.
+`background-color`
+
+A subfeature can have styles generated under its own unique selector. This is
+especially useful where one block support subfeature can't be applied to the
+same element as the support's other subfeatures.
+
+A great example of this is `text-decoration`. Web browsers render this style
+differently, making it difficult to override if added to a wrapper element. By
+assigning `text-decoration` a custom selector, its style can target only the
+elements to which it should be applied.
+
+### Example
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": ".my-custom-block-selector",
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
+## Shorthand
+
+Rather than specify a CSS selector for every subfeature, you can set a single
+selector as a string value for the relevant feature. This is the approach
+demonstrated for the `color` feature in the earlier examples above.
+
+## Fallbacks
+
+A selector that hasn't been configured for a specific feature will fall back to
+the block's root selector. Similarly, if a subfeature hasn't had a custom
+selector set, it will fall back to its parent feature's selector and, if unavailable, fall back further to the block's root selector.
+
+Rather than repeating selectors for multiple subfeatures, you can set the
+common selector as the parent feature's `root` selector and only define the
+unique selectors for the subfeatures that differ.
+
+### Example
+
+```json
+{
+	...
+	"selectors": {
+		"root": ".my-custom-block-selector",
+		"color": {
+			"text": ".my-custom-block-selector p"
+		},
+		"typography": {
+			"root": ".my-custom-block-selector > h2",
+			"text-decoration": ".my-custom-block-selector > h2 span"
+		}
+	}
+}
+```
+
+The `color.background-color` subfeature isn't explicitly set in the above
+example. As the `color` feature also doesn't define a `root` selector,
+`color.background-color` would be included under the block's primary root
+selector, `.my-custom-block-selector`.
+
+For a subfeature such as `typography.font-size`, it would fallback to its parent
+feature's selector given that is present, i.e. `.my-custom-block-selector > h2`.
diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md
index 90b6c06d18f59d..b47b1a76a71f68 100644
--- a/docs/reference-guides/block-api/block-styles.md
+++ b/docs/reference-guides/block-api/block-styles.md
@@ -1,6 +1,6 @@
 # Styles
 
-Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Getting Started with JavaScript tutorial](/docs/how-to-guides/javascript/) for a full example.
+Block Styles allow alternative styles to be applied to existing blocks. They work by adding a className to the block's wrapper. This className can be used to provide an alternative styling for the block if the block style is selected. See the [Use styles and stylesheets](/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md) for a full example on how to apply styles to a block.
 
 _Example:_
 
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
index f3d15f118ae8fa..a15191c19ffb73 100644
--- a/docs/reference-guides/block-api/block-supports.md
+++ b/docs/reference-guides/block-api/block-supports.md
@@ -7,30 +7,29 @@ Opting into any of these features will register additional attributes on the blo
 In order for the attribute to get applied to the block the generated properties get added to the wrapping element of the block. They get added to the object you get returned from the `useBlockProps` hook.
 
 `BlockEdit` function:
+
 ```js
 function BlockEdit() {
 	const blockProps = useBlockProps();
 
-	return (
-		<div {...blockProps}>Hello World!</div>
-	);
+	return <div { ...blockProps }>Hello World!</div>;
 }
 ```
 
 `save` function:
+
 ```js
 function BlockEdit() {
 	const blockProps = useBlockProps.save();
 
-	return (
-		<div {...blockProps}>Hello World!</div>
-	);
+	return <div { ...blockProps }>Hello World!</div>;
 }
 ```
 
 For dynamic blocks that get rendered via a `render_callback` in PHP you can use the `get_block_wrapper_attributes()` function. It returns a string containing all the generated properties and needs to get output in the opening tag of the wrapping block element.
 
 `render_callback` function:
+
 ```php
 function render_block() {
 	$wrapper_attributes = get_block_wrapper_attributes();
@@ -62,7 +61,7 @@ supports: {
 -   Type: `boolean` or `array`
 -   Default value: `false`
 
-This property adds block controls which allow to change block's alignment.
+This property adds block controls, which enable changes to a block's alignment.
 
 ```js
 supports: {
@@ -80,7 +79,7 @@ supports: {
 }
 ```
 
-When the block declares support for `align`, the attributes definition is extended to include an align attribute with a `string` type. By default, no alignment is assigned. The block can apply a default alignment by specifying its own `align` attribute with a default e.g.:
+When the block declares support for `align`, the attributes definition is extended to include an align attribute with a `string` type. By default, no alignment is assigned. The block can apply a default alignment by specifying its own `align` attribute with a default. For example:
 
 ```js
 attributes: {
@@ -107,24 +106,80 @@ supports: {
 
 ## ariaLabel
 
-- Type: `boolean`
-- Default value: `false`
+-   Type: `boolean`
+-   Default value: `false`
 
 ARIA-labels let you define an accessible label for elements. This property allows enabling the definition of an aria-label for the block, without exposing a UI field.
 
 ```js
 supports: {
-	// Add the support for aria label.
+	// Add support for an aria label.
 	ariaLabel: true
 }
 ```
 
+## background
+
+_**Note:** Since WordPress 6.5._
+
+-   Type: `Object`
+-   Default value: `null`
+-   Subproperties
+    -   `backgroundImage`: type `boolean`, default value `false`
+    -   `backgroundSize`: type `boolean`, default value `false`
+
+This value signals that a block supports some of the CSS style properties related to background. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls).
+
+`backgroundImage` adds UI controls which allow the user to select a background image.
+`backgroundSize` adds the FocalPointPicker to pick the position of the background image and allow the user to select the background size (cover, contain, fixed).
+
+```js
+supports: {
+	background: {
+		backgroundImage: true // Enable background image control.
+		backgroundSize: true // Enable background image + size control.
+	}
+}
+```
+
+When a block declares support for a specific background property, its attributes definition is extended to include the `style` attribute.
+
+When a background image is selected, the image data is stored in the `style.background.backgroundImage`.
+
+When a background images is selected and its position or size are changed, the background-position is stored in the `style.background.backgroundPosition` and its background-size in `style.background.backgroundSize` attribute.
+
+-   `style`: an attribute of `object` type with no default assigned. This is added when `backgroundImage` or `backgroundSize` support is declared. It stores the custom values set by the user.
+    -   `background`: an attribute of `object` type.
+        - `backgroundImage`: an attribute of `object` type, containing information about the selected image
+            - `url`: type `string`, URL to the image
+            - `id`: type `int`, media attachment ID
+            - `source`: type `string`, at the moment the only value is `file`
+            - `title`: type `string`, title of the media attachment
+        - `backgroundPosition`: an attribute of `string` type, defining the background images position, selected by FocalPointPicker and used in CSS as the [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) value.
+        - `backgroundSize`: an attribute of `string` type. defining the CSS [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) value.
+
+The block can apply a default background image, position and size by specifying its own attribute with a default. For example:
+
+```js
+attributes: {
+    style: {
+        background: {
+            backgroundImage: {
+				"url":"IMAGE_URL"
+			}
+			backgroundPosition:"50% 50%",
+            backgroundSize: "cover"
+        }
+    }
+}
+```
+
 ## className
 
 -   Type: `boolean`
 -   Default value: `true`
 
-By default, the class `.wp-block-your-block-name` is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If, for whatever reason, a class is not desired on the markup, this functionality can be disabled.
+By default, the class `.wp-block-your-block-name` is added to the root element of your saved markup. This helps by providing a consistent mechanism for styling blocks that themes and plugins can rely on. If, for whatever reason, a class is not desired on the markup, this functionality can be disabled.
 
 ```js
 supports: {
@@ -139,20 +194,22 @@ supports: {
 -   Default value: null
 -   Subproperties:
     -   `background`: type `boolean`, default value `true`
-    -   `__experimentalDuotone`: type `string`, default value undefined
+    -   `button`: type `boolean`, default value `false`
+    -   `enableContrastChecker`: type `boolean`, default value `true`
     -   `gradients`: type `boolean`, default value `false`
+    -   `heading`: type `boolean`, default value `false`
     -   `link`: type `boolean`, default value `false`
     -   `text`: type `boolean`, default value `true`
 
-This value signals that a block supports some of the properties related to color. When it does, the block editor will show UI controls for the user to set their values.
+This value signals that a block supports some of the properties related to color. When this value is present, the block editor will show UI controls for the user to set their values.
 
-Note that the `background` and `text` keys have a default value of `true`, so if the `color` property is present they'll also be considered enabled:
+Note that the `background` and `text` keys have a default value of `true`, so if the `color` property is present they will also be considered enabled:
 
 ```js
 supports: {
 	color: {
 		// This also enables text and background UI controls.
-		gradients: true // Enable gradients UI control.
+		gradients: true // Enables the gradients UI control.
 	}
 }
 ```
@@ -162,8 +219,8 @@ It's possible to disable them individually:
 ```js
 supports: {
     color: { // Text UI control is enabled.
-        background: false, // Disable background UI control.
-        gradients: true // Enable gradients UI control.
+        background: false, // Disables the background UI control.
+        gradients: true // Enables the gradients UI control.
     }
 }
 ```
@@ -176,7 +233,7 @@ When color support is declared, this property is enabled by default (along with
 
 ```js
 supports: {
-    color: true // Enables background and text
+    color: true // Enables background and text color support.
 }
 ```
 
@@ -185,7 +242,7 @@ To disable background support while keeping other color supports enabled, set to
 ```js
 supports: {
     color: {
-        // Disable background support. Text color support is still enabled.
+        // Disables background support. Text color support is still enabled.
         background: false
     }
 }
@@ -193,84 +250,107 @@ supports: {
 
 When the block declares support for `color.background`, the attributes definition is extended to include two new attributes: `backgroundColor` and `style`:
 
-- `backgroundColor`: attribute of `string` type with no default assigned.
+-   `backgroundColor`: an attribute of `string` type with no default assigned.
 
-  When a user chooses from the list of preset background colors, the preset slug is stored in the `backgroundColor` attribute.
+    When a user chooses from the list of preset background colors, the preset slug is stored in the `backgroundColor` attribute.
 
-  Background color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).
+    Background color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).
 
-  The block can apply a default preset background color by specifying its own attribute with a default e.g.:
+    The block can apply a default preset background color by specifying its own attribute with a default. For example:
 
-  ```js
-  attributes: {
-      backgroundColor: {
-          type: 'string',
-          default: 'some-preset-background-slug',
-      }
-  }
-  ```
+    ```js
+    attributes: {
+        backgroundColor: {
+            type: 'string',
+            default: 'some-preset-background-slug',
+        }
+    }
+    ```
 
-- `style`: attribute of `object` type with no default assigned.
+-   `style`: attribute of `object` type with no default assigned.
 
-  When a custom background color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.background` attribute.
+    When a custom background color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.background` attribute.
 
-  The block can apply a default custom background color by specifying its own attribute with a default e.g.:
+    The block can apply a default custom background color by specifying its own attribute with a default. For example:
+
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                color: {
+                    background: '#aabbcc',
+                }
+            }
+        }
+    }
+    ```
 
-  ```js
-  attributes: {
-      style: {
-          type: 'object',
-          default: {
-              color: {
-                  background: '#aabbcc',
-              }
-          }
-      }
-  }
-  ```
+### color.button
 
-### color.__experimentalDuotone
+_**Note:** Since WordPress 6.5._
 
-This property adds UI controls which allow to apply a duotone filter to a block or part of a block.
+This property adds block controls which allow the user to set button colors (text, background) in a block. Button colors are disabled by default.
 
-The parent selector is automatically added much like nesting in Sass/SCSS (however, the `&` selector is not supported).
+To enable button color support, set `color.button` to `true`.
 
 ```js
 supports: {
-    color: {
-        // Apply the filter to the same selector in both edit and save.
-        __experimentalDuotone: '> .duotone-img, > .duotone-video',
-
-        // Default values must be disabled if you don't want to use them with duotone.
-        background: false,
-        text: false
-    }
+	color: {
+		button: true
+	}
 }
 ```
 
-Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/theme-json.md).
+Button 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.button`, the attributes definition is extended to include the `style` attribute:
+
+-   `style`: an attribute of `object` type with no default assigned.
+
+    When a button color is selected, the color value is stored in the `style.elements.button.color.text` and `style.elements.button.color.background` attribute.
+
+    The block can apply a default button colors by specifying its own attribute with a default. For example:
+
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                elements: {
+                    button: {
+                        color: {
+                            text: 'var:preset|color|contrast',
+    					    background: '#000000',
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ```
+
+### color.enableContrastChecker
+
+_**Note:** Since WordPress 6.5._
+
+Determines whether the contrast checker widget displays in the block editor UI.
+
+The contrast checker appears only if the block declares support for color. It tests the readability of color combinations and warns if there is a potential issue. The property is enabled by default. Set to `false` to explicitly disable:
 
-When the block declares support for `color.__experimentalDuotone`, the attributes definition is extended to include the attribute `style`:
+```js
+supports: {
+	color: {
+		enableContrastChecker: false
+	}
+}
+```
 
-- `style`: attribute of `object` type with no default assigned.
+### color.\_\_experimentalDuotone
 
-  The block can apply a default duotone color by specifying its own attribute with a default e.g.:
+_**Note:** Deprecated since WordPress 6.3._
 
-  ```js
-  attributes: {
-      style: {
-          type: 'object',
-          default: {
-              color: {
-                  duotone: [
-                      '#FFF',
-                      '#000'
-                  ]
-              }
-          }
-      }
-  }
-  ```
+This property has been replaced by [`filter.duotone`](#filterduotone).
 
 ### color.gradients
 
@@ -280,8 +360,7 @@ This property adds UI controls which allow the user to apply a gradient backgrou
 supports: {
     color: {
         gradients: true,
-
-        // Default values must be disabled if you don't want to use them with gradient.
+        // Default values must be disabled if you don't want to use them with gradients.
         background: false,
         text: false
     }
@@ -290,102 +369,132 @@ supports: {
 
 Gradient presets are sourced from `editor-gradient-presets` [theme support](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets).
 
-
 When the block declares support for `color.gradient`, the attributes definition is extended to include two new attributes: `gradient` and `style`:
 
-- `gradient`: attribute of `string` type with no default assigned.
+-   `gradient`: an attribute of `string` type with no default assigned.
 
-  When a user chooses from the list of preset gradients, the preset slug is stored in the `gradient` attribute.
+    When a user chooses from the list of preset gradients, the preset slug is stored in the `gradient` attribute.
 
-  The block can apply a default preset gradient by specifying its own attribute with a default e.g.:
+    The block can apply a default preset gradient by specifying its own attribute with a default. For example:
 
-  ```js
-  attributes: {
-      gradient: {
-          type: 'string',
-          default: 'some-preset-gradient-slug',
-      }
-  }
-  ```
-
-- `style`: attribute of `object` type with no default assigned.
+    ```js
+    attributes: {
+        gradient: {
+            type: 'string',
+            default: 'some-preset-gradient-slug',
+        }
+    }
+    ```
 
-  When a custom gradient is selected (i.e. using the custom gradient picker), the custom gradient value is stored in the `style.color.gradient` attribute.
+-   `style`: an attribute of `object` type with no default assigned.
 
-  The block can apply a default custom gradient by specifying its own attribute with a default e.g.:
+    When a custom gradient is selected (i.e. using the custom gradient picker), the custom gradient value is stored in the `style.color.gradient` attribute.
 
-  ```js
-  attributes: {
-      style: {
-          type: 'object',
-          default: {
-              color: {
-                  gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
-              }
-          }
-      }
-  }
-  ```
+    The block can apply a default custom gradient by specifying its own attribute with a default. For example:
 
-### color.link
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                color: {
+                    gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
+                }
+            }
+        }
+    }
+    ```
 
-This property adds block controls which allow the user to set link color in a block, link color is disabled by default.
+### color.heading
 
+_**Note:** Since WordPress 6.5._
 
-```js
-supports: {
-    color: true // Enables only background and text
-}
-```
+This property adds block controls which allow the user to set heading colors in a block. Heading colors are disabled by default.
 
-To enable link color support, set to `true`.
+To enable heading color support, set `color.heading` to `true`.
 
 ```js
 supports: {
-    color: {
-        link: true
-    }
+	color: {
+		// Enable heading color support.
+		heading: true
+	}
 }
 ```
 
-Link color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).
+Heading 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.heading`, the attributes definition is extended to include the `style` attribute:
 
-When the block declares support for `color.link`, the attributes definition is extended to include two new attributes: `linkColor` and `style`:
+-   `style`: an attribute of `object` type with no default assigned.
 
-- `linkColor`: attribute of `string` type with no default assigned.
+    When a heading color is selected, the color value is stored in the `style.elements.heading.color.text` and `style.elements.heading.color.background` attribute.
 
-  When a user chooses from the list of preset link colors, the preset slug is stored in the `linkColor` attribute.
+    The block can apply default heading colors by specifying its own attribute with a default. For example:
 
-  The block can apply a default preset text color by specifying its own attribute with a default e.g.:
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                elements: {
+                    heading: {
+                        color: {
+                            text: 'var:preset|color|contrast',
+    					    background: '#000000',
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ```
+
+### color.link
 
-  ```js
-  attributes: {
-      linkColor: {
-          type: 'string',
-          default: 'some-preset-link-color-slug',
-      }
-  }
-  ```
+This property adds block controls which allow the user to set link colors in a block. Link colors are disabled by default.
 
-- `style`: attribute of `object` type with no default assigned.
+To enable link color support, set `color.link` to `true`.
 
-  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.
+```js
+supports: {
+	color: {
+		link: true
+	}
+}
+```
 
-  The block can apply a default custom link color by specifying its own attribute with a default e.g.:
+Link color presets are sourced from the `editor-color-palette` [theme support](/docs/how-to-guides/themes/theme-support.md#block-color-palettes).
 
-  ```js
-  attributes: {
-      style: {
-          type: 'object',
-          default: {
-              color: {
-                  link: '#ff0000',
-              }
-          }
-      }
-  }
-  ```
+When the block declares support for `color.link`, the attributes definition is extended to include the `style` attribute:
+
+-   `style`: an attribute of `object` type with no default assigned.
+
+    When a link color is selected, the color value is stored in the `style.elements.link.color.text` and `style.elements.link.:hover.color.text` attribute.
+
+    The block can apply default link colors by specifying its own attribute with a default. For example:
+
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                elements: {
+                    link: {
+                        color: {
+                            text: 'var:preset|color|contrast',
+                        },
+						":hover": {
+							color: {
+								text: "#000000"
+							}
+						}
+                    }
+                }
+            }
+        }
+    }
+    ```
 
 ### color.text
 
@@ -395,59 +504,58 @@ When color support is declared, this property is enabled by default (along with
 
 ```js
 supports: {
-    color: true // Enables background and text, but not link.
+	color: true // Enables background and text, but not link.
 }
 ```
 
-To disable text color support while keeping other color supports enabled, set to `false`.
+To disable text color support while keeping other color supports enabled, set `color.text` to `false`.
 
 ```js
 supports: {
-    color: {
-        // Disable text color support.
-        text: false
-    }
+	color: {
+		// Disable text color support.
+		text: false
+	}
 }
 ```
 
 Text 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.text`, the attributes definition is extended to include two new attributes: `textColor` and `style`:
 
-- `textColor`: attribute of `string` type with no default assigned.
+-   `textColor`: an attribute of `string` type with no default assigned.
 
-  When a user chooses from the list of preset text colors, the preset slug is stored in the `textColor` attribute.
+    When a user chooses from the list of preset text colors, the preset slug is stored in the `textColor` attribute.
 
-  The block can apply a default preset text color by specifying its own attribute with a default e.g.:
+    The block can apply a default preset text color by specifying its own attribute with a default. For example:
 
-  ```js
-  attributes: {
-      textColor: {
-          type: 'string',
-          default: 'some-preset-text-color-slug',
-      }
-  }
-  ```
+    ```js
+    attributes: {
+        textColor: {
+            type: 'string',
+            default: 'some-preset-text-color-slug',
+        }
+    }
+    ```
 
-- `style`: attribute of `object` type with no default assigned.
+-   `style`: an attribute of `object` type with no default assigned.
 
-  When a custom text color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.text` attribute.
+    When a custom text color is selected (i.e. using the custom color picker), the custom color value is stored in the `style.color.text` attribute.
 
-  The block can apply a default custom text color by specifying its own attribute with a default e.g.:
+    The block can apply a default custom text color by specifying its own attribute with a default. For example:
 
-  ```js
-  attributes: {
-      style: {
-          type: 'object',
-          default: {
-              color: {
-                  text: '#aabbcc',
-              }
-          }
-      }
-  }
-  ```
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                color: {
+                    text: '#aabbcc',
+                }
+            }
+        }
+    }
+    ```
 
 ## customClassName
 
@@ -463,20 +571,96 @@ supports: {
 }
 ```
 
-## defaultStylePicker
+## dimensions
 
--   Type: `boolean`
--   Default value: `true`
+_**Note:** Since WordPress 6.2._
 
-When the style picker is shown, the user can set a default style for a block type based on the block's currently active style. If you prefer not to make this option available, set this property to `false`.
+-   Type: `Object`
+-   Default value: null
+-   Subproperties:
+    -   `minHeight`: type `boolean`, default value `false`
+
+This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls).
 
 ```js
 supports: {
-	// Remove the Default Style picker.
-	defaultStylePicker: false
+	dimensions: {
+		aspectRatio: true // Enable aspect ratio control.
+		minHeight: true // Enable min height control.
+	}
 }
 ```
 
+When a block declares support for a specific dimensions property, its attributes definition is extended to include the `style` attribute.
+
+-   `style`: an attribute of `object` type with no default assigned. This is added when `aspectRatio` or `minHeight` support is declared. It stores the custom values set by the user. For example:
+
+```js
+attributes: {
+    style: {
+        dimensions: {
+            aspectRatio: "16/9",
+            minHeight: "50vh"
+        }
+    }
+}
+```
+
+## filter
+
+-   Type: `Object`
+-   Default value: null
+-   Subproperties:
+    -   `duotone`: type `boolean`, default value `false`
+
+This value signals that a block supports some of the properties related to filters. When it does, the block editor will show UI controls for the user to set their values.
+
+### filter.duotone
+
+This property adds UI controls which allow the user to apply a duotone filter to
+a block or part of a block.
+
+```js
+supports: {
+    filter: {
+        // Enable duotone support
+        duotone: true
+    }
+},
+selectors: {
+    filter: {
+        // Apply the filter to img elements inside the image block
+        duotone: '.wp-block-image img'
+    }
+}
+```
+
+The filter can be applied to an element inside the block by setting the `selectors.filter.duotone` selector.
+
+Duotone presets are sourced from `color.duotone` in [theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md).
+
+When the block declares support for `filter.duotone`, the attributes definition is extended to include the attribute `style`:
+
+-   `style`: an attribute of `object` type with no default assigned.
+
+    The block can apply a default duotone color by specifying its own attribute with a default. For example:
+
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+                color: {
+                    duotone: [
+                        '#FFF',
+                        '#000'
+                    ]
+                }
+            }
+        }
+    }
+    ```
+
 ## html
 
 -   Type: `boolean`
@@ -496,7 +680,7 @@ supports: {
 -   Type: `boolean`
 -   Default value: `true`
 
-By default, all blocks will appear in the inserter. To hide a block so that it can only be inserted programmatically, set `inserter` to `false`.
+By default, all blocks will appear in the inserter, block transforms menu, Style Book, etc. To hide a block from all parts of the user interface so that it can only be inserted programmatically, set `inserter` to `false`.
 
 ```js
 supports: {
@@ -505,6 +689,115 @@ supports: {
 }
 ```
 
+## interactivity
+
+-   Type: `boolean` or `object`
+-   Default value: `false`
+-   Subproperties:
+    -   `clientNavigation`: type `boolean`, default value `false`
+    -   `interactive`: type `boolean`, default value `false`
+
+Indicates if the block is using Interactivity API features.
+
+The `clientNavigation` sub-property indicates whether a block is compatible with the Interactivity API client-side navigation.
+Set it to true only if the block is not interactive or if it is interactive using the Interactivity API. Set it to false if the block is interactive but uses vanilla JS, jQuery or another JS framework/library other than the Interactivity API.
+
+The `interactive` sub-property indicates whether the block is using the Interactivity API directives.
+
+## layout
+
+-   Type: `boolean` or `Object`
+-   Default value: null
+-   Subproperties:
+    -   `default`: type `Object`, default value null
+    -   `allowSwitching`: type `boolean`, default value `false`
+    -   `allowEditing`: type `boolean`, default value `true`
+    -   `allowInheriting`: type `boolean`, default value `true`
+    -   `allowSizingOnChildren`: type `boolean`, default value `false`
+    -   `allowVerticalAlignment`: type `boolean`, default value `true`
+    -   `allowJustification`: type `boolean`, default value `true`
+    -   `allowOrientation`: type `boolean`, default value `true`
+    -   `allowCustomContentAndWideSize`: type `boolean`, default value `true`
+
+This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object.
+
+### layout.default
+
+-   Type: `Object`
+-   Default value: null
+
+Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type. For example, for a `flex` layout, a default value can be set for `flexWrap`.
+
+### layout.allowSwitching
+
+-   Type: `boolean`
+-   Default value: `false`
+
+Exposes a switcher control that allows toggling between all existing layout types.
+
+### layout.allowEditing
+
+-   Type: `boolean`
+-   Default value: `true`
+
+Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.
+
+### layout.allowInheriting
+
+-   Type: `boolean`
+-   Default value: `true`
+
+For the `flow` layout type only, determines display of the "Inner blocks use content width" toggle.
+
+### layout.allowSizingOnChildren
+
+-   Type: `boolean`
+-   Default value: `false`
+
+For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block.
+
+### layout.allowVerticalAlignment
+
+-   Type: `boolean`
+-   Default value: `true`
+
+For the `flex` layout type only, determines display of the vertical alignment control in the block toolbar.
+
+### layout.allowJustification
+
+-   Type: `boolean`
+-   Default value: `true`
+
+For the `flex` layout type, determines display of the justification control in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar.
+
+### layout.allowOrientation
+
+-   Type: `boolean`
+-   Default value: `true`
+
+For the `flex` layout type only, determines display of the orientation control in the block toolbar.
+
+### layout.allowCustomContentAndWideSize
+
+-   Type: `boolean`
+-   Default value: `true`
+
+For the `constrained` layout type only, determines display of the custom content and wide size controls in the block sidebar.
+
+## lock
+
+-   Type: `boolean`
+-   Default value: `true`
+
+A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block "Options" dropdown by default. To disable this behavior, set `lock` to `false`.
+
+```js
+supports: {
+	// Remove support for locking UI.
+	lock: false
+}
+```
+
 ## multiple
 
 -   Type: `boolean`
@@ -519,6 +812,58 @@ supports: {
 }
 ```
 
+## position
+
+_**Note:** Since WordPress 6.2._
+
+-   Type: `Object`
+-   Default value: null
+-   Subproperties:
+    -   `sticky`: type `boolean`, default value `false`
+
+This value signals that a block supports some of the CSS style properties related to position. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls).
+
+Note that sticky position controls are currently only available for blocks set at the root level of the document. Setting a block to the `sticky` position will stick the block to its most immediate parent when the user scrolls the page.
+
+```js
+supports: {
+	position: {
+		sticky: true // Enable selecting sticky position.
+	}
+}
+```
+
+When the block declares support for a specific position property, its attributes definition is extended to include the `style` attribute.
+
+-   `style`: an attribute of `object` type with no default assigned. This is added when `sticky` support is declared. It stores the custom values set by the user. For example:
+
+```js
+attributes: {
+    style: {
+        position: {
+            type: "sticky",
+            top: "0px"
+        }
+    }
+}
+```
+
+## renaming
+
+_**Note:** Since WordPress 6.5._
+
+-   Type: `boolean`
+-   Default value: `true`
+
+By default, a block can be renamed by a user from the block 'Options' dropdown or the 'Advanced' panel. To disable this behavior, set renaming to false.
+
+```js
+supports: {
+	// Don't allow the block to be renamed in the editor.
+	renaming: false,
+}
+```
+
 ## reusable
 
 -   Type: `boolean`
@@ -533,20 +878,42 @@ supports: {
 }
 ```
 
-## lock
+## shadow
+
+_**Note:** Since WordPress 6.5._
 
 -   Type: `boolean`
--   Default value: `true`
+-   Default value: `false`
 
-A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block "Options" dropdown by default. To disable this behavior, set `lock` to `false`.
+This property adds block controls which allow the user to set a box shadow for a block. Shadows are disabled by default.
 
 ```js
 supports: {
-	// Remove support for locking UI.
-	lock: false
+	shadow: true // Enable the box-shadow picker.
 }
 ```
 
+Shadow presets are sourced from the shadow presets defined in `theme.json`.
+
+When the block declares support for `shadow`, the attributes definition is extended to include the `style` attribute:
+
+-   `style`: an attribute of `object` type with no default assigned.
+
+    When a shadow is selected, the color value is stored in the `style.shadow`.
+
+    The block can apply a default shadow by specifying its own attribute with a default. For example:
+
+    ```js
+    attributes: {
+        style: {
+            type: 'object',
+            default: {
+    			shadow: "var:preset|shadow|deep"
+            }
+        }
+    }
+    ```
+
 ## spacing
 
 -   Type: `Object`
@@ -556,21 +923,21 @@ supports: {
     -   `padding`: type `boolean` or `array`, default value `false`
     -   `blockGap`: type `boolean` or `array`, default value `false`
 
-This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if [the theme declares support](/docs/how-to-guides/themes/theme-support.md#cover-block-padding).
+This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/theme-support.md#cover-block-padding).
 
 ```js
 supports: {
     spacing: {
         margin: true,  // Enable margin UI control.
         padding: true, // Enable padding UI control.
-        blockGap: true,  // Enables block spacing UI control.
+        blockGap: true,  // Enables block spacing UI control for blocks that also use `layout`.
     }
 }
 ```
 
-When the block declares support for a specific spacing property, the attributes definition is extended to include the `style` attribute.
+When the block declares support for a specific spacing property, its attributes definition is extended to include the `style` attribute.
 
-- `style`: attribute of `object` type with no default assigned. This is added when `margin` or `padding` support is declared. It stores the custom values set by the user, e.g.:
+-   `style`: an attribute of `object` type with no default assigned. This is added when `margin` or `padding` support is declared. It stores the custom values set by the user. For example:
 
 ```js
 attributes: {
@@ -583,7 +950,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.
 
@@ -604,8 +971,9 @@ supports: {
 -   Type: `Object`
 -   Default value: `null`
 -   Subproperties:
-    - `fontSize`: type `boolean`, default value `false`
-    - `lineHeight`: type `boolean`, default value `false`
+    -   `fontSize`: type `boolean`, default value `false`
+    -   `lineHeight`: type `boolean`, default value `false`
+    -   `textAlign`: type `boolean` or `array`, default value `false`
 
 The presence of this object signals that a block supports some typography related properties. When it does, the block editor will show a typography UI allowing the user to control their values.
 
@@ -616,11 +984,14 @@ supports: {
         fontSize: true,
         // Enable support and UI control for line-height.
         lineHeight: true,
+        // Enable support and UI control for text alignment.
+        textAlign: true,
     },
 }
 ```
 
 ### typography.fontSize
+
 -   Type: `boolean`
 -   Default value: `false`
 
@@ -639,7 +1010,7 @@ supports: {
 
 When the block declares support for `fontSize`, the attributes definition is extended to include two new attributes: `fontSize` and `style`:
 
--   `fontSize`: attribute of `string` type with no default assigned. It stores any preset value selected by the user. The block can apply a default fontSize by specifying its own `fontSize` attribute with a default e.g.:
+-   `fontSize`: an attribute of `string` type with no default assigned. It stores any preset value selected by the user. The block can apply a default fontSize by specifying its own `fontSize` attribute with a default. For example:
 
 ```js
 attributes: {
@@ -650,7 +1021,7 @@ attributes: {
 }
 ```
 
--   `style`: attribute of `object` type with no default assigned. It stores the custom values set by the user and is shared with other block supports such as color. The block can apply a default style by specifying its own `style` attribute with a default e.g.:
+-   `style`: an attribute of `object` type with no default assigned. It stores the custom values set by the user and is shared with other block supports such as color. The block can apply a default style by specifying its own `style` attribute with a default. For example:
 
 ```js
 attributes: {
@@ -681,7 +1052,7 @@ supports: {
 }
 ```
 
-When the block declares support for `lineHeight`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default e.g.:
+When the block declares support for `lineHeight`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default. For example:
 
 ```js
 attributes: {
@@ -695,3 +1066,55 @@ attributes: {
     }
 }
 ```
+
+### typography.textAlign
+
+_**Note:** Since WordPress 6.6._
+
+-   Type: `boolean` or `array`
+-   Default value: `false`
+
+This property adds block toolbar controls which allow to change block's text alignment.
+
+```js
+supports: {
+    typography: {
+        // Declare support for block's text alignment.
+        // This adds support for all the options:
+        // left, center, right.
+        textAlign: true
+    }
+}
+```
+
+```js
+supports: {
+    typography: {
+        // Declare support for specific text alignment options.
+        textAlign: [ 'left', 'right' ]
+    }
+}
+```
+
+When the block declares support for `textAlign`, the attributes definition is extended to include a new attribute `style` of `object` type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own `style` attribute with a default. For example:
+
+```js
+attributes: {
+    style: {
+        type: 'object',
+        default: {
+            typography: {
+                textAlign: 'value'
+            }
+        }
+    }
+}
+```
+
+## splitting
+
+When set to `true`, `Enter` will split the block into two blocks. Note that this
+is only meant for simple text blocks such as paragraphs and headings with a
+single `RichText` field. RichText in the `edit` function _must_ have an
+`identifier` prop that matches the attribute key of the text, so that it updates
+the selection correctly and we know where to split.
diff --git a/docs/reference-guides/block-api/block-templates.md b/docs/reference-guides/block-api/block-templates.md
index a16ad6ea2548d1..b664867eb5b67f 100644
--- a/docs/reference-guides/block-api/block-templates.md
+++ b/docs/reference-guides/block-api/block-templates.md
@@ -1,6 +1,6 @@
-# Block Templates
+# Templates
 
-A block template is defined as a list of block items. Such blocks can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow specifying a default initial state for an editor session. 
+A block template is defined as a list of block items. Such blocks can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow specifying a default initial state for an editor session.
 
 The scope of templates include:
 
@@ -35,7 +35,7 @@ add_action( 'init', 'myplugin_register_template' );
 The following example in JavaScript creates a new block using [InnerBlocks](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md) and templates, when inserted creates a set of blocks based off the template.
 
 ```js
-const el = wp.element.createElement;
+const el = React.createElement;
 const { registerBlockType } = wp.blocks;
 const { InnerBlocks } = wp.blockEditor;
 
@@ -61,7 +61,7 @@ registerBlockType( 'myplugin/template', {
 
 See the [Meta Block Tutorial](/docs/how-to-guides/metabox.md#step-4-finishing-touches) for a full example of a template in use.
 
-## Block Attributes
+## Block attributes
 
 To find a comprehensive list of all block attributes that you can define in a template, consult the block's `block.json` file, and look at the `attributes` and `supports` values.
 
@@ -69,7 +69,7 @@ For example, [packages/block-library/src/heading/block.json](https://github.com/
 
 If you don't have the Gutenberg plugin installed, you can find `block.json` files inside `wp-includes/blocks/heading/block.json`.
 
-## Custom Post types
+## Custom post types
 
 A custom post type can register its own template during registration:
 
@@ -115,7 +115,7 @@ add_action( 'init', 'myplugin_register_template' );
 
 _Options:_
 
--   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
+-   `contentOnly` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overridable by children.
 -   `all` — prevents all operations. It is not possible to insert new blocks, move existing blocks, or delete blocks.
 -   `insert` — prevents inserting or removing blocks, but allows moving existing blocks.
 
@@ -134,7 +134,9 @@ attributes: {
   }
 }
 ```
+
 _Options:_
+
 -   `remove` — Locks the ability of a block from being removed.
 -   `move` — Locks the ability of a block from being moved.
 
@@ -159,7 +161,7 @@ $template = array(
 );
 ```
 
-## Nested Templates
+## Nested templates
 
 Container blocks like the columns blocks also support templates. This is achieved by assigning a nested template to the block.
 
diff --git a/docs/reference-guides/block-api/block-transforms.md b/docs/reference-guides/block-api/block-transforms.md
index a7d26508eae4ab..9055ed0a3b45b3 100644
--- a/docs/reference-guides/block-api/block-transforms.md
+++ b/docs/reference-guides/block-api/block-transforms.md
@@ -22,7 +22,7 @@ export const settings = {
 };
 ```
 
-## Transformations Types
+## Transformations types
 
 This section goes through the existing types of transformations blocks support:
 
@@ -44,7 +44,7 @@ A transformation of type `block` is an object that takes the following parameter
 -   **transform** _(function)_: a callback that receives the attributes and inner blocks of the block being processed. It should return a block object or an array of block objects.
 -   **isMatch** _(function, optional)_: a callback that receives the block attributes as the first argument and the block object as the second argument and should return a boolean. Returning `false` from this function will prevent the transform from being available and displayed as an option to the user.
 -   **isMultiBlock** _(boolean, optional)_: whether the transformation can be applied when multiple blocks are selected. If true, the `transform` function's first parameter will be an array containing each selected block's attributes, and the second an array of each selected block's inner blocks. False by default.
--   **priority** _(number, optional)_: controls the priority with which a transformation is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transformation is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from Paragraph block to Heading block**
 
@@ -96,12 +96,12 @@ A transformation of type `enter` is an object that takes the following parameter
 
 -   **type** _(string)_: the value `enter`.
 -   **regExp** _(RegExp)_: the Regular Expression to use as a matcher. If the value matches, the transformation will be applied.
--   **transform** _(function)_: a callback that receives the value that has been entered. It should return a block object or an array of block objects.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **transform** _(function)_: a callback that receives an object with a `content` field containing the value that has been entered. It should return a block object or an array of block objects.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from --- to Separator block**
 
-To create a separator block when the user types the hypen three times and then hits the ENTER key we can use the following code:
+To create a separator block when the user types the hyphen three times and then hits the ENTER key we can use the following code:
 
 ```js
 transforms = {
@@ -124,7 +124,7 @@ A transformation of type `files` is an object that takes the following parameter
 -   **type** _(string)_: the value `files`.
 -   **transform** _(function)_: a callback that receives the array of files being processed. It should return a block object or an array of block objects.
 -   **isMatch** _(function, optional)_: a callback that receives the array of files being processed and should return a boolean. Returning `false` from this function will prevent the transform from being applied.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from file to File block**
 
@@ -162,9 +162,9 @@ This type of transformations support the _from_ direction, allowing blocks to be
 A transformation of type `prefix` is an object that takes the following parameters:
 
 -   **type** _(string)_: the value `prefix`.
--   **prefix** _(string)_: the character or sequence of characters that match this transfrom.
+-   **prefix** _(string)_: the character or sequence of characters that match this transform.
 -   **transform** _(function)_: a callback that receives the content introduced. It should return a block object or an array of block objects.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from text to custom block**
 
@@ -197,7 +197,7 @@ A transformation of type `raw` is an object that takes the following parameters:
 -   **schema** _(object|function, optional)_: defines an [HTML content model](https://html.spec.whatwg.org/multipage/dom.html#content-models) used to detect and process pasted contents. See [below](#schemas-and-content-models).
 -   **selector** _(string, optional)_: a CSS selector string to determine whether the element matches according to the [element.matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) method. The transform won't be executed if the element doesn't match. This is a shorthand and alternative to using `isMatch`, which, if present, will take precedence.
 -   **isMatch** _(function, optional)_: a callback that receives the node being processed and should return a boolean. Returning `false` from this function will prevent the transform from being applied.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from URLs to Embed block**
 
@@ -223,21 +223,12 @@ transforms: {
 
 <h4 id="schemas-and-content-models">Schemas and Content Models</h4>
 
-When pasting content it's possible to define
-a [content model](https://html.spec.whatwg.org/multipage/dom.html#content-models) that will be used to validate and
-process pasted content. It's often the case that HTML pasted into the editor will contain a mixture of elements that _
-should_ transfer as well as elements that _shouldn't_. For example, consider
-pasting `<span class="time">12:04 pm</span>` into the editor. We want to copy `12:04 pm` and omit the `<span>` and
-its `class` attribute because those won't carry the same meaning or structure as they originally did from where they
-were copied.
+When pasting content it's possible to define a [content model](https://html.spec.whatwg.org/multipage/dom.html#content-models) that will be used to validate and process pasted content. It's often the case that HTML pasted into the editor will contain a mixture of elements that _should_ transfer as well as elements that _shouldn't_. For example, consider pasting `<span class="time">12:04 pm</span>` into the editor. We want to copy `12:04 pm` and omit the `<span>` and its `class` attribute because those won't carry the same meaning or structure as they originally did from where they were copied.
 
-When writing `raw` transforms you can control this by supplying a `schema` which describes allowable content and which
-will be applied to clean up the pasted content before attempting to match with your block. The schemas are passed
-into [`cleanNodeList` from `@wordpress/dom`](https://github.com/wordpress/gutenberg/blob/trunk/packages/dom/src/dom/clean-node-list.js); check there for
-a [complete description of the schema](https://github.com/wordpress/gutenberg/blob/trunk/packages/dom/src/phrasing-content.js).
+When writing `raw` transforms you can control this by supplying a `schema` which describes allowable content and which will be applied to clean up the pasted content before attempting to match with your block. The schemas are passed into [`cleanNodeList` from `@wordpress/dom`](https://github.com/wordpress/gutenberg/blob/trunk/packages/dom/src/dom/clean-node-list.js); check there for a [complete description of the schema](https://github.com/wordpress/gutenberg/blob/trunk/packages/dom/src/phrasing-content.js).
 
 ```js
-schema = { span: { children: { '#text': {} } } }
+schema = { span: { children: { '#text': {} } } };
 ```
 
 **Example: a custom content model**
@@ -246,17 +237,13 @@ Suppose we want to match the following HTML snippet and turn it into some kind o
 
 ```html
 <div data-post-id="13">
-    <h2>The Post Title</h2>
-    <p>Some <em>great</em> content.</p>
+	<h2>The Post Title</h2>
+	<p>Some <em>great</em> content.</p>
 </div>
 ```
 
-We want to tell the editor to allow the inner `h2` and `p` elements. We do this by supplying the following schema. In
-this example we're using the function form, which accepts an argument supplying `phrasingContentSchema` (as well as a
-boolean `isPaste` indicating if the transformation operation started with pasting text). The `phrasingContentSchema` is
-pre-defined to match HTML phrasing elements, such as `<strong>` and `<sup>` and `<kbd>`. Anywhere we expect
-a `<RichText />` component is a good place to allow phrasing content otherwise we'll lose all text formatting on
-conversion.
+We want to tell the editor to allow the inner `h2` and `p` elements. We do this by supplying the following schema. In this example we're using the function form, which accepts an argument supplying `phrasingContentSchema` (as well as a boolean `isPaste` indicating if the transformation operation started with pasting text). The `phrasingContentSchema` is pre-defined to match HTML phrasing elements, such as `<strong>` and `<sup>` and `<kbd>`. Anywhere we expect
+a `<RichText />` component is a good place to allow phrasing content otherwise we'll lose all text formatting on conversion.
 
 ```js
 schema = ({ phrasingContentSchema }) => {
@@ -271,13 +258,9 @@ schema = ({ phrasingContentSchema }) => {
 }
 ```
 
-When we successfully match this content every HTML attribute will be stripped away except for `data-post-id` and if we
-have other arrangements of HTML inside of a given `div` then it won't match our transformer. Likewise we'd fail to match
-if we found an `<h3>` in there instead of an `<h2>`.
+When we successfully match this content every HTML attribute will be stripped away except for `data-post-id` and if we have other arrangements of HTML inside of a given `div` then it won't match our transformer. Likewise we'd fail to match if we found an `<h3>` in there instead of an `<h2>`.
 
-Schemas are most-important when wanting to match HTML snippets containing non-phrasing content, such as `<details>` with
-a `<summary>`. Without declaring the custom schema the editor will skip over these other contructions before attempting
-to run them through any block transforms.
+Schemas are most-important when wanting to match HTML snippets containing non-phrasing content, such as `<details>` with a `<summary>`. Without declaring the custom schema the editor will skip over these other constructions before attempting to run them through any block transforms.
 
 ### Shortcode
 
@@ -287,10 +270,10 @@ A transformation of type `shortcode` is an object that takes the following param
 
 -   **type** _(string)_: the value `shortcode`.
 -   **tag** _(string|array)_: the shortcode tag or list of shortcode aliases this transform can work with.
--   **transform** _(function, optional): a callback that receives the shortcode attributes as the first argument and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as the second. It should return a block object or an array of block objects. When this parameter is defined, it will take precedence over the `attributes` parameter.
+-   **transform** _(function, optional)_: a callback that receives the shortcode attributes as the first argument and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as the second. It should return a block object or an array of block objects. When this parameter is defined, it will take precedence over the `attributes` parameter.
 -   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](./block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
 -   **isMatch** _(function, optional)_: a callback that receives the shortcode attributes per the [Shortcode API](https://codex.wordpress.org/Shortcode_API) and should return a boolean. Returning `false` from this function will prevent the shortcode to be transformed into this block.
--   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://codex.wordpress.org/Plugin_API#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+-   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
 **Example: from shortcode to block using `transform`**
 
@@ -353,3 +336,25 @@ transforms: {
     ]
 },
 ```
+
+## `ungroup` blocks
+
+Via the optional `transforms` key of the block configuration, blocks can use the `ungroup` subkey to define the blocks that will replace the block being processed. These new blocks will usually be a subset of the existing inner blocks, but could also include new blocks.
+
+If a block has an `ungroup` transform, it is eligible for ungrouping, without the requirement of being the default grouping block. The UI used to ungroup a block with this API is the same as the one used for the default grouping block. In order for the Ungroup button to be displayed, we must have a single grouping block selected, which also contains some inner blocks.
+
+**ungroup** is a callback function that receives the attributes and inner blocks of the block being processed. It should return an array of block objects.
+
+Example:
+
+```js
+export const settings = {
+	title: 'My grouping Block Title',
+	description: 'My grouping block description',
+	/* ... */
+	transforms: {
+		ungroup: ( attributes, innerBlocks ) =>
+			innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
+	},
+};
+```
diff --git a/docs/reference-guides/block-api/block-variations.md b/docs/reference-guides/block-api/block-variations.md
index 5547dab17007bc..8a0c6b1dd5bd6c 100644
--- a/docs/reference-guides/block-api/block-variations.md
+++ b/docs/reference-guides/block-api/block-variations.md
@@ -1,58 +1,78 @@
 # Variations
 
-Block Variations is the API that allows a block to have similar versions of it, but all these versions share some common functionality. Each block variation is differentiated from the others by setting some initial attributes or inner blocks. Then at the time when a block is inserted these attributes and/or inner blocks are applied.
+The Block Variations API allows you to define multiple versions (variations) of a block. A block variation differs from the original block by a set of initial attributes or inner blocks. When you insert the block variation into the Editor, these attributes and/or inner blocks are applied.
 
-A great way to understand this API better is by using the `embed` block as an example. The numerous existing variations for embed (WordPress, Youtube, etc..) share the same functionality for editing, saving, and so on, but their basic difference is the `providerNameSlug` attribute's value, which defines the provider that needs to be used.
+Variations are an excellent way to create iterations of existing blocks without building entirely new blocks from scratch.
 
-By default, all variations will show up in the Inserter in addition to the regular block type item. However, setting the `isDefault` flag for any of the variations listed will override the regular block type in the Inserter.
+To better understand this API, consider the Embed block. This block contains numerous variations for each type of embeddable content (WordPress, Youtube, etc.). Each Embed block variation shares the same underlying functionality for editing, saving, and so on. Besides the name and descriptive information, the main difference is the `providerNameSlug` attribute. Below is a simplified example of the variations in the Embed block. View the [source code](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/embed/variations.js) for the complete specification.
 
 ```js
 variations: [
 	{
 		name: 'wordpress',
-		isDefault: true,
-		title: __( 'WordPress' ),
-		description: __( 'Code is poetry!' ),
-		icon: WordPressIcon,
+		title: 'WordPress',
+		description: __( 'Embed a WordPress post.' ),
 		attributes: { providerNameSlug: 'wordpress' },
 	},
 	{
-		name: 'google',
-		title: __( 'Google' ),
-		icon: GoogleIcon,
-		attributes: { providerNameSlug: 'google' },
-	},
-	{
-		name: 'twitter',
-		title: __( 'Twitter' ),
-		icon: TwitterIcon,
-		attributes: { providerNameSlug: 'twitter' },
-		keywords: [ __('tweet') ],
+		name: 'youtube',
+		title: 'YouTube',
+		description: __( 'Embed a YouTube video.' ),
+		attributes: { providerNameSlug: 'youtube' },
 	},
 ],
 ```
 
-An object describing a variation defined for the block type can contain the following fields:
+## Defining a block variation
+
+A block variation is defined by an object that can contain the following fields:
 
--   `name` (type `string`) – The unique and machine-readable name.
--   `title` (type `string`) – A human-readable variation title.
--   `description` (optional, type `string`) – A detailed variation description.
--   `category` (optional, type `string`) - A category classification, used in search interfaces to arrange block types by category.
+-   `name` (type `string`) – A unique and machine-readable name.
+-   `title` (optional, type `string`) – A human-readable variation title.
+-   `description` (optional, type `string`) – A human-readable variation description.
+-   `category` (optional, type `string`) - A category classification used in search interfaces to arrange block types by category.
+-   `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching.
 -   `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
--   `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`.
 -   `attributes` (optional, type `Object`) – Values that override block attributes.
 -   `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks.
--   `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type.
--   `scope` (optional, type `WPBlockVariationScope[]`) - the list of scopes where the variation is applicable. When not provided, it defaults to `block` and `inserter`. Available options:
-    -   `inserter` - Block Variation is shown on the inserter.
-    -   `block` - Used by blocks to filter specific block variations. `Columns` and `Query Loop` blocks have such variations and are passed to the [experimental BlockVariationPicker](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md) component, which is handling the displaying of variations and the ability to select one from them.
-    -   `transform` - Block Variation will be shown in the component for Block Variations transformations.
--   `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching.
--   `isActive` (optional, type `Function|string[]`) - This can be a function or an array of block attributes. Function that accepts a block's attributes and the variation's attributes and determines if a variation is active. This function doesn't try to find a match dynamically based on all block's attributes, as in many cases some attributes are irrelevant. An example would be for `embed` block where we only care about `providerNameSlug` attribute's value. We can also use a `string[]` to tell which attributes should be compared as a shorthand. Each attributes will be matched and the variation will be active if all of them are matching.
+-   `example` (optional, type `Object`) – Provides structured data for the block preview. Set to `undefined` to disable the preview. See the [Block Registration API](/docs/reference-guides/block-api/block-registration.md#example-optional) for more details.
+-   `scope` (optional, type `WPBlockVariationScope[]`) - Defaults to `block` and `inserter`. The list of scopes where the variation is applicable. Available options include:
+    -   `block` - Used by blocks to filter specific block variations. `Columns` and `Query` blocks have such variations, which are passed to the [experimental BlockVariationPicker](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-variation-picker/README.md) component. This component handles displaying the variations and allows users to choose one of them.
+    -   `inserter` - Block variation is shown on the inserter.
+    -   `transform` - Block variation is shown in the component for variation transformations.
+-   `isDefault` (optional, type `boolean`) – Defaults to `false`. Indicates whether the current variation is the default one (details below).
+-   `isActive` (optional, type `Function|string[]`) - A function or an array of block attributes that is used to determine if the variation is active when the block is selected. The function accepts `blockAttributes` and `variationAttributes` (details below).
+
+<div class="callout callout-info">
+	You can technically create a block variation without a unique <code>name</code>, but this is <strong>not</strong> recommended. A unique <code>name</code> allows the Editor to differentiate between your variation and others that may exist. It also allows your variation to be unregistered as needed and has implications for the <code>isDefault</code> settings (details below).
+</div>
+
+## Creating a block variation
 
-The main difference between block styles and block variations is that a block style just applies a CSS class to the block, so it can be styled in an alternative way. If we want to apply initial attributes or inner blocks, we fall in block variation territory.
+Block variations can be declared during a block's registration by providing the `variations` key with a proper array of variation objects, as shown in the example above. See the [Block Registration API](/docs/reference-guides/block-api/block-registration.md) for more details.
 
-It's also possible to override the default block style using the `className` attribute when defining block variations.
+To create a variation for an existing block, such as a Core block, use `wp.blocks.registerBlockVariation()`. This function accepts the name of the block and the object defining the variation.
+
+```js
+wp.blocks.registerBlockVariation( 'core/embed', {
+	name: 'custom-embed',
+	attributes: { providerNameSlug: 'custom' },
+} );
+```
+
+## Removing a block variation
+
+Block variations can also be easily removed. To do so, use `wp.blocks.unregisterBlockVariation()`. This function accepts the name of the block and the `name` of the variation that should be unregistered.
+
+```js
+wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' );
+```
+
+## Block variations versus block styles
+
+The main difference between block styles and block variations is that a block style just applies a CSS class to the block, so it can be styled in an alternative way. See the [Block Styles API](/docs/reference-guides/block-api/block-styles.md) for more details.
+
+If you want to apply initial attributes or inner blocks, this falls into block variation territory. It's also possible to override the default block style using the `className` attribute when defining a block variation.
 
 ```js
 variations: [
@@ -60,7 +80,10 @@ variations: [
 		name: 'blue',
 		title: __( 'Blue Quote' ),
 		isDefault: true,
-		attributes: { color: 'blue', className: 'is-style-blue-quote' },
+		attributes: {
+			color: 'blue',
+			className: 'is-style-blue-quote'
+		},
 		icon: 'format-quote',
 		isActive: ( blockAttributes, variationAttributes ) =>
 			blockAttributes.color === variationAttributes.color
@@ -68,25 +91,120 @@ variations: [
 ],
 ```
 
-It's worth mentioning that setting the `isActive` property can be useful for cases you want to use information from the block variation, after a block's creation. For example, this API is used in `useBlockDisplayInformation` hook to fetch and display proper information on places like the `BlockCard` or `Breadcrumbs` components.
-
-Block variations can be declared during a block's registration by providing the `variations` key with a proper array of variations, as defined above. In addition, there are ways to register and unregister a `block variation` for a block, after its registration.
+## Using `isDefault`
 
-To add a block variation use `wp.blocks.registerBlockVariation()`.
+By default, all variations will show up in the Inserter in addition to the original block type item. However, setting the `isDefault` flag for any variations listed will override the regular block type in the Inserter. This is a great tool for curating the Editor experience to your specific needs.
 
-_Example:_
+For example, if you want Media & Text block to display the image on the right by default, you could create a variation like this:
 
 ```js
-wp.blocks.registerBlockVariation( 'core/embed', {
-	name: 'custom',
-	attributes: { providerNameSlug: 'custom' },
+wp.blocks.registerBlockVariation( 'core/media-text', {
+	name: 'media-text-media-right',
+	title: __( 'Media & Text' ),
+	isDefault: true,
+	attributes: {
+		mediaPosition: 'right',
+	},
 } );
 ```
 
-To remove a block variation use `wp.blocks.unregisterBlockVariation()`.
+### Caveats to using `isDefault`
+
+While `isDefault` works great when overriding a block without existing variations, you may run into issues when other variations exist.
+
+If another variation for the same block uses `isDefault`, your variation will not necessarily become the default. The Editor respects the first registered variation with `isDefault`, which might not be yours.
+
+The solution is to unregister the other variation before registering your variation with `isDefault`. This caveat reinforces the recommendation always to provide variations with a unique `name`. Otherwise, the variation cannot be unregistered.
+
+## Using `isActive`
+
+While the `isActive` property is optional, it's recommended. This API is used by the block editor to check which variation is active, and display the correct variation's title, icon and description when an instance of the variation is selected in the editor.
+
+If `isActive` is not set, the Editor cannot distinguish between an instance of the original block and your variation, so the original block information will be displayed.
+
+The property can be set to either an array of strings (`string[]`), or a function. It is recommended to use the string array version whenever possible.
 
-_Example:_
+The `string[]` version is used to declare which of the block instance's attributes should be compared to the given variation's. Each attribute will be checked and the variation will be active if all of them match.
+
+As an example, in the core Embed block, the `providerNameSlug` attribute is used to determine the embed provider (e.g. 'youtube' or 'twitter'). The variations may be declared like this:
 
 ```js
-wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' );
+const variations = [
+	{
+		name: 'twitter',
+		title: 'Twitter',
+		icon: embedTwitterIcon,
+		keywords: [ 'tweet', __( 'social' ) ],
+		description: __( 'Embed a tweet.' ),
+		patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ],
+		attributes: { providerNameSlug: 'twitter', responsive: true },
+	},
+	{
+		name: 'youtube',
+		title: 'YouTube',
+		icon: embedYouTubeIcon,
+		keywords: [ __( 'music' ), __( 'video' ) ],
+		description: __( 'Embed a YouTube video.' ),
+		patterns: [
+			/^https?:\/\/((m|www)\.)?youtube\.com\/.+/i,
+			/^https?:\/\/youtu\.be\/.+/i,
+		],
+		attributes: { providerNameSlug: 'youtube', responsive: true },
+	},
+	// ...
+];
+```
+
+The `isActive` property would then look like this:
+
+```js
+isActive: [ 'providerNameSlug' ];
+```
+
+This will cause the block instance value for `providerNameSlug` to be compared to the value declared in the variation's declaration (the values in the code snippet above) to determine which embed variation is active.
+
+Nested object paths are also supported since WordPress `6.6.0`. For example, consider a block variation that has a `query` object as an attribute. It is possible to determine if the variation is active solely based on that object's `postType` property (while ignoring all its other properties):
+
+```js
+isActive: [ 'query.postType' ];
+```
+
+The function version of this property accepts a block instance's `blockAttributes` as the first argument, and the `variationAttributes` declared for a variation as the second argument. These arguments can be used to determine if a variation is active by comparing them and returning a `true` or `false` (indicating whether this variation is inactive for this block instance).
+
+Using the same example for the embed block, the function version would look like this:
+
+```js
+isActive: ( blockAttributes, variationAttributes ) =>
+	blockAttributes.providerNameSlug === variationAttributes.providerNameSlug,
 ```
+
+### Specificity of `isActive` matches
+
+_Note: Improved handling since WordPress `6.6.0`._
+
+If there are multiple variations whose `isActive` check matches a given block instance, and all of them are string arrays, then the variation with the highest _specificity_ will be chosen. Consider the following example:
+
+```js
+wp.blocks.registerBlockVariation( 'core/paragraph', {
+	name: 'paragraph-red',
+	title: 'Red Paragraph',
+	attributes: {
+		textColor: 'vivid-red',
+	},
+	isActive: [ 'textColor' ],
+} );
+
+wp.blocks.registerBlockVariation( 'core/paragraph', {
+	name: 'paragraph-red-grey',
+	title: 'Red/Grey Paragraph',
+	attributes: {
+		textColor: 'vivid-red',
+		backgroundColor: 'cyan-bluish-gray',
+	},
+	isActive: [ 'textColor', 'backgroundColor' ],
+} );
+```
+
+If a block instance has attributes `textColor: vivid-red` and `backgroundColor: cyan-bluish-gray`, both variations' `isActive` criterion will match that block instance. In this case, the more _specific_ match will be determined to be the active variation, where specificity is calculated as the length of each `isActive` array. This means that the `Red/Grey Paragraph` will be shown as the active variation.
+
+Note that specificity cannot be determined for a matching variation if its `isActive` property is a function rather than a `string[]`. In this case, the first matching variation will be determined to be the active variation. For this reason, it is generally recommended to use a `string[]` rather than a `function` for the `isActive` property.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 09e48ebda0f65e..29033e278c3488 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -1,10 +1,10 @@
 # Core Blocks Reference
 
-This page lists the core blocks included in the block-library package.
+This page lists the blocks included in the block-library package.
 
-<div class="callout callout-info">
-Items marked with a strikeout (~~strikeout~~) are explicitly disabled.
-</div>
+-   Items marked with a strikeout (~~strikeout~~) are explicitly disabled.
+-   Blocks marked with **Experimental:** true are only available when Gutenberg is active.
+-   Blocks marked with **Experimental:** fse are only available in the Site Editor.
 
 <!-- START TOKEN Autogenerated - DO NOT EDIT -->
 
@@ -14,7 +14,7 @@ Display a date archive of your posts. ([Source](https://github.com/WordPress/gut
 
 -	**Name:** core/archives
 -	**Category:** widgets
--	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** displayAsDropdown, showLabel, showPostCounts, type
 
 ## Audio
@@ -23,8 +23,8 @@ Embed a simple audio player. ([Source](https://github.com/WordPress/gutenberg/tr
 
 -	**Name:** core/audio
 -	**Category:** media
--	**Supports:** align, anchor, spacing (margin, padding)
--	**Attributes:** autoplay, caption, id, loop, preload, src
+-	**Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
+-	**Attributes:** autoplay, blob, caption, id, loop, preload, src
 
 ## Avatar
 
@@ -32,17 +32,17 @@ Add a user’s avatar. ([Source](https://github.com/WordPress/gutenberg/tree/tru
 
 -	**Name:** core/avatar
 -	**Category:** theme
--	**Supports:** align, color (~~background~~, ~~text~~), spacing (margin, padding), ~~alignWide~~, ~~html~~
+-	**Supports:** align, color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~alignWide~~, ~~html~~
 -	**Attributes:** isLink, linkTarget, size, userId
 
-## Reusable block
+## Pattern
 
-Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/block))
+Reuse this design across your site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/block))
 
 -	**Name:** core/block
 -	**Category:** reusable
--	**Supports:** ~~customClassName~~, ~~html~~, ~~inserter~~
--	**Attributes:** ref
+-	**Supports:** interactivity (clientNavigation), ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
+-	**Attributes:** content, ref
 
 ## Button
 
@@ -50,8 +50,9 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu
 
 -	**Name:** core/button
 -	**Category:** design
--	**Supports:** anchor, color (background, gradients, text), spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
--	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textAlign, textColor, title, url, width
+-	**Parent:** core/buttons
+-	**Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), shadow (), spacing (padding), splitting, typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
+-	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, tagName, text, textAlign, textColor, title, type, url, width
 
 ## Buttons
 
@@ -59,8 +60,8 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 
 -	**Name:** core/buttons
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
--	**Attributes:** 
+-	**Allowed Blocks:** core/button
+-	**Supports:** align (full, wide), anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 
 ## Calendar
 
@@ -68,17 +69,17 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/calendar
 -	**Category:** widgets
--	**Supports:** align, color (background, link, text), typography (fontSize, lineHeight)
+-	**Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight)
 -	**Attributes:** month, year
 
-## Categories List
+## Terms List
 
-Display a list of all categories. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
+Display a list of all terms of a given taxonomy. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
 
 -	**Name:** core/categories
 -	**Category:** widgets
--	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, showEmpty, showHierarchy, showOnlyTopLevel, showPostCounts
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
 
 ## Code
 
@@ -86,7 +87,7 @@ Display code snippets that respect your spacing and tabs. ([Source](https://gith
 
 -	**Name:** core/code
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** align (wide), anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** content
 
 ## Column
@@ -94,8 +95,9 @@ Display code snippets that respect your spacing and tabs. ([Source](https://gith
 A single column within a columns block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/column))
 
 -	**Name:** core/column
--	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Category:** design
+-	**Parent:** core/columns
+-	**Supports:** anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout, shadow, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** allowedBlocks, templateLock, verticalAlignment, width
 
 ## Columns
@@ -104,16 +106,19 @@ Display content in multiple columns, with blocks added to each column. ([Source]
 
 -	**Name:** core/columns
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isStackedOnMobile, verticalAlignment
+-	**Allowed Blocks:** core/column
+-	**Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isStackedOnMobile, templateLock, verticalAlignment
 
 ## Comment Author Avatar (deprecated)
 
 This block is deprecated. Please use the Avatar block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comment-author-avatar))
 
 -	**Name:** core/comment-author-avatar
+-	**Experimental:** fse
 -	**Category:** theme
--	**Supports:** color (background, ~~text~~), spacing (margin, padding), ~~html~~, ~~inserter~~
+-	**Ancestor:** core/comment-template
+-	**Supports:** color (background, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~html~~, ~~inserter~~
 -	**Attributes:** height, width
 
 ## Comment Author Name
@@ -122,7 +127,8 @@ Displays the name of the author of the comment. ([Source](https://github.com/Wor
 
 -	**Name:** core/comment-author-name
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Ancestor:** core/comment-template
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** isLink, linkTarget, textAlign
 
 ## Comment Content
@@ -131,6 +137,7 @@ Displays the contents of a comment. ([Source](https://github.com/WordPress/guten
 
 -	**Name:** core/comment-content
 -	**Category:** theme
+-	**Ancestor:** core/comment-template
 -	**Supports:** color (background, gradients, link, text), spacing (padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
@@ -140,7 +147,8 @@ Displays the date on which the comment was posted. ([Source](https://github.com/
 
 -	**Name:** core/comment-date
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Ancestor:** core/comment-template
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** format, isLink
 
 ## Comment Edit Link
@@ -149,7 +157,8 @@ Displays a link to edit the comment in the WordPress Dashboard. This link is onl
 
 -	**Name:** core/comment-edit-link
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Ancestor:** core/comment-template
+-	**Supports:** color (background, gradients, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** linkTarget, textAlign
 
 ## Comment Reply Link
@@ -158,6 +167,7 @@ Displays a link to reply to a comment. ([Source](https://github.com/WordPress/gu
 
 -	**Name:** core/comment-reply-link
 -	**Category:** theme
+-	**Ancestor:** core/comment-template
 -	**Supports:** color (background, gradients, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
@@ -167,8 +177,8 @@ Contains the block elements used to display a comment, like the title, date, aut
 
 -	**Name:** core/comment-template
 -	**Category:** design
--	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Parent:** core/comments
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Comments
 
@@ -176,7 +186,7 @@ An advanced block that allows displaying post comments using different visual co
 
 -	**Name:** core/comments
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** legacy, tagName
 
 ## Comments Pagination
@@ -185,7 +195,9 @@ Displays a paginated navigation to next/previous set of comments, when applicabl
 
 -	**Name:** core/comments-pagination
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/comments
+-	**Allowed Blocks:** core/comments-pagination-previous, core/comments-pagination-numbers, core/comments-pagination-next
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** paginationArrow
 
 ## Comments Next Page
@@ -194,7 +206,8 @@ Displays the next comment's page link. ([Source](https://github.com/WordPress/gu
 
 -	**Name:** core/comments-pagination-next
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/comments-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Comments Page Numbers
@@ -203,8 +216,8 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Parent:** core/comments-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Comments Previous Page
 
@@ -212,26 +225,37 @@ Displays the previous comment's page link. ([Source](https://github.com/WordPres
 
 -	**Name:** core/comments-pagination-previous
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/comments-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Comments Title
 
-Displays a title with the number of comments ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title))
+Displays a title with the number of comments. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/comments-title))
 
 -	**Name:** core/comments-title
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
--	**Attributes:** level, showCommentsCount, showPostTitle, textAlign
+-	**Ancestor:** core/comments
+-	**Supports:** align, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
+-	**Attributes:** level, levelOptions, showCommentsCount, showPostTitle, textAlign
 
 ## Cover
 
-Add an image or video with a text overlay — great for headers. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover))
+Add an image or video with a text overlay. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover))
 
 -	**Name:** core/cover
 -	**Category:** media
--	**Supports:** align, anchor, color (~~background~~, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, minHeight, minHeightUnit, overlayColor, templateLock, url, useFeaturedImage
+-	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage
+
+## Details
+
+Hide and show additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
+
+-	**Name:** core/details
+-	**Category:** text
+-	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** showContent, summary
 
 ## Embed
 
@@ -239,7 +263,7 @@ Add a block that displays content pulled from other sites, like Twitter or YouTu
 
 -	**Name:** core/embed
 -	**Category:** embed
--	**Supports:** align
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin)
 -	**Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url
 
 ## File
@@ -248,8 +272,58 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/file
 -	**Category:** media
--	**Supports:** align, anchor
--	**Attributes:** displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
+-	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity, spacing (margin, padding)
+-	**Attributes:** blob, displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
+
+## Footnotes
+
+Display footnotes added to the page. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/footnotes))
+
+-	**Name:** core/footnotes
+-	**Category:** text
+-	**Supports:** color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+
+## Form
+
+A form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form))
+
+-	**Name:** core/form
+-	**Experimental:** true
+-	**Category:** common
+-	**Allowed Blocks:** core/paragraph, core/heading, core/form-input, core/form-submit-button, core/form-submission-notification, core/group, core/columns
+-	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Attributes:** action, email, method, submissionMethod
+
+## Input Field
+
+The basic building block for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-input))
+
+-	**Name:** core/form-input
+-	**Experimental:** true
+-	**Category:** common
+-	**Ancestor:** core/form
+-	**Supports:** anchor, spacing (margin), ~~reusable~~
+-	**Attributes:** inlineLabel, label, name, placeholder, required, type, value, visibilityPermissions
+
+## Form Submission Notification
+
+Provide a notification message after the form has been submitted. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submission-notification))
+
+-	**Name:** core/form-submission-notification
+-	**Experimental:** true
+-	**Category:** common
+-	**Ancestor:** core/form
+-	**Attributes:** type
+
+## Form Submit Button
+
+A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/form-submit-button))
+
+-	**Name:** core/form-submit-button
+-	**Experimental:** true
+-	**Category:** common
+-	**Ancestor:** core/form
+-	**Allowed Blocks:** core/buttons, core/button
 
 ## Classic
 
@@ -266,8 +340,9 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
 
 -	**Name:** core/gallery
 -	**Category:** media
--	**Supports:** align, anchor, color (background, gradients, ~~text~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
--	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug
+-	**Allowed Blocks:** core/image
+-	**Supports:** align, anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
+-	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, randomOrder, shortCodeTransforms, sizeSlug
 
 ## Group
 
@@ -275,8 +350,8 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), dimensions (minHeight), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** tagName, templateLock
+-	**Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** allowedBlocks, tagName, templateLock
 
 ## Heading
 
@@ -284,8 +359,8 @@ Introduce new sections and organize content to help visitors (and search engines
 
 -	**Name:** core/heading
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
--	**Attributes:** content, level, placeholder, textAlign
+-	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight)
+-	**Attributes:** content, level, levelOptions, placeholder, textAlign
 
 ## Home Link
 
@@ -293,7 +368,8 @@ Create a link that always points to the homepage of the site. Usually not necess
 
 -	**Name:** core/home-link
 -	**Category:** design
--	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/navigation
+-	**Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Custom HTML
@@ -302,7 +378,7 @@ Add custom HTML code and preview it as you edit. ([Source](https://github.com/Wo
 
 -	**Name:** core/html
 -	**Category:** widgets
--	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
+-	**Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
 -	**Attributes:** content
 
 ## Image
@@ -311,8 +387,8 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** anchor, color (~~background~~, ~~text~~)
--	**Attributes:** align, alt, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, sizeSlug, title, url, width
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone), interactivity, shadow (), spacing (margin)
+-	**Attributes:** alt, aspectRatio, blob, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
 
@@ -320,7 +396,7 @@ Display a list of your most recent comments. ([Source](https://github.com/WordPr
 
 -	**Name:** core/latest-comments
 -	**Category:** widgets
--	**Supports:** align, spacing (margin, padding), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** commentsToShow, displayAvatar, displayDate, displayExcerpt
 
 ## Latest Posts
@@ -329,25 +405,28 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
 
 -	**Name:** core/latest-posts
 -	**Category:** widgets
--	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor
 
 ## List
 
-Create a bulleted or numbered list. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list))
+An organized collection of items displayed in a specific order. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list))
 
 -	**Name:** core/list
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Allowed Blocks:** core/list-item
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** ordered, placeholder, reversed, start, type, values
 
 ## List item
 
-Create a list item. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item))
+An individual item within a list. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item))
 
 -	**Name:** core/list-item
 -	**Category:** text
--	**Supports:** typography (fontSize, lineHeight), ~~className~~
+-	**Parent:** core/list
+-	**Allowed Blocks:** core/list
+-	**Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** content, placeholder
 
 ## Login/out
@@ -356,7 +435,7 @@ Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree
 
 -	**Name:** core/loginout
 -	**Category:** theme
--	**Supports:** className, typography (~~fontSize~~)
+-	**Supports:** className, color (background, gradients, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** displayLoginAsForm, redirectToCurrent
 
 ## Media & Text
@@ -365,8 +444,8 @@ Set media and words side-by-side for a richer layout. ([Source](https://github.c
 
 -	**Name:** core/media-text
 -	**Category:** media
--	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** align, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, verticalAlignment
+-	**Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** align, allowedBlocks, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, useFeaturedImage, verticalAlignment
 
 ## Unsupported
 
@@ -374,7 +453,7 @@ Your site doesn’t include support for this block. ([Source](https://github.com
 
 -	**Name:** core/missing
 -	**Category:** text
--	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~, ~~reusable~~
+-	**Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~, ~~reusable~~
 -	**Attributes:** originalContent, originalName, originalUndelimitedContent
 
 ## More
@@ -383,7 +462,7 @@ Content before this block will be shown in the excerpt on your archives page. ([
 
 -	**Name:** core/more
 -	**Category:** design
--	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~multiple~~
+-	**Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~, ~~multiple~~
 -	**Attributes:** customText, noTeaser
 
 ## Navigation
@@ -392,7 +471,8 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 
 -	**Name:** core/navigation
 -	**Category:** theme
--	**Supports:** align (full, wide), inserter, spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+-	**Allowed Blocks:** core/navigation-link, core/search, core/social-links, core/page-list, core/spacer, core/home-link, core/site-title, core/site-logo, core/navigation-submenu, core/loginout, core/buttons
+-	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~
 -	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 
 ## Custom Link
@@ -401,7 +481,9 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
 
 -	**Name:** core/navigation-link
 -	**Category:** design
--	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/navigation
+-	**Allowed Blocks:** core/navigation-link, core/navigation-submenu, core/page-list
+-	**Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url
 
 ## Submenu
@@ -410,7 +492,8 @@ Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenbe
 
 -	**Name:** core/navigation-submenu
 -	**Category:** design
--	**Supports:** ~~html~~, ~~reusable~~
+-	**Parent:** core/navigation
+-	**Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelItem, kind, label, opensInNewTab, rel, title, type, url
 
 ## Page Break
@@ -419,8 +502,8 @@ Separate your content into a multi-page experience. ([Source](https://github.com
 
 -	**Name:** core/nextpage
 -	**Category:** design
--	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~
--	**Attributes:** 
+-	**Parent:** core/post-content
+-	**Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
 
 ## Page List
 
@@ -428,8 +511,19 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
 
 -	**Name:** core/page-list
 -	**Category:** widgets
--	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** parentPageID
+-	**Allowed Blocks:** core/page-list-item
+-	**Supports:** interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** isNested, parentPageID
+
+## Page List Item
+
+Displays a page inside a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/page-list-item))
+
+-	**Name:** core/page-list-item
+-	**Category:** widgets
+-	**Parent:** core/page-list
+-	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
+-	**Attributes:** hasChildren, id, label, link, title
 
 ## Paragraph
 
@@ -437,116 +531,119 @@ Start with the basic building block of all narrative. ([Source](https://github.c
 
 -	**Name:** core/paragraph
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), splitting, typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** align, content, direction, dropCap, placeholder
 
-## Pattern
+## Pattern placeholder
 
 Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/pattern))
 
 -	**Name:** core/pattern
 -	**Category:** theme
--	**Supports:** ~~html~~, ~~inserter~~
+-	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** slug
 
-## Post Author
+## Author
 
 Display post author details such as name, avatar, and bio. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author))
 
 -	**Name:** core/post-author
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** avatarSize, byline, isLink, linkTarget, showAvatar, showBio, textAlign
 
-## Post Author Biography
+## Author Biography
 
 The author biography. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-biography))
 
 -	**Name:** core/post-author-biography
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** textAlign
 
-## Post Author Name
+## Author Name
 
 The author name. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-author-name))
 
 -	**Name:** core/post-author-name
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** isLink, linkTarget, textAlign
 
-## Post Comment (deprecated)
+## Comment (deprecated)
 
 This block is deprecated. Please use the Comments block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comment))
 
 -	**Name:** core/post-comment
+-	**Experimental:** fse
 -	**Category:** theme
--	**Supports:** ~~html~~, ~~inserter~~
+-	**Allowed Blocks:** core/avatar, core/comment-author-name, core/comment-content, core/comment-date, core/comment-edit-link, core/comment-reply-link
+-	**Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~
 -	**Attributes:** commentId
 
-## Post Comments Count
+## Comments Count
 
 Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count))
 
 -	**Name:** core/post-comments-count
+-	**Experimental:** fse
 -	**Category:** theme
--	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
-## Post Comments Form
+## Comments Form
 
 Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-form))
 
 -	**Name:** core/post-comments-form
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
-## Post Comments Link
+## Comments Link
 
 Displays the link to the current post comments. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-link))
 
 -	**Name:** core/post-comments-link
+-	**Experimental:** fse
 -	**Category:** theme
--	**Supports:** color (background, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
-## Post Content
+## Content
 
 Displays the contents of a post or page. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-content))
 
 -	**Name:** core/post-content
 -	**Category:** theme
--	**Supports:** align (full, wide), dimensions (minHeight), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** 
+-	**Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 
-## Post Date
+## Date
 
-Add the date of this post. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-date))
+Display the publish date for an entry such as a post or page. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-date))
 
 -	**Name:** core/post-date
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** displayType, format, isLink, textAlign
 
-## Post Excerpt
+## Excerpt
 
-Display a post's excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt))
+Display the excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-excerpt))
 
 -	**Name:** core/post-excerpt
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** moreText, showMoreOnNewLine, textAlign
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** excerptLength, moreText, showMoreOnNewLine, textAlign
 
-## Post Featured Image
+## Featured Image
 
 Display a post's featured image. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-featured-image))
 
 -	**Name:** core/post-featured-image
 -	**Category:** theme
--	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), filter (duotone), interactivity (clientNavigation), shadow (), spacing (margin, padding), ~~html~~
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
 
 ## Post Navigation Link
 
@@ -554,8 +651,8 @@ Displays the next or previous post link that is adjacent to the current post. ([
 
 -	**Name:** core/post-navigation-link
 -	**Category:** theme
--	**Supports:** color (background, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** arrow, label, linkLabel, showTitle, textAlign, type
+-	**Supports:** color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** arrow, label, linkLabel, showTitle, taxonomy, textAlign, type
 
 ## Post Template
 
@@ -563,8 +660,8 @@ 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~~
--	**Attributes:** 
+-	**Parent:** core/query
+-	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Post Terms
 
@@ -572,17 +669,27 @@ Post terms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages
 
 -	**Name:** core/post-terms
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** prefix, separator, suffix, term, textAlign
 
-## Post Title
+## Time To Read
+
+Show minutes required to finish reading the post. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-time-to-read))
+
+-	**Name:** core/post-time-to-read
+-	**Experimental:** true
+-	**Category:** theme
+-	**Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** textAlign
+
+## Title
 
 Displays the title of a post, page, or any other content-type. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-title))
 
 -	**Name:** core/post-title
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isLink, level, linkTarget, rel, textAlign
+-	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isLink, level, levelOptions, linkTarget, rel, textAlign
 
 ## Preformatted
 
@@ -590,7 +697,7 @@ Add text that respects your spacing and tabs, and also allows styling. ([Source]
 
 -	**Name:** core/preformatted
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, text), typography (fontSize, lineHeight)
+-	**Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** content
 
 ## Pullquote
@@ -599,7 +706,7 @@ Give special visual emphasis to a quote from your text. ([Source](https://github
 
 -	**Name:** core/pullquote
 -	**Category:** text
--	**Supports:** align (full, left, right, wide), anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
+-	**Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** citation, textAlign, value
 
 ## Query Loop
@@ -608,8 +715,8 @@ 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~~
--	**Attributes:** displayLayout, namespace, query, queryId, tagName
+-	**Supports:** align (full, wide), interactivity, layout, ~~html~~
+-	**Attributes:** enhancedPagination, namespace, query, queryId, tagName
 
 ## No results
 
@@ -617,8 +724,8 @@ Contains the block elements used to render content when no query results are fou
 
 -	**Name:** core/query-no-results
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Parent:** core/query
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 
 ## Pagination
 
@@ -626,8 +733,10 @@ Displays a paginated navigation to next/previous set of posts, when applicable.
 
 -	**Name:** core/query-pagination
 -	**Category:** theme
--	**Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** paginationArrow
+-	**Ancestor:** core/query
+-	**Allowed Blocks:** core/query-pagination-previous, core/query-pagination-numbers, core/query-pagination-next
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** paginationArrow, showLabel
 
 ## Next Page
 
@@ -635,17 +744,19 @@ Displays the next posts page link. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/query-pagination-next
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/query-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Page Numbers
 
-Displays a list of page numbers for pagination ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination-numbers))
+Displays a list of page numbers for pagination. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/query-pagination-numbers))
 
 -	**Name:** core/query-pagination-numbers
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
--	**Attributes:** 
+-	**Parent:** core/query-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Attributes:** midSize
 
 ## Previous Page
 
@@ -653,7 +764,8 @@ Displays the previous posts page link. ([Source](https://github.com/WordPress/gu
 
 -	**Name:** core/query-pagination-previous
 -	**Category:** theme
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Parent:** core/query-pagination
+-	**Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Query Title
@@ -662,8 +774,8 @@ Display the query title. ([Source](https://github.com/WordPress/gutenberg/tree/t
 
 -	**Name:** core/query-title
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, showPrefix, showSearchTerm, textAlign, type
+-	**Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** level, levelOptions, showPrefix, showSearchTerm, textAlign, type
 
 ## Quote
 
@@ -671,8 +783,8 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
 
 -	**Name:** core/quote
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), typography (fontSize, lineHeight)
--	**Attributes:** align, citation, value
+-	**Supports:** align (full, left, right, wide), anchor, background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** citation, textAlign, value
 
 ## Read More
 
@@ -680,7 +792,7 @@ Displays the link of a post, page, or any other content-type. ([Source](https://
 
 -	**Name:** core/read-more
 -	**Category:** theme
--	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** content, linkTarget
 
 ## RSS
@@ -689,7 +801,7 @@ Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPres
 
 -	**Name:** core/rss
 -	**Category:** widgets
--	**Supports:** align, ~~html~~
+-	**Supports:** align, interactivity (clientNavigation), ~~html~~
 -	**Attributes:** blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow
 
 ## Search
@@ -698,8 +810,8 @@ Help visitors find your content. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/search
 -	**Category:** widgets
--	**Supports:** align (center, left, right), color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** buttonPosition, buttonText, buttonUseIcon, label, placeholder, query, showLabel, width, widthUnit
+-	**Supports:** align (center, left, right), color (background, gradients, text), interactivity, spacing (margin), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** buttonPosition, buttonText, buttonUseIcon, isSearchFieldHidden, label, placeholder, query, showLabel, width, widthUnit
 
 ## Separator
 
@@ -707,8 +819,8 @@ Create a break between ideas or sections with a horizontal separator. ([Source](
 
 -	**Name:** core/separator
 -	**Category:** design
--	**Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (margin)
--	**Attributes:** opacity
+-	**Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), interactivity (clientNavigation), spacing (margin)
+-	**Attributes:** opacity, tagName
 
 ## Shortcode
 
@@ -721,11 +833,11 @@ Insert additional custom elements with a WordPress shortcode. ([Source](https://
 
 ## Site Logo
 
-Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/site-logo))
+Display an image to represent this site. Update this block and the changes apply everywhere. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/site-logo))
 
 -	**Name:** core/site-logo
 -	**Category:** theme
--	**Supports:** align, color (~~background~~, ~~text~~), spacing (margin, padding), ~~alignWide~~, ~~html~~
+-	**Supports:** align, color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~alignWide~~, ~~html~~
 -	**Attributes:** isLink, linkTarget, shouldSyncIcon, width
 
 ## Site Tagline
@@ -734,8 +846,8 @@ Describe in a few words what the site is about. The tagline can be used in searc
 
 -	**Name:** core/site-tagline
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** textAlign
+-	**Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** level, levelOptions, textAlign
 
 ## Site Title
 
@@ -743,25 +855,27 @@ Displays the name of this site. Update the block, and the changes apply everywhe
 
 -	**Name:** core/site-title
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** isLink, level, linkTarget, textAlign
+-	**Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** isLink, level, levelOptions, linkTarget, textAlign
 
 ## Social Icon
 
-Display an icon linking to a social media profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
+Display an icon linking to a social profile or site. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-link))
 
 -	**Name:** core/social-link
 -	**Category:** widgets
--	**Supports:** ~~html~~, ~~reusable~~
+-	**Parent:** core/social-links
+-	**Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~
 -	**Attributes:** label, rel, service, url
 
 ## Social Icons
 
-Display icons linking to your social media profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
+Display icons linking to your social profiles or sites. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/social-links))
 
 -	**Name:** core/social-links
 -	**Category:** widgets
--	**Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (blockGap, margin, padding, units)
+-	**Allowed Blocks:** core/social-link
+-	**Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, margin, padding, units)
 -	**Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size
 
 ## Spacer
@@ -770,7 +884,7 @@ Add white space between blocks and customize its height. ([Source](https://githu
 
 -	**Name:** core/spacer
 -	**Category:** design
--	**Supports:** anchor, spacing (margin)
+-	**Supports:** anchor, interactivity (clientNavigation), spacing (margin)
 -	**Attributes:** height, width
 
 ## Table
@@ -779,7 +893,7 @@ Create structured content in rows and columns to display information. ([Source](
 
 -	**Name:** core/table
 -	**Category:** text
--	**Supports:** align, anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** align, anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** body, caption, foot, hasFixedLayout, head
 
 ## Table of Contents
@@ -787,17 +901,18 @@ Create structured content in rows and columns to display information. ([Source](
 Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/table-of-contents))
 
 -	**Name:** core/table-of-contents
--	**Category:** layout
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Experimental:** true
+-	**Category:** design
+-	**Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** headings, onlyIncludeCurrentPage
 
 ## Tag Cloud
 
-A cloud of your most used tags. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tag-cloud))
+A cloud of popular keywords, each sized by how often it appears. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tag-cloud))
 
 -	**Name:** core/tag-cloud
 -	**Category:** widgets
--	**Supports:** align, spacing (margin, padding), typography (lineHeight), ~~html~~
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
 -	**Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
 
 ## Template Part
@@ -806,7 +921,7 @@ Edit the different global regions of your site, like the header, footer, sidebar
 
 -	**Name:** core/template-part
 -	**Category:** theme
--	**Supports:** align, ~~html~~, ~~reusable~~
+-	**Supports:** align, interactivity (clientNavigation), ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** area, slug, tagName, theme
 
 ## Term Description
@@ -815,7 +930,7 @@ Display the description of categories, tags and custom taxonomies when viewing a
 
 -	**Name:** core/term-description
 -	**Category:** theme
--	**Supports:** align (full, wide), color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Text Columns (deprecated)
@@ -824,7 +939,7 @@ This block is deprecated. Please use the Columns block instead. ([Source](https:
 
 -	**Name:** core/text-columns
 -	**Category:** design
--	**Supports:** ~~inserter~~
+-	**Supports:** interactivity (clientNavigation), ~~inserter~~
 -	**Attributes:** columns, content, width
 
 ## Verse
@@ -833,7 +948,7 @@ Insert poetry. Use special spacing formats. Or quote song lyrics. ([Source](http
 
 -	**Name:** core/verse
 -	**Category:** text
--	**Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+-	**Supports:** anchor, background (backgroundImage, backgroundSize), color (background, gradients, link, text), dimensions (minHeight), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
 -	**Attributes:** content, textAlign
 
 ## Video
@@ -842,7 +957,7 @@ Embed a video from your media library or upload a new one. ([Source](https://git
 
 -	**Name:** core/video
 -	**Category:** media
--	**Supports:** align, anchor, spacing (margin, padding)
--	**Attributes:** autoplay, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks
+-	**Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
+-	**Attributes:** autoplay, blob, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks
 
 <!-- END TOKEN Autogenerated - DO NOT EDIT -->
diff --git a/docs/reference-guides/data/README.md b/docs/reference-guides/data/README.md
index 1134c1d5ddd307..8500cc3783a4b2 100644
--- a/docs/reference-guides/data/README.md
+++ b/docs/reference-guides/data/README.md
@@ -5,6 +5,7 @@
 -   [**core/block-directory**: Block directory](/docs/reference-guides/data/data-core-block-directory.md)
 -   [**core/block-editor**: The Block Editor’s Data](/docs/reference-guides/data/data-core-block-editor.md)
 -   [**core/blocks**: Block Types Data](/docs/reference-guides/data/data-core-blocks.md)
+-   [**core/commands**: Command Palette](/docs/reference-guides/data/data-core-commands.md)
 -   [**core/customize-widgets**: Customize Widgets](/docs/reference-guides/data/data-core-customize-widgets.md)
 -   [**core/edit-post**: The Editor’s UI Data](/docs/reference-guides/data/data-core-edit-post.md)
 -   [**core/edit-site**: Edit Site](/docs/reference-guides/data/data-core-edit-site.md)
diff --git a/docs/reference-guides/data/data-core-block-directory.md b/docs/reference-guides/data/data-core-block-directory.md
index df12aec121da1b..c1fe96521adc32 100644
--- a/docs/reference-guides/data/data-core-block-directory.md
+++ b/docs/reference-guides/data/data-core-block-directory.md
@@ -46,8 +46,7 @@ _Returns_
 
 ### getInstalledBlockTypes
 
-Returns the block types that have been installed on the server in this
-session.
+Returns the block types that have been installed on the server in this session.
 
 _Parameters_
 
@@ -59,8 +58,7 @@ _Returns_
 
 ### getNewBlockTypes
 
-Returns block types that have been installed on the server and used in the
-current post.
+Returns block types that have been installed on the server and used in the current post.
 
 _Parameters_
 
@@ -72,8 +70,7 @@ _Returns_
 
 ### getUnusedBlockTypes
 
-Returns the block types that have been installed on the server but are not
-used in the current post.
+Returns the block types that have been installed on the server but are not used in the current post.
 
 _Parameters_
 
@@ -117,8 +114,7 @@ _Returns_
 
 ### addInstalledBlockType
 
-Returns an action object used to add a block type to the "newly installed"
-tracking list.
+Returns an action object used to add a block type to the "newly installed" tracking list.
 
 _Parameters_
 
@@ -142,8 +138,7 @@ _Returns_
 
 ### fetchDownloadableBlocks
 
-Returns an action object used in signalling that the downloadable blocks
-have been requested and are loading.
+Returns an action object used in signalling that the downloadable blocks have been requested and are loading.
 
 _Parameters_
 
@@ -167,8 +162,7 @@ _Returns_
 
 ### receiveDownloadableBlocks
 
-Returns an action object used in signalling that the downloadable blocks
-have been updated.
+Returns an action object used in signalling that the downloadable blocks have been updated.
 
 _Parameters_
 
@@ -181,8 +175,7 @@ _Returns_
 
 ### removeInstalledBlockType
 
-Returns an action object used to remove a block type from the "newly installed"
-tracking list.
+Returns an action object used to remove a block type from the "newly installed" tracking list.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 8d7bceb5b44317..437f7be20f7705 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -34,8 +34,7 @@ _Returns_
 
 ### canInsertBlocks
 
-Determines if the given blocks are allowed to be inserted into the block
-list.
+Determines if the given blocks are allowed to be inserted into the block list.
 
 _Parameters_
 
@@ -82,7 +81,6 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _clientId_ `string`: The block client Id.
--   _rootClientId_ `?string`: Optional root client ID of block list.
 
 _Returns_
 
@@ -96,7 +94,6 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _clientIds_ `string`: The block client IDs to be moved.
--   _rootClientId_ `?string`: Optional root client ID of block list.
 
 _Returns_
 
@@ -110,7 +107,6 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _clientId_ `string`: The block client Id.
--   _rootClientId_ `?string`: Optional root client ID of block list.
 
 _Returns_
 
@@ -124,7 +120,6 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _clientIds_ `string`: The block client IDs to be removed.
--   _rootClientId_ `?string`: Optional root client ID of block list.
 
 _Returns_
 
@@ -144,10 +139,7 @@ _Returns_
 
 ### getAdjacentBlockClientId
 
-Returns the client ID of the block adjacent one at the given reference
-startClientId and modifier directionality. Defaults start startClientId to
-the selected block, and direction as next block. Returns null if there is no
-adjacent block.
+Returns the client ID of the block adjacent one at the given reference startClientId and modifier directionality. Defaults start startClientId to the selected block, and direction as next block. Returns null if there is no adjacent block.
 
 _Parameters_
 
@@ -159,22 +151,24 @@ _Returns_
 
 -   `?string`: Return the client ID of the block, or null if none exists.
 
+### getAllowedBlocks
+
+Returns the list of allowed inserter blocks for inner blocks children.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _rootClientId_ `?string`: Optional root client ID of block list.
+
+_Returns_
+
+-   `Array?`: The list of allowed block types.
+
 ### getBlock
 
-Returns a block given its client ID. This is a parsed copy of the block,
-containing its `blockName`, `clientId`, and current `attributes` state. This
-is not the block's registration settings, which must be retrieved from the
-blocks module registration store.
+Returns a block given its client ID. This is a parsed copy of the block, containing its `blockName`, `clientId`, and current `attributes` state. This is not the block's registration settings, which must be retrieved from the blocks module registration store.
 
-getBlock recurses through its inner blocks until all its children blocks have
-been retrieved. Note that getBlock will not return the child inner blocks of
-an inner block controller. This is because an inner block controller syncs
-itself with its own entity, and should therefore not be included with the
-blocks of a different entity. For example, say you call `getBlocks( TP )` to
-get the blocks of a template part. If another template part is a child of TP,
-then the nested template part's child blocks will not be returned. This way,
-the template block itself is considered part of the parent, but the children
-are not.
+getBlock recurses through its inner blocks until all its children blocks have been retrieved. Note that getBlock will not return the child inner blocks of an inner block controller. This is because an inner block controller syncs itself with its own entity, and should therefore not be included with the blocks of a different entity. For example, say you call `getBlocks( TP )` to get the blocks of a template part. If another template part is a child of TP, then the nested template part's child blocks will not be returned. This way, the template block itself is considered part of the parent, but the children are not.
 
 _Parameters_
 
@@ -187,8 +181,7 @@ _Returns_
 
 ### getBlockAttributes
 
-Returns a block's attributes given its client ID, or null if no block exists with
-the client ID.
+Returns a block's attributes given its client ID, or null if no block exists with the client ID.
 
 _Parameters_
 
@@ -212,6 +205,35 @@ _Returns_
 
 -   `number`: Number of blocks in the post.
 
+### getBlockEditingMode
+
+Returns the block editing mode for a given block.
+
+The mode can be one of three options:
+
+-   `'disabled'`: Prevents editing the block entirely, i.e. it cannot be selected.
+-   `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the toolbar, the block movers, block settings.
+-   `'default'`: Allows editing the block as normal.
+
+Blocks can set a mode using the `useBlockEditingMode` hook.
+
+The mode is inherited by all of the block's inner blocks, unless they have their own mode.
+
+A template lock can also set a mode. If the template lock is `'contentOnly'`, the block's mode is overridden to `'contentOnly'` if the block has a content role attribute, or `'disabled'` otherwise.
+
+_Related_
+
+-   useBlockEditingMode
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _clientId_ `string`: The block client ID, or `''` for the root container.
+
+_Returns_
+
+-   `BlockEditingMode`: The block editing mode. One of `'disabled'`, `'contentOnly'`, or `'default'`.
+
 ### getBlockHierarchyRootClientId
 
 Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks.
@@ -227,8 +249,7 @@ _Returns_
 
 ### getBlockIndex
 
-Returns the index at which the block corresponding to the specified client
-ID occurs within the block order, or `-1` if the block does not exist.
+Returns the index at which the block corresponding to the specified client ID occurs within the block order, or `-1` if the block does not exist.
 
 _Parameters_
 
@@ -241,8 +262,7 @@ _Returns_
 
 ### getBlockInsertionPoint
 
-Returns the insertion point, the index at which the new inserted block would
-be placed. Defaults to the last index.
+Returns the location of the insertion cue. Defaults to the last index.
 
 _Parameters_
 
@@ -267,8 +287,7 @@ _Returns_
 
 ### getBlockMode
 
-Returns the block's editing mode, defaulting to "visual" if not explicitly
-assigned.
+Returns the block's editing mode, defaulting to "visual" if not explicitly assigned.
 
 _Parameters_
 
@@ -281,8 +300,7 @@ _Returns_
 
 ### getBlockName
 
-Returns a block's name given its client ID, or null if no block exists with
-the client ID.
+Returns a block's name given its client ID, or null if no block exists with the client ID.
 
 _Parameters_
 
@@ -293,11 +311,22 @@ _Returns_
 
 -   `string`: Block name.
 
+### getBlockNamesByClientId
+
+Given an array of block client IDs, returns the corresponding array of block names.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _clientIds_ `string[]`: Client IDs for which block names are to be returned.
+
+_Returns_
+
+-   `string[]`: Block names.
+
 ### getBlockOrder
 
-Returns an array containing all block client IDs in the editor in the order
-they appear. Optionally accepts a root client ID of the block list for which
-the order should be returned, defaulting to the top-level block order.
+Returns an array containing all block client IDs in the editor in the order they appear. Optionally accepts a root client ID of the block list for which the order should be returned, defaulting to the top-level block order.
 
 _Parameters_
 
@@ -324,11 +353,7 @@ _Returns_
 
 ### getBlockParentsByBlockName
 
-Given a block client ID and a block name, returns the list of all its parents
-from top to bottom, filtered by the given name(s). For example, if passed
-'core/group' as the blockName, it will only return parents which are group
-blocks. If passed `[ 'core/group', 'core/cover']`, as the blockName, it will
-return parents which are group blocks and parents which are cover blocks.
+Given a block client ID and a block name, returns the list of all its parents from top to bottom, filtered by the given name(s). For example, if passed 'core/group' as the blockName, it will only return parents which are group blocks. If passed `[ 'core/group', 'core/cover']`, as the blockName, it will return parents which are group blocks and parents which are cover blocks.
 
 _Parameters_
 
@@ -343,9 +368,7 @@ _Returns_
 
 ### getBlockRootClientId
 
-Given a block client ID, returns the root block from which the block is
-nested, an empty string for top-level blocks, or null if the block does not
-exist.
+Given a block client ID, returns the root block from which the block is nested, an empty string for top-level blocks, or null if the block does not exist.
 
 _Parameters_
 
@@ -358,9 +381,7 @@ _Returns_
 
 ### getBlocks
 
-Returns all block objects for the current post being edited as an array in
-the order they appear in the post. Note that this will exclude child blocks
-of nested inner block controllers.
+Returns all block objects for the current post being edited as an array in the order they appear in the post. Note that this will exclude child blocks of nested inner block controllers.
 
 _Parameters_
 
@@ -373,8 +394,7 @@ _Returns_
 
 ### getBlocksByClientId
 
-Given an array of block client IDs, returns the corresponding array of block
-objects.
+Given an array of block client IDs, returns the corresponding array of block objects.
 
 _Parameters_
 
@@ -385,11 +405,22 @@ _Returns_
 
 -   `WPBlock[]`: Block objects.
 
+### getBlocksByName
+
+Returns all blocks that match a blockName. Results include nested blocks.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _blockName_ `string[]`: Block name(s) for which clientIds are to be returned.
+
+_Returns_
+
+-   `Array`: Array of clientIds of blocks with name equal to blockName.
+
 ### getBlockSelectionEnd
 
-Returns the current block selection end. This value may be null, and it
-may represent either a singular block selection or multi-selection end.
-A selection is singular if its start and end match.
+Returns the current block selection end. This value may be null, and it may represent either a singular block selection or multi-selection end. A selection is singular if its start and end match.
 
 _Parameters_
 
@@ -401,9 +432,7 @@ _Returns_
 
 ### getBlockSelectionStart
 
-Returns the current block selection start. This value may be null, and it
-may represent either a singular block selection or multi-selection start.
-A selection is singular if its start and end match.
+Returns the current block selection start. This value may be null, and it may represent either a singular block selection or multi-selection start. A selection is singular if its start and end match.
 
 _Parameters_
 
@@ -417,11 +446,9 @@ _Returns_
 
 Determines the items that appear in the available block transforms list.
 
-Each item object contains what's necessary to display a menu item in the
-transform list and handle its selection.
+Each item object contains what's necessary to display a menu item in the transform list and handle its selection.
 
-The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>)
-that combines block usage frequenty and recency.
+The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>) that combines block usage frequenty and recency.
 
 Items are returned ordered descendingly by their 'frecency'.
 
@@ -450,24 +477,20 @@ _Properties_
 
 ### getClientIdsOfDescendants
 
-Returns an array containing the clientIds of all descendants of the blocks
-given. Returned ids are ordered first by the order of the ids given, then
-by the order that they appear in the editor.
+Returns an array containing the clientIds of all descendants of the blocks given. Returned ids are ordered first by the order of the ids given, then by the order that they appear in the editor.
 
 _Parameters_
 
 -   _state_ `Object`: Global application state.
--   _clientIds_ `Array`: Array of blocks to inspect.
+-   _rootIds_ `string|string[]`: Client ID(s) for which descendant blocks are to be returned.
 
 _Returns_
 
--   `Array`: ids of descendants.
+-   `Array`: Client IDs of descendants.
 
 ### getClientIdsWithDescendants
 
-Returns an array containing the clientIds of the top-level blocks and
-their descendants of any depth (for nested blocks). Ids are returned
-in the same order that they appear in the editor.
+Returns an array containing the clientIds of the top-level blocks and their descendants of any depth (for nested blocks). Ids are returned in the same order that they appear in the editor.
 
 _Parameters_
 
@@ -477,6 +500,29 @@ _Returns_
 
 -   `Array`: ids of top-level and descendant blocks.
 
+### getDirectInsertBlock
+
+Returns the block to be directly inserted by the block appender.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _rootClientId_ `?string`: Optional root client ID of block list.
+
+_Returns_
+
+-   `WPDirectInsertBlock|undefined`: The block type to be directly inserted.
+
+_Type Definition_
+
+-   _WPDirectInsertBlock_ `Object`
+
+_Properties_
+
+-   _name_ `string`: The type of block.
+-   _attributes_ `?Object`: Attributes to pass to the newly created block.
+-   _attributesToCopy_ `?Array<string>`: Attributes to be copied from adjecent blocks when inserted.
+
 ### getDraggedBlockClientIds
 
 Returns the client ids of any blocks being directly dragged.
@@ -493,8 +539,7 @@ _Returns_
 
 ### getFirstMultiSelectedBlockClientId
 
-Returns the client ID of the first block in the multi-selection set, or null
-if there is no multi-selection.
+Returns the client ID of the first block in the multi-selection set, or null if there is no multi-selection.
 
 _Parameters_
 
@@ -506,8 +551,7 @@ _Returns_
 
 ### getGlobalBlockCount
 
-Returns the total number of blocks, or the total number of blocks with a specific name in a post.
-The number returned includes nested blocks.
+Returns the total number of blocks, or the total number of blocks with a specific name in a post. The number returned includes nested blocks.
 
 _Parameters_
 
@@ -518,16 +562,25 @@ _Returns_
 
 -   `number`: Number of blocks in the post, or number of blocks with name equal to blockName.
 
+### getHoveredBlockClientId
+
+Returns the currently hovered block.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `Object`: Client Id of the hovered block.
+
 ### getInserterItems
 
-Determines the items that appear in the inserter. Includes both static
-items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
+Determines the items that appear in the inserter. Includes both static items (e.g. a regular block type) and dynamic items (e.g. a reusable block).
 
-Each item object contains what's necessary to display a button in the
-inserter and handle its selection.
+Each item object contains what's necessary to display a button in the inserter and handle its selection.
 
-The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>)
-that combines block usage frequenty and recency.
+The 'frecency' property is a heuristic (<https://en.wikipedia.org/wiki/Frecency>) that combines block usage frequenty and recency.
 
 Items are returned ordered descendingly by their 'utility' and 'frecency'.
 
@@ -558,8 +611,7 @@ _Properties_
 
 ### getLastMultiSelectedBlockClientId
 
-Returns the client ID of the last block in the multi-selection set, or null
-if there is no multi-selection.
+Returns the client ID of the last block in the multi-selection set, or null if there is no multi-selection.
 
 _Parameters_
 
@@ -584,8 +636,7 @@ _Returns_
 
 ### getMultiSelectedBlockClientIds
 
-Returns the current multi-selection set of block client IDs, or an empty
-array if there is no multi-selection.
+Returns the current multi-selection set of block client IDs, or an empty array if there is no multi-selection.
 
 _Parameters_
 
@@ -597,8 +648,7 @@ _Returns_
 
 ### getMultiSelectedBlocks
 
-Returns the current multi-selection set of blocks, or an empty array if
-there is no multi-selection.
+Returns the current multi-selection set of blocks, or an empty array if there is no multi-selection.
 
 _Parameters_
 
@@ -610,8 +660,7 @@ _Returns_
 
 ### getMultiSelectedBlocksEndClientId
 
-Returns the client ID of the block which ends the multi-selection set, or
-null if there is no multi-selection.
+Returns the client ID of the block which ends the multi-selection set, or null if there is no multi-selection.
 
 This is not necessarily the last client ID in the selection.
 
@@ -629,8 +678,7 @@ _Returns_
 
 ### getMultiSelectedBlocksStartClientId
 
-Returns the client ID of the block which begins the multi-selection set, or
-null if there is no multi-selection.
+Returns the client ID of the block which begins the multi-selection set, or null if there is no multi-selection.
 
 This is not necessarily the first client ID in the selection.
 
@@ -648,9 +696,7 @@ _Returns_
 
 ### getNextBlockClientId
 
-Returns the next block's client ID from the given reference start ID.
-Defaults start to the selected block. Returns null if there is no next
-block.
+Returns the next block's client ID from the given reference start ID. Defaults start to the selected block. Returns null if there is no next block.
 
 _Parameters_
 
@@ -661,11 +707,23 @@ _Returns_
 
 -   `?string`: Adjacent block's client ID, or null if none exists.
 
+### getPatternsByBlockTypes
+
+Returns the list of patterns based on their declared `blockTypes` and a block's name. Patterns can use `blockTypes` to integrate in work flows like suggesting appropriate patterns in a Placeholder state(during insertion) or blocks transformations.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _blockNames_ `string|string[]`: Block's name or array of block names to find matching pattens.
+-   _rootClientId_ `?string`: Optional target root client ID.
+
+_Returns_
+
+-   `Array`: The list of matched block patterns based on declared `blockTypes` and block name.
+
 ### getPreviousBlockClientId
 
-Returns the previous block's client ID from the given reference start ID.
-Defaults start to the selected block. Returns null if there is no previous
-block.
+Returns the previous block's client ID from the given reference start ID. Defaults start to the selected block. Returns null if there is no previous block.
 
 _Parameters_
 
@@ -680,6 +738,39 @@ _Returns_
 
 Returns the currently selected block, or null if there is no selected block.
 
+_Usage_
+
+```js
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+// Set initial active block client ID
+let activeBlockClientId = null;
+
+const getActiveBlockData = () => {
+	const activeBlock = select( blockEditorStore ).getSelectedBlock();
+
+	if ( activeBlock && activeBlock.clientId !== activeBlockClientId ) {
+		activeBlockClientId = activeBlock.clientId;
+
+		// Get active block name and attributes
+		const activeBlockName = activeBlock.name;
+		const activeBlockAttributes = activeBlock.attributes;
+
+		// Log active block name and attributes
+		console.log( activeBlockName, activeBlockAttributes );
+	}
+};
+
+// Subscribe to changes in the editor
+// wp.data.subscribe(() => {
+// getActiveBlockData()
+// })
+
+// Update active block data on click
+// onclick="getActiveBlockData()"
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -690,8 +781,7 @@ _Returns_
 
 ### getSelectedBlockClientId
 
-Returns the currently selected block client ID, or null if there is no
-selected block.
+Returns the currently selected block client ID, or null if there is no selected block.
 
 _Parameters_
 
@@ -727,9 +817,7 @@ _Returns_
 
 ### getSelectedBlocksInitialCaretPosition
 
-Returns the initial caret position for the selected block.
-This position is to used to position the caret properly when the selected block changes.
-If the current block is not a RichText, having initial position set to 0 means "focus block"
+Returns the initial caret position for the selected block. This position is to used to position the caret properly when the selected block changes. If the current block is not a RichText, having initial position set to 0 means "focus block"
 
 _Parameters_
 
@@ -741,8 +829,7 @@ _Returns_
 
 ### getSelectionEnd
 
-Returns the current selection end block client ID, attribute key and text
-offset.
+Returns the current selection end block client ID, attribute key and text offset.
 
 _Parameters_
 
@@ -754,8 +841,7 @@ _Returns_
 
 ### getSelectionStart
 
-Returns the current selection start block client ID, attribute key and text
-offset.
+Returns the current selection start block client ID, attribute key and text offset.
 
 _Parameters_
 
@@ -791,8 +877,7 @@ _Returns_
 
 ### getTemplateLock
 
-Returns the defined block template lock. Optionally accepts a root block
-client ID as context, otherwise defaulting to the global context.
+Returns the defined block template lock. Optionally accepts a root block client ID as context, otherwise defaulting to the global context.
 
 _Parameters_
 
@@ -801,19 +886,27 @@ _Parameters_
 
 _Returns_
 
--   `?string`: Block Template Lock
+-   `string|false`: Block Template Lock
 
 ### hasBlockMovingClientId
 
+> **Deprecated**
+
 Returns whether block moving mode is enabled.
 
+### hasDraggedInnerBlock
+
+Returns true if one of the block's inner blocks is dragged.
+
 _Parameters_
 
 -   _state_ `Object`: Editor state.
+-   _clientId_ `string`: Block client ID.
+-   _deep_ `boolean`: Perform a deep check.
 
 _Returns_
 
--   `string`: Client Id of moving block.
+-   `boolean`: Whether the block has an inner block dragged
 
 ### hasInserterItems
 
@@ -864,7 +957,7 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: Whether the block as an inner block selected
+-   `boolean`: Whether the block has an inner block selected
 
 ### isAncestorBeingDragged
 
@@ -881,8 +974,7 @@ _Returns_
 
 ### isAncestorMultiSelected
 
-Returns true if an ancestor of the block is multi-selected, or false
-otherwise.
+Returns true if an ancestor of the block is multi-selected, or false otherwise.
 
 _Parameters_
 
@@ -897,9 +989,7 @@ _Returns_
 
 Returns whether the block is being dragged.
 
-Only returns true if the block is being directly dragged,
-not if the block is a child of a parent being dragged.
-See `isAncestorBeingDragged` for child blocks.
+Only returns true if the block is being directly dragged, not if the block is a child of a parent being dragged. See `isAncestorBeingDragged` for child blocks.
 
 _Parameters_
 
@@ -925,7 +1015,7 @@ _Returns_
 
 ### isBlockInsertionPointVisible
 
-Returns true if we should show the block insertion point.
+Returns true if the block insertion point is visible.
 
 _Parameters_
 
@@ -937,8 +1027,7 @@ _Returns_
 
 ### isBlockMultiSelected
 
-Returns true if the client ID occurs within the block multi-selection, or
-false otherwise.
+Returns true if the client ID occurs within the block multi-selection, or false otherwise.
 
 _Parameters_
 
@@ -951,8 +1040,7 @@ _Returns_
 
 ### isBlockSelected
 
-Returns true if the block corresponding to the specified client ID is
-currently selected and no multi-selection exists, or false otherwise.
+Returns true if the block corresponding to the specified client ID is currently selected and no multi-selection exists, or false otherwise.
 
 _Parameters_
 
@@ -991,10 +1079,7 @@ _Returns_
 
 ### isBlockWithinSelection
 
-Returns true if the block corresponding to the specified client ID is
-currently selected but isn't the last of the selected blocks. Here "last"
-refers to the block sequence in the document, _not_ the sequence of
-multi-selection, which is why `state.selectionEnd` isn't used.
+Returns true if the block corresponding to the specified client ID is currently selected but isn't the last of the selected blocks. Here "last" refers to the block sequence in the document, _not_ the sequence of multi-selection, which is why `state.selectionEnd` isn't used.
 
 _Parameters_
 
@@ -1029,9 +1114,7 @@ _Returns_
 
 ### isFirstMultiSelectedBlock
 
-Returns true if a multi-selection exists, and the block corresponding to the
-specified client ID is the first block of the multi-selection set, or false
-otherwise.
+Returns true if a multi-selection exists, and the block corresponding to the specified client ID is the first block of the multi-selection set, or false otherwise.
 
 _Parameters_
 
@@ -1042,11 +1125,22 @@ _Returns_
 
 -   `boolean`: Whether block is first in multi-selection.
 
+### isGroupable
+
+Indicates if the provided blocks(by client ids) are groupable. We need to have at least one block, have a grouping block name set and be able to remove these blocks.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _clientIds_ `string[]`: Block client ids. If not passed the selected blocks client ids will be used.
+
+_Returns_
+
+-   `boolean`: True if the blocks are groupable.
+
 ### isLastBlockChangePersistent
 
-Returns true if the most recent block change is be considered persistent, or
-false otherwise. A persistent change is one committed by BlockEditorProvider
-via its `onChange` callback, in addition to `onInput`.
+Returns true if the most recent block change is be considered persistent, or false otherwise. A persistent change is one committed by BlockEditorProvider via its `onChange` callback, in addition to `onInput`.
 
 _Parameters_
 
@@ -1058,9 +1152,7 @@ _Returns_
 
 ### isMultiSelecting
 
-Whether in the process of multi-selecting or not. This flag is only true
-while the multi-selection is being selected (by mouse move), and is false
-once the multi-selection has been settled.
+Whether in the process of multi-selecting or not. This flag is only true while the multi-selection is being selected (by mouse move), and is false once the multi-selection has been settled.
 
 _Related_
 
@@ -1110,6 +1202,19 @@ _Returns_
 
 -   `boolean`: Whether user is typing.
 
+### isUngroupable
+
+Indicates if a block is ungroupable. A block is ungroupable if it is a single grouping block with inner blocks. If a block has an `ungroup` transform, it is also ungroupable, without the requirement of being the default grouping block. Additionally a block can only be ungrouped if it has inner blocks and can be removed.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _clientId_ `string`: Client Id of the block. If not passed the selected block's client id will be used.
+
+_Returns_
+
+-   `boolean`: True if the block is ungroupable.
+
 ### isValidTemplate
 
 Returns whether the blocks matches the template or not.
@@ -1191,9 +1296,21 @@ _Parameters_
 
 Action that hides the insertion point.
 
+### hoverBlock
+
+Returns an action object used in signalling that the block with the specified client ID has been hovered.
+
+_Parameters_
+
+-   _clientId_ `string`: Block client ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### insertAfterBlock
 
-Action that inserts an empty block after a given block.
+Action that inserts a default block after a given block.
 
 _Parameters_
 
@@ -1201,7 +1318,7 @@ _Parameters_
 
 ### insertBeforeBlock
 
-Action that inserts an empty block before a given block.
+Action that inserts a default block before a given block.
 
 _Parameters_
 
@@ -1211,6 +1328,8 @@ _Parameters_
 
 Action that inserts a single block, optionally at a specific index respective a root block list.
 
+Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if a templateLock is active on the block list.
+
 _Parameters_
 
 -   _block_ `Object`: Block object to insert.
@@ -1227,6 +1346,8 @@ _Returns_
 
 Action that inserts an array of blocks, optionally at a specific index respective a root block list.
 
+Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if a templateLock is active on the block list.
+
 _Parameters_
 
 -   _blocks_ `Object[]`: Block objects to insert.
@@ -1303,9 +1424,7 @@ _Parameters_
 
 > **Deprecated**
 
-Returns an action object used in signalling that blocks have been received.
-Unlike resetBlocks, these should be appended to the existing known set, not
-replacing.
+Returns an action object used in signalling that blocks have been received. Unlike resetBlocks, these should be appended to the existing known set, not replacing.
 
 _Parameters_
 
@@ -1315,10 +1434,111 @@ _Returns_
 
 -   `Object`: Action object.
 
+### registerInserterMediaCategory
+
+Registers a new inserter media category. Once registered, the media category is available in the inserter's media tab.
+
+The following interfaces are used:
+
+_Type Definition_
+
+-   _InserterMediaRequest_ `Object`: Interface for inserter media requests.
+
+_Properties_
+
+-   _per_page_ `number`: How many items to fetch per page.
+-   _search_ `string`: The search term to use for filtering the results.
+
+_Type Definition_
+
+-   _InserterMediaItem_ `Object`: Interface for inserter media responses. Any media resource should map their response to this interface, in order to create the core WordPress media blocks (image, video, audio).
+
+_Properties_
+
+-   _title_ `string`: The title of the media item.
+-   _url_ \`string: The source url of the media item.
+-   _previewUrl_ `[string]`: The preview source url of the media item to display in the media list.
+-   _id_ `[number]`: The WordPress id of the media item.
+-   _sourceId_ `[number|string]`: The id of the media item from external source.
+-   _alt_ `[string]`: The alt text of the media item.
+-   _caption_ `[string]`: The caption of the media item.
+
+_Usage_
+
+```js
+wp.data.dispatch( 'core/block-editor' ).registerInserterMediaCategory( {
+	name: 'openverse',
+	labels: {
+		name: 'Openverse',
+		search_items: 'Search Openverse',
+	},
+	mediaType: 'image',
+	async fetch( query = {} ) {
+		const defaultArgs = {
+			mature: false,
+			excluded_source: 'flickr,inaturalist,wikimedia',
+			license: 'pdm,cc0',
+		};
+		const finalQuery = { ...query, ...defaultArgs };
+		// Sometimes you might need to map the supported request params according to `InserterMediaRequest`.
+		// interface. In this example the `search` query param is named `q`.
+		const mapFromInserterMediaRequest = {
+			per_page: 'page_size',
+			search: 'q',
+		};
+		const url = new URL( 'https://api.openverse.org/v1/images/' );
+		Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+			const queryKey = mapFromInserterMediaRequest[ key ] || key;
+			url.searchParams.set( queryKey, value );
+		} );
+		const response = await window.fetch( url, {
+			headers: {
+				'User-Agent': 'WordPress/inserter-media-fetch',
+			},
+		} );
+		const jsonResponse = await response.json();
+		const results = jsonResponse.results;
+		return results.map( ( result ) => ( {
+			...result,
+			// If your response result includes an `id` prop that you want to access later, it should
+			// be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
+			// a report URL getter.
+			// Additionally you should always clear the `id` value of your response results because
+			// it is used to identify WordPress media items.
+			sourceId: result.id,
+			id: undefined,
+			caption: result.caption,
+			previewUrl: result.thumbnail,
+		} ) );
+	},
+	getReportUrl: ( { sourceId } ) =>
+		`https://wordpress.org/openverse/image/${ sourceId }/report/`,
+	isExternalResource: true,
+} );
+```
+
+_Parameters_
+
+-   _category_ `InserterMediaCategory`: The inserter media category to register.
+
+_Type Definition_
+
+-   _InserterMediaCategory_ `Object`: Interface for inserter media category.
+
+_Properties_
+
+-   _name_ `string`: The name of the media category, that should be unique among all media categories.
+-   _labels_ `Object`: Labels for the media category.
+-   _labels.name_ `string`: General name of the media category. It's used in the inserter media items list.
+-   _labels.search_items_ `[string]`: Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+-   _mediaType_ `('image'|'audio'|'video')`: The media type of the media category.
+-   _fetch_ `(InserterMediaRequest) => Promise<InserterMediaItem[]>`: The function to fetch media items for the category.
+-   _getReportUrl_ `[(InserterMediaItem) => string]`: If the media category supports reporting media items, this function should return the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+-   _isExternalResource_ `[boolean]`: If the media category is an external resource, this should be set to true. This is used to avoid making a request to the external resource when the user
+
 ### removeBlock
 
-Returns an action object used in signalling that the block with the
-specified client ID is to be removed.
+Returns an action object used in signalling that the block with the specified client ID is to be removed.
 
 _Parameters_
 
@@ -1331,13 +1551,12 @@ _Returns_
 
 ### removeBlocks
 
-Yields action objects used in signalling that the blocks corresponding to
-the set of specified client IDs are to be removed.
+Yields action objects used in signalling that the blocks corresponding to the set of specified client IDs are to be removed.
 
 _Parameters_
 
 -   _clientIds_ `string|string[]`: Client IDs of blocks to remove.
--   _selectPrevious_ `boolean`: True if the previous block should be selected when a block is removed.
+-   _selectPrevious_ `boolean`: True if the previous block or the immediate parent (if no previous block exists) should be selected when a block is removed.
 
 ### replaceBlock
 
@@ -1370,8 +1589,7 @@ _Returns_
 
 ### replaceInnerBlocks
 
-Returns an action object used in signalling that the inner blocks with the
-specified client ID should be replaced.
+Returns an action object used in signalling that the inner blocks with the specified client ID should be replaced.
 
 _Parameters_
 
@@ -1386,8 +1604,7 @@ _Returns_
 
 ### resetBlocks
 
-Action that resets blocks state to the specified array of blocks, taking precedence
-over any other content reflected as an edit in state.
+Action that resets blocks state to the specified array of blocks, taking precedence over any other content reflected as an edit in state.
 
 _Parameters_
 
@@ -1395,8 +1612,7 @@ _Parameters_
 
 ### resetSelection
 
-Returns an action object used in signalling that selection state should be
-reset to the specified selection.
+Returns an action object used in signalling that selection state should be reset to the specified selection.
 
 _Parameters_
 
@@ -1410,10 +1626,7 @@ _Returns_
 
 ### selectBlock
 
-Returns an action object used in signalling that the block with the
-specified client ID has been selected, optionally accepting a position
-value reflecting its selection directionality. An initialPosition of -1
-reflects a reverse selection.
+Returns an action object used in signalling that the block with the specified client ID has been selected, optionally accepting a position value reflecting its selection directionality. An initialPosition of -1 reflects a reverse selection.
 
 _Parameters_
 
@@ -1441,8 +1654,7 @@ _Returns_
 
 ### selectNextBlock
 
-Yields action objects used in signalling that the block following the given
-clientId should be selected.
+Yields action objects used in signalling that the block following the given clientId should be selected.
 
 _Parameters_
 
@@ -1450,20 +1662,39 @@ _Parameters_
 
 ### selectPreviousBlock
 
-Yields action objects used in signalling that the block preceding the given
-clientId should be selected.
+Yields action objects used in signalling that the block preceding the given clientId (or optionally, its first parent from bottom to top) should be selected.
 
 _Parameters_
 
 -   _clientId_ `string`: Block client ID.
+-   _fallbackToParent_ `boolean`: If true, select the first parent if there is no previous block.
 
-### setBlockMovingClientId
+### setBlockEditingMode
 
-Action that enables or disables the block moving mode.
+Sets the block editing mode for a given block.
+
+_Related_
+
+-   useBlockEditingMode
 
 _Parameters_
 
--   _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
+-   _clientId_ `string`: The block client ID, or `''` for the root container.
+-   _mode_ `BlockEditingMode`: The block editing mode. One of `'disabled'`, `'contentOnly'`, or `'default'`.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setBlockMovingClientId
+
+> **Deprecated**
+
+Set the block moving client ID.
+
+_Returns_
+
+-   `Object`: Action object.
 
 ### setBlockVisibility
 
@@ -1592,8 +1823,7 @@ _Parameters_
 
 ### toggleBlockMode
 
-Returns an action object used to toggle the block editing mode between
-visual and HTML modes.
+Returns an action object used to toggle the block editing mode between visual and HTML modes.
 
 _Parameters_
 
@@ -1615,6 +1845,22 @@ _Returns_
 
 -   `Object`: Action object.
 
+### unsetBlockEditingMode
+
+Clears the block editing mode for a given block.
+
+_Related_
+
+-   useBlockEditingMode
+
+_Parameters_
+
+-   _clientId_ `string`: The block client ID, or `''` for the root container.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### updateBlock
 
 Action that updates the block with the specified client ID.
@@ -1644,11 +1890,11 @@ _Returns_
 
 ### updateBlockListSettings
 
-Action that changes the nested settings of a given block.
+Action that changes the nested settings of the given block(s).
 
 _Parameters_
 
--   _clientId_ `string`: Client ID of the block whose nested setting are being received.
+-   _clientId_ `string | SettingsByClientId`: Client ID of the block whose nested setting are being received, or object of settings by client ID.
 -   _settings_ `Object`: Object with the new settings for the nested block.
 
 _Returns_
@@ -1669,10 +1915,7 @@ _Returns_
 
 ### validateBlocksToTemplate
 
-Block validity is a function of blocks state (at the point of a
-reset) and the template setting. As a compromise to its placement
-across distinct parts of state, it is implemented here as a side-
-effect of the block reset action.
+Block validity is a function of blocks state (at the point of a reset) and the template setting. As a compromise to its placement across distinct parts of state, it is implemented here as a side effect of the block reset action.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-blocks.md b/docs/reference-guides/data/data-core-blocks.md
index 8bf4d19d7134bf..158b7f92529122 100644
--- a/docs/reference-guides/data/data-core-blocks.md
+++ b/docs/reference-guides/data/data-core-blocks.md
@@ -8,16 +8,11 @@ Namespace: `core/blocks`.
 
 ### getActiveBlockVariation
 
-Returns the active block variation for a given block based on its attributes.
-Variations are determined by their `isActive` property.
-Which is either an array of block attribute keys or a function.
+Returns the active block variation for a given block based on its attributes. Variations are determined by their `isActive` property. Which is either an array of block attribute keys or a function.
 
-In case of an array of block attribute keys, the `attributes` are compared
-to the variation's attributes using strict equality check.
+In case of an array of block attribute keys, the `attributes` are compared to the variation's attributes using strict equality check.
 
-In case of function type, the function should accept a block's attributes
-and the variation's attributes and determines if a variation is active.
-A function that accepts a block's attributes and the variation's attributes and determines if a variation is active.
+In case of function type, the function should accept a block's attributes and the variation's attributes and determines if a variation is active. A function that accepts a block's attributes and the variation's attributes and determines if a variation is active.
 
 _Usage_
 
@@ -390,14 +385,11 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Default block name.
+-   `?string`: Default block name.
 
 ### getDefaultBlockVariation
 
-Returns the default block variation for the given block type.
-When there are multiple variations annotated as the default one,
-the last added item is picked. This simplifies registering overrides.
-When there is no default variation set, it returns the first item.
+Returns the default block variation for the given block type. When there are multiple variations annotated as the default one, the last added item is picked. This simplifies registering overrides. When there is no default variation set, it returns the first item.
 
 _Usage_
 
@@ -472,7 +464,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling non-block content.
+-   `?string`: Name of the block for handling non-block content.
 
 ### getGroupingBlockName
 
@@ -510,7 +502,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling the grouping of blocks.
+-   `?string`: Name of the block for handling the grouping of blocks.
 
 ### getUnregisteredFallbackBlockName
 
@@ -548,7 +540,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Name of the block for handling unregistered blocks.
+-   `?string`: Name of the block for handling unregistered blocks.
 
 ### hasBlockSupport
 
@@ -670,8 +662,7 @@ _Returns_
 
 ### isMatchingSearchTerm
 
-Returns true if the block type by the given name or object value matches a
-search term, or false otherwise.
+Returns true if the block type by the given name or object value matches a search term, or false otherwise.
 
 _Usage_
 
@@ -721,6 +712,10 @@ The actions in this package shouldn't be used directly. Instead, use the functio
 
 <!-- START TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
 
-Nothing to document.
+### reapplyBlockTypeFilters
+
+Signals that all block types should be computed again. It uses stored unprocessed block types and all the most recent list of registered filters.
+
+It addresses the issue where third party block filters get registered after third party blocks. A sample sequence: 1. Filter A. 2. Block B. 3. Block C. 4. Filter D. 5. Filter E. 6. Block F. 7. Filter G. In this scenario some filters would not get applied for all blocks because they are registered too late.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/blocks/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-commands.md b/docs/reference-guides/data/data-core-commands.md
new file mode 100644
index 00000000000000..9621de9d98c957
--- /dev/null
+++ b/docs/reference-guides/data/data-core-commands.md
@@ -0,0 +1,129 @@
+# The Commands Data
+
+Namespace: `core/commands`.
+
+## Selectors
+
+<!-- START TOKEN(Autogenerated selectors|../../../packages/commands/src/store/selectors.js) -->
+
+### getCommandLoaders
+
+Returns the registered command loaders.
+
+_Parameters_
+
+-   _state_ `Object`: State tree.
+-   _contextual_ `boolean`: Whether to return only contextual command loaders.
+
+_Returns_
+
+-   `import('./actions').WPCommandLoaderConfig[]`: The list of registered command loaders.
+
+### getCommands
+
+Returns the registered static commands.
+
+_Parameters_
+
+-   _state_ `Object`: State tree.
+-   _contextual_ `boolean`: Whether to return only contextual commands.
+
+_Returns_
+
+-   `import('./actions').WPCommandConfig[]`: The list of registered commands.
+
+### getContext
+
+Returns whether the active context.
+
+_Parameters_
+
+-   _state_ `Object`: State tree.
+
+_Returns_
+
+-   `string`: Context.
+
+### isOpen
+
+Returns whether the command palette is open.
+
+_Parameters_
+
+-   _state_ `Object`: State tree.
+
+_Returns_
+
+-   `boolean`: Returns whether the command palette is open.
+
+<!-- END TOKEN(Autogenerated selectors|../../../packages/commands/src/store/selectors.js) -->
+
+## Actions
+
+<!-- START TOKEN(Autogenerated actions|../../../packages/commands/src/store/actions.js) -->
+
+### close
+
+Closes the command palette.
+
+_Returns_
+
+-   `Object`: action.
+
+### open
+
+Opens the command palette.
+
+_Returns_
+
+-   `Object`: action.
+
+### registerCommand
+
+Returns an action object used to register a new command.
+
+_Parameters_
+
+-   _config_ `WPCommandConfig`: Command config.
+
+_Returns_
+
+-   `Object`: action.
+
+### registerCommandLoader
+
+Register command loader.
+
+_Parameters_
+
+-   _config_ `WPCommandLoaderConfig`: Command loader config.
+
+_Returns_
+
+-   `Object`: action.
+
+### unregisterCommand
+
+Returns an action object used to unregister a command.
+
+_Parameters_
+
+-   _name_ `string`: Command name.
+
+_Returns_
+
+-   `Object`: action.
+
+### unregisterCommandLoader
+
+Unregister command loader hook.
+
+_Parameters_
+
+-   _name_ `string`: Command loader name.
+
+_Returns_
+
+-   `Object`: action.
+
+<!-- END TOKEN(Autogenerated actions|../../../packages/commands/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-customize-widgets.md b/docs/reference-guides/data/data-core-customize-widgets.md
index 13476f94fdb398..8796f4cfea5ddf 100644
--- a/docs/reference-guides/data/data-core-customize-widgets.md
+++ b/docs/reference-guides/data/data-core-customize-widgets.md
@@ -10,6 +10,25 @@ Namespace: `core/customize-widgets`.
 
 Returns true if the inserter is opened.
 
+_Usage_
+
+```js
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { isInserterOpened } = useSelect(
+		( select ) => select( customizeWidgetsStore ),
+		[]
+	);
+
+	return isInserterOpened()
+		? __( 'Inserter is open' )
+		: __( 'Inserter is closed.' );
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -28,6 +47,32 @@ _Returns_
 
 Returns an action object used to open/close the inserter.
 
+_Usage_
+
+```js
+import { useState } from 'react';
+import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	return (
+		<Button
+			onClick={ () => {
+				setIsInserterOpened( ! isOpen );
+				setIsOpen( ! isOpen );
+			} }
+		>
+			{ __( 'Open/close inserter' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
index 1c082528485c35..06fe5fc30420ae 100644
--- a/docs/reference-guides/data/data-core-edit-post.md
+++ b/docs/reference-guides/data/data-core-edit-post.md
@@ -20,9 +20,7 @@ _Returns_
 
 ### getActiveGeneralSidebarName
 
-Returns the current active general sidebar name, or null if there is no
-general sidebar active. The active general sidebar is a unique name to
-identify either an editor or plugin sidebar.
+Returns the current active general sidebar name, or null if there is no general sidebar active. The active general sidebar is a unique name to identify either an editor or plugin sidebar.
 
 Examples:
 
@@ -140,20 +138,15 @@ _Returns_
 
 ### isEditingTemplate
 
-Returns true if the template editing mode is enabled.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
+> **Deprecated**
 
--   `boolean`: Whether we're editing the template.
+Returns true if the template editing mode is enabled.
 
 ### isEditorPanelEnabled
 
-Returns true if the given panel is enabled, or false otherwise. Panels are
-enabled by default.
+> **Deprecated**
+
+Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default.
 
 _Parameters_
 
@@ -166,8 +159,9 @@ _Returns_
 
 ### isEditorPanelOpened
 
-Returns true if the given panel is open, or false otherwise. Panels are
-closed by default.
+> **Deprecated**
+
+Returns true if the given panel is open, or false otherwise. Panels are closed by default.
 
 _Parameters_
 
@@ -180,8 +174,9 @@ _Returns_
 
 ### isEditorPanelRemoved
 
-Returns true if the given panel was programmatically removed, or false otherwise.
-All panels are not removed by default.
+> **Deprecated**
+
+Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default.
 
 _Parameters_
 
@@ -219,6 +214,8 @@ _Returns_
 
 ### isInserterOpened
 
+> **Deprecated**
+
 Returns true if the inserter is opened.
 
 _Parameters_
@@ -243,8 +240,7 @@ _Returns_
 
 ### isMetaBoxLocationActive
 
-Returns true if there is an active meta box in the given location, or false
-otherwise.
+Returns true if there is an active meta box in the given location, or false otherwise.
 
 _Parameters_
 
@@ -270,6 +266,8 @@ _Returns_
 
 ### isModalActive
 
+> **Deprecated** since WP 6.3 use `core/interface` store's selector with the same name instead.
+
 Returns true if a modal is active, or false otherwise.
 
 _Parameters_
@@ -283,8 +281,7 @@ _Returns_
 
 ### isPluginItemPinned
 
-Returns true if the plugin item is pinned to the header.
-When the value is not set it defaults to true.
+Returns true if the plugin item is pinned to the header. When the value is not set it defaults to true.
 
 _Parameters_
 
@@ -309,6 +306,8 @@ _Returns_
 
 ### isPublishSidebarOpened
 
+> **Deprecated**
+
 Returns true if the publish sidebar is opened.
 
 _Parameters_
@@ -343,6 +342,8 @@ Returns an action object signalling that the user closed the sidebar.
 
 ### closeModal
 
+> **Deprecated** since WP 6.3 use `core/interface` store's action with the same name instead.
+
 Returns an action object signalling that the user closed a modal.
 
 _Returns_
@@ -351,8 +352,9 @@ _Returns_
 
 ### closePublishSidebar
 
-Returns an action object used in signalling that the user closed the
-publish sidebar.
+> **Deprecated**
+
+Returns an action object used in signalling that the user closed the publish sidebar.
 
 _Returns_
 
@@ -396,6 +398,8 @@ _Parameters_
 
 ### openModal
 
+> **Deprecated** since WP 6.3 use `core/interface` store's action with the same name instead.
+
 Returns an action object used in signalling that the user opened a modal.
 
 _Parameters_
@@ -408,8 +412,9 @@ _Returns_
 
 ### openPublishSidebar
 
-Returns an action object used in signalling that the user opened the publish
-sidebar.
+> **Deprecated**
+
+Returns an action object used in signalling that the user opened the publish sidebar.
 
 _Returns_
 
@@ -417,6 +422,8 @@ _Returns_
 
 ### removeEditorPanel
 
+> **Deprecated**
+
 Returns an action object used to remove a panel from the editor.
 
 _Parameters_
@@ -441,42 +448,30 @@ _Parameters_
 
 ### setIsEditingTemplate
 
-Returns an action object used to switch to template editing.
-
-_Parameters_
-
--   _value_ `boolean`: Is editing template.
-
-_Returns_
+> **Deprecated**
 
--   `Object`: Action object.
+Returns an action object used to switch to template editing.
 
 ### setIsInserterOpened
 
+> **Deprecated**
+
 Returns an action object used to open/close the inserter.
 
 _Parameters_
 
--   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
--   _value.rootClientId_ `string`: The root client ID to insert at.
--   _value.insertionIndex_ `number`: The index to insert at.
-
-_Returns_
-
--   `Object`: Action object.
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false).
 
 ### setIsListViewOpened
 
+> **Deprecated**
+
 Returns an action object used to open/close the list view.
 
 _Parameters_
 
 -   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
 
-_Returns_
-
--   `Object`: Action object.
-
 ### showBlockTypes
 
 Update the provided block types to be visible.
@@ -487,14 +482,24 @@ _Parameters_
 
 ### switchEditorMode
 
+> **Deprecated**
+
 Triggers an action used to switch editor mode.
 
 _Parameters_
 
 -   _mode_ `string`: The editor mode.
 
+### toggleDistractionFree
+
+> **Deprecated**
+
+Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
+
 ### toggleEditorPanelEnabled
 
+> **Deprecated**
+
 Returns an action object used to enable or disable a panel in the editor.
 
 _Parameters_
@@ -507,6 +512,8 @@ _Returns_
 
 ### toggleEditorPanelOpened
 
+> **Deprecated**
+
 Opens a closed panel and closes an open panel.
 
 _Parameters_
@@ -521,6 +528,10 @@ _Parameters_
 
 -   _feature_ `string`: Feature name.
 
+### toggleFullscreenMode
+
+Action that toggles the Fullscreen Mode view option.
+
 ### togglePinnedPluginItem
 
 Triggers an action object used to toggle a plugin name flag.
@@ -531,6 +542,8 @@ _Parameters_
 
 ### togglePublishSidebar
 
+> **Deprecated**
+
 Returns an action object used in signalling that the user toggles the publish sidebar.
 
 _Returns_
@@ -539,11 +552,8 @@ _Returns_
 
 ### updatePreferredStyleVariations
 
-Returns an action object used in signaling that a style should be auto-applied when a block is created.
-
-_Parameters_
+> **Deprecated**
 
--   _blockName_ `string`: Name of the block.
--   _blockStyle_ `?string`: Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
+Returns an action object used in signaling that a style should be auto-applied when a block is created.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/edit-post/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 9ee5fea71801b9..a16c53861daada 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -20,8 +20,13 @@ _Returns_
 
 ### getCurrentTemplateNavigationPanelSubMenu
 
-Returns the current template or template part's corresponding
-navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
+> **Deprecated**
+
+### getCurrentTemplateTemplateParts
+
+> **Deprecated**
+
+Returns the template parts and their blocks for the current edited template.
 
 _Parameters_
 
@@ -29,11 +34,13 @@ _Parameters_
 
 _Returns_
 
--   `string`: The current template or template part's sub menu.
+-   `Array`: Template parts and their blocks in an array.
 
-### getCurrentTemplateTemplateParts
+### getEditedPostContext
 
-Returns the template parts and their blocks for the current edited template.
+> **Deprecated**
+
+Returns the edited post's context object.
 
 _Parameters_
 
@@ -41,10 +48,12 @@ _Parameters_
 
 _Returns_
 
--   `Array`: Template parts and their blocks in an array.
+-   `Object`: Page.
 
 ### getEditedPostId
 
+> **Deprecated**
+
 Returns the ID of the currently edited template or template part.
 
 _Parameters_
@@ -53,10 +62,12 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Post ID.
+-   `?string`: Post ID.
 
 ### getEditedPostType
 
+> **Deprecated**
+
 Returns the current edited post type (wp_template or wp_template_part).
 
 _Parameters_
@@ -65,7 +76,7 @@ _Parameters_
 
 _Returns_
 
--   `TemplateType?`: Template type.
+-   `?TemplateType`: Template type.
 
 ### getEditorMode
 
@@ -81,30 +92,16 @@ _Returns_
 
 ### getHomeTemplateId
 
-Returns the current home template ID.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `number?`: Home template ID.
+> **Deprecated**
 
 ### getNavigationPanelActiveMenu
 
-Returns the active menu in the navigation panel.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
-
--   `string`: Active menu.
+> **Deprecated**
 
 ### getPage
 
+> **Deprecated**
+
 Returns the current page object.
 
 _Parameters_
@@ -129,19 +126,30 @@ _Returns_
 
 ### getSettings
 
-Returns the settings, taking into account active features and permissions.
+Returns the site editor settings.
 
 _Parameters_
 
 -   _state_ `Object`: Global application state.
--   _setIsInserterOpen_ `Function`: Setter for the open state of the global inserter.
 
 _Returns_
 
 -   `Object`: Settings.
 
+### hasPageContentFocus
+
+> **Deprecated**
+
+Whether or not the editor allows only page content to be edited.
+
+_Returns_
+
+-   `boolean`: Whether or not focus is on editing page content.
+
 ### isFeatureActive
 
+> **Deprecated**
+
 Returns whether the given feature is enabled or not.
 
 _Parameters_
@@ -155,7 +163,9 @@ _Returns_
 
 ### isInserterOpened
 
-Returns the current opened/closed state of the inserter panel.
+> **Deprecated**
+
+Returns true if the inserter is opened.
 
 _Parameters_
 
@@ -163,11 +173,11 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: True if the inserter panel should be open; false if closed.
+-   `boolean`: Whether the inserter is opened.
 
 ### isListViewOpened
 
-Returns the current opened/closed state of the list view panel.
+Returns true if the list view is opened.
 
 _Parameters_
 
@@ -175,11 +185,21 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: True if the list view panel should be open; false if closed.
+-   `boolean`: Whether the list view is opened.
 
 ### isNavigationOpened
 
-Returns the current opened/closed state of the navigation panel.
+> **Deprecated**
+
+### isPage
+
+> **Deprecated**
+
+Whether or not the editor has a page loaded into it.
+
+_Related_
+
+-   setPage
 
 _Parameters_
 
@@ -187,7 +207,7 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: True if the navigation panel should be open; false if closed.
+-   `boolean`: Whether or not the editor has a page loaded into it.
 
 ### isSaveViewOpened
 
@@ -209,6 +229,8 @@ _Returns_
 
 ### addTemplate
 
+> **Deprecated**
+
 Action that adds a new template and sets it as the current template.
 
 _Parameters_
@@ -233,11 +255,9 @@ _Parameters_
 
 ### openNavigationPanelToMenu
 
-Opens the navigation panel and sets its active menu at the same time.
-
-_Parameters_
+> **Deprecated**
 
--   _menu_ `string`: Identifies the menu to open.
+Opens the navigation panel and sets its active menu at the same time.
 
 ### removeTemplate
 
@@ -257,44 +277,73 @@ _Parameters_
 -   _options_ `[Object]`:
 -   _options.allowUndo_ `[boolean]`: Whether to allow the user to undo reverting the template. Default true.
 
-### setHomeTemplateId
+### setEditedEntity
 
-Action that sets the home template ID to the template ID of the page resolved
-from a given path.
+> **Deprecated**
+
+Action that sets an edited entity.
 
 _Parameters_
 
--   _homeTemplateId_ `number`: The template ID for the homepage.
+-   _postType_ `string`: The entity's post type.
+-   _postId_ `string`: The entity's ID.
+-   _context_ `Object`: The entity's context.
 
-### setIsInserterOpened
+_Returns_
 
-Opens or closes the inserter.
+-   `Object`: Action object.
+
+### setEditedPostContext
+
+> **Deprecated**
+
+Set's the current block editor context.
 
 _Parameters_
 
--   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
--   _value.rootClientId_ `string`: The root client ID to insert at.
--   _value.insertionIndex_ `number`: The index to insert at.
+-   _context_ `Object`: The context object.
 
 _Returns_
 
 -   `Object`: Action object.
 
-### setIsListViewOpened
+### setHasPageContentFocus
 
-Sets whether the list view panel should be open.
+Sets whether or not the editor allows only page content to be edited.
 
 _Parameters_
 
--   _isOpen_ `boolean`: If true, opens the list view. If false, closes it. It does not toggle the state, but sets it directly.
+-   _hasPageContentFocus_ `boolean`: True to allow only page content to be edited, false to allow template to be edited.
 
-### setIsNavigationPanelOpened
+### setHomeTemplateId
 
-Sets whether the navigation panel should be open.
+> **Deprecated**
+
+### setIsInserterOpened
+
+> **Deprecated**
+
+Returns an action object used to open/close the inserter.
 
 _Parameters_
 
--   _isOpen_ `boolean`: If true, opens the nav panel. If false, closes it. It does not toggle the state, but sets it directly.
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false).
+
+### setIsListViewOpened
+
+> **Deprecated**
+
+Returns an action object used to open/close the list view.
+
+_Parameters_
+
+-   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
+
+### setIsNavigationPanelOpened
+
+> **Deprecated**
+
+Sets whether the navigation panel should be open.
 
 ### setIsSaveViewOpened
 
@@ -304,50 +353,52 @@ _Parameters_
 
 -   _isOpen_ `boolean`: If true, opens the save view. If false, closes it. It does not toggle the state, but sets it directly.
 
-### setNavigationPanelActiveMenu
+### setNavigationMenu
 
-Action that sets the active navigation panel menu.
+> **Deprecated**
+
+Action that sets a navigation menu.
 
 _Parameters_
 
--   _menu_ `string`: Menu prop of active menu.
+-   _navigationMenuId_ `string`: The Navigation Menu Post ID.
 
 _Returns_
 
 -   `Object`: Action object.
 
-### setPage
+### setNavigationPanelActiveMenu
 
-Resolves the template for a page and displays both. If no path is given, attempts
-to use the postId to generate a path like `?p=${ postId }`.
+> **Deprecated**
 
-_Parameters_
+Action that sets the active navigation panel menu.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setPage
+
+> **Deprecated**
 
--   _page_ `Object`: The page object.
--   _page.type_ `string`: The page type.
--   _page.slug_ `string`: The page slug.
--   _page.path_ `string`: The page path.
--   _page.context_ `Object`: The page context.
+Resolves the template for a page and displays both. If no path is given, attempts to use the postId to generate a path like `?p=${ postId }`.
 
 _Returns_
 
--   `number`: The resolved template ID for the page route.
+-   `Object`: Action object.
 
 ### setTemplate
 
 Action that sets a template, optionally fetching it from REST API.
 
-_Parameters_
-
--   _templateId_ `number`: The template ID.
--   _templateSlug_ `string`: The template slug.
-
 _Returns_
 
 -   `Object`: Action object.
 
 ### setTemplatePart
 
+> **Deprecated**
+
 Action that sets a template part.
 
 _Parameters_
@@ -360,7 +411,19 @@ _Returns_
 
 ### switchEditorMode
 
-Undocumented declaration.
+> **Deprecated**
+
+Triggers an action used to switch editor mode.
+
+_Parameters_
+
+-   _mode_ `string`: The editor mode.
+
+### toggleDistractionFree
+
+> **Deprecated**
+
+Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
 
 ### toggleFeature
 
diff --git a/docs/reference-guides/data/data-core-edit-widgets.md b/docs/reference-guides/data/data-core-edit-widgets.md
index 4b2e2dbedd93c0..2dde89bf69ad73 100644
--- a/docs/reference-guides/data/data-core-edit-widgets.md
+++ b/docs/reference-guides/data/data-core-edit-widgets.md
@@ -161,8 +161,7 @@ _Parameters_
 
 ### persistStubPost
 
-Persists a stub post with given ID to core data store. The post is meant to be in-memory only and
-shouldn't be saved via the API.
+Persists a stub post with given ID to core data store. The post is meant to be in-memory only and shouldn't be saved via the API.
 
 _Parameters_
 
@@ -175,8 +174,7 @@ _Returns_
 
 ### saveEditedWidgetAreas
 
-Converts all the blocks from edited widget areas into widgets,
-and submits a batch request to save everything at once.
+Converts all the blocks from edited widget areas into widgets, and submits a batch request to save everything at once.
 
 Creates a snackbar notice on either success or error.
 
@@ -186,8 +184,7 @@ _Returns_
 
 ### saveWidgetArea
 
-Converts all the blocks from a widget area specified by ID into widgets,
-and submits a batch request to save everything at once.
+Converts all the blocks from a widget area specified by ID into widgets, and submits a batch request to save everything at once.
 
 _Parameters_
 
@@ -199,8 +196,7 @@ _Returns_
 
 ### saveWidgetAreas
 
-Converts all the blocks from specified widget areas into widgets,
-and submits a batch request to save everything at once.
+Converts all the blocks from specified widget areas into widgets, and submits a batch request to save everything at once.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index 755e9ab8da0a0a..a9f07104bd3b6e 100644
--- a/docs/reference-guides/data/data-core-editor.md
+++ b/docs/reference-guides/data/data-core-editor.md
@@ -26,8 +26,7 @@ _Returns_
 
 ### didPostSaveRequestFail
 
-Returns true if a previous post save was attempted but failed, or false
-otherwise.
+Returns true if a previous post save was attempted but failed, or false otherwise.
 
 _Parameters_
 
@@ -39,8 +38,7 @@ _Returns_
 
 ### didPostSaveRequestSucceed
 
-Returns true if a previous post save was attempted successfully, or false
-otherwise.
+Returns true if a previous post save was attempted successfully, or false otherwise.
 
 _Parameters_
 
@@ -72,8 +70,7 @@ _Related_
 
 > **Deprecated** since 5.6. Callers should use the `getAutosave( postType, postId, userId )` selector from the '@wordpress/core-data' package and access properties on the returned autosave object using getPostRawValue.
 
-Returns an attribute value of the current autosave revision for a post, or
-null if there is no autosave for the post.
+Returns an attribute value of the current autosave revision for a post, or null if there is no autosave for the post.
 
 _Parameters_
 
@@ -188,9 +185,7 @@ _Related_
 
 ### getCurrentPost
 
-Returns the post currently being edited in its last known saved state, not
-including unsaved edits. Returns an object containing relevant default post
-values if the post has not yet been saved.
+Returns the post currently being edited in its last known saved state, not including unsaved edits. Returns an object containing relevant default post values if the post has not yet been saved.
 
 _Parameters_
 
@@ -215,8 +210,7 @@ _Returns_
 
 ### getCurrentPostId
 
-Returns the ID of the post currently being edited, or null if the post has
-not yet been saved.
+Returns the ID of the post currently being edited, or null if the post has not yet been saved.
 
 _Parameters_
 
@@ -228,8 +222,7 @@ _Returns_
 
 ### getCurrentPostLastRevisionId
 
-Returns the last revision ID of the post currently being edited,
-or null if the post has no revisions.
+Returns the last revision ID of the post currently being edited, or null if the post has no revisions.
 
 _Parameters_
 
@@ -255,6 +248,12 @@ _Returns_
 
 Returns the post type of the post currently being edited.
 
+_Usage_
+
+```js
+const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType();
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -263,11 +262,51 @@ _Returns_
 
 -   `string`: Post type.
 
+### getCurrentTemplateId
+
+Returns the template ID currently being rendered/edited
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `?string`: Template ID.
+
+### getDeviceType
+
+Returns the current editing canvas device type.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Device type.
+
 ### getEditedPostAttribute
 
-Returns a single attribute of the post being edited, preferring the unsaved
-edit if one exists, but falling back to the attribute for the last known
-saved state of the post.
+Returns a single attribute of the post being edited, preferring the unsaved edit if one exists, but falling back to the attribute for the last known saved state of the post.
+
+_Usage_
+
+```js
+// Get specific media size based on the featured media ID
+// Note: change sizes?.large for any registered size
+const getFeaturedMediaUrl = useSelect( ( select ) => {
+	const getFeaturedMediaId =
+		select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+	const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+
+	return (
+		getMedia?.media_details?.sizes?.large?.source_url ||
+		getMedia?.source_url ||
+		''
+	);
+}, [] );
+```
 
 _Parameters_
 
@@ -300,13 +339,11 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Preview Link.
+-   `string | undefined`: Preview Link.
 
 ### getEditedPostSlug
 
-Returns the slug for the post being edited, preferring a manually edited
-value if one exists, then a sanitized version of the current post title, and
-finally the post ID.
+Returns the slug for the post being edited, preferring a manually edited value if one exists, then a sanitized version of the current post title, and finally the post ID.
 
 _Parameters_
 
@@ -318,9 +355,7 @@ _Returns_
 
 ### getEditedPostVisibility
 
-Returns the current visibility of the post being edited, preferring the
-unsaved value if different than the saved post. The return value is one of
-"private", "password", or "public".
+Returns the current visibility of the post being edited, preferring the unsaved value if different than the saved post. The return value is one of "private", "password", or "public".
 
 _Parameters_
 
@@ -342,6 +377,18 @@ _Returns_
 
 -   `Array`: Block list.
 
+### getEditorMode
+
+Returns the current editing mode.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `string`: Editing mode.
+
 ### getEditorSelection
 
 Returns the current selection.
@@ -462,8 +509,7 @@ _Returns_
 
 ### getPermalinkParts
 
-Returns the permalink for a post, split into it's three parts: the prefix,
-the postName, and the suffix.
+Returns the permalink for a post, split into its three parts: the prefix, the postName, and the suffix.
 
 _Parameters_
 
@@ -475,8 +521,7 @@ _Returns_
 
 ### getPostEdits
 
-Returns any post values which have been changed in the editor but not yet
-been saved.
+Returns any post values which have been changed in the editor but not yet been saved.
 
 _Parameters_
 
@@ -516,6 +561,18 @@ _Related_
 
 -   getPreviousBlockClientId in core/block-editor store.
 
+### getRenderingMode
+
+Returns the post editor's rendering mode.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+
+_Returns_
+
+-   `string`: Rendering mode.
+
 ### getSelectedBlock
 
 _Related_
@@ -544,18 +601,11 @@ _Related_
 
 > **Deprecated** since Gutenberg 9.7.0.
 
-Returns state object prior to a specified optimist transaction ID, or `null`
-if the transaction corresponding to the given ID cannot be found.
+Returns state object prior to a specified optimist transaction ID, or `null` if the transaction corresponding to the given ID cannot be found.
 
 ### getSuggestedPostFormat
 
-Returns a suggested post format for the current post, inferred only if there
-is a single block within the post and it is of a type known to match a
-default post format. Returns null if the format cannot be determined.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
+Returns a suggested post format for the current post, inferred only if there is a single block within the post and it is of a type known to match a default post format. Returns null if the format cannot be determined.
 
 _Returns_
 
@@ -587,8 +637,7 @@ _Returns_
 
 ### hasEditorRedo
 
-Returns true if any future editor history snapshots exist, or false
-otherwise.
+Returns true if any future editor history snapshots exist, or false otherwise.
 
 _Parameters_
 
@@ -624,8 +673,7 @@ _Related_
 
 ### hasNonPostEntityChanges
 
-Returns true if there are unsaved edits for entities other than
-the editor's post, and false otherwise.
+Returns true if there are unsaved edits for entities other than the editor's post, and false otherwise.
 
 _Parameters_
 
@@ -651,8 +699,7 @@ _Related_
 
 > **Deprecated** since Gutenberg 9.7.0.
 
-Returns true if an optimistic transaction is pending commit, for which the
-before state satisfies the given predicate function.
+Returns true if an optimistic transaction is pending commit, for which the before state satisfies the given predicate function.
 
 ### isAncestorMultiSelected
 
@@ -710,8 +757,7 @@ _Related_
 
 ### isCleanNewPost
 
-Returns true if there are no unsaved values for the current edit session and
-if the currently edited post is new (has never been saved before).
+Returns true if there are no unsaved values for the current edit session and if the currently edited post is new (has never been saved before).
 
 _Parameters_
 
@@ -740,7 +786,7 @@ Return true if the current post has already been published.
 _Parameters_
 
 -   _state_ `Object`: Global application state.
--   _currentPost_ `Object?`: Explicit current post for bypassing registry selector.
+-   _currentPost_ `[Object]`: Explicit current post for bypassing registry selector.
 
 _Returns_
 
@@ -785,8 +831,7 @@ _Returns_
 
 ### isEditedPostBeingScheduled
 
-Return true if the post being edited is being scheduled. Preferring the
-unsaved status values.
+Return true if the post being edited is being scheduled. Preferring the unsaved status values.
 
 _Parameters_
 
@@ -798,13 +843,9 @@ _Returns_
 
 ### isEditedPostDateFloating
 
-Returns whether the current post should be considered to have a "floating"
-date (i.e. that it would publish "Immediately" rather than at a set time).
+Returns whether the current post should be considered to have a "floating" date (i.e. that it would publish "Immediately" rather than at a set time).
 
-Unlike in the PHP backend, the REST API returns a full date string for posts
-where the 0000-00-00T00:00:00 placeholder is present in the database. To
-infer that a post is set to publish "Immediately" we check whether the date
-and modified date are the same.
+Unlike in the PHP backend, the REST API returns a full date string for posts where the 0000-00-00T00:00:00 placeholder is present in the database. To infer that a post is set to publish "Immediately" we check whether the date and modified date are the same.
 
 _Parameters_
 
@@ -816,8 +857,7 @@ _Returns_
 
 ### isEditedPostDirty
 
-Returns true if there are unsaved values for the current edit session, or
-false if the editing state matches the saved or new post.
+Returns true if there are unsaved values for the current edit session, or false if the editing state matches the saved or new post.
 
 _Parameters_
 
@@ -829,9 +869,7 @@ _Returns_
 
 ### isEditedPostEmpty
 
-Returns true if the edited post has content. A post has content if it has at
-least one saveable block or otherwise has a non-empty content property
-assigned.
+Returns true if the edited post has content. A post has content if it has at least one saveable block or otherwise has a non-empty content property assigned.
 
 _Parameters_
 
@@ -843,8 +881,7 @@ _Returns_
 
 ### isEditedPostNew
 
-Returns true if the currently edited post is yet to be saved, or false if
-the post has been saved.
+Returns true if the currently edited post is yet to be saved, or false if the post has been saved.
 
 _Parameters_
 
@@ -868,8 +905,7 @@ _Returns_
 
 ### isEditedPostSaveable
 
-Returns true if the post can be saved, or false otherwise. A post must
-contain a title, an excerpt, or non-empty content to be valid for save.
+Returns true if the post can be saved, or false otherwise. A post must contain a title, an excerpt, or non-empty content to be valid for save.
 
 _Parameters_
 
@@ -879,12 +915,75 @@ _Returns_
 
 -   `boolean`: Whether the post can be saved.
 
+### isEditorPanelEnabled
+
+Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _panelName_ `string`: A string that identifies the panel.
+
+_Returns_
+
+-   `boolean`: Whether or not the panel is enabled.
+
+### isEditorPanelOpened
+
+Returns true if the given panel is open, or false otherwise. Panels are closed by default.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _panelName_ `string`: A string that identifies the panel.
+
+_Returns_
+
+-   `boolean`: Whether or not the panel is open.
+
+### isEditorPanelRemoved
+
+Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _panelName_ `string`: A string that identifies the panel.
+
+_Returns_
+
+-   `boolean`: Whether or not the panel is removed.
+
 ### isFirstMultiSelectedBlock
 
 _Related_
 
 -   isFirstMultiSelectedBlock in core/block-editor store.
 
+### isInserterOpened
+
+Returns true if the inserter is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the inserter is opened.
+
+### isListViewOpened
+
+Returns true if the list view is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether the list view is opened.
+
 ### isMultiSelecting
 
 _Related_
@@ -977,13 +1076,24 @@ _Returns_
 
 ### isPublishSidebarEnabled
 
-Returns whether the pre-publish panel should be shown
-or skipped when the user clicks the "publish" button.
+Returns whether the pre-publish panel should be shown or skipped when the user clicks the "publish" button.
 
 _Returns_
 
 -   `boolean`: Whether the pre-publish panel should be shown or not.
 
+### isPublishSidebarOpened
+
+Returns true if the publish sidebar is opened.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state
+
+_Returns_
+
+-   `boolean`: Whether the publish sidebar is open.
+
 ### isSavingNonPostEntityChanges
 
 Returns true if non-post entities are currently being saved, or false otherwise.
@@ -1034,14 +1144,12 @@ _Related_
 
 ### autosave
 
-Action that autosaves the current post. This
-includes server-side autosaving (default) and client-side (a.k.a. local)
-autosaving (e.g. on the Web, the post might be committed to Session
-Storage).
+Action that autosaves the current post. This includes server-side autosaving (default) and client-side (a.k.a. local) autosaving (e.g. on the Web, the post might be committed to Session Storage).
 
 _Parameters_
 
--   _options_ `Object?`: Extra flags to identify the autosave.
+-   _options_ `[Object]`: Extra flags to identify the autosave.
+-   _options.local_ `[boolean]`: Whether to perform a local autosave.
 
 ### clearSelectedBlock
 
@@ -1049,6 +1157,14 @@ _Related_
 
 -   clearSelectedBlock in core/block-editor store.
 
+### closePublishSidebar
+
+Returns an action object used in signalling that the user closed the publish sidebar.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### createUndoLevel
 
 > **Deprecated** Since WordPress 6.0
@@ -1061,13 +1177,39 @@ Disables the publish sidebar.
 
 ### editPost
 
-Returns an action object used in signalling that attributes of the post have
-been edited.
+Returns an action object used in signalling that attributes of the post have been edited.
+
+_Usage_
+
+```js
+// Update the post title
+wp.data.dispatch( 'core/editor' ).editPost( { title: `${ newTitle }` } );
+```
+
+```js
+// Get specific media size based on the featured media ID
+// Note: change sizes?.large for any registered size
+const getFeaturedMediaUrl = useSelect( ( select ) => {
+	const getFeaturedMediaId =
+		select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+	const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+
+	return (
+		getMedia?.media_details?.sizes?.large?.source_url ||
+		getMedia?.source_url ||
+		''
+	);
+}, [] );
+```
 
 _Parameters_
 
 -   _edits_ `Object`: Post attributes to edit.
--   _options_ `Object`: Options for the edit.
+-   _options_ `[Object]`: Options for the edit.
+
+_Returns_
+
+-   `Object`: Action object
 
 ### enablePublishSidebar
 
@@ -1203,6 +1345,14 @@ _Related_
 
 -   multiSelect in core/block-editor store.
 
+### openPublishSidebar
+
+Returns an action object used in signalling that the user opened the publish sidebar.
+
+_Returns_
+
+-   `Object`: Action object
+
 ### receiveBlocks
 
 _Related_
@@ -1231,6 +1381,18 @@ _Related_
 
 -   removeBlocks in core/block-editor store.
 
+### removeEditorPanel
+
+Returns an action object used to remove a panel from the editor.
+
+_Parameters_
+
+-   _panelName_ `string`: A string that identifies the panel to remove.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### replaceBlock
 
 _Related_
@@ -1256,14 +1418,13 @@ Returns an action object used to signal that the blocks have been updated.
 _Parameters_
 
 -   _blocks_ `Array`: Block Array.
--   _options_ `?Object`: Optional options.
+-   _options_ `[Object]`: Optional options.
 
 ### resetPost
 
 > **Deprecated** Since WordPress 6.0.
 
-Returns an action object used in signalling that the latest version of the
-post has been received, either by initialization or save.
+Returns an action object used in signalling that the latest version of the post has been received, either by initialization or save.
 
 ### savePost
 
@@ -1271,7 +1432,7 @@ Action for saving the current post in the editor.
 
 _Parameters_
 
--   _options_ `Object`:
+-   _options_ `[Object]`:
 
 ### selectBlock
 
@@ -1279,6 +1440,72 @@ _Related_
 
 -   selectBlock in core/block-editor store.
 
+### setDeviceType
+
+Action that changes the width of the editing canvas.
+
+_Parameters_
+
+-   _deviceType_ `string`:
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setEditedPost
+
+Returns an action that sets the current post Type and post ID.
+
+_Parameters_
+
+-   _postType_ `string`: Post Type.
+-   _postId_ `string`: Post ID.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setIsInserterOpened
+
+Returns an action object used to open/close the inserter.
+
+_Parameters_
+
+-   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
+-   _value.rootClientId_ `string`: The root client ID to insert at.
+-   _value.insertionIndex_ `number`: The index to insert at.
+-   _value.filterValue_ `string`: A query to filter the inserter results.
+-   _value.onSelect_ `Function`: A callback when an item is selected.
+-   _value.tab_ `string`: The tab to open in the inserter.
+-   _value.category_ `string`: The category to initialize in the inserter.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setIsListViewOpened
+
+Returns an action object used to open/close the list view.
+
+_Parameters_
+
+-   _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### setRenderingMode
+
+Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
+
+-   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
+-   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
+
+_Parameters_
+
+-   _mode_ `string`: Mode (one of 'post-only' or 'template-locked').
+
 ### setTemplateValidity
 
 _Related_
@@ -1287,28 +1514,24 @@ _Related_
 
 ### setupEditor
 
-Returns an action generator used in signalling that editor has initialized with
-the specified post object and editor settings.
+Returns an action generator used in signalling that editor has initialized with the specified post object and editor settings.
 
 _Parameters_
 
 -   _post_ `Object`: Post object.
 -   _edits_ `Object`: Initial edited attributes object.
--   _template_ `Array?`: Block Template.
+-   _template_ `[Array]`: Block Template.
 
 ### setupEditorState
 
-Returns an action object used to setup the editor state when first opening
-an editor.
+> **Deprecated**
+
+Setup the editor state.
 
 _Parameters_
 
 -   _post_ `Object`: Post object.
 
-_Returns_
-
--   `Object`: Action object.
-
 ### showInsertionPoint
 
 _Related_
@@ -1339,6 +1562,14 @@ _Related_
 
 -   stopTyping in core/block-editor store.
 
+### switchEditorMode
+
+Triggers an action used to switch editor mode.
+
+_Parameters_
+
+-   _mode_ `string`: The editor mode.
+
 ### synchronizeTemplate
 
 _Related_
@@ -1351,12 +1582,57 @@ _Related_
 
 -   toggleBlockMode in core/block-editor store.
 
+### toggleDistractionFree
+
+Action that toggles Distraction free mode. Distraction free mode expects there are no sidebars, as due to the z-index values set, you can't close sidebars.
+
+_Parameters_
+
+-   _options_ `[Object]`: Optional configuration object
+-   _options.createNotice_ `[boolean]`: Whether to create a notice
+
+### toggleEditorPanelEnabled
+
+Returns an action object used to enable or disable a panel in the editor.
+
+_Parameters_
+
+-   _panelName_ `string`: A string that identifies the panel to enable or disable.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### toggleEditorPanelOpened
+
+Opens a closed panel and closes an open panel.
+
+_Parameters_
+
+-   _panelName_ `string`: A string that identifies the panel to open or close.
+
+### togglePublishSidebar
+
+Returns an action object used in signalling that the user toggles the publish sidebar.
+
+_Returns_
+
+-   `Object`: Action object
+
 ### toggleSelection
 
 _Related_
 
 -   toggleSelection in core/block-editor store.
 
+### toggleSpotlightMode
+
+Action that toggles the Spotlight Mode view option.
+
+### toggleTopToolbar
+
+Action that toggles the Top Toolbar view option.
+
 ### trashPost
 
 Action for trashing the current post in the editor.
@@ -1425,8 +1701,7 @@ Undocumented declaration.
 
 > **Deprecated** since Gutenberg 9.7.0.
 
-Returns an action object used in signalling that a patch of updates for the
-latest version of the post have been received.
+Returns an action object used in signalling that a patch of updates for the latest version of the post have been received.
 
 _Returns_
 
diff --git a/docs/reference-guides/data/data-core-keyboard-shortcuts.md b/docs/reference-guides/data/data-core-keyboard-shortcuts.md
index 512668650d04bf..426fb316021a42 100644
--- a/docs/reference-guides/data/data-core-keyboard-shortcuts.md
+++ b/docs/reference-guides/data/data-core-keyboard-shortcuts.md
@@ -8,12 +8,104 @@ Namespace: `core/keyboard-shortcuts`.
 
 ### getAllShortcutKeyCombinations
 
-Undocumented declaration.
+Returns the shortcuts that include aliases for a given shortcut name.
+
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf } from '@wordpress/i18n';
+
+const ExampleComponent = () => {
+	const allShortcutKeyCombinations = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return (
+		allShortcutKeyCombinations.length > 0 && (
+			<ul>
+				{ allShortcutKeyCombinations.map(
+					( { character, modifier }, index ) => (
+						<li key={ index }>
+							{ createInterpolateElement(
+								sprintf(
+									'Character: <code>%s</code> / Modifier: <code>%s</code>',
+									character,
+									modifier
+								),
+								{
+									code: <code />,
+								}
+							) }
+						</li>
+					)
+				) }
+			</ul>
+		)
+	);
+};
+```
+
+_Parameters_
+
+-   _state_ `Object`: Global state.
+-   _name_ `string`: Shortcut name.
+
+_Returns_
+
+-   `WPShortcutKeyCombination[]`: Key combinations.
 
 ### getAllShortcutRawKeyCombinations
 
 Returns the raw representation of all the keyboard combinations of a given shortcut name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf } from '@wordpress/i18n';
+
+const ExampleComponent = () => {
+	const allShortcutRawKeyCombinations = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return (
+		allShortcutRawKeyCombinations.length > 0 && (
+			<ul>
+				{ allShortcutRawKeyCombinations.map(
+					( shortcutRawKeyCombination, index ) => (
+						<li key={ index }>
+							{ createInterpolateElement(
+								sprintf(
+									' <code>%s</code>',
+									shortcutRawKeyCombination
+								),
+								{
+									code: <code />,
+								}
+							) }
+						</li>
+					)
+				) }
+			</ul>
+		)
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -27,6 +119,31 @@ _Returns_
 
 Returns the shortcut names list for a given category name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const categoryShortcuts = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ),
+		[]
+	);
+
+	return (
+		categoryShortcuts.length > 0 && (
+			<ul>
+				{ categoryShortcuts.map( ( categoryShortcut ) => (
+					<li key={ categoryShortcut }>{ categoryShortcut }</li>
+				) ) }
+			</ul>
+		)
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -40,6 +157,45 @@ _Returns_
 
 Returns the aliases for a given shortcut name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf } from '@wordpress/i18n';
+const ExampleComponent = () => {
+	const shortcutAliases = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutAliases(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return (
+		shortcutAliases.length > 0 && (
+			<ul>
+				{ shortcutAliases.map( ( { character, modifier }, index ) => (
+					<li key={ index }>
+						{ createInterpolateElement(
+							sprintf(
+								'Character: <code>%s</code> / Modifier: <code>%s</code>',
+								character,
+								modifier
+							),
+							{
+								code: <code />,
+							}
+						) }
+					</li>
+				) ) }
+			</ul>
+		)
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -53,6 +209,29 @@ _Returns_
 
 Returns the shortcut description given its name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+const ExampleComponent = () => {
+	const shortcutDescription = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutDescription(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return shortcutDescription ? (
+		<div>{ shortcutDescription }</div>
+	) : (
+		<div>{ __( 'No description.' ) }</div>
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -60,12 +239,45 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Shortcut description.
+-   `?string`: Shortcut description.
 
 ### getShortcutKeyCombination
 
 Returns the main key combination for a given shortcut name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf } from '@wordpress/i18n';
+const ExampleComponent = () => {
+	const { character, modifier } = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutKeyCombination(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return (
+		<div>
+			{ createInterpolateElement(
+				sprintf(
+					'Character: <code>%s</code> / Modifier: <code>%s</code>',
+					character,
+					modifier
+				),
+				{
+					code: <code />,
+				}
+			) }
+		</div>
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -79,6 +291,42 @@ _Returns_
 
 Returns a string representing the main key combination for a given shortcut name.
 
+_Usage_
+
+```js
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect } from '@wordpress/data';
+import { sprintf } from '@wordpress/i18n';
+
+const ExampleComponent = () => {
+	const { display, raw, ariaLabel } = useSelect( ( select ) => {
+		return {
+			display: select( keyboardShortcutsStore ).getShortcutRepresentation(
+				'core/editor/next-region'
+			),
+			raw: select( keyboardShortcutsStore ).getShortcutRepresentation(
+				'core/editor/next-region',
+				'raw'
+			),
+			ariaLabel: select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation(
+				'core/editor/next-region',
+				'ariaLabel'
+			),
+		};
+	}, [] );
+
+	return (
+		<ul>
+			<li>{ sprintf( 'display string: %s', display ) }</li>
+			<li>{ sprintf( 'raw string: %s', raw ) }</li>
+			<li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>
+		</ul>
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global state.
@@ -87,7 +335,7 @@ _Parameters_
 
 _Returns_
 
--   `string?`: Shortcut representation.
+-   `?string`: Shortcut representation.
 
 <!-- END TOKEN(Autogenerated selectors|../../../packages/keyboard-shortcuts/src/store/selectors.js) -->
 
@@ -99,6 +347,45 @@ _Returns_
 
 Returns an action object used to register a new keyboard shortcut.
 
+_Usage_
+
+```js
+import { useEffect } from 'react';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const ExampleComponent = () => {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'custom/my-custom-shortcut',
+			category: 'my-category',
+			description: __( 'My custom shortcut' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'j',
+			},
+		} );
+	}, [] );
+
+	const shortcut = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutKeyCombination(
+				'custom/my-custom-shortcut'
+			),
+		[]
+	);
+
+	return shortcut ? (
+		<p>{ __( 'Shortcut is registered.' ) }</p>
+	) : (
+		<p>{ __( 'Shortcut is not registered.' ) }</p>
+	);
+};
+```
+
 _Parameters_
 
 -   _config_ `WPShortcutConfig`: Shortcut config.
@@ -111,6 +398,37 @@ _Returns_
 
 Returns an action object used to unregister a keyboard shortcut.
 
+_Usage_
+
+```js
+import { useEffect } from 'react';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const ExampleComponent = () => {
+	const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );
+
+	useEffect( () => {
+		unregisterShortcut( 'core/editor/next-region' );
+	}, [] );
+
+	const shortcut = useSelect(
+		( select ) =>
+			select( keyboardShortcutsStore ).getShortcutKeyCombination(
+				'core/editor/next-region'
+			),
+		[]
+	);
+
+	return shortcut ? (
+		<p>{ __( 'Shortcut is not unregistered.' ) }</p>
+	) : (
+		<p>{ __( 'Shortcut is unregistered.' ) }</p>
+	);
+};
+```
+
 _Parameters_
 
 -   _name_ `string`: Shortcut name.
diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md
index 271abf9cb74271..d36098429811dd 100644
--- a/docs/reference-guides/data/data-core-notices.md
+++ b/docs/reference-guides/data/data-core-notices.md
@@ -8,8 +8,7 @@ Namespace: `core/notices`.
 
 ### getNotices
 
-Returns all notices as an array, optionally for a given context. Defaults to
-the global context.
+Returns all notices as an array, optionally for a given context. Defaults to the global context.
 
 _Usage_
 
@@ -48,8 +47,7 @@ _Returns_
 
 ### createErrorNotice
 
-Returns an action object used in signalling that an error notice is to be
-created. Refer to `createNotice` for options documentation.
+Returns an action object used in signalling that an error notice is to be created. Refer to `createNotice` for options documentation.
 
 _Related_
 
@@ -93,8 +91,7 @@ _Returns_
 
 ### createInfoNotice
 
-Returns an action object used in signalling that an info notice is to be
-created. Refer to `createNotice` for options documentation.
+Returns an action object used in signalling that an info notice is to be created. Refer to `createNotice` for options documentation.
 
 _Related_
 
@@ -159,7 +156,7 @@ const ExampleComponent = () => {
 
 _Parameters_
 
--   _status_ `[string]`: Notice status.
+-   _status_ `string|undefined`: Notice status ("info" if undefined is passed).
 -   _content_ `string`: Notice message.
 -   _options_ `[Object]`: Notice options.
 -   _options.context_ `[string]`: Context under which to group notice.
@@ -178,8 +175,7 @@ _Returns_
 
 ### createSuccessNotice
 
-Returns an action object used in signalling that a success notice is to be
-created. Refer to `createNotice` for options documentation.
+Returns an action object used in signalling that a success notice is to be created. Refer to `createNotice` for options documentation.
 
 _Related_
 
@@ -221,8 +217,7 @@ _Returns_
 
 ### createWarningNotice
 
-Returns an action object used in signalling that a warning notice is to be
-created. Refer to `createNotice` for options documentation.
+Returns an action object used in signalling that a warning notice is to be created. Refer to `createNotice` for options documentation.
 
 _Related_
 
@@ -266,6 +261,53 @@ _Returns_
 
 -   `Object`: Action object.
 
+### removeAllNotices
+
+Removes all notices from a given context. Defaults to the default context.
+
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { Button } from '@wordpress/components';
+
+export const ExampleComponent = () => {
+	const notices = useSelect( ( select ) =>
+		select( noticesStore ).getNotices()
+	);
+	const { removeAllNotices } = useDispatch( noticesStore );
+	return (
+		<>
+			<ul>
+				{ notices.map( ( notice ) => (
+					<li key={ notice.id }>{ notice.content }</li>
+				) ) }
+			</ul>
+			<Button onClick={ () => removeAllNotices() }>
+				{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
+			</Button>
+			<Button onClick={ () => removeAllNotices( 'snackbar' ) }>
+				{ __(
+					'Clear all snackbar notices',
+					'woo-gutenberg-products-block'
+				) }
+			</Button>
+		</>
+	);
+};
+```
+
+_Parameters_
+
+-   _noticeType_ `string`: The context to remove all notices from.
+-   _context_ `string`: The context to remove all notices from.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### removeNotice
 
 Returns an action object used in signalling that a notice is to be removed.
@@ -314,4 +356,49 @@ _Returns_
 
 -   `Object`: Action object.
 
+### removeNotices
+
+Returns an action object used in signalling that several notices are to be removed.
+
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	const notices = useSelect( ( select ) =>
+		select( noticesStore ).getNotices()
+	);
+	const { removeNotices } = useDispatch( noticesStore );
+	return (
+		<>
+			<ul>
+				{ notices.map( ( notice ) => (
+					<li key={ notice.id }>{ notice.content }</li>
+				) ) }
+			</ul>
+			<Button
+				onClick={ () =>
+					removeNotices( notices.map( ( { id } ) => id ) )
+				}
+			>
+				{ __( 'Clear all notices' ) }
+			</Button>
+		</>
+	);
+};
+```
+
+_Parameters_
+
+-   _ids_ `string[]`: List of unique notice identifiers.
+-   _context_ `[string]`: Optional context (grouping) in which the notices are intended to appear. Defaults to default context.
+
+_Returns_
+
+-   `Object`: Action object.
+
 <!-- END TOKEN(Autogenerated actions|../../../packages/notices/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-nux.md b/docs/reference-guides/data/data-core-nux.md
index 4d2e8a0d98d546..eb6a1c3b5c9a5b 100644
--- a/docs/reference-guides/data/data-core-nux.md
+++ b/docs/reference-guides/data/data-core-nux.md
@@ -20,8 +20,7 @@ _Returns_
 
 ### getAssociatedGuide
 
-Returns an object describing the guide, if any, that the given tip is a part
-of.
+Returns an object describing the guide, if any, that the given tip is a part of.
 
 _Parameters_
 
@@ -34,9 +33,7 @@ _Returns_
 
 ### 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.
+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_
 
@@ -55,8 +52,7 @@ _Returns_
 
 ### disableTips
 
-Returns an action object that, when dispatched, prevents all tips from
-showing again.
+Returns an action object that, when dispatched, prevents all tips from showing again.
 
 _Returns_
 
@@ -64,8 +60,7 @@ _Returns_
 
 ### dismissTip
 
-Returns an action object that, when dispatched, dismisses the given tip. A
-dismissed tip will not show again.
+Returns an action object that, when dispatched, dismisses the given tip. A dismissed tip will not show again.
 
 _Parameters_
 
@@ -85,8 +80,7 @@ _Returns_
 
 ### triggerGuide
 
-Returns an action object that, when dispatched, presents a guide that takes
-the user through a series of tips step by step.
+Returns an action object that, when dispatched, presents a guide that takes the user through a series of tips step by step.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-preferences.md b/docs/reference-guides/data/data-core-preferences.md
index 87c743fd666b59..a07aad43992bd1 100644
--- a/docs/reference-guides/data/data-core-preferences.md
+++ b/docs/reference-guides/data/data-core-preferences.md
@@ -8,8 +8,7 @@ Namespace: `core/preferences`.
 
 ### get
 
-Returns a boolean indicating whether a prefer is active for a particular
-scope.
+Returns a boolean indicating whether a prefer is active for a particular scope.
 
 _Parameters_
 
@@ -29,8 +28,7 @@ _Returns_
 
 ### set
 
-Returns an action object used in signalling that a preference should be set
-to a value
+Returns an action object used in signalling that a preference should be set to a value
 
 _Parameters_
 
@@ -44,8 +42,7 @@ _Returns_
 
 ### setDefaults
 
-Returns an action object used in signalling that preference defaults should
-be set.
+Returns an action object used in signalling that preference defaults should be set.
 
 _Parameters_
 
@@ -65,9 +62,7 @@ When a persistence layer is set, the preferences store will:
 -   call `get` immediately and update the store state to the value returned.
 -   call `set` with all preferences whenever a preference changes value.
 
-`setPersistenceLayer` should ideally be dispatched at the start of an
-application's lifecycle, before any other actions have been dispatched to
-the preferences store.
+`setPersistenceLayer` should ideally be dispatched at the start of an application's lifecycle, before any other actions have been dispatched to the preferences store.
 
 _Parameters_
 
@@ -79,8 +74,7 @@ _Returns_
 
 ### toggle
 
-Returns an action object used in signalling that a preference should be
-toggled.
+Returns an action object used in signalling that a preference should be toggled.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-rich-text.md b/docs/reference-guides/data/data-core-rich-text.md
index 2c8e528ed3e54b..55220b3ca9c5d9 100644
--- a/docs/reference-guides/data/data-core-rich-text.md
+++ b/docs/reference-guides/data/data-core-rich-text.md
@@ -10,6 +10,35 @@ Namespace: `core/rich-text`.
 
 Returns a format type by name.
 
+_Usage_
+
+```js
+import { __, sprintf } from '@wordpress/i18n';
+import { store as richTextStore } from '@wordpress/rich-text';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+   const { getFormatType } = useSelect(
+       ( select ) => select( richTextStore ),
+       []
+   );
+
+   const boldFormat = getFormatType( 'core/bold' );
+
+   return boldFormat ? (
+       <ul>
+           { Object.entries( boldFormat )?.map( ( [ key, value ] ) => (
+               <li>
+                   { key } : { value }
+               </li>
+          ) ) }
+      </ul>
+   ) : (
+       __( 'Not Found' )
+   ;
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Data state.
@@ -21,8 +50,26 @@ _Returns_
 
 ### getFormatTypeForBareElement
 
-Gets the format type, if any, that can handle a bare element (without a
-data-format-type attribute), given the tag name of this element.
+Gets the format type, if any, that can handle a bare element (without a data-format-type attribute), given the tag name of this element.
+
+_Usage_
+
+```js
+import { __, sprintf } from '@wordpress/i18n';
+import { store as richTextStore } from '@wordpress/rich-text';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { getFormatTypeForBareElement } = useSelect(
+		( select ) => select( richTextStore ),
+		[]
+	);
+
+	const format = getFormatTypeForBareElement( 'strong' );
+
+	return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
+};
+```
 
 _Parameters_
 
@@ -37,6 +84,25 @@ _Returns_
 
 Gets the format type, if any, that can handle an element, given its classes.
 
+_Usage_
+
+```js
+import { __, sprintf } from '@wordpress/i18n';
+import { store as richTextStore } from '@wordpress/rich-text';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { getFormatTypeForClassName } = useSelect(
+		( select ) => select( richTextStore ),
+		[]
+	);
+
+	const format = getFormatTypeForClassName( 'has-inline-color' );
+
+	return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Data state.
@@ -50,6 +116,33 @@ _Returns_
 
 Returns all the available format types.
 
+_Usage_
+
+```js
+import { __, sprintf } from '@wordpress/i18n';
+import { store as richTextStore } from '@wordpress/rich-text';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { getFormatTypes } = useSelect(
+		( select ) => select( richTextStore ),
+		[]
+	);
+
+	const availableFormats = getFormatTypes();
+
+	return availableFormats ? (
+		<ul>
+			{ availableFormats?.map( ( format ) => (
+				<li>{ format.name }</li>
+			) ) }
+		</ul>
+	) : (
+		__( 'No Formats available' )
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Data state.
@@ -64,29 +157,6 @@ _Returns_
 
 <!-- START TOKEN(Autogenerated actions|../../../packages/rich-text/src/store/actions.js) -->
 
-### addFormatTypes
-
-Returns an action object used in signalling that format types have been
-added.
-
-_Parameters_
-
--   _formatTypes_ `Array|Object`: Format types received.
-
-_Returns_
-
--   `Object`: Action object.
-
-### removeFormatTypes
-
-Returns an action object used to remove a registered format type.
-
-_Parameters_
-
--   _names_ `string|Array`: Format name.
-
-_Returns_
-
--   `Object`: Action object.
+Nothing to document.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/rich-text/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index ba500d10c0038f..199c29cd67dd2e 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -2,17 +2,114 @@
 
 Namespace: `core`.
 
-## Selectors
+## Dynamically generated selectors
+
+There are a number of user-friendly selectors that are wrappers of the more generic `getEntityRecord` and `getEntityRecords` that can be used to retrieve information for the various entities.
+
+### getPostType
+
+Returns the information for a given post type.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postType = useSelect(
+    	( select ) => select( coreDataStore ).getPostType( 'post' )
+
+    	// Equivalent to: select( coreDataStore ).getEntityRecord( 'root', 'postType', 'post' )
+    );
+
+_Parameters_
+
+-   postType `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getPostTypes
+
+Returns the information for post types.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const postTypes = useSelect( ( select ) => {
+    	return select( coreDataStore ).getPostTypes( { per_page: 4 } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'postType', { per_page: 4 } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+### getTaxonomy
+
+Returns information for a given taxonomy.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomy = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomy( 'category' );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecord( 'root', 'taxonomy', 'category' );
+    } );
+
+_Parameters_
+
+-   taxonomy `string`
+
+_Returns_
+
+-   `EntityRecord | undefined`: Record.
+
+### getTaxonomies
+
+Returns information for taxonomies.
+
+_Usage_
+
+    import { useSelect } from '@wordpress/data';
+    import { store as coreDataStore } from '@wordpress/core-data';
+
+    const taxonomies = useSelect( ( select ) => {
+    	return select( coreDataStore ).getTaxonomies( { type: 'post' } );
+
+    	// Equivalent to:
+    	// select( coreDataStore ).getEntityRecords( 'root', 'taxonomy', { type: 'post' } );
+    } );
+
+_Parameters_
+
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `EntityRecord[] | null`: Records.
+
+## Other Selectors
 
 <!-- START TOKEN(Autogenerated selectors|../../../packages/core-data/src/selectors.ts) -->
 
 ### canUser
 
-Returns whether the current user can perform the given action on the given
-REST resource.
+Returns whether the current user can perform the given action on the given REST resource.
 
-Calling this may trigger an OPTIONS request to the REST API via the
-`canUser()` resolver.
+Calling this may trigger an OPTIONS request to the REST API via the `canUser()` resolver.
 
 <https://developer.wordpress.org/rest-api/reference/>
 
@@ -20,7 +117,7 @@ _Parameters_
 
 -   _state_ `State`: Data state.
 -   _action_ `string`: Action to check. One of: 'create', 'read', 'update', 'delete'.
--   _resource_ `string`: REST resource to check, e.g. 'media' or 'posts'.
+-   _resource_ `string | EntityResource`: Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }` or REST base as a string - `media`.
 -   _id_ `EntityRecordKey`: Optional ID of the rest resource to check.
 
 _Returns_
@@ -31,8 +128,7 @@ _Returns_
 
 Returns whether the current user can edit the given entity.
 
-Calling this may trigger an OPTIONS request to the REST API via the
-`canUser()` resolver.
+Calling this may trigger an OPTIONS request to the REST API via the `canUser()` resolver.
 
 <https://developer.wordpress.org/rest-api/reference/>
 
@@ -56,7 +152,7 @@ Returns all available authors.
 _Parameters_
 
 -   _state_ `State`: Data state.
--   _query_ `GetRecordsHttpQuery`: Optional object of query parameters to include with request.
+-   _query_ `GetRecordsHttpQuery`: Optional object of query parameters to include with request. For valid query parameters see the [Users page](https://developer.wordpress.org/rest-api/reference/users/) in the REST API Handbook and see the arguments for [List Users](https://developer.wordpress.org/rest-api/reference/users/#list-users) and [Retrieve a User](https://developer.wordpress.org/rest-api/reference/users/#retrieve-a-user).
 
 _Returns_
 
@@ -81,8 +177,7 @@ _Returns_
 
 Returns the latest autosaves for the post.
 
-May return multiple autosaves since the backend stores one autosave per
-author for each post.
+May return multiple autosaves since the backend stores one autosave per author for each post.
 
 _Parameters_
 
@@ -130,6 +225,20 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+> **Deprecated** since WordPress 6.5.0. Callers should use `select( 'core' ).getRevisions( 'root', 'globalStyles', ${ recordKey } )` instead, where `recordKey` is the id of the global styles parent post.
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Array< object > | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.
@@ -140,7 +249,20 @@ _Parameters_
 
 _Returns_
 
--   `undefined< 'edit' >`: Current user object.
+-   `ET.User< 'edit' >`: Current user object.
+
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
 
 ### getEditedEntityRecord
 
@@ -155,7 +277,7 @@ _Parameters_
 
 _Returns_
 
--   `undefined< EntityRecord > | undefined`: The entity record, merged with its edits.
+-   `ET.Updatable< EntityRecord > | false`: The entity record, merged with its edits.
 
 ### getEmbedPreview
 
@@ -230,17 +352,15 @@ _Returns_
 
 ### getEntityRecord
 
-Returns the Entity's record object by key. Returns `null` if the value is not
-yet received, undefined if the value entity is known to not exist, or the
-entity object if it exists and is received.
+Returns the Entity's record object by key. Returns `null` if the value is not yet received, undefined if the value entity is known to not exist, or the entity object if it exists and is received.
 
 _Parameters_
 
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _key_ `EntityRecordKey`: Record's key
--   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID.
+-   _key_ `EntityRecordKey`: Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
 
 _Returns_
 
@@ -265,9 +385,7 @@ _Returns_
 
 Returns the specified entity record's non transient edits.
 
-Transient edits don't create an undo level, and
-are not considered for change detection.
-They are defined in the entity's config.
+Transient edits don't create an undo level, and are not considered for change detection. They are defined in the entity's config.
 
 _Parameters_
 
@@ -289,12 +407,42 @@ _Parameters_
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
 
 _Returns_
 
 -   `EntityRecord[] | null`: Records.
 
+### getEntityRecordsTotalItems
+
+Returns the Entity's total available records for a given query (ignoring pagination).
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `number | null`: number | null.
+
+### getEntityRecordsTotalPages
+
+Returns the number of available pages for the given query.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `number | null`: number | null.
+
 ### getLastEntityDeleteError
 
 Returns the specified entity record's last delete error.
@@ -327,8 +475,7 @@ _Returns_
 
 ### getRawEntityRecord
 
-Returns the entity's record object by key,
-with its attributes mapped to their raw values.
+Returns the entity's record object by key, with its attributes mapped to their raw values.
 
 _Parameters_
 
@@ -343,8 +490,9 @@ _Returns_
 
 ### getRedoEdit
 
-Returns the next edit from the current undo offset
-for the entity records edits history, if any.
+> **Deprecated** since 6.3
+
+Returns the next edit from the current undo offset for the entity records edits history, if any.
 
 _Parameters_
 
@@ -356,9 +504,7 @@ _Returns_
 
 ### getReferenceByDistinctEdits
 
-Returns a new reference when edited values have changed. This is useful in
-inferring where an edit has been made between states by comparison of the
-return values using strict equality.
+Returns a new reference when edited values have changed. This is useful in inferring where an edit has been made between states by comparison of the return values using strict equality.
 
 _Usage_
 
@@ -369,12 +515,45 @@ _Usage_
 
 _Parameters_
 
--   _state_ `State`: Editor state.
+-   _state_ Editor state.
 
 _Returns_
 
 -   A value whose reference will change only when an edit occurs.
 
+### getRevision
+
+Returns a single, specific revision of a parent entity.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _revisionKey_ `EntityRecordKey`: The revision's key.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [entity kind]".
+
+_Returns_
+
+-   `RevisionRecord | Record< PropertyKey, never > | undefined`: Record.
+
+### getRevisions
+
+Returns an entity's revisions.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [Entity kind]".
+
+_Returns_
+
+-   `RevisionRecord[] | null`: Record.
+
 ### getThemeSupports
 
 Return theme supports data in the index.
@@ -389,8 +568,9 @@ _Returns_
 
 ### getUndoEdit
 
-Returns the previous edit from the current undo offset
-for the entity records edits history, if any.
+> **Deprecated** since 6.3
+
+Returns the previous edit from the current undo offset for the entity records edits history, if any.
 
 _Parameters_
 
@@ -400,6 +580,18 @@ _Returns_
 
 -   `Optional< any >`: The edit.
 
+### getUserPatternCategories
+
+Retrieve the registered user pattern categories.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Array< UserPatternCategory >`: User patterns category array.
+
 ### getUserQueryResults
 
 Returns all the users returned by a query ID.
@@ -411,12 +603,11 @@ _Parameters_
 
 _Returns_
 
--   `undefined< 'edit' >[]`: Users list.
+-   `ET.User< 'edit' >[]`: Users list.
 
 ### hasEditsForEntityRecord
 
-Returns true if the specified entity record has edits,
-and false otherwise.
+Returns true if the specified entity record has edits, and false otherwise.
 
 _Parameters_
 
@@ -431,15 +622,14 @@ _Returns_
 
 ### hasEntityRecords
 
-Returns true if records have been received for the given set of parameters,
-or false otherwise.
+Returns true if records have been received for the given set of parameters, or false otherwise.
 
 _Parameters_
 
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _query_ `GetRecordsHttpQuery`: Optional terms query.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
 
 _Returns_
 
@@ -461,8 +651,7 @@ _Returns_
 
 ### hasRedo
 
-Returns true if there is a next edit from the current undo offset
-for the entity records edits history, and false otherwise.
+Returns true if there is a next edit from the current undo offset for the entity records edits history, and false otherwise.
 
 _Parameters_
 
@@ -474,8 +663,7 @@ _Returns_
 
 ### hasUndo
 
-Returns true if there is a previous edit from the current undo offset
-for the entity records edits history, and false otherwise.
+Returns true if there is a previous edit from the current undo offset for the entity records edits history, and false otherwise.
 
 _Parameters_
 
@@ -519,9 +707,7 @@ _Returns_
 
 Determines if the returned preview is an oEmbed link fallback.
 
-WordPress can be configured to return a simple link to a URL if it is not embeddable.
-We need to be able to determine if a URL is embeddable or not, based on what we
-get back from the oEmbed preview API.
+WordPress can be configured to return a simple link to a URL if it is not embeddable. We need to be able to determine if a URL is embeddable or not, based on what we get back from the oEmbed preview API.
 
 _Parameters_
 
@@ -534,8 +720,7 @@ _Returns_
 
 ### isRequestingEmbedPreview
 
-Returns true if a request is in progress for embed preview data, or false
-otherwise.
+Returns true if a request is in progress for embed preview data, or false otherwise.
 
 _Parameters_
 
@@ -587,7 +772,7 @@ _Parameters_
 
 -   _kind_ `string`: Kind of the deleted entity.
 -   _name_ `string`: Name of the deleted entity.
--   _recordId_ `string`: Record ID of the deleted entity.
+-   _recordId_ `number|string`: Record ID of the deleted entity.
 -   _query_ `?Object`: Special query parameters for the DELETE API call.
 -   _options_ `[Object]`: Delete options.
 -   _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
@@ -595,14 +780,13 @@ _Parameters_
 
 ### editEntityRecord
 
-Returns an action object that triggers an
-edit to an entity record.
+Returns an action object that triggers an edit to an entity record.
 
 _Parameters_
 
 -   _kind_ `string`: Kind of the edited entity record.
 -   _name_ `string`: Name of the edited entity record.
--   _recordId_ `number`: Record ID of the edited entity record.
+-   _recordId_ `number|string`: Record ID of the edited entity record.
 -   _edits_ `Object`: The edits.
 -   _options_ `Object`: Options for the edit.
 -   _options.undoIgnore_ `[boolean]`: Whether to ignore the edit in undo history or not.
@@ -611,6 +795,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.
@@ -623,14 +820,41 @@ _Parameters_
 -   _query_ `?Object`: Query Object.
 -   _invalidateCache_ `?boolean`: Should invalidate query caches.
 -   _edits_ `?Object`: Edits to reset.
+-   _meta_ `?Object`: Meta information about pagination.
 
 _Returns_
 
 -   `Object`: Action object.
 
+### receiveNavigationFallbackId
+
+Returns an action object signalling that the fallback Navigation Menu id has been received.
+
+_Parameters_
+
+-   _fallbackId_ `integer`: the id of the fallback Navigation Menu
+
+_Returns_
+
+-   `Object`: Action object.
+
+### receiveRevisions
+
+Action triggered to receive revision items.
+
+_Parameters_
+
+-   _kind_ `string`: Kind of the received entity record revisions.
+-   _name_ `string`: Name of the received entity record revisions.
+-   _recordKey_ `number|string`: The key of the entity record whose revisions you want to fetch.
+-   _records_ `Array|Object`: Revisions received.
+-   _query_ `?Object`: Query Object.
+-   _invalidateCache_ `?boolean`: Should invalidate query caches.
+-   _meta_ `?Object`: Meta information about pagination.
+
 ### receiveThemeSupports
 
-> **Deprecated** since WP 5.9, this is not useful anymore, use the selector direclty.
+> **Deprecated** since WP 5.9, this is not useful anymore, use the selector directly.
 
 Returns an action object used in signalling that the index has been received.
 
@@ -654,8 +878,7 @@ _Returns_
 
 ### redo
 
-Action triggered to redo the last undoed
-edit to an entity record, if any.
+Action triggered to redo the last undoed edit to an entity record, if any.
 
 ### saveEditedEntityRecord
 
@@ -666,7 +889,7 @@ _Parameters_
 -   _kind_ `string`: Kind of the entity.
 -   _name_ `string`: Name of the entity.
 -   _recordId_ `Object`: ID of the record.
--   _options_ `Object`: Saving options.
+-   _options_ `Object=`: Saving options.
 
 ### saveEntityRecord
 
@@ -684,7 +907,6 @@ _Parameters_
 
 ### undo
 
-Action triggered to undo the last edit to
-an entity record, if any.
+Action triggered to undo the last edit to an entity record, if any.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/core-data/src/actions.js) -->
diff --git a/docs/reference-guides/filters/README.md b/docs/reference-guides/filters/README.md
index 66cac472ecaa79..676850a5501595 100644
--- a/docs/reference-guides/filters/README.md
+++ b/docs/reference-guides/filters/README.md
@@ -4,4 +4,4 @@
 
 There are two types of hooks: [Actions](https://developer.wordpress.org/plugins/hooks/actions/) and [Filters](https://developer.wordpress.org/plugins/hooks/filters/). In addition to PHP actions and filters, WordPress also provides a mechanism for registering and executing hooks in JavaScript. This functionality is also available on npm as the [@wordpress/hooks](https://www.npmjs.com/package/@wordpress/hooks) package, for general purpose use.
 
-You can also learn more about both APIs: [PHP](https://codex.wordpress.org/Plugin_API/) and [JavaScript](/packages/hooks/README.md).
+You can also learn more about both APIs: [PHP](https://developer.wordpress.org/reference/) and [JavaScript](/packages/hooks/README.md).
diff --git a/docs/reference-guides/filters/autocomplete-filters.md b/docs/reference-guides/filters/autocomplete-filters.md
index 1b00710b7b0ba7..85581f62e4af01 100644
--- a/docs/reference-guides/filters/autocomplete-filters.md
+++ b/docs/reference-guides/filters/autocomplete-filters.md
@@ -8,8 +8,7 @@ The `Autocomplete` component found in `@wordpress/block-editor` applies this fil
 
 Here is an example of using the `editor.Autocomplete.completers` filter to add an acronym completer. You can find full documentation for the autocompleter interface with the `Autocomplete` component in the `@wordpress/components` package.
 
-{% codetabs %}
-{% JSX %}
+
 
 ```jsx
 // Our completer
@@ -45,48 +44,3 @@ wp.hooks.addFilter(
 	appendAcronymCompleter
 );
 ```
-
-{% Plain %}
-
-```js
-// Our completer
-var acronymCompleter = {
-	name: 'acronyms',
-	triggerPrefix: '::',
-	options: [
-		{ letters: 'FYI', expansion: 'For Your Information' },
-		{ letters: 'AFAIK', expansion: 'As Far As I Know' },
-		{ letters: 'IIRC', expansion: 'If I Recall Correctly' },
-	],
-	getOptionKeywords: function ( abbr ) {
-		var expansionWords = abbr.expansion.split( /\s+/ );
-		return [ abbr.letters ].concat( expansionWords );
-	},
-	getOptionLabel: function ( acronym ) {
-		return acronym.letters;
-	},
-	getOptionCompletion: function ( abbr ) {
-		return wp.element.createElement(
-			'abbr',
-			{ title: abbr.expansion },
-			abbr.letters
-		);
-	},
-};
-
-// Our filter function
-function appendAcronymCompleter( completers, blockName ) {
-	return blockName === 'my-plugin/foo'
-		? completers.concat( acronymCompleter )
-		: completers;
-}
-
-// Adding the filter
-wp.hooks.addFilter(
-	'editor.Autocomplete.completers',
-	'my-plugin/autocompleters/acronyms',
-	appendAcronymCompleter
-);
-```
-
-{% end %}
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index 823248bb451bdd..f1952ef9bf86f8 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -1,61 +1,115 @@
-# Block Hooks
+# Block Filters
 
-To modify the behavior of existing blocks, WordPress exposes several APIs.
+WordPress exposes several APIs that allow you to modify the behavior of existing blocks.
 
 ## Registration
 
-The following filters are available to extend the settings for blocks during their registration.
+Blocks in WordPress are typically registered on both the server and client side using `block.json`` metadata. You can use the following filters to modify or extend block settings during their registration on the server with PHP and on the client with JavaScript. To learn more, refer to the [block registration](https://developer.wordpress.org/block-editor/getting-started/fundamentals/registration-of-a-block/) guide.
 
 ### `block_type_metadata`
 
-Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows applying modifications before the metadata gets processed.
+Filters the raw metadata loaded from the `block.json` file when registering a block type on the server with PHP. It allows modifications to be applied before the metadata gets processed.
 
-The filter takes one param:
+The callback function for this filter receives one parameter:
 
--   `$metadata` (`array`) – metadata loaded from `block.json` for registering a block type.
+- `$metadata` (`array`): Metadata loaded from `block.json` for registering a block type.
 
-_Example_:
+The following example sets the `apiVersion` of all blocks to `2`.
 
 ```php
-<?php
-
-function filter_metadata_registration( $metadata ) {
-	$metadata['apiVersion'] = 1;
+function example_filter_metadata_registration( $metadata ) {
+	$metadata['apiVersion'] = 2;
 	return $metadata;
 };
-add_filter( 'block_type_metadata', 'filter_metadata_registration' );
+add_filter( 'block_type_metadata', 'example_filter_metadata_registration' );
+```
+
+Here's a more robust example that disables background color and gradient support for Heading blocks. The `block_type_metadata` filter is excellent for [curating the Editor experience](https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/). 
 
-register_block_type( __DIR__ );
+```php
+function example_disable_heading_background_color_and_gradients( $metadata ) {
+	
+	// Only apply the filter to Heading blocks.
+	if ( ! isset( $metadata['name'] ) || 'core/heading' !== $metadata['name'] ) {
+		return $metadata;
+	}
+
+	// Check if 'supports' key exists.
+	if ( isset( $metadata['supports'] ) && isset( $metadata['supports']['color'] ) ) {
+		
+		// Remove Background color and Gradients support.
+		$metadata['supports']['color']['background'] = false;
+		$metadata['supports']['color']['gradients']  = false;
+	}
+
+	return $metadata;
+}
+add_filter( 'block_type_metadata', 'example_disable_heading_background_color_and_gradients' );
 ```
 
 ### `block_type_metadata_settings`
 
-Filters the settings determined from the processed block type metadata. It makes it possible to apply custom modifications using the block metadata that isn’t handled by default.
+Filters the settings determined from the processed block type metadata. It makes it possible to apply custom modifications using the block metadata that isn't handled by default.
 
-The filter takes two params:
+The callback function for this filter receives two parameters:
 
--   `$settings` (`array`) – Array of determined settings for registering a block type.
--   `$metadata` (`array`) – Metadata loaded from the `block.json` file.
+-   `$settings` (`array`): Array of determined settings for registering a block type.
+-   `$metadata` (`array`): Metadata loaded from the `block.json` file.
 
-_Example:_
+The following example increases the `apiVersion` for all blocks by `1`.
 
 ```php
-function filter_metadata_registration( $settings, $metadata ) {
+function example_filter_metadata_registration( $settings, $metadata ) {
 	$settings['api_version'] = $metadata['apiVersion'] + 1;
 	return $settings;
 };
-add_filter( 'block_type_metadata_settings', 'filter_metadata_registration', 10, 2 );
+add_filter( 'block_type_metadata_settings', 'example_filter_metadata_registration', 10, 2 );
+```
+
+### `register_block_type_args`
+
+Filters a block's arguments array (`$args`) right before the block type is officially registered on the server.
+
+The callback function for this filter receives two parameters:
 
-register_block_type( __DIR__ );
+- `$args` (`array`): Array of arguments for registering a block type.
+- `$block_type` (`string`): Block type name including namespace.
+
+`register_block_type_args` is the most low-level PHP filter available, and it will work for every block registered on the server. All settings defined on the server are propagated to the client with higher priority than those set in the client.
+
+The following code will disable the color controls for Paragraph, Heading, List, and List Item blocks.
+
+```php
+function example_disable_color_for_specific_blocks( $args, $block_type ) {
+
+	// List of block types to modify.
+	$block_types_to_modify = [
+		'core/paragraph',
+		'core/heading',
+		'core/list',
+		'core/list-item'
+	];
+
+	// Check if the current block type is in the list.
+	if ( in_array( $block_type, $block_types_to_modify, true ) ) {
+		// Disable color controls.
+		$args['supports']['color'] = array(
+			'text'       => false,
+			'background' => false,
+			'link'       => false,
+		);
+	}
+
+	return $args;
+}
+add_filter( 'register_block_type_args', 'example_disable_color_for_specific_blocks', 10, 2 );
 ```
 
 ### `blocks.registerBlockType`
 
 Used to filter the block settings when registering the block on the client with JavaScript. It receives the block settings, the name of the registered block, and either null or the deprecated block settings (when applied to a registered deprecation) as arguments. This filter is also applied to each of a block's deprecated settings.
 
-_Example:_
-
-Ensure that List blocks are saved with the canonical generated class name (`wp-block-list`):
+The following example ensures that List blocks are saved with the canonical generated class name (`wp-block-list`):
 
 ```js
 function addListBlockClassName( settings, name ) {
@@ -63,11 +117,13 @@ function addListBlockClassName( settings, name ) {
 		return settings;
 	}
 
-	return lodash.assign( {}, settings, {
-		supports: lodash.assign( {}, settings.supports, {
+	return {
+		...settings,
+		supports: {
+			...settings.supports,
 			className: true,
-		} ),
-	} );
+		},
+	};
 }
 
 wp.hooks.addFilter(
@@ -77,33 +133,100 @@ wp.hooks.addFilter(
 );
 ```
 
-## Block Editor
+## Front end
+
+The following PHP filters are available to change the output of a block on the front end.
+
+### `render_block`
+
+Filters the front-end content of any block. This filter has no impact on the behavior of blocks in the Editor. 
+
+The callback function for this filter receives three parameters:
+
+- `$block_content` (`string`): The block content.
+- `$block` (`array`): The full block, including name and attributes.
+- `$instance` (`WP_Block`): The block instance.
+
+In the following example, the class `example-class` is added to all Paragraph blocks on the front end. Here the [HTML API](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/) is used to easily add the class instead of relying on regex.
+
+```php
+function example_add_custom_class_to_paragraph_block( $block_content, $block ) {
+	
+	// Check if the block is a Paragraph block.
+	if ( 'core/paragraph' === $block['blockName'] ) {
+	   
+		// Add the custom class to the block content using the HTML API.
+		$processor = new WP_HTML_Tag_Processor( $block_content );
+		
+		if ( $processor->next_tag( 'p' ) ) {
+			$processor->add_class( 'example-class' );
+		}
+
+		return $processor->get_updated_html();
+	}
+
+	return $block_content;
+}
+add_filter( 'render_block', 'example_add_custom_class_to_paragraph_block', 10, 2 );
+```
+
+### `render_block_{namespace/block}`
+
+Filters the front-end content of the defined block. This is just a simpler form of `render_block` when you only need to modify a specific block type.
+
+The callback function for this filter receives three parameters:
+
+- `$block_content` (`string`): The block content.
+- `$block` (`array`): The full block, including name and attributes.
+- `$instance` (`WP_Block`): The block instance.
+
+In the following example, the class `example-class` is added to all Paragraph blocks on the front end. Notice that compared to the `render_block` example above, you no longer need to check the block type before modifying the content. Again, the [HTML API](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/) is used instead of regex.
+
+```php
+function example_add_custom_class_to_paragraph_block( $block_content, $block ) {
+	   
+	// Add the custom class to the block content using the HTML API.
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+	
+	if ( $processor->next_tag( 'p' ) ) {
+		$processor->add_class( 'example-class' );
+	}
+
+	return $processor->get_updated_html();
+}
+add_filter( 'render_block_core/paragraph', 'example_add_custom_class_to_paragraph_block', 10, 2 );
+```
+
+## Editor
 
-The following filters are available to change the behavior of blocks while editing in the block editor.
+The following JavaScript filters are available to change the behavior of blocks while editing in the Editor.
 
 ### `blocks.getSaveElement`
 
-A filter that applies to the result of a block's `save` function. This filter is used to replace or extend the element, for example using `wp.element.cloneElement` to modify the element's props or replace its children, or returning an entirely new element.
+A filter that applies to the result of a block's `save` function. This filter is used to replace or extend the element, for example using `React.cloneElement` to modify the element's props, replace its children, or return an entirely new element.
 
-The filter's callback receives an element, a block type definition object and the block attributes as arguments. It should return an element.
+The callback function for this filter receives three parameters:
 
-_Example:_
+- `element` (`Object`): The element to be modified and returned.
+- `blockType` (`Object`): A block-type definition object. 
+- `attributes` (`Object`): The block's attributes. 
 
-Wraps a cover block into an outer container.
+The following example wraps a Cover block in an outer container `div`.
 
 ```js
 function wrapCoverBlockInContainer( element, blockType, attributes ) {
-	// skip if element is undefined
+	
+	// Skip if element is undefined.
 	if ( ! element ) {
 		return;
 	}
 
-	// only apply to cover blocks
+	// Only apply to Cover blocks.
 	if ( blockType.name !== 'core/cover' ) {
 		return element;
 	}
 
-	// return the element wrapped in a div
+	// Return the element wrapped in a div.
 	return <div className="cover-block-wrapper">{ element }</div>;
 }
 
@@ -114,19 +237,24 @@ wp.hooks.addFilter(
 );
 ```
 
-#### `blocks.getSaveContent.extraProps`
+### `blocks.getSaveContent.extraProps`
 
-A filter that applies to all blocks returning a WP Element in the `save` function. This filter is used to add extra props to the root element of the `save` function. For example: to add a className, an id, or any valid prop for this element.
+A filter that applies to all blocks returning a WP Element in the `save` function. This filter is used to add extra props to the root element of the `save` function. For example, you could add a className, an id, or any valid prop for this element.
 
-The filter receives the current `save` element's props, a block type and the block attributes as arguments. It should return a props object.
+The callback function for this filter receives three parameters:
 
-_Example:_
+- `props` (`Object`): The current `save` element's props to be modified and returned.
+- `blockType` (`Object`): A block-type definition object. 
+- `attributes` (`Object`): The block's attributes. 
 
-Adding a background by default to all blocks.
+The following example adds a red background by default to all blocks.
 
 ```js
 function addBackgroundColorStyle( props ) {
-	return lodash.assign( props, { style: { backgroundColor: 'red' } } );
+	return {
+		...props,
+		style: { backgroundColor: 'red' },
+	};
 }
 
 wp.hooks.addFilter(
@@ -136,7 +264,7 @@ wp.hooks.addFilter(
 );
 ```
 
-_Note:_ A [block validation](/docs/reference-guides/block-api/block-edit-save.md#validation) error will occur if this filter modifies existing content the next time the post is edited. The editor verifies that the content stored in the post matches the content output by the `save()` function.
+_Note:_ A [block validation](/docs/reference-guides/block-api/block-edit-save.md#validation) error will occur if this filter modifies existing content the next time the post is edited. The Editor verifies that the content stored in the post matches the content output by the `save()` function.
 
 To avoid this validation error, use `render_block` server-side to modify existing post content instead of this filter. See [render_block documentation](https://developer.wordpress.org/reference/hooks/render_block/).
 
@@ -144,15 +272,13 @@ To avoid this validation error, use `render_block` server-side to modify existin
 
 Generated HTML classes for blocks follow the `wp-block-{name}` nomenclature. This filter allows to provide an alternative class name.
 
-_Example:_
-
 ```js
-// Our filter function
+// Our filter function.
 function setBlockCustomClassName( className, blockName ) {
 	return blockName === 'core/code' ? 'my-plugin-code' : className;
 }
 
-// Adding the filter
+// Adding the filter.
 wp.hooks.addFilter(
 	'blocks.getBlockDefaultClassName',
 	'my-plugin/set-block-custom-class-name',
@@ -168,81 +294,92 @@ Used to filter an individual transform result from block transformation. All of
 
 Called immediately after the default parsing of a block's attributes and before validation to allow a plugin to manipulate attribute values in time for validation and/or the initial values rendering of the block in the editor.
 
+The callback function for this filter accepts 4 parameters:
+- `blockAttributes` (`Object`): All block attributes.
+- `blockType` (`Object`): The block type.
+- `innerHTML` (`string`): Raw block content.
+- `attributes` (`object`): Known block attributes (from delimiters).
+
+In the example below, we use the `blocks.getBlockAttributes` filter to lock the position of all paragraph blocks on a page.
+
+```js
+// Our filter function
+function lockParagraphs( blockAttributes, blockType, innerHTML, attributes  ) {
+    if('core/paragraph' === blockType.name) {
+        blockAttributes['lock'] = {move: true}
+    }
+    return blockAttributes;
+}
+
+// Add the filter
+wp.hooks.addFilter(
+    'blocks.getBlockAttributes',
+    'my-plugin/lock-paragraphs',
+    lockParagraphs
+);
+```
+
 ### `editor.BlockEdit`
 
 Used to modify the block's `edit` component. It receives the original block `BlockEdit` component and returns a new wrapped component.
 
-_Example:_
-
-{% codetabs %}
-{% JSX %}
+The following example adds a new Inspector panel for all blocks.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
-const { Fragment } = wp.element;
 const { InspectorControls } = wp.blockEditor;
 const { PanelBody } = wp.components;
 
-const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
+const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
 		return (
-			<Fragment>
-				<BlockEdit { ...props } />
+			<>
+				<BlockEdit key="edit" { ...props } />
 				<InspectorControls>
 					<PanelBody>My custom control</PanelBody>
 				</InspectorControls>
-			</Fragment>
+			</>
 		);
 	};
-}, 'withInspectorControl' );
+}, 'withMyPluginControls' );
 
 wp.hooks.addFilter(
 	'editor.BlockEdit',
 	'my-plugin/with-inspector-controls',
-	withInspectorControls
+	withMyPluginControls
 );
 ```
 
-{% Plain %}
+Note that as this hook is run for _all blocks_, consuming it has the potential for performance regressions, particularly around block selection metrics.
+
+To mitigate this, consider whether any work you perform can be altered to run only under certain conditions.
+
+For example, suppose you are adding components that only need to render when the block is _selected_. In that case, you can use the block's "selected" state (`props.isSelected`) to conditionalize your rendering.
+
+The following example adds a new Inspector panel for all blocks, but only when a block is selected.
 
 ```js
-var el = wp.element.createElement;
-
-var withInspectorControls = wp.compose.createHigherOrderComponent( function (
-	BlockEdit
-) {
-	return function ( props ) {
-		return el(
-			wp.element.Fragment,
-			{},
-			el( BlockEdit, props ),
-			el(
-				wp.blockEditor.InspectorControls,
-				{},
-				el( wp.components.PanelBody, {}, 'My custom control' )
-			)
+const withMyPluginControls = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ props.isSelected && (
+					<InspectorControls>
+						<PanelBody>My custom control</PanelBody>
+					</InspectorControls>
+				) }
+			</>
 		);
 	};
-},
-'withInspectorControls' );
-
-wp.hooks.addFilter(
-	'editor.BlockEdit',
-	'my-plugin/with-inspector-controls',
-	withInspectorControls
-);
+}, 'withMyPluginControls' );
 ```
 
-{% end %}
-
-#### `editor.BlockListBlock`
+### `editor.BlockListBlock`
 
 Used to modify the block's wrapper component containing the block's `edit` component and all toolbars. It receives the original `BlockListBlock` component and returns a new wrapped component.
 
-_Example:_
-
-{% codetabs %}
-{% JSX %}
+The following example adds a unique class name to all blocks.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -268,39 +405,7 @@ wp.hooks.addFilter(
 );
 ```
 
-{% Plain %}
-
-```js
-var el = wp.element.createElement;
-
-var withClientIdClassName = wp.compose.createHigherOrderComponent( function (
-	BlockListBlock
-) {
-	return function ( props ) {
-		var newProps = lodash.assign( {}, props, {
-			className: 'block-' + props.clientId,
-		} );
-
-		return el( BlockListBlock, newProps );
-	};
-},
-'withClientIdClassName' );
-
-wp.hooks.addFilter(
-	'editor.BlockListBlock',
-	'my-plugin/with-client-id-class-name',
-	withClientIdClassName
-);
-```
-
-{% end %}
-
-Adding new properties to the block's wrapper component can be achieved by adding them to the `wrapperProps` property of the returned component.
-
-_Example:_
-
-{% codetabs %}
-{% JSX %}
+You can add new properties to the block's wrapper component using the `wrapperProps` property of the returned component as shown in the following example.
 
 ```js
 const { createHigherOrderComponent } = wp.compose;
@@ -313,6 +418,7 @@ const withMyWrapperProp = createHigherOrderComponent( ( BlockListBlock ) => {
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
 }, 'withMyWrapperProp' );
+
 wp.hooks.addFilter(
 	'editor.BlockListBlock',
 	'my-plugin/with-my-wrapper-prop',
@@ -320,41 +426,31 @@ wp.hooks.addFilter(
 );
 ```
 
-{% Plain %}
+### `editor.postContentBlockTypes`
+
+Used to modify the list of blocks that should be enabled even when used inside a locked template. Any block that saves data to a post should be added here. An example of this is the Post Featured Image block. Often used in templates, this block should still allow selecting the image even when the template is locked.
+
+The following example enables the fictitious block `namespace/example`.
 
 ```js
-var el = wp.element.createElement;
-var hoc = wp.compose.createHigherOrderComponent;
-
-var withMyWrapperProp = hoc( function ( BlockListBlock ) {
-	return function ( props ) {
-		var newProps = {
-			...props,
-			wrapperProps: {
-				...props.wrapperProps,
-				'data-my-property': 'the-value',
-			},
-		};
-		return el( BlockListBlock, newProps );
-	};
-}, 'withMyWrapperProp' );
+const addExampleBlockToPostContentBlockTypes = ( blockTypes ) => {
+	return [ ...blockTypes, 'namespace/example' ];
+};
+
 wp.hooks.addFilter(
-	'editor.BlockListBlock',
-	'my-plugin/with-my-wrapper-prop',
-	withMyWrapperProp
+	'editor.postContentBlockTypes',
+	'my-plugin/post-content-block-types',
+	addExampleBlockToPostContentBlockTypes
 );
 ```
 
-{% end %}
-
 ## Removing Blocks
 
 ### Using a deny list
 
-Adding blocks is easy enough, removing them is as easy. Plugin or theme authors have the possibility to "unregister" blocks.
+Adding blocks is easy enough, and removing them is as easy. Plugin or theme authors can "unregister" blocks using a deny list in JavaScript.
 
-{% codetabs %}
-{% JSX %}
+Place the following code in a `my-plugin.js` file.
 
 ```js
 // my-plugin.js
@@ -366,18 +462,7 @@ domReady( function () {
 } );
 ```
 
-{% Plain %}
-
-```js
-// my-plugin.js
-wp.domReady( function () {
-	wp.blocks.unregisterBlockType( 'core/verse' );
-} );
-```
-
-{% end %}
-
-and load this script in the Editor
+Then, load this script in the Editor using the following function.
 
 ```php
 <?php
@@ -393,7 +478,9 @@ function my_plugin_deny_list_blocks() {
 add_action( 'enqueue_block_editor_assets', 'my_plugin_deny_list_blocks' );
 ```
 
-**Important:** When unregistering a block, there can be a [race condition](https://en.wikipedia.org/wiki/Race_condition) on which code runs first: registering the block, or unregistering the block. You want your unregister code to run last. The way to do that is specify the component that is registering the block as a dependency, in this case `wp-edit-post`. Additionally, using `wp.domReady()` ensures the unregister code runs once the dom is loaded.
+<div class="callout callout-warning">
+	When unregistering a block, there can be a <a href="https://en.wikipedia.org/wiki/Race_condition">race condition</a> on which code runs first: registering the block or unregistering the block. You want your unregister code to run last. To do this, you must specify the component that is registering the block as a dependency, in this case, <code>wp-edit-post</code>. Additionally, using <code>wp.domReady()</code> ensures the unregister code runs once the dom is loaded.
+</div>
 
 ### Using an allow list
 
@@ -420,37 +507,37 @@ wp.blocks.getBlockTypes().forEach( function ( blockType ) {
 
 ### `allowed_block_types_all`
 
-_**Note:** Before WordPress 5.8 known as `allowed_block_types`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>allowed_block_types</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>allowed_block_types</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
 
-On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types_all` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided param `$editor_context` to filter block types based on its content.
+On the server, you can filter the list of blocks shown in the inserter using the `allowed_block_types_all` filter. You can return either true (all block types supported), false (no block types supported), or an array of block type names to allow. You can also use the second provided parameter `$editor_context` to filter block types based on their content.
 
 ```php
 <?php
 // my-plugin.php
-
-function filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
+function example_filter_allowed_block_types_when_post_provided( $allowed_block_types, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		return array( 'core/paragraph', 'core/heading' );
 	}
 	return $allowed_block_types;
 }
-
-add_filter( 'allowed_block_types_all', 'filter_allowed_block_types_when_post_provided', 10, 2 );
+add_filter( 'allowed_block_types_all', 'example_filter_allowed_block_types_when_post_provided', 10, 2 );
 ```
 
 ## Managing block categories
 
 ### `block_categories_all`
 
-_**Note:** Before WordPress 5.8 known as `block_categories`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>block_categories</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>block_categories</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
 
-It is possible to filter the list of default block categories using the `block_categories_all` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during blocks registration and to group blocks in the inserter. You can also use the second provided param `$editor_context` to filter the based on its content.
+It is possible to filter the list of default block categories using the `block_categories_all` filter. You can do it on the server by implementing a function which returns a list of categories. It is going to be used during block registration and to group blocks in the inserter. You can also use the second provided parameter `$editor_context` to filter the based on its content.
 
 ```php
-<?php
 // my-plugin.php
-
-function filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
+function example_filter_block_categories_when_post_provided( $block_categories, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		array_push(
 			$block_categories,
@@ -463,8 +550,7 @@ function filter_block_categories_when_post_provided( $block_categories, $editor_
 	}
 	return $block_categories;
 }
-
-add_filter( 'block_categories_all', 'filter_block_categories_when_post_provided', 10, 2 );
+add_filter( 'block_categories_all', 'example_filter_block_categories_when_post_provided', 10, 2 );
 ```
 
 ### `wp.blocks.updateCategory`
@@ -473,11 +559,11 @@ You can also display an icon with your block category by setting an `icon` attri
 
 You can also set a custom icon in SVG format. To do so, the icon should be rendered and set on the frontend, so it can make use of WordPress SVG, allowing mobile compatibility and making the icon more accessible.
 
-To set an SVG icon for the category shown in the previous example, add the following example JavaScript code to the editor calling `wp.blocks.updateCategory` e.g:
+To set an SVG icon for the category shown in the previous example, add the following example JavaScript code to the Editor calling `wp.blocks.updateCategory` e.g:
 
 ```js
 ( function () {
-	var el = wp.element.createElement;
+	var el = React.createElement;
 	var SVG = wp.primitives.SVG;
 	var circle = el( 'circle', {
 		cx: 10,
diff --git a/docs/reference-guides/filters/editor-filters.md b/docs/reference-guides/filters/editor-filters.md
index c65612f2083b97..08d1c5ddb8a33c 100644
--- a/docs/reference-guides/filters/editor-filters.md
+++ b/docs/reference-guides/filters/editor-filters.md
@@ -1,23 +1,166 @@
 # Editor Hooks
 
-To modify the behavior of the editor experience, WordPress exposes several APIs.
+WordPress exposes several APIs that allow you to modify the editor experience.
+
+## Editor settings
+
+One of the most common ways to modify the Editor is through the [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) PHP filter, which is applied before settings are sent to the initialized Editor. This filter allows plugin and theme authors extensive control over how the Editor behaves.
+
+<div class="callout callout-warning">
+	Before WordPress 5.8, this hook was known as <code>block_editor_settings</code>, which is now deprecated. If you need to support older versions of WordPress, you might need a way to detect which filter should be used. You can check if <code>block_editor_settings</code> is safe to use by seeing if the <code>WP_Block_Editor_Context</code> class exists, which was introduced in 5.8.
+</div>
+
+The `block_editor_settings_all` hook passes two parameters to the callback function:
+
+- `$settings` – An array of configurable settings for the Editor.
+- `$context` – An instance of [`WP_Block_Editor_Context`](https://developer.wordpress.org/reference/classes/wp_block_editor_context/), an object that contains information about the current Editor.
+
+The following example modifies the maximum upload file size. Add this to a plugin or your theme's `functions.php` file to test it.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_filter_block_editor_settings_when_post_provided', 10, 2 );
+
+function example_filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		$editor_settings['maxUploadFileSize'] = 12345;
+	}
+	return $editor_settings;
+}
+```
+
+There are dozens of editor settings, too many to list in this documentation article, but here are a few examples of what you can do with the `block_editor_settings_all` filter.
+
+<div class="callout callout-info">
+	To view all available settings, open the Editor and then open the console in your browser's <a href="https://developer.wordpress.org/advanced-administration/debug/debug-javascript/#open-the-developer-tools">Developer Tools</a>. Enter the command <code>wp.data.select( 'core/block-editor' ).getSettings()</code> to display the current values for all Editor settings.
+</div>
+
+### Restrict code editor access
+
+The `codeEditingEnabled`, which defaults to `true`, controls whether the user can access the code editor **in addition** to the visual editor. There may be instances where you don't want certain users to be able to access this view.
+
+If this setting is set to `false`, the user will not be able to switch between visual and code editor. The option in the settings menu will not be available, and the keyboard shortcut for switching editor types will not fire. Here's an example:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
+
+function example_restrict_code_editor( $settings ) {
+	$can_active_plugins = current_user_can( 'activate_plugins' );
+
+	// Disable the Code Editor for users that cannot activate plugins (Administrators).
+	if ( ! $can_active_plugins ) {
+		$settings[ 'codeEditingEnabled' ] = false;
+	}
+
+	return $settings;
+}
+```
+
+### Restrict visual editor access
+
+Similar to the `codeEditingEnabled` setting, `richEditingEnabled` allows you to control who can access the visual editor. If `true`, the user can edit the content using the visual editor.
+
+The setting defaults to the returned value of the [`user_can_richedit`](https://developer.wordpress.org/reference/functions/user_can_richedit/) function. It checks whether the user can access the visual editor and whether the user's browser supports it.
+
+### Set a default image size
+
+Images are set to the `large` image size by default in the Editor. You can modify this using the `imageDefaultSize` setting, which is especially useful if you have configured your own custom image sizes. The following example changes the default image size to `medium`.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_set_default_image_size' );
+
+function example_set_default_image_size( $settings ) {
+	$settings['imageDefaultSize'] = 'medium';
+	return $settings;
+}
+```
+
+### Disable Openverse
+
+The [Openverse](https://openverse.org/) integration is enabled for all WordPress sites by default and is controlled by the `enableOpenverseMediaCategory` setting. To disable Openverse, apply the following filter:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_openverse' );
+
+function example_disable_openverse( $settings ) {
+	$settings['enableOpenverseMediaCategory'] = false;
+	return $settings;
+}
+```
+
+### Disable the Font Library
+
+The Font Library allows users to install new fonts on their site, which is enabled by default and is controlled by the `fontLibraryEnabled` setting. To disable the Font Library, apply the following filter:
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_font_library' );
+
+function example_disable_font_library( $settings ) {
+	$settings['fontLibraryEnabled'] = false;
+	return $settings;
+}
+```
+
+### Disable block inspector tabs
+
+Most blocks display [two tabs](https://make.wordpress.org/core/2023/03/07/introduction-of-block-inspector-tabs/) in the Inspector, one for Settings and another for Styles. You can disable these tabs using the `blockInspectorTabs` setting.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_inspector_tabs_by_default' );
+
+function example_disable_inspector_tabs_by_default( $settings ) {
+	$settings['blockInspectorTabs'] = array( 'default' => false );
+	return $settings;
+}
+```
+
+You can also modify which blocks have inspector tabs. Here's an example that disables tabs for a specific block.
+
+```php
+add_filter( 'block_editor_settings_all', 'example_disable_tabs_for_my_custom_block' );
+
+function example_disable_tabs_for_my_custom_block( $settings ) {
+	$current_tab_settings = _wp_array_get( $settings, array( 'blockInspectorTabs' ), array() );
+	$settings['blockInspectorTabs'] = array_merge(
+		$current_tab_settings,
+		array( 'my-plugin/my-custom-block' => false )
+	);
+
+	return $settings;
+}
+```
+
+## Block Directory
+
+The Block Directory allows users to install new block plugins directly in the Editor from the WordPress.org [Plugin Directory](https://wordpress.org/plugins/browse/block/). You can disable this functionality by removing the action that enqueues it, which is `wp_enqueue_editor_block_directory_assets`. To do so, use [`remove_action`](https://developer.wordpress.org/reference/functions/remove_action/) like this:
+
+```php
+remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+```
+
+## Block patterns
+
+Remote patterns, such as those from the WordPress.org [Pattern Directory](https://wordpress.org/patterns/), are available to users by default in the Editor. This functionality is controlled by `should_load_remote_block_patterns`, which defaults to `true`. You can disable remote patterns by setting the filter to false (`__return_false`).
+
+```php
+add_filter( 'should_load_remote_block_patterns', '__return_false' );
+```
 
 ## Editor features
 
-The following filters are available to extend the editor features.
+The following filters are available to extend features in the Editor.
 
 ### `editor.PostFeaturedImage.imageSize`
 
-Used to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'`, and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the classic editor.
-
-_Example:_
+You can use this filter to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'` and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the Classic Editor.
 
 ```js
-var withImageSize = function ( size, mediaId, postId ) {
+import { addFilter } from '@wordpress/hooks';
+
+const withImageSize = function ( size, mediaId, postId ) {
 	return 'large';
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'editor.PostFeaturedImage.imageSize',
 	'my-plugin/with-image-size',
 	withImageSize
@@ -26,16 +169,16 @@ wp.hooks.addFilter(
 
 ### `editor.PostPreview.interstitialMarkup`
 
-Filters the interstitial message shown when generating previews.
-
-_Example:_
+You can also filter the interstitial message shown when generating previews. Here's an example:
 
 ```js
-var customPreviewMessage = function () {
+import { addFilter } from '@wordpress/hooks';
+
+const customPreviewMessage = function () {
 	return '<b>Post preview is being generated!</b>';
 };
 
-wp.hooks.addFilter(
+addFilter(
 	'editor.PostPreview.interstitialMarkup',
 	'my-plugin/custom-preview-message',
 	customPreviewMessage
@@ -44,13 +187,13 @@ wp.hooks.addFilter(
 
 ### `media.crossOrigin`
 
-Used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e `<audio>` , `<img>` , `<link>` , `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information the `crossOrigin` attribute, its values and how it applies to each element.
-
-One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`.
+This filter is used to set or modify the `crossOrigin` attribute for foreign-origin media elements (i.e., `<audio>`, `<img>`, `<link>`, `<script>`, `<video>`). See this [article](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) for more information on the `crossOrigin` attribute, its values, and how it applies to each element.
 
-_Example:_
+One example of it in action is in the Image block's transform feature to allow cross-origin images to be used in a `<canvas>`. Here's an example:
 
 ```js
+import { addFilter } from '@wordpress/hooks';
+
 addFilter(
 	'media.crossOrigin',
 	'my-plugin/with-cors-media',
@@ -66,112 +209,39 @@ addFilter(
 );
 ```
 
-## Editor settings
-
-### `block_editor_settings_all`
-
-_**Note:** Before WordPress 5.8 known as `block_editor_settings`. In the case when you want to support older versions of WordPress you might need a way to detect which filter should be used – the deprecated one vs the new one. The recommended way to proceed is to check if the `WP_Block_Editor_Context` class exists._
-
-This is a PHP filter which is applied before sending settings to the WordPress block editor.
-
-You may find details about this filter [on its WordPress Code Reference page](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/).
-
-The filter will send any setting to the initialized Editor, which means any editor setting that is used to configure the editor at initialiation can be filtered by a PHP WordPress plugin before being sent.
+## Editor REST API preload paths
 
-_Example:_
+You can use [`block_editor_rest_api_preload_paths`](https://developer.wordpress.org/reference/hooks/block_editor_rest_api_preload_paths/) to filter the array of REST API paths that will be used to preload common data to use with the block editor. Here's an example:
 
 ```php
-<?php
-// my-plugin.php
+add_filter( 'block_editor_rest_api_preload_paths', 'example_filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
 
-function filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
-	if ( ! empty( $editor_context->post ) ) {
-		$editor_settings['maxUploadFileSize'] = 12345;
-	}
-	return $editor_settings;
-}
-
-add_filter( 'block_editor_settings_all', 'filter_block_editor_settings_when_post_provided', 10, 2 );
-```
-
-#### `block_editor_rest_api_preload_paths`
-
-Filters the array of REST API paths that will be used to preloaded common data to use with the block editor.
-
-_Example:_
-
-```php
-<?php
-// my-plugin.php
-
-function filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
+function example_filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
 	if ( ! empty( $editor_context->post ) ) {
 		array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
 	}
 	return $preload_paths;
 }
-
-add_filter( 'block_editor_rest_api_preload_paths', 'filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
 ```
 
-### Available default editor settings
-
-#### `richEditingEnabled`
-
-If it is `true` the user can edit the content using the visual editor.
-
-It is set by default to the return value of the [`user_can_richedit`](https://developer.wordpress.org/reference/functions/user_can_richedit/) function. It checks if the user can access the visual editor and whether it’s supported by the user’s browser.
-
-#### `codeEditingEnabled`
-
-Default `true`. Indicates whether the user can access the code editor **in addition** to the visual editor.
-
-If set to false the user will not be able to switch between visual and code editor. The option in the settings menu will not be available and the keyboard shortcut for switching editor types will not fire.
-
 ## Logging errors
 
-_**Note:** Since WordPress 6.1._
+A JavaScript error in a part of the UI shouldn't break the whole app. To solve this problem for users, React library uses the concept of an ["error boundary"](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of the component tree that crashed.
 
-A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for users, React library uses a concept of an [“error boundary”](https://reactjs.org/docs/error-boundaries.html). Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, and display a fallback UI instead of the component tree that crashed.
+The `editor.ErrorBoundary.errorLogged` action allows you to hook into the [Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) and gives you access to the error object.
 
-### `editor.ErrorBoundary.errorLogged`
-
-Allows you to hook into the [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) and gives you access to the error object.
-
-You can use this action if you want to get hold of the error object that's handled by the boundaries, i.e to send them to an external error tracking tool.
-
-_Example_:
+You can use this action to get hold of the error object handled by the boundaries. For example, you may want to send them to an external error-tracking tool. Here's an example:
 
 ```js
+import { addAction } from '@wordpress/hooks';
+
 addAction(
 	'editor.ErrorBoundary.errorLogged',
 	'mu-plugin/error-capture-setup',
 	( error ) => {
-		// error is the exception's error object
-		ErrorCaptureTool.captureError( error );
+		// Error is the exception's error object. 
+		// You can console.log it or send it to an external error-tracking tool.
+		console.log ( error );
 	}
 );
 ```
-
-## Block Directory
-
-The Block Directory enables installing new block plugins from [WordPress.org.](https://wordpress.org/plugins/browse/block/) It can be disabled by removing the actions that enqueue it. In WordPress core, the function is `wp_enqueue_editor_block_directory_assets`. To remove the feature, use [`remove_action`,](https://developer.wordpress.org/reference/functions/remove_action/) like this:
-
-```php
-<?php
-// my-plugin.php
-
-remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
-```
-
-## Block Patterns
-
-### `should_load_remote_block_patterns`
-
-Default `true`. The filter is checked when registering remote block patterns, set to false to disable.
-
-For example, to disable use:
-
-```
-add_filter( 'should_load_remote_block_patterns', '__return_false' );
-```
diff --git a/docs/reference-guides/filters/global-styles-filters.md b/docs/reference-guides/filters/global-styles-filters.md
index 7d3b6be95768b9..59bbbfcd5921dd 100644
--- a/docs/reference-guides/filters/global-styles-filters.md
+++ b/docs/reference-guides/filters/global-styles-filters.md
@@ -14,7 +14,7 @@ _Example:_
 This is how to pass a new color palette for the theme and disable the text color UI:
 
 ```php
-function filter_theme_json_theme( $theme_json ){
+function wpdocs_filter_theme_json_theme( $theme_json ){
 	$new_data = array(
 		'version'  => 2,
 		'settings' => array(
@@ -38,5 +38,5 @@ function filter_theme_json_theme( $theme_json ){
 
 	return $theme_json->update_with( $new_data );
 }
-add_filter( 'wp_theme_json_data_theme', 'filter_theme_json_theme' );
+add_filter( 'wp_theme_json_data_theme', 'wpdocs_filter_theme_json_theme' );
 ```
diff --git a/docs/reference-guides/filters/parser-filters.md b/docs/reference-guides/filters/parser-filters.md
index 3acfb2489182db..7adc68cc0bf7e7 100644
--- a/docs/reference-guides/filters/parser-filters.md
+++ b/docs/reference-guides/filters/parser-filters.md
@@ -26,11 +26,11 @@ class EmptyParser {
   }
 }
 
-function my_plugin_select_empty_parser( $prev_parser_class ) {
+function wpdocs_select_empty_parser( $prev_parser_class ) {
     return 'EmptyParser';
 }
 
-add_filter( 'block_parser_class', 'my_plugin_select_empty_parser', 10, 1 );
+add_filter( 'block_parser_class', 'wpdocs_select_empty_parser', 10, 1 );
 ```
 
 > **Note**: At the present time it's not possible to replace the client-side parser.
diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md
new file mode 100644
index 00000000000000..3a5bbb84ff159c
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/README.md
@@ -0,0 +1,124 @@
+# Interactivity API Reference
+
+The Interactivity API, [introduced in WordPress 6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), provides a standard way for developers to add interactions to the front end of their blocks. The API is also used in many Core WordPress blocks, including Search, Query, Navigation, and File.
+
+This standard makes it easier for developers to create rich, interactive user experiences, from simple counters or pop-ups to more complex features like instant page navigation, instant search, shopping carts, or checkouts.
+
+Blocks can share data, actions, and callbacks between them. This makes communication between blocks simpler and less error-prone. For example, clicking on an “add to cart” block can seamlessly update a separate “cart” block.
+
+For more information about the genesis of the Interactivity API, check out the [original proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). You can also review the [merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/), the [status update post](https://make.wordpress.org/core/2023/08/15/status-update-on-the-interactivity-api/), and the official [Trac ticket](https://core.trac.wordpress.org/ticket/60356).
+
+<div class="callout callout-info">
+    The Interactivity API is supported by the package <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/"><code>@wordpress/interactivity</code></a> which is bundled in WordPress Core from v6.5
+</div>
+
+## Navigating the Interactivity API docs
+
+Use the following links to locate the topic you're interested in. If you have never worked with the Interactivity API before, consider reading through the following resources in the order listed.
+
+-   **[Requirements](#requirements-of-the-interactivity-api):** Check this section before you start creating your interactive blocks with the Interactivity API.
+-   **[Quick Start Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/):** Get a custom block using the Interactivity API up and running in less than one minute.
+-   **[Tutorial: A first look at the Interactivity API](https://developer.wordpress.org/news/2024/04/11/a-first-look-at-the-interactivity-api/)** This article from the [WordPress Developer Blog](https://developer.wordpress.org/news/) is a great way to get introduced to the Interactivity API.
+-   **[Core Concepts](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/core-concepts/)** Gain a better understanding of concepts and mental models related to Interactivity API development from this section.
+-   **[API Reference](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/):** To take a deep dive into how the API works internally, the list of Directives, and how the Store works.
+-   **[Docs and Examples](#docs-examples):** Additional resources to learn/read more about the Interactivity API.
+
+To get a deeper understanding of what the Interactivity API is or find answers to questions you may have about this standard, check the following resources:
+
+-   **[About the Interactivity API](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-about/):** To learn more about the API Goals and the reasoning behind the use of a standard to add interactivity to blocks.
+-   **[Frequently Asked Questions](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/):** To find responses to some frequently asked questions about the technology behind and alternatives.
+
+## Requirements of the Interactivity API
+
+Interactivity API is included in Core in WordPress 6.5. For versions below, you'll need Gutenberg 17.5 or higher installed and activated in your WordPress installation.
+
+It’s also important to highlight that the block creation workflow doesn’t change, and all the [prerequisites](https://developer.wordpress.org/block-editor/getting-started/devenv/) remain the same. These include:
+
+-   [Code Editor](https://developer.wordpress.org/block-editor/getting-started/devenv/#code-editor)
+-   [Node.js development tools](https://developer.wordpress.org/block-editor/getting-started/devenv/#node-js-development-tools)
+-   [Local WordPress environment (site)](https://developer.wordpress.org/block-editor/getting-started/devenv/#local-wordpress-environment)
+
+You can start creating interactions once you set up a block development environment and run WordPress 6.5+ (or Gutenberg 17.5+).
+
+### Code requirements
+
+#### Add `interactivity` to your project
+
+Install the Interactivity API to your project with the following command:
+
+```bash
+npm install @wordpress/interactivity --save
+```
+
+Import the store into your `view.js`. Refer to the [store documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#the-store) for more information.
+
+```js
+import { store } from '@wordpress/interactivity';
+```
+
+#### Add `interactivity` support to `block.json`
+
+To indicate that the block [supports](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) the Interactivity API features, add `"interactivity": true` to the `supports` attribute of the block's `block.json` file.
+
+```json
+// block.json
+"supports": {
+    "interactivity": true
+},
+```
+
+Refer to the [`interactivity` support property docs](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity) to get a more detailed description of this property.
+
+#### Load Interactivity API JavaScript code with `viewScriptModule`
+
+The Interactivity API provides the `@wordpress/interactivity` Script Module. JavaScript using the Interactivity API should be implemented as Script Modules so they can depend on `@wordpress/interactivity`. [Script Modules have been available since WordPress 6.5](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/). Blocks can use [`viewScriptModule` block metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script-module) to enqueue their Script Modules easily:
+
+```json
+// block.json
+{
+   ...
+   "viewScriptModule": "file:./view.js"
+}
+```
+
+The use of `viewScriptModule` also requires the `--experimental-modules` flag for both the [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts of `wp-scripts` to ensure a proper build of the Script Modules.
+
+```json
+// package.json
+{
+    "scripts": {
+        ...
+		"build": "wp-scripts build --experimental-modules",
+		"start": "wp-scripts start --experimental-modules"
+	}
+```
+
+#### Add `wp-interactive` directive to a DOM element
+
+To "activate" the Interactivity API in a DOM element (and its children), add the [`wp-interactive`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#wp-interactive) directive to the DOM element in the block's `render.php` or `save.js` files.
+
+```html
+<div data-wp-interactive="myPlugin">
+	<!-- Interactivity API zone -->
+</div>
+```
+
+Refer to the [`wp-interactive` documentation](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-interactive) for a more detailed description of this directive.
+
+## Docs & Examples
+
+Here you have some more resources to learn/read more about the Interactivity API:
+
+-   [WordPress 6.5 Dev Note](https://make.wordpress.org/core/2024/03/04/interactivity-api-dev-note/)
+-   [Merge announcement](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/)
+-   [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
+-   [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.
+-   [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+-   Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
+    -   [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
+    -   [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
+    -   [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
+
+<div class="callout">
+    There's a Tracking Issue opened to ease the coordination of the work related to the Interactivity API Docs: <a href="https://github.com/WordPress/gutenberg/issues/53296">Documentation for the Interactivity API - Tracking Issue #53296</a>
+</div>
diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
new file mode 100644
index 00000000000000..bbbb565684c578
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/api-reference.md
@@ -0,0 +1,1376 @@
+# API Reference
+
+<div class="callout callout-alert">
+Interactivity API is only available for WordPress 6.5 and above.
+</div>
+
+To add interactions to blocks using the Interactivity API, developers can use:
+
+-   **Directives:** Added to the markup to add specific behavior to the DOM elements of the block
+-   **Store:** Contains the logic and data (state, actions, side effects, etc.) needed for the behavior
+
+DOM elements are connected to data stored in the state and context through directives. If data in the state or context change directives will react to those changes, updating the DOM accordingly (see [diagram](https://excalidraw.com/#json=T4meh6lltJh6TCX51NTIu,DmIhxYSGFTL_ywZFbsmuSw)).
+
+![State & Directives](https://make.wordpress.org/core/files/2024/02/interactivity-state-directives.png)
+
+## What are directives?
+
+Directives are custom attributes that are added to the markup of your block to add behavior to its DOM elements. This can be done in the `render.php` file (for dynamic blocks) or the `save.js` file (for static blocks).
+
+Interactivity API directives use the `data-` prefix. Here's an example of directives used in HTML markup.
+
+```html
+<div
+	data-wp-interactive="myPlugin"
+	data-wp-context='{ "isOpen": false }'
+	data-wp-watch="callbacks.logIsOpen"
+>
+	<button
+		data-wp-on--click="actions.toggle"
+		data-wp-bind--aria-expanded="context.isOpen"
+		aria-controls="p-1"
+	>
+		Toggle
+	</button>
+
+	<p id="p-1" data-wp-bind--hidden="!context.isOpen">
+		This element is now visible!
+	</p>
+</div>
+```
+
+Directives can also be injected dynamically using the [HTML Tag Processor](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2).
+
+With directives, you can directly manage interactions such as side effects, state, event handlers, attributes, or content.
+
+## List of Directives
+
+### `wp-interactive`
+
+The `wp-interactive` directive "activates" the interactivity for the DOM element and its children through the Interactivity API (directives and store). The directive includes a namespace to reference a specific store, that can be set as a `string` or an `object`.
+
+```html
+<!-- Let's make this element and its children interactive and set the namespace -->
+<div
+	data-wp-interactive="myPlugin"
+	data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
+>
+	<p>
+		I'm interactive now,
+		<span data-wp-style--background-color="context.myBgColor"
+			>and I can use directives!</span
+		>
+	</p>
+	<div>
+		<p>
+			I'm also interactive,
+			<span data-wp-style--color="context.myColor"
+				>and I can also use directives!</span
+			>
+		</p>
+	</div>
+</div>
+
+<!-- This is also valid -->
+<div
+	data-wp-interactive='{ "namespace": "myPlugin" }'
+	data-wp-context='{ "myColor" : "red", "myBgColor": "yellow" }'
+>
+	<p>
+		I'm interactive now,
+		<span data-wp-style--background-color="context.myBgColor"
+			>and I can use directives!</span
+		>
+	</p>
+	<div>
+		<p>
+			I'm also interactive,
+			<span data-wp-style--color="context.myColor"
+				>and I can also use directives!</span
+			>
+		</p>
+	</div>
+</div>
+```
+
+<div class="callout callout-info">
+  The use of <code>data-wp-interactive</code> is a requirement for the Interactivity API "engine" to work. In the following examples the <code>data-wp-interactive</code> has not been added for the sake of simplicity. Also, the <code>data-wp-interactive</code> directive will be injected automatically in the future.
+</div>
+
+### `wp-context`
+
+It provides a **local** state available to a specific HTML node and its children.
+
+The `wp-context` directive accepts a stringified JSON as a value.
+
+```php
+// render.php
+<div data-wp-context='{ "post": { "id": <?php echo $post->ID; ?> } }' >
+  <button data-wp-on--click="actions.logId" >
+    Click Me!
+  </button>
+</div>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		logId: () => {
+			const { post } = getContext();
+			console.log( post.id );
+		},
+	},
+} );
+```
+
+</details>
+
+Different contexts can be defined at different levels, and deeper levels will merge their own context with any parent one:
+
+```html
+<div data-wp-context='{ "foo": "bar" }'>
+	<span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
+
+	<div data-wp-context='{ "bar": "baz" }'>
+		<span data-wp-text="context.foo"><!-- Will output: "bar" --></span>
+
+		<div data-wp-context='{ "foo": "bob" }'>
+			<span data-wp-text="context.foo"><!-- Will output: "bob" --></span>
+		</div>
+	</div>
+</div>
+```
+
+### `wp-bind`
+
+This directive allows setting HTML attributes on elements based on a boolean or string value. It follows the syntax `data-wp-bind--attribute`.
+
+```html
+<li data-wp-context='{ "isMenuOpen": false }'>
+	<button
+		data-wp-on--click="actions.toggleMenu"
+		data-wp-bind--aria-expanded="context.isMenuOpen"
+	>
+		Toggle
+	</button>
+	<div data-wp-bind--hidden="!context.isMenuOpen">
+		<span>Title</span>
+		<ul>
+			SUBMENU ITEMS
+		</ul>
+	</div>
+</li>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		toggleMenu: () => {
+			const context = getContext();
+			context.isMenuOpen = ! context.isMenuOpen;
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-bind` directive is executed:
+
+-   When the element is created
+-   Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
+
+When `wp-bind` directive references a callback to get its final value:
+
+-   The `wp-bind` directive will be executed each time there's a change on any of the properties of the `state` or `context` used inside this callback.
+-   The returned value in the callback function is used to change the value of the associated attribute.
+
+The `wp-bind` will do different things when the DOM element is applied, depending on its value:
+
+-   If the value is `true`, the attribute is added: `<div attribute>`
+-   If the value is `false`, the attribute is removed: `<div>`
+-   If the value is a string, the attribute is added with its value assigned: `<div attribute="value"`
+-   If the attribute name starts with `aria-` or `data-` and the value is boolean (either `true` or `false`), the attribute is added to the DOM with the boolean value assigned as a string: `<div aria-attribute="true">`
+
+### `wp-class`
+
+This directive adds or removes a class to an HTML element, depending on a boolean value. It follows the syntax `data-wp-class--classname`.
+
+```html
+<div>
+	<li
+		data-wp-context='{ "isSelected": false }'
+		data-wp-on--click="actions.toggleSelection"
+		data-wp-class--selected="context.isSelected"
+	>
+		Option 1
+	</li>
+	<li
+		data-wp-context='{ "isSelected": false }'
+		data-wp-on--click="actions.toggleSelection"
+		data-wp-class--selected="context.isSelected"
+	>
+		Option 2
+	</li>
+</div>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		toggleSelection: () => {
+			const context = getContext();
+			context.isSelected = ! context.isSelected;
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-class` directive is executed:
+
+-   When the element is created
+-   Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
+
+The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute.
+
+It's important to note that when using the `wp-class` directive, it's recommended to use kebab-case for class names instead of camelCase. This is because HTML attributes are not case-sensitive, and HTML will treat `data-wp-class--isDark` the same as `data-wp-class--isdark` or `DATA-WP-CLASS--ISDARK`.
+
+So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-class--is-dark` instead of `data-wp-class--isDark`:
+
+```html
+<!-- Recommended -->
+<div data-wp-class--is-dark="context.isDarkMode">
+	<!-- ... -->
+</div>
+
+<!-- Not recommended -->
+<div data-wp-class--isDark="context.isDarkMode">
+	<!-- ... -->
+</div>
+```
+
+```css
+/* Recommended */
+.is-dark {
+	/* ... */
+}
+
+/* Not recommended */
+.isDark {
+	/* ... */
+}
+```
+
+### `wp-style`
+
+This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.
+
+```html
+<div data-wp-context='{ "color": "red" }'>
+	<button data-wp-on--click="actions.toggleContextColor">
+		Toggle Color Text
+	</button>
+	<p data-wp-style--color="context.color">Hello World!</p>
+</div>
+>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		toggleContextColor: () => {
+			const context = getContext();
+			context.color = context.color === 'red' ? 'blue' : 'red';
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-style` directive is executed:
+
+-   When the element is created
+-   Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
+
+The value received by the directive is used to add or remove the style attribute with the associated CSS property:
+
+-   If the value is `false`, the style attribute is removed: `<div>`
+-   If the value is a string, the attribute is added with its value assigned: `<div style="css-property: value;">`
+
+### `wp-text`
+
+It sets the inner text of an HTML element.
+
+```html
+<div data-wp-context='{ "text": "Text 1" }'>
+	<span data-wp-text="context.text"></span>
+	<button data-wp-on--click="actions.toggleContextText">
+		Toggle Context Text
+	</button>
+</div>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		toggleContextText: () => {
+			const context = getContext();
+			context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-text` directive is executed:
+
+-   When the element is created
+-   Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
+
+The returned value is used to change the inner content of the element: `<div>value</div>`.
+
+### `wp-on`
+
+<div class="callout callout-info">
+  Consider using the more performant <a href="#wp-on-async"><code>wp-on-async</code></a> instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an <a href="#async-actions"><code>async action</code></a> which yields to the main thread after calling the synchronous API.
+</div>
+
+This directive runs code on dispatched DOM events like `click` or `keyup`. The syntax is `data-wp-on--[event]` (like `data-wp-on--click` or `data-wp-on--keyup`).
+
+```php
+<button data-wp-on--click="actions.logTime" >
+  Click Me!
+</button>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		logTime: ( event ) => {
+			console.log( new Date() );
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-on` directive is executed each time the associated event is triggered.
+
+The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored.
+
+### `wp-on-async`
+
+This directive is a more performant approach for `wp-on`. It immediately yields to main to avoid contributing to a long task, allowing other interactions that otherwise would be waiting on the main thread to run sooner. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`.
+
+### `wp-on-window`
+
+<div class="callout callout-info">
+  Consider using the more performant <a href="#wp-on-async-window"><code>wp-on-async-window</code></a> instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an <a href="#async-actions"><code>async action</code></a> which yields to the main thread after calling the synchronous API.
+</div>
+
+This directive allows you to attach global window events like `resize`, `copy`, and `focus` and then execute a defined callback when those happen.
+
+[List of supported window events.](https://developer.mozilla.org/en-US/docs/Web/API/Window#events)
+
+The syntax of this directive is `data-wp-on-window--[window-event]` (like `data-wp-on-window--resize` or `data-wp-on-window--languagechange`).
+
+```php
+<div data-wp-on-window--resize="callbacks.logWidth"></div>
+```
+
+<details>
+	<summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	callbacks: {
+		logWidth() {
+			console.log( 'Window width: ', window.innerWidth );
+		},
+	},
+} );
+```
+
+</details>
+
+The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
+
+### `wp-on-async-window`
+
+Similar to `wp-on-async`, this is an optimized version of `wp-on-window` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
+
+### `wp-on-document`
+
+<div class="callout callout-info">
+  Consider using the more performant <a href="#wp-on-async-document"><code>wp-on-async-document</code></a> instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an <a href="#async-actions"><code>async action</code></a> which yields to the main thread after calling the synchronous API.
+</div>
+
+This directive allows you to attach global document events like `scroll`, `mousemove`, and `keydown` and then execute a defined callback when those happen.
+
+[List of supported document events.](https://developer.mozilla.org/en-US/docs/Web/API/Document#events)
+
+The syntax of this directive is `data-wp-on-document--[document-event]` (like `data-wp-on-document--keydown` or `data-wp-on-document--selectionchange`).
+
+```php
+<div data-wp-on-document--keydown="callbacks.logKeydown"></div>
+```
+
+<details>
+	<summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	callbacks: {
+		logKeydown( event ) {
+			console.log( 'Key pressed: ', event.key );
+		},
+	},
+} );
+```
+
+</details>
+
+The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
+
+### `wp-on-async-document`
+
+Similar to `wp-on-async`, this is an optimized version of `wp-on-document` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
+
+### `wp-watch`
+
+It runs a callback **when the node is created and runs it again when the state or context changes**.
+
+You can attach several side effects to the same DOM element by using the syntax `data-wp-watch--[unique-id]`.
+
+The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-watch` directives of that DOM element.
+
+```html
+<div data-wp-context='{ "counter": 0 }' data-wp-watch="callbacks.logCounter">
+	<p>Counter: <span data-wp-text="context.counter"></span></p>
+	<button data-wp-on--click="actions.increaseCounter">+</button>
+	<button data-wp-on--click="actions.decreaseCounter">-</button>
+</div>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+store( 'myPlugin', {
+	actions: {
+		increaseCounter: () => {
+			const context = getContext();
+			context.counter++;
+		},
+		decreaseCounter: () => {
+			const context = getContext();
+			context.counter--;
+		},
+	},
+	callbacks: {
+		logCounter: () => {
+			const { counter } = getContext();
+			console.log( 'Counter is ' + counter + ' at ' + new Date() );
+		},
+	},
+} );
+```
+
+</details>
+
+The `wp-watch` directive is executed:
+
+-   When the element is created
+-   Each time that any of the properties of the `state` or `context` used inside the callback changes
+
+The `wp-watch` directive can return a function. If it does, the returned function is used as cleanup logic, i.e., it will run just before the callback runs again, and it will run again when the element is removed from the DOM.
+
+As a reference, some use cases for this directive may be:
+
+-   Logging
+-   Changing the title of the page
+-   Setting the focus on an element with `.focus()`.
+-   Changing the state or context when certain conditions are met
+
+### `wp-init`
+
+This directive runs a callback **only when the node is created**.
+
+You can attach several `wp-init` to the same DOM element by using the syntax `data-wp-init--[unique-id]`.
+
+The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-init` directives of that DOM element.
+
+```html
+<div data-wp-init="callbacks.logTimeInit">
+	<p>Hi!</p>
+</div>
+```
+
+Here's another example with several `wp-init` directives on the same DOM element.
+
+```html
+<form
+	data-wp-init--log="callbacks.logTimeInit"
+	data-wp-init--focus="callbacks.focusFirstElement"
+>
+	<input type="text" />
+</form>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+import { store, getElement } from '@wordpress/interactivity';
+
+store( "myPlugin", {
+  callbacks: {
+    logTimeInit: () => console.log( `Init at ` + new Date() ),
+    focusFirstElement: () => {
+      const { ref } = getElement();
+      ref.querySelector( 'input:first-child' ).focus(),
+    },
+  },
+} );
+```
+
+</details>
+
+The `wp-init` can return a function. If it does, the returned function will run when the element is removed from the DOM.
+
+### `wp-run`
+
+This directive runs the passed callback **during the node's render execution**.
+
+You can use and compose hooks like `useState`, `useWatch`, or `useEffect` inside the passed callback and create your own logic, providing more flexibility than previous directives.
+
+You can attach several `wp-run` to the same DOM element by using the syntax `data-wp-run--[unique-id]`.
+
+The `unique-id` doesn't need to be unique globally. It just needs to be different from the other unique IDs of the `wp-run` directives of that DOM element.
+
+```html
+<div data-wp-run="callbacks.logInView">
+	<p>Hi!</p>
+</div>
+```
+
+<details>
+  <summary><em>See store used with the directive above</em></summary>
+
+```js
+import {
+	getElement,
+	store,
+	useState,
+	useEffect,
+} from '@wordpress/interactivity';
+
+// Unlike `data-wp-init` and `data-wp-watch`, you can use any hooks inside
+// `data-wp-run` callbacks.
+const useInView = () => {
+	const [ inView, setInView ] = useState( false );
+	useEffect( () => {
+		const { ref } = getElement();
+		const observer = new IntersectionObserver( ( [ entry ] ) => {
+			setInView( entry.isIntersecting );
+		} );
+		observer.observe( ref );
+		return () => ref && observer.unobserve( ref );
+	}, [] );
+	return inView;
+};
+
+store( 'myPlugin', {
+	callbacks: {
+		logInView: () => {
+			const isInView = useInView();
+			useEffect( () => {
+				if ( isInView ) {
+					console.log( 'Inside' );
+				} else {
+					console.log( 'Outside' );
+				}
+			} );
+		},
+	},
+} );
+```
+
+</details>
+
+It's important to note that, similar to (P)React components, the `ref` from `getElement()` is `null` during the first render. To properly access the DOM element reference, you typically need to use an effect-like hook such as `useEffect`, `useInit`, or `useWatch`. This ensures that the `getElement()` runs after the component has been mounted and the `ref` is available.
+
+### `wp-key`
+
+The `wp-key` directive assigns a unique key to an element to help the Interactivity API identify it when iterating through arrays of elements. This becomes important if your array elements can move (e.g., due to sorting), get inserted, or get deleted. A well-chosen key value helps the Interactivity API infer what exactly has changed in the array, allowing it to make the correct updates to the DOM.
+
+The key should be a string that uniquely identifies the element among its siblings. Typically, it is used on repeated elements like list items. For example:
+
+```html
+<ul>
+	<li data-wp-key="unique-id-1">Item 1</li>
+	<li data-wp-key="unique-id-2">Item 2</li>
+</ul>
+```
+
+But it can also be used on other elements:
+
+```html
+<div>
+	<a data-wp-key="previous-page" ...>Previous page</a>
+	<a data-wp-key="next-page" ...>Next page</a>
+</div>
+```
+
+When the list is re-rendered, the Interactivity API will match elements by their keys to determine if an item was added/removed/reordered. Elements without keys might be recreated unnecessarily.
+
+### `wp-each`
+
+The `wp-each` directive is intended to render a list of elements. The directive can be used in `<template>` tags, being the value a path to an array stored in the global state or the context. The content inside the `<template>` tag is the template used to render each of the items.
+
+Each item is included in the context under the `item` name by default, so directives inside the template can access the current item.
+
+For example, let's consider the following HTML.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+	<template data-wp-each="context.list">
+		<li data-wp-text="context.item"></li>
+	</template>
+</ul>
+```
+
+It would generate the following output:
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+	<li data-wp-text="context.item">hello</li>
+	<li data-wp-text="context.item">hola</li>
+	<li data-wp-text="context.item">olá</li>
+</ul>
+```
+
+The prop that holds the item in the context can be changed by passing a suffix to the directive name. In the following example, the default prop changes from `item` to `greeting`.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+	<template data-wp-each--greeting="context.list">
+		<li data-wp-text="context.greeting"></li>
+	</template>
+</ul>
+```
+
+By default, it uses each element as the key for the rendered nodes, but you can also specify a path to retrieve the key if necessary, e.g., when the list contains objects.
+
+For that, you must use `data-wp-each-key` in the `<template>` tag and not `data-wp-key` inside the template content. This is because `data-wp-each` creates a context provider wrapper around each rendered item, and those wrappers are the ones that need the `key` property.
+
+```html
+<ul
+	data-wp-context='{
+  "list": [
+    { "id": "en", "value": "hello" },
+    { "id": "es", "value": "hola" },
+    { "id": "pt", "value": "olá" }
+  ]
+}'
+>
+	<template
+		data-wp-each--greeting="context.list"
+		data-wp-each-key="context.greeting.id"
+	>
+		<li data-wp-text="context.greeting.value"></li>
+	</template>
+</ul>
+```
+
+### `wp-each-child`
+
+For server-side rendered lists, another directive called `data-wp-each-child` ensures hydration works as expected. This directive is added automatically when the directive is processed on the server.
+
+```html
+<ul data-wp-context='{ "list": [ "hello", "hola", "olá" ] }'>
+	<template data-wp-each--greeting="context.list">
+		<li data-wp-text="context.greeting"></li>
+	</template>
+	<li data-wp-each-child>hello</li>
+	<li data-wp-each-child>hola</li>
+	<li data-wp-each-child>olá</li>
+</ul>
+```
+
+## Values of directives are references to store properties
+
+The value assigned to a directive is a string pointing to a specific state, action, or side effect.
+
+In the following example, a getter is used to define the `state.isPlaying` derived value.
+
+```js
+const { state } = store( 'myPlugin', {
+	state: {
+		currentVideo: '',
+		get isPlaying() {
+			return state.currentVideo !== '';
+		},
+	},
+} );
+```
+
+And then, the string value `"state.isPlaying"` is used to assign the result of this selector to `data-wp-bind--hidden`.
+
+```html
+<div data-wp-bind--hidden="!state.isPlaying" ...>
+	<iframe ...></iframe>
+</div>
+```
+
+These values assigned to directives are **references** to a particular property in the store. They are wired to the directives automatically so that each directive “knows” what store element refers to, without any additional configuration.
+
+Note that, by default, references point to properties in the current namespace, which is the one specified by the closest ancestor with a `data-wp-interactive` attribute. If you need to access a property from a different namespace, you can explicitly set the namespace where the property accessed is defined. The syntax is `namespace::reference`, replacing `namespace` with the appropriate value.
+
+The example below is getting `state.isPlaying` from `otherPlugin` instead of `myPlugin`:
+
+```html
+<div data-wp-interactive="myPlugin">
+	<div data-wp-bind--hidden="otherPlugin::!state.isPlaying" ...>
+		<iframe ...></iframe>
+	</div>
+</div>
+```
+
+## The store
+
+The store is used to create the logic (actions, side effects, etc.) linked to the directives and the data used inside that logic (state, derived state, etc.).
+
+**The store is usually created in the `view.js` file of each block**, although the state can be initialized from the `render.php` of the block.
+
+### Elements of the store
+
+#### State
+
+It defines data available to the HTML nodes of the page. It is important to differentiate between two ways to define the data:
+
+-   **Global state**: It is defined using the `store()` function with the `state` property, and the data is available to all the HTML nodes of the page.
+-   **Context/Local State**: It is defined using the `data-wp-context` directive in an HTML node, and the data is available to that HTML node and its children. It can be accessed using the `getContext` function inside of an action, derived state or side effect.
+
+```html
+<div data-wp-context='{ "someText": "Hello World!" }'>
+	<!-- Access global state -->
+	<span data-wp-text="state.someText"></span>
+
+	<!-- Access local state (context) -->
+	<span data-wp-text="context.someText"></span>
+</div>
+```
+
+```js
+const { state } = store( 'myPlugin', {
+	state: {
+		someText: 'Hello Universe!',
+	},
+	actions: {
+		someAction: () => {
+			state.someText; // Access or modify global state - "Hello Universe!"
+
+			const context = getContext();
+			context.someText; // Access or modify local state (context) - "Hello World!"
+		},
+	},
+} );
+```
+
+#### Actions
+
+Actions are just regular JavaScript functions. Usually triggered by the `data-wp-on` directive (using event listeners) or other actions.
+
+```ts
+const { state, actions } = store( 'myPlugin', {
+	actions: {
+		selectItem: ( id ) => {
+			const context = getContext();
+			// `id` is optional here, so this action can be used in a directive.
+			state.selected = id || context.id;
+		},
+		otherAction: () => {
+			// but it can also be called from other actions.
+			actions.selectItem( 123 ); // it works and type is correct
+		},
+	},
+} );
+```
+
+<h5 id="async-actions">Async actions</h5>
+
+Async actions should use generators instead of async/await.
+
+In async functions, the control is passed to the function itself. The caller of the function has no way to know if the function is awaiting, and more importantly, if the await is resolved and the function has resumed execution. We need that information to be able to restore the scope.
+
+Imagine a block that has two buttons. One lives inside a context that has `isOpen: true` and the other `isOpen: false`:
+
+```html
+<div data-wp-context='{ "isOpen": true }'>
+	<button data-wp-on--click="actions.someAction">Click</button>
+</div>
+
+<div data-wp-context='{ "isOpen": false }'>
+	<button data-wp-on--click="actions.someAction">Click</button>
+</div>
+```
+
+If the action is async and needs to await a long delay.
+
+-   The user clicks the first button.
+-   The scope points to the first context, where `isOpen: true`.
+-   The first access to `state.isOpen` is correct because `getContext` returns the current scope.
+-   The action starts awaiting a long delay.
+-   Before the action resumes, the user clicks the second button.
+-   The scope is changed to the second context, where `isOpen: false`.
+-   The first access to `state.isOpen` is correct because `getContext` returns the current scope.
+-   The second action starts awaiting a long delay.
+-   The first action finishes awaiting and resumes its execution.
+-   The second access to `state.isOpen` of the first action is incorrect, because `getContext` now returns the wrong scope.
+
+We need to be able to know when async actions start awaiting and resume operations, so we can restore the proper scope, and that's what generators do.
+
+The store will work fine if it is written like this:
+
+```js
+const { state } = store( 'myPlugin', {
+	state: {
+		get isOpen() {
+			return getContext().isOpen;
+		},
+	},
+	actions: {
+		someAction: function* () {
+			state.isOpen; // This context is correct because it's synchronous.
+			yield longDelay(); // With generators, the caller controls when to resume this function.
+			state.isOpen; // This context is correct because we restored the proper scope before we resumed the function.
+		},
+	},
+} );
+```
+
+As mentioned above with [`wp-on`](#wp-on), [`wp-on-window`](#wp-on-window), and [`wp-on-document`](#wp-on-document), an async action should be used whenever the `async` versions of the aforementioned directives cannot be used due to the action requiring synchronous access to the `event` object. Synchronous access is required whenever the action needs to call `event.preventDefault()`, `event.stopPropagation()`, or `event.stopImmediatePropagation()`. To ensure that the action code does not contribute to a long task, you may manually yield to the main thread after calling the synchronous event API. For example:
+
+```js
+// Note: In WordPress 6.6 this splitTask function is exported by @wordpress/interactivity.
+function splitTask() {
+	return new Promise( ( resolve ) => {
+		setTimeout( resolve, 0 );
+	} );
+}
+
+store( 'myPlugin', {
+	actions: {
+		handleClick: function* ( event ) {
+			event.preventDefault();
+			yield splitTask();
+			doTheWork();
+		},
+	},
+} );
+```
+
+You may want to add multiple such `yield` points in your action if it is doing a lot of work.
+
+#### Side Effects
+
+Automatically react to state changes. Usually triggered by `data-wp-watch` or `data-wp-init` directives.
+
+#### Derived state
+
+They return a computed version of the state. They can access both `state` and `context`.
+
+```js
+// view.js
+const { state } = store( 'myPlugin', {
+	state: {
+		amount: 34,
+		defaultCurrency: 'EUR',
+		currencyExchange: {
+			USD: 1.1,
+			GBP: 0.85,
+		},
+		get amountInUSD() {
+			return state.currencyExchange[ 'USD' ] * state.amount;
+		},
+		get amountInGBP() {
+			return state.currencyExchange[ 'GBP' ] * state.amount;
+		},
+	},
+} );
+```
+
+### Accessing data in callbacks
+
+The **`store`** contains all the store properties, like `state`, `actions` or `callbacks`. They are returned by the `store()` call, so you can access them by destructuring it:
+
+```js
+const { state, actions } = store( 'myPlugin', {
+	// ...
+} );
+```
+
+The `store()` function can be called multiple times and all the store parts will be merged together:
+
+```js
+store( 'myPlugin', {
+	state: {
+		someValue: 1,
+	},
+} );
+
+const { state } = store( 'myPlugin', {
+	actions: {
+		someAction() {
+			state.someValue; // = 1
+		},
+	},
+} );
+```
+
+<div class="callout callout-info">
+  All <code>store()</code> calls with the same namespace return the same references, i.e., the same <code>state</code>, <code>actions</code>, etc., containing the result of merging all the store parts passed.
+</div>
+
+-   To access the context inside an action, derived state, or side effect, you can use the `getContext` function.
+-   To access the reference, you can use the `getElement` function.
+
+```js
+const { state } = store( 'myPlugin', {
+	state: {
+		get someDerivedValue() {
+			const context = getContext();
+			const { ref } = getElement();
+			// ...
+		},
+	},
+	actions: {
+		someAction() {
+			const context = getContext();
+			const { ref } = getElement();
+			// ...
+		},
+	},
+	callbacks: {
+		someEffect() {
+			const context = getContext();
+			const { ref } = getElement();
+			// ...
+		},
+	},
+} );
+```
+
+This approach enables some functionalities that make directives flexible and powerful:
+
+-   Actions and side effects can read and modify the state and the context.
+-   Actions and state in blocks can be accessed by other blocks.
+-   Actions and side effects can do anything a regular JavaScript function can do, like access the DOM or make API requests.
+-   Side effects automatically react to state changes.
+
+### Setting the store
+
+#### On the client side
+
+_In the `view.js` file of each block_ the developer can define both the state and the elements of the store referencing functions like actions, side effects or derived state.
+
+The `store` method used to set the store in JavaScript can be imported from `@wordpress/interactivity`.
+
+```js
+// store
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'myPlugin', {
+	actions: {
+		toggle: () => {
+			const context = getContext();
+			context.isOpen = ! context.isOpen;
+		},
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+} );
+```
+
+#### On the server side
+
+The state can also be initialized on the server using the `wp_interactivity_state()` function. You would typically do this in the `render.php` file of your block (the `render.php` templates were [introduced](https://make.wordpress.org/core/2022/10/12/block-api-changes-in-wordpress-6-1/) in WordPress 6.1).
+
+The state defined on the server with `wp_interactivity_state()` gets merged with the stores defined in the view.js files.
+
+The `wp_interactivity_state` function receives two arguments, a `string` with the namespace that will be used as a reference and an [associative array](https://www.php.net/manual/en/language.types.array.php) containing the values.
+
+_Example of store initialized from the server with a `state` = `{ someValue: 123 }`_
+
+```php
+// render.php
+wp_interactivity_state( 'myPlugin', array (
+	'someValue' => get_some_value()
+));
+```
+
+Initializing the state in the server also allows you to use any WordPress API. For example, you could use the Core Translation API to translate part of your state:
+
+```php
+// render.php
+wp_interactivity_state( 'favoriteMovies', array(
+      "1" => array(
+        "id" => "123-abc",
+        "movieName" => __("someMovieName", "textdomain")
+      ),
+) );
+```
+
+### Private stores
+
+A given store namespace can be marked as private, thus preventing its content to be accessed from other namespaces. The mechanism to do so is by adding a `lock` option to the `store()` call, as shown in the example below. This way, further executions of `store()` with the same locked namespace will throw an error, meaning that the namespace can only be accessed where its reference was returned from the first `store()` call. This is especially useful for developers who want to hide part of their plugin stores so it doesn't become accessible for extenders.
+
+```js
+const { state } = store(
+	'myPlugin/private',
+	{ state: { messages: [ 'private message' ] } },
+	{ lock: true }
+);
+
+// The following call throws an Error!
+store( 'myPlugin/private', {
+	/* store part */
+} );
+```
+
+There is also a way to unlock private stores: instead of passing a boolean, you can use a string as the `lock` value. Such a string can then be used in subsequent `store()` calls to the same namespace to unlock its content. Only the code knowing the string lock will be able to unlock the protected store namespaced. This is useful for complex stores defined in multiple JS modules.
+
+```js
+const { state } = store(
+	'myPlugin/private',
+	{ state: { messages: [ 'private message' ] } },
+	{ lock: PRIVATE_LOCK }
+);
+
+// The following call works as expected.
+store(
+	'myPlugin/private',
+	{
+		/* store part */
+	},
+	{ lock: PRIVATE_LOCK }
+);
+```
+
+### Store client methods
+
+Apart from the store function, there are also some methods that allows the developer to access data on their store functions.
+
+-   getContext()
+    -   getServerContext()
+    -   getServerState()
+-   getElement()
+
+#### getContext()
+
+Retrieves the context inherited by the element evaluating a function from the store. The returned value depends on the element and the namespace where the function calling `getContext()` exists. It can also take an optional namespace argument to retrieve the context of a specific interactive region.
+
+```js
+const context = getContext( 'namespace' );
+```
+
+-   `namespace` (optional): A string that matches the namespace of an interactive region. If not provided, it retrieves the context of the current interactive region.
+
+```php
+// render.php
+<div data-wp-interactive="myPlugin" data-wp-context='{ "isOpen": false }'>
+	<button data-wp-on--click="actions.log">Log</button>
+</div>
+```
+
+```js
+// store
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'myPlugin', {
+	actions: {
+		log: () => {
+			const context = getContext();
+			// Logs "false"
+			console.log( 'context => ', context.isOpen );
+
+			// With namespace argument.
+			const myPluginContext = getContext( 'myPlugin' );
+			// Logs "false"
+			console.log( 'myPlugin isOpen => ', myPluginContext.isOpen );
+		},
+	},
+} );
+```
+
+#### getServerContext()
+
+This function is analogous to `getContext()`, but with 2 key differences:
+
+1. Whenever [`actions.navigate()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/#actions) from [`@wordpress/interactivity-router`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/) is called, the object returned by `getServerContext()` is updated. This is useful when you want to update the context of a block based on **new** context coming from the page loaded via `actions.navigate()`. This new context is embedded in the HTML of the page loaded via `actions.navigate()`.
+2. The object returned by `getServerContext()` is read-only.
+
+The server context cannot be directly used in directives, but you can use callbacks to subscribe to its changes.
+
+```js
+const serverContext = getServerContext( 'namespace' );
+```
+
+-   `namespace` (optional): A string that matches the namespace of an interactive region. If not provided, it retrieves the server context of the current interactive region.
+
+Example usage:
+
+```js
+store( 'myPlugin', {
+	callbacks: {
+		updateServerContext() {
+			const context = getContext();
+			const serverContext = getServerContext();
+			// Override some property with the new value that came from the server.
+			context.overridableProp = serverContext.overridableProp;
+		},
+	},
+} );
+```
+
+#### getServerState()
+
+Retrieves the server state an interactive region.
+
+This function is serves the same purpose as `getServerContext()`, but it returns the **state** instead of the **context**.
+
+The object returned is read-only, and includes the state defined in PHP with `wp_interactivity_state()`. When using [`actions.navigate()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/#actions) from [`@wordpress/interactivity-router`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/), the object returned by `getServerState()` is updated to reflect the changes in its properties, without affecting the state returned by `store()`. Directives can subscribe to those changes to update the state if needed.
+
+```js
+const serverState = getServerState( 'namespace' );
+```
+
+-   `namespace` (optional): A string that matches the namespace of an interactive region. If not provided, it retrieves the server state of the current interactive region.
+
+Example usage:
+
+```js
+const { state } = store( 'myStore', {
+	callbacks: {
+		updateServerState() {
+			const serverState = getServerState();
+			// Override some property with the new value that came from the server.
+			state.overridableProp = serverState.overridableProp;
+		},
+	},
+} );
+```
+
+#### getElement()
+
+Retrieves a representation of the element that the action is bound to or called from. Such representation is read-only, and contains a reference to the DOM element, its props and a local reactive state.
+It returns an object with two keys:
+
+##### ref
+
+`ref` is the reference to the DOM element as an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). It is equivalent to `useRef` in Preact or React, so it can be `null` when `ref` has not been attached to the actual DOM element yet, i.e., when it is being hydrated or mounted.
+
+##### attributes
+
+`attributes` contains a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), which adds a getter that allows to reference other store namespaces. Feel free to check the getter in the code. [Link](https://github.com/WordPress/gutenberg/blob/8cb23964d58f3ce5cf6ae1b6f967a4b8d4939a8e/packages/interactivity/src/store.ts#L70)
+
+Those attributes will contain the directives of that element. In the button example:
+
+```js
+// store
+import { store, getElement } from '@wordpress/interactivity';
+
+store( 'myPlugin', {
+	actions: {
+		log: () => {
+			const element = getElement();
+			// Logs attributes
+			console.log( 'element attributes => ', element.attributes );
+		},
+	},
+} );
+```
+
+The code will log:
+
+```json
+{
+	"data-wp-on--click": 'actions.log',
+	"children": ['Log'],
+	"onclick": event => { evaluate(entry, event); }
+}
+```
+
+### withScope()
+
+Actions can depend on the scope when they are called, e.g., when you call `getContext()` or `getElement()`.
+
+When the Interactivity API runtime execute callbacks, the scope is set automatically. However, if you call an action from a callback that is not executed by the runtime, like in a `setInterval()` callback, you need to ensure that the scope is properly set. Use the `withScope()` function to ensure the scope is properly set in these cases.
+
+An example, where `actions.nextImage` would trigger an undefined error without the wrapper:
+
+```js
+store( 'mySliderPlugin', {
+	callbacks: {
+		initSlideShow: () => {
+			setInterval(
+				withScope( () => {
+					actions.nextImage();
+				} ),
+				3_000
+			);
+		},
+	},
+} );
+```
+
+## Server functions
+
+The Interactivity API comes with handy functions that allow you to initialize and reference configuration options on the server. This is necessary to feed the initial data that the Server Directive Processing will use to modify the HTML markup before it's send to the browser. It is also a great way to leverage many of WordPress's APIs, like nonces, AJAX, and translations.
+
+### wp_interactivity_config
+
+`wp_interactivity_config` allows to set or get a configuration array, referenced to a store namespace.
+The configuration is also available on the client, but it is static information.
+
+Consider it a global setting for interactions of a site, that won't be updated on user interactions.
+
+An example of setting:
+
+```php
+	wp_interactivity_config( 'myPlugin', array( 'showLikeButton' => is_user_logged_in() ) );
+```
+
+An example of getting:
+
+```php
+  wp_interactivity_config( 'myPlugin' );
+```
+
+This config can be retrieved on the client:
+
+```js
+// view.js
+
+const { showLikeButton } = getConfig();
+```
+
+### wp_interactivity_state
+
+`wp_interactivity_state` allows the initialization of the global state on the server, which will be used to process the directives on the server and then will be merged with any global state defined in the client.
+
+Initializing the global state on the server also allows you to use many critical WordPress APIs, including [AJAX](https://developer.wordpress.org/plugins/javascript/ajax/), or [nonces](https://developer.wordpress.org/plugins/javascript/enqueuing/#nonce).
+
+The `wp_interactivity_state` function receives two arguments, a string with the namespace that will be used as a reference and an associative array containing the values.
+
+Here is an example of passing the WP Admin AJAX endpoint with a nonce.
+
+```php
+// render.php
+
+wp_interactivity_state(
+	'myPlugin',
+	array(
+		'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+		'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
+	),
+);
+```
+
+```js
+// view.js
+
+const { state } = store( 'myPlugin', {
+	actions: {
+		*doSomething() {
+			try {
+				const formData = new FormData();
+				formData.append( 'action', 'do_something' );
+				formData.append( '_ajax_nonce', state.nonce );
+
+				const data = yield fetch( state.ajaxUrl, {
+					method: 'POST',
+					body: formData,
+				} ).then( ( response ) => response.json() );
+				console.log( 'Server data!', data );
+			} catch ( e ) {
+				// Something went wrong!
+			}
+		},
+	},
+} );
+```
+
+### wp_interactivity_process_directives
+
+`wp_interactivity_process_directives` returns the updated HTML after the directives have been processed.
+
+It is the Core function of the Interactivity API server side rendering part, and is public so any HTML can be processed, whether is a block or not.
+
+This code
+
+```php
+wp_interactivity_state( 'myPlugin', array( 'greeting' => 'Hello, World!' ) );
+$html_content = '<div data-wp-text="myPlugin::state.greeting"></div>';
+$processed_html = wp_interactivity_process_directives( $html_content );
+echo $processed_html;
+```
+
+will output:
+
+```html
+<div data-wp-text="myPlugin::state.greeting">Hello, World!</div>
+```
+
+### wp_interactivity_data_wp_context
+
+`wp_interactivity_data_wp_context` returns a stringified JSON of a context directive.
+This function is the recommended way to print the `data-wp-context` attribute in the server side rendered markup.
+
+```php
+
+$my_context = array(
+	'counter' => 0,
+	'isOpen'  => true,
+);
+?>
+<div
+ <?php echo wp_interactivity_data_wp_context( $my_context ); ?>
+>
+</div>
+```
+
+will output:
+
+```html
+<div data-wp-context='{"counter":0,"isOpen":true}'></div>
+```
diff --git a/docs/reference-guides/interactivity-api/core-concepts/README.md b/docs/reference-guides/interactivity-api/core-concepts/README.md
new file mode 100644
index 00000000000000..695a4d622f6c52
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/README.md
@@ -0,0 +1,11 @@
+# Core Concepts
+
+This section provides some guides on important concepts and mental models related to Interactivity API development. Use the following links to learn more:
+
+1. **[The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md):** This guide covers core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
+
+2. **[Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
+
+3. **[Server-side rendering: Processing directives on the server](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.
+
+4. **[Using TypeScript](/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md):** This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
new file mode 100644
index 00000000000000..075c2cb977bdfd
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
@@ -0,0 +1,491 @@
+# Server-side rendering: Processing directives on the server
+
+WordPress has always been built on the foundation of server-side rendering. Traditionally, when a user requests a WordPress page, the server processes the PHP code, queries the database, and generates the HTML markup that is sent to the browser.
+
+In recent years, modern JavaScript frameworks like Vue, React, or Svelte have revolutionized the way we build web applications. These frameworks provide reactive and declarative programming models that enable developers to create dynamic, interactive user interfaces with ease.
+
+However, when it comes to server-side rendering, these frameworks require a JavaScript-based server, such as NodeJS, to execute their code and generate the initial HTML. This means that PHP-based servers, like WordPress, cannot directly utilize these frameworks without sacrificing their native PHP rendering capabilities. This limitation poses a challenge for WordPress developers who want to leverage the power of reactive and declarative programming while still benefiting from WordPress's traditional server-side rendering strengths. The Interactivity API bridges this gap by bringing [reactive and declarative programming principles](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) to WordPress without compromising its server-side rendering foundation.
+
+In this guide, we'll explore how the Interactivity API processes directives on the server, enabling WordPress to deliver interactive, state-aware HTML from the initial page load, while setting the stage for seamless client-side interactivity.
+
+## Processing the directives on the server
+
+The Interactivity API's Server Directive Processing capabilities enable WordPress to generate the initial HTML with the correct interactive state, providing a faster initial render. After the initial server-side render, the Interactivity API's client-side JavaScript takes over, enabling dynamic updates and interactions without requiring full page reloads. This approach combines the best of both worlds: the SEO and performance benefits of traditional WordPress server-side rendering, and the dynamic, reactive user interfaces offered by modern JavaScript frameworks.
+
+To understand how the Server Directive Processing works, let's start with an example where a list of fruits is rendered using the `data-wp-each` directive.
+
+The following are the necessary steps to ensure that the directives are correctly processed by the Server Directive Processing of the Interactivity API during the server-side rendering of WordPress.
+
+-   **1. Mark the block as interactive**
+
+    First, to enable the server processing of the interactive block's directives, you must add `supports.interactivity` to the `block.json`:
+
+    ```json
+    {
+    	"supports": {
+    		"interactivity": true
+    	}
+    }
+    ```
+
+-   **2. Initialize the global state or local context**
+
+    Then, you must initialize either the global state or the local context that will be used during the server-side rendering of the page.
+
+    If you are using global state, you must use the `wp_interactivity_state` function:
+
+    ```php
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits' => array( 'Apple', 'Banana', 'Cherry' )
+    ));
+    ```
+
+    If you are using local context, the initial values are defined with the `data-wp-context` directive itself, either by:
+
+    -   Adding it directly to the HTML.
+
+        ```html
+        <ul data-wp-context='{ "fruits": ["Apple", "Banana", "Cherry"] }'>
+        	...
+        </ul>
+        ```
+
+    -   Using the `wp_interactivity_data_wp_context` helper.
+
+        ```php
+        <?php
+        $context = array( 'fruits' => array( 'Apple', 'Banana', 'Cherry' ) );
+        ?>
+
+        <ul <?php echo wp_interactivity_data_wp_context( $context ); ?>>
+          ...
+        </ul>
+        ```
+
+-   **3. Define the interactive elements using directives**
+
+    Next, you need to add the necessary directives to the HTML markup.
+
+    ```html
+    <ul data-wp-interactive="myFruitPlugin">
+    	<template data-wp-each="state.fruits">
+    		<li data-wp-text="context.item"></li>
+    	</template>
+    </ul>
+    ```
+
+    In this example:
+
+    -   The `data-wp-interactive` directive activates the interactivity for the DOM element and its children.
+    -   The `data-wp-each` directive is used to render a list of elements. The directive can be used in `<template>` tags, with the value being a reference path to an array stored in the global state or the local context.
+    -   The `data-wp-text` directive sets the inner text of an HTML element. Here, it points to `context.item`, which is where the `data-wp-each` directive stores each item of the array.
+
+    The exact same directives can also be used when using local context instead of global state. The only difference is that `data-wp-each` points to `context.fruits` instead of `state.fruits`:
+
+    ```html
+    <ul
+    	data-wp-interactive="myFruitPlugin"
+    	data-wp-context='{ "fruits": [ "Apple", "Banana", "Cherry" ] }'
+    >
+    	<template data-wp-each="context.fruits">
+    		<li data-wp-text="context.item"></li>
+    	</template>
+    </ul>
+    ```
+
+That's it! Once you've set up your interactive block with `supports.interactivity`, initialized your global state or local context, and added the directives to the HTML markup, the Interactivity API will take care of the rest. There's no additional code required from the developer to process these directives on the server side.
+
+Behind the scenes, WordPress uses the `wp_interactivity_process_directives` function to find and process the directives in the HTML markup of your block. This function uses the HTML API to make the necessary changes to the markup, based on the found directives and the initial global state and/or local context.
+
+As a result, the HTML markup sent to the browser is already in its final form, with all directives correctly processed. This means that when the page first loads in the browser, it already contains the correct initial state of all interactive elements, without needing any JavaScript to modify it.
+
+This is how the final HTML markup of the fruit list example would look like (directives omitted):
+
+```html
+<ul>
+	<li>Apple</li>
+	<li>Banana</li>
+	<li>Cherry</li>
+</ul>
+```
+
+As you can see, the `data-wp-each` directive has generated a `<li>` element for each fruit in the array, and the `data-wp-text` directive has been processed, populating each `<li>` with the correct fruit name.
+
+## Manipulating the global state and local context in the client
+
+One of the key strengths of the Interactivity API is how it bridges the gap between server-side rendering and client-side interactivity. To do so, the global state and local context initialized on the server are also serialized and made available to the Interactivity API stores in the client, allowing the application to continue functioning and manipulating the DOM dynamically.
+
+Let's extend this example to include a button that the user can click to add a new fruit to the list:
+
+```html
+<button data-wp-on-async--click="actions.addMango">Add Mango</button>
+```
+
+This new button has a `data-wp-on-async--click` directive that references `actions.addMango`, which is defined in our JavaScript store:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			state.fruits.push( 'Mango' );
+		},
+	},
+} );
+```
+
+The same example would also work if you were using local context:
+
+```javascript
+store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			const context = getContext();
+			context.fruits.push( 'Mango' );
+		},
+	},
+} );
+```
+
+Now, when the user clicks the "Add Mango" button:
+
+1.  The `addMango` action is triggered.
+2.  The `'Mango'` item is added to the `state.fruits` (or `context.fruits`) array.
+3.  The Interactivity API automatically updates the DOM, adding a new `<li>` element for the new fruit.
+
+```html
+<ul>
+	<li>Apple</li>
+	<li>Banana</li>
+	<li>Cherry</li>
+	<li>Mango</li>
+</ul>
+```
+
+Remember: initializing the state on the client is not necessary when it has already been done on the server.
+
+```javascript
+store( 'myFruitPlugin', {
+	state: {
+		fruits: [ 'Apple', 'Banana', 'Cherry' ], // This is not necessary!
+	},
+} );
+```
+
+## Initializing the derived state in the server
+
+The derived state, regardless of whether it derives from the global state, local context, or both, can also be processed on the server by the Server Directive Processing.
+
+_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+
+### Derived state that can be defined statically
+
+Let's imagine adding a button that can delete all fruits:
+
+```html
+<button data-wp-on-async--click="actions.deleteFruits">
+	Delete all fruits
+</button>
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		// ...
+		deleteFruits() {
+			state.fruits = [];
+		},
+	},
+} );
+```
+
+Now, let's display a special message when there is no fruit. To do this, let's use a `data-wp-bind--hidden` directive that references a derived state called `state.hasFruits` to show/hide the message.
+
+```html
+<div data-wp-interactive="myFruitPlugin">
+	<ul data-wp-bind--hidden="!state.hasFruits">
+		<template data-wp-each="state.fruits">
+			<li data-wp-text="context.item"></li>
+		</template>
+	</ul>
+	<div data-wp-bind--hidden="state.hasFruits">No fruits, sorry!</div>
+</div>
+```
+
+The derived state `state.hasFruits` is defined on the client using a getter:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	state: {
+		get hasFruits() {
+			return state.fruits.length > 0;
+		},
+	},
+	// ...
+} );
+```
+
+Up to this point, everything is fine in the client, and when we press the "Delete all fruits" button, the "No fruits, sorry!" message will be displayed. The problem is that since `state.hasFruits` is not defined on the server, the `hidden` attribute will not be part of the initial HTML, which means it will also be showing the message until JavaScript loads, causing not only confusion to the visitor, but also a layout shift when JavaScript finally loads and the message is hidden.
+
+To fix this, you must define the initial value of the derived state in the server using `wp_interactivity_state`.
+
+-   When the initial value is known and static, it can be defined directly:
+
+    ```php
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits'    => array( 'Apple', 'Banana', 'Cherry' ),
+      'hasFruits' => true
+    ));
+    ```
+
+-   Or it can be defined by doing the necessary computations:
+
+    ```php
+    $fruits    = array( 'Apple', 'Banana', 'Cherry' );
+    $hasFruits = count( $fruits ) > 0;
+
+    wp_interactivity_state( 'myFruitPlugin', array(
+      'fruits'    => $fruits,
+      'hasFruits' => $hasFruits,
+    ));
+    ```
+
+Regardless of the approach, the key point is that the initial value of `state.hasFruits` is now defined on the server. This allows the Server Directive Processing to handle the `data-wp-bind--hidden` directive and modify the HTML markup, adding the `hidden` attribute when needed.
+
+### Derived state that needs to be defined dynamically
+
+In most cases, the initial derived state can be defined statically, as in the previous example. But sometimes, the value depends on dynamic values that also change in the server, and the derived logic needs to be replicated in PHP.
+
+To see an example of this, let's continue by adding a shopping cart emoji (🛒) for each fruit, depending on whether it is on a shopping list or not.
+
+First, let's add an array that represents the shopping list. _Remember that even though these arrays are static for simplicity sake, usually you will work with dynamic information, for example, information coming from the database._
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'        => array( 'Apple', 'Banana', 'Cherry' ),
+  'shoppingList'  => array( 'Apple', 'Cherry' ),
+));
+```
+
+Now, let's add a derived state on the client that checks if each fruit is on the shopping list or not and returns the emoji.
+
+```javascript
+store( 'myFruitPlugin', {
+	state: {
+		get onShoppingList() {
+			const context = getContext();
+			return state.shoppingList.includes( context.item ) ? '🛒' : '';
+		},
+	},
+	// ...
+} );
+```
+
+And let's use that derived state to show the appropriate emoji for each fruit.
+
+```html
+<ul data-wp-interactive="myFruitPlugin">
+	<template data-wp-each="state.fruits">
+		<li>
+			<span data-wp-text="context.item"></span>
+			<span data-wp-text="state.onShoppingList"></span>
+		</li>
+	</template>
+</ul>
+```
+
+Again, up to this point, everything is fine on the client side and the visitor will see the correct emoji displayed for the fruits they have on their shopping list. However, since `state.onShoppingList` is not defined on the server, the emoji will not be part of the initial HTML, and it will not be shown until JavaScript loads.
+
+Let's fix that by adding the initial derived state using `wp_interactivity_state`. Remember that this time, the value depends on `context.item` that comes from the `data-wp-each` directive, which makes the derived value dynamic, so let's replicate the JavaScript logic in PHP:
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  // ...
+  'onShoppingList' => function() {
+    $state   = wp_interactivity_state();
+    $context = wp_interactivity_get_context();
+    return in_array( $context['item'], $state['shoppingList'] ) ? '🛒' : '';
+  }
+));
+```
+
+That's it! Now, our server can compute the derived state and know which fruits are on the shopping list and which are not. This allows the Server Directive Processing to populate the initial HTML with the correct values, ensuring that the user sees the correct information immediately, even before the JavaScript runtime loads.
+
+## Serializing other processed values to be consumed on the client
+
+The `wp_interactivity_state` function is also valuable for sending processed values from the server to the client so they can be consumed later on. This feature is useful in many situations, such as managing translations.
+
+Let's add translations to our example to see how this would work.
+
+```php
+<?php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'         => array( __( 'Apple' ), __( 'Banana' ), __( 'Cherry' ) ),
+  'shoppingList'   => array( __( 'Apple' ), __( 'Cherry' ) ),
+  // ...
+?>
+
+<div data-wp-interactive="myFruitPlugin">
+  <button data-wp-on-async--click="actions.deleteFruits">
+    <?php echo __( 'Delete all fruits' ); ?>
+  </button>
+  <button data-wp-on-async--click="actions.addMango">
+    <?php echo __( 'Add Mango' ); ?>
+  </button>
+  <ul data-wp-bind--hidden="!state.hasFruits">
+    <template data-wp-each="state.fruits">
+      <li>
+        <span data-wp-text="context.item"></span>
+        <span data-wp-text="state.onShoppingList"></span>
+      </li>
+    </template>
+  </ul>
+  <div data-wp-bind--hidden="state.hasFruits">
+    <?php echo __( 'No fruits, sorry!' ); ?>
+  </div>
+</div>
+```
+
+That's it! Since the Interactivity API works in PHP, you can add translations directly to the global state, the local context and the HTML markup.
+
+But wait, what happens with our `addMango` action? Remember, this action is defined only on JavaScript:
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			state.fruits.push( 'Mango' ); // Not translated!
+		},
+	},
+} );
+```
+
+To fix this issue, you can use the `wp_interactivity_state` function to serialize the translated mango string and then access that value in your action.
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits' => array( __( 'Apple' ), __( 'Banana' ), __( 'Cherry' ) ),
+  'mango'  => __( 'Mango' ),
+));
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+	actions: {
+		addMango() {
+			// `state.mango` contains the 'Mango' string already translated.
+			state.fruits.push( state.mango );
+		},
+	},
+} );
+```
+
+Take into account that if your application is more dynamic, you could serialize an array with all the fruit translations and just work with _fruit keywords_ in your actions. For example:
+
+```php
+wp_interactivity_state( 'myFruitPlugin', array(
+  'fruits'           => array( 'apple', 'banana', 'cherry' ),
+  'translatedFruits' => array(
+    'apple'  => __( 'Apple' ),
+    'banana' => __( 'Banana' ),
+    'cherry' => __( 'Cherry' ),
+    'mango'  => __( 'Mango' ),
+  ),
+  'translatedFruit'  => function() {
+    $state   = wp_interactivity_state();
+    $context = wp_interactivity_get_context();
+    return $state['translatedFruits'][ $context['item'] ];
+  }
+));
+```
+
+```javascript
+const { state } = store( 'myFruitPlugin', {
+  state: {
+    get translatedFruit() {
+      const context = getContext();
+      return state.translatedFruits[ context.item ];
+    }
+  }
+  actions: {
+    addMango() {
+      state.fruits.push( 'mango' );
+    },
+  },
+} );
+```
+
+```html
+<template data-wp-each="state.fruits">
+	<li data-wp-text="state.translatedFruit"></li>
+</template>
+```
+
+Serializing information from the server can also be useful in other scenarios, such as passing Ajax/REST-API URLs and nonces.
+
+```php
+wp_interactivity_state( 'myPlugin', array(
+  'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+  'nonce'   => wp_create_nonce( 'myPlugin_nonce' ),
+));
+```
+
+```js
+const { state } = store( 'myPlugin', {
+	actions: {
+		*doSomething() {
+			const formData = new FormData();
+			formData.append( 'action', 'do_something' );
+			formData.append( '_ajax_nonce', state.nonce );
+
+			const data = yield fetch( state.ajaxUrl, {
+				method: 'POST',
+				body: formData,
+			} ).then( ( response ) => response.json() );
+
+			console.log( 'Server data', data );
+		},
+	},
+} );
+```
+
+## Processing directives in classic themes
+
+Server Directive Processing happens automatically in your interactive blocks as soon as you add `supports.interactivity` to your `block.json` file. But what about classic themes?
+
+Classic themes can also use the Interactivity API, and if they want to take advantage of the Server Directive Processing (which they should), they can do so through the `wp_interactivity_process_directives` function. This function receives the HTML markup with unprocessed directives and returns the HTML markup modified according to the initial values of the global state, local context, and derived state.
+
+```php
+// Initializes the global and derived state…
+wp_interactivity_state( '...', /* ... */ );
+
+// The interactive HTML markup that contains the directives.
+$html = '<div data-wp-...>...</div>';
+
+// Processes the directives so they are ready to be sent to the client.
+$processed_html = wp_interactivity_process_directives( $html );
+```
+
+That's it! There's nothing else you need to do.
+
+If you want to use `wp_interactivity_process_directives` in a template file, you can use `ob_start` and `ob_get_clean` to capture the HTML output and process it before rendering.
+
+```php
+<?php
+wp_interactivity_state( 'myClassicTheme', /* ... */ );
+ob_start();
+?>
+
+<div data-wp-interactive="myClassicTheme">
+  ...
+</div>
+
+<?php
+$html = ob_get_clean();
+echo wp_interactivity_process_directives( $html );
+```
+
+**Important:** You only need to process the directives once. If you're including an inner template file within another template, ensure that `wp_interactivity_process_directives` is only called in the outermost template file to avoid redundant processing.
+
+## Conclusion
+
+The Interactivity API ensures a smooth and transparent transition from server-rendered content to client-side interactivity. The directives you define on the server, the initial global state or local context, and the client-side behavior all form part of the same ecosystem. This unified approach simplifies development, improves maintainability, and provides a better developer experience when creating interactive WordPress blocks.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
new file mode 100644
index 00000000000000..3760fdf3867802
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md
@@ -0,0 +1,300 @@
+# The Reactive and Declarative mindset
+
+The Interactivity API is a reactive and declarative framework, similar to other modern frameworks like React, Vue, Svelte, or Alpine. When working with the Interactivity API, adopting the right mindset is crucial for maximizing its potential. This guide will explain the core concepts of reactivity and declarativeness, providing a foundation for effective use of the Interactivity API.
+
+## Declarative vs. imperative
+
+**Declarative Programming** describes _what_ a program should accomplish. It focuses on the desired outcome without explicitly listing commands or steps to achieve that result. In contrast, **imperative programming** specifies _how_ to accomplish tasks by explicitly stating each step to manipulate the program’s state.
+
+### The imperative approach
+
+In the early days of web development, the imperative approach was predominant. This method involves manually updating the DOM with JavaScript to reflect changes.
+
+Take, for example, this interactive block with two buttons and a paragraph:
+
+-   **The show/hide button**: Toggles paragraph visibility and enables/disables the "Activate" button.
+-   **The activate/deactivate button**: Toggles the paragraph's text and color between "active" (green) and "inactive" (red).
+
+```html
+<div id="my-interactive-plugin">
+	<button
+		id="show-hide-btn"
+		aria-expanded="false"
+		aria-controls="status-paragraph"
+	>
+		show
+	</button>
+	<button id="activate-btn" disabled>activate</button>
+	<p id="status-paragraph" class="inactive" hidden>this is inactive</p>
+</div>
+
+<script>
+	const showHideBtn = document.getElementById( 'show-hide-btn' );
+	const activateBtn = document.getElementById( 'activate-btn' );
+	const statusParagraph = document.getElementById( 'status-paragraph' );
+
+	showHideBtn.addEventListener( 'click', () => {
+		if ( statusParagraph.hasAttribute( 'hidden' ) ) {
+			statusParagraph.removeAttribute( 'hidden' );
+			showHideBtn.textContent = 'hide';
+			showHideBtn.setAttribute( 'aria-expanded', 'true' );
+			activateBtn.removeAttribute( 'disabled' );
+		} else {
+			if ( statusParagraph.classList.contains( 'active' ) ) {
+				statusParagraph.textContent = 'this is inactive';
+				statusParagraph.classList.remove( 'active' );
+				activateBtn.textContent = 'activate';
+			}
+			statusParagraph.setAttribute( 'hidden', true );
+			showHideBtn.textContent = 'show';
+			showHideBtn.setAttribute( 'aria-expanded', 'false' );
+			activateBtn.setAttribute( 'disabled', true );
+		}
+	} );
+
+	activateBtn.addEventListener( 'click', () => {
+		if ( activateBtn.textContent === 'activate' ) {
+			statusParagraph.textContent = 'this is active';
+			statusParagraph.classList.remove( 'inactive' );
+			statusParagraph.classList.add( 'active' );
+			activateBtn.textContent = 'deactivate';
+		} else {
+			statusParagraph.textContent = 'this is inactive';
+			statusParagraph.classList.remove( 'active' );
+			statusParagraph.classList.add( 'inactive' );
+			activateBtn.textContent = 'activate';
+		}
+	} );
+</script>
+```
+
+As you can see, for each condition, you have to use JavaScript to modify everything in the DOM that has changed, taking into account the previous state.
+
+### The declarative approach
+
+The declarative approach simplifies the process by focusing on _what_ should happen. The UI updates automatically in response to changes in state. Here is a similar example using the Interactivity API's declarative approach:
+
+```html
+<div id="my-interactive-plugin" data-wp-interactive="myInteractivePlugin">
+	<button
+		data-wp-on--click="actions.toggleVisibility"
+		data-wp-bind--aria-expanded="state.isVisible"
+		data-wp-text="state.visibilityText"
+		aria-controls="status-paragraph"
+	>
+		show
+	</button>
+	<button
+		data-wp-on--click="actions.toggleActivation"
+		data-wp-bind--disabled="!state.isVisible"
+		data-wp-text="state.activationText"
+	>
+		activate
+	</button>
+	<p
+		id="status-paragraph"
+		data-wp-bind--hidden="!state.isVisible"
+		data-wp-class--active="state.isActive"
+		data-wp-class--inactive="!state.isActive"
+		data-wp-text="state.paragraphText"
+	>
+		this is inactive
+	</p>
+</div>
+```
+
+```js
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'myInteractivePlugin', {
+	state: {
+		isVisible: false,
+		isActive: false,
+		get visibilityText() {
+			return state.isVisible ? 'hide' : 'show';
+		},
+		get activationText() {
+			return state.isActive ? 'deactivate' : 'activate';
+		},
+		get paragraphText() {
+			return state.isActive ? 'this is active' : 'this is inactive';
+		},
+	},
+	actions: {
+		toggleVisibility() {
+			state.isVisible = ! state.isVisible;
+			if ( ! state.isVisible ) state.isActive = false;
+		},
+		toggleActivation() {
+			state.isActive = ! state.isActive;
+		},
+	},
+} );
+```
+
+In this declarative example, the UI automatically updates based on the current state. All you have to do as developers is to declare the necessary state, any derived state, the actions that modify the state, and which parts of the DOM depend on which parts of the state. The framework takes care of making all the necessary updates to the DOM so that it is always in sync with the current state. The logic remains simple and maintainable regardless of the number of elements controlled by the framework.
+
+### Can you spot the bug?
+
+In the imperative example, a bug has been intentionally introduced for didactical purposes. Can you find it? It's not easy!
+
+<details>
+<summary>Show me the answer!</summary>
+
+In the case that the Show button is pressed first, then the Activate button, and finally the Hide button, it doesn't add the `inactive` class using `statusParagraph.classList.add('inactive');`. Therefore, the next time the user presses Show, the paragraph will not appear in red.
+
+</details>
+
+These types of bugs are very common in imperative code because you have to manually control all the conditions. On the other hand, they do not exist in declarative code because the framework takes care of updating the DOM and never forgets about anything.
+
+### Benefits of the declarative approach
+
+As demonstrated, the imperative approach requires detailed steps and direct manipulation of the DOM, which can quickly become complex and hard to maintain as the interactivity complexity grows. The more possible states and elements there are, the more conditional logic needs to be added, making the code exponentially more complicated. The declarative approach, on the other hand, simplifies the process by managing the state and letting the framework handle the DOM updates. This leads to more readable, maintainable, and scalable code.
+
+## Reactivity
+
+The Interactivity API is a declarative framework thanks to its leverage of reactivity. In a reactive system, changes to the data automatically trigger updates in the user interface, ensuring that the view always reflects the current state of the application.
+
+### How reactivity works
+
+The Interactivity API uses a fine-grained reactivity system. Here's how it works:
+
+1. **Reactive State**: In the Interactivity API, both the global state and the local context are reactive. This means that when either of these data sources changes, any parts of the UI that depend on them will automatically update.
+
+    - **Global state**: This is global data that can be accessed throughout your interactive blocks.
+    - **Local context**: This is local data that is specific to a particular element and its children.
+    - **Derived State**: In addition to basic state properties, you can define computed properties that automatically update when their dependencies change.
+
+    _Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how to work with the different types of reactive state in the Interactivity API._
+
+2. **Actions**: These are functions, usually triggered by event handlers, that mutate the global state or local context.
+
+3. **Reactive Bindings**: HTML elements are bound to reactive state values using special attributes like `data-wp-bind`, `data-wp-text`, or `data-wp-class`.
+
+4. **Automatic Updates**: When the actions mutate the global state or local context, the Interactivity API automatically updates all the parts of the DOM that depend on that state (either directly or through the derived state).
+
+Let's break down these concepts by reviewing the previous example:
+
+```javascript
+const { state } = store( 'myInteractivePlugin', {
+	state: {
+		isVisible: false,
+		isActive: false,
+		get visibilityText() {
+			return state.isVisible ? 'hide' : 'show';
+		},
+		// ... other derived state
+	},
+	actions: {
+		toggleVisibility() {
+			state.isVisible = ! state.isVisible;
+		},
+		// ... other actions
+	},
+} );
+```
+
+In this code:
+
+-   `isVisible` and `isActive` are basic state properties.
+-   `visibilityText` is a derived state that automatically updates when `isVisible` changes.
+-   `toggleVisibility` is an action that modifies the state.
+
+The HTML bindings look like this:
+
+```html
+<button
+	data-wp-on--click="actions.toggleVisibility"
+	data-wp-text="state.visibilityText"
+	data-wp-bind--aria-expanded="state.isVisible"
+>
+	show
+</button>
+```
+
+Here's how reactivity works in practice:
+
+1. When the button is clicked, it triggers the `toggleVisibility` action.
+2. This action updates `state.isVisible`.
+3. The Interactivity API detects this change and automatically:
+    - Updates the button's text content (because of `data-wp-text="state.visibilityText"`).
+    - Changes the `aria-expanded` attribute (due to `data-wp-bind--aria-expanded="state.isVisible"`).
+    - Updates any other parts of the DOM that depend on `isVisible` or `visibilityText`.
+
+### Mutability vs immutability
+
+Unlike many other reactive frameworks, **the Interactivity API does not require the use of immutability** when updating the global state or the local context. You can directly mutate objects and arrays, and the reactivity system will still work as expected. This can lead to more intuitive and straightforward code in many cases.
+
+For example, you can push a new item to an array like this:
+
+```javascript
+const { state } = store( 'myArrayPlugin', {
+	state: {
+		list: [ 'item 1', 'item 2' ],
+	},
+	actions: {
+		addItem() {
+			// Right:
+			state.list.push( 'new item' );
+
+			// Wrong:
+			state.list = [ ...state.list, 'new item' ]; // Don't do this!
+		},
+	},
+} );
+```
+
+There's no need to create a new array or use the spread operator as you might in other frameworks. The Interactivity API will detect this change and update any parts of the UI that depend on `state.list`.
+
+### Reactive side effects
+
+In addition to automatically updating the UI, the Interactivity API allows you to perform side effects when reactive data changes using directives like `data-wp-watch`. Side effects are useful for tasks like logging, making API calls, or updating other parts of your application that aren't directly tied to the UI.
+
+Here's an example of how you might use `data-wp-watch`:
+
+```html
+<div
+	data-wp-interactive="myCounterPlugin"
+	data-wp-context='{ "counter": 0 }'
+	data-wp-watch="callbacks.logCounter"
+>
+	<p>Counter: <span data-wp-text="context.counter"></span></p>
+	<button data-wp-on--click="actions.increment">Increment</button>
+</div>
+```
+
+```javascript
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+	callbacks: {
+		logCounter: () => {
+			const context = getContext();
+			console.log( `The counter is now: ${ context.counter }` );
+		},
+	},
+} );
+```
+
+In this example:
+
+1. The `data-wp-context` directive adds a local context with a property `counter` whose value is `0`.
+2. The `data-wp-watch` directive is set to `callbacks.logCounter`.
+3. Every time `context.counter` changes, the `logCounter` callback will be executed.
+4. The `logCounter` callback logs the current counter to the console.
+
+This allows you to create declarative side effects that automatically run in response to data changes. Some other use cases for `data-wp-watch` might include:
+
+-   Saving data to `localStorage` when the data changes.
+-   Sending analytics events.
+-   Changing the focus for accessibility purposes.
+-   Updating the page title, meta tags, or `<body>` attributes.
+-   Triggering animations.
+
+## Conclusion
+
+As you continue to work with the Interactivity API, remember to think in terms of state, actions, and side effects. Define your data, describe how it should change, and let the Interactivity API handle the rest. This mental shift may take some time, especially if you're used to more imperative programming styles, but by embracing it, you'll unlock the full potential of the Interactivity API to create truly dynamic and interactive WordPress blocks that delight your users.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
new file mode 100644
index 00000000000000..f6145749a00b19
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md
@@ -0,0 +1,842 @@
+# Understanding global state, local context and derived state
+
+The Interactivity API offers a powerful framework for creating interactive blocks. To make the most of its capabilities, it's crucial to understand when to use global state, local context, or derived state. This guide will clarify these concepts and provide practical examples to help you decide when to use each one.
+
+Let's start with a brief definition of global state, local context and derived state.
+
+-   **Global state:** Global data that can be accessed and modified by any interactive block on the page, allowing different parts of your interactive blocks to stay in sync.
+-   **Local context:** Local data defined within a specific element in the HTML structure, accessible only to that element and its children, providing independent state for individual blocks.
+-   **Derived state:** Computed values based on global state or local context, dynamically calculated on-demand to ensure consistent data representation without storing redundant data.
+
+Let's now dive into each of these concepts to study them in more detail and provide some examples.
+
+## Global state
+
+**Global state** in the Interactivity API refers to global data that can be accessed and modified by any interactive block on the page. It serves as a shared information hub, allowing different parts of your blocks to communicate and stay in sync. Global state is the ideal mechanism for exchanging information between interactive blocks, regardless of their position in the DOM tree.
+
+You should use global state when:
+
+-   You need to share data between multiple interactive blocks that are not directly related in the DOM hierarchy.
+-   You want to maintain a single source of truth for certain data across all your interactive blocks.
+-   You're dealing with data that affects multiple parts of your UI simultaneously.
+-   You want to implement features that are global for the page.
+
+### Working with global state
+
+-   **Initializing the global state**
+
+    Typically, the initial global state values should be defined on the server using the `wp_interactivity_state` function:
+
+    ```php
+    // Populates the initial global state values.
+    wp_interactivity_state( 'myPlugin', array(
+      'isDarkTheme' => true,
+      'show'        => false,
+      'helloText'   => __( 'world' ),
+    ));
+    ```
+
+    These initial global state values will be used during the rendering of the page in PHP to populate the HTML markup that is sent to the browser.
+
+    -   HTML markup written in the PHP file by the developer:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin"
+        >
+        	<div data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText"></span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    -   HTML markup after the directives have been processed and it is ready to be sent to the browser:
+
+        ```html
+        <div
+        	data-wp-interactive="myPlugin"
+        	data-wp-class--is-dark-theme="state.isDarkTheme"
+        	class="my-plugin is-dark-theme"
+        >
+        	<div hidden data-wp-bind--hidden="!state.show">
+        		Hello <span data-wp-text="state.helloText">world</span>
+        	</div>
+        	<button data-wp-on-async--click="actions.toggle">Toggle</button>
+        </div>
+        ```
+
+    _Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about how directives are processed on the server._
+
+    In cases where the global state is not used during the rendering of the page in PHP, it can also be defined directly on the client.
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		isLoading: false,
+    	},
+    	actions: {
+    		*loadSomething() {
+    			state.isLoading = true;
+    			// ...
+    		},
+    	},
+    } );
+    ```
+
+    _Please note that, although this works, in general it is a good practice to define all the global state on the server._
+
+-   **Accessing the global state**
+
+    In the HTML markup, you can access the global state values directly by referencing `state` in the directive attribute values:
+
+    ```html
+    <div data-wp-bind--hidden="!state.show">
+    	<span data-wp-text="state.helloText"></span>
+    </div>
+    ```
+
+    In JavaScript, the `store` function from the package at `@wordpress/interactivity` works both as a setter and a getter, returning the store of the selected namespace.
+
+    To access the global state in your actions and callbacks, you can use the `state` property of the object returned by the `store` function:
+
+    ```js
+    const myPluginStore = store( 'myPlugin' );
+
+    myPluginStore.state; // This is the state of the 'myPlugin' namespace.
+    ```
+
+    You can also destructure the object returned by `store`:
+
+    ```js
+    const { state } = store( 'myPlugin' );
+    ```
+
+    And you can do the same even if you are defining the store at that moment, which is the most common scenario:
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		// ...
+    	},
+    	actions: {
+    		toggle() {
+    			state.show = ! state.show;
+    		},
+    	},
+    } );
+    ```
+
+    The global state initialized on the server using the `wp_interactivity_state` function is also included in that object because it is automatically serialized from the server to the client:
+
+    ```php
+    wp_interactivity_state( 'myPlugin', array(
+      'someValue' => 1,
+    ));
+    ```
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		otherValue: 2,
+    	},
+    	actions: {
+    		readGlobalState() {
+    			state.someValue; // It exists and its initial value is 1.
+    			state.otherValue; // It exists and its initial value is 2.
+    		},
+    	},
+    } );
+    ```
+
+    Lastly, all calls to the `store` function with the same namespace are merged together:
+
+    ```js
+    store( 'myPlugin', { state: { someValue: 1 } } );
+
+    store( 'myPlugin', { state: { otherValue: 2 } } );
+
+    /* All calls to `store` return a stable reference to the same object, so you
+     * can get a reference to `state` from any of them. */
+    const { state } = store( 'myPlugin' );
+
+    store( 'myPlugin', {
+    	actions: {
+    		readValues() {
+    			state.someValue; // It exists and its initial value is 1.
+    			state.otherValue; // It exists and its initial value is 2.
+    		},
+    	},
+    } );
+    ```
+
+-   **Updating the global state**
+
+    To update the global state, all you need to do is mutate the `state` object once you have obtained it from the `store` function:
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	actions: {
+    		updateValues() {
+    			state.someValue = 3;
+    			state.otherValue = 4;
+    		},
+    	},
+    } );
+    ```
+
+    Changes to the global state will automatically trigger updates in any directives that depend on the modified values.
+
+    _Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+
+### Example: Two interactive blocks using global state to communicate
+
+In this example, there are two independent interactive blocks. One displays a counter, and the other a button to increment that counter. These blocks can be positioned anywhere on the page, regardless of the HTML structure. In other words, one does not need to be an inner block of the other.
+
+-   **Counter Block**
+
+    ```php
+    <?php
+    wp_interactivity_state( 'myCounterPlugin', array(
+      'counter' => 0
+    ));
+    ?>
+
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo get_block_wrapper_attributes(); ?>
+    >
+      Counter: <span data-wp-text="state.counter"></span>
+    </div>
+    ```
+
+-   **Increment Block**
+
+    ```php
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo get_block_wrapper_attributes(); ?>
+    >
+      <button data-wp-on-async--click="actions.increment">
+        Increment
+      </button>
+    </div>
+    ```
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    		},
+    	},
+    } );
+    ```
+
+In this example:
+
+1. The global state is initialized on the server using `wp_interactivity_state`, setting an initial `counter` of 0.
+2. The Counter Block displays the current counter using `data-wp-text="state.counter"`, which reads from the global state.
+3. The Increment Block contains a button that triggers the `increment` action when clicked, using `data-wp-on-async--click="actions.increment"`.
+4. In JavaScript, the `increment` action directly modifies the global state by incrementing `state.counter`.
+
+Both blocks are independent and can be placed anywhere on the page. They don't need to be nested or directly related in the DOM structure. Multiple instances of these interactive blocks can be added to the page, and they will all share and update the same global counter value.
+
+## Local context
+
+**Local context** in the Interactivity API refers to local data defined within a specific element in the HTML structure. Unlike global state, local context is only accessible to the element where it's defined and its child elements.
+
+The local context is particularly useful when you need independent state for individual interactive blocks, ensuring that each instance of a block can maintain its own unique data without interfering with others.
+
+You should use local context when:
+
+-   You need to maintain separate state for multiple instances of the same interactive block.
+-   You want to encapsulate data that's only relevant to a specific interactive block and its children.
+-   You need to implement features that are isolated to a specific part of your UI.
+
+### Working with local context
+
+-   **Initializing the local context**
+
+    The local context is initialized directly within the HTML structure using the `data-wp-context` directive. This directive accepts a JSON string that defines the initial values for that piece of context.
+
+    ```html
+    <div data-wp-context='{ "counter": 0 }'>
+    	<!-- Child elements will have access to `context.counter` -->
+    </div>
+    ```
+
+    You can also initialize the local context on the server using the `wp_interactivity_data_wp_context` PHP helper, which ensures proper escaping and formatting of the stringified values:
+
+    ```php
+    <?php
+    $context = array( 'counter' => 0 );
+    ?>
+
+    <div <?php echo wp_interactivity_data_wp_context( $context ); ?>>
+      <!-- Child elements will have access to `context.counter` -->
+    </div>
+    ```
+
+-   **Accessing the local context**
+
+    In the HTML markup, you can access the local context values directly by referencing `context` in the directive values:
+
+    ```html
+    <div data-wp-bind--hidden="!context.isOpen">
+    	<span data-wp-text="context.counter"></span>
+    </div>
+    ```
+
+    In JavaScript, you can access the local context values using the `getContext` function:
+
+    ```js
+    store( 'myPlugin', {
+    	actions: {
+    		sendAnalyticsEvent() {
+    			const { counter } = getContext();
+    			myAnalyticsLibrary.sendEvent( 'updated counter', counter );
+    		},
+    	},
+    	callbacks: {
+    		logCounter() {
+    			const { counter } = getContext();
+    			console.log( `Current counter: ${ counter }` );
+    		},
+    	},
+    } );
+    ```
+
+    The `getContext` function returns the local context of the element that triggered the action/callback execution.
+
+-   **Updating the local context**
+
+    To update the local context values in JavaScript, you can modify the object returned by `getContext`:
+
+    ```js
+    store( 'myPlugin', {
+    	actions: {
+    		increment() {
+    			const context = getContext();
+    			context.counter += 1;
+    		},
+    		updateName( event ) {
+    			const context = getContext();
+    			context.name = event.target.value;
+    		},
+    	},
+    } );
+    ```
+
+    Changes to the local context will automatically trigger updates in any directives that depend on the modified values.
+
+    _Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how reactivity works in the Interactivity API._
+
+-   **Nesting local contexts**
+
+    Local contexts can be nested, with child contexts inheriting and potentially overriding values from parent contexts:
+
+    ```html
+    <div data-wp-context='{ "theme": "light", "counter": 0 }'>
+    	<p>Theme: <span data-wp-text="context.theme"></span></p>
+    	<p>Counter: <span data-wp-text="context.counter"></span></p>
+
+    	<div data-wp-context='{ "theme": "dark" }'>
+    		<p>Theme: <span data-wp-text="context.theme"></span></p>
+    		<p>Counter: <span data-wp-text="context.counter"></span></p>
+    	</div>
+    </div>
+    ```
+
+    In this example, the inner `div` will have a `theme` value of `"dark"`, but will inherit the `counter` value `0` from its parent context.
+
+### Example: One interactive block using local context to have independent state
+
+In this example, there is a single interactive block that shows a counter and can increment it. By using local context, each instance of this block will have its own independent counter, even if multiple blocks are added to the page.
+
+```php
+<div
+  data-wp-interactive="myCounterPlugin"
+  <?php echo get_block_wrapper_attributes(); ?>
+  data-wp-context='{ "counter": 0 }'
+>
+  <p>Counter: <span data-wp-text="context.counter"></span></p>
+  <button data-wp-on-async--click="actions.increment">Increment</button>
+</div>
+```
+
+```js
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+In this example:
+
+1. A local context with an initial `counter` value of `0` is defined using the `data-wp-context` directive.
+2. The counter is displayed using `data-wp-text="context.counter"`, which reads from the local context.
+3. The increment button uses `data-wp-on-async--click="actions.increment"` to trigger the increment action.
+4. In JavaScript, the `getContext` function is used to access and modify the local context for each block instance.
+
+A user will be able to add multiple instances of this block to a page, and each will maintain its own independent counter. Clicking the "Increment" button on one block will only affect that specific block's counter and not the others.
+
+## Derived state
+
+**Derived state** in the Interactivity API refers to a value that is computed from other parts of the global state or local context. It's calculated on demand rather than stored. It ensures consistency, reduces redundancies, and enhances the declarative nature of your code.
+
+Derived state is a fundamental concept in modern state management, not unique to the Interactivity API. It's also used in other popular state management systems like Redux, where it's called `selectors`, or Preact Signals, where it's known as `computed` values.
+
+Derived state offers several key benefits that make it an essential part of a well-designed application state, including:
+
+1. **Single source of truth:** Derived state encourages you to store only the essential, raw data in your state. Any values that can be calculated from this core data become derived state. This approach reduces the risk of inconsistencies in your interactive blocks.
+
+2. **Automatic updates:** When you use derived state, values are recalculated automatically whenever the underlying data changes. This ensures that all parts of your interactive blocks always have access to the most up-to-date information without manual intervention.
+
+3. **Simplified state management:** By computing values on-demand rather than storing and updating them manually, you reduce the complexity of your state management logic. This leads to cleaner, more maintainable code.
+
+4. **Improved performance:** In many cases, derived state can be optimized to recalculate only when necessary, potentially improving your interactive blocks' performance.
+
+5. **Easier debugging:** With derived state, it's clearer where data originates and how it's transformed. This can make it easier to track down issues in your interactive blocks.
+
+In essence, derived state allows you to express relationships between different pieces of data in your interactive blocks declaratively, instead of imperatively updating related values whenever something changes.
+
+_Please, visit [The Reactive and Declarative mindset](/docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md) guide to learn more about how to leverage declarative coding in the Interactivity API._
+
+You should use derived state:
+
+-   When a part of your global state or local context can be computed from other state values.
+-   To avoid redundant data that needs to be manually kept in sync.
+-   To ensure consistency across your interactive blocks by automatically updating derived values.
+-   To simplify your actions by removing the need to update multiple related state properties.
+
+### Working with derived state
+
+-   **Initializing the derived state**
+
+    Typically, the derived state should be initialized on the server using the `wp_interactivity_state` function in the exact same way as the global state.
+
+    -   When the initial value is known and static, it can be defined directly:
+
+        ```php
+        wp_interactivity_state( 'myCounterPlugin', array(
+          'counter' => 1, // This is global state.
+          'double'  => 2, // This is derived state.
+        ));
+        ```
+
+    -   Or it can be defined by doing the necessary computations:
+
+        ```php
+        $counter = 1;
+        $double  = $counter * 2;
+
+        wp_interactivity_state( 'myCounterPlugin', array(
+          'counter' => $counter, // This is global state.
+          'double'  => $double,  // This is derived state.
+        ));
+        ```
+
+    Regardless of the approach, the initial derived state values will be used during the rendering of the page in PHP, and the HTML can be populated with the correct values.
+
+    _Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about how directives are processed on the server._
+
+    The same mechanism applies even when the derived state property depends on the local context.
+
+    ```php
+    <?php
+    $counter = 1;
+
+    // This is the local context.
+    $context = array( 'counter' => $counter );
+
+    wp_interactivity_state( 'myCounterPlugin', array(
+      'double' => $counter * 2, // This is derived state.
+    ));
+    ?>
+
+    <div
+      data-wp-interactive="myCounterPlugin"
+      <?php echo wp_interactivity_data_wp_context( $context ); ?>
+    >
+      <div>
+        Counter: <span data-wp-text="context.counter"></span>
+      </div>
+      <div>
+        Double: <span data-wp-text="state.double"></span>
+      </div>
+    </div>
+    ```
+
+    In JavaScript, the derived state is defined using getters:
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		get double() {
+    			return state.counter * 2;
+    		},
+    	},
+    } );
+    ```
+
+    Derived state can depend on local context, or local context and global state at the same time.
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		get double() {
+    			const { counter } = getContext();
+    			// Depends on local context.
+    			return counter * 2;
+    		},
+    		get product() {
+    			const { counter } = getContext();
+    			// Depends on local context and global state.
+    			return counter * state.factor;
+    		},
+    	},
+    } );
+    ```
+
+    In some cases, when the derived state depends on the local context and the local context can change dynamically in the server, instead of the initial derived state, you can use a function (Closure) that calculates it dynamically.
+
+    ```php
+    <?php
+    wp_interactivity_state( 'myProductPlugin', array(
+      'list'    => array( 1, 2, 3 ),
+      'factor'  => 3,
+      'product' => function() {
+        $state   = wp_interactivity_state();
+        $context = wp_interactivity_get_context();
+        return $context['item'] * $state['factor'];
+      }
+    ));
+    ?>
+
+    <template
+      data-wp-interactive="myProductPlugin"
+      data-wp-each="state.list"
+    >
+      <span data-wp-text="state.product"></span>
+    </template>
+    ```
+
+    This `data-wp-each` template will render this HTML (directives omitted):
+
+    ```html
+    <span>3</span>
+    <span>6</span>
+    <span>9</span>
+    ```
+
+-   **Accessing the derived state**
+
+    In the HTML markup, the syntax for the derived state is the same as the one for the global state, just by referencing `state` in the directive attribute values.
+
+    ```html
+    <span data-wp-text="state.double"></span>
+    ```
+
+    The same happens in JavaScript. Both global state and derived state can be consumed through the `state` property of the store:
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	// ...
+    	actions: {
+    		readValues() {
+    			state.counter; // Regular state, returns 1.
+    			state.double; // Derived state, returns 2.
+    		},
+    	},
+    } );
+    ```
+
+    This lack of distinction is intentional, allowing developers to consume both derived and global state uniformly, and making them interchangeable in practice.
+
+    You can also access the derived state from another derived state and, thus, create multiple levels of computed values.
+
+    ```js
+    const { state } = store( 'myPlugin', {
+    	state: {
+    		get double() {
+    			return state.counter * 2;
+    		},
+    		get doublePlusOne() {
+    			return state.double + 1;
+    		},
+    	},
+    } );
+    ```
+
+-   **Updating the derived state**
+
+    The derived state cannot be updated directly. To update its values, you need to update the global state or local context on which that derived state depends.
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	// ...
+    	actions: {
+    		updateValues() {
+    			state.counter; // Regular state, returns 1.
+    			state.double; // Derived state, returns 2.
+
+    			state.counter = 2;
+
+    			state.counter; // Regular state, returns 2.
+    			state.double; // Derived state, returns 4.
+    		},
+    	},
+    } );
+    ```
+
+### Example: Not using derived state vs using derived state
+
+Let's consider a scenario where there is a counter and the double value needs to be displayed, and let's compare two approaches: one without derived state and one with derived state.
+
+-   **Not using derived state**
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 1,
+    		double: 2,
+    	},
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    			state.double = state.counter * 2;
+    		},
+    	},
+    } );
+    ```
+
+    In this approach, both the `state.counter` and `state.double` values are manually updated in the `increment` action. While this works, it has several drawbacks:
+
+    -   It's less declarative.
+    -   It can lead to bugs if `state.counter` is updated from multiple places and developers forget to keep `state.double` in sync.
+    -   It requires more cognitive load to remember to update related values.
+
+-   **Using derived state**
+
+    ```js
+    const { state } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 1,
+    		get double() {
+    			return state.counter * 2;
+    		},
+    	},
+    	actions: {
+    		increment() {
+    			state.counter += 1;
+    		},
+    	},
+    } );
+    ```
+
+    In this improved version:
+
+    -   `state.double` is defined as a getter, automatically deriving its value from `state.counter`.
+    -   The `increment` action only needs to update `state.counter`.
+    -   `state.double` is always guaranteed to have the correct value, regardless of how or where `state.counter` is updated.
+
+### Example: Using derived state with local context
+
+Let's now consider a scenario where there is a local context that initializes a counter.
+
+```js
+store( 'myCounterPlugin', {
+	state: {
+		get double() {
+			const { counter } = getContext();
+			return counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			const context = getContext();
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+```html
+<div data-wp-interactive="myCounterPlugin">
+	<!-- This will render "Double: 2" -->
+	<div data-wp-context='{ "counter": 1 }'>
+		Double: <span data-wp-text="state.double"></span>
+
+		<!-- This button will increment the local counter. -->
+		<button data-wp-on-async--click="actions.increment">Increment</button>
+	</div>
+
+	<!-- This will render "Double: 4" -->
+	<div data-wp-context='{ "counter": 2 }'>
+		Double: <span data-wp-text="state.double"></span>
+
+		<!-- This button will increment the local counter. -->
+		<button data-wp-on-async--click="actions.increment">Increment</button>
+	</div>
+</div>
+```
+
+In this example, the derived state `state.double` reads from the local context present in each element and returns the correct value for each instance where it is used.
+
+### Example: Using derived state with both local context and global state
+
+Let's now consider a scenario where there is a global tax rate and local product prices and calculate the final price, including tax.
+
+```html
+<div
+	data-wp-interactive="myProductPlugin"
+	data-wp-context='{ "priceWithoutTax": 100 }'
+>
+	<p>Product Price: $<span data-wp-text="context.priceWithoutTax"></span></p>
+	<p>Tax Rate: <span data-wp-text="state.taxRatePercentage"></span></p>
+	<p>Price (inc. tax): $<span data-wp-text="state.priceWithTax"></span></p>
+</div>
+```
+
+```js
+const { state } = store( 'myProductPlugin', {
+	state: {
+		taxRate: 0.21,
+		get taxRatePercentage() {
+			return `${ state.taxRate * 100 }%`;
+		},
+		get priceWithTax() {
+			const { priceWithoutTax } = getContext();
+			return price * ( 1 + state.taxRate );
+		},
+	},
+	actions: {
+		updateTaxRate( event ) {
+			// Updates the global tax rate.
+			state.taxRate = event.target.value;
+		},
+		updatePrice( event ) {
+			// Updates the local product price.
+			const context = getContext();
+			context.priceWithoutTax = event.target.value;
+		},
+	},
+} );
+```
+
+In this example, `priceWithTax` is derived from both the global `taxRate` and the local `priceWithoutTax`. Every time you update the global state or local context through the `updateTaxRate` or `updatePrice` actions, the Interactivity API recomputes the derived state and updates the necessary parts of the DOM.
+
+By using derived state, you create a more maintainable and less error-prone codebase. It ensures that related state values are always in sync, reduces the complexity of your actions, and makes your code more declarative and easier to reason about.
+
+## Subscribing to Server State and Context
+
+Interactivity API offers a region-based navigation feature that dynamically replaces a part of the page without a full page reload. The [Query block](/docs/reference-guides/core-blocks.md#query-loop) natively supports this feature when the `Force page reload` toggle is disabled. Developers can use the same functionality in custom blocks by calling [`actions.navigate()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/#actions) from the [`@wordpress/interactivity-router`](https://github.com/WordPress/gutenberg/tree/trunk/packages/interactivity-router) script module.
+
+When using region-based navigation, it's crucial to ensure that your interactive blocks stay in sync with the server-provided global state and local context. By default, the Interactivity API will never overwrite the global state or local context with the server-provided values. The Interactivity API provides two functions to help manage this synchronization: [`getServerState()`](/docs/reference-guides/interactivity-api/api-reference.md#getserverstate) and [`getServerContext()`](/docs/reference-guides/interactivity-api/api-reference.md#getservercontext).
+
+### `getServerState()`
+
+`getServerState()` allows you to subscribe to changes in the **global state** that occur during client-side navigation. This function is analogous to `getServerContext()`, but it works with the global state instead of the local context.
+
+The `getServerState()` function returns a read-only reactive object. This means that any [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) you have defined that watch the returned object will only trigger when the value returned by the function changes. If the value remains the same, the callback will not re-trigger.
+
+Let's consider a quiz that has multiple questions. Each question is a separate page. When the user navigates to a new question, the server provides the new question and the time left to answer all the questions.
+
+```php
+<div <?php echo wp_interactivity_state( 'myPlugin', array(
+	'question' => get_question_for_page( get_the_ID() ),
+	'timeLeft' => 5 * 60, // Time to answer all the questions.
+) ); ?>>
+```
+
+```javascript
+import { store, getServerState } from '@wordpress/interactivity';
+
+store( 'myPlugin', {
+	actions: {
+		// This action would be triggered by a directive, like:
+		// <button data-wp-on-click="actions.nextQuestion">Next Question</button>
+		*nextQuestion() {
+			event.preventDefault( event );
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			actions.navigate( '/question-2' );
+		},
+	},
+	callbacks: {
+		// This callback would be triggered by a directive, like:
+		// <div data-wp-watch="callbacks.updateQuestion"></div>
+		updateQuestion() {
+			const serverState = getServerState();
+
+			// Update with the new value coming from the server.
+			// We DON'T want to update `timeLeft` because it represents the time left to answer ALL the questions.
+			state.question = serverState.question;
+		},
+	},
+} );
+```
+
+### `getServerContext()`
+
+`getServerContext()` allows you to subscribe to changes in the **local context** that occur during client-side navigation. This function is analogous to `getServerState()`, but it works with the local context instead of the global state.
+
+The `getServerContext()` function returns a read-only reactive object. This means that any [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) you have defined that watch the returned object will only trigger when the value returned by the function changes. If the value remains the same, the callback will not re-trigger.
+
+Consider a quiz that has multiple questions. Each question is a separate page. When the user navigates to a new question, the server provides the new question and the time left to answer all the questions.
+
+```php
+<div <?php echo wp_interactivity_data_wp_context( array(
+	'currentQuestion' => get_question_for_page( get_the_ID() ),
+), ); ?>>
+```
+
+```javascript
+import { store, getServerContext } from '@wordpress/interactivity';
+
+store( 'myPlugin', {
+	actions: {
+		// This action would be triggered by a directive, like:
+		// <button data-wp-on-click="actions.nextQuestion">Next Question</button>
+		*nextQuestion() {
+			event.preventDefault( event );
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			actions.navigate( '/question-2' );
+		},
+	},
+	callbacks: {
+		// This callback would be triggered by a directive, like:
+		// <div data-wp-watch="callbacks.updateQuestion"></div>
+		updateQuestion() {
+			const serverContext = getServerContext();
+			const context = getContext();
+
+			// Update with the new value coming from the server.
+			context.currentQuestion = serverContext.currentQuestion;
+		},
+	},
+} );
+```
+
+### When to Use
+
+Whenever you have interactive blocks that rely on global state or local context that may change due to navigation events, ensuring consistency across different parts of your application.
+
+### Best Practices for using `getServerState()` and `getServerContext()`
+
+-   **Read-Only References:** Both `getServerState()` and `getServerContext()` return read-only objects. You can use those objects to update the global state or local context.
+-   **Callback Integration:** Incorporate these functions within your store [callbacks](/docs/reference-guides/interactivity-api/api-reference.md#accessing-data-in-callbacks) to react to state and context changes. Both `getServerState()` and `getServerContext()` return reactive objects. This means that their watch callbacks will only trigger when the value of a property changes. If the value remains the same, the callback will not re-trigger.
+
+## Conclusion
+
+Remember, the key to effective state management is to keep your state minimal and avoid redundancy. Use derived state to compute values dynamically, and choose between global state and local context based on the scope and requirements of your data. This will lead to a cleaner, more robust architecture that is easier to debug and maintain. Finally, if you need to synchronize the state or context with the server, you can use `getServerState()` and `getServerContext()` to achieve this.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
new file mode 100644
index 00000000000000..ed0bdd88211d11
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
@@ -0,0 +1,746 @@
+# Using TypeScript
+
+The Interactivity API provides robust support for TypeScript, enabling developers to build type-safe stores to enhance the development experience with static type checking, improved code completion, and simplified refactoring. This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
+
+These are the core principles of TypeScript's interaction with the Interactivity API:
+
+-   **Inferred client types**: When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the types for you.
+-   **Explicit server types**: When dealing with data defined on the server, like local context or the initial values of the global state, you can explicitly define its types to ensure that everything is correctly typed.
+-   **Mutiple store parts**: Even if your store is split into multiple parts, you can define or infer the types of each part of the store and then merge them into a single type that represents the entire store.
+-   **Typed external stores**: You can import typed stores from external namespaces, allowing you to use other plugins' functionality with type safety.
+
+## Installing `@wordpress/interactivity` locally
+
+If you haven't done so already, you need to install the package `@wordpress/interactivity` locally so TypeScript can use its types in your IDE. You can do this using the following command:
+
+`npm install @wordpress/interactivity`
+
+It is also a good practice to keep that package updated.
+
+## Scaffolding a new typed interactive block
+
+If you want to explore an example of an interactive block using TypeScript in your local environment, you can use the `@wordpress/create-block-interactive-template`.
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+Next, use the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package and the [`@wordpress/create-block-interactive-template`](https://www.npmjs.com/package/@wordpress/create-block-interactive-template) template to scaffold the block.
+
+Choose the folder where you want to create the plugin, execute the following command in the terminal from within that folder, and choose the `typescript` variant when asked.
+
+```
+npx @wordpress/create-block@latest --template @wordpress/create-block-interactive-template
+```
+
+**Important**: Do not provide a slug in the terminal. Otherwise, `create-block` will not ask you which variant you want to choose and it will select the default non-TypeScript variant by default.
+
+Finally, you can keep following the instructions in the [Getting Started Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/) as the rest of the instructions remain the same.
+
+## Typing the store
+
+Depending on the structure of your store and your preference, there are three options you can choose from to generate your store's types:
+
+1.  Infer the types from your client store definition.
+2.  Manually type the server state, but infer the rest from your client store definition.
+3.  Manually write all the types.
+
+### 1. Infer the types from your client store definition
+
+When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, `callbacks`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the correct types for you.
+
+Let's start with a basic example of a counter block. We will define the store in the `view.ts` file of the block, which contains the initial global state, an action and a callback.
+
+```ts
+// view.ts
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			myStore.state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ myStore.state.counter }` );
+		},
+	},
+} );
+```
+
+If you inspect the types of `myStore` using TypeScript, you will see that TypeScript has been able to infer the types correctly.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+};
+```
+
+You can also destructure the `state`, `actions` and `callbacks` properties, and the types will still work correctly.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+In conclusion, inferring the types is useful when you have a simple store defined in a single call to the `store` function and you do not need to type any state that has been initialized on the server.
+
+### 2. Manually type the server state, but infer the rest from your client store definition
+
+The global state that is initialized on the server with the `wp_interactivity_state` function doesn't exist on your client store definition and, therefore, needs to be manually typed. But if you don't want to define all the types of your store, you can infer the types of your client store definition and merge them with the types of your server initialized state.
+
+_Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about `wp_interactivity_state` and how directives are processed on the server._
+
+Following our previous example, let's move our `counter` state initialization to the server.
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+));
+```
+
+Now, let's define the server state types and merge it with the types inferred from the client store definition.
+
+```ts
+// Types the server state.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// Defines the store in a variable to be able to extract its type later.
+const storeDef = {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+Alternatively, if you don't mind typing the entire state including both the values defined on the server and the values defined on the client, you can cast the `state` property and let TypeScript infer the rest of the store.
+
+Let's imagine you have an additional property in the client global state called `product`.
+
+```ts
+type State = {
+	counter: number; // The server state.
+	product: number; // The client state.
+};
+
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		product: 2,
+	} as State, // Casts the entire state manually.
+	actions: {
+		increment() {
+			state.counter * state.product;
+		},
+	},
+} );
+```
+
+That's it. Now, TypeScript will infer the types of the `actions` and `callbacks` properties from the store definition, but it will use the type `State` for the `state` property so it contains the correct types from both the client and server definitions.
+
+In conclusion, this approach is useful when you have a server state that needs to be manually typed, but you still want to infer the types of the rest of the store.
+
+### 3. Manually write all the types
+
+If you prefer to define all the types of the store manually instead of letting TypeScript infer them from your client store definition, you can do that too. You simply need to pass them to the `store` function.
+
+```ts
+// Defines the store types.
+interface Store {
+	state: {
+		counter: number; // Initial server state
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+}
+
+// Pass the types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+That's it! In conclusion, this approach is useful when you want to control all the types of your store and you don't mind writing them by hand.
+
+## Typing the local context
+
+The initial local context is defined on the server using the `data-wp-context` directive.
+
+```html
+<div data-wp-context='{ "counter": 0 }'>...</div>
+```
+
+For that reason, you need to define its type manually and pass it to the `getContext` function to ensure the returned properties are correctly typed.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Passes it to the getContext function.
+			const context = getContext< MyContext >();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+To avoid having to pass the context types over and over, you can also define a typed function and use that function instead of `getContext`.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+// Defines a typed function. You only have to do this once.
+const getMyContext = getContext< MyContext >;
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Use your typed function.
+			const context = getMyContext();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+That's it! Now you can access the context properties with the correct types.
+
+## Typing the derived state
+
+The derived state is data that is calculated based on the global state or local context. In the client store definition, it is defined using a getter in the `state` object.
+
+_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+
+Following our previous example, let's create a derived state that is the double of our counter.
+
+```ts
+type MyContext = {
+	counter: number;
+};
+
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		get double() {
+			const { counter } = getContext< MyContext >();
+			return counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is number.
+		},
+	},
+} );
+```
+
+Normally, when the derived state depends on the local context, TypeScript will be able to infer the correct types:
+
+```ts
+const myStore: {
+	state: {
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+But when the return value of the derived state depends directly on some part of the global state, TypeScript will not be able to infer the types because it will claim that it has a circular reference.
+
+For example, in this case, TypeScript cannot infer the type of `state.double` because it depends on `state.counter`, and the type of `state` is not completed until the type of `state.double` is defined, creating a circular reference.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double() {
+			// TypeScript can't infer this return type because it depends on `state`.
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is now unknown.
+		},
+	},
+} );
+```
+
+In this case, depending on your TypeScript configuration, TypeScript will either warn you about a circular reference or simply add the `any` type to the `state` property.
+
+However, solving this problem is easy; we simply need to manually provide TypeScript with the return type of that getter. Once we do that, the circular reference disappears, and TypeScript can once again infer all the `state` types.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 1,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // Correctly inferred!
+		},
+	},
+} );
+```
+
+These are now the correct inferred types for the previous store.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+When using `wp_interactivity_state` in the server, remember that you also need to define the initial value of your derived state, like this:
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+	'double'  => 2,
+));
+```
+
+But if you are inferring the types, you don't need to manually define the type of the derived state because it already exists in your client's store definition.
+
+```ts
+// You don't need to type `state.double` here.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// The `state.double` type is inferred from here.
+const storeDef = {
+	state: {
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+That's it! Now you can access the derived state properties with the correct types.
+
+## Typing asynchronous actions
+
+Another thing to keep in mind when using TypeScript with the Interactivity API is that asynchronous actions must be defined with generators instead of async functions.
+
+The reason for using generators in the Interactivity API's asynchronous actions is to be able to restore the scope from the initially triggered action once the asynchronous action continues its execution after yielding. But this is a syntax change only, otherwise, **these functions operate just like regular async functions**, and the inferred types from the `store` function reflect this.
+
+Following our previous example, let's add an asynchronous action to the store.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+		*delayedIncrement() {
+			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+			state.counter += 1;
+		},
+	},
+} );
+```
+
+The inferred types for this store are:
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		// This behaves like a regular async function.
+		delayedIncrement(): Promise< void >;
+	};
+};
+```
+
+This also means that you can use your async actions in external functions, and TypeScript will correctly use the async function types.
+
+```ts
+const someAsyncFunction = async () => {
+	// This works fine and it's correctly typed.
+	await actions.delayedIncrement( 2000 );
+};
+```
+
+When you are not inferring types but manually writing the types for your entire store, you can use async function types for your async actions.
+
+```ts
+type Store = {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		delayedIncrement(): Promise< void >; // You can use async functions here.
+	};
+};
+```
+
+There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn() {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // TypeScript can't infer this return type.
+    		},
+    	},
+    } );
+    ```
+
+    In this case, just as we did with the derived state, we must manually type the return value of the generator.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn(): Generator< uknown, number, uknown > {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // Now this is correctly inferred.
+    		},
+    	},
+    } );
+    ```
+
+    That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.
+
+## Typing stores that are divided into multiple parts
+
+Sometimes, stores can be divided into different files. This can happen when different blocks share the same namespace, with each block loading the part of the store it needs.
+
+Let's look at an example of two blocks:
+
+-   `todo-list`: A block that displays a list of todos.
+-   `add-post-to-todo`: A block that shows a button to add a new todo item to the list with the text "Read {$post_title}".
+
+First, let's initialize the global and derived state of the `todo-list` block on the server.
+
+```php
+<?php
+// todo-list-block/render.php
+$todos = array( 'Buy milk', 'Walk the dog' );
+wp_interactivity_state( 'myTodoPlugin', array(
+  'todos'         => $todos,
+  'filter'        => 'all',
+  'filteredTodos' => $todos,
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type the server state and add the client store definition. Remember, `filteredTodos` is derived state, so you don't need to type it manually.
+
+```ts
+// todo-list-block/view.ts
+type ServerState = {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+	};
+};
+
+const todoList = {
+	state: {
+		get filteredTodos(): string[] {
+			return state.filter === 'completed'
+				? state.todos.filter( ( todo ) => todo.includes( '✅' ) )
+				: state.todos;
+		},
+	},
+	actions: {
+		addTodo( todo: string ) {
+			state.todos.push( todo );
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+export type TodoList = ServerState & typeof todoList;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< TodoList >( 'myTodoPlugin', todoList );
+```
+
+So far, so good. Now let's create our `add-post-to-todo` block.
+
+First, let's add the current post title to the server state.
+
+```php
+<?php
+// add-post-to-todo-block/render.php
+wp_interactivity_state( 'myTodoPlugin', array(
+  'postTitle' => get_the_title(),
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type that server state and add the client store definition.
+
+```ts
+// add-post-to-todo-block/view.ts
+type ServerState = {
+	state: {
+		postTitle: string;
+	};
+};
+
+const addPostToTodo = {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! state.todos.includes( todo ) ) {
+				actions.addTodo( todo );
+			}
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+type Store = ServerState & typeof addPostToTodo;
+
+// Injects the final types when calling the `store` function.
+const { state, actions } = store< Store >( 'myTodoPlugin', addPostToTodo );
+```
+
+This works fine in the browser, but TypeScript will complain that, in this block, `state` and `actions` do not include `state.todos` and `actions.addtodo`.
+
+To fix this, we need to import the `TodoList` type from the `todo-list` block and merge it with the other types.
+
+```ts
+import type { TodoList } from '../todo-list-block/view';
+
+// ...
+
+// Merges the inferred types inferred the server state types.
+type Store = TodoList & ServerState & typeof addPostToTodo;
+```
+
+That's it! Now TypeScript will know that `state.todos` and `actions.addTodo` are available in the `add-post-to-todo` block.
+
+This approach allows the `add-post-to-todo` block to interact with the existing todo list while maintaining type safety and adding its own functionality to the shared store.
+
+If you need to use the `add-post-to-todo` types in the `todo-list` block, you simply have to export its types and import them in the other `view.ts` file.
+
+Finally, if you prefer to define all types manually instead of inferring them, you can define them in a separate file and import that definition into each of your store parts. Here's how you could do that for our todo list example:
+
+```ts
+// types.ts
+interface Store {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+		filtered: string[];
+		postTitle: string;
+	};
+	actions: {
+		addTodo( todo: string ): void;
+		addPostToTodo(): void;
+	};
+}
+
+export default Store;
+```
+
+```ts
+// todo-list-block/view.ts
+import type Store from '../types';
+
+const { state } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+```ts
+// add-post-to-todo-block/view.ts
+import type Store from '../types';
+
+const { state, actions } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+This approach allows you to have full control over your types and ensures consistency across all parts of your store. It's particularly useful when you have a complex store structure or when you want to enforce a specific interface across multiple blocks or components.
+
+## Importing and exporting typed stores
+
+In the Interactivity API, stores from other namespaces can be accessed using the `store` function.
+
+Let's go back to our `todo-list` block example, but this time, let's imagine that the `add-post-to-todo` block belongs to a different plugin and therefore will use a different namespace.
+
+```ts
+// Import the store of the `todo-list` block.
+const myTodoPlugin = store( 'myTodoPlugin' );
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! myTodoPlugin.state.todos.includes( todo ) ) {
+				myTodoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+This works fine in the browser, but TypeScript will complain that `myTodoPlugin.state` and `myTodoPlugin.actions` are not typed.
+
+To fix that, the `myTodoPlugin` plugin can export the result of calling the `store` function with the correct types, and make that available using a script module.
+
+```ts
+// Export the already typed state and actions.
+export const { state, actions } = store< TodoList >( 'myTodoPlugin', {
+	// ...
+} );
+```
+
+Now, the `add-post-to-todo` block can import the typed store from the `myTodoPlugin` script module, and it not only ensures that the store will be loaded, but that it also contains the correct types.
+
+```ts
+import { store } from '@wordpress/interactivity';
+import {
+	state as todoState,
+	actions as todoActions,
+} from 'my-todo-plugin-module';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoState.todos.includes( todo ) ) {
+				todoActions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+Remember that you will need to declare the `my-todo-plugin-module` script module as a dependency.
+
+If the other store is optional and you don't want to load it eagerly, a dynamic import can be used instead of a static import.
+
+```ts
+import { store } from '@wordpress/interactivity';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		*addPostToTodo() {
+			const todoPlugin = yield import( 'my-todo-plugin-module' );
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoPlugin.state.todos.includes( todo ) ) {
+				todoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+## Conclusion
+
+In this guide, we explored different approaches to typing the Interactivity API stores, from inferring types automatically to manually defining them. We also covered how to handle server-initialized state, local context, and derived state, as well as how to type asynchronous actions.
+
+Remember that the choice between inferring types and manually defining them depends on your specific needs and the complexity of your store. Whichever approach you choose, TypeScript will help you build better and more reliable interactive blocks.
diff --git a/docs/reference-guides/interactivity-api/iapi-about.md b/docs/reference-guides/interactivity-api/iapi-about.md
new file mode 100644
index 00000000000000..08689be03aa383
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/iapi-about.md
@@ -0,0 +1,195 @@
+# About the Interactivity API
+
+The Interactivity API is **a [standard](#why-a-standard) system of [directives](#why-directives), based on declarative code, for [adding frontend interactivity to blocks](#api-goals)**.
+
+**Directives extend HTML with special attributes** that tell the Interactivity API to attach a specified behavior to a DOM element or even to transform it. For those familiar with [Alpine.js](https://alpinejs.dev/), it’s a similar approach but explicitly designed to work seamlessly with WordPress.
+
+## API Goals 
+
+The main goal of the Interactivity API is to **provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks**.
+
+A standard makes it **easier for developers to create rich, interactive user experiences**, from simple cases like counters or popups to more complex features like instant page navigation, instant search, or carts and checkouts.
+
+All these user experiences are technically possible right now without the Interactivity API. However, the more complex the user experience and the more blocks interact with each other, the harder it becomes for developers to build and maintain sites. There are a lot of challenges they have to figure out themselves. The API aims to provide out-of-the-box means for supporting these kinds of interactions.
+
+To address this challenge the following requirements/goals for the Interactivity API were defined:
+
+- **Block-first and PHP-first**: The API must work well with PHP and the current block system, including dynamic blocks, widely extended in WordPress. It must support server-side rendering. Server-rendered HTML and client-hydrated HTML must be exactly the same. This is important for SEO and the user experience.
+- **Backward compatible**: The API must be compatible with WordPress hooks, which could, for example, modify server-rendered HTML. It must also be compatible with internationalization and existing JS libraries on the site (such as jQuery).
+- **Optional and gradual adoption**: Related to the previous point, the API must remain optional. It should be possible to adopt it gradually, meaning that interactive blocks not using this API can coexist with those using it.
+- **Declarative and reactive**: The API must use declarative code, listen to changes in the data, and update only the parts of the DOM that depend on that data.
+- **Performant**: The runtime must be fast and lightweight to ensure the best user experience.
+- **Extensible**: In the same way WordPress focuses on extensibility, this new system must provide extensibility patterns to cover most use cases.
+- **Atomic and composable**: Having small reusable parts that can be combined to create more complex systems is required to create flexible and scalable solutions.
+- **Compatible with the existing block development tooling**: The API must be integrated with the existing block-building tools without requiring additional tooling or configuration by the developer.
+
+Apart from all these requirements, integrating **client-side navigation** on top of any solution should be easy and performant. Client-side navigation is the process of navigating between site pages without reloading the entire page, which is one of the most impressive user experiences demanded by web developers. For that reason, this functionality should be compatible with this new system.
+
+## Why directives?
+
+Directives are the result of deep [research into different possibilities and approaches](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-faq/#what-approaches-have-been-considered-instead-of-using-directives). We’ve found that this design covers the requirements most effectively.
+
+### Block-first and PHP-friendly
+
+The API is designed for the world of blocks and takes WordPress history of being closely attached to web standards to heart.
+
+As directives are HTML attributes, they are perfect for dynamic blocks and PHP.
+
+_Dynamic block example_
+```html
+<div
+  data-wp-interactive='wpmovies'
+  <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
+  data-wp-watch="callbacks.logIsOpen"
+>
+  <button
+    data-wp-on--click="actions.toggle"
+    data-wp-bind--aria-expanded="context.isOpen"
+    aria-controls="p-1"
+  >
+    Toggle
+  </button>
+ 
+  <p id="p-1" data-wp-bind--hidden="!context.isOpen">
+    This element is now visible!
+  </p>
+</div>
+```
+
+As you can see, directives like [`data-wp-on--click`](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-on) or [`data-wp-bind--hidden`](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#wp-bind) are added as custom HTML attributes. WordPress can process this HTML on the server, handling the directives’ logic and creating the appropriate markup.
+
+### Backward compatible
+
+As the Interactivity API works perfectly with server-side rendering, you can use all the WordPress APIs, including:
+
+- **WordPress filters and actions**: You can keep using WordPress hooks to modify the HTML or even to modify directives. Additionally, existing hooks will keep working as expected.
+- **Core Translation API**: e.g. `__()` and `_e()`. You can use it to translate the text in the HTML (as you normally would) and even use those APIs on the server side of your directives. 
+
+### Optional and gradual adoption
+
+The Interactivity API pipeline promotes **progressive enhancement** by building on top of WordPress’s solid foundation and patterns.
+
+For example, blocks with directives can coexist with other (interactive or non-interactive) blocks. This means that if there are other blocks on the page using other frameworks like jQuery, everything will work as expected.
+
+<div class="callout callout-warning">
+  Full-page client-side navigation with the Interactivity API will be an exception to this compatibility with other libraries rule. See <a href="#client-side-navigation">Client-side navigation</a> for more details.
+</div>
+
+### Declarative and reactive
+
+The Interactivity API follows an approach similar to other popular JS frameworks by separating state, actions, and callbacks and defining them declaratively. Why declaratively?
+
+Declarative code describes **what** a program should do, while imperative code describes **how** the program should do it. Using a declarative approach, the UI automatically updates in response to changes in the underlying data. With an imperative approach, you must manually update the UI whenever the data changes. Compare the two code examples:
+
+_Imperative code_
+
+```html
+<button id="toggle-button">Toggle Element</button>
+<p>This element is now visible!</p>
+<script>
+  const button = document.getElementById("toggle-button");
+ 
+  button.addEventListener("click", () => {
+    const element = document.getElementById("element");
+    if(element) {
+      element.remove();
+    } else {
+      const newElement = document.createElement("p");
+      newElement.textContent = "This element is visible";
+      document.body.appendChild(newElement);
+    }
+});
+</script>
+```
+
+_Declarative code_
+
+This is the same use case shared above but serves as an example of declarative code using this new system. The JavaScript logic is defined in the `view.js` file of the block, and add the directives to the markup in the `render.php`.
+
+```js
+// view.js file
+ 
+import { store, getContext } from "@wordpress/interactivity";
+ 
+store( 'wpmovies', {
+  actions: {
+    toggle: () => {
+      const context = getContext();
+      context.isOpen = !context.isOpen;
+    },
+  },
+});
+```
+
+```php
+<!-- Render.php file -->
+ 
+<div
+  data-wp-interactive='wpmovies'
+  <?php echo wp_interactivity_data_wp_context( array( 'isOpen' => true ) ); ?>
+>
+  <button
+    data-wp-on--click="actions.toggle"
+    data-wp-bind--aria-expanded="context.isOpen"
+    aria-controls="p-1"
+  >
+    Toggle
+  </button>
+ 
+  <p id="p-1" data-wp-bind--hidden="!context.isOpen">
+    This element is now visible!
+  </p>
+</div>
+```
+
+Using imperative code may be easier when creating simple user experiences, but it becomes much more difficult as applications become more complex. The Interactivity API must cover all use cases, from the simplest to the most challenging. That’s why a declarative approach using directives better fits the Interactivity API.
+
+### Performant
+
+The API has been designed to be as performant as possible:
+
+- **The runtime code needed for the directives is just ~10 KB**, and it only needs to be loaded once for all the blocks.
+- **The scripts will load without blocking the page rendering**.
+
+### Extensible
+
+Directives can be added, removed, or modified directly from the HTML. For example, users could use the [`render_block` filter](https://developer.wordpress.org/reference/hooks/render_block/) to modify the HTML and its behavior.
+
+### Atomic and composable
+
+Each directive controls a small part of the DOM, and you can combine multiple directives to create rich, interactive user experiences.
+
+### Compatible with the existing block development tooling
+
+The API works out of the box with standard block-building tools like [`wp-scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/). The only requirement for `wp-scripts` to properly build the [Script Modules](https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/) using the Interactivity API is the use of the --experimental-modules flag for both [`build`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#build) and [`start`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#start) scripts.
+
+### Client-side navigation
+
+The Interactivity API comes with built-in primitives for adding client-side navigation to your site. This functionality is completely optional, but it opens the possibility to create these user experiences without having to opt out of the WordPress rendering system.
+
+<div class="callout callout-info">
+  Full-page client-side navigation with the Interactivity API is still a work in progress (see <a href="https://github.com/WordPress/gutenberg/issues/60951">#60951</a>). Still, it is expected that all the interactive blocks will have to use the Interactivity API to enable full-page client-side navigation with the Interactivity API. Only in this case, the Interactivity API won't be fully compatible with other libraries (such as jQuery). 
+</div>
+
+It also pairs very well with the [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) allowing developers to animate page transitions easily.
+
+## Why a standard?
+
+Blocks using the Interactivity API and interactive blocks using other approaches like jQuery can coexist, and everything will work as expected. However, the Interactivity API comes with some benefits for your interactive blocks:
+
+- **Blocks can communicate with each other easily**. With a standard, this communication is handled by default. When different blocks use different approaches to frontend interactivity, inter-block communication becomes more complex and almost impossible when different developers create blocks.
+- **Composability and compatibility**: You can combine interactive blocks, and nest them in structures with defined behaviors. Thanks to following the same standard, they are fully cross-compatible. If each block used a different approach to interactivity, they would likely break.
+- **Fewer KBs will be sent to the browser**. If each plugin author uses a different JS framework, more code will be loaded in the front end. If all the blocks use the same one, the code is reused.
+- If all the blocks on a page use this standard, **site-wide features like client-side navigation can be enabled**.
+
+Additionally, with a standard, **WordPress can absorb the maximum amount of complexity from the developer** because it will handle most of what’s needed to create an interactive block.
+
+_Complexities absorbed by the standard_
+
+<img alt="Two columns table comparing some aspects with and without a standard. Without a standard, block developers have to take care of everything, while having a standard. Totally handled by the standard: Tooling, hydration, integrating it with WordPress, SSR of the interactive parts, inter-block communication, and frontend performance. Partially handled: Security, accessibility, and best practices. Developer responsibility: Block logic. In the without a standard column, everything is under the developer responsability." width=60% src="https://make.wordpress.org/core/files/2023/03/standard-graph.png">
+
+
+With this absorption, less knowledge is required to create interactive blocks, and developers have fewer decisions to worry about.
+
+By adopting a standard, learning from other interactive blocks is simpler, and fosters collaboration and code reusability. As a result, the development process is leanier and friendlier to less experienced developers.
+
diff --git a/docs/reference-guides/interactivity-api/iapi-faq.md b/docs/reference-guides/interactivity-api/iapi-faq.md
new file mode 100644
index 00000000000000..dea7bc1d4367be
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/iapi-faq.md
@@ -0,0 +1,136 @@
+# Frequently Asked Questions
+
+## How does the Interactivity API work under the hood?
+
+Its three main components are:
+
+- [Preact](https://preactjs.com/) combined with [Preact Signals](https://preactjs.com/guide/v10/signals/) for hydration, client logic, and client-side navigation.
+- HTML Directives that can be understood by both the client and server.
+- Server-side logic, handled by the [HTML_Tag_Processor](https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/).
+
+## Why Preact to build the directives system? Why not React or another JavaScript framework?
+
+Preact has a number of advantages over React and other JavaScript frameworks like Vue, Svelte, or Solid in the context of the frontend (which is the focus of the Interactivity API):
+
+- It’s small: 8kB, including [hooks](https://preactjs.com/guide/v10/hooks/) and [signals](https://preactjs.com/blog/introducing-signals/).
+- It gives us DOM diffing out of the box.
+- It’s extremely extensible through their Option Hooks. They use that extensibility for the hooks (preact/hooks), compatibility with React (preact/compat) and their signals (@preact/signals). Basically, everything but the DOM diffing algorithm.
+- Its core team has been great and very helpful. They are also interested in enhancing this “island-based” usage of Preact.
+
+## Is Gutenberg going to move from React to Preact since the Interactivity API uses it?
+
+No. At the moment, there are no plans to make that transition. The requirements and advantages of the editor, as a fully interactive application, are quite different. Preact does have a [`@preact/compat`](https://preactjs.com/guide/v10/switching-to-preact/) package that enables full compatibility with the React ecosystem, and many large web applications use it. However, using Preact in the block editor would not offer advantages like it does on the frontend in the Interactivity API.
+
+## What approaches have been considered instead of using directives?
+
+Many alternative approaches were considered. Here’s a brief summary of some of them:
+
+### React and other JavaScript frameworks
+
+React was considered first because Gutenberg developers are familiar with it. Other popular JS frameworks like Svelte, Vue.js, or Angular were also considered, but none of them (including React) are PHP-friendly or compatible with WordPress hooks or internationalization.
+
+### Alpine.js
+
+Alpine.js is a great framework, and it inspired a lot of functionality in the Interactivity API. However, it doesn’t support server-side rendering of its [directives](https://github.com/alpinejs/alpine/tree/d7f9d641f7a763c56c598d118bd189a406a22383/packages/docs/src/en/directives), and having a similar system tailored for WordPress blocks has many benefits.
+
+Preact was chosen instead of Alpine.js for numerous reasons, such as its smaller size, its better performance (especially with the addition of [signals](https://preactjs.com/guide/v10/signals/)), the fact that custom directives are written with Preact’s declarative syntax and tooling (hooks, signals), it’s more battle-tested and has a larger community than Alpine.js. It’s also compatible with React (for sharing client-side rendered components from the Editor), and it provides to the Interactivity API the fastest DOM diffing algorithm out of the box, including UI state preservation.
+
+Furthermore, with Preact operating in the background, the Interactivity API manages "the final layer" so it can be better adapted to WordPress requirements. For example, JavaScript expressions are not allowed inside directives to avoid security risks and ensure compliance with strict security policies, and all WordPress directives are spec-compliant HTML attributes.
+
+<div class="callout callout-info">
+  Have a look at the conversation at <a href="https://github.com/WordPress/gutenberg/discussions/53022#discussioncomment-4696611">"Why Preact instead of Alpine?"</a> to learn more about this.
+</div>
+
+
+### Plain JavaScript
+
+See the answer below. 
+
+### Template DSL
+
+The possibility of creating a [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) for writing interactive templates was also researched. The code written in that Template DSL would then be compiled into both JavaScript and PHP. However, creating a production-grade Template compiler is complex and would be a large and risky investment of effort. This approach is still being considered for the future, with the directives serving as a compilation target.
+
+## Why should I, as a block developer, use the Interactivity API rather than React?
+
+Using React on the frontend doesn’t work smoothly with server rendering in PHP. Every approach that uses React to render blocks has to load content using client-side JavaScript. If you only render your blocks on the client, it typically results in a poor user experience because the user stares at empty placeholders and spinners while waiting for content to load. 
+
+Using JS in PHP extensions (like v8js) is also possible, but unfortunately PHP extensions are not backward compatible and can only be used when there's a PHP fallback.
+
+Now, it’s possible to server-render a block in PHP **and** use React to render the same block on the frontend. However, this results in a poor developer experience because the logic has to be duplicated across the PHP and React parts. Not only that, but you have now exposed yourself to subtle bugs caused by WordPress hooks!
+
+Imagine installing a third-party plugin with a hook (filter) that modifies the server-rendered HTML. Let’s say this filter adds a single CSS class to your block’s HTML. That CSS class will be present in the server-rendered markup. On the frontend, your block will render again in React, but now the content will not include that CSS class because there is no way to apply WordPress hooks to React-rendered content!
+
+On the other hand, the Interactivity API is designed to work perfectly with WordPress hooks because directives enhance the server-rendered HTML with behaviors. This also means it works out of the box with WordPress backend APIs like i18n.
+
+To summarize, using the Interactivity API rather than just using React comes with these benefits:
+
+- If you use React, your interactive blocks must generate the same markup on the client as they do on the server in PHP. Using the Interactivity API, there is no such requirement as directives are added to server-rendered HTML.
+- The Interactivity API is PHP-friendlier. It works out of the box with WordPress hooks or other server functionalities such as internationalization. For example, with React, you can’t know which hooks are applied on the server, and their modifications would be overwritten after hydration.
+- All the benefits of [using a standard](/docs/reference-guides/interactivity-api/iapi-about.md#why-a-standard).
+
+
+## What are the benefits of Interactivity API over just using jQuery or vanilla JavaScript?
+
+The main difference is that the Interactivity API is **declarative and reactive**, so writing and maintaining complex interactive experiences should become way easier. Additionally, it has been **specially designed to work with blocks**, providing a standard that comes with the benefits mentioned above, like inter-block communication, compatibility, or site-wide features such as client-side navigation.
+
+Finally, comparing it with jQuery, **the Interactivity API runtime is ~10kb**, which is much more lightweight. Actually, there is an ongoing effort to remove heavy frameworks like jQuery across the WordPress ecosystem, and this would help in this regard.
+
+## Do I need to know React, PHP, and this Interactivity API?
+
+If you want to add frontend interactivity to your blocks using this API, the short answer is yes. If your block is not interactive, the block creation workflow will remain exactly the same.
+
+The Interactivity API introduces a new standard method to facilitate the integration of interactive behaviors into the frontend part of WordPress. This means that you still need to use React to handle the editor part of your blocks.
+
+On the other hand, if you want to create an interactive block, with the Interactivity API you don’t have to deal with complex topics like tooling, integration with WordPress, inter-block communication, or the server-side rendering of the interactive parts.
+
+## Can the Interactivity API be used beyond a block?
+
+Absolutely, yes, it is not limited to blocks. You'll see a lot of mentions of how the Interactivity API provides a standard for creating interactive blocks, but that's only because that's the most common use case. More generally speaking, the Interactivity API standard can be used to add "interactive behaviors" to the front end of any part of WordPress.
+
+See the [`wp_interactivity_process_directives` function](https://developer.wordpress.org/reference/functions/wp_interactivity_process_directives/) for details on using the Interactivity API outside of blocks with arbitrary HTML.
+
+## Does this mean I must migrate all my interactive blocks to use this API?
+
+No. Blocks outside the Interactivity API can coexist with blocks using it. However, as explained above, keep in mind that there are some benefits for blocks that use the API:
+
+- **Blocks can communicate with each other easily**. With a standard, this communication is handled by default. When different blocks use different approaches to frontend interactivity, inter-block communication becomes more complex and gets almost impossible when separate developers create blocks.
+- **Composability and compatibility**: You can combine interactive blocks, nest them in structures with defined behaviors, and, thanks to following the same standard, they are fully cross-compatible. If each block were to use a different approach to interactivity, they would likely break.
+- **Fewer KBs will be sent to the browser**. If each plugin author uses a different JS framework, more code will be loaded in the frontend. If all the blocks use the same one, the code is reused.
+- If all the blocks on a page use this standard, site-wide features like client-side navigation can be enabled.
+
+## What are the performance implications of using this API? Is it worth loading the Interactivity API for very simple use cases?
+
+The API has been designed with performance in mind, so it shouldn’t be a problem:
+
+- **The runtime code needed for the directives is just ~10 KB**, and it only needs to be loaded once for all the blocks.
+- **All the script modules that belong to the Interactivity API (including the `view.js` files) will load without blocking the page rendering.**
+- There are [ongoing explorations](https://github.com/WordPress/gutenberg/discussions/52723) about the possibility of **delaying the scripts loading once the block is in the viewport**. This way, the initial load would be optimized without affecting the user experience.
+
+## Does it work with the Core Translation API?
+
+As the Interactivity API works perfectly with server-side rendering, you can use all the WordPress APIs including [`__()`](https://developer.wordpress.org/reference/functions/__/) and [`_e()`](https://developer.wordpress.org/reference/functions/_e/). You can use it to translate the text in the HTML (as you normally would) and even use it inside the store when [using `wp_interactivity_state()` on the server side](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#setting-the-store). It might look something like this:
+
+```php
+// render.php
+wp_interactivity_state( 'favoriteMovies', array(
+      "1" => array(
+        "id" => "123-abc",
+        "movieName" => __("someMovieName", "textdomain")
+      ),
+) );
+```
+
+A translation API compatible with script modules (needed for the Interactivity API) is currently being worked on. Check [#60234](https://core.trac.wordpress.org/ticket/60234) to follow the progress on this work.
+
+## I’m concerned about XSS; can JavaScript be injected into directives?
+
+No. The Interactivity API only allows for [References](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/api-reference/#values-of-directives-are-references-to-store-properties) to be passed as values to the directives. This way, there is no need to eval() full JavaScript expressions, so it’s not possible to perform XSS attacks.
+
+## Does this work with Custom Security Policies?
+
+Yes. The Interactivity API does not use [`eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) or the [`Function()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function) constructor, so it doesn’t violate the [`unsafe-eval`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe_keyword_values) content security policy. It is also designed to work with any [custom content security policy](https://developer.wordpress.org/apis/security/).
+
+## Can you use directives to make AJAX/REST-API requests?
+
+Sure. Actions and callbacks called by directives can do anything a JavaScript function can, including making API requests.
+
diff --git a/docs/reference-guides/interactivity-api/iapi-quick-start-guide.md b/docs/reference-guides/interactivity-api/iapi-quick-start-guide.md
new file mode 100644
index 00000000000000..628d3be7e7b49f
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/iapi-quick-start-guide.md
@@ -0,0 +1,53 @@
+# Quick start guide
+
+This guide will help you build a basic block that demonstrates the Interactivity API in WordPress.
+
+## Scaffold an interactive block
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+Next, use the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package and the [`@wordpress/create-block-interactive-template`](https://www.npmjs.com/package/@wordpress/create-block-interactive-template) template to scaffold the complete “My First Interactive Block” plugin.
+
+Choose the folder where you want to create the plugin, and then execute the following command in the terminal from within that folder:
+
+```
+npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
+```
+
+The slug provided (`my-first-interactive-block`) defines the folder name for the scaffolded plugin and the internal block name.
+
+## Basic usage
+
+With the plugin activated, you can explore how the block works. Use the following command to move into the newly created plugin folder and start the development process.
+
+```
+cd my-first-interactive-block && npm start
+```
+
+When `create-block` scaffolds the block, it installs `wp-scripts` and adds the most common scripts to the block’s `package.json` file. Refer to the [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/) article for an introduction to this package.
+
+The `npm start` command will start a development server and watch for changes in the block’s code, rebuilding the block whenever modifications are made.
+
+When you are finished making changes, run the `npm run build` command. This optimizes the block code and makes it production-ready.
+
+## View the block in action
+
+If you have a local WordPress installation already running, you can launch the commands above inside the `plugins` folder of that installation. If not, you can use [`wp-now`](https://github.com/WordPress/playground-tools/tree/trunk/packages/wp-now) to launch a WordPress site with the plugin installed by executing the following command from the plugin's folder (`my-first-interactive-block`).
+
+```
+npx @wp-now/wp-now start
+```
+
+You should be able to insert the "My First Interactive Block" block into any post and see how it behaves in the front end when published.
+
+<div class="callout callout-info">
+    <p>To get more advanced examples of using the Interactivity API you can check the following resources:</p>
+    <ul>
+      <li><a href="https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/#docs-examples">Docs & Examples</a></li>
+      <li><a href="https://github.com/WordPress/gutenberg/discussions/52894">Getting Started - and other learning resources</a></li>
+      <li><a href="https://github.com/WordPress/gutenberg/discussions/55642#">Interactivity API showcase</a></li>
+    </ul>
+</div>
+
+
+
diff --git a/docs/reference-guides/packages.md b/docs/reference-guides/packages.md
index bd1edf1ae629aa..ce9c4b7950c29e 100644
--- a/docs/reference-guides/packages.md
+++ b/docs/reference-guides/packages.md
@@ -2,7 +2,7 @@
 
 WordPress exposes a list of JavaScript packages and tools for WordPress development.
 
-## Using the Packages via WordPress Global
+## Using the packages via WordPress global
 
 JavaScript packages are available as a registered script in WordPress and can be accessed using the `wp` global variable.
 
@@ -12,7 +12,7 @@ If you wanted to use the `PlainText` component from the block editor module, fir
 wp_enqueue_script(
 	'my-custom-block',
 	plugins_url( $block_path, __FILE__ ),
-	array( 'wp-blocks', 'wp-block-editor', 'wp-element', 'wp-i18n' )
+	array( 'react', 'wp-blocks', 'wp-block-editor', 'wp-i18n' )
 );
 ```
 
@@ -22,7 +22,7 @@ After the dependency is declared, you can access the module in your JavaScript c
 const { PlainText } = wp.blockEditor;
 ```
 
-## Using the Packages via npm
+## Using the packages via npm
 
 All the packages are also available on [npm](https://www.npmjs.com/org/wordpress) if you want to bundle them in your code.
 
diff --git a/docs/reference-guides/richtext.md b/docs/reference-guides/richtext.md
index e0b73826308f16..ec484ac829c1ce 100644
--- a/docs/reference-guides/richtext.md
+++ b/docs/reference-guides/richtext.md
@@ -10,11 +10,11 @@ The RichText component is extremely powerful because it provides built-in functi
 
 Unlike other components that exist in the [Component Reference](/packages/components/README.md) section, RichText lives separately because it only makes sense within the block editor, and not within other areas of WordPress.
 
-## Property Reference
+## Property reference
 
 For a list of the possible properties to pass your RichText component, [check out the component documentation on GitHub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md).
 
-## Core Blocks Using the RichText Component
+## Core blocks using the RichText component
 
 There are a number of core blocks using the RichText component. The JavaScript edit function linked below for each block can be used as a best practice reference while creating your own blocks.
 
@@ -25,8 +25,7 @@ There are a number of core blocks using the RichText component. The JavaScript e
 
 ## Example
 
-{% codetabs %}
-{% JSX %}
+
 
 ```jsx
 import { registerBlockType } from '@wordpress/blocks';
@@ -66,55 +65,15 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% Plain %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-			selector: 'h2',
-		},
-	},
-
-	edit: function( props ) {
-		var blockProps = wp.blockEditor.useBlockProps();
-
-		return wp.element.createElement( wp.blockEditor.RichText, Object.assign( blockProps, {
-			tagName: 'h2',  // The tag here is the element output and editable in the admin
-			value: props.attributes.content, // Any existing content, either from the database or an attribute default
-			allowedFormats: [ 'core/bold', 'core/italic' ], // Allow the content to be made bold or italic, but do not allow other formatting options
-			onChange: function( content ) {
-				props.setAttributes( { content: content } ); // Store updated content as a block attribute
-			},
-			placeholder: __( 'Heading...' ), // Display this text before any content has been added by the user
-		} ) );
-	},
-
-	save: function( props ) {
-		var blockProps = wp.blockEditor.useBlockProps.save();
-
-		return wp.element.createElement( wp.blockEditor.RichText.Content, Object.assign( blockProps, {
-			tagName: 'h2', value: props.attributes.content // Saves <h2>Content added in the editor...</h2> to the database for frontend display
-		} ) );
-	}
-} );
-```
-
-{% end %}
-
-## Common Issues & Solutions
+## Common issues and solutions
 
 While using the RichText component a number of common issues tend to appear.
 
-### HTML Formatting Tags Display in the Content
+### HTML formatting tags display in the content
 
 If the HTML tags from text formatting such as `<strong>` or `<em>` are being escaped and displayed on the frontend of the site, this is likely due to an issue in your save function. Make sure your code looks something like `<RichText.Content tagName="h2" value={ heading } />` (JSX) within your save function instead of simply outputting the value with `<h2>{ heading }</h2>`.
 
-### Unwanted Formatting Options Still Display
+### Unwanted formatting options still display
 
 Before moving forward, consider if using the RichText component makes sense at all. Would it be better to use a basic `input` or `textarea` element? If you don't think any formatting should be possible, these HTML tags may make more sense.
 
@@ -122,7 +81,7 @@ If you'd still like to use RichText, you can eliminate all of the formatting opt
 
 If you want to limit the formats allowed, you can specify using `allowedFormats` property in your code, see the example above or [the component documentation](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md#allowedformats-array) for details.
 
-### Disable Specific Format Types in Editor
+### Disable specific format types in Editor
 
 The RichText component uses formats to display inline elements, for example images within the paragraph block. If you just want to disable a format from the editor, you can use the `unregisterFormatType` function. For example to disable inline images, use:
 
diff --git a/docs/reference-guides/slotfills/README.md b/docs/reference-guides/slotfills/README.md
index b3ab4dcc083862..874a3a69096b81 100644
--- a/docs/reference-guides/slotfills/README.md
+++ b/docs/reference-guides/slotfills/README.md
@@ -9,16 +9,16 @@ In order to use them, we must leverage the [@wordpress/plugins](/packages/plugin
 
 In order to access the SlotFills, we need to do four things:
 
-1. Import the `registerPlugin` method from `wp.plugins`.
-2. Import the SlotFill we want from `wp.editPost`.
-3. Define a method to render our changes. Our changes/additions will be wrapped in the SlotFill component we imported.
+1. Import the `registerPlugin` method from the `@wordpress/plugins` package.
+2. Import the SlotFill we want from the `@wordpress/editor'` package.
+3. Define a component to render our changes. Our changes/additions will be wrapped in the SlotFill component we imported.
 4. Register the plugin.
 
 Here is an example using the `PluginPostStatusInfo` slotFill:
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginPostStatusInfo } from '@wordpress/edit-post';
+import { PluginPostStatusInfo } from '@wordpress/editor';
 
 const PluginPostStatusInfoTest = () => (
 	<PluginPostStatusInfo>
@@ -29,11 +29,244 @@ const PluginPostStatusInfoTest = () => (
 registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 ```
 
+## Conditionally rendering SlotFill content
+
+With the exception of [MainDashboardButton](/docs/reference-guides/slotfills/main-dashboard-button.md), every available SlotFill is exposed in both the Post Editor and Site Editor and any Fill that is registered will be rendered in both contexts. There are a number of approaches that can be implemented to conditionally render Fills.
+
+### Restricting fills to the Post Editor
+
+A fill can be restricted to the Post Editor by checking to see if the current post type object property `viewable` is set to `true`. Any post type not set to `viewable`, does not have an associated edit post screen and is a good indicator that the user is not in the Post Editor. The example below will render its content on the edit post screen for any registered post type.
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import {
+	PluginDocumentSettingPanel,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * The component to be rendered  as part of the plugin.
+ */
+const EditPostDocumentSettingPanel = () => {
+	// Retrieve information about the current post type.
+	const isViewable = useSelect( ( select ) => {
+		const postTypeName = select( editorStore ).getCurrentPostType();
+		const postTypeObject = select( coreStore ).getPostType( postTypeName );
+		return postTypeObject?.viewable;
+	}, [] );
+
+	// If the post type is not viewable, then do not render my the fill.
+	if ( ! isViewable ) {
+		return null;
+	}
+
+	return (
+		<PluginDocumentSettingPanel
+			name="custom-panel"
+			title={ __( 'Post Editor Example' ) }
+			className="custom-panel"
+		>
+			<p>{ __( 'Only appears in the Edit Post screen' ) }</p>
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'example-post-edit-only', {
+	render: EditPostDocumentSettingPanel,
+} );
+```
+
+### Restricting fills to certain post types.
+
+The following example expands on the example above by creating an allow list of post types where the fill should be rendered. In this case, the fill is only rendered when editing pages.
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import {
+	PluginDocumentSettingPanel,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * The component to be rendered  as part of the plugin.
+ */
+const RestrictPostTypes = () => {
+	// Retrieve information about the current post type.
+	const { isViewable, postTypeName } = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const postTypeObject = select( coreStore ).getPostType( postType );
+		return {
+			isViewable: postTypeObject?.viewable,
+			postTypeName: postType,
+		};
+	}, [] );
+
+	// The list of post types that are allowed to render the plugin.
+	const allowedPostTypes = [ 'page' ];
+
+	// If the post type is not viewable or not in the allowed list, do not render the plugin.
+	if ( ! isViewable || ! allowedPostTypes.includes( postTypeName ) ) {
+		return null;
+	}
+
+	return (
+		<PluginDocumentSettingPanel
+			name="custom-panel"
+			title={ __( 'Restrict Post Types Example' ) }
+			className="custom-panel"
+		>
+			<p>
+				{ sprintf(
+					__(
+						'Only appears on Post Types that are in the allowed list. %s'
+					),
+					allowedPostTypes.join( ', ' )
+				) }
+			</p>
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'example-restrict-post-types', {
+	render: RestrictPostTypes,
+} );
+```
+
+### Restricting fills to the Side Editor
+
+To restrict fills to the Site Editor, the reverse logic is true. If the post type object's `viewable` property is set to `true`, then the fill should not be rendered. The example below will render its content on any Site Editor screen.
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import {
+	PluginDocumentSettingPanel,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * The component to be rendered  as part of the plugin.
+ */
+const SiteEditorDocumentSettingPanel = () => {
+	// Retrieve information about the current post type.
+	const isViewable = useSelect( ( select ) => {
+		const postTypeName = select( editorStore ).getCurrentPostType();
+		const postTypeObject = select( coreStore ).getPostType( postTypeName );
+
+		// A viewable post type is one than can be viewed in the WordPress admin. Internal ones are not set to viewable.
+		return postTypeObject?.viewable;
+	}, [] );
+
+	// If the post type is viewable, do not render my fill
+	if ( isViewable ) {
+		return null;
+	}
+
+	return (
+		<PluginDocumentSettingPanel
+			name="custom-panel"
+			title={ __( 'Site Editor Example' ) }
+			className="custom-panel"
+		>
+			<p>{ __( 'Only appears in the Site Editor' ) }</p>
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'example-site-editor', {
+	render: SiteEditorDocumentSettingPanel,
+} );
+```
+
+### Restricting fills to certain screens in the Site Editor.
+
+This example builds on the example above by providing an allow list to control which screens a fill can be rendered within the Site Editor.
+
+```js
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+import {
+	PluginDocumentSettingPanel,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * The component to be rendered  as part of the plugin.
+ */
+const SiteEditorDocumentSettingPanel = () => {
+	// Allowed areas in the Site Editor.
+	const allowedSiteEditorScreens = [
+		'wp_template', // Templates
+		'wp_block', // Patterns
+		'wp_template_part', // Template Parts
+	];
+
+	const { isViewable, postType } = useSelect( ( select ) => {
+		const postTypeName = select( editorStore ).getCurrentPostType();
+		const postTypeObject = select( coreStore ).getPostType( postTypeName );
+
+		return {
+			// A viewable post type is one than can be viewed in the WordPress admin. Internal ones are not set to viewable.
+			isViewable: postTypeObject?.viewable,
+			postType: postTypeName,
+		};
+	}, [] );
+
+	// If the post type is viewable, do not render my plugin.
+	if ( isViewable || ! allowedSiteEditorScreens.includes( postType ) ) {
+		return null;
+	}
+
+	return (
+		<PluginDocumentSettingPanel
+			name="custom-panel"
+			title={ __( 'Restricted to Site Editor screens' ) }
+			className="custom-panel"
+		>
+			<p>
+				{ sprintf(
+					__(
+						'Only appears on Editor Screens that are in the allowed list. %s'
+					),
+					allowedSiteEditorScreens.join( ', ' )
+				) }
+			</p>
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'example-site-editor-only', {
+	render: SiteEditorDocumentSettingPanel,
+} );
+```
+
 ## How do they work?
 
 SlotFills are created using `createSlotFill`. This creates two components, `Slot` and `Fill` which are then used to create a new component that is exported on the `wp.plugins` global.
 
-**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js#L54))
+**Definition of the `PluginPostStatusInfo` SlotFill** ([see core code](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-post-status-info/index.js#L55))
 
 ```js
 /**
@@ -61,39 +294,69 @@ export default PluginPostStatusInfo;
 This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
-Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
+Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed in the end of the component.
 
-See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-post/src/components/sidebar/post-status/index.js#L26).
+See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/editor/src/components/sidebar/post-summary.js#L39).
 
 ```js
-const PostStatus = ( { isOpened, onTogglePanel } ) => (
-	<PanelBody
-		className="edit-post-post-status"
-		title={ __( 'Summary' ) }
-		opened={ isOpened }
-		onToggle={ onTogglePanel }
-	>
-		<PluginPostStatusInfo.Slot>
-			{ ( fills ) => (
-				<Fragment>
-					<PostVisibility />
-					<PostSchedule />
-					<PostFormat />
-					<PostSticky />
-					<PostPendingStatus />
-					<PostAuthor />
-					{ fills }
-					<PostTrash />
-				</Fragment>
-			) }
-		</PluginPostStatusInfo.Slot>
-	</PanelBody>
-);
+export default function PostSummary( { onActionPerformed } ) {
+	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
+		// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
+		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+		const { isEditorPanelRemoved } = select( editorStore );
+		return {
+			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+		};
+	}, [] );
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								onActionPerformed={ onActionPerformed }
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 2 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										<PostStickyPanel />
+									</VStack>
+									<TemplateAreas />
+									{ fills }
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
 ```
 
 ## Currently available SlotFills and examples
 
-The following SlotFills are available in the `edit-post` package. Please refer to the individual items below for usage and example details:
+The following SlotFills are available in the `edit-post` or `editor` packages. Please refer to the individual items below for usage and example details:
 
 -   [MainDashboardButton](/docs/reference-guides/slotfills/main-dashboard-button.md)
 -   [PluginBlockSettingsMenuItem](/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md)
diff --git a/docs/reference-guides/slotfills/main-dashboard-button.md b/docs/reference-guides/slotfills/main-dashboard-button.md
index a333b0f39a4e16..b55ed50648db15 100644
--- a/docs/reference-guides/slotfills/main-dashboard-button.md
+++ b/docs/reference-guides/slotfills/main-dashboard-button.md
@@ -1,21 +1,26 @@
 # MainDashboardButton
 
-This slot allows replacing the default main dashboard button in the post editor and site editor.
+This slot allows replacing the default main dashboard button in the post editor. It is no longer available in the site editor as of WordPress 6.2.
 It's used for returning back to main wp-admin dashboard when editor is in fullscreen mode.
 
+<div class="callout callout-warning">
+	Please note that this SlotFill is still considered experimental and may change
+</div>
+
 ## Examples
 
-### Post editor example
+### Change the icon
 
-This will override the W icon button in the header.
+This will replace the W icon button in the header with a close icon.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
 import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
+import { close } from '@wordpress/icons';
 
 const MainDashboardButtonTest = () => (
 	<MainDashboardButton>
-		Custom main dashboard button content
+		<FullscreenModeClose icon={ close } />
 	</MainDashboardButton>
 );
 
@@ -24,8 +29,11 @@ registerPlugin( 'main-dashboard-button-test', {
 } );
 ```
 
-If your goal is just to replace the icon of the existing button in
-the post editor, that can be achieved in the following way:
+![The edit post screen in fullscreen mode displaying a close icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-close-icon-example.png 'Replace the W icon button in the header with a close icon')
+
+### Change the icon and link
+
+This example will change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
@@ -33,11 +41,11 @@ import {
 	__experimentalFullscreenModeClose as FullscreenModeClose,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/edit-post';
-import { close } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 
 const MainDashboardButtonIconTest = () => (
 	<MainDashboardButton>
-		<FullscreenModeClose icon={ close } href="http://wordpress.org" />
+		<FullscreenModeClose icon={ external } href="http://wordpress.org" />
 	</MainDashboardButton>
 );
 
@@ -46,26 +54,4 @@ registerPlugin( 'main-dashboard-button-icon-test', {
 } );
 ```
 
-### Site editor example
-
-In the site editor this slot refers to the "back to dashboard" button in the navigation sidebar.
-
-```js
-import { registerPlugin } from '@wordpress/plugins';
-import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-site';
-import { __experimentalNavigationBackButton as NavigationBackButton } from '@wordpress/components';
-
-const MainDashboardButtonIconTest = () => (
-	<MainDashboardButton>
-		<NavigationBackButton
-			backButtonLabel={ __( 'Back to dashboard' ) }
-			className="edit-site-navigation-panel__back-to-dashboard"
-			href="index.php"
-		/>
-	</MainDashboardButton>
-);
-
-registerPlugin( 'main-dashboard-button-icon-test', {
-	render: MainDashboardButtonIconTest,
-} );
-```
+![The edit post screen in fullscreen mode displaying an external link icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-external-link-example.png 'Change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked')
diff --git a/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md b/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md
index 8e17893b546421..aa1eecb293261c 100644
--- a/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-block-settings-menu-item.md
@@ -7,7 +7,7 @@ This will either appear in the controls for each block or at the Top Toolbar dep
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post';
+import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
 
 const PluginBlockSettingsMenuGroupTest = () => (
 	<PluginBlockSettingsMenuItem
diff --git a/docs/reference-guides/slotfills/plugin-document-setting-panel.md b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
index fcec1d4344354c..aa3e55abe2f7ee 100644
--- a/docs/reference-guides/slotfills/plugin-document-setting-panel.md
+++ b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
@@ -13,7 +13,7 @@ This SlotFill allows registering a UI to edit Document settings.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
 
 const PluginDocumentSettingPanelDemo = () => (
 	<PluginDocumentSettingPanel
@@ -33,15 +33,68 @@ registerPlugin( 'plugin-document-setting-panel-demo', {
 
 ## Accessing a panel programmatically
 
+Core and custom panels can be accessed programmatically using their panel name. The core panel names are:
+
+-   Summary Panel: `post-status`
+-   Categories Panel: `taxonomy-panel-category`
+-   Tags Panel: `taxonomy-panel-post_tag`
+-   Featured Image Panel: `featured-image`
+-   Excerpt Panel: `post-excerpt`
+-   DiscussionPanel: `discussion-panel`
+
 Custom panels are namespaced with the plugin name that was passed to `registerPlugin`.
-In order to access the panels using function such as `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled` be sure to prepend the namespace.
+In order to access the panels using function such as `toggleEditorPanelOpened` or `toggleEditorPanelEnabled` be sure to prepend the namespace.
 
-To programmatically toggle the custom panel added in the example above, use the following:
+To programmatically toggle panels, use the following:
 
 ```js
-wp.data
-	.dispatch( 'core/edit-post' )
-	.toggleEditorPanelOpened(
-		'plugin-document-setting-panel-demo/custom-panel'
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+const Example = () => {
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+	return (
+		<Button
+			variant="primary"
+			onClick={ () => {
+				// Toggle the Summary panel
+				toggleEditorPanelOpened( 'post-status' );
+
+				// Toggle the Custom Panel introduced in the example above.
+				toggleEditorPanelOpened(
+					'plugin-document-setting-panel-demo/custom-panel'
+				);
+			} }
+		>
+			Toggle Panels
+		</Button>
+	);
+};
+```
+
+It is also possible to remove panels from the admin using the `removeEditorPanel` function by passing the name of the registered panel.
+
+```js
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+const Example = () => {
+	const { removeEditorPanel } = useDispatch( editorStore );
+	return (
+		<Button
+			variant="primary"
+			onClick={ () => {
+				// Remove the Featured Image panel.
+				removeEditorPanel( 'featured-image' );
+
+				// Remove the Custom Panel introduced in the example above.
+				removeEditorPanel(
+					'plugin-document-setting-panel-demo/custom-panel'
+				);
+			} }
+		>
+			Toggle Panels
+		</Button>
 	);
+};
 ```
diff --git a/docs/reference-guides/slotfills/plugin-more-menu-item.md b/docs/reference-guides/slotfills/plugin-more-menu-item.md
index 6a53c029b10dda..b5dd211b60f3e1 100644
--- a/docs/reference-guides/slotfills/plugin-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-more-menu-item.md
@@ -6,7 +6,7 @@ This slot will add a new item to the More Tools & Options section.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginMoreMenuItem } from '@wordpress/edit-post';
+import { PluginMoreMenuItem } from '@wordpress/editor';
 import { image } from '@wordpress/icons';
 
 const MyButtonMoreMenuItemTest = () => (
diff --git a/docs/reference-guides/slotfills/plugin-post-publish-panel.md b/docs/reference-guides/slotfills/plugin-post-publish-panel.md
index 59972af3505ec9..c7457c2eeb4ebb 100644
--- a/docs/reference-guides/slotfills/plugin-post-publish-panel.md
+++ b/docs/reference-guides/slotfills/plugin-post-publish-panel.md
@@ -6,7 +6,7 @@ This slot allows for injecting items into the bottom of the post-publish panel t
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginPostPublishPanel } from '@wordpress/edit-post';
+import { PluginPostPublishPanel } from '@wordpress/editor';
 
 const PluginPostPublishPanelTest = () => (
 	<PluginPostPublishPanel>
diff --git a/docs/reference-guides/slotfills/plugin-post-status-info.md b/docs/reference-guides/slotfills/plugin-post-status-info.md
index 2fc0d50050ee7a..03e6d3bfe3a17a 100644
--- a/docs/reference-guides/slotfills/plugin-post-status-info.md
+++ b/docs/reference-guides/slotfills/plugin-post-status-info.md
@@ -6,7 +6,7 @@ This slots allows for the insertion of items in the Summary panel of the documen
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginPostStatusInfo } from '@wordpress/edit-post';
+import { PluginPostStatusInfo } from '@wordpress/editor';
 
 const PluginPostStatusInfoTest = () => (
 	<PluginPostStatusInfo>
diff --git a/docs/reference-guides/slotfills/plugin-pre-publish-panel.md b/docs/reference-guides/slotfills/plugin-pre-publish-panel.md
index d15e39bf09f4ce..ac9fa13a882f41 100644
--- a/docs/reference-guides/slotfills/plugin-pre-publish-panel.md
+++ b/docs/reference-guides/slotfills/plugin-pre-publish-panel.md
@@ -6,7 +6,7 @@ This slot allows for injecting items into the bottom of the pre-publish panel th
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginPrePublishPanel } from '@wordpress/editor';
 
 const PluginPrePublishPanelTest = () => (
 	<PluginPrePublishPanel>
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..1a1b2540b258b9 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
@@ -1,32 +1,80 @@
 # PluginSidebarMoreMenuItem
 
-This slot allows the creation of a `<PluginSidebar>` with a menu item that when clicked will expand the sidebar to the appropriate Plugin section.
-This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match the `name` on the `<PluginSidebar>`
+This slot is used to allow the opening of a `<PluginSidebar />` panel from the Options dropdown.
+When a `<PluginSidebar />` is registered, a `<PluginSidebarMoreMenuItem />` is automatically registered using the title prop from the `<PluginSidebar />` and so it's not required to use this slot to create the menu item.
 
 ## Example
 
+This example shows how customize the text for the menu item instead of using the default text provided by the `<PluginSidebar />` title.
+
 ```js
+import { __ } from '@wordpress/i18n';
+import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
+import { useState } from '@wordpress/element';
 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', {
+
+const PluginSidebarMoreMenuItemTest = () => {
+	const [ text, setText ] = useState( '' );
+	const [ select, setSelect ] = useState( 'a' );
+	return (
+		<>
+			<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
+				{ __( 'Custom Menu Item Text' ) }
+			</PluginSidebarMoreMenuItem>
+			<PluginSidebar
+				name="sidebar-name"
+				icon={ image }
+				title="My Sidebar"
+			>
+				<PanelBody>
+					<h2>
+						{ __(
+							'This is a heading for the PluginSidebar example.'
+						) }
+					</h2>
+					<p>
+						{ __(
+							'This is some example text for the PluginSidebar example.'
+						) }
+					</p>
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Text Control' ) }
+						value={ text }
+						onChange={ ( newText ) => setText( newText ) }
+					/>
+					<SelectControl
+						label={ __( 'Select Control' ) }
+						value={ select }
+						options={ [
+							{ value: 'a', label: __( 'Option A' ) },
+							{ value: 'b', label: __( 'Option B' ) },
+							{ value: 'c', label: __( 'Option C' ) },
+						] }
+						onChange={ ( newSelect ) => setSelect( newSelect ) }
+					/>
+					<Button variant="primary">
+						{ __( 'Primary Button' ) }{ ' ' }
+					</Button>
+				</PanelBody>
+			</PluginSidebar>
+		</>
+	);
+};
+
+registerPlugin( 'plugin-sidebar-more-menu-item-example', {
 	render: PluginSidebarMoreMenuItemTest,
 } );
 ```
 
 ## Location
 
-![Interaction](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-more-menu-item.gif?raw=true)
+![Interaction](https://developer.wordpress.org/files/2024/08/pluginsidebar-more-menu-item-1.gif)
diff --git a/docs/reference-guides/slotfills/plugin-sidebar.md b/docs/reference-guides/slotfills/plugin-sidebar.md
index 56d87ea1fc1be4..7191b80e54e2d6 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar.md
@@ -1,30 +1,69 @@
 # PluginSidebar
 
-This slot allows for adding items into the Gutenberg Toolbar.
-Using this slot will add an icon to the bar that, when clicked, will open a sidebar with the content of the items wrapped in the `<PluginSidebar />` component.
+This slot allows adding items to the tool bar of either the Post or Site editor screens.
+Using this slot will add an icon to the toolbar that, when clicked, opens a panel with containing the items wrapped in the `<PluginSidebar />` component.
+Additionally, it will also create a `<PluginSidebarMoreMenuItem />` that will allow opening the panel from Options panel when clicked.
 
 ## Example
 
-```js
+```jsx
+import { __ } from '@wordpress/i18n';
+import { PluginSidebar } from '@wordpress/editor';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginSidebar } from '@wordpress/edit-post';
-import { image } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 
-const PluginSidebarTest = () => (
-	<PluginSidebar name="plugin-sidebar-test" title="My Plugin" icon={ image }>
-		<p>Plugin Sidebar</p>
-	</PluginSidebar>
-);
+const PluginSidebarExample = () => {
+	const [ text, setText ] = useState( '' );
+	const [ select, setSelect ] = useState( 'a' );
 
-registerPlugin( 'plugin-sidebar-test', { render: PluginSidebarTest } );
+	return (
+		<PluginSidebar
+			name="plugin-sidebar-example"
+			title={ __( 'My PluginSidebar' ) }
+			icon={ 'smiley' }
+		>
+			<PanelBody>
+				<h2>
+					{ __( 'This is a heading for the PluginSidebar example.' ) }
+				</h2>
+				<p>
+					{ __(
+						'This is some example text for the PluginSidebar example.'
+					) }
+				</p>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Text Control' ) }
+					value={ text }
+					onChange={ ( newText ) => setText( newText ) }
+				/>
+				<SelectControl
+					label={ __( 'Select Control' ) }
+					value={ select }
+					options={ [
+						{ value: 'a', label: 'Option A' },
+						{ value: 'b', label: 'Option B' },
+						{ value: 'c', label: 'Option C' },
+					] }
+					onChange={ ( newSelect ) => setSelect( newSelect ) }
+				/>
+				<Button variant="primary">{ __( 'Primary Button' ) } </Button>
+			</PanelBody>
+		</PluginSidebar>
+	);
+};
+
+// Register the plugin.
+registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } );
 ```
 
 ## Location
 
-### Closed State
-
-![Closed State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-closed-state.png?raw=true)
-
-### Open State
-
-![Open State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-open-state.png?raw=true)
+![PluginSidebar example expanded](https://developer.wordpress.org/files/2024/08/plugin-sidebar-example.png)
diff --git a/docs/reference-guides/theme-json-reference/README.md b/docs/reference-guides/theme-json-reference/README.md
index 819e7d561cda00..9f53a09a97e662 100644
--- a/docs/reference-guides/theme-json-reference/README.md
+++ b/docs/reference-guides/theme-json-reference/README.md
@@ -1,10 +1,11 @@
 # Theme.json Reference
 
-This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guide on how to use the theme.json file in your theme.
+This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guide on how to use the theme.json file in your theme.
 
--   [Version 2 (living reference)](/docs/reference-guides/theme-json-reference/theme-json-living.md)
+-   [Version 3 (latest)](/docs/reference-guides/theme-json-reference/theme-json-living.md)
 
-## Older Versions
+## Older versions
 
 -   [Migrating to Newer Theme.json Versions](/docs/reference-guides/theme-json-reference/theme-json-migrations.md)
 -   [Version 1](/docs/reference-guides/theme-json-reference/theme-json-v1.md)
+-   [Version 2](/docs/reference-guides/theme-json-reference/theme-json-v2.md)
diff --git a/docs/reference-guides/theme-json-reference/styles-versions.md b/docs/reference-guides/theme-json-reference/styles-versions.md
new file mode 100644
index 00000000000000..0cbffdc6ebfe07
--- /dev/null
+++ b/docs/reference-guides/theme-json-reference/styles-versions.md
@@ -0,0 +1,57 @@
+# Available Styles Options
+
+New styles options are integrated into theme.json on a regular basis. Knowing the style options available through theme.json or the styles editor at any given time can be challenging. To clarify, the table below indicates the WordPress version when each theme.json styles option became available and when a corresponding control was added to the user interface to allow management of the style from the Styles editor.
+
+## Styles keys
+
+| Key | theme.json Since| Style Editor Since |
+| --- | :---: | :---: |
+| `color.gradient`              | 5.8 | 5.9 |
+| `color.background`            | 5.8 | 5.9 |
+| `color.text`                  | 5.8 | 5.9 |
+| `border.color`                | 5.9 | 5.9 |
+| `border.width`                | 5.9 | 5.9 |
+| `border.style`                | 5.9 | 5.9 |
+| `border.radius`               | 5.8 | 5.9 |
+| `border.radius.topLeft`       | 5.9 | 5.9 |
+| `border.radius.topRight`      | 5.9 | 5.9 |
+| `border.radius.bottomLeft`    | 5.9 | 5.9 |
+| `border.radius.bottomRight`   | 5.9 | 5.9 |
+| `border.top.color`            | 6.1 | 6.1 |
+| `border.top.width`            | 6.1 | 6.1 |
+| `border.top.style`            | 6.1 | 6.1 |
+| `border.right.color`          | 6.1 | 6.1 |
+| `border.right.width`          | 6.1 | 6.1 |
+| `border.right.style`          | 6.1 | 6.1 |
+| `border.bottom.color`         | 6.1 | 6.1 |
+| `border.bottom.width`         | 6.1 | 6.1 |
+| `border.bottom.style`         | 6.1 | 6.1 |
+| `border.left.color`           | 6.1 | 6.1 |
+| `border.left.width`           | 6.1 | 6.1 |
+| `border.left.style`           | 6.1 | 6.1 |
+| `typography.fontFamily`       | 5.9 | 5.9 |
+| `typography.fontSize`         | 5.8 | 5.9 |
+| `typography.fontStyle`        | 5.9 | 5.9 |
+| `typography.fontWeight`       | 5.9 | 5.9 |
+| `typography.letterSpacing`    | 5.9 | 5.9 |
+| `typography.lineHeight`       | 5.8 | 5.9 |
+| `typography.textDecoration`   | 5.9 | 6.2 |
+| `typography.textTransform`    | 5.9 | 6.0 |
+| `spacing.padding`             | 5.9 | 5.9 |
+| `spacing.padding.top`         | 5.8 | 5.9 |
+| `spacing.padding.right`       | 5.8 | 5.9 |
+| `spacing.padding.left`        | 5.8 | 5.9 |
+| `spacing.padding.bottom`      | 5.8 | 5.9 |
+| `spacing.margin`              | 5.9 | 5.9 |
+| `spacing.margin.top`          | 5.8 | 5.9 |
+| `spacing.margin.right`        | 5.8 | 5.9 |
+| `spacing.margin.left`         | 5.8 | 5.9 |
+| `spacing.margin.bottom`       | 5.8 | 5.9 |
+| `spacing.blockGap`            | 5.9 | 5.9 |
+| `dimensions.minHeight`        | 6.2 | N/A |
+| `outline.color`               | 6.2 | N/A |
+| `outline.offset`              | 6.2 | N/A |
+| `outline.style`               | 6.2 | N/A |
+| `outline.width`               | 6.2 | N/A |
+| `filter.duotone`              | 5.9 | N/A |
+| `shadow`                      | 6.1 | 6.2 |
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 cf7624766c9ff3..95f2e047dd0e31 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -1,41 +1,66 @@
-# Version 2 (living reference)
+# Theme.json Version 3 Reference (latest)
 
-> This is the living specification for the **version 2** of theme.json. This version works with WordPress 5.9 or later, and the latest Gutenberg plugin.
+> This is the living specification for  **version 3** of `theme.json`. This version works with WordPress 6.6 or later, and the latest Gutenberg plugin.
 >
-> There're related documents you may be interested in: the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification and the [reference to migrate from theme.json v1 to v2](/docs/reference-guides/theme-json-reference/theme-json-migrations.md).
+> There are some related documents that you may be interested in: 
+> - the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification,
+> - the [theme.json v2](/docs/reference-guides/theme-json-reference/theme-json-v2.md) specification, and
+> - the [reference to migrate from older theme.json versions](/docs/reference-guides/theme-json-reference/theme-json-migrations.md).
 
-This reference guide lists the settings and style properties defined in the theme.json schema. See the [theme.json how to guide](/docs/how-to-guides/themes/theme-json.md) for examples and guide on how to use the theme.json file in your theme.
+This reference guide lists the settings and style properties defined in the `theme.json` schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guidance on how to use the `theme.json` file in your theme.
 
-## Schema
+## JSON Schema
 
-It can be difficult to remember the theme.json settings and properties while you develop, so a JSON scheme was created to help. The schema is available at https://schemas.wp.org/trunk/theme.json
+This documentation was generated from the JSON schema for theme.json.
 
-Code editors can pick up the schema and can provide help like tooltips, autocomplete, or schema validation in the editor. To use the schema in Visual Studio Code, add "$schema": "https://schemas.wp.org/trunk/theme.json" to the beginning of your theme.json file.
+The latest schema for version 3, including all the latest changes from the Gutenberg plugin, is available at <code>https://schemas.wp.org/trunk/theme.json</code>.
+
+Theme.json schemas for each WordPress version are available at <code>https://schemas.wp.org/wp/{{version}}/theme.json</code>.  
+For example, a schema for WordPress 5.8 is available at <code>https://schemas.wp.org/wp/5.8/theme.json</code>.
+
+See [Developing with theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md#developing-with-themejson) for how to use the JSON schema in your editor.
 
 <!-- START TOKEN Autogenerated - DO NOT EDIT -->
-## Settings
+## settings
+
+Settings for the block editor and individual blocks. These include things like:
+- Which customization options should be available to the user. 
+- The default colors, font sizes... available to the user. 
+- CSS custom properties and class names used in styles.
+- And the default layout of the editor (widths and available alignments).
+
+### useRootPaddingAwareAlignments
+
+Enables root padding (the values from `styles.spacing.padding`) to be applied to the contents of full-width blocks instead of the root block.
+
+Please note that when using this setting, `styles.spacing.padding` should always be set as an object with `top`, `right`, `bottom`, `left` values declared separately.
 
+**Note:** Top-level only property. Not available in blocks.
+
+---
 
 ### appearanceTools
 
 Setting that enables the following UI tools:
 
+- background: backgroundImage, backgroundSize
 - border: color, radius, style, width
-- color: link
+- color: link, heading, button, caption
+- dimensions: aspectRatio, minHeight
+- position: sticky
 - spacing: blockGap, margin, padding
 - typography: lineHeight
 
-
 ---
 
-### useRootPaddingAwareAlignments
+### background
 
-_**Note:** Since WordPress 6.1._
-
-Enables root padding (the values from `styles.spacing.padding`) to be applied to the contents of full-width blocks instead of the root block.
-
-Please note that when using this setting, `styles.spacing.padding` should always be set as an object with `top`, `right`, `bottom`, `left` values declared separately.
+Settings related to background.
 
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| backgroundImage | Allow users to set a background image. | `boolean` | `false` |
+| backgroundSize | Allow users to set values related to the size of a background image, including size, position, and repeat controls. | `boolean` | `false` |
 
 ---
 
@@ -43,12 +68,12 @@ Please note that when using this setting, `styles.spacing.padding` should always
 
 Settings related to borders.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| color | boolean | false |  |
-| radius | boolean | false |  |
-| style | boolean | false |  |
-| width | boolean | false |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| color | Allow users to set custom border colors. | `boolean` | `false` |
+| radius | Allow users to set custom border radius. | `boolean` | `false` |
+| style | Allow users to set custom border styles. | `boolean` | `false` |
+| width | Allow users to set custom border widths. | `boolean` | `false` |
 
 ---
 
@@ -56,20 +81,23 @@ Settings related to borders.
 
 Settings related to colors.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| background | boolean | true |  |
-| custom | boolean | true |  |
-| customDuotone | boolean | true |  |
-| customGradient | boolean | true |  |
-| defaultDuotone | boolean | true |  |
-| defaultGradients | boolean | true |  |
-| defaultPalette | boolean | true |  |
-| duotone | array |  | colors, name, slug |
-| gradients | array |  | gradient, name, slug |
-| link | boolean | false |  |
-| palette | array |  | color, name, slug |
-| text | boolean | true |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| background | Allow users to set background colors. | `boolean` | `true` |
+| custom | Allow users to select custom colors. | `boolean` | `true` |
+| customDuotone | Allow users to create custom duotone filters. | `boolean` | `true` |
+| customGradient | Allow users to create custom gradients. | `boolean` | `true` |
+| defaultDuotone | Allow users to choose filters from the default duotone filter presets. | `boolean` | `true` |
+| defaultGradients | Allow users to choose colors from the default gradients. | `boolean` | `true` |
+| defaultPalette | Allow users to choose colors from the default palette. | `boolean` | `true` |
+| duotone | Duotone presets for the duotone picker. | `[ { name, slug, colors } ]` |  |
+| gradients | Gradient presets for the gradient picker. | `[ { name, slug, gradient } ]` |  |
+| link | Allow users to set link colors in a block. | `boolean` | `false` |
+| palette | Color palette presets for the color picker. | `[ { name, slug, color } ]` |  |
+| text | Allow users to set text colors in a block. | `boolean` | `true` |
+| heading | Allow users to set heading colors in a block. | `boolean` | `true` |
+| button | Allow users to set button colors in a block. | `boolean` | `true` |
+| caption | Allow users to set caption colors in a block. | `boolean` | `true` |
 
 ---
 
@@ -77,9 +105,12 @@ Settings related to colors.
 
 Settings related to dimensions.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| minHeight | boolean | false |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| aspectRatio | Allow users to set an aspect ratio. | `boolean` | `false` |
+| defaultAspectRatios | Allow users to choose aspect ratios from the default set of aspect ratios. | `boolean` | `true` |
+| aspectRatios | Allow users to define aspect ratios for some blocks. | `[ { name, slug, ratio } ]` |  |
+| minHeight | Allow users to set custom minimum height. | `boolean` | `false` |
 
 ---
 
@@ -87,10 +118,44 @@ Settings related to dimensions.
 
 Settings related to layout.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| contentSize | string |  |  |
-| wideSize | string |  |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| contentSize | Sets the max-width of the content. | `string` |  |
+| wideSize | Sets the max-width of wide (`.alignwide`) content. Also used as the maximum viewport when calculating fluid font sizes | `string` |  |
+| allowEditing | Disable the layout UI controls. | `boolean` | `true` |
+| allowCustomContentAndWideSize | Enable or disable the custom content and wide size controls. | `boolean` | `true` |
+
+---
+
+### lightbox
+
+Settings related to the lightbox.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| enabled | Defines whether the lightbox is enabled or not. | `boolean` |  |
+| allowEditing | Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor. | `boolean` |  |
+
+---
+
+### position
+
+Settings related to position.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| sticky | Allow users to set sticky position. | `boolean` | `false` |
+
+---
+
+### shadow
+
+Settings related to shadows.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| defaultPresets | Allow users to choose shadows from the default shadow presets. | `boolean` | `true` |
+| presets | Shadow presets for the shadow picker. | `[ { name, slug, shadow } ]` |  |
 
 ---
 
@@ -98,15 +163,16 @@ Settings related to layout.
 
 Settings related to spacing.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| blockGap | undefined | null |  |
-| margin | boolean | false |  |
-| padding | boolean | false |  |
-| units | array | px,em,rem,vh,vw,% |  |
-| customSpacingSize | boolean | true |  |
-| spacingSizes | array |  | name, size, slug |
-| spacingScale | object |  |  |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| blockGap | Enables `--wp--style--block-gap` to be generated from styles.spacing.blockGap. | `boolean`, `null` | `null` |
+| margin | Allow users to set a custom margin. | `boolean` | `false` |
+| padding | Allow users to set a custom padding. | `boolean` | `false` |
+| units | List of units the user can use for spacing values. | `[ string ]` | `["px","em","rem","vh","vw","%"]` |
+| customSpacingSize | Allow users to set custom space sizes. | `boolean` | `true` |
+| defaultSpacingSizes | Allow users to choose space sizes from the default space size presets. | `boolean` | `true` |
+| spacingSizes | Space size presets for the space size selector. | `[ { name, slug, size } ]` |  |
+| spacingScale | Settings to auto-generate space size presets for the space size selector. | `{ operator, increment, steps, mediumStep, unit }` |  |
 
 ---
 
@@ -114,19 +180,23 @@ Settings related to spacing.
 
 Settings related to typography.
 
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| customFontSize | boolean | true |  |
-| fontStyle | boolean | true |  |
-| fontWeight | boolean | true |  |
-| fluid | boolean |  |  |
-| letterSpacing | boolean | true |  |
-| lineHeight | boolean | false |  |
-| textDecoration | boolean | true |  |
-| textTransform | boolean | true |  |
-| dropCap | boolean | true |  |
-| fontSizes | array |  | fluid, name, size, slug |
-| fontFamilies | array |  | fontFace, fontFamily, name, slug |
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| defaultFontSizes | Allow users to choose font sizes from the default font size presets. | `boolean` | `true` |
+| customFontSize | Allow users to set custom font sizes. | `boolean` | `true` |
+| fontStyle | Allow users to set custom font styles. | `boolean` | `true` |
+| fontWeight | Allow users to set custom font weights. | `boolean` | `true` |
+| fluid | Enables fluid typography and allows users to set global fluid typography parameters. | `boolean`, `{ minFontSize, maxViewportWidth, minViewportWidth }` | `false` |
+| letterSpacing | Allow users to set custom letter spacing. | `boolean` | `true` |
+| lineHeight | Allow users to set custom line height. | `boolean` | `false` |
+| textAlign | Allow users to set the text align. | `boolean` | `true` |
+| textColumns | Allow users to set the number of text columns. | `boolean` | `false` |
+| textDecoration | Allow users to set custom text decorations. | `boolean` | `true` |
+| writingMode | Allow users to set the writing mode. | `boolean` | `false` |
+| textTransform | Allow users to set custom text transforms. | `boolean` | `true` |
+| dropCap | Enable drop cap. | `boolean` | `true` |
+| fontSizes | Font size presets for the font size selector. | `[ { name, slug, size, fluid } ]` |  |
+| fontFamilies | Font family presets for the font family selector. | `[ { name, slug, fontFamily, fontFace } ]` |  |
 
 ---
 
@@ -134,25 +204,40 @@ Settings related to typography.
 
 Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.
 
-
 ---
-## Styles
 
+## styles
+
+Organized way to set CSS properties. Styles in the top-level will be added in the `body` selector.
+
+### background
+
+Background styles.
+
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| backgroundImage | Sets the `background-image` CSS property. | `string`, `{ ref }`, `{ url }` |
+| backgroundPosition | Sets the `background-position` CSS property. | `string`, `{ ref }` |
+| backgroundRepeat | Sets the `background-repeat` CSS property. | `string`, `{ ref }` |
+| backgroundSize | Sets the `background-size` CSS property. | `string`, `{ ref }` |
+| backgroundAttachment | Sets the `background-attachment` CSS property. | `string`, `{ ref }` |
+
+---
 
 ### border
 
 Border styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| color | string |  |
-| radius | undefined |  |
-| style | string |  |
-| width | string |  |
-| top | object | color, style, width |
-| right | object | color, style, width |
-| bottom | object | color, style, width |
-| left | object | color, style, width |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| color | Sets the `border-color` CSS property. | `string`, `{ ref }` |
+| radius | Sets the `border-radius` CSS property. | `string`, `{ ref }`, `{ topLeft, topRight, bottomLeft, bottomRight }` |
+| style | Sets the `border-style` CSS property. | `string`, `{ ref }` |
+| width | Sets the `border-width` CSS property. | `string`, `{ ref }` |
+| top |  | `{ color, style, width }` |
+| right |  | `{ color, style, width }` |
+| bottom |  | `{ color, style, width }` |
+| left |  | `{ color, style, width }` |
 
 ---
 
@@ -160,40 +245,28 @@ Border styles.
 
 Color styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| background | string |  |
-| gradient | string |  |
-| text | string |  |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| background | Sets the `background-color` CSS property. | `string`, `{ ref }` |
+| gradient | Sets the `background` CSS property. | `string`, `{ ref }` |
+| text | Sets the `color` CSS property. | `string`, `{ ref }` |
 
 ---
 
-### spacing
+### css
 
-Spacing styles.
-
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| blockGap | string |  |
-| margin | object | bottom, left, right, top |
-| padding | object | bottom, left, right, top |
+Sets custom CSS to apply styling not covered by other theme.json properties.
 
 ---
 
-### typography
+### dimensions
 
-Typography styles.
+Dimensions styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| fontFamily | string |  |
-| fontSize | string |  |
-| fontStyle | string |  |
-| fontWeight | string |  |
-| letterSpacing | string |  |
-| lineHeight | string |  |
-| textDecoration | string |  |
-| textTransform | string |  |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| aspectRatio | Sets the `aspect-ratio` CSS property. | `string`, `{ ref }` |
+| minHeight | Sets the `min-height` CSS property. | `string`, `{ ref }` |
 
 ---
 
@@ -201,9 +274,22 @@ Typography styles.
 
 CSS and SVG filter styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| duotone | string |  |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| duotone | Sets the duotone filter. | `string`, `{ ref }` |
+
+---
+
+### outline
+
+Outline styles.
+
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| color | Sets the `outline-color` CSS property. | `string`, `{ ref }` |
+| offset | Sets the `outline-offset` CSS property. | `string`, `{ ref }` |
+| style | Sets the `outline-style` CSS property. | `string`, `{ ref }` |
+| width | Sets the `outline-width` CSS property. | `string`, `{ ref }` |
 
 ---
 
@@ -211,20 +297,64 @@ CSS and SVG filter styles.
 
 Box shadow styles.
 
+---
+
+### spacing
+
+Spacing styles.
+
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| blockGap | Sets the `--wp--style--block-gap` CSS custom property when settings.spacing.blockGap is true. | `string`, `{ ref }` |
+| margin | Margin styles. | `{ top, right, bottom, left }` |
+| padding | Padding styles. | `{ top, right, bottom, left }` |
 
 ---
 
-### outline
+### typography
 
-Outline styles.
+Typography styles.
 
-| Property  | Type   |  Props  |
-| ---       | ---    |---   |
-| color | string |  |
-| offset | string |  |
-| style | string |  |
-| width | string |  |
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| fontFamily | Sets the `font-family` CSS property. | `string`, `{ ref }` |
+| fontSize | Sets the `font-size` CSS property. | `string`, `{ ref }` |
+| fontStyle | Sets the `font-style` CSS property. | `string`, `{ ref }` |
+| fontWeight | Sets the `font-weight` CSS property. | `string`, `{ ref }` |
+| letterSpacing | Sets the `letter-spacing` CSS property. | `string`, `{ ref }` |
+| lineHeight | Sets the `line-height` CSS property. | `string`, `{ ref }` |
+| textAlign | Sets the `text-align` CSS property. | `string`, `{ ref }` |
+| textColumns | Sets the `column-count` CSS property. | `string`, `{ ref }` |
+| textDecoration | Sets the `text-decoration` CSS property. | `string`, `{ ref }` |
+| writingMode | Sets the `writing-mode` CSS property. | `string`, `{ ref }` |
+| textTransform | Sets the `text-transform` CSS property. | `string`, `{ ref }` |
 
 ---
 
+## customTemplates
+
+Additional metadata for custom templates defined in the templates folder.
+
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| name | Filename, without extension, of the template in the templates folder. | `string` |
+| title | Title of the template, translatable. | `string` |
+| postTypes | List of post types that can use this custom template. | `[ string ]` |
+
+## templateParts
+
+Additional metadata for template parts defined in the parts folder.
+
+| Property | Description | Type |
+| -------- | ----------- | ---- |
+| name | Filename, without extension, of the template in the parts folder. | `string` |
+| title | Title of the template, translatable. | `string` |
+| area | The area the template part is used for. Block variations for `header` and `footer` values exist and will be used when the area is set to one of those. | `string` |
+
+## patterns
+
+An array of pattern slugs to be registered from the Pattern Directory.
+
+Type: `[ string ]`.
+
 <!-- END TOKEN Autogenerated - DO NOT EDIT -->
diff --git a/docs/reference-guides/theme-json-reference/theme-json-migrations.md b/docs/reference-guides/theme-json-reference/theme-json-migrations.md
index cac253f64ffbe9..8e9d56ed054e68 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-migrations.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-migrations.md
@@ -1,4 +1,4 @@
-# Migrating to Newer Versions
+# Migrating Theme.json to Newer Versions
 
 This guide documents the changes between different `theme.json` versions and how to upgrade. Using older versions will continue to be supported. Upgrading is recommended because new development will continue in the newer versions.
 
@@ -6,7 +6,7 @@ This guide documents the changes between different `theme.json` versions and how
 
 Upgrading to v2 enables some new features and adjusts the naming of some old features to be more consistent with one another.
 
-How to migrate from v1 to v2:
+### How to migrate from v1 to v2:
 
 1. Update `version` to `2`.
 2. Rename the properties that were updated (see below) if you're using them.
@@ -41,6 +41,7 @@ Additions to settings:
 - `settings.typography.fontStyle`
 - `settings.typography.fontWeight`
 - `settings.typography.letterSpacing`
+- `settings.typography.textColumns`
 - `settings.typography.textDecoration`
 - `settings.typography.textTransform`
 
@@ -55,9 +56,59 @@ Additions to styles:
 - `styles.typography.fontStyle`
 - `styles.typography.fontWeight`
 - `styles.typography.letterSpacing`
+- `styles.typography.textColumns`
 - `styles.typography.textDecoration`
 - `styles.typography.textTransform`
 
 ### Changes to property values
 
 The default font sizes provided by core (`settings.typography.fontSizes`) have been updated. The Normal and Huge sizes (with `normal` and `huge` slugs) have been removed from the list, and Extra Large (`x-large` slug) has been added. When the UI controls show the default values provided by core, Normal and Huge will no longer be present. However, their CSS classes and CSS Custom Properties are still enqueued to make sure existing content that uses them still works as expected.
+
+## Migrating from v2 to v3
+
+Upgrading to v3 adjusts preset defaults to be more consistent with one another.
+
+### How to migrate from v2 to v3:
+
+1. Update `version` to `3`.
+2. Configure the changed defaults (see below).
+
+### Changed defaults
+
+#### `settings.typography.defaultFontSizes`
+
+In theme.json v2, the default font sizes were only shown when theme sizes were not defined. A theme providing font sizes with the same slugs as the defaults would always override them.
+
+The default `fontSizes` slugs are: `small`, `medium`, `large`, `x-large`, and `xx-large`.
+
+The new `defaultFontSizes` option gives control over showing default font sizes and preventing those defaults from being overridden.
+
+- When set to `true` it will show the default font sizes and prevent them from being overridden by the theme.
+- When set to `false` it will hide the default font sizes and allow the theme to use the default slugs.
+
+It is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2.
+
+To keep behavior similar to v2 with a v3 theme.json:
+* If you do not have any `fontSizes` defined, `defaultFontSizes` can be left out or set to `true`.
+* If you have some `fontSizes` defined, set `defaultFontSizes` to `false`.
+
+#### `settings.spacing.defaultSpacingSizes`
+
+In theme.json v2, there are two settings that could be used to set theme level spacing sizes: `settings.spacing.spacingSizes` and `settings.spacing.spacingScale`. Setting both `spacingSizes` _and_ `spacingScale` would only use the values from `spacingSizes`. And setting either of them would always replace the entire set of default spacing sizes provided by WordPress.
+
+The default `spacingSizes` slugs provided by WordPress are: `20`, `30`, `40`, `50`, `60`, `70`, and `80`.
+
+The new `defaultSpacingSizes` option gives control over showing default spacing sizes and preventing those defaults from being overridden.
+
+- When set to `true` it will show the default spacing sizes and prevent them from being overridden by the theme.
+- When set to `false` it will hide the default spacing sizes and allow the theme to use the default slugs.
+
+`defaultSpacingSizes` is `true` by default when switching to v3. This is to be consistent with how other `default*` options work such as `settings.color.defaultPalette`, but differs from the behavior in v2.
+
+Additionally, in v3 both `spacingSizes` and `spacingScale` can be set at the same time. Presets defined in `spacingSizes` with slugs matching the generated presets from `spacingSizes` will override the generated ones.
+
+To keep behavior similar to v2 with a v3 theme.json:
+* If you do not have any `spacingSizes` presets or `spacingScale` config defined, `defaultSpacingSizes` can be left out or set to `true`.
+* If you disabled default spacing sizes by setting `spacingScale` to `{ "steps": 0 }`, remove the `spacingScale` config and set `defaultSpacingSizes` to `false`.
+* If you defined only one of either `spacingScale` or `spacingSizes` for your presets, set `defaultSpacingSizes` to `false`.
+* If you defined both `spacingScale` and `spacingSizes`, remove the `spacingSizes` config _and_ set `defaultSpacingSizes` to `false`.
diff --git a/docs/reference-guides/theme-json-reference/theme-json-v1.md b/docs/reference-guides/theme-json-reference/theme-json-v1.md
index d0ed8a70a31102..d7c98961b053ad 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-v1.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-v1.md
@@ -1,6 +1,24 @@
-# Version 1 Reference
+# Theme.json Version 1 Reference
 
-Theme.json version 2 has been released, see the [theme.json migration guide](/docs/reference-guides/theme-json-reference/theme-json-migrations.md#migrating-from-v1-to-v2) for updating to the latest version.
+> This is the specification for  **version 1** of `theme.json`. This version works with WordPress 5.8 or later.
+
+<div class="callout callout-alert">
+
+Theme.json version 2 has been released with WordPress 5.9. WordPress will continue to support theme.json version 1. However new features will only be added to [new versions](/docs/reference-guides/theme-json-reference/theme-json-living.md).
+
+When you are ready to upgrade, see the [theme.json migration guide](/docs/reference-guides/theme-json-reference/theme-json-migrations.md#migrating-from-v1-to-v2) for details on updating to the latest version.
+
+</div>
+
+This reference guide lists the settings and style properties defined in the `theme.json` schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guidance on how to use the `theme.json` file in your theme.
+
+## JSON Schema
+
+The last schema for version 1 is available at `https://schemas.wp.org/wp/5.8/theme.json`.
+
+Theme.json schemas for each WordPress version are available at `https://schemas.wp.org/wp/{{version}}/theme.json`. For example a schema for WordPress 5.8 is available at `https://schemas.wp.org/wp/5.8/theme.json`.
+
+See [Developing with theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md#developing-with-themejson) for how to use the JSON schema in your editor.
 
 ## Settings
 
diff --git a/docs/reference-guides/theme-json-reference/theme-json-v2.md b/docs/reference-guides/theme-json-reference/theme-json-v2.md
new file mode 100644
index 00000000000000..6c6e3b28948332
--- /dev/null
+++ b/docs/reference-guides/theme-json-reference/theme-json-v2.md
@@ -0,0 +1,330 @@
+# Theme.json Version 2 Reference
+
+> This is the specification for  **version 2** of `theme.json`. This version works with WordPress 5.9 or later.
+
+<div class="callout callout-alert">
+
+Theme.json version 3 has been released with WordPress 6.6. WordPress will continue to support theme.json version 2. However new features will only be added to [new versions](/docs/reference-guides/theme-json-reference/theme-json-living.md).
+
+When you are ready to upgrade, see the [theme.json migration guide](/docs/reference-guides/theme-json-reference/theme-json-migrations.md#migrating-from-v2-to-v3) for details on updating to the latest version.
+
+</div>
+
+This reference guide lists the settings and style properties defined in the `theme.json` schema. See the [theme.json how to guide](/docs/how-to-guides/themes/global-settings-and-styles.md) for examples and guidance on how to use the `theme.json` file in your theme.
+
+## JSON Schema
+
+This documentation was generated from the JSON schema for theme.json.
+
+The last schema for version 2 is available at `https://schemas.wp.org/wp/6.5/theme.json`.
+
+Theme.json schemas for each WordPress version are available at `https://schemas.wp.org/wp/{{version}}/theme.json`. For example a schema for WordPress 5.9 is available at `https://schemas.wp.org/wp/5.9/theme.json`.
+
+See [Developing with theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md#developing-with-themejson) for how to use the JSON schema in your editor.
+
+## Settings
+
+### appearanceTools
+
+Setting that enables the following UI tools:
+
+- background: backgroundImage, backgroundSize
+- border: color, radius, style, width
+- color: link
+- dimensions: aspectRatio, minHeight
+- position: sticky
+- spacing: blockGap, margin, padding
+- typography: lineHeight
+
+---
+
+### useRootPaddingAwareAlignments
+
+Enables root padding (the values from `styles.spacing.padding`) to be applied to the contents of full-width blocks instead of the root block.
+
+Please note that when using this setting, `styles.spacing.padding` should always be set as an object with `top`, `right`, `bottom`, `left` values declared separately.
+
+---
+
+### border
+
+Settings related to borders.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| color | boolean | false |  |
+| radius | boolean | false |  |
+| style | boolean | false |  |
+| width | boolean | false |  |
+
+---
+
+### shadow
+
+Settings related to shadows.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| defaultPresets | boolean | true |  |
+| presets | array |  | name, shadow, slug |
+
+---
+
+### color
+
+Settings related to colors.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| background | boolean | true |  |
+| custom | boolean | true |  |
+| customDuotone | boolean | true |  |
+| customGradient | boolean | true |  |
+| defaultDuotone | boolean | true |  |
+| defaultGradients | boolean | true |  |
+| defaultPalette | boolean | true |  |
+| duotone | array |  | colors, name, slug |
+| gradients | array |  | gradient, name, slug |
+| link | boolean | false |  |
+| palette | array |  | color, name, slug |
+| text | boolean | true |  |
+| heading | boolean | true |  |
+| button | boolean | true |  |
+
+---
+
+### background
+
+Settings related to background.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| backgroundImage | boolean | false |  |
+
+---
+
+### dimensions
+
+Settings related to dimensions.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| aspectRatio | boolean | false |  |
+| minHeight | boolean | false |  |
+
+---
+
+### layout
+
+Settings related to layout.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| contentSize | string |  |  |
+| wideSize | string |  |  |
+| allowEditing | boolean | true |  |
+| allowCustomContentAndWideSize | boolean | true |  |
+
+---
+
+### lightbox
+
+Settings related to the lightbox.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| enabled | boolean |  |  |
+| allowEditing | boolean |  |  |
+
+---
+
+### position
+
+Settings related to position.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| sticky | boolean | false |  |
+
+---
+
+### spacing
+
+Settings related to spacing.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| blockGap | boolean, null | null |   |
+| margin | boolean | false |  |
+| padding | boolean | false |  |
+| units | array | px,em,rem,vh,vw,% |  |
+| customSpacingSize | boolean | true |  |
+| spacingSizes | array |  | name, size, slug |
+| spacingScale | object |  |  |
+
+---
+
+### typography
+
+Settings related to typography.
+
+| Property  | Type   | Default | Props  |
+| ---    | ---    | ---    |---   |
+| customFontSize | boolean | true |  |
+| fontStyle | boolean | true |  |
+| fontWeight | boolean | true |  |
+| fluid | object, boolean | false | _{maxViewportWidth, minFontSize, minViewportWidth}_  |
+| letterSpacing | boolean | true |  |
+| lineHeight | boolean | false |  |
+| textColumns | boolean | false |  |
+| textDecoration | boolean | true |  |
+| writingMode | boolean | false |  |
+| textTransform | boolean | true |  |
+| dropCap | boolean | true |  |
+| fontSizes | array |  | fluid, name, size, slug |
+| fontFamilies | array |  | fontFace, fontFamily, name, slug |
+
+---
+
+### custom
+
+Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.
+
+---
+
+## Styles
+
+### border
+
+Border styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| color | string, object |  |
+| radius | string, object |  |
+| style | string, object |  |
+| width | string, object |  |
+| top | object | color, style, width |
+| right | object | color, style, width |
+| bottom | object | color, style, width |
+| left | object | color, style, width |
+
+---
+
+### color
+
+Color styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| background | string, object |  |
+| gradient | string, object |  |
+| text | string, object |  |
+
+---
+
+### dimensions
+
+Dimensions styles
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| aspectRatio | string, object |  |
+| minHeight | string, object |  |
+
+---
+
+### spacing
+
+Spacing styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| blockGap | string, object |  |
+| margin | object | bottom, left, right, top |
+| padding | object | bottom, left, right, top |
+
+---
+
+### typography
+
+Typography styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| fontFamily | string, object |  |
+| fontSize | string, object |  |
+| fontStyle | string, object |  |
+| fontWeight | string, object |  |
+| letterSpacing | string, object |  |
+| lineHeight | string, object |  |
+| textColumns | string |  |
+| textDecoration | string, object |  |
+| writingMode | string, object |  |
+| textTransform | string, object |  |
+
+---
+
+### filter
+
+CSS and SVG filter styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| duotone | string, object |  |
+
+---
+
+### shadow
+
+Box shadow styles.
+
+---
+
+### outline
+
+Outline styles.
+
+| Property  | Type   |  Props  |
+| ---       | ---    |---   |
+| color | string, object |  |
+| offset | string, object |  |
+| style | string, object |  |
+| width | string, object |  |
+
+---
+
+### css
+
+Sets custom CSS to apply styling not covered by other theme.json properties.
+
+---
+
+## customTemplates
+
+Additional metadata for custom templates defined in the templates folder.
+
+Type: `object`.
+
+| Property | Description | Type |
+| ---      | ---         | ---  |
+| name | Filename, without extension, of the template in the templates folder. | string |
+| title | Title of the template, translatable. | string |
+| postTypes | List of post types that can use this custom template. | array |
+
+## templateParts
+
+Additional metadata for template parts defined in the parts folder.
+
+Type: `object`.
+
+| Property | Description | Type |
+| ---      | ---         | ---  |
+| name | Filename, without extension, of the template in the parts folder. | string |
+| title | Title of the template, translatable. | string |
+| area | The area the template part is used for. Block variations for `header` and `footer` values exist and will be used when the area is set to one of those. | string |
+
+## Patterns
+
+An array of pattern slugs to be registered from the Pattern Directory.
+Type: `array`.
diff --git a/docs/toc.json b/docs/toc.json
index 532e6ef2d20e1d..69fe86a08256b6 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -7,37 +7,51 @@
 			{
 				"docs/getting-started/devenv/README.md": [
 					{
-						"docs/getting-started/devenv/docker-ubuntu.md": []
+						"docs/getting-started/devenv/nodejs-development-environment.md": []
+					},
+					{
+						"docs/getting-started/devenv/get-started-with-wp-env.md": []
+					},
+					{
+						"docs/getting-started/devenv/get-started-with-create-block.md": []
+					},
+					{
+						"docs/getting-started/devenv/get-started-with-wp-scripts.md": []
 					}
 				]
 			},
+			{ "docs/getting-started/quick-start-guide.md": [] },
+			{ "docs/getting-started/tutorial.md": [] },
 			{
-				"docs/getting-started/create-block/README.md": [
+				"docs/getting-started/fundamentals/README.md": [
+					{
+						"docs/getting-started/fundamentals/file-structure-of-a-block.md": []
+					},
 					{
-						"docs/getting-started/create-block/wp-plugin.md": []
+						"docs/getting-started/fundamentals/block-json.md": []
 					},
 					{
-						"docs/getting-started/create-block/block-anatomy.md": []
+						"docs/getting-started/fundamentals/registration-of-a-block.md": []
 					},
 					{
-						"docs/getting-started/create-block/attributes.md": []
+						"docs/getting-started/fundamentals/block-wrapper.md": []
 					},
 					{
-						"docs/getting-started/create-block/block-code.md": []
+						"docs/getting-started/fundamentals/block-in-the-editor.md": []
 					},
 					{
-						"docs/getting-started/create-block/author-experience.md": []
+						"docs/getting-started/fundamentals/markup-representation-block.md": []
 					},
 					{
-						"docs/getting-started/create-block/finishing.md": []
+						"docs/getting-started/fundamentals/static-dynamic-rendering.md": []
 					},
 					{
-						"docs/getting-started/create-block/submitting-to-block-directory.md": []
+						"docs/getting-started/fundamentals/javascript-in-the-block-editor.md": []
 					}
 				]
 			},
-			{ "docs/getting-started/full-site-editing.md": [] },
-			{ "docs/getting-started/outreach.md": [] }
+			{ "docs/getting-started/glossary.md": [] },
+			{ "docs/getting-started/faq.md": [] }
 		]
 	},
 	{
@@ -45,30 +59,12 @@
 			{ "docs/how-to-guides/accessibility.md": [] },
 			{
 				"docs/how-to-guides/block-tutorial/README.md": [
-					{
-						"docs/how-to-guides/block-tutorial/writing-your-first-block-type.md": []
-					},
 					{
 						"docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md": []
 					},
-					{
-						"docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md": []
-					},
-					{
-						"docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md": []
-					},
-					{
-						"docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md": []
-					},
 					{
 						"docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md": []
 					},
-					{
-						"docs/how-to-guides/block-tutorial/block-supports-in-dynamic-blocks.md": []
-					},
-					{
-						"docs/how-to-guides/block-tutorial/generate-blocks-with-wp-cli.md": []
-					},
 					{
 						"docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md": []
 					},
@@ -80,11 +76,7 @@
 			{
 				"docs/how-to-guides/platform/README.md": [
 					{
-						"docs/how-to-guides/platform/custom-block-editor/README.md": [
-							{
-								"docs/how-to-guides/platform/custom-block-editor/tutorial.md": []
-							}
-						]
+						"docs/how-to-guides/platform/custom-block-editor.md": []
 					}
 				]
 			},
@@ -107,29 +99,28 @@
 					}
 				]
 			},
-			{ "docs/how-to-guides/curating-the-editor-experience.md": [] },
-			{ "docs/how-to-guides/feature-flags.md": [] },
-			{ "docs/how-to-guides/format-api.md": [] },
 			{
-				"docs/how-to-guides/javascript/README.md": [
+				"docs/how-to-guides/curating-the-editor-experience/README.md": [
 					{
-						"docs/how-to-guides/javascript/plugins-background.md": []
+						"docs/how-to-guides/curating-the-editor-experience/block-locking.md": []
 					},
 					{
-						"docs/how-to-guides/javascript/loading-javascript.md": []
+						"docs/how-to-guides/curating-the-editor-experience/patterns.md": []
 					},
 					{
-						"docs/how-to-guides/javascript/extending-the-block-editor.md": []
+						"docs/how-to-guides/curating-the-editor-experience/theme-json.md": []
 					},
-					{ "docs/how-to-guides/javascript/troubleshooting.md": [] },
 					{
-						"docs/how-to-guides/javascript/versions-and-building.md": []
+						"docs/how-to-guides/curating-the-editor-experience/filters-and-hooks.md": []
 					},
-					{ "docs/how-to-guides/javascript/scope-your-code.md": [] },
-					{ "docs/how-to-guides/javascript/js-build-setup.md": [] },
-					{ "docs/how-to-guides/javascript/esnext-js.md": [] }
+					{
+						"docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md": []
+					}
 				]
 			},
+			{ "docs/how-to-guides/enqueueing-assets-in-the-editor.md": [] },
+			{ "docs/how-to-guides/feature-flags.md": [] },
+			{ "docs/how-to-guides/format-api.md": [] },
 			{ "docs/how-to-guides/internationalization.md": [] },
 			{
 				"docs/how-to-guides/metabox.md": []
@@ -139,8 +130,9 @@
 			{ "docs/how-to-guides/propagating-updates.md": [] },
 			{
 				"docs/how-to-guides/themes/README.md": [
-					{ "docs/how-to-guides/themes/block-theme-overview.md": [] },
-					{ "docs/how-to-guides/themes/theme-json.md": [] },
+					{
+						"docs/how-to-guides/themes/global-settings-and-styles.md": []
+					},
 					{ "docs/how-to-guides/themes/theme-support.md": [] }
 				]
 			},
@@ -167,6 +159,9 @@
 					{
 						"docs/reference-guides/block-api/block-attributes.md": []
 					},
+					{
+						"docs/reference-guides/block-api/block-bindings.md": []
+					},
 					{ "docs/reference-guides/block-api/block-context.md": [] },
 					{
 						"docs/reference-guides/block-api/block-deprecation.md": []
@@ -179,6 +174,9 @@
 					{
 						"docs/reference-guides/block-api/block-registration.md": []
 					},
+					{
+						"docs/reference-guides/block-api/block-selectors.md": []
+					},
 					{ "docs/reference-guides/block-api/block-styles.md": [] },
 					{ "docs/reference-guides/block-api/block-supports.md": [] },
 					{
@@ -207,6 +205,38 @@
 					}
 				]
 			},
+			{
+				"docs/reference-guides/interactivity-api/README.md": [
+					{
+						"docs/reference-guides/interactivity-api/core-concepts/README.md": [
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/the-reactive-and-declarative-mindset.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/using-typescript.md": []
+							}
+						]
+					},
+					{
+						"docs/reference-guides/interactivity-api/iapi-quick-start-guide.md": []
+					},
+					{
+						"docs/reference-guides/interactivity-api/api-reference.md": []
+					},
+					{
+						"docs/reference-guides/interactivity-api/iapi-about.md": []
+					},
+					{
+						"docs/reference-guides/interactivity-api/iapi-faq.md": []
+					}
+				]
+			},
 			{
 				"docs/reference-guides/slotfills/README.md": [
 					{
@@ -245,8 +275,14 @@
 					{
 						"docs/reference-guides/theme-json-reference/theme-json-v1.md": []
 					},
+					{
+						"docs/reference-guides/theme-json-reference/theme-json-v2.md": []
+					},
 					{
 						"docs/reference-guides/theme-json-reference/theme-json-migrations.md": []
+					},
+					{
+						"docs/reference-guides/theme-json-reference/styles-versions.md": []
 					}
 				]
 			},
@@ -265,6 +301,9 @@
 						"docs/reference-guides/data/data-core-block-editor.md": []
 					},
 					{ "docs/reference-guides/data/data-core-blocks.md": [] },
+					{
+						"docs/reference-guides/data/data-core-commands.md": []
+					},
 					{
 						"docs/reference-guides/data/data-core-customize-widgets.md": []
 					},
@@ -297,6 +336,7 @@
 				"docs/explanations/architecture/README.md": [
 					{ "docs/explanations/architecture/key-concepts.md": [] },
 					{ "docs/explanations/architecture/data-flow.md": [] },
+					{ "docs/explanations/architecture/entities.md": [] },
 					{ "docs/explanations/architecture/modularity.md": [] },
 					{ "docs/explanations/architecture/performance.md": [] },
 					{
@@ -317,8 +357,6 @@
 					}
 				]
 			},
-			{ "docs/explanations/faq.md": [] },
-			{ "docs/explanations/glossary.md": [] },
 			{ "docs/explanations/history.md": [] }
 		]
 	},
@@ -331,8 +369,20 @@
 					},
 					{ "docs/contributors/code/git-workflow.md": [] },
 					{ "docs/contributors/code/coding-guidelines.md": [] },
-					{ "docs/contributors/code/testing-overview.md": [] },
-					{ "docs/contributors/code/grammar.md": [] },
+					{
+						"docs/contributors/code/testing-overview.md": [
+							{
+								"docs/contributors/code/e2e/README.md": [
+									{
+										"docs/contributors/code/e2e/migration.md": []
+									},
+									{
+										"docs/contributors/code/e2e/overusing-snapshots.md": []
+									}
+								]
+							}
+						]
+					},
 					{ "docs/contributors/code/scripts.md": [] },
 					{ "docs/contributors/code/managing-packages.md": [] },
 					{
@@ -367,8 +417,7 @@
 			},
 			{
 				"docs/contributors/design/README.md": [
-					{ "docs/contributors/design/the-block.md": [] },
-					{ "docs/contributors/design/reference.md": [] }
+					{ "docs/contributors/design/the-block.md": [] }
 				]
 			},
 			{
@@ -381,8 +430,7 @@
 			{ "docs/contributors/accessibility-testing.md": [] },
 			{ "docs/contributors/repository-management.md": [] },
 			{ "docs/contributors/folder-structure.md": [] },
-			{ "docs/contributors/versions-in-wordpress.md": [] },
-			{ "docs/contributors/roadmap.md": [] }
+			{ "docs/contributors/versions-in-wordpress.md": [] }
 		]
 	}
 ]
diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
index 344eaf35521700..2004fae84f7ccc 100644
--- a/docs/tool/manifest.js
+++ b/docs/tool/manifest.js
@@ -1,3 +1,5 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+
 /**
  * External dependencies
  */
@@ -8,11 +10,14 @@ const { join } = require( 'path' );
 
 const baseRepoUrl = '..';
 const componentPaths = glob( 'packages/components/src/*/**/README.md', {
-	// Don't expose documentation for mobile only and G2 components just yet.
+	// Don't expose documentation for mobile only and private components just yet.
 	ignore: [
 		'**/src/mobile/**/README.md',
-		'**/src/ui/**/README.md',
+		'packages/components/src/theme/README.md',
 		'packages/components/src/view/README.md',
+		'packages/components/src/menu/README.md',
+		'packages/components/src/tabs/README.md',
+		'packages/components/src/custom-select-control-v2/README.md',
 	],
 } );
 const packagePaths = glob( 'packages/*/package.json' )
@@ -120,6 +125,29 @@ function generateRootManifestFromTOCItems( items, parent = null ) {
 			pageItems = pageItems.concat( getPackageManifest( packagePaths ) );
 		}
 	} );
+
+	const slugs = pageItems.map( ( { slug } ) => slug );
+	const duplicatedSlugs = slugs.filter(
+		( item, idx ) => idx !== slugs.indexOf( item )
+	);
+
+	const FgRed = '\x1b[31m';
+	const Reset = '\x1b[0m';
+
+	if ( duplicatedSlugs.length > 0 ) {
+		console.error(
+			`${ FgRed } The handbook generation setup creates pages based on their slug, so each slug has to be unique. ${ Reset }`
+		);
+		console.error(
+			`${ FgRed } More info at https://github.com/WordPress/gutenberg/issues/61206#issuecomment-2085361154 ${ Reset }\n`
+		);
+		throw new Error(
+			`${ FgRed } Duplicate slugs found in the TOC: ${ duplicatedSlugs.join(
+				', '
+			) } ${ Reset }`
+		);
+	}
+
 	return pageItems;
 }
 
diff --git a/gutenberg.php b/gutenberg.php
index 9c93c6c823f621..bcc941f2cb83f9 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -2,10 +2,10 @@
 /**
  * Plugin Name: Gutenberg
  * Plugin URI: https://github.com/WordPress/gutenberg
- * Description: Printing since 1440. This is the development plugin for the new block editor in core.
- * Requires at least: 5.9
- * Requires PHP: 5.6
- * Version: 14.6.0-rc.1
+ * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
+ * Requires at least: 6.6
+ * Requires PHP: 7.2
+ * Version: 19.8.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
@@ -15,6 +15,8 @@
 ### BEGIN AUTO-GENERATED DEFINES
 defined( 'GUTENBERG_DEVELOPMENT_MODE' ) or define( 'GUTENBERG_DEVELOPMENT_MODE', true );
 ### END AUTO-GENERATED DEFINES
+defined( 'GUTENBERG_MINIMUM_WP_VERSION' ) or define( 'GUTENBERG_MINIMUM_WP_VERSION', '6.6' );
+
 
 gutenberg_pre_init();
 
@@ -26,7 +28,7 @@
 function gutenberg_wordpress_version_notice() {
 	echo '<div class="error"><p>';
 	/* translators: %s: Minimum required version */
-	printf( __( 'Gutenberg requires WordPress %s or later to function properly. Please upgrade WordPress before activating Gutenberg.', 'gutenberg' ), '5.9' );
+	printf( __( 'Gutenberg requires WordPress %s or later to function properly. Please upgrade WordPress before activating Gutenberg.', 'gutenberg' ), GUTENBERG_MINIMUM_WP_VERSION );
 	echo '</p></div>';
 
 	deactivate_plugins( array( 'gutenberg/gutenberg.php' ) );
@@ -47,6 +49,9 @@ function gutenberg_build_files_notice() {
  * Verify that we can initialize the Gutenberg editor , then load it.
  *
  * @since 1.5.0
+ *
+ * @global string $wp_version             The WordPress version string.
+ *
  */
 function gutenberg_pre_init() {
 	global $wp_version;
@@ -64,7 +69,7 @@ function gutenberg_pre_init() {
 	// Compare against major release versions (X.Y) rather than minor (X.Y.Z)
 	// unless a minor release is the actual minimum requirement. WordPress reports
 	// X.Y for its major releases.
-	if ( version_compare( $version, '5.9', '<' ) ) {
+	if ( version_compare( $version, GUTENBERG_MINIMUM_WP_VERSION, '<' ) ) {
 		add_action( 'admin_notices', 'gutenberg_wordpress_version_notice' );
 		return;
 	}
diff --git a/lerna.json b/lerna.json
index d71a10ac52c86d..3af790b3375977 100644
--- a/lerna.json
+++ b/lerna.json
@@ -11,5 +11,6 @@
 		"**/{storybook,stories}/**"
 	],
 	"packages": [ "packages/*" ],
-	"version": "independent"
+	"version": "independent",
+	"$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/lib/README.md b/lib/README.md
index bbce167c72d94c..9ee05efccffe98 100644
--- a/lib/README.md
+++ b/lib/README.md
@@ -1,145 +1,203 @@
 # Gutenberg PHP
 
+This documentation is intended for developers who are contributing to the PHP code in the Gutenberg plugin, and pertains to files in the `lib` directory.
+
+The Gutenberg plugin is continuously enhancing existing features and creating new ones. Some features, once considered stable and useful, are merged into Core (the WordPress source code) during a WordPress release. Others remain in the plugin forever or are eventually removed as the minimum supported WordPress version changes.
+
+During a WordPress release, new features, bugfixes and other changes are "synced" between the Gutenberg plugin and WordPress Core. Consistent naming and directory structures make this process easier by preventing naming conflicts and compartmentalizing release-specific code.
+
+The following documentation is intended to act as a guide only. If you're unsure about naming or where to place new PHP files, please don't hesitate to ping other contributors on GitHub or ask in the #core-editor channel on [WordPress Slack](https://make.wordpress.org/chat/).
+
 ## File structure
 
-Gutenberg adds features to WordPress Core using PHP hooks and filters. Some
-features, once considered stable and useful, are merged into Core during a Core
-release. Some features remain in the plugin forever or are removed.
+To make it easier for contributors to identify features that should be merged into Core and those that can be deleted, Gutenberg uses the following file structure for its PHP code:
 
-To make it easier for contributors to know which features need to be merged to
-Core and which features can be deleted, Gutenberg uses the following file
-structure for its PHP code:
+- `lib/experimental` - Experimental features that exist only in the plugin. They should not be merged into Core.
+- `lib/compat/wordpress-X.Y` - Stable features that are intended to be merged into Core in a future `X.Y` release, or that were previously merged to Core in the `X.Y` release and remain in the plugin for backwards compatibility when running the plugin on older versions of WordPress.
+- `lib/compat/plugin` - Features for backwards compatibility for the plugin consumers. These files don't need to be merged into Core and should have a timeline for when they should be removed from the plugin.
 
-- `lib/experimental` - Experimental features that exist only in the plugin. They
-  are not ready to be merged to Core.
-- `lib/stable` - Stable features that exist only in the plugin. They could one
-  day be merged to Core, but not yet.
-- `lib/compat/wordpress-X.Y` - Stable features that are intended to be merged to
-  Core in the future X.Y release, or that were previously merged to Core in the
-  X.Y release and remain in the plugin for backwards compatibility when running
-  the plugin on older versions of WordPress.
-- `lib/compat/plugin` - Features for backwards compatibility for the plugin consumers. These files don't need to be merged to Core and should have a timeline for when they should be removed from the plugin.
+Files at the root of `/lib` are generally considered to contain "evergreen" code. Such code is both fundamental to the proper functioning of the plugin, and also so often updated that versioning it between WordPress releases is not practical. Changes to these files are merged into Core as required.
 
 ## Best practices
 
-### Prefer the `wp` prefix
+There are a few best practices that should be observed when adding new files to the Gutenberg plugin.
 
-For features that may be merged to Core, it's best to use a `wp_` prefix for functions or a `WP_` prefix for classes.
+### Using `gutenberg` suffixes/prefixes vs. `wp` prefixes
 
-This applies to both experimental and stable features.
+To avoid naming conflicts with WordPress Core and other plugins, the Gutenberg plugin uses the `gutenberg` identifier in many of its PHP classes and function names, e.g., `WP_Theme_JSON_Gutenberg` and `gutenberg_get_block_editor_settings`.
 
-Using the `wp_` prefix avoids us having to rename functions and classes from `gutenberg_` to `wp_` if the feature is merged to Core.
+This is especially so for classes and functions whose functionality is ubiquitous and constantly being updated — so-called "evergreen" code. Anything related to `WP_Theme_JSON_Gutenberg` is a good example of this: this class controls the way Gutenberg processes and outputs global styles and much more, and its methods are called in many places. In every aspect of plugin functionality, we want plugin users to have access to the latest versions of these files, even if they are running an older version of WordPress.
 
-Functions that are intended solely for the plugin, e.g., plugin infrastructure, should use the `gutenberg_` prefix.
+```php
+/**
+* Returns something useful.
+*
+* @since 6.2.0 Updates to something even more useful.
+* @since 6.3.0 Now more useful than ever.
+*
+* @return string Something useful.
+*/
+function gutenberg_get_something_useful() {
+	// ...
+}
+```
 
-#### Feature that might be merged to Core
+When porting new functions into Core, the function must be renamed to use the `wp_` prefix for functions or a `WP_` prefix for classes.
 
 ```php
-function wp_get_navigation( $slug ) { ... }
+/**
+* Returns something useful.
+*
+* @since 6.2.0 Updates to something even more useful.
+* @since 6.3.0 Now more useful than ever.
+*
+* @return string Something useful.
+*/
+function wp_get_something_useful() {
+	// ...
+}
 ```
 
-#### Plugin infrastructure that will never be merged to Core
+Plugin code that is stable and expected to be merged "as-is" into Core in the near future can use the `wp_` prefix for functions or a `WP_` prefix for classes.
+
+#### Avoiding duplicate declarations
+
+When doing so, care must be taken to ensure that no duplicate declarations to create functions or classes exist between Gutenberg and WordPress core code. A quick codebase search will also help you know if your new names are unique.
+
+Wrapping such code in `class_exists()` and `function_exists()` checks should be used to ensure it executes in the plugin up until it is merged to Core, or when running the plugin on older versions of WordPress.
 
 ```php
-function gutenberg_get_navigation( $slug ) { ... }
+if ( ! function_exists( 'wp_a_new_and_stable_feature' ) ) {
+	/**
+	* A very new and stable feature.
+	*
+	* @return string Something useful.
+	*/
+	function wp_a_new_and_stable_feature() {
+		// ...
+	}
+}
 ```
 
-### Group PHP code by _feature_
+Or for classes:
 
-Developers should organize PHP into files or folders by _feature_, not by _component_.
+```php
+/**
+ * WP_A_Stable_Class class
+ *
+ * @package WordPress
+ * @since 6.3.0
+ */
+if ( ! class_exists( 'WP_A_Stable_Class' ) ) {
+	// Do not invert this pattern with an early `return`.
+	// See below for details...
+	class WP_A_Stable_Class { ... }
+}
+```
 
-When defining a function that will be hooked, developers should call `add_action` and `add_filter` immediately after the function declaration.
+Wrapping code in `class_exists()` and `function_exists()` is usually inappropriate for evergreen code, or any plugin code that we expect to undergo constant change between WordPress releases, because it would prevent the latest versions of the code from being used. For example, the statement `class_exists( 'WP_Theme_JSON' )` would return `true` because the class already exists in Core.
 
-These two practices make it easier for PHP code to start in one folder (e.g., `lib/experimental`) and eventually move to another using a simple `git mv`.
+The `return` operator is considered an anti-pattern in the context provided below because it [does not halt](https://www.php.net/manual/en/function.return.php#112515) the parsing of the PHP script and can cause [unexpected side effects](https://github.com/WordPress/gutenberg/pull/58429#issuecomment-1916670097):
+```php
+/**
+ * ANTI-PATTERN
+ * DO NOT COPY!
+ *
+ */
+if ( class_exists( 'WP_A_Stable_Class' ) ) {
+	return; // do not do this.
+}
+```
 
-#### Good
+When to use which prefix is a judgement call, but the general rule is that if you're unsure, use the `gutenberg` prefix because it will less likely give rise to naming conflicts.
 
-```php
-// lib/experimental/navigation.php
+#### When not to use plugin-specific prefixes/suffixes
 
-function wp_get_navigation( $slug ) { ... }
+The above recommendations in relation to plugin-specific prefixes/suffixes are relevant only to files in the `lib` directory and only in the Gutenberg plugin.
 
-function wp_register_navigation_cpt() { ... }
+`Gutenberg` prefixes/suffixes _should not_ be used in Core PHP code. When syncing `/lib` files to Core, plugin-specific prefixes/suffixes are generally replaced with their `WP_` or `wp_` equivalents manually.
 
-add_action( 'init', 'wp_register_navigation_cpt' );
-```
+Accordingly, unless required to run plugin-only code, you should avoid using plugin-specific prefixes/suffixes in any block PHP code. Core blocks in the plugin are [published as NPM packages](https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/code/release.md#packages-releases-to-npm-and-wordpress-core-updates), which Core consumes as NPM dependencies.
 
-#### Not so good
+See [block naming conventions](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library#naming-convention-for-php-functions) for more information on block naming conventions.
 
-```php
-// lib/experimental/functions.php
+As always, get in touch with your fellow contributors if you're unsure.
 
-function wp_get_navigation( $slug ) { ... }
+### Documentation and annotations
 
-// lib/experimental/post-types.php
+For every class, method and function in the plugin, refer to the [WordPress PHP documentation standards](https://developer.wordpress.org/coding-standards/inline-documentation-standards/php/) when documenting your code.
 
-function wp_register_navigation_cpt() { ... }
+It's particularly important to observe annotation standards, and `@since` descriptions that specify the target WordPress version, so that all contributors can easily identify what needs to be (or what already has been) merged to Core and when.
 
-// lib/experimental/init.php
-add_action( 'init', 'wp_register_navigation_cpt' );
-```
+Developers should also write a brief note about _how_ their feature should be merged to Core, for example, which Core file or function should be patched.
 
-### Wrap functions and classes with `! function_exists` and `! class_exists`
+Notes can be included in the doc comment.
 
-Developers should take care to not define functions and classes that are already defined.
+This helps future developers know what to do when merging Gutenberg features into Core.
 
-When writing new functions and classes, it's good practice to use `! function_exists` and `! class_exists`.
+```php
+/**
+ * Returns a navigation object for the given slug.
+ *
+ * Should live in `wp-includes/navigation.php` when merged to Core.
+ *
+ * @since 6.3.0
+ *
+ * @param string $slug
+ * @return WP_Navigation
+ */
+function wp_get_navigation( $slug ) { ... }
+```
 
-If Core has defined a symbol once and then Gutenberg defines it a second time, fatal errors will occur.
+### Group PHP code by _feature_
+
+Developers should organize PHP into files or folders by _feature_, not by _component_.
 
-Wrapping functions and classes avoids such errors if the feature is merged to Core.
+When defining a function that will be hooked, developers should call `add_action` and `add_filter` immediately after the function declaration.
+
+These two practices make it easier for PHP code to start in one folder (e.g., `lib/experimental`) and eventually move to another using a simple `git mv`.
 
 #### Good
 
 ```php
-// lib/experimental/navigation/navigation.php
-
-if ( ! function_exists( 'wp_get_navigation' ) ) {
-	function wp_get_navigation( $slug ) { ... }
-}
+// lib/experimental/navigation.php
 
-// lib/experimental/navigation/class-wp-navigation.php
+function wp_get_navigation( $slug ) { ... }
 
-if ( class_exists( 'WP_Navigation' ) ) {
-	return;
-}
+function wp_register_navigation_cpt() { ... }
 
-class WP_Navigation { ... }
+add_action( 'init', 'wp_register_navigation_cpt' );
 ```
 
 #### Not so good
 
 ```php
-// lib/experimental/navigation/navigation.php
+// lib/experimental/functions.php
 
 function wp_get_navigation( $slug ) { ... }
 
-// lib/experimental/navigation/class-gutenberg-navigation.php
+// lib/experimental/post-types.php
+
+function wp_register_navigation_cpt() { ... }
 
-class WP_Navigation { ... }
+// lib/experimental/init.php
+add_action( 'init', 'wp_register_navigation_cpt' );
 ```
 
-Furthermore, a quick codebase search will also help you know if your new method is unique.
+### Requiring files in lib/load.php
 
-### Note how your feature should look when merged to Core
+Should the load order allow it, try to group imports according to WordPress release, then feature. It'll help everyone to quickly recognise the files that belong to specific WordPress releases.
 
-Developers should write a brief note about how their feature should be merged to Core, for example, which Core file or function should be patched.
+Existing comments in `lib/load.php` should act as a guide.
 
-Notes can be included in the doc comment.
+## When to sync changes to Gutenberg PHP with Core and vice versa
 
-This helps future developers know what to do when merging Gutenberg features into Core.
+On open Gutenberg PRs, changes to certain files are flagged as requiring syncing (also called "backporting") to WordPress Core, for example, PHP files in `/lib` and PHP unit tests.
 
-#### Good
+The CI checks will indicate whether you need to create a Core PR. If you do, you'll need to create a corresponding markdown file and place it within the appropriate release subdirectory in the [Core backport changelog](https://github.com/WordPress/gutenberg/tree/trunk/backport-changelog/).
 
-```php
-/**
- * Returns a navigation object for the given slug.
- *
- * Should live in `wp-includes/navigation.php` when merged to Core.
- *
- * @param string $slug
- *
- * @return WP_Navigation
- */
-function wp_get_navigation( $slug ) { ... }
-```
+For more information, please refer to the [Core backport changelog documentation](https://github.com/WordPress/gutenberg/tree/trunk/backport-changelog/readme.md).
+
+So too, if you've made changes in WordPress Core to code that also lives in the Gutenberg plugin, these changes will need to be synced to Gutenberg. The relevant Gutenberg GitHub pull request should be labeled with the `Backport from WordPress Core` label.
+
+If you're unsure, you can always ask for help in the #core-editor channel in [WordPress Slack](https://make.wordpress.org/chat/).
diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
new file mode 100644
index 00000000000000..defd7cd391b16b
--- /dev/null
+++ b/lib/block-editor-settings.php
@@ -0,0 +1,151 @@
+<?php
+/**
+ * Adds settings to the block editor.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Replaces core 'styles' and '__experimentalFeatures' block editor settings from
+ * wordpress-develop/block-editor.php with the Gutenberg versions. Much of the
+ * code is copied from get_block_editor_settings() in that file.
+ *
+ * This hook should run first as it completely replaces the core settings that
+ * other hooks may need to update.
+ *
+ * Note: The settings that are WP version specific should be handled inside the `compat` directory.
+ *
+ * @param array $settings Existing block editor settings.
+ *
+ * @return array New block editor settings.
+ */
+function gutenberg_get_block_editor_settings( $settings ) {
+	$global_styles = array();
+	$presets       = array(
+		array(
+			'css'            => 'variables',
+			'__unstableType' => 'presets',
+			'isGlobalStyles' => true,
+		),
+		array(
+			'css'            => 'presets',
+			'__unstableType' => 'presets',
+			'isGlobalStyles' => true,
+		),
+	);
+	foreach ( $presets as $preset_style ) {
+		$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
+		if ( '' !== $actual_css ) {
+			$preset_style['css'] = $actual_css;
+			$global_styles[]     = $preset_style;
+		}
+	}
+
+	if ( wp_theme_has_theme_json() ) {
+		$block_classes = array(
+			'css'            => 'styles',
+			'__unstableType' => 'theme',
+			'isGlobalStyles' => true,
+		);
+		$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
+		if ( '' !== $actual_css ) {
+			$block_classes['css'] = $actual_css;
+			$global_styles[]      = $block_classes;
+		}
+
+		/*
+		 * Add the custom CSS as a separate stylesheet so any invalid CSS
+		 * entered by users does not break other global styles.
+		 */
+		$global_styles[] = array(
+			'css'            => gutenberg_get_global_stylesheet( array( 'custom-css' ) ),
+			'__unstableType' => 'user',
+			'isGlobalStyles' => true,
+		);
+	} else {
+		// If there is no `theme.json` file, ensure base layout styles are still available.
+		$block_classes = array(
+			'css'            => 'base-layout-styles',
+			'__unstableType' => 'base-layout',
+			'isGlobalStyles' => true,
+		);
+		$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
+		if ( '' !== $actual_css ) {
+			$block_classes['css'] = $actual_css;
+			$global_styles[]      = $block_classes;
+		}
+	}
+
+	$settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() );
+
+	$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
+	// These settings may need to be updated based on data coming from theme.json sources.
+	if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
+		$colors_by_origin   = $settings['__experimentalFeatures']['color']['palette'];
+		$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
+			$colors_by_origin['custom'] : (
+				isset( $colors_by_origin['theme'] ) ?
+					$colors_by_origin['theme'] :
+					$colors_by_origin['default']
+			);
+	}
+	if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
+		$gradients_by_origin   = $settings['__experimentalFeatures']['color']['gradients'];
+		$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
+			$gradients_by_origin['custom'] : (
+				isset( $gradients_by_origin['theme'] ) ?
+					$gradients_by_origin['theme'] :
+					$gradients_by_origin['default']
+			);
+	}
+	if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
+		$font_sizes_by_origin  = $settings['__experimentalFeatures']['typography']['fontSizes'];
+		$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
+			$font_sizes_by_origin['custom'] : (
+				isset( $font_sizes_by_origin['theme'] ) ?
+					$font_sizes_by_origin['theme'] :
+					$font_sizes_by_origin['default']
+			);
+	}
+	if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
+		$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
+		unset( $settings['__experimentalFeatures']['color']['custom'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
+		$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
+		unset( $settings['__experimentalFeatures']['color']['customGradient'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
+		$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
+		unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
+		$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
+		unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
+		$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
+		unset( $settings['__experimentalFeatures']['spacing']['units'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
+		$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
+		unset( $settings['__experimentalFeatures']['spacing']['padding'] );
+	}
+	if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
+		$settings['disableCustomSpacingSizes'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
+		unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
+	}
+
+	if ( isset( $settings['__experimentalFeatures']['spacing']['spacingSizes'] ) ) {
+		$spacing_sizes_by_origin  = $settings['__experimentalFeatures']['spacing']['spacingSizes'];
+		$settings['spacingSizes'] = isset( $spacing_sizes_by_origin['custom'] ) ?
+			$spacing_sizes_by_origin['custom'] : (
+				isset( $spacing_sizes_by_origin['theme'] ) ?
+					$spacing_sizes_by_origin['theme'] :
+					$spacing_sizes_by_origin['default']
+			);
+	}
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', 0 );
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
new file mode 100644
index 00000000000000..a1d99133c1fc09
--- /dev/null
+++ b/lib/block-supports/background.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * Background block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the style block attribute for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_background_support( $block_type ) {
+	// Setup attributes and styles within that if needed.
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	// Check for existing style attribute definition e.g. from block.json.
+	if ( array_key_exists( 'style', $block_type->attributes ) ) {
+		return;
+	}
+
+	$has_background_support = block_has_support( $block_type, array( 'background' ), false );
+
+	if ( $has_background_support ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+}
+
+/**
+ * Renders the background styles to the block wrapper.
+ * This block support uses the `render_block` hook to ensure that
+ * it is also applied to non-server-rendered blocks.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_background_support( $block_content, $block ) {
+	$block_type                   = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_attributes             = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
+	$has_background_image_support = block_has_support( $block_type, array( 'background', 'backgroundImage' ), false );
+
+	if (
+		! $has_background_image_support ||
+		wp_should_skip_block_supports_serialization( $block_type, 'background', 'backgroundImage' ) ||
+		! isset( $block_attributes['style']['background'] )
+	) {
+		return $block_content;
+	}
+
+	$background_styles                         = array();
+	$background_styles['backgroundImage']      = $block_attributes['style']['background']['backgroundImage'] ?? null;
+	$background_styles['backgroundSize']       = $block_attributes['style']['background']['backgroundSize'] ?? null;
+	$background_styles['backgroundPosition']   = $block_attributes['style']['background']['backgroundPosition'] ?? null;
+	$background_styles['backgroundRepeat']     = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
+	$background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;
+	if ( ! empty( $background_styles['backgroundImage'] ) ) {
+		$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
+		// If the background size is set to `contain` and no position is set, set the position to `center`.
+		if ( 'contain' === $background_styles['backgroundSize'] && ! $background_styles['backgroundPosition'] ) {
+			$background_styles['backgroundPosition'] = '50% 50%';
+		}
+	}
+
+	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
+
+	if ( ! empty( $styles['css'] ) ) {
+		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
+		$tags = new WP_HTML_Tag_Processor( $block_content );
+
+		if ( $tags->next_tag() ) {
+			$existing_style = $tags->get_attribute( 'style' );
+			$updated_style  = '';
+
+			if ( ! empty( $existing_style ) ) {
+				$updated_style = $existing_style;
+				if ( ! str_ends_with( $existing_style, ';' ) ) {
+					$updated_style .= ';';
+				}
+			}
+
+			$updated_style .= $styles['css'];
+			$tags->set_attribute( 'style', $updated_style );
+			$tags->add_class( 'has-background' );
+		}
+
+		return $tags->get_updated_html();
+	}
+
+	return $block_content;
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'background',
+	array(
+		'register_attribute' => 'gutenberg_register_background_support',
+	)
+);
+
+if ( function_exists( 'wp_render_background_support' ) ) {
+	remove_filter( 'render_block', 'wp_render_background_support' );
+}
+add_filter( 'render_block', 'gutenberg_render_background_support', 10, 2 );
diff --git a/lib/block-supports/block-style-variations.php b/lib/block-supports/block-style-variations.php
new file mode 100644
index 00000000000000..3942fed24b98a8
--- /dev/null
+++ b/lib/block-supports/block-style-variations.php
@@ -0,0 +1,317 @@
+<?php
+/**
+ * Block support to enable per-section styling of block types via
+ * block style variations.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Generate block style variation instance name.
+ *
+ * @since 6.6.0
+ *
+ * @deprecated 6.7.0
+ *
+ * @param array  $block     Block object.
+ * @param string $variation Slug for the block style variation.
+ *
+ * @return string The unique variation name.
+ */
+function gutenberg_create_block_style_variation_instance_name( $block, $variation ) {
+	_deprecated_function( __FUNCTION__, '6.7.0' );
+	return $variation . '--' . md5( serialize( $block ) );
+}
+
+/**
+ * Determines the block style variation names within a CSS class string.
+ *
+ * @since 6.6.0
+ *
+ * @param string $class_string CSS class string to look for a variation in.
+ *
+ * @return array|null The block style variation name if found.
+ */
+function gutenberg_get_block_style_variation_name_from_class( $class_string ) {
+	if ( ! is_string( $class_string ) ) {
+		return null;
+	}
+
+	preg_match_all( '/\bis-style-(?!default)(\S+)\b/', $class_string, $matches );
+	return $matches[1] ?? null;
+}
+
+/**
+ * Recursively resolves any `ref` values within a block style variation's data.
+ *
+ * @since 6.6.0
+ *
+ * @param array $variation_data Reference to the variation data being processed.
+ * @param array $theme_json     Theme.json data to retrieve referenced values from.
+ */
+function gutenberg_resolve_block_style_variation_ref_values( &$variation_data, $theme_json ) {
+	foreach ( $variation_data as $key => &$value ) {
+		// Only need to potentially process arrays.
+		if ( is_array( $value ) ) {
+			// If ref value is set, attempt to find its matching value and update it.
+			if ( array_key_exists( 'ref', $value ) ) {
+				// Clean up any invalid ref value.
+				if ( empty( $value['ref'] ) || ! is_string( $value['ref'] ) ) {
+					unset( $variation_data[ $key ] );
+				}
+
+				$value_path = explode( '.', $value['ref'] ?? '' );
+				$ref_value  = _wp_array_get( $theme_json, $value_path );
+
+				// Only update the current value if the referenced path matched a value.
+				if ( null === $ref_value ) {
+					unset( $variation_data[ $key ] );
+				} else {
+					$value = $ref_value;
+				}
+			} else {
+				// Recursively look for ref instances.
+				gutenberg_resolve_block_style_variation_ref_values( $value, $theme_json );
+			}
+		}
+	}
+}
+
+/**
+ * Render the block style variation's styles.
+ *
+ * In the case of nested blocks with variations applied, we want the parent
+ * variation's styles to be rendered before their descendants. This solves the
+ * issue of a block type being styled in both the parent and descendant: we want
+ * the descendant style to take priority, and this is done by loading it after,
+ * in the DOM order. This is why the variation stylesheet generation is in a
+ * different filter.
+ *
+ * @since 6.6.0
+ *
+ * @param array $parsed_block The parsed block.
+ *
+ * @return array The parsed block with block style variation classname added.
+ */
+function gutenberg_render_block_style_variation_support_styles( $parsed_block ) {
+	$classes    = $parsed_block['attrs']['className'] ?? null;
+	$variations = gutenberg_get_block_style_variation_name_from_class( $classes );
+
+	if ( ! $variations ) {
+		return $parsed_block;
+	}
+
+	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$theme_json = $tree->get_raw_data();
+
+	// Only the first block style variation with data is supported.
+	$variation_data = array();
+	foreach ( $variations as $variation ) {
+		$variation_data = $theme_json['styles']['blocks'][ $parsed_block['blockName'] ]['variations'][ $variation ] ?? array();
+
+		if ( ! empty( $variation_data ) ) {
+			break;
+		}
+	}
+
+	if ( empty( $variation_data ) ) {
+		return $parsed_block;
+	}
+
+	// Recursively resolve any ref values with the appropriate value within the
+	// theme_json data.
+	gutenberg_resolve_block_style_variation_ref_values( $variation_data, $theme_json );
+
+	$variation_instance = wp_unique_id( $variation . '--' );
+	$class_name         = "is-style-$variation_instance";
+	$updated_class_name = $parsed_block['attrs']['className'] . " $class_name";
+
+	/*
+	 * Even though block style variations are effectively theme.json partials,
+	 * they can't be processed completely as though they are.
+	 *
+	 * Block styles support custom selectors to direct specific types of styles
+	 * to inner elements. For example, borders on Image block's get applied to
+	 * the inner `img` element rather than the wrapping `figure`.
+	 *
+	 * The following relocates the "root" block style variation styles to
+	 * under an appropriate blocks property to leverage the preexisting style
+	 * generation for simple block style variations. This way they get the
+	 * custom selectors they need.
+	 *
+	 * The inner elements and block styles for the variation itself are
+	 * still included at the top level but scoped by the variation's selector
+	 * when the stylesheet is generated.
+	 */
+	$elements_data = $variation_data['elements'] ?? array();
+	$blocks_data   = $variation_data['blocks'] ?? array();
+	unset( $variation_data['elements'] );
+	unset( $variation_data['blocks'] );
+
+	_wp_array_set(
+		$blocks_data,
+		array( $parsed_block['blockName'], 'variations', $variation_instance ),
+		$variation_data
+	);
+
+	$config = array(
+		'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+		'styles'  => array(
+			'elements' => $elements_data,
+			'blocks'   => $blocks_data,
+		),
+	);
+
+	// Turn off filter that excludes block nodes. They are needed here for the variation's inner block types.
+	if ( ! is_admin() ) {
+		remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+	}
+
+	// Temporarily prevent variation instance from being sanitized while processing theme.json.
+	$styles_registry = WP_Block_Styles_Registry::get_instance();
+	$styles_registry->register( $parsed_block['blockName'], array( 'name' => $variation_instance ) );
+
+	$variation_theme_json = new WP_Theme_JSON_Gutenberg( $config, 'blocks' );
+	$variation_styles     = $variation_theme_json->get_stylesheet(
+		array( 'styles' ),
+		array( 'custom' ),
+		array(
+			'include_block_style_variations' => true,
+			'skip_root_layout_styles'        => true,
+			'scope'                          => ".$class_name",
+		)
+	);
+
+	// Clean up temporary block style now instance styles have been processed.
+	$styles_registry->unregister( $parsed_block['blockName'], $variation_instance );
+
+	// Restore filter that excludes block nodes.
+	if ( ! is_admin() ) {
+		add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+	}
+
+	if ( empty( $variation_styles ) ) {
+		return $parsed_block;
+	}
+
+	wp_register_style( 'block-style-variation-styles', false, array( 'wp-block-library', 'global-styles' ) );
+	wp_add_inline_style( 'block-style-variation-styles', $variation_styles );
+
+	/*
+	 * Add variation instance class name to block's className string so it can
+	 * be enforced in the block markup via render_block filter.
+	 */
+	_wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );
+
+	return $parsed_block;
+}
+
+/**
+ * Ensure the variation block support class name generated and added to
+ * block attributes in the `render_block_data` filter gets applied to the
+ * block's markup.
+ *
+ * @see gutenberg_render_block_style_variation_support_styles
+ *
+ * @since 6.6.0
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ *
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_block_style_variation_class_name( $block_content, $block ) {
+	if ( ! $block_content || empty( $block['attrs']['className'] ) ) {
+		return $block_content;
+	}
+
+	/*
+	 * Matches a class prefixed by `is-style`, followed by the
+	 * variation slug, then `--`, and finally an instance number.
+	 */
+	preg_match( '/\bis-style-(\S+?--\d+)\b/', $block['attrs']['className'], $matches );
+
+	if ( empty( $matches ) ) {
+		return $block_content;
+	}
+
+	$tags = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $tags->next_tag() ) {
+		/*
+		 * Ensure the variation instance class name set in the
+		 * `render_block_data` filter is applied in markup.
+		 * See `gutenberg_render_block_style_variation_support_styles`.
+		 */
+		$tags->add_class( $matches[0] );
+	}
+
+	return $tags->get_updated_html();
+}
+
+/**
+ * Enqueues styles for block style variations.
+ *
+ * @since 6.6.0
+ */
+function gutenberg_enqueue_block_style_variation_styles() {
+	wp_enqueue_style( 'block-style-variation-styles' );
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register( 'block-style-variation', array() );
+
+// Remove core filters and action.
+if ( function_exists( 'wp_render_block_style_variation_support_styles' ) ) {
+	remove_filter( 'render_block_data', 'wp_render_block_style_variation_support_styles' );
+}
+if ( function_exists( 'wp_render_block_style_variation_class_name' ) ) {
+	remove_filter( 'render_block', 'wp_render_block_style_variation_class_name' );
+}
+if ( function_exists( 'wp_enqueue_block_style_variation_styles' ) ) {
+	remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles' );
+}
+
+// Add Gutenberg filters and action.
+add_filter( 'render_block_data', 'gutenberg_render_block_style_variation_support_styles', 10, 2 );
+add_filter( 'render_block', 'gutenberg_render_block_style_variation_class_name', 10, 2 );
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_block_style_variation_styles', 1 );
+
+/**
+ * Registers block style variations read in from theme.json partials.
+ *
+ * @access private
+ *
+ * @param array $variations Shared block style variations.
+ */
+function gutenberg_register_block_style_variations_from_theme_json_partials( $variations ) {
+	if ( empty( $variations ) ) {
+		return;
+	}
+
+	$registry = WP_Block_Styles_Registry::get_instance();
+
+	foreach ( $variations as $variation ) {
+		if ( empty( $variation['blockTypes'] ) || empty( $variation['styles'] ) ) {
+			continue;
+		}
+
+		$variation_name  = $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] );
+		$variation_label = $variation['title'] ?? $variation_name;
+
+		foreach ( $variation['blockTypes'] as $block_type ) {
+			$registered_styles = $registry->get_registered_styles_for_block( $block_type );
+
+			// Register block style variation if it hasn't already been registered.
+			if ( ! array_key_exists( $variation_name, $registered_styles ) ) {
+				register_block_style(
+					$block_type,
+					array(
+						'name'  => $variation_name,
+						'label' => $variation_label,
+					)
+				);
+			}
+		}
+	}
+}
diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php
index 09e8727743342d..f890ed84566b7f 100644
--- a/lib/block-supports/border.php
+++ b/lib/block-supports/border.php
@@ -17,7 +17,7 @@ function gutenberg_register_border_support( $block_type ) {
 		$block_type->attributes = array();
 	}
 
-	if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
+	if ( block_has_support( $block_type, array( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
 		$block_type->attributes['style'] = array(
 			'type' => 'object',
 		);
@@ -40,7 +40,7 @@ function gutenberg_register_border_support( $block_type ) {
  * @return array Border CSS classes and inline styles.
  */
 function gutenberg_apply_border_support( $block_type, $block_attributes ) {
-	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'border' ) ) {
+	if ( wp_should_skip_block_supports_serialization( $block_type, 'border' ) ) {
 		return array();
 	}
 
@@ -52,7 +52,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		gutenberg_has_border_feature_support( $block_type, 'radius' ) &&
 		isset( $block_attributes['style']['border']['radius'] ) &&
-		! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
+		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' )
 	) {
 		$border_radius = $block_attributes['style']['border']['radius'];
 
@@ -67,7 +67,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		gutenberg_has_border_feature_support( $block_type, 'style' ) &&
 		isset( $block_attributes['style']['border']['style'] ) &&
-		! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
+		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' )
 	) {
 		$border_block_styles['style'] = $block_attributes['style']['border']['style'];
 	}
@@ -76,7 +76,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		$has_border_width_support &&
 		isset( $block_attributes['style']['border']['width'] ) &&
-		! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
+		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' )
 	) {
 		$border_width = $block_attributes['style']['border']['width'];
 
@@ -91,21 +91,21 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	// Border color.
 	if (
 		$has_border_color_support &&
-		! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
+		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' )
 	) {
 		$preset_border_color          = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
-		$custom_border_color          = _wp_array_get( $block_attributes, array( 'style', 'border', 'color' ), null );
+		$custom_border_color          = $block_attributes['style']['border']['color'] ?? null;
 		$border_block_styles['color'] = $preset_border_color ? $preset_border_color : $custom_border_color;
 	}
 
 	// Generate styles for individual border sides.
 	if ( $has_border_color_support || $has_border_width_support ) {
 		foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
-			$border                       = _wp_array_get( $block_attributes, array( 'style', 'border', $side ), null );
+			$border                       = $block_attributes['style']['border'][ $side ] ?? null;
 			$border_side_values           = array(
-				'width' => isset( $border['width'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
-				'color' => isset( $border['color'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
-				'style' => isset( $border['style'] ) && ! gutenberg_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
+				'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ? $border['width'] : null,
+				'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) ? $border['color'] : null,
+				'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ? $border['style'] : null,
 			);
 			$border_block_styles[ $side ] = $border_side_values;
 		}
@@ -129,29 +129,29 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 /**
  * Checks whether the current block type supports the border feature requested.
  *
- * If the `__experimentalBorder` support flag is a boolean `true` all border
+ * If the `border` support flag is a boolean `true` all border
  * support features are available. Otherwise, the specific feature's support
- * flag nested under `experimentalBorder` must be enabled for the feature
+ * flag nested under `border` must be enabled for the feature
  * to be opted into.
  *
- * @param WP_Block_Type $block_type Block type to check for support.
- * @param string        $feature    Name of the feature to check support for.
- * @param mixed         $default    Fallback value for feature support, defaults to false.
+ * @param WP_Block_Type $block_type    Block type to check for support.
+ * @param string        $feature       Name of the feature to check support for.
+ * @param mixed         $default_value Fallback value for feature support, defaults to false.
  *
  * @return boolean                  Whether or not the feature is supported.
  */
-function gutenberg_has_border_feature_support( $block_type, $feature, $default = false ) {
-	// Check if all border support features have been opted into via `"__experimentalBorder": true`.
-	if (
-		property_exists( $block_type, 'supports' ) &&
-		( true === _wp_array_get( $block_type->supports, array( '__experimentalBorder' ), $default ) )
-	) {
-		return true;
+function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) {
+	// Check if all border support features have been opted into via `"border": true`.
+	if ( $block_type instanceof WP_Block_Type ) {
+		$block_type_supports_border = $block_type->supports['border'] ?? $default_value;
+		if ( true === $block_type_supports_border ) {
+			return true;
+		}
 	}
 
 	// Check if the specific feature has been opted into individually
-	// via nested flag under `__experimentalBorder`.
-	return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default );
+	// via nested flag under `border`.
+	return block_has_support( $block_type, array( 'border', $feature ), $default_value );
 }
 
 // Register the block support.
diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php
index 8b9702ae445334..80a0a2cf974df7 100644
--- a/lib/block-supports/colors.php
+++ b/lib/block-supports/colors.php
@@ -11,15 +11,26 @@
  * @param WP_Block_Type $block_type Block Type.
  */
 function gutenberg_register_colors_support( $block_type ) {
-	$color_support                 = property_exists( $block_type, 'supports' ) ? _wp_array_get( $block_type->supports, array( 'color' ), false ) : false;
-	$has_text_colors_support       = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
-	$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
-	$has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
-	$has_link_colors_support       = _wp_array_get( $color_support, array( 'link' ), false );
+	$color_support = false;
+	if ( $block_type instanceof WP_Block_Type ) {
+		$color_support = $block_type->supports['color'] ?? false;
+	}
+	$has_text_colors_support       = true === $color_support ||
+		( isset( $color_support['text'] ) && $color_support['text'] ) ||
+		( is_array( $color_support ) && ! isset( $color_support['text'] ) );
+	$has_background_colors_support = true === $color_support ||
+		( isset( $color_support['background'] ) && $color_support['background'] ) ||
+		( is_array( $color_support ) && ! isset( $color_support['background'] ) );
+	$has_gradients_support         = $color_support['gradients'] ?? false;
+	$has_link_colors_support       = $color_support['link'] ?? false;
+	$has_button_colors_support     = $color_support['button'] ?? false;
+	$has_heading_colors_support    = $color_support['heading'] ?? false;
 	$has_color_support             = $has_text_colors_support ||
 		$has_background_colors_support ||
 		$has_gradients_support ||
-		$has_link_colors_support;
+		$has_link_colors_support ||
+		$has_button_colors_support ||
+		$has_heading_colors_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -61,40 +72,44 @@ function gutenberg_register_colors_support( $block_type ) {
  * @return array Colors CSS classes and inline styles.
  */
 function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
-	$color_support = _wp_array_get( $block_type->supports, array( 'color' ), false );
+	$color_support = $block_type->supports['color'] ?? false;
 
 	if (
 		is_array( $color_support ) &&
-		gutenberg_should_skip_block_supports_serialization( $block_type, 'color' )
+		wp_should_skip_block_supports_serialization( $block_type, 'color' )
 	) {
 		return array();
 	}
 
-	$has_text_colors_support       = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'text' ), true ) );
-	$has_background_colors_support = true === $color_support || ( is_array( $color_support ) && _wp_array_get( $color_support, array( 'background' ), true ) );
-	$has_gradients_support         = _wp_array_get( $color_support, array( 'gradients' ), false );
+	$has_text_colors_support       = true === $color_support ||
+		( isset( $color_support['text'] ) && $color_support['text'] ) ||
+		( is_array( $color_support ) && ! isset( $color_support['text'] ) );
+	$has_background_colors_support = true === $color_support ||
+		( isset( $color_support['background'] ) && $color_support['background'] ) ||
+		( is_array( $color_support ) && ! isset( $color_support['background'] ) );
+	$has_gradients_support         = $color_support['gradients'] ?? false;
 	$color_block_styles            = array();
 
 	// Text colors.
 	// Check support for text colors.
-	if ( $has_text_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
+	if ( $has_text_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ) ) {
 		$preset_text_color          = array_key_exists( 'textColor', $block_attributes ) ? "var:preset|color|{$block_attributes['textColor']}" : null;
-		$custom_text_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'text' ), null );
+		$custom_text_color          = $block_attributes['style']['color']['text'] ?? null;
 		$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
 	}
 
 	// Background colors.
-	if ( $has_background_colors_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
+	if ( $has_background_colors_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ) ) {
 		$preset_background_color          = array_key_exists( 'backgroundColor', $block_attributes ) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
-		$custom_background_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'background' ), null );
+		$custom_background_color          = $block_attributes['style']['color']['background'] ?? null;
 		$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
 	}
 
 	// Gradients.
 
-	if ( $has_gradients_support && ! gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
+	if ( $has_gradients_support && ! wp_should_skip_block_supports_serialization( $block_type, 'color', 'gradients' ) ) {
 		$preset_gradient_color          = array_key_exists( 'gradient', $block_attributes ) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
-		$custom_gradient_color          = _wp_array_get( $block_attributes, array( 'style', 'color', 'gradient' ), null );
+		$custom_gradient_color          = $block_attributes['style']['color']['gradient'] ?? null;
 		$color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
 	}
 
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 5776a2701d53b5..1980faba278175 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -44,7 +44,7 @@ function gutenberg_register_dimensions_support( $block_type ) {
  * @return array Block dimensions CSS classes and inline styles.
  */
 function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
+	if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) {
 		return array();
 	}
 
@@ -59,10 +59,13 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
 		return $attributes;
 	}
 
-	$skip_min_height                      = gutenberg_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' );
+	$skip_min_height                      = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' );
 	$dimensions_block_styles              = array();
-	$dimensions_block_styles['minHeight'] = $has_min_height_support && ! $skip_min_height ? _wp_array_get( $block_styles, array( 'dimensions', 'minHeight' ), null ) : null;
-	$styles                               = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
+	$dimensions_block_styles['minHeight'] = null;
+	if ( $has_min_height_support && ! $skip_min_height ) {
+		$dimensions_block_styles['minHeight'] = $block_styles['dimensions']['minHeight'] ?? null;
+	}
+	$styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {
 		$attributes['style'] = $styles['css'];
@@ -71,6 +74,83 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
 	return $attributes;
 }
 
+/**
+ * Renders server-side dimensions styles to the block wrapper.
+ * This block support uses the `render_block` hook to ensure that
+ * it is also applied to non-server-rendered blocks.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_dimensions_support( $block_content, $block ) {
+	$block_type               = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_attributes         = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
+	$has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
+
+	if (
+		! $has_aspect_ratio_support ||
+		wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
+	) {
+		return $block_content;
+	}
+
+	$dimensions_block_styles                = array();
+	$dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
+
+	// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+	if (
+		isset( $dimensions_block_styles['aspectRatio'] )
+	) {
+		$dimensions_block_styles['minHeight'] = 'unset';
+	} elseif (
+		isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
+		isset( $block_attributes['minHeight'] )
+	) {
+		$dimensions_block_styles['aspectRatio'] = 'unset';
+	}
+
+	$styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
+
+	if ( ! empty( $styles['css'] ) ) {
+		// Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
+		$tags = new WP_HTML_Tag_Processor( $block_content );
+
+		if ( $tags->next_tag() ) {
+			$existing_style = $tags->get_attribute( 'style' );
+			$updated_style  = '';
+
+			if ( ! empty( $existing_style ) ) {
+				$updated_style = $existing_style;
+				if ( ! str_ends_with( $existing_style, ';' ) ) {
+					$updated_style .= ';';
+				}
+			}
+
+			$updated_style .= $styles['css'];
+			$tags->set_attribute( 'style', $updated_style );
+
+			if ( ! empty( $styles['classnames'] ) ) {
+				foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
+					if (
+						str_contains( $class_name, 'aspect-ratio' ) &&
+						! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
+					) {
+						continue;
+					}
+					$tags->add_class( $class_name );
+				}
+			}
+		}
+
+		return $tags->get_updated_html();
+	}
+
+	return $block_content;
+}
+
+add_filter( 'render_block', 'gutenberg_render_dimensions_support', 10, 2 );
+
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
 	'dimensions',
diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
index 4a9a23d7b5af3f..98791fe05c1096 100644
--- a/lib/block-supports/duotone.php
+++ b/lib/block-supports/duotone.php
@@ -5,17 +5,81 @@
  * @package gutenberg
  */
 
+// Register the block support. (overrides core one).
+WP_Block_Supports::get_instance()->register(
+	'duotone',
+	array(
+		'register_attribute' => array( 'WP_Duotone_Gutenberg', 'register_duotone_support' ),
+	)
+);
+
+// Set up metadata prior to rendering any blocks.
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_styles_presets' ) );
+	remove_action( 'wp_loaded', array( 'WP_Duotone', 'set_global_style_block_names' ) );
+}
+add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_styles_presets' ), 10 );
+add_action( 'wp_loaded', array( 'WP_Duotone_Gutenberg', 'set_global_style_block_names' ), 10 );
+
+// Add classnames to blocks using duotone support.
+if ( function_exists( 'wp_render_duotone_support' ) ) {
+	// Deprecated render function.
+	remove_filter( 'render_block', 'wp_render_duotone_support' );
+}
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ) );
+	remove_filter( 'render_block_core/image', array( 'WP_Duotone', 'restore_image_outer_container' ) );
+}
+add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 );
+add_filter( 'render_block_core/image', array( 'WP_Duotone_Gutenberg', 'restore_image_outer_container' ), 10, 1 );
+
+// Enqueue styles.
+// Block styles (core-block-supports-inline-css) before the style engine (gutenberg_enqueue_stored_styles).
+// Global styles (global-styles-inline-css) after the other global styles (gutenberg_enqueue_global_styles).
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_block_styles' ) );
+	remove_action( 'wp_enqueue_scripts', array( 'WP_Duotone', 'output_global_styles' ) );
+}
+add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_block_styles' ), 9 );
+add_action( 'wp_enqueue_scripts', array( 'WP_Duotone_Gutenberg', 'output_global_styles' ), 11 );
+
+// Add SVG filters to the footer. Also, for classic themes, output block styles (core-block-supports-inline-css).
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_action( 'wp_footer', array( 'WP_Duotone', 'output_footer_assets' ) );
+}
+add_action( 'wp_footer', array( 'WP_Duotone_Gutenberg', 'output_footer_assets' ), 10 );
+
+// Add styles and SVGs for use in the editor via the EditorStyles component.
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_filter( 'block_editor_settings_all', array( 'WP_Duotone', 'add_editor_settings' ) );
+}
+add_filter( 'block_editor_settings_all', array( 'WP_Duotone_Gutenberg', 'add_editor_settings' ), 10 );
+
+// Migrate the old experimental duotone support flag.
+if ( class_exists( 'WP_Duotone' ) ) {
+	remove_filter( 'block_type_metadata_settings', array( 'WP_Duotone', 'migrate_experimental_duotone_support_flag' ) );
+}
+add_filter( 'block_type_metadata_settings', array( 'WP_Duotone_Gutenberg', 'migrate_experimental_duotone_support_flag' ), 10, 2 );
+
+/*
+ * Deprecated functions below. All new functions should be added in class-wp-duotone-gutenberg.php.
+ */
+
 /**
  * Direct port of tinycolor's bound01 function, lightly simplified to maintain
  * consistency with tinycolor.
  *
  * @see https://github.com/bgrins/TinyColor
  *
+ * @deprecated 6.3.0
+ *
  * @param  mixed $n   Number of unknown type.
  * @param  int   $max Upper value of the range to bound to.
  * @return float      Value in the range [0,1].
  */
 function gutenberg_tinycolor_bound01( $n, $max ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	if ( 'string' === gettype( $n ) && str_contains( $n, '.' ) && 1 === (float) $n ) {
 		$n = '100%';
 	}
@@ -42,10 +106,14 @@ function gutenberg_tinycolor_bound01( $n, $max ) {
  *
  * @see https://github.com/bgrins/TinyColor
  *
+ * @deprecated 6.3.0
+ *
  * @param  mixed $n   Number of unknown type.
  * @return float      Value in the range [0,1].
  */
 function gutenberg_tinycolor_bound_alpha( $n ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	if ( is_numeric( $n ) ) {
 		$n = (float) $n;
 		if ( $n >= 0 && $n <= 1 ) {
@@ -60,10 +128,14 @@ function gutenberg_tinycolor_bound_alpha( $n ) {
  *
  * @see https://github.com/bgrins/TinyColor
  *
+ * @deprecated 6.3.0
+ *
  * @param  array $rgb_color RGB object.
  * @return array            Rounded and converted RGB object.
  */
 function gutenberg_tinycolor_rgb_to_rgb( $rgb_color ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	return array(
 		'r' => gutenberg_tinycolor_bound01( $rgb_color['r'], 255 ) * 255,
 		'g' => gutenberg_tinycolor_bound01( $rgb_color['g'], 255 ) * 255,
@@ -76,12 +148,16 @@ function gutenberg_tinycolor_rgb_to_rgb( $rgb_color ) {
  *
  * @see https://github.com/bgrins/TinyColor
  *
+ * @deprecated 6.3.0
+ *
  * @param  float $p first component.
  * @param  float $q second component.
  * @param  float $t third component.
  * @return float    R, G, or B component.
  */
 function gutenberg_tinycolor_hue_to_rgb( $p, $q, $t ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	if ( $t < 0 ) {
 		++$t;
 	}
@@ -105,10 +181,14 @@ function gutenberg_tinycolor_hue_to_rgb( $p, $q, $t ) {
  *
  * @see https://github.com/bgrins/TinyColor
  *
+ * @deprecated 6.3.0
+ *
  * @param  array $hsl_color HSL object.
  * @return array            Rounded and converted RGB object.
  */
 function gutenberg_tinycolor_hsl_to_rgb( $hsl_color ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	$h = gutenberg_tinycolor_bound01( $hsl_color['h'], 360 );
 	$s = gutenberg_tinycolor_bound01( $hsl_color['s'], 100 );
 	$l = gutenberg_tinycolor_bound01( $hsl_color['l'], 100 );
@@ -140,10 +220,14 @@ function gutenberg_tinycolor_hsl_to_rgb( $hsl_color ) {
  * @see https://github.com/bgrins/TinyColor
  * @see https://github.com/casesandberg/react-color/
  *
+ * @deprecated 6.3.0
+ *
  * @param  string $color_str CSS color string.
  * @return array             RGB object.
  */
 function gutenberg_tinycolor_string_to_rgb( $color_str ) {
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+
 	$color_str = strtolower( trim( $color_str ) );
 
 	$css_integer = '[-\\+]?\\d+%?';
@@ -293,229 +377,64 @@ function gutenberg_tinycolor_string_to_rgb( $color_str ) {
 /**
  * Returns the prefixed id for the duotone filter for use as a CSS id.
  *
+ * @deprecated 6.3.0
+ *
  * @param  array $preset Duotone preset value as seen in theme.json.
  * @return string        Duotone filter CSS id.
  */
 function gutenberg_get_duotone_filter_id( $preset ) {
-	if ( ! isset( $preset['slug'] ) ) {
-		return '';
-	}
-
-	return 'wp-duotone-' . $preset['slug'];
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+	return WP_Duotone_Gutenberg::get_filter_id_from_preset( $preset );
 }
 
 /**
  * Returns the CSS filter property url to reference the rendered SVG.
  *
+ * @deprecated 6.3.0
+ *
  * @param  array $preset Duotone preset value as seen in theme.json.
  * @return string        Duotone CSS filter property url value.
  */
 function gutenberg_get_duotone_filter_property( $preset ) {
-	if ( isset( $preset['colors'] ) && 'unset' === $preset['colors'] ) {
-		return 'none';
-	}
-	$filter_id = gutenberg_get_duotone_filter_id( $preset );
-	return "url('#" . $filter_id . "')";
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+	return WP_Duotone_Gutenberg::get_filter_css_property_value_from_preset( $preset );
 }
 
 /**
  * Returns the duotone filter SVG string for the preset.
  *
+ * @deprecated 6.3.0
+ *
  * @param  array $preset Duotone preset value as seen in theme.json.
  * @return string        Duotone SVG filter.
  */
 function gutenberg_get_duotone_filter_svg( $preset ) {
-	$filter_id = gutenberg_get_duotone_filter_id( $preset );
-
-	$duotone_values = array(
-		'r' => array(),
-		'g' => array(),
-		'b' => array(),
-		'a' => array(),
-	);
-
-	if ( ! isset( $preset['colors'] ) || ! is_array( $preset['colors'] ) ) {
-		$preset['colors'] = array();
-	}
-
-	foreach ( $preset['colors'] as $color_str ) {
-		$color = gutenberg_tinycolor_string_to_rgb( $color_str );
-
-		$duotone_values['r'][] = $color['r'] / 255;
-		$duotone_values['g'][] = $color['g'] / 255;
-		$duotone_values['b'][] = $color['b'] / 255;
-		$duotone_values['a'][] = $color['a'];
-	}
-
-	ob_start();
-
-	?>
-
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 0 0"
-		width="0"
-		height="0"
-		focusable="false"
-		role="none"
-		style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
-	>
-		<defs>
-			<filter id="<?php echo esc_attr( $filter_id ); ?>">
-				<feColorMatrix
-					color-interpolation-filters="sRGB"
-					type="matrix"
-					values="
-						.299 .587 .114 0 0
-						.299 .587 .114 0 0
-						.299 .587 .114 0 0
-						.299 .587 .114 0 0
-					"
-				/>
-				<feComponentTransfer color-interpolation-filters="sRGB" >
-					<feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
-					<feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
-					<feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
-					<feFuncA type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['a'] ) ); ?>" />
-				</feComponentTransfer>
-				<feComposite in2="SourceGraphic" operator="in" />
-			</filter>
-		</defs>
-	</svg>
-
-	<?php
-
-	$svg = ob_get_clean();
-
-	if ( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) {
-		// Clean up the whitespace.
-		$svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
-		$svg = str_replace( '> <', '><', $svg );
-		$svg = trim( $svg );
-	}
-
-	return $svg;
+	_deprecated_function( __FUNCTION__, '6.3.0' );
+	return WP_Duotone_Gutenberg::get_filter_svg_from_preset( $preset );
 }
 
 /**
  * Registers the style and colors block attributes for block types that support it.
  *
+ * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::register_duotone_support() instead.
+ *
  * @param WP_Block_Type $block_type Block Type.
  */
 function gutenberg_register_duotone_support( $block_type ) {
-	$has_duotone_support = false;
-	if ( property_exists( $block_type, 'supports' ) ) {
-		$has_duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
-	}
-
-	if ( $has_duotone_support ) {
-		if ( ! $block_type->attributes ) {
-			$block_type->attributes = array();
-		}
-
-		if ( ! array_key_exists( 'style', $block_type->attributes ) ) {
-			$block_type->attributes['style'] = array(
-				'type' => 'object',
-			);
-		}
-	}
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::register_duotone_support' );
+	return WP_Duotone_Gutenberg::register_duotone_support( $block_type );
 }
 
 /**
  * Render out the duotone stylesheet and SVG.
  *
+ * @deprecated 6.3.0 Use WP_Duotone_Gutenberg::render_duotone_support() instead.
+ *
  * @param  string $block_content Rendered block content.
  * @param  array  $block         Block object.
  * @return string                Filtered block content.
  */
 function gutenberg_render_duotone_support( $block_content, $block ) {
-	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-
-	$duotone_support = false;
-	if ( $block_type && property_exists( $block_type, 'supports' ) ) {
-		$duotone_support = _wp_array_get( $block_type->supports, array( 'color', '__experimentalDuotone' ), false );
-	}
-
-	$has_duotone_attribute = isset( $block['attrs']['style']['color']['duotone'] );
-
-	if (
-		! $duotone_support ||
-		! $has_duotone_attribute
-	) {
-		return $block_content;
-	}
-
-	$colors          = $block['attrs']['style']['color']['duotone'];
-	$filter_key      = is_array( $colors ) ? implode( '-', $colors ) : $colors;
-	$filter_preset   = array(
-		'slug'   => wp_unique_id( sanitize_key( $filter_key . '-' ) ),
-		'colors' => $colors,
-	);
-	$filter_property = gutenberg_get_duotone_filter_property( $filter_preset );
-	$filter_id       = gutenberg_get_duotone_filter_id( $filter_preset );
-
-	$scope     = '.' . $filter_id;
-	$selectors = explode( ',', $duotone_support );
-	$scoped    = array();
-	foreach ( $selectors as $sel ) {
-		$scoped[] = $scope . ' ' . trim( $sel );
-	}
-	$selector = implode( ', ', $scoped );
-
-	// !important is needed because these styles render before global styles,
-	// and they should be overriding the duotone filters set by global styles.
-	$filter_style = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG
-		? $selector . " {\n\tfilter: " . $filter_property . " !important;\n}\n"
-		: $selector . '{filter:' . $filter_property . ' !important;}';
-
-	wp_register_style( $filter_id, false, array(), true, true );
-	wp_add_inline_style( $filter_id, $filter_style );
-	wp_enqueue_style( $filter_id );
-
-	if ( 'unset' !== $colors ) {
-		$filter_svg = gutenberg_get_duotone_filter_svg( $filter_preset );
-		add_action(
-			'wp_footer',
-			static function () use ( $filter_svg, $selector ) {
-				echo $filter_svg;
-
-				/*
-				 * Safari renders elements incorrectly on first paint when the
-				 * SVG filter comes after the content that it is filtering, so
-				 * we force a repaint with a WebKit hack which solves the issue.
-				 */
-				global $is_safari;
-				if ( $is_safari ) {
-					/*
-					 * Simply accessing el.offsetHeight flushes layout and style
-					 * changes in WebKit without having to wait for setTimeout.
-					 */
-					printf(
-						'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
-						wp_json_encode( $selector )
-					);
-				}
-			}
-		);
-	}
-
-	// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
-	return preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $filter_id . ' ',
-		$block_content,
-		1
-	);
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Duotone_Gutenberg::render_duotone_support' );
+	return WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block );
 }
-
-// Register the block support.
-WP_Block_Supports::get_instance()->register(
-	'duotone',
-	array(
-		'register_attribute' => 'gutenberg_register_duotone_support',
-	)
-);
-
-// Remove WordPress core filter to avoid rendering duplicate support elements.
-remove_filter( 'render_block', 'wp_render_duotone_support', 10, 2 );
-add_filter( 'render_block', 'gutenberg_render_duotone_support', 10, 2 );
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 0b6e31db3d66d3..35a41270a19800 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -6,114 +6,261 @@
  */
 
 /**
- * Get the elements class names.
+ * Update the block content with elements class names.
+ *
+ * @deprecated 6.6.0 Use `gutenberg_render_elements_class_name` instead.
  *
- * @param array $block Block object.
- * @return string      The unique class name.
+ * @param  string $block_content Rendered block content.
+ * @return string                Filtered block content.
  */
-function gutenberg_get_elements_class_name( $block ) {
-	return 'wp-elements-' . md5( serialize( $block ) );
+function gutenberg_render_elements_support( $block_content ) {
+	_deprecated_function( __FUNCTION__, '6.6.0', 'gutenberg_render_elements_class_name' );
+	return $block_content;
 }
 
 /**
- * Update the block content with elements class names.
+ * Determines whether an elements class name should be added to the block.
  *
- * @param  string $block_content Rendered block content.
- * @param  array  $block         Block object.
- * @return string                Filtered block content.
+ * @param  array $block   Block object.
+ * @param  array $options Per element type options e.g. whether to skip serialization.
+ *
+ * @return boolean        Whether the block needs an elements class name.
  */
-function gutenberg_render_elements_support( $block_content, $block ) {
-	if ( ! $block_content ) {
-		return $block_content;
+function gutenberg_should_add_elements_class_name( $block, $options ) {
+	if ( ! isset( $block['attrs']['style']['elements'] ) ) {
+		return false;
 	}
 
-	$block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	$element_color_properties = array(
+		'button'  => array(
+			'skip'  => $options['button']['skip'] ?? false,
+			'paths' => array(
+				array( 'button', 'color', 'text' ),
+				array( 'button', 'color', 'background' ),
+				array( 'button', 'color', 'gradient' ),
+			),
+		),
+		'link'    => array(
+			'skip'  => $options['link']['skip'] ?? false,
+			'paths' => array(
+				array( 'link', 'color', 'text' ),
+				array( 'link', ':hover', 'color', 'text' ),
+			),
+		),
+		'heading' => array(
+			'skip'  => $options['heading']['skip'] ?? false,
+			'paths' => array(
+				array( 'heading', 'color', 'text' ),
+				array( 'heading', 'color', 'background' ),
+				array( 'heading', 'color', 'gradient' ),
+				array( 'h1', 'color', 'text' ),
+				array( 'h1', 'color', 'background' ),
+				array( 'h1', 'color', 'gradient' ),
+				array( 'h2', 'color', 'text' ),
+				array( 'h2', 'color', 'background' ),
+				array( 'h2', 'color', 'gradient' ),
+				array( 'h3', 'color', 'text' ),
+				array( 'h3', 'color', 'background' ),
+				array( 'h3', 'color', 'gradient' ),
+				array( 'h4', 'color', 'text' ),
+				array( 'h4', 'color', 'background' ),
+				array( 'h4', 'color', 'gradient' ),
+				array( 'h5', 'color', 'text' ),
+				array( 'h5', 'color', 'background' ),
+				array( 'h5', 'color', 'gradient' ),
+				array( 'h6', 'color', 'text' ),
+				array( 'h6', 'color', 'background' ),
+				array( 'h6', 'color', 'gradient' ),
+			),
+		),
+	);
 
-	if ( $skip_link_color_serialization ) {
-		return $block_content;
-	}
+	$elements_style_attributes = $block['attrs']['style']['elements'];
 
-	$link_color = null;
-	if ( ! empty( $block['attrs'] ) ) {
-		$link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
-	}
+	foreach ( $element_color_properties as $element_config ) {
+		if ( $element_config['skip'] ) {
+			continue;
+		}
 
-	/*
-	* For now we only care about link color.
-	* This code in the future when we have a public API
-	* should take advantage of WP_Theme_JSON_Gutenberg::compute_style_properties
-	* and work for any element and style.
-	*/
-	if ( null === $link_color ) {
-		return $block_content;
+		foreach ( $element_config['paths'] as $path ) {
+			if ( null !== _wp_array_get( $elements_style_attributes, $path, null ) ) {
+				return true;
+			}
+		}
 	}
 
-	$class_name = gutenberg_get_elements_class_name( $block );
-
-	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
-	// Retrieve the opening tag of the first HTML element.
-	$html_element_matches = array();
-	preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
-	$first_element = $html_element_matches[0][0];
-	// If the first HTML element has a class attribute just add the new class
-	// as we do on layout and duotone.
-	if ( str_contains( $first_element, 'class="' ) ) {
-		$content = preg_replace(
-			'/' . preg_quote( 'class="', '/' ) . '/',
-			'class="' . $class_name . ' ',
-			$block_content,
-			1
-		);
-	} else {
-		// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
-		$first_element_offset = $html_element_matches[0][1];
-		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
-	}
-
-	return $content;
+	return false;
 }
 
 /**
- * Render the elements stylesheet.
+ * Render the elements stylesheet and adds elements class name to block as required.
  *
  * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
  * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
  * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
  *
- * @param string|null $pre_render   The pre-rendered content. Default null.
- * @param array       $block The block being rendered.
+ * @since 6.6.0 Element block support class and styles are generated via the `render_block_data` filter instead of `pre_render_block`
+ *
+ * @param array $parsed_block The parsed block.
  *
- * @return null
+ * @return array The same parsed block with elements classname added if appropriate.
  */
-function gutenberg_render_elements_support_styles( $pre_render, $block ) {
-	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$element_block_styles = isset( $block['attrs']['style']['elements'] ) ? $block['attrs']['style']['elements'] : null;
-
+function gutenberg_render_elements_support_styles( $parsed_block ) {
 	/*
-	* For now we only care about link color.
-	*/
-	$skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	 * The generation of element styles and classname were moved to the
+	 * `render_block_data` filter in 6.6.0 to avoid filtered attributes
+	 * breaking the application of the elements CSS class.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/pull/59535.
+	 *
+	 * The change in filter means, the argument types for this function
+	 * have changed and require deprecating.
+	 */
+	if ( is_string( $parsed_block ) ) {
+		_deprecated_argument(
+			__FUNCTION__,
+			'6.6.0',
+			__( 'Use as a `pre_render_block` filter is deprecated. Use with `render_block_data` instead.', 'gutenberg' )
+		);
+	}
+
+	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $parsed_block['blockName'] );
+	$element_block_styles = $parsed_block['attrs']['style']['elements'] ?? null;
+
+	if ( ! $element_block_styles ) {
+		return $parsed_block;
+	}
+
+	$skip_link_color_serialization         = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
+	$skip_heading_color_serialization      = wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' );
+	$skip_button_color_serialization       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' );
+	$skips_all_element_color_serialization = $skip_link_color_serialization &&
+		$skip_heading_color_serialization &&
+		$skip_button_color_serialization;
+
+	if ( $skips_all_element_color_serialization ) {
+		return $parsed_block;
+	}
+
+	$options = array(
+		'button'  => array( 'skip' => $skip_button_color_serialization ),
+		'link'    => array( 'skip' => $skip_link_color_serialization ),
+		'heading' => array( 'skip' => $skip_heading_color_serialization ),
+	);
 
-	if ( $skip_link_color_serialization ) {
-		return null;
+	if ( ! gutenberg_should_add_elements_class_name( $parsed_block, $options ) ) {
+		return $parsed_block;
 	}
-	$class_name        = gutenberg_get_elements_class_name( $block );
-	$link_block_styles = isset( $element_block_styles['link'] ) ? $element_block_styles['link'] : null;
-
-	gutenberg_style_engine_get_styles(
-		$link_block_styles,
-		array(
-			'selector' => ".$class_name a",
-			'context'  => 'block-supports',
-		)
+
+	$class_name         = wp_get_elements_class_name( $parsed_block );
+	$updated_class_name = isset( $parsed_block['attrs']['className'] ) ? $parsed_block['attrs']['className'] . " $class_name" : $class_name;
+
+	_wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );
+
+	// Generate element styles based on selector and store in style engine for enqueuing.
+	$element_types = array(
+		'button'  => array(
+			'selector' => ".$class_name .wp-element-button, .$class_name .wp-block-button__link",
+			'skip'     => $skip_button_color_serialization,
+		),
+		'link'    => array(
+			// :where(:not) matches theme.json selector.
+			'selector'       => ".$class_name a:where(:not(.wp-element-button))",
+			'hover_selector' => ".$class_name a:where(:not(.wp-element-button)):hover",
+			'skip'           => $skip_link_color_serialization,
+		),
+		'heading' => array(
+			'selector' => ".$class_name h1, .$class_name h2, .$class_name h3, .$class_name h4, .$class_name h5, .$class_name h6",
+			'skip'     => $skip_heading_color_serialization,
+			'elements' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ),
+		),
 	);
 
-	return null;
+	foreach ( $element_types as $element_type => $element_config ) {
+		if ( $element_config['skip'] ) {
+			continue;
+		}
+
+		$element_style_object = _wp_array_get( $element_block_styles, array( $element_type ), null );
+
+		// Process primary element type styles.
+		if ( $element_style_object ) {
+			gutenberg_style_engine_get_styles(
+				$element_style_object,
+				array(
+					'selector' => $element_config['selector'],
+					'context'  => 'block-supports',
+				)
+			);
+
+			if ( isset( $element_style_object[':hover'] ) ) {
+				gutenberg_style_engine_get_styles(
+					$element_style_object[':hover'],
+					array(
+						'selector' => $element_config['hover_selector'],
+						'context'  => 'block-supports',
+					)
+				);
+			}
+		}
+
+		// Process related elements e.g. h1-h6 for headings.
+		if ( isset( $element_config['elements'] ) ) {
+			foreach ( $element_config['elements'] as $element ) {
+				$element_style_object = _wp_array_get( $element_block_styles, array( $element ), null );
+
+				if ( $element_style_object ) {
+					gutenberg_style_engine_get_styles(
+						$element_style_object,
+						array(
+							'selector' => ".$class_name $element",
+							'context'  => 'block-supports',
+						)
+					);
+				}
+			}
+		}
+	}
+
+	return $parsed_block;
 }
 
-// Remove WordPress core filters to avoid rendering duplicate elements stylesheet & attaching classes twice.
+/**
+ * Ensure the elements block support class name generated, and added to
+ * block attributes, in the `render_block_data` filter gets applied to the
+ * block's markup.
+ *
+ * @see gutenberg_render_elements_support_styles
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ *
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_elements_class_name( $block_content, $block ) {
+	$class_string = $block['attrs']['className'] ?? '';
+	preg_match( '/\bwp-elements-\S+\b/', $class_string, $matches );
+
+	if ( empty( $matches ) ) {
+		return $block_content;
+	}
+
+	$tags = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $tags->next_tag() ) {
+		$tags->add_class( $matches[0] );
+	}
+
+	return $tags->get_updated_html();
+}
+
+// Remove deprecated WordPress core filters.
 remove_filter( 'render_block', 'wp_render_elements_support', 10, 2 );
 remove_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 );
-add_filter( 'render_block', 'gutenberg_render_elements_support', 10, 2 );
-add_filter( 'pre_render_block', 'gutenberg_render_elements_support_styles', 10, 2 );
+
+// Remove WordPress core filters to avoid rendering duplicate elements stylesheet & attaching classes twice.
+remove_filter( 'render_block', 'wp_render_elements_class_name', 10, 2 );
+remove_filter( 'render_block_data', 'wp_render_elements_support_styles', 10, 1 );
+
+add_filter( 'render_block', 'gutenberg_render_elements_class_name', 10, 2 );
+add_filter( 'render_block_data', 'gutenberg_render_elements_support_styles', 10, 1 );
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index a50e1fb8837178..ddbd1917c30547 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -5,13 +5,196 @@
  * @package gutenberg
  */
 
+/**
+ * Returns layout definitions, keyed by layout type.
+ *
+ * Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
+ * When making changes or additions to layout definitions, the corresponding JavaScript definitions should
+ * also be updated.
+ *
+ * @return array[] Layout definitions.
+ */
+function gutenberg_get_layout_definitions() {
+	$layout_definitions = array(
+		'default'     => array(
+			'name'          => 'default',
+			'slug'          => 'flow',
+			'className'     => 'is-layout-flow',
+			'baseStyles'    => array(
+				array(
+					'selector' => ' > .alignleft',
+					'rules'    => array(
+						'float'               => 'left',
+						'margin-inline-start' => '0',
+						'margin-inline-end'   => '2em',
+					),
+				),
+				array(
+					'selector' => ' > .alignright',
+					'rules'    => array(
+						'float'               => 'right',
+						'margin-inline-start' => '2em',
+						'margin-inline-end'   => '0',
+					),
+				),
+				array(
+					'selector' => ' > .aligncenter',
+					'rules'    => array(
+						'margin-left'  => 'auto !important',
+						'margin-right' => 'auto !important',
+					),
+				),
+			),
+			'spacingStyles' => array(
+				array(
+					'selector' => ' > :first-child',
+					'rules'    => array(
+						'margin-block-start' => '0',
+					),
+				),
+				array(
+					'selector' => ' > :last-child',
+					'rules'    => array(
+						'margin-block-end' => '0',
+					),
+				),
+				array(
+					'selector' => ' > *',
+					'rules'    => array(
+						'margin-block-start' => null,
+						'margin-block-end'   => '0',
+					),
+				),
+			),
+		),
+		'constrained' => array(
+			'name'          => 'constrained',
+			'slug'          => 'constrained',
+			'className'     => 'is-layout-constrained',
+			'baseStyles'    => array(
+				array(
+					'selector' => ' > .alignleft',
+					'rules'    => array(
+						'float'               => 'left',
+						'margin-inline-start' => '0',
+						'margin-inline-end'   => '2em',
+					),
+				),
+				array(
+					'selector' => ' > .alignright',
+					'rules'    => array(
+						'float'               => 'right',
+						'margin-inline-start' => '2em',
+						'margin-inline-end'   => '0',
+					),
+				),
+				array(
+					'selector' => ' > .aligncenter',
+					'rules'    => array(
+						'margin-left'  => 'auto !important',
+						'margin-right' => 'auto !important',
+					),
+				),
+				array(
+					'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
+					'rules'    => array(
+						'max-width'    => 'var(--wp--style--global--content-size)',
+						'margin-left'  => 'auto !important',
+						'margin-right' => 'auto !important',
+					),
+				),
+				array(
+					'selector' => ' > .alignwide',
+					'rules'    => array(
+						'max-width' => 'var(--wp--style--global--wide-size)',
+					),
+				),
+			),
+			'spacingStyles' => array(
+				array(
+					'selector' => ' > :first-child',
+					'rules'    => array(
+						'margin-block-start' => '0',
+					),
+				),
+				array(
+					'selector' => ' > :last-child',
+					'rules'    => array(
+						'margin-block-end' => '0',
+					),
+				),
+				array(
+					'selector' => ' > *',
+					'rules'    => array(
+						'margin-block-start' => null,
+						'margin-block-end'   => '0',
+					),
+				),
+			),
+		),
+		'flex'        => array(
+			'name'          => 'flex',
+			'slug'          => 'flex',
+			'className'     => 'is-layout-flex',
+			'displayMode'   => 'flex',
+			'baseStyles'    => array(
+				array(
+					'selector' => '',
+					'rules'    => array(
+						'flex-wrap'   => 'wrap',
+						'align-items' => 'center',
+					),
+				),
+				array(
+					'selector' => ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
+					'rules'    => array(
+						'margin' => '0',
+					),
+				),
+			),
+			'spacingStyles' => array(
+				array(
+					'selector' => '',
+					'rules'    => array(
+						'gap' => null,
+					),
+				),
+			),
+		),
+		'grid'        => array(
+			'name'          => 'grid',
+			'slug'          => 'grid',
+			'className'     => 'is-layout-grid',
+			'displayMode'   => 'grid',
+			'baseStyles'    => array(
+				array(
+					'selector' => ' > :is(*, div)',  // :is(*, div) instead of just * increases the specificity by 001.
+					'rules'    => array(
+						'margin' => '0',
+					),
+				),
+			),
+			'spacingStyles' => array(
+				array(
+					'selector' => '',
+					'rules'    => array(
+						'gap' => null,
+					),
+				),
+			),
+		),
+	);
+
+	return $layout_definitions;
+}
+
 /**
  * Registers the layout block attribute for block types that support it.
  *
  * @param WP_Block_Type $block_type Block Type.
  */
 function gutenberg_register_layout_support( $block_type ) {
-	$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	$support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
 	if ( $support_layout ) {
 		if ( ! $block_type->attributes ) {
 			$block_type->attributes = array();
@@ -39,7 +222,7 @@ function gutenberg_register_layout_support( $block_type ) {
  * @return string CSS styles on success. Else, empty string.
  */
 function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null ) {
-	$layout_type   = isset( $layout['type'] ) ? $layout['type'] : 'default';
+	$layout_type   = $layout['type'] ?? 'default';
 	$layout_styles = array();
 
 	if ( 'default' === $layout_type ) {
@@ -65,7 +248,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 						),
 					),
 					array(
-						'selector'     => "$selector$selector > * + *",
+						'selector'     => "$selector > * + *",
 						'declarations' => array(
 							'margin-block-start' => $gap_value,
 							'margin-block-end'   => '0',
@@ -83,9 +266,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$wide_max_width_value = $wide_size ? $wide_size : $content_size;
 
 		// Make sure there is a single CSS rule, and all tags are stripped for security.
-		// TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
-		$all_max_width_value  = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
-		$wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
+		$all_max_width_value  = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
+		$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );
 
 		$margin_left  = 'left' === $justify_content ? '0 !important' : 'auto !important';
 		$margin_right = 'right' === $justify_content ? '0 !important' : 'auto !important';
@@ -110,32 +292,40 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					'declarations' => array( 'max-width' => 'none' ),
 				)
 			);
+		}
 
-			if ( isset( $block_spacing ) ) {
-				$block_spacing_values = gutenberg_style_engine_get_styles(
-					array(
-						'spacing' => $block_spacing,
-					)
-				);
+		if ( isset( $block_spacing ) ) {
+			$block_spacing_values = gutenberg_style_engine_get_styles(
+				array(
+					'spacing' => $block_spacing,
+				)
+			);
 
-				/*
-				 * Handle negative margins for alignfull children of blocks with custom padding set.
-				 * They're added separately because padding might only be set on one side.
-				 */
-				if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
-					$padding_right   = $block_spacing_values['declarations']['padding-right'];
-					$layout_styles[] = array(
-						'selector'     => "$selector > .alignfull",
-						'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
-					);
+			/*
+			 * Handle negative margins for alignfull children of blocks with custom padding set.
+			 * They're added separately because padding might only be set on one side.
+			 */
+			if ( isset( $block_spacing_values['declarations']['padding-right'] ) ) {
+				$padding_right = $block_spacing_values['declarations']['padding-right'];
+				// Add unit if 0.
+				if ( '0' === $padding_right ) {
+					$padding_right = '0px';
 				}
-				if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
-					$padding_left    = $block_spacing_values['declarations']['padding-left'];
-					$layout_styles[] = array(
-						'selector'     => "$selector > .alignfull",
-						'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
-					);
+				$layout_styles[] = array(
+					'selector'     => "$selector > .alignfull",
+					'declarations' => array( 'margin-right' => "calc($padding_right * -1)" ),
+				);
+			}
+			if ( isset( $block_spacing_values['declarations']['padding-left'] ) ) {
+				$padding_left = $block_spacing_values['declarations']['padding-left'];
+				// Add unit if 0.
+				if ( '0' === $padding_left ) {
+					$padding_left = '0px';
 				}
+				$layout_styles[] = array(
+					'selector'     => "$selector > .alignfull",
+					'declarations' => array( 'margin-left' => "calc($padding_left * -1)" ),
+				);
 			}
 		}
 
@@ -175,7 +365,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 						),
 					),
 					array(
-						'selector'     => "$selector$selector > * + *",
+						'selector'     => "$selector > * + *",
 						'declarations' => array(
 							'margin-block-start' => $gap_value,
 							'margin-block-end'   => '0',
@@ -200,7 +390,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		);
 
 		if ( 'horizontal' === $layout_orientation ) {
-			$justify_content_options += array( 'space-between' => 'space-between' );
+			$justify_content_options    += array( 'space-between' => 'space-between' );
+			$vertical_alignment_options += array( 'stretch' => 'stretch' );
+		} else {
+			$justify_content_options    += array( 'stretch' => 'stretch' );
+			$vertical_alignment_options += array( 'space-between' => 'space-between' );
 		}
 
 		if ( ! empty( $layout['flexWrap'] ) && 'nowrap' === $layout['flexWrap'] ) {
@@ -215,7 +409,10 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$gap_sides          = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
 
 			foreach ( $gap_sides as $gap_side ) {
-				$process_value = is_string( $gap_value ) ? $gap_value : _wp_array_get( $gap_value, array( $gap_side ), $fallback_gap_value );
+				$process_value = $gap_value;
+				if ( is_array( $gap_value ) ) {
+					$process_value = $gap_value[ $gap_side ] ?? $fallback_gap_value;
+				}
 				// Get spacing CSS variable from preset value if provided.
 				if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
 					$index_to_splice = strrpos( $process_value, '|' ) + 1;
@@ -269,6 +466,80 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					'declarations' => array( 'align-items' => 'flex-start' ),
 				);
 			}
+			if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) {
+				$layout_styles[] = array(
+					'selector'     => $selector,
+					'declarations' => array( 'justify-content' => $vertical_alignment_options[ $layout['verticalAlignment'] ] ),
+				);
+			}
+		}
+	} elseif ( 'grid' === $layout_type ) {
+		// Deal with block gap first so it can be used for responsive computation.
+		$responsive_gap_value = '1.2rem';
+		if ( $has_block_gap_support && isset( $gap_value ) ) {
+			$combined_gap_value = '';
+			$gap_sides          = is_array( $gap_value ) ? array( 'top', 'left' ) : array( 'top' );
+
+			foreach ( $gap_sides as $gap_side ) {
+				$process_value = $gap_value;
+				if ( is_array( $gap_value ) ) {
+					$process_value = $gap_value[ $gap_side ] ?? $fallback_gap_value;
+				}
+				// Get spacing CSS variable from preset value if provided.
+				if ( is_string( $process_value ) && str_contains( $process_value, 'var:preset|spacing|' ) ) {
+					$index_to_splice = strrpos( $process_value, '|' ) + 1;
+					$slug            = _wp_to_kebab_case( substr( $process_value, $index_to_splice ) );
+					$process_value   = "var(--wp--preset--spacing--$slug)";
+				}
+				$combined_gap_value .= "$process_value ";
+			}
+			$gap_value            = trim( $combined_gap_value );
+			$responsive_gap_value = $gap_value;
+		}
+
+		if ( ! empty( $layout['columnCount'] ) && ! empty( $layout['minimumColumnWidth'] ) ) {
+			$max_value       = 'max(' . $layout['minimumColumnWidth'] . ', (100% - (' . $responsive_gap_value . ' * (' . $layout['columnCount'] . ' - 1))) /' . $layout['columnCount'] . ')';
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'grid-template-columns' => 'repeat(auto-fill, minmax(' . $max_value . ', 1fr))',
+					'container-type'        => 'inline-size',
+				),
+			);
+			if ( ! empty( $layout['rowCount'] ) ) {
+				$layout_styles[] = array(
+					'selector'     => $selector,
+					'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(1rem, auto))' ),
+				);
+			}
+		} elseif ( ! empty( $layout['columnCount'] ) ) {
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'grid-template-columns' => 'repeat(' . $layout['columnCount'] . ', minmax(0, 1fr))' ),
+			);
+			if ( ! empty( $layout['rowCount'] ) ) {
+				$layout_styles[] = array(
+					'selector'     => $selector,
+					'declarations' => array( 'grid-template-rows' => 'repeat(' . $layout['rowCount'] . ', minmax(1rem, auto))' ),
+				);
+			}
+		} else {
+			$minimum_column_width = ! empty( $layout['minimumColumnWidth'] ) ? $layout['minimumColumnWidth'] : '12rem';
+
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'grid-template-columns' => 'repeat(auto-fill, minmax(min(' . $minimum_column_width . ', 100%), 1fr))',
+					'container-type'        => 'inline-size',
+				),
+			);
+		}
+
+		if ( $has_block_gap_support && null !== $gap_value && ! $should_skip_gap_serialization ) {
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'gap' => $gap_value ),
+			);
 		}
 	}
 
@@ -292,20 +563,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 }
 
 /**
- * Gets classname from last tag in a string of HTML.
+ * Generates an incremental ID that is independent per each different prefix.
+ *
+ * It is similar to `wp_unique_id`, but each prefix has it's own internal ID
+ * counter to make each prefix independent from each other. The ID starts at 1
+ * and increments on each call. The returned value is not universally unique,
+ * but it is unique across the life of the PHP process and it's stable per
+ * prefix.
  *
- * @param string $html markup to be processed.
- * @return string String of inner wrapper classnames.
+ * @param  string $prefix Prefix for the returned ID.
+ * @return string         Incremental ID per prefix.
  */
-function gutenberg_get_classnames_from_last_tag( $html ) {
-	$tags            = new WP_HTML_Tag_Processor( $html );
-	$last_classnames = '';
-
-	while ( $tags->next_tag() ) {
-		$last_classnames = $tags->get_attribute( 'class' );
+function gutenberg_incremental_id_per_prefix( $prefix = '' ) {
+	static $id_counters = array();
+	if ( ! array_key_exists( $prefix, $id_counters ) ) {
+			$id_counters[ $prefix ] = 0;
 	}
-
-	return (string) $last_classnames;
+	return $prefix . (string) ++$id_counters[ $prefix ];
 }
 
 /**
@@ -316,40 +590,189 @@ function gutenberg_get_classnames_from_last_tag( $html ) {
  * @return string                Filtered block content.
  */
 function gutenberg_render_layout_support_flag( $block_content, $block ) {
-	$block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	$block_type            = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_supports_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	// If there is any value in style -> layout, the block has a child layout.
+	$child_layout = $block['attrs']['style']['layout'] ?? null;
 
-	if ( ! $support_layout ) {
+	if ( ! $block_supports_layout && ! $child_layout ) {
 		return $block_content;
 	}
 
-	$block_gap              = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) );
-	$global_layout_settings = gutenberg_get_global_settings( array( 'layout' ) );
-	$has_block_gap_support  = isset( $block_gap ) ? null !== $block_gap : false;
-	$default_block_layout   = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
-	$used_layout            = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
+	$outer_class_names = array();
+
+	// Child layout specific logic.
+	if ( $child_layout ) {
+		$container_content_class   = wp_unique_prefixed_id( 'wp-container-content-' );
+		$child_layout_declarations = array();
+		$child_layout_styles       = array();
+
+		$self_stretch = isset( $block['attrs']['style']['layout']['selfStretch'] ) ? $block['attrs']['style']['layout']['selfStretch'] : null;
+
+		if ( 'fixed' === $self_stretch && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+			$child_layout_declarations['flex-basis'] = $block['attrs']['style']['layout']['flexSize'];
+			$child_layout_declarations['box-sizing'] = 'border-box';
+		} elseif ( 'fill' === $self_stretch ) {
+			$child_layout_declarations['flex-grow'] = '1';
+		}
+
+		$column_start = isset( $block['attrs']['style']['layout']['columnStart'] ) ? $block['attrs']['style']['layout']['columnStart'] : null;
+		$column_span  = isset( $block['attrs']['style']['layout']['columnSpan'] ) ? $block['attrs']['style']['layout']['columnSpan'] : null;
+		if ( $column_start && $column_span ) {
+			$child_layout_declarations['grid-column'] = "$column_start / span $column_span";
+		} elseif ( $column_start ) {
+			$child_layout_declarations['grid-column'] = "$column_start";
+		} elseif ( $column_span ) {
+			$child_layout_declarations['grid-column'] = "span $column_span";
+		}
 
-	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
-		if ( ! $global_layout_settings ) {
-			return $block_content;
+		$row_start = isset( $block['attrs']['style']['layout']['rowStart'] ) ? $block['attrs']['style']['layout']['rowStart'] : null;
+		$row_span  = isset( $block['attrs']['style']['layout']['rowSpan'] ) ? $block['attrs']['style']['layout']['rowSpan'] : null;
+		if ( $row_start && $row_span ) {
+			$child_layout_declarations['grid-row'] = "$row_start / span $row_span";
+		} elseif ( $row_start ) {
+			$child_layout_declarations['grid-row'] = "$row_start";
+		} elseif ( $row_span ) {
+			$child_layout_declarations['grid-row'] = "span $row_span";
 		}
+
+		$child_layout_styles[] = array(
+			'selector'     => ".$container_content_class",
+			'declarations' => $child_layout_declarations,
+		);
+
+		$minimum_column_width = isset( $block['parentLayout']['minimumColumnWidth'] ) ? $block['parentLayout']['minimumColumnWidth'] : null;
+		$column_count         = isset( $block['parentLayout']['columnCount'] ) ? $block['parentLayout']['columnCount'] : null;
+
+		/*
+		 * If columnSpan or columnStart is set, and the parent grid is responsive, i.e. if it has a minimumColumnWidth set,
+		 * the columnSpan should be removed once the grid is smaller than the span, and columnStart should be removed
+		 * once the grid has less columns than the start.
+		 * If there's a minimumColumnWidth, the grid is responsive. But if the minimumColumnWidth value wasn't changed, it won't be set.
+		 * In that case, if columnCount doesn't exist, we can assume that the grid is responsive.
+		 */
+		if ( ( $column_span || $column_start ) && ( $minimum_column_width || ! $column_count ) ) {
+			$column_span_number  = floatval( $column_span );
+			$column_start_number = floatval( $column_start );
+			$parent_column_width = $minimum_column_width ? $minimum_column_width : '12rem';
+			$parent_column_value = floatval( $parent_column_width );
+			$parent_column_unit  = explode( $parent_column_value, $parent_column_width );
+
+			$num_cols_to_break_at = 2;
+			if ( $column_span_number && $column_start_number ) {
+				$num_cols_to_break_at = $column_start_number + $column_span_number - 1;
+			} elseif ( $column_span_number ) {
+				$num_cols_to_break_at = $column_span_number;
+			} else {
+				$num_cols_to_break_at = $column_start_number;
+			}
+
+			/*
+			 * If there is no unit, the width has somehow been mangled so we reset both unit and value
+			 * to defaults.
+			 * Additionally, the unit should be one of px, rem or em, so that also needs to be checked.
+			 */
+			if ( count( $parent_column_unit ) <= 1 ) {
+				$parent_column_unit  = 'rem';
+				$parent_column_value = 12;
+			} else {
+				$parent_column_unit = $parent_column_unit[1];
+
+				if ( ! in_array( $parent_column_unit, array( 'px', 'rem', 'em' ), true ) ) {
+					$parent_column_unit = 'rem';
+				}
+			}
+
+			/*
+			 * A default gap value is used for this computation because custom gap values may not be
+			 * viable to use in the computation of the container query value.
+			 */
+			$default_gap_value             = 'px' === $parent_column_unit ? 24 : 1.5;
+			$container_query_value         = $num_cols_to_break_at * $parent_column_value + ( $num_cols_to_break_at - 1 ) * $default_gap_value;
+			$minimum_container_query_value = $parent_column_value * 2 + $default_gap_value - 1;
+			$container_query_value         = max( $container_query_value, $minimum_container_query_value ) . $parent_column_unit;
+			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
+			$grid_column_value = $column_span && $column_span > 1 ? '1/-1' : 'auto';
+
+			$child_layout_styles[] = array(
+				'rules_group'  => "@container (max-width: $container_query_value )",
+				'selector'     => ".$container_content_class",
+				'declarations' => array(
+					'grid-column' => $grid_column_value,
+					'grid-row'    => 'auto',
+				),
+			);
+		}
+
+		/*
+		 * Add to the style engine store to enqueue and render layout styles.
+		 * Return styles here just to check if any exist.
+		 */
+		$child_css = gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$child_layout_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
+		);
+
+		if ( $child_css ) {
+			$outer_class_names[] = $container_content_class;
+		}
+	}
+
+	// Prep the processor for modifying the block output.
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+
+	// Having no tags implies there are no tags onto which to add class names.
+	if ( ! $processor->next_tag() ) {
+		return $block_content;
+	}
+
+	/*
+	 * A block may not support layout but still be affected by a parent block's layout.
+	 *
+	 * In these cases add the appropriate class names and then return early; there's
+	 * no need to investigate on this block whether additional layout constraints apply.
+	 */
+	if ( ! $block_supports_layout && ! empty( $outer_class_names ) ) {
+		foreach ( $outer_class_names as $class_name ) {
+			$processor->add_class( $class_name );
+		}
+		return $processor->get_updated_html();
+	} elseif ( ! $block_supports_layout ) {
+		// Ensure layout classnames are not injected if there is no layout support.
+		return $block_content;
+	}
+
+	$global_settings = gutenberg_get_global_settings();
+	$fallback_layout = $block_type->supports['layout']['default'] ?? array();
+	if ( empty( $fallback_layout ) ) {
+		$fallback_layout = $block_type->supports['__experimentalLayout']['default'] ?? array();
 	}
+	$used_layout = $block['attrs']['layout'] ?? $fallback_layout;
 
 	$class_names        = array();
-	$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
-	$container_class    = wp_unique_id( 'wp-container-' );
-	$layout_classname   = '';
+	$layout_definitions = gutenberg_get_layout_definitions();
+
+	/*
+	* We use an incremental ID that is independent per prefix to make sure that
+	* rendering different numbers of blocks doesn't affect the IDs of other
+	* blocks. We need this to make the CSS class names stable across paginations
+	* for features like the enhanced pagination of the Query block.
+	*/
+	$container_class = gutenberg_incremental_id_per_prefix(
+		'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
+	);
 
 	// Set the correct layout type for blocks using legacy content width.
 	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
 		$used_layout['type'] = 'constrained';
 	}
 
-	if (
-		gutenberg_get_global_settings( array( 'useRootPaddingAwareAlignments' ) ) &&
-		isset( $used_layout['type'] ) &&
-		'constrained' === $used_layout['type']
-	) {
+	$root_padding_aware_alignments = $global_settings['useRootPaddingAwareAlignments'] ?? false;
+
+	if ( $root_padding_aware_alignments && isset( $used_layout['type'] ) && 'constrained' === $used_layout['type'] ) {
 		$class_names[] = 'has-global-padding';
 	}
 
@@ -373,9 +796,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	// Get classname for layout type.
 	if ( isset( $used_layout['type'] ) ) {
-		$layout_classname = _wp_array_get( $layout_definitions, array( $used_layout['type'], 'className' ), '' );
+		$layout_classname = $layout_definitions[ $used_layout['type'] ]['className'] ?? '';
 	} else {
-		$layout_classname = _wp_array_get( $layout_definitions, array( 'default', 'className' ), '' );
+		$layout_classname = $layout_definitions['default']['className'] ?? '';
 	}
 
 	if ( $layout_classname && is_string( $layout_classname ) ) {
@@ -388,7 +811,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	 */
 	if ( ! current_theme_supports( 'disable-layout-styles' ) ) {
 
-		$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
+		$gap_value = $block['attrs']['style']['spacing']['blockGap'] ?? null;
 
 		/*
 		 * Skip if gap value contains unsupported characters.
@@ -403,17 +826,20 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
 		}
 
-		$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
-		$block_spacing      = _wp_array_get( $block, array( 'attrs', 'style', 'spacing' ), null );
+		$fallback_gap_value = $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ?? '0.5em';
+		$block_spacing      = $block['attrs']['style']['spacing'] ?? null;
 
 		/*
 		 * If a block's block.json skips serialization for spacing or spacing.blockGap,
 		 * don't apply the user-defined value to the styles.
 		 */
-		$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
+		$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
+
+		$block_gap             = $global_settings['spacing']['blockGap'] ?? null;
+		$has_block_gap_support = isset( $block_gap );
 
 		$style = gutenberg_get_layout_style(
-			".$container_class.$container_class",
+			".$container_class",
 			$used_layout,
 			$has_block_gap_support,
 			$gap_value,
@@ -428,26 +854,127 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		}
 	}
 
-	/**
-	* The first chunk of innerContent contains the block markup up until the inner blocks start.
-	* We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
-	*/
-	$inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? gutenberg_get_classnames_from_last_tag( $block['innerContent'][0] ) : '';
+	// Add combined layout and block classname for global styles to hook onto.
+	$split_block_name = explode( '/', $block['blockName'] );
+	$full_block_name  = 'core' === $split_block_name[0] ? end( $split_block_name ) : implode( '-', $split_block_name );
+	$class_names[]    = 'wp-block-' . $full_block_name . '-' . $layout_classname;
 
-	$content = new WP_HTML_Tag_Processor( $block_content );
-	if ( $inner_content_classnames ) {
-		$content->next_tag( array( 'class_name' => $inner_content_classnames ) );
-		foreach ( $class_names as $class_name ) {
-			$content->add_class( $class_name );
+	// Add classes to the outermost HTML tag if necessary.
+	if ( ! empty( $outer_class_names ) ) {
+		foreach ( $outer_class_names as $outer_class_name ) {
+			$processor->add_class( $outer_class_name );
 		}
-	} else {
-		$content->next_tag();
-		$content->add_class( implode( ' ', $class_names ) );
 	}
 
-	return (string) $content;
+	/*
+	 * Attempts to refer to the inner-block wrapping element by its class attribute.
+	 *
+	 * When examining a block's inner content, if a block has inner blocks, then
+	 * the first content item will likely be a text (HTML) chunk immediately
+	 * preceding the inner blocks. The last HTML tag in that chunk would then be
+	 * an opening tag for an element that wraps the inner blocks.
+	 *
+	 * There's no reliable way to associate this wrapper in $block_content because
+	 * it may have changed during the rendering pipeline (as inner contents is
+	 * provided before rendering) and through previous filters. In many cases,
+	 * however, the `class` attribute will be a good-enough identifier, so this
+	 * code finds the last tag in that chunk and stores the `class` attribute
+	 * so that it can be used later when working through the rendered block output
+	 * to identify the wrapping element and add the remaining class names to it.
+	 *
+	 * It's also possible that no inner block wrapper even exists. If that's the
+	 * case this code could apply the class names to an invalid element.
+	 *
+	 * Example:
+	 *
+	 *     $block['innerBlocks']  = array( $list_item );
+	 *     $block['innerContent'] = array( '<ul class="list-wrapper is-unordered">', null, '</ul>' );
+	 *
+	 *     // After rendering, the initial contents may have been modified by other renderers or filters.
+	 *     $block_content = <<<HTML
+	 *         <figure>
+	 *             <ul class="annotated-list list-wrapper is-unordered">
+	 *                 <li>Code</li>
+	 *             </ul><figcaption>It's a list!</figcaption>
+	 *         </figure>
+	 *     HTML;
+	 *
+	 * Although it is possible that the original block-wrapper classes are changed in $block_content
+	 * from how they appear in $block['innerContent'], it's likely that the original class attributes
+	 * are still present in the wrapper as they are in this example. Frequently, additional classes
+	 * will also be present; rarely should classes be removed.
+	 *
+	 * @todo Find a better way to match the first inner block. If it's possible to identify where the
+	 *        first inner block starts, then it will be possible to find the last tag before it starts
+	 *        and then that tag, if an opening tag, can be solidly identified as a wrapping element.
+	 *        Can some unique value or class or ID be added to the inner blocks when they process
+	 *        so that they can be extracted here safely without guessing? Can the block rendering function
+	 *        return information about where the rendered inner blocks start?
+	 *
+	 * @var string|null
+	 */
+	$inner_block_wrapper_classes = null;
+	$first_chunk                 = $block['innerContent'][0] ?? null;
+	if ( is_string( $first_chunk ) && count( $block['innerContent'] ) > 1 ) {
+		$first_chunk_processor = new WP_HTML_Tag_Processor( $first_chunk );
+		while ( $first_chunk_processor->next_tag() ) {
+			$class_attribute = $first_chunk_processor->get_attribute( 'class' );
+			if ( is_string( $class_attribute ) && ! empty( $class_attribute ) ) {
+				$inner_block_wrapper_classes = $class_attribute;
+			}
+		}
+	}
+
+	/*
+	 * If necessary, advance to what is likely to be an inner block wrapper tag.
+	 *
+	 * This advances until it finds the first tag containing the original class
+	 * attribute from above. If none is found it will scan to the end of the block
+	 * and fail to add any class names.
+	 *
+	 * If there is no block wrapper it won't advance at all, in which case the
+	 * class names will be added to the first and outermost tag of the block.
+	 * For cases where this outermost tag is the only tag surrounding inner
+	 * blocks then the outer wrapper and inner wrapper are the same.
+	 */
+	do {
+		if ( ! $inner_block_wrapper_classes ) {
+			break;
+		}
+
+		$class_attribute = $processor->get_attribute( 'class' );
+		if ( is_string( $class_attribute ) && str_contains( $class_attribute, $inner_block_wrapper_classes ) ) {
+			break;
+		}
+	} while ( $processor->next_tag() );
+
+	// Add the remaining class names.
+	foreach ( $class_names as $class_name ) {
+		$processor->add_class( $class_name );
+	}
+
+	return $processor->get_updated_html();
 }
 
+/*
+ * Add a `render_block_data` filter to fetch the parent block layout data.
+ */
+add_filter(
+	'render_block_data',
+	function ( $parsed_block, $source_block, $parent_block ) {
+		/*
+		 * Check if the parent block exists and if it has a layout attribute.
+		 * If it does, add the parent layout to the parsed block.
+		 */
+		if ( $parent_block && isset( $parent_block->parsed_block['attrs']['layout'] ) ) {
+			$parsed_block['parentLayout'] = $parent_block->parsed_block['attrs']['layout'];
+		}
+		return $parsed_block;
+	},
+	10,
+	3
+);
+
 // Register the block support. (overrides core one).
 WP_Block_Supports::get_instance()->register(
 	'layout',
@@ -479,22 +1006,51 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
 	if (
 		wp_theme_has_theme_json() ||
 		1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
-		( isset( $block['attrs']['layout']['type'] ) && 'flex' === $block['attrs']['layout']['type'] )
+		( isset( $block['attrs']['layout']['type'] ) && ( 'flex' === $block['attrs']['layout']['type'] || 'grid' === $block['attrs']['layout']['type'] ) )
 	) {
 		return $block_content;
 	}
 
-	$replace_regex   = sprintf(
+	/*
+	 * This filter runs after the layout classnames have been added to the block, so they
+	 * have to be removed from the outer wrapper and then added to the inner.
+	*/
+	$layout_classes = array();
+	$processor      = new WP_HTML_Tag_Processor( $block_content );
+
+	if ( $processor->next_tag( array( 'class_name' => 'wp-block-group' ) ) ) {
+		foreach ( $processor->class_list() as $class_name ) {
+			if ( str_contains( $class_name, 'layout' ) ) {
+				array_push( $layout_classes, $class_name );
+				$processor->remove_class( $class_name );
+			}
+		}
+	}
+
+	$content_without_layout_classes = $processor->get_updated_html();
+	$replace_regex                  = sprintf(
 		'/(^\s*<%1$s\b[^>]*wp-block-group[^>]*>)(.*)(<\/%1$s>\s*$)/ms',
 		preg_quote( $tag_name, '/' )
 	);
-	$updated_content = preg_replace_callback(
+	$updated_content                = preg_replace_callback(
 		$replace_regex,
-		function( $matches ) {
+		static function ( $matches ) {
 			return $matches[1] . '<div class="wp-block-group__inner-container">' . $matches[2] . '</div>' . $matches[3];
 		},
-		$block_content
+		$content_without_layout_classes
 	);
+
+	// Add layout classes to inner wrapper.
+	if ( ! empty( $layout_classes ) ) {
+		$processor = new WP_HTML_Tag_Processor( $updated_content );
+		if ( $processor->next_tag( array( 'class_name' => 'wp-block-group__inner-container' ) ) ) {
+			foreach ( $layout_classes as $class_name ) {
+				$processor->add_class( $class_name );
+			}
+		}
+		$updated_content = $processor->get_updated_html();
+	}
+
 	return $updated_content;
 }
 
diff --git a/lib/block-supports/position.php b/lib/block-supports/position.php
new file mode 100644
index 00000000000000..930e726d123211
--- /dev/null
+++ b/lib/block-supports/position.php
@@ -0,0 +1,148 @@
+<?php
+/**
+ * Position block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the style block attribute for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_position_support( $block_type ) {
+	$has_position_support = block_has_support( $block_type, array( 'position' ), false );
+
+	// Set up attributes and styles within that if needed.
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_position_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+}
+
+/**
+ * Renders position styles to the block wrapper.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_render_position_support( $block_content, $block ) {
+	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$has_position_support = block_has_support( $block_type, array( 'position' ), false );
+
+	if (
+		! $has_position_support ||
+		empty( $block['attrs']['style']['position'] )
+	) {
+		return $block_content;
+	}
+
+	$global_settings          = gutenberg_get_global_settings();
+	$theme_has_sticky_support = $global_settings['position']['sticky'] ?? false;
+	$theme_has_fixed_support  = $global_settings['position']['fixed'] ?? false;
+
+	// Only allow output for position types that the theme supports.
+	$allowed_position_types = array();
+	if ( true === $theme_has_sticky_support ) {
+		$allowed_position_types[] = 'sticky';
+	}
+	if ( true === $theme_has_fixed_support ) {
+		$allowed_position_types[] = 'fixed';
+	}
+
+	$style_attribute = $block['attrs']['style'] ?? null;
+	$class_name      = wp_unique_id( 'wp-container-' );
+	$selector        = ".$class_name";
+	$position_styles = array();
+	$position_type   = $style_attribute['position']['type'] ?? '';
+	$wrapper_classes = array();
+
+	if (
+		in_array( $position_type, $allowed_position_types, true )
+	) {
+		$wrapper_classes[] = $class_name;
+		$wrapper_classes[] = 'is-position-' . $position_type;
+		$sides             = array( 'top', 'right', 'bottom', 'left' );
+
+		foreach ( $sides as $side ) {
+			$side_value = $style_attribute['position'][ $side ] ?? null;
+			if ( null !== $side_value ) {
+				/*
+				 * For fixed or sticky top positions,
+				 * ensure the value includes an offset for the logged in admin bar.
+				 */
+				if (
+					'top' === $side &&
+					( 'fixed' === $position_type || 'sticky' === $position_type )
+				) {
+					// Ensure 0 values can be used in `calc()` calculations.
+					if ( '0' === $side_value || 0 === $side_value ) {
+						$side_value = '0px';
+					}
+
+					// Ensure current side value also factors in the height of the logged in admin bar.
+					$side_value = "calc($side_value + var(--wp-admin--admin-bar--position-offset, 0px))";
+				}
+
+				$position_styles[] =
+					array(
+						'selector'     => $selector,
+						'declarations' => array(
+							$side => $side_value,
+						),
+					);
+			}
+		}
+
+		$position_styles[] =
+			array(
+				'selector'     => $selector,
+				'declarations' => array(
+					'position' => $position_type,
+					'z-index'  => '10', // TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+				),
+			);
+	}
+
+	if ( ! empty( $position_styles ) ) {
+		/*
+		 * Add to the style engine store to enqueue and render position styles.
+		 */
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$position_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
+		);
+
+		// Inject class name to block container markup.
+		$content = new WP_HTML_Tag_Processor( $block_content );
+		$content->next_tag();
+		foreach ( $wrapper_classes as $class ) {
+			$content->add_class( $class );
+		}
+		return (string) $content;
+	}
+
+	return $block_content;
+}
+
+// Register the block support. (overrides core one).
+WP_Block_Supports::get_instance()->register(
+	'position',
+	array(
+		'register_attribute' => 'gutenberg_register_position_support',
+	)
+);
+
+if ( function_exists( 'wp_render_position_support' ) ) {
+	remove_filter( 'render_block', 'wp_render_position_support' );
+}
+add_filter( 'render_block', 'gutenberg_render_position_support', 10, 2 );
diff --git a/lib/block-supports/settings.php b/lib/block-supports/settings.php
index 60900629c04cf1..b175fe778ce1b0 100644
--- a/lib/block-supports/settings.php
+++ b/lib/block-supports/settings.php
@@ -5,18 +5,6 @@
  * @package gutenberg
  */
 
-/**
- * Get the class name used on block level presets.
- *
- * @access private
- *
- * @param array $block Block object.
- * @return string      The unique class name.
- */
-function _gutenberg_get_presets_class_name( $block ) {
-	return 'wp-settings-' . md5( serialize( $block ) );
-}
-
 /**
  * Update the block content with block level presets class name.
  *
@@ -38,34 +26,19 @@ function _gutenberg_add_block_level_presets_class( $block_content, $block ) {
 	}
 
 	// return early if no settings are found on the block attributes.
-	$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
+	$block_settings = $block['attrs']['settings'] ?? null;
 	if ( empty( $block_settings ) ) {
 		return $block_content;
 	}
 
-	$class_name = _gutenberg_get_presets_class_name( $block );
-
 	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
-	// Retrieve the opening tag of the first HTML element.
-	$html_element_matches = array();
-	preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
-	$first_element = $html_element_matches[0][0];
-	// If the first HTML element has a class attribute just add the new class
-	// as we do on layout and duotone.
-	if ( strpos( $first_element, 'class="' ) !== false ) {
-		$content = preg_replace(
-			'/' . preg_quote( 'class="', '/' ) . '/',
-			'class="' . $class_name . ' ',
-			$block_content,
-			1
-		);
-	} else {
-		// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
-		$first_element_offset = $html_element_matches[0][1];
-		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
+	// Add the class name to the first element, presuming it's the wrapper, if it exists.
+	$tags = new WP_HTML_Tag_Processor( $block_content );
+	if ( $tags->next_tag() ) {
+		$tags->add_class( _wp_get_presets_class_name( $block ) );
 	}
 
-	return $content;
+	return $tags->get_updated_html();
 }
 
 /**
@@ -86,12 +59,12 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) {
 	}
 
 	// return early if no settings are found on the block attributes.
-	$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
+	$block_settings = $block['attrs']['settings'] ?? null;
 	if ( empty( $block_settings ) ) {
 		return null;
 	}
 
-	$class_name = '.' . _gutenberg_get_presets_class_name( $block );
+	$class_name = '.' . _wp_get_presets_class_name( $block );
 
 	// the root selector for preset variables needs to target every possible block selector
 	// in order for the general setting to override any bock specific setting of a parent block or
@@ -100,14 +73,17 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) {
 	$registry                = WP_Block_Type_Registry::get_instance();
 	$blocks                  = $registry->get_all_registered();
 	foreach ( $blocks as $block_type ) {
-		if (
-			isset( $block_type->supports['__experimentalSelector'] ) &&
-			is_string( $block_type->supports['__experimentalSelector'] )
-		) {
-			$variables_root_selector .= ',' . $block_type->supports['__experimentalSelector'];
+		// We only want to append selectors for block's using custom selectors
+		// i.e. not `wp-block-<name>`.
+		$has_custom_selector =
+			( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) ||
+			( isset( $block_type->selectors['root'] ) && is_string( $block_type->selectors['root'] ) );
+
+		if ( $has_custom_selector ) {
+			$variables_root_selector .= ',' . wp_get_block_css_selector( $block_type );
 		}
 	}
-	$variables_root_selector = WP_Theme_JSON_6_1::scope_selector( $class_name, $variables_root_selector );
+	$variables_root_selector = WP_Theme_JSON_Gutenberg::scope_selector( $class_name, $variables_root_selector );
 
 	// Remove any potentially unsafe styles.
 	$theme_json_shape  = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
@@ -130,7 +106,7 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) {
 		)
 	);
 
-	// include preset css classes on the the stylesheet.
+	// include preset css classes on the stylesheet.
 	$styles .= $theme_json_object->get_stylesheet(
 		array( 'presets' ),
 		null,
@@ -141,11 +117,18 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) {
 	);
 
 	if ( ! empty( $styles ) ) {
-		gutenberg_enqueue_block_support_styles( $styles );
+		/*
+		 * This method is deprecated since WordPress 6.2.
+		 * We could enqueue these styles separately,
+		 * or print them out with other settings presets.
+		 */
+		wp_enqueue_block_support_styles( $styles );
 	}
 
 	return null;
 }
-
+// Remove WordPress core filter to avoid rendering duplicate settings style blocks.
+remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 );
+remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 );
 add_filter( 'render_block', '_gutenberg_add_block_level_presets_class', 10, 2 );
 add_filter( 'pre_render_block', '_gutenberg_add_block_level_preset_styles', 10, 2 );
diff --git a/lib/block-supports/shadow.php b/lib/block-supports/shadow.php
new file mode 100644
index 00000000000000..25c365067e0c32
--- /dev/null
+++ b/lib/block-supports/shadow.php
@@ -0,0 +1,79 @@
+<?php
+/**
+ * Shadow block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the style and shadow block attributes for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_shadow_support( $block_type ) {
+	$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
+
+	if ( ! $has_shadow_support ) {
+		return;
+	}
+
+	if ( ! $block_type->attributes ) {
+		$block_type->attributes = array();
+	}
+
+	if ( $has_shadow_support && ! array_key_exists( 'style', $block_type->attributes ) ) {
+		$block_type->attributes['style'] = array(
+			'type' => 'object',
+		);
+	}
+
+	if ( $has_shadow_support && ! array_key_exists( 'shadow', $block_type->attributes ) ) {
+		$block_type->attributes['shadow'] = array(
+			'type' => 'string',
+		);
+	}
+}
+
+/**
+ * Add CSS classes and inline styles for shadow features to the incoming attributes array.
+ * This will be applied to the block markup in
+ * the front-end.
+ *
+ * @param  WP_Block_Type $block_type       Block type.
+ * @param  array         $block_attributes Block attributes.
+ *
+ * @return array Shadow CSS classes and inline styles.
+ */
+function gutenberg_apply_shadow_support( $block_type, $block_attributes ) {
+	$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
+
+	if (
+		! $has_shadow_support ||
+		wp_should_skip_block_supports_serialization( $block_type, 'shadow' )
+	) {
+		return array();
+	}
+
+	$shadow_block_styles = array();
+
+	$custom_shadow                 = $block_attributes['style']['shadow'] ?? null;
+	$shadow_block_styles['shadow'] = $custom_shadow;
+
+	$attributes = array();
+	$styles     = gutenberg_style_engine_get_styles( $shadow_block_styles );
+
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+
+	return $attributes;
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register(
+	'shadow',
+	array(
+		'register_attribute' => 'gutenberg_register_shadow_support',
+		'apply'              => 'gutenberg_apply_shadow_support',
+	)
+);
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 46ba2863a96828..86e6c750185a56 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -39,7 +39,7 @@ function gutenberg_register_spacing_support( $block_type ) {
  * @return array Block spacing CSS classes and inline styles.
  */
 function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
-	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing' ) ) {
+	if ( wp_should_skip_block_supports_serialization( $block_type, 'spacing' ) ) {
 		return array();
 	}
 
@@ -52,12 +52,19 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
 		return $attributes;
 	}
 
-	$skip_padding                    = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
-	$skip_margin                     = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
-	$spacing_block_styles            = array();
-	$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
-	$spacing_block_styles['margin']  = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
-	$styles                          = gutenberg_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
+	$skip_padding         = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'padding' );
+	$skip_margin          = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'margin' );
+	$spacing_block_styles = array(
+		'padding' => null,
+		'margin'  => null,
+	);
+	if ( $has_padding_support && ! $skip_padding ) {
+		$spacing_block_styles['padding'] = $block_styles['spacing']['padding'] ?? null;
+	}
+	if ( $has_margin_support && ! $skip_margin ) {
+		$spacing_block_styles['margin'] = $block_styles['spacing']['margin'] ?? null;
+	}
+	$styles = gutenberg_style_engine_get_styles( array( 'spacing' => $spacing_block_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {
 		$attributes['style'] = $styles['css'];
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 01d223b84281eb..21086b94f15c1a 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -11,23 +11,26 @@
  * @param WP_Block_Type $block_type Block Type.
  */
 function gutenberg_register_typography_support( $block_type ) {
-	if ( ! property_exists( $block_type, 'supports' ) ) {
+	if ( ! $block_type instanceof WP_Block_Type ) {
 		return;
 	}
 
-	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	$typography_supports = $block_type->supports['typography'] ?? false;
 	if ( ! $typography_supports ) {
 		return;
 	}
 
-	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
-	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
-	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
-	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
-	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
+	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
+	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
+	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
+	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
+	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
+	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
+	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	$has_typography_support = $has_font_family_support
 		|| $has_font_size_support
@@ -35,8 +38,11 @@ function gutenberg_register_typography_support( $block_type ) {
 		|| $has_font_weight_support
 		|| $has_letter_spacing_support
 		|| $has_line_height_support
+		|| $has_text_align_support
+		|| $has_text_columns_support
 		|| $has_text_decoration_support
-		|| $has_text_transform_support;
+		|| $has_text_transform_support
+		|| $has_writing_mode_support;
 
 	if ( ! $block_type->attributes ) {
 		$block_type->attributes = array();
@@ -72,37 +78,43 @@ function gutenberg_register_typography_support( $block_type ) {
  * @return array Typography CSS classes and inline styles.
  */
 function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
-	if ( ! property_exists( $block_type, 'supports' ) ) {
+	if ( ! $block_type instanceof WP_Block_Type ) {
 		return array();
 	}
 
-	$typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+	$typography_supports = $block_type->supports['typography'] ?? false;
 	if ( ! $typography_supports ) {
 		return array();
 	}
 
-	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'typography' ) ) {
+	if ( wp_should_skip_block_supports_serialization( $block_type, 'typography' ) ) {
 		return array();
 	}
 
-	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
-	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
-	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
-	$has_font_weight_support     = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
-	$has_letter_spacing_support  = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
-	$has_line_height_support     = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
-	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
-	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
+	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
+	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
+	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
+	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
+	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
+	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
+	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	// Whether to skip individual block support features.
-	$should_skip_font_size       = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
-	$should_skip_font_family     = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
-	$should_skip_font_style      = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
-	$should_skip_font_weight     = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
-	$should_skip_line_height     = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
-	$should_skip_text_decoration = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
-	$should_skip_text_transform  = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
-	$should_skip_letter_spacing  = gutenberg_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
+	$should_skip_font_size       = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
+	$should_skip_font_family     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
+	$should_skip_font_style      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
+	$should_skip_font_weight     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
+	$should_skip_line_height     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
+	$should_skip_text_align      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' );
+	$should_skip_text_columns    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
+	$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
+	$should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
+	$should_skip_letter_spacing  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
+	$should_skip_writing_mode    = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
 
 	$typography_block_styles = array();
 	if ( $has_font_size_support && ! $should_skip_font_size ) {
@@ -132,7 +144,15 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	}
 
 	if ( $has_line_height_support && ! $should_skip_line_height ) {
-			$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ), null );
+			$typography_block_styles['lineHeight'] = $block_attributes['style']['typography']['lineHeight'] ?? null;
+	}
+
+	if ( $has_text_align_support && ! $should_skip_text_align ) {
+			$typography_block_styles['textAlign'] = $block_attributes['style']['typography']['textAlign'] ?? null;
+	}
+
+	if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
+		$typography_block_styles['textColumns'] = $block_attributes['style']['typography']['textColumns'] ?? null;
 	}
 
 	if ( $has_text_decoration_support && ! $should_skip_text_decoration && isset( $block_attributes['style']['typography']['textDecoration'] ) ) {
@@ -150,14 +170,27 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 			gutenberg_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['letterSpacing'], 'letter-spacing' );
 	}
 
+	if ( $has_writing_mode_support && ! $should_skip_writing_mode && isset( $block_attributes['style']['typography']['writingMode'] ) ) {
+		$typography_block_styles['writingMode'] = $block_attributes['style']['typography']['writingMode'] ?? null;
+	}
+
 	$attributes = array();
+	$classnames = array();
 	$styles     = gutenberg_style_engine_get_styles(
 		array( 'typography' => $typography_block_styles ),
 		array( 'convert_vars_to_classnames' => true )
 	);
 
 	if ( ! empty( $styles['classnames'] ) ) {
-		$attributes['class'] = $styles['classnames'];
+		$classnames[] = $styles['classnames'];
+	}
+
+	if ( $has_text_align_support && ! $should_skip_text_align && isset( $block_attributes['style']['typography']['textAlign'] ) ) {
+		$classnames[] = 'has-text-align-' . $block_attributes['style']['typography']['textAlign'];
+	}
+
+	if ( ! empty( $classnames ) ) {
+		$attributes['class'] = implode( ' ', $classnames );
 	}
 
 	if ( ! empty( $styles['css'] ) ) {
@@ -168,16 +201,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
  *
- * @return string?             A CSS inline style value.
+ * @since 6.1.0
+ *
+ * @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 +223,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 ) );
 
@@ -196,42 +236,6 @@ function gutenberg_typography_get_preset_inline_style_value( $style_value, $css_
 	return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
 }
 
-/**
- * Deprecated.
- * This method is no longer used and will have to be deprecated in Core.
- *
- * It can be deleted once migrated to the next WordPress version.
- *
- * Generates an inline style for a typography feature e.g. text decoration,
- * text transform, and font style.
- *
- * @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.
- *
- * @return string              CSS inline style.
- */
-function gutenberg_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
-	// Retrieve current attribute value or skip if not found.
-	$style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
-	if ( ! $style_value ) {
-		return;
-	}
-
-	// If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
-	if ( ! str_contains( $style_value, "var:preset|{$css_property}|" ) ) {
-		return sprintf( '%s:%s;', $css_property, $style_value );
-	}
-
-	// 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            = substr( $style_value, $index_to_splice );
-
-	// Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
-	return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
-}
-
 /**
  * Renders typography styles/content to the block wrapper.
  *
@@ -257,7 +261,6 @@ function gutenberg_render_typography_support( $block_content, $block ) {
 	}
 
 	return $block_content;
-
 }
 
 /**
@@ -286,12 +289,11 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array()
 		return null;
 	}
 
-	// Converts numeric values to pixel values by default.
 	if ( empty( $raw_value ) ) {
 		return null;
 	}
 
-	// Converts numbers to pixel values by default.
+	// Converts numeric values to pixel values by default.
 	if ( is_numeric( $raw_value ) ) {
 		$raw_value = $raw_value . 'px';
 	}
@@ -403,6 +405,7 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
 			'coerce_to' => $font_size_unit,
 		)
 	);
+
 	$minimum_viewport_width = gutenberg_get_typography_value_and_unit(
 		$minimum_viewport_width_raw,
 		array(
@@ -410,10 +413,23 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
 		)
 	);
 
-	// Build CSS rule.
-	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	// Protects against unsupported units in min and max viewport widths.
+	if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
+		return null;
+	}
+
+	// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
+	$linear_factor_denominator = $maximum_viewport_width['value'] - $minimum_viewport_width['value'];
+	if ( empty( $linear_factor_denominator ) ) {
+		return null;
+	}
+
+	/*
+	 * Build CSS rule.
+	 * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	 */
 	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
-	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
+	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $linear_factor_denominator ) );
 	$linear_factor_scaled   = round( $linear_factor * $scale_factor, 3 );
 	$linear_factor_scaled   = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
 	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
@@ -421,57 +437,98 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
 	return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
 }
 
+
 /**
  * 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.
+ * Takes into account fluid typography parameters and attempts to return a CSS
+ * formula depending on available, valid values.
  *
- * @param array $preset                     {
+ * @since 6.1.0
+ * @since 6.1.1 Adjusted rules for min and max font sizes.
+ * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
+ * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
+ * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
+ * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
+ * @since 6.7.0 Font size presets can enable fluid typography individually, even if it’s disabled globally.
+ *
+ * @param array $preset       {
  *     Required. fontSizes preset value as seen in theme.json.
  *
  *     @type string           $name Name of the font size preset.
  *     @type string           $slug Kebab-case unique identifier for the font size preset.
  *     @type string|int|float $size CSS font-size value, including units where applicable.
  * }
- * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. Default is `false`.
+ * @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings.
+ *                             Default is `array()`.
  *
  * @return string|null Font-size value or `null` if a size is not passed in $preset.
  */
-function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+function gutenberg_get_typography_font_size_value( $preset, $settings = array() ) {
 	if ( ! isset( $preset['size'] ) ) {
 		return null;
 	}
 
 	/*
-	 * Catches empty values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
+	 * Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
+	 * Also return early when a preset font size explicitly disables fluid typography with `false`.
 	 */
-	if ( empty( $preset['size'] ) ) {
+	$fluid_font_size_settings = $preset['fluid'] ?? null;
+	if ( false === $fluid_font_size_settings || empty( $preset['size'] ) ) {
 		return $preset['size'];
 	}
 
-	// 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;
-
-	if ( ! $should_use_fluid_typography ) {
-		return $preset['size'];
+	/*
+	 * Backwards compatibility since 6.5.
+	 * As a bool (deprecated since 6.5), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`).
+	 */
+	if ( is_bool( $settings ) ) {
+		_deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.', 'gutenberg' ) );
+		$settings = array(
+			'typography' => array(
+				'fluid' => $settings,
+			),
+		);
 	}
 
-	// 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';
-
-	// Font sizes.
-	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
+	// Fallback to global settings as default.
+	$global_settings     = gutenberg_get_global_settings();
+	$settings            = wp_parse_args(
+		$settings,
+		$global_settings
+	);
+	$typography_settings = $settings['typography'] ?? array();
 
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === $fluid_font_size_settings ) {
+	/*
+	 * Return early when fluid typography is disabled in the settings, and there
+	 * are no local settings to enable it for the individual preset.
+	 *
+	 * If this condition isn't met, either the settings or individual preset settings
+	 * have enabled fluid typography.
+	 */
+	if ( empty( $typography_settings['fluid'] ) && empty( $fluid_font_size_settings ) ) {
 		return $preset['size'];
 	}
 
+	$fluid_settings  = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
+	$layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
+
+	// Defaults.
+	$default_maximum_viewport_width       = '1600px';
+	$default_minimum_viewport_width       = '320px';
+	$default_minimum_font_size_factor_max = 0.75;
+	$default_minimum_font_size_factor_min = 0.25;
+	$default_scale_factor                 = 1;
+	$default_minimum_font_size_limit      = '14px';
+
+	// Defaults overrides.
+	$minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
+	$maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
+	if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
+		$maximum_viewport_width = $fluid_settings['maxViewportWidth'];
+	}
+	$has_min_font_size       = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
+	$minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
+
 	// Try to grab explicit min and max fluid font sizes.
 	$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
 	$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
@@ -486,7 +543,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 
 	// Parses the minimum font size limit, so we can perform checks using it.
 	$minimum_font_size_limit = gutenberg_get_typography_value_and_unit(
-		$default_minimum_font_size_limit,
+		$minimum_font_size_limit,
 		array(
 			'coerce_to' => $preferred_size['unit'],
 		)
@@ -514,7 +571,16 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	 * the given font size multiplied by the min font size scale factor.
 	 */
 	if ( ! $minimum_font_size_raw ) {
-		$calculated_minimum_font_size = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 );
+		$preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
+
+		/*
+		 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+		 * that is, how quickly the size factor reaches 0 given increasing font size values.
+		 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+		 * The scale factor is constrained between min and max values.
+		 */
+		$minimum_font_size_factor     = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
+		$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
 
 		// Only use calculated min font size if it's > $minimum_font_size_limit value.
 		if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
@@ -526,8 +592,8 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 
 	$fluid_font_size_value = gutenberg_get_computed_fluid_typography_value(
 		array(
-			'minimum_viewport_width' => $default_minimum_viewport_width,
-			'maximum_viewport_width' => $default_maximum_viewport_width,
+			'minimum_viewport_width' => $minimum_viewport_width,
+			'maximum_viewport_width' => $maximum_viewport_width,
 			'minimum_font_size'      => $minimum_font_size_raw,
 			'maximum_font_size'      => $maximum_font_size_raw,
 			'scale_factor'           => $default_scale_factor,
diff --git a/lib/block-supports/utils.php b/lib/block-supports/utils.php
deleted file mode 100644
index 89199ac644cb0b..00000000000000
--- a/lib/block-supports/utils.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-/**
- * Block support utility functions.
- *
- * @package gutenberg
- */
-
-/**
- * Checks whether serialization of the current block's supported properties
- * should occur.
- *
- * @param WP_Block_type $block_type  Block type.
- * @param string        $feature_set Name of block support feature set..
- * @param string        $feature     Optional name of individual feature to check.
- *
- * @return boolean Whether to serialize block support styles & classes.
- */
-function gutenberg_should_skip_block_supports_serialization( $block_type, $feature_set, $feature = null ) {
-	if ( ! is_object( $block_type ) || ! $feature_set ) {
-		return false;
-	}
-
-	$path               = array( $feature_set, '__experimentalSkipSerialization' );
-	$skip_serialization = _wp_array_get( $block_type->supports, $path, false );
-
-	if ( is_array( $skip_serialization ) ) {
-		return in_array( $feature, $skip_serialization, true );
-	}
-
-	return $skip_serialization;
-}
diff --git a/lib/block-template-utils.php b/lib/block-template-utils.php
new file mode 100644
index 00000000000000..7dba2ff518104d
--- /dev/null
+++ b/lib/block-template-utils.php
@@ -0,0 +1,114 @@
+<?php
+/**
+ * Utilities used to fetch and create templates and template parts.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Creates an export of the current templates and
+ * template parts from the site editor at the
+ * specified path in a ZIP file.
+ *
+ * @since 5.9.0
+ * @since 6.0.0 Adds the whole theme to the export archive.
+ *
+ * @global string $wp_version The WordPress version string.
+ *
+ * @return WP_Error|string Path of the ZIP file or error on failure.
+ */
+function gutenberg_generate_block_templates_export_file() {
+	global $wp_version;
+
+	if ( ! class_exists( 'ZipArchive' ) ) {
+		return new WP_Error( 'missing_zip_package', __( 'Zip Export not supported.', 'gutenberg' ) );
+	}
+
+	$obscura    = wp_generate_password( 12, false, false );
+	$theme_name = basename( get_stylesheet() );
+	$filename   = get_temp_dir() . $theme_name . $obscura . '.zip';
+
+	$zip = new ZipArchive();
+	if ( true !== $zip->open( $filename, ZipArchive::CREATE | ZipArchive::OVERWRITE ) ) {
+		return new WP_Error( 'unable_to_create_zip', __( 'Unable to open export file (archive) for writing.', 'gutenberg' ) );
+	}
+
+	$zip->addEmptyDir( 'templates' );
+	$zip->addEmptyDir( 'parts' );
+
+	// Get path of the theme.
+	$theme_path = wp_normalize_path( get_stylesheet_directory() );
+
+	// Create recursive directory iterator.
+	$theme_files = new RecursiveIteratorIterator(
+		new RecursiveDirectoryIterator( $theme_path ),
+		RecursiveIteratorIterator::LEAVES_ONLY
+	);
+
+	// Make a copy of the current theme.
+	foreach ( $theme_files as $file ) {
+		// Skip directories as they are added automatically.
+		if ( ! $file->isDir() ) {
+			// Get real and relative path for current file.
+			$file_path     = wp_normalize_path( $file );
+			$relative_path = substr( $file_path, strlen( $theme_path ) + 1 );
+
+			if ( ! wp_is_theme_directory_ignored( $relative_path ) ) {
+				$zip->addFile( $file_path, $relative_path );
+			}
+		}
+	}
+
+	// Load templates into the zip file.
+	$templates = get_block_templates();
+	foreach ( $templates as $template ) {
+		$template->content = traverse_and_serialize_blocks(
+			parse_blocks( $template->content ),
+			'_remove_theme_attribute_from_template_part_block'
+		);
+
+		$zip->addFromString(
+			'templates/' . $template->slug . '.html',
+			$template->content
+		);
+	}
+
+	// Load template parts into the zip file.
+	$template_parts = get_block_templates( array(), 'wp_template_part' );
+	foreach ( $template_parts as $template_part ) {
+		$zip->addFromString(
+			'parts/' . $template_part->slug . '.html',
+			$template_part->content
+		);
+	}
+
+	// Load theme.json into the zip file.
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) );
+	// Merge with user data.
+	$tree->merge( WP_Theme_JSON_Resolver_Gutenberg::get_user_data() );
+
+	$theme_json_raw = $tree->get_data();
+	// If a version is defined, add a schema.
+	if ( $theme_json_raw['version'] ) {
+		$theme_json_version = 'wp/' . substr( $wp_version, 0, 3 );
+		$schema             = array( '$schema' => 'https://schemas.wp.org/' . $theme_json_version . '/theme.json' );
+		$theme_json_raw     = array_merge( $schema, $theme_json_raw );
+	}
+
+	// Convert to a string.
+	$theme_json_encoded = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
+
+	// Replace 4 spaces with a tab.
+	$theme_json_tabbed = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json_encoded );
+
+	// Add the theme.json file to the zip.
+	$zip->addFromString(
+		'theme.json',
+		$theme_json_tabbed
+	);
+
+	// Save changes to the zip file.
+	$zip->close();
+
+	return $filename;
+}
diff --git a/lib/blocks.php b/lib/blocks.php
index d991eac8ddbe4d..c3fdb26700c58c 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -21,13 +21,12 @@ function gutenberg_reregister_core_block_types() {
 				'code',
 				'column',
 				'columns',
-				'comments',
+				'details',
+				'form-input',
+				'form-submit-button',
 				'group',
-				'heading',
 				'html',
-				'list',
 				'list-item',
-				'media-text',
 				'missing',
 				'more',
 				'nextpage',
@@ -49,6 +48,7 @@ function gutenberg_reregister_core_block_types() {
 				'archives.php'                     => 'core/archives',
 				'avatar.php'                       => 'core/avatar',
 				'block.php'                        => 'core/block',
+				'button.php'                       => 'core/button',
 				'calendar.php'                     => 'core/calendar',
 				'categories.php'                   => 'core/categories',
 				'cover.php'                        => 'core/cover',
@@ -65,17 +65,25 @@ function gutenberg_reregister_core_block_types() {
 				'comments-pagination-previous.php' => 'core/comments-pagination-previous',
 				'comments-title.php'               => 'core/comments-title',
 				'comments.php'                     => 'core/comments',
+				'footnotes.php'                    => 'core/footnotes',
 				'file.php'                         => 'core/file',
+				'form.php'                         => 'core/form',
+				'form-input.php'                   => 'core/form-input',
+				'form-submission-notification.php' => 'core/form-submission-notification',
 				'home-link.php'                    => 'core/home-link',
 				'image.php'                        => 'core/image',
 				'gallery.php'                      => 'core/gallery',
+				'heading.php'                      => 'core/heading',
 				'latest-comments.php'              => 'core/latest-comments',
 				'latest-posts.php'                 => 'core/latest-posts',
+				'list.php'                         => 'core/list',
 				'loginout.php'                     => 'core/loginout',
+				'media-text.php'                   => 'core/media-text',
 				'navigation.php'                   => 'core/navigation',
 				'navigation-link.php'              => 'core/navigation-link',
 				'navigation-submenu.php'           => 'core/navigation-submenu',
 				'page-list.php'                    => 'core/page-list',
+				'page-list-item.php'               => 'core/page-list-item',
 				'pattern.php'                      => 'core/pattern',
 				'post-author.php'                  => 'core/post-author',
 				'post-author-name.php'             => 'core/post-author-name',
@@ -90,6 +98,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-featured-image.php'          => 'core/post-featured-image',
 				'post-navigation-link.php'         => 'core/post-navigation-link',
 				'post-terms.php'                   => 'core/post-terms',
+				'post-time-to-read.php'            => 'core/post-time-to-read',
 				'post-title.php'                   => 'core/post-title',
 				'query.php'                        => 'core/query',
 				'post-template.php'                => 'core/post-template',
@@ -133,8 +142,6 @@ function gutenberg_reregister_core_block_types() {
 		$block_folders = $details['block_folders'];
 		$block_names   = $details['block_names'];
 
-		$registry = WP_Block_Type_Registry::get_instance();
-
 		foreach ( $block_folders as $folder_name ) {
 			$block_json_file = $blocks_dir . $folder_name . '/block.json';
 
@@ -146,10 +153,7 @@ function gutenberg_reregister_core_block_types() {
 				continue;
 			}
 
-			if ( $registry->is_registered( $metadata['name'] ) ) {
-				$registry->unregister( $metadata['name'] );
-			}
-
+			gutenberg_deregister_core_block_and_assets( $metadata['name'] );
 			gutenberg_register_core_block_assets( $folder_name );
 			register_block_type_from_metadata( $block_json_file );
 		}
@@ -161,9 +165,7 @@ function gutenberg_reregister_core_block_types() {
 
 			$sub_block_names_normalized = is_string( $sub_block_names ) ? array( $sub_block_names ) : $sub_block_names;
 			foreach ( $sub_block_names_normalized as $block_name ) {
-				if ( $registry->is_registered( $block_name ) ) {
-					$registry->unregister( $block_name );
-				}
+				gutenberg_deregister_core_block_and_assets( $block_name );
 				gutenberg_register_core_block_assets( $block_name );
 			}
 
@@ -174,6 +176,62 @@ function gutenberg_reregister_core_block_types() {
 
 add_action( 'init', 'gutenberg_reregister_core_block_types' );
 
+/**
+ * Adds the defer loading strategy to all registered blocks.
+ *
+ * This function would not be part of core merge. Instead, the register_block_script_handle() function would be patched
+ * as follows.
+ *
+ * ```
+ * --- a/wp-includes/blocks.php
+ * +++ b/wp-includes/blocks.php
+ * @ @ -153,7 +153,8 @ @ function register_block_script_handle( $metadata, $field_name, $index = 0 ) {
+ *                 $script_handle,
+ *                 $script_uri,
+ *                 $script_dependencies,
+ * -           isset( $script_asset['version'] ) ? $script_asset['version'] : false
+ * +         isset( $script_asset['version'] ) ? $script_asset['version'] : false,
+ * +         array( 'strategy' => 'defer' )
+ *         );
+ *         if ( ! $result ) {
+ *                 return false;
+ * ```
+ *
+ * @see register_block_script_handle()
+ */
+function gutenberg_defer_block_view_scripts() {
+	$block_types = WP_Block_Type_Registry::get_instance()->get_all_registered();
+	foreach ( $block_types as $block_type ) {
+		foreach ( $block_type->view_script_handles as $view_script_handle ) {
+			wp_script_add_data( $view_script_handle, 'strategy', 'defer' );
+		}
+	}
+}
+
+add_action( 'init', 'gutenberg_defer_block_view_scripts', 100 );
+
+/**
+ * Deregisters the existing core block type and its assets.
+ *
+ * @param string $block_name The name of the block.
+ *
+ * @return void
+ */
+function gutenberg_deregister_core_block_and_assets( $block_name ) {
+	$registry = WP_Block_Type_Registry::get_instance();
+	if ( $registry->is_registered( $block_name ) ) {
+		$block_type = $registry->get_registered( $block_name );
+		if ( ! empty( $block_type->view_script_handles ) ) {
+			foreach ( $block_type->view_script_handles as $view_script_handle ) {
+				if ( str_starts_with( $view_script_handle, 'wp-block-' ) ) {
+					wp_deregister_script( $view_script_handle );
+				}
+			}
+		}
+		$registry->unregister( $block_name );
+	}
+}
+
 /**
  * Registers block styles for a core block.
  *
@@ -190,7 +248,7 @@ function gutenberg_register_core_block_assets( $block_name ) {
 
 	// When in production, use the plugin's version as the default asset version;
 	// else (for development or test) default to use the current time.
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
+	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
 
 	$style_path      = "build/block-library/blocks/$block_name/";
 	$stylesheet_url  = gutenberg_url( $style_path . 'style.css' );
@@ -212,23 +270,12 @@ function gutenberg_register_core_block_assets( $block_name ) {
 		wp_register_style( "wp-block-{$block_name}", false, array() );
 	}
 
-	// If the current theme supports wp-block-styles, dequeue the full stylesheet
-	// and instead attach each block's theme-styles to their block styles stylesheet.
+	/*
+	 * If the current theme supports wp-block-styles, dequeue the core styles
+	 * and enqueue the plugin ones instead.
+	 */
 	if ( current_theme_supports( 'wp-block-styles' ) ) {
 
-		// Dequeue the full stylesheet.
-		// Make sure this only runs once, it doesn't need to run for every block.
-		static $stylesheet_removed;
-		if ( ! $stylesheet_removed ) {
-			add_action(
-				'wp_enqueue_scripts',
-				function() {
-					wp_dequeue_style( 'wp-block-library-theme' );
-				}
-			);
-			$stylesheet_removed = true;
-		}
-
 		// Get the path to the block's stylesheet.
 		$theme_style_path = is_rtl()
 			? "build/block-library/blocks/$block_name/theme-rtl.css"
@@ -236,23 +283,14 @@ function() {
 
 		// If the file exists, enqueue it.
 		if ( file_exists( gutenberg_dir_path() . $theme_style_path ) ) {
-
-			if ( file_exists( $stylesheet_path ) ) {
-				// If there is a main stylesheet for this block, append the theme styles to main styles.
-				wp_add_inline_style(
-					"wp-block-{$block_name}",
-					file_get_contents( gutenberg_dir_path() . $theme_style_path )
-				);
-			} else {
-				// If there is no main stylesheet for this block, register theme style.
-				wp_register_style(
-					"wp-block-{$block_name}",
-					gutenberg_url( $theme_style_path ),
-					array(),
-					$default_version
-				);
-				wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path );
-			}
+			wp_deregister_style( "wp-block-{$block_name}-theme" );
+			wp_register_style(
+				"wp-block-{$block_name}-theme",
+				gutenberg_url( $theme_style_path ),
+				array(),
+				$default_version
+			);
+			wp_style_add_data( "wp-block-{$block_name}-theme", 'path', gutenberg_dir_path() . $theme_style_path );
 		}
 	}
 
@@ -352,3 +390,122 @@ function gutenberg_register_legacy_social_link_blocks() {
 }
 
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+/**
+ * Migrate the legacy `sync_status` meta key (added 16.1) to the new `wp_pattern_sync_status` meta key (16.1.1).
+ *
+ * This filter is INTENTIONALLY left out of core as the meta key was fist introduced to core in 6.3 as `wp_pattern_sync_status`.
+ * see https://github.com/WordPress/gutenberg/pull/52232
+ *
+ * @param mixed  $value     The value to return, either a single metadata value or an array of values depending on the value of $single.
+ * @param int    $object_id ID of the object metadata is for.
+ * @param string $meta_key  Metadata key.
+ * @param bool   $single    Whether to return only the first value of the specified $meta_key.
+ */
+function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $single ) {
+	if ( 'wp_pattern_sync_status' !== $meta_key ) {
+		return $value;
+	}
+
+	$sync_status = get_post_meta( $object_id, 'sync_status', $single );
+
+	if ( $single && 'unsynced' === $sync_status ) {
+		return $sync_status;
+	} elseif ( isset( $sync_status[0] ) && 'unsynced' === $sync_status[0] ) {
+		return $sync_status;
+	}
+
+	return $value;
+}
+
+add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 );
+
+
+
+/**
+ * Strips all HTML from the content of footnotes, and sanitizes the ID.
+ *
+ * This function expects slashed data on the footnotes content.
+ *
+ * @access private
+ *
+ * @param string $footnotes JSON encoded string of an array containing the content and ID of each footnote.
+ * @return string Filtered content without any HTML on the footnote content and with the sanitized id.
+ */
+function _gutenberg_filter_post_meta_footnotes( $footnotes ) {
+	$footnotes_decoded = json_decode( $footnotes, true );
+	if ( ! is_array( $footnotes_decoded ) ) {
+		return '';
+	}
+	$footnotes_sanitized = array();
+	foreach ( $footnotes_decoded as $footnote ) {
+		if ( ! empty( $footnote['content'] ) && ! empty( $footnote['id'] ) ) {
+			$footnotes_sanitized[] = array(
+				'id'      => sanitize_key( $footnote['id'] ),
+				'content' => wp_unslash( wp_filter_post_kses( wp_slash( $footnote['content'] ) ) ),
+			);
+		}
+	}
+	return wp_json_encode( $footnotes_sanitized );
+}
+
+/**
+ * Adds the filters to filter footnotes meta field.
+ *
+ * @access private
+ */
+function _gutenberg_footnotes_kses_init_filters() {
+	add_filter( 'sanitize_post_meta_footnotes', '_gutenberg_filter_post_meta_footnotes' );
+}
+
+/**
+ * Removes the filters that filter footnotes meta field.
+ *
+ * @access private
+ */
+function _gutenberg_footnotes_remove_filters() {
+	remove_filter( 'sanitize_post_meta_footnotes', '_gutenberg_filter_post_meta_footnotes' );
+}
+
+/**
+ * Registers the filter of footnotes meta field if the user does not have unfiltered_html capability.
+ *
+ * @access private
+ */
+function _gutenberg_footnotes_kses_init() {
+	if ( function_exists( '_wp_filter_post_meta_footnotes' ) ) {
+		return;
+	}
+	_gutenberg_footnotes_remove_filters();
+	if ( ! current_user_can( 'unfiltered_html' ) ) {
+		_gutenberg_footnotes_kses_init_filters();
+	}
+}
+
+/**
+ * Initializes footnotes meta field filters when imported data should be filtered.
+ *
+ * This filter is the last being executed on force_filtered_html_on_import.
+ * If the input of the filter is true it means we are in an import situation and should
+ * enable kses, independently of the user capabilities.
+ * So in that case we call _gutenberg_footnotes_kses_init_filters;
+ *
+ * @access private
+ *
+ * @param string $arg Input argument of the filter.
+ * @return string Input argument of the filter.
+ */
+function _gutenberg_footnotes_force_filtered_html_on_import_filter( $arg ) {
+	if ( function_exists( '_wp_filter_post_meta_footnotes' ) ) {
+		return;
+	}
+	// force_filtered_html_on_import is true we need to init the global styles kses filters.
+	if ( $arg ) {
+		_gutenberg_footnotes_kses_init_filters();
+	}
+	return $arg;
+}
+
+add_action( 'init', '_gutenberg_footnotes_kses_init' );
+add_action( 'set_current_user', '_gutenberg_footnotes_kses_init' );
+add_filter( 'force_filtered_html_on_import', '_gutenberg_footnotes_force_filtered_html_on_import_filter', 999 );
diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
new file mode 100644
index 00000000000000..5f3b1bb5cd6b11
--- /dev/null
+++ b/lib/class-wp-duotone-gutenberg.php
@@ -0,0 +1,1109 @@
+<?php
+/**
+ * WP_Duotone_Gutenberg class
+ *
+ * Parts of this source were derived and modified from colord,
+ * released under the MIT license.
+ *
+ * https://github.com/omgovich/colord
+ *
+ * Copyright (c) 2020 Vlad Shilov omgovich@ya.ru
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @package gutenberg
+ * @since 6.3.0
+ */
+
+/**
+ * Manages duotone block supports and global styles.
+ *
+ * @access public
+ */
+class WP_Duotone_Gutenberg {
+	/**
+	 * Block names from global, theme, and custom styles that use duotone presets and the slug of
+	 * the preset they are using.
+	 *
+	 * Example:
+	 *  [
+	 *      'core/featured-image' => 'blue-orange',
+	 *       …
+	 *  ]
+	 *
+	 * @var array
+	 */
+	private static $global_styles_block_names = array();
+
+	/**
+	 * An array of duotone filter data from global, theme, and custom presets.
+	 *
+	 * Example:
+	 *  [
+	 *      'wp-duotone-blue-orange' => [
+	 *          'slug'   => 'blue-orange',
+	 *          'colors' => [ '#0000ff', '#ffcc00' ],
+	 *      ],
+	 *      'wp-duotone-red-yellow' => [
+	 *          'slug'   => 'red-yellow',
+	 *          'colors' => [ '#cc0000', '#ffff33' ],
+	 *      ],
+	 *      …
+	 *  ]
+	 *
+	 * @var array
+	 */
+	private static $global_styles_presets = array();
+
+	/**
+	 * All of the duotone filter data from presets for CSS custom properties on
+	 * the page.
+	 *
+	 * Example:
+	 *  [
+	 *      'wp-duotone-blue-orange' => [
+	 *          'slug'   => 'blue-orange',
+	 *          'colors' => [ '#0000ff', '#ffcc00' ],
+	 *      ],
+	 *      …
+	 *  ]
+	 *
+	 * @var array
+	 */
+	private static $used_global_styles_presets = array();
+
+	/**
+	 * All of the duotone filter data for SVGs on the page. Includes both
+	 * presets and custom filters.
+	 *
+	 * Example:
+	 *  [
+	 *      'wp-duotone-blue-orange' => [
+	 *          'slug'   => 'blue-orange',
+	 *          'colors' => [ '#0000ff', '#ffcc00' ],
+	 *      ],
+	 *      'wp-duotone-000000-ffffff-2' => [
+	 *          'slug'   => '000000-ffffff-2',
+	 *          'colors' => [ '#000000', '#ffffff' ],
+	 *      ],
+	 *      …
+	 *  ]
+	 *
+	 * @var array
+	 */
+	private static $used_svg_filter_data = array();
+
+	/**
+	 * All of the block CSS declarations for styles on the page.
+	 *
+	 * Example:
+	 *  [
+	 *      [
+	 *          'selector'     => '.wp-duotone-000000-ffffff-2.wp-block-image img',
+	 *          'declarations' => [
+	 *              'filter' => 'url(#wp-duotone-000000-ffffff-2)',
+	 *          ],
+	 *      ],
+	 *      …
+	 *  ]
+	 *
+	 * @var array
+	 */
+	private static $block_css_declarations = array();
+
+	/**
+	 * Direct port of colord's clamp function. Using min/max instead of
+	 * nested ternaries.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/helpers.ts#L23
+	 *
+	 * @param float $number The number to clamp.
+	 * @param float $min   The minimum value.
+	 * @param float $max   The maximum value.
+	 * @return float The clamped value.
+	 */
+	private static function colord_clamp( $number, $min = 0, $max = 1 ) {
+		return $number > $max ? $max : ( $number > $min ? $number : $min );
+	}
+
+	/**
+	 * Direct port of colord's clampHue function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/helpers.ts#L32
+	 *
+	 * @param float $degrees The hue to clamp.
+	 * @return float The clamped hue.
+	 */
+	private static function colord_clamp_hue( $degrees ) {
+		$degrees = is_finite( $degrees ) ? $degrees % 360 : 0;
+		return $degrees > 0 ? $degrees : $degrees + 360;
+	}
+
+	/**
+	 * Direct port of colord's parseHue function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/helpers.ts#L40
+	 *
+	 * @param float  $value The hue value to parse.
+	 * @param string $unit  The unit of the hue value.
+	 * @return float The parsed hue value.
+	 */
+	private static function colord_parse_hue( $value, $unit = 'deg' ) {
+		$angle_units = array(
+			'grad' => 360 / 400,
+			'turn' => 360,
+			'rad'  => 360 / ( M_PI * 2 ),
+		);
+
+		$factor = $angle_units[ $unit ];
+		if ( ! $factor ) {
+			$factor = 1;
+		}
+
+		return (float) $value * $factor;
+	}
+
+	/**
+	 * Direct port of colord's parseHex function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hex.ts#L8
+	 *
+	 * @param string $hex The hex string to parse.
+	 * @return array|null An array of RGBA values or null if the hex string is invalid.
+	 */
+	private static function colord_parse_hex( $hex ) {
+		$is_match = preg_match(
+			'/^#([0-9a-f]{3,8})$/i',
+			$hex,
+			$hex_match
+		);
+
+		if ( ! $is_match ) {
+			return null;
+		}
+
+		$hex = $hex_match[1];
+
+		if ( 4 >= strlen( $hex ) ) {
+			return array(
+				'r' => (int) base_convert( $hex[0] . $hex[0], 16, 10 ),
+				'g' => (int) base_convert( $hex[1] . $hex[1], 16, 10 ),
+				'b' => (int) base_convert( $hex[2] . $hex[2], 16, 10 ),
+				'a' => 4 === strlen( $hex ) ? round( base_convert( $hex[3] . $hex[3], 16, 10 ) / 255, 2 ) : 1,
+			);
+		}
+
+		if ( 6 === strlen( $hex ) || 8 === strlen( $hex ) ) {
+			return array(
+				'r' => (int) base_convert( substr( $hex, 0, 2 ), 16, 10 ),
+				'g' => (int) base_convert( substr( $hex, 2, 2 ), 16, 10 ),
+				'b' => (int) base_convert( substr( $hex, 4, 2 ), 16, 10 ),
+				'a' => 8 === strlen( $hex ) ? round( (int) base_convert( substr( $hex, 6, 2 ), 16, 10 ) / 255, 2 ) : 1,
+			);
+		}
+
+		return null;
+	}
+
+	/**
+	 * Direct port of colord's clampRgba function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/rgb.ts#L5
+	 *
+	 * @param array $rgba The RGBA array to clamp.
+	 * @return array The clamped RGBA array.
+	 */
+	private static function colord_clamp_rgba( $rgba ) {
+		$rgba['r'] = self::colord_clamp( $rgba['r'], 0, 255 );
+		$rgba['g'] = self::colord_clamp( $rgba['g'], 0, 255 );
+		$rgba['b'] = self::colord_clamp( $rgba['b'], 0, 255 );
+		$rgba['a'] = self::colord_clamp( $rgba['a'] );
+
+		return $rgba;
+	}
+
+	/**
+	 * Direct port of colord's parseRgbaString function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/rgbString.ts#L18
+	 *
+	 * @param string $input The RGBA string to parse.
+	 * @return array|null An array of RGBA values or null if the RGB string is invalid.
+	 */
+	private static function colord_parse_rgba_string( $input ) {
+		// Functional syntax.
+		$is_match = preg_match(
+			'/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i',
+			$input,
+			$match
+		);
+
+		if ( ! $is_match ) {
+			// Whitespace syntax.
+			$is_match = preg_match(
+				'/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i',
+				$input,
+				$match
+			);
+		}
+
+		if ( ! $is_match ) {
+			return null;
+		}
+
+		// For some reason, preg_match doesn't include empty matches at the end
+		// of the array, so we add them manually to make things easier later.
+		for ( $i = 1; $i <= 8; $i++ ) {
+			if ( ! isset( $match[ $i ] ) ) {
+				$match[ $i ] = '';
+			}
+		}
+
+		if ( $match[2] !== $match[4] || $match[4] !== $match[6] ) {
+			return null;
+		}
+
+		return self::colord_clamp_rgba(
+			array(
+				'r' => (float) $match[1] / ( $match[2] ? 100 / 255 : 1 ),
+				'g' => (float) $match[3] / ( $match[4] ? 100 / 255 : 1 ),
+				'b' => (float) $match[5] / ( $match[6] ? 100 / 255 : 1 ),
+				'a' => '' === $match[7] ? 1 : (float) $match[7] / ( $match[8] ? 100 : 1 ),
+			)
+		);
+	}
+
+	/**
+	 * Direct port of colord's clampHsla function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hsl.ts#L6
+	 *
+	 * @param array $hsla The HSLA array to clamp.
+	 * @return array The clamped HSLA array.
+	 */
+	private static function colord_clamp_hsla( $hsla ) {
+		$hsla['h'] = self::colord_clamp_hue( $hsla['h'] );
+		$hsla['s'] = self::colord_clamp( $hsla['s'], 0, 100 );
+		$hsla['l'] = self::colord_clamp( $hsla['l'], 0, 100 );
+		$hsla['a'] = self::colord_clamp( $hsla['a'] );
+
+		return $hsla;
+	}
+
+	/**
+	 * Direct port of colord's hsvaToRgba function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hsv.ts#L52
+	 *
+	 * @param array $hsva The HSVA array to convert.
+	 * @return array The RGBA array.
+	 */
+	private static function colord_hsva_to_rgba( $hsva ) {
+		$h = ( $hsva['h'] / 360 ) * 6;
+		$s = $hsva['s'] / 100;
+		$v = $hsva['v'] / 100;
+		$a = $hsva['a'];
+
+		$hh     = floor( $h );
+		$b      = $v * ( 1 - $s );
+		$c      = $v * ( 1 - ( $h - $hh ) * $s );
+		$d      = $v * ( 1 - ( 1 - $h + $hh ) * $s );
+		$module = $hh % 6;
+
+		return array(
+			'r' => array( $v, $c, $b, $b, $d, $v )[ $module ] * 255,
+			'g' => array( $d, $v, $v, $c, $b, $b )[ $module ] * 255,
+			'b' => array( $b, $b, $d, $v, $v, $c )[ $module ] * 255,
+			'a' => $a,
+		);
+	}
+
+	/**
+	 * Direct port of colord's hslaToHsva function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hsl.ts#L33
+	 *
+	 * @param array $hsla The HSLA array to convert.
+	 * @return array The HSVA array.
+	 */
+	private static function colord_hsla_to_hsva( $hsla ) {
+		$h = $hsla['h'];
+		$s = $hsla['s'];
+		$l = $hsla['l'];
+		$a = $hsla['a'];
+
+		$s *= ( $l < 50 ? $l : 100 - $l ) / 100;
+
+		return array(
+			'h' => $h,
+			's' => $s > 0 ? ( ( 2 * $s ) / ( $l + $s ) ) * 100 : 0,
+			'v' => $l + $s,
+			'a' => $a,
+		);
+	}
+
+	/**
+	 * Direct port of colord's hslaToRgba function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hsl.ts#L55
+	 *
+	 * @param array $hsla The HSLA array to convert.
+	 * @return array The RGBA array.
+	 */
+	private static function colord_hsla_to_rgba( $hsla ) {
+		return self::colord_hsva_to_rgba( self::colord_hsla_to_hsva( $hsla ) );
+	}
+
+	/**
+	 * Direct port of colord's parseHslaString function.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/colorModels/hslString.ts#L17
+	 *
+	 * @param string $input The HSLA string to parse.
+	 * @return array|null An array of RGBA values or null if the RGB string is invalid.
+	 */
+	private static function colord_parse_hsla_string( $input ) {
+		// Functional syntax.
+		$is_match = preg_match(
+			'/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i',
+			$input,
+			$match
+		);
+
+		if ( ! $is_match ) {
+			// Whitespace syntax.
+			$is_match = preg_match(
+				'/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i',
+				$input,
+				$match
+			);
+		}
+
+		if ( ! $is_match ) {
+			return null;
+		}
+
+		// For some reason, preg_match doesn't include empty matches at the end
+		// of the array, so we add them manually to make things easier later.
+		for ( $i = 1; $i <= 6; $i++ ) {
+			if ( ! isset( $match[ $i ] ) ) {
+				$match[ $i ] = '';
+			}
+		}
+
+		$hsla = self::colord_clamp_hsla(
+			array(
+				'h' => self::colord_parse_hue( $match[1], $match[2] ),
+				's' => (float) $match[3],
+				'l' => (float) $match[4],
+				'a' => '' === $match[5] ? 1 : (float) $match[5] / ( $match[6] ? 100 : 1 ),
+			)
+		);
+
+		return self::colord_hsla_to_rgba( $hsla );
+	}
+
+	/**
+	 * Direct port of colord's parse function simplified for our use case. This
+	 * version only supports string parsing and only returns RGBA values.
+	 *
+	 * @see https://github.com/omgovich/colord/blob/3f859e03b0ca622eb15480f611371a0f15c9427f/src/parse.ts#L37
+	 *
+	 * @param string $input The string to parse.
+	 * @return array|null An array of RGBA values or null if the string is invalid.
+	 */
+	private static function colord_parse( $input ) {
+		$result = self::colord_parse_hex( $input );
+
+		if ( ! $result ) {
+			$result = self::colord_parse_rgba_string( $input );
+		}
+
+		if ( ! $result ) {
+			$result = self::colord_parse_hsla_string( $input );
+		}
+
+		return $result;
+	}
+
+	/**
+	 * Take the inline CSS duotone variable from a block and return the slug. Handles styles slugs like:
+	 * var:preset|duotone|blue-orange
+	 * var(--wp--preset--duotone--blue-orange)
+	 *
+	 * @param string $duotone_attr The duotone attribute from a block.
+	 * @return string The slug of the duotone preset or an empty string if no slug is found.
+	 */
+	private static function get_slug_from_attribute( $duotone_attr ) {
+		// Uses Branch Reset Groups `(?|…)` to return one capture group.
+		preg_match( '/(?|var:preset\|duotone\|(\S+)|var\(--wp--preset--duotone--(\S+)\))/', $duotone_attr, $matches );
+
+		return ! empty( $matches[1] ) ? $matches[1] : '';
+	}
+
+	/**
+	 * Check if we have a valid duotone preset.
+	 *
+	 * @param string $duotone_attr The duotone attribute from a block.
+	 * @return bool True if the duotone preset present and valid.
+	 */
+	private static function is_preset( $duotone_attr ) {
+		$slug      = self::get_slug_from_attribute( $duotone_attr );
+		$filter_id = self::get_filter_id( $slug );
+
+		return array_key_exists( $filter_id, self::$global_styles_presets );
+	}
+
+	/**
+	 * Get the CSS variable name for a duotone preset.
+	 *
+	 * @param string $slug The slug of the duotone preset.
+	 * @return string The CSS variable name.
+	 */
+	private static function get_css_custom_property_name( $slug ) {
+		return "--wp--preset--duotone--$slug";
+	}
+
+	/**
+	 * Get the ID of the duotone filter.
+	 *
+	 * @param string $slug The slug of the duotone preset.
+	 * @return string The ID of the duotone filter.
+	 */
+	private static function get_filter_id( $slug ) {
+		return "wp-duotone-$slug";
+	}
+
+	/**
+	 * Get the CSS variable for a duotone preset.
+	 *
+	 * @param string $slug The slug of the duotone preset.
+	 * @return string The CSS variable.
+	 */
+	private static function get_css_var( $slug ) {
+		$name = self::get_css_custom_property_name( $slug );
+		return "var($name)";
+	}
+
+	/**
+	 * Get the URL for a duotone filter.
+	 *
+	 * @param string $filter_id The ID of the filter.
+	 * @return string The URL for the duotone filter.
+	 */
+	private static function get_filter_url( $filter_id ) {
+		return "url(#$filter_id)";
+	}
+
+	/**
+	 * Gets the SVG for the duotone filter definition.
+	 *
+	 * @param string $filter_id The ID of the filter.
+	 * @param array  $colors    An array of color strings.
+	 * @return string An SVG with a duotone filter definition.
+	 */
+	private static function get_filter_svg( $filter_id, $colors ) {
+		$duotone_values = array(
+			'r' => array(),
+			'g' => array(),
+			'b' => array(),
+			'a' => array(),
+		);
+
+		foreach ( $colors as $color_str ) {
+			$color = self::colord_parse( $color_str );
+
+			if ( null === $color ) {
+				$error_message = sprintf(
+					/* translators: %s: duotone colors */
+					__( '"%s" in theme.json settings.color.duotone is not a hex or rgb string.', 'gutenberg' ),
+					$color_str
+				);
+				_doing_it_wrong( __METHOD__, $error_message, '6.3.0' );
+			} else {
+				$duotone_values['r'][] = $color['r'] / 255;
+				$duotone_values['g'][] = $color['g'] / 255;
+				$duotone_values['b'][] = $color['b'] / 255;
+				$duotone_values['a'][] = $color['a'];
+			}
+		}
+
+		ob_start();
+
+		?>
+
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 0 0"
+			width="0"
+			height="0"
+			focusable="false"
+			role="none"
+			style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+		>
+			<defs>
+				<filter id="<?php echo esc_attr( $filter_id ); ?>">
+					<feColorMatrix
+						color-interpolation-filters="sRGB"
+						type="matrix"
+						values="
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+						"
+					/>
+					<feComponentTransfer color-interpolation-filters="sRGB" >
+						<feFuncR type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['r'] ) ); ?>" />
+						<feFuncG type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['g'] ) ); ?>" />
+						<feFuncB type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['b'] ) ); ?>" />
+						<feFuncA type="table" tableValues="<?php echo esc_attr( implode( ' ', $duotone_values['a'] ) ); ?>" />
+					</feComponentTransfer>
+					<feComposite in2="SourceGraphic" operator="in" />
+				</filter>
+			</defs>
+		</svg>
+
+		<?php
+
+		$svg = ob_get_clean();
+
+		if ( ! SCRIPT_DEBUG ) {
+			// Clean up the whitespace.
+			$svg = preg_replace( "/[\r\n\t ]+/", ' ', $svg );
+			$svg = str_replace( '> <', '><', $svg );
+			$svg = trim( $svg );
+		}
+
+		return $svg;
+	}
+
+	/**
+	 * Get the SVGs for the duotone filters.
+	 *
+	 * Example output:
+	 *  <svg><defs><filter id="wp-duotone-blue-orange">…</filter></defs></svg><svg>…</svg>
+	 *
+	 * @param array $sources The duotone presets.
+	 * @return string The SVGs for the duotone filters.
+	 */
+	private static function get_svg_definitions( $sources ) {
+		$svgs = '';
+		foreach ( $sources as $filter_id => $filter_data ) {
+			$colors = $filter_data['colors'];
+			$svgs  .= self::get_filter_svg( $filter_id, $colors );
+		}
+		return $svgs;
+	}
+
+	/**
+	 * Get the CSS for global styles.
+	 *
+	 * Example output:
+	 *  body{--wp--preset--duotone--blue-orange:url('#wp-duotone-blue-orange');}
+	 *
+	 * @param array $sources The duotone presets.
+	 * @return string The CSS for global styles.
+	 */
+	private static function get_global_styles_presets( $sources ) {
+		$css = WP_Theme_JSON_Gutenberg::ROOT_CSS_PROPERTIES_SELECTOR . '{';
+		foreach ( $sources as $filter_id => $filter_data ) {
+			$slug              = $filter_data['slug'];
+			$colors            = $filter_data['colors'];
+			$css_property_name = self::get_css_custom_property_name( $slug );
+			$declaration_value = is_string( $colors ) ? $colors : self::get_filter_url( $filter_id );
+			$css              .= "$css_property_name:$declaration_value;";
+		}
+		$css .= '}';
+		return $css;
+	}
+
+	/**
+	 * Get the CSS selector for a block type.
+	 *
+	 * @param string $block_name The block name.
+	 *
+	 * @return string The CSS selector or null if there is no support.
+	 */
+	private static function get_selector( $block_name ) {
+		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+
+		if ( $block_type && $block_type instanceof WP_Block_Type ) {
+			// Backwards compatibility with `supports.color.__experimentalDuotone`
+			// is provided via the `block_type_metadata_settings` filter. If
+			// `supports.filter.duotone` has not been set and the experimental
+			// property has been, the experimental property value is copied into
+			// `supports.filter.duotone`.
+			$duotone_support = $block_type->supports['filter']['duotone'] ?? false;
+			if ( ! $duotone_support ) {
+				return null;
+			}
+
+			// If the experimental duotone support was set, that value is to be
+			// treated as a selector and requires scoping.
+			$experimental_duotone = $block_type->supports['color']['__experimentalDuotone'] ?? false;
+			if ( $experimental_duotone ) {
+				$root_selector = wp_get_block_css_selector( $block_type );
+				return is_string( $experimental_duotone )
+					? WP_Theme_JSON_Gutenberg::scope_selector( $root_selector, $experimental_duotone )
+					: $root_selector;
+			}
+
+			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+			return wp_get_block_css_selector( $block_type, array( 'filter', 'duotone' ), true );
+		}
+	}
+
+	/**
+	 * Enqueue a block CSS declaration for the page.
+	 *
+	 * @param string $filter_id        The filter ID. e.g. 'wp-duotone-000000-ffffff-2'.
+	 * @param string $duotone_selector The block's duotone selector. e.g. '.wp-block-image img'.
+	 * @param string $filter_value     The filter CSS value. e.g. 'url(#wp-duotone-000000-ffffff-2)' or 'unset'.
+	 */
+	private static function enqueue_block_css( $filter_id, $duotone_selector, $filter_value ) {
+		// Build the CSS selectors to which the filter will be applied.
+		$selectors = explode( ',', $duotone_selector );
+
+		$selectors_scoped = array();
+		foreach ( $selectors as $selector_part ) {
+			// Assuming the selector part is a subclass selector (not a tag name)
+			// so we can prepend the filter id class. If we want to support elements
+			// such as `img` or namespaces, we'll need to add a case for that here.
+			$selectors_scoped[] = '.' . $filter_id . trim( $selector_part );
+		}
+
+		$selector = implode( ', ', $selectors_scoped );
+
+		self::$block_css_declarations[] = array(
+			'selector'     => $selector,
+			'declarations' => array(
+				'filter' => $filter_value,
+			),
+		);
+	}
+
+	/**
+	 * Enqueue custom filter assets for the page. Includes an SVG filter and block CSS declaration.
+	 *
+	 * @param string $filter_id        The filter ID. e.g. 'wp-duotone-000000-ffffff-2'.
+	 * @param string $duotone_selector The block's duotone selector. e.g. '.wp-block-image img'.
+	 * @param string $filter_value     The filter CSS value. e.g. 'url(#wp-duotone-000000-ffffff-2)' or 'unset'.
+	 * @param array  $filter_data      Duotone filter data with 'slug' and 'colors' keys.
+	 */
+	private static function enqueue_custom_filter( $filter_id, $duotone_selector, $filter_value, $filter_data ) {
+		self::$used_svg_filter_data[ $filter_id ] = $filter_data;
+		self::enqueue_block_css( $filter_id, $duotone_selector, $filter_value );
+	}
+
+	/**
+	 * Enqueue preset assets for the page. Includes a CSS custom property, SVG filter, and block CSS declaration.
+	 *
+	 * @param string $filter_id        The filter ID. e.g. 'wp-duotone-blue-orange'.
+	 * @param string $duotone_selector The block's duotone selector. e.g. '.wp-block-image img'.
+	 * @param string $filter_value     The filter CSS value. e.g. 'url(#wp-duotone-blue-orange)' or 'unset'.
+	 */
+	private static function enqueue_global_styles_preset( $filter_id, $duotone_selector, $filter_value ) {
+		if ( ! array_key_exists( $filter_id, self::$global_styles_presets ) ) {
+			$error_message = sprintf(
+				/* translators: %s: duotone filter ID */
+				__( 'The duotone id "%s" is not registered in theme.json settings', 'gutenberg' ),
+				$filter_id
+			);
+			_doing_it_wrong( __METHOD__, $error_message, '6.3.0' );
+			return;
+		}
+		self::$used_global_styles_presets[ $filter_id ] = self::$global_styles_presets[ $filter_id ];
+		self::enqueue_custom_filter( $filter_id, $duotone_selector, $filter_value, self::$global_styles_presets[ $filter_id ] );
+	}
+
+	/**
+	 * Registers the style and colors block attributes for block types that support it.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param WP_Block_Type $block_type Block Type.
+	 */
+	public static function register_duotone_support( $block_type ) {
+		$has_duotone_support = false;
+		if ( $block_type instanceof WP_Block_Type ) {
+			// Previous `color.__experimentalDuotone` support flag is migrated
+			// to `filter.duotone` via `block_type_metadata_settings` filter.
+			$has_duotone_support = $block_type->supports['filter']['duotone'] ?? null;
+		}
+
+		if ( $has_duotone_support ) {
+			if ( ! $block_type->attributes ) {
+				$block_type->attributes = array();
+			}
+
+			if ( ! array_key_exists( 'style', $block_type->attributes ) ) {
+				$block_type->attributes['style'] = array(
+					'type' => 'object',
+				);
+			}
+		}
+	}
+
+	/**
+	 * Get all possible duotone presets from global and theme styles and store as slug => [ colors array ]
+	 * We only want to process this one time. On block render we'll access and output only the needed presets for that page.
+	 *
+	 * @since 6.3.0
+	 */
+	public static function set_global_styles_presets() {
+		// Get the per block settings from the theme.json.
+		$tree              = gutenberg_get_global_settings();
+		$presets_by_origin = $tree['color']['duotone'] ?? array();
+
+		foreach ( $presets_by_origin as $presets ) {
+			foreach ( $presets as $preset ) {
+				$filter_id = self::get_filter_id( _wp_to_kebab_case( $preset['slug'] ) );
+
+				self::$global_styles_presets[ $filter_id ] = $preset;
+			}
+		}
+	}
+
+	/**
+	 * Scrape all block names from global styles and store in self::$global_styles_block_names
+	 *
+	 * @since 6.3.0
+	 */
+	public static function set_global_style_block_names() {
+		// Get the per block settings from the theme.json.
+		$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+		$block_nodes = $tree->get_styles_block_nodes();
+		$theme_json  = $tree->get_raw_data();
+
+		foreach ( $block_nodes as $block_node ) {
+			// This block definition doesn't include any duotone settings. Skip it.
+			if ( empty( $block_node['duotone'] ) ) {
+				continue;
+			}
+
+			// Value looks like this: 'var(--wp--preset--duotone--blue-orange)' or 'var:preset|duotone|blue-orange'.
+			$duotone_attr_path = array_merge( $block_node['path'], array( 'filter', 'duotone' ) );
+			$duotone_attr      = _wp_array_get( $theme_json, $duotone_attr_path, array() );
+
+			if ( empty( $duotone_attr ) ) {
+				continue;
+			}
+			// If it has a duotone filter preset, save the block name and the preset slug.
+			$slug = self::get_slug_from_attribute( $duotone_attr );
+
+			if ( $slug && $slug !== $duotone_attr ) {
+				self::$global_styles_block_names[ $block_node['name'] ] = $slug;
+			}
+		}
+	}
+
+	/**
+	 * Render out the duotone CSS styles and SVG.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param  string $block_content Rendered block content.
+	 * @param  array  $block         Block object.
+	 * @return string                Filtered block content.
+	 */
+	public static function render_duotone_support( $block_content, $block ) {
+		$duotone_selector = self::get_selector( $block['blockName'] );
+
+		// The block should have a duotone attribute or have duotone defined in its theme.json to be processed.
+		$has_duotone_attribute     = isset( $block['attrs']['style']['color']['duotone'] );
+		$has_global_styles_duotone = array_key_exists( $block['blockName'], self::$global_styles_block_names );
+
+		if (
+			! $duotone_selector ||
+			( ! $has_duotone_attribute && ! $has_global_styles_duotone )
+		) {
+			return $block_content;
+		}
+
+		// Generate the pieces needed for rendering a duotone to the page.
+		if ( $has_duotone_attribute ) {
+
+			// Possible values for duotone attribute:
+			// 1. Array of colors - e.g. array('#000000', '#ffffff').
+			// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|blue-orange' or 'var(--wp--preset--duotone--blue-orange)''
+			// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
+
+			$duotone_attr = $block['attrs']['style']['color']['duotone'];
+			$is_preset    = is_string( $duotone_attr ) && self::is_preset( $duotone_attr );
+			$is_css       = is_string( $duotone_attr ) && ! $is_preset;
+			$is_custom    = is_array( $duotone_attr );
+
+			if ( $is_preset ) {
+				$slug         = self::get_slug_from_attribute( $duotone_attr ); // e.g. 'blue-orange'.
+				$filter_id    = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-blue-orange'.
+				$filter_value = self::get_css_var( $slug ); // e.g. 'var(--wp--preset--duotone--blue-orange)'.
+
+				// CSS custom property, SVG filter, and block CSS.
+				self::enqueue_global_styles_preset( $filter_id, $duotone_selector, $filter_value );
+
+			} elseif ( $is_css ) {
+				$slug         = wp_unique_id( sanitize_key( $duotone_attr . '-' ) ); // e.g. 'unset-1'.
+				$filter_id    = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-unset-1'.
+				$filter_value = $duotone_attr; // e.g. 'unset'.
+
+				// Just block CSS.
+				self::enqueue_block_css( $filter_id, $duotone_selector, $filter_value );
+			} elseif ( $is_custom ) {
+				$slug         = wp_unique_id( sanitize_key( implode( '-', $duotone_attr ) . '-' ) ); // e.g. '000000-ffffff-2'.
+				$filter_id    = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-000000-ffffff-2'.
+				$filter_value = self::get_filter_url( $filter_id ); // e.g. 'url(#wp-duotone-filter-000000-ffffff-2)'.
+				$filter_data  = array(
+					'slug'   => $slug,
+					'colors' => $duotone_attr,
+				);
+
+				// SVG filter and block CSS.
+				self::enqueue_custom_filter( $filter_id, $duotone_selector, $filter_value, $filter_data );
+			}
+		} elseif ( $has_global_styles_duotone ) {
+			$slug         = self::$global_styles_block_names[ $block['blockName'] ]; // e.g. 'blue-orange'.
+			$filter_id    = self::get_filter_id( $slug ); // e.g. 'wp-duotone-filter-blue-orange'.
+			$filter_value = self::get_css_var( $slug ); // e.g. 'var(--wp--preset--duotone--blue-orange)'.
+
+			// CSS custom property, SVG filter, and block CSS.
+			self::enqueue_global_styles_preset( $filter_id, $duotone_selector, $filter_value );
+		}
+
+		// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
+		$tags = new WP_HTML_Tag_Processor( $block_content );
+		if ( $tags->next_tag() ) {
+			$tags->add_class( $filter_id );
+		}
+
+		return $tags->get_updated_html();
+	}
+
+	/**
+	 * Fixes the issue with our generated class name not being added to the block's outer container
+	 * in classic themes due to gutenberg_restore_image_outer_container from layout block supports.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param  string $block_content Rendered block content.
+	 * @return string                Filtered block content.
+	 */
+	public static function restore_image_outer_container( $block_content ) {
+		if ( wp_theme_has_theme_json() ) {
+			return $block_content;
+		}
+
+		$tags          = new WP_HTML_Tag_Processor( $block_content );
+		$wrapper_query = array(
+			'tag_name'   => 'div',
+			'class_name' => 'wp-block-image',
+		);
+		if ( ! $tags->next_tag( $wrapper_query ) ) {
+			return $block_content;
+		}
+
+		$tags->set_bookmark( 'wrapper-div' );
+		$tags->next_tag();
+
+		$inner_classnames = explode( ' ', $tags->get_attribute( 'class' ) );
+		foreach ( $inner_classnames as $classname ) {
+			if ( 0 === strpos( $classname, 'wp-duotone' ) ) {
+				$tags->remove_class( $classname );
+				$tags->seek( 'wrapper-div' );
+				$tags->add_class( $classname );
+				break;
+			}
+		}
+
+		return $tags->get_updated_html();
+	}
+
+	/**
+	 * Appends the used block duotone filter declarations to the inline block supports CSS.
+	 *
+	 * @since 6.3.0
+	 */
+	public static function output_block_styles() {
+		if ( ! empty( self::$block_css_declarations ) ) {
+			gutenberg_style_engine_get_stylesheet_from_css_rules(
+				self::$block_css_declarations,
+				array(
+					'context' => 'block-supports',
+				)
+			);
+		}
+	}
+
+	/**
+	 * Appends the used global style duotone filter presets (CSS custom
+	 * properties) to the inline global styles CSS.
+	 *
+	 * @since 6.3.0
+	 */
+	public static function output_global_styles() {
+		if ( ! empty( self::$used_global_styles_presets ) ) {
+			wp_add_inline_style( 'global-styles', self::get_global_styles_presets( self::$used_global_styles_presets ) );
+		}
+	}
+
+	/**
+	 * Outputs all necessary SVG for duotone filters, CSS for classic themes.
+	 *
+	 * @since 6.3.0
+	 */
+	public static function output_footer_assets() {
+		if ( ! empty( self::$used_svg_filter_data ) ) {
+			echo self::get_svg_definitions( self::$used_svg_filter_data );
+		}
+
+		// In block themes, the CSS is added in the head via wp_add_inline_style in the wp_enqueue_scripts action.
+		if ( ! wp_is_block_theme() ) {
+			$style_tag_id = 'core-block-supports-duotone';
+			wp_register_style( $style_tag_id, false );
+			if ( ! empty( self::$used_global_styles_presets ) ) {
+				wp_add_inline_style( $style_tag_id, self::get_global_styles_presets( self::$used_global_styles_presets ) );
+			}
+			if ( ! empty( self::$block_css_declarations ) ) {
+				wp_add_inline_style( $style_tag_id, gutenberg_style_engine_get_stylesheet_from_css_rules( self::$block_css_declarations ) );
+			}
+			wp_enqueue_style( $style_tag_id );
+		}
+	}
+
+	/**
+	 * Adds the duotone SVGs and CSS custom properties to the editor settings so
+	 * they can be pulled in by the EditorStyles component in JS and rendered in
+	 * the post editor.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param array $settings The block editor settings from the `block_editor_settings_all` filter.
+	 * @return array The editor settings with duotone SVGs and CSS custom properties.
+	 */
+	public static function add_editor_settings( $settings ) {
+		if ( ! empty( self::$global_styles_presets ) ) {
+			if ( ! isset( $settings['styles'] ) ) {
+				$settings['styles'] = array();
+			}
+
+			$settings['styles'][] = array(
+				// For the editor we can add all of the presets by default.
+				'assets'         => self::get_svg_definitions( self::$global_styles_presets ),
+				// The 'svgs' type is new in 6.3 and requires the corresponding JS changes in the EditorStyles component to work.
+				'__unstableType' => 'svgs',
+				// These styles not generated by global styles, so this must be false or they will be stripped out in gutenberg_get_block_editor_settings.
+				'isGlobalStyles' => false,
+			);
+
+			$settings['styles'][] = array(
+				// For the editor we can add all of the presets by default.
+				'css'            => self::get_global_styles_presets( self::$global_styles_presets ),
+				// This must be set and must be something other than 'theme' or they will be stripped out in the post editor <Editor> component.
+				'__unstableType' => 'presets',
+				// These styles are no longer generated by global styles, so this must be false or they will be stripped out in gutenberg_get_block_editor_settings.
+				'isGlobalStyles' => false,
+			);
+		}
+
+		return $settings;
+	}
+
+	/**
+	 * Migrate the old experimental duotone support flag to its stabilized location
+	 * under `supports.filter.duotone` and sets.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param array $settings Current block type settings.
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type settings.
+	 */
+	public static function migrate_experimental_duotone_support_flag( $settings, $metadata ) {
+		$duotone_support = $metadata['supports']['color']['__experimentalDuotone'] ?? null;
+
+		if ( ! isset( $settings['supports']['filter']['duotone'] ) && null !== $duotone_support ) {
+			_wp_array_set( $settings, array( 'supports', 'filter', 'duotone' ), (bool) $duotone_support );
+		}
+
+		return $settings;
+	}
+
+	/**
+	 * Returns the prefixed id for the duotone filter for use as a CSS id.
+	 *
+	 * Exported for the deprecated function gutenberg_get_duotone_filter_id().
+	 *
+	 * @since 6.3.0
+	 * @deprecated 6.3.0
+	 *
+	 * @param  array $preset Duotone preset value as seen in theme.json.
+	 * @return string        Duotone filter CSS id.
+	 */
+	public static function get_filter_id_from_preset( $preset ) {
+		_deprecated_function( __FUNCTION__, '6.3.0' );
+
+		$filter_id = '';
+		if ( isset( $preset['slug'] ) ) {
+			$filter_id = self::get_filter_id( $preset['slug'] );
+		}
+		return $filter_id;
+	}
+
+	/**
+	 * Gets the SVG for the duotone filter definition from a preset.
+	 *
+	 * Exported for the deprecated function gutenberg_get_duotone_filter_property().
+	 *
+	 * @since 6.3.0
+	 * @deprecated 6.3.0
+	 *
+	 * @param array $preset The duotone preset.
+	 * @return string The SVG for the filter definition.
+	 */
+	public static function get_filter_svg_from_preset( $preset ) {
+		_deprecated_function( __FUNCTION__, '6.3.0' );
+
+		$filter_id = self::get_filter_id_from_preset( $preset );
+		return self::get_filter_svg( $filter_id, $preset['colors'] );
+	}
+
+	/**
+	 * Gets the CSS filter property value from a preset.
+	 *
+	 * Exported for the deprecated function gutenberg_get_duotone_filter_id().
+	 *
+	 * @since 6.3.0
+	 * @deprecated 6.3.0
+	 *
+	 * @param array $preset The duotone preset.
+	 * @return string The CSS filter property value.
+	 */
+	public static function get_filter_css_property_value_from_preset( $preset ) {
+		_deprecated_function( __FUNCTION__, '6.3.0' );
+
+		if ( isset( $preset['colors'] ) && is_string( $preset['colors'] ) ) {
+			return $preset['colors'];
+		}
+
+		$filter_id = self::get_filter_id_from_preset( $preset );
+		return 'url(#' . $filter_id . ')';
+	}
+}
diff --git a/lib/class-wp-rest-edit-site-export-controller-gutenberg.php b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php
new file mode 100644
index 00000000000000..b05de230dd0ccd
--- /dev/null
+++ b/lib/class-wp-rest-edit-site-export-controller-gutenberg.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Controller which provides REST endpoint for exporting current templates
+ * and template parts.
+ *
+ * This class extension exists so that theme exporting takes into account any updates/changes to
+ * WP_Theme_JSON_Gutenberg, WP_Theme_JSON_Resolver_Gutenberg or related classes.
+ *
+ * @package    gutenberg
+ * @subpackage REST_API
+ * @since 5.9.0
+ */
+
+if ( class_exists( 'WP_REST_Edit_Site_Export_Controller_Gutenberg' ) ) {
+	return;
+}
+
+class WP_REST_Edit_Site_Export_Controller_Gutenberg extends WP_REST_Edit_Site_Export_Controller {
+	/**
+	 * Output a ZIP file with an export of the current templates
+	 * and template parts from the site editor, and close the connection.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return WP_Error|void
+	 */
+	public function export() {
+		// Generate the export file.
+		$filename = gutenberg_generate_block_templates_export_file();
+
+		if ( is_wp_error( $filename ) ) {
+			$filename->add_data( array( 'status' => 500 ) );
+
+			return $filename;
+		}
+
+		$theme_name = basename( get_stylesheet() );
+		header( 'Content-Type: application/zip' );
+		header( 'Content-Disposition: attachment; filename=' . $theme_name . '.zip' );
+		header( 'Content-Length: ' . filesize( $filename ) );
+		flush();
+		readfile( $filename );
+		unlink( $filename );
+		exit;
+	}
+}
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
new file mode 100644
index 00000000000000..1f6543fa184283
--- /dev/null
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -0,0 +1,704 @@
+<?php
+/**
+ * REST API: Bundle WP_Theme_JSON class instead of inheriting per WordPress version class
+ *
+ * Changes to this class should be synced to the corresponding class
+ * in WordPress core: src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php.
+ *
+ * @package    gutenberg
+ * @subpackage REST_API
+ * @since 5.9.0
+ */
+
+/**
+ * Base Global Styles REST API Controller.
+ */
+class WP_REST_Global_Styles_Controller_Gutenberg extends WP_REST_Posts_Controller {
+
+	/**
+	 * Whether the controller supports batching.
+	 *
+	 * @since 6.6.0
+	 * @var array
+	 */
+	protected $allow_batch = array( 'v1' => false );
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 5.9.0
+	 */
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $post_type Post type.
+	 */
+	public function __construct( $post_type = 'wp_global_styles' ) {
+		parent::__construct( $post_type );
+	}
+
+	/**
+	 * Registers the controllers routes.
+	 *
+	 * @since 5.9.0
+	 */
+	public function register_routes() {
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base . '/themes/(?P<stylesheet>[\/\s%\w\.\(\)\[\]\@_\-]+)/variations',
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_theme_items' ),
+					'permission_callback' => array( $this, 'get_theme_items_permissions_check' ),
+					'args'                => array(
+						'stylesheet' => array(
+							'description' => __( 'The theme identifier', 'gutenberg' ),
+							'type'        => 'string',
+						),
+					),
+					'allow_batch'         => $this->allow_batch,
+				),
+			),
+			/*
+			 * $override is set to true to avoid conflicts with the core endpoint.
+			 * Do not sync to WordPress core.
+			 */
+			true
+		);
+
+		// List themes global styles.
+		register_rest_route(
+			$this->namespace,
+			// The route.
+			sprintf(
+				'/%s/themes/(?P<stylesheet>%s)',
+				$this->rest_base,
+				/*
+				 * Matches theme's directory: `/themes/<subdirectory>/<theme>/` or `/themes/<theme>/`.
+				 * Excludes invalid directory name characters: `/:<>*?"|`.
+				 */
+				'[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?'
+			),
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_theme_item' ),
+					'permission_callback' => array( $this, 'get_theme_item_permissions_check' ),
+					'args'                => array(
+						'stylesheet' => array(
+							'description'       => __( 'The theme identifier', 'gutenberg' ),
+							'type'              => 'string',
+							'sanitize_callback' => array( $this, '_sanitize_global_styles_callback' ),
+						),
+					),
+					'allow_batch'         => $this->allow_batch,
+				),
+			),
+			/*
+			 * $override is set to true to avoid conflicts with the core endpoint.
+			 * Do not sync to WordPress core.
+			 */
+			true
+		);
+
+		// Lists/updates a single global style variation based on the given id.
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base . '/(?P<id>[\/\w-]+)',
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_item' ),
+					'permission_callback' => array( $this, 'get_item_permissions_check' ),
+					'args'                => array(
+						'id' => array(
+							'description'       => __( 'The id of a template', 'gutenberg' ),
+							'type'              => 'string',
+							'sanitize_callback' => array( $this, '_sanitize_global_styles_callback' ),
+						),
+					),
+				),
+				array(
+					'methods'             => WP_REST_Server::EDITABLE,
+					'callback'            => array( $this, 'update_item' ),
+					'permission_callback' => array( $this, 'update_item_permissions_check' ),
+					'args'                => $this->get_endpoint_args_for_item_schema( WP_REST_Server::EDITABLE ),
+				),
+				'schema'      => array( $this, 'get_public_item_schema' ),
+				'allow_batch' => $this->allow_batch,
+			),
+			/*
+			 * $override is set to true to avoid conflicts with the core endpoint.
+			 * Do not sync to WordPress core.
+			 */
+			true
+		);
+	}
+
+	/**
+	 * Sanitize the global styles ID or stylesheet to decode endpoint.
+	 * For example, `wp/v2/global-styles/twentytwentytwo%200.4.0`
+	 * would be decoded to `twentytwentytwo 0.4.0`.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $id_or_stylesheet Global styles ID or stylesheet.
+	 * @return string Sanitized global styles ID or stylesheet.
+	 */
+	public function _sanitize_global_styles_callback( $id_or_stylesheet ) {
+		return urldecode( $id_or_stylesheet );
+	}
+
+	/**
+	 * Get the post, if the ID is valid.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param int $id Supplied ID.
+	 * @return WP_Post|WP_Error Post object if ID is valid, WP_Error otherwise.
+	 */
+	protected function get_post( $id ) {
+		$error = new WP_Error(
+			'rest_global_styles_not_found',
+			__( 'No global styles config exist with that id.', 'gutenberg' ),
+			array( 'status' => 404 )
+		);
+
+		$id = (int) $id;
+		if ( $id <= 0 ) {
+			return $error;
+		}
+
+		$post = get_post( $id );
+		if ( empty( $post ) || empty( $post->ID ) || $this->post_type !== $post->post_type ) {
+			return $error;
+		}
+
+		return $post;
+	}
+
+	/**
+	 * Checks if a given request has access to read a single global style.
+	 *
+	 * @since 5.9.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_item_permissions_check( $request ) {
+		$post = $this->get_post( $request['id'] );
+		if ( is_wp_error( $post ) ) {
+			return $post;
+		}
+
+		if ( 'edit' === $request['context'] && $post && ! $this->check_update_permission( $post ) ) {
+			return new WP_Error(
+				'rest_forbidden_context',
+				__( 'Sorry, you are not allowed to edit this global style.', 'gutenberg' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		if ( ! $this->check_read_permission( $post ) ) {
+			return new WP_Error(
+				'rest_cannot_view',
+				__( 'Sorry, you are not allowed to view this global style.', 'gutenberg' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Checks if a global style can be read.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param WP_Post $post Post object.
+	 * @return bool Whether the post can be read.
+	 */
+	public function check_read_permission( $post ) {
+		return current_user_can( 'read_post', $post->ID );
+	}
+
+	/**
+	 * Checks if a given request has access to write a single global styles config.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has write access for the item, WP_Error object otherwise.
+	 */
+	public function update_item_permissions_check( $request ) {
+		$post = $this->get_post( $request['id'] );
+		if ( is_wp_error( $post ) ) {
+			return $post;
+		}
+
+		if ( $post && ! $this->check_update_permission( $post ) ) {
+			return new WP_Error(
+				'rest_cannot_edit',
+				__( 'Sorry, you are not allowed to edit this global style.', 'gutenberg' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Prepares a single global styles config for update.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Added validation of styles.css property.
+	 * @since 6.6.0 Added registration of block style variations from theme.json sources (theme.json, user theme.json, partials).
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return stdClass|WP_Error Prepared item on success. WP_Error on when the custom CSS is not valid.
+	 */
+	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'] ) ) {
+				if ( isset( $request['styles']['css'] ) ) {
+					$css_validation_result = $this->validate_custom_css( $request['styles']['css'] );
+					if ( is_wp_error( $css_validation_result ) ) {
+						return $css_validation_result;
+					}
+				}
+				$config['styles'] = $request['styles'];
+			} elseif ( isset( $existing_config['styles'] ) ) {
+				$config['styles'] = $existing_config['styles'];
+			}
+
+			// Register theme-defined variations e.g. from block style variation partials under `/styles`.
+			$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' );
+			gutenberg_register_block_style_variations_from_theme_json_partials( $variations );
+
+			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;
+	}
+
+	/**
+	 * Prepare a global styles config output for response.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Handling of style.css was added to WP_Theme_JSON.
+	 * @since 6.6.0 Added custom relative theme file URIs to `_links`.
+	 *
+	 * @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();
+		$theme_json                       = null;
+		if ( $is_global_styles_user_theme_json ) {
+			$theme_json = new WP_Theme_JSON_Gutenberg( $raw_config, 'custom' );
+			$config     = $theme_json->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' ) );
+			add_filter( 'private_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' ) );
+			remove_filter( 'private_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 );
+			// Only return resolved URIs for get requests to user theme JSON.
+			if ( $theme_json ) {
+				$resolved_theme_uris = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme_json );
+				if ( ! empty( $resolved_theme_uris ) ) {
+					$links['https://api.w.org/theme-file'] = $resolved_theme_uris;
+				}
+			}
+			$response->add_links( $links );
+			if ( ! empty( $links['self']['href'] ) ) {
+				$actions = $this->get_available_actions( $post, $request );
+				$self    = $links['self']['href'];
+				foreach ( $actions as $rel ) {
+					$response->add_link( $rel, $self );
+				}
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Prepares links for the request.
+	 *
+	 * @since 5.9.0
+	 * @since 6.3.0 Adds revisions count and rest URL href to version-history.
+	 *
+	 * @param integer $id ID.
+	 * @return array Links for the given post.
+	 */
+	protected function prepare_links( $id ) {
+		$base = sprintf( '%s/%s', $this->namespace, $this->rest_base );
+
+		$links = array(
+			'self'  => array(
+				'href' => rest_url( trailingslashit( $base ) . $id ),
+			),
+			'about' => array(
+				'href' => rest_url( 'wp/v2/types/' . $this->post_type ),
+			),
+		);
+
+		if ( post_type_supports( $this->post_type, 'revisions' ) ) {
+			$revisions                = wp_get_latest_revision_id_and_total_count( $id );
+			$revisions_count          = ! is_wp_error( $revisions ) ? $revisions['count'] : 0;
+			$revisions_base           = sprintf( '/%s/%d/revisions', $base, $id );
+			$links['version-history'] = array(
+				'href'  => rest_url( $revisions_base ),
+				'count' => $revisions_count,
+			);
+		}
+
+		return $links;
+	}
+
+	/**
+	 * Get the link relations available for the post and current user.
+	 *
+	 * @since 5.9.0
+	 * @since 6.2.0 Added 'edit-css' action.
+	 * @since 6.6.0 Added $post and $request parameters.
+	 *
+	 * @param WP_Post         $post    Post object.
+	 * @param WP_REST_Request $request Request object.
+	 * @return array List of link relations.
+	 */
+	protected function get_available_actions( $post, $request ) {  // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		$rels = array();
+
+		$post_type = get_post_type_object( $post->post_type );
+		if ( current_user_can( $post_type->cap->publish_posts ) ) {
+			$rels[] = 'https://api.w.org/action-publish';
+		}
+
+		if ( current_user_can( 'edit_css' ) ) {
+			$rels[] = 'https://api.w.org/action-edit-css';
+		}
+
+		return $rels;
+	}
+
+	/**
+	 * Retrieves the query params for the global styles collection.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return array Collection parameters.
+	 */
+	public function get_collection_params() {
+		return array();
+	}
+
+	/**
+	 * Retrieves the global styles type' schema, conforming to JSON Schema.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		if ( $this->schema ) {
+			return $this->add_additional_fields_schema( $this->schema );
+		}
+
+		$schema = array(
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => $this->post_type,
+			'type'       => 'object',
+			'properties' => array(
+				'id'       => array(
+					'description' => __( 'ID of global styles config.', 'gutenberg' ),
+					'type'        => 'string',
+					'context'     => array( 'embed', 'view', 'edit' ),
+					'readonly'    => true,
+				),
+				'styles'   => array(
+					'description' => __( 'Global styles.', 'gutenberg' ),
+					'type'        => array( 'object' ),
+					'context'     => array( 'view', 'edit' ),
+				),
+				'settings' => array(
+					'description' => __( 'Global settings.', 'gutenberg' ),
+					'type'        => array( 'object' ),
+					'context'     => array( 'view', 'edit' ),
+				),
+				'title'    => array(
+					'description' => __( 'Title of the global styles variation.', 'gutenberg' ),
+					'type'        => array( 'object', 'string' ),
+					'default'     => '',
+					'context'     => array( 'embed', 'view', 'edit' ),
+					'properties'  => array(
+						'raw'      => array(
+							'description' => __( 'Title for the global styles variation, as it exists in the database.', 'gutenberg' ),
+							'type'        => 'string',
+							'context'     => array( 'view', 'edit', 'embed' ),
+						),
+						'rendered' => array(
+							'description' => __( 'HTML title for the post, transformed for display.', 'gutenberg' ),
+							'type'        => 'string',
+							'context'     => array( 'view', 'edit', 'embed' ),
+							'readonly'    => true,
+						),
+					),
+				),
+			),
+		);
+
+		$this->schema = $schema;
+
+		return $this->add_additional_fields_schema( $this->schema );
+	}
+
+	/**
+	 * Checks if a given request has access to read a single theme global styles config.
+	 *
+	 * @since 5.9.0
+	 * @since 6.7.0 Allow users with edit post capabilities to view theme global styles.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
+	 */
+	public function get_theme_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		/*
+		 * Verify if the current user has edit_posts capability.
+		 */
+		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;
+			}
+		}
+
+		/*
+		 * Verify if the current user has edit_theme_options capability.
+		 */
+		if ( current_user_can( 'edit_theme_options' ) ) {
+			return true;
+		}
+
+		return new WP_Error(
+			'rest_cannot_read_global_styles',
+			__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
+			array(
+				'status' => rest_authorization_required_code(),
+			)
+		);
+	}
+
+	/**
+	 * Returns the given theme global styles config.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_theme_item( $request ) {
+		if ( get_stylesheet() !== $request['stylesheet'] ) {
+			// This endpoint only supports the active theme for now.
+			return new WP_Error(
+				'rest_theme_not_found',
+				__( 'Theme not found.', 'gutenberg' ),
+				array( 'status' => 404 )
+			);
+		}
+
+		$theme  = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' );
+		$fields = $this->get_fields_for_response( $request );
+		$data   = array();
+
+		if ( rest_is_field_included( 'settings', $fields ) ) {
+			$data['settings'] = $theme->get_settings();
+		}
+
+		if ( rest_is_field_included( 'styles', $fields ) ) {
+			$raw_data       = $theme->get_raw_data();
+			$data['styles'] = isset( $raw_data['styles'] ) ? $raw_data['styles'] : array();
+		}
+
+		$context  = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data     = $this->add_additional_fields_to_object( $data, $request );
+		$data     = $this->filter_response_by_context( $data, $context );
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links               = array(
+				'self' => array(
+					'href' => rest_url( sprintf( '%s/%s/themes/%s', $this->namespace, $this->rest_base, $request['stylesheet'] ) ),
+				),
+			);
+			$resolved_theme_uris = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme );
+			if ( ! empty( $resolved_theme_uris ) ) {
+				$links['https://api.w.org/theme-file'] = $resolved_theme_uris;
+			}
+
+			$response->add_links( $links );
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Checks if a given request has access to read a single theme global styles config.
+	 *
+	 * @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 for the item, WP_Error object otherwise.
+	 */
+	public function get_theme_items_permissions_check( $request ) {
+		return $this->get_theme_item_permissions_check( $request );
+	}
+
+	/**
+	 * Returns the given theme global styles variations.
+	 *
+	 * @since 6.0.0
+	 * @since 6.2.0 Returns parent theme variations, if they exist.
+	 * @since 6.4.0 Removed unnecessary local variable.
+	 * @since 6.6.0 Added custom relative theme file URIs to `_links` for each item.
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 *
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_theme_items( $request ) {
+		if ( get_stylesheet() !== $request['stylesheet'] ) {
+			// This endpoint only supports the active theme for now.
+			return new WP_Error(
+				'rest_theme_not_found',
+				__( 'Theme not found.', 'gutenberg' ),
+				array( 'status' => 404 )
+			);
+		}
+
+		$response = array();
+
+		// Register theme-defined variations e.g. from block style variation partials under `/styles`.
+		$partials = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( 'block' );
+		gutenberg_register_block_style_variations_from_theme_json_partials( $partials );
+
+		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
+
+		// Add resolved theme asset links.
+		foreach ( $variations as $variation ) {
+			$variation_theme_json = new WP_Theme_JSON_Gutenberg( $variation );
+			$resolved_theme_uris  = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $variation_theme_json );
+			$data                 = rest_ensure_response( $variation );
+			if ( ! empty( $resolved_theme_uris ) ) {
+				$data->add_links(
+					array(
+						'https://api.w.org/theme-file' => $resolved_theme_uris,
+					)
+				);
+			}
+			$response[] = $this->prepare_response_for_collection( $data );
+		}
+
+		return rest_ensure_response( $response );
+	}
+
+	/**
+	 * Validate style.css as valid CSS.
+	 *
+	 * Currently just checks for invalid markup.
+	 *
+	 * @since 6.2.0
+	 * @since 6.4.0 Changed method visibility to protected.
+	 *
+	 * @param string $css CSS to validate.
+	 * @return true|WP_Error True if the input was validated, otherwise WP_Error.
+	 */
+	protected 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/class-wp-theme-json-data-gutenberg.php b/lib/class-wp-theme-json-data-gutenberg.php
new file mode 100644
index 00000000000000..2c7eec9d5dbf4a
--- /dev/null
+++ b/lib/class-wp-theme-json-data-gutenberg.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * WP_Theme_JSON_Data class
+ *
+ * @package gutenberg
+ * @since 6.1.0
+ */
+
+/**
+ * Class to provide access to update a theme.json structure.
+ */
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Data_Gutenberg {
+
+	/**
+	 * Container of the data to update.
+	 *
+	 * @since 6.1.0
+	 * @var WP_Theme_JSON
+	 */
+	private $theme_json = null;
+
+	/**
+	 * The origin of the data: default, theme, user, etc.
+	 *
+	 * @since 6.1.0
+	 * @var string
+	 */
+	private $origin = '';
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @link https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/
+	 *
+	 * @param array  $data   Array following the theme.json specification.
+	 * @param string $origin The origin of the data: default, theme, user.
+	 */
+	public function __construct( $data = array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA ), $origin = 'theme' ) {
+		$this->origin     = $origin;
+		$this->theme_json = new WP_Theme_JSON_Gutenberg( $data, $this->origin );
+	}
+
+	/**
+	 * Updates the theme.json with the the given data.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param array $new_data Array following the theme.json specification.
+	 *
+	 * @return WP_Theme_JSON_Data_Gutenberg The own instance with access to the modified data.
+	 */
+	public function update_with( $new_data ) {
+		$this->theme_json->merge( new WP_Theme_JSON_Gutenberg( $new_data, $this->origin ) );
+		return $this;
+	}
+
+	/**
+	 * Returns an array containing the underlying data
+	 * following the theme.json specification.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @return array
+	 */
+	public function get_data() {
+		return $this->theme_json->get_raw_data();
+	}
+
+	/**
+	 * Return theme JSON object.
+	 *
+	 * @since 18.5.0
+	 *
+	 * @return WP_Theme_JSON
+	 */
+	public function get_theme_json() {
+		return $this->theme_json;
+	}
+}
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
new file mode 100644
index 00000000000000..083ce3516b71af
--- /dev/null
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -0,0 +1,4594 @@
+<?php
+/**
+ * WP_Theme_JSON_Gutenberg class
+ *
+ * @package gutenberg
+ * @since 5.8.0
+ */
+
+/**
+ * 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 gutenberg_get_global_settings, gutenberg_get_global_styles, and gutenberg_get_global_stylesheet instead.
+ *
+ * @access private
+ */
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Gutenberg {
+
+	/**
+	 * Container of data in theme.json format.
+	 *
+	 * @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.
+	 *
+	 * @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 preset settings.
+	 *
+	 * @since 6.6.0
+	 * @var string
+	 */
+	const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
+
+	/**
+	 * The CSS selector for the top-level styles.
+	 *
+	 * @since 5.8.0
+	 * @var string
+	 */
+	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(
+		'default',
+		'blocks',
+		'theme',
+		'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 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.
+	 *
+	 * @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`.
+	 * @since 6.2.0 Added 'shadow' presets.
+	 * @since 6.6.0 Updated the 'prevent_override' value for font size presets to use 'typography.defaultFontSizes' and spacing size presets to use `spacing.defaultSpacingSizes`.
+	 * @since 6.6.0 Added `aspectRatios`.
+	 * @var array
+	 */
+	const PRESETS_METADATA = array(
+		array(
+			'path'              => array( 'dimensions', 'aspectRatios' ),
+			'prevent_override'  => array( 'dimensions', 'defaultAspectRatios' ),
+			'use_default_names' => false,
+			'value_key'         => 'ratio',
+			'css_vars'          => '--wp--preset--aspect-ratio--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'aspect-ratio' ),
+		),
+		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'        => null, // CSS Custom Properties for duotone are handled by block supports in class-wp-duotone-gutenberg.php.
+			'css_vars'          => null,
+			'classes'           => array(),
+			'properties'        => array( 'filter' ),
+		),
+		array(
+			'path'              => array( 'typography', 'fontSizes' ),
+			'prevent_override'  => array( 'typography', 'defaultFontSizes' ),
+			'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'  => array( 'spacing', 'defaultSpacingSizes' ),
+			'use_default_names' => true,
+			'value_key'         => 'size',
+			'css_vars'          => '--wp--preset--spacing--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'padding', 'margin' ),
+		),
+		array(
+			'path'              => array( 'shadow', 'presets' ),
+			'prevent_override'  => array( 'shadow', 'defaultPresets' ),
+			'use_default_names' => false,
+			'value_key'         => 'shadow',
+			'css_vars'          => '--wp--preset--shadow--$slug',
+			'classes'           => array(),
+			'properties'        => array( 'box-shadow' ),
+		),
+	);
+
+	/**
+	 * 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 `outline-*`, and `min-height` properties.
+	 * @since 6.3.0 Added `writing-mode` property.
+	 * @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
+	 *
+	 * @var array
+	 */
+	const PROPERTIES_METADATA = array(
+		'aspect-ratio'                      => array( 'dimensions', 'aspectRatio' ),
+		'background'                        => array( 'color', 'gradient' ),
+		'background-color'                  => array( 'color', 'background' ),
+		'background-image'                  => array( 'background', 'backgroundImage' ),
+		'background-position'               => array( 'background', 'backgroundPosition' ),
+		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
+		'background-size'                   => array( 'background', 'backgroundSize' ),
+		'background-attachment'             => array( 'background', 'backgroundAttachment' ),
+		'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' ),
+		'text-align'                        => array( 'typography', 'textAlign' ),
+		'column-count'                      => array( 'typography', 'textColumns' ),
+		'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' ),
+		'outline-color'                     => array( 'outline', 'color' ),
+		'outline-offset'                    => array( 'outline', 'offset' ),
+		'outline-style'                     => array( 'outline', 'style' ),
+		'outline-width'                     => array( 'outline', 'width' ),
+		'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' ),
+		'writing-mode'                      => array( 'typography', 'writingMode' ),
+	);
+
+	/**
+	 * Indirect metadata for style properties that are not directly output.
+	 *
+	 * Each element maps from a CSS property name to an array of
+	 * paths 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 a style value is allowed.
+	 *
+	 * @since 6.2.0
+	 * @since 6.6.0 Added background-image properties.
+	 *
+	 * @var array
+	 */
+	const INDIRECT_PROPERTIES_METADATA = array(
+		'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' ),
+		),
+		'background-image' => array(
+			array( 'background', 'backgroundImage', 'url' ),
+		),
+	);
+
+	/**
+	 * Protected style properties.
+	 *
+	 * 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 PROTECTED_PROPERTIES = array(
+		'spacing.blockGap' => array( 'spacing', 'blockGap' ),
+	);
+
+	/**
+	 * The top-level keys a theme.json can have.
+	 *
+	 * @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.
+	 * @since 6.3.0 Added the `description` value.
+	 * @var string[]
+	 */
+	const VALID_TOP_LEVEL_KEYS = array(
+		'blockTypes',
+		'customTemplates',
+		'description',
+		'patterns',
+		'settings',
+		'styles',
+		'templateParts',
+		'title',
+		'slug',
+		'version',
+	);
+
+	/**
+	 * 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`, 'shadow.presets', 'shadow.defaultPresets',
+	 *              `position.fixed` and `position.sticky`.
+	 * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`.
+	 * @since 6.4.0 Added `layout.allowEditing`.
+	 * @since 6.4.0 Added `lightbox`.
+	 * @var array
+	 */
+	const VALID_SETTINGS = array(
+		'appearanceTools'               => null,
+		'useRootPaddingAwareAlignments' => null,
+		'background'                    => array(
+			'backgroundImage' => null,
+			'backgroundSize'  => 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,
+			'heading'          => null,
+			'button'           => null,
+			'caption'          => null,
+			'palette'          => null,
+			'text'             => null,
+		),
+		'custom'                        => null,
+		'dimensions'                    => array(
+			'aspectRatio'         => null,
+			'aspectRatios'        => null,
+			'defaultAspectRatios' => null,
+			'minHeight'           => null,
+		),
+		'layout'                        => array(
+			'contentSize'                   => null,
+			'wideSize'                      => null,
+			'allowEditing'                  => null,
+			'allowCustomContentAndWideSize' => null,
+		),
+		'lightbox'                      => array(
+			'enabled'      => null,
+			'allowEditing' => null,
+		),
+		'position'                      => array(
+			'fixed'  => null,
+			'sticky' => null,
+		),
+		'spacing'                       => array(
+			'customSpacingSize'   => null,
+			'defaultSpacingSizes' => null,
+			'spacingSizes'        => null,
+			'spacingScale'        => null,
+			'blockGap'            => null,
+			'margin'              => null,
+			'padding'             => null,
+			'units'               => null,
+		),
+		'shadow'                        => array(
+			'presets'        => null,
+			'defaultPresets' => null,
+		),
+		'typography'                    => array(
+			'fluid'            => null,
+			'customFontSize'   => null,
+			'defaultFontSizes' => null,
+			'dropCap'          => null,
+			'fontFamilies'     => null,
+			'fontSizes'        => null,
+			'fontStyle'        => null,
+			'fontWeight'       => null,
+			'letterSpacing'    => null,
+			'lineHeight'       => null,
+			'textAlign'        => null,
+			'textColumns'      => null,
+			'textDecoration'   => null,
+			'textTransform'    => null,
+			'writingMode'      => null,
+		),
+	);
+
+	const FONT_FAMILY_SCHEMA = array(
+		array(
+			'fontFamily' => null,
+			'name'       => null,
+			'slug'       => null,
+			'fontFace'   => array(
+				array(
+					'ascentOverride'        => null,
+					'descentOverride'       => null,
+					'fontDisplay'           => null,
+					'fontFamily'            => null,
+					'fontFeatureSettings'   => null,
+					'fontStyle'             => null,
+					'fontStretch'           => null,
+					'fontVariationSettings' => null,
+					'fontWeight'            => null,
+					'lineGapOverride'       => null,
+					'sizeAdjust'            => null,
+					'src'                   => null,
+					'unicodeRange'          => 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 `outline`, and `minHeight` properties.
+	 * @since 6.6.0 Added `background` sub properties to top-level only.
+	 * @since 6.6.0 Added `dimensions.aspectRatio`.
+	 * @var array
+	 */
+	const VALID_STYLES = array(
+		'background' => array(
+			'backgroundImage'      => null,
+			'backgroundAttachment' => null,
+			'backgroundPosition'   => null,
+			'backgroundRepeat'     => null,
+			'backgroundSize'       => null,
+		),
+		'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(
+			'aspectRatio' => null,
+			'minHeight'   => null,
+		),
+		'filter'     => array(
+			'duotone' => null,
+		),
+		'outline'    => array(
+			'color'  => null,
+			'offset' => null,
+			'style'  => null,
+			'width'  => 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,
+			'textAlign'      => null,
+			'textColumns'    => null,
+			'textDecoration' => null,
+			'textTransform'  => null,
+			'writingMode'    => null,
+		),
+		'css'        => null,
+	);
+
+	/**
+	 * Defines which pseudo selectors are enabled for which elements.
+	 *
+	 * The order of the selectors should be: link, any-link, visited, hover, focus, active.
+	 * This is to ensure the user action (hover, focus and active) styles have a higher
+	 * specificity than the visited styles, which in turn have a higher specificity than
+	 * the unvisited styles.
+	 *
+	 * See https://core.trac.wordpress.org/ticket/56928.
+	 * Note: this will affect both top-level and block-level elements.
+	 *
+	 * @since 6.1.0
+	 * @since 6.2.0 Added support for `:link` and `:any-link`.
+	 */
+	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
+		'link'   => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ),
+		'button' => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':active' ),
+	);
+
+	/**
+	 * 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',
+	);
+
+	/**
+	 * List of block support features that can have their related styles
+	 * generated under their own feature level selector rather than the block's.
+	 *
+	 * @since 6.1.0
+	 * @var string[]
+	 */
+	const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
+		'border'     => 'border',
+		'color'      => 'color',
+		'spacing'    => 'spacing',
+		'typography' => 'typography',
+	);
+
+	/**
+	 * Return the input schema at the root and per origin.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $schema The base schema.
+	 * @return array The schema at the root and per origin.
+	 *
+	 * Example:
+	 * schema_in_root_and_per_origin(
+	 *   array(
+	 *    'fontFamily' => null,
+	 *    'slug' => null,
+	 *   )
+	 * )
+	 *
+	 * Returns:
+	 * array(
+	 *  'fontFamily' => null,
+	 *  'slug' => null,
+	 *  'default' => array(
+	 *    'fontFamily' => null,
+	 *    'slug' => null,
+	 *  ),
+	 *  'blocks' => array(
+	 *    'fontFamily' => null,
+	 *    'slug' => null,
+	 *  ),
+	 *  'theme' => array(
+	 *     'fontFamily' => null,
+	 *     'slug' => null,
+	 *  ),
+	 *  'custom' => array(
+	 *     'fontFamily' => null,
+	 *     'slug' => null,
+	 *  ),
+	 * )
+	 */
+	protected static function schema_in_root_and_per_origin( $schema ) {
+		$schema_in_root_and_per_origin = $schema;
+		foreach ( static::VALID_ORIGINS as $origin ) {
+			$schema_in_root_and_per_origin[ $origin ] = $schema;
+		}
+		return $schema_in_root_and_per_origin;
+	}
+
+	/**
+	 * Returns a class name by an element name.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @param string $element The name of the element.
+	 * @return string The name of the class.
+	 */
+	public static function get_element_class_name( $element ) {
+		$class_name = '';
+
+		if ( isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] ) ) {
+			$class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
+		}
+
+		return $class_name;
+	}
+
+	/**
+	 * Options that settings.appearanceTools enables.
+	 *
+	 * @since 6.0.0
+	 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
+	 * @var array
+	 */
+	const APPEARANCE_TOOLS_OPT_INS = array(
+		array( 'background', 'backgroundImage' ),
+		array( 'background', 'backgroundSize' ),
+		array( 'border', 'color' ),
+		array( 'border', 'radius' ),
+		array( 'border', 'style' ),
+		array( 'border', 'width' ),
+		array( 'color', 'link' ),
+		array( 'color', 'heading' ),
+		array( 'color', 'button' ),
+		array( 'color', 'caption' ),
+		array( 'dimensions', 'aspectRatio' ),
+		array( 'dimensions', 'minHeight' ),
+		// BEGIN EXPERIMENTAL.
+		// Allow `position.fixed` to be opted-in by default.
+		// Sticky position support was backported to WordPress 6.2 in https://core.trac.wordpress.org/ticket/57618.
+		// While `fixed` was included as a valid setting, exposing it by default is still experimental.
+		array( 'position', 'fixed' ),
+		// END EXPERIMENTAL.
+		array( 'position', 'sticky' ),
+		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.
+	 * @since 6.5.0 Changed value from 2 to 3.
+	 * @var int
+	 */
+	const LATEST_SCHEMA = 3;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 5.8.0
+	 * @since 6.6.0 Key spacingScale by origin, and pre-generate the spacingSizes from spacingScale.
+	 *              Added unwrapping of shared block style variations into block type variations if registered.
+	 *
+	 * @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 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
+	 */
+	public function __construct( $theme_json = array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA ), $origin = 'theme' ) {
+		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
+			$origin = 'theme';
+		}
+
+		$this->theme_json    = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json, $origin );
+		$blocks_metadata     = static::get_blocks_metadata();
+		$valid_block_names   = array_keys( $blocks_metadata );
+		$valid_element_names = array_keys( static::ELEMENTS );
+		$valid_variations    = static::get_valid_block_style_variations( $blocks_metadata );
+		$this->theme_json    = static::unwrap_shared_block_style_variations( $this->theme_json, $valid_variations );
+		$this->theme_json    = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations );
+		$this->theme_json    = static::maybe_opt_in_into_settings( $this->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 ) );
+					}
+				}
+			}
+		}
+
+		// In addition to presets, spacingScale (which generates presets) is also keyed by origin.
+		$scale_path    = array( 'settings', 'spacing', 'spacingScale' );
+		$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
+		if ( null !== $spacing_scale ) {
+			// If the spacingScale is not already keyed by origin.
+			if ( empty( array_intersect( array_keys( $spacing_scale ), static::VALID_ORIGINS ) ) ) {
+				_wp_array_set( $this->theme_json, $scale_path, array( $origin => $spacing_scale ) );
+			}
+		}
+
+		// Pre-generate the spacingSizes from spacingScale.
+		$scale_path    = array( 'settings', 'spacing', 'spacingScale', $origin );
+		$spacing_scale = _wp_array_get( $this->theme_json, $scale_path, null );
+		if ( isset( $spacing_scale ) ) {
+			$sizes_path           = array( 'settings', 'spacing', 'spacingSizes', $origin );
+			$spacing_sizes        = _wp_array_get( $this->theme_json, $sizes_path, array() );
+			$spacing_scale_sizes  = static::compute_spacing_sizes( $spacing_scale );
+			$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
+			_wp_array_set( $this->theme_json, $sizes_path, $merged_spacing_sizes );
+		}
+	}
+
+	/**
+	 * Unwraps shared block style variations.
+	 *
+	 * It takes the shared variations (styles.variations.variationName) and
+	 * applies them to all the blocks that have the given variation registered
+	 * (styles.blocks.blockType.variations.variationName).
+	 *
+	 * For example, given the `core/paragraph` and `core/group` blocks have
+	 * registered the `section-a` style variation, and given the following input:
+	 *
+	 * {
+	 *   "styles": {
+	 *     "variations": {
+	 *       "section-a": { "color": { "background": "backgroundColor" } }
+	 *     }
+	 *   }
+	 * }
+	 *
+	 * It returns the following output:
+	 *
+	 * {
+	 *   "styles": {
+	 *     "blocks": {
+	 *       "core/paragraph": {
+	 *         "variations": {
+	 *             "section-a": { "color": { "background": "backgroundColor" } }
+	 *         },
+	 *       },
+	 *       "core/group": {
+	 *         "variations": {
+	 *           "section-a": { "color": { "background": "backgroundColor" } }
+	 *         }
+	 *       }
+	 *     }
+	 *   }
+	 * }
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $theme_json       A structure that follows the theme.json schema.
+	 * @param array $valid_variations Valid block style variations.
+	 *
+	 * @return array Theme json data with shared variation definitions unwrapped under appropriate block types.
+	 */
+	private static function unwrap_shared_block_style_variations( $theme_json, $valid_variations ) {
+		if ( empty( $theme_json['styles']['variations'] ) || empty( $valid_variations ) ) {
+			return $theme_json;
+		}
+
+		$new_theme_json = $theme_json;
+		$variations     = $new_theme_json['styles']['variations'];
+
+		foreach ( $valid_variations as $block_type => $registered_variations ) {
+			foreach ( $registered_variations as $variation_name ) {
+				$block_level_data = $new_theme_json['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+				$top_level_data   = $variations[ $variation_name ] ?? array();
+				$merged_data      = array_replace_recursive( $top_level_data, $block_level_data );
+				if ( ! empty( $merged_data ) ) {
+					_wp_array_set( $new_theme_json, array( 'styles', 'blocks', $block_type, 'variations', $variation_name ), $merged_data );
+				}
+			}
+		}
+
+		unset( $new_theme_json['styles']['variations'] );
+
+		return $new_theme_json;
+	}
+
+	/**
+	 * 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.
+	 * @since 6.6.0 Extended schema definition to allow enhanced block style variations.
+	 *
+	 * @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.
+	 * @param array $valid_variations    List of valid variations per block.
+	 * @return array The sanitized output.
+	 */
+	protected static function sanitize( $input, $valid_block_names, $valid_element_names, $valid_variations ) {
+
+		$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;
+
+			if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
+				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();
+
+		/*
+		 * Generate a schema for blocks.
+		 * - Block styles can contain `elements` & `variations` definitions.
+		 * - Variations definitions cannot be nested.
+		 * - Variations can contain styles for inner `blocks`.
+		 * - Variation inner `blocks` styles can contain `elements`.
+		 *
+		 * As each variation needs a `blocks` schema but further nested
+		 * inner `blocks`, the overall schema will be generated in multiple passes.
+		 */
+		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;
+		}
+
+		$block_style_variation_styles             = static::VALID_STYLES;
+		$block_style_variation_styles['blocks']   = $schema_styles_blocks;
+		$block_style_variation_styles['elements'] = $schema_styles_elements;
+
+		foreach ( $valid_block_names as $block ) {
+			// Build the schema for each block style variation.
+			$style_variation_names = array();
+			if (
+				! empty( $input['styles']['blocks'][ $block ]['variations'] ) &&
+				is_array( $input['styles']['blocks'][ $block ]['variations'] ) &&
+				isset( $valid_variations[ $block ] )
+			) {
+				$style_variation_names = array_intersect(
+					array_keys( $input['styles']['blocks'][ $block ]['variations'] ),
+					$valid_variations[ $block ]
+				);
+			}
+
+			$schema_styles_variations = array();
+			if ( ! empty( $style_variation_names ) ) {
+				$schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles );
+			}
+
+			$schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
+		}
+
+		$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;
+		$schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA );
+
+		// 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 ] = static::resolve_custom_css_format( $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.
+	 * @since 6.3.0 Removed append position parameter.
+	 *
+	 * @param string $selector  Original selector.
+	 * @param string $to_append Selector to append.
+	 * @return string The new selector.
+	 */
+	protected static function append_to_selector( $selector, $to_append ) {
+		if ( ! str_contains( $selector, ',' ) ) {
+			return $selector . $to_append;
+		}
+		$new_selectors = array();
+		$selectors     = explode( ',', $selector );
+		foreach ( $selectors as $sel ) {
+			$new_selectors[] = $sel . $to_append;
+		}
+		return implode( ',', $new_selectors );
+	}
+
+	/**
+	 * Prepends a sub-selector to an existing one.
+	 *
+	 * Given the compounded $selector "h1, h2, h3"
+	 * and the $to_prepend selector ".some-class " the result will be
+	 * ".some-class h1, .some-class  h2, .some-class  h3".
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param string $selector   Original selector.
+	 * @param string $to_prepend Selector to prepend.
+	 * @return string The new selector.
+	 */
+	protected static function prepend_to_selector( $selector, $to_prepend ) {
+		if ( ! str_contains( $selector, ',' ) ) {
+			return $to_prepend . $selector;
+		}
+		$new_selectors = array();
+		$selectors     = explode( ',', $selector );
+		foreach ( $selectors as $sel ) {
+			$new_selectors[] = $to_prepend . $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.
+	 * @since 6.6.0 Added non-core block style variations to generated metadata.
+	 *
+	 * @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();
+		$style_registry = WP_Block_Styles_Registry::get_instance();
+
+		// Is there metadata for all currently registered blocks?
+		$blocks = array_diff_key( $blocks, static::$blocks_metadata );
+		if ( empty( $blocks ) ) {
+			/*
+			 * New block styles may have been registered within WP_Block_Styles_Registry.
+			 * Update block metadata for any new block style variations.
+			 */
+			$registered_styles = $style_registry->get_all_registered();
+			foreach ( static::$blocks_metadata as $block_name => $block_metadata ) {
+				if ( ! empty( $registered_styles[ $block_name ] ) ) {
+					$style_selectors = $block_metadata['styleVariations'] ?? array();
+
+					foreach ( $registered_styles[ $block_name ] as $block_style ) {
+						if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
+							$style_selectors[ $block_style['name'] ] = static::get_block_style_variation_selector( $block_style['name'], $block_metadata['selector'] );
+						}
+					}
+
+					static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+				}
+			}
+			return static::$blocks_metadata;
+		}
+
+		foreach ( $blocks as $block_name => $block_type ) {
+			$root_selector = wp_get_block_css_selector( $block_type );
+
+			static::$blocks_metadata[ $block_name ]['selector']  = $root_selector;
+			static::$blocks_metadata[ $block_name ]['selectors'] = static::get_block_selectors( $block_type, $root_selector );
+
+			$elements = static::get_block_element_selectors( $root_selector );
+			if ( ! empty( $elements ) ) {
+				static::$blocks_metadata[ $block_name ]['elements'] = $elements;
+			}
+
+			// The block may or may not have a duotone selector.
+			$duotone_selector = wp_get_block_css_selector( $block_type, 'filter.duotone' );
+
+			// Keep backwards compatibility for support.color.__experimentalDuotone.
+			if ( null === $duotone_selector ) {
+				$duotone_support = $block_type->supports['color']['__experimentalDuotone'] ?? null;
+
+				if ( $duotone_support ) {
+					$root_selector    = wp_get_block_css_selector( $block_type );
+					$duotone_selector = static::scope_selector( $root_selector, $duotone_support );
+				}
+			}
+
+			if ( null !== $duotone_selector ) {
+				static::$blocks_metadata[ $block_name ]['duotone'] = $duotone_selector;
+			}
+
+			// If the block has style variations, append their selectors to the block metadata.
+			$style_selectors = array();
+			if ( ! empty( $block_type->styles ) ) {
+				foreach ( $block_type->styles as $style ) {
+					$style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+				}
+			}
+
+			// Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json.
+			$registered_styles = $style_registry->get_registered_styles_for_block( $block_name );
+			foreach ( $registered_styles as $style ) {
+				$style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+			}
+
+			if ( ! empty( $style_selectors ) ) {
+				static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+			}
+		}
+
+		return static::$blocks_metadata;
+	}
+
+	/**
+	 * Given a tree, removes the keys that are not present in the schema.
+	 *
+	 * It is recursive and modifies the input in-place.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @param array $tree   Input to process.
+	 * @param array $schema Schema to adhere to.
+	 * @return array The modified $tree.
+	 */
+	protected static function remove_keys_not_in_schema( $tree, $schema ) {
+		if ( ! is_array( $tree ) ) {
+			return $tree;
+		}
+
+		foreach ( $tree as $key => $value ) {
+			// Remove keys not in the schema or with null/empty values.
+			if ( ! array_key_exists( $key, $schema ) ) {
+				unset( $tree[ $key ] );
+				continue;
+			}
+
+			// Check if the value is an array and requires further processing.
+			if ( is_array( $value ) && is_array( $schema[ $key ] ) ) {
+				// Determine if it is an associative or indexed array.
+				$schema_is_assoc = self::is_assoc( $value );
+
+				if ( $schema_is_assoc ) {
+					// If associative, process as a single object.
+					$tree[ $key ] = self::remove_keys_not_in_schema( $value, $schema[ $key ] );
+
+					if ( empty( $tree[ $key ] ) ) {
+						unset( $tree[ $key ] );
+					}
+				} else {
+					// If indexed, process each item in the array.
+					foreach ( $value as $item_key => $item_value ) {
+						if ( isset( $schema[ $key ][0] ) && is_array( $schema[ $key ][0] ) ) {
+							$tree[ $key ][ $item_key ] = self::remove_keys_not_in_schema( $item_value, $schema[ $key ][0] );
+						} else {
+							// If the schema does not define a further structure, keep the value as is.
+							$tree[ $key ][ $item_key ] = $item_value;
+						}
+					}
+				}
+			} elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
+				unset( $tree[ $key ] );
+			}
+		}
+
+		return $tree;
+	}
+
+	/**
+	 * Checks if the given array is associative.
+	 *
+	 * @since 6.5.0
+	 * @param array $data The array to check.
+	 * @return bool True if the array is associative, false otherwise.
+	 */
+	protected static function is_assoc( $data ) {
+		if ( array() === $data ) {
+			return false;
+		}
+		return array_keys( $data ) !== range( 0, count( $data ) - 1 );
+	}
+
+	/**
+	 * Returns the existing settings for each block.
+	 *
+	 * Example:
+	 *
+	 *     {
+	 *       'root': {
+	 *         'color': {
+	 *           'custom': true
+	 *         }
+	 *       },
+	 *       'core/paragraph': {
+	 *         'spacing': {
+	 *           'customPadding': true
+	 *         }
+	 *       }
+	 *     }
+	 *
+	 * @since 5.8.0
+	 *
+	 * @return array Settings per block.
+	 */
+	public function get_settings() {
+		if ( ! isset( $this->theme_json['settings'] ) ) {
+			return array();
+		} else {
+			return $this->theme_json['settings'];
+		}
+	}
+
+	/**
+	 * Returns the stylesheet that results of processing
+	 * the theme.json structure this object represents.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
+	 * @since 6.6.0 Added option to skip root layout or block style variation styles.
+	 *
+	 * @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.
+	 * @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
+	 *                       - `root_selector` which overwrites and forces a given selector to be used on the root node
+	 *                       - `skip_root_layout_styles` which omits root layout styles from the generated stylesheet.
+	 *                       - `include_block_style_variations` which includes CSS for block style variations.
+	 * @return string The resulting 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.0' );
+			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, $options );
+		$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 = static::scope_style_node_selectors( $options['scope'], $node );
+			}
+			unset( $node );
+		}
+
+		if ( ! empty( $options['root_selector'] ) ) {
+			if ( false !== $root_settings_key ) {
+				$setting_nodes[ $root_settings_key ]['selector'] = $options['root_selector'];
+			}
+			if ( false !== $root_style_key ) {
+				$style_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 && empty( $options['skip_root_layout_styles'] ) ) {
+				$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';
+			$post_template_selector = '.wp-block-post-template';
+			if ( ! empty( $options['scope'] ) ) {
+				$root_selector          = static::scope_selector( $options['scope'], $root_selector );
+				$columns_selector       = static::scope_selector( $options['scope'], $columns_selector );
+				$post_template_selector = static::scope_selector( $options['scope'], $post_template_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',
+				),
+				array(
+					'path'     => array( 'styles', 'blocks', 'core/post-template' ),
+					'selector' => $post_template_selector,
+					'name'     => 'core/post-template',
+				),
+			);
+
+			foreach ( $base_styles_nodes as $base_style_node ) {
+				$stylesheet .= $this->get_layout_styles( $base_style_node, $types );
+			}
+		}
+
+		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 ) ) {
+			// Add the global styles root CSS.
+			$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) );
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Processes the CSS, to apply nesting.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $css      The CSS to process.
+	 * @param string $selector The selector to nest.
+	 * @return string The processed CSS.
+	 */
+	protected function process_blocks_custom_css( $css, $selector ) {
+		$processed_css = '';
+
+		if ( empty( $css ) ) {
+			return $processed_css;
+		}
+
+		// Split CSS nested rules.
+		$parts = explode( '&', $css );
+		foreach ( $parts as $part ) {
+			if ( empty( $part ) ) {
+				continue;
+			}
+			$is_root_css = ( ! str_contains( $part, '{' ) );
+			if ( $is_root_css ) {
+				// If the part doesn't contain braces, it applies to the root level.
+				$processed_css .= ':root :where(' . trim( $selector ) . '){' . trim( $part ) . '}';
+			} else {
+				// If the part contains braces, it's a nested CSS rule.
+				$part = explode( '{', str_replace( '}', '', $part ) );
+				if ( count( $part ) !== 2 ) {
+					continue;
+				}
+				$nested_selector = $part[0];
+				$css_value       = $part[1];
+
+				/*
+				 * Handle pseudo elements such as ::before, ::after etc. Regex will also
+				 * capture any leading combinator such as >, +, or ~, as well as spaces.
+				 * This allows pseudo elements as descendants e.g. `.parent ::before`.
+				 */
+				$matches            = array();
+				$has_pseudo_element = preg_match( '/([>+~\s]*::[a-zA-Z-]+)/', $nested_selector, $matches );
+				$pseudo_part        = $has_pseudo_element ? $matches[1] : '';
+				$nested_selector    = $has_pseudo_element ? str_replace( $pseudo_part, '', $nested_selector ) : $nested_selector;
+
+				// Finalize selector and re-append pseudo element if required.
+				$part_selector  = str_starts_with( $nested_selector, ' ' )
+					? static::scope_selector( $selector, $nested_selector )
+					: static::append_to_selector( $selector, $nested_selector );
+				$final_selector = ":root :where($part_selector)$pseudo_part";
+
+				$processed_css .= $final_selector . '{' . trim( $css_value ) . '}';
+			}
+		}
+		return $processed_css;
+	}
+
+	/**
+	 * Returns the global styles custom css.
+	 *
+	 * @since 6.2.0
+	 * @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead.
+	 *
+	 * @return string The global styles custom CSS.
+	 */
+	public function get_custom_css() {
+		_deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' );
+		$block_custom_css = '';
+		$block_nodes      = $this->get_block_custom_css_nodes();
+		foreach ( $block_nodes as $node ) {
+			// The node selector will have its specificity set to 0-1-0 within process_blocks_custom_css.
+			$block_custom_css .= $this->get_block_custom_css( $node['css'], $node['selector'] );
+		}
+
+		return $this->get_base_custom_css() . $block_custom_css;
+	}
+
+	/**
+	 * Returns the global styles base custom CSS.
+	 * This function is deprecated; please do not sync to core.
+	 *
+	 * @return string The global styles base custom CSS.
+	 */
+	public function get_base_custom_css() {
+		_deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_stylesheet' );
+		return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : '';
+	}
+
+	/**
+	 * Returns the block nodes with custom CSS.
+	 * This function is deprecated; please do not sync to core.
+	 *
+	 * @return array The block nodes.
+	 */
+	public function get_block_custom_css_nodes() {
+		_deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_block_nodes' );
+		$block_nodes = array();
+
+		// Add the global styles block CSS.
+		if ( isset( $this->theme_json['styles']['blocks'] ) ) {
+			foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) {
+				$custom_block_css = isset( $this->theme_json['styles']['blocks'][ $name ]['css'] )
+					? $this->theme_json['styles']['blocks'][ $name ]['css']
+					: null;
+				if ( $custom_block_css ) {
+					$block_nodes[] = array(
+						'name'     => $name,
+						'selector' => static::$blocks_metadata[ $name ]['selector'],
+						'css'      => $custom_block_css,
+					);
+				}
+			}
+		}
+
+		return $block_nodes;
+	}
+
+	/**
+	 * Returns the global styles custom CSS for a single block.
+	 * This function is deprecated; please do not sync to core.
+	 *
+	 * @param array  $css The block css node.
+	 * @param string $selector The block selector.
+	 *
+	 * @return string The global styles custom CSS for the block.
+	 */
+	public function get_block_custom_css( $css, $selector ) {
+		_deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_styles_for_block' );
+		return $this->process_blocks_custom_css( $css, $selector );
+	}
+
+	/**
+	 * Returns the page templates of the active theme.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return array
+	 */
+	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 $custom_templates;
+	}
+
+	/**
+	 * Returns the template part data of active theme.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @return array
+	 */
+	public function get_template_parts() {
+		$template_parts = array();
+		if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
+			return $template_parts;
+		}
+
+		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 = '';
+
+		foreach ( $style_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+			$block_rules .= static::get_styles_for_block( $metadata );
+		}
+
+		return $block_rules;
+	}
+
+	/**
+	 * Gets the CSS layout rules for a particular block from theme.json layout definitions.
+	 *
+	 * @since 6.1.0
+	 *
+	 * @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, $types = array() ) {
+		$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( 'layout' ), false ) && ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
+				return $block_rules;
+			}
+		}
+
+		$selector                 = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
+		$has_block_gap_support    = isset( $this->theme_json['settings']['spacing']['blockGap'] );
+		$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       = gutenberg_get_layout_definitions();
+		$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 = $block_type->supports['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 && 'grid' !== $layout_definition_key ) {
+						continue;
+					}
+
+					$class_name    = $layout_definition['className'] ?? false;
+					$spacing_rules = $layout_definition['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 ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$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       = $layout_definition['className'] ?? false;
+				$base_style_rules = $layout_definition['baseStyles'] ?? array();
+
+				if (
+					! empty( $class_name ) &&
+					is_array( $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();
+
+						// Skip outputting base styles for flow and constrained layout types if theme doesn't support theme.json. The 'base-layout-styles' type flags this.
+						if ( in_array( 'base-layout-styles', $types, true ) && ( 'default' === $layout_definition['name'] || 'constrained' === $layout_definition['name'] ) ) {
+							continue;
+						}
+
+						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 ) {
+								// Skip rules that reference content size or wide size if they are not defined in the theme.json.
+								if (
+									is_string( $css_value ) &&
+									( str_contains( $css_value, '--global--content-size' ) || str_contains( $css_value, '--global--wide-size' ) ) &&
+									! isset( $this->theme_json['settings']['layout']['contentSize'] ) &&
+									! isset( $this->theme_json['settings']['layout']['wideSize'] )
+								) {
+									continue;
+								}
+
+								if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
+									$declarations[] = array(
+										'name'  => $css_property,
+										'value' => $css_value,
+									);
+								}
+							}
+
+							$layout_selector = sprintf(
+								'.%s%s',
+								$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 || static::ROOT_CSS_PROPERTIES_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 ) {
+			if ( empty( $preset_metadata['classes'] ) ) {
+				continue;
+			}
+
+			$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 );
+
+					// $selector is often empty, so we can save ourselves the `append_to_selector()` call then.
+					$new_selector = '' === $selector ? $class_name : static::append_to_selector( $selector, $class_name );
+					$stylesheet  .= static::to_ruleset(
+						$new_selector,
+						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.
+	 */
+	public static function scope_selector( $scope, $selector ) {
+		if ( ! $scope || ! $selector ) {
+			return $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;
+	}
+
+	/**
+	 * Scopes the selectors for a given style node. This includes the primary
+	 * selector, i.e. `$node['selector']`, as well as any custom selectors for
+	 * features and subfeatures, e.g. `$node['selectors']['border']` etc.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $scope Selector to scope to.
+	 * @param array  $node  Style node with selectors to scope.
+	 *
+	 * @return array Node with updated selectors.
+	 */
+	protected static function scope_style_node_selectors( $scope, $node ) {
+		$node['selector'] = static::scope_selector( $scope, $node['selector'] );
+
+		if ( empty( $node['selectors'] ) ) {
+			return $node;
+		}
+
+		foreach ( $node['selectors'] as $feature => $selector ) {
+			if ( is_string( $selector ) ) {
+				$node['selectors'][ $feature ] = static::scope_selector( $scope, $selector );
+			}
+			if ( is_array( $selector ) ) {
+				foreach ( $selector as $subfeature => $subfeature_selector ) {
+					$node['selectors'][ $feature ][ $subfeature ] = static::scope_selector( $scope, $subfeature_selector );
+				}
+			}
+		}
+
+		return $node;
+	}
+
+	/**
+	 * 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
+	 * @since 6.6.0 Passing $settings to the callbacks defined in static::PRESETS_METADATA.
+	 *
+	 * @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, $settings );
+				} 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 ) {
+			if ( empty( $preset_metadata['css_vars'] ) ) {
+				continue;
+			}
+
+			$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 = $settings['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.
+	 * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
+	 * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value(). Using style engine to correctly fetch background CSS values.
+	 * @since 6.7.0 Allow ref resolution of background properties.
+	 *
+	 * @param array   $styles Styles to process.
+	 * @param array   $settings Theme settings.
+	 * @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 ( empty( $styles ) ) {
+			return array();
+		}
+
+		if ( null === $properties ) {
+			$properties = static::PROPERTIES_METADATA;
+		}
+		$declarations             = array();
+		$root_variable_duplicates = array();
+		$root_style_length        = strlen( '--wp--style--root--' );
+
+		foreach ( $properties as $css_property => $value_path ) {
+			if ( ! is_array( $value_path ) ) {
+				continue;
+			}
+
+			$is_root_style = str_starts_with( $css_property, '--wp--style--root--' );
+			if ( $is_root_style && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
+				continue;
+			}
+
+			$value = static::get_property_value( $styles, $value_path, $theme_json );
+
+			// 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 ( $is_root_style && $use_root_padding ) {
+				$root_variable_duplicates[] = substr( $css_property, $root_style_length );
+			}
+
+			/*
+			 * Processes background image styles.
+			 * If the value is a URL, it will be converted to a CSS `url()` value.
+			 * For an uploaded image (images with a database ID), apply size and position
+			 * defaults equal to those applied in block supports in lib/background.php.
+			 */
+			if ( 'background-image' === $css_property && ! empty( $value ) ) {
+				$background_styles = gutenberg_style_engine_get_styles(
+					array( 'background' => array( 'backgroundImage' => $value ) )
+				);
+
+				$value = $background_styles['declarations'][ $css_property ];
+			}
+			if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
+				if ( 'background-size' === $css_property ) {
+					$value = 'cover';
+				}
+				// If the background size is set to `contain` and no position is set, set the position to `center`.
+				if ( 'background-position' === $css_property ) {
+					$background_size = $styles['background']['backgroundSize'] ?? null;
+					$value           = 'contain' === $background_size ? '50% 50%' : null;
+				}
+			}
+
+			// 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;
+			}
+
+			// Look up protected properties, keyed by value path.
+			// Skip protected properties that are explicitly set to `null`.
+			$path_string = implode( '.', $value_path );
+			if (
+				isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
+				_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
+			) {
+				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.
+				 * Pass the current theme_json settings to override any global settings.
+				 */
+				$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ), $settings );
+			}
+
+			if ( 'aspect-ratio' === $css_property ) {
+				// For aspect ratio to work, other dimensions rules must be unset.
+				// This ensures that a fixed height does not override the aspect ratio.
+				$declarations[] = array(
+					'name'  => 'min-height',
+					'value' => 'unset',
+				);
+			}
+
+			$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 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.
+	 * @since 6.7.0 Added support for background image refs
+	 *
+	 * @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 '';
+		}
+
+		/*
+		 * Where the current value is an array with a 'ref' key pointing
+		 * to a path, this converts that path into the value at that path.
+		 * For example: { "ref": "style.color.background" } => "#fff".
+		 */
+		if ( is_array( $value ) && isset( $value['ref'] ) ) {
+			$value_path = explode( '.', $value['ref'] );
+			$ref_value  = _wp_array_get( $theme_json, $value_path, null );
+			// Background Image refs can refer to a string or an array containing a URL string.
+			$ref_value_url = $ref_value['url'] ?? null;
+			// Only use the ref value if we find anything.
+			if ( ! empty( $ref_value ) && ( is_string( $ref_value ) || is_string( $ref_value_url ) ) ) {
+				$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;
+		}
+
+		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_CSS_PROPERTIES_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.
+	 * @param array $options    An array of options to facilitate filtering style node generation
+	 *                          The options currently supported are:
+	 *                            - `include_block_style_variations` which includes CSS for block style variations.
+	 * @return array An array of style nodes metadata.
+	 */
+	protected static function get_style_nodes( $theme_json, $selectors = array(), $options = 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.
+				if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
+					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, $options );
+		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.
+	 * @param array $options {
+	 *     Optional. An array of options for now used for internal purposes only (may change without notice).
+	 *
+	 *     @type bool $include_block_style_variations Includes nodes for block style variations. Default false.
+	 *     @type bool $include_node_paths_only        Return only block nodes node paths. Default false.
+	 * }
+	 * @return array The block nodes in theme.json.
+	 */
+	private static function get_block_nodes( $theme_json, $selectors = array(), $options = array() ) {
+		$nodes = array();
+
+		if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+			return $nodes;
+		}
+
+		$include_variations      = $options['include_block_style_variations'] ?? false;
+		$include_node_paths_only = $options['include_node_paths_only'] ?? false;
+
+		// If only node paths are to be returned, skip selector assignment.
+		if ( ! $include_node_paths_only ) {
+			$selectors = empty( $selectors ) ? static::get_blocks_metadata() : $selectors;
+		}
+
+		foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
+			$node_path = array( 'styles', 'blocks', $name );
+			if ( $include_node_paths_only ) {
+				$variation_paths = array();
+				if ( $include_variations && isset( $node['variations'] ) ) {
+					foreach ( $node['variations'] as $variation => $variation_node ) {
+						$variation_paths[] = array(
+							'path' => array( 'styles', 'blocks', $name, 'variations', $variation ),
+						);
+					}
+				}
+				$node = array(
+					'path' => $node_path,
+				);
+				if ( ! empty( $variation_paths ) ) {
+					$node['variations'] = $variation_paths;
+				}
+				$nodes[] = $node;
+			} else {
+				$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 ]['selectors'] ) ) {
+					$feature_selectors = $selectors[ $name ]['selectors'];
+				}
+
+				$variation_selectors = array();
+
+				if ( $include_variations && isset( $node['variations'] ) ) {
+					foreach ( $node['variations'] as $variation => $node ) {
+						$variation_selectors[] = array(
+							'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
+							'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
+						);
+					}
+				}
+
+				$nodes[] = array(
+					'name'       => $name,
+					'path'       => $node_path,
+					'selector'   => $selector,
+					'selectors'  => $feature_selectors,
+					'duotone'    => $duotone_selector,
+					'variations' => $variation_selectors,
+					'css'        => $selector,
+				);
+			}
+			if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
+				foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
+					$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
+					if ( $include_node_paths_only ) {
+						$nodes[] = array(
+							'path' => $node_path,
+						);
+						continue;
+					}
+
+					$nodes[] = array(
+						'path'     => $node_path,
+						'selector' => $selectors[ $name ]['elements'][ $element ],
+					);
+
+					// Handle any pseudo selectors for the element.
+					if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
+						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+								$node_path = array( 'styles', 'blocks', $name, 'elements', $element );
+								if ( $include_node_paths_only ) {
+									$nodes[] = array(
+										'path' => $node_path,
+									);
+									continue;
+								}
+
+								$nodes[] = array(
+									'path'     => $node_path,
+									'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
+	 * @since 6.6.0 Setting a min-height of HTML when root styles have a background gradient or image.
+	 *
+	 * @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         = $this->theme_json['settings'] ?? null;
+		$is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector;
+
+		$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
+
+		// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
+		$style_variation_declarations = array();
+		$style_variation_custom_css   = array();
+		if ( ! empty( $block_metadata['variations'] ) ) {
+			foreach ( $block_metadata['variations'] as $style_variation ) {
+				$style_variation_node           = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
+				$clean_style_variation_selector = trim( $style_variation['selector'] );
+
+				// Generate any feature/subfeature style declarations for the current style variation.
+				$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );
+
+				// Combine selectors with style variation's selector and add to overall style variation declarations.
+				foreach ( $variation_declarations as $current_selector => $new_declarations ) {
+					/*
+					 * Clean up any whitespace between comma separated selectors.
+					 * This prevents these spaces breaking compound selectors such as:
+					 * - `.wp-block-list:not(.wp-block-list .wp-block-list)`
+					 * - `.wp-block-image img, .wp-block-image.my-class img`
+					 */
+					$clean_current_selector = preg_replace( '/,\s+/', ',', $current_selector );
+					$shortened_selector     = str_replace( $block_metadata['selector'], '', $clean_current_selector );
+
+					// Prepend the variation selector to the current selector.
+					$split_selectors    = explode( ',', $shortened_selector );
+					$updated_selectors  = array_map(
+						static function ( $split_selector ) use ( $clean_style_variation_selector ) {
+							return $clean_style_variation_selector . $split_selector;
+						},
+						$split_selectors
+					);
+					$combined_selectors = implode( ',', $updated_selectors );
+
+					// Add the new declarations to the overall results under the modified selector.
+					$style_variation_declarations[ $combined_selectors ] = $new_declarations;
+				}
+				// Compute declarations for remaining styles not covered by feature level selectors.
+				$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
+				// Store custom CSS for the style variation.
+				if ( isset( $style_variation_node['css'] ) ) {
+					$style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
+				}
+			}
+		}
+
+		/*
+		 * 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();
+
+		if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
+			$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,
+				static 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 ] ) &&
+			isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] )
+			&& 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. Bespoke declaration modifiers:
+		 * - 'filter': Separate the declarations that use the general selector
+		 * from the ones using the duotone selector.
+		 * - 'background|background-image': set the html min-height to 100%
+		 * to ensure the background covers the entire viewport.
+		 *
+		 */
+		$declarations_duotone       = array();
+		$should_set_root_min_height = false;
+
+		foreach ( $declarations as $index => $declaration ) {
+			if ( 'filter' === $declaration['name'] ) {
+				/*
+				 * 'unset' filters happen when a filter is unset
+				 * in the site-editor UI. Because the 'unset' value
+				 * in the user origin overrides the value in the
+				 * theme origin, we can skip rendering anything
+				 * here as no filter needs to be applied anymore.
+				 * So only add declarations to with values other
+				 * than 'unset'.
+				 */
+				if ( 'unset' !== $declaration['value'] ) {
+					$declarations_duotone[] = $declaration;
+				}
+				unset( $declarations[ $index ] );
+			}
+
+			if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
+				$should_set_root_min_height = true;
+			}
+		}
+
+		/*
+		 * If root styles has a background-image or a background (gradient) set,
+		 * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
+		 * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
+		 * and matches the behavior of the site editor.
+		 */
+		if ( $should_set_root_min_height ) {
+			$block_rules .= static::to_ruleset(
+				'html',
+				array(
+					array(
+						'name'  => 'min-height',
+						'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
+					),
+				)
+			);
+		}
+
+		// Update declarations if there are separators with only background color defined.
+		if ( '.wp-block-separator' === $selector ) {
+			$declarations = static::update_separator_declarations( $declarations );
+		}
+
+		/*
+		 * Root selector (body) styles should not be wrapped in `:root where()` to keep
+		 * specificity at (0,0,1) and maintain backwards compatibility.
+		 *
+		 * Top-level element styles using element-only specificity selectors should
+		 * not get wrapped in `:root :where()` to maintain backwards compatibility.
+		 *
+		 * Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so
+		 * still need to be wrapped in `:root :where` to cap specificity for nested
+		 * variations etc. Pseudo selectors won't match the ELEMENTS selector exactly.
+		 */
+		$element_only_selector = $is_root_selector || (
+				$current_element &&
+				isset( static::ELEMENTS[ $current_element ] ) &&
+				// buttons, captions etc. still need `:root :where()` as they are class based selectors.
+				! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) &&
+				static::ELEMENTS[ $current_element ] === $selector
+			);
+
+		// 2. Generate and append the rules that use the general selector.
+		$general_selector = $element_only_selector ? $selector : ":root :where($selector)";
+		$block_rules     .= static::to_ruleset( $general_selector, $declarations );
+
+		// 3. Generate and append the rules that use the duotone selector.
+		if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
+			$block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
+		}
+
+		// 4. Generate Layout block gap styles.
+		if (
+			! $is_root_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( ":root :where($feature_selector)", $individual_feature_declarations );
+		}
+
+		// 6. Generate and append the style variation rulesets.
+		foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
+			$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
+			if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
+				$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
+			}
+		}
+
+		// 7. Generate and append any custom CSS rules.
+		if ( isset( $node['css'] ) && ! $is_root_selector ) {
+			$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
+		}
+
+		return $block_rules;
+	}
+
+	/**
+	 * Outputs the CSS for layout rules on the root.
+	 *
+	 * @since 6.1.0
+	 * @since 6.6.0 Use `ROOT_CSS_PROPERTIES_SELECTOR` for CSS custom properties.
+	 *
+	 * @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         = $this->theme_json['settings'] ?? array();
+		$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
+
+		/*
+		* 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         .= static::ROOT_CSS_PROPERTIES_SELECTOR . ' { --wp--style--global--content-size: ' . $content_size . ';';
+			$css         .= '--wp--style--global--wide-size: ' . $wide_size . '; }';
+		}
+
+		/*
+		* Reset default browser margin on the body element.
+		* This is set on the body selector **before** generating the ruleset
+		* from the `theme.json`. This is to ensure that if the `theme.json` declares
+		* `margin` in its `spacing` declaration for the `body` element then these
+		* user-generated values take precedence in the CSS cascade.
+		* @link https://github.com/WordPress/gutenberg/issues/36147.
+		*/
+		$css .= ':where(body) { margin: 0; }';
+
+		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); }';
+			// 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); }';
+			// Nested children of the container with left and right padding that are not full aligned do not get padding, unless they are direct children of an alignfull flow container.
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }';
+			// Alignfull direct children of the containers that are targeted by the rule above do not need negative margins.
+			$css .= '.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 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 styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
+		if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
+			$block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
+			$css            .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";
+			$css            .= ':where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+			$css            .= ':where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+
+			// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+			$css .= static::ROOT_CSS_PROPERTIES_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_value 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_value = false ) {
+		if ( is_bool( $path ) ) {
+			return $path;
+		}
+
+		if ( is_array( $path ) ) {
+			$value = _wp_array_get( $data, $path );
+			if ( null !== $value ) {
+				return $value;
+			}
+		}
+
+		return $default_value;
+	}
+
+	/**
+	 * Merges new incoming data.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Duotone preset also has origins.
+	 * @since 6.6.0 Use the spacingScale keyed by origin, and re-generate the
+	 *              spacingSizes from spacingScale.
+	 *
+	 * @param WP_Theme_JSON_Gutenberg $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 );
+
+		/*
+		 * Recompute all the spacing sizes based on the new hierarchy of data. In the constructor
+		 * spacingScale and spacingSizes are both keyed by origin and VALID_ORIGINS is ordered, so
+		 * we can allow partial spacingScale data to inherit missing data from earlier layers when
+		 * computing the spacing sizes.
+		 *
+		 * This happens before the presets are merged to ensure that default spacing sizes can be
+		 * removed from the theme origin if $prevent_override is true.
+		 */
+		$flattened_spacing_scale = array();
+		foreach ( static::VALID_ORIGINS as $origin ) {
+			$scale_path = array( 'settings', 'spacing', 'spacingScale', $origin );
+
+			// Apply the base spacing scale to the current layer.
+			$base_spacing_scale      = _wp_array_get( $this->theme_json, $scale_path, array() );
+			$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $base_spacing_scale );
+
+			$spacing_scale = _wp_array_get( $incoming_data, $scale_path, null );
+			if ( ! isset( $spacing_scale ) ) {
+				continue;
+			}
+
+			// Allow partial scale settings by merging with lower layers.
+			$flattened_spacing_scale = array_replace( $flattened_spacing_scale, $spacing_scale );
+
+			// Generate and merge the scales for this layer.
+			$sizes_path           = array( 'settings', 'spacing', 'spacingSizes', $origin );
+			$spacing_sizes        = _wp_array_get( $incoming_data, $sizes_path, array() );
+			$spacing_scale_sizes  = static::compute_spacing_sizes( $flattened_spacing_scale );
+			$merged_spacing_sizes = static::merge_spacing_sizes( $spacing_scale_sizes, $spacing_sizes );
+
+			_wp_array_set( $incoming_data, $sizes_path, $merged_spacing_sizes );
+		}
+
+		/*
+		 * 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_metadata ) {
+				$prevent_override = $preset_metadata['prevent_override'];
+				if ( is_array( $prevent_override ) ) {
+					$prevent_override = _wp_array_get( $this->theme_json['settings'], $preset_metadata['prevent_override'] );
+				}
+
+				foreach ( static::VALID_ORIGINS as $origin ) {
+					$base_path = $node['path'];
+					foreach ( $preset_metadata['path'] as $leaf ) {
+						$base_path[] = $leaf;
+					}
+
+					$path   = $base_path;
+					$path[] = $origin;
+
+					$content = _wp_array_get( $incoming_data, $path, null );
+					if ( ! isset( $content ) ) {
+						continue;
+					}
+
+					// Set names for theme presets based on the slug if they are not set and can use default names.
+					if ( 'theme' === $origin && $preset_metadata['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;
+								}
+							}
+						}
+					}
+
+					// Filter out default slugs from theme presets when defaults should not be overridden.
+					if ( 'theme' === $origin && $prevent_override ) {
+						$slugs_node    = static::get_default_slugs( $this->theme_json, $node['path'] );
+						$preset_global = _wp_array_get( $slugs_global, $preset_metadata['path'], array() );
+						$preset_node   = _wp_array_get( $slugs_node, $preset_metadata['path'], array() );
+						$preset_slugs  = array_merge_recursive( $preset_global, $preset_node );
+
+						$content = static::filter_slugs( $content, $preset_slugs );
+					}
+
+					_wp_array_set( $this->theme_json, $path, $content );
+				}
+			}
+		}
+
+		/*
+		 * Style values are merged at the leaf level, however
+		 * some values provide exceptions, namely style values that are
+		 * objects and represent unique definitions for the style.
+		 */
+		$style_nodes = static::get_block_nodes(
+			$this->theme_json,
+			array(),
+			array( 'include_node_paths_only' => true )
+		);
+
+		// Add top-level styles.
+		$style_nodes[] = array( 'path' => array( 'styles' ) );
+
+		foreach ( $style_nodes as $style_node ) {
+			$path = $style_node['path'];
+			/*
+			 * Background image styles should be replaced, not merged,
+			 * as they themselves are specific object definitions for the style.
+			 */
+			$background_image_path = array_merge( $path, static::PROPERTIES_METADATA['background-image'] );
+			$content               = _wp_array_get( $incoming_data, $background_image_path, null );
+			if ( isset( $content ) ) {
+				_wp_array_set( $this->theme_json, $background_image_path, $content );
+			}
+		}
+	}
+
+	/**
+	 * 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 );
+
+		$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 );
+				}
+			}
+		}
+
+		return $filters;
+	}
+
+	/**
+	 * 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' );
+
+		if ( is_bool( $override ) ) {
+			return $override;
+		}
+
+		/*
+		 * 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;
+		}
+	}
+
+	/**
+	 * 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.
+	 *
+	 * For example:
+	 *
+	 *  array(
+	 *   'color' => array(
+	 *     'palette'   => array( 'slug-1', 'slug-2' ),
+	 *     'gradients' => array( 'slug-3', 'slug-4' ),
+	 *   ),
+	 * )
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $data      A theme.json like structure.
+	 * @param array $node_path The path to inspect. It's 'settings' by default.
+	 * @return array
+	 */
+	protected static function get_default_slugs( $data, $node_path ) {
+		$slugs = array();
+
+		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;
+			}
+
+			$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 $slugs;
+	}
+
+	/**
+	 * Gets a `default`'s preset name by a provided slug.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @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 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;
+		}
+
+		$new_node = array();
+		foreach ( $node as $value ) {
+			if ( isset( $value['slug'] ) && ! in_array( $value['slug'], $slugs, true ) ) {
+				$new_node[] = $value;
+			}
+		}
+
+		return $new_node;
+	}
+
+	/**
+	 * Removes insecure data from theme.json.
+	 *
+	 * @since 5.9.0
+	 * @since 6.6.0 Added support for block style variation element styles and $origin parameter.
+	 *
+	 * @param array  $theme_json Structure to sanitize.
+	 * @param string $origin    Optional. What source of data this object represents.
+	 *                          One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
+	 * @return array Sanitized structure.
+	 */
+	public static function remove_insecure_properties( $theme_json, $origin = 'theme' ) {
+		if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
+			$origin = 'theme';
+		}
+
+		$sanitized = array();
+
+		$theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json, $origin );
+
+		$blocks_metadata     = static::get_blocks_metadata();
+		$valid_block_names   = array_keys( $blocks_metadata );
+		$valid_element_names = array_keys( static::ELEMENTS );
+		$valid_variations    = static::get_valid_block_style_variations( $blocks_metadata );
+
+		$theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names, $valid_variations );
+
+		$blocks_metadata = static::get_blocks_metadata();
+		$style_options   = array( 'include_block_style_variations' => true ); // Allow variations data.
+		$style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata, $style_options );
+
+		foreach ( $style_nodes as $metadata ) {
+			$input = _wp_array_get( $theme_json, $metadata['path'], array() );
+			if ( empty( $input ) ) {
+				continue;
+			}
+
+			// The global styles custom CSS is not sanitized, but can only be edited by users with 'edit_css' capability.
+			if ( isset( $input['css'] ) && current_user_can( 'edit_css' ) ) {
+				$output = $input;
+			} else {
+				$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.
+			 */
+			if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
+				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 );
+			}
+
+			if ( isset( $metadata['variations'] ) ) {
+				foreach ( $metadata['variations'] as $variation ) {
+					$variation_input = _wp_array_get( $theme_json, $variation['path'], array() );
+					if ( empty( $variation_input ) ) {
+						continue;
+					}
+
+					$variation_output = static::remove_insecure_styles( $variation_input );
+
+					if ( isset( $variation_input['blocks'] ) ) {
+						$variation_output['blocks'] = static::remove_insecure_inner_block_styles( $variation_input['blocks'] );
+					}
+
+					if ( isset( $variation_input['elements'] ) ) {
+						$variation_output['elements'] = static::remove_insecure_element_styles( $variation_input['elements'] );
+					}
+
+					if ( ! empty( $variation_output ) ) {
+						_wp_array_set( $sanitized, $variation['path'], $variation_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;
+	}
+
+	/**
+	 * Remove insecure element styles within a variation or block.
+	 *
+	 * @since 6.8.0
+	 *
+	 * @param array $elements            The elements to process.
+	 * @return array The sanitized elements styles.
+	 */
+	protected static function remove_insecure_element_styles( $elements ) {
+		$sanitized           = array();
+		$valid_element_names = array_keys( static::ELEMENTS );
+
+		foreach ( $valid_element_names as $element_name ) {
+			$element_input = $elements[ $element_name ] ?? null;
+			if ( $element_input ) {
+				$element_output = static::remove_insecure_styles( $element_input );
+
+				if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
+					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
+						if ( isset( $element_input[ $pseudo_selector ] ) ) {
+							$element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] );
+						}
+					}
+				}
+
+				$sanitized[ $element_name ] = $element_output;
+			}
+		}
+		return $sanitized;
+	}
+
+	/**
+	 * Remove insecure styles from inner blocks and their elements.
+	 *
+	 * @since 6.8.0
+	 *
+	 * @param array $blocks The block styles to process.
+	 * @return array Sanitized block type styles.
+	 */
+	protected static function remove_insecure_inner_block_styles( $blocks ) {
+		$sanitized = array();
+		foreach ( $blocks as $block_type => $block_input ) {
+			$block_output = static::remove_insecure_styles( $block_input );
+
+			if ( isset( $block_input['elements'] ) ) {
+				$block_output['elements'] = static::remove_insecure_element_styles( $block_input['elements'] );
+			}
+
+			$sanitized[ $block_type ] = $block_output;
+		}
+		return $sanitized;
+	}
+
+	/**
+	 * 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;
+				}
+
+				$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 );
+						}
+
+						$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 );
+				}
+			}
+		}
+
+		// Ensure indirect properties not included in any `PRESETS_METADATA` value are allowed.
+		static::remove_indirect_properties( $input, $output );
+
+		return $output;
+	}
+
+	/**
+	 * 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.
+		static::remove_indirect_properties( $input, $output );
+
+		return $output;
+	}
+
+	/**
+	 * Checks that a declaration provided by the user is safe.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @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 ) );
+	}
+
+	/**
+	 * Removes indirect properties from the given input node and
+	 * sets in the given output node.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param array $input  Node to process.
+	 * @param array $output The processed node. Passed by reference.
+	 */
+	private static function remove_indirect_properties( $input, &$output ) {
+		foreach ( static::INDIRECT_PROPERTIES_METADATA as $property => $paths ) {
+			foreach ( $paths as $path ) {
+				$value = _wp_array_get( $input, $path );
+				if (
+					is_string( $value ) &&
+					static::is_safe_css_declaration( $property, $value )
+				) {
+					_wp_array_set( $output, $path, $value );
+				}
+			}
+		}
+	}
+
+	/**
+	 * Returns the raw data.
+	 *
+	 * @since 5.8.0
+	 *
+	 * @return array Raw data.
+	 */
+	public function get_raw_data() {
+		return $this->theme_json;
+	}
+
+	/**
+	 * 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'] ) ) {
+			$theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
+		}
+
+		if ( isset( $settings['disableCustomGradients'] ) ) {
+			$theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
+		}
+
+		if ( isset( $settings['disableCustomFontSizes'] ) ) {
+			$theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
+		}
+
+		if ( isset( $settings['enableCustomLineHeight'] ) ) {
+			$theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
+		}
+
+		if ( isset( $settings['enableCustomUnits'] ) ) {
+			$theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
+				array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
+				$settings['enableCustomUnits'];
+		}
+
+		if ( isset( $settings['colors'] ) ) {
+			$theme_settings['settings']['color']['palette'] = $settings['colors'];
+		}
+
+		if ( isset( $settings['gradients'] ) ) {
+			$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';
+				}
+			}
+			$theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
+		}
+
+		if ( isset( $settings['enableCustomSpacing'] ) ) {
+			$theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
+		}
+
+		if ( isset( $settings['spacingSizes'] ) ) {
+			$theme_settings['settings']['spacing']['spacingSizes'] = $settings['spacingSizes'];
+		}
+
+		return $theme_settings;
+	}
+
+	/**
+	 * Returns the current theme's wanted patterns(slugs) to be
+	 * registered from Pattern Directory.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return string[]
+	 */
+	public function get_patterns() {
+		if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
+			return $this->theme_json['patterns'];
+		}
+		return array();
+	}
+
+	/**
+	 * Returns a valid theme.json as provided by a theme.
+	 *
+	 * 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
+	 */
+	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;
+	}
+
+	/**
+	 * Sets the spacingSizes array based on the spacingScale values from theme.json.
+	 *
+	 * @since 6.1.0
+	 * @deprecated 6.6.0 No longer used as the spacingSizes are automatically
+	 *                   generated in the constructor and merge methods instead
+	 *                   of manually after instantiation.
+	 *
+	 * @return null|void
+	 */
+	public function set_spacing_sizes() {
+		_deprecated_function( __METHOD__, '6.6.0' );
+
+		$spacing_scale = $this->theme_json['settings']['spacing']['spacingScale']['default'] ?? array();
+
+		// 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'] )
+			|| ! isset( $spacing_scale['increment'] )
+			|| ! isset( $spacing_scale['steps'] )
+			|| ! is_numeric( $spacing_scale['increment'] )
+			|| ! is_numeric( $spacing_scale['mediumStep'] )
+			|| ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
+			if ( ! empty( $spacing_scale ) ) {
+				trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid', 'gutenberg' ), E_USER_NOTICE );
+			}
+			return null;
+		}
+
+		// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
+		if ( 0 === $spacing_scale['steps'] ) {
+			return null;
+		}
+
+		$spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+
+		// 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'] = (string) ( $spacing_sizes_count + 1 );
+			}
+		}
+
+		_wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
+	}
+
+	/**
+	 * Merges two sets of spacing size presets.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $base     The base set of spacing sizes.
+	 * @param array $incoming The set of spacing sizes to merge with the base. Duplicate slugs will override the base values.
+	 * @return array The merged set of spacing sizes.
+	 */
+	private static function merge_spacing_sizes( $base, $incoming ) {
+		// Preserve the order if there are no base (spacingScale) values.
+		if ( empty( $base ) ) {
+			return $incoming;
+		}
+		$merged = array();
+		foreach ( $base as $item ) {
+			$merged[ $item['slug'] ] = $item;
+		}
+		foreach ( $incoming as $item ) {
+			$merged[ $item['slug'] ] = $item;
+		}
+		ksort( $merged, SORT_NUMERIC );
+		return array_values( $merged );
+	}
+
+	/**
+	 * Generates a set of spacing sizes by starting with a medium size and
+	 * applying an operator with an increment value to generate the rest of the
+	 * sizes outward from the medium size. The medium slug is '50' with the rest
+	 * of the slugs being 10 apart. The generated names use t-shirt sizing.
+	 *
+	 * Example:
+	 *
+	 *     $spacing_scale = array(
+	 *         'steps'      => 4,
+	 *         'mediumStep' => 16,
+	 *         'unit'       => 'px',
+	 *         'operator'   => '+',
+	 *         'increment'  => 2,
+	 *     );
+	 *     $spacing_sizes = static::compute_spacing_sizes( $spacing_scale );
+	 *     // -> array(
+	 *     //        array( 'name' => 'Small',   'slug' => '40', 'size' => '14px' ),
+	 *     //        array( 'name' => 'Medium',  'slug' => '50', 'size' => '16px' ),
+	 *     //        array( 'name' => 'Large',   'slug' => '60', 'size' => '18px' ),
+	 *     //        array( 'name' => 'X-Large', 'slug' => '70', 'size' => '20px' ),
+	 *     //    )
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $spacing_scale {
+	 *      The spacing scale values. All are required.
+	 *
+	 *      @type int    $steps      The number of steps in the scale. (up to 10 steps are supported.)
+	 *      @type float  $mediumStep The middle value that gets the slug '50'. (For even number of steps, this becomes the first middle value.)
+	 *      @type string $unit       The CSS unit to use for the sizes.
+	 *      @type string $operator   The mathematical operator to apply to generate the other sizes. Either '+' or '*'.
+	 *      @type float  $increment  The value used with the operator to generate the other sizes.
+	 * }
+	 * @return array The spacing sizes presets or an empty array if some spacing scale values are missing or invalid.
+	 */
+	private static function compute_spacing_sizes( $spacing_scale ) {
+		/*
+		 * This condition is intentionally missing some checks on ranges for the values in order to
+		 * keep backwards compatibility with the previous implementation.
+		 */
+		if (
+			! isset( $spacing_scale['steps'] ) ||
+			! is_numeric( $spacing_scale['steps'] ) ||
+			0 === $spacing_scale['steps'] ||
+			! isset( $spacing_scale['mediumStep'] ) ||
+			! is_numeric( $spacing_scale['mediumStep'] ) ||
+			! isset( $spacing_scale['unit'] ) ||
+			! isset( $spacing_scale['operator'] ) ||
+			( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ||
+			! isset( $spacing_scale['increment'] ) ||
+			! is_numeric( $spacing_scale['increment'] )
+		) {
+			return array();
+		}
+
+		$unit            = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
+		$current_step    = $spacing_scale['mediumStep'];
+		$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
+		$x_small_count   = null;
+		$below_sizes     = array();
+		$slug            = 40;
+		$remainder       = 0;
+
+		for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
+			if ( '+' === $spacing_scale['operator'] ) {
+				$current_step -= $spacing_scale['increment'];
+			} elseif ( $spacing_scale['increment'] > 1 ) {
+				$current_step /= $spacing_scale['increment'];
+			} else {
+				$current_step *= $spacing_scale['increment'];
+			}
+
+			if ( $current_step <= 0 ) {
+				$remainder = $below_midpoint_count;
+				break;
+			}
+
+			$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' ), (string) $x_small_count ),
+				'slug' => (string) $slug,
+				'size' => round( $current_step, 2 ) . $unit,
+			);
+
+			if ( $below_midpoint_count === $steps_mid_point - 2 ) {
+				$x_small_count = 2;
+			}
+
+			if ( $below_midpoint_count < $steps_mid_point - 2 ) {
+				++$x_small_count;
+			}
+
+			$slug -= 10;
+		}
+
+		$below_sizes = array_reverse( $below_sizes );
+
+		$below_sizes[] = array(
+			'name' => __( 'Medium', 'gutenberg' ),
+			'slug' => '50',
+			'size' => $spacing_scale['mediumStep'] . $unit,
+		);
+
+		$current_step  = $spacing_scale['mediumStep'];
+		$x_large_count = null;
+		$above_sizes   = array();
+		$slug          = 60;
+		$steps_above   = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
+
+		for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
+			$current_step = '+' === $spacing_scale['operator']
+				? $current_step + $spacing_scale['increment']
+				: ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
+
+			$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' ), (string) $x_large_count ),
+				'slug' => (string) $slug,
+				'size' => round( $current_step, 2 ) . $unit,
+			);
+
+			if ( 1 === $above_midpoint_count ) {
+				$x_large_count = 2;
+			}
+
+			if ( $above_midpoint_count > 1 ) {
+				++$x_large_count;
+			}
+
+			$slug += 10;
+		}
+
+		$spacing_sizes = $below_sizes;
+		foreach ( $above_sizes as $above_sizes_item ) {
+			$spacing_sizes[] = $above_sizes_item;
+		}
+
+		return $spacing_sizes;
+	}
+
+	/**
+	 * Returns the selectors metadata for a block.
+	 *
+	 * @param object $block_type    The block type.
+	 * @param string $root_selector The block's root selector.
+	 *
+	 * @return object The custom selectors set by the block.
+	 */
+	protected static function get_block_selectors( $block_type, $root_selector ) {
+		if ( ! empty( $block_type->selectors ) ) {
+			return $block_type->selectors;
+		}
+
+		$selectors = array( 'root' => $root_selector );
+		foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
+			$feature_selector = wp_get_block_css_selector( $block_type, $key );
+			if ( null !== $feature_selector ) {
+				$selectors[ $feature ] = array( 'root' => $feature_selector );
+			}
+		}
+
+		return $selectors;
+	}
+
+	/**
+	 * Generates all the element selectors for a block.
+	 *
+	 * @param string $root_selector The block's root CSS selector.
+	 * @return array The block's element selectors.
+	 */
+	protected static function get_block_element_selectors( $root_selector ) {
+		// Assign defaults, then override 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( ',', $root_selector );
+		$element_selectors = array();
+
+		foreach ( static::ELEMENTS as $el_name => $el_selector ) {
+			$element_selector = array();
+			foreach ( $block_selectors as $selector ) {
+				if ( $selector === $el_selector ) {
+					$element_selector = array( $el_selector );
+					break;
+				}
+				$element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
+			}
+			$element_selectors[ $el_name ] = implode( ',', $element_selector );
+		}
+
+		return $element_selectors;
+	}
+
+	/**
+	 * Generates style declarations for a node's features e.g. color, border,
+	 * typography etc, that have custom selectors in their related block's
+	 * metadata.
+	 *
+	 * @param object $metadata The related block metadata containing selectors.
+	 * @param object $node     A merged theme.json node for block or variation.
+	 *
+	 * @return array The style declarations for the node's features with custom
+	 * selectors.
+	 */
+	protected function get_feature_declarations_for_node( $metadata, &$node ) {
+		$declarations = array();
+
+		if ( ! isset( $metadata['selectors'] ) ) {
+			return $declarations;
+		}
+
+		$settings = $this->theme_json['settings'] ?? null;
+
+		foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
+			// Skip if this is the block's root selector or the block doesn't
+			// have any styles for the feature.
+			if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
+				continue;
+			}
+
+			if ( is_array( $feature_selectors ) ) {
+				foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
+					if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
+						continue;
+					}
+
+					// Create temporary node containing only the subfeature data
+					// to leverage existing `compute_style_properties` function.
+					$subfeature_node = array(
+						$feature => array(
+							$subfeature => $node[ $feature ][ $subfeature ],
+						),
+					);
+
+					// Generate style declarations.
+					$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );
+
+					// Merge subfeature declarations into feature declarations.
+					if ( isset( $declarations[ $subfeature_selector ] ) ) {
+						foreach ( $new_declarations as $new_declaration ) {
+							$declarations[ $subfeature_selector ][] = $new_declaration;
+						}
+					} else {
+						$declarations[ $subfeature_selector ] = $new_declarations;
+					}
+
+					// Remove the subfeature from the block's node now its
+					// styles will be included under its own selector not the
+					// block's.
+					unset( $node[ $feature ][ $subfeature ] );
+				}
+			}
+
+			// Now subfeatures have been processed and removed we can process
+			// feature root selector or simple string selector.
+			if (
+				is_string( $feature_selectors ) ||
+				( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
+			) {
+				$feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];
+
+				// Create temporary node containing only the feature data
+				// to leverage existing `compute_style_properties` function.
+				$feature_node = array( $feature => $node[ $feature ] );
+
+				// Generate the style declarations.
+				$new_declarations = static::compute_style_properties( $feature_node, $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( $declarations[ $feature_selector ] ) ) {
+					foreach ( $new_declarations as $new_declaration ) {
+						$declarations[ $feature_selector ][] = $new_declaration;
+					}
+				} else {
+					$declarations[ $feature_selector ] = $new_declarations;
+				}
+
+				// Remove the feature from the block's node now its styles
+				// will be included under its own selector not the block's.
+				unset( $node[ $feature ] );
+			}
+		}
+
+		return $declarations;
+	}
+
+	/**
+	 * This is used to convert the internal representation of variables to the CSS representation.
+	 * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
+	 *
+	 * @since 6.3.0
+	 * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
+	 * @return string The converted variable.
+	 */
+	private static function convert_custom_properties( $value ) {
+		$prefix     = 'var:';
+		$prefix_len = strlen( $prefix );
+		$token_in   = '|';
+		$token_out  = '--';
+		if ( 0 === strpos( $value, $prefix ) ) {
+			$unwrapped_name = str_replace(
+				$token_in,
+				$token_out,
+				substr( $value, $prefix_len )
+			);
+			$value          = "var(--wp--$unwrapped_name)";
+		}
+
+		return $value;
+	}
+
+	/**
+	 * Given a tree, converts the internal representation of variables to the CSS representation.
+	 * It is recursive and modifies the input in-place.
+	 *
+	 * @since 6.3.0
+	 * @param array $tree   Input to process.
+	 * @return array The modified $tree.
+	 */
+	private static function resolve_custom_css_format( $tree ) {
+		$prefix = 'var:';
+
+		foreach ( $tree as $key => $data ) {
+			if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) {
+				$tree[ $key ] = self::convert_custom_properties( $data );
+			} elseif ( is_array( $data ) ) {
+				$tree[ $key ] = self::resolve_custom_css_format( $data );
+			}
+		}
+
+		return $tree;
+	}
+
+	/**
+	 * Replaces CSS variables with their values in place.
+	 *
+	 * @since 6.3.0
+	 * @since 6.6.0 Check for empty style before processing.
+	 *
+	 * @param array $styles CSS declarations to convert.
+	 * @param array $values key => value pairs to use for replacement.
+	 * @return array
+	 */
+	private static function convert_variables_to_value( $styles, $values ) {
+		foreach ( $styles as $key => $style ) {
+			if ( empty( $style ) ) {
+				continue;
+			}
+
+			if ( is_array( $style ) ) {
+				$styles[ $key ] = self::convert_variables_to_value( $style, $values );
+				continue;
+			}
+
+			if ( 0 <= strpos( $style, 'var(' ) ) {
+				// find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.
+
+				$has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );
+
+				if ( $has_matches ) {
+					$resolved_style = $styles[ $key ];
+					foreach ( $var_parts[1] as $index => $var_part ) {
+						$key_in_values   = 'var(' . $var_part . ')';
+						$rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
+						$fallback        = $var_parts[2][ $index ]; // the fallback value.
+						$resolved_style  = str_replace(
+							array(
+								$rule_to_replace,
+								$fallback,
+							),
+							array(
+								isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
+								isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
+							),
+							$resolved_style
+						);
+					}
+					$styles[ $key ] = $resolved_style;
+				}
+			}
+		}
+
+		return $styles;
+	}
+
+	/**
+	 * Resolves the values of CSS variables in the given styles.
+	 *
+	 * @since 6.3.0
+	 * @param WP_Theme_JSON_Gutenberg $theme_json The theme json resolver.
+	 *
+	 * @return WP_Theme_JSON_Gutenberg The $theme_json with resolved variables.
+	 */
+	public static function resolve_variables( $theme_json ) {
+		$settings    = $theme_json->get_settings();
+		$styles      = $theme_json->get_raw_data()['styles'];
+		$preset_vars = static::compute_preset_vars( $settings, static::VALID_ORIGINS );
+		$theme_vars  = static::compute_theme_vars( $settings );
+		$vars        = array_reduce(
+			array_merge( $preset_vars, $theme_vars ),
+			function ( $carry, $item ) {
+				$name                    = $item['name'];
+				$carry[ "var({$name})" ] = $item['value'];
+				return $carry;
+			},
+			array()
+		);
+
+		$theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
+		return $theme_json;
+	}
+
+	/**
+	 * Generates a selector for a block style variation.
+	 *
+	 * @param string $variation_name Name of the block style variation.
+	 * @param string $block_selector CSS selector for the block.
+	 *
+	 * @return string Block selector with block style variation selector added to it.
+	 */
+	protected static function get_block_style_variation_selector( $variation_name, $block_selector ) {
+		$variation_class = ".is-style-$variation_name";
+
+		if ( ! $block_selector ) {
+			return $variation_class;
+		}
+
+		$limit          = 1;
+		$selector_parts = explode( ',', $block_selector );
+		$result         = array();
+
+		foreach ( $selector_parts as $part ) {
+			$result[] = preg_replace_callback(
+				'/((?::\([^)]+\))?\s*)([^\s:]+)/',
+				function ( $matches ) use ( $variation_class ) {
+					return $matches[1] . $matches[2] . $variation_class;
+				},
+				$part,
+				$limit
+			);
+		}
+
+		return implode( ',', $result );
+	}
+
+	/**
+	 * Collects valid block style variations keyed by block type.
+	 *
+	 * @since 6.6.0
+	 * @since 6.8.0 Added the `$blocks_metadata` parameter.
+	 *
+	 * @param array $blocks_metadata Optional. List of metadata per block. Default is the metadata for all blocks.
+	 * @return array Valid block style variations by block type.
+	 */
+	protected static function get_valid_block_style_variations( $blocks_metadata = array() ) {
+		$valid_variations = array();
+		$blocks_metadata  = empty( $blocks_metadata ) ? static::get_blocks_metadata() : $blocks_metadata;
+		foreach ( $blocks_metadata as $block_name => $block_meta ) {
+			if ( ! isset( $block_meta['styleVariations'] ) ) {
+				continue;
+			}
+			$valid_variations[ $block_name ] = array_keys( $block_meta['styleVariations'] );
+		}
+
+		return $valid_variations;
+	}
+}
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..1f45d897a77cc0
--- /dev/null
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -0,0 +1,1012 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver_Gutenberg 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 gutenberg_get_global_settings, gutenberg_get_global_styles, and gutenberg_get_global_stylesheet instead.
+ *
+ * @since 5.8.0
+ * @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_Gutenberg
+	 */
+	protected static $core = null;
+
+	/**
+	 * Container for data coming from the blocks.
+	 *
+	 * @since 6.1.0
+	 * @var WP_Theme_JSON_Gutenberg
+	 */
+	protected static $blocks = null;
+
+	/**
+	 * Container for data coming from the theme.
+	 *
+	 * @since 5.8.0
+	 * @var WP_Theme_JSON_Gutenberg
+	 */
+	protected static $theme = null;
+
+	/**
+	 * Container for data coming from the user.
+	 *
+	 * @since 5.9.0
+	 * @var WP_Theme_JSON_Gutenberg
+	 */
+	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_Gutenberg 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_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' ) );
+		static::$core = $theme_json->get_theme_json();
+
+		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.
+	 * @since 6.6.0 Added support for 'default-font-sizes' and 'default-spacing-sizes' theme supports.
+	 *              Added registration and merging of block style variations from partial theme.json files and the block styles registry.
+	 *
+	 * @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_Gutenberg 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' ) ) {
+			$wp_theme        = wp_get_theme();
+			$theme_json_file = $wp_theme->get_file_path( 'theme.json' );
+			if ( is_readable( $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( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA );
+			}
+
+			/*
+			 * Register variations defined by theme partials (theme.json files in the styles directory).
+			 * This is required so the variations pass sanitization of theme.json data.
+			 */
+			$variations = static::get_style_variations( 'block' );
+			gutenberg_register_block_style_variations_from_theme_json_partials( $variations );
+
+			/*
+			 * Source variations from the block styles registry and block style variation files. Then, merge them into the existing theme.json data.
+			 *
+			 * In case the same style properties are defined in several sources, this is how we should resolve the values,
+			 * from higher to lower priority:
+			 *
+			 * - styles.blocks.blockType.variations from theme.json
+			 * - styles.variations from theme.json
+			 * - variations from block style variation files
+			 * - variations from block styles registry
+			 *
+			 * See test_add_registered_block_styles_to_theme_data and test_unwraps_block_style_variations.
+			 */
+			$theme_json_data = static::inject_variations_from_block_style_variation_files( $theme_json_data, $variations );
+			$theme_json_data = static::inject_variations_from_block_styles_registry( $theme_json_data );
+
+			/**
+			 * Filters the data provided by the theme for global styles and settings.
+			 *
+			 * @since 6.1.0
+			 *
+			 * @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' ) );
+			static::$theme = $theme_json->get_theme_json();
+
+			if ( $wp_theme->parent() ) {
+				// Get parent theme.json.
+				$parent_theme_json_file = $wp_theme->parent()->get_file_path( 'theme.json' );
+				if ( $theme_json_file !== $parent_theme_json_file && is_readable( $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' ) );
+					$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;
+				}
+			}
+
+			// BEGIN OF EXPERIMENTAL CODE. Not to backport to core.
+			if ( ! class_exists( 'WP_Font_Face' ) && class_exists( 'WP_Fonts_Resolver' ) ) {
+				static::$theme = WP_Fonts_Resolver::add_missing_fonts_to_theme_json( static::$theme );
+			}
+			// END OF EXPERIMENTAL CODE.
+
+		}
+
+		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( get_classic_theme_supports_block_editor_settings() );
+		if ( ! wp_theme_has_theme_json() ) {
+			/*
+			 * Unlike block themes, classic themes without a theme.json disable
+			 * default presets when custom preset theme support is added. This
+			 * behavior can be overridden by using the corresponding default
+			 * preset theme support.
+			 */
+			$theme_support_data['settings']['color']['defaultPalette']        =
+				! isset( $theme_support_data['settings']['color']['palette'] ) ||
+				current_theme_supports( 'default-color-palette' );
+			$theme_support_data['settings']['color']['defaultGradients']      =
+				! isset( $theme_support_data['settings']['color']['gradients'] ) ||
+				current_theme_supports( 'default-gradient-presets' );
+			$theme_support_data['settings']['typography']['defaultFontSizes'] =
+				! isset( $theme_support_data['settings']['typography']['fontSizes'] ) ||
+				current_theme_supports( 'default-font-sizes' );
+			$theme_support_data['settings']['spacing']['defaultSpacingSizes'] =
+				! isset( $theme_support_data['settings']['spacing']['spacingSizes'] ) ||
+				current_theme_supports( 'default-spacing-sizes' );
+
+			/*
+			 * Shadow presets are explicitly disabled for classic themes until a
+			 * decision is made for whether the default presets should match the
+			 * other presets or if they should be disabled by default in classic
+			 * themes. See https://github.com/WordPress/gutenberg/issues/59989.
+			 */
+			$theme_support_data['settings']['shadow']['defaultPresets'] = false;
+
+			// Allow themes to enable all border settings via theme_support.
+			if ( current_theme_supports( 'border' ) ) {
+				$theme_support_data['settings']['border']['color']  = true;
+				$theme_support_data['settings']['border']['radius'] = true;
+				$theme_support_data['settings']['border']['style']  = true;
+				$theme_support_data['settings']['border']['width']  = true;
+			}
+
+			// Allow themes to enable link colors via theme_support.
+			if ( current_theme_supports( 'link-color' ) ) {
+				$theme_support_data['settings']['color']['link'] = true;
+			}
+			if ( current_theme_supports( 'experimental-link-color' ) ) {
+				_doing_it_wrong(
+					current_theme_supports( 'experimental-link-color' ),
+					__( '`experimental-link-color` is no longer supported. Use `link-color` instead.', 'gutenberg' ),
+					'6.3.0'
+				);
+			}
+
+			// 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_Gutenberg
+	 */
+	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' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA );
+		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'] ) &&
+				! isset( $config['styles']['blocks'][ $block_name ]['spacing']['blockGap'] )
+			) {
+				// 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_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' ) );
+		static::$blocks = $theme_json->get_theme_json();
+
+		return static::$blocks;
+	}
+
+	/**
+	 * When given an array, this will remove any keys with the name `//`.
+	 *
+	 * @param array $json_array The array to filter.
+	 * @return array The filtered array.
+	 */
+	private static function remove_json_comments( $json_array ) {
+		unset( $json_array['//'] );
+		foreach ( $json_array as $k => $v ) {
+			if ( is_array( $v ) ) {
+				$json_array[ $k ] = static::remove_json_comments( $v );
+			}
+		}
+
+		return $json_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_Gutenberg 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_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' ) );
+
+				return $theme_json->get_theme_json();
+			}
+
+			// 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' ) );
+		static::$user = $theme_json->get_theme_json();
+
+		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_Gutenberg
+	 */
+	public static function get_merged_data( $origin = 'custom' ) {
+		if ( is_array( $origin ) ) {
+			_deprecated_argument( __FUNCTION__, '5.9.0' );
+		}
+
+		$result = new WP_Theme_JSON_Gutenberg();
+		$result->merge( static::get_core_data() );
+		if ( 'default' === $origin ) {
+			return $result;
+		}
+
+		$result->merge( static::get_block_data() );
+		if ( 'blocks' === $origin ) {
+			return $result;
+		}
+
+		$result->merge( static::get_theme_data() );
+		if ( 'theme' === $origin ) {
+			return $result;
+		}
+
+		$result->merge( static::get_user_data() );
+		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 ) {
+		// TODO: Remove this method from core on 6.3 release.
+		_deprecated_function( __METHOD__, '6.3.0' );
+		$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 an array of all nested json files within a given directory.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $dir The directory to recursively iterate and list files of.
+	 * @return array The merged array.
+	 */
+	private static function recursively_iterate_json( $dir ) {
+		$nested_files      = new RecursiveIteratorIterator( new RecursiveDirectoryIterator( $dir ) );
+		$nested_json_files = iterator_to_array( new RegexIterator( $nested_files, '/^.+\.json$/i', RecursiveRegexIterator::GET_MATCH ) );
+		return $nested_json_files;
+	}
+
+	/**
+	 * Determines if a supplied style variation matches the provided scope.
+	 *
+	 * For backwards compatibility, if a variation does not define any scope
+	 * related property, e.g. `blockTypes`, it is assumed to be a theme style
+	 * variation.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array  $variation Theme.json shaped style variation object.
+	 * @param string $scope     Scope to check e.g. theme, block etc.
+	 *
+	 * @return boolean
+	 */
+	private static function style_variation_has_scope( $variation, $scope ) {
+		if ( 'block' === $scope ) {
+			return isset( $variation['blockTypes'] );
+		}
+
+		if ( 'theme' === $scope ) {
+			return ! isset( $variation['blockTypes'] );
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns the style variations defined by the theme (parent and child).
+	 *
+	 * @since 6.2.0 Returns parent theme variations if theme is a child.
+	 * @since 6.6.0 Added configurable scope parameter to allow filtering
+	 *              theme.json partial files by the scope to which they
+	 *              can be applied e.g. theme vs block etc.
+	 *
+	 * @param string $scope The scope or type of style variation to retrieve e.g. theme, block etc.
+	 * @return array
+	 */
+	public static function get_style_variations( $scope = 'theme' ) {
+		return static::get_style_variations_from_directory( get_stylesheet_directory(), $scope );
+	}
+
+	/**
+	 * Returns the style variation files defined by the theme (parent and child).
+	 *
+	 * @since 6.7.0
+	 *
+	 * @return array An array of style variation files.
+	 */
+	protected static function get_style_variation_files_from_current_theme() {
+		$variation_files    = array();
+		$base_directory     = get_stylesheet_directory() . '/styles';
+		$template_directory = get_template_directory() . '/styles';
+		if ( is_dir( $base_directory ) ) {
+			$variation_files = static::recursively_iterate_json( $base_directory );
+		}
+		if ( is_dir( $template_directory ) && $template_directory !== $base_directory ) {
+			$variation_files_parent = static::recursively_iterate_json( $template_directory );
+			// If the child and parent variation file basename are the same, only include the child theme's.
+			foreach ( $variation_files_parent as $parent_path => $parent ) {
+				foreach ( $variation_files as $child_path => $child ) {
+					if ( basename( $parent_path ) === basename( $child_path ) ) {
+						unset( $variation_files_parent[ $parent_path ] );
+					}
+				}
+			}
+			$variation_files = array_merge( $variation_files, $variation_files_parent );
+		}
+
+		return $variation_files;
+	}
+
+	/**
+	 * Returns the style variations in the given directory.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @param string $directory The directory to get the style variations from.
+	 * @param string $scope     The scope or type of style variation to retrieve e.g. theme, block etc.
+	 * @return array
+	 */
+	public static function get_style_variations_from_directory( $directory, $scope = 'theme' ) {
+		$variation_files = array();
+		$variations      = array();
+		if ( is_dir( $directory ) ) {
+			if ( get_stylesheet_directory() === $directory ) {
+				$variation_files = static::get_style_variation_files_from_current_theme();
+			} else {
+				$variation_files = static::recursively_iterate_json( $directory );
+			}
+		}
+		ksort( $variation_files );
+		foreach ( $variation_files as $path => $file ) {
+			$decoded_file = self::read_json_file( $path );
+			if ( is_array( $decoded_file ) && static::style_variation_has_scope( $decoded_file, $scope ) ) {
+				$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;
+	}
+
+
+	/**
+	 * Resolves relative paths in theme.json styles to theme absolute paths
+	 * and returns them in an array that can be embedded
+	 * as the value of `_link` object in REST API responses.
+	 *
+	 * @since 6.6.0
+	 * @since 6.7.0 Added support for resolving block styles.
+	 *
+	 * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
+	 * @return array An array of resolved paths.
+	 */
+	public static function get_resolved_theme_uris( $theme_json ) {
+		$resolved_theme_uris = array();
+
+		if ( ! $theme_json instanceof WP_Theme_JSON_Gutenberg ) {
+			return $resolved_theme_uris;
+		}
+
+		$theme_json_data = $theme_json->get_raw_data();
+
+		// Using the same file convention when registering web fonts. See: WP_Font_Face_Resolver:: to_theme_file_uri.
+		$placeholder = 'file:./';
+
+		// Top level styles.
+		$background_image_url = $theme_json_data['styles']['background']['backgroundImage']['url'] ?? null;
+		if (
+			isset( $background_image_url ) &&
+			is_string( $background_image_url ) &&
+			// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+			str_starts_with( $background_image_url, $placeholder ) ) {
+				$file_type          = wp_check_filetype( $background_image_url );
+				$src_url            = str_replace( $placeholder, '', $background_image_url );
+				$resolved_theme_uri = array(
+					'name'   => $background_image_url,
+					'href'   => sanitize_url( get_theme_file_uri( $src_url ) ),
+					'target' => 'styles.background.backgroundImage.url',
+				);
+				if ( isset( $file_type['type'] ) ) {
+					$resolved_theme_uri['type'] = $file_type['type'];
+				}
+				$resolved_theme_uris[] = $resolved_theme_uri;
+		}
+
+		// Block styles.
+		if ( ! empty( $theme_json_data['styles']['blocks'] ) ) {
+			foreach ( $theme_json_data['styles']['blocks'] as $block_name => $block_styles ) {
+				if ( ! isset( $block_styles['background']['backgroundImage']['url'] ) ) {
+					continue;
+				}
+				$background_image_url = $block_styles['background']['backgroundImage']['url'] ?? null;
+				if (
+					isset( $background_image_url ) &&
+					is_string( $background_image_url ) &&
+					// Skip if the src doesn't start with the placeholder, as there's nothing to replace.
+					str_starts_with( $background_image_url, $placeholder ) ) {
+					$file_type          = wp_check_filetype( $background_image_url );
+					$src_url            = str_replace( $placeholder, '', $background_image_url );
+					$resolved_theme_uri = array(
+						'name'   => $background_image_url,
+						'href'   => sanitize_url( get_theme_file_uri( $src_url ) ),
+						'target' => "styles.blocks.{$block_name}.background.backgroundImage.url",
+					);
+					if ( isset( $file_type['type'] ) ) {
+						$resolved_theme_uri['type'] = $file_type['type'];
+					}
+					$resolved_theme_uris[] = $resolved_theme_uri;
+				}
+			}
+		}
+
+		return $resolved_theme_uris;
+	}
+
+	/**
+	 * Resolves relative paths in theme.json styles to theme absolute paths
+	 * and merges them with incoming theme JSON.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param WP_Theme_JSON_Gutenberg $theme_json A theme json instance.
+	 * @return WP_Theme_JSON_Gutenberg Theme merged with resolved paths, if any found.
+	 */
+	public static function resolve_theme_file_uris( $theme_json ) {
+		$resolved_urls = static::get_resolved_theme_uris( $theme_json );
+		if ( empty( $resolved_urls ) ) {
+			return $theme_json;
+		}
+
+		$resolved_theme_json_data = $theme_json->get_raw_data();
+
+		foreach ( $resolved_urls as $resolved_url ) {
+			$path = explode( '.', $resolved_url['target'] );
+			_wp_array_set( $resolved_theme_json_data, $path, $resolved_url['href'] );
+		}
+
+		return new WP_Theme_JSON_Gutenberg( $resolved_theme_json_data );
+	}
+
+	/**
+	 * Adds variations sourced from block style variations files to the supplied theme.json data.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $data   Array following the theme.json specification.
+	 * @param array $variations Shared block style variations.
+	 * @return array Theme json data including shared block style variation definitions.
+	 */
+	private static function inject_variations_from_block_style_variation_files( $data, $variations ) {
+		if ( empty( $variations ) ) {
+			return $data;
+		}
+
+		foreach ( $variations as $variation ) {
+			if ( empty( $variation['styles'] ) || empty( $variation['blockTypes'] ) ) {
+				continue;
+			}
+
+			$variation_name = $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] );
+
+			foreach ( $variation['blockTypes'] as $block_type ) {
+				// First, override partial styles with any top-level styles.
+				$top_level_data = $data['styles']['variations'][ $variation_name ] ?? array();
+				if ( ! empty( $top_level_data ) ) {
+					$variation['styles'] = array_replace_recursive( $variation['styles'], $top_level_data );
+				}
+
+				// Then, override styles so far with any block-level styles.
+				$block_level_data = $data['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+				if ( ! empty( $block_level_data ) ) {
+					$variation['styles'] = array_replace_recursive( $variation['styles'], $block_level_data );
+				}
+
+				$path = array( 'styles', 'blocks', $block_type, 'variations', $variation_name );
+				_wp_array_set( $data, $path, $variation['styles'] );
+			}
+		}
+
+		return $data;
+	}
+
+	/**
+	 * Adds variations sourced from the block styles registry to the supplied theme.json data.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $data   Array following the theme.json specification.
+	 * @return array Theme json data including variations from the block styles registry.
+	 */
+	private static function inject_variations_from_block_styles_registry( $data ) {
+		$registry = WP_Block_Styles_Registry::get_instance();
+		$styles   = $registry->get_all_registered();
+
+		foreach ( $styles as $block_type => $variations ) {
+			foreach ( $variations as $variation_name => $variation ) {
+				if ( empty( $variation['style_data'] ) ) {
+					continue;
+				}
+
+				// First, override registry styles with any top-level styles.
+				$top_level_data = $data['styles']['variations'][ $variation_name ] ?? array();
+				if ( ! empty( $top_level_data ) ) {
+					$variation['style_data'] = array_replace_recursive( $variation['style_data'], $top_level_data );
+				}
+
+				// Then, override styles so far with any block-level styles.
+				$block_level_data = $data['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+				if ( ! empty( $block_level_data ) ) {
+					$variation['style_data'] = array_replace_recursive( $variation['style_data'], $block_level_data );
+				}
+
+				$path = array( 'styles', 'blocks', $block_type, 'variations', $variation_name );
+				_wp_array_set( $data, $path, $variation['style_data'] );
+			}
+		}
+
+		return $data;
+	}
+}
diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php
new file mode 100644
index 00000000000000..af0977ada1b307
--- /dev/null
+++ b/lib/class-wp-theme-json-schema-gutenberg.php
@@ -0,0 +1,233 @@
+<?php
+/**
+ * WP_Theme_JSON_Schema_Gutenberg class
+ *
+ * @package Gutenberg
+ * @since 5.9.0
+ */
+
+if ( class_exists( 'WP_Theme_JSON_Schema_Gutenberg' ) ) {
+	return;
+}
+
+/**
+ * Class that migrates a given theme.json structure to the latest schema.
+ *
+ * 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.
+ *
+ * @since 5.9.0
+ * @access private
+ */
+#[AllowDynamicProperties]
+class WP_Theme_JSON_Schema_Gutenberg {
+
+	/**
+	 * Maps old properties to their new location within the schema's settings.
+	 * This will be applied at both the defaults and individual block levels.
+	 */
+	const V1_TO_V2_RENAMED_PATHS = array(
+		'border.customRadius'         => 'border.radius',
+		'spacing.customMargin'        => 'spacing.margin',
+		'spacing.customPadding'       => 'spacing.padding',
+		'typography.customLineHeight' => 'typography.lineHeight',
+	);
+
+	/**
+	 * Function that migrates a given theme.json structure to the last version.
+	 *
+	 * @since 5.9.0
+	 * @since 6.6.0 Migrate up to v3.
+	 *
+	 * @param array  $theme_json The structure to migrate.
+	 * @param string $origin     Optional. What source of data this object represents.
+	 *                           One of 'blocks', 'default', 'theme', or 'custom'. Default 'theme'.
+	 *
+	 * @return array The structure in the last version.
+	 */
+	public static function migrate( $theme_json, $origin = 'theme' ) {
+		if ( ! isset( $theme_json['version'] ) ) {
+			$theme_json = array(
+				'version' => WP_Theme_JSON::LATEST_SCHEMA,
+			);
+		}
+
+		// Migrate each version in order starting with the current version.
+		switch ( $theme_json['version'] ) {
+			case 1:
+				$theme_json = self::migrate_v1_to_v2( $theme_json );
+				// Deliberate fall through. Once migrated to v2, also migrate to v3.
+			case 2:
+				$theme_json = self::migrate_v2_to_v3( $theme_json, $origin );
+		}
+
+		return $theme_json;
+	}
+
+	/**
+	 * Removes the custom prefixes for a few properties
+	 * that were part of v1:
+	 *
+	 * 'border.customRadius'         => 'border.radius',
+	 * 'spacing.customMargin'        => 'spacing.margin',
+	 * 'spacing.customPadding'       => 'spacing.padding',
+	 * 'typography.customLineHeight' => 'typography.lineHeight',
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $old Data to migrate.
+	 *
+	 * @return array Data without the custom prefixes.
+	 */
+	private static function migrate_v1_to_v2( $old ) {
+		// Copy everything.
+		$new = $old;
+
+		// Overwrite the things that changed.
+		if ( isset( $old['settings'] ) ) {
+			$new['settings'] = self::rename_paths( $old['settings'], self::V1_TO_V2_RENAMED_PATHS );
+		}
+
+		// Set the new version.
+		$new['version'] = 2;
+
+		return $new;
+	}
+
+	/**
+	 * Migrates from v2 to v3.
+	 *
+	 * - Sets settings.typography.defaultFontSizes to false if settings.typography.fontSizes are defined.
+	 * - Sets settings.spacing.defaultSpacingSizes to false if settings.spacing.spacingSizes are defined.
+	 * - Prevents settings.spacing.spacingSizes from merging with settings.spacing.spacingScale by
+	 *   unsetting spacingScale when spacingSizes are defined.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $old     Data to migrate.
+	 * @param string $origin What source of data this object represents.
+	 *                       One of 'blocks', 'default', 'theme', or 'custom'.
+	 * @return array Data with defaultFontSizes set to false.
+	 */
+	private static function migrate_v2_to_v3( $old, $origin ) {
+		// Copy everything.
+		$new = $old;
+
+		// Set the new version.
+		$new['version'] = 3;
+
+		/*
+		 * Remaining changes do not need to be applied to the custom origin,
+		 * as they should take on the value of the theme origin.
+		 */
+		if ( 'custom' === $origin ) {
+			return $new;
+		}
+
+		/*
+		 * Even though defaultFontSizes is a new setting, we need to migrate
+		 * it as it controls the PRESETS_METADATA prevent_override which was
+		 * previously hardcoded to false. This only needs to happen when the
+		 * theme provided font sizes as they could match the default ones and
+		 * affect the generated CSS. And in v2 we provided default font sizes
+		 * when the theme did not provide any.
+		 */
+		if ( isset( $old['settings']['typography']['fontSizes'] ) ) {
+			$new['settings']['typography']['defaultFontSizes'] = false;
+		}
+
+		/*
+		 * Similarly to defaultFontSizes, we need to migrate defaultSpacingSizes
+		 * as it controls the PRESETS_METADATA prevent_override which was
+		 * previously hardcoded to false. This only needs to happen when the
+		 * theme provided spacing sizes via spacingSizes or spacingScale.
+		 */
+		if (
+			isset( $old['settings']['spacing']['spacingSizes'] ) ||
+			isset( $old['settings']['spacing']['spacingScale'] )
+		) {
+			$new['settings']['spacing']['defaultSpacingSizes'] = false;
+		}
+
+		/*
+		 * In v3 spacingSizes is merged with the generated spacingScale sizes
+		 * instead of completely replacing them. The v3 behavior is what was
+		 * documented for the v2 schema, but the code never actually did work
+		 * that way. Instead of surprising users with a behavior change two
+		 * years after the fact at the same time as a v3 update is introduced,
+		 * we'll continue using the "bugged" behavior for v2 themes. And treat
+		 * the "bug fix" as a breaking change for v3.
+		 */
+		if ( isset( $old['settings']['spacing']['spacingSizes'] ) ) {
+			unset( $new['settings']['spacing']['spacingScale'] );
+		}
+
+		return $new;
+	}
+
+	/**
+	 * Processes the settings subtree.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Array to process.
+	 * @param array $paths_to_rename Paths to rename.
+	 *
+	 * @return array The settings in the new format.
+	 */
+	private static function rename_paths( $settings, $paths_to_rename ) {
+		$new_settings = $settings;
+
+		// Process any renamed/moved paths within default settings.
+		self::rename_settings( $new_settings, $paths_to_rename );
+
+		// Process individual block settings.
+		if ( isset( $new_settings['blocks'] ) && is_array( $new_settings['blocks'] ) ) {
+			foreach ( $new_settings['blocks'] as &$block_settings ) {
+				self::rename_settings( $block_settings, $paths_to_rename );
+			}
+		}
+
+		return $new_settings;
+	}
+
+	/**
+	 * Processes a settings array, renaming or moving properties.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings        Reference to settings either defaults or an individual block's.
+	 * @param array $paths_to_rename Paths to rename.
+	 */
+	private static function rename_settings( &$settings, $paths_to_rename ) {
+		foreach ( $paths_to_rename as $original => $renamed ) {
+			$original_path = explode( '.', $original );
+			$renamed_path  = explode( '.', $renamed );
+			$current_value = _wp_array_get( $settings, $original_path, null );
+
+			if ( null !== $current_value ) {
+				_wp_array_set( $settings, $renamed_path, $current_value );
+				self::unset_setting_by_path( $settings, $original_path );
+			}
+		}
+	}
+
+	/**
+	 * Removes a property from within the provided settings by its path.
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param array $settings Reference to the current settings array.
+	 * @param array $path Path to the property to be removed.
+	 */
+	private static function unset_setting_by_path( &$settings, $path ) {
+		$tmp_settings = &$settings; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		$last_key     = array_pop( $path );
+		foreach ( $path as $key ) {
+			$tmp_settings = &$tmp_settings[ $key ];
+		}
+
+		unset( $tmp_settings[ $last_key ] );
+	}
+}
diff --git a/lib/client-assets.php b/lib/client-assets.php
index ea199750fa10b3..f95ac27f81d010 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -13,9 +13,9 @@
 /**
  * Retrieves the root plugin path.
  *
- * @return string Root path to the gutenberg plugin.
- *
  * @since 0.1.0
+ *
+ * @return string Root path to the gutenberg plugin.
  */
 function gutenberg_dir_path() {
 	return plugin_dir_path( __DIR__ );
@@ -24,11 +24,11 @@ function gutenberg_dir_path() {
 /**
  * Retrieves a URL to a file in the gutenberg plugin.
  *
+ * @since 0.1.0
+ *
  * @param  string $path Relative path of the desired file.
  *
  * @return string       Fully qualified URL pointing to the desired file.
- *
- * @since 0.1.0
  */
 function gutenberg_url( $path ) {
 	return plugins_url( $path, __DIR__ );
@@ -77,16 +77,8 @@ function gutenberg_override_script( $scripts, $handle, $src, $deps = array(), $v
 		$scripts->add( $handle, $src, $deps, $ver, ( $in_footer ? 1 : null ) );
 	}
 
-	/*
-	 * `WP_Dependencies::set_translations` will fall over on itself if setting
-	 * translations on the `wp-i18n` handle, since it internally adds `wp-i18n`
-	 * as a dependency of itself, exhausting memory. The same applies for the
-	 * polyfill and hooks scripts, which are dependencies _of_ `wp-i18n`.
-	 *
-	 * See: https://core.trac.wordpress.org/ticket/46089
-	 */
-	if ( ! in_array( $handle, array( 'wp-i18n', 'wp-polyfill', 'wp-hooks' ), true ) ) {
-		$scripts->set_translations( $handle, 'default' );
+	if ( in_array( 'wp-i18n', $deps, true ) ) {
+		$scripts->set_translations( $handle );
 	}
 
 	/*
@@ -193,7 +185,7 @@ function gutenberg_override_style( $styles, $handle, $src, $deps = array(), $ver
 function gutenberg_register_packages_scripts( $scripts ) {
 	// When in production, use the plugin's version as the default asset version;
 	// else (for development or test) default to use the current time.
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
+	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
 
 	foreach ( glob( gutenberg_dir_path() . 'build/*/index.min.js' ) as $path ) {
 		// Prefix `wp-` to package directory to get script handle.
@@ -211,7 +203,13 @@ function gutenberg_register_packages_scripts( $scripts ) {
 		// Add dependencies that cannot be detected and generated by build tools.
 		switch ( $handle ) {
 			case 'wp-block-library':
-				array_push( $dependencies, 'editor' );
+				if (
+					! gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ||
+					! empty( $_GET['requiresTinymce'] ) ||
+					gutenberg_post_being_edited_requires_classic_block()
+				) {
+					array_push( $dependencies, 'editor' );
+				}
 				break;
 
 			case 'wp-edit-post':
@@ -221,6 +219,9 @@ function gutenberg_register_packages_scripts( $scripts ) {
 			case 'wp-edit-site':
 				array_push( $dependencies, 'wp-dom-ready' );
 				break;
+			case 'wp-preferences':
+				array_push( $dependencies, 'wp-preferences-persistence' );
+				break;
 		}
 
 		// Get the path from Gutenberg directory as expected by `gutenberg_url`.
@@ -243,20 +244,31 @@ function gutenberg_register_packages_scripts( $scripts ) {
  * `build/` location.
  *
  * @since 6.7.0
-
+ *
+ * @global array $editor_styles
+ *
  * @param WP_Styles $styles WP_Styles instance.
  */
 function gutenberg_register_packages_styles( $styles ) {
 	// When in production, use the plugin's version as the asset version;
 	// else (for development or test) default to use the current time.
-	$version = defined( 'GUTENBERG_VERSION' ) && ! ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? GUTENBERG_VERSION : time();
+	$version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
+
+	gutenberg_override_style(
+		$styles,
+		'wp-block-editor-content',
+		gutenberg_url( 'build/block-editor/content.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-block-editor-content', 'rtl', 'replace' );
 
 	// Editor Styles.
 	gutenberg_override_style(
 		$styles,
 		'wp-block-editor',
 		gutenberg_url( 'build/block-editor/style.css' ),
-		array( 'wp-components' ),
+		array( 'wp-components', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-block-editor', 'rtl', 'replace' );
@@ -265,7 +277,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-patterns', 'wp-reusable-blocks', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-editor', 'rtl', 'replace' );
@@ -274,7 +286,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', 'wp-commands', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-post', 'rtl', 'replace' );
@@ -308,13 +320,16 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-format-library', 'rtl', 'replace' );
 
+	// Only add CONTENT styles here that should be enqueued in the iframe!
 	$wp_edit_blocks_dependencies = array(
 		'wp-components',
 		// This need to be added before the block library styles,
 		// The block library styles override the "reset" styles.
 		'wp-reset-editor-styles',
 		'wp-block-library',
-		'wp-reusable-blocks',
+		// Until #37466, we can't specifically add them as editor styles yet,
+		// so we must hard-code it here as a dependency.
+		'wp-block-editor-content',
 	);
 
 	// Only load the default layout and margin styles for themes without theme.json file.
@@ -346,6 +361,15 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-editor-classic-layout-styles', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-block-library-editor',
+		gutenberg_url( 'build/block-library/editor.css' ),
+		array(),
+		$version
+	);
+	$styles->add_data( 'wp-block-library-editor', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-edit-blocks',
@@ -384,18 +408,18 @@ function gutenberg_register_packages_styles( $styles ) {
 
 	gutenberg_override_style(
 		$styles,
-		'wp-edit-navigation',
-		gutenberg_url( 'build/edit-navigation/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks' ),
+		'wp-commands',
+		gutenberg_url( 'build/commands/style.css' ),
+		array( 'wp-components' ),
 		$version
 	);
-	$styles->add_data( 'wp-edit-navigation', 'rtl', 'replace' );
+	$styles->add_data( 'wp-commands', 'rtl', 'replace' );
 
 	gutenberg_override_style(
 		$styles,
 		'wp-edit-site',
 		gutenberg_url( 'build/edit-site/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-block-library-editor', 'common', 'forms', 'wp-commands', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-site', 'rtl', 'replace' );
@@ -404,7 +428,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-edit-widgets',
 		gutenberg_url( 'build/edit-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-reusable-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-patterns', 'wp-widgets', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-edit-widgets', 'rtl', 'replace' );
@@ -422,11 +446,20 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-customize-widgets',
 		gutenberg_url( 'build/customize-widgets/style.css' ),
-		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-widgets', 'wp-preferences' ),
 		$version
 	);
 	$styles->add_data( 'wp-customize-widgets', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-patterns',
+		gutenberg_url( 'build/patterns/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-patterns', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-reusable-blocks',
@@ -434,7 +467,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		array( 'wp-components' ),
 		$version
 	);
-	$styles->add_data( 'wp-reusable-block', 'rtl', 'replace' );
+	$styles->add_data( 'wp-reusable-blocks', 'rtl', 'replace' );
 
 	gutenberg_override_style(
 		$styles,
@@ -443,6 +476,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		array( 'wp-components' )
 	);
 	$styles->add_data( 'wp-widgets', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-preferences',
+		gutenberg_url( 'build/preferences/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-preferences', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 
@@ -453,7 +495,9 @@ function gutenberg_register_packages_styles( $styles ) {
  * This hook also exists, and should be backported to Core in future versions.
  * However, it is envisaged that Gutenberg will continue to use the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes to aid continuous development.
  *
- * See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
+ * @since 6.1
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/
  *
  * @param array $options {
  *     Optional. An array of options to pass to gutenberg_style_engine_get_stylesheet_from_context(). Default empty array.
@@ -462,8 +506,6 @@ function gutenberg_register_packages_styles( $styles ) {
  *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
  * }
  *
- * @since 6.1
- *
  * @return void
  */
 function gutenberg_enqueue_stored_styles( $options = array() ) {
@@ -486,7 +528,7 @@ function gutenberg_enqueue_stored_styles( $options = array() ) {
 	$style_tag_id             = 'core';
 	foreach ( $core_styles_keys as $style_key ) {
 		// Adds comment if code is prettified to identify core styles sections in debugging.
-		$should_prettify = isset( $options['prettify'] ) ? true === $options['prettify'] : defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG;
+		$should_prettify = isset( $options['prettify'] ) ? true === $options['prettify'] : SCRIPT_DEBUG;
 		if ( $should_prettify ) {
 			$compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n";
 		}
@@ -527,6 +569,97 @@ function gutenberg_enqueue_stored_styles( $options = array() ) {
 	}
 }
 
+/**
+ * Registers vendor JavaScript files to be used as dependencies of the editor
+ * and plugins.
+ *
+ * This function is called from a script during the plugin build process, so it
+ * should not call any WordPress PHP functions.
+ *
+ * @since 13.0
+ *
+ * @param WP_Scripts $scripts WP_Scripts instance.
+ */
+function gutenberg_register_vendor_scripts( $scripts ) {
+	$extension = SCRIPT_DEBUG ? '.js' : '.min.js';
+
+	gutenberg_override_script(
+		$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' ),
+		'18'
+	);
+	gutenberg_override_script(
+		$scripts,
+		'react-dom',
+		gutenberg_url( 'build/vendors/react-dom' . $extension ),
+		array( 'react' ),
+		'18'
+	);
+
+	gutenberg_override_script(
+		$scripts,
+		'react-jsx-runtime',
+		gutenberg_url( 'build/vendors/react-jsx-runtime' . $extension ),
+		array( 'react' ),
+		'18'
+	);
+}
+add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
+
+/**
+ * Registers or re-registers Gutenberg Script Modules.
+ *
+ * Script modules that are registered by Core will be re-registered by Gutenberg.
+ *
+ * @since 19.3.0
+ */
+function gutenberg_default_script_modules() {
+	/*
+	 * Expects multidimensional array like:
+	 *
+	 *     'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity-router/index.min.js' => …
+	 */
+	$assets = include gutenberg_dir_path() . '/build-module/assets.php';
+
+	foreach ( $assets as $file_name => $script_module_data ) {
+		/*
+		 * Build the WordPress Script Module ID from the file name.
+		 * Prepend `@wordpress/` and remove extensions and `/index` if present:
+		 *   - interactivity/index.min.js  => @wordpress/interactivity
+		 *   - interactivity/debug.min.js  => @wordpress/interactivity/debug
+		 *   - block-library/query/view.js => @wordpress/block-library/query/view
+		 */
+		$script_module_id = '@wordpress/' . preg_replace( '~(?:/index)?\.min\.js$~D', '', $file_name, 1 );
+		switch ( $script_module_id ) {
+			/*
+			 * Interactivity exposes two entrypoints, "/index" and "/debug".
+			 * "/debug" should replace "/index" in development.
+			 */
+			case '@wordpress/interactivity/debug':
+				if ( ! SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				$script_module_id = '@wordpress/interactivity';
+				break;
+			case '@wordpress/interactivity':
+				if ( SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				break;
+		}
+
+		$path = gutenberg_url( "build-module/{$file_name}" );
+		wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
+	}
+}
+remove_action( 'wp_default_scripts', 'wp_default_script_modules' );
+add_action( 'wp_default_scripts', 'gutenberg_default_script_modules' );
+
 /*
  * Always remove the Core action hook while gutenberg_enqueue_stored_styles() exists to avoid styles being printed twice.
  * This is also because gutenberg_enqueue_stored_styles uses the Style Engine's `gutenberg_*` functions and `_Gutenberg` classes,
diff --git a/lib/compat/plugin/fonts.php b/lib/compat/plugin/fonts.php
new file mode 100644
index 00000000000000..f427f6110f610a
--- /dev/null
+++ b/lib/compat/plugin/fonts.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * A special compat layer for legacy font files upload directory.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/57688#issuecomment-2259037546
+ *
+ * @package gutenberg
+ */
+
+// @core-merge: Do not merge this function, it is for deleting fonts from the wp-content/fonts directory only used in Gutenberg.
+/**
+ * Deletes associated font files from wp-content/fonts, when a font face is deleted.
+ *
+ * @param int     $post_id Post ID.
+ * @param WP_Post $post    Post object.
+ */
+function gutenberg_before_delete_font_face( $post_id, $post ) {
+	if ( 'wp_font_face' !== $post->post_type ) {
+		return;
+	}
+
+	$font_files = get_post_meta( $post_id, '_wp_font_face_file', false );
+
+	if ( empty( $font_files ) ) {
+		return;
+	}
+
+	$site_path = '';
+	if ( is_multisite() && ! ( is_main_network() && is_main_site() ) ) {
+		$site_path = '/sites/' . get_current_blog_id();
+	}
+
+	$font_dir = path_join( WP_CONTENT_DIR, 'fonts' ) . $site_path;
+
+	foreach ( $font_files as $font_file ) {
+		$font_path = $font_dir . '/' . $font_file;
+
+		if ( file_exists( $font_path ) ) {
+			wp_delete_file( $font_path );
+		}
+	}
+}
+add_action( 'before_delete_post', 'gutenberg_before_delete_font_face', 10, 2 );
diff --git a/lib/compat/wordpress-6.0/block-editor-settings.php b/lib/compat/wordpress-6.0/block-editor-settings.php
deleted file mode 100644
index 8aae673bff334d..00000000000000
--- a/lib/compat/wordpress-6.0/block-editor-settings.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-/**
- * Adds settings to the block editor.
- *
- * @package gutenberg
- */
-
-/**
- * Returns true if the style is coming from global styles.
- *
- * @param array $style Array containing a '__unstableType' key and a 'css' key with the actual CSS.
- * @return boolean
- */
-function gutenberg_is_global_styles_in_5_9( $style ) {
-	/*
-	 * In WordPress 5.9 we don't have a mechanism to distinguish block styles generated via theme.json
-	 * from styles that come from the stylesheet of a theme.
-	 *
-	 * We do know that the block styles generated via theme.json have some rules for alignment.
-	 * Hence, by detecting the presence of these rules, we can tell with high certainty
-	 * whether or not the incoming $style has been generated from theme.json.
-	 */
-	$root_styles  = '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-	$root_styles .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-	$root_styles .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-	if (
-		( isset( $style['__unstableType'] ) && ( 'presets' === $style['__unstableType'] ) ) ||
-		( isset( $style['__unstableType'] ) && ( 'theme' === $style['__unstableType'] ) && str_contains( $style['css'], $root_styles ) )
-	) {
-		return true;
-	}
-
-	return false;
-}
diff --git a/lib/compat/wordpress-6.0/block-gallery.php b/lib/compat/wordpress-6.0/block-gallery.php
deleted file mode 100644
index 53c3a0c2247fd0..00000000000000
--- a/lib/compat/wordpress-6.0/block-gallery.php
+++ /dev/null
@@ -1,57 +0,0 @@
-<?php
-/**
- * Gallery block modifications.
- *
- * @package gutenberg
- */
-
-/**
- * The new gallery block format is not compatible with the use_BalanceTags option
- * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130.
- * This method adds a variable to the wp namespace to indicate if the new gallery block
- * format can be enabled or not. It needs to be added this early and to the wp namespace
- * as it needs to be available when the initial block parsing runs on editor load, and most of
- * the editor store and standard flags are not loaded yet at that point
- *
- * @since 12.1.0
- * @todo This should be removed when the minimum required WP version is >= 6.0.
- *
- * @return void.
- */
-function gutenberg_check_gallery_block_v2_compatibility() {
-	$use_balance_tags   = (int) get_option( 'use_balanceTags' );
-	$v2_gallery_enabled = boolval( 1 !== $use_balance_tags || is_wp_version_compatible( '6.0' ) ) ? 'true' : 'false';
-
-	wp_add_inline_script(
-		'wp-dom-ready',
-		'wp.galleryBlockV2Enabled = ' . $v2_gallery_enabled . ';',
-		'after'
-	);
-}
-add_action( 'init', 'gutenberg_check_gallery_block_v2_compatibility' );
-
-/**
- * Prevent use_balanceTags being enabled on WordPress 5.8 or earlier as it breaks
- * the layout of the new Gallery block.
- *
- * @since 12.1.0
- * @todo This should be removed when the minimum required WP version is >= 6.0.
- *
- * @param int $new_value The new value for use_balanceTags.
- */
-function gutenberg_use_balancetags_check( $new_value ) {
-	global $wp_version;
-
-	if ( 1 === (int) $new_value && version_compare( $wp_version, '6.0', '<' ) ) {
-		/* translators: %s: Minimum required version */
-		$message = sprintf( __( 'Gutenberg requires WordPress %s or later in order to enable the &#8220;Correct invalidly nested XHTML automatically&#8221; option. Please upgrade WordPress before enabling.', 'gutenberg' ), '6.0' );
-		add_settings_error( 'gutenberg_use_balancetags_check', 'gutenberg_use_balancetags_check', $message, 'error' );
-		if ( class_exists( 'WP_CLI' ) ) {
-			WP_CLI::error( $message );
-		}
-		return 0;
-	}
-
-	return $new_value;
-}
-add_filter( 'pre_update_option_use_balanceTags', 'gutenberg_use_balancetags_check' );
diff --git a/lib/compat/wordpress-6.0/block-patterns-update.php b/lib/compat/wordpress-6.0/block-patterns-update.php
deleted file mode 100644
index c17a65be2ae223..00000000000000
--- a/lib/compat/wordpress-6.0/block-patterns-update.php
+++ /dev/null
@@ -1,217 +0,0 @@
-<?php
-/**
- * Block patterns registration.
- *
- * @package gutenberg
- */
-
-/**
- * Register Gutenberg bundled patterns.
- */
-function gutenberg_register_gutenberg_patterns() {
-	$pattern_category_registry = WP_Block_Pattern_Categories_Registry::get_instance();
-
-	// Register categories used for block patterns.
-	if ( ! $pattern_category_registry->is_registered( 'query' ) ) {
-		register_block_pattern_category( 'query', array( 'label' => __( 'Query', 'gutenberg' ) ) );
-	}
-
-	if ( ! $pattern_category_registry->is_registered( 'featured' ) ) {
-		register_block_pattern_category( 'featured', array( 'label' => __( 'Featured', 'gutenberg' ) ) );
-	}
-
-	$patterns = array(
-		'query-standard-posts'                 => array(
-			'title'      => _x( 'Standard', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-							<div class="wp-block-query">
-							<!-- wp:post-template -->
-							<!-- wp:post-title {"isLink":true} /-->
-							<!-- wp:post-featured-image  {"isLink":true,"align":"wide"} /-->
-							<!-- wp:post-excerpt /-->
-							<!-- wp:separator -->
-							<hr class="wp-block-separator"/>
-							<!-- /wp:separator -->
-							<!-- wp:post-date /-->
-							<!-- /wp:post-template -->
-							</div>
-							<!-- /wp:query -->',
-		),
-		'query-medium-posts'                   => array(
-			'title'      => _x( 'Image at left', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-							<div class="wp-block-query">
-							<!-- wp:post-template -->
-							<!-- wp:columns {"align":"wide"} -->
-							<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
-							<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>
-							<!-- /wp:column -->
-							<!-- wp:column {"width":"33.33%"} -->
-							<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-title {"isLink":true} /-->
-							<!-- wp:post-excerpt /--></div>
-							<!-- /wp:column --></div>
-							<!-- /wp:columns -->
-							<!-- /wp:post-template -->
-							</div>
-							<!-- /wp:query -->',
-		),
-		'query-small-posts'                    => array(
-			'title'      => _x( 'Small image and title', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-							<div class="wp-block-query">
-							<!-- wp:post-template -->
-							<!-- wp:columns {"verticalAlignment":"center"} -->
-							<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
-							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>
-							<!-- /wp:column -->
-							<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
-							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>
-							<!-- /wp:column --></div>
-							<!-- /wp:columns -->
-							<!-- /wp:post-template -->
-							</div>
-							<!-- /wp:query -->',
-		),
-		'query-grid-posts'                     => array(
-			'title'      => _x( 'Grid', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
-							<div class="wp-block-query">
-							<!-- wp:post-template -->
-							<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
-							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
-							<!-- wp:post-excerpt /-->
-							<!-- wp:post-date /--></div>
-							<!-- /wp:group -->
-							<!-- /wp:post-template -->
-							</div>
-							<!-- /wp:query -->',
-		),
-		'query-large-title-posts'              => array(
-			'title'      => _x( 'Large title', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->
-							<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
-							<div class="wp-block-query"><!-- wp:post-template -->
-							<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->
-							<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>
-							<!-- /wp:separator -->
-
-							<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
-							<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->
-							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>
-							<!-- /wp:column -->
-
-							<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->
-							<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>
-							<!-- /wp:column --></div>
-							<!-- /wp:columns -->
-							<!-- /wp:post-template --></div>
-							<!-- /wp:query --></div>
-							<!-- /wp:group -->',
-		),
-		'query-offset-posts'                   => array(
-			'title'      => _x( 'Offset', 'Block pattern title', 'gutenberg' ),
-			'blockTypes' => array( 'core/query' ),
-			'categories' => array( 'query' ),
-			'content'    => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
-							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->
-							<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
-							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
-							<div class="wp-block-query"><!-- wp:post-template -->
-							<!-- wp:post-featured-image /-->
-							<!-- wp:post-title /-->
-							<!-- wp:post-date /-->
-							<!-- wp:spacer {"height":200} -->
-							<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
-							<!-- /wp:spacer -->
-							<!-- /wp:post-template --></div>
-							<!-- /wp:query --></div>
-							<!-- /wp:column -->
-							<!-- wp:column {"width":"50%"} -->
-							<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->
-							<div class="wp-block-query"><!-- wp:post-template -->
-							<!-- wp:spacer {"height":200} -->
-							<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
-							<!-- /wp:spacer -->
-							<!-- wp:post-featured-image /-->
-							<!-- wp:post-title /-->
-							<!-- wp:post-date /-->
-							<!-- /wp:post-template --></div>
-							<!-- /wp:query --></div>
-							<!-- /wp:column --></div>
-							<!-- /wp:columns --></div>
-							<!-- /wp:group -->',
-		),
-		// Initial block pattern to be used with block transformations with patterns.
-		'social-links-shared-background-color' => array(
-			'title'         => _x( 'Social links with a shared background color', 'Block pattern title', 'gutenberg' ),
-			'categories'    => array( 'buttons' ),
-			'blockTypes'    => array( 'core/social-links' ),
-			'viewportWidth' => 500,
-			'content'       => '<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
-								<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
-								<!-- wp:social-link {"url":"#","service":"chain"} /-->
-								<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
-								<!-- /wp:social-links -->',
-		),
-	);
-
-	foreach ( $patterns as $name => $pattern ) {
-		$pattern_name = 'core/' . $name;
-		if ( ! WP_Block_Patterns_Registry::get_instance()->is_registered( $pattern_name ) ) {
-			register_block_pattern( $pattern_name, $pattern );
-		}
-	}
-}
-
-/**
- * Deactivate the legacy patterns bundled with WordPress.
- */
-function gutenberg_remove_core_patterns() {
-	$core_block_patterns = array(
-		'text-two-columns',
-		'two-buttons',
-		'two-images',
-		'text-two-columns-with-images',
-		'text-three-columns-buttons',
-		'large-header',
-		'large-header-button',
-		'three-buttons',
-		'heading-paragraph',
-		'quote',
-		'query-standard-posts',
-		'query-medium-posts',
-		'query-small-posts',
-		'query-grid-posts',
-		'query-large-title-posts',
-		'query-offset-posts',
-		'social-links-shared-background-color',
-	);
-
-	foreach ( $core_block_patterns as $core_block_pattern ) {
-		$name = 'core/' . $core_block_pattern;
-		if ( WP_Block_Patterns_Registry::get_instance()->is_registered( $name ) ) {
-			unregister_block_pattern( $name );
-		}
-	}
-}
-
-add_action(
-	'init',
-	function() {
-		if ( ! get_theme_support( 'core-block-patterns' ) || ! function_exists( 'unregister_block_pattern' ) ) {
-			return;
-		}
-		gutenberg_remove_core_patterns();
-		gutenberg_register_gutenberg_patterns();
-	}
-);
diff --git a/lib/compat/wordpress-6.0/block-patterns.php b/lib/compat/wordpress-6.0/block-patterns.php
deleted file mode 100644
index c42ec73152219a..00000000000000
--- a/lib/compat/wordpress-6.0/block-patterns.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-/**
- * Block patterns registration from `theme.json` and Pattern Directory.
- *
- * @package gutenberg
- */
-
-if ( ! function_exists( '_register_remote_theme_patterns' ) ) {
-	/**
-	 * Registers patterns from Pattern Directory provided by a theme's
-	 * `theme.json` file.
-	 */
-	function _register_remote_theme_patterns() {
-		if ( ! apply_filters( 'should_load_remote_block_patterns', true ) ) {
-			return;
-		}
-
-		if ( ! wp_theme_has_theme_json() ) {
-			return;
-		}
-
-		$pattern_settings = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_patterns();
-		if ( empty( $pattern_settings ) ) {
-			return;
-		}
-
-		$request         = new WP_REST_Request( 'GET', '/wp/v2/pattern-directory/patterns' );
-		$request['slug'] = $pattern_settings;
-		$response        = rest_do_request( $request );
-		if ( $response->is_error() ) {
-			return;
-		}
-		$patterns          = $response->get_data();
-		$patterns_registry = WP_Block_Patterns_Registry::get_instance();
-		foreach ( $patterns as $pattern ) {
-			$pattern_name = sanitize_title( $pattern['title'] );
-			// Some patterns might be already registered as core patterns with the `core` prefix.
-			$is_registered = $patterns_registry->is_registered( $pattern_name ) || $patterns_registry->is_registered( "core/$pattern_name" );
-			if ( ! $is_registered ) {
-				register_block_pattern( $pattern_name, (array) $pattern );
-			}
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.0/block-template-utils.php b/lib/compat/wordpress-6.0/block-template-utils.php
deleted file mode 100644
index 1fcd3dae83e594..00000000000000
--- a/lib/compat/wordpress-6.0/block-template-utils.php
+++ /dev/null
@@ -1,132 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for features present in Gutenberg.
- * This file should be removed when WordPress 6.0.0 becomes the lowest
- * supported version by this plugin.
- *
- * @package gutenberg
- */
-
-/**
- * Filters theme files and folders that should be ignored during export.
- *
- * @since 6.0.0
- *
- * @param string $path The path of the file in the theme.
- * @return Bool Whether this file or directory is ignored.
- */
-function gutenberg_is_theme_directory_ignored( $path ) {
-	$ignore_list = array( '.DS_Store', '.svn', '.git', '.hg', '.bzr', 'node_modules', 'vendor' );
-	foreach ( $ignore_list as $ignored ) {
-		if ( str_starts_with( $path, $ignored ) ) {
-			return true;
-		}
-	}
-
-	return false;
-}
-
-/**
- * Creates an export of the current templates and
- * template parts from the site editor at the
- * specified path in a ZIP file.
- *
- * @since 5.9.0
- * @since 6.0.0 Adds theme.json to the export archive.
- *
- * @return WP_Error|string Path of the ZIP file or error on failure.
- */
-function gutenberg_generate_block_templates_export_file() {
-	if ( ! class_exists( 'ZipArchive' ) ) {
-		return new WP_Error( 'missing_zip_package', __( 'Zip Export not supported.', 'gutenberg' ) );
-	}
-
-	$obscura    = wp_generate_password( 12, false, false );
-	$theme_name = wp_get_theme()->get( 'TextDomain' );
-	$filename   = get_temp_dir() . $theme_name . $obscura . '.zip';
-
-	$zip = new ZipArchive();
-	if ( true !== $zip->open( $filename, ZipArchive::CREATE | ZipArchive::OVERWRITE ) ) {
-		return new WP_Error( 'unable_to_create_zip', __( 'Unable to open export file (archive) for writing.', 'gutenberg' ) );
-	}
-
-	$zip->addEmptyDir( 'templates' );
-	$zip->addEmptyDir( 'parts' );
-
-	// Get path of the theme.
-	$theme_path = wp_normalize_path( get_stylesheet_directory() );
-
-	// Create recursive directory iterator.
-	$theme_files = new RecursiveIteratorIterator(
-		new RecursiveDirectoryIterator( $theme_path ),
-		RecursiveIteratorIterator::LEAVES_ONLY
-	);
-
-	// Make a copy of the current theme.
-	foreach ( $theme_files as $file ) {
-		// Skip directories as they are added automatically.
-		if ( ! $file->isDir() ) {
-			// Get real and relative path for current file.
-			$file_path     = wp_normalize_path( $file );
-			$relative_path = substr( $file_path, strlen( $theme_path ) + 1 );
-
-			if ( ! gutenberg_is_theme_directory_ignored( $relative_path ) ) {
-				$zip->addFile( $file_path, $relative_path );
-			}
-		}
-	}
-
-	// Load templates into the zip file.
-	$templates = gutenberg_get_block_templates();
-	foreach ( $templates as $template ) {
-		$template->content = _remove_theme_attribute_in_block_template_content( $template->content );
-
-		$zip->addFromString(
-			'templates/' . $template->slug . '.html',
-			$template->content
-		);
-	}
-
-	// Load template parts into the zip file.
-	$template_parts = gutenberg_get_block_templates( array(), 'wp_template_part' );
-	foreach ( $template_parts as $template_part ) {
-		$zip->addFromString(
-			'parts/' . $template_part->slug . '.html',
-			$template_part->content
-		);
-	}
-
-	// Load theme.json into the zip file.
-	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) );
-	// Merge with user data.
-	$tree->merge( WP_Theme_JSON_Resolver_Gutenberg::get_user_data() );
-
-	$theme_json_raw = $tree->get_data();
-	// If a version is defined, add a schema.
-	if ( $theme_json_raw['version'] ) {
-		global $wp_version;
-		$theme_json_version = 'wp/' . substr( $wp_version, 0, 3 );
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) ) {
-			$theme_json_version = 'trunk';
-		}
-		$schema         = array( '$schema' => 'https://schemas.wp.org/' . $theme_json_version . '/theme.json' );
-		$theme_json_raw = array_merge( $schema, $theme_json_raw );
-	}
-
-	// Convert to a string.
-	$theme_json_encoded = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
-
-	// Replace 4 spaces with a tab.
-	$theme_json_tabbed = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json_encoded );
-
-	// Add the theme.json file to the zip.
-	$zip->addFromString(
-		'theme.json',
-		$theme_json_tabbed
-	);
-
-	// Save changes to the zip file.
-	$zip->close();
-
-	return $filename;
-}
diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php
deleted file mode 100644
index ed83f62f76d420..00000000000000
--- a/lib/compat/wordpress-6.0/blocks.php
+++ /dev/null
@@ -1,194 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for features present in Gutenberg.
- *
- * @package gutenberg
- */
-
-if ( ! function_exists( 'build_comment_query_vars_from_block' ) ) {
-	/**
-	 * Helper function that constructs a comment query vars array from the passed block properties.
-	 *
-	 * It's used with the Comment Query Loop inner blocks.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param WP_Block $block Block instance.
-	 *
-	 * @return array Returns the comment query parameters to use with the WP_Comment_Query constructor.
-	 */
-	function build_comment_query_vars_from_block( $block ) {
-
-		$comment_args = array(
-			'orderby'       => 'comment_date_gmt',
-			'order'         => 'ASC',
-			'status'        => 'approve',
-			'no_found_rows' => false,
-		);
-
-		if ( is_user_logged_in() ) {
-			$comment_args['include_unapproved'] = array( get_current_user_id() );
-		} else {
-			$unapproved_email = wp_get_unapproved_comment_author_email();
-
-			if ( $unapproved_email ) {
-				$comment_args['include_unapproved'] = array( $unapproved_email );
-			}
-		}
-
-		if ( ! empty( $block->context['postId'] ) ) {
-			$comment_args['post_id'] = (int) $block->context['postId'];
-		}
-
-		if ( get_option( 'thread_comments' ) ) {
-			$comment_args['hierarchical'] = 'threaded';
-		} else {
-			$comment_args['hierarchical'] = false;
-		}
-
-		if ( get_option( 'page_comments' ) === '1' || get_option( 'page_comments' ) === true ) {
-			$per_page     = get_option( 'comments_per_page' );
-			$default_page = get_option( 'default_comments_page' );
-			if ( $per_page > 0 ) {
-				$comment_args['number'] = $per_page;
-
-				$page = (int) get_query_var( 'cpage' );
-				if ( $page ) {
-					$comment_args['paged'] = $page;
-				} elseif ( 'oldest' === $default_page ) {
-					$comment_args['paged'] = 1;
-				} elseif ( 'newest' === $default_page ) {
-					$max_num_pages = (int) ( new WP_Comment_Query( $comment_args ) )->max_num_pages;
-					if ( 0 !== $max_num_pages ) {
-						$comment_args['paged'] = $max_num_pages;
-					}
-				}
-				// Set the `cpage` query var to ensure the previous and next pagination links are correct
-				// when inheriting the Discussion Settings.
-				if ( 0 === $page && isset( $comment_args['paged'] ) && $comment_args['paged'] > 0 ) {
-					set_query_var( 'cpage', $comment_args['paged'] );
-				}
-			}
-		}
-
-		return $comment_args;
-	}
-}
-
-if ( ! function_exists( 'get_comments_pagination_arrow' ) ) {
-	/**
-	 * Helper function that returns the proper pagination arrow html for
-	 * `CommentsPaginationNext` and `CommentsPaginationPrevious` blocks based
-	 * on the provided `paginationArrow` from `CommentsPagination` context.
-	 *
-	 * It's used in CommentsPaginationNext and CommentsPaginationPrevious blocks.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param WP_Block $block   Block instance.
-	 * @param string   $pagination_type Type of the arrow we will be rendering. Default 'next'. Accepts 'next' or 'previous'.
-	 *
-	 * @return string|null Returns the constructed WP_Query arguments.
-	 */
-	function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) {
-		$arrow_map = array(
-			'none'    => '',
-			'arrow'   => array(
-				'next'     => '→',
-				'previous' => '←',
-			),
-			'chevron' => array(
-				'next'     => '»',
-				'previous' => '«',
-			),
-		);
-		if ( ! empty( $block->context['comments/paginationArrow'] ) && ! empty( $arrow_map[ $block->context['comments/paginationArrow'] ][ $pagination_type ] ) ) {
-			$arrow_attribute = $block->context['comments/paginationArrow'];
-			$arrow           = $arrow_map[ $block->context['comments/paginationArrow'] ][ $pagination_type ];
-			$arrow_classes   = "wp-block-comments-pagination-$pagination_type-arrow is-arrow-$arrow_attribute";
-			return "<span class='$arrow_classes'>$arrow</span>";
-		}
-		return null;
-	}
-}
-
-/**
- * Workaround for getting discussion settings as block editor settings
- * so any user can access to them without needing to be an admin.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_extend_block_editor_settings_with_discussion_settings( $settings ) {
-
-	$settings['__experimentalDiscussionSettings'] = array(
-		'commentOrder'         => get_option( 'comment_order' ),
-		'commentsPerPage'      => get_option( 'comments_per_page' ),
-		'defaultCommentsPage'  => get_option( 'default_comments_page' ),
-		'pageComments'         => get_option( 'page_comments' ),
-		'threadComments'       => get_option( 'thread_comments' ),
-		'threadCommentsDepth'  => get_option( 'thread_comments_depth' ),
-		'defaultCommentStatus' => get_option( 'default_comment_status' ),
-		'avatarURL'            => get_avatar_url(
-			'',
-			array(
-				'size'          => 96,
-				'force_default' => true,
-				'default'       => get_option( 'avatar_default' ),
-			)
-		),
-	);
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_extend_block_editor_settings_with_discussion_settings' );
-
-/**
- * Mark the `children` attr of comments as embeddable so they can be included in
- * REST API responses without additional requests.
- *
- * @return void
- */
-function gutenberg_rest_comment_set_children_as_embeddable() {
-	add_filter(
-		'rest_prepare_comment',
-		function ( $response ) {
-			$links = $response->get_links();
-			if ( isset( $links['children'] ) ) {
-				$href = $links['children'][0]['href'];
-				$response->remove_link( 'children', $href );
-				$response->add_link( 'children', $href, array( 'embeddable' => true ) );
-			}
-			return $response;
-		}
-	);
-}
-add_action( 'rest_api_init', 'gutenberg_rest_comment_set_children_as_embeddable' );
-
-/**
- * Registers the lock block attribute for block types.
- *
- * Once 6.0 is the minimum supported WordPress version for the Gutenberg
- * plugin, this shim can be removed
- *
- * Doesn't need to be backported into Core.
- *
- * @param array $args Array of arguments for registering a block type.
- * @return array $args
- */
-function gutenberg_register_lock_attribute( $args ) {
-	// Setup attributes if needed.
-	if ( ! isset( $args['attributes'] ) || ! is_array( $args['attributes'] ) ) {
-		$args['attributes'] = array();
-	}
-
-	if ( ! array_key_exists( 'lock', $args['attributes'] ) ) {
-		$args['attributes']['lock'] = array(
-			'type' => 'object',
-		);
-	}
-
-	return $args;
-}
-add_filter( 'register_block_type_args', 'gutenberg_register_lock_attribute' );
diff --git a/lib/compat/wordpress-6.0/class-gutenberg-rest-edit-site-export-controller.php b/lib/compat/wordpress-6.0/class-gutenberg-rest-edit-site-export-controller.php
deleted file mode 100644
index e4cffb2bff268a..00000000000000
--- a/lib/compat/wordpress-6.0/class-gutenberg-rest-edit-site-export-controller.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<?php
-/**
- * REST API: WP_REST_Edit_Site_Export_Controller class
- *
- * @package    WordPress
- * @subpackage REST_API
- */
-
-/**
- * Controller which provides REST endpoint for exporting current templates
- * and template parts.
- *
- * @since 5.9.0
- *
- * @see WP_REST_Controller
- */
-class Gutenberg_REST_Edit_Site_Export_Controller extends WP_REST_Controller {
-
-	/**
-	 * Constructs the controller.
-	 */
-	public function __construct() {
-		$this->namespace = 'wp-block-editor/v1';
-		$this->rest_base = 'export';
-	}
-
-	/**
-	 * Registers the necessary REST API routes.
-	 */
-	public function register_routes() {
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base,
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'export' ),
-					'permission_callback' => array( $this, 'permissions_check' ),
-				),
-			),
-			true // Override core route if already exists (WP 5.9).
-		);
-	}
-
-	/**
-	 * Checks whether a given request has permission to export.
-	 *
-	 * @return WP_Error|bool True if the request has access, or WP_Error object.
-	 */
-	public function permissions_check() {
-		if ( current_user_can( 'edit_theme_options' ) ) {
-			return true;
-		}
-
-		return new WP_Error(
-			'rest_cannot_export_templates',
-			__( 'Sorry, you are not allowed to export templates and template parts.', 'gutenberg' ),
-			array( 'status' => rest_authorization_required_code() )
-		);
-	}
-
-	/**
-	 * Output a ZIP file with an export of the current templates
-	 * template parts, theme.json and index.php from the site editor,
-	 * and close the connection.
-	 *
-	 * @return WP_Error|void
-	 */
-	public function export() {
-		// Generate the export file.
-		$filename = gutenberg_generate_block_templates_export_file();
-
-		if ( is_wp_error( $filename ) ) {
-			$filename->add_data( array( 'status' => 500 ) );
-
-			return $filename;
-		}
-
-		$theme_name = basename( get_stylesheet() );
-
-		header( 'Content-Type: application/zip' );
-		header( 'Content-Disposition: attachment; filename=' . $theme_name . '.zip' );
-		header( 'Content-Length: ' . filesize( $filename ) );
-		flush();
-		readfile( $filename );
-		unlink( $filename );
-		exit;
-	}
-}
diff --git a/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php b/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php
deleted file mode 100644
index 2a50e9684c0938..00000000000000
--- a/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php
+++ /dev/null
@@ -1,231 +0,0 @@
-<?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 extends WP_REST_Global_Styles_Controller {
-	/**
-	 * Registers the controllers routes.
-	 *
-	 * @return void
-	 */
-	public function register_routes() {
-		// List themes global styles.
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base . '/themes/(?P<stylesheet>[\/\s%\w\.\(\)\[\]\@_\-]+)/variations',
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_theme_items' ),
-					'permission_callback' => array( $this, 'get_theme_items_permissions_check' ),
-					'args'                => array(
-						'stylesheet' => array(
-							'description' => __( 'The theme identifier', 'gutenberg' ),
-							'type'        => 'string',
-						),
-					),
-				),
-			)
-		);
-
-		parent::register_routes();
-	}
-
-	/**
-	 * Checks if a given request has access to read a single theme global styles config.
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
-	 */
-	public function get_theme_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		// Verify if the current user has edit_theme_options capability.
-		// This capability is required to edit/view/delete templates.
-		if ( ! current_user_can( 'edit_theme_options' ) ) {
-			return new WP_Error(
-				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
-		}
-
-		return true;
-	}
-
-	/**
-	 * Prepares a single global styles config for update.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @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'];
-			} 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;
-	}
-
-	/**
-	 * Prepare a global styles config output for response.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @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 );
-		$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;
-	}
-
-	/**
-	 * Returns the given theme global styles config.
-	 *
-	 * @since 5.9.0
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_theme_item( $request ) {
-		if ( wp_get_theme()->get_stylesheet() !== $request['stylesheet'] ) {
-			// This endpoint only supports the active theme for now.
-			return new WP_Error(
-				'rest_theme_not_found',
-				__( 'Theme not found.', 'gutenberg' ),
-				array( 'status' => 404 )
-			);
-		}
-		$theme  = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' );
-		$data   = array();
-		$fields = $this->get_fields_for_response( $request );
-		if ( rest_is_field_included( 'settings', $fields ) ) {
-			$data['settings'] = $theme->get_settings();
-		}
-		if ( rest_is_field_included( 'styles', $fields ) ) {
-			$raw_data       = $theme->get_raw_data();
-			$data['styles'] = isset( $raw_data['styles'] ) ? $raw_data['styles'] : array();
-		}
-		$context  = ! empty( $request['context'] ) ? $request['context'] : 'view';
-		$data     = $this->add_additional_fields_to_object( $data, $request );
-		$data     = $this->filter_response_by_context( $data, $context );
-		$response = rest_ensure_response( $data );
-		$links    = array(
-			'self' => array(
-				'href' => rest_url( sprintf( '%s/%s/themes/%s', $this->namespace, $this->rest_base, $request['stylesheet'] ) ),
-			),
-		);
-		$response->add_links( $links );
-		return $response;
-	}
-
-
-	/**
-	 * Returns the given theme global styles variations.
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 *
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_theme_items( $request ) {
-		if ( wp_get_theme()->get_stylesheet() !== $request['stylesheet'] ) {
-			// This endpoint only supports the active theme for now.
-			return new WP_Error(
-				'rest_theme_not_found',
-				__( 'Theme not found.', 'gutenberg' ),
-				array( 'status' => 404 )
-			);
-		}
-
-		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
-		$response   = rest_ensure_response( $variations );
-
-		return $response;
-	}
-
-}
diff --git a/lib/compat/wordpress-6.0/class-gutenberg-rest-pattern-directory-controller-6-0.php b/lib/compat/wordpress-6.0/class-gutenberg-rest-pattern-directory-controller-6-0.php
deleted file mode 100644
index 331e6015edb0cd..00000000000000
--- a/lib/compat/wordpress-6.0/class-gutenberg-rest-pattern-directory-controller-6-0.php
+++ /dev/null
@@ -1,48 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Pattern_Directory_Controller_6_0 class
- *
- * @package    Gutenberg
- * @subpackage REST_API
- */
-
-/**
- * Controller which provides REST endpoint for block patterns from wordpress.org/patterns.
- */
-class Gutenberg_REST_Pattern_Directory_Controller_6_0 extends WP_REST_Pattern_Directory_Controller {
-	/**
-	 * Include a hash of the query args, so that different requests are stored in
-	 * separate caches.
-	 *
-	 * MD5 is chosen for its speed, low-collision rate, universal availability, and to stay
-	 * under the character limit for `_site_transient_timeout_{...}` keys.
-	 *
-	 * @link https://stackoverflow.com/questions/3665247/fastest-hash-for-non-cryptographic-uses
-	 *
-	 * @since 6.0.0
-	 * @todo This should be removed when the minimum required WordPress version is >= 6.0.
-	 *
-	 * @param array $query_args Query arguments to generate a transient key from.
-	 * @return string Transient key.
-	 */
-	protected function get_transient_key( $query_args ) {
-		if ( method_exists( get_parent_class( $this ), __FUNCTION__ ) ) {
-			return parent::get_transient_key( $query_args );
-		}
-
-		if ( isset( $query_args['slug'] ) ) {
-			// This is an additional precaution because the "sort" function expects an array.
-			$query_args['slug'] = wp_parse_list( $query_args['slug'] );
-
-			// Empty arrays should not affect the transient key.
-			if ( empty( $query_args['slug'] ) ) {
-				unset( $query_args['slug'] );
-			} else {
-				// Sort the array so that the transient key doesn't depend on the order of slugs.
-				sort( $query_args['slug'] );
-			}
-		}
-
-		return 'wp_remote_block_patterns_' . md5( serialize( $query_args ) );
-	}
-}
diff --git a/lib/compat/wordpress-6.0/class-wp-rest-block-pattern-categories-controller.php b/lib/compat/wordpress-6.0/class-wp-rest-block-pattern-categories-controller.php
deleted file mode 100644
index 0f60781dae106c..00000000000000
--- a/lib/compat/wordpress-6.0/class-wp-rest-block-pattern-categories-controller.php
+++ /dev/null
@@ -1,152 +0,0 @@
-<?php
-/**
- * REST API: WP_REST_Block_Pattern_Catergories_Controller class
- *
- * @package    WordPress
- * @subpackage REST_API
- * @since      6.0.0
- */
-
-/**
- * Core class used to access block pattern categories via the REST API.
- *
- * @see   WP_REST_Controller
- *
- * @since 6.0.0
- */
-class WP_REST_Block_Pattern_Categories_Controller extends WP_REST_Controller {
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.0.0
-	 */
-	public function __construct() {
-		$this->namespace = 'wp/v2';
-		$this->rest_base = 'block-patterns/categories';
-	}
-
-	/**
-	 * Registers the routes for the objects of the controller.
-	 *
-	 * @see   register_rest_route()
-	 *
-	 * @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' ),
-			)
-		);
-	}
-
-	/**
-	 * 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 WP_Error|bool 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 pattern categories.', 'gutenberg' ),
-			array( 'status' => rest_authorization_required_code() )
-		);
-	}
-
-	/**
-	 * Retrieves all block pattern categories.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 *
-	 * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure.
-	 */
-	public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		$response   = array();
-		$categories = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered();
-		foreach ( $categories as $category ) {
-			$prepared_category = $this->prepare_item_for_response( $category, $request );
-			$response[]        = $this->prepare_response_for_collection( $prepared_category );
-		}
-		return rest_ensure_response( $response );
-	}
-
-	/**
-	 * Prepare a raw block pattern category before it gets output in a REST API response.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param object          $item    Raw category as registered, before any changes.
-	 * @param WP_REST_Request $request Request object.
-	 * @return WP_REST_Response
-	 */
-	public function prepare_item_for_response( $item, $request ) {
-		$fields = $this->get_fields_for_response( $request );
-		$keys   = array( 'name', 'label' );
-		$data   = array();
-		foreach ( $keys as $key ) {
-			if ( rest_is_field_included( $key, $fields ) ) {
-				$data[ $key ] = $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 category schema, conforming to JSON Schema.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return array Item schema data.
-	 */
-	public function get_item_schema() {
-		$schema = array(
-			'$schema'    => 'http://json-schema.org/draft-04/schema#',
-			'title'      => 'block-pattern-category',
-			'type'       => 'object',
-			'properties' => array(
-				'name'  => array(
-					'description' => __( 'The category name.', 'gutenberg' ),
-					'type'        => 'string',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'label' => array(
-					'description' => __( 'The category label, in human readable format.', 'gutenberg' ),
-					'type'        => 'string',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			),
-		);
-
-		return $this->add_additional_fields_schema( $schema );
-	}
-}
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
deleted file mode 100644
index 07820ccbd1dbe2..00000000000000
--- a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
+++ /dev/null
@@ -1,680 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_6_0 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_0 extends WP_Theme_JSON {
-	/**
-	 * 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.
-	 */
-	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' ),
-		'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--block-gap'     => array( 'spacing', 'blockGap' ),
-		'text-decoration'            => array( 'typography', 'textDecoration' ),
-		'text-transform'             => array( 'typography', 'textTransform' ),
-		'filter'                     => array( 'filter', 'duotone' ),
-	);
-
-	/**
-	 * 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.
-	 */
-	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_key'         => 'size',
-			'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' ),
-		),
-	);
-
-	/**
-	 * The top-level keys a theme.json can have.
-	 *
-	 * @var string[]
-	 */
-	const VALID_TOP_LEVEL_KEYS = array(
-		'customTemplates',
-		'patterns',
-		'settings',
-		'styles',
-		'templateParts',
-		'version',
-		'title',
-	);
-
-	const APPEARANCE_TOOLS_OPT_INS = array(
-		array( 'border', 'color' ),
-		array( 'border', 'radius' ),
-		array( 'border', 'style' ),
-		array( 'border', 'width' ),
-		array( 'color', 'link' ),
-		array( 'spacing', 'blockGap' ),
-		array( 'spacing', 'margin' ),
-		array( 'spacing', 'padding' ),
-		array( 'typography', 'lineHeight' ),
-	);
-
-	/**
-	 * The valid properties under the settings key.
-	 *
-	 * @var array
-	 */
-	const VALID_SETTINGS = array(
-		'appearanceTools' => 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,
-			'wideSize'    => null,
-		),
-		'spacing'         => array(
-			'blockGap' => null,
-			'margin'   => null,
-			'padding'  => null,
-			'units'    => null,
-		),
-		'typography'      => array(
-			'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.
-	 *
-	 * @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,
-		),
-		'filter'     => array(
-			'duotone' => null,
-		),
-		'spacing'    => array(
-			'margin'   => null,
-			'padding'  => null,
-			'blockGap' => 'top',
-		),
-		'typography' => array(
-			'fontFamily'     => null,
-			'fontSize'       => null,
-			'fontStyle'      => null,
-			'fontWeight'     => null,
-			'letterSpacing'  => null,
-			'lineHeight'     => null,
-			'textDecoration' => null,
-			'textTransform'  => null,
-		),
-	);
-
-	/**
-	 * Returns the current theme's wanted patterns(slugs) to be
-	 * registered from Pattern Directory.
-	 *
-	 * @return array
-	 */
-	public function get_patterns() {
-		if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
-			return $this->theme_json['patterns'];
-		}
-		return array();
-	}
-
-	/**
-	 * 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;
-	 *   }
-	 *
-	 * @param array $style_nodes Nodes with styles.
-	 * @return string The new stylesheet.
-	 */
-	protected function get_block_classes( $style_nodes ) {
-		$block_rules = '';
-
-		foreach ( $style_nodes as $metadata ) {
-			if ( null === $metadata['selector'] ) {
-				continue;
-			}
-
-			$node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
-			$selector     = $metadata['selector'];
-			$settings     = _wp_array_get( $this->theme_json, array( 'settings' ) );
-			$declarations = static::compute_style_properties( $node, $settings );
-
-			// 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;
-				}
-			}
-
-			/*
-			 * Reset default browser margin on the root body element.
-			 * This is set on the root selector **before** generating the ruleset
-			 * from the `theme.json`. This is to ensure that if the `theme.json` declares
-			 * `margin` in its `spacing` declaration for the `body` element then these
-			 * user-generated values take precedence in the CSS cascade.
-			 * @link https://github.com/WordPress/gutenberg/issues/36147.
-			 */
-			if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
-				$block_rules .= 'body { margin: 0; }';
-			}
-
-			// 2. Generate the rules that use the general selector.
-			$block_rules .= static::to_ruleset( $selector, $declarations );
-
-			// 3. Generate the rules that use the duotone selector.
-			if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
-				$selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] );
-				$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
-			}
-
-			if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
-				$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-				$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-				$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-				$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-				if ( $has_block_gap_support ) {
-					$block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-					$block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
-				}
-			}
-		}
-
-		return $block_rules;
-	}
-
-	/**
-	 * Merge new incoming data.
-	 *
-	 * @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 ) {
-			$slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
-			$slugs      = array_merge_recursive( $slugs_global, $slugs_node );
-
-			// Replace the spacing.units.
-			$path    = array_merge( $node['path'], array( 'spacing', '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 = array_merge( $node['path'], $preset['path'] );
-					$path      = array_merge( $base_path, array( $origin ) );
-					$content   = _wp_array_get( $incoming_data, $path, null );
-					if ( ! isset( $content ) ) {
-						continue;
-					}
-
-					if ( 'theme' === $origin && $preset['use_default_names'] ) {
-						foreach ( $content as &$item ) {
-							if ( ! array_key_exists( 'name', $item ) ) {
-								$name = static::get_name_from_defaults( $item['slug'], $base_path );
-								if ( null !== $name ) {
-									$item['name'] = $name;
-								}
-							}
-						}
-					}
-
-					if (
-						( 'theme' !== $origin ) ||
-						( 'theme' === $origin && $override_preset )
-					) {
-						_wp_array_set( $this->theme_json, $path, $content );
-					} else {
-						$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 );
-					}
-				}
-			}
-		}
-	}
-
-	/**
-	 * Converts all filter (duotone) presets into SVGs.
-	 *
-	 * @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 );
-
-		$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 .= gutenberg_get_duotone_filter_svg( $duotone_preset );
-				}
-			}
-		}
-
-		return $filters;
-	}
-
-	/**
-	 * 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
-	 * ```
-	 *
-	 * @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.
-	 * @return boolean
-	 */
-	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;
-	}
-
-	/**
-	 * Returns a valid theme.json as provided by a theme.
-	 *
-	 * 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.
-	 *
-	 * @return string[]
-	 */
-	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   = array_merge( $node['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 = array_merge( $node['path'], $opt_in_path );
-				// 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 ) {
-				_wp_array_set( $output, array_merge( $node['path'], array( 'appearanceTools' ) ), true );
-				foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
-					$full_path = array_merge( $node['path'], $opt_in_path );
-					// 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;
-	}
-
-	/**
-	 * 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'] );
-	}
-}
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
deleted file mode 100644
index 07b83049cfeaad..00000000000000
--- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
+++ /dev/null
@@ -1,223 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_Resolver_6_0 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_0 extends WP_Theme_JSON_Resolver {
-
-
-
-	/**
-	 * 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 );
-	}
-
-	/**
-	 * 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 $options 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(), $options = array() ) {
-		if ( ! empty( $deprecated ) ) {
-			_deprecated_argument( __METHOD__, '5.9' );
-		}
-
-		$options = wp_parse_args( $options, array( 'with_supports' => true ) );
-
-		if ( null === static::$theme ) {
-			$theme_json_data = static::read_json_file( static::get_file_path_from_theme( 'theme.json' ) );
-			$theme_json_data = static::translate( $theme_json_data, wp_get_theme()->get( 'TextDomain' ) );
-			static::$theme   = new WP_Theme_JSON_Gutenberg( $theme_json_data );
-
-			if ( wp_get_theme()->parent() ) {
-				// Get parent theme.json.
-				$parent_theme_json_data = static::read_json_file( static::get_file_path_from_theme( 'theme.json', true ) );
-				$parent_theme_json_data = static::translate( $parent_theme_json_data, wp_get_theme()->parent()->get( 'TextDomain' ) );
-				$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( get_default_block_editor_settings() );
-		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;
-		}
-		$with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data );
-		$with_theme_supports->merge( static::$theme );
-
-		return $with_theme_supports;
-	}
-	/**
-	 * Returns the style variations defined by the theme.
-	 *
-	 * @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;
-	}
-
-	/**
-	 * 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() );
-				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;
-			}
-		}
-		static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
-
-		return static::$user;
-	}
-
-	/**
-	 * There are three sources of data (origins) for a site:
-	 * default, theme, and custom. The custom's has higher priority
-	 * than the theme's, and the theme's higher than defaults's.
-	 *
-	 * Unlike the getters {@link get_core_data},
-	 * {@link get_theme_data}, and {@link 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 (user, theme, and core),
-	 * 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.
-	 *                       Valid values are 'theme' or 'custom'.
-	 *                       Default is 'custom'.
-	 * @return WP_Theme_JSON_Gutenberg
-	 */
-	public static function get_merged_data( $origin = 'custom' ) {
-		if ( is_array( $origin ) ) {
-			_deprecated_argument( __FUNCTION__, '5.9' );
-		}
-
-		$result = new WP_Theme_JSON_Gutenberg();
-		$result->merge( static::get_core_data() );
-		$result->merge( static::get_theme_data() );
-
-		if ( 'custom' === $origin ) {
-			$result->merge( static::get_user_data() );
-		}
-
-		return $result;
-	}
-}
diff --git a/lib/compat/wordpress-6.0/client-assets.php b/lib/compat/wordpress-6.0/client-assets.php
deleted file mode 100644
index f9affb31af4b52..00000000000000
--- a/lib/compat/wordpress-6.0/client-assets.php
+++ /dev/null
@@ -1,117 +0,0 @@
-<?php
-/**
- * Updates client assets for the editor.
- *
- * @package gutenberg
- */
-
-/**
- * Registers vendor JavaScript files to be used as dependencies of the editor
- * and plugins.
- *
- * This function is called from a script during the plugin build process, so it
- * should not call any WordPress PHP functions.
- *
- * @since 13.0
- *
- * @param WP_Scripts $scripts WP_Scripts instance.
- */
-function gutenberg_register_vendor_scripts( $scripts ) {
-	$extension = SCRIPT_DEBUG ? '.js' : '.min.js';
-
-	gutenberg_override_script(
-		$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' )
-	);
-	gutenberg_override_script(
-		$scripts,
-		'react-dom',
-		gutenberg_url( 'build/vendors/react-dom' . $extension ),
-		array( 'react' )
-	);
-}
-add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
-
-/**
- * Sets the editor styles to be consumed by JS.
- */
-function gutenberg_resolve_assets() {
-	global $pagenow;
-
-	$script_handles = array();
-	$style_handles  = array(
-		'wp-block-editor',
-		'wp-block-library',
-		'wp-edit-blocks',
-	);
-
-	if ( current_theme_supports( 'wp-block-styles' ) ) {
-		$style_handles[] = 'wp-block-library-theme';
-	}
-
-	if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
-		$style_handles[] = 'wp-widgets';
-		$style_handles[] = 'wp-edit-widgets';
-	}
-
-	$block_registry = WP_Block_Type_Registry::get_instance();
-
-	foreach ( $block_registry->get_all_registered() as $block_type ) {
-		if ( ! empty( $block_type->style ) ) {
-			$style_handles[] = $block_type->style;
-		}
-
-		if ( ! empty( $block_type->editor_style ) ) {
-			$style_handles[] = $block_type->editor_style;
-		}
-
-		if ( ! empty( $block_type->script ) ) {
-			$script_handles[] = $block_type->script;
-		}
-	}
-
-	$style_handles = array_unique( $style_handles );
-	$done          = wp_styles()->done;
-
-	ob_start();
-
-	// We do not need reset styles for the iframed editor.
-	wp_styles()->done = array( 'wp-reset-editor-styles' );
-	wp_styles()->do_items( $style_handles );
-	wp_styles()->done = $done;
-
-	$styles = ob_get_clean();
-
-	$script_handles = array_unique( $script_handles );
-	$done           = wp_scripts()->done;
-
-	ob_start();
-
-	wp_scripts()->done = array();
-	wp_scripts()->do_items( $script_handles );
-	wp_scripts()->done = $done;
-
-	$scripts = ob_get_clean();
-
-	return array(
-		'styles'  => $styles,
-		'scripts' => $scripts,
-	);
-}
-
-add_filter(
-	'block_editor_settings_all',
-	function( $settings ) {
-		// The `__unstableResolvedAssets` are generated by `_wp_get_iframed_editor_assets` for WP >= 6.0.
-		if ( function_exists( '_wp_get_iframed_editor_assets' ) ) {
-			return $settings;
-		}
-
-		// In the future we can allow WP Dependency handles to be passed.
-		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets();
-		return $settings;
-	}
-);
diff --git a/lib/compat/wordpress-6.0/edit-form-blocks.php b/lib/compat/wordpress-6.0/edit-form-blocks.php
deleted file mode 100644
index b11851222b0baf..00000000000000
--- a/lib/compat/wordpress-6.0/edit-form-blocks.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-/**
- * Patches resources loaded by the block editor page.
- *
- * @package gutenberg
- */
-
-/**
- * Optimizes the preload paths registered in Core (`edit-form-blocks.php`).
- *
- * @param array $preload_paths Preload paths to be filtered.
- * @return array
- */
-function gutenberg_optimize_preload_paths( $preload_paths ) {
-	// remove preload of the `/` route.
-	$root_index = array_search( '/', $preload_paths, true );
-	if ( false !== $root_index ) {
-		array_splice( $preload_paths, $root_index, 1 );
-	}
-
-	// change `/types` context from `edit` to `view` (requested in `loadPostTypeEntities`).
-	$types_index = array_search( '/wp/v2/types?context=edit', $preload_paths, true );
-	if ( false !== $types_index ) {
-		$preload_paths[ $types_index ] = '/wp/v2/types?context=view';
-	}
-
-	// start preloading `/taxonomies` in `view` context (requested in `loadTaxonomyEntities`).
-	$tax_index = array_search( '/wp/v2/taxonomies?per_page=-1&context=edit', $preload_paths, true );
-	if ( false === $tax_index ) {
-		array_push( $preload_paths, '/wp/v2/taxonomies?context=view' );
-	} else {
-		$preload_paths[ $tax_index ] = '/wp/v2/taxonomies?context=view';
-	}
-
-	// start preloading `/settings`.
-	$settings_index = array_search( '/wp/v2/settings', $preload_paths, true );
-	if ( false === $settings_index ) {
-		array_push( $preload_paths, '/wp/v2/settings' );
-	}
-
-	// modify the preload of `/users/me` to match the real request.
-	foreach ( $preload_paths as $user_index => $user_path ) {
-		if ( is_string( $user_path ) && str_starts_with( $user_path, '/wp/v2/users/me' ) ) {
-			$preload_paths[ $user_index ] = '/wp/v2/users/me';
-			break;
-		}
-	}
-
-	return $preload_paths;
-}
-add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_optimize_preload_paths' );
-
-/**
- * Disables loading remote block patterns from REST while initializing the editor.
- * Nowadays these loads are done in the `block-patterns/patterns` REST endpoint, and
- * are undesired when initializing the block editor page, both in post and site editor.
- *
- * @param WP_Screen $current_screen WordPress current screen object.
- */
-function gutenberg_disable_load_remote_patterns( $current_screen ) {
-	$is_site_editor = ( function_exists( 'gutenberg_is_edit_site_page' ) && gutenberg_is_edit_site_page( $current_screen->id ) );
-	if ( $is_site_editor || $current_screen->is_block_editor() ) {
-		add_filter( 'should_load_remote_block_patterns', '__return_false' );
-	}
-}
-add_action( 'current_screen', 'gutenberg_disable_load_remote_patterns' );
diff --git a/lib/compat/wordpress-6.0/functions.php b/lib/compat/wordpress-6.0/functions.php
deleted file mode 100644
index 9368b211b05990..00000000000000
--- a/lib/compat/wordpress-6.0/functions.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Generic helper functions.
- *
- * @package WordPress
- * @since 6.0.0
- */
-
-if ( ! function_exists( 'wp_recursive_ksort' ) ) {
-	/**
-	 * Sorts the keys of an array alphabetically.
-	 * The array is passed by reference so it doesn't get returned
-	 * which mimics the behaviour of ksort.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $array The array to sort, passed by reference.
-	 */
-	function wp_recursive_ksort( &$array ) {
-		foreach ( $array as &$value ) {
-			if ( is_array( $value ) ) {
-				wp_recursive_ksort( $value );
-			}
-		}
-		ksort( $array );
-	}
-}
diff --git a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
deleted file mode 100644
index d4f1f9ef034924..00000000000000
--- a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
+++ /dev/null
@@ -1,75 +0,0 @@
-<?php
-/**
- * API to interact with global settings & styles.
- *
- * @package gutenberg
- */
-
-/**
- * Function to get the styles resulting of merging core, theme, and user data.
- *
- * @param array $path    Path to the specific style to retrieve. Optional.
- *                       If empty, will return all styles.
- * @param array $context {
- *     Metadata to know where to retrieve the $path from. Optional.
- *
- *     @type string $block_name Which block to retrieve the styles from.
- *                              If empty, it'll return the styles for the global context.
- *     @type string $origin     Which origin to take data from.
- *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
- *                              If empty or unknown, 'all' is used.
- * }
- *
- * @return array The styles to retrieve.
- */
-function gutenberg_get_global_styles( $path = array(), $context = array() ) {
-	if ( ! empty( $context['block_name'] ) ) {
-		$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
-	}
-	$origin = 'custom';
-	if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) {
-		$origin = 'theme';
-	}
-	$styles = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_raw_data()['styles'];
-	return _wp_array_get( $styles, $path, $styles );
-}
-
-/**
- * Returns a string containing the SVGs to be referenced as filters (duotone).
- *
- * @return string
- */
-function gutenberg_get_global_styles_svg_filters() {
-	// Return cached value if it can be used and exists.
-	// It's cached by theme to make sure that theme switching clears the cache.
-	$transient_name = 'gutenberg_global_styles_svg_filters_' . get_stylesheet();
-	$can_use_cached = (
-		( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
-		( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
-		( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
-		! is_admin()
-	);
-	if ( $can_use_cached ) {
-		$cached = get_transient( $transient_name );
-		if ( $cached ) {
-			return $cached;
-		}
-	}
-
-	$supports_theme_json = wp_theme_has_theme_json();
-
-	$origins = array( 'default', 'theme', 'custom' );
-	if ( ! $supports_theme_json ) {
-		$origins = array( 'default' );
-	}
-
-	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$svgs = $tree->get_svg_filters( $origins );
-
-	if ( $can_use_cached ) {
-		// Cache for a minute, same as gutenberg_get_global_stylesheet.
-		set_transient( $transient_name, $svgs, MINUTE_IN_SECONDS );
-	}
-
-	return $svgs;
-}
diff --git a/lib/compat/wordpress-6.0/post-lock.php b/lib/compat/wordpress-6.0/post-lock.php
deleted file mode 100644
index e36cdff3e7a221..00000000000000
--- a/lib/compat/wordpress-6.0/post-lock.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<?php
-/**
- * Post Lock data filters.
- *
- * @package gutenberg
- */
-
-/**
- * Update post lock error and add user display nama.
- *
- * @param array $response  The Heartbeat response.
- * @param array $data      The $_POST data sent.
- * @return array The Heartbeat response.
- */
-function gutenberg_refresh_post_lock( $response, $data ) {
-	if ( ! isset( $response['wp-refresh-post-lock']['lock_error'] ) ) {
-		return $response;
-	}
-
-	if ( array_key_exists( 'wp-refresh-post-lock', $data ) ) {
-		$received = $data['wp-refresh-post-lock'];
-
-		$post_id = absint( $received['post_id'] );
-		if ( ! $post_id ) {
-			return $response;
-		}
-
-		if ( ! current_user_can( 'edit_post', $post_id ) ) {
-			return $response;
-		}
-
-		$user_id = wp_check_post_lock( $post_id );
-		$user    = get_userdata( $user_id );
-		if ( $user ) {
-			$response['wp-refresh-post-lock']['lock_error']['name'] = $user->display_name;
-		}
-	}
-
-	return $response;
-}
-add_filter( 'heartbeat_received', 'gutenberg_refresh_post_lock', 20, 2 );
-
-/**
- * Updates post editor settings and adds avatar to the `postLock` user details.
- *
- * @param array                   $settings             Default editor settings.
- * @param WP_Block_Editor_Context $block_editor_context The current block editor context.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_update_post_lock_details( $settings, $block_editor_context ) {
-	if ( empty( $block_editor_context->post ) ) {
-		return $settings;
-	}
-
-	if ( ! isset( $settings['postLock']['user'] ) ) {
-		return $settings;
-	}
-
-	$user_id = wp_check_post_lock( $block_editor_context->post->ID );
-	if ( $user_id ) {
-		$settings['postLock']['user']['avatar'] = get_avatar_url( $user_id, array( 'size' => 128 ) );
-	}
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_update_post_lock_details', 10, 2 );
diff --git a/lib/compat/wordpress-6.0/render-svg-filters.php b/lib/compat/wordpress-6.0/render-svg-filters.php
deleted file mode 100644
index f13502b867fe95..00000000000000
--- a/lib/compat/wordpress-6.0/render-svg-filters.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-/**
- * Renders the SVG filters for duotone.
- *
- * @package gutenberg
- */
-
-/**
- * Render the SVG filters supplied by theme.json.
- *
- * Note that this doesn't render the per-block user-defined
- * filters which are handled by wp_render_duotone_support,
- * but it should be rendered before the filtered content
- * in the body to satisfy Safari's rendering quirks.
- */
-function gutenberg_global_styles_render_svg_filters() {
-	/*
-	 * When calling via the in_admin_header action, we only want to render the
-	 * SVGs on block editor pages.
-	 */
-	if (
-		is_admin() &&
-		! get_current_screen()->is_block_editor()
-	) {
-		return;
-	}
-
-	$filters = gutenberg_get_global_styles_svg_filters();
-	if ( ! empty( $filters ) ) {
-		echo $filters;
-	}
-}
-
-// Override actions introduced in 5.9.1 if they exist.
-remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
-remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
-add_action( 'wp_body_open', 'gutenberg_global_styles_render_svg_filters' );
-add_action( 'in_admin_header', 'gutenberg_global_styles_render_svg_filters' );
diff --git a/lib/compat/wordpress-6.0/rest-api.php b/lib/compat/wordpress-6.0/rest-api.php
deleted file mode 100644
index 0fa1852b18813b..00000000000000
--- a/lib/compat/wordpress-6.0/rest-api.php
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-/**
- * Overrides Core's wp-includes/rest-api.php and registers the new endpoint for WP 6.0.
- *
- * @package gutenberg
- */
-
-/**
- * Registers the Global Styles REST API routes.
- */
-function gutenberg_register_global_styles_endpoints() {
-	$editor_settings = new Gutenberg_REST_Global_Styles_Controller();
-	$editor_settings->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
-
-/**
- * Registers the Edit Site's Export REST API routes.
- *
- * @return void
- */
-function gutenberg_register_edit_site_export_endpoint() {
-	$editor_settings = new Gutenberg_REST_Edit_Site_Export_Controller();
-	$editor_settings->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_endpoint' );
-
-
-/**
- * Register a core site settings.
- *
- * Note: Needs to be backported into the `register_initial_settings` function.
- */
-function gutenberg_register_site_settings() {
-	register_setting(
-		'reading',
-		'show_on_front',
-		array(
-			'show_in_rest' => true,
-			'type'         => 'string',
-			'description'  => __( 'What to show on the front page', 'gutenberg' ),
-		)
-	);
-
-	register_setting(
-		'reading',
-		'page_on_front',
-		array(
-			'show_in_rest' => true,
-			'type'         => 'number',
-			'description'  => __( 'The ID of the page that should be displayed on the front page', 'gutenberg' ),
-		)
-	);
-
-	register_setting(
-		'reading',
-		'page_for_posts',
-		array(
-			'show_in_rest' => true,
-			'type'         => 'number',
-			'description'  => __( 'The ID of the page that should display the latest posts', 'gutenberg' ),
-		)
-	);
-}
-add_action( 'rest_api_init', 'gutenberg_register_site_settings', 10 );
diff --git a/lib/compat/wordpress-6.0/site-editor.php b/lib/compat/wordpress-6.0/site-editor.php
deleted file mode 100644
index 081657d0061fe9..00000000000000
--- a/lib/compat/wordpress-6.0/site-editor.php
+++ /dev/null
@@ -1,95 +0,0 @@
-<?php
-/**
- * Compatibility fixes for WP 5.9 and Site Editor.
- *
- * It can be removed after the minimum required WP version is 6.0
- *
- * @package WordPress
- */
-
-/**
- * Return the correct template for the site's home page.
- *
- * @access private
- * @since 6.0.0
- *
- * @return array|null A template object, or null if none could be found
- */
-function gutenberg_resolve_home_template() {
-	$show_on_front = get_option( 'show_on_front' );
-	$front_page_id = get_option( 'page_on_front' );
-
-	if ( 'page' === $show_on_front && $front_page_id ) {
-		return array(
-			'postType' => 'page',
-			'postId'   => $front_page_id,
-		);
-	}
-
-	$hierarchy = array( 'front-page', 'home', 'index' );
-	$template  = resolve_block_template( 'home', $hierarchy, '' );
-
-	if ( ! $template ) {
-		return null;
-	}
-
-	return array(
-		'postType' => 'wp_template',
-		'postId'   => $template->id,
-	);
-}
-
-/**
- * Do a server-side redirection if missing `postType` and `postId`
- * query args when visiting site editor.
- *
- * Note: This is a backward compatibility redirect for WP 5.9.
- *
- * @return void
- */
-function gutenberg_site_editor_maybe_redirect() {
-	// Skip redirection for WP 6.0 and later.
-	if ( function_exists( '_resolve_home_block_template' ) ) {
-		return;
-	}
-
-	// Check theme support. The action runs before checks in the Site Editor.
-	if ( ! wp_is_block_theme() ) {
-		return;
-	}
-
-	if ( empty( $_GET['postType'] ) && empty( $_GET['postId'] ) ) {
-		$template = gutenberg_resolve_home_template();
-		if ( ! empty( $_GET['styles'] ) ) {
-			$template['styles'] = sanitize_key( $_GET['styles'] );
-		}
-
-		$redirect_url = add_query_arg(
-			$template,
-			admin_url( 'site-editor.php' )
-		);
-		wp_safe_redirect( $redirect_url );
-		exit;
-	}
-}
-add_action( 'load-site-editor.php', 'gutenberg_site_editor_maybe_redirect' );
-
-/**
- * Add home template settings for WP 5.9.
- *
- * @param array                   $settings Existing block editor settings.
- * @param WP_Block_Editor_Context $context The current block editor context.
- * @return array
- */
-function gutenberg_site_editor_homepage_setting( $settings, $context ) {
-	if ( isset( $context->post ) ) {
-		return $settings;
-	}
-
-	if ( ! isset( $settings['__unstableHomeTemplate'] ) ) {
-		$settings['__unstableHomeTemplate'] = gutenberg_resolve_home_template();
-	}
-
-	return $settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_site_editor_homepage_setting', 10, 2 );
diff --git a/lib/compat/wordpress-6.0/theme-i18n.json b/lib/compat/wordpress-6.0/theme-i18n.json
deleted file mode 100644
index 282e520c338b42..00000000000000
--- a/lib/compat/wordpress-6.0/theme-i18n.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-	"title": "Style variation name",
-	"settings": {
-		"typography": {
-			"fontSizes": [
-				{
-					"name": "Font size name"
-				}
-			],
-			"fontFamilies": [
-				{
-					"name": "Font family name"
-				}
-			]
-		},
-		"color": {
-			"palette": [
-				{
-					"name": "Color name"
-				}
-			],
-			"gradients": [
-				{
-					"name": "Gradient name"
-				}
-			],
-			"duotone": [
-				{
-					"name": "Duotone name"
-				}
-			]
-		},
-		"blocks": {
-			"*": {
-				"typography": {
-					"fontSizes": [
-						{
-							"name": "Font size name"
-						}
-					],
-					"fontFamilies": [
-						{
-							"name": "Font family name"
-						}
-					]
-				},
-				"color": {
-					"palette": [
-						{
-							"name": "Color name"
-						}
-					],
-					"gradients": [
-						{
-							"name": "Gradient name"
-						}
-					]
-				}
-			}
-		}
-	},
-	"customTemplates": [
-		{
-			"title": "Custom template name"
-		}
-	],
-	"templateParts": [
-		{
-			"title": "Template part name"
-		}
-	]
-}
diff --git a/lib/compat/wordpress-6.0/theme.json b/lib/compat/wordpress-6.0/theme.json
deleted file mode 100644
index 7691aa4a64e6a9..00000000000000
--- a/lib/compat/wordpress-6.0/theme.json
+++ /dev/null
@@ -1,245 +0,0 @@
-{
-	"version": 2,
-	"settings": {
-		"appearanceTools": false,
-		"border": {
-			"color": false,
-			"radius": false,
-			"style": false,
-			"width": false
-		},
-		"color": {
-			"background": true,
-			"custom": true,
-			"customDuotone": true,
-			"customGradient": true,
-			"defaultDuotone": true,
-			"defaultGradients": true,
-			"defaultPalette": true,
-			"duotone": [
-				{
-					"name": "Dark grayscale",
-					"colors": [ "#000000", "#7f7f7f" ],
-					"slug": "dark-grayscale"
-				},
-				{
-					"name": "Grayscale",
-					"colors": [ "#000000", "#ffffff" ],
-					"slug": "grayscale"
-				},
-				{
-					"name": "Purple and yellow",
-					"colors": [ "#8c00b7", "#fcff41" ],
-					"slug": "purple-yellow"
-				},
-				{
-					"name": "Blue and red",
-					"colors": [ "#000097", "#ff4747" ],
-					"slug": "blue-red"
-				},
-				{
-					"name": "Midnight",
-					"colors": [ "#000000", "#00a5ff" ],
-					"slug": "midnight"
-				},
-				{
-					"name": "Magenta and yellow",
-					"colors": [ "#c7005a", "#fff278" ],
-					"slug": "magenta-yellow"
-				},
-				{
-					"name": "Purple and green",
-					"colors": [ "#a60072", "#67ff66" ],
-					"slug": "purple-green"
-				},
-				{
-					"name": "Blue and orange",
-					"colors": [ "#1900d8", "#ffa96b" ],
-					"slug": "blue-orange"
-				}
-			],
-			"gradients": [
-				{
-					"name": "Vivid cyan blue to vivid purple",
-					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
-					"slug": "vivid-cyan-blue-to-vivid-purple"
-				},
-				{
-					"name": "Light green cyan to vivid green cyan",
-					"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
-					"slug": "light-green-cyan-to-vivid-green-cyan"
-				},
-				{
-					"name": "Luminous vivid amber to luminous vivid orange",
-					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
-					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
-				},
-				{
-					"name": "Luminous vivid orange to vivid red",
-					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
-					"slug": "luminous-vivid-orange-to-vivid-red"
-				},
-				{
-					"name": "Very light gray to cyan bluish gray",
-					"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
-					"slug": "very-light-gray-to-cyan-bluish-gray"
-				},
-				{
-					"name": "Cool to warm spectrum",
-					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
-					"slug": "cool-to-warm-spectrum"
-				},
-				{
-					"name": "Blush light purple",
-					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
-					"slug": "blush-light-purple"
-				},
-				{
-					"name": "Blush bordeaux",
-					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
-					"slug": "blush-bordeaux"
-				},
-				{
-					"name": "Luminous dusk",
-					"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
-					"slug": "luminous-dusk"
-				},
-				{
-					"name": "Pale ocean",
-					"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
-					"slug": "pale-ocean"
-				},
-				{
-					"name": "Electric grass",
-					"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
-					"slug": "electric-grass"
-				},
-				{
-					"name": "Midnight",
-					"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
-					"slug": "midnight"
-				}
-			],
-			"link": false,
-			"palette": [
-				{
-					"name": "Black",
-					"slug": "black",
-					"color": "#000000"
-				},
-				{
-					"name": "Cyan bluish gray",
-					"slug": "cyan-bluish-gray",
-					"color": "#abb8c3"
-				},
-				{
-					"name": "White",
-					"slug": "white",
-					"color": "#ffffff"
-				},
-				{
-					"name": "Pale pink",
-					"slug": "pale-pink",
-					"color": "#f78da7"
-				},
-				{
-					"name": "Vivid red",
-					"slug": "vivid-red",
-					"color": "#cf2e2e"
-				},
-				{
-					"name": "Luminous vivid orange",
-					"slug": "luminous-vivid-orange",
-					"color": "#ff6900"
-				},
-				{
-					"name": "Luminous vivid amber",
-					"slug": "luminous-vivid-amber",
-					"color": "#fcb900"
-				},
-				{
-					"name": "Light green cyan",
-					"slug": "light-green-cyan",
-					"color": "#7bdcb5"
-				},
-				{
-					"name": "Vivid green cyan",
-					"slug": "vivid-green-cyan",
-					"color": "#00d084"
-				},
-				{
-					"name": "Pale cyan blue",
-					"slug": "pale-cyan-blue",
-					"color": "#8ed1fc"
-				},
-				{
-					"name": "Vivid cyan blue",
-					"slug": "vivid-cyan-blue",
-					"color": "#0693e3"
-				},
-				{
-					"name": "Vivid purple",
-					"slug": "vivid-purple",
-					"color": "#9b51e0"
-				}
-			],
-			"text": true
-		},
-		"spacing": {
-			"blockGap": null,
-			"margin": false,
-			"padding": false,
-			"units": [ "px", "em", "rem", "vh", "vw", "%" ]
-		},
-		"typography": {
-			"customFontSize": true,
-			"dropCap": true,
-			"fontSizes": [
-				{
-					"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"
-				}
-			],
-			"fontStyle": true,
-			"fontWeight": true,
-			"letterSpacing": true,
-			"lineHeight": false,
-			"textDecoration": true,
-			"textTransform": true
-		},
-		"blocks": {
-			"core/button": {
-				"border": {
-					"radius": true
-				}
-			},
-			"core/pullquote": {
-				"border": {
-					"color": true,
-					"radius": true,
-					"style": true,
-					"width": true
-				}
-			}
-		}
-	},
-	"styles": {
-		"spacing": { "blockGap": "24px" }
-	}
-}
diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php
deleted file mode 100644
index cafe91e787dc68..00000000000000
--- a/lib/compat/wordpress-6.1/block-editor-settings.php
+++ /dev/null
@@ -1,177 +0,0 @@
-<?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( $settings ) {
-	// Set what is the context for this data request.
-	$context = 'other';
-	if (
-		defined( 'REST_REQUEST' ) &&
-		REST_REQUEST &&
-		isset( $_GET['context'] ) &&
-		'mobile' === $_GET['context']
-	) {
-		$context = 'mobile';
-	}
-
-	if ( 'other' === $context ) {
-		global $wp_version;
-		$is_wp_5_9 = version_compare( $wp_version, '5.9', '>=' ) && version_compare( $wp_version, '6.0-beta1', '<' );
-		$is_wp_6_0 = version_compare( $wp_version, '6.0-beta1', '>=' );
-
-		// Make sure the styles array exists.
-		// In some contexts, like the navigation editor, it doesn't.
-		if ( ! isset( $settings['styles'] ) ) {
-			$settings['styles'] = array();
-		}
-
-		// Remove existing global styles provided by core.
-		$styles_without_existing_global_styles = array();
-		foreach ( $settings['styles'] as $style ) {
-			if (
-				( $is_wp_5_9 && ! gutenberg_is_global_styles_in_5_9( $style ) ) || // Can be removed when plugin minimum version is 6.0.
-				( $is_wp_6_0 && ( ! isset( $style['isGlobalStyles'] ) || ! $style['isGlobalStyles'] ) )
-			) {
-				$styles_without_existing_global_styles[] = $style;
-			}
-		}
-
-		// Recreate global styles.
-		$new_global_styles = array();
-		$presets           = array(
-			array(
-				'css'            => 'variables',
-				'__unstableType' => 'presets',
-				'isGlobalStyles' => true,
-			),
-			array(
-				'css'            => 'presets',
-				'__unstableType' => 'presets',
-				'isGlobalStyles' => true,
-			),
-		);
-		foreach ( $presets as $preset_style ) {
-			$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
-			if ( '' !== $actual_css ) {
-				$preset_style['css'] = $actual_css;
-				$new_global_styles[] = $preset_style;
-			}
-		}
-
-		if ( wp_theme_has_theme_json() ) {
-			$block_classes = array(
-				'css'            => 'styles',
-				'__unstableType' => 'theme',
-				'isGlobalStyles' => true,
-			);
-			$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
-			if ( '' !== $actual_css ) {
-				$block_classes['css'] = $actual_css;
-				$new_global_styles[]  = $block_classes;
-			}
-		} else {
-			// If there is no `theme.json` file, ensure base layout styles are still available.
-			$block_classes = array(
-				'css'            => 'base-layout-styles',
-				'__unstableType' => 'base-layout',
-				'isGlobalStyles' => true,
-			);
-			$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
-			if ( '' !== $actual_css ) {
-				$block_classes['css'] = $actual_css;
-				$new_global_styles[]  = $block_classes;
-			}
-		}
-
-		$settings['styles'] = array_merge( $new_global_styles, $styles_without_existing_global_styles );
-	}
-
-	// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
-	$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
-
-	if ( isset( $settings['__experimentalFeatures']['color']['palette'] ) ) {
-		$colors_by_origin   = $settings['__experimentalFeatures']['color']['palette'];
-		$settings['colors'] = isset( $colors_by_origin['custom'] ) ?
-			$colors_by_origin['custom'] : (
-				isset( $colors_by_origin['theme'] ) ?
-					$colors_by_origin['theme'] :
-					$colors_by_origin['default']
-			);
-	}
-
-	if ( isset( $settings['__experimentalFeatures']['color']['gradients'] ) ) {
-		$gradients_by_origin   = $settings['__experimentalFeatures']['color']['gradients'];
-		$settings['gradients'] = isset( $gradients_by_origin['custom'] ) ?
-			$gradients_by_origin['custom'] : (
-				isset( $gradients_by_origin['theme'] ) ?
-					$gradients_by_origin['theme'] :
-					$gradients_by_origin['default']
-			);
-	}
-
-	if ( isset( $settings['__experimentalFeatures']['typography']['fontSizes'] ) ) {
-		$font_sizes_by_origin  = $settings['__experimentalFeatures']['typography']['fontSizes'];
-		$settings['fontSizes'] = isset( $font_sizes_by_origin['custom'] ) ?
-			$font_sizes_by_origin['custom'] : (
-				isset( $font_sizes_by_origin['theme'] ) ?
-					$font_sizes_by_origin['theme'] :
-					$font_sizes_by_origin['default']
-			);
-	}
-
-	if ( isset( $settings['__experimentalFeatures']['color']['custom'] ) ) {
-		$settings['disableCustomColors'] = ! $settings['__experimentalFeatures']['color']['custom'];
-		unset( $settings['__experimentalFeatures']['color']['custom'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['color']['customGradient'] ) ) {
-		$settings['disableCustomGradients'] = ! $settings['__experimentalFeatures']['color']['customGradient'];
-		unset( $settings['__experimentalFeatures']['color']['customGradient'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['typography']['customFontSize'] ) ) {
-		$settings['disableCustomFontSizes'] = ! $settings['__experimentalFeatures']['typography']['customFontSize'];
-		unset( $settings['__experimentalFeatures']['typography']['customFontSize'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['typography']['lineHeight'] ) ) {
-		$settings['enableCustomLineHeight'] = $settings['__experimentalFeatures']['typography']['lineHeight'];
-		unset( $settings['__experimentalFeatures']['typography']['lineHeight'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['spacing']['units'] ) ) {
-		$settings['enableCustomUnits'] = $settings['__experimentalFeatures']['spacing']['units'];
-		unset( $settings['__experimentalFeatures']['spacing']['units'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['spacing']['padding'] ) ) {
-		$settings['enableCustomSpacing'] = $settings['__experimentalFeatures']['spacing']['padding'];
-		unset( $settings['__experimentalFeatures']['spacing']['padding'] );
-	}
-	if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
-		$settings['disableCustomSpacingSizes'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
-		unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
-	}
-
-	if ( isset( $settings['__experimentalFeatures']['spacing']['spacingSizes'] ) ) {
-		$spacing_sizes_by_origin  = $settings['__experimentalFeatures']['spacing']['spacingSizes'];
-		$settings['spacingSizes'] = isset( $spacing_sizes_by_origin['custom'] ) ?
-			$spacing_sizes_by_origin['custom'] : (
-				isset( $spacing_sizes_by_origin['theme'] ) ?
-					$spacing_sizes_by_origin['theme'] :
-					$spacing_sizes_by_origin['default']
-			);
-	}
-
-	$settings['localAutosaveInterval'] = 15;
-	$settings['disableLayoutStyles']   = current_theme_supports( 'disable-layout-styles' );
-
-	return $settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );
diff --git a/lib/compat/wordpress-6.1/block-patterns.php b/lib/compat/wordpress-6.1/block-patterns.php
deleted file mode 100644
index 7860aa6a1dd661..00000000000000
--- a/lib/compat/wordpress-6.1/block-patterns.php
+++ /dev/null
@@ -1,177 +0,0 @@
-<?php
-/**
- * Block patterns registration from within a theme
- *
- * @package gutenberg
- */
-
-/**
- * Register any patterns that the active theme may provide under its
- * `./patterns/` directory. Each pattern is defined as a PHP file and defines
- * its metadata using plugin-style headers. The minimum required definition is:
- *
- *     /**
- *      * Title: My Pattern
- *      * Slug: my-theme/my-pattern
- *      *
- *
- * The output of the PHP source corresponds to the content of the pattern, e.g.:
- *
- *     <main><p><?php echo "Hello"; ?></p></main>
- *
- * If applicable, this will collect from both parent and child theme.
- *
- * Other settable fields include:
- *
- *   - Description
- *   - Viewport Width
- *   - Categories       (comma-separated values)
- *   - Keywords         (comma-separated values)
- *   - Block Types      (comma-separated values)
- *   - Post Types       (comma-separated values)
- *   - Inserter         (yes/no)
- *
- * @since 6.0.0
- * @access private
- */
-function gutenberg_register_theme_block_patterns() {
-	$default_headers = array(
-		'title'         => 'Title',
-		'slug'          => 'Slug',
-		'description'   => 'Description',
-		'viewportWidth' => 'Viewport Width',
-		'categories'    => 'Categories',
-		'keywords'      => 'Keywords',
-		'blockTypes'    => 'Block Types',
-		'postTypes'     => 'Post Types',
-		'inserter'      => 'Inserter',
-	);
-
-	/*
-	 * Register patterns for the active theme. If the theme is a child theme,
-	 * let it override any patterns from the parent theme that shares the same slug.
-	 */
-	$themes     = array();
-	$stylesheet = get_stylesheet();
-	$template   = get_template();
-	if ( $stylesheet !== $template ) {
-		$themes[] = wp_get_theme( $stylesheet );
-	}
-	$themes[] = wp_get_theme( $template );
-
-	foreach ( $themes as $theme ) {
-		$dirpath = $theme->get_stylesheet_directory() . '/patterns/';
-		if ( ! is_dir( $dirpath ) || ! is_readable( $dirpath ) ) {
-			continue;
-		}
-		if ( file_exists( $dirpath ) ) {
-			$files = glob( $dirpath . '*.php' );
-			if ( $files ) {
-				foreach ( $files as $file ) {
-					$pattern_data = get_file_data( $file, $default_headers );
-
-					if ( empty( $pattern_data['slug'] ) ) {
-						_doing_it_wrong(
-							'_register_theme_block_patterns',
-							sprintf(
-								/* translators: %s: file name. */
-								__( 'Could not register file "%s" as a block pattern ("Slug" field missing)', 'gutenberg' ),
-								$file
-							),
-							'6.0.0'
-						);
-						continue;
-					}
-
-					if ( ! preg_match( '/^[A-z0-9\/_-]+$/', $pattern_data['slug'] ) ) {
-						_doing_it_wrong(
-							'_register_theme_block_patterns',
-							sprintf(
-								/* translators: %1s: file name; %2s: slug value found. */
-								__( 'Could not register file "%1$s" as a block pattern (invalid slug "%2$s")', 'gutenberg' ),
-								$file,
-								$pattern_data['slug']
-							),
-							'6.0.0'
-						);
-					}
-
-					if ( WP_Block_Patterns_Registry::get_instance()->is_registered( $pattern_data['slug'] ) ) {
-						continue;
-					}
-
-					// Title is a required property.
-					if ( ! $pattern_data['title'] ) {
-						_doing_it_wrong(
-							'_register_theme_block_patterns',
-							sprintf(
-								/* translators: %1s: file name; %2s: slug value found. */
-								__( 'Could not register file "%s" as a block pattern ("Title" field missing)', 'gutenberg' ),
-								$file
-							),
-							'6.0.0'
-						);
-						continue;
-					}
-
-					// For properties of type array, parse data as comma-separated.
-					foreach ( array( 'categories', 'keywords', 'blockTypes', 'postTypes' ) as $property ) {
-						if ( ! empty( $pattern_data[ $property ] ) ) {
-							$pattern_data[ $property ] = array_filter(
-								preg_split(
-									'/[\s,]+/',
-									(string) $pattern_data[ $property ]
-								)
-							);
-						} else {
-							unset( $pattern_data[ $property ] );
-						}
-					}
-
-					// Parse properties of type int.
-					foreach ( array( 'viewportWidth' ) as $property ) {
-						if ( ! empty( $pattern_data[ $property ] ) ) {
-							$pattern_data[ $property ] = (int) $pattern_data[ $property ];
-						} else {
-							unset( $pattern_data[ $property ] );
-						}
-					}
-
-					// Parse properties of type bool.
-					foreach ( array( 'inserter' ) as $property ) {
-						if ( ! empty( $pattern_data[ $property ] ) ) {
-							$pattern_data[ $property ] = in_array(
-								strtolower( $pattern_data[ $property ] ),
-								array( 'yes', 'true' ),
-								true
-							);
-						} else {
-							unset( $pattern_data[ $property ] );
-						}
-					}
-
-					// Translate the pattern metadata.
-					$text_domain = $theme->get( 'TextDomain' );
-					//phpcs:ignore WordPress.WP.I18n.NonSingularStringLiteralText, WordPress.WP.I18n.NonSingularStringLiteralContext, WordPress.WP.I18n.NonSingularStringLiteralDomain, WordPress.WP.I18n.LowLevelTranslationFunction
-					$pattern_data['title'] = translate_with_gettext_context( $pattern_data['title'], 'Pattern title', $text_domain );
-					if ( ! empty( $pattern_data['description'] ) ) {
-						//phpcs:ignore WordPress.WP.I18n.NonSingularStringLiteralText, WordPress.WP.I18n.NonSingularStringLiteralContext, WordPress.WP.I18n.NonSingularStringLiteralDomain, WordPress.WP.I18n.LowLevelTranslationFunction
-						$pattern_data['description'] = translate_with_gettext_context( $pattern_data['description'], 'Pattern description', $text_domain );
-					}
-
-					// The actual pattern content is the output of the file.
-					ob_start();
-					include $file;
-					$pattern_data['content'] = ob_get_clean();
-					if ( ! $pattern_data['content'] ) {
-						continue;
-					}
-
-					register_block_pattern( $pattern_data['slug'], $pattern_data );
-				}
-			}
-		}
-	}
-}
-remove_action( 'init', '_register_theme_block_patterns' );
-add_action( 'init', 'gutenberg_register_theme_block_patterns' );
diff --git a/lib/compat/wordpress-6.1/block-template-utils.php b/lib/compat/wordpress-6.1/block-template-utils.php
deleted file mode 100644
index 088333990a0d5f..00000000000000
--- a/lib/compat/wordpress-6.1/block-template-utils.php
+++ /dev/null
@@ -1,625 +0,0 @@
-<?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
- */
-
-/**
- * Updates the list of default template types, containing their
- * localized titles and descriptions.
- *
- * We will only need to update `get_default_block_template_types` function.
- *
- * @param array $default_template_types The default template types.
- *
- * @return array The default template types.
- */
-function gutenberg_get_default_block_template_types( $default_template_types ) {
-	if ( isset( $default_template_types['single'] ) ) {
-		$default_template_types['single'] = array(
-			'title'       => _x( 'Single', 'Template name', 'gutenberg' ),
-			'description' => __( 'The default template for displaying any single post or attachment.', 'gutenberg' ),
-		);
-	}
-	if ( isset( $default_template_types['category'] ) ) {
-		$default_template_types['category'] = array(
-			'title'       => _x( 'Category', 'Template name', 'gutenberg' ),
-			'description' => __( 'Displays latest posts from a single post category.', 'gutenberg' ),
-		);
-	}
-	return $default_template_types;
-}
-add_filter( 'default_template_types', 'gutenberg_get_default_block_template_types', 10 );
-
-
-/**
- * Retrieves a list of unified template objects based on a query.
- *
- * @param array $query {
- *     Optional. Arguments to retrieve templates.
- *
- *     @type array  $slug__in  List of slugs to include.
- *     @type int    $wp_id     Post ID of customized template.
- *     @type string $area      A 'wp_template_part_area' taxonomy value to filter by (for wp_template_part template type only).
- *     @type string $post_type Post type to get the templates for.
- * }
- * @param array $template_type wp_template or wp_template_part.
- *
- * @return array Templates.
- */
-function gutenberg_get_block_templates( $query = array(), $template_type = 'wp_template' ) {
-	/**
-	 * Filters the block templates array before the query takes place.
-	 *
-	 * Return a non-null value to bypass the WordPress queries.
-	 *
-	 * @since 10.8
-	 *
-	 * @param Gutenberg_Block_Template[]|null $block_templates Return an array of block templates to short-circuit the default query,
-	 *                                                  or null to allow WP to run it's normal queries.
-	 * @param array $query {
-	 *     Optional. Arguments to retrieve templates.
-	 *
-	 *     @type array  $slug__in List of slugs to include.
-	 *     @type int    $wp_id Post ID of customized template.
-	 *     @type string $post_type Post type to get the templates for.
-	 * }
-	 * @param array $template_type wp_template or wp_template_part.
-	 */
-	$templates = apply_filters( 'pre_get_block_templates', null, $query, $template_type );
-	if ( ! is_null( $templates ) ) {
-		return $templates;
-	}
-
-	$post_type     = isset( $query['post_type'] ) ? $query['post_type'] : '';
-	$wp_query_args = array(
-		'post_status'    => array( 'auto-draft', 'draft', 'publish' ),
-		'post_type'      => $template_type,
-		'posts_per_page' => -1,
-		'no_found_rows'  => true,
-		'tax_query'      => array(
-			array(
-				'taxonomy' => 'wp_theme',
-				'field'    => 'name',
-				'terms'    => wp_get_theme()->get_stylesheet(),
-			),
-		),
-	);
-
-	if ( 'wp_template_part' === $template_type && isset( $query['area'] ) ) {
-		$wp_query_args['tax_query'][]           = array(
-			'taxonomy' => 'wp_template_part_area',
-			'field'    => 'name',
-			'terms'    => $query['area'],
-		);
-		$wp_query_args['tax_query']['relation'] = 'AND';
-	}
-
-	if ( isset( $query['slug__in'] ) ) {
-		$wp_query_args['post_name__in'] = $query['slug__in'];
-	}
-
-	// This is only needed for the regular templates/template parts CPT listing and editor.
-	if ( isset( $query['wp_id'] ) ) {
-		$wp_query_args['p'] = $query['wp_id'];
-	} else {
-		$wp_query_args['post_status'] = 'publish';
-	}
-
-	$template_query = new WP_Query( $wp_query_args );
-	$query_result   = array();
-	foreach ( $template_query->posts as $post ) {
-		$template = gutenberg_build_block_template_result_from_post( $post );
-		if ( is_wp_error( $template ) ) {
-			continue;
-		}
-
-		if ( $post_type && ! $template->is_custom ) {
-			continue;
-		}
-
-		if ( $post_type &&
-			isset( $template->post_types ) &&
-			! in_array( $post_type, $template->post_types, true )
-		) {
-			continue;
-		}
-
-		$query_result[] = $template;
-	}
-	if ( ! isset( $query['wp_id'] ) ) {
-		$template_files = _get_block_templates_files( $template_type );
-		foreach ( $template_files as $template_file ) {
-			$template = _build_block_template_result_from_file( $template_file, $template_type );
-
-			if ( $post_type && ! $template->is_custom ) {
-				continue;
-			}
-
-			if ( $post_type &&
-				isset( $template->post_types ) &&
-				! in_array( $post_type, $template->post_types, true )
-			) {
-				continue;
-			}
-
-			$is_not_custom   = false === array_search(
-				wp_get_theme()->get_stylesheet() . '//' . $template_file['slug'],
-				array_column( $query_result, 'id' ),
-				true
-			);
-			$fits_slug_query =
-				! isset( $query['slug__in'] ) || in_array( $template_file['slug'], $query['slug__in'], true );
-			$fits_area_query =
-				! isset( $query['area'] ) || $template_file['area'] === $query['area'];
-			$should_include  = $is_not_custom && $fits_slug_query && $fits_area_query;
-			if ( $should_include ) {
-				$query_result[] = $template;
-			}
-		}
-	}
-	/**
-	 * Filters the array of queried block templates array after they've been fetched.
-	 *
-	 * @since 10.8
-	 *
-	 * @param Gutenberg_Block_Template[] $query_result Array of found block templates.
-	 * @param array $query {
-	 *     Optional. Arguments to retrieve templates.
-	 *
-	 *     @type array  $slug__in List of slugs to include.
-	 *     @type int    $wp_id Post ID of customized template.
-	 * }
-	 * @param array $template_type wp_template or wp_template_part.
-	 */
-	return apply_filters( 'get_block_templates', $query_result, $query, $template_type );
-}
-
-/**
- * Retrieves a single unified template object using its id.
- *
- * @param string $id Template unique identifier (example: theme_slug//template_slug).
- * @param array  $template_type wp_template or wp_template_part.
- *
- * @return Gutenberg_Block_Template|null Template.
- */
-function gutenberg_get_block_template( $id, $template_type = 'wp_template' ) {
-	/**
-	 * Filters the block template object before the query takes place.
-	 *
-	 * Return a non-null value to bypass the WordPress queries.
-	 *
-	 * @since 10.8
-	 *
-	 * @param Gutenberg_Block_Template|null $block_template Return block template object to short-circuit the default query,
-	 *                                               or null to allow WP to run it's normal queries.
-	 * @param string $id Template unique identifier (example: theme_slug//template_slug).
-	 * @param array  $template_type wp_template or wp_template_part.
-	 */
-	$block_template = apply_filters( 'pre_get_block_template', null, $id, $template_type );
-	if ( ! is_null( $block_template ) ) {
-		return $block_template;
-	}
-
-	$parts = explode( '//', $id, 2 );
-	if ( count( $parts ) < 2 ) {
-		return null;
-	}
-	list( $theme, $slug ) = $parts;
-	$wp_query_args        = array(
-		'post_name__in'  => array( $slug ),
-		'post_type'      => $template_type,
-		'post_status'    => array( 'auto-draft', 'draft', 'publish', 'trash' ),
-		'posts_per_page' => 1,
-		'no_found_rows'  => true,
-		'tax_query'      => array(
-			array(
-				'taxonomy' => 'wp_theme',
-				'field'    => 'name',
-				'terms'    => $theme,
-			),
-		),
-	);
-	$template_query       = new WP_Query( $wp_query_args );
-	$posts                = $template_query->posts;
-
-	if ( count( $posts ) > 0 ) {
-		$template = gutenberg_build_block_template_result_from_post( $posts[0] );
-
-		if ( ! is_wp_error( $template ) ) {
-			return $template;
-		}
-	}
-
-	$block_template = get_block_file_template( $id, $template_type );
-
-	/**
-	 * Filters the queried block template object after it's been fetched.
-	 *
-	 * @since 10.8
-	 *
-	 * @param Gutenberg_Block_Template|null $block_template The found block template, or null if there isn't one.
-	 * @param string $id Template unique identifier (example: theme_slug//template_slug).
-	 * @param array  $template_type wp_template or wp_template_part.
-	 */
-	return apply_filters( 'get_block_template', $block_template, $id, $template_type );
-}
-
-/**
- * Builds the title and description of a post-specific template based on the underlying referenced post.
- * Mutates the underlying template object.
- *
- * @since 6.1.0
- * @access private
- * @internal
- *
- * @param string            $post_type Post type e.g.: page, post, product.
- * @param string            $slug      Slug of the post e.g.: a-story-about-shoes.
- * @param WP_Block_Template $template  Template to mutate adding the description and title computed.
- * @return boolean Returns true if the referenced post was found and false otherwise.
- */
-function _gutenberg_build_title_and_description_for_single_post_type_block_template( $post_type, $slug, WP_Block_Template $template ) {
-	$post_type_object = get_post_type_object( $post_type );
-
-	$default_args = array(
-		'post_type'              => $post_type,
-		'post_status'            => 'publish',
-		'posts_per_page'         => 1,
-		'update_post_meta_cache' => false,
-		'update_post_term_cache' => false,
-		'ignore_sticky_posts'    => true,
-		'no_found_rows'          => true,
-	);
-
-	$args = array(
-		'name' => $slug,
-	);
-	$args = wp_parse_args( $args, $default_args );
-
-	$posts_query = new WP_Query( $args );
-
-	if ( empty( $posts_query->posts ) ) {
-		$template->title = sprintf(
-			/* translators: Custom template title in the Site Editor referencing a post that was not found. 1: Post type singular name, 2: Post type slug. */
-			__( 'Not found: %1$s (%2$s)', 'gutenberg' ),
-			$post_type_object->labels->singular_name,
-			$slug
-		);
-
-		return false;
-	}
-
-	$post_title = $posts_query->posts[0]->post_title;
-
-	$template->title = sprintf(
-		/* translators: Custom template title in the Site Editor. 1: Post type singular name, 2: Post title. */
-		__( '%1$s: %2$s', 'gutenberg' ),
-		$post_type_object->labels->singular_name,
-		$post_title
-	);
-
-	$template->description = sprintf(
-		/* translators: Custom template description in the Site Editor. %s: Post title. */
-		__( 'Template for %s', 'gutenberg' ),
-		$post_title
-	);
-
-	$args = array(
-		'title' => $post_title,
-	);
-	$args = wp_parse_args( $args, $default_args );
-
-	$posts_with_same_title_query = new WP_Query( $args );
-
-	if ( count( $posts_with_same_title_query->posts ) > 1 ) {
-		$template->title = sprintf(
-			/* translators: Custom template title in the Site Editor. 1: Template title, 2: Post type slug. */
-			__( '%1$s (%2$s)', 'gutenberg' ),
-			$template->title,
-			$slug
-		);
-	}
-
-	return true;
-}
-
-/**
- * Builds the title and description of a taxonomy-specific template based on the underlying entity referenced.
- * Mutates the underlying template object.
- *
- * @access private
- * @internal
- *
- * @param string            $taxonomy Identifier of the taxonomy, e.g.: category.
- * @param string            $slug     Slug of the term, e.g.: shoes.
- * @param WP_Block_Template $template Template to mutate adding the description and title computed.
- *
- * @return boolean True if the term referenced was found and false otherwise.
- */
-function _gutenberg_build_title_and_description_for_taxonomy_block_template( $taxonomy, $slug, WP_Block_Template $template ) {
-	$taxonomy_object = get_taxonomy( $taxonomy );
-
-	$default_args = array(
-		'taxonomy'               => $taxonomy,
-		'hide_empty'             => false,
-		'update_term_meta_cache' => false,
-	);
-
-	$term_query = new WP_Term_Query();
-
-	$args = array(
-		'number' => 1,
-		'slug'   => $slug,
-	);
-	$args = wp_parse_args( $args, $default_args );
-
-	$terms_query = $term_query->query( $args );
-
-	if ( empty( $terms_query ) ) {
-		$template->title = sprintf(
-			/* translators: Custom template title in the Site Editor, referencing a taxonomy term that was not found. 1: Taxonomy singular name, 2: Term slug. */
-			__( 'Not found: %1$s (%2$s)', 'gutenberg' ),
-			$taxonomy_object->labels->singular_name,
-			$slug
-		);
-		return false;
-	}
-
-	$term_title = $terms_query[0]->name;
-
-	$template->title = sprintf(
-		/* translators: Custom template title in the Site Editor. 1: Taxonomy singular name, 2: Term title. */
-		__( '%1$s: %2$s', 'gutenberg' ),
-		$taxonomy_object->labels->singular_name,
-		$term_title
-	);
-
-	$template->description = sprintf(
-		/* translators: Custom template description in the Site Editor. %s: Term title. */
-		__( 'Template for %s', 'gutenberg' ),
-		$term_title
-	);
-
-	$term_query = new WP_Term_Query();
-
-	$args = array(
-		'number' => 2,
-		'name'   => $term_title,
-	);
-	$args = wp_parse_args( $args, $default_args );
-
-	$terms_with_same_title_query = $term_query->query( $args );
-
-	if ( count( $terms_with_same_title_query ) > 1 ) {
-		$template->title = sprintf(
-			/* translators: Custom template title in the Site Editor. 1: Template title, 2: Term slug. */
-			__( '%1$s (%2$s)', 'gutenberg' ),
-			$template->title,
-			$slug
-		);
-	}
-
-	return true;
-}
-
-/**
- * Build a unified template object based a post Object.
- *
- * @param WP_Post $post Template post.
- *
- * @return Gutenberg_Block_Template|WP_Error Template.
- */
-function gutenberg_build_block_template_result_from_post( $post ) {
-	$default_template_types = get_default_block_template_types();
-	$terms                  = get_the_terms( $post, 'wp_theme' );
-
-	if ( is_wp_error( $terms ) ) {
-		return $terms;
-	}
-
-	if ( ! $terms ) {
-		return new WP_Error( 'template_missing_theme', __( 'No theme is defined for this template.', 'gutenberg' ) );
-	}
-
-	$origin           = get_post_meta( $post->ID, 'origin', true );
-	$is_wp_suggestion = get_post_meta( $post->ID, 'is_wp_suggestion', true );
-
-	$theme          = $terms[0]->name;
-	$template_file  = _get_block_template_file( $post->post_type, $post->post_name );
-	$has_theme_file = wp_get_theme()->get_stylesheet() === $theme && null !== $template_file;
-
-	$template                 = new WP_Block_Template();
-	$template->wp_id          = $post->ID;
-	$template->id             = $theme . '//' . $post->post_name;
-	$template->theme          = $theme;
-	$template->content        = $post->post_content;
-	$template->slug           = $post->post_name;
-	$template->source         = 'custom';
-	$template->origin         = ! empty( $origin ) ? $origin : null;
-	$template->type           = $post->post_type;
-	$template->description    = $post->post_excerpt;
-	$template->title          = $post->post_title;
-	$template->status         = $post->post_status;
-	$template->has_theme_file = $has_theme_file;
-	$template->is_custom      = empty( $is_wp_suggestion );
-	$template->author         = $post->post_author;
-
-	// We keep this check for existent templates that are part of the template hierarchy.
-	if ( 'wp_template' === $post->post_type && isset( $default_template_types[ $template->slug ] ) ) {
-		$template->is_custom = false;
-	}
-
-	if ( 'wp_template' === $post->post_type && $has_theme_file && isset( $template_file['postTypes'] ) ) {
-		$template->post_types = $template_file['postTypes'];
-	}
-
-	if ( 'wp_template_part' === $post->post_type ) {
-		$type_terms = get_the_terms( $post, 'wp_template_part_area' );
-		if ( ! is_wp_error( $type_terms ) && false !== $type_terms ) {
-			$template->area = $type_terms[0]->name;
-		}
-	}
-	// If it is a block template without description and without title or with title equal to the slug.
-	if ( 'wp_template' === $post->post_type && empty( $template->description ) && ( empty( $template->title ) || $template->title === $template->slug ) ) {
-		$matches = array();
-		// If it is a block template for a single author, page, post, tag, category, custom post type or custom taxonomy.
-		if ( preg_match( '/(author|page|single|tag|category|taxonomy)-(.+)/', $template->slug, $matches ) ) {
-			$type           = $matches[1];
-			$slug_remaining = $matches[2];
-			switch ( $type ) {
-				case 'author':
-					$nice_name = $slug_remaining;
-					$users     = get_users(
-						array(
-							'capability'     => 'edit_posts',
-							'search'         => $nice_name,
-							'search_columns' => array( 'user_nicename' ),
-							'fields'         => 'display_name',
-						)
-					);
-
-					if ( empty( $users ) ) {
-						$template->title = sprintf(
-							// translators: Represents the title of a user's custom template in the Site Editor referencing a deleted author, where %s is the author's nicename, e.g. "Deleted author: jane-doe".
-							__( 'Deleted author: %s', 'gutenberg' ),
-							$nice_name
-						);
-					} else {
-						$author_name = $users[0];
-
-						$template->title = sprintf(
-							// translators: Represents the title of a user's custom template in the Site Editor, where %s is the author's name, e.g. "Author: Jane Doe".
-							__( 'Author: %s', 'gutenberg' ),
-							$author_name
-						);
-						$template->description = sprintf(
-							// translators: Represents the description of a user's custom template in the Site Editor, e.g. "Template for Author: Jane Doe".
-							__( 'Template for %1$s', 'gutenberg' ),
-							$author_name
-						);
-
-						$users_with_same_name = get_users(
-							array(
-								'capability'     => 'edit_posts',
-								'search'         => $author_name,
-								'search_columns' => array( 'display_name' ),
-								'fields'         => 'display_name',
-							)
-						);
-						if ( count( $users_with_same_name ) > 1 ) {
-							$template->title = sprintf(
-								// translators: Represents the title of a user's custom template in the Site Editor, where %1$s is the template title of an author template and %2$s is the nicename of the author, e.g. "Author: Jane Doe (jane-doe)".
-								__( '%1$s (%2$s)', 'gutenberg' ),
-								$template->title,
-								$nice_name
-							);
-						}
-					}
-					break;
-				case 'page':
-					_gutenberg_build_title_and_description_for_single_post_type_block_template( 'page', $slug_remaining, $template );
-					break;
-				case 'single':
-					$post_types = get_post_types();
-					foreach ( $post_types as $post_type ) {
-						$post_type_length = strlen( $post_type ) + 1;
-						// If $slug_remaining starts with $post_type followed by a hyphen.
-						if ( 0 === strncmp( $slug_remaining, $post_type . '-', $post_type_length ) ) {
-							$slug  = substr( $slug_remaining, $post_type_length, strlen( $slug_remaining ) );
-							$found = _gutenberg_build_title_and_description_for_single_post_type_block_template( $post_type, $slug, $template );
-							if ( $found ) {
-								break;
-							}
-						}
-					}
-					break;
-				case 'tag':
-					_gutenberg_build_title_and_description_for_taxonomy_block_template( 'post_tag', $slug_remaining, $template );
-					break;
-				case 'category':
-					_gutenberg_build_title_and_description_for_taxonomy_block_template( 'category', $slug_remaining, $template );
-					break;
-				case 'taxonomy':
-					$taxonomies = get_taxonomies();
-					foreach ( $taxonomies as $taxonomy ) {
-						$taxonomy_length = strlen( $taxonomy ) + 1;
-						// If $slug_remaining starts with $taxonomy followed by a hyphen.
-						if ( 0 === strncmp( $slug_remaining, $taxonomy . '-', $taxonomy_length ) ) {
-							$slug  = substr( $slug_remaining, $taxonomy_length, strlen( $slug_remaining ) );
-							$found = _gutenberg_build_title_and_description_for_taxonomy_block_template( $taxonomy, $slug, $template );
-							if ( $found ) {
-								break;
-							}
-						}
-					}
-					break;
-			}
-		}
-	}
-	return $template;
-}
-
-if ( ! function_exists( 'get_template_hierarchy' ) ) {
-	/**
-	 * 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 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 ( $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;
-			}
-		}
-		// 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/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php
deleted file mode 100644
index 3aa790dadcb1cf..00000000000000
--- a/lib/compat/wordpress-6.1/blocks.php
+++ /dev/null
@@ -1,350 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Update allowed inline style attributes list.
- *
- * Note: This should be removed when the minimum required WP version is >= 6.1.
- *
- * @param string[] $attrs Array of allowed CSS attributes.
- * @return string[] CSS attributes.
- */
-function gutenberg_safe_style_attrs_6_1( $attrs ) {
-	$attrs[] = 'flex-wrap';
-	$attrs[] = 'gap';
-	$attrs[] = 'margin-block-start';
-	$attrs[] = 'margin-block-end';
-	$attrs[] = 'margin-inline-start';
-	$attrs[] = 'margin-inline-end';
-
-	return $attrs;
-}
-add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_1' );
-
-/**
- * Update allowed CSS values to match WordPress 6.1.
- *
- * Note: This should be removed when the minimum required WP version is >= 6.1.
- *
- * The logic in this function follows that provided in: https://core.trac.wordpress.org/ticket/55966.
- *
- * @param boolean $allow_css       Whether or not the current test string is allowed.
- * @param string  $css_test_string The CSS string to be tested.
- * @return boolean
- */
-function gutenberg_safecss_filter_attr_allow_css_6_1( $allow_css, $css_test_string ) {
-	if ( false === $allow_css ) {
-		/*
-		 * Allow CSS functions like var(), calc(), etc. by removing them from the test string.
-		 * Nested functions and parentheses are also removed, so long as the parentheses are balanced.
-		 */
-		$css_test_string = preg_replace(
-			'/\b(?:var|calc|min|max|minmax|clamp)(\((?:[^()]|(?1))*\))/',
-			'',
-			$css_test_string
-		);
-
-		// Check for any CSS containing \ ( & } = or comments,
-		// except for url(), calc(), or var() usage checked above.
-		$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );
-	}
-	return $allow_css;
-}
-add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_safecss_filter_attr_allow_css_6_1', 10, 2 );
-
-/**
- * Registers view scripts for core blocks if handling is missing in WordPress core.
- *
- * @since 6.1.0
- *
- * @param array $settings Array of determined settings for registering a block type.
- * @param array $metadata Metadata provided for registering a block type.
- *
- * @return array Array of settings for registering a block type.
- */
-function gutenberg_block_type_metadata_view_script( $settings, $metadata ) {
-	if (
-		! isset( $metadata['viewScript'] ) ||
-		! empty( $settings['view_script'] ) ||
-		! isset( $metadata['file'] ) ||
-		! str_starts_with( $metadata['file'], wp_normalize_path( gutenberg_dir_path() ) )
-	) {
-		return $settings;
-	}
-
-	$view_script_path = wp_normalize_path( realpath( dirname( $metadata['file'] ) . '/' . remove_block_asset_path_prefix( $metadata['viewScript'] ) ) );
-
-	if ( file_exists( $view_script_path ) ) {
-		$view_script_id     = str_replace( array( '.min.js', '.js' ), '', basename( remove_block_asset_path_prefix( $metadata['viewScript'] ) ) );
-		$view_script_handle = str_replace( 'core/', 'wp-block-', $metadata['name'] ) . '-' . $view_script_id;
-		wp_deregister_script( $view_script_handle );
-
-		// Replace suffix and extension with `.asset.php` to find the generated dependencies file.
-		$view_asset_file          = substr( $view_script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
-		$view_asset               = file_exists( $view_asset_file ) ? require $view_asset_file : null;
-		$view_script_dependencies = isset( $view_asset['dependencies'] ) ? $view_asset['dependencies'] : array();
-		$view_script_version      = isset( $view_asset['version'] ) ? $view_asset['version'] : false;
-		$result                   = wp_register_script(
-			$view_script_handle,
-			gutenberg_url( str_replace( wp_normalize_path( gutenberg_dir_path() ), '', $view_script_path ) ),
-			$view_script_dependencies,
-			$view_script_version
-		);
-		if ( $result ) {
-			$settings['view_script'] = $view_script_handle;
-
-			if ( ! empty( $metadata['textdomain'] ) && in_array( 'wp-i18n', $view_script_dependencies, true ) ) {
-				wp_set_script_translations( $view_script_handle, $metadata['textdomain'] );
-			}
-		}
-	}
-	return $settings;
-}
-add_filter( 'block_type_metadata_settings', 'gutenberg_block_type_metadata_view_script', 10, 2 );
-
-/**
- * Allow multiple view scripts per block.
- *
- * Filters the metadata provided for registering a block type.
- *
- * @since 6.1.0
- *
- * @param array $metadata Metadata for registering a block type.
- *
- * @return array
- */
-function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) {
-
-	// Early return if viewScript is empty, or not an array.
-	if ( ! isset( $metadata['viewScript'] ) || ! is_array( $metadata['viewScript'] ) ) {
-		return $metadata;
-	}
-
-	// Register all viewScript items.
-	foreach ( $metadata['viewScript'] as $view_script ) {
-		$item_metadata               = $metadata;
-		$item_metadata['viewScript'] = $view_script;
-		gutenberg_block_type_metadata_view_script( array(), $item_metadata );
-	}
-
-	// Proceed with the default behavior.
-	$metadata['viewScript'] = $metadata['viewScript'][0];
-	return $metadata;
-}
-add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' );
-
-/**
- * Helper function that constructs a WP_Query args array from
- * a `Query` block properties.
- *
- * It's used in QueryLoop, QueryPaginationNumbers and QueryPaginationNext blocks.
- *
- * `build_query_vars_from_query_block` was introduced in 5.8, for 6.1 we just need
- * to update that function and not create a new one.
- *
- * @param WP_Block $block Block instance.
- * @param int      $page  Current query's page.
- *
- * @return array Returns the constructed WP_Query arguments.
- */
-function gutenberg_build_query_vars_from_query_block( $block, $page ) {
-	$query = array(
-		'post_type'    => 'post',
-		'order'        => 'DESC',
-		'orderby'      => 'date',
-		'post__not_in' => array(),
-	);
-
-	if ( isset( $block->context['query'] ) ) {
-		if ( ! empty( $block->context['query']['postType'] ) ) {
-			$post_type_param = $block->context['query']['postType'];
-			if ( is_post_type_viewable( $post_type_param ) ) {
-				$query['post_type'] = $post_type_param;
-			}
-		}
-		if ( isset( $block->context['query']['sticky'] ) && ! empty( $block->context['query']['sticky'] ) ) {
-			$sticky = get_option( 'sticky_posts' );
-			if ( 'only' === $block->context['query']['sticky'] ) {
-				/**
-				 * Passing an empty array to post__in will return have_posts() as true (and all posts will be returned).
-				 * Logic should be used before hand to determine if WP_Query should be used in the event that the array
-				 * being passed to post__in is empty.
-				 *
-				 * @see https://core.trac.wordpress.org/ticket/28099
-				 */
-				$query['post__in']            = ! empty( $sticky ) ? $sticky : array( 0 );
-				$query['ignore_sticky_posts'] = 1;
-			} else {
-				$query['post__not_in'] = array_merge( $query['post__not_in'], $sticky );
-			}
-		}
-		if ( ! empty( $block->context['query']['exclude'] ) ) {
-			$excluded_post_ids     = array_map( 'intval', $block->context['query']['exclude'] );
-			$excluded_post_ids     = array_filter( $excluded_post_ids );
-			$query['post__not_in'] = array_merge( $query['post__not_in'], $excluded_post_ids );
-		}
-		if (
-			isset( $block->context['query']['perPage'] ) &&
-			is_numeric( $block->context['query']['perPage'] )
-		) {
-			$per_page = absint( $block->context['query']['perPage'] );
-			$offset   = 0;
-
-			if (
-				isset( $block->context['query']['offset'] ) &&
-				is_numeric( $block->context['query']['offset'] )
-			) {
-				$offset = absint( $block->context['query']['offset'] );
-			}
-
-			$query['offset']         = ( $per_page * ( $page - 1 ) ) + $offset;
-			$query['posts_per_page'] = $per_page;
-		}
-
-		// We need to migrate `categoryIds` and `tagIds` to `tax_query` for backwards compatibility.
-		if ( ! empty( $block->context['query']['categoryIds'] ) || ! empty( $block->context['query']['tagIds'] ) ) {
-			$tax_query = array();
-			if ( ! empty( $block->context['query']['categoryIds'] ) ) {
-				$tax_query[] = array(
-					'taxonomy'         => 'category',
-					'terms'            => array_filter( array_map( 'intval', $block->context['query']['categoryIds'] ) ),
-					'include_children' => false,
-				);
-			}
-			if ( ! empty( $block->context['query']['tagIds'] ) ) {
-				$tax_query[] = array(
-					'taxonomy'         => 'post_tag',
-					'terms'            => array_filter( array_map( 'intval', $block->context['query']['tagIds'] ) ),
-					'include_children' => false,
-				);
-			}
-			$query['tax_query'] = $tax_query;
-		}
-		if ( ! empty( $block->context['query']['taxQuery'] ) ) {
-			$query['tax_query'] = array();
-			foreach ( $block->context['query']['taxQuery'] as $taxonomy => $terms ) {
-				if ( is_taxonomy_viewable( $taxonomy ) && ! empty( $terms ) ) {
-					$query['tax_query'][] = array(
-						'taxonomy'         => $taxonomy,
-						'terms'            => array_filter( array_map( 'intval', $terms ) ),
-						'include_children' => false,
-					);
-				}
-			}
-		}
-		if (
-			isset( $block->context['query']['order'] ) &&
-				in_array( strtoupper( $block->context['query']['order'] ), array( 'ASC', 'DESC' ), true )
-		) {
-			$query['order'] = strtoupper( $block->context['query']['order'] );
-		}
-		if ( isset( $block->context['query']['orderBy'] ) ) {
-			$query['orderby'] = $block->context['query']['orderBy'];
-		}
-		if ( ! empty( $block->context['query']['author'] ) ) {
-			$query['author'] = $block->context['query']['author'];
-		}
-		if ( ! empty( $block->context['query']['search'] ) ) {
-			$query['s'] = $block->context['query']['search'];
-		}
-		if ( ! empty( $block->context['query']['parents'] ) && is_post_type_hierarchical( $query['post_type'] ) ) {
-			$query['post_parent__in'] = array_filter( array_map( 'intval', $block->context['query']['parents'] ) );
-		}
-	}
-
-	/**
-	 * Filters the arguments which will be passed to `WP_Query` for the Query Loop Block.
-	 *
-	 * Anything to this filter should be compatible with the `WP_Query` API to form
-	 * the query context which will be passed down to the Query Loop Block's children.
-	 * This can help, for example, to include additional settings or meta queries not
-	 * directly supported by the core Query Loop Block, and extend its capabilities.
-	 *
-	 * Please note that this will only influence the query that will be rendered on the
-	 * front-end. The editor preview is not affected by this filter. Also, worth noting
-	 * that the editor preview uses the REST API, so, ideally, one should aim to provide
-	 * attributes which are also compatible with the REST API, in order to be able to
-	 * implement identical queries on both sides.
-	 *
-	 * @since 6.1.0
-	 *
-	 * @param array    $query Array containing parameters for `WP_Query` as parsed by the block context.
-	 * @param WP_Block $block Block instance.
-	 * @param int      $page  Current query's page.
-	 */
-	return apply_filters( 'query_loop_block_query_vars', $query, $block, $page );
-}
-
-/**
- * Register render template for core blocks if handling is missing in WordPress core.
- *
- * @since 6.1.0
- *
- * @param array $settings Array of determined settings for registering a block type.
- * @param array $metadata Metadata provided for registering a block type.
- *
- * @return array Array of settings for registering a block type.
- */
-function gutenberg_block_type_metadata_render_template( $settings, $metadata ) {
-	if ( empty( $metadata['render'] ) || isset( $settings['render_callback'] ) ) {
-		return $settings;
-	}
-
-	$template_path = wp_normalize_path(
-		realpath(
-			dirname( $metadata['file'] ) . '/' .
-			remove_block_asset_path_prefix( $metadata['render'] )
-		)
-	);
-
-	// Bail if the file does not exist.
-	if ( ! file_exists( $template_path ) ) {
-		return $settings;
-	}
-	/**
-	 * Renders the block on the server.
-	 *
-	 * @param array    $attributes Block attributes.
-	 * @param string   $content    Block default content.
-	 * @param WP_Block $block      Block instance.
-	 *
-	 * @return string Returns the block content.
-	 */
-	$settings['render_callback'] = function( $attributes, $content, $block ) use ( $template_path ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-		ob_start();
-		require $template_path;
-		return ob_get_clean();
-	};
-
-	return $settings;
-}
-add_filter( 'block_type_metadata_settings', 'gutenberg_block_type_metadata_render_template', 10, 2 );
-
-/**
- * Registers the metadata block attribute for block types.
- *
- * Once 6.1 is the minimum supported WordPress version for the Gutenberg
- * plugin, this shim can be removed
- *
- * @param array $args Array of arguments for registering a block type.
- * @return array $args
- */
-function gutenberg_register_metadata_attribute( $args ) {
-	// Setup attributes if needed.
-	if ( ! isset( $args['attributes'] ) || ! is_array( $args['attributes'] ) ) {
-		$args['attributes'] = array();
-	}
-
-	if ( ! array_key_exists( 'metadata', $args['attributes'] ) ) {
-		$args['attributes']['metadata'] = array(
-			'type' => 'object',
-		);
-	}
-
-	return $args;
-}
-add_filter( 'register_block_type_args', 'gutenberg_register_metadata_attribute' );
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.php
deleted file mode 100644
index c053a678083da8..00000000000000
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-block-patterns-controller.php
+++ /dev/null
@@ -1,224 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Block_Patterns_Controller 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 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 );
-	}
-
-	/**
-	 * 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',
-		);
-		$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
-	 *
-	 * @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' ),
-				),
-				'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 );
-	}
-}
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
deleted file mode 100644
index 879316c1c649e3..00000000000000
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
+++ /dev/null
@@ -1,303 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Templates_Controller class
- *
- * @package    Gutenberg
- * @subpackage REST_API
- */
-
-/**
- * Base Templates REST API Controller.
- */
-class Gutenberg_REST_Templates_Controller extends WP_REST_Templates_Controller {
-
-	/**
-	 * Registers the controllers routes.
-	 *
-	 * @return void
-	 */
-	public function register_routes() {
-		// Get fallback template content.
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base . '/lookup',
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_template_fallback' ),
-					'permission_callback' => array( $this, 'get_item_permissions_check' ),
-					'args'                => array(
-						'slug'            => array(
-							'description' => __( 'The slug of the template to get the fallback for', 'gutenberg' ),
-							'type'        => 'string',
-							'required'    => true,
-						),
-						'is_custom'       => array(
-							'description' => __( 'Indicates if a template is custom or part of the template hierarchy', 'gutenberg' ),
-							'type'        => 'boolean',
-						),
-						'template_prefix' => array(
-							'description' => __( 'The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`', 'gutenberg' ),
-							'type'        => 'string',
-						),
-					),
-				),
-			)
-		);
-		parent::register_routes();
-	}
-
-	/**
-	 * Returns the fallback template for a given slug.
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 *
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_template_fallback( $request ) {
-		$hierarchy         = 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 );
-	}
-
-	/**
-	 * Returns a list of templates.
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 *
-	 * @return WP_REST_Response
-	 */
-	public function get_items( $request ) {
-		$query = array();
-		if ( isset( $request['wp_id'] ) ) {
-			$query['wp_id'] = $request['wp_id'];
-		}
-		if ( isset( $request['area'] ) ) {
-			$query['area'] = $request['area'];
-		}
-		if ( isset( $request['post_type'] ) ) {
-			$query['post_type'] = $request['post_type'];
-		}
-
-		$templates = array();
-		foreach ( gutenberg_get_block_templates( $query, $this->post_type ) as $template ) {
-			$data        = $this->prepare_item_for_response( $template, $request );
-			$templates[] = $this->prepare_response_for_collection( $data );
-		}
-
-		return rest_ensure_response( $templates );
-	}
-
-	/**
-	 * Returns the given template
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 *
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_item( $request ) {
-		if ( isset( $request['source'] ) && 'theme' === $request['source'] ) {
-			$template = get_block_file_template( $request['id'], $this->post_type );
-		} else {
-			$template = gutenberg_get_block_template( $request['id'], $this->post_type );
-		}
-
-		if ( ! $template ) {
-			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.', 'gutenberg' ), array( 'status' => 404 ) );
-		}
-
-		return $this->prepare_item_for_response( $template, $request );
-	}
-
-	/**
-	 * Creates a single template.
-	 *
-	 * @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 create_item( $request ) {
-		$changes = $this->prepare_item_for_database( $request );
-		if ( is_wp_error( $changes ) ) {
-			return $changes;
-		}
-
-		$changes->post_name = $request['slug'];
-		$result             = wp_insert_post( wp_slash( (array) $changes ), true );
-		if ( is_wp_error( $result ) ) {
-			return $result;
-		}
-
-		$posts = gutenberg_get_block_templates( array( 'wp_id' => $result ), $this->post_type );
-		if ( ! count( $posts ) ) {
-			return new WP_Error( 'rest_template_insert_error', __( 'No templates exist with that id.', 'gutenberg' ) );
-		}
-		$id       = $posts[0]->id;
-		$template = gutenberg_get_block_template( $id, $this->post_type );
-
-		$fields_update = $this->update_additional_fields_for_object( $template, $request );
-		if ( is_wp_error( $fields_update ) ) {
-			return $fields_update;
-		}
-
-		return $this->prepare_item_for_response(
-			gutenberg_get_block_template( $id, $this->post_type ),
-			$request
-		);
-	}
-
-	/**
-	 * Updates a single template.
-	 *
-	 * @since 5.8.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 update_item( $request ) {
-		$template = gutenberg_get_block_template( $request['id'], $this->post_type );
-		if ( ! $template ) {
-			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.', 'gutenberg' ), array( 'status' => 404 ) );
-		}
-
-		$post_before = get_post( $template->wp_id );
-
-		if ( isset( $request['source'] ) && 'theme' === $request['source'] ) {
-			wp_delete_post( $template->wp_id, true );
-			$request->set_param( 'context', 'edit' );
-
-			$template = gutenberg_get_block_template( $request['id'], $this->post_type );
-			$response = $this->prepare_item_for_response( $template, $request );
-
-			return rest_ensure_response( $response );
-		}
-
-		$changes = $this->prepare_item_for_database( $request );
-
-		if ( is_wp_error( $changes ) ) {
-			return $changes;
-		}
-
-		if ( 'custom' === $template->source ) {
-			$update = true;
-			$result = wp_update_post( wp_slash( (array) $changes ), false );
-		} else {
-			$update      = false;
-			$post_before = null;
-			$result      = wp_insert_post( wp_slash( (array) $changes ), false );
-		}
-
-		if ( is_wp_error( $result ) ) {
-			if ( 'db_update_error' === $result->get_error_code() ) {
-				$result->add_data( array( 'status' => 500 ) );
-			} else {
-				$result->add_data( array( 'status' => 400 ) );
-			}
-			return $result;
-		}
-
-		$template      = gutenberg_get_block_template( $request['id'], $this->post_type );
-		$fields_update = $this->update_additional_fields_for_object( $template, $request );
-		if ( is_wp_error( $fields_update ) ) {
-			return $fields_update;
-		}
-
-		$request->set_param( 'context', 'edit' );
-
-		$post = get_post( $template->wp_id );
-		/** This action is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */
-		do_action( "rest_after_insert_{$this->post_type}", $post, $request, false );
-
-		wp_after_insert_post( $post, $update, $post_before );
-
-		$response = $this->prepare_item_for_response( $template, $request );
-
-		return rest_ensure_response( $response );
-	}
-
-	/**
-	 * Prepares a single template for create or update.
-	 *
-	 * @param WP_REST_Request $request Request object.
-	 * @return stdClass Changes to pass to wp_update_post.
-	 */
-	protected function prepare_item_for_database( $request ) {
-		$template = $request['id'] ? gutenberg_get_block_template( $request['id'], $this->post_type ) : null;
-		$changes  = new stdClass();
-		if ( null === $template ) {
-			$changes->post_type   = $this->post_type;
-			$changes->post_status = 'publish';
-			$changes->tax_input   = array(
-				'wp_theme' => isset( $request['theme'] ) ? $request['theme'] : wp_get_theme()->get_stylesheet(),
-			);
-		} elseif ( 'custom' !== $template->source ) {
-			$changes->post_name   = $template->slug;
-			$changes->post_type   = $this->post_type;
-			$changes->post_status = 'publish';
-			$changes->tax_input   = array(
-				'wp_theme' => $template->theme,
-			);
-			$changes->meta_input  = array(
-				'origin' => $template->source,
-			);
-		} else {
-			$changes->post_name   = $template->slug;
-			$changes->ID          = $template->wp_id;
-			$changes->post_status = 'publish';
-		}
-		if ( isset( $request['content'] ) ) {
-			$changes->post_content = $request['content'];
-		} elseif ( null !== $template && 'custom' !== $template->source ) {
-			$changes->post_content = $template->content;
-		}
-		if ( isset( $request['title'] ) ) {
-			$changes->post_title = $request['title'];
-		} elseif ( null !== $template && 'custom' !== $template->source ) {
-			$changes->post_title = $template->title;
-		}
-		if ( isset( $request['description'] ) ) {
-			$changes->post_excerpt = $request['description'];
-		} elseif ( null !== $template && 'custom' !== $template->source ) {
-			$changes->post_excerpt = $template->description;
-		}
-
-		if ( 'wp_template' === $this->post_type ) {
-			if ( isset( $request['is_wp_suggestion'] ) ) {
-				$changes->meta_input     = wp_parse_args(
-					array(
-						'is_wp_suggestion' => $request['is_wp_suggestion'],
-					),
-					$changes->meta_input = array()
-				);
-			}
-		}
-		if ( 'wp_template_part' === $this->post_type ) {
-			if ( isset( $request['area'] ) ) {
-				$changes->tax_input['wp_template_part_area'] = _filter_block_template_part_area( $request['area'] );
-			} elseif ( null !== $template && 'custom' !== $template->source && $template->area ) {
-				$changes->tax_input['wp_template_part_area'] = _filter_block_template_part_area( $template->area );
-			} elseif ( ! $template->area ) {
-				$changes->tax_input['wp_template_part_area'] = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
-			}
-		}
-
-		if ( ! empty( $request['author'] ) ) {
-			$post_author = (int) $request['author'];
-
-			if ( get_current_user_id() !== $post_author ) {
-				$user_obj = get_userdata( $post_author );
-
-				if ( ! $user_obj ) {
-					return new WP_Error(
-						'rest_invalid_author',
-						__( 'Invalid author ID.', 'gutenberg' ),
-						array( 'status' => 400 )
-					);
-				}
-			}
-
-			$changes->post_author = $post_author;
-		}
-		return $changes;
-	}
-}
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
deleted file mode 100644
index e965e0e8246775..00000000000000
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ /dev/null
@@ -1,1700 +0,0 @@
-<?php
-/**
- * WP_Theme_JSON_6_1 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_1 extends WP_Theme_JSON_6_0 {
-	/**
-	 * Defines which pseudo selectors are enabled for which elements.
-	 *
-	 * 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.
-	 *
-	 * See https://core.trac.wordpress.org/ticket/56928.
-	 * Note: this will affect both top-level and block-level elements.
-	 *
-	 * @since 6.1.0
-	 */
-	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link'   => array( ':visited', ':hover', ':focus', ':active' ),
-		'button' => array( ':visited', ':hover', ':focus', ':active' ),
-	);
-
-	/**
-	 * The sources of data this object can represent.
-	 *
-	 * @var string[]
-	 */
-	const VALID_ORIGINS = array(
-		'default',
-		'blocks',
-		'theme',
-		'custom',
-	);
-
-	/**
-	 * 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.
-	 */
-	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' ),
-		'outline-color'                     => array( 'outline', 'color' ),
-		'outline-offset'                    => array( 'outline', 'offset' ),
-		'outline-style'                     => array( 'outline', 'style' ),
-		'outline-width'                     => array( 'outline', 'width' ),
-		'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' ),
-	);
-
-	/**
-	 * The valid elements that can be found under styles.
-	 *
-	 * @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',
-		'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',
-	);
-
-	/**
-	 * 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   = 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 ) );
-					}
-				}
-			}
-		}
-	}
-
-	/**
-	 * Given an element name, returns a class name.
-	 *
-	 * @param string $element The name of the element.
-	 *
-	 * @return string The name of the class.
-	 *
-	 * @since 6.1.0
-	 */
-	public static function get_element_class_name( $element ) {
-		return array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ? static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] : '';
-	}
-
-	/**
-	 * 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 ) {
-			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;
-	}
-
-	/**
-	 * The valid properties under the styles key.
-	 *
-	 * @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,
-		),
-		'shadow'     => null,
-		'filter'     => array(
-			'duotone' => null,
-		),
-		'outline'    => array(
-			'color'  => null,
-			'offset' => null,
-			'style'  => null,
-			'width'  => 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,
-		),
-	);
-
-	/**
-	 * Function that appends a sub-selector to a 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
-	 */
-	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': {}
-	 *       }
-	 *     }
-	 *
-	 * @return array Block metadata.
-	 */
-	protected static function get_blocks_metadata() {
-		if ( null !== static::$blocks_metadata ) {
-			return static::$blocks_metadata;
-		}
-
-		static::$blocks_metadata = array();
-
-		$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'] ) &&
-				is_string( $block_type->supports['__experimentalSelector'] )
-			) {
-				static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
-			} else {
-				static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
-			}
-
-			if (
-				isset( $block_type->supports['color']['__experimentalDuotone'] ) &&
-				is_string( $block_type->supports['color']['__experimentalDuotone'] )
-			) {
-				static::$blocks_metadata[ $block_name ]['duotone'] = $block_type->supports['color']['__experimentalDuotone'];
-			}
-
-			// Generate block support feature level selectors if opted into
-			// for the current block.
-			$features = array();
-			foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
-				if (
-					isset( $block_type->supports[ $key ]['__experimentalSelector'] ) &&
-					$block_type->supports[ $key ]['__experimentalSelector']
-				) {
-					$features[ $feature ] = static::scope_selector(
-						static::$blocks_metadata[ $block_name ]['selector'],
-						$block_type->supports[ $key ]['__experimentalSelector']
-					);
-				}
-			}
-
-			if ( ! empty( $features ) ) {
-				static::$blocks_metadata[ $block_name ]['features'] = $features;
-			}
-
-			// Assign defaults, then override 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'] );
-			foreach ( static::ELEMENTS as $el_name => $el_selector ) {
-				$element_selector = array();
-				foreach ( $block_selectors as $selector ) {
-					if ( $selector === $el_selector ) {
-						$element_selector = array( $el_selector );
-						break;
-					}
-					$element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
-				}
-				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:
-	 *
-	 *     [
-	 *       [
-	 *         '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
-	 */
-	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.
-				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 );
-	}
-
-	/**
-	 * A public helper to get the block nodes from a theme.json file.
-	 *
-	 * @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.
-	 *
-	 * @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.
-					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;
-	}
-
-	/**
-	 * 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.
-	 * @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 );
-		}
-
-		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.
-	 *
-	 * @param array $declarations List of declarations.
-	 *
-	 * @return array $declarations List of declarations filtered.
-	 */
-	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'],
-				);
-			}
-		}
-
-		return $declarations;
-	}
-
-	/**
-	 * Gets the CSS rules for a particular block from theme.json.
-	 *
-	 * @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 ] ) ) {
-						$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 ] );
-				}
-			}
-		}
-
-		// 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 );
-		}
-
-		$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;
-			}
-		}
-
-		// 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.
-	 *
-	 * @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'];
-
-		/*
-		* Reset default browser margin on the root body element.
-		* This is set on the root selector **before** generating the ruleset
-		* from the `theme.json`. This is to ensure that if the `theme.json` declares
-		* `margin` in its `spacing` declaration for the `body` element then these
-		* user-generated values take precedence in the CSS cascade.
-		* @link https://github.com/WordPress/gutenberg/issues/36147.
-		*/
-		$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 . ';';
-		}
-
-		$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;
-	}
-
-	/**
-	 * 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;
-	 *   }
-	 *
-	 * @param array $style_nodes Nodes with styles.
-	 * @return string The new stylesheet.
-	 */
-	protected function get_block_classes( $style_nodes ) {
-		$block_rules = '';
-
-		foreach ( $style_nodes as $metadata ) {
-			if ( null === $metadata['selector'] ) {
-				continue;
-			}
-			$block_rules .= static::get_styles_for_block( $metadata );
-		}
-
-		return $block_rules;
-	}
-
-	/**
-	 * 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,
-	 * )
-	 * ```
-	 *
-	 * @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 (
-					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 ) {
-				/*
-				 * 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 ) );
-			}
-
-			$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".
-	 *
-	 * @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.
-	 */
-	protected static function get_property_value( $styles, $path, $theme_json = null ) {
-		$value = _wp_array_get( $styles, $path );
-
-		// 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;
-			}
-
-			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 ( ! $value || 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;
-	}
-
-	/**
-	 * 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 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.
-	 */
-	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' ),
-		),
-	);
-
-	/**
-	 * The valid properties under the settings key.
-	 *
-	 * @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,
-		'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,
-		),
-	);
-
-	/**
-	 * Transform the spacing scale values into an array of spacing scale presets.
-	 */
-	public function set_spacing_sizes() {
-		$spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
-
-		if ( ! is_numeric( $spacing_scale['steps'] )
-			|| ! isset( $spacing_scale['mediumStep'] )
-			|| ! isset( $spacing_scale['unit'] )
-			|| ! isset( $spacing_scale['operator'] )
-			|| ! isset( $spacing_scale['increment'] )
-			|| ! isset( $spacing_scale['steps'] )
-			|| ! is_numeric( $spacing_scale['increment'] )
-			|| ! is_numeric( $spacing_scale['mediumStep'] )
-			|| ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
-			if ( ! empty( $spacing_scale ) ) {
-				trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid', 'gutenberg' ), E_USER_NOTICE );
-			}
-			return null;
-		}
-
-		// If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
-		if ( 0 === $spacing_scale['steps'] ) {
-			return null;
-		}
-
-		$unit            = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
-		$current_step    = $spacing_scale['mediumStep'];
-		$steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
-		$x_small_count   = null;
-		$below_sizes     = array();
-		$slug            = 40;
-		$remainder       = 0;
-
-		for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
-			if ( '+' === $spacing_scale['operator'] ) {
-				$current_step -= $spacing_scale['increment'];
-			} elseif ( $spacing_scale['increment'] > 1 ) {
-				$current_step /= $spacing_scale['increment'];
-			} else {
-				$current_step *= $spacing_scale['increment'];
-			}
-
-			if ( $current_step <= 0 ) {
-				$remainder = $below_midpoint_count;
-				break;
-			}
-
-			$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 ) ),
-				'slug' => (string) $slug,
-				'size' => round( $current_step, 2 ) . $unit,
-			);
-
-			if ( $below_midpoint_count === $steps_mid_point - 2 ) {
-				$x_small_count = 2;
-			}
-
-			if ( $below_midpoint_count < $steps_mid_point - 2 ) {
-				++$x_small_count;
-			}
-
-			$slug -= 10;
-		}
-
-		$below_sizes = array_reverse( $below_sizes );
-
-		$below_sizes[] = array(
-			'name' => __( 'Medium', 'gutenberg' ),
-			'slug' => '50',
-			'size' => $spacing_scale['mediumStep'] . $unit,
-		);
-
-		$current_step  = $spacing_scale['mediumStep'];
-		$x_large_count = null;
-		$above_sizes   = array();
-		$slug          = 60;
-		$steps_above   = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
-
-		for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
-			$current_step = '+' === $spacing_scale['operator']
-				? $current_step + $spacing_scale['increment']
-				: ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
-
-			$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 ) ),
-				'slug' => (string) $slug,
-				'size' => round( $current_step, 2 ) . $unit,
-			);
-
-			if ( 1 === $above_midpoint_count ) {
-				$x_large_count = 2;
-			}
-
-			if ( $above_midpoint_count > 1 ) {
-				++$x_large_count;
-			}
-
-			$slug += 10;
-		}
-
-		$spacing_sizes = array_merge( $below_sizes, $above_sizes );
-
-		// 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 );
-			}
-		}
-
-		_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.1/class-wp-theme-json-data-gutenberg.php b/lib/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php
deleted file mode 100644
index 9add04bb65b097..00000000000000
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-data-gutenberg.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php
-/**
- * API to update a theme.json structure.
- *
- * @package gutenberg
- */
-
-/**
- * Class to update with a theme.json structure.
- */
-class WP_Theme_JSON_Data_Gutenberg {
-
-	/**
-	 * Container of the data to update.
-	 *
-	 * @var WP_Theme_JSON
-	 */
-	private $theme_json = null;
-
-	/**
-	 * The origin of the data: default, theme, user, etc.
-	 *
-	 * @var string
-	 */
-	private $origin = '';
-
-	/**
-	 * Constructor.
-	 *
-	 * @param array  $data   Array following the theme.json specification.
-	 * @param string $origin The origin of the data: default, theme, user.
-	 */
-	public function __construct( $data = array(), $origin = 'theme' ) {
-		$this->origin     = $origin;
-		$this->theme_json = new WP_Theme_JSON_Gutenberg( $data, $this->origin );
-	}
-
-	/**
-	 * Updates the theme.json with the the given data.
-	 *
-	 * @param array $new_data Array following the theme.json specification.
-	 *
-	 * @return WP_Theme_JSON_Data_Gutenberg The own instance with access to the modified data.
-	 */
-	public function update_with( $new_data ) {
-		$this->theme_json->merge( new WP_Theme_JSON_Gutenberg( $new_data, $this->origin ) );
-		return $this;
-	}
-
-	/**
-	 * Returns the underlying data.
-	 *
-	 * @return array
-	 */
-	public function get_data() {
-		return $this->theme_json->get_raw_data();
-	}
-
-}
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 73e012f33d1c7e..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_6_0 {
-
-	/**
-	 * 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.1/date-settings.php b/lib/compat/wordpress-6.1/date-settings.php
deleted file mode 100644
index bdc65ede58cc3e..00000000000000
--- a/lib/compat/wordpress-6.1/date-settings.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-/**
- * Updates to the settings given to @wordpress/date.
- *
- * @package gutenberg
- */
-
-/**
- * Removes the call to wp.date.setSettings() added by Core and adds our own call
- * to wp.date.setSettings().
- *
- * This lets us add a new l10n.dayOfWeek setting.
- *
- * To merge this into Core, simply update the wp.date.setSettings() call in
- * wp_default_packages_inline_scripts.
- *
- * @param WP_Scripts $scripts WP_Scripts object.
- */
-function gutenberg_update_date_settings( $scripts ) {
-	global $wp_locale;
-
-	$inline_scripts = $scripts->get_data( 'wp-date', 'after' );
-	if ( $inline_scripts ) {
-		foreach ( $inline_scripts as $index => $inline_script ) {
-			if ( str_starts_with( $inline_script, 'wp.date.setSettings' ) ) {
-				unset( $scripts->registered['wp-date']->extra['after'][ $index ] );
-			}
-		}
-	}
-
-	// Calculate the timezone abbr (EDT, PST) if possible.
-	$timezone_string = get_option( 'timezone_string', 'UTC' );
-	$timezone_abbr   = '';
-
-	if ( ! empty( $timezone_string ) ) {
-		$timezone_date = new DateTime( 'now', new DateTimeZone( $timezone_string ) );
-		$timezone_abbr = $timezone_date->format( 'T' );
-	}
-
-	$scripts->add_inline_script(
-		'wp-date',
-		sprintf(
-			'wp.date.setSettings( %s );',
-			wp_json_encode(
-				array(
-					'l10n'     => array(
-						'locale'        => get_user_locale(),
-						'months'        => array_values( $wp_locale->month ),
-						'monthsShort'   => array_values( $wp_locale->month_abbrev ),
-						'weekdays'      => array_values( $wp_locale->weekday ),
-						'weekdaysShort' => array_values( $wp_locale->weekday_abbrev ),
-						'meridiem'      => (object) $wp_locale->meridiem,
-						'relative'      => array(
-							/* translators: %s: Duration. */
-							'future' => __( '%s from now', 'gutenberg' ),
-							/* translators: %s: Duration. */
-							'past'   => __( '%s ago', 'gutenberg' ),
-						),
-						'startOfWeek'   => (int) get_option( 'start_of_week', 0 ),
-					),
-					'formats'  => array(
-						/* translators: Time format, see https://www.php.net/manual/datetime.format.php */
-						'time'                => get_option( 'time_format', __( 'g:i a', 'gutenberg' ) ),
-						/* translators: Date format, see https://www.php.net/manual/datetime.format.php */
-						'date'                => get_option( 'date_format', __( 'F j, Y', 'gutenberg' ) ),
-						/* translators: Date/Time format, see https://www.php.net/manual/datetime.format.php */
-						'datetime'            => __( 'F j, Y g:i a', 'gutenberg' ),
-						/* translators: Abbreviated date/time format, see https://www.php.net/manual/datetime.format.php */
-						'datetimeAbbreviated' => __( 'M j, Y g:i a', 'gutenberg' ),
-					),
-					'timezone' => array(
-						'offset' => get_option( 'gmt_offset', 0 ),
-						'string' => $timezone_string,
-						'abbr'   => $timezone_abbr,
-					),
-				)
-			)
-		),
-		'after'
-	);
-}
-add_action( 'wp_default_scripts', 'gutenberg_update_date_settings' );
diff --git a/lib/compat/wordpress-6.1/edit-form-blocks.php b/lib/compat/wordpress-6.1/edit-form-blocks.php
deleted file mode 100644
index fd2414f228b208..00000000000000
--- a/lib/compat/wordpress-6.1/edit-form-blocks.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Patches resources loaded by the block editor page.
- *
- * @package gutenberg
- */
-
-/**
- * Adds the preload paths registered in Core (`edit-form-blocks.php`).
- *
- * @param array                   $preload_paths    Preload paths to be filtered.
- * @param WP_Block_Editor_Context $context The current block editor context.
- * @return array
- */
-function gutenberg_preload_template_permissions( $preload_paths, $context ) {
-	if ( ! empty( $context->post ) ) {
-		$preload_paths[] = array( rest_get_route_for_post_type_items( 'wp_template' ), 'OPTIONS' );
-		$preload_paths[] = array( '/wp/v2/settings', 'OPTIONS' );
-	}
-
-	return $preload_paths;
-}
-add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_preload_template_permissions', 10, 2 );
diff --git a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php b/lib/compat/wordpress-6.1/get-global-styles-and-settings.php
deleted file mode 100644
index fd6113c7405c4a..00000000000000
--- a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-/**
- * API to interact with global settings & styles.
- *
- * @package gutenberg
- */
-
-/**
- * Adds global style rules to the inline style for each block.
- */
-function gutenberg_add_global_styles_for_blocks() {
-	$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$block_nodes = $tree->get_styles_block_nodes();
-	foreach ( $block_nodes as $metadata ) {
-		$block_css = $tree->get_styles_for_block( $metadata );
-
-		if ( ! wp_should_load_separate_core_block_assets() ) {
-			wp_add_inline_style( 'global-styles', $block_css );
-			continue;
-		}
-
-		$stylesheet_handle = 'global-styles';
-		if ( isset( $metadata['name'] ) ) {
-			// These block styles are added on block_render.
-			// This hooks inline CSS to them so that they are loaded conditionally
-			// based on whether or not the block is used on the page.
-			if ( str_starts_with( $metadata['name'], 'core/' ) ) {
-				$block_name        = str_replace( 'core/', '', $metadata['name'] );
-				$stylesheet_handle = 'wp-block-' . $block_name;
-			}
-			wp_add_inline_style( $stylesheet_handle, $block_css );
-		}
-
-		// The likes of block element styles from theme.json do not have  $metadata['name'] set.
-		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
-			$result = array_values(
-				array_filter(
-					$metadata['path'],
-					function ( $item ) {
-						if ( str_contains( $item, 'core/' ) ) {
-							return true;
-						}
-						return false;
-					}
-				)
-			);
-			if ( isset( $result[0] ) ) {
-				if ( str_starts_with( $result[0], 'core/' ) ) {
-					$block_name        = str_replace( 'core/', '', $result[0] );
-					$stylesheet_handle = 'wp-block-' . $block_name;
-				}
-				wp_add_inline_style( $stylesheet_handle, $block_css );
-			}
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.1/persisted-preferences.php b/lib/compat/wordpress-6.1/persisted-preferences.php
deleted file mode 100644
index 2263820e9911b4..00000000000000
--- a/lib/compat/wordpress-6.1/persisted-preferences.php
+++ /dev/null
@@ -1,104 +0,0 @@
-<?php
-/**
- * Server-side requirements for database persisted preferences.
- *
- * @package gutenberg
- */
-
-/**
- * Register the user meta for persisted preferences.
- */
-function gutenberg_register_persisted_preferences_meta() {
-	// Create a meta key that incorporates the blog prefix so that each site
-	// on a multisite can have distinct user preferences.
-	global $wpdb;
-	$meta_key = $wpdb->get_blog_prefix() . 'persisted_preferences';
-
-	register_meta(
-		'user',
-		$meta_key,
-		array(
-			'type'         => 'object',
-			'single'       => true,
-			'show_in_rest' => array(
-				'name'   => 'persisted_preferences',
-				'type'   => 'object',
-				'schema' => array(
-					'type'                 => 'object',
-					'context'              => array( 'edit' ),
-					'properties'           => array(
-						'_modified' => array(
-							'description' => __( 'The date and time the preferences were updated.', 'default' ),
-							'type'        => 'string',
-							'format'      => 'date-time',
-							'readonly'    => false,
-						),
-					),
-					'additionalProperties' => true,
-				),
-			),
-		)
-	);
-}
-
-add_action( 'init', 'gutenberg_register_persisted_preferences_meta' );
-
-/**
- * Configures the preferences package to use user meta persistence.
- */
-function gutenberg_configure_persisted_preferences() {
-	$user_id = get_current_user_id();
-	if ( empty( $user_id ) ) {
-		return;
-	}
-
-	global $wpdb;
-	$meta_key = $wpdb->get_blog_prefix() . 'persisted_preferences';
-
-	$preload_data = get_user_meta( $user_id, $meta_key, true );
-
-	wp_add_inline_script(
-		'wp-preferences',
-		sprintf(
-			'( function() {
-				var serverData = %s;
-				var userId = "%s";
-				var persistenceLayer = wp.preferencesPersistence.__unstableCreatePersistenceLayer( serverData, userId );
-				var preferencesStore = wp.preferences.store;
-				wp.data.dispatch( preferencesStore ).setPersistenceLayer( persistenceLayer );
-			} ) ();',
-			wp_json_encode( $preload_data ),
-			$user_id
-		),
-		'after'
-	);
-}
-
-add_action( 'admin_init', 'gutenberg_configure_persisted_preferences' );
-
-/**
- * Register dependencies for the inline script that configures the persistence layer.
- *
- * Note: When porting this to core update the code here:
- * https://github.com/WordPress/wordpress-develop/blob/d2ab3d183740c3d1252cb921b18005495007e022/src/wp-includes/script-loader.php#L251-L258
- *
- * And make the same update to the gutenberg client assets file here:
- * https://github.com/WordPress/gutenberg/blob/3f3c8df23c70a37b7ac4dddebc82030362133593/lib/client-assets.php#L242-L254
- *
- * The update should be adding a new case like this like this:
- * ```
- * case 'wp-preferences':
- *     array_push( $dependencies, 'wp-preferences-persistence' );
- *     break;
- * ```
- *
- * @param WP_Scripts $scripts An instance of WP_Scripts.
- */
-function gutenberg_update_preferences_persistence_deps( $scripts ) {
-	$persistence_script = $scripts->query( 'wp-preferences', 'registered' );
-	if ( isset( $persistence_script->deps ) ) {
-		array_push( $persistence_script->deps, 'wp-preferences-persistence' );
-	}
-}
-
-add_action( 'wp_default_scripts', 'gutenberg_update_preferences_persistence_deps', 11 );
diff --git a/lib/compat/wordpress-6.1/rest-api.php b/lib/compat/wordpress-6.1/rest-api.php
deleted file mode 100644
index f3391389d9e38a..00000000000000
--- a/lib/compat/wordpress-6.1/rest-api.php
+++ /dev/null
@@ -1,95 +0,0 @@
-<?php
-/**
- * Overrides Core's wp-includes/rest-api.php and registers the new endpoint for WP 6.0.
- *
- * @package gutenberg
- */
-
-/**
- * Update `wp_template` and `wp_template-part` post types to use
- * Gutenberg's REST controller.
- *
- * @param array  $args Array of arguments for registering a post type.
- * @param string $post_type Post type key.
- */
-function gutenberg_update_templates_template_parts_rest_controller( $args, $post_type ) {
-	if ( in_array( $post_type, array( 'wp_template', 'wp_template-part' ), true ) ) {
-		$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller';
-	}
-	return $args;
-}
-add_filter( 'register_post_type_args', 'gutenberg_update_templates_template_parts_rest_controller', 10, 2 );
-
-
-/**
- * Add the post type's `icon`(menu_icon) in the response.
- * When we backport this change we will need to add the
- * `icon` to WP_REST_Post_Types_Controller schema.
- *
- * @param WP_REST_Response $response  The response object.
- * @param WP_Post_Type     $post_type The original post type object.
- */
-function gutenberg_update_post_types_rest_response( $response, $post_type ) {
-	$response->data['icon'] = $post_type->menu_icon;
-	return $response;
-}
-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.
- *
- * This is used for fetching this information when user has no rights
- * to update settings.
- *
- * Note: Backports into wp-includes/rest-api/class-wp-rest-server.php file.
- *
- * @param WP_REST_Response $response REST API response.
- * @return WP_REST_Response $response REST API response.
- */
-function gutenberg_add_site_icon_url_to_index( WP_REST_Response $response ) {
-	$response->data['site_icon_url'] = get_site_icon_url();
-
-	return $response;
-}
-add_action( 'rest_index', 'gutenberg_add_site_icon_url_to_index' );
-
-/**
- * Returns the has_archive post type field.
- *
- * @param array  $type       The response data.
- * @param string $field_name The field name. The function handles field has_archive.
- */
-function gutenberg_get_post_type_has_archive_field( $type, $field_name ) {
-	if ( ! empty( $type ) && ! empty( $type['slug'] ) && 'has_archive' === $field_name ) {
-		$post_type_object = get_post_type_object( $type['slug'] );
-		return $post_type_object->has_archive;
-	}
-}
-
-/**
- * Registers the has_archive post type REST API field.
- */
-function gutenberg_register_has_archive_on_post_types_endpoint() {
-	register_rest_field(
-		'type',
-		'has_archive',
-		array(
-			'get_callback' => 'gutenberg_get_post_type_has_archive_field',
-			'schema'       => array(
-				'description' => __( 'If the value is a string, the value will be used as the archive slug. If the value is false the post type has no archive.', 'gutenberg' ),
-				'type'        => array( 'string', 'boolean' ),
-				'context'     => array( 'view', 'edit' ),
-			),
-		)
-	);
-}
-add_action( 'rest_api_init', 'gutenberg_register_has_archive_on_post_types_endpoint' );
diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php
deleted file mode 100644
index 2bb9edd2a204d9..00000000000000
--- a/lib/compat/wordpress-6.1/script-loader.php
+++ /dev/null
@@ -1,127 +0,0 @@
-<?php
-/**
- * Load global styles assets in the front-end.
- *
- * @package gutenberg
- */
-
-/**
- * This applies a filter to the list of style nodes that comes from `get_style_nodes` in WP_Theme_JSON.
- * This particular filter removes all of the blocks from the array.
- *
- * We want WP_Theme_JSON to be ignorant of the implementation details of how the CSS is being used.
- * This filter allows us to modify the output of WP_Theme_JSON depending on whether or not we are loading separate assets,
- * without making the class aware of that detail.
- *
- * @since 6.1
- *
- * @param array $nodes The nodes to filter.
- * @return array A filtered array of style nodes.
- */
-function gutenberg_filter_out_block_nodes( $nodes ) {
-	return array_filter(
-		$nodes,
-		function( $node ) {
-			return ! in_array( 'blocks', $node['path'], true );
-		},
-		ARRAY_FILTER_USE_BOTH
-	);
-}
-
-/**
- * Enqueues the global styles defined via theme.json.
- * This should replace wp_enqueue_global_styles.
- *
- * @since 5.8.0
- */
-function gutenberg_enqueue_global_styles() {
-	$separate_assets  = wp_should_load_separate_core_block_assets();
-	$is_block_theme   = wp_is_block_theme();
-	$is_classic_theme = ! $is_block_theme;
-
-	/*
-	 * Global styles should be printed in the head when loading all styles combined.
-	 * The footer should only be used to print global styles for classic themes with separate core assets enabled.
-	 *
-	 * See https://core.trac.wordpress.org/ticket/53494.
-	 */
-	if (
-		( $is_block_theme && doing_action( 'wp_footer' ) ) ||
-		( $is_classic_theme && doing_action( 'wp_footer' ) && ! $separate_assets ) ||
-		( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) && $separate_assets )
-	) {
-		return;
-	}
-
-	/**
-	 * If we are loading CSS for each block separately, then we can load the theme.json CSS conditionally.
-	 * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block.
-	 * This filter has to be registered before we call gutenberg_get_global_stylesheet();
-	 */
-	add_filter( 'wp_theme_json_get_style_nodes', 'gutenberg_filter_out_block_nodes', 10, 1 );
-
-	$stylesheet = gutenberg_get_global_stylesheet();
-	if ( empty( $stylesheet ) ) {
-		return;
-	}
-
-	wp_register_style( 'global-styles', false, array(), true, true );
-	wp_add_inline_style( 'global-styles', $stylesheet );
-	wp_enqueue_style( 'global-styles' );
-
-	// add each block as an inline css.
-	gutenberg_add_global_styles_for_blocks();
-}
-
-remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
-remove_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' );
-remove_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' );
-
-// Enqueue global styles, and then block supports styles.
-add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' );
-add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );
-
-/**
- * Loads classic theme styles on classic themes in the frontend.
- *
- * This is needed for backwards compatibility for button blocks specifically.
- */
-function gutenberg_enqueue_classic_theme_styles() {
-	if ( ! wp_is_block_theme() ) {
-		wp_register_style( 'classic-theme-styles', gutenberg_url( 'build/block-library/classic.css' ), array(), true );
-		wp_enqueue_style( 'classic-theme-styles' );
-	}
-}
-add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_classic_theme_styles' );
-
-/**
- * Loads classic theme styles on classic themes in the editor.
- *
- * This is needed for backwards compatibility for button blocks specifically.
- *
- * @since 6.1
- *
- * @param array $editor_settings The array of editor settings.
- * @return array A filtered array of editor settings.
- */
-function gutenberg_add_editor_classic_theme_styles( $editor_settings ) {
-	if ( wp_is_block_theme() ) {
-		return $editor_settings;
-	}
-
-	$classic_theme_styles = gutenberg_dir_path() . '/build/block-library/classic.css';
-
-	// This follows the pattern of get_block_editor_theme_styles,
-	// but we can't use get_block_editor_theme_styles directly as it
-	// only handles external files or theme files.
-	$editor_settings['styles'][] = array(
-		'css'            => file_get_contents( $classic_theme_styles ),
-		'baseURL'        => get_theme_file_uri( $classic_theme_styles ),
-		'__unstableType' => 'theme',
-		'isGlobalStyles' => false,
-	);
-
-	return $editor_settings;
-}
-add_filter( 'block_editor_settings_all', 'gutenberg_add_editor_classic_theme_styles' );
diff --git a/lib/compat/wordpress-6.1/template-parts-screen.php b/lib/compat/wordpress-6.1/template-parts-screen.php
deleted file mode 100644
index c8b5958bedcd4d..00000000000000
--- a/lib/compat/wordpress-6.1/template-parts-screen.php
+++ /dev/null
@@ -1,226 +0,0 @@
-<?php
-/**
- * Bootstrapping the Gutenberg Template Parts screen & integration.
- *
- * This isn't a new file for wp-admin; just override necessary for `site-editor.php`.
- *
- * @package gutenberg
- */
-
-/**
- * Register Template Parts submenu.
- *
- * This should be handled directly in wp-admin/menu.php.
- *
- * @return void
- */
-function gutenberg_template_parts_screen_menu() {
-	// Only add page for Classic theme that support the feature.
-	if ( wp_is_block_theme() ) {
-		return;
-	}
-
-	if ( ! current_theme_supports( 'block-template-parts' ) ) {
-		return;
-	}
-
-	global $submenu;
-	if ( ! isset( $submenu['themes.php'] ) ) {
-		return;
-	}
-
-	$needs_custom_page = true;
-	foreach ( $submenu['themes.php'] as $menu_item ) {
-		if ( str_contains( $menu_item[2], 'site-editor.php?postType=wp_template_part' ) ) {
-			$needs_custom_page = false;
-			break;
-		}
-	}
-
-	// Don't use the custom 'Template Parts' page with WP 6.1 and above.
-	if ( ! $needs_custom_page ) {
-		return;
-	}
-
-	add_theme_page(
-		__( 'Template Parts', 'gutenberg' ),
-		__( 'Template Parts', 'gutenberg' ),
-		'edit_theme_options',
-		'gutenberg-template-parts',
-		'gutenberg_template_parts_screen_render'
-	);
-}
-add_action( 'admin_menu', 'gutenberg_template_parts_screen_menu' );
-
-/**
- * The page permissions and redirections.
- *
- * @return void
- */
-function gutenberg_template_parts_screen_permissions() {
-	if ( ! current_theme_supports( 'block-template-parts' ) ) {
-		wp_die( __( 'The theme you are currently using doesn\'t block-based template parts.', 'gutenberg' ) );
-	}
-
-	/**
-	 * Should be handled directly in /wp-admin/menu.php.
-	 * Path: `site-editor.php?postType=wp_template_part`.
-	 */
-	if ( ! isset( $_GET['postType'] ) ) {
-		$redirect_url = add_query_arg(
-			array( 'postType' => 'wp_template_part' ),
-			admin_url( 'themes.php?page=gutenberg-template-parts' )
-		);
-		wp_safe_redirect( $redirect_url );
-		exit;
-	}
-}
-add_action( 'load-appearance_page_gutenberg-template-parts', 'gutenberg_template_parts_screen_permissions' );
-
-/**
- * Initialize the editor for the screen. Most of this is copied from `site-editor.php`.
- *
- * Note: Parts that need to be ported back should have inline comments.
- *
- * @param string $hook Current page hook.
- * @return void
- */
-function gutenberg_template_parts_screen_init( $hook ) {
-	global $current_screen, $editor_styles;
-
-	if ( 'appearance_page_gutenberg-template-parts' !== $hook ) {
-		return;
-	}
-
-	// Flag that we're loading the block editor.
-	$current_screen->is_block_editor( true );
-
-	// Default to is-fullscreen-mode to avoid jumps in the UI.
-	add_filter(
-		'admin_body_class',
-		static function( $classes ) {
-			return "$classes is-fullscreen-mode";
-		}
-	);
-
-	$indexed_template_types = array();
-	foreach ( get_default_block_template_types() as $slug => $template_type ) {
-		$template_type['slug']    = (string) $slug;
-		$indexed_template_types[] = $template_type;
-	}
-
-	$block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
-	$custom_settings      = array(
-		'siteUrl'                   => site_url(),
-		'postsPerPage'              => get_option( 'posts_per_page' ),
-		'styles'                    => get_block_editor_theme_styles(),
-		'defaultTemplateTypes'      => $indexed_template_types,
-		'defaultTemplatePartAreas'  => get_allowed_block_template_part_areas(),
-		'supportsLayout'            => wp_theme_has_theme_json(),
-		'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
-		'__unstableHomeTemplate'    => gutenberg_resolve_home_template(),
-	);
-
-	/**
-	 * We don't need home template resolution when block template parts are supported.
-	 * Set the value to true to satisfy the editor initialization guard clause.
-	 */
-	if ( $custom_settings['supportsTemplatePartsMode'] ) {
-		$custom_settings['__unstableHomeTemplate'] = true;
-	}
-
-	// Add additional back-compat patterns registered by `current_screen` et al.
-	$custom_settings['__experimentalAdditionalBlockPatterns']          = WP_Block_Patterns_Registry::get_instance()->get_all_registered( true );
-	$custom_settings['__experimentalAdditionalBlockPatternCategories'] = WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered( true );
-
-	$editor_settings = get_block_editor_settings( $custom_settings, $block_editor_context );
-
-	if ( isset( $_GET['postType'] ) && ! isset( $_GET['postId'] ) ) {
-		$post_type = get_post_type_object( $_GET['postType'] );
-		if ( ! $post_type ) {
-			wp_die( __( 'Invalid post type.', 'gutenberg' ) );
-		}
-	}
-
-	$active_global_styles_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
-	$active_theme            = wp_get_theme()->get_stylesheet();
-	$preload_paths           = array(
-		array( '/wp/v2/media', 'OPTIONS' ),
-		'/wp/v2/types?context=view',
-		'/wp/v2/types/wp_template?context=edit',
-		'/wp/v2/types/wp_template-part?context=edit',
-		'/wp/v2/templates?context=edit&per_page=-1',
-		'/wp/v2/template-parts?context=edit&per_page=-1',
-		'/wp/v2/themes?context=edit&status=active',
-		'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
-		'/wp/v2/global-styles/' . $active_global_styles_id,
-		'/wp/v2/global-styles/themes/' . $active_theme,
-	);
-
-	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
-
-	wp_add_inline_script(
-		'wp-edit-site',
-		sprintf(
-			'wp.domReady( function() {
-				wp.editSite.initializeEditor( "site-editor", %s );
-			} );',
-			wp_json_encode( $editor_settings )
-		)
-	);
-
-	// Preload server-registered block schemas.
-	wp_add_inline_script(
-		'wp-blocks',
-		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
-	);
-
-	wp_add_inline_script(
-		'wp-blocks',
-		sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( get_block_categories( $block_editor_context ) ) )
-	);
-
-	wp_enqueue_script( 'wp-edit-site' );
-	wp_enqueue_script( 'wp-format-library' );
-	wp_enqueue_style( 'wp-edit-site' );
-	wp_enqueue_style( 'wp-format-library' );
-	wp_enqueue_media();
-
-	if (
-		current_theme_supports( 'wp-block-styles' ) ||
-		( ! is_array( $editor_styles ) || count( $editor_styles ) === 0 )
-	) {
-		wp_enqueue_style( 'wp-block-library-theme' );
-	}
-
-	/** This action is documented in wp-admin/edit-form-blocks.php */
-	do_action( 'enqueue_block_editor_assets' );
-}
-add_action( 'admin_enqueue_scripts', 'gutenberg_template_parts_screen_init' );
-
-/**
- * The main entry point for the screen.
- *
- * @return void
- */
-function gutenberg_template_parts_screen_render() {
-	echo '<div id="site-editor" class="edit-site"></div>';
-}
-
-/**
- * Register the new theme feature.
- *
- * Migrates into `create_initial_theme_features` method.
- *
- * @return void
- */
-function gutenberg_register_template_parts_theme_feature() {
-	register_theme_feature(
-		'block-template-parts',
-		array(
-			'description'  => __( 'Whether a theme uses block-based template parts.', 'gutenberg' ),
-			'show_in_rest' => true,
-		)
-	);
-}
-add_action( 'setup_theme', 'gutenberg_register_template_parts_theme_feature', 5 );
diff --git a/lib/compat/wordpress-6.1/theme-i18n.json b/lib/compat/wordpress-6.1/theme-i18n.json
deleted file mode 100644
index 469783409c891c..00000000000000
--- a/lib/compat/wordpress-6.1/theme-i18n.json
+++ /dev/null
@@ -1,86 +0,0 @@
-{
-	"title": "Style variation name",
-	"settings": {
-		"typography": {
-			"fontSizes": [
-				{
-					"name": "Font size name"
-				}
-			],
-			"fontFamilies": [
-				{
-					"name": "Font family name"
-				}
-			]
-		},
-		"color": {
-			"palette": [
-				{
-					"name": "Color name"
-				}
-			],
-			"gradients": [
-				{
-					"name": "Gradient name"
-				}
-			],
-			"duotone": [
-				{
-					"name": "Duotone name"
-				}
-			]
-		},
-		"spacing": {
-			"spacingSizes": [
-				{
-					"name": "Space size name"
-				}
-			]
-		},
-		"blocks": {
-			"*": {
-				"typography": {
-					"fontSizes": [
-						{
-							"name": "Font size name"
-						}
-					],
-					"fontFamilies": [
-						{
-							"name": "Font family name"
-						}
-					]
-				},
-				"color": {
-					"palette": [
-						{
-							"name": "Color name"
-						}
-					],
-					"gradients": [
-						{
-							"name": "Gradient name"
-						}
-					]
-				},
-				"spacing": {
-					"spacingSizes": [
-						{
-							"name": "Space size name"
-						}
-					]
-				}
-			}
-		}
-	},
-	"customTemplates": [
-		{
-			"title": "Custom template name"
-		}
-	],
-	"templateParts": [
-		{
-			"title": "Template part name"
-		}
-	]
-}
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
deleted file mode 100644
index 40432cedf38777..00000000000000
--- a/lib/compat/wordpress-6.1/theme.json
+++ /dev/null
@@ -1,426 +0,0 @@
-{
-	"version": 2,
-	"settings": {
-		"appearanceTools": false,
-		"useRootPaddingAwareAlignments": false,
-		"border": {
-			"color": false,
-			"radius": false,
-			"style": false,
-			"width": false
-		},
-		"color": {
-			"background": true,
-			"custom": true,
-			"customDuotone": true,
-			"customGradient": true,
-			"defaultDuotone": true,
-			"defaultGradients": true,
-			"defaultPalette": true,
-			"duotone": [
-				{
-					"name": "Dark grayscale",
-					"colors": [ "#000000", "#7f7f7f" ],
-					"slug": "dark-grayscale"
-				},
-				{
-					"name": "Grayscale",
-					"colors": [ "#000000", "#ffffff" ],
-					"slug": "grayscale"
-				},
-				{
-					"name": "Purple and yellow",
-					"colors": [ "#8c00b7", "#fcff41" ],
-					"slug": "purple-yellow"
-				},
-				{
-					"name": "Blue and red",
-					"colors": [ "#000097", "#ff4747" ],
-					"slug": "blue-red"
-				},
-				{
-					"name": "Midnight",
-					"colors": [ "#000000", "#00a5ff" ],
-					"slug": "midnight"
-				},
-				{
-					"name": "Magenta and yellow",
-					"colors": [ "#c7005a", "#fff278" ],
-					"slug": "magenta-yellow"
-				},
-				{
-					"name": "Purple and green",
-					"colors": [ "#a60072", "#67ff66" ],
-					"slug": "purple-green"
-				},
-				{
-					"name": "Blue and orange",
-					"colors": [ "#1900d8", "#ffa96b" ],
-					"slug": "blue-orange"
-				}
-			],
-			"gradients": [
-				{
-					"name": "Vivid cyan blue to vivid purple",
-					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
-					"slug": "vivid-cyan-blue-to-vivid-purple"
-				},
-				{
-					"name": "Light green cyan to vivid green cyan",
-					"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
-					"slug": "light-green-cyan-to-vivid-green-cyan"
-				},
-				{
-					"name": "Luminous vivid amber to luminous vivid orange",
-					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
-					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
-				},
-				{
-					"name": "Luminous vivid orange to vivid red",
-					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
-					"slug": "luminous-vivid-orange-to-vivid-red"
-				},
-				{
-					"name": "Very light gray to cyan bluish gray",
-					"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
-					"slug": "very-light-gray-to-cyan-bluish-gray"
-				},
-				{
-					"name": "Cool to warm spectrum",
-					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
-					"slug": "cool-to-warm-spectrum"
-				},
-				{
-					"name": "Blush light purple",
-					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
-					"slug": "blush-light-purple"
-				},
-				{
-					"name": "Blush bordeaux",
-					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
-					"slug": "blush-bordeaux"
-				},
-				{
-					"name": "Luminous dusk",
-					"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
-					"slug": "luminous-dusk"
-				},
-				{
-					"name": "Pale ocean",
-					"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
-					"slug": "pale-ocean"
-				},
-				{
-					"name": "Electric grass",
-					"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
-					"slug": "electric-grass"
-				},
-				{
-					"name": "Midnight",
-					"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
-					"slug": "midnight"
-				}
-			],
-			"link": false,
-			"palette": [
-				{
-					"name": "Black",
-					"slug": "black",
-					"color": "#000000"
-				},
-				{
-					"name": "Cyan bluish gray",
-					"slug": "cyan-bluish-gray",
-					"color": "#abb8c3"
-				},
-				{
-					"name": "White",
-					"slug": "white",
-					"color": "#ffffff"
-				},
-				{
-					"name": "Pale pink",
-					"slug": "pale-pink",
-					"color": "#f78da7"
-				},
-				{
-					"name": "Vivid red",
-					"slug": "vivid-red",
-					"color": "#cf2e2e"
-				},
-				{
-					"name": "Luminous vivid orange",
-					"slug": "luminous-vivid-orange",
-					"color": "#ff6900"
-				},
-				{
-					"name": "Luminous vivid amber",
-					"slug": "luminous-vivid-amber",
-					"color": "#fcb900"
-				},
-				{
-					"name": "Light green cyan",
-					"slug": "light-green-cyan",
-					"color": "#7bdcb5"
-				},
-				{
-					"name": "Vivid green cyan",
-					"slug": "vivid-green-cyan",
-					"color": "#00d084"
-				},
-				{
-					"name": "Pale cyan blue",
-					"slug": "pale-cyan-blue",
-					"color": "#8ed1fc"
-				},
-				{
-					"name": "Vivid cyan blue",
-					"slug": "vivid-cyan-blue",
-					"color": "#0693e3"
-				},
-				{
-					"name": "Vivid purple",
-					"slug": "vivid-purple",
-					"color": "#9b51e0"
-				}
-			],
-			"text": true
-		},
-		"layout": {
-			"definitions": {
-				"default": {
-					"name": "default",
-					"slug": "flow",
-					"className": "is-layout-flow",
-					"baseStyles": [
-						{
-							"selector": " > .alignleft",
-							"rules": {
-								"float": "left",
-								"margin-inline-start": "0",
-								"margin-inline-end": "2em"
-							}
-						},
-						{
-							"selector": " > .alignright",
-							"rules": {
-								"float": "right",
-								"margin-inline-start": "2em",
-								"margin-inline-end": "0"
-							}
-						},
-						{
-							"selector": " > .aligncenter",
-							"rules": {
-								"margin-left": "auto !important",
-								"margin-right": "auto !important"
-							}
-						}
-					],
-					"spacingStyles": [
-						{
-							"selector": " > *",
-							"rules": {
-								"margin-block-start": "0",
-								"margin-block-end": "0"
-							}
-						},
-						{
-							"selector": " > * + *",
-							"rules": {
-								"margin-block-start": null,
-								"margin-block-end": "0"
-							}
-						}
-					]
-				},
-				"constrained": {
-					"name": "constrained",
-					"slug": "constrained",
-					"className": "is-layout-constrained",
-					"baseStyles": [
-						{
-							"selector": " > .alignleft",
-							"rules": {
-								"float": "left",
-								"margin-inline-start": "0",
-								"margin-inline-end": "2em"
-							}
-						},
-						{
-							"selector": " > .alignright",
-							"rules": {
-								"float": "right",
-								"margin-inline-start": "2em",
-								"margin-inline-end": "0"
-							}
-						},
-						{
-							"selector": " > .aligncenter",
-							"rules": {
-								"margin-left": "auto !important",
-								"margin-right": "auto !important"
-							}
-						},
-						{
-							"selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))",
-							"rules": {
-								"max-width": "var(--wp--style--global--content-size)",
-								"margin-left": "auto !important",
-								"margin-right": "auto !important"
-							}
-						},
-						{
-							"selector": " > .alignwide",
-							"rules": {
-								"max-width": "var(--wp--style--global--wide-size)"
-							}
-						}
-					],
-					"spacingStyles": [
-						{
-							"selector": " > *",
-							"rules": {
-								"margin-block-start": "0",
-								"margin-block-end": "0"
-							}
-						},
-						{
-							"selector": " > * + *",
-							"rules": {
-								"margin-block-start": null,
-								"margin-block-end": "0"
-							}
-						}
-					]
-				},
-				"flex": {
-					"name": "flex",
-					"slug": "flex",
-					"className": "is-layout-flex",
-					"displayMode": "flex",
-					"baseStyles": [
-						{
-							"selector": "",
-							"rules": {
-								"flex-wrap": "wrap",
-								"align-items": "center"
-							}
-						},
-						{
-							"selector": " > *",
-							"rules": {
-								"margin": "0"
-							}
-						}
-					],
-					"spacingStyles": [
-						{
-							"selector": "",
-							"rules": {
-								"gap": null
-							}
-						}
-					]
-				}
-			}
-		},
-		"spacing": {
-			"blockGap": null,
-			"margin": false,
-			"padding": false,
-			"customSpacingSize": true,
-			"units": [ "px", "em", "rem", "vh", "vw", "%" ],
-			"spacingScale": {
-				"operator": "*",
-				"increment": 1.5,
-				"steps": 7,
-				"mediumStep": 1.5,
-				"unit": "rem"
-			}
-		},
-		"typography": {
-			"customFontSize": true,
-			"dropCap": true,
-			"fontSizes": [
-				{
-					"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"
-				}
-			],
-			"fontStyle": true,
-			"fontWeight": true,
-			"letterSpacing": true,
-			"lineHeight": false,
-			"textDecoration": true,
-			"textTransform": true
-		},
-		"blocks": {
-			"core/button": {
-				"border": {
-					"radius": true
-				}
-			},
-			"core/pullquote": {
-				"border": {
-					"color": true,
-					"radius": true,
-					"style": true,
-					"width": true
-				}
-			}
-		}
-	},
-	"styles": {
-		"elements": {
-			"button": {
-				"color": {
-					"text": "#fff",
-					"background": "#32373c"
-				},
-				"spacing": {
-					"padding": "calc(0.667em + 2px) calc(1.333em + 2px)"
-				},
-				"typography": {
-					"fontSize": "inherit",
-					"fontFamily": "inherit",
-					"lineHeight": "inherit",
-					"textDecoration": "none"
-				},
-				"border": {
-					"width": "0"
-				}
-			},
-			"link": {
-				"typography": {
-					"textDecoration": "underline"
-				}
-			}
-		},
-		"spacing": {
-			"blockGap": "24px",
-			"padding": {
-				"top": "0px",
-				"right": "0px",
-				"bottom": "0px",
-				"left": "0px"
-			}
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.1/theme.php b/lib/compat/wordpress-6.1/theme.php
deleted file mode 100644
index a36e48a14db96b..00000000000000
--- a/lib/compat/wordpress-6.1/theme.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<?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
- */
-
-/**
- * This function runs in addition to the core `create_initial_theme_features`.
- * The 6.1 release needs to update the core function to include the body of this function.
- *
- * Creates the initial theme features when the 'setup_theme' action is fired.
- *
- * See {@see 'setup_theme'}.
- *
- * @since 5.5.0
- * @since 6.0.1 The `block-templates` feature was added.
- * @since 6.1.0 The `disable-layout-styles` feature was added.
- */
-function gutenberg_create_initial_theme_features() {
-	register_theme_feature(
-		'disable-layout-styles',
-		array(
-			'description'  => __( 'Whether the theme disables generated layout styles.', 'gutenberg' ),
-			'show_in_rest' => true,
-		)
-	);
-}
-add_action( 'setup_theme', 'gutenberg_create_initial_theme_features', 0 );
-
-if ( ! function_exists( 'wp_theme_get_element_class_name' ) ) {
-	/**
-	 * Given an element name, returns a class name.
-	 * Alias from WP_Theme_JSON_Gutenberg::get_element_class_name.
-	 *
-	 * @param string $element The name of the element.
-	 *
-	 * @return string The name of the class.
-	 *
-	 * @since 6.1.0
-	 */
-	function wp_theme_get_element_class_name( $element ) {
-		return WP_Theme_JSON_Gutenberg::get_element_class_name( $element );
-	}
-}
diff --git a/lib/compat/wordpress-6.1/wp-theme-get-post-templates.php b/lib/compat/wordpress-6.1/wp-theme-get-post-templates.php
deleted file mode 100644
index e006a2ccca3de4..00000000000000
--- a/lib/compat/wordpress-6.1/wp-theme-get-post-templates.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-/**
- * Support for custom block-based page templates.
- *
- * @package gutenberg
- */
-
-/**
- * Load the page templates in Gutenberg.
- *
- * @param string[] $templates Page templates.
- * @param WP_Theme $theme     WP_Theme instance.
- * @param WP_Post  $post      The post being edited, provided for context, or null.
- * @param string   $post_type Post type to get the templates for.
- * @return array (Maybe) modified page templates array.
- */
-function gutenberg_load_block_page_templates( $templates, $theme, $post, $post_type ) {
-	if ( ! current_theme_supports( 'block-templates' ) ) {
-		return $templates;
-	}
-
-	// `get_post_templates` in core uses `get_block_templates` and since we have updated the
-	// logic in that function, we need to find and remove the templates that were added from
-	// the core function. That is why we need to call both functions to find which templates
-	// we should exclude from passed `$templates`.
-	$gutenberg_block_templates = array_map(
-		function( $template ) {
-			return $template->slug;
-		},
-		gutenberg_get_block_templates( array( 'post_type' => $post_type ), 'wp_template' )
-	);
-	$core_block_templates      = array_map(
-		function( $template ) {
-			return $template->slug;
-		},
-		get_block_templates( array( 'post_type' => $post_type ), 'wp_template' )
-	);
-	$templates_to_exclude      = array_diff( $core_block_templates, $gutenberg_block_templates );
-	foreach ( $templates_to_exclude as $template_slug ) {
-		unset( $templates[ $template_slug ] );
-	}
-	return $templates;
-}
-add_filter( 'theme_templates', 'gutenberg_load_block_page_templates', 10, 4 );
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
deleted file mode 100644
index a28566d441e7a8..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns.php
+++ /dev/null
@@ -1,113 +0,0 @@
-<?php
-/**
- * Overrides Core's wp-includes/block-patterns.php to add category descriptions for WP 6.2.
- *
- * @package gutenberg
- */
-
-/**
- * Registers the block pattern categories REST API routes.
- */
-function gutenberg_register_core_block_patterns_and_categories() {
-	register_block_pattern_category(
-		'banner',
-		array(
-			'label' => _x( 'Banners', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'buttons',
-		array(
-			'label' => _x( 'Buttons', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'columns',
-		array(
-			'label' => _x( 'Columns', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'footer',
-		array(
-			'label' => _x( 'Footers', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'gallery',
-		array(
-			'label' => _x( 'Gallery', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'header',
-		array(
-			'label' => _x( 'Headers', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'text',
-		array(
-			'label' => _x( 'Text', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'query',
-		array(
-			'label'       => _x( 'Posts', 'Block pattern category', 'gutenberg' ),
-			'description' => __( 'Display post summaries in lists, grids, and other layouts.', 'gutenberg' ),
-		)
-	);
-	register_block_pattern_category(
-		'featured',
-		array(
-			'label' => _x( 'Featured', 'Block pattern category', 'gutenberg' ),
-		)
-	);
-}
-add_action( 'init', 'gutenberg_register_core_block_patterns_and_categories' );
-
-/**
- * Registers Gutenberg-bundled patterns, with a focus on headers and footers
- * for site editing.
- *
- * @since 6.2.0
- * @access private
- */
-function gutenberg_register_core_block_patterns() {
-	if ( ! get_theme_support( 'core-block-patterns' ) ) {
-		return;
-	}
-
-	$core_block_patterns = array(
-		'centered-footer',
-		'centered-footer-with-social-links',
-		'centered-header',
-		'centered-logo-in-navigation',
-		'footer-with-background-color-and-three-columns',
-		'footer-with-credit-line-and-navigation',
-		'footer-with-large-font-size',
-		'footer-with-navigation-and-credit-line',
-		'footer-with-search-site-title-and-credit-line',
-		'footer-with-site-title-and-credit-line',
-		'header-with-large-font-size',
-		'left-aligned-footer',
-		'right-aligned-footer',
-		'simple-header',
-		'simple-header-inside-image',
-		'simple-header-with-background-color',
-		'simple-header-with-image',
-		'simple-header-with-tagline',
-		'simple-header-with-tagline-2',
-		'site-title-and-menu-button',
-		'site-title-and-vertical-navigation',
-	);
-
-	foreach ( $core_block_patterns as $core_block_pattern ) {
-		register_block_pattern(
-			'core/' . $core_block_pattern,
-			require __DIR__ . '/block-patterns/' . $core_block_pattern . '.php'
-		);
-	}
-}
-add_action( 'init', 'gutenberg_register_core_block_patterns' );
diff --git a/lib/compat/wordpress-6.2/block-patterns/centered-footer-with-social-links.php b/lib/compat/wordpress-6.2/block-patterns/centered-footer-with-social-links.php
deleted file mode 100644
index ceb7e6b5dccd86..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/centered-footer-with-social-links.php
+++ /dev/null
@@ -1,41 +0,0 @@
-<?php
-/**
- * Footer: Centered footer with social links.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Centered footer with social links', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
-					
-					<!-- wp:site-tagline {"textAlign":"center"} /-->
-					
-					<!-- wp:spacer {"height":"8px"} -->
-					<div style="height:8px" aria-hidden="true" class="wp-block-spacer"></div>
-					<!-- /wp:spacer -->
-					
-					<!-- wp:social-links {"className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"center"}} -->
-					<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->
-					
-					<!-- wp:social-link {"url":"#","service":"twitter"} /--></ul>
-					<!-- /wp:social-links -->
-					
-					<!-- wp:spacer {"height":"8px"} -->
-					<div style="height:8px" aria-hidden="true" class="wp-block-spacer"></div>
-					<!-- /wp:spacer -->
-					
-					<!-- wp:paragraph {"align":"center"} -->
-					<p class="has-text-align-center">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/centered-footer.php b/lib/compat/wordpress-6.2/block-patterns/centered-footer.php
deleted file mode 100644
index a341cdf0442d05..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/centered-footer.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-/**
- * Footer: Centered footer.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Centered footer', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full"} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"center"} -->
-					<p class="has-text-align-center">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/centered-header.php b/lib/compat/wordpress-6.2/block-patterns/centered-header.php
deleted file mode 100644
index a72de34bf5b10d..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/centered-header.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-/**
- * Header: Centered header.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Centered header', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","bottom":"4em"}}}} -->
-					<div class="wp-block-group alignfull" style="padding-top:2em;padding-bottom:4em"><!-- wp:site-logo {"align":"center"} /-->
-					
-					<!-- wp:site-title {"textAlign":"center","fontSize":"large"} /-->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"center"}} /--></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/centered-logo-in-navigation.php b/lib/compat/wordpress-6.2/block-patterns/centered-logo-in-navigation.php
deleted file mode 100644
index 856fca10ffbe64..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/centered-logo-in-navigation.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-/**
- * Header: Centered logo in navigation.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Centered logo in navigation', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2em","bottom":"4em"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
-					<div class="wp-block-group alignfull" style="padding-top:2em;padding-bottom:4em"><!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center"}} --><!-- wp:navigation-link {"label":"' . __( 'Home', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->
-					
-					<!-- wp:navigation-link {"label":"' . __( 'About', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->
-					
-					<!-- wp:site-logo {"width":60} /-->
-					
-					<!-- wp:navigation-link {"label":"' . __( 'Blog', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /-->
-					
-					<!-- wp:navigation-link {"label":"' . __( 'Contact', 'gutenberg' ) . '","url":"#","kind":"custom","isTopLevelLink":true} /--><!-- /wp:navigation -->
-					
-					</div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-background-color-and-three-columns.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-background-color-and-three-columns.php
deleted file mode 100644
index 93cfbb77a68d08..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-background-color-and-three-columns.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php
-/**
- * Footer: Footer with background color and three columns.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with background color and three columns', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:4em;padding-bottom:2em"><!-- wp:columns -->
-					<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
-					<div class="wp-block-column" style="flex-basis:50%"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
-					
-					<!-- wp:site-tagline /--></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:paragraph -->
-					<p><strong>' . __( 'Social Media', 'gutenberg' ) . '</strong></p>
-					<!-- /wp:paragraph -->
-					
-					<!-- wp:paragraph -->
-					<p><a href="#">' . __( 'Facebook', 'gutenberg' ) . '</a><br><a href="#">' . __( 'Instagram', 'gutenberg' ) . '</a><br><a href="#">' . __( 'Twitter', 'gutenberg' ) . '</a></p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:paragraph -->
-					<p><strong>' . _x( 'Where We Are', 'sample content', 'gutenberg' ) . '</strong></p>
-					<!-- /wp:paragraph -->
-					
-					<!-- wp:paragraph -->
-					<p>' . _x( '2020 Lomita Blvd, <br>Torrance, CA 90101<br>United States', 'sample content', 'gutenberg' ) . '</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:column --></div>
-					<!-- /wp:columns -->
-					
-					<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"left"} -->
-					<p class="has-text-align-left">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-credit-line-and-navigation.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-credit-line-and-navigation.php
deleted file mode 100644
index e7ef17af12ec04..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-credit-line-and-navigation.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-/**
- * Footer: Footer with credit line and navigation.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with credit line and navigation', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph -->
-					<p>'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph -->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
-					</div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-large-font-size.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-large-font-size.php
deleted file mode 100644
index 0bd3e0f6f2be6a..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-large-font-size.php
+++ /dev/null
@@ -1,25 +0,0 @@
-<?php
-/**
- * Footer: Footer with Large Font Size.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with Large Font Size', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"15px","padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
-					<div class="wp-block-group alignfull" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;"><!-- wp:site-title {"textAlign":"center","fontSize":"large"} /-->
-					
-					<!-- wp:paragraph {"align":"center"} -->
-					<p class="has-text-align-center">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-navigation-and-credit-line.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-navigation-and-credit-line.php
deleted file mode 100644
index 7b7d83675b0b7e..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-navigation-and-credit-line.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Footer: Footer with navigation and credit line.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with navigation and credit line', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em">
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left"}} /-->
-					<!-- wp:paragraph -->
-					<p>'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-search-site-title-and-credit-line.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-search-site-title-and-credit-line.php
deleted file mode 100644
index fc44d40cdcf0c9..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-search-site-title-and-credit-line.php
+++ /dev/null
@@ -1,47 +0,0 @@
-<?php
-/**
- * Footer: Footer with search, site title, and credit line.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with search, site title, and credit line', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:columns {"align":"wide"} -->
-					<div class="wp-block-columns alignwide"><!-- wp:column {"width":"100%"} -->
-					<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group {"align":"wide"} -->
-					<div class="wp-block-group alignwide"><!-- wp:search {"label":"' . __( 'Search', 'gutenberg' ) . '","showLabel":false,"width":100,"widthUnit":"%","buttonText":"' . __( 'Search', 'gutenberg' ) . '","buttonUseIcon":true} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column {"width":"100%"} -->
-					<div class="wp-block-column" style="flex-basis:100%"></div>
-					<!-- /wp:column --></div>
-					<!-- /wp:columns -->
-					
-					<!-- wp:spacer {"height":"140px"} -->
-					<div style="height:140px" aria-hidden="true" class="wp-block-spacer"></div>
-					<!-- /wp:spacer -->
-					
-					<!-- wp:columns {"align":"wide"} -->
-					<div class="wp-block-columns alignwide"><!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /--></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:paragraph {"align":"right"} -->
-					<p class="has-text-align-right">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:column --></div>
-					<!-- /wp:columns --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/footer-with-site-title-and-credit-line.php b/lib/compat/wordpress-6.2/block-patterns/footer-with-site-title-and-credit-line.php
deleted file mode 100644
index c7d9d8e8736bc1..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/footer-with-site-title-and-credit-line.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Footer: Footer with site title and credit line.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Footer with site title and credit line', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"2em","top":"4em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:4em;padding-bottom:2em"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
-					
-					<!-- wp:paragraph -->
-					<p>'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/header-with-large-font-size.php b/lib/compat/wordpress-6.2/block-patterns/header-with-large-font-size.php
deleted file mode 100644
index 2a34032575f83b..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/header-with-large-font-size.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-/**
- * Header: Header with Large Font Size.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Header with Large Font Size', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignfull" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"large"} /-->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"space-between"},"style":{"spacing":{"blockGap":"30px"}},"fontSize":"large"} /--></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/left-aligned-footer.php b/lib/compat/wordpress-6.2/block-patterns/left-aligned-footer.php
deleted file mode 100644
index adb8ab3974dfa0..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/left-aligned-footer.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Footer: Left-aligned footer.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Left-aligned footer', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"left"} -->
-					<p class="has-text-align-left">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/right-aligned-footer.php b/lib/compat/wordpress-6.2/block-patterns/right-aligned-footer.php
deleted file mode 100644
index 2e7693cc3a2422..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/right-aligned-footer.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Footer: Right-aligned footer.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Right-aligned footer', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/footer' ),
-	'categories' => array( 'footer' ),
-	'content'    => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4em","bottom":"2em"}}},"layout":{"inherit":false}} -->
-					<div class="wp-block-group alignfull" style="padding-top:4em;padding-bottom:2em"><!-- wp:paragraph {"align":"right"} -->
-					<p class="has-text-align-right">'
-					. sprintf(
-						/* translators: %s: WordPress */
-						__( 'Proudly powered by %s', 'gutenberg' ),
-						'<a href="https://wordpress.org">WordPress</a>'
-					) .
-					'</p>
-					<!-- /wp:paragraph --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header-inside-image.php b/lib/compat/wordpress-6.2/block-patterns/simple-header-inside-image.php
deleted file mode 100644
index 7a9edac03dbf00..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header-inside-image.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-/**
- * Header: Simple header inside image.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Simple header inside image', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://s.w.org/patterns/files/2022/08/5eca6-header-mountains-scaled-1.jpg","id":57,"dimRatio":0,"minHeight":680,"contentPosition":"center center","isDark":false,"align":"full"} -->
-					<div class="wp-block-cover alignfull is-light" style="min-height:680px"><span aria-hidden="true" class="has-background-dim-0 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-57" alt="" src="https://s.w.org/patterns/files/2022/08/5eca6-header-mountains-scaled-1.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":null,"isStackedOnMobile":false} -->
-					<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"verticalAlignment":"center"} -->
-					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->
-					
-					<!-- wp:site-title /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column {"verticalAlignment":"center"} -->
-					<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
-					</div>
-					<!-- /wp:column --></div>
-					<!-- /wp:columns -->
-					
-					<!-- wp:spacer {"height":"480px"} -->
-					<div style="height:480px" aria-hidden="true" class="wp-block-spacer"></div>
-					<!-- /wp:spacer --></div></div>
-					<!-- /wp:cover --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-background-color.php b/lib/compat/wordpress-6.2/block-patterns/simple-header-with-background-color.php
deleted file mode 100644
index 2d003ab63d878d..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-background-color.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Header: Simple header with background color.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Simple header with background color', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"1em","top":"1em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:1em;padding-bottom:1em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->
-					
-					<!-- wp:site-title {"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}}} /--></div>
-					<!-- /wp:group -->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-image.php b/lib/compat/wordpress-6.2/block-patterns/simple-header-with-image.php
deleted file mode 100644
index 043cead1552b3d..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-image.php
+++ /dev/null
@@ -1,29 +0,0 @@
-<?php
-/**
- * Header: Simple header with image.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Simple header with image', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"0em","top":"1em","right":"1em","left":"1em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignfull" style="padding-top:1em;padding-right:1em;padding-bottom:0em;padding-left:1em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->
-
-					<!-- wp:site-title /--></div>
-					<!-- /wp:group -->
-
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group -->
-
-					<!-- wp:cover {"url":"https://s.w.org/patterns/files/2022/08/5eca6-header-mountains-scaled-1.jpg","dimRatio":0,"isDark":false,"align":"full"} -->
-					<div class="wp-block-cover alignfull is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://s.w.org/patterns/files/2022/08/5eca6-header-mountains-scaled-1.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"' . __( 'Write title…', 'gutenberg' ) . '","fontSize":"large"} -->
-					<p class="has-text-align-center has-large-font-size"></p>
-					<!-- /wp:paragraph --></div></div>
-					<!-- /wp:cover --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline-2.php b/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline-2.php
deleted file mode 100644
index 8995de8436389d..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline-2.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<?php
-/**
- * Header: Simple header with tagline.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Simple header with tagline', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"4em","top":"2em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:2em;padding-bottom:4em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->
-					
-					<!-- wp:group -->
-					<div class="wp-block-group"><!-- wp:site-title /-->
-					
-					<!-- wp:site-tagline {"style":{"spacing":{"margin":{"top":"0px"}}}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline.php b/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline.php
deleted file mode 100644
index 9047e851127475..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header-with-tagline.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Header: Text-only header with tagline.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Text-only header with tagline', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"4em","top":"2em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:2em;padding-bottom:4em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
-					
-					<!-- wp:site-tagline /--></div>
-					<!-- /wp:group -->
-					
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/simple-header.php b/lib/compat/wordpress-6.2/block-patterns/simple-header.php
deleted file mode 100644
index 2ceeeb3c71865f..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/simple-header.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-/**
- * Header: Simple header.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Simple header', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"layout":{"inherit":true}} -->
-					<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"1em","top":"1em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:1em;padding-bottom:1em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-logo {"width":60} /-->
-
-					<!-- wp:site-title /--></div>
-					<!-- /wp:group -->
-
-					<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/site-title-and-menu-button.php b/lib/compat/wordpress-6.2/block-patterns/site-title-and-menu-button.php
deleted file mode 100644
index d9c44a4e5bb782..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/site-title-and-menu-button.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<?php
-/**
- * Header: Site title and menu button.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Site title and menu button', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"4em","top":"2em"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:2em;padding-bottom:4em"><!-- wp:group {"layout":{"type":"flex"}} -->
-					<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /--></div>
-					<!-- /wp:group -->
-					
-					<!-- wp:navigation {"overlayMenu":"always","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/block-patterns/site-title-and-vertical-navigation.php b/lib/compat/wordpress-6.2/block-patterns/site-title-and-vertical-navigation.php
deleted file mode 100644
index 8b78e96185b361..00000000000000
--- a/lib/compat/wordpress-6.2/block-patterns/site-title-and-vertical-navigation.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-/**
- * Header: Site title and vertical navigation.
- *
- * @package WordPress
- */
-
-return array(
-	'title'      => _x( 'Site title and vertical navigation', 'Block pattern title', 'gutenberg' ),
-	'blockTypes' => array( 'core/template-part/header' ),
-	'categories' => array( 'header' ),
-	'content'    => '<!-- wp:group {"align":"full","layout":{"inherit":true}} -->
-					<div class="wp-block-group alignfull"><!-- wp:columns {"isStackedOnMobile":false,"align":"wide","style":{"spacing":{"padding":{"top":"2em","bottom":"4em"}}}} -->
-					<div class="wp-block-columns alignwide is-not-stacked-on-mobile" style="padding-top:2em;padding-bottom:4em"><!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:group -->
-					<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /--></div>
-					<!-- /wp:group --></div>
-					<!-- /wp:column -->
-					
-					<!-- wp:column -->
-					<div class="wp-block-column"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"0em","top":"0em"}}},"layout":{"type":"flex","justifyContent":"right"}} -->
-					<div class="wp-block-group alignwide" style="padding-top:0em;padding-bottom:0em"><!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"vertical"}} /-->
-					</div>
-					<!-- /wp:group --></div>
-					<!-- /wp:column --></div>
-					<!-- /wp:columns --></div>
-					<!-- /wp:group -->',
-);
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php
deleted file mode 100644
index 970b1c4a1a330d..00000000000000
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Block_Pattern_Categories_Controller class
- *
- * Adds descriptions to the block pattern categories.
- *
- * @package    WordPress
- * @subpackage REST_API
- */
-
-/**
- * Core class used to access block pattern categories via the REST API.
- *
- * @see   WP_REST_Controller
- */
-class Gutenberg_REST_Block_Pattern_Categories_Controller extends WP_REST_Block_Pattern_Categories_Controller {
-	/**
-	 * Prepare a raw block pattern category before it gets output in a REST API response.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param object          $item    Raw category as registered, before any changes.
-	 * @param WP_REST_Request $request Request object.
-	 * @return WP_REST_Response
-	 */
-	public function prepare_item_for_response( $item, $request ) {
-		$fields = $this->get_fields_for_response( $request );
-		$keys   = array( 'name', 'label', 'description' );
-		$data   = array();
-		foreach ( $keys as $key ) {
-			if ( isset( $item[ $key ] ) && rest_is_field_included( $key, $fields ) ) {
-				$data[ $key ] = $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 category schema, conforming to JSON Schema.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return array Item schema data.
-	 */
-	public function get_item_schema() {
-		$schema = array(
-			'$schema'    => 'http://json-schema.org/draft-04/schema#',
-			'title'      => 'block-pattern-category',
-			'type'       => 'object',
-			'properties' => array(
-				'name'        => array(
-					'description' => __( 'The category name.', 'gutenberg' ),
-					'type'        => 'string',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'label'       => array(
-					'description' => __( 'The category label, in human readable format.', 'gutenberg' ),
-					'type'        => 'string',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-				'description' => array(
-					'description' => __( 'The category description, in human readable format.', 'gutenberg' ),
-					'type'        => 'string',
-					'readonly'    => true,
-					'context'     => array( 'view', 'edit', 'embed' ),
-				),
-			),
-		);
-
-		return $this->add_additional_fields_schema( $schema );
-	}
-}
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-pattern-directory-controller-6-2.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-pattern-directory-controller-6-2.php
deleted file mode 100644
index ab845f3c38de15..00000000000000
--- a/lib/compat/wordpress-6.2/class-gutenberg-rest-pattern-directory-controller-6-2.php
+++ /dev/null
@@ -1,238 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Pattern_Directory_Controller_6_2 class
- *
- * @package    Gutenberg
- * @subpackage REST_API
- */
-
-/**
- * Controller which provides REST endpoint for block patterns from wordpress.org/patterns.
- */
-class Gutenberg_REST_Pattern_Directory_Controller_6_2 extends Gutenberg_REST_Pattern_Directory_Controller_6_0 {
-	/**
-	 * Registers the necessary REST API routes.
-	 *
-	 * @since 5.8.0
-	 * @since 6.2.0 Added pattern directory categories endpoint.
-	 */
-	public function register_routes() {
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base . '/categories',
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_pattern_categories' ),
-					'permission_callback' => array( $this, 'get_items_permissions_check' ),
-				),
-			)
-		);
-
-		parent::register_routes();
-	}
-
-	/**
-	 * Retrieve block patterns categories.
-	 *
-	 * @since 6.2.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_pattern_categories( $request ) {
-		$query_args    = array( 'locale' => get_user_locale() );
-		$transient_key = 'wp_remote_block_pattern_categories_' . md5( serialize( $query_args ) );
-
-		/**
-		 * Use network-wide transient to improve performance. The locale is the only site
-		 * configuration that affects the response, and it's included in the transient key.
-		 */
-		$raw_pattern_categories = get_site_transient( $transient_key );
-
-		if ( ! $raw_pattern_categories ) {
-			$api_url = 'http://api.wordpress.org/patterns/1.0/?categories&' . build_query( $query_args );
-			if ( wp_http_supports( array( 'ssl' ) ) ) {
-				$api_url = set_url_scheme( $api_url, 'https' );
-			}
-
-			/**
-			 * Default to a short TTL, to mitigate cache stampedes on high-traffic sites.
-			 * This assumes that most errors will be short-lived, e.g., packet loss that causes the
-			 * first request to fail, but a follow-up one will succeed. The value should be high
-			 * enough to avoid stampedes, but low enough to not interfere with users manually
-			 * re-trying a failed request.
-			*/
-			$cache_ttl              = 5;
-			$wporg_response         = wp_remote_get( $api_url );
-			$raw_pattern_categories = json_decode( wp_remote_retrieve_body( $wporg_response ) );
-			if ( is_wp_error( $wporg_response ) ) {
-				$raw_pattern_categories = $wporg_response;
-
-			} elseif ( ! is_array( $raw_pattern_categories ) ) {
-				// HTTP request succeeded, but response data is invalid.
-				$raw_pattern_categories = new WP_Error(
-					'pattern_directory_api_failed',
-					sprintf(
-						/* translators: %s: Support forums URL. */
-						__( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="%s">support forums</a>.', 'gutenberg' ),
-						__( 'https://wordpress.org/support/forums/', 'gutenberg' )
-					),
-					array(
-						'response' => wp_remote_retrieve_body( $wporg_response ),
-					)
-				);
-
-			} else {
-				// Response has valid data.
-				$cache_ttl = HOUR_IN_SECONDS;
-			}
-
-			set_site_transient( $transient_key, $raw_pattern_categories, $cache_ttl );
-		}
-
-		if ( is_wp_error( $raw_pattern_categories ) ) {
-			$raw_pattern_categories->add_data( array( 'status' => 500 ) );
-
-			return $raw_pattern_categories;
-		}
-
-		$response = array();
-
-		if ( $raw_pattern_categories ) {
-			foreach ( $raw_pattern_categories as $category ) {
-				$response[] = $this->prepare_response_for_collection(
-					$this->prepare_pattern_category_for_response( $category, $request )
-				);
-			}
-		}
-
-		return new WP_REST_Response( $response );
-	}
-
-	/**
-	 * Prepare a raw block pattern category before it gets output in a REST API response.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param object          $item    Raw pattern category from api.wordpress.org, before any changes.
-	 * @param WP_REST_Request $request Request object.
-	 * @return WP_REST_Response
-	 */
-	public function prepare_pattern_category_for_response( $item, $request ) {
-		$raw_pattern_category = array(
-			'id'   => absint( $item->id ),
-			'name' => sanitize_text_field( $item->name ),
-			'slug' => sanitize_title_with_dashes( $item->slug ),
-		);
-
-		$prepared_pattern_category = $this->add_additional_fields_to_object( $raw_pattern_category, $request );
-
-		return new WP_REST_Response( $prepared_pattern_category );
-	}
-
-	/**
-	 * Search and retrieve block patterns metadata
-	 *
-	 * @since 5.8.0
-	 * @since 6.0.0 Added 'slug' to request.
-	 * @since 6.2.0 Added 'per_page', 'page', 'offset', 'order', and 'orderby' to request.
-	 *
-	 * @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 ) {
-		/**
-		 * Include an unmodified `$wp_version`, so the API can craft a response that's tailored to
-		 * it. Some plugins modify the version in a misguided attempt to improve security by
-		 * obscuring the version, which can cause invalid requests.
-		 */
-		require ABSPATH . WPINC . '/version.php';
-		require_once ABSPATH . 'wp-admin/includes/plugin.php';
-
-		$gutenberg_data = get_plugin_data( dirname( dirname( dirname( __DIR__ ) ) ) . '/gutenberg.php', false );
-
-		$valid_query_args = array( 'offset', 'order', 'orderby', 'page', 'per_page', 'search', 'slug' );
-		$query_args       = array_merge(
-			array_intersect_key( $request->get_params(), array_flip( $valid_query_args ) ),
-			array(
-				'locale'            => get_user_locale(),
-				'wp-version'        => $wp_version, // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- it's defined in `version.php` above.
-				'gutenberg-version' => $gutenberg_data['Version'],
-			)
-		);
-
-		$query_args['pattern-categories'] = isset( $request['category'] ) ? $request['category'] : false;
-		$query_args['pattern-keywords']   = isset( $request['keyword'] ) ? $request['keyword'] : false;
-
-		$query_args = array_filter( $query_args );
-
-		$transient_key = $this->get_transient_key( $query_args );
-
-		/**
-		 * Use network-wide transient to improve performance. The locale is the only site
-		 * configuration that affects the response, and it's included in the transient key.
-		 */
-		$raw_patterns = get_site_transient( $transient_key );
-
-		if ( ! $raw_patterns ) {
-			$api_url = 'http://api.wordpress.org/patterns/1.0/?' . build_query( $query_args );
-			if ( wp_http_supports( array( 'ssl' ) ) ) {
-				$api_url = set_url_scheme( $api_url, 'https' );
-			}
-
-			/**
-			 * Default to a short TTL, to mitigate cache stampedes on high-traffic sites.
-			 * This assumes that most errors will be short-lived, e.g., packet loss that causes the
-			 * first request to fail, but a follow-up one will succeed. The value should be high
-			 * enough to avoid stampedes, but low enough to not interfere with users manually
-			 * re-trying a failed request.
-			 */
-			$cache_ttl      = 5;
-			$wporg_response = wp_remote_get( $api_url );
-			$raw_patterns   = json_decode( wp_remote_retrieve_body( $wporg_response ) );
-
-			if ( is_wp_error( $wporg_response ) ) {
-				$raw_patterns = $wporg_response;
-
-			} elseif ( ! is_array( $raw_patterns ) ) {
-				// HTTP request succeeded, but response data is invalid.
-				$raw_patterns = new WP_Error(
-					'pattern_api_failed',
-					sprintf(
-						/* translators: %s: Support forums URL. */
-						__( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="%s">support forums</a>.', 'gutenberg' ),
-						__( 'https://wordpress.org/support/forums/', 'gutenberg' )
-					),
-					array(
-						'response' => wp_remote_retrieve_body( $wporg_response ),
-					)
-				);
-
-			} else {
-				// Response has valid data.
-				$cache_ttl = HOUR_IN_SECONDS;
-			}
-
-			set_site_transient( $transient_key, $raw_patterns, $cache_ttl );
-		}
-
-		if ( is_wp_error( $raw_patterns ) ) {
-			$raw_patterns->add_data( array( 'status' => 500 ) );
-
-			return $raw_patterns;
-		}
-
-		$response = array();
-
-		if ( $raw_patterns ) {
-			foreach ( $raw_patterns as $pattern ) {
-				$response[] = $this->prepare_response_for_collection(
-					$this->prepare_item_for_response( $pattern, $request )
-				);
-			}
-		}
-
-		return new WP_REST_Response( $response );
-	}
-}
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 4c6a1f50612a84..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php
+++ /dev/null
@@ -1,219 +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' ),
-	);
-
-	/**
-	 * 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.
-	 * @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,
-		),
-	);
-}
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 7adb37ffbd9e01..00000000000000
--- a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
+++ /dev/null
@@ -1,60 +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 {
-
-	/**
-	 * 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();
-	}
-
-	/**
-	 * Private method to clean the cached data after an upgrade.
-	 *
-	 * It is hooked into the `upgrader_process_complete` action.
-	 *
-	 * @see default-filters.php
-	 *
-	 * @param WP_Upgrader $upgrader WP_Upgrader instance.
-	 * @param array       $options  Array of bulk item update data.
-	 */
-	public static function _clean_cached_data_upon_upgrading( $upgrader, $options ) {
-		if ( 'update' !== $options['action'] ) {
-			return;
-		}
-
-		if (
-			'core' === $options['type'] ||
-			'plugin' === $options['type'] ||
-			// Clean cache only if the active theme was updated.
-			( 'theme' === $options['type'] && ( isset( $options['themes'][ get_stylesheet() ] ) || isset( $options['themes'][ get_template() ] ) ) )
-		) {
-			static::clean_cached_data();
-		}
-	}
-
-}
diff --git a/lib/compat/wordpress-6.2/default-filters.php b/lib/compat/wordpress-6.2/default-filters.php
deleted file mode 100644
index 927ff2bd12aa33..00000000000000
--- a/lib/compat/wordpress-6.2/default-filters.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-/**
- * Sets up the default filters and actions for most
- * of the WordPress hooks.
- *
- * If you need to remove a default hook, this file will
- * give you the priority to use for removing the hook.
- *
- * Not all of the default hooks are found in this file.
- * For instance, administration-related hooks are located in
- * wp-admin/includes/admin-filters.php.
- *
- * If a hook should only be called from a specific context
- * (admin area, multisite environment…), please move it
- * to a more appropriate file instead.
- *
- * @package gutenberg
- */
-
-add_action( 'switch_theme', 'wp_theme_has_theme_json_clean_cache' );
-add_action( 'start_previewing_theme', 'wp_theme_has_theme_json_clean_cache' );
-add_action( 'upgrader_process_complete', '_wp_theme_has_theme_json_clean_cache_upon_upgrading_active_theme', 10, 2 );
-add_action( 'save_post_wp_global_styles', array( 'WP_Theme_JSON_Resolver_Gutenberg', 'clean_cached_data' ) );
-add_action( 'activated_plugin', array( 'WP_Theme_JSON_Resolver_Gutenberg', 'clean_cached_data' ) );
-add_action( 'deactivated_plugin', array( 'WP_Theme_JSON_Resolver_Gutenberg', 'clean_cached_data' ) );
-add_action( 'upgrader_process_complete', array( 'WP_Theme_JSON_Resolver_Gutenberg', '_clean_cached_data_upon_upgrading', 10, 2 ) );
-add_action( 'save_post_wp_global_styles', 'gutenberg_get_global_stylesheet_clean_cache' );
-add_action( 'switch_theme', 'gutenberg_get_global_stylesheet_clean_cache' );
-add_action( 'start_previewing_theme', 'gutenberg_get_global_stylesheet_clean_cache' );
-add_action( 'activated_plugin', 'gutenberg_get_global_stylesheet_clean_cache' );
-add_action( 'deactivated_plugin', 'gutenberg_get_global_stylesheet_clean_cache' );
-add_action( 'upgrader_process_complete', '_gutenberg_get_global_stylesheet_clean_cache_upon_upgrading', 10, 2 );
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
deleted file mode 100644
index e74ef3144ef095..00000000000000
--- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
+++ /dev/null
@@ -1,229 +0,0 @@
-<?php
-/**
- * API to interact with global settings & styles.
- *
- * @package gutenberg
- */
-
-if ( ! function_exists( 'wp_theme_has_theme_json' ) ) {
-	/**
-	 * Whether a theme or its parent have a theme.json file.
-	 *
-	 * The result would be cached via the WP_Object_Cache.
-	 * It can be cleared by calling wp_theme_has_theme_json_clean_cache().
-	 *
-	 * @return boolean
-	 */
-	function wp_theme_has_theme_json() {
-		$cache_group       = 'theme_json';
-		$cache_key         = 'wp_theme_has_theme_json';
-		$theme_has_support = wp_cache_get( $cache_key, $cache_group );
-
-		/**
-		 * $theme_has_support is stored as an int in the cache.
-		 *
-		 * The reason not to store it as a boolean is to avoid working
-		 * with the $found parameter which apparently had some issues in some implementations
-		 * https://developer.wordpress.org/reference/functions/wp_cache_get/
-		 *
-		 * Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
-		 */
-		if ( ! WP_DEBUG && is_int( $theme_has_support ) ) {
-			return (bool) $theme_has_support;
-		}
-
-		// Has the own theme a theme.json?
-		$theme_has_support = is_readable( get_stylesheet_directory() . '/theme.json' );
-
-		// Look up the parent if the child does not have a theme.json.
-		if ( ! $theme_has_support ) {
-			$theme_has_support = is_readable( get_template_directory() . '/theme.json' );
-		}
-
-		$theme_has_support = $theme_has_support ? 1 : 0;
-
-		wp_cache_set( $cache_key, $theme_has_support, $cache_group );
-
-		return (bool) $theme_has_support;
-	}
-}
-
-if ( ! function_exists( 'wp_theme_has_theme_json_clean_cache' ) ) {
-	/**
-	 * Function to clean the cache used by wp_theme_has_theme_json method.
-	 */
-	function wp_theme_has_theme_json_clean_cache() {
-		wp_cache_delete( 'wp_theme_has_theme_json', 'theme_json' );
-	}
-}
-
-if ( ! function_exists( '_wp_theme_has_theme_json_clean_cache_upon_upgrading_active_theme' ) ) {
-	/**
-	 * Private function to clean the cache used by wp_theme_has_theme_json method.
-	 *
-	 * It is hooked into the `upgrader_process_complete` action.
-	 *
-	 * @see default-filters.php
-	 *
-	 * @param WP_Upgrader $upgrader Instance of WP_Upgrader class.
-	 * @param array       $options Metadata that identifies the data that is updated.
-	 */
-	function _wp_theme_has_theme_json_clean_cache_upon_upgrading_active_theme( $upgrader, $options ) {
-		// The cache only needs cleaning when the active theme was updated.
-		if (
-			'update' === $options['action'] &&
-			'theme' === $options['type'] &&
-			( isset( $options['themes'][ get_stylesheet() ] ) || isset( $options['themes'][ get_template() ] ) )
-		) {
-			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.
- *                     If empty, it'll load all for themes with theme.json support
- *                     and only [ 'variables', 'presets' ] for themes without theme.json support.
- *
- * @return string Stylesheet.
- */
-function gutenberg_get_global_stylesheet( $types = array() ) {
-	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
-	$can_use_cached = empty( $types ) && ( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG );
-	$cache_key      = 'gutenberg_get_global_stylesheet';
-	$cache_group    = 'theme_json';
-	if ( $can_use_cached ) {
-		$cached = wp_cache_get( $cache_key, $cache_group );
-		if ( $cached ) {
-			return $cached;
-		}
-	}
-	$tree                = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$supports_theme_json = wp_theme_has_theme_json();
-	if ( empty( $types ) && ! $supports_theme_json ) {
-		$types = array( 'variables', 'presets', 'base-layout-styles' );
-	} elseif ( empty( $types ) ) {
-		$types = array( 'variables', 'styles', 'presets' );
-	}
-
-	/*
-	 * If variables are part of the stylesheet,
-	 * we add them.
-	 *
-	 * This is so themes without a theme.json still work as before 5.9:
-	 * they can override the default presets.
-	 * See https://core.trac.wordpress.org/ticket/54782
-	 */
-	$styles_variables = '';
-	if ( in_array( 'variables', $types, true ) ) {
-		/*
-		 * We only use the default, theme, and custom origins.
-		 * This is because styles for blocks origin are added
-		 * at a later phase (render cycle) so we only render the ones in use.
-		 * @see wp_add_global_styles_for_blocks
-		 */
-		$origins          = array( 'default', 'theme', 'custom' );
-		$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins );
-		$types            = array_diff( $types, array( 'variables' ) );
-	}
-
-	/*
-	 * For the remaining types (presets, styles), we do consider origins:
-	 *
-	 * - themes without theme.json: only the classes for the presets defined by core
-	 * - themes with theme.json: the presets and styles classes, both from core and the theme
-	 */
-	$styles_rest = '';
-	if ( ! empty( $types ) ) {
-		/*
-		 * We only use the default, theme, and custom origins.
-		 * This is because styles for blocks origin are added
-		 * at a later phase (render cycle) so we only render the ones in use.
-		 * @see wp_add_global_styles_for_blocks
-		 */
-		$origins = array( 'default', 'theme', 'custom' );
-		if ( ! $supports_theme_json ) {
-			$origins = array( 'default' );
-		}
-		$styles_rest = $tree->get_stylesheet( $types, $origins );
-	}
-	$stylesheet = $styles_variables . $styles_rest;
-	if ( $can_use_cached ) {
-		wp_cache_set( $cache_key, $stylesheet, $cache_group );
-	}
-	return $stylesheet;
-}
-
-/**
- * Clean the cache used by the `gutenberg_get_global_stylesheet` function.
- */
-function gutenberg_get_global_stylesheet_clean_cache() {
-	wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' );
-}
-
-/**
- * Private function to clean the cache used by the `gutenberg_get_global_stylesheet` function after an upgrade.
- *
- * It is hooked into the `upgrader_process_complete` action.
- *
- * @see default-filters.php
- *
- * @param WP_Upgrader $upgrader WP_Upgrader instance.
- * @param array       $options  Array of bulk item update data.
- */
-function _gutenberg_get_global_stylesheet_clean_cache_upon_upgrading( $upgrader, $options ) {
-	if ( 'update' !== $options['action'] ) {
-		return;
-	}
-
-	if (
-		'core' === $options['type'] ||
-		'plugin' === $options['type'] ||
-		// Clean cache only if the active theme was updated.
-		( 'theme' === $options['type'] && ( isset( $options['themes'][ get_stylesheet() ] ) || isset( $options['themes'][ get_template() ] ) ) )
-	) {
-		gutenberg_get_global_stylesheet_clean_cache();
-	}
-}
-
-/**
- * Function to get the settings resulting of merging core, theme, and user data.
- *
- * @param array $path    Path to the specific setting to retrieve. Optional.
- *                       If empty, will return all settings.
- * @param array $context {
- *     Metadata to know where to retrieve the $path from. Optional.
- *
- *     @type string $block_name Which block to retrieve the settings from.
- *                              If empty, it'll return the settings for the global context.
- *     @type string $origin     Which origin to take data from.
- *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
- *                              If empty or unknown, 'all' is used.
- * }
- *
- * @return array The settings to retrieve.
- */
-function gutenberg_get_global_settings( $path = array(), $context = array() ) {
-	if ( ! empty( $context['block_name'] ) ) {
-		$new_path = array( 'blocks', $context['block_name'] );
-		foreach ( $path as $subpath ) {
-			$new_path[] = $subpath;
-		}
-		$path = $new_path;
-	}
-
-	// This is the default value when no origin is provided or when it is 'all'.
-	$origin = 'custom';
-	if (
-		! wp_theme_has_theme_json() ||
-		( isset( $context['origin'] ) && 'base' === $context['origin'] )
-	) {
-		$origin = 'theme';
-	}
-
-	$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_settings();
-	return _wp_array_get( $settings, $path, $settings );
-}
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
deleted file mode 100644
index 023a79e3db95fb..00000000000000
--- a/lib/compat/wordpress-6.2/rest-api.php
+++ /dev/null
@@ -1,85 +0,0 @@
-<?php
-/**
- * Overrides Core's wp-includes/rest-api.php and registers the new endpoint for WP 6.2.
- *
- * @package gutenberg
- */
-
-/**
- * Registers the block pattern categories REST API routes.
- */
-function gutenberg_register_rest_block_pattern_categories() {
-	$block_patterns = new Gutenberg_REST_Block_Pattern_Categories_Controller();
-	$block_patterns->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_block_pattern_categories' );
-
-/**
- * Registers the block pattern directory.
- */
-function gutenberg_register_rest_pattern_directory() {
-	$pattern_directory_controller = new Gutenberg_REST_Pattern_Directory_Controller_6_2();
-	$pattern_directory_controller->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_pattern_directory' );
-
-/**
- * Add extra collection params to pattern directory requests.
- *
- * @param array $query_params JSON Schema-formatted collection parameters.
- * @return array Updated parameters.
- */
-function gutenberg_pattern_directory_collection_params_6_2( $query_params ) {
-	$query_params['page'] = array(
-		'description'       => __( 'Current page of the collection.', 'gutenberg' ),
-		'type'              => 'integer',
-		'default'           => 1,
-		'sanitize_callback' => 'absint',
-		'validate_callback' => 'rest_validate_request_arg',
-		'minimum'           => 1,
-	);
-
-	$query_params['per_page'] = array(
-		'description'       => __( 'Maximum number of items to be returned in result set.', 'gutenberg' ),
-		'type'              => 'integer',
-		'default'           => 100,
-		'minimum'           => 1,
-		'maximum'           => 100,
-		'sanitize_callback' => 'absint',
-		'validate_callback' => 'rest_validate_request_arg',
-	);
-
-	$query_params['offset'] = array(
-		'description' => __( 'Offset the result set by a specific number of items.', 'gutenberg' ),
-		'type'        => 'integer',
-	);
-
-	$query_params['order'] = array(
-		'description' => __( 'Order sort attribute ascending or descending.', 'gutenberg' ),
-		'type'        => 'string',
-		'default'     => 'desc',
-		'enum'        => array( 'asc', 'desc' ),
-	);
-
-	$query_params['orderby'] = array(
-		'description' => __( 'Sort collection by post attribute.', 'gutenberg' ),
-		'type'        => 'string',
-		'default'     => 'date',
-		'enum'        => array(
-			'author',
-			'date',
-			'id',
-			'include',
-			'modified',
-			'parent',
-			'relevance',
-			'slug',
-			'include_slugs',
-			'title',
-			'favorite_count',
-		),
-	);
-
-	return $query_params;
-}
-add_filter( 'rest_pattern_directory_collection_params', 'gutenberg_pattern_directory_collection_params_6_2' );
diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
deleted file mode 100644
index 9d67cbd3ef1ad8..00000000000000
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-/**
- * Updates the script-loader.php file
- *
- * @package gutenberg
- */
-
-/**
- * Registers vendor JavaScript files to be used as dependencies of the editor
- * and plugins.
- *
- * This function is called from a script during the plugin build process, so it
- * should not call any WordPress PHP functions.
- *
- * @since 13.0
- *
- * @param WP_Scripts $scripts WP_Scripts instance.
- */
-function gutenberg_register_vendor_scripts_62( $scripts ) {
-	$extension = SCRIPT_DEBUG ? '.js' : '.min.js';
-
-	$script = $scripts->query( 'wp-inert-polyfill', 'registered' );
-	if ( ! $script ) {
-		$scripts->add( 'wp-inert-polyfill', gutenberg_url( 'build/vendors/inert-polyfill' . $extension ), array() );
-	}
-
-	$script       = $scripts->query( 'wp-polyfill', 'registered' );
-	$script->deps = array_merge( $script->deps, array( 'wp-inert-polyfill' ) );
-}
-add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts_62' );
-
-/**
- * This function takes care of adding inline styles
- * in the proper place, depending on the theme in use.
- *
- * This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
- * added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
- *
- * For block themes, it's loaded in the head.
- * For classic ones, it's loaded in the body
- * because the wp_head action  happens before
- * the render_block.
- *
- * @link https://core.trac.wordpress.org/ticket/53494.
- *
- * @deprecated 6.2 Block supports styles are now stored for enqueuing via the style engine API. See: packages/style-engine/README.md.
- *
- * @param string $style String containing the CSS styles to be added.
- * @param int    $priority To set the priority for the add_action.
- */
-function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
-	_deprecated_function( __FUNCTION__, '6.2' );
-
-	$action_hook_name = 'wp_footer';
-	if ( wp_is_block_theme() ) {
-		$action_hook_name = 'wp_head';
-	}
-	add_action(
-		$action_hook_name,
-		static function () use ( $style ) {
-			echo "<style>$style</style>\n";
-		},
-		$priority
-	);
-}
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
new file mode 100644
index 00000000000000..3cecb7fbc0985c
--- /dev/null
+++ b/lib/compat/wordpress-6.7/block-bindings.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * Temporary compatibility code for new functionalities/changes related to block bindings APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Bootstrap the block bindings sources registered in the server.
+ */
+function gutenberg_bootstrap_server_block_bindings_sources() {
+	$registered_sources = get_all_registered_block_bindings_sources();
+	if ( ! empty( $registered_sources ) ) {
+		$filtered_sources = array();
+		foreach ( $registered_sources as $source ) {
+			$filtered_sources[] = array(
+				'name'        => $source->name,
+				'label'       => $source->label,
+				'usesContext' => $source->uses_context,
+			);
+		}
+		$script = sprintf( 'for ( const source of %s ) { ! wp.blocks.getBlockBindingsSource( source.name ) && wp.blocks.registerBlockBindingsSource( source ); }', wp_json_encode( $filtered_sources ) );
+		wp_add_inline_script(
+			'wp-blocks',
+			$script
+		);
+	}
+}
+
+add_action( 'enqueue_block_editor_assets', 'gutenberg_bootstrap_server_block_bindings_sources', 5 );
+
+/**
+ * Initialize `canUpdateBlockBindings` editor setting if it doesn't exist. By default, it is `true` only for admin users.
+ *
+ * @param array $settings The block editor settings from the `block_editor_settings_all` filter.
+ * @return array The editor settings including `canUpdateBlockBindings`.
+ */
+function gutenberg_add_can_update_block_bindings_editor_setting( $editor_settings ) {
+	if ( empty( $editor_settings['canUpdateBlockBindings'] ) ) {
+		$editor_settings['canUpdateBlockBindings'] = current_user_can( 'manage_options' );
+	}
+	return $editor_settings;
+}
+
+add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 );
+
+/**
+ * Add `label` to `register_meta`.
+ *
+ * @param array  $args Array of arguments for registering meta.
+ * @return array Modified arguments array including `label`.
+ */
+function gutenberg_update_meta_args_with_label( $args ) {
+	// Don't update schema when label isn't provided.
+	if ( ! isset( $args['label'] ) ) {
+		return $args;
+	}
+
+	// Don't update schema if not exposed to REST
+	if ( ! isset( $args['show_in_rest'] ) ) {
+		return $args;
+	}
+
+	$schema = array( 'title' => $args['label'] );
+	if ( ! is_array( $args['show_in_rest'] ) ) {
+		$args['show_in_rest'] = array(
+			'schema' => $schema,
+		);
+		return $args;
+	}
+
+	if ( ! empty( $args['show_in_rest']['schema'] ) ) {
+		$args['show_in_rest']['schema'] = array_merge( $args['show_in_rest']['schema'], $schema );
+	} else {
+		$args['show_in_rest']['schema'] = $schema;
+	}
+
+	return $args;
+}
+
+// Priority must be lower than 10 to ensure the label is not removed.
+add_filter( 'register_meta_args', 'gutenberg_update_meta_args_with_label', 5, 1 );
diff --git a/lib/compat/wordpress-6.7/block-templates.php b/lib/compat/wordpress-6.7/block-templates.php
new file mode 100644
index 00000000000000..acbd0b4981fe29
--- /dev/null
+++ b/lib/compat/wordpress-6.7/block-templates.php
@@ -0,0 +1,84 @@
+<?php
+/**
+ * Block template functions.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'register_block_template' ) ) {
+	/**
+	 * Register a template.
+	 *
+	 * @param string       $template_name  Template name in the form of `plugin_uri//template_name`.
+	 * @param array|string $args           {
+	 *     @type string        $title                 Optional. Title of the template as it will be shown in the Site Editor
+	 *                                                and other UI elements.
+	 *     @type string        $description           Optional. Description of the template as it will be shown in the Site
+	 *                                                Editor.
+	 *     @type string        $content               Optional. Default content of the template that will be used when the
+	 *                                                template is rendered or edited in the editor.
+	 *     @type string[]      $post_types            Optional. Array of post types to which the template should be available.
+	 *     @type string        $plugin                Uri of the plugin that registers the template.
+	 * }
+	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
+	 */
+	function register_block_template( $template_name, $args = array() ) {
+		return WP_Block_Templates_Registry::get_instance()->register( $template_name, $args );
+	}
+}
+
+if ( ! function_exists( 'unregister_block_template' ) ) {
+	/**
+	 * Unregister a template.
+	 *
+	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
+	 * @return WP_Block_Template|WP_Error The unregistered template object on success, WP_Error object on failure or if
+	 *                                    the template doesn't exist.
+	 */
+	function unregister_block_template( $template_name ) {
+		return WP_Block_Templates_Registry::get_instance()->unregister( $template_name );
+	}
+}
+
+if ( ! function_exists( 'wp_register_block_template' ) ) {
+	/**
+	 * Register a template.
+	 *
+	 * @deprecated 19.4.0 wp_register_block_template is deprecated. Please use register_block_template instead.
+	 *
+	 * @param string       $template_name Template name in the form of `plugin_uri//template_name`.
+	 * @param array|string $args {
+	 *     Optional. Array or string of arguments for registering a block template.
+	 *
+	 *     @type string   $title       Optional. Title of the template as it will be shown in the Site Editor
+	 *                                 and other UI elements.
+	 *     @type string   $description Optional. Description of the template as it will be shown in the Site
+	 *                                 Editor.
+	 *     @type string   $content     Optional. Default content of the template that will be used when the
+	 *                                 template is rendered or edited in the editor.
+	 *     @type string[] $post_types  Optional. Array of post types to which the template should be available.
+	 *     @type string   $plugin      Uri of the plugin that registers the template.
+	 * }
+	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
+	 */
+	function wp_register_block_template( $template_name, $args = array() ) {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 19.4.0', 'register_block_template' );
+		return register_block_template( $template_name, $args );
+	}
+}
+
+if ( ! function_exists( 'wp_unregister_block_template' ) ) {
+	/**
+	 * Unregister a template.
+	 *
+	 * @deprecated 19.4.0 wp_unregister_block_template is deprecated. Please use unregister_block_template instead.
+	 *
+	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
+	 * @return WP_Block_Template|WP_Error The unregistered template object on success, WP_Error object on failure or if
+	 *                                    the template doesn't exist.
+	 */
+	function wp_unregister_block_template( $template_name ) {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 19.4.0', 'unregister_block_template' );
+		return unregister_block_template( $template_name );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/blocks.php b/lib/compat/wordpress-6.7/blocks.php
new file mode 100644
index 00000000000000..e739808000c5f3
--- /dev/null
+++ b/lib/compat/wordpress-6.7/blocks.php
@@ -0,0 +1,139 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Allow passing a PHP file as `variations` field for Core versions < 6.7
+ *
+ * @param array $settings Array of determined settings for registering a block type.
+ * @param array $metadata Metadata provided for registering a block type.
+ * @return array The block type settings
+ */
+function gutenberg_filter_block_type_metadata_settings_allow_variations_php_file( $settings, $metadata ) {
+	// If `variations` is a string, it's the name of a PHP file that
+	// generates the variations.
+	if ( ! empty( $settings['variations'] ) && is_string( $settings['variations'] ) ) {
+		$variations_path = wp_normalize_path(
+			realpath(
+				dirname( $metadata['file'] ) . '/' .
+				remove_block_asset_path_prefix( $settings['variations'] )
+			)
+		);
+		if ( $variations_path ) {
+			/**
+			 * Generates the list of block variations.
+			 *
+			 * @since 6.7.0
+			 *
+			 * @return string Returns the list of block variations.
+			 */
+			$settings['variation_callback'] = static function () use ( $variations_path ) {
+				$variations = require $variations_path;
+				return $variations;
+			};
+			// The block instance's `variations` field is only allowed to be an array
+			// (of known block variations). We unset it so that the block instance will
+			// provide a getter that returns the result of the `variation_callback` instead.
+			unset( $settings['variations'] );
+		}
+	}
+	return $settings;
+}
+add_filter( 'block_type_metadata_settings', 'gutenberg_filter_block_type_metadata_settings_allow_variations_php_file', 10, 2 );
+
+/**
+ * Adds post format query vars to the query loop block's WP_Query when the block's attributes call for them.
+ *
+ * @see 'query_loop_block_query_vars'
+ *
+ * @param array    $query The query vars.
+ * @param WP_Block $block Block instance.
+ * @return array   The filtered query vars.
+ */
+function gutenberg_add_format_query_vars_to_query_loop_block( $query, $block ) {
+	// Return early if there is no format or if the format is not an array.
+	if ( empty( $block->context['query']['format'] ) || ! is_array( $block->context['query']['format'] ) ) {
+		return $query;
+	}
+
+	// Return early if the query already contains a post format. This is to avoid duplication if the
+	// WordPress core filter is already applied.
+	if ( ! empty( $query['tax_query'] ) ) {
+		foreach ( $query['tax_query'] as $taxquery ) {
+			if ( isset( $taxquery['taxonomy'] ) && 'post_format' === $taxquery['taxonomy'] ) {
+				return $query;
+			}
+		}
+	}
+
+	$formats = $block->context['query']['format'];
+	/*
+	 * Validate that the format is either `standard` or a supported post format.
+	 * - First, add `standard` to the array of valid formats.
+	 * - Then, remove any invalid formats.
+	 */
+	$valid_formats = array_merge( array( 'standard' ), get_post_format_slugs() );
+	$formats       = array_intersect( $formats, $valid_formats );
+
+	/*
+	 * The relation needs to be set to `OR` since the request can contain
+	 * two separate conditions. The user may be querying for items that have
+	 * either the `standard` format or a specific format.
+	 */
+	$formats_query = array( 'relation' => 'OR' );
+
+	/*
+	 * The default post format, `standard`, is not stored in the database.
+	 * If `standard` is part of the request, the query needs to exclude all post items that
+	 * have a format assigned.
+	 */
+	if ( in_array( 'standard', $formats, true ) ) {
+		$formats_query[] = array(
+			'taxonomy' => 'post_format',
+			'field'    => 'slug',
+			'operator' => 'NOT EXISTS',
+		);
+		// Remove the `standard` format, since it cannot be queried.
+		unset( $formats[ array_search( 'standard', $formats, true ) ] );
+	}
+	// Add any remaining formats to the formats query.
+	if ( ! empty( $formats ) ) {
+		// Add the `post-format-` prefix.
+		$terms           = array_map(
+			static function ( $format ) {
+				return "post-format-$format";
+			},
+			$formats
+		);
+		$formats_query[] = array(
+			'taxonomy' => 'post_format',
+			'field'    => 'slug',
+			'terms'    => $terms,
+			'operator' => 'IN',
+		);
+	}
+
+	/*
+	 * Add `$formats_query` to `$query`, as long as it contains more than one key:
+	 * If `$formats_query` only contains the initial `relation` key, there are no valid formats to query,
+	 * and the query should not be modified.
+	 */
+	if ( count( $formats_query ) > 1 ) {
+		// Enable filtering by both post formats and other taxonomies by combining them with `AND`.
+		if ( empty( $query['tax_query'] ) ) {
+			$query['tax_query'] = $formats_query;
+		} else {
+			$query['tax_query'] = array(
+				'relation' => 'AND',
+				$query['tax_query'],
+				$formats_query,
+			);
+		}
+	}
+
+	return $query;
+}
+add_filter( 'query_loop_block_query_vars', 'gutenberg_add_format_query_vars_to_query_loop_block', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php
new file mode 100644
index 00000000000000..5d3795cf68db76
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php
@@ -0,0 +1,704 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Posts_Controller_6_7 class
+ *
+ * @package WordPress
+ * @subpackage REST_API
+ * @since 6.7.0
+ */
+
+/**
+ * Extend the core WP_REST_Posts_Controller class to add support for post formats.
+ *
+ * @see WP_REST_Controller
+ */
+class Gutenberg_REST_Posts_Controller_6_7 extends WP_REST_Posts_Controller {
+	/**
+	 * Post type.
+	 *
+	 * @since 4.7.0
+	 * @var string
+	 */
+	protected $post_type;
+
+	/**
+	 * Retrieves a collection of posts.
+	 *
+	 * @since 4.7.0
+	 * @since 6.7.0 Added support for the `format` query parameter.
+	 *
+	 * @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 ) {
+		// Ensure a search string is set in case the orderby is set to 'relevance'.
+		if ( ! empty( $request['orderby'] ) && 'relevance' === $request['orderby'] && empty( $request['search'] ) ) {
+			return new WP_Error(
+				'rest_no_search_term_defined',
+				__( 'You need to define a search term to order by relevance.' ),
+				array( 'status' => 400 )
+			);
+		}
+
+		// Ensure an include parameter is set in case the orderby is set to 'include'.
+		if ( ! empty( $request['orderby'] ) && 'include' === $request['orderby'] && empty( $request['include'] ) ) {
+			return new WP_Error(
+				'rest_orderby_include_missing_include',
+				__( 'You need to define an include parameter to order by include.' ),
+				array( 'status' => 400 )
+			);
+		}
+
+		// Retrieve the list of registered collection query parameters.
+		$registered = $this->get_collection_params();
+		$args       = array();
+
+		/*
+		 * This array defines mappings between public API query parameters whose
+		 * values are accepted as-passed, and their internal WP_Query parameter
+		 * name equivalents (some are the same). Only values which are also
+		 * present in $registered will be set.
+		 */
+		$parameter_mappings = array(
+			'author'         => 'author__in',
+			'author_exclude' => 'author__not_in',
+			'exclude'        => 'post__not_in',
+			'include'        => 'post__in',
+			'menu_order'     => 'menu_order',
+			'offset'         => 'offset',
+			'order'          => 'order',
+			'orderby'        => 'orderby',
+			'page'           => 'paged',
+			'parent'         => 'post_parent__in',
+			'parent_exclude' => 'post_parent__not_in',
+			'search'         => 's',
+			'search_columns' => 'search_columns',
+			'slug'           => 'post_name__in',
+			'status'         => 'post_status',
+		);
+
+		/*
+		 * For each known parameter which is both registered and present in the request,
+		 * set the parameter's value on the query $args.
+		 */
+		foreach ( $parameter_mappings as $api_param => $wp_param ) {
+			if ( isset( $registered[ $api_param ], $request[ $api_param ] ) ) {
+				$args[ $wp_param ] = $request[ $api_param ];
+			}
+		}
+
+		// Check for & assign any parameters which require special handling or setting.
+		$args['date_query'] = array();
+
+		if ( isset( $registered['before'], $request['before'] ) ) {
+			$args['date_query'][] = array(
+				'before' => $request['before'],
+				'column' => 'post_date',
+			);
+		}
+
+		if ( isset( $registered['modified_before'], $request['modified_before'] ) ) {
+			$args['date_query'][] = array(
+				'before' => $request['modified_before'],
+				'column' => 'post_modified',
+			);
+		}
+
+		if ( isset( $registered['after'], $request['after'] ) ) {
+			$args['date_query'][] = array(
+				'after'  => $request['after'],
+				'column' => 'post_date',
+			);
+		}
+
+		if ( isset( $registered['modified_after'], $request['modified_after'] ) ) {
+			$args['date_query'][] = array(
+				'after'  => $request['modified_after'],
+				'column' => 'post_modified',
+			);
+		}
+
+		// Ensure our per_page parameter overrides any provided posts_per_page filter.
+		if ( isset( $registered['per_page'] ) ) {
+			$args['posts_per_page'] = $request['per_page'];
+		}
+
+		if ( isset( $registered['sticky'], $request['sticky'] ) ) {
+			$sticky_posts = get_option( 'sticky_posts', array() );
+			if ( ! is_array( $sticky_posts ) ) {
+				$sticky_posts = array();
+			}
+			if ( $request['sticky'] ) {
+				/*
+				 * As post__in will be used to only get sticky posts,
+				 * we have to support the case where post__in was already
+				 * specified.
+				 */
+				$args['post__in'] = $args['post__in'] ? array_intersect( $sticky_posts, $args['post__in'] ) : $sticky_posts;
+
+				/*
+				 * If we intersected, but there are no post IDs in common,
+				 * WP_Query won't return "no posts" for post__in = array()
+				 * so we have to fake it a bit.
+				 */
+				if ( ! $args['post__in'] ) {
+					$args['post__in'] = array( 0 );
+				}
+			} elseif ( $sticky_posts ) {
+				/*
+				 * As post___not_in will be used to only get posts that
+				 * are not sticky, we have to support the case where post__not_in
+				 * was already specified.
+				 */
+				$args['post__not_in'] = array_merge( $args['post__not_in'], $sticky_posts );
+			}
+		}
+
+		$args = $this->prepare_tax_query( $args, $request );
+
+		if ( ! empty( $request['format'] ) ) {
+			$formats = $request['format'];
+			/*
+			 * The relation needs to be set to `OR` since the request can contain
+			 * two separate conditions. The user may be querying for items that have
+			 * either the `standard` format or a specific format.
+			 */
+			$formats_query = array( 'relation' => 'OR' );
+
+			/*
+			 * The default post format, `standard`, is not stored in the database.
+			 * If `standard` is part of the request, the query needs to exclude all post items that
+			 * have a format assigned.
+			 */
+			if ( in_array( 'standard', $formats, true ) ) {
+				$formats_query[] = array(
+					'taxonomy' => 'post_format',
+					'field'    => 'slug',
+					'operator' => 'NOT EXISTS',
+				);
+				// Remove the `standard` format, since it cannot be queried.
+				unset( $formats[ array_search( 'standard', $formats, true ) ] );
+			}
+
+			// Add any remaining formats to the formats query.
+			if ( ! empty( $formats ) ) {
+				// Add the `post-format-` prefix.
+				$terms = array_map(
+					static function ( $format ) {
+						return "post-format-$format";
+					},
+					$formats
+				);
+
+				$formats_query[] = array(
+					'taxonomy' => 'post_format',
+					'field'    => 'slug',
+					'terms'    => $terms,
+					'operator' => 'IN',
+				);
+			}
+
+			// Enable filtering by both post formats and other taxonomies by combining them with `AND`.
+			if ( isset( $args['tax_query'] ) ) {
+				$args['tax_query'][] = array(
+					'relation' => 'AND',
+					$formats_query,
+				);
+			} else {
+				$args['tax_query'] = $formats_query;
+			}
+		}
+
+		// Force the post_type argument, since it's not a user input variable.
+		$args['post_type'] = $this->post_type;
+
+		/**
+		 * Filters WP_Query arguments when querying posts via the REST API.
+		 *
+		 * The dynamic portion of the hook name, `$this->post_type`, refers to the post type slug.
+		 *
+		 * Possible hook names include:
+		 *
+		 *  - `rest_post_query`
+		 *  - `rest_page_query`
+		 *  - `rest_attachment_query`
+		 *
+		 * Enables adding extra arguments or setting defaults for a post collection request.
+		 *
+		 * @since 4.7.0
+		 * @since 5.7.0 Moved after the `tax_query` query arg is generated.
+		 *
+		 * @link https://developer.wordpress.org/reference/classes/wp_query/
+		 *
+		 * @param array           $args    Array of arguments for WP_Query.
+		 * @param WP_REST_Request $request The REST API request.
+		 */
+		$args       = apply_filters( "rest_{$this->post_type}_query", $args, $request );
+		$query_args = $this->prepare_items_query( $args, $request );
+
+		$posts_query  = new WP_Query();
+		$query_result = $posts_query->query( $query_args );
+
+		// Allow access to all password protected posts if the context is edit.
+		if ( 'edit' === $request['context'] ) {
+			add_filter( 'post_password_required', array( $this, 'check_password_required' ), 10, 2 );
+		}
+
+		$posts = array();
+
+		update_post_author_caches( $query_result );
+		update_post_parent_caches( $query_result );
+
+		if ( post_type_supports( $this->post_type, 'thumbnail' ) ) {
+			update_post_thumbnail_cache( $posts_query );
+		}
+
+		foreach ( $query_result as $post ) {
+			if ( ! $this->check_read_permission( $post ) ) {
+				continue;
+			}
+
+			$data    = $this->prepare_item_for_response( $post, $request );
+			$posts[] = $this->prepare_response_for_collection( $data );
+		}
+
+		// Reset filter.
+		if ( 'edit' === $request['context'] ) {
+			remove_filter( 'post_password_required', array( $this, 'check_password_required' ) );
+		}
+
+		$page        = (int) $query_args['paged'];
+		$total_posts = $posts_query->found_posts;
+
+		if ( $total_posts < 1 && $page > 1 ) {
+			// Out-of-bounds, run the query again without LIMIT for total count.
+			unset( $query_args['paged'] );
+
+			$count_query = new WP_Query();
+			$count_query->query( $query_args );
+			$total_posts = $count_query->found_posts;
+		}
+
+		$max_pages = (int) ceil( $total_posts / (int) $posts_query->query_vars['posts_per_page'] );
+
+		if ( $page > $max_pages && $total_posts > 0 ) {
+			return new WP_Error(
+				'rest_post_invalid_page_number',
+				__( 'The page number requested is larger than the number of pages available.' ),
+				array( 'status' => 400 )
+			);
+		}
+
+		$response = rest_ensure_response( $posts );
+
+		$response->header( 'X-WP-Total', (int) $total_posts );
+		$response->header( 'X-WP-TotalPages', (int) $max_pages );
+
+		$request_params = $request->get_query_params();
+		$collection_url = rest_url( rest_get_route_for_post_type_items( $this->post_type ) );
+		$base           = add_query_arg( urlencode_deep( $request_params ), $collection_url );
+
+		if ( $page > 1 ) {
+			$prev_page = $page - 1;
+
+			if ( $prev_page > $max_pages ) {
+				$prev_page = $max_pages;
+			}
+
+			$prev_link = add_query_arg( 'page', $prev_page, $base );
+			$response->link_header( 'prev', $prev_link );
+		}
+		if ( $max_pages > $page ) {
+			$next_page = $page + 1;
+			$next_link = add_query_arg( 'page', $next_page, $base );
+
+			$response->link_header( 'next', $next_link );
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Retrieves the query params for the posts collection.
+	 *
+	 * @since 4.7.0
+	 * @since 5.4.0 The `tax_relation` query parameter was added.
+	 * @since 5.7.0 The `modified_after` and `modified_before` query parameters were added.
+	 * @since 6.7.0 The `format` query parameter was added.
+	 *
+	 * @return array Collection parameters.
+	 */
+	public function get_collection_params() {
+		$query_params = parent::get_collection_params();
+
+		$query_params['context']['default'] = 'view';
+
+		$query_params['after'] = array(
+			'description' => __( 'Limit response to posts published after a given ISO8601 compliant date.' ),
+			'type'        => 'string',
+			'format'      => 'date-time',
+		);
+
+		$query_params['modified_after'] = array(
+			'description' => __( 'Limit response to posts modified after a given ISO8601 compliant date.' ),
+			'type'        => 'string',
+			'format'      => 'date-time',
+		);
+
+		if ( post_type_supports( $this->post_type, 'author' ) ) {
+			$query_params['author']         = array(
+				'description' => __( 'Limit result set to posts assigned to specific authors.' ),
+				'type'        => 'array',
+				'items'       => array(
+					'type' => 'integer',
+				),
+				'default'     => array(),
+			);
+			$query_params['author_exclude'] = array(
+				'description' => __( 'Ensure result set excludes posts assigned to specific authors.' ),
+				'type'        => 'array',
+				'items'       => array(
+					'type' => 'integer',
+				),
+				'default'     => array(),
+			);
+		}
+
+		$query_params['before'] = array(
+			'description' => __( 'Limit response to posts published before a given ISO8601 compliant date.' ),
+			'type'        => 'string',
+			'format'      => 'date-time',
+		);
+
+		$query_params['modified_before'] = array(
+			'description' => __( 'Limit response to posts modified before a given ISO8601 compliant date.' ),
+			'type'        => 'string',
+			'format'      => 'date-time',
+		);
+
+		$query_params['exclude'] = array(
+			'description' => __( 'Ensure result set excludes specific IDs.' ),
+			'type'        => 'array',
+			'items'       => array(
+				'type' => 'integer',
+			),
+			'default'     => array(),
+		);
+
+		$query_params['include'] = array(
+			'description' => __( 'Limit result set to specific IDs.' ),
+			'type'        => 'array',
+			'items'       => array(
+				'type' => 'integer',
+			),
+			'default'     => array(),
+		);
+
+		if ( 'page' === $this->post_type || post_type_supports( $this->post_type, 'page-attributes' ) ) {
+			$query_params['menu_order'] = array(
+				'description' => __( 'Limit result set to posts with a specific menu_order value.' ),
+				'type'        => 'integer',
+			);
+		}
+
+		$query_params['offset'] = array(
+			'description' => __( 'Offset the result set by a specific number of items.' ),
+			'type'        => 'integer',
+		);
+
+		$query_params['order'] = array(
+			'description' => __( 'Order sort attribute ascending or descending.' ),
+			'type'        => 'string',
+			'default'     => 'desc',
+			'enum'        => array( 'asc', 'desc' ),
+		);
+
+		$query_params['orderby'] = array(
+			'description' => __( 'Sort collection by post attribute.' ),
+			'type'        => 'string',
+			'default'     => 'date',
+			'enum'        => array(
+				'author',
+				'date',
+				'id',
+				'include',
+				'modified',
+				'parent',
+				'relevance',
+				'slug',
+				'include_slugs',
+				'title',
+			),
+		);
+
+		if ( 'page' === $this->post_type || post_type_supports( $this->post_type, 'page-attributes' ) ) {
+			$query_params['orderby']['enum'][] = 'menu_order';
+		}
+
+		$post_type = get_post_type_object( $this->post_type );
+
+		if ( $post_type->hierarchical || 'attachment' === $this->post_type ) {
+			$query_params['parent']         = array(
+				'description' => __( 'Limit result set to items with particular parent IDs.' ),
+				'type'        => 'array',
+				'items'       => array(
+					'type' => 'integer',
+				),
+				'default'     => array(),
+			);
+			$query_params['parent_exclude'] = array(
+				'description' => __( 'Limit result set to all items except those of a particular parent ID.' ),
+				'type'        => 'array',
+				'items'       => array(
+					'type' => 'integer',
+				),
+				'default'     => array(),
+			);
+		}
+
+		$query_params['search_columns'] = array(
+			'default'     => array(),
+			'description' => __( 'Array of column names to be searched.' ),
+			'type'        => 'array',
+			'items'       => array(
+				'enum' => array( 'post_title', 'post_content', 'post_excerpt' ),
+				'type' => 'string',
+			),
+		);
+
+		$query_params['slug'] = array(
+			'description' => __( 'Limit result set to posts with one or more specific slugs.' ),
+			'type'        => 'array',
+			'items'       => array(
+				'type' => 'string',
+			),
+		);
+
+		$query_params['status'] = array(
+			'default'           => 'publish',
+			'description'       => __( 'Limit result set to posts assigned one or more statuses.' ),
+			'type'              => 'array',
+			'items'             => array(
+				'enum' => array_merge( array_keys( get_post_stati() ), array( 'any' ) ),
+				'type' => 'string',
+			),
+			'sanitize_callback' => array( $this, 'sanitize_post_statuses' ),
+		);
+
+		$query_params = $this->prepare_taxonomy_limit_schema( $query_params );
+
+		if ( 'post' === $this->post_type ) {
+			$query_params['sticky'] = array(
+				'description' => __( 'Limit result set to items that are sticky.' ),
+				'type'        => 'boolean',
+			);
+		}
+
+		if ( post_type_supports( $this->post_type, 'post-formats' ) ) {
+			$query_params['format'] = array(
+				'description' => __( 'Limit result set to items assigned one or more given formats.' ),
+				'type'        => 'array',
+				'uniqueItems' => true,
+				'items'       => array(
+					'enum' => array_values( get_post_format_slugs() ),
+					'type' => 'string',
+				),
+			);
+		}
+
+		/**
+		 * Filters collection parameters for the posts controller.
+		 *
+		 * The dynamic part of the filter `$this->post_type` refers to the post
+		 * type slug for the controller.
+		 *
+		 * This filter registers the collection parameter, but does not map the
+		 * collection parameter to an internal WP_Query parameter. Use the
+		 * `rest_{$this->post_type}_query` filter to set WP_Query parameters.
+		 *
+		 * @since 4.7.0
+		 *
+		 * @param array        $query_params JSON Schema-formatted collection parameters.
+		 * @param WP_Post_Type $post_type    Post type object.
+		 */
+		return apply_filters( "rest_{$this->post_type}_collection_params", $query_params, $post_type );
+	}
+
+	/**
+	 * Prepares the 'tax_query' for a collection of posts.
+	 *
+	 * @since 5.7.0
+	 *
+	 * @param array           $args    WP_Query arguments.
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return array Updated query arguments.
+	 */
+	private function prepare_tax_query( array $args, WP_REST_Request $request ) {
+		$relation = $request['tax_relation'];
+
+		if ( $relation ) {
+			$args['tax_query'] = array( 'relation' => $relation );
+		}
+
+		$taxonomies = wp_list_filter(
+			get_object_taxonomies( $this->post_type, 'objects' ),
+			array( 'show_in_rest' => true )
+		);
+
+		foreach ( $taxonomies as $taxonomy ) {
+			$base = ! empty( $taxonomy->rest_base ) ? $taxonomy->rest_base : $taxonomy->name;
+
+			$tax_include = $request[ $base ];
+			$tax_exclude = $request[ $base . '_exclude' ];
+
+			if ( $tax_include ) {
+				$terms            = array();
+				$include_children = false;
+				$operator         = 'IN';
+
+				if ( rest_is_array( $tax_include ) ) {
+					$terms = $tax_include;
+				} elseif ( rest_is_object( $tax_include ) ) {
+					$terms            = empty( $tax_include['terms'] ) ? array() : $tax_include['terms'];
+					$include_children = ! empty( $tax_include['include_children'] );
+
+					if ( isset( $tax_include['operator'] ) && 'AND' === $tax_include['operator'] ) {
+						$operator = 'AND';
+					}
+				}
+
+				if ( $terms ) {
+					$args['tax_query'][] = array(
+						'taxonomy'         => $taxonomy->name,
+						'field'            => 'term_id',
+						'terms'            => $terms,
+						'include_children' => $include_children,
+						'operator'         => $operator,
+					);
+				}
+			}
+
+			if ( $tax_exclude ) {
+				$terms            = array();
+				$include_children = false;
+
+				if ( rest_is_array( $tax_exclude ) ) {
+					$terms = $tax_exclude;
+				} elseif ( rest_is_object( $tax_exclude ) ) {
+					$terms            = empty( $tax_exclude['terms'] ) ? array() : $tax_exclude['terms'];
+					$include_children = ! empty( $tax_exclude['include_children'] );
+				}
+
+				if ( $terms ) {
+					$args['tax_query'][] = array(
+						'taxonomy'         => $taxonomy->name,
+						'field'            => 'term_id',
+						'terms'            => $terms,
+						'include_children' => $include_children,
+						'operator'         => 'NOT IN',
+					);
+				}
+			}
+		}
+
+		return $args;
+	}
+
+	/**
+	 * Prepares the collection schema for including and excluding items by terms.
+	 *
+	 * @since 5.7.0
+	 *
+	 * @param array $query_params Collection schema.
+	 * @return array Updated schema.
+	 */
+	private function prepare_taxonomy_limit_schema( array $query_params ) {
+		$taxonomies = wp_list_filter( get_object_taxonomies( $this->post_type, 'objects' ), array( 'show_in_rest' => true ) );
+
+		if ( ! $taxonomies ) {
+			return $query_params;
+		}
+
+		$query_params['tax_relation'] = array(
+			'description' => __( 'Limit result set based on relationship between multiple taxonomies.' ),
+			'type'        => 'string',
+			'enum'        => array( 'AND', 'OR' ),
+		);
+
+		$limit_schema = array(
+			'type'  => array( 'object', 'array' ),
+			'oneOf' => array(
+				array(
+					'title'       => __( 'Term ID List' ),
+					'description' => __( 'Match terms with the listed IDs.' ),
+					'type'        => 'array',
+					'items'       => array(
+						'type' => 'integer',
+					),
+				),
+				array(
+					'title'                => __( 'Term ID Taxonomy Query' ),
+					'description'          => __( 'Perform an advanced term query.' ),
+					'type'                 => 'object',
+					'properties'           => array(
+						'terms'            => array(
+							'description' => __( 'Term IDs.' ),
+							'type'        => 'array',
+							'items'       => array(
+								'type' => 'integer',
+							),
+							'default'     => array(),
+						),
+						'include_children' => array(
+							'description' => __( 'Whether to include child terms in the terms limiting the result set.' ),
+							'type'        => 'boolean',
+							'default'     => false,
+						),
+					),
+					'additionalProperties' => false,
+				),
+			),
+		);
+
+		$include_schema = array_merge(
+			array(
+				/* translators: %s: Taxonomy name. */
+				'description' => __( 'Limit result set to items with specific terms assigned in the %s taxonomy.' ),
+			),
+			$limit_schema
+		);
+		// 'operator' is supported only for 'include' queries.
+		$include_schema['oneOf'][1]['properties']['operator'] = array(
+			'description' => __( 'Whether items must be assigned all or any of the specified terms.' ),
+			'type'        => 'string',
+			'enum'        => array( 'AND', 'OR' ),
+			'default'     => 'OR',
+		);
+
+		$exclude_schema = array_merge(
+			array(
+				/* translators: %s: Taxonomy name. */
+				'description' => __( 'Limit result set to items except those with specific terms assigned in the %s taxonomy.' ),
+			),
+			$limit_schema
+		);
+
+		foreach ( $taxonomies as $taxonomy ) {
+			$base         = ! empty( $taxonomy->rest_base ) ? $taxonomy->rest_base : $taxonomy->name;
+			$base_exclude = $base . '_exclude';
+
+			$query_params[ $base ]                = $include_schema;
+			$query_params[ $base ]['description'] = sprintf( $query_params[ $base ]['description'], $base );
+
+			$query_params[ $base_exclude ]                = $exclude_schema;
+			$query_params[ $base_exclude ]['description'] = sprintf( $query_params[ $base_exclude ]['description'], $base );
+
+			if ( ! $taxonomy->hierarchical ) {
+				unset( $query_params[ $base ]['oneOf'][1]['properties']['include_children'] );
+				unset( $query_params[ $base_exclude ]['oneOf'][1]['properties']['include_children'] );
+			}
+		}
+
+		return $query_params;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
new file mode 100644
index 00000000000000..efdc41289dfac2
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
@@ -0,0 +1,185 @@
+<?php
+/**
+ * A custom REST server for Gutenberg.
+ *
+ * @package gutenberg
+ * @since   6.7.0
+ */
+
+class Gutenberg_REST_Server extends WP_REST_Server {
+	/**
+	 * Converts a response to data to send.
+	 *
+	 * @since 4.4.0
+	 * @since 5.4.0 The `$embed` parameter can now contain a list of link relations to include.
+	 *
+	 * @param WP_REST_Response $response Response object.
+	 * @param bool|string[]    $embed    Whether to embed all links, a filtered list of link relations, or no links.
+	 * @return array {
+	 *     Data with sub-requests embedded.
+	 *
+	 *     @type array $_links    Links.
+	 *     @type array $_embedded Embedded objects.
+	 * }
+	 */
+	// @core-merge: Do not merge. The method is copied here to fix the inheritance issue.
+	public function response_to_data( $response, $embed ) {
+		$data  = $response->get_data();
+		$links = static::get_compact_response_links( $response );
+
+		if ( ! empty( $links ) ) {
+			// Convert links to part of the data.
+			$data['_links'] = $links;
+		}
+
+		if ( $embed ) {
+			$this->embed_cache = array();
+			// Determine if this is a numeric array.
+			if ( wp_is_numeric_array( $data ) ) {
+				foreach ( $data as $key => $item ) {
+					$data[ $key ] = $this->embed_links( $item, $embed );
+				}
+			} else {
+				$data = $this->embed_links( $data, $embed );
+			}
+			$this->embed_cache = array();
+		}
+
+		return $data;
+	}
+
+	/**
+	 * Retrieves links from a response.
+	 *
+	 * Extracts the links from a response into a structured hash, suitable for
+	 * direct output.
+	 *
+	 * @since 4.4.0
+	 * @since 6.7.0 The `targetHints` property to the `self` link object was added.
+	 *
+	 * @param WP_REST_Response $response Response to extract links from.
+	 * @return array Map of link relation to list of link hashes.
+	 */
+	public static function get_response_links( $response ) {
+		$links = $response->get_links();
+
+		if ( empty( $links ) ) {
+			return array();
+		}
+
+		$server = rest_get_server();
+
+		// Convert links to part of the data.
+		$data = array();
+		foreach ( $links as $rel => $items ) {
+			$data[ $rel ] = array();
+
+			foreach ( $items as $item ) {
+				$attributes         = $item['attributes'];
+				$attributes['href'] = $item['href'];
+
+				if ( 'self' !== $rel ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				// Prefer targetHints that were specifically designated by the developer.
+				if ( isset( $attributes['targetHints']['allow'] ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				$request = WP_REST_Request::from_url( $item['href'] );
+				if ( ! $request ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				$matched = $server->match_request_to_handler( $request );
+
+				if ( is_wp_error( $matched ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->has_valid_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->sanitize_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				list( $route, $handler ) = $matched;
+
+				$response = new WP_REST_Response();
+				$response->set_matched_route( $route );
+				$response->set_matched_handler( $handler );
+				$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
+
+				foreach ( $headers as $name => $value ) {
+					$name                               = WP_REST_Request::canonicalize_header_name( $name );
+					$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
+				}
+
+				$data[ $rel ][] = $attributes;
+			}
+		}
+
+		return $data;
+	}
+
+	/**
+	 * Retrieves the CURIEs (compact URIs) used for relations.
+	 *
+	 * Extracts the links from a response into a structured hash, suitable for
+	 * direct output.
+	 *
+	 * @since 4.5.0
+	 *
+	 * @param WP_REST_Response $response Response to extract links from.
+	 * @return array Map of link relation to list of link hashes.
+	 */
+	// @core-merge: Do not merge. The method is copied here to fix the inheritance issue.
+	public static function get_compact_response_links( $response ) {
+		$links = static::get_response_links( $response );
+
+		if ( empty( $links ) ) {
+			return array();
+		}
+
+		$curies      = $response->get_curies();
+		$used_curies = array();
+
+		foreach ( $links as $rel => $items ) {
+
+			// Convert $rel URIs to their compact versions if they exist.
+			foreach ( $curies as $curie ) {
+				$href_prefix = substr( $curie['href'], 0, strpos( $curie['href'], '{rel}' ) );
+				if ( ! str_starts_with( $rel, $href_prefix ) ) {
+					continue;
+				}
+
+				// Relation now changes from '$uri' to '$curie:$relation'.
+				$rel_regex = str_replace( '\{rel\}', '(.+)', preg_quote( $curie['href'], '!' ) );
+				preg_match( '!' . $rel_regex . '!', $rel, $matches );
+				if ( $matches ) {
+					$new_rel                       = $curie['name'] . ':' . $matches[1];
+					$used_curies[ $curie['name'] ] = $curie;
+					$links[ $new_rel ]             = $items;
+					unset( $links[ $rel ] );
+					break;
+				}
+			}
+		}
+
+		// Push the curies onto the start of the links array.
+		if ( $used_curies ) {
+			$links['curies'] = array_values( $used_curies );
+		}
+
+		return $links;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
new file mode 100644
index 00000000000000..e5f6eb126f2a6a
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
@@ -0,0 +1,203 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ * @package    gutenberg
+ */
+
+/**
+ * Gutenberg_REST_Templates_Controller_6_7 class
+ *
+ */
+class Gutenberg_REST_Templates_Controller_6_7 extends WP_REST_Templates_Controller {
+	/**
+	 * Returns the given template
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_item( $request ) {
+		if ( isset( $request['source'] ) && ( 'theme' === $request['source'] || 'plugin' === $request['source'] ) ) {
+			$template = get_block_file_template( $request['id'], $this->post_type );
+		} else {
+			$template = get_block_template( $request['id'], $this->post_type );
+		}
+
+		if ( ! $template ) {
+			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.' ), array( 'status' => 404 ) );
+		}
+
+		return $this->prepare_item_for_response( $template, $request );
+	}
+
+	/**
+	 * Prepare a single template output for response
+	 *
+	 * @param WP_Block_Template $item    Template instance.
+	 * @param WP_REST_Request   $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	// @core-merge: Fix wrong author in plugin templates.
+	public function prepare_item_for_response( $item, $request ) {
+		$template = $item;
+
+		$fields = $this->get_fields_for_response( $request );
+
+		if ( 'plugin' !== $item->origin ) {
+			return parent::prepare_item_for_response( $item, $request );
+		}
+		$cloned_item = clone $item;
+		// Set the origin as theme when calling the previous `prepare_item_for_response()` to prevent warnings when generating the author text.
+		$cloned_item->origin = 'theme';
+		$response            = parent::prepare_item_for_response( $cloned_item, $request );
+		$data                = $response->data;
+
+		if ( rest_is_field_included( 'origin', $fields ) ) {
+			$data['origin'] = 'plugin';
+		}
+
+		if ( rest_is_field_included( 'plugin', $fields ) ) {
+			$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $cloned_item->slug );
+			if ( $registered_template ) {
+				$data['plugin'] = $registered_template->plugin;
+			}
+		}
+
+		if ( rest_is_field_included( 'author_text', $fields ) ) {
+			$data['author_text'] = $this->get_wp_templates_author_text_field( $template );
+		}
+
+		if ( rest_is_field_included( 'original_source', $fields ) ) {
+			$data['original_source'] = $this->get_wp_templates_original_source_field( $template );
+		}
+
+		$response = rest_ensure_response( $data );
+
+		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
+			$links = $this->prepare_links( $template->id );
+			$response->add_links( $links );
+			if ( ! empty( $links['self']['href'] ) ) {
+				$actions = $this->get_available_actions();
+				$self    = $links['self']['href'];
+				foreach ( $actions as $rel ) {
+					$response->add_link( $rel, $self );
+				}
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Returns the source from where the template originally comes from.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Original source of the template one of theme, plugin, site, or user.
+	 */
+	// @core-merge: Changed the comments format (from inline to multi-line) in the entire function.
+	private static function get_wp_templates_original_source_field( $template_object ) {
+		if ( 'wp_template' === $template_object->type || 'wp_template_part' === $template_object->type ) {
+			/*
+			 * Added by theme.
+			 * Template originally provided by a theme, but customized by a user.
+			 * Templates originally didn't have the 'origin' field so identify
+			 * older customized templates by checking for no origin and a 'theme'
+			 * or 'custom' source.
+			 */
+			if ( $template_object->has_theme_file &&
+			( 'theme' === $template_object->origin || (
+				empty( $template_object->origin ) && in_array(
+					$template_object->source,
+					array(
+						'theme',
+						'custom',
+					),
+					true
+				) )
+			)
+			) {
+				return 'theme';
+			}
+
+			// Added by plugin.
+			// @core-merge: Removed `$template_object->has_theme_file` check from this if clause.
+			if ( 'plugin' === $template_object->origin ) {
+				return 'plugin';
+			}
+
+			/*
+			 * Added by site.
+			 * Template was created from scratch, but has no author. Author support
+			 * was only added to templates in WordPress 5.9. Fallback to showing the
+			 * site logo and title.
+			 */
+			if ( empty( $template_object->has_theme_file ) && 'custom' === $template_object->source && empty( $template_object->author ) ) {
+				return 'site';
+			}
+		}
+
+		// Added by user.
+		return 'user';
+	}
+
+	/**
+	 * Returns a human readable text for the author of the template.
+	 *
+	 * @param WP_Block_Template $template_object Template instance.
+	 * @return string                            Human readable text for the author.
+	 */
+	private static function get_wp_templates_author_text_field( $template_object ) {
+		$original_source = self::get_wp_templates_original_source_field( $template_object );
+		switch ( $original_source ) {
+			case 'theme':
+				$theme_name = wp_get_theme( $template_object->theme )->get( 'Name' );
+				return empty( $theme_name ) ? $template_object->theme : $theme_name;
+			case 'plugin':
+				// @core-merge: Prioritize plugin name instead of theme name for plugin-registered templates.
+				if ( ! function_exists( 'get_plugins' ) || ! function_exists( 'get_plugin_data' ) ) {
+					require_once ABSPATH . 'wp-admin/includes/plugin.php';
+				}
+				if ( isset( $template_object->plugin ) ) {
+					$plugins = wp_get_active_and_valid_plugins();
+
+					foreach ( $plugins as $plugin_file ) {
+						$plugin_basename = plugin_basename( $plugin_file );
+						// Split basename by '/' to get the plugin slug.
+						list( $plugin_slug, ) = explode( '/', $plugin_basename );
+
+						if ( $plugin_slug === $template_object->plugin ) {
+							$plugin_data = get_plugin_data( $plugin_file );
+
+							if ( ! empty( $plugin_data['Name'] ) ) {
+								return $plugin_data['Name'];
+							}
+
+							break;
+						}
+					}
+				}
+
+				/*
+				 * Fall back to the theme name if the plugin is not defined. That's needed to keep backwards
+				 * compatibility with templates that were registered before the plugin attribute was added.
+				 */
+				$plugins         = get_plugins();
+				$plugin_basename = plugin_basename( sanitize_text_field( $template_object->theme . '.php' ) );
+				if ( isset( $plugins[ $plugin_basename ] ) && isset( $plugins[ $plugin_basename ]['Name'] ) ) {
+					return $plugins[ $plugin_basename ]['Name'];
+				}
+				return isset( $template_object->plugin ) ?
+					$template_object->plugin :
+					$template_object->theme;
+				// @core-merge: End of changes to merge in core.
+			case 'site':
+				return get_bloginfo( 'name' );
+			case 'user':
+				$author = get_user_by( 'id', $template_object->author );
+				if ( ! $author ) {
+					return __( 'Unknown author' );
+				}
+				return $author->get( 'display_name' );
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php
new file mode 100644
index 00000000000000..a2142171ddc14f
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php
@@ -0,0 +1,820 @@
+<?php
+
+/**
+ * Class for efficiently looking up and mapping string keys to string values, with limits.
+ *
+ * @package    WordPress
+ * @since      6.6.0
+ */
+
+/**
+ * WP_Token_Map class.
+ *
+ * Use this class in specific circumstances with a static set of lookup keys which map to
+ * a static set of transformed values. For example, this class is used to map HTML named
+ * character references to their equivalent UTF-8 values.
+ *
+ * This class works differently than code calling `in_array()` and other methods. It
+ * internalizes lookup logic and provides helper interfaces to optimize lookup and
+ * transformation. It provides a method for precomputing the lookup tables and storing
+ * them as PHP source code.
+ *
+ * All tokens and substitutions must be shorter than 256 bytes.
+ *
+ * Example:
+ *
+ *     $smilies = WP_Token_Map::from_array( array(
+ *         '8O' => '😯',
+ *         ':(' => '🙁',
+ *         ':)' => '🙂',
+ *         ':?' => '😕',
+ *      ) );
+ *
+ *      true  === $smilies->contains( ':)' );
+ *      false === $smilies->contains( 'simile' );
+ *
+ *      '😕' === $smilies->read_token( 'Not sure :?.', 9, $length_of_smily_syntax );
+ *      2    === $length_of_smily_syntax;
+ *
+ * ## Precomputing the Token Map.
+ *
+ * Creating the class involves some work sorting and organizing the tokens and their
+ * replacement values. In order to skip this, it's possible for the class to export
+ * its state and be used as actual PHP source code.
+ *
+ * Example:
+ *
+ *      // Export with four spaces as the indent, only for the sake of this docblock.
+ *      // The default indent is a tab character.
+ *      $indent = '    ';
+ *      echo $smilies->precomputed_php_source_table( $indent );
+ *
+ *      // Output, to be pasted into a PHP source file:
+ *      WP_Token_Map::from_precomputed_table(
+ *          array(
+ *              "storage_version" => "6.6.0",
+ *              "key_length" => 2,
+ *              "groups" => "",
+ *              "long_words" => array(),
+ *              "small_words" => "8O\x00:)\x00:(\x00:?\x00",
+ *              "small_mappings" => array( "😯", "🙂", "🙁", "😕" )
+ *          )
+ *      );
+ *
+ * ## Large vs. small words.
+ *
+ * This class uses a short prefix called the "key" to optimize lookup of its tokens.
+ * This means that some tokens may be shorter than or equal in length to that key.
+ * Those words that are longer than the key are called "large" while those shorter
+ * than or equal to the key length are called "small."
+ *
+ * This separation of large and small words is incidental to the way this class
+ * optimizes lookup, and should be considered an internal implementation detail
+ * of the class. It may still be important to be aware of it, however.
+ *
+ * ## Determining Key Length.
+ *
+ * The choice of the size of the key length should be based on the data being stored in
+ * the token map. It should divide the data as evenly as possible, but should not create
+ * so many groups that a large fraction of the groups only contain a single token.
+ *
+ * For the HTML5 named character references, a key length of 2 was found to provide a
+ * sufficient spread and should be a good default for relatively large sets of tokens.
+ *
+ * However, for some data sets this might be too long. For example, a list of smilies
+ * may be too small for a key length of 2. Perhaps 1 would be more appropriate. It's
+ * best to experiment and determine empirically which values are appropriate.
+ *
+ * ## Generate Pre-Computed Source Code.
+ *
+ * Since the `WP_Token_Map` is designed for relatively static lookups, it can be
+ * advantageous to precompute the values and instantiate a table that has already
+ * sorted and grouped the tokens and built the lookup strings.
+ *
+ * This can be done with `WP_Token_Map::precomputed_php_source_table()`.
+ *
+ * Note that if there is a leading character that all tokens need, such as `&` for
+ * HTML named character references, it can be beneficial to exclude this from the
+ * token map. Instead, find occurrences of the leading character and then use the
+ * token map to see if the following characters complete the token.
+ *
+ * Example:
+ *
+ *     $map = WP_Token_Map::from_array( array( 'simple_smile:' => '🙂', 'sob:' => '😭', 'soba:' => '🍜' ) );
+ *     echo $map->precomputed_php_source_table();
+ *     // Output
+ *     WP_Token_Map::from_precomputed_table(
+ *         array(
+ *             "storage_version" => "6.6.0",
+ *             "key_length" => 2,
+ *             "groups" => "si\x00so\x00",
+ *             "long_words" => array(
+ *                 // simple_smile:[🙂].
+ *                 "\x0bmple_smile:\x04🙂",
+ *                 // soba:[🍜] sob:[😭].
+ *                 "\x03ba:\x04🍜\x02b:\x04😭",
+ *             ),
+ *             "short_words" => "",
+ *             "short_mappings" => array()
+ *         }
+ *     );
+ *
+ * This precomputed value can be stored directly in source code and will skip the
+ * startup cost of generating the lookup strings. See `$html5_named_character_entities`.
+ *
+ * Note that any updates to the precomputed format should update the storage version
+ * constant. It would also be best to provide an update function to take older known
+ * versions and upgrade them in place when loading into `from_precomputed_table()`.
+ *
+ * ## Future Direction.
+ *
+ * It may be viable to dynamically increase the length limits such that there's no need to impose them.
+ * The limit appears because of the packing structure, which indicates how many bytes each segment of
+ * text in the lookup tables spans. If, however, care were taken to track the longest word length, then
+ * the packing structure could change its representation to allow for that. Each additional byte storing
+ * length, however, increases the memory overhead and lookup runtime.
+ *
+ * An alternative approach could be to borrow the UTF-8 variable-length encoding and store lengths of less
+ * than 127 as a single byte with the high bit unset, storing longer lengths as the combination of
+ * continuation bytes.
+ *
+ * Since it has not been shown during the development of this class that longer strings are required, this
+ * update is deferred until such a need is clear.
+ *
+ * @since 6.6.0
+ */
+class Gutenberg_Token_Map_6_7 {
+	/**
+	 * Denotes the version of the code which produces pre-computed source tables.
+	 *
+	 * This version will be used not only to verify pre-computed data, but also
+	 * to upgrade pre-computed data from older versions. Choosing a name that
+	 * corresponds to the WordPress release will help people identify where an
+	 * old copy of data came from.
+	 */
+	const STORAGE_VERSION = '6.6.0-trunk';
+
+	/**
+	 * Maximum length for each key and each transformed value in the table (in bytes).
+	 *
+	 * @since 6.6.0
+	 */
+	const MAX_LENGTH = 256;
+
+	/**
+	 * How many bytes of each key are used to form a group key for lookup.
+	 * This also determines whether a word is considered short or long.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var int
+	 */
+	private $key_length = 2;
+
+	/**
+	 * Stores an optimized form of the word set, where words are grouped
+	 * by a prefix of the `$key_length` and then collapsed into a string.
+	 *
+	 * In each group, the keys and lookups form a packed data structure.
+	 * The keys in the string are stripped of their "group key," which is
+	 * the prefix of length `$this->key_length` shared by all of the items
+	 * in the group. Each word in the string is prefixed by a single byte
+	 * whose raw unsigned integer value represents how many bytes follow.
+	 *
+	 *     ┌────────────────┬───────────────┬─────────────────┬────────┐
+	 *     │ Length of rest │ Rest of key   │ Length of value │ Value  │
+	 *     │ of key (bytes) │               │ (bytes)         │        │
+	 *     ├────────────────┼───────────────┼─────────────────┼────────┤
+	 *     │ 0x08           │ nterDot;      │ 0x02            │ ·      │
+	 *     └────────────────┴───────────────┴─────────────────┴────────┘
+	 *
+	 * In this example, the key `CenterDot;` has a group key `Ce`, leaving
+	 * eight bytes for the rest of the key, `nterDot;`, and two bytes for
+	 * the transformed value `·` (or U+B7 or "\xC2\xB7").
+	 *
+	 * Example:
+	 *
+	 *    // Stores array( 'CenterDot;' => '·', 'Cedilla;' => '¸' ).
+	 *    $groups      = "Ce\x00";
+	 *    $large_words = array( "\x08nterDot;\x02·\x06dilla;\x02¸" )
+	 *
+	 * The prefixes appear in the `$groups` string, each followed by a null
+	 * byte. This makes for quick lookup of where in the group string the key
+	 * is found, and then a simple division converts that offset into the index
+	 * in the `$large_words` array where the group string is to be found.
+	 *
+	 * This lookup data structure is designed to optimize cache locality and
+	 * minimize indirect memory reads when matching strings in the set.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var array
+	 */
+	private $large_words = array();
+
+	/**
+	 * Stores the group keys for sequential string lookup.
+	 *
+	 * The offset into this string where the group key appears corresponds with the index
+	 * into the group array where the rest of the group string appears. This is an optimization
+	 * to improve cache locality while searching and minimize indirect memory accesses.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var string
+	 */
+	private $groups = '';
+
+	/**
+	 * Stores an optimized row of small words, where every entry is
+	 * `$this->key_size + 1` bytes long and zero-extended.
+	 *
+	 * This packing allows for direct lookup of a short word followed
+	 * by the null byte, if extended to `$this->key_size + 1`.
+	 *
+	 * Example:
+	 *
+	 *     // Stores array( 'GT', 'LT', 'gt', 'lt' ).
+	 *     "GT\x00LT\x00gt\x00lt\x00"
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var string
+	 */
+	private $small_words = '';
+
+	/**
+	 * Replacements for the small words, in the same order they appear.
+	 *
+	 * With the position of a small word it's possible to index the translation
+	 * directly, as its position in the `$small_words` string corresponds to
+	 * the index of the replacement in the `$small_mapping` array.
+	 *
+	 * Example:
+	 *
+	 *     array( '>', '<', '>', '<' )
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var string[]
+	 */
+	private $small_mappings = array();
+
+	/**
+	 * Create a token map using an associative array of key/value pairs as the input.
+	 *
+	 * Example:
+	 *
+	 *     $smilies = WP_Token_Map::from_array( array(
+	 *          '8O' => '😯',
+	 *          ':(' => '🙁',
+	 *          ':)' => '🙂',
+	 *          ':?' => '😕',
+	 *       ) );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $mappings   The keys transform into the values, both are strings.
+	 * @param int   $key_length Determines the group key length. Leave at the default value
+	 *                          of 2 unless there's an empirical reason to change it.
+	 *
+	 * @return WP_Token_Map|null Token map, unless unable to create it.
+	 */
+	public static function from_array( array $mappings, int $key_length = 2 ): ?WP_Token_Map {
+		$map             = new WP_Token_Map();
+		$map->key_length = $key_length;
+
+		// Start by grouping words.
+
+		$groups = array();
+		$shorts = array();
+		foreach ( $mappings as $word => $mapping ) {
+			if (
+				self::MAX_LENGTH <= strlen( $word ) ||
+				self::MAX_LENGTH <= strlen( $mapping )
+			) {
+				_doing_it_wrong(
+					__METHOD__,
+					sprintf(
+						/* translators: 1: maximum byte length (a count) */
+						__( 'Token Map tokens and substitutions must all be shorter than %1$d bytes.' ),
+						self::MAX_LENGTH
+					),
+					'6.6.0'
+				);
+				return null;
+			}
+
+			$length = strlen( $word );
+
+			if ( $key_length >= $length ) {
+				$shorts[] = $word;
+			} else {
+				$group = substr( $word, 0, $key_length );
+
+				if ( ! isset( $groups[ $group ] ) ) {
+					$groups[ $group ] = array();
+				}
+
+				$groups[ $group ][] = array( substr( $word, $key_length ), $mapping );
+			}
+		}
+
+		/*
+		 * Sort the words to ensure that no smaller substring of a match masks the full match.
+		 * For example, `Cap` should not match before `CapitalDifferentialD`.
+		 */
+		usort( $shorts, 'WP_Token_Map::longest_first_then_alphabetical' );
+		foreach ( $groups as $group_key => $group ) {
+			usort(
+				$groups[ $group_key ],
+				static function ( array $a, array $b ): int {
+					return self::longest_first_then_alphabetical( $a[0], $b[0] );
+				}
+			);
+		}
+
+		// Finally construct the optimized lookups.
+
+		foreach ( $shorts as $word ) {
+			$map->small_words     .= str_pad( $word, $key_length + 1, "\x00", STR_PAD_RIGHT );
+			$map->small_mappings[] = $mappings[ $word ];
+		}
+
+		$group_keys = array_keys( $groups );
+		sort( $group_keys );
+
+		foreach ( $group_keys as $group ) {
+			$map->groups .= "{$group}\x00";
+
+			$group_string = '';
+
+			foreach ( $groups[ $group ] as $group_word ) {
+				list( $word, $mapping ) = $group_word;
+
+				$word_length    = pack( 'C', strlen( $word ) );
+				$mapping_length = pack( 'C', strlen( $mapping ) );
+				$group_string  .= "{$word_length}{$word}{$mapping_length}{$mapping}";
+			}
+
+			$map->large_words[] = $group_string;
+		}
+
+		return $map;
+	}
+
+	/**
+	 * Creates a token map from a pre-computed table.
+	 * This skips the initialization cost of generating the table.
+	 *
+	 * This function should only be used to load data created with
+	 * WP_Token_Map::precomputed_php_source_tag().
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param array $state {
+	 *     Stores pre-computed state for directly loading into a Token Map.
+	 *
+	 *     @type string $storage_version Which version of the code produced this state.
+	 *     @type int    $key_length      Group key length.
+	 *     @type string $groups          Group lookup index.
+	 *     @type array  $large_words     Large word groups and packed strings.
+	 *     @type string $small_words     Small words packed string.
+	 *     @type array  $small_mappings  Small word mappings.
+	 * }
+	 *
+	 * @return WP_Token_Map Map with precomputed data loaded.
+	 */
+	public static function from_precomputed_table( $state ): ?WP_Token_Map {
+		$has_necessary_state = isset(
+			$state['storage_version'],
+			$state['key_length'],
+			$state['groups'],
+			$state['large_words'],
+			$state['small_words'],
+			$state['small_mappings']
+		);
+
+		if ( ! $has_necessary_state ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Missing required inputs to pre-computed WP_Token_Map.' ),
+				'6.6.0'
+			);
+			return null;
+		}
+
+		if ( self::STORAGE_VERSION !== $state['storage_version'] ) {
+			_doing_it_wrong(
+				__METHOD__,
+				/* translators: 1: version string, 2: version string. */
+				sprintf( __( 'Loaded version \'%1$s\' incompatible with expected version \'%2$s\'.' ), $state['storage_version'], self::STORAGE_VERSION ),
+				'6.6.0'
+			);
+			return null;
+		}
+
+		$map = new WP_Token_Map();
+
+		$map->key_length     = $state['key_length'];
+		$map->groups         = $state['groups'];
+		$map->large_words    = $state['large_words'];
+		$map->small_words    = $state['small_words'];
+		$map->small_mappings = $state['small_mappings'];
+
+		return $map;
+	}
+
+	/**
+	 * Indicates if a given word is a lookup key in the map.
+	 *
+	 * Example:
+	 *
+	 *     true  === $smilies->contains( ':)' );
+	 *     false === $smilies->contains( 'simile' );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $word             Determine if this word is a lookup key in the map.
+	 * @param string $case_sensitivity Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
+	 * @return bool Whether there's an entry for the given word in the map.
+	 */
+	public function contains( string $word, string $case_sensitivity = 'case-sensitive' ): bool {
+		$ignore_case = 'ascii-case-insensitive' === $case_sensitivity;
+
+		if ( $this->key_length >= strlen( $word ) ) {
+			if ( 0 === strlen( $this->small_words ) ) {
+				return false;
+			}
+
+			$term    = str_pad( $word, $this->key_length + 1, "\x00", STR_PAD_RIGHT );
+			$word_at = $ignore_case ? stripos( $this->small_words, $term ) : strpos( $this->small_words, $term );
+			if ( false === $word_at ) {
+				return false;
+			}
+
+			return true;
+		}
+
+		$group_key = substr( $word, 0, $this->key_length );
+		$group_at  = $ignore_case ? stripos( $this->groups, $group_key ) : strpos( $this->groups, $group_key );
+		if ( false === $group_at ) {
+			return false;
+		}
+		$group        = $this->large_words[ $group_at / ( $this->key_length + 1 ) ];
+		$group_length = strlen( $group );
+		$slug         = substr( $word, $this->key_length );
+		$length       = strlen( $slug );
+		$at           = 0;
+
+		while ( $at < $group_length ) {
+			$token_length   = unpack( 'C', $group[ $at++ ] )[1];
+			$token_at       = $at;
+			$at            += $token_length;
+			$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
+			$mapping_at     = $at;
+
+			if ( $token_length === $length && 0 === substr_compare( $group, $slug, $token_at, $token_length, $ignore_case ) ) {
+				return true;
+			}
+
+			$at = $mapping_at + $mapping_length;
+		}
+
+		return false;
+	}
+
+	/**
+	 * If the text starting at a given offset is a lookup key in the map,
+	 * return the corresponding transformation from the map, else `false`.
+	 *
+	 * This function returns the translated string, but accepts an optional
+	 * parameter `$matched_token_byte_length`, which communicates how many
+	 * bytes long the lookup key was, if it found one. This can be used to
+	 * advance a cursor in calling code if a lookup key was found.
+	 *
+	 * Example:
+	 *
+	 *     false === $smilies->read_token( 'Not sure :?.', 0, $token_byte_length );
+	 *     '😕'  === $smilies->read_token( 'Not sure :?.', 9, $token_byte_length );
+	 *     2     === $token_byte_length;
+	 *
+	 * Example:
+	 *
+	 *     while ( $at < strlen( $input ) ) {
+	 *         $next_at = strpos( $input, ':', $at );
+	 *         if ( false === $next_at ) {
+	 *             break;
+	 *         }
+	 *
+	 *         $smily = $smilies->read_token( $input, $next_at, $token_byte_length );
+	 *         if ( false === $next_at ) {
+	 *             ++$at;
+	 *             continue;
+	 *         }
+	 *
+	 *         $prefix  = substr( $input, $at, $next_at - $at );
+	 *         $at     += $token_byte_length;
+	 *         $output .= "{$prefix}{$smily}";
+	 *     }
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string   $text                       String in which to search for a lookup key.
+	 * @param int      $offset                     Optional. How many bytes into the string where the lookup key ought to start. Default 0.
+	 * @param int|null &$matched_token_byte_length Optional. Holds byte-length of found token matched, otherwise not set. Default null.
+	 * @param string   $case_sensitivity           Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
+	 *
+	 * @return string|null Mapped value of lookup key if found, otherwise `null`.
+	 */
+	public function read_token( string $text, int $offset = 0, &$matched_token_byte_length = null, $case_sensitivity = 'case-sensitive' ): ?string {
+		$ignore_case = 'ascii-case-insensitive' === $case_sensitivity;
+		$text_length = strlen( $text );
+
+		// Search for a long word first, if the text is long enough, and if that fails, a short one.
+		if ( $text_length > $this->key_length ) {
+			$group_key = substr( $text, $offset, $this->key_length );
+
+			$group_at = $ignore_case ? stripos( $this->groups, $group_key ) : strpos( $this->groups, $group_key );
+			if ( false === $group_at ) {
+				// Perhaps a short word then.
+				return strlen( $this->small_words ) > 0
+					? $this->read_small_token( $text, $offset, $matched_token_byte_length, $case_sensitivity )
+					: null;
+			}
+
+			$group        = $this->large_words[ $group_at / ( $this->key_length + 1 ) ];
+			$group_length = strlen( $group );
+			$at           = 0;
+			while ( $at < $group_length ) {
+				$token_length   = unpack( 'C', $group[ $at++ ] )[1];
+				$token          = substr( $group, $at, $token_length );
+				$at            += $token_length;
+				$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
+				$mapping_at     = $at;
+
+				if ( 0 === substr_compare( $text, $token, $offset + $this->key_length, $token_length, $ignore_case ) ) {
+					$matched_token_byte_length = $this->key_length + $token_length;
+					return substr( $group, $mapping_at, $mapping_length );
+				}
+
+				$at = $mapping_at + $mapping_length;
+			}
+		}
+
+		// Perhaps a short word then.
+		return strlen( $this->small_words ) > 0
+			? $this->read_small_token( $text, $offset, $matched_token_byte_length, $case_sensitivity )
+			: null;
+	}
+
+	/**
+	 * Finds a match for a short word at the index.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string   $text                       String in which to search for a lookup key.
+	 * @param int      $offset                     Optional. How many bytes into the string where the lookup key ought to start. Default 0.
+	 * @param int|null &$matched_token_byte_length Optional. Holds byte-length of found lookup key if matched, otherwise not set. Default null.
+	 * @param string   $case_sensitivity           Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
+	 *
+	 * @return string|null Mapped value of lookup key if found, otherwise `null`.
+	 */
+	private function read_small_token( string $text, int $offset = 0, &$matched_token_byte_length = null, $case_sensitivity = 'case-sensitive' ): ?string {
+		$ignore_case  = 'ascii-case-insensitive' === $case_sensitivity;
+		$small_length = strlen( $this->small_words );
+		$search_text  = substr( $text, $offset, $this->key_length );
+		if ( $ignore_case ) {
+			$search_text = strtoupper( $search_text );
+		}
+		$starting_char = $search_text[0];
+
+		$at = 0;
+		while ( $at < $small_length ) {
+			if (
+				$starting_char !== $this->small_words[ $at ] &&
+				( ! $ignore_case || strtoupper( $this->small_words[ $at ] ) !== $starting_char )
+			) {
+				$at += $this->key_length + 1;
+				continue;
+			}
+
+			for ( $adjust = 1; $adjust < $this->key_length; $adjust++ ) {
+				if ( "\x00" === $this->small_words[ $at + $adjust ] ) {
+					$matched_token_byte_length = $adjust;
+					return $this->small_mappings[ $at / ( $this->key_length + 1 ) ];
+				}
+
+				if (
+					$search_text[ $adjust ] !== $this->small_words[ $at + $adjust ] &&
+					( ! $ignore_case || strtoupper( $this->small_words[ $at + $adjust ] !== $search_text[ $adjust ] ) )
+				) {
+					$at += $this->key_length + 1;
+					continue 2;
+				}
+			}
+
+			$matched_token_byte_length = $adjust;
+			return $this->small_mappings[ $at / ( $this->key_length + 1 ) ];
+		}
+
+		return null;
+	}
+
+	/**
+	 * Exports the token map into an associate array of key/value pairs.
+	 *
+	 * Example:
+	 *
+	 *     $smilies->to_array() === array(
+	 *         '8O' => '😯',
+	 *         ':(' => '🙁',
+	 *         ':)' => '🙂',
+	 *         ':?' => '😕',
+	 *     );
+	 *
+	 * @return array The lookup key/substitution values as an associate array.
+	 */
+	public function to_array(): array {
+		$tokens = array();
+
+		$at            = 0;
+		$small_mapping = 0;
+		$small_length  = strlen( $this->small_words );
+		while ( $at < $small_length ) {
+			$key            = rtrim( substr( $this->small_words, $at, $this->key_length + 1 ), "\x00" );
+			$value          = $this->small_mappings[ $small_mapping++ ];
+			$tokens[ $key ] = $value;
+
+			$at += $this->key_length + 1;
+		}
+
+		foreach ( $this->large_words as $index => $group ) {
+			$prefix       = substr( $this->groups, $index * ( $this->key_length + 1 ), 2 );
+			$group_length = strlen( $group );
+			$at           = 0;
+			while ( $at < $group_length ) {
+				$length = unpack( 'C', $group[ $at++ ] )[1];
+				$key    = $prefix . substr( $group, $at, $length );
+
+				$at    += $length;
+				$length = unpack( 'C', $group[ $at++ ] )[1];
+				$value  = substr( $group, $at, $length );
+
+				$tokens[ $key ] = $value;
+				$at            += $length;
+			}
+		}
+
+		return $tokens;
+	}
+
+	/**
+	 * Export the token map for quick loading in PHP source code.
+	 *
+	 * This function has a specific purpose, to make loading of static token maps fast.
+	 * It's used to ensure that the HTML character reference lookups add a minimal cost
+	 * to initializing the PHP process.
+	 *
+	 * Example:
+	 *
+	 *     echo $smilies->precomputed_php_source_table();
+	 *
+	 *     // Output.
+	 *     WP_Token_Map::from_precomputed_table(
+	 *         array(
+	 *             "storage_version" => "6.6.0",
+	 *             "key_length" => 2,
+	 *             "groups" => "",
+	 *             "long_words" => array(),
+	 *             "small_words" => "8O\x00:)\x00:(\x00:?\x00",
+	 *             "small_mappings" => array( "😯", "🙂", "🙁", "😕" )
+	 *         )
+	 *     );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $indent Optional. Use this string for indentation, or rely on the default horizontal tab character. Default "\t".
+	 * @return string Value which can be pasted into a PHP source file for quick loading of table.
+	 */
+	public function precomputed_php_source_table( string $indent = "\t" ): string {
+		$i1 = $indent;
+		$i2 = $i1 . $indent;
+		$i3 = $i2 . $indent;
+
+		$class_version = self::STORAGE_VERSION;
+
+		$output  = self::class . "::from_precomputed_table(\n";
+		$output .= "{$i1}array(\n";
+		$output .= "{$i2}\"storage_version\" => \"{$class_version}\",\n";
+		$output .= "{$i2}\"key_length\" => {$this->key_length},\n";
+
+		$group_line = str_replace( "\x00", "\\x00", $this->groups );
+		$output    .= "{$i2}\"groups\" => \"{$group_line}\",\n";
+
+		$output .= "{$i2}\"large_words\" => array(\n";
+
+		$prefixes = explode( "\x00", $this->groups );
+		foreach ( $prefixes as $index => $prefix ) {
+			if ( '' === $prefix ) {
+				break;
+			}
+			$group        = $this->large_words[ $index ];
+			$group_length = strlen( $group );
+			$comment_line = "{$i3}//";
+			$data_line    = "{$i3}\"";
+			$at           = 0;
+			while ( $at < $group_length ) {
+				$token_length   = unpack( 'C', $group[ $at++ ] )[1];
+				$token          = substr( $group, $at, $token_length );
+				$at            += $token_length;
+				$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
+				$mapping        = substr( $group, $at, $mapping_length );
+				$at            += $mapping_length;
+
+				$token_digits   = str_pad( dechex( $token_length ), 2, '0', STR_PAD_LEFT );
+				$mapping_digits = str_pad( dechex( $mapping_length ), 2, '0', STR_PAD_LEFT );
+
+				$mapping = preg_replace_callback(
+					"~[\\x00-\\x1f\\x22\\x5c]~",
+					static function ( $match_result ) {
+						switch ( $match_result[0] ) {
+							case '"':
+								return '\\"';
+
+							case '\\':
+								return '\\\\';
+
+							default:
+								$hex = dechex( ord( $match_result[0] ) );
+								return "\\x{$hex}";
+						}
+					},
+					$mapping
+				);
+
+				$comment_line .= " {$prefix}{$token}[{$mapping}]";
+				$data_line    .= "\\x{$token_digits}{$token}\\x{$mapping_digits}{$mapping}";
+			}
+			$comment_line .= ".\n";
+			$data_line    .= "\",\n";
+
+			$output .= $comment_line;
+			$output .= $data_line;
+		}
+
+		$output .= "{$i2}),\n";
+
+		$small_words  = array();
+		$small_length = strlen( $this->small_words );
+		$at           = 0;
+		while ( $at < $small_length ) {
+			$small_words[] = substr( $this->small_words, $at, $this->key_length + 1 );
+			$at           += $this->key_length + 1;
+		}
+
+		$small_text = str_replace( "\x00", '\x00', implode( '', $small_words ) );
+		$output    .= "{$i2}\"small_words\" => \"{$small_text}\",\n";
+
+		$output .= "{$i2}\"small_mappings\" => array(\n";
+		foreach ( $this->small_mappings as $mapping ) {
+			$output .= "{$i3}\"{$mapping}\",\n";
+		}
+		$output .= "{$i2})\n";
+		$output .= "{$i1})\n";
+		$output .= ')';
+
+		return $output;
+	}
+
+	/**
+	 * Compares two strings, returning the longest, or whichever
+	 * is first alphabetically if they are the same length.
+	 *
+	 * This is an important sort when building the token map because
+	 * it should not form a match on a substring of a longer potential
+	 * match. For example, it should not detect `Cap` when matching
+	 * against the string `CapitalDifferentialD`.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $a First string to compare.
+	 * @param string $b Second string to compare.
+	 * @return int -1 or lower if `$a` is less than `$b`; 1 or greater if `$a` is greater than `$b`, and 0 if they are equal.
+	 */
+	private static function longest_first_then_alphabetical( string $a, string $b ): int {
+		if ( $a === $b ) {
+			return 0;
+		}
+
+		$length_a = strlen( $a );
+		$length_b = strlen( $b );
+
+		// Longer strings are less-than for comparison's sake.
+		if ( $length_a !== $length_b ) {
+			return $length_b - $length_a;
+		}
+
+		return strcmp( $a, $b );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
new file mode 100644
index 00000000000000..92673c0bf50f90
--- /dev/null
+++ b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
@@ -0,0 +1,256 @@
+<?php
+/**
+ * Templates registry functions.
+ *
+ * @package Gutenberg
+ * @since 6.7.0
+ */
+
+if ( ! class_exists( 'WP_Block_Templates_Registry' ) ) {
+	/**
+	 * Core class used for interacting with templates.
+	 *
+	 * @since 6.7.0
+	 */
+	final class WP_Block_Templates_Registry {
+		/**
+		 * Registered templates, as `$name => $instance` pairs.
+		 *
+		 * @since 6.7.0
+		 * @var WP_Block_Template[] $registered_block_templates Registered templates.
+		 */
+		private $registered_templates = array();
+
+		/**
+		 * Container for the main instance of the class.
+		 *
+		 * @since 6.7.0
+		 * @var WP_Block_Templates_Registry|null
+		 */
+		private static $instance = null;
+
+		/**
+		 * Registers a template.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @param array  $args          Optional. Array of template arguments.
+		 * @return WP_Block_Template|WP_Error The registered template on success, or WP_Error on failure.
+		 */
+		public function register( $template_name, $args = array() ) {
+
+			$template = null;
+
+			$error_message = '';
+			$error_code    = '';
+			if ( ! is_string( $template_name ) ) {
+				$error_message = __( 'Template names must be strings.', 'gutenberg' );
+				$error_code    = 'template_name_no_string';
+			} elseif ( preg_match( '/[A-Z]+/', $template_name ) ) {
+				$error_message = __( 'Template names must not contain uppercase characters.', 'gutenberg' );
+				$error_code    = 'template_name_no_uppercase';
+			} elseif ( ! preg_match( '/^[a-z0-9-]+\/\/[a-z0-9-]+$/', $template_name ) ) {
+				$error_message = __( 'Template names must contain a namespace prefix. Example: my-plugin//my-custom-template', 'gutenberg' );
+				$error_code    = 'template_no_prefix';
+			} elseif ( $this->is_registered( $template_name ) ) {
+				/* translators: %s: Template name. */
+				$error_message = sprintf( __( 'Template "%s" is already registered.', 'gutenberg' ), $template_name );
+				$error_code    = 'template_already_registered';
+			}
+
+			if ( $error_message ) {
+				_doing_it_wrong(
+					__METHOD__,
+					$error_message,
+					'6.7.0'
+				);
+				return new WP_Error( $error_code, $error_message );
+			}
+
+			if ( ! $template ) {
+				$theme_name             = get_stylesheet();
+				list( $plugin, $slug )  = explode( '//', $template_name );
+				$default_template_types = get_default_block_template_types();
+
+				$template              = new WP_Block_Template();
+				$template->id          = $theme_name . '//' . $slug;
+				$template->theme       = $theme_name;
+				$template->plugin      = $plugin;
+				$template->author      = null;
+				$template->content     = isset( $args['content'] ) ? $args['content'] : '';
+				$template->source      = 'plugin';
+				$template->slug        = $slug;
+				$template->type        = 'wp_template';
+				$template->title       = isset( $args['title'] ) ? $args['title'] : $template_name;
+				$template->description = isset( $args['description'] ) ? $args['description'] : '';
+				$template->status      = 'publish';
+				$template->origin      = 'plugin';
+				$template->is_custom   = ! isset( $default_template_types[ $template_name ] );
+				$template->post_types  = isset( $args['post_types'] ) ? $args['post_types'] : array();
+			}
+
+			$this->registered_templates[ $template_name ] = $template;
+
+			return $template;
+		}
+
+		/**
+		 * Retrieves all registered templates.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @return WP_Block_Template[] Associative array of `$template_name => $template` pairs.
+		 */
+		public function get_all_registered() {
+			return $this->registered_templates;
+		}
+
+		/**
+		 * Retrieves a registered template by its name.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @return WP_Block_Template|null The registered template, or null if it is not registered.
+		 */
+		public function get_registered( $template_name ) {
+			if ( ! $this->is_registered( $template_name ) ) {
+				return null;
+			}
+
+			return $this->registered_templates[ $template_name ];
+		}
+
+		/**
+		 * Retrieves a registered template by its slug.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_slug Slug of the template.
+		 * @return WP_Block_Template|null The registered template, or null if it is not registered.
+		 */
+		public function get_by_slug( $template_slug ) {
+			$all_templates = $this->get_all_registered();
+
+			if ( ! $all_templates ) {
+				return null;
+			}
+
+			foreach ( $all_templates as $template ) {
+				if ( $template->slug === $template_slug ) {
+					return $template;
+				}
+			}
+
+			return null;
+		}
+
+		/**
+		 * Retrieves registered templates matching a query.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param array  $query {
+		 *     Arguments to retrieve templates. Optional, empty by default.
+		 *
+		 *     @type string[] $slug__in     List of slugs to include.
+		 *     @type string[] $slug__not_in List of slugs to skip.
+		 *     @type string   $post_type    Post type to get the templates for.
+		 * }
+		 */
+		public function get_by_query( $query = array() ) {
+			$all_templates = $this->get_all_registered();
+
+			if ( ! $all_templates ) {
+				return array();
+			}
+
+			$query            = wp_parse_args(
+				$query,
+				array(
+					'slug__in'     => array(),
+					'slug__not_in' => array(),
+					'post_type'    => '',
+				)
+			);
+			$slugs_to_include = $query['slug__in'];
+			$slugs_to_skip    = $query['slug__not_in'];
+			$post_type        = $query['post_type'];
+
+			$matching_templates = array();
+			foreach ( $all_templates as $template_name => $template ) {
+				if ( $slugs_to_include && ! in_array( $template->slug, $slugs_to_include, true ) ) {
+					continue;
+				}
+
+				if ( $slugs_to_skip && in_array( $template->slug, $slugs_to_skip, true ) ) {
+					continue;
+				}
+
+				if ( $post_type && ! in_array( $post_type, $template->post_types, true ) ) {
+					continue;
+				}
+
+				$matching_templates[ $template_name ] = $template;
+			}
+
+			return $matching_templates;
+		}
+
+		/**
+		 * Checks if a template is registered.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name.
+		 * @return bool True if the template is registered, false otherwise.
+		 */
+		public function is_registered( $template_name ) {
+			return isset( $this->registered_templates[ $template_name ] );
+		}
+
+		/**
+		 * Unregisters a template.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @param string $template_name Template name including namespace.
+		 * @return WP_Block_Template|WP_Error The unregistered template on success, or WP_Error on failure.
+		 */
+		public function unregister( $template_name ) {
+			if ( ! $this->is_registered( $template_name ) ) {
+				_doing_it_wrong(
+					__METHOD__,
+					/* translators: %s: Template name. */
+					sprintf( __( 'Template "%s" is not registered.', 'gutenberg' ), $template_name ),
+					'6.7.0'
+				);
+				/* translators: %s: Template name. */
+				return new WP_Error( 'template_not_registered', __( 'Template "%s" is not registered.', 'gutenberg' ) );
+			}
+
+			$unregistered_template = $this->registered_templates[ $template_name ];
+			unset( $this->registered_templates[ $template_name ] );
+
+			return $unregistered_template;
+		}
+
+		/**
+		 * Utility method to retrieve the main instance of the class.
+		 *
+		 * The instance will be created if it does not exist yet.
+		 *
+		 * @since 6.7.0
+		 *
+		 * @return WP_Block_Templates_Registry The main instance.
+		 */
+		public static function get_instance() {
+			if ( null === self::$instance ) {
+				self::$instance = new self();
+			}
+
+			return self::$instance;
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/compat.php b/lib/compat/wordpress-6.7/compat.php
new file mode 100644
index 00000000000000..33c123a14860d2
--- /dev/null
+++ b/lib/compat/wordpress-6.7/compat.php
@@ -0,0 +1,126 @@
+<?php
+/**
+ * WordPress 6.7 compatibility functions.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Hooks into `get_block_templates` so templates from the registry are also returned, as long as there
+ * isn't a theme template with the same slug.
+ *
+ * @param WP_Block_Template[] $query_result Array of found block templates.
+ * @param array               $query {
+ *     Arguments to retrieve templates. All arguments are optional.
+ *
+ *     @type string[] $slug__in  List of slugs to include.
+ *     @type int      $wp_id     Post ID of customized template.
+ *     @type string   $area      A 'wp_template_part_area' taxonomy value to filter by (for 'wp_template_part' template type only).
+ *     @type string   $post_type Post type to get the templates for.
+ * }
+ * @param string              $template_type wp_template or wp_template_part.
+ * @return WP_Block_Template[] The same $query_result but might contain some additional templates from
+ * the registry.
+ */
+function _gutenberg_add_block_templates_from_registry( $query_result, $query, $template_type ) {
+	// Add `plugin` property to templates registered by a plugin.
+	foreach ( $query_result as $key => $value ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $query_result[ $key ]->slug );
+		if ( $registered_template ) {
+			$query_result[ $key ]->plugin      = $registered_template->plugin;
+			$query_result[ $key ]->origin      =
+				'theme' !== $query_result[ $key ]->origin && 'theme' !== $query_result[ $key ]->source ?
+				'plugin' :
+				$query_result[ $key ]->origin;
+			$query_result[ $key ]->title       =
+				empty( $query_result[ $key ]->title ) || $query_result[ $key ]->title === $query_result[ $key ]->slug ?
+				$registered_template->title : $query_result[ $key ]->title;
+			$query_result[ $key ]->description = empty( $query_result[ $key ]->description ) ? $registered_template->description : $query_result[ $key ]->description;
+		}
+	}
+
+	if ( ! isset( $query['wp_id'] ) ) {
+		// We need to unset the post_type query param because some templates
+		// would be excluded otherwise, like `page.html` when looking for
+		// `page` templates.
+		// See: https://github.com/WordPress/gutenberg/issues/65584
+		$template_files_query = $query;
+		unset( $template_files_query['post_type'] );
+		$template_files = _get_block_templates_files( $template_type, $template_files_query );
+
+		/*
+		 * Add templates registered in the template registry. Filtering out the ones which have a theme file.
+		 */
+		$registered_templates          = WP_Block_Templates_Registry::get_instance()->get_by_query( $query );
+		$matching_registered_templates = array_filter(
+			$registered_templates,
+			function ( $registered_template ) use ( $template_files ) {
+				foreach ( $template_files as $template_file ) {
+					if ( $template_file['slug'] === $registered_template->slug ) {
+						return false;
+					}
+				}
+				return true;
+			}
+		);
+		$query_result                  = array_merge( $query_result, $matching_registered_templates );
+	}
+
+	return $query_result;
+}
+add_filter( 'get_block_templates', '_gutenberg_add_block_templates_from_registry', 10, 3 );
+
+/**
+ * Hooks into `get_block_template` to add the `plugin` property when necessary.
+ *
+ * @param [WP_Block_Template|null] $block_template The found block template, or null if there isn’t one.
+ * @return [WP_Block_Template|null] The block template that was already found with the plugin property defined if it was registered by a plugin.
+ */
+function _gutenberg_add_block_template_plugin_attribute( $block_template ) {
+	if ( $block_template ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
+		if ( $registered_template ) {
+			$block_template->plugin      = $registered_template->plugin;
+			$block_template->origin      =
+				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
+				'plugin' :
+				$block_template->origin;
+			$block_template->title       = empty( $block_template->title ) || $block_template->title === $block_template->slug ? $registered_template->title : $block_template->title;
+			$block_template->description = empty( $block_template->description ) ? $registered_template->description : $block_template->description;
+		}
+	}
+
+	return $block_template;
+}
+add_filter( 'get_block_template', '_gutenberg_add_block_template_plugin_attribute', 10, 1 );
+
+/**
+ * Hooks into `get_block_file_template` so templates from the registry are also returned.
+ *
+ * @param WP_Block_Template|null $block_template The found block template, or null if there is none.
+ * @param string                 $id             Template unique identifier (example: 'theme_slug//template_slug').
+ * @return WP_Block_Template|null The block template that was already found or from the registry. In case the template was already found, add the necessary details from the registry.
+ */
+function _gutenberg_add_block_file_templates_from_registry( $block_template, $id ) {
+	if ( $block_template ) {
+		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
+		if ( $registered_template ) {
+			$block_template->plugin = $registered_template->plugin;
+			$block_template->origin =
+				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
+				'plugin' :
+				$block_template->origin;
+		}
+		return $block_template;
+	}
+
+	$parts = explode( '//', $id, 2 );
+
+	if ( count( $parts ) < 2 ) {
+		return $block_template;
+	}
+
+	list( , $slug ) = $parts;
+	return WP_Block_Templates_Registry::get_instance()->get_by_slug( $slug );
+}
+add_filter( 'get_block_file_template', '_gutenberg_add_block_file_templates_from_registry', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php
new file mode 100644
index 00000000000000..10f53fe82ce4e0
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php
@@ -0,0 +1,187 @@
+<?php
+/**
+ * HTML API: WP_HTML_Active_Formatting_Elements class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used by the HTML processor during HTML parsing
+ * for managing the stack of active formatting elements.
+ *
+ * This class is designed for internal use by the HTML processor.
+ *
+ * > Initially, the list of active formatting elements is empty.
+ * > It is used to handle mis-nested formatting element tags.
+ * >
+ * > The list contains elements in the formatting category, and markers.
+ * > The markers are inserted when entering applet, object, marquee,
+ * > template, td, th, and caption elements, and are used to prevent
+ * > formatting from "leaking" into applet, object, marquee, template,
+ * > td, th, and caption elements.
+ * >
+ * > In addition, each element in the list of active formatting elements
+ * > is associated with the token for which it was created, so that
+ * > further elements can be created for that token if necessary.
+ *
+ * @since 6.4.0
+ *
+ * @access private
+ *
+ * @see https://html.spec.whatwg.org/#list-of-active-formatting-elements
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Active_Formatting_Elements_6_7 {
+	/**
+	 * Holds the stack of active formatting element references.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var WP_HTML_Token[]
+	 */
+	private $stack = array();
+
+	/**
+	 * Reports if a specific node is in the stack of active formatting elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $token Look for this node in the stack.
+	 * @return bool Whether the referenced node is in the stack of active formatting elements.
+	 */
+	public function contains_node( Gutenberg_HTML_Token_6_7 $token ) {
+		foreach ( $this->walk_up() as $item ) {
+			if ( $token->bookmark_name === $item->bookmark_name ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns how many nodes are currently in the stack of active formatting elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return int How many node are in the stack of active formatting elements.
+	 */
+	public function count() {
+		return count( $this->stack );
+	}
+
+	/**
+	 * Returns the node at the end of the stack of active formatting elements,
+	 * if one exists. If the stack is empty, returns null.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return WP_HTML_Token|null Last node in the stack of active formatting elements, if one exists, otherwise null.
+	 */
+	public function current_node() {
+		$current_node = end( $this->stack );
+
+		return $current_node ? $current_node : null;
+	}
+
+	/**
+	 * Pushes a node onto the stack of active formatting elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#push-onto-the-list-of-active-formatting-elements
+	 *
+	 * @param WP_HTML_Token $token Push this node onto the stack.
+	 */
+	public function push( Gutenberg_HTML_Token_6_7 $token ) {
+		/*
+		 * > If there are already three elements in the list of active formatting elements after the last marker,
+		 * > if any, or anywhere in the list if there are no markers, that have the same tag name, namespace, and
+		 * > attributes as element, then remove the earliest such element from the list of active formatting
+		 * > elements. For these purposes, the attributes must be compared as they were when the elements were
+		 * > created by the parser; two elements have the same attributes if all their parsed attributes can be
+		 * > paired such that the two attributes in each pair have identical names, namespaces, and values
+		 * > (the order of the attributes does not matter).
+		 *
+		 * @todo Implement the "Noah's Ark clause" to only add up to three of any given kind of formatting elements to the stack.
+		 */
+		// > Add element to the list of active formatting elements.
+		$this->stack[] = $token;
+	}
+
+	/**
+	 * Removes a node from the stack of active formatting elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $token Remove this node from the stack, if it's there already.
+	 * @return bool Whether the node was found and removed from the stack of active formatting elements.
+	 */
+	public function remove_node( Gutenberg_HTML_Token_6_7 $token ) {
+		foreach ( $this->walk_up() as $position_from_end => $item ) {
+			if ( $token->bookmark_name !== $item->bookmark_name ) {
+				continue;
+			}
+
+			$position_from_start = $this->count() - $position_from_end - 1;
+			array_splice( $this->stack, $position_from_start, 1 );
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Steps through the stack of active formatting elements, starting with the
+	 * top element (added first) and walking downwards to the one added last.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $html = '<em><strong><a>We are here';
+	 *     foreach ( $stack->walk_down() as $node ) {
+	 *         echo "{$node->node_name} -> ";
+	 *     }
+	 *     > EM -> STRONG -> A ->
+	 *
+	 * To start with the most-recently added element and walk towards the top,
+	 * see WP_HTML_Active_Formatting_Elements::walk_up().
+	 *
+	 * @since 6.4.0
+	 */
+	public function walk_down() {
+		$count = count( $this->stack );
+
+		for ( $i = 0; $i < $count; $i++ ) {
+			yield $this->stack[ $i ];
+		}
+	}
+
+	/**
+	 * Steps through the stack of active formatting elements, starting with the
+	 * bottom element (added last) and walking upwards to the one added first.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $html = '<em><strong><a>We are here';
+	 *     foreach ( $stack->walk_up() as $node ) {
+	 *         echo "{$node->node_name} -> ";
+	 *     }
+	 *     > A -> STRONG -> EM ->
+	 *
+	 * To start with the first added element and walk towards the bottom,
+	 * see WP_HTML_Active_Formatting_Elements::walk_down().
+	 *
+	 * @since 6.4.0
+	 */
+	public function walk_up() {
+		for ( $i = count( $this->stack ) - 1; $i >= 0; $i-- ) {
+			yield $this->stack[ $i ];
+		}
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php
new file mode 100644
index 00000000000000..4ee369b795c84c
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * HTML API: WP_HTML_Attribute_Token class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.2.0
+ */
+
+/**
+ * Core class used by the HTML tag processor as a data structure for the attribute token,
+ * allowing to drastically improve performance.
+ *
+ * This class is for internal usage of the WP_HTML_Tag_Processor class.
+ *
+ * @access private
+ * @since 6.2.0
+ * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
+ *
+ * @see WP_HTML_Tag_Processor
+ */
+class Gutenberg_HTML_Attribute_Token_6_7 {
+	/**
+	 * Attribute name.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var string
+	 */
+	public $name;
+
+	/**
+	 * Attribute value.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int
+	 */
+	public $value_starts_at;
+
+	/**
+	 * How many bytes the value occupies in the input HTML.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int
+	 */
+	public $value_length;
+
+	/**
+	 * The string offset where the attribute name starts.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int
+	 */
+	public $start;
+
+	/**
+	 * Byte length of text spanning the attribute inside a tag.
+	 *
+	 * This span starts at the first character of the attribute name
+	 * and it ends after one of three cases:
+	 *
+	 *  - at the end of the attribute name for boolean attributes.
+	 *  - at the end of the value for unquoted attributes.
+	 *  - at the final single or double quote for quoted attributes.
+	 *
+	 * Example:
+	 *
+	 *     <div class="post">
+	 *          ------------ length is 12, including quotes
+	 *
+	 *     <input type="checked" checked id="selector">
+	 *                           ------- length is 6
+	 *
+	 *     <a rel=noopener>
+	 *        ------------ length is 11
+	 *
+	 * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
+	 *
+	 * @var int
+	 */
+	public $length;
+
+	/**
+	 * Whether the attribute is a boolean attribute with value `true`.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var bool
+	 */
+	public $is_true;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.2.0
+	 * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
+	 *
+	 * @param string $name         Attribute name.
+	 * @param int    $value_start  Attribute value.
+	 * @param int    $value_length Number of bytes attribute value spans.
+	 * @param int    $start        The string offset where the attribute name starts.
+	 * @param int    $length       Byte length of the entire attribute name or name and value pair expression.
+	 * @param bool   $is_true      Whether the attribute is a boolean attribute with true value.
+	 */
+	public function __construct( $name, $value_start, $value_length, $start, $length, $is_true ) {
+		$this->name            = $name;
+		$this->value_starts_at = $value_start;
+		$this->value_length    = $value_length;
+		$this->start           = $start;
+		$this->length          = $length;
+		$this->is_true         = $is_true;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php
new file mode 100644
index 00000000000000..c745904865b1f8
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php
@@ -0,0 +1,463 @@
+<?php
+
+/**
+ * HTML API: WP_HTML_Decoder class
+ *
+ * Decodes spans of raw text found inside HTML content.
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.6.0
+ */
+class Gutenberg_HTML_Decoder_6_7 {
+	/**
+	 * Indicates if an attribute value starts with a given raw string value.
+	 *
+	 * Use this method to determine if an attribute value starts with a given string, regardless
+	 * of how it might be encoded in HTML. For instance, `http:` could be represented as `http:`
+	 * or as `http&colon;` or as `&#x68;ttp:` or as `h&#116;tp&colon;`, or in many other ways.
+	 *
+	 * Example:
+	 *
+	 *     $value = 'http&colon;//wordpress.org/';
+	 *     true   === WP_HTML_Decoder::attribute_starts_with( $value, 'http:', 'ascii-case-insensitive' );
+	 *     false  === WP_HTML_Decoder::attribute_starts_with( $value, 'https:', 'ascii-case-insensitive' );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $haystack         String containing the raw non-decoded attribute value.
+	 * @param string $search_text      Does the attribute value start with this plain string.
+	 * @param string $case_sensitivity Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching.
+	 *                                 Default 'case-sensitive'.
+	 * @return bool Whether the attribute value starts with the given string.
+	 */
+	public static function attribute_starts_with( $haystack, $search_text, $case_sensitivity = 'case-sensitive' ): bool {
+		$search_length = strlen( $search_text );
+		$loose_case    = 'ascii-case-insensitive' === $case_sensitivity;
+		$haystack_end  = strlen( $haystack );
+		$search_at     = 0;
+		$haystack_at   = 0;
+
+		while ( $search_at < $search_length && $haystack_at < $haystack_end ) {
+			$chars_match = $loose_case
+				? strtolower( $haystack[ $haystack_at ] ) === strtolower( $search_text[ $search_at ] )
+				: $haystack[ $haystack_at ] === $search_text[ $search_at ];
+
+			$is_introducer = '&' === $haystack[ $haystack_at ];
+			$next_chunk    = $is_introducer
+				? self::read_character_reference( 'attribute', $haystack, $haystack_at, $token_length )
+				: null;
+
+			// If there's no character reference and the characters don't match, the match fails.
+			if ( null === $next_chunk && ! $chars_match ) {
+				return false;
+			}
+
+			// If there's no character reference but the character do match, then it could still match.
+			if ( null === $next_chunk && $chars_match ) {
+				++$haystack_at;
+				++$search_at;
+				continue;
+			}
+
+			// If there is a character reference, then the decoded value must exactly match what follows in the search string.
+			if ( 0 !== substr_compare( $search_text, $next_chunk, $search_at, strlen( $next_chunk ), $loose_case ) ) {
+				return false;
+			}
+
+			// The character reference matched, so continue checking.
+			$haystack_at += $token_length;
+			$search_at   += strlen( $next_chunk );
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns a string containing the decoded value of a given HTML text node.
+	 *
+	 * Text nodes appear in HTML DATA sections, which are the text segments inside
+	 * and around tags, excepting SCRIPT and STYLE elements (and some others),
+	 * whose inner text is not decoded. Use this function to read the decoded
+	 * value of such a text span in an HTML document.
+	 *
+	 * Example:
+	 *
+	 *     '“😄”' === WP_HTML_Decode::decode_text_node( '&#x93;&#x1f604;&#x94' );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $text Text containing raw and non-decoded text node to decode.
+	 * @return string Decoded UTF-8 value of given text node.
+	 */
+	public static function decode_text_node( $text ): string {
+		return static::decode( 'data', $text );
+	}
+
+	/**
+	 * Returns a string containing the decoded value of a given HTML attribute.
+	 *
+	 * Text found inside an HTML attribute has different parsing rules than for
+	 * text found inside other markup, or DATA segments. Use this function to
+	 * read the decoded value of an HTML string inside a quoted attribute.
+	 *
+	 * Example:
+	 *
+	 *     '“😄”' === WP_HTML_Decode::decode_attribute( '&#x93;&#x1f604;&#x94' );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param string $text Text containing raw and non-decoded attribute value to decode.
+	 * @return string Decoded UTF-8 value of given attribute value.
+	 */
+	public static function decode_attribute( $text ): string {
+		return static::decode( 'attribute', $text );
+	}
+
+	/**
+	 * Decodes a span of HTML text, depending on the context in which it's found.
+	 *
+	 * This is a low-level method; prefer calling WP_HTML_Decoder::decode_attribute() or
+	 * WP_HTML_Decoder::decode_text_node() instead. It's provided for cases where this
+	 * may be difficult to do from calling code.
+	 *
+	 * Example:
+	 *
+	 *     '©' = WP_HTML_Decoder::decode( 'data', '&copy;' );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @access private
+	 *
+	 * @param string $context `attribute` for decoding attribute values, `data` otherwise.
+	 * @param string $text    Text document containing span of text to decode.
+	 * @return string Decoded UTF-8 string.
+	 */
+	public static function decode( $context, $text ): string {
+		$decoded = '';
+		$end     = strlen( $text );
+		$at      = 0;
+		$was_at  = 0;
+
+		while ( $at < $end ) {
+			$next_character_reference_at = strpos( $text, '&', $at );
+			if ( false === $next_character_reference_at ) {
+				break;
+			}
+
+			$character_reference = self::read_character_reference( $context, $text, $next_character_reference_at, $token_length );
+			if ( isset( $character_reference ) ) {
+				$at       = $next_character_reference_at;
+				$decoded .= substr( $text, $was_at, $at - $was_at );
+				$decoded .= $character_reference;
+				$at      += $token_length;
+				$was_at   = $at;
+				continue;
+			}
+
+			++$at;
+		}
+
+		if ( 0 === $was_at ) {
+			return $text;
+		}
+
+		if ( $was_at < $end ) {
+			$decoded .= substr( $text, $was_at, $end - $was_at );
+		}
+
+		return $decoded;
+	}
+
+	/**
+	 * Attempt to read a character reference at the given location in a given string,
+	 * depending on the context in which it's found.
+	 *
+	 * If a character reference is found, this function will return the translated value
+	 * that the reference maps to. It will then set `$match_byte_length` the
+	 * number of bytes of input it read while consuming the character reference. This
+	 * gives calling code the opportunity to advance its cursor when traversing a string
+	 * and decoding.
+	 *
+	 * Example:
+	 *
+	 *     null === WP_HTML_Decoder::read_character_reference( 'attribute', 'Ships&hellip;', 0 );
+	 *     '…'  === WP_HTML_Decoder::read_character_reference( 'attribute', 'Ships&hellip;', 5, $token_length );
+	 *     8    === $token_length; // `&hellip;`
+	 *
+	 *     null === WP_HTML_Decoder::read_character_reference( 'attribute', '&notin', 0 );
+	 *     '∉'  === WP_HTML_Decoder::read_character_reference( 'attribute', '&notin;', 0, $token_length );
+	 *     7    === $token_length; // `&notin;`
+	 *
+	 *     '¬'  === WP_HTML_Decoder::read_character_reference( 'data', '&notin', 0, $token_length );
+	 *     4    === $token_length; // `&not`
+	 *     '∉'  === WP_HTML_Decoder::read_character_reference( 'data', '&notin;', 0, $token_length );
+	 *     7    === $token_length; // `&notin;`
+	 *
+	 * @since 6.6.0
+	 *
+	 * @global WP_Token_Map $html5_named_character_references
+	 *
+	 * @param string $context            `attribute` for decoding attribute values, `data` otherwise.
+	 * @param string $text               Text document containing span of text to decode.
+	 * @param int    $at                 Optional. Byte offset into text where span begins, defaults to the beginning (0).
+	 * @param int    &$match_byte_length Optional. Set to byte-length of character reference if provided and if a match
+	 *                                   is found, otherwise not set. Default null.
+	 * @return string|false Decoded character reference in UTF-8 if found, otherwise `false`.
+	 */
+	public static function read_character_reference( $context, $text, $at = 0, &$match_byte_length = null ) {
+		/**
+		 * Mappings for HTML5 named character references.
+		 *
+		 * @var WP_Token_Map $html5_named_character_references
+		 */
+		global $html5_named_character_references;
+
+		$length = strlen( $text );
+		if ( $at + 1 >= $length ) {
+			return null;
+		}
+
+		if ( '&' !== $text[ $at ] ) {
+			return null;
+		}
+
+		/*
+		 * Numeric character references.
+		 *
+		 * When truncated, these will encode the code point found by parsing the
+		 * digits that are available. For example, when `&#x1f170;` is truncated
+		 * to `&#x1f1` it will encode `DZ`. It does not:
+		 *  - know how to parse the original `🅰`.
+		 *  - fail to parse and return plaintext `&#x1f1`.
+		 *  - fail to parse and return the replacement character `�`
+		 */
+		if ( '#' === $text[ $at + 1 ] ) {
+			if ( $at + 2 >= $length ) {
+				return null;
+			}
+
+			/** Tracks inner parsing within the numeric character reference. */
+			$digits_at = $at + 2;
+
+			if ( 'x' === $text[ $digits_at ] || 'X' === $text[ $digits_at ] ) {
+				$numeric_base   = 16;
+				$numeric_digits = '0123456789abcdefABCDEF';
+				$max_digits     = 6; // &#x10FFFF;
+				++$digits_at;
+			} else {
+				$numeric_base   = 10;
+				$numeric_digits = '0123456789';
+				$max_digits     = 7; // &#1114111;
+			}
+
+			// Cannot encode invalid Unicode code points. Max is to U+10FFFF.
+			$zero_count    = strspn( $text, '0', $digits_at );
+			$digit_count   = strspn( $text, $numeric_digits, $digits_at + $zero_count );
+			$after_digits  = $digits_at + $zero_count + $digit_count;
+			$has_semicolon = $after_digits < $length && ';' === $text[ $after_digits ];
+			$end_of_span   = $has_semicolon ? $after_digits + 1 : $after_digits;
+
+			// `&#` or `&#x` without digits returns into plaintext.
+			if ( 0 === $digit_count && 0 === $zero_count ) {
+				return null;
+			}
+
+			// Whereas `&#` and only zeros is invalid.
+			if ( 0 === $digit_count ) {
+				$match_byte_length = $end_of_span - $at;
+				return '�';
+			}
+
+			// If there are too many digits then it's not worth parsing. It's invalid.
+			if ( $digit_count > $max_digits ) {
+				$match_byte_length = $end_of_span - $at;
+				return '�';
+			}
+
+			$digits     = substr( $text, $digits_at + $zero_count, $digit_count );
+			$code_point = intval( $digits, $numeric_base );
+
+			/*
+			 * Noncharacters, 0x0D, and non-ASCII-whitespace control characters.
+			 *
+			 * > A noncharacter is a code point that is in the range U+FDD0 to U+FDEF,
+			 * > inclusive, or U+FFFE, U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF,
+			 * > U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE,
+			 * > U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF,
+			 * > U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF, U+DFFFE,
+			 * > U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE, or U+10FFFF.
+			 *
+			 * A C0 control is a code point that is in the range of U+00 to U+1F,
+			 * but ASCII whitespace includes U+09, U+0A, U+0C, and U+0D.
+			 *
+			 * These characters are invalid but still decode as any valid character.
+			 * This comment is here to note and explain why there's no check to
+			 * remove these characters or replace them.
+			 *
+			 * @see https://infra.spec.whatwg.org/#noncharacter
+			 */
+
+			/*
+			 * Code points in the C1 controls area need to be remapped as if they
+			 * were stored in Windows-1252. Note! This transformation only happens
+			 * for numeric character references. The raw code points in the byte
+			 * stream are not translated.
+			 *
+			 * > If the number is one of the numbers in the first column of
+			 * > the following table, then find the row with that number in
+			 * > the first column, and set the character reference code to
+			 * > the number in the second column of that row.
+			 */
+			if ( $code_point >= 0x80 && $code_point <= 0x9F ) {
+				$windows_1252_mapping = array(
+					0x20AC, // 0x80 -> EURO SIGN (€).
+					0x81,   // 0x81 -> (no change).
+					0x201A, // 0x82 -> SINGLE LOW-9 QUOTATION MARK (‚).
+					0x0192, // 0x83 -> LATIN SMALL LETTER F WITH HOOK (ƒ).
+					0x201E, // 0x84 -> DOUBLE LOW-9 QUOTATION MARK („).
+					0x2026, // 0x85 -> HORIZONTAL ELLIPSIS (…).
+					0x2020, // 0x86 -> DAGGER (†).
+					0x2021, // 0x87 -> DOUBLE DAGGER (‡).
+					0x02C6, // 0x88 -> MODIFIER LETTER CIRCUMFLEX ACCENT (ˆ).
+					0x2030, // 0x89 -> PER MILLE SIGN (‰).
+					0x0160, // 0x8A -> LATIN CAPITAL LETTER S WITH CARON (Š).
+					0x2039, // 0x8B -> SINGLE LEFT-POINTING ANGLE QUOTATION MARK (‹).
+					0x0152, // 0x8C -> LATIN CAPITAL LIGATURE OE (Œ).
+					0x8D,   // 0x8D -> (no change).
+					0x017D, // 0x8E -> LATIN CAPITAL LETTER Z WITH CARON (Ž).
+					0x8F,   // 0x8F -> (no change).
+					0x90,   // 0x90 -> (no change).
+					0x2018, // 0x91 -> LEFT SINGLE QUOTATION MARK (‘).
+					0x2019, // 0x92 -> RIGHT SINGLE QUOTATION MARK (’).
+					0x201C, // 0x93 -> LEFT DOUBLE QUOTATION MARK (“).
+					0x201D, // 0x94 -> RIGHT DOUBLE QUOTATION MARK (”).
+					0x2022, // 0x95 -> BULLET (•).
+					0x2013, // 0x96 -> EN DASH (–).
+					0x2014, // 0x97 -> EM DASH (—).
+					0x02DC, // 0x98 -> SMALL TILDE (˜).
+					0x2122, // 0x99 -> TRADE MARK SIGN (™).
+					0x0161, // 0x9A -> LATIN SMALL LETTER S WITH CARON (š).
+					0x203A, // 0x9B -> SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (›).
+					0x0153, // 0x9C -> LATIN SMALL LIGATURE OE (œ).
+					0x9D,   // 0x9D -> (no change).
+					0x017E, // 0x9E -> LATIN SMALL LETTER Z WITH CARON (ž).
+					0x0178, // 0x9F -> LATIN CAPITAL LETTER Y WITH DIAERESIS (Ÿ).
+				);
+
+				$code_point = $windows_1252_mapping[ $code_point - 0x80 ];
+			}
+
+			$match_byte_length = $end_of_span - $at;
+			return self::code_point_to_utf8_bytes( $code_point );
+		}
+
+		/** Tracks inner parsing within the named character reference. */
+		$name_at = $at + 1;
+		// Minimum named character reference is two characters. E.g. `GT`.
+		if ( $name_at + 2 > $length ) {
+			return null;
+		}
+
+		$name_length = 0;
+		$replacement = $html5_named_character_references->read_token( $text, $name_at, $name_length );
+		if ( false === $replacement ) {
+			return null;
+		}
+
+		$after_name = $name_at + $name_length;
+
+		// If the match ended with a semicolon then it should always be decoded.
+		if ( ';' === $text[ $name_at + $name_length - 1 ] ) {
+			$match_byte_length = $after_name - $at;
+			return $replacement;
+		}
+
+		/*
+		 * At this point though there's a match for an entry in the named
+		 * character reference table but the match doesn't end in `;`.
+		 * It may be allowed if it's followed by something unambiguous.
+		 */
+		$ambiguous_follower = (
+			$after_name < $length &&
+			$name_at < $length &&
+			(
+				ctype_alnum( $text[ $after_name ] ) ||
+				'=' === $text[ $after_name ]
+			)
+		);
+
+		// It's non-ambiguous, safe to leave it in.
+		if ( ! $ambiguous_follower ) {
+			$match_byte_length = $after_name - $at;
+			return $replacement;
+		}
+
+		// It's ambiguous, which isn't allowed inside attributes.
+		if ( 'attribute' === $context ) {
+			return null;
+		}
+
+		$match_byte_length = $after_name - $at;
+		return $replacement;
+	}
+
+	/**
+	 * Encode a code point number into the UTF-8 encoding.
+	 *
+	 * This encoder implements the UTF-8 encoding algorithm for converting
+	 * a code point into a byte sequence. If it receives an invalid code
+	 * point it will return the Unicode Replacement Character U+FFFD `�`.
+	 *
+	 * Example:
+	 *
+	 *     '🅰' === WP_HTML_Decoder::code_point_to_utf8_bytes( 0x1f170 );
+	 *
+	 *     // Half of a surrogate pair is an invalid code point.
+	 *     '�' === WP_HTML_Decoder::code_point_to_utf8_bytes( 0xd83c );
+	 *
+	 * @since 6.6.0
+	 *
+	 * @see https://www.rfc-editor.org/rfc/rfc3629 For the UTF-8 standard.
+	 *
+	 * @param int $code_point Which code point to convert.
+	 * @return string Converted code point, or `�` if invalid.
+	 */
+	public static function code_point_to_utf8_bytes( $code_point ): string {
+		// Pre-check to ensure a valid code point.
+		if (
+			$code_point <= 0 ||
+			( $code_point >= 0xD800 && $code_point <= 0xDFFF ) ||
+			$code_point > 0x10FFFF
+		) {
+			return '�';
+		}
+
+		if ( $code_point <= 0x7F ) {
+			return chr( $code_point );
+		}
+
+		if ( $code_point <= 0x7FF ) {
+			$byte1 = chr( ( $code_point >> 6 ) | 0xC0 );
+			$byte2 = chr( $code_point & 0x3F | 0x80 );
+
+			return "{$byte1}{$byte2}";
+		}
+
+		if ( $code_point <= 0xFFFF ) {
+			$byte1 = chr( ( $code_point >> 12 ) | 0xE0 );
+			$byte2 = chr( ( $code_point >> 6 ) & 0x3F | 0x80 );
+			$byte3 = chr( $code_point & 0x3F | 0x80 );
+
+			return "{$byte1}{$byte2}{$byte3}";
+		}
+
+		// Any values above U+10FFFF are eliminated above in the pre-check.
+		$byte1 = chr( ( $code_point >> 18 ) | 0xF0 );
+		$byte2 = chr( ( $code_point >> 12 ) & 0x3F | 0x80 );
+		$byte3 = chr( ( $code_point >> 6 ) & 0x3F | 0x80 );
+		$byte4 = chr( $code_point & 0x3F | 0x80 );
+
+		return "{$byte1}{$byte2}{$byte3}{$byte4}";
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php
new file mode 100644
index 00000000000000..fd2b252432455e
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php
@@ -0,0 +1,598 @@
+<?php
+/**
+ * HTML API: WP_HTML_Open_Elements class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used by the HTML processor during HTML parsing
+ * for managing the stack of open elements.
+ *
+ * This class is designed for internal use by the HTML processor.
+ *
+ * > Initially, the stack of open elements is empty. The stack grows
+ * > downwards; the topmost node on the stack is the first one added
+ * > to the stack, and the bottommost node of the stack is the most
+ * > recently added node in the stack (notwithstanding when the stack
+ * > is manipulated in a random access fashion as part of the handling
+ * > for misnested tags).
+ *
+ * @since 6.4.0
+ *
+ * @access private
+ *
+ * @see https://html.spec.whatwg.org/#stack-of-open-elements
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Open_Elements_6_7 {
+	/**
+	 * Holds the stack of open element references.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var WP_HTML_Token[]
+	 */
+	public $stack = array();
+
+	/**
+	 * Whether a P element is in button scope currently.
+	 *
+	 * This class optimizes scope lookup by pre-calculating
+	 * this value when elements are added and removed to the
+	 * stack of open elements which might change its value.
+	 * This avoids frequent iteration over the stack.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var bool
+	 */
+	private $has_p_in_button_scope = false;
+
+	/**
+	 * A function that will be called when an item is popped off the stack of open elements.
+	 *
+	 * The function will be called with the popped item as its argument.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var Closure|null
+	 */
+	private $pop_handler = null;
+
+	/**
+	 * A function that will be called when an item is pushed onto the stack of open elements.
+	 *
+	 * The function will be called with the pushed item as its argument.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var Closure|null
+	 */
+	private $push_handler = null;
+
+	/**
+	 * Sets a pop handler that will be called when an item is popped off the stack of
+	 * open elements.
+	 *
+	 * The function will be called with the pushed item as its argument.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param Closure $handler The handler function.
+	 */
+	public function set_pop_handler( Closure $handler ): void {
+		$this->pop_handler = $handler;
+	}
+
+	/**
+	 * Sets a push handler that will be called when an item is pushed onto the stack of
+	 * open elements.
+	 *
+	 * The function will be called with the pushed item as its argument.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param Closure $handler The handler function.
+	 */
+	public function set_push_handler( Closure $handler ): void {
+		$this->push_handler = $handler;
+	}
+
+	/**
+	 * Reports if a specific node is in the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $token Look for this node in the stack.
+	 * @return bool Whether the referenced node is in the stack of open elements.
+	 */
+	public function contains_node( Gutenberg_HTML_Token_6_7 $token ): bool {
+		foreach ( $this->walk_up() as $item ) {
+			if ( $token->bookmark_name === $item->bookmark_name ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns how many nodes are currently in the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return int How many node are in the stack of open elements.
+	 */
+	public function count(): int {
+		return count( $this->stack );
+	}
+
+	/**
+	 * Returns the node at the end of the stack of open elements,
+	 * if one exists. If the stack is empty, returns null.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return WP_HTML_Token|null Last node in the stack of open elements, if one exists, otherwise null.
+	 */
+	public function current_node(): ?Gutenberg_HTML_Token_6_7 {
+		$current_node = end( $this->stack );
+
+		return $current_node ? $current_node : null;
+	}
+
+	/**
+	 * Indicates if the current node is of a given type or name.
+	 *
+	 * It's possible to pass either a node type or a node name to this function.
+	 * In the case there is no current element it will always return `false`.
+	 *
+	 * Example:
+	 *
+	 *     // Is the current node a text node?
+	 *     $stack->current_node_is( '#text' );
+	 *
+	 *     // Is the current node a DIV element?
+	 *     $stack->current_node_is( 'DIV' );
+	 *
+	 *     // Is the current node any element/tag?
+	 *     $stack->current_node_is( '#tag' );
+	 *
+	 * @see WP_HTML_Tag_Processor::get_token_type
+	 * @see WP_HTML_Tag_Processor::get_token_name
+	 *
+	 * @since 6.7.0
+	 *
+	 * @access private
+	 *
+	 * @param string $identity Check if the current node has this name or type (depending on what is provided).
+	 * @return bool Whether there is a current element that matches the given identity, whether a token name or type.
+	 */
+	public function current_node_is( string $identity ): bool {
+		$current_node = end( $this->stack );
+		if ( false === $current_node ) {
+			return false;
+		}
+
+		$current_node_name = $current_node->node_name;
+
+		return (
+			$current_node_name === $identity ||
+			( '#doctype' === $identity && 'html' === $current_node_name ) ||
+			( '#tag' === $identity && ctype_upper( $current_node_name ) )
+		);
+	}
+
+	/**
+	 * Returns whether an element is in a specific scope.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-the-specific-scope
+	 *
+	 * @param string   $tag_name         Name of tag check.
+	 * @param string[] $termination_list List of elements that terminate the search.
+	 * @return bool Whether the element was found in a specific scope.
+	 */
+	public function has_element_in_specific_scope( string $tag_name, $termination_list ): bool {
+		foreach ( $this->walk_up() as $node ) {
+			if ( $node->node_name === $tag_name ) {
+				return true;
+			}
+
+			if (
+				'(internal: H1 through H6 - do not use)' === $tag_name &&
+				in_array( $node->node_name, array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ), true )
+			) {
+				return true;
+			}
+
+			switch ( $node->node_name ) {
+				case 'HTML':
+					return false;
+			}
+
+			if ( in_array( $node->node_name, $termination_list, true ) ) {
+				return false;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns whether a particular element is in scope.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-scope
+	 *
+	 * @param string $tag_name Name of tag to check.
+	 * @return bool Whether given element is in scope.
+	 */
+	public function has_element_in_scope( string $tag_name ): bool {
+		return $this->has_element_in_specific_scope(
+			$tag_name,
+			array(
+
+				/*
+				 * Because it's not currently possible to encounter
+				 * one of the termination elements, they don't need
+				 * to be listed here. If they were, they would be
+				 * unreachable and only waste CPU cycles while
+				 * scanning through HTML.
+				 */
+			)
+		);
+	}
+
+	/**
+	 * Returns whether a particular element is in list item scope.
+	 *
+	 * @since 6.4.0
+	 * @since 6.5.0 Implemented: no longer throws on every invocation.
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-list-item-scope
+	 *
+	 * @param string $tag_name Name of tag to check.
+	 * @return bool Whether given element is in scope.
+	 */
+	public function has_element_in_list_item_scope( string $tag_name ): bool {
+		return $this->has_element_in_specific_scope(
+			$tag_name,
+			array(
+				// There are more elements that belong here which aren't currently supported.
+				'OL',
+				'UL',
+			)
+		);
+	}
+
+	/**
+	 * Returns whether a particular element is in button scope.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-button-scope
+	 *
+	 * @param string $tag_name Name of tag to check.
+	 * @return bool Whether given element is in scope.
+	 */
+	public function has_element_in_button_scope( string $tag_name ): bool {
+		return $this->has_element_in_specific_scope( $tag_name, array( 'BUTTON' ) );
+	}
+
+	/**
+	 * Returns whether a particular element is in table scope.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-table-scope
+	 *
+	 * @throws WP_HTML_Unsupported_Exception Always until this function is implemented.
+	 *
+	 * @param string $tag_name Name of tag to check.
+	 * @return bool Whether given element is in scope.
+	 */
+	public function has_element_in_table_scope( string $tag_name ): bool {
+		throw new Gutenberg_HTML_Unsupported_Exception_6_7( 'Cannot process elements depending on table scope.' );
+
+		return false; // The linter requires this unreachable code until the function is implemented and can return.
+	}
+
+	/**
+	 * Returns whether a particular element is in select scope.
+	 *
+	 * This test differs from the others like it, in that its rules are inverted.
+	 * Instead of arriving at a match when one of any tag in a termination group
+	 * is reached, this one terminates if any other tag is reached.
+	 *
+	 * > The stack of open elements is said to have a particular element in select scope when it has
+	 * > that element in the specific scope consisting of all element types except the following:
+	 * >   - optgroup in the HTML namespace
+	 * >   - option in the HTML namespace
+	 *
+	 * @since 6.4.0 Stub implementation (throws).
+	 * @since 6.7.0 Full implementation.
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-select-scope
+	 *
+	 * @param string $tag_name Name of tag to check.
+	 * @return bool Whether the given element is in SELECT scope.
+	 */
+	public function has_element_in_select_scope( string $tag_name ): bool {
+		foreach ( $this->walk_up() as $node ) {
+			if ( $node->node_name === $tag_name ) {
+				return true;
+			}
+
+			if (
+				'OPTION' !== $node->node_name &&
+				'OPTGROUP' !== $node->node_name
+			) {
+				return false;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Returns whether a P is in BUTTON scope.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#has-an-element-in-button-scope
+	 *
+	 * @return bool Whether a P is in BUTTON scope.
+	 */
+	public function has_p_in_button_scope(): bool {
+		return $this->has_p_in_button_scope;
+	}
+
+	/**
+	 * Pops a node off of the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
+	 *
+	 * @return bool Whether a node was popped off of the stack.
+	 */
+	public function pop(): bool {
+		$item = array_pop( $this->stack );
+		if ( null === $item ) {
+			return false;
+		}
+
+		if ( 'context-node' === $item->bookmark_name ) {
+			$this->stack[] = $item;
+			return false;
+		}
+
+		$this->after_element_pop( $item );
+		return true;
+	}
+
+	/**
+	 * Pops nodes off of the stack of open elements until one with the given tag name has been popped.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see WP_HTML_Open_Elements::pop
+	 *
+	 * @param string $tag_name Name of tag that needs to be popped off of the stack of open elements.
+	 * @return bool Whether a tag of the given name was found and popped off of the stack of open elements.
+	 */
+	public function pop_until( string $tag_name ): bool {
+		foreach ( $this->walk_up() as $item ) {
+			if ( 'context-node' === $item->bookmark_name ) {
+				return true;
+			}
+
+			$this->pop();
+
+			if (
+				'(internal: H1 through H6 - do not use)' === $tag_name &&
+				in_array( $item->node_name, array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ), true )
+			) {
+				return true;
+			}
+
+			if ( $tag_name === $item->node_name ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Pushes a node onto the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
+	 *
+	 * @param WP_HTML_Token $stack_item Item to add onto stack.
+	 */
+	public function push( Gutenberg_HTML_Token_6_7 $stack_item ): void {
+		$this->stack[] = $stack_item;
+		$this->after_element_push( $stack_item );
+	}
+
+	/**
+	 * Removes a specific node from the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $token The node to remove from the stack of open elements.
+	 * @return bool Whether the node was found and removed from the stack of open elements.
+	 */
+	public function remove_node( Gutenberg_HTML_Token_6_7 $token ): bool {
+		if ( 'context-node' === $token->bookmark_name ) {
+			return false;
+		}
+
+		foreach ( $this->walk_up() as $position_from_end => $item ) {
+			if ( $token->bookmark_name !== $item->bookmark_name ) {
+				continue;
+			}
+
+			$position_from_start = $this->count() - $position_from_end - 1;
+			array_splice( $this->stack, $position_from_start, 1 );
+			$this->after_element_pop( $item );
+			return true;
+		}
+
+		return false;
+	}
+
+
+	/**
+	 * Steps through the stack of open elements, starting with the top element
+	 * (added first) and walking downwards to the one added last.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $html = '<em><strong><a>We are here';
+	 *     foreach ( $stack->walk_down() as $node ) {
+	 *         echo "{$node->node_name} -> ";
+	 *     }
+	 *     > EM -> STRONG -> A ->
+	 *
+	 * To start with the most-recently added element and walk towards the top,
+	 * see WP_HTML_Open_Elements::walk_up().
+	 *
+	 * @since 6.4.0
+	 */
+	public function walk_down() {
+		$count = count( $this->stack );
+
+		for ( $i = 0; $i < $count; $i++ ) {
+			yield $this->stack[ $i ];
+		}
+	}
+
+	/**
+	 * Steps through the stack of open elements, starting with the bottom element
+	 * (added last) and walking upwards to the one added first.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $html = '<em><strong><a>We are here';
+	 *     foreach ( $stack->walk_up() as $node ) {
+	 *         echo "{$node->node_name} -> ";
+	 *     }
+	 *     > A -> STRONG -> EM ->
+	 *
+	 * To start with the first added element and walk towards the bottom,
+	 * see WP_HTML_Open_Elements::walk_down().
+	 *
+	 * @since 6.4.0
+	 * @since 6.5.0 Accepts $above_this_node to start traversal above a given node, if it exists.
+	 *
+	 * @param WP_HTML_Token|null $above_this_node Optional. Start traversing above this node,
+	 *                                            if provided and if the node exists.
+	 */
+	public function walk_up( ?Gutenberg_HTML_Token_6_7 $above_this_node = null ) {
+		$has_found_node = null === $above_this_node;
+
+		for ( $i = count( $this->stack ) - 1; $i >= 0; $i-- ) {
+			$node = $this->stack[ $i ];
+
+			if ( ! $has_found_node ) {
+				$has_found_node = $node === $above_this_node;
+				continue;
+			}
+
+			yield $node;
+		}
+	}
+
+	/*
+	 * Internal helpers.
+	 */
+
+	/**
+	 * Updates internal flags after adding an element.
+	 *
+	 * Certain conditions (such as "has_p_in_button_scope") are maintained here as
+	 * flags that are only modified when adding and removing elements. This allows
+	 * the HTML Processor to quickly check for these conditions instead of iterating
+	 * over the open stack elements upon each new tag it encounters. These flags,
+	 * however, need to be maintained as items are added and removed from the stack.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $item Element that was added to the stack of open elements.
+	 */
+	public function after_element_push( Gutenberg_HTML_Token_6_7 $item ): void {
+		/*
+		 * When adding support for new elements, expand this switch to trap
+		 * cases where the precalculated value needs to change.
+		 */
+		switch ( $item->node_name ) {
+			case 'BUTTON':
+				$this->has_p_in_button_scope = false;
+				break;
+
+			case 'P':
+				$this->has_p_in_button_scope = true;
+				break;
+		}
+
+		if ( null !== $this->push_handler ) {
+			( $this->push_handler )( $item );
+		}
+	}
+
+	/**
+	 * Updates internal flags after removing an element.
+	 *
+	 * Certain conditions (such as "has_p_in_button_scope") are maintained here as
+	 * flags that are only modified when adding and removing elements. This allows
+	 * the HTML Processor to quickly check for these conditions instead of iterating
+	 * over the open stack elements upon each new tag it encounters. These flags,
+	 * however, need to be maintained as items are added and removed from the stack.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param WP_HTML_Token $item Element that was removed from the stack of open elements.
+	 */
+	public function after_element_pop( Gutenberg_HTML_Token_6_7 $item ): void {
+		/*
+		 * When adding support for new elements, expand this switch to trap
+		 * cases where the precalculated value needs to change.
+		 */
+		switch ( $item->node_name ) {
+			case 'BUTTON':
+				$this->has_p_in_button_scope = $this->has_element_in_button_scope( 'P' );
+				break;
+
+			case 'P':
+				$this->has_p_in_button_scope = $this->has_element_in_button_scope( 'P' );
+				break;
+		}
+
+		if ( null !== $this->pop_handler ) {
+			( $this->pop_handler )( $item );
+		}
+	}
+
+	/**
+	 * Wakeup magic method.
+	 *
+	 * @since 6.6.0
+	 */
+	public function __wakeup() {
+		throw new \LogicException( __CLASS__ . ' should never be unserialized' );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php
new file mode 100644
index 00000000000000..15cbbdc6adda8c
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php
@@ -0,0 +1,3402 @@
+<?php
+/**
+ * HTML API: WP_HTML_Processor class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used to safely parse and modify an HTML document.
+ *
+ * The HTML Processor class properly parses and modifies HTML5 documents.
+ *
+ * It supports a subset of the HTML5 specification, and when it encounters
+ * unsupported markup, it aborts early to avoid unintentionally breaking
+ * the document. The HTML Processor should never break an HTML document.
+ *
+ * While the `WP_HTML_Tag_Processor` is a valuable tool for modifying
+ * attributes on individual HTML tags, the HTML Processor is more capable
+ * and useful for the following operations:
+ *
+ *  - Querying based on nested HTML structure.
+ *
+ * Eventually the HTML Processor will also support:
+ *  - Wrapping a tag in surrounding HTML.
+ *  - Unwrapping a tag by removing its parent.
+ *  - Inserting and removing nodes.
+ *  - Reading and changing inner content.
+ *  - Navigating up or around HTML structure.
+ *
+ * ## Usage
+ *
+ * Use of this class requires three steps:
+ *
+ *   1. Call a static creator method with your input HTML document.
+ *   2. Find the location in the document you are looking for.
+ *   3. Request changes to the document at that location.
+ *
+ * Example:
+ *
+ *     $processor = WP_HTML_Processor::create_fragment( $html );
+ *     if ( $processor->next_tag( array( 'breadcrumbs' => array( 'DIV', 'FIGURE', 'IMG' ) ) ) ) {
+ *         $processor->add_class( 'responsive-image' );
+ *     }
+ *
+ * #### Breadcrumbs
+ *
+ * Breadcrumbs represent the stack of open elements from the root
+ * of the document or fragment down to the currently-matched node,
+ * if one is currently selected. Call WP_HTML_Processor::get_breadcrumbs()
+ * to inspect the breadcrumbs for a matched tag.
+ *
+ * Breadcrumbs can specify nested HTML structure and are equivalent
+ * to a CSS selector comprising tag names separated by the child
+ * combinator, such as "DIV > FIGURE > IMG".
+ *
+ * Since all elements find themselves inside a full HTML document
+ * when parsed, the return value from `get_breadcrumbs()` will always
+ * contain any implicit outermost elements. For example, when parsing
+ * with `create_fragment()` in the `BODY` context (the default), any
+ * tag in the given HTML document will contain `array( 'HTML', 'BODY', … )`
+ * in its breadcrumbs.
+ *
+ * Despite containing the implied outermost elements in their breadcrumbs,
+ * tags may be found with the shortest-matching breadcrumb query. That is,
+ * `array( 'IMG' )` matches all IMG elements and `array( 'P', 'IMG' )`
+ * matches all IMG elements directly inside a P element. To ensure that no
+ * partial matches erroneously match it's possible to specify in a query
+ * the full breadcrumb match all the way down from the root HTML element.
+ *
+ * Example:
+ *
+ *     $html = '<figure><img><figcaption>A <em>lovely</em> day outside</figcaption></figure>';
+ *     //               ----- Matches here.
+ *     $processor->next_tag( array( 'breadcrumbs' => array( 'FIGURE', 'IMG' ) ) );
+ *
+ *     $html = '<figure><img><figcaption>A <em>lovely</em> day outside</figcaption></figure>';
+ *     //                                  ---- Matches here.
+ *     $processor->next_tag( array( 'breadcrumbs' => array( 'FIGURE', 'FIGCAPTION', 'EM' ) ) );
+ *
+ *     $html = '<div><img></div><img>';
+ *     //                       ----- Matches here, because IMG must be a direct child of the implicit BODY.
+ *     $processor->next_tag( array( 'breadcrumbs' => array( 'BODY', 'IMG' ) ) );
+ *
+ * ## HTML Support
+ *
+ * This class implements a small part of the HTML5 specification.
+ * It's designed to operate within its support and abort early whenever
+ * encountering circumstances it can't properly handle. This is
+ * the principle way in which this class remains as simple as possible
+ * without cutting corners and breaking compliance.
+ *
+ * ### Supported elements
+ *
+ * If any unsupported element appears in the HTML input the HTML Processor
+ * will abort early and stop all processing. This draconian measure ensures
+ * that the HTML Processor won't break any HTML it doesn't fully understand.
+ *
+ * The following list specifies the HTML tags that _are_ supported:
+ *
+ *  - Containers: ADDRESS, BLOCKQUOTE, DETAILS, DIALOG, DIV, FOOTER, HEADER, MAIN, MENU, SPAN, SUMMARY.
+ *  - Custom elements: All custom elements are supported. :)
+ *  - Form elements: BUTTON, DATALIST, FIELDSET, INPUT, LABEL, LEGEND, METER, OPTGROUP, OPTION, PROGRESS, SEARCH, SELECT.
+ *  - Formatting elements: B, BIG, CODE, EM, FONT, I, PRE, SMALL, STRIKE, STRONG, TT, U, WBR.
+ *  - Heading elements: H1, H2, H3, H4, H5, H6, HGROUP.
+ *  - Links: A.
+ *  - Lists: DD, DL, DT, LI, OL, UL.
+ *  - Media elements: AUDIO, CANVAS, EMBED, FIGCAPTION, FIGURE, IMG, MAP, PICTURE, SOURCE, TRACK, VIDEO.
+ *  - Paragraph: BR, P.
+ *  - Phrasing elements: ABBR, AREA, BDI, BDO, CITE, DATA, DEL, DFN, INS, MARK, OUTPUT, Q, SAMP, SUB, SUP, TIME, VAR.
+ *  - Sectioning elements: ARTICLE, ASIDE, HR, NAV, SECTION.
+ *  - Templating elements: SLOT.
+ *  - Text decoration: RUBY.
+ *  - Deprecated elements: ACRONYM, BLINK, CENTER, DIR, ISINDEX, KEYGEN, LISTING, MULTICOL, NEXTID, PARAM, SPACER.
+ *
+ * ### Supported markup
+ *
+ * Some kinds of non-normative HTML involve reconstruction of formatting elements and
+ * re-parenting of mis-nested elements. For example, a DIV tag found inside a TABLE
+ * may in fact belong _before_ the table in the DOM. If the HTML Processor encounters
+ * such a case it will stop processing.
+ *
+ * The following list specifies HTML markup that _is_ supported:
+ *
+ *  - Markup involving only those tags listed above.
+ *  - Fully-balanced and non-overlapping tags.
+ *  - HTML with unexpected tag closers.
+ *  - Some unbalanced or overlapping tags.
+ *  - P tags after unclosed P tags.
+ *  - BUTTON tags after unclosed BUTTON tags.
+ *  - A tags after unclosed A tags that don't involve any active formatting elements.
+ *
+ * @since 6.4.0
+ *
+ * @see WP_HTML_Tag_Processor
+ * @see https://html.spec.whatwg.org/
+ */
+class Gutenberg_HTML_Processor_6_7 extends Gutenberg_HTML_Tag_Processor_6_7 {
+	/**
+	 * The maximum number of bookmarks allowed to exist at any given time.
+	 *
+	 * HTML processing requires more bookmarks than basic tag processing,
+	 * so this class constant from the Tag Processor is overwritten.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var int
+	 */
+	const MAX_BOOKMARKS = 100;
+
+	/**
+	 * Holds the working state of the parser, including the stack of
+	 * open elements and the stack of active formatting elements.
+	 *
+	 * Initialized in the constructor.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var WP_HTML_Processor_State
+	 */
+	private $state;
+
+	/**
+	 * Used to create unique bookmark names.
+	 *
+	 * This class sets a bookmark for every tag in the HTML document that it encounters.
+	 * The bookmark name is auto-generated and increments, starting with `1`. These are
+	 * internal bookmarks and are automatically released when the referring WP_HTML_Token
+	 * goes out of scope and is garbage-collected.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see WP_HTML_Processor::$release_internal_bookmark_on_destruct
+	 *
+	 * @var int
+	 */
+	private $bookmark_counter = 0;
+
+	/**
+	 * Stores an explanation for why something failed, if it did.
+	 *
+	 * @see self::get_last_error
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string|null
+	 */
+	private $last_error = null;
+
+	/**
+	 * Stores context for why the parser bailed on unsupported HTML, if it did.
+	 *
+	 * @see self::get_unsupported_exception
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var WP_HTML_Unsupported_Exception|null
+	 */
+	private $unsupported_exception = null;
+
+	/**
+	 * Releases a bookmark when PHP garbage-collects its wrapping WP_HTML_Token instance.
+	 *
+	 * This function is created inside the class constructor so that it can be passed to
+	 * the stack of open elements and the stack of active formatting elements without
+	 * exposing it as a public method on the class.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var Closure|null
+	 */
+	private $release_internal_bookmark_on_destruct = null;
+
+	/**
+	 * Stores stack events which arise during parsing of the
+	 * HTML document, which will then supply the "match" events.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var WP_HTML_Stack_Event[]
+	 */
+	private $element_queue = array();
+
+	/**
+	 * Stores the current breadcrumbs.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var string[]
+	 */
+	private $breadcrumbs = array();
+
+	/**
+	 * Current stack event, if set, representing a matched token.
+	 *
+	 * Because the parser may internally point to a place further along in a document
+	 * than the nodes which have already been processed (some "virtual" nodes may have
+	 * appeared while scanning the HTML document), this will point at the "current" node
+	 * being processed. It comes from the front of the element queue.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var WP_HTML_Stack_Event|null
+	 */
+	private $current_element = null;
+
+	/**
+	 * Context node if created as a fragment parser.
+	 *
+	 * @var WP_HTML_Token|null
+	 */
+	private $context_node = null;
+
+	/**
+	 * Whether the parser has yet processed the context node,
+	 * if created as a fragment parser.
+	 *
+	 * The context node will be initially pushed onto the stack of open elements,
+	 * but when created as a fragment parser, this context element (and the implicit
+	 * HTML document node above it) should not be exposed as a matched token or node.
+	 *
+	 * This boolean indicates whether the processor should skip over the current
+	 * node in its initial search for the first node created from the input HTML.
+	 *
+	 * @var bool
+	 */
+	private $has_seen_context_node = false;
+
+	/*
+	 * Public Interface Functions
+	 */
+
+	/**
+	 * Creates an HTML processor in the fragment parsing mode.
+	 *
+	 * Use this for cases where you are processing chunks of HTML that
+	 * will be found within a bigger HTML document, such as rendered
+	 * block output that exists within a post, `the_content` inside a
+	 * rendered site layout.
+	 *
+	 * Fragment parsing occurs within a context, which is an HTML element
+	 * that the document will eventually be placed in. It becomes important
+	 * when special elements have different rules than others, such as inside
+	 * a TEXTAREA or a TITLE tag where things that look like tags are text,
+	 * or inside a SCRIPT tag where things that look like HTML syntax are JS.
+	 *
+	 * The context value should be a representation of the tag into which the
+	 * HTML is found. For most cases this will be the body element. The HTML
+	 * form is provided because a context element may have attributes that
+	 * impact the parse, such as with a SCRIPT tag and its `type` attribute.
+	 *
+	 * ## Current HTML Support
+	 *
+	 *  - The only supported context is `<body>`, which is the default value.
+	 *  - The only supported document encoding is `UTF-8`, which is the default value.
+	 *
+	 * @since 6.4.0
+	 * @since 6.6.0 Returns `static` instead of `self` so it can create subclass instances.
+	 *
+	 * @param string $html     Input HTML fragment to process.
+	 * @param string $context  Context element for the fragment, must be default of `<body>`.
+	 * @param string $encoding Text encoding of the document; must be default of 'UTF-8'.
+	 * @return static|null The created processor if successful, otherwise null.
+	 */
+	public static function create_fragment( $html, $context = '<body>', $encoding = 'UTF-8' ) {
+		if ( '<body>' !== $context || 'UTF-8' !== $encoding ) {
+			return null;
+		}
+
+		$processor                        = new static( $html, self::CONSTRUCTOR_UNLOCK_CODE );
+		$processor->state->context_node   = array( 'BODY', array() );
+		$processor->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
+
+		// @todo Create "fake" bookmarks for non-existent but implied nodes.
+		$processor->bookmarks['root-node']    = new Gutenberg_HTML_Span_6_7( 0, 0 );
+		$processor->bookmarks['context-node'] = new Gutenberg_HTML_Span_6_7( 0, 0 );
+
+		$processor->state->stack_of_open_elements->push(
+			new Gutenberg_HTML_Token_6_7(
+				'root-node',
+				'HTML',
+				false
+			)
+		);
+
+		$context_node = new Gutenberg_HTML_Token_6_7(
+			'context-node',
+			$processor->state->context_node[0],
+			false
+		);
+
+		$processor->context_node = $context_node;
+		$processor->breadcrumbs  = array( 'HTML', $context_node->node_name );
+
+		return $processor;
+	}
+
+	/**
+	 * Constructor.
+	 *
+	 * Do not use this method. Use the static creator methods instead.
+	 *
+	 * @access private
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see WP_HTML_Processor::create_fragment()
+	 *
+	 * @param string      $html                                  HTML to process.
+	 * @param string|null $use_the_static_create_methods_instead This constructor should not be called manually.
+	 */
+	public function __construct( $html, $use_the_static_create_methods_instead = null ) {
+		parent::__construct( $html );
+
+		if ( self::CONSTRUCTOR_UNLOCK_CODE !== $use_the_static_create_methods_instead ) {
+			_doing_it_wrong(
+				__METHOD__,
+				sprintf(
+					/* translators: %s: WP_HTML_Processor::create_fragment(). */
+					__( 'Call %s to create an HTML Processor instead of calling the constructor directly.' ),
+					'<code>WP_HTML_Processor::create_fragment()</code>'
+				),
+				'6.4.0'
+			);
+		}
+
+		$this->state = new Gutenberg_HTML_Processor_State_6_7();
+
+		$this->state->stack_of_open_elements->set_push_handler(
+			function ( Gutenberg_HTML_Token_6_7 $token ): void {
+				$is_virtual            = ! isset( $this->state->current_token ) || $this->is_tag_closer();
+				$same_node             = isset( $this->state->current_token ) && $token->node_name === $this->state->current_token->node_name;
+				$provenance            = ( ! $same_node || $is_virtual ) ? 'virtual' : 'real';
+				$this->element_queue[] = new Gutenberg_HTML_Stack_Event_6_7( $token, Gutenberg_HTML_Stack_Event_6_7::PUSH, $provenance );
+			}
+		);
+
+		$this->state->stack_of_open_elements->set_pop_handler(
+			function ( Gutenberg_HTML_Token_6_7 $token ): void {
+				$is_virtual            = ! isset( $this->state->current_token ) || ! $this->is_tag_closer();
+				$same_node             = isset( $this->state->current_token ) && $token->node_name === $this->state->current_token->node_name;
+				$provenance            = ( ! $same_node || $is_virtual ) ? 'virtual' : 'real';
+				$this->element_queue[] = new Gutenberg_HTML_Stack_Event_6_7( $token, Gutenberg_HTML_Stack_Event_6_7::POP, $provenance );
+			}
+		);
+
+		/*
+		 * Create this wrapper so that it's possible to pass
+		 * a private method into WP_HTML_Token classes without
+		 * exposing it to any public API.
+		 */
+		$this->release_internal_bookmark_on_destruct = function ( string $name ): void {
+			parent::release_bookmark( $name );
+		};
+	}
+
+	/**
+	 * Stops the parser and terminates its execution when encountering unsupported markup.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception Halts execution of the parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @param string $message Explains support is missing in order to parse the current node.
+	 */
+	private function bail( string $message ) {
+		$here  = $this->bookmarks[ $this->state->current_token->bookmark_name ];
+		$token = substr( $this->html, $here->start, $here->length );
+
+		$open_elements = array();
+		foreach ( $this->state->stack_of_open_elements->stack as $item ) {
+			$open_elements[] = $item->node_name;
+		}
+
+		$active_formats = array();
+		foreach ( $this->state->active_formatting_elements->walk_down() as $item ) {
+			$active_formats[] = $item->node_name;
+		}
+
+		$this->last_error = self::ERROR_UNSUPPORTED;
+
+		$this->unsupported_exception = new Gutenberg_HTML_Unsupported_Exception_6_7(
+			$message,
+			$this->state->current_token->node_name,
+			$here->start,
+			$token,
+			$open_elements,
+			$active_formats
+		);
+
+		throw $this->unsupported_exception;
+	}
+
+	/**
+	 * Returns the last error, if any.
+	 *
+	 * Various situations lead to parsing failure but this class will
+	 * return `false` in all those cases. To determine why something
+	 * failed it's possible to request the last error. This can be
+	 * helpful to know to distinguish whether a given tag couldn't
+	 * be found or if content in the document caused the processor
+	 * to give up and abort processing.
+	 *
+	 * Example
+	 *
+	 *     $processor = WP_HTML_Processor::create_fragment( '<template><strong><button><em><p><em>' );
+	 *     false === $processor->next_tag();
+	 *     WP_HTML_Processor::ERROR_UNSUPPORTED === $processor->get_last_error();
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see self::ERROR_UNSUPPORTED
+	 * @see self::ERROR_EXCEEDED_MAX_BOOKMARKS
+	 *
+	 * @return string|null The last error, if one exists, otherwise null.
+	 */
+	public function get_last_error(): ?string {
+		return $this->last_error;
+	}
+
+	/**
+	 * Returns context for why the parser aborted due to unsupported HTML, if it did.
+	 *
+	 * This is meant for debugging purposes, not for production use.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see self::$unsupported_exception
+	 *
+	 * @return WP_HTML_Unsupported_Exception|null
+	 */
+	public function get_unsupported_exception() {
+		return $this->unsupported_exception;
+	}
+
+	/**
+	 * Finds the next tag matching the $query.
+	 *
+	 * @todo Support matching the class name and tag name.
+	 *
+	 * @since 6.4.0
+	 * @since 6.6.0 Visits all tokens, including virtual ones.
+	 *
+	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
+	 *
+	 * @param array|string|null $query {
+	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
+	 *
+	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
+	 *     @type string      $tag_closers  'visit' to pause at tag closers, 'skip' or unset to only visit openers.
+	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
+	 *                                     1 for "first" tag, 3 for "third," etc.
+	 *                                     Defaults to first tag.
+	 *     @type string|null $class_name   Tag must contain this whole class name to match.
+	 *     @type string[]    $breadcrumbs  DOM sub-path at which element is found, e.g. `array( 'FIGURE', 'IMG' )`.
+	 *                                     May also contain the wildcard `*` which matches a single element, e.g. `array( 'SECTION', '*' )`.
+	 * }
+	 * @return bool Whether a tag was matched.
+	 */
+	public function next_tag( $query = null ): bool {
+		$visit_closers = isset( $query['tag_closers'] ) && 'visit' === $query['tag_closers'];
+
+		if ( null === $query ) {
+			while ( $this->next_token() ) {
+				if ( '#tag' !== $this->get_token_type() ) {
+					continue;
+				}
+
+				if ( ! $this->is_tag_closer() || $visit_closers ) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+
+		if ( is_string( $query ) ) {
+			$query = array( 'breadcrumbs' => array( $query ) );
+		}
+
+		if ( ! is_array( $query ) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Please pass a query array to this function.' ),
+				'6.4.0'
+			);
+			return false;
+		}
+
+		$needs_class = ( isset( $query['class_name'] ) && is_string( $query['class_name'] ) )
+			? $query['class_name']
+			: null;
+
+		if ( ! ( array_key_exists( 'breadcrumbs', $query ) && is_array( $query['breadcrumbs'] ) ) ) {
+			while ( $this->next_token() ) {
+				if ( '#tag' !== $this->get_token_type() ) {
+					continue;
+				}
+
+				if ( isset( $query['tag_name'] ) && $query['tag_name'] !== $this->get_token_name() ) {
+					continue;
+				}
+
+				if ( isset( $needs_class ) && ! $this->has_class( $needs_class ) ) {
+					continue;
+				}
+
+				if ( ! $this->is_tag_closer() || $visit_closers ) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+
+		$breadcrumbs  = $query['breadcrumbs'];
+		$match_offset = isset( $query['match_offset'] ) ? (int) $query['match_offset'] : 1;
+
+		while ( $match_offset > 0 && $this->next_token() ) {
+			if ( '#tag' !== $this->get_token_type() || $this->is_tag_closer() ) {
+				continue;
+			}
+
+			if ( isset( $needs_class ) && ! $this->has_class( $needs_class ) ) {
+				continue;
+			}
+
+			if ( $this->matches_breadcrumbs( $breadcrumbs ) && 0 === --$match_offset ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Ensures internal accounting is maintained for HTML semantic rules while
+	 * the underlying Tag Processor class is seeking to a bookmark.
+	 *
+	 * This doesn't currently have a way to represent non-tags and doesn't process
+	 * semantic rules for text nodes. For access to the raw tokens consider using
+	 * WP_HTML_Tag_Processor instead.
+	 *
+	 * @since 6.5.0 Added for internal support; do not use.
+	 *
+	 * @access private
+	 *
+	 * @return bool
+	 */
+	public function next_token(): bool {
+		$this->current_element = null;
+
+		if ( isset( $this->last_error ) ) {
+			return false;
+		}
+
+		/*
+		 * Prime the events if there are none.
+		 *
+		 * @todo In some cases, probably related to the adoption agency
+		 *       algorithm, this call to step() doesn't create any new
+		 *       events. Calling it again creates them. Figure out why
+		 *       this is and if it's inherent or if it's a bug. Looping
+		 *       until there are events or until there are no more
+		 *       tokens works in the meantime and isn't obviously wrong.
+		 */
+		while ( empty( $this->element_queue ) && $this->step() ) {
+			continue;
+		}
+
+		// Process the next event on the queue.
+		$this->current_element = array_shift( $this->element_queue );
+		if ( ! isset( $this->current_element ) ) {
+			return false;
+		}
+
+		$is_pop = Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation;
+
+		/*
+		 * The root node only exists in the fragment parser, and closing it
+		 * indicates that the parse is complete. Stop before popping if from
+		 * the breadcrumbs.
+		 */
+		if ( 'root-node' === $this->current_element->token->bookmark_name ) {
+			return ! $is_pop && $this->next_token();
+		}
+
+		// Adjust the breadcrumbs for this event.
+		if ( $is_pop ) {
+			array_pop( $this->breadcrumbs );
+		} else {
+			$this->breadcrumbs[] = $this->current_element->token->node_name;
+		}
+
+		// Avoid sending close events for elements which don't expect a closing.
+		if ( $is_pop && ! static::expects_closer( $this->current_element->token ) ) {
+			return $this->next_token();
+		}
+
+		return true;
+	}
+
+	/**
+	 * Indicates if the current tag token is a tag closer.
+	 *
+	 * Example:
+	 *
+	 *     $p = WP_HTML_Processor::create_fragment( '<div></div>' );
+	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 *     $p->is_tag_closer() === false;
+	 *
+	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 *     $p->is_tag_closer() === true;
+	 *
+	 * @since 6.6.0 Subclassed for HTML Processor.
+	 *
+	 * @return bool Whether the current tag is a tag closer.
+	 */
+	public function is_tag_closer(): bool {
+		return $this->is_virtual()
+			? ( Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation && '#tag' === $this->get_token_type() )
+			: parent::is_tag_closer();
+	}
+
+	/**
+	 * Indicates if the currently-matched token is virtual, created by a stack operation
+	 * while processing HTML, rather than a token found in the HTML text itself.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @return bool Whether the current token is virtual.
+	 */
+	private function is_virtual(): bool {
+		return (
+			isset( $this->current_element->provenance ) &&
+			'virtual' === $this->current_element->provenance
+		);
+	}
+
+	/**
+	 * Indicates if the currently-matched tag matches the given breadcrumbs.
+	 *
+	 * A "*" represents a single tag wildcard, where any tag matches, but not no tags.
+	 *
+	 * At some point this function _may_ support a `**` syntax for matching any number
+	 * of unspecified tags in the breadcrumb stack. This has been intentionally left
+	 * out, however, to keep this function simple and to avoid introducing backtracking,
+	 * which could open up surprising performance breakdowns.
+	 *
+	 * Example:
+	 *
+	 *     $processor = WP_HTML_Processor::create_fragment( '<div><span><figure><img></figure></span></div>' );
+	 *     $processor->next_tag( 'img' );
+	 *     true  === $processor->matches_breadcrumbs( array( 'figure', 'img' ) );
+	 *     true  === $processor->matches_breadcrumbs( array( 'span', 'figure', 'img' ) );
+	 *     false === $processor->matches_breadcrumbs( array( 'span', 'img' ) );
+	 *     true  === $processor->matches_breadcrumbs( array( 'span', '*', 'img' ) );
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string[] $breadcrumbs DOM sub-path at which element is found, e.g. `array( 'FIGURE', 'IMG' )`.
+	 *                              May also contain the wildcard `*` which matches a single element, e.g. `array( 'SECTION', '*' )`.
+	 * @return bool Whether the currently-matched tag is found at the given nested structure.
+	 */
+	public function matches_breadcrumbs( $breadcrumbs ): bool {
+		// Everything matches when there are zero constraints.
+		if ( 0 === count( $breadcrumbs ) ) {
+			return true;
+		}
+
+		// Start at the last crumb.
+		$crumb = end( $breadcrumbs );
+
+		if ( '*' !== $crumb && $this->get_tag() !== strtoupper( $crumb ) ) {
+			return false;
+		}
+
+		for ( $i = count( $this->breadcrumbs ) - 1; $i >= 0; $i-- ) {
+			$node  = $this->breadcrumbs[ $i ];
+			$crumb = strtoupper( current( $breadcrumbs ) );
+
+			if ( '*' !== $crumb && $node !== $crumb ) {
+				return false;
+			}
+
+			if ( false === prev( $breadcrumbs ) ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Indicates if the currently-matched node expects a closing
+	 * token, or if it will self-close on the next step.
+	 *
+	 * Most HTML elements expect a closer, such as a P element or
+	 * a DIV element. Others, like an IMG element are void and don't
+	 * have a closing tag. Special elements, such as SCRIPT and STYLE,
+	 * are treated just like void tags. Text nodes and self-closing
+	 * foreign content will also act just like a void tag, immediately
+	 * closing as soon as the processor advances to the next token.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @todo When adding support for foreign content, ensure that
+	 *       this returns false for self-closing elements in the
+	 *       SVG and MathML namespace.
+	 *
+	 * @param WP_HTML_Token|null $node Optional. Node to examine, if provided.
+	 *                                 Default is to examine current node.
+	 * @return bool|null Whether to expect a closer for the currently-matched node,
+	 *                   or `null` if not matched on any token.
+	 */
+	public function expects_closer( $node = null ): ?bool {
+		$token_name = $node->node_name ?? $this->get_token_name();
+		if ( ! isset( $token_name ) ) {
+			return null;
+		}
+
+		return ! (
+			// Comments, text nodes, and other atomic tokens.
+			'#' === $token_name[0] ||
+			// Doctype declarations.
+			'html' === $token_name ||
+			// Void elements.
+			self::is_void( $token_name ) ||
+			// Special atomic elements.
+			in_array( $token_name, array( 'IFRAME', 'NOEMBED', 'NOFRAMES', 'SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE', 'XMP' ), true )
+		);
+	}
+
+	/**
+	 * Steps through the HTML document and stop at the next tag, if any.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
+	 *
+	 * @see self::PROCESS_NEXT_NODE
+	 * @see self::REPROCESS_CURRENT_NODE
+	 *
+	 * @param string $node_to_process Whether to parse the next node or reprocess the current node.
+	 * @return bool Whether a tag was matched.
+	 */
+	public function step( $node_to_process = self::PROCESS_NEXT_NODE ): bool {
+		// Refuse to proceed if there was a previous error.
+		if ( null !== $this->last_error ) {
+			return false;
+		}
+
+		if ( self::REPROCESS_CURRENT_NODE !== $node_to_process ) {
+			/*
+			 * Void elements still hop onto the stack of open elements even though
+			 * there's no corresponding closing tag. This is important for managing
+			 * stack-based operations such as "navigate to parent node" or checking
+			 * on an element's breadcrumbs.
+			 *
+			 * When moving on to the next node, therefore, if the bottom-most element
+			 * on the stack is a void element, it must be closed.
+			 *
+			 * @todo Once self-closing foreign elements and BGSOUND are supported,
+			 *        they must also be implicitly closed here too. BGSOUND is
+			 *        special since it's only self-closing if the self-closing flag
+			 *        is provided in the opening tag, otherwise it expects a tag closer.
+			 */
+			$top_node = $this->state->stack_of_open_elements->current_node();
+			if ( isset( $top_node ) && ! static::expects_closer( $top_node ) ) {
+				$this->state->stack_of_open_elements->pop();
+			}
+		}
+
+		if ( self::PROCESS_NEXT_NODE === $node_to_process ) {
+			parent::next_token();
+		}
+
+		// Finish stepping when there are no more tokens in the document.
+		if (
+			Gutenberg_HTML_Tag_Processor_6_7::STATE_INCOMPLETE_INPUT === $this->parser_state ||
+			Gutenberg_HTML_Tag_Processor_6_7::STATE_COMPLETE === $this->parser_state
+		) {
+			return false;
+		}
+
+		$this->state->current_token = new Gutenberg_HTML_Token_6_7(
+			$this->bookmark_token(),
+			$this->get_token_name(),
+			$this->has_self_closing_flag(),
+			$this->release_internal_bookmark_on_destruct
+		);
+
+		try {
+			switch ( $this->state->insertion_mode ) {
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_INITIAL:
+					return $this->step_initial();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HTML:
+					return $this->step_before_html();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HEAD:
+					return $this->step_before_head();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD:
+					return $this->step_in_head();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD_NOSCRIPT:
+					return $this->step_in_head_noscript();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_HEAD:
+					return $this->step_after_head();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY:
+					return $this->step_in_body();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE:
+					return $this->step_in_table();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_TEXT:
+					return $this->step_in_table_text();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION:
+					return $this->step_in_caption();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_COLUMN_GROUP:
+					return $this->step_in_column_group();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY:
+					return $this->step_in_table_body();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW:
+					return $this->step_in_row();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL:
+					return $this->step_in_cell();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT:
+					return $this->step_in_select();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE:
+					return $this->step_in_select_in_table();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TEMPLATE:
+					return $this->step_in_template();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_BODY:
+					return $this->step_after_body();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FRAMESET:
+					return $this->step_in_frameset();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_FRAMESET:
+					return $this->step_after_frameset();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_AFTER_BODY:
+					return $this->step_after_after_body();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_AFTER_FRAMESET:
+					return $this->step_after_after_frameset();
+
+				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FOREIGN_CONTENT:
+					return $this->step_in_foreign_content();
+
+				// This should be unreachable but PHP doesn't have total type checking on switch.
+				default:
+					$this->bail( "Unaware of the requested parsing mode: '{$this->state->insertion_mode}'." );
+			}
+		} catch ( Gutenberg_HTML_Unsupported_Exception_6_7 $e ) {
+			/*
+			 * Exceptions are used in this class to escape deep call stacks that
+			 * otherwise might involve messier calling and return conventions.
+			 */
+			return false;
+		}
+	}
+
+	/**
+	 * Computes the HTML breadcrumbs for the currently-matched node, if matched.
+	 *
+	 * Breadcrumbs start at the outermost parent and descend toward the matched element.
+	 * They always include the entire path from the root HTML node to the matched element.
+	 *
+	 * @todo It could be more efficient to expose a generator-based version of this function
+	 *       to avoid creating the array copy on tag iteration. If this is done, it would likely
+	 *       be more useful to walk up the stack when yielding instead of starting at the top.
+	 *
+	 * Example
+	 *
+	 *     $processor = WP_HTML_Processor::create_fragment( '<p><strong><em><img></em></strong></p>' );
+	 *     $processor->next_tag( 'IMG' );
+	 *     $processor->get_breadcrumbs() === array( 'HTML', 'BODY', 'P', 'STRONG', 'EM', 'IMG' );
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return string[]|null Array of tag names representing path to matched node, if matched, otherwise NULL.
+	 */
+	public function get_breadcrumbs(): ?array {
+		return $this->breadcrumbs;
+	}
+
+	/**
+	 * Returns the nesting depth of the current location in the document.
+	 *
+	 * Example:
+	 *
+	 *     $processor = WP_HTML_Processor::create_fragment( '<div><p></p></div>' );
+	 *     // The processor starts in the BODY context, meaning it has depth from the start: HTML > BODY.
+	 *     2 === $processor->get_current_depth();
+	 *
+	 *     // Opening the DIV element increases the depth.
+	 *     $processor->next_token();
+	 *     3 === $processor->get_current_depth();
+	 *
+	 *     // Opening the P element increases the depth.
+	 *     $processor->next_token();
+	 *     4 === $processor->get_current_depth();
+	 *
+	 *     // The P element is closed during `next_token()` so the depth is decreased to reflect that.
+	 *     $processor->next_token();
+	 *     3 === $processor->get_current_depth();
+	 *
+	 * @since 6.6.0
+	 *
+	 * @return int Nesting-depth of current location in the document.
+	 */
+	public function get_current_depth(): int {
+		return count( $this->breadcrumbs );
+	}
+
+	/**
+	 * Parses next element in the 'initial' insertion mode.
+	 *
+	 * This internal function performs the 'initial' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-initial-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_initial(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'before html' insertion mode.
+	 *
+	 * This internal function performs the 'before html' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-before-html-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_before_html(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'before head' insertion mode.
+	 *
+	 * This internal function performs the 'before head' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-before-head-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_before_head(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in head' insertion mode.
+	 *
+	 * This internal function performs the 'in head' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inhead
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_head(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in head noscript' insertion mode.
+	 *
+	 * This internal function performs the 'in head noscript' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inheadnoscript
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_head_noscript(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'after head' insertion mode.
+	 *
+	 * This internal function performs the 'after head' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-after-head-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_after_head(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in body' insertion mode.
+	 *
+	 * This internal function performs the 'in body' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inbody
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_body(): bool {
+		$token_name = $this->get_token_name();
+		$token_type = $this->get_token_type();
+		$op_sigil   = '#tag' === $token_type ? ( parent::is_tag_closer() ? '-' : '+' ) : '';
+		$op         = "{$op_sigil}{$token_name}";
+
+		switch ( $op ) {
+			case '#comment':
+			case '#funky-comment':
+			case '#presumptuous-tag':
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			case '#text':
+				$this->reconstruct_active_formatting_elements();
+
+				$current_token = $this->bookmarks[ $this->state->current_token->bookmark_name ];
+
+				/*
+				 * > A character token that is U+0000 NULL
+				 *
+				 * Any successive sequence of NULL bytes is ignored and won't
+				 * trigger active format reconstruction. Therefore, if the text
+				 * only comprises NULL bytes then the token should be ignored
+				 * here, but if there are any other characters in the stream
+				 * the active formats should be reconstructed.
+				 */
+				if (
+					1 <= $current_token->length &&
+					"\x00" === $this->html[ $current_token->start ] &&
+					strspn( $this->html, "\x00", $current_token->start, $current_token->length ) === $current_token->length
+				) {
+					// Parse error: ignore the token.
+					return $this->step();
+				}
+
+				/*
+				 * Whitespace-only text does not affect the frameset-ok flag.
+				 * It is probably inter-element whitespace, but it may also
+				 * contain character references which decode only to whitespace.
+				 */
+				$text = $this->get_modifiable_text();
+				if ( strlen( $text ) !== strspn( $text, " \t\n\f\r" ) ) {
+					$this->state->frameset_ok = false;
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			case 'html':
+				/*
+				 * > A DOCTYPE token
+				 * > Parse error. Ignore the token.
+				 */
+				return $this->step();
+
+			/*
+			 * > A start tag whose tag name is "button"
+			 */
+			case '+BUTTON':
+				if ( $this->state->stack_of_open_elements->has_element_in_scope( 'BUTTON' ) ) {
+					// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
+					$this->generate_implied_end_tags();
+					$this->state->stack_of_open_elements->pop_until( 'BUTTON' );
+				}
+
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->frameset_ok = false;
+
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "address", "article", "aside",
+			 * > "blockquote", "center", "details", "dialog", "dir", "div", "dl",
+			 * > "fieldset", "figcaption", "figure", "footer", "header", "hgroup",
+			 * > "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"
+			 */
+			case '+ADDRESS':
+			case '+ARTICLE':
+			case '+ASIDE':
+			case '+BLOCKQUOTE':
+			case '+CENTER':
+			case '+DETAILS':
+			case '+DIALOG':
+			case '+DIR':
+			case '+DIV':
+			case '+DL':
+			case '+FIELDSET':
+			case '+FIGCAPTION':
+			case '+FIGURE':
+			case '+FOOTER':
+			case '+HEADER':
+			case '+HGROUP':
+			case '+MAIN':
+			case '+MENU':
+			case '+NAV':
+			case '+OL':
+			case '+P':
+			case '+SEARCH':
+			case '+SECTION':
+			case '+SUMMARY':
+			case '+UL':
+				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->close_a_p_element();
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > An end tag whose tag name is one of: "address", "article", "aside", "blockquote",
+			 * > "button", "center", "details", "dialog", "dir", "div", "dl", "fieldset",
+			 * > "figcaption", "figure", "footer", "header", "hgroup", "listing", "main",
+			 * > "menu", "nav", "ol", "pre", "search", "section", "summary", "ul"
+			 */
+			case '-ADDRESS':
+			case '-ARTICLE':
+			case '-ASIDE':
+			case '-BLOCKQUOTE':
+			case '-BUTTON':
+			case '-CENTER':
+			case '-DETAILS':
+			case '-DIALOG':
+			case '-DIR':
+			case '-DIV':
+			case '-DL':
+			case '-FIELDSET':
+			case '-FIGCAPTION':
+			case '-FIGURE':
+			case '-FOOTER':
+			case '-HEADER':
+			case '-HGROUP':
+			case '-LISTING':
+			case '-MAIN':
+			case '-MENU':
+			case '-NAV':
+			case '-OL':
+			case '-PRE':
+			case '-SEARCH':
+			case '-SECTION':
+			case '-SUMMARY':
+			case '-UL':
+				if ( ! $this->state->stack_of_open_elements->has_element_in_scope( $token_name ) ) {
+					// @todo Report parse error.
+					// Ignore the token.
+					return $this->step();
+				}
+
+				$this->generate_implied_end_tags();
+				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
+					// @todo Record parse error: this error doesn't impact parsing.
+				}
+				$this->state->stack_of_open_elements->pop_until( $token_name );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"
+			 */
+			case '+H1':
+			case '+H2':
+			case '+H3':
+			case '+H4':
+			case '+H5':
+			case '+H6':
+				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->close_a_p_element();
+				}
+
+				if (
+					in_array(
+						$this->state->stack_of_open_elements->current_node()->node_name,
+						array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ),
+						true
+					)
+				) {
+					// @todo Indicate a parse error once it's possible.
+					$this->state->stack_of_open_elements->pop();
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "pre", "listing"
+			 */
+			case '+PRE':
+			case '+LISTING':
+				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->close_a_p_element();
+				}
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->frameset_ok = false;
+				return true;
+
+			/*
+			 * > An end tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"
+			 */
+			case '-H1':
+			case '-H2':
+			case '-H3':
+			case '-H4':
+			case '-H5':
+			case '-H6':
+				if ( ! $this->state->stack_of_open_elements->has_element_in_scope( '(internal: H1 through H6 - do not use)' ) ) {
+					/*
+					 * This is a parse error; ignore the token.
+					 *
+					 * @todo Indicate a parse error once it's possible.
+					 */
+					return $this->step();
+				}
+
+				$this->generate_implied_end_tags();
+
+				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
+					// @todo Record parse error: this error doesn't impact parsing.
+				}
+
+				$this->state->stack_of_open_elements->pop_until( '(internal: H1 through H6 - do not use)' );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is "li"
+			 * > A start tag whose tag name is one of: "dd", "dt"
+			 */
+			case '+DD':
+			case '+DT':
+			case '+LI':
+				$this->state->frameset_ok = false;
+				$node                     = $this->state->stack_of_open_elements->current_node();
+				$is_li                    = 'LI' === $token_name;
+
+				in_body_list_loop:
+				/*
+				 * The logic for LI and DT/DD is the same except for one point: LI elements _only_
+				 * close other LI elements, but a DT or DD element closes _any_ open DT or DD element.
+				 */
+				if ( $is_li ? 'LI' === $node->node_name : ( 'DD' === $node->node_name || 'DT' === $node->node_name ) ) {
+					$node_name = $is_li ? 'LI' : $node->node_name;
+					$this->generate_implied_end_tags( $node_name );
+					if ( ! $this->state->stack_of_open_elements->current_node_is( $node_name ) ) {
+						// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
+					}
+
+					$this->state->stack_of_open_elements->pop_until( $node_name );
+					goto in_body_list_done;
+				}
+
+				if (
+					'ADDRESS' !== $node->node_name &&
+					'DIV' !== $node->node_name &&
+					'P' !== $node->node_name &&
+					$this->is_special( $node->node_name )
+				) {
+					/*
+					 * > If node is in the special category, but is not an address, div,
+					 * > or p element, then jump to the step labeled done below.
+					 */
+					goto in_body_list_done;
+				} else {
+					/*
+					 * > Otherwise, set node to the previous entry in the stack of open elements
+					 * > and return to the step labeled loop.
+					 */
+					foreach ( $this->state->stack_of_open_elements->walk_up( $node ) as $item ) {
+						$node = $item;
+						break;
+					}
+					goto in_body_list_loop;
+				}
+
+				in_body_list_done:
+				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->close_a_p_element();
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > An end tag whose tag name is "li"
+			 * > An end tag whose tag name is one of: "dd", "dt"
+			 */
+			case '-DD':
+			case '-DT':
+			case '-LI':
+				if (
+					/*
+					 * An end tag whose tag name is "li":
+					 * If the stack of open elements does not have an li element in list item scope,
+					 * then this is a parse error; ignore the token.
+					 */
+					(
+						'LI' === $token_name &&
+						! $this->state->stack_of_open_elements->has_element_in_list_item_scope( 'LI' )
+					) ||
+					/*
+					 * An end tag whose tag name is one of: "dd", "dt":
+					 * If the stack of open elements does not have an element in scope that is an
+					 * HTML element with the same tag name as that of the token, then this is a
+					 * parse error; ignore the token.
+					 */
+					(
+						'LI' !== $token_name &&
+						! $this->state->stack_of_open_elements->has_element_in_scope( $token_name )
+					)
+				) {
+					/*
+					 * This is a parse error, ignore the token.
+					 *
+					 * @todo Indicate a parse error once it's possible.
+					 */
+					return $this->step();
+				}
+
+				$this->generate_implied_end_tags( $token_name );
+
+				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
+					// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
+				}
+
+				$this->state->stack_of_open_elements->pop_until( $token_name );
+				return true;
+
+			/*
+			 * > An end tag whose tag name is "p"
+			 */
+			case '-P':
+				if ( ! $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->insert_html_element( $this->state->current_token );
+				}
+
+				$this->close_a_p_element();
+				return true;
+
+			// > A start tag whose tag name is "a"
+			case '+A':
+				foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
+					switch ( $item->node_name ) {
+						case 'marker':
+							break;
+
+						case 'A':
+							$this->run_adoption_agency_algorithm();
+							$this->state->active_formatting_elements->remove_node( $item );
+							$this->state->stack_of_open_elements->remove_node( $item );
+							break;
+					}
+				}
+
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->active_formatting_elements->push( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "b", "big", "code", "em", "font", "i",
+			 * > "s", "small", "strike", "strong", "tt", "u"
+			 */
+			case '+B':
+			case '+BIG':
+			case '+CODE':
+			case '+EM':
+			case '+FONT':
+			case '+I':
+			case '+S':
+			case '+SMALL':
+			case '+STRIKE':
+			case '+STRONG':
+			case '+TT':
+			case '+U':
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->active_formatting_elements->push( $this->state->current_token );
+				return true;
+
+			/*
+			 * > An end tag whose tag name is one of: "a", "b", "big", "code", "em", "font", "i",
+			 * > "nobr", "s", "small", "strike", "strong", "tt", "u"
+			 */
+			case '-A':
+			case '-B':
+			case '-BIG':
+			case '-CODE':
+			case '-EM':
+			case '-FONT':
+			case '-I':
+			case '-S':
+			case '-SMALL':
+			case '-STRIKE':
+			case '-STRONG':
+			case '-TT':
+			case '-U':
+				$this->run_adoption_agency_algorithm();
+				return true;
+
+			/*
+			 * > An end tag whose tag name is "br"
+			 * >   Parse error. Drop the attributes from the token, and act as described in the next
+			 * >   entry; i.e. act as if this was a "br" start tag token with no attributes, rather
+			 * >   than the end tag token that it actually is.
+			 */
+			case '-BR':
+				$this->bail( 'Closing BR tags require unimplemented special handling.' );
+				// This return required because PHPCS can't determine that the call to bail() throws.
+				return false;
+
+			/*
+			 * > A start tag whose tag name is one of: "area", "br", "embed", "img", "keygen", "wbr"
+			 */
+			case '+AREA':
+			case '+BR':
+			case '+EMBED':
+			case '+IMG':
+			case '+KEYGEN':
+			case '+WBR':
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->frameset_ok = false;
+				return true;
+
+			/*
+			 * > A start tag whose tag name is "input"
+			 */
+			case '+INPUT':
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$type_attribute = $this->get_attribute( 'type' );
+				/*
+				 * > If the token does not have an attribute with the name "type", or if it does,
+				 * > but that attribute's value is not an ASCII case-insensitive match for the
+				 * > string "hidden", then: set the frameset-ok flag to "not ok".
+				 */
+				if ( ! is_string( $type_attribute ) || 'hidden' !== strtolower( $type_attribute ) ) {
+					$this->state->frameset_ok = false;
+				}
+				return true;
+
+			/*
+			 * > A start tag whose tag name is "hr"
+			 */
+			case '+HR':
+				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
+					$this->close_a_p_element();
+				}
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->frameset_ok = false;
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "param", "source", "track"
+			 */
+			case '+PARAM':
+			case '+SOURCE':
+			case '+TRACK':
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is "select"
+			 */
+			case '+SELECT':
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				$this->state->frameset_ok = false;
+
+				switch ( $this->state->insertion_mode ) {
+					/*
+					 * > If the insertion mode is one of "in table", "in caption", "in table body", "in row",
+					 * > or "in cell", then switch the insertion mode to "in select in table".
+					 */
+					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE:
+					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION:
+					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY:
+					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW:
+					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL:
+						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE;
+						break;
+
+					/*
+					 * > Otherwise, switch the insertion mode to "in select".
+					 */
+					default:
+						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT;
+						break;
+				}
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "optgroup", "option"
+			 */
+			case '+OPTGROUP':
+			case '+OPTION':
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
+					$this->state->stack_of_open_elements->pop();
+				}
+				$this->reconstruct_active_formatting_elements();
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+		}
+
+		/*
+		 * These tags require special handling in the 'in body' insertion mode
+		 * but that handling hasn't yet been implemented.
+		 *
+		 * As the rules for each tag are implemented, the corresponding tag
+		 * name should be removed from this list. An accompanying test should
+		 * help ensure this list is maintained.
+		 *
+		 * @see Tests_HtmlApi_WpHtmlProcessor::test_step_in_body_fails_on_unsupported_tags
+		 *
+		 * Since this switch structure throws a WP_HTML_Unsupported_Exception, it's
+		 * possible to handle "any other start tag" and "any other end tag" below,
+		 * as that guarantees execution doesn't proceed for the unimplemented tags.
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody
+		 */
+		switch ( $token_name ) {
+			case 'APPLET':
+			case 'BASE':
+			case 'BASEFONT':
+			case 'BGSOUND':
+			case 'BODY':
+			case 'CAPTION':
+			case 'COL':
+			case 'COLGROUP':
+			case 'FORM':
+			case 'FRAME':
+			case 'FRAMESET':
+			case 'HEAD':
+			case 'HTML':
+			case 'IFRAME':
+			case 'LINK':
+			case 'MARQUEE':
+			case 'MATH':
+			case 'META':
+			case 'NOBR':
+			case 'NOEMBED':
+			case 'NOFRAMES':
+			case 'NOSCRIPT':
+			case 'OBJECT':
+			case 'PLAINTEXT':
+			case 'RB':
+			case 'RP':
+			case 'RT':
+			case 'RTC':
+			case 'SARCASM':
+			case 'SCRIPT':
+			case 'STYLE':
+			case 'SVG':
+			case 'TABLE':
+			case 'TBODY':
+			case 'TD':
+			case 'TEMPLATE':
+			case 'TEXTAREA':
+			case 'TFOOT':
+			case 'TH':
+			case 'THEAD':
+			case 'TITLE':
+			case 'TR':
+			case 'XMP':
+				$this->bail( "Cannot process {$token_name} element." );
+		}
+
+		if ( ! parent::is_tag_closer() ) {
+			/*
+			 * > Any other start tag
+			 */
+			$this->reconstruct_active_formatting_elements();
+			$this->insert_html_element( $this->state->current_token );
+			return true;
+		} else {
+			/*
+			 * > Any other end tag
+			 */
+
+			/*
+			 * Find the corresponding tag opener in the stack of open elements, if
+			 * it exists before reaching a special element, which provides a kind
+			 * of boundary in the stack. For example, a `</custom-tag>` should not
+			 * close anything beyond its containing `P` or `DIV` element.
+			 */
+			foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
+				if ( $token_name === $node->node_name ) {
+					break;
+				}
+
+				if ( self::is_special( $node->node_name ) ) {
+					// This is a parse error, ignore the token.
+					return $this->step();
+				}
+			}
+
+			$this->generate_implied_end_tags( $token_name );
+			if ( $node !== $this->state->stack_of_open_elements->current_node() ) {
+				// @todo Record parse error: this error doesn't impact parsing.
+			}
+
+			foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
+				$this->state->stack_of_open_elements->pop();
+				if ( $node === $item ) {
+					return true;
+				}
+			}
+		}
+	}
+
+	/**
+	 * Parses next element in the 'in table' insertion mode.
+	 *
+	 * This internal function performs the 'in table' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intable
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_table(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in table text' insertion mode.
+	 *
+	 * This internal function performs the 'in table text' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intabletext
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_table_text(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in caption' insertion mode.
+	 *
+	 * This internal function performs the 'in caption' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-incaption
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_caption(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in column group' insertion mode.
+	 *
+	 * This internal function performs the 'in column group' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-incolgroup
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_column_group(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in table body' insertion mode.
+	 *
+	 * This internal function performs the 'in table body' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intbody
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_table_body(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in row' insertion mode.
+	 *
+	 * This internal function performs the 'in row' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intr
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_row(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in cell' insertion mode.
+	 *
+	 * This internal function performs the 'in cell' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intd
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_cell(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in select' insertion mode.
+	 *
+	 * This internal function performs the 'in select' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inselect
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_select(): bool {
+		$token_name = $this->get_token_name();
+		$token_type = $this->get_token_type();
+		$op_sigil   = '#tag' === $token_type ? ( parent::is_tag_closer() ? '-' : '+' ) : '';
+		$op         = "{$op_sigil}{$token_name}";
+
+		switch ( $op ) {
+			/*
+			 * > Any other character token
+			 */
+			case '#text':
+				$current_token = $this->bookmarks[ $this->state->current_token->bookmark_name ];
+
+				/*
+				 * > A character token that is U+0000 NULL
+				 *
+				 * If a text node only comprises null bytes then it should be
+				 * entirely ignored and should not return to calling code.
+				 */
+				if (
+					1 <= $current_token->length &&
+					"\x00" === $this->html[ $current_token->start ] &&
+					strspn( $this->html, "\x00", $current_token->start, $current_token->length ) === $current_token->length
+				) {
+					// Parse error: ignore the token.
+					return $this->step();
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A comment token
+			 */
+			case '#comment':
+			case '#funky-comment':
+			case '#presumptuous-tag':
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A DOCTYPE token
+			 */
+			case 'html':
+				// Parse error: ignore the token.
+				return $this->step();
+
+			/*
+			 * > A start tag whose tag name is "html"
+			 */
+			case '+HTML':
+				return $this->step_in_body();
+
+			/*
+			 * > A start tag whose tag name is "option"
+			 */
+			case '+OPTION':
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
+					$this->state->stack_of_open_elements->pop();
+				}
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > A start tag whose tag name is "optgroup"
+			 * > A start tag whose tag name is "hr"
+			 *
+			 * These rules are identical except for the treatment of the self-closing flag and
+			 * the subsequent pop of the HR void element, all of which is handled elsewhere in the processor.
+			 */
+			case '+OPTGROUP':
+			case '+HR':
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
+					$this->state->stack_of_open_elements->pop();
+				}
+
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTGROUP' ) ) {
+					$this->state->stack_of_open_elements->pop();
+				}
+
+				$this->insert_html_element( $this->state->current_token );
+				return true;
+
+			/*
+			 * > An end tag whose tag name is "optgroup"
+			 */
+			case '-OPTGROUP':
+				$current_node = $this->state->stack_of_open_elements->current_node();
+				if ( $current_node && 'OPTION' === $current_node->node_name ) {
+					foreach ( $this->state->stack_of_open_elements->walk_up( $current_node ) as $parent ) {
+						break;
+					}
+					if ( $parent && 'OPTGROUP' === $parent->node_name ) {
+						$this->state->stack_of_open_elements->pop();
+					}
+				}
+
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTGROUP' ) ) {
+					$this->state->stack_of_open_elements->pop();
+					return true;
+				}
+
+				// Parse error: ignore the token.
+				return $this->step();
+
+			/*
+			 * > An end tag whose tag name is "option"
+			 */
+			case '-OPTION':
+				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
+					$this->state->stack_of_open_elements->pop();
+					return true;
+				}
+
+				// Parse error: ignore the token.
+				return $this->step();
+
+			/*
+			 * > An end tag whose tag name is "select"
+			 * > A start tag whose tag name is "select"
+			 *
+			 * > It just gets treated like an end tag.
+			 */
+			case '-SELECT':
+			case '+SELECT':
+				if ( ! $this->state->stack_of_open_elements->has_element_in_select_scope( 'SELECT' ) ) {
+					// Parse error: ignore the token.
+					return $this->step();
+				}
+				$this->state->stack_of_open_elements->pop_until( 'SELECT' );
+				$this->reset_insertion_mode();
+				return true;
+
+			/*
+			 * > A start tag whose tag name is one of: "input", "keygen", "textarea"
+			 *
+			 * All three of these tags are considered a parse error when found in this insertion mode.
+			 */
+			case '+INPUT':
+			case '+KEYGEN':
+			case '+TEXTAREA':
+				if ( ! $this->state->stack_of_open_elements->has_element_in_select_scope( 'SELECT' ) ) {
+					// Ignore the token.
+					return $this->step();
+				}
+				$this->state->stack_of_open_elements->pop_until( 'SELECT' );
+				$this->reset_insertion_mode();
+				return $this->step( self::REPROCESS_CURRENT_NODE );
+
+			/*
+			 * > A start tag whose tag name is one of: "script", "template"
+			 * > An end tag whose tag name is "template"
+			 */
+			case '+SCRIPT':
+			case '+TEMPLATE':
+			case '-TEMPLATE':
+				return $this->step_in_head();
+		}
+
+		/*
+		 * > Anything else
+		 * >   Parse error: ignore the token.
+		 */
+		return $this->step();
+	}
+
+	/**
+	 * Parses next element in the 'in select in table' insertion mode.
+	 *
+	 * This internal function performs the 'in select in table' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inselectintable
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_select_in_table(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in template' insertion mode.
+	 *
+	 * This internal function performs the 'in template' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intemplate
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_template(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'after body' insertion mode.
+	 *
+	 * This internal function performs the 'after body' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-afterbody
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_after_body(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in frameset' insertion mode.
+	 *
+	 * This internal function performs the 'in frameset' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inframeset
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_frameset(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'after frameset' insertion mode.
+	 *
+	 * This internal function performs the 'after frameset' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-afterframeset
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_after_frameset(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'after after body' insertion mode.
+	 *
+	 * This internal function performs the 'after after body' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-after-after-body-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_after_after_body(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'after after frameset' insertion mode.
+	 *
+	 * This internal function performs the 'after after frameset' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-after-after-frameset-insertion-mode
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_after_after_frameset(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/**
+	 * Parses next element in the 'in foreign content' insertion mode.
+	 *
+	 * This internal function performs the 'in foreign content' insertion mode
+	 * logic for the generalized WP_HTML_Processor::step() function.
+	 *
+	 * @since 6.7.0 Stub implementation.
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inforeign
+	 * @see WP_HTML_Processor::step
+	 *
+	 * @return bool Whether an element was found.
+	 */
+	private function step_in_foreign_content(): bool {
+		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
+	}
+
+	/*
+	 * Internal helpers
+	 */
+
+	/**
+	 * Creates a new bookmark for the currently-matched token and returns the generated name.
+	 *
+	 * @since 6.4.0
+	 * @since 6.5.0 Renamed from bookmark_tag() to bookmark_token().
+	 *
+	 * @throws Exception When unable to allocate requested bookmark.
+	 *
+	 * @return string|false Name of created bookmark, or false if unable to create.
+	 */
+	private function bookmark_token() {
+		if ( ! parent::set_bookmark( ++$this->bookmark_counter ) ) {
+			$this->last_error = self::ERROR_EXCEEDED_MAX_BOOKMARKS;
+			throw new Exception( 'could not allocate bookmark' );
+		}
+
+		return "{$this->bookmark_counter}";
+	}
+
+	/*
+	 * HTML semantic overrides for Tag Processor
+	 */
+
+	/**
+	 * Returns the uppercase name of the matched tag.
+	 *
+	 * The semantic rules for HTML specify that certain tags be reprocessed
+	 * with a different tag name. Because of this, the tag name presented
+	 * by the HTML Processor may differ from the one reported by the HTML
+	 * Tag Processor, which doesn't apply these semantic rules.
+	 *
+	 * Example:
+	 *
+	 *     $processor = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
+	 *     $processor->next_tag() === true;
+	 *     $processor->get_tag() === 'DIV';
+	 *
+	 *     $processor->next_tag() === false;
+	 *     $processor->get_tag() === null;
+	 *
+	 * @since 6.4.0
+	 *
+	 * @return string|null Name of currently matched tag in input HTML, or `null` if none found.
+	 */
+	public function get_tag(): ?string {
+		if ( null !== $this->last_error ) {
+			return null;
+		}
+
+		if ( $this->is_virtual() ) {
+			return $this->current_element->token->node_name;
+		}
+
+		$tag_name = parent::get_tag();
+
+		switch ( $tag_name ) {
+			case 'IMAGE':
+				/*
+				 * > A start tag whose tag name is "image"
+				 * > Change the token's tag name to "img" and reprocess it. (Don't ask.)
+				 */
+				return 'IMG';
+
+			default:
+				return $tag_name;
+		}
+	}
+
+	/**
+	 * Indicates if the currently matched tag contains the self-closing flag.
+	 *
+	 * No HTML elements ought to have the self-closing flag and for those, the self-closing
+	 * flag will be ignored. For void elements this is benign because they "self close"
+	 * automatically. For non-void HTML elements though problems will appear if someone
+	 * intends to use a self-closing element in place of that element with an empty body.
+	 * For HTML foreign elements and custom elements the self-closing flag determines if
+	 * they self-close or not.
+	 *
+	 * This function does not determine if a tag is self-closing,
+	 * but only if the self-closing flag is present in the syntax.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @return bool Whether the currently matched tag contains the self-closing flag.
+	 */
+	public function has_self_closing_flag(): bool {
+		return $this->is_virtual() ? false : parent::has_self_closing_flag();
+	}
+
+	/**
+	 * Returns the node name represented by the token.
+	 *
+	 * This matches the DOM API value `nodeName`. Some values
+	 * are static, such as `#text` for a text node, while others
+	 * are dynamically generated from the token itself.
+	 *
+	 * Dynamic names:
+	 *  - Uppercase tag name for tag matches.
+	 *  - `html` for DOCTYPE declarations.
+	 *
+	 * Note that if the Tag Processor is not matched on a token
+	 * then this function will return `null`, either because it
+	 * hasn't yet found a token or because it reached the end
+	 * of the document without matching a token.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @return string|null Name of the matched token.
+	 */
+	public function get_token_name(): ?string {
+		return $this->is_virtual()
+			? $this->current_element->token->node_name
+			: parent::get_token_name();
+	}
+
+	/**
+	 * Indicates the kind of matched token, if any.
+	 *
+	 * This differs from `get_token_name()` in that it always
+	 * returns a static string indicating the type, whereas
+	 * `get_token_name()` may return values derived from the
+	 * token itself, such as a tag name or processing
+	 * instruction tag.
+	 *
+	 * Possible values:
+	 *  - `#tag` when matched on a tag.
+	 *  - `#text` when matched on a text node.
+	 *  - `#cdata-section` when matched on a CDATA node.
+	 *  - `#comment` when matched on a comment.
+	 *  - `#doctype` when matched on a DOCTYPE declaration.
+	 *  - `#presumptuous-tag` when matched on an empty tag closer.
+	 *  - `#funky-comment` when matched on a funky comment.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @return string|null What kind of token is matched, or null.
+	 */
+	public function get_token_type(): ?string {
+		if ( $this->is_virtual() ) {
+			/*
+			 * This logic comes from the Tag Processor.
+			 *
+			 * @todo It would be ideal not to repeat this here, but it's not clearly
+			 *       better to allow passing a token name to `get_token_type()`.
+			 */
+			$node_name     = $this->current_element->token->node_name;
+			$starting_char = $node_name[0];
+			if ( 'A' <= $starting_char && 'Z' >= $starting_char ) {
+				return '#tag';
+			}
+
+			if ( 'html' === $node_name ) {
+				return '#doctype';
+			}
+
+			return $node_name;
+		}
+
+		return parent::get_token_type();
+	}
+
+	/**
+	 * Returns the value of a requested attribute from a matched tag opener if that attribute exists.
+	 *
+	 * Example:
+	 *
+	 *     $p = WP_HTML_Processor::create_fragment( '<div enabled class="test" data-test-id="14">Test</div>' );
+	 *     $p->next_token() === true;
+	 *     $p->get_attribute( 'data-test-id' ) === '14';
+	 *     $p->get_attribute( 'enabled' ) === true;
+	 *     $p->get_attribute( 'aria-label' ) === null;
+	 *
+	 *     $p->next_tag() === false;
+	 *     $p->get_attribute( 'class' ) === null;
+	 *
+	 * @since 6.6.0 Subclassed for HTML Processor.
+	 *
+	 * @param string $name Name of attribute whose value is requested.
+	 * @return string|true|null Value of attribute or `null` if not available. Boolean attributes return `true`.
+	 */
+	public function get_attribute( $name ) {
+		return $this->is_virtual() ? null : parent::get_attribute( $name );
+	}
+
+	/**
+	 * Updates or creates a new attribute on the currently matched tag with the passed value.
+	 *
+	 * For boolean attributes special handling is provided:
+	 *  - When `true` is passed as the value, then only the attribute name is added to the tag.
+	 *  - When `false` is passed, the attribute gets removed if it existed before.
+	 *
+	 * For string attributes, the value is escaped using the `esc_attr` function.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @param string      $name  The attribute name to target.
+	 * @param string|bool $value The new attribute value.
+	 * @return bool Whether an attribute value was set.
+	 */
+	public function set_attribute( $name, $value ): bool {
+		return $this->is_virtual() ? false : parent::set_attribute( $name, $value );
+	}
+
+	/**
+	 * Remove an attribute from the currently-matched tag.
+	 *
+	 * @since 6.6.0 Subclassed for HTML Processor.
+	 *
+	 * @param string $name The attribute name to remove.
+	 * @return bool Whether an attribute was removed.
+	 */
+	public function remove_attribute( $name ): bool {
+		return $this->is_virtual() ? false : parent::remove_attribute( $name );
+	}
+
+	/**
+	 * Gets lowercase names of all attributes matching a given prefix in the current tag.
+	 *
+	 * Note that matching is case-insensitive. This is in accordance with the spec:
+	 *
+	 * > There must never be two or more attributes on
+	 * > the same start tag whose names are an ASCII
+	 * > case-insensitive match for each other.
+	 *     - HTML 5 spec
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
+	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
+	 *
+	 *     $p->next_tag() === false;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+	 *
+	 * @param string $prefix Prefix of requested attribute names.
+	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
+	 */
+	public function get_attribute_names_with_prefix( $prefix ): ?array {
+		return $this->is_virtual() ? null : parent::get_attribute_names_with_prefix( $prefix );
+	}
+
+	/**
+	 * Adds a new class name to the currently matched tag.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @param string $class_name The class name to add.
+	 * @return bool Whether the class was set to be added.
+	 */
+	public function add_class( $class_name ): bool {
+		return $this->is_virtual() ? false : parent::add_class( $class_name );
+	}
+
+	/**
+	 * Removes a class name from the currently matched tag.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @param string $class_name The class name to remove.
+	 * @return bool Whether the class was set to be removed.
+	 */
+	public function remove_class( $class_name ): bool {
+		return $this->is_virtual() ? false : parent::remove_class( $class_name );
+	}
+
+	/**
+	 * Returns if a matched tag contains the given ASCII case-insensitive class name.
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @param string $wanted_class Look for this CSS class name, ASCII case-insensitive.
+	 * @return bool|null Whether the matched tag contains the given class name, or null if not matched.
+	 */
+	public function has_class( $wanted_class ): ?bool {
+		return $this->is_virtual() ? null : parent::has_class( $wanted_class );
+	}
+
+	/**
+	 * Generator for a foreach loop to step through each class name for the matched tag.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $p = WP_HTML_Processor::create_fragment( "<div class='free &lt;egg&lt;\tlang-en'>" );
+	 *     $p->next_tag();
+	 *     foreach ( $p->class_list() as $class_name ) {
+	 *         echo "{$class_name} ";
+	 *     }
+	 *     // Outputs: "free <egg> lang-en "
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 */
+	public function class_list() {
+		return $this->is_virtual() ? null : parent::class_list();
+	}
+
+	/**
+	 * Returns the modifiable text for a matched token, or an empty string.
+	 *
+	 * Modifiable text is text content that may be read and changed without
+	 * changing the HTML structure of the document around it. This includes
+	 * the contents of `#text` nodes in the HTML as well as the inner
+	 * contents of HTML comments, Processing Instructions, and others, even
+	 * though these nodes aren't part of a parsed DOM tree. They also contain
+	 * the contents of SCRIPT and STYLE tags, of TEXTAREA tags, and of any
+	 * other section in an HTML document which cannot contain HTML markup (DATA).
+	 *
+	 * If a token has no modifiable text then an empty string is returned to
+	 * avoid needless crashing or type errors. An empty string does not mean
+	 * that a token has modifiable text, and a token with modifiable text may
+	 * have an empty string (e.g. a comment with no contents).
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @return string
+	 */
+	public function get_modifiable_text(): string {
+		return $this->is_virtual() ? '' : parent::get_modifiable_text();
+	}
+
+	/**
+	 * Indicates what kind of comment produced the comment node.
+	 *
+	 * Because there are different kinds of HTML syntax which produce
+	 * comments, the Tag Processor tracks and exposes this as a type
+	 * for the comment. Nominally only regular HTML comments exist as
+	 * they are commonly known, but a number of unrelated syntax errors
+	 * also produce comments.
+	 *
+	 * @see self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT
+	 * @see self::COMMENT_AS_CDATA_LOOKALIKE
+	 * @see self::COMMENT_AS_INVALID_HTML
+	 * @see self::COMMENT_AS_HTML_COMMENT
+	 * @see self::COMMENT_AS_PI_NODE_LOOKALIKE
+	 *
+	 * @since 6.6.0 Subclassed for the HTML Processor.
+	 *
+	 * @return string|null
+	 */
+	public function get_comment_type(): ?string {
+		return $this->is_virtual() ? null : parent::get_comment_type();
+	}
+
+	/**
+	 * Removes a bookmark that is no longer needed.
+	 *
+	 * Releasing a bookmark frees up the small
+	 * performance overhead it requires.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string $bookmark_name Name of the bookmark to remove.
+	 * @return bool Whether the bookmark already existed before removal.
+	 */
+	public function release_bookmark( $bookmark_name ): bool {
+		return parent::release_bookmark( "_{$bookmark_name}" );
+	}
+
+	/**
+	 * Moves the internal cursor in the HTML Processor to a given bookmark's location.
+	 *
+	 * Be careful! Seeking backwards to a previous location resets the parser to the
+	 * start of the document and reparses the entire contents up until it finds the
+	 * sought-after bookmarked location.
+	 *
+	 * In order to prevent accidental infinite loops, there's a
+	 * maximum limit on the number of times seek() can be called.
+	 *
+	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string $bookmark_name Jump to the place in the document identified by this bookmark name.
+	 * @return bool Whether the internal cursor was successfully moved to the bookmark's location.
+	 */
+	public function seek( $bookmark_name ): bool {
+		// Flush any pending updates to the document before beginning.
+		$this->get_updated_html();
+
+		$actual_bookmark_name = "_{$bookmark_name}";
+		$processor_started_at = $this->state->current_token
+			? $this->bookmarks[ $this->state->current_token->bookmark_name ]->start
+			: 0;
+		$bookmark_starts_at   = $this->bookmarks[ $actual_bookmark_name ]->start;
+		$direction            = $bookmark_starts_at > $processor_started_at ? 'forward' : 'backward';
+
+		/*
+		 * If seeking backwards, it's possible that the sought-after bookmark exists within an element
+		 * which has been closed before the current cursor; in other words, it has already been removed
+		 * from the stack of open elements. This means that it's insufficient to simply pop off elements
+		 * from the stack of open elements which appear after the bookmarked location and then jump to
+		 * that location, as the elements which were open before won't be re-opened.
+		 *
+		 * In order to maintain consistency, the HTML Processor rewinds to the start of the document
+		 * and reparses everything until it finds the sought-after bookmark.
+		 *
+		 * There are potentially better ways to do this: cache the parser state for each bookmark and
+		 * restore it when seeking; store an immutable and idempotent register of where elements open
+		 * and close.
+		 *
+		 * If caching the parser state it will be essential to properly maintain the cached stack of
+		 * open elements and active formatting elements when modifying the document. This could be a
+		 * tedious and time-consuming process as well, and so for now will not be performed.
+		 *
+		 * It may be possible to track bookmarks for where elements open and close, and in doing so
+		 * be able to quickly recalculate breadcrumbs for any element in the document. It may even
+		 * be possible to remove the stack of open elements and compute it on the fly this way.
+		 * If doing this, the parser would need to track the opening and closing locations for all
+		 * tokens in the breadcrumb path for any and all bookmarks. By utilizing bookmarks themselves
+		 * this list could be automatically maintained while modifying the document. Finding the
+		 * breadcrumbs would then amount to traversing that list from the start until the token
+		 * being inspected. Once an element closes, if there are no bookmarks pointing to locations
+		 * within that element, then all of these locations may be forgotten to save on memory use
+		 * and computation time.
+		 */
+		if ( 'backward' === $direction ) {
+			/*
+			 * Instead of clearing the parser state and starting fresh, calling the stack methods
+			 * maintains the proper flags in the parser.
+			 */
+			foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
+				if ( 'context-node' === $item->bookmark_name ) {
+					break;
+				}
+
+				$this->state->stack_of_open_elements->remove_node( $item );
+			}
+
+			foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
+				if ( 'context-node' === $item->bookmark_name ) {
+					break;
+				}
+
+				$this->state->active_formatting_elements->remove_node( $item );
+			}
+
+			parent::seek( 'context-node' );
+			$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
+			$this->state->frameset_ok    = true;
+			$this->element_queue         = array();
+			$this->current_element       = null;
+
+			if ( isset( $this->context_node ) ) {
+				$this->breadcrumbs = array_slice( $this->breadcrumbs, 0, 2 );
+			} else {
+				$this->breadcrumbs = array();
+			}
+		}
+
+		// When moving forwards, reparse the document until reaching the same location as the original bookmark.
+		if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
+			return true;
+		}
+
+		while ( $this->next_token() ) {
+			if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
+				while ( isset( $this->current_element ) && Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation ) {
+					$this->current_element = array_shift( $this->element_queue );
+				}
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Sets a bookmark in the HTML document.
+	 *
+	 * Bookmarks represent specific places or tokens in the HTML
+	 * document, such as a tag opener or closer. When applying
+	 * edits to a document, such as setting an attribute, the
+	 * text offsets of that token may shift; the bookmark is
+	 * kept updated with those shifts and remains stable unless
+	 * the entire span of text in which the token sits is removed.
+	 *
+	 * Release bookmarks when they are no longer needed.
+	 *
+	 * Example:
+	 *
+	 *     <main><h2>Surprising fact you may not know!</h2></main>
+	 *           ^  ^
+	 *            \-|-- this `H2` opener bookmark tracks the token
+	 *
+	 *     <main class="clickbait"><h2>Surprising fact you may no…
+	 *                             ^  ^
+	 *                              \-|-- it shifts with edits
+	 *
+	 * Bookmarks provide the ability to seek to a previously-scanned
+	 * place in the HTML document. This avoids the need to re-scan
+	 * the entire document.
+	 *
+	 * Example:
+	 *
+	 *     <ul><li>One</li><li>Two</li><li>Three</li></ul>
+	 *                                 ^^^^
+	 *                                 want to note this last item
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( $html );
+	 *     $in_list = false;
+	 *     while ( $p->next_tag( array( 'tag_closers' => $in_list ? 'visit' : 'skip' ) ) ) {
+	 *         if ( 'UL' === $p->get_tag() ) {
+	 *             if ( $p->is_tag_closer() ) {
+	 *                 $in_list = false;
+	 *                 $p->set_bookmark( 'resume' );
+	 *                 if ( $p->seek( 'last-li' ) ) {
+	 *                     $p->add_class( 'last-li' );
+	 *                 }
+	 *                 $p->seek( 'resume' );
+	 *                 $p->release_bookmark( 'last-li' );
+	 *                 $p->release_bookmark( 'resume' );
+	 *             } else {
+	 *                 $in_list = true;
+	 *             }
+	 *         }
+	 *
+	 *         if ( 'LI' === $p->get_tag() ) {
+	 *             $p->set_bookmark( 'last-li' );
+	 *         }
+	 *     }
+	 *
+	 * Bookmarks intentionally hide the internal string offsets
+	 * to which they refer. They are maintained internally as
+	 * updates are applied to the HTML document and therefore
+	 * retain their "position" - the location to which they
+	 * originally pointed. The inability to use bookmarks with
+	 * functions like `substr` is therefore intentional to guard
+	 * against accidentally breaking the HTML.
+	 *
+	 * Because bookmarks allocate memory and require processing
+	 * for every applied update, they are limited and require
+	 * a name. They should not be created with programmatically-made
+	 * names, such as "li_{$index}" with some loop. As a general
+	 * rule they should only be created with string-literal names
+	 * like "start-of-section" or "last-paragraph".
+	 *
+	 * Bookmarks are a powerful tool to enable complicated behavior.
+	 * Consider double-checking that you need this tool if you are
+	 * reaching for it, as inappropriate use could lead to broken
+	 * HTML structure or unwanted processing overhead.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string $bookmark_name Identifies this particular bookmark.
+	 * @return bool Whether the bookmark was successfully created.
+	 */
+	public function set_bookmark( $bookmark_name ): bool {
+		return parent::set_bookmark( "_{$bookmark_name}" );
+	}
+
+	/**
+	 * Checks whether a bookmark with the given name exists.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param string $bookmark_name Name to identify a bookmark that potentially exists.
+	 * @return bool Whether that bookmark exists.
+	 */
+	public function has_bookmark( $bookmark_name ): bool {
+		return parent::has_bookmark( "_{$bookmark_name}" );
+	}
+
+	/*
+	 * HTML Parsing Algorithms
+	 */
+
+	/**
+	 * Closes a P element.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#close-a-p-element
+	 */
+	private function close_a_p_element(): void {
+		$this->generate_implied_end_tags( 'P' );
+		$this->state->stack_of_open_elements->pop_until( 'P' );
+	}
+
+	/**
+	 * Closes elements that have implied end tags.
+	 *
+	 * @since 6.4.0
+	 * @since 6.7.0 Full spec support.
+	 *
+	 * @see https://html.spec.whatwg.org/#generate-implied-end-tags
+	 *
+	 * @param string|null $except_for_this_element Perform as if this element doesn't exist in the stack of open elements.
+	 */
+	private function generate_implied_end_tags( ?string $except_for_this_element = null ): void {
+		$elements_with_implied_end_tags = array(
+			'DD',
+			'DT',
+			'LI',
+			'OPTGROUP',
+			'OPTION',
+			'P',
+			'RB',
+			'RP',
+			'RT',
+			'RTC',
+		);
+
+		$no_exclusions = ! isset( $except_for_this_element );
+
+		while (
+			( $no_exclusions || ! $this->state->stack_of_open_elements->current_node_is( $except_for_this_element ) ) &&
+			in_array( $this->state->stack_of_open_elements->current_node()->node_name, $elements_with_implied_end_tags, true )
+		) {
+			$this->state->stack_of_open_elements->pop();
+		}
+	}
+
+	/**
+	 * Closes elements that have implied end tags, thoroughly.
+	 *
+	 * See the HTML specification for an explanation why this is
+	 * different from generating end tags in the normal sense.
+	 *
+	 * @since 6.4.0
+	 * @since 6.7.0 Full spec support.
+	 *
+	 * @see WP_HTML_Processor::generate_implied_end_tags
+	 * @see https://html.spec.whatwg.org/#generate-implied-end-tags
+	 */
+	private function generate_implied_end_tags_thoroughly(): void {
+		$elements_with_implied_end_tags = array(
+			'CAPTION',
+			'COLGROUP',
+			'DD',
+			'DT',
+			'LI',
+			'OPTGROUP',
+			'OPTION',
+			'P',
+			'RB',
+			'RP',
+			'RT',
+			'RTC',
+			'TBODY',
+			'TD',
+			'TFOOT',
+			'TH',
+			'THEAD',
+			'TR',
+		);
+
+		while ( in_array( $this->state->stack_of_open_elements->current_node()->node_name, $elements_with_implied_end_tags, true ) ) {
+			$this->state->stack_of_open_elements->pop();
+		}
+	}
+
+	/**
+	 * Reconstructs the active formatting elements.
+	 *
+	 * > This has the effect of reopening all the formatting elements that were opened
+	 * > in the current body, cell, or caption (whichever is youngest) that haven't
+	 * > been explicitly closed.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#reconstruct-the-active-formatting-elements
+	 *
+	 * @return bool Whether any formatting elements needed to be reconstructed.
+	 */
+	private function reconstruct_active_formatting_elements(): bool {
+		/*
+		 * > If there are no entries in the list of active formatting elements, then there is nothing
+		 * > to reconstruct; stop this algorithm.
+		 */
+		if ( 0 === $this->state->active_formatting_elements->count() ) {
+			return false;
+		}
+
+		$last_entry = $this->state->active_formatting_elements->current_node();
+		if (
+
+			/*
+			 * > If the last (most recently added) entry in the list of active formatting elements is a marker;
+			 * > stop this algorithm.
+			 */
+			'marker' === $last_entry->node_name ||
+
+			/*
+			 * > If the last (most recently added) entry in the list of active formatting elements is an
+			 * > element that is in the stack of open elements, then there is nothing to reconstruct;
+			 * > stop this algorithm.
+			 */
+			$this->state->stack_of_open_elements->contains_node( $last_entry )
+		) {
+			return false;
+		}
+
+		$this->bail( 'Cannot reconstruct active formatting elements when advancing and rewinding is required.' );
+	}
+
+	/**
+	 * Runs the reset the insertion mode appropriately algorithm.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#reset-the-insertion-mode-appropriately
+	 */
+	public function reset_insertion_mode(): void {
+		// Set the first node.
+		$first_node = null;
+		foreach ( $this->state->stack_of_open_elements->walk_down() as $first_node ) {
+			break;
+		}
+
+		/*
+		 * > 1. Let _last_ be false.
+		 */
+		$last = false;
+		foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
+			/*
+			 * > 2. Let _node_ be the last node in the stack of open elements.
+			 * > 3. _Loop_: If _node_ is the first node in the stack of open elements, then set _last_
+			 * >            to true, and, if the parser was created as part of the HTML fragment parsing
+			 * >            algorithm (fragment case), set node to the context element passed to
+			 * >            that algorithm.
+			 * > …
+			 */
+			if ( $node === $first_node ) {
+				$last = true;
+				if ( isset( $this->context_node ) ) {
+					$node = $this->context_node;
+				}
+			}
+
+			switch ( $node->node_name ) {
+				/*
+				 * > 4. If node is a `select` element, run these substeps:
+				 * >   1. If _last_ is true, jump to the step below labeled done.
+				 * >   2. Let _ancestor_ be _node_.
+				 * >   3. _Loop_: If _ancestor_ is the first node in the stack of open elements,
+				 * >      jump to the step below labeled done.
+				 * >   4. Let ancestor be the node before ancestor in the stack of open elements.
+				 * >   …
+				 * >   7. Jump back to the step labeled _loop_.
+				 * >   8. _Done_: Switch the insertion mode to "in select" and return.
+				 */
+				case 'SELECT':
+					if ( ! $last ) {
+						foreach ( $this->state->stack_of_open_elements->walk_up( $node ) as $ancestor ) {
+							switch ( $ancestor->node_name ) {
+								/*
+								 * > 5. If _ancestor_ is a `template` node, jump to the step below
+								 * >    labeled _done_.
+								 */
+								case 'TEMPLATE':
+									break 2;
+
+								/*
+								 * > 6. If _ancestor_ is a `table` node, switch the insertion mode to
+								 * >    "in select in table" and return.
+								 */
+								case 'TABLE':
+									$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE;
+									return;
+							}
+						}
+					}
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT;
+					return;
+
+				/*
+				 * > 5. If _node_ is a `td` or `th` element and _last_ is false, then switch the
+				 * >    insertion mode to "in cell" and return.
+				 */
+				case 'TD':
+				case 'TH':
+					if ( ! $last ) {
+						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL;
+						return;
+					}
+					break;
+
+					/*
+					* > 6. If _node_ is a `tr` element, then switch the insertion mode to "in row"
+					* >    and return.
+					*/
+				case 'TR':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW;
+					return;
+
+				/*
+				 * > 7. If _node_ is a `tbody`, `thead`, or `tfoot` element, then switch the
+				 * >    insertion mode to "in table body" and return.
+				 */
+				case 'TBODY':
+				case 'THEAD':
+				case 'TFOOT':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY;
+					return;
+
+				/*
+				 * > 8. If _node_ is a `caption` element, then switch the insertion mode to
+				 * >    "in caption" and return.
+				 */
+				case 'CAPTION':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION;
+					return;
+
+				/*
+				 * > 9. If _node_ is a `colgroup` element, then switch the insertion mode to
+				 * >    "in column group" and return.
+				 */
+				case 'COLGROUP':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_COLUMN_GROUP;
+					return;
+
+				/*
+				 * > 10. If _node_ is a `table` element, then switch the insertion mode to
+				 * >     "in table" and return.
+				 */
+				case 'TABLE':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE;
+					return;
+
+				/*
+				 * > 11. If _node_ is a `template` element, then switch the insertion mode to the
+				 * >     current template insertion mode and return.
+				 */
+				case 'TEMPLATE':
+					$this->state->insertion_mode = end( $this->state->stack_of_template_insertion_modes );
+					return;
+
+				/*
+				 * > 12. If _node_ is a `head` element and _last_ is false, then switch the
+				 * >     insertion mode to "in head" and return.
+				 */
+				case 'HEAD':
+					if ( ! $last ) {
+						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD;
+						return;
+					}
+					break;
+
+				/*
+				 * > 13. If _node_ is a `body` element, then switch the insertion mode to "in body"
+				 * >     and return.
+				 */
+				case 'BODY':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
+					return;
+
+				/*
+				 * > 14. If _node_ is a `frameset` element, then switch the insertion mode to
+				 * >     "in frameset" and return. (fragment case)
+				 */
+				case 'FRAMESET':
+					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FRAMESET;
+					return;
+
+				/*
+				 * > 15. If _node_ is an `html` element, run these substeps:
+				 * >     1. If the head element pointer is null, switch the insertion mode to
+				 * >        "before head" and return. (fragment case)
+				 * >     2. Otherwise, the head element pointer is not null, switch the insertion
+				 * >        mode to "after head" and return.
+				 */
+				case 'HTML':
+					$this->state->insertion_mode = isset( $this->state->head_element )
+						? Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_HEAD
+						: Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HEAD;
+					return;
+			}
+		}
+
+		/*
+		 * > 16. If _last_ is true, then switch the insertion mode to "in body"
+		 * >     and return. (fragment case)
+		 *
+		 * This is only reachable if `$last` is true, as per the fragment parsing case.
+		 */
+		$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
+	}
+
+	/**
+	 * Runs the adoption agency algorithm.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
+	 *
+	 * @see https://html.spec.whatwg.org/#adoption-agency-algorithm
+	 */
+	private function run_adoption_agency_algorithm(): void {
+		$budget       = 1000;
+		$subject      = $this->get_tag();
+		$current_node = $this->state->stack_of_open_elements->current_node();
+
+		if (
+			// > If the current node is an HTML element whose tag name is subject
+			$current_node && $subject === $current_node->node_name &&
+			// > the current node is not in the list of active formatting elements
+			! $this->state->active_formatting_elements->contains_node( $current_node )
+		) {
+			$this->state->stack_of_open_elements->pop();
+			return;
+		}
+
+		$outer_loop_counter = 0;
+		while ( $budget-- > 0 ) {
+			if ( $outer_loop_counter++ >= 8 ) {
+				return;
+			}
+
+			/*
+			 * > Let formatting element be the last element in the list of active formatting elements that:
+			 * >   - is between the end of the list and the last marker in the list,
+			 * >     if any, or the start of the list otherwise,
+			 * >   - and has the tag name subject.
+			 */
+			$formatting_element = null;
+			foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
+				if ( 'marker' === $item->node_name ) {
+					break;
+				}
+
+				if ( $subject === $item->node_name ) {
+					$formatting_element = $item;
+					break;
+				}
+			}
+
+			// > If there is no such element, then return and instead act as described in the "any other end tag" entry above.
+			if ( null === $formatting_element ) {
+				$this->bail( 'Cannot run adoption agency when "any other end tag" is required.' );
+			}
+
+			// > If formatting element is not in the stack of open elements, then this is a parse error; remove the element from the list, and return.
+			if ( ! $this->state->stack_of_open_elements->contains_node( $formatting_element ) ) {
+				$this->state->active_formatting_elements->remove_node( $formatting_element );
+				return;
+			}
+
+			// > If formatting element is in the stack of open elements, but the element is not in scope, then this is a parse error; return.
+			if ( ! $this->state->stack_of_open_elements->has_element_in_scope( $formatting_element->node_name ) ) {
+				return;
+			}
+
+			/*
+			 * > Let furthest block be the topmost node in the stack of open elements that is lower in the stack
+			 * > than formatting element, and is an element in the special category. There might not be one.
+			 */
+			$is_above_formatting_element = true;
+			$furthest_block              = null;
+			foreach ( $this->state->stack_of_open_elements->walk_down() as $item ) {
+				if ( $is_above_formatting_element && $formatting_element->bookmark_name !== $item->bookmark_name ) {
+					continue;
+				}
+
+				if ( $is_above_formatting_element ) {
+					$is_above_formatting_element = false;
+					continue;
+				}
+
+				if ( self::is_special( $item->node_name ) ) {
+					$furthest_block = $item;
+					break;
+				}
+			}
+
+			/*
+			 * > If there is no furthest block, then the UA must first pop all the nodes from the bottom of the
+			 * > stack of open elements, from the current node up to and including formatting element, then
+			 * > remove formatting element from the list of active formatting elements, and finally return.
+			 */
+			if ( null === $furthest_block ) {
+				foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
+					$this->state->stack_of_open_elements->pop();
+
+					if ( $formatting_element->bookmark_name === $item->bookmark_name ) {
+						$this->state->active_formatting_elements->remove_node( $formatting_element );
+						return;
+					}
+				}
+			}
+
+			$this->bail( 'Cannot extract common ancestor in adoption agency algorithm.' );
+		}
+
+		$this->bail( 'Cannot run adoption agency when looping required.' );
+	}
+
+	/**
+	 * Inserts an HTML element on the stack of open elements.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#insert-a-foreign-element
+	 *
+	 * @param WP_HTML_Token $token Name of bookmark pointing to element in original input HTML.
+	 */
+	private function insert_html_element( Gutenberg_HTML_Token_6_7 $token ): void {
+		$this->state->stack_of_open_elements->push( $token );
+	}
+
+	/*
+	 * HTML Specification Helpers
+	 */
+
+	/**
+	 * Returns whether an element of a given name is in the HTML special category.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#special
+	 *
+	 * @param string $tag_name Name of element to check.
+	 * @return bool Whether the element of the given name is in the special category.
+	 */
+	public static function is_special( $tag_name ): bool {
+		$tag_name = strtoupper( $tag_name );
+
+		return (
+			'ADDRESS' === $tag_name ||
+			'APPLET' === $tag_name ||
+			'AREA' === $tag_name ||
+			'ARTICLE' === $tag_name ||
+			'ASIDE' === $tag_name ||
+			'BASE' === $tag_name ||
+			'BASEFONT' === $tag_name ||
+			'BGSOUND' === $tag_name ||
+			'BLOCKQUOTE' === $tag_name ||
+			'BODY' === $tag_name ||
+			'BR' === $tag_name ||
+			'BUTTON' === $tag_name ||
+			'CAPTION' === $tag_name ||
+			'CENTER' === $tag_name ||
+			'COL' === $tag_name ||
+			'COLGROUP' === $tag_name ||
+			'DD' === $tag_name ||
+			'DETAILS' === $tag_name ||
+			'DIR' === $tag_name ||
+			'DIV' === $tag_name ||
+			'DL' === $tag_name ||
+			'DT' === $tag_name ||
+			'EMBED' === $tag_name ||
+			'FIELDSET' === $tag_name ||
+			'FIGCAPTION' === $tag_name ||
+			'FIGURE' === $tag_name ||
+			'FOOTER' === $tag_name ||
+			'FORM' === $tag_name ||
+			'FRAME' === $tag_name ||
+			'FRAMESET' === $tag_name ||
+			'H1' === $tag_name ||
+			'H2' === $tag_name ||
+			'H3' === $tag_name ||
+			'H4' === $tag_name ||
+			'H5' === $tag_name ||
+			'H6' === $tag_name ||
+			'HEAD' === $tag_name ||
+			'HEADER' === $tag_name ||
+			'HGROUP' === $tag_name ||
+			'HR' === $tag_name ||
+			'HTML' === $tag_name ||
+			'IFRAME' === $tag_name ||
+			'IMG' === $tag_name ||
+			'INPUT' === $tag_name ||
+			'KEYGEN' === $tag_name ||
+			'LI' === $tag_name ||
+			'LINK' === $tag_name ||
+			'LISTING' === $tag_name ||
+			'MAIN' === $tag_name ||
+			'MARQUEE' === $tag_name ||
+			'MENU' === $tag_name ||
+			'META' === $tag_name ||
+			'NAV' === $tag_name ||
+			'NOEMBED' === $tag_name ||
+			'NOFRAMES' === $tag_name ||
+			'NOSCRIPT' === $tag_name ||
+			'OBJECT' === $tag_name ||
+			'OL' === $tag_name ||
+			'P' === $tag_name ||
+			'PARAM' === $tag_name ||
+			'PLAINTEXT' === $tag_name ||
+			'PRE' === $tag_name ||
+			'SCRIPT' === $tag_name ||
+			'SEARCH' === $tag_name ||
+			'SECTION' === $tag_name ||
+			'SELECT' === $tag_name ||
+			'SOURCE' === $tag_name ||
+			'STYLE' === $tag_name ||
+			'SUMMARY' === $tag_name ||
+			'TABLE' === $tag_name ||
+			'TBODY' === $tag_name ||
+			'TD' === $tag_name ||
+			'TEMPLATE' === $tag_name ||
+			'TEXTAREA' === $tag_name ||
+			'TFOOT' === $tag_name ||
+			'TH' === $tag_name ||
+			'THEAD' === $tag_name ||
+			'TITLE' === $tag_name ||
+			'TR' === $tag_name ||
+			'TRACK' === $tag_name ||
+			'UL' === $tag_name ||
+			'WBR' === $tag_name ||
+			'XMP' === $tag_name ||
+
+			// MathML.
+			'MI' === $tag_name ||
+			'MO' === $tag_name ||
+			'MN' === $tag_name ||
+			'MS' === $tag_name ||
+			'MTEXT' === $tag_name ||
+			'ANNOTATION-XML' === $tag_name ||
+
+			// SVG.
+			'FOREIGNOBJECT' === $tag_name ||
+			'DESC' === $tag_name ||
+			'TITLE' === $tag_name
+		);
+	}
+
+	/**
+	 * Returns whether a given element is an HTML Void Element
+	 *
+	 * > area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#void-elements
+	 *
+	 * @param string $tag_name Name of HTML tag to check.
+	 * @return bool Whether the given tag is an HTML Void Element.
+	 */
+	public static function is_void( $tag_name ): bool {
+		$tag_name = strtoupper( $tag_name );
+
+		return (
+			'AREA' === $tag_name ||
+			'BASE' === $tag_name ||
+			'BASEFONT' === $tag_name || // Obsolete but still treated as void.
+			'BGSOUND' === $tag_name || // Obsolete but still treated as void.
+			'BR' === $tag_name ||
+			'COL' === $tag_name ||
+			'EMBED' === $tag_name ||
+			'FRAME' === $tag_name ||
+			'HR' === $tag_name ||
+			'IMG' === $tag_name ||
+			'INPUT' === $tag_name ||
+			'KEYGEN' === $tag_name || // Obsolete but still treated as void.
+			'LINK' === $tag_name ||
+			'META' === $tag_name ||
+			'PARAM' === $tag_name || // Obsolete but still treated as void.
+			'SOURCE' === $tag_name ||
+			'TRACK' === $tag_name ||
+			'WBR' === $tag_name
+		);
+	}
+
+	/*
+	 * Constants that would pollute the top of the class if they were found there.
+	 */
+
+	/**
+	 * Indicates that the next HTML token should be parsed and processed.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string
+	 */
+	const PROCESS_NEXT_NODE = 'process-next-node';
+
+	/**
+	 * Indicates that the current HTML token should be reprocessed in the newly-selected insertion mode.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string
+	 */
+	const REPROCESS_CURRENT_NODE = 'reprocess-current-node';
+
+	/**
+	 * Indicates that the current HTML token should be processed without advancing the parser.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	const PROCESS_CURRENT_NODE = 'process-current-node';
+
+	/**
+	 * Indicates that the parser encountered unsupported markup and has bailed.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string
+	 */
+	const ERROR_UNSUPPORTED = 'unsupported';
+
+	/**
+	 * Indicates that the parser encountered more HTML tokens than it
+	 * was able to process and has bailed.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string
+	 */
+	const ERROR_EXCEEDED_MAX_BOOKMARKS = 'exceeded-max-bookmarks';
+
+	/**
+	 * Unlock code that must be passed into the constructor to create this class.
+	 *
+	 * This class extends the WP_HTML_Tag_Processor, which has a public class
+	 * constructor. Therefore, it's not possible to have a private constructor here.
+	 *
+	 * This unlock code is used to ensure that anyone calling the constructor is
+	 * doing so with a full understanding that it's intended to be a private API.
+	 *
+	 * @access private
+	 */
+	const CONSTRUCTOR_UNLOCK_CODE = 'Use WP_HTML_Processor::create_fragment() instead of calling the class constructor directly.';
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php
new file mode 100644
index 00000000000000..5a3941c415dd79
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php
@@ -0,0 +1,417 @@
+<?php
+/**
+ * HTML API: WP_HTML_Processor_State class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used by the HTML processor during HTML parsing
+ * for managing the internal parsing state.
+ *
+ * This class is designed for internal use by the HTML processor.
+ *
+ * @since 6.4.0
+ *
+ * @access private
+ *
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Processor_State_6_7 {
+	/*
+	 * Insertion mode constants.
+	 *
+	 * These constants exist and are named to make it easier to
+	 * discover and recognize the supported insertion modes in
+	 * the parser.
+	 *
+	 * Out of all the possible insertion modes, only those
+	 * supported by the parser are listed here. As support
+	 * is added to the parser for more modes, add them here
+	 * following the same naming and value pattern.
+	 *
+	 * @see https://html.spec.whatwg.org/#the-insertion-mode
+	 */
+
+	/**
+	 * Initial insertion mode for full HTML parser.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#the-initial-insertion-mode
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_INITIAL = 'insertion-mode-initial';
+
+	/**
+	 * Before HTML insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#the-before-html-insertion-mode
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_BEFORE_HTML = 'insertion-mode-before-html';
+
+	/**
+	 * Before head insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-beforehead
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_BEFORE_HEAD = 'insertion-mode-before-head';
+
+	/**
+	 * In head insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inhead
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_HEAD = 'insertion-mode-in-head';
+
+	/**
+	 * In head noscript insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inheadnoscript
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_HEAD_NOSCRIPT = 'insertion-mode-in-head-noscript';
+
+	/**
+	 * After head insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-afterhead
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_AFTER_HEAD = 'insertion-mode-after-head';
+
+	/**
+	 * In body insertion mode for full HTML parser.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inbody
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_BODY = 'insertion-mode-in-body';
+
+	/**
+	 * In table insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intable
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_TABLE = 'insertion-mode-in-table';
+
+	/**
+	 * In table text insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intabletext
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_TABLE_TEXT = 'insertion-mode-in-table-text';
+
+	/**
+	 * In caption insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-incaption
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_CAPTION = 'insertion-mode-in-caption';
+
+	/**
+	 * In column group insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-incolumngroup
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_COLUMN_GROUP = 'insertion-mode-in-column-group';
+
+	/**
+	 * In table body insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intablebody
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_TABLE_BODY = 'insertion-mode-in-table-body';
+
+	/**
+	 * In row insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inrow
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_ROW = 'insertion-mode-in-row';
+
+	/**
+	 * In cell insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-incell
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_CELL = 'insertion-mode-in-cell';
+
+	/**
+	 * In select insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inselect
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_SELECT = 'insertion-mode-in-select';
+
+	/**
+	 * In select in table insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inselectintable
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_SELECT_IN_TABLE = 'insertion-mode-in-select-in-table';
+
+	/**
+	 * In template insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-intemplate
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_TEMPLATE = 'insertion-mode-in-template';
+
+	/**
+	 * After body insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-afterbody
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_AFTER_BODY = 'insertion-mode-after-body';
+
+	/**
+	 * In frameset insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inframeset
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_FRAMESET = 'insertion-mode-in-frameset';
+
+	/**
+	 * After frameset insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-afterframeset
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_AFTER_FRAMESET = 'insertion-mode-after-frameset';
+
+	/**
+	 * After after body insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#the-after-after-body-insertion-mode
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_AFTER_AFTER_BODY = 'insertion-mode-after-after-body';
+
+	/**
+	 * After after frameset insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#the-after-after-frameset-insertion-mode
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_AFTER_AFTER_FRAMESET = 'insertion-mode-after-after-frameset';
+
+	/**
+	 * In foreign content insertion mode for full HTML parser.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#parsing-main-inforeign
+	 * @see WP_HTML_Processor_State::$insertion_mode
+	 *
+	 * @var string
+	 */
+	const INSERTION_MODE_IN_FOREIGN_CONTENT = 'insertion-mode-in-foreign-content';
+
+	/**
+	 * The stack of template insertion modes.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/#the-insertion-mode:stack-of-template-insertion-modes
+	 *
+	 * @var array<string>
+	 */
+	public $stack_of_template_insertion_modes = array();
+
+	/**
+	 * Tracks open elements while scanning HTML.
+	 *
+	 * This property is initialized in the constructor and never null.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
+	 *
+	 * @var WP_HTML_Open_Elements
+	 */
+	public $stack_of_open_elements;
+
+	/**
+	 * Tracks open formatting elements, used to handle mis-nested formatting element tags.
+	 *
+	 * This property is initialized in the constructor and never null.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#list-of-active-formatting-elements
+	 *
+	 * @var WP_HTML_Active_Formatting_Elements
+	 */
+	public $active_formatting_elements;
+
+	/**
+	 * Refers to the currently-matched tag, if any.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var WP_HTML_Token|null
+	 */
+	public $current_token = null;
+
+	/**
+	 * Tree construction insertion mode.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#insertion-mode
+	 *
+	 * @var string
+	 */
+	public $insertion_mode = self::INSERTION_MODE_INITIAL;
+
+	/**
+	 * Context node initializing fragment parser, if created as a fragment parser.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#concept-frag-parse-context
+	 *
+	 * @var [string, array]|null
+	 */
+	public $context_node = null;
+
+	/**
+	 * HEAD element pointer.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#head-element-pointer
+	 *
+	 * @var WP_HTML_Token|null
+	 */
+	public $head_element = null;
+
+	/**
+	 * The frameset-ok flag indicates if a `FRAMESET` element is allowed in the current state.
+	 *
+	 * > The frameset-ok flag is set to "ok" when the parser is created. It is set to "not ok" after certain tokens are seen.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#frameset-ok-flag
+	 *
+	 * @var bool
+	 */
+	public $frameset_ok = true;
+
+	/**
+	 * Constructor - creates a new and empty state value.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see WP_HTML_Processor
+	 */
+	public function __construct() {
+		$this->stack_of_open_elements     = new Gutenberg_HTML_Open_Elements_6_7();
+		$this->active_formatting_elements = new Gutenberg_HTML_Active_Formatting_Elements_6_7();
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php
new file mode 100644
index 00000000000000..5a55d9f5568746
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php
@@ -0,0 +1,56 @@
+<?php
+/**
+ * HTML API: WP_HTML_Span class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.2.0
+ */
+
+/**
+ * Core class used by the HTML tag processor to represent a textual span
+ * inside an HTML document.
+ *
+ * This is a two-tuple in disguise, used to avoid the memory overhead
+ * involved in using an array for the same purpose.
+ *
+ * This class is for internal usage of the WP_HTML_Tag_Processor class.
+ *
+ * @access private
+ * @since 6.2.0
+ * @since 6.5.0 Replaced `end` with `length` to more closely align with `substr()`.
+ *
+ * @see WP_HTML_Tag_Processor
+ */
+class Gutenberg_HTML_Span_6_7 {
+	/**
+	 * Byte offset into document where span begins.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int
+	 */
+	public $start;
+
+	/**
+	 * Byte length of this span.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var int
+	 */
+	public $length;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param int $start  Byte offset into document where replacement span begins.
+	 * @param int $length Byte length of span.
+	 */
+	public function __construct( int $start, int $length ) {
+		$this->start  = $start;
+		$this->length = $length;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php
new file mode 100644
index 00000000000000..30a8024b1c07c5
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * HTML API: WP_HTML_Stack_Event class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.6.0
+ */
+
+/**
+ * Core class used by the HTML Processor as a record for stack operations.
+ *
+ * This class is for internal usage of the WP_HTML_Processor class.
+ *
+ * @access private
+ * @since 6.6.0
+ *
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Stack_Event_6_7 {
+	/**
+	 * Refers to popping an element off of the stack of open elements.
+	 *
+	 * @since 6.6.0
+	 */
+	const POP = 'pop';
+
+	/**
+	 * Refers to pushing an element onto the stack of open elements.
+	 *
+	 * @since 6.6.0
+	 */
+	const PUSH = 'push';
+
+	/**
+	 * References the token associated with the stack push event,
+	 * even if this is a pop event for that element.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var WP_HTML_Token
+	 */
+	public $token;
+
+	/**
+	 * Indicates which kind of stack operation this event represents.
+	 *
+	 * May be one of the class constants.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @see self::POP
+	 * @see self::PUSH
+	 *
+	 * @var string
+	 */
+	public $operation;
+
+	/**
+	 * Indicates if the stack element is a real or virtual node.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @var string
+	 */
+	public $provenance;
+
+	/**
+	 * Constructor function.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @param WP_HTML_Token $token      Token associated with stack event, always an opening token.
+	 * @param string        $operation  One of self::PUSH or self::POP.
+	 * @param string        $provenance "virtual" or "real".
+	 */
+	public function __construct( Gutenberg_HTML_Token_6_7 $token, string $operation, string $provenance ) {
+		$this->token      = $token;
+		$this->operation  = $operation;
+		$this->provenance = $provenance;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php
new file mode 100644
index 00000000000000..0377706d5eaa63
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php
@@ -0,0 +1,3521 @@
+<?php
+/**
+ * HTML API: WP_HTML_Tag_Processor class
+ *
+ * Scans through an HTML document to find specific tags, then
+ * transforms those tags by adding, removing, or updating the
+ * values of the HTML attributes within that tag (opener).
+ *
+ * Does not fully parse HTML or _recurse_ into the HTML structure
+ * Instead this scans linearly through a document and only parses
+ * the HTML tag openers.
+ *
+ * ### Possible future direction for this module
+ *
+ *  - Prune the whitespace when removing classes/attributes: e.g. "a b c" -> "c" not " c".
+ *    This would increase the size of the changes for some operations but leave more
+ *    natural-looking output HTML.
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.2.0
+ */
+
+/**
+ * Core class used to modify attributes in an HTML document for tags matching a query.
+ *
+ * ## Usage
+ *
+ * Use of this class requires three steps:
+ *
+ *  1. Create a new class instance with your input HTML document.
+ *  2. Find the tag(s) you are looking for.
+ *  3. Request changes to the attributes in those tag(s).
+ *
+ * Example:
+ *
+ *     $tags = new WP_HTML_Tag_Processor( $html );
+ *     if ( $tags->next_tag( 'option' ) ) {
+ *         $tags->set_attribute( 'selected', true );
+ *     }
+ *
+ * ### Finding tags
+ *
+ * The `next_tag()` function moves the internal cursor through
+ * your input HTML document until it finds a tag meeting any of
+ * the supplied restrictions in the optional query argument. If
+ * no argument is provided then it will find the next HTML tag,
+ * regardless of what kind it is.
+ *
+ * If you want to _find whatever the next tag is_:
+ *
+ *     $tags->next_tag();
+ *
+ * | Goal                                                      | Query                                                                           |
+ * |-----------------------------------------------------------|---------------------------------------------------------------------------------|
+ * | Find any tag.                                             | `$tags->next_tag();`                                                            |
+ * | Find next image tag.                                      | `$tags->next_tag( array( 'tag_name' => 'img' ) );`                              |
+ * | Find next image tag (without passing the array).          | `$tags->next_tag( 'img' );`                                                     |
+ * | Find next tag containing the `fullwidth` CSS class.       | `$tags->next_tag( array( 'class_name' => 'fullwidth' ) );`                      |
+ * | Find next image tag containing the `fullwidth` CSS class. | `$tags->next_tag( array( 'tag_name' => 'img', 'class_name' => 'fullwidth' ) );` |
+ *
+ * If a tag was found meeting your criteria then `next_tag()`
+ * will return `true` and you can proceed to modify it. If it
+ * returns `false`, however, it failed to find the tag and
+ * moved the cursor to the end of the file.
+ *
+ * Once the cursor reaches the end of the file the processor
+ * is done and if you want to reach an earlier tag you will
+ * need to recreate the processor and start over, as it's
+ * unable to back up or move in reverse.
+ *
+ * See the section on bookmarks for an exception to this
+ * no-backing-up rule.
+ *
+ * #### Custom queries
+ *
+ * Sometimes it's necessary to further inspect an HTML tag than
+ * the query syntax here permits. In these cases one may further
+ * inspect the search results using the read-only functions
+ * provided by the processor or external state or variables.
+ *
+ * Example:
+ *
+ *     // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
+ *     $remaining_count = 5;
+ *     while ( $remaining_count > 0 && $tags->next_tag() ) {
+ *         if (
+ *              ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
+ *              'jazzy' === $tags->get_attribute( 'data-style' )
+ *         ) {
+ *             $tags->add_class( 'theme-style-everest-jazz' );
+ *             $remaining_count--;
+ *         }
+ *     }
+ *
+ * `get_attribute()` will return `null` if the attribute wasn't present
+ * on the tag when it was called. It may return `""` (the empty string)
+ * in cases where the attribute was present but its value was empty.
+ * For boolean attributes, those whose name is present but no value is
+ * given, it will return `true` (the only way to set `false` for an
+ * attribute is to remove it).
+ *
+ * #### When matching fails
+ *
+ * When `next_tag()` returns `false` it could mean different things:
+ *
+ *  - The requested tag wasn't found in the input document.
+ *  - The input document ended in the middle of an HTML syntax element.
+ *
+ * When a document ends in the middle of a syntax element it will pause
+ * the processor. This is to make it possible in the future to extend the
+ * input document and proceed - an important requirement for chunked
+ * streaming parsing of a document.
+ *
+ * Example:
+ *
+ *     $processor = new WP_HTML_Tag_Processor( 'This <div is="a" partial="token' );
+ *     false === $processor->next_tag();
+ *
+ * If a special element (see next section) is encountered but no closing tag
+ * is found it will count as an incomplete tag. The parser will pause as if
+ * the opening tag were incomplete.
+ *
+ * Example:
+ *
+ *     $processor = new WP_HTML_Tag_Processor( '<style>// there could be more styling to come' );
+ *     false === $processor->next_tag();
+ *
+ *     $processor = new WP_HTML_Tag_Processor( '<style>// this is everything</style><div>' );
+ *     true === $processor->next_tag( 'DIV' );
+ *
+ * #### Special elements
+ *
+ * Some HTML elements are handled in a special way; their start and end tags
+ * act like a void tag. These are special because their contents can't contain
+ * HTML markup. Everything inside these elements is handled in a special way
+ * and content that _appears_ like HTML tags inside of them isn't. There can
+ * be no nesting in these elements.
+ *
+ * In the following list, "raw text" means that all of the content in the HTML
+ * until the matching closing tag is treated verbatim without any replacements
+ * and without any parsing.
+ *
+ *  - IFRAME allows no content but requires a closing tag.
+ *  - NOEMBED (deprecated) content is raw text.
+ *  - NOFRAMES (deprecated) content is raw text.
+ *  - SCRIPT content is plaintext apart from legacy rules allowing `</script>` inside an HTML comment.
+ *  - STYLE content is raw text.
+ *  - TITLE content is plain text but character references are decoded.
+ *  - TEXTAREA content is plain text but character references are decoded.
+ *  - XMP (deprecated) content is raw text.
+ *
+ * ### Modifying HTML attributes for a found tag
+ *
+ * Once you've found the start of an opening tag you can modify
+ * any number of the attributes on that tag. You can set a new
+ * value for an attribute, remove the entire attribute, or do
+ * nothing and move on to the next opening tag.
+ *
+ * Example:
+ *
+ *     if ( $tags->next_tag( array( 'class_name' => 'wp-group-block' ) ) ) {
+ *         $tags->set_attribute( 'title', 'This groups the contained content.' );
+ *         $tags->remove_attribute( 'data-test-id' );
+ *     }
+ *
+ * If `set_attribute()` is called for an existing attribute it will
+ * overwrite the existing value. Similarly, calling `remove_attribute()`
+ * for a non-existing attribute has no effect on the document. Both
+ * of these methods are safe to call without knowing if a given attribute
+ * exists beforehand.
+ *
+ * ### Modifying CSS classes for a found tag
+ *
+ * The tag processor treats the `class` attribute as a special case.
+ * Because it's a common operation to add or remove CSS classes, this
+ * interface adds helper methods to make that easier.
+ *
+ * As with attribute values, adding or removing CSS classes is a safe
+ * operation that doesn't require checking if the attribute or class
+ * exists before making changes. If removing the only class then the
+ * entire `class` attribute will be removed.
+ *
+ * Example:
+ *
+ *     // from `<span>Yippee!</span>`
+ *     //   to `<span class="is-active">Yippee!</span>`
+ *     $tags->add_class( 'is-active' );
+ *
+ *     // from `<span class="excited">Yippee!</span>`
+ *     //   to `<span class="excited is-active">Yippee!</span>`
+ *     $tags->add_class( 'is-active' );
+ *
+ *     // from `<span class="is-active heavy-accent">Yippee!</span>`
+ *     //   to `<span class="is-active heavy-accent">Yippee!</span>`
+ *     $tags->add_class( 'is-active' );
+ *
+ *     // from `<input type="text" class="is-active rugby not-disabled" length="24">`
+ *     //   to `<input type="text" class="is-active not-disabled" length="24">
+ *     $tags->remove_class( 'rugby' );
+ *
+ *     // from `<input type="text" class="rugby" length="24">`
+ *     //   to `<input type="text" length="24">
+ *     $tags->remove_class( 'rugby' );
+ *
+ *     // from `<input type="text" length="24">`
+ *     //   to `<input type="text" length="24">
+ *     $tags->remove_class( 'rugby' );
+ *
+ * When class changes are enqueued but a direct change to `class` is made via
+ * `set_attribute` then the changes to `set_attribute` (or `remove_attribute`)
+ * will take precedence over those made through `add_class` and `remove_class`.
+ *
+ * ### Bookmarks
+ *
+ * While scanning through the input HTMl document it's possible to set
+ * a named bookmark when a particular tag is found. Later on, after
+ * continuing to scan other tags, it's possible to `seek` to one of
+ * the set bookmarks and then proceed again from that point forward.
+ *
+ * Because bookmarks create processing overhead one should avoid
+ * creating too many of them. As a rule, create only bookmarks
+ * of known string literal names; avoid creating "mark_{$index}"
+ * and so on. It's fine from a performance standpoint to create a
+ * bookmark and update it frequently, such as within a loop.
+ *
+ *     $total_todos = 0;
+ *     while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
+ *         $p->set_bookmark( 'list-start' );
+ *         while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+ *             if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
+ *                 $p->set_bookmark( 'list-end' );
+ *                 $p->seek( 'list-start' );
+ *                 $p->set_attribute( 'data-contained-todos', (string) $total_todos );
+ *                 $total_todos = 0;
+ *                 $p->seek( 'list-end' );
+ *                 break;
+ *             }
+ *
+ *             if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
+ *                 $total_todos++;
+ *             }
+ *         }
+ *     }
+ *
+ * ## Tokens and finer-grained processing.
+ *
+ * It's possible to scan through every lexical token in the
+ * HTML document using the `next_token()` function. This
+ * alternative form takes no argument and provides no built-in
+ * query syntax.
+ *
+ * Example:
+ *
+ *      $title = '(untitled)';
+ *      $text  = '';
+ *      while ( $processor->next_token() ) {
+ *          switch ( $processor->get_token_name() ) {
+ *              case '#text':
+ *                  $text .= $processor->get_modifiable_text();
+ *                  break;
+ *
+ *              case 'BR':
+ *                  $text .= "\n";
+ *                  break;
+ *
+ *              case 'TITLE':
+ *                  $title = $processor->get_modifiable_text();
+ *                  break;
+ *          }
+ *      }
+ *      return trim( "# {$title}\n\n{$text}" );
+ *
+ * ### Tokens and _modifiable text_.
+ *
+ * #### Special "atomic" HTML elements.
+ *
+ * Not all HTML elements are able to contain other elements inside of them.
+ * For instance, the contents inside a TITLE element are plaintext (except
+ * that character references like &amp; will be decoded). This means that
+ * if the string `<img>` appears inside a TITLE element, then it's not an
+ * image tag, but rather it's text describing an image tag. Likewise, the
+ * contents of a SCRIPT or STYLE element are handled entirely separately in
+ * a browser than the contents of other elements because they represent a
+ * different language than HTML.
+ *
+ * For these elements the Tag Processor treats the entire sequence as one,
+ * from the opening tag, including its contents, through its closing tag.
+ * This means that the it's not possible to match the closing tag for a
+ * SCRIPT element unless it's unexpected; the Tag Processor already matched
+ * it when it found the opening tag.
+ *
+ * The inner contents of these elements are that element's _modifiable text_.
+ *
+ * The special elements are:
+ *  - `SCRIPT` whose contents are treated as raw plaintext but supports a legacy
+ *    style of including JavaScript inside of HTML comments to avoid accidentally
+ *    closing the SCRIPT from inside a JavaScript string. E.g. `console.log( '</script>' )`.
+ *  - `TITLE` and `TEXTAREA` whose contents are treated as plaintext and then any
+ *    character references are decoded. E.g. `1 &lt; 2 < 3` becomes `1 < 2 < 3`.
+ *  - `IFRAME`, `NOSCRIPT`, `NOEMBED`, `NOFRAME`, `STYLE` whose contents are treated as
+ *    raw plaintext and left as-is. E.g. `1 &lt; 2 < 3` remains `1 &lt; 2 < 3`.
+ *
+ * #### Other tokens with modifiable text.
+ *
+ * There are also non-elements which are void/self-closing in nature and contain
+ * modifiable text that is part of that individual syntax token itself.
+ *
+ *  - `#text` nodes, whose entire token _is_ the modifiable text.
+ *  - HTML comments and tokens that become comments due to some syntax error. The
+ *    text for these tokens is the portion of the comment inside of the syntax.
+ *    E.g. for `<!-- comment -->` the text is `" comment "` (note the spaces are included).
+ *  - `CDATA` sections, whose text is the content inside of the section itself. E.g. for
+ *    `<![CDATA[some content]]>` the text is `"some content"` (with restrictions [1]).
+ *  - "Funky comments," which are a special case of invalid closing tags whose name is
+ *    invalid. The text for these nodes is the text that a browser would transform into
+ *    an HTML comment when parsing. E.g. for `</%post_author>` the text is `%post_author`.
+ *  - `DOCTYPE` declarations like `<DOCTYPE html>` which have no closing tag.
+ *  - XML Processing instruction nodes like `<?wp __( "Like" ); ?>` (with restrictions [2]).
+ *  - The empty end tag `</>` which is ignored in the browser and DOM.
+ *
+ * [1]: There are no CDATA sections in HTML. When encountering `<![CDATA[`, everything
+ *      until the next `>` becomes a bogus HTML comment, meaning there can be no CDATA
+ *      section in an HTML document containing `>`. The Tag Processor will first find
+ *      all valid and bogus HTML comments, and then if the comment _would_ have been a
+ *      CDATA section _were they to exist_, it will indicate this as the type of comment.
+ *
+ * [2]: XML allows a broader range of characters in a processing instruction's target name
+ *      and disallows "xml" as a name, since it's special. The Tag Processor only recognizes
+ *      target names with an ASCII-representable subset of characters. It also exhibits the
+ *      same constraint as with CDATA sections, in that `>` cannot exist within the token
+ *      since Processing Instructions do no exist within HTML and their syntax transforms
+ *      into a bogus comment in the DOM.
+ *
+ * ## Design and limitations
+ *
+ * The Tag Processor is designed to linearly scan HTML documents and tokenize
+ * HTML tags and their attributes. It's designed to do this as efficiently as
+ * possible without compromising parsing integrity. Therefore it will be
+ * slower than some methods of modifying HTML, such as those incorporating
+ * over-simplified PCRE patterns, but will not introduce the defects and
+ * failures that those methods bring in, which lead to broken page renders
+ * and often to security vulnerabilities. On the other hand, it will be faster
+ * than full-blown HTML parsers such as DOMDocument and use considerably
+ * less memory. It requires a negligible memory overhead, enough to consider
+ * it a zero-overhead system.
+ *
+ * The performance characteristics are maintained by avoiding tree construction
+ * and semantic cleanups which are specified in HTML5. Because of this, for
+ * example, it's not possible for the Tag Processor to associate any given
+ * opening tag with its corresponding closing tag, or to return the inner markup
+ * inside an element. Systems may be built on top of the Tag Processor to do
+ * this, but the Tag Processor is and should be constrained so it can remain an
+ * efficient, low-level, and reliable HTML scanner.
+ *
+ * The Tag Processor's design incorporates a "garbage-in-garbage-out" philosophy.
+ * HTML5 specifies that certain invalid content be transformed into different forms
+ * for display, such as removing null bytes from an input document and replacing
+ * invalid characters with the Unicode replacement character `U+FFFD` (visually "�").
+ * Where errors or transformations exist within the HTML5 specification, the Tag Processor
+ * leaves those invalid inputs untouched, passing them through to the final browser
+ * to handle. While this implies that certain operations will be non-spec-compliant,
+ * such as reading the value of an attribute with invalid content, it also preserves a
+ * simplicity and efficiency for handling those error cases.
+ *
+ * Most operations within the Tag Processor are designed to minimize the difference
+ * between an input and output document for any given change. For example, the
+ * `add_class` and `remove_class` methods preserve whitespace and the class ordering
+ * within the `class` attribute; and when encountering tags with duplicated attributes,
+ * the Tag Processor will leave those invalid duplicate attributes where they are but
+ * update the proper attribute which the browser will read for parsing its value. An
+ * exception to this rule is that all attribute updates store their values as
+ * double-quoted strings, meaning that attributes on input with single-quoted or
+ * unquoted values will appear in the output with double-quotes.
+ *
+ * ### Scripting Flag
+ *
+ * The Tag Processor parses HTML with the "scripting flag" disabled. This means
+ * that it doesn't run any scripts while parsing the page. In a browser with
+ * JavaScript enabled, for example, the script can change the parse of the
+ * document as it loads. On the server, however, evaluating JavaScript is not
+ * only impractical, but also unwanted.
+ *
+ * Practically this means that the Tag Processor will descend into NOSCRIPT
+ * elements and process its child tags. Were the scripting flag enabled, such
+ * as in a typical browser, the contents of NOSCRIPT are skipped entirely.
+ *
+ * This allows the HTML API to process the content that will be presented in
+ * a browser when scripting is disabled, but it offers a different view of a
+ * page than most browser sessions will experience. E.g. the tags inside the
+ * NOSCRIPT disappear.
+ *
+ * ### Text Encoding
+ *
+ * The Tag Processor assumes that the input HTML document is encoded with a
+ * text encoding compatible with 7-bit ASCII's '<', '>', '&', ';', '/', '=',
+ * "'", '"', 'a' - 'z', 'A' - 'Z', and the whitespace characters ' ', tab,
+ * carriage-return, newline, and form-feed.
+ *
+ * In practice, this includes almost every single-byte encoding as well as
+ * UTF-8. Notably, however, it does not include UTF-16. If providing input
+ * that's incompatible, then convert the encoding beforehand.
+ *
+ * @since 6.2.0
+ * @since 6.2.1 Fix: Support for various invalid comments; attribute updates are case-insensitive.
+ * @since 6.3.2 Fix: Skip HTML-like content inside rawtext elements such as STYLE.
+ * @since 6.5.0 Pauses processor when input ends in an incomplete syntax token.
+ *              Introduces "special" elements which act like void elements, e.g. TITLE, STYLE.
+ *              Allows scanning through all tokens and processing modifiable text, where applicable.
+ */
+class Gutenberg_HTML_Tag_Processor_6_7 {
+	/**
+	 * The maximum number of bookmarks allowed to exist at
+	 * any given time.
+	 *
+	 * @since 6.2.0
+	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::set_bookmark()
+	 */
+	const MAX_BOOKMARKS = 10;
+
+	/**
+	 * Maximum number of times seek() can be called.
+	 * Prevents accidental infinite loops.
+	 *
+	 * @since 6.2.0
+	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
+	 */
+	const MAX_SEEK_OPS = 1000;
+
+	/**
+	 * The HTML document to parse.
+	 *
+	 * @since 6.2.0
+	 * @var string
+	 */
+	protected $html;
+
+	/**
+	 * The last query passed to next_tag().
+	 *
+	 * @since 6.2.0
+	 * @var array|null
+	 */
+	private $last_query;
+
+	/**
+	 * The tag name this processor currently scans for.
+	 *
+	 * @since 6.2.0
+	 * @var string|null
+	 */
+	private $sought_tag_name;
+
+	/**
+	 * The CSS class name this processor currently scans for.
+	 *
+	 * @since 6.2.0
+	 * @var string|null
+	 */
+	private $sought_class_name;
+
+	/**
+	 * The match offset this processor currently scans for.
+	 *
+	 * @since 6.2.0
+	 * @var int|null
+	 */
+	private $sought_match_offset;
+
+	/**
+	 * Whether to visit tag closers, e.g. </div>, when walking an input document.
+	 *
+	 * @since 6.2.0
+	 * @var bool
+	 */
+	private $stop_on_tag_closers;
+
+	/**
+	 * Specifies mode of operation of the parser at any given time.
+	 *
+	 * | State           | Meaning                                                              |
+	 * | ----------------|----------------------------------------------------------------------|
+	 * | *Ready*         | The parser is ready to run.                                          |
+	 * | *Complete*      | There is nothing left to parse.                                      |
+	 * | *Incomplete*    | The HTML ended in the middle of a token; nothing more can be parsed. |
+	 * | *Matched tag*   | Found an HTML tag; it's possible to modify its attributes.           |
+	 * | *Text node*     | Found a #text node; this is plaintext and modifiable.                |
+	 * | *CDATA node*    | Found a CDATA section; this is modifiable.                           |
+	 * | *Comment*       | Found a comment or bogus comment; this is modifiable.                |
+	 * | *Presumptuous*  | Found an empty tag closer: `</>`.                                    |
+	 * | *Funky comment* | Found a tag closer with an invalid tag name; this is modifiable.     |
+	 *
+	 * @since 6.5.0
+	 *
+	 * @see WP_HTML_Tag_Processor::STATE_READY
+	 * @see WP_HTML_Tag_Processor::STATE_COMPLETE
+	 * @see WP_HTML_Tag_Processor::STATE_INCOMPLETE_INPUT
+	 * @see WP_HTML_Tag_Processor::STATE_MATCHED_TAG
+	 * @see WP_HTML_Tag_Processor::STATE_TEXT_NODE
+	 * @see WP_HTML_Tag_Processor::STATE_CDATA_NODE
+	 * @see WP_HTML_Tag_Processor::STATE_COMMENT
+	 * @see WP_HTML_Tag_Processor::STATE_DOCTYPE
+	 * @see WP_HTML_Tag_Processor::STATE_PRESUMPTUOUS_TAG
+	 * @see WP_HTML_Tag_Processor::STATE_FUNKY_COMMENT
+	 *
+	 * @var string
+	 */
+	protected $parser_state = self::STATE_READY;
+
+	/**
+	 * What kind of syntax token became an HTML comment.
+	 *
+	 * Since there are many ways in which HTML syntax can create an HTML comment,
+	 * this indicates which of those caused it. This allows the Tag Processor to
+	 * represent more from the original input document than would appear in the DOM.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string|null
+	 */
+	protected $comment_type = null;
+
+	/**
+	 * How many bytes from the original HTML document have been read and parsed.
+	 *
+	 * This value points to the latest byte offset in the input document which
+	 * has been already parsed. It is the internal cursor for the Tag Processor
+	 * and updates while scanning through the HTML tokens.
+	 *
+	 * @since 6.2.0
+	 * @var int
+	 */
+	private $bytes_already_parsed = 0;
+
+	/**
+	 * Byte offset in input document where current token starts.
+	 *
+	 * Example:
+	 *
+	 *     <div id="test">...
+	 *     01234
+	 *     - token starts at 0
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var int|null
+	 */
+	private $token_starts_at;
+
+	/**
+	 * Byte length of current token.
+	 *
+	 * Example:
+	 *
+	 *     <div id="test">...
+	 *     012345678901234
+	 *     - token length is 14 - 0 = 14
+	 *
+	 *     a <!-- comment --> is a token.
+	 *     0123456789 123456789 123456789
+	 *     - token length is 17 - 2 = 15
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var int|null
+	 */
+	private $token_length;
+
+	/**
+	 * Byte offset in input document where current tag name starts.
+	 *
+	 * Example:
+	 *
+	 *     <div id="test">...
+	 *     01234
+	 *      - tag name starts at 1
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int|null
+	 */
+	private $tag_name_starts_at;
+
+	/**
+	 * Byte length of current tag name.
+	 *
+	 * Example:
+	 *
+	 *     <div id="test">...
+	 *     01234
+	 *      --- tag name length is 3
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int|null
+	 */
+	private $tag_name_length;
+
+	/**
+	 * Byte offset into input document where current modifiable text starts.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var int
+	 */
+	private $text_starts_at;
+
+	/**
+	 * Byte length of modifiable text.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var string
+	 */
+	private $text_length;
+
+	/**
+	 * Whether the current tag is an opening tag, e.g. <div>, or a closing tag, e.g. </div>.
+	 *
+	 * @var bool
+	 */
+	private $is_closing_tag;
+
+	/**
+	 * Lazily-built index of attributes found within an HTML tag, keyed by the attribute name.
+	 *
+	 * Example:
+	 *
+	 *     // Supposing the parser is working through this content
+	 *     // and stops after recognizing the `id` attribute.
+	 *     // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
+	 *     //                 ^ parsing will continue from this point.
+	 *     $this->attributes = array(
+	 *         'id' => new WP_HTML_Attribute_Token( 'id', 9, 6, 5, 11, false )
+	 *     );
+	 *
+	 *     // When picking up parsing again, or when asking to find the
+	 *     // `class` attribute we will continue and add to this array.
+	 *     $this->attributes = array(
+	 *         'id'    => new WP_HTML_Attribute_Token( 'id', 9, 6, 5, 11, false ),
+	 *         'class' => new WP_HTML_Attribute_Token( 'class', 23, 7, 17, 13, false )
+	 *     );
+	 *
+	 *     // Note that only the `class` attribute value is stored in the index.
+	 *     // That's because it is the only value used by this class at the moment.
+	 *
+	 * @since 6.2.0
+	 * @var WP_HTML_Attribute_Token[]
+	 */
+	private $attributes = array();
+
+	/**
+	 * Tracks spans of duplicate attributes on a given tag, used for removing
+	 * all copies of an attribute when calling `remove_attribute()`.
+	 *
+	 * @since 6.3.2
+	 *
+	 * @var (WP_HTML_Span[])[]|null
+	 */
+	private $duplicate_attributes = null;
+
+	/**
+	 * Which class names to add or remove from a tag.
+	 *
+	 * These are tracked separately from attribute updates because they are
+	 * semantically distinct, whereas this interface exists for the common
+	 * case of adding and removing class names while other attributes are
+	 * generally modified as with DOM `setAttribute` calls.
+	 *
+	 * When modifying an HTML document these will eventually be collapsed
+	 * into a single `set_attribute( 'class', $changes )` call.
+	 *
+	 * Example:
+	 *
+	 *     // Add the `wp-block-group` class, remove the `wp-group` class.
+	 *     $classname_updates = array(
+	 *         // Indexed by a comparable class name.
+	 *         'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
+	 *         'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
+	 *     );
+	 *
+	 * @since 6.2.0
+	 * @var bool[]
+	 */
+	private $classname_updates = array();
+
+	/**
+	 * Tracks a semantic location in the original HTML which
+	 * shifts with updates as they are applied to the document.
+	 *
+	 * @since 6.2.0
+	 * @var WP_HTML_Span[]
+	 */
+	protected $bookmarks = array();
+
+	const ADD_CLASS    = true;
+	const REMOVE_CLASS = false;
+	const SKIP_CLASS   = null;
+
+	/**
+	 * Lexical replacements to apply to input HTML document.
+	 *
+	 * "Lexical" in this class refers to the part of this class which
+	 * operates on pure text _as text_ and not as HTML. There's a line
+	 * between the public interface, with HTML-semantic methods like
+	 * `set_attribute` and `add_class`, and an internal state that tracks
+	 * text offsets in the input document.
+	 *
+	 * When higher-level HTML methods are called, those have to transform their
+	 * operations (such as setting an attribute's value) into text diffing
+	 * operations (such as replacing the sub-string from indices A to B with
+	 * some given new string). These text-diffing operations are the lexical
+	 * updates.
+	 *
+	 * As new higher-level methods are added they need to collapse their
+	 * operations into these lower-level lexical updates since that's the
+	 * Tag Processor's internal language of change. Any code which creates
+	 * these lexical updates must ensure that they do not cross HTML syntax
+	 * boundaries, however, so these should never be exposed outside of this
+	 * class or any classes which intentionally expand its functionality.
+	 *
+	 * These are enqueued while editing the document instead of being immediately
+	 * applied to avoid processing overhead, string allocations, and string
+	 * copies when applying many updates to a single document.
+	 *
+	 * Example:
+	 *
+	 *     // Replace an attribute stored with a new value, indices
+	 *     // sourced from the lazily-parsed HTML recognizer.
+	 *     $start  = $attributes['src']->start;
+	 *     $length = $attributes['src']->length;
+	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $length, $new_value );
+	 *
+	 *     // Correspondingly, something like this will appear in this array.
+	 *     $lexical_updates = array(
+	 *         WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
+	 *     );
+	 *
+	 * @since 6.2.0
+	 * @var WP_HTML_Text_Replacement[]
+	 */
+	protected $lexical_updates = array();
+
+	/**
+	 * Tracks and limits `seek()` calls to prevent accidental infinite loops.
+	 *
+	 * @since 6.2.0
+	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
+	 */
+	protected $seek_count = 0;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $html HTML to process.
+	 */
+	public function __construct( $html ) {
+		$this->html = $html;
+	}
+
+	/**
+	 * Finds the next tag matching the $query.
+	 *
+	 * @since 6.2.0
+	 * @since 6.5.0 No longer processes incomplete tokens at end of document; pauses the processor at start of token.
+	 *
+	 * @param array|string|null $query {
+	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
+	 *
+	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
+	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
+	 *                                     1 for "first" tag, 3 for "third," etc.
+	 *                                     Defaults to first tag.
+	 *     @type string|null $class_name   Tag must contain this whole class name to match.
+	 *     @type string|null $tag_closers  "visit" or "skip": whether to stop on tag closers, e.g. </div>.
+	 * }
+	 * @return bool Whether a tag was matched.
+	 */
+	public function next_tag( $query = null ): bool {
+		$this->parse_query( $query );
+		$already_found = 0;
+
+		do {
+			if ( false === $this->next_token() ) {
+				return false;
+			}
+
+			if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+				continue;
+			}
+
+			if ( $this->matches() ) {
+				++$already_found;
+			}
+		} while ( $already_found < $this->sought_match_offset );
+
+		return true;
+	}
+
+	/**
+	 * Finds the next token in the HTML document.
+	 *
+	 * An HTML document can be viewed as a stream of tokens,
+	 * where tokens are things like HTML tags, HTML comments,
+	 * text nodes, etc. This method finds the next token in
+	 * the HTML document and returns whether it found one.
+	 *
+	 * If it starts parsing a token and reaches the end of the
+	 * document then it will seek to the start of the last
+	 * token and pause, returning `false` to indicate that it
+	 * failed to find a complete token.
+	 *
+	 * Possible token types, based on the HTML specification:
+	 *
+	 *  - an HTML tag, whether opening, closing, or void.
+	 *  - a text node - the plaintext inside tags.
+	 *  - an HTML comment.
+	 *  - a DOCTYPE declaration.
+	 *  - a processing instruction, e.g. `<?xml version="1.0" ?>`.
+	 *
+	 * The Tag Processor currently only supports the tag token.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return bool Whether a token was parsed.
+	 */
+	public function next_token(): bool {
+		return $this->base_class_next_token();
+	}
+
+	/**
+	 * Internal method which finds the next token in the HTML document.
+	 *
+	 * This method is a protected internal function which implements the logic for
+	 * finding the next token in a document. It exists so that the parser can update
+	 * its state without affecting the location of the cursor in the document and
+	 * without triggering subclass methods for things like `next_token()`, e.g. when
+	 * applying patches before searching for the next token.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 *
+	 * @return bool Whether a token was parsed.
+	 */
+	private function base_class_next_token(): bool {
+		$was_at = $this->bytes_already_parsed;
+		$this->after_tag();
+
+		// Don't proceed if there's nothing more to scan.
+		if (
+			self::STATE_COMPLETE === $this->parser_state ||
+			self::STATE_INCOMPLETE_INPUT === $this->parser_state
+		) {
+			return false;
+		}
+
+		/*
+		 * The next step in the parsing loop determines the parsing state;
+		 * clear it so that state doesn't linger from the previous step.
+		 */
+		$this->parser_state = self::STATE_READY;
+
+		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
+			$this->parser_state = self::STATE_COMPLETE;
+			return false;
+		}
+
+		// Find the next tag if it exists.
+		if ( false === $this->parse_next_tag() ) {
+			if ( self::STATE_INCOMPLETE_INPUT === $this->parser_state ) {
+				$this->bytes_already_parsed = $was_at;
+			}
+
+			return false;
+		}
+
+		/*
+		 * For legacy reasons the rest of this function handles tags and their
+		 * attributes. If the processor has reached the end of the document
+		 * or if it matched any other token then it should return here to avoid
+		 * attempting to process tag-specific syntax.
+		 */
+		if (
+			self::STATE_INCOMPLETE_INPUT !== $this->parser_state &&
+			self::STATE_COMPLETE !== $this->parser_state &&
+			self::STATE_MATCHED_TAG !== $this->parser_state
+		) {
+			return true;
+		}
+
+		// Parse all of its attributes.
+		while ( $this->parse_next_attribute() ) {
+			continue;
+		}
+
+		// Ensure that the tag closes before the end of the document.
+		if (
+			self::STATE_INCOMPLETE_INPUT === $this->parser_state ||
+			$this->bytes_already_parsed >= strlen( $this->html )
+		) {
+			// Does this appropriately clear state (parsed attributes)?
+			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
+			$this->bytes_already_parsed = $was_at;
+
+			return false;
+		}
+
+		$tag_ends_at = strpos( $this->html, '>', $this->bytes_already_parsed );
+		if ( false === $tag_ends_at ) {
+			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
+			$this->bytes_already_parsed = $was_at;
+
+			return false;
+		}
+		$this->parser_state         = self::STATE_MATCHED_TAG;
+		$this->bytes_already_parsed = $tag_ends_at + 1;
+		$this->token_length         = $this->bytes_already_parsed - $this->token_starts_at;
+
+		/*
+		 * For non-DATA sections which might contain text that looks like HTML tags but
+		 * isn't, scan with the appropriate alternative mode. Looking at the first letter
+		 * of the tag name as a pre-check avoids a string allocation when it's not needed.
+		 */
+		$t = $this->html[ $this->tag_name_starts_at ];
+		if (
+			$this->is_closing_tag ||
+			! (
+				'i' === $t || 'I' === $t ||
+				'n' === $t || 'N' === $t ||
+				's' === $t || 'S' === $t ||
+				't' === $t || 'T' === $t ||
+				'x' === $t || 'X' === $t
+			)
+		) {
+			return true;
+		}
+
+		$tag_name = $this->get_tag();
+
+		/*
+		 * Preserve the opening tag pointers, as these will be overwritten
+		 * when finding the closing tag. They will be reset after finding
+		 * the closing to tag to point to the opening of the special atomic
+		 * tag sequence.
+		 */
+		$tag_name_starts_at   = $this->tag_name_starts_at;
+		$tag_name_length      = $this->tag_name_length;
+		$tag_ends_at          = $this->token_starts_at + $this->token_length;
+		$attributes           = $this->attributes;
+		$duplicate_attributes = $this->duplicate_attributes;
+
+		// Find the closing tag if necessary.
+		$found_closer = false;
+		switch ( $tag_name ) {
+			case 'SCRIPT':
+				$found_closer = $this->skip_script_data();
+				break;
+
+			case 'TEXTAREA':
+			case 'TITLE':
+				$found_closer = $this->skip_rcdata( $tag_name );
+				break;
+
+			/*
+			 * In the browser this list would include the NOSCRIPT element,
+			 * but the Tag Processor is an environment with the scripting
+			 * flag disabled, meaning that it needs to descend into the
+			 * NOSCRIPT element to be able to properly process what will be
+			 * sent to a browser.
+			 *
+			 * Note that this rule makes HTML5 syntax incompatible with XML,
+			 * because the parsing of this token depends on client application.
+			 * The NOSCRIPT element cannot be represented in the XHTML syntax.
+			 */
+			case 'IFRAME':
+			case 'NOEMBED':
+			case 'NOFRAMES':
+			case 'STYLE':
+			case 'XMP':
+				$found_closer = $this->skip_rawtext( $tag_name );
+				break;
+
+			// No other tags should be treated in their entirety here.
+			default:
+				return true;
+		}
+
+		if ( ! $found_closer ) {
+			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
+			$this->bytes_already_parsed = $was_at;
+			return false;
+		}
+
+		/*
+		 * The values here look like they reference the opening tag but they reference
+		 * the closing tag instead. This is why the opening tag values were stored
+		 * above in a variable. It reads confusingly here, but that's because the
+		 * functions that skip the contents have moved all the internal cursors past
+		 * the inner content of the tag.
+		 */
+		$this->token_starts_at      = $was_at;
+		$this->token_length         = $this->bytes_already_parsed - $this->token_starts_at;
+		$this->text_starts_at       = $tag_ends_at;
+		$this->text_length          = $this->tag_name_starts_at - $this->text_starts_at;
+		$this->tag_name_starts_at   = $tag_name_starts_at;
+		$this->tag_name_length      = $tag_name_length;
+		$this->attributes           = $attributes;
+		$this->duplicate_attributes = $duplicate_attributes;
+
+		return true;
+	}
+
+	/**
+	 * Whether the processor paused because the input HTML document ended
+	 * in the middle of a syntax element, such as in the middle of a tag.
+	 *
+	 * Example:
+	 *
+	 *     $processor = new WP_HTML_Tag_Processor( '<input type="text" value="Th' );
+	 *     false      === $processor->get_next_tag();
+	 *     true       === $processor->paused_at_incomplete_token();
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return bool Whether the parse paused at the start of an incomplete token.
+	 */
+	public function paused_at_incomplete_token(): bool {
+		return self::STATE_INCOMPLETE_INPUT === $this->parser_state;
+	}
+
+	/**
+	 * Generator for a foreach loop to step through each class name for the matched tag.
+	 *
+	 * This generator function is designed to be used inside a "foreach" loop.
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( "<div class='free &lt;egg&lt;\tlang-en'>" );
+	 *     $p->next_tag();
+	 *     foreach ( $p->class_list() as $class_name ) {
+	 *         echo "{$class_name} ";
+	 *     }
+	 *     // Outputs: "free <egg> lang-en "
+	 *
+	 * @since 6.4.0
+	 */
+	public function class_list() {
+		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+			return;
+		}
+
+		/** @var string $class contains the string value of the class attribute, with character references decoded. */
+		$class = $this->get_attribute( 'class' );
+
+		if ( ! is_string( $class ) ) {
+			return;
+		}
+
+		$seen = array();
+
+		$at = 0;
+		while ( $at < strlen( $class ) ) {
+			// Skip past any initial boundary characters.
+			$at += strspn( $class, " \t\f\r\n", $at );
+			if ( $at >= strlen( $class ) ) {
+				return;
+			}
+
+			// Find the byte length until the next boundary.
+			$length = strcspn( $class, " \t\f\r\n", $at );
+			if ( 0 === $length ) {
+				return;
+			}
+
+			/*
+			 * CSS class names are case-insensitive in the ASCII range.
+			 *
+			 * @see https://www.w3.org/TR/CSS2/syndata.html#x1
+			 */
+			$name = strtolower( substr( $class, $at, $length ) );
+			$at  += $length;
+
+			/*
+			 * It's expected that the number of class names for a given tag is relatively small.
+			 * Given this, it is probably faster overall to scan an array for a value rather
+			 * than to use the class name as a key and check if it's a key of $seen.
+			 */
+			if ( in_array( $name, $seen, true ) ) {
+				continue;
+			}
+
+			$seen[] = $name;
+			yield $name;
+		}
+	}
+
+
+	/**
+	 * Returns if a matched tag contains the given ASCII case-insensitive class name.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string $wanted_class Look for this CSS class name, ASCII case-insensitive.
+	 * @return bool|null Whether the matched tag contains the given class name, or null if not matched.
+	 */
+	public function has_class( $wanted_class ): ?bool {
+		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+			return null;
+		}
+
+		$wanted_class = strtolower( $wanted_class );
+
+		foreach ( $this->class_list() as $class_name ) {
+			if ( $class_name === $wanted_class ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+
+	/**
+	 * Sets a bookmark in the HTML document.
+	 *
+	 * Bookmarks represent specific places or tokens in the HTML
+	 * document, such as a tag opener or closer. When applying
+	 * edits to a document, such as setting an attribute, the
+	 * text offsets of that token may shift; the bookmark is
+	 * kept updated with those shifts and remains stable unless
+	 * the entire span of text in which the token sits is removed.
+	 *
+	 * Release bookmarks when they are no longer needed.
+	 *
+	 * Example:
+	 *
+	 *     <main><h2>Surprising fact you may not know!</h2></main>
+	 *           ^  ^
+	 *            \-|-- this `H2` opener bookmark tracks the token
+	 *
+	 *     <main class="clickbait"><h2>Surprising fact you may no…
+	 *                             ^  ^
+	 *                              \-|-- it shifts with edits
+	 *
+	 * Bookmarks provide the ability to seek to a previously-scanned
+	 * place in the HTML document. This avoids the need to re-scan
+	 * the entire document.
+	 *
+	 * Example:
+	 *
+	 *     <ul><li>One</li><li>Two</li><li>Three</li></ul>
+	 *                                 ^^^^
+	 *                                 want to note this last item
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( $html );
+	 *     $in_list = false;
+	 *     while ( $p->next_tag( array( 'tag_closers' => $in_list ? 'visit' : 'skip' ) ) ) {
+	 *         if ( 'UL' === $p->get_tag() ) {
+	 *             if ( $p->is_tag_closer() ) {
+	 *                 $in_list = false;
+	 *                 $p->set_bookmark( 'resume' );
+	 *                 if ( $p->seek( 'last-li' ) ) {
+	 *                     $p->add_class( 'last-li' );
+	 *                 }
+	 *                 $p->seek( 'resume' );
+	 *                 $p->release_bookmark( 'last-li' );
+	 *                 $p->release_bookmark( 'resume' );
+	 *             } else {
+	 *                 $in_list = true;
+	 *             }
+	 *         }
+	 *
+	 *         if ( 'LI' === $p->get_tag() ) {
+	 *             $p->set_bookmark( 'last-li' );
+	 *         }
+	 *     }
+	 *
+	 * Bookmarks intentionally hide the internal string offsets
+	 * to which they refer. They are maintained internally as
+	 * updates are applied to the HTML document and therefore
+	 * retain their "position" - the location to which they
+	 * originally pointed. The inability to use bookmarks with
+	 * functions like `substr` is therefore intentional to guard
+	 * against accidentally breaking the HTML.
+	 *
+	 * Because bookmarks allocate memory and require processing
+	 * for every applied update, they are limited and require
+	 * a name. They should not be created with programmatically-made
+	 * names, such as "li_{$index}" with some loop. As a general
+	 * rule they should only be created with string-literal names
+	 * like "start-of-section" or "last-paragraph".
+	 *
+	 * Bookmarks are a powerful tool to enable complicated behavior.
+	 * Consider double-checking that you need this tool if you are
+	 * reaching for it, as inappropriate use could lead to broken
+	 * HTML structure or unwanted processing overhead.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $name Identifies this particular bookmark.
+	 * @return bool Whether the bookmark was successfully created.
+	 */
+	public function set_bookmark( $name ): bool {
+		// It only makes sense to set a bookmark if the parser has paused on a concrete token.
+		if (
+			self::STATE_COMPLETE === $this->parser_state ||
+			self::STATE_INCOMPLETE_INPUT === $this->parser_state
+		) {
+			return false;
+		}
+
+		if ( ! array_key_exists( $name, $this->bookmarks ) && count( $this->bookmarks ) >= static::MAX_BOOKMARKS ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Too many bookmarks: cannot create any more.' ),
+				'6.2.0'
+			);
+			return false;
+		}
+
+		$this->bookmarks[ $name ] = new Gutenberg_HTML_Span_6_7( $this->token_starts_at, $this->token_length );
+
+		return true;
+	}
+
+
+	/**
+	 * Removes a bookmark that is no longer needed.
+	 *
+	 * Releasing a bookmark frees up the small
+	 * performance overhead it requires.
+	 *
+	 * @param string $name Name of the bookmark to remove.
+	 * @return bool Whether the bookmark already existed before removal.
+	 */
+	public function release_bookmark( $name ): bool {
+		if ( ! array_key_exists( $name, $this->bookmarks ) ) {
+			return false;
+		}
+
+		unset( $this->bookmarks[ $name ] );
+
+		return true;
+	}
+
+	/**
+	 * Skips contents of generic rawtext elements.
+	 *
+	 * @since 6.3.2
+	 *
+	 * @see https://html.spec.whatwg.org/#generic-raw-text-element-parsing-algorithm
+	 *
+	 * @param string $tag_name The uppercase tag name which will close the RAWTEXT region.
+	 * @return bool Whether an end to the RAWTEXT region was found before the end of the document.
+	 */
+	private function skip_rawtext( string $tag_name ): bool {
+		/*
+		 * These two functions distinguish themselves on whether character references are
+		 * decoded, and since functionality to read the inner markup isn't supported, it's
+		 * not necessary to implement these two functions separately.
+		 */
+		return $this->skip_rcdata( $tag_name );
+	}
+
+	/**
+	 * Skips contents of RCDATA elements, namely title and textarea tags.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
+	 *
+	 * @param string $tag_name The uppercase tag name which will close the RCDATA region.
+	 * @return bool Whether an end to the RCDATA region was found before the end of the document.
+	 */
+	private function skip_rcdata( string $tag_name ): bool {
+		$html       = $this->html;
+		$doc_length = strlen( $html );
+		$tag_length = strlen( $tag_name );
+
+		$at = $this->bytes_already_parsed;
+
+		while ( false !== $at && $at < $doc_length ) {
+			$at                       = strpos( $this->html, '</', $at );
+			$this->tag_name_starts_at = $at;
+
+			// Fail if there is no possible tag closer.
+			if ( false === $at || ( $at + $tag_length ) >= $doc_length ) {
+				return false;
+			}
+
+			$at += 2;
+
+			/*
+			 * Find a case-insensitive match to the tag name.
+			 *
+			 * Because tag names are limited to US-ASCII there is no
+			 * need to perform any kind of Unicode normalization when
+			 * comparing; any character which could be impacted by such
+			 * normalization could not be part of a tag name.
+			 */
+			for ( $i = 0; $i < $tag_length; $i++ ) {
+				$tag_char  = $tag_name[ $i ];
+				$html_char = $html[ $at + $i ];
+
+				if ( $html_char !== $tag_char && strtoupper( $html_char ) !== $tag_char ) {
+					$at += $i;
+					continue 2;
+				}
+			}
+
+			$at                        += $tag_length;
+			$this->bytes_already_parsed = $at;
+
+			if ( $at >= strlen( $html ) ) {
+				return false;
+			}
+
+			/*
+			 * Ensure that the tag name terminates to avoid matching on
+			 * substrings of a longer tag name. For example, the sequence
+			 * "</textarearug" should not match for "</textarea" even
+			 * though "textarea" is found within the text.
+			 */
+			$c = $html[ $at ];
+			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
+				continue;
+			}
+
+			while ( $this->parse_next_attribute() ) {
+				continue;
+			}
+
+			$at = $this->bytes_already_parsed;
+			if ( $at >= strlen( $this->html ) ) {
+				return false;
+			}
+
+			if ( '>' === $html[ $at ] ) {
+				$this->bytes_already_parsed = $at + 1;
+				return true;
+			}
+
+			if ( $at + 1 >= strlen( $this->html ) ) {
+				return false;
+			}
+
+			if ( '/' === $html[ $at ] && '>' === $html[ $at + 1 ] ) {
+				$this->bytes_already_parsed = $at + 2;
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Skips contents of script tags.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @return bool Whether the script tag was closed before the end of the document.
+	 */
+	private function skip_script_data(): bool {
+		$state      = 'unescaped';
+		$html       = $this->html;
+		$doc_length = strlen( $html );
+		$at         = $this->bytes_already_parsed;
+
+		while ( false !== $at && $at < $doc_length ) {
+			$at += strcspn( $html, '-<', $at );
+
+			/*
+			 * For all script states a "-->"  transitions
+			 * back into the normal unescaped script mode,
+			 * even if that's the current state.
+			 */
+			if (
+				$at + 2 < $doc_length &&
+				'-' === $html[ $at ] &&
+				'-' === $html[ $at + 1 ] &&
+				'>' === $html[ $at + 2 ]
+			) {
+				$at   += 3;
+				$state = 'unescaped';
+				continue;
+			}
+
+			// Everything of interest past here starts with "<".
+			if ( $at + 1 >= $doc_length || '<' !== $html[ $at++ ] ) {
+				continue;
+			}
+
+			/*
+			 * Unlike with "-->", the "<!--" only transitions
+			 * into the escaped mode if not already there.
+			 *
+			 * Inside the escaped modes it will be ignored; and
+			 * should never break out of the double-escaped
+			 * mode and back into the escaped mode.
+			 *
+			 * While this requires a mode change, it does not
+			 * impact the parsing otherwise, so continue
+			 * parsing after updating the state.
+			 */
+			if (
+				$at + 2 < $doc_length &&
+				'!' === $html[ $at ] &&
+				'-' === $html[ $at + 1 ] &&
+				'-' === $html[ $at + 2 ]
+			) {
+				$at   += 3;
+				$state = 'unescaped' === $state ? 'escaped' : $state;
+				continue;
+			}
+
+			if ( '/' === $html[ $at ] ) {
+				$closer_potentially_starts_at = $at - 1;
+				$is_closing                   = true;
+				++$at;
+			} else {
+				$is_closing = false;
+			}
+
+			/*
+			 * At this point the only remaining state-changes occur with the
+			 * <script> and </script> tags; unless one of these appears next,
+			 * proceed scanning to the next potential token in the text.
+			 */
+			if ( ! (
+				$at + 6 < $doc_length &&
+				( 's' === $html[ $at ] || 'S' === $html[ $at ] ) &&
+				( 'c' === $html[ $at + 1 ] || 'C' === $html[ $at + 1 ] ) &&
+				( 'r' === $html[ $at + 2 ] || 'R' === $html[ $at + 2 ] ) &&
+				( 'i' === $html[ $at + 3 ] || 'I' === $html[ $at + 3 ] ) &&
+				( 'p' === $html[ $at + 4 ] || 'P' === $html[ $at + 4 ] ) &&
+				( 't' === $html[ $at + 5 ] || 'T' === $html[ $at + 5 ] )
+			) ) {
+				++$at;
+				continue;
+			}
+
+			/*
+			 * Ensure that the script tag terminates to avoid matching on
+			 * substrings of a non-match. For example, the sequence
+			 * "<script123" should not end a script region even though
+			 * "<script" is found within the text.
+			 */
+			if ( $at + 6 >= $doc_length ) {
+				continue;
+			}
+			$at += 6;
+			$c   = $html[ $at ];
+			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
+				++$at;
+				continue;
+			}
+
+			if ( 'escaped' === $state && ! $is_closing ) {
+				$state = 'double-escaped';
+				continue;
+			}
+
+			if ( 'double-escaped' === $state && $is_closing ) {
+				$state = 'escaped';
+				continue;
+			}
+
+			if ( $is_closing ) {
+				$this->bytes_already_parsed = $closer_potentially_starts_at;
+				$this->tag_name_starts_at   = $closer_potentially_starts_at;
+				if ( $this->bytes_already_parsed >= $doc_length ) {
+					return false;
+				}
+
+				while ( $this->parse_next_attribute() ) {
+					continue;
+				}
+
+				if ( $this->bytes_already_parsed >= $doc_length ) {
+					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+					return false;
+				}
+
+				if ( '>' === $html[ $this->bytes_already_parsed ] ) {
+					++$this->bytes_already_parsed;
+					return true;
+				}
+			}
+
+			++$at;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Parses the next tag.
+	 *
+	 * This will find and start parsing the next tag, including
+	 * the opening `<`, the potential closer `/`, and the tag
+	 * name. It does not parse the attributes or scan to the
+	 * closing `>`; these are left for other methods.
+	 *
+	 * @since 6.2.0
+	 * @since 6.2.1 Support abruptly-closed comments, invalid-tag-closer-comments, and empty elements.
+	 *
+	 * @return bool Whether a tag was found before the end of the document.
+	 */
+	private function parse_next_tag(): bool {
+		$this->after_tag();
+
+		$html       = $this->html;
+		$doc_length = strlen( $html );
+		$was_at     = $this->bytes_already_parsed;
+		$at         = $was_at;
+
+		while ( $at < $doc_length ) {
+			$at = strpos( $html, '<', $at );
+			if ( false === $at ) {
+				break;
+			}
+
+			if ( $at > $was_at ) {
+				/*
+				 * A "<" normally starts a new HTML tag or syntax token, but in cases where the
+				 * following character can't produce a valid token, the "<" is instead treated
+				 * as plaintext and the parser should skip over it. This avoids a problem when
+				 * following earlier practices of typing emoji with text, e.g. "<3". This
+				 * should be a heart, not a tag. It's supposed to be rendered, not hidden.
+				 *
+				 * At this point the parser checks if this is one of those cases and if it is
+				 * will continue searching for the next "<" in search of a token boundary.
+				 *
+				 * @see https://html.spec.whatwg.org/#tag-open-state
+				 */
+				if ( 1 !== strspn( $html, '!/?abcdefghijklmnopqrstuvwxyzABCEFGHIJKLMNOPQRSTUVWXYZ', $at + 1, 1 ) ) {
+					++$at;
+					continue;
+				}
+
+				$this->parser_state         = self::STATE_TEXT_NODE;
+				$this->token_starts_at      = $was_at;
+				$this->token_length         = $at - $was_at;
+				$this->text_starts_at       = $was_at;
+				$this->text_length          = $this->token_length;
+				$this->bytes_already_parsed = $at;
+				return true;
+			}
+
+			$this->token_starts_at = $at;
+
+			if ( $at + 1 < $doc_length && '/' === $this->html[ $at + 1 ] ) {
+				$this->is_closing_tag = true;
+				++$at;
+			} else {
+				$this->is_closing_tag = false;
+			}
+
+			/*
+			 * HTML tag names must start with [a-zA-Z] otherwise they are not tags.
+			 * For example, "<3" is rendered as text, not a tag opener. If at least
+			 * one letter follows the "<" then _it is_ a tag, but if the following
+			 * character is anything else it _is not a tag_.
+			 *
+			 * It's not uncommon to find non-tags starting with `<` in an HTML
+			 * document, so it's good for performance to make this pre-check before
+			 * continuing to attempt to parse a tag name.
+			 *
+			 * Reference:
+			 * * https://html.spec.whatwg.org/multipage/parsing.html#data-state
+			 * * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
+			 */
+			$tag_name_prefix_length = strspn( $html, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', $at + 1 );
+			if ( $tag_name_prefix_length > 0 ) {
+				++$at;
+				$this->parser_state         = self::STATE_MATCHED_TAG;
+				$this->tag_name_starts_at   = $at;
+				$this->tag_name_length      = $tag_name_prefix_length + strcspn( $html, " \t\f\r\n/>", $at + $tag_name_prefix_length );
+				$this->bytes_already_parsed = $at + $this->tag_name_length;
+				return true;
+			}
+
+			/*
+			 * Abort if no tag is found before the end of
+			 * the document. There is nothing left to parse.
+			 */
+			if ( $at + 1 >= $doc_length ) {
+				$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+				return false;
+			}
+
+			/*
+			 * `<!` transitions to markup declaration open state
+			 * https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state
+			 */
+			if ( ! $this->is_closing_tag && '!' === $html[ $at + 1 ] ) {
+				/*
+				 * `<!--` transitions to a comment state – apply further comment rules.
+				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
+				 */
+				if ( 0 === substr_compare( $html, '--', $at + 2, 2 ) ) {
+					$closer_at = $at + 4;
+					// If it's not possible to close the comment then there is nothing more to scan.
+					if ( $doc_length <= $closer_at ) {
+						$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+						return false;
+					}
+
+					// Abruptly-closed empty comments are a sequence of dashes followed by `>`.
+					$span_of_dashes = strspn( $html, '-', $closer_at );
+					if ( '>' === $html[ $closer_at + $span_of_dashes ] ) {
+						/*
+						 * @todo When implementing `set_modifiable_text()` ensure that updates to this token
+						 *       don't break the syntax for short comments, e.g. `<!--->`. Unlike other comment
+						 *       and bogus comment syntax, these leave no clear insertion point for text and
+						 *       they need to be modified specially in order to contain text. E.g. to store
+						 *       `?` as the modifiable text, the `<!--->` needs to become `<!--?-->`, which
+						 *       involves inserting an additional `-` into the token after the modifiable text.
+						 */
+						$this->parser_state = self::STATE_COMMENT;
+						$this->comment_type = self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT;
+						$this->token_length = $closer_at + $span_of_dashes + 1 - $this->token_starts_at;
+
+						// Only provide modifiable text if the token is long enough to contain it.
+						if ( $span_of_dashes >= 2 ) {
+							$this->comment_type   = self::COMMENT_AS_HTML_COMMENT;
+							$this->text_starts_at = $this->token_starts_at + 4;
+							$this->text_length    = $span_of_dashes - 2;
+						}
+
+						$this->bytes_already_parsed = $closer_at + $span_of_dashes + 1;
+						return true;
+					}
+
+					/*
+					 * Comments may be closed by either a --> or an invalid --!>.
+					 * The first occurrence closes the comment.
+					 *
+					 * See https://html.spec.whatwg.org/#parse-error-incorrectly-closed-comment
+					 */
+					--$closer_at; // Pre-increment inside condition below reduces risk of accidental infinite looping.
+					while ( ++$closer_at < $doc_length ) {
+						$closer_at = strpos( $html, '--', $closer_at );
+						if ( false === $closer_at ) {
+							$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+							return false;
+						}
+
+						if ( $closer_at + 2 < $doc_length && '>' === $html[ $closer_at + 2 ] ) {
+							$this->parser_state         = self::STATE_COMMENT;
+							$this->comment_type         = self::COMMENT_AS_HTML_COMMENT;
+							$this->token_length         = $closer_at + 3 - $this->token_starts_at;
+							$this->text_starts_at       = $this->token_starts_at + 4;
+							$this->text_length          = $closer_at - $this->text_starts_at;
+							$this->bytes_already_parsed = $closer_at + 3;
+							return true;
+						}
+
+						if (
+							$closer_at + 3 < $doc_length &&
+							'!' === $html[ $closer_at + 2 ] &&
+							'>' === $html[ $closer_at + 3 ]
+						) {
+							$this->parser_state         = self::STATE_COMMENT;
+							$this->comment_type         = self::COMMENT_AS_HTML_COMMENT;
+							$this->token_length         = $closer_at + 4 - $this->token_starts_at;
+							$this->text_starts_at       = $this->token_starts_at + 4;
+							$this->text_length          = $closer_at - $this->text_starts_at;
+							$this->bytes_already_parsed = $closer_at + 4;
+							return true;
+						}
+					}
+				}
+
+				/*
+				 * `<!DOCTYPE` transitions to DOCTYPE state – skip to the nearest >
+				 * These are ASCII-case-insensitive.
+				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
+				 */
+				if (
+					$doc_length > $at + 8 &&
+					( 'D' === $html[ $at + 2 ] || 'd' === $html[ $at + 2 ] ) &&
+					( 'O' === $html[ $at + 3 ] || 'o' === $html[ $at + 3 ] ) &&
+					( 'C' === $html[ $at + 4 ] || 'c' === $html[ $at + 4 ] ) &&
+					( 'T' === $html[ $at + 5 ] || 't' === $html[ $at + 5 ] ) &&
+					( 'Y' === $html[ $at + 6 ] || 'y' === $html[ $at + 6 ] ) &&
+					( 'P' === $html[ $at + 7 ] || 'p' === $html[ $at + 7 ] ) &&
+					( 'E' === $html[ $at + 8 ] || 'e' === $html[ $at + 8 ] )
+				) {
+					$closer_at = strpos( $html, '>', $at + 9 );
+					if ( false === $closer_at ) {
+						$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+						return false;
+					}
+
+					$this->parser_state         = self::STATE_DOCTYPE;
+					$this->token_length         = $closer_at + 1 - $this->token_starts_at;
+					$this->text_starts_at       = $this->token_starts_at + 9;
+					$this->text_length          = $closer_at - $this->text_starts_at;
+					$this->bytes_already_parsed = $closer_at + 1;
+					return true;
+				}
+
+				/*
+				 * Anything else here is an incorrectly-opened comment and transitions
+				 * to the bogus comment state - skip to the nearest >. If no closer is
+				 * found then the HTML was truncated inside the markup declaration.
+				 */
+				$closer_at = strpos( $html, '>', $at + 1 );
+				if ( false === $closer_at ) {
+					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+					return false;
+				}
+
+				$this->parser_state         = self::STATE_COMMENT;
+				$this->comment_type         = self::COMMENT_AS_INVALID_HTML;
+				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
+				$this->text_starts_at       = $this->token_starts_at + 2;
+				$this->text_length          = $closer_at - $this->text_starts_at;
+				$this->bytes_already_parsed = $closer_at + 1;
+
+				/*
+				 * Identify nodes that would be CDATA if HTML had CDATA sections.
+				 *
+				 * This section must occur after identifying the bogus comment end
+				 * because in an HTML parser it will span to the nearest `>`, even
+				 * if there's no `]]>` as would be required in an XML document. It
+				 * is therefore not possible to parse a CDATA section containing
+				 * a `>` in the HTML syntax.
+				 *
+				 * Inside foreign elements there is a discrepancy between browsers
+				 * and the specification on this.
+				 *
+				 * @todo Track whether the Tag Processor is inside a foreign element
+				 *       and require the proper closing `]]>` in those cases.
+				 */
+				if (
+					$this->token_length >= 10 &&
+					'[' === $html[ $this->token_starts_at + 2 ] &&
+					'C' === $html[ $this->token_starts_at + 3 ] &&
+					'D' === $html[ $this->token_starts_at + 4 ] &&
+					'A' === $html[ $this->token_starts_at + 5 ] &&
+					'T' === $html[ $this->token_starts_at + 6 ] &&
+					'A' === $html[ $this->token_starts_at + 7 ] &&
+					'[' === $html[ $this->token_starts_at + 8 ] &&
+					']' === $html[ $closer_at - 1 ] &&
+					']' === $html[ $closer_at - 2 ]
+				) {
+					$this->parser_state    = self::STATE_COMMENT;
+					$this->comment_type    = self::COMMENT_AS_CDATA_LOOKALIKE;
+					$this->text_starts_at += 7;
+					$this->text_length    -= 9;
+				}
+
+				return true;
+			}
+
+			/*
+			 * </> is a missing end tag name, which is ignored.
+			 *
+			 * This was also known as the "presumptuous empty tag"
+			 * in early discussions as it was proposed to close
+			 * the nearest previous opening tag.
+			 *
+			 * See https://html.spec.whatwg.org/#parse-error-missing-end-tag-name
+			 */
+			if ( '>' === $html[ $at + 1 ] ) {
+				// `<>` is interpreted as plaintext.
+				if ( ! $this->is_closing_tag ) {
+					++$at;
+					continue;
+				}
+
+				$this->parser_state         = self::STATE_PRESUMPTUOUS_TAG;
+				$this->token_length         = $at + 2 - $this->token_starts_at;
+				$this->bytes_already_parsed = $at + 2;
+				return true;
+			}
+
+			/*
+			 * `<?` transitions to a bogus comment state – skip to the nearest >
+			 * See https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
+			 */
+			if ( ! $this->is_closing_tag && '?' === $html[ $at + 1 ] ) {
+				$closer_at = strpos( $html, '>', $at + 2 );
+				if ( false === $closer_at ) {
+					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+					return false;
+				}
+
+				$this->parser_state         = self::STATE_COMMENT;
+				$this->comment_type         = self::COMMENT_AS_INVALID_HTML;
+				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
+				$this->text_starts_at       = $this->token_starts_at + 2;
+				$this->text_length          = $closer_at - $this->text_starts_at;
+				$this->bytes_already_parsed = $closer_at + 1;
+
+				/*
+				 * Identify a Processing Instruction node were HTML to have them.
+				 *
+				 * This section must occur after identifying the bogus comment end
+				 * because in an HTML parser it will span to the nearest `>`, even
+				 * if there's no `?>` as would be required in an XML document. It
+				 * is therefore not possible to parse a Processing Instruction node
+				 * containing a `>` in the HTML syntax.
+				 *
+				 * XML allows for more target names, but this code only identifies
+				 * those with ASCII-representable target names. This means that it
+				 * may identify some Processing Instruction nodes as bogus comments,
+				 * but it will not misinterpret the HTML structure. By limiting the
+				 * identification to these target names the Tag Processor can avoid
+				 * the need to start parsing UTF-8 sequences.
+				 *
+				 * > NameStartChar ::= ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] |
+				 *                     [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] |
+				 *                     [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
+				 *                     [#x10000-#xEFFFF]
+				 * > NameChar      ::= NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
+				 *
+				 * @see https://www.w3.org/TR/2006/REC-xml11-20060816/#NT-PITarget
+				 */
+				if ( $this->token_length >= 5 && '?' === $html[ $closer_at - 1 ] ) {
+					$comment_text     = substr( $html, $this->token_starts_at + 2, $this->token_length - 4 );
+					$pi_target_length = strspn( $comment_text, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ:_' );
+
+					if ( 0 < $pi_target_length ) {
+						$pi_target_length += strspn( $comment_text, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:_-.', $pi_target_length );
+
+						$this->comment_type       = self::COMMENT_AS_PI_NODE_LOOKALIKE;
+						$this->tag_name_starts_at = $this->token_starts_at + 2;
+						$this->tag_name_length    = $pi_target_length;
+						$this->text_starts_at    += $pi_target_length;
+						$this->text_length       -= $pi_target_length + 1;
+					}
+				}
+
+				return true;
+			}
+
+			/*
+			 * If a non-alpha starts the tag name in a tag closer it's a comment.
+			 * Find the first `>`, which closes the comment.
+			 *
+			 * This parser classifies these particular comments as special "funky comments"
+			 * which are made available for further processing.
+			 *
+			 * See https://html.spec.whatwg.org/#parse-error-invalid-first-character-of-tag-name
+			 */
+			if ( $this->is_closing_tag ) {
+				// No chance of finding a closer.
+				if ( $at + 3 > $doc_length ) {
+					return false;
+				}
+
+				$closer_at = strpos( $html, '>', $at + 2 );
+				if ( false === $closer_at ) {
+					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+					return false;
+				}
+
+				$this->parser_state         = self::STATE_FUNKY_COMMENT;
+				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
+				$this->text_starts_at       = $this->token_starts_at + 2;
+				$this->text_length          = $closer_at - $this->text_starts_at;
+				$this->bytes_already_parsed = $closer_at + 1;
+				return true;
+			}
+
+			++$at;
+		}
+
+		/*
+		 * This does not imply an incomplete parse; it indicates that there
+		 * can be nothing left in the document other than a #text node.
+		 */
+		$this->parser_state         = self::STATE_TEXT_NODE;
+		$this->token_starts_at      = $was_at;
+		$this->token_length         = $doc_length - $was_at;
+		$this->text_starts_at       = $was_at;
+		$this->text_length          = $this->token_length;
+		$this->bytes_already_parsed = $doc_length;
+		return true;
+	}
+
+	/**
+	 * Parses the next attribute.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @return bool Whether an attribute was found before the end of the document.
+	 */
+	private function parse_next_attribute(): bool {
+		$doc_length = strlen( $this->html );
+
+		// Skip whitespace and slashes.
+		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n/", $this->bytes_already_parsed );
+		if ( $this->bytes_already_parsed >= $doc_length ) {
+			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+			return false;
+		}
+
+		/*
+		 * Treat the equal sign as a part of the attribute
+		 * name if it is the first encountered byte.
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/parsing.html#before-attribute-name-state
+		 */
+		$name_length = '=' === $this->html[ $this->bytes_already_parsed ]
+			? 1 + strcspn( $this->html, "=/> \t\f\r\n", $this->bytes_already_parsed + 1 )
+			: strcspn( $this->html, "=/> \t\f\r\n", $this->bytes_already_parsed );
+
+		// No attribute, just tag closer.
+		if ( 0 === $name_length || $this->bytes_already_parsed + $name_length >= $doc_length ) {
+			return false;
+		}
+
+		$attribute_start             = $this->bytes_already_parsed;
+		$attribute_name              = substr( $this->html, $attribute_start, $name_length );
+		$this->bytes_already_parsed += $name_length;
+		if ( $this->bytes_already_parsed >= $doc_length ) {
+			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+			return false;
+		}
+
+		$this->skip_whitespace();
+		if ( $this->bytes_already_parsed >= $doc_length ) {
+			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+			return false;
+		}
+
+		$has_value = '=' === $this->html[ $this->bytes_already_parsed ];
+		if ( $has_value ) {
+			++$this->bytes_already_parsed;
+			$this->skip_whitespace();
+			if ( $this->bytes_already_parsed >= $doc_length ) {
+				$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+				return false;
+			}
+
+			switch ( $this->html[ $this->bytes_already_parsed ] ) {
+				case "'":
+				case '"':
+					$quote                      = $this->html[ $this->bytes_already_parsed ];
+					$value_start                = $this->bytes_already_parsed + 1;
+					$end_quote_at               = strpos( $this->html, $quote, $value_start );
+					$end_quote_at               = false === $end_quote_at ? $doc_length : $end_quote_at;
+					$value_length               = $end_quote_at - $value_start;
+					$attribute_end              = $end_quote_at + 1;
+					$this->bytes_already_parsed = $attribute_end;
+					break;
+
+				default:
+					$value_start                = $this->bytes_already_parsed;
+					$value_length               = strcspn( $this->html, "> \t\f\r\n", $value_start );
+					$attribute_end              = $value_start + $value_length;
+					$this->bytes_already_parsed = $attribute_end;
+			}
+		} else {
+			$value_start   = $this->bytes_already_parsed;
+			$value_length  = 0;
+			$attribute_end = $attribute_start + $name_length;
+		}
+
+		if ( $attribute_end >= $doc_length ) {
+			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
+
+			return false;
+		}
+
+		if ( $this->is_closing_tag ) {
+			return true;
+		}
+
+		/*
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$comparable_name = strtolower( $attribute_name );
+
+		// If an attribute is listed many times, only use the first declaration and ignore the rest.
+		if ( ! isset( $this->attributes[ $comparable_name ] ) ) {
+			$this->attributes[ $comparable_name ] = new Gutenberg_HTML_Attribute_Token_6_7(
+				$attribute_name,
+				$value_start,
+				$value_length,
+				$attribute_start,
+				$attribute_end - $attribute_start,
+				! $has_value
+			);
+
+			return true;
+		}
+
+		/*
+		 * Track the duplicate attributes so if we remove it, all disappear together.
+		 *
+		 * While `$this->duplicated_attributes` could always be stored as an `array()`,
+		 * which would simplify the logic here, storing a `null` and only allocating
+		 * an array when encountering duplicates avoids needless allocations in the
+		 * normative case of parsing tags with no duplicate attributes.
+		 */
+		$duplicate_span = new Gutenberg_HTML_Span_6_7( $attribute_start, $attribute_end - $attribute_start );
+		if ( null === $this->duplicate_attributes ) {
+			$this->duplicate_attributes = array( $comparable_name => array( $duplicate_span ) );
+		} elseif ( ! isset( $this->duplicate_attributes[ $comparable_name ] ) ) {
+			$this->duplicate_attributes[ $comparable_name ] = array( $duplicate_span );
+		} else {
+			$this->duplicate_attributes[ $comparable_name ][] = $duplicate_span;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Move the internal cursor past any immediate successive whitespace.
+	 *
+	 * @since 6.2.0
+	 */
+	private function skip_whitespace(): void {
+		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n", $this->bytes_already_parsed );
+	}
+
+	/**
+	 * Applies attribute updates and cleans up once a tag is fully parsed.
+	 *
+	 * @since 6.2.0
+	 */
+	private function after_tag(): void {
+		/*
+		 * There could be lexical updates enqueued for an attribute that
+		 * also exists on the next tag. In order to avoid conflating the
+		 * attributes across the two tags, lexical updates with names
+		 * need to be flushed to raw lexical updates.
+		 */
+		$this->class_name_updates_to_attributes_updates();
+
+		/*
+		 * Purge updates if there are too many. The actual count isn't
+		 * scientific, but a few values from 100 to a few thousand were
+		 * tests to find a practically-useful limit.
+		 *
+		 * If the update queue grows too big, then the Tag Processor
+		 * will spend more time iterating through them and lose the
+		 * efficiency gains of deferring applying them.
+		 */
+		if ( 1000 < count( $this->lexical_updates ) ) {
+			$this->get_updated_html();
+		}
+
+		foreach ( $this->lexical_updates as $name => $update ) {
+			/*
+			 * Any updates appearing after the cursor should be applied
+			 * before proceeding, otherwise they may be overlooked.
+			 */
+			if ( $update->start >= $this->bytes_already_parsed ) {
+				$this->get_updated_html();
+				break;
+			}
+
+			if ( is_int( $name ) ) {
+				continue;
+			}
+
+			$this->lexical_updates[] = $update;
+			unset( $this->lexical_updates[ $name ] );
+		}
+
+		$this->token_starts_at      = null;
+		$this->token_length         = null;
+		$this->tag_name_starts_at   = null;
+		$this->tag_name_length      = null;
+		$this->text_starts_at       = 0;
+		$this->text_length          = 0;
+		$this->is_closing_tag       = null;
+		$this->attributes           = array();
+		$this->comment_type         = null;
+		$this->duplicate_attributes = null;
+	}
+
+	/**
+	 * Converts class name updates into tag attributes updates
+	 * (they are accumulated in different data formats for performance).
+	 *
+	 * @since 6.2.0
+	 *
+	 * @see WP_HTML_Tag_Processor::$lexical_updates
+	 * @see WP_HTML_Tag_Processor::$classname_updates
+	 */
+	private function class_name_updates_to_attributes_updates(): void {
+		if ( count( $this->classname_updates ) === 0 ) {
+			return;
+		}
+
+		$existing_class = $this->get_enqueued_attribute_value( 'class' );
+		if ( null === $existing_class || true === $existing_class ) {
+			$existing_class = '';
+		}
+
+		if ( false === $existing_class && isset( $this->attributes['class'] ) ) {
+			$existing_class = substr(
+				$this->html,
+				$this->attributes['class']->value_starts_at,
+				$this->attributes['class']->value_length
+			);
+		}
+
+		if ( false === $existing_class ) {
+			$existing_class = '';
+		}
+
+		/**
+		 * Updated "class" attribute value.
+		 *
+		 * This is incrementally built while scanning through the existing class
+		 * attribute, skipping removed classes on the way, and then appending
+		 * added classes at the end. Only when finished processing will the
+		 * value contain the final new value.
+
+		 * @var string $class
+		 */
+		$class = '';
+
+		/**
+		 * Tracks the cursor position in the existing
+		 * class attribute value while parsing.
+		 *
+		 * @var int $at
+		 */
+		$at = 0;
+
+		/**
+		 * Indicates if there's any need to modify the existing class attribute.
+		 *
+		 * If a call to `add_class()` and `remove_class()` wouldn't impact
+		 * the `class` attribute value then there's no need to rebuild it.
+		 * For example, when adding a class that's already present or
+		 * removing one that isn't.
+		 *
+		 * This flag enables a performance optimization when none of the enqueued
+		 * class updates would impact the `class` attribute; namely, that the
+		 * processor can continue without modifying the input document, as if
+		 * none of the `add_class()` or `remove_class()` calls had been made.
+		 *
+		 * This flag is set upon the first change that requires a string update.
+		 *
+		 * @var bool $modified
+		 */
+		$modified = false;
+
+		// Remove unwanted classes by only copying the new ones.
+		$existing_class_length = strlen( $existing_class );
+		while ( $at < $existing_class_length ) {
+			// Skip to the first non-whitespace character.
+			$ws_at     = $at;
+			$ws_length = strspn( $existing_class, " \t\f\r\n", $ws_at );
+			$at       += $ws_length;
+
+			// Capture the class name – it's everything until the next whitespace.
+			$name_length = strcspn( $existing_class, " \t\f\r\n", $at );
+			if ( 0 === $name_length ) {
+				// If no more class names are found then that's the end.
+				break;
+			}
+
+			$name = substr( $existing_class, $at, $name_length );
+			$at  += $name_length;
+
+			// If this class is marked for removal, start processing the next one.
+			$remove_class = (
+				isset( $this->classname_updates[ $name ] ) &&
+				self::REMOVE_CLASS === $this->classname_updates[ $name ]
+			);
+
+			// If a class has already been seen then skip it; it should not be added twice.
+			if ( ! $remove_class ) {
+				$this->classname_updates[ $name ] = self::SKIP_CLASS;
+			}
+
+			if ( $remove_class ) {
+				$modified = true;
+				continue;
+			}
+
+			/*
+			 * Otherwise, append it to the new "class" attribute value.
+			 *
+			 * There are options for handling whitespace between tags.
+			 * Preserving the existing whitespace produces fewer changes
+			 * to the HTML content and should clarify the before/after
+			 * content when debugging the modified output.
+			 *
+			 * This approach contrasts normalizing the inter-class
+			 * whitespace to a single space, which might appear cleaner
+			 * in the output HTML but produce a noisier change.
+			 */
+			if ( '' !== $class ) {
+				$class .= substr( $existing_class, $ws_at, $ws_length );
+			}
+			$class .= $name;
+		}
+
+		// Add new classes by appending those which haven't already been seen.
+		foreach ( $this->classname_updates as $name => $operation ) {
+			if ( self::ADD_CLASS === $operation ) {
+				$modified = true;
+
+				$class .= strlen( $class ) > 0 ? ' ' : '';
+				$class .= $name;
+			}
+		}
+
+		$this->classname_updates = array();
+		if ( ! $modified ) {
+			return;
+		}
+
+		if ( strlen( $class ) > 0 ) {
+			$this->set_attribute( 'class', $class );
+		} else {
+			$this->remove_attribute( 'class' );
+		}
+	}
+
+	/**
+	 * Applies attribute updates to HTML document.
+	 *
+	 * @since 6.2.0
+	 * @since 6.2.1 Accumulates shift for internal cursor and passed pointer.
+	 * @since 6.3.0 Invalidate any bookmarks whose targets are overwritten.
+	 *
+	 * @param int $shift_this_point Accumulate and return shift for this position.
+	 * @return int How many bytes the given pointer moved in response to the updates.
+	 */
+	private function apply_attributes_updates( int $shift_this_point ): int {
+		if ( ! count( $this->lexical_updates ) ) {
+			return 0;
+		}
+
+		$accumulated_shift_for_given_point = 0;
+
+		/*
+		 * Attribute updates can be enqueued in any order but updates
+		 * to the document must occur in lexical order; that is, each
+		 * replacement must be made before all others which follow it
+		 * at later string indices in the input document.
+		 *
+		 * Sorting avoid making out-of-order replacements which
+		 * can lead to mangled output, partially-duplicated
+		 * attributes, and overwritten attributes.
+		 */
+		usort( $this->lexical_updates, array( self::class, 'sort_start_ascending' ) );
+
+		$bytes_already_copied = 0;
+		$output_buffer        = '';
+		foreach ( $this->lexical_updates as $diff ) {
+			$shift = strlen( $diff->text ) - $diff->length;
+
+			// Adjust the cursor position by however much an update affects it.
+			if ( $diff->start < $this->bytes_already_parsed ) {
+				$this->bytes_already_parsed += $shift;
+			}
+
+			// Accumulate shift of the given pointer within this function call.
+			if ( $diff->start <= $shift_this_point ) {
+				$accumulated_shift_for_given_point += $shift;
+			}
+
+			$output_buffer       .= substr( $this->html, $bytes_already_copied, $diff->start - $bytes_already_copied );
+			$output_buffer       .= $diff->text;
+			$bytes_already_copied = $diff->start + $diff->length;
+		}
+
+		$this->html = $output_buffer . substr( $this->html, $bytes_already_copied );
+
+		/*
+		 * Adjust bookmark locations to account for how the text
+		 * replacements adjust offsets in the input document.
+		 */
+		foreach ( $this->bookmarks as $bookmark_name => $bookmark ) {
+			$bookmark_end = $bookmark->start + $bookmark->length;
+
+			/*
+			 * Each lexical update which appears before the bookmark's endpoints
+			 * might shift the offsets for those endpoints. Loop through each change
+			 * and accumulate the total shift for each bookmark, then apply that
+			 * shift after tallying the full delta.
+			 */
+			$head_delta = 0;
+			$tail_delta = 0;
+
+			foreach ( $this->lexical_updates as $diff ) {
+				$diff_end = $diff->start + $diff->length;
+
+				if ( $bookmark->start < $diff->start && $bookmark_end < $diff->start ) {
+					break;
+				}
+
+				if ( $bookmark->start >= $diff->start && $bookmark_end < $diff_end ) {
+					$this->release_bookmark( $bookmark_name );
+					continue 2;
+				}
+
+				$delta = strlen( $diff->text ) - $diff->length;
+
+				if ( $bookmark->start >= $diff->start ) {
+					$head_delta += $delta;
+				}
+
+				if ( $bookmark_end >= $diff_end ) {
+					$tail_delta += $delta;
+				}
+			}
+
+			$bookmark->start  += $head_delta;
+			$bookmark->length += $tail_delta - $head_delta;
+		}
+
+		$this->lexical_updates = array();
+
+		return $accumulated_shift_for_given_point;
+	}
+
+	/**
+	 * Checks whether a bookmark with the given name exists.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @param string $bookmark_name Name to identify a bookmark that potentially exists.
+	 * @return bool Whether that bookmark exists.
+	 */
+	public function has_bookmark( $bookmark_name ): bool {
+		return array_key_exists( $bookmark_name, $this->bookmarks );
+	}
+
+	/**
+	 * Move the internal cursor in the Tag Processor to a given bookmark's location.
+	 *
+	 * In order to prevent accidental infinite loops, there's a
+	 * maximum limit on the number of times seek() can be called.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $bookmark_name Jump to the place in the document identified by this bookmark name.
+	 * @return bool Whether the internal cursor was successfully moved to the bookmark's location.
+	 */
+	public function seek( $bookmark_name ): bool {
+		if ( ! array_key_exists( $bookmark_name, $this->bookmarks ) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Unknown bookmark name.' ),
+				'6.2.0'
+			);
+			return false;
+		}
+
+		if ( ++$this->seek_count > static::MAX_SEEK_OPS ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Too many calls to seek() - this can lead to performance issues.' ),
+				'6.2.0'
+			);
+			return false;
+		}
+
+		// Flush out any pending updates to the document.
+		$this->get_updated_html();
+
+		// Point this tag processor before the sought tag opener and consume it.
+		$this->bytes_already_parsed = $this->bookmarks[ $bookmark_name ]->start;
+		$this->parser_state         = self::STATE_READY;
+		return $this->next_token();
+	}
+
+	/**
+	 * Compare two WP_HTML_Text_Replacement objects.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param WP_HTML_Text_Replacement $a First attribute update.
+	 * @param WP_HTML_Text_Replacement $b Second attribute update.
+	 * @return int Comparison value for string order.
+	 */
+	private static function sort_start_ascending( Gutenberg_HTML_Text_Replacement_6_7 $a, Gutenberg_HTML_Text_Replacement_6_7 $b ): int {
+		$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;
+		}
+
+		/*
+		 * This code should be unreachable, because it implies the two replacements
+		 * start at the same location and contain the same text.
+		 */
+		return $a->length - $b->length;
+	}
+
+	/**
+	 * Return the enqueued value for a given attribute, if one exists.
+	 *
+	 * Enqueued updates can take different data types:
+	 *  - If an update is enqueued and is boolean, the return will be `true`
+	 *  - If an update is otherwise enqueued, the return will be the string value of that update.
+	 *  - If an attribute is enqueued to be removed, the return will be `null` to indicate that.
+	 *  - If no updates are enqueued, the return will be `false` to differentiate from "removed."
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $comparable_name The attribute name in its comparable form.
+	 * @return string|boolean|null Value of enqueued update if present, otherwise false.
+	 */
+	private function get_enqueued_attribute_value( string $comparable_name ) {
+		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+			return false;
+		}
+
+		if ( ! isset( $this->lexical_updates[ $comparable_name ] ) ) {
+			return false;
+		}
+
+		$enqueued_text = $this->lexical_updates[ $comparable_name ]->text;
+
+		// Removed attributes erase the entire span.
+		if ( '' === $enqueued_text ) {
+			return null;
+		}
+
+		/*
+		 * Boolean attribute updates are just the attribute name without a corresponding value.
+		 *
+		 * This value might differ from the given comparable name in that there could be leading
+		 * or trailing whitespace, and that the casing follows the name given in `set_attribute`.
+		 *
+		 * Example:
+		 *
+		 *     $p->set_attribute( 'data-TEST-id', 'update' );
+		 *     'update' === $p->get_enqueued_attribute_value( 'data-test-id' );
+		 *
+		 * Detect this difference based on the absence of the `=`, which _must_ exist in any
+		 * attribute containing a value, e.g. `<input type="text" enabled />`.
+		 *                                            ¹           ²
+		 *                                       1. Attribute with a string value.
+		 *                                       2. Boolean attribute whose value is `true`.
+		 */
+		$equals_at = strpos( $enqueued_text, '=' );
+		if ( false === $equals_at ) {
+			return true;
+		}
+
+		/*
+		 * Finally, a normal update's value will appear after the `=` and
+		 * be double-quoted, as performed incidentally by `set_attribute`.
+		 *
+		 * e.g. `type="text"`
+		 *           ¹²    ³
+		 *        1. Equals is here.
+		 *        2. Double-quoting starts one after the equals sign.
+		 *        3. Double-quoting ends at the last character in the update.
+		 */
+		$enqueued_value = substr( $enqueued_text, $equals_at + 2, -1 );
+		return Gutenberg_HTML_Decoder_6_7::decode_attribute( $enqueued_value );
+	}
+
+	/**
+	 * Returns the value of a requested attribute from a matched tag opener if that attribute exists.
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
+	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 *     $p->get_attribute( 'data-test-id' ) === '14';
+	 *     $p->get_attribute( 'enabled' ) === true;
+	 *     $p->get_attribute( 'aria-label' ) === null;
+	 *
+	 *     $p->next_tag() === false;
+	 *     $p->get_attribute( 'class' ) === null;
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $name Name of attribute whose value is requested.
+	 * @return string|true|null Value of attribute or `null` if not available. Boolean attributes return `true`.
+	 */
+	public function get_attribute( $name ) {
+		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+			return null;
+		}
+
+		$comparable = strtolower( $name );
+
+		/*
+		 * For every attribute other than `class` it's possible to perform a quick check if
+		 * there's an enqueued lexical update whose value takes priority over what's found in
+		 * the input document.
+		 *
+		 * The `class` attribute is special though because of the exposed helpers `add_class`
+		 * and `remove_class`. These form a builder for the `class` attribute, so an additional
+		 * check for enqueued class changes is required in addition to the check for any enqueued
+		 * attribute values. If any exist, those enqueued class changes must first be flushed out
+		 * into an attribute value update.
+		 */
+		if ( 'class' === $name ) {
+			$this->class_name_updates_to_attributes_updates();
+		}
+
+		// Return any enqueued attribute value updates if they exist.
+		$enqueued_value = $this->get_enqueued_attribute_value( $comparable );
+		if ( false !== $enqueued_value ) {
+			return $enqueued_value;
+		}
+
+		if ( ! isset( $this->attributes[ $comparable ] ) ) {
+			return null;
+		}
+
+		$attribute = $this->attributes[ $comparable ];
+
+		/*
+		 * This flag distinguishes an attribute with no value
+		 * from an attribute with an empty string value. For
+		 * unquoted attributes this could look very similar.
+		 * It refers to whether an `=` follows the name.
+		 *
+		 * e.g. <div boolean-attribute empty-attribute=></div>
+		 *           ¹                 ²
+		 *        1. Attribute `boolean-attribute` is `true`.
+		 *        2. Attribute `empty-attribute` is `""`.
+		 */
+		if ( true === $attribute->is_true ) {
+			return true;
+		}
+
+		$raw_value = substr( $this->html, $attribute->value_starts_at, $attribute->value_length );
+
+		return Gutenberg_HTML_Decoder_6_7::decode_attribute( $raw_value );
+	}
+
+	/**
+	 * Gets lowercase names of all attributes matching a given prefix in the current tag.
+	 *
+	 * Note that matching is case-insensitive. This is in accordance with the spec:
+	 *
+	 * > There must never be two or more attributes on
+	 * > the same start tag whose names are an ASCII
+	 * > case-insensitive match for each other.
+	 *     - HTML 5 spec
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
+	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
+	 *
+	 *     $p->next_tag() === false;
+	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
+	 *
+	 * @since 6.2.0
+	 *
+	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+	 *
+	 * @param string $prefix Prefix of requested attribute names.
+	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
+	 */
+	public function get_attribute_names_with_prefix( $prefix ): ?array {
+		if (
+			self::STATE_MATCHED_TAG !== $this->parser_state ||
+			$this->is_closing_tag
+		) {
+			return null;
+		}
+
+		$comparable = strtolower( $prefix );
+
+		$matches = array();
+		foreach ( array_keys( $this->attributes ) as $attr_name ) {
+			if ( str_starts_with( $attr_name, $comparable ) ) {
+				$matches[] = $attr_name;
+			}
+		}
+		return $matches;
+	}
+
+	/**
+	 * Returns the uppercase name of the matched tag.
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
+	 *     $p->next_tag() === true;
+	 *     $p->get_tag() === 'DIV';
+	 *
+	 *     $p->next_tag() === false;
+	 *     $p->get_tag() === null;
+	 *
+	 * @since 6.2.0
+	 *
+	 * @return string|null Name of currently matched tag in input HTML, or `null` if none found.
+	 */
+	public function get_tag(): ?string {
+		if ( null === $this->tag_name_starts_at ) {
+			return null;
+		}
+
+		$tag_name = substr( $this->html, $this->tag_name_starts_at, $this->tag_name_length );
+
+		if ( self::STATE_MATCHED_TAG === $this->parser_state ) {
+			return strtoupper( $tag_name );
+		}
+
+		if (
+			self::STATE_COMMENT === $this->parser_state &&
+			self::COMMENT_AS_PI_NODE_LOOKALIKE === $this->get_comment_type()
+		) {
+			return $tag_name;
+		}
+
+		return null;
+	}
+
+	/**
+	 * Indicates if the currently matched tag contains the self-closing flag.
+	 *
+	 * No HTML elements ought to have the self-closing flag and for those, the self-closing
+	 * flag will be ignored. For void elements this is benign because they "self close"
+	 * automatically. For non-void HTML elements though problems will appear if someone
+	 * intends to use a self-closing element in place of that element with an empty body.
+	 * For HTML foreign elements and custom elements the self-closing flag determines if
+	 * they self-close or not.
+	 *
+	 * This function does not determine if a tag is self-closing,
+	 * but only if the self-closing flag is present in the syntax.
+	 *
+	 * @since 6.3.0
+	 *
+	 * @return bool Whether the currently matched tag contains the self-closing flag.
+	 */
+	public function has_self_closing_flag(): bool {
+		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
+			return false;
+		}
+
+		/*
+		 * The self-closing flag is the solidus at the _end_ of the tag, not the beginning.
+		 *
+		 * Example:
+		 *
+		 *     <figure />
+		 *             ^ this appears one character before the end of the closing ">".
+		 */
+		return '/' === $this->html[ $this->token_starts_at + $this->token_length - 2 ];
+	}
+
+	/**
+	 * Indicates if the current tag token is a tag closer.
+	 *
+	 * Example:
+	 *
+	 *     $p = new WP_HTML_Tag_Processor( '<div></div>' );
+	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 *     $p->is_tag_closer() === false;
+	 *
+	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 *     $p->is_tag_closer() === true;
+	 *
+	 * @since 6.2.0
+	 *
+	 * @return bool Whether the current tag is a tag closer.
+	 */
+	public function is_tag_closer(): bool {
+		return (
+			self::STATE_MATCHED_TAG === $this->parser_state &&
+			$this->is_closing_tag
+		);
+	}
+
+	/**
+	 * Indicates the kind of matched token, if any.
+	 *
+	 * This differs from `get_token_name()` in that it always
+	 * returns a static string indicating the type, whereas
+	 * `get_token_name()` may return values derived from the
+	 * token itself, such as a tag name or processing
+	 * instruction tag.
+	 *
+	 * Possible values:
+	 *  - `#tag` when matched on a tag.
+	 *  - `#text` when matched on a text node.
+	 *  - `#cdata-section` when matched on a CDATA node.
+	 *  - `#comment` when matched on a comment.
+	 *  - `#doctype` when matched on a DOCTYPE declaration.
+	 *  - `#presumptuous-tag` when matched on an empty tag closer.
+	 *  - `#funky-comment` when matched on a funky comment.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string|null What kind of token is matched, or null.
+	 */
+	public function get_token_type(): ?string {
+		switch ( $this->parser_state ) {
+			case self::STATE_MATCHED_TAG:
+				return '#tag';
+
+			case self::STATE_DOCTYPE:
+				return '#doctype';
+
+			default:
+				return $this->get_token_name();
+		}
+	}
+
+	/**
+	 * Returns the node name represented by the token.
+	 *
+	 * This matches the DOM API value `nodeName`. Some values
+	 * are static, such as `#text` for a text node, while others
+	 * are dynamically generated from the token itself.
+	 *
+	 * Dynamic names:
+	 *  - Uppercase tag name for tag matches.
+	 *  - `html` for DOCTYPE declarations.
+	 *
+	 * Note that if the Tag Processor is not matched on a token
+	 * then this function will return `null`, either because it
+	 * hasn't yet found a token or because it reached the end
+	 * of the document without matching a token.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string|null Name of the matched token.
+	 */
+	public function get_token_name(): ?string {
+		switch ( $this->parser_state ) {
+			case self::STATE_MATCHED_TAG:
+				return $this->get_tag();
+
+			case self::STATE_TEXT_NODE:
+				return '#text';
+
+			case self::STATE_CDATA_NODE:
+				return '#cdata-section';
+
+			case self::STATE_COMMENT:
+				return '#comment';
+
+			case self::STATE_DOCTYPE:
+				return 'html';
+
+			case self::STATE_PRESUMPTUOUS_TAG:
+				return '#presumptuous-tag';
+
+			case self::STATE_FUNKY_COMMENT:
+				return '#funky-comment';
+		}
+
+		return null;
+	}
+
+	/**
+	 * Indicates what kind of comment produced the comment node.
+	 *
+	 * Because there are different kinds of HTML syntax which produce
+	 * comments, the Tag Processor tracks and exposes this as a type
+	 * for the comment. Nominally only regular HTML comments exist as
+	 * they are commonly known, but a number of unrelated syntax errors
+	 * also produce comments.
+	 *
+	 * @see self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT
+	 * @see self::COMMENT_AS_CDATA_LOOKALIKE
+	 * @see self::COMMENT_AS_INVALID_HTML
+	 * @see self::COMMENT_AS_HTML_COMMENT
+	 * @see self::COMMENT_AS_PI_NODE_LOOKALIKE
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string|null
+	 */
+	public function get_comment_type(): ?string {
+		if ( self::STATE_COMMENT !== $this->parser_state ) {
+			return null;
+		}
+
+		return $this->comment_type;
+	}
+
+	/**
+	 * Returns the modifiable text for a matched token, or an empty string.
+	 *
+	 * Modifiable text is text content that may be read and changed without
+	 * changing the HTML structure of the document around it. This includes
+	 * the contents of `#text` nodes in the HTML as well as the inner
+	 * contents of HTML comments, Processing Instructions, and others, even
+	 * though these nodes aren't part of a parsed DOM tree. They also contain
+	 * the contents of SCRIPT and STYLE tags, of TEXTAREA tags, and of any
+	 * other section in an HTML document which cannot contain HTML markup (DATA).
+	 *
+	 * If a token has no modifiable text then an empty string is returned to
+	 * avoid needless crashing or type errors. An empty string does not mean
+	 * that a token has modifiable text, and a token with modifiable text may
+	 * have an empty string (e.g. a comment with no contents).
+	 *
+	 * @since 6.5.0
+	 *
+	 * @return string
+	 */
+	public function get_modifiable_text(): string {
+		if ( null === $this->text_starts_at ) {
+			return '';
+		}
+
+		$text = substr( $this->html, $this->text_starts_at, $this->text_length );
+
+		// Comment data is not decoded.
+		if (
+			self::STATE_CDATA_NODE === $this->parser_state ||
+			self::STATE_COMMENT === $this->parser_state ||
+			self::STATE_DOCTYPE === $this->parser_state ||
+			self::STATE_FUNKY_COMMENT === $this->parser_state
+		) {
+			return $text;
+		}
+
+		$tag_name = $this->get_tag();
+		if (
+			// Script data is not decoded.
+			'SCRIPT' === $tag_name ||
+
+			// RAWTEXT data is not decoded.
+			'IFRAME' === $tag_name ||
+			'NOEMBED' === $tag_name ||
+			'NOFRAMES' === $tag_name ||
+			'STYLE' === $tag_name ||
+			'XMP' === $tag_name
+		) {
+			return $text;
+		}
+
+		$decoded = Gutenberg_HTML_Decoder_6_7::decode_text_node( $text );
+
+		/*
+		 * TEXTAREA skips a leading newline, but this newline may appear not only as the
+		 * literal character `\n`, but also as a character reference, such as in the
+		 * following markup: `<textarea>&#x0a;Content</textarea>`.
+		 *
+		 * For these cases it's important to first decode the text content before checking
+		 * for a leading newline and removing it.
+		 */
+		if (
+			self::STATE_MATCHED_TAG === $this->parser_state &&
+			'TEXTAREA' === $tag_name &&
+			strlen( $decoded ) > 0 &&
+			"\n" === $decoded[0]
+		) {
+			return substr( $decoded, 1 );
+		}
+
+		return $decoded;
+	}
+
+	/**
+	 * Updates or creates a new attribute on the currently matched tag with the passed value.
+	 *
+	 * For boolean attributes special handling is provided:
+	 *  - When `true` is passed as the value, then only the attribute name is added to the tag.
+	 *  - When `false` is passed, the attribute gets removed if it existed before.
+	 *
+	 * For string attributes, the value is escaped using the `esc_attr` function.
+	 *
+	 * @since 6.2.0
+	 * @since 6.2.1 Fix: Only create a single update for multiple calls with case-variant attribute names.
+	 *
+	 * @param string      $name  The attribute name to target.
+	 * @param string|bool $value The new attribute value.
+	 * @return bool Whether an attribute value was set.
+	 */
+	public function set_attribute( $name, $value ): bool {
+		if (
+			self::STATE_MATCHED_TAG !== $this->parser_state ||
+			$this->is_closing_tag
+		) {
+			return false;
+		}
+
+		/*
+		 * WordPress rejects more characters than are strictly forbidden
+		 * in HTML5. This is to prevent additional security risks deeper
+		 * in the WordPress and plugin stack. Specifically the
+		 * less-than (<) greater-than (>) and ampersand (&) aren't allowed.
+		 *
+		 * The use of a PCRE match enables looking for specific Unicode
+		 * code points without writing a UTF-8 decoder. Whereas scanning
+		 * for one-byte characters is trivial (with `strcspn`), scanning
+		 * for the longer byte sequences would be more complicated. Given
+		 * that this shouldn't be in the hot path for execution, it's a
+		 * reasonable compromise in efficiency without introducing a
+		 * noticeable impact on the overall system.
+		 *
+		 * @see https://html.spec.whatwg.org/#attributes-2
+		 *
+		 * @todo As the only regex pattern maybe we should take it out?
+		 *       Are Unicode patterns available broadly in Core?
+		 */
+		if ( preg_match(
+			'~[' .
+				// Syntax-like characters.
+				'"\'>&</ =' .
+				// Control characters.
+				'\x{00}-\x{1F}' .
+				// HTML noncharacters.
+				'\x{FDD0}-\x{FDEF}' .
+				'\x{FFFE}\x{FFFF}\x{1FFFE}\x{1FFFF}\x{2FFFE}\x{2FFFF}\x{3FFFE}\x{3FFFF}' .
+				'\x{4FFFE}\x{4FFFF}\x{5FFFE}\x{5FFFF}\x{6FFFE}\x{6FFFF}\x{7FFFE}\x{7FFFF}' .
+				'\x{8FFFE}\x{8FFFF}\x{9FFFE}\x{9FFFF}\x{AFFFE}\x{AFFFF}\x{BFFFE}\x{BFFFF}' .
+				'\x{CFFFE}\x{CFFFF}\x{DFFFE}\x{DFFFF}\x{EFFFE}\x{EFFFF}\x{FFFFE}\x{FFFFF}' .
+				'\x{10FFFE}\x{10FFFF}' .
+			']~Ssu',
+			$name
+		) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'Invalid attribute name.' ),
+				'6.2.0'
+			);
+
+			return false;
+		}
+
+		/*
+		 * > The values "true" and "false" are not allowed on boolean attributes.
+		 * > To represent a false value, the attribute has to be omitted altogether.
+		 *     - HTML5 spec, https://html.spec.whatwg.org/#boolean-attributes
+		 */
+		if ( false === $value ) {
+			return $this->remove_attribute( $name );
+		}
+
+		if ( true === $value ) {
+			$updated_attribute = $name;
+		} else {
+			$comparable_name = strtolower( $name );
+
+			/*
+			 * Escape URL attributes.
+			 *
+			 * @see https://html.spec.whatwg.org/#attributes-3
+			 */
+			$escaped_new_value = in_array( $comparable_name, wp_kses_uri_attributes() ) ? esc_url( $value ) : esc_attr( $value );
+			$updated_attribute = "{$name}=\"{$escaped_new_value}\"";
+		}
+
+		/*
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$comparable_name = strtolower( $name );
+
+		if ( isset( $this->attributes[ $comparable_name ] ) ) {
+			/*
+			 * Update an existing attribute.
+			 *
+			 * Example – set attribute id to "new" in <div id="initial_id" />:
+			 *
+			 *     <div id="initial_id"/>
+			 *          ^-------------^
+			 *          start         end
+			 *     replacement: `id="new"`
+			 *
+			 *     Result: <div id="new"/>
+			 */
+			$existing_attribute                        = $this->attributes[ $comparable_name ];
+			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_7(
+				$existing_attribute->start,
+				$existing_attribute->length,
+				$updated_attribute
+			);
+		} else {
+			/*
+			 * Create a new attribute at the tag's name end.
+			 *
+			 * Example – add attribute id="new" to <div />:
+			 *
+			 *     <div/>
+			 *         ^
+			 *         start and end
+			 *     replacement: ` id="new"`
+			 *
+			 *     Result: <div id="new"/>
+			 */
+			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_7(
+				$this->tag_name_starts_at + $this->tag_name_length,
+				0,
+				' ' . $updated_attribute
+			);
+		}
+
+		/*
+		 * Any calls to update the `class` attribute directly should wipe out any
+		 * enqueued class changes from `add_class` and `remove_class`.
+		 */
+		if ( 'class' === $comparable_name && ! empty( $this->classname_updates ) ) {
+			$this->classname_updates = array();
+		}
+
+		return true;
+	}
+
+	/**
+	 * Remove an attribute from the currently-matched tag.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $name The attribute name to remove.
+	 * @return bool Whether an attribute was removed.
+	 */
+	public function remove_attribute( $name ): bool {
+		if (
+			self::STATE_MATCHED_TAG !== $this->parser_state ||
+			$this->is_closing_tag
+		) {
+			return false;
+		}
+
+		/*
+		 * > There must never be two or more attributes on
+		 * > the same start tag whose names are an ASCII
+		 * > case-insensitive match for each other.
+		 *     - HTML 5 spec
+		 *
+		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+		 */
+		$name = strtolower( $name );
+
+		/*
+		 * Any calls to update the `class` attribute directly should wipe out any
+		 * enqueued class changes from `add_class` and `remove_class`.
+		 */
+		if ( 'class' === $name && count( $this->classname_updates ) !== 0 ) {
+			$this->classname_updates = array();
+		}
+
+		/*
+		 * If updating an attribute that didn't exist in the input
+		 * document, then remove the enqueued update and move on.
+		 *
+		 * For example, this might occur when calling `remove_attribute()`
+		 * after calling `set_attribute()` for the same attribute
+		 * and when that attribute wasn't originally present.
+		 */
+		if ( ! isset( $this->attributes[ $name ] ) ) {
+			if ( isset( $this->lexical_updates[ $name ] ) ) {
+				unset( $this->lexical_updates[ $name ] );
+			}
+			return false;
+		}
+
+		/*
+		 * Removes an existing tag attribute.
+		 *
+		 * Example – remove the attribute id from <div id="main"/>:
+		 *    <div id="initial_id"/>
+		 *         ^-------------^
+		 *         start         end
+		 *    replacement: ``
+		 *
+		 *    Result: <div />
+		 */
+		$this->lexical_updates[ $name ] = new Gutenberg_HTML_Text_Replacement_6_7(
+			$this->attributes[ $name ]->start,
+			$this->attributes[ $name ]->length,
+			''
+		);
+
+		// Removes any duplicated attributes if they were also present.
+		foreach ( $this->duplicate_attributes[ $name ] ?? array() as $attribute_token ) {
+			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_7(
+				$attribute_token->start,
+				$attribute_token->length,
+				''
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Adds a new class name to the currently matched tag.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $class_name The class name to add.
+	 * @return bool Whether the class was set to be added.
+	 */
+	public function add_class( $class_name ): bool {
+		if (
+			self::STATE_MATCHED_TAG !== $this->parser_state ||
+			$this->is_closing_tag
+		) {
+			return false;
+		}
+
+		$this->classname_updates[ $class_name ] = self::ADD_CLASS;
+
+		return true;
+	}
+
+	/**
+	 * Removes a class name from the currently matched tag.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param string $class_name The class name to remove.
+	 * @return bool Whether the class was set to be removed.
+	 */
+	public function remove_class( $class_name ): bool {
+		if (
+			self::STATE_MATCHED_TAG !== $this->parser_state ||
+			$this->is_closing_tag
+		) {
+			return false;
+		}
+
+		if ( null !== $this->tag_name_starts_at ) {
+			$this->classname_updates[ $class_name ] = self::REMOVE_CLASS;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Returns the string representation of the HTML Tag Processor.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @see WP_HTML_Tag_Processor::get_updated_html()
+	 *
+	 * @return string The processed HTML.
+	 */
+	public function __toString(): string {
+		return $this->get_updated_html();
+	}
+
+	/**
+	 * Returns the string representation of the HTML Tag Processor.
+	 *
+	 * @since 6.2.0
+	 * @since 6.2.1 Shifts the internal cursor corresponding to the applied updates.
+	 * @since 6.4.0 No longer calls subclass method `next_tag()` after updating HTML.
+	 *
+	 * @return string The processed HTML.
+	 */
+	public function get_updated_html(): string {
+		$requires_no_updating = 0 === count( $this->classname_updates ) && 0 === count( $this->lexical_updates );
+
+		/*
+		 * When there is nothing more to update and nothing has already been
+		 * updated, return the original document and avoid a string copy.
+		 */
+		if ( $requires_no_updating ) {
+			return $this->html;
+		}
+
+		/*
+		 * Keep track of the position right before the current tag. This will
+		 * be necessary for reparsing the current tag after updating the HTML.
+		 */
+		$before_current_tag = $this->token_starts_at ?? 0;
+
+		/*
+		 * 1. Apply the enqueued edits and update all the pointers to reflect those changes.
+		 */
+		$this->class_name_updates_to_attributes_updates();
+		$before_current_tag += $this->apply_attributes_updates( $before_current_tag );
+
+		/*
+		 * 2. Rewind to before the current tag and reparse to get updated attributes.
+		 *
+		 * At this point the internal cursor points to the end of the tag name.
+		 * Rewind before the tag name starts so that it's as if the cursor didn't
+		 * move; a call to `next_tag()` will reparse the recently-updated attributes
+		 * and additional calls to modify the attributes will apply at this same
+		 * location, but in order to avoid issues with subclasses that might add
+		 * behaviors to `next_tag()`, the internal methods should be called here
+		 * instead.
+		 *
+		 * It's important to note that in this specific place there will be no change
+		 * because the processor was already at a tag when this was called and it's
+		 * rewinding only to the beginning of this very tag before reprocessing it
+		 * and its attributes.
+		 *
+		 * <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->bytes_already_parsed = $before_current_tag;
+		$this->base_class_next_token();
+
+		return $this->html;
+	}
+
+	/**
+	 * Parses tag query input into internal search criteria.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param array|string|null $query {
+	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
+	 *
+	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
+	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
+	 *                                     1 for "first" tag, 3 for "third," etc.
+	 *                                     Defaults to first tag.
+	 *     @type string|null $class_name   Tag must contain this class name to match.
+	 *     @type string      $tag_closers  "visit" or "skip": whether to stop on tag closers, e.g. </div>.
+	 * }
+	 */
+	private function parse_query( $query ) {
+		if ( null !== $query && $query === $this->last_query ) {
+			return;
+		}
+
+		$this->last_query          = $query;
+		$this->sought_tag_name     = null;
+		$this->sought_class_name   = null;
+		$this->sought_match_offset = 1;
+		$this->stop_on_tag_closers = false;
+
+		// A single string value means "find the tag of this name".
+		if ( is_string( $query ) ) {
+			$this->sought_tag_name = $query;
+			return;
+		}
+
+		// An empty query parameter applies no restrictions on the search.
+		if ( null === $query ) {
+			return;
+		}
+
+		// If not using the string interface, an associative array is required.
+		if ( ! is_array( $query ) ) {
+			_doing_it_wrong(
+				__METHOD__,
+				__( 'The query argument must be an array or a tag name.' ),
+				'6.2.0'
+			);
+			return;
+		}
+
+		if ( isset( $query['tag_name'] ) && is_string( $query['tag_name'] ) ) {
+			$this->sought_tag_name = $query['tag_name'];
+		}
+
+		if ( isset( $query['class_name'] ) && is_string( $query['class_name'] ) ) {
+			$this->sought_class_name = $query['class_name'];
+		}
+
+		if ( isset( $query['match_offset'] ) && is_int( $query['match_offset'] ) && 0 < $query['match_offset'] ) {
+			$this->sought_match_offset = $query['match_offset'];
+		}
+
+		if ( isset( $query['tag_closers'] ) ) {
+			$this->stop_on_tag_closers = 'visit' === $query['tag_closers'];
+		}
+	}
+
+
+	/**
+	 * Checks whether a given tag and its attributes match the search criteria.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @return bool Whether the given tag and its attribute match the search criteria.
+	 */
+	private function matches(): bool {
+		if ( $this->is_closing_tag && ! $this->stop_on_tag_closers ) {
+			return false;
+		}
+
+		// Does the tag name match the requested tag name in a case-insensitive manner?
+		if ( isset( $this->sought_tag_name ) && 0 !== substr_compare( $this->html, $this->sought_tag_name, $this->tag_name_starts_at, $this->tag_name_length, true ) ) {
+			return false;
+		}
+
+		if ( null !== $this->sought_class_name && ! $this->has_class( $this->sought_class_name ) ) {
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Parser Ready State.
+	 *
+	 * Indicates that the parser is ready to run and waiting for a state transition.
+	 * It may not have started yet, or it may have just finished parsing a token and
+	 * is ready to find the next one.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_READY = 'STATE_READY';
+
+	/**
+	 * Parser Complete State.
+	 *
+	 * Indicates that the parser has reached the end of the document and there is
+	 * nothing left to scan. It finished parsing the last token completely.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_COMPLETE = 'STATE_COMPLETE';
+
+	/**
+	 * Parser Incomplete Input State.
+	 *
+	 * Indicates that the parser has reached the end of the document before finishing
+	 * a token. It started parsing a token but there is a possibility that the input
+	 * HTML document was truncated in the middle of a token.
+	 *
+	 * The parser is reset at the start of the incomplete token and has paused. There
+	 * is nothing more than can be scanned unless provided a more complete document.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_INCOMPLETE_INPUT = 'STATE_INCOMPLETE_INPUT';
+
+	/**
+	 * Parser Matched Tag State.
+	 *
+	 * Indicates that the parser has found an HTML tag and it's possible to get
+	 * the tag name and read or modify its attributes (if it's not a closing tag).
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_MATCHED_TAG = 'STATE_MATCHED_TAG';
+
+	/**
+	 * Parser Text Node State.
+	 *
+	 * Indicates that the parser has found a text node and it's possible
+	 * to read and modify that text.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_TEXT_NODE = 'STATE_TEXT_NODE';
+
+	/**
+	 * Parser CDATA Node State.
+	 *
+	 * Indicates that the parser has found a CDATA node and it's possible
+	 * to read and modify its modifiable text. Note that in HTML there are
+	 * no CDATA nodes outside of foreign content (SVG and MathML). Outside
+	 * of foreign content, they are treated as HTML comments.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_CDATA_NODE = 'STATE_CDATA_NODE';
+
+	/**
+	 * Indicates that the parser has found an HTML comment and it's
+	 * possible to read and modify its modifiable text.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_COMMENT = 'STATE_COMMENT';
+
+	/**
+	 * Indicates that the parser has found a DOCTYPE node and it's
+	 * possible to read and modify its modifiable text.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_DOCTYPE = 'STATE_DOCTYPE';
+
+	/**
+	 * Indicates that the parser has found an empty tag closer `</>`.
+	 *
+	 * Note that in HTML there are no empty tag closers, and they
+	 * are ignored. Nonetheless, the Tag Processor still
+	 * recognizes them as they appear in the HTML stream.
+	 *
+	 * These were historically discussed as a "presumptuous tag
+	 * closer," which would close the nearest open tag, but were
+	 * dismissed in favor of explicitly-closing tags.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_PRESUMPTUOUS_TAG = 'STATE_PRESUMPTUOUS_TAG';
+
+	/**
+	 * Indicates that the parser has found a "funky comment"
+	 * and it's possible to read and modify its modifiable text.
+	 *
+	 * Example:
+	 *
+	 *     </%url>
+	 *     </{"wp-bit":"query/post-author"}>
+	 *     </2>
+	 *
+	 * Funky comments are tag closers with invalid tag names. Note
+	 * that in HTML these are turn into bogus comments. Nonetheless,
+	 * the Tag Processor recognizes them in a stream of HTML and
+	 * exposes them for inspection and modification.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @access private
+	 */
+	const STATE_FUNKY_COMMENT = 'STATE_WP_FUNKY';
+
+	/**
+	 * Indicates that a comment was created when encountering abruptly-closed HTML comment.
+	 *
+	 * Example:
+	 *
+	 *     <!-->
+	 *     <!--->
+	 *
+	 * @since 6.5.0
+	 */
+	const COMMENT_AS_ABRUPTLY_CLOSED_COMMENT = 'COMMENT_AS_ABRUPTLY_CLOSED_COMMENT';
+
+	/**
+	 * Indicates that a comment would be parsed as a CDATA node,
+	 * were HTML to allow CDATA nodes outside of foreign content.
+	 *
+	 * Example:
+	 *
+	 *     <![CDATA[This is a CDATA node.]]>
+	 *
+	 * This is an HTML comment, but it looks like a CDATA node.
+	 *
+	 * @since 6.5.0
+	 */
+	const COMMENT_AS_CDATA_LOOKALIKE = 'COMMENT_AS_CDATA_LOOKALIKE';
+
+	/**
+	 * Indicates that a comment was created when encountering
+	 * normative HTML comment syntax.
+	 *
+	 * Example:
+	 *
+	 *     <!-- this is a comment -->
+	 *
+	 * @since 6.5.0
+	 */
+	const COMMENT_AS_HTML_COMMENT = 'COMMENT_AS_HTML_COMMENT';
+
+	/**
+	 * Indicates that a comment would be parsed as a Processing
+	 * Instruction node, were they to exist within HTML.
+	 *
+	 * Example:
+	 *
+	 *     <?wp __( 'Like' ) ?>
+	 *
+	 * This is an HTML comment, but it looks like a CDATA node.
+	 *
+	 * @since 6.5.0
+	 */
+	const COMMENT_AS_PI_NODE_LOOKALIKE = 'COMMENT_AS_PI_NODE_LOOKALIKE';
+
+	/**
+	 * Indicates that a comment was created when encountering invalid
+	 * HTML input, a so-called "bogus comment."
+	 *
+	 * Example:
+	 *
+	 *     <?nothing special>
+	 *     <!{nothing special}>
+	 *
+	 * @since 6.5.0
+	 */
+	const COMMENT_AS_INVALID_HTML = 'COMMENT_AS_INVALID_HTML';
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php
new file mode 100644
index 00000000000000..1be784e6e84a53
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php
@@ -0,0 +1,64 @@
+<?php
+/**
+ * HTML API: WP_HTML_Text_Replacement class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.2.0
+ */
+
+/**
+ * Core class used by the HTML tag processor as a data structure for replacing
+ * existing content from start to end, allowing to drastically improve performance.
+ *
+ * This class is for internal usage of the WP_HTML_Tag_Processor class.
+ *
+ * @access private
+ * @since 6.2.0
+ * @since 6.5.0 Replace `end` with `length` to more closely match `substr()`.
+ *
+ * @see WP_HTML_Tag_Processor
+ */
+class Gutenberg_HTML_Text_Replacement_6_7 {
+	/**
+	 * Byte offset into document where replacement span begins.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var int
+	 */
+	public $start;
+
+	/**
+	 * Byte length of span being replaced.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var int
+	 */
+	public $length;
+
+	/**
+	 * Span of text to insert in document to replace existing content from start to end.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @var string
+	 */
+	public $text;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 6.2.0
+	 *
+	 * @param int    $start  Byte offset into document where replacement span begins.
+	 * @param int    $length Byte length of span in document being replaced.
+	 * @param string $text   Span of text to insert in document to replace existing content from start to end.
+	 */
+	public function __construct( int $start, int $length, string $text ) {
+		$this->start  = $start;
+		$this->length = $length;
+		$this->text   = $text;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php
new file mode 100644
index 00000000000000..95adb54f69b081
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php
@@ -0,0 +1,106 @@
+<?php
+/**
+ * HTML API: WP_HTML_Token class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used by the HTML processor during HTML parsing
+ * for referring to tokens in the input HTML string.
+ *
+ * This class is designed for internal use by the HTML processor.
+ *
+ * @since 6.4.0
+ *
+ * @access private
+ *
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Token_6_7 {
+	/**
+	 * Name of bookmark corresponding to source of token in input HTML string.
+	 *
+	 * Having a bookmark name does not imply that the token still exists. It
+	 * may be that the source token and underlying bookmark was wiped out by
+	 * some modification to the source HTML.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @var string
+	 */
+	public $bookmark_name = null;
+
+	/**
+	 * Name of node; lowercase names such as "marker" are not HTML elements.
+	 *
+	 * For HTML elements/tags this value should come from WP_HTML_Processor::get_tag().
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see WP_HTML_Processor::get_tag()
+	 *
+	 * @var string
+	 */
+	public $node_name = null;
+
+	/**
+	 * Whether node contains the self-closing flag.
+	 *
+	 * A node may have a self-closing flag when it shouldn't. This value
+	 * only reports if the flag is present in the original HTML.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @see https://html.spec.whatwg.org/#self-closing-flag
+	 *
+	 * @var bool
+	 */
+	public $has_self_closing_flag = false;
+
+	/**
+	 * Called when token is garbage-collected or otherwise destroyed.
+	 *
+	 * @var callable|null
+	 */
+	public $on_destroy = null;
+
+	/**
+	 * Constructor - creates a reference to a token in some external HTML string.
+	 *
+	 * @since 6.4.0
+	 *
+	 * @param string        $bookmark_name         Name of bookmark corresponding to location in HTML where token is found.
+	 * @param string        $node_name             Name of node token represents; if uppercase, an HTML element; if lowercase, a special value like "marker".
+	 * @param bool          $has_self_closing_flag Whether the source token contains the self-closing flag, regardless of whether it's valid.
+	 * @param callable|null $on_destroy            Optional. Function to call when destroying token, useful for releasing the bookmark.
+	 */
+	public function __construct( string $bookmark_name, string $node_name, bool $has_self_closing_flag, ?callable $on_destroy = null ) {
+		$this->bookmark_name         = $bookmark_name;
+		$this->node_name             = $node_name;
+		$this->has_self_closing_flag = $has_self_closing_flag;
+		$this->on_destroy            = $on_destroy;
+	}
+
+	/**
+	 * Destructor.
+	 *
+	 * @since 6.4.0
+	 */
+	public function __destruct() {
+		if ( is_callable( $this->on_destroy ) ) {
+			call_user_func( $this->on_destroy, $this->bookmark_name );
+		}
+	}
+
+	/**
+	 * Wakeup magic method.
+	 *
+	 * @since 6.4.2
+	 */
+	public function __wakeup() {
+		throw new \LogicException( __CLASS__ . ' should never be unserialized' );
+	}
+}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php
new file mode 100644
index 00000000000000..2de4c0b98d746c
--- /dev/null
+++ b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * HTML API: WP_HTML_Unsupported_Exception class
+ *
+ * @package WordPress
+ * @subpackage HTML-API
+ * @since 6.4.0
+ */
+
+/**
+ * Core class used by the HTML processor during HTML parsing
+ * for indicating that a given operation is unsupported.
+ *
+ * This class is designed for internal use by the HTML processor.
+ *
+ * The HTML API aims to operate in compliance with the HTML5
+ * specification, but does not implement the full specification.
+ * In cases where it lacks support it should not cause breakage
+ * or unexpected behavior. In the cases where it recognizes that
+ * it cannot proceed, this class is used to abort from any
+ * operation and signify that the given HTML cannot be processed.
+ *
+ * @since 6.4.0
+ * @since 6.7.0 Gained contextual information for use in debugging parse failures.
+ *
+ * @access private
+ *
+ * @see WP_HTML_Processor
+ */
+class Gutenberg_HTML_Unsupported_Exception_6_7 extends Exception {
+	/**
+	 * Name of the matched token when the exception was raised,
+	 * if matched on a token.
+	 *
+	 * This does not imply that the token itself was unsupported, but it
+	 * may have been the case that the token triggered part of the HTML
+	 * parsing that isn't supported, such as the adoption agency algorithm.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var string
+	 */
+	public $token_name;
+
+	/**
+	 * Number of bytes into the input HTML document where the parser was
+	 * parsing when the exception was raised.
+	 *
+	 * Use this to reconstruct context for the failure.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var int
+	 */
+	public $token_at;
+
+	/**
+	 * Full raw text of the matched token when the exception was raised,
+	 * if matched on a token.
+	 *
+	 * Whereas the `$token_name` will be normalized, this contains the full
+	 * raw text of the token, including original casing, duplicated attributes,
+	 * and other syntactic variations that are normally abstracted in the HTML API.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var string
+	 */
+	public $token;
+
+	/**
+	 * Stack of open elements when the exception was raised.
+	 *
+	 * Use this to trace the parsing circumstances which led to the exception.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var string[]
+	 */
+	public $stack_of_open_elements = array();
+
+	/**
+	 * List of active formatting elements when the exception was raised.
+	 *
+	 * Use this to trace the parsing circumstances which led to the exception.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @var string[]
+	 */
+	public $active_formatting_elements = array();
+
+	/**
+	 * Constructor function.
+	 *
+	 * @since 6.7.0
+	 *
+	 * @param string   $message                    Brief message explaining what is unsupported, the reason this exception was raised.
+	 * @param string   $token_name                 Normalized name of matched token when this exception was raised.
+	 * @param int      $token_at                   Number of bytes into source HTML document where matched token starts.
+	 * @param string   $token                      Full raw text of matched token when this exception was raised.
+	 * @param string[] $stack_of_open_elements     Stack of open elements when this exception was raised.
+	 * @param string[] $active_formatting_elements List of active formatting elements when this exception was raised.
+	 */
+	public function __construct( string $message, string $token_name, int $token_at, string $token, array $stack_of_open_elements, array $active_formatting_elements ) {
+		parent::__construct( $message );
+
+		$this->token_name = $token_name;
+		$this->token_at   = $token_at;
+		$this->token      = $token;
+
+		$this->stack_of_open_elements     = $stack_of_open_elements;
+		$this->active_formatting_elements = $active_formatting_elements;
+	}
+}
diff --git a/lib/compat/wordpress-6.7/post-formats.php b/lib/compat/wordpress-6.7/post-formats.php
new file mode 100644
index 00000000000000..d3de5b83957e29
--- /dev/null
+++ b/lib/compat/wordpress-6.7/post-formats.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Shims for changes to post formats until they are merged in all
+ * versions of WordPress which Gutenberg supports.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the extension of the WP_REST_Posts_Controller class,
+ * to add support for post formats.
+ */
+function gutenberg_post_format_rest_posts_controller( $args ) {
+	/**
+	 * This hook runs before support values are available via `post_type_supports`.
+	 * Check registration arguments for REST API controller override.
+	 */
+	if ( ! empty( $args['supports'] ) && in_array( 'post-formats', $args['supports'], true ) ) {
+		$args['rest_controller_class'] = 'Gutenberg_REST_Posts_Controller_6_7';
+	}
+
+	return $args;
+}
+add_filter( 'register_post_type_args', 'gutenberg_post_format_rest_posts_controller', 10 );
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
new file mode 100644
index 00000000000000..741d0ad1805e07
--- /dev/null
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -0,0 +1,158 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+/**
+ * Update the preload paths registered in Core (`site-editor.php` or `edit-form-blocks.php`).
+ *
+ * @param array                   $paths REST API paths to preload.
+ * @param WP_Block_Editor_Context $context Current block editor context.
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
+	if ( 'core/edit-site' === $context->name ) {
+		// Fixes post type name. It should be `type/wp_template_part`.
+		$parts_key = array_search( '/wp/v2/types/wp_template-part?context=edit', $paths, true );
+		if ( false !== $parts_key ) {
+			$paths[ $parts_key ] = '/wp/v2/types/wp_template_part?context=edit';
+		}
+
+		$page_options_path = array( rest_get_route_for_post_type_items( 'page' ), 'OPTIONS' );
+		$page_options_key  = array_search( $page_options_path, $paths, true );
+		if ( false === $page_options_key ) {
+			$paths[] = $page_options_path;
+		}
+	}
+
+	if ( 'core/edit-post' === $context->name ) {
+		$reusable_blocks_key = array_search(
+			add_query_arg(
+				array(
+					'context'  => 'edit',
+					'per_page' => -1,
+				),
+				rest_get_route_for_post_type_items( 'wp_block' )
+			),
+			$paths,
+			true
+		);
+
+		if ( false !== $reusable_blocks_key ) {
+			unset( $paths[ $reusable_blocks_key ] );
+		}
+	}
+
+	// Preload theme and global styles paths.
+	if ( 'core/edit-site' === $context->name || 'core/edit-post' === $context->name ) {
+		$active_theme     = get_stylesheet();
+		$global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '?context=view';
+		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '/variations?context=view';
+		$paths[]          = array( '/wp/v2/global-styles/' . $global_styles_id, 'OPTIONS' );
+
+		// Remove duplicate or unnecessary global styles paths.
+		$excluded_paths   = array();
+		$excluded_paths[] = '/wp/v2/global-styles/themes/' . $active_theme;
+		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id;
+		foreach ( $paths as $key => $path ) {
+			if ( in_array( $path, $excluded_paths, true ) ) {
+				unset( $paths[ $key ] );
+			}
+		}
+	}
+
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );
+
+if ( ! function_exists( 'wp_api_template_registry' ) ) {
+	/**
+	 * Hook in to the template and template part post types and modify the rest
+	 * endpoint to include modifications to read templates from the
+	 * BlockTemplatesRegistry.
+	 *
+	 * @param array  $args Current registered post type args.
+	 * @param string $post_type Name of post type.
+	 *
+	 * @return array
+	 */
+	function wp_api_template_registry( $args, $post_type ) {
+		if ( 'wp_template' === $post_type || 'wp_template_part' === $post_type ) {
+			$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_7';
+		}
+		return $args;
+	}
+}
+add_filter( 'register_post_type_args', 'wp_api_template_registry', 10, 2 );
+
+/**
+ * Adds `plugin` fields to WP_REST_Templates_Controller class.
+ */
+function gutenberg_register_wp_rest_templates_controller_plugin_field() {
+
+	register_rest_field(
+		'wp_template',
+		'plugin',
+		array(
+			'get_callback'    => function ( $template_object ) {
+				if ( $template_object ) {
+					$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $template_object['slug'] );
+					if ( $registered_template ) {
+						return $registered_template->plugin;
+					}
+				}
+
+				return;
+			},
+			'update_callback' => null,
+			'schema'          => array(
+				'type'        => 'string',
+				'description' => __( 'Plugin that registered the template.', 'gutenberg' ),
+				'readonly'    => true,
+				'context'     => array( 'view', 'edit', 'embed' ),
+			),
+		)
+	);
+}
+add_action( 'rest_api_init', 'gutenberg_register_wp_rest_templates_controller_plugin_field' );
+
+/**
+ * Overrides the default 'WP_REST_Server' class.
+ *
+ * @return string The name of the custom server class.
+ */
+function gutenberg_override_default_rest_server() {
+	return 'Gutenberg_REST_Server';
+}
+add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );
+
+
+/**
+ * Filters the arguments for registering a wp_global_styles post type.
+ * Note when syncing to Core: the capabilities should be updates for `wp_global_styles` in the wp-includes/post.php.
+ *
+ * @since 6.7.0
+ *
+ * @param array  $args      Array of arguments for registering a post type.
+ *                          See the register_post_type() function for accepted arguments.
+ * @param string $post_type Post type key.
+ *
+ * @return array Array of arguments for registering a post type.
+ */
+function gutenberg_register_post_type_args_for_wp_global_styles( $args, $post_type ) {
+	if ( 'wp_global_styles' === $post_type ) {
+		$args['capabilities']['read'] = 'edit_posts';
+	}
+
+	return $args;
+}
+
+add_filter( 'register_post_type_args', 'gutenberg_register_post_type_args_for_wp_global_styles', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/script-modules.php b/lib/compat/wordpress-6.7/script-modules.php
new file mode 100644
index 00000000000000..2282a3d4bd5acd
--- /dev/null
+++ b/lib/compat/wordpress-6.7/script-modules.php
@@ -0,0 +1,147 @@
+<?php
+
+/**
+ * Print data associated with Script Modules in Script tags.
+ *
+ * This embeds data in the page HTML so that it is available on page load.
+ *
+ * Data can be associated with a given Script Module by using the
+ * `script_module_data_{$module_id}` filter.
+ *
+ * The data for a given Script Module will be JSON serialized in a script tag with an ID
+ * like `wp-script-module-data-{$module_id}`.
+ */
+function gutenberg_print_script_module_data(): void {
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_marked_for_enqueue->setAccessible( true );
+	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+	$get_import_map->setAccessible( true );
+
+	$modules = array();
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		$modules[ $id ] = true;
+	}
+	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+		$modules[ $id ] = true;
+	}
+
+	foreach ( array_keys( $modules ) as $module_id ) {
+		/**
+		 * Filters data associated with a given Script Module.
+		 *
+		 * Script Modules may require data that is required for initialization or is essential to
+		 * have immediately available on page load. These are suitable use cases for this data.
+		 *
+		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
+		 *
+		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
+		 *
+		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
+		 * with an ID like `wp-script-module-data-{$module_id}`.
+		 *
+		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
+		 * the data is associated with.
+		 *
+		 * @param array $data The data that should be associated with the array.
+		 */
+		$data = apply_filters( "script_module_data_{$module_id}", array() );
+
+		if ( is_array( $data ) && ! empty( $data ) ) {
+			/*
+			 * This data will be printed as JSON inside a script tag like this:
+			 *   <script type="application/json"></script>
+			 *
+			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
+			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
+			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
+			 *
+			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
+			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
+			 *
+			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
+			 *
+			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
+			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
+			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
+			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
+			 *
+			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
+			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
+			 * be escaped to avoid encoding issues.
+			 *
+			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
+			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
+			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
+			 */
+			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
+			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
+				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
+			}
+
+			wp_print_inline_script_tag(
+				wp_json_encode( $data, $json_encode_flags ),
+				array(
+					'type' => 'application/json',
+					'id'   => "wp-script-module-data-{$module_id}",
+				)
+			);
+		}
+	}
+}
+
+add_action(
+	'after_setup_theme',
+	function () {
+		if ( ! has_action( 'wp_footer', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
+			add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
+		}
+
+		if ( ! has_action( 'admin_print_footer_scripts', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
+			add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );
+		}
+	},
+	20
+);
+
+/**
+ * Prints HTML for the a11y Script Module.
+ *
+ * a11y relies on some DOM elements to use as ARIA live regions.
+ * Ideally, these elements are part of the initial HTML of the page
+ * so that accessibility tools can find them and observe updates.
+ */
+function gutenberg_a11y_script_module_html() {
+	$a11y_module_available = false;
+
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_marked_for_enqueue->setAccessible( true );
+	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+	$get_import_map->setAccessible( true );
+
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		if ( '@wordpress/a11y' === $id ) {
+			$a11y_module_available = true;
+			break;
+		}
+	}
+	if ( ! $a11y_module_available ) {
+		foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+			if ( '@wordpress/a11y' === $id ) {
+				$a11y_module_available = true;
+				break;
+			}
+		}
+	}
+	if ( ! $a11y_module_available ) {
+		return;
+	}
+	echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
+		. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications', 'default' ) . '</p>'
+		. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '</div>';
+}
+if ( ! method_exists( 'WP_Script_Modules', 'print_a11y_script_module_html' ) ) {
+	add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
+	add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );
+}
diff --git a/lib/compat/wordpress-6.8/block-comments.php b/lib/compat/wordpress-6.8/block-comments.php
new file mode 100644
index 00000000000000..ff9f03b69aa1c3
--- /dev/null
+++ b/lib/compat/wordpress-6.8/block-comments.php
@@ -0,0 +1,70 @@
+<?php
+/**
+ * Updates the comment type in the REST API for WordPress version 6.7.
+ *
+ * This function is used as a filter callback for the 'rest_pre_insert_comment' hook.
+ * It checks if the 'comment_type' parameter is set to 'block_comment' in the REST API request,
+ * and if so, updates the 'comment_type' and 'comment_approved' properties of the prepared comment.
+ *
+ * @param array $prepared_comment The prepared comment data.
+ * @param WP_REST_Request $request The REST API request object.
+ * @return array The updated prepared comment data.
+ */
+if ( ! function_exists( 'update_comment_type_in_rest_api_6_8' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function update_comment_type_in_rest_api_6_8( $prepared_comment, $request ) {
+		if ( ! empty( $request['comment_type'] ) && 'block_comment' === $request['comment_type'] ) {
+			$prepared_comment['comment_type']     = $request['comment_type'];
+			$prepared_comment['comment_approved'] = $request['comment_approved'];
+		}
+
+		return $prepared_comment;
+	}
+	add_filter( 'rest_pre_insert_comment', 'update_comment_type_in_rest_api_6_8', 10, 2 );
+}
+
+/**
+ * Updates the comment type for avatars in the WordPress REST API.
+ *
+ * This function adds the 'block_comment' type to the list of comment types
+ * for which avatars should be retrieved in the WordPress REST API.
+ *
+ * @param array $comment_type The array of comment types.
+ * @return array The updated array of comment types.
+ */
+if ( ! function_exists( 'update_get_avatar_comment_type' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function update_get_avatar_comment_type( $comment_type ) {
+		$comment_type[] = 'block_comment';
+		return $comment_type;
+	}
+	add_filter( 'get_avatar_comment_types', 'update_get_avatar_comment_type' );
+}
+
+/**
+ * Excludes block comments from the admin comments query.
+ *
+ * This function modifies the comments query to exclude comments of type 'block_comment'
+ * when the query is for comments in the WordPress admin.
+ *
+ * @param WP_Comment_Query $query The current comments query.
+ *
+ * @return void
+ */
+if ( ! function_exists( 'exclude_block_comments_from_admin' ) && gutenberg_is_experiment_enabled( 'gutenberg-block-comment' ) ) {
+	function exclude_block_comments_from_admin( $query ) {
+		// Only modify the query if it's for comments
+		if ( isset( $query->query_vars['type'] ) && '' === $query->query_vars['type'] ) {
+			$query->set( 'type', '' );
+
+			add_filter(
+				'comments_clauses',
+				function ( $clauses ) {
+					global $wpdb;
+					// Exclude comments of type 'block_comment'
+					$clauses['where'] .= " AND {$wpdb->comments}.comment_type != 'block_comment'";
+					return $clauses;
+				}
+			);
+		}
+	}
+	add_action( 'pre_get_comments', 'exclude_block_comments_from_admin' );
+}
diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php
new file mode 100644
index 00000000000000..e0f5082bfce8dc
--- /dev/null
+++ b/lib/compat/wordpress-6.8/blocks.php
@@ -0,0 +1,151 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Filters the block type arguments during registration to stabilize
+ * experimental block supports.
+ *
+ * This is a temporary compatibility shim as the approach in core is for this
+ * to be handled within the WP_Block_Type class rather than requiring a filter.
+ *
+ * @param array $args Array of arguments for registering a block type.
+ * @return array Array of arguments for registering a block type.
+ */
+function gutenberg_stabilize_experimental_block_supports( $args ) {
+	if ( empty( $args['supports'] ) ) {
+		return $args;
+	}
+
+	$experimental_supports_map       = array( '__experimentalBorder' => 'border' );
+	$common_experimental_properties  = array(
+		'__experimentalDefaultControls'   => 'defaultControls',
+		'__experimentalSkipSerialization' => 'skipSerialization',
+	);
+	$experimental_support_properties = array(
+		'typography' => array(
+			'__experimentalFontFamily'     => 'fontFamily',
+			'__experimentalFontStyle'      => 'fontStyle',
+			'__experimentalFontWeight'     => 'fontWeight',
+			'__experimentalLetterSpacing'  => 'letterSpacing',
+			'__experimentalTextDecoration' => 'textDecoration',
+			'__experimentalTextTransform'  => 'textTransform',
+		),
+	);
+	$done                            = array();
+
+	$updated_supports = array();
+	foreach ( $args['supports'] as $support => $config ) {
+		/*
+		 * If this support config has already been stabilized, skip it.
+		 * A stable support key occurring after an experimental key, gets
+		 * stabilized then so that the two configs can be merged effectively.
+		 */
+		if ( isset( $done[ $support ] ) ) {
+			continue;
+		}
+
+		$stable_support_key = $experimental_supports_map[ $support ] ?? $support;
+
+		/*
+		 * Use the support's config as is when it's not in need of stabilization.
+		 *
+		 * A support does not need stabilization if:
+		 * - The support key doesn't need stabilization AND
+		 * - Either:
+		 *     - The config isn't an array, so can't have experimental properties OR
+		 *     - The config is an array but has no experimental properties to stabilize.
+		 */
+		if ( $support === $stable_support_key &&
+			( ! is_array( $config ) ||
+				( ! isset( $experimental_support_properties[ $stable_support_key ] ) &&
+				empty( array_intersect_key( $common_experimental_properties, $config ) )
+				)
+			)
+		) {
+			$updated_supports[ $support ] = $config;
+			continue;
+		}
+
+		$stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) {
+			if ( ! is_array( $unstable_config ) ) {
+				return $unstable_config;
+			}
+
+			$stable_config = array();
+			foreach ( $unstable_config as $key => $value ) {
+				// Get stable key from support-specific map, common properties map, or keep original.
+				$stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ??
+							$common_experimental_properties[ $key ] ??
+							$key;
+
+				$stable_config[ $stable_key ] = $value;
+
+				/*
+				 * The `__experimentalSkipSerialization` key needs to be kept until
+				 * WP 6.8 becomes the minimum supported version. This is due to the
+				 * core `wp_should_skip_block_supports_serialization` function only
+				 * checking for `__experimentalSkipSerialization` in earlier versions.
+				 */
+				if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) {
+					$stable_config['__experimentalSkipSerialization'] = $value;
+				}
+			}
+			return $stable_config;
+		};
+
+		// Stabilize the config value.
+		$stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config;
+
+		/*
+		 * If a plugin overrides the support config with the `register_block_type_args`
+		 * filter, both experimental and stable configs may be present. In that case,
+		 * use the order keys are defined in to determine the final value.
+		 *    - If config is an array, merge the arrays in their order of definition.
+		 *    - If config is not an array, use the value defined last.
+		 *
+		 * The reason for preferring the last defined key is that after filters
+		 * are applied, the last inserted key is likely the most up-to-date value.
+		 * We cannot determine with certainty which value was "last modified" so
+		 * the insertion order is the best guess. The extreme edge case of multiple
+		 * filters tweaking the same support property will become less over time as
+		 * extenders migrate existing blocks and plugins to stable keys.
+		 */
+		if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) {
+			$key_positions      = array_flip( array_keys( $args['supports'] ) );
+			$experimental_first =
+				( $key_positions[ $support ] ?? PHP_INT_MAX ) <
+				( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX );
+
+			/*
+			 * To merge the alternative support config effectively, it also needs to be
+			 * stabilized before merging to keep stabilized and experimental flags in
+			 * sync.
+			 */
+			$args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key );
+			// Prevents reprocessing this support as it was stabilized above.
+			$done[ $stable_support_key ] = true;
+
+			if ( is_array( $stable_config ) && is_array( $args['supports'][ $stable_support_key ] ) ) {
+				$stable_config = $experimental_first
+					? array_merge( $stable_config, $args['supports'][ $stable_support_key ] )
+					: array_merge( $args['supports'][ $stable_support_key ], $stable_config );
+			} else {
+				$stable_config = $experimental_first
+					? $args['supports'][ $stable_support_key ]
+					: $stable_config;
+			}
+		}
+
+		$updated_supports[ $stable_support_key ] = $stable_config;
+	}
+
+	$args['supports'] = $updated_supports;
+
+	return $args;
+}
+
+add_filter( 'register_block_type_args', 'gutenberg_stabilize_experimental_block_supports', PHP_INT_MAX, 1 );
diff --git a/lib/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php b/lib/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php
new file mode 100644
index 00000000000000..60b45b1a63adef
--- /dev/null
+++ b/lib/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php
@@ -0,0 +1,123 @@
+<?php
+/**
+ * A custom REST server for Gutenberg.
+ *
+ * @package gutenberg
+ * @since   6.8.0
+ */
+
+// Create a new class that extends WP_REST_Comments_Controller
+class Gutenberg_REST_Comment_Controller_6_8 extends WP_REST_Comments_Controller {
+
+	public function create_item_permissions_check( $request ) {
+		if ( empty( $request['comment_type'] ) || 'comment' === $request['comment_type'] ) {
+			return parent::create_item_permissions_check( $request );
+		}
+
+		if ( ! is_user_logged_in() ) {
+			if ( get_option( 'comment_registration' ) ) {
+				return new WP_Error(
+					'rest_comment_login_required',
+					__( 'Sorry, you must be logged in to comment.' ),
+					array( 'status' => 401 )
+				);
+			}
+
+			/**
+			 * Filters whether comments can be created via the REST API without authentication.
+			 *
+			 * Enables creating comments for anonymous users.
+			 *
+			 * @since 4.7.0
+			 *
+			 * @param bool $allow_anonymous Whether to allow anonymous comments to
+			 *                              be created. Default `false`.
+			 * @param WP_REST_Request $request Request used to generate the
+			 *                                 response.
+			 */
+			$allow_anonymous = apply_filters( 'rest_allow_anonymous_comments', false, $request );
+
+			if ( ! $allow_anonymous ) {
+				return new WP_Error(
+					'rest_comment_login_required',
+					__( 'Sorry, you must be logged in to comment.' ),
+					array( 'status' => 401 )
+				);
+			}
+		}
+
+		// Limit who can set comment `author`, `author_ip` or `status` to anything other than the default.
+		if ( isset( $request['author'] ) && get_current_user_id() !== $request['author'] && ! current_user_can( 'moderate_comments' ) ) {
+			return new WP_Error(
+				'rest_comment_invalid_author',
+				/* translators: %s: Request parameter. */
+				sprintf( __( "Sorry, you are not allowed to edit '%s' for comments." ), 'author' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		if ( isset( $request['author_ip'] ) && ! current_user_can( 'moderate_comments' ) ) {
+			if ( empty( $_SERVER['REMOTE_ADDR'] ) || $request['author_ip'] !== $_SERVER['REMOTE_ADDR'] ) {
+				return new WP_Error(
+					'rest_comment_invalid_author_ip',
+					/* translators: %s: Request parameter. */
+					sprintf( __( "Sorry, you are not allowed to edit '%s' for comments." ), 'author_ip' ),
+					array( 'status' => rest_authorization_required_code() )
+				);
+			}
+		}
+
+		if ( isset( $request['status'] ) && ! current_user_can( 'moderate_comments' ) ) {
+			return new WP_Error(
+				'rest_comment_invalid_status',
+				/* translators: %s: Request parameter. */
+				sprintf( __( "Sorry, you are not allowed to edit '%s' for comments." ), 'status' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		if ( empty( $request['post'] ) ) {
+			return new WP_Error(
+				'rest_comment_invalid_post_id',
+				__( 'Sorry, you are not allowed to create this comment without a post.' ),
+				array( 'status' => 403 )
+			);
+		}
+
+		$post = get_post( (int) $request['post'] );
+
+		if ( ! $post ) {
+			return new WP_Error(
+				'rest_comment_invalid_post_id',
+				__( 'Sorry, you are not allowed to create this comment without a post.' ),
+				array( 'status' => 403 )
+			);
+		}
+
+		if ( 'trash' === $post->post_status ) {
+			return new WP_Error(
+				'rest_comment_trash_post',
+				__( 'Sorry, you are not allowed to create a comment on this post.' ),
+				array( 'status' => 403 )
+			);
+		}
+
+		if ( ! $this->check_read_post_permission( $post, $request ) ) {
+			return new WP_Error(
+				'rest_cannot_read_post',
+				__( 'Sorry, you are not allowed to read the post for this comment.' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
+		}
+
+		return true;
+	}
+}
+
+add_action(
+	'rest_api_init',
+	function () {
+		$controller = new Gutenberg_REST_Comment_Controller_6_8();
+		$controller->register_routes();
+	}
+);
diff --git a/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php b/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php
new file mode 100644
index 00000000000000..da0489210e21f1
--- /dev/null
+++ b/lib/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Post_Types_Controller_6_8 class
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Gutenberg_REST_Post_Types_Controller_6_8 class
+ *
+ * Add Block Editor default rendering mode to the post type response
+ * to allow enabling/disabling at the post type level.
+ */
+class Gutenberg_REST_Post_Types_Controller_6_8 extends WP_REST_Post_Types_Controller {
+	/**
+	 * Add Block Editor default rendering mode setting to the response.
+	 *
+	 * @param  WP_Post_Type    $item    Post type object.
+	 * @param  WP_REST_Request $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$response = parent::prepare_item_for_response( $item, $request );
+		$context  = ! empty( $request['context'] ) ? $request['context'] : 'view';
+
+		// Property will only exist if the post type supports the block editor.
+		if ( 'edit' === $context && property_exists( $item, 'default_rendering_mode' ) ) {
+			/**
+			 * Filters the block editor rendering mode for a post type.
+			 *
+			 * @since 6.8.0
+			 * @param string       $default_rendering_mode Default rendering mode for the post type.
+			 * @param WP_Post_Type $post_type              Post type name.
+			 * @return string Default rendering mode for the post type.
+			 */
+			$rendering_mode = apply_filters( 'post_type_default_rendering_mode', $item->default_rendering_mode, $item );
+
+			/**
+			 * Filters the block editor rendering mode for a specific post type.
+			 * Applied after the generic `post_type_default_rendering_mode` filter.
+			 *
+			 * The dynamic portion of the hook name, `$item->name`, refers to the post type slug.
+			 *
+			 * @since 6.8.0
+			 * @param string       $default_rendering_mode Default rendering mode for the post type.
+			 * @param WP_Post_Type $post_type              Post type object.
+			 * @return string Default rendering mode for the post type.
+			 */
+			$rendering_mode = apply_filters( "post_type_{$item->name}_default_rendering_mode", $rendering_mode, $item );
+
+			// Validate the filtered rendering mode.
+			if ( ! in_array( $rendering_mode, gutenberg_post_type_rendering_modes(), true ) ) {
+				$rendering_mode = 'post-only';
+			}
+
+			$response->data['default_rendering_mode'] = $rendering_mode;
+		}
+
+		return rest_ensure_response( $response );
+	}
+}
diff --git a/lib/compat/wordpress-6.8/class-gutenberg-rest-user-controller.php b/lib/compat/wordpress-6.8/class-gutenberg-rest-user-controller.php
new file mode 100644
index 00000000000000..c1ecb8c86660cd
--- /dev/null
+++ b/lib/compat/wordpress-6.8/class-gutenberg-rest-user-controller.php
@@ -0,0 +1,62 @@
+<?php
+
+/**
+ * Add search_columns parameter to users endpoint parameters
+ *
+ * @param array $query_params JSON Schema-formatted collection parameters.
+ * @return array Updated collection parameters
+ */
+function gutenberg_add_search_columns_param( $query_params ) {
+	$query_params['search_columns'] = array(
+		'default'     => array(),
+		'description' => __( 'Array of column names to be searched.' ),
+		'type'        => 'array',
+		'items'       => array(
+			'enum' => array( 'email', 'name', 'id', 'username', 'slug' ),
+			'type' => 'string',
+		),
+	);
+
+	return $query_params;
+}
+
+add_filter( 'rest_user_collection_params', 'gutenberg_add_search_columns_param', 10, 1 );
+
+/**
+ * Modify user query based on search_columns parameter
+ *
+ * @param array           $prepared_args Array of arguments for WP_User_Query.
+ * @param WP_REST_Request $request       The REST API request.
+ * @return array Modified arguments
+ */
+function gutenberg_modify_user_query_args( $prepared_args, $request ) {
+	if ( $request->get_param( 'search' ) && $request->get_param( 'search_columns' ) ) {
+		$search_columns = $request->get_param( 'search_columns' );
+
+		// Validate search columns
+		$valid_columns          = isset( $prepared_args['search_columns'] )
+			? $prepared_args['search_columns']
+			: array( 'ID', 'user_login', 'user_nicename', 'user_email', 'user_url', 'display_name' );
+		$search_columns_mapping = array(
+			'id'       => 'ID',
+			'username' => 'user_login',
+			'slug'     => 'user_nicename',
+			'email'    => 'user_email',
+			'name'     => 'display_name',
+		);
+		$search_columns         = array_map(
+			static function ( $column ) use ( $search_columns_mapping ) {
+				return $search_columns_mapping[ $column ];
+			},
+			$search_columns
+		);
+		$search_columns         = array_intersect( $search_columns, $valid_columns );
+
+		if ( ! empty( $search_columns ) ) {
+			$prepared_args['search_columns'] = $search_columns;
+		}
+	}
+
+	return $prepared_args;
+}
+add_filter( 'rest_user_query', 'gutenberg_modify_user_query_args', 10, 2 );
diff --git a/lib/compat/wordpress-6.8/functions.php b/lib/compat/wordpress-6.8/functions.php
new file mode 100644
index 00000000000000..a4658d1a182c73
--- /dev/null
+++ b/lib/compat/wordpress-6.8/functions.php
@@ -0,0 +1,35 @@
+<?php
+
+/**
+ * Adds the x-wav mime type to the list of mime types.
+ * This is necessary for Firefox as it uses the identifier for uploaded .wav files.
+ * Core backport should add the following to the default mime_types filters in
+ * `wp_get_mime_types()` in wp-includes/functions.php:
+ *
+ * `'wav|x-wav' => 'audio/wav'`
+ *
+ * @since 6.8.0
+ *
+ * @param string[] $mime_types Mime types.
+ * @return string[] Mime types keyed by the file extension regex corresponding to those types.
+*/
+function gutenberg_get_mime_types_6_8( $mime_types ) {
+	/*
+	 * Only add support if there is existing support for 'wav'.
+	 * Some plugins may have deliberately disabled it.
+	*/
+	if ( ! isset( $mime_types['wav'] ) && ! isset( $mime_types['wav|x-wav'] ) ) {
+		return $mime_types;
+	}
+	/*
+	 * Also, given that other themes or plugins may have already
+	 * tried to add x-wav type support, only
+	 * add the mime type if it doesn't already exist
+	 * to avoid overriding any customizations.
+	 */
+	if ( ! isset( $mime_types['x-wav'] ) && ! isset( $mime_types['wav|x-wav'] ) ) {
+		$mime_types['x-wav'] = 'audio/wav';
+	}
+	return $mime_types;
+}
+add_filter( 'mime_types', 'gutenberg_get_mime_types_6_8', 99 );
diff --git a/lib/compat/wordpress-6.8/post.php b/lib/compat/wordpress-6.8/post.php
new file mode 100644
index 00000000000000..639e33b4e5ca51
--- /dev/null
+++ b/lib/compat/wordpress-6.8/post.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Get the available rendering modes for the Block Editor.
+ *
+ * post-only: This mode extracts the post blocks from the template and renders only those.
+ * The idea is to allow the user to edit the post/page in isolation without the wrapping template.
+ *
+ * template-locked: This mode renders both the template and the post blocks
+ * but the template blocks are locked and can't be edited. The post blocks are editable.
+ *
+ * @return array Array of available rendering modes.
+ */
+function gutenberg_post_type_rendering_modes() {
+	return array(
+		'post-only',
+		'template-locked',
+	);
+}
+
+/**
+ * Add the default_rendering_mode property to the WP_Post_Type object.
+ * This property can be overwritten by using the post_type_default_rendering_mode filter.
+ *
+ * @param array  $args      Array of post type arguments.
+ * @param string $post_type Post type key.
+ * @return array Updated array of post type arguments.
+ */
+function gutenberg_post_type_default_rendering_mode( $args, $post_type ) {
+	$rendering_mode  = 'page' === $post_type ? 'template-locked' : 'post-only';
+	$rendering_modes = gutenberg_post_type_rendering_modes();
+
+	// Make sure the post type supports the block editor.
+	if (
+		wp_is_block_theme() &&
+		( isset( $args['show_in_rest'] ) && $args['show_in_rest'] ) &&
+		( ! empty( $args['supports'] ) && in_array( 'editor', $args['supports'], true ) )
+	) {
+		// Validate the supplied rendering mode.
+		if (
+			isset( $args['default_rendering_mode'] ) &&
+			in_array( $args['default_rendering_mode'], $rendering_modes, true )
+		) {
+			$rendering_mode = $args['default_rendering_mode'];
+		}
+
+		$args['default_rendering_mode'] = $rendering_mode;
+	}
+
+	return $args;
+}
+add_filter( 'register_post_type_args', 'gutenberg_post_type_default_rendering_mode', 10, 2 );
diff --git a/lib/compat/wordpress-6.8/preload.php b/lib/compat/wordpress-6.8/preload.php
new file mode 100644
index 00000000000000..0e887fc081bcb5
--- /dev/null
+++ b/lib/compat/wordpress-6.8/preload.php
@@ -0,0 +1,96 @@
+<?php
+
+/**
+ * Preload necessary resources for the editors.
+ *
+ * @param array                   $paths   REST API paths to preload.
+ * @param WP_Block_Editor_Context $context Current block editor context
+ *
+ * @return array Filtered preload paths.
+ */
+function gutenberg_block_editor_preload_paths_6_8( $paths, $context ) {
+	if ( 'core/edit-site' === $context->name ) {
+		$post = null;
+		if ( isset( $_GET['postId'] ) && is_numeric( $_GET['postId'] ) ) {
+			$post = get_post( (int) $_GET['postId'] );
+		}
+		if ( isset( $_GET['p'] ) && preg_match( '/^\/page\/(\d+)$/', $_GET['p'], $matches ) ) {
+			$post = get_post( (int) $matches[1] );
+		}
+
+		if ( $post ) {
+			$route_for_post = rest_get_route_for_post( $post );
+			if ( $route_for_post ) {
+				$paths[] = add_query_arg( 'context', 'edit', $route_for_post );
+				$paths[] = add_query_arg( 'context', 'edit', '/wp/v2/types/' . $post->post_type );
+				if ( 'page' === $post->post_type ) {
+					$paths[] = add_query_arg(
+						'slug',
+						// @see https://github.com/WordPress/gutenberg/blob/489f6067c623926bce7151a76755bb68d8e22ea7/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js#L139-L140
+						'page-' . $post->post_name,
+						'/wp/v2/templates/lookup'
+					);
+				}
+			}
+		}
+
+		$paths[] = '/wp/v2/settings';
+		$paths[] = array( '/wp/v2/settings', 'OPTIONS' );
+		$paths[] = '/?_fields=' . implode(
+			',',
+			// @see packages/core-data/src/entities.js
+			array(
+				'description',
+				'gmt_offset',
+				'home',
+				'name',
+				'site_icon',
+				'site_icon_url',
+				'site_logo',
+				'timezone_string',
+				'default_template_part_areas',
+				'default_template_types',
+				'url',
+			)
+		);
+		$paths[] = '/wp/v2/templates/lookup?slug=front-page';
+		$paths[] = '/wp/v2/templates/lookup?slug=home';
+	}
+
+	// Preload theme and global styles paths.
+	if ( 'core/edit-site' === $context->name || 'core/edit-post' === $context->name ) {
+		$global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+		$excluded_paths   = array();
+		/*
+		 * Removes any edit or view context paths originating from Core,
+		 * or elsewhere, e.g., gutenberg_block_editor_preload_paths_6_6().
+		 * Aside from not preloading unnecessary contexts, it also ensures there no duplicates,
+		 * leading to a small optimization: block_editor_rest_api_preload() does not dedupe,
+		 * and will fire off a WP_REST_Request for every path. In the case of
+		 * `/wp/v2/global-styles/*` this will create a new WP_Theme_JSON() instance.
+		 */
+		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id . '?context=view';
+		// Removes any edit context path originating from gutenberg_block_editor_preload_paths_6_6().
+		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id . '?context=edit';
+		foreach ( $paths as $key => $path ) {
+			if ( in_array( $path, $excluded_paths, true ) ) {
+				unset( $paths[ $key ] );
+			}
+		}
+
+		/*
+		 * Preload the global styles path with the correct context based on user caps.
+		 * NOTE: There is an equivalent conditional check in the client-side code to fetch
+		 * the global styles entity using the appropriate context value.
+		 * See the call to `canUser()`, under `useGlobalStylesUserConfig()` in `packages/edit-site/src/components/use-global-styles-user-config/index.js`.
+		 * Please ensure that the equivalent check is kept in sync with this preload path.
+		 */
+		$context = current_user_can( 'edit_theme_options' ) ? 'edit' : 'view';
+		$paths[] = "/wp/v2/global-styles/$global_styles_id?context=$context";
+
+		// Used by getBlockPatternCategories in useBlockEditorSettings.
+		$paths[] = '/wp/v2/block-patterns/categories';
+	}
+	return $paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_8', 10, 2 );
diff --git a/lib/compat/wordpress-6.8/rest-api.php b/lib/compat/wordpress-6.8/rest-api.php
new file mode 100644
index 00000000000000..b94e42d5f2ccd0
--- /dev/null
+++ b/lib/compat/wordpress-6.8/rest-api.php
@@ -0,0 +1,89 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+if ( ! function_exists( 'gutenberg_add_post_type_rendering_mode' ) ) {
+	/**
+	 * Add Block Editor default rendering mode to the post type response.
+	 */
+	function gutenberg_add_post_type_rendering_mode() {
+		$controller = new Gutenberg_REST_Post_Types_Controller_6_8();
+		$controller->register_routes();
+	}
+}
+add_action( 'rest_api_init', 'gutenberg_add_post_type_rendering_mode' );
+
+// When querying terms for a given taxonomy in the REST API, respect the default
+// query arguments set for that taxonomy upon registration.
+function gutenberg_respect_taxonomy_default_args_in_rest_api( $args ) {
+	// If a `post` argument is provided, the Terms controller will use
+	// `wp_get_object_terms`, which respects the default query arguments,
+	// so we don't need to do anything.
+	if ( ! empty( $args['post'] ) ) {
+		return $args;
+	}
+
+	$t = get_taxonomy( $args['taxonomy'] );
+	if ( isset( $t->args ) && is_array( $t->args ) ) {
+		$args = array_merge( $args, $t->args );
+	}
+	return $args;
+}
+add_action(
+	'registered_taxonomy',
+	function ( $taxonomy ) {
+		add_filter( "rest_{$taxonomy}_query", 'gutenberg_respect_taxonomy_default_args_in_rest_api' );
+	}
+);
+add_action(
+	'unregistered_taxonomy',
+	function ( $taxonomy ) {
+		remove_filter( "rest_{$taxonomy}_query", 'gutenberg_respect_taxonomy_default_args_in_rest_api' );
+	}
+);
+
+/**
+ * Adds the default template part areas to the REST API index.
+ *
+ * This function exposes the default template part areas through the WordPress REST API.
+ * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file.
+ *
+ * @param WP_REST_Response $response REST API response.
+ * @return WP_REST_Response Modified REST API response with default template part areas.
+ */
+function gutenberg_add_default_template_part_areas_to_index( WP_REST_Response $response ) {
+	$response->data['default_template_part_areas'] = get_allowed_block_template_part_areas();
+	return $response;
+}
+
+add_filter( 'rest_index', 'gutenberg_add_default_template_part_areas_to_index' );
+
+/**
+ * Adds the default template types to the REST API index.
+ *
+ * This function exposes the default template types through the WordPress REST API.
+ * Note: This function backports into the wp-includes/rest-api/class-wp-rest-server.php file.
+ *
+ * @param WP_REST_Response $response REST API response.
+ * @return WP_REST_Response Modified REST API response with default template part areas.
+ */
+function gutenberg_add_default_template_types_to_index( WP_REST_Response $response ) {
+	$indexed_template_types = array();
+	foreach ( get_default_block_template_types() as $slug => $template_type ) {
+		$template_type['slug']    = (string) $slug;
+		$indexed_template_types[] = $template_type;
+	}
+
+	$response->data['default_template_types'] = $indexed_template_types;
+	return $response;
+}
+
+add_filter( 'rest_index', 'gutenberg_add_default_template_types_to_index' );
diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
new file mode 100644
index 00000000000000..cde108830b1d2c
--- /dev/null
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -0,0 +1,124 @@
+<?php
+/**
+ * Updates to the site editor in 6.8.
+ *
+ * Adds a mandatory dashboard link and redirects old urls.
+ *
+ * @package gutenberg
+ */
+
+add_filter(
+	'block_editor_settings_all',
+	function ( $settings ) {
+		$settings['__experimentalDashboardLink'] = admin_url( '/' );
+		return $settings;
+	}
+);
+
+function gutenberg_get_site_editor_redirection() {
+	global $pagenow;
+	if ( 'site-editor.php' !== $pagenow || isset( $_REQUEST['p'] ) || ! $_SERVER['QUERY_STRING'] ) {
+		return false;
+	}
+
+	// The following redirects are for the new permalinks in the site editor.
+	if ( isset( $_REQUEST['postType'] ) && 'wp_navigation' === $_REQUEST['postType'] && ! empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/wp_navigation/' . $_REQUEST['postId'] ), remove_query_arg( array( 'postType', 'postId' ) ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_navigation' === $_REQUEST['postType'] && empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/navigation' ), remove_query_arg( 'postType' ) );
+	}
+
+	if ( isset( $_REQUEST['path'] ) && '/wp_global_styles' === $_REQUEST['path'] ) {
+		return add_query_arg( array( 'p' => '/styles' ), remove_query_arg( 'path' ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'page' === $_REQUEST['postType'] && ( empty( $_REQUEST['canvas'] ) || empty( $_REQUEST['postId'] ) ) ) {
+		return add_query_arg( array( 'p' => '/page' ), remove_query_arg( 'postType' ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'page' === $_REQUEST['postType'] && ! empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/page/' . $_REQUEST['postId'] ), remove_query_arg( array( 'postType', 'postId' ) ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_template' === $_REQUEST['postType'] && ( empty( $_REQUEST['canvas'] ) || empty( $_REQUEST['postId'] ) ) ) {
+		return add_query_arg( array( 'p' => '/template' ), remove_query_arg( 'postType' ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_template' === $_REQUEST['postType'] && ! empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/wp_template/' . $_REQUEST['postId'] ), remove_query_arg( array( 'postType', 'postId' ) ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_block' === $_REQUEST['postType'] && ( empty( $_REQUEST['canvas'] ) || empty( $_REQUEST['postId'] ) ) ) {
+		return add_query_arg( array( 'p' => '/pattern' ), remove_query_arg( 'postType' ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_block' === $_REQUEST['postType'] && ! empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/wp_block/' . $_REQUEST['postId'] ), remove_query_arg( array( 'postType', 'postId' ) ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_template_part' === $_REQUEST['postType'] && ( empty( $_REQUEST['canvas'] ) || empty( $_REQUEST['postId'] ) ) ) {
+		return add_query_arg( array( 'p' => '/pattern' ) );
+	}
+
+	if ( isset( $_REQUEST['postType'] ) && 'wp_template_part' === $_REQUEST['postType'] && ! empty( $_REQUEST['postId'] ) ) {
+		return add_query_arg( array( 'p' => '/wp_template_part/' . $_REQUEST['postId'] ), remove_query_arg( array( 'postType', 'postId' ) ) );
+	}
+
+	// The following redirects are for backward compatibility with the old site editor URLs.
+	if ( isset( $_REQUEST['path'] ) && '/wp_template_part/all' === $_REQUEST['path'] ) {
+		return add_query_arg(
+			array(
+				'p'        => '/pattern',
+				'postType' => 'wp_template_part',
+			),
+			remove_query_arg( 'path' )
+		);
+	}
+
+	if ( isset( $_REQUEST['path'] ) && '/page' === $_REQUEST['path'] ) {
+		return add_query_arg( array( 'p' => '/page' ), remove_query_arg( 'path' ) );
+	}
+
+	if ( isset( $_REQUEST['path'] ) && '/wp_template' === $_REQUEST['path'] ) {
+		return add_query_arg( array( 'p' => '/template' ), remove_query_arg( 'path' ) );
+	}
+
+	if ( isset( $_REQUEST['path'] ) && '/patterns' === $_REQUEST['path'] ) {
+		return add_query_arg( array( 'p' => '/pattern' ), remove_query_arg( 'path' ) );
+	}
+
+	if ( isset( $_REQUEST['path'] ) && '/navigation' === $_REQUEST['path'] ) {
+		return add_query_arg( array( 'p' => '/navigation' ), remove_query_arg( 'path' ) );
+	}
+
+	return add_query_arg( array( 'p' => '/' ) );
+}
+
+function gutenberg_redirect_site_editor_deprecated_urls() {
+	$redirection = gutenberg_get_site_editor_redirection();
+	if ( false !== $redirection ) {
+		wp_redirect( $redirection, 301 );
+		exit;
+	}
+}
+add_action( 'admin_init', 'gutenberg_redirect_site_editor_deprecated_urls' );
+
+/**
+ * Filter the `wp_die_handler` to allow access to the Site Editor's new pages page
+ * for Classic themes.
+ *
+ * site-editor.php's access is forbidden for hybrid/classic themes and only allowed with some very special query args (some very special pages like template parts...).
+ * The only way to disable this protection since we're changing the urls in Gutenberg is to override the wp_die_handler.
+ *
+ * @param callable $default_handler The default handler.
+ * @return callable The default handler or a custom handler.
+ */
+function gutenberg_styles_wp_die_handler( $default_handler ) {
+	if ( ! wp_is_block_theme() && str_contains( $_SERVER['REQUEST_URI'], 'site-editor.php' ) && isset( $_GET['p'] ) ) {
+		return '__return_false';
+	}
+	return $default_handler;
+}
+add_filter( 'wp_die_handler', 'gutenberg_styles_wp_die_handler' );
diff --git a/lib/experimental/assets/tinymce-proxy.js b/lib/experimental/assets/tinymce-proxy.js
new file mode 100644
index 00000000000000..91c9e74bb74ed8
--- /dev/null
+++ b/lib/experimental/assets/tinymce-proxy.js
@@ -0,0 +1,14 @@
+async function reloadWithTinymce() {
+	const currentUrl = new URL( window.location.href );
+	currentUrl.searchParams.set( 'requiresTinymce', '1' );
+	window.location.href = currentUrl;
+}
+
+window.tinymce = new Proxy(
+	{},
+	{
+		get: reloadWithTinymce,
+		set: reloadWithTinymce,
+		apply: reloadWithTinymce,
+	}
+);
diff --git a/lib/experimental/block-editor-settings-mobile.php b/lib/experimental/block-editor-settings-mobile.php
index 91e3694c199f83..62c03db222afce 100644
--- a/lib/experimental/block-editor-settings-mobile.php
+++ b/lib/experimental/block-editor-settings-mobile.php
@@ -16,24 +16,15 @@
  * @return array New block editor settings.
  */
 function gutenberg_get_block_editor_settings_mobile( $settings ) {
-	if (
-		defined( 'REST_REQUEST' ) &&
-		REST_REQUEST &&
-		isset( $_GET['context'] ) &&
-		'mobile' === $_GET['context']
-	) {
-		if ( wp_theme_has_theme_json() ) {
-			$settings['__experimentalStyles'] = gutenberg_get_global_styles();
-		}
-
-		// To tell mobile that the site uses quote v2 (inner blocks).
-		// See https://github.com/WordPress/gutenberg/pull/25892.
-		$settings['__experimentalEnableQuoteBlockV2'] = true;
-		// To tell mobile that the site uses list v2 (inner blocks).
-		$settings['__experimentalEnableListBlockV2'] = true;
+	if ( wp_theme_has_theme_json() ) {
+		$settings['__experimentalStyles'] = gutenberg_get_global_styles();
 	}
 
+	// To tell mobile that the site uses quote v2 (inner blocks).
+	// See https://github.com/WordPress/gutenberg/pull/25892.
+	$settings['__experimentalEnableQuoteBlockV2'] = true;
+	// To tell mobile that the site uses list v2 (inner blocks).
+	$settings['__experimentalEnableListBlockV2'] = true;
+
 	return $settings;
 }
-
-add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php
index b789deaba6ed57..b4bf0d409b1596 100644
--- a/lib/experimental/blocks.php
+++ b/lib/experimental/blocks.php
@@ -42,7 +42,7 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 		 *                        is to ensure the content exists.
 		 * @return string Block content.
 		 */
-		$callback = static function( $content, $block ) use ( $args, $block_name ) {
+		$callback = static function ( $content, $block ) use ( $args, $block_name ) {
 
 			// Sanity check.
 			if ( empty( $block['blockName'] ) || $block_name !== $block['blockName'] ) {
@@ -77,3 +77,62 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 		add_filter( 'render_block', $callback, 10, 2 );
 	}
 }
+
+/**
+ * Registers a new block style for one or more block types.
+ *
+ * WP_Block_Styles_Registry was marked as `final` in core so it cannot be
+ * updated via Gutenberg to allow registration of a style across multiple
+ * block types as well as with an optional style object. This function will
+ * support the desired functionality until the styles registry can be updated
+ * in core.
+ *
+ * @param string|array $block_name       Block type name including namespace or array of namespaced block type names.
+ * @param array        $style_properties Array containing the properties of the style name, label,
+ *                                       style_handle (name of the stylesheet to be enqueued),
+ *                                       inline_style (string containing the CSS to be added),
+ *                                       style_data (theme.json-like object to generate CSS from).
+ *
+ * @return bool True if all block styles were registered with success and false otherwise.
+ */
+function gutenberg_register_block_style( $block_name, $style_properties ) {
+	if ( ! is_string( $block_name ) && ! is_array( $block_name ) ) {
+		_doing_it_wrong(
+			__METHOD__,
+			__( 'Block name must be a string or array.', 'gutenberg' ),
+			'6.6.0'
+		);
+
+		return false;
+	}
+
+	$block_names = is_string( $block_name ) ? array( $block_name ) : $block_name;
+	$result      = true;
+
+	foreach ( $block_names as $name ) {
+		if ( ! WP_Block_Styles_Registry::get_instance()->register( $name, $style_properties ) ) {
+			$result = false;
+		}
+	}
+
+	return $result;
+}
+
+/**
+ * Additional data to expose to the view script module in the Form block.
+ */
+function gutenberg_block_core_form_view_script_module( $data ) {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return $data;
+	}
+
+	$data['nonce']   = wp_create_nonce( 'wp-block-form' );
+	$data['ajaxUrl'] = admin_url( 'admin-ajax.php' );
+	$data['action']  = 'wp_block_form_email_submit';
+
+	return $data;
+}
+add_filter(
+	'script_module_data_@wordpress/block-library/form/view',
+	'gutenberg_block_core_form_view_script_module'
+);
diff --git a/lib/experimental/class--wp-editors.php b/lib/experimental/class--wp-editors.php
new file mode 100644
index 00000000000000..5ab06fefe92c0f
--- /dev/null
+++ b/lib/experimental/class--wp-editors.php
@@ -0,0 +1,30 @@
+<?php
+/**
+ * Contains the placeholder class to replace the default `_WP_Editors`.
+ *
+ * @package gutenberg
+ * @since 6.3.0
+ */
+
+// phpcs:disable PEAR.NamingConventions.ValidClassName.StartWithCapital
+
+if ( ! class_exists( '_WP_Editors' ) ) {
+
+	/**
+	 * Placeholder class.
+	 * Used to disable loading of TinyMCE assets.
+	 *
+	 * @access public
+	 */
+	final class _WP_Editors {
+		/**
+		 * Necessary to ensure no additional TinyMCE assets are enqueued.
+		 */
+		public static function enqueue_default_editor() {}
+
+		/**
+		 * Necessary for wp admin dashboard.
+		 */
+		public static function editor() {}
+	}
+}
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 4a258a70102bb5..ed2dcfe8584a6c 100644
--- a/lib/experimental/class-wp-rest-block-editor-settings-controller.php
+++ b/lib/experimental/class-wp-rest-block-editor-settings-controller.php
@@ -6,305 +6,320 @@
  * @subpackage REST_API
  */
 
-/**
- * Core class used to retrieve the block editor settings via the REST API.
- *
- * @see WP_REST_Controller
- */
-class WP_REST_Block_Editor_Settings_Controller extends WP_REST_Controller {
-	/**
-	 * Constructs the controller.
-	 */
-	public function __construct() {
-		$this->namespace = 'wp-block-editor/v1';
-		$this->rest_base = 'settings';
-	}
-
-	/**
-	 * Registers the necessary REST API routes.
-	 */
-	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' ),
-			)
-		);
-	}
+if ( ! class_exists( 'WP_REST_Block_Editor_Settings_Controller' ) ) {
 
 	/**
-	 * Checks whether a given request has permission to read block editor settings
+	 * Core class used to retrieve the block editor settings via the REST API.
 	 *
-	 * @since 5.8.0
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 *
-	 * @return WP_Error|bool True if the request has permission, WP_Error object otherwise.
+	 * @see WP_REST_Controller
 	 */
-	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;
-			}
+	class WP_REST_Block_Editor_Settings_Controller extends WP_REST_Controller {
+		/**
+		 * Constructs the controller.
+		 */
+		public function __construct() {
+			$this->namespace = 'wp-block-editor/v1';
+			$this->rest_base = 'settings';
 		}
 
-		return new WP_Error(
-			'rest_cannot_read_block_editor_settings',
-			__( 'Sorry, you are not allowed to read the block editor settings.', 'gutenberg' ),
-			array( 'status' => rest_authorization_required_code() )
-		);
-	}
-
-	/**
-	 * Returns the block editor's settings
-	 *
-	 * @since 5.8.0
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 *
-	 * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure.
-	 */
-	public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis
-		switch ( $request['context'] ) {
-			case 'post-editor':
-			default:
-				$editor_context_name = 'core/edit-post';
-				break;
-			case 'widgets-editor':
-				$editor_context_name = 'core/edit-widgets';
-				break;
-			case 'site-editor':
-				$editor_context_name = 'core/edit-site';
-				break;
-			case 'mobile':
-				$editor_context_name = 'core/mobile';
-				break;
+		/**
+		 * Registers the necessary REST API routes.
+		 */
+		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' ),
+				)
+			);
 		}
 
-		$editor_context = new WP_Block_Editor_Context( array( 'name' => $editor_context_name ) );
-		$settings       = get_block_editor_settings( array(), $editor_context );
+		/**
+		 * Checks whether a given request has permission to read block editor settings
+		 *
+		 * @since 5.8.0
+		 *
+		 * @param WP_REST_Request $request Full details about the request.
+		 *
+		 * @return WP_Error|bool True if the request has permission, 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;
+			}
 
-		return rest_ensure_response( $settings );
-	}
+			foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) {
+				if ( current_user_can( $post_type->cap->edit_posts ) ) {
+					return true;
+				}
+			}
 
-	/**
-	 * Retrieves the block editor's settings schema, conforming to JSON Schema.
-	 *
-	 * @since 5.8.0
-	 *
-	 * @return array Item schema data.
-	 */
-	public function get_item_schema() {
-		if ( $this->schema ) {
-			return $this->add_additional_fields_schema( $this->schema );
+			return new WP_Error(
+				'rest_cannot_read_block_editor_settings',
+				__( 'Sorry, you are not allowed to read the block editor settings.', 'gutenberg' ),
+				array( 'status' => rest_authorization_required_code() )
+			);
 		}
 
-		$this->schema = array(
-			'$schema'    => 'http://json-schema.org/draft-04/schema#',
-			'title'      => 'block-editor-settings-item',
-			'type'       => 'object',
-			'properties' => array(
-				'__unstableEnableFullSiteEditingBlocks'  => array(
-					'description' => __( 'Enables experimental Site Editor blocks', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'styles'                                 => array(
-					'description' => __( 'Editor styles', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'supportsTemplateMode'                   => array(
-					'description' => __( 'Indicates whether the current theme supports block-based templates.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'supportsLayout'                         => array(
-					'description' => __( 'Enable/disable layouts support in container blocks.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'widgetTypesToHideFromLegacyWidgetBlock' => array(
-					'description' => __( 'Widget types to hide from Legacy Widget block.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'__experimentalFeatures'                 => array(
-					'description' => __( 'Settings consolidated from core, theme, and user origins.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor', 'mobile' ),
-				),
-
-				'__experimentalStyles'                   => array(
-					'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'mobile' ),
-				),
-
-				'__experimentalEnableQuoteBlockV2'       => array(
-					'description' => __( 'Whether the V2 of the quote block that uses inner blocks should be enabled.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'mobile' ),
-				),
-
-				'__experimentalEnableListBlockV2'        => array(
-					'description' => __( 'Whether the V2 of the list block that uses inner blocks should be enabled.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'mobile' ),
-				),
-
-				'alignWide'                              => array(
-					'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'allowedBlockTypes'                      => array(
-					'description' => __( 'List of allowed block types.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'allowedMimeTypes'                       => array(
-					'description' => __( 'List of allowed mime types and file extensions.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'blockCategories'                        => array(
-					'description' => __( 'Returns all the categories for block types that will be shown in the block editor.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'disableCustomColors'                    => array(
-					'description' => __( 'Disables custom colors.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'disableCustomFontSizes'                 => array(
-					'description' => __( 'Disables custom font size.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'disableCustomGradients'                 => array(
-					'description' => __( 'Disables custom font size.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'disableLayoutStyles'                    => array(
-					'description' => __( 'Disables output of layout styles.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'enableCustomLineHeight'                 => array(
-					'description' => __( 'Enables custom line height.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'enableCustomSpacing'                    => array(
-					'description' => __( 'Enables custom spacing.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'enableCustomUnits'                      => array(
-					'description' => __( 'Enables custom units.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'isRTL'                                  => array(
-					'description' => __( 'Determines whether the current locale is right-to-left (RTL).', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-
-				'imageDefaultSize'                       => array(
-					'description' => __( 'Default size for images.', 'gutenberg' ),
-					'type'        => 'string',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+		/**
+		 * Returns the block editor's settings
+		 *
+		 * @since 5.8.0
+		 *
+		 * @param WP_REST_Request $request Full details about the request.
+		 *
+		 * @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure.
+		 */
+		public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis
+			switch ( $request['context'] ) {
+				case 'post-editor':
+				default:
+					$editor_context_name = 'core/edit-post';
+					break;
+				case 'widgets-editor':
+					$editor_context_name = 'core/edit-widgets';
+					break;
+				case 'site-editor':
+					$editor_context_name = 'core/edit-site';
+					break;
+				case 'mobile':
+					$editor_context_name = 'core/mobile';
+					break;
+			}
 
-				'imageDimensions'                        => array(
-					'description' => __( 'Available image dimensions.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+			add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
 
-				'imageEditing'                           => array(
-					'description' => __( 'Determines whether the image editing feature is enabled.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+			$editor_context = new WP_Block_Editor_Context( array( 'name' => $editor_context_name ) );
+			$settings       = get_block_editor_settings( array(), $editor_context );
 
-				'imageSizes'                             => array(
-					'description' => __( 'Available image sizes.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+			remove_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
 
-				'maxUploadFileSize'                      => array(
-					'description' => __( 'Maximum upload size in bytes allowed for the site.', 'gutenberg' ),
-					'type'        => 'number',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+			return rest_ensure_response( $settings );
+		}
 
-				'colors'                                 => array(
-					'description' => __( 'Active theme color palette.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+		/**
+		 * Retrieves the block editor's settings schema, conforming to JSON Schema.
+		 *
+		 * @since 5.8.0
+		 *
+		 * @return array Item schema data.
+		 */
+		public function get_item_schema() {
+			if ( $this->schema ) {
+				return $this->add_additional_fields_schema( $this->schema );
+			}
 
-				'fontSizes'                              => array(
-					'description' => __( 'Active theme font sizes.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
+			$schema = array(
+				'$schema'    => 'http://json-schema.org/draft-04/schema#',
+				'title'      => 'block-editor-settings-item',
+				'type'       => 'object',
+				'properties' => array(
+					'__unstableEnableFullSiteEditingBlocks' => array(
+						'description' => __( 'Enables experimental Site Editor blocks', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'styles'                           => array(
+						'description' => __( 'Editor styles', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'supportsTemplateMode'             => array(
+						'description' => __( 'Indicates whether the current theme supports block-based templates.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'supportsLayout'                   => array(
+						'description' => __( 'Enable/disable layouts support in container blocks.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'widgetTypesToHideFromLegacyWidgetBlock' => array(
+						'description' => __( 'Widget types to hide from Legacy Widget block.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'__experimentalFeatures'           => array(
+						'description' => __( 'Settings consolidated from core, theme, and user origins.', 'gutenberg' ),
+						'type'        => 'object',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor', 'mobile' ),
+					),
+
+					'__experimentalStyles'             => array(
+						'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
+						'type'        => 'object',
+						'context'     => array( 'mobile' ),
+					),
+
+					'__experimentalEnableQuoteBlockV2' => array(
+						'description' => __( 'Whether the V2 of the quote block that uses inner blocks should be enabled.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'mobile' ),
+					),
+
+					'__experimentalEnableListBlockV2'  => array(
+						'description' => __( 'Whether the V2 of the list block that uses inner blocks should be enabled.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'mobile' ),
+					),
+
+					'alignWide'                        => array(
+						'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'allowedBlockTypes'                => array(
+						'description' => __( 'List of allowed block types.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'allowedMimeTypes'                 => array(
+						'description' => __( 'List of allowed mime types and file extensions.', 'gutenberg' ),
+						'type'        => 'object',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'blockCategories'                  => array(
+						'description' => __( 'Returns all the categories for block types that will be shown in the block editor.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'blockInspectorTabs'               => array(
+						'description' => __( 'Block inspector tab display overrides.', 'gutenberg' ),
+						'type'        => 'object',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'disableCustomColors'              => array(
+						'description' => __( 'Disables custom colors.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'disableCustomFontSizes'           => array(
+						'description' => __( 'Disables custom font size.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'disableCustomGradients'           => array(
+						'description' => __( 'Disables custom font size.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'disableLayoutStyles'              => array(
+						'description' => __( 'Disables output of layout styles.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'enableCustomLineHeight'           => array(
+						'description' => __( 'Enables custom line height.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'enableCustomSpacing'              => array(
+						'description' => __( 'Enables custom spacing.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'enableCustomUnits'                => array(
+						'description' => __( 'Enables custom units.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'isRTL'                            => array(
+						'description' => __( 'Determines whether the current locale is right-to-left (RTL).', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'imageDefaultSize'                 => array(
+						'description' => __( 'Default size for images.', 'gutenberg' ),
+						'type'        => 'string',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'imageDimensions'                  => array(
+						'description' => __( 'Available image dimensions.', 'gutenberg' ),
+						'type'        => 'object',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'imageEditing'                     => array(
+						'description' => __( 'Determines whether the image editing feature is enabled.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'imageSizes'                       => array(
+						'description' => __( 'Available image sizes.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'maxUploadFileSize'                => array(
+						'description' => __( 'Maximum upload size in bytes allowed for the site.', 'gutenberg' ),
+						'type'        => 'number',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'colors'                           => array(
+						'description' => __( 'Active theme color palette.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'fontSizes'                        => array(
+						'description' => __( 'Active theme font sizes.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+
+					'gradients'                        => array(
+						'description' => __( 'Active theme gradients.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+					'spacingSizes'                     => array(
+						'description' => __( 'Active theme spacing sizes.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+					'spacingScale'                     => array(
+						'description' => __( 'Active theme spacing scale.', 'gutenberg' ),
+						'type'        => 'array',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+					'disableCustomSpacingSizes'        => array(
+						'description' => __( 'Disables custom spacing sizes.', 'gutenberg' ),
+						'type'        => 'boolean',
+						'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+					),
+				),
+			);
+
+			$this->schema = $schema;
 
-				'gradients'                              => array(
-					'description' => __( 'Active theme gradients.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-				'spacingSizes'                           => array(
-					'description' => __( 'Active theme spacing sizes.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-				'spacingScale'                           => array(
-					'description' => __( 'Active theme spacing scale.', 'gutenberg' ),
-					'type'        => 'array',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-				'disableCustomSpacingSizes'              => array(
-					'description' => __( 'Disables custom spacing sizes.', 'gutenberg' ),
-					'type'        => 'boolean',
-					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
-				),
-			),
-		);
-
-		return $this->add_additional_fields_schema( $this->schema );
+			return $this->add_additional_fields_schema( $this->schema );
+		}
 	}
 }
diff --git a/lib/experimental/class-wp-rest-customizer-nonces.php b/lib/experimental/class-wp-rest-customizer-nonces.php
deleted file mode 100644
index 4fc35209ae99de..00000000000000
--- a/lib/experimental/class-wp-rest-customizer-nonces.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-/**
- * WP_Rest_Customizer_Nonces class.
- *
- * @package gutenberg
- */
-
-/**
- * Class that returns the customizer "save" nonce that's required for the
- * batch save operation using the customizer API endpoint.
- */
-class WP_Rest_Customizer_Nonces extends WP_REST_Controller {
-
-	/**
-	 * Constructor.
-	 */
-	public function __construct() {
-		$this->namespace = '__experimental';
-		$this->rest_base = 'customizer-nonces';
-	}
-
-	/**
-	 * Registers the necessary REST API routes.
-	 *
-	 * @access public
-	 */
-	public function register_routes() {
-		register_rest_route(
-			$this->namespace,
-			'/' . $this->rest_base . '/get-save-nonce',
-			array(
-				array(
-					'methods'             => WP_REST_Server::READABLE,
-					'callback'            => array( $this, 'get_save_nonce' ),
-					'permission_callback' => array( $this, 'permissions_check' ),
-					'args'                => $this->get_collection_params(),
-				),
-				'schema' => array( $this, 'get_public_item_schema' ),
-			)
-		);
-	}
-
-	/**
-	 * Checks if a given request has access to read menu items if they have access to edit them.
-	 *
-	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-	 */
-	public function permissions_check() {
-		$post_type = get_post_type_object( 'nav_menu_item' );
-		if ( ! current_user_can( $post_type->cap->edit_posts ) ) {
-			return new WP_Error( 'rest_forbidden_context', __( 'Sorry, you are not allowed to edit posts in this post type.', 'gutenberg' ), array( 'status' => rest_authorization_required_code() ) );
-		}
-		return true;
-	}
-
-	/**
-	 * Returns the nonce required to request the customizer API endpoint.
-	 *
-	 * @access public
-	 */
-	public function get_save_nonce() {
-		require_once ABSPATH . 'wp-includes/class-wp-customize-manager.php';
-		$wp_customize = new WP_Customize_Manager();
-		$nonce        = wp_create_nonce( 'save-customize_' . $wp_customize->get_stylesheet() );
-		return array(
-			'success'    => true,
-			'nonce'      => $nonce,
-			'stylesheet' => $wp_customize->get_stylesheet(),
-		);
-	}
-
-}
diff --git a/lib/experimental/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/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
deleted file mode 100644
index 2f1ee93db30b53..00000000000000
--- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
+++ /dev/null
@@ -1,210 +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::$theme instanceof WP_Theme_JSON_Gutenberg ) {
-			$theme_json_data = static::read_json_file( static::get_file_path_from_theme( 'theme.json' ) );
-			$theme_json_data = static::translate( $theme_json_data, wp_get_theme()->get( 'TextDomain' ) );
-			$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_get_theme()->parent() ) {
-				// Get parent theme.json.
-				$parent_theme_json_data = static::read_json_file( static::get_file_path_from_theme( 'theme.json', true ) );
-				$parent_theme_json_data = static::translate( $parent_theme_json_data, wp_get_theme()->parent()->get( 'TextDomain' ) );
-				$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( get_default_block_editor_settings() );
-		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;
-	}
-
-	/**
-	 * Returns the data merged from multiple origins.
-	 *
-	 * There are three sources of data (origins) for a site:
-	 * default, theme, and custom. The custom's has higher priority
-	 * than the theme's, and the theme's higher than default's.
-	 *
-	 * Unlike the getters {@link get_core_data},
-	 * {@link get_theme_data}, and {@link 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 (user, theme, and core),
-	 * 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.
-	 *
-	 * @param string $origin Optional. To what level should we merge data.
-	 *                       Valid values are 'theme' or 'custom'. Default 'custom'.
-	 * @return WP_Theme_JSON
-	 */
-	public static function get_merged_data( $origin = 'custom' ) {
-		if ( is_array( $origin ) ) {
-			_deprecated_argument( __FUNCTION__, '5.9' );
-		}
-
-		$result = new WP_Theme_JSON_Gutenberg();
-		$result->merge( static::get_core_data() );
-		$result->merge( static::get_block_data() );
-		$result->merge( static::get_theme_data() );
-		if ( 'custom' === $origin ) {
-			$result->merge( static::get_user_data() );
-		}
-		// Generate the default spacing sizes presets.
-		$result->set_spacing_sizes();
-
-		return $result;
-	}
-}
diff --git a/lib/experimental/class-wp-webfonts-provider-local.php b/lib/experimental/class-wp-webfonts-provider-local.php
deleted file mode 100644
index 9af27fa7c436a7..00000000000000
--- a/lib/experimental/class-wp-webfonts-provider-local.php
+++ /dev/null
@@ -1,263 +0,0 @@
-<?php
-/**
- * Webfonts API: Provider for locally-hosted fonts.
- *
- * @package    WordPress
- * @subpackage WebFonts
- * @since      6.0.0
- */
-
-if ( class_exists( 'WP_Webfonts_Provider_Local' ) ) {
-	return;
-}
-
-/**
- * A core bundled provider for generating `@font-face` styles
- * from locally-hosted font files.
- *
- * This provider builds an optimized `src` (for browser support)
- * and then generates the `@font-face` styles.
- *
- * All know-how (business logic) for how to interact with and
- * generate styles from locally-hosted font files is contained
- * in this provider.
- *
- * @since 6.0.0
- */
-class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
-
-	/**
-	 * The provider's unique ID.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var string
-	 */
-	protected $id = 'local';
-
-	/**
-	 * Gets the `@font-face` CSS styles for locally-hosted font files.
-	 *
-	 * This method does the following processing tasks:
-	 *    1. Orchestrates an optimized `src` (with format) for browser support.
-	 *    2. Generates the `@font-face` for all its webfonts.
-	 *
-	 * For example, when given these webfonts:
-	 * <code>
-	 * array(
-	 *      'source-serif-pro.normal.200 900' => array(
-	 *          'provider'    => 'local',
-	 *          'font_family' => 'Source Serif Pro',
-	 *          'font_weight' => '200 900',
-	 *          'font_style'  => 'normal',
-	 *          'src'         => 'https://example.com/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2' ),
-	 *      ),
-	 *      'source-serif-pro.italic.400 900' => array(
-	 *          'provider'    => 'local',
-	 *          'font_family' => 'Source Serif Pro',
-	 *          'font_weight' => '200 900',
-	 *          'font_style'  => 'italic',
-	 *          'src'         => 'https://example.com/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2' ),
-	 *      ),
-	 * )
-	 * </code>
-	 *
-	 * the following `@font-face` styles are generated and returned:
-	 * <code>
-	 *
-	 * @font-face{
-	 *      font-family:"Source Serif Pro";
-	 *      font-style:normal;
-	 *      font-weight:200 900;
-	 *      font-stretch:normal;
-	 *      src:local("Source Serif Pro"), url('/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('/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');
-	 * }
-	 * </code>
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return string The `@font-face` CSS.
-	 */
-	public function get_css() {
-		$css = '';
-
-		foreach ( $this->webfonts as $webfont ) {
-			// Order the webfont's `src` items to optimize for browser support.
-			$webfont = $this->order_src( $webfont );
-
-			// Build the @font-face CSS for this webfont.
-			$css .= '@font-face{' . $this->build_font_face_css( $webfont ) . '}';
-		}
-
-		return $css;
-	}
-
-	/**
-	 * Order `src` items to optimize for browser support.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont Webfont to process.
-	 * @return array
-	 */
-	private function order_src( array $webfont ) {
-		if ( ! is_array( $webfont['src'] ) ) {
-			$webfont['src'] = (array) $webfont['src'];
-		}
-
-		$src         = array();
-		$src_ordered = array();
-
-		foreach ( $webfont['src'] as $url ) {
-			// Add data URIs first.
-			if ( str_starts_with( trim( $url ), 'data:' ) ) {
-				$src_ordered[] = array(
-					'url'    => $url,
-					'format' => 'data',
-				);
-				continue;
-			}
-			$format         = pathinfo( $url, PATHINFO_EXTENSION );
-			$src[ $format ] = $url;
-		}
-
-		// Add woff2.
-		if ( ! empty( $src['woff2'] ) ) {
-			$src_ordered[] = array(
-				'url'    => $src['woff2'],
-				'format' => 'woff2',
-			);
-		}
-
-		// Add woff.
-		if ( ! empty( $src['woff'] ) ) {
-			$src_ordered[] = array(
-				'url'    => $src['woff'],
-				'format' => 'woff',
-			);
-		}
-
-		// Add ttf.
-		if ( ! empty( $src['ttf'] ) ) {
-			$src_ordered[] = array(
-				'url'    => $src['ttf'],
-				'format' => 'truetype',
-			);
-		}
-
-		// Add eot.
-		if ( ! empty( $src['eot'] ) ) {
-			$src_ordered[] = array(
-				'url'    => $src['eot'],
-				'format' => 'embedded-opentype',
-			);
-		}
-
-		// Add otf.
-		if ( ! empty( $src['otf'] ) ) {
-			$src_ordered[] = array(
-				'url'    => $src['otf'],
-				'format' => 'opentype',
-			);
-		}
-		$webfont['src'] = $src_ordered;
-
-		return $webfont;
-	}
-
-	/**
-	 * Builds the font-family's CSS.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont Webfont to process.
-	 * @return string This font-family's CSS.
-	 */
-	private function build_font_face_css( array $webfont ) {
-		$css = '';
-
-		// Wrap font-family in quotes if it contains spaces.
-		if (
-			str_contains( $webfont['font-family'], ' ' ) &&
-			! str_contains( $webfont['font-family'], '"' ) &&
-			! str_contains( $webfont['font-family'], "'" )
-		) {
-			$webfont['font-family'] = '"' . $webfont['font-family'] . '"';
-		}
-
-		foreach ( $webfont as $key => $value ) {
-
-			// Skip "provider", since it's for internal API use,
-			// and not a valid CSS property.
-			if ( 'provider' === $key ) {
-				continue;
-			}
-
-			// Compile the "src" parameter.
-			if ( 'src' === $key ) {
-				$value = $this->compile_src( $webfont['font-family'], $value );
-			}
-
-			// If font-variation-settings is an array, convert it to a string.
-			if ( 'font-variation-settings' === $key && is_array( $value ) ) {
-				$value = $this->compile_variations( $value );
-			}
-
-			if ( ! empty( $value ) ) {
-				$css .= "$key:$value;";
-			}
-		}
-
-		return $css;
-	}
-
-	/**
-	 * Compiles the `src` into valid CSS.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param string $font_family Font family.
-	 * @param array  $value       Value to process.
-	 * @return string The CSS.
-	 */
-	private function compile_src( $font_family, array $value ) {
-		$src = "local($font_family)";
-
-		foreach ( $value as $item ) {
-
-			if ( str_starts_with( $item['url'], get_site_url() ) ) {
-				$item['url'] = wp_make_link_relative( $item['url'] );
-			}
-
-			$src .= ( 'data' === $item['format'] )
-				? ", url({$item['url']})"
-				: ", url('{$item['url']}') format('{$item['format']}')";
-		}
-		return $src;
-	}
-
-	/**
-	 * Compiles the font variation settings.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $font_variation_settings Array of font variation settings.
-	 * @return string The CSS.
-	 */
-	private function compile_variations( array $font_variation_settings ) {
-		$variations = '';
-
-		foreach ( $font_variation_settings as $key => $value ) {
-			$variations .= "$key $value";
-		}
-
-		return $variations;
-	}
-}
diff --git a/lib/experimental/class-wp-webfonts-provider.php b/lib/experimental/class-wp-webfonts-provider.php
deleted file mode 100644
index a49b8a324b7f5f..00000000000000
--- a/lib/experimental/class-wp-webfonts-provider.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<?php
-/**
- * Webfonts API: Provider abstract class.
- *
- * Individual webfonts providers should extend this class and implement.
- *
- * @package    WordPress
- * @subpackage WebFonts
- * @since      6.0.0
- */
-
-if ( class_exists( 'WP_Webfonts_Provider' ) ) {
-	return;
-}
-
-/**
- * Abstract class for Webfonts API providers.
- *
- * The starting point to building a webfont service provider.
- *
- * What is a Provider?
- *
- * A provider contains the know-how (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.
- *
- * It receives a collection of webfonts from the Controller
- * {@see WP_Webfonts_Provider::set_setfonts()}, and when requested
- * {@see WP_Webfonts_Provider::get_css()}, it transforms them
- * into styles (in a performant way for the provider service
- * it manages).
- *
- * @since 6.0.0
- */
-abstract class WP_Webfonts_Provider {
-
-	/**
-	 * Webfonts to be processed.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var array[]
-	 */
-	protected $webfonts = 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
-	 *
-	 * @param array[] $webfonts Registered webfonts.
-	 */
-	public function set_webfonts( array $webfonts ) {
-		$this->webfonts = $webfonts;
-	}
-
-	/**
-	 * Gets the `@font-face` CSS for the provider's webfonts.
-	 *
-	 * This method is where the provider does it processing to build the
-	 * 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
-	 *
-	 * @return string The `@font-face` CSS.
-	 */
-	abstract public function get_css();
-}
diff --git a/lib/experimental/class-wp-webfonts.php b/lib/experimental/class-wp-webfonts.php
deleted file mode 100644
index e40aca9e8671f8..00000000000000
--- a/lib/experimental/class-wp-webfonts.php
+++ /dev/null
@@ -1,417 +0,0 @@
-<?php
-/**
- * Webfonts API class.
- *
- * @package    WordPress
- * @subpackage WebFonts
- * @since      6.0.0
- */
-
-if ( class_exists( 'WP_Webfonts' ) ) {
-	return;
-}
-
-/**
- * Class WP_Webfonts
- *
- * @since 6.0.0
- */
-class WP_Webfonts {
-
-	/**
-	 * An array of registered webfonts.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var array[]
-	 */
-	private $registered_webfonts = array();
-
-	/**
-	 * An array of enqueued webfonts.
-	 *
-	 * @var array[]
-	 */
-	private $enqueued_webfonts = array();
-
-	/**
-	 * An array of registered providers.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var array
-	 */
-	private $providers = array();
-
-	/**
-	 * Stylesheet handle.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var string
-	 */
-	private $stylesheet_handle = '';
-
-	/**
-	 * Init.
-	 *
-	 * @since 6.0.0
-	 */
-	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' ) );
-	}
-
-	/**
-	 * Get the list of registered fonts.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return array[]
-	 */
-	public function get_registered_webfonts() {
-		return $this->registered_webfonts;
-	}
-
-	/**
-	 * Get the list of enqueued fonts.
-	 *
-	 * @return array[]
-	 */
-	public function get_enqueued_webfonts() {
-		return $this->enqueued_webfonts;
-	}
-
-	/**
-	 * Get the list of all fonts.
-	 *
-	 * @return array[]
-	 */
-	public function get_all_webfonts() {
-		return array_merge( $this->get_registered_webfonts(), $this->get_enqueued_webfonts() );
-	}
-
-	/**
-	 * Get the list of providers.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
-	 */
-	public function get_providers() {
-		return $this->providers;
-	}
-
-	/**
-	 * Register a webfont.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont Webfont to be registered.
-	 * @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;
-		}
-
-		$slug = $this->get_font_slug( $webfont );
-
-		// Initialize a new font-family collection.
-		if ( ! isset( $this->registered_webfonts[ $slug ] ) ) {
-			$this->registered_webfonts[ $slug ] = array();
-		}
-
-		$this->registered_webfonts[ $slug ][] = $webfont;
-		return $slug;
-	}
-
-	/**
-	 * Enqueue a font-family that has been already registered.
-	 *
-	 * @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;
-		}
-
-		$this->enqueued_webfonts[ $slug ] = $this->registered_webfonts[ $slug ];
-		unset( $this->registered_webfonts[ $slug ] );
-		return true;
-	}
-
-	/**
-	 * Get the font slug.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @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 static function get_font_slug( $to_convert ) {
-		if ( is_array( $to_convert ) ) {
-			if ( 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;
-			}
-		}
-
-		return sanitize_title( $to_convert );
-	}
-
-	/**
-	 * Validate a webfont.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array $webfont The webfont arguments.
-	 *
-	 * @return array|false The validated webfont arguments, or false if the webfont is invalid.
-	 */
-	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;
-		}
-
-		// Check the font-display.
-		if ( ! in_array( $webfont['font-display'], array( 'auto', 'block', 'fallback', 'swap', 'optional' ), true ) ) {
-			$webfont['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 ( $webfont as $prop => $value ) {
-			if ( ! in_array( $prop, $valid_props, true ) ) {
-				unset( $webfont[ $prop ] );
-			}
-		}
-
-		return $webfont;
-	}
-
-	/**
-	 * Register a provider.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param string $provider The provider name.
-	 * @param string $class    The provider class name.
-	 * @return bool True if successfully registered, else false.
-	 */
-	public function register_provider( $provider, $class ) {
-		if ( empty( $provider ) || empty( $class ) ) {
-			return false;
-		}
-		$this->providers[ $provider ] = $class;
-		return true;
-	}
-
-	/**
-	 * Generate and enqueue webfonts styles.
-	 *
-	 * @since 6.0.0
-	 */
-	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;
-		}
-
-		// Enqueue the stylesheet.
-		wp_register_style( $this->stylesheet_handle, '' );
-		wp_enqueue_style( $this->stylesheet_handle );
-
-		// Add the styles to the stylesheet.
-		wp_add_inline_style( $this->stylesheet_handle, $styles );
-	}
-
-	/**
-	 * 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;
-		}
-
-		wp_enqueue_style( 'wp-block-library' );
-		wp_add_inline_style( 'wp-block-library', $styles );
-	}
-
-	/**
-	 * Generate styles for webfonts.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param array[] $webfonts_by_provider Webfonts organized by provider.
-	 * @return string $styles Generated styles.
-	 */
-	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 ) );
-				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 ) ) {
-				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;
-	}
-
-
-	/**
-	 * 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;
-			}
-		}
-
-		return $webfonts_by_provider;
-	}
-}
diff --git a/lib/experimental/data-views.php b/lib/experimental/data-views.php
new file mode 100644
index 00000000000000..a5c350a18b0ca5
--- /dev/null
+++ b/lib/experimental/data-views.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * Dataviews custom post type and taxonomy.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the `wp_dataviews` post type and the `wp_dataviews_type` taxonomy.
+ */
+function _gutenberg_register_data_views_post_type() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( empty( $gutenberg_experiments ) || ! array_key_exists( 'gutenberg-custom-dataviews', $gutenberg_experiments ) ) {
+		return;
+	}
+	register_post_type(
+		'wp_dataviews',
+		array(
+			'label'        => _x( 'Dataviews', 'post type general name', 'gutenberg' ),
+			'description'  => __( 'Post which stores the different data views configurations', 'gutenberg' ),
+			'public'       => false,
+			'show_ui'      => false,
+			'show_in_rest' => true,
+			'rewrite'      => false,
+			'capabilities' => array(
+				'read' => 'edit_published_posts',
+			// 'create_posts'           => 'edit_published_posts',
+			// 'edit_posts'             => 'edit_published_posts',
+			// 'edit_published_posts'   => 'edit_published_posts',
+			// 'delete_published_posts' => 'delete_published_posts',
+			// 'edit_others_posts'      => 'edit_others_posts',
+			// 'delete_others_posts'    => 'edit_theme_options',
+			),
+			'map_meta_cap' => true,
+			'supports'     => array( 'title', 'slug', 'editor' ),
+		)
+	);
+
+	register_taxonomy(
+		'wp_dataviews_type',
+		array( 'wp_dataviews' ),
+		array(
+			'public'            => false,
+			'hierarchical'      => false,
+			'labels'            => array(
+				'name'          => __( 'Dataview types', 'gutenberg' ),
+				'singular_name' => __( 'Dataview type', 'gutenberg' ),
+			),
+			'rewrite'           => false,
+			'show_ui'           => false,
+			'show_in_nav_menus' => false,
+			'show_in_rest'      => true,
+		)
+	);
+}
+
+add_action( 'init', '_gutenberg_register_data_views_post_type' );
diff --git a/lib/experimental/disable-tinymce.php b/lib/experimental/disable-tinymce.php
new file mode 100644
index 00000000000000..25c9fc28e8850d
--- /dev/null
+++ b/lib/experimental/disable-tinymce.php
@@ -0,0 +1,97 @@
+<?php
+/**
+ * Experiment to disable TinyMCE and the Classic block.
+ *
+ * @package gutenberg
+ */
+
+// add_action( 'admin_footer', 'gutenberg_test_tinymce_access' ); // Uncomment the following line to force an external TinyMCE usage.
+
+/**
+ * Render a variable that we'll use to declare that the editor will need the classic block.
+ */
+function gutenberg_declare_classic_block_necessary() {
+	if ( ! gutenberg_post_being_edited_requires_classic_block() ) {
+		return;
+	}
+	echo '<script type="text/javascript">window.wp.needsClassicBlock = true;</script>';
+}
+add_action( 'admin_footer', 'gutenberg_declare_classic_block_necessary' );
+
+// If user has already requested TinyMCE, we're ending the experiment.
+if ( ! empty( $_GET['requiresTinymce'] ) || gutenberg_post_being_edited_requires_classic_block() ) {
+	return;
+}
+
+
+/**
+ * Disable TinyMCE by introducing a placeholder `_WP_Editors` class.
+ */
+function gutenberg_disable_tinymce() {
+	require __DIR__ . '/class--wp-editors.php';
+}
+
+add_action( 'admin_init', 'gutenberg_disable_tinymce' );
+
+/**
+ * Enqueue TinyMCE proxy script.
+ * Detects TinyMCE usage and sets the `requiresTinymce` query argument to stop disabling TinyMCE loading.
+ */
+function gutenberg_enqueue_tinymce_proxy() {
+	wp_enqueue_script( 'gutenberg-tinymce-proxy', plugins_url( 'assets/tinymce-proxy.js', __FILE__ ) );
+}
+
+add_action( 'admin_enqueue_scripts', 'gutenberg_enqueue_tinymce_proxy' );
+
+/**
+ * Example TinyMCE usage used for testing.
+ * Uncomment line 8 in this file to enable.
+ */
+function gutenberg_test_tinymce_access() {
+	echo '<script type="text/javascript">const a = window.tinymce.$;</script>';
+}
+
+/**
+ * Whether the current editor contains a classic block instance.
+ *
+ * @return bool True if the editor contains a classic block, false otherwise.
+ */
+function gutenberg_post_being_edited_requires_classic_block() {
+	if ( ! is_admin() ) {
+		return false;
+	}
+
+	// Continue only if we're in the post editor.
+	if ( empty( $_GET['post'] ) || empty( $_GET['action'] ) || 'edit' !== $_GET['action'] ) {
+		return false;
+	}
+
+	// Bail if for some reason the post isn't found.
+	$current_post = get_post( absint( $_GET['post'] ) );
+	if ( ! $current_post ) {
+		return false;
+	}
+
+	// Check if block editor is disabled by "Classic Editor" or another plugin.
+	if (
+		function_exists( 'use_block_editor_for_post_type' ) &&
+		! use_block_editor_for_post_type( $current_post->post_type )
+	) {
+		return true;
+	}
+
+	$content = $current_post->post_content;
+	if ( empty( $content ) ) {
+		return false;
+	}
+
+	$parsed_blocks = parse_blocks( $content );
+	foreach ( $parsed_blocks as $block ) {
+		$is_freeform_block = empty( $block['blockName'] ) || 'core/freeform' === $block['blockName'];
+		if ( $is_freeform_block && strlen( trim( $block['innerHTML'] ) ) > 0 ) {
+			return true;
+		}
+	}
+
+	return false;
+}
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 862a1bfe2b28c6..5b36c32b3c8296 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -5,90 +5,69 @@
  * @package gutenberg
  */
 
-/**
- * Initialize a block-based editor.
- *
- * @param string $editor_name          Editor name.
- * @param string $editor_script_handle Editor script handle.
- * @param array  $settings {
- *      Elements to initialize a block-based editor.
- *
- *      @type array  $preload_paths        Array of paths to preload.
- *      @type string $initializer_name     Editor initialization function name.
- *      @type array  $editor_settings      Editor settings.
- * }
- * @return void
- */
-function gutenberg_initialize_editor( $editor_name, $editor_script_handle, $settings ) {
-
-	$defaults = array(
-		'preload_paths'    => array(),
-		'initializer_name' => 'initialize',
-		'editor_settings'  => array(),
-	);
-
-	$settings = wp_parse_args( $settings, $defaults );
-
-	/**
-	 * Preload common data by specifying an array of REST API paths that will be preloaded.
-	 *
-	 * Filters the array of paths that will be preloaded.
-	 *
-	 * @param string[] $preload_paths Array of paths to preload.
-	 */
-	$preload_paths = apply_filters( "{$editor_name}_preload_paths", $settings['preload_paths'] );
-
-	$preload_data = array_reduce(
-		$preload_paths,
-		'rest_preload_api_request',
-		array()
-	);
-
-	wp_add_inline_script(
-		'wp-api-fetch',
-		sprintf(
-			'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );',
-			wp_json_encode( $preload_data )
-		),
-		'after'
-	);
-	wp_add_inline_script(
-		"wp-{$editor_script_handle}",
-		sprintf(
-			'wp.domReady( function() {
-				wp.%s.%s( "%s", %s );
-			} );',
-			lcfirst( str_replace( '-', '', ucwords( $editor_script_handle, '-' ) ) ),
-			$settings['initializer_name'],
-			str_replace( '_', '-', $editor_name ),
-			wp_json_encode( $settings['editor_settings'] )
-		)
-	);
-
-	// Preload server-registered block schemas.
-	wp_add_inline_script(
-		'wp-blocks',
-		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
-	);
-}
-
 /**
  * Sets a global JS variable used to trigger the availability of each Gutenberg Experiment.
  */
 function gutenberg_enable_experiments() {
 	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSync = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-custom-dataviews', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomViews = true', 'before' );
 	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-grid-interactivity', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGridInteractivity = true', 'before' );
+	}
+	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
+		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
+	}
+	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-comment', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockComment = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
 	}
-	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-media-processing', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
+	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-editor-write-mode', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEditorWriteMode = true', 'before' );
 	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
+
+/**
+ * Sets a global JS variable used to trigger the availability of form & input blocks.
+ *
+ * @deprecated 19.0.0 Use gutenberg_enable_block_experiments().
+ */
+function gutenberg_enable_form_input_blocks() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 19.0.0', 'gutenberg_enable_block_experiments' );
+}
+
+/**
+ * Sets global JS variables used to enable various block experiments.
+ */
+function gutenberg_enable_block_experiments() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+
+	// Experimental form blocks.
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-form-blocks', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableFormBlocks = true', 'before' );
+	}
+
+	// General experimental blocks that are not in the default block library.
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-experiments', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockExperiments = true', 'before' );
+	}
+}
+
+add_action( 'admin_init', 'gutenberg_enable_block_experiments' );
diff --git a/lib/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php b/lib/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php
new file mode 100644
index 00000000000000..7cf041148eedd0
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php
@@ -0,0 +1,49 @@
+<?php
+/**
+ * Fonts API BC Layer helpers.
+ *
+ * BACKPORT NOTE: Do not backport this file to Core.
+ * This file is now part of the API's Backwards-Compatibility (BC) layer.
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ * @since      15.7.0
+ */
+
+/**
+ * Class Gutenberg_Fonts_API_BC_Layer
+ *
+ * BACKPORT NOTE: Do not backport this file to Core.
+ *
+ * @since X.X.X
+ * @deprecated 16.3.0 Fonts API is not supported.
+ */
+class Gutenberg_Fonts_API_BC_Layer {
+
+	/**
+	 * Determines if the given fonts array is the deprecated array structure.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Structure check is not functional.
+	 *
+	 * @return bool False.
+	 */
+	public static function is_deprecated_structure() {
+		_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		return false;
+	}
+
+	/**
+	 * Migrates deprecated fonts structure into new API data structure,
+	 * i.e. variations grouped by their font-family.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Migrate is not supported.
+	 *
+	 * @return array Empty array.
+	 */
+	public static function migrate_deprecated_structure() {
+		_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		return array();
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php
new file mode 100644
index 00000000000000..67d5a616344067
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Webfonts API: Provider for locally-hosted fonts.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Fonts_Provider_Local' ) ) {
+
+	/**
+	 * A core bundled provider for generating `@font-face` styles
+	 * from locally-hosted font files.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Providers are not supported.
+	 *                    Local provider is in WP_Font_Face.
+	 */
+	class WP_Fonts_Provider_Local extends WP_Fonts_Provider {
+
+		/**
+		 * The provider's unique ID.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @var string
+		 */
+		protected $id = 'local';
+
+		/**
+		 * Gets the `@font-face` CSS styles for locally-hosted font files.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Get styles is not supported.
+		 *
+		 * @return string Empty string.
+		 */
+		public function get_css() {
+			_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+			return '';
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-fonts-provider.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider.php
new file mode 100644
index 00000000000000..099105dc53c100
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider.php
@@ -0,0 +1,97 @@
+<?php
+/**
+ * Fonts API: Provider abstract class.
+ *
+ * Individual fonts providers should extend this class and implement.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Fonts_Provider' ) ) {
+
+	/**
+	 * Abstract class for Fonts API providers.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Custom providers are not supported.
+	 */
+	abstract class WP_Fonts_Provider {
+
+		/**
+		 * The provider's unique ID.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @var string
+		 */
+		protected $id = '';
+
+		/**
+		 * Fonts to be processed.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @var array[]
+		 */
+		protected $fonts = 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
+		 * @deprecated 16.3.0
+		 *
+		 * @var string[]
+		 */
+		protected $style_tag_atts = array();
+
+		/**
+		 * Sets this provider's fonts property.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Set is not supported.
+		 */
+		public function set_fonts() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Prints the generated styles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Use wp_print_font_faces() instead.
+		 */
+		public function print_styles() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0', 'wp_print_font_faces' );
+		}
+
+		/**
+		 * Gets the `@font-face` CSS for the provider's fonts.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @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
+		 * @deprecated 16.3.0 Get style element is not supported.
+		 *
+		 * @return string Empty string.
+		 */
+		protected function get_style_element() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return '';
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-fonts-resolver.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-resolver.php
new file mode 100644
index 00000000000000..e02948b73d5df7
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-fonts-resolver.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * WP_Fonts_Resolver class.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Fonts_Resolver' ) ) {
+
+	/**
+	 * The Fonts API Resolver abstracts the processing of different data sources
+	 * (such as theme.json and global styles) for font interactions with the API.
+	 *
+	 * This class is for internal core usage and is not supposed to be used by
+	 * extenders (plugins and/or themes).
+	 *
+	 * @access private
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Fonts API is not supported.
+	 */
+	class WP_Fonts_Resolver {
+
+		/**
+		 * Enqueues user-selected fonts via global styles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Enqueue is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public static function enqueue_user_selected_fonts() {
+			_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+			return array();
+		}
+
+		/**
+		 * Register fonts defined in theme.json.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Register is not supported.
+		 */
+		public static function register_fonts_from_theme_json() {
+			_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+		}
+
+		/**
+		 * Add missing fonts to the global styles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Adding fonts into theme.json theme data layer is not supported.
+		 *
+		 * @param WP_Theme_JSON_Gutenberg|WP_Theme_JSON $data The global styles.
+		 * @return WP_Theme_JSON_Gutenberg|WP_Theme_JSON Unchanged global styles.
+		 */
+		public static function add_missing_fonts_to_theme_json( $data ) {
+			_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+			return $data;
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-fonts-utils.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-utils.php
new file mode 100644
index 00000000000000..85a68fd0d9e10a
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-fonts-utils.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Font API's utility helpers.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Fonts_Utils' ) ) {
+
+	/**
+	 * Utility helpers for the Fonts API.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Fonts API is not supported.
+	 */
+	class WP_Fonts_Utils {
+
+		/**
+		 * Converts the given font family into a handle.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null
+		 */
+		public static function convert_font_family_into_handle() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Converts the given variation and its font-family into a handle.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null
+		 */
+		public static function convert_variation_into_handle() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Gets the font family from the variation.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null Null.
+		 */
+		public static function get_font_family_from_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Checks if the given input is defined, i.e. meaning is a non-empty string.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @param string $input The input to check.
+		 * @return bool True when non-empty string. Else false.
+		 */
+		public static function is_defined( $input ) {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return ( is_string( $input ) && ! empty( $input ) );
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-fonts.php b/lib/experimental/font-face/bc-layer/class-wp-fonts.php
new file mode 100644
index 00000000000000..c717702595b833
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-fonts.php
@@ -0,0 +1,198 @@
+<?php
+/**
+ * WP Fonts API class.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Fonts' ) ) {
+
+	/**
+	 * Class WP_Fonts
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Fonts API is not supported.
+	 */
+	class WP_Fonts extends WP_Dependencies {
+
+		/**
+		 * Registered "origin", indicating the font is registered in the API.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 *
+		 * @var string
+		 */
+		const REGISTERED_ORIGIN = 'gutenberg_wp_fonts_api';
+
+		/**
+		 * Constructor.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 */
+		public function __construct() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Get the list of registered providers.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Providers are not supported.
+		 */
+		public function get_providers() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Register a provider.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Providers are not supported.
+		 *
+		 * @return bool False.
+		 */
+		public function register_provider() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return false;
+		}
+
+		/**
+		 * Get the list of all registered font family handles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered_font_families() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Get the list of all registered font families and their variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Get the list of enqueued font families and their variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Enqueue is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_enqueued() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Registers a font family.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Add is not supported.
+		 *
+		 * @return null Null.
+		 */
+		public function add_font_family() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Removes a font family and all registered variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Remove is not supported.
+		 */
+		public function remove_font_family() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Add a variation to an existing family or register family if none exists.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Add is not supported.
+		 *
+		 * @return null Null.
+		 */
+		public function add_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Removes a variation.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Remove is not supported.
+		 */
+		public function remove_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Processes the items and dependencies.
+		 *
+		 * Processes the items passed to it or the queue, and their dependencies.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Processing items and dependencies is not supported.
+		 *
+		 * @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 Empty array.
+		 */
+		public function do_items( $handles = false, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Invokes each provider to process and print its styles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Process and print provider styles is not supported.
+		 *
+		 * @see WP_Dependencies::do_item()
+		 *
+		 * @param string    $provider_id The provider to process.
+		 * @param int|false $group       Not used.
+		 * @return bool False.
+		 */
+		public function do_item( $provider_id, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return false;
+		}
+
+		/**
+		 * Converts the font family and its variations into theme.json structural format.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Convert is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function to_theme_json() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-web-fonts.php b/lib/experimental/font-face/bc-layer/class-wp-web-fonts.php
new file mode 100644
index 00000000000000..aaf1f9b9a7ba74
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-web-fonts.php
@@ -0,0 +1,189 @@
+<?php
+/**
+ * Web Fonts API class.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Web_Fonts' ) ) {
+
+	/**
+	 * Class WP_Web_Fonts
+	 *
+	 * @since 14.9.1
+	 * @deprecated 15.1 Use WP_Fonts instead.
+	 * @deprecated 16.3.0 Fonts API is not supported.
+	 */
+	class WP_Web_Fonts extends WP_Webfonts {
+
+		/**
+		 * Constructor.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 */
+		public function __construct() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Get the list of registered providers.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Providers are not supported.
+		 */
+		public function get_providers() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Register a provider.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Providers are not supported.
+		 *
+		 * @return bool False.
+		 */
+		public function register_provider() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return false;
+		}
+
+		/**
+		 * Get the list of all registered font family handles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered_font_families() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Get the list of all registered font families and their variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Get the list of enqueued font families and their variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Enqueue is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_enqueued() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Registers a font family.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Add is not supported.
+		 *
+		 * @return null Null.
+		 */
+		public function add_font_family() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Removes a font family and all registered variations.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Remove is not supported.
+		 */
+		public function remove_font_family() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Add a variation to an existing family or register family if none exists.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Add is not supported.
+		 *
+		 * @return null Null.
+		 */
+		public function add_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return null;
+		}
+
+		/**
+		 * Removes a variation.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Remove is not supported.
+		 */
+		public function remove_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Processes the items and dependencies.
+		 *
+		 * Processes the items passed to it or the queue, and their dependencies.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Processing items and dependencies is not supported.
+		 *
+		 * @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 Empty array.
+		 */
+		public function do_items( $handles = false, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+
+		/**
+		 * Invokes each provider to process and print its styles.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Process and print provider styles is not supported.
+		 *
+		 * @see WP_Dependencies::do_item()
+		 *
+		 * @param string    $provider_id The provider to process.
+		 * @param int|false $group       Not used.
+		 * @return bool False.
+		 */
+		public function do_item( $provider_id, $group = false ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return false;
+		}
+
+		/**
+		 * Converts the font family and its variations into theme.json structural format.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Convert is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function to_theme_json() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return array();
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php
new file mode 100644
index 00000000000000..cbf5b2b99b9e63
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php
@@ -0,0 +1,64 @@
+<?php
+/**
+ * Fonts API: Provider for locally-hosted fonts.
+ *
+ * Part of the backwards-compatibility (BC) layer for all
+ * deprecated publicly exposed methods and functionality.
+ *
+ * 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.
+ *
+ * @package    WordPress
+ * @subpackage Fonts
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Webfonts_Provider_Local' ) ) {
+
+	/**
+	 * A deprecated core bundled provider for generating `@font-face` styles
+	 * from locally-hosted font files.
+	 *
+	 * BACKPORT NOTE: Do not backport this file to Core.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use `WP_Fonts_Provider_Local` instead.
+	 * @deprecated 16.3.0 Providers are not supported.
+	 *                    Local provider is in WP_Font_Face.
+	 */
+	class WP_Webfonts_Provider_Local extends WP_Webfonts_Provider {
+
+		/**
+		 * The provider's unique ID.
+		 *
+		 * @since 6.0.0
+		 * @deprecated 16.3.0
+		 *
+		 * @var string
+		 */
+		protected $id = 'local';
+
+		/**
+		 * Constructor.
+		 *
+		 * @since 6.1.0
+		 */
+		public function __construct() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+		}
+
+		/**
+		 * Gets the `@font-face` CSS styles for locally-hosted font files.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0 Get styles is not supported.
+		 *
+		 * @return string Empty string.
+		 */
+		public function get_css() {
+			_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+			return '';
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider.php
new file mode 100644
index 00000000000000..1610d9b3b163b9
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * Fonts API: Provider abstract class.
+ *
+ * Part of the backwards-compatibility (BC) layer for all
+ * deprecated publicly exposed methods and functionality.
+ *
+ * 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.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Webfonts_Provider' ) ) {
+
+	/**
+	 * Deprecated abstract class for Fonts API providers.
+	 *
+	 * BACKPORT NOTE: Do not backport this file to Core.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use `WP_Fonts_Provider` instead.
+	 * @deprecated 16.3.0 Custom providers are not supported.
+	 */
+	abstract class WP_Webfonts_Provider extends WP_Fonts_Provider {
+
+		/**
+		 * Fonts to be processed.
+		 *
+		 * @since X.X.X
+		 * @deprecated 15.1 Use WP_Fonts_Provider::$fonts property instead.
+		 * @deprecated 16.3.0
+		 *
+		 * @var array[]
+		 */
+		protected $webfonts = array();
+
+		/**
+		 * Sets this provider's fonts property.
+		 *
+		 * @since X.X.X
+		 * @deprecated GB 15.1 Use WP_Fonts_Provider::set_fonts() instead.
+		 * @deprecated 16.3.0 Set is not supported.
+		 */
+		public function set_webfonts() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-webfonts-utils.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-utils.php
new file mode 100644
index 00000000000000..3fbd0e8d7357cc
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-webfonts-utils.php
@@ -0,0 +1,81 @@
+<?php
+/**
+ * Webfont API's utility helpers.
+ *
+ * BACKPORT NOTE: Do not backport this file to Core.
+ * This file is now part of the API's Backwards-Compatibility (BC) layer.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Webfonts_Utils' ) ) {
+
+	/**
+	 * Utility helpers for the Webfonts API.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use WP_Fonts_Utils instead.
+	 * @deprecated 16.3.0 Webfonts API is not supported.
+	 */
+	class WP_Webfonts_Utils {
+
+		/**
+		 * Converts the given font family into a handle.
+		 *
+		 * @since X.X.X
+		 * @deprecated 15.1 Use WP_Fonts_Utils::convert_font_family_into_handle() instead.
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null
+		 */
+		public static function convert_font_family_into_handle() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+			return null;
+		}
+
+		/**
+		 * Converts the given variation and its font-family into a handle.
+		 *
+		 * @since X.X.X
+		 * @deprecated 15.1 Use WP_Fonts_Utils::convert_variation_into_handle() instead.
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null
+		 */
+		public static function convert_variation_into_handle() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+			return null;
+		}
+
+		/**
+		 * Gets the font family from the variation.
+		 *
+		 * @since X.X.X
+		 * @deprecated 15.1 Use WP_Fonts_Utils::get_font_family_from_variation() instead.
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return null
+		 */
+		public static function get_font_family_from_variation() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+			return null;
+		}
+
+		/**
+		 * Checks if the given input is defined, i.e. meaning is a non-empty string.
+		 *
+		 * @since X.X.X
+		 * @deprecated 15.1 Use WP_Fonts_Utils::is_defined() instead.
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @param string $input The input to check.
+		 * @return bool True when non-empty string. Else false.
+		 */
+		public static function is_defined( $input ) {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.1' );
+			return ( is_string( $input ) && ! empty( $input ) );
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/class-wp-webfonts.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts.php
new file mode 100644
index 00000000000000..9cd681054597b1
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/class-wp-webfonts.php
@@ -0,0 +1,145 @@
+<?php
+/**
+ * Webfonts API class: backwards-compatibility (BC) layer for all
+ * deprecated publicly exposed methods and functionality.
+ *
+ * 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.
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API's BC Layer
+ * @since      X.X.X
+ */
+
+if ( ! class_exists( 'WP_Webfonts' ) ) {
+
+	/**
+	 * Class WP_Webfonts
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use WP_Fonts instead.
+	 * @deprecated 16.3.0 Fonts API is not supported.
+	 */
+	class WP_Webfonts {
+
+		/**
+		 * Constructor.
+		 *
+		 * @since X.X.X
+		 * @deprecated 16.3.0
+		 */
+		public function __construct() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+		}
+
+		/**
+		 * Gets the font slug.
+		 *
+		 * @since X.X.X
+		 * @deprecated Use WP_Fonts_Utils::convert_font_family_into_handle() or WP_Fonts_Utils::get_font_family_from_variation().
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return false False.
+		 */
+		public static function get_font_slug() {
+			_deprecated_function( __METHOD__, 'Gutenberg 16.3.0' );
+			return false;
+		}
+
+		/**
+		 * Initializes the API.
+		 *
+		 * @since 6.0.0
+		 * @deprecated 14.9.1 Use wp_fonts().
+		 */
+		public static function init() {
+			_deprecated_function( __METHOD__, 'GB 14.9.1', 'wp_fonts()' );
+		}
+
+		/**
+		 * Get the list of all registered font family handles.
+		 *
+		 * @since X.X.X
+		 * @deprecated GB 15.8.0 Use wp_fonts()->get_registered_font_families().
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered_font_families() {
+			_deprecated_function( __METHOD__, 'Gutenberg 15.8.0' );
+			return array();
+		}
+
+		/**
+		 * Gets the list of registered fonts.
+		 *
+		 * @since 6.0.0
+		 * @deprecated 14.9.1 Use wp_fonts()->get_registered().
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_registered_webfonts() {
+			_deprecated_function( __METHOD__, 'Gutenberg 14.9.1' );
+
+			return array();
+		}
+
+		/**
+		 * Gets the list of enqueued fonts.
+		 *
+		 * @since 6.0.0
+		 * @deprecated 14.9.1 Use wp_fonts()->get_enqueued().
+		 * @deprecated 16.3.0 Enqueue is not supported.
+		 *
+		 * @return array Empty array.
+		 */
+		public function get_enqueued_webfonts() {
+			_deprecated_function( __METHOD__, 'Gutenberg 14.9.1' );
+			return array();
+		}
+
+		/**
+		 * Gets the list of all fonts.
+		 *
+		 * @since X.X.X
+		 * @deprecated GB 14.9.1 Use wp_fonts()->get_registered().
+		 * @deprecated 16.3.0 This method is not supported.
+		 *
+		 * @return array[]
+		 */
+		public function get_all_webfonts() {
+			_deprecated_function( __METHOD__, 'Gutenberg 14.9.1', 'wp_fonts()->get_registered()' );
+			return array();
+		}
+
+		/**
+		 * Registers a webfont.
+		 *
+		 * @since 6.0.0
+		 * @deprecated GB 14.9.1 Use wp_register_fonts().
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return bool False.
+		 */
+		public function register_webfont() {
+			_deprecated_function( __METHOD__, 'GB 14.9.1', 'wp_register_fonts()' );
+			return false;
+		}
+
+		/**
+		 * Enqueue a font-family that has been already registered.
+		 *
+		 * @since XX.X
+		 * @deprecated 14.9.1 Use wp_enqueue_fonts().
+		 * @deprecated 16.3.0 Register is not supported.
+		 *
+		 * @return bool False.
+		 */
+		public function enqueue_webfont() {
+			_deprecated_function( __METHOD__, 'Gutenberg 14.9.1' );
+			return false;
+		}
+	}
+}
diff --git a/lib/experimental/font-face/bc-layer/webfonts-deprecations.php b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php
new file mode 100644
index 00000000000000..2534d8db165273
--- /dev/null
+++ b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php
@@ -0,0 +1,291 @@
+<?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.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ * @since      X.X.X
+ */
+
+if ( ! function_exists( 'wp_webfonts' ) ) {
+	/**
+	 * Initialize $wp_webfonts if it has not been set.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use wp_fonts() instead.
+	 * @deprecated 16.3.0 No longer functional. Do not use.
+	 *
+	 * @global WP_Webfonts $wp_webfonts
+	 *
+	 * @return WP_Webfonts WP_Webfonts instance.
+	 */
+	function wp_webfonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1' );
+
+		global $wp_webfonts;
+
+		if ( ! ( $wp_webfonts instanceof WP_Webfonts ) ) {
+			$wp_webfonts = new WP_Webfonts( wp_fonts() );
+		}
+
+		return $wp_webfonts;
+	}
+}
+
+if ( ! function_exists( 'wp_register_webfonts' ) ) {
+	/**
+	 * Registers one or more font-families and each of their variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use wp_register_fonts() instead.
+	 * @deprecated 16.3.0 Register is not supported.
+	 *
+	 * @return array Empty array.
+	 */
+	function wp_register_webfonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1' );
+		return array();
+	}
+}
+
+if ( ! function_exists( 'wp_register_webfont' ) ) {
+	/**
+	 * Registers a single webfont.
+	 *
+	 * @since X.X.X
+	 * @deprecated 14.9.1 Use wp_register_fonts().
+	 * @deprecated 16.3.0 Register is not supported.
+	 *
+	 * @return bool False.
+	 */
+	function wp_register_webfont() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 14.9.1' );
+		return false;
+	}
+}
+
+if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
+	/**
+	 * Enqueues one or more font family and all of its variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use wp_enqueue_fonts() instead.
+	 * @deprecated 16.3.0 Enqueue is not supported.
+	 */
+	function wp_enqueue_webfonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1' );
+	}
+}
+
+if ( ! function_exists( 'wp_enqueue_webfont' ) ) {
+	/**
+	 * Enqueue a single font family that has been registered beforehand.
+	 *
+	 * @since X.X.X
+	 * @deprecated 14.9.1 Use wp_enqueue_fonts() instead.
+	 * @deprecated 16.3.0 Enqueue is not supported.
+	 *
+	 * @return bool False.
+	 */
+	function wp_enqueue_webfont() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 14.9.1' );
+		return false;
+	}
+}
+
+if ( ! function_exists( 'wp_enqueue_webfont_variations' ) ) {
+	/**
+	 * Enqueues a specific set of web font variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use wp_enqueue_font_variations() instead.
+	 * @deprecated 16.3.0 No longer functional. Do not use.
+	 */
+	function wp_enqueue_webfont_variations() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1' );
+	}
+}
+
+if ( ! function_exists( 'wp_deregister_webfont_variation' ) ) {
+	/**
+	 * Deregisters a font variation.
+	 *
+	 * @since 14.9.1
+	 * @deprecated 15.1 Use wp_deregister_font_variation() instead.
+	 * @deprecated 16.3.0 Deregister is not supported.
+	 */
+	function wp_deregister_webfont_variation() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1' );
+	}
+}
+
+if ( ! function_exists( 'wp_get_webfont_providers' ) ) {
+	/**
+	 * Gets all registered providers.
+	 *
+	 * @since X.X.X
+	 * @deprecated 14.9.1 Use wp_fonts()->get_providers().
+	 * @deprecated 16.3.0 Providers are not supported.
+	 *
+	 * @return array Empty array.
+	 */
+	function wp_get_webfont_providers() {
+		_deprecated_function( __FUNCTION__, '14.9.1' );
+
+		return array();
+	}
+}
+
+if ( ! function_exists( 'wp_register_webfont_provider' ) ) {
+	/**
+	 * Registers a custom font service provider.
+	 *
+	 * @since X.X.X
+	 * @deprecated 15.1 Use wp_register_font_provider() instead.
+	 * @deprecated 16.3.0 Providers are not supported.
+	 *
+	 * @return bool False.
+	 */
+	function wp_register_webfont_provider() {
+		_deprecated_function( __FUNCTION__, 'GB 15.1', 'wp_register_font_provider' );
+		return false;
+	}
+}
+
+if ( ! function_exists( 'wp_print_webfonts' ) ) {
+	/**
+	 * Invokes each provider to process and print its styles.
+	 *
+	 * @since 14.9.1
+	 * @deprecated 15.1 Use wp_print_fonts() instead.
+	 * @deprecated 16.3.0 Webfonts API is not supported.
+	 *
+	 * @return array Empty array.
+	 */
+	function wp_print_webfonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 15.1', 'wp_print_font_faces' );
+		return array();
+	}
+}
+
+if ( ! function_exists( 'wp_fonts' ) ) {
+	/**
+	 * Initialize $wp_fonts if it has not been set.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Use Font Library and Font Face. Fonts API is not supported.
+	 *
+	 * @global WP_Fonts $wp_fonts
+	 *
+	 * @return WP_Fonts WP_Fonts instance.
+	 */
+	function wp_fonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+
+		global $wp_fonts;
+
+		if ( ! ( $wp_fonts instanceof WP_Fonts ) ) {
+			$wp_fonts = new WP_Fonts();
+		}
+
+		return $wp_fonts;
+	}
+}
+
+if ( ! function_exists( 'wp_register_fonts' ) ) {
+	/**
+	 * Registers one or more font-families and each of their variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Register is not supported.
+	 *
+	 * @return array Empty array.
+	 */
+	function wp_register_fonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+		return array();
+	}
+}
+
+if ( ! function_exists( 'wp_enqueue_fonts' ) ) {
+	/**
+	 * Enqueues one or more font family and all of its variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Enqueue is not supported.
+	 */
+	function wp_enqueue_fonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+	}
+}
+
+if ( ! function_exists( 'wp_enqueue_font_variations' ) ) {
+	/**
+	 * Enqueues a specific set of font variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Enqueue is not supported.
+	 */
+	function wp_enqueue_font_variations() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+	}
+}
+
+if ( ! function_exists( 'wp_deregister_font_family' ) ) {
+	/**
+	 * Deregisters a font family and all of its registered variations.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Deregister is not supported.
+	 */
+	function wp_deregister_font_family() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+	}
+}
+
+if ( ! function_exists( 'wp_deregister_font_variation' ) ) {
+	/**
+	 * Deregisters a font variation.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Deregister is not supported.
+	 */
+	function wp_deregister_font_variation() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+	}
+}
+
+if ( ! function_exists( 'wp_register_font_provider' ) ) {
+	/**
+	 * Registers a custom font service provider.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 Providers are not supported.
+	 *
+	 * @return bool False.
+	 */
+	function wp_register_font_provider() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3' );
+		return false;
+	}
+}
+
+if ( ! function_exists( 'wp_print_fonts' ) ) {
+	/**
+	 * Invokes each provider to process and print its styles.
+	 *
+	 * @since X.X.X
+	 * @deprecated 16.3.0 For classic themes, use wp_print_font_faces(). For all other sites,
+	 *                    Font Face will automatically print all fonts in theme.json merged data layer,
+	 *                    including in theme and user activated fonts from the Font Library.
+	 *
+	 * @return array Empty array.
+	 */
+	function wp_print_fonts() {
+		_deprecated_function( __FUNCTION__, 'Gutenberg 16.3', 'wp_print_font_faces' );
+		return array();
+	}
+}
diff --git a/lib/experimental/full-page-client-side-navigation.php b/lib/experimental/full-page-client-side-navigation.php
new file mode 100644
index 00000000000000..621502912a668a
--- /dev/null
+++ b/lib/experimental/full-page-client-side-navigation.php
@@ -0,0 +1,101 @@
+<?php
+/**
+ * Registers full page client-side navigation option using the Interactivity API and adds the necessary directives.
+ */
+
+/**
+ * Enqueue the interactivity router script.
+ */
+function _gutenberg_enqueue_interactivity_router() {
+	// Set the navigation mode to full page client-side navigation.
+	wp_interactivity_config( 'core/router', array( 'navigationMode' => 'fullPage' ) );
+	wp_enqueue_script_module( '@wordpress/interactivity-router' );
+}
+
+add_action( 'wp_enqueue_scripts', '_gutenberg_enqueue_interactivity_router' );
+
+/**
+ * Set enhancedPagination attribute for query loop when the experiment is enabled.
+ *
+ * @param array $parsed_block The parsed block.
+ *
+ * @return array The same parsed block with the modified attribute.
+ */
+function _gutenberg_add_enhanced_pagination_to_query_block( $parsed_block ) {
+	if ( 'core/query' !== $parsed_block['blockName'] ) {
+		return $parsed_block;
+	}
+
+	$parsed_block['attrs']['enhancedPagination'] = true;
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', '_gutenberg_add_enhanced_pagination_to_query_block' );
+
+/**
+ * Adds client-side navigation directives to BODY tag.
+ *
+ * Note: This should probably be done per site, not by default when this option is enabled.
+ *
+ * @param string $response_body The response body.
+ *
+ * @return string The rendered template with modified BODY attributes.
+ */
+function _gutenberg_add_client_side_navigation_directives( $response_body ) {
+	$is_html_content_type = false;
+	foreach ( headers_list() as $header ) {
+		$header_parts = preg_split( '/\s*[:;]\s*/', strtolower( $header ) );
+		if ( count( $header_parts ) >= 2 && 'content-type' === $header_parts[0] ) {
+			$is_html_content_type = in_array( $header_parts[1], array( 'text/html', 'application/xhtml+xml' ), true );
+		}
+	}
+	if ( ! $is_html_content_type ) {
+		return $response_body;
+	}
+
+	$p = new WP_HTML_Tag_Processor( $response_body );
+	if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
+		$p->set_attribute( 'data-wp-interactive', 'core/experimental' );
+		$p->set_attribute( 'data-wp-context', '{}' );
+		$response_body = $p->get_updated_html();
+	}
+	return $response_body;
+}
+
+// TODO: Explore moving this to the server directive processing.
+add_filter( 'gutenberg_template_output_buffer', '_gutenberg_add_client_side_navigation_directives' );
+
+/**
+ * Starts output buffering at the end of the 'template_include' filter.
+ *
+ * This is to implement #43258 in core.
+ *
+ * This is a hack which would eventually be replaced with something like this in wp-includes/template-loader.php:
+ *
+ *          $template = apply_filters( 'template_include', $template );
+ *     +    ob_start( 'wp_template_output_buffer_callback' );
+ *          if ( $template ) {
+ *              include $template;
+ *          } elseif ( current_user_can( 'switch_themes' ) ) {
+ *
+ * @link https://core.trac.wordpress.org/ticket/43258
+ *
+ * @param string $passthrough Value for the template_include filter which is passed through.
+ *
+ * @return string Unmodified value of $passthrough.
+ */
+function _gutenberg_buffer_template_output( string $passthrough ): string {
+	ob_start(
+		static function ( string $output ): string {
+			/**
+			 * Filters the template output buffer prior to sending to the client.
+			 *
+			 * @param string $output Output buffer.
+			 * @return string Filtered output buffer.
+			 */
+			return (string) apply_filters( 'gutenberg_template_output_buffer', $output );
+		}
+	);
+	return $passthrough;
+}
+add_filter( 'template_include', '_gutenberg_buffer_template_output', PHP_INT_MAX );
diff --git a/lib/experimental/html/class-wp-html-attribute-token.php b/lib/experimental/html/class-wp-html-attribute-token.php
deleted file mode 100644
index 7b3d5718723581..00000000000000
--- a/lib/experimental/html/class-wp-html-attribute-token.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<?php
-/**
- * HTML Tag Processor: Attribute token structure class.
- *
- * @package WordPress
- * @subpackage HTML
- * @since 6.2.0
- */
-
-/**
- * Data structure for the attribute token that allows to drastically improve performance.
- *
- * This class is for internal usage of the WP_HTML_Tag_Processor class.
- *
- * @access private
- * @since 6.2.0
- *
- * @see WP_HTML_Tag_Processor
- */
-class WP_HTML_Attribute_Token {
-	/**
-	 * Attribute name.
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	public $name;
-
-	/**
-	 * Attribute value.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $value_starts_at;
-
-	/**
-	 * How many bytes the value occupies in the input HTML.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $value_length;
-
-	/**
-	 * The string offset where the attribute name starts.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $start;
-
-	/**
-	 * The string offset after the attribute value or its name.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $end;
-
-	/**
-	 * Whether the attribute is a boolean attribute with value `true`.
-	 *
-	 * @since 6.2.0
-	 * @var bool
-	 */
-	public $is_true;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name         Attribute name.
-	 * @param int    $value_start  Attribute value.
-	 * @param int    $value_length Number of bytes attribute value spans.
-	 * @param int    $start        The string offset where the attribute name starts.
-	 * @param int    $end          The string offset after the attribute value or its name.
-	 * @param bool   $is_true      Whether the attribute is a boolean attribute with true value.
-	 */
-	public function __construct( $name, $value_start, $value_length, $start, $end, $is_true ) {
-		$this->name            = $name;
-		$this->value_starts_at = $value_start;
-		$this->value_length    = $value_length;
-		$this->start           = $start;
-		$this->end             = $end;
-		$this->is_true         = $is_true;
-	}
-}
diff --git a/lib/experimental/html/class-wp-html-tag-processor.php b/lib/experimental/html/class-wp-html-tag-processor.php
deleted file mode 100644
index acdf8d97a95a96..00000000000000
--- a/lib/experimental/html/class-wp-html-tag-processor.php
+++ /dev/null
@@ -1,1616 +0,0 @@
-<?php
-/**
- * Scans through an HTML document to find specific tags, then
- * transforms those tags by adding, removing, or updating the
- * values of the HTML attributes within that tag (opener).
- *
- * Does not fully parse HTML or _recurse_ into the HTML structure
- * Instead this scans linearly through a document and only parses
- * the HTML tag openers.
- *
- * @TODO: Unify language around "currently-opened tag."
- * @TODO: Organize unit test cases into normative tests, edge-case tests, regression tests.
- * @TODO: Clean up attribute token class after is_true addition
- * @TODO: Prune whitespace when removing classes/attributes: e.g. "a b c" -> "c" not " c"
- * @TODO: Skip over `/` in attributes area, split attribute names by `/`
- * @TODO: Decode HTML references/entities in class names when matching.
- *        E.g. match having class `1<"2` needs to recognize `class="1&lt;&quot;2"`.
- * @TODO: Decode character references in `get_attribute()`
- * @TODO: Properly escape attribute value in `set_attribute()`
- * @TODO: Add slow mode to escape character entities in CSS class names?
- *        (This requires a custom decoder since `html_entity_decode()`
- *        doesn't handle attribute character reference decoding rules.
- *
- * @package WordPress
- * @subpackage HTML
- * @since 6.2.0
- */
-
-/**
- * Processes an input HTML document by applying a specified set
- * of patches to that input. Tokenizes HTML but does not fully
- * parse the input document.
- *
- * ## Usage
- *
- * Use of this class requires three steps:
- *
- *  1. Create a new class instance with your input HTML document.
- *  2. Find the tag(s) you are looking for.
- *  3. Request changes to the attributes in those tag(s).
- *
- * Example:
- * ```php
- *     $tags = new WP_HTML_Tag_Processor( $html );
- *     if ( $tags->next_tag( [ 'tag_name' => 'option' ] ) ) {
- *         $tags->set_attribute( 'selected', true );
- *     }
- * ```
- *
- * ### Finding tags
- *
- * The `next_tag()` function moves the internal cursor through
- * your input HTML document until it finds a tag meeting any of
- * the supplied restrictions in the optional query argument. If
- * no argument is provided then it will find the next HTML tag,
- * regardless of what kind it is.
- *
- * If you want to _find whatever the next tag is_:
- * ```php
- *     $tags->next_tag();
- * ```
- *
- * | Goal                                                      | Query                                                                      |
- * |-----------------------------------------------------------|----------------------------------------------------------------------------|
- * | Find any tag.                                             | `$tags->next_tag();`                                                       |
- * | Find next image tag.                                      | `$tags->next_tag( [ 'tag_name' => 'img' ] );`                              |
- * | Find next tag containing the `fullwidth` CSS class.       | `$tags->next_tag( [ 'class_name' => 'fullwidth' ] );`                      |
- * | Find next image tag containing the `fullwidth` CSS class. | `$tags->next_tag( [ 'tag_name' => 'img', 'class_name' => 'fullwidth' ] );` |
- *
- * If a tag was found meeting your criteria then `next_tag()`
- * will return `true` and you can proceed to modify it. If it
- * returns `false`, however, it failed to find the tag and
- * moved the cursor to the end of the file.
- *
- * Once the cursor reaches the end of the file the processor
- * is done and if you want to reach an earlier tag you will
- * need to recreate the processor and start over. The internal
- * cursor can only proceed forward, never backing up.
- *
- * #### Custom queries
- *
- * Sometimes it's necessary to further inspect an HTML tag than
- * the query syntax here permits. In these cases one may further
- * inspect the search results using the read-only functions
- * provided by the processor or external state or variables.
- *
- * Example:
- * ```php
- *     // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
- *     $remaining_count = 5;
- *     while ( $remaining_count > 0 && $tags->next_tag() ) {
- *         if (
- *              ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
- *              'jazzy' === $tags->get_attribute( 'data-style' )
- *         ) {
- *             $tags->add_class( 'theme-style-everest-jazz' );
- *             $remaining_count--;
- *         }
- *     }
- * ```
- *
- * `get_attribute()` will return `null` if the attribute wasn't present
- * on the tag when it was called. It may return `""` (the empty string)
- * in cases where the attribute was present but its value was empty.
- * For boolean attributes, those whose name is present but no value is
- * given, it will return `true` (the only way to set `false` for an
- * attribute is to remove it).
- *
- * ### Modifying HTML attributes for a found tag
- *
- * Once you've found the start of an opening tag you can modify
- * any number of the attributes on that tag. You can set a new
- * value for an attribute, remove the entire attribute, or do
- * nothing and move on to the next opening tag.
- *
- * Example:
- * ```php
- *     if ( $tags->next_tag( [ 'class' => 'wp-group-block' ] ) ) {
- *         $tags->set_attribute( 'title', 'This groups the contained content.' );
- *         $tags->remove_attribute( 'data-test-id' );
- *     }
- * ```
- *
- * If `set_attribute()` is called for an existing attribute it will
- * overwrite the existing value. Similarly, calling `remove_attribute()`
- * for a non-existing attribute has no effect on the document. Both
- * of these methods are safe to call without knowing if a given attribute
- * exists beforehand.
- *
- * ### Modifying CSS classes for a found tag
- *
- * The tag processor treats the `class` attribute as a special case.
- * Because it's a common operation to add or remove CSS classes you
- * can do so using this interface.
- *
- * As with attribute values, adding or removing CSS classes is a safe
- * operation that doesn't require checking if the attribute or class
- * exists before making changes. If removing the only class then the
- * entire `class` attribute will be removed.
- *
- * Example:
- * ```php
- *     // from `<span>Yippee!</span>`
- *     //   to `<span class="is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<span class="excited">Yippee!</span>`
- *     //   to `<span class="excited is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<span class="is-active heavy-accent">Yippee!</span>`
- *     //   to `<span class="is-active heavy-accent">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<input type="text" class="is-active rugby not-disabled" length="24">`
- *     //   to `<input type="text" class="is-active not-disabled" length="24">
- *     $tags->remove_class( 'rugby' );
- *
- *     // from `<input type="text" class="rugby" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
- *
- *     // from `<input type="text" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
- * ```
- *
- * ## Design limitations
- *
- * @TODO: Expand this section
- *
- *  - no nesting: cannot match open and close tag
- *  - only move forward, never backward
- *  - class names not decoded if they contain character references
- *  - only secures against HTML escaping issues; requires
- *    manually sanitizing or escaping values based on the needs of
- *    each individual attribute, since different attributes have
- *    different needs.
- *
- * @since 6.2.0
- */
-class WP_HTML_Tag_Processor {
-
-	/**
-	 * The HTML document to parse.
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	private $html;
-
-	/**
-	 * The last query passed to next_tag().
-	 *
-	 * @since 6.2.0
-	 * @var array|null
-	 */
-	private $last_query;
-
-	/**
-	 * The tag name this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var string|null
-	 */
-	private $sought_tag_name;
-
-	/**
-	 * The CSS class name this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var string|null
-	 */
-	private $sought_class_name;
-
-	/**
-	 * The match offset this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var int|null
-	 */
-	private $sought_match_offset;
-
-	/**
-	 * Whether to visit tag closers, e.g. </div>, when walking an input document.
-	 *
-	 * @since 6.2.0
-	 * @var boolean
-	 */
-	private $stop_on_tag_closers;
-
-	/**
-	 * The updated HTML document.
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	private $updated_html = '';
-
-	/**
-	 * How many bytes from the original HTML document were already read.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	private $parsed_bytes = 0;
-
-	/**
-	 * How many bytes from the original HTML document were already treated
-	 * with the requested replacements.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	private $updated_bytes = 0;
-
-	/**
-	 * Byte offset in input document where current tag name starts.
-	 *
-	 * Example:
-	 * ```
-	 *   <div id="test">...
-	 *   01234
-	 *    - tag name starts at 1
-	 * ```
-	 *
-	 * @since 6.2.0
-	 * @var ?int
-	 */
-	private $tag_name_starts_at;
-
-	/**
-	 * Byte length of current tag name.
-	 *
-	 * Example:
-	 * ```
-	 *   <div id="test">...
-	 *   01234
-	 *    --- tag name length is 3
-	 * ```
-	 *
-	 * @since 6.2.0
-	 * @var ?int
-	 */
-	private $tag_name_length;
-
-	/**
-	 * Byte offset in input document where current tag token ends.
-	 *
-	 * Example:
-	 * ```
-	 *   <div id="test">...
-	 *   0         1   |
-	 *   01234567890123456
-	 *    --- tag name ends at 14
-	 * ```
-	 *
-	 * @since 6.2.0
-	 * @var ?int
-	 */
-	private $tag_ends_at;
-
-	/**
-	 * Whether the current tag is an opening tag, e.g. <div>, or a closing tag, e.g. </div>.
-	 *
-	 * @var boolean
-	 */
-	private $is_closing_tag;
-
-	/**
-	 * Lazily-built index of attributes found within an HTML tag, keyed by the attribute name.
-	 *
-	 * Example:
-	 * <code>
-	 *     // supposing the parser is working through this content
-	 *     // and stops after recognizing the `id` attribute
-	 *     // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
-	 *     //                 ^ parsing will continue from this point
-	 *     $this->attributes = [
-	 *         'id' => new WP_HTML_Attribute_Match( 'id', null, 6, 17 )
-	 *     ];
-	 *
-	 *     // when picking up parsing again, or when asking to find the
-	 *     // `class` attribute we will continue and add to this array
-	 *     $this->attributes = [
-	 *         'id'    => new WP_HTML_Attribute_Match( 'id', null, 6, 17 ),
-	 *         'class' => new WP_HTML_Attribute_Match( 'class', 'outline', 18, 32 )
-	 *     ];
-	 *
-	 *     // Note that only the `class` attribute value is stored in the index.
-	 *     // That's because it is the only value used by this class at the moment.
-	 * </code>
-	 *
-	 * @since 6.2.0
-	 * @var WP_HTML_Attribute_Token[]
-	 */
-	private $attributes = array();
-
-	/**
-	 * Which class names to add or remove from a tag.
-	 *
-	 * These are tracked separately from attribute updates because they are
-	 * semantically distinct, whereas this interface exists for the common
-	 * case of adding and removing class names while other attributes are
-	 * generally modified as with DOM `setAttribute` calls.
-	 *
-	 * When modifying an HTML document these will eventually be collapsed
-	 * into a single lexical update to replace the `class` attribute.
-	 *
-	 * Example:
-	 * <code>
-	 *     // Add the `WP-block-group` class, remove the `WP-group` class.
-	 *     $class_changes = [
-	 *         // Indexed by a comparable class name
-	 *         'wp-block-group' => new WP_Class_Name_Operation( 'WP-block-group', WP_Class_Name_Operation::ADD ),
-	 *         'wp-group'       => new WP_Class_Name_Operation( 'WP-group', WP_Class_Name_Operation::REMOVE )
-	 *     ];
-	 * </code>
-	 *
-	 * @since 6.2.0
-	 * @var bool[]
-	 */
-	private $classname_updates = array();
-
-	const ADD_CLASS    = true;
-	const REMOVE_CLASS = false;
-	const SKIP_CLASS   = null;
-
-	/**
-	 * Lexical replacements to apply to input HTML document.
-	 *
-	 * HTML modifications collapse into lexical replacements in order to
-	 * provide an efficient mechanism to update documents lazily and in
-	 * order to support a variety of semantic modifications without
-	 * building a complicated parsing machinery. That is, it's up to
-	 * the calling class to generate the lexical modification from the
-	 * semantic change requested.
-	 *
-	 * Example:
-	 * <code>
-	 *     // Replace an attribute stored with a new value, indices
-	 *     // sourced from the lazily-parsed HTML recognizer.
-	 *     $start = $attributes['src']->start;
-	 *     $end   = $attributes['src']->end;
-	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $end, get_the_post_thumbnail_url() );
-	 *
-	 *     // Correspondingly, something like this
-	 *     // will appear in the replacements array.
-	 *     $replacements = [
-	 *         WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
-	 *     ];
-	 * </code>
-	 *
-	 * @since 6.2.0
-	 * @var WP_HTML_Text_Replacement[]
-	 */
-	private $attribute_updates = array();
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $html HTML to process.
-	 */
-	public function __construct( $html ) {
-		$this->html = $html;
-	}
-
-	/**
-	 * Finds the next tag matching the $query.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param array|string $query {
-	 *     Which tag name to find, having which class, etc.
-	 *
-	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
-	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
-	 *                                     0 for "first" tag, 2 for "third," etc.
-	 *                                     Defaults to first tag.
-	 *     @type string|null $class_name   Tag must contain this whole class name to match.
-	 * }
-	 * @return boolean Whether a tag was matched.
-	 */
-	public function next_tag( $query = null ) {
-		$this->parse_query( $query );
-		$already_found = 0;
-
-		do {
-			if ( $this->parsed_bytes >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			/*
-			 * Unfortunately we can't try to search for only the tag name we want because that might
-			 * lead us to skip over other tags and lose track of our place. So we need to search for
-			 * _every_ tag and then check after we find one if it's the one we are looking for.
-			 */
-			if ( false === $this->parse_next_tag() ) {
-				$this->parsed_bytes = strlen( $this->html );
-
-				return false;
-			}
-
-			while ( $this->parse_next_attribute() ) {
-				continue;
-			}
-
-			$tag_ends_at = strpos( $this->html, '>', $this->parsed_bytes );
-			if ( false === $tag_ends_at ) {
-				return false;
-			}
-			$this->tag_ends_at  = $tag_ends_at;
-			$this->parsed_bytes = $tag_ends_at;
-
-			if ( $this->matches() ) {
-				++$already_found;
-			}
-
-			// Avoid copying the tag name string when possible.
-			$t = $this->html[ $this->tag_name_starts_at ];
-			if ( 's' === $t || 'S' === $t || 't' === $t || 'T' === $t ) {
-				$tag_name = $this->get_tag();
-
-				if ( 'SCRIPT' === $tag_name && ! $this->skip_script_data() ) {
-					$this->parsed_bytes = strlen( $this->html );
-					return false;
-				} elseif (
-					( 'TEXTAREA' === $tag_name || 'TITLE' === $tag_name ) &&
-					! $this->skip_rcdata( $tag_name )
-				) {
-					$this->parsed_bytes = strlen( $this->html );
-					return false;
-				}
-			}
-		} while ( $already_found < $this->sought_match_offset );
-
-		return true;
-	}
-
-	/**
-	 * Skips the contents of the title and textarea tags until an appropriate
-	 * tag closer is found.
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
-	 * @param string $tag_name – the lowercase tag name which will close the RCDATA region.
-	 * @since 6.2.0
-	 */
-	private function skip_rcdata( $tag_name ) {
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$tag_length = strlen( $tag_name );
-
-		$at = $this->parsed_bytes;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at = strpos( $this->html, '</', $at );
-
-			// If we have no possible tag closer then fail.
-			if ( false === $at || ( $at + $tag_length ) >= $doc_length ) {
-				$this->parsed_bytes = $doc_length;
-				return false;
-			}
-
-			$at += 2;
-
-			/*
-			 * We have to find a case-insensitive match to the tag name.
-			 * Note also that since tag names are limited to US-ASCII
-			 * characters we can ignore any kind of Unicode normalizing
-			 * forms when comparing. If we get a non-ASCII character it
-			 * will never be a match.
-			 */
-			for ( $i = 0; $i < $tag_length; $i++ ) {
-				$tag_char  = $tag_name[ $i ];
-				$html_char = $html[ $at + $i ];
-
-				if ( $html_char !== $tag_char && strtoupper( $html_char ) !== $tag_char ) {
-					$at += $i;
-					continue 2;
-				}
-			}
-
-			$at                += $tag_length;
-			$this->parsed_bytes = $at;
-
-			/*
-			 * Ensure we terminate the tag name, otherwise we might,
-			 * for example, accidentally match the sequence
-			 * "</textarearug>" for "</textarea>".
-			 */
-			$c = $html[ $at ];
-			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
-				continue;
-			}
-
-			while ( $this->parse_next_attribute() ) {
-				continue;
-			}
-			$at = $this->parsed_bytes;
-			if ( $at >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			if ( '>' === $html[ $at ] || '/' === $html[ $at ] ) {
-				++$this->parsed_bytes;
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Skips the contents of <script> tags.
-	 *
-	 * @since 6.2.0
-	 */
-	private function skip_script_data() {
-		$state      = 'unescaped';
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$at         = $this->parsed_bytes;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at += strcspn( $html, '-<', $at );
-
-			/*
-			 * Regardless of the state we're in, a "-->"
-			 * will break out of it and bring us back
-			 * into the normal unescaped script mode.
-			 */
-			if (
-				$at + 2 < $doc_length &&
-				'-' === $html[ $at ] &&
-				'-' === $html[ $at + 1 ] &&
-				'>' === $html[ $at + 2 ]
-			) {
-				$at   += 3;
-				$state = 'unescaped';
-				continue;
-			}
-
-			// Everything past here has to start with "<".
-			if ( $at + 1 >= $doc_length || '<' !== $html[ $at++ ] ) {
-				continue;
-			}
-
-			/*
-			 * On the other hand, "<!--" only enters the
-			 * escaped mode if we aren't already there.
-			 *
-			 * Inside the escaped modes it's ignored and
-			 * shouldn't ever pull us out of double-escaped
-			 * and back into escaped.
-			 *
-			 * We'll continue parsing past it regardless of
-			 * our state though to avoid backtracking once
-			 * we recognize the snippet.
-			 */
-			if (
-				$at + 2 < $doc_length &&
-				'!' === $html[ $at ] &&
-				'-' === $html[ $at + 1 ] &&
-				'-' === $html[ $at + 2 ]
-			) {
-				$at   += 3;
-				$state = 'unescaped' === $state ? 'escaped' : $state;
-				continue;
-			}
-
-			if ( '/' === $html[ $at ] ) {
-				$is_closing = true;
-				++$at;
-			} else {
-				$is_closing = false;
-			}
-
-			/*
-			 * At this point we're only examining state-changes based off of
-			 * the <script> or </script> tags, so if we're not seeing the
-			 * start of one of these tokens we can proceed to the next
-			 * potential match in the text.
-			 */
-			if ( ! (
-				$at + 6 < $doc_length &&
-				( 's' === $html[ $at ] || 'S' === $html[ $at ] ) &&
-				( 'c' === $html[ $at + 1 ] || 'C' === $html[ $at + 1 ] ) &&
-				( 'r' === $html[ $at + 2 ] || 'R' === $html[ $at + 2 ] ) &&
-				( 'i' === $html[ $at + 3 ] || 'I' === $html[ $at + 3 ] ) &&
-				( 'p' === $html[ $at + 4 ] || 'P' === $html[ $at + 4 ] ) &&
-				( 't' === $html[ $at + 5 ] || 'T' === $html[ $at + 5 ] )
-			) ) {
-				++$at;
-				continue;
-			}
-
-			/*
-			 * We also have to make sure we terminate the script tag opener/closer
-			 * to avoid making partial matches on strings like `<script123`.
-			 */
-			if ( $at + 6 >= $doc_length ) {
-				continue;
-			}
-			$at += 6;
-			$c   = $html[ $at ];
-			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
-				++$at;
-				continue;
-			}
-
-			if ( 'escaped' === $state && ! $is_closing ) {
-				$state = 'double-escaped';
-				continue;
-			}
-
-			if ( 'double-escaped' === $state && $is_closing ) {
-				$state = 'escaped';
-				continue;
-			}
-
-			if ( $is_closing ) {
-				$this->parsed_bytes = $at;
-				if ( $this->parsed_bytes >= $doc_length ) {
-					return false;
-				}
-
-				while ( $this->parse_next_attribute() ) {
-					continue;
-				}
-
-				if ( '>' === $html[ $this->parsed_bytes ] ) {
-					++$this->parsed_bytes;
-					return true;
-				}
-			}
-
-			++$at;
-		}
-
-		return false;
-	}
-
-	/**
-	 * Parses the next tag.
-	 *
-	 * @since 6.2.0
-	 */
-	private function parse_next_tag() {
-		$this->after_tag();
-
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$at         = $this->parsed_bytes;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at = strpos( $html, '<', $at );
-			if ( false === $at ) {
-				return false;
-			}
-
-			if ( '/' === $this->html[ $at + 1 ] ) {
-				$this->is_closing_tag = true;
-				$at++;
-			} else {
-				$this->is_closing_tag = false;
-			}
-
-			/*
-			 * HTML tag names must start with [a-zA-Z] otherwise they are not tags.
-			 * For example, "<3" is rendered as text, not a tag opener. This means
-			 * if we have at least one letter following the "<" then we _do_ have
-			 * a tag opener and can process it as such. This is more common than
-			 * HTML comments, DOCTYPE tags, and other structure starting with "<"
-			 * so it's good to check first for the presence of the tag.
-			 *
-			 * Reference:
-			 * * https://html.spec.whatwg.org/multipage/parsing.html#data-state
-			 * * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-			 */
-			$tag_name_prefix_length = strspn( $html, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', $at + 1 );
-			if ( $tag_name_prefix_length > 0 ) {
-				++$at;
-				$this->tag_name_length    = $tag_name_prefix_length + strcspn( $html, " \t\f\r\n/>", $at + $tag_name_prefix_length );
-				$this->tag_name_starts_at = $at;
-				$this->parsed_bytes       = $at + $this->tag_name_length;
-				return true;
-			}
-
-			// If we didn't find a tag opener, and we can't be
-			// transitioning into different markup states, then
-			// we can abort because there aren't any more tags.
-			if ( $at + 1 >= strlen( $html ) ) {
-				return false;
-			}
-
-			// <! transitions to markup declaration open state
-			// https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state
-			if ( '!' === $html[ $at + 1 ] ) {
-				// <!-- transitions to a bogus comment state – we can skip to the nearest -->
-				// https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				if (
-					strlen( $html ) > $at + 3 &&
-					'-' === $html[ $at + 2 ] &&
-					'-' === $html[ $at + 3 ]
-				) {
-					$closer_at = strpos( $html, '-->', $at + 4 );
-					if ( false === $closer_at ) {
-						return false;
-					}
-
-					$at = $closer_at + 3;
-					continue;
-				}
-
-				// <![CDATA[ transitions to CDATA section state – we can skip to the nearest ]]>
-				// The CDATA is case-sensitive.
-				// https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				if (
-					strlen( $html ) > $at + 8 &&
-					'[' === $html[ $at + 2 ] &&
-					'C' === $html[ $at + 3 ] &&
-					'D' === $html[ $at + 4 ] &&
-					'A' === $html[ $at + 5 ] &&
-					'T' === $html[ $at + 6 ] &&
-					'A' === $html[ $at + 7 ] &&
-					'[' === $html[ $at + 8 ]
-				) {
-					$closer_at = strpos( $html, ']]>', $at + 9 );
-					if ( false === $closer_at ) {
-						return false;
-					}
-
-					$at = $closer_at + 3;
-					continue;
-				}
-
-				/*
-				 * <!DOCTYPE transitions to DOCTYPE state – we can skip to the nearest >
-				 * These are ASCII-case-insensitive.
-				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				 */
-				if (
-					strlen( $html ) > $at + 8 &&
-					'D' === strtoupper( $html[ $at + 2 ] ) &&
-					'O' === strtoupper( $html[ $at + 3 ] ) &&
-					'C' === strtoupper( $html[ $at + 4 ] ) &&
-					'T' === strtoupper( $html[ $at + 5 ] ) &&
-					'Y' === strtoupper( $html[ $at + 6 ] ) &&
-					'P' === strtoupper( $html[ $at + 7 ] ) &&
-					'E' === strtoupper( $html[ $at + 8 ] )
-				) {
-					$closer_at = strpos( $html, '>', $at + 9 );
-					if ( false === $closer_at ) {
-						return false;
-					}
-
-					$at = $closer_at + 1;
-					continue;
-				}
-
-				/*
-				 * Anything else here is an incorrectly-opened comment and transitions
-				 * to the bogus comment state - we can skip to the nearest >.
-				 */
-				$at = strpos( $html, '>', $at + 1 );
-				continue;
-			}
-
-			/*
-			 * <? transitions to a bogus comment state – we can skip to the nearest >
-			 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-			 */
-			if ( '?' === $html[ $at + 1 ] ) {
-				$closer_at = strpos( $html, '>', $at + 2 );
-				if ( false === $closer_at ) {
-					return false;
-				}
-
-				$at = $closer_at + 1;
-				continue;
-			}
-
-			++$at;
-		}
-
-		return false;
-	}
-
-	/**
-	 * Parses the next attribute.
-	 *
-	 * @since 6.2.0
-	 */
-	private function parse_next_attribute() {
-		// Skip whitespace and slashes.
-		$this->parsed_bytes += strspn( $this->html, " \t\f\r\n/", $this->parsed_bytes );
-		if ( $this->parsed_bytes >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		/*
-		 * Treat the equal sign ("=") as a part of the attribute name if it is the
-		 * first encountered byte:
-		 * https://html.spec.whatwg.org/multipage/parsing.html#before-attribute-name-state
-		 */
-		$name_length = '=' === $this->html[ $this->parsed_bytes ]
-			? 1 + strcspn( $this->html, "=/> \t\f\r\n", $this->parsed_bytes + 1 )
-			: strcspn( $this->html, "=/> \t\f\r\n", $this->parsed_bytes );
-
-		// No attribute, just tag closer.
-		if ( 0 === $name_length || $this->parsed_bytes + $name_length >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		$attribute_start     = $this->parsed_bytes;
-		$attribute_name      = substr( $this->html, $attribute_start, $name_length );
-		$this->parsed_bytes += $name_length;
-		if ( $this->parsed_bytes >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		$this->skip_whitespace();
-		if ( $this->parsed_bytes >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		$has_value = '=' === $this->html[ $this->parsed_bytes ];
-		if ( $has_value ) {
-			++$this->parsed_bytes;
-			$this->skip_whitespace();
-			if ( $this->parsed_bytes >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			switch ( $this->html[ $this->parsed_bytes ] ) {
-				case "'":
-				case '"':
-					$quote              = $this->html[ $this->parsed_bytes ];
-					$value_start        = $this->parsed_bytes + 1;
-					$value_length       = strcspn( $this->html, $quote, $value_start );
-					$attribute_end      = $value_start + $value_length + 1;
-					$this->parsed_bytes = $attribute_end;
-					break;
-
-				default:
-					$value_start        = $this->parsed_bytes;
-					$value_length       = strcspn( $this->html, "> \t\f\r\n", $value_start );
-					$attribute_end      = $value_start + $value_length;
-					$this->parsed_bytes = $attribute_end;
-			}
-		} else {
-			$value_start   = $this->parsed_bytes;
-			$value_length  = 0;
-			$attribute_end = $attribute_start + $name_length;
-		}
-
-		if ( $attribute_end >= strlen( $this->html ) ) {
-			return false;
-		}
-
-		if ( $this->is_closing_tag ) {
-			return true;
-		}
-
-		// If an attribute is listed many times, only use the first declaration and ignore the rest.
-		if ( ! array_key_exists( $attribute_name, $this->attributes ) ) {
-			$this->attributes[ $attribute_name ] = new WP_HTML_Attribute_Token(
-				$attribute_name,
-				$value_start,
-				$value_length,
-				$attribute_start,
-				$attribute_end,
-				! $has_value
-			);
-		}
-
-		return $this->attributes[ $attribute_name ];
-	}
-
-	/**
-	 * Move the pointer past any immediate successive whitespace.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return void
-	 */
-	private function skip_whitespace() {
-		$this->parsed_bytes += strspn( $this->html, " \t\f\r\n", $this->parsed_bytes );
-	}
-
-	/**
-	 * Applies attribute updates and cleans up once a tag is fully parsed.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return void
-	 */
-	private function after_tag() {
-		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
-		$this->tag_name_starts_at = null;
-		$this->tag_name_length    = null;
-		$this->tag_ends_at        = null;
-		$this->is_closing_tag     = null;
-		$this->attributes         = array();
-	}
-
-	/**
-	 * Converts class name updates into tag attributes updates
-	 * (they are accumulated in different data formats for performance).
-	 *
-	 * This method is only meant to run right before the attribute updates are applied.
-	 * The behavior in all other cases is undefined.
-	 *
-	 * @return void
-	 * @since 6.2.0
-	 *
-	 * @see $classname_updates
-	 * @see $attribute_updates
-	 */
-	private function class_name_updates_to_attributes_updates() {
-		if ( count( $this->classname_updates ) === 0 || isset( $this->attribute_updates['class'] ) ) {
-			$this->classname_updates = array();
-			return;
-		}
-
-		$existing_class = isset( $this->attributes['class'] )
-			? substr( $this->html, $this->attributes['class']->value_starts_at, $this->attributes['class']->value_length )
-			: '';
-
-		/**
-		 * Updated "class" attribute value.
-		 *
-		 * This is incrementally built as we scan through the existing class
-		 * attribute, omitting removed classes as we do so, and then appending
-		 * added classes at the end. Only when we're done processing will the
-		 * value contain the final new value.
-
-		 * @var string
-		 */
-		$class = '';
-
-		/**
-		 * Tracks the cursor position in the existing class
-		 * attribute value where we're currently parsing.
-		 *
-		 * @var integer
-		 */
-		$at = 0;
-
-		/**
-		 * Indicates if we have made any actual modifications to the existing
-		 * class attribute value, used to short-circuit string copying.
-		 *
-		 * It's possible that we are intending to remove certain classes and
-		 * add others in such a way that we don't modify the existing value
-		 * because calls to `add_class()` and `remove_class()` occur
-		 * independent of the input values sent to the WP_HTML_Tag_Processor. That is, we
-		 * might call `remove_class()` for a class that isn't already present
-		 * and we might call `add_class()` for one that is, in which case we
-		 * wouldn't need to break apart the string and rebuild it.
-		 *
-		 * This flag is set upon the first change that requires a string update.
-		 *
-		 * @var boolean
-		 */
-		$modified = false;
-
-		// Remove unwanted classes by only copying the new ones.
-		$existing_class_length = strlen( $existing_class );
-		while ( $at < $existing_class_length ) {
-			// Skip to the first non-whitespace character.
-			$ws_at     = $at;
-			$ws_length = strspn( $existing_class, " \t\f\r\n", $ws_at );
-			$at       += $ws_length;
-
-			// Capture the class name – it's everything until the next whitespace.
-			$name_length = strcspn( $existing_class, " \t\f\r\n", $at );
-			if ( 0 === $name_length ) {
-				// We're done, no more class names.
-				break;
-			}
-
-			$name = substr( $existing_class, $at, $name_length );
-			$at  += $name_length;
-
-			// If this class is marked for removal, start processing the next one.
-			$remove_class = (
-				isset( $this->classname_updates[ $name ] ) &&
-				self::REMOVE_CLASS === $this->classname_updates[ $name ]
-			);
-
-			// Once we've seen a class, we should never add it again.
-			if ( ! $remove_class ) {
-				$this->classname_updates[ $name ] = self::SKIP_CLASS;
-			}
-
-			if ( $remove_class ) {
-				$modified = true;
-				continue;
-			}
-
-			/*
-			 * Otherwise, append it to the new "class" attribute value.
-			 *
-			 * By preserving the existing whitespace instead of only adding a single
-			 * space (which is a valid transformation we can make) we'll introduce
-			 * fewer changes to the HTML content and hopefully make comparing
-			 * before/after easier for people trying to debug the modified output.
-			 */
-			$class .= substr( $existing_class, $ws_at, $ws_length );
-			$class .= $name;
-		}
-
-		// Add new classes by appending the ones we haven't already seen.
-		foreach ( $this->classname_updates as $name => $operation ) {
-			if ( self::ADD_CLASS === $operation ) {
-				$modified = true;
-
-				$class .= strlen( $class ) > 0 ? ' ' : '';
-				$class .= $name;
-			}
-		}
-
-		$this->classname_updates = array();
-		if ( ! $modified ) {
-			return;
-		}
-
-		if ( strlen( $class ) > 0 ) {
-			$this->set_attribute( 'class', $class );
-		} else {
-			$this->remove_attribute( 'class' );
-		}
-	}
-
-	/**
-	 * Applies updates to attributes.
-	 *
-	 * @since 6.2.0
-	 */
-	private function apply_attributes_updates() {
-		if ( ! count( $this->attribute_updates ) ) {
-			return;
-		}
-
-		/**
-		 * Attribute updates can be enqueued in any order but as we
-		 * progress through the document to replace them we have to
-		 * make our replacements in the order in which they are found
-		 * in that document.
-		 *
-		 * Sorting the updates ensures we don't make our replacements
-		 * out of order, which could otherwise lead to mangled output,
-		 * partially-duplicate attributes, and overwritten attributes.
-		 */
-		usort( $this->attribute_updates, array( self::class, 'sort_start_ascending' ) );
-
-		foreach ( $this->attribute_updates as $diff ) {
-			$this->updated_html .= substr( $this->html, $this->updated_bytes, $diff->start - $this->updated_bytes );
-			$this->updated_html .= $diff->text;
-			$this->updated_bytes = $diff->end;
-		}
-
-		$this->attribute_updates = array();
-	}
-
-	/**
-	 * Sort function to arrange objects with a start property in ascending order.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param object $a First attribute update.
-	 * @param object $b Second attribute update.
-	 * @return integer
-	 */
-	private static function sort_start_ascending( $a, $b ) {
-		return $a->start - $b->start;
-	}
-
-	/**
-	 * Returns the value of the parsed attribute in the currently-opened tag.
-	 *
-	 * Example:
-	 * <code>
-	 *     $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
-	 *     $p->next_tag( [ 'class_name' => 'test' ] ) === true;
-	 *     $p->get_attribute( 'data-test-id' ) === '14';
-	 *     $p->get_attribute( 'enabled' ) === true;
-	 *     $p->get_attribute( 'aria-label' ) === null;
-	 *
-	 *     $p->next_tag( [] ) === false;
-	 *     $p->get_attribute( 'class' ) === null;
-	 * </code>
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name Name of attribute whose value is requested.
-	 * @return string|true|null Value of attribute or `null` if not available.
-	 *                          Boolean attributes return `true`.
-	 */
-	public function get_attribute( $name ) {
-		if ( null === $this->tag_name_starts_at ) {
-			return null;
-		}
-
-		$comparable = strtolower( $name );
-		if ( ! isset( $this->attributes[ $comparable ] ) ) {
-			return null;
-		}
-
-		$attribute = $this->attributes[ $comparable ];
-
-		if ( true === $attribute->is_true ) {
-			return true;
-		}
-
-		$raw_value = substr( $this->html, $attribute->value_starts_at, $attribute->value_length );
-
-		return html_entity_decode( $raw_value );
-	}
-
-	/**
-	 * Returns the lowercase name of the currently-opened tag.
-	 *
-	 * Example:
-	 * <code>
-	 *     $p = new WP_HTML_Tag_Processor( '<DIV CLASS="test">Test</DIV>' );
-	 *     $p->next_tag( [] ) === true;
-	 *     $p->get_tag() === 'DIV';
-	 *
-	 *     $p->next_tag( [] ) === false;
-	 *     $p->get_tag() === null;
-	 * </code>
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return string|null Name of current tag in input HTML, or `null` if none currently open.
-	 */
-	public function get_tag() {
-		if ( null === $this->tag_name_starts_at ) {
-			return null;
-		}
-
-		$tag_name = substr( $this->html, $this->tag_name_starts_at, $this->tag_name_length );
-
-		return strtoupper( $tag_name );
-	}
-
-	/**
-	 * Indicates if the current tag token is a tag closer.
-	 *
-	 * Example:
-	 * <code>
-	 *     $p = new WP_HTML_Tag_Processor( '<div></div>' );
-	 *     $p->next_tag( [ 'tag_name' => 'div', 'tag_closers' => 'visit' ] );
-	 *     $p->is_tag_closer() === false;
-	 *
-	 *     $p->next_tag( [ 'tag_name' => 'div', 'tag_closers' => 'visit' ] );
-	 *     $p->is_tag_closer() === true;
-	 * </code>
-	 *
-	 * @return bool
-	 */
-	public function is_tag_closer() {
-		return $this->is_closing_tag;
-	}
-
-	/**
-	 * Updates or creates a new attribute on the currently matched tag with the value passed.
-	 *
-	 * For boolean attributes special handling is provided:
-	 *  - When `true` is passed as the value, then only the attribute name is added to the tag.
-	 *  - When `false` is passed, the attribute gets removed if it existed before.
-	 *
-	 * For string attributes, the value is escaped using the `esc_attr` function.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string         $name  The attribute name to target.
-	 * @param string|boolean $value The new attribute value.
-	 * @throws Exception When WP_DEBUG is true and the attribute name is invalid.
-	 */
-	public function set_attribute( $name, $value ) {
-		if ( $this->is_closing_tag || null === $this->tag_name_starts_at ) {
-			return false;
-		}
-
-		/*
-		 * Verify that the attribute name is allowable. In WP_DEBUG
-		 * environments we want to crash quickly to alert developers
-		 * of typos and issues; but in production we don't want to
-		 * interrupt a normal page view, so we'll silently avoid
-		 * updating the attribute in those cases.
-		 *
-		 * Of note, we're disallowing more characters than are strictly
-		 * forbidden in HTML5. This is to prevent additional security
-		 * risks deeper in the WordPress and plugin stack. Specifically
-		 * we reject the less-than (<) greater-than (>) and ampersand (&).
-		 *
-		 * The use of a PCRE match allows us to look for specific Unicode
-		 * code points without writing a UTF-8 decoder. Whereas scanning
-		 * for one-byte characters is trivial (with `strcspn`), scanning
-		 * for the longer byte sequences would be more complicated, and
-		 * this shouldn't be in the hot path for execution so we can
-		 * compromise on the efficiency at this point.
-		 *
-		 * @see https://html.spec.whatwg.org/#attributes-2
-		 */
-		if ( preg_match(
-			'~[' .
-				// Syntax-like characters.
-				'"\'>&</ =' .
-				// Control characters.
-				'\x{00}-\x{1F}' .
-				// HTML noncharacters.
-				'\x{FDD0}-\x{FDEF}' .
-				'\x{FFFE}\x{FFFF}\x{1FFFE}\x{1FFFF}\x{2FFFE}\x{2FFFF}\x{3FFFE}\x{3FFFF}' .
-				'\x{4FFFE}\x{4FFFF}\x{5FFFE}\x{5FFFF}\x{6FFFE}\x{6FFFF}\x{7FFFE}\x{7FFFF}' .
-				'\x{8FFFE}\x{8FFFF}\x{9FFFE}\x{9FFFF}\x{AFFFE}\x{AFFFF}\x{BFFFE}\x{BFFFF}' .
-				'\x{CFFFE}\x{CFFFF}\x{DFFFE}\x{DFFFF}\x{EFFFE}\x{EFFFF}\x{FFFFE}\x{FFFFF}' .
-				'\x{10FFFE}\x{10FFFF}' .
-			']~Ssu',
-			$name
-		) ) {
-			if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
-				throw new Exception( 'Invalid attribute name' );
-			}
-
-			return;
-		}
-
-		/*
-		 * > The values "true" and "false" are not allowed on boolean attributes.
-		 * > To represent a false value, the attribute has to be omitted altogether.
-		 *     - HTML5 spec, https://html.spec.whatwg.org/#boolean-attributes
-		 */
-		if ( false === $value ) {
-			$this->remove_attribute( $name );
-			return;
-		}
-
-		if ( true === $value ) {
-			$updated_attribute = $name;
-		} else {
-			$escaped_new_value = esc_attr( $value );
-			$updated_attribute = "{$name}=\"{$escaped_new_value}\"";
-		}
-
-		if ( isset( $this->attributes[ $name ] ) ) {
-			/*
-			 * Update an existing attribute.
-			 *
-			 * Example – set attribute id to "new" in <div id="initial_id" />:
-			 *    <div id="initial_id"/>
-			 *         ^-------------^
-			 *         start         end
-			 *    replacement: `id="new"`
-			 *
-			 *    Result: <div id="new"/>
-			 */
-			$existing_attribute               = $this->attributes[ $name ];
-			$this->attribute_updates[ $name ] = new WP_HTML_Text_Replacement(
-				$existing_attribute->start,
-				$existing_attribute->end,
-				$updated_attribute
-			);
-		} else {
-			/*
-			 * Create a new attribute at the tag's name end.
-			 *
-			 * Example – add attribute id="new" to <div />:
-			 *    <div/>
-			 *        ^
-			 *        start and end
-			 *    replacement: ` id="new"`
-			 *
-			 *    Result: <div id="new"/>
-			 */
-			$this->attribute_updates[ $name ] = new WP_HTML_Text_Replacement(
-				$this->tag_name_starts_at + $this->tag_name_length,
-				$this->tag_name_starts_at + $this->tag_name_length,
-				' ' . $updated_attribute
-			);
-		}
-	}
-
-	/**
-	 * Removes an attribute of the currently matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name The attribute name to remove.
-	 */
-	public function remove_attribute( $name ) {
-		if ( $this->is_closing_tag || ! isset( $this->attributes[ $name ] ) ) {
-			return false;
-		}
-
-		/*
-		 * Removes an existing tag attribute.
-		 *
-		 * Example – remove the attribute id from <div id="main"/>:
-		 *    <div id="initial_id"/>
-		 *         ^-------------^
-		 *         start         end
-		 *    replacement: ``
-		 *
-		 *    Result: <div />
-		 */
-		$this->attribute_updates[ $name ] = new WP_HTML_Text_Replacement(
-			$this->attributes[ $name ]->start,
-			$this->attributes[ $name ]->end,
-			''
-		);
-	}
-
-	/**
-	 * Adds a new class name to the currently matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $class_name The class name to add.
-	 */
-	public function add_class( $class_name ) {
-		if ( $this->is_closing_tag ) {
-			return false;
-		}
-
-		if ( null !== $this->tag_name_starts_at ) {
-			$this->classname_updates[ $class_name ] = self::ADD_CLASS;
-		}
-	}
-
-	/**
-	 * Removes a class name from the currently matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $class_name The class name to remove.
-	 */
-	public function remove_class( $class_name ) {
-		if ( $this->is_closing_tag ) {
-			return false;
-		}
-
-		if ( null !== $this->tag_name_starts_at ) {
-			$this->classname_updates[ $class_name ] = self::REMOVE_CLASS;
-		}
-	}
-
-	/**
-	 * Returns the string representation of the HTML Tag Processor.
-	 *
-	 * @since 6.2.0
-	 * @see get_updated_html
-	 *
-	 * @return string The processed HTML.
-	 */
-	public function __toString() {
-		return $this->get_updated_html();
-	}
-
-	/**
-	 * Returns the string representation of the HTML Tag Processor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return string The processed HTML.
-	 */
-	public function get_updated_html() {
-		// Short-circuit if there are no updates to apply.
-		if ( ! count( $this->classname_updates ) && ! count( $this->attribute_updates ) ) {
-			return $this->updated_html . substr( $this->html, $this->updated_bytes );
-		}
-
-		/*
-		 * Parsing is in progress – let's apply the attribute updates without moving on to the next tag.
-		 *
-		 * In practice:
-		 * 1. Apply the attributes updates to the original HTML
-		 * 2. Replace the original HTML with the updated HTML
-		 * 3. Point this tag processor to the current tag name's end in that updated HTML
-		 */
-
-		// Find tag name's end in the updated markup.
-		$markup_updated_up_to_a_tag_name_end = $this->updated_html . substr( $this->html, $this->updated_bytes, $this->tag_name_starts_at + $this->tag_name_length - $this->updated_bytes );
-		$updated_tag_name_ends_at            = strlen( $markup_updated_up_to_a_tag_name_end );
-		$updated_tag_name_starts_at          = $updated_tag_name_ends_at - $this->tag_name_length;
-
-		// Apply attributes updates.
-		$this->updated_html  = $markup_updated_up_to_a_tag_name_end;
-		$this->updated_bytes = $this->tag_name_starts_at + $this->tag_name_length;
-		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
-
-		// Replace $this->html with the updated markup.
-		$this->html = $this->updated_html . substr( $this->html, $this->updated_bytes );
-
-		// Rewind this processor to the tag name's end.
-		$this->tag_name_starts_at = $updated_tag_name_starts_at;
-		$this->parsed_bytes       = $updated_tag_name_ends_at;
-
-		// Restore the previous version of the updated_html as we are not finished with the current_tag yet.
-		$this->updated_html  = $markup_updated_up_to_a_tag_name_end;
-		$this->updated_bytes = $updated_tag_name_ends_at;
-
-		// Parse the attributes in the updated markup.
-		$this->attributes = array();
-		while ( $this->parse_next_attribute() ) {
-			continue;
-		}
-
-		return $this->html;
-	}
-
-	/**
-	 * Prepares tag search criteria from input interface.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param array|string $query {
-	 *     Which tag name to find, having which class.
-	 *
-	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
-	 *     @type string|null $class_name   Tag must contain this class name to match.
-	 *     @type string      $tag_closers  "visit" or "skip": whether to stop on tag closers, e.g. </div>.
-	 * }
-	 */
-	private function parse_query( $query ) {
-		if ( null !== $query && $query === $this->last_query ) {
-			return;
-		}
-
-		$this->last_query          = $query;
-		$this->sought_tag_name     = null;
-		$this->sought_class_name   = null;
-		$this->sought_match_offset = 1;
-		$this->stop_on_tag_closers = false;
-
-		// A single string value means "find the tag of this name".
-		if ( is_string( $query ) ) {
-			$this->sought_tag_name = $query;
-			return;
-		}
-
-		// If not using the string interface we have to pass an associative array.
-		if ( ! is_array( $query ) ) {
-			return;
-		}
-
-		if ( isset( $query['tag_name'] ) && is_string( $query['tag_name'] ) ) {
-			$this->sought_tag_name = $query['tag_name'];
-		}
-
-		if ( isset( $query['class_name'] ) && is_string( $query['class_name'] ) ) {
-			$this->sought_class_name = $query['class_name'];
-		}
-
-		if ( isset( $query['match_offset'] ) && is_int( $query['match_offset'] ) && 0 < $query['match_offset'] ) {
-			$this->sought_match_offset = $query['match_offset'];
-		}
-
-		if ( isset( $query['tag_closers'] ) ) {
-			$this->stop_on_tag_closers = 'visit' === $query['tag_closers'];
-		}
-	}
-
-
-	/**
-	 * Checks whether a given tag and its attributes match the search criteria.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return boolean
-	 */
-	private function matches() {
-		if ( $this->is_closing_tag && ! $this->stop_on_tag_closers ) {
-			return false;
-		}
-
-		// Do we match a case-insensitive HTML tag name?
-		if ( null !== $this->sought_tag_name ) {
-			/*
-			 * String (byte) length lookup is fast. If they aren't the
-			 * same length then they can't be the same string values.
-			 */
-			if ( strlen( $this->sought_tag_name ) !== $this->tag_name_length ) {
-				return false;
-			}
-
-			/*
-			 * Otherwise we have to check for each character if they
-			 * are the same, and only `strtoupper()` if we have to.
-			 * Presuming that most people will supply lowercase tag
-			 * names and most HTML will contain lowercase tag names,
-			 * most of the time this runs we shouldn't expect to
-			 * actually run the case-folding comparison.
-			 */
-			for ( $i = 0; $i < $this->tag_name_length; $i++ ) {
-				$html_char = $this->html[ $this->tag_name_starts_at + $i ];
-				$tag_char  = $this->sought_tag_name[ $i ];
-
-				if ( $html_char !== $tag_char && strtoupper( $html_char ) !== $tag_char ) {
-					return false;
-				}
-			}
-		}
-
-		$needs_class_name = null !== $this->sought_class_name;
-
-		if ( $needs_class_name && ! isset( $this->attributes['class'] ) ) {
-			return false;
-		}
-
-		// Do we match a byte-for-byte (case-sensitive and encoding-form-sensitive) class name?
-		if ( $needs_class_name ) {
-			$class_start = $this->attributes['class']->value_starts_at;
-			$class_end   = $class_start + $this->attributes['class']->value_length;
-			$class_at    = $class_start;
-
-			/*
-			 * We're going to have to jump through potential matches here because
-			 * it's possible that we have classes containing the class name we're
-			 * looking for. For instance, if we are looking for "even" we don't
-			 * want to be confused when we come to the class "not-even." This is
-			 * secured by ensuring that we find our sought-after class and that
-			 * it's surrounded on both sides by proper boundaries.
-			 *
-			 * See https://html.spec.whatwg.org/#attributes-3
-			 * See https://html.spec.whatwg.org/#space-separated-tokens
-			 */
-			while (
-				// phpcs:ignore WordPress.CodeAnalysis.AssignmentInCondition.FoundInWhileCondition
-				false !== ( $class_at = strpos( $this->html, $this->sought_class_name, $class_at ) ) &&
-				$class_at < $class_end
-			) {
-				/*
-				 * Verify this class starts at a boundary. If it were at 0 we'd be at
-				 * the start of the string and that would be fine, otherwise we have
-				 * to start at a place where the preceding character is whitespace.
-				 */
-				if ( $class_at > $class_start ) {
-					$character = $this->html[ $class_at - 1 ];
-
-					if ( ' ' !== $character && "\t" !== $character && "\f" !== $character && "\r" !== $character && "\n" !== $character ) {
-						$class_at += strlen( $this->sought_class_name );
-						continue;
-					}
-				}
-
-				/*
-				 * Similarly, verify this class ends at a boundary as well. Here we
-				 * can end at the very end of the string value, otherwise we have
-				 * to end at a place where the next character is whitespace.
-				 */
-				if ( $class_at + strlen( $this->sought_class_name ) < $class_end ) {
-					$character = $this->html[ $class_at + strlen( $this->sought_class_name ) ];
-
-					if ( ' ' !== $character && "\t" !== $character && "\f" !== $character && "\r" !== $character && "\n" !== $character ) {
-						$class_at += strlen( $this->sought_class_name );
-						continue;
-					}
-				}
-
-				return true;
-			}
-
-			return false;
-		}
-
-		return true;
-	}
-}
diff --git a/lib/experimental/html/class-wp-html-text-replacement.php b/lib/experimental/html/class-wp-html-text-replacement.php
deleted file mode 100644
index e3ada169d76efa..00000000000000
--- a/lib/experimental/html/class-wp-html-text-replacement.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php
-/**
- * HTML Tag Processor: Text replacement class.
- *
- * @package WordPress
- * @subpackage HTML
- * @since 6.2.0
- */
-
-/**
- * Data structure used to replace existing content from start to end that allows to drastically improve performance.
- *
- * This class is for internal usage of the WP_HTML_Tag_Processor class.
- *
- * @access private
- * @since 6.2.0
- *
- * @see WP_HTML_Tag_Processor
- */
-class WP_HTML_Text_Replacement {
-	/**
-	 * Byte offset into document where replacement span begins.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $start;
-
-	/**
-	 * Byte offset into document where replacement span ends.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	public $end;
-
-	/**
-	 * Span of text to insert in document to replace existing content from start to end.
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	public $text;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param int    $start Byte offset into document where replacement span begins.
-	 * @param int    $end   Byte offset into document where replacement span ends.
-	 * @param string $text  Span of text to insert in document to replace existing content from start to end.
-	 */
-	public function __construct( $start, $end, $text ) {
-		$this->start = $start;
-		$this->end   = $end;
-		$this->text  = $text;
-	}
-}
diff --git a/lib/experimental/html/index.php b/lib/experimental/html/index.php
deleted file mode 100644
index e7d41f8cdf4863..00000000000000
--- a/lib/experimental/html/index.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-/**
- * Load all files for the HTML Tag Processor.
- *
- * @package gutenberg
- */
-
-// All class files necessary for the HTML Tag Processor.
-require_once __DIR__ . '/class-wp-html-attribute-token.php';
-require_once __DIR__ . '/class-wp-html-text-replacement.php';
-require_once __DIR__ . '/class-wp-html-tag-processor.php';
diff --git a/lib/experimental/kses-allowed-html.php b/lib/experimental/kses-allowed-html.php
new file mode 100644
index 00000000000000..122faef7b4ca2c
--- /dev/null
+++ b/lib/experimental/kses-allowed-html.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * Modifies the wp_kses_allowed_html array.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add the form elements to the allowed tags array.
+ *
+ * @param array $allowedtags The allowed tags.
+ *
+ * @return array The allowed tags.
+ */
+function gutenberg_kses_allowed_html( $allowedtags ) {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return $allowedtags;
+	}
+
+	$allowedtags['input'] = array(
+		'type'          => array(),
+		'name'          => array(),
+		'value'         => array(),
+		'checked'       => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+
+	$allowedtags['label'] = array(
+		'for'   => array(),
+		'class' => array(),
+	);
+
+	$allowedtags['textarea'] = array(
+		'name'          => array(),
+		'required'      => array(),
+		'aria-required' => array(),
+		'class'         => array(),
+	);
+	return $allowedtags;
+}
+add_filter( 'wp_kses_allowed_html', 'gutenberg_kses_allowed_html', 10, 2 );
diff --git a/lib/experimental/kses.php b/lib/experimental/kses.php
new file mode 100644
index 00000000000000..160704417195b3
--- /dev/null
+++ b/lib/experimental/kses.php
@@ -0,0 +1,103 @@
+<?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, 'custom' );
+
+		$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 );
+	}
+}
+// The 'kses_init_filters' is usually initialized with default priority. Use higher priority to override.
+add_action( 'init', 'gutenberg_override_core_kses_init_filters', 20 );
+add_action( 'set_current_user', 'gutenberg_override_core_kses_init_filters' );
+
+if ( ! function_exists( 'allow_filter_in_styles' ) ) {
+	/**
+	 * See https://github.com/WordPress/wordpress-develop/pull/4108
+	 *
+	 * Mark CSS safe if it contains a "filter: url('#wp-duotone-...')" rule.
+	 *
+	 * This function should not be backported to core.
+	 *
+	 * @param bool   $allow_css Whether the CSS is allowed.
+	 * @param string $css_test_string The CSS to test.
+	 */
+	function allow_filter_in_styles( $allow_css, $css_test_string ) {
+		if ( preg_match(
+			"/^filter:\s*url\((['\"]?)#wp-duotone-[-a-zA-Z0-9]+\\1\)(\s+!important)?$/",
+			$css_test_string
+		) ) {
+			return true;
+		}
+		return $allow_css;
+	}
+}
+add_filter( 'safecss_filter_attr_allow_css', 'allow_filter_in_styles', 10, 2 );
+
+/**
+ * Update allowed inline style attributes list.
+ *
+ * @param string[] $attrs Array of allowed CSS attributes.
+ * @return string[] CSS attributes.
+ */
+function gutenberg_safe_grid_attrs( $attrs ) {
+	$attrs[] = 'grid-column';
+	$attrs[] = 'grid-row';
+	$attrs[] = 'container-type';
+	return $attrs;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_grid_attrs' );
diff --git a/lib/experimental/l10n.php b/lib/experimental/l10n.php
new file mode 100644
index 00000000000000..8233bb8bb05a8f
--- /dev/null
+++ b/lib/experimental/l10n.php
@@ -0,0 +1,139 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to i18n.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Override core's wp_get_word_count_type() introduced in WordPress 6.2.
+ * Originally, get_word_count_type() method of the WP_Locale class is executed,
+ * but the process is simulated here.
+ *
+ * This function should not be backported to core.
+ */
+if ( ! function_exists( 'wp_get_word_count_type' ) ) {
+	/**
+	 * Retrieves the word count type based on the locale.
+	 *
+	 * @return string Locale-specific word count type.
+	 */
+	function wp_get_word_count_type() {
+		$word_count_type = _x( 'words', 'Word count type. Do not translate!', 'gutenberg' );
+
+		// Check for valid types.
+		if ( 'characters_excluding_spaces' !== $word_count_type && 'characters_including_spaces' !== $word_count_type ) {
+			// Defaults to 'words'.
+			$word_count_type = 'words';
+		}
+		return $word_count_type;
+	}
+}
+
+if ( ! function_exists( 'wp_word_count' ) ) {
+	/**
+	 * Count words or characters in a provided text string.
+	 *
+	 * @param string $text  Text to count elements in.
+	 * @param string $type The type of count. Accepts 'words', 'characters_excluding_spaces', or 'characters_including_spaces'.
+	 * @param array  $settings {
+	 *     Optional. Array of arguments used to overrides for settings.
+	 *
+	 *     @type string $html_regexp                        Optional. Regular expression to find HTML elements.
+	 *     @type string $html_comment_regexp                Optional. Regular expression to find HTML comments.
+	 *     @type string $space_regexp                       Optional. Regular expression to find irregular space
+	 *                                                      characters.
+	 *     @type string $html_entity_regexp                 Optional. Regular expression to find HTML entities.
+	 *     @type string $connector_regexp                   Optional. Regular expression to find connectors that
+	 *                                                      split words.
+	 *     @type string $remove_regexp                      Optional. Regular expression to find remove unwanted
+	 *                                                      characters to reduce false-positives.
+	 *     @type string $astral_regexp                      Optional. Regular expression to find unwanted
+	 *                                                      characters when searching for non-words.
+	 *     @type string $words_regexp                       Optional. Regular expression to find words by spaces.
+	 *     @type string $characters_excluding_spaces_regexp Optional. Regular expression to find characters which
+	 *                                                      are non-spaces.
+	 *     @type string $characters_including_spaces_regexp Optional. Regular expression to find characters
+	 *                                                      including spaces.
+	 *     @type array  $shortcodes                         Optional. Array of shortcodes that should be removed
+	 *                                                      from the text.
+	 * }
+	 * @return int The word or character count.
+	 */
+	function wp_word_count( $text, $type, $settings = array() ) {
+		$defaults = array(
+			'html_regexp'                        => '/<\/?[a-z][^>]*?>/i',
+			'html_comment_regexp'                => '/<!--[\s\S]*?-->/',
+			'space_regexp'                       => '/&nbsp;|&#160;/i',
+			'html_entity_regexp'                 => '/&\S+?;/',
+			'connector_regexp'                   => "/--|\x{2014}/u",
+			'remove_regexp'                      => "/[\x{0021}-\x{0040}\x{005B}-\x{0060}\x{007B}-\x{007E}\x{0080}-\x{00BF}\x{00D7}\x{00F7}\x{2000}-\x{2BFF}\x{2E00}-\x{2E7F}]/u",
+			'astral_regexp'                      => "/[\x{010000}-\x{10FFFF}]/u",
+			'words_regexp'                       => '/\S\s+/u',
+			'characters_excluding_spaces_regexp' => '/\S/u',
+			'characters_including_spaces_regexp' => "/[^\f\n\r\t\v\x{00AD}\x{2028}\x{2029}]/u",
+			'shortcodes'                         => array(),
+		);
+
+		$count = 0;
+
+		if ( ! $text ) {
+			return $count;
+		}
+
+		$settings = wp_parse_args( $settings, $defaults );
+
+		// If there are any shortcodes, add this as a shortcode regular expression.
+		if ( is_array( $settings['shortcodes'] ) && ! empty( $settings['shortcodes'] ) ) {
+			$settings['shortcodes_regexp'] = '/\\[\\/?(?:' . implode( '|', $settings['shortcodes'] ) . ')[^\\]]*?\\]/';
+		}
+
+		// Sanitize type to one of three possibilities: 'words', 'characters_excluding_spaces' or 'characters_including_spaces'.
+		if ( 'characters_excluding_spaces' !== $type && 'characters_including_spaces' !== $type ) {
+			$type = 'words';
+		}
+
+		$text .= "\n";
+
+		// Replace all HTML with a new-line.
+		$text = preg_replace( $settings['html_regexp'], "\n", $text );
+
+		// Remove all HTML comments.
+		$text = preg_replace( $settings['html_comment_regexp'], '', $text );
+
+		// If a shortcode regular expression has been provided use it to remove shortcodes.
+		if ( ! empty( $settings['shortcodes_regexp'] ) ) {
+			$text = preg_replace( $settings['shortcodes_regexp'], "\n", $text );
+		}
+
+		// Normalize non-breaking space to a normal space.
+		$text = preg_replace( $settings['space_regexp'], ' ', $text );
+
+		if ( 'words' === $type ) {
+			// Remove HTML Entities.
+			$text = preg_replace( $settings['html_entity_regexp'], '', $text );
+
+			// Convert connectors to spaces to count attached text as words.
+			$text = preg_replace( $settings['connector_regexp'], ' ', $text );
+
+			// Remove unwanted characters.
+			$text = preg_replace( $settings['remove_regexp'], '', $text );
+		} else {
+			// Convert HTML Entities to "a".
+			$text = preg_replace( $settings['html_entity_regexp'], 'a', $text );
+
+			// Remove surrogate points.
+			$text = preg_replace( $settings['astral_regexp'], 'a', $text );
+		}
+
+		// Match with the selected type regular expression to count the items.
+		preg_match_all( $settings[ $type . '_regexp' ], $text, $matches );
+
+		if ( $matches ) {
+			return count( $matches[0] );
+		}
+
+		return $count;
+	}
+}
diff --git a/lib/experimental/media/class-gutenberg-rest-attachments-controller.php b/lib/experimental/media/class-gutenberg-rest-attachments-controller.php
new file mode 100644
index 00000000000000..71bf7b7a958351
--- /dev/null
+++ b/lib/experimental/media/class-gutenberg-rest-attachments-controller.php
@@ -0,0 +1,367 @@
+<?php
+/**
+ * Class Gutenberg_REST_Attachments_Controller.
+ *
+ * @package MediaExperiments
+ */
+
+/**
+ * Class Gutenberg_REST_Attachments_Controller.
+ */
+class Gutenberg_REST_Attachments_Controller extends WP_REST_Attachments_Controller {
+	/**
+	 * Registers the routes for attachments.
+	 *
+	 * @see register_rest_route()
+	 */
+	public function register_routes(): void {
+		parent::register_routes();
+
+		$valid_image_sizes = array_keys( wp_get_registered_image_subsizes() );
+
+		// Special case to set 'original_image' in attachment metadata.
+		$valid_image_sizes[] = 'original';
+		// Used for PDF thumbnails.
+		$valid_image_sizes[] = 'full';
+
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base . '/(?P<id>[\d]+)/sideload',
+			array(
+				array(
+					'methods'             => WP_REST_Server::CREATABLE,
+					'callback'            => array( $this, 'sideload_item' ),
+					'permission_callback' => array( $this, 'sideload_item_permissions_check' ),
+					'args'                => array(
+						'id'         => array(
+							'description' => __( 'Unique identifier for the attachment.', 'gutenberg' ),
+							'type'        => 'integer',
+						),
+						'image_size' => array(
+							'description' => __( 'Image size.', 'gutenberg' ),
+							'type'        => 'string',
+							'enum'        => $valid_image_sizes,
+							'required'    => true,
+						),
+					),
+				),
+				'allow_batch' => $this->allow_batch,
+				'schema'      => array( $this, 'get_public_item_schema' ),
+			)
+		);
+	}
+
+	/**
+	 * Retrieves an array of endpoint arguments from the item schema for the controller.
+	 *
+	 * @param string $method Optional. HTTP method of the request. The arguments for `CREATABLE` requests are
+	 *                       checked for required values and may fall-back to a given default, this is not done
+	 *                       on `EDITABLE` requests. Default WP_REST_Server::CREATABLE.
+	 * @return array Endpoint arguments.
+	 */
+	public function get_endpoint_args_for_item_schema( $method = WP_REST_Server::CREATABLE ) {
+		$args = rest_get_endpoint_args_for_schema( $this->get_item_schema(), $method );
+
+		if ( WP_REST_Server::CREATABLE === $method ) {
+			$args['generate_sub_sizes'] = array(
+				'type'        => 'boolean',
+				'default'     => true,
+				'description' => __( 'Whether to generate image sub sizes.', 'gutenberg' ),
+			);
+			$args['convert_format']     = array(
+				'type'        => 'boolean',
+				'default'     => true,
+				'description' => __( 'Whether to convert image formats.', 'gutenberg' ),
+			);
+		}
+
+		return $args;
+	}
+
+	/**
+	 * Prepares a single attachment output for response.
+	 *
+	 * Ensures 'missing_image_sizes' is set for PDFs and not just images.
+	 *
+	 * @param WP_Post         $item    Attachment object.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	public function prepare_item_for_response( $item, $request ): WP_REST_Response {
+		$response = parent::prepare_item_for_response( $item, $request );
+
+		$data = $response->get_data();
+
+		// Handle missing image sizes for PDFs.
+
+		$fields = $this->get_fields_for_response( $request );
+
+		if (
+			rest_is_field_included( 'missing_image_sizes', $fields ) &&
+			empty( $data['missing_image_sizes'] )
+		) {
+			$mime_type = get_post_mime_type( $item );
+
+			if ( 'application/pdf' === $mime_type ) {
+				$metadata = wp_get_attachment_metadata( $item->ID, true );
+
+				if ( ! is_array( $metadata ) ) {
+					$metadata = array();
+				}
+
+				$metadata['sizes'] = $metadata['sizes'] ?? array();
+
+				$fallback_sizes = array(
+					'thumbnail',
+					'medium',
+					'large',
+				);
+
+				// The filter might have been added by ::create_item().
+				remove_filter( 'fallback_intermediate_image_sizes', '__return_empty_array', 100 );
+
+				/** This filter is documented in wp-admin/includes/image.php */
+				$fallback_sizes = apply_filters( 'fallback_intermediate_image_sizes', $fallback_sizes, $metadata ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+
+				$registered_sizes = wp_get_registered_image_subsizes();
+				$merged_sizes     = array_keys( array_intersect_key( $registered_sizes, array_flip( $fallback_sizes ) ) );
+
+				$missing_image_sizes         = array_diff( $merged_sizes, array_keys( $metadata['sizes'] ) );
+				$data['missing_image_sizes'] = $missing_image_sizes;
+			}
+		}
+
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+
+		$links = $response->get_links();
+
+		$response = rest_ensure_response( $data );
+
+		foreach ( $links as $rel => $rel_links ) {
+			foreach ( $rel_links as $link ) {
+				$response->add_link( $rel, $link['href'], $link['attributes'] );
+			}
+		}
+
+		return $response;
+	}
+
+	/**
+	 * Creates a single attachment.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, WP_Error object on failure.
+	 */
+	public function create_item( $request ) {
+		if ( ! $request['generate_sub_sizes'] ) {
+			add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array', 100 );
+			add_filter( 'fallback_intermediate_image_sizes', '__return_empty_array', 100 );
+
+		}
+
+		if ( ! $request['convert_format'] ) {
+			add_filter( 'image_editor_output_format', '__return_empty_array', 100 );
+		}
+
+		$response = parent::create_item( $request );
+
+		remove_filter( 'intermediate_image_sizes_advanced', '__return_empty_array', 100 );
+		remove_filter( 'fallback_intermediate_image_sizes', '__return_empty_array', 100 );
+		remove_filter( 'image_editor_output_format', '__return_empty_array', 100 );
+
+		return $response;
+	}
+
+
+	/**
+	 * Checks if a given request has access to sideload a file.
+	 *
+	 * Sideloading a file for an existing attachment
+	 * requires both update and create permissions.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has access to update the item, WP_Error object otherwise.
+	 */
+	public function sideload_item_permissions_check( $request ) {
+		return $this->edit_media_item_permissions_check( $request );
+	}
+
+	/**
+	 * Filters {@see 'wp_unique_filename'} during sideloads.
+	 *
+	 * {@see wp_unique_filename()} will always add numeric suffix if the name looks like a sub-size to avoid conflicts.
+	 *
+	 * Adding this closure to the filter helps work around this safeguard.
+	 *
+	 * Example: when uploading myphoto.jpeg, WordPress normally creates myphoto-150x150.jpeg,
+	 * and when uploading myphoto-150x150.jpeg, it will be renamed to myphoto-150x150-1.jpeg
+	 * However, here it is desired not to add the suffix in order to maintain the same
+	 * naming convention as if the file was uploaded regularly.
+	 *
+	 * @link https://github.com/WordPress/wordpress-develop/blob/30954f7ac0840cfdad464928021d7f380940c347/src/wp-includes/functions.php#L2576-L2582
+	 *
+	 * @param string        $filename                 Unique file name.
+	 * @param string        $ext                      File extension. Example: ".png".
+	 * @param string        $dir                      Directory path.
+	 * @param callable|null $unique_filename_callback Callback function that generates the unique file name.
+	 * @param string[]      $alt_filenames            Array of alternate file names that were checked for collisions.
+	 * @param int|string    $number                   The highest number that was used to make the file name unique
+	 *                                                or an empty string if unused.
+	 * @return string Filtered file name.
+	 */
+	private function filter_wp_unique_filename( $filename, $ext, $dir, $unique_filename_callback, $alt_filenames, $number, $attachment_filename ) {
+		if ( empty( $number ) || ! $attachment_filename ) {
+			return $filename;
+		}
+
+		$ext       = pathinfo( $filename, PATHINFO_EXTENSION );
+		$name      = pathinfo( $filename, PATHINFO_FILENAME );
+		$orig_name = pathinfo( $attachment_filename, PATHINFO_FILENAME );
+
+		if ( ! $ext || ! $name ) {
+			return $filename;
+		}
+
+		$matches = array();
+		if ( preg_match( '/(.*)(-\d+x\d+)-' . $number . '$/', $name, $matches ) ) {
+			$filename_without_suffix = $matches[1] . $matches[2] . ".$ext";
+			if ( $matches[1] === $orig_name && ! file_exists( "$dir/$filename_without_suffix" ) ) {
+				return $filename_without_suffix;
+			}
+		}
+
+		return $filename;
+	}
+
+	/**
+	 * Side-loads a media file without creating an attachment.
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, WP_Error object on failure.
+	 */
+	public function sideload_item( WP_REST_Request $request ) {
+		$attachment_id = $request['id'];
+
+		$post = $this->get_post( $attachment_id );
+
+		if ( is_wp_error( $post ) ) {
+			return $post;
+		}
+
+		if (
+			! wp_attachment_is_image( $post ) &&
+			! wp_attachment_is( 'pdf', $post )
+		) {
+			return new WP_Error(
+				'rest_post_invalid_id',
+				__( 'Invalid post ID, only images and PDFs can be sideloaded.', 'gutenberg' ),
+				array( 'status' => 400 )
+			);
+		}
+
+		if ( ! $request['convert_format'] ) {
+			// Prevent image conversion as that is done client-side.
+			add_filter( 'image_editor_output_format', '__return_empty_array', 100 );
+		}
+
+		// Get the file via $_FILES or raw data.
+		$files   = $request->get_file_params();
+		$headers = $request->get_headers();
+
+		/*
+		 * wp_unique_filename() will always add numeric suffix if the name looks like a sub-size to avoid conflicts.
+		 * See https://github.com/WordPress/wordpress-develop/blob/30954f7ac0840cfdad464928021d7f380940c347/src/wp-includes/functions.php#L2576-L2582
+		 * With the following filter we can work around this safeguard.
+		 */
+
+		$attachment_filename = get_attached_file( $attachment_id, true );
+		$attachment_filename = $attachment_filename ? wp_basename( $attachment_filename ) : null;
+
+		/**
+		 * @param string        $filename                 Unique file name.
+		 * @param string        $ext                      File extension. Example: ".png".
+		 * @param string        $dir                      Directory path.
+		 * @param callable|null $unique_filename_callback Callback function that generates the unique file name.
+		 * @param string[]      $alt_filenames            Array of alternate file names that were checked for collisions.
+		 * @param int|string    $number                   The highest number that was used to make the file name unique
+		 *                                                or an empty string if unused.
+		 * @return string Filtered file name.
+		 */
+		$filter_filename = function ( $filename, $ext, $dir, $unique_filename_callback, $alt_filenames, $number ) use ( $attachment_filename ) {
+			return $this->filter_wp_unique_filename( $filename, $ext, $dir, $unique_filename_callback, $alt_filenames, $number, $attachment_filename );
+		};
+
+		add_filter( 'wp_unique_filename', $filter_filename, 10, 6 );
+
+		$parent_post = get_post_parent( $attachment_id );
+
+		$time = null;
+
+		// Matches logic in media_handle_upload().
+		// The post date doesn't usually matter for pages, so don't backdate this upload.
+		if ( $parent_post && 'page' !== $parent_post->post_type && substr( $parent_post->post_date, 0, 4 ) > 0 ) {
+			$time = $parent_post->post_date;
+		}
+
+		if ( ! empty( $files ) ) {
+			$file = $this->upload_from_file( $files, $headers, $time );
+		} else {
+			$file = $this->upload_from_data( $request->get_body(), $headers, $time );
+		}
+
+		remove_filter( 'wp_unique_filename', $filter_filename );
+		remove_filter( 'image_editor_output_format', '__return_empty_array', 100 );
+
+		if ( is_wp_error( $file ) ) {
+			return $file;
+		}
+
+		$type = $file['type'];
+		$path = $file['file'];
+
+		$image_size = $request['image_size'];
+
+		$metadata = wp_get_attachment_metadata( $attachment_id, true );
+
+		if ( ! $metadata ) {
+			$metadata = array();
+		}
+
+		if ( 'original' === $image_size ) {
+			$metadata['original_image'] = wp_basename( $path );
+		} else {
+			$metadata['sizes'] = $metadata['sizes'] ?? array();
+
+			$size = wp_getimagesize( $path );
+
+			$metadata['sizes'][ $image_size ] = array(
+				'width'     => $size ? $size[0] : 0,
+				'height'    => $size ? $size[1] : 0,
+				'file'      => wp_basename( $path ),
+				'mime-type' => $type,
+				'filesize'  => wp_filesize( $path ),
+			);
+		}
+
+		wp_update_attachment_metadata( $attachment_id, $metadata );
+
+		$response_request = new WP_REST_Request(
+			WP_REST_Server::READABLE,
+			rest_get_route_for_post( $attachment_id )
+		);
+
+		$response_request['context'] = 'edit';
+
+		if ( isset( $request['_fields'] ) ) {
+			$response_request['_fields'] = $request['_fields'];
+		}
+
+		$response = $this->prepare_item_for_response( get_post( $attachment_id ), $response_request );
+
+		$response->header( 'Location', rest_url( rest_get_route_for_post( $attachment_id ) ) );
+
+		return $response;
+	}
+}
diff --git a/lib/experimental/media/load.php b/lib/experimental/media/load.php
new file mode 100644
index 00000000000000..bcb02accf62a6b
--- /dev/null
+++ b/lib/experimental/media/load.php
@@ -0,0 +1,360 @@
+<?php
+/**
+ * Adds media-related experimental functionality.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Returns a list of all available image sizes.
+ *
+ * @return array Existing image sizes.
+ */
+function gutenberg_get_all_image_sizes(): array {
+	$sizes = wp_get_registered_image_subsizes();
+
+	foreach ( $sizes as $name => &$size ) {
+		$size['height'] = (int) $size['height'];
+		$size['width']  = (int) $size['width'];
+		$size['name']   = $name;
+	}
+	unset( $size );
+
+	return $sizes;
+}
+
+/**
+ * Returns the default output format mapping for the supported image formats.
+ *
+ * @return array<string,string> Map of input formats to output formats.
+ */
+function gutenberg_get_default_image_output_formats() {
+	$input_formats = array(
+		'image/jpeg',
+		'image/png',
+		'image/gif',
+		'image/webp',
+		'image/avif',
+		'image/heic',
+	);
+
+	$output_formats = array();
+
+	foreach ( $input_formats as $mime_type ) {
+		/** This filter is documented in wp-includes/media.php */
+		$output_formats = apply_filters(
+			'image_editor_output_format', // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+			$output_formats,
+			'',
+			$mime_type
+		);
+	}
+
+	return $output_formats;
+}
+
+/**
+ * Filters the REST API root index data to add custom settings.
+ *
+ * @param WP_REST_Response $response Response data.
+ */
+function gutenberg_media_processing_filter_rest_index( WP_REST_Response $response ) {
+	/** This filter is documented in wp-admin/includes/images.php */
+	$image_size_threshold = (int) apply_filters( 'big_image_size_threshold', 2560, array( 0, 0 ), '', 0 ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+
+	$default_image_output_formats = gutenberg_get_default_image_output_formats();
+
+	/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+	$jpeg_interlaced = (bool) apply_filters( 'image_save_progressive', false, 'image/jpeg' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+	/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+	$png_interlaced = (bool) apply_filters( 'image_save_progressive', false, 'image/png' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+	/** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */
+	$gif_interlaced = (bool) apply_filters( 'image_save_progressive', false, 'image/gif' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+
+	if ( current_user_can( 'upload_files' ) ) {
+		$response->data['image_sizes']          = gutenberg_get_all_image_sizes();
+		$response->data['image_size_threshold'] = $image_size_threshold;
+		$response->data['image_output_formats'] = (object) $default_image_output_formats;
+		$response->data['jpeg_interlaced']      = $jpeg_interlaced;
+		$response->data['png_interlaced']       = $png_interlaced;
+		$response->data['gif_interlaced']       = $gif_interlaced;
+	}
+
+	return $response;
+}
+
+add_filter( 'rest_index', 'gutenberg_media_processing_filter_rest_index' );
+
+
+/**
+ * Overrides the REST controller for the attachment post type.
+ *
+ * @param array  $args      Array of arguments for registering a post type.
+ *                          See the register_post_type() function for accepted arguments.
+ * @param string $post_type Post type key.
+ */
+function gutenberg_filter_attachment_post_type_args( array $args, string $post_type ): array {
+	if ( 'attachment' === $post_type ) {
+		require_once __DIR__ . '/class-gutenberg-rest-attachments-controller.php';
+
+		$args['rest_controller_class'] = Gutenberg_REST_Attachments_Controller::class;
+	}
+
+	return $args;
+}
+
+add_filter( 'register_post_type_args', 'gutenberg_filter_attachment_post_type_args', 10, 2 );
+
+
+/**
+ * Registers additional REST fields for attachments.
+ */
+function gutenberg_media_processing_register_rest_fields(): void {
+	register_rest_field(
+		'attachment',
+		'filename',
+		array(
+			'schema'       => array(
+				'description' => __( 'Original attachment file name', 'gutenberg' ),
+				'type'        => 'string',
+				'context'     => array( 'view', 'edit' ),
+			),
+			'get_callback' => 'gutenberg_rest_get_attachment_filename',
+		)
+	);
+
+	register_rest_field(
+		'attachment',
+		'filesize',
+		array(
+			'schema'       => array(
+				'description' => __( 'Attachment file size', 'gutenberg' ),
+				'type'        => 'number',
+				'context'     => array( 'view', 'edit' ),
+			),
+			'get_callback' => 'gutenberg_rest_get_attachment_filesize',
+		)
+	);
+}
+
+add_action( 'rest_api_init', 'gutenberg_media_processing_register_rest_fields' );
+
+/**
+ * Returns the attachment's original file name.
+ *
+ * @param array $post Post data.
+ * @return string|null Attachment file name.
+ */
+function gutenberg_rest_get_attachment_filename( array $post ): ?string {
+	$path = wp_get_original_image_path( $post['id'] );
+
+	if ( $path ) {
+		return basename( $path );
+	}
+
+	$path = get_attached_file( $post['id'] );
+
+	if ( $path ) {
+		return basename( $path );
+	}
+
+	return null;
+}
+
+/**
+ * Returns the attachment's file size in bytes.
+ *
+ * @param array $post Post data.
+ * @return int|null Attachment file size.
+ */
+function gutenberg_rest_get_attachment_filesize( array $post ): ?int {
+	$attachment_id = $post['id'];
+
+	$meta = wp_get_attachment_metadata( $attachment_id );
+
+	if ( isset( $meta['filesize'] ) ) {
+		return $meta['filesize'];
+	}
+
+	$original_path = wp_get_original_image_path( $attachment_id );
+	$attached_file = $original_path ? $original_path : get_attached_file( $attachment_id );
+
+	if ( is_string( $attached_file ) && file_exists( $attached_file ) ) {
+		return wp_filesize( $attached_file );
+	}
+
+	return null;
+}
+
+/**
+ * Filters the list of rewrite rules formatted for output to an .htaccess file.
+ *
+ * Adds support for serving wasm-vips locally.
+ *
+ * @param string $rules mod_rewrite Rewrite rules formatted for .htaccess.
+ * @return string Filtered rewrite rules.
+ */
+function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
+	$rules .= "\n# BEGIN Gutenberg client-side media processing experiment\n" .
+				"AddType application/wasm wasm\n" .
+				"# END Gutenberg client-side media processing experiment\n";
+
+	return $rules;
+}
+
+add_filter( 'mod_rewrite_rules', 'gutenberg_filter_mod_rewrite_rules' );
+
+/**
+ * Enables cross-origin isolation in the block editor.
+ *
+ * Required for enabling SharedArrayBuffer for WebAssembly-based
+ * media processing in the editor.
+ *
+ * @link https://web.dev/coop-coep/
+ */
+function gutenberg_set_up_cross_origin_isolation() {
+	$screen = get_current_screen();
+
+	if ( ! $screen ) {
+		return;
+	}
+
+	if ( ! $screen->is_block_editor() && 'site-editor' !== $screen->id && ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() ) ) {
+		return;
+	}
+
+	$user_id = get_current_user_id();
+	if ( ! $user_id ) {
+		return;
+	}
+
+	// Cross-origin isolation is not needed if users can't upload files anyway.
+	if ( ! user_can( $user_id, 'upload_files' ) ) {
+		return;
+	}
+
+	gutenberg_start_cross_origin_isolation_output_buffer();
+}
+
+add_action( 'load-post.php', 'gutenberg_set_up_cross_origin_isolation' );
+add_action( 'load-post-new.php', 'gutenberg_set_up_cross_origin_isolation' );
+add_action( 'load-site-editor.php', 'gutenberg_set_up_cross_origin_isolation' );
+add_action( 'load-widgets.php', 'gutenberg_set_up_cross_origin_isolation' );
+
+/**
+ * Sends headers for cross-origin isolation.
+ *
+ * Uses an output buffer to add crossorigin="anonymous" where needed.
+ *
+ * @link https://web.dev/coop-coep/
+ */
+function gutenberg_start_cross_origin_isolation_output_buffer(): void {
+	global $is_safari;
+
+	$coep = $is_safari ? 'require-corp' : 'credentialless';
+
+	ob_start(
+		function ( string $output ) use ( $coep ): string {
+			header( 'Cross-Origin-Opener-Policy: same-origin' );
+			header( "Cross-Origin-Embedder-Policy: $coep" );
+
+			return gutenberg_add_crossorigin_attributes( $output );
+		}
+	);
+}
+
+/**
+ * Adds crossorigin="anonymous" to relevant tags in the given HTML string.
+ *
+ * @param string $html HTML input.
+ *
+ * @return string Modified HTML.
+ */
+function gutenberg_add_crossorigin_attributes( string $html ): string {
+	$site_url = site_url();
+
+	$processor = new WP_HTML_Tag_Processor( $html );
+
+	// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin.
+	$tags = array(
+		'AUDIO'  => 'src',
+		'IMG'    => 'src',
+		'LINK'   => 'href',
+		'SCRIPT' => 'src',
+		'VIDEO'  => 'src',
+		'SOURCE' => 'src',
+	);
+
+	$tag_names = array_keys( $tags );
+
+	while ( $processor->next_tag() ) {
+		$tag = $processor->get_tag();
+
+		if ( ! in_array( $tag, $tag_names, true ) ) {
+			continue;
+		}
+
+		if ( 'AUDIO' === $tag || 'VIDEO' === $tag ) {
+			$processor->set_bookmark( 'audio-video-parent' );
+		}
+
+		$processor->set_bookmark( 'resume' );
+
+		$seeked = false;
+
+		$crossorigin = $processor->get_attribute( 'crossorigin' );
+
+		$url = $processor->get_attribute( $tags[ $tag ] );
+
+		if ( is_string( $url ) && ! str_starts_with( $url, $site_url ) && ! str_starts_with( $url, '/' ) && ! is_string( $crossorigin ) ) {
+			if ( 'SOURCE' === $tag ) {
+				$seeked = $processor->seek( 'audio-video-parent' );
+
+				if ( $seeked ) {
+					$processor->set_attribute( 'crossorigin', 'anonymous' );
+				}
+			} else {
+				$processor->set_attribute( 'crossorigin', 'anonymous' );
+			}
+
+			if ( $seeked ) {
+				$processor->seek( 'resume' );
+				$processor->release_bookmark( 'audio-video-parent' );
+			}
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+/**
+ * Overrides templates from wp_print_media_templates with custom ones.
+ *
+ * Adds `crossorigin` attribute to all tags that
+ * could have assets loaded from a different domain.
+ */
+function gutenberg_override_media_templates(): void {
+	remove_action( 'admin_footer', 'wp_print_media_templates' );
+	add_action(
+		'admin_footer',
+		static function (): void {
+			ob_start();
+			wp_print_media_templates();
+			$html = (string) ob_get_clean();
+
+			$tags = array(
+				'audio',
+				'img',
+				'video',
+			);
+
+			foreach ( $tags as $tag ) {
+				$html = (string) str_replace( "<$tag", "<$tag crossorigin=\"anonymous\"", $html );
+			}
+
+			echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		}
+	);
+}
+
+add_action( 'wp_enqueue_media', 'gutenberg_override_media_templates' );
diff --git a/lib/experimental/navigation-page.php b/lib/experimental/navigation-page.php
deleted file mode 100644
index 77949d76aee53f..00000000000000
--- a/lib/experimental/navigation-page.php
+++ /dev/null
@@ -1,173 +0,0 @@
-<?php
-/**
- * Bootstrapping the Gutenberg Navigation page.
- *
- * @package gutenberg
- */
-
-/**
- * The main entry point for the Gutenberg Navigation page.
- *
- * @since 7.8.0
- */
-function gutenberg_navigation_page() {
-	?>
-	<div
-		id="navigation-editor"
-		class="edit-navigation"
-	>
-	</div>
-	<?php
-}
-
-/**
- * This function returns an url for the /wp/v2/menus endpoint
- *
- * @since 11.8.0
- *
- * @param  int $results_per_page Results per page.
- * @return string
- */
-function gutenberg_navigation_get_menus_endpoint( $results_per_page = 100 ) {
-	return '/wp/v2/menus?' . build_query(
-		array(
-			'per_page' => $results_per_page,
-			'context'  => 'edit',
-			'_locale'  => 'user',
-		)
-	);
-}
-
-/**
- * This function returns an url for the /wp/v2/menu-items endpoint
- *
- * @since 11.8.0
- *
- * @param int $menu_id Menu ID.
- * @param int $results_per_page Results per page.
- * @return string
- */
-function gutenberg_navigation_get_menu_items_endpoint( $menu_id, $results_per_page = 100 ) {
-	return '/wp/v2/menu-items?' . build_query(
-		array(
-			'context'  => 'edit',
-			'menus'    => $menu_id,
-			'per_page' => $results_per_page,
-			'_locale'  => 'user',
-		)
-	);
-}
-
-/**
- * This function returns an url for the /wp/v2/types endpoint
- *
- * @since 11.8.0
- *
- * @return string
- */
-function gutenberg_navigation_get_types_endpoint() {
-	return '/wp/v2/types?' . build_query(
-		array(
-			'context' => 'edit',
-		)
-	);
-}
-
-/**
- * Initialize the Gutenberg Navigation page.
- *
- * @param string $hook Page.
- * @since 7.8.0
- */
-function gutenberg_navigation_init( $hook ) {
-	if ( 'gutenberg_page_gutenberg-navigation' !== $hook ) {
-		return;
-	}
-
-	$menus         = wp_get_nav_menus();
-	$first_menu_id = ! empty( $menus ) ? $menus[0]->term_id : null;
-
-	$preload_paths = array(
-		'/wp/v2/menu-locations',
-		array( '/wp/v2/pages', 'OPTIONS' ),
-		array( '/wp/v2/posts', 'OPTIONS' ),
-		gutenberg_navigation_get_types_endpoint(),
-	);
-
-	if ( $first_menu_id ) {
-		$preload_paths[] = gutenberg_navigation_get_menu_items_endpoint( $first_menu_id );
-	}
-
-	$custom_settings = array(
-		'blockNavMenus' => false,
-		// We should uncomment the line below when the block-nav-menus feature becomes stable.
-		// @see https://github.com/WordPress/gutenberg/issues/34265.
-		/*'blockNavMenus' => get_theme_support( 'block-nav-menus' ),*/
-	);
-
-	$context  = new WP_Block_Editor_Context( array( 'name' => 'core/edit-navigation' ) );
-	$settings = get_block_editor_settings( $custom_settings, $context );
-	gutenberg_initialize_editor(
-		'navigation_editor',
-		'edit-navigation',
-		array(
-			'initializer_name' => 'initialize',
-			'editor_settings'  => $settings,
-			'preload_paths'    => $preload_paths,
-		)
-	);
-
-	gutenberg_navigation_editor_preload_menus();
-
-	wp_enqueue_script( 'wp-edit-navigation' );
-	wp_enqueue_style( 'wp-edit-navigation' );
-	wp_enqueue_script( 'wp-format-library' );
-	wp_enqueue_style( 'wp-format-library' );
-	do_action( 'enqueue_block_editor_assets' );
-}
-add_action( 'admin_enqueue_scripts', 'gutenberg_navigation_init' );
-
-/**
- * Tells the script loader to load the scripts and styles of custom block on navigation editor screen.
- *
- * @param bool $is_block_editor_screen Current decision about loading block assets.
- * @return bool Filtered decision about loading block assets.
- */
-function gutenberg_navigation_editor_load_block_editor_scripts_and_styles( $is_block_editor_screen ) {
-	if ( is_callable( 'get_current_screen' ) && get_current_screen() && 'gutenberg_page_gutenberg-navigation' === get_current_screen()->base ) {
-		return true;
-	}
-
-	return $is_block_editor_screen;
-}
-
-add_filter( 'should_load_block_editor_scripts_and_styles', 'gutenberg_navigation_editor_load_block_editor_scripts_and_styles' );
-
-/**
- * This function calls createMenuPreloadingMiddleware middleware because
- * we need to use custom preloading logic for menus.
- *
- * @return void
- */
-function gutenberg_navigation_editor_preload_menus() {
-	$menus_data = array_reduce(
-		array(
-			gutenberg_navigation_get_menus_endpoint(),
-		),
-		'rest_preload_api_request',
-		array()
-	);
-
-	if ( ! $menus_data ) {
-		return;
-	}
-
-	wp_add_inline_script(
-		'wp-edit-navigation',
-		sprintf(
-			'wp.apiFetch.use( wp.editNavigation.__unstableCreateMenuPreloadingMiddleware( %s ) );',
-			wp_json_encode( $menus_data )
-		),
-		'after'
-	);
-}
diff --git a/lib/experimental/navigation-theme-opt-in.php b/lib/experimental/navigation-theme-opt-in.php
index 7efed9794d0ccc..547aa8b88ea7d1 100644
--- a/lib/experimental/navigation-theme-opt-in.php
+++ b/lib/experimental/navigation-theme-opt-in.php
@@ -161,7 +161,7 @@ function gutenberg_remove_block_nav_menu_items( $menu_items ) {
 
 	return array_filter(
 		$menu_items,
-		function( $menu_item ) {
+		static function ( $menu_item ) {
 			return 'block' !== $menu_item->type;
 		}
 	);
diff --git a/lib/experimental/posts/load.php b/lib/experimental/posts/load.php
new file mode 100644
index 00000000000000..699534f1886f52
--- /dev/null
+++ b/lib/experimental/posts/load.php
@@ -0,0 +1,89 @@
+<?php
+/**
+ * Bootstraps the new posts dashboard page.
+ *
+ * @package Gutenberg
+ */
+
+add_action( 'admin_menu', 'gutenberg_replace_posts_dashboard' );
+
+if ( isset( $_GET['page'] ) && 'gutenberg-posts-dashboard' === $_GET['page'] ) {
+	// Default to is-fullscreen-mode to avoid jumps in the UI.
+	add_filter(
+		'admin_body_class',
+		static function ( $classes ) {
+			return "$classes is-fullscreen-mode";
+		}
+	);
+}
+
+/**
+ * Renders the new posts dashboard page.
+ */
+function gutenberg_posts_dashboard() {
+	$block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
+	$custom_settings      = array(
+		'siteUrl'        => site_url(),
+		'styles'         => get_block_editor_theme_styles(),
+		'supportsLayout' => wp_theme_has_theme_json(),
+	);
+
+	$editor_settings         = get_block_editor_settings( $custom_settings, $block_editor_context );
+	$active_global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+	$active_theme            = get_stylesheet();
+
+	$preload_paths = array(
+		array( '/wp/v2/media', 'OPTIONS' ),
+		'/wp/v2/types?context=view',
+		'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
+		'/wp/v2/global-styles/' . $active_global_styles_id,
+		'/wp/v2/global-styles/themes/' . $active_theme,
+	);
+	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
+
+	// Preload server-registered block schemas.
+	wp_add_inline_script(
+		'wp-blocks',
+		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+	);
+
+	/** This action is documented in wp-admin/edit-form-blocks.php */
+	do_action( 'enqueue_block_editor_assets' );
+	wp_register_style(
+		'wp-gutenberg-posts-dashboard',
+		gutenberg_url( 'build/edit-site/posts.css', __FILE__ ),
+		array( 'wp-components', 'wp-commands', 'wp-edit-site' )
+	);
+	wp_enqueue_style( 'wp-gutenberg-posts-dashboard' );
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard", %s );
+			} );',
+			wp_json_encode( $editor_settings )
+		)
+	);
+	wp_enqueue_script( 'wp-edit-site' );
+	wp_enqueue_media();
+	echo '<div id="gutenberg-posts-dashboard"></div>';
+}
+
+/**
+ * Replaces the default posts menu item with the new posts dashboard.
+ */
+function gutenberg_replace_posts_dashboard() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( ! $gutenberg_experiments || ! array_key_exists( 'gutenberg-new-posts-dashboard', $gutenberg_experiments ) || ! $gutenberg_experiments['gutenberg-new-posts-dashboard'] ) {
+		return;
+	}
+	$ptype_obj = get_post_type_object( 'post' );
+	add_submenu_page(
+		'gutenberg',
+		$ptype_obj->labels->name,
+		$ptype_obj->labels->name,
+		'edit_posts',
+		'gutenberg-posts-dashboard',
+		'gutenberg_posts_dashboard'
+	);
+}
diff --git a/lib/experimental/register-webfonts-from-theme-json.php b/lib/experimental/register-webfonts-from-theme-json.php
deleted file mode 100644
index f0a37677eb0637..00000000000000
--- a/lib/experimental/register-webfonts-from-theme-json.php
+++ /dev/null
@@ -1,182 +0,0 @@
-<?php
-/**
- * Bootstraps Global Styles.
- *
- * @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;
-			}
-
-			// 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'] );
-		}
-	}
-
-	// 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 ) {
-
-			// Skip if fontFace is not defined.
-			if ( empty( $font_family['fontFace'] ) ) {
-				continue;
-			}
-
-			$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;
-						}
-						$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 ] );
-					}
-				}
-
-				$webfonts[] = $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'];
-	}
-
-	/**
-	 * 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 ) {
-			$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 ) );
-	};
-
-	// Diff the arrays to find the missing fonts.
-	$to_add = array_diff(
-		array_keys( $font_families_registered ),
-		$get_families( $font_families_from_theme )
-	);
-
-	// Bail out early if there are no missing fonts.
-	if ( empty( $to_add ) ) {
-		return $data;
-	}
-
-	// 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 ( $to_add as $slug ) {
-		$font_faces_for_family = $font_families_registered[ $slug ];
-		$family_name           = $font_faces_for_family[0]['font-family'];
-		$font_faces            = 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;
-		}
-
-		$data['settings']['typography']['fontFamilies'][] = array(
-			'fontFamily' => str_contains( $family_name, ' ' ) ? "'{$family_name}'" : $family_name,
-			'name'       => $family_name,
-			'slug'       => $slug,
-			'fontFace'   => $font_faces,
-		);
-	}
-
-	return $data;
-}
-
-// `gutenberg_register_webfonts_from_theme_json()` calls `WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()`, which instantiates `WP_Theme_JSON_Gutenberg()`;
-// Gutenberg server-side blocks are registered via the init hook with a priority value of `20`. E.g., `add_action( 'init', 'register_block_core_image', 20 )`;
-// This priority value is added dynamically during the build. See: tools/webpack/blocks.js.
-// We want to make sure Gutenberg blocks are re-registered before any Theme_JSON operations take place
-// so that we have access to updated merged data.
-add_action( 'init', 'gutenberg_register_webfonts_from_theme_json', 21 );
diff --git a/lib/experimental/rest-api.php b/lib/experimental/rest-api.php
index 8ab4b1ad509fe7..6bb2947f889147 100644
--- a/lib/experimental/rest-api.php
+++ b/lib/experimental/rest-api.php
@@ -10,15 +10,6 @@
 	die( 'Silence is golden.' );
 }
 
-/**
- * Registers the customizer nonces REST API routes.
- */
-function gutenberg_register_rest_customizer_nonces() {
-	$customizer_nonces = new WP_Rest_Customizer_Nonces();
-	$customizer_nonces->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_customizer_nonces' );
-
 /**
  * Registers the Block editor settings REST API routes.
  */
@@ -28,6 +19,7 @@ function gutenberg_register_block_editor_settings() {
 }
 add_action( 'rest_api_init', 'gutenberg_register_block_editor_settings' );
 
+
 /**
  * Shim for get_sample_permalink() to add support for auto-draft status.
  *
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
new file mode 100644
index 00000000000000..5a14e1418ed6de
--- /dev/null
+++ b/lib/experimental/script-modules.php
@@ -0,0 +1,202 @@
+<?php
+/**
+ * Add module fields from block metadata to WP_Block_Type settings.
+ *
+ * This filter allows us to register modules from block metadata and attach additional fields to
+ * WP_Block_Type instances.
+ *
+ * @param array $settings Array of determined settings for registering a block type.
+ * @param array $metadata Metadata provided for registering a block type.
+ */
+function gutenberg_filter_block_type_metadata_settings_register_view_module( $settings, $metadata = null ) {
+	$module_fields = array(
+		// @todo remove viewModule support in Gutenberg >= 17.8 (replaced by viewScriptModule).
+		'viewModule' => 'view_script_module_ids',
+	);
+	foreach ( $module_fields as $metadata_field_name => $settings_field_name ) {
+		if ( ! empty( $settings[ $metadata_field_name ] ) ) {
+			$metadata[ $metadata_field_name ] = $settings[ $metadata_field_name ];
+		}
+		if ( ! empty( $metadata[ $metadata_field_name ] ) ) {
+			$modules           = $metadata[ $metadata_field_name ];
+			$processed_modules = array();
+			if ( is_array( $modules ) ) {
+				for ( $index = 0; $index < count( $modules ); $index++ ) {
+					$processed_modules[] = gutenberg_register_block_module_id(
+						$metadata,
+						$metadata_field_name,
+						$index
+					);
+				}
+			} else {
+				$processed_modules[] = gutenberg_register_block_module_id(
+					$metadata,
+					$metadata_field_name
+				);
+			}
+			$settings[ $settings_field_name ] = $processed_modules;
+		}
+	}
+
+	return $settings;
+}
+
+add_filter( 'block_type_metadata_settings', 'gutenberg_filter_block_type_metadata_settings_register_view_module', 20, 2 );
+
+/**
+ * Finds a module ID for the selected block metadata field. It detects
+ * when a path to file was provided and finds a corresponding asset file
+ * with details necessary to register the module under an automatically
+ * generated module ID.
+ *
+ * This is analogous to the `register_block_script_handle` in WordPress Core.
+ *
+ * @param array  $metadata   Block metadata.
+ * @param string $field_name Field name to pick from metadata.
+ * @param int    $index      Optional. Index of the script to register when multiple items passed.
+ *                           Default 0.
+ * @return string Module ID.
+ */
+function gutenberg_register_block_module_id( $metadata, $field_name, $index = 0 ) {
+	if ( empty( $metadata[ $field_name ] ) ) {
+		return false;
+	}
+
+	$module_id = $metadata[ $field_name ];
+	if ( is_array( $module_id ) ) {
+		if ( empty( $module_id[ $index ] ) ) {
+			return false;
+		}
+		$module_id = $module_id[ $index ];
+	}
+
+	$module_path = remove_block_asset_path_prefix( $module_id );
+	if ( $module_id === $module_path ) {
+		return $module_id;
+	}
+
+	$path                  = dirname( $metadata['file'] );
+	$module_asset_raw_path = $path . '/' . substr_replace( $module_path, '.asset.php', - strlen( '.js' ) );
+	$module_id             = gutenberg_generate_block_asset_module_id( $metadata['name'], $field_name, $index );
+	$module_asset_path     = wp_normalize_path( realpath( $module_asset_raw_path ) );
+
+	$module_path_norm    = wp_normalize_path( realpath( $path . '/' . $module_path ) );
+	$module_uri          = get_block_asset_url( $module_path_norm );
+	$module_asset        = ! empty( $module_asset_path ) ? require $module_asset_path : array();
+	$module_dependencies = isset( $module_asset['dependencies'] ) ? $module_asset['dependencies'] : array();
+
+	wp_register_script_module(
+		$module_id,
+		$module_uri,
+		$module_dependencies,
+		isset( $module_asset['version'] ) ? $module_asset['version'] : false
+	);
+
+	return $module_id;
+}
+
+/**
+ * Generates the module ID for an asset based on the name of the block
+ * and the field name provided.
+ *
+ * This is analogous to the `generate_block_asset_handle` in WordPress Core.
+ *
+ * @param string $block_name Name of the block.
+ * @param string $field_name Name of the metadata field.
+ * @param int    $index      Optional. Index of the asset when multiple items passed.
+ *                           Default 0.
+ * @return string Generated module ID for the block's field.
+ */
+function gutenberg_generate_block_asset_module_id( $block_name, $field_name, $index = 0 ) {
+	if ( str_starts_with( $block_name, 'core/' ) ) {
+		$asset_handle = str_replace( 'core/', 'wp-block-', $block_name );
+		if ( str_starts_with( $field_name, 'editor' ) ) {
+			$asset_handle .= '-editor';
+		}
+		if ( str_starts_with( $field_name, 'view' ) ) {
+			$asset_handle .= '-view';
+		}
+		if ( $index > 0 ) {
+			$asset_handle .= '-' . ( $index + 1 );
+		}
+		return $asset_handle;
+	}
+
+	$field_mappings = array(
+		// @todo remove viewModule support in Gutenberg >= 17.8 (replaced by viewScriptModule).
+		'viewModule'       => 'view-script-module',
+		'viewScriptModule' => 'view-script-module',
+	);
+	$asset_handle   = str_replace( '/', '-', $block_name ) .
+		'-' . $field_mappings[ $field_name ];
+	if ( $index > 0 ) {
+		$asset_handle .= '-' . ( $index + 1 );
+	}
+	return $asset_handle;
+}
+
+/**
+ * Registers a REST field for block types to provide view module IDs.
+ *
+ * Adds the `view_script_module_ids` and `view_module_ids` (deprecated) field to block type objects in the REST API, which
+ * lists the script module IDs for any script modules associated with the
+ * block's viewScriptModule key.
+ */
+function gutenberg_register_view_module_ids_rest_field() {
+	// @todo remove view_module_ids support in Gutenberg >= 17.8 (replaced by view_script_module_ids).
+	register_rest_field(
+		'block-type',
+		'view_module_ids',
+		array(
+			'get_callback' => function ( $item ) {
+				$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $item['name'] );
+				if ( isset( $block_type->view_script_module_ids ) ) {
+					return $block_type->view_script_module_ids;
+				}
+				return array();
+			},
+		)
+	);
+}
+
+add_action( 'rest_api_init', 'gutenberg_register_view_module_ids_rest_field' );
+
+/**
+ * Registers the module if no module with that module identifier has already
+ * been registered.
+ *
+ * @deprecated 17.6.0 gutenberg_register_module is deprecated. Please use wp_register_script_module instead.
+ *
+ * @param string            $module_identifier The identifier of the module. Should be unique. It will be used in the final import map.
+ * @param string            $src               Full URL of the module, or path of the script relative to the WordPress root directory.
+ * @param array             $dependencies      Optional. An array of module identifiers of the dependencies of this module. The dependencies can be strings or arrays. If they are arrays, they need an `id` key with the module identifier, and can contain an `import` key with either `static` or `dynamic`. By default, dependencies that don't contain an import are considered static.
+ * @param string|false|null $version           Optional. String specifying module version number. Defaults to false. It is added to the URL as a query string for cache busting purposes. If $version is set to false, the version number is the currently installed WordPress version. If $version is set to null, no version is added.
+ */
+function gutenberg_register_module( $module_identifier, $src = '', $dependencies = array(), $version = false ) {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_register_script_module' );
+	wp_script_modules()->register( $module_identifier, $src, $dependencies, $version );
+}
+
+/**
+ * Marks the module to be enqueued in the page.
+ *
+ * @deprecated 17.6.0 gutenberg_enqueue_module is deprecated. Please use wp_enqueue_script_module instead.
+ *
+ * @param string $module_identifier The identifier of the module.
+ */
+function gutenberg_enqueue_module( $module_identifier ) {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_enqueue_script_module' );
+	wp_script_modules()->enqueue( $module_identifier );
+}
+
+/**
+ * Unmarks the module so it is not longer enqueued in the page.
+ *
+ * @deprecated 17.6.0 gutenberg_dequeue_module is deprecated. Please use wp_dequeue_script_module instead.
+ *
+ * @param string $module_identifier The identifier of the module.
+ */
+function gutenberg_dequeue_module( $module_identifier ) {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' );
+	wp_script_modules()->dequeue( $module_identifier );
+}
diff --git a/lib/experimental/sync/README.md b/lib/experimental/sync/README.md
new file mode 100644
index 00000000000000..83a105adddf7aa
--- /dev/null
+++ b/lib/experimental/sync/README.md
@@ -0,0 +1,183 @@
+# Signaling Server Documentation
+
+The signaling server allows multiple clients to exchange messages with each other through various communication topics.
+
+Topics are not defined upfront, but clients define them by subscribing to them. By subscribing to a given topic, the client tells the server to keep track of its unread messages in the given topic. By unsubscribing from a topic, the client tells the server to free the bookeeping it maintains for the given client and topic.
+
+Every client communicates with the server via `GET` or `POST`. Clients must have a unique identifier, which can be randomly generated. This identifier should be included as a parameter named `subscriber_id` in every request.
+
+Available operations:
+
+- Subscribe to topics
+- Unsubscribe from topics
+- Publish a message
+- Read pending messages
+- Ping the server
+
+## Subscribe to topics
+
+To subscribe to a set of topics, a client must send a `POST` request with the following parameters:
+
+- `subscriber_id`: Subscriber ID of the client.
+- `action`: should be set to `gutenberg_signaling_server`.
+- `message`: 
+    - `type`: should be set to `subscribe`.
+    - `topics`: array of topics that the client is interested in reading messages from, e.g., `[ 'WordPress', 'Drupal' ]`.
+
+If the action is executed successfully by the server, the server will respond with `{"result":"ok"}`.
+
+### Sample request
+
+```js
+await (
+	await fetch( window.wp.ajax.settings.url, {
+		body: new URLSearchParams( {
+			subscriber_id: '1',
+			action: 'gutenberg_signaling_server',
+			message: JSON.stringify( {
+				type: 'subscribe',
+				topics: [ 'WordPress', 'Drupal' ],
+			} ),
+		} ),
+		method: 'POST',
+	} )
+ ).text();
+```
+
+## Unsubscribe from topics
+
+To unsubscribe from a set of topics, a client must send a `POST` request with the following parameters:
+
+- `subscriber_id`: subscriber ID of the client.
+- `action`: should be set to `gutenberg_signaling_server`.
+- `message`: 
+    - `type`: should be set as `unsubscribe`.
+    - `topics`: an array of topics that the client is no longer interested in reading messages from, e.g., `['WordPress', 'Drupal']`.
+
+If the action is executed successfully by the server, the server will respond with `{"result":"ok"}`.
+
+### Sample request
+
+```js
+await (
+	await fetch( window.wp.ajax.settings.url, {
+		body: new URLSearchParams( {
+			subscriber_id: '1',
+			action: 'gutenberg_signaling_server',
+			message: JSON.stringify( {
+				type: 'unsubscribe',
+				topics: [ 'WordPress', 'Drupal' ],
+			} ),
+		} ),
+		method: 'POST',
+	} )
+ ).text();
+```
+
+## Publish a message
+
+To publish a message in a specific topic, a client must send a `POST` request with the following parameters:
+
+- `subscriber_id`: subscriber ID of the client.
+- `action`: should be set to `gutenberg_signaling_server`.
+- `message`:
+    - `type`: should be set as `publish`.
+    - `topic`: the topic where the message should be published, e.g., `WordPress`.
+    - `data`: The data to be broadcasted to every client that subscribed to the topic. The data can be any string and may be encrypted to prevent the server from reading the messages.
+
+If the action is executed successfully by the server, the server will respond with `{"result":"ok"}`.
+
+### Sample request
+
+```js
+await (
+	await fetch( window.wp.ajax.settings.url, {
+		body: new URLSearchParams( {
+			subscriber_id: '1',
+			action: 'gutenberg_signaling_server',
+			message: JSON.stringify( {
+				type: 'publish',
+				topic: 'WordPress',
+				data: 'hello I am client 1!',
+			} ),
+		} ),
+		method: 'POST',
+	} )
+ ).text();
+```
+
+## Read pending messages
+
+To read pending messages, the client should send a `GET` request with the following parameters:
+
+- `subscriber_id`: Subscriber ID of the client.
+- `action`: should be set to `gutenberg_signaling_server`.
+
+The server will respond using the [Event stream format](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format), whose content type is set to `text/event-stream;charset=UTF-8`. The Event stream format defines the following fields:
+
+- `retry`: the reconnection time, in ms. The time after which the client should check again for messages.
+- `id`: unique identifier for the server response.
+- `event`: one of `message` or `error`.
+- `data`:
+	- If `event` is `message`, data is a JSON encoded string containing an array of messages that the given client has not read yet. Each message is similar to the published message object but includes an additional property named `clients`. This property specifies the number of clients for which the message was sent. Note it does not indicate whether they have already received/requested it.
+	- If `event` is `error`, data is a description of the error.
+
+If there are no pending messages, the server's response only contains the `retry:` field. If there are pending messages, the server will respond including all the fields.
+
+### Sample request
+
+```js
+await (
+	await fetch(
+		window.wp.url.addQueryArgs( window.wp.ajax.settings.url, {
+			subscriber_id: '1',
+			action: 'gutenberg_signaling_server',
+		} )
+	)
+ ).text();
+```
+
+Sample answer from the server when there are no unread messages:
+
+```
+retry: 3000
+```
+
+Sample answer from the server when there are unread messages:
+
+```
+retry: 3000
+id: 1694809781
+event: message
+data: [{"type":"publish","topic":"WordPress","data":"hello I am client 1!","clients":2},{"type":"publish","topic":"WordPress","data":"Hi client 1 I am client 2","clients":2}]
+```
+
+## Ping the server
+
+To ensure that the server is listening and to indicate that a client is still alive, the client can periodically send a ping to the server. When the server receives a ping from a client, it will respond with a message containing `pong`. The client will receive this `pong` message when it asks the server for new messages.
+
+To send a ping, the client should send a `POST` request with the following parameters:
+
+- `subscriber_id`: Subscriber ID of the client.
+- `action`: should be set to `gutenberg_signaling_server`.
+- `message`:
+  - `type`: Should be set as `ping`.
+
+If the action is executed successfully by the server, the server will respond with `{"result":"ok"}`.
+
+#### Sample request
+
+```js
+await (
+	await fetch( window.wp.ajax.settings.url, {
+		body: new URLSearchParams( {
+			subscriber_id: '1',
+			action: 'gutenberg_signaling_server',
+			message: JSON.stringify( {
+				type: 'ping',
+			} ),
+		} ),
+		method: 'POST',
+	} )
+ ).text();
+```
diff --git a/lib/experimental/sync/class-gutenberg-http-signaling-server.php b/lib/experimental/sync/class-gutenberg-http-signaling-server.php
new file mode 100644
index 00000000000000..a41e26fdac163a
--- /dev/null
+++ b/lib/experimental/sync/class-gutenberg-http-signaling-server.php
@@ -0,0 +1,380 @@
+<?php
+/**
+ * Gutenberg_HTTP_Signaling_Server class
+ *
+ * @package    Gutenberg
+ */
+
+/**
+ * Gutenberg class that contains an HTTP based signaling server used for collaborative editing.
+ *
+ * @access private
+ * @internal
+ */
+class Gutenberg_HTTP_Signaling_Server {
+
+
+	/**
+	 * Adds a wp_ajax action to handle the signaling server requests.
+	 */
+	public static function init() {
+		$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+		if ( ! $gutenberg_experiments || ! array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
+			return;
+		}
+		add_action( 'wp_ajax_gutenberg_signaling_server', array( __CLASS__, 'do_wp_ajax_action' ) );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request.
+	 */
+	public static function do_wp_ajax_action() {
+		if ( empty( $_REQUEST ) || empty( $_REQUEST['subscriber_id'] ) ) {
+			die( 'no identifier' );
+		}
+
+		// Contains the subscriber id of the client reading or sending messages.
+		$subscriber_id = $_REQUEST['subscriber_id'];
+
+		// Example inside file: array( 2323232121 => array( 'message hello','handshake message' ) ).
+		$subscriber_to_messages_path = get_temp_dir() . DIRECTORY_SEPARATOR . 'subscribers_to_messages.txt';
+
+		// Example inside file: array( 'doc1: array( 2323232121 ), 'doc2: array( 2323232123, 2323232121 ) ).
+		$topics_to_subscribers_path = get_temp_dir() . DIRECTORY_SEPARATOR . 'topics_to_subscribers.txt';
+
+		if ( 'GET' === $_SERVER['REQUEST_METHOD'] ) {
+			static::handle_read_pending_messages( $subscriber_to_messages_path, $subscriber_id );
+		} else {
+			if ( empty( $_POST ) || empty( $_POST['message'] ) ) {
+				die( 'no message' );
+			}
+			$message = json_decode( wp_unslash( $_POST['message'] ), true );
+			if ( ! $message ) {
+				die( 'no message' );
+			}
+
+			switch ( $message['type'] ) {
+				case 'subscribe':
+					static::handle_subscribe_to_topics( $topics_to_subscribers_path, $subscriber_id, $message['topics'] );
+					break;
+				case 'unsubscribe':
+					static::handle_unsubscribe_from_topics( $topics_to_subscribers_path, $subscriber_id, $message['topics'] );
+					break;
+				case 'publish':
+					static::handle_publish_message( $topics_to_subscribers_path, $subscriber_to_messages_path, $subscriber_id, $message );
+					break;
+				case 'ping':
+					static::handle_ping( $subscriber_to_messages_path, $subscriber_id );
+					break;
+			}
+			echo wp_json_encode( array( 'result' => 'ok' ) ), PHP_EOL, PHP_EOL;
+		}
+
+		static::clean_up_old_connections( $topics_to_subscribers_path, $subscriber_to_messages_path, $subscriber_id );
+		exit;
+	}
+
+	/**
+	 * Reads the contents of $fd and returns them deserialized.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param resource $fd  A file descriptor.
+	 *
+	 * @return array Deserialized contents of fd.
+	 */
+	private static function get_contents_from_file_descriptor( $fd ) {
+		$contents_raw = stream_get_contents( $fd );
+		$result       = array();
+		if ( $contents_raw ) {
+			$result = unserialize( $contents_raw );
+		}
+		return $result;
+	}
+
+	/**
+	 * Locks a file with an exclusive lock and returns its contents deserialized.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $path  The path of a file.
+	 *
+	 * @return array File descriptor as the first element of the array and the contents of the file as the second element.
+	 */
+	private static function get_contents_and_lock_file( $path ) {
+		$fd = fopen( $path, 'c+' );
+		if ( ! $fd ) {
+			return array( $fd, null );
+		}
+		flock( $fd, LOCK_EX );
+		return array( $fd, static::get_contents_from_file_descriptor( $fd ) );
+	}
+
+	/**
+	 * Makes the file descriptor content of $fd equal to the serialization of content.
+	 * Overwrites what was previously in $fd.
+	 * Unlocks the file descriptor and closes it.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param resource $fd      A file descriptor.
+	 * @param array    $content An array with the contents to serialized and written to the file.
+	 */
+	private static function save_contents_and_unlock_file( $fd, $content ) {
+		static::save_contents_to_file_descriptor( $fd, $content );
+		flock( $fd, LOCK_UN );
+		fclose( $fd );
+	}
+
+	/**
+	 * Makes the file descriptor content of $fd equal to the serialization of content.
+	 * Overwrites what was previously in $fd.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param resource $fd      A file descriptor.
+	 * @param array    $content Content to be serialized and written in a file descriptor.
+	 */
+	private static function save_contents_to_file_descriptor( $fd, $content ) {
+		rewind( $fd );
+		$data = serialize( $content );
+		fwrite( $fd, $data );
+		ftruncate( $fd, strlen( $data ) );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request of client that wants to retrieve its messages.
+	 *
+	 * It returns the client a response following the
+	 * {@link https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#event_stream_format Event stream format}.
+	 *
+	 * ```
+	 * id: <Event ID>
+	 * retry: <Reconnection time, in ms>
+	 * event: <The type of event>
+	 * data: <The message to be sent>
+	 * ```
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $subscriber_to_messages_path The path to the file that contains the messages of the subscribers.
+	 * @param string $subscriber_id               The subscriber id.
+	 */
+	private static function handle_read_pending_messages( $subscriber_to_messages_path, $subscriber_id ) {
+		header( 'Content-Type: text/event-stream' );
+		header( 'Cache-Control: no-cache' );
+		list( $fd, $subscriber_to_messages ) = static::get_contents_and_lock_file( $subscriber_to_messages_path );
+		if ( ! $fd ) {
+			$retries = isset( $_COOKIE['signaling_server_retries'] ) ? intval( $_COOKIE['signaling_server_retries'] ) : 0;
+			$secure  = ( 'https' === parse_url( home_url(), PHP_URL_SCHEME ) );
+			setcookie( 'signaling_server_retries', $retries + 1, time() + DAY_IN_SECONDS, SITECOOKIEPATH, '', $secure );
+			echo 'id: ' . time() . PHP_EOL;
+			echo 'event: error' . PHP_EOL;
+			echo 'data: ' . 'Could not open required file.' . PHP_EOL . PHP_EOL;
+			echo 'retry: ' . 3000 * pow( 2, $retries ) . PHP_EOL;
+			exit;
+		}
+
+		if ( isset( $_COOKIE['signaling_server_retries'] ) ) {
+			$secure = ( 'https' === parse_url( home_url(), PHP_URL_SCHEME ) );
+			// unset the cookie using a past expiration date.
+			setcookie( 'signaling_server_retries', 0, time() - DAY_IN_SECONDS, SITECOOKIEPATH, '', $secure );
+		}
+
+		echo 'retry: 3000' . PHP_EOL;
+		if ( isset( $subscriber_to_messages[ $subscriber_id ] ) && count( $subscriber_to_messages[ $subscriber_id ] ) > 0 ) {
+			echo 'id: ' . time() . PHP_EOL;
+			echo 'event: message' . PHP_EOL;
+			echo 'data: ' . wp_json_encode( $subscriber_to_messages[ $subscriber_id ] ) . PHP_EOL . PHP_EOL;
+			$subscriber_to_messages[ $subscriber_id ] = array();
+			static::save_contents_to_file_descriptor( $fd, $subscriber_to_messages );
+		} else {
+			echo PHP_EOL;
+		}
+		flock( $fd, LOCK_UN );
+		fclose( $fd );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request of client that wants to subscribe to a set of topics its messages.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $topics_to_subscribers_path Topics to subscribers path.
+	 * @param string $subscriber_id              The subscriber id.
+	 * @param array  $topics                     An array of topics e.g: array( 'doc1', 'doc2' ).
+	 */
+	private static function handle_subscribe_to_topics( $topics_to_subscribers_path, $subscriber_id, $topics ) {
+		list( $fd, $topics_to_subscribers ) = static::get_contents_and_lock_file( $topics_to_subscribers_path );
+		if ( ! $fd ) {
+			die( 'Could not open required file.' );
+		}
+		foreach ( $topics as $topic ) {
+			if ( ! isset( $topics_to_subscribers[ $topic ] ) ) {
+				$topics_to_subscribers[ $topic ] = array();
+			}
+			$topics_to_subscribers[ $topic ][] = $subscriber_id;
+			$topics_to_subscribers[ $topic ]   = array_unique( $topics_to_subscribers[ $topic ] );
+		}
+		static::save_contents_and_unlock_file( $fd, $topics_to_subscribers );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request of client that wants to unsubscribe from a set of topics its messages.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $topics_to_subscribers_path Topics to subscribers path.
+	 * @param string $subscriber_id              The subscriber id.
+	 * @param array  $topics                     An array of topics e.g: array( 'doc1', 'doc2' ).
+	 */
+	private static function handle_unsubscribe_from_topics( $topics_to_subscribers_path, $subscriber_id, $topics ) {
+		list( $fd, $topics_to_subscribers ) = static::get_contents_and_lock_file( $topics_to_subscribers_path );
+		if ( ! $fd ) {
+			die( 'Could not open required file.' );
+		}
+		foreach ( $topics as $topic ) {
+			if ( $topics_to_subscribers[ $topic ] ) {
+				$topics_to_subscribers[ $topic ] = array_diff( $topics_to_subscribers[ $topic ], array( $subscriber_id ) );
+			}
+		}
+		static::save_contents_and_unlock_file( $fd, $topics_to_subscribers );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request of client that wants to publish a message.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $topics_to_subscribers_path  Topics to subscribers path.
+	 * @param string $subscriber_to_messages_path The path to the file that contains the messages of the subscribers.
+	 * @param string $subscriber_id               The subscriber id.
+	 * @param array  $message                     The message associative array.
+	 */
+	private static function handle_publish_message( $topics_to_subscribers_path, $subscriber_to_messages_path, $subscriber_id, $message ) {
+		list( $fd_topics_subscriber, $topics_to_subscribers )       = static::get_contents_and_lock_file( $topics_to_subscribers_path );
+		list( $fd_subscriber_to_messages, $subscriber_to_messages ) = static::get_contents_and_lock_file( $subscriber_to_messages_path );
+		if ( ! $fd_topics_subscriber || ! $fd_subscriber_to_messages ) {
+			die( 'Could not open required file.' );
+		}
+		$topic     = $message['topic'];
+		$receivers = $topics_to_subscribers[ $topic ];
+		if ( $receivers && count( $receivers ) > 0 ) {
+			$message['clients'] = count( $receivers );
+			foreach ( $receivers as $receiver ) {
+				if ( ! isset( $subscriber_to_messages[ $receiver ] ) ) {
+					$subscriber_to_messages[ $receiver ] = array();
+				}
+				$subscriber_to_messages[ $receiver ][] = $message;
+			}
+			static::save_contents_to_file_descriptor( $fd_subscriber_to_messages, $subscriber_to_messages );
+		}
+		flock( $fd_subscriber_to_messages, LOCK_UN );
+		fclose( $fd_subscriber_to_messages );
+		flock( $fd_topics_subscriber, LOCK_UN );
+		fclose( $fd_topics_subscriber );
+	}
+
+	/**
+	 * Handles a wp_ajax signaling server request for the ping of a client.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $subscriber_to_messages_path The path to the file that contains the messages of the subscribers.
+	 * @param string $subscriber_id               The subscriber id.
+	 */
+	private static function handle_ping( $subscriber_to_messages_path, $subscriber_id ) {
+		list( $fd_subscriber_to_messages, $subscriber_to_messages ) = static::get_contents_and_lock_file( $subscriber_to_messages_path );
+		if ( ! $fd_subscriber_to_messages ) {
+			die( 'Could not open required file.' );
+		}
+		if ( ! $subscriber_to_messages[ $subscriber_id ] ) {
+			$subscriber_to_messages[ $subscriber_id ] = array();
+		}
+		$subscriber_to_messages[ $subscriber_id ][] = array( 'type' => 'pong' );
+		static::save_contents_and_unlock_file( $fd_subscriber_to_messages, $subscriber_to_messages );
+	}
+
+
+	/**
+	 * Deletes messages and subscriber information of clients that have not interacted with the signaling server in a long time.
+	 *
+	 * @access private
+	 * @internal
+	 *
+	 * @param string $topics_to_subscribers_path  The path to the file that contains the subscribers of the topics.
+	 * @param string $subscriber_to_messages_path The path to the file that contains the messages of the subscribers.
+	 * @param string $connected_subscriber_id     The subscriber id.
+	 */
+	private static function clean_up_old_connections( $topics_to_subscribers_path, $subscriber_to_messages_path, $connected_subscriber_id ) {
+		$subscribers_to_last_connection_path = get_temp_dir() . DIRECTORY_SEPARATOR . 'subscribers_to_last_connection.txt';
+		// Example: array( 2323232121 => 34343433323(timestamp) ).
+
+		$fd_subscribers_last_connection = fopen( $subscribers_to_last_connection_path, 'c+' );
+		if ( ! $fd_subscribers_last_connection ) {
+			die( 'Could not open required file.' );
+		}
+		flock( $fd_subscribers_last_connection, LOCK_EX );
+		$subscribers_to_last_connection_time                             = static::get_contents_from_file_descriptor( $fd_subscribers_last_connection );
+		$subscribers_to_last_connection_time[ $connected_subscriber_id ] = time();
+		$needs_cleanup = false;
+		foreach ( $subscribers_to_last_connection_time as $subscriber_id => $last_connection_time ) {
+			// cleanup connections older than 1 hour.
+			if ( $last_connection_time < time() - 1 * 60 * 60 ) {
+				unset( $subscribers_to_last_connection_time[ $subscriber_id ] );
+				$needs_cleanup = true;
+			}
+		}
+		static::save_contents_to_file_descriptor( $fd_subscribers_last_connection, $subscribers_to_last_connection_time );
+
+		if ( $needs_cleanup ) {
+			$fd_subscriber_messages = fopen( $subscriber_to_messages_path, 'c+' );
+			if ( ! $fd_subscriber_messages ) {
+				die( 'Could not open required file.' );
+			}
+			flock( $fd_subscriber_messages, LOCK_EX );
+			$subscriber_to_messages = static::get_contents_from_file_descriptor( $fd_subscriber_messages );
+			foreach ( $subscriber_to_messages as $subscriber_id => $messages ) {
+				if ( ! isset( $subscribers_to_last_connection_time[ $subscriber_id ] ) ) {
+					unset( $subscriber_to_messages[ $subscriber_id ] );
+				}
+			}
+			static::save_contents_to_file_descriptor( $fd_subscriber_messages, $subscriber_to_messages );
+
+			$fd_topics_subscriber = fopen( $topics_to_subscribers_path, 'c+' );
+			if ( ! $fd_topics_subscriber ) {
+				die( 'Could not open required file.' );
+			}
+			flock( $fd_topics_subscriber, LOCK_EX );
+			$topics_to_subscribers = static::get_contents_from_file_descriptor( $fd_topics_subscriber );
+			foreach ( $topics_to_subscribers as $topic => $subscribers ) {
+				foreach ( $subscribers as $subscriber_id ) {
+					if ( ! isset( $subscribers_to_last_connection_time[ $subscriber_id ] ) ) {
+						$topics_to_subscribers[ $topic ] = array_diff( $topics_to_subscribers[ $topic ], array( $subscriber_id ) );
+					}
+				}
+			}
+			static::save_contents_to_file_descriptor( $fd_topics_subscriber, $topics_to_subscribers );
+
+			flock( $fd_subscriber_messages, LOCK_UN );
+			fclose( $fd_subscriber_messages );
+
+			flock( $fd_topics_subscriber, LOCK_UN );
+			fclose( $fd_topics_subscriber );
+		}
+
+		flock( $fd_subscribers_last_connection, LOCK_UN );
+		fclose( $fd_subscribers_last_connection );
+	}
+}
+
+Gutenberg_HTTP_Signaling_Server::init();
diff --git a/lib/experimental/synchronization.php b/lib/experimental/synchronization.php
new file mode 100644
index 00000000000000..87f13a7c685a59
--- /dev/null
+++ b/lib/experimental/synchronization.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Bootstraps synchronization (collaborative editing).
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Initializes the collaborative editing secret.
+ */
+function gutenberg_rest_api_init_collaborative_editing() {
+	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+	if ( ! $gutenberg_experiments || ! array_key_exists( 'gutenberg-sync-collaboration', $gutenberg_experiments ) ) {
+		return;
+	}
+	$collaborative_editing_secret = get_site_option( 'collaborative_editing_secret' );
+	if ( ! $collaborative_editing_secret ) {
+		$collaborative_editing_secret = wp_generate_password( 64, false );
+	}
+	add_site_option( 'collaborative_editing_secret', $collaborative_editing_secret );
+
+	wp_add_inline_script( 'wp-sync', 'window.__experimentalCollaborativeEditingSecret = "' . $collaborative_editing_secret . '";', 'before' );
+}
+add_action( 'admin_init', 'gutenberg_rest_api_init_collaborative_editing' );
diff --git a/lib/experimental/webfonts.php b/lib/experimental/webfonts.php
deleted file mode 100644
index 201101d1d7093e..00000000000000
--- a/lib/experimental/webfonts.php
+++ /dev/null
@@ -1,229 +0,0 @@
-<?php
-/**
- * Webfonts API functions.
- *
- * @package    WordPress
- * @subpackage WebFonts
- * @since      6.0.0
- */
-
-if ( ! function_exists( 'wp_webfonts' ) ) {
-	/**
-	 * Instantiates the webfonts controller, if not already set, and returns it.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @return WP_Webfonts Instance of the controller.
-	 */
-	function wp_webfonts() {
-		global $wp_webfonts;
-
-		if ( ! $wp_webfonts instanceof WP_Webfonts ) {
-			$wp_webfonts = new WP_Webfonts();
-			$wp_webfonts->init();
-		}
-
-		return $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.
-	 */
-	function wp_register_webfonts( array $webfonts ) {
-		$registered_webfont_slugs = array();
-
-		foreach ( $webfonts as $webfont ) {
-			$slug = wp_register_webfont( $webfont );
-
-			if ( is_string( $slug ) ) {
-				$registered_webfont_slugs[ $slug ] = true;
-			}
-		}
-
-		return array_keys( $registered_webfont_slugs );
-	}
-}
-
-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
-	 *
-	 * @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 ) {
-		return wp_webfonts()->register_webfont( $webfont );
-	}
-}
-
-if ( ! function_exists( 'wp_enqueue_webfonts' ) ) {
-	/**
-	 * 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>
-	 *
-	 * Font families should be enqueued from the `init` hook or later.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param string[] $webfonts Font families to be enqueued.
-	 */
-	function wp_enqueue_webfonts( array $webfonts ) {
-		foreach ( $webfonts as $webfont ) {
-			wp_enqueue_webfont( $webfont );
-		}
-	}
-}
-
-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
-	 *
-	 * @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 ) {
-		return wp_webfonts()->enqueue_webfont( $font_family_name );
-	}
-}
-
-if ( ! function_exists( 'wp_register_webfont_provider' ) ) {
-	/**
-	 * Registers a custom font service provider.
-	 *
-	 * A webfont provider contains the business logic for how to
-	 * interact with a remote font service and how to generate
-	 * the `@font-face` styles for that remote service.
-	 *
-	 * How to register a custom font service provider:
-	 *    1. Load its class file into memory before registration.
-	 *    2. Pass the class' name to this function.
-	 *
-	 * For example, for a class named `My_Custom_Font_Service_Provider`:
-	 * ```
-	 *    wp_register_webfont_provider( My_Custom_Font_Service_Provider::class );
-	 * ```
-	 *
-	 * @since 6.0.0
-	 *
-	 * @param string $name      The provider's name.
-	 * @param string $classname The provider's class name.
-	 *                          The class should be a child of `WP_Webfonts_Provider`.
-	 *                          See {@see WP_Webfonts_Provider}.
-	 *
-	 * @return bool True if successfully registered, else false.
-	 */
-	function wp_register_webfont_provider( $name, $classname ) {
-		return wp_webfonts()->register_provider( $name, $classname );
-	}
-}
-
-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 6.0.0
-	 *
-	 * @return WP_Webfonts_Provider[] All registered providers, each keyed by their unique ID.
-	 */
-	function wp_get_webfont_providers() {
-		return wp_webfonts()->get_providers();
-	}
-}
-
-/**
- * Add webfonts mime types.
- */
-add_filter(
-	'mime_types',
-	function( $mime_types ) {
-		// Webfonts formats.
-		$mime_types['woff2'] = 'font/woff2';
-		$mime_types['woff']  = 'font/woff';
-		$mime_types['ttf']   = 'font/ttf';
-		$mime_types['eot']   = 'application/vnd.ms-fontobject';
-		$mime_types['otf']   = 'application/x-font-opentype';
-
-		return $mime_types;
-	}
-);
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 1296cdd03b89fa..256a185a3af692 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -5,26 +5,28 @@
  * @package gutenberg
  */
 
-/**
- * The main entry point for the Gutenberg experiments page.
- *
- * @since 6.3.0
- */
-function the_gutenberg_experiments() {
-	?>
-	<div
-		id="experiments-editor"
-		class="wrap"
-	>
-	<h1><?php echo __( 'Experimental settings', 'gutenberg' ); ?></h1>
-	<?php settings_errors(); ?>
-	<form method="post" action="options.php">
-		<?php settings_fields( 'gutenberg-experiments' ); ?>
-		<?php do_settings_sections( 'gutenberg-experiments' ); ?>
-		<?php submit_button(); ?>
-	</form>
-	</div>
-	<?php
+if ( ! function_exists( 'the_gutenberg_experiments' ) ) {
+	/**
+	 * The main entry point for the Gutenberg experiments page.
+	 *
+	 * @since 6.3.0
+	 */
+	function the_gutenberg_experiments() {
+		?>
+		<div
+			id="experiments-editor"
+			class="wrap"
+		>
+		<h1><?php echo __( 'Experimental settings', 'gutenberg' ); ?></h1>
+		<?php settings_errors(); ?>
+		<form method="post" action="options.php">
+			<?php settings_fields( 'gutenberg-experiments' ); ?>
+			<?php do_settings_sections( 'gutenberg-experiments' ); ?>
+			<?php submit_button(); ?>
+		</form>
+		</div>
+		<?php
+	}
 }
 
 /**
@@ -42,32 +44,32 @@ function gutenberg_initialize_experiments_settings() {
 	);
 
 	add_settings_field(
-		'gutenberg-zoomed-out-view',
-		__( 'Zoomed out view ', 'gutenberg' ),
+		'gutenberg-sync-collaboration',
+		__( 'Live Collaboration and offline persistence', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
-			'id'    => 'gutenberg-zoomed-out-view',
+			'label' => __( 'Enable the live collaboration and offline persistence between peers', 'gutenberg' ),
+			'id'    => 'gutenberg-sync-collaboration',
 		)
 	);
 
 	add_settings_field(
-		'gutenberg-off-canvas-navigation-editor',
-		__( 'Off canvas navigation editor ', 'gutenberg' ),
+		'gutenberg-custom-dataviews',
+		__( 'Custom dataviews', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test a new "off canvas" editor for navigation block using the block inspector and a tree view of the current menu', 'gutenberg' ),
-			'id'    => 'gutenberg-off-canvas-navigation-editor',
+			'label' => __( 'Test the custom dataviews in the pages page.', 'gutenberg' ),
+			'id'    => 'gutenberg-custom-dataviews',
 		)
 	);
 
 	add_settings_field(
 		'gutenberg-color-randomizer',
-		__( 'Color randomizer ', 'gutenberg' ),
+		__( 'Color randomizer', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
@@ -78,14 +80,122 @@ function gutenberg_initialize_experiments_settings() {
 	);
 
 	add_settings_field(
-		'gutenberg-block-inspector-tabs',
-		__( 'Block inspector tabs ', 'gutenberg' ),
+		'gutenberg-block-experiments',
+		__( 'Experimental blocks', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable experimental blocks.<p class="description">(Warning: these blocks may have significant changes during development that cause validation errors and display issues.)</p>', 'gutenberg' ),
+			'id'    => 'gutenberg-block-experiments',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-form-blocks',
+		__( 'Form and input blocks', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test new blocks to allow building forms (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ),
+			'id'    => 'gutenberg-form-blocks',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-grid-interactivity',
+		__( 'Grid interactivity', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test enhancements to the Grid block that let you move and resize items in the editor canvas.', 'gutenberg' ),
+			'id'    => 'gutenberg-grid-interactivity',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-no-tinymce',
+		__( 'Disable TinyMCE and Classic block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Disable TinyMCE and Classic block', 'gutenberg' ),
+			'id'    => 'gutenberg-no-tinymce',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-full-page-client-side-navigation',
+		__( 'Enable full page client-side navigation', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable full page client-side navigation using the Interactivity API', 'gutenberg' ),
+			'id'    => 'gutenberg-full-page-client-side-navigation',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-new-posts-dashboard',
+		__( 'Redesigned posts dashboard', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable a redesigned posts dashboard.', 'gutenberg' ),
+			'id'    => 'gutenberg-new-posts-dashboard',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-quick-edit-dataviews',
+		__( 'Quick Edit in DataViews', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test a new block inspector view splitting settings and appearance controls into tabs', 'gutenberg' ),
-			'id'    => 'gutenberg-block-inspector-tabs',
+			'label' => __( 'Allow access to a quick edit panel in the pages data views.', 'gutenberg' ),
+			'id'    => 'gutenberg-quick-edit-dataviews',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-block-comment',
+		__( 'Block Comments', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable multi-user commenting on blocks', 'gutenberg' ),
+			'id'    => 'gutenberg-block-comment',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-media-processing',
+		__( 'Client-side media processing', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable client-side media processing.', 'gutenberg' ),
+			'id'    => 'gutenberg-media-processing',
+		)
+	);
+
+	add_settings_field(
+		'gutenberg-editor-write-mode',
+		__( 'Editor write mode', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable write mode in editor.', 'gutenberg' ),
+			'id'    => 'gutenberg-editor-write-mode',
 		)
 	);
 
@@ -122,26 +232,7 @@ function gutenberg_display_experiment_field( $args ) {
  */
 function gutenberg_display_experiment_section() {
 	?>
-	<p><?php echo __( "The block editor includes experimental features that are useable while they're in development. Select the ones you'd like to enable. These features are likely to change, so avoid using them in production.", 'gutenberg' ); ?></p>
+	<p><?php echo __( "The block editor includes experimental features that are usable while they're in development. Select the ones you'd like to enable. These features are likely to change, so avoid using them in production.", 'gutenberg' ); ?></p>
 
 	<?php
 }
-
-/**
- * Extends default editor settings with experiments settings.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_experiments_editor_settings( $settings ) {
-	// The refactored gallery currently can't be run on sites with use_balanceTags option set.
-	// This bypass needs to remain in place until this is resolved and a patch released.
-	// https://core.trac.wordpress.org/ticket/54130.
-	$experiments_settings = array(
-		'__unstableGalleryWithImageBlocks' => (int) get_option( 'use_balanceTags' ) !== 1 || is_wp_version_compatible( '5.9' ),
-	);
-	return array_merge( $settings, $experiments_settings );
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_experiments_editor_settings' );
diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php
new file mode 100644
index 00000000000000..c4446cf29cf011
--- /dev/null
+++ b/lib/global-styles-and-settings.php
@@ -0,0 +1,428 @@
+<?php
+/**
+ * API to interact with global settings & styles.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Returns the stylesheet resulting of merging core, theme, and user data.
+ *
+ * @param array $types Types of styles to load. Optional.
+ *                     It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles.
+ *                     If empty, it'll load the following:
+ *                     - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
+ *                     - for themes with theme.json: 'variables', 'presets', 'styles'.
+ *
+ * @return string Stylesheet.
+ */
+function gutenberg_get_global_stylesheet( $types = array() ) {
+	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
+	$can_use_cached = empty( $types ) && ! WP_DEBUG;
+	$cache_key      = 'gutenberg_get_global_stylesheet';
+	$cache_group    = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $tree );
+
+	$supports_theme_json = wp_theme_has_theme_json();
+	if ( empty( $types ) && ! $supports_theme_json ) {
+		$types = array( 'variables', 'presets', 'base-layout-styles' );
+	} elseif ( empty( $types ) ) {
+		$types = array( 'variables', 'presets', 'styles' );
+	}
+
+	/*
+	 * If variables are part of the stylesheet,
+	 * we add them.
+	 *
+	 * This is so themes without a theme.json still work as before 5.9:
+	 * they can override the default presets.
+	 * See https://core.trac.wordpress.org/ticket/54782
+	 */
+	$styles_variables = '';
+	if ( in_array( 'variables', $types, true ) ) {
+		/*
+		 * We only use the default, theme, and custom origins.
+		 * This is because styles for blocks origin are added
+		 * at a later phase (render cycle) so we only render the ones in use.
+		 * @see wp_add_global_styles_for_blocks
+		 */
+		$origins          = array( 'default', 'theme', 'custom' );
+		$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins );
+		$types            = array_diff( $types, array( 'variables' ) );
+	}
+
+	/*
+	 * For the remaining types (presets, styles), we do consider origins:
+	 *
+	 * - themes without theme.json: only the classes for the presets defined by core
+	 * - themes with theme.json: the presets and styles classes, both from core and the theme
+	 */
+	$styles_rest = '';
+	if ( ! empty( $types ) ) {
+		/*
+		 * We only use the default, theme, and custom origins.
+		 * This is because styles for blocks origin are added
+		 * at a later phase (render cycle) so we only render the ones in use.
+		 * @see wp_add_global_styles_for_blocks
+		 */
+		$origins = array( 'default', 'theme', 'custom' );
+
+		/*
+		* If the theme doesn't have theme.json but supports both appearance tools and color palette,
+		* the 'theme' origin should be included so color palette presets are also output.
+		*/
+		if ( ! $supports_theme_json && ( current_theme_supports( 'appearance-tools' ) || current_theme_supports( 'border' ) ) && current_theme_supports( 'editor-color-palette' ) ) {
+			$origins = array( 'default', 'theme' );
+		} elseif ( ! $supports_theme_json ) {
+			$origins = array( 'default' );
+		}
+		$styles_rest = $tree->get_stylesheet( $types, $origins );
+	}
+	$stylesheet = $styles_variables . $styles_rest;
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+	return $stylesheet;
+}
+
+/**
+ * Function to get the settings resulting of merging core, theme, and user data.
+ *
+ * @param array $path    Path to the specific setting to retrieve. Optional.
+ *                       If empty, will return all settings.
+ * @param array $context {
+ *     Metadata to know where to retrieve the $path from. Optional.
+ *
+ *     @type string $block_name Which block to retrieve the settings from.
+ *                              If empty, it'll return the settings for the global context.
+ *     @type string $origin     Which origin to take data from.
+ *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
+ *                              If empty or unknown, 'all' is used.
+ * }
+ *
+ * @return array The settings to retrieve.
+ */
+function gutenberg_get_global_settings( $path = array(), $context = array() ) {
+	if ( ! empty( $context['block_name'] ) ) {
+		$new_path = array( 'blocks', $context['block_name'] );
+		foreach ( $path as $subpath ) {
+			$new_path[] = $subpath;
+		}
+		$path = $new_path;
+	}
+
+	// This is the default value when no origin is provided or when it is 'all'.
+	$origin = 'custom';
+	if (
+		! wp_theme_has_theme_json() ||
+		( isset( $context['origin'] ) && 'base' === $context['origin'] )
+	) {
+		$origin = 'theme';
+	}
+
+	$cache_group = 'theme_json';
+	$cache_key   = 'gutenberg_get_global_settings_' . $origin;
+	$settings    = wp_cache_get( $cache_key, $cache_group );
+
+	if ( false === $settings || WP_DEBUG ) {
+		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_settings();
+		wp_cache_set( $cache_key, $settings, $cache_group );
+	}
+
+	return _wp_array_get( $settings, $path, $settings );
+}
+
+/**
+ * Gets the global styles custom css from theme.json.
+ *
+ * @return string
+ */
+function gutenberg_get_global_styles_custom_css() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' );
+	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
+	$can_use_cached = ! WP_DEBUG;
+	$cache_key      = 'gutenberg_get_global_custom_css';
+	$cache_group    = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+
+	if ( ! wp_theme_has_theme_json() ) {
+		return '';
+	}
+
+	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$stylesheet = $tree->get_custom_css();
+
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+
+	return $stylesheet;
+}
+
+/**
+ * Gets the global styles base custom CSS from theme.json.
+ *
+ * @since 6.6.0
+ *
+ * @return string The global base custom CSS.
+ */
+function gutenberg_get_global_styles_base_custom_css() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' );
+	if ( ! wp_theme_has_theme_json() ) {
+		return '';
+	}
+
+	$can_use_cached = ! WP_DEBUG;
+
+	$cache_key   = 'gutenberg_get_global_styles_base_custom_css';
+	$cache_group = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+
+	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$stylesheet = $tree->get_base_custom_css();
+
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+
+	return $stylesheet;
+}
+
+/**
+ * Adds the global styles per-block custom CSS from theme.json
+ * to the inline style for each block.
+ *
+ * @since 6.6.0
+ *
+ * @global WP_Styles $wp_styles
+ */
+function gutenberg_add_global_styles_block_custom_css() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_add_global_styles_for_blocks' );
+	global $wp_styles;
+
+	if ( ! wp_theme_has_theme_json() || ! wp_should_load_separate_core_block_assets() ) {
+		return;
+	}
+
+	$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$block_nodes = $tree->get_block_custom_css_nodes();
+
+	foreach ( $block_nodes as $metadata ) {
+		$block_css = $tree->get_block_custom_css( $metadata['css'], $metadata['selector'] );
+
+		$stylesheet_handle = 'global-styles';
+
+		/*
+		 * When `wp_should_load_separate_core_block_assets()` is true, follow a similar
+		 * logic to the one in `gutenberg_add_global_styles_for_blocks` to add the custom
+		 * css only when the block is rendered.
+		 */
+		if ( isset( $metadata['name'] ) ) {
+			if ( str_starts_with( $metadata['name'], 'core/' ) ) {
+				$block_name   = str_replace( 'core/', '', $metadata['name'] );
+				$block_handle = 'wp-block-' . $block_name;
+				if ( in_array( $block_handle, $wp_styles->queue, true ) ) {
+					wp_add_inline_style( $stylesheet_handle, $block_css );
+				}
+			} else {
+				wp_add_inline_style( $stylesheet_handle, $block_css );
+			}
+		}
+	}
+}
+
+
+/**
+ * Adds global style rules to the inline style for each block.
+ *
+ * @global WP_Styles $wp_styles
+ *
+ * @return void
+ */
+function gutenberg_add_global_styles_for_blocks() {
+	global $wp_styles;
+	$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$tree        = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $tree );
+	$block_nodes = $tree->get_styles_block_nodes();
+
+	$can_use_cached = ! wp_is_development_mode( 'theme' );
+	$update_cache   = false;
+
+	if ( $can_use_cached ) {
+		// Hash the merged WP_Theme_JSON data to bust cache on settings or styles change.
+		$cache_hash = md5( wp_json_encode( $tree->get_raw_data() ) );
+		$cache_key  = 'wp_styles_for_blocks';
+		$cached     = get_transient( $cache_key );
+
+		// Reset the cached data if there is no value or if the hash has changed.
+		if ( ! is_array( $cached ) || $cached['hash'] !== $cache_hash ) {
+			$cached = array(
+				'hash'   => $cache_hash,
+				'blocks' => array(),
+			);
+
+			// Update the cache if the hash has changed.
+			$update_cache = true;
+		}
+	}
+
+	foreach ( $block_nodes as $metadata ) {
+		if ( $can_use_cached ) {
+			// Use the block name as the key for cached CSS data. Otherwise, use a hash of the metadata.
+			$cache_node_key = isset( $metadata['name'] ) ? $metadata['name'] : md5( wp_json_encode( $metadata ) );
+
+			if ( isset( $cached['blocks'][ $cache_node_key ] ) ) {
+				$block_css = $cached['blocks'][ $cache_node_key ];
+			} else {
+				$block_css                           = $tree->get_styles_for_block( $metadata );
+				$cached['blocks'][ $cache_node_key ] = $block_css;
+
+				// Update the cache if the cache contents have changed.
+				$update_cache = true;
+			}
+		} else {
+			$block_css = $tree->get_styles_for_block( $metadata );
+		}
+
+		if ( ! wp_should_load_separate_core_block_assets() ) {
+			wp_add_inline_style( 'global-styles', $block_css );
+			continue;
+		}
+
+		$stylesheet_handle = 'global-styles';
+
+		/*
+		 * When `wp_should_load_separate_core_block_assets()` is true, block styles are
+		 * enqueued for each block on the page in class WP_Block's render function.
+		 * This means there will be a handle in the styles queue for each of those blocks.
+		 * Block-specific global styles should be attached to the global-styles handle, but
+		 * only for blocks on the page, thus we check if the block's handle is in the queue
+		 * before adding the inline style.
+		 * This conditional loading only applies to core blocks.
+		 */
+		if ( isset( $metadata['name'] ) ) {
+			if ( str_starts_with( $metadata['name'], 'core/' ) ) {
+				$block_name   = str_replace( 'core/', '', $metadata['name'] );
+				$block_handle = 'wp-block-' . $block_name;
+				if ( in_array( $block_handle, $wp_styles->queue, true ) ) {
+					wp_add_inline_style( $stylesheet_handle, $block_css );
+				}
+			} else {
+				wp_add_inline_style( $stylesheet_handle, $block_css );
+			}
+		}
+
+		// The likes of block element styles from theme.json do not have  $metadata['name'] set.
+		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
+			$block_name = wp_get_block_name_from_theme_json_path( $metadata['path'] );
+			if ( $block_name ) {
+				if ( str_starts_with( $block_name, 'core/' ) ) {
+					$block_name   = str_replace( 'core/', '', $block_name );
+					$block_handle = 'wp-block-' . $block_name;
+					if ( in_array( $block_handle, $wp_styles->queue, true ) ) {
+						wp_add_inline_style( $stylesheet_handle, $block_css );
+					}
+				} else {
+					wp_add_inline_style( $stylesheet_handle, $block_css );
+				}
+			}
+		}
+	}
+
+	if ( $update_cache ) {
+		set_transient( $cache_key, $cached );
+	}
+}
+
+/**
+ * Private function to clean the caches used by gutenberg_get_global_settings method.
+ *
+ * @access private
+ */
+function _gutenberg_clean_theme_json_caches() {
+	wp_cache_delete( 'wp_theme_has_theme_json', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_settings_custom', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_settings_theme', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_custom_css', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_styles_base_custom_css', 'theme_json' );
+	WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+}
+add_action( 'start_previewing_theme', '_gutenberg_clean_theme_json_caches' );
+add_action( 'switch_theme', '_gutenberg_clean_theme_json_caches' );
+
+/**
+ * Gets the styles resulting of merging core, theme, and user data.
+ *
+ * @since 5.9.0
+ * @since 6.3.0 the internal link format "var:preset|color|secondary" is resolved
+ * to "var(--wp--preset--font-size--small)" so consumers don't have to.
+ * @since 6.3.0 `transforms` is now usable in the `context` parameter. In case [`transforms`]['resolve_variables']
+ * is defined, variables are resolved to their value in the styles.
+ *
+ * @param array $path    Path to the specific style to retrieve. Optional.
+ *                       If empty, will return all styles.
+ * @param array $context {
+ *     Metadata to know where to retrieve the $path from. Optional.
+ *
+ *     @type string $block_name Which block to retrieve the styles from.
+ *                              If empty, it'll return the styles for the global context.
+ *     @type string $origin     Which origin to take data from.
+ *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
+ *                              If empty or unknown, 'all' is used.
+ *     @type array $transforms Which transformation(s) to apply.
+ *                              Valid value is array( 'resolve-variables' ).
+ *                              If defined, variables are resolved to their value in the styles.
+ * }
+ * @return array The styles to retrieve.
+ */
+function gutenberg_get_global_styles( $path = array(), $context = array() ) {
+	if ( ! empty( $context['block_name'] ) ) {
+		$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
+	}
+
+	$origin = 'custom';
+	if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) {
+		$origin = 'theme';
+	}
+
+	$resolve_variables = isset( $context['transforms'] )
+	&& is_array( $context['transforms'] )
+	&& in_array( 'resolve-variables', $context['transforms'], true );
+
+	$merged_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin );
+	if ( $resolve_variables ) {
+		$merged_data = WP_Theme_JSON_Gutenberg::resolve_variables( $merged_data );
+	}
+	$styles = $merged_data->get_raw_data()['styles'];
+	return _wp_array_get( $styles, $path, $styles );
+}
+
+/**
+ * Returns the current theme's wanted patterns (slugs) to be
+ * registered from Pattern Directory.
+ *
+ * @since 6.3.0
+ *
+ * @return string[]
+ */
+function gutenberg_get_theme_directory_pattern_slugs() {
+	return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
+}
diff --git a/lib/init.php b/lib/init.php
index 71b6a276c60f33..13ca26d4b9e83c 100644
--- a/lib/init.php
+++ b/lib/init.php
@@ -14,8 +14,8 @@
  */
 function gutenberg_menu() {
 	add_menu_page(
-		'Gutenberg',
-		'Gutenberg',
+		__( 'Gutenberg', 'gutenberg' ),
+		__( 'Gutenberg', 'gutenberg' ),
 		'edit_posts',
 		'gutenberg',
 		'',
@@ -51,7 +51,7 @@ function gutenberg_menu() {
 		'gutenberg',
 		__( 'Experiments Settings', 'gutenberg' ),
 		__( 'Experiments', 'gutenberg' ),
-		'edit_posts',
+		'manage_options',
 		'gutenberg-experiments',
 		'the_gutenberg_experiments'
 	);
diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php
new file mode 100644
index 00000000000000..ff68936f054a7e
--- /dev/null
+++ b/lib/interactivity-api.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Interactivity API functions specific for the Gutenberg editor plugin.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds script data to the interactivity-router script module.
+ *
+ * This filter is registered conditionally anticipating a WordPress Core change to add the script module data.
+ * The filter runs on 'after_setup_theme' (when Core registers Interactivity and Script Modules hooks)
+ * to ensure that the conditional registration happens after Core and correctly determine whether
+ * the filter should be added.
+ *
+ * @see https://github.com/WordPress/wordpress-develop/pull/7304
+ */
+function gutenberg_register_interactivity_script_module_data_hooks() {
+	if ( ! has_filter( 'script_module_data_@wordpress/interactivity-router', array( wp_interactivity(), 'filter_script_module_interactivity_router_data' ) ) ) {
+		add_filter(
+			'script_module_data_@wordpress/interactivity-router',
+			function ( $data ) {
+				if ( ! isset( $data['i18n'] ) ) {
+					$data['i18n'] = array();
+				}
+				$data['i18n']['loading'] = __( 'Loading page, please wait.', 'default' );
+				$data['i18n']['loaded']  = __( 'Page Loaded.', 'default' );
+				return $data;
+			}
+		);
+	}
+}
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
diff --git a/lib/load.php b/lib/load.php
index 70dbf944535255..26af78f3173c53 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -28,126 +28,156 @@ function gutenberg_is_experiment_enabled( $name ) {
 	return ! empty( $experiments[ $name ] );
 }
 
-// These files only need to be loaded if within a rest server instance
+// These files only need to be loaded if within a rest server instance.
 // which this class will exist if that is the case.
 if ( class_exists( 'WP_REST_Controller' ) ) {
 	if ( ! class_exists( 'WP_REST_Block_Editor_Settings_Controller' ) ) {
 		require_once __DIR__ . '/experimental/class-wp-rest-block-editor-settings-controller.php';
 	}
 
-	// WordPress 6.0 compat.
-	require_once __DIR__ . '/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php';
-	require_once __DIR__ . '/compat/wordpress-6.0/class-gutenberg-rest-pattern-directory-controller-6-0.php';
-	require_once __DIR__ . '/compat/wordpress-6.0/class-gutenberg-rest-edit-site-export-controller.php';
-	if ( ! class_exists( 'WP_REST_Block_Pattern_Categories_Controller' ) ) {
-		require_once __DIR__ . '/compat/wordpress-6.0/class-wp-rest-block-pattern-categories-controller.php';
-	}
-	require_once __DIR__ . '/compat/wordpress-6.0/rest-api.php';
-
-	// 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-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-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';
-	require_once __DIR__ . '/compat/wordpress-6.2/block-patterns.php';
-
-	// Experimental.
-	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
-		require_once __DIR__ . '/experimental/class-wp-rest-customizer-nonces.php';
-	}
+	// WordPress 6.7 compat.
+	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php';
+	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php';
+	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-server.php';
+	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
+
+	// WordPress 6.8 compat.
+	require __DIR__ . '/compat/wordpress-6.8/block-comments.php';
+	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php';
+	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-post-types-controller-6-8.php';
+	require __DIR__ . '/compat/wordpress-6.8/rest-api.php';
+
+	// Plugin specific code.
+	require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php';
+	require_once __DIR__ . '/class-wp-rest-edit-site-export-controller-gutenberg.php';
+	require_once __DIR__ . '/rest-api.php';
+
 	require_once __DIR__ . '/experimental/rest-api.php';
+	require_once __DIR__ . '/experimental/kses-allowed-html.php';
+}
+
+// Experimental signaling server.
+if ( ! class_exists( 'Gutenberg_HTTP_Singling_Server' ) ) {
+	require_once __DIR__ . '/experimental/sync/class-gutenberg-http-signaling-server.php';
 }
 
 require __DIR__ . '/experimental/editor-settings.php';
 
 // Gutenberg plugin compat.
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';
-
-// WordPress 6.0 compat.
-require __DIR__ . '/compat/wordpress-6.0/block-gallery.php';
-require __DIR__ . '/compat/wordpress-6.0/block-editor-settings.php';
-require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php';
-require __DIR__ . '/compat/wordpress-6.0/render-svg-filters.php';
-require __DIR__ . '/compat/wordpress-6.0/post-lock.php';
-require __DIR__ . '/compat/wordpress-6.0/blocks.php';
-require __DIR__ . '/compat/wordpress-6.0/block-template-utils.php';
-require __DIR__ . '/compat/wordpress-6.0/functions.php';
-require __DIR__ . '/compat/wordpress-6.0/class-wp-theme-json-6-0.php';
-require __DIR__ . '/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php';
-require __DIR__ . '/compat/wordpress-6.0/block-patterns.php';
-require __DIR__ . '/compat/wordpress-6.0/site-editor.php';
-require __DIR__ . '/compat/wordpress-6.0/edit-form-blocks.php';
-require __DIR__ . '/compat/wordpress-6.0/block-patterns-update.php';
-require __DIR__ . '/compat/wordpress-6.0/client-assets.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/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';
-require __DIR__ . '/compat/wordpress-6.1/script-loader.php';
-require __DIR__ . '/compat/wordpress-6.1/date-settings.php';
-require __DIR__ . '/compat/wordpress-6.1/block-patterns.php';
-require __DIR__ . '/compat/wordpress-6.1/edit-form-blocks.php';
-require __DIR__ . '/compat/wordpress-6.1/template-parts-screen.php';
-require __DIR__ . '/compat/wordpress-6.1/theme.php';
-
-// WordPress 6.2 compat.
-require __DIR__ . '/compat/wordpress-6.2/script-loader.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/class-wp-theme-json-6-2.php';
+require __DIR__ . '/compat/plugin/fonts.php';
+
+// The Token Map was created to support the HTML API. It must be loaded before it.
+require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php';
+
+// Type annotations were added in 6.7 so every file is updated.
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php';
+require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php';
+
+// WordPress 6.7 compat.
+require __DIR__ . '/compat/wordpress-6.7/block-templates.php';
+require __DIR__ . '/compat/wordpress-6.7/blocks.php';
+require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
+require __DIR__ . '/compat/wordpress-6.7/script-modules.php';
+require __DIR__ . '/compat/wordpress-6.7/class-wp-block-templates-registry.php';
+require __DIR__ . '/compat/wordpress-6.7/compat.php';
+require __DIR__ . '/compat/wordpress-6.7/post-formats.php';
+
+// WordPress 6.8 compat.
+require __DIR__ . '/compat/wordpress-6.8/preload.php';
+require __DIR__ . '/compat/wordpress-6.8/blocks.php';
+require __DIR__ . '/compat/wordpress-6.8/functions.php';
+require __DIR__ . '/compat/wordpress-6.8/post.php';
+require __DIR__ . '/compat/wordpress-6.8/site-editor.php';
+require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-user-controller.php';
 
 // 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-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';
-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';
+require __DIR__ . '/experimental/l10n.php';
+require __DIR__ . '/experimental/synchronization.php';
+require __DIR__ . '/experimental/script-modules.php';
+require __DIR__ . '/experimental/posts/load.php';
+
+if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
+	require __DIR__ . '/experimental/disable-tinymce.php';
+}
+
+// Load the BC Layer to avoid fatal errors of extenders using the Fonts API.
+// @core-merge: do not merge the BC layer files into WordPress Core.
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-provider.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-utils.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-resolver.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
+require __DIR__ . '/experimental/font-face/bc-layer/webfonts-deprecations.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-utils.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-provider.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-web-fonts.php';
 
 // Plugin specific code.
+require __DIR__ . '/script-loader.php';
+require __DIR__ . '/global-styles-and-settings.php';
+require __DIR__ . '/class-wp-theme-json-data-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php';
+require __DIR__ . '/class-wp-duotone-gutenberg.php';
 require __DIR__ . '/blocks.php';
+require __DIR__ . '/block-editor-settings.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
 require __DIR__ . '/experiments-page.php';
+require __DIR__ . '/interactivity-api.php';
+require __DIR__ . '/block-template-utils.php';
+if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+	require __DIR__ . '/experimental/full-page-client-side-navigation.php';
+}
 
 // Copied package PHP files.
 if ( is_dir( __DIR__ . '/../build/style-engine' ) ) {
-	require_once __DIR__ . '/../build/style-engine/style-engine-gutenberg.php';
-	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-processor-gutenberg.php';
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
+	require_once __DIR__ . '/../build/style-engine/style-engine-gutenberg.php';
 }
 
 // Block supports overrides.
-require __DIR__ . '/block-supports/utils.php';
 require __DIR__ . '/block-supports/settings.php';
 require __DIR__ . '/block-supports/elements.php';
 require __DIR__ . '/block-supports/colors.php';
 require __DIR__ . '/block-supports/typography.php';
 require __DIR__ . '/block-supports/border.php';
 require __DIR__ . '/block-supports/layout.php';
+require __DIR__ . '/block-supports/position.php';
 require __DIR__ . '/block-supports/spacing.php';
 require __DIR__ . '/block-supports/dimensions.php';
 require __DIR__ . '/block-supports/duotone.php';
+require __DIR__ . '/block-supports/shadow.php';
+require __DIR__ . '/block-supports/background.php';
+require __DIR__ . '/block-supports/block-style-variations.php';
+
+// Data views.
+require_once __DIR__ . '/experimental/data-views.php';
+
+// Client-side media processing.
+if ( gutenberg_is_experiment_enabled( 'gutenberg-media-processing' ) ) {
+	require_once __DIR__ . '/experimental/media/load.php';
+}
diff --git a/lib/rest-api.php b/lib/rest-api.php
new file mode 100644
index 00000000000000..424927acf1f4a0
--- /dev/null
+++ b/lib/rest-api.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+/**
+ * Overrides the REST controller for the `wp_global_styles` post type.
+ *
+ * @param array $args Array of arguments for registering a post type.
+ *                          See the register_post_type() function for accepted arguments.
+ *
+ * @return array Array of arguments for registering a post type.
+ */
+function gutenberg_override_global_styles_endpoint( array $args ): array {
+	$args['rest_controller_class']   = 'WP_REST_Global_Styles_Controller_Gutenberg';
+	$args['late_route_registration'] = true;
+	$args['show_in_rest']            = true;
+	$args['rest_base']               = 'global-styles';
+
+	return $args;
+}
+add_filter( 'register_wp_global_styles_post_type_args', 'gutenberg_override_global_styles_endpoint', 10, 2 );
+
+/**
+ * Registers the Edit Site Export REST API routes.
+ */
+function gutenberg_register_edit_site_export_controller_endpoints() {
+	$edit_site_export_controller = new WP_REST_Edit_Site_Export_Controller_Gutenberg();
+	$edit_site_export_controller->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_controller_endpoints' );
diff --git a/lib/script-loader.php b/lib/script-loader.php
new file mode 100644
index 00000000000000..51346e57b4a73a
--- /dev/null
+++ b/lib/script-loader.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * Overrides the script-loader.php file.
+ *
+ * @package gutenberg
+ */
+
+// Remove core actions to override.
+remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
+remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
+
+/**
+ * Enqueues the global styles defined via theme.json.
+ *
+ * Copy of the core `wp_enqueue_global_styles`. Uses helper methods bundled with the plugin.
+ *
+ * @return void
+ */
+function gutenberg_enqueue_global_styles() {
+	$separate_assets  = wp_should_load_separate_core_block_assets();
+	$is_block_theme   = wp_is_block_theme();
+	$is_classic_theme = ! $is_block_theme;
+
+	/*
+	 * Global styles should be printed in the head when loading all styles combined.
+	 * The footer should only be used to print global styles for classic themes with separate core assets enabled.
+	 *
+	 * See https://core.trac.wordpress.org/ticket/53494.
+	 */
+	if (
+		( $is_block_theme && doing_action( 'wp_footer' ) ) ||
+		( $is_classic_theme && doing_action( 'wp_footer' ) && ! $separate_assets ) ||
+		( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) && $separate_assets )
+	) {
+		return;
+	}
+
+	/*
+	 * If loading the CSS for each block separately, then load the theme.json CSS conditionally.
+	 * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block.
+	 * This filter must be registered before calling wp_get_global_stylesheet();
+	 */
+	add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+
+	$stylesheet = gutenberg_get_global_stylesheet();
+
+	if ( $is_block_theme ) {
+		/*
+		 * Dequeue the Customizer's custom CSS
+		 * and add it before the global styles custom CSS.
+		 */
+		remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+		// Get the custom CSS from the Customizer and add it to the global stylesheet.
+		$custom_css  = wp_get_custom_css();
+		$stylesheet .= $custom_css;
+
+		// Add the global styles custom CSS at the end.
+		$stylesheet .= gutenberg_get_global_stylesheet( array( 'custom-css' ) );
+	}
+
+	if ( empty( $stylesheet ) ) {
+		return;
+	}
+
+	wp_register_style( 'global-styles', false );
+	wp_add_inline_style( 'global-styles', $stylesheet );
+	wp_enqueue_style( 'global-styles' );
+
+	// Add each block as an inline css.
+	gutenberg_add_global_styles_for_blocks();
+}
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' );
+add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );
+
+/**
+ * Enqueues the global styles custom css.
+ *
+ * @since 6.2.0
+ */
+function gutenberg_enqueue_global_styles_custom_css() {
+	_deprecated_function( __FUNCTION__, 'Gutenberg 17.8.0', 'gutenberg_enqueue_global_styles' );
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	// Don't enqueue Customizer's custom CSS separately.
+	remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+
+	$custom_css  = wp_get_custom_css();
+	$custom_css .= gutenberg_get_global_styles_custom_css();
+
+	if ( ! empty( $custom_css ) ) {
+		wp_add_inline_style( 'global-styles', $custom_css );
+	}
+}
+
+/**
+ * Function that enqueues the CSS Custom Properties coming from theme.json.
+ *
+ * @since 5.9.0
+ */
+function gutenberg_enqueue_global_styles_css_custom_properties() {
+	wp_register_style( 'global-styles-css-custom-properties', false );
+	wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) );
+	wp_enqueue_style( 'global-styles-css-custom-properties' );
+}
+remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );
+add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_global_styles_css_custom_properties' );
diff --git a/lib/theme-i18n.json b/lib/theme-i18n.json
new file mode 100644
index 00000000000000..e4d14502132cbe
--- /dev/null
+++ b/lib/theme-i18n.json
@@ -0,0 +1,94 @@
+{
+	"title": "Style variation name",
+	"description": "Style variation description",
+	"settings": {
+		"typography": {
+			"fontSizes": [
+				{
+					"name": "Font size name"
+				}
+			],
+			"fontFamilies": [
+				{
+					"name": "Font family name"
+				}
+			]
+		},
+		"color": {
+			"palette": [
+				{
+					"name": "Color name"
+				}
+			],
+			"gradients": [
+				{
+					"name": "Gradient name"
+				}
+			],
+			"duotone": [
+				{
+					"name": "Duotone name"
+				}
+			]
+		},
+		"spacing": {
+			"spacingSizes": [
+				{
+					"name": "Space size name"
+				}
+			]
+		},
+		"dimensions": {
+			"aspectRatios": [
+				{
+					"name": "Aspect ratio name"
+				}
+			]
+		},
+		"blocks": {
+			"*": {
+				"typography": {
+					"fontSizes": [
+						{
+							"name": "Font size name"
+						}
+					],
+					"fontFamilies": [
+						{
+							"name": "Font family name"
+						}
+					]
+				},
+				"color": {
+					"palette": [
+						{
+							"name": "Color name"
+						}
+					],
+					"gradients": [
+						{
+							"name": "Gradient name"
+						}
+					]
+				},
+				"spacing": {
+					"spacingSizes": [
+						{
+							"name": "Space size name"
+						}
+					]
+				}
+			}
+		}
+	},
+	"customTemplates": [
+		{
+			"title": "Custom template name"
+		}
+	],
+	"templateParts": [
+		{
+			"title": "Template part name"
+		}
+	]
+}
diff --git a/lib/theme.json b/lib/theme.json
new file mode 100644
index 00000000000000..f638d9722ef67c
--- /dev/null
+++ b/lib/theme.json
@@ -0,0 +1,410 @@
+{
+	"$schema": "../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": false,
+		"useRootPaddingAwareAlignments": false,
+		"border": {
+			"color": false,
+			"radius": false,
+			"style": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"button": true,
+			"caption": true,
+			"custom": true,
+			"customDuotone": true,
+			"customGradient": true,
+			"defaultDuotone": true,
+			"defaultGradients": true,
+			"defaultPalette": true,
+			"duotone": [
+				{
+					"name": "Dark grayscale",
+					"colors": [ "#000000", "#7f7f7f" ],
+					"slug": "dark-grayscale"
+				},
+				{
+					"name": "Grayscale",
+					"colors": [ "#000000", "#ffffff" ],
+					"slug": "grayscale"
+				},
+				{
+					"name": "Purple and yellow",
+					"colors": [ "#8c00b7", "#fcff41" ],
+					"slug": "purple-yellow"
+				},
+				{
+					"name": "Blue and red",
+					"colors": [ "#000097", "#ff4747" ],
+					"slug": "blue-red"
+				},
+				{
+					"name": "Midnight",
+					"colors": [ "#000000", "#00a5ff" ],
+					"slug": "midnight"
+				},
+				{
+					"name": "Magenta and yellow",
+					"colors": [ "#c7005a", "#fff278" ],
+					"slug": "magenta-yellow"
+				},
+				{
+					"name": "Purple and green",
+					"colors": [ "#a60072", "#67ff66" ],
+					"slug": "purple-green"
+				},
+				{
+					"name": "Blue and orange",
+					"colors": [ "#1900d8", "#ffa96b" ],
+					"slug": "blue-orange"
+				}
+			],
+			"gradients": [
+				{
+					"name": "Vivid cyan blue to vivid purple",
+					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+					"slug": "vivid-cyan-blue-to-vivid-purple"
+				},
+				{
+					"name": "Light green cyan to vivid green cyan",
+					"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+					"slug": "light-green-cyan-to-vivid-green-cyan"
+				},
+				{
+					"name": "Luminous vivid amber to luminous vivid orange",
+					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
+				},
+				{
+					"name": "Luminous vivid orange to vivid red",
+					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+					"slug": "luminous-vivid-orange-to-vivid-red"
+				},
+				{
+					"name": "Very light gray to cyan bluish gray",
+					"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+					"slug": "very-light-gray-to-cyan-bluish-gray"
+				},
+				{
+					"name": "Cool to warm spectrum",
+					"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+					"slug": "cool-to-warm-spectrum"
+				},
+				{
+					"name": "Blush light purple",
+					"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+					"slug": "blush-light-purple"
+				},
+				{
+					"name": "Blush bordeaux",
+					"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+					"slug": "blush-bordeaux"
+				},
+				{
+					"name": "Luminous dusk",
+					"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+					"slug": "luminous-dusk"
+				},
+				{
+					"name": "Pale ocean",
+					"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+					"slug": "pale-ocean"
+				},
+				{
+					"name": "Electric grass",
+					"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+					"slug": "electric-grass"
+				},
+				{
+					"name": "Midnight",
+					"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+					"slug": "midnight"
+				}
+			],
+			"heading": true,
+			"link": false,
+			"palette": [
+				{
+					"name": "Black",
+					"slug": "black",
+					"color": "#000000"
+				},
+				{
+					"name": "Cyan bluish gray",
+					"slug": "cyan-bluish-gray",
+					"color": "#abb8c3"
+				},
+				{
+					"name": "White",
+					"slug": "white",
+					"color": "#ffffff"
+				},
+				{
+					"name": "Pale pink",
+					"slug": "pale-pink",
+					"color": "#f78da7"
+				},
+				{
+					"name": "Vivid red",
+					"slug": "vivid-red",
+					"color": "#cf2e2e"
+				},
+				{
+					"name": "Luminous vivid orange",
+					"slug": "luminous-vivid-orange",
+					"color": "#ff6900"
+				},
+				{
+					"name": "Luminous vivid amber",
+					"slug": "luminous-vivid-amber",
+					"color": "#fcb900"
+				},
+				{
+					"name": "Light green cyan",
+					"slug": "light-green-cyan",
+					"color": "#7bdcb5"
+				},
+				{
+					"name": "Vivid green cyan",
+					"slug": "vivid-green-cyan",
+					"color": "#00d084"
+				},
+				{
+					"name": "Pale cyan blue",
+					"slug": "pale-cyan-blue",
+					"color": "#8ed1fc"
+				},
+				{
+					"name": "Vivid cyan blue",
+					"slug": "vivid-cyan-blue",
+					"color": "#0693e3"
+				},
+				{
+					"name": "Vivid purple",
+					"slug": "vivid-purple",
+					"color": "#9b51e0"
+				}
+			],
+			"text": true
+		},
+		"dimensions": {
+			"defaultAspectRatios": true,
+			"aspectRatios": [
+				{
+					"name": "Square - 1:1",
+					"slug": "square",
+					"ratio": "1"
+				},
+				{
+					"name": "Standard - 4:3",
+					"slug": "4-3",
+					"ratio": "4/3"
+				},
+				{
+					"name": "Portrait - 3:4",
+					"slug": "3-4",
+					"ratio": "3/4"
+				},
+				{
+					"name": "Classic - 3:2",
+					"slug": "3-2",
+					"ratio": "3/2"
+				},
+				{
+					"name": "Classic Portrait - 2:3",
+					"slug": "2-3",
+					"ratio": "2/3"
+				},
+				{
+					"name": "Wide - 16:9",
+					"slug": "16-9",
+					"ratio": "16/9"
+				},
+				{
+					"name": "Tall - 9:16",
+					"slug": "9-16",
+					"ratio": "9/16"
+				}
+			]
+		},
+		"shadow": {
+			"defaultPresets": true,
+			"presets": [
+				{
+					"name": "Natural",
+					"slug": "natural",
+					"shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
+				},
+				{
+					"name": "Deep",
+					"slug": "deep",
+					"shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
+				},
+				{
+					"name": "Sharp",
+					"slug": "sharp",
+					"shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
+				},
+				{
+					"name": "Outlined",
+					"slug": "outlined",
+					"shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
+				},
+				{
+					"name": "Crisp",
+					"slug": "crisp",
+					"shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
+				}
+			]
+		},
+		"spacing": {
+			"blockGap": null,
+			"margin": false,
+			"padding": false,
+			"customSpacingSize": true,
+			"defaultSpacingSizes": true,
+			"units": [ "px", "em", "rem", "vh", "vw", "%" ],
+			"spacingScale": {
+				"operator": "*",
+				"increment": 1.5,
+				"steps": 7,
+				"mediumStep": 1.5,
+				"unit": "rem"
+			}
+		},
+		"typography": {
+			"customFontSize": true,
+			"defaultFontSizes": true,
+			"dropCap": true,
+			"fontSizes": [
+				{
+					"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"
+				}
+			],
+			"fontStyle": true,
+			"fontWeight": true,
+			"letterSpacing": true,
+			"lineHeight": false,
+			"textAlign": true,
+			"textColumns": false,
+			"textDecoration": true,
+			"textTransform": true,
+			"writingMode": false
+		},
+		"blocks": {
+			"core/button": {
+				"border": {
+					"radius": true
+				}
+			},
+			"core/image": {
+				"lightbox": {
+					"allowEditing": true
+				}
+			},
+			"core/pullquote": {
+				"border": {
+					"color": true,
+					"radius": true,
+					"style": true,
+					"width": true
+				}
+			}
+		}
+	},
+	"styles": {
+		"elements": {
+			"button": {
+				"color": {
+					"text": "#fff",
+					"background": "#32373c"
+				},
+				"spacing": {
+					"padding": {
+						"top": "calc(0.667em + 2px)",
+						"right": "calc(1.333em + 2px)",
+						"bottom": "calc(0.667em + 2px)",
+						"left": "calc(1.333em + 2px)"
+					}
+				},
+				"typography": {
+					"fontSize": "inherit",
+					"fontFamily": "inherit",
+					"lineHeight": "inherit",
+					"textDecoration": "none"
+				},
+				"border": {
+					"width": "0"
+				}
+			},
+			"link": {
+				"typography": {
+					"textDecoration": "underline"
+				}
+			}
+		},
+		"spacing": {
+			"blockGap": "24px",
+			"padding": {
+				"top": "0px",
+				"right": "0px",
+				"bottom": "0px",
+				"left": "0px"
+			}
+		},
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"border": {
+							"width": "2px",
+							"style": "solid",
+							"color": "currentColor"
+						},
+						"color": {
+							"text": "currentColor",
+							"gradient": "transparent none"
+						},
+						"spacing": {
+							"padding": {
+								"top": "0.667em",
+								"right": "1.33em",
+								"bottom": "0.667em",
+								"left": "1.33em"
+							}
+						}
+					}
+				}
+			},
+			"core/site-logo": {
+				"variations": {
+					"rounded": {
+						"border": {
+							"radius": "9999px"
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index adb96b28da9216..a17e89f944c72b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,60780 +1,56191 @@
 {
 	"name": "gutenberg",
-	"version": "14.6.0-rc.1",
-	"lockfileVersion": 1,
+	"version": "19.8.0",
+	"lockfileVersion": 3,
 	"requires": true,
-	"dependencies": {
-		"@actions/core": {
+	"packages": {
+		"": {
+			"name": "gutenberg",
+			"version": "19.8.0",
+			"hasInstallScript": true,
+			"license": "GPL-2.0-or-later",
+			"workspaces": [
+				"packages/*"
+			],
+			"devDependencies": {
+				"@actions/core": "1.9.1",
+				"@actions/github": "5.0.0",
+				"@apidevtools/json-schema-ref-parser": "11.6.4",
+				"@ariakit/test": "^0.4.7",
+				"@babel/core": "7.25.7",
+				"@babel/plugin-syntax-jsx": "7.25.7",
+				"@babel/runtime-corejs3": "7.25.7",
+				"@babel/traverse": "7.25.7",
+				"@emotion/babel-plugin": "11.11.0",
+				"@emotion/jest": "11.7.1",
+				"@emotion/native": "11.0.0",
+				"@geometricpanda/storybook-addon-badges": "2.0.1",
+				"@octokit/rest": "16.26.0",
+				"@octokit/types": "6.34.0",
+				"@octokit/webhooks-types": "5.8.0",
+				"@playwright/test": "1.48.1",
+				"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+				"@react-native/babel-preset": "0.73.10",
+				"@react-native/metro-babel-transformer": "0.73.10",
+				"@react-native/metro-config": "0.73.4",
+				"@storybook/addon-a11y": "7.6.15",
+				"@storybook/addon-actions": "7.6.15",
+				"@storybook/addon-controls": "7.6.15",
+				"@storybook/addon-docs": "7.6.15",
+				"@storybook/addon-toolbars": "7.6.15",
+				"@storybook/addon-viewport": "7.6.15",
+				"@storybook/react": "7.6.15",
+				"@storybook/react-webpack5": "7.6.15",
+				"@storybook/source-loader": "7.6.15",
+				"@storybook/theming": "7.6.15",
+				"@testing-library/jest-dom": "5.16.5",
+				"@testing-library/react": "14.3.0",
+				"@testing-library/react-native": "12.4.3",
+				"@testing-library/user-event": "14.4.3",
+				"@types/eslint": "8.56.9",
+				"@types/estree": "1.0.5",
+				"@types/istanbul-lib-report": "3.0.0",
+				"@types/mime": "2.0.3",
+				"@types/npm-package-arg": "6.1.1",
+				"@types/prettier": "2.4.4",
+				"@types/qs": "6.9.7",
+				"@types/react": "18.3.1",
+				"@types/react-dates": "21.8.3",
+				"@types/react-dom": "18.3.0",
+				"@types/requestidlecallback": "0.3.4",
+				"@types/semver": "7.3.8",
+				"@types/sprintf-js": "1.1.2",
+				"@types/uuid": "8.3.1",
+				"ajv": "8.7.1",
+				"appium": "2.0.0",
+				"babel-jest": "29.7.0",
+				"babel-loader": "9.2.1",
+				"babel-plugin-inline-json-import": "0.3.2",
+				"babel-plugin-react-native-classname-to-style": "1.2.2",
+				"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
+				"babel-plugin-transform-remove-console": "6.9.4",
+				"benchmark": "2.1.4",
+				"browserslist": "4.24.0",
+				"caniuse-lite": "1.0.30001667",
+				"chalk": "4.1.1",
+				"change-case": "4.1.2",
+				"client-zip": "^2.4.5",
+				"commander": "9.2.0",
+				"concurrently": "3.5.0",
+				"copy-webpack-plugin": "10.2.0",
+				"core-js-builder": "3.38.1",
+				"cross-env": "3.2.4",
+				"css-loader": "6.2.0",
+				"cssnano": "6.0.1",
+				"deep-freeze": "0.0.1",
+				"equivalent-key-map": "0.2.2",
+				"esbuild": "0.18.20",
+				"escape-html": "1.0.3",
+				"eslint-import-resolver-node": "0.3.4",
+				"eslint-plugin-eslint-comments": "3.1.2",
+				"eslint-plugin-import": "2.25.2",
+				"eslint-plugin-jest": "27.4.3",
+				"eslint-plugin-jest-dom": "5.0.2",
+				"eslint-plugin-prettier": "5.0.0",
+				"eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+				"eslint-plugin-ssr-friendly": "1.0.6",
+				"eslint-plugin-storybook": "0.6.13",
+				"eslint-plugin-testing-library": "6.0.2",
+				"execa": "4.0.2",
+				"fast-glob": "3.2.7",
+				"filenamify": "4.2.0",
+				"glob": "7.1.2",
+				"husky": "7.0.0",
+				"inquirer": "7.1.0",
+				"jest": "29.6.2",
+				"jest-environment-jsdom": "^29.6.2",
+				"jest-jasmine2": "29.6.2",
+				"jest-junit": "13.0.0",
+				"jest-message-util": "29.6.2",
+				"jest-watch-typeahead": "2.2.2",
+				"json2md": "2.0.1",
+				"lerna": "7.1.4",
+				"lint-staged": "10.0.2",
+				"make-dir": "3.0.0",
+				"mkdirp": "3.0.1",
+				"mock-match-media": "0.4.2",
+				"moment-timezone-data-webpack-plugin": "1.5.1",
+				"nock": "12.0.3",
+				"node-fetch": "2.7.0",
+				"node-watch": "0.7.0",
+				"npm-run-all": "4.1.5",
+				"patch-package": "8.0.0",
+				"postcss": "8.4.38",
+				"postcss-loader": "6.2.1",
+				"postcss-local-keyframes": "^0.0.2",
+				"prettier": "npm:wp-prettier@3.0.3",
+				"progress": "2.0.3",
+				"puppeteer-core": "23.1.0",
+				"raw-loader": "4.0.2",
+				"react": "18.3.1",
+				"react-docgen-typescript": "2.2.2",
+				"react-dom": "18.3.1",
+				"react-native": "0.73.3",
+				"react-native-url-polyfill": "1.1.2",
+				"react-refresh": "0.14.0",
+				"react-scanner": "1.2.0",
+				"react-test-renderer": "18.3.1",
+				"reassure": "0.7.1",
+				"redux": "5.0.1",
+				"resize-observer-polyfill": "1.5.1",
+				"rimraf": "3.0.2",
+				"rtlcss": "4.0.0",
+				"sass": "1.50.1",
+				"sass-loader": "16.0.3",
+				"semver": "7.5.4",
+				"simple-git": "3.24.0",
+				"snapshot-diff": "0.10.0",
+				"source-map-loader": "3.0.0",
+				"sprintf-js": "1.1.1",
+				"storybook": "7.6.15",
+				"storybook-source-link": "2.0.9",
+				"strip-json-comments": "5.0.0",
+				"style-loader": "3.2.1",
+				"terser": "5.32.0",
+				"terser-webpack-plugin": "5.3.10",
+				"typescript": "5.7.2",
+				"uuid": "9.0.1",
+				"webdriverio": "8.16.20",
+				"webpack": "5.97.0",
+				"webpack-bundle-analyzer": "4.9.1",
+				"worker-farm": "1.7.0"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			}
+		},
+		"node_modules/@actions/core": {
 			"version": "1.9.1",
 			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
 			"integrity": "sha512-5ad+U2YGrmmiw6du20AQW5XuWo7UKN2052FjSV7MX+Wfjf8sCqcsZe62NfgHys4QI4/Y+vQvLKYL8jWtA1ZBTA==",
-			"dev": true,
-			"requires": {
+			"dependencies": {
 				"@actions/http-client": "^2.0.1",
 				"uuid": "^8.3.2"
-			},
-			"dependencies": {
-				"@actions/http-client": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.0.1.tgz",
-					"integrity": "sha512-PIXiMVtz6VvyaRsGY268qvj57hXQEpsYogYOu2nrQhlf+XCGmZstmuZBbAybUl1nQGnvS1k1eEsQ69ZoD7xlSw==",
-					"dev": true,
-					"requires": {
-						"tunnel": "^0.0.6"
-					}
-				},
-				"uuid": {
-					"version": "8.3.2",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-					"dev": true
-				}
 			}
 		},
-		"@actions/github": {
+		"node_modules/@actions/core/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"node_modules/@actions/github": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/@actions/github/-/github-5.0.0.tgz",
 			"integrity": "sha512-QvE9eAAfEsS+yOOk0cylLBIO/d6WyWIOvsxxzdrPFaud39G6BOkUwScXZn1iBzQzHyu9SBkkLSWlohDWdsasAQ==",
-			"dev": true,
-			"requires": {
+			"dependencies": {
 				"@actions/http-client": "^1.0.11",
 				"@octokit/core": "^3.4.0",
 				"@octokit/plugin-paginate-rest": "^2.13.3",
 				"@octokit/plugin-rest-endpoint-methods": "^5.1.1"
-			},
-			"dependencies": {
-				"@octokit/openapi-types": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-7.3.2.tgz",
-					"integrity": "sha512-oJhK/yhl9Gt430OrZOzAl2wJqR0No9445vmZ9Ey8GjUZUpwuu/vmEFP0TDhDXdpGDoxD6/EIFHJEcY8nHXpDTA==",
-					"dev": true
-				},
-				"@octokit/plugin-paginate-rest": {
-					"version": "2.13.5",
-					"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.13.5.tgz",
-					"integrity": "sha512-3WSAKBLa1RaR/7GG+LQR/tAZ9fp9H9waE9aPXallidyci9oZsfgsLn5M836d3LuDC6Fcym+2idRTBpssHZePVg==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.13.0"
-					}
-				},
-				"@octokit/plugin-rest-endpoint-methods": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.3.1.tgz",
-					"integrity": "sha512-3B2iguGmkh6bQQaVOtCsS0gixrz8Lg0v4JuXPqBcFqLKuJtxAUf3K88RxMEf/naDOI73spD+goJ/o7Ie7Cvdjg==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.16.2",
-						"deprecation": "^2.3.1"
-					}
-				},
-				"@octokit/types": {
-					"version": "6.16.4",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.16.4.tgz",
-					"integrity": "sha512-UxhWCdSzloULfUyamfOg4dJxV9B+XjgrIZscI0VCbp4eNrjmorGEw+4qdwcpTsu6DIrm9tQsFQS2pK5QkqQ04A==",
-					"dev": true,
-					"requires": {
-						"@octokit/openapi-types": "^7.3.2"
-					}
-				},
-				"deprecation": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-					"integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
-					"dev": true
-				}
 			}
 		},
-		"@actions/http-client": {
+		"node_modules/@actions/github/node_modules/@actions/http-client": {
 			"version": "1.0.11",
 			"resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-1.0.11.tgz",
 			"integrity": "sha512-VRYHGQV1rqnROJqdMvGUbY/Kn8vriQe/F9HR2AlYHzmKuM/p3kjNuXhmdBfcVgsvRWTz5C5XW5xvndZrVBuAYg==",
-			"dev": true,
-			"requires": {
+			"dependencies": {
 				"tunnel": "0.0.6"
 			}
 		},
-		"@axe-core/puppeteer": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.0.0.tgz",
-			"integrity": "sha512-APFc2iRmrmUfqdBUevjsMxJliDudWPwvCU5Pzw2uKZ0sMVtW3rQuElTcfJCHFq8KOZSSO0BPD+lK+pXOx1ta5Q==",
+		"node_modules/@actions/http-client": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.2.3.tgz",
+			"integrity": "sha512-mx8hyJi/hjFvbPokCg4uRd4ZX78t+YyRPtnKWwIl+RzNaVuFpQHfmlGVfsKEJN8LwTCvL+DfVgAM04XaHkm6bA==",
+			"license": "MIT",
+			"dependencies": {
+				"tunnel": "^0.0.6",
+				"undici": "^5.25.4"
+			}
+		},
+		"node_modules/@adobe/css-tools": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+			"integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
 			"dev": true,
-			"requires": {
-				"axe-core": "^4.0.1"
-			},
+			"license": "MIT"
+		},
+		"node_modules/@ampproject/remapping": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
 			"dependencies": {
-				"axe-core": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz",
-					"integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==",
-					"dev": true
-				}
+				"@jridgewell/gen-mapping": "^0.3.0",
+				"@jridgewell/trace-mapping": "^0.3.9"
+			},
+			"engines": {
+				"node": ">=6.0.0"
 			}
 		},
-		"@babel/code-frame": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
-			"integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==",
-			"requires": {
-				"@babel/highlight": "^7.16.0"
+		"node_modules/@apidevtools/json-schema-ref-parser": {
+			"version": "11.6.4",
+			"resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-11.6.4.tgz",
+			"integrity": "sha512-9K6xOqeevacvweLGik6LnZCb1fBtCOSIWQs8d096XGeqoLKC33UVMGz9+77Gw44KvbH4pKcQPWo4ZpxkXYj05w==",
+			"dev": true,
+			"dependencies": {
+				"@jsdevtools/ono": "^7.1.3",
+				"@types/json-schema": "^7.0.15",
+				"js-yaml": "^4.1.0"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/philsturgeon"
 			}
 		},
-		"@babel/compat-data": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.0.tgz",
-			"integrity": "sha512-DGjt2QZse5SGd9nfOSqO4WLJ8NN/oHkijbXbPrxuoJO3oIPJL3TciZs9FX+cOHNiY9E9l0opL8g7BmLe3T+9ew=="
+		"node_modules/@apidevtools/json-schema-ref-parser/node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"dev": true
 		},
-		"@babel/core": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.0.tgz",
-			"integrity": "sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==",
-			"requires": {
-				"@babel/code-frame": "^7.16.0",
-				"@babel/generator": "^7.16.0",
-				"@babel/helper-compilation-targets": "^7.16.0",
-				"@babel/helper-module-transforms": "^7.16.0",
-				"@babel/helpers": "^7.16.0",
-				"@babel/parser": "^7.16.0",
-				"@babel/template": "^7.16.0",
-				"@babel/traverse": "^7.16.0",
-				"@babel/types": "^7.16.0",
-				"convert-source-map": "^1.7.0",
-				"debug": "^4.1.0",
-				"gensync": "^1.0.0-beta.2",
-				"json5": "^2.1.2",
-				"semver": "^6.3.0",
-				"source-map": "^0.5.0"
-			},
+		"node_modules/@apidevtools/json-schema-ref-parser/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true
+		},
+		"node_modules/@apidevtools/json-schema-ref-parser/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dev": true,
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@appium/base-driver": {
+			"version": "9.4.0",
+			"resolved": "https://registry.npmjs.org/@appium/base-driver/-/base-driver-9.4.0.tgz",
+			"integrity": "sha512-R2RdNQ9eMV++VfdrTjnvriaJnrk+btvgol7DE4wZIvwEZ3IPS0NC4yE6twA77RqEhfGixCUmS82pQVWucEnTpA==",
+			"dev": true,
+			"dependencies": {
+				"@appium/support": "^4.1.7",
+				"@appium/types": "^0.14.0",
+				"@colors/colors": "1.6.0",
+				"@types/async-lock": "1.4.0",
+				"@types/bluebird": "3.5.40",
+				"@types/express": "4.17.19",
+				"@types/lodash": "4.14.199",
+				"@types/method-override": "0.0.33",
+				"@types/serve-favicon": "2.5.5",
+				"async-lock": "1.4.0",
+				"asyncbox": "2.9.4",
+				"axios": "1.5.1",
+				"bluebird": "3.7.2",
+				"body-parser": "1.20.2",
+				"es6-error": "4.1.1",
+				"express": "4.18.2",
+				"http-status-codes": "2.3.0",
+				"lodash": "4.17.21",
+				"lru-cache": "10.0.1",
+				"method-override": "3.0.0",
+				"morgan": "1.10.0",
+				"path-to-regexp": "6.2.1",
+				"serve-favicon": "2.5.0",
+				"source-map-support": "0.5.21",
+				"type-fest": "3.13.1",
+				"validate.js": "0.13.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			},
+			"optionalDependencies": {
+				"spdy": "4.0.2"
+			}
+		},
+		"node_modules/@appium/base-driver/node_modules/@appium/schema": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@appium/schema/-/schema-0.4.2.tgz",
+			"integrity": "sha512-b2tC2sKAS8wnw8V7W7Rm6pXFt8QY4NTWvibprVYi1g8rZLnlmlIwUW0Gl6FhrWTUyK+u4rbF8vVIIBIU8C+i/g==",
+			"dev": true,
 			"dependencies": {
-				"convert-source-map": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-					"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-					"requires": {
-						"safe-buffer": "~5.1.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				}
+				"@types/json-schema": "7.0.15",
+				"json-schema": "0.4.0",
+				"source-map-support": "0.5.21"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/eslint-parser": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.0.tgz",
-			"integrity": "sha512-c+AsYOHjI+FgCa+ifLd8sDXp4U4mjkfFgL9NdQWhuA731kAUJs0WdJIXET4A14EJAR9Jv9FFF/MzPWJfV9Oirw==",
+		"node_modules/@appium/base-driver/node_modules/@appium/types": {
+			"version": "0.14.3",
+			"resolved": "https://registry.npmjs.org/@appium/types/-/types-0.14.3.tgz",
+			"integrity": "sha512-zW/fjn6HqvXLQVvWBX0qjYiWpfWKweXQQxUBO6egtiq77PRbDMkpeVAJIF8fvnng7XdaOo4OTdvADaZxpcgKCw==",
 			"dev": true,
-			"requires": {
-				"eslint-scope": "^5.1.1",
-				"eslint-visitor-keys": "^2.1.0",
-				"semver": "^6.3.0"
-			},
 			"dependencies": {
-				"eslint-scope": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-					"dev": true,
-					"requires": {
-						"esrecurse": "^4.3.0",
-						"estraverse": "^4.1.1"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"@appium/schema": "^0.4.2",
+				"@appium/tsconfig": "^0.x",
+				"@types/express": "4.17.21",
+				"@types/npmlog": "4.1.6",
+				"@types/ws": "8.5.10",
+				"type-fest": "3.13.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/generator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.0.tgz",
-			"integrity": "sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==",
-			"requires": {
-				"@babel/types": "^7.16.0",
-				"jsesc": "^2.5.1",
-				"source-map": "^0.5.0"
-			}
-		},
-		"@babel/helper-annotate-as-pure": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz",
-			"integrity": "sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==",
-			"requires": {
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-builder-binary-assignment-operator-visitor": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.0.tgz",
-			"integrity": "sha512-9KuleLT0e77wFUku6TUkqZzCEymBdtuQQ27MhEKzf9UOOJu3cYj98kyaDAzxpC7lV6DGiZFuC8XqDsq8/Kl6aQ==",
-			"requires": {
-				"@babel/helper-explode-assignable-expression": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-compilation-targets": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.0.tgz",
-			"integrity": "sha512-S7iaOT1SYlqK0sQaCi21RX4+13hmdmnxIEAnQUB/eh7GeAnRjOUgTYpLkUOiRXzD+yog1JxP0qyAQZ7ZxVxLVg==",
-			"requires": {
-				"@babel/compat-data": "^7.16.0",
-				"@babel/helper-validator-option": "^7.14.5",
-				"browserslist": "^4.16.6",
-				"semver": "^6.3.0"
-			},
+		"node_modules/@appium/base-driver/node_modules/@appium/types/node_modules/@types/express": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
+			"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+			"dev": true,
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				}
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
 			}
 		},
-		"@babel/helper-create-class-features-plugin": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.0.tgz",
-			"integrity": "sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==",
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-function-name": "^7.16.0",
-				"@babel/helper-member-expression-to-functions": "^7.16.0",
-				"@babel/helper-optimise-call-expression": "^7.16.0",
-				"@babel/helper-replace-supers": "^7.16.0",
-				"@babel/helper-split-export-declaration": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/@colors/colors": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
+			"integrity": "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.1.90"
 			}
 		},
-		"@babel/helper-create-regexp-features-plugin": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.16.0.tgz",
-			"integrity": "sha512-3DyG0zAFAZKcOp7aVr33ddwkxJ0Z0Jr5V99y3I690eYLpukJsJvAbzTy1ewoCqsML8SbIrjH14Jc/nSQ4TvNPA==",
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"regexpu-core": "^4.7.1"
-			}
+		"node_modules/@appium/base-driver/node_modules/@types/bluebird": {
+			"version": "3.5.40",
+			"resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.40.tgz",
+			"integrity": "sha512-4dEtF/qcby/FdT6iChii+jFXzVVX0+5HYiDqHKBtHQ3ZV58x5uVJJYRG0N4QllIaj5a2+UDdf/nupae+/M6mdw==",
+			"dev": true
 		},
-		"@babel/helper-define-polyfill-provider": {
-			"version": "0.2.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.4.tgz",
-			"integrity": "sha512-OrpPZ97s+aPi6h2n1OXzdhVis1SGSsMU2aMHgLcOKfsp4/v1NWpx3CWT3lBj5eeBq9cDkPkh+YCfdF7O12uNDQ==",
-			"requires": {
-				"@babel/helper-compilation-targets": "^7.13.0",
-				"@babel/helper-module-imports": "^7.12.13",
-				"@babel/helper-plugin-utils": "^7.13.0",
-				"@babel/traverse": "^7.13.0",
-				"debug": "^4.1.1",
-				"lodash.debounce": "^4.0.8",
-				"resolve": "^1.14.2",
-				"semver": "^6.1.2"
-			},
+		"node_modules/@appium/base-driver/node_modules/@types/express": {
+			"version": "4.17.19",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.19.tgz",
+			"integrity": "sha512-UtOfBtzN9OvpZPPbnnYunfjM7XCI4jyk1NvnFhTVz5krYAnW4o5DCoIekvms+8ApqhB4+9wSge1kBijdfTSmfg==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				}
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
 			}
 		},
-		"@babel/helper-environment-visitor": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz",
-			"integrity": "sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==",
+		"node_modules/@appium/base-driver/node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
-		"@babel/helper-explode-assignable-expression": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.0.tgz",
-			"integrity": "sha512-Hk2SLxC9ZbcOhLpg/yMznzJ11W++lg5GMbxt1ev6TXUiJB0N42KPC+7w8a+eWGuqDnUYuwStJoZHM7RgmIOaGQ==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/@types/npmlog": {
+			"version": "4.1.6",
+			"resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.6.tgz",
+			"integrity": "sha512-0l3z16vnlJGl2Mi/rgJFrdwfLZ4jfNYgE6ZShEpjqhHuGTqdEzNles03NpYHwUMVYZa+Tj46UxKIEpE78lQ3DQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
 			}
 		},
-		"@babel/helper-function-name": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz",
-			"integrity": "sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==",
-			"requires": {
-				"@babel/helper-get-function-arity": "^7.16.0",
-				"@babel/template": "^7.16.0",
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/@types/ws": {
+			"version": "8.5.10",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+			"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
 			}
 		},
-		"@babel/helper-get-function-arity": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz",
-			"integrity": "sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/body-parser": {
+			"version": "1.20.2",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+			"integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+			"dev": true,
+			"dependencies": {
+				"bytes": "3.1.2",
+				"content-type": "~1.0.5",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"on-finished": "2.4.1",
+				"qs": "6.11.0",
+				"raw-body": "2.5.2",
+				"type-is": "~1.6.18",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
 			}
 		},
-		"@babel/helper-hoist-variables": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz",
-			"integrity": "sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"@babel/helper-member-expression-to-functions": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz",
-			"integrity": "sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dev": true,
+			"dependencies": {
+				"ms": "2.0.0"
 			}
 		},
-		"@babel/helper-module-imports": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
-			"integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"@babel/helper-module-transforms": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz",
-			"integrity": "sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.16.0",
-				"@babel/helper-replace-supers": "^7.16.0",
-				"@babel/helper-simple-access": "^7.16.0",
-				"@babel/helper-split-export-declaration": "^7.16.0",
-				"@babel/helper-validator-identifier": "^7.15.7",
-				"@babel/template": "^7.16.0",
-				"@babel/traverse": "^7.16.0",
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"dev": true,
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"@babel/helper-optimise-call-expression": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz",
-			"integrity": "sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==",
-			"requires": {
-				"@babel/types": "^7.16.0"
+		"node_modules/@appium/base-driver/node_modules/lru-cache": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
+			"integrity": "sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==",
+			"dev": true,
+			"engines": {
+				"node": "14 || >=16.14"
 			}
 		},
-		"@babel/helper-plugin-utils": {
-			"version": "7.14.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-			"integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ=="
-		},
-		"@babel/helper-remap-async-to-generator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.0.tgz",
-			"integrity": "sha512-MLM1IOMe9aQBqMWxcRw8dcb9jlM86NIw7KA0Wri91Xkfied+dE0QuBFSBjMNvqzmS0OSIDsMNC24dBEkPUi7ew==",
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-wrap-function": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-replace-supers": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz",
-			"integrity": "sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==",
-			"requires": {
-				"@babel/helper-member-expression-to-functions": "^7.16.0",
-				"@babel/helper-optimise-call-expression": "^7.16.0",
-				"@babel/traverse": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-simple-access": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz",
-			"integrity": "sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==",
-			"requires": {
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-skip-transparent-expression-wrappers": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz",
-			"integrity": "sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==",
-			"requires": {
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-split-export-declaration": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz",
-			"integrity": "sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==",
-			"requires": {
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helper-validator-identifier": {
-			"version": "7.15.7",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
-			"integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
-		},
-		"@babel/helper-validator-option": {
-			"version": "7.14.5",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
-			"integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow=="
-		},
-		"@babel/helper-wrap-function": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.16.0.tgz",
-			"integrity": "sha512-VVMGzYY3vkWgCJML+qVLvGIam902mJW0FvT7Avj1zEe0Gn7D93aWdLblYARTxEw+6DhZmtzhBM2zv0ekE5zg1g==",
-			"requires": {
-				"@babel/helper-function-name": "^7.16.0",
-				"@babel/template": "^7.16.0",
-				"@babel/traverse": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/helpers": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.0.tgz",
-			"integrity": "sha512-dVRM0StFMdKlkt7cVcGgwD8UMaBfWJHl3A83Yfs8GQ3MO0LHIIIMvK7Fa0RGOGUQ10qikLaX6D7o5htcQWgTMQ==",
-			"requires": {
-				"@babel/template": "^7.16.0",
-				"@babel/traverse": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/highlight": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz",
-			"integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==",
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.15.7",
-				"chalk": "^2.0.0",
-				"js-tokens": "^4.0.0"
-			},
-			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				}
+		"node_modules/@appium/base-driver/node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"dev": true,
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"@babel/parser": {
-			"version": "7.16.2",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.2.tgz",
-			"integrity": "sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw=="
+		"node_modules/@appium/base-driver/node_modules/path-to-regexp": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
+			"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
+			"dev": true
 		},
-		"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-			"version": "7.16.2",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz",
-			"integrity": "sha512-h37CvpLSf8gb2lIJ2CgC3t+EjFbi0t8qS7LCS1xcJIlEXE4czlofwaW7W1HA8zpgOCzI9C1nmoqNR1zWkk0pQg==",
+		"node_modules/@appium/base-driver/node_modules/raw-body": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"bytes": "3.1.2",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.0.tgz",
-			"integrity": "sha512-4tcFwwicpWTrpl9qjf7UsoosaArgImF85AxqCRZlgc3IQDvkUHjJpruXAL58Wmj+T6fypWTC/BakfEkwIL/pwA==",
+		"node_modules/@appium/base-driver/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
-				"@babel/plugin-proposal-optional-chaining": "^7.16.0"
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-proposal-async-generator-functions": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.0.tgz",
-			"integrity": "sha512-nyYmIo7ZqKsY6P4lnVmBlxp9B3a96CscbLotlsNuktMHahkDwoPYEjXrZHU0Tj844Z9f1IthVxQln57mhkcExw==",
+		"node_modules/@appium/base-plugin": {
+			"version": "2.2.21",
+			"resolved": "https://registry.npmjs.org/@appium/base-plugin/-/base-plugin-2.2.21.tgz",
+			"integrity": "sha512-MRQyuS3xC0JQwOV+q5gHWSPH6lA/owgsQqGPyVkZH0OB69lx4mmGvO/9Zuz3kTdONN/QdxI6oo6nEvvty9Kt2A==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-remap-async-to-generator": "^7.16.0",
-				"@babel/plugin-syntax-async-generators": "^7.8.4"
-			}
-		},
-		"@babel/plugin-proposal-class-properties": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.0.tgz",
-			"integrity": "sha512-mCF3HcuZSY9Fcx56Lbn+CGdT44ioBMMvjNVldpKtj8tpniETdLjnxdHI1+sDWXIM1nNt+EanJOZ3IG9lzVjs7A==",
-			"requires": {
-				"@babel/helper-create-class-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"@appium/base-driver": "^9.4.0",
+				"@appium/support": "^4.1.7"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-class-static-block": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.16.0.tgz",
-			"integrity": "sha512-mAy3sdcY9sKAkf3lQbDiv3olOfiLqI51c9DR9b19uMoR2Z6r5pmGl7dfNFqEvqOyqbf1ta4lknK4gc5PJn3mfA==",
+		"node_modules/@appium/docutils": {
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/@appium/docutils/-/docutils-0.4.10.tgz",
+			"integrity": "sha512-8HOVfNkvAE3wmhj4bbZJOo7xXNyoXD6/5pIR42NMey/to/P+a8OI9msXIT5QiZxrItNzWXnnVqhrPW0r2yDtpQ==",
+			"dev": true,
+			"dependencies": {
+				"@appium/support": "^4.1.7",
+				"@appium/tsconfig": "^0.3.2",
+				"@appium/typedoc-plugin-appium": "^0.6.6",
+				"@sliphua/lilconfig-ts-loader": "3.2.2",
+				"@types/which": "3.0.0",
+				"chalk": "4.1.2",
+				"consola": "2.15.3",
+				"diff": "5.1.0",
+				"figures": "3.2.0",
+				"find-up": "5.0.0",
+				"json5": "2.2.3",
+				"lilconfig": "2.1.0",
+				"lodash": "4.17.21",
+				"log-symbols": "4.1.0",
+				"pkg-dir": "5.0.0",
+				"read-pkg": "5.2.0",
+				"semver": "7.5.4",
+				"source-map-support": "0.5.21",
+				"teen_process": "2.0.50",
+				"type-fest": "3.13.1",
+				"typedoc": "0.23.28",
+				"typedoc-plugin-markdown": "3.14.0",
+				"typedoc-plugin-resolve-crossmodule-references": "0.3.3",
+				"typescript": "5.0.4",
+				"yaml": "2.3.3",
+				"yargs": "17.7.2",
+				"yargs-parser": "21.1.1"
+			},
+			"bin": {
+				"appium-docs": "bin/appium-docs.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			}
+		},
+		"node_modules/@appium/docutils/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-create-class-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-class-static-block": "^7.14.5"
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"@babel/plugin-proposal-decorators": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.2.tgz",
-			"integrity": "sha512-kbDISufFOxeczi0v4NQP3p5kIeW6izn/6klfWBrIIdGZZe4UpHR+QU03FAoWjGGd9SUXAwbw2pup1kaL4OQsJQ==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-create-class-features-plugin": "^7.18.0",
-				"@babel/helper-plugin-utils": "^7.17.12",
-				"@babel/helper-replace-supers": "^7.18.2",
-				"@babel/helper-split-export-declaration": "^7.16.7",
-				"@babel/plugin-syntax-decorators": "^7.17.12",
-				"charcodes": "^0.2.0"
-			},
-			"dependencies": {
-				"@babel/code-frame": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-					"integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
-					"dev": true,
-					"requires": {
-						"@babel/highlight": "^7.16.7"
-					}
-				},
-				"@babel/generator": {
-					"version": "7.18.2",
-					"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz",
-					"integrity": "sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.18.2",
-						"@jridgewell/gen-mapping": "^0.3.0",
-						"jsesc": "^2.5.1"
-					}
-				},
-				"@babel/helper-annotate-as-pure": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-					"integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.16.7"
-					}
-				},
-				"@babel/helper-create-class-features-plugin": {
-					"version": "7.18.0",
-					"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz",
-					"integrity": "sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-annotate-as-pure": "^7.16.7",
-						"@babel/helper-environment-visitor": "^7.16.7",
-						"@babel/helper-function-name": "^7.17.9",
-						"@babel/helper-member-expression-to-functions": "^7.17.7",
-						"@babel/helper-optimise-call-expression": "^7.16.7",
-						"@babel/helper-replace-supers": "^7.16.7",
-						"@babel/helper-split-export-declaration": "^7.16.7"
-					}
-				},
-				"@babel/helper-function-name": {
-					"version": "7.17.9",
-					"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
-					"integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
-					"dev": true,
-					"requires": {
-						"@babel/template": "^7.16.7",
-						"@babel/types": "^7.17.0"
-					}
-				},
-				"@babel/helper-hoist-variables": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-					"integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.16.7"
-					}
-				},
-				"@babel/helper-member-expression-to-functions": {
-					"version": "7.17.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
-					"integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.17.0"
-					}
-				},
-				"@babel/helper-optimise-call-expression": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-					"integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.16.7"
-					}
-				},
-				"@babel/helper-plugin-utils": {
-					"version": "7.17.12",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
-					"integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
-					"dev": true
-				},
-				"@babel/helper-replace-supers": {
-					"version": "7.18.2",
-					"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.18.2.tgz",
-					"integrity": "sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-environment-visitor": "^7.18.2",
-						"@babel/helper-member-expression-to-functions": "^7.17.7",
-						"@babel/helper-optimise-call-expression": "^7.16.7",
-						"@babel/traverse": "^7.18.2",
-						"@babel/types": "^7.18.2"
-					}
-				},
-				"@babel/helper-split-export-declaration": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-					"integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.16.7"
-					}
-				},
-				"@babel/helper-validator-identifier": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-					"integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
-					"dev": true
-				},
-				"@babel/highlight": {
-					"version": "7.17.12",
-					"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.12.tgz",
-					"integrity": "sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.16.7",
-						"chalk": "^2.0.0",
-						"js-tokens": "^4.0.0"
-					}
-				},
-				"@babel/parser": {
-					"version": "7.18.4",
-					"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz",
-					"integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==",
-					"dev": true
-				},
-				"@babel/template": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-					"integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.16.7",
-						"@babel/parser": "^7.16.7",
-						"@babel/types": "^7.16.7"
-					}
-				},
-				"@babel/traverse": {
-					"version": "7.18.2",
-					"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.18.2.tgz",
-					"integrity": "sha512-9eNwoeovJ6KH9zcCNnENY7DMFwTU9JdGCFtqNLfUAqtUHRCOsTOqWoffosP8vKmNYeSBUv3yVJXjfd8ucwOjUA==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.16.7",
-						"@babel/generator": "^7.18.2",
-						"@babel/helper-environment-visitor": "^7.18.2",
-						"@babel/helper-function-name": "^7.17.9",
-						"@babel/helper-hoist-variables": "^7.16.7",
-						"@babel/helper-split-export-declaration": "^7.16.7",
-						"@babel/parser": "^7.18.0",
-						"@babel/types": "^7.18.2",
-						"debug": "^4.1.0",
-						"globals": "^11.1.0"
-					}
-				},
-				"@babel/types": {
-					"version": "7.18.4",
-					"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.18.4.tgz",
-					"integrity": "sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-validator-identifier": "^7.16.7",
-						"to-fast-properties": "^2.0.0"
-					}
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"globals": {
-					"version": "11.12.0",
-					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-					"dev": true
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+		"node_modules/@appium/docutils/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dev": true,
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@babel/plugin-proposal-dynamic-import": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.0.tgz",
-			"integrity": "sha512-QGSA6ExWk95jFQgwz5GQ2Dr95cf7eI7TKutIXXTb7B1gCLTCz5hTjFTQGfLFBBiC5WSNi7udNwWsqbbMh1c4yQ==",
+		"node_modules/@appium/docutils/node_modules/diff": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+			"integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-dynamic-import": "^7.8.3"
+			"engines": {
+				"node": ">=0.3.1"
 			}
 		},
-		"@babel/plugin-proposal-export-default-from": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.16.0.tgz",
-			"integrity": "sha512-kFAhaIbh5qbBwETRNa/cgGmPJ/BicXhIyrZhAkyYhf/Z9LXCTRGO1mvUwczto0Hl1q4YtzP9cRtTKT4wujm38Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-export-default-from": "^7.16.0"
-			}
+		"node_modules/@appium/docutils/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
 		},
-		"@babel/plugin-proposal-export-namespace-from": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.0.tgz",
-			"integrity": "sha512-CjI4nxM/D+5wCnhD11MHB1AwRSAYeDT+h8gCdcVJZ/OK7+wRzFsf7PFPWVpVpNRkHMmMkQWAHpTq+15IXQ1diA==",
+		"node_modules/@appium/docutils/node_modules/figures": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+			"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-proposal-json-strings": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.0.tgz",
-			"integrity": "sha512-kouIPuiv8mSi5JkEhzApg5Gn6hFyKPnlkO0a9YSzqRurH8wYzSlf6RJdzluAsbqecdW5pBvDJDfyDIUR/vLxvg==",
+		"node_modules/@appium/docutils/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-json-strings": "^7.8.3"
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-proposal-logical-assignment-operators": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.0.tgz",
-			"integrity": "sha512-pbW0fE30sVTYXXm9lpVQQ/Vc+iTeQKiXlaNRZPPN2A2VdlWyAtsUrsQ3xydSlDW00TFMK7a8m3cDTkBF5WnV3Q==",
+		"node_modules/@appium/docutils/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-nullish-coalescing-operator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.0.tgz",
-			"integrity": "sha512-3bnHA8CAFm7cG93v8loghDYyQ8r97Qydf63BeYiGgYbjKKB/XP53W15wfRC7dvKfoiJ34f6Rbyyx2btExc8XsQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+		"node_modules/@appium/docutils/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-numeric-separator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.0.tgz",
-			"integrity": "sha512-FAhE2I6mjispy+vwwd6xWPyEx3NYFS13pikDBWUAFGZvq6POGs5eNchw8+1CYoEgBl9n11I3NkzD7ghn25PQ9Q==",
+		"node_modules/@appium/docutils/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-numeric-separator": "^7.10.4"
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-proposal-object-rest-spread": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.16.0.tgz",
-			"integrity": "sha512-LU/+jp89efe5HuWJLmMmFG0+xbz+I2rSI7iLc1AlaeSMDMOGzWlc5yJrMN1d04osXN4sSfpo4O+azkBNBes0jg==",
-			"requires": {
-				"@babel/compat-data": "^7.16.0",
-				"@babel/helper-compilation-targets": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-				"@babel/plugin-transform-parameters": "^7.16.0"
+		"node_modules/@appium/docutils/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-proposal-optional-catch-binding": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.0.tgz",
-			"integrity": "sha512-kicDo0A/5J0nrsCPbn89mTG3Bm4XgYi0CZtvex9Oyw7gGZE3HXGD0zpQNH+mo+tEfbo8wbmMvJftOwpmPy7aVw==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+		"node_modules/@appium/docutils/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-optional-chaining": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.0.tgz",
-			"integrity": "sha512-Y4rFpkZODfHrVo70Uaj6cC1JJOt3Pp0MdWSwIKtb8z1/lsjl9AmnB7ErRFV+QNGIfcY1Eruc2UMx5KaRnXjMyg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-skip-transparent-expression-wrappers": "^7.16.0",
-				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
+		"node_modules/@appium/docutils/node_modules/pkg-dir": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+			"integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@babel/plugin-proposal-private-methods": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.0.tgz",
-			"integrity": "sha512-IvHmcTHDFztQGnn6aWq4t12QaBXTKr1whF/dgp9kz84X6GUcwq9utj7z2wFCUfeOup/QKnOlt2k0zxkGFx9ubg==",
+		"node_modules/@appium/docutils/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-create-class-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-private-property-in-object": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.0.tgz",
-			"integrity": "sha512-3jQUr/HBbMVZmi72LpjQwlZ55i1queL8KcDTQEkAHihttJnAPrcvG9ZNXIfsd2ugpizZo595egYV6xy+pv4Ofw==",
+		"node_modules/@appium/docutils/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-create-class-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-proposal-unicode-property-regex": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.0.tgz",
-			"integrity": "sha512-ti7IdM54NXv29cA4+bNNKEMS4jLMCbJgl+Drv+FgYy0erJLAxNAIXcNjNjrRZEcWq0xJHsNVwQezskMFpF8N9g==",
+		"node_modules/@appium/docutils/node_modules/teen_process": {
+			"version": "2.0.50",
+			"resolved": "https://registry.npmjs.org/teen_process/-/teen_process-2.0.50.tgz",
+			"integrity": "sha512-DDppkV654MHUqIrZe2M4FK4NmTKxHHHlr/2M9yE0VrsY3iDUsZFbCIBzVEZ9fQ47Cem4JLtUp9ml4FGp3vR+Uw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-create-regexp-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"bluebird": "3.7.2",
+				"lodash": "4.17.21",
+				"shell-quote": "1.8.1",
+				"source-map-support": "0.5.21"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-syntax-async-generators": {
-			"version": "7.8.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-			"integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+		"node_modules/@appium/docutils/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-syntax-bigint": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-			"integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+		"node_modules/@appium/docutils/node_modules/typescript": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+			"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=12.20"
 			}
 		},
-		"@babel/plugin-syntax-class-properties": {
-			"version": "7.12.13",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-			"integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.12.13"
+		"node_modules/@appium/docutils/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"@babel/plugin-syntax-class-static-block": {
-			"version": "7.14.5",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-			"integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+		"node_modules/@appium/docutils/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@babel/plugin-syntax-decorators": {
-			"version": "7.17.12",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.12.tgz",
-			"integrity": "sha512-D1Hz0qtGTza8K2xGyEdVNCYLdVHukAcbQr4K3/s6r/esadyEriZovpJimQOpu8ju4/jV8dW/1xdaE0UpDroidw==",
+		"node_modules/@appium/docutils/node_modules/yaml": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.3.tgz",
+			"integrity": "sha512-zw0VAJxgeZ6+++/su5AFoqBbZbrEakwu+X0M5HmcwUiBL7AzcuPKjj5we4xfQLp78LkEMpD0cOnUhmgOVy3KdQ==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.17.12"
-			},
-			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.17.12",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz",
-					"integrity": "sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"@babel/plugin-syntax-dynamic-import": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-			"integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+		"node_modules/@appium/docutils/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dev": true,
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@babel/plugin-syntax-export-default-from": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.16.0.tgz",
-			"integrity": "sha512-xllLOdBj77mFSw8s02I+2SSQGHOftbWTlGmagheuNk/gjQsk7IrYsR/EosXVAVpgIUFffLckB/iPRioQYLHSrQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/docutils/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@babel/plugin-syntax-export-namespace-from": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-			"integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+		"node_modules/@appium/schema": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@appium/schema/-/schema-0.3.1.tgz",
+			"integrity": "sha512-j1/vldw+De2/X+GG5Iy0Vtv9tAiADXjXGycc+nfttrHZNGATxn16xxEFmuoFFPCT77o4adcBrov8Y8l9+oUB2Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/json-schema": "7.0.12",
+				"json-schema": "0.4.0",
+				"source-map-support": "0.5.21"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			}
+		},
+		"node_modules/@appium/support": {
+			"version": "4.1.7",
+			"resolved": "https://registry.npmjs.org/@appium/support/-/support-4.1.7.tgz",
+			"integrity": "sha512-YcEVF9ix+LPoCcuxUj4P0MigQ7wd3f8OfHllR3dTzRauM9QU7nRt0NGxBtbhtV6YPjWg/mGmt/i/m1bJptKsKA==",
+			"dev": true,
+			"dependencies": {
+				"@appium/tsconfig": "^0.3.2",
+				"@appium/types": "^0.14.0",
+				"@colors/colors": "1.6.0",
+				"@types/archiver": "5.3.3",
+				"@types/base64-stream": "1.0.3",
+				"@types/find-root": "1.1.2",
+				"@types/jsftp": "2.1.3",
+				"@types/klaw": "3.0.4",
+				"@types/lockfile": "1.0.2",
+				"@types/mv": "2.1.2",
+				"@types/ncp": "2.0.6",
+				"@types/npmlog": "4.1.4",
+				"@types/pluralize": "0.0.31",
+				"@types/semver": "7.5.3",
+				"@types/shell-quote": "1.7.2",
+				"@types/supports-color": "8.1.1",
+				"@types/teen_process": "2.0.1",
+				"@types/uuid": "9.0.5",
+				"@types/which": "3.0.0",
+				"archiver": "6.0.1",
+				"axios": "1.5.1",
+				"base64-stream": "1.0.0",
+				"bluebird": "3.7.2",
+				"bplist-creator": "0.1.1",
+				"bplist-parser": "0.3.2",
+				"form-data": "4.0.0",
+				"get-stream": "6.0.1",
+				"glob": "10.3.10",
+				"jsftp": "2.1.3",
+				"klaw": "4.1.0",
+				"lockfile": "1.0.4",
+				"lodash": "4.17.21",
+				"log-symbols": "4.1.0",
+				"moment": "2.29.4",
+				"mv": "2.1.1",
+				"ncp": "2.0.0",
+				"npmlog": "7.0.1",
+				"opencv-bindings": "4.5.5",
+				"pkg-dir": "5.0.0",
+				"plist": "3.1.0",
+				"pluralize": "8.0.0",
+				"read-pkg": "5.2.0",
+				"resolve-from": "5.0.0",
+				"sanitize-filename": "1.6.3",
+				"semver": "7.5.4",
+				"shell-quote": "1.8.1",
+				"source-map-support": "0.5.21",
+				"supports-color": "8.1.1",
+				"teen_process": "2.0.50",
+				"type-fest": "3.13.1",
+				"uuid": "9.0.1",
+				"which": "4.0.0",
+				"yauzl": "2.10.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			},
+			"optionalDependencies": {
+				"sharp": "0.32.6"
+			}
+		},
+		"node_modules/@appium/support/node_modules/@appium/schema": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@appium/schema/-/schema-0.4.2.tgz",
+			"integrity": "sha512-b2tC2sKAS8wnw8V7W7Rm6pXFt8QY4NTWvibprVYi1g8rZLnlmlIwUW0Gl6FhrWTUyK+u4rbF8vVIIBIU8C+i/g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.3"
+			"dependencies": {
+				"@types/json-schema": "7.0.15",
+				"json-schema": "0.4.0",
+				"source-map-support": "0.5.21"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-syntax-flow": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.0.tgz",
-			"integrity": "sha512-dH91yCo0RyqfzWgoM5Ji9ir8fQ+uFbt9KHM3d2x4jZOuHS6wNA+CRmRUP/BWCsHG2bjc7A2Way6AvH1eQk0wig==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/@appium/types": {
+			"version": "0.14.3",
+			"resolved": "https://registry.npmjs.org/@appium/types/-/types-0.14.3.tgz",
+			"integrity": "sha512-zW/fjn6HqvXLQVvWBX0qjYiWpfWKweXQQxUBO6egtiq77PRbDMkpeVAJIF8fvnng7XdaOo4OTdvADaZxpcgKCw==",
+			"dev": true,
+			"dependencies": {
+				"@appium/schema": "^0.4.2",
+				"@appium/tsconfig": "^0.x",
+				"@types/express": "4.17.21",
+				"@types/npmlog": "4.1.6",
+				"@types/ws": "8.5.10",
+				"type-fest": "3.13.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-syntax-import-meta": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-			"integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+		"node_modules/@appium/support/node_modules/@appium/types/node_modules/@types/npmlog": {
+			"version": "4.1.6",
+			"resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.6.tgz",
+			"integrity": "sha512-0l3z16vnlJGl2Mi/rgJFrdwfLZ4jfNYgE6ZShEpjqhHuGTqdEzNles03NpYHwUMVYZa+Tj46UxKIEpE78lQ3DQ==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.10.4"
+			"dependencies": {
+				"@types/node": "*"
 			}
 		},
-		"@babel/plugin-syntax-json-strings": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-			"integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+		"node_modules/@appium/support/node_modules/@colors/colors": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz",
+			"integrity": "sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+			"engines": {
+				"node": ">=0.1.90"
 			}
 		},
-		"@babel/plugin-syntax-jsx": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.0.tgz",
-			"integrity": "sha512-8zv2+xiPHwly31RK4RmnEYY5zziuF3O7W2kIDW+07ewWDh6Oi0dRq8kwvulRkFgt6DB97RlKs5c1y068iPlCUg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/@types/express": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
+			"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
 			}
 		},
-		"@babel/plugin-syntax-logical-assignment-operators": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-			"integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+		"node_modules/@appium/support/node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"dev": true
+		},
+		"node_modules/@appium/support/node_modules/@types/semver": {
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==",
+			"dev": true
+		},
+		"node_modules/@appium/support/node_modules/@types/teen_process": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@types/teen_process/-/teen_process-2.0.1.tgz",
+			"integrity": "sha512-hSLCkcQa9Ok1Mg0c1NbCJh9km6Gynj/7mHF2wQQNiiugMGkbhGfToZwEW78XRBnlw3784B6C8nsYnVeiU9bEwg==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.10.4"
+			"dependencies": {
+				"@types/node": "*"
 			}
 		},
-		"@babel/plugin-syntax-nullish-coalescing-operator": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-			"integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
-			}
+		"node_modules/@appium/support/node_modules/@types/uuid": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
+			"integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ==",
+			"dev": true
 		},
-		"@babel/plugin-syntax-numeric-separator": {
-			"version": "7.10.4",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-			"integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+		"node_modules/@appium/support/node_modules/@types/ws": {
+			"version": "8.5.10",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+			"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.10.4"
+			"dependencies": {
+				"@types/node": "*"
 			}
 		},
-		"@babel/plugin-syntax-object-rest-spread": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-			"integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+		"node_modules/@appium/support/node_modules/are-we-there-yet": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-4.0.2.tgz",
+			"integrity": "sha512-ncSWAawFhKMJDTdoAeOV+jyW1VCMj5QIAwULIBV0SSR7B/RLPPEQiknKcg/RIIZlUQrxELpsxMiTUoAQ4sIUyg==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@babel/plugin-syntax-optional-catch-binding": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-			"integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+		"node_modules/@appium/support/node_modules/bplist-parser": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.2.tgz",
+			"integrity": "sha512-apC2+fspHGI3mMKj+dGevkGo/tCqVB8jMb6i+OX+E29p0Iposz07fABkRIfVUPNd5A5VbuOz1bZbnmkKLYF+wQ==",
+			"dev": true,
+			"dependencies": {
+				"big-integer": "1.6.x"
+			},
+			"engines": {
+				"node": ">= 5.10.0"
 			}
 		},
-		"@babel/plugin-syntax-optional-chaining": {
-			"version": "7.8.3",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-			"integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.8.0"
+		"node_modules/@appium/support/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"@babel/plugin-syntax-private-property-in-object": {
-			"version": "7.14.5",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-			"integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+		"node_modules/@appium/support/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/@appium/support/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-syntax-top-level-await": {
-			"version": "7.14.5",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-			"integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+		"node_modules/@appium/support/node_modules/gauge": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+			"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.3",
+				"console-control-strings": "^1.1.0",
+				"has-unicode": "^2.0.1",
+				"signal-exit": "^4.0.1",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.5"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@babel/plugin-syntax-typescript": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.0.tgz",
-			"integrity": "sha512-Xv6mEXqVdaqCBfJFyeab0fH2DnUoMsDmhamxsSi4j8nLd4Vtw213WMJr55xxqipC/YVWyPY3K0blJncPYji+dQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-arrow-functions": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.0.tgz",
-			"integrity": "sha512-vIFb5250Rbh7roWARvCLvIJ/PtAU5Lhv7BtZ1u24COwpI9Ypjsh+bZcKk6rlIyalK+r0jOc1XQ8I4ovNxNrWrA==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/glob": {
+			"version": "10.3.10",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+			"integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+			"dev": true,
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^2.3.5",
+				"minimatch": "^9.0.1",
+				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+				"path-scurry": "^1.10.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"@babel/plugin-transform-async-to-generator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.0.tgz",
-			"integrity": "sha512-PbIr7G9kR8tdH6g8Wouir5uVjklETk91GMVSUq+VaOgiinbCkBP6Q7NN/suM/QutZkMJMvcyAriogcYAdhg8Gw==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-remap-async-to-generator": "^7.16.0"
+		"node_modules/@appium/support/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-transform-block-scoped-functions": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.0.tgz",
-			"integrity": "sha512-V14As3haUOP4ZWrLJ3VVx5rCnrYhMSHN/jX7z6FAt5hjRkLsb0snPCmJwSOML5oxkKO4FNoNv7V5hw/y2bjuvg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-transform-block-scoping": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.0.tgz",
-			"integrity": "sha512-27n3l67/R3UrXfizlvHGuTwsRIFyce3D/6a37GRxn28iyTPvNXaW4XvznexRh1zUNLPjbLL22Id0XQElV94ruw==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/isexe": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+			"integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
 			}
 		},
-		"@babel/plugin-transform-classes": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.0.tgz",
-			"integrity": "sha512-HUxMvy6GtAdd+GKBNYDWCIA776byUQH8zjnfjxwT1P1ARv/wFu8eBDpmXQcLS/IwRtrxIReGiplOwMeyO7nsDQ==",
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-function-name": "^7.16.0",
-				"@babel/helper-optimise-call-expression": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-replace-supers": "^7.16.0",
-				"@babel/helper-split-export-declaration": "^7.16.0",
-				"globals": "^11.1.0"
-			},
+		"node_modules/@appium/support/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
 			"dependencies": {
-				"globals": {
-					"version": "11.12.0",
-					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
-				}
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-computed-properties": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.0.tgz",
-			"integrity": "sha512-63l1dRXday6S8V3WFY5mXJwcRAnPYxvFfTlt67bwV1rTyVTM5zrp0DBBb13Kl7+ehkCVwIZPumPpFP/4u70+Tw==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"@babel/plugin-transform-destructuring": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.0.tgz",
-			"integrity": "sha512-Q7tBUwjxLTsHEoqktemHBMtb3NYwyJPTJdM+wDwb0g8PZ3kQUIzNvwD5lPaqW/p54TXBc/MXZu9Jr7tbUEUM8Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"@babel/plugin-transform-dotall-regex": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.0.tgz",
-			"integrity": "sha512-FXlDZfQeLILfJlC6I1qyEwcHK5UpRCFkaoVyA1nk9A1L1Yu583YO4un2KsLBsu3IJb4CUbctZks8tD9xPQubLw==",
+		"node_modules/@appium/support/node_modules/npmlog": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-7.0.1.tgz",
+			"integrity": "sha512-uJ0YFk/mCQpLBt+bxN88AKd+gyqZvZDbtiNxk6Waqcj2aPRyfVx8ITawkyQynxUagInjdYT1+qj4NfA5KJJUxg==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-create-regexp-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"are-we-there-yet": "^4.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^5.0.0",
+				"set-blocking": "^2.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@babel/plugin-transform-duplicate-keys": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.0.tgz",
-			"integrity": "sha512-LIe2kcHKAZOJDNxujvmp6z3mfN6V9lJxubU4fJIGoQCkKe3Ec2OcbdlYP+vW++4MpxwG0d1wSDOJtQW5kLnkZQ==",
+		"node_modules/@appium/support/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-exponentiation-operator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.0.tgz",
-			"integrity": "sha512-OwYEvzFI38hXklsrbNivzpO3fh87skzx8Pnqi4LoSYeav0xHlueSoCJrSgTPfnbyzopo5b3YVAJkFIcUpK2wsw==",
-			"requires": {
-				"@babel/helper-builder-binary-assignment-operator-visitor": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-transform-flow-strip-types": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.16.0.tgz",
-			"integrity": "sha512-vs/F5roOaO/+WxKfp9PkvLsAyj0G+Q0zbFimHm9X2KDgabN2XmNFoAafmeGEYspUlIF9+MvVmyek9UyHiqeG/w==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-flow": "^7.16.0"
+		"node_modules/@appium/support/node_modules/pkg-dir": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+			"integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@babel/plugin-transform-for-of": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.0.tgz",
-			"integrity": "sha512-5QKUw2kO+GVmKr2wMYSATCTTnHyscl6sxFRAY+rvN7h7WB0lcG0o4NoV6ZQU32OZGVsYUsfLGgPQpDFdkfjlJQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-transform-function-name": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.0.tgz",
-			"integrity": "sha512-lBzMle9jcOXtSOXUpc7tvvTpENu/NuekNJVova5lCCWCV9/U1ho2HH2y0p6mBg8fPm/syEAbfaaemYGOHCY3mg==",
-			"requires": {
-				"@babel/helper-function-name": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"@babel/plugin-transform-literals": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.0.tgz",
-			"integrity": "sha512-gQDlsSF1iv9RU04clgXqRjrPyyoJMTclFt3K1cjLmTKikc0s/6vE3hlDeEVC71wLTRu72Fq7650kABrdTc2wMQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@babel/plugin-transform-member-expression-literals": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.0.tgz",
-			"integrity": "sha512-WRpw5HL4Jhnxw8QARzRvwojp9MIE7Tdk3ez6vRyUk1MwgjJN0aNpRoXainLR5SgxmoXx/vsXGZ6OthP6t/RbUg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@appium/support/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
 			}
 		},
-		"@babel/plugin-transform-modules-amd": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.0.tgz",
-			"integrity": "sha512-rWFhWbCJ9Wdmzln1NmSCqn7P0RAD+ogXG/bd9Kg5c7PKWkJtkiXmYsMBeXjDlzHpVTJ4I/hnjs45zX4dEv81xw==",
+		"node_modules/@appium/support/node_modules/teen_process": {
+			"version": "2.0.50",
+			"resolved": "https://registry.npmjs.org/teen_process/-/teen_process-2.0.50.tgz",
+			"integrity": "sha512-DDppkV654MHUqIrZe2M4FK4NmTKxHHHlr/2M9yE0VrsY3iDUsZFbCIBzVEZ9fQ47Cem4JLtUp9ml4FGp3vR+Uw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-module-transforms": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"babel-plugin-dynamic-import-node": "^2.3.3"
+			"dependencies": {
+				"bluebird": "3.7.2",
+				"lodash": "4.17.21",
+				"shell-quote": "1.8.1",
+				"source-map-support": "0.5.21"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-transform-modules-commonjs": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.0.tgz",
-			"integrity": "sha512-Dzi+NWqyEotgzk/sb7kgQPJQf7AJkQBWsVp1N6JWc1lBVo0vkElUnGdr1PzUBmfsCCN5OOFya3RtpeHk15oLKQ==",
-			"requires": {
-				"@babel/helper-module-transforms": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-simple-access": "^7.16.0",
-				"babel-plugin-dynamic-import-node": "^2.3.3"
+		"node_modules/@appium/support/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-modules-systemjs": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.0.tgz",
-			"integrity": "sha512-yuGBaHS3lF1m/5R+6fjIke64ii5luRUg97N2wr+z1sF0V+sNSXPxXDdEEL/iYLszsN5VKxVB1IPfEqhzVpiqvg==",
+		"node_modules/@appium/support/node_modules/which": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+			"integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-hoist-variables": "^7.16.0",
-				"@babel/helper-module-transforms": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-validator-identifier": "^7.15.7",
-				"babel-plugin-dynamic-import-node": "^2.3.3"
+			"dependencies": {
+				"isexe": "^3.1.1"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^16.13.0 || >=18.0.0"
 			}
 		},
-		"@babel/plugin-transform-modules-umd": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.0.tgz",
-			"integrity": "sha512-nx4f6no57himWiHhxDM5pjwhae5vLpTK2zCnDH8+wNLJy0TVER/LJRHl2bkt6w9Aad2sPD5iNNoUpY3X9sTGDg==",
+		"node_modules/@appium/tsconfig": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/@appium/tsconfig/-/tsconfig-0.3.2.tgz",
+			"integrity": "sha512-GPJKATPBHbOC1lRX3+mq4wPRHzilEsBDh64TFBa156BtBRPhKi2DoLv38I93gNAWPJ+StwqZ5YMndriuu/8jKQ==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-module-transforms": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"dependencies": {
+				"@tsconfig/node14": "14.1.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-transform-named-capturing-groups-regex": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.0.tgz",
-			"integrity": "sha512-LogN88uO+7EhxWc8WZuQ8vxdSyVGxhkh8WTC3tzlT8LccMuQdA81e9SGV6zY7kY2LjDhhDOFdQVxdGwPyBCnvg==",
+		"node_modules/@appium/typedoc-plugin-appium": {
+			"version": "0.6.6",
+			"resolved": "https://registry.npmjs.org/@appium/typedoc-plugin-appium/-/typedoc-plugin-appium-0.6.6.tgz",
+			"integrity": "sha512-sZwhveCtUti2QPAhHWysE8IJVyT9KLUwLxXUBnvDjamEm8cuJmqQDDW9nPgv6iiw1bz9ankv/VLYI8egIpTl6g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-create-regexp-features-plugin": "^7.16.0"
+			"dependencies": {
+				"handlebars": "4.7.8",
+				"lodash": "4.17.21",
+				"pluralize": "8.0.0",
+				"type-fest": "3.13.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			},
+			"peerDependencies": {
+				"appium": "^2.0.0-beta.48",
+				"typedoc": "~0.23.14",
+				"typedoc-plugin-markdown": "3.14.0",
+				"typedoc-plugin-resolve-crossmodule-references": "~0.3.3",
+				"typescript": "^4.7.0 || ^5.0.0"
 			}
 		},
-		"@babel/plugin-transform-new-target": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.0.tgz",
-			"integrity": "sha512-fhjrDEYv2DBsGN/P6rlqakwRwIp7rBGLPbrKxwh7oVt5NNkIhZVOY2GRV+ULLsQri1bDqwDWnU3vhlmx5B2aCw==",
+		"node_modules/@appium/typedoc-plugin-appium/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-object-assign": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.16.7.tgz",
-			"integrity": "sha512-R8mawvm3x0COTJtveuoqZIjNypn2FjfvXZr4pSQ8VhEFBuQGBz4XhHasZtHXjgXU4XptZ4HtGof3NoYc93ZH9Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.16.7"
-			},
+		"node_modules/@appium/types": {
+			"version": "0.13.4",
+			"resolved": "https://registry.npmjs.org/@appium/types/-/types-0.13.4.tgz",
+			"integrity": "sha512-Kly8Bf6x6sbP8zt8+WFI9bIh8W+1N8sf2eBrbAoluk8/875sJe9X4JUSvJSxH6ew/C4Yo1e3J/hVywY5AF19ug==",
+			"dev": true,
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-					"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
-				}
+				"@appium/schema": "^0.3.1",
+				"@appium/tsconfig": "^0.3.1",
+				"@types/express": "4.17.17",
+				"@types/npmlog": "4.1.4",
+				"@types/ws": "8.5.5",
+				"type-fest": "3.13.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
 			}
 		},
-		"@babel/plugin-transform-object-super": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.0.tgz",
-			"integrity": "sha512-fds+puedQHn4cPLshoHcR1DTMN0q1V9ou0mUjm8whx9pGcNvDrVVrgw+KJzzCaiTdaYhldtrUps8DWVMgrSEyg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-replace-supers": "^7.16.0"
+		"node_modules/@appium/types/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@babel/plugin-transform-parameters": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.0.tgz",
-			"integrity": "sha512-XgnQEm1CevKROPx+udOi/8f8TiGhrUWiHiaUCIp47tE0tpFDjzXNTZc9E5CmCwxNjXTWEVqvRfWZYOTFvMa/ZQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@ariakit/core": {
+			"version": "0.4.14",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.4.14.tgz",
+			"integrity": "sha512-hpzZvyYzGhP09S9jW1XGsU/FD5K3BKsH1eG/QJ8rfgEeUdPS7BvHPt5lHbOeJ2cMrRzBEvsEzLi1ivfDifHsVA==",
+			"license": "MIT"
+		},
+		"node_modules/@ariakit/react": {
+			"version": "0.4.15",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.4.15.tgz",
+			"integrity": "sha512-0V2LkNPFrGRT+SEIiObx/LQjR6v3rR+mKEDUu/3tq7jfCZ+7+6Q6EMR1rFaK+XMkaRY1RWUcj/rRDWAUWnsDww==",
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/react-core": "0.4.15"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/ariakit"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
-		"@babel/plugin-transform-property-literals": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.0.tgz",
-			"integrity": "sha512-XLldD4V8+pOqX2hwfWhgwXzGdnDOThxaNTgqagOcpBgIxbUvpgU2FMvo5E1RyHbk756WYgdbS0T8y0Cj9FKkWQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@ariakit/react-core": {
+			"version": "0.4.15",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.4.15.tgz",
+			"integrity": "sha512-Up8+U97nAPJdyUh9E8BCEhJYTA+eVztWpHoo1R9zZfHd4cnBWAg5RHxEmMH+MamlvuRxBQA71hFKY/735fDg+A==",
+			"license": "MIT",
+			"dependencies": {
+				"@ariakit/core": "0.4.14",
+				"@floating-ui/dom": "^1.0.0",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
-		"@babel/plugin-transform-react-constant-elements": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.16.7.tgz",
-			"integrity": "sha512-lF+cfsyTgwWkcw715J88JhMYJ5GpysYNLhLP1PkvkhTRN7B3e74R/1KsDxFxhRpSn0UUD3IWM4GvdBR2PEbbQQ==",
+		"node_modules/@ariakit/test": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/@ariakit/test/-/test-0.4.7.tgz",
+			"integrity": "sha512-Zb5bnulzYGjr6sDubxOeOhk5Es6BYQq5lbcIe8xNrWUlpRiHsje/FlXNFpHnI92/7ESxH6X4pHhbb+qFAho1lw==",
 			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.16.7"
-			},
+			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-					"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
-					"dev": true
+				"@ariakit/core": "0.4.14",
+				"@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0"
+			},
+			"peerDependencies": {
+				"@playwright/test": "^1.27.0",
+				"@testing-library/react": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
+				"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@playwright/test": {
+					"optional": true
+				},
+				"@testing-library/react": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
 				}
 			}
 		},
-		"@babel/plugin-transform-react-display-name": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.0.tgz",
-			"integrity": "sha512-FJFdJAqaCpndL+pIf0aeD/qlQwT7QXOvR6Cc8JPvNhKJBi2zc/DPc4g05Y3fbD/0iWAMQFGij4+Xw+4L/BMpTg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
-			}
-		},
-		"@babel/plugin-transform-react-jsx": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.0.tgz",
-			"integrity": "sha512-rqDgIbukZ44pqq7NIRPGPGNklshPkvlmvqjdx3OZcGPk4zGIenYkxDTvl3LsSL8gqcc3ZzGmXPE6hR/u/voNOw==",
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-module-imports": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-jsx": "^7.16.0",
-				"@babel/types": "^7.16.0"
-			}
-		},
-		"@babel/plugin-transform-react-jsx-development": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.0.tgz",
-			"integrity": "sha512-qq65iSqBRq0Hr3wq57YG2AmW0H6wgTnIzpffTphrUWUgLCOK+zf1f7G0vuOiXrp7dU1qq+fQBoqZ3wCDAkhFzw==",
+		"node_modules/@aw-web-design/x-default-browser": {
+			"version": "1.4.126",
+			"resolved": "https://registry.npmjs.org/@aw-web-design/x-default-browser/-/x-default-browser-1.4.126.tgz",
+			"integrity": "sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==",
 			"dev": true,
-			"requires": {
-				"@babel/plugin-transform-react-jsx": "^7.16.0"
+			"dependencies": {
+				"default-browser-id": "3.0.0"
+			},
+			"bin": {
+				"x-default-browser": "bin/x-default-browser.js"
 			}
 		},
-		"@babel/plugin-transform-react-jsx-self": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz",
-			"integrity": "sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.16.7"
-			},
+		"node_modules/@axe-core/puppeteer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.0.0.tgz",
+			"integrity": "sha512-APFc2iRmrmUfqdBUevjsMxJliDudWPwvCU5Pzw2uKZ0sMVtW3rQuElTcfJCHFq8KOZSSO0BPD+lK+pXOx1ta5Q==",
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-					"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
-				}
+				"axe-core": "^4.0.1"
+			},
+			"engines": {
+				"node": ">=6.4.0"
+			},
+			"peerDependencies": {
+				"puppeteer": "^1.10.0 || ^2.0.0"
 			}
 		},
-		"@babel/plugin-transform-react-jsx-source": {
-			"version": "7.16.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz",
-			"integrity": "sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.16.7"
-			},
+		"node_modules/@babel/code-frame": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.9.tgz",
+			"integrity": "sha512-z88xeGxnzehn2sqZ8UdGQEvYErF1odv2CftxInpSYJt6uHuPe9YjahKZITGs3l5LeI9d2ROG+obuDAoSlqbNfQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.16.7",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-					"integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
-				}
+				"@babel/highlight": "^7.25.9",
+				"picocolors": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/compat-data": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.9.tgz",
+			"integrity": "sha512-yD+hEuJ/+wAJ4Ox2/rpNv5HIuPG82x3ZlQvYVn8iYCprdxzE7P1udpGF1jyjQVBU4dgznN+k2h103vxZ7NdPyw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/core": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.7.tgz",
+			"integrity": "sha512-yJ474Zv3cwiSOO9nXJuqzvwEeM+chDuQ8GJirw+pZ91sCGCyOZ3dJkVE09fTV0VEVzXyLWhh3G/AolYTPX7Mow==",
+			"license": "MIT",
+			"dependencies": {
+				"@ampproject/remapping": "^2.2.0",
+				"@babel/code-frame": "^7.25.7",
+				"@babel/generator": "^7.25.7",
+				"@babel/helper-compilation-targets": "^7.25.7",
+				"@babel/helper-module-transforms": "^7.25.7",
+				"@babel/helpers": "^7.25.7",
+				"@babel/parser": "^7.25.7",
+				"@babel/template": "^7.25.7",
+				"@babel/traverse": "^7.25.7",
+				"@babel/types": "^7.25.7",
+				"convert-source-map": "^2.0.0",
+				"debug": "^4.1.0",
+				"gensync": "^1.0.0-beta.2",
+				"json5": "^2.2.3",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/babel"
 			}
 		},
-		"@babel/plugin-transform-react-pure-annotations": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.0.tgz",
-			"integrity": "sha512-NC/Bj2MG+t8Ef5Pdpo34Ay74X4Rt804h5y81PwOpfPtmAK3i6CizmQqwyBQzIepz1Yt8wNr2Z2L7Lu3qBMfZMA==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-annotate-as-pure": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
-			}
+		"node_modules/@babel/core/node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
 		},
-		"@babel/plugin-transform-regenerator": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.0.tgz",
-			"integrity": "sha512-JAvGxgKuwS2PihiSFaDrp94XOzzTUeDeOQlcKzVAyaPap7BnZXK/lvMDiubkPTdotPKOIZq9xWXWnggUMYiExg==",
-			"requires": {
-				"regenerator-transform": "^0.14.2"
+		"node_modules/@babel/core/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"@babel/plugin-transform-reserved-words": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.0.tgz",
-			"integrity": "sha512-Dgs8NNCehHSvXdhEhln8u/TtJxfVwGYCgP2OOr5Z3Ar+B+zXicEOKNTyc+eca2cuEOMtjW6m9P9ijOt8QdqWkg==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/generator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.9.tgz",
+			"integrity": "sha512-omlUGkr5EaoIJrhLf9CJ0TvjBRpd9+AXRG//0GEQ9THSo8wPiTlbpy1/Ow8ZTrbXpjd9FHXfbFQx32I04ht0FA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.25.9",
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.25",
+				"jsesc": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/plugin-transform-runtime": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.16.0.tgz",
-			"integrity": "sha512-zlPf1/XFn5+vWdve3AAhf+Sxl+MVa5VlwTwWgnLx23u4GlatSRQJ3Eoo9vllf0a9il3woQsT4SK+5Z7c06h8ag==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"babel-plugin-polyfill-corejs2": "^0.2.3",
-				"babel-plugin-polyfill-corejs3": "^0.3.0",
-				"babel-plugin-polyfill-regenerator": "^0.2.3",
-				"semver": "^6.3.0"
+		"node_modules/@babel/helper-annotate-as-pure": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
+			"integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.9.tgz",
+			"integrity": "sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==",
+			"license": "MIT",
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				}
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/plugin-transform-shorthand-properties": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.0.tgz",
-			"integrity": "sha512-iVb1mTcD8fuhSv3k99+5tlXu5N0v8/DPm2mO3WACLG6al1CGZH7v09HJyUb1TtYl/Z+KrM6pHSIJdZxP5A+xow==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-builder-binary-assignment-operator-visitor/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/plugin-transform-spread": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.0.tgz",
-			"integrity": "sha512-Ao4MSYRaLAQczZVp9/7E7QHsCuK92yHRrmVNRe/SlEJjhzivq0BSn8mEraimL8wizHZ3fuaHxKH0iwzI13GyGg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-skip-transparent-expression-wrappers": "^7.16.0"
+		"node_modules/@babel/helper-builder-binary-assignment-operator-visitor/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@babel/plugin-transform-sticky-regex": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.0.tgz",
-			"integrity": "sha512-/ntT2NljR9foobKk4E/YyOSwcGUXtYWv5tinMK/3RkypyNBNdhHUaq6Orw5DWq9ZcNlS03BIlEALFeQgeVAo4Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-compilation-targets": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+			"integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.25.9",
+				"@babel/helper-validator-option": "^7.25.9",
+				"browserslist": "^4.24.0",
+				"lru-cache": "^5.1.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/plugin-transform-template-literals": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.0.tgz",
-			"integrity": "sha512-Rd4Ic89hA/f7xUSJQk5PnC+4so50vBoBfxjdQAdvngwidM8jYIBVxBZ/sARxD4e0yMXRbJVDrYf7dyRtIIKT6Q==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dependencies": {
+				"yallist": "^3.0.2"
 			}
 		},
-		"@babel/plugin-transform-typeof-symbol": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.0.tgz",
-			"integrity": "sha512-++V2L8Bdf4vcaHi2raILnptTBjGEFxn5315YU+e8+EqXIucA+q349qWngCLpUYqqv233suJ6NOienIVUpS9cqg==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"@babel/plugin-transform-typescript": {
-			"version": "7.16.1",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.1.tgz",
-			"integrity": "sha512-NO4XoryBng06jjw/qWEU2LhcLJr1tWkhpMam/H4eas/CDKMX/b2/Ylb6EI256Y7+FVPCawwSM1rrJNOpDiz+Lg==",
-			"requires": {
-				"@babel/helper-create-class-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/plugin-syntax-typescript": "^7.16.0"
+		"node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+		},
+		"node_modules/@babel/helper-create-class-features-plugin": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
+			"integrity": "sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-member-expression-to-functions": "^7.25.9",
+				"@babel/helper-optimise-call-expression": "^7.25.9",
+				"@babel/helper-replace-supers": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+				"@babel/traverse": "^7.25.9",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/plugin-transform-unicode-escapes": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.0.tgz",
-			"integrity": "sha512-VFi4dhgJM7Bpk8lRc5CMaRGlKZ29W9C3geZjt9beuzSUrlJxsNwX7ReLwaL6WEvsOf2EQkyIJEPtF8EXjB/g2A==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@babel/plugin-transform-unicode-regex": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.0.tgz",
-			"integrity": "sha512-jHLK4LxhHjvCeZDWyA9c+P9XH1sOxRd1RO9xMtDVRAOND/PczPqizEtVdx4TQF/wyPaewqpT+tgQFYMnN/P94A==",
-			"requires": {
-				"@babel/helper-create-regexp-features-plugin": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5"
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"@babel/preset-env": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.16.0.tgz",
-			"integrity": "sha512-cdTu/W0IrviamtnZiTfixPfIncr2M1VqRrkjzZWlr1B4TVYimCFK5jkyOdP4qw2MrlKHi+b3ORj6x8GoCew8Dg==",
-			"dev": true,
-			"requires": {
-				"@babel/compat-data": "^7.16.0",
-				"@babel/helper-compilation-targets": "^7.16.0",
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-validator-option": "^7.14.5",
-				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.0",
-				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.16.0",
-				"@babel/plugin-proposal-async-generator-functions": "^7.16.0",
-				"@babel/plugin-proposal-class-properties": "^7.16.0",
-				"@babel/plugin-proposal-class-static-block": "^7.16.0",
-				"@babel/plugin-proposal-dynamic-import": "^7.16.0",
-				"@babel/plugin-proposal-export-namespace-from": "^7.16.0",
-				"@babel/plugin-proposal-json-strings": "^7.16.0",
-				"@babel/plugin-proposal-logical-assignment-operators": "^7.16.0",
-				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-				"@babel/plugin-proposal-numeric-separator": "^7.16.0",
-				"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
-				"@babel/plugin-proposal-optional-catch-binding": "^7.16.0",
-				"@babel/plugin-proposal-optional-chaining": "^7.16.0",
-				"@babel/plugin-proposal-private-methods": "^7.16.0",
-				"@babel/plugin-proposal-private-property-in-object": "^7.16.0",
-				"@babel/plugin-proposal-unicode-property-regex": "^7.16.0",
-				"@babel/plugin-syntax-async-generators": "^7.8.4",
-				"@babel/plugin-syntax-class-properties": "^7.12.13",
-				"@babel/plugin-syntax-class-static-block": "^7.14.5",
-				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-				"@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-				"@babel/plugin-syntax-json-strings": "^7.8.3",
-				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-				"@babel/plugin-syntax-numeric-separator": "^7.10.4",
-				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-				"@babel/plugin-syntax-optional-chaining": "^7.8.3",
-				"@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-				"@babel/plugin-syntax-top-level-await": "^7.14.5",
-				"@babel/plugin-transform-arrow-functions": "^7.16.0",
-				"@babel/plugin-transform-async-to-generator": "^7.16.0",
-				"@babel/plugin-transform-block-scoped-functions": "^7.16.0",
-				"@babel/plugin-transform-block-scoping": "^7.16.0",
-				"@babel/plugin-transform-classes": "^7.16.0",
-				"@babel/plugin-transform-computed-properties": "^7.16.0",
-				"@babel/plugin-transform-destructuring": "^7.16.0",
-				"@babel/plugin-transform-dotall-regex": "^7.16.0",
-				"@babel/plugin-transform-duplicate-keys": "^7.16.0",
-				"@babel/plugin-transform-exponentiation-operator": "^7.16.0",
-				"@babel/plugin-transform-for-of": "^7.16.0",
-				"@babel/plugin-transform-function-name": "^7.16.0",
-				"@babel/plugin-transform-literals": "^7.16.0",
-				"@babel/plugin-transform-member-expression-literals": "^7.16.0",
-				"@babel/plugin-transform-modules-amd": "^7.16.0",
-				"@babel/plugin-transform-modules-commonjs": "^7.16.0",
-				"@babel/plugin-transform-modules-systemjs": "^7.16.0",
-				"@babel/plugin-transform-modules-umd": "^7.16.0",
-				"@babel/plugin-transform-named-capturing-groups-regex": "^7.16.0",
-				"@babel/plugin-transform-new-target": "^7.16.0",
-				"@babel/plugin-transform-object-super": "^7.16.0",
-				"@babel/plugin-transform-parameters": "^7.16.0",
-				"@babel/plugin-transform-property-literals": "^7.16.0",
-				"@babel/plugin-transform-regenerator": "^7.16.0",
-				"@babel/plugin-transform-reserved-words": "^7.16.0",
-				"@babel/plugin-transform-shorthand-properties": "^7.16.0",
-				"@babel/plugin-transform-spread": "^7.16.0",
-				"@babel/plugin-transform-sticky-regex": "^7.16.0",
-				"@babel/plugin-transform-template-literals": "^7.16.0",
-				"@babel/plugin-transform-typeof-symbol": "^7.16.0",
-				"@babel/plugin-transform-unicode-escapes": "^7.16.0",
-				"@babel/plugin-transform-unicode-regex": "^7.16.0",
-				"@babel/preset-modules": "^0.1.5",
-				"@babel/types": "^7.16.0",
-				"babel-plugin-polyfill-corejs2": "^0.2.3",
-				"babel-plugin-polyfill-corejs3": "^0.3.0",
-				"babel-plugin-polyfill-regenerator": "^0.2.3",
-				"core-js-compat": "^3.19.0",
-				"semver": "^6.3.0"
-			},
+		"node_modules/@babel/helper-create-regexp-features-plugin": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.9.tgz",
+			"integrity": "sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==",
+			"license": "MIT",
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"regexpu-core": "^6.1.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@babel/preset-flow": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.16.0.tgz",
-			"integrity": "sha512-e5NE1EoPMpoHFkyFkMSj2h9tu7OolARcUHki8mnBv4NiFK9so+UrhbvT9mV99tMJOUEx8BOj67T6dXvGcTeYeQ==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-validator-option": "^7.14.5",
-				"@babel/plugin-transform-flow-strip-types": "^7.16.0"
+		"node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"@babel/preset-modules": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
-			"integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.0.0",
-				"@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-				"@babel/plugin-transform-dotall-regex": "^7.4.4",
-				"@babel/types": "^7.4.4",
-				"esutils": "^2.0.2"
+		"node_modules/@babel/helper-define-polyfill-provider": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
+			"integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.22.6",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"debug": "^4.1.1",
+				"lodash.debounce": "^4.0.8",
+				"resolve": "^1.14.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
 			}
 		},
-		"@babel/preset-react": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.0.tgz",
-			"integrity": "sha512-d31IFW2bLRB28uL1WoElyro8RH5l6531XfxMtCeCmp6RVAF1uTfxxUA0LH1tXl+psZdwfmIbwoG4U5VwgbhtLw==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-validator-option": "^7.14.5",
-				"@babel/plugin-transform-react-display-name": "^7.16.0",
-				"@babel/plugin-transform-react-jsx": "^7.16.0",
-				"@babel/plugin-transform-react-jsx-development": "^7.16.0",
-				"@babel/plugin-transform-react-pure-annotations": "^7.16.0"
+		"node_modules/@babel/helper-environment-visitor": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+			"integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/preset-typescript": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.16.0.tgz",
-			"integrity": "sha512-txegdrZYgO9DlPbv+9QOVpMnKbOtezsLHWsnsRF4AjbSIsVaujrq1qg8HK0mxQpWv0jnejt0yEoW1uWpvbrDTg==",
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.14.5",
-				"@babel/helper-validator-option": "^7.14.5",
-				"@babel/plugin-transform-typescript": "^7.16.0"
+		"node_modules/@babel/helper-member-expression-to-functions": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
+			"integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/register": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/register/-/register-7.16.0.tgz",
-			"integrity": "sha512-lzl4yfs0zVXnooeLE0AAfYaT7F3SPA8yB2Bj4W1BiZwLbMS3MZH35ZvCWSRHvneUugwuM+Wsnrj7h0F7UmU3NQ==",
-			"requires": {
-				"clone-deep": "^4.0.1",
-				"find-cache-dir": "^2.0.0",
-				"make-dir": "^2.1.0",
-				"pirates": "^4.0.0",
-				"source-map-support": "^0.5.16"
+		"node_modules/@babel/helper-member-expression-to-functions/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-member-expression-to-functions/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/helper-module-imports": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+			"integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+			"license": "MIT",
 			"dependencies": {
-				"make-dir": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-					"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-					"requires": {
-						"pify": "^4.0.1",
-						"semver": "^5.6.0"
-					}
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-				}
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/runtime": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.0.tgz",
-			"integrity": "sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==",
-			"requires": {
-				"regenerator-runtime": "^0.13.4"
+		"node_modules/@babel/helper-module-imports/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/runtime-corejs3": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.16.0.tgz",
-			"integrity": "sha512-Oi2qwQ21X7/d9gn3WiwkDTJmq3TQtYNz89lRnoFy8VeZpWlsyXvzSwiRrRZ8cXluvSwqKxqHJ6dBd9Rv+p0ZGQ==",
-			"dev": true,
-			"requires": {
-				"core-js-pure": "^3.19.0",
-				"regenerator-runtime": "^0.13.4"
+		"node_modules/@babel/helper-module-imports/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@babel/template": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz",
-			"integrity": "sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==",
-			"requires": {
-				"@babel/code-frame": "^7.16.0",
-				"@babel/parser": "^7.16.0",
-				"@babel/types": "^7.16.0"
+		"node_modules/@babel/helper-module-transforms": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.9.tgz",
+			"integrity": "sha512-TvLZY/F3+GvdRYFZFyxMvnsKi+4oJdgZzU3BoGN9Uc2d9C6zfNwJcKKhjqLAhK8i46mv93jsO74fDh3ih6rpHA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.25.9",
+				"@babel/helper-simple-access": "^7.25.9",
+				"@babel/helper-validator-identifier": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@babel/traverse": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.0.tgz",
-			"integrity": "sha512-qQ84jIs1aRQxaGaxSysII9TuDaguZ5yVrEuC0BN2vcPlalwfLovVmCjbFDPECPXcYM/wLvNFfp8uDOliLxIoUQ==",
-			"requires": {
-				"@babel/code-frame": "^7.16.0",
-				"@babel/generator": "^7.16.0",
-				"@babel/helper-function-name": "^7.16.0",
-				"@babel/helper-hoist-variables": "^7.16.0",
-				"@babel/helper-split-export-declaration": "^7.16.0",
-				"@babel/parser": "^7.16.0",
-				"@babel/types": "^7.16.0",
-				"debug": "^4.1.0",
+		"node_modules/@babel/helper-module-transforms/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
 				"globals": "^11.1.0"
 			},
-			"dependencies": {
-				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"globals": {
-					"version": "11.12.0",
-					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-				}
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@babel/types": {
-			"version": "7.16.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
-			"integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
-			"requires": {
-				"@babel/helper-validator-identifier": "^7.15.7",
-				"to-fast-properties": "^2.0.0"
+		"node_modules/@babel/helper-module-transforms/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@base2/pretty-print-object": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz",
-			"integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
-			"dev": true
-		},
-		"@bcoe/v8-coverage": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-			"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-			"dev": true
+		"node_modules/@babel/helper-optimise-call-expression": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
+			"integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"@cnakazawa/watch": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.3.tgz",
-			"integrity": "sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==",
-			"requires": {
-				"exec-sh": "^0.3.2",
-				"minimist": "^1.2.0"
+		"node_modules/@babel/helper-plugin-utils": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
+			"integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@colors/colors": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-			"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
-			"dev": true,
-			"optional": true
+		"node_modules/@babel/helper-remap-async-to-generator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
+			"integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-wrap-function": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"@discoveryjs/json-ext": {
-			"version": "0.5.5",
-			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz",
-			"integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
-			"dev": true
+		"node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"@egjs/hammerjs": {
-			"version": "2.0.17",
-			"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-			"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-			"requires": {
-				"@types/hammerjs": "^2.0.36"
+		"node_modules/@babel/helper-remap-async-to-generator/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@emotion/babel-plugin": {
-			"version": "11.3.0",
-			"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
-			"integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==",
-			"requires": {
-				"@babel/helper-module-imports": "^7.12.13",
-				"@babel/plugin-syntax-jsx": "^7.12.13",
-				"@babel/runtime": "^7.13.10",
-				"@emotion/hash": "^0.8.0",
-				"@emotion/memoize": "^0.7.5",
-				"@emotion/serialize": "^1.0.2",
-				"babel-plugin-macros": "^2.6.1",
-				"convert-source-map": "^1.5.0",
-				"escape-string-regexp": "^4.0.0",
-				"find-root": "^1.1.0",
-				"source-map": "^0.5.7",
-				"stylis": "^4.0.3"
-			},
+		"node_modules/@babel/helper-replace-supers": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz",
+			"integrity": "sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/memoize": {
-					"version": "0.7.5",
-					"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
-					"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
-				},
-				"@emotion/serialize": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
-					"integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
-					"requires": {
-						"@emotion/hash": "^0.8.0",
-						"@emotion/memoize": "^0.7.4",
-						"@emotion/unitless": "^0.7.5",
-						"@emotion/utils": "^1.0.0",
-						"csstype": "^3.0.2"
-					}
-				},
-				"@emotion/utils": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
-					"integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
-				},
-				"csstype": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-					"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-				},
-				"escape-string-regexp": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-					"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-				}
+				"@babel/helper-member-expression-to-functions": "^7.25.9",
+				"@babel/helper-optimise-call-expression": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@emotion/cache": {
-			"version": "11.7.1",
-			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
-			"integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
-			"requires": {
-				"@emotion/memoize": "^0.7.4",
-				"@emotion/sheet": "^1.1.0",
-				"@emotion/utils": "^1.0.0",
-				"@emotion/weak-memoize": "^0.2.5",
-				"stylis": "4.0.13"
-			},
+		"node_modules/@babel/helper-replace-supers/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/sheet": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
-					"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
-				},
-				"stylis": {
-					"version": "4.0.13",
-					"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-					"integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/core": {
-			"version": "10.1.1",
-			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
-			"integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.5",
-				"@emotion/cache": "^10.0.27",
-				"@emotion/css": "^10.0.27",
-				"@emotion/serialize": "^0.11.15",
-				"@emotion/sheet": "0.9.4",
-				"@emotion/utils": "0.11.3"
-			},
-			"dependencies": {
-				"@emotion/cache": {
-					"version": "10.0.29",
-					"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-					"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-					"dev": true,
-					"requires": {
-						"@emotion/sheet": "0.9.4",
-						"@emotion/stylis": "0.8.5",
-						"@emotion/utils": "0.11.3",
-						"@emotion/weak-memoize": "0.2.5"
-					}
-				},
-				"@emotion/css": {
-					"version": "10.0.27",
-					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-					"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-					"dev": true,
-					"requires": {
-						"@emotion/serialize": "^0.11.15",
-						"@emotion/utils": "0.11.3",
-						"babel-plugin-emotion": "^10.0.27"
-					}
-				},
-				"@emotion/serialize": {
-					"version": "0.11.16",
-					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-					"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-					"dev": true,
-					"requires": {
-						"@emotion/hash": "0.8.0",
-						"@emotion/memoize": "0.7.4",
-						"@emotion/unitless": "0.7.5",
-						"@emotion/utils": "0.11.3",
-						"csstype": "^2.5.7"
-					}
-				},
-				"@emotion/utils": {
-					"version": "0.11.3",
-					"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-					"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-					"dev": true
-				},
-				"csstype": {
-					"version": "2.6.19",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
-					"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
-					"dev": true
-				}
+		"node_modules/@babel/helper-replace-supers/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@emotion/css": {
-			"version": "11.7.1",
-			"resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.7.1.tgz",
-			"integrity": "sha512-RUUgPlMZunlc7SE5A6Hg+VWRzb2cU6O9xlV78KCFgcnl25s7Qz/20oQg71iKudpLqk7xj0vhbJlwcJJMT0BOZg==",
-			"requires": {
-				"@emotion/babel-plugin": "^11.7.1",
-				"@emotion/cache": "^11.7.1",
-				"@emotion/serialize": "^1.0.0",
-				"@emotion/sheet": "^1.0.3",
-				"@emotion/utils": "^1.0.0"
-			},
+		"node_modules/@babel/helper-simple-access": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz",
+			"integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/babel-plugin": {
-					"version": "11.7.1",
-					"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.1.tgz",
-					"integrity": "sha512-K3/6Y+J/sIAjplf3uIteWLhPuOyuMNnE+iyYnTF/m294vc6IL90kTHp7y8ldZYbpKlP17rpOWDKM9DvTcrOmNQ==",
-					"requires": {
-						"@babel/helper-module-imports": "^7.12.13",
-						"@babel/plugin-syntax-jsx": "^7.12.13",
-						"@babel/runtime": "^7.13.10",
-						"@emotion/hash": "^0.8.0",
-						"@emotion/memoize": "^0.7.5",
-						"@emotion/serialize": "^1.0.2",
-						"babel-plugin-macros": "^2.6.1",
-						"convert-source-map": "^1.5.0",
-						"escape-string-regexp": "^4.0.0",
-						"find-root": "^1.1.0",
-						"source-map": "^0.5.7",
-						"stylis": "4.0.13"
-					}
-				},
-				"@emotion/memoize": {
-					"version": "0.7.5",
-					"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
-					"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
-				},
-				"@emotion/sheet": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
-					"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
-				},
-				"escape-string-regexp": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-					"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-				},
-				"stylis": {
-					"version": "4.0.13",
-					"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-					"integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
-				}
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/css-prettifier": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@emotion/css-prettifier/-/css-prettifier-1.0.1.tgz",
-			"integrity": "sha512-cA9Dtol47mtvWKasPC+8tkh2DS0wBkX0MMHKieXGSkGyx079V7yFY85KC0pPalcIy+vi0LbMR9DNyiJBqYgJ1Q==",
-			"dev": true,
-			"requires": {
-				"@emotion/memoize": "^0.7.4",
-				"stylis": "4.0.13"
-			},
+		"node_modules/@babel/helper-simple-access/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"stylis": {
-					"version": "4.0.13",
-					"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-					"integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==",
-					"dev": true
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/hash": {
-			"version": "0.8.0",
-			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-			"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-		},
-		"@emotion/is-prop-valid": {
-			"version": "0.8.8",
-			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-			"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-			"optional": true,
-			"requires": {
-				"@emotion/memoize": "0.7.4"
+		"node_modules/@babel/helper-simple-access/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@emotion/jest": {
-			"version": "11.7.1",
-			"resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz",
-			"integrity": "sha512-IYKyiIm4a7LINESYTa6aAizRj6YTwIvpD9s9yDzkrOEJXKwCqWWOTVNNOJKBygim3fv4lC9KM5jG5qzHvy4ZJg==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.13.10",
-				"@emotion/css-prettifier": "^1.0.1",
-				"chalk": "^4.1.0",
-				"specificity": "^0.4.1",
-				"stylis": "4.0.13"
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
+			"integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"stylis": {
-					"version": "4.0.13",
-					"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-					"integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==",
-					"dev": true
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/memoize": {
-			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"@emotion/native": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@emotion/native/-/native-11.0.0.tgz",
-			"integrity": "sha512-IByi+OfagLtcQsXZMkS06ztcNMZePg6dqwzM4FIkXjN4PhoeJ/jTDRICT3pTIk3ChuurX2oF8fmE+0bfvYi/SA==",
-			"dev": true,
-			"requires": {
-				"@emotion/primitives-core": "^11.0.0"
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+			"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/primitives-core": {
-			"version": "11.0.0",
-			"resolved": "https://registry.npmjs.org/@emotion/primitives-core/-/primitives-core-11.0.0.tgz",
-			"integrity": "sha512-4zpfUV7hz9A+j7Hcyiend3LEtRogDXDtMzQy8LOoU39Mw5ntgvTlYQSPbQSzs98BJty/F9Ybyg3pBzFDdMpmDg==",
-			"dev": true,
-			"requires": {
-				"css-to-react-native": "^3.0.0"
-			},
-			"dependencies": {
-				"css-to-react-native": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
-					"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
-					"dev": true,
-					"requires": {
-						"camelize": "^1.0.0",
-						"css-color-keywords": "^1.0.0",
-						"postcss-value-parser": "^4.0.2"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+			"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/react": {
-			"version": "11.7.1",
-			"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
-			"integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
-			"requires": {
-				"@babel/runtime": "^7.13.10",
-				"@emotion/cache": "^11.7.1",
-				"@emotion/serialize": "^1.0.2",
-				"@emotion/sheet": "^1.1.0",
-				"@emotion/utils": "^1.0.0",
-				"@emotion/weak-memoize": "^0.2.5",
-				"hoist-non-react-statics": "^3.3.1"
-			},
+		"node_modules/@babel/helper-validator-option": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+			"integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-wrap-function": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
+			"integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/sheet": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
-					"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
-				}
+				"@babel/template": "^7.25.9",
+				"@babel/traverse": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/serialize": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
-			"integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
-			"requires": {
-				"@emotion/hash": "^0.8.0",
-				"@emotion/memoize": "^0.7.4",
-				"@emotion/unitless": "^0.7.5",
-				"@emotion/utils": "^1.0.0",
-				"csstype": "^3.0.2"
+		"node_modules/@babel/helper-wrap-function/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/sheet": {
-			"version": "0.9.4",
-			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-			"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==",
-			"dev": true
+		"node_modules/@babel/helper-wrap-function/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"@emotion/styled": {
-			"version": "11.6.0",
-			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
-			"integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
-			"requires": {
-				"@babel/runtime": "^7.13.10",
-				"@emotion/babel-plugin": "^11.3.0",
-				"@emotion/is-prop-valid": "^1.1.1",
-				"@emotion/serialize": "^1.0.2",
-				"@emotion/utils": "^1.0.0"
-			},
+		"node_modules/@babel/helpers": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.7.tgz",
+			"integrity": "sha512-Sv6pASx7Esm38KQpF/U/OXLwPPrdGHNKoeblRxgZRLXnAtnkEe4ptJPDtAZM7fBLadbc1Q07kQpSiGQ0Jg6tRA==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/is-prop-valid": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
-					"integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
-					"requires": {
-						"@emotion/memoize": "^0.7.4"
-					}
-				}
+				"@babel/template": "^7.25.7",
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/styled-base": {
-			"version": "10.0.31",
-			"resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
-			"integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.5",
-				"@emotion/is-prop-valid": "0.8.8",
-				"@emotion/serialize": "^0.11.15",
-				"@emotion/utils": "0.11.3"
-			},
+		"node_modules/@babel/highlight": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.9.tgz",
+			"integrity": "sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==",
+			"license": "MIT",
 			"dependencies": {
-				"@emotion/is-prop-valid": {
-					"version": "0.8.8",
-					"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-					"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-					"dev": true,
-					"requires": {
-						"@emotion/memoize": "0.7.4"
-					}
-				},
-				"@emotion/memoize": {
-					"version": "0.7.4",
-					"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-					"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-					"dev": true
-				},
-				"@emotion/serialize": {
-					"version": "0.11.16",
-					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-					"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-					"dev": true,
-					"requires": {
-						"@emotion/hash": "0.8.0",
-						"@emotion/memoize": "0.7.4",
-						"@emotion/unitless": "0.7.5",
-						"@emotion/utils": "0.11.3",
-						"csstype": "^2.5.7"
-					}
-				},
-				"@emotion/utils": {
-					"version": "0.11.3",
-					"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-					"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-					"dev": true
-				},
-				"csstype": {
-					"version": "2.6.19",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
-					"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
-					"dev": true
-				}
+				"@babel/helper-validator-identifier": "^7.25.9",
+				"chalk": "^2.4.2",
+				"js-tokens": "^4.0.0",
+				"picocolors": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@emotion/stylis": {
-			"version": "0.8.5",
-			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-			"dev": true
-		},
-		"@emotion/unitless": {
-			"version": "0.7.5",
-			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-		},
-		"@emotion/utils": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
-			"integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
-		},
-		"@emotion/weak-memoize": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-			"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-		},
-		"@es-joy/jsdoccomment": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.12.0.tgz",
-			"integrity": "sha512-Gw4/j9v36IKY8ET+W0GoOzrRw17xjf21EIFFRL3zx21fF5MnqmeNpNi+PU/LKjqLpPb2Pw2XdlJbYM31VVo/PQ==",
-			"dev": true,
-			"requires": {
-				"comment-parser": "1.2.4",
-				"esquery": "^1.4.0",
-				"jsdoc-type-pratt-parser": "2.0.0"
-			},
+		"node_modules/@babel/highlight/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"license": "MIT",
 			"dependencies": {
-				"comment-parser": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.2.4.tgz",
-					"integrity": "sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==",
-					"dev": true
-				},
-				"esquery": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
-					"integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
-					"dev": true,
-					"requires": {
-						"estraverse": "^5.1.0"
-					}
-				},
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				}
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@eslint/eslintrc": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.4.tgz",
-			"integrity": "sha512-h8Vx6MdxwWI2WM8/zREHMoqdgLNXEL4QX3MWSVMdyNJGvXVOs+6lp+m2hc3FnuMHDc4poxFNI20vCk0OmI4G0Q==",
-			"dev": true,
-			"requires": {
-				"ajv": "^6.12.4",
-				"debug": "^4.3.2",
-				"espree": "^9.0.0",
-				"globals": "^13.9.0",
-				"ignore": "^4.0.6",
-				"import-fresh": "^3.2.1",
-				"js-yaml": "^4.1.0",
-				"minimatch": "^3.0.4",
-				"strip-json-comments": "^3.1.1"
+		"node_modules/@babel/highlight/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
+			"integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
+			"license": "MIT",
 			"dependencies": {
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ignore": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-					"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-					"dev": true
-				},
-				"import-fresh": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-					"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					}
-				},
-				"js-yaml": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-					"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-					"dev": true
-				},
-				"strip-json-comments": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-					"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-					"dev": true
-				}
+				"@babel/types": "^7.25.9"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
 			}
 		},
-		"@floating-ui/core": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
-			"integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+		"node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz",
+			"integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"@floating-ui/dom": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.1.tgz",
-			"integrity": "sha512-wBDiLUKWU8QNPNOTAFHiIAkBv1KlHauG2AhqjSeh2H+wR8PX+AArXfz8NkRexH5PgMJMmSOS70YS89AbWYh5dA==",
-			"requires": {
-				"@floating-ui/core": "^1.0.1"
+		"node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@floating-ui/react-dom": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.0.0.tgz",
-			"integrity": "sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==",
-			"requires": {
-				"@floating-ui/dom": "^1.0.0"
+		"node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@gar/promisify": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
-			"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
-			"dev": true
+		"node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz",
+			"integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"@hapi/hoek": {
-			"version": "9.2.1",
-			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz",
-			"integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw=="
+		"node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz",
+			"integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"@hapi/topo": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
-			"integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
-			"requires": {
-				"@hapi/hoek": "^9.0.0"
+		"node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz",
+			"integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+				"@babel/plugin-transform-optional-chaining": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.13.0"
 			}
 		},
-		"@humanwhocodes/config-array": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.6.0.tgz",
-			"integrity": "sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==",
-			"dev": true,
-			"requires": {
-				"@humanwhocodes/object-schema": "^1.2.0",
-				"debug": "^4.1.1",
-				"minimatch": "^3.0.4"
+		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz",
+			"integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@humanwhocodes/object-schema": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
-			"dev": true
+		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"@hutson/parse-repository-url": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz",
-			"integrity": "sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==",
-			"dev": true
+		"node_modules/@babel/plugin-proposal-async-generator-functions": {
+			"version": "7.20.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+			"integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.",
+			"dependencies": {
+				"@babel/helper-environment-visitor": "^7.18.9",
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/helper-remap-async-to-generator": "^7.18.9",
+				"@babel/plugin-syntax-async-generators": "^7.8.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@isaacs/string-locale-compare": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz",
-			"integrity": "sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==",
-			"dev": true
+		"node_modules/@babel/plugin-proposal-class-properties": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+			"integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@istanbuljs/load-nyc-config": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz",
-			"integrity": "sha512-ZR0rq/f/E4f4XcgnDvtMWXCUJpi8eO0rssVhmztsZqLIEFA9UUP9zmpE0VxlM+kv/E1ul2I876Fwil2ayptDVg==",
-			"dev": true,
-			"requires": {
-				"camelcase": "^5.3.1",
-				"find-up": "^4.1.0",
-				"js-yaml": "^3.13.1",
-				"resolve-from": "^5.0.0"
+		"node_modules/@babel/plugin-proposal-export-default-from": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.23.3.tgz",
+			"integrity": "sha512-Q23MpLZfSGZL1kU7fWqV262q65svLSCIP5kZ/JCW/rKTCm/FrLjpvEd2kfUYMVeHh4QhV/xzyoRAHWrAZJrE3Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-export-default-from": "^7.23.3"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
+			"integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.",
 			"dependencies": {
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.18.6",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@istanbuljs/schema": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
-			"integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
-			"dev": true
+		"node_modules/@babel/plugin-proposal-numeric-separator": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
+			"integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.18.6",
+				"@babel/plugin-syntax-numeric-separator": "^7.10.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@jest/console": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/@jest/console/-/console-27.4.2.tgz",
-			"integrity": "sha512-xknHThRsPB/To1FUbi6pCe43y58qFC03zfb6R7fDb/FfC7k2R3i1l+izRBJf8DI46KhYGRaF14Eo9A3qbBoixg==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"jest-message-util": "^27.4.2",
-				"jest-util": "^27.4.2",
-				"slash": "^3.0.0"
+		"node_modules/@babel/plugin-proposal-object-rest-spread": {
+			"version": "7.20.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+			"integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.",
+			"dependencies": {
+				"@babel/compat-data": "^7.20.5",
+				"@babel/helper-compilation-targets": "^7.20.7",
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-transform-parameters": "^7.20.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-optional-catch-binding": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz",
+			"integrity": "sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.",
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.18.6",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/core": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/@jest/core/-/core-27.4.5.tgz",
-			"integrity": "sha512-3tm/Pevmi8bDsgvo73nX8p/WPng6KWlCyScW10FPEoN1HU4pwI83tJ3TsFvi1FfzsjwUlMNEPowgb/rPau/LTQ==",
-			"dev": true,
-			"requires": {
-				"@jest/console": "^27.4.2",
-				"@jest/reporters": "^27.4.5",
-				"@jest/test-result": "^27.4.2",
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"ansi-escapes": "^4.2.1",
-				"chalk": "^4.0.0",
-				"emittery": "^0.8.1",
-				"exit": "^0.1.2",
-				"graceful-fs": "^4.2.4",
-				"jest-changed-files": "^27.4.2",
-				"jest-config": "^27.4.5",
-				"jest-haste-map": "^27.4.5",
-				"jest-message-util": "^27.4.2",
-				"jest-regex-util": "^27.4.0",
-				"jest-resolve": "^27.4.5",
-				"jest-resolve-dependencies": "^27.4.5",
-				"jest-runner": "^27.4.5",
-				"jest-runtime": "^27.4.5",
-				"jest-snapshot": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"jest-validate": "^27.4.2",
-				"jest-watcher": "^27.4.2",
-				"micromatch": "^4.0.4",
-				"rimraf": "^3.0.0",
-				"slash": "^3.0.0",
-				"strip-ansi": "^6.0.0"
+		"node_modules/@babel/plugin-proposal-optional-chaining": {
+			"version": "7.21.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+			"integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.20.2",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-private-methods": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
+			"integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
+			"deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
+			"dev": true,
 			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-escapes": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-					"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.21.3"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"type-fest": {
-					"version": "0.21.3",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-					"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+				"@babel/helper-create-class-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/create-cache-key-function": {
-			"version": "27.3.1",
-			"resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-27.3.1.tgz",
-			"integrity": "sha512-21lx0HRgkznc5Tc2WGiXVYQQ6Vdfohs6CkLV2FLogLRb52f6v9SiSIjTNflu23lzEmY4EalLgQLxCfhgvREV6w==",
-			"requires": {
-				"@jest/types": "^27.2.5"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				}
+		"node_modules/@babel/plugin-proposal-private-property-in-object": {
+			"version": "7.21.0-placeholder-for-preset-env.2",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+			"integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/environment": {
-			"version": "27.4.4",
-			"resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.4.4.tgz",
-			"integrity": "sha512-q+niMx7cJgt/t/b6dzLOh4W8Ef/8VyKG7hxASK39jakijJzbFBGpptx3RXz13FFV7OishQ9lTbv+dQ5K3EhfDQ==",
-			"dev": true,
-			"requires": {
-				"@jest/fake-timers": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"jest-mock": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				}
+		"node_modules/@babel/plugin-syntax-async-generators": {
+			"version": "7.8.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+			"integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/fake-timers": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.4.2.tgz",
-			"integrity": "sha512-f/Xpzn5YQk5adtqBgvw1V6bF8Nx3hY0OIRRpCvWcfPl0EAjdqWPdhH3t/3XpiWZqtjIEHDyMKP9ajpva1l4Zmg==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"@sinonjs/fake-timers": "^8.0.1",
-				"@types/node": "*",
-				"jest-message-util": "^27.4.2",
-				"jest-mock": "^27.4.2",
-				"jest-util": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-syntax-bigint": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+			"integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/globals": {
-			"version": "27.4.4",
-			"resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.4.4.tgz",
-			"integrity": "sha512-bqpqQhW30BOreXM8bA8t8JbOQzsq/WnPTnBl+It3UxAD9J8yxEAaBEylHx1dtBapAr/UBk8GidXbzmqnee8tYQ==",
-			"dev": true,
-			"requires": {
-				"@jest/environment": "^27.4.4",
-				"@jest/types": "^27.4.2",
-				"expect": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"expect": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/expect/-/expect-27.4.2.tgz",
-					"integrity": "sha512-BjAXIDC6ZOW+WBFNg96J22D27Nq5ohn+oGcuP2rtOtcjuxNoV9McpQ60PcQWhdFOSBIQdR72e+4HdnbZTFSTyg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-styles": "^5.0.0",
-						"jest-get-type": "^27.4.0",
-						"jest-matcher-utils": "^27.4.2",
-						"jest-message-util": "^27.4.2",
-						"jest-regex-util": "^27.4.0"
-					}
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-syntax-class-properties": {
+			"version": "7.12.13",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+			"integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.12.13"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/reporters": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.4.5.tgz",
-			"integrity": "sha512-3orsG4vi8zXuBqEoy2LbnC1kuvkg1KQUgqNxmxpQgIOQEPeV0onvZu+qDQnEoX8qTQErtqn/xzcnbpeTuOLSiA==",
-			"dev": true,
-			"requires": {
-				"@bcoe/v8-coverage": "^0.2.3",
-				"@jest/console": "^27.4.2",
-				"@jest/test-result": "^27.4.2",
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"collect-v8-coverage": "^1.0.0",
-				"exit": "^0.1.2",
-				"glob": "^7.1.2",
-				"graceful-fs": "^4.2.4",
-				"istanbul-lib-coverage": "^3.0.0",
-				"istanbul-lib-instrument": "^4.0.3",
-				"istanbul-lib-report": "^3.0.0",
-				"istanbul-lib-source-maps": "^4.0.0",
-				"istanbul-reports": "^3.0.2",
-				"jest-haste-map": "^27.4.5",
-				"jest-resolve": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"jest-worker": "^27.4.5",
-				"slash": "^3.0.0",
-				"source-map": "^0.6.0",
-				"string-length": "^4.0.1",
-				"terminal-link": "^2.0.0",
-				"v8-to-istanbul": "^8.1.0"
-			},
-			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+		"node_modules/@babel/plugin-syntax-class-static-block": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+			"integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/schemas": {
-			"version": "28.0.2",
-			"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.0.2.tgz",
-			"integrity": "sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==",
-			"dev": true,
-			"requires": {
-				"@sinclair/typebox": "^0.23.3"
+		"node_modules/@babel/plugin-syntax-dynamic-import": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+			"integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/source-map": {
-			"version": "27.4.0",
-			"resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.4.0.tgz",
-			"integrity": "sha512-Ntjx9jzP26Bvhbm93z/AKcPRj/9wrkI88/gK60glXDx1q+IeI0rf7Lw2c89Ch6ofonB0On/iRDreQuQ6te9pgQ==",
-			"dev": true,
-			"requires": {
-				"callsites": "^3.0.0",
-				"graceful-fs": "^4.2.4",
-				"source-map": "^0.6.0"
-			},
+		"node_modules/@babel/plugin-syntax-export-default-from": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.23.3.tgz",
+			"integrity": "sha512-KeENO5ck1IeZ/l2lFZNy+mpobV3D2Zy5C1YFnWm+YuY5mQiAWc4yAp13dqgguwsBsFVLh4LPCEqCa5qW13N+hw==",
 			"dependencies": {
-				"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
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/test-result": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.4.2.tgz",
-			"integrity": "sha512-kr+bCrra9jfTgxHXHa2UwoQjxvQk3Am6QbpAiJ5x/50LW8llOYrxILkqY0lZRW/hu8FXesnudbql263+EW9iNA==",
-			"dev": true,
-			"requires": {
-				"@jest/console": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/istanbul-lib-coverage": "^2.0.0",
-				"collect-v8-coverage": "^1.0.0"
-			},
+		"node_modules/@babel/plugin-syntax-export-namespace-from": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+			"integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.8.3"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/test-sequencer": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.4.5.tgz",
-			"integrity": "sha512-n5woIn/1v+FT+9hniymHPARA9upYUmfi5Pw9ewVwXCDlK4F5/Gkees9v8vdjGdAIJ2MPHLHodiajLpZZanWzEQ==",
-			"dev": true,
-			"requires": {
-				"@jest/test-result": "^27.4.2",
-				"graceful-fs": "^4.2.4",
-				"jest-haste-map": "^27.4.5",
-				"jest-runtime": "^27.4.5"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+		"node_modules/@babel/plugin-syntax-flow": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.23.3.tgz",
+			"integrity": "sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/transform": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
-			"integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.1.0",
-				"@jest/types": "^26.6.2",
-				"babel-plugin-istanbul": "^6.0.0",
-				"chalk": "^4.0.0",
-				"convert-source-map": "^1.4.0",
-				"fast-json-stable-stringify": "^2.0.0",
-				"graceful-fs": "^4.2.4",
-				"jest-haste-map": "^26.6.2",
-				"jest-regex-util": "^26.0.0",
-				"jest-util": "^26.6.2",
-				"micromatch": "^4.0.2",
-				"pirates": "^4.0.1",
-				"slash": "^3.0.0",
-				"source-map": "^0.6.1",
-				"write-file-atomic": "^3.0.0"
+		"node_modules/@babel/plugin-syntax-import-assertions": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.9.tgz",
+			"integrity": "sha512-4GHX5uzr5QMOOuzV0an9MFju4hKlm0OyePl/lHhcsTVae5t/IKVHnb8W67Vr6FuLlk5lPqLB7n7O+K5R46emYg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-attributes": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.9.tgz",
+			"integrity": "sha512-u3EN9ub8LyYvgTnrgp8gboElouayiwPdnM7x5tcnW3iSt09/lQYPwMNK40I9IUxo7QOZhAsPHCmmuO7EPdruqg==",
+			"license": "MIT",
 			"dependencies": {
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jest/types": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-			"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-			"requires": {
-				"@types/istanbul-lib-coverage": "^2.0.0",
-				"@types/istanbul-reports": "^3.0.0",
-				"@types/node": "*",
-				"@types/yargs": "^15.0.0",
-				"chalk": "^4.0.0"
+		"node_modules/@babel/plugin-syntax-import-meta": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+			"integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jridgewell/gen-mapping": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
-			"integrity": "sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==",
-			"dev": true,
-			"requires": {
-				"@jridgewell/set-array": "^1.0.0",
-				"@jridgewell/sourcemap-codec": "^1.4.10",
-				"@jridgewell/trace-mapping": "^0.3.9"
+		"node_modules/@babel/plugin-syntax-json-strings": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+			"integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jridgewell/resolve-uri": {
-			"version": "3.0.7",
-			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz",
-			"integrity": "sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==",
-			"dev": true
+		"node_modules/@babel/plugin-syntax-jsx": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.7.tgz",
+			"integrity": "sha512-ruZOnKO+ajVL/MVx+PwNBPOkrnXTXoWMtte1MBpegfCArhqOe3Bj52avVj1huLLxNKYKXYaSxZ2F+woK1ekXfw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@jridgewell/set-array": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
-			"integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
-			"dev": true
+		"node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+			"integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@jridgewell/source-map": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
-			"integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
-			"dev": true,
-			"requires": {
-				"@jridgewell/gen-mapping": "^0.3.0",
-				"@jridgewell/trace-mapping": "^0.3.9"
+		"node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+			"integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@jridgewell/sourcemap-codec": {
-			"version": "1.4.13",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
-			"integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
-			"dev": true
+		"node_modules/@babel/plugin-syntax-numeric-separator": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+			"integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@jridgewell/trace-mapping": {
-			"version": "0.3.13",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz",
-			"integrity": "sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==",
-			"dev": true,
-			"requires": {
-				"@jridgewell/resolve-uri": "^3.0.3",
-				"@jridgewell/sourcemap-codec": "^1.4.10"
+		"node_modules/@babel/plugin-syntax-object-rest-spread": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+			"integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@kwsites/file-exists": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
-			"integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
-			"dev": true,
-			"requires": {
-				"debug": "^4.1.1"
+		"node_modules/@babel/plugin-syntax-optional-catch-binding": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+			"integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-optional-chaining": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+			"integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@kwsites/promise-deferred": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
-			"integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
-			"dev": true
+		"node_modules/@babel/plugin-syntax-private-property-in-object": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+			"integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@lerna/add": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/add/-/add-5.5.2.tgz",
-			"integrity": "sha512-YCBpwDtNICvjTEG7klXITXFC8pZd8NrmkC8yseaTGm51VPNneZVPJZHWhOlWM4spn50ELVP1p2nnSl6COt50aw==",
-			"dev": true,
-			"requires": {
-				"@lerna/bootstrap": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/npm-conf": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"dedent": "^0.7.0",
-				"npm-package-arg": "8.1.1",
-				"p-map": "^4.0.0",
-				"pacote": "^13.6.1",
-				"semver": "^7.3.4"
-			},
-			"dependencies": {
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-syntax-top-level-await": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+			"integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/bootstrap": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/bootstrap/-/bootstrap-5.5.2.tgz",
-			"integrity": "sha512-oJ9G1MC/TMukJAZAf+bPJ2veAiiUj6/BGe99nagQh7uiXhH1N0uItd/aMC6xBHggu0ZVOQEY7mvL0/z1lGsM4w==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/has-npm-version": "5.5.2",
-				"@lerna/npm-install": "5.5.2",
-				"@lerna/package-graph": "5.5.2",
-				"@lerna/pulse-till-done": "5.5.2",
-				"@lerna/rimraf-dir": "5.5.2",
-				"@lerna/run-lifecycle": "5.5.2",
-				"@lerna/run-topologically": "5.5.2",
-				"@lerna/symlink-binary": "5.5.2",
-				"@lerna/symlink-dependencies": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"@npmcli/arborist": "5.3.0",
-				"dedent": "^0.7.0",
-				"get-port": "^5.1.1",
-				"multimatch": "^5.0.0",
-				"npm-package-arg": "8.1.1",
-				"npmlog": "^6.0.2",
-				"p-map": "^4.0.0",
-				"p-map-series": "^2.1.0",
-				"p-waterfall": "^2.1.1",
-				"semver": "^7.3.4"
-			},
-			"dependencies": {
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-syntax-typescript": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
+			"integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/changed": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/changed/-/changed-5.5.2.tgz",
-			"integrity": "sha512-/kF5TKkiXb0921aorZAMsNFAtcaVcDAvO7GndvcZZiDssc4K7weXhR+wsHi9e4dCJ2nVakhVJw0PqRNknd7x/A==",
-			"dev": true,
-			"requires": {
-				"@lerna/collect-updates": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/listable": "5.5.2",
-				"@lerna/output": "5.5.2"
+		"node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+			"integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@lerna/check-working-tree": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/check-working-tree/-/check-working-tree-5.5.2.tgz",
-			"integrity": "sha512-FRkEe9Wcr8Lw3dR0AIOrWfODfEAcDKBF5Ol7bIA5wkPLMJbuPBgx4T1rABdRp94SVOnqkRwT9rrsFOESLcQJzQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/collect-uncommitted": "5.5.2",
-				"@lerna/describe-ref": "5.5.2",
-				"@lerna/validation-error": "5.5.2"
+		"node_modules/@babel/plugin-transform-arrow-functions": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz",
+			"integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/child-process": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-5.5.2.tgz",
-			"integrity": "sha512-JvTrIEDwq7bd0Nw/4TGAFa4miP8UKARfxhYwHkqX5vM+slNx3BiImkyDhG46C3zR2k/OrOK02CYbBUi6eI2OAw==",
-			"dev": true,
-			"requires": {
-				"chalk": "^4.1.0",
-				"execa": "^5.0.0",
-				"strong-log-transformer": "^2.1.0"
+		"node_modules/@babel/plugin-transform-async-generator-functions": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
+			"integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-remap-async-to-generator": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-async-generator-functions/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@lerna/clean": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/clean/-/clean-5.5.2.tgz",
-			"integrity": "sha512-C38x2B+yTg2zFWSV6/K6grX+7Dzgyw7YpRfhFr1Mat77mhku60lE3mqwU2qCLHlmKBmHV2rB85gYI8yysJ2rIg==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/prompt": "5.5.2",
-				"@lerna/pulse-till-done": "5.5.2",
-				"@lerna/rimraf-dir": "5.5.2",
-				"p-map": "^4.0.0",
-				"p-map-series": "^2.1.0",
-				"p-waterfall": "^2.1.1"
+		"node_modules/@babel/plugin-transform-async-generator-functions/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@lerna/cli": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/cli/-/cli-5.5.2.tgz",
-			"integrity": "sha512-u32ulEL5CBNYZOTG5dRrVJUT8DovDzjrLj/y/MKXpuD127PwWDe0TE//1NP8qagTLBtn5EiKqiuZlosAYTpiBA==",
-			"dev": true,
-			"requires": {
-				"@lerna/global-options": "5.5.2",
-				"dedent": "^0.7.0",
-				"npmlog": "^6.0.2",
-				"yargs": "^16.2.0"
+		"node_modules/@babel/plugin-transform-async-to-generator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
+			"integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-remap-async-to-generator": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/collect-uncommitted": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/collect-uncommitted/-/collect-uncommitted-5.5.2.tgz",
-			"integrity": "sha512-2SzH21lDz016Dhu3MjmID9iCMTHYiZ/iu0UKT4I6glmDa44kre18Bp8ihyNzBXNWryj6KjB/0wxgb6dOtccw9A==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"chalk": "^4.1.0",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-block-scoped-functions": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz",
+			"integrity": "sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/collect-updates": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/collect-updates/-/collect-updates-5.5.2.tgz",
-			"integrity": "sha512-EeAazUjRenojQujM8W2zAxbw8/qEf5qd0pQYFKLCKkT8f332hoYzH8aJqnpAVY5vjFxxxxpjFjExfvMKqkwWVQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/describe-ref": "5.5.2",
-				"minimatch": "^3.0.4",
-				"npmlog": "^6.0.2",
-				"slash": "^3.0.0"
+		"node_modules/@babel/plugin-transform-block-scoping": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz",
+			"integrity": "sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/command": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/command/-/command-5.5.2.tgz",
-			"integrity": "sha512-hcqKcngUCX6p9i2ipyzFVnTDZILAoxS0xn5YtLXLU2F16o/RIeEuhBrWeExhRXGBo1Rt3goxyq6/bKKaPU5i2Q==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/package-graph": "5.5.2",
-				"@lerna/project": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"@lerna/write-log-file": "5.5.2",
-				"clone-deep": "^4.0.1",
-				"dedent": "^0.7.0",
-				"execa": "^5.0.0",
-				"is-ci": "^2.0.0",
-				"npmlog": "^6.0.2"
-			},
-			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+		"node_modules/@babel/plugin-transform-class-properties": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz",
+			"integrity": "sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/conventional-commits": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/conventional-commits/-/conventional-commits-5.5.2.tgz",
-			"integrity": "sha512-lFq1RTx41QEPU7N1yyqQRhVH1zPpRqWbdSpepBnSgeUKw/aE0pbkgNi+C6BKuSB/9OzY78j1OPbZSYrk4OWEBQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/validation-error": "5.5.2",
-				"conventional-changelog-angular": "^5.0.12",
-				"conventional-changelog-core": "^4.2.4",
-				"conventional-recommended-bump": "^6.1.0",
-				"fs-extra": "^9.1.0",
-				"get-stream": "^6.0.0",
-				"npm-package-arg": "8.1.1",
-				"npmlog": "^6.0.2",
-				"pify": "^5.0.0",
-				"semver": "^7.3.4"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"pify": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
-					"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-class-static-block": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.25.9.tgz",
+			"integrity": "sha512-UIf+72C7YJ+PJ685/PpATbCz00XqiFEzHX5iysRwfvNT0Ko+FaXSvRgLytFSp8xUItrG9pFM/KoBBZDrY/cYyg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0"
 			}
 		},
-		"@lerna/create": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/create/-/create-5.5.2.tgz",
-			"integrity": "sha512-NawigXIAwPJjwDKTKo4aqmos8GIAYK8AQumwy027X418GzXf504L1acRm3c+3LmL1IrZTStWkqSNs56GrKRY9A==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/npm-conf": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"dedent": "^0.7.0",
-				"fs-extra": "^9.1.0",
-				"globby": "^11.0.2",
-				"init-package-json": "^3.0.2",
-				"npm-package-arg": "8.1.1",
-				"p-reduce": "^2.1.0",
-				"pacote": "^13.6.1",
-				"pify": "^5.0.0",
-				"semver": "^7.3.4",
-				"slash": "^3.0.0",
-				"validate-npm-package-license": "^3.0.4",
-				"validate-npm-package-name": "^4.0.0",
-				"yargs-parser": "20.2.4"
-			},
+		"node_modules/@babel/plugin-transform-classes": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz",
+			"integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==",
+			"license": "MIT",
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fast-glob": {
-					"version": "3.2.12",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-					"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-					"dev": true,
-					"requires": {
-						"@nodelib/fs.stat": "^2.0.2",
-						"@nodelib/fs.walk": "^1.2.3",
-						"glob-parent": "^5.1.2",
-						"merge2": "^1.3.0",
-						"micromatch": "^4.0.4"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"globby": {
-					"version": "11.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.9",
-						"ignore": "^5.2.0",
-						"merge2": "^1.4.1",
-						"slash": "^3.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					},
-					"dependencies": {
-						"validate-npm-package-name": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
-							"integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==",
-							"dev": true,
-							"requires": {
-								"builtins": "^1.0.3"
-							}
-						}
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pify": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
-					"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"validate-npm-package-license": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-					"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-					"dev": true,
-					"requires": {
-						"spdx-correct": "^3.0.0",
-						"spdx-expression-parse": "^3.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					},
-					"dependencies": {
-						"builtins": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-							"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-							"dev": true,
-							"requires": {
-								"semver": "^7.0.0"
-							}
-						}
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				},
-				"yargs-parser": {
-					"version": "20.2.4",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
-					"integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
-					"dev": true
-				}
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-compilation-targets": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-replace-supers": "^7.25.9",
+				"@babel/traverse": "^7.25.9",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/create-symlink": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/create-symlink/-/create-symlink-5.5.2.tgz",
-			"integrity": "sha512-/C0SP2C5+Lvol4Uul0/p0YJML/AOv1dO4y3NrRpYGnN750AuQMuhJQsBcHip80sFStKnNaUxXQb82itkL/mduw==",
-			"dev": true,
-			"requires": {
-				"cmd-shim": "^5.0.0",
-				"fs-extra": "^9.1.0",
-				"npmlog": "^6.0.2"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-classes/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@lerna/describe-ref": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/describe-ref/-/describe-ref-5.5.2.tgz",
-			"integrity": "sha512-JY1Lk8sHX4mBk83t1wW8ak+QWzlExZluOMUixIWLhzHlOzRXnx/WJnvW3E2UgN/RFOBHsI8XA6RmzV/xd/D44Q==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-classes/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@lerna/diff": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/diff/-/diff-5.5.2.tgz",
-			"integrity": "sha512-cBXCF/WXh59j6ydTObUB5vhij1cO1kmEVaW4su8rMqLy0eyAmYAckwnL4WIu3NUDlIm7ykaDp+itdAXPeUdDmw==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-computed-properties": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
+			"integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/template": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/exec": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/exec/-/exec-5.5.2.tgz",
-			"integrity": "sha512-hwEIxSp3Gor5pMZp7jMrQ7qcfzyJOI5Zegj9K72M5KKRYSXI1uFxexZzN2ZJCso/rHg9H4TCa9P2wjmoo8KPag==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/profiler": "5.5.2",
-				"@lerna/run-topologically": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"p-map": "^4.0.0"
+		"node_modules/@babel/plugin-transform-destructuring": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
+			"integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/filter-options": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/filter-options/-/filter-options-5.5.2.tgz",
-			"integrity": "sha512-h9KrfntDjR1PTC0Xeu07dYytSdZ4jcKz/ykaqhELgXVDbzOUY9RnQd32e4XJ8KRSERMe4VS7DxOnxV4LNI0xqA==",
-			"dev": true,
-			"requires": {
-				"@lerna/collect-updates": "5.5.2",
-				"@lerna/filter-packages": "5.5.2",
-				"dedent": "^0.7.0",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-dotall-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz",
+			"integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/filter-packages": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/filter-packages/-/filter-packages-5.5.2.tgz",
-			"integrity": "sha512-EaZA0ibWKnpBePFt5gVbiTYgXwOs01naVPcPnBQt5EhHVN878rUoNXNnhT/X/KXFiiy6v3CW53sczlqTNoFuSg==",
-			"dev": true,
-			"requires": {
-				"@lerna/validation-error": "5.5.2",
-				"multimatch": "^5.0.0",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-duplicate-keys": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz",
+			"integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/get-npm-exec-opts": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/get-npm-exec-opts/-/get-npm-exec-opts-5.5.2.tgz",
-			"integrity": "sha512-CSwUpQrEYe20KEJnpdLxeLdYMaIElTQM9SiiFKUwnm/825TObkdDQ/fAG9Vk3fkHljPcu7SiV1A/g2XkbmpJUA==",
-			"dev": true,
-			"requires": {
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz",
+			"integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@lerna/get-packed": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/get-packed/-/get-packed-5.5.2.tgz",
-			"integrity": "sha512-C+2/oKqTdgskuK3SpoxzxJSffwQGRU/W8BA5rC/HmRN2xom8xlgZjP0Pcsv7ucW1BjE367hh+4E/BRZXPxuvVQ==",
-			"dev": true,
-			"requires": {
-				"fs-extra": "^9.1.0",
-				"ssri": "^9.0.1",
-				"tar": "^6.1.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-dynamic-import": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz",
+			"integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/github-client": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/github-client/-/github-client-5.5.2.tgz",
-			"integrity": "sha512-aIed5+l+QoiQmlCvcRoGgJ9z0Wo/7BZU0cbcds7OyhB6e723xtBTk3nXOASFI9TdcRcrnVpOFOISUKU+48d7Ig==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@octokit/plugin-enterprise-rest": "^6.0.1",
-				"@octokit/rest": "^19.0.3",
-				"git-url-parse": "^13.1.0",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-exponentiation-operator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.9.tgz",
+			"integrity": "sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-export-namespace-from": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz",
+			"integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==",
+			"license": "MIT",
 			"dependencies": {
-				"@octokit/auth-token": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.1.tgz",
-					"integrity": "sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^7.0.0"
-					}
-				},
-				"@octokit/core": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.0.5.tgz",
-					"integrity": "sha512-4R3HeHTYVHCfzSAi0C6pbGXV8UDI5Rk+k3G7kLVNckswN9mvpOzW9oENfjfH3nEmzg8y3AmKmzs8Sg6pLCeOCA==",
-					"dev": true,
-					"requires": {
-						"@octokit/auth-token": "^3.0.0",
-						"@octokit/graphql": "^5.0.0",
-						"@octokit/request": "^6.0.0",
-						"@octokit/request-error": "^3.0.0",
-						"@octokit/types": "^7.0.0",
-						"before-after-hook": "^2.2.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/endpoint": {
-					"version": "7.0.2",
-					"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.2.tgz",
-					"integrity": "sha512-8/AUACfE9vpRpehE6ZLfEtzkibe5nfsSwFZVMsG8qabqRt1M81qZYUFRZa1B8w8lP6cdfDJfRq9HWS+MbmR7tw==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^7.0.0",
-						"is-plain-object": "^5.0.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/graphql": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.1.tgz",
-					"integrity": "sha512-sxmnewSwAixkP1TrLdE6yRG53eEhHhDTYUykUwdV9x8f91WcbhunIHk9x1PZLALdBZKRPUO2HRcm4kezZ79HoA==",
-					"dev": true,
-					"requires": {
-						"@octokit/request": "^6.0.0",
-						"@octokit/types": "^7.0.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/openapi-types": {
-					"version": "13.12.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.12.0.tgz",
-					"integrity": "sha512-1QYzZrwnn3rTQE7ZoSxXrO8lhu0aIbac1c+qIPOPEaVXBWSaUyLV1x9yt4uDQOwmu6u5ywVS8OJgs+ErDLf6vQ==",
-					"dev": true
-				},
-				"@octokit/request": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.1.tgz",
-					"integrity": "sha512-gYKRCia3cpajRzDSU+3pt1q2OcuC6PK8PmFIyxZDWCzRXRSIBH8jXjFJ8ZceoygBIm0KsEUg4x1+XcYBz7dHPQ==",
-					"dev": true,
-					"requires": {
-						"@octokit/endpoint": "^7.0.0",
-						"@octokit/request-error": "^3.0.0",
-						"@octokit/types": "^7.0.0",
-						"is-plain-object": "^5.0.0",
-						"node-fetch": "^2.6.7",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/request-error": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.1.tgz",
-					"integrity": "sha512-ym4Bp0HTP7F3VFssV88WD1ZyCIRoE8H35pXSKwLeMizcdZAYc/t6N9X9Yr9n6t3aG9IH75XDnZ6UeZph0vHMWQ==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^7.0.0",
-						"deprecation": "^2.0.0",
-						"once": "^1.4.0"
-					}
-				},
-				"@octokit/rest": {
-					"version": "19.0.4",
-					"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.4.tgz",
-					"integrity": "sha512-LwG668+6lE8zlSYOfwPj4FxWdv/qFXYBpv79TWIQEpBLKA9D/IMcWsF/U9RGpA3YqMVDiTxpgVpEW3zTFfPFTA==",
-					"dev": true,
-					"requires": {
-						"@octokit/core": "^4.0.0",
-						"@octokit/plugin-paginate-rest": "^4.0.0",
-						"@octokit/plugin-request-log": "^1.0.4",
-						"@octokit/plugin-rest-endpoint-methods": "^6.0.0"
-					}
-				},
-				"@octokit/types": {
-					"version": "7.5.0",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.5.0.tgz",
-					"integrity": "sha512-aHm+olfIZjQpzoODpl+RCZzchKOrdSLJs+yfI7pMMcmB19Li6vidgx0DwUDO/Ic4Q3fq/lOjJORVCcLZefcrJw==",
-					"dev": true,
-					"requires": {
-						"@octokit/openapi-types": "^13.11.0"
-					}
-				},
-				"before-after-hook": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-					"integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
-					"dev": true
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"universal-user-agent": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
-					"integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/gitlab-client": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/gitlab-client/-/gitlab-client-5.5.2.tgz",
-			"integrity": "sha512-iSNk8ktwRXL5JgTYvKdEQASHLgo8Vq4RLX1hOFhOMszxKeT2kjCXLqefto3TlJ5xOGQb/kaGBm++jp+uZxhdog==",
-			"dev": true,
-			"requires": {
-				"node-fetch": "^2.6.1",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-flow-strip-types": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.23.3.tgz",
+			"integrity": "sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-flow": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/global-options": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/global-options/-/global-options-5.5.2.tgz",
-			"integrity": "sha512-YaFCLMm7oThPpmRvrDX/VuoihrWCqBVm3zG+c8OM7sjs1MXDKycbdhtjzIwysWocEpf0NjUtdQS7v6gUhfNiFQ==",
-			"dev": true
+		"node_modules/@babel/plugin-transform-for-of": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
+			"integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@lerna/has-npm-version": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/has-npm-version/-/has-npm-version-5.5.2.tgz",
-			"integrity": "sha512-8BHJCVPy5o0vERm0jjcwYSCNOK+EclbufR05kqorsYzCu0xWPOc3SDlo5mXuWsG61SlT3RdV9SJ3Rab15fOLAg==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"semver": "^7.3.4"
+		"node_modules/@babel/plugin-transform-function-name": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
+			"integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/import": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/import/-/import-5.5.2.tgz",
-			"integrity": "sha512-QtHJEo/9RRO9oILzSK45k5apsAyUEgwpGj4Ys3gZ7rFuXQ4+xHi9R6YC0IjwyiSfoN/i3Qbsku+PByxhhzkxHQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/prompt": "5.5.2",
-				"@lerna/pulse-till-done": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"dedent": "^0.7.0",
-				"fs-extra": "^9.1.0",
-				"p-map-series": "^2.1.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-function-name/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@lerna/info": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/info/-/info-5.5.2.tgz",
-			"integrity": "sha512-Ek+bCooAfng+K4Fgy9i6jKBMpZZQ3lQpv6SWg8TbrwGR/el8FYBJod3+I5khJ2RJqHAmjLBz6wiSyVPMjwvptw==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/output": "5.5.2",
-				"envinfo": "^7.7.4"
+		"node_modules/@babel/plugin-transform-function-name/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@lerna/init": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/init/-/init-5.5.2.tgz",
-			"integrity": "sha512-CKHrcOlm2XXXF384FeCKK+CjKBW22HkJ5CcLlU1gnTFD2QarrBwTOGjpRaREXP8T/k3q7h0W0FK8B77opqLwDg==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/project": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"p-map": "^4.0.0",
-				"write-json-file": "^4.3.0"
+		"node_modules/@babel/plugin-transform-json-strings": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz",
+			"integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-literals": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
+			"integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
+			"license": "MIT",
 			"dependencies": {
-				"detect-indent": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-					"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-					"dev": true
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"sort-keys": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-4.2.0.tgz",
-					"integrity": "sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==",
-					"dev": true,
-					"requires": {
-						"is-plain-obj": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				},
-				"write-json-file": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-4.3.0.tgz",
-					"integrity": "sha512-PxiShnxf0IlnQuMYOPPhPkhExoCQuTUNPOa/2JWCYTmBquU9njyyDuwRKN26IZBlp4yn1nt+Agh2HOOBl+55HQ==",
-					"dev": true,
-					"requires": {
-						"detect-indent": "^6.0.0",
-						"graceful-fs": "^4.1.15",
-						"is-plain-obj": "^2.0.0",
-						"make-dir": "^3.0.0",
-						"sort-keys": "^4.0.0",
-						"write-file-atomic": "^3.0.0"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/link": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/link/-/link-5.5.2.tgz",
-			"integrity": "sha512-B/0a+biXO2uMSbNw1Vv9YMrfse0i8HU9mrrWQbXIHws3j0i5Wxuxvd7B/r0xzYN5LF5AFDxrPjPNTgC49U/58Q==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/package-graph": "5.5.2",
-				"@lerna/symlink-dependencies": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"p-map": "^4.0.0",
-				"slash": "^3.0.0"
+		"node_modules/@babel/plugin-transform-logical-assignment-operators": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
+			"integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/list": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/list/-/list-5.5.2.tgz",
-			"integrity": "sha512-uC/LRq9zcOM33vV6l4Nmx18vXNNIcaxFHVCBOC3IxZJb0MTPzKFqlu/YIVQaJMWeHpiIo6OfbK4mbH1h8yXmHw==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/listable": "5.5.2",
-				"@lerna/output": "5.5.2"
+		"node_modules/@babel/plugin-transform-member-expression-literals": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz",
+			"integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/listable": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/listable/-/listable-5.5.2.tgz",
-			"integrity": "sha512-CEDTaLB8V7faSSTgB1II1USpda5PQWUkfsvDJekJ4yZ4dql3XnzqdVZ48zLqPArl/30e0g1gWGOBkdKqswY+Yg==",
-			"dev": true,
-			"requires": {
-				"@lerna/query-graph": "5.5.2",
-				"chalk": "^4.1.0",
-				"columnify": "^1.6.0"
+		"node_modules/@babel/plugin-transform-modules-amd": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz",
+			"integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/log-packed": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/log-packed/-/log-packed-5.5.2.tgz",
-			"integrity": "sha512-k1tKZdNuAIj9t7ZJBSzua5zEnPoweKLpuXYzuiBE8CALBfl2Zf9szsbDQDsERDOxQ365+FEgK+GfkmvxtYx4tw==",
-			"dev": true,
-			"requires": {
-				"byte-size": "^7.0.0",
-				"columnify": "^1.6.0",
-				"has-unicode": "^2.0.1",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-modules-commonjs": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.9.tgz",
+			"integrity": "sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-simple-access": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/npm-conf": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/npm-conf/-/npm-conf-5.5.2.tgz",
-			"integrity": "sha512-X2EE1TCSfsYy2XTUUN0+QXXEPvecuGk3mpTXR5KP+ScAs0WmTisRLyJ9lofh/9e0SIIGdVYmh2PykhgduyOKsg==",
-			"dev": true,
-			"requires": {
-				"config-chain": "^1.1.12",
-				"pify": "^5.0.0"
+		"node_modules/@babel/plugin-transform-modules-systemjs": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz",
+			"integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-validator-identifier": "^7.25.9",
+				"@babel/traverse": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/traverse": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+			"integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+			"license": "MIT",
 			"dependencies": {
-				"pify": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
-					"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
-					"dev": true
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/generator": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/template": "^7.25.9",
+				"@babel/types": "^7.25.9",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@lerna/npm-dist-tag": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/npm-dist-tag/-/npm-dist-tag-5.5.2.tgz",
-			"integrity": "sha512-Od4liA0ISunwatHxArHdaxFc/m9dXMI0fAFqbScgeqVkY8OeoHEY/AlINjglYChtGcbKdHm1ml8qvlK9Tr2EXg==",
-			"dev": true,
-			"requires": {
-				"@lerna/otplease": "5.5.2",
-				"npm-package-arg": "8.1.1",
-				"npm-registry-fetch": "^13.3.0",
-				"npmlog": "^6.0.2"
-			},
-			"dependencies": {
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-modules-systemjs/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"@lerna/npm-install": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/npm-install/-/npm-install-5.5.2.tgz",
-			"integrity": "sha512-aDIDRS9C9uWheuc6JEntNqTcaTcSFyTx4FgUw5FDHrwsTZ9TiEAB9O+XyDKIlcGHlNviuQt270boUHjsvOoMcg==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/get-npm-exec-opts": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"npm-package-arg": "8.1.1",
-				"npmlog": "^6.0.2",
-				"signal-exit": "^3.0.3",
-				"write-pkg": "^4.0.0"
+		"node_modules/@babel/plugin-transform-modules-umd": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz",
+			"integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
+			"integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
+			"license": "MIT",
 			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"@lerna/npm-publish": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/npm-publish/-/npm-publish-5.5.2.tgz",
-			"integrity": "sha512-TRYkkocg/VFy9MwWtfIa2gNXFkMwkDfaS1exgJK4DKbjH3hiBo/cDG3Zx/jMBGvetv4CLsC2n+phRhozgCezTA==",
-			"dev": true,
-			"requires": {
-				"@lerna/otplease": "5.5.2",
-				"@lerna/run-lifecycle": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"libnpmpublish": "^6.0.4",
-				"npm-package-arg": "8.1.1",
-				"npmlog": "^6.0.2",
-				"pify": "^5.0.0",
-				"read-package-json": "^5.0.1"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"pify": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
-					"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-new-target": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz",
+			"integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/npm-run-script": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/npm-run-script/-/npm-run-script-5.5.2.tgz",
-			"integrity": "sha512-lKn4ybw/97SMR/0j5UcJraL+gpfXv2HWKmlrG47JuAMJaEFkQQyCh4EdP3cGPCnSzrI5zXsil8SS/JelkhQpkg==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"@lerna/get-npm-exec-opts": "5.5.2",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz",
+			"integrity": "sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/otplease": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/otplease/-/otplease-5.5.2.tgz",
-			"integrity": "sha512-kZwSWTLGFWLoFX0p6RJ8AARIo6P/wkIcUyAFrVU3YTesN7KqbujpzaVTf5bAWsDdeiRWizCGM1TVw2IDUtStQg==",
-			"dev": true,
-			"requires": {
-				"@lerna/prompt": "5.5.2"
+		"node_modules/@babel/plugin-transform-numeric-separator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
+			"integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/output": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/output/-/output-5.5.2.tgz",
-			"integrity": "sha512-Sv5qMvwnY7RGUw3JHyNUHNlQ4f/167kK1tczCaHUXa1SmOq5adMBbiMNApa2y5s8B+v9OahkU2nnOOaIuVy0HQ==",
-			"dev": true,
-			"requires": {
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-object-assign": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz",
+			"integrity": "sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/pack-directory": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/pack-directory/-/pack-directory-5.5.2.tgz",
-			"integrity": "sha512-LvBbOeSwbpHPL7w9cI0Jtpa6r61N3KboD4nutNlWaT9LRv0dLlex2k10Pfc8u15agQ62leLhHa6UmjFt16msEA==",
-			"dev": true,
-			"requires": {
-				"@lerna/get-packed": "5.5.2",
-				"@lerna/package": "5.5.2",
-				"@lerna/run-lifecycle": "5.5.2",
-				"@lerna/temp-write": "5.5.2",
-				"npm-packlist": "^5.1.1",
-				"npmlog": "^6.0.2",
-				"tar": "^6.1.0"
-			},
+		"node_modules/@babel/plugin-transform-object-rest-spread": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
+			"integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
+			"license": "MIT",
 			"dependencies": {
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"ignore-walk": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
-					"integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
-					"dev": true,
-					"requires": {
-						"minimatch": "^5.0.1"
-					}
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"npm-bundled": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-2.0.1.tgz",
-					"integrity": "sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==",
-					"dev": true,
-					"requires": {
-						"npm-normalize-package-bin": "^2.0.0"
-					}
-				},
-				"npm-normalize-package-bin": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-					"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-					"dev": true
-				},
-				"npm-packlist": {
-					"version": "5.1.3",
-					"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-5.1.3.tgz",
-					"integrity": "sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==",
-					"dev": true,
-					"requires": {
-						"glob": "^8.0.1",
-						"ignore-walk": "^5.0.1",
-						"npm-bundled": "^2.0.0",
-						"npm-normalize-package-bin": "^2.0.0"
-					}
-				}
+				"@babel/helper-compilation-targets": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/plugin-transform-parameters": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/package": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/package/-/package-5.5.2.tgz",
-			"integrity": "sha512-/36+oq5Q63EYSyjW5mHPR3aMrXDo6Wn8zKcl9Dfd4bn+w0AfK/EbId7iB/TrFaNdGtw8CrhK+e5CmgiMBeXMPw==",
-			"dev": true,
-			"requires": {
-				"load-json-file": "^6.2.0",
-				"npm-package-arg": "8.1.1",
-				"write-pkg": "^4.0.0"
+		"node_modules/@babel/plugin-transform-object-super": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz",
+			"integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-replace-supers": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-optional-catch-binding": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
+			"integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
+			"license": "MIT",
 			"dependencies": {
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"load-json-file": {
-					"version": "6.2.0",
-					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
-					"integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.15",
-						"parse-json": "^5.0.0",
-						"strip-bom": "^4.0.0",
-						"type-fest": "^0.6.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"strip-bom": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-					"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/package-graph": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/package-graph/-/package-graph-5.5.2.tgz",
-			"integrity": "sha512-tyMokkrktvohhU3PE3nZLdjrmozcrV8ql37u0l/axHXrfNiV3RDn9ENVvYXnLnP2BCHV572RRpbI5kYto4wtRg==",
-			"dev": true,
-			"requires": {
-				"@lerna/prerelease-id-from-version": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"npm-package-arg": "8.1.1",
-				"npmlog": "^6.0.2",
-				"semver": "^7.3.4"
+		"node_modules/@babel/plugin-transform-optional-chaining": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz",
+			"integrity": "sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-parameters": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
+			"integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
+			"license": "MIT",
 			"dependencies": {
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/prerelease-id-from-version": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/prerelease-id-from-version/-/prerelease-id-from-version-5.5.2.tgz",
-			"integrity": "sha512-FokuA8PFH+YMlbVvPsrTWgfZzaeXDmSmXGKzF8yEM7008UOFx9a3ivDzPnRK7IDaO9nUmt++Snb3QLey1ldYlQ==",
-			"dev": true,
-			"requires": {
-				"semver": "^7.3.4"
+		"node_modules/@babel/plugin-transform-private-methods": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz",
+			"integrity": "sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/profiler": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/profiler/-/profiler-5.5.2.tgz",
-			"integrity": "sha512-030TM1sG0h/vSJ+49e8K1HtVIt94i6lOIRILTF4zkx+O00Fcg91wBtdIduKhZZt1ziWRi1v2soijKR26IDC+Tg==",
-			"dev": true,
-			"requires": {
-				"fs-extra": "^9.1.0",
-				"npmlog": "^6.0.2",
-				"upath": "^2.0.1"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"upath": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-					"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-private-property-in-object": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
+			"integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-create-class-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/project": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/project/-/project-5.5.2.tgz",
-			"integrity": "sha512-NtHov7CCM3DHbj6xaD9lTErOnEmz0s+piJP/nVw6aIvfkhvUl1fB6SnttM+0GHZrT6WSIXFWsb0pkRMTBn55Bw==",
-			"dev": true,
-			"requires": {
-				"@lerna/package": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"cosmiconfig": "^7.0.0",
-				"dedent": "^0.7.0",
-				"dot-prop": "^6.0.1",
-				"glob-parent": "^5.1.1",
-				"globby": "^11.0.2",
-				"js-yaml": "^4.1.0",
-				"load-json-file": "^6.2.0",
-				"npmlog": "^6.0.2",
-				"p-map": "^4.0.0",
-				"resolve-from": "^5.0.0",
-				"write-json-file": "^4.3.0"
+		"node_modules/@babel/plugin-transform-property-literals": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz",
+			"integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-constant-elements": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.22.5.tgz",
+			"integrity": "sha512-BF5SXoO+nX3h5OhlN78XbbDrBOffv+AxPP2ENaJOVqjWCgBDeOY3WcaUcddutGSfoap+5NEQ/q/4I3WZIvgkXA==",
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"detect-indent": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-					"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-					"dev": true
-				},
-				"fast-glob": {
-					"version": "3.2.12",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-					"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-					"dev": true,
-					"requires": {
-						"@nodelib/fs.stat": "^2.0.2",
-						"@nodelib/fs.walk": "^1.2.3",
-						"glob-parent": "^5.1.2",
-						"merge2": "^1.3.0",
-						"micromatch": "^4.0.4"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"globby": {
-					"version": "11.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.9",
-						"ignore": "^5.2.0",
-						"merge2": "^1.4.1",
-						"slash": "^3.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"js-yaml": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-					"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"load-json-file": {
-					"version": "6.2.0",
-					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
-					"integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.15",
-						"parse-json": "^5.0.0",
-						"strip-bom": "^4.0.0",
-						"type-fest": "^0.6.0"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"sort-keys": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-4.2.0.tgz",
-					"integrity": "sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==",
-					"dev": true,
-					"requires": {
-						"is-plain-obj": "^2.0.0"
-					}
-				},
-				"strip-bom": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-					"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				},
-				"write-json-file": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-4.3.0.tgz",
-					"integrity": "sha512-PxiShnxf0IlnQuMYOPPhPkhExoCQuTUNPOa/2JWCYTmBquU9njyyDuwRKN26IZBlp4yn1nt+Agh2HOOBl+55HQ==",
-					"dev": true,
-					"requires": {
-						"detect-indent": "^6.0.0",
-						"graceful-fs": "^4.1.15",
-						"is-plain-obj": "^2.0.0",
-						"make-dir": "^3.0.0",
-						"sort-keys": "^4.0.0",
-						"write-file-atomic": "^3.0.0"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/prompt": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/prompt/-/prompt-5.5.2.tgz",
-			"integrity": "sha512-flV5SOu9CZrTf2YxGgMPwiAsv2jkUzyIs3cTTdFhFtKoZV7YPVZkGyMhqhEMIuUCOeITFY+emar9iPS6d7U4Jg==",
-			"dev": true,
-			"requires": {
-				"inquirer": "^8.2.4",
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-react-display-name": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz",
+			"integrity": "sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-jsx": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
+			"integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
+			"license": "MIT",
 			"dependencies": {
-				"ansi-escapes": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-					"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.21.3"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"cli-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-					"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-					"dev": true,
-					"requires": {
-						"restore-cursor": "^3.1.0"
-					}
-				},
-				"cli-spinners": {
-					"version": "2.7.0",
-					"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
-					"integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
-					"dev": true
-				},
-				"cli-width": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
-					"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
-					"dev": true
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"figures": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-					"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-					"dev": true,
-					"requires": {
-						"escape-string-regexp": "^1.0.5"
-					}
-				},
-				"inquirer": {
-					"version": "8.2.4",
-					"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.4.tgz",
-					"integrity": "sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==",
-					"dev": true,
-					"requires": {
-						"ansi-escapes": "^4.2.1",
-						"chalk": "^4.1.1",
-						"cli-cursor": "^3.1.0",
-						"cli-width": "^3.0.0",
-						"external-editor": "^3.0.3",
-						"figures": "^3.0.0",
-						"lodash": "^4.17.21",
-						"mute-stream": "0.0.8",
-						"ora": "^5.4.1",
-						"run-async": "^2.4.0",
-						"rxjs": "^7.5.5",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0",
-						"through": "^2.3.6",
-						"wrap-ansi": "^7.0.0"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"log-symbols": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
-					"integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.1.0",
-						"is-unicode-supported": "^0.1.0"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"ora": {
-					"version": "5.4.1",
-					"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
-					"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-					"dev": true,
-					"requires": {
-						"bl": "^4.1.0",
-						"chalk": "^4.1.0",
-						"cli-cursor": "^3.1.0",
-						"cli-spinners": "^2.5.0",
-						"is-interactive": "^1.0.0",
-						"is-unicode-supported": "^0.1.0",
-						"log-symbols": "^4.1.0",
-						"strip-ansi": "^6.0.0",
-						"wcwidth": "^1.0.1"
-					}
-				},
-				"restore-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-					"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-					"dev": true,
-					"requires": {
-						"onetime": "^5.1.0",
-						"signal-exit": "^3.0.2"
-					}
-				},
-				"rxjs": {
-					"version": "7.5.7",
-					"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz",
-					"integrity": "sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==",
-					"dev": true,
-					"requires": {
-						"tslib": "^2.1.0"
-					}
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"type-fest": {
-					"version": "0.21.3",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-					"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-					"dev": true
-				},
-				"wrap-ansi": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				}
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-module-imports": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/plugin-syntax-jsx": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/publish": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/publish/-/publish-5.5.2.tgz",
-			"integrity": "sha512-ZC8LP4I3nLcVIcyqiRAVvGRaCkHHBdYVcqtF7S9KA8w2VvuAeqHRFUTIhKBziVbYnwI2uzJXGIRWP50U+p/wAA==",
-			"dev": true,
-			"requires": {
-				"@lerna/check-working-tree": "5.5.2",
-				"@lerna/child-process": "5.5.2",
-				"@lerna/collect-updates": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/describe-ref": "5.5.2",
-				"@lerna/log-packed": "5.5.2",
-				"@lerna/npm-conf": "5.5.2",
-				"@lerna/npm-dist-tag": "5.5.2",
-				"@lerna/npm-publish": "5.5.2",
-				"@lerna/otplease": "5.5.2",
-				"@lerna/output": "5.5.2",
-				"@lerna/pack-directory": "5.5.2",
-				"@lerna/prerelease-id-from-version": "5.5.2",
-				"@lerna/prompt": "5.5.2",
-				"@lerna/pulse-till-done": "5.5.2",
-				"@lerna/run-lifecycle": "5.5.2",
-				"@lerna/run-topologically": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"@lerna/version": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"libnpmaccess": "^6.0.3",
-				"npm-package-arg": "8.1.1",
-				"npm-registry-fetch": "^13.3.0",
-				"npmlog": "^6.0.2",
-				"p-map": "^4.0.0",
-				"p-pipe": "^3.1.0",
-				"pacote": "^13.6.1",
-				"semver": "^7.3.4"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"hosted-git-info": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
-					"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"npm-package-arg": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
-					"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^3.0.6",
-						"semver": "^7.0.0",
-						"validate-npm-package-name": "^3.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-react-jsx-development": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+			"integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
+			"dependencies": {
+				"@babel/plugin-transform-react-jsx": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/pulse-till-done": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/pulse-till-done/-/pulse-till-done-5.5.2.tgz",
-			"integrity": "sha512-e8sRby4FxSU9QjdRYXvHQtb5GMVO5XDnSH83RWdSxAVFGVEVWKqI3qg3otGH1JlD/kOu195d+ZzndF9qqMvveQ==",
-			"dev": true,
-			"requires": {
-				"npmlog": "^6.0.2"
+		"node_modules/@babel/plugin-transform-react-jsx-self": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+			"integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/query-graph": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/query-graph/-/query-graph-5.5.2.tgz",
-			"integrity": "sha512-krKt+mvGm+9fp71ZGUO1MiUZsL+W6dAKx5kBPNWkrw5TFZCasZJHRSIqby9iXpjma+MYohjFjLVvg1PIYKt/kg==",
-			"dev": true,
-			"requires": {
-				"@lerna/package-graph": "5.5.2"
+		"node_modules/@babel/plugin-transform-react-jsx-source": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+			"integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/resolve-symlink": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/resolve-symlink/-/resolve-symlink-5.5.2.tgz",
-			"integrity": "sha512-JLJg6/IFqpmGjFfKvj+lntcsGGWbIxF2uAcrVKldqwcPTmlMvolg51lL+wqII3s8N3gZIGdxhjXfhDdKuKtEzQ==",
-			"dev": true,
-			"requires": {
-				"fs-extra": "^9.1.0",
-				"npmlog": "^6.0.2",
-				"read-cmd-shim": "^3.0.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/plugin-syntax-jsx": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
+			"integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/rimraf-dir": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/rimraf-dir/-/rimraf-dir-5.5.2.tgz",
-			"integrity": "sha512-siE1RpEpSLFlnnbAJZz+CuBIcOqXrhR/SXVBnPDpIg4tGgHns+Q99m6K29ltuh+vZMBLMYnnyfPYitJFYTC3MQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/child-process": "5.5.2",
-				"npmlog": "^6.0.2",
-				"path-exists": "^4.0.0",
-				"rimraf": "^3.0.2"
+		"node_modules/@babel/plugin-transform-react-pure-annotations": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz",
+			"integrity": "sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-regenerator": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz",
+			"integrity": "sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==",
+			"license": "MIT",
 			"dependencies": {
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"regenerator-transform": "^0.15.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/run": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/run/-/run-5.5.2.tgz",
-			"integrity": "sha512-KVMkjL2ehW+/6VAwTTLgq82Rgw4W6vOz1I9XwwO/bk9h7DoY1HlE8leaaYRNqT+Cv437A9AwggR+LswhoK3alA==",
-			"dev": true,
-			"requires": {
-				"@lerna/command": "5.5.2",
-				"@lerna/filter-options": "5.5.2",
-				"@lerna/npm-run-script": "5.5.2",
-				"@lerna/output": "5.5.2",
-				"@lerna/profiler": "5.5.2",
-				"@lerna/run-topologically": "5.5.2",
-				"@lerna/timer": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"p-map": "^4.0.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-reserved-words": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz",
+			"integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/run-lifecycle": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/run-lifecycle/-/run-lifecycle-5.5.2.tgz",
-			"integrity": "sha512-d5pF0abAv6MVNG3xhG1BakHZtr93vIn27aqgBvu9XK1CW6GdbpBpCv1kc8RjHyOpjjFDt4+uK2TG7s7T0oCZPw==",
-			"dev": true,
-			"requires": {
-				"@lerna/npm-conf": "5.5.2",
-				"@npmcli/run-script": "^4.1.7",
-				"npmlog": "^6.0.2",
-				"p-queue": "^6.6.2"
-			}
-		},
-		"@lerna/run-topologically": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/run-topologically/-/run-topologically-5.5.2.tgz",
-			"integrity": "sha512-o3XYXk7hG8ijUjejgXoa7fuQvzEohMUm4AB5SPBbvq1BhoqIZfW50KlBNjud1zVD4OsA8jJOfjItcY9KfxowuA==",
-			"dev": true,
-			"requires": {
-				"@lerna/query-graph": "5.5.2",
-				"p-queue": "^6.6.2"
-			}
-		},
-		"@lerna/symlink-binary": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/symlink-binary/-/symlink-binary-5.5.2.tgz",
-			"integrity": "sha512-fQAN0ClwlVLThqm+m9d4lIfa2TuONocdNQocmou8UBDI/C/VVW6dvD+tSL3I4jYIYJWsXJe1hBBjil4ZYXpQrQ==",
-			"dev": true,
-			"requires": {
-				"@lerna/create-symlink": "5.5.2",
-				"@lerna/package": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"p-map": "^4.0.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz",
+			"integrity": "sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"babel-plugin-polyfill-corejs2": "^0.4.10",
+				"babel-plugin-polyfill-corejs3": "^0.10.6",
+				"babel-plugin-polyfill-regenerator": "^0.6.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/symlink-dependencies": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/symlink-dependencies/-/symlink-dependencies-5.5.2.tgz",
-			"integrity": "sha512-eNIICnlUD1YCiIY50O2TKHkxXCF4rYAFOCVWTiUS098tNKLssTPnIQrK3ASKxK9t7srmfcm49LFxNRPjVKjSBw==",
-			"dev": true,
-			"requires": {
-				"@lerna/create-symlink": "5.5.2",
-				"@lerna/resolve-symlink": "5.5.2",
-				"@lerna/symlink-binary": "5.5.2",
-				"fs-extra": "^9.1.0",
-				"p-map": "^4.0.0",
-				"p-map-series": "^2.1.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"@lerna/temp-write": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/temp-write/-/temp-write-5.5.2.tgz",
-			"integrity": "sha512-K/9L+25qIw4qw/SSLxwfAWzaUE3luqGTusd3x934Hg2sBQVX28xddwaZlasQ6qen7ETp6Ec9vSVWF2ffWTxKJg==",
-			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.15",
-				"is-stream": "^2.0.0",
-				"make-dir": "^3.0.0",
-				"temp-dir": "^1.0.0",
-				"uuid": "^8.3.2"
-			},
+		"node_modules/@babel/plugin-transform-shorthand-properties": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz",
+			"integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==",
+			"license": "MIT",
 			"dependencies": {
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"uuid": {
-					"version": "8.3.2",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/timer": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/timer/-/timer-5.5.2.tgz",
-			"integrity": "sha512-QcnMFwcP7xlT9DH4oGVuDYuSOfpAghG4wj7D8vN1GhJFd9ueDCzTFJpFRd6INacIbESBNMjq5WuTeNdxcDo8Fg==",
-			"dev": true
-		},
-		"@lerna/validation-error": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/validation-error/-/validation-error-5.5.2.tgz",
-			"integrity": "sha512-ZffmtrgOkihUxpho529rDI0llDV9YFNJqh0qF2+doFePeTtFKkFVFHZvxP9hPZPMOLypX9OHwCVfMaTlIpIjjA==",
-			"dev": true,
-			"requires": {
-				"npmlog": "^6.0.2"
-			}
-		},
-		"@lerna/version": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/version/-/version-5.5.2.tgz",
-			"integrity": "sha512-MMO0rnC9Y8JQEl6+XJMu0JM/bWpe6mGNhQJ8C9W1hkpMwxrizhcoEFb9Vq/q/tw7DjCVc3inrb/5s50cRmrmtg==",
-			"dev": true,
-			"requires": {
-				"@lerna/check-working-tree": "5.5.2",
-				"@lerna/child-process": "5.5.2",
-				"@lerna/collect-updates": "5.5.2",
-				"@lerna/command": "5.5.2",
-				"@lerna/conventional-commits": "5.5.2",
-				"@lerna/github-client": "5.5.2",
-				"@lerna/gitlab-client": "5.5.2",
-				"@lerna/output": "5.5.2",
-				"@lerna/prerelease-id-from-version": "5.5.2",
-				"@lerna/prompt": "5.5.2",
-				"@lerna/run-lifecycle": "5.5.2",
-				"@lerna/run-topologically": "5.5.2",
-				"@lerna/temp-write": "5.5.2",
-				"@lerna/validation-error": "5.5.2",
-				"chalk": "^4.1.0",
-				"dedent": "^0.7.0",
-				"load-json-file": "^6.2.0",
-				"minimatch": "^3.0.4",
-				"npmlog": "^6.0.2",
-				"p-map": "^4.0.0",
-				"p-pipe": "^3.1.0",
-				"p-reduce": "^2.1.0",
-				"p-waterfall": "^2.1.1",
-				"semver": "^7.3.4",
-				"slash": "^3.0.0",
-				"write-json-file": "^4.3.0"
-			},
+		"node_modules/@babel/plugin-transform-spread": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
+			"integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
+			"license": "MIT",
 			"dependencies": {
-				"detect-indent": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-					"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-					"dev": true
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"load-json-file": {
-					"version": "6.2.0",
-					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
-					"integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.15",
-						"parse-json": "^5.0.0",
-						"strip-bom": "^4.0.0",
-						"type-fest": "^0.6.0"
-					}
-				},
-				"sort-keys": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-4.2.0.tgz",
-					"integrity": "sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==",
-					"dev": true,
-					"requires": {
-						"is-plain-obj": "^2.0.0"
-					}
-				},
-				"strip-bom": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-					"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				},
-				"write-json-file": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-4.3.0.tgz",
-					"integrity": "sha512-PxiShnxf0IlnQuMYOPPhPkhExoCQuTUNPOa/2JWCYTmBquU9njyyDuwRKN26IZBlp4yn1nt+Agh2HOOBl+55HQ==",
-					"dev": true,
-					"requires": {
-						"detect-indent": "^6.0.0",
-						"graceful-fs": "^4.1.15",
-						"is-plain-obj": "^2.0.0",
-						"make-dir": "^3.0.0",
-						"sort-keys": "^4.0.0",
-						"write-file-atomic": "^3.0.0"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@lerna/write-log-file": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/@lerna/write-log-file/-/write-log-file-5.5.2.tgz",
-			"integrity": "sha512-eeW10lriUl3w6WXtYk30z4rZB77QXeQCkLgSMv6Rqa7AMCTZNPhIBJQ0Nkmxo8LaFSWMhin1pLhHTYdqcsaFLA==",
-			"dev": true,
-			"requires": {
-				"npmlog": "^6.0.2",
-				"write-file-atomic": "^4.0.1"
-			},
+		"node_modules/@babel/plugin-transform-sticky-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
+			"integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
+			"license": "MIT",
 			"dependencies": {
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-					"integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"signal-exit": "^3.0.7"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@mdx-js/mdx": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz",
-			"integrity": "sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "7.12.9",
-				"@babel/plugin-syntax-jsx": "7.12.1",
-				"@babel/plugin-syntax-object-rest-spread": "7.8.3",
-				"@mdx-js/util": "1.6.22",
-				"babel-plugin-apply-mdx-type-prop": "1.6.22",
-				"babel-plugin-extract-import-names": "1.6.22",
-				"camelcase-css": "2.0.1",
-				"detab": "2.0.4",
-				"hast-util-raw": "6.0.1",
-				"lodash.uniq": "4.5.0",
-				"mdast-util-to-hast": "10.0.1",
-				"remark-footnotes": "2.0.0",
-				"remark-mdx": "1.6.22",
-				"remark-parse": "8.0.3",
-				"remark-squeeze-paragraphs": "4.0.0",
-				"style-to-object": "0.3.0",
-				"unified": "9.2.0",
-				"unist-builder": "2.0.3",
-				"unist-util-visit": "2.0.3"
-			},
+		"node_modules/@babel/plugin-transform-template-literals": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
+			"integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/core": {
-					"version": "7.12.9",
-					"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-					"integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.10.4",
-						"@babel/generator": "^7.12.5",
-						"@babel/helper-module-transforms": "^7.12.1",
-						"@babel/helpers": "^7.12.5",
-						"@babel/parser": "^7.12.7",
-						"@babel/template": "^7.12.7",
-						"@babel/traverse": "^7.12.9",
-						"@babel/types": "^7.12.7",
-						"convert-source-map": "^1.7.0",
-						"debug": "^4.1.0",
-						"gensync": "^1.0.0-beta.1",
-						"json5": "^2.1.2",
-						"lodash": "^4.17.19",
-						"resolve": "^1.3.2",
-						"semver": "^5.4.1",
-						"source-map": "^0.5.0"
-					}
-				},
-				"@babel/plugin-syntax-jsx": {
-					"version": "7.12.1",
-					"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
-					"integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-plugin-utils": "^7.10.4"
-					}
-				},
-				"convert-source-map": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-					"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "~5.1.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"is-buffer": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-					"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-					"dev": true
-				},
-				"is-plain-obj": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-					"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-					"dev": true
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"parse-entities": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-					"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-					"dev": true,
-					"requires": {
-						"character-entities": "^1.0.0",
-						"character-entities-legacy": "^1.0.0",
-						"character-reference-invalid": "^1.0.0",
-						"is-alphanumerical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-hexadecimal": "^1.0.0"
-					}
-				},
-				"remark-parse": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
-					"integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
-					"dev": true,
-					"requires": {
-						"ccount": "^1.0.0",
-						"collapse-white-space": "^1.0.2",
-						"is-alphabetical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-whitespace-character": "^1.0.0",
-						"is-word-character": "^1.0.0",
-						"markdown-escapes": "^1.0.0",
-						"parse-entities": "^2.0.0",
-						"repeat-string": "^1.5.4",
-						"state-toggle": "^1.0.0",
-						"trim": "0.0.1",
-						"trim-trailing-lines": "^1.0.0",
-						"unherit": "^1.0.4",
-						"unist-util-remove-position": "^2.0.0",
-						"vfile-location": "^3.0.0",
-						"xtend": "^4.0.1"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
-				},
-				"unified": {
-					"version": "9.2.0",
-					"resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
-					"integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
-					"dev": true,
-					"requires": {
-						"bail": "^1.0.0",
-						"extend": "^3.0.0",
-						"is-buffer": "^2.0.0",
-						"is-plain-obj": "^2.0.0",
-						"trough": "^1.0.0",
-						"vfile": "^4.0.0"
-					}
-				},
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-remove-position": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
-					"integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
-					"dev": true,
-					"requires": {
-						"unist-util-visit": "^2.0.0"
-					}
-				},
-				"unist-util-stringify-position": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-					"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.2"
-					}
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
-				},
-				"vfile": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
-					"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"is-buffer": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0",
-						"vfile-message": "^2.0.0"
-					}
-				},
-				"vfile-location": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
-					"integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
-					"dev": true
-				},
-				"vfile-message": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-					"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0"
-					}
-				}
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@mdx-js/react": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-			"integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-			"dev": true
-		},
-		"@mdx-js/util": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz",
-			"integrity": "sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==",
-			"dev": true
+		"node_modules/@babel/plugin-transform-typeof-symbol": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz",
+			"integrity": "sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"@mrmlnc/readdir-enhanced": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
-			"integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
-			"dev": true,
-			"requires": {
-				"call-me-maybe": "^1.0.1",
-				"glob-to-regexp": "^0.3.0"
+		"node_modules/@babel/plugin-transform-typescript": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
+			"integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.9",
+				"@babel/helper-create-class-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
+				"@babel/plugin-syntax-typescript": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@nodelib/fs.scandir": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.2.tgz",
-			"integrity": "sha512-wrIBsjA5pl13f0RN4Zx4FNWmU71lv03meGKnqRUoCyan17s4V3WL92f3w3AIuWbNnpcrQyFBU5qMavJoB8d27w==",
-			"dev": true,
-			"requires": {
-				"@nodelib/fs.stat": "2.0.2",
-				"run-parallel": "^1.1.9"
+		"node_modules/@babel/plugin-transform-unicode-escapes": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
+			"integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-property-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz",
+			"integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz",
+			"integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-sets-regex": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz",
+			"integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/preset-env": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.9.tgz",
+			"integrity": "sha512-XqDEt+hfsQukahSX9JOBDHhpUHDhj2zGSxoqWQFCMajOSBnbhBdgON/bU/5PkBA1yX5tqW6tTzuIPVsZTQ7h5Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.25.9",
+				"@babel/helper-compilation-targets": "^7.25.9",
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-validator-option": "^7.25.9",
+				"@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.9",
+				"@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.9",
+				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.9",
+				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.25.9",
+				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.9",
+				"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+				"@babel/plugin-syntax-import-assertions": "^7.25.9",
+				"@babel/plugin-syntax-import-attributes": "^7.25.9",
+				"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+				"@babel/plugin-transform-arrow-functions": "^7.25.9",
+				"@babel/plugin-transform-async-generator-functions": "^7.25.9",
+				"@babel/plugin-transform-async-to-generator": "^7.25.9",
+				"@babel/plugin-transform-block-scoped-functions": "^7.25.9",
+				"@babel/plugin-transform-block-scoping": "^7.25.9",
+				"@babel/plugin-transform-class-properties": "^7.25.9",
+				"@babel/plugin-transform-class-static-block": "^7.25.9",
+				"@babel/plugin-transform-classes": "^7.25.9",
+				"@babel/plugin-transform-computed-properties": "^7.25.9",
+				"@babel/plugin-transform-destructuring": "^7.25.9",
+				"@babel/plugin-transform-dotall-regex": "^7.25.9",
+				"@babel/plugin-transform-duplicate-keys": "^7.25.9",
+				"@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.9",
+				"@babel/plugin-transform-dynamic-import": "^7.25.9",
+				"@babel/plugin-transform-exponentiation-operator": "^7.25.9",
+				"@babel/plugin-transform-export-namespace-from": "^7.25.9",
+				"@babel/plugin-transform-for-of": "^7.25.9",
+				"@babel/plugin-transform-function-name": "^7.25.9",
+				"@babel/plugin-transform-json-strings": "^7.25.9",
+				"@babel/plugin-transform-literals": "^7.25.9",
+				"@babel/plugin-transform-logical-assignment-operators": "^7.25.9",
+				"@babel/plugin-transform-member-expression-literals": "^7.25.9",
+				"@babel/plugin-transform-modules-amd": "^7.25.9",
+				"@babel/plugin-transform-modules-commonjs": "^7.25.9",
+				"@babel/plugin-transform-modules-systemjs": "^7.25.9",
+				"@babel/plugin-transform-modules-umd": "^7.25.9",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.25.9",
+				"@babel/plugin-transform-new-target": "^7.25.9",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.25.9",
+				"@babel/plugin-transform-numeric-separator": "^7.25.9",
+				"@babel/plugin-transform-object-rest-spread": "^7.25.9",
+				"@babel/plugin-transform-object-super": "^7.25.9",
+				"@babel/plugin-transform-optional-catch-binding": "^7.25.9",
+				"@babel/plugin-transform-optional-chaining": "^7.25.9",
+				"@babel/plugin-transform-parameters": "^7.25.9",
+				"@babel/plugin-transform-private-methods": "^7.25.9",
+				"@babel/plugin-transform-private-property-in-object": "^7.25.9",
+				"@babel/plugin-transform-property-literals": "^7.25.9",
+				"@babel/plugin-transform-regenerator": "^7.25.9",
+				"@babel/plugin-transform-reserved-words": "^7.25.9",
+				"@babel/plugin-transform-shorthand-properties": "^7.25.9",
+				"@babel/plugin-transform-spread": "^7.25.9",
+				"@babel/plugin-transform-sticky-regex": "^7.25.9",
+				"@babel/plugin-transform-template-literals": "^7.25.9",
+				"@babel/plugin-transform-typeof-symbol": "^7.25.9",
+				"@babel/plugin-transform-unicode-escapes": "^7.25.9",
+				"@babel/plugin-transform-unicode-property-regex": "^7.25.9",
+				"@babel/plugin-transform-unicode-regex": "^7.25.9",
+				"@babel/plugin-transform-unicode-sets-regex": "^7.25.9",
+				"@babel/preset-modules": "0.1.6-no-external-plugins",
+				"babel-plugin-polyfill-corejs2": "^0.4.10",
+				"babel-plugin-polyfill-corejs3": "^0.10.6",
+				"babel-plugin-polyfill-regenerator": "^0.6.1",
+				"core-js-compat": "^3.38.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/preset-env/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/preset-flow": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.23.3.tgz",
+			"integrity": "sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==",
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.2.tgz",
-					"integrity": "sha512-z8+wGWV2dgUhLqrtRYa03yDx4HWMvXKi1z8g3m2JyxAx8F7xk74asqPk5LAETjqDSGLFML/6CDl0+yFunSYicw==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-validator-option": "^7.22.15",
+				"@babel/plugin-transform-flow-strip-types": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@nodelib/fs.stat": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
-			"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
-			"dev": true
+		"node_modules/@babel/preset-modules": {
+			"version": "0.1.6-no-external-plugins",
+			"resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+			"integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.0.0",
+				"@babel/types": "^7.4.4",
+				"esutils": "^2.0.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+			}
 		},
-		"@nodelib/fs.walk": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.3.tgz",
-			"integrity": "sha512-l6t8xEhfK9Sa4YO5mIRdau7XSOADfmh3jCr0evNHdY+HNkW6xuQhgMH7D73VV6WpZOagrW0UludvMTiifiwTfA==",
-			"dev": true,
-			"requires": {
-				"@nodelib/fs.scandir": "2.1.2",
-				"fastq": "^1.6.0"
+		"node_modules/@babel/preset-react": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.23.3.tgz",
+			"integrity": "sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-validator-option": "^7.22.15",
+				"@babel/plugin-transform-react-display-name": "^7.23.3",
+				"@babel/plugin-transform-react-jsx": "^7.22.15",
+				"@babel/plugin-transform-react-jsx-development": "^7.22.5",
+				"@babel/plugin-transform-react-pure-annotations": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@npmcli/arborist": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@npmcli/arborist/-/arborist-5.3.0.tgz",
-			"integrity": "sha512-+rZ9zgL1lnbl8Xbb1NQdMjveOMwj4lIYfcDtyJHHi5x4X8jtR6m8SXooJMZy5vmFVZ8w7A2Bnd/oX9eTuU8w5A==",
-			"dev": true,
-			"requires": {
-				"@isaacs/string-locale-compare": "^1.1.0",
-				"@npmcli/installed-package-contents": "^1.0.7",
-				"@npmcli/map-workspaces": "^2.0.3",
-				"@npmcli/metavuln-calculator": "^3.0.1",
-				"@npmcli/move-file": "^2.0.0",
-				"@npmcli/name-from-folder": "^1.0.1",
-				"@npmcli/node-gyp": "^2.0.0",
-				"@npmcli/package-json": "^2.0.0",
-				"@npmcli/run-script": "^4.1.3",
-				"bin-links": "^3.0.0",
-				"cacache": "^16.0.6",
-				"common-ancestor-path": "^1.0.1",
-				"json-parse-even-better-errors": "^2.3.1",
-				"json-stringify-nice": "^1.1.4",
-				"mkdirp": "^1.0.4",
-				"mkdirp-infer-owner": "^2.0.0",
-				"nopt": "^5.0.0",
-				"npm-install-checks": "^5.0.0",
-				"npm-package-arg": "^9.0.0",
-				"npm-pick-manifest": "^7.0.0",
-				"npm-registry-fetch": "^13.0.0",
-				"npmlog": "^6.0.2",
-				"pacote": "^13.6.1",
-				"parse-conflict-json": "^2.0.1",
-				"proc-log": "^2.0.0",
-				"promise-all-reject-late": "^1.0.0",
-				"promise-call-limit": "^1.0.1",
-				"read-package-json-fast": "^2.0.2",
-				"readdir-scoped-modules": "^1.1.0",
-				"rimraf": "^3.0.2",
-				"semver": "^7.3.7",
-				"ssri": "^9.0.0",
-				"treeverse": "^2.0.0",
-				"walk-up-path": "^1.0.0"
-			},
-			"dependencies": {
-				"@npmcli/fs": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
-					"integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==",
-					"dev": true,
-					"requires": {
-						"@gar/promisify": "^1.1.3",
-						"semver": "^7.3.5"
-					}
-				},
-				"@npmcli/move-file": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz",
-					"integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==",
-					"dev": true,
-					"requires": {
-						"mkdirp": "^1.0.4",
-						"rimraf": "^3.0.2"
-					}
-				},
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"cacache": {
-					"version": "16.1.3",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
-					"integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^2.1.0",
-						"@npmcli/move-file": "^2.0.0",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.1.0",
-						"glob": "^8.0.1",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^7.7.1",
-						"minipass": "^3.1.6",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.4",
-						"mkdirp": "^1.0.4",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^9.0.0",
-						"tar": "^6.1.11",
-						"unique-filename": "^2.0.0"
-					}
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"semver": {
-					"version": "7.3.7",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-					"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					},
-					"dependencies": {
-						"lru-cache": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-							"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-							"dev": true,
-							"requires": {
-								"yallist": "^4.0.0"
-							}
-						}
-					}
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"unique-filename": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",
-					"integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==",
-					"dev": true,
-					"requires": {
-						"unique-slug": "^3.0.0"
-					}
-				},
-				"unique-slug": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
-					"integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@babel/preset-typescript": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.25.9.tgz",
+			"integrity": "sha512-XWxw1AcKk36kgxf4C//fl0ikjLeqGUWn062/Fd8GtpTfDJOX6Ud95FK+4JlDA36BX4bNGndXi3a6Vr4Jo5/61A==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9",
+				"@babel/helper-validator-option": "^7.25.9",
+				"@babel/plugin-syntax-jsx": "^7.25.9",
+				"@babel/plugin-transform-modules-commonjs": "^7.25.9",
+				"@babel/plugin-transform-typescript": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@npmcli/fs": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
-			"integrity": "sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==",
-			"dev": true,
-			"requires": {
-				"@gar/promisify": "^1.0.1",
-				"semver": "^7.3.5"
+		"node_modules/@babel/preset-typescript/node_modules/@babel/plugin-syntax-jsx": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
+			"integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"@npmcli/git": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@npmcli/git/-/git-3.0.2.tgz",
-			"integrity": "sha512-CAcd08y3DWBJqJDpfuVL0uijlq5oaXaOJEKHKc4wqrjd00gkvTZB+nFuLn+doOOKddaQS9JfqtNoFCO2LCvA3w==",
-			"dev": true,
-			"requires": {
-				"@npmcli/promise-spawn": "^3.0.0",
-				"lru-cache": "^7.4.4",
-				"mkdirp": "^1.0.4",
-				"npm-pick-manifest": "^7.0.0",
-				"proc-log": "^2.0.0",
-				"promise-inflight": "^1.0.1",
-				"promise-retry": "^2.0.1",
-				"semver": "^7.3.5",
-				"which": "^2.0.2"
+		"node_modules/@babel/register": {
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/register/-/register-7.23.7.tgz",
+			"integrity": "sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==",
+			"dependencies": {
+				"clone-deep": "^4.0.1",
+				"find-cache-dir": "^2.0.0",
+				"make-dir": "^2.1.0",
+				"pirates": "^4.0.6",
+				"source-map-support": "^0.5.16"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/register/node_modules/make-dir": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
 			"dependencies": {
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"pify": "^4.0.1",
+				"semver": "^5.6.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"@npmcli/installed-package-contents": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz",
-			"integrity": "sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==",
-			"dev": true,
-			"requires": {
-				"npm-bundled": "^1.1.1",
-				"npm-normalize-package-bin": "^1.0.1"
+		"node_modules/@babel/register/node_modules/pify": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"@npmcli/map-workspaces": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@npmcli/map-workspaces/-/map-workspaces-2.0.4.tgz",
-			"integrity": "sha512-bMo0aAfwhVwqoVM5UzX1DJnlvVvzDCHae821jv48L1EsrYwfOZChlqWYXEtto/+BkBXetPbEWgau++/brh4oVg==",
-			"dev": true,
-			"requires": {
-				"@npmcli/name-from-folder": "^1.0.1",
-				"glob": "^8.0.1",
-				"minimatch": "^5.0.1",
-				"read-package-json-fast": "^2.0.3"
-			},
+		"node_modules/@babel/register/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+			"integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
+			"license": "MIT",
 			"dependencies": {
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				}
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@npmcli/metavuln-calculator": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@npmcli/metavuln-calculator/-/metavuln-calculator-3.1.1.tgz",
-			"integrity": "sha512-n69ygIaqAedecLeVH3KnO39M6ZHiJ2dEv5A7DGvcqCB8q17BGUgW8QaanIkbWUo2aYGZqJaOORTLAlIvKjNDKA==",
-			"dev": true,
-			"requires": {
-				"cacache": "^16.0.0",
-				"json-parse-even-better-errors": "^2.3.1",
-				"pacote": "^13.0.3",
-				"semver": "^7.3.5"
+		"node_modules/@babel/runtime-corejs3": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.25.7.tgz",
+			"integrity": "sha512-gMmIEhg35sXk9Te5qbGp3W9YKrvLt3HV658/d3odWrHSqT0JeG5OzsJWFHRLiOohRyjRsJc/x03DhJm3i8VJxg==",
+			"license": "MIT",
+			"dependencies": {
+				"core-js-pure": "^3.30.2",
+				"regenerator-runtime": "^0.14.0"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/runtime-corejs3/node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+		},
+		"node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+		},
+		"node_modules/@babel/template": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+			"integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+			"license": "MIT",
 			"dependencies": {
-				"@npmcli/fs": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
-					"integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==",
-					"dev": true,
-					"requires": {
-						"@gar/promisify": "^1.1.3",
-						"semver": "^7.3.5"
-					}
-				},
-				"@npmcli/move-file": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz",
-					"integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==",
-					"dev": true,
-					"requires": {
-						"mkdirp": "^1.0.4",
-						"rimraf": "^3.0.2"
-					}
-				},
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"cacache": {
-					"version": "16.1.3",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
-					"integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^2.1.0",
-						"@npmcli/move-file": "^2.0.0",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.1.0",
-						"glob": "^8.0.1",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^7.7.1",
-						"minipass": "^3.1.6",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.4",
-						"mkdirp": "^1.0.4",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^9.0.0",
-						"tar": "^6.1.11",
-						"unique-filename": "^2.0.0"
-					}
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"unique-filename": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",
-					"integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==",
-					"dev": true,
-					"requires": {
-						"unique-slug": "^3.0.0"
-					}
-				},
-				"unique-slug": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
-					"integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4"
-					}
-				}
+				"@babel/code-frame": "^7.25.9",
+				"@babel/parser": "^7.25.9",
+				"@babel/types": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@npmcli/move-file": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
-			"integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
-			"dev": true,
-			"requires": {
-				"mkdirp": "^1.0.4",
-				"rimraf": "^3.0.2"
+		"node_modules/@babel/traverse": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.7.tgz",
+			"integrity": "sha512-jatJPT1Zjqvh/1FyJs6qAHL+Dzb7sTb+xr7Q+gM1b+1oBsMsQQ4FkVKb6dFlJvLlVssqkRzV05Jzervt9yhnzg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.25.7",
+				"@babel/generator": "^7.25.7",
+				"@babel/parser": "^7.25.7",
+				"@babel/template": "^7.25.7",
+				"@babel/types": "^7.25.7",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
+			"integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
+			"license": "MIT",
 			"dependencies": {
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				}
+				"@babel/helper-string-parser": "^7.25.9",
+				"@babel/helper-validator-identifier": "^7.25.9"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"@npmcli/name-from-folder": {
+		"node_modules/@base2/pretty-print-object": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@npmcli/name-from-folder/-/name-from-folder-1.0.1.tgz",
-			"integrity": "sha512-qq3oEfcLFwNfEYOQ8HLimRGKlD8WSeGEdtUa7hmzpR8Sa7haL1KVQrvgO6wqMjhWFFVjgtrh1gIxDz+P8sjUaA==",
+			"resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz",
+			"integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
 			"dev": true
 		},
-		"@npmcli/node-gyp": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-2.0.0.tgz",
-			"integrity": "sha512-doNI35wIe3bBaEgrlPfdJPaCpUR89pJWep4Hq3aRdh6gKazIVWfs0jHttvSSoq47ZXgC7h73kDsUl8AoIQUB+A==",
-			"dev": true
+		"node_modules/@bcoe/v8-coverage": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+			"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
 		},
-		"@npmcli/package-json": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-2.0.0.tgz",
-			"integrity": "sha512-42jnZ6yl16GzjWSH7vtrmWyJDGVa/LXPdpN2rcUWolFjc9ON2N3uz0qdBbQACfmhuJZ2lbKYtmK5qx68ZPLHMA==",
+		"node_modules/@callstack/reassure-cli": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/@callstack/reassure-cli/-/reassure-cli-0.6.1.tgz",
+			"integrity": "sha512-c5Pihix9anX9hSLsN8Y5cpRUuB5vHSFeaGAHuiRyNLlEOAIEODjQIOCQ7MkxEiWd5rT5t00m9EMfANb1FcnfiA==",
+			"dev": true,
+			"dependencies": {
+				"@callstack/reassure-compare": "0.3.0",
+				"simple-git": "^3.16.0",
+				"yargs": "^17.6.2"
+			},
+			"bin": {
+				"reassure": "lib/commonjs/bin.js"
+			}
+		},
+		"node_modules/@callstack/reassure-cli/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
 			"dev": true,
-			"requires": {
-				"json-parse-even-better-errors": "^2.3.1"
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@npmcli/promise-spawn": {
+		"node_modules/@callstack/reassure-cli/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/@callstack/reassure-cli/node_modules/is-fullwidth-code-point": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-3.0.0.tgz",
-			"integrity": "sha512-s9SgS+p3a9Eohe68cSI3fi+hpcZUmXq5P7w0kMlAsWVtR7XbK3ptkZqKT2cK1zLDObJ3sR+8P59sJE0w/KTL1g==",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 			"dev": true,
-			"requires": {
-				"infer-owner": "^1.0.4"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@npmcli/run-script": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-4.2.1.tgz",
-			"integrity": "sha512-7dqywvVudPSrRCW5nTHpHgeWnbBtz8cFkOuKrecm6ih+oO9ciydhWt6OF7HlqupRRmB8Q/gECVdB9LMfToJbRg==",
+		"node_modules/@callstack/reassure-cli/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dev": true,
-			"requires": {
-				"@npmcli/node-gyp": "^2.0.0",
-				"@npmcli/promise-spawn": "^3.0.0",
-				"node-gyp": "^9.0.0",
-				"read-package-json-fast": "^2.0.3",
-				"which": "^2.0.2"
-			},
 			"dependencies": {
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@nrwl/cli": {
-			"version": "14.7.13",
-			"resolved": "https://registry.npmjs.org/@nrwl/cli/-/cli-14.7.13.tgz",
-			"integrity": "sha512-roEowDw1TxNsfL/pv752pO/gZrxhfpO1BUQ47madKn/ujupzVe/ropufrT7taDntwQMcHWLrHG3lJyqOexUJIA==",
+		"node_modules/@callstack/reassure-cli/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 			"dev": true,
-			"requires": {
-				"nx": "14.7.13"
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"@nrwl/tao": {
-			"version": "14.7.13",
-			"resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-14.7.13.tgz",
-			"integrity": "sha512-nZzbMCNC5UK/Tf7kRbAqdLF5PSqom6aGd3q9m1TKbpxu9ufE5jvK0mF4EDvVJO7LCBnWaLgpZOINRfRPBLGueA==",
+		"node_modules/@callstack/reassure-cli/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
 			"dev": true,
-			"requires": {
-				"nx": "14.7.13"
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@octokit/auth-token": {
-			"version": "2.4.4",
-			"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.4.4.tgz",
-			"integrity": "sha512-LNfGu3Ro9uFAYh10MUZVaT7X2CnNm2C8IDQmabx+3DygYIQjs9FwzFAHN/0t6mu5HEPhxcb1XOuxdpY82vCg2Q==",
+		"node_modules/@callstack/reassure-cli/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
 			"dev": true,
-			"requires": {
-				"@octokit/types": "^6.0.0"
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@octokit/core": {
-			"version": "3.5.1",
-			"resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.5.1.tgz",
-			"integrity": "sha512-omncwpLVxMP+GLpLPgeGJBF6IWJFjXDS5flY5VbppePYX9XehevbDykRH9PdCdvqt9TS5AOTiDide7h0qrkHjw==",
+		"node_modules/@callstack/reassure-cli/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
 			"dev": true,
-			"requires": {
-				"@octokit/auth-token": "^2.4.4",
-				"@octokit/graphql": "^4.5.8",
-				"@octokit/request": "^5.6.0",
-				"@octokit/request-error": "^2.0.5",
-				"@octokit/types": "^6.0.3",
-				"before-after-hook": "^2.2.0",
-				"universal-user-agent": "^6.0.0"
-			},
-			"dependencies": {
-				"@octokit/endpoint": {
-					"version": "6.0.12",
-					"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
-					"integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.0.3",
-						"is-plain-object": "^5.0.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/openapi-types": {
-					"version": "11.2.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
-					"integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
-					"dev": true
-				},
-				"@octokit/request": {
-					"version": "5.6.2",
-					"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.2.tgz",
-					"integrity": "sha512-je66CvSEVf0jCpRISxkUcCa0UkxmFs6eGDRSbfJtAVwbLH5ceqF+YEyC8lj8ystKyZTy8adWr0qmkY52EfOeLA==",
-					"dev": true,
-					"requires": {
-						"@octokit/endpoint": "^6.0.1",
-						"@octokit/request-error": "^2.1.0",
-						"@octokit/types": "^6.16.1",
-						"is-plain-object": "^5.0.0",
-						"node-fetch": "^2.6.1",
-						"universal-user-agent": "^6.0.0"
-					},
-					"dependencies": {
-						"@octokit/types": {
-							"version": "6.34.0",
-							"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-							"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
-							"dev": true,
-							"requires": {
-								"@octokit/openapi-types": "^11.2.0"
-							}
-						}
-					}
-				},
-				"before-after-hook": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-					"integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
-					"dev": true
-				},
-				"is-plain-object": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-					"dev": true
-				},
-				"universal-user-agent": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
-					"integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@octokit/endpoint": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-5.1.2.tgz",
-			"integrity": "sha512-bBGGmcRFq1x0jrB29G/9KjYmO3cdHfk3476B2JOHRvLsNw1Pn3l+ZvbiqtcO9qAS4Ti+zFedLB84ziHZRZclQA==",
+		"node_modules/@callstack/reassure-compare": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/@callstack/reassure-compare/-/reassure-compare-0.3.0.tgz",
+			"integrity": "sha512-1TIUhzZELlXkVJE9wH6qm7IkoLChTsKj7rOE9h86yRX4y4vrSru9cdHwktjsuopQ543YbOxehMMx6tGbefsGBA==",
 			"dev": true,
-			"requires": {
-				"deepmerge": "3.2.0",
-				"is-plain-object": "^3.0.0",
-				"universal-user-agent": "^2.1.0",
-				"url-template": "^2.0.8"
-			},
 			"dependencies": {
-				"deepmerge": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.2.0.tgz",
-					"integrity": "sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==",
-					"dev": true
-				},
-				"is-plain-object": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz",
-					"integrity": "sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==",
-					"dev": true,
-					"requires": {
-						"isobject": "^4.0.0"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				}
+				"markdown-builder": "^0.9.0",
+				"markdown-table": "^2.0.0",
+				"zod": "^3.20.2"
 			}
 		},
-		"@octokit/graphql": {
-			"version": "4.6.4",
-			"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.6.4.tgz",
-			"integrity": "sha512-SWTdXsVheRmlotWNjKzPOb6Js6tjSqA2a8z9+glDJng0Aqjzti8MEWOtuT8ZSu6wHnci7LZNuarE87+WJBG4vg==",
+		"node_modules/@callstack/reassure-compare/node_modules/markdown-table": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
+			"integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
 			"dev": true,
-			"requires": {
-				"@octokit/request": "^5.6.0",
-				"@octokit/types": "^6.0.3",
-				"universal-user-agent": "^6.0.0"
-			},
 			"dependencies": {
-				"@octokit/endpoint": {
-					"version": "6.0.12",
-					"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
-					"integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.0.3",
-						"is-plain-object": "^5.0.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/openapi-types": {
-					"version": "11.2.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
-					"integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
-					"dev": true
-				},
-				"@octokit/request": {
-					"version": "5.6.2",
-					"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.2.tgz",
-					"integrity": "sha512-je66CvSEVf0jCpRISxkUcCa0UkxmFs6eGDRSbfJtAVwbLH5ceqF+YEyC8lj8ystKyZTy8adWr0qmkY52EfOeLA==",
-					"dev": true,
-					"requires": {
-						"@octokit/endpoint": "^6.0.1",
-						"@octokit/request-error": "^2.1.0",
-						"@octokit/types": "^6.16.1",
-						"is-plain-object": "^5.0.0",
-						"node-fetch": "^2.6.1",
-						"universal-user-agent": "^6.0.0"
-					},
-					"dependencies": {
-						"@octokit/types": {
-							"version": "6.34.0",
-							"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-							"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
-							"dev": true,
-							"requires": {
-								"@octokit/openapi-types": "^11.2.0"
-							}
-						}
-					}
-				},
-				"is-plain-object": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-					"dev": true
-				},
-				"universal-user-agent": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
-					"integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
-					"dev": true
-				}
+				"repeat-string": "^1.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
-		"@octokit/openapi-types": {
-			"version": "11.2.0",
-			"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
-			"integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
-			"dev": true
-		},
-		"@octokit/plugin-enterprise-rest": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-			"integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
+		"node_modules/@callstack/reassure-danger": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@callstack/reassure-danger/-/reassure-danger-0.1.1.tgz",
+			"integrity": "sha512-lfza+qBdvVYtP7WvMTT+LfjBfuYsXZ4RxuBldsL8wJArGeCl3OZwUg+9bTo8v6kk/nY8memk5HxrCwWDSO24UA==",
 			"dev": true
 		},
-		"@octokit/plugin-paginate-rest": {
-			"version": "4.3.1",
-			"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-4.3.1.tgz",
-			"integrity": "sha512-h8KKxESmSFTcXX409CAxlaOYscEDvN2KGQRsLCGT1NSqRW+D6EXLVQ8vuHhFznS9MuH9QYw1GfsUN30bg8hjVA==",
+		"node_modules/@callstack/reassure-measure": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@callstack/reassure-measure/-/reassure-measure-0.3.1.tgz",
+			"integrity": "sha512-A7gdyA9nfm6TZt4bQs5bfgy9SOFn8FmMdOjPojSpmpSyECXRK/7aMqqBIuwPt4jgIFFDiEFsd5w88FgsE13CTQ==",
 			"dev": true,
-			"requires": {
-				"@octokit/types": "^7.5.0"
-			},
 			"dependencies": {
-				"@octokit/openapi-types": {
-					"version": "13.12.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.12.0.tgz",
-					"integrity": "sha512-1QYzZrwnn3rTQE7ZoSxXrO8lhu0aIbac1c+qIPOPEaVXBWSaUyLV1x9yt4uDQOwmu6u5ywVS8OJgs+ErDLf6vQ==",
-					"dev": true
-				},
-				"@octokit/types": {
-					"version": "7.5.0",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.5.0.tgz",
-					"integrity": "sha512-aHm+olfIZjQpzoODpl+RCZzchKOrdSLJs+yfI7pMMcmB19Li6vidgx0DwUDO/Ic4Q3fq/lOjJORVCcLZefcrJw==",
-					"dev": true,
-					"requires": {
-						"@octokit/openapi-types": "^13.11.0"
-					}
-				}
+				"mathjs": "^10.1.1"
+			},
+			"peerDependencies": {
+				"react": "*"
 			}
 		},
-		"@octokit/plugin-request-log": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
-			"integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-			"dev": true
-		},
-		"@octokit/plugin-rest-endpoint-methods": {
-			"version": "6.6.2",
-			"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.6.2.tgz",
-			"integrity": "sha512-n9dL5KMpz9qVFSNdcVWC8ZPbl68QbTk7+CMPXCXqaMZOLn1n1YuoSFFCy84Ge0fx333fUqpnBHv8BFjwGtUQkA==",
+		"node_modules/@colors/colors": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+			"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
 			"dev": true,
-			"requires": {
-				"@octokit/types": "^7.5.0",
-				"deprecation": "^2.3.1"
-			},
-			"dependencies": {
-				"@octokit/openapi-types": {
-					"version": "13.12.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-13.12.0.tgz",
-					"integrity": "sha512-1QYzZrwnn3rTQE7ZoSxXrO8lhu0aIbac1c+qIPOPEaVXBWSaUyLV1x9yt4uDQOwmu6u5ywVS8OJgs+ErDLf6vQ==",
-					"dev": true
-				},
-				"@octokit/types": {
-					"version": "7.5.0",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-7.5.0.tgz",
-					"integrity": "sha512-aHm+olfIZjQpzoODpl+RCZzchKOrdSLJs+yfI7pMMcmB19Li6vidgx0DwUDO/Ic4Q3fq/lOjJORVCcLZefcrJw==",
-					"dev": true,
-					"requires": {
-						"@octokit/openapi-types": "^13.11.0"
-					}
+			"engines": {
+				"node": ">=0.1.90"
+			}
+		},
+		"node_modules/@csstools/css-parser-algorithms": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz",
+			"integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
 				},
-				"deprecation": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-					"integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
-					"dev": true
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
 				}
+			],
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-tokenizer": "^3.0.1"
 			}
 		},
-		"@octokit/request": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/@octokit/request/-/request-4.1.0.tgz",
-			"integrity": "sha512-RvpQAba4i+BNH0z8i0gPRc1ShlHidj4puQjI/Tno6s+Q3/Mzb0XRSHJiOhpeFrZ22V7Mwjq1E7QS27P5CgpWYA==",
-			"dev": true,
-			"requires": {
-				"@octokit/endpoint": "^5.1.0",
-				"@octokit/request-error": "^1.0.1",
-				"deprecation": "^2.0.0",
-				"is-plain-object": "^3.0.0",
-				"node-fetch": "^2.3.0",
-				"once": "^1.4.0",
-				"universal-user-agent": "^2.1.0"
-			},
-			"dependencies": {
-				"@octokit/request-error": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-					"integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^2.0.0",
-						"deprecation": "^2.0.0",
-						"once": "^1.4.0"
-					}
-				},
-				"@octokit/types": {
-					"version": "2.16.2",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-					"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
-					"dev": true,
-					"requires": {
-						"@types/node": ">= 8"
-					}
+		"node_modules/@csstools/css-tokenizer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz",
+			"integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
 				},
-				"is-plain-object": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz",
-					"integrity": "sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==",
-					"dev": true,
-					"requires": {
-						"isobject": "^4.0.0"
-					}
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@csstools/media-query-list-parser": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
+			"integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
 				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.1",
+				"@csstools/css-tokenizer": "^3.0.1"
+			}
+		},
+		"node_modules/@csstools/selector-specificity": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz",
+			"integrity": "sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
 				},
-				"node-fetch": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-					"integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
-					"dev": true
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
 				}
+			],
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"postcss-selector-parser": "^6.1.0"
 			}
 		},
-		"@octokit/request-error": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.1.0.tgz",
-			"integrity": "sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==",
+		"node_modules/@dabh/diagnostics": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz",
+			"integrity": "sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==",
 			"dev": true,
-			"requires": {
-				"@octokit/types": "^6.0.3",
-				"deprecation": "^2.0.0",
-				"once": "^1.4.0"
+			"dependencies": {
+				"colorspace": "1.1.x",
+				"enabled": "2.0.x",
+				"kuler": "^2.0.0"
 			}
 		},
-		"@octokit/rest": {
-			"version": "16.26.0",
-			"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.26.0.tgz",
-			"integrity": "sha512-NBpzre44ZAQWZhlH+zUYTgqI0pHN+c9rNj4d+pCydGEiKTGc1HKmoTghEUyr9GxazDyoAvmpx9nL0I7QS1Olvg==",
-			"dev": true,
-			"requires": {
-				"@octokit/request": "^4.0.1",
-				"@octokit/request-error": "^1.0.2",
-				"atob-lite": "^2.0.0",
-				"before-after-hook": "^1.4.0",
-				"btoa-lite": "^1.0.0",
-				"deprecation": "^2.0.0",
-				"lodash.get": "^4.4.2",
-				"lodash.set": "^4.3.2",
-				"lodash.uniq": "^4.5.0",
-				"octokit-pagination-methods": "^1.1.0",
-				"once": "^1.4.0",
-				"universal-user-agent": "^2.0.0",
-				"url-template": "^2.0.8"
+		"node_modules/@discoveryjs/json-ext": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+			"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/@dual-bundle/import-meta-resolve": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+			"integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/@egjs/hammerjs": {
+			"version": "2.0.17",
+			"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+			"integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+			"dependencies": {
+				"@types/hammerjs": "^2.0.36"
 			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/@emotion/babel-plugin": {
+			"version": "11.11.0",
+			"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+			"integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
 			"dependencies": {
-				"@octokit/request-error": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
-					"integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^2.0.0",
-						"deprecation": "^2.0.0",
-						"once": "^1.4.0"
-					}
-				},
-				"@octokit/types": {
-					"version": "2.16.2",
-					"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
-					"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
-					"dev": true,
-					"requires": {
-						"@types/node": ">= 8"
-					}
+				"@babel/helper-module-imports": "^7.16.7",
+				"@babel/runtime": "^7.18.3",
+				"@emotion/hash": "^0.9.1",
+				"@emotion/memoize": "^0.8.1",
+				"@emotion/serialize": "^1.1.2",
+				"babel-plugin-macros": "^3.1.0",
+				"convert-source-map": "^1.5.0",
+				"escape-string-regexp": "^4.0.0",
+				"find-root": "^1.1.0",
+				"source-map": "^0.5.7",
+				"stylis": "4.2.0"
+			}
+		},
+		"node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+		},
+		"node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@emotion/babel-plugin/node_modules/source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/@emotion/babel-plugin/node_modules/stylis": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+			"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+		},
+		"node_modules/@emotion/cache": {
+			"version": "11.7.1",
+			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+			"integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+			"dependencies": {
+				"@emotion/memoize": "^0.7.4",
+				"@emotion/sheet": "^1.1.0",
+				"@emotion/utils": "^1.0.0",
+				"@emotion/weak-memoize": "^0.2.5",
+				"stylis": "4.0.13"
+			}
+		},
+		"node_modules/@emotion/css": {
+			"version": "11.7.1",
+			"resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.7.1.tgz",
+			"integrity": "sha512-RUUgPlMZunlc7SE5A6Hg+VWRzb2cU6O9xlV78KCFgcnl25s7Qz/20oQg71iKudpLqk7xj0vhbJlwcJJMT0BOZg==",
+			"dependencies": {
+				"@emotion/babel-plugin": "^11.7.1",
+				"@emotion/cache": "^11.7.1",
+				"@emotion/serialize": "^1.0.0",
+				"@emotion/sheet": "^1.0.3",
+				"@emotion/utils": "^1.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
 				}
 			}
 		},
-		"@octokit/types": {
-			"version": "6.34.0",
-			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-			"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
+		"node_modules/@emotion/css-prettifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@emotion/css-prettifier/-/css-prettifier-1.0.1.tgz",
+			"integrity": "sha512-cA9Dtol47mtvWKasPC+8tkh2DS0wBkX0MMHKieXGSkGyx079V7yFY85KC0pPalcIy+vi0LbMR9DNyiJBqYgJ1Q==",
 			"dev": true,
-			"requires": {
-				"@octokit/openapi-types": "^11.2.0"
+			"dependencies": {
+				"@emotion/memoize": "^0.7.4",
+				"stylis": "4.0.13"
 			}
 		},
-		"@octokit/webhooks": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/@octokit/webhooks/-/webhooks-7.1.0.tgz",
-			"integrity": "sha512-kHyYkJkqY/wiP/hp0IT9FhkY5PhnV01co16V2YMRP/Zgnk3Vsy3U5iLAaP6U/0eRIlz5T4LSvkrcfNlfSb3cVQ==",
+		"node_modules/@emotion/hash": {
+			"version": "0.9.1",
+			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+			"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+		},
+		"node_modules/@emotion/jest": {
+			"version": "11.7.1",
+			"resolved": "https://registry.npmjs.org/@emotion/jest/-/jest-11.7.1.tgz",
+			"integrity": "sha512-IYKyiIm4a7LINESYTa6aAizRj6YTwIvpD9s9yDzkrOEJXKwCqWWOTVNNOJKBygim3fv4lC9KM5jG5qzHvy4ZJg==",
 			"dev": true,
-			"requires": {
-				"debug": "^4.0.0"
-			},
 			"dependencies": {
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
+				"@babel/runtime": "^7.13.10",
+				"@emotion/css-prettifier": "^1.0.1",
+				"chalk": "^4.1.0",
+				"specificity": "^0.4.1",
+				"stylis": "4.0.13"
+			},
+			"peerDependencies": {
+				"@types/jest": "^26.0.14 || ^27.0.0",
+				"enzyme-to-json": "^3.2.1"
+			},
+			"peerDependenciesMeta": {
+				"@types/jest": {
+					"optional": true
 				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
+				"enzyme-to-json": {
+					"optional": true
 				}
 			}
 		},
-		"@octokit/webhooks-types": {
-			"version": "5.6.0",
-			"resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-5.6.0.tgz",
-			"integrity": "sha512-y3MqE6N6Ksg1+YV0sXVpW2WP7Y24h7rUp2hDJuzoqWdKGr7owmRDyHC72INwfCYNzura/vsNPXvc6Xbfp4wGGw==",
-			"dev": true
+		"node_modules/@emotion/memoize": {
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+			"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
 		},
-		"@parcel/watcher": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
-			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
+		"node_modules/@emotion/native": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/native/-/native-11.0.0.tgz",
+			"integrity": "sha512-IByi+OfagLtcQsXZMkS06ztcNMZePg6dqwzM4FIkXjN4PhoeJ/jTDRICT3pTIk3ChuurX2oF8fmE+0bfvYi/SA==",
 			"dev": true,
-			"requires": {
-				"node-addon-api": "^3.2.1",
-				"node-gyp-build": "^4.3.0"
+			"dependencies": {
+				"@emotion/primitives-core": "^11.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0",
+				"react-native": ">=0.14.0 <1"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
+				}
 			}
 		},
-		"@playwright/test": {
-			"version": "1.27.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.27.1.tgz",
-			"integrity": "sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==",
+		"node_modules/@emotion/primitives-core": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/@emotion/primitives-core/-/primitives-core-11.0.0.tgz",
+			"integrity": "sha512-4zpfUV7hz9A+j7Hcyiend3LEtRogDXDtMzQy8LOoU39Mw5ntgvTlYQSPbQSzs98BJty/F9Ybyg3pBzFDdMpmDg==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*",
-				"playwright-core": "1.27.1"
-			},
 			"dependencies": {
-				"playwright-core": {
-					"version": "1.27.1",
-					"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
-					"integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
-					"dev": true
-				}
+				"css-to-react-native": "^3.0.0"
+			},
+			"peerDependencies": {
+				"@emotion/react": "^11.0.0-rc.0",
+				"react": ">=16.8.0"
 			}
 		},
-		"@pmmmwh/react-refresh-webpack-plugin": {
-			"version": "0.5.2",
-			"resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.2.tgz",
-			"integrity": "sha512-BWOG6opI9+L5HjQIj6znFLwVXkjDS98PKfRDlbPFvinTz4wQ7ZSXxV0lLOfRW12HXcqk4DEzrphjRMJFXuihNg==",
+		"node_modules/@emotion/primitives-core/node_modules/css-to-react-native": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+			"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
 			"dev": true,
-			"requires": {
-				"ansi-html-community": "^0.0.8",
-				"common-path-prefix": "^3.0.0",
-				"core-js-pure": "^3.8.1",
-				"error-stack-parser": "^2.0.6",
-				"find-up": "^5.0.0",
-				"html-entities": "^2.1.0",
-				"loader-utils": "^2.0.0",
-				"schema-utils": "^3.0.0",
-				"source-map": "^0.7.3"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"ansi-html-community": {
-					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-					"integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"html-entities": {
-					"version": "2.3.2",
-					"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
-					"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
-					"dev": true
-				},
-				"locate-path": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^5.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^3.0.2"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"source-map": {
-					"version": "0.7.3",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-					"dev": true
-				}
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^4.0.2"
 			}
 		},
-		"@polka/url": {
-			"version": "1.0.0-next.15",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
-			"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
+		"node_modules/@emotion/primitives-core/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
-		"@popperjs/core": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz",
-			"integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
+		"node_modules/@emotion/react": {
+			"version": "11.7.1",
+			"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+			"integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@emotion/cache": "^11.7.1",
+				"@emotion/serialize": "^1.0.2",
+				"@emotion/sheet": "^1.1.0",
+				"@emotion/utils": "^1.0.0",
+				"@emotion/weak-memoize": "^0.2.5",
+				"hoist-non-react-statics": "^3.3.1"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0",
+				"react": ">=16.8.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
+				},
+				"@types/react": {
+					"optional": true
+				}
+			}
 		},
-		"@reach/router": {
-			"version": "1.3.4",
-			"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.4.tgz",
-			"integrity": "sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==",
-			"dev": true,
-			"requires": {
-				"create-react-context": "0.3.0",
-				"invariant": "^2.2.3",
-				"prop-types": "^15.6.1",
-				"react-lifecycles-compat": "^3.0.4"
+		"node_modules/@emotion/serialize": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+			"integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+			"dependencies": {
+				"@emotion/hash": "^0.9.1",
+				"@emotion/memoize": "^0.8.1",
+				"@emotion/unitless": "^0.8.1",
+				"@emotion/utils": "^1.2.1",
+				"csstype": "^3.0.2"
 			}
 		},
-		"@react-native-clipboard/clipboard": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.9.0.tgz",
-			"integrity": "sha512-O/ohFq1CAQLfoNc376Z3W6gvVcCJlje5AVk0JhsI8Q40hn+NXAWCnOM1bEePfC0uDMtp0/RCK6FotUvkQ6c4Zw=="
+		"node_modules/@emotion/serialize/node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
 		},
-		"@react-native-community/blur": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/blur/-/blur-3.6.0.tgz",
-			"integrity": "sha512-GtDBhpX2pQcjl4VopOC8FktrVufrEfYRwVeMQ2WWckqKIv2BdwvlvWvj88L1WmEdBr9UNcm3rtgz+d+YXkmirA==",
-			"requires": {
-				"prop-types": "^15.5.10"
-			}
+		"node_modules/@emotion/sheet": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+			"integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
 		},
-		"@react-native-community/cli": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-6.3.1.tgz",
-			"integrity": "sha512-UQ77AkGvPzdwJt6qhYXUyDMP1v2rdCcIlrhU48FOcAhGX+N/LCL9Cp/Ic6CkiiSHJdktbgiEEJ2srprXH8nzVg==",
-			"requires": {
-				"@react-native-community/cli-debugger-ui": "^6.0.0-rc.0",
-				"@react-native-community/cli-hermes": "^6.3.0",
-				"@react-native-community/cli-plugin-metro": "^6.2.0",
-				"@react-native-community/cli-server-api": "^6.2.0",
-				"@react-native-community/cli-tools": "^6.2.0",
-				"@react-native-community/cli-types": "^6.0.0",
-				"appdirsjs": "^1.2.4",
-				"chalk": "^4.1.2",
-				"command-exists": "^1.2.8",
-				"commander": "^2.19.0",
-				"cosmiconfig": "^5.1.0",
-				"deepmerge": "^3.2.0",
-				"envinfo": "^7.7.2",
-				"execa": "^1.0.0",
-				"find-up": "^4.1.0",
-				"fs-extra": "^8.1.0",
-				"glob": "^7.1.3",
-				"graceful-fs": "^4.1.3",
-				"joi": "^17.2.1",
-				"leven": "^3.1.0",
-				"lodash": "^4.17.15",
-				"minimist": "^1.2.0",
-				"node-stream-zip": "^1.9.1",
-				"ora": "^3.4.0",
-				"pretty-format": "^26.6.2",
-				"prompts": "^2.4.0",
-				"semver": "^6.3.0",
-				"serve-static": "^1.13.1",
-				"strip-ansi": "^5.2.0",
-				"sudo-prompt": "^9.0.0",
-				"wcwidth": "^1.0.1"
-			},
+		"node_modules/@emotion/styled": {
+			"version": "11.6.0",
+			"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+			"integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"commander": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-				},
-				"cosmiconfig": {
-					"version": "5.2.1",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-					"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-					"requires": {
-						"import-fresh": "^2.0.0",
-						"is-directory": "^0.3.1",
-						"js-yaml": "^3.13.1",
-						"parse-json": "^4.0.0"
-					}
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-						}
-					}
-				},
-				"deepmerge": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
-					"integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
-				},
-				"envinfo": {
-					"version": "7.8.1",
-					"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-					"integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw=="
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-					"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"import-fresh": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-					"integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-					"requires": {
-						"caller-path": "^2.0.0",
-						"resolve-from": "^3.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"ora": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
-					"integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
-					"requires": {
-						"chalk": "^2.4.2",
-						"cli-cursor": "^2.1.0",
-						"cli-spinners": "^2.0.0",
-						"log-symbols": "^2.2.0",
-						"strip-ansi": "^5.2.0",
-						"wcwidth": "^1.0.1"
-					},
-					"dependencies": {
-						"ansi-styles": {
-							"version": "3.2.1",
-							"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-							"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-							"requires": {
-								"color-convert": "^1.9.0"
-							}
-						},
-						"chalk": {
-							"version": "2.4.2",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-							"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-							"requires": {
-								"ansi-styles": "^3.2.1",
-								"escape-string-regexp": "^1.0.5",
-								"supports-color": "^5.3.0"
-							}
-						},
-						"color-convert": {
-							"version": "1.9.3",
-							"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-							"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-							"requires": {
-								"color-name": "1.1.3"
-							}
-						},
-						"color-name": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-							"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-						},
-						"has-flag": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-							"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-						},
-						"supports-color": {
-							"version": "5.5.0",
-							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-							"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-							"requires": {
-								"has-flag": "^3.0.0"
-							}
-						}
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"parse-json": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-					"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-					"requires": {
-						"error-ex": "^1.3.1",
-						"json-parse-better-errors": "^1.0.1"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-				},
-				"prompts": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-					"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-					"requires": {
-						"kleur": "^3.0.3",
-						"sisteransi": "^1.0.5"
-					}
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				},
-				"sisteransi": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-					"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
+				"@babel/runtime": "^7.13.10",
+				"@emotion/babel-plugin": "^11.3.0",
+				"@emotion/is-prop-valid": "^1.1.1",
+				"@emotion/serialize": "^1.0.2",
+				"@emotion/utils": "^1.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0",
+				"@emotion/react": "^11.0.0-rc.0",
+				"react": ">=16.8.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
 				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"@react-native-community/cli-debugger-ui": {
-			"version": "6.0.0-rc.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-6.0.0-rc.0.tgz",
-			"integrity": "sha512-achYcPPoWa9D02C5tn6TBzjeY443wQTyx37urptc75JpZ7gR5YHsDyIEEWa3DDYp1va9zx/iGg+uZ/hWw07GAw==",
-			"requires": {
-				"serve-static": "^1.13.1"
-			}
-		},
-		"@react-native-community/cli-hermes": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-hermes/-/cli-hermes-6.3.0.tgz",
-			"integrity": "sha512-Uhbm9bubyZLZ12vFCIfWbE/Qi3SBTbYIN/TC08EudTLhv/KbPomCQnmFsnJ7AXQFuOZJs73mBxoEAYSbRbwyVA==",
-			"requires": {
-				"@react-native-community/cli-platform-android": "^6.3.0",
-				"@react-native-community/cli-tools": "^6.2.0",
-				"chalk": "^4.1.2",
-				"hermes-profile-transformer": "^0.0.6",
-				"ip": "^1.1.5"
-			},
+		"node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+			"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
 			"dependencies": {
-				"@react-native-community/cli-platform-android": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-6.3.0.tgz",
-					"integrity": "sha512-d5ufyYcvrZoHznYm5bjBXaiHIJv552t5gYtQpnUsxBhHSQ8QlaNmlLUyeSPRDfOw4ND9b0tPHqs4ufwx6vp/fQ==",
-					"requires": {
-						"@react-native-community/cli-tools": "^6.2.0",
-						"chalk": "^4.1.2",
-						"execa": "^1.0.0",
-						"fs-extra": "^8.1.0",
-						"glob": "^7.1.3",
-						"jetifier": "^1.6.2",
-						"lodash": "^4.17.15",
-						"logkitty": "^0.7.1",
-						"slash": "^3.0.0",
-						"xmldoc": "^1.1.2"
-					}
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					}
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-					"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"@emotion/memoize": "^0.8.1"
 			}
 		},
-		"@react-native-community/cli-platform-android": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-6.2.0.tgz",
-			"integrity": "sha512-QLxwClcbxVhuIGsQiIpqRnoJzRdpN2B+y/Yt2OGgDHXGbuOXulgt4D+8AhvZXrB4jyAcEUlFg/048v3RGQQudw==",
-			"requires": {
-				"@react-native-community/cli-tools": "^6.2.0",
-				"chalk": "^4.1.2",
-				"execa": "^1.0.0",
-				"fs-extra": "^8.1.0",
-				"glob": "^7.1.3",
-				"jetifier": "^1.6.2",
-				"lodash": "^4.17.15",
-				"logkitty": "^0.7.1",
-				"slash": "^3.0.0",
-				"xmldoc": "^1.1.2"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					}
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-					"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+		"node_modules/@emotion/styled/node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+		},
+		"node_modules/@emotion/unitless": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+			"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+		},
+		"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+			"integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+			"dev": true,
+			"peerDependencies": {
+				"react": ">=16.8.0"
 			}
 		},
-		"@react-native-community/cli-platform-ios": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-6.2.0.tgz",
-			"integrity": "sha512-k15MhExxLiLDDZOeuPgvTxbp0CsoLQQpk2Du0HjZDePqqWcKJylQqMZru1o8HuQHPcEr+b71HIs5V+lKyFYpfg==",
-			"requires": {
-				"@react-native-community/cli-tools": "^6.2.0",
-				"chalk": "^4.1.2",
-				"glob": "^7.1.3",
-				"js-yaml": "^3.13.1",
-				"lodash": "^4.17.15",
-				"ora": "^3.4.0",
-				"plist": "^3.0.2",
-				"xcode": "^2.0.0"
-			},
+		"node_modules/@emotion/utils": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+			"integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+		},
+		"node_modules/@emotion/weak-memoize": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+			"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+		},
+		"node_modules/@es-joy/jsdoccomment": {
+			"version": "0.40.1",
+			"resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.40.1.tgz",
+			"integrity": "sha512-YORCdZSusAlBrFpZ77pJjc5r1bQs5caPWtAu+WWmiSo+8XaUzseapVrfAtiRFbQWnrBxxLLEwF6f6ZG/UgCQCg==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"ora": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
-					"integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
-					"requires": {
-						"chalk": "^2.4.2",
-						"cli-cursor": "^2.1.0",
-						"cli-spinners": "^2.0.0",
-						"log-symbols": "^2.2.0",
-						"strip-ansi": "^5.2.0",
-						"wcwidth": "^1.0.1"
-					},
-					"dependencies": {
-						"ansi-styles": {
-							"version": "3.2.1",
-							"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-							"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-							"requires": {
-								"color-convert": "^1.9.0"
-							}
-						},
-						"chalk": {
-							"version": "2.4.2",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-							"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-							"requires": {
-								"ansi-styles": "^3.2.1",
-								"escape-string-regexp": "^1.0.5",
-								"supports-color": "^5.3.0"
-							}
-						},
-						"color-convert": {
-							"version": "1.9.3",
-							"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-							"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-							"requires": {
-								"color-name": "1.1.3"
-							}
-						},
-						"color-name": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-							"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-						},
-						"has-flag": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-							"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
-						},
-						"supports-color": {
-							"version": "5.5.0",
-							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-							"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-							"requires": {
-								"has-flag": "^3.0.0"
-							}
-						}
-					}
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"comment-parser": "1.4.0",
+				"esquery": "^1.5.0",
+				"jsdoc-type-pratt-parser": "~4.0.0"
+			},
+			"engines": {
+				"node": ">=16"
 			}
 		},
-		"@react-native-community/cli-plugin-metro": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-6.2.0.tgz",
-			"integrity": "sha512-JfmzuFNzOr+dFTUQJo1rV0t87XAqgHRTMYXNleQVt8otOVCk1FSCgKlgqMdvQc/FCx2ZjoMWEEV/g0LrPI8Etw==",
-			"requires": {
-				"@react-native-community/cli-server-api": "^6.2.0",
-				"@react-native-community/cli-tools": "^6.2.0",
-				"chalk": "^4.1.2",
-				"metro": "^0.66.1",
-				"metro-config": "^0.66.1",
-				"metro-core": "^0.66.1",
-				"metro-react-native-babel-transformer": "^0.66.1",
-				"metro-resolver": "^0.66.1",
-				"metro-runtime": "^0.66.1",
-				"readline": "^1.3.0"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+			"integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-native-community/cli-server-api": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-6.2.0.tgz",
-			"integrity": "sha512-OnbnYclhoDpjge33QO5Slhfn0DsmLzzAgyrSCnb24HhSqwq7ObjMHaLpoEhpajzLG71wq5oKh0APEQjiL4Mknw==",
-			"requires": {
-				"@react-native-community/cli-debugger-ui": "^6.0.0-rc.0",
-				"@react-native-community/cli-tools": "^6.2.0",
-				"compression": "^1.7.1",
-				"connect": "^3.6.5",
-				"errorhandler": "^1.5.0",
-				"nocache": "^2.1.0",
-				"pretty-format": "^26.6.2",
-				"serve-static": "^1.13.1",
-				"ws": "^1.1.0"
-			},
-			"dependencies": {
-				"ws": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
-					"integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
-					"requires": {
-						"options": ">=0.0.5",
-						"ultron": "1.0.x"
-					}
-				}
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+			"integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-native-community/cli-tools": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-6.2.1.tgz",
-			"integrity": "sha512-7RbOkZLT/3YG8CAYYM70ajRKIOgVxK/b4t9KNsPq+2uen99MGezfeglC8s1cs3vBNVVxCo0a2JbXg18bUd8eqA==",
-			"requires": {
-				"appdirsjs": "^1.2.4",
-				"chalk": "^4.1.2",
-				"lodash": "^4.17.15",
-				"mime": "^2.4.1",
-				"node-fetch": "^2.6.0",
-				"open": "^6.2.0",
-				"semver": "^6.3.0",
-				"shell-quote": "^1.7.3"
-			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"mime": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg=="
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+			"integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-native-community/cli-types": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-6.0.0.tgz",
-			"integrity": "sha512-K493Fk2DMJC0ZM8s8gnfseKxGasIhuDaCUDeLZcoCSFlrjKEuEs1BKKEJiev0CARhKEXKOyyp/uqYM9nWhisNw==",
-			"requires": {
-				"ora": "^3.4.0"
-			},
-			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"ora": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz",
-					"integrity": "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg==",
-					"requires": {
-						"chalk": "^2.4.2",
-						"cli-cursor": "^2.1.0",
-						"cli-spinners": "^2.0.0",
-						"log-symbols": "^2.2.0",
-						"strip-ansi": "^5.2.0",
-						"wcwidth": "^1.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
-				}
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+			"integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-native-community/slider": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-3/react-native-community-slider-3.0.2-wp-3.tgz",
-			"integrity": "sha512-Ye+9z1udSI0uLOrc0+sSueaFJZSWmv6yEq3Ujxm+ShvBje8JxQrKPbH3UYCdEjNCnrY1Zi6lT/8e98dQn/7BNA=="
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+			"integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-native-masked-view/masked-view": {
-			"version": "0.2.6",
-			"resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.2.6.tgz",
-			"integrity": "sha512-303CxmetUmgiX9NSUxatZkNh9qTYYdiM8xkGf9I3Uj20U3eGY3M78ljeNQ4UVCJA+FNGS5nC1dtS9GjIqvB4dg=="
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+			"integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-native/assets": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",
-			"integrity": "sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ=="
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+			"integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-native/normalize-color": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-1.0.0.tgz",
-			"integrity": "sha512-xUNRvNmCl3UGCPbbHvfyFMnpvLPoOjDCcp5bT9m2k+TF/ZBklEQwhPZlkrxRx2NhgFh1X3a5uL7mJ7ZR+8G7Qg=="
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+			"integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-native/polyfills": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz",
-			"integrity": "sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ=="
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+			"integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-navigation/core": {
-			"version": "5.12.0",
-			"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.12.0.tgz",
-			"integrity": "sha512-CTmYrFXCZwInN40CpEzkPxhrpzujj20qvsUgpH05+oO1flwsnaJsyBfYawIcTS62/1/Z6SAM7iW5PbKk+qw9iQ==",
-			"requires": {
-				"@react-navigation/routers": "^5.4.9",
-				"escape-string-regexp": "^4.0.0",
-				"nanoid": "^3.1.9",
-				"query-string": "^6.13.1",
-				"react-is": "^16.13.0",
-				"use-subscription": "^1.4.0"
-			},
-			"dependencies": {
-				"escape-string-regexp": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-					"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
-				},
-				"react-is": {
-					"version": "16.13.1",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-					"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-				}
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+			"integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-navigation/native": {
-			"version": "5.7.0",
-			"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.7.0.tgz",
-			"integrity": "sha512-a2JBOdRB3q20Jdc5hF8shR4Dk+ZmjF2Rr9RviErtARztu08lU+jcb1gK6c31OKL37JDuaS3xexE9Cb7dYeMy3Q==",
-			"requires": {
-				"@react-navigation/core": "^5.12.0",
-				"nanoid": "^3.1.9"
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+			"integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-navigation/routers": {
-			"version": "5.4.9",
-			"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.9.tgz",
-			"integrity": "sha512-dYD5qrIKUmuBEp+O98hB0tDYpEsGQgCQFQgMEoFKBmVVhx2JnJJ1zxRjU7xWcCU4VdBA8IOowgHQHJsVNKYyrg==",
-			"requires": {
-				"nanoid": "^3.1.9"
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+			"integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-navigation/stack": {
-			"version": "5.6.2",
-			"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.6.2.tgz",
-			"integrity": "sha512-51Aasxg8j2eKxz4mhA0ajJXrhAyJQkk2iiNE511zcqJ3tlfxv/h70Eej3PetnbbHFMOwNsEwc2GjB3OnfQcxjQ==",
-			"requires": {
-				"color": "^3.1.2",
-				"react-native-iphone-x-helper": "^1.2.1"
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+			"integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-spring/animated": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.5.tgz",
-			"integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==",
-			"requires": {
-				"@react-spring/shared": "~9.5.5",
-				"@react-spring/types": "~9.5.5"
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+			"integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-spring/core": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.5.tgz",
-			"integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==",
-			"requires": {
-				"@react-spring/animated": "~9.5.5",
-				"@react-spring/rafz": "~9.5.5",
-				"@react-spring/shared": "~9.5.5",
-				"@react-spring/types": "~9.5.5"
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+			"integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-spring/rafz": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.5.tgz",
-			"integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw=="
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+			"integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-spring/shared": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.5.tgz",
-			"integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==",
-			"requires": {
-				"@react-spring/rafz": "~9.5.5",
-				"@react-spring/types": "~9.5.5"
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+			"integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@react-spring/types": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.5.tgz",
-			"integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg=="
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+			"integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@react-spring/web": {
-			"version": "9.5.5",
-			"resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.5.tgz",
-			"integrity": "sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==",
-			"requires": {
-				"@react-spring/animated": "~9.5.5",
-				"@react-spring/core": "~9.5.5",
-				"@react-spring/shared": "~9.5.5",
-				"@react-spring/types": "~9.5.5"
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+			"integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@samverschueren/stream-to-observable": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
-			"integrity": "sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==",
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+			"integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+			"cpu": [
+				"arm64"
+			],
 			"dev": true,
-			"requires": {
-				"any-observable": "^0.3.0"
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@sideway/formula": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.0.tgz",
-			"integrity": "sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg=="
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+			"integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@sideway/pinpoint": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
-			"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+			"integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"@sinclair/typebox": {
-			"version": "0.23.5",
-			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.23.5.tgz",
-			"integrity": "sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==",
-			"dev": true
+		"node_modules/@eslint-community/eslint-utils": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+			"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+			"dependencies": {
+				"eslint-visitor-keys": "^3.3.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"peerDependencies": {
+				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+			}
 		},
-		"@sindresorhus/is": {
-			"version": "4.6.0",
-			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
-			"integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
-			"dev": true
+		"node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
 		},
-		"@sinonjs/commons": {
-			"version": "1.8.3",
-			"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
-			"integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
-			"dev": true,
-			"requires": {
-				"type-detect": "4.0.8"
+		"node_modules/@eslint-community/regexpp": {
+			"version": "4.8.0",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.8.0.tgz",
+			"integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==",
+			"engines": {
+				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
 		},
-		"@sinonjs/fake-timers": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
-			"integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
-			"dev": true,
-			"requires": {
-				"@sinonjs/commons": "^1.7.0"
-			}
-		},
-		"@storybook/addon-a11y": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.7.tgz",
-			"integrity": "sha512-twez2iAnAZH3WTDCN7C7WNbhXP5JJNoev5umjNmmvjirihJH9sLgw35i6sqr1QKc3d0kn6cULw5RU9wDiU+7Bg==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.7",
-				"axe-core": "^4.2.0",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"react-sizeme": "^3.0.1",
-				"regenerator-runtime": "^0.13.7",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@eslint/eslintrc": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.4.tgz",
+			"integrity": "sha512-h8Vx6MdxwWI2WM8/zREHMoqdgLNXEL4QX3MWSVMdyNJGvXVOs+6lp+m2hc3FnuMHDc4poxFNI20vCk0OmI4G0Q==",
+			"dependencies": {
+				"ajv": "^6.12.4",
+				"debug": "^4.3.2",
+				"espree": "^9.0.0",
+				"globals": "^13.9.0",
+				"ignore": "^4.0.6",
+				"import-fresh": "^3.2.1",
+				"js-yaml": "^4.1.0",
+				"minimatch": "^3.0.4",
+				"strip-json-comments": "^3.1.1"
 			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				}
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"@storybook/addon-actions": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.7.tgz",
-			"integrity": "sha512-gTkPr2FYX+vySZKEg5Wq7uHPkVUq3hJ7ZKvGls+/xjgaTwfu3iIly53FEFUl8A6kMQ+4gtTC+YRr3cSJgXMbAg==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"polished": "^4.2.2",
-				"prop-types": "^15.7.2",
-				"react-inspector": "^5.1.0",
-				"regenerator-runtime": "^0.13.7",
-				"telejson": "^6.0.8",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"uuid-browser": "^3.1.0"
+		"node_modules/@eslint/eslintrc/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/@eslint/eslintrc/node_modules/ignore": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+			"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
 			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@fal-works/esbuild-plugin-global-externals": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz",
+			"integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
+			"dev": true
+		},
+		"node_modules/@fastify/busboy": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+			"integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
+			"integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
 			"dependencies": {
-				"@babel/runtime": {
-					"version": "7.18.3",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz",
-					"integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
-					"dev": true,
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				},
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"polished": {
-					"version": "4.2.2",
-					"resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
-					"integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.17.8"
-					}
+				"@floating-ui/utils": "^0.1.1"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+			"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+			"dependencies": {
+				"@floating-ui/core": "^1.0.0",
+				"@floating-ui/utils": "^0.2.0"
+			}
+		},
+		"node_modules/@floating-ui/dom/node_modules/@floating-ui/utils": {
+			"version": "0.2.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+			"license": "MIT"
+		},
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+			"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+			"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+		},
+		"node_modules/@geometricpanda/storybook-addon-badges": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@geometricpanda/storybook-addon-badges/-/storybook-addon-badges-2.0.1.tgz",
+			"integrity": "sha512-dCEK/xJewuFe1d+ndF0hQIAJRnUsV9q5kuDmp7zvO7fTd7cDz0X9Bjz0lNRn6n4Z9bL9/iFHKzJESDHFfs4ihQ==",
+			"dev": true,
+			"peerDependencies": {
+				"@storybook/blocks": "^7.0.0",
+				"@storybook/components": "^7.0.0",
+				"@storybook/core-events": "^7.0.0",
+				"@storybook/manager-api": "^7.0.0",
+				"@storybook/preview-api": "^7.0.0",
+				"@storybook/theming": "^7.0.0",
+				"@storybook/types": "^7.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"react": {
+					"optional": true
 				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
+				"react-dom": {
+					"optional": true
 				}
 			}
 		},
-		"@storybook/addon-controls": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.7.tgz",
-			"integrity": "sha512-1JGphHk1gcLLpkft/D5BkygXwelSdWQqvXnfFc62BVqvzxv8hCF4zuUosKLWMlB/nzVbd6W4oEDV/Mqmt6h/7w==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/store": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"lodash": "^4.17.21",
-				"ts-dedent": "^2.0.0"
+		"node_modules/@hapi/hoek": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+			"integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+		},
+		"node_modules/@hapi/topo": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+			"integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+			"dependencies": {
+				"@hapi/hoek": "^9.0.0"
+			}
+		},
+		"node_modules/@humanwhocodes/config-array": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.6.0.tgz",
+			"integrity": "sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==",
+			"dependencies": {
+				"@humanwhocodes/object-schema": "^1.2.0",
+				"debug": "^4.1.1",
+				"minimatch": "^3.0.4"
 			},
+			"engines": {
+				"node": ">=10.10.0"
+			}
+		},
+		"node_modules/@humanwhocodes/object-schema": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+		},
+		"node_modules/@hutson/parse-repository-url": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz",
+			"integrity": "sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@isaacs/cliui": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+			"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+			"dev": true,
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				}
+				"string-width": "^5.1.2",
+				"string-width-cjs": "npm:string-width@^4.2.0",
+				"strip-ansi": "^7.0.1",
+				"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+				"wrap-ansi": "^8.1.0",
+				"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@storybook/addon-docs": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.7.tgz",
-			"integrity": "sha512-RghRpimJOJl9c/H6qvCCD0zHLETBIVWXsdYJF8GiY6iTKd+tgQYizuuoBT4f3PAMEMHVhmvWSjkkFLxKxzQLjQ==",
-			"dev": true,
-			"requires": {
-				"@babel/plugin-transform-react-jsx": "^7.12.12",
-				"@babel/preset-env": "^7.12.11",
-				"@jest/transform": "^26.6.2",
-				"@mdx-js/react": "^1.6.22",
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.7",
-				"@storybook/mdx1-csf": "^0.0.1",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/postinstall": "6.5.7",
-				"@storybook/preview-web": "6.5.7",
-				"@storybook/source-loader": "6.5.7",
-				"@storybook/store": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"babel-loader": "^8.0.0",
-				"core-js": "^3.8.2",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"regenerator-runtime": "^0.13.7",
-				"remark-external-links": "^8.0.0",
-				"remark-slug": "^6.0.0",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+			"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
 			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+			"dev": true
+		},
+		"node_modules/@isaacs/cliui/node_modules/string-width": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+			"dev": true,
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				}
+				"eastasianwidth": "^0.2.0",
+				"emoji-regex": "^9.2.2",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@storybook/addon-knobs": {
-			"version": "6.2.9",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-6.2.9.tgz",
-			"integrity": "sha512-ic3xXy9uWPfIGP4x3VuGnrUmg/Jn9rHKIqZMhRcC7mFDRVlgbekvQxaruC6VY9LW6o8jV/miReSZkJf7M8o0aQ==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.2.9",
-				"@storybook/api": "6.2.9",
-				"@storybook/channels": "6.2.9",
-				"@storybook/client-api": "6.2.9",
-				"@storybook/components": "6.2.9",
-				"@storybook/core-events": "6.2.9",
-				"@storybook/theming": "6.2.9",
-				"copy-to-clipboard": "^3.3.1",
-				"core-js": "^3.8.2",
-				"escape-html": "^1.0.3",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.20",
-				"prop-types": "^15.7.2",
-				"qs": "^6.10.0",
-				"react-colorful": "^5.0.1",
-				"react-lifecycles-compat": "^3.0.4",
-				"react-select": "^3.2.0",
-				"regenerator-runtime": "^0.13.7"
+		"node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
 			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+			"dev": true,
 			"dependencies": {
-				"@emotion/is-prop-valid": {
-					"version": "0.8.8",
-					"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-					"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-					"dev": true,
-					"requires": {
-						"@emotion/memoize": "0.7.4"
-					}
-				},
-				"@emotion/memoize": {
-					"version": "0.7.4",
-					"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-					"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-					"dev": true
-				},
-				"@emotion/styled": {
-					"version": "10.0.27",
-					"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
-					"integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-					"dev": true,
-					"requires": {
-						"@emotion/styled-base": "^10.0.27",
-						"babel-plugin-emotion": "^10.0.27"
-					}
-				},
-				"@storybook/addons": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.2.9.tgz",
-					"integrity": "sha512-GnmEKbJwiN1jncN9NSA8CuR1i2XAlasPcl/Zn0jkfV9WitQeczVcJCPw86SGH84AD+tTBCyF2i9UC0KaOV1YBQ==",
-					"dev": true,
-					"requires": {
-						"@storybook/api": "6.2.9",
-						"@storybook/channels": "6.2.9",
-						"@storybook/client-logger": "6.2.9",
-						"@storybook/core-events": "6.2.9",
-						"@storybook/router": "6.2.9",
-						"@storybook/theming": "6.2.9",
-						"core-js": "^3.8.2",
-						"global": "^4.4.0",
-						"regenerator-runtime": "^0.13.7"
-					}
-				},
-				"@storybook/api": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.2.9.tgz",
-					"integrity": "sha512-okkA3HAScE9tGnYBrjTOcgzT+L1lRHNoEh3ZfGgh1u/XNEyHGNkj4grvkd6nX7BzRcYQ/l2VkcKCqmOjUnSkVQ==",
-					"dev": true,
-					"requires": {
-						"@reach/router": "^1.3.4",
-						"@storybook/channels": "6.2.9",
-						"@storybook/client-logger": "6.2.9",
-						"@storybook/core-events": "6.2.9",
-						"@storybook/csf": "0.0.1",
-						"@storybook/router": "6.2.9",
-						"@storybook/semver": "^7.3.2",
-						"@storybook/theming": "6.2.9",
-						"@types/reach__router": "^1.3.7",
-						"core-js": "^3.8.2",
-						"fast-deep-equal": "^3.1.3",
-						"global": "^4.4.0",
-						"lodash": "^4.17.20",
-						"memoizerific": "^1.11.3",
-						"qs": "^6.10.0",
-						"regenerator-runtime": "^0.13.7",
-						"store2": "^2.12.0",
-						"telejson": "^5.1.0",
-						"ts-dedent": "^2.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"@storybook/channel-postmessage": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.2.9.tgz",
-					"integrity": "sha512-OqV+gLeeCHR0KExsIz0B7gD17Cjd9D+I75qnBsLWM9inWO5kc/WZ5svw8Bvjlcm6snWpvxUaT8L+svuqcPSmww==",
-					"dev": true,
-					"requires": {
-						"@storybook/channels": "6.2.9",
-						"@storybook/client-logger": "6.2.9",
-						"@storybook/core-events": "6.2.9",
-						"core-js": "^3.8.2",
-						"global": "^4.4.0",
-						"qs": "^6.10.0",
-						"telejson": "^5.1.0"
-					}
-				},
-				"@storybook/channels": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.2.9.tgz",
-					"integrity": "sha512-6dC8Fb2ipNyOQXnUZMDeEUaJGH5DMLzyHlGLhVyDtrO5WR6bO8mQdkzf4+5dSKXgCBNX0BSkssXth4pDjn18rg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.8.2",
-						"ts-dedent": "^2.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"@storybook/client-api": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.2.9.tgz",
-					"integrity": "sha512-aLvEUVkbvv6Qo/2mF4rFCecdqi2CGOUDdsV1a6EFIVS/9gXFdpirsOwKHo9qNjacGdWPlBYGCUcbrw+DvNaSFA==",
-					"dev": true,
-					"requires": {
-						"@storybook/addons": "6.2.9",
-						"@storybook/channel-postmessage": "6.2.9",
-						"@storybook/channels": "6.2.9",
-						"@storybook/client-logger": "6.2.9",
-						"@storybook/core-events": "6.2.9",
-						"@storybook/csf": "0.0.1",
-						"@types/qs": "^6.9.5",
-						"@types/webpack-env": "^1.16.0",
-						"core-js": "^3.8.2",
-						"global": "^4.4.0",
-						"lodash": "^4.17.20",
-						"memoizerific": "^1.11.3",
-						"qs": "^6.10.0",
-						"regenerator-runtime": "^0.13.7",
-						"stable": "^0.1.8",
-						"store2": "^2.12.0",
-						"ts-dedent": "^2.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"@storybook/client-logger": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.2.9.tgz",
-					"integrity": "sha512-IfOQZuvpjh66qBInQCJOb9S0dTGpzZ/Cxlcvokp+PYt95KztaWN3mPm+HaDQCeRsrWNe0Bpm1zuickcJ6dBOXg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.8.2",
-						"global": "^4.4.0"
-					}
-				},
-				"@storybook/components": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.2.9.tgz",
-					"integrity": "sha512-hnV1MI2aB2g1sJ7NJphpxi7TwrMZQ/tpCJeHnkjmzyC6ez1MXqcBXGrEEdSXzRfAxjQTOEpu6H1mnns0xMP0Ag==",
-					"dev": true,
-					"requires": {
-						"@popperjs/core": "^2.6.0",
-						"@storybook/client-logger": "6.2.9",
-						"@storybook/csf": "0.0.1",
-						"@storybook/theming": "6.2.9",
-						"@types/color-convert": "^2.0.0",
-						"@types/overlayscrollbars": "^1.12.0",
-						"@types/react-syntax-highlighter": "11.0.5",
-						"color-convert": "^2.0.1",
-						"core-js": "^3.8.2",
-						"fast-deep-equal": "^3.1.3",
-						"global": "^4.4.0",
-						"lodash": "^4.17.20",
-						"markdown-to-jsx": "^7.1.0",
-						"memoizerific": "^1.11.3",
-						"overlayscrollbars": "^1.13.1",
-						"polished": "^4.0.5",
-						"prop-types": "^15.7.2",
-						"react-colorful": "^5.0.1",
-						"react-popper-tooltip": "^3.1.1",
-						"react-syntax-highlighter": "^13.5.3",
-						"react-textarea-autosize": "^8.3.0",
-						"regenerator-runtime": "^0.13.7",
-						"ts-dedent": "^2.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"@storybook/core-events": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.2.9.tgz",
-					"integrity": "sha512-xQmbX/oYQK1QsAGN8hriXX5SUKOoTUe3L4dVaVHxJqy7MReRWJpprJmCpbAPJzWS6WCbDFfCM5kVEexHLOzJlQ==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.8.2"
-					}
-				},
-				"@storybook/router": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.2.9.tgz",
-					"integrity": "sha512-7Bn1OFoItCl8whXRT8N1qp1Lky7kzXJ3aslWp5E8HcM8rxh4OYXfbaeiyJEJxBTGC5zxgY+tAEXHFjsAviFROg==",
-					"dev": true,
-					"requires": {
-						"@reach/router": "^1.3.4",
-						"@storybook/client-logger": "6.2.9",
-						"@types/reach__router": "^1.3.7",
-						"core-js": "^3.8.2",
-						"fast-deep-equal": "^3.1.3",
-						"global": "^4.4.0",
-						"lodash": "^4.17.20",
-						"memoizerific": "^1.11.3",
-						"qs": "^6.10.0",
-						"ts-dedent": "^2.0.0"
-					}
-				},
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					}
-				},
-				"@storybook/theming": {
-					"version": "6.2.9",
-					"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.2.9.tgz",
-					"integrity": "sha512-183oJW7AD7Fhqg5NT4ct3GJntwteAb9jZnQ6yhf9JSdY+fk8OhxRbPf7ov0au2gYACcGrWDd9K5pYQsvWlP5gA==",
-					"dev": true,
-					"requires": {
-						"@emotion/core": "^10.1.1",
-						"@emotion/is-prop-valid": "^0.8.6",
-						"@emotion/styled": "^10.0.27",
-						"@storybook/client-logger": "6.2.9",
-						"core-js": "^3.8.2",
-						"deep-object-diff": "^1.1.0",
-						"emotion-theming": "^10.0.27",
-						"global": "^4.4.0",
-						"memoizerific": "^1.11.3",
-						"polished": "^4.0.5",
-						"resolve-from": "^5.0.0",
-						"ts-dedent": "^2.0.0"
-					}
-				},
-				"@types/qs": {
-					"version": "6.9.6",
-					"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.6.tgz",
-					"integrity": "sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==",
-					"dev": true
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"fast-deep-equal": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"qs": {
-					"version": "6.10.1",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
-					"integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"side-channel": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"get-intrinsic": "^1.0.2",
-						"object-inspect": "^1.9.0"
-					}
-				}
+				"ansi-styles": "^6.1.0",
+				"string-width": "^5.0.1",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"@storybook/addon-toolbars": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.7.tgz",
-			"integrity": "sha512-+MUG5t4isQNf+q7BpEsGwuYAvYgs9XTdzzdvL/9jedQ7udJsWmG1q9a6m9+iQGPr/WK+88F2kgSOknpib3J21w==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"regenerator-runtime": "^0.13.7"
-			}
-		},
-		"@storybook/addon-viewport": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.7.tgz",
-			"integrity": "sha512-8VmSTGKY3+9kZ09THC7546OaFbjLu5kEAGU5ZFSZaNlsJwRg7bC3bScKbnyX5EhihgZ3W8oJt/eMAIqXKHxA8g==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"memoizerific": "^1.11.3",
-				"prop-types": "^15.7.2",
-				"regenerator-runtime": "^0.13.7"
-			}
-		},
-		"@storybook/addons": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.7.tgz",
-			"integrity": "sha512-tUZ2c1uegUcwY31ztNQZGU/HUwAEEGIR8fEOvvO8S0TNQGoo6cwFtZmWBh3mTSRGcmzK2SNBjFHZua5Ee9TefA==",
-			"dev": true,
-			"requires": {
-				"@storybook/api": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"@types/webpack-env": "^1.16.0",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"regenerator-runtime": "^0.13.7"
-			},
-			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				}
+		"node_modules/@isaacs/ttlcache": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@isaacs/ttlcache/-/ttlcache-1.4.1.tgz",
+			"integrity": "sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA==",
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@storybook/api": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.7.tgz",
-			"integrity": "sha512-QCNypz4X+lYuFW7EzvRPXMf8uS3gfSIV8sqXtEe5XoMb0HQXhy6AGU7/4iAeuUimtETqLTxq+kOxaSg4uPowxg==",
-			"dev": true,
-			"requires": {
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/router": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"memoizerific": "^1.11.3",
-				"regenerator-runtime": "^0.13.7",
-				"store2": "^2.12.0",
-				"telejson": "^6.0.8",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@istanbuljs/load-nyc-config": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz",
+			"integrity": "sha512-ZR0rq/f/E4f4XcgnDvtMWXCUJpi8eO0rssVhmztsZqLIEFA9UUP9zmpE0VxlM+kv/E1ul2I876Fwil2ayptDVg==",
+			"dependencies": {
+				"camelcase": "^5.3.1",
+				"find-up": "^4.1.0",
+				"js-yaml": "^3.13.1",
+				"resolve-from": "^5.0.0"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				}
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@storybook/builder-webpack4": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.7.tgz",
-			"integrity": "sha512-8OB3mZ2L6kQBiAXlkhna/MHREXIPtqXi2AJLT3+bTzBlqkusH+PwMZxWHbcPl1vZrlNQBC40Elx9tdynGkVQ6g==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/channel-postmessage": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/preview-web": "6.5.7",
-				"@storybook/router": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"@storybook/ui": "6.5.7",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"@types/webpack": "^4.41.26",
-				"autoprefixer": "^9.8.6",
-				"babel-loader": "^8.0.0",
-				"case-sensitive-paths-webpack-plugin": "^2.3.0",
-				"core-js": "^3.8.2",
-				"css-loader": "^3.6.0",
-				"file-loader": "^6.2.0",
-				"find-up": "^5.0.0",
-				"fork-ts-checker-webpack-plugin": "^4.1.6",
-				"glob": "^7.1.6",
-				"glob-promise": "^3.4.0",
-				"global": "^4.4.0",
-				"html-webpack-plugin": "^4.0.0",
-				"pnp-webpack-plugin": "1.6.4",
-				"postcss": "^7.0.36",
-				"postcss-flexbugs-fixes": "^4.2.1",
-				"postcss-loader": "^4.2.0",
-				"raw-loader": "^4.0.2",
-				"stable": "^0.1.8",
-				"style-loader": "^1.3.0",
-				"terser-webpack-plugin": "^4.2.3",
-				"ts-dedent": "^2.0.0",
-				"url-loader": "^4.1.1",
-				"util-deprecate": "^1.0.2",
-				"webpack": "4",
-				"webpack-dev-middleware": "^3.7.3",
-				"webpack-filter-warnings-plugin": "^1.2.1",
-				"webpack-hot-middleware": "^2.25.1",
-				"webpack-virtual-modules": "^0.2.2"
-			},
-			"dependencies": {
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					},
-					"dependencies": {
-						"find-up": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-							"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^5.0.0",
-								"path-exists": "^4.0.0"
-							}
-						}
-					}
-				},
-				"@types/html-minifier-terser": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-					"integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
-					"dev": true
-				},
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"@types/webpack": {
-					"version": "4.41.32",
-					"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
-					"integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"@types/tapable": "^1",
-						"@types/uglify-js": "*",
-						"@types/webpack-sources": "*",
-						"anymatch": "^3.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"acorn": {
-					"version": "8.7.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-					"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-					"dev": true
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"autoprefixer": {
-					"version": "9.8.8",
-					"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
-					"integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
-					"dev": true,
-					"requires": {
-						"browserslist": "^4.12.0",
-						"caniuse-lite": "^1.0.30001109",
-						"normalize-range": "^0.1.2",
-						"num2fraction": "^1.2.2",
-						"picocolors": "^0.2.1",
-						"postcss": "^7.0.32",
-						"postcss-value-parser": "^4.1.0"
-					}
-				},
-				"bluebird": {
-					"version": "3.7.2",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-					"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-					"dev": true
-				},
-				"cacache": {
-					"version": "15.3.0",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
-					"integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^1.0.0",
-						"@npmcli/move-file": "^1.0.1",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.0.0",
-						"glob": "^7.1.4",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^6.0.0",
-						"minipass": "^3.1.1",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.2",
-						"mkdirp": "^1.0.3",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^8.0.1",
-						"tar": "^6.0.2",
-						"unique-filename": "^1.1.1"
-					}
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"clean-css": {
-					"version": "4.2.4",
-					"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
-					"integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
-					"dev": true,
-					"requires": {
-						"source-map": "~0.6.0"
-					}
-				},
-				"commander": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-					"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-					"dev": true
-				},
-				"css-loader": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
-					"integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.3.1",
-						"cssesc": "^3.0.0",
-						"icss-utils": "^4.1.1",
-						"loader-utils": "^1.2.3",
-						"normalize-path": "^3.0.0",
-						"postcss": "^7.0.32",
-						"postcss-modules-extract-imports": "^2.0.0",
-						"postcss-modules-local-by-default": "^3.0.2",
-						"postcss-modules-scope": "^2.2.0",
-						"postcss-modules-values": "^3.0.0",
-						"postcss-value-parser": "^4.1.0",
-						"schema-utils": "^2.7.0",
-						"semver": "^6.3.0"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "6.3.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-							"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-							"dev": true
-						}
-					}
-				},
-				"css-select": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-					"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^6.0.1",
-						"domhandler": "^4.3.1",
-						"domutils": "^2.8.0",
-						"nth-check": "^2.0.1"
-					}
-				},
-				"css-what": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-					"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-					"dev": true
-				},
-				"dom-serializer": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-					"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.2.0",
-						"entities": "^2.0.0"
-					}
-				},
-				"domelementtype": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-					"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-					"dev": true
-				},
-				"domhandler": {
-					"version": "4.3.1",
-					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-					"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.2.0"
-					}
-				},
-				"domutils": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-					"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-					"dev": true,
-					"requires": {
-						"dom-serializer": "^1.0.1",
-						"domelementtype": "^2.2.0",
-						"domhandler": "^4.2.0"
-					}
-				},
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
-				},
-				"find-cache-dir": {
-					"version": "3.3.2",
-					"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-					"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-					"dev": true,
-					"requires": {
-						"commondir": "^1.0.1",
-						"make-dir": "^3.0.2",
-						"pkg-dir": "^4.1.0"
-					}
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					},
-					"dependencies": {
-						"locate-path": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-							"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^5.0.0"
-							}
-						},
-						"p-limit": {
-							"version": "3.1.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-							"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-							"dev": true,
-							"requires": {
-								"yocto-queue": "^0.1.0"
-							}
-						},
-						"p-locate": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-							"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^3.0.2"
-							}
-						}
-					}
-				},
-				"fork-ts-checker-webpack-plugin": {
-					"version": "4.1.6",
-					"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-					"integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.5.5",
-						"chalk": "^2.4.1",
-						"micromatch": "^3.1.10",
-						"minimatch": "^3.0.4",
-						"semver": "^5.6.0",
-						"tapable": "^1.0.0",
-						"worker-rpc": "^0.1.0"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						}
-					}
-				},
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					},
-					"dependencies": {
-						"minimatch": {
-							"version": "3.1.2",
-							"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-							"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-							"dev": true,
-							"requires": {
-								"brace-expansion": "^1.1.7"
-							}
-						}
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"html-minifier-terser": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-					"integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-					"dev": true,
-					"requires": {
-						"camel-case": "^4.1.1",
-						"clean-css": "^4.2.3",
-						"commander": "^4.1.1",
-						"he": "^1.2.0",
-						"param-case": "^3.0.3",
-						"relateurl": "^0.2.7",
-						"terser": "^4.6.3"
-					}
-				},
-				"html-webpack-plugin": {
-					"version": "4.5.2",
-					"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz",
-					"integrity": "sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==",
-					"dev": true,
-					"requires": {
-						"@types/html-minifier-terser": "^5.0.0",
-						"@types/tapable": "^1.0.5",
-						"@types/webpack": "^4.41.8",
-						"html-minifier-terser": "^5.0.1",
-						"loader-utils": "^1.2.3",
-						"lodash": "^4.17.20",
-						"pretty-error": "^2.1.1",
-						"tapable": "^1.1.3",
-						"util.promisify": "1.0.0"
-					},
-					"dependencies": {
-						"tapable": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-							"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-							"dev": true
-						}
-					}
-				},
-				"htmlparser2": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-					"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.0.0",
-						"domutils": "^2.5.2",
-						"entities": "^2.0.0"
-					}
-				},
-				"icss-utils": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
-					"integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.14"
-					}
-				},
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"make-dir": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-					"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-					"dev": true,
-					"requires": {
-						"semver": "^6.0.0"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "6.3.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-							"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-							"dev": true
-						}
-					}
-				},
-				"mime": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-					"dev": true
-				},
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"nth-check": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-					"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"picocolors": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-					"integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-					"dev": true
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					},
-					"dependencies": {
-						"find-up": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-							"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^5.0.0",
-								"path-exists": "^4.0.0"
-							}
-						}
-					}
-				},
-				"postcss": {
-					"version": "7.0.39",
-					"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-					"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-					"dev": true,
-					"requires": {
-						"picocolors": "^0.2.1",
-						"source-map": "^0.6.1"
-					}
-				},
-				"postcss-loader": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz",
-					"integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==",
-					"dev": true,
-					"requires": {
-						"cosmiconfig": "^7.0.0",
-						"klona": "^2.0.4",
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^3.0.0",
-						"semver": "^7.3.4"
-					},
-					"dependencies": {
-						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-							"dev": true
-						},
-						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
-							"dev": true,
-							"requires": {
-								"big.js": "^5.2.2",
-								"emojis-list": "^3.0.0",
-								"json5": "^2.1.2"
-							}
-						},
-						"schema-utils": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-							"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-							"dev": true,
-							"requires": {
-								"@types/json-schema": "^7.0.8",
-								"ajv": "^6.12.5",
-								"ajv-keywords": "^3.5.2"
-							}
-						}
-					}
-				},
-				"postcss-modules-extract-imports": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
-					"integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.5"
-					}
-				},
-				"postcss-modules-local-by-default": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
-					"integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^4.1.1",
-						"postcss": "^7.0.32",
-						"postcss-selector-parser": "^6.0.2",
-						"postcss-value-parser": "^4.1.0"
-					}
-				},
-				"postcss-modules-scope": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
-					"integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.6",
-						"postcss-selector-parser": "^6.0.0"
-					}
-				},
-				"postcss-modules-values": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
-					"integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^4.0.0",
-						"postcss": "^7.0.6"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				},
-				"pretty-error": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-					"integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.20",
-						"renderkid": "^2.0.4"
-					}
-				},
-				"renderkid": {
-					"version": "2.0.7",
-					"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-					"integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
-					"dev": true,
-					"requires": {
-						"css-select": "^4.1.3",
-						"dom-converter": "^0.2.0",
-						"htmlparser2": "^6.1.0",
-						"lodash": "^4.17.21",
-						"strip-ansi": "^3.0.1"
-					}
-				},
-				"schema-utils": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-					"integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.5",
-						"ajv": "^6.12.4",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"serialize-javascript": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
-					"integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
-					"dev": true,
-					"requires": {
-						"randombytes": "^2.1.0"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"source-map-support": {
-					"version": "0.5.21",
-					"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-					"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-					"dev": true,
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"ssri": {
-					"version": "8.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-					"integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^2.0.0"
-					}
-				},
-				"style-loader": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
-					"integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==",
-					"dev": true,
-					"requires": {
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^2.7.0"
-					},
-					"dependencies": {
-						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-							"dev": true
-						},
-						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
-							"dev": true,
-							"requires": {
-								"big.js": "^5.2.2",
-								"emojis-list": "^3.0.0",
-								"json5": "^2.1.2"
-							}
-						}
-					}
-				},
-				"terser-webpack-plugin": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz",
-					"integrity": "sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==",
-					"dev": true,
-					"requires": {
-						"cacache": "^15.0.5",
-						"find-cache-dir": "^3.3.1",
-						"jest-worker": "^26.5.0",
-						"p-limit": "^3.0.2",
-						"schema-utils": "^3.0.0",
-						"serialize-javascript": "^5.0.1",
-						"source-map": "^0.6.1",
-						"terser": "^5.3.4",
-						"webpack-sources": "^1.4.3"
-					},
-					"dependencies": {
-						"commander": {
-							"version": "2.20.3",
-							"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-							"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-							"dev": true
-						},
-						"p-limit": {
-							"version": "3.1.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-							"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-							"dev": true,
-							"requires": {
-								"yocto-queue": "^0.1.0"
-							}
-						},
-						"schema-utils": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-							"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-							"dev": true,
-							"requires": {
-								"@types/json-schema": "^7.0.8",
-								"ajv": "^6.12.5",
-								"ajv-keywords": "^3.5.2"
-							}
-						},
-						"terser": {
-							"version": "5.15.0",
-							"resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-							"integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
-							"dev": true,
-							"requires": {
-								"@jridgewell/source-map": "^0.3.2",
-								"acorn": "^8.5.0",
-								"commander": "^2.20.0",
-								"source-map-support": "~0.5.20"
-							}
-						}
-					}
-				},
-				"webpack": {
-					"version": "4.46.0",
-					"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-					"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.9.0",
-						"@webassemblyjs/helper-module-context": "1.9.0",
-						"@webassemblyjs/wasm-edit": "1.9.0",
-						"@webassemblyjs/wasm-parser": "1.9.0",
-						"acorn": "^6.4.1",
-						"ajv": "^6.10.2",
-						"ajv-keywords": "^3.4.1",
-						"chrome-trace-event": "^1.0.2",
-						"enhanced-resolve": "^4.5.0",
-						"eslint-scope": "^4.0.3",
-						"json-parse-better-errors": "^1.0.2",
-						"loader-runner": "^2.4.0",
-						"loader-utils": "^1.2.3",
-						"memory-fs": "^0.4.1",
-						"micromatch": "^3.1.10",
-						"mkdirp": "^0.5.3",
-						"neo-async": "^2.6.1",
-						"node-libs-browser": "^2.2.1",
-						"schema-utils": "^1.0.0",
-						"tapable": "^1.1.3",
-						"terser-webpack-plugin": "^1.4.3",
-						"watchpack": "^1.7.4",
-						"webpack-sources": "^1.4.1"
-					},
-					"dependencies": {
-						"acorn": {
-							"version": "6.4.2",
-							"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-							"integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-							"dev": true
-						},
-						"cacache": {
-							"version": "12.0.4",
-							"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-							"integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
-							"dev": true,
-							"requires": {
-								"bluebird": "^3.5.5",
-								"chownr": "^1.1.1",
-								"figgy-pudding": "^3.5.1",
-								"glob": "^7.1.4",
-								"graceful-fs": "^4.1.15",
-								"infer-owner": "^1.0.3",
-								"lru-cache": "^5.1.1",
-								"mississippi": "^3.0.0",
-								"mkdirp": "^0.5.1",
-								"move-concurrently": "^1.0.1",
-								"promise-inflight": "^1.0.1",
-								"rimraf": "^2.6.3",
-								"ssri": "^6.0.1",
-								"unique-filename": "^1.1.1",
-								"y18n": "^4.0.0"
-							}
-						},
-						"chownr": {
-							"version": "1.1.4",
-							"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-							"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-							"dev": true
-						},
-						"find-cache-dir": {
-							"version": "2.1.0",
-							"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-							"integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-							"dev": true,
-							"requires": {
-								"commondir": "^1.0.1",
-								"make-dir": "^2.0.0",
-								"pkg-dir": "^3.0.0"
-							}
-						},
-						"find-up": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-							"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^3.0.0"
-							}
-						},
-						"locate-path": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-							"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^3.0.0",
-								"path-exists": "^3.0.0"
-							}
-						},
-						"lru-cache": {
-							"version": "5.1.1",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-							"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-							"dev": true,
-							"requires": {
-								"yallist": "^3.0.2"
-							}
-						},
-						"make-dir": {
-							"version": "2.1.0",
-							"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-							"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-							"dev": true,
-							"requires": {
-								"pify": "^4.0.1",
-								"semver": "^5.6.0"
-							}
-						},
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						},
-						"mkdirp": {
-							"version": "0.5.6",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-							"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.6"
-							}
-						},
-						"p-locate": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-							"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^2.0.0"
-							}
-						},
-						"path-exists": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-							"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-							"dev": true
-						},
-						"pkg-dir": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-							"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-							"dev": true,
-							"requires": {
-								"find-up": "^3.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"
-							}
-						},
-						"schema-utils": {
-							"version": "1.0.0",
-							"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-							"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-							"dev": true,
-							"requires": {
-								"ajv": "^6.1.0",
-								"ajv-errors": "^1.0.0",
-								"ajv-keywords": "^3.1.0"
-							}
-						},
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						},
-						"serialize-javascript": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-							"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-							"dev": true,
-							"requires": {
-								"randombytes": "^2.1.0"
-							}
-						},
-						"ssri": {
-							"version": "6.0.2",
-							"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-							"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
-							"dev": true,
-							"requires": {
-								"figgy-pudding": "^3.5.1"
-							}
-						},
-						"tapable": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-							"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-							"dev": true
-						},
-						"terser-webpack-plugin": {
-							"version": "1.4.5",
-							"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-							"integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-							"dev": true,
-							"requires": {
-								"cacache": "^12.0.2",
-								"find-cache-dir": "^2.1.0",
-								"is-wsl": "^1.1.0",
-								"schema-utils": "^1.0.0",
-								"serialize-javascript": "^4.0.0",
-								"source-map": "^0.6.1",
-								"terser": "^4.1.2",
-								"webpack-sources": "^1.4.0",
-								"worker-farm": "^1.7.0"
-							}
-						},
-						"yallist": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-							"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-							"dev": true
-						}
-					}
-				},
-				"webpack-dev-middleware": {
-					"version": "3.7.3",
-					"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
-					"integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
-					"dev": true,
-					"requires": {
-						"memory-fs": "^0.4.1",
-						"mime": "^2.4.4",
-						"mkdirp": "^0.5.1",
-						"range-parser": "^1.2.1",
-						"webpack-log": "^2.0.0"
-					},
-					"dependencies": {
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						},
-						"mkdirp": {
-							"version": "0.5.6",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-							"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.6"
-							}
-						}
-					}
-				},
-				"webpack-sources": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-					"dev": true,
-					"requires": {
-						"source-list-map": "^2.0.0",
-						"source-map": "~0.6.1"
-					}
-				},
-				"webpack-virtual-modules": {
-					"version": "0.2.2",
-					"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz",
-					"integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==",
-					"dev": true,
-					"requires": {
-						"debug": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@storybook/builder-webpack5": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.7.tgz",
-			"integrity": "sha512-3mbQ09KBTUsFYxnEtR4vr7W1wodRen3o8fANY5XxvE1sr1TopHVOKpIlePjrpcrXcLKFI/ZWrX3IfK88LCuI9w==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/channel-postmessage": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/preview-web": "6.5.7",
-				"@storybook/router": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"babel-loader": "^8.0.0",
-				"babel-plugin-named-exports-order": "^0.0.2",
-				"browser-assert": "^1.2.1",
-				"case-sensitive-paths-webpack-plugin": "^2.3.0",
-				"core-js": "^3.8.2",
-				"css-loader": "^5.0.1",
-				"fork-ts-checker-webpack-plugin": "^6.0.4",
-				"glob": "^7.1.6",
-				"glob-promise": "^3.4.0",
-				"html-webpack-plugin": "^5.0.0",
-				"path-browserify": "^1.0.1",
-				"process": "^0.11.10",
-				"stable": "^0.1.8",
-				"style-loader": "^2.0.0",
-				"terser-webpack-plugin": "^5.0.3",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"webpack": "^5.9.0",
-				"webpack-dev-middleware": "^4.1.0",
-				"webpack-hot-middleware": "^2.25.1",
-				"webpack-virtual-modules": "^0.4.1"
-			},
-			"dependencies": {
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					}
-				},
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"css-loader": {
-					"version": "5.2.7",
-					"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-					"integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^5.1.0",
-						"loader-utils": "^2.0.0",
-						"postcss": "^8.2.15",
-						"postcss-modules-extract-imports": "^3.0.0",
-						"postcss-modules-local-by-default": "^4.0.0",
-						"postcss-modules-scope": "^3.0.0",
-						"postcss-modules-values": "^4.0.0",
-						"postcss-value-parser": "^4.1.0",
-						"schema-utils": "^3.0.0",
-						"semver": "^7.3.5"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-browserify": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
-					"integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"style-loader": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-					"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-					"dev": true,
-					"requires": {
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^3.0.0"
-					}
-				}
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@storybook/channel-postmessage": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.7.tgz",
-			"integrity": "sha512-X4UPgm4O0503CsSnqAM1ht/6R9ofnoMcqFZxYRu9PSvHlhaFR9V9AU4VjQhakH7alFzRsAhcAV2PFVTAdWhgtA==",
-			"dev": true,
-			"requires": {
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"qs": "^6.10.0",
-				"telejson": "^6.0.8"
-			},
-			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				}
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@storybook/channel-websocket": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.7.tgz",
-			"integrity": "sha512-C+l6t3ZgHzU8gL8GJ8c4GMttJglGJIwq1LtJJKnGzx2kJCD0HRMMqc/qFS2K2EwP99hLwwGIlCpom3UZ1aEanA==",
-			"dev": true,
-			"requires": {
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"telejson": "^6.0.8"
-			},
-			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				}
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"@storybook/channels": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.7.tgz",
-			"integrity": "sha512-v880fWBpWgiWrDmZesTIstNfMZhrPfgXAtLNcL5Z89NAPahsHskOSszc0BDxKN3gb+ZeTKUqHxY57dQdp+1rhg==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.8.2",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@storybook/client-api": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.7.tgz",
-			"integrity": "sha512-na8NZhB6GnAGp3jRTV9wwue3WGwSZoi5jfxrKSYMPL/s/2n07/soixHggqueBDXuNBrPoJaXbY/nRHmSjLwxtQ==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/channel-postmessage": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.7",
-				"@types/qs": "^6.9.5",
-				"@types/webpack-env": "^1.16.0",
-				"core-js": "^3.8.2",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"memoizerific": "^1.11.3",
-				"qs": "^6.10.0",
-				"regenerator-runtime": "^0.13.7",
-				"store2": "^2.12.0",
-				"synchronous-promise": "^2.0.15",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@istanbuljs/schema": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+			"integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@jest/console": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/console/-/console-29.6.2.tgz",
+			"integrity": "sha512-0N0yZof5hi44HAR2pPS+ikJ3nzKNoZdVu8FffRf3wy47I7Dm7etk/3KetMdRUqzVd16V4O2m2ISpNTbnIuqy1w==",
+			"dependencies": {
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"jest-message-util": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"slash": "^3.0.0"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/core": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/core/-/core-29.6.2.tgz",
+			"integrity": "sha512-Oj+5B+sDMiMWLhPFF+4/DvHOf+U10rgvCLGPHP8Xlsy/7QxS51aU/eBngudHlJXnaWD5EohAgJ4js+T6pa+zOg==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
+				"@jest/console": "^29.6.2",
+				"@jest/reporters": "^29.6.2",
+				"@jest/test-result": "^29.6.2",
+				"@jest/transform": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"ansi-escapes": "^4.2.1",
+				"chalk": "^4.0.0",
+				"ci-info": "^3.2.0",
+				"exit": "^0.1.2",
+				"graceful-fs": "^4.2.9",
+				"jest-changed-files": "^29.5.0",
+				"jest-config": "^29.6.2",
+				"jest-haste-map": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-regex-util": "^29.4.3",
+				"jest-resolve": "^29.6.2",
+				"jest-resolve-dependencies": "^29.6.2",
+				"jest-runner": "^29.6.2",
+				"jest-runtime": "^29.6.2",
+				"jest-snapshot": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jest-validate": "^29.6.2",
+				"jest-watcher": "^29.6.2",
+				"micromatch": "^4.0.4",
+				"pretty-format": "^29.6.2",
+				"slash": "^3.0.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+			},
+			"peerDependenciesMeta": {
+				"node-notifier": {
+					"optional": true
 				}
 			}
 		},
-		"@storybook/client-logger": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.7.tgz",
-			"integrity": "sha512-ycDy1kXeXRg3djSTXRGMVxc0kvaWw/UhHDs2VGFmOPScsoeWpdbePHXJMFbsqippxuexpsofqTryBwH2b6BPhw==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.8.2",
-				"global": "^4.4.0"
+		"node_modules/@jest/create-cache-key-function": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-29.7.0.tgz",
+			"integrity": "sha512-4QqS3LY5PBmTRHj9sAg1HLoPzqAI0uOX6wI/TRqHIcOxlFidy6YEmCQJk6FSZjNLGCeubDMfmkWL+qaLKhSGQA==",
+			"dependencies": {
+				"@jest/types": "^29.6.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/components": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.7.tgz",
-			"integrity": "sha512-xSOaOK8q6bXYkmN4LZKucvXU2HRHqKwwTafFDh5yzsCSEB2VQIJlyo4ePVyv/GJgBUX6+WdSA7c5r5ePXK6IYQ==",
-			"dev": true,
-			"requires": {
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/theming": "6.5.7",
-				"@types/react-syntax-highlighter": "11.0.5",
-				"core-js": "^3.8.2",
-				"qs": "^6.10.0",
-				"react-syntax-highlighter": "^15.4.5",
-				"regenerator-runtime": "^0.13.7",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@jest/environment": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
+			"integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
+			"dependencies": {
+				"@jest/fake-timers": "^29.7.0",
+				"@jest/types": "^29.6.3",
+				"@types/node": "*",
+				"jest-mock": "^29.7.0"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/expect": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.6.2.tgz",
+			"integrity": "sha512-m6DrEJxVKjkELTVAztTLyS/7C92Y2b0VYqmDROYKLLALHn8T/04yPs70NADUYPrV3ruI+H3J0iUIuhkjp7vkfg==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"parse-entities": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-					"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-					"dev": true,
-					"requires": {
-						"character-entities": "^1.0.0",
-						"character-entities-legacy": "^1.0.0",
-						"character-reference-invalid": "^1.0.0",
-						"is-alphanumerical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-hexadecimal": "^1.0.0"
-					}
-				},
-				"prismjs": {
-					"version": "1.28.0",
-					"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
-					"integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==",
-					"dev": true
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				},
-				"react-syntax-highlighter": {
-					"version": "15.5.0",
-					"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
-					"integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.3.1",
-						"highlight.js": "^10.4.1",
-						"lowlight": "^1.17.0",
-						"prismjs": "^1.27.0",
-						"refractor": "^3.6.0"
-					}
-				},
-				"refractor": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
-					"integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
-					"dev": true,
-					"requires": {
-						"hastscript": "^6.0.0",
-						"parse-entities": "^2.0.0",
-						"prismjs": "~1.27.0"
-					},
-					"dependencies": {
-						"prismjs": {
-							"version": "1.27.0",
-							"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
-							"integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
-							"dev": true
-						}
-					}
-				}
+				"expect": "^29.6.2",
+				"jest-snapshot": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/core": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.5.7.tgz",
-			"integrity": "sha512-YSu2qur1E5y9rjVspchtCfupPT3y1XyjBInhwzo8jC3rvm2WY0RS80VQU3dga4QBllO1M+cDmLzmOEPL82+Juw==",
-			"dev": true,
-			"requires": {
-				"@storybook/core-client": "6.5.7",
-				"@storybook/core-server": "6.5.7"
-			}
-		},
-		"@storybook/core-client": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.7.tgz",
-			"integrity": "sha512-GL7m33tpEyornhfnTddbvDuLkA9EMe1zKv9oZGsUYo78cWRTiEibYyHegIi9/ThplRXvpFR/5uHY4Zx5Z5rxJg==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/channel-postmessage": "6.5.7",
-				"@storybook/channel-websocket": "6.5.7",
-				"@storybook/client-api": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/preview-web": "6.5.7",
-				"@storybook/store": "6.5.7",
-				"@storybook/ui": "6.5.7",
-				"airbnb-js-shims": "^2.2.1",
-				"ansi-to-html": "^0.6.11",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"qs": "^6.10.0",
-				"regenerator-runtime": "^0.13.7",
-				"ts-dedent": "^2.0.0",
-				"unfetch": "^4.2.0",
-				"util-deprecate": "^1.0.2"
+		"node_modules/@jest/expect-utils": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.6.2.tgz",
+			"integrity": "sha512-6zIhM8go3RV2IG4aIZaZbxwpOzz3ZiM23oxAlkquOIole+G6TrbeXnykxWYlqF7kz2HlBjdKtca20x9atkEQYg==",
+			"dependencies": {
+				"jest-get-type": "^29.4.3"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/fake-timers": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
+			"integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				}
+				"@jest/types": "^29.6.3",
+				"@sinonjs/fake-timers": "^10.0.2",
+				"@types/node": "*",
+				"jest-message-util": "^29.7.0",
+				"jest-mock": "^29.7.0",
+				"jest-util": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/core-common": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.7.tgz",
-			"integrity": "sha512-/b1oQlmhek8tKDu9ky2O1oEk9g2giAPpl192yRz4lIxap5CFJ7RCfgbkq+F3JBXnH2P84BufC0x3dj4jvBhxCw==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@babel/plugin-proposal-class-properties": "^7.12.1",
-				"@babel/plugin-proposal-decorators": "^7.12.12",
-				"@babel/plugin-proposal-export-default-from": "^7.12.1",
-				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-				"@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-				"@babel/plugin-proposal-optional-chaining": "^7.12.7",
-				"@babel/plugin-proposal-private-methods": "^7.12.1",
-				"@babel/plugin-proposal-private-property-in-object": "^7.12.1",
-				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-				"@babel/plugin-transform-arrow-functions": "^7.12.1",
-				"@babel/plugin-transform-block-scoping": "^7.12.12",
-				"@babel/plugin-transform-classes": "^7.12.1",
-				"@babel/plugin-transform-destructuring": "^7.12.1",
-				"@babel/plugin-transform-for-of": "^7.12.1",
-				"@babel/plugin-transform-parameters": "^7.12.1",
-				"@babel/plugin-transform-shorthand-properties": "^7.12.1",
-				"@babel/plugin-transform-spread": "^7.12.1",
-				"@babel/preset-env": "^7.12.11",
-				"@babel/preset-react": "^7.12.10",
-				"@babel/preset-typescript": "^7.12.7",
-				"@babel/register": "^7.12.1",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"@types/pretty-hrtime": "^1.0.0",
-				"babel-loader": "^8.0.0",
-				"babel-plugin-macros": "^3.0.1",
-				"babel-plugin-polyfill-corejs3": "^0.1.0",
-				"chalk": "^4.1.0",
-				"core-js": "^3.8.2",
-				"express": "^4.17.1",
-				"file-system-cache": "^1.0.5",
-				"find-up": "^5.0.0",
-				"fork-ts-checker-webpack-plugin": "^6.0.4",
-				"fs-extra": "^9.0.1",
-				"glob": "^7.1.6",
-				"handlebars": "^4.7.7",
-				"interpret": "^2.2.0",
-				"json5": "^2.1.3",
-				"lazy-universal-dotenv": "^3.0.1",
-				"picomatch": "^2.3.0",
-				"pkg-dir": "^5.0.0",
-				"pretty-hrtime": "^1.0.3",
-				"resolve-from": "^5.0.0",
+		"node_modules/@jest/fake-timers/node_modules/jest-message-util": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
+			"integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
+			"dependencies": {
+				"@babel/code-frame": "^7.12.13",
+				"@jest/types": "^29.6.3",
+				"@types/stack-utils": "^2.0.0",
+				"chalk": "^4.0.0",
+				"graceful-fs": "^4.2.9",
+				"micromatch": "^4.0.4",
+				"pretty-format": "^29.7.0",
 				"slash": "^3.0.0",
-				"telejson": "^6.0.8",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"webpack": "4"
-			},
-			"dependencies": {
-				"@babel/helper-define-polyfill-provider": {
-					"version": "0.1.5",
-					"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz",
-					"integrity": "sha512-nXuzCSwlJ/WKr8qxzW816gwyT6VZgiJG17zR40fou70yfAcqjoNyTLl/DQ+FExw5Hx5KNqshmN8Ldl/r2N7cTg==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-compilation-targets": "^7.13.0",
-						"@babel/helper-module-imports": "^7.12.13",
-						"@babel/helper-plugin-utils": "^7.13.0",
-						"@babel/traverse": "^7.13.0",
-						"debug": "^4.1.1",
-						"lodash.debounce": "^4.0.8",
-						"resolve": "^1.14.2",
-						"semver": "^6.1.2"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "6.3.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-							"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-							"dev": true
-						}
-					}
-				},
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					},
-					"dependencies": {
-						"find-up": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-							"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^5.0.0",
-								"path-exists": "^4.0.0"
-							}
-						}
-					}
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"babel-plugin-macros": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-					"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.12.5",
-						"cosmiconfig": "^7.0.0",
-						"resolve": "^1.19.0"
-					}
-				},
-				"babel-plugin-polyfill-corejs3": {
-					"version": "0.1.7",
-					"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz",
-					"integrity": "sha512-u+gbS9bbPhZWEeyy1oR/YaaSpod/KDT07arZHb80aTpl8H5ZBq+uN1nN9/xtX7jQyfLdPfoqI4Rue/MQSWJquw==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-define-polyfill-provider": "^0.1.5",
-						"core-js-compat": "^3.8.1"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					},
-					"dependencies": {
-						"locate-path": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-							"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^5.0.0"
-							}
-						},
-						"p-limit": {
-							"version": "3.1.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-							"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-							"dev": true,
-							"requires": {
-								"yocto-queue": "^0.1.0"
-							}
-						},
-						"p-locate": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-							"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^3.0.2"
-							}
-						}
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					},
-					"dependencies": {
-						"json5": {
-							"version": "1.0.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-							"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.0"
-							}
-						}
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
-				"mkdirp": {
-					"version": "0.5.6",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-					"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.6"
-					},
-					"dependencies": {
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						}
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
-					"integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
-					"dev": true,
-					"requires": {
-						"find-up": "^5.0.0"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"tapable": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-					"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-					"dev": true
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				},
-				"terser-webpack-plugin": {
-					"version": "1.4.5",
-					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-					"integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-					"dev": true,
-					"requires": {
-						"cacache": "^12.0.2",
-						"find-cache-dir": "^2.1.0",
-						"is-wsl": "^1.1.0",
-						"schema-utils": "^1.0.0",
-						"serialize-javascript": "^4.0.0",
-						"source-map": "^0.6.1",
-						"terser": "^4.1.2",
-						"webpack-sources": "^1.4.0",
-						"worker-farm": "^1.7.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"webpack": {
-					"version": "4.46.0",
-					"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-					"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.9.0",
-						"@webassemblyjs/helper-module-context": "1.9.0",
-						"@webassemblyjs/wasm-edit": "1.9.0",
-						"@webassemblyjs/wasm-parser": "1.9.0",
-						"acorn": "^6.4.1",
-						"ajv": "^6.10.2",
-						"ajv-keywords": "^3.4.1",
-						"chrome-trace-event": "^1.0.2",
-						"enhanced-resolve": "^4.5.0",
-						"eslint-scope": "^4.0.3",
-						"json-parse-better-errors": "^1.0.2",
-						"loader-runner": "^2.4.0",
-						"loader-utils": "^1.2.3",
-						"memory-fs": "^0.4.1",
-						"micromatch": "^3.1.10",
-						"mkdirp": "^0.5.3",
-						"neo-async": "^2.6.1",
-						"node-libs-browser": "^2.2.1",
-						"schema-utils": "^1.0.0",
-						"tapable": "^1.1.3",
-						"terser-webpack-plugin": "^1.4.3",
-						"watchpack": "^1.7.4",
-						"webpack-sources": "^1.4.1"
-					}
-				},
-				"webpack-sources": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-					"dev": true,
-					"requires": {
-						"source-list-map": "^2.0.0",
-						"source-map": "~0.6.1"
-					}
-				}
+				"stack-utils": "^2.0.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/core-events": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.7.tgz",
-			"integrity": "sha512-epqYy67Ypry5QdCt7FpN57/X9uuS7R2+DLFORZIpL/SJG1dIdN4POQ1icWOhPzHl+eiSgaV7e2oPaUsN+LPhJQ==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.8.2"
+		"node_modules/@jest/globals": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.6.2.tgz",
+			"integrity": "sha512-cjuJmNDjs6aMijCmSa1g2TNG4Lby/AeU7/02VtpW+SLcZXzOLK2GpN2nLqcFjmhy3B3AoPeQVx7BnyOf681bAw==",
+			"dependencies": {
+				"@jest/environment": "^29.6.2",
+				"@jest/expect": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"jest-mock": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/core-server": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.7.tgz",
-			"integrity": "sha512-CGwFZ5kmKaCS/+tcrAbqQu4Owq86wXkWRapJB55S8AlUsf3c9gEC8a3+Ed9tZUlmjSH56CnDDfmt7AleToaQ9w==",
-			"dev": true,
-			"requires": {
-				"@discoveryjs/json-ext": "^0.5.3",
-				"@storybook/builder-webpack4": "6.5.7",
-				"@storybook/core-client": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/csf-tools": "6.5.7",
-				"@storybook/manager-webpack4": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.7",
-				"@storybook/telemetry": "6.5.7",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"@types/node-fetch": "^2.5.7",
-				"@types/pretty-hrtime": "^1.0.0",
-				"@types/webpack": "^4.41.26",
-				"better-opn": "^2.1.1",
-				"boxen": "^5.1.2",
-				"chalk": "^4.1.0",
-				"cli-table3": "^0.6.1",
-				"commander": "^6.2.1",
-				"compression": "^1.7.4",
-				"core-js": "^3.8.2",
-				"cpy": "^8.1.2",
-				"detect-port": "^1.3.0",
-				"express": "^4.17.1",
-				"fs-extra": "^9.0.1",
-				"global": "^4.4.0",
-				"globby": "^11.0.2",
-				"ip": "^2.0.0",
-				"lodash": "^4.17.21",
-				"node-fetch": "^2.6.7",
-				"open": "^8.4.0",
-				"pretty-hrtime": "^1.0.3",
-				"prompts": "^2.4.0",
-				"regenerator-runtime": "^0.13.7",
-				"serve-favicon": "^2.5.0",
+		"node_modules/@jest/reporters": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.6.2.tgz",
+			"integrity": "sha512-sWtijrvIav8LgfJZlrGCdN0nP2EWbakglJY49J1Y5QihcQLfy7ovyxxjJBRXMNltgt4uPtEcFmIMbVshEDfFWw==",
+			"dependencies": {
+				"@bcoe/v8-coverage": "^0.2.3",
+				"@jest/console": "^29.6.2",
+				"@jest/test-result": "^29.6.2",
+				"@jest/transform": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@jridgewell/trace-mapping": "^0.3.18",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"collect-v8-coverage": "^1.0.0",
+				"exit": "^0.1.2",
+				"glob": "^7.1.3",
+				"graceful-fs": "^4.2.9",
+				"istanbul-lib-coverage": "^3.0.0",
+				"istanbul-lib-instrument": "^5.1.0",
+				"istanbul-lib-report": "^3.0.0",
+				"istanbul-lib-source-maps": "^4.0.0",
+				"istanbul-reports": "^3.1.3",
+				"jest-message-util": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jest-worker": "^29.6.2",
 				"slash": "^3.0.0",
-				"telejson": "^6.0.8",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"watchpack": "^2.2.0",
-				"webpack": "4",
-				"ws": "^8.2.3",
-				"x-default-browser": "^0.4.0"
+				"string-length": "^4.0.1",
+				"strip-ansi": "^6.0.0",
+				"v8-to-istanbul": "^9.0.1"
 			},
-			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					}
-				},
-				"@types/webpack": {
-					"version": "4.41.32",
-					"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
-					"integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"@types/tapable": "^1",
-						"@types/uglify-js": "*",
-						"@types/webpack-sources": "*",
-						"anymatch": "^3.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"commander": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-					"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-					"dev": true
-				},
-				"fast-glob": {
-					"version": "3.2.11",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-					"integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
-					"dev": true,
-					"requires": {
-						"@nodelib/fs.stat": "^2.0.2",
-						"@nodelib/fs.walk": "^1.2.3",
-						"glob-parent": "^5.1.2",
-						"merge2": "^1.3.0",
-						"micromatch": "^4.0.4"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"glob-to-regexp": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-					"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-					"dev": true
-				},
-				"globby": {
-					"version": "11.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.9",
-						"ignore": "^5.2.0",
-						"merge2": "^1.4.1",
-						"slash": "^3.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"ip": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-					"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-wsl": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"mkdirp": {
-					"version": "0.5.6",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-					"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.6"
-					},
-					"dependencies": {
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						}
-					}
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"open": {
-					"version": "8.4.0",
-					"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-					"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-					"dev": true,
-					"requires": {
-						"define-lazy-prop": "^2.0.0",
-						"is-docker": "^2.1.1",
-						"is-wsl": "^2.2.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"tapable": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-					"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-					"dev": true
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				},
-				"terser-webpack-plugin": {
-					"version": "1.4.5",
-					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-					"integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-					"dev": true,
-					"requires": {
-						"cacache": "^12.0.2",
-						"find-cache-dir": "^2.1.0",
-						"is-wsl": "^1.1.0",
-						"schema-utils": "^1.0.0",
-						"serialize-javascript": "^4.0.0",
-						"source-map": "^0.6.1",
-						"terser": "^4.1.2",
-						"webpack-sources": "^1.4.0",
-						"worker-farm": "^1.7.0"
-					},
-					"dependencies": {
-						"is-wsl": {
-							"version": "1.1.0",
-							"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-							"integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
-							"dev": true
-						}
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"tr46": {
-					"version": "0.0.3",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-					"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"watchpack": {
-					"version": "2.4.0",
-					"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-					"integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-					"dev": true,
-					"requires": {
-						"glob-to-regexp": "^0.4.1",
-						"graceful-fs": "^4.1.2"
-					}
-				},
-				"webidl-conversions": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-					"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-					"dev": true
-				},
-				"webpack": {
-					"version": "4.46.0",
-					"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-					"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.9.0",
-						"@webassemblyjs/helper-module-context": "1.9.0",
-						"@webassemblyjs/wasm-edit": "1.9.0",
-						"@webassemblyjs/wasm-parser": "1.9.0",
-						"acorn": "^6.4.1",
-						"ajv": "^6.10.2",
-						"ajv-keywords": "^3.4.1",
-						"chrome-trace-event": "^1.0.2",
-						"enhanced-resolve": "^4.5.0",
-						"eslint-scope": "^4.0.3",
-						"json-parse-better-errors": "^1.0.2",
-						"loader-runner": "^2.4.0",
-						"loader-utils": "^1.2.3",
-						"memory-fs": "^0.4.1",
-						"micromatch": "^3.1.10",
-						"mkdirp": "^0.5.3",
-						"neo-async": "^2.6.1",
-						"node-libs-browser": "^2.2.1",
-						"schema-utils": "^1.0.0",
-						"tapable": "^1.1.3",
-						"terser-webpack-plugin": "^1.4.3",
-						"watchpack": "^1.7.4",
-						"webpack-sources": "^1.4.1"
-					},
-					"dependencies": {
-						"braces": {
-							"version": "2.3.2",
-							"resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-							"integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-							"dev": true,
-							"requires": {
-								"arr-flatten": "^1.1.0",
-								"array-unique": "^0.3.2",
-								"extend-shallow": "^2.0.1",
-								"fill-range": "^4.0.0",
-								"isobject": "^3.0.1",
-								"repeat-element": "^1.1.2",
-								"snapdragon": "^0.8.1",
-								"snapdragon-node": "^2.0.1",
-								"split-string": "^3.0.2",
-								"to-regex": "^3.0.1"
-							},
-							"dependencies": {
-								"extend-shallow": {
-									"version": "2.0.1",
-									"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-									"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-									"dev": true,
-									"requires": {
-										"is-extendable": "^0.1.0"
-									}
-								}
-							}
-						},
-						"fill-range": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-							"integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
-							"dev": true,
-							"requires": {
-								"extend-shallow": "^2.0.1",
-								"is-number": "^3.0.0",
-								"repeat-string": "^1.6.1",
-								"to-regex-range": "^2.1.0"
-							},
-							"dependencies": {
-								"extend-shallow": {
-									"version": "2.0.1",
-									"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-									"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
-									"dev": true,
-									"requires": {
-										"is-extendable": "^0.1.0"
-									}
-								}
-							}
-						},
-						"is-number": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-							"integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
-							"dev": true,
-							"requires": {
-								"kind-of": "^3.0.2"
-							},
-							"dependencies": {
-								"kind-of": {
-									"version": "3.2.2",
-									"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-									"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
-									"dev": true,
-									"requires": {
-										"is-buffer": "^1.1.5"
-									}
-								}
-							}
-						},
-						"isobject": {
-							"version": "3.0.1",
-							"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-							"integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-							"dev": true
-						},
-						"micromatch": {
-							"version": "3.1.10",
-							"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-							"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-							"dev": true,
-							"requires": {
-								"arr-diff": "^4.0.0",
-								"array-unique": "^0.3.2",
-								"braces": "^2.3.1",
-								"define-property": "^2.0.2",
-								"extend-shallow": "^3.0.2",
-								"extglob": "^2.0.4",
-								"fragment-cache": "^0.2.1",
-								"kind-of": "^6.0.2",
-								"nanomatch": "^1.2.9",
-								"object.pick": "^1.3.0",
-								"regex-not": "^1.0.0",
-								"snapdragon": "^0.8.1",
-								"to-regex": "^3.0.2"
-							}
-						},
-						"to-regex-range": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-							"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-							"dev": true,
-							"requires": {
-								"is-number": "^3.0.0",
-								"repeat-string": "^1.6.1"
-							}
-						},
-						"watchpack": {
-							"version": "1.7.5",
-							"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-							"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
-							"dev": true,
-							"requires": {
-								"chokidar": "^3.4.1",
-								"graceful-fs": "^4.1.2",
-								"neo-async": "^2.5.0",
-								"watchpack-chokidar2": "^2.0.1"
-							}
-						}
-					}
-				},
-				"webpack-sources": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-					"dev": true,
-					"requires": {
-						"source-list-map": "^2.0.0",
-						"source-map": "~0.6.1"
-					}
-				},
-				"whatwg-url": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-					"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
-					"dev": true,
-					"requires": {
-						"tr46": "~0.0.3",
-						"webidl-conversions": "^3.0.0"
-					}
-				},
-				"ws": {
-					"version": "8.7.0",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.7.0.tgz",
-					"integrity": "sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg==",
-					"dev": true
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+			},
+			"peerDependenciesMeta": {
+				"node-notifier": {
+					"optional": true
 				}
 			}
 		},
-		"@storybook/csf": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
-			"integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
-			"dev": true,
-			"requires": {
-				"lodash": "^4.17.15"
+		"node_modules/@jest/reporters/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"@storybook/csf-tools": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.7.tgz",
-			"integrity": "sha512-/vBaknzD8c7H/Zsz0gwhmlNlMwe5slZwXadi6rAQXDkKLzaR1kmz4cQFs8yDR1wWpXaGjNvQxOUAGYjFoGQxzA==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@babel/generator": "^7.12.11",
-				"@babel/parser": "^7.12.11",
-				"@babel/plugin-transform-react-jsx": "^7.12.12",
-				"@babel/preset-env": "^7.12.11",
-				"@babel/traverse": "^7.12.11",
-				"@babel/types": "^7.12.11",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/mdx1-csf": "^0.0.1",
-				"core-js": "^3.8.2",
-				"fs-extra": "^9.0.1",
-				"global": "^4.4.0",
-				"regenerator-runtime": "^0.13.7",
-				"ts-dedent": "^2.0.0"
+		"node_modules/@jest/schemas": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+			"integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+			"dependencies": {
+				"@sinclair/typebox": "^0.27.8"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/source-map": {
+			"version": "29.6.0",
+			"resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.6.0.tgz",
+			"integrity": "sha512-oA+I2SHHQGxDCZpbrsCQSoMLb3Bz547JnM+jUr9qEbuw0vQlWZfpPS7CO9J7XiwKicEz9OFn/IYoLkkiUD7bzA==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+				"@jridgewell/trace-mapping": "^0.3.18",
+				"callsites": "^3.0.0",
+				"graceful-fs": "^4.2.9"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/docs-tools": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.7.tgz",
-			"integrity": "sha512-Aw9uUsqeuw0Z9fpiwxrstMNjNGB9s1Tm57SpMF8ibjLYBYFf5Apz5CwDX7bm6YFtCweaawx4MeQta8qnQMWCFw==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.7",
-				"core-js": "^3.8.2",
-				"doctrine": "^3.0.0",
-				"lodash": "^4.17.21",
-				"regenerator-runtime": "^0.13.7"
+		"node_modules/@jest/test-result": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.6.2.tgz",
+			"integrity": "sha512-3VKFXzcV42EYhMCsJQURptSqnyjqCGbtLuX5Xxb6Pm6gUf1wIRIl+mandIRGJyWKgNKYF9cnstti6Ls5ekduqw==",
+			"dependencies": {
+				"@jest/console": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/istanbul-lib-coverage": "^2.0.0",
+				"collect-v8-coverage": "^1.0.0"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/test-sequencer": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.6.2.tgz",
+			"integrity": "sha512-GVYi6PfPwVejO7slw6IDO0qKVum5jtrJ3KoLGbgBWyr2qr4GaxFV6su+ZAjdTX75Sr1DkMFRk09r2ZVa+wtCGw==",
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"doctrine": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-					"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-					"dev": true,
-					"requires": {
-						"esutils": "^2.0.2"
-					}
-				}
+				"@jest/test-result": "^29.6.2",
+				"graceful-fs": "^4.2.9",
+				"jest-haste-map": "^29.6.2",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"@storybook/manager-webpack4": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.7.tgz",
-			"integrity": "sha512-RmGsr/6PNsafaSm8aTD7e2VXSKT8BQ6Hkg6TAArLoS2TpIUvrNuM2hEqOHzm2POcApC+OE/HN1H0GiXBkH533Q==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@babel/plugin-transform-template-literals": "^7.12.1",
-				"@babel/preset-react": "^7.12.10",
-				"@storybook/addons": "6.5.7",
-				"@storybook/core-client": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"@storybook/ui": "6.5.7",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"@types/webpack": "^4.41.26",
-				"babel-loader": "^8.0.0",
-				"case-sensitive-paths-webpack-plugin": "^2.3.0",
-				"chalk": "^4.1.0",
-				"core-js": "^3.8.2",
-				"css-loader": "^3.6.0",
-				"express": "^4.17.1",
-				"file-loader": "^6.2.0",
-				"find-up": "^5.0.0",
-				"fs-extra": "^9.0.1",
-				"html-webpack-plugin": "^4.0.0",
-				"node-fetch": "^2.6.7",
-				"pnp-webpack-plugin": "1.6.4",
-				"read-pkg-up": "^7.0.1",
-				"regenerator-runtime": "^0.13.7",
-				"resolve-from": "^5.0.0",
-				"style-loader": "^1.3.0",
-				"telejson": "^6.0.8",
-				"terser-webpack-plugin": "^4.2.3",
-				"ts-dedent": "^2.0.0",
-				"url-loader": "^4.1.1",
-				"util-deprecate": "^1.0.2",
-				"webpack": "4",
-				"webpack-dev-middleware": "^3.7.3",
-				"webpack-virtual-modules": "^0.2.2"
+		"node_modules/@jest/transform": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
+			"integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
+			"dependencies": {
+				"@babel/core": "^7.11.6",
+				"@jest/types": "^29.6.3",
+				"@jridgewell/trace-mapping": "^0.3.18",
+				"babel-plugin-istanbul": "^6.1.1",
+				"chalk": "^4.0.0",
+				"convert-source-map": "^2.0.0",
+				"fast-json-stable-stringify": "^2.1.0",
+				"graceful-fs": "^4.2.9",
+				"jest-haste-map": "^29.7.0",
+				"jest-regex-util": "^29.6.3",
+				"jest-util": "^29.7.0",
+				"micromatch": "^4.0.4",
+				"pirates": "^4.0.4",
+				"slash": "^3.0.0",
+				"write-file-atomic": "^4.0.2"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/transform/node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+		},
+		"node_modules/@jest/transform/node_modules/write-file-atomic": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+			"integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
 			"dependencies": {
-				"@types/html-minifier-terser": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-					"integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
-					"dev": true
-				},
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"@types/webpack": {
-					"version": "4.41.32",
-					"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
-					"integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"@types/tapable": "^1",
-						"@types/uglify-js": "*",
-						"@types/webpack-sources": "*",
-						"anymatch": "^3.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"acorn": {
-					"version": "8.7.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-					"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-					"dev": true
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"bluebird": {
-					"version": "3.7.2",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-					"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-					"dev": true
-				},
-				"cacache": {
-					"version": "15.3.0",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-15.3.0.tgz",
-					"integrity": "sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^1.0.0",
-						"@npmcli/move-file": "^1.0.1",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.0.0",
-						"glob": "^7.1.4",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^6.0.0",
-						"minipass": "^3.1.1",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.2",
-						"mkdirp": "^1.0.3",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^8.0.1",
-						"tar": "^6.0.2",
-						"unique-filename": "^1.1.1"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"clean-css": {
-					"version": "4.2.4",
-					"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
-					"integrity": "sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==",
-					"dev": true,
-					"requires": {
-						"source-map": "~0.6.0"
-					}
-				},
-				"commander": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-					"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-					"dev": true
-				},
-				"css-loader": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
-					"integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.3.1",
-						"cssesc": "^3.0.0",
-						"icss-utils": "^4.1.1",
-						"loader-utils": "^1.2.3",
-						"normalize-path": "^3.0.0",
-						"postcss": "^7.0.32",
-						"postcss-modules-extract-imports": "^2.0.0",
-						"postcss-modules-local-by-default": "^3.0.2",
-						"postcss-modules-scope": "^2.2.0",
-						"postcss-modules-values": "^3.0.0",
-						"postcss-value-parser": "^4.1.0",
-						"schema-utils": "^2.7.0",
-						"semver": "^6.3.0"
-					}
-				},
-				"css-select": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-					"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^6.0.1",
-						"domhandler": "^4.3.1",
-						"domutils": "^2.8.0",
-						"nth-check": "^2.0.1"
-					}
-				},
-				"css-what": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-					"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-					"dev": true
-				},
-				"dom-serializer": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-					"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.2.0",
-						"entities": "^2.0.0"
-					}
-				},
-				"domelementtype": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-					"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-					"dev": true
-				},
-				"domhandler": {
-					"version": "4.3.1",
-					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-					"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.2.0"
-					}
-				},
-				"domutils": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-					"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-					"dev": true,
-					"requires": {
-						"dom-serializer": "^1.0.1",
-						"domelementtype": "^2.2.0",
-						"domhandler": "^4.2.0"
-					}
-				},
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
-				},
-				"find-cache-dir": {
-					"version": "3.3.2",
-					"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-					"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-					"dev": true,
-					"requires": {
-						"commondir": "^1.0.1",
-						"make-dir": "^3.0.2",
-						"pkg-dir": "^4.1.0"
-					}
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"html-minifier-terser": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-					"integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-					"dev": true,
-					"requires": {
-						"camel-case": "^4.1.1",
-						"clean-css": "^4.2.3",
-						"commander": "^4.1.1",
-						"he": "^1.2.0",
-						"param-case": "^3.0.3",
-						"relateurl": "^0.2.7",
-						"terser": "^4.6.3"
-					}
-				},
-				"html-webpack-plugin": {
-					"version": "4.5.2",
-					"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.2.tgz",
-					"integrity": "sha512-q5oYdzjKUIPQVjOosjgvCHQOv9Ett9CYYHlgvJeXG0qQvdSojnBq4vAdQBwn1+yGveAwHCoe/rMR86ozX3+c2A==",
-					"dev": true,
-					"requires": {
-						"@types/html-minifier-terser": "^5.0.0",
-						"@types/tapable": "^1.0.5",
-						"@types/webpack": "^4.41.8",
-						"html-minifier-terser": "^5.0.1",
-						"loader-utils": "^1.2.3",
-						"lodash": "^4.17.20",
-						"pretty-error": "^2.1.1",
-						"tapable": "^1.1.3",
-						"util.promisify": "1.0.0"
-					}
-				},
-				"htmlparser2": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-					"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.0.0",
-						"domutils": "^2.5.2",
-						"entities": "^2.0.0"
-					}
-				},
-				"icss-utils": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
-					"integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.14"
-					}
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					}
-				},
-				"locate-path": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^5.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"make-dir": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-					"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-					"dev": true,
-					"requires": {
-						"semver": "^6.0.0"
-					}
-				},
-				"mime": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"nth-check": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-					"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^3.0.2"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"picocolors": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-					"integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-					"dev": true
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					},
-					"dependencies": {
-						"find-up": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-							"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^5.0.0",
-								"path-exists": "^4.0.0"
-							}
-						},
-						"locate-path": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-							"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^4.1.0"
-							}
-						},
-						"p-limit": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-							"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-							"dev": true,
-							"requires": {
-								"p-try": "^2.0.0"
-							}
-						},
-						"p-locate": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-							"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^2.2.0"
-							}
-						}
-					}
-				},
-				"postcss": {
-					"version": "7.0.39",
-					"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-					"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-					"dev": true,
-					"requires": {
-						"picocolors": "^0.2.1",
-						"source-map": "^0.6.1"
-					}
-				},
-				"postcss-modules-extract-imports": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
-					"integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.5"
-					}
-				},
-				"postcss-modules-local-by-default": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
-					"integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^4.1.1",
-						"postcss": "^7.0.32",
-						"postcss-selector-parser": "^6.0.2",
-						"postcss-value-parser": "^4.1.0"
-					}
-				},
-				"postcss-modules-scope": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
-					"integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
-					"dev": true,
-					"requires": {
-						"postcss": "^7.0.6",
-						"postcss-selector-parser": "^6.0.0"
-					}
-				},
-				"postcss-modules-values": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
-					"integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^4.0.0",
-						"postcss": "^7.0.6"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				},
-				"pretty-error": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-					"integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.20",
-						"renderkid": "^2.0.4"
-					}
-				},
-				"renderkid": {
-					"version": "2.0.7",
-					"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-					"integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
-					"dev": true,
-					"requires": {
-						"css-select": "^4.1.3",
-						"dom-converter": "^0.2.0",
-						"htmlparser2": "^6.1.0",
-						"lodash": "^4.17.21",
-						"strip-ansi": "^3.0.1"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-					"integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.5",
-						"ajv": "^6.12.4",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"serialize-javascript": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
-					"integrity": "sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==",
-					"dev": true,
-					"requires": {
-						"randombytes": "^2.1.0"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"source-map-support": {
-					"version": "0.5.21",
-					"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-					"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-					"dev": true,
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"ssri": {
-					"version": "8.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-					"integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^2.0.0"
-					}
-				},
-				"style-loader": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz",
-					"integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==",
-					"dev": true,
-					"requires": {
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^2.7.0"
-					},
-					"dependencies": {
-						"json5": {
-							"version": "2.2.1",
-							"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-							"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-							"dev": true
-						},
-						"loader-utils": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-							"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
-							"dev": true,
-							"requires": {
-								"big.js": "^5.2.2",
-								"emojis-list": "^3.0.0",
-								"json5": "^2.1.2"
-							}
-						}
-					}
-				},
-				"tapable": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-					"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-					"dev": true
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				},
-				"terser-webpack-plugin": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz",
-					"integrity": "sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==",
-					"dev": true,
-					"requires": {
-						"cacache": "^15.0.5",
-						"find-cache-dir": "^3.3.1",
-						"jest-worker": "^26.5.0",
-						"p-limit": "^3.0.2",
-						"schema-utils": "^3.0.0",
-						"serialize-javascript": "^5.0.1",
-						"source-map": "^0.6.1",
-						"terser": "^5.3.4",
-						"webpack-sources": "^1.4.3"
-					},
-					"dependencies": {
-						"commander": {
-							"version": "2.20.3",
-							"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-							"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-							"dev": true
-						},
-						"schema-utils": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-							"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-							"dev": true,
-							"requires": {
-								"@types/json-schema": "^7.0.8",
-								"ajv": "^6.12.5",
-								"ajv-keywords": "^3.5.2"
-							}
-						},
-						"terser": {
-							"version": "5.15.0",
-							"resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-							"integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
-							"dev": true,
-							"requires": {
-								"@jridgewell/source-map": "^0.3.2",
-								"acorn": "^8.5.0",
-								"commander": "^2.20.0",
-								"source-map-support": "~0.5.20"
-							}
-						}
-					}
-				},
-				"tr46": {
-					"version": "0.0.3",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-					"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"webidl-conversions": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-					"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-					"dev": true
-				},
-				"webpack": {
-					"version": "4.46.0",
-					"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-					"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.9.0",
-						"@webassemblyjs/helper-module-context": "1.9.0",
-						"@webassemblyjs/wasm-edit": "1.9.0",
-						"@webassemblyjs/wasm-parser": "1.9.0",
-						"acorn": "^6.4.1",
-						"ajv": "^6.10.2",
-						"ajv-keywords": "^3.4.1",
-						"chrome-trace-event": "^1.0.2",
-						"enhanced-resolve": "^4.5.0",
-						"eslint-scope": "^4.0.3",
-						"json-parse-better-errors": "^1.0.2",
-						"loader-runner": "^2.4.0",
-						"loader-utils": "^1.2.3",
-						"memory-fs": "^0.4.1",
-						"micromatch": "^3.1.10",
-						"mkdirp": "^0.5.3",
-						"neo-async": "^2.6.1",
-						"node-libs-browser": "^2.2.1",
-						"schema-utils": "^1.0.0",
-						"tapable": "^1.1.3",
-						"terser-webpack-plugin": "^1.4.3",
-						"watchpack": "^1.7.4",
-						"webpack-sources": "^1.4.1"
-					},
-					"dependencies": {
-						"acorn": {
-							"version": "6.4.2",
-							"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-							"integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-							"dev": true
-						},
-						"cacache": {
-							"version": "12.0.4",
-							"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-							"integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
-							"dev": true,
-							"requires": {
-								"bluebird": "^3.5.5",
-								"chownr": "^1.1.1",
-								"figgy-pudding": "^3.5.1",
-								"glob": "^7.1.4",
-								"graceful-fs": "^4.1.15",
-								"infer-owner": "^1.0.3",
-								"lru-cache": "^5.1.1",
-								"mississippi": "^3.0.0",
-								"mkdirp": "^0.5.1",
-								"move-concurrently": "^1.0.1",
-								"promise-inflight": "^1.0.1",
-								"rimraf": "^2.6.3",
-								"ssri": "^6.0.1",
-								"unique-filename": "^1.1.1",
-								"y18n": "^4.0.0"
-							}
-						},
-						"chownr": {
-							"version": "1.1.4",
-							"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-							"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-							"dev": true
-						},
-						"find-cache-dir": {
-							"version": "2.1.0",
-							"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-							"integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-							"dev": true,
-							"requires": {
-								"commondir": "^1.0.1",
-								"make-dir": "^2.0.0",
-								"pkg-dir": "^3.0.0"
-							}
-						},
-						"find-up": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-							"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^3.0.0"
-							}
-						},
-						"locate-path": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-							"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^3.0.0",
-								"path-exists": "^3.0.0"
-							}
-						},
-						"lru-cache": {
-							"version": "5.1.1",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-							"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-							"dev": true,
-							"requires": {
-								"yallist": "^3.0.2"
-							}
-						},
-						"make-dir": {
-							"version": "2.1.0",
-							"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-							"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-							"dev": true,
-							"requires": {
-								"pify": "^4.0.1",
-								"semver": "^5.6.0"
-							}
-						},
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						},
-						"mkdirp": {
-							"version": "0.5.6",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-							"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.6"
-							}
-						},
-						"p-limit": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-							"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-							"dev": true,
-							"requires": {
-								"p-try": "^2.0.0"
-							}
-						},
-						"p-locate": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-							"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^2.0.0"
-							}
-						},
-						"path-exists": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-							"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-							"dev": true
-						},
-						"pkg-dir": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-							"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-							"dev": true,
-							"requires": {
-								"find-up": "^3.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"
-							}
-						},
-						"schema-utils": {
-							"version": "1.0.0",
-							"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-							"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-							"dev": true,
-							"requires": {
-								"ajv": "^6.1.0",
-								"ajv-errors": "^1.0.0",
-								"ajv-keywords": "^3.1.0"
-							}
-						},
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						},
-						"serialize-javascript": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-							"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-							"dev": true,
-							"requires": {
-								"randombytes": "^2.1.0"
-							}
-						},
-						"ssri": {
-							"version": "6.0.2",
-							"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-							"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
-							"dev": true,
-							"requires": {
-								"figgy-pudding": "^3.5.1"
-							}
-						},
-						"terser-webpack-plugin": {
-							"version": "1.4.5",
-							"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-							"integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-							"dev": true,
-							"requires": {
-								"cacache": "^12.0.2",
-								"find-cache-dir": "^2.1.0",
-								"is-wsl": "^1.1.0",
-								"schema-utils": "^1.0.0",
-								"serialize-javascript": "^4.0.0",
-								"source-map": "^0.6.1",
-								"terser": "^4.1.2",
-								"webpack-sources": "^1.4.0",
-								"worker-farm": "^1.7.0"
-							}
-						},
-						"yallist": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-							"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-							"dev": true
-						}
-					}
-				},
-				"webpack-dev-middleware": {
-					"version": "3.7.3",
-					"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz",
-					"integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==",
-					"dev": true,
-					"requires": {
-						"memory-fs": "^0.4.1",
-						"mime": "^2.4.4",
-						"mkdirp": "^0.5.1",
-						"range-parser": "^1.2.1",
-						"webpack-log": "^2.0.0"
-					},
-					"dependencies": {
-						"minimist": {
-							"version": "1.2.6",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-							"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
-							"dev": true
-						},
-						"mkdirp": {
-							"version": "0.5.6",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-							"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.6"
-							}
-						}
-					}
-				},
-				"webpack-sources": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-					"dev": true,
-					"requires": {
-						"source-list-map": "^2.0.0",
-						"source-map": "~0.6.1"
-					}
-				},
-				"webpack-virtual-modules": {
-					"version": "0.2.2",
-					"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.2.2.tgz",
-					"integrity": "sha512-kDUmfm3BZrei0y+1NTHJInejzxfhtU8eDj2M7OKb2IWrPFAeO1SOH2KuQ68MSZu9IGEHcxbkKKR1v18FrUSOmA==",
-					"dev": true,
-					"requires": {
-						"debug": "^3.0.0"
-					}
-				},
-				"whatwg-url": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-					"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
-					"dev": true,
-					"requires": {
-						"tr46": "~0.0.3",
-						"webidl-conversions": "^3.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"imurmurhash": "^0.1.4",
+				"signal-exit": "^3.0.7"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
 			}
 		},
-		"@storybook/manager-webpack5": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-webpack5/-/manager-webpack5-6.5.7.tgz",
-			"integrity": "sha512-4TZKe71noCRui8sUxSuSqO6zMnCxCLn7dE1dOlCr/UvyZbCaGWACO5olUDQrT+n1glZL8i9L998JGQroksucNw==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.12.10",
-				"@babel/plugin-transform-template-literals": "^7.12.1",
-				"@babel/preset-react": "^7.12.10",
-				"@storybook/addons": "6.5.7",
-				"@storybook/core-client": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/theming": "6.5.7",
-				"@storybook/ui": "6.5.7",
-				"@types/node": "^14.0.10 || ^16.0.0",
-				"babel-loader": "^8.0.0",
-				"case-sensitive-paths-webpack-plugin": "^2.3.0",
-				"chalk": "^4.1.0",
-				"core-js": "^3.8.2",
-				"css-loader": "^5.0.1",
-				"express": "^4.17.1",
-				"find-up": "^5.0.0",
-				"fs-extra": "^9.0.1",
-				"html-webpack-plugin": "^5.0.0",
-				"node-fetch": "^2.6.7",
-				"process": "^0.11.10",
-				"read-pkg-up": "^7.0.1",
-				"regenerator-runtime": "^0.13.7",
-				"resolve-from": "^5.0.0",
-				"style-loader": "^2.0.0",
-				"telejson": "^6.0.8",
-				"terser-webpack-plugin": "^5.0.3",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"webpack": "^5.9.0",
-				"webpack-dev-middleware": "^4.1.0",
-				"webpack-virtual-modules": "^0.4.1"
+		"node_modules/@jest/types": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+			"integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+			"dependencies": {
+				"@jest/schemas": "^29.6.3",
+				"@types/istanbul-lib-coverage": "^2.0.0",
+				"@types/istanbul-reports": "^3.0.0",
+				"@types/node": "*",
+				"@types/yargs": "^17.0.8",
+				"chalk": "^4.0.0"
 			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"css-loader": {
-					"version": "5.2.7",
-					"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.7.tgz",
-					"integrity": "sha512-Q7mOvpBNBG7YrVGMxRxcBJZFL75o+cH2abNASdibkj/fffYD8qWbInZrD0S9ccI6vZclF3DsHE7njGlLtaHbhg==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^5.1.0",
-						"loader-utils": "^2.0.0",
-						"postcss": "^8.2.15",
-						"postcss-modules-extract-imports": "^3.0.0",
-						"postcss-modules-local-by-default": "^4.0.0",
-						"postcss-modules-scope": "^3.0.0",
-						"postcss-modules-values": "^4.0.0",
-						"postcss-value-parser": "^4.1.0",
-						"schema-utils": "^3.0.0",
-						"semver": "^7.3.5"
-					}
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^5.0.0"
-					}
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^3.0.2"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"style-loader": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-					"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-					"dev": true,
-					"requires": {
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^3.0.0"
-					}
-				},
-				"telejson": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/telejson/-/telejson-6.0.8.tgz",
-					"integrity": "sha512-nerNXi+j8NK1QEfBHtZUN/aLdDcyupA//9kAboYLrtzZlPLpUfqbVGWb9zz91f/mIjRbAYhbgtnJHY8I1b5MBg==",
-					"dev": true,
-					"requires": {
-						"@types/is-function": "^1.0.0",
-						"global": "^4.4.0",
-						"is-function": "^1.0.2",
-						"is-regex": "^1.1.2",
-						"is-symbol": "^1.0.3",
-						"isobject": "^4.0.0",
-						"lodash": "^4.17.21",
-						"memoizerific": "^1.11.3"
-					}
-				},
-				"tr46": {
-					"version": "0.0.3",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-					"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"webidl-conversions": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-					"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-					"dev": true
-				},
-				"whatwg-url": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-					"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
-					"dev": true,
-					"requires": {
-						"tr46": "~0.0.3",
-						"webidl-conversions": "^3.0.0"
-					}
-				}
+				"@jridgewell/set-array": "^1.2.1",
+				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			},
+			"engines": {
+				"node": ">=6.0.0"
 			}
 		},
-		"@storybook/mdx1-csf": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz",
-			"integrity": "sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==",
-			"dev": true,
-			"requires": {
-				"@babel/generator": "^7.12.11",
-				"@babel/parser": "^7.12.11",
-				"@babel/preset-env": "^7.12.11",
-				"@babel/types": "^7.12.11",
-				"@mdx-js/mdx": "^1.6.22",
-				"@types/lodash": "^4.14.167",
-				"js-string-escape": "^1.0.1",
-				"loader-utils": "^2.0.0",
-				"lodash": "^4.17.21",
-				"prettier": ">=2.2.1 <=2.3.0",
-				"ts-dedent": "^2.0.0"
-			},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/set-array": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/source-map": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+			"integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
 			"dependencies": {
-				"prettier": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
-					"integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
-					"dev": true
-				}
+				"@jridgewell/gen-mapping": "^0.3.0",
+				"@jridgewell/trace-mapping": "^0.3.9"
 			}
 		},
-		"@storybook/node-logger": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.7.tgz",
-			"integrity": "sha512-OrHu5p2E5i7P2v2hQAOtZw6Od1e2nrP6L7w5SxUPgccUnKUD9dRX5Y8qbAcPZO3XCkMLjpjAbC1xBXG0eFkn9g==",
-			"dev": true,
-			"requires": {
-				"@types/npmlog": "^4.1.2",
-				"chalk": "^4.1.0",
-				"core-js": "^3.8.2",
-				"npmlog": "^5.0.1",
-				"pretty-hrtime": "^1.0.3"
-			},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.4.15",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.25",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"are-we-there-yet": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-					"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-					"dev": true,
-					"requires": {
-						"delegates": "^1.0.0",
-						"readable-stream": "^3.6.0"
-					}
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"gauge": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-					"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-					"dev": true,
-					"requires": {
-						"aproba": "^1.0.3 || ^2.0.0",
-						"color-support": "^1.1.2",
-						"console-control-strings": "^1.0.0",
-						"has-unicode": "^2.0.1",
-						"object-assign": "^4.1.1",
-						"signal-exit": "^3.0.0",
-						"string-width": "^4.2.3",
-						"strip-ansi": "^6.0.1",
-						"wide-align": "^1.1.2"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"npmlog": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-					"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-					"dev": true,
-					"requires": {
-						"are-we-there-yet": "^2.0.0",
-						"console-control-strings": "^1.1.0",
-						"gauge": "^3.0.0",
-						"set-blocking": "^2.0.0"
-					}
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
-		"@storybook/postinstall": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.7.tgz",
-			"integrity": "sha512-902JjgB2o+NiiLCPV0b4GHX9SbnY1OkvfvmkqpD3UqWh8djpkSQwvli9npM1J2NEu4BxCqbifYJI7V4JmZbdsw==",
-			"dev": true,
-			"requires": {
-				"core-js": "^3.8.2"
+		"node_modules/@jsdevtools/ono": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+			"integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
+			"dev": true
+		},
+		"node_modules/@juggle/resize-observer": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+			"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+			"dev": true
+		},
+		"node_modules/@kwsites/file-exists": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+			"integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+			"dependencies": {
+				"debug": "^4.1.1"
 			}
 		},
-		"@storybook/preview-web": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.7.tgz",
-			"integrity": "sha512-EH8gdl334D8EDVL1VJjRURcUou5Sv6BwgismL4E6wjSFmWxL9egxYDnGJJEh3mjIkAtGb0zpksYn/VNWPA8c8A==",
+		"node_modules/@kwsites/promise-deferred": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+			"integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="
+		},
+		"node_modules/@leichtgewicht/ip-codec": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+			"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
+		},
+		"node_modules/@lerna/child-process": {
+			"version": "7.1.4",
+			"resolved": "https://registry.npmjs.org/@lerna/child-process/-/child-process-7.1.4.tgz",
+			"integrity": "sha512-cSiMDx9oI9vvVT+V/WHcbqrksNoc9PIPFiks1lPS7zrVWkEbgA6REQyYmRd2H71kihzqhX5TJ20f2dWv6oEPdA==",
 			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/channel-postmessage": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/store": "6.5.7",
-				"ansi-to-html": "^0.6.11",
-				"core-js": "^3.8.2",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"qs": "^6.10.0",
-				"regenerator-runtime": "^0.13.7",
-				"synchronous-promise": "^2.0.15",
-				"ts-dedent": "^2.0.0",
-				"unfetch": "^4.2.0",
-				"util-deprecate": "^1.0.2"
-			},
 			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"qs": {
-					"version": "6.10.5",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz",
-					"integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==",
-					"dev": true,
-					"requires": {
-						"side-channel": "^1.0.4"
-					}
-				}
+				"chalk": "^4.1.0",
+				"execa": "^5.0.0",
+				"strong-log-transformer": "^2.1.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
 			}
 		},
-		"@storybook/react": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.5.7.tgz",
-			"integrity": "sha512-jMY1vk1WL1otEODl5BxD1kSh5Eqg+SvZW5CJ7sS6q53i3teOhaGhugvuSTuV9lnBzLOZu8atIdFL0ewdOkpwsg==",
-			"dev": true,
-			"requires": {
-				"@babel/preset-flow": "^7.12.1",
-				"@babel/preset-react": "^7.12.10",
-				"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-				"@storybook/addons": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"@storybook/docs-tools": "6.5.7",
-				"@storybook/node-logger": "6.5.7",
-				"@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/store": "6.5.7",
-				"@types/estree": "^0.0.51",
-				"@types/node": "^14.14.20 || ^16.0.0",
-				"@types/webpack-env": "^1.16.0",
-				"acorn": "^7.4.1",
-				"acorn-jsx": "^5.3.1",
-				"acorn-walk": "^7.2.0",
-				"babel-plugin-add-react-displayname": "^0.0.5",
-				"babel-plugin-react-docgen": "^4.2.1",
-				"core-js": "^3.8.2",
-				"escodegen": "^2.0.0",
-				"fs-extra": "^9.0.1",
-				"global": "^4.4.0",
-				"html-tags": "^3.1.0",
-				"lodash": "^4.17.21",
-				"prop-types": "^15.7.2",
-				"react-element-to-jsx-string": "^14.3.4",
-				"react-refresh": "^0.11.0",
-				"read-pkg-up": "^7.0.1",
-				"regenerator-runtime": "^0.13.7",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2",
-				"webpack": ">=4.43.0 <6.0.0"
-			},
-			"dependencies": {
-				"@pmmmwh/react-refresh-webpack-plugin": {
-					"version": "0.5.7",
-					"resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz",
-					"integrity": "sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==",
-					"dev": true,
-					"requires": {
-						"ansi-html-community": "^0.0.8",
-						"common-path-prefix": "^3.0.0",
-						"core-js-pure": "^3.8.1",
-						"error-stack-parser": "^2.0.6",
-						"find-up": "^5.0.0",
-						"html-entities": "^2.1.0",
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^3.0.0",
-						"source-map": "^0.7.3"
-					}
-				},
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					},
-					"dependencies": {
-						"find-up": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-							"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^5.0.0",
-								"path-exists": "^4.0.0"
-							}
-						},
-						"locate-path": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-							"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^4.1.0"
-							}
-						},
-						"p-limit": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-							"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-							"dev": true,
-							"requires": {
-								"p-try": "^2.0.0"
-							}
-						},
-						"p-locate": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-							"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^2.2.0"
-							}
-						}
-					}
-				},
-				"@types/estree": {
-					"version": "0.0.51",
-					"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-					"integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-					"dev": true
-				},
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"acorn": {
-					"version": "7.4.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^5.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^3.0.2"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"react-refresh": {
-					"version": "0.11.0",
-					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
-					"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"source-map": {
-					"version": "0.7.4",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-					"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-					"dev": true
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/@lerna/child-process/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@storybook/react-docgen-typescript-plugin": {
-			"version": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
-			"resolved": "https://registry.npmjs.org/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0.tgz",
-			"integrity": "sha512-eVg3BxlOm2P+chijHBTByr90IZVUtgRW56qEOLX7xlww2NBuKrcavBlcmn+HH7GIUktquWkMPtvy6e0W0NgA5w==",
+		"node_modules/@lerna/child-process/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
 			"dev": true,
-			"requires": {
-				"debug": "^4.1.1",
-				"endent": "^2.0.1",
-				"find-cache-dir": "^3.3.1",
-				"flat-cache": "^3.0.4",
-				"micromatch": "^4.0.2",
-				"react-docgen-typescript": "^2.1.1",
-				"tslib": "^2.0.0"
-			},
 			"dependencies": {
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"find-cache-dir": {
-					"version": "3.3.2",
-					"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-					"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-					"dev": true,
-					"requires": {
-						"commondir": "^1.0.1",
-						"make-dir": "^3.0.2",
-						"pkg-dir": "^4.1.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"make-dir": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-					"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-					"dev": true,
-					"requires": {
-						"semver": "^6.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 			}
 		},
-		"@storybook/router": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.7.tgz",
-			"integrity": "sha512-edWEdAb8O0rSgdXoBZDDuNlQg2cOmC/nJ6gXj9zBotzmXqsbxWyjKGooG1dU6dnKshUqE1RmWF7/N1WMluLf0A==",
+		"node_modules/@lerna/child-process/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
 			"dev": true,
-			"requires": {
-				"@storybook/client-logger": "6.5.7",
-				"core-js": "^3.8.2",
-				"regenerator-runtime": "^0.13.7"
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@storybook/source-loader": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.7.tgz",
-			"integrity": "sha512-nj24TSGdF9J1gD5Fj9Z2hPRAQwqBJoBKD/fmTSFZop0qaJOOyeuxZR5022dQh8UWWoBa3WOQADMTNi5RqQZkiA==",
+		"node_modules/@lerna/child-process/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
 			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"core-js": "^3.8.2",
-				"estraverse": "^5.2.0",
-				"global": "^4.4.0",
-				"loader-utils": "^2.0.0",
-				"lodash": "^4.17.21",
-				"prettier": ">=2.2.1 <=2.3.0",
-				"regenerator-runtime": "^0.13.7"
-			},
-			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				},
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				},
-				"prettier": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
-					"integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=10.17.0"
 			}
 		},
-		"@storybook/store": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.5.7.tgz",
-			"integrity": "sha512-d64towcdylC6TXNL2oJklCpwN3XcUGgZzQ9zgoV8BUlOlsj9tNq8eo95uzTURnLg1Q5uHoDDKWuXrrKj03HHxw==",
+		"node_modules/@lerna/child-process/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
 			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/csf": "0.0.2--canary.4566f4d.1",
-				"core-js": "^3.8.2",
-				"fast-deep-equal": "^3.1.3",
-				"global": "^4.4.0",
-				"lodash": "^4.17.21",
-				"memoizerific": "^1.11.3",
-				"regenerator-runtime": "^0.13.7",
-				"slash": "^3.0.0",
-				"stable": "^0.1.8",
-				"synchronous-promise": "^2.0.15",
-				"ts-dedent": "^2.0.0",
-				"util-deprecate": "^1.0.2"
+			"engines": {
+				"node": ">=8"
 			},
-			"dependencies": {
-				"@storybook/csf": {
-					"version": "0.0.2--canary.4566f4d.1",
-					"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.2--canary.4566f4d.1.tgz",
-					"integrity": "sha512-9OVvMVh3t9znYZwb0Svf/YQoxX2gVOeQTGe2bses2yj+a3+OJnCrUF3/hGv6Em7KujtOdL2LL+JnG49oMVGFgQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.15"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@storybook/telemetry": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.7.tgz",
-			"integrity": "sha512-RHrjAConMqGIsu1TgNXztWtWOXTvvCHDWyGoLagCgZYgjGJ4sukp+ZtrbkayNDkkWWD0lpMzsdDEYCJuru/Sig==",
+		"node_modules/@lerna/child-process/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
 			"dev": true,
-			"requires": {
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/core-common": "6.5.7",
-				"chalk": "^4.1.0",
-				"core-js": "^3.8.2",
-				"detect-package-manager": "^2.0.1",
-				"fetch-retry": "^5.0.2",
-				"fs-extra": "^9.0.1",
-				"global": "^4.4.0",
-				"isomorphic-unfetch": "^3.1.0",
-				"nanoid": "^3.3.1",
-				"read-pkg-up": "^7.0.1",
-				"regenerator-runtime": "^0.13.7"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"@storybook/theming": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.7.tgz",
-			"integrity": "sha512-6zp1V84DSBcS8BtFOCJlF2/nIonjQmr+dILPxaM3lCm/X003i2jAQrBKTfPlmzCeDn07PBhzHaRJ3wJskfmeNw==",
-			"dev": true,
-			"requires": {
-				"@storybook/client-logger": "6.5.7",
-				"core-js": "^3.8.2",
-				"regenerator-runtime": "^0.13.7"
-			}
-		},
-		"@storybook/ui": {
-			"version": "6.5.7",
-			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.7.tgz",
-			"integrity": "sha512-NOg44bc/w7FweuM2fa99PxsgI9qoG2p5vhTQ4MOI/7QnOUDn+EenlapsRos+/Sk2XTaB2QmM43boUkravMSouA==",
-			"dev": true,
-			"requires": {
-				"@storybook/addons": "6.5.7",
-				"@storybook/api": "6.5.7",
-				"@storybook/channels": "6.5.7",
-				"@storybook/client-logger": "6.5.7",
-				"@storybook/components": "6.5.7",
-				"@storybook/core-events": "6.5.7",
-				"@storybook/router": "6.5.7",
-				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.5.7",
-				"core-js": "^3.8.2",
-				"regenerator-runtime": "^0.13.7",
-				"resolve-from": "^5.0.0"
-			},
+		"node_modules/@lerna/child-process/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dev": true,
 			"dependencies": {
-				"@storybook/semver": {
-					"version": "7.3.2",
-					"resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz",
-					"integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==",
-					"dev": true,
-					"requires": {
-						"core-js": "^3.6.5",
-						"find-up": "^4.1.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				}
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@svgr/babel-plugin-add-jsx-attribute": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz",
-			"integrity": "sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-remove-jsx-attribute": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.0.0.tgz",
-			"integrity": "sha512-aVdtfx9jlaaxc3unA6l+M9YRnKIZjOhQPthLKqmTXC8UVkBLDRGwPKo+r8n3VZN8B34+yVajzPTZ+ptTSuZZCw==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-remove-jsx-empty-expression": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.0.0.tgz",
-			"integrity": "sha512-Ccj42ApsePD451AZJJf1QzTD1B/BOU392URJTeXFxSK709i0KUsGtbwyiqsKu7vsYxpTM0IA5clAKDyf9RCZyA==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-replace-jsx-attribute-value": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.0.0.tgz",
-			"integrity": "sha512-88V26WGyt1Sfd1emBYmBJRWMmgarrExpKNVmI9vVozha4kqs6FzQJ/Kp5+EYli1apgX44518/0+t9+NU36lThQ==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-svg-dynamic-title": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.0.0.tgz",
-			"integrity": "sha512-F7YXNLfGze+xv0KMQxrl2vkNbI9kzT9oDK55/kUuymh1ACyXkMV+VZWX1zEhSTfEKh7VkHVZGmVtHg8eTZ6PRg==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-svg-em-dimensions": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.0.0.tgz",
-			"integrity": "sha512-+rghFXxdIqJNLQK08kwPBD3Z22/0b2tEZ9lKiL/yTfuyj1wW8HUXu4bo/XkogATIYuXSghVQOOCwURXzHGKyZA==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-transform-react-native-svg": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.0.0.tgz",
-			"integrity": "sha512-VaphyHZ+xIKv5v0K0HCzyfAaLhPGJXSk2HkpYfXIOKb7DjLBv0soHDxNv6X0vr2titsxE7klb++u7iOf7TSrFQ==",
-			"dev": true
-		},
-		"@svgr/babel-plugin-transform-svg-component": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.2.0.tgz",
-			"integrity": "sha512-bhYIpsORb++wpsp91fymbFkf09Z/YEKR0DnFjxvN+8JHeCUD2unnh18jIMKnDJTWtvpTaGYPXELVe4OOzFI0xg==",
-			"dev": true
-		},
-		"@svgr/babel-preset": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.2.0.tgz",
-			"integrity": "sha512-4WQNY0J71JIaL03DRn0vLiz87JXx0b9dYm2aA8XHlQJQoixMl4r/soYHm8dsaJZ3jWtkCiOYy48dp9izvXhDkQ==",
+		"node_modules/@lerna/child-process/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
 			"dev": true,
-			"requires": {
-				"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
-				"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
-				"@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
-				"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
-				"@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
-				"@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
-				"@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
-				"@svgr/babel-plugin-transform-svg-component": "^6.2.0"
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@svgr/core": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.2.1.tgz",
-			"integrity": "sha512-NWufjGI2WUyrg46mKuySfviEJ6IxHUOm/8a3Ph38VCWSp+83HBraCQrpEM3F3dB6LBs5x8OElS8h3C0oOJaJAA==",
+		"node_modules/@lerna/child-process/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
 			"dev": true,
-			"requires": {
-				"@svgr/plugin-jsx": "^6.2.1",
-				"camelcase": "^6.2.0",
-				"cosmiconfig": "^7.0.1"
-			},
-			"dependencies": {
-				"camelcase": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-					"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-					"dev": true
-				},
-				"cosmiconfig": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
-					"integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.2.1",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.10.0"
-					}
-				},
-				"import-fresh": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-					"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-					"dev": true
-				},
-				"yaml": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-					"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@svgr/hast-util-to-babel-ast": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.2.1.tgz",
-			"integrity": "sha512-pt7MMkQFDlWJVy9ULJ1h+hZBDGFfSCwlBNW1HkLnVi7jUhyEXUaGYWi1x6bM2IXuAR9l265khBT4Av4lPmaNLQ==",
+		"node_modules/@lerna/child-process/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
 			"dev": true,
-			"requires": {
-				"@babel/types": "^7.15.6",
-				"entities": "^3.0.1"
-			},
 			"dependencies": {
-				"entities": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-					"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
-					"dev": true
-				}
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@svgr/plugin-jsx": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.2.1.tgz",
-			"integrity": "sha512-u+MpjTsLaKo6r3pHeeSVsh9hmGRag2L7VzApWIaS8imNguqoUwDq/u6U/NDmYs/KAsrmtBjOEaAAPbwNGXXp1g==",
+		"node_modules/@lerna/child-process/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
 			"dev": true,
-			"requires": {
-				"@babel/core": "^7.15.5",
-				"@svgr/babel-preset": "^6.2.0",
-				"@svgr/hast-util-to-babel-ast": "^6.2.1",
-				"svg-parser": "^2.0.2"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@svgr/plugin-svgo": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.2.0.tgz",
-			"integrity": "sha512-oDdMQONKOJEbuKwuy4Np6VdV6qoaLLvoY86hjvQEgU82Vx1MSWRyYms6Sl0f+NtqxLI/rDVufATbP/ev996k3Q==",
+		"node_modules/@lerna/child-process/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
 			"dev": true,
-			"requires": {
-				"cosmiconfig": "^7.0.1",
-				"deepmerge": "^4.2.2",
-				"svgo": "^2.5.0"
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
 			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@lerna/create": {
+			"version": "7.1.4",
+			"resolved": "https://registry.npmjs.org/@lerna/create/-/create-7.1.4.tgz",
+			"integrity": "sha512-D5YWXsXIxWb1aGqcbtttczg86zMzkNhcs00/BleFNxdNYlTRdjLIReELOGBGrq3Hij05UN+7Dv9EKnPFJVbqAw==",
+			"dev": true,
 			"dependencies": {
-				"@trysound/sax": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-					"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-					"dev": true
-				},
-				"commander": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-					"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-					"dev": true
-				},
-				"cosmiconfig": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
-					"integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.2.1",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.10.0"
-					}
-				},
-				"css-select": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
-					"integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^5.1.0",
-						"domhandler": "^4.3.0",
-						"domutils": "^2.8.0",
-						"nth-check": "^2.0.1"
-					}
-				},
-				"css-what": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
-					"integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
-					"dev": true
-				},
-				"dom-serializer": {
-					"version": "1.3.2",
-					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-					"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.2.0",
-						"entities": "^2.0.0"
-					}
-				},
-				"domelementtype": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-					"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-					"dev": true
-				},
-				"domhandler": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
-					"integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.2.0"
-					}
-				},
-				"domutils": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-					"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-					"dev": true,
-					"requires": {
-						"dom-serializer": "^1.0.1",
-						"domelementtype": "^2.2.0",
-						"domhandler": "^4.2.0"
-					}
-				},
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
-				},
-				"import-fresh": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-					"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					}
-				},
-				"nth-check": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
-					"integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0"
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-					"dev": true
-				},
-				"svgo": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-					"integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
-					"dev": true,
-					"requires": {
-						"@trysound/sax": "0.2.0",
-						"commander": "^7.2.0",
-						"css-select": "^4.1.3",
-						"css-tree": "^1.1.3",
-						"csso": "^4.2.0",
-						"picocolors": "^1.0.0",
-						"stable": "^0.1.8"
-					}
-				},
-				"yaml": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-					"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-					"dev": true
-				}
+				"@lerna/child-process": "7.1.4",
+				"dedent": "0.7.0",
+				"fs-extra": "^11.1.1",
+				"init-package-json": "5.0.0",
+				"npm-package-arg": "8.1.1",
+				"p-reduce": "^2.1.0",
+				"pacote": "^15.2.0",
+				"pify": "5.0.0",
+				"semver": "^7.3.4",
+				"slash": "^3.0.0",
+				"validate-npm-package-license": "^3.0.4",
+				"validate-npm-package-name": "5.0.0",
+				"yargs-parser": "20.2.4"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
 			}
 		},
-		"@svgr/webpack": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.2.1.tgz",
-			"integrity": "sha512-h09ngMNd13hnePwgXa+Y5CgOjzlCvfWLHg+MBnydEedAnuLRzUHUJmGS3o2OsrhxTOOqEsPOFt5v/f6C5Qulcw==",
+		"node_modules/@lerna/create/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
 			"dev": true,
-			"requires": {
-				"@babel/core": "^7.15.5",
-				"@babel/plugin-transform-react-constant-elements": "^7.14.5",
-				"@babel/preset-env": "^7.15.6",
-				"@babel/preset-react": "^7.14.5",
-				"@babel/preset-typescript": "^7.15.0",
-				"@svgr/core": "^6.2.1",
-				"@svgr/plugin-jsx": "^6.2.1",
-				"@svgr/plugin-svgo": "^6.2.0"
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
 			}
 		},
-		"@szmarczak/http-timer": {
-			"version": "4.0.6",
-			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
-			"integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+		"node_modules/@lerna/create/node_modules/hosted-git-info": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
+			"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
 			"dev": true,
-			"requires": {
-				"defer-to-connect": "^2.0.0"
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@tannin/compile": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@tannin/compile/-/compile-1.1.0.tgz",
-			"integrity": "sha512-n8m9eNDfoNZoxdvWiTfW/hSPhehzLJ3zW7f8E7oT6mCROoMNWCB4TYtv041+2FMAxweiE0j7i1jubQU4MEC/Gg==",
-			"requires": {
-				"@tannin/evaluate": "^1.2.0",
-				"@tannin/postfix": "^1.1.0"
+		"node_modules/@lerna/create/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
 			}
 		},
-		"@tannin/evaluate": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@tannin/evaluate/-/evaluate-1.2.0.tgz",
-			"integrity": "sha512-3ioXvNowbO/wSrxsDG5DKIMxC81P0QrQTYai8zFNY+umuoHWRPbQ/TuuDEOju9E+jQDXmj6yI5GyejNuh8I+eg=="
-		},
-		"@tannin/plural-forms": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@tannin/plural-forms/-/plural-forms-1.1.0.tgz",
-			"integrity": "sha512-xl9R2mDZO/qiHam1AgMnAES6IKIg7OBhcXqy6eDsRCdXuxAFPcjrej9HMjyCLE0DJ/8cHf0i5OQTstuBRhpbHw==",
-			"requires": {
-				"@tannin/compile": "^1.1.0"
+		"node_modules/@lerna/create/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@tannin/postfix": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.1.0.tgz",
-			"integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw=="
-		},
-		"@testing-library/dom": {
-			"version": "8.13.0",
-			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
-			"integrity": "sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==",
+		"node_modules/@lerna/create/node_modules/npm-package-arg": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
+			"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
 			"dev": true,
-			"requires": {
-				"@babel/code-frame": "^7.10.4",
-				"@babel/runtime": "^7.12.5",
-				"@types/aria-query": "^4.2.0",
-				"aria-query": "^5.0.0",
-				"chalk": "^4.1.0",
-				"dom-accessibility-api": "^0.5.9",
-				"lz-string": "^1.4.4",
-				"pretty-format": "^27.0.2"
+			"dependencies": {
+				"hosted-git-info": "^3.0.6",
+				"semver": "^7.0.0",
+				"validate-npm-package-name": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@lerna/create/node_modules/npm-package-arg/node_modules/validate-npm-package-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
+			"integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==",
+			"dev": true,
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"aria-query": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
-					"integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.5.1",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-					"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"builtins": "^1.0.3"
 			}
 		},
-		"@testing-library/jest-dom": {
-			"version": "5.16.4",
-			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
-			"integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+		"node_modules/@lerna/create/node_modules/pify": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+			"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.9.2",
-				"@types/testing-library__jest-dom": "^5.9.1",
-				"aria-query": "^5.0.0",
-				"chalk": "^3.0.0",
-				"css": "^3.0.0",
-				"css.escape": "^1.5.1",
-				"dom-accessibility-api": "^0.5.6",
-				"lodash": "^4.17.15",
-				"redent": "^3.0.0"
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"aria-query": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
-					"integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
-					"dev": true
-				},
-				"atob": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-					"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-					"dev": true
-				},
-				"chalk": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"css": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-					"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.4",
-						"source-map": "^0.6.1",
-						"source-map-resolve": "^0.6.0"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"indent-string": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-					"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-					"dev": true
-				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"redent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-					"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-					"dev": true,
-					"requires": {
-						"indent-string": "^4.0.0",
-						"strip-indent": "^3.0.0"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"source-map-resolve": {
-					"version": "0.6.0",
-					"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-					"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-					"dev": true,
-					"requires": {
-						"atob": "^2.1.2",
-						"decode-uri-component": "^0.2.0"
-					}
-				},
-				"strip-indent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-					"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-					"dev": true,
-					"requires": {
-						"min-indent": "^1.0.0"
-					}
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@testing-library/react": {
-			"version": "12.1.5",
-			"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz",
-			"integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==",
+		"node_modules/@lerna/create/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.12.5",
-				"@testing-library/dom": "^8.0.0",
-				"@types/react-dom": "<18.0.0"
+			"engines": {
+				"node": ">= 10.0.0"
 			}
 		},
-		"@testing-library/react-native": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/@testing-library/react-native/-/react-native-9.1.0.tgz",
-			"integrity": "sha512-YBCSOIMYlh8gI0VG7ExRe80hNpfhC+i7j0cvpwiopUYtbpft8bMJXO35A4zEk7BkiWXEq6bYZ7VDJR3muSLhyQ==",
+		"node_modules/@lerna/create/node_modules/validate-npm-package-name": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
+			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
 			"dev": true,
-			"requires": {
-				"pretty-format": "^27.0.0"
+			"dependencies": {
+				"builtins": "^5.0.0"
 			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@lerna/create/node_modules/validate-npm-package-name/node_modules/builtins": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+			"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
+			"dev": true,
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.5.1",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-					"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"semver": "^7.0.0"
 			}
 		},
-		"@testing-library/user-event": {
-			"version": "14.2.0",
-			"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.2.0.tgz",
-			"integrity": "sha512-+hIlG4nJS6ivZrKnOP7OGsDu9Fxmryj9vCl8x0ZINtTJcCHs2zLsYif5GzuRiBF2ck5GZG2aQr7Msg+EHlnYVQ==",
+		"node_modules/@lerna/create/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true
 		},
-		"@tootallnate/once": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-			"integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-			"dev": true
+		"node_modules/@mdx-js/react": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
+			"integrity": "sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==",
+			"dev": true,
+			"dependencies": {
+				"@types/mdx": "^2.0.0",
+				"@types/react": ">=16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			},
+			"peerDependencies": {
+				"react": ">=16"
+			}
 		},
-		"@trysound/sax": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
-			"integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
-			"dev": true
+		"node_modules/@ndelangen/get-tarball": {
+			"version": "3.0.9",
+			"resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz",
+			"integrity": "sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==",
+			"dev": true,
+			"dependencies": {
+				"gunzip-maybe": "^1.4.2",
+				"pump": "^3.0.0",
+				"tar-fs": "^2.1.1"
+			}
 		},
-		"@types/anymatch": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
-			"integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
-			"dev": true
+		"node_modules/@ndelangen/get-tarball/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
 		},
-		"@types/aria-query": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
-			"integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
-			"dev": true
+		"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+			"version": "5.1.1-v1",
+			"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
+			"integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+			"license": "MIT",
+			"dependencies": {
+				"eslint-scope": "5.1.1"
+			}
 		},
-		"@types/babel__core": {
-			"version": "7.1.18",
-			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.18.tgz",
-			"integrity": "sha512-S7unDjm/C7z2A2R9NzfKCK1I+BAALDtxEmsJBwlB3EzNfb929ykjL++1CK9LO++EIp2fQrC8O+BwjKvz6UeDyQ==",
-			"dev": true,
-			"requires": {
-				"@babel/parser": "^7.1.0",
-				"@babel/types": "^7.0.0",
-				"@types/babel__generator": "*",
-				"@types/babel__template": "*",
-				"@types/babel__traverse": "*"
+		"node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/eslint-scope": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
 			}
 		},
-		"@types/babel__generator": {
-			"version": "7.6.4",
-			"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
-			"integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
-			"dev": true,
-			"requires": {
-				"@babel/types": "^7.0.0"
+		"node_modules/@nodelib/fs.scandir": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.2.tgz",
+			"integrity": "sha512-wrIBsjA5pl13f0RN4Zx4FNWmU71lv03meGKnqRUoCyan17s4V3WL92f3w3AIuWbNnpcrQyFBU5qMavJoB8d27w==",
+			"dependencies": {
+				"@nodelib/fs.stat": "2.0.2",
+				"run-parallel": "^1.1.9"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@types/babel__template": {
-			"version": "7.4.1",
-			"resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
-			"integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
-			"dev": true,
-			"requires": {
-				"@babel/parser": "^7.1.0",
-				"@babel/types": "^7.0.0"
+		"node_modules/@nodelib/fs.stat": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.2.tgz",
+			"integrity": "sha512-z8+wGWV2dgUhLqrtRYa03yDx4HWMvXKi1z8g3m2JyxAx8F7xk74asqPk5LAETjqDSGLFML/6CDl0+yFunSYicw==",
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@types/babel__traverse": {
-			"version": "7.0.11",
-			"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.11.tgz",
-			"integrity": "sha512-ddHK5icION5U6q11+tV2f9Mo6CZVuT8GJKld2q9LqHSZbvLbH34Kcu2yFGckZut453+eQU6btIA3RihmnRgI+Q==",
-			"dev": true,
-			"requires": {
-				"@babel/types": "^7.3.0"
+		"node_modules/@nodelib/fs.walk": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.3.tgz",
+			"integrity": "sha512-l6t8xEhfK9Sa4YO5mIRdau7XSOADfmh3jCr0evNHdY+HNkW6xuQhgMH7D73VV6WpZOagrW0UludvMTiifiwTfA==",
+			"dependencies": {
+				"@nodelib/fs.scandir": "2.1.2",
+				"fastq": "^1.6.0"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@types/cacheable-request": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz",
-			"integrity": "sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==",
+		"node_modules/@npmcli/fs": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-3.1.0.tgz",
+			"integrity": "sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==",
 			"dev": true,
-			"requires": {
-				"@types/http-cache-semantics": "*",
-				"@types/keyv": "*",
-				"@types/node": "*",
-				"@types/responselike": "*"
+			"dependencies": {
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/classnames": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+		"node_modules/@npmcli/git": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/@npmcli/git/-/git-4.1.0.tgz",
+			"integrity": "sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==",
 			"dev": true,
-			"requires": {
-				"classnames": "*"
+			"dependencies": {
+				"@npmcli/promise-spawn": "^6.0.0",
+				"lru-cache": "^7.4.4",
+				"npm-pick-manifest": "^8.0.0",
+				"proc-log": "^3.0.0",
+				"promise-inflight": "^1.0.1",
+				"promise-retry": "^2.0.1",
+				"semver": "^7.3.5",
+				"which": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/color-convert": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
-			"integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+		"node_modules/@npmcli/git/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
 			"dev": true,
-			"requires": {
-				"@types/color-name": "*"
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@types/color-name": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-			"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
-			"dev": true
+		"node_modules/@npmcli/git/node_modules/which": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
+			"integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"@types/eslint": {
-			"version": "7.28.0",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
-			"integrity": "sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==",
+		"node_modules/@npmcli/installed-package-contents": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-2.0.2.tgz",
+			"integrity": "sha512-xACzLPhnfD51GKvTOOuNX2/V4G4mz9/1I2MfDoye9kBM3RYe5g2YbscsaGoTlaWqkxeiapBWyseULVKpSVHtKQ==",
 			"dev": true,
-			"requires": {
-				"@types/estree": "*",
-				"@types/json-schema": "*"
+			"dependencies": {
+				"npm-bundled": "^3.0.0",
+				"npm-normalize-package-bin": "^3.0.0"
+			},
+			"bin": {
+				"installed-package-contents": "lib/index.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/eslint-scope": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
-			"integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
+		"node_modules/@npmcli/installed-package-contents/node_modules/npm-bundled": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-3.0.1.tgz",
+			"integrity": "sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==",
 			"dev": true,
-			"requires": {
-				"@types/eslint": "*",
-				"@types/estree": "*"
+			"dependencies": {
+				"npm-normalize-package-bin": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/estree": {
-			"version": "0.0.50",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
-			"integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
-			"dev": true
+		"node_modules/@npmcli/installed-package-contents/node_modules/npm-normalize-package-bin": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+			"integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"@types/events": {
+		"node_modules/@npmcli/node-gyp": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-			"integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
-			"dev": true
-		},
-		"@types/glob": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-			"integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+			"resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-3.0.0.tgz",
+			"integrity": "sha512-gp8pRXC2oOxu0DUE1/M3bYtb1b3/DbJ5aM113+XJBgfXdussRAsX0YOrOhdd8WvnAR6auDBvJomGAkLKA5ydxA==",
 			"dev": true,
-			"requires": {
-				"@types/events": "*",
-				"@types/minimatch": "*",
-				"@types/node": "*"
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/graceful-fs": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.3.tgz",
-			"integrity": "sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==",
-			"requires": {
-				"@types/node": "*"
+		"node_modules/@npmcli/promise-spawn": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-6.0.2.tgz",
+			"integrity": "sha512-gGq0NJkIGSwdbUt4yhdF8ZrmkGKVz9vAdVzpOfnom+V8PLSmSOVhZwbNvZZS1EYcJN5hzzKBxmmVVAInM6HQLg==",
+			"dev": true,
+			"dependencies": {
+				"which": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/hammerjs": {
-			"version": "2.0.41",
-			"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-			"integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA=="
+		"node_modules/@npmcli/promise-spawn/node_modules/which": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
+			"integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"@types/hast": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.1.tgz",
-			"integrity": "sha512-viwwrB+6xGzw+G1eWpF9geV3fnsDgXqHG+cqgiHrvQfDUW5hzhCyV7Sy3UJxhfRFBsgky2SSW33qi/YrIkjX5Q==",
+		"node_modules/@npmcli/run-script": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-6.0.2.tgz",
+			"integrity": "sha512-NCcr1uQo1k5U+SYlnIrbAh3cxy+OQT1VtqiAbxdymSlptbzBb62AjH2xXgjNCoP073hoa1CfCAcwoZ8k96C4nA==",
 			"dev": true,
-			"requires": {
-				"@types/unist": "*"
+			"dependencies": {
+				"@npmcli/node-gyp": "^3.0.0",
+				"@npmcli/promise-spawn": "^6.0.0",
+				"node-gyp": "^9.0.0",
+				"read-package-json-fast": "^3.0.0",
+				"which": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/highlight-words-core": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@types/highlight-words-core/-/highlight-words-core-1.2.1.tgz",
-			"integrity": "sha512-9VZUA5omXBfn+hDxFjUDu1FOJTBM3LmvqfDey+Z6Aa8B8/JmF5SMj6FBrjfgJ/Q3YXOZd3qyTDfJyMZSs/wCUA==",
-			"dev": true
-		},
-		"@types/html-minifier-terser": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-			"integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
-			"dev": true
-		},
-		"@types/http-cache-semantics": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz",
-			"integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==",
-			"dev": true
-		},
-		"@types/http-proxy": {
-			"version": "1.17.7",
-			"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz",
-			"integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==",
+		"node_modules/@npmcli/run-script/node_modules/which": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
+			"integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*"
-			}
-		},
-		"@types/invariant": {
-			"version": "2.2.35",
-			"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
-			"integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
-		},
-		"@types/is-function": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.0.tgz",
-			"integrity": "sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==",
-			"dev": true
-		},
-		"@types/istanbul-lib-coverage": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-			"integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg=="
-		},
-		"@types/istanbul-lib-report": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-			"integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-			"requires": {
-				"@types/istanbul-lib-coverage": "*"
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"@types/istanbul-reports": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-			"integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-			"requires": {
-				"@types/istanbul-lib-report": "*"
+		"node_modules/@nrwl/devkit": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nrwl/devkit/-/devkit-16.6.0.tgz",
+			"integrity": "sha512-xZEN6wfA1uJwv+FVRQFOHsCcpvGvIYGx2zutbzungDodWkfzlJ3tzIGqYjIpPCBVT83erM6Gscnka2W46AuKfA==",
+			"dev": true,
+			"dependencies": {
+				"@nx/devkit": "16.6.0"
 			}
 		},
-		"@types/jest": {
-			"version": "28.1.1",
-			"resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.1.tgz",
-			"integrity": "sha512-C2p7yqleUKtCkVjlOur9BWVA4HgUQmEj/HWCt5WzZ5mLXrWnyIfl0wGuArc+kBXsy0ZZfLp+7dywB4HtSVYGVA==",
+		"node_modules/@nrwl/tao": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nrwl/tao/-/tao-16.6.0.tgz",
+			"integrity": "sha512-NQkDhmzlR1wMuYzzpl4XrKTYgyIzELdJ+dVrNKf4+p4z5WwKGucgRBj60xMQ3kdV25IX95/fmMDB8qVp/pNQ0Q==",
 			"dev": true,
-			"requires": {
-				"jest-matcher-utils": "^27.0.0",
-				"pretty-format": "^27.0.0"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.5.1",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-					"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"nx": "16.6.0",
+				"tslib": "^2.3.0"
+			},
+			"bin": {
+				"tao": "index.js"
 			}
 		},
-		"@types/json-schema": {
-			"version": "7.0.4",
-			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
-			"integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
-			"dev": true
-		},
-		"@types/json5": {
-			"version": "0.0.29",
-			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
-			"dev": true
-		},
-		"@types/keyv": {
-			"version": "3.1.4",
-			"resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
-			"integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+		"node_modules/@nx/devkit": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-16.6.0.tgz",
+			"integrity": "sha512-rhJ0y+MSPHDuoZPxsOYdj/n5ks+gK74TIMgTb8eZgPT/uR86a4oxf62wUQXgECedR5HzLE2HunbnoLhhJXmpJw==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*"
+			"dependencies": {
+				"@nrwl/devkit": "16.6.0",
+				"ejs": "^3.1.7",
+				"ignore": "^5.0.4",
+				"semver": "7.5.3",
+				"tmp": "~0.2.1",
+				"tslib": "^2.3.0"
+			},
+			"peerDependencies": {
+				"nx": ">= 15 <= 17"
 			}
 		},
-		"@types/lodash": {
-			"version": "4.14.172",
-			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
-			"integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
-			"dev": true
-		},
-		"@types/mdast": {
-			"version": "3.0.10",
-			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
-			"integrity": "sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==",
+		"node_modules/@nx/devkit/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 			"dev": true,
-			"requires": {
-				"@types/unist": "*"
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@types/mime": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
-			"integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
-			"dev": true
-		},
-		"@types/minimatch": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
-			"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==",
-			"dev": true
-		},
-		"@types/minimist": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.0.tgz",
-			"integrity": "sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=",
-			"dev": true
-		},
-		"@types/mousetrap": {
-			"version": "1.6.8",
-			"resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.8.tgz",
-			"integrity": "sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA=="
-		},
-		"@types/node": {
-			"version": "14.14.22",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.22.tgz",
-			"integrity": "sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw=="
-		},
-		"@types/node-fetch": {
-			"version": "2.6.1",
-			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.1.tgz",
-			"integrity": "sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==",
+		"node_modules/@nx/devkit/node_modules/semver": {
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*",
-				"form-data": "^3.0.0"
-			},
 			"dependencies": {
-				"combined-stream": {
-					"version": "1.0.8",
-					"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-					"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-					"dev": true,
-					"requires": {
-						"delayed-stream": "~1.0.0"
-					}
-				},
-				"form-data": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-					"integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-					"dev": true,
-					"requires": {
-						"asynckit": "^0.4.0",
-						"combined-stream": "^1.0.8",
-						"mime-types": "^2.1.12"
-					}
-				}
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@types/normalize-package-data": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-			"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-			"dev": true
-		},
-		"@types/npm-package-arg": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/@types/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-			"integrity": "sha512-452/1Kp9IdM/oR10AyqAgZOxUt7eLbm+EMJ194L6oarMYdZNiFIFAOJ7IIr0OrZXTySgfHjJezh2oiyk2kc3ag==",
-			"dev": true
-		},
-		"@types/npmlog": {
-			"version": "4.1.4",
-			"resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.4.tgz",
-			"integrity": "sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ==",
-			"dev": true
-		},
-		"@types/offscreencanvas": {
-			"version": "2019.7.0",
-			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
-			"integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg=="
-		},
-		"@types/overlayscrollbars": {
-			"version": "1.12.0",
-			"resolved": "https://registry.npmjs.org/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz",
-			"integrity": "sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==",
-			"dev": true
+		"node_modules/@nx/devkit/node_modules/tmp": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+			"integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.14"
+			}
 		},
-		"@types/parse-json": {
+		"node_modules/@nx/devkit/node_modules/yallist": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-			"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
-		},
-		"@types/parse5": {
-			"version": "5.0.3",
-			"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
-			"integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==",
-			"dev": true
-		},
-		"@types/prettier": {
-			"version": "2.4.4",
-			"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
-			"integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==",
-			"dev": true
-		},
-		"@types/pretty-hrtime": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz",
-			"integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true
 		},
-		"@types/prop-types": {
-			"version": "15.7.4",
-			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-			"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-		},
-		"@types/qs": {
-			"version": "6.9.7",
-			"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
-			"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
-			"dev": true
+		"node_modules/@nx/nx-darwin-arm64": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-16.6.0.tgz",
+			"integrity": "sha512-8nJuqcWG/Ob39rebgPLpv2h/V46b9Rqqm/AGH+bYV9fNJpxgMXclyincbMIWvfYN2tW+Vb9DusiTxV6RPrLapA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
 		},
-		"@types/reach__router": {
-			"version": "1.3.8",
-			"resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.8.tgz",
-			"integrity": "sha512-cjjT0FPdwuvhLWpCDt2WCh4sdBqNzJe3XhxXmRQGsY3IvT58M8sE4E7A0QaFYuJs3ar+McSJTiJxdYKWAXbBhw==",
+		"node_modules/@nx/nx-darwin-x64": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-16.6.0.tgz",
+			"integrity": "sha512-T4DV0/2PkPZjzjmsmQEyjPDNBEKc4Rhf7mbIZlsHXj27BPoeNjEcbjtXKuOZHZDIpGFYECGT/sAF6C2NVYgmxw==",
+			"cpu": [
+				"x64"
+			],
 			"dev": true,
-			"requires": {
-				"@types/react": "*"
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/react": {
-			"version": "17.0.37",
-			"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz",
-			"integrity": "sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==",
-			"requires": {
-				"@types/prop-types": "*",
-				"@types/scheduler": "*",
-				"csstype": "^3.0.2"
-			},
-			"dependencies": {
-				"csstype": {
-					"version": "3.0.10",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-					"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-				}
+		"node_modules/@nx/nx-freebsd-x64": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-16.6.0.tgz",
+			"integrity": "sha512-Ck/yejYgp65dH9pbExKN/X0m22+xS3rWF1DBr2LkP6j1zJaweRc3dT83BWgt5mCjmcmZVk3J8N01AxULAzUAqA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/react-dates": {
-			"version": "21.8.3",
-			"resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.3.tgz",
-			"integrity": "sha512-MSG/A5UCXepPw5a9BtdOXfCCSMcQ5+oQIkm0K2u39sf4EJbsgngUg1zcoY3amxa6Hz0EWZkZOiExK/92J6hxUw==",
+		"node_modules/@nx/nx-linux-arm-gnueabihf": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-16.6.0.tgz",
+			"integrity": "sha512-eyk/R1mBQ3X0PCSS+Cck3onvr3wmZVmM/+x0x9Ai02Vm6q9Eq6oZ1YtZGQsklNIyw1vk2WV9rJCStfu9mLecEw==",
+			"cpu": [
+				"arm"
+			],
 			"dev": true,
-			"requires": {
-				"@types/react": "*",
-				"@types/react-outside-click-handler": "*",
-				"moment": "^2.26.0"
-			},
-			"dependencies": {
-				"moment": {
-					"version": "2.29.3",
-					"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",
-					"integrity": "sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==",
-					"dev": true
-				}
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/react-dom": {
-			"version": "17.0.11",
-			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
-			"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
-			"requires": {
-				"@types/react": "*"
+		"node_modules/@nx/nx-linux-arm64-gnu": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-16.6.0.tgz",
+			"integrity": "sha512-S0qFFdQFDmBIEZqBAJl4K47V3YuMvDvthbYE0enXrXApWgDApmhtxINXSOjSus7DNq9kMrgtSDGkBmoBot61iw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/react-outside-click-handler": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.1.tgz",
-			"integrity": "sha512-0BNan5zIIDyO5k9LFSG+60ZxQ/0wf+LTF9BJx3oOUdOaJlZk6RCe52jRB75mlvLLJx2YLa61+NidOwBfptWMKw==",
+		"node_modules/@nx/nx-linux-arm64-musl": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-16.6.0.tgz",
+			"integrity": "sha512-TXWY5VYtg2wX/LWxyrUkDVpqCyJHF7fWoVMUSlFe+XQnk9wp/yIbq2s0k3h8I4biYb6AgtcVqbR4ID86lSNuMA==",
+			"cpu": [
+				"arm64"
+			],
 			"dev": true,
-			"requires": {
-				"@types/react": "*"
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/react-syntax-highlighter": {
-			"version": "11.0.5",
-			"resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz",
-			"integrity": "sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==",
+		"node_modules/@nx/nx-linux-x64-gnu": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-16.6.0.tgz",
+			"integrity": "sha512-qQIpSVN8Ij4oOJ5v+U+YztWJ3YQkeCIevr4RdCE9rDilfq9RmBD94L4VDm7NRzYBuQL8uQxqWzGqb7ZW4mfHpw==",
+			"cpu": [
+				"x64"
+			],
 			"dev": true,
-			"requires": {
-				"@types/react": "*"
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/requestidlecallback": {
-			"version": "0.3.4",
-			"resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.4.tgz",
-			"integrity": "sha512-aTSyiZuRemRLTQkJPb25L7A4/eR2Teo5l4yJ1V6P3+MFxEZckTDkNKNtr/V1zEOMzS6H8DgxF22U6jPAPrzQvw==",
-			"dev": true
+		"node_modules/@nx/nx-linux-x64-musl": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-16.6.0.tgz",
+			"integrity": "sha512-EYOHe11lfVfEfZqSAIa1c39mx2Obr4mqd36dBZx+0UKhjrcmWiOdsIVYMQSb3n0TqB33BprjI4p9ZcFSDuoNbA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
 		},
-		"@types/responselike": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
-			"integrity": "sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==",
+		"node_modules/@nx/nx-win32-arm64-msvc": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-16.6.0.tgz",
+			"integrity": "sha512-f1BmuirOrsAGh5+h/utkAWNuqgohvBoekQgMxYcyJxSkFN+pxNG1U68P59Cidn0h9mkyonxGVCBvWwJa3svVFA==",
+			"cpu": [
+				"arm64"
+			],
 			"dev": true,
-			"requires": {
-				"@types/node": "*"
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"@types/retry": {
-			"version": "0.12.1",
-			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
-			"integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
-			"dev": true
+		"node_modules/@nx/nx-win32-x64-msvc": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-16.6.0.tgz",
+			"integrity": "sha512-UmTTjFLpv4poVZE3RdUHianU8/O9zZYBiAnTRq5spwSDwxJHnLTZBUxFFf3ztCxeHOUIfSyW9utpGfCMCptzvQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
 		},
-		"@types/scheduler": {
-			"version": "0.16.2",
-			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+		"node_modules/@octokit/auth-token": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.5.0.tgz",
+			"integrity": "sha512-r5FVUJCOLl19AxiuZD2VRZ/ORjp/4IN98Of6YJoJOkY75CIBuYfmiNHGrDwXr+aLGG55igl9QrxX3hbiXlLb+g==",
+			"dependencies": {
+				"@octokit/types": "^6.0.3"
+			}
 		},
-		"@types/semver": {
-			"version": "7.3.8",
-			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.8.tgz",
-			"integrity": "sha512-D/2EJvAlCEtYFEYmmlGwbGXuK886HzyCc3nZX/tkFTQdEU8jZDAgiv08P162yB17y4ZXZoq7yFAnW4GDBb9Now==",
-			"dev": true
+		"node_modules/@octokit/core": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.6.0.tgz",
+			"integrity": "sha512-7RKRKuA4xTjMhY+eG3jthb3hlZCsOwg3rztWh75Xc+ShDWOfDDATWbeZpAHBNRpm4Tv9WgBMOy1zEJYXG6NJ7Q==",
+			"dependencies": {
+				"@octokit/auth-token": "^2.4.4",
+				"@octokit/graphql": "^4.5.8",
+				"@octokit/request": "^5.6.3",
+				"@octokit/request-error": "^2.0.5",
+				"@octokit/types": "^6.0.3",
+				"before-after-hook": "^2.2.0",
+				"universal-user-agent": "^6.0.0"
+			}
 		},
-		"@types/source-list-map": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
-			"integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-			"dev": true
+		"node_modules/@octokit/core/node_modules/@octokit/endpoint": {
+			"version": "6.0.12",
+			"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
+			"integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
+			"dependencies": {
+				"@octokit/types": "^6.0.3",
+				"is-plain-object": "^5.0.0",
+				"universal-user-agent": "^6.0.0"
+			}
 		},
-		"@types/sprintf-js": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.2.tgz",
-			"integrity": "sha512-hkgzYF+qnIl8uTO8rmUSVSfQ8BIfMXC4yJAF4n8BE758YsKBZvFC4NumnAegj7KmylP0liEZNpb9RRGFMbFejA==",
-			"dev": true
+		"node_modules/@octokit/core/node_modules/@octokit/request": {
+			"version": "5.6.3",
+			"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz",
+			"integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==",
+			"dependencies": {
+				"@octokit/endpoint": "^6.0.1",
+				"@octokit/request-error": "^2.1.0",
+				"@octokit/types": "^6.16.1",
+				"is-plain-object": "^5.0.0",
+				"node-fetch": "^2.6.7",
+				"universal-user-agent": "^6.0.0"
+			}
 		},
-		"@types/stack-utils": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-			"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
-			"dev": true
+		"node_modules/@octokit/core/node_modules/before-after-hook": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+			"integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ=="
 		},
-		"@types/tapable": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz",
-			"integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==",
-			"dev": true
+		"node_modules/@octokit/core/node_modules/universal-user-agent": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+			"integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ=="
 		},
-		"@types/testing-library__jest-dom": {
-			"version": "5.14.3",
-			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
-			"integrity": "sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==",
+		"node_modules/@octokit/endpoint": {
+			"version": "5.5.3",
+			"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-5.5.3.tgz",
+			"integrity": "sha512-EzKwkwcxeegYYah5ukEeAI/gYRLv2Y9U5PpIsseGSFDk+G3RbipQGBs8GuYS1TLCtQaqoO66+aQGtITPalxsNQ==",
 			"dev": true,
-			"requires": {
-				"@types/jest": "*"
+			"dependencies": {
+				"@octokit/types": "^2.0.0",
+				"is-plain-object": "^3.0.0",
+				"universal-user-agent": "^5.0.0"
 			}
 		},
-		"@types/uglify-js": {
-			"version": "3.9.2",
-			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.2.tgz",
-			"integrity": "sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==",
+		"node_modules/@octokit/endpoint/node_modules/@octokit/types": {
+			"version": "2.16.2",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
+			"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
 			"dev": true,
-			"requires": {
-				"source-map": "^0.6.1"
-			},
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"@types/node": ">= 8"
 			}
 		},
-		"@types/unist": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
-			"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==",
+		"node_modules/@octokit/endpoint/node_modules/is-plain-object": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+			"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*"
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"@types/uuid": {
-			"version": "8.3.1",
-			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
-			"integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
-			"dev": true
-		},
-		"@types/vfile": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz",
-			"integrity": "sha512-b3nLFGaGkJ9rzOcuXRfHkZMdjsawuDD0ENL9fzTophtBg8FJHSGbH7daXkEpcwy3v7Xol3pAvsmlYyFhR4pqJw==",
+		"node_modules/@octokit/endpoint/node_modules/universal-user-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-5.0.0.tgz",
+			"integrity": "sha512-B5TPtzZleXyPrUMKCpEHFmVhMN6EhmJYjG5PQna9s7mXeSqGTLap4OpqLl5FCEFUI3UBmllkETwKf/db66Y54Q==",
 			"dev": true,
-			"requires": {
-				"@types/node": "*",
-				"@types/unist": "*",
-				"@types/vfile-message": "*"
+			"dependencies": {
+				"os-name": "^3.1.0"
 			}
 		},
-		"@types/vfile-message": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@types/vfile-message/-/vfile-message-1.0.1.tgz",
-			"integrity": "sha512-mlGER3Aqmq7bqR1tTTIVHq8KSAFFRyGbrxuM8C/H82g6k7r2fS+IMEkIu3D7JHzG10NvPdR8DNx0jr0pwpp4dA==",
-			"dev": true,
-			"requires": {
-				"@types/node": "*",
-				"@types/unist": "*"
+		"node_modules/@octokit/graphql": {
+			"version": "4.8.0",
+			"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.8.0.tgz",
+			"integrity": "sha512-0gv+qLSBLKF0z8TKaSKTsS39scVKF9dbMxJpj3U0vC7wjNWFuIpL/z76Qe2fiuCbDRcJSavkXsVtMS6/dtQQsg==",
+			"dependencies": {
+				"@octokit/request": "^5.6.0",
+				"@octokit/types": "^6.0.3",
+				"universal-user-agent": "^6.0.0"
 			}
 		},
-		"@types/webpack": {
-			"version": "4.41.16",
-			"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.16.tgz",
-			"integrity": "sha512-w80nXwCcXwwgv7rkTXb8lET6nWPNNUJxa36lrA2DEkD5TcPpHrlGAPrjdpZnkFX/FXSSuN5IIxCYowAB1Vobtw==",
-			"dev": true,
-			"requires": {
-				"@types/anymatch": "*",
-				"@types/node": "*",
-				"@types/tapable": "*",
-				"@types/uglify-js": "*",
-				"@types/webpack-sources": "*",
-				"source-map": "^0.6.0"
-			},
+		"node_modules/@octokit/graphql/node_modules/@octokit/endpoint": {
+			"version": "6.0.12",
+			"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
+			"integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"@octokit/types": "^6.0.3",
+				"is-plain-object": "^5.0.0",
+				"universal-user-agent": "^6.0.0"
+			}
+		},
+		"node_modules/@octokit/graphql/node_modules/@octokit/request": {
+			"version": "5.6.3",
+			"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz",
+			"integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==",
+			"dependencies": {
+				"@octokit/endpoint": "^6.0.1",
+				"@octokit/request-error": "^2.1.0",
+				"@octokit/types": "^6.16.1",
+				"is-plain-object": "^5.0.0",
+				"node-fetch": "^2.6.7",
+				"universal-user-agent": "^6.0.0"
 			}
 		},
-		"@types/webpack-env": {
-			"version": "1.16.2",
-			"resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.2.tgz",
-			"integrity": "sha512-vKx7WNQNZDyJveYcHAm9ZxhqSGLYwoyLhrHjLBOkw3a7cT76sTdjgtwyijhk1MaHyRIuSztcVwrUOO/NEu68Dw==",
+		"node_modules/@octokit/graphql/node_modules/universal-user-agent": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+			"integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ=="
+		},
+		"node_modules/@octokit/openapi-types": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
+			"integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA=="
+		},
+		"node_modules/@octokit/plugin-enterprise-rest": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
+			"integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
 			"dev": true
 		},
-		"@types/webpack-sources": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.7.tgz",
-			"integrity": "sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==",
-			"dev": true,
-			"requires": {
-				"@types/node": "*",
-				"@types/source-list-map": "*",
-				"source-map": "^0.6.1"
-			},
+		"node_modules/@octokit/plugin-paginate-rest": {
+			"version": "2.21.3",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz",
+			"integrity": "sha512-aCZTEf0y2h3OLbrgKkrfFdjRL6eSOo8komneVQJnYecAxIej7Bafor2xhuDJOIFau4pk0i/P28/XgtbyPF0ZHw==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"@octokit/types": "^6.40.0"
+			},
+			"peerDependencies": {
+				"@octokit/core": ">=2"
 			}
 		},
-		"@types/yargs": {
-			"version": "15.0.4",
-			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.4.tgz",
-			"integrity": "sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==",
-			"requires": {
-				"@types/yargs-parser": "*"
-			}
+		"node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/openapi-types": {
+			"version": "12.11.0",
+			"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
+			"integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ=="
 		},
-		"@types/yargs-parser": {
-			"version": "13.1.0",
-			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz",
-			"integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg=="
+		"node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/types": {
+			"version": "6.41.0",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+			"integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+			"dependencies": {
+				"@octokit/openapi-types": "^12.11.0"
+			}
 		},
-		"@types/yauzl": {
-			"version": "2.9.2",
-			"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
-			"integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
+		"node_modules/@octokit/plugin-request-log": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+			"integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"@types/node": "*"
+			"peerDependencies": {
+				"@octokit/core": ">=3"
 			}
 		},
-		"@typescript-eslint/eslint-plugin": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.3.0.tgz",
-			"integrity": "sha512-ARUEJHJrq85aaiCqez7SANeahDsJTD3AEua34EoQN9pHS6S5Bq9emcIaGGySt/4X2zSi+vF5hAH52sEen7IO7g==",
-			"dev": true,
-			"requires": {
-				"@typescript-eslint/experimental-utils": "5.3.0",
-				"@typescript-eslint/scope-manager": "5.3.0",
-				"debug": "^4.3.2",
-				"functional-red-black-tree": "^1.0.1",
-				"ignore": "^5.1.8",
-				"regexpp": "^3.2.0",
-				"semver": "^7.3.5",
-				"tsutils": "^3.21.0"
+		"node_modules/@octokit/plugin-rest-endpoint-methods": {
+			"version": "5.16.2",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.16.2.tgz",
+			"integrity": "sha512-8QFz29Fg5jDuTPXVtey05BLm7OB+M8fnvE64RNegzX7U+5NUXcOcnpTIK0YfSHBg8gYd0oxIq3IZTe9SfPZiRw==",
+			"dependencies": {
+				"@octokit/types": "^6.39.0",
+				"deprecation": "^2.3.1"
 			},
+			"peerDependencies": {
+				"@octokit/core": ">=3"
+			}
+		},
+		"node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/openapi-types": {
+			"version": "12.11.0",
+			"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
+			"integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ=="
+		},
+		"node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
+			"version": "6.41.0",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+			"integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"@octokit/openapi-types": "^12.11.0"
 			}
 		},
-		"@typescript-eslint/experimental-utils": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.3.0.tgz",
-			"integrity": "sha512-NFVxYTjKj69qB0FM+piah1x3G/63WB8vCBMnlnEHUsiLzXSTWb9FmFn36FD9Zb4APKBLY3xRArOGSMQkuzTF1w==",
+		"node_modules/@octokit/request": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/@octokit/request/-/request-4.1.1.tgz",
+			"integrity": "sha512-LOyL0i3oxRo418EXRSJNk/3Q4I0/NKawTn6H/CQp+wnrG1UFLGu080gSsgnWobhPo5BpUNgSQ5BRk5FOOJhD1Q==",
 			"dev": true,
-			"requires": {
-				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.3.0",
-				"@typescript-eslint/types": "5.3.0",
-				"@typescript-eslint/typescript-estree": "5.3.0",
-				"eslint-scope": "^5.1.1",
-				"eslint-utils": "^3.0.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"eslint-scope": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-					"dev": true,
-					"requires": {
-						"esrecurse": "^4.3.0",
-						"estraverse": "^4.1.1"
-					}
-				},
-				"eslint-utils": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-					"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-					"dev": true,
-					"requires": {
-						"eslint-visitor-keys": "^2.0.0"
-					}
-				},
-				"eslint-visitor-keys": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-					"integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-					"dev": true
-				}
+				"@octokit/endpoint": "^5.1.0",
+				"@octokit/request-error": "^1.0.1",
+				"deprecation": "^2.0.0",
+				"is-plain-object": "^3.0.0",
+				"node-fetch": "^2.3.0",
+				"once": "^1.4.0",
+				"universal-user-agent": "^2.1.0"
 			}
 		},
-		"@typescript-eslint/parser": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.3.0.tgz",
-			"integrity": "sha512-rKu/yAReip7ovx8UwOAszJVO5MgBquo8WjIQcp1gx4pYQCwYzag+I5nVNHO4MqyMkAo0gWt2gWUi+36gWAVKcw==",
-			"dev": true,
-			"requires": {
-				"@typescript-eslint/scope-manager": "5.3.0",
-				"@typescript-eslint/types": "5.3.0",
-				"@typescript-eslint/typescript-estree": "5.3.0",
-				"debug": "^4.3.2"
-			},
+		"node_modules/@octokit/request-error": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.1.0.tgz",
+			"integrity": "sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"@octokit/types": "^6.0.3",
+				"deprecation": "^2.0.0",
+				"once": "^1.4.0"
 			}
 		},
-		"@typescript-eslint/scope-manager": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.3.0.tgz",
-			"integrity": "sha512-22Uic9oRlTsPppy5Tcwfj+QET5RWEnZ5414Prby465XxQrQFZ6nnm5KnXgnsAJefG4hEgMnaxTB3kNEyjdjj6A==",
+		"node_modules/@octokit/request/node_modules/@octokit/request-error": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
+			"integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
 			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "5.3.0",
-				"@typescript-eslint/visitor-keys": "5.3.0"
+			"dependencies": {
+				"@octokit/types": "^2.0.0",
+				"deprecation": "^2.0.0",
+				"once": "^1.4.0"
 			}
 		},
-		"@typescript-eslint/types": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.3.0.tgz",
-			"integrity": "sha512-fce5pG41/w8O6ahQEhXmMV+xuh4+GayzqEogN24EK+vECA3I6pUwKuLi5QbXO721EMitpQne5VKXofPonYlAQg==",
-			"dev": true
-		},
-		"@typescript-eslint/typescript-estree": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.3.0.tgz",
-			"integrity": "sha512-FJ0nqcaUOpn/6Z4Jwbtf+o0valjBLkqc3MWkMvrhA2TvzFXtcclIM8F4MBEmYa2kgcI8EZeSAzwoSrIC8JYkug==",
+		"node_modules/@octokit/request/node_modules/@octokit/types": {
+			"version": "2.16.2",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
+			"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
 			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "5.3.0",
-				"@typescript-eslint/visitor-keys": "5.3.0",
-				"debug": "^4.3.2",
-				"globby": "^11.0.4",
-				"is-glob": "^4.0.3",
-				"semver": "^7.3.5",
-				"tsutils": "^3.21.0"
-			},
 			"dependencies": {
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"globby": {
-					"version": "11.0.4",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-					"integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.1.1",
-						"ignore": "^5.1.4",
-						"merge2": "^1.3.0",
-						"slash": "^3.0.0"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"@types/node": ">= 8"
 			}
 		},
-		"@typescript-eslint/utils": {
-			"version": "5.40.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.40.0.tgz",
-			"integrity": "sha512-MO0y3T5BQ5+tkkuYZJBjePewsY+cQnfkYeRqS6tPh28niiIwPnQ1t59CSRcs1ZwJJNOdWw7rv9pF8aP58IMihA==",
+		"node_modules/@octokit/request/node_modules/is-plain-object": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
+			"integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
 			"dev": true,
-			"requires": {
-				"@types/json-schema": "^7.0.9",
-				"@typescript-eslint/scope-manager": "5.40.0",
-				"@typescript-eslint/types": "5.40.0",
-				"@typescript-eslint/typescript-estree": "5.40.0",
-				"eslint-scope": "^5.1.1",
-				"eslint-utils": "^3.0.0",
-				"semver": "^7.3.7"
-			},
-			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"@typescript-eslint/scope-manager": {
-					"version": "5.40.0",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.40.0.tgz",
-					"integrity": "sha512-d3nPmjUeZtEWRvyReMI4I1MwPGC63E8pDoHy0BnrYjnJgilBD3hv7XOiETKLY/zTwI7kCnBDf2vWTRUVpYw0Uw==",
-					"dev": true,
-					"requires": {
-						"@typescript-eslint/types": "5.40.0",
-						"@typescript-eslint/visitor-keys": "5.40.0"
-					}
-				},
-				"@typescript-eslint/types": {
-					"version": "5.40.0",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.40.0.tgz",
-					"integrity": "sha512-V1KdQRTXsYpf1Y1fXCeZ+uhjW48Niiw0VGt4V8yzuaDTU8Z1Xl7yQDyQNqyAFcVhpYXIVCEuxSIWTsLDpHgTbw==",
-					"dev": true
-				},
-				"@typescript-eslint/typescript-estree": {
-					"version": "5.40.0",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.40.0.tgz",
-					"integrity": "sha512-b0GYlDj8TLTOqwX7EGbw2gL5EXS2CPEWhF9nGJiGmEcmlpNBjyHsTwbqpyIEPVpl6br4UcBOYlcI2FJVtJkYhg==",
-					"dev": true,
-					"requires": {
-						"@typescript-eslint/types": "5.40.0",
-						"@typescript-eslint/visitor-keys": "5.40.0",
-						"debug": "^4.3.4",
-						"globby": "^11.1.0",
-						"is-glob": "^4.0.3",
-						"semver": "^7.3.7",
-						"tsutils": "^3.21.0"
-					}
-				},
-				"@typescript-eslint/visitor-keys": {
-					"version": "5.40.0",
-					"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.40.0.tgz",
-					"integrity": "sha512-ijJ+6yig+x9XplEpG2K6FUdJeQGGj/15U3S56W9IqXKJqleuD7zJ2AX/miLezwxpd7ZxDAqO87zWufKg+RPZyQ==",
-					"dev": true,
-					"requires": {
-						"@typescript-eslint/types": "5.40.0",
-						"eslint-visitor-keys": "^3.3.0"
-					}
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"eslint-scope": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-					"dev": true,
-					"requires": {
-						"esrecurse": "^4.3.0",
-						"estraverse": "^4.1.1"
-					}
-				},
-				"eslint-visitor-keys": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-					"integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
-					"dev": true
-				},
-				"fast-glob": {
-					"version": "3.2.12",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-					"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-					"dev": true,
-					"requires": {
-						"@nodelib/fs.stat": "^2.0.2",
-						"@nodelib/fs.walk": "^1.2.3",
-						"glob-parent": "^5.1.2",
-						"merge2": "^1.3.0",
-						"micromatch": "^4.0.4"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"globby": {
-					"version": "11.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.9",
-						"ignore": "^5.2.0",
-						"merge2": "^1.4.1",
-						"slash": "^3.0.0"
-					}
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"semver": {
-					"version": "7.3.8",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-					"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"@typescript-eslint/visitor-keys": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.3.0.tgz",
-			"integrity": "sha512-oVIAfIQuq0x2TFDNLVavUn548WL+7hdhxYn+9j3YdJJXB7mH9dAmZNJsPDa7Jc+B9WGqoiex7GUDbyMxV0a/aw==",
+		"node_modules/@octokit/rest": {
+			"version": "16.26.0",
+			"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-16.26.0.tgz",
+			"integrity": "sha512-NBpzre44ZAQWZhlH+zUYTgqI0pHN+c9rNj4d+pCydGEiKTGc1HKmoTghEUyr9GxazDyoAvmpx9nL0I7QS1Olvg==",
 			"dev": true,
-			"requires": {
-				"@typescript-eslint/types": "5.3.0",
-				"eslint-visitor-keys": "^3.0.0"
-			},
 			"dependencies": {
-				"eslint-visitor-keys": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz",
-					"integrity": "sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==",
-					"dev": true
-				}
+				"@octokit/request": "^4.0.1",
+				"@octokit/request-error": "^1.0.2",
+				"atob-lite": "^2.0.0",
+				"before-after-hook": "^1.4.0",
+				"btoa-lite": "^1.0.0",
+				"deprecation": "^2.0.0",
+				"lodash.get": "^4.4.2",
+				"lodash.set": "^4.3.2",
+				"lodash.uniq": "^4.5.0",
+				"octokit-pagination-methods": "^1.1.0",
+				"once": "^1.4.0",
+				"universal-user-agent": "^2.0.0",
+				"url-template": "^2.0.8"
 			}
 		},
-		"@use-gesture/core": {
-			"version": "10.2.6",
-			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.6.tgz",
-			"integrity": "sha512-+GpVSEoCLv1OeZ+qgAV+tLUKit1LKgKO3PgIiEVZqNr4A/YTXzbC1unlThpfzwyj5Dx22UxHDh0UfgRrQ9Lb1w=="
-		},
-		"@use-gesture/react": {
-			"version": "10.2.6",
-			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.6.tgz",
-			"integrity": "sha512-s/QDhKvsQVaSNq1ljRBMR2PWRkOp9BmoI+kgZR1DsHUSp5XDORtU33D5TZfJoWnD5X3E9SmePikPl66dDaEeDA==",
-			"requires": {
-				"@use-gesture/core": "10.2.6"
+		"node_modules/@octokit/rest/node_modules/@octokit/request-error": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-1.2.1.tgz",
+			"integrity": "sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/types": "^2.0.0",
+				"deprecation": "^2.0.0",
+				"once": "^1.4.0"
 			}
 		},
-		"@webassemblyjs/ast": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
-			"integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+		"node_modules/@octokit/rest/node_modules/@octokit/types": {
+			"version": "2.16.2",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
+			"integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
 			"dev": true,
-			"requires": {
-				"@webassemblyjs/helper-module-context": "1.9.0",
-				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-				"@webassemblyjs/wast-parser": "1.9.0"
+			"dependencies": {
+				"@types/node": ">= 8"
 			}
 		},
-		"@webassemblyjs/floating-point-hex-parser": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-			"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+		"node_modules/@octokit/tsconfig": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@octokit/tsconfig/-/tsconfig-1.0.2.tgz",
+			"integrity": "sha512-I0vDR0rdtP8p2lGMzvsJzbhdOWy405HcGovrspJ8RRibHnyRgggUSNO5AIox5LmqiwmatHKYsvj6VGFHkqS7lA==",
 			"dev": true
 		},
-		"@webassemblyjs/helper-api-error": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
-			"integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
-			"dev": true
+		"node_modules/@octokit/types": {
+			"version": "6.34.0",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
+			"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
+			"dependencies": {
+				"@octokit/openapi-types": "^11.2.0"
+			}
 		},
-		"@webassemblyjs/helper-buffer": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
-			"integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
-			"dev": true
+		"node_modules/@octokit/webhooks-methods": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@octokit/webhooks-methods/-/webhooks-methods-2.0.0.tgz",
+			"integrity": "sha512-35cfQ4YWlnZnmZKmIxlGPUPLtbkF8lr/A/1Sk1eC0ddLMwQN06dOuLc+dI3YLQS+T+MoNt3DIQ0NynwgKPilig==",
+			"license": "MIT"
 		},
-		"@webassemblyjs/helper-code-frame": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
-			"integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+		"node_modules/@octokit/webhooks-types": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-5.8.0.tgz",
+			"integrity": "sha512-8adktjIb76A7viIdayQSFuBEwOzwhDC+9yxZpKNHjfzrlostHCw0/N7JWpWMObfElwvJMk2fY2l1noENCk9wmw==",
+			"license": "MIT"
+		},
+		"node_modules/@parcel/watcher": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
+			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
 			"dev": true,
-			"requires": {
-				"@webassemblyjs/wast-printer": "1.9.0"
+			"hasInstallScript": true,
+			"dependencies": {
+				"node-addon-api": "^3.2.1",
+				"node-gyp-build": "^4.3.0"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
 			}
 		},
-		"@webassemblyjs/helper-fsm": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
-			"integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
-			"dev": true
-		},
-		"@webassemblyjs/helper-module-context": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
-			"integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+		"node_modules/@pkgjs/parseargs": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+			"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
 			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0"
+			"optional": true,
+			"engines": {
+				"node": ">=14"
 			}
 		},
-		"@webassemblyjs/helper-numbers": {
-			"version": "1.11.1",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
-			"integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/floating-point-hex-parser": "1.11.1",
-				"@webassemblyjs/helper-api-error": "1.11.1",
-				"@xtuc/long": "4.2.2"
+		"node_modules/@pkgr/utils": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
+			"integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"fast-glob": "^3.3.0",
+				"is-glob": "^4.0.3",
+				"open": "^9.1.0",
+				"picocolors": "^1.0.0",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
 			},
+			"funding": {
+				"url": "https://opencollective.com/unts"
+			}
+		},
+		"node_modules/@pkgr/utils/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
 			"dependencies": {
-				"@webassemblyjs/floating-point-hex-parser": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-					"integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-					"dev": true
-				},
-				"@webassemblyjs/helper-api-error": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-					"integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-					"dev": true
-				}
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@webassemblyjs/helper-wasm-bytecode": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
-			"integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
-			"dev": true
+		"node_modules/@pkgr/utils/node_modules/define-lazy-prop": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+			"integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"@webassemblyjs/helper-wasm-section": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
-			"integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/helper-buffer": "1.9.0",
-				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-				"@webassemblyjs/wasm-gen": "1.9.0"
+		"node_modules/@pkgr/utils/node_modules/fast-glob": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
 			}
 		},
-		"@webassemblyjs/ieee754": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
-			"integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
-			"dev": true,
-			"requires": {
-				"@xtuc/ieee754": "^1.2.0"
+		"node_modules/@pkgr/utils/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"@webassemblyjs/leb128": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
-			"integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
-			"dev": true,
-			"requires": {
-				"@xtuc/long": "4.2.2"
+		"node_modules/@pkgr/utils/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@webassemblyjs/utf8": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
-			"integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
-			"dev": true
-		},
-		"@webassemblyjs/wasm-edit": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
-			"integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/helper-buffer": "1.9.0",
-				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-				"@webassemblyjs/helper-wasm-section": "1.9.0",
-				"@webassemblyjs/wasm-gen": "1.9.0",
-				"@webassemblyjs/wasm-opt": "1.9.0",
-				"@webassemblyjs/wasm-parser": "1.9.0",
-				"@webassemblyjs/wast-printer": "1.9.0"
+		"node_modules/@pkgr/utils/node_modules/open": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
+			"integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
+			"dependencies": {
+				"default-browser": "^4.0.0",
+				"define-lazy-prop": "^3.0.0",
+				"is-inside-container": "^1.0.0",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@webassemblyjs/wasm-gen": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
-			"integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-				"@webassemblyjs/ieee754": "1.9.0",
-				"@webassemblyjs/leb128": "1.9.0",
-				"@webassemblyjs/utf8": "1.9.0"
+		"node_modules/@pkgr/utils/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@webassemblyjs/wasm-opt": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
-			"integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/helper-buffer": "1.9.0",
-				"@webassemblyjs/wasm-gen": "1.9.0",
-				"@webassemblyjs/wasm-parser": "1.9.0"
+		"node_modules/@pkgr/utils/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@webassemblyjs/wasm-parser": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
-			"integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/helper-api-error": "1.9.0",
-				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-				"@webassemblyjs/ieee754": "1.9.0",
-				"@webassemblyjs/leb128": "1.9.0",
-				"@webassemblyjs/utf8": "1.9.0"
+		"node_modules/@pkgr/utils/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@webassemblyjs/wast-parser": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
-			"integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
-			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/floating-point-hex-parser": "1.9.0",
-				"@webassemblyjs/helper-api-error": "1.9.0",
-				"@webassemblyjs/helper-code-frame": "1.9.0",
-				"@webassemblyjs/helper-fsm": "1.9.0",
-				"@xtuc/long": "4.2.2"
+		"node_modules/@pkgr/utils/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@webassemblyjs/wast-printer": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
-			"integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+		"node_modules/@playwright/test": {
+			"version": "1.48.1",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.1.tgz",
+			"integrity": "sha512-s9RtWoxkOLmRJdw3oFvhFbs9OJS0BzrLUc8Hf6l2UdCNd1rqeEyD4BhCJkvzeEoD1FsK4mirsWwGerhVmYKtZg==",
 			"dev": true,
-			"requires": {
-				"@webassemblyjs/ast": "1.9.0",
-				"@webassemblyjs/wast-parser": "1.9.0",
-				"@xtuc/long": "4.2.2"
+			"dependencies": {
+				"playwright": "1.48.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"@webpack-cli/configtest": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
-			"integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
-			"dev": true
-		},
-		"@webpack-cli/info": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
-			"integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
-			"dev": true,
-			"requires": {
-				"envinfo": "^7.7.3"
-			},
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+			"version": "0.5.11",
+			"resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz",
+			"integrity": "sha512-7j/6vdTym0+qZ6u4XbSAxrWBGYSdCfTzySkj7WAFgDLmSyWlOrWvpyzxlFh5jtw9dn0oL/jtW+06XfFiisN3JQ==",
 			"dependencies": {
-				"envinfo": {
-					"version": "7.8.1",
-					"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-					"integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-					"dev": true
+				"ansi-html-community": "^0.0.8",
+				"common-path-prefix": "^3.0.0",
+				"core-js-pure": "^3.23.3",
+				"error-stack-parser": "^2.0.6",
+				"find-up": "^5.0.0",
+				"html-entities": "^2.1.0",
+				"loader-utils": "^2.0.4",
+				"schema-utils": "^3.0.0",
+				"source-map": "^0.7.3"
+			},
+			"engines": {
+				"node": ">= 10.13"
+			},
+			"peerDependencies": {
+				"@types/webpack": "4.x || 5.x",
+				"react-refresh": ">=0.10.0 <1.0.0",
+				"sockjs-client": "^1.4.0",
+				"type-fest": ">=0.17.0 <5.0.0",
+				"webpack": ">=4.43.0 <6.0.0",
+				"webpack-dev-server": "3.x || 4.x",
+				"webpack-hot-middleware": "2.x",
+				"webpack-plugin-serve": "0.x || 1.x"
+			},
+			"peerDependenciesMeta": {
+				"@types/webpack": {
+					"optional": true
+				},
+				"sockjs-client": {
+					"optional": true
+				},
+				"type-fest": {
+					"optional": true
+				},
+				"webpack-dev-server": {
+					"optional": true
+				},
+				"webpack-hot-middleware": {
+					"optional": true
+				},
+				"webpack-plugin-serve": {
+					"optional": true
 				}
 			}
 		},
-		"@webpack-cli/serve": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
-			"integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
-			"dev": true
-		},
-		"@wordpress/a11y": {
-			"version": "file:packages/a11y",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/dom-ready": "file:packages/dom-ready",
-				"@wordpress/i18n": "file:packages/i18n"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"@wordpress/annotations": {
-			"version": "file:packages/annotations",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"rememo": "^4.0.0",
-				"uuid": "^8.3.0"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/api-fetch": {
-			"version": "file:packages/api-fetch",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/url": "file:packages/url"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/autop": {
-			"version": "file:packages/autop",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/babel-plugin-import-jsx-pragma": {
-			"version": "file:packages/babel-plugin-import-jsx-pragma",
-			"dev": true
-		},
-		"@wordpress/babel-plugin-makepot": {
-			"version": "file:packages/babel-plugin-makepot",
-			"dev": true,
-			"requires": {
-				"gettext-parser": "^1.3.1",
-				"lodash": "^4.17.21"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/babel-preset-default": {
-			"version": "file:packages/babel-preset-default",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.16.0",
-				"@babel/plugin-transform-react-jsx": "^7.16.0",
-				"@babel/plugin-transform-runtime": "^7.16.0",
-				"@babel/preset-env": "^7.16.0",
-				"@babel/preset-typescript": "^7.16.0",
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
-				"@wordpress/browserslist-config": "file:packages/browserslist-config",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/warning": "file:packages/warning",
-				"browserslist": "^4.17.6",
-				"core-js": "^3.19.1"
-			}
-		},
-		"@wordpress/base-styles": {
-			"version": "file:packages/base-styles",
-			"dev": true
-		},
-		"@wordpress/blob": {
-			"version": "file:packages/blob",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
-			}
-		},
-		"@wordpress/block-directory": {
-			"version": "file:packages/block-directory",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/edit-post": "file:packages/edit-post",
-				"@wordpress/editor": "file:packages/editor",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/url": "file:packages/url",
-				"change-case": "^4.1.2"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"@wordpress/block-editor": {
-			"version": "file:packages/block-editor",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@react-spring/web": "^9.4.5",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/blob": "file:packages/blob",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/date": "file:packages/date",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"@wordpress/shortcode": "file:packages/shortcode",
-				"@wordpress/style-engine": "file:packages/style-engine",
-				"@wordpress/token-list": "file:packages/token-list",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/warning": "file:packages/warning",
-				"@wordpress/wordcount": "file:packages/wordcount",
-				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
-				"colord": "^2.7.0",
-				"diff": "^4.0.2",
-				"dom-scroll-into-view": "^1.2.1",
-				"inherits": "^2.0.3",
-				"lodash": "^4.17.21",
-				"react-autosize-textarea": "^7.1.0",
-				"react-easy-crop": "^4.5.1",
-				"rememo": "^4.0.0",
-				"remove-accents": "^0.4.2",
-				"traverse": "^0.6.6"
-			}
-		},
-		"@wordpress/block-library": {
-			"version": "file:packages/block-library",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/autop": "file:packages/autop",
-				"@wordpress/blob": "file:packages/blob",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/date": "file:packages/date",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/primitives": "file:packages/primitives",
-				"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"@wordpress/server-side-render": "file:packages/server-side-render",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/viewport": "file:packages/viewport",
-				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
-				"colord": "^2.7.0",
-				"escape-html": "^1.0.3",
-				"fast-average-color": "^9.1.1",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"micromodal": "^0.4.10",
-				"remove-accents": "^0.4.2"
+		"node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+			"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@wordpress/block-serialization-default-parser": {
-			"version": "file:packages/block-serialization-default-parser",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
-			}
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.23",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",
+			"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg=="
 		},
-		"@wordpress/block-serialization-spec-parser": {
-			"version": "file:packages/block-serialization-spec-parser",
-			"requires": {
-				"pegjs": "^0.10.0",
-				"phpegjs": "^1.0.0-beta7"
+		"node_modules/@preact/signals": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.3.0.tgz",
+			"integrity": "sha512-EOMeg42SlLS72dhoq6Vjq08havnLseWmPQ8A0YsgIAqMgWgx7V1a39+Pxo6i7SY5NwJtH4849JogFq3M67AzWg==",
+			"license": "MIT",
+			"dependencies": {
+				"@preact/signals-core": "^1.7.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			},
+			"peerDependencies": {
+				"preact": "10.x"
 			}
 		},
-		"@wordpress/blocks": {
-			"version": "file:packages/blocks",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/autop": "file:packages/autop",
-				"@wordpress/blob": "file:packages/blob",
-				"@wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/shortcode": "file:packages/shortcode",
-				"change-case": "^4.1.2",
-				"colord": "^2.7.0",
-				"hpq": "^1.3.0",
-				"is-plain-object": "^5.0.0",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"rememo": "^4.0.0",
-				"remove-accents": "^0.4.2",
-				"showdown": "^1.9.1",
-				"simple-html-tokenizer": "^0.5.7",
-				"uuid": "^8.3.0"
+		"node_modules/@preact/signals-core": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.8.0.tgz",
+			"integrity": "sha512-OBvUsRZqNmjzCZXWLxkZfhcgT+Fk8DDcT/8vD6a1xhDemodyy87UJRJfASMuSD8FaAIeGgGm85ydXhm7lr4fyA==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
 			}
 		},
-		"@wordpress/browserslist-config": {
-			"version": "file:packages/browserslist-config",
-			"dev": true
-		},
-		"@wordpress/components": {
-			"version": "file:packages/components",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@emotion/cache": "^11.7.1",
-				"@emotion/css": "^11.7.1",
-				"@emotion/react": "^11.7.1",
-				"@emotion/serialize": "^1.0.2",
-				"@emotion/styled": "^11.6.0",
-				"@emotion/utils": "^1.0.0",
-				"@floating-ui/react-dom": "^1.0.0",
-				"@use-gesture/react": "^10.2.6",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/date": "file:packages/date",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/escape-html": "file:packages/escape-html",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/primitives": "file:packages/primitives",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"@wordpress/warning": "file:packages/warning",
-				"change-case": "^4.1.2",
-				"classnames": "^2.3.1",
-				"colord": "^2.7.0",
-				"date-fns": "^2.28.0",
-				"dom-scroll-into-view": "^1.2.1",
-				"downshift": "^6.0.15",
-				"framer-motion": "^6.2.8",
-				"gradient-parser": "^0.1.5",
-				"highlight-words-core": "^1.2.2",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"re-resizable": "^6.4.0",
-				"react-colorful": "^5.3.1",
-				"reakit": "^1.3.8",
-				"remove-accents": "^0.4.2",
-				"use-lilius": "^2.0.1",
-				"uuid": "^8.3.0",
-				"valtio": "^1.7.0"
-			},
+		"node_modules/@puppeteer/browsers": {
+			"version": "1.4.6",
+			"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.4.6.tgz",
+			"integrity": "sha512-x4BEjr2SjOPowNeiguzjozQbsc6h437ovD/wu+JpaenxVLm3jkgzHY2xOslMTp50HoTvQreMjiexiGQw1sqZlQ==",
 			"dependencies": {
-				"date-fns": {
-					"version": "2.29.3",
-					"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
-					"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+				"debug": "4.3.4",
+				"extract-zip": "2.0.1",
+				"progress": "2.0.3",
+				"proxy-agent": "6.3.0",
+				"tar-fs": "3.0.4",
+				"unbzip2-stream": "1.4.3",
+				"yargs": "17.7.1"
+			},
+			"bin": {
+				"browsers": "lib/cjs/main-cli.js"
+			},
+			"engines": {
+				"node": ">=16.3.0"
+			},
+			"peerDependencies": {
+				"typescript": ">= 4.7.4"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
-		"@wordpress/compose": {
-			"version": "file:packages/compose",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@types/mousetrap": "^1.6.8",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/priority-queue": "file:packages/priority-queue",
-				"change-case": "^4.1.2",
-				"clipboard": "^2.0.8",
-				"mousetrap": "^1.6.5",
-				"use-memo-one": "^1.1.1"
+		"node_modules/@puppeteer/browsers/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@wordpress/core-data": {
-			"version": "file:packages/core-data",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/url": "file:packages/url",
-				"change-case": "^4.1.2",
-				"equivalent-key-map": "^0.2.2",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"rememo": "^4.0.0",
-				"uuid": "^8.3.0"
+		"node_modules/@puppeteer/browsers/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/@puppeteer/browsers/node_modules/extract-zip": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+			"integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+			"dependencies": {
+				"debug": "^4.1.1",
+				"get-stream": "^5.1.0",
+				"yauzl": "^2.10.0"
+			},
+			"bin": {
+				"extract-zip": "cli.js"
+			},
+			"engines": {
+				"node": ">= 10.17.0"
+			},
+			"optionalDependencies": {
+				"@types/yauzl": "^2.9.1"
 			}
 		},
-		"@wordpress/create-block": {
-			"version": "file:packages/create-block",
-			"dev": true,
-			"requires": {
-				"@wordpress/lazy-import": "file:packages/lazy-import",
-				"chalk": "^4.0.0",
-				"change-case": "^4.1.2",
-				"check-node-version": "^4.1.0",
-				"commander": "^9.2.0",
-				"execa": "^4.0.2",
-				"fast-glob": "^3.2.7",
-				"inquirer": "^7.1.0",
-				"make-dir": "^3.0.0",
-				"mustache": "^4.0.0",
-				"npm-package-arg": "^8.1.5",
-				"rimraf": "^3.0.2",
-				"write-pkg": "^4.0.0"
+		"node_modules/@puppeteer/browsers/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/create-block-tutorial-template": {
-			"version": "file:packages/create-block-tutorial-template",
-			"dev": true
-		},
-		"@wordpress/customize-widgets": {
-			"version": "file:packages/customize-widgets",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/interface": "file:packages/interface",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/media-utils": "file:packages/media-utils",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/widgets": "file:packages/widgets",
-				"classnames": "^2.3.1",
-				"lodash": "^4.17.21"
+		"node_modules/@puppeteer/browsers/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"@wordpress/data": {
-			"version": "file:packages/data",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-				"@wordpress/priority-queue": "file:packages/priority-queue",
-				"@wordpress/redux-routine": "file:packages/redux-routine",
-				"equivalent-key-map": "^0.2.2",
-				"is-plain-object": "^5.0.0",
-				"is-promise": "^4.0.0",
-				"lodash": "^4.17.21",
-				"redux": "^4.1.2",
-				"turbo-combine-reducers": "^1.0.2",
-				"use-memo-one": "^1.1.1"
+		"node_modules/@puppeteer/browsers/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/data-controls": {
-			"version": "file:packages/data-controls",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated"
+		"node_modules/@puppeteer/browsers/node_modules/tar-fs": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+			"integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+			"dependencies": {
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
 			}
 		},
-		"@wordpress/date": {
-			"version": "file:packages/date",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"moment": "^2.22.1",
-				"moment-timezone": "^0.5.31"
+		"node_modules/@puppeteer/browsers/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
 			}
 		},
-		"@wordpress/dependency-extraction-webpack-plugin": {
-			"version": "file:packages/dependency-extraction-webpack-plugin",
-			"dev": true,
-			"requires": {
-				"json2php": "^0.0.5",
-				"webpack-sources": "^3.2.2"
+		"node_modules/@puppeteer/browsers/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"@wordpress/deprecated": {
-			"version": "file:packages/deprecated",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/hooks": "file:packages/hooks"
+		"node_modules/@puppeteer/browsers/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"@wordpress/docgen": {
-			"version": "file:packages/docgen",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.16.0",
-				"comment-parser": "^1.1.1",
-				"mdast-util-inject": "1.1.0",
-				"optionator": "0.8.2",
-				"remark": "10.0.1",
-				"remark-parse": "6.0.3",
-				"unified": "7.1.0"
+		"node_modules/@puppeteer/browsers/node_modules/yargs": {
+			"version": "17.7.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
+			"integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@wordpress/dom": {
-			"version": "file:packages/dom",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/deprecated": "file:packages/deprecated"
+		"node_modules/@puppeteer/browsers/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"@wordpress/dom-ready": {
-			"version": "file:packages/dom-ready",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@radix-ui/number": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+			"integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
 			}
 		},
-		"@wordpress/e2e-test-utils": {
-			"version": "file:packages/e2e-test-utils",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/url": "file:packages/url",
-				"change-case": "^4.1.2",
-				"form-data": "^4.0.0",
-				"node-fetch": "^2.6.0"
+		"node_modules/@radix-ui/primitive": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+			"integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
 			}
 		},
-		"@wordpress/e2e-test-utils-playwright": {
-			"version": "file:packages/e2e-test-utils-playwright",
+		"node_modules/@radix-ui/react-arrow": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+			"integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
 			"dev": true,
-			"requires": {
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/url": "file:packages/url",
-				"change-case": "^4.1.2",
-				"form-data": "^4.0.0",
-				"mime": "^3.0.0"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/e2e-tests": {
-			"version": "file:packages/e2e-tests",
+		"node_modules/@radix-ui/react-collection": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+			"integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
 			"dev": true,
-			"requires": {
-				"@wordpress/e2e-test-utils": "file:packages/e2e-test-utils",
-				"@wordpress/jest-console": "file:packages/jest-console",
-				"@wordpress/jest-puppeteer-axe": "file:packages/jest-puppeteer-axe",
-				"@wordpress/scripts": "file:packages/scripts",
-				"@wordpress/url": "file:packages/url",
-				"chalk": "^4.0.0",
-				"expect-puppeteer": "^4.4.0",
-				"filenamify": "^4.2.0",
-				"jest-message-util": "^27.4.2",
-				"jest-snapshot": "^27.4.5",
-				"lodash": "^4.17.21",
-				"puppeteer-testing-library": "^0.5.0",
-				"uuid": "^8.3.0"
-			}
-		},
-		"@wordpress/edit-navigation": {
-			"version": "file:packages/edit-navigation",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/interface": "file:packages/interface",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/url": "file:packages/url",
-				"classnames": "^2.3.1",
-				"lodash": "^4.17.21"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-slot": "1.0.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/edit-post": {
-			"version": "file:packages/edit-post",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/editor": "file:packages/editor",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/interface": "file:packages/interface",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/media-utils": "file:packages/media-utils",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/viewport": "file:packages/viewport",
-				"@wordpress/warning": "file:packages/warning",
-				"classnames": "^2.3.1",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"rememo": "^4.0.0"
-			}
-		},
-		"@wordpress/edit-site": {
-			"version": "file:packages/edit-site",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/editor": "file:packages/editor",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/interface": "file:packages/interface",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/media-utils": "file:packages/media-utils",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
-				"@wordpress/style-engine": "file:packages/style-engine",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/viewport": "file:packages/viewport",
-				"classnames": "^2.3.1",
-				"colord": "^2.9.2",
-				"downloadjs": "^1.4.7",
-				"history": "^5.1.0",
-				"lodash": "^4.17.21",
-				"react-autosize-textarea": "^7.1.0",
-				"rememo": "^4.0.0"
-			},
+		"node_modules/@radix-ui/react-compose-refs": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+			"integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+			"license": "MIT",
 			"dependencies": {
-				"colord": {
-					"version": "2.9.2",
-					"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-					"integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"@wordpress/edit-widgets": {
-			"version": "file:packages/edit-widgets",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/interface": "file:packages/interface",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/media-utils": "file:packages/media-utils",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/widgets": "file:packages/widgets",
-				"classnames": "^2.3.1"
-			}
-		},
-		"@wordpress/editor": {
-			"version": "file:packages/editor",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/blob": "file:packages/blob",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/date": "file:packages/date",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/dom": "file:packages/dom",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"@wordpress/media-utils": "file:packages/media-utils",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"@wordpress/server-side-render": "file:packages/server-side-render",
-				"@wordpress/url": "file:packages/url",
-				"@wordpress/wordcount": "file:packages/wordcount",
-				"classnames": "^2.3.1",
-				"date-fns": "^2.28.0",
-				"escape-html": "^1.0.3",
-				"lodash": "^4.17.21",
-				"memize": "^1.1.0",
-				"react-autosize-textarea": "^7.1.0",
-				"rememo": "^4.0.0",
-				"remove-accents": "^0.4.2"
-			},
+		"node_modules/@radix-ui/react-context": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+			"integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+			"license": "MIT",
 			"dependencies": {
-				"date-fns": {
-					"version": "2.29.3",
-					"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
-					"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"@wordpress/element": {
-			"version": "file:packages/element",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@types/react": "^17.0.37",
-				"@types/react-dom": "^17.0.11",
-				"@wordpress/escape-html": "file:packages/escape-html",
-				"change-case": "^4.1.2",
-				"is-plain-object": "^5.0.0",
-				"react": "^17.0.2",
-				"react-dom": "^17.0.2"
+		"node_modules/@radix-ui/react-direction": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+			"integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/env": {
-			"version": "file:packages/env",
+		"node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+			"integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
 			"dev": true,
-			"requires": {
-				"chalk": "^4.0.0",
-				"copy-dir": "^1.3.0",
-				"docker-compose": "^0.22.2",
-				"extract-zip": "^1.6.7",
-				"got": "^11.8.5",
-				"inquirer": "^7.1.0",
-				"js-yaml": "^3.13.1",
-				"ora": "^4.0.2",
-				"rimraf": "^3.0.2",
-				"simple-git": "^3.5.0",
-				"terminal-link": "^2.0.0",
-				"yargs": "^17.3.0"
-			},
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"cliui": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-					"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-					"dev": true,
-					"requires": {
-						"string-width": "^4.2.0",
-						"strip-ansi": "^6.0.0",
-						"wrap-ansi": "^7.0.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"wrap-ansi": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				},
-				"y18n": {
-					"version": "5.0.8",
-					"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-					"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-					"dev": true
-				},
-				"yargs": {
-					"version": "17.5.1",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
-					"integrity": "sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==",
-					"dev": true,
-					"requires": {
-						"cliui": "^7.0.2",
-						"escalade": "^3.1.1",
-						"get-caller-file": "^2.0.5",
-						"require-directory": "^2.1.1",
-						"string-width": "^4.2.3",
-						"y18n": "^5.0.5",
-						"yargs-parser": "^21.0.0"
-					}
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-escape-keydown": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				},
-				"yargs-parser": {
-					"version": "21.1.1",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-					"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-					"dev": true
+				"@types/react-dom": {
+					"optional": true
 				}
 			}
 		},
-		"@wordpress/escape-html": {
-			"version": "file:packages/escape-html",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@radix-ui/react-focus-guards": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+			"integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/eslint-plugin": {
-			"version": "file:packages/eslint-plugin",
+		"node_modules/@radix-ui/react-focus-scope": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz",
+			"integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==",
 			"dev": true,
-			"requires": {
-				"@babel/eslint-parser": "^7.16.0",
-				"@typescript-eslint/eslint-plugin": "^5.3.0",
-				"@typescript-eslint/parser": "^5.3.0",
-				"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
-				"@wordpress/prettier-config": "file:packages/prettier-config",
-				"cosmiconfig": "^7.0.0",
-				"eslint-config-prettier": "^8.3.0",
-				"eslint-plugin-import": "^2.25.2",
-				"eslint-plugin-jest": "^25.2.3",
-				"eslint-plugin-jsdoc": "^37.0.3",
-				"eslint-plugin-jsx-a11y": "^6.5.1",
-				"eslint-plugin-prettier": "^3.3.0",
-				"eslint-plugin-react": "^7.27.0",
-				"eslint-plugin-react-hooks": "^4.3.0",
-				"globals": "^13.12.0",
-				"requireindex": "^1.2.0"
-			}
-		},
-		"@wordpress/experiments": {
-			"version": "file:packages/experiments",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
-			}
-		},
-		"@wordpress/format-library": {
-			"version": "file:packages/format-library",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/html-entities": "file:packages/html-entities",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/rich-text": "file:packages/rich-text",
-				"@wordpress/url": "file:packages/url"
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/hooks": {
-			"version": "file:packages/hooks",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@radix-ui/react-id": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+			"integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-use-layout-effect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/html-entities": {
-			"version": "file:packages/html-entities",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@radix-ui/react-popper": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+			"integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@floating-ui/react-dom": "^2.0.0",
+				"@radix-ui/react-arrow": "1.0.3",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1",
+				"@radix-ui/react-use-rect": "1.0.1",
+				"@radix-ui/react-use-size": "1.0.1",
+				"@radix-ui/rect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/i18n": {
-			"version": "file:packages/i18n",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/hooks": "file:packages/hooks",
-				"gettext-parser": "^1.3.1",
-				"memize": "^1.1.0",
-				"sprintf-js": "^1.1.1",
-				"tannin": "^1.2.0"
+		"node_modules/@radix-ui/react-portal": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+			"integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/icons": {
-			"version": "file:packages/icons",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/primitives": "file:packages/primitives"
+		"node_modules/@radix-ui/react-primitive": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+			"integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-slot": "1.0.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/interface": {
-			"version": "file:packages/interface",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@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",
-				"@wordpress/plugins": "file:packages/plugins",
-				"@wordpress/preferences": "file:packages/preferences",
-				"@wordpress/viewport": "file:packages/viewport",
-				"classnames": "^2.3.1"
+		"node_modules/@radix-ui/react-roving-focus": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+			"integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-collection": "1.0.3",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-direction": "1.0.1",
+				"@radix-ui/react-id": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-controllable-state": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/is-shallow-equal": {
-			"version": "file:packages/is-shallow-equal",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@radix-ui/react-select": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz",
+			"integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/number": "1.0.1",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-collection": "1.0.3",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-direction": "1.0.1",
+				"@radix-ui/react-dismissable-layer": "1.0.4",
+				"@radix-ui/react-focus-guards": "1.0.1",
+				"@radix-ui/react-focus-scope": "1.0.3",
+				"@radix-ui/react-id": "1.0.1",
+				"@radix-ui/react-popper": "1.1.2",
+				"@radix-ui/react-portal": "1.0.3",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-slot": "1.0.2",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-controllable-state": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1",
+				"@radix-ui/react-use-previous": "1.0.1",
+				"@radix-ui/react-visually-hidden": "1.0.3",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "2.5.5"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/jest-console": {
-			"version": "file:packages/jest-console",
+		"node_modules/@radix-ui/react-separator": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz",
+			"integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"jest-matcher-utils": "^27.4.2"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/jest-preset-default": {
-			"version": "file:packages/jest-preset-default",
-			"dev": true,
-			"requires": {
-				"@wordpress/jest-console": "file:packages/jest-console",
-				"babel-jest": "^27.4.5"
+		"node_modules/@radix-ui/react-slot": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+			"integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/jest-puppeteer-axe": {
-			"version": "file:packages/jest-puppeteer-axe",
+		"node_modules/@radix-ui/react-toggle": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+			"integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
 			"dev": true,
-			"requires": {
-				"@axe-core/puppeteer": "^4.0.0",
-				"@babel/runtime": "^7.16.0"
-			}
-		},
-		"@wordpress/keyboard-shortcuts": {
-			"version": "file:packages/keyboard-shortcuts",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"rememo": "^4.0.0"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-controllable-state": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/keycodes": {
-			"version": "file:packages/keycodes",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/i18n": "file:packages/i18n",
-				"change-case": "^4.1.2",
-				"lodash": "^4.17.21"
+		"node_modules/@radix-ui/react-toggle-group": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz",
+			"integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-direction": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-roving-focus": "1.0.4",
+				"@radix-ui/react-toggle": "1.0.3",
+				"@radix-ui/react-use-controllable-state": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/lazy-import": {
-			"version": "file:packages/lazy-import",
+		"node_modules/@radix-ui/react-toolbar": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz",
+			"integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==",
 			"dev": true,
-			"requires": {
-				"execa": "^4.0.2",
-				"npm-package-arg": "^8.1.5",
-				"semver": "^7.3.5"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-direction": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-roving-focus": "1.0.4",
+				"@radix-ui/react-separator": "1.0.3",
+				"@radix-ui/react-toggle-group": "1.0.4"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/list-reusable-blocks": {
-			"version": "file:packages/list-reusable-blocks",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"change-case": "^4.1.2"
+		"node_modules/@radix-ui/react-use-callback-ref": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+			"integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/media-utils": {
-			"version": "file:packages/media-utils",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/blob": "file:packages/blob",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n"
+		"node_modules/@radix-ui/react-use-controllable-state": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+			"integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-use-callback-ref": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/notices": {
-			"version": "file:packages/notices",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/data": "file:packages/data"
+		"node_modules/@radix-ui/react-use-escape-keydown": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+			"integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-use-callback-ref": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/npm-package-json-lint-config": {
-			"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"
+		"node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+			"integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/plugins": {
-			"version": "file:packages/plugins",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/icons": "file:packages/icons",
-				"memize": "^1.1.0"
+		"node_modules/@radix-ui/react-use-previous": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+			"integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/postcss-plugins-preset": {
-			"version": "file:packages/postcss-plugins-preset",
+		"node_modules/@radix-ui/react-use-rect": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+			"integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
 			"dev": true,
-			"requires": {
-				"@wordpress/base-styles": "file:packages/base-styles",
-				"autoprefixer": "^10.2.5"
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/rect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/postcss-themes": {
-			"version": "file:packages/postcss-themes",
-			"dev": true
-		},
-		"@wordpress/preferences": {
-			"version": "file:packages/preferences",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"classnames": "^2.3.1"
+		"node_modules/@radix-ui/react-use-size": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+			"integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-use-layout-effect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/preferences-persistence": {
-			"version": "file:packages/preferences-persistence",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch"
+		"node_modules/@radix-ui/react-visually-hidden": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+			"integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"@wordpress/prettier-config": {
-			"version": "file:packages/prettier-config",
-			"dev": true
-		},
-		"@wordpress/primitives": {
-			"version": "file:packages/primitives",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/element": "file:packages/element",
-				"classnames": "^2.3.1"
+		"node_modules/@radix-ui/rect": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+			"integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.13.10"
 			}
 		},
-		"@wordpress/priority-queue": {
-			"version": "file:packages/priority-queue",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"requestidlecallback": "^0.3.0"
+		"node_modules/@react-native-clipboard/clipboard": {
+			"version": "1.11.2",
+			"resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.11.2.tgz",
+			"integrity": "sha512-bHyZVW62TuleiZsXNHS1Pv16fWc0fh8O9WvBzl4h2fykqZRW9a+Pv/RGTH56E3X2PqzHP38K5go8zmCZUoIsoQ==",
+			"peerDependencies": {
+				"react": ">=16.0",
+				"react-native": ">=0.57.0"
 			}
 		},
-		"@wordpress/project-management-automation": {
-			"version": "file:packages/project-management-automation",
-			"dev": true,
-			"requires": {
-				"@actions/core": "1.9.1",
-				"@actions/github": "^5.0.0",
-				"@babel/runtime": "^7.16.0",
-				"@octokit/request-error": "^2.1.0",
-				"@octokit/webhooks": "^7.1.0"
+		"node_modules/@react-native-community/blur": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/@react-native-community/blur/-/blur-4.2.0.tgz",
+			"integrity": "sha512-StgP5zQJOCHqDRjmcKnzVkJ920S6DYBKRJfigSUnlkNQp+HzZtVtyKq0j5a7x84NtHcV7j8Uy5mz1Lx9ZKRKfA==",
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
 			}
 		},
-		"@wordpress/react-i18n": {
-			"version": "file:packages/react-i18n",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"utility-types": "^3.10.0"
+		"node_modules/@react-native-community/cli": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-12.3.2.tgz",
+			"integrity": "sha512-WgoUWwLDcf/G1Su2COUUVs3RzAwnV/vUTdISSpAUGgSc57mPabaAoUctKTnfYEhCnE3j02k3VtaVPwCAFRO3TQ==",
+			"dependencies": {
+				"@react-native-community/cli-clean": "12.3.2",
+				"@react-native-community/cli-config": "12.3.2",
+				"@react-native-community/cli-debugger-ui": "12.3.2",
+				"@react-native-community/cli-doctor": "12.3.2",
+				"@react-native-community/cli-hermes": "12.3.2",
+				"@react-native-community/cli-plugin-metro": "12.3.2",
+				"@react-native-community/cli-server-api": "12.3.2",
+				"@react-native-community/cli-tools": "12.3.2",
+				"@react-native-community/cli-types": "12.3.2",
+				"chalk": "^4.1.2",
+				"commander": "^9.4.1",
+				"deepmerge": "^4.3.0",
+				"execa": "^5.0.0",
+				"find-up": "^4.1.0",
+				"fs-extra": "^8.1.0",
+				"graceful-fs": "^4.1.3",
+				"prompts": "^2.4.2",
+				"semver": "^7.5.2"
+			},
+			"bin": {
+				"react-native": "build/bin.js"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"@wordpress/react-native-aztec": {
-			"version": "file:packages/react-native-aztec",
-			"requires": {
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/keycodes": "file:packages/keycodes"
+		"node_modules/@react-native-community/cli-clean": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-clean/-/cli-clean-12.3.2.tgz",
+			"integrity": "sha512-90k2hCX0ddSFPT7EN7h5SZj0XZPXP0+y/++v262hssoey3nhurwF57NGWN0XAR0o9BSW7+mBfeInfabzDraO6A==",
+			"dependencies": {
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"execa": "^5.0.0"
 			}
 		},
-		"@wordpress/react-native-bridge": {
-			"version": "file:packages/react-native-bridge",
-			"requires": {
-				"@wordpress/react-native-aztec": "file:packages/react-native-aztec"
+		"node_modules/@react-native-community/cli-clean/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"@wordpress/react-native-editor": {
-			"version": "file:packages/react-native-editor",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@react-native-clipboard/clipboard": "1.9.0",
-				"@react-native-community/blur": "3.6.0",
-				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-3/react-native-community-slider-3.0.2-wp-3.tgz",
-				"@react-native-masked-view/masked-view": "0.2.6",
-				"@react-navigation/core": "5.12.0",
-				"@react-navigation/native": "5.7.0",
-				"@react-navigation/routers": "5.4.9",
-				"@react-navigation/stack": "5.6.2",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/block-library": "file:packages/block-library",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/edit-post": "file:packages/edit-post",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/hooks": "file:packages/hooks",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/react-native-aztec": "file:packages/react-native-aztec",
-				"@wordpress/react-native-bridge": "file:packages/react-native-bridge",
-				"core-js": "^3.19.1",
-				"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",
-				"node-fetch": "^2.6.0",
-				"react-native": "0.66.2",
-				"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-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",
-				"react-native-modal": "^11.10.0",
-				"react-native-prompt-android": "https://raw.githubusercontent.com/wordpress-mobile/react-native-prompt-android/v1.0.0-wp-3/react-native-prompt-android-1.0.0-wp-3.tgz",
-				"react-native-reanimated": "https://raw.githubusercontent.com/wordpress-mobile/react-native-reanimated/2.4.1-wp-4/react-native-reanimated-2.4.1-wp-4.tgz",
-				"react-native-safe-area": "^0.5.0",
-				"react-native-safe-area-context": "3.2.0",
-				"react-native-sass-transformer": "^1.1.1",
-				"react-native-screens": "2.9.0",
-				"react-native-svg": "9.13.6",
-				"react-native-url-polyfill": "^1.1.2",
-				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-4/react-native-video-5.2.0-wp-4.tgz",
-				"react-native-webview": "11.6.2"
+		"node_modules/@react-native-community/cli-clean/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"@wordpress/readable-js-assets-webpack-plugin": {
-			"version": "file:packages/readable-js-assets-webpack-plugin",
-			"dev": true
-		},
-		"@wordpress/redux-routine": {
-			"version": "file:packages/redux-routine",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"is-plain-object": "^5.0.0",
-				"is-promise": "^4.0.0",
-				"rungen": "^0.3.2"
+		"node_modules/@react-native-community/cli-clean/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 			}
 		},
-		"@wordpress/report-flaky-tests": {
-			"version": "file:packages/report-flaky-tests",
-			"dev": true,
-			"requires": {
-				"@actions/core": "^1.8.0",
-				"@actions/github": "^5.0.1",
-				"jest-message-util": "^28.0.2",
-				"unzipper": "^0.10.11"
-			},
-			"dependencies": {
-				"@actions/core": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.8.0.tgz",
-					"integrity": "sha512-XirM+Zo/PFlA+1h+i4bkfvagujta+LIM2AOSzPbt8JqXbbuxb1HTB+FqIyaKmue9yiCx/JIJY6pXsOl3+T8JGw==",
-					"dev": true,
-					"requires": {
-						"@actions/http-client": "^1.0.11"
-					}
-				},
-				"@actions/github": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/@actions/github/-/github-5.0.1.tgz",
-					"integrity": "sha512-JZGyPM9ektb8NVTTI/2gfJ9DL7Rk98tQ7OVyTlgTuaQroariRBsOnzjy0I2EarX4xUZpK88YyO503fhmjFdyAg==",
-					"dev": true,
-					"requires": {
-						"@actions/http-client": "^1.0.11",
-						"@octokit/core": "^3.6.0",
-						"@octokit/plugin-paginate-rest": "^2.17.0",
-						"@octokit/plugin-rest-endpoint-methods": "^5.13.0"
-					}
-				},
-				"@jest/types": {
-					"version": "28.0.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-28.0.2.tgz",
-					"integrity": "sha512-hi3jUdm9iht7I2yrV5C4s3ucCJHUP8Eh3W6rQ1s4n/Qw9rQgsda4eqCt+r3BKRi7klVmZfQlMx1nGlzNMP2d8A==",
-					"dev": true,
-					"requires": {
-						"@jest/schemas": "^28.0.2",
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^17.0.8",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@octokit/core": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/@octokit/core/-/core-3.6.0.tgz",
-					"integrity": "sha512-7RKRKuA4xTjMhY+eG3jthb3hlZCsOwg3rztWh75Xc+ShDWOfDDATWbeZpAHBNRpm4Tv9WgBMOy1zEJYXG6NJ7Q==",
-					"dev": true,
-					"requires": {
-						"@octokit/auth-token": "^2.4.4",
-						"@octokit/graphql": "^4.5.8",
-						"@octokit/request": "^5.6.3",
-						"@octokit/request-error": "^2.0.5",
-						"@octokit/types": "^6.0.3",
-						"before-after-hook": "^2.2.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/endpoint": {
-					"version": "6.0.12",
-					"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.12.tgz",
-					"integrity": "sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.0.3",
-						"is-plain-object": "^5.0.0",
-						"universal-user-agent": "^6.0.0"
-					}
-				},
-				"@octokit/openapi-types": {
-					"version": "11.2.0",
-					"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz",
-					"integrity": "sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==",
-					"dev": true
-				},
-				"@octokit/plugin-paginate-rest": {
-					"version": "2.17.0",
-					"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz",
-					"integrity": "sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.34.0"
-					},
-					"dependencies": {
-						"@octokit/types": {
-							"version": "6.34.0",
-							"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-							"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
-							"dev": true,
-							"requires": {
-								"@octokit/openapi-types": "^11.2.0"
-							}
-						}
-					}
-				},
-				"@octokit/plugin-rest-endpoint-methods": {
-					"version": "5.13.0",
-					"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz",
-					"integrity": "sha512-uJjMTkN1KaOIgNtUPMtIXDOjx6dGYysdIFhgA52x4xSadQCz3b/zJexvITDVpANnfKPW/+E0xkOvLntqMYpviA==",
-					"dev": true,
-					"requires": {
-						"@octokit/types": "^6.34.0",
-						"deprecation": "^2.3.1"
-					},
-					"dependencies": {
-						"@octokit/types": {
-							"version": "6.34.0",
-							"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-							"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
-							"dev": true,
-							"requires": {
-								"@octokit/openapi-types": "^11.2.0"
-							}
-						}
-					}
-				},
-				"@octokit/request": {
-					"version": "5.6.3",
-					"resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.6.3.tgz",
-					"integrity": "sha512-bFJl0I1KVc9jYTe9tdGGpAMPy32dLBXXo1dS/YwSCTL/2nd9XeHsY616RE3HPXDVk+a+dBuzyz5YdlXwcDTr2A==",
-					"dev": true,
-					"requires": {
-						"@octokit/endpoint": "^6.0.1",
-						"@octokit/request-error": "^2.1.0",
-						"@octokit/types": "^6.16.1",
-						"is-plain-object": "^5.0.0",
-						"node-fetch": "^2.6.7",
-						"universal-user-agent": "^6.0.0"
-					},
-					"dependencies": {
-						"@octokit/types": {
-							"version": "6.34.0",
-							"resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz",
-							"integrity": "sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==",
-							"dev": true,
-							"requires": {
-								"@octokit/openapi-types": "^11.2.0"
-							}
-						}
-					}
-				},
-				"@types/yargs": {
-					"version": "17.0.10",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.10.tgz",
-					"integrity": "sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"before-after-hook": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-					"integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"deprecation": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
-					"integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-plain-object": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-					"dev": true
-				},
-				"jest-message-util": {
-					"version": "28.0.2",
-					"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.0.2.tgz",
-					"integrity": "sha512-knK7XyojvwYh1XiF2wmVdskgM/uN11KsjcEWWHfnMZNEdwXCrqB4sCBO94F4cfiAwCS8WFV6CDixDwPlMh/wdA==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.12.13",
-						"@jest/types": "^28.0.2",
-						"@types/stack-utils": "^2.0.0",
-						"chalk": "^4.0.0",
-						"graceful-fs": "^4.2.9",
-						"micromatch": "^4.0.4",
-						"pretty-format": "^28.0.2",
-						"slash": "^3.0.0",
-						"stack-utils": "^2.0.3"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "28.0.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.0.2.tgz",
-					"integrity": "sha512-UmGZ1IERwS3yY35LDMTaBUYI1w4udZDdJGGT/DqQeKG9ZLDn7/K2Jf/JtYSRiHCCKMHvUA+zsEGSmHdpaVp1yw==",
-					"dev": true,
-					"requires": {
-						"@jest/schemas": "^28.0.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^18.0.0"
-					}
-				},
-				"react-is": {
-					"version": "18.1.0",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-					"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"tr46": {
-					"version": "0.0.3",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-					"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-					"dev": true
-				},
-				"universal-user-agent": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz",
-					"integrity": "sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==",
-					"dev": true
-				},
-				"webidl-conversions": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-					"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-					"dev": true
-				},
-				"whatwg-url": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-					"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
-					"dev": true,
-					"requires": {
-						"tr46": "~0.0.3",
-						"webidl-conversions": "^3.0.0"
-					}
-				}
+		"node_modules/@react-native-community/cli-clean/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/reusable-blocks": {
-			"version": "file:packages/reusable-blocks",
-			"requires": {
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/notices": "file:packages/notices",
-				"@wordpress/url": "file:packages/url"
-			}
-		},
-		"@wordpress/rich-text": {
-			"version": "file:packages/rich-text",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/a11y": "file:packages/a11y",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/deprecated": "file:packages/deprecated",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/escape-html": "file:packages/escape-html",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/keycodes": "file:packages/keycodes",
-				"memize": "^1.1.0",
-				"rememo": "^4.0.0"
-			}
-		},
-		"@wordpress/scripts": {
-			"version": "file:packages/scripts",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.16.0",
-				"@pmmmwh/react-refresh-webpack-plugin": "^0.5.2",
-				"@svgr/webpack": "^6.2.1",
-				"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
-				"@wordpress/browserslist-config": "file:packages/browserslist-config",
-				"@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
-				"@wordpress/eslint-plugin": "file:packages/eslint-plugin",
-				"@wordpress/jest-preset-default": "file:packages/jest-preset-default",
-				"@wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
-				"@wordpress/postcss-plugins-preset": "file:packages/postcss-plugins-preset",
-				"@wordpress/prettier-config": "file:packages/prettier-config",
-				"@wordpress/stylelint-config": "file:packages/stylelint-config",
-				"adm-zip": "^0.5.9",
-				"babel-jest": "^27.4.5",
-				"babel-loader": "^8.2.3",
-				"browserslist": "^4.17.6",
-				"chalk": "^4.0.0",
-				"check-node-version": "^4.1.0",
-				"clean-webpack-plugin": "^3.0.0",
-				"copy-webpack-plugin": "^10.2.0",
-				"cross-spawn": "^5.1.0",
-				"css-loader": "^6.2.0",
-				"cssnano": "^5.0.7",
-				"cwd": "^0.10.0",
-				"dir-glob": "^3.0.1",
-				"eslint": "^8.3.0",
-				"expect-puppeteer": "^4.4.0",
-				"fast-glob": "^3.2.7",
-				"filenamify": "^4.2.0",
-				"jest": "^27.4.5",
-				"jest-dev-server": "^6.0.2",
-				"jest-environment-node": "^27.4.4",
-				"markdownlint-cli": "^0.31.1",
-				"merge-deep": "^3.0.3",
-				"mini-css-extract-plugin": "^2.5.1",
-				"minimist": "^1.2.0",
-				"npm-package-json-lint": "^5.0.0",
-				"npm-packlist": "^3.0.0",
-				"postcss": "^8.4.5",
-				"postcss-loader": "^6.2.1",
-				"prettier": "npm:wp-prettier@2.6.2",
-				"puppeteer-core": "^13.2.0",
-				"react-refresh": "^0.10.0",
-				"read-pkg-up": "^7.0.1",
-				"resolve-bin": "^0.4.0",
-				"sass": "^1.35.2",
-				"sass-loader": "^12.1.0",
-				"source-map-loader": "^3.0.0",
-				"stylelint": "^14.2.0",
-				"terser-webpack-plugin": "^5.1.4",
-				"url-loader": "^4.1.1",
-				"webpack": "^5.47.1",
-				"webpack-bundle-analyzer": "^4.4.2",
-				"webpack-cli": "^4.9.1",
-				"webpack-dev-server": "^4.4.0"
-			}
-		},
-		"@wordpress/server-side-render": {
-			"version": "file:packages/server-side-render",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@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/url": "file:packages/url",
-				"lodash": "^4.17.21"
+		"node_modules/@react-native-community/cli-clean/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/shortcode": {
-			"version": "file:packages/shortcode",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"memize": "^1.1.0"
+		"node_modules/@react-native-community/cli-clean/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
 			}
 		},
-		"@wordpress/style-engine": {
-			"version": "file:packages/style-engine",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"lodash": "^4.17.21"
+		"node_modules/@react-native-community/cli-clean/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/stylelint-config": {
-			"version": "file:packages/stylelint-config",
-			"dev": true,
-			"requires": {
-				"stylelint-config-recommended": "^6.0.0",
-				"stylelint-config-recommended-scss": "^5.0.2"
+		"node_modules/@react-native-community/cli-clean/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"@wordpress/token-list": {
-			"version": "file:packages/token-list",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@react-native-community/cli-clean/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/url": {
-			"version": "file:packages/url",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"remove-accents": "^0.4.2"
+		"node_modules/@react-native-community/cli-clean/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"@wordpress/viewport": {
-			"version": "file:packages/viewport",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/data": "file:packages/data"
+		"node_modules/@react-native-community/cli-clean/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/warning": {
-			"version": "file:packages/warning"
-		},
-		"@wordpress/widgets": {
-			"version": "file:packages/widgets",
-			"requires": {
-				"@babel/runtime": "^7.16.0",
-				"@wordpress/api-fetch": "file:packages/api-fetch",
-				"@wordpress/block-editor": "file:packages/block-editor",
-				"@wordpress/blocks": "file:packages/blocks",
-				"@wordpress/components": "file:packages/components",
-				"@wordpress/compose": "file:packages/compose",
-				"@wordpress/core-data": "file:packages/core-data",
-				"@wordpress/data": "file:packages/data",
-				"@wordpress/element": "file:packages/element",
-				"@wordpress/i18n": "file:packages/i18n",
-				"@wordpress/icons": "file:packages/icons",
-				"@wordpress/notices": "file:packages/notices",
-				"classnames": "^2.3.1"
+		"node_modules/@react-native-community/cli-clean/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@wordpress/wordcount": {
-			"version": "file:packages/wordcount",
-			"requires": {
-				"@babel/runtime": "^7.16.0"
+		"node_modules/@react-native-community/cli-clean/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"@xtuc/ieee754": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-			"integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-			"dev": true
+		"node_modules/@react-native-community/cli-clean/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"@xtuc/long": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-clean/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"@yarnpkg/lockfile": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
-			"integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-config": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-config/-/cli-config-12.3.2.tgz",
+			"integrity": "sha512-UUCzDjQgvAVL/57rL7eOuFUhd+d+6qfM7V8uOegQFeFEmSmvUUDLYoXpBa5vAK9JgQtSqMBJ1Shmwao+/oElxQ==",
+			"dependencies": {
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"cosmiconfig": "^5.1.0",
+				"deepmerge": "^4.3.0",
+				"glob": "^7.1.3",
+				"joi": "^17.2.1"
+			}
 		},
-		"@yarnpkg/parsers": {
-			"version": "3.0.0-rc.21",
-			"resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.21.tgz",
-			"integrity": "sha512-aM82UlEU12+grklXCyGnMXMqChrW8BDI6DZuw2JjijLyErEqZ/9MjEyYhcn+oz8bKSvudEAe8ygRzkt1cVMOtQ==",
-			"dev": true,
-			"requires": {
-				"js-yaml": "^3.10.0",
-				"tslib": "^2.4.0"
+		"node_modules/@react-native-community/cli-config/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
 			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-config/node_modules/cosmiconfig": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+			"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
 			"dependencies": {
-				"tslib": {
-					"version": "2.4.0",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-					"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
-					"dev": true
-				}
+				"import-fresh": "^2.0.0",
+				"is-directory": "^0.3.1",
+				"js-yaml": "^3.13.1",
+				"parse-json": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"JSONStream": {
-			"version": "1.3.5",
-			"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-			"integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
-			"dev": true,
-			"requires": {
-				"jsonparse": "^1.2.0",
-				"through": ">=2.2.7 <3"
+		"node_modules/@react-native-community/cli-config/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"abab": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
-			"integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
-			"dev": true
+		"node_modules/@react-native-community/cli-config/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"abbrev": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-			"dev": true
+		"node_modules/@react-native-community/cli-config/node_modules/import-fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+			"integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
+			"dependencies": {
+				"caller-path": "^2.0.0",
+				"resolve-from": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"abort-controller": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
-			"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
-			"requires": {
-				"event-target-shim": "^5.0.0"
+		"node_modules/@react-native-community/cli-config/node_modules/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+			"dependencies": {
+				"error-ex": "^1.3.1",
+				"json-parse-better-errors": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"absolute-path": {
-			"version": "0.0.0",
-			"resolved": "https://registry.npmjs.org/absolute-path/-/absolute-path-0.0.0.tgz",
-			"integrity": "sha1-p4di+9rftSl76ZsV01p4Wy8JW/c="
-		},
-		"accepts": {
-			"version": "1.3.7",
-			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-			"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-			"requires": {
-				"mime-types": "~2.1.24",
-				"negotiator": "0.6.2"
-			},
-			"dependencies": {
-				"mime-db": {
-					"version": "1.47.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
-					"integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw=="
-				},
-				"mime-types": {
-					"version": "2.1.30",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
-					"integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
-					"requires": {
-						"mime-db": "1.47.0"
-					}
-				}
+		"node_modules/@react-native-community/cli-config/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"acorn": {
-			"version": "6.4.2",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-			"integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-debugger-ui": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-12.3.2.tgz",
+			"integrity": "sha512-nSWQUL+51J682DlfcC1bjkUbQbGvHCC25jpqTwHIjmmVjYCX1uHuhPSqQKgPNdvtfOkrkACxczd7kVMmetxY2Q==",
+			"dependencies": {
+				"serve-static": "^1.13.1"
+			}
 		},
-		"acorn-globals": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-			"integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-			"dev": true,
-			"requires": {
-				"acorn": "^7.1.1",
-				"acorn-walk": "^7.1.1"
-			},
+		"node_modules/@react-native-community/cli-doctor": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-doctor/-/cli-doctor-12.3.2.tgz",
+			"integrity": "sha512-GrAabdY4qtBX49knHFvEAdLtCjkmndjTeqhYO6BhsbAeKOtspcLT/0WRgdLIaKODRa61ADNB3K5Zm4dU0QrZOg==",
 			"dependencies": {
-				"acorn": {
-					"version": "7.4.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-					"dev": true
-				}
+				"@react-native-community/cli-config": "12.3.2",
+				"@react-native-community/cli-platform-android": "12.3.2",
+				"@react-native-community/cli-platform-ios": "12.3.2",
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"command-exists": "^1.2.8",
+				"deepmerge": "^4.3.0",
+				"envinfo": "^7.10.0",
+				"execa": "^5.0.0",
+				"hermes-profile-transformer": "^0.0.6",
+				"ip": "^1.1.5",
+				"node-stream-zip": "^1.9.1",
+				"ora": "^5.4.1",
+				"semver": "^7.5.2",
+				"strip-ansi": "^5.2.0",
+				"wcwidth": "^1.0.1",
+				"yaml": "^2.2.1"
 			}
 		},
-		"acorn-import-assertions": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-			"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
 		},
-		"acorn-jsx": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-			"integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"acorn-walk": {
-			"version": "7.2.0",
-			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"add-stream": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz",
-			"integrity": "sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
 		},
-		"address": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/address/-/address-1.2.0.tgz",
-			"integrity": "sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"adm-zip": {
-			"version": "0.5.9",
-			"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.9.tgz",
-			"integrity": "sha512-s+3fXLkeeLjZ2kLjCBwQufpI5fuN+kIGBxu6530nVQZGVol0d7Y/M88/xw9HGGUcJjKf8LutN3VPRUBq6N7Ajg==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"agent-base": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-			"dev": true,
-			"requires": {
-				"debug": "4"
-			},
-			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+		"node_modules/@react-native-community/cli-doctor/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
 			}
 		},
-		"agentkeepalive": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.2.1.tgz",
-			"integrity": "sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==",
-			"dev": true,
-			"requires": {
-				"debug": "^4.1.0",
-				"depd": "^1.1.2",
-				"humanize-ms": "^1.2.1"
+		"node_modules/@react-native-community/cli-doctor/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
 			},
-			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"aggregate-error": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.0.tgz",
-			"integrity": "sha512-yKD9kEoJIR+2IFqhMwayIBgheLYbB3PS2OBhWae1L/ODTd/JF/30cW0bc9TqzRL3k4U41Dieu3BF4I29p8xesA==",
-			"dev": true,
-			"requires": {
-				"clean-stack": "^2.0.0",
-				"indent-string": "^3.2.0"
+		"node_modules/@react-native-community/cli-doctor/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"airbnb-js-shims": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/airbnb-js-shims/-/airbnb-js-shims-2.2.1.tgz",
-			"integrity": "sha512-wJNXPH66U2xjgo1Zwyjf9EydvJ2Si94+vSdk6EERcBfB2VZkeltpqIats0cqIZMLCXP3zcyaUKGYQeIBT6XjsQ==",
-			"dev": true,
-			"requires": {
-				"array-includes": "^3.0.3",
-				"array.prototype.flat": "^1.2.1",
-				"array.prototype.flatmap": "^1.2.1",
-				"es5-shim": "^4.5.13",
-				"es6-shim": "^0.35.5",
-				"function.prototype.name": "^1.1.0",
-				"globalthis": "^1.0.0",
-				"object.entries": "^1.1.0",
-				"object.fromentries": "^2.0.0 || ^1.0.0",
-				"object.getownpropertydescriptors": "^2.0.3",
-				"object.values": "^1.1.0",
-				"promise.allsettled": "^1.0.0",
-				"promise.prototype.finally": "^3.1.0",
-				"string.prototype.matchall": "^4.0.0 || ^3.0.1",
-				"string.prototype.padend": "^3.0.0",
-				"string.prototype.padstart": "^3.0.0",
-				"symbol.prototype.description": "^1.0.0"
-			}
-		},
-		"ajv": {
-			"version": "8.7.1",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.7.1.tgz",
-			"integrity": "sha512-gPpOObTO1QjbnN1sVMjJcp1TF9nggMfO4MBR5uQl6ZVTOaEPq5i4oq/6R9q2alMMPB3eg53wFv1RuJBLuxf3Hw==",
-			"dev": true,
-			"requires": {
-				"fast-deep-equal": "^3.1.1",
-				"json-schema-traverse": "^1.0.0",
-				"require-from-string": "^2.0.2",
-				"uri-js": "^4.2.2"
+		"node_modules/@react-native-community/cli-doctor/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-doctor/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
 			"dependencies": {
-				"json-schema-traverse": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-					"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-					"dev": true
-				}
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"ajv-draft-04": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
-			"integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"ajv-errors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-			"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/ora/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"ajv-formats": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-			"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-			"dev": true,
-			"requires": {
-				"ajv": "^8.0.0"
+		"node_modules/@react-native-community/cli-doctor/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"ajv-keywords": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-			"integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"alphanum-sort": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-			"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"anser": {
-			"version": "1.4.10",
-			"resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
-			"integrity": "sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww=="
+		"node_modules/@react-native-community/cli-doctor/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"ansi-align": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
-			"integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
-			"dev": true,
-			"requires": {
-				"string-width": "^4.1.0"
-			},
+		"node_modules/@react-native-community/cli-doctor/node_modules/strip-ansi": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+			"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"ansi-regex": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"ansi-colors": {
+		"node_modules/@react-native-community/cli-doctor/node_modules/strip-ansi/node_modules/ansi-regex": {
 			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-			"integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+			"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"ansi-escapes": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-			"integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-			"dev": true
+		"node_modules/@react-native-community/cli-doctor/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"ansi-fragments": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-fragments/-/ansi-fragments-0.2.1.tgz",
-			"integrity": "sha512-DykbNHxuXQwUDRv5ibc2b0x7uw7wmwOGLBUd5RmaQ5z8Lhx19vwvKV+FAsM5rEA6dEcHxX+/Ad5s9eF2k2bB+w==",
-			"requires": {
-				"colorette": "^1.0.7",
-				"slice-ansi": "^2.0.0",
-				"strip-ansi": "^5.0.0"
+		"node_modules/@react-native-community/cli-doctor/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli-doctor/node_modules/yaml": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+			"integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+			"license": "ISC",
+			"bin": {
+				"yaml": "bin.mjs"
 			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@react-native-community/cli-hermes": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-hermes/-/cli-hermes-12.3.2.tgz",
+			"integrity": "sha512-SL6F9O8ghp4ESBFH2YAPLtIN39jdnvGBKnK4FGKpDCjtB3DnUmDsGFlH46S+GGt5M6VzfG2eeKEOKf3pZ6jUzA==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-				},
-				"slice-ansi": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-					"integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
-					"requires": {
-						"ansi-styles": "^3.2.0",
-						"astral-regex": "^1.0.0",
-						"is-fullwidth-code-point": "^2.0.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
-				}
+				"@react-native-community/cli-platform-android": "12.3.2",
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"hermes-profile-transformer": "^0.0.6",
+				"ip": "^1.1.5"
 			}
 		},
-		"ansi-html-community": {
-			"version": "0.0.8",
-			"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-			"integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-			"dev": true
+		"node_modules/@react-native-community/cli-hermes/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-hermes/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-hermes/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-12.3.2.tgz",
+			"integrity": "sha512-MZ5nO8yi/N+Fj2i9BJcJ9C/ez+9/Ir7lQt49DWRo9YDmzye66mYLr/P2l/qxsixllbbDi7BXrlLpxaEhMrDopg==",
+			"dependencies": {
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"execa": "^5.0.0",
+				"fast-xml-parser": "^4.2.4",
+				"glob": "^7.1.3",
+				"logkitty": "^0.7.1"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"ansi-regex": {
+		"node_modules/@react-native-community/cli-platform-android/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-android/node_modules/shebang-regex": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-			"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"requires": {
-				"color-convert": "^1.9.0"
+		"node_modules/@react-native-community/cli-platform-android/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"ansi-to-html": {
-			"version": "0.6.15",
-			"resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.15.tgz",
-			"integrity": "sha512-28ijx2aHJGdzbs+O5SNQF65r6rrKYnkuwTYm8lZlChuoJ9P1vVzIpWO20sQTqTPDXYp6NFwk326vApTtLVFXpQ==",
-			"dev": true,
-			"requires": {
-				"entities": "^2.0.0"
+		"node_modules/@react-native-community/cli-platform-android/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
 			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-12.3.2.tgz",
+			"integrity": "sha512-OcWEAbkev1IL6SUiQnM6DQdsvfsKZhRZtoBNSj9MfdmwotVZSOEZJ+IjZ1FR9ChvMWayO9ns/o8LgoQxr1ZXeg==",
 			"dependencies": {
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
-				}
+				"@react-native-community/cli-tools": "12.3.2",
+				"chalk": "^4.1.2",
+				"execa": "^5.0.0",
+				"fast-xml-parser": "^4.0.12",
+				"glob": "^7.1.3",
+				"ora": "^5.4.1"
 			}
 		},
-		"any-observable": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
-			"integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==",
-			"dev": true
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"anymatch": {
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/shebang-command": {
 			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-			"integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-			"requires": {
-				"micromatch": "^3.1.4",
-				"normalize-path": "^2.1.1"
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"app-root-dir": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
-			"integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
-			"dev": true
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"app-root-path": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
-			"integrity": "sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA=="
-		},
-		"appdirsjs": {
-			"version": "1.2.6",
-			"resolved": "https://registry.npmjs.org/appdirsjs/-/appdirsjs-1.2.6.tgz",
-			"integrity": "sha512-D8wJNkqMCeQs3kLasatELsddox/Xqkhp+J07iXGyL54fVN7oc+nmNfYzGuCs1IEP6uBw+TfpuO3JKwc+lECy4w=="
-		},
-		"appium": {
-			"version": "1.22.3",
-			"resolved": "https://registry.npmjs.org/appium/-/appium-1.22.3.tgz",
-			"integrity": "sha512-0/SkcOdC8h79Z5TgCeWbeGEbAQzLzwR3h2jYL5EI6zPIrbqZczGv7S8HgmFQPQ98La2wmf26dpPvL8Vw4r/WXw==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.6.0",
-				"appium-android-driver": "^4.20.0",
-				"appium-base-driver": "^7.0.0",
-				"appium-espresso-driver": "^1.0.0",
-				"appium-fake-driver": "^1.x",
-				"appium-flutter-driver": "^0.x",
-				"appium-geckodriver": "^0.x",
-				"appium-ios-driver": "4.x",
-				"appium-mac-driver": "1.x",
-				"appium-mac2-driver": "^0.x",
-				"appium-safari-driver": "^2.1.0",
-				"appium-support": "2.x",
-				"appium-tizen-driver": "^1.1.1-beta.4",
-				"appium-uiautomator2-driver": "^1.37.1",
-				"appium-windows-driver": "1.x",
-				"appium-xcuitest-driver": "^3.59.0",
-				"appium-youiengine-driver": "^1.2.8",
-				"argparse": "^2.0.1",
-				"async-lock": "^1.0.0",
-				"asyncbox": "2.x",
-				"axios": "^0.x",
-				"bluebird": "3.x",
-				"continuation-local-storage": "3.x",
-				"find-root": "^1.1.0",
-				"lodash": "^4.17.11",
-				"longjohn": "^0.2.12",
-				"npmlog": "4.x",
-				"semver": "^7.0.0",
-				"source-map-support": "^0.x",
-				"teen_process": "1.x",
-				"winston": "3.x",
-				"word-wrap": "^1.2.3"
-			},
-			"dependencies": {
-				"101": {
-					"version": "1.6.3",
-					"resolved": "https://registry.npmjs.org/101/-/101-1.6.3.tgz",
-					"integrity": "sha512-4dmQ45yY0Dx24Qxp+zAsNLlMF6tteCyfVzgbulvSyC7tCyd3V8sW76sS0tHq8NpcbXfWTKasfyfzU1Kd86oKzw==",
-					"dev": true,
-					"requires": {
-						"clone": "^1.0.2",
-						"deep-eql": "^0.1.3",
-						"keypather": "^1.10.2"
-					}
-				},
-				"@babel/polyfill": {
-					"version": "7.12.1",
-					"resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.12.1.tgz",
-					"integrity": "sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==",
-					"dev": true,
-					"requires": {
-						"core-js": "^2.6.5",
-						"regenerator-runtime": "^0.13.4"
-					}
-				},
-				"@babel/runtime": {
-					"version": "7.14.6",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-					"integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-					"dev": true,
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				},
-				"@dabh/diagnostics": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz",
-					"integrity": "sha512-+A1YivoVDNNVCdfozHSR8v/jyuuLTMXwjWuxPFlFlUapXoGc+Gj9mDlTDDfrwl7rXCl2tNZ0kE8sIBO6YOn96Q==",
-					"dev": true,
-					"requires": {
-						"colorspace": "1.1.x",
-						"enabled": "2.0.x",
-						"kuler": "^2.0.0"
-					}
-				},
-				"@jimp/bmp": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.16.1.tgz",
-					"integrity": "sha512-iwyNYQeBawrdg/f24x3pQ5rEx+/GwjZcCXd3Kgc+ZUd+Ivia7sIqBsOnDaMZdKCBPlfW364ekexnlOqyVa0NWg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"bmp-js": "^0.1.0"
-					}
-				},
-				"@jimp/core": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.16.1.tgz",
-					"integrity": "sha512-la7kQia31V6kQ4q1kI/uLimu8FXx7imWVajDGtwUG8fzePLWDFJyZl0fdIXVCL1JW2nBcRHidUot6jvlRDi2+g==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"any-base": "^1.1.0",
-						"buffer": "^5.2.0",
-						"exif-parser": "^0.1.12",
-						"file-type": "^9.0.0",
-						"load-bmfont": "^1.3.1",
-						"mkdirp": "^0.5.1",
-						"phin": "^2.9.1",
-						"pixelmatch": "^4.0.2",
-						"tinycolor2": "^1.4.1"
-					},
-					"dependencies": {
-						"mkdirp": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-							"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.5"
-							}
-						}
-					}
-				},
-				"@jimp/custom": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.16.1.tgz",
-					"integrity": "sha512-DNUAHNSiUI/j9hmbatD6WN/EBIyeq4AO0frl5ETtt51VN1SvE4t4v83ZA/V6ikxEf3hxLju4tQ5Pc3zmZkN/3A==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/core": "^0.16.1"
-					}
-				},
-				"@jimp/gif": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.16.1.tgz",
-					"integrity": "sha512-r/1+GzIW1D5zrP4tNrfW+3y4vqD935WBXSc8X/wm23QTY9aJO9Lw6PEdzpYCEY+SOklIFKaJYUAq/Nvgm/9ryw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"gifwrap": "^0.9.2",
-						"omggif": "^1.0.9"
-					}
-				},
-				"@jimp/jpeg": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.16.1.tgz",
-					"integrity": "sha512-8352zrdlCCLFdZ/J+JjBslDvml+fS3Z8gttdml0We759PnnZGqrnPRhkOEOJbNUlE+dD4ckLeIe6NPxlS/7U+w==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"jpeg-js": "0.4.2"
-					}
-				},
-				"@jimp/plugin-blit": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.16.1.tgz",
-					"integrity": "sha512-fKFNARm32RoLSokJ8WZXHHH2CGzz6ire2n1Jh6u+XQLhk9TweT1DcLHIXwQMh8oR12KgjbgsMGvrMVlVknmOAg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-blur": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.16.1.tgz",
-					"integrity": "sha512-1WhuLGGj9MypFKRcPvmW45ht7nXkOKu+lg3n2VBzIB7r4kKNVchuI59bXaCYQumOLEqVK7JdB4glaDAbCQCLyw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-circle": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-circle/-/plugin-circle-0.16.1.tgz",
-					"integrity": "sha512-JK7yi1CIU7/XL8hdahjcbGA3V7c+F+Iw+mhMQhLEi7Q0tCnZ69YJBTamMiNg3fWPVfMuvWJJKOBRVpwNTuaZRg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-color": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.16.1.tgz",
-					"integrity": "sha512-9yQttBAO5SEFj7S6nJK54f+1BnuBG4c28q+iyzm1JjtnehjqMg6Ljw4gCSDCvoCQ3jBSYHN66pmwTV74SU1B7A==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"tinycolor2": "^1.4.1"
-					}
-				},
-				"@jimp/plugin-contain": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.16.1.tgz",
-					"integrity": "sha512-44F3dUIjBDHN+Ym/vEfg+jtjMjAqd2uw9nssN67/n4FdpuZUVs7E7wadKY1RRNuJO+WgcD5aDQcsvurXMETQTg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-cover": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.16.1.tgz",
-					"integrity": "sha512-YztWCIldBAVo0zxcQXR+a/uk3/TtYnpKU2CanOPJ7baIuDlWPsG+YE4xTsswZZc12H9Kl7CiziEbDtvF9kwA/Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-crop": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.16.1.tgz",
-					"integrity": "sha512-UQdva9oQzCVadkyo3T5Tv2CUZbf0klm2cD4cWMlASuTOYgaGaFHhT9st+kmfvXjKL8q3STkBu/zUPV6PbuV3ew==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-displace": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.16.1.tgz",
-					"integrity": "sha512-iVAWuz2+G6Heu8gVZksUz+4hQYpR4R0R/RtBzpWEl8ItBe7O6QjORAkhxzg+WdYLL2A/Yd4ekTpvK0/qW8hTVw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-dither": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.16.1.tgz",
-					"integrity": "sha512-tADKVd+HDC9EhJRUDwMvzBXPz4GLoU6s5P7xkVq46tskExYSptgj5713J5Thj3NMgH9Rsqu22jNg1H/7tr3V9Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-fisheye": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-fisheye/-/plugin-fisheye-0.16.1.tgz",
-					"integrity": "sha512-BWHnc5hVobviTyIRHhIy9VxI1ACf4CeSuCfURB6JZm87YuyvgQh5aX5UDKtOz/3haMHXBLP61ZBxlNpMD8CG4A==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-flip": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.16.1.tgz",
-					"integrity": "sha512-KdxTf0zErfZ8DyHkImDTnQBuHby+a5YFdoKI/G3GpBl3qxLBvC+PWkS2F/iN3H7wszP7/TKxTEvWL927pypT0w==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-gaussian": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.16.1.tgz",
-					"integrity": "sha512-u9n4wjskh3N1mSqketbL6tVcLU2S5TEaFPR40K6TDv4phPLZALi1Of7reUmYpVm8mBDHt1I6kGhuCJiWvzfGyg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-invert": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.16.1.tgz",
-					"integrity": "sha512-2DKuyVXANH8WDpW9NG+PYFbehzJfweZszFYyxcaewaPLN0GxvxVLOGOPP1NuUTcHkOdMFbE0nHDuB7f+sYF/2w==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-mask": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.16.1.tgz",
-					"integrity": "sha512-snfiqHlVuj4bSFS0v96vo2PpqCDMe4JB+O++sMo5jF5mvGcGL6AIeLo8cYqPNpdO6BZpBJ8MY5El0Veckhr39Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-normalize": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.16.1.tgz",
-					"integrity": "sha512-dOQfIOvGLKDKXPU8xXWzaUeB0nvkosHw6Xg1WhS1Z5Q0PazByhaxOQkSKgUryNN/H+X7UdbDvlyh/yHf3ITRaw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-print": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.16.1.tgz",
-					"integrity": "sha512-ceWgYN40jbN4cWRxixym+csyVymvrryuKBQ+zoIvN5iE6OyS+2d7Mn4zlNgumSczb9GGyZZESIgVcBDA1ezq0Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"load-bmfont": "^1.4.0"
-					}
-				},
-				"@jimp/plugin-resize": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.16.1.tgz",
-					"integrity": "sha512-u4JBLdRI7dargC04p2Ha24kofQBk3vhaf0q8FwSYgnCRwxfvh2RxvhJZk9H7Q91JZp6wgjz/SjvEAYjGCEgAwQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-rotate": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.16.1.tgz",
-					"integrity": "sha512-ZUU415gDQ0VjYutmVgAYYxC9Og9ixu2jAGMCU54mSMfuIlmohYfwARQmI7h4QB84M76c9hVLdONWjuo+rip/zg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-scale": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.16.1.tgz",
-					"integrity": "sha512-jM2QlgThIDIc4rcyughD5O7sOYezxdafg/2Xtd1csfK3z6fba3asxDwthqPZAgitrLgiKBDp6XfzC07Y/CefUw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-shadow": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-shadow/-/plugin-shadow-0.16.1.tgz",
-					"integrity": "sha512-MeD2Is17oKzXLnsphAa1sDstTu6nxscugxAEk3ji0GV1FohCvpHBcec0nAq6/czg4WzqfDts+fcPfC79qWmqrA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugin-threshold": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugin-threshold/-/plugin-threshold-0.16.1.tgz",
-					"integrity": "sha512-iGW8U/wiCSR0+6syrPioVGoSzQFt4Z91SsCRbgNKTAk7D+XQv6OI78jvvYg4o0c2FOlwGhqz147HZV5utoSLxA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1"
-					}
-				},
-				"@jimp/plugins": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.16.1.tgz",
-					"integrity": "sha512-c+lCqa25b+4q6mJZSetlxhMoYuiltyS+ValLzdwK/47+aYsq+kcJNl+TuxIEKf59yr9+5rkbpsPkZHLF/V7FFA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/plugin-blit": "^0.16.1",
-						"@jimp/plugin-blur": "^0.16.1",
-						"@jimp/plugin-circle": "^0.16.1",
-						"@jimp/plugin-color": "^0.16.1",
-						"@jimp/plugin-contain": "^0.16.1",
-						"@jimp/plugin-cover": "^0.16.1",
-						"@jimp/plugin-crop": "^0.16.1",
-						"@jimp/plugin-displace": "^0.16.1",
-						"@jimp/plugin-dither": "^0.16.1",
-						"@jimp/plugin-fisheye": "^0.16.1",
-						"@jimp/plugin-flip": "^0.16.1",
-						"@jimp/plugin-gaussian": "^0.16.1",
-						"@jimp/plugin-invert": "^0.16.1",
-						"@jimp/plugin-mask": "^0.16.1",
-						"@jimp/plugin-normalize": "^0.16.1",
-						"@jimp/plugin-print": "^0.16.1",
-						"@jimp/plugin-resize": "^0.16.1",
-						"@jimp/plugin-rotate": "^0.16.1",
-						"@jimp/plugin-scale": "^0.16.1",
-						"@jimp/plugin-shadow": "^0.16.1",
-						"@jimp/plugin-threshold": "^0.16.1",
-						"timm": "^1.6.1"
-					}
-				},
-				"@jimp/png": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.16.1.tgz",
-					"integrity": "sha512-iyWoCxEBTW0OUWWn6SveD4LePW89kO7ZOy5sCfYeDM/oTPLpR8iMIGvZpZUz1b8kvzFr27vPst4E5rJhGjwsdw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/utils": "^0.16.1",
-						"pngjs": "^3.3.3"
-					},
-					"dependencies": {
-						"pngjs": {
-							"version": "3.4.0",
-							"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
-							"integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
-							"dev": true
-						}
-					}
-				},
-				"@jimp/tiff": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.16.1.tgz",
-					"integrity": "sha512-3K3+xpJS79RmSkAvFMgqY5dhSB+/sxhwTFA9f4AVHUK0oKW+u6r52Z1L0tMXHnpbAdR9EJ+xaAl2D4x19XShkQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"utif": "^2.0.1"
-					}
-				},
-				"@jimp/types": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.16.1.tgz",
-					"integrity": "sha512-g1w/+NfWqiVW4CaXSJyD28JQqZtm2eyKMWPhBBDCJN9nLCN12/Az0WFF3JUAktzdsEC2KRN2AqB1a2oMZBNgSQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/bmp": "^0.16.1",
-						"@jimp/gif": "^0.16.1",
-						"@jimp/jpeg": "^0.16.1",
-						"@jimp/png": "^0.16.1",
-						"@jimp/tiff": "^0.16.1",
-						"timm": "^1.6.1"
-					}
-				},
-				"@jimp/utils": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.16.1.tgz",
-					"integrity": "sha512-8fULQjB0x4LzUSiSYG6ZtQl355sZjxbv8r9PPAuYHzS9sGiSHJQavNqK/nKnpDsVkU88/vRGcE7t3nMU0dEnVw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"regenerator-runtime": "^0.13.3"
-					}
-				},
-				"@sindresorhus/is": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.2.0.tgz",
-					"integrity": "sha512-VkE3KLBmJwcCaVARtQpfuKcKv8gcBmUubrfHGF84dXuuW6jgsRYxPtzcIhPyK9WAPpRt2/xY6zkD9MnRaJzSyw==",
-					"dev": true
-				},
-				"@szmarczak/http-timer": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
-					"integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
-					"dev": true,
-					"requires": {
-						"defer-to-connect": "^2.0.0"
-					}
-				},
-				"@types/cacheable-request": {
-					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.2.tgz",
-					"integrity": "sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==",
-					"dev": true,
-					"requires": {
-						"@types/http-cache-semantics": "*",
-						"@types/keyv": "*",
-						"@types/node": "*",
-						"@types/responselike": "*"
-					}
-				},
-				"@types/caseless": {
-					"version": "0.12.2",
-					"resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
-					"integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==",
-					"dev": true
-				},
-				"@types/http-cache-semantics": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz",
-					"integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==",
-					"dev": true
-				},
-				"@types/keyv": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.3.tgz",
-					"integrity": "sha512-FXCJgyyN3ivVgRoml4h94G/p3kY+u/B86La+QptcqJaWtBWtmc6TtkNfS40n9bIvyLteHh7zXOtgbobORKPbDg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*"
-					}
-				},
-				"@types/node": {
-					"version": "16.3.3",
-					"resolved": "https://registry.npmjs.org/@types/node/-/node-16.3.3.tgz",
-					"integrity": "sha512-8h7k1YgQKxKXWckzFCMfsIwn0Y61UK6tlD6y2lOb3hTOIMlK3t9/QwHOhc81TwU+RMf0As5fj7NPjroERCnejQ==",
-					"dev": true
-				},
-				"@types/puppeteer": {
-					"version": "5.4.4",
-					"resolved": "https://registry.npmjs.org/@types/puppeteer/-/puppeteer-5.4.4.tgz",
-					"integrity": "sha512-3Nau+qi69CN55VwZb0ATtdUAlYlqOOQ3OfQfq0Hqgc4JMFXiQT/XInlwQ9g6LbicDslE6loIFsXFklGh5XmI6Q==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*"
-					}
-				},
-				"@types/puppeteer-core": {
-					"version": "5.4.0",
-					"resolved": "https://registry.npmjs.org/@types/puppeteer-core/-/puppeteer-core-5.4.0.tgz",
-					"integrity": "sha512-yqRPuv4EFcSkTyin6Yy17pN6Qz2vwVwTCJIDYMXbE3j8vTPhv0nCQlZOl5xfi0WHUkqvQsjAR8hAfjeMCoetwg==",
-					"dev": true,
-					"requires": {
-						"@types/puppeteer": "*"
-					}
-				},
-				"@types/request": {
-					"version": "2.48.6",
-					"resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.6.tgz",
-					"integrity": "sha512-vrZaV3Ij7j/l/3hz6OttZFtpRCu7zlq7XgkYHJP6FwVEAZkGQ095WqyJV08/GlW9eyXKVcp/xmtruHm8eHpw1g==",
-					"dev": true,
-					"requires": {
-						"@types/caseless": "*",
-						"@types/node": "*",
-						"@types/tough-cookie": "*",
-						"form-data": "^2.5.0"
-					},
-					"dependencies": {
-						"form-data": {
-							"version": "2.5.1",
-							"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
-							"integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
-							"dev": true,
-							"requires": {
-								"asynckit": "^0.4.0",
-								"combined-stream": "^1.0.6",
-								"mime-types": "^2.1.12"
-							}
-						}
-					}
-				},
-				"@types/responselike": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
-					"integrity": "sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*"
-					}
-				},
-				"@types/tough-cookie": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.1.tgz",
-					"integrity": "sha512-Y0K95ThC3esLEYD6ZuqNek29lNX2EM1qxV8y2FTLUB0ff5wWrk7az+mLrnNFUnaXcgKye22+sFBRXOgpPILZNg==",
-					"dev": true
-				},
-				"@types/which": {
-					"version": "1.3.2",
-					"resolved": "https://registry.npmjs.org/@types/which/-/which-1.3.2.tgz",
-					"integrity": "sha512-8oDqyLC7eD4HM307boe2QWKyuzdzWBj56xI/imSl2cpL+U3tCMaTAkMJ4ee5JBZ/FsOJlvRGeIShiZDAl1qERA==",
-					"dev": true
-				},
-				"@types/yauzl": {
-					"version": "2.9.2",
-					"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
-					"integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"@types/node": "*"
-					}
-				},
-				"@wdio/config": {
-					"version": "6.12.1",
-					"resolved": "https://registry.npmjs.org/@wdio/config/-/config-6.12.1.tgz",
-					"integrity": "sha512-V5hTIW5FNlZ1W33smHF4Rd5BKjGW2KeYhyXDQfXHjqLCeRiirZ9fABCo9plaVQDnwWSUMWYaAaIAifV82/oJCQ==",
-					"dev": true,
-					"requires": {
-						"@wdio/logger": "6.10.10",
-						"deepmerge": "^4.0.0",
-						"glob": "^7.1.2"
-					}
-				},
-				"@wdio/logger": {
-					"version": "6.10.10",
-					"resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-6.10.10.tgz",
-					"integrity": "sha512-2nh0hJz9HeZE0VIEMI+oPgjr/Q37ohrR9iqsl7f7GW5ik+PnKYCT9Eab5mR1GNMG60askwbskgGC1S9ygtvrSw==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.0.0",
-						"loglevel": "^1.6.0",
-						"loglevel-plugin-prefix": "^0.8.4",
-						"strip-ansi": "^6.0.0"
-					},
-					"dependencies": {
-						"ansi-regex": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-							"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-							"dev": true
-						},
-						"strip-ansi": {
-							"version": "6.0.1",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-							"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^5.0.1"
-							}
-						}
-					}
-				},
-				"@wdio/protocols": {
-					"version": "6.12.0",
-					"resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-6.12.0.tgz",
-					"integrity": "sha512-UhTBZxClCsM3VjaiDp4DoSCnsa7D1QNmI2kqEBfIpyNkT3GcZhJb7L+nL0fTkzCwi7+/uLastb3/aOwH99gt0A==",
-					"dev": true
-				},
-				"@wdio/repl": {
-					"version": "6.11.0",
-					"resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-6.11.0.tgz",
-					"integrity": "sha512-FxrFKiTkFyELNGGVEH1uijyvNY7lUpmff6x+FGskFGZB4uSRs0rxkOMaEjxnxw7QP1zgQKr2xC7GyO03gIGRGg==",
-					"dev": true,
-					"requires": {
-						"@wdio/utils": "6.11.0"
-					}
-				},
-				"@wdio/utils": {
-					"version": "6.11.0",
-					"resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-6.11.0.tgz",
-					"integrity": "sha512-vf0sOQzd28WbI26d6/ORrQ4XKWTzSlWLm9W/K/eJO0NASKPEzR+E+Q2kaa+MJ4FKXUpjbt+Lxfo+C26TzBk7tg==",
-					"dev": true,
-					"requires": {
-						"@wdio/logger": "6.10.10"
-					}
-				},
-				"@xmldom/xmldom": {
-					"version": "0.7.5",
-					"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
-					"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
-					"dev": true
-				},
-				"accepts": {
-					"version": "1.3.7",
-					"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-					"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-					"dev": true,
-					"requires": {
-						"mime-types": "~2.1.24",
-						"negotiator": "0.6.2"
-					}
-				},
-				"adbkit-apkreader": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/adbkit-apkreader/-/adbkit-apkreader-3.2.0.tgz",
-					"integrity": "sha512-QwsxPYCqWSmCAiW/A4gq0eytb4jtZc7WNbECIhLCRfGEB38oXzIV/YkTpkOTQFKSg3S4Svb6y///qOUH7UrWWw==",
-					"dev": true,
-					"requires": {
-						"bluebird": "^3.4.7",
-						"debug": "~4.1.1",
-						"yauzl": "^2.7.0"
-					}
-				},
-				"agent-base": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
-					"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					},
-					"dependencies": {
-						"fast-deep-equal": {
-							"version": "3.1.3",
-							"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-							"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-							"dev": true
-						}
-					}
-				},
-				"ansi-gray": {
-					"version": "0.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-gray/-/ansi-gray-0.1.1.tgz",
-					"integrity": "sha1-KWLPVOyXksSFEKPetSRDaGHvclE=",
-					"dev": true,
-					"requires": {
-						"ansi-wrap": "0.1.0"
-					}
-				},
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"ansi-wrap": {
-					"version": "0.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
-					"integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=",
-					"dev": true
-				},
-				"any-base": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
-					"integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==",
-					"dev": true
-				},
-				"appium-adb": {
-					"version": "8.16.2",
-					"resolved": "https://registry.npmjs.org/appium-adb/-/appium-adb-8.16.2.tgz",
-					"integrity": "sha512-mWPPY0Z10Q3HiHsiKD5+PJelpU/AtG1Hxr18S2KKM/sRPIFIo05iyboXsGYYg0cx0u3Mtwdq7LEhWRlSWbrr3A==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"adbkit-apkreader": "^3.1.2",
-						"appium-support": "^2.48.1",
-						"async-lock": "^1.0.0",
-						"asyncbox": "^2.6.0",
-						"bluebird": "^3.4.7",
-						"ini": "^2.0.0",
-						"lodash": "^4.0.0",
-						"lru-cache": "^6.0.0",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.x",
-						"teen_process": "^1.11.0",
-						"utf7": "^1.0.2"
-					}
-				},
-				"appium-android-driver": {
-					"version": "4.51.0",
-					"resolved": "https://registry.npmjs.org/appium-android-driver/-/appium-android-driver-4.51.0.tgz",
-					"integrity": "sha512-OghdG1BdmF6MZiHnulqo+6khxPKKE5Bb4JaGMND/7NG8CFuztAFA3vf4X5g3p3zs5e9a2XoSFUqC5iEoE4zvcQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-adb": "^8.16.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-chromedriver": "^4.13.0",
-						"appium-support": "^2.47.1",
-						"asyncbox": "^2.8.0",
-						"axios": "^0.x",
-						"bluebird": "^3.4.7",
-						"io.appium.settings": "^3.3.0",
-						"jimp": "^0.16.1",
-						"lodash": "^4.17.4",
-						"lru-cache": "^6.0.0",
-						"moment": "^2.24.0",
-						"moment-timezone": "^0.5.26",
-						"portfinder": "^1.0.6",
-						"portscanner": "2.2.0",
-						"semver": "^7.0.0",
-						"shared-preferences-builder": "^0.0.4",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.9.0",
-						"ws": "^8.0.0"
-					},
-					"dependencies": {
-						"ws": {
-							"version": "8.2.3",
-							"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-							"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-							"dev": true
-						}
-					}
-				},
-				"appium-base-driver": {
-					"version": "7.11.0",
-					"resolved": "https://registry.npmjs.org/appium-base-driver/-/appium-base-driver-7.11.0.tgz",
-					"integrity": "sha512-EXdLWbj3adRMKgopeaUXeQsoMu8ttVPqYZXPoSjG82IiyaccpnZmAjSkmCwvhlIyW9lw8xM+cwdaF6ZRYMZLLg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-support": "^2.54.1",
-						"async-lock": "^1.0.0",
-						"asyncbox": "^2.9.1",
-						"axios": "^0.x",
-						"bluebird": "^3.5.3",
-						"body-parser": "^1.18.2",
-						"colors": "^1.1.2",
-						"es6-error": "^4.1.1",
-						"express": "^4.16.2",
-						"http-status-codes": "^2.1.1",
-						"lodash": "^4.0.0",
-						"lru-cache": "^6.0.0",
-						"method-override": "^3.0.0",
-						"morgan": "^1.9.0",
-						"serve-favicon": "^2.4.5",
-						"source-map-support": "^0.x",
-						"validate.js": "^0.13.0",
-						"webdriverio": "^6.0.2",
-						"ws": "^8.0.0"
-					},
-					"dependencies": {
-						"ws": {
-							"version": "8.2.3",
-							"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-							"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-							"dev": true
-						}
-					}
-				},
-				"appium-chromedriver": {
-					"version": "4.27.3",
-					"resolved": "https://registry.npmjs.org/appium-chromedriver/-/appium-chromedriver-4.27.3.tgz",
-					"integrity": "sha512-6yonhwM+DJ7fOJlu/q+UNtSwQ6SiTs6T8XTwP5ce1kEQAdANknOqkLVseqlvDyb1ICgcb2kUHRwtAYdnQZoqeQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.1.0",
-						"appium-support": "^2.46.0",
-						"asyncbox": "^2.0.2",
-						"axios": "^0.x",
-						"bluebird": "^3.5.1",
-						"compare-versions": "^3.4.0",
-						"fancy-log": "^1.3.2",
-						"lodash": "^4.17.4",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.x",
-						"teen_process": "^1.15.0",
-						"xmldom": "^0.x",
-						"xpath": "^0.x"
-					}
-				},
-				"appium-espresso-driver": {
-					"version": "1.45.3",
-					"resolved": "https://registry.npmjs.org/appium-espresso-driver/-/appium-espresso-driver-1.45.3.tgz",
-					"integrity": "sha512-CzWOsCD4z/67XmIfZzptiWYfHjGwjSOiltXwgTEi6WAL4WzBtz0tORu4+oYXNssen8EZ/ljgckcIA8GPB+5aKA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.4.3",
-						"appium-adb": "^8.9.0",
-						"appium-android-driver": "^4.45.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-support": "^2.46.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.0",
-						"lodash": "^4.17.11",
-						"portscanner": "^2.1.1",
-						"source-map-support": "^0.5.8",
-						"validate.js": "^0.x"
-					}
-				},
-				"appium-fake-driver": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/appium-fake-driver/-/appium-fake-driver-1.0.2.tgz",
-					"integrity": "sha512-mPyAbhoSupDMHrqq3gKdt4W8Boa349O2p/oirsNCyzNAJrHBlpFrLajRhjhLhPS5k0Snasas7l+jYkzZKqAt9Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-support": "^2.11.1",
-						"asyncbox": "^2.3.2",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"source-map-support": "^0.x",
-						"xmldom": "^0.x",
-						"xpath": "^0.x"
-					}
-				},
-				"appium-flutter-driver": {
-					"version": "0.0.32",
-					"resolved": "https://registry.npmjs.org/appium-flutter-driver/-/appium-flutter-driver-0.0.32.tgz",
-					"integrity": "sha512-Hl00luaY9duDQbg/LSXxJDYX/CXL+ZZxtiQ7Ms1F4GEt6SF6v9J4yd3vo6MWR8/nJmksP0XbyqaGRdrUOlMu8g==",
-					"dev": true,
-					"requires": {
-						"appium-adb": "^8.8.0",
-						"appium-base-driver": "^7.4.1",
-						"appium-ios-device": "^1.7.1",
-						"appium-support": "^2.47.1",
-						"appium-uiautomator2-driver": "^1.35.1",
-						"appium-xcuitest-driver": "^3.17.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.1.1",
-						"portscanner": "2.2.0",
-						"rpc-websockets": "^5.1.1"
-					}
-				},
-				"appium-geckodriver": {
-					"version": "0.3.3",
-					"resolved": "https://registry.npmjs.org/appium-geckodriver/-/appium-geckodriver-0.3.3.tgz",
-					"integrity": "sha512-bPv3a+2nl73kUSaOFKdFfoSTgUyF+XE8dn43fv9gpvNne4MbIGKfdGJFQ23xQ9bc4kr9qvVeIwVwJGcYXsgqoQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.1.0",
-						"appium-support": "^2.46.0",
-						"asyncbox": "^2.0.2",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"portscanner": "2.2.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.15.0"
-					}
-				},
-				"appium-idb": {
-					"version": "0.5.1",
-					"resolved": "https://registry.npmjs.org/appium-idb/-/appium-idb-0.5.1.tgz",
-					"integrity": "sha512-xijrqWSxJtKtWvXPVVR/FkVJtfQ5DwVCCA5R0nV0jMOtET55CoKKx0TO7KIiuZaHfQv/dbBCR8u7SEe3MF5Q9Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-support": "^2.41.0",
-						"asyncbox": "^2.5.2",
-						"bluebird": "^3.1.1",
-						"lodash": "^4.0.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.11.0"
-					}
-				},
-				"appium-ios-device": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/appium-ios-device/-/appium-ios-device-1.8.0.tgz",
-					"integrity": "sha512-l4PVO0RSCsgd9wLiHhpBOlCP2wM0ND3+9+UMKP72c3qaaC2JxEqiKNIoc0r/jW7D5/Aoh/MtTT2yFHvqtZ0r/Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-support": "^2.35.0",
-						"bluebird": "^3.1.1",
-						"lodash": "^4.17.15",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.5.5"
-					}
-				},
-				"appium-ios-driver": {
-					"version": "4.8.3",
-					"resolved": "https://registry.npmjs.org/appium-ios-driver/-/appium-ios-driver-4.8.3.tgz",
-					"integrity": "sha512-eC7dsZGHBkyHxsNGtX3eHl4BmQGEwcUKwddfAXig01EkWx7CkJ7rI+3L2H2IW9wt8yo8QZFuNTIw2HDLwKT3Kw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-ios-simulator": "^3.24.0",
-						"appium-remote-debugger": "^5.7.0",
-						"appium-support": "^2.41.0",
-						"appium-xcode": "^3.1.0",
-						"asyncbox": "^2.3.1",
-						"axios": "^0.x",
-						"bluebird": "^3.5.1",
-						"colors": "^1.1.2",
-						"js2xmlparser2": "^0.2.0",
-						"lodash": "^4.13.1",
-						"moment": "^2.24.0",
-						"moment-timezone": "^0.x",
-						"node-idevice": "^0.1.6",
-						"pem": "^1.8.3",
-						"portfinder": "^1.0.13",
-						"safari-launcher": "^2.0.5",
-						"source-map-support": "^0.x",
-						"teen_process": "^1.6.0",
-						"through": "^2.3.8",
-						"xmldom": "^0.x",
-						"xpath": "^0.x"
-					},
-					"dependencies": {
-						"@wdio/config": {
-							"version": "5.22.4",
-							"resolved": "https://registry.npmjs.org/@wdio/config/-/config-5.22.4.tgz",
-							"integrity": "sha512-i5dJQWb80darcRA//tfG0guMeQCeRUXroZNnHjGNb1qzvTRZmcIIhdxaD+DbK/5dWEx6aoMfoi6wjVp/CXwdAg==",
-							"dev": true,
-							"requires": {
-								"@wdio/logger": "5.16.10",
-								"deepmerge": "^4.0.0",
-								"glob": "^7.1.2"
-							}
-						},
-						"@wdio/logger": {
-							"version": "5.16.10",
-							"resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-5.16.10.tgz",
-							"integrity": "sha512-hRKhxgd9uB48Dtj2xe2ckxU4KwI/RO8IwguySuaI2SLFj6EDbdonwzpVkq111/fjBuq7R1NauAaNcm3AMEbIFA==",
-							"dev": true,
-							"requires": {
-								"chalk": "^3.0.0",
-								"loglevel": "^1.6.0",
-								"loglevel-plugin-prefix": "^0.8.4",
-								"strip-ansi": "^6.0.0"
-							}
-						},
-						"@wdio/protocols": {
-							"version": "5.22.1",
-							"resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-5.22.1.tgz",
-							"integrity": "sha512-GdoWb/HTrb09Qb0S/7sLp1NU94LAhTsF1NnFj5sEFSUpecrl0S07pnhVg54pUImectN/woaqSl7uJGjlSGZcdQ==",
-							"dev": true
-						},
-						"@wdio/repl": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-5.23.0.tgz",
-							"integrity": "sha512-cKG9m0XuqcQenQmoup0yJX1fkDQEdY06QXuwt636ZQf6XgDoeoAdNOgnRnNruQ0+JsC2eqHFoSNto1q8wcLH/g==",
-							"dev": true,
-							"requires": {
-								"@wdio/utils": "5.23.0"
-							}
-						},
-						"@wdio/utils": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-5.23.0.tgz",
-							"integrity": "sha512-dWPEkDiaNUqJXPO6L2di2apI7Rle7Er4euh67Wlb5+3MrPNjCKhiF8gHcpQeL8oe6A1MH/f89kpSEEXe4BMkAw==",
-							"dev": true,
-							"requires": {
-								"@wdio/logger": "5.16.10",
-								"deepmerge": "^4.0.0"
-							}
-						},
-						"ansi-regex": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-							"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-							"dev": true
-						},
-						"appium-ios-device": {
-							"version": "0.10.5",
-							"resolved": "https://registry.npmjs.org/appium-ios-device/-/appium-ios-device-0.10.5.tgz",
-							"integrity": "sha512-O0H+iyOVPG9NbLEPLi+fR/yGZEqTa0fESzNWgDfa8JizkgvDbbItzv5ZJbiYPSZ/+hhNLfdkHF0KAVIaFYJMJg==",
-							"dev": true,
-							"requires": {
-								"@babel/runtime": "^7.0.0",
-								"appium-support": "^2.30.0",
-								"bluebird": "^3.1.1",
-								"semver": "^6.1.2",
-								"source-map-support": "^0.5.5"
-							}
-						},
-						"appium-remote-debugger": {
-							"version": "5.7.0",
-							"resolved": "https://registry.npmjs.org/appium-remote-debugger/-/appium-remote-debugger-5.7.0.tgz",
-							"integrity": "sha512-dAudf+YgQbCktUjHgrFejEmOZaARdw7CAbGQ85MQJHAjjYaoCuO1rD7ro7hRmj/WsUMh1TdFGL+94yOEsoRujw==",
-							"dev": true,
-							"requires": {
-								"@babel/runtime": "^7.0.0",
-								"appium-base-driver": "^4.0.0",
-								"appium-ios-device": "^0.10.0",
-								"appium-support": "^2.28.0",
-								"asyncbox": "^2.5.2",
-								"bluebird": "^3.4.7",
-								"lodash": "^4.17.11",
-								"source-map-support": "^0.5.5"
-							},
-							"dependencies": {
-								"appium-base-driver": {
-									"version": "4.5.1",
-									"resolved": "https://registry.npmjs.org/appium-base-driver/-/appium-base-driver-4.5.1.tgz",
-									"integrity": "sha512-g7sI5mzmGdZhIFg3+A5f9ewtihYKS0b33wZWbN6R/PYYTEmXbNhFPGfVqzoAzFANuLjlTlvEEsqGcUtjrMO2Bw==",
-									"dev": true,
-									"requires": {
-										"@babel/runtime": "^7.0.0",
-										"appium-support": "^2.33.1",
-										"async-lock": "^1.0.0",
-										"asyncbox": "^2.3.1",
-										"bluebird": "^3.5.3",
-										"body-parser": "^1.18.2",
-										"colors": "^1.1.2",
-										"es6-error": "^4.1.1",
-										"express": "^4.16.2",
-										"http-status-codes": "^1.3.0",
-										"lodash": "^4.0.0",
-										"lru-cache": "^5.0.0",
-										"method-override": "^3.0.0",
-										"morgan": "^1.9.0",
-										"request": "^2.83.0",
-										"request-promise": "^4.2.2",
-										"sanitize-filename": "^1.6.1",
-										"serve-favicon": "^2.4.5",
-										"source-map-support": "^0.5.5",
-										"uuid-js": "^0.7.5",
-										"validate.js": "^0.13.0",
-										"webdriverio": "^5.10.9",
-										"ws": "^7.0.0"
-									}
-								}
-							}
-						},
-						"archiver": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/archiver/-/archiver-3.1.1.tgz",
-							"integrity": "sha512-5Hxxcig7gw5Jod/8Gq0OneVgLYET+oNHcxgWItq4TbhOzRLKNAFUb9edAftiMKXvXfCB0vbGrJdZDNq0dWMsxg==",
-							"dev": true,
-							"requires": {
-								"archiver-utils": "^2.1.0",
-								"async": "^2.6.3",
-								"buffer-crc32": "^0.2.1",
-								"glob": "^7.1.4",
-								"readable-stream": "^3.4.0",
-								"tar-stream": "^2.1.0",
-								"zip-stream": "^2.1.2"
-							}
-						},
-						"async": {
-							"version": "2.6.3",
-							"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-							"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-							"dev": true,
-							"requires": {
-								"lodash": "^4.17.14"
-							}
-						},
-						"chalk": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-							"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-							"dev": true,
-							"requires": {
-								"ansi-styles": "^4.1.0",
-								"supports-color": "^7.1.0"
-							}
-						},
-						"compress-commons": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-2.1.1.tgz",
-							"integrity": "sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==",
-							"dev": true,
-							"requires": {
-								"buffer-crc32": "^0.2.13",
-								"crc32-stream": "^3.0.1",
-								"normalize-path": "^3.0.0",
-								"readable-stream": "^2.3.6"
-							},
-							"dependencies": {
-								"readable-stream": {
-									"version": "2.3.7",
-									"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-									"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-									"dev": true,
-									"requires": {
-										"core-util-is": "~1.0.0",
-										"inherits": "~2.0.3",
-										"isarray": "~1.0.0",
-										"process-nextick-args": "~2.0.0",
-										"safe-buffer": "~5.1.1",
-										"string_decoder": "~1.1.1",
-										"util-deprecate": "~1.0.1"
-									}
-								}
-							}
-						},
-						"crc32-stream": {
-							"version": "3.0.1",
-							"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-3.0.1.tgz",
-							"integrity": "sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==",
-							"dev": true,
-							"requires": {
-								"crc": "^3.4.4",
-								"readable-stream": "^3.4.0"
-							}
-						},
-						"http-status-codes": {
-							"version": "1.4.0",
-							"resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-1.4.0.tgz",
-							"integrity": "sha512-JrT3ua+WgH8zBD3HEJYbeEgnuQaAnUeRRko/YojPAJjGmIfGD3KPU/asLdsLwKjfxOmQe5nXMQ0pt/7MyapVbQ==",
-							"dev": true
-						},
-						"lru-cache": {
-							"version": "5.1.1",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-							"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-							"dev": true,
-							"requires": {
-								"yallist": "^3.0.2"
-							}
-						},
-						"rgb2hex": {
-							"version": "0.1.10",
-							"resolved": "https://registry.npmjs.org/rgb2hex/-/rgb2hex-0.1.10.tgz",
-							"integrity": "sha512-vKz+kzolWbL3rke/xeTE2+6vHmZnNxGyDnaVW4OckntAIcc7DcZzWkQSfxMDwqHS8vhgySnIFyBUH7lIk6PxvQ==",
-							"dev": true
-						},
-						"semver": {
-							"version": "6.3.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-							"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-							"dev": true
-						},
-						"serialize-error": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-5.0.0.tgz",
-							"integrity": "sha512-/VtpuyzYf82mHYTtI4QKtwHa79vAdU5OQpNPAmE/0UDdlGT0ZxHwC+J6gXkw29wwoVI8fMPsfcVHOwXtUQYYQA==",
-							"dev": true,
-							"requires": {
-								"type-fest": "^0.8.0"
-							}
-						},
-						"strip-ansi": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-							"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^5.0.0"
-							}
-						},
-						"type-fest": {
-							"version": "0.8.1",
-							"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-							"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-							"dev": true
-						},
-						"webdriver": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/webdriver/-/webdriver-5.23.0.tgz",
-							"integrity": "sha512-r7IrbZ2SuTIRyWV8mv4a4hZoFcT9Qt4MznOkdRWPE1sPpZ8lyLZsIEjKCEbHelOzPwURqk+biwGrm4z2OZRAiw==",
-							"dev": true,
-							"requires": {
-								"@types/request": "^2.48.4",
-								"@wdio/config": "5.22.4",
-								"@wdio/logger": "5.16.10",
-								"@wdio/protocols": "5.22.1",
-								"@wdio/utils": "5.23.0",
-								"lodash.merge": "^4.6.1",
-								"request": "^2.83.0"
-							}
-						},
-						"webdriverio": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-5.23.0.tgz",
-							"integrity": "sha512-hxt6Nuu2bBrTsVk7GfoFRTh63l4fRVXlK9U30RtPbHoWO5tcFdyUz2UTgeHEZ54ea1DQEVPfsgFiLnJULkWp1Q==",
-							"dev": true,
-							"requires": {
-								"@wdio/config": "5.22.4",
-								"@wdio/logger": "5.16.10",
-								"@wdio/repl": "5.23.0",
-								"@wdio/utils": "5.23.0",
-								"archiver": "^3.0.0",
-								"css-value": "^0.0.1",
-								"grapheme-splitter": "^1.0.2",
-								"lodash.clonedeep": "^4.5.0",
-								"lodash.isobject": "^3.0.2",
-								"lodash.isplainobject": "^4.0.6",
-								"lodash.zip": "^4.2.0",
-								"resq": "^1.6.0",
-								"rgb2hex": "^0.1.0",
-								"serialize-error": "^5.0.0",
-								"webdriver": "5.23.0"
-							}
-						},
-						"yallist": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-							"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-							"dev": true
-						},
-						"zip-stream": {
-							"version": "2.1.3",
-							"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
-							"integrity": "sha512-EkXc2JGcKhO5N5aZ7TmuNo45budRaFGHOmz24wtJR7znbNqDPmdZtUauKX6et8KAVseAMBOyWJqEpXcHTBsh7Q==",
-							"dev": true,
-							"requires": {
-								"archiver-utils": "^2.1.0",
-								"compress-commons": "^2.1.1",
-								"readable-stream": "^3.4.0"
-							}
-						}
-					}
-				},
-				"appium-ios-simulator": {
-					"version": "3.29.0",
-					"resolved": "https://registry.npmjs.org/appium-ios-simulator/-/appium-ios-simulator-3.29.0.tgz",
-					"integrity": "sha512-7Y6KJJI3K4V35xbJeEwyedPg0DACYmv7cyyyoMbyz7PcLmoaKcufziNYwhlIiiKJIlPc+U/MJfeWUBSQ6W5/Vg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"@xmldom/xmldom": "^0.x",
-						"appium-support": "^2.44.0",
-						"appium-xcode": "^3.1.0",
-						"async-lock": "^1.0.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.2.1",
-						"node-simctl": "^6.6.0",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.5.3",
-						"teen_process": "^1.3.0"
-					},
-					"dependencies": {
-						"ansi-regex": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-							"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-							"dev": true
-						},
-						"are-we-there-yet": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-							"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-							"dev": true,
-							"requires": {
-								"delegates": "^1.0.0",
-								"readable-stream": "^3.6.0"
-							}
-						},
-						"gauge": {
-							"version": "3.0.2",
-							"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-							"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-							"dev": true,
-							"requires": {
-								"aproba": "^1.0.3 || ^2.0.0",
-								"color-support": "^1.1.2",
-								"console-control-strings": "^1.0.0",
-								"has-unicode": "^2.0.1",
-								"object-assign": "^4.1.1",
-								"signal-exit": "^3.0.0",
-								"string-width": "^4.2.3",
-								"strip-ansi": "^6.0.1",
-								"wide-align": "^1.1.2"
-							}
-						},
-						"is-fullwidth-code-point": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-							"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-							"dev": true
-						},
-						"node-simctl": {
-							"version": "6.6.0",
-							"resolved": "https://registry.npmjs.org/node-simctl/-/node-simctl-6.6.0.tgz",
-							"integrity": "sha512-157a3XqQFatcPT8BijH3IQml/GW8qByVjhe04reG86SawyJGfosM3s+qugd1kaar3nsKo+ad6KSS4GB7e9fxig==",
-							"dev": true,
-							"requires": {
-								"@babel/runtime": "^7.0.0",
-								"asyncbox": "^2.3.1",
-								"bluebird": "^3.5.1",
-								"lodash": "^4.2.1",
-								"npmlog": "^5.0.0",
-								"rimraf": "^3.0.0",
-								"semver": "^7.0.0",
-								"source-map-support": "^0.5.5",
-								"teen_process": "^1.5.1",
-								"uuid": "^8.0.0",
-								"which": "^2.0.0"
-							}
-						},
-						"npmlog": {
-							"version": "5.0.1",
-							"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-							"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-							"dev": true,
-							"requires": {
-								"are-we-there-yet": "^2.0.0",
-								"console-control-strings": "^1.1.0",
-								"gauge": "^3.0.0",
-								"set-blocking": "^2.0.0"
-							}
-						},
-						"string-width": {
-							"version": "4.2.3",
-							"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-							"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-							"dev": true,
-							"requires": {
-								"emoji-regex": "^8.0.0",
-								"is-fullwidth-code-point": "^3.0.0",
-								"strip-ansi": "^6.0.1"
-							}
-						},
-						"strip-ansi": {
-							"version": "6.0.1",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-							"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^5.0.1"
-							}
-						}
-					}
-				},
-				"appium-mac-driver": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/appium-mac-driver/-/appium-mac-driver-1.10.2.tgz",
-					"integrity": "sha512-gsCcFvh7yWvCWpW1Zrmb8jMXLdJ6T1F5oJBkX6uh+qW354nKD/45Pm0skuWNSObXIc4VN9xCBc7CLsOBVMoX7Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.2.3",
-						"appium-support": "^2.36.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.15.0"
-					}
-				},
-				"appium-mac2-driver": {
-					"version": "0.14.1",
-					"resolved": "https://registry.npmjs.org/appium-mac2-driver/-/appium-mac2-driver-0.14.1.tgz",
-					"integrity": "sha512-gq7A0Q2w7cUF3ZTC+jWSSGEjRhF2ifFr/3IcOMxLwXY6LmgD7eavPdVYZ+DYw8a7dRkUZdnSWuWcyfSCCxplQQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.1.0",
-						"appium-support": "^2.46.0",
-						"asyncbox": "^2.0.2",
-						"axios": "^0.x",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"portscanner": "2.2.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.15.0"
-					}
-				},
-				"appium-remote-debugger": {
-					"version": "8.13.2",
-					"resolved": "https://registry.npmjs.org/appium-remote-debugger/-/appium-remote-debugger-8.13.2.tgz",
-					"integrity": "sha512-ke418dyTWUYt9tsMnrhq0DpDfsVUofmPR0lkq3OWY3Jov46Myype2Hl8PwjJFMBn9wFcxNv1sghcLhoWYenSzA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-ios-device": "^1.7.0",
-						"appium-support": "^2.41.0",
-						"async-lock": "^1.2.2",
-						"asyncbox": "^2.6.0",
-						"bluebird": "^3.4.7",
-						"lodash": "^4.17.11",
-						"source-map-support": "^0.5.5"
-					}
-				},
-				"appium-safari-driver": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/appium-safari-driver/-/appium-safari-driver-2.2.1.tgz",
-					"integrity": "sha512-aOE4TWs6945e4uYzo45JN6idQn8m5E7Pl2y3M5wCB5qjIocTqY43Oq9zPgORFZEmaOON7n0Y4d4mCLsptNrwxA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.1.0",
-						"appium-support": "^2.46.0",
-						"asyncbox": "^2.0.2",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"node-simctl": "^6.4.0",
-						"portscanner": "2.2.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.15.0"
-					}
-				},
-				"appium-sdb": {
-					"version": "1.0.1-beta.1",
-					"resolved": "https://registry.npmjs.org/appium-sdb/-/appium-sdb-1.0.1-beta.1.tgz",
-					"integrity": "sha512-jciaEYrtZR7+NeB/KXrVLfQfvCQRdMpI4ZvrJWqyDOcUkzw5emH6nTGPTbkvnG9cf4opWM/e4wsgmHYnjgjByQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-support": "^2.4.0",
-						"asyncbox": "^2.3.1",
-						"lodash": "^4.17.11",
-						"source-map-support": "^0.5.9",
-						"teen_process": "^1.3.1"
-					}
-				},
-				"appium-support": {
-					"version": "2.54.1",
-					"resolved": "https://registry.npmjs.org/appium-support/-/appium-support-2.54.1.tgz",
-					"integrity": "sha512-Nhbduhtj9CwDAhOH77Ux5nyXpccIw9kz2WW0eLwIn2BoEEIcRjEcAdIvXQ2qTqURhVAHd4VyATllf1oAVYFbkQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"archiver": "^5.0.0",
-						"axios": "^0.x",
-						"base64-stream": "^1.0.0",
-						"bluebird": "^3.5.1",
-						"bplist-creator": "^0",
-						"bplist-parser": "^0.x",
-						"form-data": "^4.0.0",
-						"get-stream": "^6.0.0",
-						"glob": "^7.1.2",
-						"jimp": "^0.x",
-						"jsftp": "^2.1.2",
-						"klaw": "^3.0.0",
-						"lockfile": "^1.0.4",
-						"lodash": "^4.2.1",
-						"mkdirp": "^1.0.0",
-						"moment": "^2.24.0",
-						"mv": "^2.1.1",
-						"ncp": "^2.0.0",
-						"npmlog": "^5.0.0",
-						"plist": "^3.0.1",
-						"pluralize": "^8.0.0",
-						"pngjs": "^6.0.0",
-						"rimraf": "^3.0.0",
-						"sanitize-filename": "^1.6.1",
-						"semver": "^7.0.0",
-						"shell-quote": "^1.7.2",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.5.1",
-						"uuid": "^8.0.0",
-						"which": "^2.0.0",
-						"yauzl": "^2.7.0"
-					},
-					"dependencies": {
-						"gauge": {
-							"version": "3.0.1",
-							"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.1.tgz",
-							"integrity": "sha512-6STz6KdQgxO4S/ko+AbjlFGGdGcknluoqU+79GOFCDqqyYj5OanQf9AjxwN0jCidtT+ziPMmPSt9E4hfQ0CwIQ==",
-							"dev": true,
-							"requires": {
-								"aproba": "^1.0.3 || ^2.0.0",
-								"color-support": "^1.1.2",
-								"console-control-strings": "^1.0.0",
-								"has-unicode": "^2.0.1",
-								"object-assign": "^4.1.1",
-								"signal-exit": "^3.0.0",
-								"string-width": "^1.0.1 || ^2.0.0",
-								"strip-ansi": "^3.0.1 || ^4.0.0",
-								"wide-align": "^1.1.2"
-							}
-						},
-						"npmlog": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.0.tgz",
-							"integrity": "sha512-ftpIiLjerL2tUg3dCqN8pOSoB90gqZlzv/gaZoxHaKjeLClrfJIEQ1Pdxi6qSzflz916Bljdy8dTWQ4J7hAFSQ==",
-							"dev": true,
-							"requires": {
-								"are-we-there-yet": "^1.1.5",
-								"console-control-strings": "^1.1.0",
-								"gauge": "^3.0.0",
-								"set-blocking": "^2.0.0"
-							}
-						}
-					}
-				},
-				"appium-tizen-driver": {
-					"version": "1.1.1-beta.5",
-					"resolved": "https://registry.npmjs.org/appium-tizen-driver/-/appium-tizen-driver-1.1.1-beta.5.tgz",
-					"integrity": "sha512-LKnGb84Fzcer8Bw772oR/WdKy1Eo2ILm8TPiU7ienFVdp0eDwmpFnfXl7vCzTnusohT4SDPnOOquMhkh4UMOfQ==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^4.0.0",
-						"appium-sdb": "^1.0.1-beta.1",
-						"appium-support": "^2.8.0",
-						"asyncbox": "^2.0.4",
-						"bluebird": "^3.4.7",
-						"fancy-log": "^1.3.2",
-						"jimp": "^0.5.3",
-						"lodash": "^4.17.9",
-						"source-map-support": "^0.5.9",
-						"teen_process": "^1.9.0",
-						"yargs": "^12.0.2"
-					},
-					"dependencies": {
-						"@jimp/bmp": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.5.4.tgz",
-							"integrity": "sha512-P/ezH1FuoM3FwS0Dm2ZGkph4x5/rPBzFLEZor7KQkmGUnYEIEG4o0BUcAWFmJOp2HgzbT6O2SfrpJNBOcVACzQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"bmp-js": "^0.1.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/core": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.5.4.tgz",
-							"integrity": "sha512-n3uvHy2ndUKItmbhnRO8xmU8J6KR+v6CQxO9sbeUDpSc3VXc1PkqrA8ZsCVFCjnDFcGBXL+MJeCTyQzq5W9Crw==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"any-base": "^1.1.0",
-								"buffer": "^5.2.0",
-								"core-js": "^2.5.7",
-								"exif-parser": "^0.1.12",
-								"file-type": "^9.0.0",
-								"load-bmfont": "^1.3.1",
-								"mkdirp": "0.5.1",
-								"phin": "^2.9.1",
-								"pixelmatch": "^4.0.2",
-								"tinycolor2": "^1.4.1"
-							}
-						},
-						"@jimp/custom": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.5.4.tgz",
-							"integrity": "sha512-tLfyJoyouDl2J3RPFGfDzTtE+4S8ljqJUmLzy/cmx1n7+xS5TpLPdPskp7UaeAfNTqdF4CNAm94KYoxTZdj2mg==",
-							"dev": true,
-							"requires": {
-								"@jimp/core": "^0.5.4",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/gif": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.5.0.tgz",
-							"integrity": "sha512-HVB4c7b8r/yCpjhCjVNPRFLuujTav5UPmcQcFJjU6aIxmne6e29rAjRJEv3UMamHDGSu/96PzOsPZBO5U+ZGww==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7",
-								"omggif": "^1.0.9"
-							}
-						},
-						"@jimp/jpeg": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.5.4.tgz",
-							"integrity": "sha512-YaPWm+YSGCThNE/jLMckM3Qs6uaMxd/VsHOnEaqu5tGA4GFbfVaWHjKqkNGAFuiNV+HdgKlNcCOF3of+elvzqQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7",
-								"jpeg-js": "^0.3.4"
-							}
-						},
-						"@jimp/plugin-blit": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.5.4.tgz",
-							"integrity": "sha512-WqDYOugv76hF1wnKy7+xPGf9PUbcm9vPW28/jHWn1hjbb2GnusJ2fVEFad76J/1SPfhrQ2Uebf2QCWJuLmOqZg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-blur": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.5.0.tgz",
-							"integrity": "sha512-5k0PXCA1RTJdITL7yMAyZ5tGQjKLHqFvwdXj/PCoBo5PuMyr0x6qfxmQEySixGk/ZHdDxMi80vYxHdKHjNNgjg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-color": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.5.5.tgz",
-							"integrity": "sha512-hWeOqNCmLguGYLhSvBrpfCvlijsMEVaLZAOod62s1rzWnujozyKOzm2eZe+W3To6mHbp5RGJNVrIwHBWMab4ug==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7",
-								"tinycolor2": "^1.4.1"
-							}
-						},
-						"@jimp/plugin-contain": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.5.4.tgz",
-							"integrity": "sha512-8YJh4FI3S69unri0nJsWeqVLeVGA77N2R0Ws16iSuCCD/5UnWd9FeWRrSbKuidBG6TdMBaG2KUqSYZeHeH9GOQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-cover": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.5.4.tgz",
-							"integrity": "sha512-2Rur7b44WiDDgizUI2M2uYWc1RmfhU5KjKS1xXruobjQ0tXkf5xlrPXSushq0hB6Ne0Ss6wv0+/6eQ8WeGHU2w==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-crop": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.5.4.tgz",
-							"integrity": "sha512-6t0rqn4VazquGk48tO6hFBrQ+nkvC+A1RnR6UM/m8ZtG2/yjpwF0MXcpgJI1Fb+a4Ug7BY1fu2GPcZOhnAVK/g==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-displace": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.5.0.tgz",
-							"integrity": "sha512-Bec7SQvnmKia4hOXEDjeNVx7vo/1bWqjuV6NO8xbNQcAO3gaCl91c9FjMDhsfAVb0Ou6imhbIuFPrLxorXsecQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-dither": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.5.0.tgz",
-							"integrity": "sha512-We2WJQsD/Lm8oqBFp/vUv9/5r2avyenL+wNNu/s2b1HqA5O4sPGrjHy9K6vIov0NroQGCQ3bNznLkTmjiHKBcg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-flip": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.5.0.tgz",
-							"integrity": "sha512-D/ehBQxLMNR7oNd80KXo4tnSET5zEm5mR70khYOTtTlfti/DlLp3qOdjPOzfLyAdqO7Ly4qCaXrIsnia+pfPrA==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-gaussian": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.5.0.tgz",
-							"integrity": "sha512-Ln4kgxblv0/YzLBDb/J8DYPLhDzKH87Y8yHh5UKv3H+LPKnLaEG3L4iKTE9ivvdocnjmrtTFMYcWv2ERSPeHcg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-invert": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.5.0.tgz",
-							"integrity": "sha512-/vyKeIi3T7puf+8ruWovTjzDC585EnTwJ+lGOOUYiNPsdn4JDFe1B3xd+Ayv9aCQbXDIlPElZaM9vd/+wqDiIQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-mask": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.5.4.tgz",
-							"integrity": "sha512-mUJ04pCrUWaJGXPjgoVbzhIQB8cVobj2ZEFlGO3BEAjyylYMrdJlNlsER8dd7UuJ2L/a4ocWtFDdsnuicnBghQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-normalize": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.5.4.tgz",
-							"integrity": "sha512-Q5W0oEz9wxsjuhvHAJynI/OqXZcmqEAuRONQId7Aw5ulCXSOg9C4y2a67EO7aZAt55T+zMVxI9UpVUpzVvO6hw==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-print": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.5.4.tgz",
-							"integrity": "sha512-DOZr5TY9WyMWFBD37oz7KpTEBVioFIHQF/gH5b3O5jjFyj4JPMkw7k3kVBve9lIrzIYrvLqe0wH59vyAwpeEFg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7",
-								"load-bmfont": "^1.4.0"
-							}
-						},
-						"@jimp/plugin-resize": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.5.4.tgz",
-							"integrity": "sha512-lXNprNAT0QY1D1vG/1x6urUTlWuZe2dfL29P81ApW2Yfcio471+oqo45moX5FLS0q24xU600g7cHGf2/TzqSfA==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-rotate": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.5.4.tgz",
-							"integrity": "sha512-SIdUpMc8clObMchy8TnjgHgcXEQM992z5KavgiuOnCuBlsmSHtE3MrXTOyMW0Dn3gqapV9Y5vygrLm/BVtCCsg==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugin-scale": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.5.0.tgz",
-							"integrity": "sha512-5InIOr3cNtrS5aQ/uaosNf28qLLc0InpNGKFmGFTv8oqZqLch6PtDTjDBZ1GGWsPdA/ljy4Qyy7mJO1QBmgQeQ==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7"
-							}
-						},
-						"@jimp/plugins": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.5.5.tgz",
-							"integrity": "sha512-9oF6LbSM/K7YkFCcxaPaD8NUkL/ZY8vT8NIGfQ/NpX+tKQtcsLHcRavHpUC+M1xXShv/QGx9OdBV/jgiu82QYg==",
-							"dev": true,
-							"requires": {
-								"@jimp/plugin-blit": "^0.5.4",
-								"@jimp/plugin-blur": "^0.5.0",
-								"@jimp/plugin-color": "^0.5.5",
-								"@jimp/plugin-contain": "^0.5.4",
-								"@jimp/plugin-cover": "^0.5.4",
-								"@jimp/plugin-crop": "^0.5.4",
-								"@jimp/plugin-displace": "^0.5.0",
-								"@jimp/plugin-dither": "^0.5.0",
-								"@jimp/plugin-flip": "^0.5.0",
-								"@jimp/plugin-gaussian": "^0.5.0",
-								"@jimp/plugin-invert": "^0.5.0",
-								"@jimp/plugin-mask": "^0.5.4",
-								"@jimp/plugin-normalize": "^0.5.4",
-								"@jimp/plugin-print": "^0.5.4",
-								"@jimp/plugin-resize": "^0.5.4",
-								"@jimp/plugin-rotate": "^0.5.4",
-								"@jimp/plugin-scale": "^0.5.0",
-								"core-js": "^2.5.7",
-								"timm": "^1.6.1"
-							}
-						},
-						"@jimp/png": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.5.4.tgz",
-							"integrity": "sha512-J2NU7368zihF1HUZdmpXsL/Hhyf+I3ubmK+6Uz3Uoyvtk1VS7dO3L0io6fJQutfWmPZ4bvu6Ry022oHjbi6QCA==",
-							"dev": true,
-							"requires": {
-								"@jimp/utils": "^0.5.0",
-								"core-js": "^2.5.7",
-								"pngjs": "^3.3.3"
-							}
-						},
-						"@jimp/tiff": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.5.4.tgz",
-							"integrity": "sha512-hr7Zq3eWjAZ+itSwuAObIWMRNv7oHVM3xuEDC2ouP7HfE7woBtyhCyfA7u12KlgtM57gKWeogXqTlewRGVzx6g==",
-							"dev": true,
-							"requires": {
-								"core-js": "^2.5.7",
-								"utif": "^2.0.1"
-							}
-						},
-						"@jimp/types": {
-							"version": "0.5.4",
-							"resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.5.4.tgz",
-							"integrity": "sha512-nbZXM6TsdpnYHIBd8ZuoxGpvmxc2SqiggY30/bhOP/VJQoDBzm2v/20Ywz5M0snpIK2SdYG52eZPNjfjqUP39w==",
-							"dev": true,
-							"requires": {
-								"@jimp/bmp": "^0.5.4",
-								"@jimp/gif": "^0.5.0",
-								"@jimp/jpeg": "^0.5.4",
-								"@jimp/png": "^0.5.4",
-								"@jimp/tiff": "^0.5.4",
-								"core-js": "^2.5.7",
-								"timm": "^1.6.1"
-							}
-						},
-						"@jimp/utils": {
-							"version": "0.5.0",
-							"resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.5.0.tgz",
-							"integrity": "sha512-7H9RFVU+Li2XmEko0GGyzy7m7JjSc7qa+m8l3fUzYg2GtwASApjKF/LSG2AUQCUmDKFLdfIEVjxvKvZUJFEmpw==",
-							"dev": true,
-							"requires": {
-								"core-js": "^2.5.7"
-							}
-						},
-						"@wdio/config": {
-							"version": "5.22.4",
-							"resolved": "https://registry.npmjs.org/@wdio/config/-/config-5.22.4.tgz",
-							"integrity": "sha512-i5dJQWb80darcRA//tfG0guMeQCeRUXroZNnHjGNb1qzvTRZmcIIhdxaD+DbK/5dWEx6aoMfoi6wjVp/CXwdAg==",
-							"dev": true,
-							"requires": {
-								"@wdio/logger": "5.16.10",
-								"deepmerge": "^4.0.0",
-								"glob": "^7.1.2"
-							}
-						},
-						"@wdio/logger": {
-							"version": "5.16.10",
-							"resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-5.16.10.tgz",
-							"integrity": "sha512-hRKhxgd9uB48Dtj2xe2ckxU4KwI/RO8IwguySuaI2SLFj6EDbdonwzpVkq111/fjBuq7R1NauAaNcm3AMEbIFA==",
-							"dev": true,
-							"requires": {
-								"chalk": "^3.0.0",
-								"loglevel": "^1.6.0",
-								"loglevel-plugin-prefix": "^0.8.4",
-								"strip-ansi": "^6.0.0"
-							}
-						},
-						"@wdio/protocols": {
-							"version": "5.22.1",
-							"resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-5.22.1.tgz",
-							"integrity": "sha512-GdoWb/HTrb09Qb0S/7sLp1NU94LAhTsF1NnFj5sEFSUpecrl0S07pnhVg54pUImectN/woaqSl7uJGjlSGZcdQ==",
-							"dev": true
-						},
-						"@wdio/repl": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-5.23.0.tgz",
-							"integrity": "sha512-cKG9m0XuqcQenQmoup0yJX1fkDQEdY06QXuwt636ZQf6XgDoeoAdNOgnRnNruQ0+JsC2eqHFoSNto1q8wcLH/g==",
-							"dev": true,
-							"requires": {
-								"@wdio/utils": "5.23.0"
-							}
-						},
-						"@wdio/utils": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-5.23.0.tgz",
-							"integrity": "sha512-dWPEkDiaNUqJXPO6L2di2apI7Rle7Er4euh67Wlb5+3MrPNjCKhiF8gHcpQeL8oe6A1MH/f89kpSEEXe4BMkAw==",
-							"dev": true,
-							"requires": {
-								"@wdio/logger": "5.16.10",
-								"deepmerge": "^4.0.0"
-							}
-						},
-						"ansi-regex": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-							"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-							"dev": true
-						},
-						"appium-base-driver": {
-							"version": "4.5.1",
-							"resolved": "https://registry.npmjs.org/appium-base-driver/-/appium-base-driver-4.5.1.tgz",
-							"integrity": "sha512-g7sI5mzmGdZhIFg3+A5f9ewtihYKS0b33wZWbN6R/PYYTEmXbNhFPGfVqzoAzFANuLjlTlvEEsqGcUtjrMO2Bw==",
-							"dev": true,
-							"requires": {
-								"@babel/runtime": "^7.0.0",
-								"appium-support": "^2.33.1",
-								"async-lock": "^1.0.0",
-								"asyncbox": "^2.3.1",
-								"bluebird": "^3.5.3",
-								"body-parser": "^1.18.2",
-								"colors": "^1.1.2",
-								"es6-error": "^4.1.1",
-								"express": "^4.16.2",
-								"http-status-codes": "^1.3.0",
-								"lodash": "^4.0.0",
-								"lru-cache": "^5.0.0",
-								"method-override": "^3.0.0",
-								"morgan": "^1.9.0",
-								"request": "^2.83.0",
-								"request-promise": "^4.2.2",
-								"sanitize-filename": "^1.6.1",
-								"serve-favicon": "^2.4.5",
-								"source-map-support": "^0.5.5",
-								"uuid-js": "^0.7.5",
-								"validate.js": "^0.13.0",
-								"webdriverio": "^5.10.9",
-								"ws": "^7.0.0"
-							}
-						},
-						"archiver": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/archiver/-/archiver-3.1.1.tgz",
-							"integrity": "sha512-5Hxxcig7gw5Jod/8Gq0OneVgLYET+oNHcxgWItq4TbhOzRLKNAFUb9edAftiMKXvXfCB0vbGrJdZDNq0dWMsxg==",
-							"dev": true,
-							"requires": {
-								"archiver-utils": "^2.1.0",
-								"async": "^2.6.3",
-								"buffer-crc32": "^0.2.1",
-								"glob": "^7.1.4",
-								"readable-stream": "^3.4.0",
-								"tar-stream": "^2.1.0",
-								"zip-stream": "^2.1.2"
-							}
-						},
-						"async": {
-							"version": "2.6.3",
-							"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-							"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-							"dev": true,
-							"requires": {
-								"lodash": "^4.17.14"
-							}
-						},
-						"chalk": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-							"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-							"dev": true,
-							"requires": {
-								"ansi-styles": "^4.1.0",
-								"supports-color": "^7.1.0"
-							}
-						},
-						"compress-commons": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-2.1.1.tgz",
-							"integrity": "sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==",
-							"dev": true,
-							"requires": {
-								"buffer-crc32": "^0.2.13",
-								"crc32-stream": "^3.0.1",
-								"normalize-path": "^3.0.0",
-								"readable-stream": "^2.3.6"
-							},
-							"dependencies": {
-								"readable-stream": {
-									"version": "2.3.7",
-									"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-									"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-									"dev": true,
-									"requires": {
-										"core-util-is": "~1.0.0",
-										"inherits": "~2.0.3",
-										"isarray": "~1.0.0",
-										"process-nextick-args": "~2.0.0",
-										"safe-buffer": "~5.1.1",
-										"string_decoder": "~1.1.1",
-										"util-deprecate": "~1.0.1"
-									}
-								}
-							}
-						},
-						"crc32-stream": {
-							"version": "3.0.1",
-							"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-3.0.1.tgz",
-							"integrity": "sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==",
-							"dev": true,
-							"requires": {
-								"crc": "^3.4.4",
-								"readable-stream": "^3.4.0"
-							}
-						},
-						"http-status-codes": {
-							"version": "1.4.0",
-							"resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-1.4.0.tgz",
-							"integrity": "sha512-JrT3ua+WgH8zBD3HEJYbeEgnuQaAnUeRRko/YojPAJjGmIfGD3KPU/asLdsLwKjfxOmQe5nXMQ0pt/7MyapVbQ==",
-							"dev": true
-						},
-						"jimp": {
-							"version": "0.5.6",
-							"resolved": "https://registry.npmjs.org/jimp/-/jimp-0.5.6.tgz",
-							"integrity": "sha512-H0nHTu6KgAgQzDxa38ew2dXbnRzKm1w5uEyhMIxqwCQVjwgarOjjkV/avbNLxfxRHAFaNp4rGIc/qm8P+uhX9A==",
-							"dev": true,
-							"requires": {
-								"@babel/polyfill": "^7.0.0",
-								"@jimp/custom": "^0.5.4",
-								"@jimp/plugins": "^0.5.5",
-								"@jimp/types": "^0.5.4",
-								"core-js": "^2.5.7"
-							}
-						},
-						"jpeg-js": {
-							"version": "0.3.7",
-							"resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.3.7.tgz",
-							"integrity": "sha512-9IXdWudL61npZjvLuVe/ktHiA41iE8qFyLB+4VDTblEsWBzeg8WQTlktdUK4CdncUqtUgUg0bbOmTE2bKBKaBQ==",
-							"dev": true
-						},
-						"lru-cache": {
-							"version": "5.1.1",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-							"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-							"dev": true,
-							"requires": {
-								"yallist": "^3.0.2"
-							}
-						},
-						"minimist": {
-							"version": "0.0.8",
-							"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-							"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-							"dev": true
-						},
-						"mkdirp": {
-							"version": "0.5.1",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-							"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-							"dev": true,
-							"requires": {
-								"minimist": "0.0.8"
-							}
-						},
-						"pngjs": {
-							"version": "3.4.0",
-							"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
-							"integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
-							"dev": true
-						},
-						"rgb2hex": {
-							"version": "0.1.10",
-							"resolved": "https://registry.npmjs.org/rgb2hex/-/rgb2hex-0.1.10.tgz",
-							"integrity": "sha512-vKz+kzolWbL3rke/xeTE2+6vHmZnNxGyDnaVW4OckntAIcc7DcZzWkQSfxMDwqHS8vhgySnIFyBUH7lIk6PxvQ==",
-							"dev": true
-						},
-						"serialize-error": {
-							"version": "5.0.0",
-							"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-5.0.0.tgz",
-							"integrity": "sha512-/VtpuyzYf82mHYTtI4QKtwHa79vAdU5OQpNPAmE/0UDdlGT0ZxHwC+J6gXkw29wwoVI8fMPsfcVHOwXtUQYYQA==",
-							"dev": true,
-							"requires": {
-								"type-fest": "^0.8.0"
-							}
-						},
-						"strip-ansi": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-							"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^5.0.0"
-							}
-						},
-						"type-fest": {
-							"version": "0.8.1",
-							"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-							"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-							"dev": true
-						},
-						"webdriver": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/webdriver/-/webdriver-5.23.0.tgz",
-							"integrity": "sha512-r7IrbZ2SuTIRyWV8mv4a4hZoFcT9Qt4MznOkdRWPE1sPpZ8lyLZsIEjKCEbHelOzPwURqk+biwGrm4z2OZRAiw==",
-							"dev": true,
-							"requires": {
-								"@types/request": "^2.48.4",
-								"@wdio/config": "5.22.4",
-								"@wdio/logger": "5.16.10",
-								"@wdio/protocols": "5.22.1",
-								"@wdio/utils": "5.23.0",
-								"lodash.merge": "^4.6.1",
-								"request": "^2.83.0"
-							}
-						},
-						"webdriverio": {
-							"version": "5.23.0",
-							"resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-5.23.0.tgz",
-							"integrity": "sha512-hxt6Nuu2bBrTsVk7GfoFRTh63l4fRVXlK9U30RtPbHoWO5tcFdyUz2UTgeHEZ54ea1DQEVPfsgFiLnJULkWp1Q==",
-							"dev": true,
-							"requires": {
-								"@wdio/config": "5.22.4",
-								"@wdio/logger": "5.16.10",
-								"@wdio/repl": "5.23.0",
-								"@wdio/utils": "5.23.0",
-								"archiver": "^3.0.0",
-								"css-value": "^0.0.1",
-								"grapheme-splitter": "^1.0.2",
-								"lodash.clonedeep": "^4.5.0",
-								"lodash.isobject": "^3.0.2",
-								"lodash.isplainobject": "^4.0.6",
-								"lodash.zip": "^4.2.0",
-								"resq": "^1.6.0",
-								"rgb2hex": "^0.1.0",
-								"serialize-error": "^5.0.0",
-								"webdriver": "5.23.0"
-							}
-						},
-						"yallist": {
-							"version": "3.1.1",
-							"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-							"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-							"dev": true
-						},
-						"zip-stream": {
-							"version": "2.1.3",
-							"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
-							"integrity": "sha512-EkXc2JGcKhO5N5aZ7TmuNo45budRaFGHOmz24wtJR7znbNqDPmdZtUauKX6et8KAVseAMBOyWJqEpXcHTBsh7Q==",
-							"dev": true,
-							"requires": {
-								"archiver-utils": "^2.1.0",
-								"compress-commons": "^2.1.1",
-								"readable-stream": "^3.4.0"
-							}
-						}
-					}
-				},
-				"appium-uiautomator2-driver": {
-					"version": "1.70.1",
-					"resolved": "https://registry.npmjs.org/appium-uiautomator2-driver/-/appium-uiautomator2-driver-1.70.1.tgz",
-					"integrity": "sha512-KMCjO4QBcBy+vqWDx0mIhP90vr/1dMDqE0m6LR4MlHCREeJn2BhzRaepTLJCYvDDOtItI2gkgrjkCp9sbKuLzg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-adb": "^8.10.0",
-						"appium-android-driver": "^4.50.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-chromedriver": "^4.23.1",
-						"appium-support": "^2.49.0",
-						"appium-uiautomator2-server": "^4.26.0",
-						"asyncbox": "^2.3.1",
-						"axios": "^0.x",
-						"bluebird": "^3.5.1",
-						"css-selector-parser": "^1.4.1",
-						"lodash": "^4.17.4",
-						"portscanner": "2.2.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.3.1"
-					}
-				},
-				"appium-uiautomator2-server": {
-					"version": "4.27.0",
-					"resolved": "https://registry.npmjs.org/appium-uiautomator2-server/-/appium-uiautomator2-server-4.27.0.tgz",
-					"integrity": "sha512-R7cX/9UGUuUheFBnDMI6lQezQJKUfHdnZRKoXNtqxyAlzpgAhJNoG62LHEL3e5nygq1Qt2DQmbFB5xgNXUvomg==",
-					"dev": true
-				},
-				"appium-webdriveragent": {
-					"version": "3.17.0",
-					"resolved": "https://registry.npmjs.org/appium-webdriveragent/-/appium-webdriveragent-3.17.0.tgz",
-					"integrity": "sha512-gHtx1uPCQlJn4k2cnMyyOPf4dCaNy0eFt6Oc1bPXkxrYm0X04ZVLFUSIdqBL9n5YKv8Igg3/mkqt4TzWyZxrFw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-ios-simulator": "^3.14.0",
-						"appium-support": "^2.46.0",
-						"async-lock": "^1.0.0",
-						"asyncbox": "^2.5.3",
-						"axios": "^0.x",
-						"bluebird": "^3.5.5",
-						"lodash": "^4.17.11",
-						"node-simctl": "^6.0.2",
-						"source-map-support": "^0.5.12",
-						"teen_process": "^1.14.1"
-					}
-				},
-				"appium-windows-driver": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/appium-windows-driver/-/appium-windows-driver-1.19.1.tgz",
-					"integrity": "sha512-iZW51z88VQKPA851IshZaWyogfoI05QKqH9ltzuKHkHgdvWm/DLnAXmeQHfJi+nUaBy+D92PLiyHnAvJJTRB/Q==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-base-driver": "^7.0.0",
-						"appium-support": "^2.49.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.1",
-						"es6-error": "^4.1.1",
-						"lodash": "^4.6.1",
-						"portscanner": "2.2.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.7.0"
-					}
-				},
-				"appium-xcode": {
-					"version": "3.11.0",
-					"resolved": "https://registry.npmjs.org/appium-xcode/-/appium-xcode-3.11.0.tgz",
-					"integrity": "sha512-kT1du+HYBrd8X+cLfpp0mLCbqv7tgPRI9lCmrSeL2t9cIGdb+p9m4MOlfaKxrsqFurQlmMVUHmKDZLU4kvZWBg==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"appium-support": "^2.4.0",
-						"asyncbox": "^2.3.0",
-						"lodash": "^4.17.4",
-						"plist": "^3.0.1",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.3.0"
-					}
-				},
-				"appium-xcuitest-driver": {
-					"version": "3.59.0",
-					"resolved": "https://registry.npmjs.org/appium-xcuitest-driver/-/appium-xcuitest-driver-3.59.0.tgz",
-					"integrity": "sha512-SG3ylxzzbIDg8P4zx9S6vSBIcT4TGnvVcolENC/pYJBO/8g3ru4z8+lcHZNdVzNZ6fpORdTROcEk2Zfu8WEAnw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"@xmldom/xmldom": "^0.x",
-						"appium-base-driver": "^7.0.0",
-						"appium-idb": "^0.x",
-						"appium-ios-device": "^1.8.0",
-						"appium-ios-simulator": "^3.28.0",
-						"appium-remote-debugger": "^8.13.2",
-						"appium-support": "^2.47.1",
-						"appium-webdriveragent": "^3.16.0",
-						"appium-xcode": "^3.8.0",
-						"async-lock": "^1.0.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.1",
-						"css-selector-parser": "^1.4.1",
-						"js2xmlparser2": "^0.x",
-						"lodash": "^4.17.10",
-						"lru-cache": "^6.0.0",
-						"moment": "^2.24.0",
-						"moment-timezone": "^0.x",
-						"node-simctl": "^6.4.0",
-						"portscanner": "2.2.0",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.x",
-						"teen_process": "^1.14.0",
-						"ws": "^8.0.0"
-					},
-					"dependencies": {
-						"ws": {
-							"version": "8.3.0",
-							"resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
-							"integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
-							"dev": true
-						}
-					}
-				},
-				"appium-youiengine-driver": {
-					"version": "1.2.9",
-					"resolved": "https://registry.npmjs.org/appium-youiengine-driver/-/appium-youiengine-driver-1.2.9.tgz",
-					"integrity": "sha512-Xq3sttITAJi+fF42BepuyT82YwMWQCFpH21/fZuNwUv8Ry6jercFoNa0wz6SIXyXOMgmoHsf+uW7sinrcq/9tA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.11.2",
-						"appium-base-driver": "^7.2.3",
-						"appium-ios-simulator": "^3.23.0",
-						"appium-mac-driver": "^1.10.0",
-						"appium-support": "^2.49.0",
-						"appium-uiautomator2-driver": "^1.57.1",
-						"appium-xcuitest-driver": "^3.27.4",
-						"asyncbox": "^2.6.0",
-						"bluebird": "^3.7.2",
-						"lodash": "^4.17.20",
-						"node-simctl": "^6.3.2",
-						"selenium-webdriver": "^3.6.0",
-						"shelljs": "^0.8.4",
-						"source-map-support": "^0.5.19",
-						"teen_process": "^1.15.0"
-					}
-				},
-				"aproba": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-					"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-					"dev": true
-				},
-				"archiver": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.0.tgz",
-					"integrity": "sha512-iUw+oDwK0fgNpvveEsdQ0Ase6IIKztBJU2U0E9MzszMfmVVUyv1QJhS2ITW9ZCqx8dktAxVAjWWkKehuZE8OPg==",
-					"dev": true,
-					"requires": {
-						"archiver-utils": "^2.1.0",
-						"async": "^3.2.0",
-						"buffer-crc32": "^0.2.1",
-						"readable-stream": "^3.6.0",
-						"readdir-glob": "^1.0.0",
-						"tar-stream": "^2.2.0",
-						"zip-stream": "^4.1.0"
-					}
-				},
-				"archiver-utils": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-					"integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
-					"dev": true,
-					"requires": {
-						"glob": "^7.1.4",
-						"graceful-fs": "^4.2.0",
-						"lazystream": "^1.0.0",
-						"lodash.defaults": "^4.2.0",
-						"lodash.difference": "^4.5.0",
-						"lodash.flatten": "^4.4.0",
-						"lodash.isplainobject": "^4.0.6",
-						"lodash.union": "^4.6.0",
-						"normalize-path": "^3.0.0",
-						"readable-stream": "^2.0.0"
-					},
-					"dependencies": {
-						"readable-stream": {
-							"version": "2.3.7",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-							"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.3",
-								"isarray": "~1.0.0",
-								"process-nextick-args": "~2.0.0",
-								"safe-buffer": "~5.1.1",
-								"string_decoder": "~1.1.1",
-								"util-deprecate": "~1.0.1"
-							}
-						}
-					}
-				},
-				"are-we-there-yet": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-					"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-					"dev": true,
-					"requires": {
-						"delegates": "^1.0.0",
-						"readable-stream": "^2.0.6"
-					},
-					"dependencies": {
-						"readable-stream": {
-							"version": "2.3.7",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-							"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.3",
-								"isarray": "~1.0.0",
-								"process-nextick-args": "~2.0.0",
-								"safe-buffer": "~5.1.1",
-								"string_decoder": "~1.1.1",
-								"util-deprecate": "~1.0.1"
-							}
-						}
-					}
-				},
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"array-flatten": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-					"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-					"dev": true
-				},
-				"asn1": {
-					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-					"integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": "~2.1.0"
-					}
-				},
-				"assert-args": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/assert-args/-/assert-args-1.2.1.tgz",
-					"integrity": "sha1-QEEDoUUqMv53iYgR5U5ZCoqTc70=",
-					"dev": true,
-					"requires": {
-						"101": "^1.2.0",
-						"compound-subject": "0.0.1",
-						"debug": "^2.2.0",
-						"get-prototype-of": "0.0.0",
-						"is-capitalized": "^1.0.0",
-						"is-class": "0.0.4"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"assert-plus": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-					"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-					"dev": true
-				},
-				"async": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
-					"integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
-					"dev": true
-				},
-				"async-limiter": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-					"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-					"dev": true
-				},
-				"async-listener": {
-					"version": "0.6.10",
-					"resolved": "https://registry.npmjs.org/async-listener/-/async-listener-0.6.10.tgz",
-					"integrity": "sha512-gpuo6xOyF4D5DE5WvyqZdPA3NGhiT6Qf07l7DCB0wwDEsLvDIbCr6j9S5aj5Ch96dLace5tXVzWBZkxU/c5ohw==",
-					"dev": true,
-					"requires": {
-						"semver": "^5.3.0",
-						"shimmer": "^1.1.0"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						}
-					}
-				},
-				"async-lock": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.3.0.tgz",
-					"integrity": "sha512-8A7SkiisnEgME2zEedtDYPxUPzdv3x//E7n5IFktPAtMYSEAV7eNJF0rMwrVyUFj6d/8rgajLantbjcNRQYXIg==",
-					"dev": true
-				},
-				"asyncbox": {
-					"version": "2.9.2",
-					"resolved": "https://registry.npmjs.org/asyncbox/-/asyncbox-2.9.2.tgz",
-					"integrity": "sha512-VSon1vGccTPcseugq0hl1ImUReW2+Z0GrDpeNHrxuZIKIUf5+gaeXtEFqESFJzSlF3y1UHC8Pkc6AhX/mTiBLA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"bluebird": "^3.5.1",
-						"es6-mapify": "^1.1.0",
-						"lodash": "^4.17.4",
-						"source-map-support": "^0.5.5"
-					}
-				},
-				"asynckit": {
-					"version": "0.4.0",
-					"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-					"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-					"dev": true
-				},
-				"at-least-node": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-					"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-					"dev": true
-				},
-				"atob": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-					"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-					"dev": true
-				},
-				"aws-sign2": {
-					"version": "0.7.0",
-					"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-					"integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-					"dev": true
-				},
-				"aws4": {
-					"version": "1.11.0",
-					"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
-					"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
-					"dev": true
-				},
-				"axios": {
-					"version": "0.21.1",
-					"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-					"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-					"dev": true,
-					"requires": {
-						"follow-redirects": "^1.10.0"
-					}
-				},
-				"babel-runtime": {
-					"version": "6.26.0",
-					"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-					"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-					"dev": true,
-					"requires": {
-						"core-js": "^2.4.0",
-						"regenerator-runtime": "^0.11.0"
-					},
-					"dependencies": {
-						"regenerator-runtime": {
-							"version": "0.11.1",
-							"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-							"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-							"dev": true
-						}
-					}
-				},
-				"balanced-match": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-					"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-					"dev": true
-				},
-				"base64-js": {
-					"version": "1.5.1",
-					"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-					"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-					"dev": true
-				},
-				"base64-stream": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/base64-stream/-/base64-stream-1.0.0.tgz",
-					"integrity": "sha512-BQQZftaO48FcE1Kof9CmXMFaAdqkcNorgc8CxesZv9nMbbTF1EFyQe89UOuh//QMmdtfUDXyO8rgUalemL5ODA==",
-					"dev": true
-				},
-				"basic-auth": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
-					"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "5.1.2"
-					}
-				},
-				"bcrypt-pbkdf": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-					"integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-					"dev": true,
-					"requires": {
-						"tweetnacl": "^0.14.3"
-					}
-				},
-				"big-integer": {
-					"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
-				},
-				"bl": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-					"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-					"dev": true,
-					"requires": {
-						"buffer": "^5.5.0",
-						"inherits": "^2.0.4",
-						"readable-stream": "^3.4.0"
-					}
-				},
-				"bluebird": {
-					"version": "3.7.2",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-					"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-					"dev": true
-				},
-				"bmp-js": {
-					"version": "0.1.0",
-					"resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
-					"integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=",
-					"dev": true
-				},
-				"body-parser": {
-					"version": "1.19.0",
-					"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-					"integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-					"dev": true,
-					"requires": {
-						"bytes": "3.1.0",
-						"content-type": "~1.0.4",
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"http-errors": "1.7.2",
-						"iconv-lite": "0.4.24",
-						"on-finished": "~2.3.0",
-						"qs": "6.7.0",
-						"raw-body": "2.4.0",
-						"type-is": "~1.6.17"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"bplist-creator": {
-					"version": "0.1.0",
-					"resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
-					"integrity": "sha512-sXaHZicyEEmY86WyueLTQesbeoH/mquvarJaQNbjuOQO+7gbFcDEWqKmcWA4cOTLzFlfgvkiVxolk1k5bBIpmg==",
-					"dev": true,
-					"requires": {
-						"stream-buffers": "2.2.x"
-					}
-				},
-				"bplist-parser": {
-					"version": "0.3.0",
-					"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.0.tgz",
-					"integrity": "sha512-zgmaRvT6AN1JpPPV+S0a1/FAtoxSreYDccZGIqEMSvZl9DMe70mJ7MFzpxa1X+gHVdkToE2haRUHHMiW1OdejA==",
-					"dev": true,
-					"requires": {
-						"big-integer": "1.6.x"
-					}
-				},
-				"brace-expansion": {
-					"version": "1.1.11",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-					"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0",
-						"concat-map": "0.0.1"
-					}
-				},
-				"buffer": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-					"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-					"dev": true,
-					"requires": {
-						"base64-js": "^1.3.1",
-						"ieee754": "^1.1.13"
-					}
-				},
-				"buffer-crc32": {
-					"version": "0.2.13",
-					"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-					"integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-					"dev": true
-				},
-				"buffer-equal": {
-					"version": "0.0.1",
-					"resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
-					"integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=",
-					"dev": true
-				},
-				"buffer-from": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-					"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-					"dev": true
-				},
-				"bytes": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-					"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-					"dev": true
-				},
-				"cacheable-lookup": {
-					"version": "5.0.4",
-					"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
-					"integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
-					"dev": true
-				},
-				"cacheable-request": {
-					"version": "7.0.2",
-					"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz",
-					"integrity": "sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==",
-					"dev": true,
-					"requires": {
-						"clone-response": "^1.0.2",
-						"get-stream": "^5.1.0",
-						"http-cache-semantics": "^4.0.0",
-						"keyv": "^4.0.0",
-						"lowercase-keys": "^2.0.0",
-						"normalize-url": "^6.0.1",
-						"responselike": "^2.0.0"
-					},
-					"dependencies": {
-						"get-stream": {
-							"version": "5.2.0",
-							"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-							"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-							"dev": true,
-							"requires": {
-								"pump": "^3.0.0"
-							}
-						}
-					}
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"caseless": {
-					"version": "0.12.0",
-					"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-					"integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-					"dev": true
-				},
-				"chalk": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-					"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"charenc": {
-					"version": "0.0.2",
-					"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-					"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
-					"dev": true
-				},
-				"chownr": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-					"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-					"dev": true
-				},
-				"chrome-launcher": {
-					"version": "0.13.4",
-					"resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.13.4.tgz",
-					"integrity": "sha512-nnzXiDbGKjDSK6t2I+35OAPBy5Pw/39bgkb/ZAFwMhwJbdYBp6aH+vW28ZgtjdU890Q7D+3wN/tB8N66q5Gi2A==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"escape-string-regexp": "^1.0.5",
-						"is-wsl": "^2.2.0",
-						"lighthouse-logger": "^1.0.0",
-						"mkdirp": "^0.5.3",
-						"rimraf": "^3.0.2"
-					},
-					"dependencies": {
-						"mkdirp": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-							"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.5"
-							}
-						}
-					}
-				},
-				"circular-json": {
-					"version": "0.5.9",
-					"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.9.tgz",
-					"integrity": "sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ==",
-					"dev": true
-				},
-				"cliui": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-					"integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-					"dev": true,
-					"requires": {
-						"string-width": "^2.1.1",
-						"strip-ansi": "^4.0.0",
-						"wrap-ansi": "^2.0.0"
-					},
-					"dependencies": {
-						"ansi-regex": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-							"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-							"dev": true
-						},
-						"is-fullwidth-code-point": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-							"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-							"dev": true
-						},
-						"string-width": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-							"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-							"dev": true,
-							"requires": {
-								"is-fullwidth-code-point": "^2.0.0",
-								"strip-ansi": "^4.0.0"
-							}
-						},
-						"strip-ansi": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-							"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^3.0.0"
-							}
-						}
-					}
-				},
-				"clone": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-					"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
-					"dev": true
-				},
-				"clone-response": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-					"integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-					"dev": true,
-					"requires": {
-						"mimic-response": "^1.0.0"
-					}
-				},
-				"code-point-at": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-					"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-					"dev": true
-				},
-				"color": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
-					"integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^1.9.1",
-						"color-string": "^1.5.2"
-					},
-					"dependencies": {
-						"color-convert": {
-							"version": "1.9.3",
-							"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-							"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-							"dev": true,
-							"requires": {
-								"color-name": "1.1.3"
-							}
-						},
-						"color-name": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-							"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-							"dev": true
-						}
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"color-string": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
-					"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
-					"dev": true,
-					"requires": {
-						"color-name": "^1.0.0",
-						"simple-swizzle": "^0.2.2"
-					}
-				},
-				"color-support": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-					"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-					"dev": true
-				},
-				"colors": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-					"integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-					"dev": true
-				},
-				"colorspace": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.2.tgz",
-					"integrity": "sha512-vt+OoIP2d76xLhjwbBaucYlNSpPsrJWPlBTtwCpQKIu6/CSMutyzX93O/Do0qzpH3YoHEes8YEFXyZ797rEhzQ==",
-					"dev": true,
-					"requires": {
-						"color": "3.0.x",
-						"text-hex": "1.0.x"
-					}
-				},
-				"combined-stream": {
-					"version": "1.0.8",
-					"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-					"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-					"dev": true,
-					"requires": {
-						"delayed-stream": "~1.0.0"
-					}
-				},
-				"compare-versions": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-					"integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-					"dev": true
-				},
-				"compound-subject": {
-					"version": "0.0.1",
-					"resolved": "https://registry.npmjs.org/compound-subject/-/compound-subject-0.0.1.tgz",
-					"integrity": "sha1-JxVUaYoVrmCLHfyv0wt7oeqJLEs=",
-					"dev": true
-				},
-				"compress-commons": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.1.tgz",
-					"integrity": "sha512-QLdDLCKNV2dtoTorqgxngQCMA+gWXkM/Nwu7FpeBhk/RdkzimqC3jueb/FDmaZeXh+uby1jkBqE3xArsLBE5wQ==",
-					"dev": true,
-					"requires": {
-						"buffer-crc32": "^0.2.13",
-						"crc32-stream": "^4.0.2",
-						"normalize-path": "^3.0.0",
-						"readable-stream": "^3.6.0"
-					}
-				},
-				"concat-map": {
-					"version": "0.0.1",
-					"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-					"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-					"dev": true
-				},
-				"console-control-strings": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-					"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-					"dev": true
-				},
-				"content-disposition": {
-					"version": "0.5.3",
-					"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-					"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "5.1.2"
-					}
-				},
-				"content-type": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-					"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-					"dev": true
-				},
-				"continuation-local-storage": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/continuation-local-storage/-/continuation-local-storage-3.2.1.tgz",
-					"integrity": "sha512-jx44cconVqkCEEyLSKWwkvUXwO561jXMa3LPjTPsm5QR22PA0/mhe33FT4Xb5y74JDvt/Cq+5lm8S8rskLv9ZA==",
-					"dev": true,
-					"requires": {
-						"async-listener": "^0.6.0",
-						"emitter-listener": "^1.1.1"
-					}
-				},
-				"cookie": {
-					"version": "0.4.0",
-					"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-					"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-					"dev": true
-				},
-				"cookie-signature": {
-					"version": "1.0.6",
-					"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-					"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-					"dev": true
-				},
-				"core-js": {
-					"version": "2.6.12",
-					"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-					"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-					"dev": true
-				},
-				"core-util-is": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-					"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-					"dev": true
-				},
-				"crc": {
-					"version": "3.8.0",
-					"resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
-					"integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
-					"dev": true,
-					"requires": {
-						"buffer": "^5.1.0"
-					}
-				},
-				"crc-32": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
-					"integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
-					"dev": true,
-					"requires": {
-						"exit-on-epipe": "~1.0.1",
-						"printj": "~1.1.0"
-					}
-				},
-				"crc32-stream": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.2.tgz",
-					"integrity": "sha512-DxFZ/Hk473b/muq1VJ///PMNLj0ZMnzye9thBpmjpJKCc5eMgB95aK8zCGrGfQ90cWo561Te6HK9D+j4KPdM6w==",
-					"dev": true,
-					"requires": {
-						"crc-32": "^1.2.0",
-						"readable-stream": "^3.4.0"
-					}
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"dev": true,
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						},
-						"which": {
-							"version": "1.3.1",
-							"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-							"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-							"dev": true,
-							"requires": {
-								"isexe": "^2.0.0"
-							}
-						}
-					}
-				},
-				"crypt": {
-					"version": "0.0.2",
-					"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-					"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
-					"dev": true
-				},
-				"css-selector-parser": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
-					"integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==",
-					"dev": true
-				},
-				"css-shorthand-properties": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
-					"integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==",
-					"dev": true
-				},
-				"css-value": {
-					"version": "0.0.1",
-					"resolved": "https://registry.npmjs.org/css-value/-/css-value-0.0.1.tgz",
-					"integrity": "sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=",
-					"dev": true
-				},
-				"dashdash": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-					"integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-					"dev": true,
-					"requires": {
-						"assert-plus": "^1.0.0"
-					}
-				},
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"decamelize": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-					"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-					"dev": true
-				},
-				"decompress-response": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-					"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-					"dev": true,
-					"requires": {
-						"mimic-response": "^3.1.0"
-					},
-					"dependencies": {
-						"mimic-response": {
-							"version": "3.1.0",
-							"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-							"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-							"dev": true
-						}
-					}
-				},
-				"deep-eql": {
-					"version": "0.1.3",
-					"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
-					"integrity": "sha1-71WKyrjeJSBs1xOQbXTlaTDrafI=",
-					"dev": true,
-					"requires": {
-						"type-detect": "0.1.1"
-					}
-				},
-				"deepmerge": {
-					"version": "4.2.2",
-					"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-					"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-					"dev": true
-				},
-				"defer-to-connect": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
-					"integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
-					"dev": true
-				},
-				"delayed-stream": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-					"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-					"dev": true
-				},
-				"delegates": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-					"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-					"dev": true
-				},
-				"depd": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-					"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-					"dev": true
-				},
-				"destroy": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-					"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-					"dev": true
-				},
-				"devtools": {
-					"version": "6.12.1",
-					"resolved": "https://registry.npmjs.org/devtools/-/devtools-6.12.1.tgz",
-					"integrity": "sha512-JyG46suEiZmld7/UVeogkCWM0zYGt+2ML/TI+SkEp+bTv9cs46cDb0pKF3glYZJA7wVVL2gC07Ic0iCxyJEnCQ==",
-					"dev": true,
-					"requires": {
-						"@wdio/config": "6.12.1",
-						"@wdio/logger": "6.10.10",
-						"@wdio/protocols": "6.12.0",
-						"@wdio/utils": "6.11.0",
-						"chrome-launcher": "^0.13.1",
-						"edge-paths": "^2.1.0",
-						"puppeteer-core": "^5.1.0",
-						"ua-parser-js": "^0.7.21",
-						"uuid": "^8.0.0"
-					}
-				},
-				"devtools-protocol": {
-					"version": "0.0.818844",
-					"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.818844.tgz",
-					"integrity": "sha512-AD1hi7iVJ8OD0aMLQU5VK0XH9LDlA1+BcPIgrAxPfaibx2DbWucuyOhc4oyQCbnvDDO68nN6/LcKfqTP343Jjg==",
-					"dev": true
-				},
-				"dom-walk": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-					"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-					"dev": true
-				},
-				"duplexer": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-					"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-					"dev": true
-				},
-				"ecc-jsbn": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-					"integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-					"dev": true,
-					"requires": {
-						"jsbn": "~0.1.0",
-						"safer-buffer": "^2.1.0"
-					}
-				},
-				"edge-paths": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/edge-paths/-/edge-paths-2.2.1.tgz",
-					"integrity": "sha512-AI5fC7dfDmCdKo3m5y7PkYE8m6bMqR6pvVpgtrZkkhcJXFLelUgkjrhk3kXXx8Kbw2cRaTT4LkOR7hqf39KJdw==",
-					"dev": true,
-					"requires": {
-						"@types/which": "^1.3.2",
-						"which": "^2.0.2"
-					}
-				},
-				"ee-first": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-					"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-					"dev": true
-				},
-				"emitter-listener": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/emitter-listener/-/emitter-listener-1.1.2.tgz",
-					"integrity": "sha512-Bt1sBAGFHY9DKY+4/2cV6izcKJUf5T7/gkdmkxzX/qv9CcGH8xSwVRW5mtX03SWJtRTWSOpzCuWN9rBFYZepZQ==",
-					"dev": true,
-					"requires": {
-						"shimmer": "^1.2.0"
-					}
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"enabled": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
-					"integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==",
-					"dev": true
-				},
-				"encodeurl": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-					"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-					"dev": true
-				},
-				"end-of-stream": {
-					"version": "1.4.4",
-					"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-					"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-					"dev": true,
-					"requires": {
-						"once": "^1.4.0"
-					}
-				},
-				"es6-error": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
-					"integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
-					"dev": true
-				},
-				"es6-mapify": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/es6-mapify/-/es6-mapify-1.2.0.tgz",
-					"integrity": "sha512-b4QYXTO1HD0MMFs+JtYrQEaynlyuEInBF3anGQK11rQ45akiIBs+3YUyTBq9FLzM7rD5P2xAglEOXz9gcdmdIw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0"
-					}
-				},
-				"es6-promisify": {
-					"version": "6.1.1",
-					"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.1.1.tgz",
-					"integrity": "sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==",
-					"dev": true
-				},
-				"escape-html": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-					"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-					"dev": true
-				},
-				"escape-string-regexp": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-					"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-					"dev": true
-				},
-				"etag": {
-					"version": "1.8.1",
-					"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-					"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-					"dev": true
-				},
-				"eventemitter3": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-					"integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==",
-					"dev": true
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					},
-					"dependencies": {
-						"get-stream": {
-							"version": "4.1.0",
-							"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-							"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-							"dev": true,
-							"requires": {
-								"pump": "^3.0.0"
-							}
-						}
-					}
-				},
-				"exif-parser": {
-					"version": "0.1.12",
-					"resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
-					"integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=",
-					"dev": true
-				},
-				"exit-on-epipe": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
-					"integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
-					"dev": true
-				},
-				"express": {
-					"version": "4.17.1",
-					"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-					"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-					"dev": true,
-					"requires": {
-						"accepts": "~1.3.7",
-						"array-flatten": "1.1.1",
-						"body-parser": "1.19.0",
-						"content-disposition": "0.5.3",
-						"content-type": "~1.0.4",
-						"cookie": "0.4.0",
-						"cookie-signature": "1.0.6",
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"etag": "~1.8.1",
-						"finalhandler": "~1.1.2",
-						"fresh": "0.5.2",
-						"merge-descriptors": "1.0.1",
-						"methods": "~1.1.2",
-						"on-finished": "~2.3.0",
-						"parseurl": "~1.3.3",
-						"path-to-regexp": "0.1.7",
-						"proxy-addr": "~2.0.5",
-						"qs": "6.7.0",
-						"range-parser": "~1.2.1",
-						"safe-buffer": "5.1.2",
-						"send": "0.17.1",
-						"serve-static": "1.14.1",
-						"setprototypeof": "1.1.1",
-						"statuses": "~1.5.0",
-						"type-is": "~1.6.18",
-						"utils-merge": "1.0.1",
-						"vary": "~1.1.2"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"extend": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-					"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-					"dev": true
-				},
-				"extract-zip": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-					"integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-					"dev": true,
-					"requires": {
-						"@types/yauzl": "^2.9.1",
-						"debug": "^4.1.1",
-						"get-stream": "^5.1.0",
-						"yauzl": "^2.10.0"
-					},
-					"dependencies": {
-						"get-stream": {
-							"version": "5.2.0",
-							"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-							"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-							"dev": true,
-							"requires": {
-								"pump": "^3.0.0"
-							}
-						}
-					}
-				},
-				"extsprintf": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-					"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-					"dev": true
-				},
-				"fancy-log": {
-					"version": "1.3.3",
-					"resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
-					"integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
-					"dev": true,
-					"requires": {
-						"ansi-gray": "^0.1.1",
-						"color-support": "^1.1.3",
-						"parse-node-version": "^1.0.0",
-						"time-stamp": "^1.0.0"
-					}
-				},
-				"fast-deep-equal": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-					"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-					"dev": true
-				},
-				"fast-json-stable-stringify": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-					"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-					"dev": true
-				},
-				"fast-safe-stringify": {
-					"version": "2.0.8",
-					"resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.8.tgz",
-					"integrity": "sha512-lXatBjf3WPjmWD6DpIZxkeSsCOwqI0maYMpgDlx8g4U2qi4lbjA9oH/HD2a87G+KfsUmo5WbJFmqBZlPxtptag==",
-					"dev": true
-				},
-				"fd-slicer": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-					"integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-					"dev": true,
-					"requires": {
-						"pend": "~1.2.0"
-					}
-				},
-				"fecha": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.1.tgz",
-					"integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q==",
-					"dev": true
-				},
-				"file-type": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/file-type/-/file-type-9.0.0.tgz",
-					"integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==",
-					"dev": true
-				},
-				"finalhandler": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-					"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-					"dev": true,
-					"requires": {
-						"debug": "2.6.9",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"on-finished": "~2.3.0",
-						"parseurl": "~1.3.3",
-						"statuses": "~1.5.0",
-						"unpipe": "~1.0.0"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"find-root": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-					"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fn.name": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
-					"integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
-					"dev": true
-				},
-				"follow-redirects": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-					"integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-					"dev": true
-				},
-				"forever-agent": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-					"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-					"dev": true
-				},
-				"form-data": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-					"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-					"dev": true,
-					"requires": {
-						"asynckit": "^0.4.0",
-						"combined-stream": "^1.0.8",
-						"mime-types": "^2.1.12"
-					}
-				},
-				"forwarded": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-					"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-					"dev": true
-				},
-				"fresh": {
-					"version": "0.5.2",
-					"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-					"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-					"dev": true
-				},
-				"fs-constants": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-					"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-					"dev": true
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"fs.realpath": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-					"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-					"dev": true
-				},
-				"ftp-response-parser": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/ftp-response-parser/-/ftp-response-parser-1.0.1.tgz",
-					"integrity": "sha1-O50z+O3V+45HALj3eMRi5bFYH4k=",
-					"dev": true,
-					"requires": {
-						"readable-stream": "^1.0.31"
-					},
-					"dependencies": {
-						"isarray": {
-							"version": "0.0.1",
-							"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-							"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-							"dev": true
-						},
-						"readable-stream": {
-							"version": "1.1.14",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-							"integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.1",
-								"isarray": "0.0.1",
-								"string_decoder": "~0.10.x"
-							}
-						},
-						"string_decoder": {
-							"version": "0.10.31",
-							"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-							"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-							"dev": true
-						}
-					}
-				},
-				"function-bind": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-					"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-					"dev": true
-				},
-				"gauge": {
-					"version": "2.7.4",
-					"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-					"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-					"dev": true,
-					"requires": {
-						"aproba": "^1.0.3",
-						"console-control-strings": "^1.0.0",
-						"has-unicode": "^2.0.0",
-						"object-assign": "^4.1.0",
-						"signal-exit": "^3.0.0",
-						"string-width": "^1.0.1",
-						"strip-ansi": "^3.0.1",
-						"wide-align": "^1.1.0"
-					}
-				},
-				"get-caller-file": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-					"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-					"dev": true
-				},
-				"get-port": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
-					"integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
-					"dev": true
-				},
-				"get-prototype-of": {
-					"version": "0.0.0",
-					"resolved": "https://registry.npmjs.org/get-prototype-of/-/get-prototype-of-0.0.0.tgz",
-					"integrity": "sha1-mHcr0QcW0W3rSzIlFsRp78oorEQ=",
-					"dev": true
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"getpass": {
-					"version": "0.1.7",
-					"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-					"integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-					"dev": true,
-					"requires": {
-						"assert-plus": "^1.0.0"
-					}
-				},
-				"gifwrap": {
-					"version": "0.9.2",
-					"resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.2.tgz",
-					"integrity": "sha512-fcIswrPaiCDAyO8xnWvHSZdWChjKXUanKKpAiWWJ/UTkEi/aYKn5+90e7DE820zbEaVR9CE2y4z9bzhQijZ0BA==",
-					"dev": true,
-					"requires": {
-						"image-q": "^1.1.1",
-						"omggif": "^1.0.10"
-					}
-				},
-				"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"
-					}
-				},
-				"global": {
-					"version": "4.4.0",
-					"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-					"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-					"dev": true,
-					"requires": {
-						"min-document": "^2.19.0",
-						"process": "^0.11.10"
-					}
-				},
-				"got": {
-					"version": "11.8.2",
-					"resolved": "https://registry.npmjs.org/got/-/got-11.8.2.tgz",
-					"integrity": "sha512-D0QywKgIe30ODs+fm8wMZiAcZjypcCodPNuMz5H9Mny7RJ+IjJ10BdmGW7OM7fHXP+O7r6ZwapQ/YQmMSvB0UQ==",
-					"dev": true,
-					"requires": {
-						"@sindresorhus/is": "^4.0.0",
-						"@szmarczak/http-timer": "^4.0.5",
-						"@types/cacheable-request": "^6.0.1",
-						"@types/responselike": "^1.0.0",
-						"cacheable-lookup": "^5.0.3",
-						"cacheable-request": "^7.0.1",
-						"decompress-response": "^6.0.0",
-						"http2-wrapper": "^1.0.0-beta.5.2",
-						"lowercase-keys": "^2.0.0",
-						"p-cancelable": "^2.0.0",
-						"responselike": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.6",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-					"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-					"dev": true
-				},
-				"grapheme-splitter": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-					"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
-					"dev": true
-				},
-				"har-schema": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-					"integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-					"dev": true
-				},
-				"har-validator": {
-					"version": "5.1.5",
-					"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
-					"integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-					"dev": true,
-					"requires": {
-						"ajv": "^6.12.3",
-						"har-schema": "^2.0.0"
-					}
-				},
-				"has": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-					"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"has-unicode": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-					"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-					"dev": true
-				},
-				"http-cache-semantics": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-					"integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
-					"dev": true
-				},
-				"http-errors": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					},
-					"dependencies": {
-						"inherits": {
-							"version": "2.0.3",
-							"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-							"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-							"dev": true
-						}
-					}
-				},
-				"http-signature": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-					"integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-					"dev": true,
-					"requires": {
-						"assert-plus": "^1.0.0",
-						"jsprim": "^1.2.2",
-						"sshpk": "^1.7.0"
-					}
-				},
-				"http-status-codes": {
-					"version": "2.1.4",
-					"resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.1.4.tgz",
-					"integrity": "sha512-MZVIsLKGVOVE1KEnldppe6Ij+vmemMuApDfjhVSLzyYP+td0bREEYyAoIw9yFePoBXManCuBqmiNP5FqJS5Xkg==",
-					"dev": true
-				},
-				"http2-wrapper": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
-					"integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
-					"dev": true,
-					"requires": {
-						"quick-lru": "^5.1.1",
-						"resolve-alpn": "^1.0.0"
-					}
-				},
-				"https-proxy-agent": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-					"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
-					"dev": true,
-					"requires": {
-						"agent-base": "5",
-						"debug": "4"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				},
-				"ieee754": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-					"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-					"dev": true
-				},
-				"image-q": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/image-q/-/image-q-1.1.1.tgz",
-					"integrity": "sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=",
-					"dev": true
-				},
-				"immediate": {
-					"version": "3.0.6",
-					"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-					"integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=",
-					"dev": true
-				},
-				"inflight": {
-					"version": "1.0.6",
-					"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-					"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-					"dev": true,
-					"requires": {
-						"once": "^1.3.0",
-						"wrappy": "1"
-					}
-				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"ini": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
-					"integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
-					"dev": true
-				},
-				"interpret": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
-					"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
-					"dev": true
-				},
-				"invert-kv": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-					"integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-					"dev": true
-				},
-				"io.appium.settings": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/io.appium.settings/-/io.appium.settings-3.4.0.tgz",
-					"integrity": "sha512-7up+8dJr2RXXZhXNVUq9rdtZbGRTytSJ1rax4qm16534zPcBwXeWin0hC9qsIjDtqXXEEUOHdybeqTD1X8ZlMQ==",
-					"dev": true
-				},
-				"ipaddr.js": {
-					"version": "1.9.1",
-					"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-					"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-					"dev": true
-				},
-				"is-arrayish": {
-					"version": "0.3.2",
-					"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-					"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-					"dev": true
-				},
-				"is-buffer": {
-					"version": "1.1.6",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-					"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-					"dev": true
-				},
-				"is-capitalized": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-capitalized/-/is-capitalized-1.0.0.tgz",
-					"integrity": "sha1-TIRktNkdPk7rRIid0s2PGwrEwTY=",
-					"dev": true
-				},
-				"is-class": {
-					"version": "0.0.4",
-					"resolved": "https://registry.npmjs.org/is-class/-/is-class-0.0.4.tgz",
-					"integrity": "sha1-4FdFFwW7NOOePjNZjJOpg3KWtzY=",
-					"dev": true
-				},
-				"is-core-module": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz",
-					"integrity": "sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"is-docker": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-					"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-					"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-					"dev": true,
-					"requires": {
-						"number-is-nan": "^1.0.0"
-					}
-				},
-				"is-function": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-					"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-					"dev": true
-				},
-				"is-number-like": {
-					"version": "1.0.8",
-					"resolved": "https://registry.npmjs.org/is-number-like/-/is-number-like-1.0.8.tgz",
-					"integrity": "sha512-6rZi3ezCyFcn5L71ywzz2bS5b2Igl1En3eTlZlvKjpz1n3IZLAYMbKYAIQgFmEu0GENg92ziU/faEOA/aixjbA==",
-					"dev": true,
-					"requires": {
-						"lodash.isfinite": "^3.3.2"
-					}
-				},
-				"is-stream": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-					"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-					"dev": true
-				},
-				"is-typedarray": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-					"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-					"dev": true
-				},
-				"is-wsl": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0"
-					}
-				},
-				"isarray": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-					"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-					"dev": true
-				},
-				"isexe": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-					"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-					"dev": true
-				},
-				"isstream": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-					"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-					"dev": true
-				},
-				"jimp": {
-					"version": "0.16.1",
-					"resolved": "https://registry.npmjs.org/jimp/-/jimp-0.16.1.tgz",
-					"integrity": "sha512-+EKVxbR36Td7Hfd23wKGIeEyHbxShZDX6L8uJkgVW3ESA9GiTEPK08tG1XI2r/0w5Ch0HyJF5kPqF9K7EmGjaw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.7.2",
-						"@jimp/custom": "^0.16.1",
-						"@jimp/plugins": "^0.16.1",
-						"@jimp/types": "^0.16.1",
-						"regenerator-runtime": "^0.13.3"
-					}
-				},
-				"jpeg-js": {
-					"version": "0.4.2",
-					"resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.2.tgz",
-					"integrity": "sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==",
-					"dev": true
-				},
-				"js2xmlparser2": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/js2xmlparser2/-/js2xmlparser2-0.2.0.tgz",
-					"integrity": "sha1-p8ogibg9AjMdYxiS3WdDhkElAz8=",
-					"dev": true
-				},
-				"jsbn": {
-					"version": "0.1.1",
-					"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-					"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-					"dev": true
-				},
-				"jsftp": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/jsftp/-/jsftp-2.1.3.tgz",
-					"integrity": "sha512-r79EVB8jaNAZbq8hvanL8e8JGu2ZNr2bXdHC4ZdQhRImpSPpnWwm5DYVzQ5QxJmtGtKhNNuvqGgbNaFl604fEQ==",
-					"dev": true,
-					"requires": {
-						"debug": "^3.1.0",
-						"ftp-response-parser": "^1.0.1",
-						"once": "^1.4.0",
-						"parse-listing": "^1.1.3",
-						"stream-combiner": "^0.2.2",
-						"unorm": "^1.4.1"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "3.2.7",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-							"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-							"dev": true,
-							"requires": {
-								"ms": "^2.1.1"
-							}
-						}
-					}
-				},
-				"json-buffer": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-					"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-					"dev": true
-				},
-				"json-schema": {
-					"version": "0.2.3",
-					"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-					"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-					"dev": true
-				},
-				"json-schema-traverse": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-					"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-					"dev": true
-				},
-				"json-stringify-safe": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-					"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"jsprim": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-					"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-					"dev": true,
-					"requires": {
-						"assert-plus": "1.0.0",
-						"extsprintf": "1.3.0",
-						"json-schema": "0.2.3",
-						"verror": "1.10.0"
-					}
-				},
-				"jszip": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.6.0.tgz",
-					"integrity": "sha512-jgnQoG9LKnWO3mnVNBnfhkh0QknICd1FGSrXcgrl67zioyJ4wgx25o9ZqwNtrROSflGBCGYnJfjrIyRIby1OoQ==",
-					"dev": true,
-					"requires": {
-						"lie": "~3.3.0",
-						"pako": "~1.0.2",
-						"readable-stream": "~2.3.6",
-						"set-immediate-shim": "~1.0.1"
-					},
-					"dependencies": {
-						"readable-stream": {
-							"version": "2.3.7",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-							"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.3",
-								"isarray": "~1.0.0",
-								"process-nextick-args": "~2.0.0",
-								"safe-buffer": "~5.1.1",
-								"string_decoder": "~1.1.1",
-								"util-deprecate": "~1.0.1"
-							}
-						}
-					}
-				},
-				"keypather": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/keypather/-/keypather-1.10.2.tgz",
-					"integrity": "sha1-4ESWMtSz5RbyHMAUznxWRP3c5hQ=",
-					"dev": true,
-					"requires": {
-						"101": "^1.0.0"
-					}
-				},
-				"keyv": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.4.tgz",
-					"integrity": "sha512-vqNHbAc8BBsxk+7QBYLW0Y219rWcClspR6WSeoHYKG5mnsSoOH+BL1pWq02DDCVdvvuUny5rkBlzMRzoqc+GIg==",
-					"dev": true,
-					"requires": {
-						"json-buffer": "3.0.1"
-					}
-				},
-				"klaw": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz",
-					"integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.9"
-					}
-				},
-				"kuler": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
-					"integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
-					"dev": true
-				},
-				"lazystream": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
-					"integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
-					"dev": true,
-					"requires": {
-						"readable-stream": "^2.0.5"
-					},
-					"dependencies": {
-						"readable-stream": {
-							"version": "2.3.7",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-							"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.3",
-								"isarray": "~1.0.0",
-								"process-nextick-args": "~2.0.0",
-								"safe-buffer": "~5.1.1",
-								"string_decoder": "~1.1.1",
-								"util-deprecate": "~1.0.1"
-							}
-						}
-					}
-				},
-				"lcid": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-					"integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-					"dev": true,
-					"requires": {
-						"invert-kv": "^2.0.0"
-					}
-				},
-				"lie": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-					"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-					"dev": true,
-					"requires": {
-						"immediate": "~3.0.5"
-					}
-				},
-				"lighthouse-logger": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.3.0.tgz",
-					"integrity": "sha512-BbqAKApLb9ywUli+0a+PcV04SyJ/N1q/8qgCNe6U97KbPCS1BTksEuHFLYdvc8DltuhfxIUBqDZsC0bBGtl3lA==",
-					"dev": true,
-					"requires": {
-						"debug": "^2.6.9",
-						"marky": "^1.2.2"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"load-bmfont": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
-					"integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==",
-					"dev": true,
-					"requires": {
-						"buffer-equal": "0.0.1",
-						"mime": "^1.3.4",
-						"parse-bmfont-ascii": "^1.0.3",
-						"parse-bmfont-binary": "^1.0.5",
-						"parse-bmfont-xml": "^1.1.4",
-						"phin": "^2.9.1",
-						"xhr": "^2.0.1",
-						"xtend": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"lockfile": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.4.tgz",
-					"integrity": "sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==",
-					"dev": true,
-					"requires": {
-						"signal-exit": "^3.0.2"
-					}
-				},
-				"lodash": {
-					"version": "4.17.21",
-					"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-					"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-					"dev": true
-				},
-				"lodash.clonedeep": {
-					"version": "4.5.0",
-					"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-					"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
-					"dev": true
-				},
-				"lodash.defaults": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-					"integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
-					"dev": true
-				},
-				"lodash.difference": {
-					"version": "4.5.0",
-					"resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-					"integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-					"dev": true
-				},
-				"lodash.flatten": {
-					"version": "4.4.0",
-					"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
-					"integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
-					"dev": true
-				},
-				"lodash.isfinite": {
-					"version": "3.3.2",
-					"resolved": "https://registry.npmjs.org/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz",
-					"integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
-					"dev": true
-				},
-				"lodash.isobject": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
-					"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=",
-					"dev": true
-				},
-				"lodash.isplainobject": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-					"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
-					"dev": true
-				},
-				"lodash.merge": {
-					"version": "4.6.2",
-					"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-					"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-					"dev": true
-				},
-				"lodash.union": {
-					"version": "4.6.0",
-					"resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
-					"integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=",
-					"dev": true
-				},
-				"lodash.zip": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz",
-					"integrity": "sha1-7GZi5IlkCO1KtsVCo5kLcswIACA=",
-					"dev": true
-				},
-				"logform": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/logform/-/logform-2.2.0.tgz",
-					"integrity": "sha512-N0qPlqfypFx7UHNn4B3lzS/b0uLqt2hmuoa+PpuXNYgozdJYAyauF5Ky0BWVjrxDlMWiT3qN4zPq3vVAfZy7Yg==",
-					"dev": true,
-					"requires": {
-						"colors": "^1.2.1",
-						"fast-safe-stringify": "^2.0.4",
-						"fecha": "^4.2.0",
-						"ms": "^2.1.1",
-						"triple-beam": "^1.3.0"
-					}
-				},
-				"loglevel": {
-					"version": "1.7.1",
-					"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
-					"integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==",
-					"dev": true
-				},
-				"loglevel-plugin-prefix": {
-					"version": "0.8.4",
-					"resolved": "https://registry.npmjs.org/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz",
-					"integrity": "sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==",
-					"dev": true
-				},
-				"longjohn": {
-					"version": "0.2.12",
-					"resolved": "https://registry.npmjs.org/longjohn/-/longjohn-0.2.12.tgz",
-					"integrity": "sha1-fKdEawg2VcN351EiE9x1TVKmSn4=",
-					"dev": true,
-					"requires": {
-						"source-map-support": "0.3.2 - 1.0.0"
-					}
-				},
-				"lowercase-keys": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-					"integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-					"dev": true
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"map-age-cleaner": {
-					"version": "0.1.3",
-					"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-					"integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-					"dev": true,
-					"requires": {
-						"p-defer": "^1.0.0"
-					}
-				},
-				"marky": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/marky/-/marky-1.2.2.tgz",
-					"integrity": "sha512-k1dB2HNeaNyORco8ulVEhctyEGkKHb2YWAhDsxeFlW2nROIirsctBYzKwwS3Vza+sKTS1zO4Z+n9/+9WbGLIxQ==",
-					"dev": true
-				},
-				"md5": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-					"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-					"dev": true,
-					"requires": {
-						"charenc": "0.0.2",
-						"crypt": "0.0.2",
-						"is-buffer": "~1.1.6"
-					}
-				},
-				"media-typer": {
-					"version": "0.3.0",
-					"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-					"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-					"dev": true
-				},
-				"mem": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-					"integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-					"dev": true,
-					"requires": {
-						"map-age-cleaner": "^0.1.1",
-						"mimic-fn": "^2.0.0",
-						"p-is-promise": "^2.0.0"
-					}
-				},
-				"merge-descriptors": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-					"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-					"dev": true
-				},
-				"method-override": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
-					"integrity": "sha512-IJ2NNN/mSl9w3kzWB92rcdHpz+HjkxhDJWNDBqSlas+zQdP8wBiJzITPg08M/k2uVvMow7Sk41atndNtt/PHSA==",
-					"dev": true,
-					"requires": {
-						"debug": "3.1.0",
-						"methods": "~1.1.2",
-						"parseurl": "~1.3.2",
-						"vary": "~1.1.2"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "3.1.0",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-							"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"methods": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-					"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-					"dev": true
-				},
-				"mime": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-					"dev": true
-				},
-				"mime-db": {
-					"version": "1.48.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-					"integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.31",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-					"integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.48.0"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"mimic-response": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-					"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-					"dev": true
-				},
-				"min-document": {
-					"version": "2.19.0",
-					"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-					"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-					"dev": true,
-					"requires": {
-						"dom-walk": "^0.1.0"
-					}
-				},
-				"minimatch": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-					"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
-				"minimist": {
-					"version": "1.2.5",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-					"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-					"dev": true
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"mkdirp-classic": {
-					"version": "0.5.3",
-					"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-					"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-					"dev": true
-				},
-				"moment": {
-					"version": "2.29.1",
-					"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-					"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
-					"dev": true
-				},
-				"moment-timezone": {
-					"version": "0.5.33",
-					"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.33.tgz",
-					"integrity": "sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==",
-					"dev": true,
-					"requires": {
-						"moment": ">= 2.9.0"
-					}
-				},
-				"morgan": {
-					"version": "1.10.0",
-					"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
-					"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
-					"dev": true,
-					"requires": {
-						"basic-auth": "~2.0.1",
-						"debug": "2.6.9",
-						"depd": "~2.0.0",
-						"on-finished": "~2.3.0",
-						"on-headers": "~1.0.2"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							}
-						},
-						"depd": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-							"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-							"dev": true
-						},
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-							"dev": true
-						}
-					}
-				},
-				"ms": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-					"dev": true
-				},
-				"mv": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
-					"integrity": "sha1-rmzg1vbV4KT32JN5jQPB6pVZtqI=",
-					"dev": true,
-					"requires": {
-						"mkdirp": "~0.5.1",
-						"ncp": "~2.0.0",
-						"rimraf": "~2.4.0"
-					},
-					"dependencies": {
-						"glob": {
-							"version": "6.0.4",
-							"resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-							"integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-							"dev": true,
-							"requires": {
-								"inflight": "^1.0.4",
-								"inherits": "2",
-								"minimatch": "2 || 3",
-								"once": "^1.3.0",
-								"path-is-absolute": "^1.0.0"
-							}
-						},
-						"mkdirp": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-							"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.5"
-							}
-						},
-						"rimraf": {
-							"version": "2.4.5",
-							"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
-							"integrity": "sha1-7nEM5dk6j9uFb7Xqj/Di11k0sto=",
-							"dev": true,
-							"requires": {
-								"glob": "^6.0.1"
-							}
-						}
-					}
-				},
-				"ncp": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
-					"integrity": "sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=",
-					"dev": true
-				},
-				"negotiator": {
-					"version": "0.6.2",
-					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-					"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-					"dev": true
-				},
-				"nice-try": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-					"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-					"dev": true
-				},
-				"node-fetch": {
-					"version": "2.6.1",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-					"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==",
-					"dev": true
-				},
-				"node-idevice": {
-					"version": "0.1.6",
-					"resolved": "https://registry.npmjs.org/node-idevice/-/node-idevice-0.1.6.tgz",
-					"integrity": "sha1-lBGqdotEv7fNJezlyKHItLbx+kQ=",
-					"dev": true
-				},
-				"node-simctl": {
-					"version": "6.4.1",
-					"resolved": "https://registry.npmjs.org/node-simctl/-/node-simctl-6.4.1.tgz",
-					"integrity": "sha512-RkEvbv2SJYDJF5eBJ0rRGZRU/LOypLmUAPLI/s7KqJAk0rSbG45x2OF2eqbK9+pfzL7N9XPorIcqtS75cYIydw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"asyncbox": "^2.3.1",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.2.1",
-						"npmlog": "^4.1.2",
-						"rimraf": "^3.0.0",
-						"semver": "^7.0.0",
-						"source-map-support": "^0.5.5",
-						"teen_process": "^1.5.1",
-						"uuid": "^8.0.0",
-						"which": "^2.0.0"
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"normalize-url": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-					"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-					"integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-					"dev": true,
-					"requires": {
-						"path-key": "^2.0.0"
-					}
-				},
-				"npmlog": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-					"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-					"dev": true,
-					"requires": {
-						"are-we-there-yet": "~1.1.2",
-						"console-control-strings": "~1.1.0",
-						"gauge": "~2.7.3",
-						"set-blocking": "~2.0.0"
-					}
-				},
-				"number-is-nan": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-					"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-					"dev": true
-				},
-				"oauth-sign": {
-					"version": "0.9.0",
-					"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-					"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-					"dev": true
-				},
-				"object-assign": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-					"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-					"dev": true
-				},
-				"omggif": {
-					"version": "1.0.10",
-					"resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz",
-					"integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==",
-					"dev": true
-				},
-				"on-finished": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-					"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-					"dev": true,
-					"requires": {
-						"ee-first": "1.1.1"
-					}
-				},
-				"on-headers": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-					"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-					"dev": true
-				},
-				"once": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-					"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-					"dev": true,
-					"requires": {
-						"wrappy": "1"
-					}
-				},
-				"one-time": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
-					"integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
-					"dev": true,
-					"requires": {
-						"fn.name": "1.x.x"
-					}
-				},
-				"os-locale": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-					"integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-					"dev": true,
-					"requires": {
-						"execa": "^1.0.0",
-						"lcid": "^2.0.0",
-						"mem": "^4.0.0"
-					}
-				},
-				"os-tmpdir": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-					"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-					"dev": true
-				},
-				"p-cancelable": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
-					"integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
-					"dev": true
-				},
-				"p-defer": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-					"integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-					"dev": true
-				},
-				"p-finally": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-					"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-					"dev": true
-				},
-				"p-is-promise": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-					"integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-					"dev": true
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"pako": {
-					"version": "1.0.11",
-					"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-					"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-					"dev": true
-				},
-				"parse-bmfont-ascii": {
-					"version": "1.0.6",
-					"resolved": "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
-					"integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU=",
-					"dev": true
-				},
-				"parse-bmfont-binary": {
-					"version": "1.0.6",
-					"resolved": "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
-					"integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY=",
-					"dev": true
-				},
-				"parse-bmfont-xml": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz",
-					"integrity": "sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==",
-					"dev": true,
-					"requires": {
-						"xml-parse-from-string": "^1.0.0",
-						"xml2js": "^0.4.5"
-					}
-				},
-				"parse-headers": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
-					"integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA==",
-					"dev": true
-				},
-				"parse-listing": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/parse-listing/-/parse-listing-1.1.3.tgz",
-					"integrity": "sha1-qlRvV/3BKc+/mUXNS3V7FLBhgt0=",
-					"dev": true
-				},
-				"parse-node-version": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-					"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-					"dev": true
-				},
-				"parseurl": {
-					"version": "1.3.3",
-					"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"path-is-absolute": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-					"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-					"dev": true
-				},
-				"path-key": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-					"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-					"dev": true
-				},
-				"path-parse": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-					"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-					"dev": true
-				},
-				"path-to-regexp": {
-					"version": "0.1.7",
-					"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-					"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-					"dev": true
-				},
-				"pem": {
-					"version": "1.14.4",
-					"resolved": "https://registry.npmjs.org/pem/-/pem-1.14.4.tgz",
-					"integrity": "sha512-v8lH3NpirgiEmbOqhx0vwQTxwi0ExsiWBGYh0jYNq7K6mQuO4gI6UEFlr6fLAdv9TPXRt6GqiwE37puQdIDS8g==",
-					"dev": true,
-					"requires": {
-						"es6-promisify": "^6.0.0",
-						"md5": "^2.2.1",
-						"os-tmpdir": "^1.0.1",
-						"which": "^2.0.2"
-					}
-				},
-				"pend": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-					"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-					"dev": true
-				},
-				"performance-now": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-					"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-					"dev": true
-				},
-				"phin": {
-					"version": "2.9.3",
-					"resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
-					"integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
-					"dev": true
-				},
-				"pixelmatch": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
-					"integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=",
-					"dev": true,
-					"requires": {
-						"pngjs": "^3.0.0"
-					},
-					"dependencies": {
-						"pngjs": {
-							"version": "3.4.0",
-							"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
-							"integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
-							"dev": true
-						}
-					}
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"plist": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/plist/-/plist-3.0.2.tgz",
-					"integrity": "sha512-MSrkwZBdQ6YapHy87/8hDU8MnIcyxBKjeF+McXnr5A9MtffPewTs7G3hlpodT5TacyfIyFTaJEhh3GGcmasTgQ==",
-					"dev": true,
-					"requires": {
-						"base64-js": "^1.5.1",
-						"xmlbuilder": "^9.0.7",
-						"xmldom": "^0.5.0"
-					},
-					"dependencies": {
-						"xmlbuilder": {
-							"version": "9.0.7",
-							"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-							"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
-							"dev": true
-						}
-					}
-				},
-				"pluralize": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
-					"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
-					"dev": true
-				},
-				"pngjs": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
-					"integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
-					"dev": true
-				},
-				"portfinder": {
-					"version": "1.0.28",
-					"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-					"integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-					"dev": true,
-					"requires": {
-						"async": "^2.6.2",
-						"debug": "^3.1.1",
-						"mkdirp": "^0.5.5"
-					},
-					"dependencies": {
-						"async": {
-							"version": "2.6.3",
-							"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-							"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-							"dev": true,
-							"requires": {
-								"lodash": "^4.17.14"
-							}
-						},
-						"debug": {
-							"version": "3.2.7",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-							"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-							"dev": true,
-							"requires": {
-								"ms": "^2.1.1"
-							}
-						},
-						"mkdirp": {
-							"version": "0.5.5",
-							"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-							"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-							"dev": true,
-							"requires": {
-								"minimist": "^1.2.5"
-							}
-						}
-					}
-				},
-				"portscanner": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
-					"integrity": "sha512-IFroCz/59Lqa2uBvzK3bKDbDDIEaAY8XJ1jFxcLWTqosrsc32//P4VuSB2vZXoHiHqOmx8B5L5hnKOxL/7FlPw==",
-					"dev": true,
-					"requires": {
-						"async": "^2.6.0",
-						"is-number-like": "^1.0.3"
-					},
-					"dependencies": {
-						"async": {
-							"version": "2.6.3",
-							"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-							"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-							"dev": true,
-							"requires": {
-								"lodash": "^4.17.14"
-							}
-						}
-					}
-				},
-				"printj": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
-					"integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
-					"dev": true
-				},
-				"process": {
-					"version": "0.11.10",
-					"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-					"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-					"dev": true
-				},
-				"process-nextick-args": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-					"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-					"dev": true
-				},
-				"progress": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-					"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-					"dev": true
-				},
-				"proxy-addr": {
-					"version": "2.0.7",
-					"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-					"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-					"dev": true,
-					"requires": {
-						"forwarded": "0.2.0",
-						"ipaddr.js": "1.9.1"
-					}
-				},
-				"proxy-from-env": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-					"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-					"dev": true
-				},
-				"psl": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-					"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-					"dev": true
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"punycode": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-					"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-					"dev": true
-				},
-				"puppeteer-core": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-5.5.0.tgz",
-					"integrity": "sha512-tlA+1n+ziW/Db03hVV+bAecDKse8ihFRXYiEypBe9IlLRvOCzYFG6qrCMBYK34HO/Q/Ecjc+tvkHRAfLVH+NgQ==",
-					"dev": true,
-					"requires": {
-						"debug": "^4.1.0",
-						"devtools-protocol": "0.0.818844",
-						"extract-zip": "^2.0.0",
-						"https-proxy-agent": "^4.0.0",
-						"node-fetch": "^2.6.1",
-						"pkg-dir": "^4.2.0",
-						"progress": "^2.0.1",
-						"proxy-from-env": "^1.0.0",
-						"rimraf": "^3.0.2",
-						"tar-fs": "^2.0.0",
-						"unbzip2-stream": "^1.3.3",
-						"ws": "^7.2.3"
-					}
-				},
-				"qs": {
-					"version": "6.7.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-					"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-					"dev": true
-				},
-				"quick-lru": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-					"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-					"dev": true
-				},
-				"range-parser": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-					"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-					"dev": true
-				},
-				"raw-body": {
-					"version": "2.4.0",
-					"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-					"integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-					"dev": true,
-					"requires": {
-						"bytes": "3.1.0",
-						"http-errors": "1.7.2",
-						"iconv-lite": "0.4.24",
-						"unpipe": "1.0.0"
-					}
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"readdir-glob": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.1.tgz",
-					"integrity": "sha512-91/k1EzZwDx6HbERR+zucygRFfiPl2zkIYZtv3Jjr6Mn7SkKcVct8aVO+sSRiGMc6fLf72du3d92/uY63YPdEA==",
-					"dev": true,
-					"requires": {
-						"minimatch": "^3.0.4"
-					}
-				},
-				"rechoir": {
-					"version": "0.6.2",
-					"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
-					"integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
-					"dev": true,
-					"requires": {
-						"resolve": "^1.1.6"
-					}
-				},
-				"regenerator-runtime": {
-					"version": "0.13.7",
-					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-					"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-					"dev": true
-				},
-				"request": {
-					"version": "2.88.2",
-					"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-					"integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-					"dev": true,
-					"requires": {
-						"aws-sign2": "~0.7.0",
-						"aws4": "^1.8.0",
-						"caseless": "~0.12.0",
-						"combined-stream": "~1.0.6",
-						"extend": "~3.0.2",
-						"forever-agent": "~0.6.1",
-						"form-data": "~2.3.2",
-						"har-validator": "~5.1.3",
-						"http-signature": "~1.2.0",
-						"is-typedarray": "~1.0.0",
-						"isstream": "~0.1.2",
-						"json-stringify-safe": "~5.0.1",
-						"mime-types": "~2.1.19",
-						"oauth-sign": "~0.9.0",
-						"performance-now": "^2.1.0",
-						"qs": "~6.5.2",
-						"safe-buffer": "^5.1.2",
-						"tough-cookie": "~2.5.0",
-						"tunnel-agent": "^0.6.0",
-						"uuid": "^3.3.2"
-					},
-					"dependencies": {
-						"form-data": {
-							"version": "2.3.3",
-							"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-							"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-							"dev": true,
-							"requires": {
-								"asynckit": "^0.4.0",
-								"combined-stream": "^1.0.6",
-								"mime-types": "^2.1.12"
-							}
-						},
-						"qs": {
-							"version": "6.5.2",
-							"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-							"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-							"dev": true
-						},
-						"uuid": {
-							"version": "3.4.0",
-							"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-							"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-							"dev": true
-						}
-					}
-				},
-				"request-promise": {
-					"version": "4.2.6",
-					"resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.2.6.tgz",
-					"integrity": "sha512-HCHI3DJJUakkOr8fNoCc73E5nU5bqITjOYFMDrKHYOXWXrgD/SBaC7LjwuPymUprRyuF06UK7hd/lMHkmUXglQ==",
-					"dev": true,
-					"requires": {
-						"bluebird": "^3.5.0",
-						"request-promise-core": "1.1.4",
-						"stealthy-require": "^1.1.1",
-						"tough-cookie": "^2.3.3"
-					}
-				},
-				"request-promise-core": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
-					"integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.19"
-					}
-				},
-				"require-directory": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-					"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-					"dev": true
-				},
-				"require-main-filename": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-					"integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-					"dev": true
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"resolve-alpn": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-					"integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
-					"dev": true
-				},
-				"responselike": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz",
-					"integrity": "sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==",
-					"dev": true,
-					"requires": {
-						"lowercase-keys": "^2.0.0"
-					}
-				},
-				"resq": {
-					"version": "1.10.1",
-					"resolved": "https://registry.npmjs.org/resq/-/resq-1.10.1.tgz",
-					"integrity": "sha512-zhp1iyUH02MLciv3bIM2bNtTFx/fqRsK4Jk73jcPqp00d/sMTTjOtjdTMAcgjrQKGx5DvQ/HSpeqaMW0atGRJA==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^2.0.1"
-					}
-				},
-				"rgb2hex": {
-					"version": "0.2.3",
-					"resolved": "https://registry.npmjs.org/rgb2hex/-/rgb2hex-0.2.3.tgz",
-					"integrity": "sha512-clEe0m1xv+Tva1B/TOepuIcvLAxP0U+sCDfgt1SX1HmI2Ahr5/Cd/nzJM1e78NKVtWdoo0s33YehpFA8UfIShQ==",
-					"dev": true
-				},
-				"rimraf": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-					"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-					"dev": true,
-					"requires": {
-						"glob": "^7.1.3"
-					}
-				},
-				"rpc-websockets": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/rpc-websockets/-/rpc-websockets-5.3.1.tgz",
-					"integrity": "sha512-rIxEl1BbXRlIA9ON7EmY/2GUM7RLMy8zrUPTiLPFiYnYOz0I3PXfCmDDrge5vt4pW4oIcAXBDvgZuJ1jlY5+VA==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.8.7",
-						"assert-args": "^1.2.1",
-						"babel-runtime": "^6.26.0",
-						"circular-json": "^0.5.9",
-						"eventemitter3": "^3.1.2",
-						"uuid": "^3.4.0",
-						"ws": "^5.2.2"
-					},
-					"dependencies": {
-						"uuid": {
-							"version": "3.4.0",
-							"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-							"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-							"dev": true
-						},
-						"ws": {
-							"version": "5.2.3",
-							"resolved": "https://registry.npmjs.org/ws/-/ws-5.2.3.tgz",
-							"integrity": "sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==",
-							"dev": true,
-							"requires": {
-								"async-limiter": "~1.0.0"
-							}
-						}
-					}
-				},
-				"safari-launcher": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/safari-launcher/-/safari-launcher-2.0.5.tgz",
-					"integrity": "sha1-pO/6nqUS0dVB5HuAOdhScBXyre0=",
-					"dev": true
-				},
-				"safe-buffer": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-					"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-					"dev": true
-				},
-				"safer-buffer": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-					"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-					"dev": true
-				},
-				"sanitize-filename": {
-					"version": "1.6.3",
-					"resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
-					"integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
-					"dev": true,
-					"requires": {
-						"truncate-utf8-bytes": "^1.0.0"
-					}
-				},
-				"sax": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-					"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-					"dev": true
-				},
-				"selenium-webdriver": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz",
-					"integrity": "sha512-WH7Aldse+2P5bbFBO4Gle/nuQOdVwpHMTL6raL3uuBj/vPG07k6uzt3aiahu352ONBr5xXh0hDlM3LhtXPOC4Q==",
-					"dev": true,
-					"requires": {
-						"jszip": "^3.1.3",
-						"rimraf": "^2.5.4",
-						"tmp": "0.0.30",
-						"xml2js": "^0.4.17"
-					},
-					"dependencies": {
-						"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"
-							}
-						}
-					}
-				},
-				"semver": {
-					"version": "7.3.5",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-					"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"send": {
-					"version": "0.17.1",
-					"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-					"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-					"dev": true,
-					"requires": {
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"destroy": "~1.0.4",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"etag": "~1.8.1",
-						"fresh": "0.5.2",
-						"http-errors": "~1.7.2",
-						"mime": "1.6.0",
-						"ms": "2.1.1",
-						"on-finished": "~2.3.0",
-						"range-parser": "~1.2.1",
-						"statuses": "~1.5.0"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "2.6.9",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-							"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-							"dev": true,
-							"requires": {
-								"ms": "2.0.0"
-							},
-							"dependencies": {
-								"ms": {
-									"version": "2.0.0",
-									"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-									"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-									"dev": true
-								}
-							}
-						},
-						"ms": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-							"dev": true
-						}
-					}
-				},
-				"serialize-error": {
-					"version": "8.1.0",
-					"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-8.1.0.tgz",
-					"integrity": "sha512-3NnuWfM6vBYoy5gZFvHiYsVbafvI9vZv/+jlIigFn4oP4zjNPK3LhcY0xSCgeb1a5L8jO71Mit9LlNoi2UfDDQ==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.20.2"
-					}
-				},
-				"serve-favicon": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
-					"integrity": "sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=",
-					"dev": true,
-					"requires": {
-						"etag": "~1.8.1",
-						"fresh": "0.5.2",
-						"ms": "2.1.1",
-						"parseurl": "~1.3.2",
-						"safe-buffer": "5.1.1"
-					},
-					"dependencies": {
-						"ms": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-							"dev": true
-						},
-						"safe-buffer": {
-							"version": "5.1.1",
-							"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-							"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-							"dev": true
-						}
-					}
-				},
-				"serve-static": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-					"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-					"dev": true,
-					"requires": {
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"parseurl": "~1.3.3",
-						"send": "0.17.1"
-					}
-				},
-				"set-blocking": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-					"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-					"dev": true
-				},
-				"set-immediate-shim": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
-					"integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
-					"dev": true
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"shared-preferences-builder": {
-					"version": "0.0.4",
-					"resolved": "https://registry.npmjs.org/shared-preferences-builder/-/shared-preferences-builder-0.0.4.tgz",
-					"integrity": "sha512-6yy1O1zVAY8HWVjsaJzFzkmvmktlSvqnjsYZpWJ0dUrFS5Rfn1a8P7h+7zyl9MTqUfSXeaE7De6Yymx3OszxlQ==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.4",
-						"xmlbuilder": "^9.0.1"
-					},
-					"dependencies": {
-						"xmlbuilder": {
-							"version": "9.0.7",
-							"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
-							"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=",
-							"dev": true
-						}
-					}
-				},
-				"shebang-command": {
-					"version": "1.2.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-					"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^1.0.0"
-					}
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-platform-ios/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli-plugin-metro": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-12.3.2.tgz",
+			"integrity": "sha512-FpFBwu+d2E7KRhYPTkKvQsWb2/JKsJv+t1tcqgQkn+oByhp+qGyXBobFB8/R3yYvRRDCSDhS+atWTJzk9TjM8g=="
+		},
+		"node_modules/@react-native-community/cli-server-api": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-server-api/-/cli-server-api-12.3.2.tgz",
+			"integrity": "sha512-iwa7EO9XFA/OjI5pPLLpI/6mFVqv8L73kNck3CNOJIUCCveGXBKK0VMyOkXaf/BYnihgQrXh+x5cxbDbggr7+Q==",
+			"dependencies": {
+				"@react-native-community/cli-debugger-ui": "12.3.2",
+				"@react-native-community/cli-tools": "12.3.2",
+				"compression": "^1.7.1",
+				"connect": "^3.6.5",
+				"errorhandler": "^1.5.1",
+				"nocache": "^3.0.1",
+				"pretty-format": "^26.6.2",
+				"serve-static": "^1.13.1",
+				"ws": "^7.5.1"
+			}
+		},
+		"node_modules/@react-native-community/cli-server-api/node_modules/@jest/types": {
+			"version": "26.6.2",
+			"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+			"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+			"dependencies": {
+				"@types/istanbul-lib-coverage": "^2.0.0",
+				"@types/istanbul-reports": "^3.0.0",
+				"@types/node": "*",
+				"@types/yargs": "^15.0.0",
+				"chalk": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 10.14.2"
+			}
+		},
+		"node_modules/@react-native-community/cli-server-api/node_modules/@types/yargs": {
+			"version": "15.0.19",
+			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz",
+			"integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==",
+			"dependencies": {
+				"@types/yargs-parser": "*"
+			}
+		},
+		"node_modules/@react-native-community/cli-server-api/node_modules/pretty-format": {
+			"version": "26.6.2",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+			"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+			"dependencies": {
+				"@jest/types": "^26.6.2",
+				"ansi-regex": "^5.0.0",
+				"ansi-styles": "^4.0.0",
+				"react-is": "^17.0.1"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@react-native-community/cli-server-api/node_modules/react-is": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+		},
+		"node_modules/@react-native-community/cli-tools": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-tools/-/cli-tools-12.3.2.tgz",
+			"integrity": "sha512-nDH7vuEicHI2TI0jac/DjT3fr977iWXRdgVAqPZFFczlbs7A8GQvEdGnZ1G8dqRUmg+kptw0e4hwczAOG89JzQ==",
+			"dependencies": {
+				"appdirsjs": "^1.2.4",
+				"chalk": "^4.1.2",
+				"find-up": "^5.0.0",
+				"mime": "^2.4.1",
+				"node-fetch": "^2.6.0",
+				"open": "^6.2.0",
+				"ora": "^5.4.1",
+				"semver": "^7.5.2",
+				"shell-quote": "^1.7.3",
+				"sudo-prompt": "^9.0.0"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/mime": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+			"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-tools/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli-types": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-12.3.2.tgz",
+			"integrity": "sha512-9D0UEFqLW8JmS16mjHJxUJWX8E+zJddrHILSH8AJHZ0NNHv4u2DXKdb0wFLMobFxGNxPT+VSOjc60fGvXzWHog==",
+			"dependencies": {
+				"joi": "^17.2.1"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/commander": {
+			"version": "9.5.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+			"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+			"engines": {
+				"node": "^12.20.0 || >=14"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native-community/cli/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native-community/slider": {
+			"version": "3.0.2-wp-5",
+			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
+			"integrity": "sha512-19yl9Em1mFKFLB9o3IO3VpBFw+U7cswjRk6cZ7kkhDCpDD3u0cpzkaIZK6NuFIPCLqOwU0MPtP+gonanN1JQKw==",
+			"workspaces": [
+				"src",
+				"example"
+			]
+		},
+		"node_modules/@react-native-masked-view/masked-view": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/@react-native-masked-view/masked-view/-/masked-view-0.3.0.tgz",
+			"integrity": "sha512-qLyoObcjzrkpNcoJjXquUePXfL1dXjHtuv+yX0zZ0Q4kG5yvVqd620+tSh7WbRoHkjpXhFBfLwvGhcWB2I0Lpw==",
+			"peerDependencies": {
+				"react": ">=16",
+				"react-native": ">=0.57"
+			}
+		},
+		"node_modules/@react-native/assets-registry": {
+			"version": "0.73.1",
+			"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.73.1.tgz",
+			"integrity": "sha512-2FgAbU7uKM5SbbW9QptPPZx8N9Ke2L7bsHb+EhAanZjFZunA9PaYtyjUQ1s7HD+zDVqOQIvjkpXSv7Kejd2tqg==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/babel-plugin-codegen": {
+			"version": "0.73.3",
+			"resolved": "https://registry.npmjs.org/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.73.3.tgz",
+			"integrity": "sha512-+zQrDDbz6lB48LyzFHxNCgXDCBHH+oTRdXAjikRcBUdeG9St9ABbYFLtb799zSxLOrCqFVyXqhJR2vlgLLEbcg==",
+			"dependencies": {
+				"@react-native/codegen": "0.73.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/babel-preset": {
+			"version": "0.73.10",
+			"resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.73.10.tgz",
+			"integrity": "sha512-LPxR9DZK1EtVSEm2+fpei/AWwzgyHfaY7fuX8wDiy2THRYc/56+v28IihN8g0IAbQH+gdjXVcshJRYfV6bh2gg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@babel/plugin-proposal-async-generator-functions": "^7.0.0",
+				"@babel/plugin-proposal-class-properties": "^7.18.0",
+				"@babel/plugin-proposal-export-default-from": "^7.0.0",
+				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.0",
+				"@babel/plugin-proposal-numeric-separator": "^7.0.0",
+				"@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+				"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+				"@babel/plugin-proposal-optional-chaining": "^7.20.0",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.0",
+				"@babel/plugin-syntax-export-default-from": "^7.0.0",
+				"@babel/plugin-syntax-flow": "^7.18.0",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
+				"@babel/plugin-syntax-optional-chaining": "^7.0.0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0",
+				"@babel/plugin-transform-async-to-generator": "^7.20.0",
+				"@babel/plugin-transform-block-scoping": "^7.0.0",
+				"@babel/plugin-transform-classes": "^7.0.0",
+				"@babel/plugin-transform-computed-properties": "^7.0.0",
+				"@babel/plugin-transform-destructuring": "^7.20.0",
+				"@babel/plugin-transform-flow-strip-types": "^7.20.0",
+				"@babel/plugin-transform-function-name": "^7.0.0",
+				"@babel/plugin-transform-literals": "^7.0.0",
+				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.0.0",
+				"@babel/plugin-transform-parameters": "^7.0.0",
+				"@babel/plugin-transform-react-display-name": "^7.0.0",
+				"@babel/plugin-transform-react-jsx": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-self": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-source": "^7.0.0",
+				"@babel/plugin-transform-runtime": "^7.0.0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
+				"@babel/plugin-transform-spread": "^7.0.0",
+				"@babel/plugin-transform-sticky-regex": "^7.0.0",
+				"@babel/plugin-transform-typescript": "^7.5.0",
+				"@babel/plugin-transform-unicode-regex": "^7.0.0",
+				"@babel/template": "^7.0.0",
+				"babel-plugin-transform-flow-enums": "^0.0.2",
+				"react-refresh": "^0.4.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/babel-preset/node_modules/react-refresh": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
+			"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/@react-native/codegen": {
+			"version": "0.73.2",
+			"resolved": "https://registry.npmjs.org/@react-native/codegen/-/codegen-0.73.2.tgz",
+			"integrity": "sha512-lfy8S7umhE3QLQG5ViC4wg5N1Z+E6RnaeIw8w1voroQsXXGPB72IBozh8dAHR3+ceTxIU0KX3A8OpJI8e1+HpQ==",
+			"dependencies": {
+				"@babel/parser": "^7.20.0",
+				"flow-parser": "^0.206.0",
+				"glob": "^7.1.1",
+				"invariant": "^2.2.4",
+				"jscodeshift": "^0.14.0",
+				"mkdirp": "^0.5.1",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/preset-env": "^7.1.6"
+			}
+		},
+		"node_modules/@react-native/codegen/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin": {
+			"version": "0.73.14",
+			"resolved": "https://registry.npmjs.org/@react-native/community-cli-plugin/-/community-cli-plugin-0.73.14.tgz",
+			"integrity": "sha512-KzIwsTvAJrXPtwhGOSm+OcJH1B8TpY8cS4xxzu/e2qv3a2n4VLePHTPAfco1tmvekV8OHWvvD9JSIX7i2fB1gg==",
+			"dependencies": {
+				"@react-native-community/cli-server-api": "12.3.2",
+				"@react-native-community/cli-tools": "12.3.2",
+				"@react-native/dev-middleware": "0.73.7",
+				"@react-native/metro-babel-transformer": "0.73.14",
+				"chalk": "^4.0.0",
+				"execa": "^5.1.1",
+				"metro": "^0.80.3",
+				"metro-config": "^0.80.3",
+				"metro-core": "^0.80.3",
+				"node-fetch": "^2.2.0",
+				"readline": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/@react-native/babel-preset": {
+			"version": "0.73.20",
+			"resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.73.20.tgz",
+			"integrity": "sha512-fU9NqkusbfFq71l4BWQfqqD/lLcLC0MZ++UYgieA3j8lIEppJTLVauv2RwtD2yltBkjebgYEC5Rwvt1l0MUBXw==",
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@babel/plugin-proposal-async-generator-functions": "^7.0.0",
+				"@babel/plugin-proposal-class-properties": "^7.18.0",
+				"@babel/plugin-proposal-export-default-from": "^7.0.0",
+				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.0",
+				"@babel/plugin-proposal-numeric-separator": "^7.0.0",
+				"@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+				"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+				"@babel/plugin-proposal-optional-chaining": "^7.20.0",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.0",
+				"@babel/plugin-syntax-export-default-from": "^7.0.0",
+				"@babel/plugin-syntax-flow": "^7.18.0",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
+				"@babel/plugin-syntax-optional-chaining": "^7.0.0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0",
+				"@babel/plugin-transform-async-to-generator": "^7.20.0",
+				"@babel/plugin-transform-block-scoping": "^7.0.0",
+				"@babel/plugin-transform-classes": "^7.0.0",
+				"@babel/plugin-transform-computed-properties": "^7.0.0",
+				"@babel/plugin-transform-destructuring": "^7.20.0",
+				"@babel/plugin-transform-flow-strip-types": "^7.20.0",
+				"@babel/plugin-transform-function-name": "^7.0.0",
+				"@babel/plugin-transform-literals": "^7.0.0",
+				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.0.0",
+				"@babel/plugin-transform-parameters": "^7.0.0",
+				"@babel/plugin-transform-private-methods": "^7.22.5",
+				"@babel/plugin-transform-private-property-in-object": "^7.22.11",
+				"@babel/plugin-transform-react-display-name": "^7.0.0",
+				"@babel/plugin-transform-react-jsx": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-self": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-source": "^7.0.0",
+				"@babel/plugin-transform-runtime": "^7.0.0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
+				"@babel/plugin-transform-spread": "^7.0.0",
+				"@babel/plugin-transform-sticky-regex": "^7.0.0",
+				"@babel/plugin-transform-typescript": "^7.5.0",
+				"@babel/plugin-transform-unicode-regex": "^7.0.0",
+				"@babel/template": "^7.0.0",
+				"@react-native/babel-plugin-codegen": "0.73.3",
+				"babel-plugin-transform-flow-enums": "^0.0.2",
+				"react-refresh": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/@react-native/metro-babel-transformer": {
+			"version": "0.73.14",
+			"resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.73.14.tgz",
+			"integrity": "sha512-5wLeYw/lormpSqYfI9H/geZ/EtPmi+x5qLkEit15Q/70hkzYo/M+aWztUtbOITfgTEOP8d6ybROzoGsqgyZLcw==",
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@react-native/babel-preset": "0.73.20",
+				"hermes-parser": "0.15.0",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/community-cli-plugin/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@react-native/debugger-frontend": {
+			"version": "0.73.3",
+			"resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.73.3.tgz",
+			"integrity": "sha512-RgEKnWuoo54dh7gQhV7kvzKhXZEhpF9LlMdZolyhGxHsBqZ2gXdibfDlfcARFFifPIiaZ3lXuOVVa4ei+uPgTw==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/dev-middleware": {
+			"version": "0.73.7",
+			"resolved": "https://registry.npmjs.org/@react-native/dev-middleware/-/dev-middleware-0.73.7.tgz",
+			"integrity": "sha512-BZXpn+qKp/dNdr4+TkZxXDttfx8YobDh8MFHsMk9usouLm22pKgFIPkGBV0X8Do4LBkFNPGtrnsKkWk/yuUXKg==",
+			"dependencies": {
+				"@isaacs/ttlcache": "^1.4.1",
+				"@react-native/debugger-frontend": "0.73.3",
+				"chrome-launcher": "^0.15.2",
+				"chromium-edge-launcher": "^1.0.0",
+				"connect": "^3.6.5",
+				"debug": "^2.2.0",
+				"node-fetch": "^2.2.0",
+				"open": "^7.0.3",
+				"serve-static": "^1.13.1",
+				"temp-dir": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/dev-middleware/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/@react-native/dev-middleware/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/dev-middleware/node_modules/open": {
+			"version": "7.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+			"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+			"dependencies": {
+				"is-docker": "^2.0.0",
+				"is-wsl": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-native/dev-middleware/node_modules/temp-dir": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+			"integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@react-native/gradle-plugin": {
+			"version": "0.73.4",
+			"resolved": "https://registry.npmjs.org/@react-native/gradle-plugin/-/gradle-plugin-0.73.4.tgz",
+			"integrity": "sha512-PMDnbsZa+tD55Ug+W8CfqXiGoGneSSyrBZCMb5JfiB3AFST3Uj5e6lw8SgI/B6SKZF7lG0BhZ6YHZsRZ5MlXmg==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/js-polyfills": {
+			"version": "0.73.1",
+			"resolved": "https://registry.npmjs.org/@react-native/js-polyfills/-/js-polyfills-0.73.1.tgz",
+			"integrity": "sha512-ewMwGcumrilnF87H4jjrnvGZEaPFCAC4ebraEK+CurDDmwST/bIicI4hrOAv+0Z0F7DEK4O4H7r8q9vH7IbN4g==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/metro-babel-transformer": {
+			"version": "0.73.10",
+			"resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.73.10.tgz",
+			"integrity": "sha512-g0q12s1VcrhI4ab9ZQzFHmvjkDW5PYdJd3LiyhIO3OAWLD7iNLWL5tJe9iA3n8rxbanmf1oauqlNY1UmkxhAvQ==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@react-native/babel-preset": "*",
+				"babel-preset-fbjs": "^3.4.0",
+				"hermes-parser": "0.15.0",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/metro-config": {
+			"version": "0.73.4",
+			"resolved": "https://registry.npmjs.org/@react-native/metro-config/-/metro-config-0.73.4.tgz",
+			"integrity": "sha512-4IpWb9InOY23ssua6z/ho2B4uRqF4QaNHGg4aV3D/og5yiVF39GEm/REHU36i+KoHRO3GcB6DrI7N9KrcvgGBw==",
+			"dev": true,
+			"dependencies": {
+				"@react-native/js-polyfills": "0.73.1",
+				"@react-native/metro-babel-transformer": "0.73.14",
+				"metro-config": "^0.80.3",
+				"metro-runtime": "^0.80.3"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@react-native/metro-config/node_modules/@react-native/babel-preset": {
+			"version": "0.73.20",
+			"resolved": "https://registry.npmjs.org/@react-native/babel-preset/-/babel-preset-0.73.20.tgz",
+			"integrity": "sha512-fU9NqkusbfFq71l4BWQfqqD/lLcLC0MZ++UYgieA3j8lIEppJTLVauv2RwtD2yltBkjebgYEC5Rwvt1l0MUBXw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@babel/plugin-proposal-async-generator-functions": "^7.0.0",
+				"@babel/plugin-proposal-class-properties": "^7.18.0",
+				"@babel/plugin-proposal-export-default-from": "^7.0.0",
+				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.0",
+				"@babel/plugin-proposal-numeric-separator": "^7.0.0",
+				"@babel/plugin-proposal-object-rest-spread": "^7.20.0",
+				"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
+				"@babel/plugin-proposal-optional-chaining": "^7.20.0",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.0",
+				"@babel/plugin-syntax-export-default-from": "^7.0.0",
+				"@babel/plugin-syntax-flow": "^7.18.0",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
+				"@babel/plugin-syntax-optional-chaining": "^7.0.0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0",
+				"@babel/plugin-transform-async-to-generator": "^7.20.0",
+				"@babel/plugin-transform-block-scoping": "^7.0.0",
+				"@babel/plugin-transform-classes": "^7.0.0",
+				"@babel/plugin-transform-computed-properties": "^7.0.0",
+				"@babel/plugin-transform-destructuring": "^7.20.0",
+				"@babel/plugin-transform-flow-strip-types": "^7.20.0",
+				"@babel/plugin-transform-function-name": "^7.0.0",
+				"@babel/plugin-transform-literals": "^7.0.0",
+				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.0.0",
+				"@babel/plugin-transform-parameters": "^7.0.0",
+				"@babel/plugin-transform-private-methods": "^7.22.5",
+				"@babel/plugin-transform-private-property-in-object": "^7.22.11",
+				"@babel/plugin-transform-react-display-name": "^7.0.0",
+				"@babel/plugin-transform-react-jsx": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-self": "^7.0.0",
+				"@babel/plugin-transform-react-jsx-source": "^7.0.0",
+				"@babel/plugin-transform-runtime": "^7.0.0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
+				"@babel/plugin-transform-spread": "^7.0.0",
+				"@babel/plugin-transform-sticky-regex": "^7.0.0",
+				"@babel/plugin-transform-typescript": "^7.5.0",
+				"@babel/plugin-transform-unicode-regex": "^7.0.0",
+				"@babel/template": "^7.0.0",
+				"@react-native/babel-plugin-codegen": "0.73.3",
+				"babel-plugin-transform-flow-enums": "^0.0.2",
+				"react-refresh": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/metro-config/node_modules/@react-native/metro-babel-transformer": {
+			"version": "0.73.14",
+			"resolved": "https://registry.npmjs.org/@react-native/metro-babel-transformer/-/metro-babel-transformer-0.73.14.tgz",
+			"integrity": "sha512-5wLeYw/lormpSqYfI9H/geZ/EtPmi+x5qLkEit15Q/70hkzYo/M+aWztUtbOITfgTEOP8d6ybROzoGsqgyZLcw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@react-native/babel-preset": "0.73.20",
+				"hermes-parser": "0.15.0",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@babel/core": "*"
+			}
+		},
+		"node_modules/@react-native/normalize-color": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-2.1.0.tgz",
+			"integrity": "sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA=="
+		},
+		"node_modules/@react-native/normalize-colors": {
+			"version": "0.73.2",
+			"resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.73.2.tgz",
+			"integrity": "sha512-bRBcb2T+I88aG74LMVHaKms2p/T8aQd8+BZ7LuuzXlRfog1bMWWn/C5i0HVuvW4RPtXQYgIlGiXVDy9Ir1So/w=="
+		},
+		"node_modules/@react-native/virtualized-lists": {
+			"version": "0.73.4",
+			"resolved": "https://registry.npmjs.org/@react-native/virtualized-lists/-/virtualized-lists-0.73.4.tgz",
+			"integrity": "sha512-HpmLg1FrEiDtrtAbXiwCgXFYyloK/dOIPIuWW3fsqukwJEWAiTzm1nXGJ7xPU5XTHiWZ4sKup5Ebaj8z7iyWog==",
+			"dependencies": {
+				"invariant": "^2.2.4",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"react-native": "*"
+			}
+		},
+		"node_modules/@react-navigation/core": {
+			"version": "5.12.0",
+			"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.12.0.tgz",
+			"integrity": "sha512-CTmYrFXCZwInN40CpEzkPxhrpzujj20qvsUgpH05+oO1flwsnaJsyBfYawIcTS62/1/Z6SAM7iW5PbKk+qw9iQ==",
+			"dependencies": {
+				"@react-navigation/routers": "^5.4.9",
+				"escape-string-regexp": "^4.0.0",
+				"nanoid": "^3.1.9",
+				"query-string": "^6.13.1",
+				"react-is": "^16.13.0",
+				"use-subscription": "^1.4.0"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
+		"node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-navigation/elements": {
+			"version": "1.3.18",
+			"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.18.tgz",
+			"integrity": "sha512-/0hwnJkrr415yP0Hf4PjUKgGyfshrvNUKFXN85Mrt1gY49hy9IwxZgrrxlh0THXkPeq8q4VWw44eHDfAcQf20Q==",
+			"peerDependencies": {
+				"@react-navigation/native": "^6.0.0",
+				"react": "*",
+				"react-native": "*",
+				"react-native-safe-area-context": ">= 3.0.0"
+			}
+		},
+		"node_modules/@react-navigation/native": {
+			"version": "6.0.14",
+			"resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.14.tgz",
+			"integrity": "sha512-Z95bJrRkZerBJq6Qc/xjA/kibPpB+UvPeMWS1CBhRF8FaX1483UdHqPqSbW879tPwjP2R4XfoA4dtoEHswrOjA==",
+			"dependencies": {
+				"@react-navigation/core": "^6.4.1",
+				"escape-string-regexp": "^4.0.0",
+				"fast-deep-equal": "^3.1.3",
+				"nanoid": "^3.1.23"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/@react-navigation/native/node_modules/@react-navigation/core": {
+			"version": "6.4.17",
+			"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.17.tgz",
+			"integrity": "sha512-Nd76EpomzChWAosGqWOYE3ItayhDzIEzzZsT7PfGcRFDgW5miHV2t4MZcq9YIK4tzxZjVVpYbIynOOQQd1e0Cg==",
+			"license": "MIT",
+			"dependencies": {
+				"@react-navigation/routers": "^6.1.9",
+				"escape-string-regexp": "^4.0.0",
+				"nanoid": "^3.1.23",
+				"query-string": "^7.1.3",
+				"react-is": "^16.13.0",
+				"use-latest-callback": "^0.2.1"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
+		"node_modules/@react-navigation/native/node_modules/@react-navigation/routers": {
+			"version": "6.1.9",
+			"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+			"integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
+			"dependencies": {
+				"nanoid": "^3.1.23"
+			}
+		},
+		"node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-navigation/native/node_modules/query-string": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+			"integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+			"dependencies": {
+				"decode-uri-component": "^0.2.2",
+				"filter-obj": "^1.1.0",
+				"split-on-first": "^1.0.0",
+				"strict-uri-encode": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@react-navigation/routers": {
+			"version": "5.4.9",
+			"resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.9.tgz",
+			"integrity": "sha512-dYD5qrIKUmuBEp+O98hB0tDYpEsGQgCQFQgMEoFKBmVVhx2JnJJ1zxRjU7xWcCU4VdBA8IOowgHQHJsVNKYyrg==",
+			"dependencies": {
+				"nanoid": "^3.1.9"
+			}
+		},
+		"node_modules/@react-navigation/stack": {
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.5.tgz",
+			"integrity": "sha512-G706Ow+8fhiLT5Cf48566YsjboU5h5ll9nva90xX3br7V6x0JMoGMvXjvbORZyzLuUytQO3mf0T3nVUuO52vZQ==",
+			"dependencies": {
+				"@react-navigation/elements": "^1.3.7",
+				"color": "^4.2.3",
+				"warn-once": "^0.1.0"
+			},
+			"peerDependencies": {
+				"@react-navigation/native": "^6.0.0",
+				"react": "*",
+				"react-native": "*",
+				"react-native-gesture-handler": ">= 1.0.0",
+				"react-native-safe-area-context": ">= 3.0.0",
+				"react-native-screens": ">= 3.0.0"
+			}
+		},
+		"node_modules/@react-spring/animated": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.5.tgz",
+			"integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==",
+			"dependencies": {
+				"@react-spring/shared": "~9.5.5",
+				"@react-spring/types": "~9.5.5"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@react-spring/core": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.5.tgz",
+			"integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==",
+			"dependencies": {
+				"@react-spring/animated": "~9.5.5",
+				"@react-spring/rafz": "~9.5.5",
+				"@react-spring/shared": "~9.5.5",
+				"@react-spring/types": "~9.5.5"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/react-spring/donate"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@react-spring/rafz": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.5.tgz",
+			"integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw=="
+		},
+		"node_modules/@react-spring/shared": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.5.tgz",
+			"integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==",
+			"dependencies": {
+				"@react-spring/rafz": "~9.5.5",
+				"@react-spring/types": "~9.5.5"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@react-spring/types": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.5.tgz",
+			"integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg=="
+		},
+		"node_modules/@react-spring/web": {
+			"version": "9.5.5",
+			"resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.5.tgz",
+			"integrity": "sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==",
+			"dependencies": {
+				"@react-spring/animated": "~9.5.5",
+				"@react-spring/core": "~9.5.5",
+				"@react-spring/shared": "~9.5.5",
+				"@react-spring/types": "~9.5.5"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@samverschueren/stream-to-observable": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
+			"integrity": "sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==",
+			"dev": true,
+			"dependencies": {
+				"any-observable": "^0.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"peerDependenciesMeta": {
+				"rxjs": {
+					"optional": true
 				},
-				"shebang-regex": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-					"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-					"dev": true
+				"zen-observable": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@sentry/core": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz",
+			"integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==",
+			"dependencies": {
+				"@sentry/hub": "6.19.7",
+				"@sentry/minimal": "6.19.7",
+				"@sentry/types": "6.19.7",
+				"@sentry/utils": "6.19.7",
+				"tslib": "^1.9.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/core/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+		},
+		"node_modules/@sentry/hub": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz",
+			"integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==",
+			"dependencies": {
+				"@sentry/types": "6.19.7",
+				"@sentry/utils": "6.19.7",
+				"tslib": "^1.9.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/hub/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+		},
+		"node_modules/@sentry/minimal": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz",
+			"integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==",
+			"dependencies": {
+				"@sentry/hub": "6.19.7",
+				"@sentry/types": "6.19.7",
+				"tslib": "^1.9.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/minimal/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+		},
+		"node_modules/@sentry/node": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/node/-/node-6.19.7.tgz",
+			"integrity": "sha512-gtmRC4dAXKODMpHXKfrkfvyBL3cI8y64vEi3fDD046uqYcrWdgoQsffuBbxMAizc6Ez1ia+f0Flue6p15Qaltg==",
+			"dependencies": {
+				"@sentry/core": "6.19.7",
+				"@sentry/hub": "6.19.7",
+				"@sentry/types": "6.19.7",
+				"@sentry/utils": "6.19.7",
+				"cookie": "^0.4.1",
+				"https-proxy-agent": "^5.0.0",
+				"lru_map": "^0.3.3",
+				"tslib": "^1.9.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/node/node_modules/cookie": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+			"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/@sentry/node/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+		},
+		"node_modules/@sentry/types": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz",
+			"integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/utils": {
+			"version": "6.19.7",
+			"resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz",
+			"integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==",
+			"dependencies": {
+				"@sentry/types": "6.19.7",
+				"tslib": "^1.9.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@sentry/utils/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+		},
+		"node_modules/@sideway/address": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+			"integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+			"dependencies": {
+				"@hapi/hoek": "^9.0.0"
+			}
+		},
+		"node_modules/@sideway/formula": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+			"integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+		},
+		"node_modules/@sideway/pinpoint": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+			"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+		},
+		"node_modules/@sidvind/better-ajv-errors": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@sidvind/better-ajv-errors/-/better-ajv-errors-2.1.0.tgz",
+			"integrity": "sha512-JuIb009FhHuL9priFBho2kv7QmZOydj0LgYvj+h1t0mMCmhM/YmQNRlJR5wVtBZya6wrVFK5Hi5TIbv5BKEx7w==",
+			"dev": true,
+			"dependencies": {
+				"@babel/code-frame": "^7.16.0",
+				"chalk": "^4.1.0"
+			},
+			"engines": {
+				"node": ">= 14.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "4.11.8 - 8"
+			}
+		},
+		"node_modules/@sigstore/bundle": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-1.0.0.tgz",
+			"integrity": "sha512-yLvrWDOh6uMOUlFCTJIZEnwOT9Xte7NPXUqVexEKGSF5XtBAuSg5du0kn3dRR0p47a4ah10Y0mNt8+uyeQXrBQ==",
+			"dev": true,
+			"dependencies": {
+				"@sigstore/protobuf-specs": "^0.2.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@sigstore/protobuf-specs": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.2.0.tgz",
+			"integrity": "sha512-8ZhZKAVfXjIspDWwm3D3Kvj0ddbJ0HqDZ/pOs5cx88HpT8mVsotFrg7H1UMnXOuDHz6Zykwxn4mxG3QLuN+RUg==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@sigstore/tuf": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@sigstore/tuf/-/tuf-1.0.3.tgz",
+			"integrity": "sha512-2bRovzs0nJZFlCN3rXirE4gwxCn97JNjMmwpecqlbgV9WcxX7WRuIrgzx/X7Ib7MYRbyUTpBYE0s2x6AmZXnlg==",
+			"dev": true,
+			"dependencies": {
+				"@sigstore/protobuf-specs": "^0.2.0",
+				"tuf-js": "^1.1.7"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@sinclair/typebox": {
+			"version": "0.27.8",
+			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+			"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
+		},
+		"node_modules/@sindresorhus/is": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+			"integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/is?sponsor=1"
+			}
+		},
+		"node_modules/@sinonjs/commons": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.0.tgz",
+			"integrity": "sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==",
+			"dependencies": {
+				"type-detect": "4.0.8"
+			}
+		},
+		"node_modules/@sinonjs/fake-timers": {
+			"version": "10.3.0",
+			"resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+			"integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+			"dependencies": {
+				"@sinonjs/commons": "^3.0.0"
+			}
+		},
+		"node_modules/@sliphua/lilconfig-ts-loader": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/@sliphua/lilconfig-ts-loader/-/lilconfig-ts-loader-3.2.2.tgz",
+			"integrity": "sha512-nX2aBwAykiG50fSUzK9eyA5UvWcrEKzA0ZzCq9mLwHMwpKxM+U05YH8PHba1LJrbeZ7R1HSjJagWKMqFyq8cxw==",
+			"dev": true,
+			"dependencies": {
+				"lodash.get": "^4",
+				"make-error": "^1",
+				"ts-node": "^9",
+				"tslib": "^2"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"lilconfig": ">=2"
+			}
+		},
+		"node_modules/@storybook/addon-a11y": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.15.tgz",
+			"integrity": "sha512-8PxRMBJUSxNoceo2IYXFyZp3VU+/ONK/DsD0dj/fVrv7izFrS8aw2GWSsSMK8xAbEUpANXWMKGaSyvrRFVgsVQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/addon-highlight": "7.6.15",
+				"axe-core": "^4.2.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/addon-actions": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.15.tgz",
+			"integrity": "sha512-2Jfvbahe/tmq1iNnNxmcP0JnX0rqCuijjXXai9yMDV3koIMawn6t88MPVrdcso5ch/fxE45522nZqA3SZJbM4g==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/core-events": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"@types/uuid": "^9.0.1",
+				"dequal": "^2.0.2",
+				"polished": "^4.2.2",
+				"uuid": "^9.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/addon-actions/node_modules/@types/uuid": {
+			"version": "9.0.8",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+			"integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+			"dev": true
+		},
+		"node_modules/@storybook/addon-controls": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.6.15.tgz",
+			"integrity": "sha512-HXcG/Lr4ri7WUFz14Y5lEBTA1XmKy0E/DepW88XVy6YNsTpERVWEBcvjKoLAU1smKrfhVto96hK2AVFL3A8EBQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/blocks": "7.6.15",
+				"lodash": "^4.17.21",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/addon-docs": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.15.tgz",
+			"integrity": "sha512-UPODqO+mrYaKyTSAtfRslxOFgSP/v/5vfDx896pbNTC4Sf8xLytoudw4I14hzkHmRdXiOnd21FqXJfmF/Onsvw==",
+			"dev": true,
+			"dependencies": {
+				"@jest/transform": "^29.3.1",
+				"@mdx-js/react": "^2.1.5",
+				"@storybook/blocks": "7.6.15",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/components": "7.6.15",
+				"@storybook/csf-plugin": "7.6.15",
+				"@storybook/csf-tools": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"@storybook/mdx2-csf": "^1.0.0",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/postinstall": "7.6.15",
+				"@storybook/preview-api": "7.6.15",
+				"@storybook/react-dom-shim": "7.6.15",
+				"@storybook/theming": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"fs-extra": "^11.1.0",
+				"remark-external-links": "^8.0.0",
+				"remark-slug": "^6.0.0",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@storybook/addon-docs/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/addon-docs/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/addon-docs/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/addon-highlight": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.15.tgz",
+			"integrity": "sha512-ptidWZJJcEM83YsxCjf+m1q8Rr9sN8piJ4PJlM2vyc4MLZY4q6htb1JJFeq3ov1Iz6SY9KjKc/zOkWo4L54nxw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/global": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/addon-toolbars": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.15.tgz",
+			"integrity": "sha512-QougKS2eABB5Jd332i9tBpKgh2lN4aaqXkvmVC5egT5dOuJ9IeuZbGwiALef/uf1f3IuyUP41So9l2dI4u19aw==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/addon-viewport": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.15.tgz",
+			"integrity": "sha512-0esg0+onJftU2prD3n/sbxBTrTOIGQnZhbrKPP+/S26dVHuYaR/65XdwpRgXNY5PHK2yjU78HxiJP+Kyu75ntw==",
+			"dev": true,
+			"dependencies": {
+				"memoizerific": "^1.11.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/blocks": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.15.tgz",
+			"integrity": "sha512-ODP7AVh2iIGblI5WKGokWSHbp9YQHc+Uce7JCGcnDbNavoy64Z6R6G+wXzF5jfl7xQlbhQ8yQCuSSL4GNdYTeA==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/channels": "7.6.15",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/components": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/docs-tools": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"@storybook/manager-api": "7.6.15",
+				"@storybook/preview-api": "7.6.15",
+				"@storybook/theming": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/lodash": "^4.14.167",
+				"color-convert": "^2.0.1",
+				"dequal": "^2.0.2",
+				"lodash": "^4.17.21",
+				"markdown-to-jsx": "^7.1.8",
+				"memoizerific": "^1.11.3",
+				"polished": "^4.2.2",
+				"react-colorful": "^5.1.2",
+				"telejson": "^7.2.0",
+				"tocbot": "^4.20.1",
+				"ts-dedent": "^2.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@storybook/blocks/node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/@storybook/blocks/node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
+		"node_modules/@storybook/builder-manager": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.15.tgz",
+			"integrity": "sha512-vfpfCywiasyP7vtbgLJhjssBEwUjZhBsRsubDAzumgOochPiKKPNwsSc5NU/4ZIGaC5zRO26kUaUqFIbJdTEUQ==",
+			"dev": true,
+			"dependencies": {
+				"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+				"@storybook/core-common": "7.6.15",
+				"@storybook/manager": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@types/ejs": "^3.1.1",
+				"@types/find-cache-dir": "^3.2.1",
+				"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
+				"browser-assert": "^1.2.1",
+				"ejs": "^3.1.8",
+				"esbuild": "^0.18.0",
+				"esbuild-plugin-alias": "^0.2.1",
+				"express": "^4.17.3",
+				"find-cache-dir": "^3.0.0",
+				"fs-extra": "^11.1.0",
+				"process": "^0.11.10",
+				"util": "^0.12.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/find-cache-dir": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+			"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+			"dev": true,
+			"dependencies": {
+				"commondir": "^1.0.1",
+				"make-dir": "^3.0.2",
+				"pkg-dir": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/pkg-dir": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+			"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/builder-manager/node_modules/util": {
+			"version": "0.12.5",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"is-arguments": "^1.0.4",
+				"is-generator-function": "^1.0.7",
+				"is-typed-array": "^1.1.3",
+				"which-typed-array": "^1.1.2"
+			}
+		},
+		"node_modules/@storybook/builder-webpack5": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-7.6.15.tgz",
+			"integrity": "sha512-HF+TSK/eU2ld8uQ8VWgcAIzOQ2hjnEkzup363vGZkYUfsHsVbjMpZgf+foDjI4LZNfQ/RjcVEZxqJqIbpM0Sjg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.23.2",
+				"@storybook/channels": "7.6.15",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-common": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/core-webpack": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/preview": "7.6.15",
+				"@storybook/preview-api": "7.6.15",
+				"@swc/core": "^1.3.82",
+				"@types/node": "^18.0.0",
+				"@types/semver": "^7.3.4",
+				"babel-loader": "^9.0.0",
+				"browser-assert": "^1.2.1",
+				"case-sensitive-paths-webpack-plugin": "^2.4.0",
+				"cjs-module-lexer": "^1.2.3",
+				"constants-browserify": "^1.0.0",
+				"css-loader": "^6.7.1",
+				"es-module-lexer": "^1.4.1",
+				"express": "^4.17.3",
+				"fork-ts-checker-webpack-plugin": "^8.0.0",
+				"fs-extra": "^11.1.0",
+				"html-webpack-plugin": "^5.5.0",
+				"magic-string": "^0.30.5",
+				"path-browserify": "^1.0.1",
+				"process": "^0.11.10",
+				"semver": "^7.3.7",
+				"style-loader": "^3.3.1",
+				"swc-loader": "^0.2.3",
+				"terser-webpack-plugin": "^5.3.1",
+				"ts-dedent": "^2.0.0",
+				"url": "^0.11.0",
+				"util": "^0.12.4",
+				"util-deprecate": "^1.0.2",
+				"webpack": "5",
+				"webpack-dev-middleware": "^6.1.1",
+				"webpack-hot-middleware": "^2.25.1",
+				"webpack-virtual-modules": "^0.5.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/css-loader": {
+			"version": "6.11.0",
+			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
+			"integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
+			"dev": true,
+			"dependencies": {
+				"icss-utils": "^5.1.0",
+				"postcss": "^8.4.33",
+				"postcss-modules-extract-imports": "^3.1.0",
+				"postcss-modules-local-by-default": "^4.0.5",
+				"postcss-modules-scope": "^3.2.0",
+				"postcss-modules-values": "^4.0.0",
+				"postcss-value-parser": "^4.2.0",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || 1.x",
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
 				},
-				"shell-quote": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-					"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-					"dev": true
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/path-browserify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+			"integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+			"dev": true
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+			"dev": true
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/style-loader": {
+			"version": "3.3.4",
+			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
+			"integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
+			"dev": true,
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/builder-webpack5/node_modules/util": {
+			"version": "0.12.5",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"is-arguments": "^1.0.4",
+				"is-generator-function": "^1.0.7",
+				"is-typed-array": "^1.1.3",
+				"which-typed-array": "^1.1.2"
+			}
+		},
+		"node_modules/@storybook/channels": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.15.tgz",
+			"integrity": "sha512-UPDYRzGkygYFa8QUpEiumWrvZm4u4RKVzgiBt9C4RmHORqkkZzL9LXhaZJp2SmIz1ND5gx6KR5ze8ZnAdwxxoQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"qs": "^6.10.0",
+				"telejson": "^7.2.0",
+				"tiny-invariant": "^1.3.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/cli": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.15.tgz",
+			"integrity": "sha512-2QRqCyVGDSkraHxX2JPYkkFccbu5Uo+JYFaFJo4vmMXzDurjWON+Ga2B8FCTd4A8P4C02Ca/79jgQoyBB3xoew==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.23.2",
+				"@babel/preset-env": "^7.23.2",
+				"@babel/types": "^7.23.0",
+				"@ndelangen/get-tarball": "^3.0.7",
+				"@storybook/codemod": "7.6.15",
+				"@storybook/core-common": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/core-server": "7.6.15",
+				"@storybook/csf-tools": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/telemetry": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/semver": "^7.3.4",
+				"@yarnpkg/fslib": "2.10.3",
+				"@yarnpkg/libzip": "2.3.0",
+				"chalk": "^4.1.0",
+				"commander": "^6.2.1",
+				"cross-spawn": "^7.0.3",
+				"detect-indent": "^6.1.0",
+				"envinfo": "^7.7.3",
+				"execa": "^5.0.0",
+				"express": "^4.17.3",
+				"find-up": "^5.0.0",
+				"fs-extra": "^11.1.0",
+				"get-npm-tarball-url": "^2.0.3",
+				"get-port": "^5.1.1",
+				"giget": "^1.0.0",
+				"globby": "^11.0.2",
+				"jscodeshift": "^0.15.1",
+				"leven": "^3.1.0",
+				"ora": "^5.4.1",
+				"prettier": "^2.8.0",
+				"prompts": "^2.4.0",
+				"puppeteer-core": "^2.1.1",
+				"read-pkg-up": "^7.0.1",
+				"semver": "^7.3.7",
+				"strip-json-comments": "^3.0.1",
+				"tempy": "^1.0.1",
+				"ts-dedent": "^2.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"bin": {
+				"getstorybook": "bin/index.js",
+				"sb": "bin/index.js"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/agent-base": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+			"integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dev": true,
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/commander": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+			"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/detect-indent": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/https-proxy-agent": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+			"integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+			"dev": true,
+			"dependencies": {
+				"agent-base": "5",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/jscodeshift": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.2.tgz",
+			"integrity": "sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.23.0",
+				"@babel/parser": "^7.23.0",
+				"@babel/plugin-transform-class-properties": "^7.22.5",
+				"@babel/plugin-transform-modules-commonjs": "^7.23.0",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.22.11",
+				"@babel/plugin-transform-optional-chaining": "^7.23.0",
+				"@babel/plugin-transform-private-methods": "^7.22.5",
+				"@babel/preset-flow": "^7.22.15",
+				"@babel/preset-typescript": "^7.23.0",
+				"@babel/register": "^7.22.15",
+				"babel-core": "^7.0.0-bridge.0",
+				"chalk": "^4.1.2",
+				"flow-parser": "0.*",
+				"graceful-fs": "^4.2.4",
+				"micromatch": "^4.0.4",
+				"neo-async": "^2.5.0",
+				"node-dir": "^0.1.17",
+				"recast": "^0.23.3",
+				"temp": "^0.8.4",
+				"write-file-atomic": "^2.3.0"
+			},
+			"bin": {
+				"jscodeshift": "bin/jscodeshift.js"
+			},
+			"peerDependencies": {
+				"@babel/preset-env": "^7.1.6"
+			},
+			"peerDependenciesMeta": {
+				"@babel/preset-env": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/mime": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+			"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+			"dev": true,
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dev": true,
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/prettier": {
+			"version": "2.8.8",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+			"dev": true,
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/puppeteer-core": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-2.1.1.tgz",
+			"integrity": "sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==",
+			"dev": true,
+			"dependencies": {
+				"@types/mime-types": "^2.1.0",
+				"debug": "^4.1.0",
+				"extract-zip": "^1.6.6",
+				"https-proxy-agent": "^4.0.0",
+				"mime": "^2.0.3",
+				"mime-types": "^2.1.25",
+				"progress": "^2.0.1",
+				"proxy-from-env": "^1.0.0",
+				"rimraf": "^2.6.1",
+				"ws": "^6.1.0"
+			},
+			"engines": {
+				"node": ">=8.16.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/recast": {
+			"version": "0.23.9",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
+			"integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ast-types": "^0.16.1",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tiny-invariant": "^1.3.3",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@storybook/cli/node_modules/ws": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+			"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"async-limiter": "~1.0.0"
+			}
+		},
+		"node_modules/@storybook/client-logger": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.15.tgz",
+			"integrity": "sha512-n+K8IqnombqiQNnywVovS+lK61tvv/XSfgPt0cgvoF/hJZB0VDOMRjWsV+v9qQpj1TQEl1lLWeJwZMthTWupJA==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/global": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/codemod": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.15.tgz",
+			"integrity": "sha512-NiEbTLCdacj6TMxC7G49IImXeMzkG8wpPr8Ayxm9HeG6q5UkiF5/DiZdqbJm2zaosOsOKWwvXg1t6Pq6Nivytg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.23.2",
+				"@babel/preset-env": "^7.23.2",
+				"@babel/types": "^7.23.0",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/csf-tools": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/cross-spawn": "^6.0.2",
+				"cross-spawn": "^7.0.3",
+				"globby": "^11.0.2",
+				"jscodeshift": "^0.15.1",
+				"lodash": "^4.17.21",
+				"prettier": "^2.8.0",
+				"recast": "^0.23.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/jscodeshift": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.15.2.tgz",
+			"integrity": "sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.23.0",
+				"@babel/parser": "^7.23.0",
+				"@babel/plugin-transform-class-properties": "^7.22.5",
+				"@babel/plugin-transform-modules-commonjs": "^7.23.0",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.22.11",
+				"@babel/plugin-transform-optional-chaining": "^7.23.0",
+				"@babel/plugin-transform-private-methods": "^7.22.5",
+				"@babel/preset-flow": "^7.22.15",
+				"@babel/preset-typescript": "^7.23.0",
+				"@babel/register": "^7.22.15",
+				"babel-core": "^7.0.0-bridge.0",
+				"chalk": "^4.1.2",
+				"flow-parser": "0.*",
+				"graceful-fs": "^4.2.4",
+				"micromatch": "^4.0.4",
+				"neo-async": "^2.5.0",
+				"node-dir": "^0.1.17",
+				"recast": "^0.23.3",
+				"temp": "^0.8.4",
+				"write-file-atomic": "^2.3.0"
+			},
+			"bin": {
+				"jscodeshift": "bin/jscodeshift.js"
+			},
+			"peerDependencies": {
+				"@babel/preset-env": "^7.1.6"
+			},
+			"peerDependenciesMeta": {
+				"@babel/preset-env": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/prettier": {
+			"version": "2.8.8",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+			"dev": true,
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/recast": {
+			"version": "0.23.9",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
+			"integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ast-types": "^0.16.1",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tiny-invariant": "^1.3.3",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/codemod/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@storybook/components": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.15.tgz",
+			"integrity": "sha512-xD+maP7+C9HeZXi2vJ+uK9hXN4S4spP4uDj9pyZ9yViKb+ztEO6WpovUMT8WRQ0mMegWyLXkx3zqu43hZvXM1g==",
+			"dev": true,
+			"dependencies": {
+				"@radix-ui/react-select": "^1.2.2",
+				"@radix-ui/react-toolbar": "^1.0.4",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/global": "^5.0.0",
+				"@storybook/theming": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"memoizerific": "^1.11.3",
+				"use-resize-observer": "^9.1.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@storybook/core-client": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.15.tgz",
+			"integrity": "sha512-jwWol+zo+ItKBzPm9i80bEL6seHMsV0wKSaViVMQ4TqHtEbNeFE8sFEc2NTr18VNBnQOdlQPnEWmdboXBUrGcA==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/preview-api": "7.6.15"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/core-common": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.15.tgz",
+			"integrity": "sha512-VGmcLJ5U1r1s8/YnLbKcyB4GnNL+/sZIPqwlcSKzDXO76HoVFv1kywf7PbASote7P3gdhLSxBdg95LH2bdIbmw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/core-events": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/find-cache-dir": "^3.2.1",
+				"@types/node": "^18.0.0",
+				"@types/node-fetch": "^2.6.4",
+				"@types/pretty-hrtime": "^1.0.0",
+				"chalk": "^4.1.0",
+				"esbuild": "^0.18.0",
+				"esbuild-register": "^3.5.0",
+				"file-system-cache": "2.3.0",
+				"find-cache-dir": "^3.0.0",
+				"find-up": "^5.0.0",
+				"fs-extra": "^11.1.0",
+				"glob": "^10.0.0",
+				"handlebars": "^4.7.7",
+				"lazy-universal-dotenv": "^4.0.0",
+				"node-fetch": "^2.0.0",
+				"picomatch": "^2.3.0",
+				"pkg-dir": "^5.0.0",
+				"pretty-hrtime": "^1.0.3",
+				"resolve-from": "^5.0.0",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+			"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+			"dev": true,
+			"dependencies": {
+				"commondir": "^1.0.1",
+				"make-dir": "^3.0.2",
+				"pkg-dir": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-cache-dir/node_modules/pkg-dir": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+			"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/glob": {
+			"version": "10.4.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/pkg-dir": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
+			"integrity": "sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@storybook/core-common/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/core-events": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.15.tgz",
+			"integrity": "sha512-i4YnjGecbpGyrFe0340sPhQ9QjZZEBqvMy6kF4XWt6DYLHxZmsTj1HEdvxVl4Ej7V49Vw0Dm8MepJ1d4Y8MKrQ==",
+			"dev": true,
+			"dependencies": {
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/core-server": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.15.tgz",
+			"integrity": "sha512-iIlxEAkrmKTSA3iGNqt/4QG7hf5suxBGYIB3DZAOfBo8EdZogMYaEmuCm5dbuaJr0mcVwlqwdhQiWb1VsR/NhA==",
+			"dev": true,
+			"dependencies": {
+				"@aw-web-design/x-default-browser": "1.4.126",
+				"@discoveryjs/json-ext": "^0.5.3",
+				"@storybook/builder-manager": "7.6.15",
+				"@storybook/channels": "7.6.15",
+				"@storybook/core-common": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/csf-tools": "7.6.15",
+				"@storybook/docs-mdx": "^0.1.0",
+				"@storybook/global": "^5.0.0",
+				"@storybook/manager": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/preview-api": "7.6.15",
+				"@storybook/telemetry": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/detect-port": "^1.3.0",
+				"@types/node": "^18.0.0",
+				"@types/pretty-hrtime": "^1.0.0",
+				"@types/semver": "^7.3.4",
+				"better-opn": "^3.0.2",
+				"chalk": "^4.1.0",
+				"cli-table3": "^0.6.1",
+				"compression": "^1.7.4",
+				"detect-port": "^1.3.0",
+				"express": "^4.17.3",
+				"fs-extra": "^11.1.0",
+				"globby": "^11.0.2",
+				"ip": "^2.0.0",
+				"lodash": "^4.17.21",
+				"open": "^8.4.0",
+				"pretty-hrtime": "^1.0.3",
+				"prompts": "^2.4.0",
+				"read-pkg-up": "^7.0.1",
+				"semver": "^7.3.7",
+				"telejson": "^7.2.0",
+				"tiny-invariant": "^1.3.1",
+				"ts-dedent": "^2.0.0",
+				"util": "^0.12.4",
+				"util-deprecate": "^1.0.2",
+				"watchpack": "^2.2.0",
+				"ws": "^8.2.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/ip": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+			"integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
+			"dev": true
+		},
+		"node_modules/@storybook/core-server/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dev": true,
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"dev": true,
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/util": {
+			"version": "0.12.5",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"is-arguments": "^1.0.4",
+				"is-generator-function": "^1.0.7",
+				"is-typed-array": "^1.1.3",
+				"which-typed-array": "^1.1.2"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/watchpack": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+			"integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"glob-to-regexp": "^0.4.1",
+				"graceful-fs": "^4.1.2"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/@storybook/core-server/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"shelljs": {
-					"version": "0.8.4",
-					"resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz",
-					"integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==",
-					"dev": true,
-					"requires": {
-						"glob": "^7.0.0",
-						"interpret": "^1.0.0",
-						"rechoir": "^0.6.2"
-					}
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/core-webpack": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-7.6.15.tgz",
+			"integrity": "sha512-6Qk/kc7OKcy4jNowQFz6TFLWM2NYeLoJ73dIbFnN2o8DYS5WwmQLZhZ+MRvr92M+w1nlnc268kaqooYmAj8Mnw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/core-common": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/node": "^18.0.0",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/csf": {
+			"version": "0.1.11",
+			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.11.tgz",
+			"integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"type-fest": "^2.19.0"
+			}
+		},
+		"node_modules/@storybook/csf-plugin": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.6.15.tgz",
+			"integrity": "sha512-5Pm2B8XKNdG3fHyItWKbWnXHSRDFSvetlML+sMWGWYIjwOsnvPqt+gAvLksWhv/uJgDujGxNcPEh+/Y5C8ZAjQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/csf-tools": "7.6.15",
+				"unplugin": "^1.3.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/csf-tools": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.15.tgz",
+			"integrity": "sha512-8iKgg2cmbFTpVhRRJOqouhPcEh0c8ywabG4S8ICZvnJooSXUI9mD9p3tYCS7MYuSiHj0epa1Kkn9DtXJRo9o6g==",
+			"dev": true,
+			"dependencies": {
+				"@babel/generator": "^7.23.0",
+				"@babel/parser": "^7.23.0",
+				"@babel/traverse": "^7.23.2",
+				"@babel/types": "^7.23.0",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/types": "7.6.15",
+				"fs-extra": "^11.1.0",
+				"recast": "^0.23.1",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/csf-tools/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/csf-tools/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/csf-tools/node_modules/recast": {
+			"version": "0.23.9",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
+			"integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ast-types": "^0.16.1",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tiny-invariant": "^1.3.3",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@storybook/csf-tools/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/csf/node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/docs-mdx": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/@storybook/docs-mdx/-/docs-mdx-0.1.0.tgz",
+			"integrity": "sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==",
+			"dev": true
+		},
+		"node_modules/@storybook/docs-tools": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.15.tgz",
+			"integrity": "sha512-npZEaI9Wpn9uJcRXFElqyiRw8bSxt95mLywPiEEGMT2kE5FfXM8d5Uj5O64kzoXdRI9IhRPEEZZidOtA/UInfQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/core-common": "7.6.15",
+				"@storybook/preview-api": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/doctrine": "^0.0.3",
+				"assert": "^2.1.0",
+				"doctrine": "^3.0.0",
+				"lodash": "^4.17.21"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/docs-tools/node_modules/assert": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+			"integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"is-nan": "^1.3.2",
+				"object-is": "^1.1.5",
+				"object.assign": "^4.1.4",
+				"util": "^0.12.5"
+			}
+		},
+		"node_modules/@storybook/docs-tools/node_modules/doctrine": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+			"dev": true,
+			"dependencies": {
+				"esutils": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@storybook/docs-tools/node_modules/util": {
+			"version": "0.12.5",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"is-arguments": "^1.0.4",
+				"is-generator-function": "^1.0.7",
+				"is-typed-array": "^1.1.3",
+				"which-typed-array": "^1.1.2"
+			}
+		},
+		"node_modules/@storybook/global": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+			"integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+			"dev": true
+		},
+		"node_modules/@storybook/manager": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.15.tgz",
+			"integrity": "sha512-GGV2ElV5AOIApy/FSDzoSlLUbyd2VhQVD3TdNGRxNauYRjEO8ulXHw2tNbT6ludtpYpDTAILzI6zT/iag8hmPQ==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/manager-api": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.15.tgz",
+			"integrity": "sha512-cPBsXcnJiaO3QyaEum2JgdihYea3cI03FeV35JdrBYLIelT4oqbYFnzjznsFg9+Ia9iAbz7aOBNyyRsWnC/UKw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/channels": "7.6.15",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/global": "^5.0.0",
+				"@storybook/router": "7.6.15",
+				"@storybook/theming": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"dequal": "^2.0.2",
+				"lodash": "^4.17.21",
+				"memoizerific": "^1.11.3",
+				"store2": "^2.14.2",
+				"telejson": "^7.2.0",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/mdx2-csf": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@storybook/mdx2-csf/-/mdx2-csf-1.1.0.tgz",
+			"integrity": "sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==",
+			"dev": true
+		},
+		"node_modules/@storybook/node-logger": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.15.tgz",
+			"integrity": "sha512-C+sCvRjR+5uVU3VTrfyv7/RlPBxesAjIucUAK0keGyIZ7sFQYCPdkm4m/C4s+TcubgAzVvuoUHlRrSppdA7WzQ==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/postinstall": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.15.tgz",
+			"integrity": "sha512-DXQQ4kjAbQ7BSd9M4lDI/12vEEciYMP8uYFDlrPFjwD9LezsxtRiORkazjNRRX4730faO5zZsnWhXxCVkxck0g==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/preset-react-webpack": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-7.6.15.tgz",
+			"integrity": "sha512-Oo3J7RKO/tFUVnRXs16tZGcX6n90gTpHdlT2Z1fZ+y8wEd9o+VvvKFEIIeMcRxf3hHa49R6Kbc4AQaE9FAuDlw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/preset-flow": "^7.22.15",
+				"@babel/preset-react": "^7.22.15",
+				"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+				"@storybook/core-webpack": "7.6.15",
+				"@storybook/docs-tools": "7.6.15",
+				"@storybook/node-logger": "7.6.15",
+				"@storybook/react": "7.6.15",
+				"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
+				"@types/node": "^18.0.0",
+				"@types/semver": "^7.3.4",
+				"babel-plugin-add-react-displayname": "^0.0.5",
+				"fs-extra": "^11.1.0",
+				"magic-string": "^0.30.5",
+				"react-docgen": "^7.0.0",
+				"react-refresh": "^0.14.0",
+				"semver": "^7.3.7",
+				"webpack": "5"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.22.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
 				},
-				"shimmer": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
-					"integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==",
-					"dev": true
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/preset-react-webpack/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/preset-react-webpack/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/preset-react-webpack/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/preview": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.15.tgz",
+			"integrity": "sha512-q8d9v0+Bo/DHLV68OyV3Klep4knf2GAbrlHhLW1X4jlPccuEDUojIfqfK7m48ayeIxJzO48fcO0JdKM1XABx7g==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/preview-api": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.15.tgz",
+			"integrity": "sha512-2KN9vlizF6sFlYsJEGnFqcQaJXs4TTdawC1VazVdtaMSHANDxxDu8F1cP+u7lpPH3DkNZUmTGQDBYfYY9xR0eQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/channels": "7.6.15",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-events": "7.6.15",
+				"@storybook/csf": "^0.1.2",
+				"@storybook/global": "^5.0.0",
+				"@storybook/types": "7.6.15",
+				"@types/qs": "^6.9.5",
+				"dequal": "^2.0.2",
+				"lodash": "^4.17.21",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0",
+				"synchronous-promise": "^2.0.15",
+				"ts-dedent": "^2.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/react": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.6.15.tgz",
+			"integrity": "sha512-oJMSh4iTGu6OqCmj0LhkuPyMkxGMTCoohN4HcDpXd96jCSyWotVebRsg9xm5ddB7f54e6DY4XDoGH0WnVoR23g==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-client": "7.6.15",
+				"@storybook/docs-tools": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"@storybook/preview-api": "7.6.15",
+				"@storybook/react-dom-shim": "7.6.15",
+				"@storybook/types": "7.6.15",
+				"@types/escodegen": "^0.0.6",
+				"@types/estree": "^0.0.51",
+				"@types/node": "^18.0.0",
+				"acorn": "^7.4.1",
+				"acorn-jsx": "^5.3.1",
+				"acorn-walk": "^7.2.0",
+				"escodegen": "^2.1.0",
+				"html-tags": "^3.1.0",
+				"lodash": "^4.17.21",
+				"prop-types": "^15.7.2",
+				"react-element-to-jsx-string": "^15.0.0",
+				"ts-dedent": "^2.0.0",
+				"type-fest": "~2.19",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"typescript": "*"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin": {
+			"version": "1.0.6--canary.9.0c3f3b7.0",
+			"resolved": "https://registry.npmjs.org/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.0c3f3b7.0.tgz",
+			"integrity": "sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.1.1",
+				"endent": "^2.0.1",
+				"find-cache-dir": "^3.3.1",
+				"flat-cache": "^3.0.4",
+				"micromatch": "^4.0.2",
+				"react-docgen-typescript": "^2.2.2",
+				"tslib": "^2.0.0"
+			},
+			"peerDependencies": {
+				"typescript": ">= 4.x",
+				"webpack": ">= 4"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/find-cache-dir": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+			"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+			"dev": true,
+			"dependencies": {
+				"commondir": "^1.0.1",
+				"make-dir": "^3.0.2",
+				"pkg-dir": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/pkg-dir": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+			"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@storybook/react-docgen-typescript-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@storybook/react-dom-shim": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.15.tgz",
+			"integrity": "sha512-2+X0HIxIyvjfSKVyGGjSJJLEFJ2ox7Rr8FjlMiRo5QfoOJhohZuWH7p4Lw7JMwm5PotnjrwlfsZI3cCilYJeYA==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@storybook/react-webpack5": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/react-webpack5/-/react-webpack5-7.6.15.tgz",
+			"integrity": "sha512-TyYYSDho+4cQRBCVMKu7XDTCrAsLWaeldCoZm910e4DTXZUV3NDG8hVJIXzweaCu1o7JtDOelxsA6iizR/22GQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/builder-webpack5": "7.6.15",
+				"@storybook/preset-react-webpack": "7.6.15",
+				"@storybook/react": "7.6.15",
+				"@types/node": "^18.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.22.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"typescript": "*"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
 				},
-				"signal-exit": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-					"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
-					"dev": true
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/react/node_modules/@types/estree": {
+			"version": "0.0.51",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
+			"integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
+			"dev": true
+		},
+		"node_modules/@storybook/react/node_modules/acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"dev": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/@storybook/react/node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@storybook/router": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.15.tgz",
+			"integrity": "sha512-5yhXXoVZ1iKUgeZoO8PGqBclrLgoJisxIYVK/Y1iJMXZ2ZvwUiTswLALT6lu97tSrcoBVxmqSghg0+U0YEU4Fg==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/client-logger": "7.6.15",
+				"memoizerific": "^1.11.3",
+				"qs": "^6.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/source-loader": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-7.6.15.tgz",
+			"integrity": "sha512-E7LqjfvEUs2dn8ZWc1OfqzXU3vyi2/yP7rPHPRFjDUIpz1QI4IUCUIFY+n3YWkbk8wlmf6dV/2QYzYZPp6RD0g==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/csf": "^0.1.2",
+				"@storybook/types": "7.6.15",
+				"estraverse": "^5.2.0",
+				"lodash": "^4.17.21",
+				"prettier": "^2.8.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/source-loader/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/@storybook/source-loader/node_modules/prettier": {
+			"version": "2.8.8",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+			"dev": true,
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/@storybook/telemetry": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.15.tgz",
+			"integrity": "sha512-klhKXLUS3OXozGEtMbbhKZLDfm+m3nNk2jvGwD6kkBenzFUzb0P2m8awxU7h1pBcKZKH/27U9t3KVzNFzWoWPw==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/core-common": "7.6.15",
+				"@storybook/csf-tools": "7.6.15",
+				"chalk": "^4.1.0",
+				"detect-package-manager": "^2.0.1",
+				"fetch-retry": "^5.0.2",
+				"fs-extra": "^11.1.0",
+				"read-pkg-up": "^7.0.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@storybook/telemetry/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/@storybook/telemetry/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/@storybook/telemetry/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/@storybook/theming": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.15.tgz",
+			"integrity": "sha512-9PpsHAbUf6o0w33/P3mnb7QheTmfGlTYCismj5HMM1O2/zY0kQK9XcG9W+Cyvu56D/lFC19fz9YHQY8W4AbfnQ==",
+			"dev": true,
+			"dependencies": {
+				"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+				"@storybook/client-logger": "7.6.15",
+				"@storybook/global": "^5.0.0",
+				"memoizerific": "^1.11.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/@storybook/types": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.15.tgz",
+			"integrity": "sha512-tLH0lK6SXECSfMpKin9bge+7XiHZII17n6jc9ZI1TfSBZJyq3M6VzWh2r1C2lC97FlkcKXjIwM3n8h1xNjnI+A==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/channels": "7.6.15",
+				"@types/babel__core": "^7.0.0",
+				"@types/express": "^4.7.0",
+				"file-system-cache": "2.3.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			}
+		},
+		"node_modules/@stylistic/stylelint-plugin": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-3.0.1.tgz",
+			"integrity": "sha512-j3mH8HSw2Rob/KJFWZ627w3CQ8gQqVHtzCdPeEffUg5vOgpz4rgrR+Xw2kU0OQCDcdW8Y1nKfdXKKjM5Rn8X0g==",
+			"dependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.0",
+				"@csstools/css-tokenizer": "^3.0.0",
+				"@csstools/media-query-list-parser": "^3.0.0",
+				"is-plain-object": "^5.0.0",
+				"postcss-selector-parser": "^6.1.2",
+				"postcss-value-parser": "^4.2.0",
+				"style-search": "^0.1.0",
+				"stylelint": "^16.8.2"
+			},
+			"engines": {
+				"node": "^18.12 || >=20.9"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.8.0"
+			}
+		},
+		"node_modules/@stylistic/stylelint-plugin/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+			"integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+			"integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+			"integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+			"integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+			"integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+			"integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.0.0.tgz",
+			"integrity": "sha512-UKrY3860AQICgH7g+6h2zkoxeVEPLYwX/uAjmqo4PIq2FIHppwhIqZstIyTz0ZtlwreKR41O3W3BzsBBiJV2Aw==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-transform-svg-component": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+			"integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-preset": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.0.0.tgz",
+			"integrity": "sha512-KLcjiZychInVrhs86OvcYPLTFu9L5XV2vj0XAaE1HwE3J3jLmIzRY8ttdeAg/iFyp8nhavJpafpDZTt+1LIpkQ==",
+			"dependencies": {
+				"@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+				"@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+				"@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+				"@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+				"@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+				"@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+				"@svgr/babel-plugin-transform-react-native-svg": "8.0.0",
+				"@svgr/babel-plugin-transform-svg-component": "8.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/core": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.0.0.tgz",
+			"integrity": "sha512-aJKtc+Pie/rFYsVH/unSkDaZGvEeylNv/s2cP+ta9/rYWxRVvoV/S4Qw65Kmrtah4CBK5PM6ISH9qUH7IJQCng==",
+			"dependencies": {
+				"@babel/core": "^7.21.3",
+				"@svgr/babel-preset": "8.0.0",
+				"camelcase": "^6.2.0",
+				"cosmiconfig": "^8.1.3",
+				"snake-case": "^3.0.4"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@svgr/core/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/@svgr/core/node_modules/camelcase": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+			"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@svgr/core/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+			"dependencies": {
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@svgr/core/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@svgr/core/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@svgr/hast-util-to-babel-ast": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+			"integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+			"dependencies": {
+				"@babel/types": "^7.21.3",
+				"entities": "^4.4.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/@svgr/plugin-jsx": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.0.1.tgz",
+			"integrity": "sha512-bfCFb+4ZsM3UuKP2t7KmDwn6YV8qVn9HIQJmau6xeQb/iV65Rpi7NBNBWA2hcCd4GKoCqG8hpaaDk5FDR0eH+g==",
+			"dependencies": {
+				"@babel/core": "^7.21.3",
+				"@svgr/babel-preset": "8.0.0",
+				"@svgr/hast-util-to-babel-ast": "8.0.0",
+				"svg-parser": "^2.0.4"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@svgr/core": "*"
+			}
+		},
+		"node_modules/@svgr/plugin-svgo": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.0.1.tgz",
+			"integrity": "sha512-29OJ1QmJgnohQHDAgAuY2h21xWD6TZiXji+hnx+W635RiXTAlHTbjrZDktfqzkN0bOeQEtNe+xgq73/XeWFfSg==",
+			"dependencies": {
+				"cosmiconfig": "^8.1.3",
+				"deepmerge": "^4.3.1",
+				"svgo": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@svgr/core": "*"
+			}
+		},
+		"node_modules/@svgr/plugin-svgo/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+			"dependencies": {
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@svgr/plugin-svgo/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@svgr/plugin-svgo/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@svgr/webpack": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.0.1.tgz",
+			"integrity": "sha512-zSoeKcbCmfMXjA11uDuCJb+1LWNb3vy6Qw/VHj0Nfcl3UuqwuoZWknHsBIhCWvi4wU9vPui3aq054qjVyZqY4A==",
+			"dependencies": {
+				"@babel/core": "^7.21.3",
+				"@babel/plugin-transform-react-constant-elements": "^7.21.3",
+				"@babel/preset-env": "^7.20.2",
+				"@babel/preset-react": "^7.18.6",
+				"@babel/preset-typescript": "^7.21.0",
+				"@svgr/core": "8.0.0",
+				"@svgr/plugin-jsx": "8.0.1",
+				"@svgr/plugin-svgo": "8.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@swc/core": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.1.tgz",
+			"integrity": "sha512-3y+Y8js+e7BbM16iND+6Rcs3jdiL28q3iVtYsCviYSSpP2uUVKkp5sJnCY4pg8AaVvyN7CGQHO7gLEZQ5ByozQ==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"@swc/counter": "^0.1.2",
+				"@swc/types": "^0.1.5"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/swc"
+			},
+			"optionalDependencies": {
+				"@swc/core-darwin-arm64": "1.4.1",
+				"@swc/core-darwin-x64": "1.4.1",
+				"@swc/core-linux-arm-gnueabihf": "1.4.1",
+				"@swc/core-linux-arm64-gnu": "1.4.1",
+				"@swc/core-linux-arm64-musl": "1.4.1",
+				"@swc/core-linux-x64-gnu": "1.4.1",
+				"@swc/core-linux-x64-musl": "1.4.1",
+				"@swc/core-win32-arm64-msvc": "1.4.1",
+				"@swc/core-win32-ia32-msvc": "1.4.1",
+				"@swc/core-win32-x64-msvc": "1.4.1"
+			},
+			"peerDependencies": {
+				"@swc/helpers": "^0.5.0"
+			},
+			"peerDependenciesMeta": {
+				"@swc/helpers": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@swc/core-darwin-arm64": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.1.tgz",
+			"integrity": "sha512-ePyfx0348UbR4DOAW24TedeJbafnzha8liXFGuQ4bdXtEVXhLfPngprrxKrAddCuv42F9aTxydlF6+adD3FBhA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-darwin-x64": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.1.tgz",
+			"integrity": "sha512-eLf4JSe6VkCMdDowjM8XNC5rO+BrgfbluEzAVtKR8L2HacNYukieumN7EzpYCi0uF1BYwu1ku6tLyG2r0VcGxA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-linux-arm-gnueabihf": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.1.tgz",
+			"integrity": "sha512-K8VtTLWMw+rkN/jDC9o/Q9SMmzdiHwYo2CfgkwVT29NsGccwmNhCQx6XoYiPKyKGIFKt4tdQnJHKUFzxUqQVtQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-linux-arm64-gnu": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.1.tgz",
+			"integrity": "sha512-0e8p4g0Bfkt8lkiWgcdiENH3RzkcqKtpRXIVNGOmVc0OBkvc2tpm2WTx/eoCnes2HpTT4CTtR3Zljj4knQ4Fvw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-linux-arm64-musl": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.1.tgz",
+			"integrity": "sha512-b/vWGQo2n7lZVUnSQ7NBq3Qrj85GrAPPiRbpqaIGwOytiFSk8VULFihbEUwDe0rXgY4LDm8z8wkgADZcLnmdUA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-linux-x64-gnu": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.1.tgz",
+			"integrity": "sha512-AFMQlvkKEdNi1Vk2GFTxxJzbICttBsOQaXa98kFTeWTnFFIyiIj2w7Sk8XRTEJ/AjF8ia8JPKb1zddBWr9+bEQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-linux-x64-musl": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.1.tgz",
+			"integrity": "sha512-QX2MxIECX1gfvUVZY+jk528/oFkS9MAl76e3ZRvG2KC/aKlCQL0KSzcTSm13mOxkDKS30EaGRDRQWNukGpMeRg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-win32-arm64-msvc": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.1.tgz",
+			"integrity": "sha512-OklkJYXXI/tntD2zaY8i3iZldpyDw5q+NAP3k9OlQ7wXXf37djRsHLV0NW4+ZNHBjE9xp2RsXJ0jlOJhfgGoFA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-win32-ia32-msvc": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.1.tgz",
+			"integrity": "sha512-MBuc3/QfKX9FnLOU7iGN+6yHRTQaPQ9WskiC8s8JFiKQ+7I2p25tay2RplR9dIEEGgVAu6L7auv96LbNTh+FaA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/core-win32-x64-msvc": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.1.tgz",
+			"integrity": "sha512-lu4h4wFBb/bOK6N2MuZwg7TrEpwYXgpQf5R7ObNSXL65BwZ9BG8XRzD+dLJmALu8l5N08rP/TrpoKRoGT4WSxw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@swc/counter": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+			"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+			"dev": true
+		},
+		"node_modules/@swc/types": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
+			"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
+			"dev": true
+		},
+		"node_modules/@szmarczak/http-timer": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+			"integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+			"dependencies": {
+				"defer-to-connect": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@tannin/compile": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@tannin/compile/-/compile-1.1.0.tgz",
+			"integrity": "sha512-n8m9eNDfoNZoxdvWiTfW/hSPhehzLJ3zW7f8E7oT6mCROoMNWCB4TYtv041+2FMAxweiE0j7i1jubQU4MEC/Gg==",
+			"dependencies": {
+				"@tannin/evaluate": "^1.2.0",
+				"@tannin/postfix": "^1.1.0"
+			}
+		},
+		"node_modules/@tannin/evaluate": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@tannin/evaluate/-/evaluate-1.2.0.tgz",
+			"integrity": "sha512-3ioXvNowbO/wSrxsDG5DKIMxC81P0QrQTYai8zFNY+umuoHWRPbQ/TuuDEOju9E+jQDXmj6yI5GyejNuh8I+eg=="
+		},
+		"node_modules/@tannin/plural-forms": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@tannin/plural-forms/-/plural-forms-1.1.0.tgz",
+			"integrity": "sha512-xl9R2mDZO/qiHam1AgMnAES6IKIg7OBhcXqy6eDsRCdXuxAFPcjrej9HMjyCLE0DJ/8cHf0i5OQTstuBRhpbHw==",
+			"dependencies": {
+				"@tannin/compile": "^1.1.0"
+			}
+		},
+		"node_modules/@tannin/postfix": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.1.0.tgz",
+			"integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw=="
+		},
+		"node_modules/@testing-library/dom": {
+			"version": "9.3.1",
+			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
+			"integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
+			"dev": true,
+			"dependencies": {
+				"@babel/code-frame": "^7.10.4",
+				"@babel/runtime": "^7.12.5",
+				"@types/aria-query": "^5.0.1",
+				"aria-query": "5.1.3",
+				"chalk": "^4.1.0",
+				"dom-accessibility-api": "^0.5.9",
+				"lz-string": "^1.5.0",
+				"pretty-format": "^27.0.2"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/@testing-library/dom/node_modules/ansi-styles": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/@testing-library/dom/node_modules/aria-query": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+			"integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+			"dev": true,
+			"dependencies": {
+				"deep-equal": "^2.0.5"
+			}
+		},
+		"node_modules/@testing-library/dom/node_modules/deep-equal": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
+			"integrity": "sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==",
+			"dev": true,
+			"dependencies": {
+				"array-buffer-byte-length": "^1.0.0",
+				"call-bind": "^1.0.2",
+				"es-get-iterator": "^1.1.3",
+				"get-intrinsic": "^1.2.1",
+				"is-arguments": "^1.1.1",
+				"is-array-buffer": "^3.0.2",
+				"is-date-object": "^1.0.5",
+				"is-regex": "^1.1.4",
+				"is-shared-array-buffer": "^1.0.2",
+				"isarray": "^2.0.5",
+				"object-is": "^1.1.5",
+				"object-keys": "^1.1.1",
+				"object.assign": "^4.1.4",
+				"regexp.prototype.flags": "^1.5.0",
+				"side-channel": "^1.0.4",
+				"which-boxed-primitive": "^1.0.2",
+				"which-collection": "^1.0.1",
+				"which-typed-array": "^1.1.9"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/@testing-library/dom/node_modules/isarray": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+			"dev": true
+		},
+		"node_modules/@testing-library/dom/node_modules/pretty-format": {
+			"version": "27.5.1",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+			"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^5.0.1",
+				"ansi-styles": "^5.0.0",
+				"react-is": "^17.0.1"
+			},
+			"engines": {
+				"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+			}
+		},
+		"node_modules/@testing-library/dom/node_modules/react-is": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+			"dev": true
+		},
+		"node_modules/@testing-library/jest-dom": {
+			"version": "5.16.5",
+			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
+			"integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
+			"dev": true,
+			"dependencies": {
+				"@adobe/css-tools": "^4.0.1",
+				"@babel/runtime": "^7.9.2",
+				"@types/testing-library__jest-dom": "^5.9.1",
+				"aria-query": "^5.0.0",
+				"chalk": "^3.0.0",
+				"css.escape": "^1.5.1",
+				"dom-accessibility-api": "^0.5.6",
+				"lodash": "^4.17.15",
+				"redent": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8",
+				"npm": ">=6",
+				"yarn": ">=1"
+			}
+		},
+		"node_modules/@testing-library/jest-dom/node_modules/aria-query": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/@testing-library/jest-dom/node_modules/chalk": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@testing-library/react": {
+			"version": "14.3.0",
+			"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.0.tgz",
+			"integrity": "sha512-AYJGvNFMbCa5vt1UtDCa/dcaABrXq8gph6VN+cffIx0UeA0qiGqS+sT60+sb+Gjc8tGXdECWYQgaF0khf8b+Lg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@testing-library/dom": "^9.0.0",
+				"@types/react-dom": "^18.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@testing-library/react-native": {
+			"version": "12.4.3",
+			"resolved": "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.4.3.tgz",
+			"integrity": "sha512-WLE7VbbR5jZJQl3vfNK7Wt+IHnzhOxyu95Mr56EHmzH3XhC8DkrPVAnUq9asq/QWj4aGnymbinFx6zZys/WZmA==",
+			"dev": true,
+			"dependencies": {
+				"jest-matcher-utils": "^29.7.0",
+				"pretty-format": "^29.7.0",
+				"redent": "^3.0.0"
+			},
+			"peerDependencies": {
+				"jest": ">=28.0.0",
+				"react": ">=16.8.0",
+				"react-native": ">=0.59",
+				"react-test-renderer": ">=16.8.0"
+			},
+			"peerDependenciesMeta": {
+				"jest": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@testing-library/user-event": {
+			"version": "14.4.3",
+			"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
+			"integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=12",
+				"npm": ">=6"
+			},
+			"peerDependencies": {
+				"@testing-library/dom": ">=7.21.4"
+			}
+		},
+		"node_modules/@tootallnate/quickjs-emscripten": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+			"integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA=="
+		},
+		"node_modules/@trysound/sax": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/@tsconfig/node14": {
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-14.1.0.tgz",
+			"integrity": "sha512-VmsCG04YR58ciHBeJKBDNMWWfYbyP8FekWVuTlpstaUPlat1D0x/tXzkWP7yCMU0eSz9V4OZU0LBWTFJ3xZf6w==",
+			"dev": true
+		},
+		"node_modules/@tufjs/canonical-json": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz",
+			"integrity": "sha512-QTnf++uxunWvG2z3UFNzAoQPHxnSXOwtaI3iJ+AohhV+5vONuArPjJE7aPXPVXfXJsqrVbZBu9b81AJoSd09IQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@tufjs/models": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@tufjs/models/-/models-1.0.4.tgz",
+			"integrity": "sha512-qaGV9ltJP0EO25YfFUPhxRVK0evXFIAGicsVXuRim4Ed9cjPxYhNnNJ49SFmbeLgtxpslIkX317IgpfcHPVj/A==",
+			"dev": true,
+			"dependencies": {
+				"@tufjs/canonical-json": "1.0.0",
+				"minimatch": "^9.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@tufjs/models/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@tufjs/models/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@types/archiver": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/@types/archiver/-/archiver-5.3.3.tgz",
+			"integrity": "sha512-0ABdVcXL6jOwNGY+hjWPqrxUvKelBEwNLcuv/SV2vZ4YCH8w9NttFCt+/QqI5zgMX+iX/XqVy89/r7EmLJmMpQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/readdir-glob": "*"
+			}
+		},
+		"node_modules/@types/argparse": {
+			"version": "2.0.10",
+			"resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-2.0.10.tgz",
+			"integrity": "sha512-C4wahC3gz3vQtvPazrJ5ONwmK1zSDllQboiWvpMM/iOswCYfBREFnjFbq/iWKIVOCl8+m5Pk6eva6/ZSsDuIGA==",
+			"dev": true
+		},
+		"node_modules/@types/aria-query": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
+			"integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
+			"dev": true
+		},
+		"node_modules/@types/async-lock": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@types/async-lock/-/async-lock-1.4.0.tgz",
+			"integrity": "sha512-2+rYSaWrpdbQG3SA0LmMT6YxWLrI81AqpMlSkw3QtFc2HGDufkweQSn30Eiev7x9LL0oyFrBqk1PXOnB9IEgKg==",
+			"dev": true
+		},
+		"node_modules/@types/babel__core": {
+			"version": "7.20.0",
+			"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
+			"integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
+			"dependencies": {
+				"@babel/parser": "^7.20.7",
+				"@babel/types": "^7.20.7",
+				"@types/babel__generator": "*",
+				"@types/babel__template": "*",
+				"@types/babel__traverse": "*"
+			}
+		},
+		"node_modules/@types/babel__generator": {
+			"version": "7.6.4",
+			"resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.4.tgz",
+			"integrity": "sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==",
+			"dependencies": {
+				"@babel/types": "^7.0.0"
+			}
+		},
+		"node_modules/@types/babel__template": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.1.tgz",
+			"integrity": "sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==",
+			"dependencies": {
+				"@babel/parser": "^7.1.0",
+				"@babel/types": "^7.0.0"
+			}
+		},
+		"node_modules/@types/babel__traverse": {
+			"version": "7.20.5",
+			"resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+			"integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
+			"dependencies": {
+				"@babel/types": "^7.20.7"
+			}
+		},
+		"node_modules/@types/base64-stream": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@types/base64-stream/-/base64-stream-1.0.3.tgz",
+			"integrity": "sha512-cbLPBuRLRq7l2+syfKT3byML5C/UNK/6hkcDDMxwttE+NtpXvQxhgXj0PNbcLCwUCmfEWMm3eRBpDmpieLegDQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/bluebird": {
+			"version": "3.5.38",
+			"resolved": "https://registry.npmjs.org/@types/bluebird/-/bluebird-3.5.38.tgz",
+			"integrity": "sha512-yR/Kxc0dd4FfwtEoLZMoqJbM/VE/W7hXn/MIjb+axcwag0iFmSPK7OBUZq1YWLynJUoWQkfUrI7T0HDqGApNSg==",
+			"dev": true
+		},
+		"node_modules/@types/body-parser": {
+			"version": "1.19.2",
+			"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+			"integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+			"dependencies": {
+				"@types/connect": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/bonjour": {
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
+			"integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/cacheable-request": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+			"integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+			"dependencies": {
+				"@types/http-cache-semantics": "*",
+				"@types/keyv": "^3.1.4",
+				"@types/node": "*",
+				"@types/responselike": "^1.0.0"
+			}
+		},
+		"node_modules/@types/connect": {
+			"version": "3.4.35",
+			"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+			"integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/connect-history-api-fallback": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+			"integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/express-serve-static-core": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/cross-spawn": {
+			"version": "6.0.6",
+			"resolved": "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.6.tgz",
+			"integrity": "sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/detect-port": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/@types/detect-port/-/detect-port-1.3.5.tgz",
+			"integrity": "sha512-Rf3/lB9WkDfIL9eEKaSYKc+1L/rNVYBjThk22JTqQw0YozXarX8YljFAz+HCoC6h4B4KwCMsBPZHaFezwT4BNA==",
+			"dev": true
+		},
+		"node_modules/@types/doctrine": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.3.tgz",
+			"integrity": "sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==",
+			"dev": true
+		},
+		"node_modules/@types/ejs": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
+			"integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
+			"dev": true
+		},
+		"node_modules/@types/emscripten": {
+			"version": "1.39.10",
+			"resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.10.tgz",
+			"integrity": "sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==",
+			"dev": true
+		},
+		"node_modules/@types/escodegen": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/@types/escodegen/-/escodegen-0.0.6.tgz",
+			"integrity": "sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==",
+			"dev": true
+		},
+		"node_modules/@types/eslint": {
+			"version": "8.56.9",
+			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.9.tgz",
+			"integrity": "sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==",
+			"dependencies": {
+				"@types/estree": "*",
+				"@types/json-schema": "*"
+			}
+		},
+		"node_modules/@types/eslint-scope": {
+			"version": "3.7.7",
+			"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+			"integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/eslint": "*",
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+		},
+		"node_modules/@types/events": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
+			"integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
+		},
+		"node_modules/@types/express": {
+			"version": "4.17.17",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
+			"integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
+			"dependencies": {
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
+			}
+		},
+		"node_modules/@types/express-serve-static-core": {
+			"version": "4.17.35",
+			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz",
+			"integrity": "sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/qs": "*",
+				"@types/range-parser": "*",
+				"@types/send": "*"
+			}
+		},
+		"node_modules/@types/fancy-log": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@types/fancy-log/-/fancy-log-2.0.0.tgz",
+			"integrity": "sha512-g39Vp8ZJ3D0gXhhkhDidVvdy4QajkF7/PV6HGn23FMaMqE/tLC1JNHUeQ7SshKLsBjucakZsXBLkWULbGLdL5g==",
+			"dev": true
+		},
+		"node_modules/@types/find-cache-dir": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
+			"integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==",
+			"dev": true
+		},
+		"node_modules/@types/find-root": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@types/find-root/-/find-root-1.1.2.tgz",
+			"integrity": "sha512-lGuMq71TL466jtCpvh7orGd+mrdBmo2h8ozvtOOTbq3ByfWpuN+UVxv4sOv3YpsD4NhW2k6ESGhnT/FIg4Ouzw==",
+			"dev": true
+		},
+		"node_modules/@types/glob": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
+			"integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+			"dependencies": {
+				"@types/events": "*",
+				"@types/minimatch": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/graceful-fs": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.3.tgz",
+			"integrity": "sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/hammerjs": {
+			"version": "2.0.45",
+			"resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+			"integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
+		},
+		"node_modules/@types/highlight-words-core": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@types/highlight-words-core/-/highlight-words-core-1.2.1.tgz",
+			"integrity": "sha512-9VZUA5omXBfn+hDxFjUDu1FOJTBM3LmvqfDey+Z6Aa8B8/JmF5SMj6FBrjfgJ/Q3YXOZd3qyTDfJyMZSs/wCUA=="
+		},
+		"node_modules/@types/html-minifier-terser": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+			"integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
+			"dev": true
+		},
+		"node_modules/@types/http-cache-semantics": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz",
+			"integrity": "sha512-FD+nQWA2zJjh4L9+pFXqWOi0Hs1ryBCfI+985NjluQ1p8EYtoLvjLOKidXBtZ4/IcxDX4o8/E8qDS3540tNliw=="
+		},
+		"node_modules/@types/http-errors": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ=="
+		},
+		"node_modules/@types/http-proxy": {
+			"version": "1.17.12",
+			"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.12.tgz",
+			"integrity": "sha512-kQtujO08dVtQ2wXAuSFfk9ASy3sug4+ogFR8Kd8UgP8PEuc1/G/8yjYRmp//PcDNJEUKOza/MrQu15bouEUCiw==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/istanbul-lib-coverage": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
+			"integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg=="
+		},
+		"node_modules/@types/istanbul-lib-report": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+			"integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+			"dependencies": {
+				"@types/istanbul-lib-coverage": "*"
+			}
+		},
+		"node_modules/@types/istanbul-reports": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+			"integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+			"dependencies": {
+				"@types/istanbul-lib-report": "*"
+			}
+		},
+		"node_modules/@types/jest": {
+			"version": "29.4.0",
+			"resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.4.0.tgz",
+			"integrity": "sha512-VaywcGQ9tPorCX/Jkkni7RWGFfI11whqzs8dvxF41P17Z+z872thvEvlIbznjPJ02kl1HMX3LmLOonsj2n7HeQ==",
+			"dev": true,
+			"dependencies": {
+				"expect": "^29.0.0",
+				"pretty-format": "^29.0.0"
+			}
+		},
+		"node_modules/@types/jsdom": {
+			"version": "20.0.1",
+			"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
+			"integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/tough-cookie": "*",
+				"parse5": "^7.0.0"
+			}
+		},
+		"node_modules/@types/jsftp": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/@types/jsftp/-/jsftp-2.1.3.tgz",
+			"integrity": "sha512-R5rP70tkPnH+rhz0s6VuMKqMrkA7ET1AfU3FDGKNhYBgU/XTIbzsYNCgTByo60eitl0mI5OoEA9+MW/t/5iVzA==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.12",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
+			"integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
+		},
+		"node_modules/@types/json5": {
+			"version": "0.0.29",
+			"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+			"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
+		},
+		"node_modules/@types/keyv": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+			"integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/klaw": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/klaw/-/klaw-3.0.4.tgz",
+			"integrity": "sha512-0M5F/WMU9yu2MyRued1VTQvUSwZ3siqYsX6MU7JF7VXRF5RzL0FXWFUrmdrWuGDWmuN6W+SyLhhg1Wp/sXkjtg==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/lockfile": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@types/lockfile/-/lockfile-1.0.2.tgz",
+			"integrity": "sha512-jD5VbvhfMhaYN4M3qPJuhMVUg3Dfc4tvPvLEAXn6GXbs/ajDFtCQahX37GIE65ipTI3I+hEvNaXS3MYAn9Ce3Q==",
+			"dev": true
+		},
+		"node_modules/@types/lodash": {
+			"version": "4.14.199",
+			"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.199.tgz",
+			"integrity": "sha512-Vrjz5N5Ia4SEzWWgIVwnHNEnb1UE1XMkvY5DGXrAeOGE9imk0hgTHh5GyDjLDJi9OTCn9oo9dXH1uToK1VRfrg==",
+			"dev": true
+		},
+		"node_modules/@types/mdx": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.6.tgz",
+			"integrity": "sha512-sVcwEG10aFU2KcM7cIA0M410UPv/DesOPyG8zMVk0QUDexHA3lYmGucpEpZ2dtWWhi2ip3CG+5g/iH0PwoW4Fw==",
+			"dev": true
+		},
+		"node_modules/@types/method-override": {
+			"version": "0.0.33",
+			"resolved": "https://registry.npmjs.org/@types/method-override/-/method-override-0.0.33.tgz",
+			"integrity": "sha512-H6hK7AZdUOCmboTTUlhfDG3uT0XDljjrk3vIb+GJ3ylkogXu5s/NncGB85r3rtCz6sxZBWF62dlf7I04sIQA5A==",
+			"dev": true,
+			"dependencies": {
+				"@types/express": "*"
+			}
+		},
+		"node_modules/@types/mime": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
+			"integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==",
+			"dev": true
+		},
+		"node_modules/@types/mime-types": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.4.tgz",
+			"integrity": "sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==",
+			"dev": true
+		},
+		"node_modules/@types/minimatch": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
+			"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
+		},
+		"node_modules/@types/minimist": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.0.tgz",
+			"integrity": "sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY="
+		},
+		"node_modules/@types/mousetrap": {
+			"version": "1.6.8",
+			"resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.8.tgz",
+			"integrity": "sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA=="
+		},
+		"node_modules/@types/mv": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/@types/mv/-/mv-2.1.2.tgz",
+			"integrity": "sha512-IvAjPuiQ2exDicnTrMidt1m+tj3gZ60BM0PaoRsU0m9Cn+lrOyemuO9Tf8CvHFmXlxMjr1TVCfadi9sfwbSuKg==",
+			"dev": true
+		},
+		"node_modules/@types/ncp": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@types/ncp/-/ncp-2.0.6.tgz",
+			"integrity": "sha512-A5CcYVkrcbRD+5ghRzn+LjEYUNT+YpjcPfnpYte6fBNfq3rXJRYA03cATV0XfVbSnOZa2Yp5sXYI1fIkjAF/UA==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/node": {
+			"version": "18.19.59",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.59.tgz",
+			"integrity": "sha512-vizm2EqwV/7Zay+A6J3tGl9Lhr7CjZe2HmWS988sefiEmsyP9CeXEleho6i4hJk/8UtZAo0bWN4QPZZr83RxvQ==",
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~5.26.4"
+			}
+		},
+		"node_modules/@types/node-fetch": {
+			"version": "2.6.11",
+			"resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
+			"integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*",
+				"form-data": "^4.0.0"
+			}
+		},
+		"node_modules/@types/node-forge": {
+			"version": "1.3.11",
+			"resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+			"integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/normalize-package-data": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz",
+			"integrity": "sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A=="
+		},
+		"node_modules/@types/npm-package-arg": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/@types/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
+			"integrity": "sha512-452/1Kp9IdM/oR10AyqAgZOxUt7eLbm+EMJ194L6oarMYdZNiFIFAOJ7IIr0OrZXTySgfHjJezh2oiyk2kc3ag==",
+			"dev": true
+		},
+		"node_modules/@types/npmlog": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/@types/npmlog/-/npmlog-4.1.4.tgz",
+			"integrity": "sha512-WKG4gTr8przEZBiJ5r3s8ZIAoMXNbOgQ+j/d5O4X3x6kZJRLNvyUJuUK/KoG3+8BaOHPhp2m7WC6JKKeovDSzQ==",
+			"dev": true
+		},
+		"node_modules/@types/offscreencanvas": {
+			"version": "2019.7.0",
+			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
+			"integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg=="
+		},
+		"node_modules/@types/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+		},
+		"node_modules/@types/pluralize": {
+			"version": "0.0.31",
+			"resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.31.tgz",
+			"integrity": "sha512-MQh69PPwFlYAL2qz/Mw5Zc34VTdt7pTck0Xbb6pbPSzdt5oaLB87iyJJxEMS5Dco/s7lXHunEezAvQurZZdrsQ==",
+			"dev": true
+		},
+		"node_modules/@types/prettier": {
+			"version": "2.4.4",
+			"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
+			"integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==",
+			"dev": true
+		},
+		"node_modules/@types/pretty-hrtime": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+			"integrity": "sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==",
+			"dev": true
+		},
+		"node_modules/@types/prop-types": {
+			"version": "15.7.4",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+			"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+		},
+		"node_modules/@types/qs": {
+			"version": "6.9.7",
+			"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+			"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+		},
+		"node_modules/@types/range-parser": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+			"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+		},
+		"node_modules/@types/react": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz",
+			"integrity": "sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==",
+			"dependencies": {
+				"@types/prop-types": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"node_modules/@types/react-dates": {
+			"version": "21.8.3",
+			"resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.3.tgz",
+			"integrity": "sha512-MSG/A5UCXepPw5a9BtdOXfCCSMcQ5+oQIkm0K2u39sf4EJbsgngUg1zcoY3amxa6Hz0EWZkZOiExK/92J6hxUw==",
+			"dev": true,
+			"dependencies": {
+				"@types/react": "*",
+				"@types/react-outside-click-handler": "*",
+				"moment": "^2.26.0"
+			}
+		},
+		"node_modules/@types/react-dom": {
+			"version": "18.3.0",
+			"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+			"integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
+		"node_modules/@types/react-outside-click-handler": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.1.tgz",
+			"integrity": "sha512-0BNan5zIIDyO5k9LFSG+60ZxQ/0wf+LTF9BJx3oOUdOaJlZk6RCe52jRB75mlvLLJx2YLa61+NidOwBfptWMKw==",
+			"dev": true,
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
+		"node_modules/@types/readdir-glob": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@types/readdir-glob/-/readdir-glob-1.1.2.tgz",
+			"integrity": "sha512-vwAYrNN/8yhp/FJRU6HUSD0yk6xfoOS8HrZa8ZL7j+X8hJpaC1hTcAiXX2IxaAkkvrz9mLyoEhYZTE3cEYvA9Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/requestidlecallback": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.4.tgz",
+			"integrity": "sha512-aTSyiZuRemRLTQkJPb25L7A4/eR2Teo5l4yJ1V6P3+MFxEZckTDkNKNtr/V1zEOMzS6H8DgxF22U6jPAPrzQvw==",
+			"dev": true
+		},
+		"node_modules/@types/resolve": {
+			"version": "1.20.6",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
+			"integrity": "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==",
+			"dev": true
+		},
+		"node_modules/@types/responselike": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
+			"integrity": "sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/retry": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+			"integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+			"license": "MIT"
+		},
+		"node_modules/@types/scheduler": {
+			"version": "0.16.2",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+			"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+		},
+		"node_modules/@types/semver": {
+			"version": "7.3.8",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.8.tgz",
+			"integrity": "sha512-D/2EJvAlCEtYFEYmmlGwbGXuK886HzyCc3nZX/tkFTQdEU8jZDAgiv08P162yB17y4ZXZoq7yFAnW4GDBb9Now==",
+			"dev": true
+		},
+		"node_modules/@types/send": {
+			"version": "0.17.1",
+			"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz",
+			"integrity": "sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==",
+			"dependencies": {
+				"@types/mime": "^1",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/send/node_modules/@types/mime": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+			"integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+		},
+		"node_modules/@types/serve-favicon": {
+			"version": "2.5.5",
+			"resolved": "https://registry.npmjs.org/@types/serve-favicon/-/serve-favicon-2.5.5.tgz",
+			"integrity": "sha512-E/P1MhsGcalASnOVUPr9QQ4BIXyqQoGtLscG4fcMcEpZ7Z7tl6S4uSJnBJzWj7bj6rRZLIFOv0dR1YcepLNFFA==",
+			"dev": true,
+			"dependencies": {
+				"@types/express": "*"
+			}
+		},
+		"node_modules/@types/serve-index": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
+			"integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/express": "*"
+			}
+		},
+		"node_modules/@types/serve-static": {
+			"version": "1.15.7",
+			"resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
+			"integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/http-errors": "*",
+				"@types/node": "*",
+				"@types/send": "*"
+			}
+		},
+		"node_modules/@types/shell-quote": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@types/shell-quote/-/shell-quote-1.7.2.tgz",
+			"integrity": "sha512-p3SZxGp6LXB6RPdMpJmquKjaxQlN/ijyBLTKGPg9IJK6J2g2sJsMmtXP9kNR+Axxi6MDKN2e/76HCOUmvkIpcw==",
+			"dev": true
+		},
+		"node_modules/@types/simple-peer": {
+			"version": "9.11.6",
+			"resolved": "https://registry.npmjs.org/@types/simple-peer/-/simple-peer-9.11.6.tgz",
+			"integrity": "sha512-6kD6yWzHJrVwx+N3RcC+5H9x/rZ7vRTDMrLl40eowvxXEKwvOW2W/ST5GlSQ/6j9yubSzaMj02LdNFTTfscQ3w==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/sockjs": {
+			"version": "0.3.36",
+			"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
+			"integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/source-list-map": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
+			"integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA=="
+		},
+		"node_modules/@types/sprintf-js": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.2.tgz",
+			"integrity": "sha512-hkgzYF+qnIl8uTO8rmUSVSfQ8BIfMXC4yJAF4n8BE758YsKBZvFC4NumnAegj7KmylP0liEZNpb9RRGFMbFejA==",
+			"dev": true
+		},
+		"node_modules/@types/stack-utils": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
+			"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
+		},
+		"node_modules/@types/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/@types/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-dPWnWsf+kzIG140B8z2w3fr5D03TLWbOAFQl45xUpI3vcizeXriNR5VYkWZ+WTMsUHqZ9Xlt3hrxGNANFyNQfw==",
+			"dev": true
+		},
+		"node_modules/@types/tapable": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz",
+			"integrity": "sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ=="
+		},
+		"node_modules/@types/teen_process": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@types/teen_process/-/teen_process-2.0.0.tgz",
+			"integrity": "sha512-Kb0NjBT9cJXg0mjkmYJbA1WM+4EcEpbUfLXxzKhyAihNU0ipuqRyOolTEB2nDU8D8aCI6EcBLaHbSVefED8lGQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/testing-library__jest-dom": {
+			"version": "5.14.5",
+			"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz",
+			"integrity": "sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/jest": "*"
+			}
+		},
+		"node_modules/@types/tough-cookie": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz",
+			"integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw=="
+		},
+		"node_modules/@types/triple-beam": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.3.tgz",
+			"integrity": "sha512-6tOUG+nVHn0cJbVp25JFayS5UE6+xlbcNF9Lo9mU7U0zk3zeUShZied4YEQZjy1JBF043FSkdXw8YkUJuVtB5g==",
+			"dev": true
+		},
+		"node_modules/@types/uglify-js": {
+			"version": "3.9.2",
+			"resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.2.tgz",
+			"integrity": "sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==",
+			"dependencies": {
+				"source-map": "^0.6.1"
+			}
+		},
+		"node_modules/@types/unist": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+			"integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+		},
+		"node_modules/@types/uuid": {
+			"version": "8.3.1",
+			"resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
+			"integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
+			"dev": true
+		},
+		"node_modules/@types/vfile": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/vfile/-/vfile-3.0.2.tgz",
+			"integrity": "sha512-b3nLFGaGkJ9rzOcuXRfHkZMdjsawuDD0ENL9fzTophtBg8FJHSGbH7daXkEpcwy3v7Xol3pAvsmlYyFhR4pqJw==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/unist": "*",
+				"@types/vfile-message": "*"
+			}
+		},
+		"node_modules/@types/vfile-message": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@types/vfile-message/-/vfile-message-1.0.1.tgz",
+			"integrity": "sha512-mlGER3Aqmq7bqR1tTTIVHq8KSAFFRyGbrxuM8C/H82g6k7r2fS+IMEkIu3D7JHzG10NvPdR8DNx0jr0pwpp4dA==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/webpack": {
+			"version": "4.41.33",
+			"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
+			"integrity": "sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/tapable": "^1",
+				"@types/uglify-js": "*",
+				"@types/webpack-sources": "*",
+				"anymatch": "^3.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
+		"node_modules/@types/webpack-sources": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.7.tgz",
+			"integrity": "sha512-XyaHrJILjK1VHVC4aVlKsdNN5KBTwufMb43cQs+flGxtPAf/1Qwl8+Q0tp5BwEGaI8D6XT1L+9bSWXckgkjTLw==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/source-list-map": "*",
+				"source-map": "^0.6.1"
+			}
+		},
+		"node_modules/@types/which": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/which/-/which-3.0.0.tgz",
+			"integrity": "sha512-ASCxdbsrwNfSMXALlC3Decif9rwDMu+80KGp5zI2RLRotfMsTv7fHL8W8VDp24wymzDyIFudhUeSCugrgRFfHQ==",
+			"dev": true
+		},
+		"node_modules/@types/wrap-ansi": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@types/wrap-ansi/-/wrap-ansi-3.0.0.tgz",
+			"integrity": "sha512-ltIpx+kM7g/MLRZfkbL7EsCEjfzCcScLpkg37eXEtx5kmrAKBkTJwd1GIAjDSL8wTpM6Hzn5YO4pSb91BEwu1g==",
+			"dev": true
+		},
+		"node_modules/@types/ws": {
+			"version": "8.5.5",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+			"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/yargs": {
+			"version": "17.0.33",
+			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+			"integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/yargs-parser": "*"
+			}
+		},
+		"node_modules/@types/yargs-parser": {
+			"version": "13.1.0",
+			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz",
+			"integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg=="
+		},
+		"node_modules/@types/yauzl": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
+			"integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
+			"optional": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.4.1.tgz",
+			"integrity": "sha512-3F5PtBzUW0dYlq77Lcqo13fv+58KDwUib3BddilE8ajPJT+faGgxmI9Sw+I8ZS22BYwoir9ZhNXcLi+S+I2bkw==",
+			"dependencies": {
+				"@eslint-community/regexpp": "^4.5.1",
+				"@typescript-eslint/scope-manager": "6.4.1",
+				"@typescript-eslint/type-utils": "6.4.1",
+				"@typescript-eslint/utils": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1",
+				"debug": "^4.3.4",
+				"graphemer": "^1.4.0",
+				"ignore": "^5.2.4",
+				"natural-compare": "^1.4.0",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+				"eslint": "^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@types/semver": {
+			"version": "7.5.8",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+			"integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.1.tgz",
+			"integrity": "sha512-p/OavqOQfm4/Hdrr7kvacOSFjwQ2rrDVJRPxt/o0TOWdFnjJptnjnZ+sYDR7fi4OimvIuKp+2LCkc+rt9fIW+A==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.1.tgz",
+			"integrity": "sha512-zAAopbNuYu++ijY1GV2ylCsQsi3B8QvfPHVqhGdDcbx/NK5lkqMnCGU53amAjccSpk+LfeONxwzUhDzArSfZJg==",
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.1.tgz",
+			"integrity": "sha512-xF6Y7SatVE/OyV93h1xGgfOkHr2iXuo8ip0gbfzaKeGGuKiAnzS+HtVhSPx8Www243bwlW8IF7X0/B62SzFftg==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.4.1.tgz",
+			"integrity": "sha512-F/6r2RieNeorU0zhqZNv89s9bDZSovv3bZQpUNOmmQK1L80/cV4KEu95YUJWi75u5PhboFoKUJBnZ4FQcoqhDw==",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"@types/json-schema": "^7.0.12",
+				"@types/semver": "^7.5.0",
+				"@typescript-eslint/scope-manager": "6.4.1",
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/typescript-estree": "6.4.1",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.1.tgz",
+			"integrity": "sha512-y/TyRJsbZPkJIZQXrHfdnxVnxyKegnpEvnRGNam7s3TRR2ykGefEWOhaef00/UUN3IZxizS7BTO3svd3lCOJRQ==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"eslint-visitor-keys": "^3.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.4.1.tgz",
+			"integrity": "sha512-610G6KHymg9V7EqOaNBMtD1GgpAmGROsmfHJPXNLCU9bfIuLrkdOygltK784F6Crboyd5tBFayPB7Sf0McrQwg==",
+			"dependencies": {
+				"@typescript-eslint/scope-manager": "6.4.1",
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/typescript-estree": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.1.tgz",
+			"integrity": "sha512-p/OavqOQfm4/Hdrr7kvacOSFjwQ2rrDVJRPxt/o0TOWdFnjJptnjnZ+sYDR7fi4OimvIuKp+2LCkc+rt9fIW+A==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.1.tgz",
+			"integrity": "sha512-zAAopbNuYu++ijY1GV2ylCsQsi3B8QvfPHVqhGdDcbx/NK5lkqMnCGU53amAjccSpk+LfeONxwzUhDzArSfZJg==",
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.1.tgz",
+			"integrity": "sha512-xF6Y7SatVE/OyV93h1xGgfOkHr2iXuo8ip0gbfzaKeGGuKiAnzS+HtVhSPx8Www243bwlW8IF7X0/B62SzFftg==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.1.tgz",
+			"integrity": "sha512-y/TyRJsbZPkJIZQXrHfdnxVnxyKegnpEvnRGNam7s3TRR2ykGefEWOhaef00/UUN3IZxizS7BTO3svd3lCOJRQ==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"eslint-visitor-keys": "^3.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/scope-manager": {
+			"version": "5.62.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
+			"integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+			"dependencies": {
+				"@typescript-eslint/types": "5.62.0",
+				"@typescript-eslint/visitor-keys": "5.62.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.4.1.tgz",
+			"integrity": "sha512-7ON8M8NXh73SGZ5XvIqWHjgX2f+vvaOarNliGhjrJnv1vdjG0LVIz+ToYfPirOoBi56jxAKLfsLm40+RvxVVXA==",
+			"dependencies": {
+				"@typescript-eslint/typescript-estree": "6.4.1",
+				"@typescript-eslint/utils": "6.4.1",
+				"debug": "^4.3.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@types/semver": {
+			"version": "7.5.8",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+			"integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.4.1.tgz",
+			"integrity": "sha512-p/OavqOQfm4/Hdrr7kvacOSFjwQ2rrDVJRPxt/o0TOWdFnjJptnjnZ+sYDR7fi4OimvIuKp+2LCkc+rt9fIW+A==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.4.1.tgz",
+			"integrity": "sha512-zAAopbNuYu++ijY1GV2ylCsQsi3B8QvfPHVqhGdDcbx/NK5lkqMnCGU53amAjccSpk+LfeONxwzUhDzArSfZJg==",
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.4.1.tgz",
+			"integrity": "sha512-xF6Y7SatVE/OyV93h1xGgfOkHr2iXuo8ip0gbfzaKeGGuKiAnzS+HtVhSPx8Www243bwlW8IF7X0/B62SzFftg==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/visitor-keys": "6.4.1",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"semver": "^7.5.4",
+				"ts-api-utils": "^1.0.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.4.1.tgz",
+			"integrity": "sha512-F/6r2RieNeorU0zhqZNv89s9bDZSovv3bZQpUNOmmQK1L80/cV4KEu95YUJWi75u5PhboFoKUJBnZ4FQcoqhDw==",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"@types/json-schema": "^7.0.12",
+				"@types/semver": "^7.5.0",
+				"@typescript-eslint/scope-manager": "6.4.1",
+				"@typescript-eslint/types": "6.4.1",
+				"@typescript-eslint/typescript-estree": "6.4.1",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.4.1.tgz",
+			"integrity": "sha512-y/TyRJsbZPkJIZQXrHfdnxVnxyKegnpEvnRGNam7s3TRR2ykGefEWOhaef00/UUN3IZxizS7BTO3svd3lCOJRQ==",
+			"dependencies": {
+				"@typescript-eslint/types": "6.4.1",
+				"eslint-visitor-keys": "^3.4.1"
+			},
+			"engines": {
+				"node": "^16.0.0 || >=18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/types": {
+			"version": "5.62.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
+			"integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree": {
+			"version": "5.62.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
+			"integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
+			"dependencies": {
+				"@typescript-eslint/types": "5.62.0",
+				"@typescript-eslint/visitor-keys": "5.62.0",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"semver": "^7.3.7",
+				"tsutils": "^3.21.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/utils": {
+			"version": "5.62.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
+			"integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.2.0",
+				"@types/json-schema": "^7.0.9",
+				"@types/semver": "^7.3.12",
+				"@typescript-eslint/scope-manager": "5.62.0",
+				"@typescript-eslint/types": "5.62.0",
+				"@typescript-eslint/typescript-estree": "5.62.0",
+				"eslint-scope": "^5.1.1",
+				"semver": "^7.3.7"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/utils/node_modules/@types/semver": {
+			"version": "7.5.8",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
+			"integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ=="
+		},
+		"node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys": {
+			"version": "5.62.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
+			"integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
+			"dependencies": {
+				"@typescript-eslint/types": "5.62.0",
+				"eslint-visitor-keys": "^3.3.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@use-gesture/core": {
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+			"integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="
+		},
+		"node_modules/@use-gesture/react": {
+			"version": "10.3.1",
+			"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+			"integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+			"dependencies": {
+				"@use-gesture/core": "10.3.1"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8.0"
+			}
+		},
+		"node_modules/@wdio/config": {
+			"version": "8.16.20",
+			"resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.16.20.tgz",
+			"integrity": "sha512-JFD7aYs3nGF2kNhc0eV03mWFQMJku42NCBl+aedb1jzP3z6tBWV3n1a0ETS4MTLps8lFXBDZWvWEnl+ZvVrHZw==",
+			"dev": true,
+			"dependencies": {
+				"@wdio/logger": "8.16.17",
+				"@wdio/types": "8.16.12",
+				"@wdio/utils": "8.16.17",
+				"decamelize": "^6.0.0",
+				"deepmerge-ts": "^5.0.0",
+				"glob": "^10.2.2",
+				"import-meta-resolve": "^3.0.0",
+				"read-pkg-up": "^10.0.0"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/decamelize": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
+			"integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/find-up": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
+			"integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^7.1.0",
+				"path-exists": "^5.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/glob": {
+			"version": "10.4.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/hosted-git-info": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-7.0.2.tgz",
+			"integrity": "sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^10.0.1"
+			},
+			"engines": {
+				"node": "^16.14.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/json-parse-even-better-errors": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/lines-and-columns": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz",
+			"integrity": "sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/locate-path": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+			"integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^6.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/lru-cache": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/@wdio/config/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/normalize-package-data": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz",
+			"integrity": "sha512-V6gygoYb/5EmNI+MEGrWkC+e6+Rr7mTmfHrxDbLzxQogBkgzo76rkok0Am6thgSF7Mv2nLOajAJj5vDJZEFn7g==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"hosted-git-info": "^7.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-license": "^3.0.4"
+			},
+			"engines": {
+				"node": "^16.14.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/p-limit": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+			"integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+			"dev": true,
+			"dependencies": {
+				"yocto-queue": "^1.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/p-locate": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+			"integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/parse-json": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-7.1.1.tgz",
+			"integrity": "sha512-SgOTCX/EZXtZxBE5eJ97P4yGM5n37BwRU+YMsH4vNzFqJV/oWFXXCmwFlgWUM4PrakybVOueJJ6pwHqSVhTFDw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/code-frame": "^7.21.4",
+				"error-ex": "^1.3.2",
+				"json-parse-even-better-errors": "^3.0.0",
+				"lines-and-columns": "^2.0.3",
+				"type-fest": "^3.8.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/parse-json/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/path-exists": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+			"integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/read-pkg": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-8.1.0.tgz",
+			"integrity": "sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/normalize-package-data": "^2.4.1",
+				"normalize-package-data": "^6.0.0",
+				"parse-json": "^7.0.0",
+				"type-fest": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/read-pkg-up": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-10.1.0.tgz",
+			"integrity": "sha512-aNtBq4jR8NawpKJQldrQcSW9y/d+KWH4v24HWkHljOZ7H0av+YTGANBzRh9A5pw7v/bLVsLVPpOhJ7gHNVy8lA==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^6.3.0",
+				"read-pkg": "^8.1.0",
+				"type-fest": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/type-fest": {
+			"version": "4.26.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
+			"integrity": "sha512-yOGpmOAL7CkKe/91I5O3gPICmJNLJ1G4zFYVAsRHg7M64biSnPtRj0WNQt++bRkjYOqjWXrhnUw1utzmVErAdg==",
+			"dev": true,
+			"license": "(MIT OR CC0-1.0)",
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/config/node_modules/yocto-queue": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+			"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/logger": {
+			"version": "8.16.17",
+			"resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.16.17.tgz",
+			"integrity": "sha512-zeQ41z3T+b4IsrriZZipayXxLNDuGsm7TdExaviNGojPVrIsQUCSd/FvlLHM32b7ZrMyInHenu/zx1cjAZO71g==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^5.1.2",
+				"loglevel": "^1.6.0",
+				"loglevel-plugin-prefix": "^0.8.4",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			}
+		},
+		"node_modules/@wdio/logger/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/logger/node_modules/chalk": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+			"dev": true,
+			"engines": {
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/logger/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/protocols": {
+			"version": "8.16.5",
+			"resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.16.5.tgz",
+			"integrity": "sha512-u9I57hIqmcOgrDH327ZCc2GTXv2YFN5bg6UaA3OUoJU7eJgGYHFB6RrjiNjLXer68iIx07wwVM70V/1xzijd3Q==",
+			"dev": true
+		},
+		"node_modules/@wdio/repl": {
+			"version": "8.10.1",
+			"resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-8.10.1.tgz",
+			"integrity": "sha512-VZ1WFHTNKjR8Ga97TtV2SZM6fvRjWbYI2i/f4pJB4PtusorKvONAMJf2LQcUBIyzbVobqr7KSrcjmSwRolI+yw==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "^20.1.0"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			}
+		},
+		"node_modules/@wdio/repl/node_modules/@types/node": {
+			"version": "20.16.15",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.15.tgz",
+			"integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
+		"node_modules/@wdio/repl/node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@wdio/types": {
+			"version": "8.16.12",
+			"resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.16.12.tgz",
+			"integrity": "sha512-TjCZJ3P9ual21G0dRv0lC9QgHGd3Igv+guEINevBKf/oD4/N84PvQ2eZG1nSbZ3xh8X/dvi+O64A6VEv43gx2w==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "^20.1.0"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			}
+		},
+		"node_modules/@wdio/types/node_modules/@types/node": {
+			"version": "20.16.15",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.15.tgz",
+			"integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
+			}
+		},
+		"node_modules/@wdio/types/node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@wdio/utils": {
+			"version": "8.16.17",
+			"resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.16.17.tgz",
+			"integrity": "sha512-jDyOrxbQRDJO0OPt9UBgnwpUIKqtRn4+R0gR5VSDrIG/in5ZZg28yer8urrIVY4yY9ut5r/22VaMHZI9LEXF5w==",
+			"dev": true,
+			"dependencies": {
+				"@puppeteer/browsers": "^1.6.0",
+				"@wdio/logger": "8.16.17",
+				"@wdio/types": "8.16.12",
+				"decamelize": "^6.0.0",
+				"deepmerge-ts": "^5.1.0",
+				"edgedriver": "^5.3.5",
+				"geckodriver": "^4.2.0",
+				"get-port": "^7.0.0",
+				"got": "^13.0.0",
+				"import-meta-resolve": "^3.0.0",
+				"locate-app": "^2.1.0",
+				"safaridriver": "^0.1.0",
+				"split2": "^4.2.0",
+				"wait-port": "^1.0.4"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/@puppeteer/browsers": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.9.1.tgz",
+			"integrity": "sha512-PuvK6xZzGhKPvlx3fpfdM2kYY3P/hB1URtK8wA7XUJ6prn6pp22zvJHu48th0SGcHL9SutbPHrFuQgfXTFobWA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "4.3.4",
+				"extract-zip": "2.0.1",
+				"progress": "2.0.3",
+				"proxy-agent": "6.3.1",
+				"tar-fs": "3.0.4",
+				"unbzip2-stream": "1.4.3",
+				"yargs": "17.7.2"
+			},
+			"bin": {
+				"browsers": "lib/cjs/main-cli.js"
+			},
+			"engines": {
+				"node": ">=16.3.0"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/@sindresorhus/is": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-5.6.0.tgz",
+			"integrity": "sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/is?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/@szmarczak/http-timer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz",
+			"integrity": "sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==",
+			"dev": true,
+			"dependencies": {
+				"defer-to-connect": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/cacheable-lookup": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
+			"integrity": "sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/cacheable-request": {
+			"version": "10.2.14",
+			"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-10.2.14.tgz",
+			"integrity": "sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/http-cache-semantics": "^4.0.2",
+				"get-stream": "^6.0.1",
+				"http-cache-semantics": "^4.1.1",
+				"keyv": "^4.5.3",
+				"mimic-response": "^4.0.0",
+				"normalize-url": "^8.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/cacheable-request/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dev": true,
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/decamelize": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
+			"integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/@wdio/utils/node_modules/extract-zip": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+			"integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.1.1",
+				"get-stream": "^5.1.0",
+				"yauzl": "^2.10.0"
+			},
+			"bin": {
+				"extract-zip": "cli.js"
+			},
+			"engines": {
+				"node": ">= 10.17.0"
+			},
+			"optionalDependencies": {
+				"@types/yauzl": "^2.9.1"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/get-port": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/get-port/-/get-port-7.1.0.tgz",
+			"integrity": "sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/got": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/got/-/got-13.0.0.tgz",
+			"integrity": "sha512-XfBk1CxOOScDcMr9O1yKkNaQyy865NbYs+F7dr4H0LZMVgCj2Le59k6PqbNHoL5ToeaEQUYh6c6yMfVcc6SJxA==",
+			"dev": true,
+			"dependencies": {
+				"@sindresorhus/is": "^5.2.0",
+				"@szmarczak/http-timer": "^5.0.1",
+				"cacheable-lookup": "^7.0.0",
+				"cacheable-request": "^10.2.8",
+				"decompress-response": "^6.0.0",
+				"form-data-encoder": "^2.1.2",
+				"get-stream": "^6.0.1",
+				"http2-wrapper": "^2.1.10",
+				"lowercase-keys": "^3.0.0",
+				"p-cancelable": "^3.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/got?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/got/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dev": true,
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/http2-wrapper": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.2.1.tgz",
+			"integrity": "sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==",
+			"dev": true,
+			"dependencies": {
+				"quick-lru": "^5.1.1",
+				"resolve-alpn": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=10.19.0"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/lowercase-keys": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
+			"integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/mimic-response": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-4.0.0.tgz",
+			"integrity": "sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/normalize-url": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.1.tgz",
+			"integrity": "sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/p-cancelable": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz",
+			"integrity": "sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/proxy-agent": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.3.1.tgz",
+			"integrity": "sha512-Rb5RVBy1iyqOtNl15Cw/llpeLH8bsb37gM1FUfKQ+Wck6xHlbAhWGUFiTRHtkjqGTA5pSHz6+0hrPW/oECihPQ==",
+			"dev": true,
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "^4.3.4",
+				"http-proxy-agent": "^7.0.0",
+				"https-proxy-agent": "^7.0.2",
+				"lru-cache": "^7.14.1",
+				"pac-proxy-agent": "^7.0.1",
+				"proxy-from-env": "^1.1.0",
+				"socks-proxy-agent": "^8.0.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/responselike": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/responselike/-/responselike-3.0.0.tgz",
+			"integrity": "sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==",
+			"dev": true,
+			"dependencies": {
+				"lowercase-keys": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/socks-proxy-agent": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+			"integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.1",
+				"debug": "^4.3.4",
+				"socks": "^2.8.3"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/split2": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
+			"integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.x"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/tar-fs": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+			"integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+			"dev": true,
+			"dependencies": {
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"dev": true,
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dev": true,
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@wdio/utils/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@webassemblyjs/ast": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+			"integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/helper-module-context": "1.9.0",
+				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+				"@webassemblyjs/wast-parser": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/floating-point-hex-parser": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+			"integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/helper-api-error": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+			"integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/helper-buffer": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+			"integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/helper-code-frame": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+			"integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/wast-printer": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/helper-fsm": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+			"integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/helper-module-context": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+			"integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/helper-numbers": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+			"integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+			"license": "MIT",
+			"dependencies": {
+				"@webassemblyjs/floating-point-hex-parser": "1.13.2",
+				"@webassemblyjs/helper-api-error": "1.13.2",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webassemblyjs/helper-numbers/node_modules/@webassemblyjs/floating-point-hex-parser": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+			"integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+			"license": "MIT"
+		},
+		"node_modules/@webassemblyjs/helper-numbers/node_modules/@webassemblyjs/helper-api-error": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+			"integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+			"license": "MIT"
+		},
+		"node_modules/@webassemblyjs/helper-wasm-bytecode": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+			"integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/helper-wasm-section": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+			"integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-buffer": "1.9.0",
+				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+				"@webassemblyjs/wasm-gen": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/ieee754": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+			"integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+			"dev": true,
+			"dependencies": {
+				"@xtuc/ieee754": "^1.2.0"
+			}
+		},
+		"node_modules/@webassemblyjs/leb128": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+			"integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+			"dev": true,
+			"dependencies": {
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webassemblyjs/utf8": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+			"integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
+			"dev": true
+		},
+		"node_modules/@webassemblyjs/wasm-edit": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+			"integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-buffer": "1.9.0",
+				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+				"@webassemblyjs/helper-wasm-section": "1.9.0",
+				"@webassemblyjs/wasm-gen": "1.9.0",
+				"@webassemblyjs/wasm-opt": "1.9.0",
+				"@webassemblyjs/wasm-parser": "1.9.0",
+				"@webassemblyjs/wast-printer": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-gen": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+			"integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+				"@webassemblyjs/ieee754": "1.9.0",
+				"@webassemblyjs/leb128": "1.9.0",
+				"@webassemblyjs/utf8": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-opt": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+			"integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-buffer": "1.9.0",
+				"@webassemblyjs/wasm-gen": "1.9.0",
+				"@webassemblyjs/wasm-parser": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-parser": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+			"integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-api-error": "1.9.0",
+				"@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+				"@webassemblyjs/ieee754": "1.9.0",
+				"@webassemblyjs/leb128": "1.9.0",
+				"@webassemblyjs/utf8": "1.9.0"
+			}
+		},
+		"node_modules/@webassemblyjs/wast-parser": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+			"integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/floating-point-hex-parser": "1.9.0",
+				"@webassemblyjs/helper-api-error": "1.9.0",
+				"@webassemblyjs/helper-code-frame": "1.9.0",
+				"@webassemblyjs/helper-fsm": "1.9.0",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webassemblyjs/wast-printer": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+			"integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/wast-parser": "1.9.0",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webpack-cli/configtest": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+			"integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"peerDependencies": {
+				"webpack": "5.x.x",
+				"webpack-cli": "5.x.x"
+			}
+		},
+		"node_modules/@webpack-cli/info": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+			"integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"peerDependencies": {
+				"webpack": "5.x.x",
+				"webpack-cli": "5.x.x"
+			}
+		},
+		"node_modules/@webpack-cli/serve": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+			"integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"peerDependencies": {
+				"webpack": "5.x.x",
+				"webpack-cli": "5.x.x"
+			},
+			"peerDependenciesMeta": {
+				"webpack-dev-server": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@wordpress/a11y": {
+			"resolved": "packages/a11y",
+			"link": true
+		},
+		"node_modules/@wordpress/annotations": {
+			"resolved": "packages/annotations",
+			"link": true
+		},
+		"node_modules/@wordpress/api-fetch": {
+			"resolved": "packages/api-fetch",
+			"link": true
+		},
+		"node_modules/@wordpress/autop": {
+			"resolved": "packages/autop",
+			"link": true
+		},
+		"node_modules/@wordpress/babel-plugin-import-jsx-pragma": {
+			"resolved": "packages/babel-plugin-import-jsx-pragma",
+			"link": true
+		},
+		"node_modules/@wordpress/babel-plugin-makepot": {
+			"resolved": "packages/babel-plugin-makepot",
+			"link": true
+		},
+		"node_modules/@wordpress/babel-preset-default": {
+			"resolved": "packages/babel-preset-default",
+			"link": true
+		},
+		"node_modules/@wordpress/base-styles": {
+			"resolved": "packages/base-styles",
+			"link": true
+		},
+		"node_modules/@wordpress/blob": {
+			"resolved": "packages/blob",
+			"link": true
+		},
+		"node_modules/@wordpress/block-directory": {
+			"resolved": "packages/block-directory",
+			"link": true
+		},
+		"node_modules/@wordpress/block-editor": {
+			"resolved": "packages/block-editor",
+			"link": true
+		},
+		"node_modules/@wordpress/block-library": {
+			"resolved": "packages/block-library",
+			"link": true
+		},
+		"node_modules/@wordpress/block-serialization-default-parser": {
+			"resolved": "packages/block-serialization-default-parser",
+			"link": true
+		},
+		"node_modules/@wordpress/block-serialization-spec-parser": {
+			"resolved": "packages/block-serialization-spec-parser",
+			"link": true
+		},
+		"node_modules/@wordpress/blocks": {
+			"resolved": "packages/blocks",
+			"link": true
+		},
+		"node_modules/@wordpress/browserslist-config": {
+			"resolved": "packages/browserslist-config",
+			"link": true
+		},
+		"node_modules/@wordpress/commands": {
+			"resolved": "packages/commands",
+			"link": true
+		},
+		"node_modules/@wordpress/components": {
+			"resolved": "packages/components",
+			"link": true
+		},
+		"node_modules/@wordpress/compose": {
+			"resolved": "packages/compose",
+			"link": true
+		},
+		"node_modules/@wordpress/core-commands": {
+			"resolved": "packages/core-commands",
+			"link": true
+		},
+		"node_modules/@wordpress/core-data": {
+			"resolved": "packages/core-data",
+			"link": true
+		},
+		"node_modules/@wordpress/create-block": {
+			"resolved": "packages/create-block",
+			"link": true
+		},
+		"node_modules/@wordpress/create-block-interactive-template": {
+			"resolved": "packages/create-block-interactive-template",
+			"link": true
+		},
+		"node_modules/@wordpress/create-block-tutorial-template": {
+			"resolved": "packages/create-block-tutorial-template",
+			"link": true
+		},
+		"node_modules/@wordpress/customize-widgets": {
+			"resolved": "packages/customize-widgets",
+			"link": true
+		},
+		"node_modules/@wordpress/data": {
+			"resolved": "packages/data",
+			"link": true
+		},
+		"node_modules/@wordpress/data-controls": {
+			"resolved": "packages/data-controls",
+			"link": true
+		},
+		"node_modules/@wordpress/dataviews": {
+			"resolved": "packages/dataviews",
+			"link": true
+		},
+		"node_modules/@wordpress/date": {
+			"resolved": "packages/date",
+			"link": true
+		},
+		"node_modules/@wordpress/dependency-extraction-webpack-plugin": {
+			"resolved": "packages/dependency-extraction-webpack-plugin",
+			"link": true
+		},
+		"node_modules/@wordpress/deprecated": {
+			"resolved": "packages/deprecated",
+			"link": true
+		},
+		"node_modules/@wordpress/docgen": {
+			"resolved": "packages/docgen",
+			"link": true
+		},
+		"node_modules/@wordpress/dom": {
+			"resolved": "packages/dom",
+			"link": true
+		},
+		"node_modules/@wordpress/dom-ready": {
+			"resolved": "packages/dom-ready",
+			"link": true
+		},
+		"node_modules/@wordpress/e2e-test-utils": {
+			"resolved": "packages/e2e-test-utils",
+			"link": true
+		},
+		"node_modules/@wordpress/e2e-test-utils-playwright": {
+			"resolved": "packages/e2e-test-utils-playwright",
+			"link": true
+		},
+		"node_modules/@wordpress/e2e-tests": {
+			"resolved": "packages/e2e-tests",
+			"link": true
+		},
+		"node_modules/@wordpress/edit-post": {
+			"resolved": "packages/edit-post",
+			"link": true
+		},
+		"node_modules/@wordpress/edit-site": {
+			"resolved": "packages/edit-site",
+			"link": true
+		},
+		"node_modules/@wordpress/edit-widgets": {
+			"resolved": "packages/edit-widgets",
+			"link": true
+		},
+		"node_modules/@wordpress/editor": {
+			"resolved": "packages/editor",
+			"link": true
+		},
+		"node_modules/@wordpress/element": {
+			"resolved": "packages/element",
+			"link": true
+		},
+		"node_modules/@wordpress/env": {
+			"resolved": "packages/env",
+			"link": true
+		},
+		"node_modules/@wordpress/escape-html": {
+			"resolved": "packages/escape-html",
+			"link": true
+		},
+		"node_modules/@wordpress/eslint-plugin": {
+			"resolved": "packages/eslint-plugin",
+			"link": true
+		},
+		"node_modules/@wordpress/fields": {
+			"resolved": "packages/fields",
+			"link": true
+		},
+		"node_modules/@wordpress/format-library": {
+			"resolved": "packages/format-library",
+			"link": true
+		},
+		"node_modules/@wordpress/hooks": {
+			"resolved": "packages/hooks",
+			"link": true
+		},
+		"node_modules/@wordpress/html-entities": {
+			"resolved": "packages/html-entities",
+			"link": true
+		},
+		"node_modules/@wordpress/i18n": {
+			"resolved": "packages/i18n",
+			"link": true
+		},
+		"node_modules/@wordpress/icons": {
+			"resolved": "packages/icons",
+			"link": true
+		},
+		"node_modules/@wordpress/interactivity": {
+			"resolved": "packages/interactivity",
+			"link": true
+		},
+		"node_modules/@wordpress/interactivity-router": {
+			"resolved": "packages/interactivity-router",
+			"link": true
+		},
+		"node_modules/@wordpress/interface": {
+			"resolved": "packages/interface",
+			"link": true
+		},
+		"node_modules/@wordpress/is-shallow-equal": {
+			"resolved": "packages/is-shallow-equal",
+			"link": true
+		},
+		"node_modules/@wordpress/jest-console": {
+			"resolved": "packages/jest-console",
+			"link": true
+		},
+		"node_modules/@wordpress/jest-preset-default": {
+			"resolved": "packages/jest-preset-default",
+			"link": true
+		},
+		"node_modules/@wordpress/jest-puppeteer-axe": {
+			"resolved": "packages/jest-puppeteer-axe",
+			"link": true
+		},
+		"node_modules/@wordpress/keyboard-shortcuts": {
+			"resolved": "packages/keyboard-shortcuts",
+			"link": true
+		},
+		"node_modules/@wordpress/keycodes": {
+			"resolved": "packages/keycodes",
+			"link": true
+		},
+		"node_modules/@wordpress/lazy-import": {
+			"resolved": "packages/lazy-import",
+			"link": true
+		},
+		"node_modules/@wordpress/list-reusable-blocks": {
+			"resolved": "packages/list-reusable-blocks",
+			"link": true
+		},
+		"node_modules/@wordpress/media-utils": {
+			"resolved": "packages/media-utils",
+			"link": true
+		},
+		"node_modules/@wordpress/notices": {
+			"resolved": "packages/notices",
+			"link": true
+		},
+		"node_modules/@wordpress/npm-package-json-lint-config": {
+			"resolved": "packages/npm-package-json-lint-config",
+			"link": true
+		},
+		"node_modules/@wordpress/nux": {
+			"resolved": "packages/nux",
+			"link": true
+		},
+		"node_modules/@wordpress/patterns": {
+			"resolved": "packages/patterns",
+			"link": true
+		},
+		"node_modules/@wordpress/plugins": {
+			"resolved": "packages/plugins",
+			"link": true
+		},
+		"node_modules/@wordpress/postcss-plugins-preset": {
+			"resolved": "packages/postcss-plugins-preset",
+			"link": true
+		},
+		"node_modules/@wordpress/postcss-themes": {
+			"resolved": "packages/postcss-themes",
+			"link": true
+		},
+		"node_modules/@wordpress/preferences": {
+			"resolved": "packages/preferences",
+			"link": true
+		},
+		"node_modules/@wordpress/preferences-persistence": {
+			"resolved": "packages/preferences-persistence",
+			"link": true
+		},
+		"node_modules/@wordpress/prettier-config": {
+			"resolved": "packages/prettier-config",
+			"link": true
+		},
+		"node_modules/@wordpress/primitives": {
+			"resolved": "packages/primitives",
+			"link": true
+		},
+		"node_modules/@wordpress/priority-queue": {
+			"resolved": "packages/priority-queue",
+			"link": true
+		},
+		"node_modules/@wordpress/private-apis": {
+			"resolved": "packages/private-apis",
+			"link": true
+		},
+		"node_modules/@wordpress/project-management-automation": {
+			"resolved": "packages/project-management-automation",
+			"link": true
+		},
+		"node_modules/@wordpress/react-i18n": {
+			"resolved": "packages/react-i18n",
+			"link": true
+		},
+		"node_modules/@wordpress/react-native-aztec": {
+			"resolved": "packages/react-native-aztec",
+			"link": true
+		},
+		"node_modules/@wordpress/react-native-bridge": {
+			"resolved": "packages/react-native-bridge",
+			"link": true
+		},
+		"node_modules/@wordpress/react-native-editor": {
+			"resolved": "packages/react-native-editor",
+			"link": true
+		},
+		"node_modules/@wordpress/readable-js-assets-webpack-plugin": {
+			"resolved": "packages/readable-js-assets-webpack-plugin",
+			"link": true
+		},
+		"node_modules/@wordpress/redux-routine": {
+			"resolved": "packages/redux-routine",
+			"link": true
+		},
+		"node_modules/@wordpress/report-flaky-tests": {
+			"resolved": "packages/report-flaky-tests",
+			"link": true
+		},
+		"node_modules/@wordpress/reusable-blocks": {
+			"resolved": "packages/reusable-blocks",
+			"link": true
+		},
+		"node_modules/@wordpress/rich-text": {
+			"resolved": "packages/rich-text",
+			"link": true
+		},
+		"node_modules/@wordpress/router": {
+			"resolved": "packages/router",
+			"link": true
+		},
+		"node_modules/@wordpress/scripts": {
+			"resolved": "packages/scripts",
+			"link": true
+		},
+		"node_modules/@wordpress/server-side-render": {
+			"resolved": "packages/server-side-render",
+			"link": true
+		},
+		"node_modules/@wordpress/shortcode": {
+			"resolved": "packages/shortcode",
+			"link": true
+		},
+		"node_modules/@wordpress/style-engine": {
+			"resolved": "packages/style-engine",
+			"link": true
+		},
+		"node_modules/@wordpress/stylelint-config": {
+			"resolved": "packages/stylelint-config",
+			"link": true
+		},
+		"node_modules/@wordpress/sync": {
+			"resolved": "packages/sync",
+			"link": true
+		},
+		"node_modules/@wordpress/token-list": {
+			"resolved": "packages/token-list",
+			"link": true
+		},
+		"node_modules/@wordpress/undo-manager": {
+			"resolved": "packages/undo-manager",
+			"link": true
+		},
+		"node_modules/@wordpress/url": {
+			"resolved": "packages/url",
+			"link": true
+		},
+		"node_modules/@wordpress/viewport": {
+			"resolved": "packages/viewport",
+			"link": true
+		},
+		"node_modules/@wordpress/vips": {
+			"resolved": "packages/vips",
+			"link": true
+		},
+		"node_modules/@wordpress/warning": {
+			"resolved": "packages/warning",
+			"link": true
+		},
+		"node_modules/@wordpress/widgets": {
+			"resolved": "packages/widgets",
+			"link": true
+		},
+		"node_modules/@wordpress/wordcount": {
+			"resolved": "packages/wordcount",
+			"link": true
+		},
+		"node_modules/@xmldom/xmldom": {
+			"version": "0.8.10",
+			"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+			"integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/@xtuc/ieee754": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+			"integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+		},
+		"node_modules/@xtuc/long": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+		},
+		"node_modules/@yarnpkg/esbuild-plugin-pnp": {
+			"version": "3.0.0-rc.15",
+			"resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz",
+			"integrity": "sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"peerDependencies": {
+				"esbuild": ">=0.10.0"
+			}
+		},
+		"node_modules/@yarnpkg/fslib": {
+			"version": "2.10.3",
+			"resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz",
+			"integrity": "sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==",
+			"dev": true,
+			"dependencies": {
+				"@yarnpkg/libzip": "^2.3.0",
+				"tslib": "^1.13.0"
+			},
+			"engines": {
+				"node": ">=12 <14 || 14.2 - 14.9 || >14.10.0"
+			}
+		},
+		"node_modules/@yarnpkg/fslib/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+			"dev": true
+		},
+		"node_modules/@yarnpkg/libzip": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@yarnpkg/libzip/-/libzip-2.3.0.tgz",
+			"integrity": "sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==",
+			"dev": true,
+			"dependencies": {
+				"@types/emscripten": "^1.39.6",
+				"tslib": "^1.13.0"
+			},
+			"engines": {
+				"node": ">=12 <14 || 14.2 - 14.9 || >14.10.0"
+			}
+		},
+		"node_modules/@yarnpkg/libzip/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+			"dev": true
+		},
+		"node_modules/@yarnpkg/lockfile": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+			"integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+			"dev": true
+		},
+		"node_modules/@yarnpkg/parsers": {
+			"version": "3.0.0-rc.46",
+			"resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.46.tgz",
+			"integrity": "sha512-aiATs7pSutzda/rq8fnuPwTglyVwjM22bNnK2ZgjrpAjQHSSl3lztd2f9evst1W/qnC58DRz7T7QndUDumAR4Q==",
+			"dev": true,
+			"dependencies": {
+				"js-yaml": "^3.10.0",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=14.15.0"
+			}
+		},
+		"node_modules/@zkochan/js-yaml": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
+			"integrity": "sha512-nzvgl3VfhcELQ8LyVrYOru+UtAy1nrygk2+AGbTm8a5YcO6o8lSjAT+pfg3vJWxIoZKOUhrK6UU7xW/+00kQrg==",
+			"dev": true,
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/@zkochan/js-yaml/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true
+		},
+		"node_modules/abab": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+			"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
+		},
+		"node_modules/abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+			"dev": true
+		},
+		"node_modules/abort-controller": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+			"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+			"dependencies": {
+				"event-target-shim": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=6.5"
+			}
+		},
+		"node_modules/accepts": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+			"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+			"dependencies": {
+				"mime-types": "~2.1.34",
+				"negotiator": "0.6.3"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/acorn": {
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+			"integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+			"dev": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-jsx": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+			"integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+			"peerDependencies": {
+				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/acorn-walk": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/add-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz",
+			"integrity": "sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==",
+			"dev": true
+		},
+		"node_modules/address": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+			"integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/adm-zip": {
+			"version": "0.5.9",
+			"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.9.tgz",
+			"integrity": "sha512-s+3fXLkeeLjZ2kLjCBwQufpI5fuN+kIGBxu6530nVQZGVol0d7Y/M88/xw9HGGUcJjKf8LutN3VPRUBq6N7Ajg==",
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"dependencies": {
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
+		"node_modules/agentkeepalive": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz",
+			"integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==",
+			"dev": true,
+			"dependencies": {
+				"humanize-ms": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 8.0.0"
+			}
+		},
+		"node_modules/aggregate-error": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+			"integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+			"license": "MIT",
+			"dependencies": {
+				"clean-stack": "^2.0.0",
+				"indent-string": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/aggregate-error/node_modules/indent-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ajv": {
+			"version": "8.7.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.7.1.tgz",
+			"integrity": "sha512-gPpOObTO1QjbnN1sVMjJcp1TF9nggMfO4MBR5uQl6ZVTOaEPq5i4oq/6R9q2alMMPB3eg53wFv1RuJBLuxf3Hw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/ajv-errors": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+			"integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+			"peerDependencies": {
+				"ajv": ">=5.0.0"
+			}
+		},
+		"node_modules/ajv-formats": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+			"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+			"dependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/ajv/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/anser": {
+			"version": "1.4.10",
+			"resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
+			"integrity": "sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww=="
+		},
+		"node_modules/ansi-colors": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+			"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ansi-escapes": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+			"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+			"dependencies": {
+				"type-fest": "^0.21.3"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/ansi-escapes/node_modules/type-fest": {
+			"version": "0.21.3",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+			"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/ansi-fragments": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-fragments/-/ansi-fragments-0.2.1.tgz",
+			"integrity": "sha512-DykbNHxuXQwUDRv5ibc2b0x7uw7wmwOGLBUd5RmaQ5z8Lhx19vwvKV+FAsM5rEA6dEcHxX+/Ad5s9eF2k2bB+w==",
+			"dependencies": {
+				"colorette": "^1.0.7",
+				"slice-ansi": "^2.0.0",
+				"strip-ansi": "^5.0.0"
+			}
+		},
+		"node_modules/ansi-fragments/node_modules/ansi-regex": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+			"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ansi-fragments/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/ansi-fragments/node_modules/slice-ansi": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
+			"integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.0",
+				"astral-regex": "^1.0.0",
+				"is-fullwidth-code-point": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ansi-fragments/node_modules/strip-ansi": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+			"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+			"dependencies": {
+				"ansi-regex": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ansi-html-community": {
+			"version": "0.0.8",
+			"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+			"integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+			"engines": [
+				"node >= 0.8.0"
+			],
+			"bin": {
+				"ansi-html": "bin/ansi-html"
+			}
+		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-sequence-parser": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz",
+			"integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==",
+			"dev": true
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/ansi-styles/node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/ansi-styles/node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
+		"node_modules/any-observable": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz",
+			"integrity": "sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/anymatch": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+			"dependencies": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/app-root-dir": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
+			"integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
+			"dev": true
+		},
+		"node_modules/app-root-path": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
+			"integrity": "sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==",
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
+		"node_modules/appdirsjs": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/appdirsjs/-/appdirsjs-1.2.7.tgz",
+			"integrity": "sha512-Quji6+8kLBC3NnBeo14nPDq0+2jUs5s3/xEye+udFHumHhRk4M7aAMXp/PBJqkKYGuuyR9M/6Dq7d2AViiGmhw=="
+		},
+		"node_modules/appium": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/appium/-/appium-2.0.0.tgz",
+			"integrity": "sha512-SfpaYI35aM2KcShL0gOMDcni9CIev4X+WfEFfncsoM+S3dyPd++FjwoH2pmRDk4yHTDNz8gCTbUizQN8fJgYpw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"@appium/base-driver": "^9.3.15",
+				"@appium/base-plugin": "^2.2.15",
+				"@appium/docutils": "^0.4.4",
+				"@appium/schema": "^0.3.1",
+				"@appium/support": "^4.1.2",
+				"@appium/types": "^0.13.2",
+				"@sidvind/better-ajv-errors": "2.1.0",
+				"@types/argparse": "2.0.10",
+				"@types/bluebird": "3.5.38",
+				"@types/fancy-log": "2.0.0",
+				"@types/semver": "7.5.0",
+				"@types/teen_process": "2.0.0",
+				"@types/wrap-ansi": "3.0.0",
+				"ajv": "8.12.0",
+				"ajv-formats": "2.1.1",
+				"argparse": "2.0.1",
+				"async-lock": "1.4.0",
+				"asyncbox": "2.9.4",
+				"axios": "1.4.0",
+				"bluebird": "3.7.2",
+				"cross-env": "7.0.3",
+				"find-up": "5.0.0",
+				"glob": "8.1.0",
+				"lilconfig": "2.1.0",
+				"lodash": "4.17.21",
+				"npmlog": "7.0.1",
+				"ora": "5.4.1",
+				"package-changed": "3.0.0",
+				"resolve-from": "5.0.0",
+				"semver": "7.5.3",
+				"source-map-support": "0.5.21",
+				"teen_process": "2.0.2",
+				"type-fest": "3.11.1",
+				"winston": "3.9.0",
+				"wrap-ansi": "7.0.0",
+				"yaml": "2.3.1"
+			},
+			"bin": {
+				"appium": "index.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0",
+				"npm": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/@types/semver": {
+			"version": "7.5.0",
+			"resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz",
+			"integrity": "sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/ajv": {
+			"version": "8.12.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+			"integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/appium/node_modules/are-we-there-yet": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-4.0.2.tgz",
+			"integrity": "sha512-ncSWAawFhKMJDTdoAeOV+jyW1VCMj5QIAwULIBV0SSR7B/RLPPEQiknKcg/RIIZlUQrxELpsxMiTUoAQ4sIUyg==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/appium/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/axios": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+			"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+			"dev": true,
+			"dependencies": {
+				"follow-redirects": "^1.15.0",
+				"form-data": "^4.0.0",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
+		"node_modules/appium/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/appium/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dev": true,
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/cross-env": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+			"integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.1"
+			},
+			"bin": {
+				"cross-env": "src/bin/cross-env.js",
+				"cross-env-shell": "src/bin/cross-env-shell.js"
+			},
+			"engines": {
+				"node": ">=10.14",
+				"npm": ">=6",
+				"yarn": ">=1"
+			}
+		},
+		"node_modules/appium/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/appium/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/gauge": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-5.0.2.tgz",
+			"integrity": "sha512-pMaFftXPtiGIHCJHdcUUx9Rby/rFT/Kkt3fIIGCs+9PMDIljSyRiqraTlxNtBReJRDfUefpa263RQ3vnp5G/LQ==",
+			"dev": true,
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.3",
+				"console-control-strings": "^1.1.0",
+				"has-unicode": "^2.0.1",
+				"signal-exit": "^4.0.1",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.5"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/appium/node_modules/glob": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^5.0.1",
+				"once": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/appium/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/appium/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/appium/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/appium/node_modules/npmlog": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-7.0.1.tgz",
+			"integrity": "sha512-uJ0YFk/mCQpLBt+bxN88AKd+gyqZvZDbtiNxk6Waqcj2aPRyfVx8ITawkyQynxUagInjdYT1+qj4NfA5KJJUxg==",
+			"dev": true,
+			"dependencies": {
+				"are-we-there-yet": "^4.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^5.0.0",
+				"set-blocking": "^2.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/appium/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dev": true,
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/restore-cursor/node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/semver": {
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/appium/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/appium/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/appium/node_modules/type-fest": {
+			"version": "3.11.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.11.1.tgz",
+			"integrity": "sha512-aCuRNRERRVh33lgQaJRlUxZqzfhzwTrsE98Mc3o3VXqmiaQdHacgUtJ0esp+7MvZ92qhtzKPeusaX6vIEcoreA==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/appium/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/appium/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/appium/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
+		},
+		"node_modules/appium/node_modules/yaml": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+			"integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+			"dev": true,
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/aproba": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+			"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+			"dev": true
+		},
+		"node_modules/archiver": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/archiver/-/archiver-6.0.1.tgz",
+			"integrity": "sha512-CXGy4poOLBKptiZH//VlWdFuUC1RESbdZjGjILwBuZ73P7WkAUN0htfSfBq/7k6FRFlpu7bg4JOkj1vU9G6jcQ==",
+			"dev": true,
+			"dependencies": {
+				"archiver-utils": "^4.0.1",
+				"async": "^3.2.4",
+				"buffer-crc32": "^0.2.1",
+				"readable-stream": "^3.6.0",
+				"readdir-glob": "^1.1.2",
+				"tar-stream": "^3.0.0",
+				"zip-stream": "^5.0.1"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			}
+		},
+		"node_modules/archiver-utils": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-4.0.1.tgz",
+			"integrity": "sha512-Q4Q99idbvzmgCTEAAhi32BkOyq8iVI5EwdO0PmBDSGIzzjYNdcFn7Q7k3OzbLy4kLUPXfJtG6fO2RjftXbobBg==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^8.0.0",
+				"graceful-fs": "^4.2.0",
+				"lazystream": "^1.0.0",
+				"lodash": "^4.17.15",
+				"normalize-path": "^3.0.0",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			}
+		},
+		"node_modules/archiver-utils/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/archiver-utils/node_modules/glob": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^5.0.1",
+				"once": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/archiver-utils/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/archiver-utils/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/archiver/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/archiver/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"dev": true,
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
+		"node_modules/are-docs-informative": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz",
+			"integrity": "sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/are-we-there-yet": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
+			"integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+			"dev": true,
+			"dependencies": {
+				"delegates": "^1.0.0",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/are-we-there-yet/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/arg": {
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+			"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+			"dev": true
+		},
+		"node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
+		"node_modules/argparse/node_modules/sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+		},
+		"node_modules/aria-hidden": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+			"integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/aria-query": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+			"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+			"dependencies": {
+				"@babel/runtime": "^7.10.2",
+				"@babel/runtime-corejs3": "^7.10.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/arr-diff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+			"integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/arr-flatten": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+			"integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/arr-union": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+			"integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-buffer-byte-length": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+			"integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"is-array-buffer": "^3.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/array-differ": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+			"integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/array-flatten": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+			"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+		},
+		"node_modules/array-ify": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
+			"integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
+			"dev": true
+		},
+		"node_modules/array-includes": {
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+			"integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4",
+				"get-intrinsic": "^1.1.3",
+				"is-string": "^1.0.7"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/array-iterate": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/array-iterate/-/array-iterate-1.1.2.tgz",
+			"integrity": "sha512-1hWSHTIlG/8wtYD+PPX5AOBtKWngpDFjrsrHgZpe+JdgNGz0udYu6ZIkAa/xuenIUEqFv7DvE2Yr60jxweJSrQ=="
+		},
+		"node_modules/array-union": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+			"integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
+			"dependencies": {
+				"array-uniq": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-uniq": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+			"integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array-unique": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+			"integrity": "sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/array.prototype.flat": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
+			"integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4",
+				"es-shim-unscopables": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/array.prototype.flatmap": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+			"integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4",
+				"es-shim-unscopables": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/arraybuffer.prototype.slice": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
+			"integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
+			"dependencies": {
+				"array-buffer-byte-length": "^1.0.0",
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.2.0",
+				"get-intrinsic": "^1.2.1",
+				"is-array-buffer": "^3.0.2",
+				"is-shared-array-buffer": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/arrify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+			"integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/asap": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+		},
+		"node_modules/asn1.js": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+			"integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^4.0.0",
+				"inherits": "^2.0.1",
+				"minimalistic-assert": "^1.0.0",
+				"safer-buffer": "^2.1.0"
+			}
+		},
+		"node_modules/asn1.js/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+			"dev": true
+		},
+		"node_modules/assert": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/assert/-/assert-1.5.1.tgz",
+			"integrity": "sha512-zzw1uCAgLbsKwBfFc8CX78DDg+xZeBksSO3vwVIDDN5i94eOrPsSSyiVhmsSABFDM/OcpE2aagCat9dnWQLG1A==",
+			"dev": true,
+			"dependencies": {
+				"object.assign": "^4.1.4",
+				"util": "^0.10.4"
+			}
+		},
+		"node_modules/assert/node_modules/util": {
+			"version": "0.10.4",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+			"integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "2.0.3"
+			}
+		},
+		"node_modules/assign-symbols": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+			"integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/ast-types": {
+			"version": "0.16.1",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+			"integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/ast-types-flow": {
+			"version": "0.0.7",
+			"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+			"integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
+		},
+		"node_modules/astral-regex": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+			"integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/astray": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/astray/-/astray-1.1.1.tgz",
+			"integrity": "sha512-LizvbENqdc8tdvrms/YyYoTtlr43INJni4YZSFr8nNdfOgafi82Hcrfhjm0MdwLhRFBrDhRwtH/0fnntlESxsQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"optionalDependencies": {
+				"@types/estree": "^0.0.45"
+			}
+		},
+		"node_modules/astray/node_modules/@types/estree": {
+			"version": "0.0.45",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz",
+			"integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/async": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+			"integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+			"dev": true
+		},
+		"node_modules/async-each": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.6.tgz",
+			"integrity": "sha512-c646jH1avxr+aVpndVMeAfYw7wAa6idufrlN3LPA4PmKS0QEGp6PIC9nwz0WQkkvBGAMEki3pFdtxaF39J9vvg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://paulmillr.com/funding/"
+				}
+			],
+			"optional": true
+		},
+		"node_modules/async-limiter": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+		},
+		"node_modules/async-lock": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/async-lock/-/async-lock-1.4.0.tgz",
+			"integrity": "sha512-coglx5yIWuetakm3/1dsX9hxCNox22h7+V80RQOu2XUUMidtArxKoZoOtHUPuR84SycKTXzgGzAUR5hJxujyJQ==",
+			"dev": true
+		},
+		"node_modules/asyncbox": {
+			"version": "2.9.4",
+			"resolved": "https://registry.npmjs.org/asyncbox/-/asyncbox-2.9.4.tgz",
+			"integrity": "sha512-TCuA73K6Gvn+5tFGsWf4jc+PsR9RmYXw/AF0mv+CRB3VhHLjqHh/w9gPvYILnV0RcRFfjADHtzZexpxWlsP3Tg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.0.0",
+				"@types/bluebird": "^3.5.37",
+				"bluebird": "^3.5.1",
+				"lodash": "^4.17.4",
+				"source-map-support": "^0.5.5"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+		},
+		"node_modules/at-least-node": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+			"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/atob": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+			"bin": {
+				"atob": "bin/atob.js"
+			},
+			"engines": {
+				"node": ">= 4.5.0"
+			}
+		},
+		"node_modules/atob-lite": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/atob-lite/-/atob-lite-2.0.0.tgz",
+			"integrity": "sha512-LEeSAWeh2Gfa2FtlQE1shxQ8zi5F9GHarrGKz08TMdODD5T4eH6BMsvtnhbWZ+XQn+Gb6om/917ucvRu7l7ukw==",
+			"dev": true
+		},
+		"node_modules/autoprefixer": {
+			"version": "10.4.14",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+			"integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
 				},
-				"simple-swizzle": {
-					"version": "0.2.2",
-					"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-					"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-					"dev": true,
-					"requires": {
-						"is-arrayish": "^0.3.1"
-					}
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/autoprefixer"
+				}
+			],
+			"dependencies": {
+				"browserslist": "^4.21.5",
+				"caniuse-lite": "^1.0.30001464",
+				"fraction.js": "^4.2.0",
+				"normalize-range": "^0.1.2",
+				"picocolors": "^1.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"bin": {
+				"autoprefixer": "bin/autoprefixer"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/autoprefixer/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/autosize": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz",
+			"integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA=="
+		},
+		"node_modules/available-typed-arrays": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+			"integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/axe-core": {
+			"version": "4.7.2",
+			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
+			"integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/axios": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
+			"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+			"dev": true,
+			"dependencies": {
+				"follow-redirects": "^1.15.0",
+				"form-data": "^4.0.0",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
+		"node_modules/axobject-query": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+			"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+		},
+		"node_modules/b4a": {
+			"version": "1.6.4",
+			"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+			"integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw=="
+		},
+		"node_modules/babel-core": {
+			"version": "7.0.0-bridge.0",
+			"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
+			"integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/babel-jest": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
+			"integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==",
+			"dependencies": {
+				"@jest/transform": "^29.7.0",
+				"@types/babel__core": "^7.1.14",
+				"babel-plugin-istanbul": "^6.1.1",
+				"babel-preset-jest": "^29.6.3",
+				"chalk": "^4.0.0",
+				"graceful-fs": "^4.2.9",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.8.0"
+			}
+		},
+		"node_modules/babel-loader": {
+			"version": "9.2.1",
+			"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz",
+			"integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==",
+			"license": "MIT",
+			"dependencies": {
+				"find-cache-dir": "^4.0.0",
+				"schema-utils": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0",
+				"webpack": ">=5"
+			}
+		},
+		"node_modules/babel-loader/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/babel-loader/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/babel-loader/node_modules/find-cache-dir": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
+			"integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==",
+			"dependencies": {
+				"common-path-prefix": "^3.0.0",
+				"pkg-dir": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/find-up": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
+			"integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
+			"dependencies": {
+				"locate-path": "^7.1.0",
+				"path-exists": "^5.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/babel-loader/node_modules/locate-path": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+			"integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+			"dependencies": {
+				"p-locate": "^6.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/p-limit": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+			"integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+			"dependencies": {
+				"yocto-queue": "^1.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/p-locate": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+			"integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+			"dependencies": {
+				"p-limit": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/path-exists": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+			"integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/babel-loader/node_modules/pkg-dir": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
+			"integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==",
+			"dependencies": {
+				"find-up": "^6.3.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-loader/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/babel-loader/node_modules/yocto-queue": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+			"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/babel-plugin-add-react-displayname": {
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
+			"integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
+			"dev": true
+		},
+		"node_modules/babel-plugin-inline-json-import": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-inline-json-import/-/babel-plugin-inline-json-import-0.3.2.tgz",
+			"integrity": "sha512-QNNJx08KjmMT25Cw7rAPQ6dlREDPiZGDyApHL8KQ9vrQHbrr4PTi7W8g1tMMZPz0jEMd39nx/eH7xjnDNxq5sA==",
+			"dev": true,
+			"dependencies": {
+				"decache": "^4.5.1"
+			}
+		},
+		"node_modules/babel-plugin-istanbul": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+			"integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.0.0",
+				"@istanbuljs/load-nyc-config": "^1.0.0",
+				"@istanbuljs/schema": "^0.1.2",
+				"istanbul-lib-instrument": "^5.0.4",
+				"test-exclude": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/babel-plugin-jest-hoist": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
+			"integrity": "sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==",
+			"dependencies": {
+				"@babel/template": "^7.3.3",
+				"@babel/types": "^7.3.3",
+				"@types/babel__core": "^7.1.14",
+				"@types/babel__traverse": "^7.0.6"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/babel-plugin-macros": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+			"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"cosmiconfig": "^7.0.0",
+				"resolve": "^1.19.0"
+			},
+			"engines": {
+				"node": ">=10",
+				"npm": ">=6"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2": {
+			"version": "0.4.11",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz",
+			"integrity": "sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.22.6",
+				"@babel/helper-define-polyfill-provider": "^0.6.2",
+				"semver": "^6.3.1"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs3": {
+			"version": "0.10.6",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+			"integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.6.2",
+				"core-js-compat": "^3.38.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-regenerator": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.2.tgz",
+			"integrity": "sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.6.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-react-native-classname-to-style": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-react-native-classname-to-style/-/babel-plugin-react-native-classname-to-style-1.2.2.tgz",
+			"integrity": "sha512-kavZRZ56YoYmrwuCRMY0UuCYfMPszoN7v0DLST1D+rTqkl+cFWVW3W8l//AfWsyMNHkY+UTX+RrB5K7GY9mq3w==",
+			"dev": true
+		},
+		"node_modules/babel-plugin-react-native-platform-specific-extensions": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/babel-plugin-react-native-platform-specific-extensions/-/babel-plugin-react-native-platform-specific-extensions-1.1.1.tgz",
+			"integrity": "sha512-ZNN2ImlUlcaPMfzaCw9fWmTc/Ht5ARI0n9RUqiyCdK7LalPJ7yKc+F60BcSHvMHcmA2BgVO8TpSot+dpeZPAMQ==",
+			"dev": true,
+			"dependencies": {
+				"@babel/template": "^7.0.0-beta.49"
+			}
+		},
+		"node_modules/babel-plugin-syntax-trailing-function-commas": {
+			"version": "7.0.0-beta.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
+			"integrity": "sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==",
+			"dev": true
+		},
+		"node_modules/babel-plugin-transform-flow-enums": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-enums/-/babel-plugin-transform-flow-enums-0.0.2.tgz",
+			"integrity": "sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==",
+			"dependencies": {
+				"@babel/plugin-syntax-flow": "^7.12.1"
+			}
+		},
+		"node_modules/babel-plugin-transform-remove-console": {
+			"version": "6.9.4",
+			"resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
+			"integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
+			"dev": true
+		},
+		"node_modules/babel-preset-current-node-syntax": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
+			"integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+			"dependencies": {
+				"@babel/plugin-syntax-async-generators": "^7.8.4",
+				"@babel/plugin-syntax-bigint": "^7.8.3",
+				"@babel/plugin-syntax-class-properties": "^7.8.3",
+				"@babel/plugin-syntax-import-meta": "^7.8.3",
+				"@babel/plugin-syntax-json-strings": "^7.8.3",
+				"@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+				"@babel/plugin-syntax-numeric-separator": "^7.8.3",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3",
+				"@babel/plugin-syntax-top-level-await": "^7.8.3"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/babel-preset-fbjs": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz",
+			"integrity": "sha512-9ywCsCvo1ojrw0b+XYk7aFvTH6D9064t0RIL1rtMf3nsa02Xw41MS7sZw216Im35xj/UY0PDBQsa1brUDDF1Ow==",
+			"dev": true,
+			"dependencies": {
+				"@babel/plugin-proposal-class-properties": "^7.0.0",
+				"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+				"@babel/plugin-syntax-class-properties": "^7.0.0",
+				"@babel/plugin-syntax-flow": "^7.0.0",
+				"@babel/plugin-syntax-jsx": "^7.0.0",
+				"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0",
+				"@babel/plugin-transform-block-scoped-functions": "^7.0.0",
+				"@babel/plugin-transform-block-scoping": "^7.0.0",
+				"@babel/plugin-transform-classes": "^7.0.0",
+				"@babel/plugin-transform-computed-properties": "^7.0.0",
+				"@babel/plugin-transform-destructuring": "^7.0.0",
+				"@babel/plugin-transform-flow-strip-types": "^7.0.0",
+				"@babel/plugin-transform-for-of": "^7.0.0",
+				"@babel/plugin-transform-function-name": "^7.0.0",
+				"@babel/plugin-transform-literals": "^7.0.0",
+				"@babel/plugin-transform-member-expression-literals": "^7.0.0",
+				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
+				"@babel/plugin-transform-object-super": "^7.0.0",
+				"@babel/plugin-transform-parameters": "^7.0.0",
+				"@babel/plugin-transform-property-literals": "^7.0.0",
+				"@babel/plugin-transform-react-display-name": "^7.0.0",
+				"@babel/plugin-transform-react-jsx": "^7.0.0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
+				"@babel/plugin-transform-spread": "^7.0.0",
+				"@babel/plugin-transform-template-literals": "^7.0.0",
+				"babel-plugin-syntax-trailing-function-commas": "^7.0.0-beta.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/babel-preset-jest": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
+			"integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
+			"dependencies": {
+				"babel-plugin-jest-hoist": "^29.6.3",
+				"babel-preset-current-node-syntax": "^1.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/babel-runtime": {
+			"version": "6.25.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.25.0.tgz",
+			"integrity": "sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==",
+			"dependencies": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.10.0"
+			}
+		},
+		"node_modules/babel-runtime/node_modules/core-js": {
+			"version": "2.6.12",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+			"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+			"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+			"hasInstallScript": true
+		},
+		"node_modules/babel-runtime/node_modules/regenerator-runtime": {
+			"version": "0.10.5",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+			"integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+		},
+		"node_modules/bail": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
+			"integrity": "sha512-1X8CnjFVQ+a+KW36uBNMTU5s8+v5FzeqrP7hTG5aTb4aPreSbZJlhwPon9VKMuEVgV++JM+SQrALY3kr7eswdg=="
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+		},
+		"node_modules/bare-events": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.1.tgz",
+			"integrity": "sha512-9GYPpsPFvrWBkelIhOhTWtkeZxVxZOdb3VnFTCzlOo3OjvmTvzLoZFUT8kNFACx0vJej6QPney1Cf9BvzCNE/A==",
+			"optional": true
+		},
+		"node_modules/bare-fs": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.2.tgz",
+			"integrity": "sha512-X9IqgvyB0/VA5OZJyb5ZstoN62AzD7YxVGog13kkfYWYqJYcK0kcqLZ6TrmH5qr4/8//ejVcX4x/a0UvaogXmA==",
+			"optional": true,
+			"dependencies": {
+				"bare-events": "^2.0.0",
+				"bare-os": "^2.0.0",
+				"bare-path": "^2.0.0",
+				"streamx": "^2.13.0"
+			}
+		},
+		"node_modules/bare-os": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.1.tgz",
+			"integrity": "sha512-OwPyHgBBMkhC29Hl3O4/YfxW9n7mdTr2+SsO29XBWKKJsbgj3mnorDB80r5TiCQgQstgE5ga1qNYrpes6NvX2w==",
+			"optional": true
+		},
+		"node_modules/bare-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.0.tgz",
+			"integrity": "sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==",
+			"optional": true,
+			"dependencies": {
+				"bare-os": "^2.1.0"
+			}
+		},
+		"node_modules/base": {
+			"version": "0.11.2",
+			"resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+			"integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+			"dev": true,
+			"dependencies": {
+				"cache-base": "^1.0.1",
+				"class-utils": "^0.3.5",
+				"component-emitter": "^1.2.1",
+				"define-property": "^1.0.0",
+				"isobject": "^3.0.1",
+				"mixin-deep": "^1.2.0",
+				"pascalcase": "^0.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/base/node_modules/define-property": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+			"integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+			"dev": true,
+			"dependencies": {
+				"is-descriptor": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/base/node_modules/is-descriptor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
+			"integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
+			"dev": true,
+			"dependencies": {
+				"is-accessor-descriptor": "^1.0.1",
+				"is-data-descriptor": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/base64-js": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+			"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"source-map-support": {
-					"version": "0.5.19",
-					"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-					"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-					"dev": true,
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"source-map": "^0.6.0"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/base64-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/base64-stream/-/base64-stream-1.0.0.tgz",
+			"integrity": "sha512-BQQZftaO48FcE1Kof9CmXMFaAdqkcNorgc8CxesZv9nMbbTF1EFyQe89UOuh//QMmdtfUDXyO8rgUalemL5ODA==",
+			"dev": true
+		},
+		"node_modules/basic-auth": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+			"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+			"dev": true,
+			"dependencies": {
+				"safe-buffer": "5.1.2"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/basic-ftp": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.3.tgz",
+			"integrity": "sha512-QHX8HLlncOLpy54mh+k/sWIFd0ThmRqwe9ZjELybGZK+tZ8rUb9VO0saKJUROTbE+KhzDUT7xziGpGrW8Kmd+g==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/batch": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+			"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+		},
+		"node_modules/before-after-hook": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-1.4.0.tgz",
+			"integrity": "sha512-l5r9ir56nda3qu14nAXIlyq1MmUSs0meCIaFAh8HwkFwP1F8eToOuS3ah2VAHHcY04jaYD7FpJC5JTXHYRbkzg==",
+			"dev": true
+		},
+		"node_modules/benchmark": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/benchmark/-/benchmark-2.1.4.tgz",
+			"integrity": "sha512-l9MlfN4M1K/H2fbhfMy3B7vJd6AGKJVQn2h6Sg/Yx+KckoUA7ewS5Vv6TjSq18ooE1kS9hhAlQRH3AkXIh/aOQ==",
+			"dev": true,
+			"dependencies": {
+				"lodash": "^4.17.4",
+				"platform": "^1.3.3"
+			}
+		},
+		"node_modules/better-opn": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+			"integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+			"dev": true,
+			"dependencies": {
+				"open": "^8.0.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/better-opn/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dev": true,
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/better-opn/node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"dev": true,
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/big-integer": {
+			"version": "1.6.51",
+			"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+			"integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/big.js": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/binary": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+			"integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+			"dev": true,
+			"dependencies": {
+				"buffers": "~0.1.1",
+				"chainsaw": "~0.1.0"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/binary-extensions": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/bindings": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+			"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"file-uri-to-path": "1.0.0"
+			}
+		},
+		"node_modules/bl": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+			"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+			"dependencies": {
+				"buffer": "^5.5.0",
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.4.0"
+			}
+		},
+		"node_modules/bl/node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"sshpk": {
-					"version": "1.16.1",
-					"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
-					"integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-					"dev": true,
-					"requires": {
-						"asn1": "~0.2.3",
-						"assert-plus": "^1.0.0",
-						"bcrypt-pbkdf": "^1.0.0",
-						"dashdash": "^1.12.0",
-						"ecc-jsbn": "~0.1.1",
-						"getpass": "^0.1.1",
-						"jsbn": "~0.1.0",
-						"safer-buffer": "^2.0.2",
-						"tweetnacl": "~0.14.0"
-					}
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"stack-trace": {
-					"version": "0.0.10",
-					"resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-					"integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
+			}
+		},
+		"node_modules/bl/node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+		},
+		"node_modules/bl/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/bluebird": {
+			"version": "3.7.2",
+			"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+			"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+			"dev": true
+		},
+		"node_modules/bn.js": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
+			"integrity": "sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==",
+			"dev": true
+		},
+		"node_modules/body-parser": {
+			"version": "1.20.1",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+			"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"content-type": "~1.0.4",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"on-finished": "2.4.1",
+				"qs": "6.11.0",
+				"raw-body": "2.5.1",
+				"type-is": "~1.6.18",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/body-parser/node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/body-parser/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/body-parser/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/body-parser/node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/body-parser/node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/bonjour-service": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
+			"integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"multicast-dns": "^7.2.5"
+			}
+		},
+		"node_modules/boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+		},
+		"node_modules/bplist-creator": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.1.tgz",
+			"integrity": "sha512-Ese7052fdWrxp/vqSJkydgx/1MdBnNOCV2XVfbmdGWD2H6EYza+Q4pyYSuVSnCUD22hfI/BFI4jHaC3NLXLlJQ==",
+			"dev": true,
+			"dependencies": {
+				"stream-buffers": "2.2.x"
+			}
+		},
+		"node_modules/bplist-parser": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
+			"integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
+			"dependencies": {
+				"big-integer": "^1.6.44"
+			},
+			"engines": {
+				"node": ">= 5.10.0"
+			}
+		},
+		"node_modules/brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"license": "MIT",
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/brorand": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+			"integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==",
+			"dev": true
+		},
+		"node_modules/browser-assert": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+			"integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+			"dev": true
+		},
+		"node_modules/browserify-aes": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+			"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+			"dev": true,
+			"dependencies": {
+				"buffer-xor": "^1.0.3",
+				"cipher-base": "^1.0.0",
+				"create-hash": "^1.1.0",
+				"evp_bytestokey": "^1.0.3",
+				"inherits": "^2.0.1",
+				"safe-buffer": "^5.0.1"
+			}
+		},
+		"node_modules/browserify-cipher": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+			"integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+			"dev": true,
+			"dependencies": {
+				"browserify-aes": "^1.0.4",
+				"browserify-des": "^1.0.0",
+				"evp_bytestokey": "^1.0.0"
+			}
+		},
+		"node_modules/browserify-des": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+			"integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+			"dev": true,
+			"dependencies": {
+				"cipher-base": "^1.0.1",
+				"des.js": "^1.0.0",
+				"inherits": "^2.0.1",
+				"safe-buffer": "^5.1.2"
+			}
+		},
+		"node_modules/browserify-rsa": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+			"integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^5.0.0",
+				"randombytes": "^2.0.1"
+			}
+		},
+		"node_modules/browserify-sign": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.2.tgz",
+			"integrity": "sha512-1rudGyeYY42Dk6texmv7c4VcQ0EsvVbLwZkA+AQB7SxvXxmcD93jcHie8bzecJ+ChDlmAm2Qyu0+Ccg5uhZXCg==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^5.2.1",
+				"browserify-rsa": "^4.1.0",
+				"create-hash": "^1.2.0",
+				"create-hmac": "^1.1.7",
+				"elliptic": "^6.5.4",
+				"inherits": "^2.0.4",
+				"parse-asn1": "^5.1.6",
+				"readable-stream": "^3.6.2",
+				"safe-buffer": "^5.2.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/browserify-sign/node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
+		"node_modules/browserify-sign/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/browserify-sign/node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"stealthy-require": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-					"integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/browserify-zlib": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+			"integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+			"dev": true,
+			"dependencies": {
+				"pako": "~1.0.5"
+			}
+		},
+		"node_modules/browserslist": {
+			"version": "4.24.0",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
+			"integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
 				},
-				"stream-buffers": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
-					"integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=",
-					"dev": true
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
 				},
-				"stream-combiner": {
-					"version": "0.2.2",
-					"resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
-					"integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
-					"dev": true,
-					"requires": {
-						"duplexer": "~0.1.1",
-						"through": "~2.3.4"
-					}
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"caniuse-lite": "^1.0.30001663",
+				"electron-to-chromium": "^1.5.28",
+				"node-releases": "^2.0.18",
+				"update-browserslist-db": "^1.1.0"
+			},
+			"bin": {
+				"browserslist": "cli.js"
+			},
+			"engines": {
+				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+			}
+		},
+		"node_modules/bser": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz",
+			"integrity": "sha1-mseNPtXZFYBP2HrLFYvHlxR6Fxk=",
+			"dependencies": {
+				"node-int64": "^0.4.0"
+			}
+		},
+		"node_modules/btoa-lite": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/btoa-lite/-/btoa-lite-1.0.0.tgz",
+			"integrity": "sha512-gvW7InbIyF8AicrqWoptdW08pUxuhq8BEgowNajy9RhiE86fmGAGl+bLKo6oB8QP0CkqHLowfN0oJdKC/J6LbA==",
+			"dev": true
+		},
+		"node_modules/buffer": {
+			"version": "4.9.2",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+			"integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+			"dev": true,
+			"dependencies": {
+				"base64-js": "^1.0.2",
+				"ieee754": "^1.1.4",
+				"isarray": "^1.0.0"
+			}
+		},
+		"node_modules/buffer-crc32": {
+			"version": "0.2.13",
+			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/buffer-from": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+		},
+		"node_modules/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,
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/buffer-xor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+			"integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
+			"dev": true
+		},
+		"node_modules/buffers": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+			"integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.2.0"
+			}
+		},
+		"node_modules/builtin-modules": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+			"integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/builtin-status-codes": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+			"integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==",
+			"dev": true
+		},
+		"node_modules/builtins": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz",
+			"integrity": "sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ=="
+		},
+		"node_modules/bundle-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
+			"integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
+			"dependencies": {
+				"run-applescript": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/byte-size": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/byte-size/-/byte-size-8.1.1.tgz",
+			"integrity": "sha512-tUkzZWK0M/qdoLEqikxBWe4kumyuwjl3HO6zHTr4yEI23EojPtLYXdG1+AQY7MN0cGyNDvEaJ8wiYQm6P2bPxg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.17"
+			}
+		},
+		"node_modules/bytes": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+			"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/cacache": {
+			"version": "12.0.4",
+			"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+			"integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+			"dev": true,
+			"dependencies": {
+				"bluebird": "^3.5.5",
+				"chownr": "^1.1.1",
+				"figgy-pudding": "^3.5.1",
+				"glob": "^7.1.4",
+				"graceful-fs": "^4.1.15",
+				"infer-owner": "^1.0.3",
+				"lru-cache": "^5.1.1",
+				"mississippi": "^3.0.0",
+				"mkdirp": "^0.5.1",
+				"move-concurrently": "^1.0.1",
+				"promise-inflight": "^1.0.1",
+				"rimraf": "^2.6.3",
+				"ssri": "^6.0.1",
+				"unique-filename": "^1.1.1",
+				"y18n": "^4.0.0"
+			}
+		},
+		"node_modules/cacache/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/cacache/node_modules/lru-cache": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^3.0.2"
+			}
+		},
+		"node_modules/cacache/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/cacache/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/cacache/node_modules/yallist": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+			"dev": true
+		},
+		"node_modules/cache-base": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+			"integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+			"dev": true,
+			"dependencies": {
+				"collection-visit": "^1.0.0",
+				"component-emitter": "^1.2.1",
+				"get-value": "^2.0.6",
+				"has-value": "^1.0.0",
+				"isobject": "^3.0.1",
+				"set-value": "^2.0.0",
+				"to-object-path": "^0.3.0",
+				"union-value": "^1.0.0",
+				"unset-value": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cacheable-lookup": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+			"integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+			"engines": {
+				"node": ">=10.6.0"
+			}
+		},
+		"node_modules/cacheable-request": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+			"integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+			"dependencies": {
+				"clone-response": "^1.0.2",
+				"get-stream": "^5.1.0",
+				"http-cache-semantics": "^4.0.0",
+				"keyv": "^4.0.0",
+				"lowercase-keys": "^2.0.0",
+				"normalize-url": "^6.0.1",
+				"responselike": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/call-bind": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+			"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"set-function-length": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/caller-callsite": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+			"integrity": "sha512-JuG3qI4QOftFsZyOn1qq87fq5grLIyk1JYd5lJmdA+fG7aQ9pA/i3JIJGcO3q0MrRcHlOt1U+ZeHW8Dq9axALQ==",
+			"dependencies": {
+				"callsites": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/caller-callsite/node_modules/callsites": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+			"integrity": "sha512-ksWePWBloaWPxJYQ8TL0JHvtci6G5QTKwQ95RcWAa/lzoAKuAOflGdAK92hpHXjkwb8zLxoLNUoNYZgVsaJzvQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/caller-path": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+			"integrity": "sha512-MCL3sf6nCSXOwCTzvPKhN18TU7AHTvdtam8DAogxcrJ8Rjfbbg7Lgng64H9Iy+vUV6VGFClN/TyxBkAebLRR4A==",
+			"dependencies": {
+				"caller-callsite": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/callsite": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+			"integrity": "sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/callsites": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/camel-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+			"dependencies": {
+				"pascal-case": "^3.1.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/camelcase-keys": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+			"integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+			"dependencies": {
+				"camelcase": "^5.3.1",
+				"map-obj": "^4.0.0",
+				"quick-lru": "^4.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/camelcase-keys/node_modules/map-obj": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+			"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/camelize": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+			"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+		},
+		"node_modules/caniuse-api": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+			"integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+			"dependencies": {
+				"browserslist": "^4.0.0",
+				"caniuse-lite": "^1.0.0",
+				"lodash.memoize": "^4.1.2",
+				"lodash.uniq": "^4.5.0"
+			}
+		},
+		"node_modules/caniuse-lite": {
+			"version": "1.0.30001667",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001667.tgz",
+			"integrity": "sha512-7LTwJjcRkzKFmtqGsibMeuXmvFDfZq/nzIjnmgCGzKKRVzjD72selLDK1oPF/Oxzmt4fNcPvTDvGqSDG4tCALw==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
 				},
-				"string-width": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-					"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-					"dev": true,
-					"requires": {
-						"code-point-at": "^1.0.0",
-						"is-fullwidth-code-point": "^1.0.0",
-						"strip-ansi": "^3.0.0"
-					}
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
 				},
-				"string_decoder": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-					"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "~5.1.0"
-					}
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			]
+		},
+		"node_modules/capital-case": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
+		},
+		"node_modules/case-sensitive-paths-webpack-plugin": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
+			"integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/ccount": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.3.tgz",
+			"integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw=="
+		},
+		"node_modules/chainsaw": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+			"integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+			"dev": true,
+			"dependencies": {
+				"traverse": ">=0.3.0 <0.4"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/chainsaw/node_modules/traverse": {
+			"version": "0.3.9",
+			"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+			"integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/chalk": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+			"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/chalk/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/chalk/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/change-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"capital-case": "^1.0.4",
+				"constant-case": "^3.0.4",
+				"dot-case": "^3.0.4",
+				"header-case": "^2.0.4",
+				"no-case": "^3.0.4",
+				"param-case": "^3.0.4",
+				"pascal-case": "^3.1.2",
+				"path-case": "^3.0.4",
+				"sentence-case": "^3.0.4",
+				"snake-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/char-regex": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+			"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/character-entities": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz",
+			"integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ=="
+		},
+		"node_modules/character-entities-html4": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.2.tgz",
+			"integrity": "sha512-sIrXwyna2+5b0eB9W149izTPJk/KkJTg6mEzDGibwBUkyH1SbDa+nf515Ppdi3MaH35lW0JFJDWeq9Luzes1Iw=="
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz",
+			"integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA=="
+		},
+		"node_modules/character-reference-invalid": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz",
+			"integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ=="
+		},
+		"node_modules/chardet": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+			"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+		},
+		"node_modules/check-node-version": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/check-node-version/-/check-node-version-4.1.0.tgz",
+			"integrity": "sha512-TSXGsyfW5/xY2QseuJn8/hleO2AU7HxVCdkc900jp1vcfzF840GkjvRT7CHl8sRtWn23n3X3k0cwH9RXeRwhfw==",
+			"dependencies": {
+				"chalk": "^3.0.0",
+				"map-values": "^1.0.1",
+				"minimist": "^1.2.0",
+				"object-filter": "^1.0.2",
+				"run-parallel": "^1.1.4",
+				"semver": "^6.3.0"
+			},
+			"bin": {
+				"check-node-version": "bin.js"
+			},
+			"engines": {
+				"node": ">=8.3.0"
+			}
+		},
+		"node_modules/check-node-version/node_modules/chalk": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/check-node-version/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/check-node-version/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/check-node-version/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"dependencies": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/chokidar/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/chownr": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+			"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+			"dev": true
+		},
+		"node_modules/chrome-launcher": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.15.2.tgz",
+			"integrity": "sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ==",
+			"dependencies": {
+				"@types/node": "*",
+				"escape-string-regexp": "^4.0.0",
+				"is-wsl": "^2.2.0",
+				"lighthouse-logger": "^1.0.0"
+			},
+			"bin": {
+				"print-chrome-path": "bin/print-chrome-path.js"
+			},
+			"engines": {
+				"node": ">=12.13.0"
+			}
+		},
+		"node_modules/chrome-launcher/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/chrome-launcher/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/chrome-trace-event": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+			"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/chromium-bidi": {
+			"version": "0.4.16",
+			"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.4.16.tgz",
+			"integrity": "sha512-7ZbXdWERxRxSwo3txsBjjmc/NLxqb1Bk30mRb0BMS4YIaiV6zvKZqL/UAH+DdqcDYayDWk2n/y8klkBDODrPvA==",
+			"dependencies": {
+				"mitt": "3.0.0"
+			},
+			"peerDependencies": {
+				"devtools-protocol": "*"
+			}
+		},
+		"node_modules/chromium-edge-launcher": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/chromium-edge-launcher/-/chromium-edge-launcher-1.0.0.tgz",
+			"integrity": "sha512-pgtgjNKZ7i5U++1g1PWv75umkHvhVTDOQIZ+sjeUX9483S7Y6MUvO0lrd7ShGlQlFHMN4SwKTCq/X8hWrbv2KA==",
+			"dependencies": {
+				"@types/node": "*",
+				"escape-string-regexp": "^4.0.0",
+				"is-wsl": "^2.2.0",
+				"lighthouse-logger": "^1.0.0",
+				"mkdirp": "^1.0.4",
+				"rimraf": "^3.0.2"
+			}
+		},
+		"node_modules/chromium-edge-launcher/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/chromium-edge-launcher/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/chromium-edge-launcher/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ci-info": {
+			"version": "3.9.0",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+			"integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/sibiraj-s"
+				}
+			],
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cipher-base": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+			"integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.1",
+				"safe-buffer": "^5.0.1"
+			}
+		},
+		"node_modules/citty": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+			"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+			"dev": true,
+			"dependencies": {
+				"consola": "^3.2.3"
+			}
+		},
+		"node_modules/citty/node_modules/consola": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+			"integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
+		"node_modules/cjs-module-lexer": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
+			"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
+		},
+		"node_modules/class-utils": {
+			"version": "0.3.6",
+			"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+			"integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+			"dev": true,
+			"dependencies": {
+				"arr-union": "^3.1.0",
+				"define-property": "^0.2.5",
+				"isobject": "^3.0.0",
+				"static-extend": "^0.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/class-utils/node_modules/define-property": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+			"integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+			"dev": true,
+			"dependencies": {
+				"is-descriptor": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/clean-css": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+			"integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+			"dev": true,
+			"dependencies": {
+				"source-map": "~0.6.0"
+			},
+			"engines": {
+				"node": ">= 10.0"
+			}
+		},
+		"node_modules/clean-stack": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+			"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/clean-webpack-plugin": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
+			"integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==",
+			"dependencies": {
+				"@types/webpack": "^4.4.31",
+				"del": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			},
+			"peerDependencies": {
+				"webpack": "*"
+			}
+		},
+		"node_modules/cli-cursor": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+			"integrity": "sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==",
+			"dev": true,
+			"dependencies": {
+				"restore-cursor": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/cli-spinners": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
+			"integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cli-table3": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+			"integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+			"dev": true,
+			"dependencies": {
+				"string-width": "^4.2.0"
+			},
+			"engines": {
+				"node": "10.* || >= 12.*"
+			},
+			"optionalDependencies": {
+				"@colors/colors": "1.5.0"
+			}
+		},
+		"node_modules/cli-table3/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/cli-table3/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cli-table3/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cli-truncate": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
+			"integrity": "sha512-f4r4yJnbT++qUPI9NR4XLDLq41gQ+uqnPItWG0F5ZkehuNiTTa3EY0S4AqTSUOeJ7/zU41oWPQSNkW5BqPL9bg==",
+			"dev": true,
+			"dependencies": {
+				"slice-ansi": "0.0.4",
+				"string-width": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cli-truncate/node_modules/ansi-regex": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+			"integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cli-truncate/node_modules/is-fullwidth-code-point": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+			"integrity": "sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==",
+			"dev": true,
+			"dependencies": {
+				"number-is-nan": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cli-truncate/node_modules/string-width": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+			"integrity": "sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==",
+			"dev": true,
+			"dependencies": {
+				"code-point-at": "^1.0.0",
+				"is-fullwidth-code-point": "^1.0.0",
+				"strip-ansi": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cli-truncate/node_modules/strip-ansi": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cli-width": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+			"integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
+		},
+		"node_modules/client-zip": {
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/client-zip/-/client-zip-2.4.5.tgz",
+			"integrity": "sha512-4y4d5ZeTH/szIAMQeC8ju67pxtvj+3u20wMGwOFrZk+pegy3aSEA2JkwgC8XVDTXP/Iqn1gyqNQXmkyBp4KLEQ=="
+		},
+		"node_modules/cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
+		"node_modules/cliui/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/cliui/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/clone": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+			"integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/clone-deep": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+			"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+			"dependencies": {
+				"is-plain-object": "^2.0.4",
+				"kind-of": "^6.0.2",
+				"shallow-clone": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/clone-deep/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+			"dependencies": {
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/clone-response": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+			"integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+			"dependencies": {
+				"mimic-response": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/cmd-shim": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-6.0.1.tgz",
+			"integrity": "sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/co": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+			"integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+			"engines": {
+				"iojs": ">= 1.0.0",
+				"node": ">= 0.12.0"
+			}
+		},
+		"node_modules/code-point-at": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+			"integrity": "sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/collapse-white-space": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz",
+			"integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw=="
+		},
+		"node_modules/collect-v8-coverage": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
+			"integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg=="
+		},
+		"node_modules/collection-visit": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+			"integrity": "sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==",
+			"dev": true,
+			"dependencies": {
+				"map-visit": "^1.0.0",
+				"object-visit": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/color": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+			"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+			"dependencies": {
+				"color-convert": "^2.0.1",
+				"color-string": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=12.5.0"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+		},
+		"node_modules/color-string": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+			"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+			"dependencies": {
+				"color-name": "^1.0.0",
+				"simple-swizzle": "^0.2.2"
+			}
+		},
+		"node_modules/color-support": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+			"dev": true,
+			"bin": {
+				"color-support": "bin.js"
+			}
+		},
+		"node_modules/color/node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color/node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
+		"node_modules/colord": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+		},
+		"node_modules/colorette": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
+			"integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="
+		},
+		"node_modules/colorspace": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz",
+			"integrity": "sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==",
+			"dev": true,
+			"dependencies": {
+				"color": "^3.1.3",
+				"text-hex": "1.0.x"
+			}
+		},
+		"node_modules/colorspace/node_modules/color": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+			"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^1.9.3",
+				"color-string": "^1.6.0"
+			}
+		},
+		"node_modules/columnify": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
+			"integrity": "sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==",
+			"dev": true,
+			"dependencies": {
+				"strip-ansi": "^6.0.1",
+				"wcwidth": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/command-exists": {
+			"version": "1.2.9",
+			"resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
+			"integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w=="
+		},
+		"node_modules/commander": {
+			"version": "9.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
+			"integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
+			"engines": {
+				"node": "^12.20.0 || >=14"
+			}
+		},
+		"node_modules/comment-parser": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.0.tgz",
+			"integrity": "sha512-QLyTNiZ2KDOibvFPlZ6ZngVsZ/0gYnE6uTXi5aoDg8ed3AkJAz4sEje3Y8a29hQ1s6A99MZXe47fLAXQ1rTqaw==",
+			"engines": {
+				"node": ">= 12.0.0"
+			}
+		},
+		"node_modules/common-path-prefix": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+			"integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
+		},
+		"node_modules/commondir": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+			"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
+		},
+		"node_modules/compare-func": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
+			"integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
+			"dev": true,
+			"dependencies": {
+				"array-ify": "^1.0.0",
+				"dot-prop": "^5.1.0"
+			}
+		},
+		"node_modules/complex.js": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.1.1.tgz",
+			"integrity": "sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "patreon",
+				"url": "https://www.patreon.com/infusion"
+			}
+		},
+		"node_modules/component-emitter": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+			"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
+			"dev": true
+		},
+		"node_modules/compress-commons": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-5.0.1.tgz",
+			"integrity": "sha512-MPh//1cERdLtqwO3pOFLeXtpuai0Y2WCd5AhtKxznqM7WtaMYaOEMSgn45d9D10sIHSfIKE603HlOp8OPGrvag==",
+			"dev": true,
+			"dependencies": {
+				"crc-32": "^1.2.0",
+				"crc32-stream": "^5.0.0",
+				"normalize-path": "^3.0.0",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			}
+		},
+		"node_modules/compress-commons/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/compressible": {
+			"version": "2.0.18",
+			"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+			"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+			"dependencies": {
+				"mime-db": ">= 1.43.0 < 2"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/compression": {
+			"version": "1.7.4",
+			"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+			"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+			"dependencies": {
+				"accepts": "~1.3.5",
+				"bytes": "3.0.0",
+				"compressible": "~2.0.16",
+				"debug": "2.6.9",
+				"on-headers": "~1.0.2",
+				"safe-buffer": "5.1.2",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/compression/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/computed-style": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
+			"integrity": "sha512-WpAmaKbMNmS3OProfHIdJiNleNJdgUrJfbKArXua28QF7+0CoZjlLn0lp6vlc+dl5r2/X9GQiQRQQU4BzSa69w=="
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+		},
+		"node_modules/concat-stream": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+			"integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+			"engines": [
+				"node >= 0.8"
+			],
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^2.2.2",
+				"typedarray": "^0.0.6"
+			}
+		},
+		"node_modules/concurrently": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.0.tgz",
+			"integrity": "sha512-Z2iVM5+c0VxKmENTXrG/kp+MUhWEEH+wI5wV/L8CTFJDb/uae1zSVIkNM7o3W4Tdt42pv7RGsOICaskWy9bqSA==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "0.5.1",
+				"commander": "2.6.0",
+				"date-fns": "^1.23.0",
+				"lodash": "^4.5.1",
+				"rx": "2.3.24",
+				"spawn-command": "^0.0.2-1",
+				"supports-color": "^3.2.3",
+				"tree-kill": "^1.1.0"
+			},
+			"bin": {
+				"concurrent": "src/main.js",
+				"concurrently": "src/main.js"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/ansi-regex": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
+			"integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/ansi-styles": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
+			"integrity": "sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/chalk": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
+			"integrity": "sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^1.1.0",
+				"escape-string-regexp": "^1.0.0",
+				"has-ansi": "^0.1.0",
+				"strip-ansi": "^0.3.0",
+				"supports-color": "^0.2.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/chalk/node_modules/supports-color": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
+			"integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA==",
+			"dev": true,
+			"bin": {
+				"supports-color": "cli.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/commander": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
+			"integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.6.x"
+			}
+		},
+		"node_modules/concurrently/node_modules/date-fns": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+			"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+			"dev": true
+		},
+		"node_modules/concurrently/node_modules/has-ansi": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
+			"integrity": "sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^0.2.0"
+			},
+			"bin": {
+				"has-ansi": "cli.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/has-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+			"integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/strip-ansi": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
+			"integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^0.2.1"
+			},
+			"bin": {
+				"strip-ansi": "cli.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/concurrently/node_modules/supports-color": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+			"integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/configstore": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+			"integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+			"dependencies": {
+				"dot-prop": "^5.2.0",
+				"graceful-fs": "^4.1.2",
+				"make-dir": "^3.0.0",
+				"unique-string": "^2.0.0",
+				"write-file-atomic": "^3.0.0",
+				"xdg-basedir": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/configstore/node_modules/write-file-atomic": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+			"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+			"dependencies": {
+				"imurmurhash": "^0.1.4",
+				"is-typedarray": "^1.0.0",
+				"signal-exit": "^3.0.2",
+				"typedarray-to-buffer": "^3.1.5"
+			}
+		},
+		"node_modules/connect": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+			"integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"finalhandler": "1.1.2",
+				"parseurl": "~1.3.3",
+				"utils-merge": "1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.10.0"
+			}
+		},
+		"node_modules/connect-history-api-fallback": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+			"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/connect/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/consola": {
+			"version": "2.15.3",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+			"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
+			"dev": true
+		},
+		"node_modules/console-browserify": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+			"integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
+			"dev": true
+		},
+		"node_modules/console-control-strings": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+			"dev": true
+		},
+		"node_modules/constant-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case": "^2.0.2"
+			}
+		},
+		"node_modules/constants-browserify": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+			"integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
+			"dev": true
+		},
+		"node_modules/content-disposition": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+			"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+			"dependencies": {
+				"safe-buffer": "5.2.1"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/content-disposition/node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"strip-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^2.0.0"
-					}
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"strip-eof": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-					"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/content-type": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/conventional-changelog-angular": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-6.0.0.tgz",
+			"integrity": "sha512-6qLgrBF4gueoC7AFVHu51nHL9pF9FRjXrH+ceVf7WmAfH3gs+gEYOkvxhjMPjZu57I4AGUGoNTY8V7Hrgf1uqg==",
+			"dev": true,
+			"dependencies": {
+				"compare-func": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-changelog-core": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-5.0.1.tgz",
+			"integrity": "sha512-Rvi5pH+LvgsqGwZPZ3Cq/tz4ty7mjijhr3qR4m9IBXNbxGGYgTVVO+duXzz9aArmHxFtwZ+LRkrNIMDQzgoY4A==",
+			"dev": true,
+			"dependencies": {
+				"add-stream": "^1.0.0",
+				"conventional-changelog-writer": "^6.0.0",
+				"conventional-commits-parser": "^4.0.0",
+				"dateformat": "^3.0.3",
+				"get-pkg-repo": "^4.2.1",
+				"git-raw-commits": "^3.0.0",
+				"git-remote-origin-url": "^2.0.0",
+				"git-semver-tags": "^5.0.0",
+				"normalize-package-data": "^3.0.3",
+				"read-pkg": "^3.0.0",
+				"read-pkg-up": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/load-json-file": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+			"integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"parse-json": "^4.0.0",
+				"pify": "^3.0.0",
+				"strip-bom": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/normalize-package-data": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+			"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^4.0.1",
+				"is-core-module": "^2.5.0",
+				"semver": "^7.3.4",
+				"validate-npm-package-license": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+			"dev": true,
+			"dependencies": {
+				"error-ex": "^1.3.1",
+				"json-parse-better-errors": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/pify": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+			"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/read-pkg": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+			"integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
+			"dev": true,
+			"dependencies": {
+				"load-json-file": "^4.0.0",
+				"normalize-package-data": "^2.3.2",
+				"path-type": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/read-pkg-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
+			"integrity": "sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==",
+			"dev": true,
+			"dependencies": {
+				"find-up": "^2.0.0",
+				"read-pkg": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/read-pkg/node_modules/hosted-git-info": {
+			"version": "2.8.9",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+			"dev": true
+		},
+		"node_modules/conventional-changelog-core/node_modules/read-pkg/node_modules/normalize-package-data": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+			"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^2.1.4",
+				"resolve": "^1.10.0",
+				"semver": "2 || 3 || 4 || 5",
+				"validate-npm-package-license": "^3.0.1"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/read-pkg/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/conventional-changelog-core/node_modules/strip-bom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/conventional-changelog-preset-loader": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-3.0.0.tgz",
+			"integrity": "sha512-qy9XbdSLmVnwnvzEisjxdDiLA4OmV3o8db+Zdg4WiFw14fP3B6XNz98X0swPPpkTd/pc1K7+adKgEDM1JCUMiA==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-changelog-writer": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-6.0.1.tgz",
+			"integrity": "sha512-359t9aHorPw+U+nHzUXHS5ZnPBOizRxfQsWT5ZDHBfvfxQOAik+yfuhKXG66CN5LEWPpMNnIMHUTCKeYNprvHQ==",
+			"dev": true,
+			"dependencies": {
+				"conventional-commits-filter": "^3.0.0",
+				"dateformat": "^3.0.3",
+				"handlebars": "^4.7.7",
+				"json-stringify-safe": "^5.0.1",
+				"meow": "^8.1.2",
+				"semver": "^7.0.0",
+				"split": "^1.0.1"
+			},
+			"bin": {
+				"conventional-changelog-writer": "cli.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-commits-filter": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-3.0.0.tgz",
+			"integrity": "sha512-1ymej8b5LouPx9Ox0Dw/qAO2dVdfpRFq28e5Y0jJEU8ZrLdy0vOSkkIInwmxErFGhg6SALro60ZrwYFVTUDo4Q==",
+			"dev": true,
+			"dependencies": {
+				"lodash.ismatch": "^4.4.0",
+				"modify-values": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-commits-parser": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-4.0.0.tgz",
+			"integrity": "sha512-WRv5j1FsVM5FISJkoYMR6tPk07fkKT0UodruX4je86V4owk451yjXAKzKAPOs9l7y59E2viHUS9eQ+dfUA9NSg==",
+			"dev": true,
+			"dependencies": {
+				"is-text-path": "^1.0.1",
+				"JSONStream": "^1.3.5",
+				"meow": "^8.1.2",
+				"split2": "^3.2.2"
+			},
+			"bin": {
+				"conventional-commits-parser": "cli.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-recommended-bump": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-7.0.1.tgz",
+			"integrity": "sha512-Ft79FF4SlOFvX4PkwFDRnaNiIVX7YbmqGU0RwccUaiGvgp3S0a8ipR2/Qxk31vclDNM+GSdJOVs2KrsUCjblVA==",
+			"dev": true,
+			"dependencies": {
+				"concat-stream": "^2.0.0",
+				"conventional-changelog-preset-loader": "^3.0.0",
+				"conventional-commits-filter": "^3.0.0",
+				"conventional-commits-parser": "^4.0.0",
+				"git-raw-commits": "^3.0.0",
+				"git-semver-tags": "^5.0.0",
+				"meow": "^8.1.2"
+			},
+			"bin": {
+				"conventional-recommended-bump": "cli.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/conventional-recommended-bump/node_modules/concat-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+			"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+			"dev": true,
+			"engines": [
+				"node >= 6.0"
+			],
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.0.2",
+				"typedarray": "^0.0.6"
+			}
+		},
+		"node_modules/conventional-recommended-bump/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/convert-source-map": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+			"integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+		},
+		"node_modules/cookie": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+			"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/cookie-signature": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+			"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+		},
+		"node_modules/copy-concurrently": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+			"integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+			"dev": true,
+			"dependencies": {
+				"aproba": "^1.1.1",
+				"fs-write-stream-atomic": "^1.0.8",
+				"iferr": "^0.1.5",
+				"mkdirp": "^0.5.1",
+				"rimraf": "^2.5.4",
+				"run-queue": "^1.0.0"
+			}
+		},
+		"node_modules/copy-concurrently/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/copy-concurrently/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/copy-concurrently/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/copy-descriptor": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+			"integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/copy-dir": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/copy-dir/-/copy-dir-1.3.0.tgz",
+			"integrity": "sha512-Q4+qBFnN4bwGwvtXXzbp4P/4iNk0MaiGAzvQ8OiMtlLjkIKjmNN689uVzShSM0908q7GoFHXIPx4zi75ocoaHw=="
+		},
+		"node_modules/copy-webpack-plugin": {
+			"version": "10.2.0",
+			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.0.tgz",
+			"integrity": "sha512-my6iXII95c78w14HzYCNya5TlJYa44lOppAge5GSTMM1SyDxNsVGCJvhP4/ld6snm8lzjn3XOonMZD6s1L86Og==",
+			"dependencies": {
+				"fast-glob": "^3.2.7",
+				"glob-parent": "^6.0.1",
+				"globby": "^12.0.2",
+				"normalize-path": "^3.0.0",
+				"schema-utils": "^4.0.0",
+				"serialize-javascript": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 12.20.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/array-union": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
+			"integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/globby": {
+			"version": "12.2.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
+			"integrity": "sha512-wiSuFQLZ+urS9x2gGPl1H5drc5twabmm4m2gTR27XDFyjUHJUNsS8o/2aKyIF6IoBaR630atdher0XJ5g6OMmA==",
+			"dependencies": {
+				"array-union": "^3.0.1",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.7",
+				"ignore": "^5.1.9",
+				"merge2": "^1.4.1",
+				"slash": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/copy-webpack-plugin/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/serialize-javascript": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+			"dependencies": {
+				"randombytes": "^2.1.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/slash": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+			"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/core-js": {
+			"version": "3.38.1",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+			"integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-js-builder": {
+			"version": "3.38.1",
+			"resolved": "https://registry.npmjs.org/core-js-builder/-/core-js-builder-3.38.1.tgz",
+			"integrity": "sha512-SxxFz0xLPX+MMCC3QtRavu5rzhFe28QqiaQKko+25DrUEsPYbNasZACUkKDDGfInxJiUk/9/PhmHwIdyN4vSKA==",
+			"dev": true,
+			"dependencies": {
+				"core-js": "3.38.1",
+				"core-js-compat": "3.38.1",
+				"mkdirp": ">=0.5.6 <1",
+				"webpack": ">=4.47.0 <5"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/braces": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+			"integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+			"dev": true,
+			"dependencies": {
+				"arr-flatten": "^1.1.0",
+				"array-unique": "^0.3.2",
+				"extend-shallow": "^2.0.1",
+				"fill-range": "^4.0.0",
+				"isobject": "^3.0.1",
+				"repeat-element": "^1.1.2",
+				"snapdragon": "^0.8.1",
+				"snapdragon-node": "^2.0.1",
+				"split-string": "^3.0.2",
+				"to-regex": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/braces/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"dev": true
+		},
+		"node_modules/core-js-builder/node_modules/fill-range": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+			"integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+			"dev": true,
+			"dependencies": {
+				"extend-shallow": "^2.0.1",
+				"is-number": "^3.0.0",
+				"repeat-string": "^1.6.1",
+				"to-regex-range": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/fill-range/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/json5": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+			"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.0"
+			},
+			"bin": {
+				"json5": "lib/cli.js"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/loader-utils": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+			"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+			"dev": true,
+			"dependencies": {
+				"big.js": "^5.2.2",
+				"emojis-list": "^3.0.0",
+				"json5": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/micromatch": {
+			"version": "3.1.10",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+			"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+			"dev": true,
+			"dependencies": {
+				"arr-diff": "^4.0.0",
+				"array-unique": "^0.3.2",
+				"braces": "^2.3.1",
+				"define-property": "^2.0.2",
+				"extend-shallow": "^3.0.2",
+				"extglob": "^2.0.4",
+				"fragment-cache": "^0.2.1",
+				"kind-of": "^6.0.2",
+				"nanomatch": "^1.2.9",
+				"object.pick": "^1.3.0",
+				"regex-not": "^1.0.0",
+				"snapdragon": "^0.8.1",
+				"to-regex": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/terser": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
+			"integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
+			"dev": true,
+			"dependencies": {
+				"commander": "^2.20.0",
+				"source-map": "~0.6.1",
+				"source-map-support": "~0.5.12"
+			},
+			"bin": {
+				"terser": "bin/terser"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/terser-webpack-plugin": {
+			"version": "1.4.6",
+			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+			"integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cacache": "^12.0.2",
+				"find-cache-dir": "^2.1.0",
+				"is-wsl": "^1.1.0",
+				"schema-utils": "^1.0.0",
+				"serialize-javascript": "^4.0.0",
+				"source-map": "^0.6.1",
+				"terser": "^4.1.2",
+				"webpack-sources": "^1.4.0",
+				"worker-farm": "^1.7.0"
+			},
+			"engines": {
+				"node": ">= 6.9.0"
+			},
+			"peerDependencies": {
+				"webpack": "^4.0.0"
+			}
+		},
+		"node_modules/core-js-builder/node_modules/webpack": {
+			"version": "4.47.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+			"integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
+			"dev": true,
+			"dependencies": {
+				"@webassemblyjs/ast": "1.9.0",
+				"@webassemblyjs/helper-module-context": "1.9.0",
+				"@webassemblyjs/wasm-edit": "1.9.0",
+				"@webassemblyjs/wasm-parser": "1.9.0",
+				"acorn": "^6.4.1",
+				"ajv": "^6.10.2",
+				"ajv-keywords": "^3.4.1",
+				"chrome-trace-event": "^1.0.2",
+				"enhanced-resolve": "^4.5.0",
+				"eslint-scope": "^4.0.3",
+				"json-parse-better-errors": "^1.0.2",
+				"loader-runner": "^2.4.0",
+				"loader-utils": "^1.2.3",
+				"memory-fs": "^0.4.1",
+				"micromatch": "^3.1.10",
+				"mkdirp": "^0.5.3",
+				"neo-async": "^2.6.1",
+				"node-libs-browser": "^2.2.1",
+				"schema-utils": "^1.0.0",
+				"tapable": "^1.1.3",
+				"terser-webpack-plugin": "^1.4.3",
+				"watchpack": "^1.7.4",
+				"webpack-sources": "^1.4.1"
+			},
+			"bin": {
+				"webpack": "bin/webpack.js"
+			},
+			"engines": {
+				"node": ">=6.11.5"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependenciesMeta": {
+				"webpack-cli": {
+					"optional": true
 				},
+				"webpack-command": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/core-js-builder/node_modules/webpack-sources": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+			"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+			"dev": true,
+			"dependencies": {
+				"source-list-map": "^2.0.0",
+				"source-map": "~0.6.1"
+			}
+		},
+		"node_modules/core-js-compat": {
+			"version": "3.38.1",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+			"integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
+			"dependencies": {
+				"browserslist": "^4.23.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-js-pure": {
+			"version": "3.31.0",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.31.0.tgz",
+			"integrity": "sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-util-is": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+			"integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+		},
+		"node_modules/cosmiconfig": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+			"integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+			"dependencies": {
+				"@types/parse-json": "^4.0.0",
+				"import-fresh": "^3.2.1",
+				"parse-json": "^5.0.0",
+				"path-type": "^4.0.0",
+				"yaml": "^1.10.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/cosmiconfig/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/crc-32": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+			"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+			"dev": true,
+			"bin": {
+				"crc32": "bin/crc32.njs"
+			},
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/crc32-stream": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-5.0.0.tgz",
+			"integrity": "sha512-B0EPa1UK+qnpBZpG+7FgPCu0J2ETLpXq09o9BkLkEAhdB6Z61Qo4pJ3JYu0c+Qi+/SAL7QThqnzS06pmSSyZaw==",
+			"dev": true,
+			"dependencies": {
+				"crc-32": "^1.2.0",
+				"readable-stream": "^3.4.0"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			}
+		},
+		"node_modules/crc32-stream/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/create-ecdh": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+			"integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^4.1.0",
+				"elliptic": "^6.5.3"
+			}
+		},
+		"node_modules/create-ecdh/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+			"dev": true
+		},
+		"node_modules/create-hash": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+			"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+			"dev": true,
+			"dependencies": {
+				"cipher-base": "^1.0.1",
+				"inherits": "^2.0.1",
+				"md5.js": "^1.3.4",
+				"ripemd160": "^2.0.1",
+				"sha.js": "^2.4.0"
+			}
+		},
+		"node_modules/create-hmac": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+			"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+			"dev": true,
+			"dependencies": {
+				"cipher-base": "^1.0.3",
+				"create-hash": "^1.1.0",
+				"inherits": "^2.0.1",
+				"ripemd160": "^2.0.0",
+				"safe-buffer": "^5.0.1",
+				"sha.js": "^2.4.8"
+			}
+		},
+		"node_modules/create-require": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+			"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+			"dev": true
+		},
+		"node_modules/cross-env": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-3.2.4.tgz",
+			"integrity": "sha512-T8AFEAiuJ0w53ou6rnu3Fipaiu1W6ZO9GYfd33uxe1kAIiXM0fD8QnIm7orcJBOt7WQC5Ply63E7WZW/jSM+FA==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^5.1.0",
+				"is-windows": "^1.0.0"
+			},
+			"bin": {
+				"cross-env": "dist/bin/cross-env.js"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/cross-fetch": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+			"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+			"license": "MIT",
+			"dependencies": {
+				"node-fetch": "^2.6.12"
+			}
+		},
+		"node_modules/cross-spawn": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+			"integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
+			"dependencies": {
+				"lru-cache": "^4.0.1",
+				"shebang-command": "^1.2.0",
+				"which": "^1.2.9"
+			}
+		},
+		"node_modules/crypto-browserify": {
+			"version": "3.12.0",
+			"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+			"integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+			"dev": true,
+			"dependencies": {
+				"browserify-cipher": "^1.0.0",
+				"browserify-sign": "^4.0.0",
+				"create-ecdh": "^4.0.0",
+				"create-hash": "^1.1.0",
+				"create-hmac": "^1.1.0",
+				"diffie-hellman": "^5.0.0",
+				"inherits": "^2.0.1",
+				"pbkdf2": "^3.0.3",
+				"public-encrypt": "^4.0.0",
+				"randombytes": "^2.0.0",
+				"randomfill": "^1.0.3"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/crypto-random-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+			"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/csp_evaluator": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/csp_evaluator/-/csp_evaluator-1.1.1.tgz",
+			"integrity": "sha512-N3ASg0C4kNPUaNxt1XAvzHIVuzdtr8KLgfk1O8WDyimp1GisPAHESupArO2ieHk9QWbrJ/WkQODyh21Ps/xhxw=="
+		},
+		"node_modules/css": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+			"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"source-map": "^0.6.1",
+				"source-map-resolve": "^0.5.2",
+				"urix": "^0.1.0"
+			}
+		},
+		"node_modules/css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/css-declaration-sorter": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+			"integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.9"
+			}
+		},
+		"node_modules/css-functions-list": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
+			"integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+			"engines": {
+				"node": ">=12 || >=16"
+			}
+		},
+		"node_modules/css-loader": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
+			"integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+			"dependencies": {
+				"icss-utils": "^5.1.0",
+				"postcss": "^8.2.15",
+				"postcss-modules-extract-imports": "^3.0.0",
+				"postcss-modules-local-by-default": "^4.0.0",
+				"postcss-modules-scope": "^3.0.0",
+				"postcss-modules-values": "^4.0.0",
+				"postcss-value-parser": "^4.1.0",
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/css-loader/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/css-mediaquery": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+			"integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+		},
+		"node_modules/css-select": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+			"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-what": "^6.1.0",
+				"domhandler": "^5.0.2",
+				"domutils": "^3.0.1",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/css-select/node_modules/dom-serializer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+			"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.2",
+				"entities": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/css-select/node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/css-select/node_modules/domhandler": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+			"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+			"dependencies": {
+				"domelementtype": "^2.3.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/css-select/node_modules/domutils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+			"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+			"dependencies": {
+				"dom-serializer": "^2.0.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/css-select/node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/css-shorthand-properties": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz",
+			"integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==",
+			"dev": true
+		},
+		"node_modules/css-to-react-native": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+			"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+			"dependencies": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^3.3.0"
+			}
+		},
+		"node_modules/css-to-react-native-transform": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native-transform/-/css-to-react-native-transform-1.9.0.tgz",
+			"integrity": "sha512-darzotx5xx+Q0bzASkvNBasztLCssNerzf9jpMZx0H4CTY6J/y2Wh50ZtYAJ3FmESEux1bJcGa6T0zfISTuFqw==",
+			"dependencies": {
+				"css": "^2.2.4",
+				"css-mediaquery": "^0.1.2",
+				"css-to-react-native": "^2.3.0"
+			}
+		},
+		"node_modules/css-tree": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+			"dependencies": {
+				"mdn-data": "2.0.14",
+				"source-map": "^0.6.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/css-value": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/css-value/-/css-value-0.0.1.tgz",
+			"integrity": "sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q==",
+			"dev": true
+		},
+		"node_modules/css-what": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+			"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+			"engines": {
+				"node": ">= 6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/css.escape": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+			"dev": true
+		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/cssnano": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz",
+			"integrity": "sha512-fVO1JdJ0LSdIGJq68eIxOqFpIJrZqXUsBt8fkrBcztCQqAjQD51OhZp7tc0ImcbwXD4k7ny84QTV90nZhmqbkg==",
+			"dependencies": {
+				"cssnano-preset-default": "^6.0.1",
+				"lilconfig": "^2.1.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/cssnano"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/cssnano-preset-default": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz",
+			"integrity": "sha512-7VzyFZ5zEB1+l1nToKyrRkuaJIx0zi/1npjvZfbBwbtNTzhLtlvYraK/7/uqmX2Wb2aQtd983uuGw79jAjLSuQ==",
+			"dependencies": {
+				"css-declaration-sorter": "^6.3.1",
+				"cssnano-utils": "^4.0.0",
+				"postcss-calc": "^9.0.0",
+				"postcss-colormin": "^6.0.0",
+				"postcss-convert-values": "^6.0.0",
+				"postcss-discard-comments": "^6.0.0",
+				"postcss-discard-duplicates": "^6.0.0",
+				"postcss-discard-empty": "^6.0.0",
+				"postcss-discard-overridden": "^6.0.0",
+				"postcss-merge-longhand": "^6.0.0",
+				"postcss-merge-rules": "^6.0.1",
+				"postcss-minify-font-values": "^6.0.0",
+				"postcss-minify-gradients": "^6.0.0",
+				"postcss-minify-params": "^6.0.0",
+				"postcss-minify-selectors": "^6.0.0",
+				"postcss-normalize-charset": "^6.0.0",
+				"postcss-normalize-display-values": "^6.0.0",
+				"postcss-normalize-positions": "^6.0.0",
+				"postcss-normalize-repeat-style": "^6.0.0",
+				"postcss-normalize-string": "^6.0.0",
+				"postcss-normalize-timing-functions": "^6.0.0",
+				"postcss-normalize-unicode": "^6.0.0",
+				"postcss-normalize-url": "^6.0.0",
+				"postcss-normalize-whitespace": "^6.0.0",
+				"postcss-ordered-values": "^6.0.0",
+				"postcss-reduce-initial": "^6.0.0",
+				"postcss-reduce-transforms": "^6.0.0",
+				"postcss-svgo": "^6.0.0",
+				"postcss-unique-selectors": "^6.0.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/cssnano-utils": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz",
+			"integrity": "sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/csso": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+			"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+			"dependencies": {
+				"css-tree": "~2.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+				"npm": ">=7.0.0"
+			}
+		},
+		"node_modules/csso/node_modules/css-tree": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+			"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+			"dependencies": {
+				"mdn-data": "2.0.28",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+				"npm": ">=7.0.0"
+			}
+		},
+		"node_modules/csso/node_modules/mdn-data": {
+			"version": "2.0.28",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+			"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+		},
+		"node_modules/csso/node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/cssstyle": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+			"integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+			"dependencies": {
+				"rrweb-cssom": "^0.7.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/csstype": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+			"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+		},
+		"node_modules/cwd": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
+			"integrity": "sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==",
+			"dependencies": {
+				"find-pkg": "^0.1.2",
+				"fs-exists-sync": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/cyclist": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.2.tgz",
+			"integrity": "sha512-0sVXIohTfLqVIW3kb/0n6IiWF3Ifj5nm2XaSrLq2DI6fKIGa2fYAZdk917rUneaeLVpYfFcyXE2ft0fe3remsA==",
+			"dev": true
+		},
+		"node_modules/damerau-levenshtein": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
+			"integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw=="
+		},
+		"node_modules/dargs": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz",
+			"integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/data-uri-to-buffer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-5.0.1.tgz",
+			"integrity": "sha512-a9l6T1qqDogvvnw0nKlfZzqsyikEBZBClF39V3TFoKhDtGBqHu2HkuomJc02j5zft8zrUaXEuoicLeW54RkzPg==",
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/data-urls": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+			"integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+			"dependencies": {
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/data-urls/node_modules/tr46": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+			"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/data-urls/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/data-urls/node_modules/whatwg-url": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+			"integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+			"dependencies": {
+				"tr46": "^5.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/date-fns": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+			"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
+		"node_modules/dateformat": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
+			"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
+			"dev": true,
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/dayjs": {
+			"version": "1.11.10",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+			"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+		},
+		"node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
 				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"tar-fs": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
-					"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
-					"dev": true,
-					"requires": {
-						"chownr": "^1.1.1",
-						"mkdirp-classic": "^0.5.2",
-						"pump": "^3.0.0",
-						"tar-stream": "^2.1.4"
-					}
-				},
-				"tar-stream": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-					"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-					"dev": true,
-					"requires": {
-						"bl": "^4.0.3",
-						"end-of-stream": "^1.4.1",
-						"fs-constants": "^1.0.0",
-						"inherits": "^2.0.3",
-						"readable-stream": "^3.1.1"
-					}
-				},
-				"teen_process": {
-					"version": "1.16.0",
-					"resolved": "https://registry.npmjs.org/teen_process/-/teen_process-1.16.0.tgz",
-					"integrity": "sha512-RnW7HHZD1XuhSTzD3djYOdIl1adE3oNEprE3HOFFxWs5m4FZsqYRhKJ4mDU2udtNGMLUS7jV7l8vVRLWAvmPDw==",
-					"dev": true,
-					"requires": {
-						"@babel/runtime": "^7.0.0",
-						"bluebird": "^3.5.1",
-						"lodash": "^4.17.4",
-						"shell-quote": "^1.4.3",
-						"source-map-support": "^0.5.3",
-						"which": "^2.0.2"
-					}
-				},
-				"text-hex": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
-					"integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
-					"dev": true
-				},
-				"through": {
-					"version": "2.3.8",
-					"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-					"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-					"dev": true
-				},
-				"time-stamp": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
-					"integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
-					"dev": true
-				},
-				"timm": {
-					"version": "1.7.1",
-					"resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz",
-					"integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==",
-					"dev": true
-				},
-				"tinycolor2": {
-					"version": "1.4.2",
-					"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-					"integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-					"dev": true
-				},
-				"tmp": {
-					"version": "0.0.30",
-					"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.30.tgz",
-					"integrity": "sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=",
-					"dev": true,
-					"requires": {
-						"os-tmpdir": "~1.0.1"
-					}
-				},
-				"toidentifier": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-					"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-					"dev": true
-				},
-				"tough-cookie": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-					"integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-					"dev": true,
-					"requires": {
-						"psl": "^1.1.28",
-						"punycode": "^2.1.1"
-					}
-				},
-				"triple-beam": {
-					"version": "1.3.0",
-					"resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
-					"integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
-					"dev": true
-				},
-				"truncate-utf8-bytes": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
-					"integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=",
-					"dev": true,
-					"requires": {
-						"utf8-byte-length": "^1.0.1"
-					}
-				},
-				"tunnel-agent": {
-					"version": "0.6.0",
-					"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-					"integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "^5.0.1"
-					}
-				},
-				"tweetnacl": {
-					"version": "0.14.5",
-					"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-					"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-					"dev": true
-				},
-				"type-detect": {
-					"version": "0.1.1",
-					"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.1.tgz",
-					"integrity": "sha1-C6XsKohWQORw6k6FBZcZANrFiCI=",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.20.2",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-					"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-					"dev": true
-				},
-				"type-is": {
-					"version": "1.6.18",
-					"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-					"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-					"dev": true,
-					"requires": {
-						"media-typer": "0.3.0",
-						"mime-types": "~2.1.24"
-					}
-				},
-				"ua-parser-js": {
-					"version": "0.7.31",
-					"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-					"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
-					"dev": true
-				},
-				"unbzip2-stream": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
-					"integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
-					"dev": true,
-					"requires": {
-						"buffer": "^5.2.1",
-						"through": "^2.3.8"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"unorm": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz",
-					"integrity": "sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==",
-					"dev": true
-				},
-				"unpipe": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-					"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-					"dev": true
-				},
-				"uri-js": {
-					"version": "4.4.1",
-					"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-					"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-					"dev": true,
-					"requires": {
-						"punycode": "^2.1.0"
-					}
-				},
-				"utf7": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/utf7/-/utf7-1.0.2.tgz",
-					"integrity": "sha1-lV9JCq5lO6IguUVqCod2wZk2CZE=",
-					"dev": true,
-					"requires": {
-						"semver": "~5.3.0"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.3.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-							"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-							"dev": true
-						}
-					}
-				},
-				"utf8-byte-length": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
-					"integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=",
-					"dev": true
-				},
-				"utif": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz",
-					"integrity": "sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==",
-					"dev": true,
-					"requires": {
-						"pako": "^1.0.5"
-					}
-				},
-				"util-deprecate": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-					"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-					"dev": true
-				},
-				"utils-merge": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-					"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-					"dev": true
-				},
-				"uuid": {
-					"version": "8.3.2",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-					"dev": true
-				},
-				"uuid-js": {
-					"version": "0.7.5",
-					"resolved": "https://registry.npmjs.org/uuid-js/-/uuid-js-0.7.5.tgz",
-					"integrity": "sha1-bIhtAqU9LUDc8l2RoXC0p7JblNA=",
-					"dev": true
-				},
-				"validate.js": {
-					"version": "0.13.1",
-					"resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
-					"integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==",
-					"dev": true
-				},
-				"vary": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-					"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-					"dev": true
-				},
-				"verror": {
-					"version": "1.10.0",
-					"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-					"integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-					"dev": true,
-					"requires": {
-						"assert-plus": "^1.0.0",
-						"core-util-is": "1.0.2",
-						"extsprintf": "^1.2.0"
-					}
-				},
-				"webdriver": {
-					"version": "6.12.1",
-					"resolved": "https://registry.npmjs.org/webdriver/-/webdriver-6.12.1.tgz",
-					"integrity": "sha512-3rZgAj9o2XHp16FDTzvUYaHelPMSPbO1TpLIMUT06DfdZjNYIzZiItpIb/NbQDTPmNhzd9cuGmdI56WFBGY2BA==",
-					"dev": true,
-					"requires": {
-						"@wdio/config": "6.12.1",
-						"@wdio/logger": "6.10.10",
-						"@wdio/protocols": "6.12.0",
-						"@wdio/utils": "6.11.0",
-						"got": "^11.0.2",
-						"lodash.merge": "^4.6.1"
-					}
-				},
-				"webdriverio": {
-					"version": "6.12.1",
-					"resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-6.12.1.tgz",
-					"integrity": "sha512-Nx7ge0vTWHVIRUbZCT+IuMwB5Q0Q5nLlYdgnmmJviUKLuc3XtaEBkYPTbhHWHgSBXsPZMIc023vZKNkn+6iyeQ==",
-					"dev": true,
-					"requires": {
-						"@types/puppeteer-core": "^5.4.0",
-						"@wdio/config": "6.12.1",
-						"@wdio/logger": "6.10.10",
-						"@wdio/repl": "6.11.0",
-						"@wdio/utils": "6.11.0",
-						"archiver": "^5.0.0",
-						"atob": "^2.1.2",
-						"css-shorthand-properties": "^1.1.1",
-						"css-value": "^0.0.1",
-						"devtools": "6.12.1",
-						"fs-extra": "^9.0.1",
-						"get-port": "^5.1.1",
-						"grapheme-splitter": "^1.0.2",
-						"lodash.clonedeep": "^4.5.0",
-						"lodash.isobject": "^3.0.2",
-						"lodash.isplainobject": "^4.0.6",
-						"lodash.zip": "^4.2.0",
-						"minimatch": "^3.0.4",
-						"puppeteer-core": "^5.1.0",
-						"resq": "^1.9.1",
-						"rgb2hex": "0.2.3",
-						"serialize-error": "^8.0.0",
-						"webdriver": "6.12.1"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				},
-				"which-module": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-					"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-					"dev": true
-				},
-				"wide-align": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-					"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-					"dev": true,
-					"requires": {
-						"string-width": "^1.0.2 || 2"
-					}
-				},
-				"winston": {
-					"version": "3.3.3",
-					"resolved": "https://registry.npmjs.org/winston/-/winston-3.3.3.tgz",
-					"integrity": "sha512-oEXTISQnC8VlSAKf1KYSSd7J6IWuRPQqDdo8eoRNaYKLvwSb5+79Z3Yi1lrl6KDpU6/VWaxpakDAtb1oQ4n9aw==",
-					"dev": true,
-					"requires": {
-						"@dabh/diagnostics": "^2.0.2",
-						"async": "^3.1.0",
-						"is-stream": "^2.0.0",
-						"logform": "^2.2.0",
-						"one-time": "^1.0.0",
-						"readable-stream": "^3.4.0",
-						"stack-trace": "0.0.x",
-						"triple-beam": "^1.3.0",
-						"winston-transport": "^4.4.0"
-					},
-					"dependencies": {
-						"is-stream": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-							"integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-							"dev": true
-						}
-					}
-				},
-				"winston-transport": {
-					"version": "4.4.0",
-					"resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.4.0.tgz",
-					"integrity": "sha512-Lc7/p3GtqtqPBYYtS6KCN3c77/2QCev51DvcJKbkFPQNoj1sinkGwLGFDxkXY9J6p9+EPnYs+D90uwbnaiURTw==",
-					"dev": true,
-					"requires": {
-						"readable-stream": "^2.3.7",
-						"triple-beam": "^1.2.0"
-					},
-					"dependencies": {
-						"readable-stream": {
-							"version": "2.3.7",
-							"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-							"integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-							"dev": true,
-							"requires": {
-								"core-util-is": "~1.0.0",
-								"inherits": "~2.0.3",
-								"isarray": "~1.0.0",
-								"process-nextick-args": "~2.0.0",
-								"safe-buffer": "~5.1.1",
-								"string_decoder": "~1.1.1",
-								"util-deprecate": "~1.0.1"
-							}
-						}
-					}
-				},
-				"word-wrap": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-					"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-					"dev": true
+					"optional": true
+				}
+			}
+		},
+		"node_modules/debug/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
+		"node_modules/decache": {
+			"version": "4.5.1",
+			"resolved": "https://registry.npmjs.org/decache/-/decache-4.5.1.tgz",
+			"integrity": "sha512-5J37nATc6FmOTLbcsr9qx7Nm28qQyg1SK4xyEHqM0IBkNhWFp0Sm+vKoWYHD8wq+OUEb9jLyaKFfzzd1A9hcoA==",
+			"dev": true,
+			"dependencies": {
+				"callsite": "^1.0.0"
+			}
+		},
+		"node_modules/decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/decamelize-keys": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+			"integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+			"dependencies": {
+				"decamelize": "^1.1.0",
+				"map-obj": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/decimal.js": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+			"integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+		},
+		"node_modules/decode-uri-component": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+			"integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/decompress-response": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+			"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+			"dependencies": {
+				"mimic-response": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/decompress-response/node_modules/mimic-response": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+			"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/dedent": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+			"integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+			"dev": true
+		},
+		"node_modules/deep-extend": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/deep-freeze": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+			"integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==",
+			"dev": true
+		},
+		"node_modules/deep-is": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+			"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
+		},
+		"node_modules/deepmerge": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/deepmerge-ts": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-5.1.0.tgz",
+			"integrity": "sha512-eS8dRJOckyo9maw9Tu5O5RUi/4inFLrnoLkBe3cPfDMx3WZioXtmOew4TXQaxq7Rhl4xjDtR7c6x8nNTxOvbFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/default-browser": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
+			"integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
+			"dependencies": {
+				"bundle-name": "^3.0.0",
+				"default-browser-id": "^3.0.0",
+				"execa": "^7.1.1",
+				"titleize": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser-id": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
+			"integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
+			"dependencies": {
+				"bplist-parser": "^0.2.0",
+				"untildify": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/default-browser/node_modules/execa": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+			"integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.1",
+				"human-signals": "^4.3.0",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^3.0.7",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/default-browser/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/human-signals": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+			"integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+			"engines": {
+				"node": ">=14.18.0"
+			}
+		},
+		"node_modules/default-browser/node_modules/is-stream": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+			"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/mimic-fn": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+			"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/npm-run-path": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+			"integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+			"dependencies": {
+				"path-key": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/npm-run-path/node_modules/path-key": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+			"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/onetime": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+			"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+			"dependencies": {
+				"mimic-fn": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-browser/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-browser/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-browser/node_modules/strip-final-newline": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+			"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-browser/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/default-gateway": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+			"integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"execa": "^5.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/default-gateway/node_modules/cross-spawn": {
+			"version": "7.0.6",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+			"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+			"license": "MIT",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/default-gateway/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"license": "MIT",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/default-gateway/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-gateway/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/default-gateway/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-gateway/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/default-gateway/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"license": "MIT",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-gateway/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"license": "MIT",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/default-gateway/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-gateway/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"license": "MIT",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-gateway/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/default-gateway/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"license": "ISC",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/defaults": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+			"integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+			"dependencies": {
+				"clone": "^1.0.2"
+			}
+		},
+		"node_modules/defer-to-connect": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+			"integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/define-data-property": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/define-lazy-prop": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+			"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/define-properties": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+			"integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
+			"dependencies": {
+				"has-property-descriptors": "^1.0.0",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/define-property": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+			"integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+			"dev": true,
+			"dependencies": {
+				"is-descriptor": "^1.0.2",
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/define-property/node_modules/is-descriptor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
+			"integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
+			"dev": true,
+			"dependencies": {
+				"is-accessor-descriptor": "^1.0.1",
+				"is-data-descriptor": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/defu": {
+			"version": "6.1.4",
+			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+			"dev": true
+		},
+		"node_modules/degenerator": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+			"integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+			"dependencies": {
+				"ast-types": "^0.13.4",
+				"escodegen": "^2.1.0",
+				"esprima": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/degenerator/node_modules/ast-types": {
+			"version": "0.13.4",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+			"integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+			"dependencies": {
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/del": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
+			"integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
+			"dependencies": {
+				"@types/glob": "^7.1.1",
+				"globby": "^6.1.0",
+				"is-path-cwd": "^2.0.0",
+				"is-path-in-cwd": "^2.0.0",
+				"p-map": "^2.0.0",
+				"pify": "^4.0.1",
+				"rimraf": "^2.6.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/del/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/del/node_modules/globby": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+			"integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+			"dependencies": {
+				"array-union": "^1.0.1",
+				"glob": "^7.0.3",
+				"object-assign": "^4.0.1",
+				"pify": "^2.0.0",
+				"pinkie-promise": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/del/node_modules/globby/node_modules/pify": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/del/node_modules/p-map": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+			"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/del/node_modules/pify": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/del/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/delegate": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+			"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+		},
+		"node_modules/delegates": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+			"dev": true
+		},
+		"node_modules/denodeify": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
+			"integrity": "sha512-KNTihKNmQENUZeKu5fzfpzRqR5S2VMp4gl9RFHiWzj9DfvYQPMJ6XHKNaQxaGCXwPk6y9yme3aUoaiAe+KX+vg=="
+		},
+		"node_modules/depd": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+			"integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/deprecated-react-native-prop-types": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz",
+			"integrity": "sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==",
+			"dependencies": {
+				"@react-native/normalize-color": "*",
+				"invariant": "*",
+				"prop-types": "*"
+			}
+		},
+		"node_modules/deprecation": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
+			"integrity": "sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ=="
+		},
+		"node_modules/dequal": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/des.js": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
+			"integrity": "sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.1",
+				"minimalistic-assert": "^1.0.0"
+			}
+		},
+		"node_modules/destroy": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/detect-indent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
+			"integrity": "sha512-rlpvsxUtM0PQvy9iZe640/IWwWYyBsTApREbA1pHOpmOUIl9MkP/U4z7vTtg4Oaojvqhxt7sdufnT0EzGaR31g==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+			"integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+			"dev": true,
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-newline": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+			"integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-node": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+			"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+		},
+		"node_modules/detect-node-es": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+		},
+		"node_modules/detect-package-manager": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
+			"integrity": "sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==",
+			"dev": true,
+			"dependencies": {
+				"execa": "^5.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/detect-package-manager/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/detect-port": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+			"integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+			"dev": true,
+			"dependencies": {
+				"address": "^1.0.1",
+				"debug": "4"
+			},
+			"bin": {
+				"detect": "bin/detect-port.js",
+				"detect-port": "bin/detect-port.js"
+			}
+		},
+		"node_modules/devtools-protocol": {
+			"version": "0.0.1312386",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz",
+			"integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==",
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/diff": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+			"engines": {
+				"node": ">=0.3.1"
+			}
+		},
+		"node_modules/diff-sequences": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+			"integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/diffie-hellman": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+			"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^4.1.0",
+				"miller-rabin": "^4.0.0",
+				"randombytes": "^2.0.0"
+			}
+		},
+		"node_modules/diffie-hellman/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+			"dev": true
+		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/dir-glob/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/dlv": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+			"dev": true
+		},
+		"node_modules/dns-packet": {
+			"version": "5.6.1",
+			"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
+			"integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+			"dependencies": {
+				"@leichtgewicht/ip-codec": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/doctrine": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+			"integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+			"dependencies": {
+				"esutils": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/dom-accessibility-api": {
+			"version": "0.5.14",
+			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
+			"integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
+			"dev": true
+		},
+		"node_modules/dom-converter": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+			"integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+			"dev": true,
+			"dependencies": {
+				"utila": "~0.4"
+			}
+		},
+		"node_modules/dom-serializer": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+			"integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"entities": "^2.0.0"
+			}
+		},
+		"node_modules/dom-serializer/node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/dom-serializer/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/domain-browser": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+			"integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4",
+				"npm": ">=1.2"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+			"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+		},
+		"node_modules/domhandler": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+			"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+			"dependencies": {
+				"domelementtype": "1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+			"integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+			"dependencies": {
+				"dom-serializer": "0",
+				"domelementtype": "1"
+			}
+		},
+		"node_modules/dot-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/dot-prop": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+			"integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+			"dependencies": {
+				"is-obj": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/dot-prop/node_modules/is-obj": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+			"integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/dotenv": {
+			"version": "16.4.5",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+			"integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://dotenvx.com"
+			}
+		},
+		"node_modules/dotenv-expand": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-10.0.0.tgz",
+			"integrity": "sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/dset": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz",
+			"integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/duplexer": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+		},
+		"node_modules/duplexer2": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+			"integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+			"dev": true,
+			"dependencies": {
+				"readable-stream": "^2.0.2"
+			}
+		},
+		"node_modules/duplexify": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
+			"integrity": "sha512-fO3Di4tBKJpYTFHAxTU00BcfWMY9w24r/x21a6rZRbsD/ToUgGxsMbiGRmB7uVAXeGKXD9MwiLZa5E97EVgIRQ==",
+			"dev": true,
+			"dependencies": {
+				"end-of-stream": "^1.0.0",
+				"inherits": "^2.0.1",
+				"readable-stream": "^2.0.0",
+				"stream-shift": "^1.0.0"
+			}
+		},
+		"node_modules/eastasianwidth": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+			"dev": true
+		},
+		"node_modules/edge-paths": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/edge-paths/-/edge-paths-3.0.5.tgz",
+			"integrity": "sha512-sB7vSrDnFa4ezWQk9nZ/n0FdpdUuC6R1EOrlU3DL+bovcNFK28rqu2emmAUjujYEJTWIgQGqgVVWUZXMnc8iWg==",
+			"dev": true,
+			"dependencies": {
+				"@types/which": "^2.0.1",
+				"which": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/shirshak55"
+			}
+		},
+		"node_modules/edge-paths/node_modules/@types/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@types/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-113D3mDkZDjo+EeUEHCFy0qniNc1ZpecGiAU7WSo7YDoSzolZIQKpYFHrPpjkB2nuyahcKfrmLXeQlh7gqJYdw==",
+			"dev": true
+		},
+		"node_modules/edge-paths/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/edgedriver": {
+			"version": "5.3.7",
+			"resolved": "https://registry.npmjs.org/edgedriver/-/edgedriver-5.3.7.tgz",
+			"integrity": "sha512-E1qNFEA9NbaCPSvGaeZhyd7mEZLar+oFS0NRAe5TehJcQ3cayoUdJE5uOFrbxdv/rM4NEPH7aK9a9kgG09rszA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"@wdio/logger": "^8.11.0",
+				"decamelize": "^6.0.0",
+				"edge-paths": "^3.0.5",
+				"node-fetch": "^3.3.2",
+				"unzipper": "^0.10.14",
+				"which": "^4.0.0"
+			},
+			"bin": {
+				"edgedriver": "bin/edgedriver.js"
+			}
+		},
+		"node_modules/edgedriver/node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"dev": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/edgedriver/node_modules/decamelize": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
+			"integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/edgedriver/node_modules/isexe": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+			"integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/edgedriver/node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"dev": true,
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
+		"node_modules/edgedriver/node_modules/which": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+			"integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^3.1.1"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+		},
+		"node_modules/ejs": {
+			"version": "3.1.10",
+			"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+			"integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"jake": "^10.8.5"
+			},
+			"bin": {
+				"ejs": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/electron-to-chromium": {
+			"version": "1.5.33",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.33.tgz",
+			"integrity": "sha512-+cYTcFB1QqD4j4LegwLfpCNxifb6dDFUAwk6RsLusCwIaZI6or2f+q8rs5tTB2YC53HhOlIbEaqHMAAC8IOIwA=="
+		},
+		"node_modules/elegant-spinner": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+			"integrity": "sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/elliptic": {
+			"version": "6.5.4",
+			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+			"integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^4.11.9",
+				"brorand": "^1.1.0",
+				"hash.js": "^1.0.0",
+				"hmac-drbg": "^1.0.1",
+				"inherits": "^2.0.4",
+				"minimalistic-assert": "^1.0.1",
+				"minimalistic-crypto-utils": "^1.0.1"
+			}
+		},
+		"node_modules/elliptic/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+			"dev": true
+		},
+		"node_modules/elliptic/node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
+		"node_modules/emittery": {
+			"version": "0.13.1",
+			"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+			"integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/emittery?sponsor=1"
+			}
+		},
+		"node_modules/emoji-regex": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+			"integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+		},
+		"node_modules/emojis-list": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/enabled": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+			"integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==",
+			"dev": true
+		},
+		"node_modules/encodeurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/encoding": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+			"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+			"dependencies": {
+				"iconv-lite": "^0.6.2"
+			}
+		},
+		"node_modules/end-of-stream": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+			"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+			"dependencies": {
+				"once": "^1.4.0"
+			}
+		},
+		"node_modules/endent": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/endent/-/endent-2.1.0.tgz",
+			"integrity": "sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==",
+			"dev": true,
+			"dependencies": {
+				"dedent": "^0.7.0",
+				"fast-json-parse": "^1.0.3",
+				"objectorarray": "^1.0.5"
+			}
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+			"integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"memory-fs": "^0.5.0",
+				"tapable": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/enhanced-resolve/node_modules/memory-fs": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+			"integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+			"dev": true,
+			"dependencies": {
+				"errno": "^0.1.3",
+				"readable-stream": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4.3.0 <5.0.0 || >=5.10"
+			}
+		},
+		"node_modules/enquirer": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+			"integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+			"dependencies": {
+				"ansi-colors": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/entities": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+			"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+		},
+		"node_modules/env-paths": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/envinfo": {
+			"version": "7.14.0",
+			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz",
+			"integrity": "sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==",
+			"license": "MIT",
+			"bin": {
+				"envinfo": "dist/cli.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/equivalent-key-map": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/equivalent-key-map/-/equivalent-key-map-0.2.2.tgz",
+			"integrity": "sha512-xvHeyCDbZzkpN4VHQj/n+j2lOwL0VWszG30X4cOrc9Y7Tuo2qCdZK/0AMod23Z5dCtNUbaju6p0rwOhHUk05ew=="
+		},
+		"node_modules/err-code": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+			"integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+			"dev": true
+		},
+		"node_modules/errno": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
+			"integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+			"dev": true,
+			"dependencies": {
+				"prr": "~1.0.1"
+			},
+			"bin": {
+				"errno": "cli.js"
+			}
+		},
+		"node_modules/error-ex": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+			"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+			"dependencies": {
+				"is-arrayish": "^0.2.1"
+			}
+		},
+		"node_modules/error-stack-parser": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+			"integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+			"dependencies": {
+				"stackframe": "^1.1.1"
+			}
+		},
+		"node_modules/errorhandler": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.5.1.tgz",
+			"integrity": "sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==",
+			"dependencies": {
+				"accepts": "~1.3.7",
+				"escape-html": "~1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/es-abstract": {
+			"version": "1.22.1",
+			"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
+			"integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
+			"dependencies": {
+				"array-buffer-byte-length": "^1.0.0",
+				"arraybuffer.prototype.slice": "^1.0.1",
+				"available-typed-arrays": "^1.0.5",
+				"call-bind": "^1.0.2",
+				"es-set-tostringtag": "^2.0.1",
+				"es-to-primitive": "^1.2.1",
+				"function.prototype.name": "^1.1.5",
+				"get-intrinsic": "^1.2.1",
+				"get-symbol-description": "^1.0.0",
+				"globalthis": "^1.0.3",
+				"gopd": "^1.0.1",
+				"has": "^1.0.3",
+				"has-property-descriptors": "^1.0.0",
+				"has-proto": "^1.0.1",
+				"has-symbols": "^1.0.3",
+				"internal-slot": "^1.0.5",
+				"is-array-buffer": "^3.0.2",
+				"is-callable": "^1.2.7",
+				"is-negative-zero": "^2.0.2",
+				"is-regex": "^1.1.4",
+				"is-shared-array-buffer": "^1.0.2",
+				"is-string": "^1.0.7",
+				"is-typed-array": "^1.1.10",
+				"is-weakref": "^1.0.2",
+				"object-inspect": "^1.12.3",
+				"object-keys": "^1.1.1",
+				"object.assign": "^4.1.4",
+				"regexp.prototype.flags": "^1.5.0",
+				"safe-array-concat": "^1.0.0",
+				"safe-regex-test": "^1.0.0",
+				"string.prototype.trim": "^1.2.7",
+				"string.prototype.trimend": "^1.0.6",
+				"string.prototype.trimstart": "^1.0.6",
+				"typed-array-buffer": "^1.0.0",
+				"typed-array-byte-length": "^1.0.0",
+				"typed-array-byte-offset": "^1.0.0",
+				"typed-array-length": "^1.0.4",
+				"unbox-primitive": "^1.0.2",
+				"which-typed-array": "^1.1.10"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/es-define-property": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+			"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+			"dependencies": {
+				"get-intrinsic": "^1.2.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-get-iterator": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+			"integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.1.3",
+				"has-symbols": "^1.0.3",
+				"is-arguments": "^1.1.1",
+				"is-map": "^2.0.2",
+				"is-set": "^2.0.2",
+				"is-string": "^1.0.7",
+				"isarray": "^2.0.5",
+				"stop-iteration-iterator": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/es-get-iterator/node_modules/isarray": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+			"dev": true
+		},
+		"node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
+		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+			"integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+			"dependencies": {
+				"get-intrinsic": "^1.1.3",
+				"has": "^1.0.3",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-shim-unscopables": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+			"integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+			"dependencies": {
+				"has": "^1.0.3"
+			}
+		},
+		"node_modules/es-to-primitive": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+			"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+			"dependencies": {
+				"is-callable": "^1.1.4",
+				"is-date-object": "^1.0.1",
+				"is-symbol": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/es6-error": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+			"integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+			"dev": true
+		},
+		"node_modules/esbuild": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+			"integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"optionalDependencies": {
+				"@esbuild/android-arm": "0.18.20",
+				"@esbuild/android-arm64": "0.18.20",
+				"@esbuild/android-x64": "0.18.20",
+				"@esbuild/darwin-arm64": "0.18.20",
+				"@esbuild/darwin-x64": "0.18.20",
+				"@esbuild/freebsd-arm64": "0.18.20",
+				"@esbuild/freebsd-x64": "0.18.20",
+				"@esbuild/linux-arm": "0.18.20",
+				"@esbuild/linux-arm64": "0.18.20",
+				"@esbuild/linux-ia32": "0.18.20",
+				"@esbuild/linux-loong64": "0.18.20",
+				"@esbuild/linux-mips64el": "0.18.20",
+				"@esbuild/linux-ppc64": "0.18.20",
+				"@esbuild/linux-riscv64": "0.18.20",
+				"@esbuild/linux-s390x": "0.18.20",
+				"@esbuild/linux-x64": "0.18.20",
+				"@esbuild/netbsd-x64": "0.18.20",
+				"@esbuild/openbsd-x64": "0.18.20",
+				"@esbuild/sunos-x64": "0.18.20",
+				"@esbuild/win32-arm64": "0.18.20",
+				"@esbuild/win32-ia32": "0.18.20",
+				"@esbuild/win32-x64": "0.18.20"
+			}
+		},
+		"node_modules/esbuild-plugin-alias": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/esbuild-plugin-alias/-/esbuild-plugin-alias-0.2.1.tgz",
+			"integrity": "sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==",
+			"dev": true
+		},
+		"node_modules/esbuild-register": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.5.0.tgz",
+			"integrity": "sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"peerDependencies": {
+				"esbuild": ">=0.12 <1"
+			}
+		},
+		"node_modules/escalade": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+		},
+		"node_modules/escape-latex": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz",
+			"integrity": "sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==",
+			"dev": true
+		},
+		"node_modules/escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/escodegen": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+			"integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+			"dependencies": {
+				"esprima": "^4.0.1",
+				"estraverse": "^5.2.0",
+				"esutils": "^2.0.2"
+			},
+			"bin": {
+				"escodegen": "bin/escodegen.js",
+				"esgenerate": "bin/esgenerate.js"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"optionalDependencies": {
+				"source-map": "~0.6.1"
+			}
+		},
+		"node_modules/escodegen/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/eslint": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.3.0.tgz",
+			"integrity": "sha512-aIay56Ph6RxOTC7xyr59Kt3ewX185SaGnAr8eWukoPLeriCrvGjvAubxuvaXOfsxhtwV5g0uBOsyhAom4qJdww==",
+			"dependencies": {
+				"@eslint/eslintrc": "^1.0.4",
+				"@humanwhocodes/config-array": "^0.6.0",
+				"ajv": "^6.10.0",
+				"chalk": "^4.0.0",
+				"cross-spawn": "^7.0.2",
+				"debug": "^4.3.2",
+				"doctrine": "^3.0.0",
+				"enquirer": "^2.3.5",
+				"escape-string-regexp": "^4.0.0",
+				"eslint-scope": "^7.1.0",
+				"eslint-utils": "^3.0.0",
+				"eslint-visitor-keys": "^3.1.0",
+				"espree": "^9.1.0",
+				"esquery": "^1.4.0",
+				"esutils": "^2.0.2",
+				"fast-deep-equal": "^3.1.3",
+				"file-entry-cache": "^6.0.1",
+				"functional-red-black-tree": "^1.0.1",
+				"glob-parent": "^6.0.1",
+				"globals": "^13.6.0",
+				"ignore": "^4.0.6",
+				"import-fresh": "^3.0.0",
+				"imurmurhash": "^0.1.4",
+				"is-glob": "^4.0.0",
+				"js-yaml": "^4.1.0",
+				"json-stable-stringify-without-jsonify": "^1.0.1",
+				"levn": "^0.4.1",
+				"lodash.merge": "^4.6.2",
+				"minimatch": "^3.0.4",
+				"natural-compare": "^1.4.0",
+				"optionator": "^0.9.1",
+				"progress": "^2.0.0",
+				"regexpp": "^3.2.0",
+				"semver": "^7.2.1",
+				"strip-ansi": "^6.0.1",
+				"strip-json-comments": "^3.1.0",
+				"text-table": "^0.2.0",
+				"v8-compile-cache": "^2.0.3"
+			},
+			"bin": {
+				"eslint": "bin/eslint.js"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint-config-prettier": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+			"integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+			"bin": {
+				"eslint-config-prettier": "bin/cli.js"
+			},
+			"peerDependencies": {
+				"eslint": ">=7.0.0"
+			}
+		},
+		"node_modules/eslint-import-resolver-node": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
+			"integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^2.6.9",
+				"resolve": "^1.13.1"
+			}
+		},
+		"node_modules/eslint-import-resolver-node/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dev": true,
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/eslint-module-utils": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz",
+			"integrity": "sha512-fjoetBXQZq2tSTWZ9yWVl2KuFrTZZH3V+9iD1V1RfpDgxzJR+mPd/KZmMiA8gbPqdBzpNiEHOuT7IYEWxrH0zQ==",
+			"dependencies": {
+				"debug": "^3.2.7",
+				"find-up": "^2.1.0",
+				"pkg-dir": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/eslint-module-utils/node_modules/debug": {
+			"version": "3.2.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+			"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+			"dependencies": {
+				"ms": "^2.1.1"
+			}
+		},
+		"node_modules/eslint-module-utils/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/eslint-plugin-eslint-comments": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-eslint-comments/-/eslint-plugin-eslint-comments-3.1.2.tgz",
+			"integrity": "sha512-QexaqrNeteFfRTad96W+Vi4Zj1KFbkHHNMMaHZEYcovKav6gdomyGzaxSDSL3GoIyUOo078wRAdYlu1caiauIQ==",
+			"dev": true,
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5",
+				"ignore": "^5.0.5"
+			},
+			"engines": {
+				"node": ">=6.5.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=4.19.1"
+			}
+		},
+		"node_modules/eslint-plugin-import": {
+			"version": "2.25.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz",
+			"integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==",
+			"dependencies": {
+				"array-includes": "^3.1.4",
+				"array.prototype.flat": "^1.2.5",
+				"debug": "^2.6.9",
+				"doctrine": "^2.1.0",
+				"eslint-import-resolver-node": "^0.3.6",
+				"eslint-module-utils": "^2.7.0",
+				"has": "^1.0.3",
+				"is-core-module": "^2.7.0",
+				"is-glob": "^4.0.3",
+				"minimatch": "^3.0.4",
+				"object.values": "^1.1.5",
+				"resolve": "^1.20.0",
+				"tsconfig-paths": "^3.11.0"
+			},
+			"engines": {
+				"node": ">=4"
+			},
+			"peerDependencies": {
+				"eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+			}
+		},
+		"node_modules/eslint-plugin-import/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node": {
+			"version": "0.3.9",
+			"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+			"integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+			"dependencies": {
+				"debug": "^3.2.7",
+				"is-core-module": "^2.13.0",
+				"resolve": "^1.22.4"
+			}
+		},
+		"node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node/node_modules/debug": {
+			"version": "3.2.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+			"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+			"dependencies": {
+				"ms": "^2.1.1"
+			}
+		},
+		"node_modules/eslint-plugin-import/node_modules/eslint-import-resolver-node/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		},
+		"node_modules/eslint-plugin-jest": {
+			"version": "27.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.4.3.tgz",
+			"integrity": "sha512-7S6SmmsHsgIm06BAGCAxL+ABd9/IB3MWkz2pudj6Qqor2y1qQpWPfuFU4SG9pWj4xDjF0e+D7Llh5useuSzAZw==",
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/utils": "^5.10.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/eslint-plugin": "^5.0.0 || ^6.0.0",
+				"eslint": "^7.0.0 || ^8.0.0",
+				"jest": "*"
+			},
+			"peerDependenciesMeta": {
+				"@typescript-eslint/eslint-plugin": {
+					"optional": true
 				},
-				"wrap-ansi": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-					"integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-					"dev": true,
-					"requires": {
-						"string-width": "^1.0.1",
-						"strip-ansi": "^3.0.1"
-					}
+				"jest": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-plugin-jest-dom": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-5.0.2.tgz",
+			"integrity": "sha512-zfNOwQOrOOGcxb3tcOgB2fEiqmgEbXKcPrNC+NlNSWCi3wg/m+DWVqrrshp4gOjhpP1R/1X7kkHumnf8PLUFhw==",
+			"dev": true,
+			"dependencies": {
+				"@babel/runtime": "^7.16.3",
+				"requireindex": "^1.2.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0",
+				"npm": ">=6",
+				"yarn": ">=1"
+			},
+			"peerDependencies": {
+				"@testing-library/dom": "^8.0.0 || ^9.0.0",
+				"eslint": "^6.8.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-jsdoc": {
+			"version": "46.4.6",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-46.4.6.tgz",
+			"integrity": "sha512-z4SWYnJfOqftZI+b3RM9AtWL1vF/sLWE/LlO9yOKDof9yN2+n3zOdOJTGX/pRE/xnPsooOLG2Rq6e4d+XW3lNw==",
+			"dependencies": {
+				"@es-joy/jsdoccomment": "~0.40.1",
+				"are-docs-informative": "^0.0.2",
+				"comment-parser": "1.4.0",
+				"debug": "^4.3.4",
+				"escape-string-regexp": "^4.0.0",
+				"esquery": "^1.5.0",
+				"is-builtin-module": "^3.2.1",
+				"semver": "^7.5.4",
+				"spdx-expression-parse": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"eslint": "^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-jsdoc/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint-plugin-jsx-a11y": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
+			"integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+			"dependencies": {
+				"@babel/runtime": "^7.16.3",
+				"aria-query": "^4.2.2",
+				"array-includes": "^3.1.4",
+				"ast-types-flow": "^0.0.7",
+				"axe-core": "^4.3.5",
+				"axobject-query": "^2.2.0",
+				"damerau-levenshtein": "^1.0.7",
+				"emoji-regex": "^9.2.2",
+				"has": "^1.0.3",
+				"jsx-ast-utils": "^3.2.1",
+				"language-tags": "^1.0.5",
+				"minimatch": "^3.0.4"
+			},
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependencies": {
+				"eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+			}
+		},
+		"node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+		},
+		"node_modules/eslint-plugin-playwright": {
+			"version": "0.15.3",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-0.15.3.tgz",
+			"integrity": "sha512-LQMW5y0DLK5Fnpya7JR1oAYL2/7Y9wDiYw6VZqlKqcRGSgjbVKNqxraphk7ra1U3Bb5EK444xMgUlQPbMg2M1g==",
+			"peerDependencies": {
+				"eslint": ">=7",
+				"eslint-plugin-jest": ">=25"
+			},
+			"peerDependenciesMeta": {
+				"eslint-plugin-jest": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-plugin-prettier": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
+			"integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
+			"dependencies": {
+				"prettier-linter-helpers": "^1.0.0",
+				"synckit": "^0.8.5"
+			},
+			"engines": {
+				"node": "^14.18.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/prettier"
+			},
+			"peerDependencies": {
+				"@types/eslint": ">=8.0.0",
+				"eslint": ">=8.0.0",
+				"prettier": ">=3.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/eslint": {
+					"optional": true
 				},
-				"wrappy": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-					"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-					"dev": true
+				"eslint-config-prettier": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-plugin-react": {
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.27.0.tgz",
+			"integrity": "sha512-0Ut+CkzpppgFtoIhdzi2LpdpxxBvgFf99eFqWxJnUrO7mMe0eOiNpou6rvNYeVVV6lWZvTah0BFne7k5xHjARg==",
+			"dependencies": {
+				"array-includes": "^3.1.4",
+				"array.prototype.flatmap": "^1.2.5",
+				"doctrine": "^2.1.0",
+				"estraverse": "^5.3.0",
+				"jsx-ast-utils": "^2.4.1 || ^3.0.0",
+				"minimatch": "^3.0.4",
+				"object.entries": "^1.1.5",
+				"object.fromentries": "^2.0.5",
+				"object.hasown": "^1.1.0",
+				"object.values": "^1.1.5",
+				"prop-types": "^15.7.2",
+				"resolve": "^2.0.0-next.3",
+				"semver": "^6.3.0",
+				"string.prototype.matchall": "^4.0.6"
+			},
+			"engines": {
+				"node": ">=4"
+			},
+			"peerDependencies": {
+				"eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+			}
+		},
+		"node_modules/eslint-plugin-react-compiler": {
+			"version": "19.0.0-beta-0dec889-20241115",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react-compiler/-/eslint-plugin-react-compiler-19.0.0-beta-0dec889-20241115.tgz",
+			"integrity": "sha512-jTjEHuE8/R6qD/CD2d+5YvWMy1q9/tX3kft4WDyg42/HktjHtHXrEToyZ6THEQf8t/YWMY1RGeCkykePbACtFA==",
+			"dev": true,
+			"dependencies": {
+				"@babel/core": "^7.24.4",
+				"@babel/parser": "^7.24.4",
+				"@babel/plugin-proposal-private-methods": "^7.18.6",
+				"hermes-parser": "^0.20.1",
+				"zod": "^3.22.4",
+				"zod-validation-error": "^3.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.0.0 || >= 18.0.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=7"
+			}
+		},
+		"node_modules/eslint-plugin-react-compiler/node_modules/hermes-estree": {
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.20.1.tgz",
+			"integrity": "sha512-SQpZK4BzR48kuOg0v4pb3EAGNclzIlqMj3Opu/mu7bbAoFw6oig6cEt/RAi0zTFW/iW6Iz9X9ggGuZTAZ/yZHg==",
+			"dev": true
+		},
+		"node_modules/eslint-plugin-react-compiler/node_modules/hermes-parser": {
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.20.1.tgz",
+			"integrity": "sha512-BL5P83cwCogI8D7rrDCgsFY0tdYUtmFP9XaXtl2IQjC+2Xo+4okjfXintlTxcIwl4qeGddEl28Z11kbVIw0aNA==",
+			"dev": true,
+			"dependencies": {
+				"hermes-estree": "0.20.1"
+			}
+		},
+		"node_modules/eslint-plugin-react-hooks": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
+			"integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+			}
+		},
+		"node_modules/eslint-plugin-react/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/eslint-plugin-react/node_modules/resolve": {
+			"version": "2.0.0-next.5",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+			"integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/eslint-plugin-react/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/eslint-plugin-ssr-friendly": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-ssr-friendly/-/eslint-plugin-ssr-friendly-1.0.6.tgz",
+			"integrity": "sha512-O1S/0Q8FYTl1c4vwIr0cg59u37mL5qe7sxpMzjdIo2v8l0LjCugU699trmkgOheQINTq7R9yhfCo6YaAb4tYUQ==",
+			"dev": true,
+			"dependencies": {
+				"globals": "^13.8.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=0.8.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook": {
+			"version": "0.6.13",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.13.tgz",
+			"integrity": "sha512-smd+CS0WH1jBqUEJ3znGS7DU4ayBE9z6lkQAK2yrSUv1+rq8BT/tiI5C/rKE7rmiqiAfojtNYZRhzo5HrulccQ==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/csf": "^0.0.1",
+				"@typescript-eslint/utils": "^5.45.0",
+				"requireindex": "^1.1.0",
+				"ts-dedent": "^2.2.0"
+			},
+			"engines": {
+				"node": "12.x || 14.x || >= 16"
+			},
+			"peerDependencies": {
+				"eslint": ">=6"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@storybook/csf": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
+			"integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
+			"dev": true,
+			"dependencies": {
+				"lodash": "^4.17.15"
+			}
+		},
+		"node_modules/eslint-plugin-testing-library": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.0.2.tgz",
+			"integrity": "sha512-3BV6FWtLbpKFb4Y1obSdt8PC9xSqz6T+7EHB/6pSCXqVjKPoS67ck903feKMKQphd5VhrX+N51yHuVaPa7elsw==",
+			"dev": true,
+			"dependencies": {
+				"@typescript-eslint/utils": "^5.58.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0",
+				"npm": ">=6"
+			},
+			"peerDependencies": {
+				"eslint": "^7.5.0 || ^8.0.0"
+			}
+		},
+		"node_modules/eslint-scope": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+			"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+			"dev": true,
+			"dependencies": {
+				"esrecurse": "^4.1.0",
+				"estraverse": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/eslint-utils": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+			"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+			"dependencies": {
+				"eslint-visitor-keys": "^2.0.0"
+			},
+			"engines": {
+				"node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/mysticatea"
+			},
+			"peerDependencies": {
+				"eslint": ">=5"
+			}
+		},
+		"node_modules/eslint-visitor-keys": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+			"integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/eslint/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/eslint/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/eslint/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/eslint/node_modules/doctrine": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+			"dependencies": {
+				"esutils": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/eslint/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint/node_modules/eslint-scope": {
+			"version": "7.2.2",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/eslint/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/eslint/node_modules/ignore": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+			"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/eslint/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/eslint/node_modules/levn": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+			"dependencies": {
+				"prelude-ls": "^1.2.1",
+				"type-check": "~0.4.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/eslint/node_modules/optionator": {
+			"version": "0.9.4",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+			"dependencies": {
+				"deep-is": "^0.1.3",
+				"fast-levenshtein": "^2.0.6",
+				"levn": "^0.4.1",
+				"prelude-ls": "^1.2.1",
+				"type-check": "^0.4.0",
+				"word-wrap": "^1.2.5"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/eslint/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/eslint/node_modules/prelude-ls": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/eslint/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/eslint/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/eslint/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint/node_modules/type-check": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+			"dependencies": {
+				"prelude-ls": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/eslint/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/espree": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-9.1.0.tgz",
+			"integrity": "sha512-ZgYLvCS1wxOczBYGcQT9DDWgicXwJ4dbocr9uYN+/eresBAUuBu+O4WzB21ufQ/JqQT8gyp7hJ3z8SHii32mTQ==",
+			"dependencies": {
+				"acorn": "^8.6.0",
+				"acorn-jsx": "^5.3.1",
+				"eslint-visitor-keys": "^3.1.0"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			}
+		},
+		"node_modules/espree/node_modules/acorn": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+			"integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/espree/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/esquery": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+			"integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+			"dependencies": {
+				"estraverse": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/esquery/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/esrecurse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+			"dependencies": {
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/esrecurse/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estraverse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+			"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/esutils": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+			"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/event-target-shim": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+			"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/eventemitter2": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz",
+			"integrity": "sha512-EUFhWUYzqqBZlzBMI+dPU8rnKXfQZEUnitnccQuEIAnvWFHCpt3+4fts2+4dpxLtlsiseVXCMFg37KjYChSxpg=="
+		},
+		"node_modules/eventemitter3": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+		},
+		"node_modules/events": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+			"engines": {
+				"node": ">=0.8.x"
+			}
+		},
+		"node_modules/evp_bytestokey": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+			"integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+			"dev": true,
+			"dependencies": {
+				"md5.js": "^1.3.4",
+				"safe-buffer": "^5.1.1"
+			}
+		},
+		"node_modules/execa": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.2.tgz",
+			"integrity": "sha512-QI2zLa6CjGWdiQsmSkZoGtDx2N+cQIGb3yNolGTdjSQzydzLgYYf8LRuagp7S7fPimjcrzUDSUFd/MgzELMi4Q==",
+			"dependencies": {
+				"cross-spawn": "^7.0.0",
+				"get-stream": "^5.0.0",
+				"human-signals": "^1.1.1",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.0",
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/execa/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/execa/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/execa/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/execa/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/execa/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/execa/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/execa/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/execa/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/execa/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/exit": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+			"integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/expand-brackets": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+			"integrity": "sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^2.3.3",
+				"define-property": "^0.2.5",
+				"extend-shallow": "^2.0.1",
+				"posix-character-classes": "^0.1.0",
+				"regex-not": "^1.0.0",
+				"snapdragon": "^0.8.1",
+				"to-regex": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/expand-brackets/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dev": true,
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/expand-brackets/node_modules/define-property": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+			"integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
+			"dev": true,
+			"dependencies": {
+				"is-descriptor": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/expand-brackets/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/expand-template": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+			"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+			"dev": true,
+			"optional": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/expand-tilde": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
+			"integrity": "sha512-rtmc+cjLZqnu9dSYosX9EWmSJhTwpACgJQTfj4hgg2JjOD/6SIQalZrt4a3aQeh++oNxkazcaxrhPUj6+g5G/Q==",
+			"dependencies": {
+				"os-homedir": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/expect": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/expect/-/expect-29.6.2.tgz",
+			"integrity": "sha512-iAErsLxJ8C+S02QbLAwgSGSezLQK+XXRDt8IuFXFpwCNw2ECmzZSmjKcCaFVp5VRMk+WAvz6h6jokzEzBFZEuA==",
+			"dependencies": {
+				"@jest/expect-utils": "^29.6.2",
+				"@types/node": "*",
+				"jest-get-type": "^29.4.3",
+				"jest-matcher-utils": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-util": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/expect-puppeteer": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/expect-puppeteer/-/expect-puppeteer-4.4.0.tgz",
+			"integrity": "sha512-6Ey4Xy2xvmuQu7z7YQtMsaMV0EHJRpVxIDOd5GRrm04/I3nkTKIutELfECsLp6le+b3SSa3cXhPiw6PgqzxYWA=="
+		},
+		"node_modules/exponential-backoff": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz",
+			"integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==",
+			"dev": true
+		},
+		"node_modules/express": {
+			"version": "4.18.2",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+			"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+			"dependencies": {
+				"accepts": "~1.3.8",
+				"array-flatten": "1.1.1",
+				"body-parser": "1.20.1",
+				"content-disposition": "0.5.4",
+				"content-type": "~1.0.4",
+				"cookie": "0.5.0",
+				"cookie-signature": "1.0.6",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"finalhandler": "1.2.0",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"merge-descriptors": "1.0.1",
+				"methods": "~1.1.2",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"path-to-regexp": "0.1.7",
+				"proxy-addr": "~2.0.7",
+				"qs": "6.11.0",
+				"range-parser": "~1.2.1",
+				"safe-buffer": "5.2.1",
+				"send": "0.18.0",
+				"serve-static": "1.15.0",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"type-is": "~1.6.18",
+				"utils-merge": "1.0.1",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.10.0"
+			}
+		},
+		"node_modules/express/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/express/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/express/node_modules/finalhandler": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+			"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"statuses": "2.0.1",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/express/node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/express/node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"ws": {
-					"version": "7.5.3",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz",
-					"integrity": "sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"xhr": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz",
-					"integrity": "sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==",
-					"dev": true,
-					"requires": {
-						"global": "~4.4.0",
-						"is-function": "^1.0.1",
-						"parse-headers": "^2.0.0",
-						"xtend": "^4.0.0"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/express/node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
+		"node_modules/extend-shallow": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+			"integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+			"dev": true,
+			"dependencies": {
+				"assign-symbols": "^1.0.0",
+				"is-extendable": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extend-shallow/node_modules/is-extendable": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+			"integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+			"dev": true,
+			"dependencies": {
+				"is-plain-object": "^2.0.4"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extend-shallow/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+			"dev": true,
+			"dependencies": {
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/external-editor": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
+			"integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
+			"dependencies": {
+				"chardet": "^0.7.0",
+				"iconv-lite": "^0.4.24",
+				"tmp": "^0.0.33"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/external-editor/node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extglob": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+			"integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+			"dev": true,
+			"dependencies": {
+				"array-unique": "^0.3.2",
+				"define-property": "^1.0.0",
+				"expand-brackets": "^2.1.4",
+				"extend-shallow": "^2.0.1",
+				"fragment-cache": "^0.2.1",
+				"regex-not": "^1.0.0",
+				"snapdragon": "^0.8.1",
+				"to-regex": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extglob/node_modules/define-property": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+			"integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+			"dev": true,
+			"dependencies": {
+				"is-descriptor": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extglob/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/extglob/node_modules/is-descriptor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
+			"integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
+			"dev": true,
+			"dependencies": {
+				"is-accessor-descriptor": "^1.0.1",
+				"is-data-descriptor": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/extract-zip": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+			"integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+			"dependencies": {
+				"concat-stream": "^1.6.2",
+				"debug": "^2.6.9",
+				"mkdirp": "^0.5.4",
+				"yauzl": "^2.10.0"
+			},
+			"bin": {
+				"extract-zip": "cli.js"
+			}
+		},
+		"node_modules/extract-zip/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/extract-zip/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/fast-average-color": {
+			"version": "9.1.1",
+			"resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.1.1.tgz",
+			"integrity": "sha512-PJizLBcGb/jqUzrH66385te4+GcOK7wcUiCDvBUszdpzc/pvV1kwifvvsFygV3mS+7qwnWmK9/BrZniaOOC9ag==",
+			"dependencies": {
+				"@types/offscreencanvas": "^2019.7.0"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/fast-base64-decode": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
+			"integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q=="
+		},
+		"node_modules/fast-deep-equal": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+		},
+		"node_modules/fast-diff": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+			"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
+		},
+		"node_modules/fast-fifo": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.0.tgz",
+			"integrity": "sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw=="
+		},
+		"node_modules/fast-glob": {
+			"version": "3.2.7",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+			"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/fast-glob/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/fast-json-parse": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz",
+			"integrity": "sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==",
+			"dev": true
+		},
+		"node_modules/fast-json-stable-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+		},
+		"node_modules/fast-levenshtein": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+		},
+		"node_modules/fast-memoize": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
+			"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+		},
+		"node_modules/fast-uri": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+			"integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+			"license": "MIT"
+		},
+		"node_modules/fast-xml-parser": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.4.tgz",
+			"integrity": "sha512-utnwm92SyozgA3hhH2I8qldf2lBqm6qHOICawRNRFu1qMe3+oqr+GcXjGqTmXTMGE5T4eC03kr/rlh5C1IRdZA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/NaturalIntelligence"
 				},
-				"xml-parse-from-string": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
-					"integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig=",
-					"dev": true
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/naturalintelligence"
+				}
+			],
+			"dependencies": {
+				"strnum": "^1.0.5"
+			},
+			"bin": {
+				"fxparser": "src/cli/cli.js"
+			}
+		},
+		"node_modules/fastest-levenshtein": {
+			"version": "1.0.16",
+			"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+			"integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+			"engines": {
+				"node": ">= 4.9.1"
+			}
+		},
+		"node_modules/fastq": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
+			"integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+			"dependencies": {
+				"reusify": "^1.0.0"
+			}
+		},
+		"node_modules/faye-websocket": {
+			"version": "0.11.4",
+			"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+			"integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+			"dependencies": {
+				"websocket-driver": ">=0.5.1"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/fb-watchman": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
+			"integrity": "sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=",
+			"dependencies": {
+				"bser": "^2.0.0"
+			}
+		},
+		"node_modules/fd-slicer": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+			"integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+			"dependencies": {
+				"pend": "~1.2.0"
+			}
+		},
+		"node_modules/fdir": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-5.2.0.tgz",
+			"integrity": "sha512-skyI2Laxtj9GYzmktPgY6DT8uswXq+VoxH26SskykvEhTSbi7tRM/787uZt/p8maxrQCJdzC90zX1btbxiJ6lw==",
+			"dev": true
+		},
+		"node_modules/fecha": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+			"integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==",
+			"dev": true
+		},
+		"node_modules/fetch-blob": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
 				},
-				"xml2js": {
-					"version": "0.4.23",
-					"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
-					"integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-					"dev": true,
-					"requires": {
-						"sax": ">=0.6.0",
-						"xmlbuilder": "~11.0.0"
-					}
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"dependencies": {
+				"node-domexception": "^1.0.0",
+				"web-streams-polyfill": "^3.0.3"
+			},
+			"engines": {
+				"node": "^12.20 || >= 14.13"
+			}
+		},
+		"node_modules/fetch-retry": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-5.0.6.tgz",
+			"integrity": "sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==",
+			"dev": true
+		},
+		"node_modules/figgy-pudding": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+			"integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
+			"deprecated": "This module is no longer supported.",
+			"dev": true
+		},
+		"node_modules/figures": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+			"integrity": "sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==",
+			"dev": true,
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/file-entry-cache": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+			"integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+			"dependencies": {
+				"flat-cache": "^3.0.4"
+			},
+			"engines": {
+				"node": "^10.12.0 || >=12.0.0"
+			}
+		},
+		"node_modules/file-system-cache": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+			"integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+			"dev": true,
+			"dependencies": {
+				"fs-extra": "11.1.1",
+				"ramda": "0.29.0"
+			}
+		},
+		"node_modules/file-system-cache/node_modules/fs-extra": {
+			"version": "11.1.1",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+			"integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/file-system-cache/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/file-system-cache/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/file-uri-to-path": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+			"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/filelist": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+			"integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+			"dev": true,
+			"dependencies": {
+				"minimatch": "^5.0.1"
+			}
+		},
+		"node_modules/filelist/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/filelist/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/filename-reserved-regex": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
+			"integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/filenamify": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.2.0.tgz",
+			"integrity": "sha512-pkgE+4p7N1n7QieOopmn3TqJaefjdWXwEkj2XLZJLKfOgcQKkn11ahvGNgTD8mLggexLiDFQxeTs14xVU22XPA==",
+			"dependencies": {
+				"filename-reserved-regex": "^2.0.0",
+				"strip-outer": "^1.0.1",
+				"trim-repeated": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"license": "MIT",
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/fill-range/node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
+		"node_modules/fill-range/node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"license": "MIT",
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/filter-obj": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+			"integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/finalhandler": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+			"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"on-finished": "~2.3.0",
+				"parseurl": "~1.3.3",
+				"statuses": "~1.5.0",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/finalhandler/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/find-cache-dir": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+			"integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+			"dependencies": {
+				"commondir": "^1.0.1",
+				"make-dir": "^2.0.0",
+				"pkg-dir": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/find-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+			"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+			"dependencies": {
+				"locate-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/locate-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+			"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+			"dependencies": {
+				"p-locate": "^3.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/make-dir": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+			"dependencies": {
+				"pify": "^4.0.1",
+				"semver": "^5.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/p-locate": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+			"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+			"dependencies": {
+				"p-limit": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/pify": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/pkg-dir": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+			"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+			"dependencies": {
+				"find-up": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/find-cache-dir/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/find-file-up": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz",
+			"integrity": "sha512-mBxmNbVyjg1LQIIpgO8hN+ybWBgDQK8qjht+EbrTCGmmPV/sc7RF1i9stPTD6bpvXZywBdrwRYxhSdJv867L6A==",
+			"dependencies": {
+				"fs-exists-sync": "^0.1.0",
+				"resolve-dir": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/find-parent-dir": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
+			"integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ="
+		},
+		"node_modules/find-pkg": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz",
+			"integrity": "sha512-0rnQWcFwZr7eO0513HahrWafsc3CTFioEB7DRiEYCUM/70QXSY8f3mCST17HXLcPvEhzH/Ty/Bxd72ZZsr/yvw==",
+			"dependencies": {
+				"find-file-up": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/find-process": {
+			"version": "1.4.7",
+			"resolved": "https://registry.npmjs.org/find-process/-/find-process-1.4.7.tgz",
+			"integrity": "sha512-/U4CYp1214Xrp3u3Fqr9yNynUrr5Le4y0SsJh2lMDDSbpwYSz3M2SMWQC+wqcx79cN8PQtHQIL8KnuY9M66fdg==",
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"commander": "^5.1.0",
+				"debug": "^4.1.1"
+			},
+			"bin": {
+				"find-process": "bin/find-process.js"
+			}
+		},
+		"node_modules/find-process/node_modules/commander": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+			"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/find-root": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+		},
+		"node_modules/find-up": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+			"integrity": "sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==",
+			"dependencies": {
+				"locate-path": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/find-yarn-workspace-root": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+			"integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+			"dev": true,
+			"dependencies": {
+				"micromatch": "^4.0.2"
+			}
+		},
+		"node_modules/flat": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+			"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+			"dev": true,
+			"bin": {
+				"flat": "cli.js"
+			}
+		},
+		"node_modules/flat-cache": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+			"integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+			"license": "MIT",
+			"dependencies": {
+				"flatted": "^3.2.9",
+				"keyv": "^4.5.3",
+				"rimraf": "^3.0.2"
+			},
+			"engines": {
+				"node": "^10.12.0 || >=12.0.0"
+			}
+		},
+		"node_modules/flatted": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw=="
+		},
+		"node_modules/flow-enums-runtime": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/flow-enums-runtime/-/flow-enums-runtime-0.0.6.tgz",
+			"integrity": "sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw=="
+		},
+		"node_modules/flow-parser": {
+			"version": "0.206.0",
+			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.206.0.tgz",
+			"integrity": "sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/flush-write-stream": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+			"integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"readable-stream": "^2.3.6"
+			}
+		},
+		"node_modules/fn.name": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+			"integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
+			"dev": true
+		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.6",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+			"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/for-each": {
+			"version": "0.3.3",
+			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+			"integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+			"dependencies": {
+				"is-callable": "^1.1.3"
+			}
+		},
+		"node_modules/for-in": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+			"integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/for-own": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+			"integrity": "sha512-SKmowqGTJoPzLO1T0BBJpkfp3EMacCMOuH40hOUbrbzElVktk4DioXVM99QkLCyKoiuOmyjgcWMpVz2xjE7LZw==",
+			"dependencies": {
+				"for-in": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/foreground-child": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+			"integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.0",
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/foreground-child/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/foreground-child/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/foreground-child/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/foreground-child/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/foreground-child/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/foreground-child/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz",
+			"integrity": "sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==",
+			"dev": true,
+			"dependencies": {
+				"@babel/code-frame": "^7.16.7",
+				"chalk": "^4.1.2",
+				"chokidar": "^3.5.3",
+				"cosmiconfig": "^7.0.1",
+				"deepmerge": "^4.2.2",
+				"fs-extra": "^10.0.0",
+				"memfs": "^3.4.1",
+				"minimatch": "^3.0.4",
+				"node-abort-controller": "^3.0.1",
+				"schema-utils": "^3.1.1",
+				"semver": "^7.3.5",
+				"tapable": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=12.13.0",
+				"yarn": ">=1.0.0"
+			},
+			"peerDependencies": {
+				"typescript": ">3.6.0",
+				"webpack": "^5.11.0"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+			"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dev": true,
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/form-data": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/form-data-encoder": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-2.1.4.tgz",
+			"integrity": "sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 14.17"
+			}
+		},
+		"node_modules/formdata-polyfill": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+			"dev": true,
+			"dependencies": {
+				"fetch-blob": "^3.1.2"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"node_modules/forwarded": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+			"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fraction.js": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+			"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "patreon",
+				"url": "https://www.patreon.com/infusion"
+			}
+		},
+		"node_modules/fragment-cache": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+			"integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
+			"dev": true,
+			"dependencies": {
+				"map-cache": "^0.2.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/framer-motion": {
+			"version": "11.1.9",
+			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.1.9.tgz",
+			"integrity": "sha512-flECDIPV4QDNcOrDafVFiIazp8X01HFpzc01eDKJsdNH/wrATcYydJSH9JbPWMS8UD5lZlw+J1sK8LG2kICgqw==",
+			"dependencies": {
+				"tslib": "^2.4.0"
+			},
+			"peerDependencies": {
+				"@emotion/is-prop-valid": "*",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@emotion/is-prop-valid": {
+					"optional": true
 				},
-				"xmlbuilder": {
-					"version": "11.0.1",
-					"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-					"integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-					"dev": true
+				"react": {
+					"optional": true
 				},
-				"xmldom": {
-					"version": "0.5.0",
-					"resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.5.0.tgz",
-					"integrity": "sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==",
-					"dev": true
+				"react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fresh": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/from2": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+			"integrity": "sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.1",
+				"readable-stream": "^2.0.0"
+			}
+		},
+		"node_modules/fs-constants": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+			"dev": true
+		},
+		"node_modules/fs-exists-sync": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
+			"integrity": "sha512-cR/vflFyPZtrN6b38ZyWxpWdhlXrzZEBawlpBQMq7033xVY7/kg0GDMBK5jg8lDYQckdJ5x/YC88lM3C7VMsLg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/fs-extra": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+			"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^4.0.0",
+				"universalify": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=6 <7 || >=8"
+			}
+		},
+		"node_modules/fs-minipass": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/fs-monkey": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.4.tgz",
+			"integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ=="
+		},
+		"node_modules/fs-write-stream-atomic": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+			"integrity": "sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"iferr": "^0.1.5",
+				"imurmurhash": "^0.1.4",
+				"readable-stream": "1 || 2"
+			}
+		},
+		"node_modules/fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/fstream": {
+			"version": "1.0.12",
+			"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+			"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"inherits": "~2.0.0",
+				"mkdirp": ">=0.5 0",
+				"rimraf": "2"
+			},
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/fstream/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/fstream/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
+		"node_modules/fstream/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/ftp-response-parser": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/ftp-response-parser/-/ftp-response-parser-1.0.1.tgz",
+			"integrity": "sha512-++Ahlo2hs/IC7UVQzjcSAfeUpCwTTzs4uvG5XfGnsinIFkWUYF4xWwPd5qZuK8MJrmUIxFMuHcfqaosCDjvIWw==",
+			"dev": true,
+			"dependencies": {
+				"readable-stream": "^1.0.31"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/ftp-response-parser/node_modules/isarray": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+			"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+			"dev": true
+		},
+		"node_modules/ftp-response-parser/node_modules/readable-stream": {
+			"version": "1.1.14",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+			"integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
+			"dev": true,
+			"dependencies": {
+				"core-util-is": "~1.0.0",
+				"inherits": "~2.0.1",
+				"isarray": "0.0.1",
+				"string_decoder": "~0.10.x"
+			}
+		},
+		"node_modules/ftp-response-parser/node_modules/string_decoder": {
+			"version": "0.10.31",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+			"integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+			"dev": true
+		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/function.prototype.name": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+			"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.3",
+				"es-abstract": "^1.19.0",
+				"functions-have-names": "^1.2.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/functional-red-black-tree": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+			"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
+		},
+		"node_modules/functions-have-names": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+			"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/gauge": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
+			"integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+			"dev": true,
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.3",
+				"console-control-strings": "^1.1.0",
+				"has-unicode": "^2.0.1",
+				"signal-exit": "^3.0.7",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.5"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/gauge/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/gauge/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/gauge/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/geckodriver": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-4.2.1.tgz",
+			"integrity": "sha512-4m/CRk0OI8MaANRuFIahvOxYTSjlNAO2p9JmE14zxueknq6cdtB5M9UGRQ8R9aMV0bLGNVHHDnDXmoXdOwJfWg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"dependencies": {
+				"@wdio/logger": "^8.11.0",
+				"decamelize": "^6.0.0",
+				"http-proxy-agent": "^7.0.0",
+				"https-proxy-agent": "^7.0.1",
+				"node-fetch": "^3.3.1",
+				"tar-fs": "^3.0.4",
+				"unzipper": "^0.10.14",
+				"which": "^4.0.0"
+			},
+			"bin": {
+				"geckodriver": "bin/geckodriver.js"
+			},
+			"engines": {
+				"node": "^16.13 || >=18 || >=20"
+			}
+		},
+		"node_modules/geckodriver/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/geckodriver/node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"dev": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/geckodriver/node_modules/decamelize": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz",
+			"integrity": "sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/geckodriver/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dev": true,
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/geckodriver/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/geckodriver/node_modules/isexe": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+			"integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/geckodriver/node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"dev": true,
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
+		"node_modules/geckodriver/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/geckodriver/node_modules/tar-fs": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+			"dev": true,
+			"dependencies": {
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
+			}
+		},
+		"node_modules/geckodriver/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"dev": true,
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
+		},
+		"node_modules/geckodriver/node_modules/which": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+			"integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^3.1.1"
+			},
+			"bin": {
+				"node-which": "bin/which.js"
+			},
+			"engines": {
+				"node": "^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/gensync": {
+			"version": "1.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/get-browser-rtc": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz",
+			"integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ=="
+		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+			"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"has-proto": "^1.0.1",
+				"has-symbols": "^1.0.3",
+				"hasown": "^2.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-nonce": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+			"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/get-npm-tarball-url": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.1.0.tgz",
+			"integrity": "sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.17"
+			}
+		},
+		"node_modules/get-own-enumerable-property-symbols": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+			"integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+			"dev": true
+		},
+		"node_modules/get-pkg-repo": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz",
+			"integrity": "sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==",
+			"dev": true,
+			"dependencies": {
+				"@hutson/parse-repository-url": "^3.0.0",
+				"hosted-git-info": "^4.0.0",
+				"through2": "^2.0.0",
+				"yargs": "^16.2.0"
+			},
+			"bin": {
+				"get-pkg-repo": "src/cli.js"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/get-port": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
+			"integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/get-stdin": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
+			"integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/get-stream": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+			"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+			"dependencies": {
+				"pump": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/get-stream/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/get-symbol-description": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+			"integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-uri": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.1.tgz",
+			"integrity": "sha512-7ZqONUVqaabogsYNWlYj0t3YZaL6dhuEueZXGF+/YVmf6dHmaFg8/6psJKqhx9QykIDKzpGcy2cn4oV4YC7V/Q==",
+			"dependencies": {
+				"basic-ftp": "^5.0.2",
+				"data-uri-to-buffer": "^5.0.1",
+				"debug": "^4.3.4",
+				"fs-extra": "^8.1.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/get-value": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+			"integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/gettext-parser": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.4.0.tgz",
+			"integrity": "sha512-sedZYLHlHeBop/gZ1jdg59hlUEcpcZJofLq2JFwJT1zTqAU3l2wFv6IsuwFHGqbiT9DWzMUW4/em2+hspnmMMA==",
+			"dependencies": {
+				"encoding": "^0.1.12",
+				"safe-buffer": "^5.1.1"
+			}
+		},
+		"node_modules/giget": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/giget/-/giget-1.2.1.tgz",
+			"integrity": "sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==",
+			"dev": true,
+			"dependencies": {
+				"citty": "^0.1.5",
+				"consola": "^3.2.3",
+				"defu": "^6.1.3",
+				"node-fetch-native": "^1.6.1",
+				"nypm": "^0.3.3",
+				"ohash": "^1.1.3",
+				"pathe": "^1.1.1",
+				"tar": "^6.2.0"
+			},
+			"bin": {
+				"giget": "dist/cli.mjs"
+			}
+		},
+		"node_modules/giget/node_modules/chownr": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/giget/node_modules/consola": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+			"integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
+		"node_modules/giget/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/giget/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+			"dev": true,
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/giget/node_modules/tar": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+			"integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+			"dev": true,
+			"dependencies": {
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
+				"minipass": "^5.0.0",
+				"minizlib": "^2.1.1",
+				"mkdirp": "^1.0.3",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/giget/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
+		},
+		"node_modules/git-raw-commits": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-3.0.0.tgz",
+			"integrity": "sha512-b5OHmZ3vAgGrDn/X0kS+9qCfNKWe4K/jFnhwzVWWg0/k5eLa3060tZShrRg8Dja5kPc+YjS0Gc6y7cRr44Lpjw==",
+			"dev": true,
+			"dependencies": {
+				"dargs": "^7.0.0",
+				"meow": "^8.1.2",
+				"split2": "^3.2.2"
+			},
+			"bin": {
+				"git-raw-commits": "cli.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/git-remote-origin-url": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
+			"integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==",
+			"dev": true,
+			"dependencies": {
+				"gitconfiglocal": "^1.0.0",
+				"pify": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/git-semver-tags": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-5.0.1.tgz",
+			"integrity": "sha512-hIvOeZwRbQ+7YEUmCkHqo8FOLQZCEn18yevLHADlFPZY02KJGsu5FZt9YW/lybfK2uhWFI7Qg/07LekJiTv7iA==",
+			"dev": true,
+			"dependencies": {
+				"meow": "^8.1.2",
+				"semver": "^7.0.0"
+			},
+			"bin": {
+				"git-semver-tags": "cli.js"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/git-up": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
+			"integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
+			"dev": true,
+			"dependencies": {
+				"is-ssh": "^1.4.0",
+				"parse-url": "^8.1.0"
+			}
+		},
+		"node_modules/git-url-parse": {
+			"version": "13.1.0",
+			"resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.1.0.tgz",
+			"integrity": "sha512-5FvPJP/70WkIprlUZ33bm4UAaFdjcLkJLpWft1BeZKqwR0uhhNGoKwlUaPtVb4LxCSQ++erHapRak9kWGj+FCA==",
+			"dev": true,
+			"dependencies": {
+				"git-up": "^7.0.0"
+			}
+		},
+		"node_modules/gitconfiglocal": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
+			"integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==",
+			"dev": true,
+			"dependencies": {
+				"ini": "^1.3.2"
+			}
+		},
+		"node_modules/github-from-package": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+			"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/github-slugger": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
+			"integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==",
+			"dev": true
+		},
+		"node_modules/glob": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+			"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+			"dependencies": {
+				"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"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+			"integrity": "sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"is-glob": "^3.1.0",
+				"path-dirname": "^1.0.0"
+			}
+		},
+		"node_modules/glob-parent/node_modules/is-glob": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+			"integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"is-extglob": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/glob-to-regexp": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+			"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+		},
+		"node_modules/global-modules": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+			"integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+			"dependencies": {
+				"global-prefix": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/global-prefix": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+			"integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+			"dependencies": {
+				"ini": "^1.3.5",
+				"kind-of": "^6.0.2",
+				"which": "^1.3.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/globals": {
+			"version": "13.24.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+			"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+			"dependencies": {
+				"type-fest": "^0.20.2"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/globals/node_modules/type-fest": {
+			"version": "0.20.2",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/globalthis": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+			"integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+			"dependencies": {
+				"define-properties": "^1.1.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dependencies": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/globby/node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/globby/node_modules/fast-glob": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/globby/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/globjoin": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+			"integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg=="
+		},
+		"node_modules/good-listener": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+			"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+			"dependencies": {
+				"delegate": "^3.1.2"
+			}
+		},
+		"node_modules/gopd": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+			"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+			"dependencies": {
+				"get-intrinsic": "^1.1.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/got": {
+			"version": "11.8.6",
+			"resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+			"integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+			"dependencies": {
+				"@sindresorhus/is": "^4.0.0",
+				"@szmarczak/http-timer": "^4.0.5",
+				"@types/cacheable-request": "^6.0.1",
+				"@types/responselike": "^1.0.0",
+				"cacheable-lookup": "^5.0.3",
+				"cacheable-request": "^7.0.2",
+				"decompress-response": "^6.0.0",
+				"http2-wrapper": "^1.0.0-beta.5.2",
+				"lowercase-keys": "^2.0.0",
+				"p-cancelable": "^2.0.0",
+				"responselike": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10.19.0"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/got?sponsor=1"
+			}
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+		},
+		"node_modules/gradient-parser": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz",
+			"integrity": "sha512-+uPlcVbjrKOnTzvz0MjTj7BfACj8OmxIa1moIjJV7btvhUMSJk0D47RfDCgDrZE3dYMz9Cf5xKJwnrKLjUq0KQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/grapheme-splitter": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+			"integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+			"dev": true
+		},
+		"node_modules/graphemer": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
+		},
+		"node_modules/gunzip-maybe": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz",
+			"integrity": "sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==",
+			"dev": true,
+			"dependencies": {
+				"browserify-zlib": "^0.1.4",
+				"is-deflate": "^1.0.0",
+				"is-gzip": "^1.0.0",
+				"peek-stream": "^1.1.0",
+				"pumpify": "^1.3.3",
+				"through2": "^2.0.3"
+			},
+			"bin": {
+				"gunzip-maybe": "bin.js"
+			}
+		},
+		"node_modules/gunzip-maybe/node_modules/browserify-zlib": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.1.4.tgz",
+			"integrity": "sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==",
+			"dev": true,
+			"dependencies": {
+				"pako": "~0.2.0"
+			}
+		},
+		"node_modules/gunzip-maybe/node_modules/pako": {
+			"version": "0.2.9",
+			"resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+			"integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+			"dev": true
+		},
+		"node_modules/handle-thing": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+			"integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
+		},
+		"node_modules/handlebars": {
+			"version": "4.7.8",
+			"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+			"integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+			"dev": true,
+			"dependencies": {
+				"minimist": "^1.2.5",
+				"neo-async": "^2.6.2",
+				"source-map": "^0.6.1",
+				"wordwrap": "^1.0.0"
+			},
+			"bin": {
+				"handlebars": "bin/handlebars"
+			},
+			"engines": {
+				"node": ">=0.4.7"
+			},
+			"optionalDependencies": {
+				"uglify-js": "^3.1.4"
+			}
+		},
+		"node_modules/hard-rejection": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+			"integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/has": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+			"dependencies": {
+				"function-bind": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
+		"node_modules/has-ansi": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+			"integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/has-ansi/node_modules/ansi-regex": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+			"integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/has-bigints": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+			"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/has-property-descriptors": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+			"dependencies": {
+				"es-define-property": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+			"integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+			"dependencies": {
+				"has-symbols": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-unicode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+			"dev": true
+		},
+		"node_modules/has-value": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+			"integrity": "sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==",
+			"dev": true,
+			"dependencies": {
+				"get-value": "^2.0.6",
+				"has-values": "^1.0.0",
+				"isobject": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/has-values": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+			"integrity": "sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==",
+			"dev": true,
+			"dependencies": {
+				"is-number": "^3.0.0",
+				"kind-of": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/has-values/node_modules/kind-of": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+			"integrity": "sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==",
+			"dev": true,
+			"dependencies": {
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/hash-base": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+			"integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.4",
+				"readable-stream": "^3.6.0",
+				"safe-buffer": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/hash-base/node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true
+		},
+		"node_modules/hash-base/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/hash-base/node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"xpath": {
-					"version": "0.0.32",
-					"resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.32.tgz",
-					"integrity": "sha512-rxMJhSIoiO8vXcWvSifKqhvV96GjiD5wYb8/QHdoRyQvraTpp4IEv944nhGausZZ3u7dhQXteZuZbaqfpB7uYw==",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"xtend": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-					"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/hash.js": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+			"integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"minimalistic-assert": "^1.0.1"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/he": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+			"dev": true,
+			"bin": {
+				"he": "bin/he"
+			}
+		},
+		"node_modules/header-case": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+			"dependencies": {
+				"capital-case": "^1.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/hermes-estree": {
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.15.0.tgz",
+			"integrity": "sha512-lLYvAd+6BnOqWdnNbP/Q8xfl8LOGw4wVjfrNd9Gt8eoFzhNBRVD95n4l2ksfMVOoxuVyegs85g83KS9QOsxbVQ=="
+		},
+		"node_modules/hermes-parser": {
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.15.0.tgz",
+			"integrity": "sha512-Q1uks5rjZlE9RjMMjSUCkGrEIPI5pKJILeCtK1VmTj7U4pf3wVPoo+cxfu+s4cBAPy2JzikIIdCZgBoR6x7U1Q==",
+			"dependencies": {
+				"hermes-estree": "0.15.0"
+			}
+		},
+		"node_modules/hermes-profile-transformer": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/hermes-profile-transformer/-/hermes-profile-transformer-0.0.6.tgz",
+			"integrity": "sha512-cnN7bQUm65UWOy6cbGcCcZ3rpwW8Q/j4OP5aWRhEry4Z2t2aR1cjrbp0BS+KiBN0smvP1caBgAuxutvyvJILzQ==",
+			"dependencies": {
+				"source-map": "^0.7.3"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/hermes-profile-transformer/node_modules/source-map": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+			"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/highlight-words-core": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
+			"integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
+		},
+		"node_modules/history": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+			"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.7.6"
+			}
+		},
+		"node_modules/hmac-drbg": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+			"integrity": "sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==",
+			"dev": true,
+			"dependencies": {
+				"hash.js": "^1.0.3",
+				"minimalistic-assert": "^1.0.0",
+				"minimalistic-crypto-utils": "^1.0.1"
+			}
+		},
+		"node_modules/hoist-non-react-statics": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+			"dependencies": {
+				"react-is": "^16.7.0"
+			}
+		},
+		"node_modules/homedir-polyfill": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+			"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+			"dependencies": {
+				"parse-passwd": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/hosted-git-info": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+			"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/hosted-git-info/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/hosted-git-info/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+		},
+		"node_modules/hpack.js": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+			"integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+			"dependencies": {
+				"inherits": "^2.0.1",
+				"obuf": "^1.0.0",
+				"readable-stream": "^2.0.1",
+				"wbuf": "^1.1.0"
+			}
+		},
+		"node_modules/hpq": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/hpq/-/hpq-1.3.0.tgz",
+			"integrity": "sha512-fvYTvdCFOWQupGxqkahrkA+ERBuMdzkxwtUdKrxR6rmMd4Pfl+iZ1QiQYoaZ0B/v0y59MOMnz3XFUWbT50/NWA=="
+		},
+		"node_modules/html-encoding-sniffer": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+			"integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+			"dependencies": {
+				"whatwg-encoding": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/html-entities": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
+			"integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/mdevils"
 				},
-				"y18n": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-					"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://patreon.com/mdevils"
+				}
+			]
+		},
+		"node_modules/html-escaper": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.0.tgz",
+			"integrity": "sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig=="
+		},
+		"node_modules/html-minifier-terser": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+			"integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+			"dev": true,
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"clean-css": "^5.2.2",
+				"commander": "^8.3.0",
+				"he": "^1.2.0",
+				"param-case": "^3.0.4",
+				"relateurl": "^0.2.7",
+				"terser": "^5.10.0"
+			},
+			"bin": {
+				"html-minifier-terser": "cli.js"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/html-minifier-terser/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"dev": true,
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/html-tags": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+			"integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/html-webpack-plugin": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
+			"integrity": "sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==",
+			"dev": true,
+			"dependencies": {
+				"@types/html-minifier-terser": "^6.0.0",
+				"html-minifier-terser": "^6.0.2",
+				"lodash": "^4.17.21",
+				"pretty-error": "^4.0.0",
+				"tapable": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/html-webpack-plugin"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || 1.x",
+				"webpack": "^5.20.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
 				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/html-webpack-plugin/node_modules/tapable": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/htmlparser2": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+			"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+			"dev": true,
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.0.0",
+				"domutils": "^2.5.2",
+				"entities": "^2.0.0"
+			}
+		},
+		"node_modules/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==",
+			"dependencies": {
+				"domelementtype": "^1.3.0",
+				"domhandler": "^2.3.0",
+				"domutils": "^1.5.1",
+				"entities": "^1.1.1",
+				"eventemitter2": "^1.0.0",
+				"inherits": "^2.0.1",
+				"readable-stream": "^2.0.2"
+			}
+		},
+		"node_modules/htmlparser2/node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dev": true,
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/htmlparser2/node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/htmlparser2/node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dev": true,
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/htmlparser2/node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dev": true,
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/htmlparser2/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/http-cache-semantics": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+			"integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
+		},
+		"node_modules/http-deceiver": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+			"integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+		},
+		"node_modules/http-errors": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"dependencies": {
+				"depd": "2.0.0",
+				"inherits": "2.0.4",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"toidentifier": "1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/http-errors/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/http-errors/node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+		},
+		"node_modules/http-errors/node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/http-link-header": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-1.1.1.tgz",
+			"integrity": "sha512-mW3N/rTYpCn99s1do0zx6nzFZSwLH9HGfUM4ZqLWJ16ylmYaC2v5eYGqrNTQlByx8AzUgGI+V/32gXPugs1+Sw==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/http-parser-js": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+			"integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+		},
+		"node_modules/http-proxy": {
+			"version": "1.18.1",
+			"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+			"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+			"dependencies": {
+				"eventemitter3": "^4.0.0",
+				"follow-redirects": "^1.0.0",
+				"requires-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/http-proxy-agent": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+			"dev": true,
+			"dependencies": {
+				"@tootallnate/once": "2",
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/http-proxy-agent/node_modules/@tootallnate/once": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+			"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/http-proxy-middleware": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+			"integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+			"dependencies": {
+				"@types/http-proxy": "^1.17.8",
+				"http-proxy": "^1.18.1",
+				"is-glob": "^4.0.1",
+				"is-plain-obj": "^3.0.0",
+				"micromatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"@types/express": "^4.17.13"
+			},
+			"peerDependenciesMeta": {
+				"@types/express": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/http-status-codes": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/http-status-codes/-/http-status-codes-2.3.0.tgz",
+			"integrity": "sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==",
+			"dev": true
+		},
+		"node_modules/http2-wrapper": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+			"integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+			"dependencies": {
+				"quick-lru": "^5.1.1",
+				"resolve-alpn": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=10.19.0"
+			}
+		},
+		"node_modules/http2-wrapper/node_modules/quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/https-browserify": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+			"integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
+			"dev": true
+		},
+		"node_modules/https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"dependencies": {
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/human-signals": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+			"engines": {
+				"node": ">=8.12.0"
+			}
+		},
+		"node_modules/humanize-ms": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+			"integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+			"dev": true,
+			"dependencies": {
+				"ms": "^2.0.0"
+			}
+		},
+		"node_modules/husky": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/husky/-/husky-7.0.0.tgz",
+			"integrity": "sha512-xK7lO0EtSzfFPiw+oQncQVy/XqV7UVVjxBByc+Iv5iK3yhW9boDoWgvZy3OGo48QKg/hUtZkzz0hi2HXa0kn7w==",
+			"dev": true,
+			"bin": {
+				"husky": "lib/bin.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/typicode"
+			}
+		},
+		"node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/icss-utils": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+			"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/ieee754": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+			"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"yargs": {
-					"version": "12.0.5",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-					"integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
-					"dev": true,
-					"requires": {
-						"cliui": "^4.0.0",
-						"decamelize": "^1.2.0",
-						"find-up": "^3.0.0",
-						"get-caller-file": "^1.0.1",
-						"os-locale": "^3.0.0",
-						"require-directory": "^2.1.1",
-						"require-main-filename": "^1.0.1",
-						"set-blocking": "^2.0.0",
-						"string-width": "^2.0.0",
-						"which-module": "^2.0.0",
-						"y18n": "^3.2.1 || ^4.0.0",
-						"yargs-parser": "^11.1.1"
-					},
-					"dependencies": {
-						"ansi-regex": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-							"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-							"dev": true
-						},
-						"find-up": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-							"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-							"dev": true,
-							"requires": {
-								"locate-path": "^3.0.0"
-							}
-						},
-						"is-fullwidth-code-point": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-							"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-							"dev": true
-						},
-						"locate-path": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-							"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-							"dev": true,
-							"requires": {
-								"p-locate": "^3.0.0",
-								"path-exists": "^3.0.0"
-							}
-						},
-						"p-locate": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-							"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-							"dev": true,
-							"requires": {
-								"p-limit": "^2.0.0"
-							}
-						},
-						"path-exists": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-							"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-							"dev": true
-						},
-						"string-width": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-							"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-							"dev": true,
-							"requires": {
-								"is-fullwidth-code-point": "^2.0.0",
-								"strip-ansi": "^4.0.0"
-							}
-						},
-						"strip-ansi": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-							"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-							"dev": true,
-							"requires": {
-								"ansi-regex": "^3.0.0"
-							}
-						}
-					}
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"yargs-parser": {
-					"version": "11.1.1",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-					"integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/iferr": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+			"integrity": "sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==",
+			"dev": true
+		},
+		"node_modules/ignore": {
+			"version": "5.2.4",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+			"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/ignore-walk": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz",
+			"integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==",
+			"dependencies": {
+				"minimatch": "^3.0.4"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/image-size": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
+			"integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+			"dependencies": {
+				"queue": "6.0.2"
+			},
+			"bin": {
+				"image-size": "bin/image-size.js"
+			},
+			"engines": {
+				"node": ">=16.x"
+			}
+		},
+		"node_modules/image-ssim": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/image-ssim/-/image-ssim-0.2.0.tgz",
+			"integrity": "sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg=="
+		},
+		"node_modules/immutable": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+			"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+			"license": "MIT"
+		},
+		"node_modules/import-fresh": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+			"dependencies": {
+				"parent-module": "^1.0.0",
+				"resolve-from": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-fresh/node_modules/resolve-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/import-local": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
+			"integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
+			"dependencies": {
+				"pkg-dir": "^4.2.0",
+				"resolve-cwd": "^3.0.0"
+			},
+			"bin": {
+				"import-local-fixture": "fixtures/cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-local/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/import-local/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/import-local/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-local/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/import-local/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/import-local/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/import-local/node_modules/pkg-dir": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+			"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+			"dependencies": {
+				"find-up": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/import-locals": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/import-locals/-/import-locals-2.0.0.tgz",
+			"integrity": "sha512-1/bPE89IZhyf7dr5Pkz7b4UyVXy5pEt7PTEfye15UEn3AK8+2zwcDCfKk9Pwun4ltfhOSszOrReSsFcDKw/yoA=="
+		},
+		"node_modules/import-meta-resolve": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
+			"integrity": "sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/imurmurhash": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+			"engines": {
+				"node": ">=0.8.19"
+			}
+		},
+		"node_modules/indent-string": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+			"integrity": "sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/indento": {
+			"version": "1.1.13",
+			"resolved": "https://registry.npmjs.org/indento/-/indento-1.1.13.tgz",
+			"integrity": "sha512-YZWk3mreBEM7sBPddsiQnW9Z8SGg/gNpFfscJq00HCDS7pxcQWWWMSVKJU7YkTRyDu1Zv2s8zaK8gQWKmCXHlg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/infer-owner": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+			"integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+			"dev": true
+		},
+		"node_modules/inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"dependencies": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"node_modules/inherits": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+		},
+		"node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+		},
+		"node_modules/init-package-json": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-5.0.0.tgz",
+			"integrity": "sha512-kBhlSheBfYmq3e0L1ii+VKe3zBTLL5lDCDWR+f9dLmEGSB3MqLlMlsolubSsyI88Bg6EA+BIMlomAnQ1SwgQBw==",
+			"dev": true,
+			"dependencies": {
+				"npm-package-arg": "^10.0.0",
+				"promzard": "^1.0.0",
+				"read": "^2.0.0",
+				"read-package-json": "^6.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-license": "^3.0.4",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/init-package-json/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/init-package-json/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/init-package-json/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/init-package-json/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/inquirer": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
+			"integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
+			"dependencies": {
+				"ansi-escapes": "^4.2.1",
+				"chalk": "^3.0.0",
+				"cli-cursor": "^3.1.0",
+				"cli-width": "^2.0.0",
+				"external-editor": "^3.0.3",
+				"figures": "^3.0.0",
+				"lodash": "^4.17.15",
+				"mute-stream": "0.0.8",
+				"run-async": "^2.4.0",
+				"rxjs": "^6.5.3",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"through": "^2.3.6"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/inquirer/node_modules/chalk": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/inquirer/node_modules/figures": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+			"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/inquirer/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/inquirer/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/inquirer/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/inquirer/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/internal-slot": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+			"integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+			"dependencies": {
+				"get-intrinsic": "^1.2.0",
+				"has": "^1.0.3",
+				"side-channel": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/interpret": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+			"integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/intl-messageformat": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-4.4.0.tgz",
+			"integrity": "sha512-z+Bj2rS3LZSYU4+sNitdHrwnBhr0wO80ZJSW8EzKDBowwUe3Q/UsvgCGjrwa+HPzoGCLEb9HAjfJgo4j2Sac8w==",
+			"dependencies": {
+				"intl-messageformat-parser": "^1.8.1"
+			}
+		},
+		"node_modules/intl-messageformat-parser": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.8.1.tgz",
+			"integrity": "sha512-IMSCKVf0USrM/959vj3xac7s8f87sc+80Y/ipBzdKy4ifBv5Gsj2tZ41EAaURVg01QU71fYr77uA8Meh6kELbg==",
+			"deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser"
+		},
+		"node_modules/invariant": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
+		"node_modules/ip": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+			"integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ=="
+		},
+		"node_modules/ip-address": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+			"integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+			"license": "MIT",
+			"dependencies": {
+				"jsbn": "1.1.0",
+				"sprintf-js": "^1.1.3"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/ip-address/node_modules/sprintf-js": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+			"integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/ipaddr.js": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/irregular-plurals": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-3.2.0.tgz",
+			"integrity": "sha512-YqTdPLfwP7YFN0SsD3QUVCkm9ZG2VzOXv3DOrw5G5mkMbVwptTwVcFv7/C0vOpBmgTxAeTG19XpUs1E522LW9Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-absolute-url": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+			"integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-accessor-descriptor": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.1.tgz",
+			"integrity": "sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==",
+			"dev": true,
+			"dependencies": {
+				"hasown": "^2.0.0"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/is-alphabetical": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+			"integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-alphanumeric": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz",
+			"integrity": "sha512-ZmRL7++ZkcMOfDuWZuMJyIVLr2keE1o/DeNWh1EmgqGhUcV+9BIVsx0BcSBOHTZqzjs4+dISzr2KAeBEWGgXeA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-alphanumerical": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz",
+			"integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==",
+			"dependencies": {
+				"is-alphabetical": "^1.0.0",
+				"is-decimal": "^1.0.0"
+			}
+		},
+		"node_modules/is-arguments": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+			"integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-array-buffer": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+			"integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.2.0",
+				"is-typed-array": "^1.1.10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-arrayish": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+			"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+		},
+		"node_modules/is-bigint": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+			"integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+			"dependencies": {
+				"has-bigints": "^1.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dependencies": {
+				"binary-extensions": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-boolean-object": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+			"integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-buffer": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+			"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+		},
+		"node_modules/is-builtin-module": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+			"integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
+			"dependencies": {
+				"builtin-modules": "^3.3.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-callable": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+			"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-ci": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+			"integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+			"dev": true,
+			"dependencies": {
+				"ci-info": "^2.0.0"
+			},
+			"bin": {
+				"is-ci": "bin.js"
+			}
+		},
+		"node_modules/is-ci/node_modules/ci-info": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+			"integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
+			"dev": true
+		},
+		"node_modules/is-core-module": {
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+			"integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+			"dependencies": {
+				"has": "^1.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-data-descriptor": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.1.tgz",
+			"integrity": "sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==",
+			"dev": true,
+			"dependencies": {
+				"hasown": "^2.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/is-date-object": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+			"integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+			"dependencies": {
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-decimal": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz",
+			"integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg=="
+		},
+		"node_modules/is-deflate": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz",
+			"integrity": "sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==",
+			"dev": true
+		},
+		"node_modules/is-descriptor": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.7.tgz",
+			"integrity": "sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==",
+			"dev": true,
+			"dependencies": {
+				"is-accessor-descriptor": "^1.0.1",
+				"is-data-descriptor": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/is-directory": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+			"integrity": "sha512-yVChGzahRFvbkscn2MlwGismPO12i9+znNruC5gVEntG3qu0xQMzsGg/JFbrsqDOHtHFPci+V5aP5T9I+yeKqw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-docker": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+			"bin": {
+				"is-docker": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-extendable": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+			"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+			"integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/is-generator-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+			"integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-generator-function": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+			"integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+			"dev": true,
+			"dependencies": {
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-gzip": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-gzip/-/is-gzip-1.0.0.tgz",
+			"integrity": "sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-hexadecimal": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz",
+			"integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A=="
+		},
+		"node_modules/is-inside-container": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+			"integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+			"dependencies": {
+				"is-docker": "^3.0.0"
+			},
+			"bin": {
+				"is-inside-container": "cli.js"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-inside-container/node_modules/is-docker": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+			"integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+			"bin": {
+				"is-docker": "cli.js"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-interactive": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+			"integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-lambda": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+			"integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+			"dev": true
+		},
+		"node_modules/is-map": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
+			"integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-nan": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+			"integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.0",
+				"define-properties": "^1.1.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-negative-zero": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+			"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-number": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+			"integrity": "sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==",
+			"dev": true,
+			"dependencies": {
+				"kind-of": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-number-object": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+			"integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+			"dependencies": {
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-number/node_modules/kind-of": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+			"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+			"dev": true,
+			"dependencies": {
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-obj": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+			"integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-observable": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
+			"integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
+			"dev": true,
+			"dependencies": {
+				"symbol-observable": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/is-path-cwd": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+			"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-path-in-cwd": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
+			"integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
+			"dependencies": {
+				"is-path-inside": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-path-inside": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
+			"integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
+			"dependencies": {
+				"path-is-inside": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-plain-obj": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+			"integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-potential-custom-element-name": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
+		},
+		"node_modules/is-promise": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+			"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="
+		},
+		"node_modules/is-regex": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+			"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-regexp": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+			"integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-set": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
+			"integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-shared-array-buffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+			"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+			"dependencies": {
+				"call-bind": "^1.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-ssh": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.0.tgz",
+			"integrity": "sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==",
+			"dev": true,
+			"dependencies": {
+				"protocols": "^2.0.1"
+			}
+		},
+		"node_modules/is-stream": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+			"integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-string": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+			"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+			"dependencies": {
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-symbol": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+			"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+			"dependencies": {
+				"has-symbols": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-text-path": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
+			"integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==",
+			"dev": true,
+			"dependencies": {
+				"text-extensions": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-typed-array": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
+			"integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+			"dependencies": {
+				"which-typed-array": "^1.1.11"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-typedarray": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+			"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+		},
+		"node_modules/is-unicode-supported": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+			"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-weakmap": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+			"integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-weakref": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+			"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+			"dependencies": {
+				"call-bind": "^1.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-weakset": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
+			"integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.1.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-whitespace-character": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+			"integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-windows": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+			"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-word-character": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+			"integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-wsl": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+			"integrity": "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/isarray": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+			"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+		},
+		"node_modules/isexe": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+		},
+		"node_modules/isobject": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+			"integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/isomorphic.js": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+			"integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
+		"node_modules/istanbul-lib-coverage": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
+			"integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-instrument": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+			"integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+			"dependencies": {
+				"@babel/core": "^7.12.3",
+				"@babel/parser": "^7.14.7",
+				"@istanbuljs/schema": "^0.1.2",
+				"istanbul-lib-coverage": "^3.2.0",
+				"semver": "^6.3.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-instrument/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/istanbul-lib-report": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+			"integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
+			"dependencies": {
+				"istanbul-lib-coverage": "^3.0.0",
+				"make-dir": "^3.0.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-report/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-report/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-source-maps": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+			"integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+			"dependencies": {
+				"debug": "^4.1.1",
+				"istanbul-lib-coverage": "^3.0.0",
+				"source-map": "^0.6.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/istanbul-reports": {
+			"version": "3.1.6",
+			"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz",
+			"integrity": "sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==",
+			"dependencies": {
+				"html-escaper": "^2.0.0",
+				"istanbul-lib-report": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jackspeak": {
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+			"integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+			"dev": true,
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
+		},
+		"node_modules/jake": {
+			"version": "10.8.7",
+			"resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
+			"integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+			"dev": true,
+			"dependencies": {
+				"async": "^3.2.3",
+				"chalk": "^4.0.2",
+				"filelist": "^1.0.4",
+				"minimatch": "^3.1.2"
+			},
+			"bin": {
+				"jake": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/javascript-natural-sort": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+			"integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+			"dev": true
+		},
+		"node_modules/jed": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
+			"integrity": "sha512-z35ZSEcXHxLW4yumw0dF6L464NT36vmx3wxJw8MDpraBcWuNVgUPZgPJKcu1HekNgwlMFNqol7i/IpSbjhqwqA=="
+		},
+		"node_modules/jest": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest/-/jest-29.6.2.tgz",
+			"integrity": "sha512-8eQg2mqFbaP7CwfsTpCxQ+sHzw1WuNWL5UUvjnWP4hx2riGz9fPSzYOaU5q8/GqWn1TfgZIVTqYJygbGbWAANg==",
+			"dependencies": {
+				"@jest/core": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"import-local": "^3.0.2",
+				"jest-cli": "^29.6.2"
+			},
+			"bin": {
+				"jest": "bin/jest.js"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+			},
+			"peerDependenciesMeta": {
+				"node-notifier": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-changed-files": {
+			"version": "29.5.0",
+			"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.5.0.tgz",
+			"integrity": "sha512-IFG34IUMUaNBIxjQXF/iu7g6EcdMrGRRxaUSw92I/2g2YC6vCdTltl4nHvt7Ci5nSJwXIkCu8Ka1DKF+X7Z1Ag==",
+			"dependencies": {
+				"execa": "^5.0.0",
+				"p-limit": "^3.1.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-changed-files/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/jest-circus": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.6.2.tgz",
+			"integrity": "sha512-G9mN+KOYIUe2sB9kpJkO9Bk18J4dTDArNFPwoZ7WKHKel55eKIS/u2bLthxgojwlf9NLCVQfgzM/WsOVvoC6Fw==",
+			"dependencies": {
+				"@jest/environment": "^29.6.2",
+				"@jest/expect": "^29.6.2",
+				"@jest/test-result": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"co": "^4.6.0",
+				"dedent": "^1.0.0",
+				"is-generator-fn": "^2.0.0",
+				"jest-each": "^29.6.2",
+				"jest-matcher-utils": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-runtime": "^29.6.2",
+				"jest-snapshot": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"p-limit": "^3.1.0",
+				"pretty-format": "^29.6.2",
+				"pure-rand": "^6.0.0",
+				"slash": "^3.0.0",
+				"stack-utils": "^2.0.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-circus/node_modules/dedent": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz",
+			"integrity": "sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==",
+			"peerDependencies": {
+				"babel-plugin-macros": "^3.1.0"
+			},
+			"peerDependenciesMeta": {
+				"babel-plugin-macros": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-cli": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.6.2.tgz",
+			"integrity": "sha512-TT6O247v6dCEX2UGHGyflMpxhnrL0DNqP2fRTKYm3nJJpCTfXX3GCMQPGFjXDoj0i5/Blp3jriKXFgdfmbYB6Q==",
+			"dependencies": {
+				"@jest/core": "^29.6.2",
+				"@jest/test-result": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"chalk": "^4.0.0",
+				"exit": "^0.1.2",
+				"graceful-fs": "^4.2.9",
+				"import-local": "^3.0.2",
+				"jest-config": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jest-validate": "^29.6.2",
+				"prompts": "^2.0.1",
+				"yargs": "^17.3.1"
+			},
+			"bin": {
+				"jest": "bin/jest.js"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+			},
+			"peerDependenciesMeta": {
+				"node-notifier": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-cli/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jest-cli/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/jest-cli/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-cli/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-cli/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/jest-cli/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/jest-cli/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jest-cli/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jest-config": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.6.2.tgz",
+			"integrity": "sha512-VxwFOC8gkiJbuodG9CPtMRjBUNZEHxwfQXmIudSTzFWxaci3Qub1ddTRbFNQlD/zUeaifLndh/eDccFX4wCMQw==",
+			"dependencies": {
+				"@babel/core": "^7.11.6",
+				"@jest/test-sequencer": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"babel-jest": "^29.6.2",
+				"chalk": "^4.0.0",
+				"ci-info": "^3.2.0",
+				"deepmerge": "^4.2.2",
+				"glob": "^7.1.3",
+				"graceful-fs": "^4.2.9",
+				"jest-circus": "^29.6.2",
+				"jest-environment-node": "^29.6.2",
+				"jest-get-type": "^29.4.3",
+				"jest-regex-util": "^29.4.3",
+				"jest-resolve": "^29.6.2",
+				"jest-runner": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jest-validate": "^29.6.2",
+				"micromatch": "^4.0.4",
+				"parse-json": "^5.2.0",
+				"pretty-format": "^29.6.2",
+				"slash": "^3.0.0",
+				"strip-json-comments": "^3.1.1"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"@types/node": "*",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
 				},
-				"yauzl": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-					"integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-					"dev": true,
-					"requires": {
-						"buffer-crc32": "~0.2.3",
-						"fd-slicer": "~1.1.0"
-					}
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-config/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/jest-config/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-dev-server": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/jest-dev-server/-/jest-dev-server-9.0.2.tgz",
+			"integrity": "sha512-Zc/JB0IlNNrpXkhBw+h86cGrde/Mey52KvF+FER2eyrtYJTHObOwW7Iarxm3rPyTKby5+3Y2QZtl8pRz/5GCxg==",
+			"dependencies": {
+				"chalk": "^4.1.2",
+				"cwd": "^0.10.0",
+				"find-process": "^1.4.7",
+				"prompts": "^2.4.2",
+				"spawnd": "^9.0.2",
+				"tree-kill": "^1.2.2",
+				"wait-on": "^7.2.0"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/jest-dev-server/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/jest-dev-server/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-dev-server/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-diff": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+			"integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"diff-sequences": "^29.6.3",
+				"jest-get-type": "^29.6.3",
+				"pretty-format": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-docblock": {
+			"version": "29.4.3",
+			"resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.4.3.tgz",
+			"integrity": "sha512-fzdTftThczeSD9nZ3fzA/4KkHtnmllawWrXO69vtI+L9WjEIuXWs4AmyME7lN5hU7dB0sHhuPfcKofRsUb/2Fg==",
+			"dependencies": {
+				"detect-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-each": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.6.2.tgz",
+			"integrity": "sha512-MsrsqA0Ia99cIpABBc3izS1ZYoYfhIy0NNWqPSE0YXbQjwchyt6B1HD2khzyPe1WiJA7hbxXy77ZoUQxn8UlSw==",
+			"dependencies": {
+				"@jest/types": "^29.6.1",
+				"chalk": "^4.0.0",
+				"jest-get-type": "^29.4.3",
+				"jest-util": "^29.6.2",
+				"pretty-format": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-environment-jsdom": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.6.2.tgz",
+			"integrity": "sha512-7oa/+266AAEgkzae8i1awNEfTfjwawWKLpiw2XesZmaoVVj9u9t8JOYx18cG29rbPNtkUlZ8V4b5Jb36y/VxoQ==",
+			"dependencies": {
+				"@jest/environment": "^29.6.2",
+				"@jest/fake-timers": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/jsdom": "^20.0.0",
+				"@types/node": "*",
+				"jest-mock": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jsdom": "^20.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"canvas": "^2.5.0"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-environment-node": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
+			"integrity": "sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==",
+			"dependencies": {
+				"@jest/environment": "^29.7.0",
+				"@jest/fake-timers": "^29.7.0",
+				"@jest/types": "^29.6.3",
+				"@types/node": "*",
+				"jest-mock": "^29.7.0",
+				"jest-util": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-get-type": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
+			"integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-haste-map": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
+			"integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
+			"dependencies": {
+				"@jest/types": "^29.6.3",
+				"@types/graceful-fs": "^4.1.3",
+				"@types/node": "*",
+				"anymatch": "^3.0.3",
+				"fb-watchman": "^2.0.0",
+				"graceful-fs": "^4.2.9",
+				"jest-regex-util": "^29.6.3",
+				"jest-util": "^29.7.0",
+				"jest-worker": "^29.7.0",
+				"micromatch": "^4.0.4",
+				"walker": "^1.0.8"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			},
+			"optionalDependencies": {
+				"fsevents": "^2.3.2"
+			}
+		},
+		"node_modules/jest-jasmine2": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-29.6.2.tgz",
+			"integrity": "sha512-g8IF0MHkDYeDYt9eseYx3nx8cn86zCuP49G72f19oXcuCu8b46rt293RRLErLUTbTubRP7zl/ev5+p4I5XPc9g==",
+			"dev": true,
+			"dependencies": {
+				"@jest/environment": "^29.6.2",
+				"@jest/expect": "^29.6.2",
+				"@jest/source-map": "^29.6.0",
+				"@jest/test-result": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"co": "^4.6.0",
+				"is-generator-fn": "^2.0.0",
+				"jest-each": "^29.6.2",
+				"jest-matcher-utils": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-runtime": "^29.6.2",
+				"jest-snapshot": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"p-limit": "^3.1.0",
+				"pretty-format": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-junit": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
+			"integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
+			"dev": true,
+			"dependencies": {
+				"mkdirp": "^1.0.4",
+				"strip-ansi": "^6.0.1",
+				"uuid": "^8.3.2",
+				"xml": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10.12.0"
+			}
+		},
+		"node_modules/jest-junit/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+			"dev": true,
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/jest-junit/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"dev": true,
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"node_modules/jest-leak-detector": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.6.2.tgz",
+			"integrity": "sha512-aNqYhfp5uYEO3tdWMb2bfWv6f0b4I0LOxVRpnRLAeque2uqOVVMLh6khnTcE2qJ5wAKop0HcreM1btoysD6bPQ==",
+			"dependencies": {
+				"jest-get-type": "^29.4.3",
+				"pretty-format": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-matcher-utils": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
+			"integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"jest-diff": "^29.7.0",
+				"jest-get-type": "^29.6.3",
+				"pretty-format": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-message-util": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.6.2.tgz",
+			"integrity": "sha512-vnIGYEjoPSuRqV8W9t+Wow95SDp6KPX2Uf7EoeG9G99J2OVh7OSwpS4B6J0NfpEIpfkBNHlBZpA2rblEuEFhZQ==",
+			"dependencies": {
+				"@babel/code-frame": "^7.12.13",
+				"@jest/types": "^29.6.1",
+				"@types/stack-utils": "^2.0.0",
+				"chalk": "^4.0.0",
+				"graceful-fs": "^4.2.9",
+				"micromatch": "^4.0.4",
+				"pretty-format": "^29.6.2",
+				"slash": "^3.0.0",
+				"stack-utils": "^2.0.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-mock": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+			"integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+			"dependencies": {
+				"@jest/types": "^29.6.3",
+				"@types/node": "*",
+				"jest-util": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-pnp-resolver": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+			"integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+			"engines": {
+				"node": ">=6"
+			},
+			"peerDependencies": {
+				"jest-resolve": "*"
+			},
+			"peerDependenciesMeta": {
+				"jest-resolve": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jest-regex-util": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
+			"integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-resolve": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.6.2.tgz",
+			"integrity": "sha512-G/iQUvZWI5e3SMFssc4ug4dH0aZiZpsDq9o1PtXTV1210Ztyb2+w+ZgQkB3iOiC5SmAEzJBOHWz6Hvrd+QnNPw==",
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"graceful-fs": "^4.2.9",
+				"jest-haste-map": "^29.6.2",
+				"jest-pnp-resolver": "^1.2.2",
+				"jest-util": "^29.6.2",
+				"jest-validate": "^29.6.2",
+				"resolve": "^1.20.0",
+				"resolve.exports": "^2.0.0",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-resolve-dependencies": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.6.2.tgz",
+			"integrity": "sha512-LGqjDWxg2fuQQm7ypDxduLu/m4+4Lb4gczc13v51VMZbVP5tSBILqVx8qfWcsdP8f0G7aIqByIALDB0R93yL+w==",
+			"dependencies": {
+				"jest-regex-util": "^29.4.3",
+				"jest-snapshot": "^29.6.2"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-runner": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.6.2.tgz",
+			"integrity": "sha512-wXOT/a0EspYgfMiYHxwGLPCZfC0c38MivAlb2lMEAlwHINKemrttu1uSbcGbfDV31sFaPWnWJPmb2qXM8pqZ4w==",
+			"dependencies": {
+				"@jest/console": "^29.6.2",
+				"@jest/environment": "^29.6.2",
+				"@jest/test-result": "^29.6.2",
+				"@jest/transform": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"emittery": "^0.13.1",
+				"graceful-fs": "^4.2.9",
+				"jest-docblock": "^29.4.3",
+				"jest-environment-node": "^29.6.2",
+				"jest-haste-map": "^29.6.2",
+				"jest-leak-detector": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-resolve": "^29.6.2",
+				"jest-runtime": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"jest-watcher": "^29.6.2",
+				"jest-worker": "^29.6.2",
+				"p-limit": "^3.1.0",
+				"source-map-support": "0.5.13"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-runner/node_modules/source-map-support": {
+			"version": "0.5.13",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+			"integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
+		"node_modules/jest-runtime": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.6.2.tgz",
+			"integrity": "sha512-2X9dqK768KufGJyIeLmIzToDmsN0m7Iek8QNxRSI/2+iPFYHF0jTwlO3ftn7gdKd98G/VQw9XJCk77rbTGZnJg==",
+			"dependencies": {
+				"@jest/environment": "^29.6.2",
+				"@jest/fake-timers": "^29.6.2",
+				"@jest/globals": "^29.6.2",
+				"@jest/source-map": "^29.6.0",
+				"@jest/test-result": "^29.6.2",
+				"@jest/transform": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"cjs-module-lexer": "^1.0.0",
+				"collect-v8-coverage": "^1.0.0",
+				"glob": "^7.1.3",
+				"graceful-fs": "^4.2.9",
+				"jest-haste-map": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-mock": "^29.6.2",
+				"jest-regex-util": "^29.4.3",
+				"jest-resolve": "^29.6.2",
+				"jest-snapshot": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"slash": "^3.0.0",
+				"strip-bom": "^4.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-runtime/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/jest-snapshot": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.6.2.tgz",
+			"integrity": "sha512-1OdjqvqmRdGNvWXr/YZHuyhh5DeaLp1p/F8Tht/MrMw4Kr1Uu/j4lRG+iKl1DAqUJDWxtQBMk41Lnf/JETYBRA==",
+			"dependencies": {
+				"@babel/core": "^7.11.6",
+				"@babel/generator": "^7.7.2",
+				"@babel/plugin-syntax-jsx": "^7.7.2",
+				"@babel/plugin-syntax-typescript": "^7.7.2",
+				"@babel/types": "^7.3.3",
+				"@jest/expect-utils": "^29.6.2",
+				"@jest/transform": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"babel-preset-current-node-syntax": "^1.0.0",
+				"chalk": "^4.0.0",
+				"expect": "^29.6.2",
+				"graceful-fs": "^4.2.9",
+				"jest-diff": "^29.6.2",
+				"jest-get-type": "^29.4.3",
+				"jest-matcher-utils": "^29.6.2",
+				"jest-message-util": "^29.6.2",
+				"jest-util": "^29.6.2",
+				"natural-compare": "^1.4.0",
+				"pretty-format": "^29.6.2",
+				"semver": "^7.5.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-util": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+			"integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+			"dependencies": {
+				"@jest/types": "^29.6.3",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"ci-info": "^3.2.0",
+				"graceful-fs": "^4.2.9",
+				"picomatch": "^2.2.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-validate": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
+			"integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
+			"dependencies": {
+				"@jest/types": "^29.6.3",
+				"camelcase": "^6.2.0",
+				"chalk": "^4.0.0",
+				"jest-get-type": "^29.6.3",
+				"leven": "^3.1.0",
+				"pretty-format": "^29.7.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-validate/node_modules/camelcase": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+			"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-watch-typeahead": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-2.2.2.tgz",
+			"integrity": "sha512-+QgOFW4o5Xlgd6jGS5X37i08tuuXNW8X0CV9WNFi+3n8ExCIP+E1melYhvYLjv5fE6D0yyzk74vsSO8I6GqtvQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-escapes": "^6.0.0",
+				"chalk": "^5.2.0",
+				"jest-regex-util": "^29.0.0",
+				"jest-watcher": "^29.0.0",
+				"slash": "^5.0.0",
+				"string-length": "^5.0.1",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.10.0 || >=18.0.0"
+			},
+			"peerDependencies": {
+				"jest": "^27.0.0 || ^28.0.0 || ^29.0.0"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/ansi-escapes": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.1.tgz",
+			"integrity": "sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/chalk": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+			"dev": true,
+			"engines": {
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/char-regex": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+			"integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/slash": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+			"integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/string-length": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+			"integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+			"dev": true,
+			"dependencies": {
+				"char-regex": "^2.0.0",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/jest-watch-typeahead/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/jest-watcher": {
+			"version": "29.6.2",
+			"resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.6.2.tgz",
+			"integrity": "sha512-GZitlqkMkhkefjfN/p3SJjrDaxPflqxEAv3/ik10OirZqJGYH5rPiIsgVcfof0Tdqg3shQGdEIxDBx+B4tuLzA==",
+			"dependencies": {
+				"@jest/test-result": "^29.6.2",
+				"@jest/types": "^29.6.1",
+				"@types/node": "*",
+				"ansi-escapes": "^4.2.1",
+				"chalk": "^4.0.0",
+				"emittery": "^0.13.1",
+				"jest-util": "^29.6.2",
+				"string-length": "^4.0.1"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-worker": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
+			"integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
+			"dependencies": {
+				"@types/node": "*",
+				"jest-util": "^29.7.0",
+				"merge-stream": "^2.0.0",
+				"supports-color": "^8.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-worker/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jest-worker/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
+		"node_modules/joi": {
+			"version": "17.13.3",
+			"resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
+			"integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"@hapi/hoek": "^9.3.0",
+				"@hapi/topo": "^5.1.0",
+				"@sideway/address": "^4.1.5",
+				"@sideway/formula": "^3.0.1",
+				"@sideway/pinpoint": "^2.0.0"
+			}
+		},
+		"node_modules/jpeg-js": {
+			"version": "0.4.4",
+			"resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz",
+			"integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="
+		},
+		"node_modules/js-library-detector": {
+			"version": "6.7.0",
+			"resolved": "https://registry.npmjs.org/js-library-detector/-/js-library-detector-6.7.0.tgz",
+			"integrity": "sha512-c80Qupofp43y4cJ7+8TTDN/AsDwLi5oOm/plBrWI+iQt485vKXCco+yVmOwEgdo9VOdsYTuV0UlTeetVPTriXA==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+		},
+		"node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/jsbn": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+			"integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
+			"license": "MIT"
+		},
+		"node_modules/jsc-android": {
+			"version": "250231.0.0",
+			"resolved": "https://registry.npmjs.org/jsc-android/-/jsc-android-250231.0.0.tgz",
+			"integrity": "sha512-rS46PvsjYmdmuz1OAWXY/1kCYG7pnf1TBqeTiOJr1iDz7s5DLxxC9n/ZMknLDxzYzNVfI7R95MH10emSSG1Wuw=="
+		},
+		"node_modules/jsc-safe-url": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz",
+			"integrity": "sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q=="
+		},
+		"node_modules/jscodeshift": {
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.14.0.tgz",
+			"integrity": "sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==",
+			"dependencies": {
+				"@babel/core": "^7.13.16",
+				"@babel/parser": "^7.13.16",
+				"@babel/plugin-proposal-class-properties": "^7.13.0",
+				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+				"@babel/plugin-proposal-optional-chaining": "^7.13.12",
+				"@babel/plugin-transform-modules-commonjs": "^7.13.8",
+				"@babel/preset-flow": "^7.13.13",
+				"@babel/preset-typescript": "^7.13.0",
+				"@babel/register": "^7.13.16",
+				"babel-core": "^7.0.0-bridge.0",
+				"chalk": "^4.1.2",
+				"flow-parser": "0.*",
+				"graceful-fs": "^4.2.4",
+				"micromatch": "^4.0.4",
+				"neo-async": "^2.5.0",
+				"node-dir": "^0.1.17",
+				"recast": "^0.21.0",
+				"temp": "^0.8.4",
+				"write-file-atomic": "^2.3.0"
+			},
+			"bin": {
+				"jscodeshift": "bin/jscodeshift.js"
+			},
+			"peerDependencies": {
+				"@babel/preset-env": "^7.1.6"
+			}
+		},
+		"node_modules/jscodeshift/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/jscodeshift/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jscodeshift/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jsdoc-type-pratt-parser": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.0.0.tgz",
+			"integrity": "sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/jsdom": {
+			"version": "25.0.1",
+			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+			"integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+			"dependencies": {
+				"cssstyle": "^4.1.0",
+				"data-urls": "^5.0.0",
+				"decimal.js": "^10.4.3",
+				"form-data": "^4.0.0",
+				"html-encoding-sniffer": "^4.0.0",
+				"http-proxy-agent": "^7.0.2",
+				"https-proxy-agent": "^7.0.5",
+				"is-potential-custom-element-name": "^1.0.1",
+				"nwsapi": "^2.2.12",
+				"parse5": "^7.1.2",
+				"rrweb-cssom": "^0.7.1",
+				"saxes": "^6.0.0",
+				"symbol-tree": "^3.2.4",
+				"tough-cookie": "^5.0.0",
+				"w3c-xmlserializer": "^5.0.0",
+				"webidl-conversions": "^7.0.0",
+				"whatwg-encoding": "^3.1.1",
+				"whatwg-mimetype": "^4.0.0",
+				"whatwg-url": "^14.0.0",
+				"ws": "^8.18.0",
+				"xml-name-validator": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"canvas": "^2.11.2"
+			},
+			"peerDependenciesMeta": {
+				"canvas": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jsdom-jscore-rn": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/jsdom-jscore-rn/-/jsdom-jscore-rn-0.1.8.tgz",
+			"integrity": "sha512-Sm0BCCQL3RRmJwztZa9B4QIOxgFOiu7vpsJjLsjG55HlRzOgUdmTOHrhV4SZkjXef5sBF+E8qKnrhsBUO7Gxjg==",
+			"dependencies": {
+				"htmlparser2-without-node-native": "^3.9.2",
+				"querystring": "^0.2.0"
+			}
+		},
+		"node_modules/jsdom/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/jsdom/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/jsdom/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/jsdom/node_modules/tr46": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+			"integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/jsdom/node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/jsdom/node_modules/whatwg-url": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+			"integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+			"dependencies": {
+				"tr46": "^5.0.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/jsdom/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"zip-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.0.tgz",
-					"integrity": "sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A==",
-					"dev": true,
-					"requires": {
-						"archiver-utils": "^2.1.0",
-						"compress-commons": "^4.1.0",
-						"readable-stream": "^3.6.0"
-					}
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jsesc": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+			"integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+			"license": "MIT",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsftp": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/jsftp/-/jsftp-2.1.3.tgz",
+			"integrity": "sha512-r79EVB8jaNAZbq8hvanL8e8JGu2ZNr2bXdHC4ZdQhRImpSPpnWwm5DYVzQ5QxJmtGtKhNNuvqGgbNaFl604fEQ==",
+			"dev": true,
+			"dependencies": {
+				"debug": "^3.1.0",
+				"ftp-response-parser": "^1.0.1",
+				"once": "^1.4.0",
+				"parse-listing": "^1.1.3",
+				"stream-combiner": "^0.2.2",
+				"unorm": "^1.4.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsftp/node_modules/debug": {
+			"version": "3.2.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+			"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+			"dev": true,
+			"dependencies": {
+				"ms": "^2.1.1"
+			}
+		},
+		"node_modules/jsftp/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true
+		},
+		"node_modules/json-buffer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+		},
+		"node_modules/json-parse-better-errors": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+			"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+		},
+		"node_modules/json-parse-even-better-errors": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+			"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+		},
+		"node_modules/json-schema": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+			"integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+			"dev": true
+		},
+		"node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/json-stable-stringify": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.1.0.tgz",
+			"integrity": "sha512-zfA+5SuwYN2VWqN1/5HZaDzQKLJHaBVMZIIM+wuYjdptkaQsqzDdqjqf+lZZJUuJq1aanHiY8LhH8LmH+qBYJA==",
+			"dev": true,
+			"dependencies": {
+				"call-bind": "^1.0.5",
+				"isarray": "^2.0.5",
+				"jsonify": "^0.0.1",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/json-stable-stringify-without-jsonify": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+		},
+		"node_modules/json-stable-stringify/node_modules/isarray": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+			"dev": true
+		},
+		"node_modules/json-stringify-safe": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+			"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+			"dev": true
+		},
+		"node_modules/json2md": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/json2md/-/json2md-2.0.1.tgz",
+			"integrity": "sha512-VbwmZ83qmUfKBS2pUOHlzNKEZFPBeJSbzEok3trMYyboZUgdHNn1XZfc1uT8UZs1GHCrmRUBXCfqw4YmmQuOhw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"indento": "^1.1.13"
+			}
+		},
+		"node_modules/json2php": {
+			"version": "0.0.7",
+			"resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.7.tgz",
+			"integrity": "sha512-dnSoUiLAoVaMXxFsVi4CrPVYMKOuDBXTghXSmMINX44RZ8WM9cXlY7UqrQnlAcODCVO7FV3+8t/5nDKAjimLfg=="
+		},
+		"node_modules/json5": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"bin": {
+				"json5": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsonc-parser": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+			"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
+		},
+		"node_modules/jsonfile": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+			"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/jsonify": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+			"integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/jsonparse": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+			"integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+			"dev": true,
+			"engines": [
+				"node >= 0.2.0"
+			]
+		},
+		"node_modules/JSONStream": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
+			"integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+			"dev": true,
+			"dependencies": {
+				"jsonparse": "^1.2.0",
+				"through": ">=2.2.7 <3"
+			},
+			"bin": {
+				"JSONStream": "bin.js"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/jsx-ast-utils": {
+			"version": "3.3.5",
+			"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+			"integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+			"dependencies": {
+				"array-includes": "^3.1.6",
+				"array.prototype.flat": "^1.3.1",
+				"object.assign": "^4.1.4",
+				"object.values": "^1.1.6"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/keyv": {
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+			"dependencies": {
+				"json-buffer": "3.0.1"
+			}
+		},
+		"node_modules/kind-of": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/klaw": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/klaw/-/klaw-4.1.0.tgz",
+			"integrity": "sha512-1zGZ9MF9H22UnkpVeuaGKOjfA2t6WrfdrJmGjy16ykcjnKQDmHVX+KI477rpbGevz/5FD4MC3xf1oxylBgcaQw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.14.0"
+			}
+		},
+		"node_modules/klaw-sync": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+			"integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.11"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/klona": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+			"integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/known-css-properties": {
+			"version": "0.34.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
+			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ=="
+		},
+		"node_modules/kuler": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+			"integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
+			"dev": true
+		},
+		"node_modules/ky": {
+			"version": "0.33.3",
+			"resolved": "https://registry.npmjs.org/ky/-/ky-0.33.3.tgz",
+			"integrity": "sha512-CasD9OCEQSFIam2U8efFK81Yeg8vNMTBUqtMOHlrcWQHqUX3HeCl9Dr31u4toV7emlH8Mymk5+9p0lL6mKb/Xw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/ky?sponsor=1"
+			}
+		},
+		"node_modules/language-subtag-registry": {
+			"version": "0.3.21",
+			"resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
+			"integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg=="
+		},
+		"node_modules/language-tags": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+			"integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+			"dependencies": {
+				"language-subtag-registry": "~0.3.2"
+			}
+		},
+		"node_modules/launch-editor": {
+			"version": "2.9.1",
+			"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz",
+			"integrity": "sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==",
+			"license": "MIT",
+			"dependencies": {
+				"picocolors": "^1.0.0",
+				"shell-quote": "^1.8.1"
+			}
+		},
+		"node_modules/lazy-cache": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+			"integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/lazy-universal-dotenv": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-4.0.0.tgz",
+			"integrity": "sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==",
+			"dev": true,
+			"dependencies": {
+				"app-root-dir": "^1.0.2",
+				"dotenv": "^16.0.0",
+				"dotenv-expand": "^10.0.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/lazystream": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+			"integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+			"dev": true,
+			"dependencies": {
+				"readable-stream": "^2.0.5"
+			},
+			"engines": {
+				"node": ">= 0.6.3"
+			}
+		},
+		"node_modules/lerna": {
+			"version": "7.1.4",
+			"resolved": "https://registry.npmjs.org/lerna/-/lerna-7.1.4.tgz",
+			"integrity": "sha512-/cabvmTTkmayyALIZx7OpHRex72i8xSOkiJchEkrKxAZHoLNaGSwqwKkj+x6WtmchhWl/gLlqwQXGRuxrJKiBw==",
+			"dev": true,
+			"dependencies": {
+				"@lerna/child-process": "7.1.4",
+				"@lerna/create": "7.1.4",
+				"@npmcli/run-script": "6.0.2",
+				"@nx/devkit": ">=16.5.1 < 17",
+				"@octokit/plugin-enterprise-rest": "6.0.1",
+				"@octokit/rest": "19.0.11",
+				"byte-size": "8.1.1",
+				"chalk": "4.1.0",
+				"clone-deep": "4.0.1",
+				"cmd-shim": "6.0.1",
+				"columnify": "1.6.0",
+				"conventional-changelog-angular": "6.0.0",
+				"conventional-changelog-core": "5.0.1",
+				"conventional-recommended-bump": "7.0.1",
+				"cosmiconfig": "^8.2.0",
+				"dedent": "0.7.0",
+				"envinfo": "7.8.1",
+				"execa": "5.0.0",
+				"fs-extra": "^11.1.1",
+				"get-port": "5.1.1",
+				"get-stream": "6.0.0",
+				"git-url-parse": "13.1.0",
+				"glob-parent": "5.1.2",
+				"globby": "11.1.0",
+				"graceful-fs": "4.2.11",
+				"has-unicode": "2.0.1",
+				"import-local": "3.1.0",
+				"ini": "^1.3.8",
+				"init-package-json": "5.0.0",
+				"inquirer": "^8.2.4",
+				"is-ci": "3.0.1",
+				"is-stream": "2.0.0",
+				"jest-diff": ">=29.4.3 < 30",
+				"js-yaml": "4.1.0",
+				"libnpmaccess": "7.0.2",
+				"libnpmpublish": "7.3.0",
+				"load-json-file": "6.2.0",
+				"lodash": "^4.17.21",
+				"make-dir": "3.1.0",
+				"minimatch": "3.0.5",
+				"multimatch": "5.0.0",
+				"node-fetch": "2.6.7",
+				"npm-package-arg": "8.1.1",
+				"npm-packlist": "5.1.1",
+				"npm-registry-fetch": "^14.0.5",
+				"npmlog": "^6.0.2",
+				"nx": ">=16.5.1 < 17",
+				"p-map": "4.0.0",
+				"p-map-series": "2.1.0",
+				"p-pipe": "3.1.0",
+				"p-queue": "6.6.2",
+				"p-reduce": "2.1.0",
+				"p-waterfall": "2.1.1",
+				"pacote": "^15.2.0",
+				"pify": "5.0.0",
+				"read-cmd-shim": "4.0.0",
+				"read-package-json": "6.0.4",
+				"resolve-from": "5.0.0",
+				"rimraf": "^4.4.1",
+				"semver": "^7.3.8",
+				"signal-exit": "3.0.7",
+				"slash": "3.0.0",
+				"ssri": "^9.0.1",
+				"strong-log-transformer": "2.1.0",
+				"tar": "6.1.11",
+				"temp-dir": "1.0.0",
+				"typescript": ">=3 < 6",
+				"upath": "2.0.1",
+				"uuid": "^9.0.0",
+				"validate-npm-package-license": "3.0.4",
+				"validate-npm-package-name": "5.0.0",
+				"write-file-atomic": "5.0.1",
+				"write-pkg": "4.0.0",
+				"yargs": "16.2.0",
+				"yargs-parser": "20.2.4"
+			},
+			"bin": {
+				"lerna": "dist/cli.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || >=16.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/auth-token": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz",
+			"integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==",
+			"dev": true,
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/core": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz",
+			"integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/auth-token": "^3.0.0",
+				"@octokit/graphql": "^5.0.0",
+				"@octokit/request": "^6.0.0",
+				"@octokit/request-error": "^3.0.0",
+				"@octokit/types": "^9.0.0",
+				"before-after-hook": "^2.2.0",
+				"universal-user-agent": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/endpoint": {
+			"version": "7.0.6",
+			"resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz",
+			"integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/types": "^9.0.0",
+				"is-plain-object": "^5.0.0",
+				"universal-user-agent": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/graphql": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz",
+			"integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/request": "^6.0.0",
+				"@octokit/types": "^9.0.0",
+				"universal-user-agent": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/openapi-types": {
+			"version": "18.1.1",
+			"resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.1.1.tgz",
+			"integrity": "sha512-VRaeH8nCDtF5aXWnjPuEMIYf1itK/s3JYyJcWFJT8X9pSNnBtriDf7wlEWsGuhPLl4QIH4xM8fqTXDwJ3Mu6sw==",
+			"dev": true
+		},
+		"node_modules/lerna/node_modules/@octokit/plugin-paginate-rest": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-6.1.2.tgz",
+			"integrity": "sha512-qhrmtQeHU/IivxucOV1bbI/xZyC/iOBhclokv7Sut5vnejAIAEXVcGQeRpQlU39E0WwK9lNvJHphHri/DB6lbQ==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/tsconfig": "^1.0.2",
+				"@octokit/types": "^9.2.3"
+			},
+			"engines": {
+				"node": ">= 14"
+			},
+			"peerDependencies": {
+				"@octokit/core": ">=4"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/plugin-rest-endpoint-methods": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-7.2.3.tgz",
+			"integrity": "sha512-I5Gml6kTAkzVlN7KCtjOM+Ruwe/rQppp0QU372K1GP7kNOYEKe8Xn5BW4sE62JAHdwpq95OQK/qGNyKQMUzVgA==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/types": "^10.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			},
+			"peerDependencies": {
+				"@octokit/core": ">=3"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-10.0.0.tgz",
+			"integrity": "sha512-Vm8IddVmhCgU1fxC1eyinpwqzXPEYu0NrYzD3YZjlGjyftdLBTeqNblRC0jmJmgxbJIsQlyogVeGnrNaaMVzIg==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/openapi-types": "^18.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/request": {
+			"version": "6.2.8",
+			"resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz",
+			"integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/endpoint": "^7.0.0",
+				"@octokit/request-error": "^3.0.0",
+				"@octokit/types": "^9.0.0",
+				"is-plain-object": "^5.0.0",
+				"node-fetch": "^2.6.7",
+				"universal-user-agent": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/request-error": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+			"integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/types": "^9.0.0",
+				"deprecation": "^2.0.0",
+				"once": "^1.4.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/rest": {
+			"version": "19.0.11",
+			"resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.11.tgz",
+			"integrity": "sha512-m2a9VhaP5/tUw8FwfnW2ICXlXpLPIqxtg3XcAiGMLj/Xhw3RSBfZ8le/466ktO1Gcjr8oXudGnHhxV1TXJgFxw==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/core": "^4.2.1",
+				"@octokit/plugin-paginate-rest": "^6.1.2",
+				"@octokit/plugin-request-log": "^1.0.4",
+				"@octokit/plugin-rest-endpoint-methods": "^7.1.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/lerna/node_modules/@octokit/types": {
+			"version": "9.3.2",
+			"resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz",
+			"integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==",
+			"dev": true,
+			"dependencies": {
+				"@octokit/openapi-types": "^18.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true
+		},
+		"node_modules/lerna/node_modules/before-after-hook": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+			"integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
+			"dev": true
+		},
+		"node_modules/lerna/node_modules/chalk": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+			"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/lerna/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+			"dev": true,
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/cli-width": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+			"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/lerna/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+			"dev": true,
+			"dependencies": {
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/lerna/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/lerna/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/lerna/node_modules/envinfo": {
+			"version": "7.8.1",
+			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+			"integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+			"dev": true,
+			"bin": {
+				"envinfo": "dist/cli.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/lerna/node_modules/execa": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
+			"integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/lerna/node_modules/figures": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+			"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+			"dev": true,
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/lerna/node_modules/get-stream": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
+			"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/glob": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+			"integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^5.0.1",
+				"once": "^1.3.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/lerna/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dev": true,
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/lerna/node_modules/glob/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/glob/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lerna/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/hosted-git-info": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
+			"integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lerna/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/lerna/node_modules/ignore-walk": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
+			"integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
+			"dev": true,
+			"dependencies": {
+				"minimatch": "^5.0.1"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/ignore-walk/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/ignore-walk/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lerna/node_modules/inquirer": {
+			"version": "8.2.6",
+			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz",
+			"integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-escapes": "^4.2.1",
+				"chalk": "^4.1.1",
+				"cli-cursor": "^3.1.0",
+				"cli-width": "^3.0.0",
+				"external-editor": "^3.0.3",
+				"figures": "^3.0.0",
+				"lodash": "^4.17.21",
+				"mute-stream": "0.0.8",
+				"ora": "^5.4.1",
+				"run-async": "^2.4.0",
+				"rxjs": "^7.5.5",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"through": "^2.3.6",
+				"wrap-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/inquirer/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/lerna/node_modules/is-ci": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+			"integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+			"dev": true,
+			"dependencies": {
+				"ci-info": "^3.2.0"
+			},
+			"bin": {
+				"is-ci": "bin.js"
+			}
+		},
+		"node_modules/lerna/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/is-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+			"integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dev": true,
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/lerna/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dev": true,
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/lerna/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lerna/node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/make-dir/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/lerna/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/lerna/node_modules/minimatch": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.5.tgz",
+			"integrity": "sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/lerna/node_modules/node-fetch": {
+			"version": "2.6.7",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-url": "^5.0.0"
+			},
+			"engines": {
+				"node": "4.x || >=6.0.0"
+			},
+			"peerDependencies": {
+				"encoding": "^0.1.0"
+			},
+			"peerDependenciesMeta": {
+				"encoding": {
+					"optional": true
 				}
 			}
 		},
-		"aproba": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-			"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
-			"dev": true
+		"node_modules/lerna/node_modules/npm-package-arg": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
+			"integrity": "sha512-CsP95FhWQDwNqiYS+Q0mZ7FAEDytDZAkNxQqea6IaAFJTAY9Lhhqyl0irU/6PMc7BGfUmnsbHcqxJD7XuVM/rg==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^3.0.6",
+				"semver": "^7.0.0",
+				"validate-npm-package-name": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lerna/node_modules/npm-package-arg/node_modules/validate-npm-package-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
+			"integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==",
+			"dev": true,
+			"dependencies": {
+				"builtins": "^1.0.3"
+			}
+		},
+		"node_modules/lerna/node_modules/npm-packlist": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-5.1.1.tgz",
+			"integrity": "sha512-UfpSvQ5YKwctmodvPPkK6Fwk603aoVsf8AEbmVKAEECrfvL8SSe1A2YIwrJ6xmTHAITKPwwZsWo7WwEbNk0kxw==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^8.0.1",
+				"ignore-walk": "^5.0.1",
+				"npm-bundled": "^1.1.2",
+				"npm-normalize-package-bin": "^1.0.1"
+			},
+			"bin": {
+				"npm-packlist": "bin/index.js"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/ora": {
+			"version": "5.4.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+			"integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+			"dev": true,
+			"dependencies": {
+				"bl": "^4.1.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.5.0",
+				"is-interactive": "^1.0.0",
+				"is-unicode-supported": "^0.1.0",
+				"log-symbols": "^4.1.0",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/pify": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+			"integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lerna/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/rimraf": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz",
+			"integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^9.2.0"
+			},
+			"bin": {
+				"rimraf": "dist/cjs/src/bin.js"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/lerna/node_modules/rimraf/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/rimraf/node_modules/glob": {
+			"version": "9.3.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz",
+			"integrity": "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==",
+			"dev": true,
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"minimatch": "^8.0.2",
+				"minipass": "^4.2.4",
+				"path-scurry": "^1.6.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/lerna/node_modules/rimraf/node_modules/minimatch": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
+			"integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/lerna/node_modules/rimraf/node_modules/minipass": {
+			"version": "4.2.8",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+			"integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/rxjs": {
+			"version": "7.8.1",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+			"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+			"dev": true,
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
+		},
+		"node_modules/lerna/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/ssri": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
+			"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.1.1"
+			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lerna/node_modules/universal-user-agent": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.1.tgz",
+			"integrity": "sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==",
+			"dev": true
+		},
+		"node_modules/lerna/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/upath": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
+			"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
+			"dev": true,
+			"engines": {
+				"node": ">=4",
+				"yarn": "*"
+			}
+		},
+		"node_modules/lerna/node_modules/validate-npm-package-name": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
+			"integrity": "sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==",
+			"dev": true,
+			"dependencies": {
+				"builtins": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/validate-npm-package-name/node_modules/builtins": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.1.0.tgz",
+			"integrity": "sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==",
+			"dev": true,
+			"dependencies": {
+				"semver": "^7.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/lerna/node_modules/write-file-atomic": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+			"integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+			"dev": true,
+			"dependencies": {
+				"imurmurhash": "^0.1.4",
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/lerna/node_modules/write-file-atomic/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/lerna/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
+		},
+		"node_modules/leven": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+			"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/levn": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+			"integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+			"dependencies": {
+				"prelude-ls": "~1.1.2",
+				"type-check": "~0.3.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/lib0": {
+			"version": "0.2.79",
+			"resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.79.tgz",
+			"integrity": "sha512-fIdPbxzMVq10wt3ou1lp3/f9n5ciHZ6t+P1vyGy3XXr018AntTYM4eg24sNFcNq8SYDQwmhhoGdS58IlYBzfBw==",
+			"dependencies": {
+				"isomorphic.js": "^0.2.4"
+			},
+			"bin": {
+				"0gentesthtml": "bin/gentesthtml.js",
+				"0serve": "bin/0serve.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
+		"node_modules/libnpmaccess": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/libnpmaccess/-/libnpmaccess-7.0.2.tgz",
+			"integrity": "sha512-vHBVMw1JFMTgEk15zRsJuSAg7QtGGHpUSEfnbcRL1/gTBag9iEfJbyjpDmdJmwMhvpoLoNBtdAUCdGnaP32hhw==",
+			"dev": true,
+			"dependencies": {
+				"npm-package-arg": "^10.1.0",
+				"npm-registry-fetch": "^14.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmaccess/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmaccess/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/libnpmaccess/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmaccess/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmpublish": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/libnpmpublish/-/libnpmpublish-7.3.0.tgz",
+			"integrity": "sha512-fHUxw5VJhZCNSls0KLNEG0mCD2PN1i14gH5elGOgiVnU3VgTcRahagYP2LKI1m0tFCJ+XrAm0zVYyF5RCbXzcg==",
+			"dev": true,
+			"dependencies": {
+				"ci-info": "^3.6.1",
+				"normalize-package-data": "^5.0.0",
+				"npm-package-arg": "^10.1.0",
+				"npm-registry-fetch": "^14.0.3",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.7",
+				"sigstore": "^1.4.0",
+				"ssri": "^10.0.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"archiver": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/archiver/-/archiver-3.1.1.tgz",
-			"integrity": "sha512-5Hxxcig7gw5Jod/8Gq0OneVgLYET+oNHcxgWItq4TbhOzRLKNAFUb9edAftiMKXvXfCB0vbGrJdZDNq0dWMsxg==",
+		"node_modules/libnpmpublish/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
 			"dev": true,
-			"requires": {
-				"archiver-utils": "^2.1.0",
-				"async": "^2.6.3",
-				"buffer-crc32": "^0.2.1",
-				"glob": "^7.1.4",
-				"readable-stream": "^3.4.0",
-				"tar-stream": "^2.1.0",
-				"zip-stream": "^2.1.2"
-			},
-			"dependencies": {
-				"async": {
-					"version": "2.6.4",
-					"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-					"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.14"
-					}
-				},
-				"buffer": {
-					"version": "5.6.0",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
-					"integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
-					"requires": {
-						"base64-js": "^1.0.2",
-						"ieee754": "^1.1.4"
-					}
-				},
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
+			"dependencies": {
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/normalize-package-data": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-5.0.0.tgz",
+			"integrity": "sha512-h9iPVIfrVZ9wVYQnxFgtw1ugSvGEMOlyPWWtm8BMJhnwyEL/FLbYbTY3V3PpjI/BUK67n9PEWDu6eHzu1fB15Q==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"is-core-module": "^2.8.1",
+				"semver": "^7.3.5",
+				"validate-npm-package-license": "^3.0.4"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/ssri": {
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/libnpmpublish/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/lighthouse": {
+			"version": "10.4.0",
+			"resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-10.4.0.tgz",
+			"integrity": "sha512-XQWHEWkJ8YxSPsxttBJORy5+hQrzbvGkYfeP3fJjyYKioWkF2MXfFqNK4ZuV4jL8pBu7Z91qnQP6In0bq1yXww==",
+			"dependencies": {
+				"@sentry/node": "^6.17.4",
+				"axe-core": "4.7.2",
+				"chrome-launcher": "^0.15.2",
+				"configstore": "^5.0.1",
+				"csp_evaluator": "1.1.1",
+				"devtools-protocol": "0.0.1155343",
+				"enquirer": "^2.3.6",
+				"http-link-header": "^1.1.1",
+				"intl-messageformat": "^4.4.0",
+				"jpeg-js": "^0.4.4",
+				"js-library-detector": "^6.6.0",
+				"lighthouse-logger": "^1.4.1",
+				"lighthouse-stack-packs": "1.11.0",
+				"lodash": "^4.17.21",
+				"lookup-closest-locale": "6.2.0",
+				"metaviewport-parser": "0.3.0",
+				"open": "^8.4.0",
+				"parse-cache-control": "1.0.1",
+				"ps-list": "^8.0.0",
+				"puppeteer-core": "^20.8.0",
+				"robots-parser": "^3.0.0",
+				"semver": "^5.3.0",
+				"speedline-core": "^1.4.3",
+				"third-party-web": "^0.23.3",
+				"ws": "^7.0.0",
+				"yargs": "^17.3.1",
+				"yargs-parser": "^21.0.0"
+			},
+			"bin": {
+				"chrome-debug": "core/scripts/manual-chrome-launcher.js",
+				"lighthouse": "cli/index.js",
+				"smokehouse": "cli/test/smokehouse/frontends/smokehouse-bin.js"
+			},
+			"engines": {
+				"node": ">=16.16"
+			}
+		},
+		"node_modules/lighthouse-logger": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.4.2.tgz",
+			"integrity": "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g==",
+			"dependencies": {
+				"debug": "^2.6.9",
+				"marky": "^1.2.2"
+			}
+		},
+		"node_modules/lighthouse-logger/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/lighthouse-stack-packs": {
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/lighthouse-stack-packs/-/lighthouse-stack-packs-1.11.0.tgz",
+			"integrity": "sha512-sRr0z1S/I26VffRLq9KJsKtLk856YrJlNGmcJmbLX8dFn3MuzVPUbstuChEhqnSxZb8TZmVfthuXuwhG9vRoSw=="
+		},
+		"node_modules/lighthouse/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/lighthouse/node_modules/devtools-protocol": {
+			"version": "0.0.1155343",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1155343.tgz",
+			"integrity": "sha512-oD9vGBV2wTc7fAzAM6KC0chSgs234V8+qDEeK+mcbRj2UvcuA7lgBztGi/opj/iahcXD3BSj8Ymvib628yy9FA=="
+		},
+		"node_modules/lighthouse/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/lighthouse/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lighthouse/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lighthouse/node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lighthouse/node_modules/puppeteer-core": {
+			"version": "20.9.0",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-20.9.0.tgz",
+			"integrity": "sha512-H9fYZQzMTRrkboEfPmf7m3CLDN6JvbxXA3qTtS+dFt27tR+CsFHzPsT6pzp6lYL6bJbAPaR0HaPO6uSi+F94Pg==",
+			"dependencies": {
+				"@puppeteer/browsers": "1.4.6",
+				"chromium-bidi": "0.4.16",
+				"cross-fetch": "4.0.0",
+				"debug": "4.3.4",
+				"devtools-protocol": "0.0.1147663",
+				"ws": "8.13.0"
+			},
+			"engines": {
+				"node": ">=16.3.0"
+			},
+			"peerDependencies": {
+				"typescript": ">= 4.7.4"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/lighthouse/node_modules/puppeteer-core/node_modules/devtools-protocol": {
+			"version": "0.0.1147663",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1147663.tgz",
+			"integrity": "sha512-hyWmRrexdhbZ1tcJUGpO95ivbRhWXz++F4Ko+n21AY5PNln2ovoJw+8ZMNDTtip+CNFQfrtLVh/w4009dXO/eQ=="
+		},
+		"node_modules/lighthouse/node_modules/puppeteer-core/node_modules/ws": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+			"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"tar-stream": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz",
-					"integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==",
-					"dev": true,
-					"requires": {
-						"bl": "^4.0.1",
-						"end-of-stream": "^1.4.1",
-						"fs-constants": "^1.0.0",
-						"inherits": "^2.0.3",
-						"readable-stream": "^3.1.1"
-					}
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"archiver-utils": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-			"integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+		"node_modules/lighthouse/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/lighthouse/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lighthouse/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/lighthouse/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lighthouse/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/lighthouse/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/lilconfig": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/line-height": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz",
+			"integrity": "sha512-YExecgqPwnp5gplD2+Y8e8A5+jKpr25+DzMbFdI1/1UAr0FJrTFv4VkHLf8/6B590i1wUPJWMKKldkd/bdQ//w==",
+			"dependencies": {
+				"computed-style": "~0.1.3"
+			},
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/lines-and-columns": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+		},
+		"node_modules/linkify-it": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+			"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+			"dependencies": {
+				"uc.micro": "^1.0.1"
+			}
+		},
+		"node_modules/lint-staged": {
+			"version": "10.0.2",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.2.tgz",
+			"integrity": "sha512-ZldhtIfT7bynVa7nmU/1jbK05r9hYQXbIQqZSotqdBCAcGJDEUqaUB7kG3ZCdoe9Qkj6HUM3x2yjCGJRxPUQLA==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^3.0.0",
+				"commander": "^4.0.1",
+				"cosmiconfig": "^6.0.0",
+				"debug": "^4.1.1",
+				"dedent": "^0.7.0",
+				"execa": "^3.4.0",
+				"listr": "^0.14.3",
+				"log-symbols": "^3.0.0",
+				"micromatch": "^4.0.2",
+				"normalize-path": "^3.0.0",
+				"please-upgrade-node": "^3.2.0",
+				"string-argv": "0.3.1",
+				"stringify-object": "^3.3.0"
+			},
+			"bin": {
+				"lint-staged": "bin/lint-staged"
+			},
+			"funding": {
+				"url": "https://opencollective.com/lint-staged"
+			}
+		},
+		"node_modules/lint-staged/node_modules/chalk": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lint-staged/node_modules/commander": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+			"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/lint-staged/node_modules/cosmiconfig": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+			"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+			"dev": true,
+			"dependencies": {
+				"@types/parse-json": "^4.0.0",
+				"import-fresh": "^3.1.0",
+				"parse-json": "^5.0.0",
+				"path-type": "^4.0.0",
+				"yaml": "^1.7.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lint-staged/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/lint-staged/node_modules/execa": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-3.4.0.tgz",
+			"integrity": "sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==",
+			"dev": true,
+			"dependencies": {
+				"cross-spawn": "^7.0.0",
+				"get-stream": "^5.0.0",
+				"human-signals": "^1.1.1",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.0",
+				"onetime": "^5.1.0",
+				"p-finally": "^2.0.0",
+				"signal-exit": "^3.0.2",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": "^8.12.0 || >=9.7.0"
+			}
+		},
+		"node_modules/lint-staged/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lint-staged/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lint-staged/node_modules/log-symbols": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+			"integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^2.4.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/lint-staged/node_modules/log-symbols/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/lint-staged/node_modules/log-symbols/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/lint-staged/node_modules/log-symbols/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/lint-staged/node_modules/log-symbols/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dev": true,
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/lint-staged/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/lint-staged/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
 			"dev": true,
-			"requires": {
-				"glob": "^7.1.4",
-				"graceful-fs": "^4.2.0",
-				"lazystream": "^1.0.0",
-				"lodash.defaults": "^4.2.0",
-				"lodash.difference": "^4.5.0",
-				"lodash.flatten": "^4.4.0",
-				"lodash.isplainobject": "^4.0.6",
-				"lodash.union": "^4.6.0",
-				"normalize-path": "^3.0.0",
-				"readable-stream": "^2.0.0"
-			},
 			"dependencies": {
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.4",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-					"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				}
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"are-we-there-yet": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz",
-			"integrity": "sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==",
+		"node_modules/lint-staged/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
 			"dev": true,
-			"requires": {
-				"delegates": "^1.0.0",
-				"readable-stream": "^3.6.0"
-			},
 			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"argparse": {
-			"version": "1.0.10",
-			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-			"requires": {
-				"sprintf-js": "~1.0.2"
-			},
-			"dependencies": {
-				"sprintf-js": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-					"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-				}
+		"node_modules/lint-staged/node_modules/p-finally": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
+			"integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"aria-query": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-			"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+		"node_modules/lint-staged/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.10.2",
-				"@babel/runtime-corejs3": "^7.10.2"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"arr-diff": {
+		"node_modules/lint-staged/node_modules/path-type": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-			"integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
-		},
-		"arr-flatten": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-			"integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"arr-union": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-			"integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+		"node_modules/lint-staged/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"array-differ": {
+		"node_modules/lint-staged/node_modules/shebang-regex": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-			"integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"array-find-index": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-			"integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==",
+		"node_modules/lint-staged/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
-			"optional": true
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"array-flatten": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-			"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-			"dev": true
+		"node_modules/lint-staged/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"array-ify": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-			"integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=",
+		"node_modules/listenercount": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+			"integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==",
 			"dev": true
 		},
-		"array-includes": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
-			"integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+		"node_modules/listr": {
+			"version": "0.14.3",
+			"resolved": "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz",
+			"integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.4",
-				"es-abstract": "^1.19.5",
-				"get-intrinsic": "^1.1.1",
-				"is-string": "^1.0.7"
+			"dependencies": {
+				"@samverschueren/stream-to-observable": "^0.3.0",
+				"is-observable": "^1.1.0",
+				"is-promise": "^2.1.0",
+				"is-stream": "^1.1.0",
+				"listr-silent-renderer": "^1.1.1",
+				"listr-update-renderer": "^0.5.0",
+				"listr-verbose-renderer": "^0.5.0",
+				"p-map": "^2.0.0",
+				"rxjs": "^6.3.3"
 			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/listr-silent-renderer": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
+			"integrity": "sha512-L26cIFm7/oZeSNVhWB6faeorXhMg4HNlb/dS/7jHhr708jxlXrtrBWo4YUxZQkc6dGoxEAe6J/D3juTRBUzjtA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/listr-update-renderer": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
+			"integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
+			"dev": true,
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"chalk": "^1.1.3",
+				"cli-truncate": "^0.2.1",
+				"elegant-spinner": "^1.0.1",
+				"figures": "^1.7.0",
+				"indent-string": "^3.0.0",
+				"log-symbols": "^1.0.2",
+				"log-update": "^2.3.0",
+				"strip-ansi": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"peerDependencies": {
+				"listr": "^0.14.2"
 			}
 		},
-		"array-iterate": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/array-iterate/-/array-iterate-1.1.2.tgz",
-			"integrity": "sha512-1hWSHTIlG/8wtYD+PPX5AOBtKWngpDFjrsrHgZpe+JdgNGz0udYu6ZIkAa/xuenIUEqFv7DvE2Yr60jxweJSrQ==",
-			"dev": true
+		"node_modules/listr-update-renderer/node_modules/ansi-regex": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+			"integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"array-union": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-			"integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+		"node_modules/listr-update-renderer/node_modules/ansi-styles": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+			"integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
 			"dev": true,
-			"requires": {
-				"array-uniq": "^1.0.1"
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"array-uniq": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-			"integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-			"dev": true
+		"node_modules/listr-update-renderer/node_modules/chalk": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+			"integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^2.2.1",
+				"escape-string-regexp": "^1.0.2",
+				"has-ansi": "^2.0.0",
+				"strip-ansi": "^3.0.0",
+				"supports-color": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"array-unique": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-			"integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+		"node_modules/listr-update-renderer/node_modules/figures": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
+			"integrity": "sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==",
+			"dev": true,
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5",
+				"object-assign": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"array.prototype.flat": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz",
-			"integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==",
+		"node_modules/listr-update-renderer/node_modules/log-symbols": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+			"integrity": "sha512-mmPrW0Fh2fxOzdBbFv4g1m6pR72haFLPJ2G5SJEELf1y+iaQrDG6cWCPjy54RHYbZAt7X+ls690Kw62AdWXBzQ==",
 			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.2",
-				"es-abstract": "^1.10.0",
-				"function-bind": "^1.1.1"
+			"dependencies": {
+				"chalk": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"array.prototype.flatmap": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
-			"integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+		"node_modules/listr-update-renderer/node_modules/strip-ansi": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+			"integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.2",
-				"es-shim-unscopables": "^1.0.0"
+			"dependencies": {
+				"ansi-regex": "^2.0.0"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/listr-update-renderer/node_modules/supports-color": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+			"integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/listr-verbose-renderer": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
+			"integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+			"dev": true,
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"chalk": "^2.4.1",
+				"cli-cursor": "^2.1.0",
+				"date-fns": "^1.27.2",
+				"figures": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"array.prototype.map": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/array.prototype.map/-/array.prototype.map-1.0.4.tgz",
-			"integrity": "sha512-Qds9QnX7A0qISY7JT5WuJO0NJPE9CMlC6JzHQfhpqAAQQzufVRoeH7EzUY5GcPTx72voG8LV/5eo+b8Qi8hmhA==",
+		"node_modules/listr-verbose-renderer/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.0",
-				"es-array-method-boxes-properly": "^1.0.0",
-				"is-string": "^1.0.7"
+			"dependencies": {
+				"color-convert": "^1.9.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/listr-verbose-renderer/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/listr-verbose-renderer/node_modules/date-fns": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+			"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
+			"dev": true
+		},
+		"node_modules/listr/node_modules/is-promise": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+			"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+			"dev": true
+		},
+		"node_modules/listr/node_modules/p-map": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+			"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"array.prototype.reduce": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.4.tgz",
-			"integrity": "sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==",
+		"node_modules/load-json-file": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
+			"integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.2",
-				"es-array-method-boxes-properly": "^1.0.0",
-				"is-string": "^1.0.7"
-			},
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"graceful-fs": "^4.1.15",
+				"parse-json": "^5.0.0",
+				"strip-bom": "^4.0.0",
+				"type-fest": "^0.6.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"arrify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-			"integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-			"dev": true
+		"node_modules/loader-runner": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+			"integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4.3.0 <5.0.0 || >=5.10"
+			}
 		},
-		"asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+		"node_modules/loader-utils": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+			"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+			"dependencies": {
+				"big.js": "^5.2.2",
+				"emojis-list": "^3.0.0",
+				"json5": "^2.1.2"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			}
 		},
-		"asn1": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-			"integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
-			"dev": true
+		"node_modules/locate-app": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.1.0.tgz",
+			"integrity": "sha512-rcVo/iLUxrd9d0lrmregK/Z5Y5NCpSwf9KlMbPpOHmKmdxdQY1Fj8NDQ5QymJTryCsBLqwmniFv2f3JKbk9Bvg==",
+			"dev": true,
+			"dependencies": {
+				"n12": "0.4.0",
+				"type-fest": "2.13.0",
+				"userhome": "1.0.0"
+			}
 		},
-		"asn1.js": {
-			"version": "5.4.1",
-			"resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-			"integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+		"node_modules/locate-app/node_modules/type-fest": {
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.13.0.tgz",
+			"integrity": "sha512-lPfAm42MxE4/456+QyIaaVBAwgpJb6xZ8PRu09utnhPdWwcyj9vgy6Sq0Z5yNbJ21EdxB5dRU/Qg8bsyAMtlcw==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^4.0.0",
-				"inherits": "^2.0.1",
-				"minimalistic-assert": "^1.0.0",
-				"safer-buffer": "^2.1.0"
+			"engines": {
+				"node": ">=12.20"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/locate-path": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+			"integrity": "sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==",
 			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				}
+				"p-locate": "^2.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"assert": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-			"integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+		"node_modules/lockfile": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.4.tgz",
+			"integrity": "sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==",
 			"dev": true,
-			"requires": {
-				"object-assign": "^4.1.1",
-				"util": "0.10.3"
-			},
 			"dependencies": {
-				"inherits": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-					"integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
-					"dev": true
-				},
-				"util": {
-					"version": "0.10.3",
-					"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-					"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
-					"dev": true,
-					"requires": {
-						"inherits": "2.0.1"
-					}
-				}
+				"signal-exit": "^3.0.2"
 			}
 		},
-		"assert-plus": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-			"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
+		"node_modules/lodash.clonedeep": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+			"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
 			"dev": true
 		},
-		"assign-symbols": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-			"integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
 		},
-		"ast-types": {
-			"version": "0.14.2",
-			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
-			"integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
-			"requires": {
-				"tslib": "^2.0.1"
-			}
+		"node_modules/lodash.escape": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+			"integrity": "sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw=="
 		},
-		"ast-types-flow": {
-			"version": "0.0.7",
-			"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-			"integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
+		"node_modules/lodash.flatten": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+			"integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
+		},
+		"node_modules/lodash.get": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+			"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
 			"dev": true
 		},
-		"astral-regex": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-			"integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg=="
+		"node_modules/lodash.invokemap": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+			"integrity": "sha512-CfkycNtMqgUlfjfdh2BhKO/ZXrP8ePOX5lEU/g0R3ItJcnuxWDwokMGKx1hWcfOikmyOVx6X9IwWnDGlgKl61w=="
 		},
-		"async-each": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-			"integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-			"dev": true,
-			"optional": true
+		"node_modules/lodash.ismatch": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
+			"integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
+			"dev": true
 		},
-		"async-limiter": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+		"node_modules/lodash.memoize": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+			"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
 		},
-		"asynckit": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-			"dev": true
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
 		},
-		"at-least-node": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-			"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+		"node_modules/lodash.pullall": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/lodash.pullall/-/lodash.pullall-4.2.0.tgz",
+			"integrity": "sha512-VhqxBKH0ZxPpLhiu68YD1KnHmbhQJQctcipvmFnqIBDYzcIHzf3Zpu0tpeOKtR4x76p9yohc506eGdOjTmyIBg=="
+		},
+		"node_modules/lodash.set": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+			"integrity": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==",
 			"dev": true
 		},
-		"atob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz",
-			"integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio="
+		"node_modules/lodash.throttle": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+			"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
 		},
-		"atob-lite": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/atob-lite/-/atob-lite-2.0.0.tgz",
-			"integrity": "sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY=",
-			"dev": true
+		"node_modules/lodash.truncate": {
+			"version": "4.4.2",
+			"resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+			"integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw=="
 		},
-		"autoprefixer": {
-			"version": "10.2.5",
-			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.5.tgz",
-			"integrity": "sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==",
-			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.3",
-				"caniuse-lite": "^1.0.30001196",
-				"colorette": "^1.2.2",
-				"fraction.js": "^4.0.13",
-				"normalize-range": "^0.1.2",
-				"postcss-value-parser": "^4.1.0"
-			},
-			"dependencies": {
-				"browserslist": {
-					"version": "4.16.3",
-					"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz",
-					"integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==",
-					"dev": true,
-					"requires": {
-						"caniuse-lite": "^1.0.30001181",
-						"colorette": "^1.2.1",
-						"electron-to-chromium": "^1.3.649",
-						"escalade": "^3.1.1",
-						"node-releases": "^1.1.70"
-					}
-				},
-				"colorette": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-					"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-					"dev": true
-				},
-				"electron-to-chromium": {
-					"version": "1.3.690",
-					"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.690.tgz",
-					"integrity": "sha512-zPbaSv1c8LUKqQ+scNxJKv01RYFkVVF1xli+b+3Ty8ONujHjAMg+t/COmdZqrtnS1gT+g4hbSodHillymt1Lww==",
-					"dev": true
-				},
-				"node-releases": {
-					"version": "1.1.71",
-					"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
-					"integrity": "sha512-zR6HoT6LrLCRBwukmrVbHv0EpEQjksO6GmFcZQQuCAy139BEsoVKPYnf3jongYW83fAa1torLGYwxxky/p28sg==",
-					"dev": true
-				},
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
-			}
+		"node_modules/lodash.uniq": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+			"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
 		},
-		"autosize": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz",
-			"integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA=="
+		"node_modules/lodash.uniqby": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+			"integrity": "sha512-e/zcLx6CSbmaEgFHCA7BnoQKyCtKMxnuWrJygbwPs/AIn+IMKl66L8/s+wBUn5LRw2pZx3bUHibiV1b6aTWIww=="
 		},
-		"aws-sign2": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-			"integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+		"node_modules/lodash.zip": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/lodash.zip/-/lodash.zip-4.2.0.tgz",
+			"integrity": "sha512-C7IOaBBK/0gMORRBd8OETNx3kmOkgIWIPvyDpZSCTwUrpYmgZwJkjZeOD8ww4xbOUOs4/attY+pciKvadNfFbg==",
 			"dev": true
 		},
-		"aws4": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
-			"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
-			"dev": true
+		"node_modules/log-symbols": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+			"integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+			"dependencies": {
+				"chalk": "^4.1.0",
+				"is-unicode-supported": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"axe-core": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz",
-			"integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==",
-			"dev": true
+		"node_modules/log-update": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
+			"integrity": "sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==",
+			"dev": true,
+			"dependencies": {
+				"ansi-escapes": "^3.0.0",
+				"cli-cursor": "^2.0.0",
+				"wrap-ansi": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"axobject-query": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
-			"integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
-			"dev": true
+		"node_modules/log-update/node_modules/ansi-escapes": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+			"integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"babel-core": {
-			"version": "7.0.0-bridge.0",
-			"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
-			"integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
+		"node_modules/log-update/node_modules/ansi-regex": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+			"integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"babel-jest": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.4.5.tgz",
-			"integrity": "sha512-3uuUTjXbgtODmSv/DXO9nZfD52IyC2OYTFaXGRzL0kpykzroaquCrD5+lZNafTvZlnNqZHt5pb0M08qVBZnsnA==",
+		"node_modules/log-update/node_modules/strip-ansi": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+			"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 			"dev": true,
-			"requires": {
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/babel__core": "^7.1.14",
-				"babel-plugin-istanbul": "^6.0.0",
-				"babel-preset-jest": "^27.4.0",
-				"chalk": "^4.0.0",
-				"graceful-fs": "^4.2.4",
-				"slash": "^3.0.0"
-			},
 			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+				"ansi-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"babel-loader": {
-			"version": "8.2.3",
-			"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.3.tgz",
-			"integrity": "sha512-n4Zeta8NC3QAsuyiizu0GkmRcQ6clkV9WFUnUf1iXP//IeSKbWjofW3UHyZVwlOB4y039YQKefawyTn64Zwbuw==",
+		"node_modules/log-update/node_modules/wrap-ansi": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
+			"integrity": "sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==",
 			"dev": true,
-			"requires": {
-				"find-cache-dir": "^3.3.1",
-				"loader-utils": "^1.4.0",
-				"make-dir": "^3.1.0",
-				"schema-utils": "^2.6.5"
+			"dependencies": {
+				"string-width": "^2.1.1",
+				"strip-ansi": "^4.0.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/logform": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/logform/-/logform-2.5.1.tgz",
+			"integrity": "sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==",
+			"dev": true,
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"fast-deep-equal": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-					"dev": true
-				},
-				"find-cache-dir": {
-					"version": "3.3.2",
-					"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-					"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-					"dev": true,
-					"requires": {
-						"commondir": "^1.0.1",
-						"make-dir": "^3.0.2",
-						"pkg-dir": "^4.1.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"make-dir": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-					"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-					"dev": true,
-					"requires": {
-						"semver": "^6.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"schema-utils": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-					"integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.5",
-						"ajv": "^6.12.4",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"@colors/colors": "1.5.0",
+				"@types/triple-beam": "^1.3.2",
+				"fecha": "^4.2.0",
+				"ms": "^2.1.1",
+				"safe-stable-stringify": "^2.3.1",
+				"triple-beam": "^1.3.0"
+			}
+		},
+		"node_modules/logform/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true
+		},
+		"node_modules/logkitty": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/logkitty/-/logkitty-0.7.1.tgz",
+			"integrity": "sha512-/3ER20CTTbahrCrpYfPn7Xavv9diBROZpoXGVZDWMw4b/X4uuUwAC0ki85tgsdMRONURyIJbcOvS94QsUBYPbQ==",
+			"dependencies": {
+				"ansi-fragments": "^0.2.1",
+				"dayjs": "^1.8.15",
+				"yargs": "^15.1.0"
+			},
+			"bin": {
+				"logkitty": "bin/logkitty.js"
+			}
+		},
+		"node_modules/logkitty/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/logkitty/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-plugin-add-react-displayname": {
-			"version": "0.0.5",
-			"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
-			"integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
-			"dev": true
+		"node_modules/logkitty/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"babel-plugin-apply-mdx-type-prop": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.22.tgz",
-			"integrity": "sha512-VefL+8o+F/DfK24lPZMtJctrCVOfgbqLAGZSkxwhazQv4VxPg3Za/i40fu22KR2m8eEda+IfSOlPLUSIiLcnCQ==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "7.10.4",
-				"@mdx-js/util": "1.6.22"
-			},
+		"node_modules/logkitty/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-					"integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
-					"dev": true
-				}
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-plugin-dynamic-import-node": {
-			"version": "2.3.3",
-			"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-			"integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
-			"requires": {
-				"object.assign": "^4.1.0"
-			}
-		},
-		"babel-plugin-emotion": {
-			"version": "10.2.2",
-			"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
-			"integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-module-imports": "^7.0.0",
-				"@emotion/hash": "0.8.0",
-				"@emotion/memoize": "0.7.4",
-				"@emotion/serialize": "^0.11.16",
-				"babel-plugin-macros": "^2.0.0",
-				"babel-plugin-syntax-jsx": "^6.18.0",
-				"convert-source-map": "^1.5.0",
-				"escape-string-regexp": "^1.0.5",
-				"find-root": "^1.1.0",
-				"source-map": "^0.5.7"
-			},
-			"dependencies": {
-				"@emotion/serialize": {
-					"version": "0.11.16",
-					"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-					"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-					"dev": true,
-					"requires": {
-						"@emotion/hash": "0.8.0",
-						"@emotion/memoize": "0.7.4",
-						"@emotion/unitless": "0.7.5",
-						"@emotion/utils": "0.11.3",
-						"csstype": "^2.5.7"
-					}
-				},
-				"@emotion/utils": {
-					"version": "0.11.3",
-					"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-					"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-					"dev": true
-				},
-				"csstype": {
-					"version": "2.6.19",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
-					"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
-					"dev": true
-				}
+		"node_modules/logkitty/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"babel-plugin-extract-import-names": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.22.tgz",
-			"integrity": "sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "7.10.4"
-			},
+		"node_modules/logkitty/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
 			"dependencies": {
-				"@babel/helper-plugin-utils": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-					"integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
-					"dev": true
-				}
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-plugin-inline-json-import": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/babel-plugin-inline-json-import/-/babel-plugin-inline-json-import-0.3.2.tgz",
-			"integrity": "sha512-QNNJx08KjmMT25Cw7rAPQ6dlREDPiZGDyApHL8KQ9vrQHbrr4PTi7W8g1tMMZPz0jEMd39nx/eH7xjnDNxq5sA==",
-			"dev": true,
-			"requires": {
-				"decache": "^4.5.1"
+		"node_modules/logkitty/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"babel-plugin-istanbul": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-			"integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-			"dev": true,
-			"requires": {
-				"@babel/helper-plugin-utils": "^7.0.0",
-				"@istanbuljs/load-nyc-config": "^1.0.0",
-				"@istanbuljs/schema": "^0.1.2",
-				"istanbul-lib-instrument": "^5.0.4",
-				"test-exclude": "^6.0.0"
+		"node_modules/logkitty/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/logkitty/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/logkitty/node_modules/yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
 			"dependencies": {
-				"istanbul-lib-coverage": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-					"integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
-					"dev": true
-				},
-				"istanbul-lib-instrument": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz",
-					"integrity": "sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.12.3",
-						"@babel/parser": "^7.14.7",
-						"@istanbuljs/schema": "^0.1.2",
-						"istanbul-lib-coverage": "^3.2.0",
-						"semver": "^6.3.0"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-plugin-jest-hoist": {
-			"version": "27.4.0",
-			"resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.4.0.tgz",
-			"integrity": "sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==",
-			"dev": true,
-			"requires": {
-				"@babel/template": "^7.3.3",
-				"@babel/types": "^7.3.3",
-				"@types/babel__core": "^7.0.0",
-				"@types/babel__traverse": "^7.0.6"
+		"node_modules/logkitty/node_modules/yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"babel-plugin-macros": {
-			"version": "2.8.0",
-			"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-			"integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-			"requires": {
-				"@babel/runtime": "^7.7.2",
-				"cosmiconfig": "^6.0.0",
-				"resolve": "^1.12.0"
-			},
-			"dependencies": {
-				"cosmiconfig": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-					"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.1.0",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.7.2"
-					}
-				},
-				"parse-json": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-					"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-					"requires": {
-						"@babel/code-frame": "^7.0.0",
-						"error-ex": "^1.3.1",
-						"json-parse-even-better-errors": "^2.3.0",
-						"lines-and-columns": "^1.1.6"
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				}
+		"node_modules/loglevel": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz",
+			"integrity": "sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.6.0"
+			},
+			"funding": {
+				"type": "tidelift",
+				"url": "https://tidelift.com/funding/github/npm/loglevel"
 			}
 		},
-		"babel-plugin-named-exports-order": {
-			"version": "0.0.2",
-			"resolved": "https://registry.npmjs.org/babel-plugin-named-exports-order/-/babel-plugin-named-exports-order-0.0.2.tgz",
-			"integrity": "sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==",
+		"node_modules/loglevel-plugin-prefix": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz",
+			"integrity": "sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g==",
 			"dev": true
 		},
-		"babel-plugin-polyfill-corejs2": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.3.tgz",
-			"integrity": "sha512-NDZ0auNRzmAfE1oDDPW2JhzIMXUk+FFe2ICejmt5T4ocKgiQx3e0VCRx9NCAidcMtL2RUZaWtXnmjTCkx0tcbA==",
-			"requires": {
-				"@babel/compat-data": "^7.13.11",
-				"@babel/helper-define-polyfill-provider": "^0.2.4",
-				"semver": "^6.1.1"
-			},
-			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-				}
-			}
+		"node_modules/longest-streak": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.2.tgz",
+			"integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA=="
 		},
-		"babel-plugin-polyfill-corejs3": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.3.0.tgz",
-			"integrity": "sha512-JLwi9vloVdXLjzACL80j24bG6/T1gYxwowG44dg6HN/7aTPdyPbJJidf6ajoA3RPHHtW0j9KMrSOLpIZpAnPpg==",
-			"requires": {
-				"@babel/helper-define-polyfill-provider": "^0.2.4",
-				"core-js-compat": "^3.18.0"
+		"node_modules/lookup-closest-locale": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz",
+			"integrity": "sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ=="
+		},
+		"node_modules/loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dependencies": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			},
+			"bin": {
+				"loose-envify": "cli.js"
 			}
 		},
-		"babel-plugin-polyfill-regenerator": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.3.tgz",
-			"integrity": "sha512-JVE78oRZPKFIeUqFGrSORNzQnrDwZR16oiWeGM8ZyjBn2XAT5OjP+wXx5ESuo33nUsFUEJYjtklnsKbxW5L+7g==",
-			"requires": {
-				"@babel/helper-define-polyfill-provider": "^0.2.4"
+		"node_modules/lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+			"dependencies": {
+				"tslib": "^2.0.3"
 			}
 		},
-		"babel-plugin-react-docgen": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz",
-			"integrity": "sha512-UQ0NmGHj/HAqi5Bew8WvNfCk8wSsmdgNd8ZdMjBCICtyCJCq9LiqgqvjCYe570/Wg7AQArSq1VQ60Dd/CHN7mQ==",
-			"dev": true,
-			"requires": {
-				"ast-types": "^0.14.2",
-				"lodash": "^4.17.15",
-				"react-docgen": "^5.0.0"
+		"node_modules/lowercase-keys": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+			"integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-plugin-react-native-classname-to-style": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/babel-plugin-react-native-classname-to-style/-/babel-plugin-react-native-classname-to-style-1.2.2.tgz",
-			"integrity": "sha512-kavZRZ56YoYmrwuCRMY0UuCYfMPszoN7v0DLST1D+rTqkl+cFWVW3W8l//AfWsyMNHkY+UTX+RrB5K7GY9mq3w==",
-			"dev": true
+		"node_modules/lru_map": {
+			"version": "0.3.3",
+			"resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.3.3.tgz",
+			"integrity": "sha512-Pn9cox5CsMYngeDbmChANltQl+5pi6XmTrraMSzhPmMBbmgcxmqWry0U3PGapCU1yB4/LqCcom7qhHZiF/jGfQ=="
 		},
-		"babel-plugin-react-native-platform-specific-extensions": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/babel-plugin-react-native-platform-specific-extensions/-/babel-plugin-react-native-platform-specific-extensions-1.1.1.tgz",
-			"integrity": "sha512-ZNN2ImlUlcaPMfzaCw9fWmTc/Ht5ARI0n9RUqiyCdK7LalPJ7yKc+F60BcSHvMHcmA2BgVO8TpSot+dpeZPAMQ==",
-			"dev": true,
-			"requires": {
-				"@babel/template": "^7.0.0-beta.49"
+		"node_modules/lru-cache": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+			"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+			"dependencies": {
+				"pseudomap": "^1.0.2",
+				"yallist": "^2.1.2"
 			}
 		},
-		"babel-plugin-syntax-jsx": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
+		"node_modules/lunr": {
+			"version": "2.3.9",
+			"resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+			"integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
 			"dev": true
 		},
-		"babel-plugin-syntax-trailing-function-commas": {
-			"version": "7.0.0-beta.0",
-			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
-			"integrity": "sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ=="
+		"node_modules/lz-string": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+			"dev": true,
+			"bin": {
+				"lz-string": "bin/bin.js"
+			}
 		},
-		"babel-plugin-transform-remove-console": {
-			"version": "6.9.4",
-			"resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
-			"integrity": "sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=",
-			"dev": true
+		"node_modules/macos-release": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.2.0.tgz",
+			"integrity": "sha512-iV2IDxZaX8dIcM7fG6cI46uNmHUxHE4yN+Z8tKHAW1TBPMZDIKHf/3L+YnOuj/FK9il14UaVdHmiQ1tsi90ltA==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"babel-preset-current-node-syntax": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-			"integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
+		"node_modules/magic-string": {
+			"version": "0.30.7",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+			"integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
 			"dev": true,
-			"requires": {
-				"@babel/plugin-syntax-async-generators": "^7.8.4",
-				"@babel/plugin-syntax-bigint": "^7.8.3",
-				"@babel/plugin-syntax-class-properties": "^7.8.3",
-				"@babel/plugin-syntax-import-meta": "^7.8.3",
-				"@babel/plugin-syntax-json-strings": "^7.8.3",
-				"@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-				"@babel/plugin-syntax-numeric-separator": "^7.8.3",
-				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-				"@babel/plugin-syntax-optional-chaining": "^7.8.3",
-				"@babel/plugin-syntax-top-level-await": "^7.8.3"
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"babel-preset-fbjs": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.4.0.tgz",
-			"integrity": "sha512-9ywCsCvo1ojrw0b+XYk7aFvTH6D9064t0RIL1rtMf3nsa02Xw41MS7sZw216Im35xj/UY0PDBQsa1brUDDF1Ow==",
-			"requires": {
-				"@babel/plugin-proposal-class-properties": "^7.0.0",
-				"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-				"@babel/plugin-syntax-class-properties": "^7.0.0",
-				"@babel/plugin-syntax-flow": "^7.0.0",
-				"@babel/plugin-syntax-jsx": "^7.0.0",
-				"@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-				"@babel/plugin-transform-arrow-functions": "^7.0.0",
-				"@babel/plugin-transform-block-scoped-functions": "^7.0.0",
-				"@babel/plugin-transform-block-scoping": "^7.0.0",
-				"@babel/plugin-transform-classes": "^7.0.0",
-				"@babel/plugin-transform-computed-properties": "^7.0.0",
-				"@babel/plugin-transform-destructuring": "^7.0.0",
-				"@babel/plugin-transform-flow-strip-types": "^7.0.0",
-				"@babel/plugin-transform-for-of": "^7.0.0",
-				"@babel/plugin-transform-function-name": "^7.0.0",
-				"@babel/plugin-transform-literals": "^7.0.0",
-				"@babel/plugin-transform-member-expression-literals": "^7.0.0",
-				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
-				"@babel/plugin-transform-object-super": "^7.0.0",
-				"@babel/plugin-transform-parameters": "^7.0.0",
-				"@babel/plugin-transform-property-literals": "^7.0.0",
-				"@babel/plugin-transform-react-display-name": "^7.0.0",
-				"@babel/plugin-transform-react-jsx": "^7.0.0",
-				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
-				"@babel/plugin-transform-spread": "^7.0.0",
-				"@babel/plugin-transform-template-literals": "^7.0.0",
-				"babel-plugin-syntax-trailing-function-commas": "^7.0.0-beta.0"
+		"node_modules/make-dir": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
+			"integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"babel-preset-jest": {
-			"version": "27.4.0",
-			"resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.4.0.tgz",
-			"integrity": "sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==",
-			"dev": true,
-			"requires": {
-				"babel-plugin-jest-hoist": "^27.4.0",
-				"babel-preset-current-node-syntax": "^1.0.0"
+		"node_modules/make-dir/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"bail": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.3.tgz",
-			"integrity": "sha512-1X8CnjFVQ+a+KW36uBNMTU5s8+v5FzeqrP7hTG5aTb4aPreSbZJlhwPon9VKMuEVgV++JM+SQrALY3kr7eswdg==",
+		"node_modules/make-error": {
+			"version": "1.3.6",
+			"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+			"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
 			"dev": true
 		},
-		"balanced-match": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-			"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
-		},
-		"base": {
-			"version": "0.11.2",
-			"resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-			"integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-			"requires": {
-				"cache-base": "^1.0.1",
-				"class-utils": "^0.3.5",
-				"component-emitter": "^1.2.1",
-				"define-property": "^1.0.0",
-				"isobject": "^3.0.1",
-				"mixin-deep": "^1.2.0",
-				"pascalcase": "^0.1.1"
-			},
+		"node_modules/make-fetch-happen": {
+			"version": "11.1.1",
+			"resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-11.1.1.tgz",
+			"integrity": "sha512-rLWS7GCSTcEujjVBs2YqG7Y4643u8ucvCJeSRqiLYhesrDuzeuFIk37xREzAsfQaqzl8b9rNCE4m6J8tvX4Q8w==",
+			"dev": true,
 			"dependencies": {
-				"define-property": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-					"integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-					"requires": {
-						"is-descriptor": "^1.0.0"
-					}
-				},
-				"is-accessor-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-					"integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-data-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-					"integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-descriptor": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-					"integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-					"requires": {
-						"is-accessor-descriptor": "^1.0.0",
-						"is-data-descriptor": "^1.0.0",
-						"kind-of": "^6.0.2"
-					}
-				}
+				"agentkeepalive": "^4.2.1",
+				"cacache": "^17.0.0",
+				"http-cache-semantics": "^4.1.1",
+				"http-proxy-agent": "^5.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"is-lambda": "^1.0.1",
+				"lru-cache": "^7.7.1",
+				"minipass": "^5.0.0",
+				"minipass-fetch": "^3.0.0",
+				"minipass-flush": "^1.0.5",
+				"minipass-pipeline": "^1.2.4",
+				"negotiator": "^0.6.3",
+				"promise-retry": "^2.0.1",
+				"socks-proxy-agent": "^7.0.0",
+				"ssri": "^10.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"base64-js": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
-			"integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
+		"node_modules/make-fetch-happen/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
 		},
-		"batch": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-			"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-			"dev": true
+		"node_modules/make-fetch-happen/node_modules/cacache": {
+			"version": "17.1.4",
+			"resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
+			"integrity": "sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==",
+			"dev": true,
+			"dependencies": {
+				"@npmcli/fs": "^3.1.0",
+				"fs-minipass": "^3.0.0",
+				"glob": "^10.2.2",
+				"lru-cache": "^7.7.1",
+				"minipass": "^7.0.3",
+				"minipass-collect": "^1.0.2",
+				"minipass-flush": "^1.0.5",
+				"minipass-pipeline": "^1.2.4",
+				"p-map": "^4.0.0",
+				"ssri": "^10.0.0",
+				"tar": "^6.1.11",
+				"unique-filename": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"batch-processor": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-			"integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==",
-			"dev": true
+		"node_modules/make-fetch-happen/node_modules/cacache/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
 		},
-		"bcrypt-pbkdf": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-			"integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+		"node_modules/make-fetch-happen/node_modules/fs-minipass": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+			"integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"tweetnacl": "^0.14.3"
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"before-after-hook": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-1.4.0.tgz",
-			"integrity": "sha512-l5r9ir56nda3qu14nAXIlyq1MmUSs0meCIaFAh8HwkFwP1F8eToOuS3ah2VAHHcY04jaYD7FpJC5JTXHYRbkzg==",
-			"dev": true
+		"node_modules/make-fetch-happen/node_modules/fs-minipass/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
 		},
-		"benchmark": {
-			"version": "2.1.4",
-			"resolved": "https://registry.npmjs.org/benchmark/-/benchmark-2.1.4.tgz",
-			"integrity": "sha1-CfPeMckWQl1JjMLuVloOvzwqVik=",
+		"node_modules/make-fetch-happen/node_modules/glob": {
+			"version": "10.4.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/make-fetch-happen/node_modules/glob/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
-			"requires": {
-				"lodash": "^4.17.4",
-				"platform": "^1.3.3"
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"better-opn": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/better-opn/-/better-opn-2.1.1.tgz",
-			"integrity": "sha512-kIPXZS5qwyKiX/HcRvDYfmBQUa8XP17I0mYZZ0y4UhpYOSvtsLHDYqmomS+Mj20aDvD3knEiQ0ecQy2nhio3yA==",
+		"node_modules/make-fetch-happen/node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
 			"dev": true,
-			"requires": {
-				"open": "^7.0.3"
-			},
+			"license": "BlueOak-1.0.0",
 			"dependencies": {
-				"is-wsl": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0"
-					}
-				},
-				"open": {
-					"version": "7.4.2",
-					"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-					"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0",
-						"is-wsl": "^2.1.1"
-					}
-				}
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
 			}
 		},
-		"big-integer": {
-			"version": "1.6.48",
-			"resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
-			"integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
+		"node_modules/make-fetch-happen/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"big.js": {
-			"version": "5.2.2",
-			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-			"dev": true
+		"node_modules/make-fetch-happen/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
 		},
-		"bin-links": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/bin-links/-/bin-links-3.0.3.tgz",
-			"integrity": "sha512-zKdnMPWEdh4F5INR07/eBrodC7QrF5JKvqskjz/ZZRXg5YSAZIbn8zGhbhUrElzHBZ2fvEQdOU59RHcTG3GiwA==",
-			"dev": true,
-			"requires": {
-				"cmd-shim": "^5.0.0",
-				"mkdirp-infer-owner": "^2.0.0",
-				"npm-normalize-package-bin": "^2.0.0",
-				"read-cmd-shim": "^3.0.0",
-				"rimraf": "^3.0.0",
-				"write-file-atomic": "^4.0.0"
-			},
-			"dependencies": {
-				"npm-normalize-package-bin": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-					"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-					"integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"signal-exit": "^3.0.7"
-					}
-				}
+		"node_modules/make-fetch-happen/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"binary": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
-			"integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",
+		"node_modules/make-fetch-happen/node_modules/ssri": {
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 			"dev": true,
-			"requires": {
-				"buffers": "~0.1.1",
-				"chainsaw": "~0.1.0"
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"binary-extensions": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true
+		"node_modules/make-fetch-happen/node_modules/ssri/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
 		},
-		"bindings": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-			"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+		"node_modules/make-fetch-happen/node_modules/unique-filename": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
+			"integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"file-uri-to-path": "1.0.0"
+			"dependencies": {
+				"unique-slug": "^4.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"bl": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-			"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+		"node_modules/make-fetch-happen/node_modules/unique-slug": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
+			"integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
 			"dev": true,
-			"requires": {
-				"buffer": "^5.5.0",
-				"inherits": "^2.0.4",
-				"readable-stream": "^3.4.0"
+			"dependencies": {
+				"imurmurhash": "^0.1.4"
 			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/makeerror": {
+			"version": "1.0.12",
+			"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+			"integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
 			"dependencies": {
-				"base64-js": {
-					"version": "1.5.1",
-					"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-					"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-					"dev": true
-				},
-				"buffer": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-					"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-					"dev": true,
-					"requires": {
-						"base64-js": "^1.3.1",
-						"ieee754": "^1.1.13"
-					}
-				},
-				"ieee754": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-					"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-					"dev": true
-				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+				"tmpl": "1.0.5"
 			}
 		},
-		"bn.js": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-			"integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==",
+		"node_modules/map-cache": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+			"integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/map-obj": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+			"integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/map-or-similar": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
+			"integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
 			"dev": true
 		},
-		"body-parser": {
-			"version": "1.19.0",
-			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-			"integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+		"node_modules/map-values": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/map-values/-/map-values-1.0.1.tgz",
+			"integrity": "sha512-BbShUnr5OartXJe1GeccAWtfro11hhgNJg6G9/UtWKjVGvV5U4C09cg5nk8JUevhXODaXY+hQ3xxMUKSs62ONQ=="
+		},
+		"node_modules/map-visit": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+			"integrity": "sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==",
 			"dev": true,
-			"requires": {
-				"bytes": "3.1.0",
-				"content-type": "~1.0.4",
-				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"http-errors": "1.7.2",
-				"iconv-lite": "0.4.24",
-				"on-finished": "~2.3.0",
-				"qs": "6.7.0",
-				"raw-body": "2.4.0",
-				"type-is": "~1.6.17"
+			"dependencies": {
+				"object-visit": "^1.0.0"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/markdown-builder": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/markdown-builder/-/markdown-builder-0.9.0.tgz",
+			"integrity": "sha512-UovCyEEzMeKE7l88fbOk9SIJkOG7KXkg+TdudN8rvOtCtBO5uu1X27HSnM7LS/xH+vaShJLGpkBcYYcojWNx/g==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"http-errors": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				},
-				"qs": {
-					"version": "6.7.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-					"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-					"dev": true
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
-				}
+				"husky": "^1.0.0-rc.14"
 			}
 		},
-		"body-scroll-lock": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
-			"integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg=="
+		"node_modules/markdown-builder/node_modules/cosmiconfig": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+			"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+			"dev": true,
+			"dependencies": {
+				"import-fresh": "^2.0.0",
+				"is-directory": "^0.3.1",
+				"js-yaml": "^3.13.1",
+				"parse-json": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"bonjour": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-			"integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
-			"dev": true,
-			"requires": {
-				"array-flatten": "^2.1.0",
-				"deep-equal": "^1.0.1",
-				"dns-equal": "^1.0.0",
-				"dns-txt": "^2.0.2",
-				"multicast-dns": "^6.0.1",
-				"multicast-dns-service-types": "^1.1.0"
-			},
-			"dependencies": {
-				"array-flatten": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-					"integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-					"dev": true
-				}
+		"node_modules/markdown-builder/node_modules/cross-spawn": {
+			"version": "6.0.5",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+			"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+			"dev": true,
+			"dependencies": {
+				"nice-try": "^1.0.4",
+				"path-key": "^2.0.1",
+				"semver": "^5.5.0",
+				"shebang-command": "^1.2.0",
+				"which": "^1.2.9"
+			},
+			"engines": {
+				"node": ">=4.8"
 			}
 		},
-		"boolbase": {
+		"node_modules/markdown-builder/node_modules/execa": {
 			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-			"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
-		},
-		"boxen": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/boxen/-/boxen-5.1.2.tgz",
-			"integrity": "sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+			"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
 			"dev": true,
-			"requires": {
-				"ansi-align": "^3.0.0",
-				"camelcase": "^6.2.0",
-				"chalk": "^4.1.0",
-				"cli-boxes": "^2.2.1",
-				"string-width": "^4.2.2",
-				"type-fest": "^0.20.2",
-				"widest-line": "^3.1.0",
-				"wrap-ansi": "^7.0.0"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"camelcase": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-					"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-					"dev": true
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"type-fest": {
-					"version": "0.20.2",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-					"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-					"dev": true
-				},
-				"wrap-ansi": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				}
+				"cross-spawn": "^6.0.0",
+				"get-stream": "^4.0.0",
+				"is-stream": "^1.1.0",
+				"npm-run-path": "^2.0.0",
+				"p-finally": "^1.0.0",
+				"signal-exit": "^3.0.0",
+				"strip-eof": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"bplist-creator": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.1.0.tgz",
-			"integrity": "sha512-sXaHZicyEEmY86WyueLTQesbeoH/mquvarJaQNbjuOQO+7gbFcDEWqKmcWA4cOTLzFlfgvkiVxolk1k5bBIpmg==",
-			"requires": {
-				"stream-buffers": "2.2.x"
+		"node_modules/markdown-builder/node_modules/find-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+			"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"requires": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
+		"node_modules/markdown-builder/node_modules/get-stdin": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
+			"integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"braces": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-			"integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-			"requires": {
-				"arr-flatten": "^1.1.0",
-				"array-unique": "^0.3.2",
-				"extend-shallow": "^2.0.1",
-				"fill-range": "^4.0.0",
-				"isobject": "^3.0.1",
-				"repeat-element": "^1.1.2",
-				"snapdragon": "^0.8.1",
-				"snapdragon-node": "^2.0.1",
-				"split-string": "^3.0.2",
-				"to-regex": "^3.0.1"
+		"node_modules/markdown-builder/node_modules/get-stream": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+			"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+			"dev": true,
+			"dependencies": {
+				"pump": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/markdown-builder/node_modules/husky": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/husky/-/husky-1.3.1.tgz",
+			"integrity": "sha512-86U6sVVVf4b5NYSZ0yvv88dRgBSSXXmHaiq5pP4KDj5JVzdwKgBjEtUPOm8hcoytezFwbU+7gotXNhpHdystlg==",
+			"dev": true,
+			"hasInstallScript": true,
 			"dependencies": {
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				}
+				"cosmiconfig": "^5.0.7",
+				"execa": "^1.0.0",
+				"find-up": "^3.0.0",
+				"get-stdin": "^6.0.0",
+				"is-ci": "^2.0.0",
+				"pkg-dir": "^3.0.0",
+				"please-upgrade-node": "^3.1.1",
+				"read-pkg": "^4.0.1",
+				"run-node": "^1.0.0",
+				"slash": "^2.0.0"
+			},
+			"bin": {
+				"husky-upgrade": "lib/upgrader/bin.js"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"brorand": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-			"integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
-			"dev": true
+		"node_modules/markdown-builder/node_modules/import-fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+			"integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
+			"dev": true,
+			"dependencies": {
+				"caller-path": "^2.0.0",
+				"resolve-from": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"browser-assert": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
-			"integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
-			"dev": true
+		"node_modules/markdown-builder/node_modules/locate-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+			"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^3.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"browser-process-hrtime": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-			"integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
-			"dev": true
+		"node_modules/markdown-builder/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"browserify-aes": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-			"integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+		"node_modules/markdown-builder/node_modules/p-locate": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+			"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
 			"dev": true,
-			"requires": {
-				"buffer-xor": "^1.0.3",
-				"cipher-base": "^1.0.0",
-				"create-hash": "^1.1.0",
-				"evp_bytestokey": "^1.0.3",
-				"inherits": "^2.0.1",
-				"safe-buffer": "^5.0.1"
+			"dependencies": {
+				"p-limit": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"browserify-cipher": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-			"integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+		"node_modules/markdown-builder/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
 			"dev": true,
-			"requires": {
-				"browserify-aes": "^1.0.4",
-				"browserify-des": "^1.0.0",
-				"evp_bytestokey": "^1.0.0"
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"browserify-des": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-			"integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+		"node_modules/markdown-builder/node_modules/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
 			"dev": true,
-			"requires": {
-				"cipher-base": "^1.0.1",
-				"des.js": "^1.0.0",
-				"inherits": "^2.0.1",
-				"safe-buffer": "^5.1.2"
+			"dependencies": {
+				"error-ex": "^1.3.1",
+				"json-parse-better-errors": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"browserify-rsa": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-			"integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+		"node_modules/markdown-builder/node_modules/pify": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+			"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^5.0.0",
-				"randombytes": "^2.0.1"
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"browserify-sign": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
-			"integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+		"node_modules/markdown-builder/node_modules/pkg-dir": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+			"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^5.1.1",
-				"browserify-rsa": "^4.0.1",
-				"create-hash": "^1.2.0",
-				"create-hmac": "^1.1.7",
-				"elliptic": "^6.5.3",
-				"inherits": "^2.0.4",
-				"parse-asn1": "^5.1.5",
-				"readable-stream": "^3.6.0",
-				"safe-buffer": "^5.2.0"
+			"dependencies": {
+				"find-up": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/markdown-builder/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/markdown-builder/node_modules/read-pkg": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
+			"integrity": "sha512-+UBirHHDm5J+3WDmLBZYSklRYg82nMlz+enn+GMZ22nSR2f4bzxmhso6rzQW/3mT2PVzpzDTiYIZahk8UmZ44w==",
+			"dev": true,
 			"dependencies": {
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"safe-buffer": {
-					"version": "5.2.1",
-					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-					"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-					"dev": true
-				}
+				"normalize-package-data": "^2.3.2",
+				"parse-json": "^4.0.0",
+				"pify": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"browserify-zlib": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-			"integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+		"node_modules/markdown-builder/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
 			"dev": true,
-			"requires": {
-				"pako": "~1.0.5"
+			"bin": {
+				"semver": "bin/semver"
 			}
 		},
-		"browserslist": {
-			"version": "4.17.6",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.6.tgz",
-			"integrity": "sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw==",
-			"requires": {
-				"caniuse-lite": "^1.0.30001274",
-				"electron-to-chromium": "^1.3.886",
-				"escalade": "^3.1.1",
-				"node-releases": "^2.0.1",
-				"picocolors": "^1.0.0"
-			},
+		"node_modules/markdown-builder/node_modules/slash": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+			"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/markdown-escapes": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz",
+			"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA=="
+		},
+		"node_modules/markdown-it": {
+			"version": "12.3.2",
+			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+			"integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
 			"dependencies": {
-				"electron-to-chromium": {
-					"version": "1.3.889",
-					"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.889.tgz",
-					"integrity": "sha512-suEUoPTD1mExjL9TdmH7cvEiWJVM2oEiAi+Y1p0QKxI2HcRlT44qDTP2c1aZmVwRemIPYOpxmV7CxQCOWcm4XQ=="
-				},
-				"node-releases": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-					"integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
-				}
+				"argparse": "^2.0.1",
+				"entities": "~2.1.0",
+				"linkify-it": "^3.0.1",
+				"mdurl": "^1.0.1",
+				"uc.micro": "^1.0.5"
+			},
+			"bin": {
+				"markdown-it": "bin/markdown-it.js"
 			}
 		},
-		"bser": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/bser/-/bser-2.0.0.tgz",
-			"integrity": "sha1-mseNPtXZFYBP2HrLFYvHlxR6Fxk=",
-			"requires": {
-				"node-int64": "^0.4.0"
+		"node_modules/markdown-it/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/markdown-it/node_modules/entities": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+			"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
-		"btoa-lite": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/btoa-lite/-/btoa-lite-1.0.0.tgz",
-			"integrity": "sha1-M3dm2hWAEhD92VbCLpxokaudAzc=",
-			"dev": true
+		"node_modules/markdown-table": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.3.tgz",
+			"integrity": "sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q=="
 		},
-		"buffer": {
-			"version": "4.9.2",
-			"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-			"integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+		"node_modules/markdown-to-jsx": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz",
+			"integrity": "sha512-GbrbkTnHp9u6+HqbPRFJbObi369AgJNXi/sGqq5HRsoZW063xR1XDCaConqq+whfEIAlzB1YPnOgsPc7B7bc/A==",
 			"dev": true,
-			"requires": {
-				"base64-js": "^1.0.2",
-				"ieee754": "^1.1.4",
-				"isarray": "^1.0.0"
+			"engines": {
+				"node": ">= 10"
+			},
+			"peerDependencies": {
+				"react": ">= 0.14.0"
 			}
 		},
-		"buffer-crc32": {
-			"version": "0.2.13",
-			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-			"integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-			"dev": true
+		"node_modules/markdownlint": {
+			"version": "0.25.1",
+			"resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.25.1.tgz",
+			"integrity": "sha512-AG7UkLzNa1fxiOv5B+owPsPhtM4D6DoODhsJgiaNg1xowXovrYgOnLqAgOOFQpWOlHFVQUzjMY5ypNNTeov92g==",
+			"dependencies": {
+				"markdown-it": "12.3.2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"buffer-from": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
-			"integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ=="
+		"node_modules/markdownlint-cli": {
+			"version": "0.31.1",
+			"resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.31.1.tgz",
+			"integrity": "sha512-keIOMwQn+Ch7MoBwA+TdkyVMuxAeZFEGmIIlvwgV0Z1TGS5MxPnRr29XCLhkNzCHU+uNKGjU+VEjLX+Z9kli6g==",
+			"dependencies": {
+				"commander": "~9.0.0",
+				"get-stdin": "~9.0.0",
+				"glob": "~7.2.0",
+				"ignore": "~5.2.0",
+				"js-yaml": "^4.1.0",
+				"jsonc-parser": "~3.0.0",
+				"markdownlint": "~0.25.1",
+				"markdownlint-rule-helpers": "~0.16.0",
+				"minimatch": "~3.0.5",
+				"run-con": "~1.2.10"
+			},
+			"bin": {
+				"markdownlint": "markdownlint.js"
+			},
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"buffer-indexof": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-			"integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
-			"dev": true
+		"node_modules/markdownlint-cli/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
 		},
-		"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
+		"node_modules/markdownlint-cli/node_modules/commander": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-9.0.0.tgz",
+			"integrity": "sha512-JJfP2saEKbQqvW+FI93OYUB4ByV5cizMpFMiiJI8xDbBvQvSkIk0VvQdn1CZ8mqAO8Loq2h0gYTYtDFUZUeERw==",
+			"engines": {
+				"node": "^12.20.0 || >=14"
+			}
 		},
-		"buffer-xor": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-			"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
-			"dev": true
+		"node_modules/markdownlint-cli/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
 		},
-		"buffers": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-			"integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
-			"dev": true
+		"node_modules/markdownlint-cli/node_modules/glob/node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
 		},
-		"builtin-modules": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-			"integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
-			"dev": true
+		"node_modules/markdownlint-cli/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
 		},
-		"builtin-status-codes": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-			"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
-			"dev": true
+		"node_modules/markdownlint-cli/node_modules/minimatch": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+			"integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
 		},
-		"builtins": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz",
-			"integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=",
-			"dev": true
+		"node_modules/markdownlint-rule-helpers": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.16.0.tgz",
+			"integrity": "sha512-oEacRUVeTJ5D5hW1UYd2qExYI0oELdYK72k1TKGvIeYJIbqQWAz476NAc7LNixSySUhcNl++d02DvX0ccDk9/w=="
 		},
-		"byte-size": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/byte-size/-/byte-size-7.0.1.tgz",
-			"integrity": "sha512-crQdqyCwhokxwV1UyDzLZanhkugAgft7vt0qbbdt60C6Zf3CAiGmtUCylbtYwrU6loOUw3euGrNtW1J651ot1A==",
-			"dev": true
+		"node_modules/marked": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+			"integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+			"dev": true,
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
 		},
-		"bytes": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-			"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-			"dev": true
+		"node_modules/marky": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/marky/-/marky-1.2.5.tgz",
+			"integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q=="
 		},
-		"c8": {
-			"version": "7.11.3",
-			"resolved": "https://registry.npmjs.org/c8/-/c8-7.11.3.tgz",
-			"integrity": "sha512-6YBmsaNmqRm9OS3ZbIiL2EZgi1+Xc4O24jL3vMYGE6idixYuGdy76rIfIdltSKDj9DpLNrcXSonUTR1miBD0wA==",
+		"node_modules/mathjs": {
+			"version": "10.6.4",
+			"resolved": "https://registry.npmjs.org/mathjs/-/mathjs-10.6.4.tgz",
+			"integrity": "sha512-omQyvRE1jIy+3k2qsqkWASOcd45aZguXZDckr3HtnTYyXk5+2xpVfC3kATgbO2Srjxlqww3TVdhD0oUdZ/hiFA==",
 			"dev": true,
-			"requires": {
-				"@bcoe/v8-coverage": "^0.2.3",
-				"@istanbuljs/schema": "^0.1.3",
-				"find-up": "^5.0.0",
-				"foreground-child": "^2.0.0",
-				"istanbul-lib-coverage": "^3.2.0",
-				"istanbul-lib-report": "^3.0.0",
-				"istanbul-reports": "^3.1.4",
-				"rimraf": "^3.0.2",
-				"test-exclude": "^6.0.0",
-				"v8-to-istanbul": "^9.0.0",
-				"yargs": "^16.2.0",
-				"yargs-parser": "^20.2.9"
-			},
 			"dependencies": {
-				"@istanbuljs/schema": {
-					"version": "0.1.3",
-					"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-					"integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-					"dev": true
-				},
-				"convert-source-map": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-					"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "~5.1.1"
-					}
-				},
-				"find-up": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-					"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^6.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"istanbul-lib-coverage": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz",
-					"integrity": "sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==",
-					"dev": true
-				},
-				"istanbul-reports": {
-					"version": "3.1.4",
-					"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.4.tgz",
-					"integrity": "sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==",
-					"dev": true,
-					"requires": {
-						"html-escaper": "^2.0.0",
-						"istanbul-lib-report": "^3.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-					"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^5.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"p-locate": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-					"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^3.0.2"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"v8-to-istanbul": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.0.0.tgz",
-					"integrity": "sha512-HcvgY/xaRm7isYmyx+lFKA4uQmfUbN0J4M0nNItvzTvH/iQ9kW5j/t4YSR+Ge323/lrgDAWJoF46tzGQHwBHFw==",
-					"dev": true,
-					"requires": {
-						"@jridgewell/trace-mapping": "^0.3.7",
-						"@types/istanbul-lib-coverage": "^2.0.1",
-						"convert-source-map": "^1.6.0"
-					}
-				}
+				"@babel/runtime": "^7.18.6",
+				"complex.js": "^2.1.1",
+				"decimal.js": "^10.3.1",
+				"escape-latex": "^1.2.0",
+				"fraction.js": "^4.2.0",
+				"javascript-natural-sort": "^0.7.1",
+				"seedrandom": "^3.0.5",
+				"tiny-emitter": "^2.1.0",
+				"typed-function": "^2.1.0"
+			},
+			"bin": {
+				"mathjs": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"cacache": {
-			"version": "12.0.4",
-			"resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-			"integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+		"node_modules/mathml-tag-names": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+			"integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/md5.js": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+			"integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
 			"dev": true,
-			"requires": {
-				"bluebird": "^3.5.5",
-				"chownr": "^1.1.1",
-				"figgy-pudding": "^3.5.1",
-				"glob": "^7.1.4",
-				"graceful-fs": "^4.1.15",
-				"infer-owner": "^1.0.3",
-				"lru-cache": "^5.1.1",
-				"mississippi": "^3.0.0",
-				"mkdirp": "^0.5.1",
-				"move-concurrently": "^1.0.1",
-				"promise-inflight": "^1.0.1",
-				"rimraf": "^2.6.3",
-				"ssri": "^6.0.1",
-				"unique-filename": "^1.1.1",
-				"y18n": "^4.0.0"
-			},
 			"dependencies": {
-				"bluebird": {
-					"version": "3.7.2",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-					"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-					"dev": true
-				},
-				"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"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.6",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-					"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-					"dev": true
-				},
-				"lru-cache": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-					"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-					"dev": true,
-					"requires": {
-						"yallist": "^3.0.2"
-					}
-				},
-				"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"
-					}
-				},
-				"yallist": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-					"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-					"dev": true
-				}
+				"hash-base": "^3.0.0",
+				"inherits": "^2.0.1",
+				"safe-buffer": "^5.1.2"
 			}
 		},
-		"cache-base": {
+		"node_modules/mdast-util-compact": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-			"integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-			"requires": {
-				"collection-visit": "^1.0.0",
-				"component-emitter": "^1.2.1",
-				"get-value": "^2.0.6",
-				"has-value": "^1.0.0",
-				"isobject": "^3.0.1",
-				"set-value": "^2.0.0",
-				"to-object-path": "^0.3.0",
-				"union-value": "^1.0.0",
-				"unset-value": "^1.0.0"
+			"resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.1.tgz",
+			"integrity": "sha1-zbX4TitqLTEU3zO9BdnLMuPECDo=",
+			"dependencies": {
+				"unist-util-modify-children": "^1.0.0",
+				"unist-util-visit": "^1.1.0"
 			}
 		},
-		"cacheable-lookup": {
-			"version": "5.0.4",
-			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
-			"integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
-			"dev": true
-		},
-		"cacheable-request": {
-			"version": "7.0.2",
-			"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz",
-			"integrity": "sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==",
+		"node_modules/mdast-util-definitions": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
+			"integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
 			"dev": true,
-			"requires": {
-				"clone-response": "^1.0.2",
-				"get-stream": "^5.1.0",
-				"http-cache-semantics": "^4.0.0",
-				"keyv": "^4.0.0",
-				"lowercase-keys": "^2.0.0",
-				"normalize-url": "^6.0.1",
-				"responselike": "^2.0.0"
+			"dependencies": {
+				"unist-util-visit": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"call-bind": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
-			"integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
+		"node_modules/mdast-util-definitions/node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
 			"dev": true,
-			"requires": {
-				"function-bind": "^1.1.1",
-				"get-intrinsic": "^1.0.0"
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"call-me-maybe": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
-			"integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=",
-			"dev": true
-		},
-		"caller-callsite": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-			"integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-			"requires": {
-				"callsites": "^2.0.0"
+		"node_modules/mdast-util-definitions/node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
 			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-definitions/node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+			"dev": true,
 			"dependencies": {
-				"callsites": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-					"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
-				}
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"caller-path": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-			"integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-			"requires": {
-				"caller-callsite": "^2.0.0"
+		"node_modules/mdast-util-inject": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-inject/-/mdast-util-inject-1.1.0.tgz",
+			"integrity": "sha512-CcJ0mHa36QYumDKiZ2OIR+ClhfOM7zIzN+Wfy8tRZ1hpH9DKLCS+Mh4DyK5bCxzE9uxMWcbIpeNFWsg1zrj/2g==",
+			"dependencies": {
+				"mdast-util-to-string": "^1.0.0"
 			}
 		},
-		"callsite": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-			"integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
-			"dev": true
+		"node_modules/mdast-util-to-string": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.0.5.tgz",
+			"integrity": "sha512-2qLt/DEOo5F6nc2VFScQiHPzQ0XXcabquRJxKMhKte8nt42o08HUxNDPk7tt0YPxnWjAT11I1SYi0X0iPnfI5A=="
+		},
+		"node_modules/mdn-data": {
+			"version": "2.0.14",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+		},
+		"node_modules/mdurl": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
 		},
-		"callsites": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.0.0.tgz",
-			"integrity": "sha512-tWnkwu9YEq2uzlBDI4RcLn8jrFvF9AOi8PxDNU3hZZjJcjkcRAq3vCI+vZcg1SuxISDYe86k9VZFwAxDiJGoAw=="
+		"node_modules/media-typer": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
 		},
-		"camel-case": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-			"requires": {
-				"pascal-case": "^3.1.2",
-				"tslib": "^2.0.3"
+		"node_modules/memfs": {
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+			"integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+			"dependencies": {
+				"fs-monkey": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 4.0.0"
 			}
 		},
-		"camelcase": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-			"dev": true
+		"node_modules/memize": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/memize/-/memize-2.1.0.tgz",
+			"integrity": "sha512-yywVJy8ctVlN5lNPxsep5urnZ6TTclwPEyigM9M3Bi8vseJBOfqNrGWN/r8NzuIt3PovM323W04blJfGQfQSVg=="
 		},
-		"camelcase-css": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-			"dev": true
+		"node_modules/memoize-one": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
 		},
-		"camelcase-keys": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-			"integrity": "sha512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ==",
+		"node_modules/memoizerific": {
+			"version": "1.11.3",
+			"resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
+			"integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"camelcase": "^2.0.0",
-				"map-obj": "^1.0.0"
-			},
 			"dependencies": {
-				"camelcase": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-					"integrity": "sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==",
-					"dev": true,
-					"optional": true
-				}
+				"map-or-similar": "^1.5.0"
 			}
 		},
-		"camelize": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
-			"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
-		},
-		"caniuse-api": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-			"integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+		"node_modules/memory-fs": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+			"integrity": "sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.0.0",
-				"caniuse-lite": "^1.0.0",
-				"lodash.memoize": "^4.1.2",
-				"lodash.uniq": "^4.5.0"
+			"dependencies": {
+				"errno": "^0.1.3",
+				"readable-stream": "^2.0.1"
 			}
 		},
-		"caniuse-lite": {
-			"version": "1.0.30001352",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
-			"integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA=="
-		},
-		"capital-case": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
-			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3",
-				"upper-case-first": "^2.0.2"
+		"node_modules/memorystream": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
+			"integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.10.0"
 			}
 		},
-		"capture-exit": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
-			"integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
-			"requires": {
-				"rsvp": "^4.8.4"
+		"node_modules/meow": {
+			"version": "8.1.2",
+			"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
+			"integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==",
+			"dev": true,
+			"dependencies": {
+				"@types/minimist": "^1.2.0",
+				"camelcase-keys": "^6.2.2",
+				"decamelize-keys": "^1.1.0",
+				"hard-rejection": "^2.1.0",
+				"minimist-options": "4.1.0",
+				"normalize-package-data": "^3.0.0",
+				"read-pkg-up": "^7.0.1",
+				"redent": "^3.0.0",
+				"trim-newlines": "^3.0.0",
+				"type-fest": "^0.18.0",
+				"yargs-parser": "^20.2.3"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"case-sensitive-paths-webpack-plugin": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
-			"integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
-			"dev": true
-		},
-		"caseless": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-			"integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-			"dev": true
-		},
-		"ccount": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/ccount/-/ccount-1.0.3.tgz",
-			"integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==",
-			"dev": true
+		"node_modules/meow/node_modules/normalize-package-data": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+			"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^4.0.1",
+				"is-core-module": "^2.5.0",
+				"semver": "^7.3.4",
+				"validate-npm-package-license": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"chainsaw": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
-			"integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",
+		"node_modules/meow/node_modules/type-fest": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+			"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
 			"dev": true,
-			"requires": {
-				"traverse": ">=0.3.0 <0.4"
+			"engines": {
+				"node": ">=10"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/merge-deep": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.3.tgz",
+			"integrity": "sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==",
 			"dependencies": {
-				"traverse": {
-					"version": "0.3.9",
-					"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-					"integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=",
-					"dev": true
-				}
+				"arr-union": "^3.1.0",
+				"clone-deep": "^0.2.4",
+				"kind-of": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"chalk": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-			"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-			"requires": {
-				"ansi-styles": "^4.1.0",
-				"supports-color": "^7.1.0"
+		"node_modules/merge-deep/node_modules/clone-deep": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+			"integrity": "sha512-we+NuQo2DHhSl+DP6jlUiAhyAjBQrYnpOk15rN6c6JSPScjiCLh8IbSU+VTcph6YS3o7mASE8a0+gbZ7ChLpgg==",
+			"dependencies": {
+				"for-own": "^0.1.3",
+				"is-plain-object": "^2.0.1",
+				"kind-of": "^3.0.2",
+				"lazy-cache": "^1.0.3",
+				"shallow-clone": "^0.1.2"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/merge-deep/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
 			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"change-case": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
-			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
-			"requires": {
-				"camel-case": "^4.1.2",
-				"capital-case": "^1.0.4",
-				"constant-case": "^3.0.4",
-				"dot-case": "^3.0.4",
-				"header-case": "^2.0.4",
-				"no-case": "^3.0.4",
-				"param-case": "^3.0.4",
-				"pascal-case": "^3.1.2",
-				"path-case": "^3.0.4",
-				"sentence-case": "^3.0.4",
-				"snake-case": "^3.0.4",
-				"tslib": "^2.0.3"
+		"node_modules/merge-deep/node_modules/kind-of": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+			"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+			"dependencies": {
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"char-regex": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-			"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-			"dev": true
+		"node_modules/merge-deep/node_modules/shallow-clone": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+			"integrity": "sha512-J1zdXCky5GmNnuauESROVu31MQSnLoYvlyEn6j2Ztk6Q5EHFIhxkMhYcv6vuDzl2XEzoRr856QwzMgWM/TmZgw==",
+			"dependencies": {
+				"is-extendable": "^0.1.1",
+				"kind-of": "^2.0.1",
+				"lazy-cache": "^0.2.3",
+				"mixin-object": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"character-entities": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.2.tgz",
-			"integrity": "sha512-sMoHX6/nBiy3KKfC78dnEalnpn0Az0oSNvqUWYTtYrhRI5iUIYsROU48G+E+kMFQzqXaJ8kHJZ85n7y6/PHgwQ==",
-			"dev": true
+		"node_modules/merge-deep/node_modules/shallow-clone/node_modules/kind-of": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+			"integrity": "sha512-0u8i1NZ/mg0b+W3MGGw5I7+6Eib2nx72S/QvXa0hYjEkjTknYmEYQJwGu3mLC0BrhtJjtQafTkyRUQ75Kx0LVg==",
+			"dependencies": {
+				"is-buffer": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"character-entities-html4": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.2.tgz",
-			"integrity": "sha512-sIrXwyna2+5b0eB9W149izTPJk/KkJTg6mEzDGibwBUkyH1SbDa+nf515Ppdi3MaH35lW0JFJDWeq9Luzes1Iw==",
-			"dev": true
+		"node_modules/merge-deep/node_modules/shallow-clone/node_modules/lazy-cache": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+			"integrity": "sha512-gkX52wvU/R8DVMMt78ATVPFMJqfW8FPz1GZ1sVHBVQHmu/WvhIWE4cE1GBzhJNFicDeYhnwp6Rl35BcAIM3YOQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"character-entities-legacy": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.2.tgz",
-			"integrity": "sha512-9NB2VbXtXYWdXzqrvAHykE/f0QJxzaKIpZ5QzNZrrgQ7Iyxr2vnfS8fCBNVW9nUEZE0lo57nxKRqnzY/dKrwlA==",
-			"dev": true
+		"node_modules/merge-descriptors": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+			"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
 		},
-		"character-reference-invalid": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.2.tgz",
-			"integrity": "sha512-7I/xceXfKyUJmSAn/jw8ve/9DyOP7XxufNYLI9Px7CmsKgEUaZLUTax6nZxGQtaoiZCjpu6cHPj20xC/vqRReQ==",
-			"dev": true
+		"node_modules/merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
 		},
-		"charcodes": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz",
-			"integrity": "sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==",
-			"dev": true
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"chardet": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-			"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
-			"dev": true
+		"node_modules/metaviewport-parser": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/metaviewport-parser/-/metaviewport-parser-0.3.0.tgz",
+			"integrity": "sha512-EoYJ8xfjQ6kpe9VbVHvZTZHiOl4HL1Z18CrZ+qahvLXT7ZO4YTC2JMyt5FaUp9JJp6J4Ybb/z7IsCXZt86/QkQ=="
 		},
-		"check-node-version": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/check-node-version/-/check-node-version-4.1.0.tgz",
-			"integrity": "sha512-TSXGsyfW5/xY2QseuJn8/hleO2AU7HxVCdkc900jp1vcfzF840GkjvRT7CHl8sRtWn23n3X3k0cwH9RXeRwhfw==",
+		"node_modules/method-override": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
+			"integrity": "sha512-IJ2NNN/mSl9w3kzWB92rcdHpz+HjkxhDJWNDBqSlas+zQdP8wBiJzITPg08M/k2uVvMow7Sk41atndNtt/PHSA==",
 			"dev": true,
-			"requires": {
-				"chalk": "^3.0.0",
-				"map-values": "^1.0.1",
-				"minimist": "^1.2.0",
-				"object-filter": "^1.0.2",
-				"run-parallel": "^1.1.4",
-				"semver": "^6.3.0"
-			},
 			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"debug": "3.1.0",
+				"methods": "~1.1.2",
+				"parseurl": "~1.3.2",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.10"
 			}
 		},
-		"chokidar": {
-			"version": "3.5.2",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-			"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+		"node_modules/method-override/node_modules/debug": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+			"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
 			"dev": true,
-			"requires": {
-				"anymatch": "~3.1.2",
-				"braces": "~3.0.2",
-				"fsevents": "~2.3.2",
-				"glob-parent": "~5.1.2",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.6.0"
-			},
 			"dependencies": {
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-					"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/methods": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+			"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/metro": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro/-/metro-0.80.5.tgz",
+			"integrity": "sha512-OE/CGbOgbi8BlTN1QqJgKOBaC27dS0JBQw473JcivrpgVnqIsluROA7AavEaTVUrB9wPUZvoNVDROn5uiM2jfw==",
+			"dependencies": {
+				"@babel/code-frame": "^7.0.0",
+				"@babel/core": "^7.20.0",
+				"@babel/generator": "^7.20.0",
+				"@babel/parser": "^7.20.0",
+				"@babel/template": "^7.0.0",
+				"@babel/traverse": "^7.20.0",
+				"@babel/types": "^7.20.0",
+				"accepts": "^1.3.7",
+				"chalk": "^4.0.0",
+				"ci-info": "^2.0.0",
+				"connect": "^3.6.5",
+				"debug": "^2.2.0",
+				"denodeify": "^1.2.1",
+				"error-stack-parser": "^2.0.6",
+				"graceful-fs": "^4.2.4",
+				"hermes-parser": "0.18.2",
+				"image-size": "^1.0.2",
+				"invariant": "^2.2.4",
+				"jest-worker": "^29.6.3",
+				"jsc-safe-url": "^0.2.2",
+				"lodash.throttle": "^4.1.1",
+				"metro-babel-transformer": "0.80.5",
+				"metro-cache": "0.80.5",
+				"metro-cache-key": "0.80.5",
+				"metro-config": "0.80.5",
+				"metro-core": "0.80.5",
+				"metro-file-map": "0.80.5",
+				"metro-resolver": "0.80.5",
+				"metro-runtime": "0.80.5",
+				"metro-source-map": "0.80.5",
+				"metro-symbolicate": "0.80.5",
+				"metro-transform-plugins": "0.80.5",
+				"metro-transform-worker": "0.80.5",
+				"mime-types": "^2.1.27",
+				"node-fetch": "^2.2.0",
+				"nullthrows": "^1.1.1",
+				"rimraf": "^3.0.2",
+				"serialize-error": "^2.1.0",
+				"source-map": "^0.5.6",
+				"strip-ansi": "^6.0.0",
+				"throat": "^5.0.0",
+				"ws": "^7.5.1",
+				"yargs": "^17.6.2"
+			},
+			"bin": {
+				"metro": "src/cli.js"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"chownr": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-			"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-			"dev": true
+		"node_modules/metro-babel-transformer": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.80.5.tgz",
+			"integrity": "sha512-sxH6hcWCorhTbk4kaShCWsadzu99WBL4Nvq4m/sDTbp32//iGuxtAnUK+ZV+6IEygr2u9Z0/4XoZ8Sbcl71MpA==",
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"hermes-parser": "0.18.2",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"chrome-trace-event": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-			"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-			"dev": true
+		"node_modules/metro-babel-transformer/node_modules/hermes-estree": {
+			"version": "0.18.2",
+			"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.18.2.tgz",
+			"integrity": "sha512-KoLsoWXJ5o81nit1wSyEZnWUGy9cBna9iYMZBR7skKh7okYAYKqQ9/OczwpMHn/cH0hKDyblulGsJ7FknlfVxQ=="
 		},
-		"ci-info": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-			"integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+		"node_modules/metro-babel-transformer/node_modules/hermes-parser": {
+			"version": "0.18.2",
+			"resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.18.2.tgz",
+			"integrity": "sha512-1eQfvib+VPpgBZ2zYKQhpuOjw1tH+Emuib6QmjkJWJMhyjM8xnXMvA+76o9LhF0zOAJDZgPfQhg43cyXEyl5Ew==",
+			"dependencies": {
+				"hermes-estree": "0.18.2"
+			}
 		},
-		"cipher-base": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-			"integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"safe-buffer": "^5.0.1"
+		"node_modules/metro-cache": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.80.5.tgz",
+			"integrity": "sha512-2u+dQ4PZwmC7eZo9uMBNhQQMig9f+w4QWBZwXCdVy/RYOHM0eObgGdMEOwODo73uxie82T9lWzxr3aZOZ+Nqtw==",
+			"dependencies": {
+				"metro-core": "0.80.5",
+				"rimraf": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"cjs-module-lexer": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
-			"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
-			"dev": true
+		"node_modules/metro-cache-key": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.80.5.tgz",
+			"integrity": "sha512-fr3QLZUarsB3tRbVcmr34kCBsTHk0Sh9JXGvBY/w3b2lbre+Lq5gtgLyFElHPecGF7o4z1eK9r3ubxtScHWcbA==",
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"class-utils": {
-			"version": "0.3.6",
-			"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-			"integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-			"requires": {
-				"arr-union": "^3.1.0",
-				"define-property": "^0.2.5",
-				"isobject": "^3.0.0",
-				"static-extend": "^0.1.1"
-			},
+		"node_modules/metro-config": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.80.5.tgz",
+			"integrity": "sha512-elqo/lwvF+VjZ1OPyvmW/9hSiGlmcqu+rQvDKw5F5WMX48ZC+ySTD1WcaD7e97pkgAlJHVYqZ98FCjRAYOAFRQ==",
 			"dependencies": {
-				"define-property": {
-					"version": "0.2.5",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-					"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-					"requires": {
-						"is-descriptor": "^0.1.0"
-					}
-				}
+				"connect": "^3.6.5",
+				"cosmiconfig": "^5.0.5",
+				"jest-validate": "^29.6.3",
+				"metro": "0.80.5",
+				"metro-cache": "0.80.5",
+				"metro-core": "0.80.5",
+				"metro-runtime": "0.80.5"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"classnames": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-		},
-		"clean-css": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
-			"integrity": "sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==",
-			"dev": true,
-			"requires": {
-				"source-map": "~0.6.0"
+		"node_modules/metro-config/node_modules/cosmiconfig": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+			"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+			"dependencies": {
+				"import-fresh": "^2.0.0",
+				"is-directory": "^0.3.1",
+				"js-yaml": "^3.13.1",
+				"parse-json": "^4.0.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/metro-config/node_modules/import-fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+			"integrity": "sha512-eZ5H8rcgYazHbKC3PG4ClHNykCSxtAhxSSEM+2mb+7evD2CKF5V7c0dNum7AdpDh0ZdICwZY9sRSn8f+KH96sg==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"caller-path": "^2.0.0",
+				"resolve-from": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"clean-stack": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-			"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-			"dev": true
+		"node_modules/metro-config/node_modules/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+			"dependencies": {
+				"error-ex": "^1.3.1",
+				"json-parse-better-errors": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"clean-webpack-plugin": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
-			"integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==",
-			"dev": true,
-			"requires": {
-				"@types/webpack": "^4.4.31",
-				"del": "^4.1.1"
+		"node_modules/metro-core": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.80.5.tgz",
+			"integrity": "sha512-vkLuaBhnZxTVpaZO8ZJVEHzjaqSXpOdpAiztSZ+NDaYM6jEFgle3/XIbLW91jTSf2+T8Pj5yB1G7KuOX+BcVwg==",
+			"dependencies": {
+				"lodash.throttle": "^4.1.1",
+				"metro-resolver": "0.80.5"
 			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/metro-file-map": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-file-map/-/metro-file-map-0.80.5.tgz",
+			"integrity": "sha512-bKCvJ05drjq6QhQxnDUt3I8x7bTcHo3IIKVobEr14BK++nmxFGn/BmFLRzVBlghM6an3gqwpNEYxS5qNc+VKcg==",
 			"dependencies": {
-				"del": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-					"integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-					"dev": true,
-					"requires": {
-						"@types/glob": "^7.1.1",
-						"globby": "^6.1.0",
-						"is-path-cwd": "^2.0.0",
-						"is-path-in-cwd": "^2.0.0",
-						"p-map": "^2.0.0",
-						"pify": "^4.0.1",
-						"rimraf": "^2.6.3"
-					}
-				},
-				"globby": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-					"integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
-					"dev": true,
-					"requires": {
-						"array-union": "^1.0.1",
-						"glob": "^7.0.3",
-						"object-assign": "^4.0.1",
-						"pify": "^2.0.0",
-						"pinkie-promise": "^2.0.0"
-					},
-					"dependencies": {
-						"pify": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-							"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-							"dev": true
-						}
-					}
-				},
-				"p-map": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-					"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-					"dev": true
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-					"dev": true
-				},
-				"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"
-					},
-					"dependencies": {
-						"glob": {
-							"version": "7.1.6",
-							"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-							"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-							"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"
-							}
-						}
-					}
-				}
+				"anymatch": "^3.0.3",
+				"debug": "^2.2.0",
+				"fb-watchman": "^2.0.0",
+				"graceful-fs": "^4.2.4",
+				"invariant": "^2.2.4",
+				"jest-worker": "^29.6.3",
+				"micromatch": "^4.0.4",
+				"node-abort-controller": "^3.1.1",
+				"nullthrows": "^1.1.1",
+				"walker": "^1.0.7"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "^2.3.2"
 			}
 		},
-		"cli-boxes": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-			"integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
-			"dev": true
+		"node_modules/metro-file-map/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
 		},
-		"cli-cursor": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-			"integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
-			"requires": {
-				"restore-cursor": "^2.0.0"
+		"node_modules/metro-minify-terser": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-minify-terser/-/metro-minify-terser-0.80.5.tgz",
+			"integrity": "sha512-S7oZLLcab6YXUT6jYFX/ZDMN7Fq6xBGGAG8liMFU1UljX6cTcEC2u+UIafYgCLrdVexp/+ClxrIetVPZ5LtL/g==",
+			"dependencies": {
+				"terser": "^5.15.0"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"cli-spinners": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz",
-			"integrity": "sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ=="
+		"node_modules/metro-resolver": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.80.5.tgz",
+			"integrity": "sha512-haJ/Hveio3zv/Fr4eXVdKzjUeHHDogYok7OpRqPSXGhTXisNXB+sLN7CpcUrCddFRUDLnVaqQOYwhYsFndgUwA==",
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"cli-table3": {
-			"version": "0.6.2",
-			"resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.2.tgz",
-			"integrity": "sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==",
-			"dev": true,
-			"requires": {
-				"@colors/colors": "1.5.0",
-				"string-width": "^4.2.0"
-			},
+		"node_modules/metro-runtime": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.80.5.tgz",
+			"integrity": "sha512-L0syTWJUdWzfUmKgkScr6fSBVTh6QDr8eKEkRtn40OBd8LPagrJGySBboWSgbyn9eIb4ayW3Y347HxgXBSAjmg==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@babel/runtime": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"cli-truncate": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz",
-			"integrity": "sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=",
-			"dev": true,
-			"requires": {
-				"slice-ansi": "0.0.4",
-				"string-width": "^1.0.1"
+		"node_modules/metro-source-map": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.80.5.tgz",
+			"integrity": "sha512-DwSF4l03mKPNqCtyQ6K23I43qzU1BViAXnuH81eYWdHglP+sDlPpY+/7rUahXEo6qXEHXfAJgVoo1sirbXbmsQ==",
+			"dependencies": {
+				"@babel/traverse": "^7.20.0",
+				"@babel/types": "^7.20.0",
+				"invariant": "^2.2.4",
+				"metro-symbolicate": "0.80.5",
+				"nullthrows": "^1.1.1",
+				"ob1": "0.80.5",
+				"source-map": "^0.5.6",
+				"vlq": "^1.0.0"
 			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/metro-source-map/node_modules/source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/metro-symbolicate": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.80.5.tgz",
+			"integrity": "sha512-IsM4mTYvmo9JvIqwEkCZ5+YeDVPST78Q17ZgljfLdHLSpIivOHp9oVoiwQ/YGbLx0xRHRIS/tKiXueWBnj3UWA==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-					"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-					"dev": true,
-					"requires": {
-						"number-is-nan": "^1.0.0"
-					}
-				},
-				"string-width": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-					"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-					"dev": true,
-					"requires": {
-						"code-point-at": "^1.0.0",
-						"is-fullwidth-code-point": "^1.0.0",
-						"strip-ansi": "^3.0.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^2.0.0"
-					}
-				}
+				"invariant": "^2.2.4",
+				"metro-source-map": "0.80.5",
+				"nullthrows": "^1.1.1",
+				"source-map": "^0.5.6",
+				"through2": "^2.0.1",
+				"vlq": "^1.0.0"
+			},
+			"bin": {
+				"metro-symbolicate": "src/index.js"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"cli-width": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-			"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
-			"dev": true
+		"node_modules/metro-symbolicate/node_modules/source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"clipboard": {
-			"version": "2.0.8",
-			"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-			"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-			"requires": {
-				"good-listener": "^1.2.2",
-				"select": "^1.1.2",
-				"tiny-emitter": "^2.0.0"
+		"node_modules/metro-transform-plugins": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.80.5.tgz",
+			"integrity": "sha512-7IdlTqK/k5+qE3RvIU5QdCJUPk4tHWEqgVuYZu8exeW+s6qOJ66hGIJjXY/P7ccucqF+D4nsbAAW5unkoUdS6g==",
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@babel/generator": "^7.20.0",
+				"@babel/template": "^7.0.0",
+				"@babel/traverse": "^7.20.0",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/metro-transform-worker": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.80.5.tgz",
+			"integrity": "sha512-Q1oM7hfP+RBgAtzRFBDjPhArELUJF8iRCZ8OidqCpYzQJVGuJZ7InSnIf3hn1JyqiUQwv2f1LXBO78i2rAjzyA==",
+			"dependencies": {
+				"@babel/core": "^7.20.0",
+				"@babel/generator": "^7.20.0",
+				"@babel/parser": "^7.20.0",
+				"@babel/types": "^7.20.0",
+				"metro": "0.80.5",
+				"metro-babel-transformer": "0.80.5",
+				"metro-cache": "0.80.5",
+				"metro-cache-key": "0.80.5",
+				"metro-minify-terser": "0.80.5",
+				"metro-source-map": "0.80.5",
+				"metro-transform-plugins": "0.80.5",
+				"nullthrows": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"cliui": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-			"requires": {
+		"node_modules/metro/node_modules/ci-info": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+			"integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+		},
+		"node_modules/metro/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
 				"string-width": "^4.2.0",
-				"strip-ansi": "^6.0.0",
-				"wrap-ansi": "^6.2.0"
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
 			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/metro/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"ms": "2.0.0"
 			}
 		},
-		"clone": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-			"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+		"node_modules/metro/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
-		"clone-deep": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-			"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-			"requires": {
-				"is-plain-object": "^2.0.4",
-				"kind-of": "^6.0.2",
-				"shallow-clone": "^3.0.0"
-			},
+		"node_modules/metro/node_modules/hermes-estree": {
+			"version": "0.18.2",
+			"resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.18.2.tgz",
+			"integrity": "sha512-KoLsoWXJ5o81nit1wSyEZnWUGy9cBna9iYMZBR7skKh7okYAYKqQ9/OczwpMHn/cH0hKDyblulGsJ7FknlfVxQ=="
+		},
+		"node_modules/metro/node_modules/hermes-parser": {
+			"version": "0.18.2",
+			"resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.18.2.tgz",
+			"integrity": "sha512-1eQfvib+VPpgBZ2zYKQhpuOjw1tH+Emuib6QmjkJWJMhyjM8xnXMvA+76o9LhF0zOAJDZgPfQhg43cyXEyl5Ew==",
 			"dependencies": {
-				"is-plain-object": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-					"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-					"requires": {
-						"isobject": "^3.0.1"
-					}
-				}
+				"hermes-estree": "0.18.2"
 			}
 		},
-		"clone-regexp": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-			"integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
-			"dev": true,
-			"requires": {
-				"is-regexp": "^2.0.0"
-			},
-			"dependencies": {
-				"is-regexp": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-					"integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
-					"dev": true
-				}
+		"node_modules/metro/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"clone-response": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
-			"integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-			"dev": true,
-			"requires": {
-				"mimic-response": "^1.0.0"
+		"node_modules/metro/node_modules/source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"cmd-shim": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-5.0.0.tgz",
-			"integrity": "sha512-qkCtZ59BidfEwHltnJwkyVZn+XQojdAySM1D1gSeh11Z4pW1Kpolkyo53L5noc0nrxmIvyFwTmJRo4xs7FFLPw==",
-			"dev": true,
-			"requires": {
-				"mkdirp-infer-owner": "^2.0.0"
+		"node_modules/metro/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"co": {
-			"version": "4.6.0",
-			"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-			"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-			"dev": true
+		"node_modules/metro/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
 		},
-		"code-point-at": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-			"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-			"dev": true
+		"node_modules/metro/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"collapse-white-space": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.4.tgz",
-			"integrity": "sha512-YfQ1tAUZm561vpYD+5eyWN8+UsceQbSrqqlc/6zDY2gtAE+uZLSdkkovhnGpmCThsvKBFakq4EdY/FF93E8XIw==",
-			"dev": true
+		"node_modules/metro/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"collect-v8-coverage": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
-			"integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
-			"dev": true
+		"node_modules/metro/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"collection-visit": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-			"integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-			"requires": {
-				"map-visit": "^1.0.0",
-				"object-visit": "^1.0.0"
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
 			}
 		},
-		"color": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
-			"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
-			"requires": {
-				"color-convert": "^1.9.3",
-				"color-string": "^1.6.0"
+		"node_modules/miller-rabin": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+			"integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+			"dev": true,
+			"dependencies": {
+				"bn.js": "^4.0.0",
+				"brorand": "^1.0.1"
 			},
-			"dependencies": {
-				"color-convert": {
-					"version": "1.9.3",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-					"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-					"requires": {
-						"color-name": "1.1.3"
-					}
-				},
-				"color-name": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-					"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-				}
+			"bin": {
+				"miller-rabin": "bin/miller-rabin"
 			}
 		},
-		"color-convert": {
-			"version": "1.9.2",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
-			"integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
-			"requires": {
-				"color-name": "1.1.1"
+		"node_modules/miller-rabin/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
+			"dev": true
+		},
+		"node_modules/mime": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=10.0.0"
 			}
 		},
-		"color-name": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
-			"integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok="
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
 		},
-		"color-string": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
-			"integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-			"requires": {
-				"color-name": "^1.0.0",
-				"simple-swizzle": "^0.2.2"
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"color-support": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-			"dev": true
+		"node_modules/mimic-fn": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+			"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"colord": {
-			"version": "2.9.3",
-			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+		"node_modules/mimic-response": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+			"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"colorette": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-			"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+		"node_modules/min-indent": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"columnify": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
-			"integrity": "sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==",
-			"dev": true,
-			"requires": {
-				"strip-ansi": "^6.0.1",
-				"wcwidth": "^1.0.0"
+		"node_modules/mini-css-extract-plugin": {
+			"version": "2.9.2",
+			"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
+			"integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
+			"license": "MIT",
+			"dependencies": {
+				"schema-utils": "^4.0.0",
+				"tapable": "^2.2.1"
 			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/mini-css-extract-plugin/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"combined-stream": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
-			"integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
-			"dev": true,
-			"requires": {
-				"delayed-stream": "~1.0.0"
+		"node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
 			}
 		},
-		"comma-separated-tokens": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
-			"integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
-			"dev": true
+		"node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
 		},
-		"command-exists": {
-			"version": "1.2.9",
-			"resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
-			"integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w=="
+		"node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
 		},
-		"commander": {
-			"version": "9.2.0",
-			"resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
-			"integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
-			"dev": true
+		"node_modules/mini-css-extract-plugin/node_modules/tapable": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"comment-parser": {
-			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.1.5.tgz",
-			"integrity": "sha512-RePCE4leIhBlmrqiYTvaqEeGYg7qpSl4etaIabKtdOQVi+mSTIBBklGUwIr79GXYnl3LpMwmDw4KeR2stNc6FA==",
-			"dev": true
+		"node_modules/minimalistic-assert": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+			"integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
 		},
-		"common-ancestor-path": {
+		"node_modules/minimalistic-crypto-utils": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
-			"integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
+			"resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+			"integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==",
 			"dev": true
 		},
-		"common-path-prefix": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
-			"integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
-			"dev": true
+		"node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
 		},
-		"commondir": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-			"integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"compare-func": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
-			"integrity": "sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==",
-			"dev": true,
-			"requires": {
-				"array-ify": "^1.0.0",
-				"dot-prop": "^5.1.0"
-			},
+		"node_modules/minimist-options": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+			"integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
 			"dependencies": {
-				"dot-prop": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-					"integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
-					"dev": true,
-					"requires": {
-						"is-obj": "^2.0.0"
-					}
-				},
-				"is-obj": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-					"integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-					"dev": true
-				}
+				"arrify": "^1.0.1",
+				"is-plain-obj": "^1.1.0",
+				"kind-of": "^6.0.3"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"component-emitter": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-			"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+		"node_modules/minimist-options/node_modules/is-plain-obj": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+			"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"compress-commons": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-2.1.1.tgz",
-			"integrity": "sha512-eVw6n7CnEMFzc3duyFVrQEuY1BlHR3rYsSztyG32ibGMW722i3C6IizEGMFmfMU+A+fALvBIwxN3czffTcdA+Q==",
+		"node_modules/minipass": {
+			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
 			"dev": true,
-			"requires": {
-				"buffer-crc32": "^0.2.13",
-				"crc32-stream": "^3.0.1",
-				"normalize-path": "^3.0.0",
-				"readable-stream": "^2.3.6"
-			},
 			"dependencies": {
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				}
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"compressible": {
-			"version": "2.0.18",
-			"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-			"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-			"requires": {
-				"mime-db": ">= 1.43.0 < 2"
+		"node_modules/minipass-collect": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+			"integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
 			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/minipass-fetch": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-3.0.3.tgz",
+			"integrity": "sha512-n5ITsTkDqYkYJZjcRWzZt9qnZKCT7nKCosJhHoj7S7zD+BP4jVbWs+odsniw5TA3E0sLomhTKOKjF86wf11PuQ==",
+			"dev": true,
 			"dependencies": {
-				"mime-db": {
-					"version": "1.47.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
-					"integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw=="
-				}
+				"minipass": "^5.0.0",
+				"minipass-sized": "^1.0.3",
+				"minizlib": "^2.1.2"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			},
+			"optionalDependencies": {
+				"encoding": "^0.1.13"
 			}
 		},
-		"compression": {
-			"version": "1.7.4",
-			"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-			"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-			"requires": {
-				"accepts": "~1.3.5",
-				"bytes": "3.0.0",
-				"compressible": "~2.0.16",
-				"debug": "2.6.9",
-				"on-headers": "~1.0.2",
-				"safe-buffer": "5.1.2",
-				"vary": "~1.1.2"
+		"node_modules/minipass-fetch/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/minipass-flush": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+			"integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
 			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/minipass-json-stream": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
+			"integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
+			"dev": true,
 			"dependencies": {
-				"bytes": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-					"integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
-				},
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				}
+				"jsonparse": "^1.3.1",
+				"minipass": "^3.0.0"
 			}
 		},
-		"compute-scroll-into-view": {
-			"version": "1.0.16",
-			"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz",
-			"integrity": "sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ=="
+		"node_modules/minipass-pipeline": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+			"integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"computed-style": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
-			"integrity": "sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ="
+		"node_modules/minipass-sized": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+			"integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"concat-map": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+		"node_modules/minipass/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
 		},
-		"concat-stream": {
-			"version": "1.6.2",
-			"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-			"integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+		"node_modules/minizlib": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
 			"dev": true,
-			"requires": {
-				"buffer-from": "^1.0.0",
-				"inherits": "^2.0.3",
-				"readable-stream": "^2.2.2",
-				"typedarray": "^0.0.6"
+			"dependencies": {
+				"minipass": "^3.0.0",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"concurrently": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-3.5.0.tgz",
-			"integrity": "sha1-jPG3cHppFqeKT/W3e7BN7FSzebI=",
+		"node_modules/minizlib/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+			"dev": true
+		},
+		"node_modules/mississippi": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+			"integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
 			"dev": true,
-			"requires": {
-				"chalk": "0.5.1",
-				"commander": "2.6.0",
-				"date-fns": "^1.23.0",
-				"lodash": "^4.5.1",
-				"rx": "2.3.24",
-				"spawn-command": "^0.0.2-1",
-				"supports-color": "^3.2.3",
-				"tree-kill": "^1.1.0"
+			"dependencies": {
+				"concat-stream": "^1.5.0",
+				"duplexify": "^3.4.2",
+				"end-of-stream": "^1.1.0",
+				"flush-write-stream": "^1.0.0",
+				"from2": "^2.1.0",
+				"parallel-transform": "^1.1.0",
+				"pump": "^3.0.0",
+				"pumpify": "^1.3.3",
+				"stream-each": "^1.1.0",
+				"through2": "^2.0.0"
 			},
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/mississippi/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
-					"integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
-					"integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
-					"dev": true
-				},
-				"chalk": {
-					"version": "0.5.1",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
-					"integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^1.1.0",
-						"escape-string-regexp": "^1.0.0",
-						"has-ansi": "^0.1.0",
-						"strip-ansi": "^0.3.0",
-						"supports-color": "^0.2.0"
-					},
-					"dependencies": {
-						"supports-color": {
-							"version": "0.2.0",
-							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
-							"integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
-							"dev": true
-						}
-					}
-				},
-				"commander": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
-					"integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=",
-					"dev": true
-				},
-				"has-ansi": {
-					"version": "0.1.0",
-					"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
-					"integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^0.2.0"
-					}
-				},
-				"has-flag": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-					"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "0.3.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
-					"integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^0.2.1"
-					}
-				},
-				"supports-color": {
-					"version": "3.2.3",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-					"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-					"dev": true,
-					"requires": {
-						"has-flag": "^1.0.0"
-					}
-				}
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
+		},
+		"node_modules/mitt": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+			"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+		},
+		"node_modules/mixin-deep": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+			"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+			"dev": true,
+			"dependencies": {
+				"for-in": "^1.0.2",
+				"is-extendable": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"config-chain": {
-			"version": "1.1.13",
-			"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
-			"integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+		"node_modules/mixin-deep/node_modules/is-extendable": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+			"integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
 			"dev": true,
-			"requires": {
-				"ini": "^1.3.4",
-				"proto-list": "~1.2.1"
+			"dependencies": {
+				"is-plain-object": "^2.0.4"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"connect": {
-			"version": "3.7.0",
-			"resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
-			"integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
-			"requires": {
-				"debug": "2.6.9",
-				"finalhandler": "1.1.2",
-				"parseurl": "~1.3.3",
-				"utils-merge": "1.0.1"
-			},
+		"node_modules/mixin-deep/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				}
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"connect-history-api-fallback": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-			"integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-			"dev": true
-		},
-		"console-browserify": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-			"integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
-			"dev": true
-		},
-		"console-control-strings": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-			"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-			"dev": true
-		},
-		"constant-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
-			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3",
-				"upper-case": "^2.0.2"
+		"node_modules/mixin-object": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+			"integrity": "sha512-ALGF1Jt9ouehcaXaHhn6t1yGWRqGaHkPFndtFVHfZXOvkIZ/yoGaSi0AHVTafb3ZBGg4dr/bDwnaEKqCXzchMA==",
+			"dependencies": {
+				"for-in": "^0.1.3",
+				"is-extendable": "^0.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"constants-browserify": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-			"integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=",
-			"dev": true
+		"node_modules/mixin-object/node_modules/for-in": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+			"integrity": "sha512-F0to7vbBSHP8E3l6dCjxNOLuSFAACIxFy3UehTUlG7svlXi37HHsDkyVcHo0Pq8QwrE+pXvWSVX3ZT1T9wAZ9g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"content-disposition": {
-			"version": "0.5.3",
-			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-			"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+		"node_modules/mkdirp": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+			"integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
 			"dev": true,
-			"requires": {
-				"safe-buffer": "5.1.2"
+			"bin": {
+				"mkdirp": "dist/cjs/src/bin.js"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"content-type": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-			"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-			"dev": true
+		"node_modules/mkdirp-classic": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
 		},
-		"conventional-changelog-angular": {
-			"version": "5.0.13",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz",
-			"integrity": "sha512-i/gipMxs7s8L/QeuavPF2hLnJgH6pEZAttySB6aiQLWcX3puWDL3ACVmvBhJGxnAy52Qc15ua26BufY6KpmrVA==",
+		"node_modules/mock-match-media": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/mock-match-media/-/mock-match-media-0.4.2.tgz",
+			"integrity": "sha512-1Q/Z7cfqWVTZd5Iz0bLxqzl6/8vaPl4KxxciRSRu+TCeGxRlxGDgjwWre0KkHlfS01r1iGCUWuF0n3ftvS/C/A==",
 			"dev": true,
-			"requires": {
-				"compare-func": "^2.0.0",
-				"q": "^1.5.1"
+			"dependencies": {
+				"css-mediaquery": "^0.1.2"
 			}
 		},
-		"conventional-changelog-core": {
-			"version": "4.2.4",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-core/-/conventional-changelog-core-4.2.4.tgz",
-			"integrity": "sha512-gDVS+zVJHE2v4SLc6B0sLsPiloR0ygU7HaDW14aNJE1v4SlqJPILPl/aJC7YdtRE4CybBf8gDwObBvKha8Xlyg==",
+		"node_modules/modify-values": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
+			"integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
 			"dev": true,
-			"requires": {
-				"add-stream": "^1.0.0",
-				"conventional-changelog-writer": "^5.0.0",
-				"conventional-commits-parser": "^3.2.0",
-				"dateformat": "^3.0.0",
-				"get-pkg-repo": "^4.0.0",
-				"git-raw-commits": "^2.0.8",
-				"git-remote-origin-url": "^2.0.0",
-				"git-semver-tags": "^4.1.1",
-				"lodash": "^4.17.15",
-				"normalize-package-data": "^3.0.0",
-				"q": "^1.5.1",
-				"read-pkg": "^3.0.0",
-				"read-pkg-up": "^3.0.0",
-				"through2": "^4.0.0"
-			},
-			"dependencies": {
-				"hosted-git-info": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-					"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"is-core-module": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-					"integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"load-json-file": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-					"integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"parse-json": "^4.0.0",
-						"pify": "^3.0.0",
-						"strip-bom": "^3.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"normalize-package-data": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-					"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^4.0.1",
-						"is-core-module": "^2.5.0",
-						"semver": "^7.3.4",
-						"validate-npm-package-license": "^3.0.1"
-					}
-				},
-				"parse-json": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-					"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
-					"dev": true,
-					"requires": {
-						"error-ex": "^1.3.1",
-						"json-parse-better-errors": "^1.0.1"
-					}
-				},
-				"pify": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-					"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-					"dev": true
-				},
-				"read-pkg": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-					"integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
-					"dev": true,
-					"requires": {
-						"load-json-file": "^4.0.0",
-						"normalize-package-data": "^2.3.2",
-						"path-type": "^3.0.0"
-					},
-					"dependencies": {
-						"hosted-git-info": {
-							"version": "2.8.9",
-							"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-							"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-							"dev": true
-						},
-						"normalize-package-data": {
-							"version": "2.5.0",
-							"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-							"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-							"dev": true,
-							"requires": {
-								"hosted-git-info": "^2.1.4",
-								"resolve": "^1.10.0",
-								"semver": "2 || 3 || 4 || 5",
-								"validate-npm-package-license": "^3.0.1"
-							}
-						},
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						}
-					}
-				},
-				"read-pkg-up": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-3.0.0.tgz",
-					"integrity": "sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==",
-					"dev": true,
-					"requires": {
-						"find-up": "^2.0.0",
-						"read-pkg": "^3.0.0"
-					}
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"strip-bom": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
-					"dev": true
-				},
-				"through2": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-					"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-					"dev": true,
-					"requires": {
-						"readable-stream": "3"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"conventional-changelog-preset-loader": {
-			"version": "2.3.4",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz",
-			"integrity": "sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==",
-			"dev": true
+		"node_modules/moment": {
+			"version": "2.29.4",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+			"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+			"engines": {
+				"node": "*"
+			}
 		},
-		"conventional-changelog-writer": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/conventional-changelog-writer/-/conventional-changelog-writer-5.0.1.tgz",
-			"integrity": "sha512-5WsuKUfxW7suLblAbFnxAcrvf6r+0b7GvNaWUwUIk0bXMnENP/PEieGKVUQrjPqwPT4o3EPAASBXiY6iHooLOQ==",
-			"dev": true,
-			"requires": {
-				"conventional-commits-filter": "^2.0.7",
-				"dateformat": "^3.0.0",
-				"handlebars": "^4.7.7",
-				"json-stringify-safe": "^5.0.1",
-				"lodash": "^4.17.15",
-				"meow": "^8.0.0",
-				"semver": "^6.0.0",
-				"split": "^1.0.0",
-				"through2": "^4.0.0"
-			},
-			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"through2": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-					"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-					"dev": true,
-					"requires": {
-						"readable-stream": "3"
-					}
-				}
+		"node_modules/moment-timezone": {
+			"version": "0.5.43",
+			"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz",
+			"integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==",
+			"dependencies": {
+				"moment": "^2.29.4"
+			},
+			"engines": {
+				"node": "*"
 			}
 		},
-		"conventional-commits-filter": {
-			"version": "2.0.7",
-			"resolved": "https://registry.npmjs.org/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz",
-			"integrity": "sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==",
+		"node_modules/moment-timezone-data-webpack-plugin": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz",
+			"integrity": "sha512-1le6a35GgYdWMVYFzrfpE/F6Pk4bj0M3QKD6Iv6ba9LqWGoVqHQRHyCTLvLis5E1J98Sz40ET6yhZzMVakwpjg==",
 			"dev": true,
-			"requires": {
-				"lodash.ismatch": "^4.4.0",
-				"modify-values": "^1.0.0"
+			"dependencies": {
+				"find-cache-dir": "^3.0.0",
+				"make-dir": "^3.0.0"
+			},
+			"peerDependencies": {
+				"moment-timezone": ">= 0.1.0",
+				"webpack": "4.x.x || 5.x.x"
 			}
 		},
-		"conventional-commits-parser": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-3.2.4.tgz",
-			"integrity": "sha512-nK7sAtfi+QXbxHCYfhpZsfRtaitZLIA6889kFIouLvz6repszQDgxBu7wf2WbU+Dco7sAnNCJYERCwt54WPC2Q==",
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/find-cache-dir": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+			"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
 			"dev": true,
-			"requires": {
-				"JSONStream": "^1.0.4",
-				"is-text-path": "^1.0.1",
-				"lodash": "^4.17.15",
-				"meow": "^8.0.0",
-				"split2": "^3.0.0",
-				"through2": "^4.0.0"
-			},
-			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"through2": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-					"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-					"dev": true,
-					"requires": {
-						"readable-stream": "3"
-					}
-				}
+			"dependencies": {
+				"commondir": "^1.0.1",
+				"make-dir": "^3.0.2",
+				"pkg-dir": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
 			}
 		},
-		"conventional-recommended-bump": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/conventional-recommended-bump/-/conventional-recommended-bump-6.1.0.tgz",
-			"integrity": "sha512-uiApbSiNGM/kkdL9GTOLAqC4hbptObFo4wW2QRyHsKciGAfQuLU1ShZ1BIVI/+K2BE/W1AWYQMCXAsv4dyKPaw==",
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
 			"dev": true,
-			"requires": {
-				"concat-stream": "^2.0.0",
-				"conventional-changelog-preset-loader": "^2.3.4",
-				"conventional-commits-filter": "^2.0.7",
-				"conventional-commits-parser": "^3.2.0",
-				"git-raw-commits": "^2.0.8",
-				"git-semver-tags": "^4.1.1",
-				"meow": "^8.0.0",
-				"q": "^1.5.1"
-			},
-			"dependencies": {
-				"concat-stream": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
-					"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
-					"dev": true,
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"inherits": "^2.0.3",
-						"readable-stream": "^3.0.2",
-						"typedarray": "^0.0.6"
-					}
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"convert-source-map": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
-			"integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU="
-		},
-		"cookie": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-			"integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-			"dev": true
-		},
-		"cookie-signature": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-			"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-			"dev": true
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"copy-concurrently": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-			"integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 			"dev": true,
-			"requires": {
-				"aproba": "^1.1.1",
-				"fs-write-stream-atomic": "^1.0.8",
-				"iferr": "^0.1.5",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.4",
-				"run-queue": "^1.0.0"
+			"dependencies": {
+				"semver": "^6.0.0"
 			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
 			"dependencies": {
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				}
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"copy-descriptor": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-			"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"copy-dir": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/copy-dir/-/copy-dir-1.3.0.tgz",
-			"integrity": "sha512-Q4+qBFnN4bwGwvtXXzbp4P/4iNk0MaiGAzvQ8OiMtlLjkIKjmNN689uVzShSM0908q7GoFHXIPx4zi75ocoaHw==",
-			"dev": true
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"copy-to-clipboard": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
-			"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
 			"dev": true,
-			"requires": {
-				"toggle-selection": "^1.0.6"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"copy-webpack-plugin": {
-			"version": "10.2.0",
-			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.0.tgz",
-			"integrity": "sha512-my6iXII95c78w14HzYCNya5TlJYa44lOppAge5GSTMM1SyDxNsVGCJvhP4/ld6snm8lzjn3XOonMZD6s1L86Og==",
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/pkg-dir": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+			"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
 			"dev": true,
-			"requires": {
-				"fast-glob": "^3.2.7",
-				"glob-parent": "^6.0.1",
-				"globby": "^12.0.2",
-				"normalize-path": "^3.0.0",
-				"schema-utils": "^4.0.0",
-				"serialize-javascript": "^6.0.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "8.8.2",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
-					"integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"json-schema-traverse": "^1.0.0",
-						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-					"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.3"
-					}
-				},
-				"array-union": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
-					"integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
-					"dev": true
-				},
-				"glob-parent": {
-					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-					"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.3"
-					}
-				},
-				"globby": {
-					"version": "12.0.2",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-12.0.2.tgz",
-					"integrity": "sha512-lAsmb/5Lww4r7MM9nCCliDZVIKbZTavrsunAsHLr9oHthrZP1qi7/gAnHOsUs9bLvEt2vKVJhHmxuL7QbDuPdQ==",
-					"dev": true,
-					"requires": {
-						"array-union": "^3.0.1",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.7",
-						"ignore": "^5.1.8",
-						"merge2": "^1.4.1",
-						"slash": "^4.0.0"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"json-schema-traverse": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-					"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-					"dev": true
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-					"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.9",
-						"ajv": "^8.8.0",
-						"ajv-formats": "^2.1.1",
-						"ajv-keywords": "^5.0.0"
-					}
-				},
-				"serialize-javascript": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-					"integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
-					"dev": true,
-					"requires": {
-						"randombytes": "^2.1.0"
-					}
-				},
-				"slash": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-					"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-					"dev": true
-				}
+				"find-up": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"core-js": {
-			"version": "3.19.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.1.tgz",
-			"integrity": "sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg=="
+		"node_modules/moment-timezone-data-webpack-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
 		},
-		"core-js-builder": {
-			"version": "3.19.1",
-			"resolved": "https://registry.npmjs.org/core-js-builder/-/core-js-builder-3.19.1.tgz",
-			"integrity": "sha512-PuQdf3ycpvB4jGxtp42uPREHWHzHV/N8QoSX5S5T2QFb8Uaig46oJRfxm6wwT38kfPWTh1gNcPZTzbi8oRoC0w==",
+		"node_modules/morgan": {
+			"version": "1.10.0",
+			"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+			"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
 			"dev": true,
-			"requires": {
-				"core-js": "3.19.1",
-				"core-js-compat": "3.19.1",
-				"mkdirp": ">=0.5.5 <1",
-				"webpack": ">=4.46.0 <5"
-			},
 			"dependencies": {
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"loader-utils": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.1.tgz",
-					"integrity": "sha512-1Qo97Y2oKaU+Ro2xnDMR26g1BwMT29jNbem1EvcujW2jqt+j5COXyscjM7bLQkM9HaxI7pkWeW7gnI072yMI9Q==",
-					"dev": true,
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^1.0.1"
-					}
-				},
-				"mkdirp": {
-					"version": "0.5.5",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-					"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.5"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"tapable": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-					"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-					"dev": true
-				},
-				"terser-webpack-plugin": {
-					"version": "1.4.5",
-					"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-					"integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
-					"dev": true,
-					"requires": {
-						"cacache": "^12.0.2",
-						"find-cache-dir": "^2.1.0",
-						"is-wsl": "^1.1.0",
-						"schema-utils": "^1.0.0",
-						"serialize-javascript": "^4.0.0",
-						"source-map": "^0.6.1",
-						"terser": "^4.1.2",
-						"webpack-sources": "^1.4.0",
-						"worker-farm": "^1.7.0"
-					}
-				},
-				"webpack": {
-					"version": "4.46.0",
-					"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-					"integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.9.0",
-						"@webassemblyjs/helper-module-context": "1.9.0",
-						"@webassemblyjs/wasm-edit": "1.9.0",
-						"@webassemblyjs/wasm-parser": "1.9.0",
-						"acorn": "^6.4.1",
-						"ajv": "^6.10.2",
-						"ajv-keywords": "^3.4.1",
-						"chrome-trace-event": "^1.0.2",
-						"enhanced-resolve": "^4.5.0",
-						"eslint-scope": "^4.0.3",
-						"json-parse-better-errors": "^1.0.2",
-						"loader-runner": "^2.4.0",
-						"loader-utils": "^1.2.3",
-						"memory-fs": "^0.4.1",
-						"micromatch": "^3.1.10",
-						"mkdirp": "^0.5.3",
-						"neo-async": "^2.6.1",
-						"node-libs-browser": "^2.2.1",
-						"schema-utils": "^1.0.0",
-						"tapable": "^1.1.3",
-						"terser-webpack-plugin": "^1.4.3",
-						"watchpack": "^1.7.4",
-						"webpack-sources": "^1.4.1"
-					},
-					"dependencies": {
-						"ajv": {
-							"version": "6.12.6",
-							"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-							"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-							"dev": true,
-							"requires": {
-								"fast-deep-equal": "^3.1.1",
-								"fast-json-stable-stringify": "^2.0.0",
-								"json-schema-traverse": "^0.4.1",
-								"uri-js": "^4.2.2"
-							}
-						}
-					}
-				},
-				"webpack-sources": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-					"integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-					"dev": true,
-					"requires": {
-						"source-list-map": "^2.0.0",
-						"source-map": "~0.6.1"
-					}
-				}
+				"basic-auth": "~2.0.1",
+				"debug": "2.6.9",
+				"depd": "~2.0.0",
+				"on-finished": "~2.3.0",
+				"on-headers": "~1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"core-js-compat": {
-			"version": "3.19.1",
-			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.19.1.tgz",
-			"integrity": "sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==",
-			"requires": {
-				"browserslist": "^4.17.6",
-				"semver": "7.0.0"
-			},
+		"node_modules/morgan/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dev": true,
 			"dependencies": {
-				"semver": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-					"integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
-				}
+				"ms": "2.0.0"
 			}
 		},
-		"core-js-pure": {
-			"version": "3.19.1",
-			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.19.1.tgz",
-			"integrity": "sha512-Q0Knr8Es84vtv62ei6/6jXH/7izKmOrtrxH9WJTHLCMAVeU+8TF8z8Nr08CsH4Ot0oJKzBzJJL9SJBYIv7WlfQ==",
-			"dev": true
+		"node_modules/morgan/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
-		"core-util-is": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-			"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+		"node_modules/mousetrap": {
+			"version": "1.6.5",
+			"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+			"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
 		},
-		"cosmiconfig": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-			"integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+		"node_modules/move-concurrently": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+			"integrity": "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==",
 			"dev": true,
-			"requires": {
-				"@types/parse-json": "^4.0.0",
-				"import-fresh": "^3.2.1",
-				"parse-json": "^5.0.0",
-				"path-type": "^4.0.0",
-				"yaml": "^1.10.0"
-			},
 			"dependencies": {
-				"import-fresh": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-					"integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					}
-				},
-				"parse-json": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
-					"integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.0.0",
-						"error-ex": "^1.3.1",
-						"json-parse-even-better-errors": "^2.3.0",
-						"lines-and-columns": "^1.1.6"
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-					"dev": true
-				},
-				"yaml": {
-					"version": "1.10.0",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-					"integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
-					"dev": true
-				}
+				"aproba": "^1.1.1",
+				"copy-concurrently": "^1.0.0",
+				"fs-write-stream-atomic": "^1.0.8",
+				"mkdirp": "^0.5.1",
+				"rimraf": "^2.5.4",
+				"run-queue": "^1.0.3"
 			}
 		},
-		"cp-file": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/cp-file/-/cp-file-7.0.0.tgz",
-			"integrity": "sha512-0Cbj7gyvFVApzpK/uhCtQ/9kE9UnYpxMzaq5nQQC/Dh4iaj5fxp7iEFIullrYwzj8nf0qnsI1Qsx34hAeAebvw==",
+		"node_modules/move-concurrently/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"make-dir": "^3.0.0",
-				"nested-error-stacks": "^2.0.0",
-				"p-event": "^4.1.0"
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"cpy": {
-			"version": "8.1.2",
-			"resolved": "https://registry.npmjs.org/cpy/-/cpy-8.1.2.tgz",
-			"integrity": "sha512-dmC4mUesv0OYH2kNFEidtf/skUwv4zePmGeepjyyJ0qTo5+8KhA1o99oIAwVVLzQMAeDJml74d6wPPKb6EZUTg==",
+		"node_modules/move-concurrently/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
 			"dev": true,
-			"requires": {
-				"arrify": "^2.0.1",
-				"cp-file": "^7.0.0",
-				"globby": "^9.2.0",
-				"has-glob": "^1.0.0",
-				"junk": "^3.1.0",
-				"nested-error-stacks": "^2.1.0",
-				"p-all": "^2.1.0",
-				"p-filter": "^2.1.0",
-				"p-map": "^3.0.0"
-			},
-			"dependencies": {
-				"arrify": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-					"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-					"dev": true
-				},
-				"p-map": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
-					"integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
-					"dev": true,
-					"requires": {
-						"aggregate-error": "^3.0.0"
-					}
-				}
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
 			}
 		},
-		"crc": {
-			"version": "3.8.0",
-			"resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
-			"integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
+		"node_modules/move-concurrently/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
 			"dev": true,
-			"requires": {
-				"buffer": "^5.1.0"
-			},
 			"dependencies": {
-				"buffer": {
-					"version": "5.6.0",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
-					"integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
-					"dev": true,
-					"requires": {
-						"base64-js": "^1.0.2",
-						"ieee754": "^1.1.4"
-					}
-				}
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
 			}
 		},
-		"crc32-stream": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-3.0.1.tgz",
-			"integrity": "sha512-mctvpXlbzsvK+6z8kJwSJ5crm7yBwrQMTybJzMw1O4lLGJqjlDCXY2Zw7KheiA6XBEcBmfLx1D88mjRGVJtY9w==",
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
 			"dev": true,
-			"requires": {
-				"crc": "^3.4.4",
-				"readable-stream": "^3.4.0"
-			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mrmime": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+			"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/multicast-dns": {
+			"version": "7.2.5",
+			"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+			"integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
 			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+				"dns-packet": "^5.2.2",
+				"thunky": "^1.0.2"
+			},
+			"bin": {
+				"multicast-dns": "cli.js"
 			}
 		},
-		"create-ecdh": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-			"integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+		"node_modules/multimatch": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+			"integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^4.1.0",
-				"elliptic": "^6.5.3"
-			},
 			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				}
+				"@types/minimatch": "^3.0.3",
+				"array-differ": "^3.0.0",
+				"array-union": "^2.1.0",
+				"arrify": "^2.0.1",
+				"minimatch": "^3.0.4"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"create-hash": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-			"integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+		"node_modules/multimatch/node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
 			"dev": true,
-			"requires": {
-				"cipher-base": "^1.0.1",
-				"inherits": "^2.0.1",
-				"md5.js": "^1.3.4",
-				"ripemd160": "^2.0.1",
-				"sha.js": "^2.4.0"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"create-hmac": {
-			"version": "1.1.7",
-			"resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-			"integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+		"node_modules/multimatch/node_modules/arrify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+			"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
 			"dev": true,
-			"requires": {
-				"cipher-base": "^1.0.3",
-				"create-hash": "^1.1.0",
-				"inherits": "^2.0.1",
-				"ripemd160": "^2.0.0",
-				"safe-buffer": "^5.0.1",
-				"sha.js": "^2.4.8"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"create-react-context": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
-			"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
-			"dev": true,
-			"requires": {
-				"gud": "^1.0.0",
-				"warning": "^4.0.3"
+		"node_modules/mustache": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.0.0.tgz",
+			"integrity": "sha512-FJgjyX/IVkbXBXYUwH+OYwQKqWpFPLaLVESd70yHjSDunwzV2hZOoTBvPf4KLoxesUzzyfTH6F784Uqd7Wm5yA==",
+			"bin": {
+				"mustache": "bin/mustache"
+			},
+			"engines": {
+				"npm": ">=1.4.0"
 			}
 		},
-		"cross-env": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-3.2.4.tgz",
-			"integrity": "sha1-ngWF8neGTtQhznVvgamA/w1piro=",
+		"node_modules/mute-stream": {
+			"version": "0.0.8",
+			"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+			"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
+		},
+		"node_modules/mv": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
+			"integrity": "sha512-at/ZndSy3xEGJ8i0ygALh8ru9qy7gWW1cmkaqBN29JmMlIvM//MEO9y1sk/avxuwnPcfhkejkLsuPxH81BrkSg==",
 			"dev": true,
-			"requires": {
-				"cross-spawn": "^5.1.0",
-				"is-windows": "^1.0.0"
+			"dependencies": {
+				"mkdirp": "~0.5.1",
+				"ncp": "~2.0.0",
+				"rimraf": "~2.4.0"
+			},
+			"engines": {
+				"node": ">=0.8.0"
 			}
 		},
-		"cross-spawn": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-			"integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+		"node_modules/mv/node_modules/glob": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+			"integrity": "sha512-MKZeRNyYZAVVVG1oZeLaWie1uweH40m9AZwIwxyPbTSX4hHrVYSzLg0Ro5Z5R7XKkIX+Cc6oD1rqeDJnwsB8/A==",
 			"dev": true,
-			"requires": {
-				"lru-cache": "^4.0.1",
-				"shebang-command": "^1.2.0",
-				"which": "^1.2.9"
+			"dependencies": {
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "2 || 3",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
 			}
 		},
-		"crypto-browserify": {
-			"version": "3.12.0",
-			"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-			"integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+		"node_modules/mv/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
 			"dev": true,
-			"requires": {
-				"browserify-cipher": "^1.0.0",
-				"browserify-sign": "^4.0.0",
-				"create-ecdh": "^4.0.0",
-				"create-hash": "^1.1.0",
-				"create-hmac": "^1.1.0",
-				"diffie-hellman": "^5.0.0",
-				"inherits": "^2.0.1",
-				"pbkdf2": "^3.0.3",
-				"public-encrypt": "^4.0.0",
-				"randombytes": "^2.0.0",
-				"randomfill": "^1.0.3"
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
 			}
 		},
-		"css": {
-			"version": "2.2.4",
-			"resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
-			"integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
-			"requires": {
-				"inherits": "^2.0.3",
-				"source-map": "^0.6.1",
-				"source-map-resolve": "^0.5.2",
-				"urix": "^0.1.0"
-			},
+		"node_modules/mv/node_modules/rimraf": {
+			"version": "2.4.5",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.4.5.tgz",
+			"integrity": "sha512-J5xnxTyqaiw06JjMftq7L9ouA448dw/E7dKghkP9WpKNuwmARNNg+Gk8/u5ryb9N/Yo2+z3MCwuqFK/+qPOPfQ==",
+			"dev": true,
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				}
+				"glob": "^6.0.1"
+			},
+			"bin": {
+				"rimraf": "bin.js"
 			}
 		},
-		"css-color-keywords": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-			"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-		},
-		"css-color-names": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
-			"integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
+		"node_modules/n12": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/n12/-/n12-0.4.0.tgz",
+			"integrity": "sha512-p/hj4zQ8d3pbbFLQuN1K9honUxiDDhueOWyFLw/XgBv+wZCE44bcLH4CIcsolOceJQduh4Jf7m/LfaTxyGmGtQ==",
 			"dev": true
 		},
-		"css-declaration-sorter": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.1.tgz",
-			"integrity": "sha512-BZ1aOuif2Sb7tQYY1GeCjG7F++8ggnwUkH5Ictw0mrdpqpEd+zWmcPdstnH2TItlb74FqR0DrVEieon221T/1Q==",
+		"node_modules/nan": {
+			"version": "2.18.0",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
+			"integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
 			"dev": true,
-			"requires": {
-				"timsort": "^0.3.0"
+			"optional": true
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
-		"css-loader": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.2.0.tgz",
-			"integrity": "sha512-/rvHfYRjIpymZblf49w8jYcRo2y9gj6rV8UroHGmBxKrIyGLokpycyKzp9OkitvqT29ZSpzJ0Ic7SpnJX3sC8g==",
+		"node_modules/nanomatch": {
+			"version": "1.2.13",
+			"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+			"integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
 			"dev": true,
-			"requires": {
-				"icss-utils": "^5.1.0",
-				"postcss": "^8.2.15",
-				"postcss-modules-extract-imports": "^3.0.0",
-				"postcss-modules-local-by-default": "^4.0.0",
-				"postcss-modules-scope": "^3.0.0",
-				"postcss-modules-values": "^4.0.0",
-				"postcss-value-parser": "^4.1.0",
-				"semver": "^7.3.5"
-			},
 			"dependencies": {
-				"icss-utils": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-					"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-					"dev": true
-				},
-				"postcss-modules-extract-imports": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-					"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-					"dev": true
-				},
-				"postcss-modules-local-by-default": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-					"integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^5.0.0",
-						"postcss-selector-parser": "^6.0.2",
-						"postcss-value-parser": "^4.1.0"
-					}
-				},
-				"postcss-modules-scope": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-					"integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-					"dev": true,
-					"requires": {
-						"postcss-selector-parser": "^6.0.4"
-					}
-				},
-				"postcss-modules-values": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-					"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-					"dev": true,
-					"requires": {
-						"icss-utils": "^5.0.0"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				}
+				"arr-diff": "^4.0.0",
+				"array-unique": "^0.3.2",
+				"define-property": "^2.0.2",
+				"extend-shallow": "^3.0.2",
+				"fragment-cache": "^0.2.1",
+				"is-windows": "^1.0.2",
+				"kind-of": "^6.0.2",
+				"object.pick": "^1.3.0",
+				"regex-not": "^1.0.0",
+				"snapdragon": "^0.8.1",
+				"to-regex": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"css-mediaquery": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-			"integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+		"node_modules/napi-build-utils": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+			"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+			"dev": true,
+			"optional": true
 		},
-		"css-to-react-native": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
-			"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
-			"requires": {
-				"camelize": "^1.0.0",
-				"css-color-keywords": "^1.0.0",
-				"postcss-value-parser": "^3.3.0"
+		"node_modules/natural-compare": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+		},
+		"node_modules/ncp": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+			"integrity": "sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==",
+			"dev": true,
+			"bin": {
+				"ncp": "bin/ncp"
 			}
 		},
-		"css-to-react-native-transform": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/css-to-react-native-transform/-/css-to-react-native-transform-1.9.0.tgz",
-			"integrity": "sha512-darzotx5xx+Q0bzASkvNBasztLCssNerzf9jpMZx0H4CTY6J/y2Wh50ZtYAJ3FmESEux1bJcGa6T0zfISTuFqw==",
-			"requires": {
-				"css": "^2.2.4",
-				"css-mediaquery": "^0.1.2",
-				"css-to-react-native": "^2.3.0"
+		"node_modules/negotiator": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+			"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"css-tree": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-			"requires": {
-				"mdn-data": "2.0.14",
-				"source-map": "^0.6.1"
-			},
-			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				}
+		"node_modules/neo-async": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+		},
+		"node_modules/netmask": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+			"integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+			"engines": {
+				"node": ">= 0.4.0"
 			}
 		},
-		"css.escape": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
+		"node_modules/nice-try": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+			"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
 			"dev": true
 		},
-		"cssesc": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true
+		"node_modules/no-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+			"dependencies": {
+				"lower-case": "^2.0.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/nocache": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/nocache/-/nocache-3.0.4.tgz",
+			"integrity": "sha512-WDD0bdg9mbq6F4mRxEYcPWwfA1vxd0mrvKOyxI7Xj/atfRHVeutzuWByG//jfm4uPzp0y4Kj051EORCBSQMycw==",
+			"engines": {
+				"node": ">=12.0.0"
+			}
 		},
-		"cssnano": {
-			"version": "5.0.7",
-			"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.7.tgz",
-			"integrity": "sha512-7C0tbb298hef3rq+TtBbMuezBQ9VrFtrQEsPNuBKNVgWny/67vdRsnq8EoNu7TRjAHURgYvWlRIpCUmcMZkRzw==",
+		"node_modules/nock": {
+			"version": "12.0.3",
+			"resolved": "https://registry.npmjs.org/nock/-/nock-12.0.3.tgz",
+			"integrity": "sha512-QNb/j8kbFnKCiyqi9C5DD0jH/FubFGj5rt9NQFONXwQm3IPB0CULECg/eS3AU1KgZb/6SwUa4/DTRKhVxkGABw==",
 			"dev": true,
-			"requires": {
-				"cssnano-preset-default": "^5.1.3",
-				"is-resolvable": "^1.1.0",
-				"lilconfig": "^2.0.3",
-				"yaml": "^1.10.2"
+			"dependencies": {
+				"debug": "^4.1.0",
+				"json-stringify-safe": "^5.0.1",
+				"lodash": "^4.17.13",
+				"propagate": "^2.0.0"
 			},
+			"engines": {
+				"node": ">= 10.13"
+			}
+		},
+		"node_modules/node-abi": {
+			"version": "3.47.0",
+			"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.47.0.tgz",
+			"integrity": "sha512-2s6B2CWZM//kPgwnuI0KrYwNjfdByE25zvAaEpq9IH4zcNsarH8Ihu/UuX6XMPEogDAxkuUFeZn60pXNHAqn3A==",
+			"dev": true,
+			"optional": true,
 			"dependencies": {
-				"yaml": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-					"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-					"dev": true
-				}
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"cssnano-preset-default": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.3.tgz",
-			"integrity": "sha512-qo9tX+t4yAAZ/yagVV3b+QBKeLklQbmgR3wI7mccrDcR+bEk9iHgZN1E7doX68y9ThznLya3RDmR+nc7l6/2WQ==",
-			"dev": true,
-			"requires": {
-				"css-declaration-sorter": "^6.0.3",
-				"cssnano-utils": "^2.0.1",
-				"postcss-calc": "^8.0.0",
-				"postcss-colormin": "^5.2.0",
-				"postcss-convert-values": "^5.0.1",
-				"postcss-discard-comments": "^5.0.1",
-				"postcss-discard-duplicates": "^5.0.1",
-				"postcss-discard-empty": "^5.0.1",
-				"postcss-discard-overridden": "^5.0.1",
-				"postcss-merge-longhand": "^5.0.2",
-				"postcss-merge-rules": "^5.0.2",
-				"postcss-minify-font-values": "^5.0.1",
-				"postcss-minify-gradients": "^5.0.1",
-				"postcss-minify-params": "^5.0.1",
-				"postcss-minify-selectors": "^5.1.0",
-				"postcss-normalize-charset": "^5.0.1",
-				"postcss-normalize-display-values": "^5.0.1",
-				"postcss-normalize-positions": "^5.0.1",
-				"postcss-normalize-repeat-style": "^5.0.1",
-				"postcss-normalize-string": "^5.0.1",
-				"postcss-normalize-timing-functions": "^5.0.1",
-				"postcss-normalize-unicode": "^5.0.1",
-				"postcss-normalize-url": "^5.0.2",
-				"postcss-normalize-whitespace": "^5.0.1",
-				"postcss-ordered-values": "^5.0.2",
-				"postcss-reduce-initial": "^5.0.1",
-				"postcss-reduce-transforms": "^5.0.1",
-				"postcss-svgo": "^5.0.2",
-				"postcss-unique-selectors": "^5.0.1"
-			}
-		},
-		"cssnano-utils": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-			"integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
+		"node_modules/node-abort-controller": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
+			"integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="
+		},
+		"node_modules/node-addon-api": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
 			"dev": true
 		},
-		"csso": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-			"integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+		"node_modules/node-dir": {
+			"version": "0.1.17",
+			"resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
+			"integrity": "sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==",
+			"dependencies": {
+				"minimatch": "^3.0.2"
+			},
+			"engines": {
+				"node": ">= 0.10.5"
+			}
+		},
+		"node_modules/node-domexception": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
 			"dev": true,
-			"requires": {
-				"css-tree": "^1.1.2"
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "github",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"engines": {
+				"node": ">=10.5.0"
+			}
+		},
+		"node_modules/node-fetch": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+			"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-url": "^5.0.0"
+			},
+			"engines": {
+				"node": "4.x || >=6.0.0"
+			},
+			"peerDependencies": {
+				"encoding": "^0.1.0"
+			},
+			"peerDependenciesMeta": {
+				"encoding": {
+					"optional": true
+				}
 			}
 		},
-		"cssom": {
-			"version": "0.4.4",
-			"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-			"integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+		"node_modules/node-fetch-native": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.2.tgz",
+			"integrity": "sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==",
 			"dev": true
 		},
-		"cssstyle": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-			"integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+		"node_modules/node-forge": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+			"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+			"engines": {
+				"node": ">= 6.13.0"
+			}
+		},
+		"node_modules/node-gyp": {
+			"version": "9.4.0",
+			"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.4.0.tgz",
+			"integrity": "sha512-dMXsYP6gc9rRbejLXmTbVRYjAHw7ppswsKyMxuxJxxOHzluIO1rGp9TOQgjFJ+2MCqcOcQTOPB/8Xwhr+7s4Eg==",
 			"dev": true,
-			"requires": {
-				"cssom": "~0.3.6"
-			},
 			"dependencies": {
-				"cssom": {
-					"version": "0.3.8",
-					"resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-					"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-					"dev": true
-				}
+				"env-paths": "^2.2.0",
+				"exponential-backoff": "^3.1.1",
+				"glob": "^7.1.4",
+				"graceful-fs": "^4.2.6",
+				"make-fetch-happen": "^11.0.3",
+				"nopt": "^6.0.0",
+				"npmlog": "^6.0.0",
+				"rimraf": "^3.0.2",
+				"semver": "^7.3.5",
+				"tar": "^6.1.2",
+				"which": "^2.0.2"
+			},
+			"bin": {
+				"node-gyp": "bin/node-gyp.js"
+			},
+			"engines": {
+				"node": "^12.13 || ^14.13 || >=16"
 			}
 		},
-		"csstype": {
-			"version": "3.0.10",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-			"integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
-		},
-		"currently-unhandled": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-			"integrity": "sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==",
+		"node_modules/node-gyp-build": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
+			"integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"array-find-index": "^1.0.1"
+			"bin": {
+				"node-gyp-build": "bin.js",
+				"node-gyp-build-optional": "optional.js",
+				"node-gyp-build-test": "build-test.js"
 			}
 		},
-		"cwd": {
-			"version": "0.10.0",
-			"resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
-			"integrity": "sha1-FyQAaUBXwioTsM8WFix+S3p/5Wc=",
+		"node_modules/node-gyp/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dev": true,
-			"requires": {
-				"find-pkg": "^0.1.2",
-				"fs-exists-sync": "^0.1.0"
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"cyclist": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
-			"integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
-			"dev": true
-		},
-		"damerau-levenshtein": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
-			"integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==",
-			"dev": true
-		},
-		"dargs": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz",
-			"integrity": "sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==",
-			"dev": true
-		},
-		"dashdash": {
-			"version": "1.14.1",
-			"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-			"integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+		"node_modules/node-gyp/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
 			"dev": true,
-			"requires": {
-				"assert-plus": "^1.0.0"
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"data-urls": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-			"integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-			"dev": true,
-			"requires": {
-				"abab": "^2.0.3",
-				"whatwg-mimetype": "^2.3.0",
-				"whatwg-url": "^8.0.0"
-			},
-			"dependencies": {
-				"tr46": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-					"integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-					"dev": true,
-					"requires": {
-						"punycode": "^2.1.1"
-					}
-				},
-				"webidl-conversions": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-					"integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-					"dev": true
-				},
-				"whatwg-url": {
-					"version": "8.7.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-					"integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.7.0",
-						"tr46": "^2.1.0",
-						"webidl-conversions": "^6.1.0"
-					}
-				}
+		"node_modules/node-int64": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+			"integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
+		},
+		"node_modules/node-libs-browser": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+			"integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+			"dev": true,
+			"dependencies": {
+				"assert": "^1.1.1",
+				"browserify-zlib": "^0.2.0",
+				"buffer": "^4.3.0",
+				"console-browserify": "^1.1.0",
+				"constants-browserify": "^1.0.0",
+				"crypto-browserify": "^3.11.0",
+				"domain-browser": "^1.1.1",
+				"events": "^3.0.0",
+				"https-browserify": "^1.0.0",
+				"os-browserify": "^0.3.0",
+				"path-browserify": "0.0.1",
+				"process": "^0.11.10",
+				"punycode": "^1.2.4",
+				"querystring-es3": "^0.2.0",
+				"readable-stream": "^2.3.3",
+				"stream-browserify": "^2.0.1",
+				"stream-http": "^2.7.2",
+				"string_decoder": "^1.0.0",
+				"timers-browserify": "^2.0.4",
+				"tty-browserify": "0.0.0",
+				"url": "^0.11.0",
+				"util": "^0.11.0",
+				"vm-browserify": "^1.0.1"
 			}
 		},
-		"date-fns": {
-			"version": "1.29.0",
-			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
-			"integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==",
+		"node_modules/node-libs-browser/node_modules/punycode": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+			"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
 			"dev": true
 		},
-		"dateformat": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
-			"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
+		"node_modules/node-machine-id": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/node-machine-id/-/node-machine-id-1.1.12.tgz",
+			"integrity": "sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==",
 			"dev": true
 		},
-		"dayjs": {
-			"version": "1.10.7",
-			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
-			"integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig=="
+		"node_modules/node-releases": {
+			"version": "2.0.18",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+			"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
 		},
-		"debug": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-			"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-			"dev": true,
-			"requires": {
-				"ms": "2.0.0"
+		"node_modules/node-stream-zip": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
+			"integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw==",
+			"engines": {
+				"node": ">=0.12.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/antelle"
 			}
 		},
-		"debuglog": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
-			"integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=",
-			"dev": true
-		},
-		"decache": {
-			"version": "4.5.1",
-			"resolved": "https://registry.npmjs.org/decache/-/decache-4.5.1.tgz",
-			"integrity": "sha512-5J37nATc6FmOTLbcsr9qx7Nm28qQyg1SK4xyEHqM0IBkNhWFp0Sm+vKoWYHD8wq+OUEb9jLyaKFfzzd1A9hcoA==",
+		"node_modules/node-watch": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.0.tgz",
+			"integrity": "sha512-OOBiglke5SlRQT5WYfwXTmYqTfXjcTNBHpalyHLtLxDpQYVpVRkJqabcch1kmwJsjV/J4OZuzEafeb4soqtFZA==",
 			"dev": true,
-			"requires": {
-				"callsite": "^1.0.0"
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"decamelize": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-			"integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-		},
-		"decamelize-keys": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
-			"integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+		"node_modules/nopt": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+			"integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
 			"dev": true,
-			"requires": {
-				"decamelize": "^1.1.0",
-				"map-obj": "^1.0.0"
+			"dependencies": {
+				"abbrev": "^1.0.0"
+			},
+			"bin": {
+				"nopt": "bin/nopt.js"
 			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/normalize-package-data": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+			"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
 			"dependencies": {
-				"map-obj": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-					"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-					"dev": true
-				}
+				"hosted-git-info": "^2.1.4",
+				"resolve": "^1.10.0",
+				"semver": "2 || 3 || 4 || 5",
+				"validate-npm-package-license": "^3.0.1"
 			}
 		},
-		"decimal.js": {
-			"version": "10.3.1",
-			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-			"integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
-			"dev": true
+		"node_modules/normalize-package-data/node_modules/hosted-git-info": {
+			"version": "2.8.9",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
 		},
-		"decode-uri-component": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-			"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+		"node_modules/normalize-package-data/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
 		},
-		"decompress-response": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-			"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-			"dev": true,
-			"requires": {
-				"mimic-response": "^3.1.0"
+		"node_modules/normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/normalize-range": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/normalize-url": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+			"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"mimic-response": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-					"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"dedent": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-			"integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
-			"dev": true
+		"node_modules/normalize-wheel": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+			"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
 		},
-		"deep-equal": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-			"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+		"node_modules/npm-bundled": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+			"integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+			"dependencies": {
+				"npm-normalize-package-bin": "^1.0.1"
+			}
+		},
+		"node_modules/npm-install-checks": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-6.1.1.tgz",
+			"integrity": "sha512-dH3GmQL4vsPtld59cOn8uY0iOqRmqKvV+DLGwNXV/Q7MDgD2QfOADWd/mFXcIE5LVhYYGjA3baz6W9JneqnuCw==",
 			"dev": true,
-			"requires": {
-				"is-arguments": "^1.0.4",
-				"is-date-object": "^1.0.1",
-				"is-regex": "^1.0.4",
-				"object-is": "^1.0.1",
-				"object-keys": "^1.1.1",
-				"regexp.prototype.flags": "^1.2.0"
-			},
 			"dependencies": {
-				"object-keys": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-					"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-					"dev": true
-				}
+				"semver": "^7.1.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"deep-extend": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-			"dev": true
+		"node_modules/npm-normalize-package-bin": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+			"integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA=="
 		},
-		"deep-freeze": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
-			"integrity": "sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ=",
-			"dev": true
+		"node_modules/npm-package-arg": {
+			"version": "8.1.5",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.5.tgz",
+			"integrity": "sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==",
+			"dependencies": {
+				"hosted-git-info": "^4.0.1",
+				"semver": "^7.3.4",
+				"validate-npm-package-name": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"deep-is": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-			"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-			"dev": true
+		"node_modules/npm-package-json-lint": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/npm-package-json-lint/-/npm-package-json-lint-6.4.0.tgz",
+			"integrity": "sha512-cuXAJJB1Rdqz0UO6w524matlBqDBjcNt7Ru+RDIu4y6RI1gVqiWBnylrK8sPRk81gGBA0X8hJbDXolVOoTc+sA==",
+			"dependencies": {
+				"ajv": "^6.12.6",
+				"ajv-errors": "^1.0.1",
+				"chalk": "^4.1.2",
+				"cosmiconfig": "^8.0.0",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"ignore": "^5.2.0",
+				"is-plain-obj": "^3.0.0",
+				"jsonc-parser": "^3.2.0",
+				"log-symbols": "^4.1.0",
+				"meow": "^9.0.0",
+				"plur": "^4.0.0",
+				"semver": "^7.3.8",
+				"slash": "^3.0.0",
+				"strip-json-comments": "^3.1.1",
+				"type-fest": "^3.2.0",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"bin": {
+				"npmPkgJsonLint": "dist/cli.js"
+			},
+			"engines": {
+				"node": ">=14.0.0",
+				"npm": ">=6.0.0"
+			}
 		},
-		"deep-object-diff": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/deep-object-diff/-/deep-object-diff-1.1.0.tgz",
-			"integrity": "sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
 		},
-		"deepmerge": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-			"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
 		},
-		"default-browser-id": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-1.0.4.tgz",
-			"integrity": "sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==",
-			"dev": true,
-			"optional": true,
-			"requires": {
-				"bplist-parser": "^0.1.0",
-				"meow": "^3.1.0",
-				"untildify": "^2.0.0"
-			},
-			"dependencies": {
-				"bplist-parser": {
-					"version": "0.1.1",
-					"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.1.1.tgz",
-					"integrity": "sha512-2AEM0FXy8ZxVLBuqX0hqt1gDwcnz2zygEkQ6zaD5Wko/sB9paUNwlpawrFtKeHUAQUOzjVy9AO4oeonqIHKA9Q==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"big-integer": "^1.6.7"
-					}
-				},
-				"find-up": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-					"integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"path-exists": "^2.0.0",
-						"pinkie-promise": "^2.0.0"
-					}
-				},
-				"meow": {
-					"version": "3.7.0",
-					"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-					"integrity": "sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"camelcase-keys": "^2.0.0",
-						"decamelize": "^1.1.2",
-						"loud-rejection": "^1.0.0",
-						"map-obj": "^1.0.1",
-						"minimist": "^1.1.3",
-						"normalize-package-data": "^2.3.4",
-						"object-assign": "^4.0.1",
-						"read-pkg-up": "^1.0.1",
-						"redent": "^1.0.0",
-						"trim-newlines": "^1.0.0"
-					}
-				},
-				"path-exists": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-					"integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"pinkie-promise": "^2.0.0"
-					}
-				},
-				"path-type": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-					"integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"pify": "^2.0.0",
-						"pinkie-promise": "^2.0.0"
-					}
-				},
-				"read-pkg": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-					"integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"load-json-file": "^1.0.0",
-						"normalize-package-data": "^2.3.2",
-						"path-type": "^1.0.0"
-					}
-				},
-				"read-pkg-up": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-					"integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"find-up": "^1.0.0",
-						"read-pkg": "^1.0.0"
-					}
-				}
+		"node_modules/npm-package-json-lint/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"default-gateway": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-			"integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-			"dev": true,
-			"requires": {
-				"execa": "^5.0.0"
-			},
+		"node_modules/npm-package-json-lint/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
 			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.5",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
-					"integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
-		"defaults": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-			"integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
-			"requires": {
-				"clone": "^1.0.2"
+		"node_modules/npm-package-json-lint/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"defer-to-connect": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
-			"integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
 		},
-		"define-lazy-prop": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-			"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/jsonc-parser": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+			"integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+			"license": "MIT"
 		},
-		"define-properties": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
-			"integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=",
-			"requires": {
-				"foreach": "^2.0.5",
-				"object-keys": "^1.0.8"
+		"node_modules/npm-package-json-lint/node_modules/meow": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+			"integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+			"dependencies": {
+				"@types/minimist": "^1.2.0",
+				"camelcase-keys": "^6.2.2",
+				"decamelize": "^1.2.0",
+				"decamelize-keys": "^1.1.0",
+				"hard-rejection": "^2.1.0",
+				"minimist-options": "4.1.0",
+				"normalize-package-data": "^3.0.0",
+				"read-pkg-up": "^7.0.1",
+				"redent": "^3.0.0",
+				"trim-newlines": "^3.0.0",
+				"type-fest": "^0.18.0",
+				"yargs-parser": "^20.2.3"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"define-property": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-			"integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-			"requires": {
-				"is-descriptor": "^1.0.2",
-				"isobject": "^3.0.1"
+		"node_modules/npm-package-json-lint/node_modules/meow/node_modules/type-fest": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+			"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"is-accessor-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-					"integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-data-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-					"integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-descriptor": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-					"integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-					"requires": {
-						"is-accessor-descriptor": "^1.0.0",
-						"is-data-descriptor": "^1.0.0",
-						"kind-of": "^6.0.2"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"delayed-stream": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-			"dev": true
-		},
-		"delegate": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-			"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-		},
-		"delegates": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-			"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-			"dev": true
-		},
-		"denodeify": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
-			"integrity": "sha1-OjYof1A05pnnV3kBBSwubJQlFjE="
-		},
-		"depd": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-			"integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+		"node_modules/npm-package-json-lint/node_modules/normalize-package-data": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+			"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+			"dependencies": {
+				"hosted-git-info": "^4.0.1",
+				"is-core-module": "^2.5.0",
+				"semver": "^7.3.4",
+				"validate-npm-package-license": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"deprecation": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.0.0.tgz",
-			"integrity": "sha512-lbQN037mB3VfA2JFuguM5GCJ+zPinMeCrFe+AfSZ6eqrnJA/Fs+EYMnd6Nb2mn9lf2jO9xwEd9o9lic+D4vkcw==",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"des.js": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
-			"integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"minimalistic-assert": "^1.0.0"
+		"node_modules/npm-package-json-lint/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"destroy": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-			"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+		"node_modules/npm-package-json-lint/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"detab": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/detab/-/detab-2.0.4.tgz",
-			"integrity": "sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g==",
-			"dev": true,
-			"requires": {
-				"repeat-string": "^1.5.4"
+		"node_modules/npm-package-json-lint/node_modules/type-fest": {
+			"version": "3.13.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+			"integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"detect-indent": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
-			"integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50=",
-			"dev": true
+		"node_modules/npm-package-json-lint/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"detect-newline": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-			"integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-			"dev": true
+		"node_modules/npm-packlist": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-3.0.0.tgz",
+			"integrity": "sha512-L/cbzmutAwII5glUcf2DBRNY/d0TFd4e/FnaZigJV6JD85RHZXJFGwCndjMWiiViiWSsWt3tiOLpI3ByTnIdFQ==",
+			"dependencies": {
+				"glob": "^7.1.6",
+				"ignore-walk": "^4.0.1",
+				"npm-bundled": "^1.1.1",
+				"npm-normalize-package-bin": "^1.0.1"
+			},
+			"bin": {
+				"npm-packlist": "bin/index.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"detect-node": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-			"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-			"dev": true
+		"node_modules/npm-packlist/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
 		},
-		"detect-package-manager": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz",
-			"integrity": "sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==",
+		"node_modules/npm-pick-manifest": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-8.0.2.tgz",
+			"integrity": "sha512-1dKY+86/AIiq1tkKVD3l0WI+Gd3vkknVGAggsFeBkTvbhMQ1OND/LKkYv4JtXPKUJ8bOTCyLiqEg2P6QNdK+Gg==",
 			"dev": true,
-			"requires": {
-				"execa": "^5.1.1"
-			},
 			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"npm-install-checks": "^6.0.0",
+				"npm-normalize-package-bin": "^3.0.0",
+				"npm-package-arg": "^10.0.0",
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"detect-port": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
-			"integrity": "sha512-E+B1gzkl2gqxt1IhUzwjrxBKRqx1UzC3WLONHinn8S3T6lwV/agVCyitiFOsGJ/eYuEUBvD71MZHy3Pv1G9doQ==",
+		"node_modules/npm-pick-manifest/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
 			"dev": true,
-			"requires": {
-				"address": "^1.0.1",
-				"debug": "^2.6.0"
-			},
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				}
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"devtools-protocol": {
-			"version": "0.0.960912",
-			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.960912.tgz",
-			"integrity": "sha512-I3hWmV9rWHbdnUdmMKHF2NuYutIM2kXz2mdXW8ha7TbRlGTVs+PF+PsB5QWvpCek4Fy9B+msiispCfwlhG5Sqg==",
-			"dev": true
+		"node_modules/npm-pick-manifest/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"dezalgo": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
-			"integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+		"node_modules/npm-pick-manifest/node_modules/npm-normalize-package-bin": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+			"integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
 			"dev": true,
-			"requires": {
-				"asap": "^2.0.0",
-				"wrappy": "1"
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"diff": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-			"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+		"node_modules/npm-pick-manifest/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
+			"dev": true,
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"diff-sequences": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-			"integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-			"dev": true
+		"node_modules/npm-pick-manifest/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"diffie-hellman": {
-			"version": "5.0.3",
-			"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-			"integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+		"node_modules/npm-registry-fetch": {
+			"version": "14.0.5",
+			"resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-14.0.5.tgz",
+			"integrity": "sha512-kIDMIo4aBm6xg7jOttupWZamsZRkAqMqwqqbVXnUqstY5+tapvv6bkH/qMR76jdgV+YljEUCyWx3hRYMrJiAgA==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^4.1.0",
-				"miller-rabin": "^4.0.0",
-				"randombytes": "^2.0.0"
-			},
 			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				}
+				"make-fetch-happen": "^11.0.0",
+				"minipass": "^5.0.0",
+				"minipass-fetch": "^3.0.0",
+				"minipass-json-stream": "^1.0.1",
+				"minizlib": "^2.1.2",
+				"npm-package-arg": "^10.0.0",
+				"proc-log": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"dir-glob": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+		"node_modules/npm-registry-fetch/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
 			"dev": true,
-			"requires": {
-				"path-type": "^4.0.0"
-			},
 			"dependencies": {
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				}
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"dns-equal": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-			"integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
-			"dev": true
-		},
-		"dns-packet": {
-			"version": "1.3.4",
-			"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
-			"integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
+		"node_modules/npm-registry-fetch/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
 			"dev": true,
-			"requires": {
-				"ip": "^1.1.0",
-				"safe-buffer": "^5.0.1"
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"dns-txt": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-			"integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
+		"node_modules/npm-registry-fetch/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
 			"dev": true,
-			"requires": {
-				"buffer-indexof": "^1.0.0"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"docker-compose": {
-			"version": "0.22.2",
-			"resolved": "https://registry.npmjs.org/docker-compose/-/docker-compose-0.22.2.tgz",
-			"integrity": "sha512-iXWb5+LiYmylIMFXvGTYsjI1F+Xyx78Jm/uj1dxwwZLbWkUdH6yOXY5Nr3RjbYX15EgbGJCq78d29CmWQQQMPg==",
-			"dev": true
-		},
-		"doctrine": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-			"integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+		"node_modules/npm-registry-fetch/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
 			"dev": true,
-			"requires": {
-				"esutils": "^2.0.2"
+			"dependencies": {
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"dom-accessibility-api": {
-			"version": "0.5.14",
-			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
-			"integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
-			"dev": true
+		"node_modules/npm-registry-fetch/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"dom-converter": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-			"integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+		"node_modules/npm-run-all": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
+			"integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
 			"dev": true,
-			"requires": {
-				"utila": "~0.4"
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"chalk": "^2.4.1",
+				"cross-spawn": "^6.0.5",
+				"memorystream": "^0.3.1",
+				"minimatch": "^3.0.4",
+				"pidtree": "^0.3.0",
+				"read-pkg": "^3.0.0",
+				"shell-quote": "^1.6.1",
+				"string.prototype.padend": "^3.0.0"
+			},
+			"bin": {
+				"npm-run-all": "bin/npm-run-all/index.js",
+				"run-p": "bin/run-p/index.js",
+				"run-s": "bin/run-s/index.js"
+			},
+			"engines": {
+				"node": ">= 4"
 			}
 		},
-		"dom-helpers": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-			"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+		"node_modules/npm-run-all/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.8.7",
-				"csstype": "^3.0.2"
+			"dependencies": {
+				"color-convert": "^1.9.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/npm-run-all/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dev": true,
 			"dependencies": {
-				"csstype": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-					"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
-					"dev": true
-				}
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"dom-scroll-into-view": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz",
-			"integrity": "sha1-6PNnMt0ImwIBqI14Fdw/iObWbH4="
+		"node_modules/npm-run-all/node_modules/cross-spawn": {
+			"version": "6.0.5",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+			"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+			"dev": true,
+			"dependencies": {
+				"nice-try": "^1.0.4",
+				"path-key": "^2.0.1",
+				"semver": "^5.5.0",
+				"shebang-command": "^1.2.0",
+				"which": "^1.2.9"
+			},
+			"engines": {
+				"node": ">=4.8"
+			}
 		},
-		"dom-serializer": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
-			"integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
-			"requires": {
-				"domelementtype": "~1.1.1",
-				"entities": "~1.1.1"
+		"node_modules/npm-run-all/node_modules/load-json-file": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
+			"integrity": "sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==",
+			"dev": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.2",
+				"parse-json": "^4.0.0",
+				"pify": "^3.0.0",
+				"strip-bom": "^3.0.0"
 			},
-			"dependencies": {
-				"domelementtype": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
-					"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs="
-				}
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"dom-walk": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-			"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-			"dev": true
-		},
-		"domain-browser": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-			"integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
-			"dev": true
+		"node_modules/npm-run-all/node_modules/parse-json": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+			"integrity": "sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==",
+			"dev": true,
+			"dependencies": {
+				"error-ex": "^1.3.1",
+				"json-parse-better-errors": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"domelementtype": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
-			"integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI="
+		"node_modules/npm-run-all/node_modules/pify": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+			"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"domexception": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-			"integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
+		"node_modules/npm-run-all/node_modules/read-pkg": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+			"integrity": "sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==",
 			"dev": true,
-			"requires": {
-				"webidl-conversions": "^5.0.0"
-			},
 			"dependencies": {
-				"webidl-conversions": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-					"integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-					"dev": true
-				}
+				"load-json-file": "^4.0.0",
+				"normalize-package-data": "^2.3.2",
+				"path-type": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"domhandler": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-			"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
-			"requires": {
-				"domelementtype": "1"
+		"node_modules/npm-run-all/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver"
 			}
 		},
-		"domutils": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-			"integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
-			"requires": {
-				"dom-serializer": "0",
-				"domelementtype": "1"
+		"node_modules/npm-run-all/node_modules/strip-bom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"dot-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3"
+		"node_modules/npm-run-path": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+			"integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"dot-prop": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
-			"integrity": "sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==",
+		"node_modules/npmlog": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
+			"integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
 			"dev": true,
-			"requires": {
-				"is-obj": "^2.0.0"
+			"dependencies": {
+				"are-we-there-yet": "^3.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^4.0.3",
+				"set-blocking": "^2.0.0"
 			},
+			"engines": {
+				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+			}
+		},
+		"node_modules/nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
 			"dependencies": {
-				"is-obj": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-					"integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
-					"dev": true
-				}
+				"boolbase": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/nth-check?sponsor=1"
 			}
 		},
-		"dotenv": {
-			"version": "8.6.0",
-			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
-			"integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
-			"dev": true
+		"node_modules/nullthrows": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+			"integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
 		},
-		"dotenv-expand": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-			"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
-			"dev": true
+		"node_modules/number-is-nan": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+			"integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"downloadjs": {
-			"version": "1.4.7",
-			"resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
-			"integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+		"node_modules/nwsapi": {
+			"version": "2.2.13",
+			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+			"integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ=="
 		},
-		"downshift": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.0.tgz",
-			"integrity": "sha512-MnEJERij+1pTVAsOPsH3q9MJGNIZuu2sT90uxOCEOZYH6sEzkVGtUcTBVDRQkE8y96zpB7uEbRn24aE9VpHnZg==",
-			"requires": {
-				"@babel/runtime": "^7.12.5",
-				"compute-scroll-into-view": "^1.0.16",
-				"prop-types": "^15.7.2",
-				"react-is": "^17.0.1"
-			},
+		"node_modules/nx": {
+			"version": "16.6.0",
+			"resolved": "https://registry.npmjs.org/nx/-/nx-16.6.0.tgz",
+			"integrity": "sha512-4UaS9nRakpZs45VOossA7hzSQY2dsr035EoPRGOc81yoMFW6Sqn1Rgq4hiLbHZOY8MnWNsLMkgolNMz1jC8YUQ==",
+			"dev": true,
+			"hasInstallScript": true,
 			"dependencies": {
-				"react-is": {
-					"version": "17.0.1",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-					"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
+				"@nrwl/tao": "16.6.0",
+				"@parcel/watcher": "2.0.4",
+				"@yarnpkg/lockfile": "^1.1.0",
+				"@yarnpkg/parsers": "3.0.0-rc.46",
+				"@zkochan/js-yaml": "0.0.6",
+				"axios": "^1.0.0",
+				"chalk": "^4.1.0",
+				"cli-cursor": "3.1.0",
+				"cli-spinners": "2.6.1",
+				"cliui": "^7.0.2",
+				"dotenv": "~10.0.0",
+				"enquirer": "~2.3.6",
+				"fast-glob": "3.2.7",
+				"figures": "3.2.0",
+				"flat": "^5.0.2",
+				"fs-extra": "^11.1.0",
+				"glob": "7.1.4",
+				"ignore": "^5.0.4",
+				"js-yaml": "4.1.0",
+				"jsonc-parser": "3.2.0",
+				"lines-and-columns": "~2.0.3",
+				"minimatch": "3.0.5",
+				"node-machine-id": "1.1.12",
+				"npm-run-path": "^4.0.1",
+				"open": "^8.4.0",
+				"semver": "7.5.3",
+				"string-width": "^4.2.3",
+				"strong-log-transformer": "^2.1.0",
+				"tar-stream": "~2.2.0",
+				"tmp": "~0.2.1",
+				"tsconfig-paths": "^4.1.2",
+				"tslib": "^2.3.0",
+				"v8-compile-cache": "2.3.0",
+				"yargs": "^17.6.2",
+				"yargs-parser": "21.1.1"
+			},
+			"bin": {
+				"nx": "bin/nx.js"
+			},
+			"optionalDependencies": {
+				"@nx/nx-darwin-arm64": "16.6.0",
+				"@nx/nx-darwin-x64": "16.6.0",
+				"@nx/nx-freebsd-x64": "16.6.0",
+				"@nx/nx-linux-arm-gnueabihf": "16.6.0",
+				"@nx/nx-linux-arm64-gnu": "16.6.0",
+				"@nx/nx-linux-arm64-musl": "16.6.0",
+				"@nx/nx-linux-x64-gnu": "16.6.0",
+				"@nx/nx-linux-x64-musl": "16.6.0",
+				"@nx/nx-win32-arm64-msvc": "16.6.0",
+				"@nx/nx-win32-x64-msvc": "16.6.0"
+			},
+			"peerDependencies": {
+				"@swc-node/register": "^1.4.2",
+				"@swc/core": "^1.2.173"
+			},
+			"peerDependenciesMeta": {
+				"@swc-node/register": {
+					"optional": true
+				},
+				"@swc/core": {
+					"optional": true
 				}
 			}
 		},
-		"duplexer": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+		"node_modules/nx/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
 			"dev": true
 		},
-		"duplexer2": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
-			"integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+		"node_modules/nx/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
 			"dev": true,
-			"requires": {
-				"readable-stream": "^2.0.2"
+			"dependencies": {
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"duplexify": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz",
-			"integrity": "sha512-fO3Di4tBKJpYTFHAxTU00BcfWMY9w24r/x21a6rZRbsD/ToUgGxsMbiGRmB7uVAXeGKXD9MwiLZa5E97EVgIRQ==",
+		"node_modules/nx/node_modules/cliui": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+			"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
 			"dev": true,
-			"requires": {
-				"end-of-stream": "^1.0.0",
-				"inherits": "^2.0.1",
-				"readable-stream": "^2.0.0",
-				"stream-shift": "^1.0.0"
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^7.0.0"
 			}
 		},
-		"ecc-jsbn": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-			"integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+		"node_modules/nx/node_modules/dotenv": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+			"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"jsbn": "~0.1.0"
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"ee-first": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-			"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-		},
-		"elegant-spinner": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
-			"integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
+		"node_modules/nx/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
-		"element-resize-detector": {
-			"version": "1.2.4",
-			"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
-			"integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+		"node_modules/nx/node_modules/figures": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+			"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
 			"dev": true,
-			"requires": {
-				"batch-processor": "1.0.0"
+			"dependencies": {
+				"escape-string-regexp": "^1.0.5"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"elliptic": {
-			"version": "6.5.4",
-			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-			"integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+		"node_modules/nx/node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^4.11.9",
-				"brorand": "^1.1.0",
-				"hash.js": "^1.0.0",
-				"hmac-drbg": "^1.0.1",
-				"inherits": "^2.0.4",
-				"minimalistic-assert": "^1.0.1",
-				"minimalistic-crypto-utils": "^1.0.1"
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
 			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/nx/node_modules/glob": {
+			"version": "7.1.4",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+			"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+			"dev": true,
 			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				}
+				"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"
+			},
+			"engines": {
+				"node": "*"
 			}
 		},
-		"emittery": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
-			"integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
-			"dev": true
+		"node_modules/nx/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"emoji-regex": {
-			"version": "7.0.3",
-			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-			"integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+		"node_modules/nx/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dev": true,
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"emojis-list": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+		"node_modules/nx/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dev": true,
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/nx/node_modules/jsonc-parser": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+			"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
 			"dev": true
 		},
-		"emotion-theming": {
-			"version": "10.0.27",
-			"resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz",
-			"integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==",
+		"node_modules/nx/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.5",
-				"@emotion/weak-memoize": "0.2.5",
-				"hoist-non-react-statics": "^3.3.0"
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
 			}
 		},
-		"encodeurl": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-			"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-		},
-		"encoding": {
-			"version": "0.1.12",
-			"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-			"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-			"requires": {
-				"iconv-lite": "~0.4.13"
+		"node_modules/nx/node_modules/lines-and-columns": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.4.tgz",
+			"integrity": "sha512-wM1+Z03eypVAVUCE7QdSqpVIvelbOakn1M0bPDoA4SGWPx3sNDVUiMo3L6To6WWGClB7VyXnhQ4Sn7gxiJbE6A==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 			}
 		},
-		"end-of-stream": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-			"integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
-			"requires": {
-				"once": "^1.4.0"
+		"node_modules/nx/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dev": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"endent": {
+		"node_modules/nx/node_modules/mimic-fn": {
 			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/endent/-/endent-2.1.0.tgz",
-			"integrity": "sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
 			"dev": true,
-			"requires": {
-				"dedent": "^0.7.0",
-				"fast-json-parse": "^1.0.3",
-				"objectorarray": "^1.0.5"
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"enhanced-resolve": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-			"integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+		"node_modules/nx/node_modules/minimatch": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.5.tgz",
+			"integrity": "sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==",
 			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"memory-fs": "^0.5.0",
-				"tapable": "^1.0.0"
-			},
 			"dependencies": {
-				"memory-fs": {
-					"version": "0.5.0",
-					"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-					"integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-					"dev": true,
-					"requires": {
-						"errno": "^0.1.3",
-						"readable-stream": "^2.0.1"
-					}
-				}
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
 			}
 		},
-		"enquirer": {
-			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-			"integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+		"node_modules/nx/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
 			"dev": true,
-			"requires": {
-				"ansi-colors": "^4.1.1"
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"entities": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
-			"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
-		},
-		"env-paths": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-			"dev": true
-		},
-		"envinfo": {
-			"version": "7.8.1",
-			"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-			"integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-			"dev": true
-		},
-		"equivalent-key-map": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/equivalent-key-map/-/equivalent-key-map-0.2.2.tgz",
-			"integrity": "sha512-xvHeyCDbZzkpN4VHQj/n+j2lOwL0VWszG30X4cOrc9Y7Tuo2qCdZK/0AMod23Z5dCtNUbaju6p0rwOhHUk05ew=="
+		"node_modules/nx/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dev": true,
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"err-code": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-			"integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
-			"dev": true
+		"node_modules/nx/node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"dev": true,
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"errno": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
-			"integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
+		"node_modules/nx/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
 			"dev": true,
-			"requires": {
-				"prr": "~1.0.1"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"error-ex": {
-			"version": "1.3.2",
-			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-			"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-			"requires": {
-				"is-arrayish": "^0.2.1"
+		"node_modules/nx/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"error-stack-parser": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
-			"integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
-			"requires": {
-				"stackframe": "^1.1.1"
+		"node_modules/nx/node_modules/semver": {
+			"version": "7.5.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
+			"integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+			"dev": true,
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"errorhandler": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/errorhandler/-/errorhandler-1.5.1.tgz",
-			"integrity": "sha512-rcOwbfvP1WTViVoUjcfZicVzjhjTuhSMntHh6mW3IrEiyE6mJyXvsToJUJGlGlw/2xU9P5whlWNGlIDVeCiT4A==",
-			"requires": {
-				"accepts": "~1.3.7",
-				"escape-html": "~1.0.3"
+		"node_modules/nx/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"es-abstract": {
-			"version": "1.12.0",
-			"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
-			"integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==",
+		"node_modules/nx/node_modules/strip-bom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
 			"dev": true,
-			"requires": {
-				"es-to-primitive": "^1.1.1",
-				"function-bind": "^1.1.1",
-				"has": "^1.0.1",
-				"is-callable": "^1.1.3",
-				"is-regex": "^1.0.4"
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"es-array-method-boxes-properly": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-			"integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
-			"dev": true
+		"node_modules/nx/node_modules/tmp": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+			"integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.14"
+			}
 		},
-		"es-get-iterator": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
-			"integrity": "sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==",
+		"node_modules/nx/node_modules/tsconfig-paths": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+			"integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"get-intrinsic": "^1.1.0",
-				"has-symbols": "^1.0.1",
-				"is-arguments": "^1.1.0",
-				"is-map": "^2.0.2",
-				"is-set": "^2.0.2",
-				"is-string": "^1.0.5",
-				"isarray": "^2.0.5"
-			},
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"isarray": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-					"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-					"dev": true
-				}
+				"json5": "^2.2.2",
+				"minimist": "^1.2.6",
+				"strip-bom": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"es-shim-unscopables": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
-			"integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+		"node_modules/nx/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
 			"dev": true,
-			"requires": {
-				"has": "^1.0.3"
+			"engines": {
+				"node": ">= 10.0.0"
 			}
 		},
-		"es-to-primitive": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
-			"integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
+		"node_modules/nx/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 			"dev": true,
-			"requires": {
-				"is-callable": "^1.1.1",
-				"is-date-object": "^1.0.1",
-				"is-symbol": "^1.0.1"
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"es5-shim": {
-			"version": "4.6.7",
-			"resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.7.tgz",
-			"integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ==",
-			"dev": true
+		"node_modules/nx/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"es6-shim": {
-			"version": "0.35.6",
-			"resolved": "https://registry.npmjs.org/es6-shim/-/es6-shim-0.35.6.tgz",
-			"integrity": "sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA==",
+		"node_modules/nx/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true
 		},
-		"escalade": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-			"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
-		},
-		"escape-html": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-			"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-		},
-		"escape-string-regexp": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-			"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
-		},
-		"escodegen": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
-			"integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
+		"node_modules/nx/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
 			"dev": true,
-			"requires": {
-				"esprima": "^4.0.1",
-				"estraverse": "^5.2.0",
-				"esutils": "^2.0.2",
-				"optionator": "^0.8.1",
-				"source-map": "~0.6.1"
-			},
 			"dependencies": {
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true,
-					"optional": true
-				}
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"eslint": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.3.0.tgz",
-			"integrity": "sha512-aIay56Ph6RxOTC7xyr59Kt3ewX185SaGnAr8eWukoPLeriCrvGjvAubxuvaXOfsxhtwV5g0uBOsyhAom4qJdww==",
+		"node_modules/nx/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
 			"dev": true,
-			"requires": {
-				"@eslint/eslintrc": "^1.0.4",
-				"@humanwhocodes/config-array": "^0.6.0",
-				"ajv": "^6.10.0",
-				"chalk": "^4.0.0",
-				"cross-spawn": "^7.0.2",
-				"debug": "^4.3.2",
-				"doctrine": "^3.0.0",
-				"enquirer": "^2.3.5",
-				"escape-string-regexp": "^4.0.0",
-				"eslint-scope": "^7.1.0",
-				"eslint-utils": "^3.0.0",
-				"eslint-visitor-keys": "^3.1.0",
-				"espree": "^9.1.0",
-				"esquery": "^1.4.0",
-				"esutils": "^2.0.2",
-				"fast-deep-equal": "^3.1.3",
-				"file-entry-cache": "^6.0.1",
-				"functional-red-black-tree": "^1.0.1",
-				"glob-parent": "^6.0.1",
-				"globals": "^13.6.0",
-				"ignore": "^4.0.6",
-				"import-fresh": "^3.0.0",
-				"imurmurhash": "^0.1.4",
-				"is-glob": "^4.0.0",
-				"js-yaml": "^4.1.0",
-				"json-stable-stringify-without-jsonify": "^1.0.1",
-				"levn": "^0.4.1",
-				"lodash.merge": "^4.6.2",
-				"minimatch": "^3.0.4",
-				"natural-compare": "^1.4.0",
-				"optionator": "^0.9.1",
-				"progress": "^2.0.0",
-				"regexpp": "^3.2.0",
-				"semver": "^7.2.1",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/nx/node_modules/yargs/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dev": true,
+			"dependencies": {
+				"string-width": "^4.2.0",
 				"strip-ansi": "^6.0.1",
-				"strip-json-comments": "^3.1.0",
-				"text-table": "^0.2.0",
-				"v8-compile-cache": "^2.0.3"
+				"wrap-ansi": "^7.0.0"
 			},
-			"dependencies": {
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"doctrine": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-					"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-					"dev": true,
-					"requires": {
-						"esutils": "^2.0.2"
-					}
-				},
-				"escape-string-regexp": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-					"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-					"dev": true
-				},
-				"eslint-scope": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz",
-					"integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==",
-					"dev": true,
-					"requires": {
-						"esrecurse": "^4.3.0",
-						"estraverse": "^5.2.0"
-					}
-				},
-				"eslint-visitor-keys": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
-					"integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
-					"dev": true
-				},
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				},
-				"glob-parent": {
-					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-					"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.3"
-					},
-					"dependencies": {
-						"is-glob": {
-							"version": "4.0.3",
-							"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-							"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-							"dev": true,
-							"requires": {
-								"is-extglob": "^2.1.1"
-							}
-						}
-					}
-				},
-				"ignore": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-					"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-					"dev": true
-				},
-				"js-yaml": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-					"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"levn": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-					"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-					"dev": true,
-					"requires": {
-						"prelude-ls": "^1.2.1",
-						"type-check": "~0.4.0"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"optionator": {
-					"version": "0.9.1",
-					"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-					"integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
-					"dev": true,
-					"requires": {
-						"deep-is": "^0.1.3",
-						"fast-levenshtein": "^2.0.6",
-						"levn": "^0.4.1",
-						"prelude-ls": "^1.2.1",
-						"type-check": "^0.4.0",
-						"word-wrap": "^1.2.3"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"prelude-ls": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-					"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"strip-json-comments": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-					"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-					"dev": true
-				},
-				"type-check": {
-					"version": "0.4.0",
-					"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-					"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-					"dev": true,
-					"requires": {
-						"prelude-ls": "^1.2.1"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"eslint-config-prettier": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
-			"integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
-			"dev": true
-		},
-		"eslint-import-resolver-node": {
-			"version": "0.3.4",
-			"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
-			"integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
+		"node_modules/nypm": {
+			"version": "0.3.6",
+			"resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.6.tgz",
+			"integrity": "sha512-2CATJh3pd6CyNfU5VZM7qSwFu0ieyabkEdnogE30Obn1czrmOYiZ8DOZLe1yBdLKWoyD3Mcy2maUs+0MR3yVjQ==",
 			"dev": true,
-			"requires": {
-				"debug": "^2.6.9",
-				"resolve": "^1.13.1"
-			},
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				}
+				"citty": "^0.1.5",
+				"execa": "^8.0.1",
+				"pathe": "^1.1.2",
+				"ufo": "^1.3.2"
+			},
+			"bin": {
+				"nypm": "dist/cli.mjs"
+			},
+			"engines": {
+				"node": "^14.16.0 || >=16.10.0"
 			}
 		},
-		"eslint-module-utils": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz",
-			"integrity": "sha512-fjoetBXQZq2tSTWZ9yWVl2KuFrTZZH3V+9iD1V1RfpDgxzJR+mPd/KZmMiA8gbPqdBzpNiEHOuT7IYEWxrH0zQ==",
+		"node_modules/nypm/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
 			"dev": true,
-			"requires": {
-				"debug": "^3.2.7",
-				"find-up": "^2.1.0",
-				"pkg-dir": "^2.0.0"
-			},
 			"dependencies": {
-				"debug": {
-					"version": "3.2.7",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-					"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"ms": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-					"dev": true
-				}
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"eslint-plugin-eslint-comments": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-eslint-comments/-/eslint-plugin-eslint-comments-3.1.2.tgz",
-			"integrity": "sha512-QexaqrNeteFfRTad96W+Vi4Zj1KFbkHHNMMaHZEYcovKav6gdomyGzaxSDSL3GoIyUOo078wRAdYlu1caiauIQ==",
+		"node_modules/nypm/node_modules/execa": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+			"integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
 			"dev": true,
-			"requires": {
-				"escape-string-regexp": "^1.0.5",
-				"ignore": "^5.0.5"
-			},
 			"dependencies": {
-				"ignore": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.2.tgz",
-					"integrity": "sha512-vdqWBp7MyzdmHkkRWV5nY+PfGRbYbahfuvsBCh277tq+w9zyNi7h5CYJCK0kmzti9kU+O/cB7sE8HvKv6aXAKQ==",
-					"dev": true
-				}
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^8.0.1",
+				"human-signals": "^5.0.0",
+				"is-stream": "^3.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^5.1.0",
+				"onetime": "^6.0.0",
+				"signal-exit": "^4.1.0",
+				"strip-final-newline": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=16.17"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 			}
 		},
-		"eslint-plugin-import": {
-			"version": "2.25.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.2.tgz",
-			"integrity": "sha512-qCwQr9TYfoBHOFcVGKY9C9unq05uOxxdklmBXLVvcwo68y5Hta6/GzCZEMx2zQiu0woKNEER0LE7ZgaOfBU14g==",
+		"node_modules/nypm/node_modules/get-stream": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+			"integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
 			"dev": true,
-			"requires": {
-				"array-includes": "^3.1.4",
-				"array.prototype.flat": "^1.2.5",
-				"debug": "^2.6.9",
-				"doctrine": "^2.1.0",
-				"eslint-import-resolver-node": "^0.3.6",
-				"eslint-module-utils": "^2.7.0",
-				"has": "^1.0.3",
-				"is-core-module": "^2.7.0",
-				"is-glob": "^4.0.3",
-				"minimatch": "^3.0.4",
-				"object.values": "^1.1.5",
-				"resolve": "^1.20.0",
-				"tsconfig-paths": "^3.11.0"
+			"engines": {
+				"node": ">=16"
 			},
-			"dependencies": {
-				"array-includes": {
-					"version": "3.1.4",
-					"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
-					"integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1",
-						"get-intrinsic": "^1.1.1",
-						"is-string": "^1.0.7"
-					}
-				},
-				"array.prototype.flat": {
-					"version": "1.2.5",
-					"resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
-					"integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-					"integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.1",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.1",
-						"object-inspect": "^1.11.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"eslint-import-resolver-node": {
-					"version": "0.3.6",
-					"resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
-					"integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
-					"dev": true,
-					"requires": {
-						"debug": "^3.2.7",
-						"resolve": "^1.20.0"
-					},
-					"dependencies": {
-						"debug": {
-							"version": "3.2.7",
-							"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-							"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-							"dev": true,
-							"requires": {
-								"ms": "^2.1.1"
-							}
-						},
-						"ms": {
-							"version": "2.1.3",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-							"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-							"dev": true
-						}
-					}
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"internal-slot": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-					"integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-					"dev": true,
-					"requires": {
-						"get-intrinsic": "^1.1.0",
-						"has": "^1.0.3",
-						"side-channel": "^1.0.4"
-					}
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-core-module": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
-					"integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.11.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-					"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"object.values": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-					"integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"side-channel": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"get-intrinsic": "^1.0.2",
-						"object-inspect": "^1.9.0"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/human-signals": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+			"integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=16.17.0"
 			}
 		},
-		"eslint-plugin-jest": {
-			"version": "25.2.3",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.2.3.tgz",
-			"integrity": "sha512-Yoa0at3euTjERDvPGPWiItY1uuqKYQ5Ov2SmkSLmKRq9OFiVdEehw0rWuK4PA538k7CNqnvmkztjAB9l+HJ7kQ==",
+		"node_modules/nypm/node_modules/is-stream": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+			"integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
 			"dev": true,
-			"requires": {
-				"@typescript-eslint/experimental-utils": "^5.0.0"
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"eslint-plugin-jest-dom": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-4.0.2.tgz",
-			"integrity": "sha512-Jo51Atwyo2TdcUncjmU+UQeSTKh3sc2LF/M5i/R3nTU0Djw9V65KGJisdm/RtuKhy2KH/r7eQ1n6kwYFPNdHlA==",
+		"node_modules/nypm/node_modules/mimic-fn": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+			"integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.16.3",
-				"@testing-library/dom": "^8.11.1",
-				"requireindex": "^1.2.0"
+			"engines": {
+				"node": ">=12"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/npm-run-path": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+			"integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+			"dev": true,
 			"dependencies": {
-				"@babel/runtime": {
-					"version": "7.19.4",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz",
-					"integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==",
-					"dev": true,
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				}
+				"path-key": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"eslint-plugin-jsdoc": {
-			"version": "37.0.3",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-37.0.3.tgz",
-			"integrity": "sha512-Qg/gIZAfcrM4Qu/JzcnxPGD45Je6wPLFzMZQboeqit/CL4aY6wuzBTkgUMiWXfw/PaPl+sb0GF1XdBlV23ReDA==",
+		"node_modules/nypm/node_modules/npm-run-path/node_modules/path-key": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+			"integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
 			"dev": true,
-			"requires": {
-				"@es-joy/jsdoccomment": "0.12.0",
-				"comment-parser": "1.2.4",
-				"debug": "^4.3.2",
-				"esquery": "^1.4.0",
-				"jsdoc-type-pratt-parser": "^2.0.0",
-				"lodash": "^4.17.21",
-				"regextras": "^0.8.0",
-				"semver": "^7.3.5",
-				"spdx-expression-parse": "^3.0.1"
+			"engines": {
+				"node": ">=12"
 			},
-			"dependencies": {
-				"comment-parser": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.2.4.tgz",
-					"integrity": "sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"spdx-expression-parse": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-					"integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-					"dev": true,
-					"requires": {
-						"spdx-exceptions": "^2.1.0",
-						"spdx-license-ids": "^3.0.0"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"eslint-plugin-jsx-a11y": {
-			"version": "6.5.1",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz",
-			"integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
+		"node_modules/nypm/node_modules/onetime": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+			"integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.16.3",
-				"aria-query": "^4.2.2",
-				"array-includes": "^3.1.4",
-				"ast-types-flow": "^0.0.7",
-				"axe-core": "^4.3.5",
-				"axobject-query": "^2.2.0",
-				"damerau-levenshtein": "^1.0.7",
-				"emoji-regex": "^9.2.2",
-				"has": "^1.0.3",
-				"jsx-ast-utils": "^3.2.1",
-				"language-tags": "^1.0.5",
-				"minimatch": "^3.0.4"
+			"dependencies": {
+				"mimic-fn": "^4.0.0"
 			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/nypm/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
 			"dependencies": {
-				"@babel/runtime": {
-					"version": "7.16.3",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
-					"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
-					"dev": true,
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				},
-				"array-includes": {
-					"version": "3.1.4",
-					"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
-					"integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1",
-						"get-intrinsic": "^1.1.1",
-						"is-string": "^1.0.7"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"emoji-regex": {
-					"version": "9.2.2",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-					"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-					"dev": true
-				},
-				"es-abstract": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-					"integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.1",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.1",
-						"object-inspect": "^1.11.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"internal-slot": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-					"integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-					"dev": true,
-					"requires": {
-						"get-intrinsic": "^1.1.0",
-						"has": "^1.0.3",
-						"side-channel": "^1.0.4"
-					}
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"jsx-ast-utils": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
-					"integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==",
-					"dev": true,
-					"requires": {
-						"array-includes": "^3.1.3",
-						"object.assign": "^4.1.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.11.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-					"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"side-channel": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"get-intrinsic": "^1.0.2",
-						"object-inspect": "^1.9.0"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"eslint-plugin-playwright": {
-			"version": "0.8.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-0.8.0.tgz",
-			"integrity": "sha512-9uJH25m6H3jwU5O7bHD5M8cLx46L72EnIUe3dZqTox6M+WzOFzeUWaDJHHCdLGXZ8XlAU4mbCZnP7uhjKepfRA==",
-			"dev": true
+		"node_modules/nypm/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"eslint-plugin-prettier": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.0.tgz",
-			"integrity": "sha512-tMTwO8iUWlSRZIwS9k7/E4vrTsfvsrcM5p1eftyuqWH25nKsz/o6/54I7jwQ/3zobISyC7wMy9ZsFwgTxOcOpQ==",
+		"node_modules/nypm/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
 			"dev": true,
-			"requires": {
-				"prettier-linter-helpers": "^1.0.0"
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"eslint-plugin-react": {
-			"version": "7.27.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.27.0.tgz",
-			"integrity": "sha512-0Ut+CkzpppgFtoIhdzi2LpdpxxBvgFf99eFqWxJnUrO7mMe0eOiNpou6rvNYeVVV6lWZvTah0BFne7k5xHjARg==",
+		"node_modules/nypm/node_modules/strip-final-newline": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+			"integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
 			"dev": true,
-			"requires": {
-				"array-includes": "^3.1.4",
-				"array.prototype.flatmap": "^1.2.5",
-				"doctrine": "^2.1.0",
-				"estraverse": "^5.3.0",
-				"jsx-ast-utils": "^2.4.1 || ^3.0.0",
-				"minimatch": "^3.0.4",
-				"object.entries": "^1.1.5",
-				"object.fromentries": "^2.0.5",
-				"object.hasown": "^1.1.0",
-				"object.values": "^1.1.5",
-				"prop-types": "^15.7.2",
-				"resolve": "^2.0.0-next.3",
-				"semver": "^6.3.0",
-				"string.prototype.matchall": "^4.0.6"
+			"engines": {
+				"node": ">=12"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/nypm/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
 			"dependencies": {
-				"array-includes": {
-					"version": "3.1.4",
-					"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz",
-					"integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1",
-						"get-intrinsic": "^1.1.1",
-						"is-string": "^1.0.7"
-					}
-				},
-				"array.prototype.flatmap": {
-					"version": "1.2.5",
-					"resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
-					"integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0"
-					}
-				},
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-					"integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.1",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.1",
-						"object-inspect": "^1.11.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"internal-slot": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-					"integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-					"dev": true,
-					"requires": {
-						"get-intrinsic": "^1.1.0",
-						"has": "^1.0.3",
-						"side-channel": "^1.0.4"
-					}
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.11.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-					"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"object.entries": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
-					"integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1"
-					}
-				},
-				"object.fromentries": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
-					"integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1"
-					}
-				},
-				"object.values": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
-					"integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.3.1",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
-					"integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"resolve": {
-					"version": "2.0.0-next.3",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
-					"integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				},
-				"side-channel": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"get-intrinsic": "^1.0.2",
-						"object-inspect": "^1.9.0"
-					}
-				},
-				"string.prototype.matchall": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
-					"integrity": "sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.1",
-						"get-intrinsic": "^1.1.1",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"regexp.prototype.flags": "^1.3.1",
-						"side-channel": "^1.0.4"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"eslint-plugin-react-hooks": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz",
-			"integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==",
-			"dev": true
+		"node_modules/ob1": {
+			"version": "0.80.5",
+			"resolved": "https://registry.npmjs.org/ob1/-/ob1-0.80.5.tgz",
+			"integrity": "sha512-zYDMnnNrFi/1Tqh0vo3PE4p97Tpl9/4MP2k2ECvkbLOZzQuAYZJLTUYVLZb7hJhbhjT+JJxAwBGS8iu5hCSd1w==",
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"eslint-plugin-ssr-friendly": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-ssr-friendly/-/eslint-plugin-ssr-friendly-1.0.6.tgz",
-			"integrity": "sha512-O1S/0Q8FYTl1c4vwIr0cg59u37mL5qe7sxpMzjdIo2v8l0LjCugU699trmkgOheQINTq7R9yhfCo6YaAb4tYUQ==",
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-copy": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+			"integrity": "sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==",
 			"dev": true,
-			"requires": {
-				"globals": "^13.8.0"
+			"dependencies": {
+				"copy-descriptor": "^0.1.0",
+				"define-property": "^0.2.5",
+				"kind-of": "^3.0.3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"eslint-plugin-testing-library": {
-			"version": "5.7.2",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.7.2.tgz",
-			"integrity": "sha512-0ZmHeR/DUUgEzW8rwUBRWxuqntipDtpvxK0hymdHnLlABryJkzd+CAHr+XnISaVsTisZ5MLHp6nQF+8COHLLTA==",
+		"node_modules/object-copy/node_modules/define-property": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+			"integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
 			"dev": true,
-			"requires": {
-				"@typescript-eslint/utils": "^5.13.0"
+			"dependencies": {
+				"is-descriptor": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"eslint-scope": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-			"integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+		"node_modules/object-copy/node_modules/kind-of": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+			"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
 			"dev": true,
-			"requires": {
-				"esrecurse": "^4.1.0",
-				"estraverse": "^4.1.1"
+			"dependencies": {
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"eslint-utils": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-			"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+		"node_modules/object-filter": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/object-filter/-/object-filter-1.0.2.tgz",
+			"integrity": "sha512-NahvP2vZcy1ZiiYah30CEPw0FpDcSkSePJBMpzl5EQgCmISijiGuJm3SPYp7U+Lf2TljyaIw3E5EgkEx/TNEVA=="
+		},
+		"node_modules/object-inspect": {
+			"version": "1.13.1",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+			"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object-is": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
+			"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
 			"dev": true,
-			"requires": {
-				"eslint-visitor-keys": "^2.0.0"
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"eslint-visitor-keys": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-			"integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+		"node_modules/object-keys": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/object-visit": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+			"integrity": "sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==",
+			"dev": true,
+			"dependencies": {
+				"isobject": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object.assign": {
+			"version": "4.1.4",
+			"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+			"integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"has-symbols": "^1.0.3",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object.entries": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
+			"integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/object.fromentries": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
+			"integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object.hasown": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
+			"integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+			"dependencies": {
+				"define-properties": "^1.1.3",
+				"es-abstract": "^1.19.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object.pick": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+			"integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+			"dev": true,
+			"dependencies": {
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object.values": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
+			"integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/objectorarray": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz",
+			"integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
+			"dev": true
+		},
+		"node_modules/obuf": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+			"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+		},
+		"node_modules/octokit-pagination-methods": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
+			"integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
 			"dev": true
 		},
-		"espree": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-9.1.0.tgz",
-			"integrity": "sha512-ZgYLvCS1wxOczBYGcQT9DDWgicXwJ4dbocr9uYN+/eresBAUuBu+O4WzB21ufQ/JqQT8gyp7hJ3z8SHii32mTQ==",
-			"dev": true,
-			"requires": {
-				"acorn": "^8.6.0",
-				"acorn-jsx": "^5.3.1",
-				"eslint-visitor-keys": "^3.1.0"
-			},
+		"node_modules/ohash": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.3.tgz",
+			"integrity": "sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==",
+			"dev": true
+		},
+		"node_modules/on-finished": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+			"integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
 			"dependencies": {
-				"acorn": {
-					"version": "8.6.0",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
-					"integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
-					"dev": true
-				},
-				"eslint-visitor-keys": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz",
-					"integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==",
-					"dev": true
-				}
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"esprima": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+		"node_modules/on-headers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
-		"esquery": {
+		"node_modules/once": {
 			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
-			"integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
-			"dev": true,
-			"requires": {
-				"estraverse": "^5.1.0"
-			},
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
 			"dependencies": {
-				"estraverse": {
-					"version": "5.3.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-					"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-					"dev": true
-				}
+				"wrappy": "1"
 			}
 		},
-		"esrecurse": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+		"node_modules/one-time": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+			"integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
 			"dev": true,
-			"requires": {
-				"estraverse": "^5.2.0"
-			},
 			"dependencies": {
-				"estraverse": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-					"integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-					"dev": true
-				}
+				"fn.name": "1.x.x"
 			}
 		},
-		"estraverse": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
-			"integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
-			"dev": true
-		},
-		"estree-to-babel": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/estree-to-babel/-/estree-to-babel-3.2.1.tgz",
-			"integrity": "sha512-YNF+mZ/Wu2FU/gvmzuWtYc8rloubL7wfXCTgouFrnjGVXPA/EeYYA7pupXWrb3Iv1cTBeSSxxJIbK23l4MRNqg==",
+		"node_modules/onetime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+			"integrity": "sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==",
 			"dev": true,
-			"requires": {
-				"@babel/traverse": "^7.1.6",
-				"@babel/types": "^7.2.0",
-				"c8": "^7.6.0"
+			"dependencies": {
+				"mimic-fn": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"esutils": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-			"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-			"dev": true
-		},
-		"etag": {
-			"version": "1.8.1",
-			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-			"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-		},
-		"event-target-shim": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
-			"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
-		},
-		"eventemitter2": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-1.0.5.tgz",
-			"integrity": "sha1-+YNhBRexc3wLncZDvsqTiTwE3xg="
+		"node_modules/open": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+			"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+			"dependencies": {
+				"is-wsl": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"eventemitter3": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+		"node_modules/opencv-bindings": {
+			"version": "4.5.5",
+			"resolved": "https://registry.npmjs.org/opencv-bindings/-/opencv-bindings-4.5.5.tgz",
+			"integrity": "sha512-FdYE9uqnoPKbAkZFEOpIh6RTtJIz1lz+W27xPCo1Ov6+d0OOgg+Hm9OT2MIGIG8V1Dp3fWlLvi7SIjDOpqO2XA==",
 			"dev": true
 		},
-		"events": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-			"dev": true
+		"node_modules/opener": {
+			"version": "1.5.2",
+			"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+			"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+			"bin": {
+				"opener": "bin/opener-bin.js"
+			}
 		},
-		"evp_bytestokey": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-			"integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
-			"dev": true,
-			"requires": {
-				"md5.js": "^1.3.4",
-				"safe-buffer": "^5.1.1"
+		"node_modules/optionator": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+			"integrity": "sha512-oCOQ8AIC2ciLy/sE2ehafRBleBgDLvzGhBRRev87sP7ovnbvQfqpc3XFI0DhHey2OfVoNV91W+GPC6B3540/5Q==",
+			"dependencies": {
+				"deep-is": "~0.1.3",
+				"fast-levenshtein": "~2.0.4",
+				"levn": "~0.3.0",
+				"prelude-ls": "~1.1.2",
+				"type-check": "~0.3.2",
+				"wordwrap": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"exec-sh": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.2.tgz",
-			"integrity": "sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg=="
+		"node_modules/ora": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/ora/-/ora-4.1.1.tgz",
+			"integrity": "sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==",
+			"dependencies": {
+				"chalk": "^3.0.0",
+				"cli-cursor": "^3.1.0",
+				"cli-spinners": "^2.2.0",
+				"is-interactive": "^1.0.0",
+				"log-symbols": "^3.0.0",
+				"mute-stream": "0.0.8",
+				"strip-ansi": "^6.0.0",
+				"wcwidth": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"execa": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/execa/-/execa-4.0.2.tgz",
-			"integrity": "sha512-QI2zLa6CjGWdiQsmSkZoGtDx2N+cQIGb3yNolGTdjSQzydzLgYYf8LRuagp7S7fPimjcrzUDSUFd/MgzELMi4Q==",
-			"dev": true,
-			"requires": {
-				"cross-spawn": "^7.0.0",
-				"get-stream": "^5.0.0",
-				"human-signals": "^1.1.1",
-				"is-stream": "^2.0.0",
-				"merge-stream": "^2.0.0",
-				"npm-run-path": "^4.0.0",
-				"onetime": "^5.1.0",
-				"signal-exit": "^3.0.2",
-				"strip-final-newline": "^2.0.0"
+		"node_modules/ora/node_modules/chalk": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+			"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ora/node_modules/cli-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+			"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
 			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"get-stream": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz",
-					"integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==",
-					"dev": true,
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"is-stream": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-					"integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-					"dev": true
-				},
-				"merge-stream": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-					"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-					"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"restore-cursor": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"execall": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-			"integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-			"dev": true,
-			"requires": {
-				"clone-regexp": "^2.1.0"
+		"node_modules/ora/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"exit": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-			"integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
-			"dev": true
+		"node_modules/ora/node_modules/log-symbols": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+			"integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+			"dependencies": {
+				"chalk": "^2.4.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"expand-brackets": {
-			"version": "2.1.4",
-			"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-			"integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-			"requires": {
-				"debug": "^2.3.3",
-				"define-property": "^0.2.5",
-				"extend-shallow": "^2.0.1",
-				"posix-character-classes": "^0.1.0",
-				"regex-not": "^1.0.0",
-				"snapdragon": "^0.8.1",
-				"to-regex": "^3.0.1"
+		"node_modules/ora/node_modules/log-symbols/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/ora/node_modules/log-symbols/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"define-property": {
-					"version": "0.2.5",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-					"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-					"requires": {
-						"is-descriptor": "^0.1.0"
-					}
-				},
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				}
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"expand-tilde": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
-			"integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
-			"dev": true,
-			"requires": {
-				"os-homedir": "^1.0.1"
+		"node_modules/ora/node_modules/log-symbols/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"expect": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
-			"integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^26.6.2",
-				"ansi-styles": "^4.0.0",
-				"jest-get-type": "^26.3.0",
-				"jest-matcher-utils": "^26.6.2",
-				"jest-message-util": "^26.6.2",
-				"jest-regex-util": "^26.0.0"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-					"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^15.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/istanbul-reports": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-					"integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-report": "*"
-					}
-				},
-				"@types/stack-utils": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
-					"integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-					"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"escape-string-regexp": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-					"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.4",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-					"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-get-type": {
-					"version": "26.3.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-					"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-					"dev": true
-				},
-				"jest-matcher-utils": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
-					"integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.0.0",
-						"jest-diff": "^26.6.2",
-						"jest-get-type": "^26.3.0",
-						"pretty-format": "^26.6.2"
-					}
-				},
-				"jest-message-util": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
-					"integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.0.0",
-						"@jest/types": "^26.6.2",
-						"@types/stack-utils": "^2.0.0",
-						"chalk": "^4.0.0",
-						"graceful-fs": "^4.2.4",
-						"micromatch": "^4.0.2",
-						"pretty-format": "^26.6.2",
-						"slash": "^3.0.0",
-						"stack-utils": "^2.0.2"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
-					"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.0.5"
-					}
-				},
-				"pretty-format": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-					"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^26.6.2",
-						"ansi-regex": "^5.0.0",
-						"ansi-styles": "^4.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.1",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-					"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
-					"dev": true
-				},
-				"slash": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-					"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-					"dev": true
-				},
-				"stack-utils": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
-					"integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
-					"dev": true,
-					"requires": {
-						"escape-string-regexp": "^2.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+		"node_modules/ora/node_modules/log-symbols/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"expect-puppeteer": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/expect-puppeteer/-/expect-puppeteer-4.4.0.tgz",
-			"integrity": "sha512-6Ey4Xy2xvmuQu7z7YQtMsaMV0EHJRpVxIDOd5GRrm04/I3nkTKIutELfECsLp6le+b3SSa3cXhPiw6PgqzxYWA==",
-			"dev": true
+		"node_modules/ora/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"express": {
-			"version": "4.17.1",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-			"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-			"dev": true,
-			"requires": {
-				"accepts": "~1.3.7",
-				"array-flatten": "1.1.1",
-				"body-parser": "1.19.0",
-				"content-disposition": "0.5.3",
-				"content-type": "~1.0.4",
-				"cookie": "0.4.0",
-				"cookie-signature": "1.0.6",
-				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"encodeurl": "~1.0.2",
-				"escape-html": "~1.0.3",
-				"etag": "~1.8.1",
-				"finalhandler": "~1.1.2",
-				"fresh": "0.5.2",
-				"merge-descriptors": "1.0.1",
-				"methods": "~1.1.2",
-				"on-finished": "~2.3.0",
-				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.7",
-				"proxy-addr": "~2.0.5",
-				"qs": "6.7.0",
-				"range-parser": "~1.2.1",
-				"safe-buffer": "5.1.2",
-				"send": "0.17.1",
-				"serve-static": "1.14.1",
-				"setprototypeof": "1.1.1",
-				"statuses": "~1.5.0",
-				"type-is": "~1.6.18",
-				"utils-merge": "1.0.1",
-				"vary": "~1.1.2"
+		"node_modules/ora/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/ora/node_modules/restore-cursor": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+			"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
 			"dependencies": {
-				"accepts": {
-					"version": "1.3.7",
-					"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-					"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-					"dev": true,
-					"requires": {
-						"mime-types": "~2.1.24",
-						"negotiator": "0.6.2"
-					}
-				},
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"http-errors": {
-					"version": "1.7.3",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-					"integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.4",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					}
-				},
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"mime": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-					"dev": true
-				},
-				"mime-db": {
-					"version": "1.43.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-					"integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.26",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-					"integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.43.0"
-					}
-				},
-				"negotiator": {
-					"version": "0.6.2",
-					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-					"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-					"dev": true
-				},
-				"parseurl": {
-					"version": "1.3.3",
-					"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-					"dev": true
-				},
-				"qs": {
-					"version": "6.7.0",
-					"resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-					"integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-					"dev": true
-				},
-				"range-parser": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-					"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-					"dev": true
-				},
-				"send": {
-					"version": "0.17.1",
-					"resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-					"integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-					"dev": true,
-					"requires": {
-						"debug": "2.6.9",
-						"depd": "~1.1.2",
-						"destroy": "~1.0.4",
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"etag": "~1.8.1",
-						"fresh": "0.5.2",
-						"http-errors": "~1.7.2",
-						"mime": "1.6.0",
-						"ms": "2.1.1",
-						"on-finished": "~2.3.0",
-						"range-parser": "~1.2.1",
-						"statuses": "~1.5.0"
-					},
-					"dependencies": {
-						"ms": {
-							"version": "2.1.1",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-							"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-							"dev": true
-						}
-					}
-				},
-				"serve-static": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-					"integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-					"dev": true,
-					"requires": {
-						"encodeurl": "~1.0.2",
-						"escape-html": "~1.0.3",
-						"parseurl": "~1.3.3",
-						"send": "0.17.1"
-					}
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
-				}
+				"onetime": "^5.1.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"extend": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+		"node_modules/ora/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/os-browserify": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+			"integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
 			"dev": true
 		},
-		"extend-shallow": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-			"integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-			"requires": {
-				"assign-symbols": "^1.0.0",
-				"is-extendable": "^1.0.1"
-			},
+		"node_modules/os-homedir": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+			"integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/os-name": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
+			"integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
+			"dev": true,
 			"dependencies": {
-				"is-extendable": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-					"integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-					"requires": {
-						"is-plain-object": "^2.0.4"
-					},
-					"dependencies": {
-						"is-plain-object": {
-							"version": "2.0.4",
-							"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-							"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-							"requires": {
-								"isobject": "^3.0.1"
-							}
-						}
-					}
-				}
+				"macos-release": "^2.2.0",
+				"windows-release": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"external-editor": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
-			"integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
+		"node_modules/os-tmpdir": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+			"integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/p-cancelable": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+			"integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-finally": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+			"integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
 			"dev": true,
-			"requires": {
-				"chardet": "^0.7.0",
-				"iconv-lite": "^0.4.24",
-				"tmp": "^0.0.33"
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/p-limit": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+			"dependencies": {
+				"yocto-queue": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+			"integrity": "sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==",
 			"dependencies": {
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				}
+				"p-limit": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"extglob": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-			"integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-			"requires": {
-				"array-unique": "^0.3.2",
-				"define-property": "^1.0.0",
-				"expand-brackets": "^2.1.4",
-				"extend-shallow": "^2.0.1",
-				"fragment-cache": "^0.2.1",
-				"regex-not": "^1.0.0",
-				"snapdragon": "^0.8.1",
-				"to-regex": "^3.0.1"
+		"node_modules/p-locate/node_modules/p-limit": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+			"integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+			"dependencies": {
+				"p-try": "^1.0.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/p-map": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+			"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+			"dev": true,
 			"dependencies": {
-				"define-property": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-					"integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-					"requires": {
-						"is-descriptor": "^1.0.0"
-					}
-				},
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				},
-				"is-accessor-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-					"integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-data-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-					"integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-descriptor": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-					"integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-					"requires": {
-						"is-accessor-descriptor": "^1.0.0",
-						"is-data-descriptor": "^1.0.0",
-						"kind-of": "^6.0.2"
-					}
-				}
+				"aggregate-error": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"extract-zip": {
-			"version": "1.6.7",
-			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz",
-			"integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=",
+		"node_modules/p-map-series": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-2.1.0.tgz",
+			"integrity": "sha512-RpYIIK1zXSNEOdwxcfe7FdvGcs7+y5n8rifMhMNWvaxRNMPINJHF5GDeuVxWqnfrcHPSCnp7Oo5yNXHId9Av2Q==",
 			"dev": true,
-			"requires": {
-				"concat-stream": "1.6.2",
-				"debug": "2.6.9",
-				"mkdirp": "0.5.1",
-				"yauzl": "2.4.1"
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-pipe": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz",
+			"integrity": "sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-queue": {
+			"version": "6.6.2",
+			"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+			"integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				}
+				"eventemitter3": "^4.0.4",
+				"p-timeout": "^3.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"extsprintf": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-			"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-			"dev": true
+		"node_modules/p-reduce": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-2.1.0.tgz",
+			"integrity": "sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"fast-average-color": {
-			"version": "9.1.1",
-			"resolved": "https://registry.npmjs.org/fast-average-color/-/fast-average-color-9.1.1.tgz",
-			"integrity": "sha512-PJizLBcGb/jqUzrH66385te4+GcOK7wcUiCDvBUszdpzc/pvV1kwifvvsFygV3mS+7qwnWmK9/BrZniaOOC9ag==",
-			"requires": {
-				"@types/offscreencanvas": "^2019.7.0"
+		"node_modules/p-retry": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+			"integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/retry": "0.12.0",
+				"retry": "^0.13.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"fast-base64-decode": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
-			"integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q=="
+		"node_modules/p-retry/node_modules/retry": {
+			"version": "0.13.1",
+			"resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+			"integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4"
+			}
 		},
-		"fast-deep-equal": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-			"dev": true
+		"node_modules/p-timeout": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+			"integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+			"dev": true,
+			"dependencies": {
+				"p-finally": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"fast-diff": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-			"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-			"dev": true
+		"node_modules/p-try": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+			"integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"fast-glob": {
-			"version": "3.2.7",
-			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
-			"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+		"node_modules/p-waterfall": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/p-waterfall/-/p-waterfall-2.1.1.tgz",
+			"integrity": "sha512-RRTnDb2TBG/epPRI2yYXsimO0v3BXC8Yd3ogr1545IaqKK17VGhbWVeGGN+XfCm/08OK8635nH31c8bATkHuSw==",
 			"dev": true,
-			"requires": {
-				"@nodelib/fs.stat": "^2.0.2",
-				"@nodelib/fs.walk": "^1.2.3",
-				"glob-parent": "^5.1.2",
-				"merge2": "^1.3.0",
-				"micromatch": "^4.0.4"
+			"dependencies": {
+				"p-reduce": "^2.0.0"
 			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pac-proxy-agent": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
+			"integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"@tootallnate/quickjs-emscripten": "^0.23.0",
+				"agent-base": "^7.0.2",
+				"debug": "^4.3.4",
+				"get-uri": "^6.0.1",
+				"http-proxy-agent": "^7.0.0",
+				"https-proxy-agent": "^7.0.2",
+				"pac-resolver": "^7.0.0",
+				"socks-proxy-agent": "^8.0.2"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"fast-json-parse": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz",
-			"integrity": "sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==",
-			"dev": true
+		"node_modules/pac-proxy-agent/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"fast-json-stable-stringify": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
-			"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-			"dev": true
+		"node_modules/pac-proxy-agent/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"fast-levenshtein": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-			"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-			"dev": true
+		"node_modules/pac-proxy-agent/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"fast-memoize": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
-			"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
+		"node_modules/pac-proxy-agent/node_modules/socks-proxy-agent": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+			"integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.1",
+				"debug": "^4.3.4",
+				"socks": "^2.8.3"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"fastest-levenshtein": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-			"integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-			"dev": true
+		"node_modules/pac-resolver": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.0.tgz",
+			"integrity": "sha512-Fd9lT9vJbHYRACT8OhCbZBbxr6KRSawSovFpy8nDGshaK99S/EBhVIHp9+crhxrsZOuvLpgL1n23iyPg6Rl2hg==",
+			"dependencies": {
+				"degenerator": "^5.0.0",
+				"ip": "^1.1.8",
+				"netmask": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"fastq": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
-			"integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+		"node_modules/package-changed": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/package-changed/-/package-changed-3.0.0.tgz",
+			"integrity": "sha512-HSRbrO+Ab5AuqqYGSevtKJ1Yt96jW1VKV7wrp8K4SKj5tyDp/7D96uPCQyCPiNtWTEH/7nA3hZ4z2slbc9yFxg==",
 			"dev": true,
-			"requires": {
-				"reusify": "^1.0.0"
+			"dependencies": {
+				"commander": "^6.2.0"
+			},
+			"bin": {
+				"package-changed": "bin/package-changed.js"
 			}
 		},
-		"fault": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-			"integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+		"node_modules/package-changed/node_modules/commander": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+			"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
 			"dev": true,
-			"requires": {
-				"format": "^0.2.0"
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"faye-websocket": {
-			"version": "0.11.4",
-			"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-			"integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+		"node_modules/package-json-from-dist": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+			"integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0"
+		},
+		"node_modules/pacote": {
+			"version": "15.2.0",
+			"resolved": "https://registry.npmjs.org/pacote/-/pacote-15.2.0.tgz",
+			"integrity": "sha512-rJVZeIwHTUta23sIZgEIM62WYwbmGbThdbnkt81ravBplQv+HjyroqnLRNH2+sLJHcGZmLRmhPwACqhfTcOmnA==",
+			"dev": true,
+			"dependencies": {
+				"@npmcli/git": "^4.0.0",
+				"@npmcli/installed-package-contents": "^2.0.1",
+				"@npmcli/promise-spawn": "^6.0.1",
+				"@npmcli/run-script": "^6.0.0",
+				"cacache": "^17.0.0",
+				"fs-minipass": "^3.0.0",
+				"minipass": "^5.0.0",
+				"npm-package-arg": "^10.0.0",
+				"npm-packlist": "^7.0.0",
+				"npm-pick-manifest": "^8.0.0",
+				"npm-registry-fetch": "^14.0.0",
+				"proc-log": "^3.0.0",
+				"promise-retry": "^2.0.1",
+				"read-package-json": "^6.0.0",
+				"read-package-json-fast": "^3.0.0",
+				"sigstore": "^1.3.0",
+				"ssri": "^10.0.0",
+				"tar": "^6.1.11"
+			},
+			"bin": {
+				"pacote": "lib/bin.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/pacote/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
 			"dev": true,
-			"requires": {
-				"websocket-driver": ">=0.5.1"
+			"dependencies": {
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"fb-watchman": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.0.tgz",
-			"integrity": "sha1-VOmr99+i8mzZsWNsWIwa/AXeXVg=",
-			"requires": {
-				"bser": "^2.0.0"
+		"node_modules/pacote/node_modules/cacache": {
+			"version": "17.1.4",
+			"resolved": "https://registry.npmjs.org/cacache/-/cacache-17.1.4.tgz",
+			"integrity": "sha512-/aJwG2l3ZMJ1xNAnqbMpA40of9dj/pIH3QfiuQSqjfPJF747VR0J/bHn+/KdNnHKc6XQcWt/AfRSBft82W1d2A==",
+			"dev": true,
+			"dependencies": {
+				"@npmcli/fs": "^3.1.0",
+				"fs-minipass": "^3.0.0",
+				"glob": "^10.2.2",
+				"lru-cache": "^7.7.1",
+				"minipass": "^7.0.3",
+				"minipass-collect": "^1.0.2",
+				"minipass-flush": "^1.0.5",
+				"minipass-pipeline": "^1.2.4",
+				"p-map": "^4.0.0",
+				"ssri": "^10.0.0",
+				"tar": "^6.1.11",
+				"unique-filename": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"fd-slicer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz",
-			"integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=",
+		"node_modules/pacote/node_modules/cacache/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
-			"requires": {
-				"pend": "~1.2.0"
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"fetch-retry": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-5.0.2.tgz",
-			"integrity": "sha512-57Hmu+1kc6pKFUGVIobT7qw3NeAzY/uNN26bSevERLVvf6VGFR/ooDCOFBHMNDgAxBiU2YJq1D0vFzc6U1DcPw==",
-			"dev": true
+		"node_modules/pacote/node_modules/fs-minipass": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+			"integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+			"dev": true,
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"figgy-pudding": {
-			"version": "3.5.1",
-			"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
-			"integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
-			"dev": true
+		"node_modules/pacote/node_modules/fs-minipass/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
 		},
-		"figures": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-			"integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+		"node_modules/pacote/node_modules/glob": {
+			"version": "10.4.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
 			"dev": true,
-			"requires": {
-				"escape-string-regexp": "^1.0.5"
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"file-entry-cache": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-			"integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+		"node_modules/pacote/node_modules/glob/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
-			"requires": {
-				"flat-cache": "^3.0.4"
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"file-loader": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-			"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+		"node_modules/pacote/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
 			"dev": true,
-			"requires": {
-				"loader-utils": "^2.0.0",
-				"schema-utils": "^3.0.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				}
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"file-system-cache": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.1.0.tgz",
-			"integrity": "sha512-IzF5MBq+5CR0jXx5RxPe4BICl/oEhBSXKaL9fLhAXrIfIUS77Hr4vzrYyqYMHN6uTt+BOqi3fDCTjjEBCjERKw==",
-			"dev": true,
-			"requires": {
-				"fs-extra": "^10.1.0",
-				"ramda": "^0.28.0"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "10.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-					"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+		"node_modules/pacote/node_modules/ignore-walk": {
+			"version": "6.0.5",
+			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-6.0.5.tgz",
+			"integrity": "sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==",
+			"dev": true,
+			"dependencies": {
+				"minimatch": "^9.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"file-uri-to-path": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-			"integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+		"node_modules/pacote/node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
 			"dev": true,
-			"optional": true
-		},
-		"filename-reserved-regex": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
-			"integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
-			"dev": true
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
 		},
-		"filenamify": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.2.0.tgz",
-			"integrity": "sha512-pkgE+4p7N1n7QieOopmn3TqJaefjdWXwEkj2XLZJLKfOgcQKkn11ahvGNgTD8mLggexLiDFQxeTs14xVU22XPA==",
+		"node_modules/pacote/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
 			"dev": true,
-			"requires": {
-				"filename-reserved-regex": "^2.0.0",
-				"strip-outer": "^1.0.1",
-				"trim-repeated": "^1.0.0"
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"fill-range": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-			"integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-			"requires": {
-				"extend-shallow": "^2.0.1",
-				"is-number": "^3.0.0",
-				"repeat-string": "^1.6.1",
-				"to-regex-range": "^2.1.0"
-			},
+		"node_modules/pacote/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
 			"dependencies": {
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				}
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"filter-obj": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
-			"integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+		"node_modules/pacote/node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"finalhandler": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-			"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-			"requires": {
-				"debug": "2.6.9",
-				"encodeurl": "~1.0.2",
-				"escape-html": "~1.0.3",
-				"on-finished": "~2.3.0",
-				"parseurl": "~1.3.3",
-				"statuses": "~1.5.0",
-				"unpipe": "~1.0.0"
-			},
+		"node_modules/pacote/node_modules/npm-package-arg": {
+			"version": "10.1.0",
+			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-10.1.0.tgz",
+			"integrity": "sha512-uFyyCEmgBfZTtrKk/5xDfHp6+MdrqGotX/VoOyEEl3mBwiEE5FlBaePanazJSVMPT7vKepcjYBY2ztg9A3yPIA==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"parseurl": {
-					"version": "1.3.3",
-					"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-					"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
-				}
+				"hosted-git-info": "^6.0.0",
+				"proc-log": "^3.0.0",
+				"semver": "^7.3.5",
+				"validate-npm-package-name": "^5.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"find-cache-dir": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-			"integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-			"requires": {
-				"commondir": "^1.0.1",
-				"make-dir": "^2.0.0",
-				"pkg-dir": "^3.0.0"
-			},
+		"node_modules/pacote/node_modules/npm-packlist": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-7.0.4.tgz",
+			"integrity": "sha512-d6RGEuRrNS5/N84iglPivjaJPxhDbZmlbTwTDX2IbcRHG5bZCdtysYMhwiPvcF4GisXHGn7xsxv+GQ7T/02M5Q==",
+			"dev": true,
 			"dependencies": {
-				"find-up": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-					"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-					"requires": {
-						"locate-path": "^3.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-					"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-					"requires": {
-						"p-locate": "^3.0.0",
-						"path-exists": "^3.0.0"
-					}
-				},
-				"make-dir": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-					"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-					"requires": {
-						"pify": "^4.0.1",
-						"semver": "^5.6.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-					"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-					"requires": {
-						"p-limit": "^2.0.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
-				},
-				"pkg-dir": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-					"integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-					"requires": {
-						"find-up": "^3.0.0"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-				}
+				"ignore-walk": "^6.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"find-file-up": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz",
-			"integrity": "sha1-z2gJG8+fMApA2kEbN9pczlovvqA=",
+		"node_modules/pacote/node_modules/ssri": {
+			"version": "10.0.6",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-10.0.6.tgz",
+			"integrity": "sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==",
 			"dev": true,
-			"requires": {
-				"fs-exists-sync": "^0.1.0",
-				"resolve-dir": "^0.1.0"
+			"dependencies": {
+				"minipass": "^7.0.3"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"find-parent-dir": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
-			"integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=",
-			"dev": true
-		},
-		"find-pkg": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz",
-			"integrity": "sha1-G9wiwG42NlUy4qJIBGhUuXiNpVc=",
+		"node_modules/pacote/node_modules/ssri/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
-			"requires": {
-				"find-file-up": "^0.1.2"
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"find-process": {
-			"version": "1.4.7",
-			"resolved": "https://registry.npmjs.org/find-process/-/find-process-1.4.7.tgz",
-			"integrity": "sha512-/U4CYp1214Xrp3u3Fqr9yNynUrr5Le4y0SsJh2lMDDSbpwYSz3M2SMWQC+wqcx79cN8PQtHQIL8KnuY9M66fdg==",
+		"node_modules/pacote/node_modules/unique-filename": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
+			"integrity": "sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==",
 			"dev": true,
-			"requires": {
-				"chalk": "^4.0.0",
-				"commander": "^5.1.0",
-				"debug": "^4.1.1"
-			},
 			"dependencies": {
-				"commander": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
-					"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"unique-slug": "^4.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"find-root": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-		},
-		"find-up": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-			"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+		"node_modules/pacote/node_modules/unique-slug": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-4.0.0.tgz",
+			"integrity": "sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==",
 			"dev": true,
-			"requires": {
-				"locate-path": "^2.0.0"
+			"dependencies": {
+				"imurmurhash": "^0.1.4"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"find-yarn-workspace-root": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz",
-			"integrity": "sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q==",
-			"dev": true,
-			"requires": {
-				"fs-extra": "^4.0.3",
-				"micromatch": "^3.1.4"
-			},
-			"dependencies": {
-				"fs-extra": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-					"integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"jsonfile": "^4.0.0",
-						"universalify": "^0.1.0"
-					}
-				}
+		"node_modules/pacote/node_modules/validate-npm-package-name": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.1.tgz",
+			"integrity": "sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"flat": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
-			"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+		"node_modules/pako": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+			"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
 			"dev": true
 		},
-		"flat-cache": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
-			"integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+		"node_modules/parallel-transform": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+			"integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
 			"dev": true,
-			"requires": {
-				"flatted": "^3.1.0",
-				"rimraf": "^3.0.2"
+			"dependencies": {
+				"cyclist": "^1.0.1",
+				"inherits": "^2.0.3",
+				"readable-stream": "^2.1.5"
 			}
 		},
-		"flatted": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
-			"integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==",
-			"dev": true
+		"node_modules/param-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
 		},
-		"flow-parser": {
-			"version": "0.121.0",
-			"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.121.0.tgz",
-			"integrity": "sha512-1gIBiWJNR0tKUNv8gZuk7l9rVX06OuLzY9AoGio7y/JT4V1IZErEMEq2TJS+PFcw/y0RshZ1J/27VfK1UQzYVg=="
+		"node_modules/parent-module": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+			"dependencies": {
+				"callsites": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"flush-write-stream": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
-			"integrity": "sha512-calZMC10u0FMUqoiunI2AiGIIUtUIvifNwkHhNupZH4cbNnW1Itkoh/Nf5HFYmDrwWPjrUxpkZT0KhuCq0jmGw==",
+		"node_modules/parse-asn1": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+			"integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
 			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"readable-stream": "^2.0.4"
+			"dependencies": {
+				"asn1.js": "^5.2.0",
+				"browserify-aes": "^1.0.0",
+				"evp_bytestokey": "^1.0.0",
+				"pbkdf2": "^3.0.3",
+				"safe-buffer": "^5.1.1"
 			}
 		},
-		"follow-redirects": {
-			"version": "1.15.2",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-			"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-			"dev": true
-		},
-		"for-in": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-			"integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+		"node_modules/parse-cache-control": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+			"integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
 		},
-		"for-own": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-			"integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-			"dev": true,
-			"requires": {
-				"for-in": "^1.0.1"
+		"node_modules/parse-entities": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+			"integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+			"dependencies": {
+				"character-entities": "^1.0.0",
+				"character-entities-legacy": "^1.0.0",
+				"character-reference-invalid": "^1.0.0",
+				"is-alphanumerical": "^1.0.0",
+				"is-decimal": "^1.0.0",
+				"is-hexadecimal": "^1.0.0"
 			}
 		},
-		"foreach": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
-			"integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
+		"node_modules/parse-json": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+			"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+			"dependencies": {
+				"@babel/code-frame": "^7.0.0",
+				"error-ex": "^1.3.1",
+				"json-parse-even-better-errors": "^2.3.0",
+				"lines-and-columns": "^1.1.6"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"foreground-child": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
-			"integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==",
+		"node_modules/parse-listing": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/parse-listing/-/parse-listing-1.1.3.tgz",
+			"integrity": "sha512-a1p1i+9Qyc8pJNwdrSvW1g5TPxRH0sywVi6OzVvYHRo6xwF9bDWBxtH0KkxeOOvhUE8vAMtiSfsYQFOuK901eA==",
 			"dev": true,
-			"requires": {
-				"cross-spawn": "^7.0.0",
-				"signal-exit": "^3.0.2"
-			},
-			"dependencies": {
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+			"engines": {
+				"node": ">=0.6.21"
 			}
 		},
-		"forever-agent": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-			"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-			"dev": true
+		"node_modules/parse-passwd": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+			"integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"fork-ts-checker-webpack-plugin": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
-			"integrity": "sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==",
+		"node_modules/parse-path": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
+			"integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
 			"dev": true,
-			"requires": {
-				"@babel/code-frame": "^7.8.3",
-				"@types/json-schema": "^7.0.5",
-				"chalk": "^4.1.0",
-				"chokidar": "^3.4.2",
-				"cosmiconfig": "^6.0.0",
-				"deepmerge": "^4.2.2",
-				"fs-extra": "^9.0.0",
-				"glob": "^7.1.6",
-				"memfs": "^3.1.2",
-				"minimatch": "^3.0.4",
-				"schema-utils": "2.7.0",
-				"semver": "^7.3.2",
-				"tapable": "^1.0.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"cosmiconfig": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-					"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.1.0",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.7.2"
-					}
-				},
-				"fs-extra": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-					"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-					"dev": true,
-					"requires": {
-						"at-least-node": "^1.0.0",
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					},
-					"dependencies": {
-						"minimatch": {
-							"version": "3.1.2",
-							"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-							"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-							"dev": true,
-							"requires": {
-								"brace-expansion": "^1.1.7"
-							}
-						}
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "2.7.0",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-					"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.4",
-						"ajv": "^6.12.2",
-						"ajv-keywords": "^3.4.1"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				}
+				"protocols": "^2.0.0"
 			}
 		},
-		"form-data": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-			"dev": true,
-			"requires": {
-				"asynckit": "^0.4.0",
-				"combined-stream": "^1.0.8",
-				"mime-types": "^2.1.12"
-			},
+		"node_modules/parse-url": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
+			"integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
+			"dev": true,
 			"dependencies": {
-				"combined-stream": {
-					"version": "1.0.8",
-					"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-					"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-					"dev": true,
-					"requires": {
-						"delayed-stream": "~1.0.0"
-					}
-				}
+				"parse-path": "^7.0.0"
 			}
 		},
-		"format": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-			"integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
-			"dev": true
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
 		},
-		"forwarded": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-			"integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
-			"dev": true
+		"node_modules/parse5/node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
 		},
-		"fraction.js": {
-			"version": "4.0.13",
-			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz",
-			"integrity": "sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==",
-			"dev": true
+		"node_modules/parsel-js": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/parsel-js/-/parsel-js-1.1.2.tgz",
+			"integrity": "sha512-D66DG2nKx4Yoq66TMEyCUHlR2STGqO7vsBrX7tgyS9cfQyO6XD5JyzOiflwmWN6a4wbUAqpmHqmrxlTQVGZcbA==",
+			"license": "MIT"
 		},
-		"fragment-cache": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-			"integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-			"requires": {
-				"map-cache": "^0.2.2"
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"framer-motion": {
-			"version": "6.2.8",
-			"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.2.8.tgz",
-			"integrity": "sha512-4PtBWFJ6NqR350zYVt9AsFDtISTqsdqna79FvSYPfYDXuuqFmiKtZdkTnYPslnsOMedTW0pEvaQ7eqjD+sA+HA==",
-			"requires": {
-				"@emotion/is-prop-valid": "^0.8.2",
-				"framesync": "6.0.1",
-				"hey-listen": "^1.0.8",
-				"popmotion": "11.0.3",
-				"style-value-types": "5.0.0",
-				"tslib": "^2.1.0"
+		"node_modules/pascal-case": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
 			}
 		},
-		"framesync": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
-			"integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
-			"requires": {
-				"tslib": "^2.1.0"
+		"node_modules/pascalcase": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+			"integrity": "sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"fresh": {
-			"version": "0.5.2",
-			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-			"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-		},
-		"from2": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-			"integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+		"node_modules/patch-package": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
+			"integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
 			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"readable-stream": "^2.0.0"
+			"dependencies": {
+				"@yarnpkg/lockfile": "^1.1.0",
+				"chalk": "^4.1.2",
+				"ci-info": "^3.7.0",
+				"cross-spawn": "^7.0.3",
+				"find-yarn-workspace-root": "^2.0.0",
+				"fs-extra": "^9.0.0",
+				"json-stable-stringify": "^1.0.2",
+				"klaw-sync": "^6.0.0",
+				"minimist": "^1.2.6",
+				"open": "^7.4.2",
+				"rimraf": "^2.6.3",
+				"semver": "^7.5.3",
+				"slash": "^2.0.0",
+				"tmp": "^0.0.33",
+				"yaml": "^2.2.2"
+			},
+			"bin": {
+				"patch-package": "index.js"
+			},
+			"engines": {
+				"node": ">=14",
+				"npm": ">5"
 			}
 		},
-		"fs-constants": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-			"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-			"dev": true
+		"node_modules/patch-package/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
 		},
-		"fs-exists-sync": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-			"integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
-			"dev": true
+		"node_modules/patch-package/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dev": true,
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"fs-extra": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-			"integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-			"requires": {
+		"node_modules/patch-package/node_modules/fs-extra": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+			"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+			"dev": true,
+			"dependencies": {
+				"at-least-node": "^1.0.0",
 				"graceful-fs": "^4.2.0",
-				"jsonfile": "^4.0.0",
-				"universalify": "^0.1.0"
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
 			},
-			"dependencies": {
-				"graceful-fs": {
-					"version": "4.2.4",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-					"integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
-				}
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"fs-minipass": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+		"node_modules/patch-package/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0"
-			},
 			"dependencies": {
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"fs-monkey": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-			"integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
-			"dev": true
-		},
-		"fs-write-stream-atomic": {
-			"version": "1.0.10",
-			"resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-			"integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+		"node_modules/patch-package/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"iferr": "^0.1.5",
-				"imurmurhash": "^0.1.4",
-				"readable-stream": "1 || 2"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"fs.realpath": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
-		},
-		"fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"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==",
+		"node_modules/patch-package/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
 			"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"
-					}
-				}
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"function-bind": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-		},
-		"function.prototype.name": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
-			"integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
+		"node_modules/patch-package/node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.18.0-next.2",
-				"functions-have-names": "^1.2.2"
+			"dependencies": {
+				"universalify": "^2.0.0"
 			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/patch-package/node_modules/open": {
+			"version": "7.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+			"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+			"dev": true,
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.18.0",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
-					"integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"is-callable": "^1.2.3",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.2",
-						"is-string": "^1.0.5",
-						"object-inspect": "^1.9.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.0"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						},
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
-					"integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-					"integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.2",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
-					"integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"object-inspect": {
-					"version": "1.9.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-					"integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"is-docker": "^2.0.0",
+				"is-wsl": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"functional-red-black-tree": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-			"integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-			"dev": true
+		"node_modules/patch-package/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"gauge": {
-			"version": "4.0.4",
-			"resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
-			"integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
+		"node_modules/patch-package/node_modules/rimraf": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
 			"dev": true,
-			"requires": {
-				"aproba": "^1.0.3 || ^2.0.0",
-				"color-support": "^1.1.3",
-				"console-control-strings": "^1.1.0",
-				"has-unicode": "^2.0.1",
-				"signal-exit": "^3.0.7",
-				"string-width": "^4.2.3",
-				"strip-ansi": "^6.0.1",
-				"wide-align": "^1.1.5"
+			"dependencies": {
+				"glob": "^7.1.3"
 			},
+			"bin": {
+				"rimraf": "bin.js"
+			}
+		},
+		"node_modules/patch-package/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dev": true,
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.7",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-					"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"wide-align": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-					"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-					"dev": true,
-					"requires": {
-						"string-width": "^1.0.2 || 2 || 3 || 4"
-					}
-				}
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"gensync": {
-			"version": "1.0.0-beta.2",
-			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
+		"node_modules/patch-package/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"get-caller-file": {
-			"version": "2.0.5",
-			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+		"node_modules/patch-package/node_modules/slash": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+			"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"get-intrinsic": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
-			"integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
+		"node_modules/patch-package/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
-			"requires": {
-				"function-bind": "^1.1.1",
-				"has": "^1.0.3",
-				"has-symbols": "^1.0.1"
-			},
 			"dependencies": {
-				"has-symbols": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
-				}
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"get-own-enumerable-property-symbols": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-			"integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
-			"dev": true
+		"node_modules/patch-package/node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 10.0.0"
+			}
 		},
-		"get-pkg-repo": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-4.2.1.tgz",
-			"integrity": "sha512-2+QbHjFRfGB74v/pYWjd5OhU3TDIC2Gv/YKUTk/tCvAz0pkn/Mz6P3uByuBimLOcPvN2jYdScl3xGFSrx0jEcA==",
+		"node_modules/patch-package/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
 			"dev": true,
-			"requires": {
-				"@hutson/parse-repository-url": "^3.0.0",
-				"hosted-git-info": "^4.0.0",
-				"through2": "^2.0.0",
-				"yargs": "^16.2.0"
-			},
 			"dependencies": {
-				"hosted-git-info": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-					"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"get-port": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
-			"integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+		"node_modules/patch-package/node_modules/yaml": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+			"integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/path-browserify": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+			"integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
 			"dev": true
 		},
-		"get-stdin": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-			"integrity": "sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==",
+		"node_modules/path-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/path-dirname": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+			"integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
 			"dev": true,
 			"optional": true
 		},
-		"get-stream": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-			"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+		"node_modules/path-exists": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+			"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-is-inside": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+			"integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w=="
+		},
+		"node_modules/path-key": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+			"integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
 			"dev": true,
-			"requires": {
-				"pump": "^3.0.0"
-			},
-			"dependencies": {
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				}
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"get-symbol-description": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-			"integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+		"node_modules/path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+		},
+		"node_modules/path-scurry": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+			"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"get-intrinsic": "^1.1.1"
-			},
+			"license": "BlueOak-1.0.0",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				}
+				"lru-cache": "^10.2.0",
+				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"get-value": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-			"integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+		"node_modules/path-scurry/node_modules/lru-cache": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+			"dev": true,
+			"license": "ISC"
 		},
-		"getpass": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-			"integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+		"node_modules/path-scurry/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
 			"dev": true,
-			"requires": {
-				"assert-plus": "^1.0.0"
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"gettext-parser": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/gettext-parser/-/gettext-parser-1.4.0.tgz",
-			"integrity": "sha512-sedZYLHlHeBop/gZ1jdg59hlUEcpcZJofLq2JFwJT1zTqAU3l2wFv6IsuwFHGqbiT9DWzMUW4/em2+hspnmMMA==",
-			"requires": {
-				"encoding": "^0.1.12",
-				"safe-buffer": "^5.1.1"
-			}
+		"node_modules/path-to-regexp": {
+			"version": "0.1.7",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+			"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
 		},
-		"git-raw-commits": {
-			"version": "2.0.11",
-			"resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz",
-			"integrity": "sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==",
+		"node_modules/path-type": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+			"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
 			"dev": true,
-			"requires": {
-				"dargs": "^7.0.0",
-				"lodash": "^4.17.15",
-				"meow": "^8.0.0",
-				"split2": "^3.0.0",
-				"through2": "^4.0.0"
-			},
-			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"through2": {
-					"version": "4.0.2",
-					"resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
-					"integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
-					"dev": true,
-					"requires": {
-						"readable-stream": "3"
-					}
-				}
+			"dependencies": {
+				"pify": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"git-remote-origin-url": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
-			"integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=",
+		"node_modules/path-type/node_modules/pify": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+			"integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
 			"dev": true,
-			"requires": {
-				"gitconfiglocal": "^1.0.0",
-				"pify": "^2.3.0"
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"git-semver-tags": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/git-semver-tags/-/git-semver-tags-4.1.1.tgz",
-			"integrity": "sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==",
+		"node_modules/pathe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+			"integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+			"dev": true
+		},
+		"node_modules/pbkdf2": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+			"integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
 			"dev": true,
-			"requires": {
-				"meow": "^8.0.0",
-				"semver": "^6.0.0"
-			},
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"create-hash": "^1.1.2",
+				"create-hmac": "^1.1.4",
+				"ripemd160": "^2.0.1",
+				"safe-buffer": "^5.0.1",
+				"sha.js": "^2.4.8"
+			},
+			"engines": {
+				"node": ">=0.12"
 			}
 		},
-		"git-up": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/git-up/-/git-up-7.0.0.tgz",
-			"integrity": "sha512-ONdIrbBCFusq1Oy0sC71F5azx8bVkvtZtMJAsv+a6lz5YAmbNnLD6HAB4gptHZVLPR8S2/kVN6Gab7lryq5+lQ==",
+		"node_modules/peek-stream": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
+			"integrity": "sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==",
 			"dev": true,
-			"requires": {
-				"is-ssh": "^1.4.0",
-				"parse-url": "^8.1.0"
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"duplexify": "^3.5.0",
+				"through2": "^2.0.3"
 			}
 		},
-		"git-url-parse": {
-			"version": "13.1.0",
-			"resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-13.1.0.tgz",
-			"integrity": "sha512-5FvPJP/70WkIprlUZ33bm4UAaFdjcLkJLpWft1BeZKqwR0uhhNGoKwlUaPtVb4LxCSQ++erHapRak9kWGj+FCA==",
-			"dev": true,
-			"requires": {
-				"git-up": "^7.0.0"
+		"node_modules/pegjs": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
+			"integrity": "sha512-qI5+oFNEGi3L5HAxDwN2LA4Gg7irF70Zs25edhjld9QemOgp0CbvMtbFcMvFtEo1OityPrcCzkQFB8JP/hxgow==",
+			"bin": {
+				"pegjs": "bin/pegjs"
+			},
+			"engines": {
+				"node": ">=0.10"
 			}
 		},
-		"gitconfiglocal": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
-			"integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=",
-			"dev": true,
-			"requires": {
-				"ini": "^1.3.2"
+		"node_modules/pend": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+			"integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
+		},
+		"node_modules/phpegjs": {
+			"version": "1.0.0-beta7",
+			"resolved": "https://registry.npmjs.org/phpegjs/-/phpegjs-1.0.0-beta7.tgz",
+			"integrity": "sha512-SO+NP5argMoJVCWcYiOofPUeEWDIM47FNCBJtp6uJ8PpjtBcudYJTzCbCMit5dzmfSLCoijzEwIXOqPqD45xQg==",
+			"peerDependencies": {
+				"pegjs": "^0.10.0"
 			}
 		},
-		"github-slugger": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.4.0.tgz",
-			"integrity": "sha512-w0dzqw/nt51xMVmlaV1+JRzN+oCa1KfcgGEWhxUG16wbdA+Xnt/yoFO8Z8x/V82ZcZ0wy6ln9QDup5avbhiDhQ==",
-			"dev": true
+		"node_modules/picocolors": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+			"license": "ISC"
 		},
-		"glob": {
-			"version": "7.1.2",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-			"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-			"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"
+		"node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
-		"glob-parent": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-			"integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+		"node_modules/pidtree": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
+			"integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
 			"dev": true,
-			"requires": {
-				"is-glob": "^3.1.0",
-				"path-dirname": "^1.0.0"
+			"bin": {
+				"pidtree": "bin/pidtree.js"
 			},
-			"dependencies": {
-				"is-glob": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-					"integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.0"
-					}
-				}
+			"engines": {
+				"node": ">=0.10"
 			}
 		},
-		"glob-promise": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-3.4.0.tgz",
-			"integrity": "sha512-q08RJ6O+eJn+dVanerAndJwIcumgbDdYiUT7zFQl3Wm1xD6fBKtah7H8ZJChj4wP+8C+QfeVy8xautR7rdmKEw==",
+		"node_modules/pify": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
 			"dev": true,
-			"requires": {
-				"@types/glob": "*"
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"glob-to-regexp": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
-			"integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==",
-			"dev": true
+		"node_modules/pinkie": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+			"integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"global": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-			"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-			"dev": true,
-			"requires": {
-				"min-document": "^2.19.0",
-				"process": "^0.11.10"
+		"node_modules/pinkie-promise": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+			"integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
+			"dependencies": {
+				"pinkie": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/pirates": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+			"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"global-modules": {
+		"node_modules/pkg-dir": {
 			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-			"integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-			"dev": true,
-			"requires": {
-				"global-prefix": "^3.0.0"
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
+			"integrity": "sha512-ojakdnUgL5pzJYWw2AIDEupaQCX5OPbM688ZevubICjdIX01PRSYKqm33fJoCOJBRseYCTUlQRnBNX+Pchaejw==",
+			"dependencies": {
+				"find-up": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"global-prefix": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-			"integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+		"node_modules/platform": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz",
+			"integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==",
+			"dev": true
+		},
+		"node_modules/playwright": {
+			"version": "1.48.1",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.1.tgz",
+			"integrity": "sha512-j8CiHW/V6HxmbntOfyB4+T/uk08tBy6ph0MpBXwuoofkSnLmlfdYNNkFTYD6ofzzlSqLA1fwH4vwvVFvJgLN0w==",
 			"dev": true,
-			"requires": {
-				"ini": "^1.3.5",
-				"kind-of": "^6.0.2",
-				"which": "^1.3.1"
+			"dependencies": {
+				"playwright-core": "1.48.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
 			}
 		},
-		"globals": {
-			"version": "13.12.0",
-			"resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-			"integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+		"node_modules/playwright-core": {
+			"version": "1.48.1",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.1.tgz",
+			"integrity": "sha512-Yw/t4VAFX/bBr1OzwCuOMZkY1Cnb4z/doAFSwf4huqAGWmf9eMNjmK7NiOljCdLmxeRYcGPPmcDgU0zOlzP0YA==",
 			"dev": true,
-			"requires": {
-				"type-fest": "^0.20.2"
+			"bin": {
+				"playwright-core": "cli.js"
 			},
-			"dependencies": {
-				"type-fest": {
-					"version": "0.20.2",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-					"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"globalthis": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-			"integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+		"node_modules/please-upgrade-node": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+			"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
 			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.3"
-			},
 			"dependencies": {
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				}
+				"semver-compare": "^1.0.0"
 			}
 		},
-		"globby": {
-			"version": "9.2.0",
-			"resolved": "https://registry.npmjs.org/globby/-/globby-9.2.0.tgz",
-			"integrity": "sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==",
+		"node_modules/plist": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+			"integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
 			"dev": true,
-			"requires": {
-				"@types/glob": "^7.1.1",
-				"array-union": "^1.0.2",
-				"dir-glob": "^2.2.2",
-				"fast-glob": "^2.2.6",
-				"glob": "^7.1.3",
-				"ignore": "^4.0.3",
-				"pify": "^4.0.1",
-				"slash": "^2.0.0"
-			},
 			"dependencies": {
-				"dir-glob": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
-					"integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
-					"dev": true,
-					"requires": {
-						"path-type": "^3.0.0"
-					}
-				},
-				"fast-glob": {
-					"version": "2.2.7",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
-					"integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
-					"dev": true,
-					"requires": {
-						"@mrmlnc/readdir-enhanced": "^2.2.1",
-						"@nodelib/fs.stat": "^1.1.2",
-						"glob-parent": "^3.1.0",
-						"is-glob": "^4.0.0",
-						"merge2": "^1.2.3",
-						"micromatch": "^3.1.10"
-					}
-				},
-				"glob": {
-					"version": "7.1.5",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.5.tgz",
-					"integrity": "sha512-J9dlskqUXK1OeTOYBEn5s8aMukWMwWfs+rPTn/jn50Ux4MNXVhubL1wu/j2t+H4NVI+cXEcCaYellqaPVGXNqQ==",
-					"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"
-					}
-				},
-				"ignore": {
-					"version": "4.0.6",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-					"integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-					"dev": true
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-					"dev": true
-				},
-				"slash": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-					"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-					"dev": true
-				}
+				"@xmldom/xmldom": "^0.8.8",
+				"base64-js": "^1.5.1",
+				"xmlbuilder": "^15.1.1"
+			},
+			"engines": {
+				"node": ">=10.4.0"
 			}
 		},
-		"globjoin": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
-			"integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
-			"dev": true
+		"node_modules/plur": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/plur/-/plur-4.0.0.tgz",
+			"integrity": "sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==",
+			"dependencies": {
+				"irregular-plurals": "^3.2.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"good-listener": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-			"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-			"requires": {
-				"delegate": "^3.1.2"
+		"node_modules/pluralize": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+			"integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+			"dev": true,
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"got": {
-			"version": "11.8.5",
-			"resolved": "https://registry.npmjs.org/got/-/got-11.8.5.tgz",
-			"integrity": "sha512-o0Je4NvQObAuZPHLFoRSkdG2lTgtcynqymzg2Vupdx6PorhaT5MCbIyXG6d4D94kk8ZG57QeosgdiqfJWhEhlQ==",
+		"node_modules/polished": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
+			"integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==",
 			"dev": true,
-			"requires": {
-				"@sindresorhus/is": "^4.0.0",
-				"@szmarczak/http-timer": "^4.0.5",
-				"@types/cacheable-request": "^6.0.1",
-				"@types/responselike": "^1.0.0",
-				"cacheable-lookup": "^5.0.3",
-				"cacheable-request": "^7.0.2",
-				"decompress-response": "^6.0.0",
-				"http2-wrapper": "^1.0.0-beta.5.2",
-				"lowercase-keys": "^2.0.0",
-				"p-cancelable": "^2.0.0",
-				"responselike": "^2.0.0"
+			"dependencies": {
+				"@babel/runtime": "^7.17.8"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"graceful-fs": {
-			"version": "4.1.11",
-			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-			"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+		"node_modules/posix-character-classes": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+			"integrity": "sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"gradient-parser": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz",
-			"integrity": "sha1-DH4heVWeXOfY1x9EI6+TcQCyJIw="
+		"node_modules/postcss": {
+			"version": "8.4.38",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+			"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
 		},
-		"gud": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
-			"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==",
-			"dev": true
+		"node_modules/postcss-calc": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz",
+			"integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.11",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.2"
+			}
 		},
-		"handle-thing": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-			"integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-			"dev": true
+		"node_modules/postcss-calc/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"handlebars": {
-			"version": "4.7.7",
-			"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-			"integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
-			"dev": true,
-			"requires": {
-				"minimist": "^1.2.5",
-				"neo-async": "^2.6.0",
-				"source-map": "^0.6.1",
-				"uglify-js": "^3.1.4",
-				"wordwrap": "^1.0.0"
-			},
+		"node_modules/postcss-colormin": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz",
+			"integrity": "sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0",
+				"colord": "^2.9.1",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"har-schema": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-			"integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-			"dev": true
+		"node_modules/postcss-colormin/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"har-validator": {
-			"version": "5.1.3",
-			"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-			"integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-			"dev": true,
-			"requires": {
-				"ajv": "^6.5.5",
-				"har-schema": "^2.0.0"
-			},
+		"node_modules/postcss-convert-values": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz",
+			"integrity": "sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==",
 			"dependencies": {
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				}
+				"browserslist": "^4.21.4",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hard-rejection": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
-			"integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
-			"dev": true
+		"node_modules/postcss-convert-values/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"has": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"requires": {
-				"function-bind": "^1.1.1"
+		"node_modules/postcss-discard-comments": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz",
+			"integrity": "sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"has-ansi": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-			"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-			"dev": true,
-			"requires": {
-				"ansi-regex": "^2.0.0"
+		"node_modules/postcss-discard-duplicates": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz",
+			"integrity": "sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
 			},
-			"dependencies": {
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-					"dev": true
-				}
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"has-bigints": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-			"integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
-			"dev": true
-		},
-		"has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+		"node_modules/postcss-discard-empty": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz",
+			"integrity": "sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
 		},
-		"has-glob": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz",
-			"integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==",
-			"dev": true,
-			"requires": {
-				"is-glob": "^3.0.0"
+		"node_modules/postcss-discard-overridden": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz",
+			"integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
 			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-loader": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
+			"integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
 			"dependencies": {
-				"is-glob": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-					"integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.0"
-					}
-				}
+				"cosmiconfig": "^7.0.0",
+				"klona": "^2.0.5",
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"postcss": "^7.0.0 || ^8.0.1",
+				"webpack": "^5.0.0"
 			}
 		},
-		"has-property-descriptors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-			"integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+		"node_modules/postcss-local-keyframes": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/postcss-local-keyframes/-/postcss-local-keyframes-0.0.2.tgz",
+			"integrity": "sha512-nRN01llvxnqLw1TZu4kBknHwpxPPK3DLLJClQ3eTGhS+jBNyoIAMx0hw+fdiDOy7TXjfnojamPwUm/UxBEZDTw==",
 			"dev": true,
-			"requires": {
-				"get-intrinsic": "^1.1.1"
+			"engines": {
+				"node": ">=10.0.0"
 			},
+			"peerDependencies": {
+				"postcss": "^8.2.8"
+			}
+		},
+		"node_modules/postcss-media-query-parser": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+			"integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig=="
+		},
+		"node_modules/postcss-merge-longhand": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz",
+			"integrity": "sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==",
 			"dependencies": {
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				}
+				"postcss-value-parser": "^4.2.0",
+				"stylehacks": "^6.0.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"has-symbols": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
-			"integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
+		"node_modules/postcss-merge-longhand/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"has-tostringtag": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-			"integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-			"dev": true,
-			"requires": {
-				"has-symbols": "^1.0.2"
+		"node_modules/postcss-merge-rules": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz",
+			"integrity": "sha512-a4tlmJIQo9SCjcfiCcCMg/ZCEe0XTkl/xK0XHBs955GWg9xDX3NwP9pwZ78QUOWB8/0XCjZeJn98Dae0zg6AAw==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0",
+				"cssnano-utils": "^4.0.0",
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
 			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-font-values": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz",
+			"integrity": "sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==",
 			"dependencies": {
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				}
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"has-unicode": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-			"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-			"dev": true
+		"node_modules/postcss-minify-font-values/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"has-value": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-			"integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-			"requires": {
-				"get-value": "^2.0.6",
-				"has-values": "^1.0.0",
-				"isobject": "^3.0.0"
+		"node_modules/postcss-minify-gradients": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz",
+			"integrity": "sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==",
+			"dependencies": {
+				"colord": "^2.9.1",
+				"cssnano-utils": "^4.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"has-values": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-			"integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-			"requires": {
-				"is-number": "^3.0.0",
-				"kind-of": "^4.0.0"
+		"node_modules/postcss-minify-gradients/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-minify-params": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz",
+			"integrity": "sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"cssnano-utils": "^4.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
 			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-params/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-minify-selectors": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz",
+			"integrity": "sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==",
 			"dependencies": {
-				"kind-of": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-					"integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				}
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hash-base": {
+		"node_modules/postcss-modules-extract-imports": {
 			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-			"integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.4",
-				"readable-stream": "^3.6.0",
-				"safe-buffer": "^5.2.0"
+			"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+			"integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
 			},
-			"dependencies": {
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-					"dev": true
-				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				},
-				"safe-buffer": {
-					"version": "5.2.1",
-					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-					"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-					"dev": true
-				}
+			"peerDependencies": {
+				"postcss": "^8.1.0"
 			}
 		},
-		"hash.js": {
-			"version": "1.1.7",
-			"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-			"integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.3",
-				"minimalistic-assert": "^1.0.1"
+		"node_modules/postcss-modules-local-by-default": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz",
+			"integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==",
+			"dependencies": {
+				"icss-utils": "^5.0.0",
+				"postcss-selector-parser": "^6.0.2",
+				"postcss-value-parser": "^4.1.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
 			}
 		},
-		"hast-to-hyperscript": {
-			"version": "9.0.1",
-			"resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz",
-			"integrity": "sha512-zQgLKqF+O2F72S1aa4y2ivxzSlko3MAvxkwG8ehGmNiqd98BIN3JM1rAJPmplEyLmGLO2QZYJtIneOSZ2YbJuA==",
-			"dev": true,
-			"requires": {
-				"@types/unist": "^2.0.3",
-				"comma-separated-tokens": "^1.0.0",
-				"property-information": "^5.3.0",
-				"space-separated-tokens": "^1.0.0",
-				"style-to-object": "^0.3.0",
-				"unist-util-is": "^4.0.0",
-				"web-namespaces": "^1.0.0"
-			},
+		"node_modules/postcss-modules-local-by-default/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-modules-scope": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz",
+			"integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==",
 			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				}
+				"postcss-selector-parser": "^6.0.4"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
 			}
 		},
-		"hast-util-from-parse5": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-6.0.1.tgz",
-			"integrity": "sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA==",
-			"dev": true,
-			"requires": {
-				"@types/parse5": "^5.0.0",
-				"hastscript": "^6.0.0",
-				"property-information": "^5.0.0",
-				"vfile": "^4.0.0",
-				"vfile-location": "^3.2.0",
-				"web-namespaces": "^1.0.0"
-			},
-			"dependencies": {
-				"is-buffer": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-					"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-					"dev": true
-				},
-				"unist-util-stringify-position": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-					"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.2"
-					}
-				},
-				"vfile": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
-					"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"is-buffer": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0",
-						"vfile-message": "^2.0.0"
-					}
-				},
-				"vfile-location": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
-					"integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
-					"dev": true
-				},
-				"vfile-message": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-					"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0"
-					}
-				}
+		"node_modules/postcss-modules-values": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+			"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+			"dependencies": {
+				"icss-utils": "^5.0.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
 			}
 		},
-		"hast-util-parse-selector": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
-			"integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
-			"dev": true
-		},
-		"hast-util-raw": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-6.0.1.tgz",
-			"integrity": "sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig==",
-			"dev": true,
-			"requires": {
-				"@types/hast": "^2.0.0",
-				"hast-util-from-parse5": "^6.0.0",
-				"hast-util-to-parse5": "^6.0.0",
-				"html-void-elements": "^1.0.0",
-				"parse5": "^6.0.0",
-				"unist-util-position": "^3.0.0",
-				"vfile": "^4.0.0",
-				"web-namespaces": "^1.0.0",
-				"xtend": "^4.0.0",
-				"zwitch": "^1.0.0"
-			},
-			"dependencies": {
-				"is-buffer": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-					"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-					"dev": true
-				},
-				"parse5": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-					"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-					"dev": true
-				},
-				"unist-util-stringify-position": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-					"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.2"
-					}
-				},
-				"vfile": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
-					"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"is-buffer": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0",
-						"vfile-message": "^2.0.0"
-					}
-				},
-				"vfile-message": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-					"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0"
-					}
-				}
+		"node_modules/postcss-normalize-charset": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz",
+			"integrity": "sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==",
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hast-util-to-parse5": {
+		"node_modules/postcss-normalize-display-values": {
 			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-6.0.0.tgz",
-			"integrity": "sha512-Lu5m6Lgm/fWuz8eWnrKezHtVY83JeRGaNQ2kn9aJgqaxvVkFCZQBEhgodZUDUvoodgyROHDb3r5IxAEdl6suJQ==",
-			"dev": true,
-			"requires": {
-				"hast-to-hyperscript": "^9.0.0",
-				"property-information": "^5.0.0",
-				"web-namespaces": "^1.0.0",
-				"xtend": "^4.0.0",
-				"zwitch": "^1.0.0"
+			"resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz",
+			"integrity": "sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hastscript": {
+		"node_modules/postcss-normalize-display-values/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-normalize-positions": {
 			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
-			"integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
-			"dev": true,
-			"requires": {
-				"@types/hast": "^2.0.0",
-				"comma-separated-tokens": "^1.0.0",
-				"hast-util-parse-selector": "^2.0.0",
-				"property-information": "^5.0.0",
-				"space-separated-tokens": "^1.0.0"
+			"resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz",
+			"integrity": "sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"he": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-			"dev": true
+		"node_modules/postcss-normalize-positions/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"header-case": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
-			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
-			"requires": {
-				"capital-case": "^1.0.4",
-				"tslib": "^2.0.3"
+		"node_modules/postcss-normalize-repeat-style": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz",
+			"integrity": "sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hermes-engine": {
-			"version": "0.9.0",
-			"resolved": "https://registry.npmjs.org/hermes-engine/-/hermes-engine-0.9.0.tgz",
-			"integrity": "sha512-r7U+Y4P2Qg/igFVZN+DpT7JFfXUn1MM4dFne8aW+cCrF6RRymof+VqrUHs1kl07j8h8V2CNesU19RKgWbr3qPw=="
-		},
-		"hermes-parser": {
-			"version": "0.4.7",
-			"resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.4.7.tgz",
-			"integrity": "sha512-jc+zCtXbtwTiXoMAoXOHepxAaGVFIp89wwE9qcdwnMd/uGVEtPoY8FaFSsx0ThPvyKirdR2EsIIDVrpbSXz1Ag=="
+		"node_modules/postcss-normalize-repeat-style/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"hermes-profile-transformer": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/hermes-profile-transformer/-/hermes-profile-transformer-0.0.6.tgz",
-			"integrity": "sha512-cnN7bQUm65UWOy6cbGcCcZ3rpwW8Q/j4OP5aWRhEry4Z2t2aR1cjrbp0BS+KiBN0smvP1caBgAuxutvyvJILzQ==",
-			"requires": {
-				"source-map": "^0.7.3"
-			},
+		"node_modules/postcss-normalize-string": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz",
+			"integrity": "sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.7.3",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
-				}
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hex-color-regex": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-			"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-			"dev": true
-		},
-		"hey-listen": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-			"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+		"node_modules/postcss-normalize-string/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"highlight-words-core": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
-			"integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
+		"node_modules/postcss-normalize-timing-functions": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz",
+			"integrity": "sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
 		},
-		"highlight.js": {
-			"version": "10.7.3",
-			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-			"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
-			"dev": true
+		"node_modules/postcss-normalize-timing-functions/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"history": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz",
-			"integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==",
-			"requires": {
-				"@babel/runtime": "^7.7.6"
+		"node_modules/postcss-normalize-unicode": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz",
+			"integrity": "sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hmac-drbg": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-			"integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
-			"dev": true,
-			"requires": {
-				"hash.js": "^1.0.3",
-				"minimalistic-assert": "^1.0.0",
-				"minimalistic-crypto-utils": "^1.0.1"
-			}
+		"node_modules/postcss-normalize-unicode/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"hoist-non-react-statics": {
-			"version": "3.3.2",
-			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-			"requires": {
-				"react-is": "^16.7.0"
+		"node_modules/postcss-normalize-url": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz",
+			"integrity": "sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"homedir-polyfill": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
-			"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
-			"dev": true,
-			"requires": {
-				"parse-passwd": "^1.0.0"
+		"node_modules/postcss-normalize-url/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-normalize-whitespace": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz",
+			"integrity": "sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hosted-git-info": {
-			"version": "2.8.9",
-			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-			"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-			"dev": true
+		"node_modules/postcss-normalize-whitespace/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"hpack.js": {
-			"version": "2.1.6",
-			"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-			"integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"obuf": "^1.0.0",
-				"readable-stream": "^2.0.1",
-				"wbuf": "^1.1.0"
+		"node_modules/postcss-ordered-values": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz",
+			"integrity": "sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==",
+			"dependencies": {
+				"cssnano-utils": "^4.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"hpq": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/hpq/-/hpq-1.3.0.tgz",
-			"integrity": "sha512-fvYTvdCFOWQupGxqkahrkA+ERBuMdzkxwtUdKrxR6rmMd4Pfl+iZ1QiQYoaZ0B/v0y59MOMnz3XFUWbT50/NWA=="
+		"node_modules/postcss-ordered-values/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"hsl-regex": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-			"integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-			"dev": true
+		"node_modules/postcss-prefix-selector": {
+			"version": "1.16.1",
+			"resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-1.16.1.tgz",
+			"integrity": "sha512-Umxu+FvKMwlY6TyDzGFoSUnzW+NOfMBLyC1tAkIjgX+Z/qGspJeRjVC903D7mx7TuBpJlwti2ibXtWuA7fKMeQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"postcss": ">4 <9"
+			}
 		},
-		"hsla-regex": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-			"integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-			"dev": true
+		"node_modules/postcss-reduce-initial": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
+			"integrity": "sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
 		},
-		"html-encoding-sniffer": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-			"integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-			"dev": true,
-			"requires": {
-				"whatwg-encoding": "^1.0.5"
+		"node_modules/postcss-reduce-transforms": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz",
+			"integrity": "sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"html-entities": {
-			"version": "2.3.3",
-			"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.3.tgz",
-			"integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==",
-			"dev": true
+		"node_modules/postcss-reduce-transforms/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"html-escaper": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.0.tgz",
-			"integrity": "sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==",
-			"dev": true
+		"node_modules/postcss-resolve-nested-selector": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+			"integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw=="
 		},
-		"html-minifier-terser": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-			"integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
-			"dev": true,
-			"requires": {
-				"camel-case": "^4.1.2",
-				"clean-css": "^5.2.2",
-				"commander": "^8.3.0",
-				"he": "^1.2.0",
-				"param-case": "^3.0.4",
-				"relateurl": "^0.2.7",
-				"terser": "^5.10.0"
-			},
-			"dependencies": {
-				"acorn": {
-					"version": "8.7.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-					"integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
-					"dev": true
+		"node_modules/postcss-safe-parser": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
+			"integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
 				},
-				"commander": {
-					"version": "8.3.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-					"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-					"dev": true
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
 				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.31"
+			}
+		},
+		"node_modules/postcss-scss": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+			"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
 				},
-				"source-map-support": {
-					"version": "0.5.21",
-					"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-					"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-					"dev": true,
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"source-map": "^0.6.0"
-					}
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
 				},
-				"terser": {
-					"version": "5.15.0",
-					"resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-					"integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
-					"dev": true,
-					"requires": {
-						"@jridgewell/source-map": "^0.3.2",
-						"acorn": "^8.5.0",
-						"commander": "^2.20.0",
-						"source-map-support": "~0.5.20"
-					},
-					"dependencies": {
-						"commander": {
-							"version": "2.20.3",
-							"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-							"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-							"dev": true
-						}
-					}
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
 				}
+			],
+			"engines": {
+				"node": ">=12.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.29"
 			}
 		},
-		"html-tags": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-			"integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-			"dev": true
-		},
-		"html-void-elements": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
-			"integrity": "sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==",
-			"dev": true
-		},
-		"html-webpack-plugin": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
-			"integrity": "sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==",
-			"dev": true,
-			"requires": {
-				"@types/html-minifier-terser": "^6.0.0",
-				"html-minifier-terser": "^6.0.2",
-				"lodash": "^4.17.21",
-				"pretty-error": "^4.0.0",
-				"tapable": "^2.0.0"
+		"node_modules/postcss-selector-parser": {
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+			"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-svgo": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz",
+			"integrity": "sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==",
 			"dependencies": {
-				"tapable": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-					"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-					"dev": true
-				}
+				"postcss-value-parser": "^4.2.0",
+				"svgo": "^3.0.2"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >= 18"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"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=",
-			"requires": {
-				"domelementtype": "^1.3.0",
-				"domhandler": "^2.3.0",
-				"domutils": "^1.5.1",
-				"entities": "^1.1.1",
-				"eventemitter2": "^1.0.0",
-				"inherits": "^2.0.1",
-				"readable-stream": "^2.0.2"
+		"node_modules/postcss-svgo/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-unique-selectors": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz",
+			"integrity": "sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"http-cache-semantics": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-			"integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
-			"dev": true
+		"node_modules/postcss-value-parser": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
 		},
-		"http-deceiver": {
-			"version": "1.2.7",
-			"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-			"integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
-			"dev": true
+		"node_modules/postcss/node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"http-errors": {
-			"version": "1.8.1",
-			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-			"integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
-			"requires": {
-				"depd": "~1.1.2",
-				"inherits": "2.0.4",
-				"setprototypeof": "1.2.0",
-				"statuses": ">= 1.5.0 < 2",
-				"toidentifier": "1.0.1"
+		"node_modules/preact": {
+			"version": "10.24.2",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.24.2.tgz",
+			"integrity": "sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			}
+		},
+		"node_modules/prebuild-install": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+			"integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.0",
+				"expand-template": "^2.0.3",
+				"github-from-package": "0.0.0",
+				"minimist": "^1.2.3",
+				"mkdirp-classic": "^0.5.3",
+				"napi-build-utils": "^1.0.1",
+				"node-abi": "^3.3.0",
+				"pump": "^3.0.0",
+				"rc": "^1.2.7",
+				"simple-get": "^4.0.0",
+				"tar-fs": "^2.0.0",
+				"tunnel-agent": "^0.6.0"
 			},
+			"bin": {
+				"prebuild-install": "bin.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/prebuild-install/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
 			"dependencies": {
-				"inherits": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-					"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-				},
-				"toidentifier": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-					"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
-				}
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"http-parser-js": {
-			"version": "0.5.3",
-			"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
-			"integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==",
-			"dev": true
+		"node_modules/prelude-ls": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+			"integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+			"engines": {
+				"node": ">= 0.8.0"
+			}
 		},
-		"http-proxy": {
-			"version": "1.18.1",
-			"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-			"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-			"dev": true,
-			"requires": {
-				"eventemitter3": "^4.0.0",
-				"follow-redirects": "^1.0.0",
-				"requires-port": "^1.0.0"
+		"node_modules/prettier": {
+			"name": "wp-prettier",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-3.0.3.tgz",
+			"integrity": "sha512-X4UlrxDTH8oom9qXlcjnydsjAOD2BmB6yFmvS4Z2zdTzqqpRWb+fbqrH412+l+OUXmbzJlSXjlMFYPgYG12IAA==",
+			"bin": {
+				"prettier": "bin/prettier.cjs"
 			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/prettier-linter-helpers": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+			"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
 			"dependencies": {
-				"eventemitter3": {
-					"version": "4.0.7",
-					"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-					"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-					"dev": true
-				}
+				"fast-diff": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=6.0.0"
 			}
 		},
-		"http-proxy-agent": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-			"integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+		"node_modules/pretty-error": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+			"integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
 			"dev": true,
-			"requires": {
-				"@tootallnate/once": "2",
-				"agent-base": "6",
-				"debug": "4"
-			},
 			"dependencies": {
-				"@tootallnate/once": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-					"integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-					"dev": true
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"lodash": "^4.17.20",
+				"renderkid": "^3.0.0"
 			}
 		},
-		"http-proxy-middleware": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz",
-			"integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==",
-			"dev": true,
-			"requires": {
-				"@types/http-proxy": "^1.17.5",
-				"http-proxy": "^1.18.1",
-				"is-glob": "^4.0.1",
-				"is-plain-obj": "^3.0.0",
-				"micromatch": "^4.0.2"
-			},
+		"node_modules/pretty-format": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+			"integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
 			"dependencies": {
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-plain-obj": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-					"integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"@jest/schemas": "^29.6.3",
+				"ansi-styles": "^5.0.0",
+				"react-is": "^18.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
-		"http-signature": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-			"integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-			"dev": true,
-			"requires": {
-				"assert-plus": "^1.0.0",
-				"jsprim": "^1.2.2",
-				"sshpk": "^1.7.0"
+		"node_modules/pretty-format/node_modules/ansi-styles": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
-		"http2-wrapper": {
+		"node_modules/pretty-format/node_modules/react-is": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+		},
+		"node_modules/pretty-hrtime": {
 			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
-			"integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+			"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+			"integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
 			"dev": true,
-			"requires": {
-				"quick-lru": "^5.1.1",
-				"resolve-alpn": "^1.0.0"
-			},
-			"dependencies": {
-				"quick-lru": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-					"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"https-browserify": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-			"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
-			"dev": true
+		"node_modules/proc-log": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
+			"integrity": "sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"https-proxy-agent": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+		"node_modules/process": {
+			"version": "0.11.10",
+			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
 			"dev": true,
-			"requires": {
-				"agent-base": "6",
-				"debug": "4"
-			},
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
+		"node_modules/process-nextick-args": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+			"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+		},
+		"node_modules/progress": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+			"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/promise": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
+			"integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"asap": "~2.0.6"
 			}
 		},
-		"human-signals": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-			"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+		"node_modules/promise-inflight": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+			"integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
 			"dev": true
 		},
-		"humanize-ms": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-			"integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
+		"node_modules/promise-retry": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+			"integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
 			"dev": true,
-			"requires": {
-				"ms": "^2.0.0"
+			"dependencies": {
+				"err-code": "^2.0.2",
+				"retry": "^0.12.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"husky": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/husky/-/husky-7.0.0.tgz",
-			"integrity": "sha512-xK7lO0EtSzfFPiw+oQncQVy/XqV7UVVjxBByc+Iv5iK3yhW9boDoWgvZy3OGo48QKg/hUtZkzz0hi2HXa0kn7w==",
-			"dev": true
+		"node_modules/prompts": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+			"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+			"dependencies": {
+				"kleur": "^3.0.3",
+				"sisteransi": "^1.0.5"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
 		},
-		"iconv-lite": {
-			"version": "0.4.23",
-			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
-			"integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-			"requires": {
-				"safer-buffer": ">= 2.1.2 < 3"
+		"node_modules/promzard": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/promzard/-/promzard-1.0.0.tgz",
+			"integrity": "sha512-KQVDEubSUHGSt5xLakaToDFrSoZhStB8dXLzk2xvwR67gJktrHFvpR63oZgHyK19WKbHFLXJqCPXdVR3aBP8Ig==",
+			"dev": true,
+			"dependencies": {
+				"read": "^2.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"icss-utils": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-			"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-			"dev": true
+		"node_modules/prop-types": {
+			"version": "15.8.1",
+			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+			"dependencies": {
+				"loose-envify": "^1.4.0",
+				"object-assign": "^4.1.1",
+				"react-is": "^16.13.1"
+			}
 		},
-		"ieee754": {
-			"version": "1.1.12",
-			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
-			"integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
+		"node_modules/propagate": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/propagate/-/propagate-2.0.1.tgz",
+			"integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==",
+			"dev": true,
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"iferr": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-			"integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
+		"node_modules/protocols": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
+			"integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
 			"dev": true
 		},
-		"ignore": {
-			"version": "5.1.8",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-			"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-			"dev": true
+		"node_modules/proxy-addr": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+			"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+			"dependencies": {
+				"forwarded": "0.2.0",
+				"ipaddr.js": "1.9.1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
 		},
-		"ignore-walk": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-4.0.1.tgz",
-			"integrity": "sha512-rzDQLaW4jQbh2YrOFlJdCtX8qgJTehFRYiUB2r1osqTeDzV/3+Jh8fz1oAPzUThf3iku8Ds4IDqawI5d8mUiQw==",
-			"dev": true,
-			"requires": {
-				"minimatch": "^3.0.4"
+		"node_modules/proxy-agent": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.3.0.tgz",
+			"integrity": "sha512-0LdR757eTj/JfuU7TL2YCuAZnxWXu3tkJbg4Oq3geW/qFNT/32T0sp2HnZ9O0lMR4q3vwAt0+xCA8SR0WAD0og==",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "^4.3.4",
+				"http-proxy-agent": "^7.0.0",
+				"https-proxy-agent": "^7.0.0",
+				"lru-cache": "^7.14.1",
+				"pac-proxy-agent": "^7.0.0",
+				"proxy-from-env": "^1.1.0",
+				"socks-proxy-agent": "^8.0.1"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"image-size": {
-			"version": "0.6.3",
-			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
-			"integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
+		"node_modules/proxy-agent/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"import-fresh": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
-			"integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
-			"requires": {
-				"parent-module": "^1.0.0",
-				"resolve-from": "^4.0.0"
+		"node_modules/proxy-agent/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
 			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/proxy-agent/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"license": "MIT",
 			"dependencies": {
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-				}
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"import-lazy": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
-			"integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
-			"dev": true
+		"node_modules/proxy-agent/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"import-local": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
-			"integrity": "sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==",
-			"dev": true,
-			"requires": {
-				"pkg-dir": "^4.2.0",
-				"resolve-cwd": "^3.0.0"
-			},
+		"node_modules/proxy-agent/node_modules/socks-proxy-agent": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+			"integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
+			"license": "MIT",
 			"dependencies": {
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				}
+				"agent-base": "^7.1.1",
+				"debug": "^4.3.4",
+				"socks": "^2.8.3"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"imurmurhash": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-			"integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
-		},
-		"indent-string": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-			"integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-			"dev": true
+		"node_modules/proxy-from-env": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
 		},
-		"indexes-of": {
+		"node_modules/prr": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-			"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
-			"dev": true
-		},
-		"infer-owner": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-			"integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+			"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
 			"dev": true
 		},
-		"inflight": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-			"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-			"requires": {
-				"once": "^1.3.0",
-				"wrappy": "1"
+		"node_modules/ps-list": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/ps-list/-/ps-list-8.1.1.tgz",
+			"integrity": "sha512-OPS9kEJYVmiO48u/B9qneqhkMvgCxT+Tm28VCEJpheTpl8cJ0ffZRRNgS5mrQRTrX5yRTpaJ+hRDeefXYmmorQ==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"inherits": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-			"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-		},
-		"ini": {
-			"version": "1.3.8",
-			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-			"dev": true
+		"node_modules/pseudomap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+			"integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ=="
 		},
-		"init-package-json": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-3.0.2.tgz",
-			"integrity": "sha512-YhlQPEjNFqlGdzrBfDNRLhvoSgX7iQRgSxgsNknRQ9ITXFT7UMfVMWhBTOh2Y+25lRnGrv5Xz8yZwQ3ACR6T3A==",
-			"dev": true,
-			"requires": {
-				"npm-package-arg": "^9.0.1",
-				"promzard": "^0.3.0",
-				"read": "^1.0.7",
-				"read-package-json": "^5.0.0",
-				"semver": "^7.3.5",
-				"validate-npm-package-license": "^3.0.4",
-				"validate-npm-package-name": "^4.0.0"
-			},
+		"node_modules/public-encrypt": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+			"integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+			"dev": true,
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"validate-npm-package-license": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-					"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-					"dev": true,
-					"requires": {
-						"spdx-correct": "^3.0.0",
-						"spdx-expression-parse": "^3.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				}
+				"bn.js": "^4.1.0",
+				"browserify-rsa": "^4.0.0",
+				"create-hash": "^1.1.0",
+				"parse-asn1": "^5.0.0",
+				"randombytes": "^2.0.1",
+				"safe-buffer": "^5.1.2"
 			}
 		},
-		"inline-style-parser": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
-			"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
+		"node_modules/public-encrypt/node_modules/bn.js": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+			"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
 			"dev": true
 		},
-		"inquirer": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
-			"integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
+		"node_modules/pump": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+			"integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
 			"dev": true,
-			"requires": {
-				"ansi-escapes": "^4.2.1",
-				"chalk": "^3.0.0",
-				"cli-cursor": "^3.1.0",
-				"cli-width": "^2.0.0",
-				"external-editor": "^3.0.3",
-				"figures": "^3.0.0",
-				"lodash": "^4.17.15",
-				"mute-stream": "0.0.8",
-				"run-async": "^2.4.0",
-				"rxjs": "^6.5.3",
-				"string-width": "^4.1.0",
-				"strip-ansi": "^6.0.0",
-				"through": "^2.3.6"
-			},
 			"dependencies": {
-				"ansi-escapes": {
-					"version": "4.3.1",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
-					"integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.11.0"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-					"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-					"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-					"dev": true,
-					"requires": {
-						"@types/color-name": "^1.1.1",
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"cli-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-					"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-					"dev": true,
-					"requires": {
-						"restore-cursor": "^3.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"figures": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-					"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-					"dev": true,
-					"requires": {
-						"escape-string-regexp": "^1.0.5"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"mute-stream": {
-					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-					"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-					"dev": true
-				},
-				"onetime": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-					"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"restore-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-					"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-					"dev": true,
-					"requires": {
-						"onetime": "^5.1.0",
-						"signal-exit": "^3.0.2"
-					}
-				},
-				"run-async": {
-					"version": "2.4.0",
-					"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz",
-					"integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==",
-					"dev": true,
-					"requires": {
-						"is-promise": "^2.1.0"
-					},
-					"dependencies": {
-						"is-promise": {
-							"version": "2.2.2",
-							"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-							"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-							"dev": true
-						}
-					}
-				},
-				"rxjs": {
-					"version": "6.5.5",
-					"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
-					"integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
-					"dev": true,
-					"requires": {
-						"tslib": "^1.9.0"
-					}
-				},
-				"string-width": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-					"integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-					"integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.0"
-					}
-				},
-				"supports-color": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"tslib": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-					"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.11.0",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-					"integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-					"dev": true
-				}
-			}
-		},
-		"internal-ip": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-			"integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
-			"dev": true,
-			"requires": {
-				"default-gateway": "^6.0.0",
-				"ipaddr.js": "^1.9.1",
-				"is-ip": "^3.1.0",
-				"p-event": "^4.2.0"
-			},
-			"dependencies": {
-				"p-event": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-					"integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-					"dev": true,
-					"requires": {
-						"p-timeout": "^3.1.0"
-					}
-				},
-				"p-timeout": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-					"integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-					"dev": true,
-					"requires": {
-						"p-finally": "^1.0.0"
-					}
-				}
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"internal-slot": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-			"integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+		"node_modules/pumpify": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+			"integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
 			"dev": true,
-			"requires": {
-				"get-intrinsic": "^1.1.0",
-				"has": "^1.0.3",
-				"side-channel": "^1.0.4"
-			},
 			"dependencies": {
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				}
+				"duplexify": "^3.6.0",
+				"inherits": "^2.0.3",
+				"pump": "^2.0.0"
 			}
 		},
-		"interpret": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-			"integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-			"dev": true
-		},
-		"invariant": {
-			"version": "2.2.4",
-			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-			"requires": {
-				"loose-envify": "^1.0.0"
+		"node_modules/punycode": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"ip": {
-			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-			"integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
+		"node_modules/puppeteer-core": {
+			"version": "23.1.0",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.1.0.tgz",
+			"integrity": "sha512-SvAsu+xnLN2FMXE/59bp3s3WXp8ewqUGzVV4AQtml/2xmsciZnU/bXcCW+eETHPWQ6Agg2vTI7QzWXPpEARK2g==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@puppeteer/browsers": "2.3.1",
+				"chromium-bidi": "0.6.4",
+				"debug": "^4.3.6",
+				"devtools-protocol": "0.0.1312386",
+				"typed-query-selector": "^2.12.0",
+				"ws": "^8.18.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"ipaddr.js": {
-			"version": "1.9.1",
-			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/@puppeteer/browsers": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.1.tgz",
+			"integrity": "sha512-uK7o3hHkK+naEobMSJ+2ySYyXtQkBxIH8Gn4MK9ciePjNV+Pf+PgY/W7iPzn2MTjl3stcYB5AlcTmPYw7AXDwA==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"debug": "^4.3.6",
+				"extract-zip": "^2.0.1",
+				"progress": "^2.0.3",
+				"proxy-agent": "^6.4.0",
+				"semver": "^7.6.3",
+				"tar-fs": "^3.0.6",
+				"unbzip2-stream": "^1.4.3",
+				"yargs": "^17.7.2"
+			},
+			"bin": {
+				"browsers": "lib/cjs/main-cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"irregular-plurals": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/irregular-plurals/-/irregular-plurals-3.2.0.tgz",
-			"integrity": "sha512-YqTdPLfwP7YFN0SsD3QUVCkm9ZG2VzOXv3DOrw5G5mkMbVwptTwVcFv7/C0vOpBmgTxAeTG19XpUs1E522LW9Q==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/agent-base": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"is-absolute-url": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-			"integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/chromium-bidi": {
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.4.tgz",
+			"integrity": "sha512-8zoq6ogmhQQkAKZVKO2ObFTl4uOkqoX1PlKQX3hZQ5E9cbUotcAb7h4pTNVAGGv8Z36PF3CtdOriEp/Rz82JqQ==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"mitt": "3.0.1",
+				"urlpattern-polyfill": "10.0.0",
+				"zod": "3.23.8"
+			},
+			"peerDependencies": {
+				"devtools-protocol": "*"
+			}
 		},
-		"is-accessor-descriptor": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-			"integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-			"requires": {
-				"kind-of": "^3.0.2"
+		"node_modules/puppeteer-core/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
 			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/puppeteer-core/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
 			"dependencies": {
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
 				}
 			}
 		},
-		"is-alphabetical": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.2.tgz",
-			"integrity": "sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"license": "MIT"
 		},
-		"is-alphanumeric": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz",
-			"integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/extract-zip": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+			"integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"debug": "^4.1.1",
+				"get-stream": "^5.1.0",
+				"yauzl": "^2.10.0"
+			},
+			"bin": {
+				"extract-zip": "cli.js"
+			},
+			"engines": {
+				"node": ">= 10.17.0"
+			},
+			"optionalDependencies": {
+				"@types/yauzl": "^2.9.1"
+			}
 		},
-		"is-alphanumerical": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.2.tgz",
-			"integrity": "sha512-pyfU/0kHdISIgslFfZN9nfY1Gk3MquQgUm1mJTjdkEPpkAKNWuBTSqFwewOpR7N351VkErCiyV71zX7mlQQqsg==",
-			"dev": true,
-			"requires": {
-				"is-alphabetical": "^1.0.0",
-				"is-decimal": "^1.0.0"
+		"node_modules/puppeteer-core/node_modules/http-proxy-agent": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+			"integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"is-arguments": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
-			"integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0"
+		"node_modules/puppeteer-core/node_modules/https-proxy-agent": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+			"integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"is-arrayish": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-			"integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
-		},
-		"is-bigint": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
-			"integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
-			"requires": {
-				"binary-extensions": "^2.0.0"
+		"node_modules/puppeteer-core/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"is-buffer": {
-			"version": "1.1.6",
-			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-			"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+		"node_modules/puppeteer-core/node_modules/mitt": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+			"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+			"license": "MIT"
 		},
-		"is-builtin-module": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
-			"integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
-			"dev": true,
-			"requires": {
-				"builtin-modules": "^1.0.0"
-			}
+		"node_modules/puppeteer-core/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
 		},
-		"is-callable": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-			"integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/proxy-agent": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz",
+			"integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.0.2",
+				"debug": "^4.3.4",
+				"http-proxy-agent": "^7.0.1",
+				"https-proxy-agent": "^7.0.3",
+				"lru-cache": "^7.14.1",
+				"pac-proxy-agent": "^7.0.1",
+				"proxy-from-env": "^1.1.0",
+				"socks-proxy-agent": "^8.0.2"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
 		},
-		"is-ci": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-			"integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-			"requires": {
-				"ci-info": "^2.0.0"
+		"node_modules/puppeteer-core/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"is-color-stop": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-			"integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-			"dev": true,
-			"requires": {
-				"css-color-names": "^0.0.4",
-				"hex-color-regex": "^1.1.0",
-				"hsl-regex": "^1.0.0",
-				"hsla-regex": "^1.0.0",
-				"rgb-regex": "^1.0.1",
-				"rgba-regex": "^1.0.0"
-			},
-			"dependencies": {
-				"css-color-names": {
-					"version": "0.0.4",
-					"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-					"integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-					"dev": true
-				}
+		"node_modules/puppeteer-core/node_modules/semver": {
+			"version": "7.6.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"is-core-module": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-			"integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
-			"requires": {
-				"has": "^1.0.3"
+		"node_modules/puppeteer-core/node_modules/socks-proxy-agent": {
+			"version": "8.0.4",
+			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+			"integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
+			"license": "MIT",
+			"dependencies": {
+				"agent-base": "^7.1.1",
+				"debug": "^4.3.4",
+				"socks": "^2.8.3"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"is-data-descriptor": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-			"integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-			"requires": {
-				"kind-of": "^3.0.2"
+		"node_modules/puppeteer-core/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/puppeteer-core/node_modules/tar-fs": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+			"license": "MIT",
 			"dependencies": {
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				}
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
 			}
 		},
-		"is-date-object": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-			"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+			"license": "MIT",
+			"dependencies": {
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
+			}
 		},
-		"is-decimal": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.2.tgz",
-			"integrity": "sha512-TRzl7mOCchnhchN+f3ICUCzYvL9ul7R+TYOsZ8xia++knyZAJfv/uA1FvQXsAnYIl1T3B2X5E/J7Wb1QXiIBXg==",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
 		},
-		"is-descriptor": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-			"integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-			"requires": {
-				"is-accessor-descriptor": "^0.1.6",
-				"is-data-descriptor": "^0.1.4",
-				"kind-of": "^5.0.0"
-			},
-			"dependencies": {
-				"kind-of": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-					"integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+		"node_modules/puppeteer-core/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"is-directory": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-			"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
-		},
-		"is-docker": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-			"dev": true
-		},
-		"is-dom": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-dom/-/is-dom-1.1.0.tgz",
-			"integrity": "sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==",
-			"dev": true,
-			"requires": {
-				"is-object": "^1.0.1",
-				"is-window": "^1.0.2"
+		"node_modules/puppeteer-core/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"is-extendable": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-			"integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
-		},
-		"is-extglob": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-			"integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-			"dev": true
+		"node_modules/puppeteer-core/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"license": "MIT",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"is-finite": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-			"integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-			"dev": true,
-			"optional": true
+		"node_modules/puppeteer-core/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
 		},
-		"is-fullwidth-code-point": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-			"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+		"node_modules/pure-rand": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.2.tgz",
+			"integrity": "sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/dubzzz"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/fast-check"
+				}
+			]
 		},
-		"is-function": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-			"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-			"dev": true
+		"node_modules/qs": {
+			"version": "6.11.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+			"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+			"dependencies": {
+				"side-channel": "^1.0.4"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"is-generator-fn": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-			"integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+		"node_modules/query-selector-shadow-dom": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/query-selector-shadow-dom/-/query-selector-shadow-dom-1.0.1.tgz",
+			"integrity": "sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==",
 			"dev": true
 		},
-		"is-glob": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
-			"integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=",
-			"dev": true,
-			"requires": {
-				"is-extglob": "^2.1.1"
+		"node_modules/query-string": {
+			"version": "6.14.1",
+			"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
+			"integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
+			"dependencies": {
+				"decode-uri-component": "^0.2.0",
+				"filter-obj": "^1.1.0",
+				"split-on-first": "^1.0.0",
+				"strict-uri-encode": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"is-hexadecimal": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.2.tgz",
-			"integrity": "sha512-but/G3sapV3MNyqiDBLrOi4x8uCIw0RY3o/Vb5GT0sMFHrVV7731wFSVy41T5FO1og7G0gXLJh0MkgPRouko/A==",
-			"dev": true
-		},
-		"is-interactive": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
-			"integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-			"dev": true
+		"node_modules/querystring": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
+			"deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
+			"engines": {
+				"node": ">=0.4.x"
+			}
 		},
-		"is-ip": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-			"integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
+		"node_modules/querystring-es3": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+			"integrity": "sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==",
 			"dev": true,
-			"requires": {
-				"ip-regex": "^4.0.0"
-			},
+			"engines": {
+				"node": ">=0.4.x"
+			}
+		},
+		"node_modules/queue": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+			"integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
 			"dependencies": {
-				"ip-regex": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-					"integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-					"dev": true
-				}
+				"inherits": "~2.0.3"
 			}
 		},
-		"is-lambda": {
+		"node_modules/queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/queue-tick": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-			"integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+			"integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
 		},
-		"is-map": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-			"integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
-			"dev": true
+		"node_modules/quick-lru": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+			"integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"is-negative-zero": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
-			"integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
-			"dev": true
+		"node_modules/ramda": {
+			"version": "0.29.0",
+			"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+			"integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+			"dev": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/ramda"
+			}
 		},
-		"is-number": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-			"integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-			"requires": {
-				"kind-of": "^3.0.2"
-			},
+		"node_modules/randombytes": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
 			"dependencies": {
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				}
+				"safe-buffer": "^5.1.0"
 			}
 		},
-		"is-number-object": {
+		"node_modules/randomfill": {
 			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
-			"integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+			"integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+			"dev": true,
+			"dependencies": {
+				"randombytes": "^2.0.5",
+				"safe-buffer": "^5.1.0"
+			}
 		},
-		"is-obj": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-			"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
-			"dev": true
+		"node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
 		},
-		"is-object": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
-			"integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
-			"dev": true
+		"node_modules/raw-body": {
+			"version": "2.5.1",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+			"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
-		"is-observable": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz",
-			"integrity": "sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==",
-			"dev": true,
-			"requires": {
-				"symbol-observable": "^1.1.0"
+		"node_modules/raw-body/node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"is-path-cwd": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-			"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-			"dev": true
+		"node_modules/raw-body/node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"is-path-in-cwd": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-			"integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
+		"node_modules/raw-loader": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+			"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
 			"dev": true,
-			"requires": {
-				"is-path-inside": "^2.1.0"
-			},
+			"license": "MIT",
 			"dependencies": {
-				"is-path-inside": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-					"integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-					"dev": true,
-					"requires": {
-						"path-is-inside": "^1.0.2"
-					}
-				}
+				"loader-utils": "^2.0.0",
+				"schema-utils": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.0.0 || ^5.0.0"
 			}
 		},
-		"is-plain-obj": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-			"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-			"dev": true
-		},
-		"is-plain-object": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
-		},
-		"is-potential-custom-element-name": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-			"integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-			"dev": true
+		"node_modules/raw-loader/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
 		},
-		"is-promise": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-			"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ=="
+		"node_modules/raw-loader/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
 		},
-		"is-regex": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
-			"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+		"node_modules/rc": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
 			"dev": true,
-			"requires": {
-				"has": "^1.0.1"
+			"optional": true,
+			"dependencies": {
+				"deep-extend": "^0.6.0",
+				"ini": "~1.3.0",
+				"minimist": "^1.2.0",
+				"strip-json-comments": "~2.0.1"
+			},
+			"bin": {
+				"rc": "cli.js"
 			}
 		},
-		"is-regexp": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-			"integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
-			"dev": true
-		},
-		"is-resolvable": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-			"integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-			"dev": true
-		},
-		"is-set": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-			"integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
-			"dev": true
-		},
-		"is-shared-array-buffer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz",
-			"integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==",
-			"dev": true
-		},
-		"is-ssh": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.0.tgz",
-			"integrity": "sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==",
+		"node_modules/rc/node_modules/strip-json-comments": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
 			"dev": true,
-			"requires": {
-				"protocols": "^2.0.1"
+			"optional": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"is-stream": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-			"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
-		},
-		"is-string": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
-			"integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
-			"dev": true
+		"node_modules/re-resizable": {
+			"version": "6.9.0",
+			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
+			"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
+			"dependencies": {
+				"fast-memoize": "^2.5.1"
+			},
+			"peerDependencies": {
+				"react": "^16.13.1 || ^17.0.0",
+				"react-dom": "^16.13.1 || ^17.0.0"
+			}
 		},
-		"is-symbol": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
-			"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
-			"dev": true
+		"node_modules/react": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+			"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"is-text-path": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-			"integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=",
-			"dev": true,
-			"requires": {
-				"text-extensions": "^1.0.0"
+		"node_modules/react-autosize-textarea": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz",
+			"integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==",
+			"dependencies": {
+				"autosize": "^4.0.2",
+				"line-height": "^0.3.1",
+				"prop-types": "^15.5.6"
+			},
+			"peerDependencies": {
+				"react": "^0.14.0 || ^15.0.0 || ^16.0.0",
+				"react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
 			}
 		},
-		"is-typedarray": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-			"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-			"dev": true
+		"node_modules/react-colorful": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.3.1.tgz",
+			"integrity": "sha512-nkP1w1LGe8PzhtOQO10xSDTsMWAYVj/Wm5c7ORk7CBngjCE7hHsknFRtosT5qMYkwWs8wSiU0sBwZ8dyzRbNEQ==",
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
 		},
-		"is-unicode-supported": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
-			"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-			"dev": true
+		"node_modules/react-devtools-core": {
+			"version": "4.28.5",
+			"resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.5.tgz",
+			"integrity": "sha512-cq/o30z9W2Wb4rzBefjv5fBalHU0rJGZCHAkf/RHSBWSSYwh8PlQTqqOJmgIIbBtpj27T6FIPXeomIjZtCNVqA==",
+			"dependencies": {
+				"shell-quote": "^1.6.1",
+				"ws": "^7"
+			}
 		},
-		"is-utf8": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-			"integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
+		"node_modules/react-docgen": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.0.3.tgz",
+			"integrity": "sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==",
 			"dev": true,
-			"optional": true
+			"dependencies": {
+				"@babel/core": "^7.18.9",
+				"@babel/traverse": "^7.18.9",
+				"@babel/types": "^7.18.9",
+				"@types/babel__core": "^7.18.0",
+				"@types/babel__traverse": "^7.18.0",
+				"@types/doctrine": "^0.0.9",
+				"@types/resolve": "^1.20.2",
+				"doctrine": "^3.0.0",
+				"resolve": "^1.22.1",
+				"strip-indent": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16.14.0"
+			}
 		},
-		"is-weakref": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.1.tgz",
-			"integrity": "sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==",
+		"node_modules/react-docgen-typescript": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
+			"integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0"
+			"license": "MIT",
+			"peerDependencies": {
+				"typescript": ">= 4.3.x"
 			}
 		},
-		"is-whitespace-character": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
-			"integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==",
-			"dev": true
-		},
-		"is-window": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
-			"integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==",
-			"dev": true
-		},
-		"is-windows": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-			"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
-		},
-		"is-word-character": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
-			"integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==",
+		"node_modules/react-docgen/node_modules/@types/doctrine": {
+			"version": "0.0.9",
+			"resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz",
+			"integrity": "sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==",
 			"dev": true
 		},
-		"is-wsl": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-			"integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
-		},
-		"isarray": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-			"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+		"node_modules/react-docgen/node_modules/doctrine": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+			"dev": true,
+			"dependencies": {
+				"esutils": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
 		},
-		"isexe": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-			"integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+		"node_modules/react-docgen/node_modules/strip-indent": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
+			"integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+			"dev": true,
+			"dependencies": {
+				"min-indent": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"isobject": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-			"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+		"node_modules/react-dom": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+			"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.2"
+			},
+			"peerDependencies": {
+				"react": "^18.3.1"
+			}
 		},
-		"isomorphic-unfetch": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
-			"integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
+		"node_modules/react-element-to-jsx-string": {
+			"version": "15.0.0",
+			"resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
+			"integrity": "sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==",
 			"dev": true,
-			"requires": {
-				"node-fetch": "^2.6.1",
-				"unfetch": "^4.2.0"
+			"dependencies": {
+				"@base2/pretty-print-object": "1.0.1",
+				"is-plain-object": "5.0.0",
+				"react-is": "18.1.0"
+			},
+			"peerDependencies": {
+				"react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0",
+				"react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0"
 			}
 		},
-		"isstream": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-			"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-			"dev": true
-		},
-		"istanbul-lib-coverage": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
-			"integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
+		"node_modules/react-element-to-jsx-string/node_modules/react-is": {
+			"version": "18.1.0",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
+			"integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
 			"dev": true
 		},
-		"istanbul-lib-instrument": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
-			"integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.7.5",
-				"@istanbuljs/schema": "^0.1.2",
-				"istanbul-lib-coverage": "^3.0.0",
-				"semver": "^6.3.0"
+		"node_modules/react-freeze": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
+			"integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"react": ">=17.0.0"
+			}
+		},
+		"node_modules/react-is": {
+			"version": "16.13.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+		},
+		"node_modules/react-native": {
+			"version": "0.73.3",
+			"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.73.3.tgz",
+			"integrity": "sha512-RSQDtT2DNUcmB4IgmW9NhRb5wqvXFl6DI2NEJmt0ps2OrVHpoA8Tkq+lkFOA/fvPscJKtFKEHFBDSR5UHR3PUw==",
+			"dependencies": {
+				"@jest/create-cache-key-function": "^29.6.3",
+				"@react-native-community/cli": "12.3.2",
+				"@react-native-community/cli-platform-android": "12.3.2",
+				"@react-native-community/cli-platform-ios": "12.3.2",
+				"@react-native/assets-registry": "0.73.1",
+				"@react-native/codegen": "0.73.2",
+				"@react-native/community-cli-plugin": "0.73.14",
+				"@react-native/gradle-plugin": "0.73.4",
+				"@react-native/js-polyfills": "0.73.1",
+				"@react-native/normalize-colors": "0.73.2",
+				"@react-native/virtualized-lists": "0.73.4",
+				"abort-controller": "^3.0.0",
+				"anser": "^1.4.9",
+				"ansi-regex": "^5.0.0",
+				"base64-js": "^1.5.1",
+				"chalk": "^4.0.0",
+				"deprecated-react-native-prop-types": "^5.0.0",
+				"event-target-shim": "^5.0.1",
+				"flow-enums-runtime": "^0.0.6",
+				"invariant": "^2.2.4",
+				"jest-environment-node": "^29.6.3",
+				"jsc-android": "^250231.0.0",
+				"memoize-one": "^5.0.0",
+				"metro-runtime": "^0.80.3",
+				"metro-source-map": "^0.80.3",
+				"mkdirp": "^0.5.1",
+				"nullthrows": "^1.1.1",
+				"pretty-format": "^26.5.2",
+				"promise": "^8.3.0",
+				"react-devtools-core": "^4.27.7",
+				"react-refresh": "^0.14.0",
+				"react-shallow-renderer": "^16.15.0",
+				"regenerator-runtime": "^0.13.2",
+				"scheduler": "0.24.0-canary-efb381bbf-20230505",
+				"stacktrace-parser": "^0.1.10",
+				"whatwg-fetch": "^3.0.0",
+				"ws": "^6.2.2",
+				"yargs": "^17.6.2"
+			},
+			"bin": {
+				"react-native": "cli.js"
 			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"react": "18.2.0"
+			}
+		},
+		"node_modules/react-native-animatable": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
+			"integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"prop-types": "^15.7.2"
 			}
 		},
-		"istanbul-lib-report": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-			"integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
-			"dev": true,
-			"requires": {
-				"istanbul-lib-coverage": "^3.0.0",
-				"make-dir": "^3.0.0",
-				"supports-color": "^7.1.0"
+		"node_modules/react-native-fast-image": {
+			"version": "8.5.11",
+			"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",
+			"integrity": "sha512-cNW4bIJg3nvKaheG8vGMfqCt5LMWX9MS5+wMudgKIHbGO51spRr4sgnlhVgwHLcZ5aeNOVJ8CPRxDIWKRq/0QA==",
+			"peerDependencies": {
+				"react": "^16.8.6 || ^17.0.0",
+				"react-native": ">=0.60.0"
+			}
+		},
+		"node_modules/react-native-gesture-handler": {
+			"version": "2.14.1",
+			"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz",
+			"integrity": "sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==",
+			"dependencies": {
+				"@egjs/hammerjs": "^2.0.17",
+				"hoist-non-react-statics": "^3.3.0",
+				"invariant": "^2.2.4",
+				"lodash": "^4.17.21",
+				"prop-types": "^15.7.2"
 			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/react-native-get-random-values": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.4.0.tgz",
+			"integrity": "sha512-NnmEZcC5zfz+QEytFPM/fw818Hodw/BNbv7jGxU4pla4K2K9DCzG83IReMJqQ2wo552AYKguqrBG2SSn/U6rbA==",
 			"dependencies": {
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"fast-base64-decode": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react-native": ">=0.56"
 			}
 		},
-		"istanbul-lib-source-maps": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-			"integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-			"dev": true,
-			"requires": {
-				"debug": "^4.1.1",
-				"istanbul-lib-coverage": "^3.0.0",
-				"source-map": "^0.6.1"
+		"node_modules/react-native-linear-gradient": {
+			"version": "2.7.3",
+			"resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.7.3.tgz",
+			"integrity": "sha512-iyJszlZ1Ech2c+2qV+isMvvJKyoctR9ashDkhJg1/cuSF0vQaeLV1FAYTT3qW9doxChJGxVAFfYoxotH0yi3Iw==",
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/react-native-modal": {
+			"version": "13.0.1",
+			"resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-13.0.1.tgz",
+			"integrity": "sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==",
+			"dependencies": {
+				"prop-types": "^15.6.2",
+				"react-native-animatable": "1.3.3"
 			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": ">=0.65.0"
+			}
+		},
+		"node_modules/react-native-reanimated": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz",
+			"integrity": "sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA==",
+			"dependencies": {
+				"@babel/plugin-transform-object-assign": "^7.16.7",
+				"@babel/preset-typescript": "^7.16.7",
+				"convert-source-map": "^2.0.0",
+				"invariant": "^2.2.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0",
+				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+				"@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+				"@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+				"@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+				"@babel/plugin-transform-template-literals": "^7.0.0-0",
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/react-native-reanimated/node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+		},
+		"node_modules/react-native-safe-area": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/react-native-safe-area/-/react-native-safe-area-0.5.1.tgz",
+			"integrity": "sha512-gBLv93P90sM6hk5HzUwTXzFuSDazTpg2ONi5iL9pnUsUfwdw2L9SKgjgVroxX10leGB9+0zz6/ycV+mItqr8OQ==",
 			"dependencies": {
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"@types/react": "^16.8.8"
 			}
 		},
-		"istanbul-reports": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
-			"integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
-			"dev": true,
-			"requires": {
-				"html-escaper": "^2.0.0",
-				"istanbul-lib-report": "^3.0.0"
+		"node_modules/react-native-safe-area-context": {
+			"version": "4.8.2",
+			"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
+			"integrity": "sha512-ffUOv8BJQ6RqO3nLml5gxJ6ab3EestPiyWekxdzO/1MQ7NF8fW1Mzh1C5QE9yq573Xefnc7FuzGXjtesZGv7cQ==",
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
 			}
 		},
-		"iterate-iterator": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/iterate-iterator/-/iterate-iterator-1.0.2.tgz",
-			"integrity": "sha512-t91HubM4ZDQ70M9wqp+pcNpu8OyJ9UAtXntT/Bcsvp5tZMnz9vRa+IunKXeI8AnfZMTv0jNuVEmGeLSMjVvfPw==",
-			"dev": true
+		"node_modules/react-native-safe-area/node_modules/@types/react": {
+			"version": "16.14.62",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.62.tgz",
+			"integrity": "sha512-BWf7hqninZav6nerxXj+NeZT/mTpDeG6Lk2zREHAy63CrnXoOGPGtNqTFYFN/sqpSaREDP5otVV88axIXmKfGA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "^0.16",
+				"csstype": "^3.0.2"
+			}
 		},
-		"iterate-value": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/iterate-value/-/iterate-value-1.0.2.tgz",
-			"integrity": "sha512-A6fMAio4D2ot2r/TYzr4yUWrmwNdsN5xL7+HUiyACE4DXm+q8HtPcnFTp+NnW3k4N05tZ7FVYFFb2CR13NxyHQ==",
-			"dev": true,
-			"requires": {
-				"es-get-iterator": "^1.0.2",
-				"iterate-iterator": "^1.0.1"
+		"node_modules/react-native-sass-transformer": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/react-native-sass-transformer/-/react-native-sass-transformer-1.4.0.tgz",
+			"integrity": "sha512-PlRiaJIcDzYpIVDH0OQuabkMGy/zp7N/A14rqhBrFqhADXC0xR2W53Cb7CicL9CsOL4y7Sh2dv4pgMvqgMdwqQ==",
+			"dependencies": {
+				"app-root-path": "^2.1.0",
+				"css-to-react-native-transform": "^1.8.1",
+				"semver": "^5.6.0"
+			},
+			"peerDependencies": {
+				"node-sass": ">=4.0.0",
+				"react-native": ">=0.45.0"
 			}
 		},
-		"jed": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/jed/-/jed-1.1.1.tgz",
-			"integrity": "sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ="
+		"node_modules/react-native-sass-transformer/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
 		},
-		"jest": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest/-/jest-27.4.5.tgz",
-			"integrity": "sha512-uT5MiVN3Jppt314kidCk47MYIRilJjA/l2mxwiuzzxGUeJIvA8/pDaJOAX5KWvjAo7SCydcW0/4WEtgbLMiJkg==",
-			"dev": true,
-			"requires": {
-				"@jest/core": "^27.4.5",
-				"import-local": "^3.0.2",
-				"jest-cli": "^27.4.5"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"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
-				},
-				"import-local": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.3.tgz",
-					"integrity": "sha512-bE9iaUY3CXH8Cwfan/abDKAxe1KGT9kyGsBPqf6DMK/z0a2OzAsrukeYNgIH6cH5Xr452jb1TUL8rSfCLjZ9uA==",
-					"dev": true,
-					"requires": {
-						"pkg-dir": "^4.2.0",
-						"resolve-cwd": "^3.0.0"
-					}
-				},
-				"jest-cli": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.4.5.tgz",
-					"integrity": "sha512-hrky3DSgE0u7sQxaCL7bdebEPHx5QzYmrGuUjaPLmPE8jx5adtvGuOlRspvMoVLTTDOHRnZDoRLYJuA+VCI7Hg==",
-					"dev": true,
-					"requires": {
-						"@jest/core": "^27.4.5",
-						"@jest/test-result": "^27.4.2",
-						"@jest/types": "^27.4.2",
-						"chalk": "^4.0.0",
-						"exit": "^0.1.2",
-						"graceful-fs": "^4.2.4",
-						"import-local": "^3.0.2",
-						"jest-config": "^27.4.5",
-						"jest-util": "^27.4.2",
-						"jest-validate": "^27.4.2",
-						"prompts": "^2.0.1",
-						"yargs": "^16.2.0"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"resolve-cwd": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-					"integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-					"dev": true,
-					"requires": {
-						"resolve-from": "^5.0.0"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				}
+		"node_modules/react-native-screens": {
+			"version": "3.29.0",
+			"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.29.0.tgz",
+			"integrity": "sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==",
+			"dependencies": {
+				"react-freeze": "^1.0.0",
+				"warn-once": "^0.1.0"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/react-native-svg": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-14.0.0.tgz",
+			"integrity": "sha512-17W/gWXRUMS7p7PSHu/WyGkZUc1NzRTGxxXc0VqBLjzKSchyb0EmgsiWf9aKmfC6gmY0wcsmKZcGV41bCcNfBA==",
+			"dependencies": {
+				"css-select": "^5.1.0",
+				"css-tree": "^1.1.3"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
 			}
 		},
-		"jest-changed-files": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.4.2.tgz",
-			"integrity": "sha512-/9x8MjekuzUQoPjDHbBiXbNEBauhrPU2ct7m8TfCg69ywt1y/N+yYwGh3gCpnqUS3klYWDU/lSNgv+JhoD2k1A==",
+		"node_modules/react-native-url-polyfill": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-1.1.2.tgz",
+			"integrity": "sha512-RPYwjW+4udnAf26xUCQP2dn4t2tnRFo3Ii4s/hy7Ivpe7xYtXp7CMVX505CR8X3p0f8NKmOJ4MQEFMMnbd/Y/Q==",
 			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"execa": "^5.0.0",
-				"throat": "^6.0.1"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.6",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-					"integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
-					"dev": true
-				},
-				"throat": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
-					"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+			"dependencies": {
+				"buffer": "^5.4.3",
+				"whatwg-url-without-unicode": "8.0.0-1"
+			},
+			"peerDependencies": {
+				"react-native": "*"
 			}
 		},
-		"jest-circus": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.4.5.tgz",
-			"integrity": "sha512-eTNWa9wsvBwPykhMMShheafbwyakcdHZaEYh5iRrQ0PFJxkDP/e3U/FvzGuKWu2WpwUA3C3hPlfpuzvOdTVqnw==",
+		"node_modules/react-native-url-polyfill/node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
 			"dev": true,
-			"requires": {
-				"@jest/environment": "^27.4.4",
-				"@jest/test-result": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"co": "^4.6.0",
-				"dedent": "^0.7.0",
-				"expect": "^27.4.2",
-				"is-generator-fn": "^2.0.0",
-				"jest-each": "^27.4.2",
-				"jest-matcher-utils": "^27.4.2",
-				"jest-message-util": "^27.4.2",
-				"jest-runtime": "^27.4.5",
-				"jest-snapshot": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"pretty-format": "^27.4.2",
-				"slash": "^3.0.0",
-				"stack-utils": "^2.0.3",
-				"throat": "^6.0.1"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"expect": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/expect/-/expect-27.4.2.tgz",
-					"integrity": "sha512-BjAXIDC6ZOW+WBFNg96J22D27Nq5ohn+oGcuP2rtOtcjuxNoV9McpQ60PcQWhdFOSBIQdR72e+4HdnbZTFSTyg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-styles": "^5.0.0",
-						"jest-get-type": "^27.4.0",
-						"jest-matcher-utils": "^27.4.2",
-						"jest-message-util": "^27.4.2",
-						"jest-regex-util": "^27.4.0"
-					}
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"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
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				},
-				"throat": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
-					"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
 			}
 		},
-		"jest-config": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.4.5.tgz",
-			"integrity": "sha512-t+STVJtPt+fpqQ8GBw850NtSQbnDOw/UzdPfzDaHQ48/AylQlW7LHj3dH+ndxhC1UxJ0Q3qkq7IH+nM1skwTwA==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.1.0",
-				"@jest/test-sequencer": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"babel-jest": "^27.4.5",
-				"chalk": "^4.0.0",
-				"ci-info": "^3.2.0",
-				"deepmerge": "^4.2.2",
-				"glob": "^7.1.1",
-				"graceful-fs": "^4.2.4",
-				"jest-circus": "^27.4.5",
-				"jest-environment-jsdom": "^27.4.4",
-				"jest-environment-node": "^27.4.4",
-				"jest-get-type": "^27.4.0",
-				"jest-jasmine2": "^27.4.5",
-				"jest-regex-util": "^27.4.0",
-				"jest-resolve": "^27.4.5",
-				"jest-runner": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"jest-validate": "^27.4.2",
-				"micromatch": "^4.0.4",
-				"pretty-format": "^27.4.2",
-				"slash": "^3.0.0"
-			},
+		"node_modules/react-native-video": {
+			"version": "5.2.0-wp-7",
+			"resolved": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
+			"integrity": "sha512-DTwhGwqkc3IyDWsyJe8d+cEwaw7aHBgT7Q9+X+N3zDIC7qP3bZnXuTUeag8oz9XhfxRDRQJmF+t5is3qVNIuUA==",
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"deprecated-react-native-prop-types": "^2.2.0",
+				"prop-types": "^15.7.2"
 			}
 		},
-		"jest-dev-server": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/jest-dev-server/-/jest-dev-server-6.0.2.tgz",
-			"integrity": "sha512-cVpBu4KvNnefZsiustbaQmgGEKn72K6yk0OMgXDJ3yMT9N24ZM16TG0QgEacHPkrHKirOXZa1GN9Mi/lNl9Y+Q==",
-			"dev": true,
-			"requires": {
-				"chalk": "^4.1.2",
-				"cwd": "^0.10.0",
-				"find-process": "^1.4.5",
-				"prompts": "^2.4.1",
-				"spawnd": "^6.0.2",
-				"tree-kill": "^1.2.2",
-				"wait-on": "^6.0.0"
-			},
+		"node_modules/react-native-webview": {
+			"version": "13.6.1",
+			"resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.6.1.tgz",
+			"integrity": "sha512-m8leQJhouBIER0YFc1nKF7XKYtaF040tvSJJ5VAoD/P0lW7nAXZO4D1jaOEq3HQvEq3SsMl7qh7DW/XO5VhUlg==",
 			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"chalk": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-					"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"escape-string-regexp": "2.0.0",
+				"invariant": "2.2.4"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
+			}
+		},
+		"node_modules/react-native-webview/node_modules/escape-string-regexp": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+			"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jest-diff": {
+		"node_modules/react-native/node_modules/@jest/types": {
 			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-			"integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-			"dev": true,
-			"requires": {
-				"chalk": "^4.0.0",
-				"diff-sequences": "^26.6.2",
-				"jest-get-type": "^26.3.0",
-				"pretty-format": "^26.6.2"
+			"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+			"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+			"dependencies": {
+				"@types/istanbul-lib-coverage": "^2.0.0",
+				"@types/istanbul-reports": "^3.0.0",
+				"@types/node": "*",
+				"@types/yargs": "^15.0.0",
+				"chalk": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 10.14.2"
 			}
 		},
-		"jest-docblock": {
-			"version": "27.4.0",
-			"resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.4.0.tgz",
-			"integrity": "sha512-7TBazUdCKGV7svZ+gh7C8esAnweJoG+SvcF6Cjqj4l17zA2q1cMwx2JObSioubk317H+cjcHgP+7fTs60paulg==",
-			"dev": true,
-			"requires": {
-				"detect-newline": "^3.0.0"
+		"node_modules/react-native/node_modules/@types/yargs": {
+			"version": "15.0.19",
+			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.19.tgz",
+			"integrity": "sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==",
+			"dependencies": {
+				"@types/yargs-parser": "*"
 			}
 		},
-		"jest-each": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.4.2.tgz",
-			"integrity": "sha512-53V2MNyW28CTruB3lXaHNk6PkiIFuzdOC9gR3C6j8YE/ACfrPnz+slB0s17AgU1TtxNzLuHyvNlLJ+8QYw9nBg==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"chalk": "^4.0.0",
-				"jest-get-type": "^27.4.0",
-				"jest-util": "^27.4.2",
-				"pretty-format": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+		"node_modules/react-native/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"jest-environment-jsdom": {
-			"version": "27.4.4",
-			"resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.4.4.tgz",
-			"integrity": "sha512-cYR3ndNfHBqQgFvS1RL7dNqSvD//K56j/q1s2ygNHcfTCAp12zfIromO1w3COmXrxS8hWAh7+CmZmGCIoqGcGA==",
-			"dev": true,
-			"requires": {
-				"@jest/environment": "^27.4.4",
-				"@jest/fake-timers": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"jest-mock": "^27.4.2",
-				"jest-util": "^27.4.2",
-				"jsdom": "^16.6.0"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				}
+		"node_modules/react-native/node_modules/deprecated-react-native-prop-types": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-5.0.0.tgz",
+			"integrity": "sha512-cIK8KYiiGVOFsKdPMmm1L3tA/Gl+JopXL6F5+C7x39MyPsQYnP57Im/D6bNUzcborD7fcMwiwZqcBdBXXZucYQ==",
+			"dependencies": {
+				"@react-native/normalize-colors": "^0.73.0",
+				"invariant": "^2.2.4",
+				"prop-types": "^15.8.1"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"jest-environment-node": {
-			"version": "27.4.4",
-			"resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.4.4.tgz",
-			"integrity": "sha512-D+v3lbJ2GjQTQR23TK0kY3vFVmSeea05giInI41HHOaJnAwOnmUHTZgUaZL+VxUB43pIzoa7PMwWtCVlIUoVoA==",
-			"dev": true,
-			"requires": {
-				"@jest/environment": "^27.4.4",
-				"@jest/fake-timers": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"jest-mock": "^27.4.2",
-				"jest-util": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				}
+		"node_modules/react-native/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/react-native/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jest-get-type": {
-			"version": "26.3.0",
-			"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-			"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-			"dev": true
+		"node_modules/react-native/node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
 		},
-		"jest-haste-map": {
+		"node_modules/react-native/node_modules/pretty-format": {
 			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
-			"integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
-			"requires": {
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+			"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+			"dependencies": {
 				"@jest/types": "^26.6.2",
-				"@types/graceful-fs": "^4.1.2",
-				"@types/node": "*",
-				"anymatch": "^3.0.3",
-				"fb-watchman": "^2.0.0",
-				"fsevents": "^2.1.2",
-				"graceful-fs": "^4.2.4",
-				"jest-regex-util": "^26.0.0",
-				"jest-serializer": "^26.6.2",
-				"jest-util": "^26.6.2",
-				"jest-worker": "^26.6.2",
-				"micromatch": "^4.0.2",
-				"sane": "^4.0.3",
-				"walker": "^1.0.7"
+				"ansi-regex": "^5.0.0",
+				"ansi-styles": "^4.0.0",
+				"react-is": "^17.0.1"
 			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/react-native/node_modules/react-is": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+		},
+		"node_modules/react-native/node_modules/scheduler": {
+			"version": "0.24.0-canary-efb381bbf-20230505",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.24.0-canary-efb381bbf-20230505.tgz",
+			"integrity": "sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA==",
 			"dependencies": {
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-							"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"loose-envify": "^1.1.0"
 			}
 		},
-		"jest-jasmine2": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.4.5.tgz",
-			"integrity": "sha512-oUnvwhJDj2LhOiUB1kdnJjkx8C5PwgUZQb9urF77mELH9DGR4e2GqpWQKBOYXWs5+uTN9BGDqRz3Aeg5Wts7aw==",
-			"dev": true,
-			"requires": {
-				"@babel/traverse": "^7.1.0",
-				"@jest/environment": "^27.4.4",
-				"@jest/source-map": "^27.4.0",
-				"@jest/test-result": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"co": "^4.6.0",
-				"expect": "^27.4.2",
-				"is-generator-fn": "^2.0.0",
-				"jest-each": "^27.4.2",
-				"jest-matcher-utils": "^27.4.2",
-				"jest-message-util": "^27.4.2",
-				"jest-runtime": "^27.4.5",
-				"jest-snapshot": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"pretty-format": "^27.4.2",
-				"throat": "^6.0.1"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"expect": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/expect/-/expect-27.4.2.tgz",
-					"integrity": "sha512-BjAXIDC6ZOW+WBFNg96J22D27Nq5ohn+oGcuP2rtOtcjuxNoV9McpQ60PcQWhdFOSBIQdR72e+4HdnbZTFSTyg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-styles": "^5.0.0",
-						"jest-get-type": "^27.4.0",
-						"jest-matcher-utils": "^27.4.2",
-						"jest-message-util": "^27.4.2",
-						"jest-regex-util": "^27.4.0"
-					}
-				},
-				"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
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				},
-				"throat": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
-					"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
-					"dev": true
-				}
+		"node_modules/react-native/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jest-junit": {
-			"version": "13.0.0",
-			"resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz",
-			"integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==",
-			"dev": true,
-			"requires": {
-				"mkdirp": "^1.0.4",
-				"strip-ansi": "^6.0.1",
-				"uuid": "^8.3.2",
-				"xml": "^1.0.1"
+		"node_modules/react-native/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
 			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/react-native/node_modules/ws": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz",
+			"integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==",
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"uuid": {
-					"version": "8.3.2",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-					"dev": true
+				"async-limiter": "~1.0.0"
+			}
+		},
+		"node_modules/react-native/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/react-native/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/react-native/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/react-refresh": {
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+			"integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/react-remove-scroll": {
+			"version": "2.5.5",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+			"integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+			"license": "MIT",
+			"dependencies": {
+				"react-remove-scroll-bar": "^2.3.3",
+				"react-style-singleton": "^2.2.1",
+				"tslib": "^2.1.0",
+				"use-callback-ref": "^1.3.0",
+				"use-sidecar": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"jest-leak-detector": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.4.2.tgz",
-			"integrity": "sha512-ml0KvFYZllzPBJWDei3mDzUhyp/M4ubKebX++fPaudpe8OsxUE+m+P6ciVLboQsrzOCWDjE20/eXew9QMx/VGw==",
-			"dev": true,
-			"requires": {
-				"jest-get-type": "^27.4.0",
-				"pretty-format": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
+		"node_modules/react-remove-scroll-bar": {
+			"version": "2.3.4",
+			"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+			"integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+			"dependencies": {
+				"react-style-singleton": "^2.2.1",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"jest-matcher-utils": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.4.2.tgz",
-			"integrity": "sha512-jyP28er3RRtMv+fmYC/PKG8wvAmfGcSNproVTW2Y0P/OY7/hWUOmsPfxN1jOhM+0u2xU984u2yEagGivz9OBGQ==",
+		"node_modules/react-scanner": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/react-scanner/-/react-scanner-1.2.0.tgz",
+			"integrity": "sha512-gxdliEPTHpT5pQi23Efx+cvCEAzrRx9LeZXuptNRojBpQhOsPk+nQ3o/U8pfqFFc/BWwGipV1TqbG1I7zBgVZQ==",
 			"dev": true,
-			"requires": {
-				"chalk": "^4.0.0",
-				"jest-diff": "^27.4.2",
-				"jest-get-type": "^27.4.0",
-				"pretty-format": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"diff-sequences": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
-					"integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==",
-					"dev": true
-				},
-				"jest-diff": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.4.2.tgz",
-					"integrity": "sha512-ujc9ToyUZDh9KcqvQDkk/gkbf6zSaeEg9AiBxtttXW59H/AcqEYp1ciXAtJp+jXWva5nAf/ePtSsgWwE5mqp4Q==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.0.0",
-						"diff-sequences": "^27.4.0",
-						"jest-get-type": "^27.4.0",
-						"pretty-format": "^27.4.2"
-					}
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+			"dependencies": {
+				"@typescript-eslint/typescript-estree": "8.8.0",
+				"astray": "1.1.1",
+				"dlv": "1.1.3",
+				"dset": "3.1.4",
+				"fdir": "5.2.0",
+				"is-plain-object": "5.0.0",
+				"picomatch": "2.3.1",
+				"sade": "1.8.1",
+				"typescript": "5.6.2"
+			},
+			"bin": {
+				"react-scanner": "bin/react-scanner"
+			},
+			"engines": {
+				"node": ">=14.x"
 			}
 		},
-		"jest-message-util": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.4.2.tgz",
-			"integrity": "sha512-OMRqRNd9E0DkBLZpFtZkAGYOXl6ZpoMtQJWTAREJKDOFa0M6ptB7L67tp+cszMBkvSgKOhNtQp2Vbcz3ZZKo/w==",
+		"node_modules/react-scanner/node_modules/@typescript-eslint/types": {
+			"version": "8.8.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.8.0.tgz",
+			"integrity": "sha512-QJwc50hRCgBd/k12sTykOJbESe1RrzmX6COk8Y525C9l7oweZ+1lw9JiU56im7Amm8swlz00DRIlxMYLizr2Vw==",
 			"dev": true,
-			"requires": {
-				"@babel/code-frame": "^7.12.13",
-				"@jest/types": "^27.4.2",
-				"@types/stack-utils": "^2.0.0",
-				"chalk": "^4.0.0",
-				"graceful-fs": "^4.2.4",
-				"micromatch": "^4.0.4",
-				"pretty-format": "^27.4.2",
-				"slash": "^3.0.0",
-				"stack-utils": "^2.0.3"
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/react-scanner/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "8.8.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.8.0.tgz",
+			"integrity": "sha512-ZaMJwc/0ckLz5DaAZ+pNLmHv8AMVGtfWxZe/x2JVEkD5LnmhWiQMMcYT7IY7gkdJuzJ9P14fRy28lUrlDSWYdw==",
+			"dev": true,
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
+				"@typescript-eslint/types": "8.8.0",
+				"@typescript-eslint/visitor-keys": "8.8.0",
+				"debug": "^4.3.4",
+				"fast-glob": "^3.3.2",
+				"is-glob": "^4.0.3",
+				"minimatch": "^9.0.4",
+				"semver": "^7.6.0",
+				"ts-api-utils": "^1.3.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
-		"jest-mock": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.4.2.tgz",
-			"integrity": "sha512-PDDPuyhoukk20JrQKeofK12hqtSka7mWH0QQuxSNgrdiPsrnYYLS6wbzu/HDlxZRzji5ylLRULeuI/vmZZDrYA==",
+		"node_modules/react-scanner/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "8.8.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.8.0.tgz",
+			"integrity": "sha512-8mq51Lx6Hpmd7HnA2fcHQo3YgfX1qbccxQOgZcb4tvasu//zXRaA1j5ZRFeCw/VRAdFi4mRM9DnZw0Nu0Q2d1g==",
 			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"@types/node": "*"
+			"dependencies": {
+				"@typescript-eslint/types": "8.8.0",
+				"eslint-visitor-keys": "^3.4.3"
 			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/react-scanner/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				}
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"jest-pnp-resolver": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-			"integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-			"dev": true
+		"node_modules/react-scanner/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"dev": true,
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
 		},
-		"jest-regex-util": {
-			"version": "26.0.0",
-			"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
-			"integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A=="
+		"node_modules/react-scanner/node_modules/fast-glob": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"dev": true,
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
 		},
-		"jest-resolve": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.4.5.tgz",
-			"integrity": "sha512-xU3z1BuOz/hUhVUL+918KqUgK+skqOuUsAi7A+iwoUldK6/+PW+utK8l8cxIWT9AW7IAhGNXjSAh1UYmjULZZw==",
+		"node_modules/react-scanner/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"chalk": "^4.0.0",
-				"graceful-fs": "^4.2.4",
-				"jest-haste-map": "^27.4.5",
-				"jest-pnp-resolver": "^1.2.2",
-				"jest-util": "^27.4.2",
-				"jest-validate": "^27.4.2",
-				"resolve": "^1.20.0",
-				"resolve.exports": "^1.1.0",
-				"slash": "^3.0.0"
+			"dependencies": {
+				"is-glob": "^4.0.1"
 			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/react-scanner/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-core-module": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
-					"integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"path-parse": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-					"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-					"dev": true
-				},
-				"resolve": {
-					"version": "1.21.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.21.0.tgz",
-					"integrity": "sha512-3wCbTpk5WJlyE4mSOtDLhqQmGFi0/TD9VPwmiolnk8U0wRgMEktqCXd3vy5buTO3tljvalNvKrjHEfrd2WpEKA==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.8.0",
-						"path-parse": "^1.0.7",
-						"supports-preserve-symlinks-flag": "^1.0.0"
-					}
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"jest-resolve-dependencies": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.4.5.tgz",
-			"integrity": "sha512-elEVvkvRK51y037NshtEkEnukMBWvlPzZHiL847OrIljJ8yIsujD2GXRPqDXC4rEVKbcdsy7W0FxoZb4WmEs7w==",
-			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"jest-regex-util": "^27.4.0",
-				"jest-snapshot": "^27.4.5"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				}
+		"node_modules/react-scanner/node_modules/semver": {
+			"version": "7.6.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"jest-runner": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.4.5.tgz",
-			"integrity": "sha512-/irauncTfmY1WkTaRQGRWcyQLzK1g98GYG/8QvIPviHgO1Fqz1JYeEIsSfF+9mc/UTA6S+IIHFgKyvUrtiBIZg==",
+		"node_modules/react-scanner/node_modules/typescript": {
+			"version": "5.6.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+			"integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
 			"dev": true,
-			"requires": {
-				"@jest/console": "^27.4.2",
-				"@jest/environment": "^27.4.4",
-				"@jest/test-result": "^27.4.2",
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"emittery": "^0.8.1",
-				"exit": "^0.1.2",
-				"graceful-fs": "^4.2.4",
-				"jest-docblock": "^27.4.0",
-				"jest-environment-jsdom": "^27.4.4",
-				"jest-environment-node": "^27.4.4",
-				"jest-haste-map": "^27.4.5",
-				"jest-leak-detector": "^27.4.2",
-				"jest-message-util": "^27.4.2",
-				"jest-resolve": "^27.4.5",
-				"jest-runtime": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"jest-worker": "^27.4.5",
-				"source-map-support": "^0.5.6",
-				"throat": "^6.0.1"
-			},
-			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"throat": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz",
-					"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
-					"dev": true
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
 			}
 		},
-		"jest-runtime": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.4.5.tgz",
-			"integrity": "sha512-CIYqwuJQXHQtPd/idgrx4zgJ6iCb6uBjQq1RSAGQrw2S8XifDmoM1Ot8NRd80ooAm+ZNdHVwsktIMGlA1F1FAQ==",
-			"dev": true,
-			"requires": {
-				"@jest/console": "^27.4.2",
-				"@jest/environment": "^27.4.4",
-				"@jest/globals": "^27.4.4",
-				"@jest/source-map": "^27.4.0",
-				"@jest/test-result": "^27.4.2",
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/yargs": "^16.0.0",
-				"chalk": "^4.0.0",
-				"cjs-module-lexer": "^1.0.0",
-				"collect-v8-coverage": "^1.0.0",
-				"execa": "^5.0.0",
-				"exit": "^0.1.2",
-				"glob": "^7.1.3",
-				"graceful-fs": "^4.2.4",
-				"jest-haste-map": "^27.4.5",
-				"jest-message-util": "^27.4.2",
-				"jest-mock": "^27.4.2",
-				"jest-regex-util": "^27.4.0",
-				"jest-resolve": "^27.4.5",
-				"jest-snapshot": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"jest-validate": "^27.4.2",
-				"slash": "^3.0.0",
-				"strip-bom": "^4.0.0",
-				"yargs": "^16.2.0"
+		"node_modules/react-shallow-renderer": {
+			"version": "16.15.0",
+			"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
+			"integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
+			"dependencies": {
+				"object-assign": "^4.1.1",
+				"react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
 			},
+			"peerDependencies": {
+				"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/react-style-singleton": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+			"integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
 			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					},
-					"dependencies": {
-						"signal-exit": {
-							"version": "3.0.6",
-							"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-							"integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
-							"dev": true
-						}
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"strip-bom": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-					"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
+				"get-nonce": "^1.0.0",
+				"invariant": "^2.2.4",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"jest-serializer": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
-			"integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
-			"requires": {
-				"@types/node": "*",
-				"graceful-fs": "^4.2.4"
+		"node_modules/react-test-renderer": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
+			"integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==",
+			"dev": true,
+			"dependencies": {
+				"react-is": "^18.3.1",
+				"react-shallow-renderer": "^16.15.0",
+				"scheduler": "^0.23.2"
 			},
+			"peerDependencies": {
+				"react": "^18.3.1"
+			}
+		},
+		"node_modules/react-test-renderer/node_modules/react-is": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+			"dev": true
+		},
+		"node_modules/read": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/read/-/read-2.1.0.tgz",
+			"integrity": "sha512-bvxi1QLJHcaywCAEsAk4DG3nVoqiY2Csps3qzWalhj5hFqRn1d/OixkFXtLO1PrgHUcAP0FNaSY/5GYNfENFFQ==",
+			"dev": true,
 			"dependencies": {
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
-				}
+				"mute-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"jest-snapshot": {
-			"version": "27.4.5",
-			"resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.4.5.tgz",
-			"integrity": "sha512-eCi/iM1YJFrJWiT9de4+RpWWWBqsHiYxFG9V9o/n0WXs6GpW4lUt4FAHAgFPTLPqCUVzrMQmSmTZSgQzwqR7IQ==",
+		"node_modules/read-cmd-shim": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-4.0.0.tgz",
+			"integrity": "sha512-yILWifhaSEEytfXI76kB9xEEiG1AiozaCJZ83A87ytjRiN+jVibXjedjCRNjoZviinhG+4UkalO3mWTd8u5O0Q==",
 			"dev": true,
-			"requires": {
-				"@babel/core": "^7.7.2",
-				"@babel/generator": "^7.7.2",
-				"@babel/parser": "^7.7.2",
-				"@babel/plugin-syntax-typescript": "^7.7.2",
-				"@babel/traverse": "^7.7.2",
-				"@babel/types": "^7.0.0",
-				"@jest/transform": "^27.4.5",
-				"@jest/types": "^27.4.2",
-				"@types/babel__traverse": "^7.0.4",
-				"@types/prettier": "^2.1.5",
-				"babel-preset-current-node-syntax": "^1.0.0",
-				"chalk": "^4.0.0",
-				"expect": "^27.4.2",
-				"graceful-fs": "^4.2.4",
-				"jest-diff": "^27.4.2",
-				"jest-get-type": "^27.4.0",
-				"jest-haste-map": "^27.4.5",
-				"jest-matcher-utils": "^27.4.2",
-				"jest-message-util": "^27.4.2",
-				"jest-resolve": "^27.4.5",
-				"jest-util": "^27.4.2",
-				"natural-compare": "^1.4.0",
-				"pretty-format": "^27.4.2",
-				"semver": "^7.3.2"
-			},
-			"dependencies": {
-				"@jest/transform": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.4.5.tgz",
-					"integrity": "sha512-PuMet2UlZtlGzwc6L+aZmR3I7CEBpqadO03pU40l2RNY2fFJ191b9/ITB44LNOhVtsyykx0OZvj0PCyuLm7Eew==",
-					"dev": true,
-					"requires": {
-						"@babel/core": "^7.1.0",
-						"@jest/types": "^27.4.2",
-						"babel-plugin-istanbul": "^6.0.0",
-						"chalk": "^4.0.0",
-						"convert-source-map": "^1.4.0",
-						"fast-json-stable-stringify": "^2.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-haste-map": "^27.4.5",
-						"jest-regex-util": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"micromatch": "^4.0.4",
-						"pirates": "^4.0.1",
-						"slash": "^3.0.0",
-						"source-map": "^0.6.1",
-						"write-file-atomic": "^3.0.0"
-					}
-				},
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"dev": true
-				},
-				"diff-sequences": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz",
-					"integrity": "sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==",
-					"dev": true
-				},
-				"expect": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/expect/-/expect-27.4.2.tgz",
-					"integrity": "sha512-BjAXIDC6ZOW+WBFNg96J22D27Nq5ohn+oGcuP2rtOtcjuxNoV9McpQ60PcQWhdFOSBIQdR72e+4HdnbZTFSTyg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-styles": "^5.0.0",
-						"jest-get-type": "^27.4.0",
-						"jest-matcher-utils": "^27.4.2",
-						"jest-message-util": "^27.4.2",
-						"jest-regex-util": "^27.4.0"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"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
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-diff": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.4.2.tgz",
-					"integrity": "sha512-ujc9ToyUZDh9KcqvQDkk/gkbf6zSaeEg9AiBxtttXW59H/AcqEYp1ciXAtJp+jXWva5nAf/ePtSsgWwE5mqp4Q==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.0.0",
-						"diff-sequences": "^27.4.0",
-						"jest-get-type": "^27.4.0",
-						"pretty-format": "^27.4.2"
-					}
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"jest-haste-map": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.5.tgz",
-					"integrity": "sha512-oJm1b5qhhPs78K24EDGifWS0dELYxnoBiDhatT/FThgB9yxqUm5F6li3Pv+Q+apMBmmPNzOBnZ7ZxWMB1Leq1Q==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/graceful-fs": "^4.1.2",
-						"@types/node": "*",
-						"anymatch": "^3.0.3",
-						"fb-watchman": "^2.0.0",
-						"fsevents": "^2.3.2",
-						"graceful-fs": "^4.2.4",
-						"jest-regex-util": "^27.4.0",
-						"jest-serializer": "^27.4.0",
-						"jest-util": "^27.4.2",
-						"jest-worker": "^27.4.5",
-						"micromatch": "^4.0.4",
-						"walker": "^1.0.7"
-					}
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"jest-serializer": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz",
-					"integrity": "sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"graceful-fs": "^4.2.4"
-					}
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"jest-worker": {
-					"version": "27.4.5",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.5.tgz",
-					"integrity": "sha512-f2s8kEdy15cv9r7q4KkzGXvlY0JTcmCbMHZBfSQDwW77REr45IDWwd0lksDFeVHH2jJ5pqb90T77XscrjeGzzg==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.1",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-							"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-							"dev": true
-						}
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				}
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-package-json": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-6.0.4.tgz",
+			"integrity": "sha512-AEtWXYfopBj2z5N5PbkAOeNHRPUg5q+Nen7QLxV8M2zJq1ym6/lCz3fYNTCXe19puu2d06jfHhrP7v/S2PtMMw==",
+			"dev": true,
+			"dependencies": {
+				"glob": "^10.2.2",
+				"json-parse-even-better-errors": "^3.0.0",
+				"normalize-package-data": "^5.0.0",
+				"npm-normalize-package-bin": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-package-json-fast": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
+			"integrity": "sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==",
+			"dev": true,
+			"dependencies": {
+				"json-parse-even-better-errors": "^3.0.0",
+				"npm-normalize-package-bin": "^3.0.0"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-package-json-fast/node_modules/json-parse-even-better-errors": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"jest-util": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
-			"integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
-			"requires": {
-				"@jest/types": "^26.6.2",
-				"@types/node": "*",
-				"chalk": "^4.0.0",
-				"graceful-fs": "^4.2.4",
-				"is-ci": "^2.0.0",
-				"micromatch": "^4.0.2"
+		"node_modules/read-package-json-fast/node_modules/npm-normalize-package-bin": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+			"integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
+			"dev": true,
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-package-json/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/read-package-json/node_modules/glob": {
+			"version": "10.4.5",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+			"integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/read-package-json/node_modules/hosted-git-info": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-6.1.1.tgz",
+			"integrity": "sha512-r0EI+HBMcXadMrugk0GCQ+6BQV39PiWAZVfq7oIckeGiN7sjRGyQxPdft3nQekFTCQbYxLBH+/axZMeH8UX6+w==",
+			"dev": true,
 			"dependencies": {
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"lru-cache": "^7.5.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"jest-validate": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.4.2.tgz",
-			"integrity": "sha512-hWYsSUej+Fs8ZhOm5vhWzwSLmVaPAxRy+Mr+z5MzeaHm9AxUpXdoVMEW4R86y5gOobVfBsMFLk4Rb+QkiEpx1A==",
+		"node_modules/read-package-json/node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
 			"dev": true,
-			"requires": {
-				"@jest/types": "^27.4.2",
-				"camelcase": "^6.2.0",
-				"chalk": "^4.0.0",
-				"jest-get-type": "^27.4.0",
-				"leven": "^3.1.0",
-				"pretty-format": "^27.4.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-					"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-					"dev": true
-				},
-				"camelcase": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-					"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-					"dev": true
-				},
-				"jest-get-type": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz",
-					"integrity": "sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.2.tgz",
-					"integrity": "sha512-p0wNtJ9oLuvgOQDEIZ9zQjZffK7KtyR6Si0jnXULIDwrlNF8Cuir3AZP0hHv0jmKuNN/edOnbMjnzd4uTcmWiw==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"ansi-regex": "^5.0.1",
-						"ansi-styles": "^5.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
 			}
 		},
-		"jest-watch-typeahead": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.0.0.tgz",
-			"integrity": "sha512-jxoszalAb394WElmiJTFBMzie/RDCF+W7Q29n5LzOPtcoQoHWfdUtHFkbhgf5NwWe8uMOxvKb/g7ea7CshfkTw==",
+		"node_modules/read-package-json/node_modules/json-parse-even-better-errors": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.2.tgz",
+			"integrity": "sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==",
 			"dev": true,
-			"requires": {
-				"ansi-escapes": "^4.3.1",
-				"chalk": "^4.0.0",
-				"jest-regex-util": "^27.0.0",
-				"jest-watcher": "^27.0.0",
-				"slash": "^4.0.0",
-				"string-length": "^5.0.1",
-				"strip-ansi": "^7.0.1"
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-package-json/node_modules/lru-cache": {
+			"version": "7.18.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+			"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/read-package-json/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
 			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/read-package-json/node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/read-package-json/node_modules/normalize-package-data": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-5.0.0.tgz",
+			"integrity": "sha512-h9iPVIfrVZ9wVYQnxFgtw1ugSvGEMOlyPWWtm8BMJhnwyEL/FLbYbTY3V3PpjI/BUK67n9PEWDu6eHzu1fB15Q==",
+			"dev": true,
 			"dependencies": {
-				"ansi-escapes": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-					"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.21.3"
-					}
-				},
-				"ansi-regex": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-					"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-					"dev": true
-				},
-				"char-regex": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz",
-					"integrity": "sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA==",
-					"dev": true
-				},
-				"jest-regex-util": {
-					"version": "27.4.0",
-					"resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz",
-					"integrity": "sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==",
-					"dev": true
-				},
-				"slash": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-					"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-					"dev": true
-				},
-				"string-length": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
-					"integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
-					"dev": true,
-					"requires": {
-						"char-regex": "^2.0.0",
-						"strip-ansi": "^7.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
-					"integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^6.0.1"
-					}
-				},
-				"type-fest": {
-					"version": "0.21.3",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-					"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-					"dev": true
-				}
+				"hosted-git-info": "^6.0.0",
+				"is-core-module": "^2.8.1",
+				"semver": "^7.3.5",
+				"validate-npm-package-license": "^3.0.4"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"jest-watcher": {
-			"version": "27.4.2",
-			"resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.4.2.tgz",
-			"integrity": "sha512-NJvMVyyBeXfDezhWzUOCOYZrUmkSCiatpjpm+nFUid74OZEHk6aMLrZAukIiFDwdbqp6mTM6Ui1w4oc+8EobQg==",
+		"node_modules/read-package-json/node_modules/npm-normalize-package-bin": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+			"integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
 			"dev": true,
-			"requires": {
-				"@jest/test-result": "^27.4.2",
-				"@jest/types": "^27.4.2",
-				"@types/node": "*",
-				"ansi-escapes": "^4.2.1",
-				"chalk": "^4.0.0",
-				"jest-util": "^27.4.2",
-				"string-length": "^4.0.1"
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/read-pkg": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+			"integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+			"dependencies": {
+				"@types/normalize-package-data": "^2.4.0",
+				"normalize-package-data": "^2.5.0",
+				"parse-json": "^5.0.0",
+				"type-fest": "^0.6.0"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/read-pkg-up": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+			"integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
 			"dependencies": {
-				"@jest/types": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz",
-					"integrity": "sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^16.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/yargs": {
-					"version": "16.0.4",
-					"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-					"integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-					"dev": true,
-					"requires": {
-						"@types/yargs-parser": "*"
-					}
-				},
-				"ansi-escapes": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-					"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.21.3"
-					}
-				},
-				"ci-info": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
-					"integrity": "sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==",
-					"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
-				},
-				"jest-util": {
-					"version": "27.4.2",
-					"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz",
-					"integrity": "sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^27.4.2",
-						"@types/node": "*",
-						"chalk": "^4.0.0",
-						"ci-info": "^3.2.0",
-						"graceful-fs": "^4.2.4",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.21.3",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-					"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-					"dev": true
-				}
+				"find-up": "^4.1.0",
+				"read-pkg": "^5.2.0",
+				"type-fest": "^0.8.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"jest-worker": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-			"integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-			"requires": {
-				"@types/node": "*",
-				"merge-stream": "^2.0.0",
-				"supports-color": "^7.0.0"
+		"node_modules/read-pkg-up/node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/read-pkg-up/node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
 			"dependencies": {
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jetifier": {
-			"version": "1.6.8",
-			"resolved": "https://registry.npmjs.org/jetifier/-/jetifier-1.6.8.tgz",
-			"integrity": "sha512-3Zi16h6L5tXDRQJTb221cnRoVG9/9OvreLdLU2/ZjRv/GILL+2Cemt0IKvkowwkDpvouAU1DQPOJ7qaiHeIdrw=="
-		},
-		"joi": {
-			"version": "17.5.0",
-			"resolved": "https://registry.npmjs.org/joi/-/joi-17.5.0.tgz",
-			"integrity": "sha512-R7hR50COp7StzLnDi4ywOXHrBrgNXuUUfJWIR5lPY5Bm/pOD3jZaTwpluUXVLRWcoWZxkrHBBJ5hLxgnlehbdw==",
-			"requires": {
-				"@hapi/hoek": "^9.0.0",
-				"@hapi/topo": "^5.0.0",
-				"@sideway/address": "^4.1.3",
-				"@sideway/formula": "^3.0.0",
-				"@sideway/pinpoint": "^2.0.0"
+		"node_modules/read-pkg-up/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
 			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/read-pkg-up/node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
 			"dependencies": {
-				"@sideway/address": {
-					"version": "4.1.3",
-					"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.3.tgz",
-					"integrity": "sha512-8ncEUtmnTsMmL7z1YPB47kPUq7LpKWJNFPsRzHiIajGC5uXlWGn+AmkYPcHNl8S4tcEGx+cnORnNYaw2wvL+LQ==",
-					"requires": {
-						"@hapi/hoek": "^9.0.0"
-					}
-				}
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"js-string-escape": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-			"integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
-			"dev": true
+		"node_modules/read-pkg-up/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"js-tokens": {
+		"node_modules/read-pkg-up/node_modules/path-exists": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"js-yaml": {
-			"version": "3.13.1",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-			"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-			"requires": {
-				"argparse": "^1.0.7",
-				"esprima": "^4.0.0"
+		"node_modules/read-pkg-up/node_modules/type-fest": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+			"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jsbn": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-			"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+		"node_modules/read/node_modules/mute-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
+			"integrity": "sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==",
 			"dev": true,
-			"optional": true
-		},
-		"jsc-android": {
-			"version": "250230.2.1",
-			"resolved": "https://registry.npmjs.org/jsc-android/-/jsc-android-250230.2.1.tgz",
-			"integrity": "sha512-KmxeBlRjwoqCnBBKGsihFtvsBHyUFlBxJPK4FzeYcIuBfdjv6jFys44JITAgSTbQD+vIdwMEfyZklsuQX0yI1Q=="
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
 		},
-		"jscodeshift": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.11.0.tgz",
-			"integrity": "sha512-SdRK2C7jjs4k/kT2mwtO07KJN9RnjxtKn03d9JVj6c3j9WwaLcFYsICYDnLAzY0hp+wG2nxl+Cm2jWLiNVYb8g==",
-			"requires": {
-				"@babel/core": "^7.1.6",
-				"@babel/parser": "^7.1.6",
-				"@babel/plugin-proposal-class-properties": "^7.1.0",
-				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.1.0",
-				"@babel/plugin-proposal-optional-chaining": "^7.1.0",
-				"@babel/plugin-transform-modules-commonjs": "^7.1.0",
-				"@babel/preset-flow": "^7.0.0",
-				"@babel/preset-typescript": "^7.1.0",
-				"@babel/register": "^7.0.0",
-				"babel-core": "^7.0.0-bridge.0",
-				"colors": "^1.1.2",
-				"flow-parser": "0.*",
-				"graceful-fs": "^4.2.4",
-				"micromatch": "^3.1.10",
-				"neo-async": "^2.5.0",
-				"node-dir": "^0.1.17",
-				"recast": "^0.20.3",
-				"temp": "^0.8.1",
-				"write-file-atomic": "^2.3.0"
-			},
+		"node_modules/readable-stream": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+			"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
 			"dependencies": {
-				"colors": {
-					"version": "1.4.0",
-					"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-					"integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
-				},
-				"graceful-fs": {
-					"version": "4.2.8",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-					"integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
-				}
+				"core-util-is": "~1.0.0",
+				"inherits": "~2.0.3",
+				"isarray": "~1.0.0",
+				"process-nextick-args": "~2.0.0",
+				"safe-buffer": "~5.1.1",
+				"string_decoder": "~1.1.1",
+				"util-deprecate": "~1.0.1"
 			}
 		},
-		"jsdoc-type-pratt-parser": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-2.0.0.tgz",
-			"integrity": "sha512-sUuj2j48wxrEpbFjDp1sAesAxPiLT+z0SWVmMafyIINs6Lj5gIPKh3VrkBZu4E/Dv+wHpOot0m6H8zlHQjwqeQ==",
-			"dev": true
-		},
-		"jsdom": {
-			"version": "16.7.0",
-			"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-			"integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+		"node_modules/readdir-glob": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+			"integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
 			"dev": true,
-			"requires": {
-				"abab": "^2.0.5",
-				"acorn": "^8.2.4",
-				"acorn-globals": "^6.0.0",
-				"cssom": "^0.4.4",
-				"cssstyle": "^2.3.0",
-				"data-urls": "^2.0.0",
-				"decimal.js": "^10.2.1",
-				"domexception": "^2.0.1",
-				"escodegen": "^2.0.0",
-				"form-data": "^3.0.0",
-				"html-encoding-sniffer": "^2.0.1",
-				"http-proxy-agent": "^4.0.1",
-				"https-proxy-agent": "^5.0.0",
-				"is-potential-custom-element-name": "^1.0.1",
-				"nwsapi": "^2.2.0",
-				"parse5": "6.0.1",
-				"saxes": "^5.0.1",
-				"symbol-tree": "^3.2.4",
-				"tough-cookie": "^4.0.0",
-				"w3c-hr-time": "^1.0.2",
-				"w3c-xmlserializer": "^2.0.0",
-				"webidl-conversions": "^6.1.0",
-				"whatwg-encoding": "^1.0.5",
-				"whatwg-mimetype": "^2.3.0",
-				"whatwg-url": "^8.5.0",
-				"ws": "^7.4.6",
-				"xml-name-validator": "^3.0.0"
-			},
-			"dependencies": {
-				"acorn": {
-					"version": "8.6.0",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
-					"integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
-					"dev": true
-				},
-				"agent-base": {
-					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-					"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-					"dev": true,
-					"requires": {
-						"debug": "4"
-					}
-				},
-				"combined-stream": {
-					"version": "1.0.8",
-					"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-					"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-					"dev": true,
-					"requires": {
-						"delayed-stream": "~1.0.0"
-					}
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"form-data": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-					"integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-					"dev": true,
-					"requires": {
-						"asynckit": "^0.4.0",
-						"combined-stream": "^1.0.8",
-						"mime-types": "^2.1.12"
-					}
-				},
-				"http-proxy-agent": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-					"integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-					"dev": true,
-					"requires": {
-						"@tootallnate/once": "1",
-						"agent-base": "6",
-						"debug": "4"
-					}
-				},
-				"https-proxy-agent": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-					"integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
-					"dev": true,
-					"requires": {
-						"agent-base": "6",
-						"debug": "4"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"parse5": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-					"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-					"dev": true
-				},
-				"psl": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-					"integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-					"dev": true
-				},
-				"tough-cookie": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-					"integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
-					"dev": true,
-					"requires": {
-						"psl": "^1.1.33",
-						"punycode": "^2.1.1",
-						"universalify": "^0.1.2"
-					}
-				},
-				"tr46": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-					"integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-					"dev": true,
-					"requires": {
-						"punycode": "^2.1.1"
-					}
-				},
-				"webidl-conversions": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-					"integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-					"dev": true
-				},
-				"whatwg-url": {
-					"version": "8.7.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-					"integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.7.0",
-						"tr46": "^2.1.0",
-						"webidl-conversions": "^6.1.0"
-					}
-				},
-				"ws": {
-					"version": "7.5.6",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz",
-					"integrity": "sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==",
-					"dev": true
-				}
+			"dependencies": {
+				"minimatch": "^5.1.0"
 			}
 		},
-		"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",
-			"requires": {
-				"htmlparser2-without-node-native": "^3.9.2",
-				"querystring": "^0.2.0"
+		"node_modules/readdir-glob/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"jsesc": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4="
-		},
-		"json-buffer": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-			"dev": true
-		},
-		"json-parse-better-errors": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-			"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
-		},
-		"json-parse-even-better-errors": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-			"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-		},
-		"json-schema": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-			"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-			"dev": true
+		"node_modules/readdir-glob/node_modules/minimatch": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+			"integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"json-schema-traverse": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-			"dev": true
+		"node_modules/readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dependencies": {
+				"picomatch": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8.10.0"
+			}
 		},
-		"json-stable-stringify-without-jsonify": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-			"integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-			"dev": true
+		"node_modules/readline": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
+			"integrity": "sha512-k2d6ACCkiNYz222Fs/iNze30rRJ1iIicW7JuX/7/cozvih6YCkFZH+J6mAFDVgv0dRBaAyr4jDqC95R2y4IADg=="
 		},
-		"json-stringify-nice": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz",
-			"integrity": "sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw==",
-			"dev": true
+		"node_modules/reassure": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/reassure/-/reassure-0.7.1.tgz",
+			"integrity": "sha512-dCDo4AInl48Q66PAbF3JzV5WVGIQu2AiCNAy+zhcZ0ESalb4zsVuAvhLdgXCsWr9DhPju63rEGgoNWl9noDVKg==",
+			"dev": true,
+			"dependencies": {
+				"@callstack/reassure-cli": "0.6.1",
+				"@callstack/reassure-danger": "0.1.1",
+				"@callstack/reassure-measure": "0.3.1"
+			}
 		},
-		"json-stringify-safe": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-			"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-			"dev": true
+		"node_modules/recast": {
+			"version": "0.21.5",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.21.5.tgz",
+			"integrity": "sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==",
+			"dependencies": {
+				"ast-types": "0.15.2",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
 		},
-		"json2php": {
-			"version": "0.0.5",
-			"resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.5.tgz",
-			"integrity": "sha512-jWpsGAYlQDKOjJcyq3rYaxcZ+5YMhZIKHKTjdIKJPI9zLSX+yRWHSSwtV8hvIg7YMhbKkgPO669Ve2ZgFK5C7w==",
-			"dev": true
+		"node_modules/recast/node_modules/ast-types": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.15.2.tgz",
+			"integrity": "sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==",
+			"dependencies": {
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"json5": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-			"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-			"requires": {
-				"minimist": "^1.2.5"
+		"node_modules/rechoir": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+			"integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+			"dependencies": {
+				"resolve": "^1.20.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
 			}
 		},
-		"jsonc-parser": {
+		"node_modules/redent": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
-			"integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+			"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+			"dependencies": {
+				"indent-string": "^4.0.0",
+				"strip-indent": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"jsonfile": {
+		"node_modules/redent/node_modules/indent-string": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-			"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-			"requires": {
-				"graceful-fs": "^4.1.6"
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"jsonparse": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-			"integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
-			"dev": true
+		"node_modules/redux": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+			"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
 		},
-		"jsprim": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-			"integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-			"dev": true,
-			"requires": {
-				"assert-plus": "1.0.0",
-				"extsprintf": "1.3.0",
-				"json-schema": "0.2.3",
-				"verror": "1.10.0"
-			}
+		"node_modules/regenerate": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+			"integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+			"license": "MIT"
 		},
-		"jsx-ast-utils": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
-			"integrity": "sha512-EIsmt3O3ljsU6sot/J4E1zDRxfBNrhjyf/OKjlydwgEimQuznlM4Wv7U+ueONJMyEn1WRE0K8dhi3dVAXYT24Q==",
-			"dev": true,
-			"requires": {
-				"array-includes": "^3.1.2",
-				"object.assign": "^4.1.2"
-			},
-			"dependencies": {
-				"array-includes": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.2.tgz",
-					"integrity": "sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.18.0-next.1",
-						"get-intrinsic": "^1.0.1",
-						"is-string": "^1.0.5"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.18.0-next.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
-					"integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
-					"dev": true,
-					"requires": {
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1",
-						"is-callable": "^1.2.2",
-						"is-negative-zero": "^2.0.0",
-						"is-regex": "^1.1.1",
-						"object-inspect": "^1.8.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.1",
-						"string.prototype.trimend": "^1.0.1",
-						"string.prototype.trimstart": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
-					"integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
-					"integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"object-inspect": {
-					"version": "1.9.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-					"integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
-					"integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3"
-					}
-				}
+		"node_modules/regenerate-unicode-properties": {
+			"version": "10.2.0",
+			"resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
+			"integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerate": "^1.4.2"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"junk": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
-			"integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-			"dev": true
-		},
-		"just-diff": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/just-diff/-/just-diff-5.1.1.tgz",
-			"integrity": "sha512-u8HXJ3HlNrTzY7zrYYKjNEfBlyjqhdBkoyTVdjtn7p02RJD5NvR8rIClzeGA7t+UYP1/7eAkWNLU0+P3QrEqKQ==",
-			"dev": true
+		"node_modules/regenerator-runtime": {
+			"version": "0.13.11",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
 		},
-		"just-diff-apply": {
-			"version": "5.4.1",
-			"resolved": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.4.1.tgz",
-			"integrity": "sha512-AAV5Jw7tsniWwih8Ly3fXxEZ06y+6p5TwQMsw0dzZ/wPKilzyDgdAnL0Ug4NNIquPUOh1vfFWEHbmXUqM5+o8g==",
-			"dev": true
+		"node_modules/regenerator-transform": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+			"integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+			"dependencies": {
+				"@babel/runtime": "^7.8.4"
+			}
 		},
-		"keyv": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.0.tgz",
-			"integrity": "sha512-2YvuMsA+jnFGtBareKqgANOEKe1mk3HKiXu2fRmAfyxG0MJAywNhi5ttWA3PMjl4NmpyjZNbFifR2vNjW1znfA==",
+		"node_modules/regex-not": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+			"integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
 			"dev": true,
-			"requires": {
-				"json-buffer": "3.0.1"
+			"dependencies": {
+				"extend-shallow": "^3.0.2",
+				"safe-regex": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"kind-of": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
-		},
-		"klaw": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
-			"integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
-			"requires": {
-				"graceful-fs": "^4.1.9"
+		"node_modules/regexp.prototype.flags": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
+			"integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.2.0",
+				"functions-have-names": "^1.2.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"klaw-sync": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
-			"integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
-			"dev": true,
-			"requires": {
-				"graceful-fs": "^4.1.11"
+		"node_modules/regexpp": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+			"integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/mysticatea"
 			}
 		},
-		"kleur": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
-		},
-		"klona": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-			"integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
-			"dev": true
-		},
-		"known-css-properties": {
-			"version": "0.24.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.24.0.tgz",
-			"integrity": "sha512-RTSoaUAfLvpR357vWzAz/50Q/BmHfmE6ETSWfutT0AJiw10e6CmcdYRQJlLRd95B53D0Y2aD1jSxD3V3ySF+PA==",
-			"dev": true
-		},
-		"language-subtag-registry": {
-			"version": "0.3.21",
-			"resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
-			"integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==",
-			"dev": true
-		},
-		"language-tags": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-			"integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
-			"dev": true,
-			"requires": {
-				"language-subtag-registry": "~0.3.2"
+		"node_modules/regexpu-core": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.1.1.tgz",
+			"integrity": "sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerate": "^1.4.2",
+				"regenerate-unicode-properties": "^10.2.0",
+				"regjsgen": "^0.8.0",
+				"regjsparser": "^0.11.0",
+				"unicode-match-property-ecmascript": "^2.0.0",
+				"unicode-match-property-value-ecmascript": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"lazy-cache": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-			"integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-			"dev": true
+		"node_modules/regjsgen": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+			"integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+			"license": "MIT"
 		},
-		"lazy-universal-dotenv": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.1.tgz",
-			"integrity": "sha512-prXSYk799h3GY3iOWnC6ZigYzMPjxN2svgjJ9shk7oMadSNX3wXy0B6F32PMJv7qtMnrIbUxoEHzbutvxR2LBQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.0",
-				"app-root-dir": "^1.0.2",
-				"core-js": "^3.0.4",
-				"dotenv": "^8.0.0",
-				"dotenv-expand": "^5.1.0"
+		"node_modules/regjsparser": {
+			"version": "0.11.1",
+			"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.11.1.tgz",
+			"integrity": "sha512-1DHODs4B8p/mQHU9kr+jv8+wIC9mtG4eBHxWxIq5mhjE3D5oORhCc6deRKzTjs9DcfRFmj9BHSDguZklqCGFWQ==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"jsesc": "~3.0.2"
+			},
+			"bin": {
+				"regjsparser": "bin/parser"
 			}
 		},
-		"lazystream": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
-			"integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
+		"node_modules/relateurl": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+			"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
 			"dev": true,
-			"requires": {
-				"readable-stream": "^2.0.5"
+			"engines": {
+				"node": ">= 0.10"
 			}
 		},
-		"lerna": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/lerna/-/lerna-5.5.2.tgz",
-			"integrity": "sha512-P0ThZMfWJ4BP9xRbXaLyoOCYjlPN615FRV2ZBnTBA12lw32IlcREIgvF0N1zZX7wXtsmN56rU3CABoJ5lU8xuw==",
-			"dev": true,
-			"requires": {
-				"@lerna/add": "5.5.2",
-				"@lerna/bootstrap": "5.5.2",
-				"@lerna/changed": "5.5.2",
-				"@lerna/clean": "5.5.2",
-				"@lerna/cli": "5.5.2",
-				"@lerna/create": "5.5.2",
-				"@lerna/diff": "5.5.2",
-				"@lerna/exec": "5.5.2",
-				"@lerna/import": "5.5.2",
-				"@lerna/info": "5.5.2",
-				"@lerna/init": "5.5.2",
-				"@lerna/link": "5.5.2",
-				"@lerna/list": "5.5.2",
-				"@lerna/publish": "5.5.2",
-				"@lerna/run": "5.5.2",
-				"@lerna/version": "5.5.2",
-				"import-local": "^3.0.2",
-				"npmlog": "^6.0.2",
-				"nx": ">=14.6.1 < 16",
-				"typescript": "^3 || ^4"
+		"node_modules/remark": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/remark/-/remark-10.0.1.tgz",
+			"integrity": "sha512-E6lMuoLIy2TyiokHprMjcWNJ5UxfGQjaMSMhV+f4idM625UjjK4j798+gPs5mfjzDE6vL0oFKVeZM6gZVSVrzQ==",
+			"dependencies": {
+				"remark-parse": "^6.0.0",
+				"remark-stringify": "^6.0.0",
+				"unified": "^7.0.0"
 			}
 		},
-		"leven": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-			"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
+		"node_modules/remark-external-links": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
+			"integrity": "sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==",
+			"dev": true,
+			"dependencies": {
+				"extend": "^3.0.0",
+				"is-absolute-url": "^3.0.0",
+				"mdast-util-definitions": "^4.0.0",
+				"space-separated-tokens": "^1.0.0",
+				"unist-util-visit": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
 		},
-		"levn": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-			"integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+		"node_modules/remark-external-links/node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
 			"dev": true,
-			"requires": {
-				"prelude-ls": "~1.1.2",
-				"type-check": "~0.3.2"
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"libnpmaccess": {
-			"version": "6.0.4",
-			"resolved": "https://registry.npmjs.org/libnpmaccess/-/libnpmaccess-6.0.4.tgz",
-			"integrity": "sha512-qZ3wcfIyUoW0+qSFkMBovcTrSGJ3ZeyvpR7d5N9pEYv/kXs8sHP2wiqEIXBKLFrZlmM0kR0RJD7mtfLngtlLag==",
+		"node_modules/remark-external-links/node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
 			"dev": true,
-			"requires": {
-				"aproba": "^2.0.0",
-				"minipass": "^3.1.1",
-				"npm-package-arg": "^9.0.1",
-				"npm-registry-fetch": "^13.0.0"
-			},
 			"dependencies": {
-				"aproba": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-					"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-					"dev": true
-				},
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				}
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"libnpmpublish": {
-			"version": "6.0.5",
-			"resolved": "https://registry.npmjs.org/libnpmpublish/-/libnpmpublish-6.0.5.tgz",
-			"integrity": "sha512-LUR08JKSviZiqrYTDfywvtnsnxr+tOvBU0BF8H+9frt7HMvc6Qn6F8Ubm72g5hDTHbq8qupKfDvDAln2TVPvFg==",
+		"node_modules/remark-external-links/node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
 			"dev": true,
-			"requires": {
-				"normalize-package-data": "^4.0.0",
-				"npm-package-arg": "^9.0.1",
-				"npm-registry-fetch": "^13.0.0",
-				"semver": "^7.3.7",
-				"ssri": "^9.0.0"
-			},
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"is-core-module": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-					"integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"normalize-package-data": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-4.0.1.tgz",
-					"integrity": "sha512-EBk5QKKuocMJhB3BILuKhmaPjI8vNRSpIfO9woLC6NyHVkKKdVEdAO1mrT0ZfxNR1lKwCcTkuZfmGIFdizZ8Pg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"is-core-module": "^2.8.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-license": "^3.0.4"
-					}
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"semver": {
-					"version": "7.3.7",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-					"integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					},
-					"dependencies": {
-						"lru-cache": {
-							"version": "6.0.0",
-							"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-							"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-							"dev": true,
-							"requires": {
-								"yallist": "^4.0.0"
-							}
-						}
-					}
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"validate-npm-package-license": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-					"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-					"dev": true,
-					"requires": {
-						"spdx-correct": "^3.0.0",
-						"spdx-expression-parse": "^3.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"lilconfig": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
-			"integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
-			"dev": true
-		},
-		"line-height": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/line-height/-/line-height-0.3.1.tgz",
-			"integrity": "sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk=",
-			"requires": {
-				"computed-style": "~0.1.3"
+		"node_modules/remark-parse": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-6.0.3.tgz",
+			"integrity": "sha512-QbDXWN4HfKTUC0hHa4teU463KclLAnwpn/FBn87j9cKYJWWawbiLgMfP2Q4XwhxxuuuOxHlw+pSN0OKuJwyVvg==",
+			"dependencies": {
+				"collapse-white-space": "^1.0.2",
+				"is-alphabetical": "^1.0.0",
+				"is-decimal": "^1.0.0",
+				"is-whitespace-character": "^1.0.0",
+				"is-word-character": "^1.0.0",
+				"markdown-escapes": "^1.0.0",
+				"parse-entities": "^1.1.0",
+				"repeat-string": "^1.5.4",
+				"state-toggle": "^1.0.0",
+				"trim": "0.0.1",
+				"trim-trailing-lines": "^1.0.0",
+				"unherit": "^1.0.4",
+				"unist-util-remove-position": "^1.0.0",
+				"vfile-location": "^2.0.0",
+				"xtend": "^4.0.1"
 			}
 		},
-		"lines-and-columns": {
-			"version": "1.1.6",
-			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-			"integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+		"node_modules/remark-slug": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.1.0.tgz",
+			"integrity": "sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ==",
+			"dev": true,
+			"dependencies": {
+				"github-slugger": "^1.0.0",
+				"mdast-util-to-string": "^1.0.0",
+				"unist-util-visit": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
 		},
-		"linkify-it": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
-			"integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+		"node_modules/remark-slug/node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
 			"dev": true,
-			"requires": {
-				"uc.micro": "^1.0.1"
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"lint-staged": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.0.1.tgz",
-			"integrity": "sha512-Qk48GmcMX8zFzhuJsf0ZquILxnnDkY56Y+/y1TGxEe4S5P+RetnisiF0Z15t+Gwa5PMNAG4dPxqGHabW7L4zwg==",
+		"node_modules/remark-slug/node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
 			"dev": true,
-			"requires": {
-				"chalk": "^3.0.0",
-				"commander": "^4.0.1",
-				"cosmiconfig": "^6.0.0",
-				"debug": "^4.1.1",
-				"dedent": "^0.7.0",
-				"execa": "^3.4.0",
-				"listr": "^0.14.3",
-				"log-symbols": "^3.0.0",
-				"micromatch": "^4.0.2",
-				"normalize-path": "^3.0.0",
-				"please-upgrade-node": "^3.2.0",
-				"stringify-object": "^3.3.0"
-			},
 			"dependencies": {
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"chalk": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-					"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"commander": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-					"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-					"dev": true
-				},
-				"cosmiconfig": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-					"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.1.0",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.7.2"
-					}
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"execa": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-3.4.0.tgz",
-					"integrity": "sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.0",
-						"get-stream": "^5.0.0",
-						"human-signals": "^1.1.1",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.0",
-						"onetime": "^5.1.0",
-						"p-finally": "^2.0.0",
-						"signal-exit": "^3.0.2",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"log-symbols": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-					"integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
-					"dev": true,
-					"requires": {
-						"chalk": "^2.4.2"
-					},
-					"dependencies": {
-						"ansi-styles": {
-							"version": "3.2.1",
-							"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-							"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-							"dev": true,
-							"requires": {
-								"color-convert": "^1.9.0"
-							}
-						},
-						"chalk": {
-							"version": "2.4.2",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-							"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-							"dev": true,
-							"requires": {
-								"ansi-styles": "^3.2.1",
-								"escape-string-regexp": "^1.0.5",
-								"supports-color": "^5.3.0"
-							}
-						},
-						"color-convert": {
-							"version": "1.9.3",
-							"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-							"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-							"dev": true,
-							"requires": {
-								"color-name": "1.1.3"
-							}
-						},
-						"color-name": {
-							"version": "1.1.3",
-							"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-							"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-							"dev": true
-						},
-						"has-flag": {
-							"version": "3.0.0",
-							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-							"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-							"dev": true
-						},
-						"supports-color": {
-							"version": "5.5.0",
-							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-							"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-							"dev": true,
-							"requires": {
-								"has-flag": "^3.0.0"
-							}
-						}
-					}
-				},
-				"micromatch": {
-					"version": "4.0.5",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.2",
-						"picomatch": "^2.3.1"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"p-finally": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-					"integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-					"dev": true
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"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",
-			"integrity": "sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==",
+		"node_modules/remark-slug/node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
 			"dev": true,
-			"requires": {
-				"@samverschueren/stream-to-observable": "^0.3.0",
-				"is-observable": "^1.1.0",
-				"is-promise": "^2.1.0",
-				"is-stream": "^1.1.0",
-				"listr-silent-renderer": "^1.1.1",
-				"listr-update-renderer": "^0.5.0",
-				"listr-verbose-renderer": "^0.5.0",
-				"p-map": "^2.0.0",
-				"rxjs": "^6.3.3"
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
 			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-stringify": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-6.0.4.tgz",
+			"integrity": "sha512-eRWGdEPMVudijE/psbIDNcnJLRVx3xhfuEsTDGgH4GsFF91dVhw5nhmnBppafJ7+NWINW6C7ZwWbi30ImJzqWg==",
 			"dependencies": {
-				"is-promise": {
-					"version": "2.2.2",
-					"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-					"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-					"dev": true
-				},
-				"p-map": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-					"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-					"dev": true
-				}
+				"ccount": "^1.0.0",
+				"is-alphanumeric": "^1.0.0",
+				"is-decimal": "^1.0.0",
+				"is-whitespace-character": "^1.0.0",
+				"longest-streak": "^2.0.1",
+				"markdown-escapes": "^1.0.0",
+				"markdown-table": "^1.1.0",
+				"mdast-util-compact": "^1.0.0",
+				"parse-entities": "^1.0.2",
+				"repeat-string": "^1.5.4",
+				"state-toggle": "^1.0.0",
+				"stringify-entities": "^1.0.1",
+				"unherit": "^1.0.4",
+				"xtend": "^4.0.1"
 			}
 		},
-		"listr-silent-renderer": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz",
-			"integrity": "sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=",
-			"dev": true
+		"node_modules/rememo": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/rememo/-/rememo-4.0.2.tgz",
+			"integrity": "sha512-NVfSP9NstE3QPNs/TnegQY0vnJnstKQSpcrsI2kBTB3dB2PkdfKdTa+abbjMIDqpc63fE5LfjLgfMst0ULMFxQ=="
 		},
-		"listr-update-renderer": {
+		"node_modules/remove-accents": {
 			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz",
-			"integrity": "sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==",
+			"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+			"integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+		},
+		"node_modules/remove-trailing-separator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+			"integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
+			"dev": true,
+			"optional": true
+		},
+		"node_modules/renderkid": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+			"integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
 			"dev": true,
-			"requires": {
-				"chalk": "^1.1.3",
-				"cli-truncate": "^0.2.1",
-				"elegant-spinner": "^1.0.1",
-				"figures": "^1.7.0",
-				"indent-string": "^3.0.0",
-				"log-symbols": "^1.0.2",
-				"log-update": "^2.3.0",
-				"strip-ansi": "^3.0.1"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-					"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-					"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-					"dev": true
-				},
-				"chalk": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^2.2.1",
-						"escape-string-regexp": "^1.0.2",
-						"has-ansi": "^2.0.0",
-						"strip-ansi": "^3.0.0",
-						"supports-color": "^2.0.0"
-					}
-				},
-				"figures": {
-					"version": "1.7.0",
-					"resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-					"integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-					"dev": true,
-					"requires": {
-						"escape-string-regexp": "^1.0.5",
-						"object-assign": "^4.1.0"
-					}
-				},
-				"log-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
-					"integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
-					"dev": true,
-					"requires": {
-						"chalk": "^1.0.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-					"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^2.0.0"
-					}
-				},
-				"supports-color": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-					"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-					"dev": true
-				}
+				"css-select": "^4.1.3",
+				"dom-converter": "^0.2.0",
+				"htmlparser2": "^6.1.0",
+				"lodash": "^4.17.21",
+				"strip-ansi": "^6.0.1"
 			}
 		},
-		"listr-verbose-renderer": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
-			"integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+		"node_modules/renderkid/node_modules/css-select": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+			"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
 			"dev": true,
-			"requires": {
-				"chalk": "^2.4.1",
-				"cli-cursor": "^2.1.0",
-				"date-fns": "^1.27.2",
-				"figures": "^2.0.0"
-			},
 			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				}
+				"boolbase": "^1.0.0",
+				"css-what": "^6.0.1",
+				"domhandler": "^4.3.1",
+				"domutils": "^2.8.0",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
 			}
 		},
-		"load-json-file": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-			"integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
+		"node_modules/renderkid/node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"graceful-fs": "^4.1.2",
-				"parse-json": "^2.2.0",
-				"pify": "^2.0.0",
-				"pinkie-promise": "^2.0.0",
-				"strip-bom": "^2.0.0"
-			},
-			"dependencies": {
-				"parse-json": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-					"integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"error-ex": "^1.2.0"
-					}
-				}
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
 			}
 		},
-		"loader-runner": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-			"integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
-			"dev": true
+		"node_modules/renderkid/node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
 		},
-		"loader-utils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.3.tgz",
-			"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
+		"node_modules/renderkid/node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
 			"dev": true,
-			"requires": {
-				"big.js": "^5.2.2",
-				"emojis-list": "^3.0.0",
-				"json5": "^2.1.2"
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
 			}
 		},
-		"locate-path": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-			"integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+		"node_modules/renderkid/node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
 			"dev": true,
-			"requires": {
-				"p-locate": "^2.0.0",
-				"path-exists": "^3.0.0"
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
 			}
 		},
-		"lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-		},
-		"lodash.debounce": {
-			"version": "4.0.8",
-			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-			"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+		"node_modules/renderkid/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"dev": true,
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
 		},
-		"lodash.defaults": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-			"integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
-			"dev": true
+		"node_modules/repeat-element": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
+			"integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"lodash.difference": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-			"integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-			"dev": true
+		"node_modules/repeat-string": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+			"integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+			"engines": {
+				"node": ">=0.10"
+			}
 		},
-		"lodash.flatten": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
-			"integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
-			"dev": true
+		"node_modules/replace-ext": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+			"integrity": "sha512-vuNYXC7gG7IeVNBC1xUllqCcZKRbJoSPOBhnTEcAIiKCsbuef6zO3F0Rve3isPMMoNoQRWjQwbAgAjHUHniyEA==",
+			"engines": {
+				"node": ">= 0.10"
+			}
 		},
-		"lodash.get": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-			"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
-			"dev": true
+		"node_modules/requestidlecallback": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
+			"integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ=="
 		},
-		"lodash.isequal": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-			"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"lodash.ismatch": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-			"integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=",
-			"dev": true
+		"node_modules/require-from-string": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"lodash.isplainobject": {
-			"version": "4.0.6",
-			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-			"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
-			"dev": true
+		"node_modules/require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
 		},
-		"lodash.memoize": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-			"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
-			"dev": true
+		"node_modules/requireindex": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+			"integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+			"engines": {
+				"node": ">=0.10.5"
+			}
 		},
-		"lodash.merge": {
-			"version": "4.6.2",
-			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-			"dev": true
+		"node_modules/requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
 		},
-		"lodash.set": {
-			"version": "4.3.2",
-			"resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
-			"integrity": "sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=",
+		"node_modules/resize-observer-polyfill": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+			"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
 			"dev": true
 		},
-		"lodash.throttle": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-			"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+		"node_modules/resolve": {
+			"version": "1.22.8",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"lodash.truncate": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
-			"integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
-			"dev": true
+		"node_modules/resolve-alpn": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+			"integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
 		},
-		"lodash.union": {
-			"version": "4.6.0",
-			"resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
-			"integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=",
-			"dev": true
+		"node_modules/resolve-bin": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/resolve-bin/-/resolve-bin-0.4.0.tgz",
+			"integrity": "sha1-RxMiSYkRAa+xmZH+k3ywpfBy5dk=",
+			"dependencies": {
+				"find-parent-dir": "~0.3.0"
+			}
 		},
-		"lodash.uniq": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-			"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-			"dev": true
+		"node_modules/resolve-cwd": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+			"integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+			"dependencies": {
+				"resolve-from": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"log-symbols": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
-			"integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
-			"requires": {
-				"chalk": "^2.0.1"
-			},
-			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				}
+		"node_modules/resolve-cwd/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"log-update": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz",
-			"integrity": "sha1-iDKP19HOeTiykoN0bwsbwSayRwg=",
-			"dev": true,
-			"requires": {
-				"ansi-escapes": "^3.0.0",
-				"cli-cursor": "^2.0.0",
-				"wrap-ansi": "^3.0.1"
-			},
+		"node_modules/resolve-dir": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
+			"integrity": "sha512-QxMPqI6le2u0dCLyiGzgy92kjkkL6zO0XyvHzjdTNH3zM6e5Hz3BwG6+aEyNgiQ5Xz6PwTwgQEj3U50dByPKIA==",
 			"dependencies": {
-				"wrap-ansi": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz",
-					"integrity": "sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=",
-					"dev": true,
-					"requires": {
-						"string-width": "^2.1.1",
-						"strip-ansi": "^4.0.0"
-					}
-				}
+				"expand-tilde": "^1.2.2",
+				"global-modules": "^0.2.3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"logkitty": {
-			"version": "0.7.1",
-			"resolved": "https://registry.npmjs.org/logkitty/-/logkitty-0.7.1.tgz",
-			"integrity": "sha512-/3ER20CTTbahrCrpYfPn7Xavv9diBROZpoXGVZDWMw4b/X4uuUwAC0ki85tgsdMRONURyIJbcOvS94QsUBYPbQ==",
-			"requires": {
-				"ansi-fragments": "^0.2.1",
-				"dayjs": "^1.8.15",
-				"yargs": "^15.1.0"
-			},
+		"node_modules/resolve-dir/node_modules/global-modules": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
+			"integrity": "sha512-JeXuCbvYzYXcwE6acL9V2bAOeSIGl4dD+iwLY9iUx2VBJJ80R18HCn+JCwHM9Oegdfya3lEkGCdaRkSyc10hDA==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"yargs": {
-					"version": "15.4.1",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-					"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-					"requires": {
-						"cliui": "^6.0.0",
-						"decamelize": "^1.2.0",
-						"find-up": "^4.1.0",
-						"get-caller-file": "^2.0.1",
-						"require-directory": "^2.1.1",
-						"require-main-filename": "^2.0.0",
-						"set-blocking": "^2.0.0",
-						"string-width": "^4.2.0",
-						"which-module": "^2.0.0",
-						"y18n": "^4.0.0",
-						"yargs-parser": "^18.1.2"
-					}
-				},
-				"yargs-parser": {
-					"version": "18.1.3",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-					"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
-				}
+				"global-prefix": "^0.1.4",
+				"is-windows": "^0.2.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/resolve-dir/node_modules/global-prefix": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
+			"integrity": "sha512-gOPiyxcD9dJGCEArAhF4Hd0BAqvAe/JzERP7tYumE4yIkmIedPUVXcJFWbV3/p/ovIIvKjkrTk+f1UVkq7vvbw==",
+			"dependencies": {
+				"homedir-polyfill": "^1.0.0",
+				"ini": "^1.3.4",
+				"is-windows": "^0.2.0",
+				"which": "^1.2.12"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/resolve-dir/node_modules/is-windows": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+			"integrity": "sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"longest-streak": {
+		"node_modules/resolve-from": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+			"integrity": "sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/resolve-url": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+			"integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
+			"deprecated": "https://github.com/lydell/resolve-url#deprecated"
+		},
+		"node_modules/resolve.exports": {
 			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.2.tgz",
-			"integrity": "sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz",
+			"integrity": "sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==",
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"loose-envify": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-			"requires": {
-				"js-tokens": "^3.0.0 || ^4.0.0"
+		"node_modules/responselike": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+			"integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+			"dependencies": {
+				"lowercase-keys": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"loud-rejection": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-			"integrity": "sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==",
+		"node_modules/resq": {
+			"version": "1.11.0",
+			"resolved": "https://registry.npmjs.org/resq/-/resq-1.11.0.tgz",
+			"integrity": "sha512-G10EBz+zAAy3zUd/CDoBbXRL6ia9kOo3xRHrMDsHljI0GDkhYlyjwoCx5+3eCC4swi1uCoZQhskuJkj7Gp57Bw==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"currently-unhandled": "^0.4.1",
-				"signal-exit": "^3.0.0"
+			"dependencies": {
+				"fast-deep-equal": "^2.0.1"
 			}
 		},
-		"lower-case": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"requires": {
-				"tslib": "^2.0.3"
-			}
+		"node_modules/resq/node_modules/fast-deep-equal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+			"integrity": "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==",
+			"dev": true
 		},
-		"lowercase-keys": {
+		"node_modules/restore-cursor": {
 			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-			"integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+			"integrity": "sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==",
+			"dev": true,
+			"dependencies": {
+				"onetime": "^2.0.0",
+				"signal-exit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"lowlight": {
-			"version": "1.20.0",
-			"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
-			"integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+		"node_modules/ret": {
+			"version": "0.1.15",
+			"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+			"integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
 			"dev": true,
-			"requires": {
-				"fault": "^1.0.0",
-				"highlight.js": "~10.7.0"
+			"engines": {
+				"node": ">=0.12"
 			}
 		},
-		"lru-cache": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
-			"integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==",
+		"node_modules/retry": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+			"integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
 			"dev": true,
-			"requires": {
-				"pseudomap": "^1.0.2",
-				"yallist": "^2.1.2"
+			"engines": {
+				"node": ">= 4"
 			}
 		},
-		"lz-string": {
-			"version": "1.4.4",
-			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
-			"dev": true
+		"node_modules/reusify": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"engines": {
+				"iojs": ">=1.0.0",
+				"node": ">=0.10.0"
+			}
 		},
-		"macos-release": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.2.0.tgz",
-			"integrity": "sha512-iV2IDxZaX8dIcM7fG6cI46uNmHUxHE4yN+Z8tKHAW1TBPMZDIKHf/3L+YnOuj/FK9il14UaVdHmiQ1tsi90ltA==",
+		"node_modules/rgb2hex": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/rgb2hex/-/rgb2hex-0.2.5.tgz",
+			"integrity": "sha512-22MOP1Rh7sAo1BZpDG6R5RFYzR2lYEgwq7HEmyW2qcsOqR2lQKmn+O//xV3YG/0rrhMC6KVX2hU+ZXuaw9a5bw==",
 			"dev": true
 		},
-		"make-dir": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
-			"integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
-			"dev": true,
-			"requires": {
-				"semver": "^6.0.0"
+		"node_modules/rimraf": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+			"dependencies": {
+				"glob": "^7.1.3"
 			},
+			"bin": {
+				"rimraf": "bin.js"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/rimraf/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
 			"dependencies": {
-				"semver": {
-					"version": "6.3.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-					"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-					"dev": true
-				}
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"make-fetch-happen": {
-			"version": "10.2.1",
-			"resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz",
-			"integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==",
+		"node_modules/ripemd160": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+			"integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
 			"dev": true,
-			"requires": {
-				"agentkeepalive": "^4.2.1",
-				"cacache": "^16.1.0",
-				"http-cache-semantics": "^4.1.0",
-				"http-proxy-agent": "^5.0.0",
-				"https-proxy-agent": "^5.0.0",
-				"is-lambda": "^1.0.1",
-				"lru-cache": "^7.7.1",
-				"minipass": "^3.1.6",
-				"minipass-collect": "^1.0.2",
-				"minipass-fetch": "^2.0.3",
-				"minipass-flush": "^1.0.5",
-				"minipass-pipeline": "^1.2.4",
-				"negotiator": "^0.6.3",
-				"promise-retry": "^2.0.1",
-				"socks-proxy-agent": "^7.0.0",
-				"ssri": "^9.0.0"
-			},
-			"dependencies": {
-				"@npmcli/fs": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
-					"integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==",
-					"dev": true,
-					"requires": {
-						"@gar/promisify": "^1.1.3",
-						"semver": "^7.3.5"
-					}
-				},
-				"@npmcli/move-file": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz",
-					"integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==",
-					"dev": true,
-					"requires": {
-						"mkdirp": "^1.0.4",
-						"rimraf": "^3.0.2"
-					}
-				},
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"cacache": {
-					"version": "16.1.3",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
-					"integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^2.1.0",
-						"@npmcli/move-file": "^2.0.0",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.1.0",
-						"glob": "^8.0.1",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^7.7.1",
-						"minipass": "^3.1.6",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.4",
-						"mkdirp": "^1.0.4",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^9.0.0",
-						"tar": "^6.1.11",
-						"unique-filename": "^2.0.0"
-					}
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"negotiator": {
-					"version": "0.6.3",
-					"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-					"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-					"dev": true
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"unique-filename": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",
-					"integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==",
-					"dev": true,
-					"requires": {
-						"unique-slug": "^3.0.0"
-					}
-				},
-				"unique-slug": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
-					"integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4"
-					}
-				}
+			"dependencies": {
+				"hash-base": "^3.0.0",
+				"inherits": "^2.0.1"
 			}
 		},
-		"makeerror": {
-			"version": "1.0.11",
-			"resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
-			"integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
-			"requires": {
-				"tmpl": "1.0.x"
+		"node_modules/robots-parser": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/robots-parser/-/robots-parser-3.0.1.tgz",
+			"integrity": "sha512-s+pyvQeIKIZ0dx5iJiQk1tPLJAWln39+MI5jtM8wnyws+G5azk+dMnMX0qfbqNetKKNgcWWOdi0sfm+FbQbgdQ==",
+			"engines": {
+				"node": ">=10.0.0"
 			}
 		},
-		"map-age-cleaner": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-			"integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-			"dev": true,
-			"requires": {
-				"p-defer": "^1.0.0"
-			}
+		"node_modules/route-recognizer": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+			"integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+			"license": "MIT"
 		},
-		"map-cache": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-			"integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+		"node_modules/rrweb-cssom": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+			"integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg=="
 		},
-		"map-obj": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-			"integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+		"node_modules/rtlcss": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz",
+			"integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==",
 			"dev": true,
-			"optional": true
-		},
-		"map-or-similar": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
-			"integrity": "sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=",
-			"dev": true
-		},
-		"map-values": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/map-values/-/map-values-1.0.1.tgz",
-			"integrity": "sha1-douOecAJvytk/ugG4ip7HEGQyZA=",
-			"dev": true
+			"dependencies": {
+				"escalade": "^3.1.1",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.6",
+				"strip-json-comments": "^3.1.1"
+			},
+			"bin": {
+				"rtlcss": "bin/rtlcss.js"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
 		},
-		"map-visit": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-			"integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-			"requires": {
-				"object-visit": "^1.0.0"
+		"node_modules/rtlcss-webpack-plugin": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz",
+			"integrity": "sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==",
+			"dependencies": {
+				"babel-runtime": "~6.25.0",
+				"rtlcss": "^3.5.0"
 			}
 		},
-		"markdown-escapes": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.2.tgz",
-			"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==",
-			"dev": true
+		"node_modules/rtlcss-webpack-plugin/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"markdown-it": {
-			"version": "12.3.2",
-			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
-			"integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
-			"dev": true,
-			"requires": {
-				"argparse": "^2.0.1",
-				"entities": "~2.1.0",
-				"linkify-it": "^3.0.1",
-				"mdurl": "^1.0.1",
-				"uc.micro": "^1.0.5"
+		"node_modules/rtlcss-webpack-plugin/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/rtlcss-webpack-plugin/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
 			"dependencies": {
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"entities": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
-					"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
-					"dev": true
-				}
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"markdown-table": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz",
-			"integrity": "sha512-NcWuJFHDA8V3wkDgR/j4+gZx+YQwstPgfQDV8ndUeWWzta3dnDTBxpVzqS9lkmJAuV5YX35lmyojl6HO5JXAgw==",
-			"dev": true
+		"node_modules/rtlcss-webpack-plugin/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"markdown-to-jsx": {
-			"version": "7.1.3",
-			"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.3.tgz",
-			"integrity": "sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w==",
-			"dev": true
+		"node_modules/rtlcss-webpack-plugin/node_modules/rtlcss": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.5.0.tgz",
+			"integrity": "sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==",
+			"dependencies": {
+				"find-up": "^5.0.0",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.3.11",
+				"strip-json-comments": "^3.1.1"
+			},
+			"bin": {
+				"rtlcss": "bin/rtlcss.js"
+			}
 		},
-		"markdownlint": {
-			"version": "0.25.1",
-			"resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.25.1.tgz",
-			"integrity": "sha512-AG7UkLzNa1fxiOv5B+owPsPhtM4D6DoODhsJgiaNg1xowXovrYgOnLqAgOOFQpWOlHFVQUzjMY5ypNNTeov92g==",
-			"dev": true,
-			"requires": {
-				"markdown-it": "12.3.2"
+		"node_modules/rtlcss-webpack-plugin/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"markdownlint-cli": {
-			"version": "0.31.1",
-			"resolved": "https://registry.npmjs.org/markdownlint-cli/-/markdownlint-cli-0.31.1.tgz",
-			"integrity": "sha512-keIOMwQn+Ch7MoBwA+TdkyVMuxAeZFEGmIIlvwgV0Z1TGS5MxPnRr29XCLhkNzCHU+uNKGjU+VEjLX+Z9kli6g==",
+		"node_modules/rtlcss/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
 			"dev": true,
-			"requires": {
-				"commander": "~9.0.0",
-				"get-stdin": "~9.0.0",
-				"glob": "~7.2.0",
-				"ignore": "~5.2.0",
-				"js-yaml": "^4.1.0",
-				"jsonc-parser": "~3.0.0",
-				"markdownlint": "~0.25.1",
-				"markdownlint-rule-helpers": "~0.16.0",
-				"minimatch": "~3.0.5",
-				"run-con": "~1.2.10"
+			"engines": {
+				"node": ">=8"
 			},
-			"dependencies": {
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"commander": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-9.0.0.tgz",
-					"integrity": "sha512-JJfP2saEKbQqvW+FI93OYUB4ByV5cizMpFMiiJI8xDbBvQvSkIk0VvQdn1CZ8mqAO8Loq2h0gYTYtDFUZUeERw==",
-					"dev": true
-				},
-				"get-stdin": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
-					"integrity": "sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==",
-					"dev": true
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"js-yaml": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-					"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"minimatch": {
-					"version": "3.0.8",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
-					"integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"markdownlint-rule-helpers": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/markdownlint-rule-helpers/-/markdownlint-rule-helpers-0.16.0.tgz",
-			"integrity": "sha512-oEacRUVeTJ5D5hW1UYd2qExYI0oELdYK72k1TKGvIeYJIbqQWAz476NAc7LNixSySUhcNl++d02DvX0ccDk9/w==",
-			"dev": true
+		"node_modules/run-applescript": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
+			"integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
+			"dependencies": {
+				"execa": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"mathml-tag-names": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
-			"integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
-			"dev": true
+		"node_modules/run-applescript/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"md5.js": {
-			"version": "1.3.5",
-			"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-			"integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
-			"dev": true,
-			"requires": {
-				"hash-base": "^3.0.0",
-				"inherits": "^2.0.1",
-				"safe-buffer": "^5.1.2"
+		"node_modules/run-applescript/node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
 			}
 		},
-		"mdast-squeeze-paragraphs": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz",
-			"integrity": "sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ==",
-			"dev": true,
-			"requires": {
-				"unist-util-remove": "^2.0.0"
+		"node_modules/run-applescript/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"mdast-util-compact": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-1.0.1.tgz",
-			"integrity": "sha1-zbX4TitqLTEU3zO9BdnLMuPECDo=",
-			"dev": true,
-			"requires": {
-				"unist-util-modify-children": "^1.0.0",
-				"unist-util-visit": "^1.1.0"
+		"node_modules/run-applescript/node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
 			}
 		},
-		"mdast-util-definitions": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
-			"integrity": "sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==",
-			"dev": true,
-			"requires": {
-				"unist-util-visit": "^2.0.0"
+		"node_modules/run-applescript/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
 			},
-			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"mdast-util-inject": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/mdast-util-inject/-/mdast-util-inject-1.1.0.tgz",
-			"integrity": "sha1-2wa4tYW+lZotzS+H9HK6m3VvNnU=",
-			"dev": true,
-			"requires": {
-				"mdast-util-to-string": "^1.0.0"
+		"node_modules/run-applescript/node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"mdast-util-to-hast": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz",
-			"integrity": "sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA==",
-			"dev": true,
-			"requires": {
-				"@types/mdast": "^3.0.0",
-				"@types/unist": "^2.0.0",
-				"mdast-util-definitions": "^4.0.0",
-				"mdurl": "^1.0.0",
-				"unist-builder": "^2.0.0",
-				"unist-util-generated": "^1.0.0",
-				"unist-util-position": "^3.0.0",
-				"unist-util-visit": "^2.0.0"
-			},
+		"node_modules/run-applescript/node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
 			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
-				}
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"mdast-util-to-string": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.0.5.tgz",
-			"integrity": "sha512-2qLt/DEOo5F6nc2VFScQiHPzQ0XXcabquRJxKMhKte8nt42o08HUxNDPk7tt0YPxnWjAT11I1SYi0X0iPnfI5A==",
-			"dev": true
-		},
-		"mdn-data": {
-			"version": "2.0.14",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-		},
-		"mdurl": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-			"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
-			"dev": true
+		"node_modules/run-applescript/node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"media-typer": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-			"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-			"dev": true
+		"node_modules/run-applescript/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"mem": {
-			"version": "8.1.1",
-			"resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
-			"integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
-			"dev": true,
-			"requires": {
-				"map-age-cleaner": "^0.1.3",
-				"mimic-fn": "^3.1.0"
-			},
+		"node_modules/run-applescript/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
 			"dependencies": {
-				"mimic-fn": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-					"integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
-					"dev": true
-				}
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"memfs": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz",
-			"integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==",
-			"dev": true,
-			"requires": {
-				"fs-monkey": "1.0.3"
+		"node_modules/run-applescript/node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"memize": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/memize/-/memize-1.1.0.tgz",
-			"integrity": "sha512-K4FcPETOMTwe7KL2LK0orMhpOmWD2wRGwWWpbZy0fyArwsyIKR8YJVz8+efBAh3BO4zPqlSICu4vsLTRRqtFAg=="
+		"node_modules/run-applescript/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"memoize-one": {
-			"version": "5.2.1",
-			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-			"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-			"dev": true
+		"node_modules/run-async": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+			"integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+			"engines": {
+				"node": ">=0.12.0"
+			}
 		},
-		"memoizerific": {
-			"version": "1.11.3",
-			"resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
-			"integrity": "sha1-fIekZGREwy11Q4VwkF8tvRsagFo=",
-			"dev": true,
-			"requires": {
-				"map-or-similar": "^1.5.0"
+		"node_modules/run-con": {
+			"version": "1.2.10",
+			"resolved": "https://registry.npmjs.org/run-con/-/run-con-1.2.10.tgz",
+			"integrity": "sha512-n7PZpYmMM26ZO21dd8y3Yw1TRtGABjRtgPSgFS/nhzfvbJMXFtJhJVyEgayMiP+w/23craJjsnfDvx4W4ue/HQ==",
+			"dependencies": {
+				"deep-extend": "^0.6.0",
+				"ini": "~2.0.0",
+				"minimist": "^1.2.5",
+				"strip-json-comments": "~3.1.1"
+			},
+			"bin": {
+				"run-con": "cli.js"
 			}
 		},
-		"memory-fs": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-			"integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
-			"dev": true,
-			"requires": {
-				"errno": "^0.1.3",
-				"readable-stream": "^2.0.1"
+		"node_modules/run-con/node_modules/ini": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+			"integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"memorystream": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
-			"integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=",
-			"dev": true
+		"node_modules/run-con/node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"meow": {
-			"version": "8.1.2",
-			"resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
-			"integrity": "sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==",
+		"node_modules/run-node": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz",
+			"integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
 			"dev": true,
-			"requires": {
-				"@types/minimist": "^1.2.0",
-				"camelcase-keys": "^6.2.2",
-				"decamelize-keys": "^1.1.0",
-				"hard-rejection": "^2.1.0",
-				"minimist-options": "4.1.0",
-				"normalize-package-data": "^3.0.0",
-				"read-pkg-up": "^7.0.1",
-				"redent": "^3.0.0",
-				"trim-newlines": "^3.0.0",
-				"type-fest": "^0.18.0",
-				"yargs-parser": "^20.2.3"
+			"bin": {
+				"run-node": "run-node"
 			},
-			"dependencies": {
-				"camelcase-keys": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-					"integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.3.1",
-						"map-obj": "^4.0.0",
-						"quick-lru": "^4.0.1"
-					}
-				},
-				"hosted-git-info": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-					"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"indent-string": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-					"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-					"dev": true
-				},
-				"is-core-module": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-					"integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"map-obj": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-					"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-					"dev": true
-				},
-				"normalize-package-data": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-					"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^4.0.1",
-						"is-core-module": "^2.5.0",
-						"semver": "^7.3.4",
-						"validate-npm-package-license": "^3.0.1"
-					}
-				},
-				"redent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-					"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-					"dev": true,
-					"requires": {
-						"indent-string": "^4.0.0",
-						"strip-indent": "^3.0.0"
-					}
-				},
-				"strip-indent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-					"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-					"dev": true,
-					"requires": {
-						"min-indent": "^1.0.0"
-					}
-				},
-				"trim-newlines": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-					"integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.18.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-					"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"merge-deep": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.3.tgz",
-			"integrity": "sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==",
+		"node_modules/run-parallel": {
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+			"integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q=="
+		},
+		"node_modules/run-queue": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+			"integrity": "sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==",
 			"dev": true,
-			"requires": {
-				"arr-union": "^3.1.0",
-				"clone-deep": "^0.2.4",
-				"kind-of": "^3.0.2"
-			},
 			"dependencies": {
-				"clone-deep": {
-					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
-					"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
-					"dev": true,
-					"requires": {
-						"for-own": "^0.1.3",
-						"is-plain-object": "^2.0.1",
-						"kind-of": "^3.0.2",
-						"lazy-cache": "^1.0.3",
-						"shallow-clone": "^0.1.2"
-					},
-					"dependencies": {
-						"is-plain-object": {
-							"version": "2.0.4",
-							"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-							"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-							"dev": true,
-							"requires": {
-								"isobject": "^3.0.1"
-							}
-						}
-					}
-				},
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"dev": true,
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				},
-				"shallow-clone": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
-					"integrity": "sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=",
-					"dev": true,
-					"requires": {
-						"is-extendable": "^0.1.1",
-						"kind-of": "^2.0.1",
-						"lazy-cache": "^0.2.3",
-						"mixin-object": "^2.0.1"
-					},
-					"dependencies": {
-						"kind-of": {
-							"version": "2.0.1",
-							"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
-							"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
-							"dev": true,
-							"requires": {
-								"is-buffer": "^1.0.2"
-							}
-						},
-						"lazy-cache": {
-							"version": "0.2.7",
-							"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
-							"integrity": "sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=",
-							"dev": true
-						}
-					}
-				}
+				"aproba": "^1.1.1"
 			}
 		},
-		"merge-descriptors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-			"integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+		"node_modules/rungen": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/rungen/-/rungen-0.3.2.tgz",
+			"integrity": "sha512-zWl10xu2D7zoR8zSC2U6bg5bYF6T/Wk7rxwp8IPaJH7f0Ge21G03kNHVgHR7tyVkSSfAOG0Rqf/Cl38JftSmtw=="
+		},
+		"node_modules/rx": {
+			"version": "2.3.24",
+			"resolved": "https://registry.npmjs.org/rx/-/rx-2.3.24.tgz",
+			"integrity": "sha512-Ue4ZB7Dzbn2I9sIj8ws536nOP2S53uypyCkCz9q0vlYD5Kn6/pu4dE+wt2ZfFzd9m73hiYKnnCb1OyKqc+MRkg==",
 			"dev": true
 		},
-		"merge-stream": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+		"node_modules/rxjs": {
+			"version": "6.6.7",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+			"integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+			"dependencies": {
+				"tslib": "^1.9.0"
+			},
+			"engines": {
+				"npm": ">=2.0.0"
+			}
 		},
-		"merge2": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz",
-			"integrity": "sha512-gdUU1Fwj5ep4kplwcmftruWofEFt6lfpkkr3h860CXbAB9c3hGb55EOL2ali0Td5oebvW0E1+3Sr+Ur7XfKpRA==",
-			"dev": true
+		"node_modules/rxjs/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
 		},
-		"methods": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-			"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+		"node_modules/sade": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
+			"dependencies": {
+				"mri": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/safaridriver": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/safaridriver/-/safaridriver-0.1.0.tgz",
+			"integrity": "sha512-azzzIP3gR1TB9bVPv7QO4Zjw0rR1BWEU/s2aFdUMN48gxDjxEB13grAEuXDmkKPgE74cObymDxmAmZnL3clj4w==",
 			"dev": true
 		},
-		"metro": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro/-/metro-0.66.2.tgz",
-			"integrity": "sha512-uNsISfcQ3iKKSHoN5Q+LAh0l3jeeg7ZcNZ/4BAHGsk02erA0OP+l2m+b5qYVoPptHz9Oc3KyG5oGJoTu41pWjg==",
-			"requires": {
-				"@babel/code-frame": "^7.0.0",
-				"@babel/core": "^7.14.0",
-				"@babel/generator": "^7.14.0",
-				"@babel/parser": "^7.14.0",
-				"@babel/template": "^7.0.0",
-				"@babel/traverse": "^7.14.0",
-				"@babel/types": "^7.0.0",
-				"absolute-path": "^0.0.0",
-				"accepts": "^1.3.7",
-				"async": "^2.4.0",
-				"chalk": "^4.0.0",
-				"ci-info": "^2.0.0",
-				"connect": "^3.6.5",
-				"debug": "^2.2.0",
-				"denodeify": "^1.2.1",
-				"error-stack-parser": "^2.0.6",
-				"fs-extra": "^1.0.0",
-				"graceful-fs": "^4.1.3",
-				"hermes-parser": "0.4.7",
-				"image-size": "^0.6.0",
-				"invariant": "^2.2.4",
-				"jest-haste-map": "^26.5.2",
-				"jest-worker": "^26.0.0",
-				"lodash.throttle": "^4.1.1",
-				"metro-babel-register": "0.66.2",
-				"metro-babel-transformer": "0.66.2",
-				"metro-cache": "0.66.2",
-				"metro-cache-key": "0.66.2",
-				"metro-config": "0.66.2",
-				"metro-core": "0.66.2",
-				"metro-hermes-compiler": "0.66.2",
-				"metro-inspector-proxy": "0.66.2",
-				"metro-minify-uglify": "0.66.2",
-				"metro-react-native-babel-preset": "0.66.2",
-				"metro-resolver": "0.66.2",
-				"metro-runtime": "0.66.2",
-				"metro-source-map": "0.66.2",
-				"metro-symbolicate": "0.66.2",
-				"metro-transform-plugins": "0.66.2",
-				"metro-transform-worker": "0.66.2",
-				"mime-types": "^2.1.27",
-				"mkdirp": "^0.5.1",
-				"node-fetch": "^2.2.0",
-				"nullthrows": "^1.1.1",
-				"rimraf": "^2.5.4",
-				"serialize-error": "^2.1.0",
-				"source-map": "^0.5.6",
-				"strip-ansi": "^6.0.0",
-				"temp": "0.8.3",
-				"throat": "^5.0.0",
-				"ws": "^1.1.5",
-				"yargs": "^15.3.1"
-			},
+		"node_modules/safe-array-concat": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
+			"integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"async": {
-					"version": "2.6.4",
-					"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-					"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-					"requires": {
-						"lodash": "^4.17.14"
-					}
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-				},
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"fs-extra": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
-					"integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"jsonfile": "^2.1.0",
-						"klaw": "^1.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-				},
-				"jsonfile": {
-					"version": "2.4.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
-					"integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
-					"requires": {
-						"graceful-fs": "^4.1.6"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"metro-babel-transformer": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.66.2.tgz",
-					"integrity": "sha512-aJ/7fc/Xkofw8Fqa51OTDhBzBz26mmpIWrXAZcPdQ8MSTt883EWncxeCEjasc79NJ89BRi7sOkkaWZo2sXlKvw==",
-					"requires": {
-						"@babel/core": "^7.14.0",
-						"hermes-parser": "0.4.7",
-						"metro-source-map": "0.66.2",
-						"nullthrows": "^1.1.1"
-					}
-				},
-				"metro-react-native-babel-preset": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.66.2.tgz",
-					"integrity": "sha512-H/nLBAz0MgfDloSe1FjyH4EnbokHFdncyERvLPXDACY3ROVRCeUyFNo70ywRGXW2NMbrV4H7KUyU4zkfWhC2HQ==",
-					"requires": {
-						"@babel/core": "^7.14.0",
-						"@babel/plugin-proposal-class-properties": "^7.0.0",
-						"@babel/plugin-proposal-export-default-from": "^7.0.0",
-						"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-						"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-						"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
-						"@babel/plugin-proposal-optional-chaining": "^7.0.0",
-						"@babel/plugin-syntax-dynamic-import": "^7.0.0",
-						"@babel/plugin-syntax-export-default-from": "^7.0.0",
-						"@babel/plugin-syntax-flow": "^7.2.0",
-						"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
-						"@babel/plugin-syntax-optional-chaining": "^7.0.0",
-						"@babel/plugin-transform-arrow-functions": "^7.0.0",
-						"@babel/plugin-transform-async-to-generator": "^7.0.0",
-						"@babel/plugin-transform-block-scoping": "^7.0.0",
-						"@babel/plugin-transform-classes": "^7.0.0",
-						"@babel/plugin-transform-computed-properties": "^7.0.0",
-						"@babel/plugin-transform-destructuring": "^7.0.0",
-						"@babel/plugin-transform-exponentiation-operator": "^7.0.0",
-						"@babel/plugin-transform-flow-strip-types": "^7.0.0",
-						"@babel/plugin-transform-for-of": "^7.0.0",
-						"@babel/plugin-transform-function-name": "^7.0.0",
-						"@babel/plugin-transform-literals": "^7.0.0",
-						"@babel/plugin-transform-modules-commonjs": "^7.0.0",
-						"@babel/plugin-transform-object-assign": "^7.0.0",
-						"@babel/plugin-transform-parameters": "^7.0.0",
-						"@babel/plugin-transform-react-display-name": "^7.0.0",
-						"@babel/plugin-transform-react-jsx": "^7.0.0",
-						"@babel/plugin-transform-react-jsx-self": "^7.0.0",
-						"@babel/plugin-transform-react-jsx-source": "^7.0.0",
-						"@babel/plugin-transform-regenerator": "^7.0.0",
-						"@babel/plugin-transform-runtime": "^7.0.0",
-						"@babel/plugin-transform-shorthand-properties": "^7.0.0",
-						"@babel/plugin-transform-spread": "^7.0.0",
-						"@babel/plugin-transform-sticky-regex": "^7.0.0",
-						"@babel/plugin-transform-template-literals": "^7.0.0",
-						"@babel/plugin-transform-typescript": "^7.5.0",
-						"@babel/plugin-transform-unicode-regex": "^7.0.0",
-						"@babel/template": "^7.0.0",
-						"react-refresh": "^0.4.0"
-					}
-				},
-				"metro-source-map": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.66.2.tgz",
-					"integrity": "sha512-038tFmB7vSh73VQcDWIbr5O1m+WXWyYafDaOy+1A/2K308YP0oj33gbEgDnZsLZDwcJ+xt1x6KUEBIzlX4YGeQ==",
-					"requires": {
-						"@babel/traverse": "^7.14.0",
-						"@babel/types": "^7.0.0",
-						"invariant": "^2.2.4",
-						"metro-symbolicate": "0.66.2",
-						"nullthrows": "^1.1.1",
-						"ob1": "0.66.2",
-						"source-map": "^0.5.6",
-						"vlq": "^1.0.0"
-					}
-				},
-				"metro-symbolicate": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.66.2.tgz",
-					"integrity": "sha512-u+DeQHyAFXVD7mVP+GST/894WHJ3i/U8oEJFnT7U3P52ZuLgX8n4tMNxhqZU12RcLR6etF8143aP0Ktx1gFLEQ==",
-					"requires": {
-						"invariant": "^2.2.4",
-						"metro-source-map": "0.66.2",
-						"nullthrows": "^1.1.1",
-						"source-map": "^0.5.6",
-						"through2": "^2.0.1",
-						"vlq": "^1.0.0"
-					}
-				},
-				"mime-db": {
-					"version": "1.51.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-					"integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g=="
-				},
-				"mime-types": {
-					"version": "2.1.34",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-					"integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
-					"requires": {
-						"mime-db": "1.51.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-				},
-				"react-refresh": {
-					"version": "0.4.3",
-					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
-					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
-				},
-				"rimraf": {
-					"version": "2.7.1",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-					"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-					"requires": {
-						"glob": "^7.1.3"
-					}
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"strip-bom": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
-				},
-				"ws": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
-					"integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
-					"requires": {
-						"options": ">=0.0.5",
-						"ultron": "1.0.x"
-					}
-				},
-				"yargs": {
-					"version": "15.4.1",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-					"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-					"requires": {
-						"cliui": "^6.0.0",
-						"decamelize": "^1.2.0",
-						"find-up": "^4.1.0",
-						"get-caller-file": "^2.0.1",
-						"require-directory": "^2.1.1",
-						"require-main-filename": "^2.0.0",
-						"set-blocking": "^2.0.0",
-						"string-width": "^4.2.0",
-						"which-module": "^2.0.0",
-						"y18n": "^4.0.0",
-						"yargs-parser": "^18.1.2"
-					}
-				},
-				"yargs-parser": {
-					"version": "18.1.3",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-					"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
-				}
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.2.0",
+				"has-symbols": "^1.0.3",
+				"isarray": "^2.0.5"
+			},
+			"engines": {
+				"node": ">=0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"metro-babel-register": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-babel-register/-/metro-babel-register-0.66.2.tgz",
-			"integrity": "sha512-3F+vsVubUPJYKfVMeol8/7pd8CC287Rw92QYzJD8LEmI980xcgwMUEVBZ0UIAUwlLgiJG/f4Mwhuji2EeBXrPg==",
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-				"@babel/plugin-proposal-optional-chaining": "^7.0.0",
-				"@babel/plugin-syntax-class-properties": "^7.0.0",
-				"@babel/plugin-transform-flow-strip-types": "^7.0.0",
-				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
-				"@babel/register": "^7.0.0",
-				"escape-string-regexp": "^1.0.5"
+		"node_modules/safe-array-concat/node_modules/isarray": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+		},
+		"node_modules/safe-regex": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+			"integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
+			"dev": true,
+			"dependencies": {
+				"ret": "~0.1.10"
 			}
 		},
-		"metro-babel-transformer": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.66.2.tgz",
-			"integrity": "sha512-aJ/7fc/Xkofw8Fqa51OTDhBzBz26mmpIWrXAZcPdQ8MSTt883EWncxeCEjasc79NJ89BRi7sOkkaWZo2sXlKvw==",
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"hermes-parser": "0.4.7",
-				"metro-source-map": "0.66.2",
-				"nullthrows": "^1.1.1"
+		"node_modules/safe-regex-test": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+			"integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.1.3",
+				"is-regex": "^1.1.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"metro-cache": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-cache/-/metro-cache-0.66.2.tgz",
-			"integrity": "sha512-5QCYJtJOHoBSbL3H4/Fpl36oA697C3oYHqsce+Hk/dh2qtODUGpS3gOBhvP1B8iB+H8jJMyR75lZq129LJEsIQ==",
-			"requires": {
-				"metro-core": "0.66.2",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.4"
-			},
-			"dependencies": {
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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==",
-					"requires": {
-						"glob": "^7.1.3"
-					}
-				}
+		"node_modules/safe-stable-stringify": {
+			"version": "2.4.3",
+			"resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.4.3.tgz",
+			"integrity": "sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"metro-cache-key": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-cache-key/-/metro-cache-key-0.66.2.tgz",
-			"integrity": "sha512-WtkNmRt41qOpHh1MkNA4nLiQ/m7iGL90ysSKD+fcLqlUnOBKJptPQm0ZUv8Kfqk18ddWX2KmsSbq+Sf3I6XohQ=="
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
 		},
-		"metro-config": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-config/-/metro-config-0.66.2.tgz",
-			"integrity": "sha512-0C+PrKKIBNNzLZUKN/8ZDJS2U5FLMOTXDWbvBHIdqb6YXz8WplXR2+xlSlaSCCi5b+GR7cWFWUNeKA4GQS1/AQ==",
-			"requires": {
-				"cosmiconfig": "^5.0.5",
-				"jest-validate": "^26.5.2",
-				"metro": "0.66.2",
-				"metro-cache": "0.66.2",
-				"metro-core": "0.66.2",
-				"metro-runtime": "0.66.2"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-					"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^15.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/istanbul-reports": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-					"integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-					"requires": {
-						"@types/istanbul-lib-report": "*"
-					}
-				},
-				"camelcase": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.1.tgz",
-					"integrity": "sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA=="
-				},
-				"cosmiconfig": {
-					"version": "5.2.1",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-					"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-					"requires": {
-						"import-fresh": "^2.0.0",
-						"is-directory": "^0.3.1",
-						"js-yaml": "^3.13.1",
-						"parse-json": "^4.0.0"
-					}
-				},
-				"import-fresh": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-					"integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-					"requires": {
-						"caller-path": "^2.0.0",
-						"resolve-from": "^3.0.0"
-					}
-				},
-				"jest-get-type": {
-					"version": "26.3.0",
-					"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-					"integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig=="
-				},
-				"jest-validate": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
-					"integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
-					"requires": {
-						"@jest/types": "^26.6.2",
-						"camelcase": "^6.0.0",
-						"chalk": "^4.0.0",
-						"jest-get-type": "^26.3.0",
-						"leven": "^3.1.0",
-						"pretty-format": "^26.6.2"
-					}
-				},
-				"parse-json": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-					"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-					"requires": {
-						"error-ex": "^1.3.1",
-						"json-parse-better-errors": "^1.0.1"
-					}
-				}
+		"node_modules/sanitize-filename": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
+			"integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
+			"dev": true,
+			"dependencies": {
+				"truncate-utf8-bytes": "^1.0.0"
 			}
 		},
-		"metro-core": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-core/-/metro-core-0.66.2.tgz",
-			"integrity": "sha512-JieLZkef/516yxXYvQxWnf3OWw5rcgWRy76K8JV/wr/i8LGVGulPAXlIi445/QZzXVydzRVASKAEVqyxM5F4mA==",
-			"requires": {
-				"jest-haste-map": "^26.5.2",
-				"lodash.throttle": "^4.1.1",
-				"metro-resolver": "0.66.2"
+		"node_modules/sass": {
+			"version": "1.50.1",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.50.1.tgz",
+			"integrity": "sha512-noTnY41KnlW2A9P8sdwESpDmo+KBNkukI1i8+hOK3footBUcohNHtdOJbckp46XO95nuvcHDDZ+4tmOnpK3hjw==",
+			"license": "MIT",
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=12.0.0"
 			}
 		},
-		"metro-hermes-compiler": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-hermes-compiler/-/metro-hermes-compiler-0.66.2.tgz",
-			"integrity": "sha512-nCVL1g9uR6vrw5+X1wjwZruRyMkndnzGRMqjqoljf+nGEqBTD607CR7elXw4fMWn/EM+1y0Vdq5altUu9LdgCA=="
-		},
-		"metro-inspector-proxy": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-inspector-proxy/-/metro-inspector-proxy-0.66.2.tgz",
-			"integrity": "sha512-gnLc9121eznwP0iiA9tCBW8qZjwIsCgwHWMF1g1Qaki9le9tzeJv3dK4/lFNGxyfSaLO7vahQEhsEYsiRnTROg==",
-			"requires": {
-				"connect": "^3.6.5",
-				"debug": "^2.2.0",
-				"ws": "^1.1.5",
-				"yargs": "^15.3.1"
-			},
+		"node_modules/sass-loader": {
+			"version": "16.0.3",
+			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.3.tgz",
+			"integrity": "sha512-gosNorT1RCkuCMyihv6FBRR7BMV06oKRAs+l4UMp1mlcVg9rWN6KMmUj3igjQwmYys4mDP3etEYJgiHRbgHCHA==",
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-				},
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
+				"neo-async": "^2.6.2"
+			},
+			"engines": {
+				"node": ">= 18.12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || 1.x",
+				"node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+				"sass": "^1.3.0",
+				"sass-embedded": "*",
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
 				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
+				"node-sass": {
+					"optional": true
 				},
-				"ws": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
-					"integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
-					"requires": {
-						"options": ">=0.0.5",
-						"ultron": "1.0.x"
-					}
+				"sass": {
+					"optional": true
 				},
-				"yargs": {
-					"version": "15.4.1",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-					"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-					"requires": {
-						"cliui": "^6.0.0",
-						"decamelize": "^1.2.0",
-						"find-up": "^4.1.0",
-						"get-caller-file": "^2.0.1",
-						"require-directory": "^2.1.1",
-						"require-main-filename": "^2.0.0",
-						"set-blocking": "^2.0.0",
-						"string-width": "^4.2.0",
-						"which-module": "^2.0.0",
-						"y18n": "^4.0.0",
-						"yargs-parser": "^18.1.2"
-					}
+				"sass-embedded": {
+					"optional": true
 				},
-				"yargs-parser": {
-					"version": "18.1.3",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-					"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
+				"webpack": {
+					"optional": true
 				}
 			}
 		},
-		"metro-minify-uglify": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-minify-uglify/-/metro-minify-uglify-0.66.2.tgz",
-			"integrity": "sha512-7TUK+L5CmB5x1PVnFbgmjzHW4CUadq9H5jgp0HfFoWT1skXAyEsx0DHkKDXwnot0khnNhBOEfl62ctQOnE110Q==",
-			"requires": {
-				"uglify-es": "^3.1.9"
+		"node_modules/saxes": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+			"integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+			"dependencies": {
+				"xmlchars": "^2.2.0"
 			},
+			"engines": {
+				"node": ">=v12.22.7"
+			}
+		},
+		"node_modules/scheduler": {
+			"version": "0.23.2",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+			"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
 			"dependencies": {
-				"commander": {
-					"version": "2.13.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
-					"integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA=="
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				},
-				"uglify-es": {
-					"version": "3.3.9",
-					"resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
-					"integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
-					"requires": {
-						"commander": "~2.13.0",
-						"source-map": "~0.6.1"
-					}
-				}
+				"loose-envify": "^1.1.0"
 			}
 		},
-		"metro-react-native-babel-preset": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.66.2.tgz",
-			"integrity": "sha512-H/nLBAz0MgfDloSe1FjyH4EnbokHFdncyERvLPXDACY3ROVRCeUyFNo70ywRGXW2NMbrV4H7KUyU4zkfWhC2HQ==",
+		"node_modules/schema-utils": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+			"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
 			"dev": true,
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"@babel/plugin-proposal-class-properties": "^7.0.0",
-				"@babel/plugin-proposal-export-default-from": "^7.0.0",
-				"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-				"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-				"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
-				"@babel/plugin-proposal-optional-chaining": "^7.0.0",
-				"@babel/plugin-syntax-dynamic-import": "^7.0.0",
-				"@babel/plugin-syntax-export-default-from": "^7.0.0",
-				"@babel/plugin-syntax-flow": "^7.2.0",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
-				"@babel/plugin-syntax-optional-chaining": "^7.0.0",
-				"@babel/plugin-transform-arrow-functions": "^7.0.0",
-				"@babel/plugin-transform-async-to-generator": "^7.0.0",
-				"@babel/plugin-transform-block-scoping": "^7.0.0",
-				"@babel/plugin-transform-classes": "^7.0.0",
-				"@babel/plugin-transform-computed-properties": "^7.0.0",
-				"@babel/plugin-transform-destructuring": "^7.0.0",
-				"@babel/plugin-transform-exponentiation-operator": "^7.0.0",
-				"@babel/plugin-transform-flow-strip-types": "^7.0.0",
-				"@babel/plugin-transform-for-of": "^7.0.0",
-				"@babel/plugin-transform-function-name": "^7.0.0",
-				"@babel/plugin-transform-literals": "^7.0.0",
-				"@babel/plugin-transform-modules-commonjs": "^7.0.0",
-				"@babel/plugin-transform-object-assign": "^7.0.0",
-				"@babel/plugin-transform-parameters": "^7.0.0",
-				"@babel/plugin-transform-react-display-name": "^7.0.0",
-				"@babel/plugin-transform-react-jsx": "^7.0.0",
-				"@babel/plugin-transform-react-jsx-self": "^7.0.0",
-				"@babel/plugin-transform-react-jsx-source": "^7.0.0",
-				"@babel/plugin-transform-regenerator": "^7.0.0",
-				"@babel/plugin-transform-runtime": "^7.0.0",
-				"@babel/plugin-transform-shorthand-properties": "^7.0.0",
-				"@babel/plugin-transform-spread": "^7.0.0",
-				"@babel/plugin-transform-sticky-regex": "^7.0.0",
-				"@babel/plugin-transform-template-literals": "^7.0.0",
-				"@babel/plugin-transform-typescript": "^7.5.0",
-				"@babel/plugin-transform-unicode-regex": "^7.0.0",
-				"@babel/template": "^7.0.0",
-				"react-refresh": "^0.4.0"
-			},
 			"dependencies": {
-				"react-refresh": {
-					"version": "0.4.3",
-					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
-					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==",
-					"dev": true
-				}
+				"ajv": "^6.1.0",
+				"ajv-errors": "^1.0.0",
+				"ajv-keywords": "^3.1.0"
+			},
+			"engines": {
+				"node": ">= 4"
 			}
 		},
-		"metro-react-native-babel-transformer": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.66.2.tgz",
-			"integrity": "sha512-z1ab7ihIT0pJrwgi9q2IH+LcW/xUWMQ0hH+Mrk7wbKQB0RnJdXFoxphrfoVHBHMUu+TBPetUcEkKawkK1e7Cng==",
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"babel-preset-fbjs": "^3.4.0",
-				"hermes-parser": "0.4.7",
-				"metro-babel-transformer": "0.66.2",
-				"metro-react-native-babel-preset": "0.66.2",
-				"metro-source-map": "0.66.2",
-				"nullthrows": "^1.1.1"
+		"node_modules/schema-utils/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
 			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/seedrandom": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz",
+			"integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==",
+			"dev": true
+		},
+		"node_modules/select": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+			"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+		},
+		"node_modules/select-hose": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+			"integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
+		},
+		"node_modules/selfsigned": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
+			"integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+			"license": "MIT",
 			"dependencies": {
-				"metro-babel-transformer": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-babel-transformer/-/metro-babel-transformer-0.66.2.tgz",
-					"integrity": "sha512-aJ/7fc/Xkofw8Fqa51OTDhBzBz26mmpIWrXAZcPdQ8MSTt883EWncxeCEjasc79NJ89BRi7sOkkaWZo2sXlKvw==",
-					"requires": {
-						"@babel/core": "^7.14.0",
-						"hermes-parser": "0.4.7",
-						"metro-source-map": "0.66.2",
-						"nullthrows": "^1.1.1"
-					}
-				},
-				"metro-react-native-babel-preset": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.66.2.tgz",
-					"integrity": "sha512-H/nLBAz0MgfDloSe1FjyH4EnbokHFdncyERvLPXDACY3ROVRCeUyFNo70ywRGXW2NMbrV4H7KUyU4zkfWhC2HQ==",
-					"requires": {
-						"@babel/core": "^7.14.0",
-						"@babel/plugin-proposal-class-properties": "^7.0.0",
-						"@babel/plugin-proposal-export-default-from": "^7.0.0",
-						"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
-						"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-						"@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
-						"@babel/plugin-proposal-optional-chaining": "^7.0.0",
-						"@babel/plugin-syntax-dynamic-import": "^7.0.0",
-						"@babel/plugin-syntax-export-default-from": "^7.0.0",
-						"@babel/plugin-syntax-flow": "^7.2.0",
-						"@babel/plugin-syntax-nullish-coalescing-operator": "^7.0.0",
-						"@babel/plugin-syntax-optional-chaining": "^7.0.0",
-						"@babel/plugin-transform-arrow-functions": "^7.0.0",
-						"@babel/plugin-transform-async-to-generator": "^7.0.0",
-						"@babel/plugin-transform-block-scoping": "^7.0.0",
-						"@babel/plugin-transform-classes": "^7.0.0",
-						"@babel/plugin-transform-computed-properties": "^7.0.0",
-						"@babel/plugin-transform-destructuring": "^7.0.0",
-						"@babel/plugin-transform-exponentiation-operator": "^7.0.0",
-						"@babel/plugin-transform-flow-strip-types": "^7.0.0",
-						"@babel/plugin-transform-for-of": "^7.0.0",
-						"@babel/plugin-transform-function-name": "^7.0.0",
-						"@babel/plugin-transform-literals": "^7.0.0",
-						"@babel/plugin-transform-modules-commonjs": "^7.0.0",
-						"@babel/plugin-transform-object-assign": "^7.0.0",
-						"@babel/plugin-transform-parameters": "^7.0.0",
-						"@babel/plugin-transform-react-display-name": "^7.0.0",
-						"@babel/plugin-transform-react-jsx": "^7.0.0",
-						"@babel/plugin-transform-react-jsx-self": "^7.0.0",
-						"@babel/plugin-transform-react-jsx-source": "^7.0.0",
-						"@babel/plugin-transform-regenerator": "^7.0.0",
-						"@babel/plugin-transform-runtime": "^7.0.0",
-						"@babel/plugin-transform-shorthand-properties": "^7.0.0",
-						"@babel/plugin-transform-spread": "^7.0.0",
-						"@babel/plugin-transform-sticky-regex": "^7.0.0",
-						"@babel/plugin-transform-template-literals": "^7.0.0",
-						"@babel/plugin-transform-typescript": "^7.5.0",
-						"@babel/plugin-transform-unicode-regex": "^7.0.0",
-						"@babel/template": "^7.0.0",
-						"react-refresh": "^0.4.0"
-					}
-				},
-				"metro-source-map": {
-					"version": "0.66.2",
-					"resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.66.2.tgz",
-					"integrity": "sha512-038tFmB7vSh73VQcDWIbr5O1m+WXWyYafDaOy+1A/2K308YP0oj33gbEgDnZsLZDwcJ+xt1x6KUEBIzlX4YGeQ==",
-					"requires": {
-						"@babel/traverse": "^7.14.0",
-						"@babel/types": "^7.0.0",
-						"invariant": "^2.2.4",
-						"metro-symbolicate": "0.66.2",
-						"nullthrows": "^1.1.1",
-						"ob1": "0.66.2",
-						"source-map": "^0.5.6",
-						"vlq": "^1.0.0"
-					}
-				},
-				"react-refresh": {
-					"version": "0.4.3",
-					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
-					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
-				}
+				"@types/node-forge": "^1.3.0",
+				"node-forge": "^1"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"metro-resolver": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-resolver/-/metro-resolver-0.66.2.tgz",
-			"integrity": "sha512-pXQAJR/xauRf4kWFj2/hN5a77B4jLl0Fom5I3PHp6Arw/KxSBp0cnguXpGLwNQ6zQC0nxKCoYGL9gQpzMnN7Hw==",
-			"requires": {
-				"absolute-path": "^0.0.0"
+		"node_modules/semver": {
+			"version": "7.5.4",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+			"integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+			"dependencies": {
+				"lru-cache": "^6.0.0"
+			},
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"metro-runtime": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-runtime/-/metro-runtime-0.66.2.tgz",
-			"integrity": "sha512-vFhKBk2ot9FS4b+2v0OTa/guCF/QDAOJubY0CNg7PzCS5+w4y3IvZIcPX4SSS1t8pYEZBLvtdtTDarlDl81xmg=="
+		"node_modules/semver-compare": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+			"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+			"dev": true
 		},
-		"metro-source-map": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-source-map/-/metro-source-map-0.66.2.tgz",
-			"integrity": "sha512-038tFmB7vSh73VQcDWIbr5O1m+WXWyYafDaOy+1A/2K308YP0oj33gbEgDnZsLZDwcJ+xt1x6KUEBIzlX4YGeQ==",
-			"requires": {
-				"@babel/traverse": "^7.14.0",
-				"@babel/types": "^7.0.0",
-				"invariant": "^2.2.4",
-				"metro-symbolicate": "0.66.2",
-				"nullthrows": "^1.1.1",
-				"ob1": "0.66.2",
-				"source-map": "^0.5.6",
-				"vlq": "^1.0.0"
+		"node_modules/semver/node_modules/lru-cache": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"metro-symbolicate": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-symbolicate/-/metro-symbolicate-0.66.2.tgz",
-			"integrity": "sha512-u+DeQHyAFXVD7mVP+GST/894WHJ3i/U8oEJFnT7U3P52ZuLgX8n4tMNxhqZU12RcLR6etF8143aP0Ktx1gFLEQ==",
-			"requires": {
-				"invariant": "^2.2.4",
-				"metro-source-map": "0.66.2",
-				"nullthrows": "^1.1.1",
-				"source-map": "^0.5.6",
-				"through2": "^2.0.1",
-				"vlq": "^1.0.0"
-			}
+		"node_modules/semver/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
-		"metro-transform-plugins": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-transform-plugins/-/metro-transform-plugins-0.66.2.tgz",
-			"integrity": "sha512-KTvqplh0ut7oDKovvDG6yzXM02R6X+9b2oVG+qYq8Zd3aCGTi51ASx4ThCNkAHyEvCuJdYg9fxXTL+j+wvhB5w==",
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"@babel/generator": "^7.14.0",
-				"@babel/template": "^7.0.0",
-				"@babel/traverse": "^7.14.0",
-				"nullthrows": "^1.1.1"
+		"node_modules/send": {
+			"version": "0.18.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+			"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+			"dependencies": {
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"mime": "1.6.0",
+				"ms": "2.1.3",
+				"on-finished": "2.4.1",
+				"range-parser": "~1.2.1",
+				"statuses": "2.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"metro-transform-worker": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/metro-transform-worker/-/metro-transform-worker-0.66.2.tgz",
-			"integrity": "sha512-dO4PtYOMGB7Vzte8aIzX39xytODhmbJrBYPu+zYzlDjyefJZT7BkZ0LkPIThtyJi96xWcGqi9JBSo0CeRupAHw==",
-			"requires": {
-				"@babel/core": "^7.14.0",
-				"@babel/generator": "^7.14.0",
-				"@babel/parser": "^7.14.0",
-				"@babel/types": "^7.0.0",
-				"babel-preset-fbjs": "^3.4.0",
-				"metro": "0.66.2",
-				"metro-babel-transformer": "0.66.2",
-				"metro-cache": "0.66.2",
-				"metro-cache-key": "0.66.2",
-				"metro-hermes-compiler": "0.66.2",
-				"metro-source-map": "0.66.2",
-				"metro-transform-plugins": "0.66.2",
-				"nullthrows": "^1.1.1"
+		"node_modules/send/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
 			}
 		},
-		"microevent.ts": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
-			"integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
-			"dev": true
+		"node_modules/send/node_modules/debug/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
-		"micromatch": {
-			"version": "3.1.10",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-			"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-			"requires": {
-				"arr-diff": "^4.0.0",
-				"array-unique": "^0.3.2",
-				"braces": "^2.3.1",
-				"define-property": "^2.0.2",
-				"extend-shallow": "^3.0.2",
-				"extglob": "^2.0.4",
-				"fragment-cache": "^0.2.1",
-				"kind-of": "^6.0.2",
-				"nanomatch": "^1.2.9",
-				"object.pick": "^1.3.0",
-				"regex-not": "^1.0.0",
-				"snapdragon": "^0.8.1",
-				"to-regex": "^3.0.2"
+		"node_modules/send/node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"micromodal": {
-			"version": "0.4.10",
-			"resolved": "https://registry.npmjs.org/micromodal/-/micromodal-0.4.10.tgz",
-			"integrity": "sha512-BUrEnzMPFBwK8nOE4xUDYHLrlGlLULQVjpja99tpJQPSUEWgw3kTLp1n1qv0HmKU29AiHE7Y7sMLiRziDK4ghQ=="
-		},
-		"miller-rabin": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-			"integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
-			"dev": true,
-			"requires": {
-				"bn.js": "^4.0.0",
-				"brorand": "^1.0.1"
+		"node_modules/send/node_modules/mime": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"bin": {
+				"mime": "cli.js"
 			},
-			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"mime": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
-			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
-			"dev": true
+		"node_modules/send/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
 		},
-		"mime-db": {
-			"version": "1.33.0",
-			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
-			"integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
-			"dev": true
+		"node_modules/send/node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
-		"mime-types": {
-			"version": "2.1.18",
-			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
-			"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
-			"dev": true,
-			"requires": {
-				"mime-db": "~1.33.0"
+		"node_modules/send/node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"mimic-fn": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-			"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+		"node_modules/sentence-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3",
+				"upper-case-first": "^2.0.2"
+			}
 		},
-		"mimic-response": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-			"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-			"dev": true
+		"node_modules/serialize-error": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
+			"integrity": "sha512-ghgmKt5o4Tly5yEG/UJp8qTd0AN7Xalw4XBtDEKP655B699qMEtra1WlXeE6WIvdEG481JvRxULKsInq/iNysw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"min-document": {
-			"version": "2.19.0",
-			"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-			"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+		"node_modules/serialize-javascript": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+			"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
 			"dev": true,
-			"requires": {
-				"dom-walk": "^0.1.0"
+			"dependencies": {
+				"randombytes": "^2.1.0"
 			}
 		},
-		"min-indent": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
-			"integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=",
-			"dev": true
-		},
-		"mini-css-extract-plugin": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.5.1.tgz",
-			"integrity": "sha512-CRC6E2yedNjfOA3nQjpqAkpnranxhxmilhBPYtldnXcPT/QZb3aJFzvt0pp8W1jhuLR/E0zDa+QEHuC/HhhaLQ==",
+		"node_modules/serve-favicon": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
+			"integrity": "sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==",
 			"dev": true,
-			"requires": {
-				"schema-utils": "^4.0.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "8.9.0",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
-					"integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"json-schema-traverse": "^1.0.0",
-						"require-from-string": "^2.0.2",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-					"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.3"
-					}
-				},
-				"json-schema-traverse": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-					"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
-					"integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.9",
-						"ajv": "^8.8.0",
-						"ajv-formats": "^2.1.1",
-						"ajv-keywords": "^5.0.0"
-					}
-				}
+				"etag": "~1.8.1",
+				"fresh": "0.5.2",
+				"ms": "2.1.1",
+				"parseurl": "~1.3.2",
+				"safe-buffer": "5.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"minimalistic-assert": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-			"integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+		"node_modules/serve-favicon/node_modules/ms": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+			"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
 			"dev": true
 		},
-		"minimalistic-crypto-utils": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-			"integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=",
+		"node_modules/serve-favicon/node_modules/safe-buffer": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+			"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
 			"dev": true
 		},
-		"minimatch": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-			"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-			"requires": {
-				"brace-expansion": "^1.1.7"
+		"node_modules/serve-index": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+			"integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+			"dependencies": {
+				"accepts": "~1.3.4",
+				"batch": "0.6.1",
+				"debug": "2.6.9",
+				"escape-html": "~1.0.3",
+				"http-errors": "~1.6.2",
+				"mime-types": "~2.1.17",
+				"parseurl": "~1.3.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"minimist": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-			"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
-		},
-		"minimist-options": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-			"integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-			"dev": true,
-			"requires": {
-				"arrify": "^1.0.1",
-				"is-plain-obj": "^1.1.0",
-				"kind-of": "^6.0.3"
-			},
+		"node_modules/serve-index/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 			"dependencies": {
-				"is-plain-obj": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-					"dev": true
-				}
+				"ms": "2.0.0"
 			}
 		},
-		"minipass": {
-			"version": "3.3.4",
-			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.4.tgz",
-			"integrity": "sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==",
-			"dev": true,
-			"requires": {
-				"yallist": "^4.0.0"
-			},
+		"node_modules/serve-index/node_modules/http-errors": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+			"integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
 			"dependencies": {
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"depd": "~1.1.2",
+				"inherits": "2.0.3",
+				"setprototypeof": "1.1.0",
+				"statuses": ">= 1.4.0 < 2"
+			},
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"minipass-collect": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-			"integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
-			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0"
-			},
+		"node_modules/serve-index/node_modules/setprototypeof": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+			"integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+		},
+		"node_modules/serve-static": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+			"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
 			"dependencies": {
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"parseurl": "~1.3.3",
+				"send": "0.18.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"minipass-fetch": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-2.1.2.tgz",
-			"integrity": "sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==",
-			"dev": true,
-			"requires": {
-				"encoding": "^0.1.13",
-				"minipass": "^3.1.6",
-				"minipass-sized": "^1.0.3",
-				"minizlib": "^2.1.2"
-			},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+		},
+		"node_modules/set-function-length": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+			"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
 			"dependencies": {
-				"encoding": {
-					"version": "0.1.13",
-					"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-					"integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"iconv-lite": "^0.6.2"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.6.3",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-					"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3.0.0"
-					}
-				}
+				"define-data-property": "^1.1.4",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"gopd": "^1.0.1",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
-		"minipass-flush": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-			"integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+		"node_modules/set-value": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+			"integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
 			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0"
-			},
 			"dependencies": {
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"extend-shallow": "^2.0.1",
+				"is-extendable": "^0.1.1",
+				"is-plain-object": "^2.0.3",
+				"split-string": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"minipass-json-stream": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
-			"integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
+		"node_modules/set-value/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
 			"dev": true,
-			"requires": {
-				"jsonparse": "^1.3.1",
-				"minipass": "^3.0.0"
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"minipass-pipeline": {
-			"version": "1.2.4",
-			"resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-			"integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+		"node_modules/set-value/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
 			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0"
-			},
 			"dependencies": {
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"minipass-sized": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
-			"integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
-			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0"
-			}
+		"node_modules/setimmediate": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+			"dev": true
 		},
-		"minizlib": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-			"dev": true,
-			"requires": {
-				"minipass": "^3.0.0",
-				"yallist": "^4.0.0"
-			},
-			"dependencies": {
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
-			}
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
 		},
-		"mississippi": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-			"integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+		"node_modules/sha.js": {
+			"version": "2.4.11",
+			"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+			"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
 			"dev": true,
-			"requires": {
-				"concat-stream": "^1.5.0",
-				"duplexify": "^3.4.2",
-				"end-of-stream": "^1.1.0",
-				"flush-write-stream": "^1.0.0",
-				"from2": "^2.1.0",
-				"parallel-transform": "^1.1.0",
-				"pump": "^3.0.0",
-				"pumpify": "^1.3.3",
-				"stream-each": "^1.1.0",
-				"through2": "^2.0.0"
-			},
 			"dependencies": {
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				}
+				"inherits": "^2.0.1",
+				"safe-buffer": "^5.0.1"
+			},
+			"bin": {
+				"sha.js": "bin.js"
 			}
 		},
-		"mixin-deep": {
-			"version": "1.3.2",
-			"resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-			"integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
-			"requires": {
-				"for-in": "^1.0.2",
-				"is-extendable": "^1.0.1"
-			},
+		"node_modules/shallow-clone": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+			"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
 			"dependencies": {
-				"is-extendable": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-					"integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-					"requires": {
-						"is-plain-object": "^2.0.4"
-					},
-					"dependencies": {
-						"is-plain-object": {
-							"version": "2.0.4",
-							"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-							"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-							"requires": {
-								"isobject": "^3.0.1"
-							}
-						}
-					}
-				}
+				"kind-of": "^6.0.2"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"mixin-object": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
-			"integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+		"node_modules/sharp": {
+			"version": "0.32.6",
+			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+			"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
 			"dev": true,
-			"requires": {
-				"for-in": "^0.1.3",
-				"is-extendable": "^0.1.1"
-			},
+			"hasInstallScript": true,
+			"optional": true,
 			"dependencies": {
-				"for-in": {
-					"version": "0.1.8",
-					"resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
-					"integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
-					"dev": true
-				}
-			}
-		},
-		"mkdirp": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-			"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-			"requires": {
-				"minimist": "0.0.8"
+				"color": "^4.2.3",
+				"detect-libc": "^2.0.2",
+				"node-addon-api": "^6.1.0",
+				"prebuild-install": "^7.1.1",
+				"semver": "^7.5.4",
+				"simple-get": "^4.0.1",
+				"tar-fs": "^3.0.4",
+				"tunnel-agent": "^0.6.0"
 			},
-			"dependencies": {
-				"minimist": {
-					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-					"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-				}
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
 			}
 		},
-		"mkdirp-classic": {
-			"version": "0.5.3",
-			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-			"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-			"dev": true
+		"node_modules/sharp/node_modules/node-addon-api": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+			"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+			"dev": true,
+			"optional": true
 		},
-		"mkdirp-infer-owner": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz",
-			"integrity": "sha512-sdqtiFt3lkOaYvTXSRIUjkIdPTcxgv5+fgqYE/5qgwdw12cOrAuzzgzvVExIkH/ul1oeHN3bCLOWSG3XOqbKKw==",
+		"node_modules/sharp/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
 			"dev": true,
-			"requires": {
-				"chownr": "^2.0.0",
-				"infer-owner": "^1.0.4",
-				"mkdirp": "^1.0.3"
-			},
+			"license": "MIT",
+			"optional": true,
 			"dependencies": {
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				}
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"mockdate": {
-			"version": "3.0.5",
-			"resolved": "https://registry.npmjs.org/mockdate/-/mockdate-3.0.5.tgz",
-			"integrity": "sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ=="
-		},
-		"modify-values": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz",
-			"integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
-			"dev": true
-		},
-		"moment": {
-			"version": "2.22.1",
-			"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
-			"integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ=="
-		},
-		"moment-timezone": {
-			"version": "0.5.31",
-			"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.31.tgz",
-			"integrity": "sha512-+GgHNg8xRhMXfEbv81iDtrVeTcWt0kWmTEY1XQK14dICTXnWJnT0dxdlPspwqF3keKMVPXwayEsk1DI0AA/jdA==",
-			"requires": {
-				"moment": ">= 2.9.0"
+		"node_modules/sharp/node_modules/tar-fs": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+			"integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"pump": "^3.0.0",
+				"tar-stream": "^3.1.5"
+			},
+			"optionalDependencies": {
+				"bare-fs": "^2.1.1",
+				"bare-path": "^2.1.0"
 			}
 		},
-		"mousetrap": {
-			"version": "1.6.5",
-			"resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-			"integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-		},
-		"move-concurrently": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-			"integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+		"node_modules/sharp/node_modules/tar-stream": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+			"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
 			"dev": true,
-			"requires": {
-				"aproba": "^1.1.1",
-				"copy-concurrently": "^1.0.0",
-				"fs-write-stream-atomic": "^1.0.8",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.4",
-				"run-queue": "^1.0.3"
-			},
+			"optional": true,
 			"dependencies": {
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				}
+				"b4a": "^1.6.4",
+				"fast-fifo": "^1.2.0",
+				"streamx": "^2.15.0"
 			}
 		},
-		"ms": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+		"node_modules/shebang-command": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+			"integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+			"dependencies": {
+				"shebang-regex": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"multicast-dns": {
-			"version": "6.2.3",
-			"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-			"integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
-			"dev": true,
-			"requires": {
-				"dns-packet": "^1.3.1",
-				"thunky": "^1.0.2"
+		"node_modules/shebang-regex": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+			"integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"multicast-dns-service-types": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-			"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
-			"dev": true
+		"node_modules/shell-quote": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+			"integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"multimatch": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
-			"integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+		"node_modules/shiki": {
+			"version": "0.14.4",
+			"resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.4.tgz",
+			"integrity": "sha512-IXCRip2IQzKwxArNNq1S+On4KPML3Yyn8Zzs/xRgcgOWIr8ntIK3IKzjFPfjy/7kt9ZMjc+FItfqHRBg8b6tNQ==",
 			"dev": true,
-			"requires": {
-				"@types/minimatch": "^3.0.3",
-				"array-differ": "^3.0.0",
-				"array-union": "^2.1.0",
-				"arrify": "^2.0.1",
-				"minimatch": "^3.0.4"
-			},
 			"dependencies": {
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"arrify": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-					"integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-					"dev": true
-				}
+				"ansi-sequence-parser": "^1.1.0",
+				"jsonc-parser": "^3.2.0",
+				"vscode-oniguruma": "^1.7.0",
+				"vscode-textmate": "^8.0.0"
 			}
 		},
-		"mustache": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.0.0.tgz",
-			"integrity": "sha512-FJgjyX/IVkbXBXYUwH+OYwQKqWpFPLaLVESd70yHjSDunwzV2hZOoTBvPf4KLoxesUzzyfTH6F784Uqd7Wm5yA==",
-			"dev": true
-		},
-		"mute-stream": {
-			"version": "0.0.8",
-			"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-			"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-			"dev": true
-		},
-		"nan": {
-			"version": "2.14.2",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-			"integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+		"node_modules/shiki/node_modules/jsonc-parser": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+			"integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
 			"dev": true,
-			"optional": true
+			"license": "MIT"
+		},
+		"node_modules/showdown": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/showdown/-/showdown-1.9.1.tgz",
+			"integrity": "sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==",
+			"dependencies": {
+				"yargs": "^14.2"
+			},
+			"bin": {
+				"showdown": "bin/showdown.js"
+			}
 		},
-		"nanoid": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-			"integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw=="
+		"node_modules/showdown/node_modules/ansi-regex": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+			"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"nanomatch": {
-			"version": "1.2.13",
-			"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-			"integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-			"requires": {
-				"arr-diff": "^4.0.0",
-				"array-unique": "^0.3.2",
-				"define-property": "^2.0.2",
-				"extend-shallow": "^3.0.2",
-				"fragment-cache": "^0.2.1",
-				"is-windows": "^1.0.2",
-				"kind-of": "^6.0.2",
-				"object.pick": "^1.3.0",
-				"regex-not": "^1.0.0",
-				"snapdragon": "^0.8.1",
-				"to-regex": "^3.0.1"
+		"node_modules/showdown/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"natural-compare": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-			"integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-			"dev": true
+		"node_modules/showdown/node_modules/cliui": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+			"integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+			"dependencies": {
+				"string-width": "^3.1.0",
+				"strip-ansi": "^5.2.0",
+				"wrap-ansi": "^5.1.0"
+			}
 		},
-		"negotiator": {
-			"version": "0.6.2",
-			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-			"integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+		"node_modules/showdown/node_modules/find-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+			"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+			"dependencies": {
+				"locate-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"neo-async": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+		"node_modules/showdown/node_modules/locate-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+			"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+			"dependencies": {
+				"p-locate": "^3.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"nested-error-stacks": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz",
-			"integrity": "sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==",
-			"dev": true
+		"node_modules/showdown/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"nice-try": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.4.tgz",
-			"integrity": "sha512-2NpiFHqC87y/zFke0fC0spBXL3bBsoh/p5H1EFhshxjCR5+0g2d6BiXbUFz9v1sAcxsk2htp2eQnNIci2dIYcA=="
+		"node_modules/showdown/node_modules/p-locate": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+			"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+			"dependencies": {
+				"p-limit": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"no-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"requires": {
-				"lower-case": "^2.0.2",
-				"tslib": "^2.0.3"
+		"node_modules/showdown/node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"nocache": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/nocache/-/nocache-2.1.0.tgz",
-			"integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q=="
+		"node_modules/showdown/node_modules/string-width": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+			"integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+			"dependencies": {
+				"emoji-regex": "^7.0.1",
+				"is-fullwidth-code-point": "^2.0.0",
+				"strip-ansi": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
 		},
-		"nock": {
-			"version": "12.0.3",
-			"resolved": "https://registry.npmjs.org/nock/-/nock-12.0.3.tgz",
-			"integrity": "sha512-QNb/j8kbFnKCiyqi9C5DD0jH/FubFGj5rt9NQFONXwQm3IPB0CULECg/eS3AU1KgZb/6SwUa4/DTRKhVxkGABw==",
-			"dev": true,
-			"requires": {
-				"debug": "^4.1.0",
-				"json-stringify-safe": "^5.0.1",
-				"lodash": "^4.17.13",
-				"propagate": "^2.0.0"
+		"node_modules/showdown/node_modules/strip-ansi": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+			"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+			"dependencies": {
+				"ansi-regex": "^4.1.0"
 			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/showdown/node_modules/wrap-ansi": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+			"integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
 			"dependencies": {
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"ansi-styles": "^3.2.0",
+				"string-width": "^3.0.0",
+				"strip-ansi": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"node-addon-api": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-			"dev": true
+		"node_modules/showdown/node_modules/yargs": {
+			"version": "14.2.3",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
+			"integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
+			"dependencies": {
+				"cliui": "^5.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^3.0.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^3.0.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^15.0.1"
+			}
 		},
-		"node-dir": {
-			"version": "0.1.17",
-			"resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
-			"integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
-			"requires": {
-				"minimatch": "^3.0.2"
+		"node_modules/showdown/node_modules/yargs-parser": {
+			"version": "15.0.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.3.tgz",
+			"integrity": "sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==",
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
 			}
 		},
-		"node-fetch": {
-			"version": "2.6.1",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
-			"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+		"node_modules/side-channel": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+			"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+			"dependencies": {
+				"call-bind": "^1.0.7",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.4",
+				"object-inspect": "^1.13.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"node-forge": {
-			"version": "0.10.0",
-			"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-			"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
-			"dev": true
+		"node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
 		},
-		"node-gyp": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-9.1.0.tgz",
-			"integrity": "sha512-HkmN0ZpQJU7FLbJauJTHkHlSVAXlNGDAzH/VYFZGDOnFyn/Na3GlNJfkudmufOdS6/jNFhy88ObzL7ERz9es1g==",
+		"node_modules/sigstore": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/sigstore/-/sigstore-1.8.0.tgz",
+			"integrity": "sha512-ogU8qtQ3VFBawRJ8wjsBEX/vIFeHuGs1fm4jZtjWQwjo8pfAt7T/rh+udlAN4+QUe0IzA8qRSc/YZ7dHP6kh+w==",
 			"dev": true,
-			"requires": {
-				"env-paths": "^2.2.0",
-				"glob": "^7.1.4",
-				"graceful-fs": "^4.2.6",
-				"make-fetch-happen": "^10.0.3",
-				"nopt": "^5.0.0",
-				"npmlog": "^6.0.0",
-				"rimraf": "^3.0.2",
-				"semver": "^7.3.5",
-				"tar": "^6.1.2",
-				"which": "^2.0.2"
-			},
 			"dependencies": {
-				"glob": {
-					"version": "7.2.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-					"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^3.1.1",
-						"once": "^1.3.0",
-						"path-is-absolute": "^1.0.0"
-					}
+				"@sigstore/bundle": "^1.0.0",
+				"@sigstore/protobuf-specs": "^0.2.0",
+				"@sigstore/tuf": "^1.0.3",
+				"make-fetch-happen": "^11.0.1"
+			},
+			"bin": {
+				"sigstore": "bin/sigstore.js"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+			}
+		},
+		"node_modules/simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"minimatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-					"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"optional": true
+		},
+		"node_modules/simple-get": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+			"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"optional": true,
+			"dependencies": {
+				"decompress-response": "^6.0.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
 			}
 		},
-		"node-gyp-build": {
-			"version": "4.5.0",
-			"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.5.0.tgz",
-			"integrity": "sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==",
-			"dev": true
+		"node_modules/simple-git": {
+			"version": "3.24.0",
+			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.24.0.tgz",
+			"integrity": "sha512-QqAKee9Twv+3k8IFOFfPB2hnk6as6Y6ACUpwCtQvRYBAes23Wv3SZlHVobAzqcE8gfsisCvPw3HGW3HYM+VYYw==",
+			"dependencies": {
+				"@kwsites/file-exists": "^1.1.1",
+				"@kwsites/promise-deferred": "^1.1.1",
+				"debug": "^4.3.4"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/steveukx/git-js?sponsor=1"
+			}
 		},
-		"node-int64": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-			"integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs="
+		"node_modules/simple-html-tokenizer": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.5.7.tgz",
+			"integrity": "sha512-APW9iYbkJ5cijjX4Ljhf3VG8SwYPUJT5gZrwci/wieMabQxWFiV5VwsrP5c6GMRvXKEQMGkAB1d9dvW66dTqpg=="
 		},
-		"node-libs-browser": {
-			"version": "2.2.1",
-			"resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-			"integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
-			"dev": true,
-			"requires": {
-				"assert": "^1.1.1",
-				"browserify-zlib": "^0.2.0",
-				"buffer": "^4.3.0",
-				"console-browserify": "^1.1.0",
-				"constants-browserify": "^1.0.0",
-				"crypto-browserify": "^3.11.0",
-				"domain-browser": "^1.1.1",
-				"events": "^3.0.0",
-				"https-browserify": "^1.0.0",
-				"os-browserify": "^0.3.0",
-				"path-browserify": "0.0.1",
-				"process": "^0.11.10",
-				"punycode": "^1.2.4",
-				"querystring-es3": "^0.2.0",
-				"readable-stream": "^2.3.3",
-				"stream-browserify": "^2.0.1",
-				"stream-http": "^2.7.2",
-				"string_decoder": "^1.0.0",
-				"timers-browserify": "^2.0.4",
-				"tty-browserify": "0.0.0",
-				"url": "^0.11.0",
-				"util": "^0.11.0",
-				"vm-browserify": "^1.0.1"
-			},
-			"dependencies": {
-				"punycode": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-					"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-					"dev": true
+		"node_modules/simple-peer": {
+			"version": "9.11.1",
+			"resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz",
+			"integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"dependencies": {
+				"buffer": "^6.0.3",
+				"debug": "^4.3.2",
+				"err-code": "^3.0.1",
+				"get-browser-rtc": "^1.1.0",
+				"queue-microtask": "^1.2.3",
+				"randombytes": "^2.1.0",
+				"readable-stream": "^3.6.0"
 			}
 		},
-		"node-modules-regexp": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-			"integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
-		},
-		"node-stream-zip": {
-			"version": "1.15.0",
-			"resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
-			"integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw=="
+		"node_modules/simple-peer/node_modules/buffer": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+			"integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.2.1"
+			}
 		},
-		"node-watch": {
-			"version": "0.7.0",
-			"resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.0.tgz",
-			"integrity": "sha512-OOBiglke5SlRQT5WYfwXTmYqTfXjcTNBHpalyHLtLxDpQYVpVRkJqabcch1kmwJsjV/J4OZuzEafeb4soqtFZA==",
-			"dev": true
+		"node_modules/simple-peer/node_modules/err-code": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz",
+			"integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA=="
 		},
-		"nopt": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-			"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-			"dev": true,
-			"requires": {
-				"abbrev": "1"
+		"node_modules/simple-peer/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"normalize-package-data": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-			"integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
-			"dev": true,
-			"requires": {
-				"hosted-git-info": "^2.1.4",
-				"is-builtin-module": "^1.0.0",
-				"semver": "2 || 3 || 4 || 5",
-				"validate-npm-package-license": "^3.0.1"
-			},
+		"node_modules/simple-swizzle": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+			"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
 			"dependencies": {
-				"semver": {
-					"version": "5.7.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-					"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
-					"dev": true
-				}
+				"is-arrayish": "^0.3.1"
 			}
 		},
-		"normalize-path": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-			"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-			"requires": {
-				"remove-trailing-separator": "^1.0.1"
+		"node_modules/simple-swizzle/node_modules/is-arrayish": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+			"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+		},
+		"node_modules/sirv": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
+			"integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.20",
+				"mrmime": "^1.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"normalize-range": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-			"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-			"dev": true
+		"node_modules/sisteransi": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
 		},
-		"normalize-selector": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz",
-			"integrity": "sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=",
-			"dev": true
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"normalize-url": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-			"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-			"dev": true
+		"node_modules/slice-ansi": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
+			"integrity": "sha512-up04hB2hR92PgjpyU3y/eg91yIBILyjVY26NvvciY3EVVPjybkMszMpXQ9QAkcS3I5rtJBDLoTxxg+qvW8c7rw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"normalize-wheel": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
-			"integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+		"node_modules/smart-buffer": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+			"integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+			"engines": {
+				"node": ">= 6.0.0",
+				"npm": ">= 3.0.0"
+			}
 		},
-		"npm-bundled": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
-			"integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
-			"dev": true,
-			"requires": {
-				"npm-normalize-package-bin": "^1.0.1"
+		"node_modules/snake-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
 			}
 		},
-		"npm-install-checks": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-5.0.0.tgz",
-			"integrity": "sha512-65lUsMI8ztHCxFz5ckCEC44DRvEGdZX5usQFriauxHEwt7upv1FKaQEmAtU0YnOAdwuNWCmk64xYiQABNrEyLA==",
+		"node_modules/snapdragon": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+			"integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
 			"dev": true,
-			"requires": {
-				"semver": "^7.1.1"
+			"dependencies": {
+				"base": "^0.11.1",
+				"debug": "^2.2.0",
+				"define-property": "^0.2.5",
+				"extend-shallow": "^2.0.1",
+				"map-cache": "^0.2.2",
+				"source-map": "^0.5.6",
+				"source-map-resolve": "^0.5.0",
+				"use": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npm-normalize-package-bin": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-			"integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
-			"dev": true
-		},
-		"npm-package-arg": {
-			"version": "8.1.5",
-			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.5.tgz",
-			"integrity": "sha512-LhgZrg0n0VgvzVdSm1oiZworPbTxYHUJCgtsJW8mGvlDpxTM1vSJc3m5QZeUkhAHIzbz3VCHd/R4osi1L1Tg/Q==",
+		"node_modules/snapdragon-node": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+			"integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
 			"dev": true,
-			"requires": {
-				"hosted-git-info": "^4.0.1",
-				"semver": "^7.3.4",
-				"validate-npm-package-name": "^3.0.0"
-			},
 			"dependencies": {
-				"hosted-git-info": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-					"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"define-property": "^1.0.0",
+				"isobject": "^3.0.0",
+				"snapdragon-util": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npm-package-json-lint": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/npm-package-json-lint/-/npm-package-json-lint-5.0.0.tgz",
-			"integrity": "sha512-a7meq98EnSqniPWNhTj0TMJbTFKr8SPEkQep3iPCQVJWfhQ8fKI5+bUSgNyEbYfzfIrIjMTb0r/tCkX7FX+bYQ==",
+		"node_modules/snapdragon-node/node_modules/define-property": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+			"integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
 			"dev": true,
-			"requires": {
-				"ajv": "^6.12.0",
-				"ajv-errors": "^1.0.1",
-				"chalk": "^4.0.0",
-				"cosmiconfig": "^6.0.0",
-				"debug": "^4.1.1",
-				"globby": "^11.0.0",
-				"ignore": "^5.1.4",
-				"is-plain-obj": "^2.1.0",
-				"jsonc-parser": "^2.2.1",
-				"log-symbols": "^3.0.0",
-				"meow": "^6.1.0",
-				"plur": "^4.0.0",
-				"semver": "^7.2.2",
-				"slash": "^3.0.0",
-				"strip-json-comments": "^3.1.0"
-			},
 			"dependencies": {
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"camelcase-keys": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-					"integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.3.1",
-						"map-obj": "^4.0.0",
-						"quick-lru": "^4.0.1"
-					}
-				},
-				"cosmiconfig": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-					"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.1.0",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.7.2"
-					}
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"globby": {
-					"version": "11.0.4",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-					"integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.1.1",
-						"ignore": "^5.1.4",
-						"merge2": "^1.3.0",
-						"slash": "^3.0.0"
-					}
-				},
-				"indent-string": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-					"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-					"dev": true
-				},
-				"is-plain-obj": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-					"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-					"dev": true
-				},
-				"jsonc-parser": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
-					"integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==",
-					"dev": true
-				},
-				"log-symbols": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-					"integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
-					"dev": true,
-					"requires": {
-						"chalk": "^2.4.2"
-					},
-					"dependencies": {
-						"chalk": {
-							"version": "2.4.2",
-							"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-							"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-							"dev": true,
-							"requires": {
-								"ansi-styles": "^3.2.1",
-								"escape-string-regexp": "^1.0.5",
-								"supports-color": "^5.3.0"
-							}
-						}
-					}
-				},
-				"map-obj": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-					"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-					"dev": true
-				},
-				"meow": {
-					"version": "6.1.1",
-					"resolved": "https://registry.npmjs.org/meow/-/meow-6.1.1.tgz",
-					"integrity": "sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==",
-					"dev": true,
-					"requires": {
-						"@types/minimist": "^1.2.0",
-						"camelcase-keys": "^6.2.2",
-						"decamelize-keys": "^1.1.0",
-						"hard-rejection": "^2.1.0",
-						"minimist-options": "^4.0.2",
-						"normalize-package-data": "^2.5.0",
-						"read-pkg-up": "^7.0.1",
-						"redent": "^3.0.0",
-						"trim-newlines": "^3.0.0",
-						"type-fest": "^0.13.1",
-						"yargs-parser": "^18.1.3"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"minimist-options": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-					"integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-					"dev": true,
-					"requires": {
-						"arrify": "^1.0.1",
-						"is-plain-obj": "^1.1.0",
-						"kind-of": "^6.0.3"
-					},
-					"dependencies": {
-						"is-plain-obj": {
-							"version": "1.1.0",
-							"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-							"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-							"dev": true
-						}
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"normalize-package-data": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-					"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^2.1.4",
-						"resolve": "^1.10.0",
-						"semver": "2 || 3 || 4 || 5",
-						"validate-npm-package-license": "^3.0.1"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						}
-					}
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"quick-lru": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-					"integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-					"dev": true
-				},
-				"redent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-					"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-					"dev": true,
-					"requires": {
-						"indent-string": "^4.0.0",
-						"strip-indent": "^3.0.0"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"strip-indent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-					"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-					"dev": true,
-					"requires": {
-						"min-indent": "^1.0.0"
-					}
-				},
-				"strip-json-comments": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-					"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-					"dev": true
-				},
-				"trim-newlines": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-					"integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.13.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-					"integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-					"dev": true
-				},
-				"yargs-parser": {
-					"version": "18.1.3",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-					"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
-				}
+				"is-descriptor": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npm-packlist": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-3.0.0.tgz",
-			"integrity": "sha512-L/cbzmutAwII5glUcf2DBRNY/d0TFd4e/FnaZigJV6JD85RHZXJFGwCndjMWiiViiWSsWt3tiOLpI3ByTnIdFQ==",
+		"node_modules/snapdragon-node/node_modules/is-descriptor": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
+			"integrity": "sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==",
 			"dev": true,
-			"requires": {
-				"glob": "^7.1.6",
-				"ignore-walk": "^4.0.1",
-				"npm-bundled": "^1.1.1",
-				"npm-normalize-package-bin": "^1.0.1"
-			},
 			"dependencies": {
-				"glob": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
-					"integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-					"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"
-					}
-				}
+				"is-accessor-descriptor": "^1.0.1",
+				"is-data-descriptor": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
-		"npm-pick-manifest": {
-			"version": "7.0.2",
-			"resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-7.0.2.tgz",
-			"integrity": "sha512-gk37SyRmlIjvTfcYl6RzDbSmS9Y4TOBXfsPnoYqTHARNgWbyDiCSMLUpmALDj4jjcTZpURiEfsSHJj9k7EV4Rw==",
+		"node_modules/snapdragon-util": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+			"integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
 			"dev": true,
-			"requires": {
-				"npm-install-checks": "^5.0.0",
-				"npm-normalize-package-bin": "^2.0.0",
-				"npm-package-arg": "^9.0.0",
-				"semver": "^7.3.5"
+			"dependencies": {
+				"kind-of": "^3.2.0"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/snapdragon-util/node_modules/kind-of": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+			"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+			"dev": true,
 			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"npm-normalize-package-bin": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-					"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				}
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npm-registry-fetch": {
-			"version": "13.3.1",
-			"resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-13.3.1.tgz",
-			"integrity": "sha512-eukJPi++DKRTjSBRcDZSDDsGqRK3ehbxfFUcgaRd0Yp6kRwOwh2WVn0r+8rMB4nnuzvAk6rQVzl6K5CkYOmnvw==",
+		"node_modules/snapdragon/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
 			"dev": true,
-			"requires": {
-				"make-fetch-happen": "^10.0.6",
-				"minipass": "^3.1.6",
-				"minipass-fetch": "^2.0.3",
-				"minipass-json-stream": "^1.0.1",
-				"minizlib": "^2.1.2",
-				"npm-package-arg": "^9.0.1",
-				"proc-log": "^2.0.0"
-			},
-			"dependencies": {
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				}
+			"dependencies": {
+				"ms": "2.0.0"
 			}
 		},
-		"npm-run-all": {
-			"version": "4.1.5",
-			"resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
-			"integrity": "sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==",
+		"node_modules/snapdragon/node_modules/define-property": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+			"integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
 			"dev": true,
-			"requires": {
-				"ansi-styles": "^3.2.1",
-				"chalk": "^2.4.1",
-				"cross-spawn": "^6.0.5",
-				"memorystream": "^0.3.1",
-				"minimatch": "^3.0.4",
-				"pidtree": "^0.3.0",
-				"read-pkg": "^3.0.0",
-				"shell-quote": "^1.6.1",
-				"string.prototype.padend": "^3.0.0"
-			},
 			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"dev": true,
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					}
-				},
-				"load-json-file": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-					"integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"parse-json": "^4.0.0",
-						"pify": "^3.0.0",
-						"strip-bom": "^3.0.0"
-					}
-				},
-				"parse-json": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-					"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-					"dev": true,
-					"requires": {
-						"error-ex": "^1.3.1",
-						"json-parse-better-errors": "^1.0.1"
-					}
-				},
-				"pify": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-					"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-					"dev": true
-				},
-				"read-pkg": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-					"integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-					"dev": true,
-					"requires": {
-						"load-json-file": "^4.0.0",
-						"normalize-package-data": "^2.3.2",
-						"path-type": "^3.0.0"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
-				},
-				"strip-bom": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-					"dev": true
-				}
+				"is-descriptor": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npm-run-path": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-			"integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-			"requires": {
-				"path-key": "^2.0.0"
+		"node_modules/snapdragon/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"npmlog": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-			"integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
+		"node_modules/snapdragon/node_modules/source-map": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+			"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
 			"dev": true,
-			"requires": {
-				"are-we-there-yet": "^3.0.0",
-				"console-control-strings": "^1.1.0",
-				"gauge": "^4.0.3",
-				"set-blocking": "^2.0.0"
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"nullthrows": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
-			"integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+		"node_modules/snapshot-diff": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/snapshot-diff/-/snapshot-diff-0.10.0.tgz",
+			"integrity": "sha512-tbThBMguEG4TQNPfYD5VDAYbmxsSnu+VQSLElWfDBdebLKqXZa14hap8LqxAwD9w8CT4dfS+Ga9+7JMmHMU98g==",
+			"dev": true,
+			"dependencies": {
+				"jest-diff": "^29.0.0",
+				"jest-snapshot": "^29.0.0",
+				"pretty-format": "^29.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"jest": ">=16"
+			}
 		},
-		"num2fraction": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-			"integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
-			"dev": true
+		"node_modules/sockjs": {
+			"version": "0.3.24",
+			"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+			"integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+			"dependencies": {
+				"faye-websocket": "^0.11.3",
+				"uuid": "^8.3.2",
+				"websocket-driver": "^0.7.4"
+			}
 		},
-		"number-is-nan": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-			"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-			"dev": true
+		"node_modules/sockjs/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
 		},
-		"nwsapi": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
-			"integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
-			"dev": true
+		"node_modules/socks": {
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+			"integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
+			"license": "MIT",
+			"dependencies": {
+				"ip-address": "^9.0.5",
+				"smart-buffer": "^4.2.0"
+			},
+			"engines": {
+				"node": ">= 10.0.0",
+				"npm": ">= 3.0.0"
+			}
 		},
-		"nx": {
-			"version": "14.7.13",
-			"resolved": "https://registry.npmjs.org/nx/-/nx-14.7.13.tgz",
-			"integrity": "sha512-NWeZ2fDjx6rkueA/lbu6tK4qfSvp6xrvQtv81Cpyae8BhhkoI36QoxkySJVBetIY/MypDPSl9JHqJwkBju4PQw==",
-			"dev": true,
-			"requires": {
-				"@nrwl/cli": "14.7.13",
-				"@nrwl/tao": "14.7.13",
-				"@parcel/watcher": "2.0.4",
-				"@yarnpkg/lockfile": "^1.1.0",
-				"@yarnpkg/parsers": "^3.0.0-rc.18",
-				"@zkochan/js-yaml": "0.0.6",
-				"chalk": "4.1.0",
-				"chokidar": "^3.5.1",
-				"cli-cursor": "3.1.0",
-				"cli-spinners": "2.6.1",
-				"cliui": "^7.0.2",
-				"dotenv": "~10.0.0",
-				"enquirer": "~2.3.6",
-				"fast-glob": "3.2.7",
-				"figures": "3.2.0",
-				"flat": "^5.0.2",
-				"fs-extra": "^10.1.0",
-				"glob": "7.1.4",
-				"ignore": "^5.0.4",
-				"js-yaml": "4.1.0",
-				"jsonc-parser": "3.2.0",
-				"minimatch": "3.0.5",
-				"npm-run-path": "^4.0.1",
-				"open": "^8.4.0",
-				"semver": "7.3.4",
-				"string-width": "^4.2.3",
-				"strong-log-transformer": "^2.1.0",
-				"tar-stream": "~2.2.0",
-				"tmp": "~0.2.1",
-				"tsconfig-paths": "^3.9.0",
-				"tslib": "^2.3.0",
-				"v8-compile-cache": "2.3.0",
-				"yargs": "^17.4.0",
-				"yargs-parser": "21.0.1"
-			},
-			"dependencies": {
-				"@zkochan/js-yaml": {
-					"version": "0.0.6",
-					"resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
-					"integrity": "sha512-nzvgl3VfhcELQ8LyVrYOru+UtAy1nrygk2+AGbTm8a5YcO6o8lSjAT+pfg3vJWxIoZKOUhrK6UU7xW/+00kQrg==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"argparse": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-					"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-					"dev": true
-				},
-				"chalk": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-					"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.1.0",
-						"supports-color": "^7.1.0"
-					}
-				},
-				"cli-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-					"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-					"dev": true,
-					"requires": {
-						"restore-cursor": "^3.1.0"
-					}
-				},
-				"cli-spinners": {
-					"version": "2.6.1",
-					"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
-					"integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
-					"dev": true
-				},
-				"cliui": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-					"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-					"dev": true,
-					"requires": {
-						"string-width": "^4.2.0",
-						"strip-ansi": "^6.0.0",
-						"wrap-ansi": "^7.0.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"dotenv": {
-					"version": "10.0.0",
-					"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-					"integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"figures": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-					"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-					"dev": true,
-					"requires": {
-						"escape-string-regexp": "^1.0.5"
-					}
-				},
-				"fs-extra": {
-					"version": "10.1.0",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-					"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.2.0",
-						"jsonfile": "^6.0.1",
-						"universalify": "^2.0.0"
-					}
-				},
-				"glob": {
-					"version": "7.1.4",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
-					"integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
-					"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"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.10",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-					"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-					"dev": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"is-wsl": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0"
-					}
-				},
-				"js-yaml": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-					"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-					"dev": true,
-					"requires": {
-						"argparse": "^2.0.1"
-					}
-				},
-				"jsonc-parser": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-					"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
-					"dev": true
-				},
-				"jsonfile": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-					"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.6",
-						"universalify": "^2.0.0"
-					}
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "3.0.5",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.5.tgz",
-					"integrity": "sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^1.1.7"
-					}
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"open": {
-					"version": "8.4.0",
-					"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-					"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-					"dev": true,
-					"requires": {
-						"define-lazy-prop": "^2.0.0",
-						"is-docker": "^2.1.1",
-						"is-wsl": "^2.2.0"
-					}
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"restore-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-					"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-					"dev": true,
-					"requires": {
-						"onetime": "^5.1.0",
-						"signal-exit": "^3.0.2"
-					}
-				},
-				"semver": {
-					"version": "7.3.4",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
-					"integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"supports-color": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"tmp": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-					"integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-					"dev": true,
-					"requires": {
-						"rimraf": "^3.0.0"
-					}
-				},
-				"universalify": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-					"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-					"dev": true
-				},
-				"v8-compile-cache": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-					"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-					"dev": true
-				},
-				"wrap-ansi": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				},
-				"y18n": {
-					"version": "5.0.8",
-					"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-					"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				},
-				"yargs": {
-					"version": "17.5.1",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz",
-					"integrity": "sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==",
-					"dev": true,
-					"requires": {
-						"cliui": "^7.0.2",
-						"escalade": "^3.1.1",
-						"get-caller-file": "^2.0.5",
-						"require-directory": "^2.1.1",
-						"string-width": "^4.2.3",
-						"y18n": "^5.0.5",
-						"yargs-parser": "^21.0.0"
-					}
-				},
-				"yargs-parser": {
-					"version": "21.0.1",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.1.tgz",
-					"integrity": "sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==",
-					"dev": true
-				}
+		"node_modules/socks-proxy-agent": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
+			"integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
+			"dev": true,
+			"dependencies": {
+				"agent-base": "^6.0.2",
+				"debug": "^4.3.3",
+				"socks": "^2.6.2"
+			},
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"oauth-sign": {
-			"version": "0.9.0",
-			"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-			"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+		"node_modules/sort-keys": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
+			"integrity": "sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==",
+			"dependencies": {
+				"is-plain-obj": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/sort-keys/node_modules/is-plain-obj": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+			"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/source-list-map": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+			"integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
 			"dev": true
 		},
-		"ob1": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/ob1/-/ob1-0.66.2.tgz",
-			"integrity": "sha512-RFewnL/RjE0qQBOuM+2bbY96zmJPIge/aDtsiDbLSb+MOiK8CReAhBHDgL+zrA3F1hQk00lMWpUwYcep750plA=="
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"object-assign": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-			"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+		"node_modules/source-map-js": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+			"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"object-copy": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-			"integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-			"requires": {
-				"copy-descriptor": "^0.1.0",
-				"define-property": "^0.2.5",
-				"kind-of": "^3.0.3"
+		"node_modules/source-map-loader": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.0.tgz",
+			"integrity": "sha512-GKGWqWvYr04M7tn8dryIWvb0s8YM41z82iQv01yBtIylgxax0CwvSy6gc2Y02iuXwEfGWRlMicH0nvms9UZphw==",
+			"dependencies": {
+				"abab": "^2.0.5",
+				"iconv-lite": "^0.6.2",
+				"source-map-js": "^0.6.2"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
 			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/source-map-resolve": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
+			"integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
+			"deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
 			"dependencies": {
-				"define-property": {
-					"version": "0.2.5",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-					"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-					"requires": {
-						"is-descriptor": "^0.1.0"
-					}
-				},
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				}
+				"atob": "^2.1.1",
+				"decode-uri-component": "^0.2.0",
+				"resolve-url": "^0.2.1",
+				"source-map-url": "^0.4.0",
+				"urix": "^0.1.0"
 			}
 		},
-		"object-filter": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/object-filter/-/object-filter-1.0.2.tgz",
-			"integrity": "sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g=",
-			"dev": true
+		"node_modules/source-map-support": {
+			"version": "0.5.21",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
 		},
-		"object-inspect": {
-			"version": "1.10.3",
-			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-			"integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-			"dev": true
+		"node_modules/source-map-url": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
+			"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
+			"deprecated": "See https://github.com/lydell/source-map-url#deprecated"
 		},
-		"object-is": {
+		"node_modules/space-separated-tokens": {
 			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-			"integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+			"integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3"
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/spawn-command": {
+			"version": "0.0.2-1",
+			"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+			"integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
+			"dev": true
+		},
+		"node_modules/spawnd": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/spawnd/-/spawnd-9.0.2.tgz",
+			"integrity": "sha512-nl8DVHEDQ57IcKakzpjanspVChkMpGLuVwMR/eOn9cXE55Qr6luD2Kn06sA0ootRMdgrU4tInN6lA6ohTNvysw==",
+			"dependencies": {
+				"signal-exit": "^4.1.0",
+				"tree-kill": "^1.2.2"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/spawnd/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=14"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/spdx-correct": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
+			"integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				}
+				"spdx-expression-parse": "^3.0.0",
+				"spdx-license-ids": "^3.0.0"
 			}
 		},
-		"object-keys": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+		"node_modules/spdx-exceptions": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
+			"integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg=="
+		},
+		"node_modules/spdx-expression-parse": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+			"integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+			"dependencies": {
+				"spdx-exceptions": "^2.1.0",
+				"spdx-license-ids": "^3.0.0"
+			}
+		},
+		"node_modules/spdx-license-ids": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+			"integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA=="
+		},
+		"node_modules/spdy": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+			"integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+			"dependencies": {
+				"debug": "^4.1.0",
+				"handle-thing": "^2.0.0",
+				"http-deceiver": "^1.2.7",
+				"select-hose": "^2.0.0",
+				"spdy-transport": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/spdy-transport": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+			"integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+			"dependencies": {
+				"debug": "^4.1.0",
+				"detect-node": "^2.0.4",
+				"hpack.js": "^2.1.6",
+				"obuf": "^1.1.2",
+				"readable-stream": "^3.0.6",
+				"wbuf": "^1.7.3"
+			}
+		},
+		"node_modules/spdy-transport/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/specificity": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
+			"integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
+			"dev": true,
+			"bin": {
+				"specificity": "bin/specificity"
+			}
+		},
+		"node_modules/speedline-core": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/speedline-core/-/speedline-core-1.4.3.tgz",
+			"integrity": "sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==",
+			"dependencies": {
+				"@types/node": "*",
+				"image-ssim": "^0.2.0",
+				"jpeg-js": "^0.4.1"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
 		},
-		"object-visit": {
+		"node_modules/split": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-			"integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-			"requires": {
-				"isobject": "^3.0.0"
+			"resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+			"integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+			"dev": true,
+			"dependencies": {
+				"through": "2"
+			},
+			"engines": {
+				"node": "*"
 			}
 		},
-		"object.assign": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-			"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-			"requires": {
-				"define-properties": "^1.1.2",
-				"function-bind": "^1.1.1",
-				"has-symbols": "^1.0.0",
-				"object-keys": "^1.0.11"
+		"node_modules/split-on-first": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+			"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"object.entries": {
-			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
-			"integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+		"node_modules/split-string": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+			"integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1"
+			"dependencies": {
+				"extend-shallow": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/split2": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+			"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+			"dev": true,
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"readable-stream": "^3.0.0"
 			}
 		},
-		"object.fromentries": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.3.tgz",
-			"integrity": "sha512-IDUSMXs6LOSJBWE++L0lzIbSqHl9KDCfff2x/JSEIDtEUavUnyMYC2ZGay/04Zq4UT8lvd4xNhU4/YHKibAOlw==",
+		"node_modules/split2/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.18.0-next.1",
-				"has": "^1.0.3"
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
 			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/sprintf-js": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.1.tgz",
+			"integrity": "sha512-h/U+VScR2Ft+aXDjGTLtguUEIrYuOjTj79BAOElUvdahYMaaa7SNLjJpOIn+Uzt0hsgHfYvlbcno3e9yXOSo8Q=="
+		},
+		"node_modules/ssri": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
+			"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+			"dev": true,
 			"dependencies": {
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.18.0-next.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
-					"integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
-					"dev": true,
-					"requires": {
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1",
-						"is-callable": "^1.2.2",
-						"is-negative-zero": "^2.0.0",
-						"is-regex": "^1.1.1",
-						"object-inspect": "^1.8.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.1",
-						"string.prototype.trimend": "^1.0.1",
-						"string.prototype.trimstart": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
-					"integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
-					"integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"object-inspect": {
-					"version": "1.9.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-					"integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
-					"integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
-					"integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"figgy-pudding": "^3.5.1"
+			}
+		},
+		"node_modules/stack-trace": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+			"integrity": "sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==",
+			"dev": true,
+			"engines": {
+				"node": "*"
 			}
 		},
-		"object.getownpropertydescriptors": {
+		"node_modules/stack-utils": {
 			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
-			"integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=",
+			"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
+			"integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
+			"dependencies": {
+				"escape-string-regexp": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/stack-utils/node_modules/escape-string-regexp": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+			"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/stackframe": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+			"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
+		},
+		"node_modules/stacktrace-parser": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz",
+			"integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==",
+			"dependencies": {
+				"type-fest": "^0.7.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/stacktrace-parser/node_modules/type-fest": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
+			"integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/state-toggle": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.1.tgz",
+			"integrity": "sha512-Qe8QntFrrpWTnHwvwj2FZTgv+PKIsp0B9VxLzLLbSpPXWOgRgc5LVj/aTiSfK1RqIeF9jeC1UeOH8Q8y60A7og=="
+		},
+		"node_modules/static-extend": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+			"integrity": "sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==",
 			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.2",
-				"es-abstract": "^1.5.1"
+			"dependencies": {
+				"define-property": "^0.2.5",
+				"object-copy": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"object.hasown": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz",
-			"integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==",
+		"node_modules/static-extend/node_modules/define-property": {
+			"version": "0.2.5",
+			"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+			"integrity": "sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==",
 			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1"
-			},
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-					"integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.1",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.1",
-						"object-inspect": "^1.11.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"internal-slot": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-					"integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-					"dev": true,
-					"requires": {
-						"get-intrinsic": "^1.1.0",
-						"has": "^1.0.3",
-						"side-channel": "^1.0.4"
-					}
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.11.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-					"integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"side-channel": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-					"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"get-intrinsic": "^1.0.2",
-						"object-inspect": "^1.9.0"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"is-descriptor": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"object.pick": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-			"integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-			"requires": {
-				"isobject": "^3.0.1"
+		"node_modules/statuses": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+			"integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"object.values": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz",
-			"integrity": "sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==",
+		"node_modules/stop-iteration-iterator": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
+			"integrity": "sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.18.0-next.1",
-				"has": "^1.0.3"
-			},
 			"dependencies": {
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.18.0-next.2",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.2.tgz",
-					"integrity": "sha512-Ih4ZMFHEtZupnUh6497zEL4y2+w8+1ljnCyaTa+adcoafI1GOvMwFlDjBLfWR7y9VLfrjRJe9ocuHY1PSR9jjw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1",
-						"is-callable": "^1.2.2",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.1",
-						"object-inspect": "^1.9.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.3",
-						"string.prototype.trimstart": "^1.0.3"
-					},
-					"dependencies": {
-						"call-bind": {
-							"version": "1.0.2",
-							"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-							"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"get-intrinsic": "^1.0.2"
-							}
-						},
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.2",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
-					"integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
-					"integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"object-inspect": {
-					"version": "1.9.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
-					"integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
-					"integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"internal-slot": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
-		"objectorarray": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz",
-			"integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==",
-			"dev": true
-		},
-		"obuf": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-			"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-			"dev": true
-		},
-		"octokit-pagination-methods": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz",
-			"integrity": "sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==",
+		"node_modules/store2": {
+			"version": "2.14.2",
+			"resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
+			"integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==",
 			"dev": true
 		},
-		"on-finished": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-			"integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-			"requires": {
-				"ee-first": "1.1.1"
+		"node_modules/storybook": {
+			"version": "7.6.15",
+			"resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.15.tgz",
+			"integrity": "sha512-Ybezq9JRk5CBhzjgzZ/oT7mnU45UwhyVSGKW+PUKZGGUG9VH2hCrTEES9f/zEF82kj/5COVPyqR/5vlXuuS39A==",
+			"dev": true,
+			"dependencies": {
+				"@storybook/cli": "7.6.15"
+			},
+			"bin": {
+				"sb": "index.js",
+				"storybook": "index.js"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
 			}
 		},
-		"on-headers": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
-		},
-		"once": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-			"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-			"requires": {
-				"wrappy": "1"
+		"node_modules/storybook-source-link": {
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/storybook-source-link/-/storybook-source-link-2.0.9.tgz",
+			"integrity": "sha512-ysQRQ3e6CtJp9uKPRmb6lfQBDl34DrBftKGU4zycHQYESlqOFYRBQ1GgUwN5kL8un2suDqtMc5IHh50fEAmXqg==",
+			"dev": true,
+			"peerDependencies": {
+				"@storybook/addons": "^6.4.0",
+				"@storybook/api": "^6.4.0",
+				"@storybook/components": "^6.4.0",
+				"@storybook/core-events": "^6.4.0",
+				"@storybook/theming": "^6.4.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"react": {
+					"optional": true
+				},
+				"react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"onetime": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
-			"integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
-			"requires": {
-				"mimic-fn": "^1.0.0"
+		"node_modules/stream-browserify": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+			"integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "~2.0.1",
+				"readable-stream": "^2.0.2"
 			}
 		},
-		"open": {
-			"version": "6.4.0",
-			"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
-			"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
-			"requires": {
-				"is-wsl": "^1.1.0"
+		"node_modules/stream-buffers": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
+			"integrity": "sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.10.0"
 			}
 		},
-		"opener": {
-			"version": "1.5.2",
-			"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-			"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-			"dev": true
-		},
-		"optionator": {
-			"version": "0.8.2",
-			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-			"integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+		"node_modules/stream-combiner": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+			"integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
 			"dev": true,
-			"requires": {
-				"deep-is": "~0.1.3",
-				"fast-levenshtein": "~2.0.4",
-				"levn": "~0.3.0",
-				"prelude-ls": "~1.1.2",
-				"type-check": "~0.3.2",
-				"wordwrap": "~1.0.0"
+			"dependencies": {
+				"duplexer": "~0.1.1",
+				"through": "~2.3.4"
 			}
 		},
-		"options": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
-			"integrity": "sha1-7CLTEoBrtT5zF3Pnza788cZDEo8="
-		},
-		"ora": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/ora/-/ora-4.0.2.tgz",
-			"integrity": "sha512-YUOZbamht5mfLxPmk4M35CD/5DuOkAacxlEUbStVXpBAt4fyhBf+vZHI/HRkI++QUp3sNoeA2Gw4C+hi4eGSig==",
+		"node_modules/stream-each": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+			"integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
 			"dev": true,
-			"requires": {
-				"chalk": "^2.4.2",
-				"cli-cursor": "^3.1.0",
-				"cli-spinners": "^2.2.0",
-				"is-interactive": "^1.0.0",
-				"log-symbols": "^3.0.0",
-				"strip-ansi": "^5.2.0",
-				"wcwidth": "^1.0.1"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-					"dev": true
-				},
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"cli-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-					"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-					"dev": true,
-					"requires": {
-						"restore-cursor": "^3.1.0"
-					}
-				},
-				"log-symbols": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-					"integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
-					"dev": true,
-					"requires": {
-						"chalk": "^2.4.2"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"onetime": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-					"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"restore-cursor": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-					"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-					"dev": true,
-					"requires": {
-						"onetime": "^5.1.0",
-						"signal-exit": "^3.0.2"
-					}
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
-				}
+				"end-of-stream": "^1.1.0",
+				"stream-shift": "^1.0.0"
 			}
 		},
-		"os-browserify": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-			"integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
-			"dev": true
+		"node_modules/stream-http": {
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+			"integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+			"dev": true,
+			"dependencies": {
+				"builtin-status-codes": "^3.0.0",
+				"inherits": "^2.0.1",
+				"readable-stream": "^2.3.6",
+				"to-arraybuffer": "^1.0.0",
+				"xtend": "^4.0.0"
+			}
 		},
-		"os-homedir": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-			"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+		"node_modules/stream-shift": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
+			"integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
 			"dev": true
 		},
-		"os-name": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/os-name/-/os-name-3.1.0.tgz",
-			"integrity": "sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg==",
-			"dev": true,
-			"requires": {
-				"macos-release": "^2.2.0",
-				"windows-release": "^3.1.0"
+		"node_modules/streamx": {
+			"version": "2.15.1",
+			"resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.1.tgz",
+			"integrity": "sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==",
+			"dependencies": {
+				"fast-fifo": "^1.1.0",
+				"queue-tick": "^1.0.1"
 			}
 		},
-		"os-tmpdir": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-			"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+		"node_modules/strict-uri-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+			"integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"overlayscrollbars": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz",
-			"integrity": "sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==",
-			"dev": true
+		"node_modules/string_decoder": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+			"dependencies": {
+				"safe-buffer": "~5.1.0"
+			}
 		},
-		"p-all": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/p-all/-/p-all-2.1.0.tgz",
-			"integrity": "sha512-HbZxz5FONzz/z2gJfk6bFca0BCiSRF8jU3yCsWOen/vR6lZjfPOu/e7L3uFzTW1i0H8TlC3vqQstEJPQL4/uLA==",
+		"node_modules/string-argv": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+			"integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
 			"dev": true,
-			"requires": {
-				"p-map": "^2.0.0"
-			},
+			"engines": {
+				"node": ">=0.6.19"
+			}
+		},
+		"node_modules/string-length": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+			"integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
 			"dependencies": {
-				"p-map": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-					"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-					"dev": true
-				}
+				"char-regex": "^1.0.2",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"p-cancelable": {
+		"node_modules/string-width": {
 			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
-			"integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
-			"dev": true
-		},
-		"p-defer": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-			"integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
-			"dev": true
-		},
-		"p-event": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/p-event/-/p-event-4.1.0.tgz",
-			"integrity": "sha512-4vAd06GCsgflX4wHN1JqrMzBh/8QZ4j+rzp0cd2scXRwuBEv+QR3wrVA5aLhWDLw4y2WgDKvzWF3CCLmVM1UgA==",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+			"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
 			"dev": true,
-			"requires": {
-				"p-timeout": "^2.0.1"
+			"dependencies": {
+				"is-fullwidth-code-point": "^2.0.0",
+				"strip-ansi": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"p-filter": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/p-filter/-/p-filter-2.1.0.tgz",
-			"integrity": "sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==",
+		"node_modules/string-width-cjs": {
+			"name": "string-width",
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dev": true,
-			"requires": {
-				"p-map": "^2.0.0"
-			},
 			"dependencies": {
-				"p-map": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-					"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-					"dev": true
-				}
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"p-finally": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-			"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
+		"node_modules/string-width-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
 		},
-		"p-limit": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-			"integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+		"node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 			"dev": true,
-			"requires": {
-				"p-try": "^1.0.0"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"p-locate": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-			"integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+		"node_modules/string-width/node_modules/ansi-regex": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+			"integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
 			"dev": true,
-			"requires": {
-				"p-limit": "^1.1.0"
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"p-map": {
+		"node_modules/string-width/node_modules/strip-ansi": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-			"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+			"integrity": "sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==",
 			"dev": true,
-			"requires": {
-				"aggregate-error": "^3.0.0"
+			"dependencies": {
+				"ansi-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"p-map-series": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-2.1.0.tgz",
-			"integrity": "sha512-RpYIIK1zXSNEOdwxcfe7FdvGcs7+y5n8rifMhMNWvaxRNMPINJHF5GDeuVxWqnfrcHPSCnp7Oo5yNXHId9Av2Q==",
-			"dev": true
-		},
-		"p-pipe": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz",
-			"integrity": "sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw==",
-			"dev": true
+		"node_modules/string.prototype.matchall": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+			"integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4",
+				"get-intrinsic": "^1.1.3",
+				"has-symbols": "^1.0.3",
+				"internal-slot": "^1.0.3",
+				"regexp.prototype.flags": "^1.4.3",
+				"side-channel": "^1.0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"p-queue": {
-			"version": "6.6.2",
-			"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
-			"integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+		"node_modules/string.prototype.padend": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz",
+			"integrity": "sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==",
 			"dev": true,
-			"requires": {
-				"eventemitter3": "^4.0.4",
-				"p-timeout": "^3.2.0"
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.3",
+				"es-abstract": "^1.19.1"
 			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/string.prototype.trim": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+			"integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
 			"dependencies": {
-				"p-timeout": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-					"integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-					"dev": true,
-					"requires": {
-						"p-finally": "^1.0.0"
-					}
-				}
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"p-reduce": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-2.1.0.tgz",
-			"integrity": "sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==",
-			"dev": true
-		},
-		"p-retry": {
-			"version": "4.6.1",
-			"resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz",
-			"integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==",
-			"dev": true,
-			"requires": {
-				"@types/retry": "^0.12.0",
-				"retry": "^0.13.1"
-			},
+		"node_modules/string.prototype.trimend": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+			"integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
 			"dependencies": {
-				"retry": {
-					"version": "0.13.1",
-					"resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-					"integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-					"dev": true
-				}
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"p-timeout": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
-			"integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-			"dev": true,
-			"requires": {
-				"p-finally": "^1.0.0"
+		"node_modules/string.prototype.trimstart": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+			"integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"define-properties": "^1.1.4",
+				"es-abstract": "^1.20.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"p-try": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-			"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-			"dev": true
-		},
-		"p-waterfall": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/p-waterfall/-/p-waterfall-2.1.1.tgz",
-			"integrity": "sha512-RRTnDb2TBG/epPRI2yYXsimO0v3BXC8Yd3ogr1545IaqKK17VGhbWVeGGN+XfCm/08OK8635nH31c8bATkHuSw==",
-			"dev": true,
-			"requires": {
-				"p-reduce": "^2.0.0"
+		"node_modules/stringify-entities": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz",
+			"integrity": "sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==",
+			"dependencies": {
+				"character-entities-html4": "^1.0.0",
+				"character-entities-legacy": "^1.0.0",
+				"is-alphanumerical": "^1.0.0",
+				"is-hexadecimal": "^1.0.0"
 			}
 		},
-		"pacote": {
-			"version": "13.6.2",
-			"resolved": "https://registry.npmjs.org/pacote/-/pacote-13.6.2.tgz",
-			"integrity": "sha512-Gu8fU3GsvOPkak2CkbojR7vjs3k3P9cA6uazKTHdsdV0gpCEQq2opelnEv30KRQWgVzP5Vd/5umjcedma3MKtg==",
+		"node_modules/stringify-object": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+			"integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
 			"dev": true,
-			"requires": {
-				"@npmcli/git": "^3.0.0",
-				"@npmcli/installed-package-contents": "^1.0.7",
-				"@npmcli/promise-spawn": "^3.0.0",
-				"@npmcli/run-script": "^4.1.0",
-				"cacache": "^16.0.0",
-				"chownr": "^2.0.0",
-				"fs-minipass": "^2.1.0",
-				"infer-owner": "^1.0.4",
-				"minipass": "^3.1.6",
-				"mkdirp": "^1.0.4",
-				"npm-package-arg": "^9.0.0",
-				"npm-packlist": "^5.1.0",
-				"npm-pick-manifest": "^7.0.0",
-				"npm-registry-fetch": "^13.0.1",
-				"proc-log": "^2.0.0",
-				"promise-retry": "^2.0.1",
-				"read-package-json": "^5.0.0",
-				"read-package-json-fast": "^2.0.3",
-				"rimraf": "^3.0.2",
-				"ssri": "^9.0.0",
-				"tar": "^6.1.11"
-			},
 			"dependencies": {
-				"@npmcli/fs": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
-					"integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==",
-					"dev": true,
-					"requires": {
-						"@gar/promisify": "^1.1.3",
-						"semver": "^7.3.5"
-					}
-				},
-				"@npmcli/move-file": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz",
-					"integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==",
-					"dev": true,
-					"requires": {
-						"mkdirp": "^1.0.4",
-						"rimraf": "^3.0.2"
-					}
-				},
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"builtins": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-					"integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
-					"dev": true,
-					"requires": {
-						"semver": "^7.0.0"
-					}
-				},
-				"cacache": {
-					"version": "16.1.3",
-					"resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
-					"integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==",
-					"dev": true,
-					"requires": {
-						"@npmcli/fs": "^2.1.0",
-						"@npmcli/move-file": "^2.0.0",
-						"chownr": "^2.0.0",
-						"fs-minipass": "^2.1.0",
-						"glob": "^8.0.1",
-						"infer-owner": "^1.0.4",
-						"lru-cache": "^7.7.1",
-						"minipass": "^3.1.6",
-						"minipass-collect": "^1.0.2",
-						"minipass-flush": "^1.0.5",
-						"minipass-pipeline": "^1.2.4",
-						"mkdirp": "^1.0.4",
-						"p-map": "^4.0.0",
-						"promise-inflight": "^1.0.1",
-						"rimraf": "^3.0.2",
-						"ssri": "^9.0.0",
-						"tar": "^6.1.11",
-						"unique-filename": "^2.0.0"
-					}
-				},
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"ignore-walk": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
-					"integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
-					"dev": true,
-					"requires": {
-						"minimatch": "^5.0.1"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"npm-bundled": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-2.0.1.tgz",
-					"integrity": "sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==",
-					"dev": true,
-					"requires": {
-						"npm-normalize-package-bin": "^2.0.0"
-					}
-				},
-				"npm-normalize-package-bin": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-					"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-					"dev": true
-				},
-				"npm-package-arg": {
-					"version": "9.1.0",
-					"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-9.1.0.tgz",
-					"integrity": "sha512-4J0GL+u2Nh6OnhvUKXRr2ZMG4lR8qtLp+kv7UiV00Y+nGiSxtttCyIRHCt5L5BNkXQld/RceYItau3MDOoGiBw==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"proc-log": "^2.0.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-name": "^4.0.0"
-					}
-				},
-				"npm-packlist": {
-					"version": "5.1.3",
-					"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-5.1.3.tgz",
-					"integrity": "sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==",
-					"dev": true,
-					"requires": {
-						"glob": "^8.0.1",
-						"ignore-walk": "^5.0.1",
-						"npm-bundled": "^2.0.0",
-						"npm-normalize-package-bin": "^2.0.0"
-					}
-				},
-				"ssri": {
-					"version": "9.0.1",
-					"resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-					"integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
-					"dev": true,
-					"requires": {
-						"minipass": "^3.1.1"
-					}
-				},
-				"unique-filename": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",
-					"integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==",
-					"dev": true,
-					"requires": {
-						"unique-slug": "^3.0.0"
-					}
-				},
-				"unique-slug": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
-					"integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4"
-					}
-				},
-				"validate-npm-package-name": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-					"integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
-					"dev": true,
-					"requires": {
-						"builtins": "^5.0.0"
-					}
-				}
+				"get-own-enumerable-property-symbols": "^3.0.0",
+				"is-obj": "^1.0.1",
+				"is-regexp": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"pako": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.8.tgz",
-			"integrity": "sha512-6i0HVbUfcKaTv+EG8ZTr75az7GFXcLYk9UyLEg7Notv/Ma+z/UG3TCoz6GiNeOrn1E/e63I0X/Hpw18jHOTUnA==",
-			"dev": true
+		"node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"parallel-transform": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz",
-			"integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=",
+		"node_modules/strip-ansi-cjs": {
+			"name": "strip-ansi",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 			"dev": true,
-			"requires": {
-				"cyclist": "~0.2.2",
-				"inherits": "^2.0.3",
-				"readable-stream": "^2.1.5"
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"param-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-			"requires": {
-				"dot-case": "^3.0.4",
-				"tslib": "^2.0.3"
+		"node_modules/strip-bom": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+			"integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"parent-module": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-			"requires": {
-				"callsites": "^3.0.0"
+		"node_modules/strip-eof": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+			"integrity": "sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"parse-asn1": {
-			"version": "5.1.6",
-			"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-			"integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
-			"dev": true,
-			"requires": {
-				"asn1.js": "^5.2.0",
-				"browserify-aes": "^1.0.0",
-				"evp_bytestokey": "^1.0.0",
-				"pbkdf2": "^3.0.3",
-				"safe-buffer": "^5.1.1"
+		"node_modules/strip-final-newline": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"parse-conflict-json": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/parse-conflict-json/-/parse-conflict-json-2.0.2.tgz",
-			"integrity": "sha512-jDbRGb00TAPFsKWCpZZOT93SxVP9nONOSgES3AevqRq/CHvavEBvKAjxX9p5Y5F0RZLxH9Ufd9+RwtCsa+lFDA==",
-			"dev": true,
-			"requires": {
-				"json-parse-even-better-errors": "^2.3.1",
-				"just-diff": "^5.0.1",
-				"just-diff-apply": "^5.2.0"
+		"node_modules/strip-indent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+			"dependencies": {
+				"min-indent": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"parse-entities": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.1.2.tgz",
-			"integrity": "sha512-5N9lmQ7tmxfXf+hO3X6KRG6w7uYO/HL9fHalSySTdyn63C3WNvTM/1R8tn1u1larNcEbo3Slcy2bsVDQqvEpUg==",
+		"node_modules/strip-json-comments": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.0.tgz",
+			"integrity": "sha512-V1LGY4UUo0jgwC+ELQ2BNWfPa17TIuwBLg+j1AA/9RPzKINl1lhxVEu2r+ZTTO8aetIsUzE5Qj6LMSBkoGYKKw==",
 			"dev": true,
-			"requires": {
-				"character-entities": "^1.0.0",
-				"character-entities-legacy": "^1.0.0",
-				"character-reference-invalid": "^1.0.0",
-				"is-alphanumerical": "^1.0.0",
-				"is-decimal": "^1.0.0",
-				"is-hexadecimal": "^1.0.0"
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"parse-json": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-			"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-			"dev": true,
-			"requires": {
-				"@babel/code-frame": "^7.0.0",
-				"error-ex": "^1.3.1",
-				"json-parse-even-better-errors": "^2.3.0",
-				"lines-and-columns": "^1.1.6"
+		"node_modules/strip-outer": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
+			"integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
+			"dependencies": {
+				"escape-string-regexp": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"parse-passwd": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-			"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
-			"dev": true
+		"node_modules/strnum": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
 		},
-		"parse-path": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz",
-			"integrity": "sha512-Euf9GG8WT9CdqwuWJGdf3RkUcTBArppHABkO7Lm8IzRQp0e2r/kkFnmhu4TSK30Wcu5rVAZLmfPKSBBi9tWFog==",
+		"node_modules/strong-log-transformer": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
+			"integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
 			"dev": true,
-			"requires": {
-				"protocols": "^2.0.0"
+			"dependencies": {
+				"duplexer": "^0.1.1",
+				"minimist": "^1.2.0",
+				"through": "^2.3.4"
+			},
+			"bin": {
+				"sl-log-transformer": "bin/sl-log-transformer.js"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"parse-url": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/parse-url/-/parse-url-8.1.0.tgz",
-			"integrity": "sha512-xDvOoLU5XRrcOZvnI6b8zA6n9O9ejNk/GExuz1yBuWUGn9KA97GI6HTs6u02wKara1CeVmZhH+0TZFdWScR89w==",
+		"node_modules/style-loader": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
+			"integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
 			"dev": true,
-			"requires": {
-				"parse-path": "^7.0.0"
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
 			}
 		},
-		"parseurl": {
-			"version": "1.3.3",
-			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+		"node_modules/style-search": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+			"integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg=="
 		},
-		"pascal-case": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3"
+		"node_modules/stylehacks": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz",
+			"integrity": "sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"postcss-selector-parser": "^6.0.4"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
 			}
 		},
-		"pascalcase": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-			"integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
-		},
-		"patch-package": {
-			"version": "6.2.2",
-			"resolved": "https://registry.npmjs.org/patch-package/-/patch-package-6.2.2.tgz",
-			"integrity": "sha512-YqScVYkVcClUY0v8fF0kWOjDYopzIM8e3bj/RU1DPeEF14+dCGm6UeOYm4jvCyxqIEQ5/eJzmbWfDWnUleFNMg==",
-			"dev": true,
-			"requires": {
-				"@yarnpkg/lockfile": "^1.1.0",
-				"chalk": "^2.4.2",
-				"cross-spawn": "^6.0.5",
-				"find-yarn-workspace-root": "^1.2.1",
-				"fs-extra": "^7.0.1",
-				"is-ci": "^2.0.0",
-				"klaw-sync": "^6.0.0",
-				"minimist": "^1.2.0",
-				"rimraf": "^2.6.3",
-				"semver": "^5.6.0",
-				"slash": "^2.0.0",
-				"tmp": "^0.0.33"
-			},
-			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"dev": true,
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					}
-				},
-				"fs-extra": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-					"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.1.2",
-						"jsonfile": "^4.0.0",
-						"universalify": "^0.1.0"
-					}
+		"node_modules/stylelint": {
+			"version": "16.8.2",
+			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.2.tgz",
+			"integrity": "sha512-fInKATippQhcSm7AB+T32GpI+626yohrg33GkFT/5jzliUw5qhlwZq2UQQwgl3HsHrf09oeARi0ZwgY/UWEv9A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/stylelint"
 				},
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
-				},
-				"slash": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-					"integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-					"dev": true
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/stylelint"
 				}
+			],
+			"dependencies": {
+				"@csstools/css-parser-algorithms": "^3.0.0",
+				"@csstools/css-tokenizer": "^3.0.0",
+				"@csstools/media-query-list-parser": "^3.0.0",
+				"@csstools/selector-specificity": "^4.0.0",
+				"@dual-bundle/import-meta-resolve": "^4.1.0",
+				"balanced-match": "^2.0.0",
+				"colord": "^2.9.3",
+				"cosmiconfig": "^9.0.0",
+				"css-functions-list": "^3.2.2",
+				"css-tree": "^2.3.1",
+				"debug": "^4.3.6",
+				"fast-glob": "^3.3.2",
+				"fastest-levenshtein": "^1.0.16",
+				"file-entry-cache": "^9.0.0",
+				"global-modules": "^2.0.0",
+				"globby": "^11.1.0",
+				"globjoin": "^0.1.4",
+				"html-tags": "^3.3.1",
+				"ignore": "^5.3.2",
+				"imurmurhash": "^0.1.4",
+				"is-plain-object": "^5.0.0",
+				"known-css-properties": "^0.34.0",
+				"mathml-tag-names": "^2.1.3",
+				"meow": "^13.2.0",
+				"micromatch": "^4.0.7",
+				"normalize-path": "^3.0.0",
+				"picocolors": "^1.0.1",
+				"postcss": "^8.4.41",
+				"postcss-resolve-nested-selector": "^0.1.6",
+				"postcss-safe-parser": "^7.0.0",
+				"postcss-selector-parser": "^6.1.2",
+				"postcss-value-parser": "^4.2.0",
+				"resolve-from": "^5.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^7.1.0",
+				"supports-hyperlinks": "^3.0.0",
+				"svg-tags": "^1.0.0",
+				"table": "^6.8.2",
+				"write-file-atomic": "^5.0.1"
+			},
+			"bin": {
+				"stylelint": "bin/stylelint.mjs"
+			},
+			"engines": {
+				"node": ">=18.12.0"
 			}
 		},
-		"path-browserify": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
-			"integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
-			"dev": true
-		},
-		"path-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
-			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
-			"requires": {
-				"dot-case": "^3.0.4",
-				"tslib": "^2.0.3"
-			}
+		"node_modules/stylelint/node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
 		},
-		"path-dirname": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-			"integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-			"dev": true
+		"node_modules/stylelint/node_modules/balanced-match": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+			"integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA=="
 		},
-		"path-exists": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-			"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+		"node_modules/stylelint/node_modules/cosmiconfig": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+			"integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+			"dependencies": {
+				"env-paths": "^2.2.1",
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
 		},
-		"path-is-absolute": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-			"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+		"node_modules/stylelint/node_modules/css-tree": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+			"dependencies": {
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+			}
 		},
-		"path-is-inside": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-			"integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
-			"dev": true
+		"node_modules/stylelint/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
 		},
-		"path-key": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-			"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+		"node_modules/stylelint/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
-		"path-parse": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+		"node_modules/stylelint/node_modules/fast-glob": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
 		},
-		"path-to-regexp": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-			"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-			"dev": true
+		"node_modules/stylelint/node_modules/file-entry-cache": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.1.0.tgz",
+			"integrity": "sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==",
+			"license": "MIT",
+			"dependencies": {
+				"flat-cache": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
 		},
-		"path-type": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-			"integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-			"dev": true,
-			"requires": {
-				"pify": "^3.0.0"
+		"node_modules/stylelint/node_modules/flat-cache": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz",
+			"integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==",
+			"dependencies": {
+				"flatted": "^3.3.1",
+				"keyv": "^4.5.4"
 			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/stylelint/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 			"dependencies": {
-				"pify": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-					"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-					"dev": true
-				}
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"pbkdf2": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
-			"integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
-			"dev": true,
-			"requires": {
-				"create-hash": "^1.1.2",
-				"create-hmac": "^1.1.4",
-				"ripemd160": "^2.0.1",
-				"safe-buffer": "^5.0.1",
-				"sha.js": "^2.4.8"
+		"node_modules/stylelint/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"pegjs": {
-			"version": "0.10.0",
-			"resolved": "https://registry.npmjs.org/pegjs/-/pegjs-0.10.0.tgz",
-			"integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0="
+		"node_modules/stylelint/node_modules/ignore": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+			"engines": {
+				"node": ">= 4"
+			}
 		},
-		"pend": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-			"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-			"dev": true
+		"node_modules/stylelint/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"performance-now": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-			"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-			"dev": true
+		"node_modules/stylelint/node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
 		},
-		"phpegjs": {
-			"version": "1.0.0-beta7",
-			"resolved": "https://registry.npmjs.org/phpegjs/-/phpegjs-1.0.0-beta7.tgz",
-			"integrity": "sha1-uLbthQGYB//Q7+ID4AKj5e2LTZQ="
+		"node_modules/stylelint/node_modules/mdn-data": {
+			"version": "2.0.30",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
-		"picocolors": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+		"node_modules/stylelint/node_modules/meow": {
+			"version": "13.2.0",
+			"resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+			"integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"picomatch": {
-			"version": "2.0.7",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.0.7.tgz",
-			"integrity": "sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA=="
+		"node_modules/stylelint/node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
 		},
-		"pidtree": {
-			"version": "0.3.1",
-			"resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz",
-			"integrity": "sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==",
-			"dev": true
+		"node_modules/stylelint/node_modules/postcss": {
+			"version": "8.4.47",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+			"integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.1.0",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
 		},
-		"pify": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-			"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-			"dev": true
+		"node_modules/stylelint/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
-		"pinkie": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-			"integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-			"dev": true
+		"node_modules/stylelint/node_modules/resolve-from": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+			"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"pinkie-promise": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-			"integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-			"dev": true,
-			"requires": {
-				"pinkie": "^2.0.0"
+		"node_modules/stylelint/node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"pirates": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-			"integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
-			"requires": {
-				"node-modules-regexp": "^1.0.0"
+		"node_modules/stylelint/node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"pkg-dir": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-			"integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-			"dev": true,
-			"requires": {
-				"find-up": "^2.1.0"
+		"node_modules/stylelint/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"platform": {
-			"version": "1.3.5",
-			"resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz",
-			"integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==",
-			"dev": true
+		"node_modules/stylelint/node_modules/string-width/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"please-upgrade-node": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-			"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-			"dev": true,
-			"requires": {
-				"semver-compare": "^1.0.0"
+		"node_modules/stylelint/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
-		"plist": {
-			"version": "3.0.6",
-			"resolved": "https://registry.npmjs.org/plist/-/plist-3.0.6.tgz",
-			"integrity": "sha512-WiIVYyrp8TD4w8yCvyeIr+lkmrGRd5u0VbRnU+tP/aRLxP/YadJUYOMZJ/6hIa3oUyVCsycXvtNRgd5XBJIbiA==",
-			"requires": {
-				"base64-js": "^1.5.1",
-				"xmlbuilder": "^15.1.1"
+		"node_modules/stylelint/node_modules/strip-ansi/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
 			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/stylelint/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dependencies": {
-				"base64-js": {
-					"version": "1.5.1",
-					"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-					"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
-				},
-				"xmlbuilder": {
-					"version": "15.1.1",
-					"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
-					"integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg=="
-				}
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"plur": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/plur/-/plur-4.0.0.tgz",
-			"integrity": "sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==",
-			"dev": true,
-			"requires": {
-				"irregular-plurals": "^3.2.0"
+		"node_modules/stylelint/node_modules/supports-hyperlinks": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz",
+			"integrity": "sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==",
+			"dependencies": {
+				"has-flag": "^4.0.0",
+				"supports-color": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14.18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"pnp-webpack-plugin": {
-			"version": "1.6.4",
-			"resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
-			"integrity": "sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==",
-			"dev": true,
-			"requires": {
-				"ts-pnp": "^1.1.6"
+		"node_modules/stylelint/node_modules/write-file-atomic": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+			"integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+			"dependencies": {
+				"imurmurhash": "^0.1.4",
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"polished": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/polished/-/polished-4.1.3.tgz",
-			"integrity": "sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.14.0"
+		"node_modules/stylis": {
+			"version": "4.0.13",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+			"integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+		},
+		"node_modules/sudo-prompt": {
+			"version": "9.2.1",
+			"resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
+			"integrity": "sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw=="
+		},
+		"node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
 			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/supports-hyperlinks": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+			"integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/runtime": {
-					"version": "7.14.6",
-					"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-					"integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-					"dev": true,
-					"requires": {
-						"regenerator-runtime": "^0.13.4"
-					}
-				}
+				"has-flag": "^4.0.0",
+				"supports-color": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"popmotion": {
-			"version": "11.0.3",
-			"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
-			"integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
-			"requires": {
-				"framesync": "6.0.1",
-				"hey-listen": "^1.0.8",
-				"style-value-types": "5.0.0",
-				"tslib": "^2.1.0"
+		"node_modules/supports-hyperlinks/node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"portfinder": {
-			"version": "1.0.28",
-			"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-			"integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-			"dev": true,
-			"requires": {
-				"async": "^2.6.2",
-				"debug": "^3.1.1",
-				"mkdirp": "^0.5.5"
-			},
+		"node_modules/supports-hyperlinks/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dependencies": {
-				"async": {
-					"version": "2.6.4",
-					"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-					"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.14"
-					}
-				},
-				"debug": {
-					"version": "3.2.7",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-					"integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
-				"mkdirp": {
-					"version": "0.5.5",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-					"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.5"
-					}
-				},
-				"ms": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-					"dev": true
-				}
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"posix-character-classes": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-			"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
-		},
-		"postcss": {
-			"version": "8.4.16",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-			"integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
-			"dev": true,
-			"requires": {
-				"nanoid": "^3.3.4",
-				"picocolors": "^1.0.0",
-				"source-map-js": "^1.0.2"
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"engines": {
+				"node": ">= 0.4"
 			},
-			"dependencies": {
-				"nanoid": {
-					"version": "3.3.4",
-					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-					"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"postcss-calc": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz",
-			"integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==",
-			"dev": true,
-			"requires": {
-				"postcss-selector-parser": "^6.0.2",
-				"postcss-value-parser": "^4.0.2"
+		"node_modules/svg-parser": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+			"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+		},
+		"node_modules/svg-tags": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+			"integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA=="
+		},
+		"node_modules/svgo": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+			"integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+			"dependencies": {
+				"@trysound/sax": "0.2.0",
+				"commander": "^7.2.0",
+				"css-select": "^5.1.0",
+				"css-tree": "^2.2.1",
+				"csso": "^5.0.5",
+				"picocolors": "^1.0.0"
+			},
+			"bin": {
+				"svgo": "bin/svgo"
 			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/svgo"
+			}
+		},
+		"node_modules/svgo/node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/svgo/node_modules/css-tree": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
-		"postcss-colormin": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
-			"integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
+		"node_modules/svgo/node_modules/mdn-data": {
+			"version": "2.0.30",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
+		},
+		"node_modules/svgo/node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/swc-loader": {
+			"version": "0.2.6",
+			"resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.6.tgz",
+			"integrity": "sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.6",
-				"caniuse-api": "^3.0.0",
-				"colord": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"@swc/counter": "^0.1.3"
+			},
+			"peerDependencies": {
+				"@swc/core": "^1.2.147",
+				"webpack": ">=2"
 			}
 		},
-		"postcss-convert-values": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz",
-			"integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==",
+		"node_modules/symbol-observable": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+			"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0"
-			},
-			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"postcss-discard-comments": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-			"integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-			"dev": true
+		"node_modules/symbol-tree": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
 		},
-		"postcss-discard-duplicates": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-			"integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
+		"node_modules/synchronous-promise": {
+			"version": "2.0.17",
+			"resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+			"integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
 			"dev": true
 		},
-		"postcss-discard-empty": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-			"integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-			"dev": true
+		"node_modules/synckit": {
+			"version": "0.8.5",
+			"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
+			"integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+			"dependencies": {
+				"@pkgr/utils": "^2.3.1",
+				"tslib": "^2.5.0"
+			},
+			"engines": {
+				"node": "^14.18.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/unts"
+			}
 		},
-		"postcss-discard-overridden": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-			"integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-			"dev": true
+		"node_modules/table": {
+			"version": "6.8.2",
+			"resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
+			"integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
+			"dependencies": {
+				"ajv": "^8.0.1",
+				"lodash.truncate": "^4.4.2",
+				"slice-ansi": "^4.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/table/node_modules/astral-regex": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+			"integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/table/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
-		"postcss-flexbugs-fixes": {
-			"version": "4.2.1",
-			"resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz",
-			"integrity": "sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==",
-			"dev": true,
-			"requires": {
-				"postcss": "^7.0.26"
-			},
-			"dependencies": {
-				"picocolors": {
-					"version": "0.2.1",
-					"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-					"integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-					"dev": true
-				},
-				"postcss": {
-					"version": "7.0.39",
-					"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-					"integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-					"dev": true,
-					"requires": {
-						"picocolors": "^0.2.1",
-						"source-map": "^0.6.1"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+		"node_modules/table/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"postcss-loader": {
-			"version": "6.2.1",
-			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
-			"integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
-			"dev": true,
-			"requires": {
-				"cosmiconfig": "^7.0.0",
-				"klona": "^2.0.5",
-				"semver": "^7.3.5"
-			},
+		"node_modules/table/node_modules/slice-ansi": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+			"integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
 			"dependencies": {
-				"klona": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
-					"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==",
-					"dev": true
-				}
+				"ansi-styles": "^4.0.0",
+				"astral-regex": "^2.0.0",
+				"is-fullwidth-code-point": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/slice-ansi?sponsor=1"
 			}
 		},
-		"postcss-media-query-parser": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
-			"integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
-			"dev": true
-		},
-		"postcss-merge-longhand": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz",
-			"integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==",
-			"dev": true,
-			"requires": {
-				"css-color-names": "^1.0.1",
-				"postcss-value-parser": "^4.1.0",
-				"stylehacks": "^5.0.1"
+		"node_modules/table/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/tannin": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/tannin/-/tannin-1.2.0.tgz",
+			"integrity": "sha512-U7GgX/RcSeUETbV7gYgoz8PD7Ni4y95pgIP/Z6ayI3CfhSujwKEBlGFTCRN+Aqnuyf4AN2yHL+L8x+TCGjb9uA==",
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"@tannin/plural-forms": "^1.1.0"
 			}
 		},
-		"postcss-merge-rules": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.2.tgz",
-			"integrity": "sha512-5K+Md7S3GwBewfB4rjDeol6V/RZ8S+v4B66Zk2gChRqLTCC8yjnHQ601omj9TKftS19OPGqZ/XzoqpzNQQLwbg==",
+		"node_modules/tapable": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+			"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.6",
-				"caniuse-api": "^3.0.0",
-				"cssnano-utils": "^2.0.1",
-				"postcss-selector-parser": "^6.0.5",
-				"vendors": "^1.0.3"
-			},
-			"dependencies": {
-				"postcss-selector-parser": {
-					"version": "6.0.6",
-					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-					"integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-					"dev": true,
-					"requires": {
-						"cssesc": "^3.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				}
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"postcss-minify-font-values": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
-			"integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
+		"node_modules/tar": {
+			"version": "6.1.11",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+			"integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
+				"minipass": "^3.0.0",
+				"minizlib": "^2.1.1",
+				"mkdirp": "^1.0.3",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"postcss-minify-gradients": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.1.tgz",
-			"integrity": "sha512-odOwBFAIn2wIv+XYRpoN2hUV3pPQlgbJ10XeXPq8UY2N+9ZG42xu45lTn/g9zZ+d70NKSQD6EOi6UiCMu3FN7g==",
+		"node_modules/tar-fs": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+			"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
 			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"is-color-stop": "^1.1.0",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"chownr": "^1.1.1",
+				"mkdirp-classic": "^0.5.2",
+				"pump": "^3.0.0",
+				"tar-stream": "^2.1.4"
 			}
 		},
-		"postcss-minify-params": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz",
-			"integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==",
+		"node_modules/tar-fs/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
 			"dev": true,
-			"requires": {
-				"alphanum-sort": "^1.0.2",
-				"browserslist": "^4.16.0",
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0",
-				"uniqs": "^2.0.0"
-			},
+			"license": "MIT",
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
 			}
 		},
-		"postcss-minify-selectors": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
-			"integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
+		"node_modules/tar-stream": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+			"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
 			"dev": true,
-			"requires": {
-				"alphanum-sort": "^1.0.2",
-				"postcss-selector-parser": "^6.0.5"
-			},
 			"dependencies": {
-				"postcss-selector-parser": {
-					"version": "6.0.6",
-					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-					"integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-					"dev": true,
-					"requires": {
-						"cssesc": "^3.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				}
+				"bl": "^4.0.3",
+				"end-of-stream": "^1.4.1",
+				"fs-constants": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"postcss-modules-extract-imports": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-			"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-			"dev": true
-		},
-		"postcss-modules-local-by-default": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-			"integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+		"node_modules/tar-stream/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
 			"dev": true,
-			"requires": {
-				"icss-utils": "^5.0.0",
-				"postcss-selector-parser": "^6.0.2",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				}
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"postcss-modules-scope": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-			"integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+		"node_modules/tar/node_modules/chownr": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
 			"dev": true,
-			"requires": {
-				"postcss-selector-parser": "^6.0.4"
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"postcss-modules-values": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-			"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+		"node_modules/tar/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
 			"dev": true,
-			"requires": {
-				"icss-utils": "^5.0.0"
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"postcss-normalize-charset": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-			"integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
+		"node_modules/tar/node_modules/yallist": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 			"dev": true
 		},
-		"postcss-normalize-display-values": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
-			"integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
+		"node_modules/teen_process": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/teen_process/-/teen_process-2.0.2.tgz",
+			"integrity": "sha512-8Be+s0d3XIs6rosilYTYR8/TY4JfAl8Der8ItWhI/o/MTYGLTcjvNUNk5AU8c1eTpJ98MF0xextE8VJtqhtUcg==",
 			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"@babel/runtime": "7.19.0",
+				"bluebird": "3.7.2",
+				"lodash": "4.17.21",
+				"shell-quote": "1.7.3",
+				"source-map-support": "0.5.21",
+				"which": "2.0.2"
+			},
+			"engines": {
+				"node": ">=14",
+				"npm": ">=6"
 			}
 		},
-		"postcss-normalize-positions": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
-			"integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
+		"node_modules/teen_process/node_modules/@babel/runtime": {
+			"version": "7.19.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
+			"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"regenerator-runtime": "^0.13.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"postcss-normalize-repeat-style": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
-			"integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
+		"node_modules/teen_process/node_modules/shell-quote": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
+			"integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==",
+			"dev": true
+		},
+		"node_modules/teen_process/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
 			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"postcss-normalize-string": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
-			"integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
+		"node_modules/telejson": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
+			"integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"memoizerific": "^1.11.3"
 			}
 		},
-		"postcss-normalize-timing-functions": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
-			"integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
-			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
-			},
+		"node_modules/temp": {
+			"version": "0.8.4",
+			"resolved": "https://registry.npmjs.org/temp/-/temp-0.8.4.tgz",
+			"integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"rimraf": "~2.6.2"
+			},
+			"engines": {
+				"node": ">=6.0.0"
 			}
 		},
-		"postcss-normalize-unicode": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
-			"integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
+		"node_modules/temp-dir": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+			"integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.0",
-				"postcss-value-parser": "^4.1.0"
-			},
-			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"postcss-normalize-url": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz",
-			"integrity": "sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==",
-			"dev": true,
-			"requires": {
-				"is-absolute-url": "^3.0.3",
-				"normalize-url": "^6.0.1",
-				"postcss-value-parser": "^4.1.0"
+		"node_modules/temp/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/temp/node_modules/rimraf": {
+			"version": "2.6.3",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+			"integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
 			"dependencies": {
-				"normalize-url": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-					"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-					"dev": true
-				},
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
 			}
 		},
-		"postcss-normalize-whitespace": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
-			"integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
+		"node_modules/tempy": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/tempy/-/tempy-1.0.1.tgz",
+			"integrity": "sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"del": "^6.0.0",
+				"is-stream": "^2.0.0",
+				"temp-dir": "^2.0.0",
+				"type-fest": "^0.16.0",
+				"unique-string": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"postcss-ordered-values": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz",
-			"integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==",
+		"node_modules/tempy/node_modules/del": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+			"integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
 			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
-			},
 			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+				"globby": "^11.0.1",
+				"graceful-fs": "^4.2.4",
+				"is-glob": "^4.0.1",
+				"is-path-cwd": "^2.2.0",
+				"is-path-inside": "^3.0.2",
+				"p-map": "^4.0.0",
+				"rimraf": "^3.0.2",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"postcss-reduce-initial": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz",
-			"integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==",
+		"node_modules/tempy/node_modules/is-path-inside": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.0",
-				"caniuse-api": "^3.0.0"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"postcss-reduce-transforms": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
-			"integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
+		"node_modules/tempy/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
 			"dev": true,
-			"requires": {
-				"cssnano-utils": "^2.0.1",
-				"postcss-value-parser": "^4.1.0"
+			"engines": {
+				"node": ">=8"
 			},
-			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"postcss-resolve-nested-selector": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
-			"integrity": "sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=",
-			"dev": true
-		},
-		"postcss-safe-parser": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-			"dev": true
-		},
-		"postcss-selector-parser": {
-			"version": "6.0.4",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
-			"integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+		"node_modules/tempy/node_modules/temp-dir": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+			"integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
 			"dev": true,
-			"requires": {
-				"cssesc": "^3.0.0",
-				"indexes-of": "^1.0.1",
-				"uniq": "^1.0.1",
-				"util-deprecate": "^1.0.2"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"postcss-svgo": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.2.tgz",
-			"integrity": "sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==",
+		"node_modules/tempy/node_modules/type-fest": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+			"integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
 			"dev": true,
-			"requires": {
-				"postcss-value-parser": "^4.1.0",
-				"svgo": "^2.3.0"
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"postcss-value-parser": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-					"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"postcss-unique-selectors": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz",
-			"integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==",
-			"dev": true,
-			"requires": {
-				"alphanum-sort": "^1.0.2",
-				"postcss-selector-parser": "^6.0.5",
-				"uniqs": "^2.0.0"
-			},
-			"dependencies": {
-				"postcss-selector-parser": {
-					"version": "6.0.6",
-					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-					"integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-					"dev": true,
-					"requires": {
-						"cssesc": "^3.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				}
+		"node_modules/terminal-link": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.0.0.tgz",
+			"integrity": "sha512-rdBAY35jUvVapqCuhehjenLbYY73cVgRQ6podD6u9EDBomBBHjCOtmq2InPgPpTysOIOsQ5PdBzwSC/sKjv6ew==",
+			"dependencies": {
+				"ansi-escapes": "^4.2.1",
+				"supports-hyperlinks": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"postcss-value-parser": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
-		},
-		"prelude-ls": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-			"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-			"dev": true
+		"node_modules/terser": {
+			"version": "5.32.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz",
+			"integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==",
+			"dependencies": {
+				"@jridgewell/source-map": "^0.3.3",
+				"acorn": "^8.8.2",
+				"commander": "^2.20.0",
+				"source-map-support": "~0.5.20"
+			},
+			"bin": {
+				"terser": "bin/terser"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"prettier": {
-			"version": "npm:wp-prettier@2.6.2",
-			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.6.2.tgz",
-			"integrity": "sha512-AV33EzqiFJ3fj+mPlKABN59YFPReLkDxQnj067Z3uEOeRQf3g05WprL0RDuqM7UBhSRo9W1rMSC2KvZmjE5UOA==",
-			"dev": true
+		"node_modules/terser-webpack-plugin": {
+			"version": "5.3.10",
+			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+			"integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.20",
+				"jest-worker": "^27.4.5",
+				"schema-utils": "^3.1.1",
+				"serialize-javascript": "^6.0.1",
+				"terser": "^5.26.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			},
+			"peerDependenciesMeta": {
+				"@swc/core": {
+					"optional": true
+				},
+				"esbuild": {
+					"optional": true
+				},
+				"uglify-js": {
+					"optional": true
+				}
+			}
 		},
-		"prettier-linter-helpers": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-			"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-			"dev": true,
-			"requires": {
-				"fast-diff": "^1.1.2"
+		"node_modules/terser-webpack-plugin/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"pretty-error": {
+		"node_modules/terser-webpack-plugin/node_modules/has-flag": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-			"integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
-			"dev": true,
-			"requires": {
-				"lodash": "^4.17.20",
-				"renderkid": "^3.0.0"
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"pretty-format": {
-			"version": "26.6.2",
-			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-			"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-			"requires": {
-				"@jest/types": "^26.6.2",
-				"ansi-regex": "^5.0.0",
-				"ansi-styles": "^4.0.0",
-				"react-is": "^17.0.1"
+		"node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+			"version": "27.5.1",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+			"integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+			"dependencies": {
+				"@types/node": "*",
+				"merge-stream": "^2.0.0",
+				"supports-color": "^8.0.0"
 			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
 			"dependencies": {
-				"@jest/types": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-					"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^15.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/istanbul-reports": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-					"integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-					"requires": {
-						"@types/istanbul-lib-report": "*"
-					}
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-				}
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"pretty-hrtime": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-			"integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
-			"dev": true
+		"node_modules/terser-webpack-plugin/node_modules/serialize-javascript": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+			"dependencies": {
+				"randombytes": "^2.1.0"
+			}
 		},
-		"prismjs": {
-			"version": "1.24.1",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.24.1.tgz",
-			"integrity": "sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow==",
-			"dev": true
+		"node_modules/terser-webpack-plugin/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
 		},
-		"private": {
-			"version": "0.1.8",
-			"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
-			"integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+		"node_modules/terser/node_modules/acorn": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+			"integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
 		},
-		"proc-log": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
-			"integrity": "sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==",
-			"dev": true
+		"node_modules/terser/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
 		},
-		"process": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-			"integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-			"dev": true
+		"node_modules/test-exclude": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+			"integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+			"dependencies": {
+				"@istanbuljs/schema": "^0.1.2",
+				"glob": "^7.1.4",
+				"minimatch": "^3.0.4"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"process-nextick-args": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-			"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+		"node_modules/test-exclude/node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
 		},
-		"progress": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-			"integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-			"dev": true
+		"node_modules/text-extensions": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
+			"integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10"
+			}
 		},
-		"promise-all-reject-late": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz",
-			"integrity": "sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw==",
+		"node_modules/text-hex": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
+			"integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==",
 			"dev": true
 		},
-		"promise-call-limit": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/promise-call-limit/-/promise-call-limit-1.0.1.tgz",
-			"integrity": "sha512-3+hgaa19jzCGLuSCbieeRsu5C2joKfYn8pY6JAuXFRVfF4IO+L7UPpFWNTeWT9pM7uhskvbPPd/oEOktCn317Q==",
-			"dev": true
+		"node_modules/text-table": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
 		},
-		"promise-inflight": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-			"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
-			"dev": true
+		"node_modules/third-party-web": {
+			"version": "0.23.4",
+			"resolved": "https://registry.npmjs.org/third-party-web/-/third-party-web-0.23.4.tgz",
+			"integrity": "sha512-kwYnSZRhEvv0SBW2fp8SBBKRglMoBjV8xz6C31m0ewqOtknB5UL+Ihg+M81hyFY5ldkZuGWPb+e4GVDkzf/gYg=="
 		},
-		"promise-retry": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
-			"integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
-			"dev": true,
-			"requires": {
-				"err-code": "^2.0.2",
-				"retry": "^0.12.0"
-			}
+		"node_modules/throat": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
+			"integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="
 		},
-		"promise.allsettled": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/promise.allsettled/-/promise.allsettled-1.0.5.tgz",
-			"integrity": "sha512-tVDqeZPoBC0SlzJHzWGZ2NKAguVq2oiYj7gbggbiTvH2itHohijTp7njOUA0aQ/nl+0lr/r6egmhoYu63UZ/pQ==",
-			"dev": true,
-			"requires": {
-				"array.prototype.map": "^1.0.4",
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1",
-				"get-intrinsic": "^1.1.1",
-				"iterate-value": "^1.0.2"
-			},
-			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
-			}
+		"node_modules/through": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+			"integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
 		},
-		"promise.prototype.finally": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/promise.prototype.finally/-/promise.prototype.finally-3.1.3.tgz",
-			"integrity": "sha512-EXRF3fC9/0gz4qkt/f5EP5iW4kj9oFpBICNpCNOb/52+8nlHIX07FPLbi/q4qYBQ1xZqivMzTpNQSnArVASolQ==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1"
-			},
+		"node_modules/through2": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+			"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"readable-stream": "~2.3.6",
+				"xtend": "~4.0.1"
 			}
 		},
-		"prompts": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-			"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-			"dev": true,
-			"requires": {
-				"kleur": "^3.0.3",
-				"sisteransi": "^1.0.5"
-			}
+		"node_modules/thunky": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+			"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
 		},
-		"promzard": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-			"integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=",
+		"node_modules/timers-browserify": {
+			"version": "2.0.12",
+			"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+			"integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
 			"dev": true,
-			"requires": {
-				"read": "1"
+			"dependencies": {
+				"setimmediate": "^1.0.4"
+			},
+			"engines": {
+				"node": ">=0.6.0"
 			}
 		},
-		"prop-types": {
-			"version": "15.7.2",
-			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-			"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-			"requires": {
-				"loose-envify": "^1.4.0",
-				"object-assign": "^4.1.1",
-				"react-is": "^16.8.1"
-			}
+		"node_modules/tiny-emitter": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+			"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
 		},
-		"propagate": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/propagate/-/propagate-2.0.1.tgz",
-			"integrity": "sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==",
+		"node_modules/tiny-invariant": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+			"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
 			"dev": true
 		},
-		"property-information": {
-			"version": "5.6.0",
-			"resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
-			"integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
-			"dev": true,
-			"requires": {
-				"xtend": "^4.0.0"
+		"node_modules/titleize": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
+			"integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"proto-list": {
-			"version": "1.2.4",
-			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-			"integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
-			"dev": true
+		"node_modules/tldts": {
+			"version": "6.1.50",
+			"resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.50.tgz",
+			"integrity": "sha512-q9GOap6q3KCsLMdOjXhWU5jVZ8/1dIib898JBRLsN+tBhENpBDcAVQbE0epADOjw11FhQQy9AcbqKGBQPUfTQA==",
+			"dependencies": {
+				"tldts-core": "^6.1.50"
+			},
+			"bin": {
+				"tldts": "bin/cli.js"
+			}
 		},
-		"protocols": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
-			"integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
-			"dev": true
+		"node_modules/tldts-core": {
+			"version": "6.1.50",
+			"resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.50.tgz",
+			"integrity": "sha512-na2EcZqmdA2iV9zHV7OHQDxxdciEpxrjbkp+aHmZgnZKHzoElLajP59np5/4+sare9fQBfixgvXKx8ev1d7ytw=="
 		},
-		"proxy-addr": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-			"integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
-			"dev": true,
-			"requires": {
-				"forwarded": "~0.1.2",
-				"ipaddr.js": "1.9.1"
+		"node_modules/tmp": {
+			"version": "0.0.33",
+			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+			"integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+			"dependencies": {
+				"os-tmpdir": "~1.0.2"
+			},
+			"engines": {
+				"node": ">=0.6.0"
 			}
 		},
-		"proxy-compare": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
-			"integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ=="
-		},
-		"proxy-from-env": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-			"dev": true
+		"node_modules/tmpl": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+			"integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
 		},
-		"prr": {
+		"node_modules/to-arraybuffer": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-			"dev": true
-		},
-		"pseudomap": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-			"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-			"dev": true
-		},
-		"psl": {
-			"version": "1.1.28",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.1.28.tgz",
-			"integrity": "sha512-+AqO1Ae+N/4r7Rvchrdm432afjT9hqJRyBN3DQv9At0tPz4hIFSGKbq64fN9dVoCow4oggIIax5/iONx0r9hZw==",
+			"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+			"integrity": "sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==",
 			"dev": true
 		},
-		"public-encrypt": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-			"integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+		"node_modules/to-object-path": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+			"integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
 			"dev": true,
-			"requires": {
-				"bn.js": "^4.1.0",
-				"browserify-rsa": "^4.0.0",
-				"create-hash": "^1.1.0",
-				"parse-asn1": "^5.0.0",
-				"randombytes": "^2.0.1",
-				"safe-buffer": "^5.1.2"
+			"dependencies": {
+				"kind-of": "^3.0.2"
 			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/to-object-path/node_modules/kind-of": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+			"integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+			"dev": true,
 			"dependencies": {
-				"bn.js": {
-					"version": "4.12.0",
-					"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-					"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
-					"dev": true
-				}
+				"is-buffer": "^1.1.5"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"pump": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-			"integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+		"node_modules/to-regex": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+			"integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
 			"dev": true,
-			"requires": {
-				"end-of-stream": "^1.1.0",
-				"once": "^1.3.1"
+			"dependencies": {
+				"define-property": "^2.0.2",
+				"extend-shallow": "^3.0.2",
+				"regex-not": "^1.0.2",
+				"safe-regex": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"pumpify": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-			"integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+		"node_modules/to-regex-range": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+			"integrity": "sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==",
 			"dev": true,
-			"requires": {
-				"duplexify": "^3.6.0",
-				"inherits": "^2.0.3",
-				"pump": "^2.0.0"
+			"dependencies": {
+				"is-number": "^3.0.0",
+				"repeat-string": "^1.6.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"punycode": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-			"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+		"node_modules/tocbot": {
+			"version": "4.25.0",
+			"resolved": "https://registry.npmjs.org/tocbot/-/tocbot-4.25.0.tgz",
+			"integrity": "sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==",
 			"dev": true
 		},
-		"puppeteer-core": {
-			"version": "13.2.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-13.2.0.tgz",
-			"integrity": "sha512-EfQlh6osciVLf9dY0a/rLNE4DzaxfK+T97mYyd5opY9u2MyBrr8NbayBhK1NEDoUC1w+FYnNI1oZg2ybEF3MNQ==",
-			"dev": true,
-			"requires": {
-				"debug": "4.3.3",
-				"devtools-protocol": "0.0.960912",
-				"extract-zip": "2.0.1",
-				"https-proxy-agent": "5.0.0",
-				"node-fetch": "2.6.7",
-				"pkg-dir": "4.2.0",
-				"progress": "2.0.3",
-				"proxy-from-env": "1.1.0",
-				"rimraf": "3.0.2",
-				"tar-fs": "2.1.1",
-				"unbzip2-stream": "1.4.3",
-				"ws": "8.2.3"
-			},
-			"dependencies": {
-				"agent-base": {
-					"version": "6.0.2",
-					"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-					"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-					"dev": true,
-					"requires": {
-						"debug": "4"
-					}
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"extract-zip": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-					"integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-					"dev": true,
-					"requires": {
-						"@types/yauzl": "^2.9.1",
-						"debug": "^4.1.1",
-						"get-stream": "^5.1.0",
-						"yauzl": "^2.10.0"
-					}
-				},
-				"fd-slicer": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-					"integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-					"dev": true,
-					"requires": {
-						"pend": "~1.2.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"https-proxy-agent": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-					"integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
-					"dev": true,
-					"requires": {
-						"agent-base": "6",
-						"debug": "4"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"node-fetch": {
-					"version": "2.6.7",
-					"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-					"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-					"dev": true,
-					"requires": {
-						"whatwg-url": "^5.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"tr46": {
-					"version": "0.0.3",
-					"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-					"integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-					"dev": true
-				},
-				"webidl-conversions": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-					"integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-					"dev": true
-				},
-				"whatwg-url": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-					"integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
-					"dev": true,
-					"requires": {
-						"tr46": "~0.0.3",
-						"webidl-conversions": "^3.0.0"
-					}
-				},
-				"ws": {
-					"version": "8.2.3",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-					"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-					"dev": true
-				},
-				"yauzl": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-					"integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-					"dev": true,
-					"requires": {
-						"buffer-crc32": "~0.2.3",
-						"fd-slicer": "~1.1.0"
-					}
-				}
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"engines": {
+				"node": ">=0.6"
 			}
 		},
-		"puppeteer-testing-library": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/puppeteer-testing-library/-/puppeteer-testing-library-0.5.0.tgz",
-			"integrity": "sha512-x72CJwpbdJaGEjBEpUHqeNVdDu36Hoqt6yodnyL/msNN7IoioKS+3ZmwLw/DIiDZJujUAtq3qltbIehA+uGWHQ==",
-			"dev": true,
-			"requires": {
-				"jest-diff": "^26.6.2"
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"q": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-			"integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-			"dev": true
+		"node_modules/tough-cookie": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+			"integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+			"dependencies": {
+				"tldts": "^6.1.32"
+			},
+			"engines": {
+				"node": ">=16"
+			}
 		},
-		"qs": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-			"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-			"dev": true
+		"node_modules/tr46": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
-		"query-string": {
-			"version": "6.14.1",
-			"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.14.1.tgz",
-			"integrity": "sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==",
-			"requires": {
-				"decode-uri-component": "^0.2.0",
-				"filter-obj": "^1.1.0",
-				"split-on-first": "^1.0.0",
-				"strict-uri-encode": "^2.0.0"
+		"node_modules/tree-kill": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+			"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+			"bin": {
+				"tree-kill": "cli.js"
 			}
 		},
-		"querystring": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+		"node_modules/trim": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+			"integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==",
+			"deprecated": "Use String.prototype.trim() instead"
 		},
-		"querystring-es3": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-			"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
-			"dev": true
+		"node_modules/trim-newlines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+			"integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"quick-lru": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-			"integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-			"dev": true
+		"node_modules/trim-repeated": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
+			"integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
+			"dependencies": {
+				"escape-string-regexp": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"ramda": {
-			"version": "0.28.0",
-			"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz",
-			"integrity": "sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==",
-			"dev": true
+		"node_modules/trim-trailing-lines": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.1.tgz",
+			"integrity": "sha512-bWLv9BbWbbd7mlqqs2oQYnLD/U/ZqeJeJwbO0FG2zA1aTq+HTvxfHNKFa/HGCVyJpDiioUYaBhfiT6rgk+l4mg=="
 		},
-		"randombytes": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+		"node_modules/triple-beam": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz",
+			"integrity": "sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==",
 			"dev": true,
-			"requires": {
-				"safe-buffer": "^5.1.0"
+			"engines": {
+				"node": ">= 14.0.0"
 			}
 		},
-		"randomfill": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-			"integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+		"node_modules/trough": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.3.tgz",
+			"integrity": "sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw=="
+		},
+		"node_modules/truncate-utf8-bytes": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+			"integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==",
 			"dev": true,
-			"requires": {
-				"randombytes": "^2.0.5",
-				"safe-buffer": "^5.1.0"
+			"dependencies": {
+				"utf8-byte-length": "^1.0.1"
 			}
 		},
-		"range-parser": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+		"node_modules/ts-api-utils": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+			"integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.2.0"
+			}
 		},
-		"raw-body": {
-			"version": "2.4.0",
-			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-			"integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+		"node_modules/ts-dedent": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+			"integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
 			"dev": true,
-			"requires": {
-				"bytes": "3.1.0",
-				"http-errors": "1.7.2",
-				"iconv-lite": "0.4.24",
-				"unpipe": "1.0.0"
-			},
-			"dependencies": {
-				"http-errors": {
-					"version": "1.7.2",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-					"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.1",
-						"statuses": ">= 1.5.0 < 2",
-						"toidentifier": "1.0.0"
-					}
-				},
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				},
-				"setprototypeof": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-					"integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-					"dev": true
-				},
-				"statuses": {
-					"version": "1.5.0",
-					"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-					"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=6.10"
 			}
 		},
-		"raw-loader": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
-			"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+		"node_modules/ts-node": {
+			"version": "9.1.1",
+			"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-9.1.1.tgz",
+			"integrity": "sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==",
 			"dev": true,
-			"requires": {
-				"loader-utils": "^2.0.0",
-				"schema-utils": "^3.0.0"
+			"dependencies": {
+				"arg": "^4.1.0",
+				"create-require": "^1.1.0",
+				"diff": "^4.0.1",
+				"make-error": "^1.1.1",
+				"source-map-support": "^0.5.17",
+				"yn": "3.1.1"
+			},
+			"bin": {
+				"ts-node": "dist/bin.js",
+				"ts-node-script": "dist/bin-script.js",
+				"ts-node-transpile-only": "dist/bin-transpile.js",
+				"ts-script": "dist/bin-script-deprecated.js"
 			},
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"typescript": ">=2.7"
+			}
+		},
+		"node_modules/tsconfig-paths": {
+			"version": "3.15.0",
+			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+			"integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				}
+				"@types/json5": "^0.0.29",
+				"json5": "^1.0.2",
+				"minimist": "^1.2.6",
+				"strip-bom": "^3.0.0"
 			}
 		},
-		"re-resizable": {
-			"version": "6.9.0",
-			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.0.tgz",
-			"integrity": "sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==",
-			"requires": {
-				"fast-memoize": "^2.5.1"
+		"node_modules/tsconfig-paths/node_modules/json5": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+			"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+			"dependencies": {
+				"minimist": "^1.2.0"
+			},
+			"bin": {
+				"json5": "lib/cli.js"
 			}
 		},
-		"react": {
-			"version": "17.0.2",
-			"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-			"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
-			"requires": {
-				"loose-envify": "^1.1.0",
-				"object-assign": "^4.1.1"
+		"node_modules/tsconfig-paths/node_modules/strip-bom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+			"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"react-autosize-textarea": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz",
-			"integrity": "sha512-BHpjCDkuOlllZn3nLazY2F8oYO1tS2jHnWhcjTWQdcKiiMU6gHLNt/fzmqMSyerR0eTdKtfSIqtSeTtghNwS+g==",
-			"requires": {
-				"autosize": "^4.0.2",
-				"line-height": "^0.3.1",
-				"prop-types": "^15.5.6"
+		"node_modules/tslib": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
+			"integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+			"license": "0BSD"
+		},
+		"node_modules/tsutils": {
+			"version": "3.21.0",
+			"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+			"integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+			"dependencies": {
+				"tslib": "^1.8.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			},
+			"peerDependencies": {
+				"typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
 			}
 		},
-		"react-colorful": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.3.1.tgz",
-			"integrity": "sha512-nkP1w1LGe8PzhtOQO10xSDTsMWAYVj/Wm5c7ORk7CBngjCE7hHsknFRtosT5qMYkwWs8wSiU0sBwZ8dyzRbNEQ=="
+		"node_modules/tsutils/node_modules/tslib": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
 		},
-		"react-devtools-core": {
-			"version": "4.21.0",
-			"resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.21.0.tgz",
-			"integrity": "sha512-clGWwJHV5MHwTwYyKc+7FZHwzdbzrD2/AoZSkicUcr6YLc3Za9a9FaLhccWDHfjQ+ron9yzNhDT6Tv+FiPkD3g==",
-			"requires": {
-				"shell-quote": "^1.6.1",
-				"ws": "^7"
+		"node_modules/tty-browserify": {
+			"version": "0.0.0",
+			"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+			"integrity": "sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==",
+			"dev": true
+		},
+		"node_modules/tuf-js": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-1.1.7.tgz",
+			"integrity": "sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==",
+			"dev": true,
+			"dependencies": {
+				"@tufjs/models": "1.0.4",
+				"debug": "^4.3.4",
+				"make-fetch-happen": "^11.1.1"
+			},
+			"engines": {
+				"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
 			}
 		},
-		"react-docgen": {
-			"version": "5.4.1",
-			"resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-5.4.1.tgz",
-			"integrity": "sha512-TZqD1aApirw86NV6tHrmDoxUn8wlinkVyutFarzbdwuhEurAzDN0y5sSj64o+BrHLPqjwpH9tunpfwgy+3Uyww==",
-			"dev": true,
-			"requires": {
-				"@babel/core": "^7.7.5",
-				"@babel/generator": "^7.12.11",
-				"@babel/runtime": "^7.7.6",
-				"ast-types": "^0.14.2",
-				"commander": "^2.19.0",
-				"doctrine": "^3.0.0",
-				"estree-to-babel": "^3.1.0",
-				"neo-async": "^2.6.1",
-				"node-dir": "^0.1.10",
-				"strip-indent": "^3.0.0"
+		"node_modules/tunnel": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+			"integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+			"engines": {
+				"node": ">=0.6.11 <=0.7.0 || >=0.7.3"
+			}
+		},
+		"node_modules/tunnel-agent": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+			"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"safe-buffer": "^5.0.1"
 			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/type-check": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+			"integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
 			"dependencies": {
-				"commander": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-					"dev": true
-				},
-				"doctrine": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-					"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-					"dev": true,
-					"requires": {
-						"esutils": "^2.0.2"
-					}
-				},
-				"strip-indent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-					"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-					"dev": true,
-					"requires": {
-						"min-indent": "^1.0.0"
-					}
-				}
+				"prelude-ls": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"react-docgen-typescript": {
-			"version": "2.2.2",
-			"resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
-			"integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
-			"dev": true
+		"node_modules/type-detect": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+			"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"react-dom": {
-			"version": "17.0.2",
-			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-			"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-			"requires": {
-				"loose-envify": "^1.1.0",
-				"object-assign": "^4.1.1",
-				"scheduler": "^0.20.2"
+		"node_modules/type-fest": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+			"integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"react-easy-crop": {
-			"version": "4.5.1",
-			"resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-4.5.1.tgz",
-			"integrity": "sha512-MVzCWmKXTwZTK0iYqlF/gPLdLqvUGrLGX7SQ4g+DO3b/lCiVAwxZKLeZ1wjDfG+r/yEWUoL7At5a0kkDJeU+rQ==",
-			"requires": {
-				"normalize-wheel": "^1.0.1",
-				"tslib": "2.0.1"
-			},
+		"node_modules/type-is": {
+			"version": "1.6.18",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
 			"dependencies": {
-				"tslib": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-					"integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-				}
+				"media-typer": "0.3.0",
+				"mime-types": "~2.1.24"
+			},
+			"engines": {
+				"node": ">= 0.6"
 			}
 		},
-		"react-element-to-jsx-string": {
-			"version": "14.3.4",
-			"resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.4.tgz",
-			"integrity": "sha512-t4ZwvV6vwNxzujDQ+37bspnLwA4JlgUPWhLjBJWsNIDceAf6ZKUTCjdm08cN6WeZ5pTMKiCJkmAYnpmR4Bm+dg==",
-			"dev": true,
-			"requires": {
-				"@base2/pretty-print-object": "1.0.1",
-				"is-plain-object": "5.0.0",
-				"react-is": "17.0.2"
-			},
+		"node_modules/typed-array-buffer": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
+			"integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
 			"dependencies": {
-				"is-plain-object": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-					"dev": true
-				},
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"call-bind": "^1.0.2",
+				"get-intrinsic": "^1.2.1",
+				"is-typed-array": "^1.1.10"
+			},
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
-		"react-fast-compare": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-			"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==",
-			"dev": true
+		"node_modules/typed-array-byte-length": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
+			"integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"for-each": "^0.3.3",
+				"has-proto": "^1.0.1",
+				"is-typed-array": "^1.1.10"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"react-freeze": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
-			"integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g=="
+		"node_modules/typed-array-byte-offset": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
+			"integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+			"dependencies": {
+				"available-typed-arrays": "^1.0.5",
+				"call-bind": "^1.0.2",
+				"for-each": "^0.3.3",
+				"has-proto": "^1.0.1",
+				"is-typed-array": "^1.1.10"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"react-input-autosize": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
-			"integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
-			"dev": true,
-			"requires": {
-				"prop-types": "^15.5.8"
+		"node_modules/typed-array-length": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+			"integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+			"dependencies": {
+				"call-bind": "^1.0.2",
+				"for-each": "^0.3.3",
+				"is-typed-array": "^1.1.9"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"react-inspector": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
-			"integrity": "sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==",
+		"node_modules/typed-function": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/typed-function/-/typed-function-2.1.0.tgz",
+			"integrity": "sha512-bctQIOqx2iVbWGDGPWwIm18QScpu2XRmkC19D8rQGFsjKSgteq/o1hTZvIG/wuDq8fanpBDrLkLq+aEN/6y5XQ==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.0.0",
-				"is-dom": "^1.0.0",
-				"prop-types": "^15.0.0"
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"react-is": {
-			"version": "16.8.4",
-			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
-			"integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA=="
+		"node_modules/typed-query-selector": {
+			"version": "2.12.0",
+			"resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
+			"integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg=="
 		},
-		"react-lifecycles-compat": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-			"dev": true
-		},
-		"react-native": {
-			"version": "0.66.2",
-			"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.66.2.tgz",
-			"integrity": "sha512-d5Kp23kqAH0EmcyxyfjAr4rhVVzyK/J0cZ/JuopX16CBD4Nkad65KcJi1pyOpbhpP9L1aUUs+mRyK5kg0uLqJQ==",
-			"requires": {
-				"@jest/create-cache-key-function": "^27.0.1",
-				"@react-native-community/cli": "^6.0.0",
-				"@react-native-community/cli-platform-android": "^6.0.0",
-				"@react-native-community/cli-platform-ios": "^6.0.0",
-				"@react-native/assets": "1.0.0",
-				"@react-native/normalize-color": "1.0.0",
-				"@react-native/polyfills": "2.0.0",
-				"abort-controller": "^3.0.0",
-				"anser": "^1.4.9",
-				"base64-js": "^1.1.2",
-				"event-target-shim": "^5.0.1",
-				"hermes-engine": "~0.9.0",
-				"invariant": "^2.2.4",
-				"jsc-android": "^250230.2.1",
-				"metro-babel-register": "0.66.2",
-				"metro-react-native-babel-transformer": "0.66.2",
-				"metro-runtime": "0.66.2",
-				"metro-source-map": "0.66.2",
-				"nullthrows": "^1.1.1",
-				"pretty-format": "^26.5.2",
-				"promise": "^8.0.3",
-				"prop-types": "^15.7.2",
-				"react-devtools-core": "^4.13.0",
-				"react-native-codegen": "^0.0.7",
-				"react-refresh": "^0.4.0",
-				"regenerator-runtime": "^0.13.2",
-				"scheduler": "^0.20.2",
-				"stacktrace-parser": "^0.1.3",
-				"use-subscription": "^1.0.0",
-				"whatwg-fetch": "^3.0.0",
-				"ws": "^6.1.4"
-			},
+		"node_modules/typedarray": {
+			"version": "0.0.6",
+			"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+			"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+		},
+		"node_modules/typedarray-to-buffer": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+			"integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
 			"dependencies": {
-				"promise": {
-					"version": "8.1.0",
-					"resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
-					"integrity": "sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==",
-					"requires": {
-						"asap": "~2.0.6"
-					}
-				},
-				"react-refresh": {
-					"version": "0.4.3",
-					"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
-					"integrity": "sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA=="
-				},
-				"ws": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-					"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
-					"requires": {
-						"async-limiter": "~1.0.0"
-					}
-				}
+				"is-typedarray": "^1.0.0"
 			}
 		},
-		"react-native-animatable": {
-			"version": "1.3.3",
-			"resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
-			"integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
-			"requires": {
-				"prop-types": "^15.7.2"
+		"node_modules/typedoc": {
+			"version": "0.23.28",
+			"resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.23.28.tgz",
+			"integrity": "sha512-9x1+hZWTHEQcGoP7qFmlo4unUoVJLB0H/8vfO/7wqTnZxg4kPuji9y3uRzEu0ZKez63OJAUmiGhUrtukC6Uj3w==",
+			"dev": true,
+			"dependencies": {
+				"lunr": "^2.3.9",
+				"marked": "^4.2.12",
+				"minimatch": "^7.1.3",
+				"shiki": "^0.14.1"
+			},
+			"bin": {
+				"typedoc": "bin/typedoc"
+			},
+			"engines": {
+				"node": ">= 14.14"
+			},
+			"peerDependencies": {
+				"typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x"
 			}
 		},
-		"react-native-codegen": {
-			"version": "0.0.7",
-			"resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.0.7.tgz",
-			"integrity": "sha512-dwNgR8zJ3ALr480QnAmpTiqvFo+rDtq6V5oCggKhYFlRjzOmVSFn3YD41u8ltvKS5G2nQ8gCs2vReFFnRGLYng==",
-			"requires": {
-				"flow-parser": "^0.121.0",
-				"jscodeshift": "^0.11.0",
-				"nullthrows": "^1.1.1"
+		"node_modules/typedoc-plugin-markdown": {
+			"version": "3.14.0",
+			"resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-3.14.0.tgz",
+			"integrity": "sha512-UyQLkLRkfTFhLdhSf3RRpA3nNInGn+k6sll2vRXjflaMNwQAAiB61SYbisNZTg16t4K1dt1bPQMMGLrxS0GZ0Q==",
+			"dev": true,
+			"dependencies": {
+				"handlebars": "^4.7.7"
+			},
+			"peerDependencies": {
+				"typedoc": ">=0.23.0"
 			}
 		},
-		"react-native-fast-image": {
-			"version": "8.5.11",
-			"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz",
-			"integrity": "sha512-cNW4bIJg3nvKaheG8vGMfqCt5LMWX9MS5+wMudgKIHbGO51spRr4sgnlhVgwHLcZ5aeNOVJ8CPRxDIWKRq/0QA=="
-		},
-		"react-native-gesture-handler": {
-			"version": "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",
-			"integrity": "sha512-+3mILQmvf4cyqyOBTjeFqv2XnoYJgyXudSF3zfzPrlaGvRnWUO8N4LXnsmRvJktMtA6jhtoQx7TgbYQIe+hlBQ==",
-			"requires": {
-				"@egjs/hammerjs": "^2.0.17",
-				"hoist-non-react-statics": "^3.3.0",
-				"invariant": "^2.2.4",
-				"lodash": "^4.17.21",
-				"prop-types": "^15.7.2"
+		"node_modules/typedoc-plugin-resolve-crossmodule-references": {
+			"version": "0.3.3",
+			"resolved": "https://registry.npmjs.org/typedoc-plugin-resolve-crossmodule-references/-/typedoc-plugin-resolve-crossmodule-references-0.3.3.tgz",
+			"integrity": "sha512-ZWWBy2WR8z9a6iXYGlyB3KrpV+JDdZv1mndYU6Eh6mInrfMCrQJi3Y5K9ihMBfuaBGB//le1nEmQLgzU3IO+dw==",
+			"deprecated": "Upgrade to typedoc >= 0.24 and remove typedoc-plugin-resolve-crossmodule-references from your dependencies",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"typedoc": ">=0.22 <=0.23"
 			}
 		},
-		"react-native-get-random-values": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.4.0.tgz",
-			"integrity": "sha512-NnmEZcC5zfz+QEytFPM/fw818Hodw/BNbv7jGxU4pla4K2K9DCzG83IReMJqQ2wo552AYKguqrBG2SSn/U6rbA==",
-			"requires": {
-				"fast-base64-decode": "^1.0.0"
+		"node_modules/typedoc/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"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"
-		},
-		"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",
-			"integrity": "sha512-p8wQ5R9CG6uVJMu8BkRRUsIhPgJnc05TjLA+y5R/RxNE+OvT4VczIjPAeQ78w41YBba9zawGTiPIDOaGwZN0nw==",
-			"requires": {
-				"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",
-				"tinycolor2": "^1.4.1"
+		"node_modules/typedoc/node_modules/minimatch": {
+			"version": "7.4.6",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+			"integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
-		"react-native-iphone-x-helper": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
-			"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
-		},
-		"react-native-keyboard-aware-scroll-view": {
-			"version": "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",
-			"integrity": "sha512-gp0xGZvr4TKFW5K5HM2uPsSsbSdONOlajEZohWVxLJJyVSToyaptt/amJrvkpWFqlqtcE9k22iEO/vzpnAgNRw==",
-			"requires": {
-				"prop-types": "^15.6.2",
-				"react-native-iphone-x-helper": "^1.0.3"
+		"node_modules/typescript": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+			"integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
 			}
 		},
-		"react-native-linear-gradient": {
-			"version": "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",
-			"integrity": "sha512-Xq/ABki6/zz6ejut2wPWrh2ZV9Cw5NhHsFcB1adhY/Z2YIVyAVnpApwhMWVV6BxbtKcl17eMPR6vpOI5Q76BjA=="
-		},
-		"react-native-modal": {
-			"version": "11.10.0",
-			"resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.10.0.tgz",
-			"integrity": "sha512-syRYDJYSh16bR37R5EKU9T/wC+5bEOfF17IUqf5URdhbEDd+hxyMInC++l45E8oI+MtdOaEp9yAws5xDqk8dnA==",
-			"requires": {
-				"prop-types": "^15.6.2",
-				"react-native-animatable": "1.3.3"
-			}
+		"node_modules/uc.micro": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
 		},
-		"react-native-prompt-android": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-prompt-android/v1.0.0-wp-3/react-native-prompt-android-1.0.0-wp-3.tgz",
-			"integrity": "sha512-JyNcFTqyQh1YVOTMamH29/wzspXH1+AlDbxiuW07gkhdw0BspCdq2P0Vf6JzPdiDxhv/v1+ix4t6RjAKGWulGQ=="
+		"node_modules/ufo": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
+			"integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
+			"dev": true
 		},
-		"react-native-reanimated": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-reanimated/2.4.1-wp-4/react-native-reanimated-2.4.1-wp-4.tgz",
-			"integrity": "sha512-kPA7eM0Rn96ZzKId4QPaBnJ8UwC7NwT/CrruszF7fY+Xb1DGAY3vP7ZJu1ZsNbsxdK2ERNWZ9bnocXop4QV7cg==",
-			"requires": {
-				"@babel/plugin-transform-object-assign": "^7.10.4",
-				"@types/invariant": "^2.2.35",
-				"invariant": "^2.2.4",
-				"lodash.isequal": "^4.5.0",
-				"mockdate": "^3.0.2",
-				"react-native-screens": "^3.4.0",
-				"string-hash-64": "^1.0.3"
-			},
-			"dependencies": {
-				"react-native-screens": {
-					"version": "3.18.1",
-					"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.18.1.tgz",
-					"integrity": "sha512-GtEC1AbvpvtKDJldavuONF/hXW1aEZO7qz8SioyHrV9L9/nDiy+iTviMFmeEoix9KwmEHHxoYxc0xiDrFxKHyA==",
-					"requires": {
-						"react-freeze": "^1.0.0",
-						"warn-once": "^0.1.0"
-					}
-				}
+		"node_modules/uglify-js": {
+			"version": "3.13.7",
+			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.7.tgz",
+			"integrity": "sha512-1Psi2MmnZJbnEsgJJIlfnd7tFlJfitusmR7zDI8lXlFI0ACD4/Rm/xdrU8bh6zF0i74aiVoBtkRiFulkrmh3AA==",
+			"dev": true,
+			"optional": true,
+			"bin": {
+				"uglifyjs": "bin/uglifyjs"
+			},
+			"engines": {
+				"node": ">=0.8.0"
 			}
 		},
-		"react-native-safe-area": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/react-native-safe-area/-/react-native-safe-area-0.5.1.tgz",
-			"integrity": "sha512-gBLv93P90sM6hk5HzUwTXzFuSDazTpg2ONi5iL9pnUsUfwdw2L9SKgjgVroxX10leGB9+0zz6/ycV+mItqr8OQ==",
-			"requires": {
-				"@types/react": "^16.8.8"
-			},
+		"node_modules/unbox-primitive": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+			"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
 			"dependencies": {
-				"@types/react": {
-					"version": "16.14.24",
-					"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.24.tgz",
-					"integrity": "sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==",
-					"requires": {
-						"@types/prop-types": "*",
-						"@types/scheduler": "*",
-						"csstype": "^3.0.2"
-					}
-				}
+				"call-bind": "^1.0.2",
+				"has-bigints": "^1.0.2",
+				"has-symbols": "^1.0.3",
+				"which-boxed-primitive": "^1.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"react-native-safe-area-context": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.2.0.tgz",
-			"integrity": "sha512-k2Nty4PwSnrg9HwrYeeE+EYqViYJoOFwEy9LxL5RIRfoqxAq/uQXNGwpUg2/u4gnKpBbEPa9eRh15KKMe/VHkA=="
-		},
-		"react-native-sass-transformer": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/react-native-sass-transformer/-/react-native-sass-transformer-1.4.0.tgz",
-			"integrity": "sha512-PlRiaJIcDzYpIVDH0OQuabkMGy/zp7N/A14rqhBrFqhADXC0xR2W53Cb7CicL9CsOL4y7Sh2dv4pgMvqgMdwqQ==",
-			"requires": {
-				"app-root-path": "^2.1.0",
-				"css-to-react-native-transform": "^1.8.1",
-				"semver": "^5.6.0"
-			},
+		"node_modules/unbzip2-stream": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+			"integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
 			"dependencies": {
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-				}
+				"buffer": "^5.2.1",
+				"through": "^2.3.8"
 			}
 		},
-		"react-native-screens": {
-			"version": "2.9.0",
-			"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz",
-			"integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg=="
-		},
-		"react-native-svg": {
-			"version": "9.13.6",
-			"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.13.6.tgz",
-			"integrity": "sha512-vjjuJhEhQCwWjqsgWyGy6/C/LIBM2REDxB40FU1PMhi8T3zQUwUHnA6M15pJKlQG8vaZyA+QnLyIVhjtujRgig==",
-			"requires": {
-				"css-select": "^2.0.2",
-				"css-tree": "^1.0.0-alpha.37"
-			},
-			"dependencies": {
-				"css-select": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-					"integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^3.2.1",
-						"domutils": "^1.7.0",
-						"nth-check": "^1.0.2"
-					}
+		"node_modules/unbzip2-stream/node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"css-what": {
-					"version": "3.4.2",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-					"integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"domutils": {
-					"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"
-					}
-				},
-				"nth-check": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-					"integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-					"requires": {
-						"boolbase": "~1.0.0"
-					}
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
 			}
 		},
-		"react-native-url-polyfill": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-1.1.2.tgz",
-			"integrity": "sha512-RPYwjW+4udnAf26xUCQP2dn4t2tnRFo3Ii4s/hy7Ivpe7xYtXp7CMVX505CR8X3p0f8NKmOJ4MQEFMMnbd/Y/Q==",
-			"requires": {
-				"buffer": "^5.4.3",
-				"whatwg-url-without-unicode": "8.0.0-1"
-			},
+		"node_modules/undici": {
+			"version": "5.28.4",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+			"integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+			"license": "MIT",
 			"dependencies": {
-				"buffer": {
-					"version": "5.5.0",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",
-					"integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",
-					"requires": {
-						"base64-js": "^1.0.2",
-						"ieee754": "^1.1.4"
-					}
-				}
+				"@fastify/busboy": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.0"
 			}
 		},
-		"react-native-video": {
-			"version": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-4/react-native-video-5.2.0-wp-4.tgz",
-			"integrity": "sha512-Y/kCq6hGDOMkT4VLuGtSgJaCF5QWUIipYvqTpgLaPXF33tT9evqTtKXt6OjSFyuaoxXv9rrxaNoN70Fai2A91Q==",
-			"requires": {
-				"prop-types": "^15.7.2"
-			}
+		"node_modules/undici-types": {
+			"version": "5.26.5",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
 		},
-		"react-native-webview": {
-			"version": "11.6.2",
-			"resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-11.6.2.tgz",
-			"integrity": "sha512-7e5ltLBgqt1mX0gdTTS2nFPIjfS6y300wqJ4rLWqU71lDO+8ZeayfsF5qo83qxo2Go74CtLnSeWae4pdGwUqYw==",
-			"requires": {
-				"escape-string-regexp": "2.0.0",
-				"invariant": "2.2.4"
-			},
+		"node_modules/unherit": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
+			"integrity": "sha512-+XZuV691Cn4zHsK0vkKYwBEwB74T3IZIcxrgn2E4rKwTfFyI1zCh7X7grwh9Re08fdPlarIdyWgI8aVB3F5A5g==",
 			"dependencies": {
-				"escape-string-regexp": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-					"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
-				}
+				"inherits": "^2.0.1",
+				"xtend": "^4.0.1"
 			}
 		},
-		"react-popper": {
-			"version": "2.2.5",
-			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
-			"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
-			"dev": true,
-			"requires": {
-				"react-fast-compare": "^3.0.1",
-				"warning": "^4.0.2"
+		"node_modules/unicode-canonical-property-names-ecmascript": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+			"integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"react-popper-tooltip": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz",
-			"integrity": "sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.12.5",
-				"@popperjs/core": "^2.5.4",
-				"react-popper": "^2.2.4"
+		"node_modules/unicode-match-property-ecmascript": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+			"integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+			"license": "MIT",
+			"dependencies": {
+				"unicode-canonical-property-names-ecmascript": "^2.0.0",
+				"unicode-property-aliases-ecmascript": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"react-refresh": {
-			"version": "0.10.0",
-			"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.10.0.tgz",
-			"integrity": "sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==",
-			"dev": true
+		"node_modules/unicode-match-property-value-ecmascript": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
+			"integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
 		},
-		"react-select": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/react-select/-/react-select-3.2.0.tgz",
-			"integrity": "sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.4.4",
-				"@emotion/cache": "^10.0.9",
-				"@emotion/core": "^10.0.9",
-				"@emotion/css": "^10.0.9",
-				"memoize-one": "^5.0.0",
-				"prop-types": "^15.6.0",
-				"react-input-autosize": "^3.0.0",
-				"react-transition-group": "^4.3.0"
-			},
-			"dependencies": {
-				"@emotion/cache": {
-					"version": "10.0.29",
-					"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-					"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-					"dev": true,
-					"requires": {
-						"@emotion/sheet": "0.9.4",
-						"@emotion/stylis": "0.8.5",
-						"@emotion/utils": "0.11.3",
-						"@emotion/weak-memoize": "0.2.5"
-					}
-				},
-				"@emotion/css": {
-					"version": "10.0.27",
-					"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-					"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-					"dev": true,
-					"requires": {
-						"@emotion/serialize": "^0.11.15",
-						"@emotion/utils": "0.11.3",
-						"babel-plugin-emotion": "^10.0.27"
-					},
-					"dependencies": {
-						"@emotion/serialize": {
-							"version": "0.11.16",
-							"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-							"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-							"dev": true,
-							"requires": {
-								"@emotion/hash": "0.8.0",
-								"@emotion/memoize": "0.7.4",
-								"@emotion/unitless": "0.7.5",
-								"@emotion/utils": "0.11.3",
-								"csstype": "^2.5.7"
-							}
-						}
-					}
-				},
-				"@emotion/utils": {
-					"version": "0.11.3",
-					"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-					"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-					"dev": true
-				},
-				"csstype": {
-					"version": "2.6.19",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
-					"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==",
-					"dev": true
-				}
+		"node_modules/unicode-property-aliases-ecmascript": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+			"integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"react-shallow-renderer": {
-			"version": "16.14.1",
-			"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz",
-			"integrity": "sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==",
-			"dev": true,
-			"requires": {
-				"object-assign": "^4.1.1",
-				"react-is": "^16.12.0 || ^17.0.0"
-			},
+		"node_modules/unified": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-7.1.0.tgz",
+			"integrity": "sha512-lbk82UOIGuCEsZhPj8rNAkXSDXd6p0QLzIuSsCdxrqnqU56St4eyOB+AlXsVgVeRmetPTYydIuvFfpDIed8mqw==",
 			"dependencies": {
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"@types/unist": "^2.0.0",
+				"@types/vfile": "^3.0.0",
+				"bail": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^1.1.0",
+				"trough": "^1.0.0",
+				"vfile": "^3.0.0",
+				"x-is-string": "^0.1.0"
 			}
 		},
-		"react-sizeme": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-3.0.2.tgz",
-			"integrity": "sha512-xOIAOqqSSmKlKFJLO3inBQBdymzDuXx4iuwkNcJmC96jeiOg5ojByvL+g3MW9LPEsojLbC6pf68zOfobK8IPlw==",
-			"dev": true,
-			"requires": {
-				"element-resize-detector": "^1.2.2",
-				"invariant": "^2.2.4",
-				"shallowequal": "^1.1.0",
-				"throttle-debounce": "^3.0.1"
+		"node_modules/unified/node_modules/is-plain-obj": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+			"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"react-syntax-highlighter": {
-			"version": "13.5.3",
-			"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz",
-			"integrity": "sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==",
+		"node_modules/union-value": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+			"integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.3.1",
-				"highlight.js": "^10.1.1",
-				"lowlight": "^1.14.0",
-				"prismjs": "^1.21.0",
-				"refractor": "^3.1.0"
+			"dependencies": {
+				"arr-union": "^3.1.0",
+				"get-value": "^2.0.6",
+				"is-extendable": "^0.1.1",
+				"set-value": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"react-test-renderer": {
-			"version": "17.0.2",
-			"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz",
-			"integrity": "sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==",
+		"node_modules/unique-filename": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+			"integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
 			"dev": true,
-			"requires": {
-				"object-assign": "^4.1.1",
-				"react-is": "^17.0.2",
-				"react-shallow-renderer": "^16.13.1",
-				"scheduler": "^0.20.2"
-			},
 			"dependencies": {
-				"react-is": {
-					"version": "17.0.2",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-					"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-					"dev": true
-				}
+				"unique-slug": "^2.0.0"
 			}
 		},
-		"react-textarea-autosize": {
-			"version": "8.3.3",
-			"resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
-			"integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+		"node_modules/unique-slug": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+			"integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
 			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.10.2",
-				"use-composed-ref": "^1.0.0",
-				"use-latest": "^1.0.0"
+			"dependencies": {
+				"imurmurhash": "^0.1.4"
 			}
 		},
-		"react-transition-group": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-			"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.5",
-				"dom-helpers": "^5.0.1",
-				"loose-envify": "^1.4.0",
-				"prop-types": "^15.6.2"
+		"node_modules/unique-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+			"integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+			"dependencies": {
+				"crypto-random-string": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"read": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-			"integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=",
-			"dev": true,
-			"requires": {
-				"mute-stream": "~0.0.4"
-			}
+		"node_modules/unist-util-is": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+			"integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
 		},
-		"read-cmd-shim": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-3.0.1.tgz",
-			"integrity": "sha512-kEmDUoYf/CDy8yZbLTmhB1X9kkjf9Q80PCNsDMb7ufrGd6zZSQA1+UyjrO+pZm5K/S4OXCWJeiIt1JA8kAsa6g==",
-			"dev": true
+		"node_modules/unist-util-modify-children": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-1.1.2.tgz",
+			"integrity": "sha512-GRi04yhng1WqBf5RBzPkOtWAadcZS2gvuOgNn/cyJBYNxtTuyYqTKN0eg4rC1YJwGnzrqfRB3dSKm8cNCjNirg==",
+			"dependencies": {
+				"array-iterate": "^1.0.0"
+			}
 		},
-		"read-package-json": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-5.0.2.tgz",
-			"integrity": "sha512-BSzugrt4kQ/Z0krro8zhTwV1Kd79ue25IhNN/VtHFy1mG/6Tluyi+msc0UpwaoQzxSHa28mntAjIZY6kEgfR9Q==",
-			"dev": true,
-			"requires": {
-				"glob": "^8.0.1",
-				"json-parse-even-better-errors": "^2.3.1",
-				"normalize-package-data": "^4.0.0",
-				"npm-normalize-package-bin": "^2.0.0"
-			},
-			"dependencies": {
-				"brace-expansion": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-					"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-					"dev": true,
-					"requires": {
-						"balanced-match": "^1.0.0"
-					}
-				},
-				"glob": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-					"integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
-					"dev": true,
-					"requires": {
-						"fs.realpath": "^1.0.0",
-						"inflight": "^1.0.4",
-						"inherits": "2",
-						"minimatch": "^5.0.1",
-						"once": "^1.3.0"
-					}
-				},
-				"hosted-git-info": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-5.1.0.tgz",
-					"integrity": "sha512-Ek+QmMEqZF8XrbFdwoDjSbm7rT23pCgEMOJmz6GPk/s4yH//RQfNPArhIxbguNxROq/+5lNBwCDHMhA903Kx1Q==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^7.5.1"
-					}
-				},
-				"is-core-module": {
-					"version": "2.10.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
-					"integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"lru-cache": {
-					"version": "7.14.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.14.0.tgz",
-					"integrity": "sha512-EIRtP1GrSJny0dqb50QXRUNBxHJhcpxHC++M5tD7RYbvLLn5KVWKsbyswSSqDuU15UFi3bgTQIY8nhDMeF6aDQ==",
-					"dev": true
-				},
-				"minimatch": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
-					"integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
-					"dev": true,
-					"requires": {
-						"brace-expansion": "^2.0.1"
-					}
-				},
-				"normalize-package-data": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-4.0.1.tgz",
-					"integrity": "sha512-EBk5QKKuocMJhB3BILuKhmaPjI8vNRSpIfO9woLC6NyHVkKKdVEdAO1mrT0ZfxNR1lKwCcTkuZfmGIFdizZ8Pg==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^5.0.0",
-						"is-core-module": "^2.8.1",
-						"semver": "^7.3.5",
-						"validate-npm-package-license": "^3.0.4"
-					}
-				},
-				"npm-normalize-package-bin": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-2.0.0.tgz",
-					"integrity": "sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==",
-					"dev": true
-				},
-				"validate-npm-package-license": {
-					"version": "3.0.4",
-					"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-					"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-					"dev": true,
-					"requires": {
-						"spdx-correct": "^3.0.0",
-						"spdx-expression-parse": "^3.0.0"
-					}
-				}
+		"node_modules/unist-util-remove-position": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
+			"integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
+			"dependencies": {
+				"unist-util-visit": "^1.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
 			}
 		},
-		"read-package-json-fast": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-2.0.3.tgz",
-			"integrity": "sha512-W/BKtbL+dUjTuRL2vziuYhp76s5HZ9qQhd/dKfWIZveD0O40453QNyZhC0e63lqZrAQ4jiOapVoeJ7JrszenQQ==",
-			"dev": true,
-			"requires": {
-				"json-parse-even-better-errors": "^2.3.0",
-				"npm-normalize-package-bin": "^1.0.1"
+		"node_modules/unist-util-stringify-position": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
+			"integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
+		},
+		"node_modules/unist-util-visit": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+			"integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+			"dependencies": {
+				"unist-util-visit-parents": "^2.0.0"
 			}
 		},
-		"read-pkg": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-			"integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-			"dev": true,
-			"requires": {
-				"@types/normalize-package-data": "^2.4.0",
-				"normalize-package-data": "^2.5.0",
-				"parse-json": "^5.0.0",
-				"type-fest": "^0.6.0"
-			},
+		"node_modules/unist-util-visit-parents": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+			"integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
 			"dependencies": {
-				"normalize-package-data": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-					"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^2.1.4",
-						"resolve": "^1.10.0",
-						"semver": "2 || 3 || 4 || 5",
-						"validate-npm-package-license": "^3.0.1"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.6.0",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-					"integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-					"dev": true
-				}
+				"unist-util-is": "^3.0.0"
 			}
 		},
-		"read-pkg-up": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-			"integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+		"node_modules/universal-user-agent": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-2.1.0.tgz",
+			"integrity": "sha512-8itiX7G05Tu3mGDTdNY2fB4KJ8MgZLS54RdG6PkkfwMAavrXu1mV/lls/GABx9O3Rw4PnTtasxrvbMQoBYY92Q==",
 			"dev": true,
-			"requires": {
-				"find-up": "^4.1.0",
-				"read-pkg": "^5.2.0",
-				"type-fest": "^0.8.1"
-			},
 			"dependencies": {
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.8.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-					"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-					"dev": true
-				}
+				"os-name": "^3.0.0"
 			}
 		},
-		"readable-stream": {
-			"version": "2.3.6",
-			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
-			"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-			"requires": {
-				"core-util-is": "~1.0.0",
-				"inherits": "~2.0.3",
-				"isarray": "~1.0.0",
-				"process-nextick-args": "~2.0.0",
-				"safe-buffer": "~5.1.1",
-				"string_decoder": "~1.1.1",
-				"util-deprecate": "~1.0.1"
+		"node_modules/universalify": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+			"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+			"engines": {
+				"node": ">= 4.0.0"
 			}
 		},
-		"readdir-scoped-modules": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz",
-			"integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==",
+		"node_modules/unorm": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz",
+			"integrity": "sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==",
 			"dev": true,
-			"requires": {
-				"debuglog": "^1.0.1",
-				"dezalgo": "^1.0.0",
-				"graceful-fs": "^4.1.2",
-				"once": "^1.3.0"
+			"engines": {
+				"node": ">= 0.4.0"
 			}
 		},
-		"readdirp": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/unplugin": {
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.7.1.tgz",
+			"integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
 			"dev": true,
-			"requires": {
-				"picomatch": "^2.2.1"
-			},
 			"dependencies": {
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				}
+				"acorn": "^8.11.3",
+				"chokidar": "^3.5.3",
+				"webpack-sources": "^3.2.3",
+				"webpack-virtual-modules": "^0.6.1"
 			}
 		},
-		"readline": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz",
-			"integrity": "sha1-xYDXfvLPyHUrEySYBg3JeTp6wBw="
-		},
-		"reakit": {
-			"version": "1.3.8",
-			"resolved": "https://registry.npmjs.org/reakit/-/reakit-1.3.8.tgz",
-			"integrity": "sha512-8SVejx6FUaFi2+Q9eXoDAd4wWi/xAn6v8JgXH8x2xnzye8pb6v5bYvegACVpYVZnrS5w/JUgMTGh1Xy8MkkPww==",
-			"requires": {
-				"@popperjs/core": "^2.5.4",
-				"body-scroll-lock": "^3.1.5",
-				"reakit-system": "^0.15.1",
-				"reakit-utils": "^0.15.1",
-				"reakit-warning": "^0.6.1"
-			}
-		},
-		"reakit-system": {
-			"version": "0.15.1",
-			"resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.15.1.tgz",
-			"integrity": "sha512-PkqfAyEohtcEu/gUvKriCv42NywDtUgvocEN3147BI45dOFAB89nrT7wRIbIcKJiUT598F+JlPXAZZVLWhc1Kg==",
-			"requires": {
-				"reakit-utils": "^0.15.1"
-			}
-		},
-		"reakit-utils": {
-			"version": "0.15.1",
-			"resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.15.1.tgz",
-			"integrity": "sha512-6cZgKGvOkAMQgkwU9jdYbHfkuIN1Pr+vwcB19plLvcTfVN0Or10JhIuj9X+JaPZyI7ydqTDFaKNdUcDP69o/+Q=="
-		},
-		"reakit-warning": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.6.1.tgz",
-			"integrity": "sha512-poFUV0EyxB+CcV9uTNBAFmcgsnR2DzAbOTkld4Ul+QOKSeEHZB3b3+MoZQgcYHmbvG19Na1uWaM7ES+/Eyr8tQ==",
-			"requires": {
-				"reakit-utils": "^0.15.1"
-			}
-		},
-		"recast": {
-			"version": "0.20.5",
-			"resolved": "https://registry.npmjs.org/recast/-/recast-0.20.5.tgz",
-			"integrity": "sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==",
-			"requires": {
-				"ast-types": "0.14.2",
-				"esprima": "~4.0.0",
-				"source-map": "~0.6.1",
-				"tslib": "^2.0.1"
+		"node_modules/unplugin/node_modules/acorn": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+			"integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
 			},
-			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				}
+			"engines": {
+				"node": ">=0.4.0"
 			}
 		},
-		"redent": {
+		"node_modules/unplugin/node_modules/webpack-virtual-modules": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+			"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unset-value": {
 			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-			"integrity": "sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==",
+			"resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+			"integrity": "sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"indent-string": "^2.1.0",
-				"strip-indent": "^1.0.1"
-			},
-			"dependencies": {
-				"indent-string": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-					"integrity": "sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"repeating": "^2.0.0"
-					}
-				}
+			"dependencies": {
+				"has-value": "^0.3.1",
+				"isobject": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"redux": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
-			"integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
-			"requires": {
-				"@babel/runtime": "^7.9.2"
+		"node_modules/unset-value/node_modules/has-value": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+			"integrity": "sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==",
+			"dev": true,
+			"dependencies": {
+				"get-value": "^2.0.3",
+				"has-values": "^0.1.4",
+				"isobject": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"refractor": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/refractor/-/refractor-3.4.0.tgz",
-			"integrity": "sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg==",
-			"dev": true,
-			"requires": {
-				"hastscript": "^6.0.0",
-				"parse-entities": "^2.0.0",
-				"prismjs": "~1.24.0"
-			},
-			"dependencies": {
-				"parse-entities": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-					"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-					"dev": true,
-					"requires": {
-						"character-entities": "^1.0.0",
-						"character-entities-legacy": "^1.0.0",
-						"character-reference-invalid": "^1.0.0",
-						"is-alphanumerical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-hexadecimal": "^1.0.0"
-					}
-				}
+		"node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+			"integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
+			"dev": true,
+			"dependencies": {
+				"isarray": "1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"regenerate": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-			"integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
-		},
-		"regenerate-unicode-properties": {
-			"version": "8.2.0",
-			"resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-			"integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
-			"requires": {
-				"regenerate": "^1.4.0"
+		"node_modules/unset-value/node_modules/has-values": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+			"integrity": "sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"regenerator-runtime": {
-			"version": "0.13.7",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-			"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-		},
-		"regenerator-transform": {
-			"version": "0.14.4",
-			"resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.4.tgz",
-			"integrity": "sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==",
-			"requires": {
-				"@babel/runtime": "^7.8.4",
-				"private": "^0.1.8"
+		"node_modules/untildify": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
+			"integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"regex-not": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-			"integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-			"requires": {
-				"extend-shallow": "^3.0.2",
-				"safe-regex": "^1.1.0"
+		"node_modules/unzipper": {
+			"version": "0.10.14",
+			"resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+			"integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+			"dev": true,
+			"dependencies": {
+				"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"
 			}
 		},
-		"regexp.prototype.flags": {
-			"version": "1.3.0",
-			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
-			"integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+		"node_modules/unzipper/node_modules/bluebird": {
+			"version": "3.4.7",
+			"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+			"integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==",
+			"dev": true
+		},
+		"node_modules/upath": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+			"integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
 			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.17.0-next.1"
-			},
-			"dependencies": {
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.17.4",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
-					"integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==",
-					"dev": true,
-					"requires": {
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1",
-						"is-callable": "^1.1.5",
-						"is-regex": "^1.0.5",
-						"object-inspect": "^1.7.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.0",
-						"string.prototype.trimleft": "^2.1.1",
-						"string.prototype.trimright": "^2.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-					"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
-					"integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
-					"integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"object-inspect": {
-					"version": "1.7.0",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
-					"integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==",
-					"dev": true
+			"optional": true,
+			"engines": {
+				"node": ">=4",
+				"yarn": "*"
+			}
+		},
+		"node_modules/update-browserslist-db": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+			"integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
 				},
-				"string.prototype.trimleft": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz",
-					"integrity": "sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==",
-					"dev": true,
-					"requires": {
-						"define-properties": "^1.1.3",
-						"function-bind": "^1.1.1"
-					}
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
 				},
-				"string.prototype.trimright": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz",
-					"integrity": "sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==",
-					"dev": true,
-					"requires": {
-						"define-properties": "^1.1.3",
-						"function-bind": "^1.1.1"
-					}
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
 				}
+			],
+			"dependencies": {
+				"escalade": "^3.2.0",
+				"picocolors": "^1.1.0"
+			},
+			"bin": {
+				"update-browserslist-db": "cli.js"
+			},
+			"peerDependencies": {
+				"browserslist": ">= 4.21.0"
 			}
 		},
-		"regexpp": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
-			"integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
-			"dev": true
+		"node_modules/upper-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
 		},
-		"regexpu-core": {
-			"version": "4.7.1",
-			"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
-			"integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
-			"requires": {
-				"regenerate": "^1.4.0",
-				"regenerate-unicode-properties": "^8.2.0",
-				"regjsgen": "^0.5.1",
-				"regjsparser": "^0.6.4",
-				"unicode-match-property-ecmascript": "^1.0.4",
-				"unicode-match-property-value-ecmascript": "^1.2.0"
+		"node_modules/upper-case-first": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+			"dependencies": {
+				"tslib": "^2.0.3"
 			}
 		},
-		"regextras": {
-			"version": "0.8.0",
-			"resolved": "https://registry.npmjs.org/regextras/-/regextras-0.8.0.tgz",
-			"integrity": "sha512-k519uI04Z3SaY0fLX843MRXnDeG2+vHOFsyhiPZvNLe7r8rD2YNRjq4BQLZZ0oAr2NrtvZlICsXysGNFPGa3CQ==",
-			"dev": true
+		"node_modules/uri-js": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+			"dependencies": {
+				"punycode": "^2.1.0"
+			}
 		},
-		"regjsgen": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
-			"integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg=="
+		"node_modules/urix": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+			"integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
+			"deprecated": "Please see https://github.com/lydell/urix#deprecated"
 		},
-		"regjsparser": {
-			"version": "0.6.4",
-			"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
-			"integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
-			"requires": {
-				"jsesc": "~0.5.0"
+		"node_modules/url": {
+			"version": "0.11.4",
+			"resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
+			"integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"punycode": "^1.4.1",
+				"qs": "^6.12.3"
 			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/url-loader": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+			"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
 			"dependencies": {
-				"jsesc": {
-					"version": "0.5.0",
-					"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-					"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+				"loader-utils": "^2.0.0",
+				"mime-types": "^2.1.27",
+				"schema-utils": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"file-loader": "*",
+				"webpack": "^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"file-loader": {
+					"optional": true
 				}
 			}
 		},
-		"relateurl": {
-			"version": "0.2.7",
-			"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-			"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-			"dev": true
-		},
-		"remark": {
-			"version": "10.0.1",
-			"resolved": "https://registry.npmjs.org/remark/-/remark-10.0.1.tgz",
-			"integrity": "sha512-E6lMuoLIy2TyiokHprMjcWNJ5UxfGQjaMSMhV+f4idM625UjjK4j798+gPs5mfjzDE6vL0oFKVeZM6gZVSVrzQ==",
-			"dev": true,
-			"requires": {
-				"remark-parse": "^6.0.0",
-				"remark-stringify": "^6.0.0",
-				"unified": "^7.0.0"
+		"node_modules/url-loader/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"remark-external-links": {
-			"version": "8.0.0",
-			"resolved": "https://registry.npmjs.org/remark-external-links/-/remark-external-links-8.0.0.tgz",
-			"integrity": "sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==",
-			"dev": true,
-			"requires": {
-				"extend": "^3.0.0",
-				"is-absolute-url": "^3.0.0",
-				"mdast-util-definitions": "^4.0.0",
-				"space-separated-tokens": "^1.0.0",
-				"unist-util-visit": "^2.0.0"
-			},
+		"node_modules/url-loader/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
 			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
-				}
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"remark-footnotes": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz",
-			"integrity": "sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==",
+		"node_modules/url-template": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
+			"integrity": "sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==",
+			"dev": true
+		},
+		"node_modules/url/node_modules/punycode": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+			"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
 			"dev": true
 		},
-		"remark-mdx": {
-			"version": "1.6.22",
-			"resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.22.tgz",
-			"integrity": "sha512-phMHBJgeV76uyFkH4rvzCftLfKCr2RZuF+/gmVcaKrpsihyzmhXjA0BEMDaPTXG5y8qZOKPVo83NAOX01LPnOQ==",
+		"node_modules/url/node_modules/qs": {
+			"version": "6.13.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
 			"dev": true,
-			"requires": {
-				"@babel/core": "7.12.9",
-				"@babel/helper-plugin-utils": "7.10.4",
-				"@babel/plugin-proposal-object-rest-spread": "7.12.1",
-				"@babel/plugin-syntax-jsx": "7.12.1",
-				"@mdx-js/util": "1.6.22",
-				"is-alphabetical": "1.0.4",
-				"remark-parse": "8.0.3",
-				"unified": "9.2.0"
-			},
+			"license": "BSD-3-Clause",
 			"dependencies": {
-				"@babel/core": {
-					"version": "7.12.9",
-					"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz",
-					"integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.10.4",
-						"@babel/generator": "^7.12.5",
-						"@babel/helper-module-transforms": "^7.12.1",
-						"@babel/helpers": "^7.12.5",
-						"@babel/parser": "^7.12.7",
-						"@babel/template": "^7.12.7",
-						"@babel/traverse": "^7.12.9",
-						"@babel/types": "^7.12.7",
-						"convert-source-map": "^1.7.0",
-						"debug": "^4.1.0",
-						"gensync": "^1.0.0-beta.1",
-						"json5": "^2.1.2",
-						"lodash": "^4.17.19",
-						"resolve": "^1.3.2",
-						"semver": "^5.4.1",
-						"source-map": "^0.5.0"
-					}
-				},
-				"@babel/helper-plugin-utils": {
-					"version": "7.10.4",
-					"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-					"integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
-					"dev": true
-				},
-				"@babel/plugin-proposal-object-rest-spread": {
-					"version": "7.12.1",
-					"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
-					"integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-plugin-utils": "^7.10.4",
-						"@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-						"@babel/plugin-transform-parameters": "^7.12.1"
-					}
-				},
-				"@babel/plugin-syntax-jsx": {
-					"version": "7.12.1",
-					"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
-					"integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
-					"dev": true,
-					"requires": {
-						"@babel/helper-plugin-utils": "^7.10.4"
-					}
-				},
-				"convert-source-map": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-					"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "~5.1.1"
-					}
-				},
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"is-alphabetical": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-					"integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-					"dev": true
-				},
-				"is-buffer": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-					"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-					"dev": true
-				},
-				"is-plain-obj": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
-					"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
-					"dev": true
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"parse-entities": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
-					"integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
-					"dev": true,
-					"requires": {
-						"character-entities": "^1.0.0",
-						"character-entities-legacy": "^1.0.0",
-						"character-reference-invalid": "^1.0.0",
-						"is-alphanumerical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-hexadecimal": "^1.0.0"
-					}
-				},
-				"remark-parse": {
-					"version": "8.0.3",
-					"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz",
-					"integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==",
-					"dev": true,
-					"requires": {
-						"ccount": "^1.0.0",
-						"collapse-white-space": "^1.0.2",
-						"is-alphabetical": "^1.0.0",
-						"is-decimal": "^1.0.0",
-						"is-whitespace-character": "^1.0.0",
-						"is-word-character": "^1.0.0",
-						"markdown-escapes": "^1.0.0",
-						"parse-entities": "^2.0.0",
-						"repeat-string": "^1.5.4",
-						"state-toggle": "^1.0.0",
-						"trim": "0.0.1",
-						"trim-trailing-lines": "^1.0.0",
-						"unherit": "^1.0.4",
-						"unist-util-remove-position": "^2.0.0",
-						"vfile-location": "^3.0.0",
-						"xtend": "^4.0.1"
-					}
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
-				},
-				"unified": {
-					"version": "9.2.0",
-					"resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz",
-					"integrity": "sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==",
-					"dev": true,
-					"requires": {
-						"bail": "^1.0.0",
-						"extend": "^3.0.0",
-						"is-buffer": "^2.0.0",
-						"is-plain-obj": "^2.0.0",
-						"trough": "^1.0.0",
-						"vfile": "^4.0.0"
-					}
-				},
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-remove-position": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz",
-					"integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==",
-					"dev": true,
-					"requires": {
-						"unist-util-visit": "^2.0.0"
-					}
-				},
-				"unist-util-stringify-position": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
-					"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.2"
-					}
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
-				},
-				"vfile": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
-					"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"is-buffer": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0",
-						"vfile-message": "^2.0.0"
-					}
-				},
-				"vfile-location": {
-					"version": "3.2.0",
-					"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
-					"integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
-					"dev": true
-				},
-				"vfile-message": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-					"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-stringify-position": "^2.0.0"
-					}
-				}
+				"side-channel": "^1.0.6"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"remark-parse": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-6.0.3.tgz",
-			"integrity": "sha512-QbDXWN4HfKTUC0hHa4teU463KclLAnwpn/FBn87j9cKYJWWawbiLgMfP2Q4XwhxxuuuOxHlw+pSN0OKuJwyVvg==",
+		"node_modules/urlpattern-polyfill": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+			"integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg=="
+		},
+		"node_modules/use": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+			"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
 			"dev": true,
-			"requires": {
-				"collapse-white-space": "^1.0.2",
-				"is-alphabetical": "^1.0.0",
-				"is-decimal": "^1.0.0",
-				"is-whitespace-character": "^1.0.0",
-				"is-word-character": "^1.0.0",
-				"markdown-escapes": "^1.0.0",
-				"parse-entities": "^1.1.0",
-				"repeat-string": "^1.5.4",
-				"state-toggle": "^1.0.0",
-				"trim": "0.0.1",
-				"trim-trailing-lines": "^1.0.0",
-				"unherit": "^1.0.4",
-				"unist-util-remove-position": "^1.0.0",
-				"vfile-location": "^2.0.0",
-				"xtend": "^4.0.1"
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"remark-slug": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.1.0.tgz",
-			"integrity": "sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ==",
-			"dev": true,
-			"requires": {
-				"github-slugger": "^1.0.0",
-				"mdast-util-to-string": "^1.0.0",
-				"unist-util-visit": "^2.0.0"
+		"node_modules/use-callback-ref": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+			"integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+			"dependencies": {
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				},
-				"unist-util-visit": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
-					"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0",
-						"unist-util-visit-parents": "^3.0.0"
-					}
-				},
-				"unist-util-visit-parents": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
-					"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
-					"dev": true,
-					"requires": {
-						"@types/unist": "^2.0.0",
-						"unist-util-is": "^4.0.0"
-					}
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				}
 			}
 		},
-		"remark-squeeze-paragraphs": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz",
-			"integrity": "sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw==",
-			"dev": true,
-			"requires": {
-				"mdast-squeeze-paragraphs": "^4.0.0"
+		"node_modules/use-latest-callback": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.2.1.tgz",
+			"integrity": "sha512-QWlq8Is8BGWBf883QOEQP5HWYX/kMI+JTbJ5rdtvJLmXTIh9XoHIO3PQcmQl8BU44VKxow1kbQUHa6mQSMALDQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": ">=16.8"
 			}
 		},
-		"remark-stringify": {
-			"version": "6.0.4",
-			"resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-6.0.4.tgz",
-			"integrity": "sha512-eRWGdEPMVudijE/psbIDNcnJLRVx3xhfuEsTDGgH4GsFF91dVhw5nhmnBppafJ7+NWINW6C7ZwWbi30ImJzqWg==",
-			"dev": true,
-			"requires": {
-				"ccount": "^1.0.0",
-				"is-alphanumeric": "^1.0.0",
-				"is-decimal": "^1.0.0",
-				"is-whitespace-character": "^1.0.0",
-				"longest-streak": "^2.0.1",
-				"markdown-escapes": "^1.0.0",
-				"markdown-table": "^1.1.0",
-				"mdast-util-compact": "^1.0.0",
-				"parse-entities": "^1.0.2",
-				"repeat-string": "^1.5.4",
-				"state-toggle": "^1.0.0",
-				"stringify-entities": "^1.0.1",
-				"unherit": "^1.0.4",
-				"xtend": "^4.0.1"
+		"node_modules/use-memo-one": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
+			"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==",
+			"peerDependencies": {
+				"react": "^16.8.0"
 			}
 		},
-		"rememo": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/rememo/-/rememo-4.0.0.tgz",
-			"integrity": "sha512-6BAfg1Dqg6UteZBEH9k6EHHersM86/EcBOMtJV+h+xEn1GC3H+gAgJWpexWYAamAxD0qXNmIt50iS/zuZKnQag=="
-		},
-		"remove-accents": {
-			"version": "0.4.2",
-			"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-			"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
-		},
-		"remove-trailing-separator": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-			"integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
-		},
-		"renderkid": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-			"integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+		"node_modules/use-resize-observer": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+			"integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
 			"dev": true,
-			"requires": {
-				"css-select": "^4.1.3",
-				"dom-converter": "^0.2.0",
-				"htmlparser2": "^6.1.0",
-				"lodash": "^4.17.21",
-				"strip-ansi": "^6.0.1"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"css-select": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-					"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^6.0.1",
-						"domhandler": "^4.3.1",
-						"domutils": "^2.8.0",
-						"nth-check": "^2.0.1"
-					}
-				},
-				"css-what": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-					"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-					"dev": true
-				},
-				"dom-serializer": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-					"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.2.0",
-						"entities": "^2.0.0"
-					}
-				},
-				"domelementtype": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-					"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-					"dev": true
-				},
-				"domhandler": {
-					"version": "4.3.1",
-					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-					"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.2.0"
-					}
-				},
-				"domutils": {
-					"version": "2.8.0",
-					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-					"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-					"dev": true,
-					"requires": {
-						"dom-serializer": "^1.0.1",
-						"domelementtype": "^2.2.0",
-						"domhandler": "^4.2.0"
-					}
-				},
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
-				},
-				"htmlparser2": {
-					"version": "6.1.0",
-					"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-					"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.0.0",
-						"domutils": "^2.5.2",
-						"entities": "^2.0.0"
-					}
-				},
-				"nth-check": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-					"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@juggle/resize-observer": "^3.3.1"
+			},
+			"peerDependencies": {
+				"react": "16.8.0 - 18",
+				"react-dom": "16.8.0 - 18"
 			}
 		},
-		"repeat-element": {
+		"node_modules/use-sidecar": {
 			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-			"integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo="
+			"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+			"integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+			"dependencies": {
+				"detect-node-es": "^1.1.0",
+				"tslib": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
 		},
-		"repeat-string": {
-			"version": "1.6.1",
-			"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-			"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+		"node_modules/use-subscription": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.0.tgz",
+			"integrity": "sha512-/FVRiB2I7NDjzWoNBYPt6YkkvleMm/lFtxj1hH6nX2TVrJ/5UTbovw9OE1efv2Zl0HoAYuTjM7zHd9OsABn5sg==",
+			"dependencies": {
+				"object-assign": "^4.1.1"
+			},
+			"peerDependencies": {
+				"react": "^17.0.0"
+			}
 		},
-		"repeating": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-			"integrity": "sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==",
-			"dev": true,
-			"optional": true,
-			"requires": {
-				"is-finite": "^1.0.0"
+		"node_modules/use-sync-external-store": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+			"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
-		"replace-ext": {
+		"node_modules/userhome": {
 			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
-			"integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=",
-			"dev": true
-		},
-		"request": {
-			"version": "2.88.0",
-			"resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-			"integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-			"dev": true,
-			"requires": {
-				"aws-sign2": "~0.7.0",
-				"aws4": "^1.8.0",
-				"caseless": "~0.12.0",
-				"combined-stream": "~1.0.6",
-				"extend": "~3.0.2",
-				"forever-agent": "~0.6.1",
-				"form-data": "~2.3.2",
-				"har-validator": "~5.1.0",
-				"http-signature": "~1.2.0",
-				"is-typedarray": "~1.0.0",
-				"isstream": "~0.1.2",
-				"json-stringify-safe": "~5.0.1",
-				"mime-types": "~2.1.19",
-				"oauth-sign": "~0.9.0",
-				"performance-now": "^2.1.0",
-				"qs": "~6.5.2",
-				"safe-buffer": "^5.1.2",
-				"tough-cookie": "~2.4.3",
-				"tunnel-agent": "^0.6.0",
-				"uuid": "^3.3.2"
-			},
-			"dependencies": {
-				"form-data": {
-					"version": "2.3.3",
-					"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-					"integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-					"dev": true,
-					"requires": {
-						"asynckit": "^0.4.0",
-						"combined-stream": "^1.0.6",
-						"mime-types": "^2.1.12"
-					}
-				},
-				"mime-db": {
-					"version": "1.40.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
-					"integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.24",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
-					"integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.40.0"
-					}
-				},
-				"uuid": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-					"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-					"dev": true
-				}
+			"resolved": "https://registry.npmjs.org/userhome/-/userhome-1.0.0.tgz",
+			"integrity": "sha512-ayFKY3H+Pwfy4W98yPdtH1VqH4psDeyW8lYYFzfecR9d6hqLpqhecktvYR3SEEXt7vG0S1JEpciI3g94pMErig==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.8.0"
 			}
 		},
-		"requestidlecallback": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/requestidlecallback/-/requestidlecallback-0.3.0.tgz",
-			"integrity": "sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ=="
+		"node_modules/utf8-byte-length": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
+			"integrity": "sha512-4+wkEYLBbWxqTahEsWrhxepcoVOJ+1z5PGIjPZxRkytcdSUaNjIjBM7Xn8E+pdSuV7SzvWovBFA54FO0JSoqhA==",
+			"dev": true
 		},
-		"require-directory": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-			"integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+		"node_modules/util": {
+			"version": "0.11.1",
+			"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+			"integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "2.0.3"
+			}
 		},
-		"require-from-string": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+		},
+		"node_modules/utila": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+			"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
 			"dev": true
 		},
-		"require-main-filename": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+		"node_modules/utility-types": {
+			"version": "3.10.0",
+			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+			"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
+			"engines": {
+				"node": ">= 4"
+			}
 		},
-		"requireindex": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
-			"integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
-			"dev": true
+		"node_modules/utils-merge": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+			"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+			"engines": {
+				"node": ">= 0.4.0"
+			}
 		},
-		"requires-port": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-			"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-			"dev": true
+		"node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
 		},
-		"resize-observer-polyfill": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-			"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-			"dev": true
+		"node_modules/v8-compile-cache": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+			"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
 		},
-		"resolve": {
-			"version": "1.22.0",
-			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
-			"integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
-			"dev": true,
-			"requires": {
-				"is-core-module": "^2.8.1",
-				"path-parse": "^1.0.7",
-				"supports-preserve-symlinks-flag": "^1.0.0"
+		"node_modules/v8-to-istanbul": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz",
+			"integrity": "sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.12",
+				"@types/istanbul-lib-coverage": "^2.0.1",
+				"convert-source-map": "^1.6.0"
 			},
+			"engines": {
+				"node": ">=10.12.0"
+			}
+		},
+		"node_modules/validate-npm-package-license": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+			"integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
 			"dependencies": {
-				"is-core-module": {
-					"version": "2.9.0",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
-					"integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				}
+				"spdx-correct": "^3.0.0",
+				"spdx-expression-parse": "^3.0.0"
 			}
 		},
-		"resolve-alpn": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-			"integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+		"node_modules/validate-npm-package-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
+			"integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==",
+			"dependencies": {
+				"builtins": "^1.0.3"
+			}
+		},
+		"node_modules/validate.js": {
+			"version": "0.13.1",
+			"resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
+			"integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==",
 			"dev": true
 		},
-		"resolve-bin": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/resolve-bin/-/resolve-bin-0.4.0.tgz",
-			"integrity": "sha1-RxMiSYkRAa+xmZH+k3ywpfBy5dk=",
-			"dev": true,
-			"requires": {
-				"find-parent-dir": "~0.3.0"
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"engines": {
+				"node": ">= 0.8"
 			}
 		},
-		"resolve-cwd": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-			"integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-			"dev": true,
-			"requires": {
-				"resolve-from": "^5.0.0"
-			},
+		"node_modules/vfile": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-3.0.1.tgz",
+			"integrity": "sha512-y7Y3gH9BsUSdD4KzHsuMaCzRjglXN0W2EcMf0gpvu6+SbsGhMje7xDc8AEoeXy6mIwCKMI6BkjMsRjzQbhMEjQ==",
 			"dependencies": {
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				}
+				"is-buffer": "^2.0.0",
+				"replace-ext": "1.0.0",
+				"unist-util-stringify-position": "^1.0.0",
+				"vfile-message": "^1.0.0"
 			}
 		},
-		"resolve-dir": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
-			"integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
-			"dev": true,
-			"requires": {
-				"expand-tilde": "^1.2.2",
-				"global-modules": "^0.2.3"
-			},
+		"node_modules/vfile-location": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+			"integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
+			"integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
 			"dependencies": {
-				"global-modules": {
-					"version": "0.2.3",
-					"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
-					"integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
-					"dev": true,
-					"requires": {
-						"global-prefix": "^0.1.4",
-						"is-windows": "^0.2.0"
-					}
+				"unist-util-stringify-position": "^1.1.1"
+			}
+		},
+		"node_modules/vfile/node_modules/is-buffer": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+			"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
 				},
-				"global-prefix": {
-					"version": "0.1.5",
-					"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
-					"integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
-					"dev": true,
-					"requires": {
-						"homedir-polyfill": "^1.0.0",
-						"ini": "^1.3.4",
-						"is-windows": "^0.2.0",
-						"which": "^1.2.12"
-					}
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"is-windows": {
-					"version": "0.2.0",
-					"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-					"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"engines": {
+				"node": ">=4"
 			}
 		},
-		"resolve-from": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-			"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+		"node_modules/vlq": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
+			"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
 		},
-		"resolve-url": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-			"integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+		"node_modules/vm-browserify": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+			"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
+			"dev": true
 		},
-		"resolve.exports": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz",
-			"integrity": "sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==",
+		"node_modules/vscode-oniguruma": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+			"integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
 			"dev": true
 		},
-		"responselike": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
-			"integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
-			"dev": true,
-			"requires": {
-				"lowercase-keys": "^2.0.0"
-			}
+		"node_modules/vscode-textmate": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
+			"integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
+			"dev": true
 		},
-		"restore-cursor": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
-			"integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
-			"requires": {
-				"onetime": "^2.0.0",
-				"signal-exit": "^3.0.2"
+		"node_modules/w3c-xmlserializer": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+			"integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+			"dependencies": {
+				"xml-name-validator": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"ret": {
-			"version": "0.1.15",
-			"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-			"integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
-		},
-		"retry": {
-			"version": "0.12.0",
-			"resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-			"integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
-			"dev": true
+		"node_modules/wait-on": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz",
+			"integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==",
+			"license": "MIT",
+			"dependencies": {
+				"axios": "^1.6.1",
+				"joi": "^17.11.0",
+				"lodash": "^4.17.21",
+				"minimist": "^1.2.8",
+				"rxjs": "^7.8.1"
+			},
+			"bin": {
+				"wait-on": "bin/wait-on"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
 		},
-		"reusify": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-			"dev": true
+		"node_modules/wait-on/node_modules/axios": {
+			"version": "1.7.8",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.8.tgz",
+			"integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
+			"license": "MIT",
+			"dependencies": {
+				"follow-redirects": "^1.15.6",
+				"form-data": "^4.0.0",
+				"proxy-from-env": "^1.1.0"
+			}
 		},
-		"rgb-regex": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-			"integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-			"dev": true
+		"node_modules/wait-on/node_modules/rxjs": {
+			"version": "7.8.1",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+			"integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.1.0"
+			}
 		},
-		"rgba-regex": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-			"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-			"dev": true
+		"node_modules/wait-port": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/wait-port/-/wait-port-1.1.0.tgz",
+			"integrity": "sha512-3e04qkoN3LxTMLakdqeWth8nih8usyg+sf1Bgdf9wwUkp05iuK1eSY/QpLvscT/+F/gA89+LpUmmgBtesbqI2Q==",
+			"dev": true,
+			"dependencies": {
+				"chalk": "^4.1.2",
+				"commander": "^9.3.0",
+				"debug": "^4.3.4"
+			},
+			"bin": {
+				"wait-port": "bin/wait-port.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"rimraf": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+		"node_modules/wait-port/node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 			"dev": true,
-			"requires": {
-				"glob": "^7.1.3"
-			},
 			"dependencies": {
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				}
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"ripemd160": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-			"integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+		"node_modules/wait-port/node_modules/commander": {
+			"version": "9.5.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+			"integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
 			"dev": true,
-			"requires": {
-				"hash-base": "^3.0.0",
-				"inherits": "^2.0.1"
+			"engines": {
+				"node": "^12.20.0 || >=14"
 			}
 		},
-		"rsvp": {
-			"version": "4.8.4",
-			"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.4.tgz",
-			"integrity": "sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA=="
-		},
-		"rtlcss": {
+		"node_modules/wait-port/node_modules/has-flag": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz",
-			"integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true,
-			"requires": {
-				"escalade": "^3.1.1",
-				"picocolors": "^1.0.0",
-				"postcss": "^8.4.6",
-				"strip-json-comments": "^3.1.1"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"run-async": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-			"integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-			"dev": true
-		},
-		"run-con": {
-			"version": "1.2.10",
-			"resolved": "https://registry.npmjs.org/run-con/-/run-con-1.2.10.tgz",
-			"integrity": "sha512-n7PZpYmMM26ZO21dd8y3Yw1TRtGABjRtgPSgFS/nhzfvbJMXFtJhJVyEgayMiP+w/23craJjsnfDvx4W4ue/HQ==",
+		"node_modules/wait-port/node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
-			"requires": {
-				"deep-extend": "^0.6.0",
-				"ini": "~2.0.0",
-				"minimist": "^1.2.5",
-				"strip-json-comments": "~3.1.1"
-			},
 			"dependencies": {
-				"ini": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
-					"integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
-					"dev": true
-				},
-				"strip-json-comments": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-					"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-					"dev": true
-				}
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"run-parallel": {
-			"version": "1.1.9",
-			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-			"integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
-			"dev": true
-		},
-		"run-queue": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-			"integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
-			"dev": true,
-			"requires": {
-				"aproba": "^1.1.1"
+		"node_modules/walker": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+			"integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+			"dependencies": {
+				"makeerror": "1.0.12"
 			}
 		},
-		"rungen": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/rungen/-/rungen-0.3.2.tgz",
-			"integrity": "sha1-QAwJ6+kU57F+C27zJjQA/Cq8fLM="
+		"node_modules/warn-once": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+			"integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
 		},
-		"rx": {
-			"version": "2.3.24",
-			"resolved": "https://registry.npmjs.org/rx/-/rx-2.3.24.tgz",
-			"integrity": "sha1-FPlQpCF9fjXapxu8vljv9o6ksrc=",
-			"dev": true
+		"node_modules/wasm-vips": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/wasm-vips/-/wasm-vips-0.0.10.tgz",
+			"integrity": "sha512-ZDIRjxTm03iRRXM9WwvVh8MH+mKHUBedJTC/MYd/cVGZxShnYcEd0BB7gSGDpxgkzcPSYUnN1HQJipDBhxVHTg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.4.0"
+			}
 		},
-		"rxjs": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz",
-			"integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==",
+		"node_modules/watchpack": {
+			"version": "1.7.5",
+			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+			"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
 			"dev": true,
-			"requires": {
-				"tslib": "^1.9.0"
-			},
 			"dependencies": {
-				"tslib": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-					"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-					"dev": true
-				}
+				"graceful-fs": "^4.1.2",
+				"neo-async": "^2.5.0"
+			},
+			"optionalDependencies": {
+				"chokidar": "^3.4.1",
+				"watchpack-chokidar2": "^2.0.1"
 			}
 		},
-		"safe-buffer": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-		},
-		"safe-regex": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-			"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-			"requires": {
-				"ret": "~0.1.10"
+		"node_modules/watchpack-chokidar2": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+			"integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"chokidar": "^2.1.8"
 			}
 		},
-		"safer-buffer": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-		},
-		"sane": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
-			"integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
-			"requires": {
-				"@cnakazawa/watch": "^1.0.3",
-				"anymatch": "^2.0.0",
-				"capture-exit": "^2.0.0",
-				"exec-sh": "^0.3.2",
-				"execa": "^1.0.0",
-				"fb-watchman": "^2.0.0",
+		"node_modules/watchpack-chokidar2/node_modules/anymatch": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+			"integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
 				"micromatch": "^3.1.4",
-				"minimist": "^1.1.1",
-				"walker": "~1.0.5"
-			},
-			"dependencies": {
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.0",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-							"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
-						}
-					}
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-					"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				}
+				"normalize-path": "^2.1.1"
 			}
 		},
-		"sass": {
-			"version": "1.35.2",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.35.2.tgz",
-			"integrity": "sha512-jhO5KAR+AMxCEwIH3v+4zbB2WB0z67V1X0jbapfVwQQdjHZUGUyukpnoM6+iCMfsIUC016w9OPKQ5jrNOS9uXw==",
+		"node_modules/watchpack-chokidar2/node_modules/anymatch/node_modules/normalize-path": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+			"integrity": "sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==",
 			"dev": true,
-			"requires": {
-				"chokidar": ">=3.0.0 <4.0.0"
-			},
+			"optional": true,
 			"dependencies": {
-				"anymatch": {
-					"version": "3.1.2",
-					"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-					"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-					"dev": true,
-					"requires": {
-						"normalize-path": "^3.0.0",
-						"picomatch": "^2.0.4"
-					}
-				},
-				"binary-extensions": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-					"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"chokidar": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-					"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-					"dev": true,
-					"requires": {
-						"anymatch": "~3.1.2",
-						"braces": "~3.0.2",
-						"fsevents": "~2.3.2",
-						"glob-parent": "~5.1.2",
-						"is-binary-path": "~2.1.0",
-						"is-glob": "~4.0.1",
-						"normalize-path": "~3.0.0",
-						"readdirp": "~3.6.0"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"is-binary-path": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-					"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-					"dev": true,
-					"requires": {
-						"binary-extensions": "^2.0.0"
-					}
-				},
-				"is-glob": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-					"integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"readdirp": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-					"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-					"dev": true,
-					"requires": {
-						"picomatch": "^2.2.1"
-					},
-					"dependencies": {
-						"picomatch": {
-							"version": "2.3.0",
-							"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-							"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-							"dev": true
-						}
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				}
+				"remove-trailing-separator": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"sass-loader": {
-			"version": "12.1.0",
-			"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz",
-			"integrity": "sha512-FVJZ9kxVRYNZTIe2xhw93n3xJNYZADr+q69/s98l9nTCrWASo+DR2Ot0s5xTKQDDEosUkatsGeHxcH4QBp5bSg==",
+		"node_modules/watchpack-chokidar2/node_modules/binary-extensions": {
+			"version": "1.13.1",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+			"integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
 			"dev": true,
-			"requires": {
-				"klona": "^2.0.4",
-				"neo-async": "^2.6.2"
+			"optional": true,
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"sax": {
-			"version": "1.2.4",
-			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-		},
-		"saxes": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-			"integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+		"node_modules/watchpack-chokidar2/node_modules/braces": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+			"integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
 			"dev": true,
-			"requires": {
-				"xmlchars": "^2.2.0"
+			"optional": true,
+			"dependencies": {
+				"arr-flatten": "^1.1.0",
+				"array-unique": "^0.3.2",
+				"extend-shallow": "^2.0.1",
+				"fill-range": "^4.0.0",
+				"isobject": "^3.0.1",
+				"repeat-element": "^1.1.2",
+				"snapdragon": "^0.8.1",
+				"snapdragon-node": "^2.0.1",
+				"split-string": "^3.0.2",
+				"to-regex": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"scheduler": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-			"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-			"requires": {
-				"loose-envify": "^1.1.0",
-				"object-assign": "^4.1.1"
+		"node_modules/watchpack-chokidar2/node_modules/braces/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"schema-utils": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-			"integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+		"node_modules/watchpack-chokidar2/node_modules/chokidar": {
+			"version": "2.1.8",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+			"integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+			"deprecated": "Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies",
 			"dev": true,
-			"requires": {
-				"ajv": "^6.1.0",
-				"ajv-errors": "^1.0.0",
-				"ajv-keywords": "^3.1.0"
-			},
+			"optional": true,
 			"dependencies": {
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				}
+				"anymatch": "^2.0.0",
+				"async-each": "^1.0.1",
+				"braces": "^2.3.2",
+				"glob-parent": "^3.1.0",
+				"inherits": "^2.0.3",
+				"is-binary-path": "^1.0.0",
+				"is-glob": "^4.0.0",
+				"normalize-path": "^3.0.0",
+				"path-is-absolute": "^1.0.0",
+				"readdirp": "^2.2.1",
+				"upath": "^1.1.1"
+			},
+			"optionalDependencies": {
+				"fsevents": "^1.2.7"
 			}
 		},
-		"select": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-			"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-		},
-		"select-hose": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-			"integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
-			"dev": true
+		"node_modules/watchpack-chokidar2/node_modules/fill-range": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+			"integrity": "sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"extend-shallow": "^2.0.1",
+				"is-number": "^3.0.0",
+				"repeat-string": "^1.6.1",
+				"to-regex-range": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"selfsigned": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-			"integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+		"node_modules/watchpack-chokidar2/node_modules/fill-range/node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
 			"dev": true,
-			"requires": {
-				"node-forge": "^0.10.0"
+			"optional": true,
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"semver": {
-			"version": "7.3.5",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-			"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+		"node_modules/watchpack-chokidar2/node_modules/fsevents": {
+			"version": "1.2.13",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+			"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+			"deprecated": "The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2",
 			"dev": true,
-			"requires": {
-				"lru-cache": "^6.0.0"
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"dependencies": {
+				"bindings": "^1.5.0",
+				"nan": "^2.12.1"
 			},
+			"engines": {
+				"node": ">= 4.0"
+			}
+		},
+		"node_modules/watchpack-chokidar2/node_modules/is-binary-path": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+			"integrity": "sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==",
+			"dev": true,
+			"optional": true,
 			"dependencies": {
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+				"binary-extensions": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"semver-compare": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-			"integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-			"dev": true
+		"node_modules/watchpack-chokidar2/node_modules/micromatch": {
+			"version": "3.1.10",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+			"integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"arr-diff": "^4.0.0",
+				"array-unique": "^0.3.2",
+				"braces": "^2.3.1",
+				"define-property": "^2.0.2",
+				"extend-shallow": "^3.0.2",
+				"extglob": "^2.0.4",
+				"fragment-cache": "^0.2.1",
+				"kind-of": "^6.0.2",
+				"nanomatch": "^1.2.9",
+				"object.pick": "^1.3.0",
+				"regex-not": "^1.0.0",
+				"snapdragon": "^0.8.1",
+				"to-regex": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"send": {
-			"version": "0.17.2",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.17.2.tgz",
-			"integrity": "sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==",
-			"requires": {
-				"debug": "2.6.9",
-				"depd": "~1.1.2",
-				"destroy": "~1.0.4",
-				"encodeurl": "~1.0.2",
-				"escape-html": "~1.0.3",
-				"etag": "~1.8.1",
-				"fresh": "0.5.2",
-				"http-errors": "1.8.1",
-				"mime": "1.6.0",
-				"ms": "2.1.3",
-				"on-finished": "~2.3.0",
-				"range-parser": "~1.2.1",
-				"statuses": "~1.5.0"
+		"node_modules/watchpack-chokidar2/node_modules/readdirp": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+			"integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+			"dev": true,
+			"optional": true,
+			"dependencies": {
+				"graceful-fs": "^4.1.11",
+				"micromatch": "^3.1.10",
+				"readable-stream": "^2.0.2"
 			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/wbuf": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+			"integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					},
-					"dependencies": {
-						"ms": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-							"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-						}
-					}
-				},
-				"mime": {
-					"version": "1.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-					"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-				},
-				"ms": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-					"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-				}
+				"minimalistic-assert": "^1.0.0"
 			}
 		},
-		"sentence-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
-			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
-			"requires": {
-				"no-case": "^3.0.4",
-				"tslib": "^2.0.3",
-				"upper-case-first": "^2.0.2"
+		"node_modules/wcwidth": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+			"integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+			"dependencies": {
+				"defaults": "^1.0.3"
 			}
 		},
-		"serialize-error": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
-			"integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go="
-		},
-		"serialize-javascript": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-			"integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+		"node_modules/web-streams-polyfill": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+			"integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
 			"dev": true,
-			"requires": {
-				"randombytes": "^2.1.0"
+			"engines": {
+				"node": ">= 8"
 			}
 		},
-		"serve-favicon": {
-			"version": "2.5.0",
-			"resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
-			"integrity": "sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==",
+		"node_modules/webdriver": {
+			"version": "8.16.20",
+			"resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.16.20.tgz",
+			"integrity": "sha512-3Dynj9pfTqmbDadqmMmD/sQgGFwho92zQPGgpAqLUMebE/qEkraoIfRWdbi2tw1ityiThOJVPTXfwsY/bpvknw==",
 			"dev": true,
-			"requires": {
-				"etag": "~1.8.1",
-				"fresh": "0.5.2",
-				"ms": "2.1.1",
-				"parseurl": "~1.3.2",
-				"safe-buffer": "5.1.1"
-			},
 			"dependencies": {
-				"ms": {
-					"version": "2.1.1",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-					"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-					"dev": true
-				},
-				"safe-buffer": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-					"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-					"dev": true
-				}
+				"@types/node": "^20.1.0",
+				"@types/ws": "^8.5.3",
+				"@wdio/config": "8.16.20",
+				"@wdio/logger": "8.16.17",
+				"@wdio/protocols": "8.16.5",
+				"@wdio/types": "8.16.12",
+				"@wdio/utils": "8.16.17",
+				"deepmerge-ts": "^5.1.0",
+				"got": "^ 12.6.1",
+				"ky": "^0.33.0",
+				"ws": "^8.8.0"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
 			}
 		},
-		"serve-index": {
-			"version": "1.9.1",
-			"resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-			"integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+		"node_modules/webdriver/node_modules/@sindresorhus/is": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-5.6.0.tgz",
+			"integrity": "sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==",
 			"dev": true,
-			"requires": {
-				"accepts": "~1.3.4",
-				"batch": "0.6.1",
-				"debug": "2.6.9",
-				"escape-html": "~1.0.3",
-				"http-errors": "~1.6.2",
-				"mime-types": "~2.1.17",
-				"parseurl": "~1.3.2"
+			"engines": {
+				"node": ">=14.16"
 			},
-			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"dev": true,
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"http-errors": {
-					"version": "1.6.3",
-					"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-					"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-					"dev": true,
-					"requires": {
-						"depd": "~1.1.2",
-						"inherits": "2.0.3",
-						"setprototypeof": "1.1.0",
-						"statuses": ">= 1.4.0 < 2"
-					}
-				},
-				"setprototypeof": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-					"integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-					"dev": true
-				}
-			}
-		},
-		"serve-static": {
-			"version": "1.14.2",
-			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.2.tgz",
-			"integrity": "sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==",
-			"requires": {
-				"encodeurl": "~1.0.2",
-				"escape-html": "~1.0.3",
-				"parseurl": "~1.3.3",
-				"send": "0.17.2"
+			"funding": {
+				"url": "https://github.com/sindresorhus/is?sponsor=1"
 			}
 		},
-		"set-blocking": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-			"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
-		},
-		"set-value": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-			"integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-			"requires": {
-				"extend-shallow": "^2.0.1",
-				"is-extendable": "^0.1.1",
-				"is-plain-object": "^2.0.3",
-				"split-string": "^3.0.1"
-			},
+		"node_modules/webdriver/node_modules/@szmarczak/http-timer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz",
+			"integrity": "sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==",
+			"dev": true,
 			"dependencies": {
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				},
-				"is-plain-object": {
-					"version": "2.0.4",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-					"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-					"requires": {
-						"isobject": "^3.0.1"
-					}
-				}
+				"defer-to-connect": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=14.16"
 			}
 		},
-		"setimmediate": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-			"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-			"dev": true
-		},
-		"setprototypeof": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-		},
-		"sha.js": {
-			"version": "2.4.11",
-			"resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-			"integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+		"node_modules/webdriver/node_modules/@types/node": {
+			"version": "20.16.15",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.15.tgz",
+			"integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
 			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"safe-buffer": "^5.0.1"
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
 			}
 		},
-		"shallow-clone": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-			"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-			"requires": {
-				"kind-of": "^6.0.2"
+		"node_modules/webdriver/node_modules/cacheable-lookup": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
+			"integrity": "sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==",
+			"dev": true,
+			"engines": {
+				"node": ">=14.16"
 			}
 		},
-		"shallowequal": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-			"dev": true
-		},
-		"shebang-command": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-			"integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-			"requires": {
-				"shebang-regex": "^1.0.0"
+		"node_modules/webdriver/node_modules/cacheable-request": {
+			"version": "10.2.14",
+			"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-10.2.14.tgz",
+			"integrity": "sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/http-cache-semantics": "^4.0.2",
+				"get-stream": "^6.0.1",
+				"http-cache-semantics": "^4.1.1",
+				"keyv": "^4.5.3",
+				"mimic-response": "^4.0.0",
+				"normalize-url": "^8.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
 			}
 		},
-		"shebang-regex": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-			"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
-		},
-		"shell-quote": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz",
-			"integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw=="
-		},
-		"showdown": {
-			"version": "1.9.1",
-			"resolved": "https://registry.npmjs.org/showdown/-/showdown-1.9.1.tgz",
-			"integrity": "sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==",
-			"requires": {
-				"yargs": "^14.2"
+		"node_modules/webdriver/node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"ansi-regex": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-				},
-				"cliui": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-					"integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-					"requires": {
-						"string-width": "^3.1.0",
-						"strip-ansi": "^5.2.0",
-						"wrap-ansi": "^5.1.0"
-					}
-				},
-				"find-up": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-					"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-					"requires": {
-						"locate-path": "^3.0.0"
-					}
-				},
-				"get-caller-file": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-					"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
-				},
-				"locate-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-					"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-					"requires": {
-						"p-locate": "^3.0.0",
-						"path-exists": "^3.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-					"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-					"requires": {
-						"p-limit": "^2.0.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
-				},
-				"require-main-filename": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-					"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
-				},
-				"string-width": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-					"integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-					"requires": {
-						"emoji-regex": "^7.0.1",
-						"is-fullwidth-code-point": "^2.0.0",
-						"strip-ansi": "^5.1.0"
-					}
-				},
-				"strip-ansi": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-					"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-					"requires": {
-						"ansi-regex": "^4.1.0"
-					}
-				},
-				"wrap-ansi": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-					"integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-					"requires": {
-						"ansi-styles": "^3.2.0",
-						"string-width": "^3.0.0",
-						"strip-ansi": "^5.0.0"
-					}
-				},
-				"yargs": {
-					"version": "14.2.3",
-					"resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.3.tgz",
-					"integrity": "sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==",
-					"requires": {
-						"cliui": "^5.0.0",
-						"decamelize": "^1.2.0",
-						"find-up": "^3.0.0",
-						"get-caller-file": "^2.0.1",
-						"require-directory": "^2.1.1",
-						"require-main-filename": "^2.0.0",
-						"set-blocking": "^2.0.0",
-						"string-width": "^3.0.0",
-						"which-module": "^2.0.0",
-						"y18n": "^4.0.0",
-						"yargs-parser": "^15.0.1"
-					}
-				},
-				"yargs-parser": {
-					"version": "15.0.1",
-					"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.1.tgz",
-					"integrity": "sha512-0OAMV2mAZQrs3FkNpDQcBk1x5HXb8X4twADss4S0Iuk+2dGnLOE/fRHrsYm542GduMveyA77OF4wrNJuanRCWw==",
-					"requires": {
-						"camelcase": "^5.0.0",
-						"decamelize": "^1.2.0"
-					}
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"side-channel": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-			"integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+		"node_modules/webdriver/node_modules/got": {
+			"version": "12.6.1",
+			"resolved": "https://registry.npmjs.org/got/-/got-12.6.1.tgz",
+			"integrity": "sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0",
-				"get-intrinsic": "^1.0.2",
-				"object-inspect": "^1.9.0"
+			"dependencies": {
+				"@sindresorhus/is": "^5.2.0",
+				"@szmarczak/http-timer": "^5.0.1",
+				"cacheable-lookup": "^7.0.0",
+				"cacheable-request": "^10.2.8",
+				"decompress-response": "^6.0.0",
+				"form-data-encoder": "^2.1.2",
+				"get-stream": "^6.0.1",
+				"http2-wrapper": "^2.1.10",
+				"lowercase-keys": "^3.0.0",
+				"p-cancelable": "^3.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/got?sponsor=1"
 			}
 		},
-		"signal-exit": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-			"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
-		},
-		"simple-git": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.5.0.tgz",
-			"integrity": "sha512-fZsaq5nzdxQRhMNs6ESGLpMUHoL5GRP+boWPhq9pMYMKwOGZV2jHOxi8AbFFA2Y/6u4kR99HoULizSbpzaODkA==",
+		"node_modules/webdriver/node_modules/http2-wrapper": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.2.1.tgz",
+			"integrity": "sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==",
 			"dev": true,
-			"requires": {
-				"@kwsites/file-exists": "^1.1.1",
-				"@kwsites/promise-deferred": "^1.1.1",
-				"debug": "^4.3.3"
-			},
 			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+				"quick-lru": "^5.1.1",
+				"resolve-alpn": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=10.19.0"
 			}
 		},
-		"simple-html-tokenizer": {
-			"version": "0.5.7",
-			"resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.5.7.tgz",
-			"integrity": "sha512-APW9iYbkJ5cijjX4Ljhf3VG8SwYPUJT5gZrwci/wieMabQxWFiV5VwsrP5c6GMRvXKEQMGkAB1d9dvW66dTqpg=="
-		},
-		"simple-plist": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/simple-plist/-/simple-plist-1.3.1.tgz",
-			"integrity": "sha512-iMSw5i0XseMnrhtIzRb7XpQEXepa9xhWxGUojHBL43SIpQuDQkh3Wpy67ZbDzZVr6EKxvwVChnVpdl8hEVLDiw==",
-			"requires": {
-				"bplist-creator": "0.1.0",
-				"bplist-parser": "0.3.1",
-				"plist": "^3.0.5"
-			},
-			"dependencies": {
-				"bplist-parser": {
-					"version": "0.3.1",
-					"resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.3.1.tgz",
-					"integrity": "sha512-PyJxiNtA5T2PlLIeBot4lbp7rj4OadzjnMZD/G5zuBNt8ei/yCU7+wW0h2bag9vr8c+/WuRWmSxbqAl9hL1rBA==",
-					"requires": {
-						"big-integer": "1.6.x"
-					}
-				}
+		"node_modules/webdriver/node_modules/lowercase-keys": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
+			"integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"simple-swizzle": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-			"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-			"requires": {
-				"is-arrayish": "^0.3.1"
+		"node_modules/webdriver/node_modules/mimic-response": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-4.0.0.tgz",
+			"integrity": "sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==",
+			"dev": true,
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 			},
-			"dependencies": {
-				"is-arrayish": {
-					"version": "0.3.2",
-					"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-					"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"sirv": {
-			"version": "1.0.12",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
-			"integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
+		"node_modules/webdriver/node_modules/normalize-url": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.1.tgz",
+			"integrity": "sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==",
 			"dev": true,
-			"requires": {
-				"@polka/url": "^1.0.0-next.15",
-				"mime": "^2.3.1",
-				"totalist": "^1.0.0"
+			"engines": {
+				"node": ">=14.16"
 			},
-			"dependencies": {
-				"mime": {
-					"version": "2.6.0",
-					"resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
-					"integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"sisteransi": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-			"dev": true
-		},
-		"slash": {
+		"node_modules/webdriver/node_modules/p-cancelable": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-		},
-		"slice-ansi": {
-			"version": "0.0.4",
-			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
-			"integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
-			"dev": true
-		},
-		"smart-buffer": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-			"integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-			"dev": true
-		},
-		"snake-case": {
-			"version": "3.0.4",
-			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
-			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-			"requires": {
-				"dot-case": "^3.0.4",
-				"tslib": "^2.0.3"
+			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz",
+			"integrity": "sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
 			}
 		},
-		"snapdragon": {
-			"version": "0.8.2",
-			"resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-			"integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-			"requires": {
-				"base": "^0.11.1",
-				"debug": "^2.2.0",
-				"define-property": "^0.2.5",
-				"extend-shallow": "^2.0.1",
-				"map-cache": "^0.2.2",
-				"source-map": "^0.5.6",
-				"source-map-resolve": "^0.5.0",
-				"use": "^3.1.0"
+		"node_modules/webdriver/node_modules/quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/webdriver/node_modules/responselike": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/responselike/-/responselike-3.0.0.tgz",
+			"integrity": "sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "2.6.9",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-					"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-					"requires": {
-						"ms": "2.0.0"
-					}
-				},
-				"define-property": {
-					"version": "0.2.5",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-					"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-					"requires": {
-						"is-descriptor": "^0.1.0"
-					}
-				},
-				"extend-shallow": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-					"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-					"requires": {
-						"is-extendable": "^0.1.0"
-					}
-				}
+				"lowercase-keys": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"snapdragon-node": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-			"integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-			"requires": {
-				"define-property": "^1.0.0",
-				"isobject": "^3.0.0",
-				"snapdragon-util": "^3.0.1"
+		"node_modules/webdriver/node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/webdriver/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
 			},
-			"dependencies": {
-				"define-property": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-					"integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-					"requires": {
-						"is-descriptor": "^1.0.0"
-					}
-				},
-				"is-accessor-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-					"integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
-				},
-				"is-data-descriptor": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-					"integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-					"requires": {
-						"kind-of": "^6.0.0"
-					}
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"is-descriptor": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-					"integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-					"requires": {
-						"is-accessor-descriptor": "^1.0.0",
-						"is-data-descriptor": "^1.0.0",
-						"kind-of": "^6.0.2"
-					}
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"snapdragon-util": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-			"integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-			"requires": {
-				"kind-of": "^3.2.0"
-			},
+		"node_modules/webdriverio": {
+			"version": "8.16.20",
+			"resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.16.20.tgz",
+			"integrity": "sha512-2xSJDrMxwPF1kucB/r7Wc8yF689GGi7iSKrog7vkkoIiRY25vd3U129iN2mTYgNDyM6SM0kw+GP5W1s73khpYw==",
+			"dev": true,
 			"dependencies": {
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
+				"@types/node": "^20.1.0",
+				"@wdio/config": "8.16.20",
+				"@wdio/logger": "8.16.17",
+				"@wdio/protocols": "8.16.5",
+				"@wdio/repl": "8.10.1",
+				"@wdio/types": "8.16.12",
+				"@wdio/utils": "8.16.17",
+				"archiver": "^6.0.0",
+				"aria-query": "^5.0.0",
+				"css-shorthand-properties": "^1.1.1",
+				"css-value": "^0.0.1",
+				"devtools-protocol": "^0.0.1203626",
+				"grapheme-splitter": "^1.0.2",
+				"import-meta-resolve": "^3.0.0",
+				"is-plain-obj": "^4.1.0",
+				"lodash.clonedeep": "^4.5.0",
+				"lodash.zip": "^4.2.0",
+				"minimatch": "^9.0.0",
+				"puppeteer-core": "^20.9.0",
+				"query-selector-shadow-dom": "^1.0.0",
+				"resq": "^1.9.1",
+				"rgb2hex": "0.2.5",
+				"serialize-error": "^11.0.1",
+				"webdriver": "8.16.20"
+			},
+			"engines": {
+				"node": "^16.13 || >=18"
+			},
+			"peerDependencies": {
+				"devtools": "^8.14.0"
+			},
+			"peerDependenciesMeta": {
+				"devtools": {
+					"optional": true
 				}
 			}
 		},
-		"snapshot-diff": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/snapshot-diff/-/snapshot-diff-0.8.1.tgz",
-			"integrity": "sha512-vPb0JHikbZM8kK4A/ktIEbM5FwHEgGQ330ARxgaccDcVgapY73sjKpK03uxJGHb0eDViFWTch0OY3ax52AIKGw==",
-			"dev": true,
-			"requires": {
-				"jest-diff": "^26.1.0",
-				"jest-snapshot": "^26.1.0",
-				"pretty-format": "^26.1.0"
-			},
-			"dependencies": {
-				"@jest/types": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-					"integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-coverage": "^2.0.0",
-						"@types/istanbul-reports": "^3.0.0",
-						"@types/node": "*",
-						"@types/yargs": "^15.0.0",
-						"chalk": "^4.0.0"
-					}
-				},
-				"@types/istanbul-reports": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-					"integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-					"dev": true,
-					"requires": {
-						"@types/istanbul-lib-report": "*"
-					}
-				},
-				"@types/prettier": {
-					"version": "2.3.2",
-					"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz",
-					"integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-					"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"graceful-fs": {
-					"version": "4.2.6",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-					"integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-					"dev": true
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"jest-matcher-utils": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
-					"integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
-					"dev": true,
-					"requires": {
-						"chalk": "^4.0.0",
-						"jest-diff": "^26.6.2",
-						"jest-get-type": "^26.3.0",
-						"pretty-format": "^26.6.2"
-					}
-				},
-				"jest-message-util": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
-					"integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.0.0",
-						"@jest/types": "^26.6.2",
-						"@types/stack-utils": "^2.0.0",
-						"chalk": "^4.0.0",
-						"graceful-fs": "^4.2.4",
-						"micromatch": "^4.0.2",
-						"pretty-format": "^26.6.2",
-						"slash": "^3.0.0",
-						"stack-utils": "^2.0.2"
-					}
-				},
-				"jest-resolve": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
-					"integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^26.6.2",
-						"chalk": "^4.0.0",
-						"graceful-fs": "^4.2.4",
-						"jest-pnp-resolver": "^1.2.2",
-						"jest-util": "^26.6.2",
-						"read-pkg-up": "^7.0.1",
-						"resolve": "^1.18.1",
-						"slash": "^3.0.0"
-					}
-				},
-				"jest-snapshot": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
-					"integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
-					"dev": true,
-					"requires": {
-						"@babel/types": "^7.0.0",
-						"@jest/types": "^26.6.2",
-						"@types/babel__traverse": "^7.0.4",
-						"@types/prettier": "^2.0.0",
-						"chalk": "^4.0.0",
-						"expect": "^26.6.2",
-						"graceful-fs": "^4.2.4",
-						"jest-diff": "^26.6.2",
-						"jest-get-type": "^26.3.0",
-						"jest-haste-map": "^26.6.2",
-						"jest-matcher-utils": "^26.6.2",
-						"jest-message-util": "^26.6.2",
-						"jest-resolve": "^26.6.2",
-						"natural-compare": "^1.4.0",
-						"pretty-format": "^26.6.2",
-						"semver": "^7.3.2"
-					}
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"normalize-package-data": {
-					"version": "2.5.0",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-					"integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^2.1.4",
-						"resolve": "^1.10.0",
-						"semver": "2 || 3 || 4 || 5",
-						"validate-npm-package-license": "^3.0.1"
-					},
-					"dependencies": {
-						"semver": {
-							"version": "5.7.1",
-							"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-							"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-							"dev": true
-						}
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"parse-json": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-					"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-					"dev": true,
-					"requires": {
-						"@babel/code-frame": "^7.0.0",
-						"error-ex": "^1.3.1",
-						"json-parse-even-better-errors": "^2.3.0",
-						"lines-and-columns": "^1.1.6"
-					}
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"path-parse": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-					"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"pretty-format": {
-					"version": "26.6.2",
-					"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-					"integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-					"dev": true,
-					"requires": {
-						"@jest/types": "^26.6.2",
-						"ansi-regex": "^5.0.0",
-						"ansi-styles": "^4.0.0",
-						"react-is": "^17.0.1"
-					}
-				},
-				"react-is": {
-					"version": "17.0.1",
-					"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-					"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
-					"dev": true
-				},
-				"read-pkg": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-					"integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-					"dev": true,
-					"requires": {
-						"@types/normalize-package-data": "^2.4.0",
-						"normalize-package-data": "^2.5.0",
-						"parse-json": "^5.0.0",
-						"type-fest": "^0.6.0"
-					},
-					"dependencies": {
-						"type-fest": {
-							"version": "0.6.0",
-							"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-							"integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-							"dev": true
-						}
-					}
-				},
-				"read-pkg-up": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-					"integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.1.0",
-						"read-pkg": "^5.2.0",
-						"type-fest": "^0.8.1"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"type-fest": {
-					"version": "0.8.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-					"integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-					"dev": true
-				}
+		"node_modules/webdriverio/node_modules/@types/node": {
+			"version": "20.16.15",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.15.tgz",
+			"integrity": "sha512-DV58qQz9dBMqVVn+qnKwGa51QzCD4YM/tQM16qLKxdf5tqz5W4QwtrMzjSTbabN1cFTSuyxVYBy+QWHjWW8X/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~6.19.2"
 			}
 		},
-		"sockjs": {
-			"version": "0.3.24",
-			"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-			"integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+		"node_modules/webdriverio/node_modules/aria-query": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
 			"dev": true,
-			"requires": {
-				"faye-websocket": "^0.11.3",
-				"uuid": "^8.3.2",
-				"websocket-driver": "^0.7.4"
-			},
-			"dependencies": {
-				"uuid": {
-					"version": "8.3.2",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-					"dev": true
-				}
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
-		"socks": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/socks/-/socks-2.7.0.tgz",
-			"integrity": "sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==",
+		"node_modules/webdriverio/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
 			"dev": true,
-			"requires": {
-				"ip": "^2.0.0",
-				"smart-buffer": "^4.2.0"
-			},
 			"dependencies": {
-				"ip": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-					"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
-					"dev": true
-				}
+				"balanced-match": "^1.0.0"
 			}
 		},
-		"socks-proxy-agent": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
-			"integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
+		"node_modules/webdriverio/node_modules/devtools-protocol": {
+			"version": "0.0.1203626",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1203626.tgz",
+			"integrity": "sha512-nEzHZteIUZfGCZtTiS1fRpC8UZmsfD1SiyPvaUNvS13dvKf666OAm8YTi0+Ca3n1nLEyu49Cy4+dPWpaHFJk9g==",
+			"dev": true
+		},
+		"node_modules/webdriverio/node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
 			"dev": true,
-			"requires": {
-				"agent-base": "^6.0.2",
-				"debug": "^4.3.3",
-				"socks": "^2.6.2"
+			"engines": {
+				"node": ">=12"
 			},
-			"dependencies": {
-				"debug": {
-					"version": "4.3.4",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"sort-keys": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-			"integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
+		"node_modules/webdriverio/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
 			"dev": true,
-			"requires": {
-				"is-plain-obj": "^1.0.0"
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
 			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/webdriverio/node_modules/puppeteer-core": {
+			"version": "20.9.0",
+			"resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-20.9.0.tgz",
+			"integrity": "sha512-H9fYZQzMTRrkboEfPmf7m3CLDN6JvbxXA3qTtS+dFt27tR+CsFHzPsT6pzp6lYL6bJbAPaR0HaPO6uSi+F94Pg==",
+			"dev": true,
 			"dependencies": {
-				"is-plain-obj": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-					"dev": true
+				"@puppeteer/browsers": "1.4.6",
+				"chromium-bidi": "0.4.16",
+				"cross-fetch": "4.0.0",
+				"debug": "4.3.4",
+				"devtools-protocol": "0.0.1147663",
+				"ws": "8.13.0"
+			},
+			"engines": {
+				"node": ">=16.3.0"
+			},
+			"peerDependencies": {
+				"typescript": ">= 4.7.4"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
-		"source-list-map": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz",
-			"integrity": "sha512-I2UmuJSRr/T8jisiROLU3A3ltr+swpniSmNPI4Ml3ZCX6tVnDsuZzK7F2hl5jTqbZBWCEKlj5HRQiPExXLgE8A==",
+		"node_modules/webdriverio/node_modules/puppeteer-core/node_modules/devtools-protocol": {
+			"version": "0.0.1147663",
+			"resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1147663.tgz",
+			"integrity": "sha512-hyWmRrexdhbZ1tcJUGpO95ivbRhWXz++F4Ko+n21AY5PNln2ovoJw+8ZMNDTtip+CNFQfrtLVh/w4009dXO/eQ==",
 			"dev": true
 		},
-		"source-map": {
-			"version": "0.5.7",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+		"node_modules/webdriverio/node_modules/serialize-error": {
+			"version": "11.0.3",
+			"resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-11.0.3.tgz",
+			"integrity": "sha512-2G2y++21dhj2R7iHAdd0FIzjGwuKZld+7Pl/bTU6YIkrC2ZMbVUjm+luj6A6V34Rv9XfKJDKpTWu9W4Gse1D9g==",
+			"dev": true,
+			"dependencies": {
+				"type-fest": "^2.12.2"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"source-map-js": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true
+		"node_modules/webdriverio/node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"dev": true,
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"source-map-loader": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.0.tgz",
-			"integrity": "sha512-GKGWqWvYr04M7tn8dryIWvb0s8YM41z82iQv01yBtIylgxax0CwvSy6gc2Y02iuXwEfGWRlMicH0nvms9UZphw==",
+		"node_modules/webdriverio/node_modules/undici-types": {
+			"version": "6.19.8",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+			"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
 			"dev": true,
-			"requires": {
-				"abab": "^2.0.5",
-				"iconv-lite": "^0.6.2",
-				"source-map-js": "^0.6.2"
+			"license": "MIT"
+		},
+		"node_modules/webdriverio/node_modules/ws": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
+			"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.0.0"
 			},
-			"dependencies": {
-				"iconv-lite": {
-					"version": "0.6.3",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-					"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3.0.0"
-					}
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"source-map-js": {
-					"version": "0.6.2",
-					"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-					"integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
-					"dev": true
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"source-map-resolve": {
-			"version": "0.5.2",
-			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
-			"integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==",
-			"requires": {
-				"atob": "^2.1.1",
-				"decode-uri-component": "^0.2.0",
-				"resolve-url": "^0.2.1",
-				"source-map-url": "^0.4.0",
-				"urix": "^0.1.0"
+		"node_modules/webidl-conversions": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+		},
+		"node_modules/webpack": {
+			"version": "5.97.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.0.tgz",
+			"integrity": "sha512-CWT8v7ShSfj7tGs4TLRtaOLmOCPWhoKEvp+eA7FVx8Xrjb3XfT0aXdxDItnRZmE8sHcH+a8ayDrJCOjXKxVFfQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/eslint-scope": "^3.7.7",
+				"@types/estree": "^1.0.6",
+				"@webassemblyjs/ast": "^1.14.1",
+				"@webassemblyjs/wasm-edit": "^1.14.1",
+				"@webassemblyjs/wasm-parser": "^1.14.1",
+				"acorn": "^8.14.0",
+				"browserslist": "^4.24.0",
+				"chrome-trace-event": "^1.0.2",
+				"enhanced-resolve": "^5.17.1",
+				"es-module-lexer": "^1.2.1",
+				"eslint-scope": "5.1.1",
+				"events": "^3.2.0",
+				"glob-to-regexp": "^0.4.1",
+				"graceful-fs": "^4.2.11",
+				"json-parse-even-better-errors": "^2.3.1",
+				"loader-runner": "^4.2.0",
+				"mime-types": "^2.1.27",
+				"neo-async": "^2.6.2",
+				"schema-utils": "^3.2.0",
+				"tapable": "^2.1.1",
+				"terser-webpack-plugin": "^5.3.10",
+				"watchpack": "^2.4.1",
+				"webpack-sources": "^3.2.3"
+			},
+			"bin": {
+				"webpack": "bin/webpack.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependenciesMeta": {
+				"webpack-cli": {
+					"optional": true
+				}
 			}
 		},
-		"source-map-support": {
-			"version": "0.5.16",
-			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-			"integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
-			"requires": {
-				"buffer-from": "^1.0.0",
-				"source-map": "^0.6.0"
-			},
+		"node_modules/webpack-bundle-analyzer": {
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.1.tgz",
+			"integrity": "sha512-jnd6EoYrf9yMxCyYDPj8eutJvtjQNp8PHmni/e/ulydHBWhT5J3menXt3HEkScsu9YqMAcG4CfFjs3rj5pVU1w==",
 			"dependencies": {
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				}
+				"@discoveryjs/json-ext": "0.5.7",
+				"acorn": "^8.0.4",
+				"acorn-walk": "^8.0.0",
+				"commander": "^7.2.0",
+				"escape-string-regexp": "^4.0.0",
+				"gzip-size": "^6.0.0",
+				"is-plain-object": "^5.0.0",
+				"lodash.debounce": "^4.0.8",
+				"lodash.escape": "^4.0.1",
+				"lodash.flatten": "^4.4.0",
+				"lodash.invokemap": "^4.6.0",
+				"lodash.pullall": "^4.2.0",
+				"lodash.uniqby": "^4.7.0",
+				"opener": "^1.5.2",
+				"picocolors": "^1.0.0",
+				"sirv": "^2.0.3",
+				"ws": "^7.3.1"
+			},
+			"bin": {
+				"webpack-bundle-analyzer": "lib/bin/analyzer.js"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
 			}
 		},
-		"source-map-url": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-			"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
+		"node_modules/webpack-bundle-analyzer/node_modules/acorn": {
+			"version": "8.13.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+			"integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
 		},
-		"space-separated-tokens": {
-			"version": "1.1.5",
-			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
-			"integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
-			"dev": true
+		"node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": {
+			"version": "8.3.4",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+			"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+			"license": "MIT",
+			"dependencies": {
+				"acorn": "^8.11.0"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
 		},
-		"spawn-command": {
-			"version": "0.0.2-1",
-			"resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-			"integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=",
-			"dev": true
+		"node_modules/webpack-bundle-analyzer/node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"engines": {
+				"node": ">= 10"
+			}
 		},
-		"spawnd": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/spawnd/-/spawnd-6.0.2.tgz",
-			"integrity": "sha512-+YJtx0dvy2wt304MrHD//tASc84zinBUYU1jacPBzrjhZUd7RsDo25krxr4HUHAQzEQFuMAs4/p+yLYU5ciZ1w==",
-			"dev": true,
-			"requires": {
-				"exit": "^0.1.2",
-				"signal-exit": "^3.0.6",
-				"tree-kill": "^1.2.2"
+		"node_modules/webpack-bundle-analyzer/node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/webpack-bundle-analyzer/node_modules/gzip-size": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+			"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+			"dependencies": {
+				"duplexer": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=10"
 			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/webpack-cli": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+			"integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
 			"dependencies": {
-				"signal-exit": {
-					"version": "3.0.6",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",
-					"integrity": "sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==",
-					"dev": true
+				"@discoveryjs/json-ext": "^0.5.0",
+				"@webpack-cli/configtest": "^2.1.1",
+				"@webpack-cli/info": "^2.0.2",
+				"@webpack-cli/serve": "^2.0.5",
+				"colorette": "^2.0.14",
+				"commander": "^10.0.1",
+				"cross-spawn": "^7.0.3",
+				"envinfo": "^7.7.3",
+				"fastest-levenshtein": "^1.0.12",
+				"import-local": "^3.0.2",
+				"interpret": "^3.1.1",
+				"rechoir": "^0.8.0",
+				"webpack-merge": "^5.7.3"
+			},
+			"bin": {
+				"webpack-cli": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "5.x.x"
+			},
+			"peerDependenciesMeta": {
+				"@webpack-cli/generators": {
+					"optional": true
+				},
+				"webpack-bundle-analyzer": {
+					"optional": true
+				},
+				"webpack-dev-server": {
+					"optional": true
 				}
 			}
 		},
-		"spdx-correct": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
-			"integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
-			"dev": true,
-			"requires": {
-				"spdx-expression-parse": "^3.0.0",
-				"spdx-license-ids": "^3.0.0"
+		"node_modules/webpack-cli/node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
+		},
+		"node_modules/webpack-cli/node_modules/commander": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+			"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+			"engines": {
+				"node": ">=14"
 			}
 		},
-		"spdx-exceptions": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
-			"integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==",
-			"dev": true
+		"node_modules/webpack-cli/node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
 		},
-		"spdx-expression-parse": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-			"integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
-			"dev": true,
-			"requires": {
-				"spdx-exceptions": "^2.1.0",
-				"spdx-license-ids": "^3.0.0"
+		"node_modules/webpack-cli/node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"spdx-license-ids": {
+		"node_modules/webpack-cli/node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/webpack-cli/node_modules/shebang-regex": {
 			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
-			"integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA==",
-			"dev": true
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"spdy": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-			"integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-			"dev": true,
-			"requires": {
-				"debug": "^4.1.0",
-				"handle-thing": "^2.0.0",
-				"http-deceiver": "^1.2.7",
-				"select-hose": "^2.0.0",
-				"spdy-transport": "^3.0.0"
+		"node_modules/webpack-cli/node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
 			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/webpack-dev-middleware": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz",
+			"integrity": "sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
+				"colorette": "^2.0.10",
+				"memfs": "^3.4.12",
+				"mime-types": "^2.1.31",
+				"range-parser": "^1.2.1",
+				"schema-utils": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"webpack": {
+					"optional": true
 				}
 			}
 		},
-		"spdy-transport": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-			"integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+		"node_modules/webpack-dev-middleware/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
 			"dev": true,
-			"requires": {
-				"debug": "^4.1.0",
-				"detect-node": "^2.0.4",
-				"hpack.js": "^2.1.6",
-				"obuf": "^1.1.2",
-				"readable-stream": "^3.0.6",
-				"wbuf": "^1.7.3"
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dev": true,
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
 			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/webpack-dev-middleware/node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+			"dev": true
+		},
+		"node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"dev": true
+		},
+		"node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"dev": true,
 			"dependencies": {
-				"debug": {
-					"version": "4.3.2",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-					"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/webpack-dev-server": {
+			"version": "4.15.2",
+			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
+			"integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/bonjour": "^3.5.9",
+				"@types/connect-history-api-fallback": "^1.3.5",
+				"@types/express": "^4.17.13",
+				"@types/serve-index": "^1.9.1",
+				"@types/serve-static": "^1.13.10",
+				"@types/sockjs": "^0.3.33",
+				"@types/ws": "^8.5.5",
+				"ansi-html-community": "^0.0.8",
+				"bonjour-service": "^1.0.11",
+				"chokidar": "^3.5.3",
+				"colorette": "^2.0.10",
+				"compression": "^1.7.4",
+				"connect-history-api-fallback": "^2.0.0",
+				"default-gateway": "^6.0.3",
+				"express": "^4.17.3",
+				"graceful-fs": "^4.2.6",
+				"html-entities": "^2.3.2",
+				"http-proxy-middleware": "^2.0.3",
+				"ipaddr.js": "^2.0.1",
+				"launch-editor": "^2.6.0",
+				"open": "^8.0.9",
+				"p-retry": "^4.5.0",
+				"rimraf": "^3.0.2",
+				"schema-utils": "^4.0.0",
+				"selfsigned": "^2.1.1",
+				"serve-index": "^1.9.1",
+				"sockjs": "^0.3.24",
+				"spdy": "^4.0.2",
+				"webpack-dev-middleware": "^5.3.4",
+				"ws": "^8.13.0"
+			},
+			"bin": {
+				"webpack-dev-server": "bin/webpack-dev-server.js"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.37.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"webpack": {
+					"optional": true
 				},
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
+				"webpack-cli": {
+					"optional": true
 				}
 			}
 		},
-		"specificity": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
-			"integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
-			"dev": true
+		"node_modules/webpack-dev-server/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
 		},
-		"split": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
-			"integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
-			"dev": true,
-			"requires": {
-				"through": "2"
+		"node_modules/webpack-dev-server/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
 			}
 		},
-		"split-on-first": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
-			"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+		"node_modules/webpack-dev-server/node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+			"license": "MIT"
 		},
-		"split-string": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-			"integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-			"requires": {
-				"extend-shallow": "^3.0.0"
+		"node_modules/webpack-dev-server/node_modules/ipaddr.js": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+			"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
 			}
 		},
-		"split2": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
-			"integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
-			"dev": true,
-			"requires": {
-				"readable-stream": "^3.0.0"
-			},
+		"node_modules/webpack-dev-server/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"license": "MIT",
 			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
-			}
-		},
-		"sprintf-js": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.1.tgz",
-			"integrity": "sha1-Nr54Mgr+WAH2zqPueLblqrlA6gw="
-		},
-		"sshpk": {
-			"version": "1.14.2",
-			"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
-			"integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
-			"dev": true,
-			"requires": {
-				"asn1": "~0.2.3",
-				"assert-plus": "^1.0.0",
-				"bcrypt-pbkdf": "^1.0.0",
-				"dashdash": "^1.12.0",
-				"ecc-jsbn": "~0.1.1",
-				"getpass": "^0.1.1",
-				"jsbn": "~0.1.0",
-				"safer-buffer": "^2.0.2",
-				"tweetnacl": "~0.14.0"
-			}
-		},
-		"ssri": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-			"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
-			"dev": true,
-			"requires": {
-				"figgy-pudding": "^3.5.1"
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"stable": {
-			"version": "0.1.8",
-			"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-			"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-			"dev": true
+		"node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
 		},
-		"stack-utils": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
-			"integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
-			"dev": true,
-			"requires": {
-				"escape-string-regexp": "^2.0.0"
+		"node_modules/webpack-dev-server/node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"license": "MIT",
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
 			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/webpack-dev-server/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"license": "MIT",
 			"dependencies": {
-				"escape-string-regexp": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-					"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-					"dev": true
-				}
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"stackframe": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
-			"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
+		"node_modules/webpack-dev-server/node_modules/webpack-dev-middleware": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+			"integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
+			"license": "MIT",
+			"dependencies": {
+				"colorette": "^2.0.10",
+				"memfs": "^3.4.3",
+				"mime-types": "^2.1.31",
+				"range-parser": "^1.2.1",
+				"schema-utils": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.0.0 || ^5.0.0"
+			}
 		},
-		"stacktrace-parser": {
-			"version": "0.1.10",
-			"resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz",
-			"integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==",
-			"requires": {
-				"type-fest": "^0.7.1"
+		"node_modules/webpack-dev-server/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
 			},
-			"dependencies": {
-				"type-fest": {
-					"version": "0.7.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz",
-					"integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"state-toggle": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.1.tgz",
-			"integrity": "sha512-Qe8QntFrrpWTnHwvwj2FZTgv+PKIsp0B9VxLzLLbSpPXWOgRgc5LVj/aTiSfK1RqIeF9jeC1UeOH8Q8y60A7og==",
-			"dev": true
+		"node_modules/webpack-hot-middleware": {
+			"version": "2.26.1",
+			"resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz",
+			"integrity": "sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==",
+			"dev": true,
+			"dependencies": {
+				"ansi-html-community": "0.0.8",
+				"html-entities": "^2.1.0",
+				"strip-ansi": "^6.0.0"
+			}
 		},
-		"static-extend": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-			"integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-			"requires": {
-				"define-property": "^0.2.5",
-				"object-copy": "^0.1.0"
-			},
+		"node_modules/webpack-merge": {
+			"version": "5.8.0",
+			"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+			"integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
 			"dependencies": {
-				"define-property": {
-					"version": "0.2.5",
-					"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-					"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-					"requires": {
-						"is-descriptor": "^0.1.0"
-					}
-				}
+				"clone-deep": "^4.0.1",
+				"wildcard": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10.0.0"
 			}
 		},
-		"statuses": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-			"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+		"node_modules/webpack-sources": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
 		},
-		"store2": {
-			"version": "2.12.0",
-			"resolved": "https://registry.npmjs.org/store2/-/store2-2.12.0.tgz",
-			"integrity": "sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==",
+		"node_modules/webpack-virtual-modules": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+			"integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
 			"dev": true
 		},
-		"storybook-source-link": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/storybook-source-link/-/storybook-source-link-2.0.3.tgz",
-			"integrity": "sha512-Vw/ECmTObbcGbS6mX2bolQUF6c/Z4iBtcJBQh6T/3uFDz8pmzGo840hfSJDKXwwatHWDZ1V70jDLCDb4fbXQYg==",
-			"dev": true
+		"node_modules/webpack/node_modules/@types/estree": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+			"license": "MIT"
 		},
-		"stream-browserify": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-			"integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
-			"dev": true,
-			"requires": {
-				"inherits": "~2.0.1",
-				"readable-stream": "^2.0.2"
+		"node_modules/webpack/node_modules/@webassemblyjs/ast": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+			"integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@webassemblyjs/helper-numbers": "1.13.2",
+				"@webassemblyjs/helper-wasm-bytecode": "1.13.2"
 			}
 		},
-		"stream-buffers": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
-			"integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ="
+		"node_modules/webpack/node_modules/@webassemblyjs/helper-api-error": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+			"integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+			"license": "MIT"
 		},
-		"stream-each": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.2.tgz",
-			"integrity": "sha512-mc1dbFhGBxvTM3bIWmAAINbqiuAk9TATcfIQC8P+/+HJefgaiTlMn2dHvkX8qlI12KeYKSQ1Ua9RrIqrn1VPoA==",
-			"dev": true,
-			"requires": {
-				"end-of-stream": "^1.1.0",
-				"stream-shift": "^1.0.0"
-			}
+		"node_modules/webpack/node_modules/@webassemblyjs/helper-buffer": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+			"integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+			"license": "MIT"
 		},
-		"stream-http": {
-			"version": "2.8.3",
-			"resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-			"integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
-			"dev": true,
-			"requires": {
-				"builtin-status-codes": "^3.0.0",
-				"inherits": "^2.0.1",
-				"readable-stream": "^2.3.6",
-				"to-arraybuffer": "^1.0.0",
-				"xtend": "^4.0.0"
+		"node_modules/webpack/node_modules/@webassemblyjs/helper-wasm-bytecode": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+			"integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+			"license": "MIT"
+		},
+		"node_modules/webpack/node_modules/@webassemblyjs/helper-wasm-section": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+			"integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+			"license": "MIT",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.14.1",
+				"@webassemblyjs/helper-buffer": "1.14.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+				"@webassemblyjs/wasm-gen": "1.14.1"
 			}
 		},
-		"stream-shift": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
-			"integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
-			"dev": true
+		"node_modules/webpack/node_modules/@webassemblyjs/ieee754": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+			"integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@xtuc/ieee754": "^1.2.0"
+			}
 		},
-		"strict-uri-encode": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
-			"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+		"node_modules/webpack/node_modules/@webassemblyjs/leb128": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+			"integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@xtuc/long": "4.2.2"
+			}
 		},
-		"string-hash-64": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz",
-			"integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw=="
+		"node_modules/webpack/node_modules/@webassemblyjs/utf8": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+			"integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+			"license": "MIT"
 		},
-		"string-length": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-			"integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-			"dev": true,
-			"requires": {
-				"char-regex": "^1.0.2",
-				"strip-ansi": "^6.0.0"
-			},
+		"node_modules/webpack/node_modules/@webassemblyjs/wasm-edit": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+			"integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+			"license": "MIT",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@webassemblyjs/ast": "1.14.1",
+				"@webassemblyjs/helper-buffer": "1.14.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+				"@webassemblyjs/helper-wasm-section": "1.14.1",
+				"@webassemblyjs/wasm-gen": "1.14.1",
+				"@webassemblyjs/wasm-opt": "1.14.1",
+				"@webassemblyjs/wasm-parser": "1.14.1",
+				"@webassemblyjs/wast-printer": "1.14.1"
 			}
 		},
-		"string-width": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-			"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-			"dev": true,
-			"requires": {
-				"is-fullwidth-code-point": "^2.0.0",
-				"strip-ansi": "^4.0.0"
+		"node_modules/webpack/node_modules/@webassemblyjs/wasm-gen": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+			"integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+			"license": "MIT",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.14.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+				"@webassemblyjs/ieee754": "1.13.2",
+				"@webassemblyjs/leb128": "1.13.2",
+				"@webassemblyjs/utf8": "1.13.2"
 			}
 		},
-		"string.prototype.matchall": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
-			"integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1",
-				"get-intrinsic": "^1.1.1",
-				"has-symbols": "^1.0.3",
-				"internal-slot": "^1.0.3",
-				"regexp.prototype.flags": "^1.4.1",
-				"side-channel": "^1.0.4"
-			},
+		"node_modules/webpack/node_modules/@webassemblyjs/wasm-opt": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+			"integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+			"license": "MIT",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"get-intrinsic": {
-					"version": "1.1.1",
-					"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-					"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.1"
-					}
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"@webassemblyjs/ast": "1.14.1",
+				"@webassemblyjs/helper-buffer": "1.14.1",
+				"@webassemblyjs/wasm-gen": "1.14.1",
+				"@webassemblyjs/wasm-parser": "1.14.1"
 			}
 		},
-		"string.prototype.padend": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz",
-			"integrity": "sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1"
-			},
+		"node_modules/webpack/node_modules/@webassemblyjs/wasm-parser": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+			"integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+			"license": "MIT",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				},
-				"es-abstract": {
-					"version": "1.19.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz",
-					"integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-symbols": "^1.0.2",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.1",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.1",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.1",
-						"object-inspect": "^1.11.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"string.prototype.trimend": "^1.0.4",
-						"string.prototype.trimstart": "^1.0.4",
-						"unbox-primitive": "^1.0.1"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						},
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.1.tgz",
-					"integrity": "sha512-If7BjFlpkzzBeV1cqgT3OSWT3azyoxDGajR+iGnFBfVV2EWyDyWaZZW2ERDjUaY2QM8i5jI3Sj7mhsM4DDAqWA==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					},
-					"dependencies": {
-						"object-keys": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-							"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-							"dev": true
-						}
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-					"integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-					"integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3"
-					}
-				}
+				"@webassemblyjs/ast": "1.14.1",
+				"@webassemblyjs/helper-api-error": "1.13.2",
+				"@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+				"@webassemblyjs/ieee754": "1.13.2",
+				"@webassemblyjs/leb128": "1.13.2",
+				"@webassemblyjs/utf8": "1.13.2"
 			}
 		},
-		"string.prototype.padstart": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/string.prototype.padstart/-/string.prototype.padstart-3.1.3.tgz",
-			"integrity": "sha512-NZydyOMtYxpTjGqp0VN5PYUF/tsU15yDMZnUdj16qRUIUiMJkHHSDElYyQFrMu+/WloTpA7MQSiADhBicDfaoA==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"define-properties": "^1.1.3",
-				"es-abstract": "^1.19.1"
-			},
+		"node_modules/webpack/node_modules/@webassemblyjs/wast-printer": {
+			"version": "1.14.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+			"integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+			"license": "MIT",
 			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+				"@webassemblyjs/ast": "1.14.1",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/webpack/node_modules/acorn": {
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+			"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
 			}
 		},
-		"string.prototype.trimstart": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
-			"integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
-			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.0",
-				"define-properties": "^1.1.3"
+		"node_modules/webpack/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
 			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/webpack/node_modules/enhanced-resolve": {
+			"version": "5.17.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+			"integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+			"license": "MIT",
 			"dependencies": {
-				"define-properties": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-					"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-					"dev": true,
-					"requires": {
-						"object-keys": "^1.0.12"
-					}
-				}
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
 			}
 		},
-		"string_decoder": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-			"requires": {
-				"safe-buffer": "~5.1.0"
+		"node_modules/webpack/node_modules/eslint-scope": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
 			}
 		},
-		"stringify-entities": {
-			"version": "1.3.2",
-			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.2.tgz",
-			"integrity": "sha512-nrBAQClJAPN2p+uGCVJRPIPakKeKWZ9GtBCmormE7pWOSlHat7+x5A8gx85M7HM5Dt0BP3pP5RhVW77WdbJJ3A==",
-			"dev": true,
-			"requires": {
-				"character-entities-html4": "^1.0.0",
-				"character-entities-legacy": "^1.0.0",
-				"is-alphanumerical": "^1.0.0",
-				"is-hexadecimal": "^1.0.0"
+		"node_modules/webpack/node_modules/loader-runner": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+			"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+			"engines": {
+				"node": ">=6.11.5"
 			}
 		},
-		"stringify-object": {
+		"node_modules/webpack/node_modules/schema-utils": {
 			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-			"integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-			"dev": true,
-			"requires": {
-				"get-own-enumerable-property-symbols": "^3.0.0",
-				"is-obj": "^1.0.1",
-				"is-regexp": "^1.0.0"
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/webpack/node_modules/tapable": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/webpack/node_modules/watchpack": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+			"integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
+			"license": "MIT",
+			"dependencies": {
+				"glob-to-regexp": "^0.4.1",
+				"graceful-fs": "^4.1.2"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/websocket-driver": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+			"integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+			"dependencies": {
+				"http-parser-js": ">=0.5.1",
+				"safe-buffer": ">=5.1.0",
+				"websocket-extensions": ">=0.1.1"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/websocket-extensions": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+			"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/whatwg-encoding": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+			"integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=18"
 			}
 		},
-		"strip-ansi": {
+		"node_modules/whatwg-fetch": {
+			"version": "3.6.20",
+			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
+			"integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
+		},
+		"node_modules/whatwg-mimetype": {
 			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-			"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+			"integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/whatwg-url": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"dependencies": {
+				"tr46": "~0.0.3",
+				"webidl-conversions": "^3.0.0"
+			}
+		},
+		"node_modules/whatwg-url-without-unicode": {
+			"version": "8.0.0-1",
+			"resolved": "https://registry.npmjs.org/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-1.tgz",
+			"integrity": "sha512-0Uy8mjsG5O8Y53327XL+ZqsrMdxO1CL/6m840SmW5iyRWFvU2zlxS2RzpD3pFFVKYOKCmsKn5JKzWxQ+bImnWA==",
 			"dev": true,
-			"requires": {
-				"ansi-regex": "^3.0.0"
+			"dependencies": {
+				"webidl-conversions": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"strip-bom": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-			"integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+		"node_modules/whatwg-url-without-unicode/node_modules/webidl-conversions": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+			"integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"is-utf8": "^0.2.0"
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"strip-eof": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-			"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
+		"node_modules/which": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+			"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"which": "bin/which"
+			}
 		},
-		"strip-final-newline": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-			"dev": true
+		"node_modules/which-boxed-primitive": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+			"integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+			"dependencies": {
+				"is-bigint": "^1.0.1",
+				"is-boolean-object": "^1.1.0",
+				"is-number-object": "^1.0.4",
+				"is-string": "^1.0.5",
+				"is-symbol": "^1.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
 		},
-		"strip-indent": {
+		"node_modules/which-collection": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-			"integrity": "sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==",
+			"resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+			"integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
 			"dev": true,
-			"optional": true,
-			"requires": {
-				"get-stdin": "^4.0.1"
+			"dependencies": {
+				"is-map": "^2.0.1",
+				"is-set": "^2.0.1",
+				"is-weakmap": "^2.0.1",
+				"is-weakset": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"strip-json-comments": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-			"dev": true
+		"node_modules/which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="
 		},
-		"strip-outer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-			"integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-			"dev": true,
-			"requires": {
-				"escape-string-regexp": "^1.0.2"
+		"node_modules/which-typed-array": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
+			"integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+			"dependencies": {
+				"available-typed-arrays": "^1.0.5",
+				"call-bind": "^1.0.2",
+				"for-each": "^0.3.3",
+				"gopd": "^1.0.1",
+				"has-tostringtag": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"strong-log-transformer": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz",
-			"integrity": "sha512-B3Hgul+z0L9a236FAUC9iZsL+nVHgoCJnqCbN588DjYxvGXaXaaFbfmQ/JhvKjZwsOukuR72XbHv71Qkug0HxA==",
+		"node_modules/wide-align": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+			"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
 			"dev": true,
-			"requires": {
-				"duplexer": "^0.1.1",
-				"minimist": "^1.2.0",
-				"through": "^2.3.4"
+			"dependencies": {
+				"string-width": "^1.0.2 || 2 || 3 || 4"
 			}
 		},
-		"style-loader": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.2.1.tgz",
-			"integrity": "sha512-1k9ZosJCRFaRbY6hH49JFlRB0fVSbmnyq1iTPjNxUmGVjBNEmwrrHPenhlp+Lgo51BojHSf6pl2FcqYaN3PfVg==",
-			"dev": true
-		},
-		"style-search": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
-			"integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
-			"dev": true
+		"node_modules/wildcard": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+			"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
 		},
-		"style-to-object": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
-			"integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+		"node_modules/windows-release": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/windows-release/-/windows-release-3.2.0.tgz",
+			"integrity": "sha512-QTlz2hKLrdqukrsapKsINzqMgOUpQW268eJ0OaOpJN32h272waxR9fkB9VoWRtK7uKHG5EHJcTXQBD8XZVJkFA==",
 			"dev": true,
-			"requires": {
-				"inline-style-parser": "0.1.1"
+			"dependencies": {
+				"execa": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"style-value-types": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
-			"integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
-			"requires": {
-				"hey-listen": "^1.0.8",
-				"tslib": "^2.1.0"
+		"node_modules/windows-release/node_modules/cross-spawn": {
+			"version": "6.0.5",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+			"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+			"dev": true,
+			"dependencies": {
+				"nice-try": "^1.0.4",
+				"path-key": "^2.0.1",
+				"semver": "^5.5.0",
+				"shebang-command": "^1.2.0",
+				"which": "^1.2.9"
+			},
+			"engines": {
+				"node": ">=4.8"
 			}
 		},
-		"stylehacks": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
-			"integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
+		"node_modules/windows-release/node_modules/execa": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+			"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
 			"dev": true,
-			"requires": {
-				"browserslist": "^4.16.0",
-				"postcss-selector-parser": "^6.0.4"
+			"dependencies": {
+				"cross-spawn": "^6.0.0",
+				"get-stream": "^4.0.0",
+				"is-stream": "^1.1.0",
+				"npm-run-path": "^2.0.0",
+				"p-finally": "^1.0.0",
+				"signal-exit": "^3.0.0",
+				"strip-eof": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"stylelint": {
-			"version": "14.2.0",
-			"resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.2.0.tgz",
-			"integrity": "sha512-i0DrmDXFNpDsWiwx6SPRs4/pyw4kvZgqpDGvsTslQMY7hpUl6r33aQvNSn6cnTg2wtZ9rreFElI7XAKpOWi1vQ==",
+		"node_modules/windows-release/node_modules/get-stream": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+			"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
 			"dev": true,
-			"requires": {
-				"balanced-match": "^2.0.0",
-				"colord": "^2.9.2",
-				"cosmiconfig": "^7.0.1",
-				"debug": "^4.3.3",
-				"execall": "^2.0.0",
-				"fast-glob": "^3.2.7",
-				"fastest-levenshtein": "^1.0.12",
-				"file-entry-cache": "^6.0.1",
-				"get-stdin": "^8.0.0",
-				"global-modules": "^2.0.0",
-				"globby": "^11.0.4",
-				"globjoin": "^0.1.4",
-				"html-tags": "^3.1.0",
-				"ignore": "^5.2.0",
-				"import-lazy": "^4.0.0",
-				"imurmurhash": "^0.1.4",
-				"is-plain-object": "^5.0.0",
-				"known-css-properties": "^0.24.0",
-				"mathml-tag-names": "^2.1.3",
-				"meow": "^9.0.0",
-				"micromatch": "^4.0.4",
-				"normalize-path": "^3.0.0",
-				"normalize-selector": "^0.2.0",
-				"picocolors": "^1.0.0",
-				"postcss": "^8.3.11",
-				"postcss-media-query-parser": "^0.2.3",
-				"postcss-resolve-nested-selector": "^0.1.1",
-				"postcss-safe-parser": "^6.0.0",
-				"postcss-selector-parser": "^6.0.7",
-				"postcss-value-parser": "^4.1.0",
-				"resolve-from": "^5.0.0",
-				"specificity": "^0.4.1",
-				"string-width": "^4.2.3",
-				"strip-ansi": "^6.0.1",
-				"style-search": "^0.1.0",
-				"svg-tags": "^1.0.0",
-				"table": "^6.7.5",
-				"v8-compile-cache": "^2.3.0",
-				"write-file-atomic": "^3.0.3"
-			},
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"balanced-match": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
-					"integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"camelcase": {
-					"version": "5.3.1",
-					"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-					"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-					"dev": true
-				},
-				"camelcase-keys": {
-					"version": "6.2.2",
-					"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-					"integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
-					"dev": true,
-					"requires": {
-						"camelcase": "^5.3.1",
-						"map-obj": "^4.0.0",
-						"quick-lru": "^4.0.1"
-					}
-				},
-				"cosmiconfig": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
-					"integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
-					"dev": true,
-					"requires": {
-						"@types/parse-json": "^4.0.0",
-						"import-fresh": "^3.2.1",
-						"parse-json": "^5.0.0",
-						"path-type": "^4.0.0",
-						"yaml": "^1.10.0"
-					}
-				},
-				"debug": {
-					"version": "4.3.3",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-					"integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-					"dev": true,
-					"requires": {
-						"ms": "2.1.2"
-					}
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"get-stdin": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-					"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
-					"dev": true
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"globby": {
-					"version": "11.1.0",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.2.9",
-						"ignore": "^5.2.0",
-						"merge2": "^1.4.1",
-						"slash": "^3.0.0"
-					},
-					"dependencies": {
-						"fast-glob": {
-							"version": "3.2.11",
-							"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-							"integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
-							"dev": true,
-							"requires": {
-								"@nodelib/fs.stat": "^2.0.2",
-								"@nodelib/fs.walk": "^1.2.3",
-								"glob-parent": "^5.1.2",
-								"merge2": "^1.3.0",
-								"micromatch": "^4.0.4"
-							}
-						}
-					}
-				},
-				"hosted-git-info": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
-					"integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
-					"dev": true,
-					"requires": {
-						"lru-cache": "^6.0.0"
-					}
-				},
-				"ignore": {
-					"version": "5.2.0",
-					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
-					"dev": true
-				},
-				"import-fresh": {
-					"version": "3.3.0",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-					"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					},
-					"dependencies": {
-						"resolve-from": {
-							"version": "4.0.0",
-							"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-							"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-							"dev": true
-						}
-					}
-				},
-				"indent-string": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-					"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-					"dev": true
-				},
-				"is-core-module": {
-					"version": "2.8.1",
-					"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
-					"integrity": "sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==",
-					"dev": true,
-					"requires": {
-						"has": "^1.0.3"
-					}
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-plain-object": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-					"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-					"dev": true
-				},
-				"lru-cache": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"map-obj": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
-					"integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
-					"dev": true
-				},
-				"meow": {
-					"version": "9.0.0",
-					"resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-					"integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
-					"dev": true,
-					"requires": {
-						"@types/minimist": "^1.2.0",
-						"camelcase-keys": "^6.2.2",
-						"decamelize": "^1.2.0",
-						"decamelize-keys": "^1.1.0",
-						"hard-rejection": "^2.1.0",
-						"minimist-options": "4.1.0",
-						"normalize-package-data": "^3.0.0",
-						"read-pkg-up": "^7.0.1",
-						"redent": "^3.0.0",
-						"trim-newlines": "^3.0.0",
-						"type-fest": "^0.18.0",
-						"yargs-parser": "^20.2.3"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"minimist-options": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
-					"integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
-					"dev": true,
-					"requires": {
-						"arrify": "^1.0.1",
-						"is-plain-obj": "^1.1.0",
-						"kind-of": "^6.0.3"
-					},
-					"dependencies": {
-						"is-plain-obj": {
-							"version": "1.1.0",
-							"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-							"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-							"dev": true
-						}
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"normalize-package-data": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
-					"integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
-					"dev": true,
-					"requires": {
-						"hosted-git-info": "^4.0.1",
-						"is-core-module": "^2.5.0",
-						"semver": "^7.3.4",
-						"validate-npm-package-license": "^3.0.1"
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true
-				},
-				"path-type": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-					"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-					"dev": true
-				},
-				"picomatch": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-					"dev": true
-				},
-				"postcss-selector-parser": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
-					"integrity": "sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==",
-					"dev": true,
-					"requires": {
-						"cssesc": "^3.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				},
-				"quick-lru": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
-					"integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
-					"dev": true
-				},
-				"redent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-					"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-					"dev": true,
-					"requires": {
-						"indent-string": "^4.0.0",
-						"strip-indent": "^3.0.0"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"strip-indent": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-					"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-					"dev": true,
-					"requires": {
-						"min-indent": "^1.0.0"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"trim-newlines": {
-					"version": "3.0.1",
-					"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
-					"integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
-					"dev": true
-				},
-				"type-fest": {
-					"version": "0.18.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-					"integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
-					"dev": true
-				},
-				"v8-compile-cache": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-					"integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-					"dev": true
-				},
-				"write-file-atomic": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-					"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-					"dev": true,
-					"requires": {
-						"imurmurhash": "^0.1.4",
-						"is-typedarray": "^1.0.0",
-						"signal-exit": "^3.0.2",
-						"typedarray-to-buffer": "^3.1.5"
-					}
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				},
-				"yaml": {
-					"version": "1.10.2",
-					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-					"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-					"dev": true
-				}
+				"pump": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
 			}
 		},
-		"stylelint-config-recommended": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz",
-			"integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
-			"dev": true
+		"node_modules/windows-release/node_modules/pump": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+			"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"end-of-stream": "^1.1.0",
+				"once": "^1.3.1"
+			}
 		},
-		"stylelint-config-recommended-scss": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz",
-			"integrity": "sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==",
+		"node_modules/windows-release/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"dev": true,
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/winston": {
+			"version": "3.9.0",
+			"resolved": "https://registry.npmjs.org/winston/-/winston-3.9.0.tgz",
+			"integrity": "sha512-jW51iW/X95BCW6MMtZWr2jKQBP4hV5bIDq9QrIjfDk6Q9QuxvTKEAlpUNAzP+HYHFFCeENhph16s0zEunu4uuQ==",
 			"dev": true,
-			"requires": {
-				"postcss-scss": "^4.0.2",
-				"stylelint-config-recommended": "^6.0.0",
-				"stylelint-scss": "^4.0.0"
-			},
 			"dependencies": {
-				"postcss-scss": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.3.tgz",
-					"integrity": "sha512-j4KxzWovfdHsyxwl1BxkUal/O4uirvHgdzMKS1aWJBAV0qh2qj5qAZqpeBfVUYGWv+4iK9Az7SPyZ4fyNju1uA==",
-					"dev": true
-				}
+				"@colors/colors": "1.5.0",
+				"@dabh/diagnostics": "^2.0.2",
+				"async": "^3.2.3",
+				"is-stream": "^2.0.0",
+				"logform": "^2.4.0",
+				"one-time": "^1.0.0",
+				"readable-stream": "^3.4.0",
+				"safe-stable-stringify": "^2.3.1",
+				"stack-trace": "0.0.x",
+				"triple-beam": "^1.3.0",
+				"winston-transport": "^4.5.0"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
 			}
 		},
-		"stylelint-scss": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.1.0.tgz",
-			"integrity": "sha512-BNYTo7MMamhFOlcaAWp2dMpjg6hPyM/FFqfDIYzmYVLMmQJqc8lWRIiTqP4UX5bresj9Vo0dKC6odSh43VP2NA==",
+		"node_modules/winston-transport": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.5.0.tgz",
+			"integrity": "sha512-YpZzcUzBedhlTAfJg6vJDlyEai/IFMIVcaEZZyl3UXIl4gmqRpU7AE89AHLkbzLUsv0NVmw7ts+iztqKxxPW1Q==",
 			"dev": true,
-			"requires": {
-				"lodash": "^4.17.21",
-				"postcss-media-query-parser": "^0.2.3",
-				"postcss-resolve-nested-selector": "^0.1.1",
-				"postcss-selector-parser": "^6.0.6",
-				"postcss-value-parser": "^4.1.0"
+			"dependencies": {
+				"logform": "^2.3.2",
+				"readable-stream": "^3.6.0",
+				"triple-beam": "^1.3.0"
 			},
+			"engines": {
+				"node": ">= 6.4.0"
+			}
+		},
+		"node_modules/winston-transport/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
 			"dependencies": {
-				"postcss-selector-parser": {
-					"version": "6.0.8",
-					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
-					"integrity": "sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==",
-					"dev": true,
-					"requires": {
-						"cssesc": "^3.0.0",
-						"util-deprecate": "^1.0.2"
-					}
-				},
-				"postcss-value-parser": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-					"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-					"dev": true
-				}
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"stylis": {
-			"version": "4.0.10",
-			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
-			"integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+		"node_modules/winston/node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
-		"sudo-prompt": {
-			"version": "9.2.1",
-			"resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
-			"integrity": "sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw=="
+		"node_modules/winston/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dev": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
 		},
-		"supports-color": {
-			"version": "5.4.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
-			"integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
-			"requires": {
-				"has-flag": "^3.0.0"
+		"node_modules/word-wrap": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"supports-hyperlinks": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.0.0.tgz",
-			"integrity": "sha512-bFhn0MQ8qefLyJ3K7PpHiPUTuTVPWw6RXfaMeV6xgJLXtBbszyboz1bvGTVv4R0YpQm2DqlXXn0fFHhxUHVE5w==",
+		"node_modules/wordwrap": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+			"integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q=="
+		},
+		"node_modules/worker-farm": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+			"integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
 			"dev": true,
-			"requires": {
-				"has-flag": "^4.0.0",
-				"supports-color": "^7.0.0"
-			},
 			"dependencies": {
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"supports-color": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				}
+				"errno": "~0.1.7"
 			}
 		},
-		"supports-preserve-symlinks-flag": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-			"dev": true
+		"node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"svg-parser": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-			"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
-			"dev": true
+		"node_modules/wrap-ansi-cjs": {
+			"name": "wrap-ansi",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
 		},
-		"svg-tags": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
-			"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
+		"node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
-		"svgo": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
-			"integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==",
+		"node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 			"dev": true,
-			"requires": {
-				"@trysound/sax": "0.1.1",
-				"chalk": "^4.1.0",
-				"commander": "^7.1.0",
-				"css-select": "^4.1.3",
-				"css-tree": "^1.1.2",
-				"csso": "^4.2.0",
-				"stable": "^0.1.8"
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
 			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/wrap-ansi/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dependencies": {
-				"commander": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-					"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-					"dev": true
-				},
-				"css-select": {
-					"version": "4.1.3",
-					"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-					"integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0",
-						"css-what": "^5.0.0",
-						"domhandler": "^4.2.0",
-						"domutils": "^2.6.0",
-						"nth-check": "^2.0.0"
-					}
-				},
-				"css-what": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
-					"integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
-					"dev": true
-				},
-				"dom-serializer": {
-					"version": "1.3.2",
-					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-					"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.0.1",
-						"domhandler": "^4.2.0",
-						"entities": "^2.0.0"
-					}
-				},
-				"domelementtype": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-					"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-					"dev": true
-				},
-				"domhandler": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
-					"integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
-					"dev": true,
-					"requires": {
-						"domelementtype": "^2.2.0"
-					}
-				},
-				"domutils": {
-					"version": "2.7.0",
-					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-					"integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-					"dev": true,
-					"requires": {
-						"dom-serializer": "^1.0.1",
-						"domelementtype": "^2.2.0",
-						"domhandler": "^4.2.0"
-					}
-				},
-				"entities": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-					"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-					"dev": true
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+		},
+		"node_modules/write-file-atomic": {
+			"version": "2.4.3",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+			"integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+			"dependencies": {
+				"graceful-fs": "^4.1.11",
+				"imurmurhash": "^0.1.4",
+				"signal-exit": "^3.0.2"
+			}
+		},
+		"node_modules/write-json-file": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
+			"integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
+			"dependencies": {
+				"detect-indent": "^5.0.0",
+				"graceful-fs": "^4.1.15",
+				"make-dir": "^2.1.0",
+				"pify": "^4.0.1",
+				"sort-keys": "^2.0.0",
+				"write-file-atomic": "^2.4.2"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/write-json-file/node_modules/make-dir": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+			"dependencies": {
+				"pify": "^4.0.1",
+				"semver": "^5.6.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/write-json-file/node_modules/pify": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/write-json-file/node_modules/semver": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+			"bin": {
+				"semver": "bin/semver"
+			}
+		},
+		"node_modules/write-pkg": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-4.0.0.tgz",
+			"integrity": "sha512-v2UQ+50TNf2rNHJ8NyWttfm/EJUBWMJcx6ZTYZr6Qp52uuegWw/lBkCtCbnYZEmPRNL61m+u67dAmGxo+HTULA==",
+			"dependencies": {
+				"sort-keys": "^2.0.0",
+				"type-fest": "^0.4.1",
+				"write-json-file": "^3.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/write-pkg/node_modules/type-fest": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.4.1.tgz",
+			"integrity": "sha512-IwzA/LSfD2vC1/YDYMv/zHP4rDF1usCwllsDpbolT3D4fUepIO7f9K70jjmUewU/LmGUKJcwcVtDCpnKk4BPMw==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/ws": {
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
 				},
-				"nth-check": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-					"integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
-					"dev": true,
-					"requires": {
-						"boolbase": "^1.0.0"
-					}
+				"utf-8-validate": {
+					"optional": true
 				}
 			}
 		},
-		"symbol-observable": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-			"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-			"dev": true
+		"node_modules/x-is-string": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+			"integrity": "sha512-GojqklwG8gpzOVEVki5KudKNoq7MbbjYZCbyWzEz7tyPA7eleiE0+ePwOWQQRb5fm86rD3S8Tc0tSFf3AOv50w=="
 		},
-		"symbol-tree": {
-			"version": "3.2.4",
-			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+		"node_modules/xdg-basedir": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+			"integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/xml": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+			"integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==",
 			"dev": true
 		},
-		"symbol.prototype.description": {
+		"node_modules/xml-name-validator": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+			"integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/xmlbuilder": {
+			"version": "15.1.1",
+			"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+			"integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+			"dev": true,
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/xmlchars": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+		},
+		"node_modules/xtend": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+			"engines": {
+				"node": ">=0.4"
+			}
+		},
+		"node_modules/y-indexeddb": {
+			"version": "9.0.11",
+			"resolved": "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.11.tgz",
+			"integrity": "sha512-HOKQ70qW1h2WJGtOKu9rE8fbX86ExVZedecndMuhwax3yM4DQsQzCTGHt/jvTrFZr/9Ahvd8neD6aZ4dMMjtdg==",
+			"dependencies": {
+				"lib0": "^0.2.74"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			},
+			"peerDependencies": {
+				"yjs": "^13.0.0"
+			}
+		},
+		"node_modules/y-protocols": {
 			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/symbol.prototype.description/-/symbol.prototype.description-1.0.5.tgz",
-			"integrity": "sha512-x738iXRYsrAt9WBhRCVG5BtIC3B7CUkFwbHW2zOvGtwM33s7JjrCDyq8V0zgMYVb5ymsL8+qkzzpANH63CPQaQ==",
+			"resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.5.tgz",
+			"integrity": "sha512-Wil92b7cGk712lRHDqS4T90IczF6RkcvCwAD0A2OPg+adKmOe+nOiT/N2hvpQIWS3zfjmtL4CPaH5sIW1Hkm/A==",
+			"dependencies": {
+				"lib0": "^0.2.42"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			}
+		},
+		"node_modules/y-webrtc": {
+			"version": "10.2.5",
+			"resolved": "https://registry.npmjs.org/y-webrtc/-/y-webrtc-10.2.5.tgz",
+			"integrity": "sha512-ZyBNvTI5L28sQ2PQI0T/JvyWgvuTq05L21vGkIlcvNLNSJqAaLCBJRe3FHEqXoaogqWmRcEAKGfII4ErNXMnNw==",
+			"dependencies": {
+				"lib0": "^0.2.42",
+				"simple-peer": "^9.11.0",
+				"y-protocols": "^1.0.5"
+			},
+			"bin": {
+				"y-webrtc-signaling": "bin/server.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
+			},
+			"optionalDependencies": {
+				"ws": "^7.2.0"
+			}
+		},
+		"node_modules/y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+		},
+		"node_modules/yallist": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+			"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+		},
+		"node_modules/yaml": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/yargs": {
+			"version": "16.2.0",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+			"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
 			"dev": true,
-			"requires": {
-				"call-bind": "^1.0.2",
-				"get-symbol-description": "^1.0.0",
-				"has-symbols": "^1.0.2",
-				"object.getownpropertydescriptors": "^2.1.2"
-			},
-			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"define-properties": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-					"integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-					"dev": true,
-					"requires": {
-						"has-property-descriptors": "^1.0.0",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"es-abstract": {
-					"version": "1.20.1",
-					"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-					"integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"es-to-primitive": "^1.2.1",
-						"function-bind": "^1.1.1",
-						"function.prototype.name": "^1.1.5",
-						"get-intrinsic": "^1.1.1",
-						"get-symbol-description": "^1.0.0",
-						"has": "^1.0.3",
-						"has-property-descriptors": "^1.0.0",
-						"has-symbols": "^1.0.3",
-						"internal-slot": "^1.0.3",
-						"is-callable": "^1.2.4",
-						"is-negative-zero": "^2.0.2",
-						"is-regex": "^1.1.4",
-						"is-shared-array-buffer": "^1.0.2",
-						"is-string": "^1.0.7",
-						"is-weakref": "^1.0.2",
-						"object-inspect": "^1.12.0",
-						"object-keys": "^1.1.1",
-						"object.assign": "^4.1.2",
-						"regexp.prototype.flags": "^1.4.3",
-						"string.prototype.trimend": "^1.0.5",
-						"string.prototype.trimstart": "^1.0.5",
-						"unbox-primitive": "^1.0.2"
-					},
-					"dependencies": {
-						"get-intrinsic": {
-							"version": "1.1.1",
-							"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-							"integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-							"dev": true,
-							"requires": {
-								"function-bind": "^1.1.1",
-								"has": "^1.0.3",
-								"has-symbols": "^1.0.1"
-							}
-						}
-					}
-				},
-				"es-to-primitive": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-					"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-					"dev": true,
-					"requires": {
-						"is-callable": "^1.1.4",
-						"is-date-object": "^1.0.1",
-						"is-symbol": "^1.0.2"
-					}
-				},
-				"function.prototype.name": {
-					"version": "1.1.5",
-					"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-					"integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"es-abstract": "^1.19.0",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"functions-have-names": {
-					"version": "1.2.3",
-					"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-					"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-					"dev": true
-				},
-				"has-bigints": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-					"integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-					"dev": true
-				},
-				"has-symbols": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-					"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-					"dev": true
-				},
-				"is-callable": {
-					"version": "1.2.4",
-					"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-					"integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-					"dev": true
-				},
-				"is-negative-zero": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-					"integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-					"integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-shared-array-buffer": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-					"integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"is-string": {
-					"version": "1.0.7",
-					"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-					"integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-					"dev": true,
-					"requires": {
-						"has-tostringtag": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-weakref": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-					"integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2"
-					}
-				},
-				"object-inspect": {
-					"version": "1.12.2",
-					"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-					"integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-					"dev": true
-				},
-				"object.assign": {
-					"version": "4.1.2",
-					"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-					"integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0",
-						"define-properties": "^1.1.3",
-						"has-symbols": "^1.0.1",
-						"object-keys": "^1.1.1"
-					}
-				},
-				"object.getownpropertydescriptors": {
-					"version": "2.1.4",
-					"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz",
-					"integrity": "sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==",
-					"dev": true,
-					"requires": {
-						"array.prototype.reduce": "^1.0.4",
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.20.1"
-					}
-				},
-				"regexp.prototype.flags": {
-					"version": "1.4.3",
-					"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
-					"integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.3",
-						"functions-have-names": "^1.2.2"
-					}
-				},
-				"string.prototype.trimend": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-					"integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"string.prototype.trimstart": {
-					"version": "1.0.5",
-					"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-					"integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"define-properties": "^1.1.4",
-						"es-abstract": "^1.19.5"
-					}
-				},
-				"unbox-primitive": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-					"integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-bigints": "^1.0.2",
-						"has-symbols": "^1.0.3",
-						"which-boxed-primitive": "^1.0.2"
-					}
-				}
+			"dependencies": {
+				"cliui": "^7.0.2",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.0",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^20.2.2"
+			},
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"synchronous-promise": {
-			"version": "2.0.15",
-			"resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz",
-			"integrity": "sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==",
-			"dev": true
+		"node_modules/yargs-parser": {
+			"version": "20.2.4",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+			"integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"table": {
-			"version": "6.8.0",
-			"resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
-			"integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
+		"node_modules/yargs/node_modules/cliui": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+			"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
 			"dev": true,
-			"requires": {
-				"ajv": "^8.0.1",
-				"lodash.truncate": "^4.4.2",
-				"slice-ansi": "^4.0.0",
-				"string-width": "^4.2.3",
-				"strip-ansi": "^6.0.1"
-			},
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"astral-regex": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
-					"integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-					"dev": true
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"slice-ansi": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
-					"integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"astral-regex": "^2.0.0",
-						"is-fullwidth-code-point": "^3.0.0"
-					}
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
-			}
-		},
-		"tannin": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/tannin/-/tannin-1.2.0.tgz",
-			"integrity": "sha512-U7GgX/RcSeUETbV7gYgoz8PD7Ni4y95pgIP/Z6ayI3CfhSujwKEBlGFTCRN+Aqnuyf4AN2yHL+L8x+TCGjb9uA==",
-			"requires": {
-				"@tannin/plural-forms": "^1.1.0"
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^7.0.0"
 			}
 		},
-		"tapable": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",
-			"integrity": "sha512-dQRhbNQkRnaqauC7WqSJ21EEksgT0fYZX2lqXzGkpo8JNig9zGZTYoMGvyI2nWmXlE2VSVXVDu7wLVGu/mQEsg==",
+		"node_modules/yargs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
 			"dev": true
 		},
-		"tar": {
-			"version": "6.1.11",
-			"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
-			"integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
+		"node_modules/yargs/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
 			"dev": true,
-			"requires": {
-				"chownr": "^2.0.0",
-				"fs-minipass": "^2.0.0",
-				"minipass": "^3.0.0",
-				"minizlib": "^2.1.1",
-				"mkdirp": "^1.0.3",
-				"yallist": "^4.0.0"
-			},
-			"dependencies": {
-				"chownr": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-					"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-					"dev": true
-				},
-				"minipass": {
-					"version": "3.1.6",
-					"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
-					"integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
-					"dev": true,
-					"requires": {
-						"yallist": "^4.0.0"
-					}
-				},
-				"mkdirp": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-					"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-					"dev": true
-				},
-				"yallist": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"tar-fs": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
-			"integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+		"node_modules/yargs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dev": true,
-			"requires": {
-				"chownr": "^1.1.1",
-				"mkdirp-classic": "^0.5.2",
-				"pump": "^3.0.0",
-				"tar-stream": "^2.1.4"
-			},
 			"dependencies": {
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				}
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"tar-stream": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-			"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+		"node_modules/yargs/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 			"dev": true,
-			"requires": {
-				"bl": "^4.0.3",
-				"end-of-stream": "^1.4.1",
-				"fs-constants": "^1.0.0",
-				"inherits": "^2.0.3",
-				"readable-stream": "^3.1.1"
-			},
 			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"telejson": {
-			"version": "5.3.3",
-			"resolved": "https://registry.npmjs.org/telejson/-/telejson-5.3.3.tgz",
-			"integrity": "sha512-PjqkJZpzEggA9TBpVtJi1LVptP7tYtXB6rEubwlHap76AMjzvOdKX41CxyaW7ahhzDU1aftXnMCx5kAPDZTQBA==",
-			"dev": true,
-			"requires": {
-				"@types/is-function": "^1.0.0",
-				"global": "^4.4.0",
-				"is-function": "^1.0.2",
-				"is-regex": "^1.1.2",
-				"is-symbol": "^1.0.3",
-				"isobject": "^4.0.0",
-				"lodash": "^4.17.21",
-				"memoizerific": "^1.11.3"
-			},
-			"dependencies": {
-				"call-bind": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-					"integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-					"dev": true,
-					"requires": {
-						"function-bind": "^1.1.1",
-						"get-intrinsic": "^1.0.2"
-					}
-				},
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"is-regex": {
-					"version": "1.1.3",
-					"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-					"integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.2",
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.4",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-					"integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.2"
-					}
-				},
-				"isobject": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
-					"integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==",
-					"dev": true
-				}
+		"node_modules/yargs/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
 			}
 		},
-		"temp": {
-			"version": "0.8.3",
-			"resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
-			"integrity": "sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k=",
-			"requires": {
-				"os-tmpdir": "^1.0.0",
-				"rimraf": "~2.2.6"
-			},
+		"node_modules/yauzl": {
+			"version": "2.10.0",
+			"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+			"integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
 			"dependencies": {
-				"rimraf": {
-					"version": "2.2.8",
-					"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
-					"integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI="
-				}
+				"buffer-crc32": "~0.2.3",
+				"fd-slicer": "~1.1.0"
 			}
 		},
-		"temp-dir": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-			"integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
-			"dev": true
-		},
-		"terminal-link": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.0.0.tgz",
-			"integrity": "sha512-rdBAY35jUvVapqCuhehjenLbYY73cVgRQ6podD6u9EDBomBBHjCOtmq2InPgPpTysOIOsQ5PdBzwSC/sKjv6ew==",
-			"dev": true,
-			"requires": {
-				"ansi-escapes": "^4.2.1",
-				"supports-hyperlinks": "^2.0.0"
-			},
+		"node_modules/yjs": {
+			"version": "13.6.7",
+			"resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.7.tgz",
+			"integrity": "sha512-mCZTh4kjvUS2DnaktsYN6wLH3WZCJBLqrTdkWh1bIDpA/sB/GNFaLA/dyVJj2Hc7KwONuuoC/vWe9bwBBosZLQ==",
 			"dependencies": {
-				"ansi-escapes": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.2.1.tgz",
-					"integrity": "sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q==",
-					"dev": true,
-					"requires": {
-						"type-fest": "^0.5.2"
-					}
-				},
-				"type-fest": {
-					"version": "0.5.2",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.5.2.tgz",
-					"integrity": "sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==",
-					"dev": true
-				}
+				"lib0": "^0.2.74"
+			},
+			"engines": {
+				"node": ">=16.0.0",
+				"npm": ">=8.0.0"
+			},
+			"funding": {
+				"type": "GitHub Sponsors ❤",
+				"url": "https://github.com/sponsors/dmonad"
 			}
 		},
-		"terser": {
-			"version": "4.8.1",
-			"resolved": "https://registry.npmjs.org/terser/-/terser-4.8.1.tgz",
-			"integrity": "sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==",
+		"node_modules/yn": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+			"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
 			"dev": true,
-			"requires": {
-				"commander": "^2.20.0",
-				"source-map": "~0.6.1",
-				"source-map-support": "~0.5.12"
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/yocto-queue": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"engines": {
+				"node": ">=10"
 			},
-			"dependencies": {
-				"commander": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-					"dev": true
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"terser-webpack-plugin": {
-			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz",
-			"integrity": "sha512-C2WkFwstHDhVEmsmlCxrXUtVklS+Ir1A7twrYzrDrQQOIMOaVAYykaoo/Aq1K0QRkMoY2hhvDQY1cm4jnIMFwA==",
+		"node_modules/zip-stream": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-5.0.1.tgz",
+			"integrity": "sha512-UfZ0oa0C8LI58wJ+moL46BDIMgCQbnsb+2PoiJYtonhBsMh2bq1eRBVkvjfVsqbEHd9/EgKPUuL9saSSsec8OA==",
 			"dev": true,
-			"requires": {
-				"jest-worker": "^27.0.2",
-				"p-limit": "^3.1.0",
-				"schema-utils": "^3.0.0",
-				"serialize-javascript": "^6.0.0",
-				"source-map": "^0.6.1",
-				"terser": "^5.7.0"
-			},
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.8",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
-					"integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
-					"dev": true
-				},
-				"acorn": {
-					"version": "8.8.0",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-					"integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"commander": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-					"dev": true
-				},
-				"fast-deep-equal": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-					"dev": true
-				},
-				"has-flag": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-					"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-					"dev": true
-				},
-				"jest-worker": {
-					"version": "27.0.6",
-					"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.6.tgz",
-					"integrity": "sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA==",
-					"dev": true,
-					"requires": {
-						"@types/node": "*",
-						"merge-stream": "^2.0.0",
-						"supports-color": "^8.0.0"
-					}
-				},
-				"p-limit": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-					"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-					"dev": true,
-					"requires": {
-						"yocto-queue": "^0.1.0"
-					}
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"serialize-javascript": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-					"integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
-					"dev": true,
-					"requires": {
-						"randombytes": "^2.1.0"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-				},
-				"source-map-support": {
-					"version": "0.5.19",
-					"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-					"integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-					"requires": {
-						"buffer-from": "^1.0.0",
-						"source-map": "^0.6.0"
-					}
-				},
-				"supports-color": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-					"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-					"dev": true,
-					"requires": {
-						"has-flag": "^4.0.0"
-					}
-				},
-				"terser": {
-					"version": "5.15.0",
-					"resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-					"integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
-					"dev": true,
-					"requires": {
-						"@jridgewell/source-map": "^0.3.2",
-						"acorn": "^8.5.0",
-						"commander": "^2.20.0",
-						"source-map-support": "~0.5.20"
-					},
-					"dependencies": {
-						"source-map-support": {
-							"version": "0.5.21",
-							"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-							"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-							"dev": true,
-							"requires": {
-								"buffer-from": "^1.0.0",
-								"source-map": "^0.6.0"
-							}
-						}
-					}
-				}
+				"archiver-utils": "^4.0.1",
+				"compress-commons": "^5.0.1",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
 			}
 		},
-		"test-exclude": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-			"integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+		"node_modules/zip-stream/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
 			"dev": true,
-			"requires": {
-				"@istanbuljs/schema": "^0.1.2",
-				"glob": "^7.1.4",
-				"minimatch": "^3.0.4"
-			},
 			"dependencies": {
-				"glob": {
-					"version": "7.1.6",
-					"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-					"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-					"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"
-					}
-				}
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
 			}
 		},
-		"text-extensions": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",
-			"integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
-			"dev": true
-		},
-		"text-table": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-			"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
-			"dev": true
+		"node_modules/zod": {
+			"version": "3.23.8",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+			"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
 		},
-		"throat": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
-			"integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="
+		"node_modules/zod-validation-error": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.0.tgz",
+			"integrity": "sha512-ZOPR9SVY6Pb2qqO5XHt+MkkTRxGXb4EVtnjc9JpXUOtUB1T9Ru7mZOT361AN3MsetVe7R0a1KZshJDZdgp9miQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"zod": "^3.18.0"
+			}
 		},
-		"throttle-debounce": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-			"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-			"dev": true
+		"packages/a11y": {
+			"name": "@wordpress/a11y",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/dom-ready": "*",
+				"@wordpress/i18n": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"through": {
-			"version": "2.3.8",
-			"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-			"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-			"dev": true
+		"packages/annotations": {
+			"name": "@wordpress/annotations",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/data": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/rich-text": "*",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
 		},
-		"through2": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
-			"integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
-			"requires": {
-				"readable-stream": "^2.1.5",
-				"xtend": "~4.0.1"
+		"packages/annotations/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
 			}
 		},
-		"thunky": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-			"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-			"dev": true
+		"packages/api-fetch": {
+			"name": "@wordpress/api-fetch",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/i18n": "*",
+				"@wordpress/url": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"timers-browserify": {
-			"version": "2.0.12",
-			"resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-			"integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
-			"dev": true,
-			"requires": {
-				"setimmediate": "^1.0.4"
+		"packages/autop": {
+			"name": "@wordpress/autop",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"timsort": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-			"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-			"dev": true
+		"packages/babel-plugin-import-jsx-pragma": {
+			"name": "@wordpress/babel-plugin-import-jsx-pragma",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.25.7"
+			}
 		},
-		"tiny-emitter": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-			"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+		"packages/babel-plugin-makepot": {
+			"name": "@wordpress/babel-plugin-makepot",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"deepmerge": "^4.3.0",
+				"gettext-parser": "^1.3.1",
+				"is-plain-object": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.25.7"
+			}
 		},
-		"tinycolor2": {
-			"version": "1.4.2",
-			"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-			"integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
+		"packages/babel-preset-default": {
+			"name": "@wordpress/babel-preset-default",
+			"version": "8.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/core": "7.25.7",
+				"@babel/plugin-transform-react-jsx": "7.25.7",
+				"@babel/plugin-transform-runtime": "7.25.7",
+				"@babel/preset-env": "7.25.7",
+				"@babel/preset-typescript": "7.25.7",
+				"@babel/runtime": "7.25.7",
+				"@wordpress/browserslist-config": "*",
+				"@wordpress/warning": "*",
+				"browserslist": "^4.21.10",
+				"core-js": "^3.31.0",
+				"react": "^18.3.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"tmp": {
-			"version": "0.0.33",
-			"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-			"integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-			"dev": true,
-			"requires": {
-				"os-tmpdir": "~1.0.2"
+		"packages/babel-preset-default/node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.7.tgz",
+			"integrity": "sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.25.7",
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"tmpl": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-			"integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
+		"packages/babel-preset-default/node_modules/@babel/helper-create-class-features-plugin": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.7.tgz",
+			"integrity": "sha512-bD4WQhbkx80mAyj/WCm4ZHcF4rDxkoLFO6ph8/5/mQ3z4vAzltQXAmbc7GvVJx5H+lk5Mi5EmbTeox5nMGCsbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.7",
+				"@babel/helper-member-expression-to-functions": "^7.25.7",
+				"@babel/helper-optimise-call-expression": "^7.25.7",
+				"@babel/helper-replace-supers": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+				"@babel/traverse": "^7.25.7",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"to-arraybuffer": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-			"integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/helper-member-expression-to-functions": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.7.tgz",
+			"integrity": "sha512-O31Ssjd5K6lPbTX9AAYpSKrZmLeagt9uwschJd+Ixo6QiRyfpvgtVQp8qrDR9UNFjZ8+DO34ZkdrN+BnPXemeA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.25.7",
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+		"packages/babel-preset-default/node_modules/@babel/helper-optimise-call-expression": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.7.tgz",
+			"integrity": "sha512-VAwcwuYhv/AT+Vfr28c9y6SHzTan1ryqrydSTFGjU0uDJHw3uZ+PduI8plCLkRsDnqK2DMEDmwrOQRsK/Ykjng==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"to-object-path": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-			"integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-			"requires": {
-				"kind-of": "^3.0.2"
+		"packages/babel-preset-default/node_modules/@babel/helper-replace-supers": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.7.tgz",
+			"integrity": "sha512-iy8JhqlUW9PtZkd4pHM96v6BdJ66Ba9yWSE4z0W4TvSZwLBPkyDsiIU3ENe4SmrzRBs76F7rQXTy1lYC49n6Lw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-member-expression-to-functions": "^7.25.7",
+				"@babel/helper-optimise-call-expression": "^7.25.7",
+				"@babel/traverse": "^7.25.7"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.7.tgz",
+			"integrity": "sha512-pPbNbchZBkPMD50K0p3JGcFMNLVUCuU/ABybm/PGNj4JiHrpmNyqqCphBk4i19xXtNV0JhldQJJtbSW5aUvbyA==",
+			"license": "MIT",
 			"dependencies": {
-				"kind-of": {
-					"version": "3.2.2",
-					"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-					"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-					"requires": {
-						"is-buffer": "^1.1.5"
-					}
-				}
+				"@babel/traverse": "^7.25.7",
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"to-regex": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-			"integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-			"requires": {
-				"define-property": "^2.0.2",
-				"extend-shallow": "^3.0.2",
-				"regex-not": "^1.0.2",
-				"safe-regex": "^1.1.0"
+		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.7.tgz",
+			"integrity": "sha512-wxyWg2RYaSUYgmd9MR0FyRGyeOMQE/Uzr1wzd/g5cf5bwi9A4v6HFdDm7y1MgDtod/fLOSTZY6jDgV0xU9d5bA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"to-regex-range": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-			"integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-			"requires": {
-				"is-number": "^3.0.0",
-				"repeat-string": "^1.6.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.7.tgz",
+			"integrity": "sha512-Xwg6tZpLxc4iQjorYsyGMyfJE7nP5MV8t/Ka58BgiA7Jw0fRqQNcANlLfdJ/yvBt9z9LD2We+BEkT7vLqZRWng==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+				"@babel/plugin-transform-optional-chaining": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.13.0"
 			}
 		},
-		"toggle-selection": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.7.tgz",
+			"integrity": "sha512-UVATLMidXrnH+GMUIuxq55nejlj02HP7F5ETyBONzP6G87fPBogG4CH6kxrSrdIuAjdwNO9VzyaYsrZPscWUrw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/traverse": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"toidentifier": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-			"integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-import-assertions": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.7.tgz",
+			"integrity": "sha512-ZvZQRmME0zfJnDQnVBKYzHxXT7lYBB3Revz1GuS7oLXWMgqUPX4G+DDbT30ICClht9WKV34QVrZhSw6WdklwZQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"totalist": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
-			"integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-import-attributes": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.7.tgz",
+			"integrity": "sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tough-cookie": {
-			"version": "2.4.3",
-			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
-			"integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
-			"dev": true,
-			"requires": {
-				"psl": "^1.1.24",
-				"punycode": "^1.4.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-typescript": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.7.tgz",
+			"integrity": "sha512-rR+5FDjpCHqqZN2bzZm18bVYGaejGq5ZkpVCJLXor/+zlSrSoc4KWcHI0URVWjl/68Dyr1uwZUz/1njycEAv9g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-arrow-functions": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.7.tgz",
+			"integrity": "sha512-EJN2mKxDwfOUCPxMO6MUI58RN3ganiRAG/MS/S3HfB6QFNjroAMelQo/gybyYq97WerCBAZoyrAoW8Tzdq2jWg==",
+			"license": "MIT",
 			"dependencies": {
-				"punycode": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-					"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-async-to-generator": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.7.tgz",
+			"integrity": "sha512-ZUCjAavsh5CESCmi/xCpX1qcCaAglzs/7tmuvoFnJgA1dM7gQplsguljoTg+Ru8WENpX89cQyAtWoaE0I3X3Pg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-remap-async-to-generator": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"traverse": {
-			"version": "0.6.6",
-			"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
-			"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-block-scoped-functions": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.7.tgz",
+			"integrity": "sha512-xHttvIM9fvqW+0a3tZlYcZYSBpSWzGBFIt/sYG3tcdSzBB8ZeVgz2gBP7Df+sM0N1850jrviYSSeUuc+135dmQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tree-kill": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-			"integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-block-scoping": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.7.tgz",
+			"integrity": "sha512-ZEPJSkVZaeTFG/m2PARwLZQ+OG0vFIhPlKHK/JdIMy8DbRJ/htz6LRrTFtdzxi9EHmcwbNPAKDnadpNSIW+Aow==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"treeverse": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/treeverse/-/treeverse-2.0.0.tgz",
-			"integrity": "sha512-N5gJCkLu1aXccpOTtqV6ddSEi6ZmGkh3hjmbu1IjcavJK4qyOVQmi0myQKM7z5jVGmD68SJoliaVrMmVObhj6A==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-class-properties": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.7.tgz",
+			"integrity": "sha512-mhyfEW4gufjIqYFo9krXHJ3ElbFLIze5IDp+wQTxoPd+mwFb1NxatNAwmv8Q8Iuxv7Zc+q8EkiMQwc9IhyGf4g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"trim": {
-			"version": "0.0.1",
-			"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-			"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-class-static-block": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.25.7.tgz",
+			"integrity": "sha512-rvUUtoVlkDWtDWxGAiiQj0aNktTPn3eFynBcMC2IhsXweehwgdI9ODe+XjWw515kEmv22sSOTp/rxIRuTiB7zg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-class-static-block": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0"
+			}
 		},
-		"trim-newlines": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-			"integrity": "sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==",
-			"dev": true,
-			"optional": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-classes": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.7.tgz",
+			"integrity": "sha512-9j9rnl+YCQY0IGoeipXvnk3niWicIB6kCsWRGLwX241qSXpbA4MKxtp/EdvFxsc4zI5vqfLxzOd0twIJ7I99zg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.7",
+				"@babel/helper-compilation-targets": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-replace-supers": "^7.25.7",
+				"@babel/traverse": "^7.25.7",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"trim-repeated": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-			"integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
-			"dev": true,
-			"requires": {
-				"escape-string-regexp": "^1.0.2"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-computed-properties": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.7.tgz",
+			"integrity": "sha512-QIv+imtM+EtNxg/XBKL3hiWjgdLjMOmZ+XzQwSgmBfKbfxUjBzGgVPklUuE55eq5/uVoh8gg3dqlrwR/jw3ZeA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/template": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"trim-trailing-lines": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.1.tgz",
-			"integrity": "sha512-bWLv9BbWbbd7mlqqs2oQYnLD/U/ZqeJeJwbO0FG2zA1aTq+HTvxfHNKFa/HGCVyJpDiioUYaBhfiT6rgk+l4mg==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-destructuring": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.7.tgz",
+			"integrity": "sha512-xKcfLTlJYUczdaM1+epcdh1UGewJqr9zATgrNHcLBcV2QmfvPPEixo/sK/syql9cEmbr7ulu5HMFG5vbbt/sEA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"trough": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.3.tgz",
-			"integrity": "sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-dotall-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.7.tgz",
+			"integrity": "sha512-kXzXMMRzAtJdDEgQBLF4oaiT6ZCU3oWHgpARnTKDAqPkDJ+bs3NrZb310YYevR5QlRo3Kn7dzzIdHbZm1VzJdQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"ts-dedent": {
-			"version": "2.1.1",
-			"resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.1.1.tgz",
-			"integrity": "sha512-riHuwnzAUCfdIeTBNUq7+Yj+ANnrMXo/7+Z74dIdudS7ys2k8aSGMzpJRMFDF7CLwUTbtvi1ZZff/Wl+XxmqIA==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-duplicate-keys": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.7.tgz",
+			"integrity": "sha512-by+v2CjoL3aMnWDOyCIg+yxU9KXSRa9tN6MbqggH5xvymmr9p4AMjYkNlQy4brMceBnUyHZ9G8RnpvT8wP7Cfg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"ts-essentials": {
-			"version": "2.0.12",
-			"resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
-			"integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-dynamic-import": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.7.tgz",
+			"integrity": "sha512-UvcLuual4h7/GfylKm2IAA3aph9rwvAM2XBA0uPKU3lca+Maai4jBjjEVUS568ld6kJcgbouuumCBhMd/Yz17w==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"ts-pnp": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
-			"integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-exponentiation-operator": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.7.tgz",
+			"integrity": "sha512-yjqtpstPfZ0h/y40fAXRv2snciYr0OAoMXY/0ClC7tm4C/nG5NJKmIItlaYlLbIVAWNfrYuy9dq1bE0SbX0PEg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tsconfig-paths": {
-			"version": "3.11.0",
-			"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz",
-			"integrity": "sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==",
-			"dev": true,
-			"requires": {
-				"@types/json5": "^0.0.29",
-				"json5": "^1.0.1",
-				"minimist": "^1.2.0",
-				"strip-bom": "^3.0.0"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-for-of": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.7.tgz",
+			"integrity": "sha512-n/TaiBGJxYFWvpJDfsxSj9lEEE44BFM1EPGz4KEiTipTgkoFVVcCmzAL3qA7fdQU96dpo4gGf5HBx/KnDvqiHw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-function-name": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.7.tgz",
+			"integrity": "sha512-5MCTNcjCMxQ63Tdu9rxyN6cAWurqfrDZ76qvVPrGYdBxIj+EawuuxTu/+dgJlhK5eRz3v1gLwp6XwS8XaX2NiQ==",
+			"license": "MIT",
 			"dependencies": {
-				"json5": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-					"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-					"dev": true,
-					"requires": {
-						"minimist": "^1.2.0"
-					}
-				},
-				"strip-bom": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-					"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-					"dev": true
-				}
+				"@babel/helper-compilation-targets": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/traverse": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"tslib": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-			"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-json-strings": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.7.tgz",
+			"integrity": "sha512-Ot43PrL9TEAiCe8C/2erAjXMeVSnE/BLEx6eyrKLNFCCw5jvhTHKyHxdI1pA0kz5njZRYAnMO2KObGqOCRDYSA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-json-strings": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tsutils": {
-			"version": "3.21.0",
-			"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-			"integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-			"dev": true,
-			"requires": {
-				"tslib": "^1.8.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-literals": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.7.tgz",
+			"integrity": "sha512-fwzkLrSu2fESR/cm4t6vqd7ebNIopz2QHGtjoU+dswQo/P6lwAG04Q98lliE3jkz/XqnbGFLnUcE0q0CVUf92w==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-logical-assignment-operators": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.7.tgz",
+			"integrity": "sha512-iImzbA55BjiovLyG2bggWS+V+OLkaBorNvc/yJoeeDQGztknRnDdYfp2d/UPmunZYEnZi6Lg8QcTmNMHOB0lGA==",
+			"license": "MIT",
 			"dependencies": {
-				"tslib": {
-					"version": "1.14.1",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-					"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"tty-browserify": {
-			"version": "0.0.0",
-			"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-			"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-member-expression-literals": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.7.tgz",
+			"integrity": "sha512-Std3kXwpXfRV0QtQy5JJcRpkqP8/wG4XL7hSKZmGlxPlDqmpXtEPRmhF7ztnlTCtUN3eXRUJp+sBEZjaIBVYaw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tunnel": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
-			"integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-amd": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.7.tgz",
+			"integrity": "sha512-CgselSGCGzjQvKzghCvDTxKHP3iooenLpJDO842ehn5D2G5fJB222ptnDwQho0WjEvg7zyoxb9P+wiYxiJX5yA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tunnel-agent": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-			"integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-			"dev": true,
-			"requires": {
-				"safe-buffer": "^5.0.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-commonjs": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.7.tgz",
+			"integrity": "sha512-L9Gcahi0kKFYXvweO6n0wc3ZG1ChpSFdgG+eV1WYZ3/dGbJK7vvk91FgGgak8YwRgrCuihF8tE/Xg07EkL5COg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-simple-access": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"turbo-combine-reducers": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/turbo-combine-reducers/-/turbo-combine-reducers-1.0.2.tgz",
-			"integrity": "sha512-gHbdMZlA6Ym6Ur5pSH/UWrNQMIM9IqTH6SoL1DbHpqEdQ8i+cFunSmSlFykPt0eGQwZ4d/XTHOl74H0/kFBVWw=="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-systemjs": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.7.tgz",
+			"integrity": "sha512-t9jZIvBmOXJsiuyOwhrIGs8dVcD6jDyg2icw1VL4A/g+FnWyJKwUfSSU2nwJuMV2Zqui856El9u+ElB+j9fV1g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-validator-identifier": "^7.25.7",
+				"@babel/traverse": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"tweetnacl": {
-			"version": "0.14.5",
-			"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-			"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-			"dev": true,
-			"optional": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-umd": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.7.tgz",
+			"integrity": "sha512-p88Jg6QqsaPh+EB7I9GJrIqi1Zt4ZBHUQtjw3z1bzEXcLh6GfPqzZJ6G+G1HBGKUNukT58MnKG7EN7zXQBCODw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"type-check": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-			"integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-			"dev": true,
-			"requires": {
-				"prelude-ls": "~1.1.2"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.7.tgz",
+			"integrity": "sha512-BtAT9LzCISKG3Dsdw5uso4oV1+v2NlVXIIomKJgQybotJY3OwCwJmkongjHgwGKoZXd0qG5UZ12JUlDQ07W6Ow==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
 			}
 		},
-		"type-detect": {
-			"version": "4.0.8",
-			"resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-			"integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-new-target": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.7.tgz",
+			"integrity": "sha512-CfCS2jDsbcZaVYxRFo2qtavW8SpdzmBXC2LOI4oO0rP+JSRDxxF3inF4GcPsLgfb5FjkhXG5/yR/lxuRs2pySA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"type-fest": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-			"integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.7.tgz",
+			"integrity": "sha512-FbuJ63/4LEL32mIxrxwYaqjJxpbzxPVQj5a+Ebrc8JICV6YX8nE53jY+K0RZT3um56GoNWgkS2BQ/uLGTjtwfw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"type-is": {
-			"version": "1.6.18",
-			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-			"dev": true,
-			"requires": {
-				"media-typer": "0.3.0",
-				"mime-types": "~2.1.24"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-numeric-separator": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.7.tgz",
+			"integrity": "sha512-8CbutzSSh4hmD+jJHIA8vdTNk15kAzOnFLVVgBSMGr28rt85ouT01/rezMecks9pkU939wDInImwCKv4ahU4IA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-numeric-separator": "^7.10.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-object-rest-spread": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.7.tgz",
+			"integrity": "sha512-1JdVKPhD7Y5PvgfFy0Mv2brdrolzpzSoUq2pr6xsR+m+3viGGeHEokFKsCgOkbeFOQxfB1Vt2F0cPJLRpFI4Zg==",
+			"license": "MIT",
 			"dependencies": {
-				"mime-db": {
-					"version": "1.43.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-					"integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.26",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-					"integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.43.0"
-					}
-				}
+				"@babel/helper-compilation-targets": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-transform-parameters": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"typedarray": {
-			"version": "0.0.6",
-			"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-			"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-object-super": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.7.tgz",
+			"integrity": "sha512-pWT6UXCEW3u1t2tcAGtE15ornCBvopHj9Bps9D2DsH15APgNVOTwwczGckX+WkAvBmuoYKRCFa4DK+jM8vh5AA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-replace-supers": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"typedarray-to-buffer": {
-			"version": "3.1.5",
-			"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-			"integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-			"dev": true,
-			"requires": {
-				"is-typedarray": "^1.0.0"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-optional-catch-binding": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.7.tgz",
+			"integrity": "sha512-m9obYBA39mDPN7lJzD5WkGGb0GO54PPLXsbcnj1Hyeu8mSRz7Gb4b1A6zxNX32ZuUySDK4G6it8SDFWD1nCnqg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"typescript": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.2.tgz",
-			"integrity": "sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-optional-chaining": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.7.tgz",
+			"integrity": "sha512-h39agClImgPWg4H8mYVAbD1qP9vClFbEjqoJmt87Zen8pjqK8FTPUwrOXAvqu5soytwxrLMd2fx2KSCp2CHcNg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"uc.micro": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-parameters": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.7.tgz",
+			"integrity": "sha512-FYiTvku63me9+1Nz7TOx4YMtW3tWXzfANZtrzHhUZrz4d47EEtMQhzFoZWESfXuAMMT5mwzD4+y1N8ONAX6lMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"uglify-js": {
-			"version": "3.13.7",
-			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.7.tgz",
-			"integrity": "sha512-1Psi2MmnZJbnEsgJJIlfnd7tFlJfitusmR7zDI8lXlFI0ACD4/Rm/xdrU8bh6zF0i74aiVoBtkRiFulkrmh3AA==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-private-methods": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.7.tgz",
+			"integrity": "sha512-KY0hh2FluNxMLwOCHbxVOKfdB5sjWG4M183885FmaqWWiGMhRZq4DQRKH6mHdEucbJnyDyYiZNwNG424RymJjA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"ultron": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
-			"integrity": "sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-private-property-in-object": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.7.tgz",
+			"integrity": "sha512-LzA5ESzBy7tqj00Yjey9yWfs3FKy4EmJyKOSWld144OxkTji81WWnUT8nkLUn+imN/zHL8ZQlOu/MTUAhHaX3g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.7",
+				"@babel/helper-create-class-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"unbox-primitive": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-			"integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
-			"dev": true,
-			"requires": {
-				"function-bind": "^1.1.1",
-				"has-bigints": "^1.0.1",
-				"has-symbols": "^1.0.2",
-				"which-boxed-primitive": "^1.0.2"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-property-literals": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.7.tgz",
+			"integrity": "sha512-lQEeetGKfFi0wHbt8ClQrUSUMfEeI3MMm74Z73T9/kuz990yYVtfofjf3NuA42Jy3auFOpbjDyCSiIkTs1VIYw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-react-jsx": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.7.tgz",
+			"integrity": "sha512-vILAg5nwGlR9EXE8JIOX4NHXd49lrYbN8hnjffDtoULwpL9hUx/N55nqh2qd0q6FyNDfjl9V79ecKGvFbcSA0Q==",
+			"license": "MIT",
 			"dependencies": {
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				}
+				"@babel/helper-annotate-as-pure": "^7.25.7",
+				"@babel/helper-module-imports": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/plugin-syntax-jsx": "^7.25.7",
+				"@babel/types": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"unbzip2-stream": {
-			"version": "1.4.3",
-			"resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
-			"integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
-			"dev": true,
-			"requires": {
-				"buffer": "^5.2.1",
-				"through": "^2.3.8"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-regenerator": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.7.tgz",
+			"integrity": "sha512-mgDoQCRjrY3XK95UuV60tZlFCQGXEtMg8H+IsW72ldw1ih1jZhzYXbJvghmAEpg5UVhhnCeia1CkGttUvCkiMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"regenerator-transform": "^0.15.2"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-reserved-words": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.7.tgz",
+			"integrity": "sha512-3OfyfRRqiGeOvIWSagcwUTVk2hXBsr/ww7bLn6TRTuXnexA+Udov2icFOxFX9abaj4l96ooYkcNN1qi2Zvqwng==",
+			"license": "MIT",
 			"dependencies": {
-				"base64-js": {
-					"version": "1.5.1",
-					"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-					"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-					"dev": true
-				},
-				"buffer": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-					"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-					"dev": true,
-					"requires": {
-						"base64-js": "^1.3.1",
-						"ieee754": "^1.1.13"
-					}
-				},
-				"ieee754": {
-					"version": "1.2.1",
-					"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-					"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"unfetch": {
-			"version": "4.2.0",
-			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
-			"integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-runtime": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.7.tgz",
+			"integrity": "sha512-Y9p487tyTzB0yDYQOtWnC+9HGOuogtP3/wNpun1xJXEEvI6vip59BSBTsHnekZLqxmPcgsrAKt46HAAb//xGhg==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"babel-plugin-polyfill-corejs2": "^0.4.10",
+				"babel-plugin-polyfill-corejs3": "^0.10.6",
+				"babel-plugin-polyfill-regenerator": "^0.6.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"unherit": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.1.tgz",
-			"integrity": "sha512-+XZuV691Cn4zHsK0vkKYwBEwB74T3IZIcxrgn2E4rKwTfFyI1zCh7X7grwh9Re08fdPlarIdyWgI8aVB3F5A5g==",
-			"dev": true,
-			"requires": {
-				"inherits": "^2.0.1",
-				"xtend": "^4.0.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-shorthand-properties": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.7.tgz",
+			"integrity": "sha512-uBbxNwimHi5Bv3hUccmOFlUy3ATO6WagTApenHz9KzoIdn0XeACdB12ZJ4cjhuB2WSi80Ez2FWzJnarccriJeA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"unicode-canonical-property-names-ecmascript": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-			"integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-spread": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.7.tgz",
+			"integrity": "sha512-Mm6aeymI0PBh44xNIv/qvo8nmbkpZze1KvR8MkEqbIREDxoiWTi18Zr2jryfRMwDfVZF9foKh060fWgni44luw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"unicode-match-property-ecmascript": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-			"integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
-			"requires": {
-				"unicode-canonical-property-names-ecmascript": "^1.0.4",
-				"unicode-property-aliases-ecmascript": "^1.0.4"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-sticky-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.7.tgz",
+			"integrity": "sha512-ZFAeNkpGuLnAQ/NCsXJ6xik7Id+tHuS+NT+ue/2+rn/31zcdnupCdmunOizEaP0JsUmTFSTOPoQY7PkK2pttXw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"unicode-match-property-value-ecmascript": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-			"integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ=="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-template-literals": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.7.tgz",
+			"integrity": "sha512-SI274k0nUsFFmyQupiO7+wKATAmMFf8iFgq2O+vVFXZ0SV9lNfT1NGzBEhjquFmD8I9sqHLguH+gZVN3vww2AA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"unicode-property-aliases-ecmascript": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz",
-			"integrity": "sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg=="
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-typeof-symbol": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.7.tgz",
+			"integrity": "sha512-OmWmQtTHnO8RSUbL0NTdtpbZHeNTnm68Gj5pA4Y2blFNh+V4iZR68V1qL9cI37J21ZN7AaCnkfdHtLExQPf2uA==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"unified": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/unified/-/unified-7.1.0.tgz",
-			"integrity": "sha512-lbk82UOIGuCEsZhPj8rNAkXSDXd6p0QLzIuSsCdxrqnqU56St4eyOB+AlXsVgVeRmetPTYydIuvFfpDIed8mqw==",
-			"dev": true,
-			"requires": {
-				"@types/unist": "^2.0.0",
-				"@types/vfile": "^3.0.0",
-				"bail": "^1.0.0",
-				"extend": "^3.0.0",
-				"is-plain-obj": "^1.1.0",
-				"trough": "^1.0.0",
-				"vfile": "^3.0.0",
-				"x-is-string": "^0.1.0"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-typescript": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.7.tgz",
+			"integrity": "sha512-VKlgy2vBzj8AmEzunocMun2fF06bsSWV+FvVXohtL6FGve/+L217qhHxRTVGHEDO/YR8IANcjzgJsd04J8ge5Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.25.7",
+				"@babel/helper-create-class-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
+				"@babel/plugin-syntax-typescript": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-escapes": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.7.tgz",
+			"integrity": "sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==",
+			"license": "MIT",
 			"dependencies": {
-				"is-plain-obj": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
-					"dev": true
-				}
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"union-value": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-			"integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-			"requires": {
-				"arr-union": "^3.1.0",
-				"get-value": "^2.0.6",
-				"is-extendable": "^0.1.1",
-				"set-value": "^2.0.1"
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-property-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.7.tgz",
+			"integrity": "sha512-IWfR89zcEPQGB/iB408uGtSPlQd3Jpq11Im86vUgcmSTcoWAiQMCTOa2K2yNNqFJEBVICKhayctee65Ka8OB0w==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"uniq": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-			"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.7.tgz",
+			"integrity": "sha512-8JKfg/hiuA3qXnlLx8qtv5HWRbgyFx2hMMtpDDuU2rTckpKkGu4ycK5yYHwuEa16/quXfoxHBIApEsNyMWnt0g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
 		},
-		"uniqs": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-			"integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
-			"dev": true
+		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-sets-regex": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.7.tgz",
+			"integrity": "sha512-YRW8o9vzImwmh4Q3Rffd09bH5/hvY0pxg+1H1i0f7APoUeg12G7+HhLj9ZFNIrYkgBXhIijPJ+IXypN0hLTIbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
 		},
-		"unique-filename": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-			"integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
-			"dev": true,
-			"requires": {
-				"unique-slug": "^2.0.0"
+		"packages/babel-preset-default/node_modules/@babel/preset-env": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.7.tgz",
+			"integrity": "sha512-Gibz4OUdyNqqLj+7OAvBZxOD7CklCtMA5/j0JgUEwOnaRULsPDXmic2iKxL2DX2vQduPR5wH2hjZas/Vr/Oc0g==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.25.7",
+				"@babel/helper-compilation-targets": "^7.25.7",
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-validator-option": "^7.25.7",
+				"@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.7",
+				"@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.7",
+				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.7",
+				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.25.7",
+				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.7",
+				"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+				"@babel/plugin-syntax-async-generators": "^7.8.4",
+				"@babel/plugin-syntax-class-properties": "^7.12.13",
+				"@babel/plugin-syntax-class-static-block": "^7.14.5",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+				"@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+				"@babel/plugin-syntax-import-assertions": "^7.25.7",
+				"@babel/plugin-syntax-import-attributes": "^7.25.7",
+				"@babel/plugin-syntax-import-meta": "^7.10.4",
+				"@babel/plugin-syntax-json-strings": "^7.8.3",
+				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+				"@babel/plugin-syntax-numeric-separator": "^7.10.4",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3",
+				"@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+				"@babel/plugin-syntax-top-level-await": "^7.14.5",
+				"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+				"@babel/plugin-transform-arrow-functions": "^7.25.7",
+				"@babel/plugin-transform-async-generator-functions": "^7.25.7",
+				"@babel/plugin-transform-async-to-generator": "^7.25.7",
+				"@babel/plugin-transform-block-scoped-functions": "^7.25.7",
+				"@babel/plugin-transform-block-scoping": "^7.25.7",
+				"@babel/plugin-transform-class-properties": "^7.25.7",
+				"@babel/plugin-transform-class-static-block": "^7.25.7",
+				"@babel/plugin-transform-classes": "^7.25.7",
+				"@babel/plugin-transform-computed-properties": "^7.25.7",
+				"@babel/plugin-transform-destructuring": "^7.25.7",
+				"@babel/plugin-transform-dotall-regex": "^7.25.7",
+				"@babel/plugin-transform-duplicate-keys": "^7.25.7",
+				"@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.7",
+				"@babel/plugin-transform-dynamic-import": "^7.25.7",
+				"@babel/plugin-transform-exponentiation-operator": "^7.25.7",
+				"@babel/plugin-transform-export-namespace-from": "^7.25.7",
+				"@babel/plugin-transform-for-of": "^7.25.7",
+				"@babel/plugin-transform-function-name": "^7.25.7",
+				"@babel/plugin-transform-json-strings": "^7.25.7",
+				"@babel/plugin-transform-literals": "^7.25.7",
+				"@babel/plugin-transform-logical-assignment-operators": "^7.25.7",
+				"@babel/plugin-transform-member-expression-literals": "^7.25.7",
+				"@babel/plugin-transform-modules-amd": "^7.25.7",
+				"@babel/plugin-transform-modules-commonjs": "^7.25.7",
+				"@babel/plugin-transform-modules-systemjs": "^7.25.7",
+				"@babel/plugin-transform-modules-umd": "^7.25.7",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.25.7",
+				"@babel/plugin-transform-new-target": "^7.25.7",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.25.7",
+				"@babel/plugin-transform-numeric-separator": "^7.25.7",
+				"@babel/plugin-transform-object-rest-spread": "^7.25.7",
+				"@babel/plugin-transform-object-super": "^7.25.7",
+				"@babel/plugin-transform-optional-catch-binding": "^7.25.7",
+				"@babel/plugin-transform-optional-chaining": "^7.25.7",
+				"@babel/plugin-transform-parameters": "^7.25.7",
+				"@babel/plugin-transform-private-methods": "^7.25.7",
+				"@babel/plugin-transform-private-property-in-object": "^7.25.7",
+				"@babel/plugin-transform-property-literals": "^7.25.7",
+				"@babel/plugin-transform-regenerator": "^7.25.7",
+				"@babel/plugin-transform-reserved-words": "^7.25.7",
+				"@babel/plugin-transform-shorthand-properties": "^7.25.7",
+				"@babel/plugin-transform-spread": "^7.25.7",
+				"@babel/plugin-transform-sticky-regex": "^7.25.7",
+				"@babel/plugin-transform-template-literals": "^7.25.7",
+				"@babel/plugin-transform-typeof-symbol": "^7.25.7",
+				"@babel/plugin-transform-unicode-escapes": "^7.25.7",
+				"@babel/plugin-transform-unicode-property-regex": "^7.25.7",
+				"@babel/plugin-transform-unicode-regex": "^7.25.7",
+				"@babel/plugin-transform-unicode-sets-regex": "^7.25.7",
+				"@babel/preset-modules": "0.1.6-no-external-plugins",
+				"babel-plugin-polyfill-corejs2": "^0.4.10",
+				"babel-plugin-polyfill-corejs3": "^0.10.6",
+				"babel-plugin-polyfill-regenerator": "^0.6.1",
+				"core-js-compat": "^3.38.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/@babel/preset-typescript": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.25.7.tgz",
+			"integrity": "sha512-rkkpaXJZOFN45Fb+Gki0c+KMIglk4+zZXOoMJuyEK8y8Kkc8Jd3BDmP7qPsz0zQMJj+UD7EprF+AqAXcILnexw==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.25.7",
+				"@babel/helper-validator-option": "^7.25.7",
+				"@babel/plugin-syntax-jsx": "^7.25.7",
+				"@babel/plugin-transform-modules-commonjs": "^7.25.7",
+				"@babel/plugin-transform-typescript": "^7.25.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"packages/babel-preset-default/node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"packages/babel-preset-default/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"packages/base-styles": {
+			"name": "@wordpress/base-styles",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/blob": {
+			"name": "@wordpress/blob",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/block-directory": {
+			"name": "@wordpress/block-directory",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/editor": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/url": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"unique-slug": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.0.tgz",
-			"integrity": "sha1-22Z258fMBimHj/GWCXx4hVrp9Ks=",
-			"dev": true,
-			"requires": {
-				"imurmurhash": "^0.1.4"
+		"packages/block-editor": {
+			"name": "@wordpress/block-editor",
+			"version": "14.8.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@emotion/react": "^11.7.1",
+				"@emotion/styled": "^11.6.0",
+				"@react-spring/web": "^9.4.5",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-serialization-default-parser": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/commands": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/priority-queue": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/style-engine": "*",
+				"@wordpress/token-list": "*",
+				"@wordpress/url": "*",
+				"@wordpress/warning": "*",
+				"@wordpress/wordcount": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1",
+				"colord": "^2.7.0",
+				"deepmerge": "^4.3.0",
+				"diff": "^4.0.2",
+				"fast-deep-equal": "^3.1.3",
+				"memize": "^2.1.0",
+				"parsel-js": "^1.1.2",
+				"postcss": "^8.4.21",
+				"postcss-prefix-selector": "^1.16.0",
+				"postcss-urlrebase": "^1.4.0",
+				"react-autosize-textarea": "^7.1.0",
+				"react-easy-crop": "^5.0.6",
+				"remove-accents": "^0.5.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"unist-builder": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-2.0.3.tgz",
-			"integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==",
-			"dev": true
+		"packages/block-editor/node_modules/postcss-urlrebase": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/postcss-urlrebase/-/postcss-urlrebase-1.4.0.tgz",
+			"integrity": "sha512-rRaxMmWvXrn8Rk1PqsxmaJwldRHsr0WbbASKKCZYxXwotHkM/5X/6IrwaEe8pdzpbNGCEY86yhYMN0MhgOkADA==",
+			"license": "MIT",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.0"
+			}
 		},
-		"unist-util-generated": {
-			"version": "1.1.6",
-			"resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
-			"integrity": "sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==",
-			"dev": true
+		"packages/block-editor/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+			"license": "MIT"
 		},
-		"unist-util-is": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-2.1.2.tgz",
-			"integrity": "sha512-YkXBK/H9raAmG7KXck+UUpnKiNmUdB+aBGrknfQ4EreE1banuzrKABx3jP6Z5Z3fMSPMQQmeXBlKpCbMwBkxVw==",
-			"dev": true
+		"packages/block-editor/node_modules/react-easy-crop": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.0.6.tgz",
+			"integrity": "sha512-LV8te8NGC72k3l8uAqPAw73D2i9AbRlZqyo1Xz8VetwiMfkSKYgyqE3IFEwf5h+1g7AS1nMxBKk6ZPdhvLw6MQ==",
+			"dependencies": {
+				"normalize-wheel": "^1.0.1",
+				"tslib": "2.0.1"
+			},
+			"peerDependencies": {
+				"react": ">=16.4.0",
+				"react-dom": ">=16.4.0"
+			}
 		},
-		"unist-util-modify-children": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-1.1.2.tgz",
-			"integrity": "sha512-GRi04yhng1WqBf5RBzPkOtWAadcZS2gvuOgNn/cyJBYNxtTuyYqTKN0eg4rC1YJwGnzrqfRB3dSKm8cNCjNirg==",
-			"dev": true,
-			"requires": {
-				"array-iterate": "^1.0.0"
+		"packages/block-editor/node_modules/tslib": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+			"integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+		},
+		"packages/block-library": {
+			"name": "@wordpress/block-library",
+			"version": "9.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/autop": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/interactivity": "*",
+				"@wordpress/interactivity-router": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/patterns": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/reusable-blocks": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/server-side-render": "*",
+				"@wordpress/url": "*",
+				"@wordpress/viewport": "*",
+				"@wordpress/wordcount": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1",
+				"colord": "^2.7.0",
+				"escape-html": "^1.0.3",
+				"fast-average-color": "^9.1.1",
+				"fast-deep-equal": "^3.1.3",
+				"memize": "^2.1.0",
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"unist-util-position": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-3.1.0.tgz",
-			"integrity": "sha512-w+PkwCbYSFw8vpgWD0v7zRCl1FpY3fjDSQ3/N/wNd9Ffa4gPi8+4keqt99N3XW6F99t/mUzp2xAhNmfKWp95QA==",
-			"dev": true
+		"packages/block-library/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
 		},
-		"unist-util-remove": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-2.1.0.tgz",
-			"integrity": "sha512-J8NYPyBm4baYLdCbjmf1bhPu45Cr1MWTm77qd9istEkzWpnN6O9tMsEbB2JhNnBCqGENRqEWomQ+He6au0B27Q==",
-			"dev": true,
-			"requires": {
-				"unist-util-is": "^4.0.0"
+		"packages/block-serialization-default-parser": {
+			"name": "@wordpress/block-serialization-default-parser",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/block-serialization-spec-parser": {
+			"name": "@wordpress/block-serialization-spec-parser",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"unist-util-is": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
-					"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
-					"dev": true
-				}
+				"pegjs": "^0.10.0",
+				"phpegjs": "^1.0.0-beta7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"unist-util-remove-position": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.2.tgz",
-			"integrity": "sha512-XxoNOBvq1WXRKXxgnSYbtCF76TJrRoe5++pD4cCBsssSiWSnPEktyFrFLE8LTk3JW5mt9hB0Sk5zn4x/JeWY7Q==",
-			"dev": true,
-			"requires": {
-				"unist-util-visit": "^1.1.0"
+		"packages/blocks": {
+			"name": "@wordpress/blocks",
+			"version": "14.2.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/autop": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-serialization-default-parser": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/shortcode": "*",
+				"@wordpress/warning": "*",
+				"change-case": "^4.1.2",
+				"colord": "^2.7.0",
+				"fast-deep-equal": "^3.1.3",
+				"hpq": "^1.3.0",
+				"is-plain-object": "^5.0.0",
+				"memize": "^2.1.0",
+				"react-is": "^18.3.0",
+				"remove-accents": "^0.5.0",
+				"showdown": "^1.9.1",
+				"simple-html-tokenizer": "^0.5.7",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
 			}
 		},
-		"unist-util-stringify-position": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
-			"integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==",
-			"dev": true
+		"packages/blocks/node_modules/react-is": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
 		},
-		"unist-util-visit": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.0.tgz",
-			"integrity": "sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==",
-			"dev": true,
-			"requires": {
-				"unist-util-visit-parents": "^2.0.0"
+		"packages/blocks/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
 			}
 		},
-		"unist-util-visit-parents": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.0.1.tgz",
-			"integrity": "sha512-6B0UTiMfdWql4cQ03gDTCSns+64Zkfo2OCbK31Ov0uMizEz+CJeAp0cgZVb5Fhmcd7Bct2iRNywejT0orpbqUA==",
-			"dev": true,
-			"requires": {
-				"unist-util-is": "^2.1.2"
+		"packages/browserslist-config": {
+			"name": "@wordpress/browserslist-config",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"universal-user-agent": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-2.1.0.tgz",
-			"integrity": "sha512-8itiX7G05Tu3mGDTdNY2fB4KJ8MgZLS54RdG6PkkfwMAavrXu1mV/lls/GABx9O3Rw4PnTtasxrvbMQoBYY92Q==",
-			"dev": true,
-			"requires": {
-				"os-name": "^3.0.0"
+		"packages/commands": {
+			"name": "@wordpress/commands",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/components": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/private-apis": "*",
+				"clsx": "^2.1.1",
+				"cmdk": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"universalify": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-			"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+		"packages/commands/node_modules/@radix-ui/react-dialog": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+			"integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-dismissable-layer": "1.0.5",
+				"@radix-ui/react-focus-guards": "1.0.1",
+				"@radix-ui/react-focus-scope": "1.0.4",
+				"@radix-ui/react-id": "1.0.1",
+				"@radix-ui/react-portal": "1.0.4",
+				"@radix-ui/react-presence": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-slot": "1.0.2",
+				"@radix-ui/react-use-controllable-state": "1.0.1",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "2.5.5"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
 		},
-		"unpipe": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-			"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+		"packages/commands/node_modules/@radix-ui/react-dialog/node_modules/@babel/runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+			"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"unset-value": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-			"integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-			"requires": {
-				"has-value": "^0.3.1",
-				"isobject": "^3.0.0"
+		"packages/commands/node_modules/@radix-ui/react-dismissable-layer": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+			"integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-escape-keydown": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"packages/commands/node_modules/@radix-ui/react-dismissable-layer/node_modules/@babel/runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+			"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
 			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"packages/commands/node_modules/@radix-ui/react-focus-scope": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+			"integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
 			"dependencies": {
-				"has-value": {
-					"version": "0.3.1",
-					"resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-					"integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-					"requires": {
-						"get-value": "^2.0.3",
-						"has-values": "^0.1.4",
-						"isobject": "^2.0.0"
-					},
-					"dependencies": {
-						"isobject": {
-							"version": "2.1.0",
-							"resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-							"integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-							"requires": {
-								"isarray": "1.0.0"
-							}
-						}
-					}
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
 				},
-				"has-values": {
-					"version": "0.1.4",
-					"resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-					"integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+				"@types/react-dom": {
+					"optional": true
 				}
 			}
 		},
-		"untildify": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/untildify/-/untildify-2.1.0.tgz",
-			"integrity": "sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==",
-			"dev": true,
-			"optional": true,
-			"requires": {
-				"os-homedir": "^1.0.0"
+		"packages/commands/node_modules/@radix-ui/react-focus-scope/node_modules/@babel/runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+			"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.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"
-			},
+		"packages/commands/node_modules/@radix-ui/react-portal": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+			"integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
 			"dependencies": {
-				"bluebird": {
-					"version": "3.4.7",
-					"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-					"integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=",
-					"dev": true
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": 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
+				"@types/react-dom": {
+					"optional": true
 				}
 			}
 		},
-		"upath": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-			"integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-			"dev": true,
-			"optional": true
+		"packages/commands/node_modules/@radix-ui/react-portal/node_modules/@babel/runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+			"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
 		},
-		"upper-case": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
-			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
-			"requires": {
-				"tslib": "^2.0.3"
+		"packages/commands/node_modules/@radix-ui/react-presence": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+			"integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
 			}
 		},
-		"upper-case-first": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
-			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
-			"requires": {
-				"tslib": "^2.0.3"
+		"packages/commands/node_modules/@radix-ui/react-presence/node_modules/@babel/runtime": {
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
+			"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
 			}
 		},
-		"uri-js": {
-			"version": "4.2.2",
-			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-			"integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-			"dev": true,
-			"requires": {
-				"punycode": "^2.1.0"
+		"packages/commands/node_modules/cmdk": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+			"integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+			"dependencies": {
+				"@radix-ui/react-dialog": "1.0.5",
+				"@radix-ui/react-primitive": "1.0.3"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"urix": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-			"integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+		"packages/commands/node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+			"license": "MIT"
 		},
-		"url": {
-			"version": "0.11.0",
-			"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-			"integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-			"dev": true,
-			"requires": {
-				"punycode": "1.3.2",
-				"querystring": "0.2.0"
-			},
+		"packages/components": {
+			"name": "@wordpress/components",
+			"version": "28.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"punycode": {
-					"version": "1.3.2",
-					"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-					"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-					"dev": true
-				}
+				"@ariakit/react": "^0.4.15",
+				"@babel/runtime": "7.25.7",
+				"@emotion/cache": "^11.7.1",
+				"@emotion/css": "^11.7.1",
+				"@emotion/react": "^11.7.1",
+				"@emotion/serialize": "^1.0.2",
+				"@emotion/styled": "^11.6.0",
+				"@emotion/utils": "^1.0.0",
+				"@floating-ui/react-dom": "^2.0.8",
+				"@types/gradient-parser": "0.1.3",
+				"@types/highlight-words-core": "1.2.1",
+				"@use-gesture/react": "^10.3.1",
+				"@wordpress/a11y": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/warning": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1",
+				"colord": "^2.7.0",
+				"date-fns": "^3.6.0",
+				"deepmerge": "^4.3.0",
+				"fast-deep-equal": "^3.1.3",
+				"framer-motion": "^11.1.9",
+				"gradient-parser": "^0.1.5",
+				"highlight-words-core": "^1.2.2",
+				"is-plain-object": "^5.0.0",
+				"memize": "^2.1.0",
+				"path-to-regexp": "^6.2.1",
+				"re-resizable": "^6.4.0",
+				"react-colorful": "^5.3.1",
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"url-loader": {
-			"version": "4.1.1",
-			"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
-			"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
-			"dev": true,
-			"requires": {
-				"loader-utils": "^2.0.0",
-				"mime-types": "^2.1.27",
-				"schema-utils": "^3.0.0"
-			},
+		"packages/components/node_modules/@floating-ui/react-dom": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
+			"integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.6",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
-					"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"big.js": {
-					"version": "5.2.2",
-					"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-					"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
-				},
-				"emojis-list": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-					"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
-				},
-				"fast-deep-equal": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-					"dev": true
-				},
-				"json5": {
-					"version": "2.1.3",
-					"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-					"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-					"requires": {
-						"minimist": "^1.2.5"
-					}
-				},
-				"mime-db": {
-					"version": "1.45.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
-					"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.28",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
-					"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.45.0"
-					}
-				},
-				"schema-utils": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
-					"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.6",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				}
+				"@floating-ui/dom": "^1.3.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
 			}
 		},
-		"url-template": {
-			"version": "2.0.8",
-			"resolved": "https://registry.npmjs.org/url-template/-/url-template-2.0.8.tgz",
-			"integrity": "sha1-/FZaPMy/93MMd19WQflVV5FDnyE=",
-			"dev": true
+		"packages/components/node_modules/@types/gradient-parser": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz",
+			"integrity": "sha512-XDbrTSBlQV9nxE1GiDL3FaOPy4G/KaJkhDutBX48Kg8CYZMBARyyDFGCWfWJn4pobmInmwud1xxH7VJMAr0CKQ=="
 		},
-		"use": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-			"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
+		"packages/components/node_modules/path-to-regexp": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+			"integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
+			"license": "MIT"
 		},
-		"use-composed-ref": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
-			"integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
-			"dev": true,
-			"requires": {
-				"ts-essentials": "^2.0.3"
+		"packages/components/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
 			}
 		},
-		"use-isomorphic-layout-effect": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
-			"integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
-			"dev": true
+		"packages/compose": {
+			"name": "@wordpress/compose",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@types/mousetrap": "^1.6.8",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/priority-queue": "*",
+				"@wordpress/undo-manager": "*",
+				"change-case": "^4.1.2",
+				"clipboard": "^2.0.11",
+				"mousetrap": "^1.6.5",
+				"use-memo-one": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
 		},
-		"use-latest": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
-			"integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
-			"dev": true,
-			"requires": {
-				"use-isomorphic-layout-effect": "^1.0.0"
+		"packages/compose/node_modules/clipboard": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+			"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+			"dependencies": {
+				"good-listener": "^1.2.2",
+				"select": "^1.1.2",
+				"tiny-emitter": "^2.0.0"
 			}
 		},
-		"use-lilius": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/use-lilius/-/use-lilius-2.0.1.tgz",
-			"integrity": "sha512-Dque7ax/91znesQWz2wM95O5iTHWzAsKQa2e7qvyPhXev/UAfgQIiXSqiB96tfiwQ+8+371FDK7oftuzw0Awhg==",
-			"requires": {
-				"date-fns": "^2.28.0"
+		"packages/core-commands": {
+			"name": "@wordpress/core-commands",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/block-editor": "*",
+				"@wordpress/commands": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/router": "*",
+				"@wordpress/url": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/core-data": {
+			"name": "@wordpress/core-data",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/sync": "*",
+				"@wordpress/undo-manager": "*",
+				"@wordpress/url": "*",
+				"@wordpress/warning": "*",
+				"change-case": "^4.1.2",
+				"equivalent-key-map": "^0.2.2",
+				"fast-deep-equal": "^3.1.3",
+				"memize": "^2.1.0",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/core-data/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"packages/create-block": {
+			"name": "@wordpress/create-block",
+			"version": "4.56.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"date-fns": {
-					"version": "2.28.0",
-					"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
-					"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
-				}
+				"@wordpress/lazy-import": "*",
+				"chalk": "^4.0.0",
+				"change-case": "^4.1.2",
+				"check-node-version": "^4.1.0",
+				"commander": "^9.2.0",
+				"execa": "^4.0.2",
+				"fast-glob": "^3.2.7",
+				"inquirer": "^7.1.0",
+				"make-dir": "^3.0.0",
+				"mustache": "^4.0.0",
+				"npm-package-arg": "^8.1.5",
+				"rimraf": "^3.0.2",
+				"write-pkg": "^4.0.0"
+			},
+			"bin": {
+				"wp-create-block": "index.js"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			}
+		},
+		"packages/create-block-interactive-template": {
+			"name": "@wordpress/create-block-interactive-template",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/create-block-tutorial-template": {
+			"name": "@wordpress/create-block-tutorial-template",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/customize-widgets": {
+			"name": "@wordpress/customize-widgets",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/block-editor": "*",
+				"@wordpress/block-library": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/interface": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/media-utils": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/widgets": "*",
+				"clsx": "^2.1.1",
+				"fast-deep-equal": "^3.1.3"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/data": {
+			"name": "@wordpress/data",
+			"version": "10.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/compose": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"@wordpress/priority-queue": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/redux-routine": "*",
+				"deepmerge": "^4.3.0",
+				"equivalent-key-map": "^0.2.2",
+				"is-plain-object": "^5.0.0",
+				"is-promise": "^4.0.0",
+				"redux": "^5.0.1",
+				"rememo": "^4.0.2",
+				"use-memo-one": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
 			}
 		},
-		"use-memo-one": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
-			"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
+		"packages/data-controls": {
+			"name": "@wordpress/data-controls",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
 		},
-		"use-subscription": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.0.tgz",
-			"integrity": "sha512-/FVRiB2I7NDjzWoNBYPt6YkkvleMm/lFtxj1hH6nX2TVrJ/5UTbovw9OE1efv2Zl0HoAYuTjM7zHd9OsABn5sg==",
-			"requires": {
-				"object-assign": "^4.1.1"
+		"packages/dataviews": {
+			"name": "@wordpress/dataviews",
+			"version": "4.9.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@ariakit/react": "^0.4.15",
+				"@babel/runtime": "7.25.7",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/warning": "*",
+				"clsx": "^2.1.1",
+				"remove-accents": "^0.5.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
 			}
 		},
-		"use-sync-external-store": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-			"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
+		"packages/date": {
+			"name": "@wordpress/date",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/deprecated": "*",
+				"moment": "^2.29.4",
+				"moment-timezone": "^0.5.40"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"util": {
-			"version": "0.11.1",
-			"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-			"integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
-			"dev": true,
-			"requires": {
-				"inherits": "2.0.3"
+		"packages/dependency-extraction-webpack-plugin": {
+			"name": "@wordpress/dependency-extraction-webpack-plugin",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"json2php": "^0.0.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
 			}
 		},
-		"util-deprecate": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+		"packages/deprecated": {
+			"name": "@wordpress/deprecated",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"util.promisify": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-			"integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
-			"dev": true,
-			"requires": {
-				"define-properties": "^1.1.2",
-				"object.getownpropertydescriptors": "^2.0.3"
+		"packages/docgen": {
+			"name": "@wordpress/docgen",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/core": "7.25.7",
+				"comment-parser": "^1.1.1",
+				"mdast-util-inject": "1.1.0",
+				"optionator": "0.8.2",
+				"remark": "10.0.1",
+				"remark-parse": "6.0.3",
+				"unified": "7.1.0"
+			},
+			"bin": {
+				"docgen": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"utila": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-			"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
-			"dev": true
+		"packages/dom": {
+			"name": "@wordpress/dom",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/deprecated": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"utility-types": {
-			"version": "3.10.0",
-			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
-			"integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
+		"packages/dom-ready": {
+			"name": "@wordpress/dom-ready",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"utils-merge": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-			"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+		"packages/e2e-test-utils": {
+			"name": "@wordpress/e2e-test-utils",
+			"version": "11.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/url": "*",
+				"change-case": "^4.1.2",
+				"form-data": "^4.0.0",
+				"node-fetch": "2.7.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"jest": ">=29",
+				"puppeteer-core": ">=11"
+			}
 		},
-		"uuid": {
-			"version": "8.3.0",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.0.tgz",
-			"integrity": "sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ=="
+		"packages/e2e-test-utils-playwright": {
+			"name": "@wordpress/e2e-test-utils-playwright",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"change-case": "^4.1.2",
+				"form-data": "^4.0.0",
+				"get-port": "^5.1.1",
+				"lighthouse": "^10.4.0",
+				"mime": "^3.0.0",
+				"web-vitals": "^4.2.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@playwright/test": ">=1"
+			}
 		},
-		"uuid-browser": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/uuid-browser/-/uuid-browser-3.1.0.tgz",
-			"integrity": "sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg==",
-			"dev": true
+		"packages/e2e-test-utils-playwright/node_modules/web-vitals": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.1.tgz",
+			"integrity": "sha512-U6bAxeudnhDqcXNl50JC4hLlqox9DZnngxfISZm3DMZnonW35xtJOVUc091L+DOY+6hVZVpKXoiCP0RiT6339Q==",
+			"license": "Apache-2.0"
 		},
-		"v8-compile-cache": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
-			"integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
-			"dev": true
+		"packages/e2e-tests": {
+			"name": "@wordpress/e2e-tests",
+			"version": "8.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/e2e-test-utils": "*",
+				"@wordpress/interactivity": "*",
+				"@wordpress/interactivity-router": "*",
+				"@wordpress/jest-console": "*",
+				"@wordpress/jest-puppeteer-axe": "*",
+				"@wordpress/scripts": "*",
+				"@wordpress/url": "*",
+				"chalk": "^4.0.0",
+				"expect-puppeteer": "^4.4.0",
+				"filenamify": "^4.2.0",
+				"jest-message-util": "^29.6.2",
+				"jest-snapshot": "^29.6.2",
+				"uuid": "^9.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"jest": ">=29",
+				"puppeteer-core": ">=11",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
 		},
-		"v8-to-istanbul": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz",
-			"integrity": "sha512-/PRhfd8aTNp9Ggr62HPzXg2XasNFGy5PBt0Rp04du7/8GNNSgxFL6WBTkgMKSL9bFjH+8kKEG3f37FmxiTqUUA==",
-			"dev": true,
-			"requires": {
-				"@types/istanbul-lib-coverage": "^2.0.1",
-				"convert-source-map": "^1.6.0",
-				"source-map": "^0.7.3"
+		"packages/e2e-tests/node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"packages/edit-post": {
+			"name": "@wordpress/edit-post",
+			"version": "8.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/block-library": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/commands": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-commands": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/editor": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/url": "*",
+				"@wordpress/viewport": "*",
+				"@wordpress/warning": "*",
+				"@wordpress/widgets": "*",
+				"clsx": "^2.1.1",
+				"memize": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/edit-site": {
+			"name": "@wordpress/edit-site",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@react-spring/web": "^9.4.5",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/block-library": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/commands": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-commands": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/dataviews": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/editor": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/fields": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/patterns": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/reusable-blocks": "*",
+				"@wordpress/router": "*",
+				"@wordpress/style-engine": "*",
+				"@wordpress/url": "*",
+				"@wordpress/viewport": "*",
+				"@wordpress/widgets": "*",
+				"@wordpress/wordcount": "*",
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1",
+				"colord": "^2.9.2",
+				"fast-deep-equal": "^3.1.3",
+				"memize": "^2.1.0",
+				"react-autosize-textarea": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/edit-widgets": {
+			"name": "@wordpress/edit-widgets",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/block-library": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/interface": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/media-utils": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/patterns": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/reusable-blocks": "*",
+				"@wordpress/url": "*",
+				"@wordpress/widgets": "*",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/editor": {
+			"name": "@wordpress/editor",
+			"version": "14.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/commands": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/dataviews": "*",
+				"@wordpress/date": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/dom": "*",
+				"@wordpress/element": "*",
+				"@wordpress/fields": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/interface": "*",
+				"@wordpress/keyboard-shortcuts": "*",
+				"@wordpress/keycodes": "*",
+				"@wordpress/media-utils": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/patterns": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/reusable-blocks": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/server-side-render": "*",
+				"@wordpress/url": "*",
+				"@wordpress/warning": "*",
+				"@wordpress/wordcount": "*",
+				"change-case": "^4.1.2",
+				"client-zip": "^2.4.5",
+				"clsx": "^2.1.1",
+				"date-fns": "^3.6.0",
+				"deepmerge": "^4.3.0",
+				"fast-deep-equal": "^3.1.3",
+				"is-plain-object": "^5.0.0",
+				"memize": "^2.1.0",
+				"react-autosize-textarea": "^7.1.0",
+				"remove-accents": "^0.5.0",
+				"uuid": "^9.0.1"
 			},
-			"dependencies": {
-				"convert-source-map": {
-					"version": "1.8.0",
-					"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-					"integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
-					"dev": true,
-					"requires": {
-						"safe-buffer": "~5.1.1"
-					}
-				},
-				"source-map": {
-					"version": "0.7.3",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-					"dev": true
-				}
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"validate-npm-package-license": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
-			"integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
-			"dev": true,
-			"requires": {
-				"spdx-correct": "^3.0.0",
-				"spdx-expression-parse": "^3.0.0"
+		"packages/element": {
+			"name": "@wordpress/element",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@types/react": "^18.2.79",
+				"@types/react-dom": "^18.2.25",
+				"@wordpress/escape-html": "*",
+				"change-case": "^4.1.2",
+				"is-plain-object": "^5.0.0",
+				"react": "^18.3.0",
+				"react-dom": "^18.3.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"validate-npm-package-name": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
-			"integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=",
-			"dev": true,
-			"requires": {
-				"builtins": "^1.0.3"
+		"packages/env": {
+			"name": "@wordpress/env",
+			"version": "10.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"chalk": "^4.0.0",
+				"copy-dir": "^1.3.0",
+				"docker-compose": "^0.24.3",
+				"extract-zip": "^1.6.7",
+				"got": "^11.8.5",
+				"inquirer": "^7.1.0",
+				"js-yaml": "^3.13.1",
+				"ora": "^4.0.2",
+				"rimraf": "^3.0.2",
+				"simple-git": "^3.5.0",
+				"terminal-link": "^2.0.0",
+				"yargs": "^17.3.0"
+			},
+			"bin": {
+				"wp-env": "bin/wp-env"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"valtio": {
-			"version": "1.7.0",
-			"resolved": "https://registry.npmjs.org/valtio/-/valtio-1.7.0.tgz",
-			"integrity": "sha512-3Tnix66EERwMcrl1rfB3ylcewOcL5L/GiPmC3FlVNreQzqf2jufEeqlNmgnLgSGchkEmH3WYVtS+x6Qw4r+yzQ==",
-			"requires": {
-				"proxy-compare": "2.3.0",
-				"use-sync-external-store": "1.2.0"
+		"packages/env/node_modules/cliui": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+			"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.1",
+				"wrap-ansi": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"vargs": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/vargs/-/vargs-0.1.0.tgz",
-			"integrity": "sha1-a2GE2mUgzDIEzhtAfKwm2SYJ6/8=",
-			"dev": true
+		"packages/env/node_modules/docker-compose": {
+			"version": "0.24.2",
+			"resolved": "https://registry.npmjs.org/docker-compose/-/docker-compose-0.24.2.tgz",
+			"integrity": "sha512-2/WLvA7UZ6A2LDLQrYW0idKipmNBWhtfvrn2yzjC5PnHDzuFVj1zAZN6MJxVMKP0zZH8uzAK6OwVZYHGuyCmTw==",
+			"dependencies": {
+				"yaml": "^2.2.2"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
 		},
-		"vary": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-			"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+		"packages/env/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
 		},
-		"vendors": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-			"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-			"dev": true
+		"packages/env/node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"verror": {
-			"version": "1.10.0",
-			"resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-			"integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-			"dev": true,
-			"requires": {
-				"assert-plus": "^1.0.0",
-				"core-util-is": "1.0.2",
-				"extsprintf": "^1.2.0"
-			},
+		"packages/env/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
 			"dependencies": {
-				"core-util-is": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-					"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-					"dev": true
-				}
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
 			}
 		},
-		"vfile": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/vfile/-/vfile-3.0.1.tgz",
-			"integrity": "sha512-y7Y3gH9BsUSdD4KzHsuMaCzRjglXN0W2EcMf0gpvu6+SbsGhMje7xDc8AEoeXy6mIwCKMI6BkjMsRjzQbhMEjQ==",
-			"dev": true,
-			"requires": {
-				"is-buffer": "^2.0.0",
-				"replace-ext": "1.0.0",
-				"unist-util-stringify-position": "^1.0.0",
-				"vfile-message": "^1.0.0"
-			},
+		"packages/env/node_modules/wrap-ansi": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
 			"dependencies": {
-				"is-buffer": {
-					"version": "2.0.3",
-					"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-					"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==",
-					"dev": true
-				}
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
 			}
 		},
-		"vfile-location": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.3.tgz",
-			"integrity": "sha512-zM5/l4lfw1CBoPx3Jimxoc5RNDAHHpk6AM6LM0pTIkm5SUSsx8ZekZ0PVdf0WEZ7kjlhSt7ZlqbRL6Cd6dBs6A==",
-			"dev": true
+		"packages/env/node_modules/y18n": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+			"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
 		},
-		"vfile-message": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.0.1.tgz",
-			"integrity": "sha512-vSGCkhNvJzO6VcWC6AlJW4NtYOVtS+RgCaqFIYUjoGIlHnFL+i0LbtYvonDWOMcB97uTPT4PRsyYY7REWC9vug==",
-			"dev": true,
-			"requires": {
-				"unist-util-stringify-position": "^1.1.1"
+		"packages/env/node_modules/yaml": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+			"integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+			"license": "ISC",
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14"
 			}
 		},
-		"vlq": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/vlq/-/vlq-1.0.1.tgz",
-			"integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="
-		},
-		"vm-browserify": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-			"integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
-			"dev": true
-		},
-		"w3c-hr-time": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-			"integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-			"dev": true,
-			"requires": {
-				"browser-process-hrtime": "^1.0.0"
+		"packages/env/node_modules/yargs": {
+			"version": "17.7.2",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+			"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+			"dependencies": {
+				"cliui": "^8.0.1",
+				"escalade": "^3.1.1",
+				"get-caller-file": "^2.0.5",
+				"require-directory": "^2.1.1",
+				"string-width": "^4.2.3",
+				"y18n": "^5.0.5",
+				"yargs-parser": "^21.1.1"
+			},
+			"engines": {
+				"node": ">=12"
 			}
 		},
-		"w3c-xmlserializer": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-			"integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
-			"dev": true,
-			"requires": {
-				"xml-name-validator": "^3.0.0"
-			}
+		"packages/env/node_modules/yargs-parser": {
+			"version": "21.1.1",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+			"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
 		},
-		"wait-on": {
-			"version": "6.0.0",
-			"resolved": "https://registry.npmjs.org/wait-on/-/wait-on-6.0.0.tgz",
-			"integrity": "sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==",
-			"dev": true,
-			"requires": {
-				"axios": "^0.21.1",
-				"joi": "^17.4.0",
-				"lodash": "^4.17.21",
-				"minimist": "^1.2.5",
-				"rxjs": "^7.1.0"
+		"packages/escape-html": {
+			"name": "@wordpress/escape-html",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/eslint-plugin": {
+			"name": "@wordpress/eslint-plugin",
+			"version": "21.6.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"axios": {
-					"version": "0.21.4",
-					"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-					"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
-					"dev": true,
-					"requires": {
-						"follow-redirects": "^1.14.0"
-					}
-				},
-				"rxjs": {
-					"version": "7.4.0",
-					"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.4.0.tgz",
-					"integrity": "sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==",
-					"dev": true,
-					"requires": {
-						"tslib": "~2.1.0"
-					}
+				"@babel/eslint-parser": "7.25.7",
+				"@typescript-eslint/eslint-plugin": "^6.4.1",
+				"@typescript-eslint/parser": "^6.4.1",
+				"@wordpress/babel-preset-default": "*",
+				"@wordpress/prettier-config": "*",
+				"cosmiconfig": "^7.0.0",
+				"eslint-config-prettier": "^8.3.0",
+				"eslint-plugin-import": "^2.25.2",
+				"eslint-plugin-jest": "^27.4.3",
+				"eslint-plugin-jsdoc": "^46.4.6",
+				"eslint-plugin-jsx-a11y": "^6.5.1",
+				"eslint-plugin-playwright": "^0.15.3",
+				"eslint-plugin-prettier": "^5.0.0",
+				"eslint-plugin-react": "^7.27.0",
+				"eslint-plugin-react-hooks": "^4.3.0",
+				"globals": "^13.12.0",
+				"requireindex": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@babel/core": ">=7",
+				"eslint": ">=8",
+				"prettier": ">=3",
+				"typescript": ">=5"
+			},
+			"peerDependenciesMeta": {
+				"prettier": {
+					"optional": true
 				},
-				"tslib": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-					"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-					"dev": true
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
-		"walk-up-path": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-1.0.0.tgz",
-			"integrity": "sha512-hwj/qMDUEjCU5h0xr90KGCf0tg0/LgJbmOWgrWKYlcJZM7XvquvUJZ0G/HMGr7F7OQMOUuPHWP9JpriinkAlkg==",
-			"dev": true
-		},
-		"walker": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
-			"integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
-			"requires": {
-				"makeerror": "1.0.x"
+		"packages/eslint-plugin/node_modules/@babel/eslint-parser": {
+			"version": "7.25.7",
+			"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.7.tgz",
+			"integrity": "sha512-B+BO9x86VYsQHimucBAL1fxTJKF4wyKY6ZVzee9QgzdZOUfs3BaR6AQrgoGrRI+7IFS1wUz/VyQ+SoBcSpdPbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+				"eslint-visitor-keys": "^2.1.0",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.11.0",
+				"eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
 			}
 		},
-		"warn-once": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
-			"integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
-		},
-		"warning": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-			"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-			"dev": true,
-			"requires": {
-				"loose-envify": "^1.0.0"
+		"packages/eslint-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
 			}
 		},
-		"watchpack": {
-			"version": "1.7.5",
-			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-			"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
-			"dev": true,
-			"requires": {
-				"chokidar": "^3.4.1",
-				"graceful-fs": "^4.1.2",
-				"neo-async": "^2.5.0",
-				"watchpack-chokidar2": "^2.0.1"
+		"packages/fields": {
+			"name": "@wordpress/fields",
+			"version": "0.5.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/dataviews": "*",
+				"@wordpress/date": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/media-utils": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/patterns": "*",
+				"@wordpress/primitives": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/router": "*",
+				"@wordpress/url": "*",
+				"@wordpress/warning": "*",
+				"change-case": "4.1.2",
+				"client-zip": "^2.4.5",
+				"clsx": "2.1.1",
+				"remove-accents": "^0.5.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
+		"packages/format-library": {
+			"name": "@wordpress/format-library",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/rich-text": "*",
+				"@wordpress/url": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/hooks": {
+			"name": "@wordpress/hooks",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/html-entities": {
+			"name": "@wordpress/html-entities",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/i18n": {
+			"name": "@wordpress/i18n",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "*",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"watchpack-chokidar2": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
-			"integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
-			"dev": true,
-			"optional": true,
-			"requires": {
-				"chokidar": "^2.1.8"
+		"packages/icons": {
+			"name": "@wordpress/icons",
+			"version": "10.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/element": "*",
+				"@wordpress/primitives": "*"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/interactivity": {
+			"name": "@wordpress/interactivity",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"binary-extensions": {
-					"version": "1.13.1",
-					"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-					"integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-					"dev": true,
-					"optional": true
-				},
-				"chokidar": {
-					"version": "2.1.8",
-					"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-					"integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"anymatch": "^2.0.0",
-						"async-each": "^1.0.1",
-						"braces": "^2.3.2",
-						"fsevents": "^1.2.7",
-						"glob-parent": "^3.1.0",
-						"inherits": "^2.0.3",
-						"is-binary-path": "^1.0.0",
-						"is-glob": "^4.0.0",
-						"normalize-path": "^3.0.0",
-						"path-is-absolute": "^1.0.0",
-						"readdirp": "^2.2.1",
-						"upath": "^1.1.1"
-					}
-				},
-				"fsevents": {
-					"version": "1.2.13",
-					"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-					"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"bindings": "^1.5.0",
-						"nan": "^2.12.1"
-					}
-				},
-				"is-binary-path": {
-					"version": "1.0.1",
-					"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-					"integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"binary-extensions": "^1.0.0"
-					}
-				},
-				"normalize-path": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-					"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-					"dev": true,
-					"optional": true
-				},
-				"readdirp": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-					"integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-					"dev": true,
-					"optional": true,
-					"requires": {
-						"graceful-fs": "^4.1.11",
-						"micromatch": "^3.1.10",
-						"readable-stream": "^2.0.2"
-					}
-				}
+				"@preact/signals": "^1.3.0",
+				"preact": "^10.24.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"wbuf": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-			"integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-			"dev": true,
-			"requires": {
-				"minimalistic-assert": "^1.0.0"
+		"packages/interactivity-router": {
+			"name": "@wordpress/interactivity-router",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/a11y": "*",
+				"@wordpress/interactivity": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"wcwidth": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-			"integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
-			"requires": {
-				"defaults": "^1.0.3"
+		"packages/interface": {
+			"name": "@wordpress/interface",
+			"version": "8.2.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/plugins": "*",
+				"@wordpress/preferences": "*",
+				"@wordpress/viewport": "*",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"wd": {
-			"version": "1.12.1",
-			"resolved": "https://registry.npmjs.org/wd/-/wd-1.12.1.tgz",
-			"integrity": "sha512-O99X8OnOgkqfmsPyLIRzG9LmZ+rjmdGFBCyhGpnsSL4MB4xzHoeWmSVcumDiQ5QqPZcwGkszTgeJvjk2VjtiNw==",
-			"dev": true,
-			"requires": {
-				"archiver": "^3.0.0",
-				"async": "^2.0.0",
-				"lodash": "^4.0.0",
-				"mkdirp": "^0.5.1",
-				"q": "^1.5.1",
-				"request": "2.88.0",
-				"vargs": "^0.1.0"
-			},
-			"dependencies": {
-				"async": {
-					"version": "2.6.4",
-					"resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
-					"integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
-					"dev": true,
-					"requires": {
-						"lodash": "^4.17.14"
-					}
-				}
+		"packages/is-shallow-equal": {
+			"name": "@wordpress/is-shallow-equal",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"web-namespaces": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
-			"integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==",
-			"dev": true
+		"packages/jest-console": {
+			"name": "@wordpress/jest-console",
+			"version": "8.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"jest-matcher-utils": "^29.6.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"jest": ">=29"
+			}
 		},
-		"webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-			"dev": true
-		},
-		"webpack": {
-			"version": "5.65.0",
-			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.65.0.tgz",
-			"integrity": "sha512-Q5or2o6EKs7+oKmJo7LaqZaMOlDWQse9Tm5l1WAfU/ujLGN5Pb0SqGeVkN/4bpPmEqEP5RnVhiqsOtWtUVwGRw==",
-			"dev": true,
-			"requires": {
-				"@types/eslint-scope": "^3.7.0",
-				"@types/estree": "^0.0.50",
-				"@webassemblyjs/ast": "1.11.1",
-				"@webassemblyjs/wasm-edit": "1.11.1",
-				"@webassemblyjs/wasm-parser": "1.11.1",
-				"acorn": "^8.4.1",
-				"acorn-import-assertions": "^1.7.6",
-				"browserslist": "^4.14.5",
-				"chrome-trace-event": "^1.0.2",
-				"enhanced-resolve": "^5.8.3",
-				"es-module-lexer": "^0.9.0",
-				"eslint-scope": "5.1.1",
-				"events": "^3.2.0",
-				"glob-to-regexp": "^0.4.1",
-				"graceful-fs": "^4.2.4",
-				"json-parse-better-errors": "^1.0.2",
-				"loader-runner": "^4.2.0",
-				"mime-types": "^2.1.27",
-				"neo-async": "^2.6.2",
-				"schema-utils": "^3.1.0",
-				"tapable": "^2.1.1",
-				"terser-webpack-plugin": "^5.1.3",
-				"watchpack": "^2.3.1",
-				"webpack-sources": "^3.2.2"
+		"packages/jest-preset-default": {
+			"name": "@wordpress/jest-preset-default",
+			"version": "12.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/jest-console": "*",
+				"babel-jest": "29.7.0"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@babel/core": ">=7",
+				"jest": ">=29"
+			}
+		},
+		"packages/jest-puppeteer-axe": {
+			"name": "@wordpress/jest-puppeteer-axe",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"@webassemblyjs/ast": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
-					"integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/helper-numbers": "1.11.1",
-						"@webassemblyjs/helper-wasm-bytecode": "1.11.1"
-					}
-				},
-				"@webassemblyjs/helper-api-error": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-					"integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-					"dev": true
-				},
-				"@webassemblyjs/helper-buffer": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-					"integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-					"dev": true
-				},
-				"@webassemblyjs/helper-wasm-bytecode": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-					"integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-					"dev": true
-				},
-				"@webassemblyjs/helper-wasm-section": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
-					"integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@webassemblyjs/helper-buffer": "1.11.1",
-						"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-						"@webassemblyjs/wasm-gen": "1.11.1"
-					}
-				},
-				"@webassemblyjs/ieee754": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
-					"integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
-					"dev": true,
-					"requires": {
-						"@xtuc/ieee754": "^1.2.0"
-					}
-				},
-				"@webassemblyjs/leb128": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
-					"integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
-					"dev": true,
-					"requires": {
-						"@xtuc/long": "4.2.2"
-					}
-				},
-				"@webassemblyjs/utf8": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-					"integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-					"dev": true
-				},
-				"@webassemblyjs/wasm-edit": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
-					"integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@webassemblyjs/helper-buffer": "1.11.1",
-						"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-						"@webassemblyjs/helper-wasm-section": "1.11.1",
-						"@webassemblyjs/wasm-gen": "1.11.1",
-						"@webassemblyjs/wasm-opt": "1.11.1",
-						"@webassemblyjs/wasm-parser": "1.11.1",
-						"@webassemblyjs/wast-printer": "1.11.1"
-					}
-				},
-				"@webassemblyjs/wasm-gen": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
-					"integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-						"@webassemblyjs/ieee754": "1.11.1",
-						"@webassemblyjs/leb128": "1.11.1",
-						"@webassemblyjs/utf8": "1.11.1"
-					}
-				},
-				"@webassemblyjs/wasm-opt": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
-					"integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@webassemblyjs/helper-buffer": "1.11.1",
-						"@webassemblyjs/wasm-gen": "1.11.1",
-						"@webassemblyjs/wasm-parser": "1.11.1"
-					}
-				},
-				"@webassemblyjs/wasm-parser": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
-					"integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@webassemblyjs/helper-api-error": "1.11.1",
-						"@webassemblyjs/helper-wasm-bytecode": "1.11.1",
-						"@webassemblyjs/ieee754": "1.11.1",
-						"@webassemblyjs/leb128": "1.11.1",
-						"@webassemblyjs/utf8": "1.11.1"
-					}
-				},
-				"@webassemblyjs/wast-printer": {
-					"version": "1.11.1",
-					"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
-					"integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
-					"dev": true,
-					"requires": {
-						"@webassemblyjs/ast": "1.11.1",
-						"@xtuc/long": "4.2.2"
-					}
-				},
-				"acorn": {
-					"version": "8.6.0",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz",
-					"integrity": "sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"enhanced-resolve": {
-					"version": "5.8.3",
-					"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz",
-					"integrity": "sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==",
-					"dev": true,
-					"requires": {
-						"graceful-fs": "^4.2.4",
-						"tapable": "^2.2.0"
-					}
-				},
-				"es-module-lexer": {
-					"version": "0.9.3",
-					"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-					"integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-					"dev": true
-				},
-				"eslint-scope": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-					"dev": true,
-					"requires": {
-						"esrecurse": "^4.3.0",
-						"estraverse": "^4.1.1"
-					}
-				},
-				"glob-to-regexp": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-					"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-					"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
-				},
-				"loader-runner": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-					"integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
-					"dev": true
-				},
-				"mime-db": {
-					"version": "1.51.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-					"integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.34",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-					"integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.51.0"
-					}
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"tapable": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-					"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-					"dev": true
-				},
-				"watchpack": {
-					"version": "2.3.1",
-					"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
-					"integrity": "sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==",
-					"dev": true,
-					"requires": {
-						"glob-to-regexp": "^0.4.1",
-						"graceful-fs": "^4.1.2"
-					}
+				"@axe-core/puppeteer": "^4.0.0",
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"jest": ">=29",
+				"puppeteer": ">=11"
+			},
+			"peerDependenciesMeta": {
+				"puppeteer": {
+					"optional": true
 				}
 			}
 		},
-		"webpack-bundle-analyzer": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz",
-			"integrity": "sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==",
-			"dev": true,
-			"requires": {
-				"acorn": "^8.0.4",
-				"acorn-walk": "^8.0.0",
-				"chalk": "^4.1.0",
-				"commander": "^6.2.0",
-				"gzip-size": "^6.0.0",
-				"lodash": "^4.17.20",
-				"opener": "^1.5.2",
-				"sirv": "^1.0.7",
-				"ws": "^7.3.1"
+		"packages/keyboard-shortcuts": {
+			"name": "@wordpress/keyboard-shortcuts",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/keycodes": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
+		"packages/keycodes": {
+			"name": "@wordpress/keycodes",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/i18n": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/lazy-import": {
+			"name": "@wordpress/lazy-import",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"execa": "^4.0.2",
+				"npm-package-arg": "^8.1.5",
+				"semver": "^7.3.5"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/list-reusable-blocks": {
+			"name": "@wordpress/list-reusable-blocks",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"acorn": {
-					"version": "8.4.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
-					"integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
-					"dev": true
-				},
-				"acorn-walk": {
-					"version": "8.1.1",
-					"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.1.1.tgz",
-					"integrity": "sha512-FbJdceMlPHEAWJOILDk1fXD8lnTlEIWFkqtfk+MvmL5q/qlHfN7GEHcsFZWt/Tea9jRNPWUZG4G976nqAAmU9w==",
-					"dev": true
-				},
-				"commander": {
-					"version": "6.2.1",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-					"integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-					"dev": true
-				},
-				"duplexer": {
-					"version": "0.1.2",
-					"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-					"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-					"dev": true
-				},
-				"gzip-size": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-					"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-					"dev": true,
-					"requires": {
-						"duplexer": "^0.1.2"
-					}
-				}
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"change-case": "^4.1.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/media-utils": {
+			"name": "@wordpress/media-utils",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blob": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/private-apis": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/notices": {
+			"name": "@wordpress/notices",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/data": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
+		"packages/npm-package-json-lint-config": {
+			"name": "@wordpress/npm-package-json-lint-config",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"npm-package-json-lint": ">=6.0.0"
+			}
+		},
+		"packages/nux": {
+			"name": "@wordpress/nux",
+			"version": "9.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/patterns": {
+			"name": "@wordpress/patterns",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/html-entities": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/url": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/plugins": {
+			"name": "@wordpress/plugins",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/is-shallow-equal": "*",
+				"memize": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/postcss-plugins-preset": {
+			"name": "@wordpress/postcss-plugins-preset",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/base-styles": "*",
+				"autoprefixer": "^10.2.5"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.0"
 			}
 		},
-		"webpack-cli": {
-			"version": "4.9.1",
-			"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
-			"integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
-			"dev": true,
-			"requires": {
-				"@discoveryjs/json-ext": "^0.5.0",
-				"@webpack-cli/configtest": "^1.1.0",
-				"@webpack-cli/info": "^1.4.0",
-				"@webpack-cli/serve": "^1.6.0",
-				"colorette": "^2.0.14",
-				"commander": "^7.0.0",
-				"execa": "^5.0.0",
-				"fastest-levenshtein": "^1.0.12",
-				"import-local": "^3.0.2",
-				"interpret": "^2.2.0",
-				"rechoir": "^0.7.0",
-				"webpack-merge": "^5.7.3"
+		"packages/postcss-themes": {
+			"name": "@wordpress/postcss-themes",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
+			"peerDependencies": {
+				"postcss": "^8.0.0"
+			}
+		},
+		"packages/preferences": {
+			"name": "@wordpress/preferences",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"colorette": {
-					"version": "2.0.16",
-					"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
-					"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
-					"dev": true
-				},
-				"commander": {
-					"version": "7.2.0",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-					"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-					"dev": true
-				},
-				"cross-spawn": {
-					"version": "7.0.3",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-					"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.1.0",
-						"shebang-command": "^2.0.0",
-						"which": "^2.0.1"
-					}
-				},
-				"execa": {
-					"version": "5.1.1",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-					"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^7.0.3",
-						"get-stream": "^6.0.0",
-						"human-signals": "^2.1.0",
-						"is-stream": "^2.0.0",
-						"merge-stream": "^2.0.0",
-						"npm-run-path": "^4.0.1",
-						"onetime": "^5.1.2",
-						"signal-exit": "^3.0.3",
-						"strip-final-newline": "^2.0.0"
-					}
-				},
-				"find-up": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-					"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-					"dev": true,
-					"requires": {
-						"locate-path": "^5.0.0",
-						"path-exists": "^4.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-					"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-					"dev": true
-				},
-				"human-signals": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-					"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-					"dev": true
-				},
-				"import-local": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.3.tgz",
-					"integrity": "sha512-bE9iaUY3CXH8Cwfan/abDKAxe1KGT9kyGsBPqf6DMK/z0a2OzAsrukeYNgIH6cH5Xr452jb1TUL8rSfCLjZ9uA==",
-					"dev": true,
-					"requires": {
-						"pkg-dir": "^4.2.0",
-						"resolve-cwd": "^3.0.0"
-					}
-				},
-				"is-stream": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-					"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-					"dev": true
-				},
-				"locate-path": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-					"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-					"dev": true,
-					"requires": {
-						"p-locate": "^4.1.0"
-					}
-				},
-				"mimic-fn": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-					"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-					"dev": true
-				},
-				"npm-run-path": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-					"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-					"dev": true,
-					"requires": {
-						"path-key": "^3.0.0"
-					}
-				},
-				"onetime": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-					"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-					"dev": true,
-					"requires": {
-						"mimic-fn": "^2.1.0"
-					}
-				},
-				"p-limit": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-					"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-					"dev": true,
-					"requires": {
-						"p-try": "^2.0.0"
-					}
-				},
-				"p-locate": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-					"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-					"dev": true,
-					"requires": {
-						"p-limit": "^2.2.0"
-					}
-				},
-				"p-try": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-					"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-					"dev": true
-				},
-				"path-exists": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-					"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-					"dev": true
-				},
-				"path-key": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-					"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-					"dev": true
-				},
-				"pkg-dir": {
-					"version": "4.2.0",
-					"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-					"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-					"dev": true,
-					"requires": {
-						"find-up": "^4.0.0"
-					}
-				},
-				"rechoir": {
-					"version": "0.7.1",
-					"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
-					"integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
-					"dev": true,
-					"requires": {
-						"resolve": "^1.9.0"
-					}
-				},
-				"resolve": {
-					"version": "1.20.0",
-					"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-					"integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-					"dev": true,
-					"requires": {
-						"is-core-module": "^2.2.0",
-						"path-parse": "^1.0.6"
-					}
-				},
-				"resolve-cwd": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-					"integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-					"dev": true,
-					"requires": {
-						"resolve-from": "^5.0.0"
-					}
-				},
-				"resolve-from": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-					"integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-					"dev": true
-				},
-				"shebang-command": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-					"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-					"dev": true,
-					"requires": {
-						"shebang-regex": "^3.0.0"
-					}
-				},
-				"shebang-regex": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-					"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-					"dev": true
-				},
-				"signal-exit": {
-					"version": "3.0.5",
-					"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.5.tgz",
-					"integrity": "sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==",
-					"dev": true
-				},
-				"which": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-					"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-					"dev": true,
-					"requires": {
-						"isexe": "^2.0.0"
-					}
-				}
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/private-apis": "*",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"webpack-dev-middleware": {
-			"version": "4.3.0",
-			"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz",
-			"integrity": "sha512-PjwyVY95/bhBh6VUqt6z4THplYcsvQ8YNNBTBM873xLVmw8FLeALn0qurHbs9EmcfhzQis/eoqypSnZeuUz26w==",
-			"dev": true,
-			"requires": {
-				"colorette": "^1.2.2",
-				"mem": "^8.1.1",
-				"memfs": "^3.2.2",
-				"mime-types": "^2.1.30",
-				"range-parser": "^1.2.1",
-				"schema-utils": "^3.0.0"
+		"packages/preferences-persistence": {
+			"name": "@wordpress/preferences-persistence",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/prettier-config": {
+			"name": "@wordpress/prettier-config",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			},
+			"peerDependencies": {
+				"prettier": ">=3"
+			}
+		},
+		"packages/primitives": {
+			"name": "@wordpress/primitives",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@types/json-schema": {
-					"version": "7.0.11",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"mime-db": {
-					"version": "1.52.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-					"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.35",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-					"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.52.0"
-					}
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				}
+				"@babel/runtime": "7.25.7",
+				"@wordpress/element": "*",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
 			}
 		},
-		"webpack-dev-server": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.4.0.tgz",
-			"integrity": "sha512-+S0XRIbsopVjPFjCO8I07FXYBWYqkFmuP56ucGMTs2hA/gV4q2M9xTmNo5Tg4o8ffRR+Nm3AsXnQXxKRyYovrA==",
-			"dev": true,
-			"requires": {
-				"ansi-html-community": "^0.0.8",
-				"bonjour": "^3.5.0",
-				"chokidar": "^3.5.2",
-				"colorette": "^2.0.10",
-				"compression": "^1.7.4",
-				"connect-history-api-fallback": "^1.6.0",
-				"del": "^6.0.0",
-				"express": "^4.17.1",
-				"graceful-fs": "^4.2.6",
-				"html-entities": "^2.3.2",
-				"http-proxy-middleware": "^2.0.0",
-				"internal-ip": "^6.2.0",
-				"ipaddr.js": "^2.0.1",
-				"open": "^8.0.9",
-				"p-retry": "^4.5.0",
-				"portfinder": "^1.0.28",
-				"schema-utils": "^3.1.0",
-				"selfsigned": "^1.10.11",
-				"serve-index": "^1.9.1",
-				"sockjs": "^0.3.21",
-				"spdy": "^4.0.2",
-				"strip-ansi": "^7.0.0",
-				"url": "^0.11.0",
-				"webpack-dev-middleware": "^5.2.1",
-				"ws": "^8.1.0"
+		"packages/priority-queue": {
+			"name": "@wordpress/priority-queue",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"requestidlecallback": "^0.3.0"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/private-apis": {
+			"name": "@wordpress/private-apis",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@nodelib/fs.stat": {
-					"version": "2.0.5",
-					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-					"dev": true
-				},
-				"@types/json-schema": {
-					"version": "7.0.9",
-					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
-					"integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
-					"dev": true
-				},
-				"ajv": {
-					"version": "6.12.6",
-					"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-					"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-					"dev": true,
-					"requires": {
-						"fast-deep-equal": "^3.1.1",
-						"fast-json-stable-stringify": "^2.0.0",
-						"json-schema-traverse": "^0.4.1",
-						"uri-js": "^4.2.2"
-					}
-				},
-				"ajv-keywords": {
-					"version": "3.5.2",
-					"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-					"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-					"dev": true
-				},
-				"ansi-html-community": {
-					"version": "0.0.8",
-					"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-					"integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-					"dev": true
-				},
-				"ansi-regex": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-					"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-					"dev": true
-				},
-				"array-union": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-					"dev": true
-				},
-				"braces": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-					"dev": true,
-					"requires": {
-						"fill-range": "^7.0.1"
-					}
-				},
-				"colorette": {
-					"version": "2.0.16",
-					"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
-					"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
-					"dev": true
-				},
-				"del": {
-					"version": "6.0.0",
-					"resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-					"integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-					"dev": true,
-					"requires": {
-						"globby": "^11.0.1",
-						"graceful-fs": "^4.2.4",
-						"is-glob": "^4.0.1",
-						"is-path-cwd": "^2.2.0",
-						"is-path-inside": "^3.0.2",
-						"p-map": "^4.0.0",
-						"rimraf": "^3.0.2",
-						"slash": "^3.0.0"
-					}
-				},
-				"fast-deep-equal": {
-					"version": "3.1.3",
-					"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-					"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-					"dev": true
-				},
-				"fast-glob": {
-					"version": "3.2.7",
-					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
-					"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
-					"dev": true,
-					"requires": {
-						"@nodelib/fs.stat": "^2.0.2",
-						"@nodelib/fs.walk": "^1.2.3",
-						"glob-parent": "^5.1.2",
-						"merge2": "^1.3.0",
-						"micromatch": "^4.0.4"
-					}
-				},
-				"fill-range": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-					"dev": true,
-					"requires": {
-						"to-regex-range": "^5.0.1"
-					}
-				},
-				"glob-parent": {
-					"version": "5.1.2",
-					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-					"dev": true,
-					"requires": {
-						"is-glob": "^4.0.1"
-					}
-				},
-				"globby": {
-					"version": "11.0.4",
-					"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-					"integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
-					"dev": true,
-					"requires": {
-						"array-union": "^2.1.0",
-						"dir-glob": "^3.0.1",
-						"fast-glob": "^3.1.1",
-						"ignore": "^5.1.4",
-						"merge2": "^1.3.0",
-						"slash": "^3.0.0"
-					}
-				},
-				"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
-				},
-				"html-entities": {
-					"version": "2.3.2",
-					"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
-					"integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
-					"dev": true
-				},
-				"ipaddr.js": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
-					"integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
-					"dev": true
-				},
-				"is-docker": {
-					"version": "2.2.1",
-					"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-					"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-					"dev": true
-				},
-				"is-glob": {
-					"version": "4.0.3",
-					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-					"dev": true,
-					"requires": {
-						"is-extglob": "^2.1.1"
-					}
-				},
-				"is-number": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-					"dev": true
-				},
-				"is-path-inside": {
-					"version": "3.0.3",
-					"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-					"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-					"dev": true
-				},
-				"is-wsl": {
-					"version": "2.2.0",
-					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-					"dev": true,
-					"requires": {
-						"is-docker": "^2.0.0"
-					}
-				},
-				"merge2": {
-					"version": "1.4.1",
-					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-					"dev": true
-				},
-				"micromatch": {
-					"version": "4.0.4",
-					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-					"integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-					"dev": true,
-					"requires": {
-						"braces": "^3.0.1",
-						"picomatch": "^2.2.3"
-					}
-				},
-				"mime-db": {
-					"version": "1.51.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-					"integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
-					"dev": true
-				},
-				"mime-types": {
-					"version": "2.1.34",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
-					"integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
-					"dev": true,
-					"requires": {
-						"mime-db": "1.51.0"
-					}
-				},
-				"open": {
-					"version": "8.4.0",
-					"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-					"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
-					"dev": true,
-					"requires": {
-						"define-lazy-prop": "^2.0.0",
-						"is-docker": "^2.1.1",
-						"is-wsl": "^2.2.0"
-					}
-				},
-				"p-map": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-					"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-					"dev": true,
-					"requires": {
-						"aggregate-error": "^3.0.0"
-					}
-				},
-				"picomatch": {
-					"version": "2.3.0",
-					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-					"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-					"dev": true
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"dev": true,
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"strip-ansi": {
-					"version": "7.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
-					"integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^6.0.1"
-					}
-				},
-				"to-regex-range": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-					"dev": true,
-					"requires": {
-						"is-number": "^7.0.0"
-					}
-				},
-				"webpack-dev-middleware": {
-					"version": "5.2.1",
-					"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.2.1.tgz",
-					"integrity": "sha512-Kx1X+36Rn9JaZcQMrJ7qN3PMAuKmEDD9ZISjUj3Cgq4A6PtwYsC4mpaKotSRYH3iOF6HsUa8viHKS59FlyVifQ==",
-					"dev": true,
-					"requires": {
-						"colorette": "^2.0.10",
-						"memfs": "^3.2.2",
-						"mime-types": "^2.1.31",
-						"range-parser": "^1.2.1",
-						"schema-utils": "^3.1.0"
-					}
-				},
-				"ws": {
-					"version": "8.2.3",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-					"integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-					"dev": true
-				}
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"webpack-filter-warnings-plugin": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
-			"integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
-			"dev": true
+		"packages/project-management-automation": {
+			"name": "@wordpress/project-management-automation",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@actions/core": "1.9.1",
+				"@actions/github": "^5.0.0",
+				"@babel/runtime": "7.25.7",
+				"@octokit/request-error": "^2.1.0",
+				"@octokit/webhooks": "^9.26.3"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"webpack-hot-middleware": {
-			"version": "2.25.1",
-			"resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.1.tgz",
-			"integrity": "sha512-Koh0KyU/RPYwel/khxbsDz9ibDivmUbrRuKSSQvW42KSDdO4w23WI3SkHpSUKHE76LrFnnM/L7JCrpBwu8AXYw==",
-			"dev": true,
-			"requires": {
-				"ansi-html-community": "0.0.8",
-				"html-entities": "^2.1.0",
-				"querystring": "^0.2.0",
-				"strip-ansi": "^6.0.0"
+		"packages/project-management-automation/node_modules/@octokit/webhooks": {
+			"version": "9.26.3",
+			"resolved": "https://registry.npmjs.org/@octokit/webhooks/-/webhooks-9.26.3.tgz",
+			"integrity": "sha512-DLGk+gzeVq5oK89Bo601txYmyrelMQ7Fi5EnjHE0Xs8CWicy2xkmnJMKptKJrBJpstqbd/9oeDFi/Zj2pudBDQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@octokit/request-error": "^2.0.2",
+				"@octokit/webhooks-methods": "^2.0.0",
+				"@octokit/webhooks-types": "5.8.0",
+				"aggregate-error": "^3.1.0"
+			}
+		},
+		"packages/react-i18n": {
+			"name": "@wordpress/react-i18n",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"utility-types": "^3.10.0"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/react-native-aztec": {
+			"name": "@wordpress/react-native-aztec",
+			"version": "1.121.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@wordpress/element": "*",
+				"@wordpress/keycodes": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-native": "*"
 			}
 		},
-		"webpack-log": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",
-			"integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==",
-			"dev": true,
-			"requires": {
-				"ansi-colors": "^3.0.0",
-				"uuid": "^3.3.2"
+		"packages/react-native-bridge": {
+			"name": "@wordpress/react-native-bridge",
+			"version": "1.121.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@wordpress/react-native-aztec": "*"
 			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react-native": "*"
+			}
+		},
+		"packages/react-native-editor": {
+			"name": "@wordpress/react-native-editor",
+			"version": "1.121.0",
+			"hasInstallScript": true,
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"ansi-colors": {
-					"version": "3.2.4",
-					"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
-					"integrity": "sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==",
-					"dev": true
+				"@babel/runtime": "7.25.7",
+				"@react-native-clipboard/clipboard": "1.11.2",
+				"@react-native-community/blur": "4.2.0",
+				"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
+				"@react-native-masked-view/masked-view": "0.3.0",
+				"@react-navigation/core": "5.12.0",
+				"@react-navigation/native": "6.0.14",
+				"@react-navigation/routers": "5.4.9",
+				"@react-navigation/stack": "6.3.5",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/block-library": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/data": "*",
+				"@wordpress/edit-post": "*",
+				"@wordpress/element": "*",
+				"@wordpress/hooks": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/react-native-aztec": "*",
+				"@wordpress/react-native-bridge": "*",
+				"core-js": "^3.31.0",
+				"fast-average-color": "^9.1.1",
+				"gettext-parser": "^1.3.1",
+				"jed": "^1.1.1",
+				"jsdom-jscore-rn": "0.1.8",
+				"node-fetch": "2.7.0",
+				"react-native": "0.73.3",
+				"react-native-fast-image": "8.5.11",
+				"react-native-gesture-handler": "2.14.1",
+				"react-native-get-random-values": "1.4.0",
+				"react-native-linear-gradient": "2.7.3",
+				"react-native-modal": "13.0.1",
+				"react-native-reanimated": "3.6.2",
+				"react-native-safe-area": "^0.5.0",
+				"react-native-safe-area-context": "4.8.2",
+				"react-native-sass-transformer": "^1.1.1",
+				"react-native-screens": "3.29.0",
+				"react-native-svg": "14.0.0",
+				"react-native-url-polyfill": "1.3.0",
+				"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
+				"react-native-webview": "13.6.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/react-native-editor/node_modules/buffer": {
+			"version": "5.7.1",
+			"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+			"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
 				},
-				"uuid": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-					"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-					"dev": true
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
 				}
+			],
+			"dependencies": {
+				"base64-js": "^1.3.1",
+				"ieee754": "^1.1.13"
 			}
 		},
-		"webpack-merge": {
-			"version": "5.8.0",
-			"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-			"integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
-			"dev": true,
-			"requires": {
-				"clone-deep": "^4.0.1",
-				"wildcard": "^2.0.0"
+		"packages/react-native-editor/node_modules/react-native-url-polyfill": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz",
+			"integrity": "sha512-w9JfSkvpqqlix9UjDvJjm1EjSt652zVQ6iwCIj1cVVkwXf4jQhQgTNXY6EVTwuAmUjg6BC6k9RHCBynoLFo3IQ==",
+			"dependencies": {
+				"whatwg-url-without-unicode": "8.0.0-3"
+			},
+			"peerDependencies": {
+				"react-native": "*"
 			}
 		},
-		"webpack-sources": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.2.tgz",
-			"integrity": "sha512-cp5qdmHnu5T8wRg2G3vZZHoJPN14aqQ89SyQ11NpGH5zEMDCclt49rzo+MaRazk7/UeILhAI+/sEtcM+7Fr0nw==",
-			"dev": true
+		"packages/react-native-editor/node_modules/webidl-conversions": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
+			"integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
+			"engines": {
+				"node": ">=8"
+			}
 		},
-		"webpack-virtual-modules": {
-			"version": "0.4.3",
-			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz",
-			"integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
-			"dev": true
+		"packages/react-native-editor/node_modules/whatwg-url-without-unicode": {
+			"version": "8.0.0-3",
+			"resolved": "https://registry.npmjs.org/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-3.tgz",
+			"integrity": "sha512-HoKuzZrUlgpz35YO27XgD28uh/WJH4B0+3ttFqRo//lmq+9T/mIOJ6kqmINI9HpUpz1imRC/nR/lxKpJiv0uig==",
+			"dependencies": {
+				"buffer": "^5.4.3",
+				"punycode": "^2.1.1",
+				"webidl-conversions": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
 		},
-		"websocket-driver": {
-			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-			"integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-			"dev": true,
-			"requires": {
-				"http-parser-js": ">=0.5.1",
-				"safe-buffer": ">=5.1.0",
-				"websocket-extensions": ">=0.1.1"
+		"packages/readable-js-assets-webpack-plugin": {
+			"name": "@wordpress/readable-js-assets-webpack-plugin",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"webpack": "^4.8.3 || ^5.0.0"
 			}
 		},
-		"websocket-extensions": {
-			"version": "0.1.4",
-			"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-			"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-			"dev": true
+		"packages/redux-routine": {
+			"name": "@wordpress/redux-routine",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"is-plain-object": "^5.0.0",
+				"is-promise": "^4.0.0",
+				"rungen": "^0.3.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"redux": ">=4"
+			}
 		},
-		"whatwg-encoding": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-			"integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-			"dev": true,
-			"requires": {
-				"iconv-lite": "0.4.24"
+		"packages/report-flaky-tests": {
+			"name": "@wordpress/report-flaky-tests",
+			"version": "0.0.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@actions/core": "^1.8.0",
+				"@actions/github": "^5.0.1",
+				"jest-message-util": "^29.6.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
+		"packages/report-flaky-tests/node_modules/@actions/github": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/@actions/github/-/github-5.1.1.tgz",
+			"integrity": "sha512-Nk59rMDoJaV+mHCOJPXuvB1zIbomlKS0dmSIqPGxd0enAXBnOfn4VWF+CGtRCwXZG9Epa54tZA7VIRlJDS8A6g==",
+			"dependencies": {
+				"@actions/http-client": "^2.0.1",
+				"@octokit/core": "^3.6.0",
+				"@octokit/plugin-paginate-rest": "^2.17.0",
+				"@octokit/plugin-rest-endpoint-methods": "^5.13.0"
+			}
+		},
+		"packages/reusable-blocks": {
+			"name": "@wordpress/reusable-blocks",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/notices": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/url": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/rich-text": {
+			"name": "@wordpress/rich-text",
+			"version": "7.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/a11y": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/escape-html": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/keycodes": "*",
+				"memize": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
+		"packages/router": {
+			"name": "@wordpress/router",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/compose": "*",
+				"@wordpress/element": "*",
+				"@wordpress/private-apis": "*",
+				"@wordpress/url": "*",
+				"history": "^5.3.0",
+				"route-recognizer": "^0.3.4"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
+		},
+		"packages/scripts": {
+			"name": "@wordpress/scripts",
+			"version": "30.6.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/core": "7.25.7",
+				"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+				"@svgr/webpack": "^8.0.1",
+				"@wordpress/babel-preset-default": "*",
+				"@wordpress/browserslist-config": "*",
+				"@wordpress/dependency-extraction-webpack-plugin": "*",
+				"@wordpress/e2e-test-utils-playwright": "*",
+				"@wordpress/eslint-plugin": "*",
+				"@wordpress/jest-preset-default": "*",
+				"@wordpress/npm-package-json-lint-config": "*",
+				"@wordpress/postcss-plugins-preset": "*",
+				"@wordpress/prettier-config": "*",
+				"@wordpress/stylelint-config": "*",
+				"adm-zip": "^0.5.9",
+				"babel-jest": "29.7.0",
+				"babel-loader": "9.2.1",
+				"browserslist": "^4.21.10",
+				"chalk": "^4.0.0",
+				"check-node-version": "^4.1.0",
+				"clean-webpack-plugin": "^3.0.0",
+				"copy-webpack-plugin": "^10.2.0",
+				"cross-spawn": "^5.1.0",
+				"css-loader": "^6.2.0",
+				"cssnano": "^6.0.1",
+				"cwd": "^0.10.0",
+				"dir-glob": "^3.0.1",
+				"eslint": "^8.3.0",
+				"expect-puppeteer": "^4.4.0",
+				"fast-glob": "^3.2.7",
+				"filenamify": "^4.2.0",
+				"jest": "^29.6.2",
+				"jest-dev-server": "^9.0.1",
+				"jest-environment-jsdom": "^29.6.2",
+				"jest-environment-node": "^29.6.2",
+				"json2php": "^0.0.9",
+				"markdownlint-cli": "^0.31.1",
+				"merge-deep": "^3.0.3",
+				"mini-css-extract-plugin": "^2.9.2",
+				"minimist": "^1.2.0",
+				"npm-package-json-lint": "^6.4.0",
+				"npm-packlist": "^3.0.0",
+				"postcss": "^8.4.5",
+				"postcss-loader": "^6.2.1",
+				"prettier": "npm:wp-prettier@3.0.3",
+				"puppeteer-core": "^23.1.0",
+				"react-refresh": "^0.14.0",
+				"read-pkg-up": "^7.0.1",
+				"resolve-bin": "^0.4.0",
+				"rtlcss-webpack-plugin": "^4.0.7",
+				"sass": "^1.50.1",
+				"sass-loader": "^16.0.3",
+				"schema-utils": "^4.2.0",
+				"source-map-loader": "^3.0.0",
+				"stylelint": "^16.8.2",
+				"terser-webpack-plugin": "^5.3.10",
+				"url-loader": "^4.1.1",
+				"webpack": "^5.97.0",
+				"webpack-bundle-analyzer": "^4.9.1",
+				"webpack-cli": "^5.1.4",
+				"webpack-dev-server": "^4.15.1"
 			},
-			"dependencies": {
-				"iconv-lite": {
-					"version": "0.4.24",
-					"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-					"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-					"dev": true,
-					"requires": {
-						"safer-buffer": ">= 2.1.2 < 3"
-					}
-				}
-			}
-		},
-		"whatwg-fetch": {
-			"version": "3.6.2",
-			"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-			"integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
-		},
-		"whatwg-mimetype": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-			"integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
-			"dev": true
-		},
-		"whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"dev": true,
-			"requires": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
-		"whatwg-url-without-unicode": {
-			"version": "8.0.0-1",
-			"resolved": "https://registry.npmjs.org/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-1.tgz",
-			"integrity": "sha512-0Uy8mjsG5O8Y53327XL+ZqsrMdxO1CL/6m840SmW5iyRWFvU2zlxS2RzpD3pFFVKYOKCmsKn5JKzWxQ+bImnWA==",
-			"requires": {
-				"webidl-conversions": "^5.0.0"
+			"bin": {
+				"wp-scripts": "bin/wp-scripts.js"
 			},
-			"dependencies": {
-				"webidl-conversions": {
-					"version": "5.0.0",
-					"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-					"integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
-				}
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"@playwright/test": "^1.48.1",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"which": {
-			"version": "1.3.1",
-			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-			"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-			"requires": {
-				"isexe": "^2.0.0"
+		"packages/scripts/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
-		"which-boxed-primitive": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-			"integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-			"dev": true,
-			"requires": {
-				"is-bigint": "^1.0.1",
-				"is-boolean-object": "^1.1.0",
-				"is-number-object": "^1.0.4",
-				"is-string": "^1.0.5",
-				"is-symbol": "^1.0.3"
-			},
+		"packages/scripts/node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"license": "MIT",
 			"dependencies": {
-				"has-symbols": {
-					"version": "1.0.2",
-					"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-					"integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-					"dev": true
-				},
-				"is-boolean-object": {
-					"version": "1.1.0",
-					"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
-					"integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
-					"dev": true,
-					"requires": {
-						"call-bind": "^1.0.0"
-					}
-				},
-				"is-symbol": {
-					"version": "1.0.3",
-					"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-					"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-					"dev": true,
-					"requires": {
-						"has-symbols": "^1.0.1"
-					}
-				}
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
 			}
 		},
-		"which-module": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-			"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+		"packages/scripts/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
 		},
-		"wicg-inert": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/wicg-inert/-/wicg-inert-3.1.2.tgz",
-			"integrity": "sha512-Ba9tGNYxXwaqKEi9sJJvPMKuo063umUPsHN0JJsjrs2j8KDSzkWLMZGZ+MH1Jf1Fq4OWZ5HsESJID6nRza2ang=="
+		"packages/scripts/node_modules/json2php": {
+			"version": "0.0.9",
+			"resolved": "https://registry.npmjs.org/json2php/-/json2php-0.0.9.tgz",
+			"integrity": "sha512-fQMYwvPsQt8hxRnCGyg1r2JVi6yL8Um0DIIawiKiMK9yhAAkcRNj5UsBWoaFvFzPpcWbgw9L6wzj+UMYA702Mw==",
+			"license": "BSD"
 		},
-		"wide-align": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-			"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-			"dev": true,
-			"requires": {
-				"string-width": "^1.0.2 || 2"
+		"packages/scripts/node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
 			}
 		},
-		"widest-line": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-			"integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
-			"dev": true,
-			"requires": {
-				"string-width": "^4.0.0"
-			},
+		"packages/server-side-render": {
+			"name": "@wordpress/server-side-render",
+			"version": "5.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/deprecated": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/url": "*",
+				"fast-deep-equal": "^3.1.3"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"wildcard": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-			"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
-			"dev": true
-		},
-		"windows-release": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/windows-release/-/windows-release-3.2.0.tgz",
-			"integrity": "sha512-QTlz2hKLrdqukrsapKsINzqMgOUpQW268eJ0OaOpJN32h272waxR9fkB9VoWRtK7uKHG5EHJcTXQBD8XZVJkFA==",
-			"dev": true,
-			"requires": {
-				"execa": "^1.0.0"
-			},
+		"packages/shortcode": {
+			"name": "@wordpress/shortcode",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"cross-spawn": {
-					"version": "6.0.5",
-					"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-					"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-					"dev": true,
-					"requires": {
-						"nice-try": "^1.0.4",
-						"path-key": "^2.0.1",
-						"semver": "^5.5.0",
-						"shebang-command": "^1.2.0",
-						"which": "^1.2.9"
-					}
-				},
-				"execa": {
-					"version": "1.0.0",
-					"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-					"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-					"dev": true,
-					"requires": {
-						"cross-spawn": "^6.0.0",
-						"get-stream": "^4.0.0",
-						"is-stream": "^1.1.0",
-						"npm-run-path": "^2.0.0",
-						"p-finally": "^1.0.0",
-						"signal-exit": "^3.0.0",
-						"strip-eof": "^1.0.0"
-					}
-				},
-				"get-stream": {
-					"version": "4.1.0",
-					"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-					"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-					"dev": true,
-					"requires": {
-						"pump": "^3.0.0"
-					}
-				},
-				"pump": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-					"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-					"dev": true,
-					"requires": {
-						"end-of-stream": "^1.1.0",
-						"once": "^1.3.1"
-					}
-				},
-				"semver": {
-					"version": "5.7.0",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-					"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
-					"dev": true
-				}
+				"@babel/runtime": "7.25.7",
+				"memize": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"word-wrap": {
-			"version": "1.2.3",
-			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-			"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-			"dev": true
-		},
-		"wordwrap": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-			"integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
-			"dev": true
-		},
-		"worker-farm": {
-			"version": "1.7.0",
-			"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-			"integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
-			"dev": true,
-			"requires": {
-				"errno": "~0.1.7"
+		"packages/style-engine": {
+			"name": "@wordpress/style-engine",
+			"version": "2.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"change-case": "^4.1.2"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"worker-rpc": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
-			"integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
-			"dev": true,
-			"requires": {
-				"microevent.ts": "~0.1.1"
+		"packages/stylelint-config": {
+			"name": "@wordpress/stylelint-config",
+			"version": "23.5.0",
+			"license": "MIT",
+			"dependencies": {
+				"@stylistic/stylelint-plugin": "^3.0.1",
+				"stylelint-config-recommended": "^14.0.1",
+				"stylelint-config-recommended-scss": "^14.1.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.8.2"
 			}
 		},
-		"wrap-ansi": {
-			"version": "6.2.0",
-			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-			"requires": {
-				"ansi-styles": "^4.0.0",
-				"string-width": "^4.1.0",
-				"strip-ansi": "^6.0.0"
-			},
+		"packages/stylelint-config/node_modules/css-tree": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				}
+				"mdn-data": "2.0.30",
+				"source-map-js": "^1.0.1"
+			},
+			"engines": {
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
-		"wrappy": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+		"packages/stylelint-config/node_modules/mdn-data": {
+			"version": "2.0.30",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
-		"write-file-atomic": {
-			"version": "2.4.3",
-			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
-			"integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
-			"requires": {
-				"graceful-fs": "^4.1.11",
-				"imurmurhash": "^0.1.4",
-				"signal-exit": "^3.0.2"
+		"packages/stylelint-config/node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"packages/stylelint-config/node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
 			}
 		},
-		"write-json-file": {
-			"version": "3.2.0",
-			"resolved": "https://registry.npmjs.org/write-json-file/-/write-json-file-3.2.0.tgz",
-			"integrity": "sha512-3xZqT7Byc2uORAatYiP3DHUUAVEkNOswEWNs9H5KXiicRTvzYzYqKjYc4G7p+8pltvAw641lVByKVtMpf+4sYQ==",
-			"dev": true,
-			"requires": {
-				"detect-indent": "^5.0.0",
-				"graceful-fs": "^4.1.15",
-				"make-dir": "^2.1.0",
-				"pify": "^4.0.1",
-				"sort-keys": "^2.0.0",
-				"write-file-atomic": "^2.4.2"
-			},
-			"dependencies": {
-				"graceful-fs": {
-					"version": "4.2.2",
-					"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
-					"integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==",
-					"dev": true
+		"packages/stylelint-config/node_modules/stylelint-config-recommended": {
+			"version": "14.0.1",
+			"resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz",
+			"integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/stylelint"
 				},
-				"make-dir": {
-					"version": "2.1.0",
-					"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-					"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-					"dev": true,
-					"requires": {
-						"pify": "^4.0.1",
-						"semver": "^5.6.0"
-					}
-				},
-				"pify": {
-					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-					"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-					"dev": true
-				},
-				"semver": {
-					"version": "5.7.1",
-					"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-					"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-					"dev": true
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/stylelint"
 				}
+			],
+			"engines": {
+				"node": ">=18.12.0"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.1.0"
 			}
 		},
-		"write-pkg": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/write-pkg/-/write-pkg-4.0.0.tgz",
-			"integrity": "sha512-v2UQ+50TNf2rNHJ8NyWttfm/EJUBWMJcx6ZTYZr6Qp52uuegWw/lBkCtCbnYZEmPRNL61m+u67dAmGxo+HTULA==",
-			"dev": true,
-			"requires": {
-				"sort-keys": "^2.0.0",
-				"type-fest": "^0.4.1",
-				"write-json-file": "^3.2.0"
-			},
+		"packages/stylelint-config/node_modules/stylelint-config-recommended-scss": {
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz",
+			"integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==",
 			"dependencies": {
-				"type-fest": {
-					"version": "0.4.1",
-					"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.4.1.tgz",
-					"integrity": "sha512-IwzA/LSfD2vC1/YDYMv/zHP4rDF1usCwllsDpbolT3D4fUepIO7f9K70jjmUewU/LmGUKJcwcVtDCpnKk4BPMw==",
-					"dev": true
+				"postcss-scss": "^4.0.9",
+				"stylelint-config-recommended": "^14.0.1",
+				"stylelint-scss": "^6.4.0"
+			},
+			"engines": {
+				"node": ">=18.12.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.3",
+				"stylelint": "^16.6.1"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
 				}
 			}
 		},
-		"ws": {
-			"version": "7.4.2",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.2.tgz",
-			"integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA=="
-		},
-		"x-default-browser": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/x-default-browser/-/x-default-browser-0.4.0.tgz",
-			"integrity": "sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==",
-			"dev": true,
-			"requires": {
-				"default-browser-id": "^1.0.4"
+		"packages/stylelint-config/node_modules/stylelint-scss": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.5.1.tgz",
+			"integrity": "sha512-ZLqdqihm6uDYkrsOeD6YWb+stZI8Wn92kUNDhE4M+g9g1aCnRv0JlOrttFiAJJwaNzpdQgX3YJb5vDQXVuO9Ww==",
+			"dependencies": {
+				"css-tree": "2.3.1",
+				"is-plain-object": "5.0.0",
+				"known-css-properties": "^0.34.0",
+				"postcss-media-query-parser": "^0.2.3",
+				"postcss-resolve-nested-selector": "^0.1.4",
+				"postcss-selector-parser": "^6.1.1",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=18.12.0"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.0.2"
 			}
 		},
-		"x-is-string": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
-			"integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=",
-			"dev": true
-		},
-		"xcode": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/xcode/-/xcode-2.1.0.tgz",
-			"integrity": "sha512-uCrmPITrqTEzhn0TtT57fJaNaw8YJs1aCzs+P/QqxsDbvPZSv7XMPPwXrKvHtD6pLjBM/NaVwraWJm8q83Y4iQ==",
-			"requires": {
-				"simple-plist": "^1.0.0",
-				"uuid": "^3.3.2"
-			},
+		"packages/sync": {
+			"name": "@wordpress/sync",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"uuid": {
-					"version": "3.4.0",
-					"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-					"integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
-				}
+				"@babel/runtime": "7.25.7",
+				"@types/simple-peer": "^9.11.5",
+				"@wordpress/url": "*",
+				"import-locals": "^2.0.0",
+				"lib0": "^0.2.42",
+				"simple-peer": "^9.11.0",
+				"y-indexeddb": "~9.0.11",
+				"y-protocols": "^1.0.5",
+				"y-webrtc": "~10.2.5",
+				"yjs": "~13.6.6"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"xml": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
-			"integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=",
-			"dev": true
-		},
-		"xml-name-validator": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-			"integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-			"dev": true
-		},
-		"xmlchars": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-			"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-			"dev": true
-		},
-		"xmldoc": {
-			"version": "1.1.2",
-			"resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-1.1.2.tgz",
-			"integrity": "sha512-ruPC/fyPNck2BD1dpz0AZZyrEwMOrWTO5lDdIXS91rs3wtm4j+T8Rp2o+zoOYkkAxJTZRPOSnOGei1egoRmKMQ==",
-			"requires": {
-				"sax": "^1.2.1"
+		"packages/token-list": {
+			"name": "@wordpress/token-list",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"xtend": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-			"integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
-		},
-		"y18n": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
-		},
-		"yallist": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-			"dev": true
-		},
-		"yaml": {
-			"version": "1.7.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.7.2.tgz",
-			"integrity": "sha512-qXROVp90sb83XtAoqE8bP9RwAkTTZbugRUTm5YeFCBfNRPEp2YzTeqWiz7m5OORHzEvrA/qcGS8hp/E+MMROYw==",
-			"requires": {
-				"@babel/runtime": "^7.6.3"
+		"packages/undo-manager": {
+			"name": "@wordpress/undo-manager",
+			"version": "1.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/is-shallow-equal": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"yargs": {
-			"version": "16.2.0",
-			"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-			"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-			"dev": true,
-			"requires": {
-				"cliui": "^7.0.2",
-				"escalade": "^3.1.1",
-				"get-caller-file": "^2.0.5",
-				"require-directory": "^2.1.1",
-				"string-width": "^4.2.0",
-				"y18n": "^5.0.5",
-				"yargs-parser": "^20.2.2"
-			},
+		"packages/url": {
+			"name": "@wordpress/url",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"ansi-regex": {
-					"version": "5.0.1",
-					"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-					"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-					"dev": true
-				},
-				"ansi-styles": {
-					"version": "4.3.0",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-					"dev": true,
-					"requires": {
-						"color-convert": "^2.0.1"
-					}
-				},
-				"cliui": {
-					"version": "7.0.4",
-					"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-					"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-					"dev": true,
-					"requires": {
-						"string-width": "^4.2.0",
-						"strip-ansi": "^6.0.0",
-						"wrap-ansi": "^7.0.0"
-					}
-				},
-				"color-convert": {
-					"version": "2.0.1",
-					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-					"dev": true,
-					"requires": {
-						"color-name": "~1.1.4"
-					}
-				},
-				"color-name": {
-					"version": "1.1.4",
-					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
-				},
-				"emoji-regex": {
-					"version": "8.0.0",
-					"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-					"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-					"dev": true
-				},
-				"is-fullwidth-code-point": {
-					"version": "3.0.0",
-					"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-					"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-					"dev": true
-				},
-				"string-width": {
-					"version": "4.2.3",
-					"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-					"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-					"dev": true,
-					"requires": {
-						"emoji-regex": "^8.0.0",
-						"is-fullwidth-code-point": "^3.0.0",
-						"strip-ansi": "^6.0.1"
-					}
-				},
-				"strip-ansi": {
-					"version": "6.0.1",
-					"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-					"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-					"dev": true,
-					"requires": {
-						"ansi-regex": "^5.0.1"
-					}
-				},
-				"wrap-ansi": {
-					"version": "7.0.0",
-					"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-					"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^4.0.0",
-						"string-width": "^4.1.0",
-						"strip-ansi": "^6.0.0"
-					}
-				},
-				"y18n": {
-					"version": "5.0.8",
-					"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-					"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-					"dev": true
-				}
+				"@babel/runtime": "7.25.7",
+				"remove-accents": "^0.5.0"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"yargs-parser": {
-			"version": "20.2.9",
-			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-			"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-			"dev": true
+		"packages/viewport": {
+			"name": "@wordpress/viewport",
+			"version": "6.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/compose": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0"
+			}
 		},
-		"yauzl": {
-			"version": "2.4.1",
-			"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
-			"integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=",
-			"dev": true,
-			"requires": {
-				"fd-slicer": "~1.0.1"
+		"packages/vips": {
+			"name": "@wordpress/vips",
+			"version": "1.0.0-prerelease",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"wasm-vips": "^0.0.10"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
 			}
 		},
-		"yocto-queue": {
-			"version": "0.1.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-			"dev": true
+		"packages/warning": {
+			"name": "@wordpress/warning",
+			"version": "3.13.0",
+			"license": "GPL-2.0-or-later",
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		},
-		"zip-stream": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-2.1.3.tgz",
-			"integrity": "sha512-EkXc2JGcKhO5N5aZ7TmuNo45budRaFGHOmz24wtJR7znbNqDPmdZtUauKX6et8KAVseAMBOyWJqEpXcHTBsh7Q==",
-			"dev": true,
-			"requires": {
-				"archiver-utils": "^2.1.0",
-				"compress-commons": "^2.1.1",
-				"readable-stream": "^3.4.0"
-			},
+		"packages/widgets": {
+			"name": "@wordpress/widgets",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"readable-stream": {
-					"version": "3.6.0",
-					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-					"integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-					"dev": true,
-					"requires": {
-						"inherits": "^2.0.3",
-						"string_decoder": "^1.1.1",
-						"util-deprecate": "^1.0.1"
-					}
-				}
+				"@babel/runtime": "7.25.7",
+				"@wordpress/api-fetch": "*",
+				"@wordpress/block-editor": "*",
+				"@wordpress/blocks": "*",
+				"@wordpress/components": "*",
+				"@wordpress/compose": "*",
+				"@wordpress/core-data": "*",
+				"@wordpress/data": "*",
+				"@wordpress/element": "*",
+				"@wordpress/i18n": "*",
+				"@wordpress/icons": "*",
+				"@wordpress/notices": "*",
+				"clsx": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
 			}
 		},
-		"zwitch": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
-			"integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==",
-			"dev": true
+		"packages/wordcount": {
+			"name": "@wordpress/wordcount",
+			"version": "4.13.0",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index 0168806a72ec37..ce32c8071cce03 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.6.0-rc.1",
+	"version": "19.8.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -15,304 +15,249 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14.0.0",
-		"npm": ">=6.9.0 <7"
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
 	},
 	"config": {
 		"IS_GUTENBERG_PLUGIN": true
 	},
-	"dependencies": {
-		"@wordpress/a11y": "file:packages/a11y",
-		"@wordpress/annotations": "file:packages/annotations",
-		"@wordpress/api-fetch": "file:packages/api-fetch",
-		"@wordpress/autop": "file:packages/autop",
-		"@wordpress/blob": "file:packages/blob",
-		"@wordpress/block-directory": "file:packages/block-directory",
-		"@wordpress/block-editor": "file:packages/block-editor",
-		"@wordpress/block-library": "file:packages/block-library",
-		"@wordpress/block-serialization-default-parser": "file:packages/block-serialization-default-parser",
-		"@wordpress/block-serialization-spec-parser": "file:packages/block-serialization-spec-parser",
-		"@wordpress/blocks": "file:packages/blocks",
-		"@wordpress/components": "file:packages/components",
-		"@wordpress/compose": "file:packages/compose",
-		"@wordpress/core-data": "file:packages/core-data",
-		"@wordpress/customize-widgets": "file:packages/customize-widgets",
-		"@wordpress/data": "file:packages/data",
-		"@wordpress/data-controls": "file:packages/data-controls",
-		"@wordpress/date": "file:packages/date",
-		"@wordpress/deprecated": "file:packages/deprecated",
-		"@wordpress/dom": "file:packages/dom",
-		"@wordpress/dom-ready": "file:packages/dom-ready",
-		"@wordpress/edit-navigation": "file:packages/edit-navigation",
-		"@wordpress/edit-post": "file:packages/edit-post",
-		"@wordpress/edit-site": "file:packages/edit-site",
-		"@wordpress/edit-widgets": "file:packages/edit-widgets",
-		"@wordpress/editor": "file:packages/editor",
-		"@wordpress/element": "file:packages/element",
-		"@wordpress/escape-html": "file:packages/escape-html",
-		"@wordpress/experiments": "file:packages/experiments",
-		"@wordpress/format-library": "file:packages/format-library",
-		"@wordpress/hooks": "file:packages/hooks",
-		"@wordpress/html-entities": "file:packages/html-entities",
-		"@wordpress/i18n": "file:packages/i18n",
-		"@wordpress/icons": "file:packages/icons",
-		"@wordpress/interface": "file:packages/interface",
-		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
-		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
-		"@wordpress/keycodes": "file:packages/keycodes",
-		"@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",
-		"@wordpress/primitives": "file:packages/primitives",
-		"@wordpress/priority-queue": "file:packages/priority-queue",
-		"@wordpress/react-i18n": "file:packages/react-i18n",
-		"@wordpress/react-native-aztec": "file:packages/react-native-aztec",
-		"@wordpress/react-native-bridge": "file:packages/react-native-bridge",
-		"@wordpress/react-native-editor": "file:packages/react-native-editor",
-		"@wordpress/redux-routine": "file:packages/redux-routine",
-		"@wordpress/reusable-blocks": "file:packages/reusable-blocks",
-		"@wordpress/rich-text": "file:packages/rich-text",
-		"@wordpress/server-side-render": "file:packages/server-side-render",
-		"@wordpress/shortcode": "file:packages/shortcode",
-		"@wordpress/style-engine": "file:packages/style-engine",
-		"@wordpress/token-list": "file:packages/token-list",
-		"@wordpress/url": "file:packages/url",
-		"@wordpress/viewport": "file:packages/viewport",
-		"@wordpress/warning": "file:packages/warning",
-		"@wordpress/widgets": "file:packages/widgets",
-		"@wordpress/wordcount": "file:packages/wordcount",
-		"wicg-inert": "3.1.2"
-	},
 	"devDependencies": {
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
-		"@babel/core": "7.16.0",
-		"@babel/plugin-syntax-jsx": "7.16.0",
-		"@babel/runtime-corejs3": "7.16.0",
-		"@babel/traverse": "7.16.0",
-		"@emotion/babel-plugin": "11.3.0",
+		"@apidevtools/json-schema-ref-parser": "11.6.4",
+		"@ariakit/test": "^0.4.7",
+		"@babel/core": "7.25.7",
+		"@babel/plugin-syntax-jsx": "7.25.7",
+		"@babel/runtime-corejs3": "7.25.7",
+		"@babel/traverse": "7.25.7",
+		"@emotion/babel-plugin": "11.11.0",
 		"@emotion/jest": "11.7.1",
 		"@emotion/native": "11.0.0",
+		"@geometricpanda/storybook-addon-badges": "2.0.1",
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
-		"@octokit/webhooks-types": "5.6.0",
-		"@playwright/test": "1.27.1",
-		"@pmmmwh/react-refresh-webpack-plugin": "0.5.2",
-		"@storybook/addon-a11y": "6.5.7",
-		"@storybook/addon-actions": "6.5.7",
-		"@storybook/addon-controls": "6.5.7",
-		"@storybook/addon-docs": "6.5.7",
-		"@storybook/addon-knobs": "6.2.9",
-		"@storybook/addon-toolbars": "6.5.7",
-		"@storybook/addon-viewport": "6.5.7",
-		"@storybook/builder-webpack5": "6.5.7",
-		"@storybook/manager-webpack5": "6.5.7",
-		"@storybook/react": "6.5.7",
-		"@testing-library/jest-dom": "5.16.4",
-		"@testing-library/react": "12.1.5",
-		"@testing-library/react-native": "9.1.0",
-		"@testing-library/user-event": "14.2.0",
-		"@types/classnames": "2.3.1",
-		"@types/eslint": "7.28.0",
-		"@types/estree": "0.0.50",
-		"@types/highlight-words-core": "1.2.1",
+		"@octokit/webhooks-types": "5.8.0",
+		"@playwright/test": "1.48.1",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+		"@react-native/babel-preset": "0.73.10",
+		"@react-native/metro-babel-transformer": "0.73.10",
+		"@react-native/metro-config": "0.73.4",
+		"@storybook/addon-a11y": "7.6.15",
+		"@storybook/addon-actions": "7.6.15",
+		"@storybook/addon-controls": "7.6.15",
+		"@storybook/addon-docs": "7.6.15",
+		"@storybook/addon-toolbars": "7.6.15",
+		"@storybook/addon-viewport": "7.6.15",
+		"@storybook/react": "7.6.15",
+		"@storybook/react-webpack5": "7.6.15",
+		"@storybook/source-loader": "7.6.15",
+		"@storybook/theming": "7.6.15",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "14.3.0",
+		"@testing-library/react-native": "12.4.3",
+		"@testing-library/user-event": "14.4.3",
+		"@types/eslint": "8.56.9",
+		"@types/estree": "1.0.5",
 		"@types/istanbul-lib-report": "3.0.0",
-		"@types/lodash": "4.14.172",
 		"@types/mime": "2.0.3",
 		"@types/npm-package-arg": "6.1.1",
 		"@types/prettier": "2.4.4",
 		"@types/qs": "6.9.7",
+		"@types/react": "18.3.1",
 		"@types/react-dates": "21.8.3",
+		"@types/react-dom": "18.3.0",
 		"@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",
-		"@wordpress/babel-preset-default": "file:packages/babel-preset-default",
-		"@wordpress/base-styles": "file:packages/base-styles",
-		"@wordpress/browserslist-config": "file:packages/browserslist-config",
-		"@wordpress/create-block": "file:packages/create-block",
-		"@wordpress/create-block-tutorial-template": "file:packages/create-block-tutorial-template",
-		"@wordpress/dependency-extraction-webpack-plugin": "file:packages/dependency-extraction-webpack-plugin",
-		"@wordpress/docgen": "file:packages/docgen",
-		"@wordpress/e2e-test-utils": "file:packages/e2e-test-utils",
-		"@wordpress/e2e-test-utils-playwright": "file:packages/e2e-test-utils-playwright",
-		"@wordpress/e2e-tests": "file:packages/e2e-tests",
-		"@wordpress/env": "file:packages/env",
-		"@wordpress/eslint-plugin": "file:packages/eslint-plugin",
-		"@wordpress/jest-console": "file:packages/jest-console",
-		"@wordpress/jest-preset-default": "file:packages/jest-preset-default",
-		"@wordpress/jest-puppeteer-axe": "file:packages/jest-puppeteer-axe",
-		"@wordpress/lazy-import": "file:packages/lazy-import",
-		"@wordpress/npm-package-json-lint-config": "file:packages/npm-package-json-lint-config",
-		"@wordpress/postcss-plugins-preset": "file:packages/postcss-plugins-preset",
-		"@wordpress/postcss-themes": "file:packages/postcss-themes",
-		"@wordpress/prettier-config": "file:packages/prettier-config",
-		"@wordpress/project-management-automation": "file:packages/project-management-automation",
-		"@wordpress/readable-js-assets-webpack-plugin": "file:packages/readable-js-assets-webpack-plugin",
-		"@wordpress/report-flaky-tests": "file:packages/report-flaky-tests",
-		"@wordpress/scripts": "file:packages/scripts",
-		"@wordpress/stylelint-config": "file:packages/stylelint-config",
 		"ajv": "8.7.1",
-		"ajv-draft-04": "1.0.0",
-		"appium": "1.22.3",
-		"babel-jest": "27.4.5",
-		"babel-loader": "8.2.3",
+		"appium": "2.0.0",
+		"babel-jest": "29.7.0",
+		"babel-loader": "9.2.1",
 		"babel-plugin-inline-json-import": "0.3.2",
 		"babel-plugin-react-native-classname-to-style": "1.2.2",
 		"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
 		"babel-plugin-transform-remove-console": "6.9.4",
 		"benchmark": "2.1.4",
-		"browserslist": "4.17.6",
+		"browserslist": "4.24.0",
+		"caniuse-lite": "1.0.30001667",
 		"chalk": "4.1.1",
 		"change-case": "4.1.2",
+		"client-zip": "^2.4.5",
 		"commander": "9.2.0",
 		"concurrently": "3.5.0",
 		"copy-webpack-plugin": "10.2.0",
-		"core-js-builder": "3.19.1",
+		"core-js-builder": "3.38.1",
 		"cross-env": "3.2.4",
 		"css-loader": "6.2.0",
-		"cssnano": "5.0.7",
+		"cssnano": "6.0.1",
 		"deep-freeze": "0.0.1",
 		"equivalent-key-map": "0.2.2",
+		"esbuild": "0.18.20",
 		"escape-html": "1.0.3",
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.25.2",
-		"eslint-plugin-jest-dom": "4.0.2",
-		"eslint-plugin-playwright": "0.8.0",
+		"eslint-plugin-jest": "27.4.3",
+		"eslint-plugin-jest-dom": "5.0.2",
+		"eslint-plugin-prettier": "5.0.0",
+		"eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
 		"eslint-plugin-ssr-friendly": "1.0.6",
-		"eslint-plugin-testing-library": "5.7.2",
+		"eslint-plugin-storybook": "0.6.13",
+		"eslint-plugin-testing-library": "6.0.2",
 		"execa": "4.0.2",
 		"fast-glob": "3.2.7",
 		"filenamify": "4.2.0",
 		"glob": "7.1.2",
 		"husky": "7.0.0",
 		"inquirer": "7.1.0",
-		"jest": "27.4.5",
+		"jest": "29.6.2",
+		"jest-environment-jsdom": "^29.6.2",
+		"jest-jasmine2": "29.6.2",
 		"jest-junit": "13.0.0",
-		"jest-message-util": "27.4.2",
-		"jest-watch-typeahead": "1.0.0",
-		"jsdom": "16.7.0",
-		"lerna": "5.5.2",
-		"lint-staged": "10.0.1",
-		"lodash": "4.17.21",
+		"jest-message-util": "29.6.2",
+		"jest-watch-typeahead": "2.2.2",
+		"json2md": "2.0.1",
+		"lerna": "7.1.4",
+		"lint-staged": "10.0.2",
 		"make-dir": "3.0.0",
-		"metro-react-native-babel-preset": "0.66.2",
-		"metro-react-native-babel-transformer": "0.66.2",
-		"mkdirp": "0.5.1",
+		"mkdirp": "3.0.1",
+		"mock-match-media": "0.4.2",
+		"moment-timezone-data-webpack-plugin": "1.5.1",
 		"nock": "12.0.3",
-		"node-fetch": "2.6.1",
+		"node-fetch": "2.7.0",
 		"node-watch": "0.7.0",
 		"npm-run-all": "4.1.5",
-		"patch-package": "6.2.2",
-		"postcss": "8.4.16",
+		"patch-package": "8.0.0",
+		"postcss": "8.4.38",
 		"postcss-loader": "6.2.1",
-		"prettier": "npm:wp-prettier@2.6.2",
+		"postcss-local-keyframes": "^0.0.2",
+		"prettier": "npm:wp-prettier@3.0.3",
 		"progress": "2.0.3",
-		"react": "17.0.2",
-		"react-dom": "17.0.2",
-		"react-native": "0.66.2",
+		"puppeteer-core": "23.1.0",
+		"raw-loader": "4.0.2",
+		"react": "18.3.1",
+		"react-docgen-typescript": "2.2.2",
+		"react-dom": "18.3.1",
+		"react-native": "0.73.3",
 		"react-native-url-polyfill": "1.1.2",
-		"react-refresh": "0.10.0",
-		"react-test-renderer": "17.0.2",
-		"redux": "4.1.2",
+		"react-refresh": "0.14.0",
+		"react-scanner": "1.2.0",
+		"react-test-renderer": "18.3.1",
+		"reassure": "0.7.1",
+		"redux": "5.0.1",
 		"resize-observer-polyfill": "1.5.1",
 		"rimraf": "3.0.2",
 		"rtlcss": "4.0.0",
-		"sass": "1.35.2",
-		"sass-loader": "12.1.0",
-		"semver": "7.3.5",
-		"simple-git": "3.5.0",
-		"snapshot-diff": "0.8.1",
+		"sass": "1.50.1",
+		"sass-loader": "16.0.3",
+		"semver": "7.5.4",
+		"simple-git": "3.24.0",
+		"snapshot-diff": "0.10.0",
 		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
-		"storybook-source-link": "2.0.3",
+		"storybook": "7.6.15",
+		"storybook-source-link": "2.0.9",
+		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",
-		"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",
-		"webpack-bundle-analyzer": "4.4.2",
+		"terser": "5.32.0",
+		"terser-webpack-plugin": "5.3.10",
+		"typescript": "5.7.2",
+		"uuid": "9.0.1",
+		"webdriverio": "8.16.20",
+		"webpack": "5.97.0",
+		"webpack-bundle-analyzer": "4.9.1",
 		"worker-farm": "1.7.0"
 	},
+	"overrides": {
+		"jsdom": "25.0.1"
+	},
 	"scripts": {
 		"build": "npm run build:packages && wp-scripts build",
 		"build:analyze-bundles": "npm run build -- --webpack-bundle-analyzer",
-		"build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build",
-		"prebuild:packages": "npm run clean:packages && lerna run build",
-		"build:packages": "npm run build:package-types && node ./bin/packages/build.js",
+		"build:package-types": "node ./bin/packages/validate-typescript-version.js && ( tsc --build || ( echo 'tsc failed. Try cleaning up first: `npm run clean:package-types`'; exit 1 ) ) && node ./bin/packages/check-build-type-declaration-files.js",
+		"prebuild:packages": "npm run clean:packages && npm run --if-present --workspaces build",
+		"build:packages": "npm run --silent build:package-types && node ./bin/packages/build.js",
+		"postbuild:packages": " npm run --if-present --workspaces build:wp",
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
-		"clean:package-types": "tsc --build --clean",
-		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
-		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
-		"dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
-		"distclean": "rimraf node_modules packages/*/node_modules",
+		"clean:package-types": "tsc --build --clean && rimraf \"./packages/*/build-types\"",
+		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-wp|build-style)\"",
+		"component-usage-stats": "node ./node_modules/react-scanner/bin/react-scanner -c ./react-scanner.config.js",
+		"dev": "cross-env NODE_ENV=development npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
+		"dev:packages": "cross-env NODE_ENV=development concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
+		"distclean": "git clean --force -d -X",
 		"docs:api-ref": "node ./bin/api-docs/update-api-docs.js",
 		"docs:blocks": "node ./bin/api-docs/gen-block-lib-list.js",
-		"docs:build": "npm-run-all docs:gen docs:blocks docs:api-ref docs:theme-ref",
+		"docs:build": "npm-run-all docs:components docs:gen docs:blocks docs:api-ref docs:theme-ref",
+		"docs:components": "node ./bin/api-docs/gen-components-docs/index.mjs",
 		"docs:gen": "node ./docs/tool/index.js",
-		"docs:theme-ref": "node ./bin/api-docs/gen-theme-reference.js",
+		"docs:theme-ref": "node ./bin/api-docs/gen-theme-reference.mjs",
 		"env": "wp-env",
 		"fixtures:clean": "rimraf \"test/integration/fixtures/blocks/*.+(json|serialized.html)\"",
 		"fixtures:generate": "cross-env GENERATE_MISSING_FIXTURES=y npm run test:unit test/integration/full-content/ && npm run format test/integration/fixtures/blocks/*.json",
 		"fixtures:regenerate": "npm-run-all fixtures:clean fixtures:generate",
 		"format": "wp-scripts format",
-		"format:php": "wp-env run composer run-script format",
-		"lint": "concurrently \"npm run lint:lockfile\" \"npm run lint:js\" \"npm run lint:pkg-json\" \"npm run lint:css\"",
+		"preformat:php": "npm run other:update-packages:php",
+		"format:php": "wp-env run --env-cwd='wp-content/plugins/gutenberg' cli composer run-script format",
+		"lint": "concurrently \"npm run lint:lockfile\" \"npm run lint:tsconfig\" \"npm run lint:js\" \"npm run lint:pkg-json\" \"npm run lint:css\"",
 		"lint:css": "wp-scripts lint-style \"**/*.scss\"",
 		"lint:css:fix": "npm run lint:css -- --fix",
 		"lint:js": "wp-scripts lint-js",
 		"lint:js:fix": "npm run lint:js -- --fix",
 		"lint:lockfile": "node ./bin/validate-package-lock.js",
+		"lint:tsconfig": "node ./bin/validate-tsconfig.mjs",
 		"lint:md:docs": "wp-scripts lint-md-docs",
-		"prelint:php": "wp-env run composer \"install --no-interaction\"",
-		"lint:php": "wp-env run composer run-script lint",
+		"prelint:php": "npm run other:update-packages:php",
+		"lint:php": "wp-env run --env-cwd='wp-content/plugins/gutenberg' cli composer run-script lint",
 		"lint:pkg-json": "wp-scripts lint-pkg-json . 'packages/*/package.json'",
 		"native": "npm run --prefix packages/react-native-editor",
 		"other:changelog": "node ./bin/plugin/cli.js changelog",
-		"other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+		"other:check-licenses": "concurrently \"node ./bin/check-licenses.mjs\" \"wp-scripts check-licenses --dev\"",
 		"preother:check-local-changes": "npm run docs:build",
 		"other:check-local-changes": "node ./bin/check-local-changes.js",
 		"other:cherry-pick": "node ./bin/cherry-pick.mjs",
+		"other:generate-php-sync-issue": "node ./bin/generate-php-sync-issue.mjs",
+		"other:update-packages:php": "wp-env run --env-cwd='wp-content/plugins/gutenberg' cli composer update --no-interaction",
 		"postinstall": "patch-package && node ./patches/patch-xcode.js",
 		"prepare": "husky install",
 		"prepublishOnly": "npm run clean:package-types && npm run build:packages",
-		"publish:check": "lerna updated",
-		"publish:latest": "lerna publish --no-private",
-		"publish:patch": "lerna publish patch --no-private --dist-tag patch",
 		"start": "npm run dev",
 		"prestorybook:build": "npm run build:packages",
-		"storybook:build": "build-storybook -c ./storybook -o ./storybook/build",
+		"storybook:build": "storybook build -c ./storybook -o ./storybook/build",
 		"prestorybook:dev": "npm run build:packages",
-		"storybook:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c ./storybook -p 50240\"",
-		"storybook:e2e:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c test/storybook-playwright/storybook -p 50241\"",
+		"storybook:dev": "concurrently \"npm run dev:packages\" \"storybook dev -c ./storybook -p 50240\"",
+		"storybook:e2e:dev": "concurrently \"npm run dev:packages\" \"storybook dev -c test/storybook-playwright/storybook -p 50241\"",
 		"test": "npm-run-all lint test:unit",
 		"test:create-block": "bash ./bin/test-create-block.sh",
-		"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
-		"test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
-		"test:e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
+		"test:e2e": "wp-scripts test-playwright --config test/e2e/playwright.config.ts",
+		"test:e2e:debug": "wp-scripts test-playwright --config test/e2e/playwright.config.ts --ui",
+		"test:e2e:playwright": "npm run test:e2e",
+		"test:e2e:playwright:debug": "npm run test:e2e:debug",
 		"test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts",
 		"test:e2e:watch": "npm run test:e2e -- --watch",
-		"test:performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
+		"test:native": "cross-env NODE_ENV=test jest --config test/native/jest.config.js",
+		"test:native:watch": "npm run test:native -- --watch",
+		"test:native:clean": "jest --clearCache --config test/native/jest.config.js; rm -rf $TMPDIR/jest_*",
+		"test:native:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/.bin/jest --runInBand --verbose --config test/native/jest.config.js",
+		"test:native:perf": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\"' reassure",
+		"test:native:perf:baseline": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\"' reassure --baseline",
+		"test:native:update": "npm run test:native -- --updateSnapshot",
+		"test:performance": "wp-scripts test-playwright --config test/performance/playwright.config.ts",
+		"test:performance:debug": "wp-scripts test-playwright --config test/performance/playwright.config.ts --debug",
 		"test:php": "npm-run-all lint:php test:unit:php",
-		"test:php:watch": "wp-env run composer run-script test:watch",
+		"test:php:watch": "wp-env run --env-cwd='wp-content/plugins/gutenberg' tests-cli composer run-script test:watch",
 		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
 		"test:unit:date": "bash ./bin/unit-test-date.sh",
 		"test:unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
-		"pretest:unit:php": "wp-env start",
-		"test:unit:php": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist --verbose",
-		"pretest:unit:php:multisite": "wp-env start",
-		"test:unit:php:multisite": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit/multisite.xml --verbose",
+		"test:unit:profile": "wp-scripts --cpu-prof test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
+		"test:unit:php:setup": "wp-env start",
+		"test:unit:php:setup:debug": "wp-env start --xdebug",
+		"test:unit:php:base": "wp-env run --env-cwd='wp-content/plugins/gutenberg' tests-wordpress vendor/bin/phpunit -c phpunit.xml.dist --verbose",
+		"test:unit:php": "npm-run-all test:unit:php:setup test:unit:php:base",
+		"test:unit:php:debug": "npm-run-all test:unit:php:setup:debug test:unit:php:base",
+		"test:unit:php:multisite:base": "wp-env run --env-cwd='wp-content/plugins/gutenberg' tests-wordpress vendor/bin/phpunit -c phpunit/multisite.xml --verbose",
+		"test:unit:php:multisite": "npm-run-all test:unit:php:setup test:unit:php:multisite:base",
+		"test:unit:php:multisite:debug": "npm-run-all test:unit:php:setup:debug test:unit:php:multisite:base",
 		"test:unit:update": "npm run test:unit -- --updateSnapshot",
 		"test:unit:watch": "npm run test:unit -- --watch",
 		"wp-env": "wp-env"
@@ -328,8 +273,7 @@
 			"wp-scripts lint-style"
 		],
 		"package-lock.json": [
-			"npm run lint:lockfile",
-			"node ./bin/check-latest-npm.js"
+			"npm run lint:lockfile"
 		],
 		"packages/*/package.json": [
 			"wp-scripts lint-pkg-json"
@@ -343,19 +287,12 @@
 			"npm run docs:theme-ref",
 			"node ./bin/api-docs/are-api-docs-unstaged.js",
 			"node ./bin/packages/lint-staged-typecheck.js"
+		],
+		"**/tsconfig.json": [
+			"npm run lint:tsconfig"
 		]
 	},
-	"wp-env": {
-		"plugin-dir": "gutenberg",
-		"plugin-name": "Gutenberg",
-		"docker-template": "./bin/docker-compose.override.yml.template",
-		"welcome-logo": [
-			",⁻⁻⁻·       .                 |",
-			"|  ،⁓’.   . |---  ,---. ,---. |---. ,---. ,---. ,---.",
-			"|   | |   | |     |---' |   | |   | |---' |     |   |",
-			"`---' `---' `---’ `---’ '   ` `---' `---’ `     `---|",
-			"                                                `---'"
-		],
-		"welcome-build-command": "npm run dev"
-	}
+	"workspaces": [
+		"packages/*"
+	]
 }
diff --git a/packages/README.md b/packages/README.md
index 5c05ad516b269e..f73aca35786f5a 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -1,13 +1,14 @@
 # Managing Packages
 
-This repository uses [monorepo] to manage WordPress modules and publish them with [lerna] as packages to [npm].
+This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces) to manage WordPress packages and [lerna](https://lerna.js.org/) to publish them with to [npm](https://www.npmjs.com/).
 
 ## Creating a New Package
 
-When creating a new package, you need to provide at least the following:
+When creating a new package, you need to provide at least the following. Packages bundled in Gutenberg or WordPress must include a `wpScript` and or `wpScriptModuleExports` field in their `package.json` file. See the details below.
 
 1. `package.json` based on the template:
-    ```json
+
+    ```jsonc
     {
     	"name": "@wordpress/package-name",
     	"version": "1.0.0-prerelease",
@@ -28,19 +29,44 @@ When creating a new package, you need to provide at least the following:
     	"module": "build-module/index.js",
     	"react-native": "src/index",
     	"dependencies": {
-    		"@babel/runtime": "^7.16.0"
+    		"@babel/runtime": "7.25.7"
     	},
     	"publishConfig": {
     		"access": "public"
-    	}
+    	},
+    	// Include this line to include the package as a WordPress script.
+    	"wpScript": true,
+    	// Include this line to include the package as a WordPress script module.
+    	"wpScriptModuleExports": "./build-module/index.js"
     }
     ```
+
     This assumes that your code is located in the `src` folder and will be transpiled with `Babel`.
-2. `.npmrc` file which disables creating `package-lock.json` file for the package:
-    ```
-    package-lock=false
+
+    For production packages that will ship as a WordPress script, include `wpScript: true` in the `package.json` file. This tells the build system to bundle the package for use as a WordPress script.
+
+    For production packages that will ship as a WordPress script module, include a `wpScriptModuleExports` field in the `package.json` file. The value of this field can be a string to expose a single script module, or an object with a [shape like the standard `exports` object](https://nodejs.org/docs/latest-v20.x/api/packages.html#subpath-exports) to expose multiple script modules from a single package:
+
+    ```jsonc
+    {
+    	"name": "@wordpress/example",
+
+    	// The string form exposes the `@wordpress/example` script module.
+    	"wpScriptModuleExports": "./build-module/index.js",
+
+    	// Multiple sub-modules can be exposed by providing an object:
+    	"wpScriptModuleExports": {
+    		// Exposed as `@wordpress/example` script module.
+    		".": "./build-module/index.js",
+    		// Exposed as `@wordpress/example/demo-block/view` script module.
+    		"./demo-block/view": "./build-module/index.js"
+    	}
+    }
     ```
-3. `README.md` file containing at least:
+
+    Both `wpScript` and `wpScriptModuleExports` may be included if the package exposes both a script and a script module. These fields are also essential when performing a license check for all their dependencies, because they trigger strict validation against compatibility with GPL v2. All remaining dependencies WordPress doesn't distribute but uses for development purposes can contain also a few other OSS compatible licenses.
+
+1. `README.md` file containing at least:
     - Package name
     - Package description
     - Installation details
@@ -48,7 +74,7 @@ When creating a new package, you need to provide at least the following:
     - API documentation, if applicable ([more info](#maintaining-api-documentation))
     - A link to the contributing guidelines ([here's an example](https://github.com/WordPress/gutenberg/tree/HEAD/packages/a11y/README.md#contributing-to-this-package) from the a11y package)
     - `Code is Poetry` logo (`<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>`)
-4. `CHANGELOG.md` file containing at least:
+1. `CHANGELOG.md` file containing at least:
 
     ```
     <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
@@ -58,7 +84,7 @@ When creating a new package, you need to provide at least the following:
     Initial release.
     ```
 
-To ensure your package is recognised, you should also _manually_ add your new package to the root `package.json` file and then run `npm install` to update the dependencies.
+To ensure your package is recognized, you should also _manually_ add your new package to the root `package.json` file and then run `npm install` to update the dependencies.
 
 ## Managing Dependencies
 
@@ -70,41 +96,38 @@ Production dependencies are stored in the `dependencies` section of the package
 
 #### Adding New Dependencies
 
-The simplest way to add a production dependency to one of the packages is to run a very convenient [lerna add](https://github.com/lerna/lerna/tree/HEAD/commands/add#readme) command from the root of the project.
+The simplest way to add a production dependency to one of the packages is to run a command like the following from the root of the project.
 
 _Example:_
 
 ```bash
-lerna add lodash packages/a11y
+npm install change-case -w packages/a11y
 ```
 
-This command adds the latest version of `lodash` as a dependency to the `@wordpress/a11y` package, which is located in `packages/a11y` folder.
+This command adds the `change-case` as a dependency to the `@wordpress/a11y` package, which is located in `packages/a11y` folder. If there was the same dependency installed then the version specified in the `package-lock.json` file is going to be reused. If you want to enforce a different version, you can do so by adding the `@` suffix to the package name.
+
+_Example:_
+
+```bash
+npm install change-case@latest -w packages/a11y
+```
 
 #### Removing Existing Dependencies
 
-Removing a dependency from one of the WordPress packages requires some manual work. You need to remove the line in the corresponding `dependencies` section of the `package.json` file.
+Removing a dependency from one of the WordPress packages is similar to installation. You need to run a command like the following from the root of the project.
 
 _Example:_
 
-```diff
-+++ b/packages/scripts/package.json
-@@ -43,7 +43,6 @@
-                "check-node-version": "^4.1.0",
-                "cross-spawn": "^5.1.0",
-                "eslint": "^7.1.0",
--               "jest": "^27.4.4",
-                "minimist": "^1.2.0",
-                "npm-package-json-lint": "^3.6.0",
+```bash
+npm uninstall change-case -w packages/a11y
 ```
 
-Next, you need to run `npm install` in the root of the project to ensure that `package-lock.json` file gets properly regenerated.
-
 #### Updating Existing Dependencies
 
 This is the most confusing part of working with [monorepo] which causes a lot of hassles for contributors. The most successful strategy so far is to do the following:
 
 1.  First, remove the existing dependency as described in the previous section.
-2.  Next, add the same dependency back as described in the first section of this chapter. This time it wil get the latest version applied unless you enforce a different version explicitly.
+2.  Next, add the same dependency back as described in the first section of this chapter. This time it will get the latest version applied unless you enforce a different version explicitly.
 
 ### Development Dependencies
 
@@ -152,9 +175,9 @@ It's very important to have a good plan for what a new package will include. All
 
 ## Maintaining Changelogs
 
-In maintaining dozens of npm packages, it can be tough to keep track of changes. To simplify the release process, each package includes a `CHANGELOG.md` file which details all published releases and the unreleased ("Unreleased") changes, if any exist.
+When maintaining dozens of npm packages, it can be tough to keep track of changes. To simplify the release process, each package includes a `CHANGELOG.md` file which details all published releases and the unreleased ("Unreleased") changes, if any exist.
 
-For each pull request, you should always include relevant changes in a "Unreleased" heading at the top of the file. You should add the heading if it doesn't already exist.
+For each pull request, you should always include relevant changes under an "Unreleased" heading at the top of the file. You should add the heading if it doesn't already exist.
 
 _Example:_
 
@@ -170,17 +193,18 @@ _Example:_
 
 There are a number of common release subsections you can follow. Each is intended to align to a specific meaning in the context of the [Semantic Versioning (`semver`) specification](https://semver.org/) the project adheres to. It is important that you describe your changes accurately, since this is used in the packages release process to help determine the version of the next release.
 
--   "Breaking Change" - A backwards-incompatible change which requires specific attention of the impacted developers to reconcile (requires a major version bump).
--   "New Feature" - The addition of a new backwards-compatible function or feature to the existing public API (requires a minor version bump).
--   "Enhancement" - Backwards-compatible improvements to existing functionality (requires a minor version bump).
--   "Bug Fix" - Resolutions to existing buggy behavior (requires a patch version bump).
+-   "Breaking Changes" - A backwards-incompatible change which requires specific attention of the impacted developers to reconcile (requires a major version bump).
+-   "New Features" - The addition of a new backwards-compatible function or feature to the existing public API (requires a minor version bump).
+-   "Enhancements" - Backwards-compatible improvements to existing functionality (requires a minor version bump).
+-   "Deprecations" - Deprecation notices. These do not impact the public interface or behavior of the module (requires a minor version bump).
+-   "Bug Fixes" - Resolutions to existing buggy behavior (requires a patch version bump).
 -   "Internal" - Changes which do not have an impact on the public interface or behavior of the module (requires a patch version bump).
 
 While other section naming can be used when appropriate, it's important that are expressed clearly to avoid confusion for both the packages releaser and third-party consumers.
 
 When in doubt, refer to [Semantic Versioning specification](https://semver.org/).
 
-If you are publishing new versions of packages, note that there are versioning recommendations outlined in the [Gutenberg Release Process document](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/release.md) which prescribe _minimum_ version bumps for specific types of releases. The chosen version should be the greater of the two between the semantic versioning and Gutenberg release minimum version bumps.
+If you are publishing new versions of packages, note that there are versioning recommendations outlined in the [Gutenberg Release Process document](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/release.md) which prescribe _minimum_ version bumps for specific types of releases. The chosen version should be the greater of the two between the semantic versioning and Gutenberg release minimum version bumps.
 
 ## TypeScript
 
@@ -199,7 +223,7 @@ Gutenberg uses TypeScript by running the TypeScript compiler (`tsc`) on select p
 These packages benefit from type checking and produced type declarations in the published packages.
 
 To opt-in to TypeScript tooling, packages should include a `tsconfig.json` file in the package root and add an entry to the root `tsconfig.json` references.
-The changes will indicate that the package has opted-in and will be included in the TypeScript build process.
+The changes will indicate that the package has opted in and will be included in the TypeScript build process.
 
 A `tsconfig.json` file should look like the following (comments are not necessary):
 
@@ -238,10 +262,6 @@ For consumers to use the published type declarations, we'll set the `types` fiel
 
 Ensure that the `build-types` directory will be included in the published package, for example if a `files` field is declared.
 
-[lerna]: https://lerna.js.org/
-[monorepo]: https://monorepo.tools
-[npm]: https://www.npmjs.com/
-
 ## Optimizing for bundlers
 
 In order for bundlers to tree-shake packages effectively, they often need to know whether a package includes side effects in its code. This is done through the `sideEffects` field in the package's `package.json`.
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 685c510e2e0ede..57b52651acc787 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,22 +161,22 @@
 
 ## 2.9.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.1.0 (2018-07-12)
 
-### New feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
-### Polish
+### Internal
 
 -   Moved `@WordPress/packages` repository to `@WordPress/gutenberg` ([#7805](https://github.com/WordPress/gutenberg/pull/7805))
diff --git a/packages/a11y/README.md b/packages/a11y/README.md
index 14c497c1abb537..755396d2bb8f09 100644
--- a/packages/a11y/README.md
+++ b/packages/a11y/README.md
@@ -22,8 +22,7 @@ Create the live regions.
 
 ### speak
 
-Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
-This module is inspired by the `speak` function in `wp-a11y.js`.
+Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions. This module is inspired by the `speak` function in `wp-a11y.js`.
 
 _Usage_
 
@@ -40,7 +39,7 @@ speak( 'The message you want to send to the ARIA live region', 'assertive' );
 _Parameters_
 
 -   _message_ `string`: The message to be announced by assistive technologies.
--   _ariaLive_ `[string]`: The politeness level for aria-live; default: 'polite'.
+-   _ariaLive_ `['polite'|'assertive']`: The politeness level for aria-live; default: 'polite'.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
@@ -68,7 +67,7 @@ For context I’ll quote [this article on WordPress.org](https://make.wordpress.
 
 ## Browser support
 
-See <https://make.wordpress.org/design/handbook/design-guide/browser-support/>
+See <https://make.wordpress.org/core/handbook/best-practices/browser-support/>
 
 ## Contributing to this package
 
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 0625090948b071..5eefe05954c797 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,16 +21,19 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"wpScriptModuleExports": "./build-module/module/index.js",
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/dom-ready": "file:../dom-ready",
-		"@wordpress/i18n": "file:../i18n"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/dom-ready": "*",
+		"@wordpress/i18n": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index 957c76500c4344..cdc3be10545155 100644
--- a/packages/a11y/src/index.js
+++ b/packages/a11y/src/index.js
@@ -6,10 +6,10 @@ import domReady from '@wordpress/dom-ready';
 /**
  * Internal dependencies
  */
-import addIntroText from './add-intro-text';
-import addContainer from './add-container';
-import clear from './clear';
-import filterMessage from './filter-message';
+import addContainer from './script/add-container';
+import addIntroText from './script/add-intro-text';
+
+export { speak } from './shared/index';
 
 /**
  * Create the live regions.
@@ -38,51 +38,3 @@ export function setup() {
  * Run setup on domReady.
  */
 domReady( setup );
-
-/**
- * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
- * This module is inspired by the `speak` function in `wp-a11y.js`.
- *
- * @param {string} message    The message to be announced by assistive technologies.
- * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
- *
- * @example
- * ```js
- * import { speak } from '@wordpress/a11y';
- *
- * // For polite messages that shouldn't interrupt what screen readers are currently announcing.
- * speak( 'The message you want to send to the ARIA live region' );
- *
- * // For assertive messages that should interrupt what screen readers are currently announcing.
- * speak( 'The message you want to send to the ARIA live region', 'assertive' );
- * ```
- */
-export function speak( message, ariaLive ) {
-	/*
-	 * Clear previous messages to allow repeated strings being read out and hide
-	 * the explanatory text from assistive technologies.
-	 */
-	clear();
-
-	message = filterMessage( message );
-
-	const introText = document.getElementById( 'a11y-speak-intro-text' );
-	const containerAssertive = document.getElementById(
-		'a11y-speak-assertive'
-	);
-	const containerPolite = document.getElementById( 'a11y-speak-polite' );
-
-	if ( containerAssertive && ariaLive === 'assertive' ) {
-		containerAssertive.textContent = message;
-	} else if ( containerPolite ) {
-		containerPolite.textContent = message;
-	}
-
-	/*
-	 * Make the explanatory text available to assistive technologies by removing
-	 * the 'hidden' HTML attribute.
-	 */
-	if ( introText ) {
-		introText.removeAttribute( 'hidden' );
-	}
-}
diff --git a/packages/a11y/src/index.native.js b/packages/a11y/src/index.native.js
index f6f53b6343adb0..e17597a8b2747d 100644
--- a/packages/a11y/src/index.native.js
+++ b/packages/a11y/src/index.native.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import filterMessage from './filter-message';
+import filterMessage from './shared/filter-message';
 
 /**
  * Update the ARIA live notification area text node.
diff --git a/packages/a11y/src/module/index.ts b/packages/a11y/src/module/index.ts
new file mode 100644
index 00000000000000..a06882f068dd3a
--- /dev/null
+++ b/packages/a11y/src/module/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+export { speak } from '../shared/index';
+
+/**
+ * This no-op function is exported to provide compatibility with the `wp-a11y` Script.
+ *
+ * Filters should inject the relevant HTML on page load instead of requiring setup.
+ */
+export const setup = () => {};
diff --git a/packages/a11y/src/add-container.js b/packages/a11y/src/script/add-container.js
similarity index 100%
rename from packages/a11y/src/add-container.js
rename to packages/a11y/src/script/add-container.js
diff --git a/packages/a11y/src/add-intro-text.js b/packages/a11y/src/script/add-intro-text.ts
similarity index 100%
rename from packages/a11y/src/add-intro-text.js
rename to packages/a11y/src/script/add-intro-text.ts
diff --git a/packages/a11y/src/test/add-container.test.js b/packages/a11y/src/script/test/add-container.test.js
similarity index 100%
rename from packages/a11y/src/test/add-container.test.js
rename to packages/a11y/src/script/test/add-container.test.js
diff --git a/packages/a11y/src/clear.js b/packages/a11y/src/shared/clear.js
similarity index 100%
rename from packages/a11y/src/clear.js
rename to packages/a11y/src/shared/clear.js
diff --git a/packages/a11y/src/filter-message.js b/packages/a11y/src/shared/filter-message.js
similarity index 100%
rename from packages/a11y/src/filter-message.js
rename to packages/a11y/src/shared/filter-message.js
diff --git a/packages/a11y/src/shared/index.js b/packages/a11y/src/shared/index.js
new file mode 100644
index 00000000000000..2b6353720d0add
--- /dev/null
+++ b/packages/a11y/src/shared/index.js
@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import clear from './clear';
+import filterMessage from './filter-message';
+
+/**
+ * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
+ * This module is inspired by the `speak` function in `wp-a11y.js`.
+ *
+ * @param {string}               message    The message to be announced by assistive technologies.
+ * @param {'polite'|'assertive'} [ariaLive] The politeness level for aria-live; default: 'polite'.
+ *
+ * @example
+ * ```js
+ * import { speak } from '@wordpress/a11y';
+ *
+ * // For polite messages that shouldn't interrupt what screen readers are currently announcing.
+ * speak( 'The message you want to send to the ARIA live region' );
+ *
+ * // For assertive messages that should interrupt what screen readers are currently announcing.
+ * speak( 'The message you want to send to the ARIA live region', 'assertive' );
+ * ```
+ */
+export function speak( message, ariaLive ) {
+	/*
+	 * Clear previous messages to allow repeated strings being read out and hide
+	 * the explanatory text from assistive technologies.
+	 */
+	clear();
+
+	message = filterMessage( message );
+
+	const introText = document.getElementById( 'a11y-speak-intro-text' );
+	const containerAssertive = document.getElementById(
+		'a11y-speak-assertive'
+	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
+
+	if ( containerAssertive && ariaLive === 'assertive' ) {
+		containerAssertive.textContent = message;
+	} else if ( containerPolite ) {
+		containerPolite.textContent = message;
+	}
+
+	/*
+	 * Make the explanatory text available to assistive technologies by removing
+	 * the 'hidden' HTML attribute.
+	 */
+	if ( introText ) {
+		introText.removeAttribute( 'hidden' );
+	}
+}
diff --git a/packages/a11y/src/test/clear.test.js b/packages/a11y/src/shared/test/clear.test.js
similarity index 100%
rename from packages/a11y/src/test/clear.test.js
rename to packages/a11y/src/shared/test/clear.test.js
diff --git a/packages/a11y/src/test/filter-message.test.js b/packages/a11y/src/shared/test/filter-message.test.js
similarity index 100%
rename from packages/a11y/src/test/filter-message.test.js
rename to packages/a11y/src/shared/test/filter-message.test.js
diff --git a/packages/a11y/src/test/index.test.js b/packages/a11y/src/test/index.test.js
index 4815baa2205047..0f6b9d0bd572ed 100644
--- a/packages/a11y/src/test/index.test.js
+++ b/packages/a11y/src/test/index.test.js
@@ -7,10 +7,10 @@ import domReady from '@wordpress/dom-ready';
  * Internal dependencies
  */
 import { setup, speak } from '../';
-import clear from '../clear';
-import filterMessage from '../filter-message';
+import clear from '../shared/clear';
+import filterMessage from '../shared/filter-message';
 
-jest.mock( '../clear', () => {
+jest.mock( '../shared/clear', () => {
 	return jest.fn();
 } );
 jest.mock( '@wordpress/dom-ready', () => {
@@ -18,7 +18,7 @@ jest.mock( '@wordpress/dom-ready', () => {
 		callback();
 	} );
 } );
-jest.mock( '../filter-message', () => {
+jest.mock( '../shared/filter-message', () => {
 	return jest.fn( ( message ) => {
 		return message;
 	} );
diff --git a/packages/a11y/tsconfig.json b/packages/a11y/tsconfig.json
index 1fbcb11147444b..093c2775f96d66 100644
--- a/packages/a11y/tsconfig.json
+++ b/packages/a11y/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/annotations/.npmrc b/packages/annotations/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/annotations/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index 2bc3e13d3b7631..64bf565f8dd52b 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
+## 2.57.0 (2024-05-02)
+
+## 2.56.0 (2024-04-19)
+
+## 2.55.0 (2024-04-03)
+
+## 2.54.0 (2024-03-21)
+
+## 2.53.0 (2024-03-06)
+
+## 2.52.0 (2024-02-21)
+
+## 2.51.0 (2024-02-09)
+
+## 2.50.0 (2024-01-24)
+
+## 2.49.0 (2024-01-10)
+
+## 2.48.0 (2023-12-13)
+
+## 2.47.0 (2023-11-29)
+
+## 2.46.0 (2023-11-16)
+
+## 2.45.0 (2023-11-02)
+
+## 2.44.0 (2023-10-18)
+
+## 2.43.0 (2023-10-05)
+
+## 2.42.0 (2023-09-20)
+
+## 2.41.0 (2023-08-31)
+
+## 2.40.0 (2023-08-16)
+
+## 2.39.0 (2023-08-10)
+
+## 2.38.0 (2023-07-20)
+
+## 2.37.0 (2023-07-05)
+
+## 2.36.0 (2023-06-23)
+
+## 2.35.0 (2023-06-07)
+
+## 2.34.0 (2023-05-24)
+
+## 2.33.0 (2023-05-10)
+
+## 2.32.0 (2023-04-26)
+
+## 2.31.0 (2023-04-12)
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -57,7 +161,7 @@
 
 ## 1.24.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the annotations namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index 5d7021f0104112..47d39c978fccd1 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "2.22.0",
+	"version": "3.13.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,22 +19,23 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/data": "file:../data",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/rich-text": "file:../rich-text",
-		"rememo": "^4.0.0",
-		"uuid": "^8.3.0"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/data": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/rich-text": "*",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/annotations/src/store/selectors.js b/packages/annotations/src/store/selectors.js
index 8ec24e0541e6fa..463c00439e77ef 100644
--- a/packages/annotations/src/store/selectors.js
+++ b/packages/annotations/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import createSelector from 'rememo';
+import { createSelector } from '@wordpress/data';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
diff --git a/packages/api-fetch/.npmrc b/packages/api-fetch/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/api-fetch/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index 503e3b366236fb..da4df186a8cd2f 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+## 7.8.0 (2024-09-19)
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.55.0 (2024-05-16)
+
+## 6.54.0 (2024-05-02)
+
+## 6.53.0 (2024-04-19)
+
+## 6.52.0 (2024-04-03)
+
+## 6.51.0 (2024-03-21)
+
+## 6.50.0 (2024-03-06)
+
+## 6.49.0 (2024-02-21)
+
+## 6.48.0 (2024-02-09)
+
+## 6.47.0 (2024-01-24)
+
+## 6.46.0 (2024-01-10)
+
+## 6.45.0 (2023-12-13)
+
+## 6.44.0 (2023-11-29)
+
+## 6.43.0 (2023-11-16)
+
+## 6.42.0 (2023-11-02)
+
+## 6.41.0 (2023-10-18)
+
+## 6.40.0 (2023-10-05)
+
+## 6.39.0 (2023-09-20)
+
+## 6.38.0 (2023-08-31)
+
+## 6.37.0 (2023-08-16)
+
+## 6.36.0 (2023-08-10)
+
+## 6.35.0 (2023-07-20)
+
+## 6.34.0 (2023-07-05)
+
+## 6.33.0 (2023-06-23)
+
+## 6.32.0 (2023-06-07)
+
+## 6.31.0 (2023-05-24)
+
+## 6.30.0 (2023-05-10)
+
+## 6.29.0 (2023-04-26)
+
+## 6.28.0 (2023-04-12)
+
+## 6.27.0 (2023-03-29)
+
+## 6.26.0 (2023-03-15)
+
+## 6.25.0 (2023-03-01)
+
+## 6.24.0 (2023-02-15)
+
+## 6.23.0 (2023-02-01)
+
+## 6.22.0 (2023-01-11)
+
+## 6.21.0 (2023-01-02)
+
+## 6.20.0 (2022-12-14)
+
 ## 6.19.0 (2022-11-16)
 
 ## 6.18.0 (2022-11-02)
@@ -42,9 +146,9 @@
 
 ## 6.0.0 (2022-01-27)
 
-### Breaking changes
+### Breaking Changes
 
-   `OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`.
+`OPTIONS` requests handled by the preloading middleware are now resolved as `window.Response` objects if you explicitly set `parse: false` (for consistency with how GET requests are resolved). They used to be resolved as `Plain Old JavaScript Objects`.
 
 ## 5.2.5 (2021-11-07)
 
@@ -54,7 +158,7 @@
 
 ## 5.2.0 (2021-07-21)
 
-### New feature
+### New Features
 
 -   `AbortError` being thrown by the default fetch handler can now be caught and handled separately in user-land. Add documentation about aborting a request ([#32530](https://github.com/WordPress/gutenberg/pull/32530)).
 
@@ -81,7 +185,7 @@
 
 ## 3.23.0 (2021-04-06)
 
-### New Feature
+### New Features
 
 -   Publish TypeScript definitions.
 
@@ -104,7 +208,7 @@
 
 -   A created nonce middleware will no longer automatically listen for `heartbeat.tick` actions. Assign to the new `nonce` middleware property instead.
 
-### New Feature
+### New Features
 
 -   The function returned by `createNonceMiddleware` includes an assignable `nonce` property corresponding to the active nonce to be used.
 -   Default fetch handler can be overridden with a custom fetch handler
@@ -123,18 +227,18 @@
 
 ## 2.2.0 (2018-10-29)
 
-### New Feature
+### New Features
 
 -   Always request data in the user's locale ([#10862](https://github.com/WordPress/gutenberg/pull/10862)).
 
 ## 2.1.0 (2018-10-22)
 
-### New Feature
+### New Features
 
 -   Support `per_page=-1` paginated requests.
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/api-fetch/README.md b/packages/api-fetch/README.md
index ae7b1a500aa4f8..8c17e4ce8bbad6 100644
--- a/packages/api-fetch/README.md
+++ b/packages/api-fetch/README.md
@@ -14,15 +14,29 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ## Usage
 
+### GET
 ```js
 import apiFetch from '@wordpress/api-fetch';
 
-// GET
 apiFetch( { path: '/wp/v2/posts' } ).then( ( posts ) => {
 	console.log( posts );
 } );
+```
+
+### GET with Query Args
+```js
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+const queryParams = { include: [1,2,3] }; // Return posts with ID = 1,2,3.
 
-// POST
+apiFetch( { path: addQueryArgs( '/wp/v2/posts', queryParams ) } ).then( ( posts ) => {
+	console.log( posts );
+} );
+```
+
+### POST
+```js
 apiFetch( {
 	path: '/wp/v2/posts/1',
 	method: 'POST',
@@ -52,7 +66,7 @@ Unlike `fetch`, the `Promise` return value of `apiFetch` will resolve to the par
 
 #### `data` (`object`)
 
-Shorthand to be used in place of `body`, accepts an object value to be stringified to JSON.
+Sent on `POST` or `PUT` requests only. Shorthand to be used in place of `body`, accepts an object value to be stringified to JSON.
 
 ### Aborting a request
 
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index e663522e4aa837..432eabf6ec5a12 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "6.19.0",
+	"version": "7.13.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,16 +20,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/url": "file:../url"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/i18n": "*",
+		"@wordpress/url": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/api-fetch/src/index.js b/packages/api-fetch/src/index.js
index a0cda678f8d3e7..408f2af0901f15 100644
--- a/packages/api-fetch/src/index.js
+++ b/packages/api-fetch/src/index.js
@@ -14,6 +14,7 @@ import namespaceEndpointMiddleware from './middlewares/namespace-endpoint';
 import httpV1Middleware from './middlewares/http-v1';
 import userLocaleMiddleware from './middlewares/user-locale';
 import mediaUploadMiddleware from './middlewares/media-upload';
+import createThemePreviewMiddleware from './middlewares/theme-preview';
 import {
 	parseResponseAndNormalizeError,
 	parseAndThrowError,
@@ -193,5 +194,6 @@ apiFetch.createPreloadingMiddleware = createPreloadingMiddleware;
 apiFetch.createRootURLMiddleware = createRootURLMiddleware;
 apiFetch.fetchAllMiddleware = fetchAllMiddleware;
 apiFetch.mediaUploadMiddleware = mediaUploadMiddleware;
+apiFetch.createThemePreviewMiddleware = createThemePreviewMiddleware;
 
 export default apiFetch;
diff --git a/packages/api-fetch/src/middlewares/media-upload.js b/packages/api-fetch/src/middlewares/media-upload.js
index 417abf775db636..ddd0be4e4ab436 100644
--- a/packages/api-fetch/src/middlewares/media-upload.js
+++ b/packages/api-fetch/src/middlewares/media-upload.js
@@ -63,6 +63,11 @@ const mediaUploadMiddleware = ( options, next ) => {
 
 	return next( { ...options, parse: false } )
 		.catch( ( response ) => {
+			// `response` could actually be an error thrown by `defaultFetchHandler`.
+			if ( ! response.headers ) {
+				return Promise.reject( response );
+			}
+
 			const attachmentId = response.headers.get(
 				'x-wp-upload-attachment-id'
 			);
diff --git a/packages/api-fetch/src/middlewares/theme-preview.js b/packages/api-fetch/src/middlewares/theme-preview.js
new file mode 100644
index 00000000000000..56098c88cb351f
--- /dev/null
+++ b/packages/api-fetch/src/middlewares/theme-preview.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs, getQueryArg, removeQueryArgs } from '@wordpress/url';
+
+/**
+ * This appends a `wp_theme_preview` parameter to the REST API request URL if
+ * the admin URL contains a `theme` GET parameter.
+ *
+ * If the REST API request URL has contained the `wp_theme_preview` parameter as `''`,
+ * then bypass this middleware.
+ *
+ * @param {Record<string, any>} themePath
+ * @return {import('../types').APIFetchMiddleware} Preloading middleware.
+ */
+const createThemePreviewMiddleware = ( themePath ) => ( options, next ) => {
+	if ( typeof options.url === 'string' ) {
+		const wpThemePreview = getQueryArg( options.url, 'wp_theme_preview' );
+		if ( wpThemePreview === undefined ) {
+			options.url = addQueryArgs( options.url, {
+				wp_theme_preview: themePath,
+			} );
+		} else if ( wpThemePreview === '' ) {
+			options.url = removeQueryArgs( options.url, 'wp_theme_preview' );
+		}
+	}
+
+	if ( typeof options.path === 'string' ) {
+		const wpThemePreview = getQueryArg( options.path, 'wp_theme_preview' );
+		if ( wpThemePreview === undefined ) {
+			options.path = addQueryArgs( options.path, {
+				wp_theme_preview: themePath,
+			} );
+		} else if ( wpThemePreview === '' ) {
+			options.path = removeQueryArgs( options.path, 'wp_theme_preview' );
+		}
+	}
+
+	return next( options );
+};
+
+export default createThemePreviewMiddleware;
diff --git a/packages/api-fetch/tsconfig.json b/packages/api-fetch/tsconfig.json
index 2dcfb6b4ff479e..f9d517286a102f 100644
--- a/packages/api-fetch/tsconfig.json
+++ b/packages/api-fetch/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/autop/.npmrc b/packages/autop/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/autop/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index 8477ffd959f00d..caec56341262a1 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+### Internal
+
+-   Refactor to TypeScript ([#62583](https://github.com/WordPress/gutenberg/pull/62583)).
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,31 +165,31 @@
 
 ## 2.7.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#20669](https://github.com/WordPress/gutenberg/pull/20669))
 
 ## 2.3.0 (2019-05-21)
 
-### Bug Fix
+### Bug Fixes
 
 -   `removep` will correctly preserve multi-line paragraph tags where attributes are present.
 
 ## 2.1.0 (2019-03-06)
 
-### Bug Fix
+### Bug Fixes
 
 -   `autop` correctly matches whitespace preceding and following block-level elements.
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.1.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -91,6 +199,6 @@
 
 ## 1.0.6 (2018-05-08)
 
-### Polish
+### Internal
 
 -   Documentation: Fix API method typo for `removep`. ([#120](https://github.com/WordPress/packages/pull/120))
diff --git a/packages/autop/README.md b/packages/autop/README.md
index 76a7515db69f3d..e1e00d1bce5f0c 100644
--- a/packages/autop/README.md
+++ b/packages/autop/README.md
@@ -20,9 +20,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 Replaces double line-breaks with paragraph elements.
 
-A group of regex replaces used to identify text formatted with newlines and
-replace double line-breaks with HTML paragraph tags. The remaining line-
-breaks after conversion become `<br />` tags, unless br is set to 'false'.
+A group of regex replaces used to identify text formatted with newlines and replace double line-breaks with HTML paragraph tags. The remaining linebreaks after conversion become `<br />` tags, unless br is set to 'false'.
 
 _Usage_
 
@@ -44,8 +42,7 @@ _Returns_
 
 Replaces `<p>` tags with two line breaks. "Opposite" of autop().
 
-Replaces `<p>` tags with two line breaks except where the `<p>` has attributes.
-Unifies whitespace. Indents `<li>`, `<dt>` and `<dd>` for better readability.
+Replaces `<p>` tags with two line breaks except where the `<p>` has attributes. Unifies whitespace. Indents `<li>`, `<dt>` and `<dd>` for better readability.
 
 _Usage_
 
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 7bd42add6daeb7..bd48c84775d9ef 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,15 +19,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/autop/src/index.js b/packages/autop/src/index.js
deleted file mode 100644
index 596a028f461643..00000000000000
--- a/packages/autop/src/index.js
+++ /dev/null
@@ -1,488 +0,0 @@
-/**
- * The regular expression for an HTML element.
- *
- * @type {RegExp}
- */
-const htmlSplitRegex = ( () => {
-	/* eslint-disable no-multi-spaces */
-	const comments =
-		'!' + // Start of comment, after the <.
-		'(?:' + // Unroll the loop: Consume everything until --> is found.
-		'-(?!->)' + // Dash not followed by end of comment.
-		'[^\\-]*' + // Consume non-dashes.
-		')*' + // Loop possessively.
-		'(?:-->)?'; // End of comment. If not found, match all input.
-
-	const cdata =
-		'!\\[CDATA\\[' + // Start of comment, after the <.
-		'[^\\]]*' + // Consume non-].
-		'(?:' + // Unroll the loop: Consume everything until ]]> is found.
-		'](?!]>)' + // One ] not followed by end of comment.
-		'[^\\]]*' + // Consume non-].
-		')*?' + // Loop possessively.
-		'(?:]]>)?'; // End of comment. If not found, match all input.
-
-	const escaped =
-		'(?=' + // Is the element escaped?
-		'!--' +
-		'|' +
-		'!\\[CDATA\\[' +
-		')' +
-		'((?=!-)' + // If yes, which type?
-		comments +
-		'|' +
-		cdata +
-		')';
-
-	const regex =
-		'(' + // Capture the entire match.
-		'<' + // Find start of element.
-		'(' + // Conditional expression follows.
-		escaped + // Find end of escaped element.
-		'|' + // ... else ...
-		'[^>]*>?' + // Find end of normal element.
-		')' +
-		')';
-
-	return new RegExp( regex );
-	/* eslint-enable no-multi-spaces */
-} )();
-
-/**
- * Separate HTML elements and comments from the text.
- *
- * @param {string} input The text which has to be formatted.
- *
- * @return {string[]} The formatted text.
- */
-function htmlSplit( input ) {
-	const parts = [];
-	let workingInput = input;
-
-	let match;
-	while ( ( match = workingInput.match( htmlSplitRegex ) ) ) {
-		// The `match` result, when invoked on a RegExp with the `g` flag (`/foo/g`) will not include `index`.
-		// If the `g` flag is omitted, `index` is included.
-		// `htmlSplitRegex` does not have the `g` flag so we can assert it will have an index number.
-		// Assert `match.index` is a number.
-		const index = /** @type {number} */ ( match.index );
-
-		parts.push( workingInput.slice( 0, index ) );
-		parts.push( match[ 0 ] );
-		workingInput = workingInput.slice( index + match[ 0 ].length );
-	}
-
-	if ( workingInput.length ) {
-		parts.push( workingInput );
-	}
-
-	return parts;
-}
-
-/**
- * Replace characters or phrases within HTML elements only.
- *
- * @param {string}                haystack     The text which has to be formatted.
- * @param {Record<string,string>} replacePairs In the form {from: 'to', …}.
- *
- * @return {string} The formatted text.
- */
-function replaceInHtmlTags( haystack, replacePairs ) {
-	// Find all elements.
-	const textArr = htmlSplit( haystack );
-	let changed = false;
-
-	// Extract all needles.
-	const needles = Object.keys( replacePairs );
-
-	// Loop through delimiters (elements) only.
-	for ( let i = 1; i < textArr.length; i += 2 ) {
-		for ( let j = 0; j < needles.length; j++ ) {
-			const needle = needles[ j ];
-			if ( -1 !== textArr[ i ].indexOf( needle ) ) {
-				textArr[ i ] = textArr[ i ].replace(
-					new RegExp( needle, 'g' ),
-					replacePairs[ needle ]
-				);
-				changed = true;
-				// After one strtr() break out of the foreach loop and look at next element.
-				break;
-			}
-		}
-	}
-
-	if ( changed ) {
-		haystack = textArr.join( '' );
-	}
-
-	return haystack;
-}
-
-/**
- * Replaces double line-breaks with paragraph elements.
- *
- * A group of regex replaces used to identify text formatted with newlines and
- * replace double line-breaks with HTML paragraph tags. The remaining line-
- * breaks after conversion become `<br />` tags, unless br is set to 'false'.
- *
- * @param {string}  text The text which has to be formatted.
- * @param {boolean} br   Optional. If set, will convert all remaining line-
- *                       breaks after paragraphing. Default true.
- *
- * @example
- *```js
- * import { autop } from '@wordpress/autop';
- * autop( 'my text' ); // "<p>my text</p>"
- * ```
- *
- * @return {string} Text which has been converted into paragraph tags.
- */
-export function autop( text, br = true ) {
-	const preTags = [];
-
-	if ( text.trim() === '' ) {
-		return '';
-	}
-
-	// Just to make things a little easier, pad the end.
-	text = text + '\n';
-
-	/*
-	 * Pre tags shouldn't be touched by autop.
-	 * Replace pre tags with placeholders and bring them back after autop.
-	 */
-	if ( text.indexOf( '<pre' ) !== -1 ) {
-		const textParts = text.split( '</pre>' );
-		const lastText = textParts.pop();
-		text = '';
-
-		for ( let i = 0; i < textParts.length; i++ ) {
-			const textPart = textParts[ i ];
-			const start = textPart.indexOf( '<pre' );
-
-			// Malformed html?
-			if ( start === -1 ) {
-				text += textPart;
-				continue;
-			}
-
-			const name = '<pre wp-pre-tag-' + i + '></pre>';
-			preTags.push( [ name, textPart.substr( start ) + '</pre>' ] );
-
-			text += textPart.substr( 0, start ) + name;
-		}
-
-		text += lastText;
-	}
-	// Change multiple <br>s into two line breaks, which will turn into paragraphs.
-	text = text.replace( /<br\s*\/?>\s*<br\s*\/?>/g, '\n\n' );
-
-	const allBlocks =
-		'(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
-
-	// Add a double line break above block-level opening tags.
-	text = text.replace(
-		new RegExp( '(<' + allBlocks + '[\\s/>])', 'g' ),
-		'\n\n$1'
-	);
-
-	// Add a double line break below block-level closing tags.
-	text = text.replace(
-		new RegExp( '(</' + allBlocks + '>)', 'g' ),
-		'$1\n\n'
-	);
-
-	// Standardize newline characters to "\n".
-	text = text.replace( /\r\n|\r/g, '\n' );
-
-	// Find newlines in all elements and add placeholders.
-	text = replaceInHtmlTags( text, { '\n': ' <!-- wpnl --> ' } );
-
-	// Collapse line breaks before and after <option> elements so they don't get autop'd.
-	if ( text.indexOf( '<option' ) !== -1 ) {
-		text = text.replace( /\s*<option/g, '<option' );
-		text = text.replace( /<\/option>\s*/g, '</option>' );
-	}
-
-	/*
-	 * Collapse line breaks inside <object> elements, before <param> and <embed> elements
-	 * so they don't get autop'd.
-	 */
-	if ( text.indexOf( '</object>' ) !== -1 ) {
-		text = text.replace( /(<object[^>]*>)\s*/g, '$1' );
-		text = text.replace( /\s*<\/object>/g, '</object>' );
-		text = text.replace( /\s*(<\/?(?:param|embed)[^>]*>)\s*/g, '$1' );
-	}
-
-	/*
-	 * Collapse line breaks inside <audio> and <video> elements,
-	 * before and after <source> and <track> elements.
-	 */
-	if ( text.indexOf( '<source' ) !== -1 || text.indexOf( '<track' ) !== -1 ) {
-		text = text.replace( /([<\[](?:audio|video)[^>\]]*[>\]])\s*/g, '$1' );
-		text = text.replace( /\s*([<\[]\/(?:audio|video)[>\]])/g, '$1' );
-		text = text.replace( /\s*(<(?:source|track)[^>]*>)\s*/g, '$1' );
-	}
-
-	// Collapse line breaks before and after <figcaption> elements.
-	if ( text.indexOf( '<figcaption' ) !== -1 ) {
-		text = text.replace( /\s*(<figcaption[^>]*>)/, '$1' );
-		text = text.replace( /<\/figcaption>\s*/, '</figcaption>' );
-	}
-
-	// Remove more than two contiguous line breaks.
-	text = text.replace( /\n\n+/g, '\n\n' );
-
-	// Split up the contents into an array of strings, separated by double line breaks.
-	const texts = text.split( /\n\s*\n/ ).filter( Boolean );
-
-	// Reset text prior to rebuilding.
-	text = '';
-
-	// Rebuild the content as a string, wrapping every bit with a <p>.
-	texts.forEach( ( textPiece ) => {
-		text += '<p>' + textPiece.replace( /^\n*|\n*$/g, '' ) + '</p>\n';
-	} );
-
-	// Under certain strange conditions it could create a P of entirely whitespace.
-	text = text.replace( /<p>\s*<\/p>/g, '' );
-
-	// Add a closing <p> inside <div>, <address>, or <form> tag if missing.
-	text = text.replace(
-		/<p>([^<]+)<\/(div|address|form)>/g,
-		'<p>$1</p></$2>'
-	);
-
-	// If an opening or closing block element tag is wrapped in a <p>, unwrap it.
-	text = text.replace(
-		new RegExp( '<p>\\s*(</?' + allBlocks + '[^>]*>)\\s*</p>', 'g' ),
-		'$1'
-	);
-
-	// In some cases <li> may get wrapped in <p>, fix them.
-	text = text.replace( /<p>(<li.+?)<\/p>/g, '$1' );
-
-	// If a <blockquote> is wrapped with a <p>, move it inside the <blockquote>.
-	text = text.replace( /<p><blockquote([^>]*)>/gi, '<blockquote$1><p>' );
-	text = text.replace( /<\/blockquote><\/p>/g, '</p></blockquote>' );
-
-	// If an opening or closing block element tag is preceded by an opening <p> tag, remove it.
-	text = text.replace(
-		new RegExp( '<p>\\s*(</?' + allBlocks + '[^>]*>)', 'g' ),
-		'$1'
-	);
-
-	// If an opening or closing block element tag is followed by a closing <p> tag, remove it.
-	text = text.replace(
-		new RegExp( '(</?' + allBlocks + '[^>]*>)\\s*</p>', 'g' ),
-		'$1'
-	);
-
-	// Optionally insert line breaks.
-	if ( br ) {
-		// Replace newlines that shouldn't be touched with a placeholder.
-		text = text.replace( /<(script|style).*?<\/\\1>/g, ( match ) =>
-			match[ 0 ].replace( /\n/g, '<WPPreserveNewline />' )
-		);
-
-		// Normalize <br>
-		text = text.replace( /<br>|<br\/>/g, '<br />' );
-
-		// Replace any new line characters that aren't preceded by a <br /> with a <br />.
-		text = text.replace( /(<br \/>)?\s*\n/g, ( a, b ) =>
-			b ? a : '<br />\n'
-		);
-
-		// Replace newline placeholders with newlines.
-		text = text.replace( /<WPPreserveNewline \/>/g, '\n' );
-	}
-
-	// If a <br /> tag is after an opening or closing block tag, remove it.
-	text = text.replace(
-		new RegExp( '(</?' + allBlocks + '[^>]*>)\\s*<br />', 'g' ),
-		'$1'
-	);
-
-	// If a <br /> tag is before a subset of opening or closing block tags, remove it.
-	text = text.replace(
-		/<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)/g,
-		'$1'
-	);
-	text = text.replace( /\n<\/p>$/g, '</p>' );
-
-	// Replace placeholder <pre> tags with their original content.
-	preTags.forEach( ( preTag ) => {
-		const [ name, original ] = preTag;
-		text = text.replace( name, original );
-	} );
-
-	// Restore newlines in all elements.
-	if ( -1 !== text.indexOf( '<!-- wpnl -->' ) ) {
-		text = text.replace( /\s?<!-- wpnl -->\s?/g, '\n' );
-	}
-
-	return text;
-}
-
-/**
- * Replaces `<p>` tags with two line breaks. "Opposite" of autop().
- *
- * Replaces `<p>` tags with two line breaks except where the `<p>` has attributes.
- * Unifies whitespace. Indents `<li>`, `<dt>` and `<dd>` for better readability.
- *
- * @param {string} html The content from the editor.
- *
- * @example
- * ```js
- * import { removep } from '@wordpress/autop';
- * removep( '<p>my text</p>' ); // "my text"
- * ```
- *
- * @return {string} The content with stripped paragraph tags.
- */
-export function removep( html ) {
-	const blocklist =
-		'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset|figure';
-	const blocklist1 = blocklist + '|div|p';
-	const blocklist2 = blocklist + '|pre';
-	/** @type {string[]} */
-	const preserve = [];
-	let preserveLinebreaks = false;
-	let preserveBr = false;
-
-	if ( ! html ) {
-		return '';
-	}
-
-	// Protect script and style tags.
-	if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
-		html = html.replace(
-			/<(script|style)[^>]*>[\s\S]*?<\/\1>/g,
-			( match ) => {
-				preserve.push( match );
-				return '<wp-preserve>';
-			}
-		);
-	}
-
-	// Protect pre tags.
-	if ( html.indexOf( '<pre' ) !== -1 ) {
-		preserveLinebreaks = true;
-		html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, ( a ) => {
-			a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
-			a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
-			return a.replace( /\r?\n/g, '<wp-line-break>' );
-		} );
-	}
-
-	// Remove line breaks but keep <br> tags inside image captions.
-	if ( html.indexOf( '[caption' ) !== -1 ) {
-		preserveBr = true;
-		html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, ( a ) => {
-			return a
-				.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' )
-				.replace( /[\r\n\t]+/, '' );
-		} );
-	}
-
-	// Normalize white space characters before and after block tags.
-	html = html.replace(
-		new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ),
-		'</$1>\n'
-	);
-	html = html.replace(
-		new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ),
-		'\n<$1>'
-	);
-
-	// Mark </p> if it has any attributes.
-	html = html.replace( /(<p [^>]+>[\s\S]*?)<\/p>/g, '$1</p#>' );
-
-	// Preserve the first <p> inside a <div>.
-	html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
-
-	// Remove paragraph tags.
-	html = html.replace( /\s*<p>/gi, '' );
-	html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
-
-	// Normalize white space chars and remove multiple line breaks.
-	html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
-
-	// Replace <br> tags with line breaks.
-	html = html.replace( /(\s*)<br ?\/?>\s*/gi, ( _, space ) => {
-		if ( space && space.indexOf( '\n' ) !== -1 ) {
-			return '\n\n';
-		}
-
-		return '\n';
-	} );
-
-	// Fix line breaks around <div>.
-	html = html.replace( /\s*<div/g, '\n<div' );
-	html = html.replace( /<\/div>\s*/g, '</div>\n' );
-
-	// Fix line breaks around caption shortcodes.
-	html = html.replace(
-		/\s*\[caption([^\[]+)\[\/caption\]\s*/gi,
-		'\n\n[caption$1[/caption]\n\n'
-	);
-	html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
-
-	// Pad block elements tags with a line break.
-	html = html.replace(
-		new RegExp( '\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ),
-		'\n<$1>'
-	);
-	html = html.replace(
-		new RegExp( '\\s*</(' + blocklist2 + ')>\\s*', 'g' ),
-		'</$1>\n'
-	);
-
-	// Indent <li>, <dt> and <dd> tags.
-	html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
-
-	// Fix line breaks around <select> and <option>.
-	if ( html.indexOf( '<option' ) !== -1 ) {
-		html = html.replace( /\s*<option/g, '\n<option' );
-		html = html.replace( /\s*<\/select>/g, '\n</select>' );
-	}
-
-	// Pad <hr> with two line breaks.
-	if ( html.indexOf( '<hr' ) !== -1 ) {
-		html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
-	}
-
-	// Remove line breaks in <object> tags.
-	if ( html.indexOf( '<object' ) !== -1 ) {
-		html = html.replace( /<object[\s\S]+?<\/object>/g, ( a ) => {
-			return a.replace( /[\r\n]+/g, '' );
-		} );
-	}
-
-	// Unmark special paragraph closing tags.
-	html = html.replace( /<\/p#>/g, '</p>\n' );
-
-	// Pad remaining <p> tags whit a line break.
-	html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
-
-	// Trim.
-	html = html.replace( /^\s+/, '' );
-	html = html.replace( /[\s\u00a0]+$/, '' );
-
-	if ( preserveLinebreaks ) {
-		html = html.replace( /<wp-line-break>/g, '\n' );
-	}
-
-	if ( preserveBr ) {
-		html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
-	}
-
-	// Restore preserved tags.
-	if ( preserve.length ) {
-		html = html.replace( /<wp-preserve>/g, () => {
-			return /** @type {string} */ ( preserve.shift() );
-		} );
-	}
-
-	return html;
-}
diff --git a/packages/autop/src/index.ts b/packages/autop/src/index.ts
new file mode 100644
index 00000000000000..e4a4b7ff27cb2a
--- /dev/null
+++ b/packages/autop/src/index.ts
@@ -0,0 +1,488 @@
+/**
+ * The regular expression for an HTML element.
+ */
+const htmlSplitRegex: RegExp = ( () => {
+	/* eslint-disable no-multi-spaces */
+	const comments =
+		'!' + // Start of comment, after the <.
+		'(?:' + // Unroll the loop: Consume everything until --> is found.
+		'-(?!->)' + // Dash not followed by end of comment.
+		'[^\\-]*' + // Consume non-dashes.
+		')*' + // Loop possessively.
+		'(?:-->)?'; // End of comment. If not found, match all input.
+
+	const cdata =
+		'!\\[CDATA\\[' + // Start of comment, after the <.
+		'[^\\]]*' + // Consume non-].
+		'(?:' + // Unroll the loop: Consume everything until ]]> is found.
+		'](?!]>)' + // One ] not followed by end of comment.
+		'[^\\]]*' + // Consume non-].
+		')*?' + // Loop possessively.
+		'(?:]]>)?'; // End of comment. If not found, match all input.
+
+	const escaped =
+		'(?=' + // Is the element escaped?
+		'!--' +
+		'|' +
+		'!\\[CDATA\\[' +
+		')' +
+		'((?=!-)' + // If yes, which type?
+		comments +
+		'|' +
+		cdata +
+		')';
+
+	const regex =
+		'(' + // Capture the entire match.
+		'<' + // Find start of element.
+		'(' + // Conditional expression follows.
+		escaped + // Find end of escaped element.
+		'|' + // ... else ...
+		'[^>]*>?' + // Find end of normal element.
+		')' +
+		')';
+
+	return new RegExp( regex );
+	/* eslint-enable no-multi-spaces */
+} )();
+
+/**
+ * Separate HTML elements and comments from the text.
+ *
+ * @param input The text which has to be formatted.
+ *
+ * @return The formatted text.
+ */
+function htmlSplit( input: string ): string[] {
+	const parts = [];
+	let workingInput = input;
+
+	let match;
+	while ( ( match = workingInput.match( htmlSplitRegex ) ) ) {
+		// The `match` result, when invoked on a RegExp with the `g` flag (`/foo/g`) will not include `index`.
+		// If the `g` flag is omitted, `index` is included.
+		// `htmlSplitRegex` does not have the `g` flag so we can assert it will have an index number.
+		// Assert `match.index` is a number.
+		const index = match.index as number;
+
+		parts.push( workingInput.slice( 0, index ) );
+		parts.push( match[ 0 ] );
+		workingInput = workingInput.slice( index + match[ 0 ].length );
+	}
+
+	if ( workingInput.length ) {
+		parts.push( workingInput );
+	}
+
+	return parts;
+}
+
+/**
+ * Replace characters or phrases within HTML elements only.
+ *
+ * @param haystack     The text which has to be formatted.
+ * @param replacePairs In the form {from: 'to', …}.
+ *
+ * @return The formatted text.
+ */
+function replaceInHtmlTags(
+	haystack: string,
+	replacePairs: Record< string, string >
+): string {
+	// Find all elements.
+	const textArr = htmlSplit( haystack );
+	let changed = false;
+
+	// Extract all needles.
+	const needles = Object.keys( replacePairs );
+
+	// Loop through delimiters (elements) only.
+	for ( let i = 1; i < textArr.length; i += 2 ) {
+		for ( let j = 0; j < needles.length; j++ ) {
+			const needle = needles[ j ];
+			if ( -1 !== textArr[ i ].indexOf( needle ) ) {
+				textArr[ i ] = textArr[ i ].replace(
+					new RegExp( needle, 'g' ),
+					replacePairs[ needle ]
+				);
+				changed = true;
+				// After one strtr() break out of the foreach loop and look at next element.
+				break;
+			}
+		}
+	}
+
+	if ( changed ) {
+		haystack = textArr.join( '' );
+	}
+
+	return haystack;
+}
+
+/**
+ * Replaces double line-breaks with paragraph elements.
+ *
+ * A group of regex replaces used to identify text formatted with newlines and
+ * replace double line-breaks with HTML paragraph tags. The remaining line-
+ * breaks after conversion become `<br />` tags, unless br is set to 'false'.
+ *
+ * @param text The text which has to be formatted.
+ * @param br   Optional. If set, will convert all remaining line-
+ *             breaks after paragraphing. Default true.
+ *
+ * @example
+ *```js
+ * import { autop } from '@wordpress/autop';
+ * autop( 'my text' ); // "<p>my text</p>"
+ * ```
+ *
+ * @return Text which has been converted into paragraph tags.
+ */
+export function autop( text: string, br: boolean = true ): string {
+	const preTags: Array< [ string, string ] > = [];
+
+	if ( text.trim() === '' ) {
+		return '';
+	}
+
+	// Just to make things a little easier, pad the end.
+	text = text + '\n';
+
+	/*
+	 * Pre tags shouldn't be touched by autop.
+	 * Replace pre tags with placeholders and bring them back after autop.
+	 */
+	if ( text.indexOf( '<pre' ) !== -1 ) {
+		const textParts = text.split( '</pre>' );
+		const lastText = textParts.pop();
+		text = '';
+
+		for ( let i = 0; i < textParts.length; i++ ) {
+			const textPart = textParts[ i ];
+			const start = textPart.indexOf( '<pre' );
+
+			// Malformed html?
+			if ( start === -1 ) {
+				text += textPart;
+				continue;
+			}
+
+			const name = '<pre wp-pre-tag-' + i + '></pre>';
+			preTags.push( [ name, textPart.substr( start ) + '</pre>' ] );
+
+			text += textPart.substr( 0, start ) + name;
+		}
+
+		text += lastText;
+	}
+	// Change multiple <br>s into two line breaks, which will turn into paragraphs.
+	text = text.replace( /<br\s*\/?>\s*<br\s*\/?>/g, '\n\n' );
+
+	const allBlocks =
+		'(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
+
+	// Add a double line break above block-level opening tags.
+	text = text.replace(
+		new RegExp( '(<' + allBlocks + '[\\s/>])', 'g' ),
+		'\n\n$1'
+	);
+
+	// Add a double line break below block-level closing tags.
+	text = text.replace(
+		new RegExp( '(</' + allBlocks + '>)', 'g' ),
+		'$1\n\n'
+	);
+
+	// Standardize newline characters to "\n".
+	text = text.replace( /\r\n|\r/g, '\n' );
+
+	// Find newlines in all elements and add placeholders.
+	text = replaceInHtmlTags( text, { '\n': ' <!-- wpnl --> ' } );
+
+	// Collapse line breaks before and after <option> elements so they don't get autop'd.
+	if ( text.indexOf( '<option' ) !== -1 ) {
+		text = text.replace( /\s*<option/g, '<option' );
+		text = text.replace( /<\/option>\s*/g, '</option>' );
+	}
+
+	/*
+	 * Collapse line breaks inside <object> elements, before <param> and <embed> elements
+	 * so they don't get autop'd.
+	 */
+	if ( text.indexOf( '</object>' ) !== -1 ) {
+		text = text.replace( /(<object[^>]*>)\s*/g, '$1' );
+		text = text.replace( /\s*<\/object>/g, '</object>' );
+		text = text.replace( /\s*(<\/?(?:param|embed)[^>]*>)\s*/g, '$1' );
+	}
+
+	/*
+	 * Collapse line breaks inside <audio> and <video> elements,
+	 * before and after <source> and <track> elements.
+	 */
+	if ( text.indexOf( '<source' ) !== -1 || text.indexOf( '<track' ) !== -1 ) {
+		text = text.replace( /([<\[](?:audio|video)[^>\]]*[>\]])\s*/g, '$1' );
+		text = text.replace( /\s*([<\[]\/(?:audio|video)[>\]])/g, '$1' );
+		text = text.replace( /\s*(<(?:source|track)[^>]*>)\s*/g, '$1' );
+	}
+
+	// Collapse line breaks before and after <figcaption> elements.
+	if ( text.indexOf( '<figcaption' ) !== -1 ) {
+		text = text.replace( /\s*(<figcaption[^>]*>)/, '$1' );
+		text = text.replace( /<\/figcaption>\s*/, '</figcaption>' );
+	}
+
+	// Remove more than two contiguous line breaks.
+	text = text.replace( /\n\n+/g, '\n\n' );
+
+	// Split up the contents into an array of strings, separated by double line breaks.
+	const texts = text.split( /\n\s*\n/ ).filter( Boolean );
+
+	// Reset text prior to rebuilding.
+	text = '';
+
+	// Rebuild the content as a string, wrapping every bit with a <p>.
+	texts.forEach( ( textPiece ) => {
+		text += '<p>' + textPiece.replace( /^\n*|\n*$/g, '' ) + '</p>\n';
+	} );
+
+	// Under certain strange conditions it could create a P of entirely whitespace.
+	text = text.replace( /<p>\s*<\/p>/g, '' );
+
+	// Add a closing <p> inside <div>, <address>, or <form> tag if missing.
+	text = text.replace(
+		/<p>([^<]+)<\/(div|address|form)>/g,
+		'<p>$1</p></$2>'
+	);
+
+	// If an opening or closing block element tag is wrapped in a <p>, unwrap it.
+	text = text.replace(
+		new RegExp( '<p>\\s*(</?' + allBlocks + '[^>]*>)\\s*</p>', 'g' ),
+		'$1'
+	);
+
+	// In some cases <li> may get wrapped in <p>, fix them.
+	text = text.replace( /<p>(<li.+?)<\/p>/g, '$1' );
+
+	// If a <blockquote> is wrapped with a <p>, move it inside the <blockquote>.
+	text = text.replace( /<p><blockquote([^>]*)>/gi, '<blockquote$1><p>' );
+	text = text.replace( /<\/blockquote><\/p>/g, '</p></blockquote>' );
+
+	// If an opening or closing block element tag is preceded by an opening <p> tag, remove it.
+	text = text.replace(
+		new RegExp( '<p>\\s*(</?' + allBlocks + '[^>]*>)', 'g' ),
+		'$1'
+	);
+
+	// If an opening or closing block element tag is followed by a closing <p> tag, remove it.
+	text = text.replace(
+		new RegExp( '(</?' + allBlocks + '[^>]*>)\\s*</p>', 'g' ),
+		'$1'
+	);
+
+	// Optionally insert line breaks.
+	if ( br ) {
+		// Replace newlines that shouldn't be touched with a placeholder.
+		text = text.replace( /<(script|style).*?<\/\\1>/g, ( match ) =>
+			match[ 0 ].replace( /\n/g, '<WPPreserveNewline />' )
+		);
+
+		// Normalize <br>
+		text = text.replace( /<br>|<br\/>/g, '<br />' );
+
+		// Replace any new line characters that aren't preceded by a <br /> with a <br />.
+		text = text.replace( /(<br \/>)?\s*\n/g, ( a, b ) =>
+			b ? a : '<br />\n'
+		);
+
+		// Replace newline placeholders with newlines.
+		text = text.replace( /<WPPreserveNewline \/>/g, '\n' );
+	}
+
+	// If a <br /> tag is after an opening or closing block tag, remove it.
+	text = text.replace(
+		new RegExp( '(</?' + allBlocks + '[^>]*>)\\s*<br />', 'g' ),
+		'$1'
+	);
+
+	// If a <br /> tag is before a subset of opening or closing block tags, remove it.
+	text = text.replace(
+		/<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)/g,
+		'$1'
+	);
+	text = text.replace( /\n<\/p>$/g, '</p>' );
+
+	// Replace placeholder <pre> tags with their original content.
+	preTags.forEach( ( preTag ) => {
+		const [ name, original ] = preTag;
+		text = text.replace( name, original );
+	} );
+
+	// Restore newlines in all elements.
+	if ( -1 !== text.indexOf( '<!-- wpnl -->' ) ) {
+		text = text.replace( /\s?<!-- wpnl -->\s?/g, '\n' );
+	}
+
+	return text;
+}
+
+/**
+ * Replaces `<p>` tags with two line breaks. "Opposite" of autop().
+ *
+ * Replaces `<p>` tags with two line breaks except where the `<p>` has attributes.
+ * Unifies whitespace. Indents `<li>`, `<dt>` and `<dd>` for better readability.
+ *
+ * @param html The content from the editor.
+ *
+ * @example
+ * ```js
+ * import { removep } from '@wordpress/autop';
+ * removep( '<p>my text</p>' ); // "my text"
+ * ```
+ *
+ * @return The content with stripped paragraph tags.
+ */
+export function removep( html: string ): string {
+	const blocklist =
+		'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset|figure';
+	const blocklist1 = blocklist + '|div|p';
+	const blocklist2 = blocklist + '|pre';
+	const preserve: string[] = [];
+	let preserveLinebreaks = false;
+	let preserveBr = false;
+
+	if ( ! html ) {
+		return '';
+	}
+
+	// Protect script and style tags.
+	if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
+		html = html.replace(
+			/<(script|style)[^>]*>[\s\S]*?<\/\1>/g,
+			( match ) => {
+				preserve.push( match );
+				return '<wp-preserve>';
+			}
+		);
+	}
+
+	// Protect pre tags.
+	if ( html.indexOf( '<pre' ) !== -1 ) {
+		preserveLinebreaks = true;
+		html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, ( a ) => {
+			a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
+			a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
+			return a.replace( /\r?\n/g, '<wp-line-break>' );
+		} );
+	}
+
+	// Remove line breaks but keep <br> tags inside image captions.
+	if ( html.indexOf( '[caption' ) !== -1 ) {
+		preserveBr = true;
+		html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, ( a ) => {
+			return a
+				.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' )
+				.replace( /[\r\n\t]+/, '' );
+		} );
+	}
+
+	// Normalize white space characters before and after block tags.
+	html = html.replace(
+		new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ),
+		'</$1>\n'
+	);
+	html = html.replace(
+		new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ),
+		'\n<$1>'
+	);
+
+	// Mark </p> if it has any attributes.
+	html = html.replace( /(<p [^>]+>[\s\S]*?)<\/p>/g, '$1</p#>' );
+
+	// Preserve the first <p> inside a <div>.
+	html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
+
+	// Remove paragraph tags.
+	html = html.replace( /\s*<p>/gi, '' );
+	html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
+
+	// Normalize white space chars and remove multiple line breaks.
+	html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
+
+	// Replace <br> tags with line breaks.
+	html = html.replace( /(\s*)<br ?\/?>\s*/gi, ( _, space ) => {
+		if ( space && space.indexOf( '\n' ) !== -1 ) {
+			return '\n\n';
+		}
+
+		return '\n';
+	} );
+
+	// Fix line breaks around <div>.
+	html = html.replace( /\s*<div/g, '\n<div' );
+	html = html.replace( /<\/div>\s*/g, '</div>\n' );
+
+	// Fix line breaks around caption shortcodes.
+	html = html.replace(
+		/\s*\[caption([^\[]+)\[\/caption\]\s*/gi,
+		'\n\n[caption$1[/caption]\n\n'
+	);
+	html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
+
+	// Pad block elements tags with a line break.
+	html = html.replace(
+		new RegExp( '\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ),
+		'\n<$1>'
+	);
+	html = html.replace(
+		new RegExp( '\\s*</(' + blocklist2 + ')>\\s*', 'g' ),
+		'</$1>\n'
+	);
+
+	// Indent <li>, <dt> and <dd> tags.
+	html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
+
+	// Fix line breaks around <select> and <option>.
+	if ( html.indexOf( '<option' ) !== -1 ) {
+		html = html.replace( /\s*<option/g, '\n<option' );
+		html = html.replace( /\s*<\/select>/g, '\n</select>' );
+	}
+
+	// Pad <hr> with two line breaks.
+	if ( html.indexOf( '<hr' ) !== -1 ) {
+		html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
+	}
+
+	// Remove line breaks in <object> tags.
+	if ( html.indexOf( '<object' ) !== -1 ) {
+		html = html.replace( /<object[\s\S]+?<\/object>/g, ( a ) => {
+			return a.replace( /[\r\n]+/g, '' );
+		} );
+	}
+
+	// Unmark special paragraph closing tags.
+	html = html.replace( /<\/p#>/g, '</p>\n' );
+
+	// Pad remaining <p> tags whit a line break.
+	html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
+
+	// Trim.
+	html = html.replace( /^\s+/, '' );
+	html = html.replace( /[\s\u00a0]+$/, '' );
+
+	if ( preserveLinebreaks ) {
+		html = html.replace( /<wp-line-break>/g, '\n' );
+	}
+
+	if ( preserveBr ) {
+		html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
+	}
+
+	// Restore preserved tags.
+	if ( preserve.length ) {
+		html = html.replace( /<wp-preserve>/g, () => {
+			return preserve.shift() as string;
+		} );
+	}
+
+	return html;
+}
diff --git a/packages/autop/src/test/index.test.js b/packages/autop/src/test/index.test.js
deleted file mode 100644
index 734a20ff37be2b..00000000000000
--- a/packages/autop/src/test/index.test.js
+++ /dev/null
@@ -1,519 +0,0 @@
-/**
- * Internal dependencies
- */
-import { autop, removep } from '../';
-
-test( 'empty string', () => {
-	expect( autop( '' ) ).toBe( '' );
-} );
-
-test( 'first post', () => {
-	const expected = `<p>Welcome to WordPress!  This post contains important information.  After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.</p>
-<p>First things first:</p>
-<ul>
-<li><a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
-</ul>
-<p>As a subscriber, you will receive an email every time an update is available (and only then).  This will make it easier to keep your site up to date, and secure from evildoers.<br />
-When a new version is released, <a href="%2$s" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.<br />
-Upgrading is a couple of clicks!</p>
-<p>Then you can start enjoying the WordPress experience:</p>
-<ul>
-<li>Edit your personal information at <a href="%3$s" title="Edit settings like your password, your display name and your contact information">Users &#8250; Your Profile</a></li>
-<li>Start publishing at <a href="%4$s" title="Create a new post">Posts &#8250; Add New</a> and at <a href="%5$s" title="Create a new page">Pages &#8250; Add New</a></li>
-<li>Browse and install plugins at <a href="%6$s" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins &#8250; Add New</a></li>
-<li>Browse and install themes at <a href="%7$s" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance &#8250; Add New Themes</a></li>
-<li>Modify and prettify your website&#8217;s links at <a href="%8$s" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings &#8250; Permalinks</a></li>
-<li>Import content from another system or WordPress site at <a href="%9$s" title="WordPress comes with importers for the most common publishing systems">Tools &#8250; Import</a></li>
-<li>Find answers to your questions at the <a href="%10$s" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
-</ul>
-<p>To keep this post for reference, <a href="%11$s" title="Click to edit the content and settings of this post">click to edit it</a>, go to the Publish box and change its Visibility from Public to Private.</p>
-<p>Thank you for selecting WordPress.  We wish you happy publishing!</p>
-<p>PS.  Not yet subscribed for update notifications?  <a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Do it now!</a></p>
-`;
-	const testData = `Welcome to WordPress!  This post contains important information.  After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.
-
-First things first:
-<ul>
-<li><a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
-</ul>
-As a subscriber, you will receive an email every time an update is available (and only then).  This will make it easier to keep your site up to date, and secure from evildoers.
-When a new version is released, <a href="%2$s" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.
-Upgrading is a couple of clicks!
-
-Then you can start enjoying the WordPress experience:
-<ul>
-<li>Edit your personal information at <a href="%3$s" title="Edit settings like your password, your display name and your contact information">Users &#8250; Your Profile</a></li>
-<li>Start publishing at <a href="%4$s" title="Create a new post">Posts &#8250; Add New</a> and at <a href="%5$s" title="Create a new page">Pages &#8250; Add New</a></li>
-<li>Browse and install plugins at <a href="%6$s" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins &#8250; Add New</a></li>
-<li>Browse and install themes at <a href="%7$s" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance &#8250; Add New Themes</a></li>
-<li>Modify and prettify your website&#8217;s links at <a href="%8$s" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings &#8250; Permalinks</a></li>
-<li>Import content from another system or WordPress site at <a href="%9$s" title="WordPress comes with importers for the most common publishing systems">Tools &#8250; Import</a></li>
-<li>Find answers to your questions at the <a href="%10$s" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
-</ul>
-To keep this post for reference, <a href="%11$s" title="Click to edit the content and settings of this post">click to edit it</a>, go to the Publish box and change its Visibility from Public to Private.
-
-Thank you for selecting WordPress.  We wish you happy publishing!
-
-PS.  Not yet subscribed for update notifications?  <a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Do it now!</a>
-`;
-
-	expect( autop( testData ) ).toBe( expected );
-} );
-
-test( 'skip pre elements', () => {
-	const code = `(function(){
-
-done = 0;
-});`;
-
-	// Not wrapped in <p> tags.
-	let str = `<pre>${ code }</pre>`;
-	expect( autop( str ).trim() ).toBe( str );
-
-	// Text before/after is wrapped in <p> tags.
-	str = `Look at this code\n\n<pre>${ code }</pre>\n\nIsn't that cool?`;
-
-	// Expected text after autop.
-	let expected = `<p>Look at this code</p>\n<pre>${ code }</pre>\n<p>Isn't that cool?</p>`;
-	expect( autop( str ).trim() ).toBe( expected );
-
-	// Make sure HTML breaks are maintained if manually inserted.
-	str =
-		'Look at this code\n\n<pre>Line1<br />Line2<br>Line3<br/>Line4\nActual Line 2\nActual Line 3</pre>\n\nCool, huh?';
-	expected =
-		'<p>Look at this code</p>\n<pre>Line1<br />Line2<br>Line3<br/>Line4\nActual Line 2\nActual Line 3</pre>\n<p>Cool, huh?</p>';
-	expect( autop( str ).trim() ).toBe( expected );
-} );
-
-test( 'skip input elements', () => {
-	const str =
-		'Username: <input type="text" id="username" name="username" /><br />Password: <input type="password" id="password1" name="password1" />';
-	expect( autop( str ).trim() ).toBe( '<p>' + str + '</p>' );
-} );
-
-test( 'source_track_elements', () => {
-	const content = `Paragraph one.
-
-<video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">
-	<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />
-	<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
-	<source type="video/webm" src="myvideo.webm" />
-	<!-- Ogg/Vorbis for older Firefox and Opera versions -->
-	<source type="video/ogg" src="myvideo.ogv" />
-	<!-- Optional: Add subtitles for each language -->
-	<track kind="subtitles" src="subtitles.srt" srclang="en" />
-	<!-- Optional: Add chapters -->
-	<track kind="chapters" src="chapters.srt" srclang="en" />
-	<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a>
-</video>
-
-Paragraph two.`;
-
-	const content2 = `Paragraph one.
-
-<video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">
-
-<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />
-
-<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
-<source type="video/webm" src="myvideo.webm" />
-
-<!-- Ogg/Vorbis for older Firefox and Opera versions -->
-<source type="video/ogg" src="myvideo.ogv" />
-
-<!-- Optional: Add subtitles for each language -->
-<track kind="subtitles" src="subtitles.srt" srclang="en" />
-
-<!-- Optional: Add chapters -->
-<track kind="chapters" src="chapters.srt" srclang="en" />
-
-<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a>
-
-</video>
-
-Paragraph two.`;
-
-	const expected =
-		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
-		'<p><video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">' +
-		'<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />' +
-		'<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->' +
-		'<source type="video/webm" src="myvideo.webm" />' +
-		'<!-- Ogg/Vorbis for older Firefox and Opera versions -->' +
-		'<source type="video/ogg" src="myvideo.ogv" />' +
-		'<!-- Optional: Add subtitles for each language -->' +
-		'<track kind="subtitles" src="subtitles.srt" srclang="en" />' +
-		'<!-- Optional: Add chapters -->' +
-		'<track kind="chapters" src="chapters.srt" srclang="en" />' +
-		'<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">' +
-		'http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a></video></p>\n' +
-		'<p>Paragraph two.</p>';
-
-	// When running the content through autop() from wp_richedit_pre()
-	const shortcodeContent = `Paragraph one.
-
-[video width="720" height="480" mp4="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4"]
-<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
-<source type="video/webm" src="myvideo.webm" />
-<!-- Ogg/Vorbis for older Firefox and Opera versions -->
-<source type="video/ogg" src="myvideo.ogv" />
-<!-- Optional: Add subtitles for each language -->
-<track kind="subtitles" src="subtitles.srt" srclang="en" />
-<!-- Optional: Add chapters -->
-<track kind="chapters" src="chapters.srt" srclang="en" />
-[/video]
-
-Paragraph two.`;
-
-	const shortcodeExpected =
-		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
-		'<p>[video width="720" height="480" mp4="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4"]' +
-		'<!-- WebM/VP8 for Firefox4, Opera, and Chrome --><source type="video/webm" src="myvideo.webm" />' +
-		'<!-- Ogg/Vorbis for older Firefox and Opera versions --><source type="video/ogg" src="myvideo.ogv" />' +
-		'<!-- Optional: Add subtitles for each language --><track kind="subtitles" src="subtitles.srt" srclang="en" />' +
-		'<!-- Optional: Add chapters --><track kind="chapters" src="chapters.srt" srclang="en" />' +
-		'[/video]</p>\n' +
-		'<p>Paragraph two.</p>';
-
-	expect( autop( content ).trim() ).toBe( expected );
-	expect( autop( content2 ).trim() ).toBe( expected );
-	expect( autop( shortcodeContent ).trim() ).toBe( shortcodeExpected );
-} );
-
-test( 'param embed elements', () => {
-	const content1 = `Paragraph one.
-
-<object width="400" height="224" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
-	<param name="src" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />
-	<param name="allowfullscreen" value="true" />
-	<param name="allowscriptaccess" value="always" />
-	<param name="overstretch" value="true" />
-	<param name="flashvars" value="isDynamicSeeking=true" />
-
-	<embed width="400" height="224" type="application/x-shockwave-flash" src="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" wmode="direct" seamlesstabbing="true" allowfullscreen="true" overstretch="true" flashvars="isDynamicSeeking=true" />
-</object>
-
-Paragraph two.`;
-
-	const expected1 =
-		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
-		'<p><object width="400" height="224" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">' +
-		'<param name="src" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />' +
-		'<param name="allowfullscreen" value="true" />' +
-		'<param name="allowscriptaccess" value="always" />' +
-		'<param name="overstretch" value="true" />' +
-		'<param name="flashvars" value="isDynamicSeeking=true" />' +
-		'<embed width="400" height="224" type="application/x-shockwave-flash" src="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" wmode="direct" seamlesstabbing="true" allowfullscreen="true" overstretch="true" flashvars="isDynamicSeeking=true" />' +
-		'</object></p>\n' +
-		'<p>Paragraph two.</p>';
-
-	const content2 = `Paragraph one.
-
-<div class="video-player" id="x-video-0">
-<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="video-0" standby="Standby text">
-<param name="movie" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />
-<param name="quality" value="best" />
-
-<param name="seamlesstabbing" value="true" />
-<param name="allowfullscreen" value="true" />
-<param name="allowscriptaccess" value="always" />
-<param name="overstretch" value="true" />
-
-<!--[if !IE]--><object type="application/x-shockwave-flash" data="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" width="640" height="360" standby="Standby text">
-<param name="quality" value="best" />
-
-<param name="seamlesstabbing" value="true" />
-<param name="allowfullscreen" value="true" />
-<param name="allowscriptaccess" value="always" />
-<param name="overstretch" value="true" />
-</object><!--<![endif]-->
-</object></div>
-
-Paragraph two.`;
-
-	const expected2 =
-		'<p>Paragraph one.</p>\n' + // Line breaks only after block tags.
-		'<div class="video-player" id="x-video-0">\n' +
-		'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="video-0" standby="Standby text">' +
-		'<param name="movie" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />' +
-		'<param name="quality" value="best" />' +
-		'<param name="seamlesstabbing" value="true" />' +
-		'<param name="allowfullscreen" value="true" />' +
-		'<param name="allowscriptaccess" value="always" />' +
-		'<param name="overstretch" value="true" />' +
-		'<!--[if !IE]--><object type="application/x-shockwave-flash" data="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" width="640" height="360" standby="Standby text">' +
-		'<param name="quality" value="best" />' +
-		'<param name="seamlesstabbing" value="true" />' +
-		'<param name="allowfullscreen" value="true" />' +
-		'<param name="allowscriptaccess" value="always" />' +
-		'<param name="overstretch" value="true" /></object><!--<![endif]-->' +
-		'</object></div>\n' +
-		'<p>Paragraph two.</p>';
-
-	expect( autop( content1 ).trim() ).toBe( expected1 );
-	expect( autop( content2 ).trim() ).toBe( expected2 );
-} );
-
-test( 'skip select option elements', () => {
-	const str =
-		'Country: <select id="state" name="state"><option value="1">Alabama</option><option value="2">Alaska</option><option value="3">Arizona</option><option value="4">Arkansas</option><option value="5">California</option></select>';
-
-	expect( autop( str ).trim() ).toBe( '<p>' + str + '</p>' );
-} );
-
-test( 'that_autop_treats_block_level_elements_as_blocks', () => {
-	const blocks = [
-		'table',
-		'thead',
-		'tfoot',
-		'caption',
-		'col',
-		'colgroup',
-		'tbody',
-		'tr',
-		'td',
-		'th',
-		'div',
-		'dl',
-		'dd',
-		'dt',
-		'ul',
-		'ol',
-		'li',
-		'pre',
-		'form',
-		'map',
-		'area',
-		'address',
-		'math',
-		'style',
-		'p',
-		'h1',
-		'h2',
-		'h3',
-		'h4',
-		'h5',
-		'h6',
-		'hr',
-		'fieldset',
-		'legend',
-		'section',
-		'article',
-		'aside',
-		'hgroup',
-		'header',
-		'footer',
-		'nav',
-		'figure',
-		'details',
-		'menu',
-		'summary',
-	];
-
-	// Check whitespace normalization.
-	let content = [];
-
-	blocks.forEach( ( block ) => {
-		content.push( `<${ block }>foo</${ block }>` );
-	} );
-
-	let expected = content.join( '\n' );
-	let input = content.join( '\n\n' ); // WS difference.
-
-	expect( autop( input ).trim() ).toBe( expected );
-
-	input = content.join( '' ); // WS difference.
-
-	expect( autop( input ).trim() ).toBe( expected );
-
-	// Check whitespace addition.
-	content = [];
-
-	blocks.forEach( ( block ) => {
-		content.push( `<${ block }/>` );
-	} );
-
-	expected = content.join( '\n' );
-	input = content.join( '' );
-
-	expect( autop( input ).trim() ).toBe( expected );
-
-	// Check whitespace addition with attributes.
-	content = [];
-
-	blocks.forEach( ( block ) => {
-		content.push( `<${ block } attr='value'>foo</${ block }>` );
-	} );
-
-	expected = content.join( '\n' );
-	input = content.join( '' );
-
-	expect( autop( input ).trim() ).toBe( expected );
-} );
-
-test( 'autop does not wrap blockquotes but does autop their contents', () => {
-	const content = '<blockquote>foo</blockquote>';
-	const expected = '<blockquote><p>foo</p></blockquote>';
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-test( 'that autop treats inline elements as inline', () => {
-	const inlines = [
-		'a',
-		'em',
-		'strong',
-		'small',
-		's',
-		'cite',
-		'q',
-		'dfn',
-		'abbr',
-		'data',
-		'time',
-		'code',
-		'var',
-		'samp',
-		'kbd',
-		'sub',
-		'sup',
-		'i',
-		'b',
-		'u',
-		'mark',
-		'span',
-		'del',
-		'ins',
-		'noscript',
-		'select',
-	];
-
-	let content = [];
-	let expected = [];
-
-	inlines.forEach( ( inline ) => {
-		content.push( `<${ inline }>foo</${ inline }>` );
-		expected.push( `<p><${ inline }>foo</${ inline }></p>` );
-	} );
-
-	content = content.join( '\n\n' );
-	expected = expected.join( '\n' );
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-test( 'element sanity', () => {
-	[
-		[ 'Hello <a\nhref="world">', '<p>Hello <a\nhref="world"></p>\n' ],
-		[
-			'Hello <!-- a\nhref="world" -->',
-			'<p>Hello <!-- a\nhref="world" --></p>\n',
-		],
-		[
-			'Hello <!-- <object>\n<param>\n<param>\n<embed>\n</embed>\n</object>\n -->',
-			'<p>Hello <!-- <object>\n<param>\n<param>\n<embed>\n</embed>\n</object>\n --></p>\n',
-		],
-		[
-			'Hello <!-- <object>\n<param/>\n<param/>\n<embed>\n</embed>\n</object>\n -->',
-			'<p>Hello <!-- <object>\n<param/>\n<param/>\n<embed>\n</embed>\n</object>\n --></p>\n',
-		],
-		/* Block elements inside comments will fail this test in all versions, it's not a regression.
-		[
-			'Hello <!-- <hr> a\nhref='world' -->',
-			'<p>Hello <!-- <hr> a\nhref='world' --></p>\n',
-		],
-		[
-			'Hello <![CDATA[ <hr> a\nhttps://youtu.be/jgz0uSaOZbE\n ]]>',
-			'<p>Hello <![CDATA[ <hr> a\nhttps://youtu.be/jgz0uSaOZbE\n ]]></p>\n',
-		],
-		*/
-		[
-			'Hello <![CDATA[ a\nhttps://youtu.be/jgz0uSaOZbE\n ]]>',
-			'<p>Hello <![CDATA[ a\nhttps://youtu.be/jgz0uSaOZbE\n ]]></p>\n',
-		],
-		[
-			'Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 ]]> -->',
-			'<p>Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 ]]> --></p>\n',
-		],
-		[
-			'Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 --> a\n9 ]]>',
-			'<p>Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 --> a\n9 ]]></p>\n',
-		],
-	].forEach( ( [ input, output ] ) => {
-		expect( autop( input ) ).toBe( output );
-	} );
-} );
-
-test( 'that autop skips line breaks after br', () => {
-	const content = `
-line 1<br>
-line 2<br/>
-line 3<br />
-line 4
-line 5
-`;
-
-	const expected = `<p>line 1<br />
-line 2<br />
-line 3<br />
-line 4<br />
-line 5</p>`;
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-test( 'that autop adds a paragraph after multiple br', () => {
-	const content = `
-line 1<br>
-<br/>
-line 2<br/>
-<br />
-`;
-
-	const expected = `<p>line 1</p>
-<p>line 2</p>`;
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-test( 'that text before blocks is peed', () => {
-	const content = 'a<div>b</div>';
-	const expected = '<p>a</p>\n<div>b</div>';
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-test( 'that autop doses not add extra closing p in figure', () => {
-	const content1 =
-		'<figure><img src="example.jpg" /><figcaption>Caption</figcaption></figure>';
-	const expected1 = content1;
-
-	const content2 = `<figure>
-<img src="example.jpg" />
-<figcaption>Caption</figcaption>
-</figure>`;
-
-	const expected2 = `<figure>
-<img src="example.jpg" /><figcaption>Caption</figcaption></figure>`;
-
-	expect( autop( content1 ).trim() ).toBe( expected1 );
-	expect( autop( content2 ).trim() ).toBe( expected2 );
-} );
-
-test( 'that autop correctly adds a start and end tag when followed by a div', () => {
-	const content =
-		'Testing autop with a div\n<div class="wp-some-class">content</div>';
-	const expected =
-		'<p>Testing autop with a div</p>\n<div class="wp-some-class">content</div>';
-
-	expect( autop( content ).trim() ).toBe( expected );
-} );
-
-describe( 'removep', () => {
-	test( 'preserves paragraphs with attributes', () => {
-		const content = '<p style="text-align: center">\nHello World\n</p>';
-		const expected = '<p style="text-align: center">\nHello World</p>';
-
-		expect( removep( content ) ).toBe( expected );
-	} );
-} );
diff --git a/packages/autop/src/test/index.test.ts b/packages/autop/src/test/index.test.ts
new file mode 100644
index 00000000000000..466aade0f25f10
--- /dev/null
+++ b/packages/autop/src/test/index.test.ts
@@ -0,0 +1,519 @@
+/**
+ * Internal dependencies
+ */
+import { autop, removep } from '../';
+
+test( 'empty string', () => {
+	expect( autop( '' ) ).toBe( '' );
+} );
+
+test( 'first post', () => {
+	const expected = `<p>Welcome to WordPress!  This post contains important information.  After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.</p>
+<p>First things first:</p>
+<ul>
+<li><a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
+</ul>
+<p>As a subscriber, you will receive an email every time an update is available (and only then).  This will make it easier to keep your site up to date, and secure from evildoers.<br />
+When a new version is released, <a href="%2$s" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.<br />
+Upgrading is a couple of clicks!</p>
+<p>Then you can start enjoying the WordPress experience:</p>
+<ul>
+<li>Edit your personal information at <a href="%3$s" title="Edit settings like your password, your display name and your contact information">Users &#8250; Your Profile</a></li>
+<li>Start publishing at <a href="%4$s" title="Create a new post">Posts &#8250; Add New</a> and at <a href="%5$s" title="Create a new page">Pages &#8250; Add New</a></li>
+<li>Browse and install plugins at <a href="%6$s" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins &#8250; Add New</a></li>
+<li>Browse and install themes at <a href="%7$s" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance &#8250; Add New Themes</a></li>
+<li>Modify and prettify your website&#8217;s links at <a href="%8$s" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings &#8250; Permalinks</a></li>
+<li>Import content from another system or WordPress site at <a href="%9$s" title="WordPress comes with importers for the most common publishing systems">Tools &#8250; Import</a></li>
+<li>Find answers to your questions at the <a href="%10$s" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
+</ul>
+<p>To keep this post for reference, <a href="%11$s" title="Click to edit the content and settings of this post">click to edit it</a>, go to the Publish box and change its Visibility from Public to Private.</p>
+<p>Thank you for selecting WordPress.  We wish you happy publishing!</p>
+<p>PS.  Not yet subscribed for update notifications?  <a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Do it now!</a></p>
+`;
+	const testData = `Welcome to WordPress!  This post contains important information.  After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.
+
+First things first:
+<ul>
+<li><a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
+</ul>
+As a subscriber, you will receive an email every time an update is available (and only then).  This will make it easier to keep your site up to date, and secure from evildoers.
+When a new version is released, <a href="%2$s" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.
+Upgrading is a couple of clicks!
+
+Then you can start enjoying the WordPress experience:
+<ul>
+<li>Edit your personal information at <a href="%3$s" title="Edit settings like your password, your display name and your contact information">Users &#8250; Your Profile</a></li>
+<li>Start publishing at <a href="%4$s" title="Create a new post">Posts &#8250; Add New</a> and at <a href="%5$s" title="Create a new page">Pages &#8250; Add New</a></li>
+<li>Browse and install plugins at <a href="%6$s" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins &#8250; Add New</a></li>
+<li>Browse and install themes at <a href="%7$s" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance &#8250; Add New Themes</a></li>
+<li>Modify and prettify your website&#8217;s links at <a href="%8$s" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings &#8250; Permalinks</a></li>
+<li>Import content from another system or WordPress site at <a href="%9$s" title="WordPress comes with importers for the most common publishing systems">Tools &#8250; Import</a></li>
+<li>Find answers to your questions at the <a href="%10$s" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
+</ul>
+To keep this post for reference, <a href="%11$s" title="Click to edit the content and settings of this post">click to edit it</a>, go to the Publish box and change its Visibility from Public to Private.
+
+Thank you for selecting WordPress.  We wish you happy publishing!
+
+PS.  Not yet subscribed for update notifications?  <a href="%1$s" title="Subscribe to the WordPress mailing list for Release Notifications">Do it now!</a>
+`;
+
+	expect( autop( testData ) ).toBe( expected );
+} );
+
+test( 'skip pre elements', () => {
+	const code = `(function(){
+
+done = 0;
+});`;
+
+	// Not wrapped in <p> tags.
+	let str = `<pre>${ code }</pre>`;
+	expect( autop( str ).trim() ).toBe( str );
+
+	// Text before/after is wrapped in <p> tags.
+	str = `Look at this code\n\n<pre>${ code }</pre>\n\nIsn't that cool?`;
+
+	// Expected text after autop.
+	let expected = `<p>Look at this code</p>\n<pre>${ code }</pre>\n<p>Isn't that cool?</p>`;
+	expect( autop( str ).trim() ).toBe( expected );
+
+	// Make sure HTML breaks are maintained if manually inserted.
+	str =
+		'Look at this code\n\n<pre>Line1<br />Line2<br>Line3<br/>Line4\nActual Line 2\nActual Line 3</pre>\n\nCool, huh?';
+	expected =
+		'<p>Look at this code</p>\n<pre>Line1<br />Line2<br>Line3<br/>Line4\nActual Line 2\nActual Line 3</pre>\n<p>Cool, huh?</p>';
+	expect( autop( str ).trim() ).toBe( expected );
+} );
+
+test( 'skip input elements', () => {
+	const str =
+		'Username: <input type="text" id="username" name="username" /><br />Password: <input type="password" id="password1" name="password1" />';
+	expect( autop( str ).trim() ).toBe( '<p>' + str + '</p>' );
+} );
+
+test( 'source_track_elements', () => {
+	const content = `Paragraph one.
+
+<video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">
+	<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />
+	<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
+	<source type="video/webm" src="myvideo.webm" />
+	<!-- Ogg/Vorbis for older Firefox and Opera versions -->
+	<source type="video/ogg" src="myvideo.ogv" />
+	<!-- Optional: Add subtitles for each language -->
+	<track kind="subtitles" src="subtitles.srt" srclang="en" />
+	<!-- Optional: Add chapters -->
+	<track kind="chapters" src="chapters.srt" srclang="en" />
+	<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a>
+</video>
+
+Paragraph two.`;
+
+	const content2 = `Paragraph one.
+
+<video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">
+
+<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />
+
+<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
+<source type="video/webm" src="myvideo.webm" />
+
+<!-- Ogg/Vorbis for older Firefox and Opera versions -->
+<source type="video/ogg" src="myvideo.ogv" />
+
+<!-- Optional: Add subtitles for each language -->
+<track kind="subtitles" src="subtitles.srt" srclang="en" />
+
+<!-- Optional: Add chapters -->
+<track kind="chapters" src="chapters.srt" srclang="en" />
+
+<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a>
+
+</video>
+
+Paragraph two.`;
+
+	const expected =
+		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
+		'<p><video class="wp-video-shortcode" id="video-0-1" width="640" height="360" preload="metadata" controls="controls">' +
+		'<source type="video/mp4" src="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4" />' +
+		'<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->' +
+		'<source type="video/webm" src="myvideo.webm" />' +
+		'<!-- Ogg/Vorbis for older Firefox and Opera versions -->' +
+		'<source type="video/ogg" src="myvideo.ogv" />' +
+		'<!-- Optional: Add subtitles for each language -->' +
+		'<track kind="subtitles" src="subtitles.srt" srclang="en" />' +
+		'<!-- Optional: Add chapters -->' +
+		'<track kind="chapters" src="chapters.srt" srclang="en" />' +
+		'<a href="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4">' +
+		'http://domain.tld/wp-content/uploads/2013/12/xyz.mp4</a></video></p>\n' +
+		'<p>Paragraph two.</p>';
+
+	// When running the content through autop() from wp_richedit_pre()
+	const shortcodeContent = `Paragraph one.
+
+[video width="720" height="480" mp4="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4"]
+<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
+<source type="video/webm" src="myvideo.webm" />
+<!-- Ogg/Vorbis for older Firefox and Opera versions -->
+<source type="video/ogg" src="myvideo.ogv" />
+<!-- Optional: Add subtitles for each language -->
+<track kind="subtitles" src="subtitles.srt" srclang="en" />
+<!-- Optional: Add chapters -->
+<track kind="chapters" src="chapters.srt" srclang="en" />
+[/video]
+
+Paragraph two.`;
+
+	const shortcodeExpected =
+		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
+		'<p>[video width="720" height="480" mp4="http://domain.tld/wp-content/uploads/2013/12/xyz.mp4"]' +
+		'<!-- WebM/VP8 for Firefox4, Opera, and Chrome --><source type="video/webm" src="myvideo.webm" />' +
+		'<!-- Ogg/Vorbis for older Firefox and Opera versions --><source type="video/ogg" src="myvideo.ogv" />' +
+		'<!-- Optional: Add subtitles for each language --><track kind="subtitles" src="subtitles.srt" srclang="en" />' +
+		'<!-- Optional: Add chapters --><track kind="chapters" src="chapters.srt" srclang="en" />' +
+		'[/video]</p>\n' +
+		'<p>Paragraph two.</p>';
+
+	expect( autop( content ).trim() ).toBe( expected );
+	expect( autop( content2 ).trim() ).toBe( expected );
+	expect( autop( shortcodeContent ).trim() ).toBe( shortcodeExpected );
+} );
+
+test( 'param embed elements', () => {
+	const content1 = `Paragraph one.
+
+<object width="400" height="224" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
+	<param name="src" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />
+	<param name="allowfullscreen" value="true" />
+	<param name="allowscriptaccess" value="always" />
+	<param name="overstretch" value="true" />
+	<param name="flashvars" value="isDynamicSeeking=true" />
+
+	<embed width="400" height="224" type="application/x-shockwave-flash" src="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" wmode="direct" seamlesstabbing="true" allowfullscreen="true" overstretch="true" flashvars="isDynamicSeeking=true" />
+</object>
+
+Paragraph two.`;
+
+	const expected1 =
+		'<p>Paragraph one.</p>\n' + // Line breaks only after <p>
+		'<p><object width="400" height="224" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">' +
+		'<param name="src" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />' +
+		'<param name="allowfullscreen" value="true" />' +
+		'<param name="allowscriptaccess" value="always" />' +
+		'<param name="overstretch" value="true" />' +
+		'<param name="flashvars" value="isDynamicSeeking=true" />' +
+		'<embed width="400" height="224" type="application/x-shockwave-flash" src="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" wmode="direct" seamlesstabbing="true" allowfullscreen="true" overstretch="true" flashvars="isDynamicSeeking=true" />' +
+		'</object></p>\n' +
+		'<p>Paragraph two.</p>';
+
+	const content2 = `Paragraph one.
+
+<div class="video-player" id="x-video-0">
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="video-0" standby="Standby text">
+<param name="movie" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />
+<param name="quality" value="best" />
+
+<param name="seamlesstabbing" value="true" />
+<param name="allowfullscreen" value="true" />
+<param name="allowscriptaccess" value="always" />
+<param name="overstretch" value="true" />
+
+<!--[if !IE]--><object type="application/x-shockwave-flash" data="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" width="640" height="360" standby="Standby text">
+<param name="quality" value="best" />
+
+<param name="seamlesstabbing" value="true" />
+<param name="allowfullscreen" value="true" />
+<param name="allowscriptaccess" value="always" />
+<param name="overstretch" value="true" />
+</object><!--<![endif]-->
+</object></div>
+
+Paragraph two.`;
+
+	const expected2 =
+		'<p>Paragraph one.</p>\n' + // Line breaks only after block tags.
+		'<div class="video-player" id="x-video-0">\n' +
+		'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="360" id="video-0" standby="Standby text">' +
+		'<param name="movie" value="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" />' +
+		'<param name="quality" value="best" />' +
+		'<param name="seamlesstabbing" value="true" />' +
+		'<param name="allowfullscreen" value="true" />' +
+		'<param name="allowscriptaccess" value="always" />' +
+		'<param name="overstretch" value="true" />' +
+		'<!--[if !IE]--><object type="application/x-shockwave-flash" data="http://domain.tld/wp-content/uploads/2013/12/xyz.swf" width="640" height="360" standby="Standby text">' +
+		'<param name="quality" value="best" />' +
+		'<param name="seamlesstabbing" value="true" />' +
+		'<param name="allowfullscreen" value="true" />' +
+		'<param name="allowscriptaccess" value="always" />' +
+		'<param name="overstretch" value="true" /></object><!--<![endif]-->' +
+		'</object></div>\n' +
+		'<p>Paragraph two.</p>';
+
+	expect( autop( content1 ).trim() ).toBe( expected1 );
+	expect( autop( content2 ).trim() ).toBe( expected2 );
+} );
+
+test( 'skip select option elements', () => {
+	const str =
+		'Country: <select id="state" name="state"><option value="1">Alabama</option><option value="2">Alaska</option><option value="3">Arizona</option><option value="4">Arkansas</option><option value="5">California</option></select>';
+
+	expect( autop( str ).trim() ).toBe( '<p>' + str + '</p>' );
+} );
+
+test( 'that_autop_treats_block_level_elements_as_blocks', () => {
+	const blocks = [
+		'table',
+		'thead',
+		'tfoot',
+		'caption',
+		'col',
+		'colgroup',
+		'tbody',
+		'tr',
+		'td',
+		'th',
+		'div',
+		'dl',
+		'dd',
+		'dt',
+		'ul',
+		'ol',
+		'li',
+		'pre',
+		'form',
+		'map',
+		'area',
+		'address',
+		'math',
+		'style',
+		'p',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'hr',
+		'fieldset',
+		'legend',
+		'section',
+		'article',
+		'aside',
+		'hgroup',
+		'header',
+		'footer',
+		'nav',
+		'figure',
+		'details',
+		'menu',
+		'summary',
+	];
+
+	// Check whitespace normalization.
+	let content: string[] = [];
+
+	blocks.forEach( ( block ) => {
+		content.push( `<${ block }>foo</${ block }>` );
+	} );
+
+	let expected = content.join( '\n' );
+	let input = content.join( '\n\n' ); // WS difference.
+
+	expect( autop( input ).trim() ).toBe( expected );
+
+	input = content.join( '' ); // WS difference.
+
+	expect( autop( input ).trim() ).toBe( expected );
+
+	// Check whitespace addition.
+	content = [];
+
+	blocks.forEach( ( block ) => {
+		content.push( `<${ block }/>` );
+	} );
+
+	expected = content.join( '\n' );
+	input = content.join( '' );
+
+	expect( autop( input ).trim() ).toBe( expected );
+
+	// Check whitespace addition with attributes.
+	content = [];
+
+	blocks.forEach( ( block ) => {
+		content.push( `<${ block } attr='value'>foo</${ block }>` );
+	} );
+
+	expected = content.join( '\n' );
+	input = content.join( '' );
+
+	expect( autop( input ).trim() ).toBe( expected );
+} );
+
+test( 'autop does not wrap blockquotes but does autop their contents', () => {
+	const content = '<blockquote>foo</blockquote>';
+	const expected = '<blockquote><p>foo</p></blockquote>';
+
+	expect( autop( content ).trim() ).toBe( expected );
+} );
+
+test( 'that autop treats inline elements as inline', () => {
+	const inlines = [
+		'a',
+		'em',
+		'strong',
+		'small',
+		's',
+		'cite',
+		'q',
+		'dfn',
+		'abbr',
+		'data',
+		'time',
+		'code',
+		'var',
+		'samp',
+		'kbd',
+		'sub',
+		'sup',
+		'i',
+		'b',
+		'u',
+		'mark',
+		'span',
+		'del',
+		'ins',
+		'noscript',
+		'select',
+	];
+
+	const content: string[] = [];
+	const expected: string[] = [];
+
+	inlines.forEach( ( inline ) => {
+		content.push( `<${ inline }>foo</${ inline }>` );
+		expected.push( `<p><${ inline }>foo</${ inline }></p>` );
+	} );
+
+	const contentString = content.join( '\n\n' );
+	const expectedString = expected.join( '\n' );
+
+	expect( autop( contentString ).trim() ).toBe( expectedString );
+} );
+
+test( 'element sanity', () => {
+	[
+		[ 'Hello <a\nhref="world">', '<p>Hello <a\nhref="world"></p>\n' ],
+		[
+			'Hello <!-- a\nhref="world" -->',
+			'<p>Hello <!-- a\nhref="world" --></p>\n',
+		],
+		[
+			'Hello <!-- <object>\n<param>\n<param>\n<embed>\n</embed>\n</object>\n -->',
+			'<p>Hello <!-- <object>\n<param>\n<param>\n<embed>\n</embed>\n</object>\n --></p>\n',
+		],
+		[
+			'Hello <!-- <object>\n<param/>\n<param/>\n<embed>\n</embed>\n</object>\n -->',
+			'<p>Hello <!-- <object>\n<param/>\n<param/>\n<embed>\n</embed>\n</object>\n --></p>\n',
+		],
+		/* Block elements inside comments will fail this test in all versions, it's not a regression.
+		[
+			'Hello <!-- <hr> a\nhref='world' -->',
+			'<p>Hello <!-- <hr> a\nhref='world' --></p>\n',
+		],
+		[
+			'Hello <![CDATA[ <hr> a\nhttps://youtu.be/jgz0uSaOZbE\n ]]>',
+			'<p>Hello <![CDATA[ <hr> a\nhttps://youtu.be/jgz0uSaOZbE\n ]]></p>\n',
+		],
+		*/
+		[
+			'Hello <![CDATA[ a\nhttps://youtu.be/jgz0uSaOZbE\n ]]>',
+			'<p>Hello <![CDATA[ a\nhttps://youtu.be/jgz0uSaOZbE\n ]]></p>\n',
+		],
+		[
+			'Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 ]]> -->',
+			'<p>Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 ]]> --></p>\n',
+		],
+		[
+			'Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 --> a\n9 ]]>',
+			'<p>Hello <![CDATA[ <!-- a\nhttps://youtu.be/jgz0uSaOZbE\n a\n9 --> a\n9 ]]></p>\n',
+		],
+	].forEach( ( [ input, output ] ) => {
+		expect( autop( input ) ).toBe( output );
+	} );
+} );
+
+test( 'that autop skips line breaks after br', () => {
+	const content = `
+line 1<br>
+line 2<br/>
+line 3<br />
+line 4
+line 5
+`;
+
+	const expected = `<p>line 1<br />
+line 2<br />
+line 3<br />
+line 4<br />
+line 5</p>`;
+
+	expect( autop( content ).trim() ).toBe( expected );
+} );
+
+test( 'that autop adds a paragraph after multiple br', () => {
+	const content = `
+line 1<br>
+<br/>
+line 2<br/>
+<br />
+`;
+
+	const expected = `<p>line 1</p>
+<p>line 2</p>`;
+
+	expect( autop( content ).trim() ).toBe( expected );
+} );
+
+test( 'that text before blocks is peed', () => {
+	const content = 'a<div>b</div>';
+	const expected = '<p>a</p>\n<div>b</div>';
+
+	expect( autop( content ).trim() ).toBe( expected );
+} );
+
+test( 'that autop doses not add extra closing p in figure', () => {
+	const content1 =
+		'<figure><img src="example.jpg" /><figcaption>Caption</figcaption></figure>';
+	const expected1 = content1;
+
+	const content2 = `<figure>
+<img src="example.jpg" />
+<figcaption>Caption</figcaption>
+</figure>`;
+
+	const expected2 = `<figure>
+<img src="example.jpg" /><figcaption>Caption</figcaption></figure>`;
+
+	expect( autop( content1 ).trim() ).toBe( expected1 );
+	expect( autop( content2 ).trim() ).toBe( expected2 );
+} );
+
+test( 'that autop correctly adds a start and end tag when followed by a div', () => {
+	const content =
+		'Testing autop with a div\n<div class="wp-some-class">content</div>';
+	const expected =
+		'<p>Testing autop with a div</p>\n<div class="wp-some-class">content</div>';
+
+	expect( autop( content ).trim() ).toBe( expected );
+} );
+
+describe( 'removep', () => {
+	test( 'preserves paragraphs with attributes', () => {
+		const content = '<p style="text-align: center">\nHello World\n</p>';
+		const expected = '<p style="text-align: center">\nHello World</p>';
+
+		expect( removep( content ) ).toBe( expected );
+	} );
+} );
diff --git a/packages/autop/tsconfig.json b/packages/autop/tsconfig.json
index 1a0a90bc8cb582..a09ec7466c435b 100644
--- a/packages/autop/tsconfig.json
+++ b/packages/autop/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/babel-plugin-import-jsx-pragma/.npmrc b/packages/babel-plugin-import-jsx-pragma/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/babel-plugin-import-jsx-pragma/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index 6ae6a0704298f5..b7030c3e4140a7 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.41.0 (2024-05-16)
+
+## 4.40.0 (2024-05-02)
+
+## 4.39.0 (2024-04-19)
+
+## 4.38.0 (2024-04-03)
+
+## 4.37.0 (2024-03-21)
+
+## 4.36.0 (2024-03-06)
+
+## 4.35.0 (2024-02-21)
+
+## 4.34.0 (2024-02-09)
+
+## 4.33.0 (2024-01-24)
+
+## 4.32.0 (2024-01-10)
+
+## 4.31.0 (2023-12-13)
+
+## 4.30.0 (2023-11-29)
+
+## 4.29.0 (2023-11-16)
+
+## 4.28.0 (2023-11-02)
+
+## 4.27.0 (2023-10-18)
+
+## 4.26.0 (2023-10-05)
+
+## 4.25.0 (2023-09-20)
+
+## 4.24.0 (2023-08-31)
+
+## 4.23.0 (2023-08-16)
+
+## 4.22.0 (2023-08-10)
+
+## 4.21.0 (2023-07-20)
+
+## 4.20.0 (2023-07-05)
+
+## 4.19.0 (2023-06-23)
+
+## 4.18.0 (2023-06-07)
+
+## 4.17.0 (2023-05-24)
+
+## 4.16.0 (2023-05-10)
+
+## 4.15.0 (2023-04-26)
+
+## 4.14.0 (2023-04-12)
+
+## 4.13.0 (2023-03-29)
+
+## 4.12.0 (2023-03-15)
+
+## 4.11.0 (2023-03-01)
+
+## 4.10.0 (2023-02-15)
+
+## 4.9.0 (2023-02-01)
+
+## 4.8.0 (2023-01-11)
+
+## 4.7.0 (2023-01-02)
+
+## 4.6.0 (2022-12-14)
+
 ## 4.5.0 (2022-11-16)
 
 ## 4.4.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 4.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -26,22 +130,22 @@
 
 ## 2.2.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Add Fragment import handling ([#15120](https://github.com/WordPress/gutenberg/pull/15120)).
 
 ## 2.0.0 (2019-03-06)
 
-### Breaking Change
+### Breaking Changes
 
 -   Stop using Babel transpilation internally and set node 8 as a minimal version required ([#13540](https://github.com/WordPress/gutenberg/pull/13540)).
 
-### Enhancement
+### Enhancements
 
 -   Plugin skips now adding import JSX pragma when the scope variable is defined for all JSX elements ([#13809](https://github.com/WordPress/gutenberg/pull/13809)).
 
 ## 1.1.0 (2018-09-05)
 
-### New Feature
+### New Features
 
 -   Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).
diff --git a/packages/babel-plugin-import-jsx-pragma/README.md b/packages/babel-plugin-import-jsx-pragma/README.md
index 5edb4d357ae27e..ebc260277b21ab 100644
--- a/packages/babel-plugin-import-jsx-pragma/README.md
+++ b/packages/babel-plugin-import-jsx-pragma/README.md
@@ -14,7 +14,7 @@ Install the module to your project using [npm](https://www.npmjs.com/).
 npm install @wordpress/babel-plugin-import-jsx-pragma
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
@@ -38,7 +38,7 @@ _Note:_ `@wordpress/babel-plugin-import-jsx-pragma` is included in `@wordpress/b
 
 As the `@babel/plugin-transform-react-jsx` plugin offers options to customize the `pragma` to which the transform references, there are equivalent options to assign for customizing the imports generated.
 
-For example, if you are using the `@wordpress/element` package, you may want to use the following configuration:
+For example, if you are using the `react` package, you may want to use the following configuration:
 
 ```js
 // .babelrc.js
@@ -49,7 +49,7 @@ module.exports = {
 			{
 				scopeVariable: 'createElement',
 				scopeVariableFrag: 'Fragment',
-				source: '@wordpress/element',
+				source: 'react',
 				isDefault: false,
 			},
 		],
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 7e1b45f2015bf0..33244b4e7efb30 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "4.5.0",
+	"version": "5.13.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,14 +24,15 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
 	],
 	"main": "index.js",
 	"peerDependencies": {
-		"@babel/core": "^7.12.9"
+		"@babel/core": "^7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/babel-plugin-import-jsx-pragma/test/index.js b/packages/babel-plugin-import-jsx-pragma/test/index.js
index bcd915f1b5dad1..7125aa3995538f 100644
--- a/packages/babel-plugin-import-jsx-pragma/test/index.js
+++ b/packages/babel-plugin-import-jsx-pragma/test/index.js
@@ -24,8 +24,7 @@ describe( 'babel-plugin-import-jsx-pragma', () => {
 	} );
 
 	it( 'does nothing if the scope variable is already defined', () => {
-		const original =
-			'const React = require("react");\n\nlet foo = <bar />;';
+		const original = 'const React = require("react");\nlet foo = <bar />;';
 		const string = getTransformedCode( original );
 
 		expect( string ).toBe( original );
@@ -60,7 +59,7 @@ describe( 'babel-plugin-import-jsx-pragma', () => {
 
 	it( 'adds import for scope variable even when defined inside the local scope', () => {
 		const original =
-			'let foo = <bar />;\n\nfunction local() {\n  const createElement = wp.element.createElement;\n}';
+			'let foo = <bar />;\nfunction local() {\n  const createElement = wp.element.createElement;\n}';
 		const string = getTransformedCode( original, {
 			scopeVariable: 'createElement',
 			source: '@wordpress/element',
diff --git a/packages/babel-plugin-makepot/.npmrc b/packages/babel-plugin-makepot/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/babel-plugin-makepot/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index f143633277f148..00efceb28c075d 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.42.0 (2024-05-16)
+
+## 5.41.0 (2024-05-02)
+
+## 5.40.0 (2024-04-19)
+
+## 5.39.0 (2024-04-03)
+
+## 5.38.0 (2024-03-21)
+
+## 5.37.0 (2024-03-06)
+
+## 5.36.0 (2024-02-21)
+
+## 5.35.0 (2024-02-09)
+
+## 5.34.0 (2024-01-24)
+
+## 5.33.0 (2024-01-10)
+
+## 5.32.0 (2023-12-13)
+
+## 5.31.0 (2023-11-29)
+
+## 5.30.0 (2023-11-16)
+
+## 5.29.0 (2023-11-02)
+
+## 5.28.0 (2023-10-18)
+
+## 5.27.0 (2023-10-05)
+
+## 5.26.0 (2023-09-20)
+
+## 5.25.0 (2023-08-31)
+
+## 5.24.0 (2023-08-16)
+
+## 5.23.0 (2023-08-10)
+
+## 5.22.0 (2023-07-20)
+
+## 5.21.0 (2023-07-05)
+
+## 5.20.0 (2023-06-23)
+
+## 5.19.0 (2023-06-07)
+
+## 5.18.0 (2023-05-24)
+
+## 5.17.0 (2023-05-10)
+
+## 5.16.0 (2023-04-26)
+
+## 5.15.0 (2023-04-12)
+
+## 5.14.0 (2023-03-29)
+
+## 5.13.0 (2023-03-15)
+
+## 5.12.0 (2023-03-01)
+
+### Internal
+
+-   Lodash: Refactor away from `_.merge()` and remove Lodash dependency ([#48239](https://github.com/WordPress/gutenberg/pull/48239)).
+
+## 5.11.0 (2023-02-15)
+
+## 5.10.0 (2023-02-01)
+
+## 5.9.0 (2023-01-11)
+
+## 5.8.0 (2023-01-02)
+
+## 5.7.0 (2022-12-14)
+
 ## 5.6.0 (2022-11-16)
 
 ## 5.5.0 (2022-11-02)
@@ -14,13 +122,13 @@
 
 ## 5.1.0 (2022-09-13)
 
-### Bug Fix
+### Bug Fixes
 
 -   Makepot: Fix translations object handling ([#43797](https://github.com/WordPress/gutenberg/pull/43797)).
 
 ## 5.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -32,20 +140,20 @@
 
 ## 2.2.0 (2019-03-06)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed Babel plugin for POT file generation to properly handle plural numbers specified in the passed header. ([#13577](https://github.com/WordPress/gutenberg/pull/13577))
 -   Fix extracted translator comments to be written as prefixed by `#.` ([#9440](https://github.com/WordPress/gutenberg/pull/9440))
 
 ## 2.1.0 (2018-09-05)
 
-### New Feature
+### New Features
 
 -   Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).
 
 ## 2.0.0 (2018-07-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Updated code to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -55,6 +163,6 @@
 
 ## 1.0.1 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/babel-plugin-makepot/README.md b/packages/babel-plugin-makepot/README.md
index 95f52e55d28f52..3824731e72d848 100644
--- a/packages/babel-plugin-makepot/README.md
+++ b/packages/babel-plugin-makepot/README.md
@@ -21,7 +21,7 @@ Install the module:
 npm install @wordpress/babel-plugin-makepot --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/babel-plugin-makepot/index.js b/packages/babel-plugin-makepot/index.js
index 3dc1b3ed26651d..0ae8a763d03359 100644
--- a/packages/babel-plugin-makepot/index.js
+++ b/packages/babel-plugin-makepot/index.js
@@ -32,8 +32,9 @@
  * External dependencies
  */
 
+const deepmerge = require( 'deepmerge' );
+const { isPlainObject } = require( 'is-plain-object' );
 const { po } = require( 'gettext-parser' );
-const { pick, isEqual, merge, isEmpty } = require( 'lodash' );
 const { relative, sep } = require( 'path' );
 const { writeFileSync } = require( 'fs' );
 
@@ -110,7 +111,7 @@ function getNodeAsString( node ) {
  * @param {number} _originalNodeLine Private: In recursion, line number of
  *                                   the original node passed.
  *
- * @return {?string} Extracted comment.
+ * @return {string | undefined} Extracted comment.
  */
 function getExtractedComment( path, _originalNodeLine ) {
 	const { node, parent, parentPath } = path;
@@ -182,10 +183,7 @@ function isValidTranslationKey( key ) {
  * @return {boolean} Whether valid translation keys match.
  */
 function isSameTranslation( a, b ) {
-	return isEqual(
-		pick( a, VALID_TRANSLATION_KEYS ),
-		pick( b, VALID_TRANSLATION_KEYS )
-	);
+	return VALID_TRANSLATION_KEYS.every( ( key ) => a[ key ] === b[ key ] );
 }
 
 /**
@@ -315,7 +313,10 @@ module.exports = () => {
 				},
 				exit( path, state ) {
 					const { filename } = this.file.opts;
-					if ( isEmpty( strings[ filename ] ) ) {
+					if (
+						! strings[ filename ] ||
+						! Object.values( strings[ filename ] ).length
+					) {
 						delete strings[ filename ];
 						return;
 					}
@@ -341,7 +342,7 @@ module.exports = () => {
 								if (
 									isSameTranslation(
 										translation,
-										memo[ msgctxt ][ msgid ]
+										memo[ msgctxt ][ msgid ] ?? {}
 									)
 								) {
 									translation.comments.reference = [
@@ -365,7 +366,13 @@ module.exports = () => {
 					}, {} );
 
 					// Merge translations from individual files into headers
-					const data = merge( {}, baseData, { translations } );
+					const data = deepmerge(
+						baseData,
+						{ translations },
+						{
+							isMergeableObject: isPlainObject,
+						}
+					);
 
 					// Ideally we could wait until Babel has finished parsing
 					// all files or at least asynchronously write, but the
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index 65e30b3e499c10..33d301545c4685 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "5.6.0",
+	"version": "6.13.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,18 +21,20 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
 	],
 	"main": "index.js",
 	"dependencies": {
+		"deepmerge": "^4.3.0",
 		"gettext-parser": "^1.3.1",
-		"lodash": "^4.17.21"
+		"is-plain-object": "^5.0.0"
 	},
 	"peerDependencies": {
-		"@babel/core": "^7.12.9"
+		"@babel/core": "^7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/babel-preset-default/.npmrc b/packages/babel-preset-default/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/babel-preset-default/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 736d1b027f43f2..4f5ef33b51298b 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,146 @@
 
 ## Unreleased
 
+## 8.13.0 (2024-11-27)
+
+## 8.12.0 (2024-11-16)
+
+## 8.11.0 (2024-10-30)
+
+## 8.10.0 (2024-10-16)
+
+### Enhancements
+
+-   The bundled `@babel/core` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+-   The bundled `@babel/plugin-transform-react-jsx` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+-   The bundled `@babel/plugin-transform-runtime` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+-   The bundled `@babel/preset-env` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+-   The bundled `@babel/preset-typescript` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+-   The bundled `@babel/runtime` dependency has been updated from requiring `^7.16.0` to requiring `7.25.7` ([#36244](https://github.com/WordPress/gutenberg/pull/36244)).
+
+## 8.9.0 (2024-10-03)
+
+### Bug Fixes
+
+-   Fix a bug in 8.8.1 due to missing files in the published package ([#65481](https://github.com/WordPress/gutenberg/pull/65481)).
+
+## 8.8.0 (2024-09-19)
+
+### Internal
+
+-   Added `addPolyfillComments` option. When used, it will automatically add magic comments to mark files that need `wp-polyfill` ([#65292](https://github.com/WordPress/gutenberg/pull/65292)).
+
+## 8.7.0 (2024-09-05)
+
+## 8.6.0 (2024-08-21)
+
+## 8.5.0 (2024-08-07)
+
+## 8.4.0 (2024-07-24)
+
+## 8.3.0 (2024-07-10)
+
+## 8.2.0 (2024-06-26)
+
+## 8.1.0 (2024-06-15)
+
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/babel-preset-default@7.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.42.0 (2024-05-16)
+
+## 7.41.0 (2024-05-02)
+
+## 7.40.0 (2024-04-19)
+
+## 7.39.0 (2024-04-03)
+
+## 7.38.0 (2024-03-21)
+
+## 7.37.0 (2024-03-06)
+
+## 7.36.0 (2024-02-21)
+
+## 7.35.0 (2024-02-09)
+
+## 7.34.0 (2024-01-24)
+
+## 7.33.0 (2024-01-10)
+
+## 7.32.0 (2023-12-13)
+
+## 7.31.0 (2023-11-29)
+
+## 7.30.0 (2023-11-16)
+
+## 7.29.0 (2023-11-02)
+
+## 7.28.0 (2023-10-18)
+
+## 7.27.0 (2023-10-05)
+
+### Internal
+
+-   The bundled `browserslist` dependency has been updated from requiring `^4.21.9` to requiring `^4.21.10` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+
+### Enhancements
+
+-   Use `react` as the default scope variable for JSX pragma instead of `@wordpress/element`.
+
+## 7.26.0 (2023-09-20)
+
+## 7.25.0 (2023-08-31)
+
+## 7.24.0 (2023-08-16)
+
+## 7.23.0 (2023-08-10)
+
+## 7.22.0 (2023-07-20)
+
+## 7.21.0 (2023-07-05)
+
+## 7.20.0 (2023-06-23)
+
+## 7.19.0 (2023-06-07)
+
+### Enhancements
+
+-   Enable the `bugfixes` option in `@babel/preset-env` to remove unneeded transpilation ([#50994](https://github.com/WordPress/gutenberg/pull/50994)).
+
+## 7.18.0 (2023-05-24)
+
+## 7.17.0 (2023-05-10)
+
+## 7.16.0 (2023-04-26)
+
+## 7.15.0 (2023-04-12)
+
+## 7.14.0 (2023-03-29)
+
+### Enhancements
+
+-   Exclude IE-only `setImmediate`/`clearImmediate` from list of polyfills.
+
+## 7.13.0 (2023-03-15)
+
+## 7.12.0 (2023-03-01)
+
+## 7.11.0 (2023-02-15)
+
+## 7.10.0 (2023-02-01)
+
+## 7.9.0 (2023-01-11)
+
+## 7.8.0 (2023-01-02)
+
+## 7.7.0 (2022-12-14)
+
 ## 7.6.0 (2022-11-16)
 
 ## 7.5.0 (2022-11-02)
@@ -14,7 +154,7 @@
 
 ## 7.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -33,7 +173,7 @@
 
 ## 6.2.0 (2021-05-31)
 
-### New Feature
+### New Features
 
 -   New `build/polyfill.js` (minified version – `build/polyfill.min.js`) file is available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project. It's a drop-in replacement for the deprecated `@babel/polyfill` package ([#31279](https://github.com/WordPress/gutenberg/pull/31279)).
 
@@ -96,7 +236,7 @@
 
 ## 4.10.0 (2020-02-04)
 
-### New Feature
+### New Features
 
 -   The bundled `@babel/core` dependency has been updated from requiring `^7.4.4` to requiring `^7.8.3`. All other Babel plugins were updated to the latest version. `@babel/preset-env` has now ESMAScript 2020 support enabled by default (see [Highlights](https://babeljs.io/blog/2020/01/11/7.8.0#highlights)).
 
@@ -127,25 +267,25 @@
 -   Removed `babel-core` dependency acting as Babel 7 bridge ([#13922](https://github.com/WordPress/gutenberg/pull/13922). Ensure all references to `babel-core` are replaced with `@babel/core` .
 -   Preset updated to include `@wordpress/babel-plugin-import-jsx-pragma` plugin integration ([#13540](https://github.com/WordPress/gutenberg/pull/13540)). It should no longer be explicitly included in your Babel config.
 
-### Bug Fix
+### Bug Fixes
 
 -   The runtime transform no longer disables [the `regenerator` option](https://babeljs.io/docs/en/babel-plugin-transform-runtime#regenerator). This should resolve issues where a file generated using the preset would assume the presence of a `regeneratorRuntime` object in the global scope. While this is not considered a breaking change, you may be mindful to consider that with transformed output now explicitly importing the runtime regenerator, bundle sizes may increase if you do not otherwise mitigate the additional import by either (a) overriding the option in your own Babel configuration extensions or (b) redefining the resolved value of `@babel/runtime/regenerator` using a feature like [Webpack's `externals` option](https://webpack.js.org/configuration/externals/).
 
 ## 3.0.0 (2018-09-30)
 
-### Breaking Change
+### Breaking Changes
 
 -   The configured `@babel/preset-env` preset will no longer pass `useBuiltIns: 'usage'` as an option. It is therefore expected that a polyfill serve in its place, if necessary.
 
 ## 2.1.0 (2018-09-05)
 
-### New Feature
+### New Features
 
 -   Plugin updated to work with the stable version of Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).
 
 ## 2.0.0 (2018-07-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Updated code to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -155,12 +295,12 @@
 
 ## 1.3.0 (2018-05-22)
 
-### New Feature
+### New Features
 
 -   Added support for async generator functions ([#126](https://github.com/WordPress/packages/pull/126))
 
 ## 1.2.1 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md
index ff98eb4e526e7f..de2e417d80e1e7 100644
--- a/packages/babel-preset-default/README.md
+++ b/packages/babel-preset-default/README.md
@@ -2,7 +2,7 @@
 
 Default [Babel](https://babeljs.io/) preset for WordPress development.
 
-The preset includes configuration which enable language features and syntax extensions targeted for support by WordPress. This includes [ECMAScript proposals](https://github.com/tc39/proposals) which have reached [Stage 4 ("Finished")](https://tc39.es/process-document/), as well as the [JSX syntax extension](https://reactjs.org/docs/introducing-jsx.html). For more information, refer to the [JavaScript Coding Guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/coding-guidelines.md#javascript).
+The preset includes configuration which enable language features and syntax extensions targeted for support by WordPress. This includes [ECMAScript proposals](https://github.com/tc39/proposals) which have reached [Stage 4 ("Finished")](https://tc39.es/process-document/), as well as the [JSX syntax extension](https://react.dev/learn/writing-markup-with-jsx). For more information, refer to the [JavaScript Coding Guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/coding-guidelines.md#javascript).
 
 ## Installation
 
@@ -12,7 +12,7 @@ Install the module
 npm install @wordpress/babel-preset-default --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Usage
 
@@ -35,7 +35,7 @@ For example, if you'd like to use a new language feature proposal which has not
 ```json
 {
 	"presets": [ "@wordpress/babel-preset-default" ],
-	"plugins": [ "@babel/plugin-proposal-class-properties" ]
+	"plugins": [ "@babel/plugin-transform-class-properties" ]
 }
 ```
 
@@ -43,7 +43,7 @@ For example, if you'd like to use a new language feature proposal which has not
 
 There is a complementary `build/polyfill.js` (minified version – `build/polyfill.min.js`) file available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project ([#31279](https://github.com/WordPress/gutenberg/pull/31279)). It's a drop-in replacement for the deprecated `@babel/polyfill` package, and it's also based on [`core-js`](https://github.com/zloirock/core-js) project.
 
-This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a `<script>` before it.
+This needs to be included in some cases, if the features being used require polyfills. You can either prepend it to your compiled code or include it in a `<script>` before it.
 
 #### TC39 Proposals
 
diff --git a/packages/babel-preset-default/bin/index.js b/packages/babel-preset-default/bin/index.js
index 594ae4744a8a34..041ab0143a5ae4 100755
--- a/packages/babel-preset-default/bin/index.js
+++ b/packages/babel-preset-default/bin/index.js
@@ -4,28 +4,30 @@
  * External dependencies
  */
 const builder = require( 'core-js-builder' );
-const { minify } = require( 'uglify-js' );
+const { minify } = require( 'terser' );
 const { writeFile } = require( 'fs' ).promises;
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( '../polyfill-exclusions' );
+
 builder( {
-	modules: [ 'es', 'web' ],
-	// core-js is extremely conservative in which polyfills to include.
-	// Knowing about tiny browser implementation bugs that anyone rarely cares about,
-	// we prevent some features from having the full polyfill included.
-	// @see https://github.com/WordPress/gutenberg/pull/31279
-	exclude: [ 'es.promise' ],
+	modules: [ 'es.', 'web.' ],
+	exclude: exclusions,
+	summary: { console: { size: true, modules: true } },
 	targets: require( '@wordpress/browserslist-config' ),
 	filename: './build/polyfill.js',
 } )
-	.then( async ( code ) => {
-		const output = minify( code, {
+	.then( ( code ) =>
+		minify( code, {
 			output: {
 				comments: ( node, comment ) =>
-					comment.value.indexOf( 'License' ) >= 0,
+					comment.value.toLowerCase().includes( 'license' ),
 			},
-		} );
-		await writeFile( './build/polyfill.min.js', output.code );
-	} )
+		} )
+	)
+	.then( ( output ) => writeFile( './build/polyfill.min.js', output.code ) )
 	.catch( ( error ) => {
 		// eslint-disable-next-line no-console
 		console.log( error );
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index dec587d4f31224..468c2cce812f69 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -3,6 +3,12 @@
  */
 const browserslist = require( 'browserslist' );
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( './polyfill-exclusions' );
+const replacePolyfills = require( './replace-polyfills' );
+
 module.exports = ( api ) => {
 	let wpBuildOpts = {};
 	const isWPBuild = ( name ) =>
@@ -22,10 +28,18 @@ module.exports = ( api ) => {
 
 	const getPresetEnv = () => {
 		const opts = {
+			bugfixes: true,
 			include: [
 				'proposal-nullish-coalescing-operator',
 				'proposal-logical-assignment-operators',
 			],
+			...( wpBuildOpts.addPolyfillComments
+				? {
+						useBuiltIns: 'usage',
+						exclude: exclusions,
+						corejs: require( 'core-js/package.json' ).version,
+				  }
+				: {} ),
 		};
 
 		if ( isTestEnv ) {
@@ -74,23 +88,14 @@ module.exports = ( api ) => {
 		],
 		plugins: [
 			require.resolve( '@wordpress/warning/babel-plugin' ),
-			[
-				require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
-				{
-					scopeVariable: 'createElement',
-					scopeVariableFrag: 'Fragment',
-					source: '@wordpress/element',
-					isDefault: false,
-				},
-			],
 			[
 				require.resolve( '@babel/plugin-transform-react-jsx' ),
 				{
-					pragma: 'createElement',
-					pragmaFrag: 'Fragment',
+					runtime: 'automatic',
 				},
 			],
 			maybeGetPluginTransformRuntime(),
+			wpBuildOpts.addPolyfillComments && replacePolyfills,
 		].filter( Boolean ),
 	};
 };
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 0aa59ba1a399b2..afe1025d604a86 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "7.6.0",
+	"version": "8.13.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,26 +21,28 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
-		"index.js"
+		"index.js",
+		"polyfill-exclusions.js",
+		"replace-polyfills.js"
 	],
 	"main": "index.js",
 	"dependencies": {
-		"@babel/core": "^7.16.0",
-		"@babel/plugin-transform-react-jsx": "^7.16.0",
-		"@babel/plugin-transform-runtime": "^7.16.0",
-		"@babel/preset-env": "^7.16.0",
-		"@babel/preset-typescript": "^7.16.0",
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
-		"@wordpress/browserslist-config": "file:../browserslist-config",
-		"@wordpress/element": "file:../element",
-		"@wordpress/warning": "file:../warning",
-		"browserslist": "^4.17.6",
-		"core-js": "^3.19.1"
+		"@babel/core": "7.25.7",
+		"@babel/plugin-transform-react-jsx": "7.25.7",
+		"@babel/plugin-transform-runtime": "7.25.7",
+		"@babel/preset-env": "7.25.7",
+		"@babel/preset-typescript": "7.25.7",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/browserslist-config": "*",
+		"@wordpress/warning": "*",
+		"browserslist": "^4.21.10",
+		"core-js": "^3.31.0",
+		"react": "^18.3.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/babel-preset-default/polyfill-exclusions.js b/packages/babel-preset-default/polyfill-exclusions.js
new file mode 100644
index 00000000000000..ca8c045d124146
--- /dev/null
+++ b/packages/babel-preset-default/polyfill-exclusions.js
@@ -0,0 +1,31 @@
+module.exports = [
+	// Ignore excessively strict polyfilling of `Array.prototype.push` to work
+	// around an obscure bug involving non-writable arrays.
+	// See https://issues.chromium.org/issues/42202623 for the details of the
+	// bug that leads to the polyfilling, and which we are choosing to ignore.
+	'es.array.push',
+	// This is an IE-only feature which we don't use, and don't want to polyfill.
+	// @see https://github.com/WordPress/gutenberg/pull/49234
+	'web.immediate',
+	// Remove Set feature polyfills.
+	//
+	// The Babel/core-js integration has a severe limitation, in that any Set
+	// objects (e.g. `new Set()`) are assumed to need all instance methods, and
+	// get them all polyfilled. There is no validation as to whether those
+	// methods are actually in use.
+	//
+	// This limitation causes a number of packages to unnecessarily get a
+	// dependency on `wp-polyfill`, which in most cases gets loaded as part of
+	// the critical path and can thus have an impact on performance.
+	//
+	// There is no good solution to this, and the one we've opted for here is
+	// to disable polyfilling these features entirely. Developers will need to
+	// take care not to use them in scenarios where the code may be running in
+	// older browsers without native support for them.
+	//
+	// These need to be specified as both `es.` and `esnext.` due to the way
+	// internal dependencies are set up in Babel / core-js.
+	//
+	// @see https://github.com/WordPress/gutenberg/pull/67230
+	/^es(next)?\.set\./,
+];
diff --git a/packages/babel-preset-default/replace-polyfills.js b/packages/babel-preset-default/replace-polyfills.js
new file mode 100644
index 00000000000000..a3a68cc5f84e90
--- /dev/null
+++ b/packages/babel-preset-default/replace-polyfills.js
@@ -0,0 +1,59 @@
+// Babel plugin that looks for `core-js` imports (or requires)
+// and replaces them with magic comments to mark the file as
+// depending on wp-polyfill.
+function replacePolyfills() {
+	return {
+		pre() {
+			this.hasAddedPolyfills = false;
+		},
+		visitor: {
+			Program: {
+				exit( path ) {
+					if ( this.hasAddedPolyfills ) {
+						// Add magic comment to top of file.
+						path.addComment( 'leading', ' wp:polyfill ' );
+					}
+				},
+			},
+			// Handle `import` syntax.
+			ImportDeclaration( path ) {
+				const source = path?.node?.source;
+				const name = source?.value || '';
+
+				// Look for imports from `core-js`.
+				if ( name.startsWith( 'core-js/' ) ) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+
+			// Handle `require` syntax.
+			CallExpression( path ) {
+				const callee = path?.node?.callee;
+				const arg = path?.node?.arguments[ 0 ];
+
+				if (
+					! callee ||
+					! arg ||
+					callee.type !== 'Identifier' ||
+					callee.name !== 'require'
+				) {
+					return;
+				}
+
+				// Look for requires for `core-js`.
+				if (
+					arg.type === 'StringLiteral' &&
+					arg.value.startsWith( 'core-js/' )
+				) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+		},
+	};
+}
+
+module.exports = replacePolyfills;
diff --git a/packages/babel-preset-default/test/__snapshots__/index.js.snap b/packages/babel-preset-default/test/__snapshots__/index.js.snap
index 249a42b95537cd..7da998d35cdd3e 100644
--- a/packages/babel-preset-default/test/__snapshots__/index.js.snap
+++ b/packages/babel-preset-default/test/__snapshots__/index.js.snap
@@ -6,7 +6,6 @@ exports[`Babel preset default transpilation works properly 1`] = `
     await 1;
     yield 2;
   }
-
   test('support for async generator functions', async () => {
     const generator = foo();
     expect(await generator.next()).toEqual({
@@ -15,15 +14,13 @@ exports[`Babel preset default transpilation works properly 1`] = `
     });
   });
   test('support for optional chaining', () => {
-    var _obj$foo, _obj$foo2;
-
     const obj = {
       foo: {
         bar: 42
       }
     };
-    expect(obj === null || obj === void 0 ? void 0 : (_obj$foo = obj.foo) === null || _obj$foo === void 0 ? void 0 : _obj$foo.bar).toEqual(42);
-    expect(obj === null || obj === void 0 ? void 0 : (_obj$foo2 = obj.foo) === null || _obj$foo2 === void 0 ? void 0 : _obj$foo2.baz).toEqual(undefined);
+    expect(obj?.foo?.bar).toEqual(42);
+    expect(obj?.foo?.baz).toEqual(undefined);
   });
 });"
 `;
diff --git a/packages/babel-preset-default/test/fixtures/polyfill.js b/packages/babel-preset-default/test/fixtures/polyfill.js
new file mode 100644
index 00000000000000..14a4fb20f14fa4
--- /dev/null
+++ b/packages/babel-preset-default/test/fixtures/polyfill.js
@@ -0,0 +1,6 @@
+// Note: this fixture may need to be updated when the browserslist or the
+// core-js dependencies are updated.
+// It should always test a feature that is supported, but requires
+// a polyfill to work across all supported browsers.
+const foo = new URLSearchParams();
+window.fooSize = foo.size;
diff --git a/packages/babel-preset-default/test/index.js b/packages/babel-preset-default/test/index.js
index 0a411cd4247975..4a23d13544b278 100644
--- a/packages/babel-preset-default/test/index.js
+++ b/packages/babel-preset-default/test/index.js
@@ -24,4 +24,22 @@ describe( 'Babel preset default', () => {
 
 		expect( output.code ).toMatchSnapshot();
 	} );
+
+	test( 'transpilation includes magic comment when using the addPolyfillComments option', () => {
+		const filename = path.join( __dirname, '/fixtures/polyfill.js' );
+		const input = readFileSync( filename );
+
+		const output = transform( input, {
+			filename,
+			configFile: false,
+			envName: 'production',
+			presets: [ babelPresetDefault ],
+			caller: {
+				name: 'WP_BUILD_MAIN',
+				addPolyfillComments: true,
+			},
+		} );
+
+		expect( output.code ).toContain( '/* wp:polyfill */' );
+	} );
 } );
diff --git a/packages/base-styles/.npmrc b/packages/base-styles/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/base-styles/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index 85fc4cb684b63f..196c6573d7b872 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.49.0 (2024-05-16)
+
+## 4.48.0 (2024-05-02)
+
+## 4.47.0 (2024-04-19)
+
+## 4.46.0 (2024-04-03)
+
+## 4.45.0 (2024-03-21)
+
+## 4.44.0 (2024-03-06)
+
+## 4.43.0 (2024-02-21)
+
+## 4.42.0 (2024-02-09)
+
+## 4.41.0 (2024-01-24)
+
+## 4.40.0 (2024-01-10)
+
+## 4.39.0 (2023-12-13)
+
+## 4.38.0 (2023-11-29)
+
+## 4.37.0 (2023-11-16)
+
+## 4.36.0 (2023-11-02)
+
+## 4.35.0 (2023-10-18)
+
+## 4.34.0 (2023-10-05)
+
+## 4.33.0 (2023-09-20)
+
+## 4.32.0 (2023-08-31)
+
+## 4.31.0 (2023-08-16)
+
+## 4.30.0 (2023-08-10)
+
+## 4.29.0 (2023-07-20)
+
+## 4.28.0 (2023-07-05)
+
+## 4.27.0 (2023-06-23)
+
+## 4.26.0 (2023-06-07)
+
+## 4.25.0 (2023-05-24)
+
+## 4.24.0 (2023-05-10)
+
+## 4.23.0 (2023-04-26)
+
+## 4.22.0 (2023-04-12)
+
+## 4.21.0 (2023-03-29)
+
+## 4.20.0 (2023-03-15)
+
+## 4.19.0 (2023-03-01)
+
+## 4.18.0 (2023-02-15)
+
+## 4.17.0 (2023-02-01)
+
+## 4.16.0 (2023-01-11)
+
+## 4.15.0 (2023-01-02)
+
+## 4.14.0 (2022-12-14)
+
+### Enhancements
+
+-   Lighten the border color in the `input-style__neutral` mixin ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
+
 ## 4.13.0 (2022-11-16)
 
 ## 4.12.0 (2022-11-02)
@@ -14,7 +122,7 @@
 
 ## 4.0.0 (2021-09-09)
 
-### Breaking Change
+### Breaking Changes
 
 -   Remove the background-colors, foreground-colors, and gradient-colors mixins.
 
@@ -27,6 +135,6 @@
 
 ## 1.2.0 (2020-01-13)
 
-### Bug Fix
+### Bug Fixes
 
 -   Import `colors` into `variables` since the latter depends on the former.
diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index b5e6655e660cbb..e5bbf863757356 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -1,5 +1,43 @@
-@mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
-	animation: edit-post__fade-in-animation $speed ease-out $delay;
+@mixin keyframes($name) {
+	@keyframes #{$name} {
+		@content;
+	}
+}
+
+@mixin animation__fade-in($speed: 0.08s, $delay: 0s, $easing: linear) {
+	@include keyframes(__wp-base-styles-fade-in) {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-in $speed $easing $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
+
+@mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) {
+	@include keyframes(__wp-base-styles-fade-out) {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-out $speed $easing $delay;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+// Deprecated
+@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
+	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
+	@include animation__fade-in($speed, $delay);
+}
diff --git a/packages/base-styles/_breakpoints.scss b/packages/base-styles/_breakpoints.scss
index 3dd164c99753a5..e180757b8cac9b 100644
--- a/packages/base-styles/_breakpoints.scss
+++ b/packages/base-styles/_breakpoints.scss
@@ -3,6 +3,7 @@
  */
 
 // Most used breakpoints
+$break-xhuge: 1920px;
 $break-huge: 1440px;
 $break-wide: 1280px;
 $break-xlarge: 1080px;
diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
index c21de46e6a4595..644562a1876707 100644
--- a/packages/base-styles/_colors.native.scss
+++ b/packages/base-styles/_colors.native.scss
@@ -31,9 +31,11 @@ $red-50: #d63638;
 // Primary Accent (Blues)
 $blue-wordpress: #0087be;
 $blue-medium: #00aadc;
+$blue-60: #055d9c;
 $blue-500: #016087;
 // Primary tint color (light)
 $blue-50: #2271b1;
+$blue-40: #1689db;
 // Primary tint color (dark)
 $blue-30: #5198d9;
 
@@ -97,11 +99,13 @@ $dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
 $dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
 $dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
 $dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
+$dark-dim: #ffffff1f; //rgba(255, 255, 255, 0.12)
 
 // Design Token colors
 $app-background: $white;
 $app-background-dark: $black;
 $app-background-dark-alt: $background-dark-elevated;
+$app-safe-area-background-dark: #141414;
 
 $modal-background: $white;
 $modal-background-dark: $background-dark-elevated;
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index 5847a66f8b2435..bba7fd5c8ec141 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -8,7 +8,7 @@
 $black: #000;			// Use only when you truly need pure black. For UI, use $gray-900.
 $gray-900: #1e1e1e;
 $gray-800: #2f2f2f;
-$gray-700: #757575;		// Meets 4.6:1 text contrast against white.
+$gray-700: #757575;		// Meets 4.6:1 (4.5:1 is minimum) text contrast against white.
 $gray-600: #949494;		// Meets 3:1 UI or large text contrast against white.
 $gray-400: #ccc;
 $gray-300: #ddd;		// Used for most borders.
@@ -17,7 +17,6 @@ $gray-100: #f0f0f0;		// Used for light gray backgrounds.
 $white: #fff;
 
 // Opacities & additional colors.
-$dark-theme-focus: $white;	// Focus color when the theme is dark.
 $dark-gray-placeholder: rgba($gray-900, 0.62);
 $medium-gray-placeholder: rgba($gray-900, 0.55);
 $light-gray-placeholder: rgba($white, 0.65);
@@ -27,7 +26,5 @@ $alert-yellow: #f0b849;
 $alert-red: #cc1818;
 $alert-green: #4ab866;
 
-:root {
-	--wp-block-synced-color: #7a00df;
-	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
-}
+// Deprecated, please avoid using these.
+$dark-theme-focus: $white;	// Focus color when the theme is dark.
diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 9f2979ea039bbb..98bb9ae75ea674 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -1,7 +1,11 @@
-
 // It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 // It also provides default CSS variables for npm package consumers.
 :root {
 	@include admin-scheme(#007cba);
+	--wp-block-synced-color: #7a00df;
+	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+	// This CSS variable is not used in Gutenberg project,
+	// but is maintained for backwards compatibility.
+	--wp-bound-block-color: var(--wp-block-synced-color);
 }
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 50af0938bccdb8..e2f953e5787814 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,9 +1,84 @@
 @import "./functions";
+@import "./long-content-fade";
+
+/**
+ * Typography
+ */
+
+@mixin _text-heading() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-medium;
+}
+
+@mixin _text-body() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+}
+
+@mixin heading-small() {
+	@include _text-heading();
+	font-size: $font-size-x-small;
+	line-height: $font-line-height-x-small;
+}
+
+@mixin heading-medium() {
+	@include _text-heading();
+	font-size: $font-size-medium;
+	line-height: $font-line-height-small;
+}
+
+@mixin heading-large() {
+	@include _text-heading();
+	font-size: $font-size-large;
+	line-height: $font-line-height-small;
+}
+
+@mixin heading-x-large() {
+	@include _text-heading();
+	font-size: $font-size-x-large;
+	line-height: $font-line-height-medium;
+}
+
+@mixin heading-2x-large() {
+	@include _text-heading();
+	font-size: $font-size-2x-large;
+	line-height: $font-line-height-2x-large;
+}
+
+@mixin body-small() {
+	@include _text-body();
+	font-size: $font-size-small;
+	line-height: $font-line-height-x-small;
+}
+
+@mixin body-medium() {
+	@include _text-body();
+	font-size: $font-size-medium;
+	line-height: $font-line-height-small;
+}
+
+@mixin body-large() {
+	@include _text-body();
+	font-size: $font-size-large;
+	line-height: $font-line-height-medium;
+}
+
+@mixin body-x-large() {
+	@include _text-body();
+	font-size: $font-size-x-large;
+	line-height: $font-line-height-x-large;
+}
 
 /**
  * Breakpoint mixins
  */
 
+@mixin break-xhuge() {
+	@media (min-width: #{ ($break-xhuge) }) {
+		@content;
+	}
+}
+
 @mixin break-huge() {
 	@media (min-width: #{ ($break-huge) }) {
 		@content;
@@ -52,75 +127,12 @@
 	}
 }
 
-
-/**
- * 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.
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px $white;
+	box-shadow: inset 0 0 0 $border-width $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;
@@ -130,21 +142,37 @@
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-700;
+	border-radius: $radius-small;
+	border: $border-width solid $gray-600;
 	@include reduce-motion("transition");
 }
 
 
 @mixin input-style__focus() {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+	// Expand the default border focus style by .5px to be a total of 1.5px.
+	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+}
+
+@mixin button-style__focus() {
+	box-shadow: 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;
 }
 
 
+@mixin button-style-outset__focus($focus-color) {
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
+
+
 /**
  * Applies editor left position to the selector passed as argument
  */
@@ -202,22 +230,6 @@
 	}
 }
 
-@mixin placeholder-style() {
-	border-radius: $radius-block-ui;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		background: currentColor;
-		opacity: 0.1;
-	}
-}
-
 /**
  * Allows users to opt-out of animations via OS-level preferences.
  */
@@ -283,10 +295,10 @@
 	border: $border-width solid $gray-900;
 	margin-right: $grid-unit-15;
 	transition: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -324,9 +336,8 @@
 			display: inline-block;
 			vertical-align: middle;
 			width: 16px;
-			/* stylelint-disable */
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 			font: normal 30px/1 dashicons;
-			/* stylelint-enable */
 			speak: none;
 			-webkit-font-smoothing: antialiased;
 			-moz-osx-font-smoothing: grayscale;
@@ -337,6 +348,16 @@
 			}
 		}
 	}
+
+	&[aria-disabled="true"],
+	&:disabled {
+		background: $gray-100;
+		border-color: $gray-300;
+		cursor: default;
+
+		// Override style inherited from wp-admin. Required to avoid degraded appearance on different backgrounds.
+		opacity: 1;
+	}
 }
 
 @mixin radio-control {
@@ -347,17 +368,25 @@
 	border-radius: $radius-round;
 	width: $radio-input-size-sm;
 	height: $radio-input-size-sm;
+	min-width: $radio-input-size-sm;
+	max-width: $radio-input-size-sm;
+	position: relative;
 
 	@include break-small() {
 		height: $radio-input-size;
 		width: $radio-input-size;
+		min-width: $radio-input-size;
+		max-width: $radio-input-size;
 	}
 
 	&:checked::before {
 		box-sizing: inherit;
-		width: 8px;
-		height: 8px;
-		transform: translate(7px, 7px);
+		width: math.div($radio-input-size-sm, 2);
+		height: math.div($radio-input-size-sm, 2);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
 		margin: 0;
 		background-color: $white;
 
@@ -365,12 +394,13 @@
 		border: 4px solid $white;
 
 		@include break-small() {
-			transform: translate(5px, 5px);
+			width: math.div($radio-input-size, 2);
+			height: math.div($radio-input-size, 2);
 		}
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -378,7 +408,7 @@
 
 	&:checked {
 		background: var(--wp-admin-theme-color);
-		border-color: var(--wp-admin-theme-color);
+		border: none;
 	}
 }
 
@@ -397,6 +427,39 @@
 	}
 }
 
+@mixin link-reset {
+	&:focus {
+		color: var(--wp-admin-theme-color--rgb);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+		border-radius: $radius-small;
+	}
+}
+
+// The editor input reset with increased specificity to avoid theme styles bleeding in.
+@mixin editor-input-reset() {
+	font-family: $editor-html-font !important;
+	color: $gray-900 !important;
+	background: $white !important;
+	padding: $grid-unit-15 !important;
+	border: $border-width solid $gray-900 !important;
+	box-shadow: none !important;
+	border-radius: $radius-small !important;
+
+	// Fonts smaller than 16px causes mobile safari to zoom.
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $default-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color) !important;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent !important;
+	}
+}
+
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
@@ -515,12 +578,9 @@
 
 // Deprecated from UI, kept for back-compat.
 @mixin gradient-colors-deprecated() {
-	/*
-	 * Our classes uses the same values we set for gradient value attributes,
-	 * and we can not use spacing because of WP multi site kses rule.
-	 */
+	// Our classes uses the same values we set for gradient value attributes.
 
-	/* stylelint-disable function-comma-space-after */
+	/* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
 	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
 		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
 	}
@@ -548,5 +608,67 @@
 	.has-midnight-gradient-background {
 		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
 	}
-	/* stylelint-enable function-comma-space-after */
+	/* stylelint-enable @stylistic/function-comma-space-after */
+}
+
+@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
+
+	// WebKit
+	&::-webkit-scrollbar {
+		width: 12px;
+		height: 12px;
+	}
+	&::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-color: $handle-color;
+		border-radius: 8px;
+		border: 3px solid transparent;
+		background-clip: padding-box;
+	}
+	&:hover::-webkit-scrollbar-thumb, // This needs specificity.
+	&:focus::-webkit-scrollbar-thumb,
+	&:focus-within::-webkit-scrollbar-thumb {
+		background-color: $handle-color-hover;
+	}
+
+	// Firefox 109+ and Chrome 111+
+	scrollbar-width: thin;
+	scrollbar-gutter: stable both-edges;
+	scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
+
+	&:hover,
+	&:focus,
+	&:focus-within {
+		scrollbar-color: $handle-color-hover transparent;
+	}
+
+	// Needed to fix a Safari rendering issue.
+	will-change: transform;
+
+	// Always show scrollbar on Mobile devices.
+	@media (hover: none) {
+		& {
+			scrollbar-color: $handle-color-hover transparent;
+		}
+	}
+}
+
+@mixin selected-block-outline($widthRatio: 1) {
+	outline-color: var(--wp-admin-theme-color);
+	outline-style: solid;
+	outline-width: calc(#{$widthRatio} * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+	outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+}
+
+@mixin selected-block-focus($widthRatio: 1) {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	@include selected-block-outline($widthRatio);
 }
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index cc922ba5a035a2..ec0bdf91f2489d 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -12,16 +12,37 @@
  * Fonts & basic variables.
  */
 
-$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
-$default-font-size: 13px;
-$default-line-height: 1.4;
-$editor-html-font: Menlo, Consolas, monaco, monospace;
-$editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
-$text-editor-font-size: 15px;
-$editor-line-height: 1.8;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables
+$default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens
+
+/**
+ * Typography
+ */
 
+// Sizes
+$font-size-x-small: 11px;
+$font-size-small: 12px;
+$font-size-medium: 13px;
+$font-size-large: 15px;
+$font-size-x-large: 20px;
+$font-size-2x-large: 32px;
+
+// Line heights
+$font-line-height-x-small: 16px;
+$font-line-height-small: 20px;
+$font-line-height-medium: 24px;
+$font-line-height-large: 28px;
+$font-line-height-x-large: 32px;
+$font-line-height-2x-large: 40px;
+
+// Weights
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+
+// Families
+$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-mono: Menlo, Consolas, monaco, monospace;
 
 /**
  * Grid System.
@@ -40,13 +61,42 @@ $grid-unit-60: 6 * $grid-unit;		// 48px
 $grid-unit-70: 7 * $grid-unit;		// 56px
 $grid-unit-80: 8 * $grid-unit;		// 64px
 
+/**
+ * Radius scale.
+ */
+
+$radius-x-small: 1px;   // Applied to elements like buttons nested within primitives like inputs.
+$radius-small: 2px;     // Applied to most primitives.
+$radius-medium: 4px;    // Applied to containers with smaller padding.
+$radius-large: 8px;     // Applied to containers with larger padding.
+$radius-full: 9999px;   // For pills.
+$radius-round: 50%;     // For circles and ovals.
+
+/**
+ * Elevation scale.
+ */
+
+// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
+$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
+
+// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
+$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
+
+// For components that offer additional actions. Example: Menus, Command Palette
+$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
+
+// For components that confirm decisions or handle necessary interruptions. Example: Modals.
+$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
+
 /**
  * Dimensions.
  */
 
 $icon-size: 24px;
 $button-size: 36px;
+$button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
+$button-size-compact: 32px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 300px;
@@ -55,27 +105,32 @@ $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
-$modal-min-width: 360px;
+$modal-min-width: 350px;
+$modal-width-small: 384px;
+$modal-width-medium: 512px;
+$modal-width-large: 840px;
 $spinner-size: 16px;
-
+$canvas-padding: $grid-unit-20;
 
 /**
- * Shadows.
+ * Mobile specific styles
  */
-
-$shadow-popover: 0 2px 6px rgba($black, 0.05);
-$shadow-modal: 0 10px 10px rgba($black, 0.25);
-
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
 
 /**
- * Editor widths.
+ * Editor styles.
  */
 
 $sidebar-width: 280px;
 $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
-
+$secondary-sidebar-width: 350px;
+$editor-font-size: 16px;
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
+$text-editor-font-size: 15px;
+$editor-line-height: 1.8;
+$editor-html-font: $font-family-mono;
 
 /**
  * Block & Editor UI.
@@ -83,17 +138,18 @@ $widget-area-width: 700px;
 
 $block-toolbar-height: $grid-unit-60;
 $border-width: 1px;
-$border-width-focus: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
+$border-width-focus-fallback: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
 $border-width-tab: 1.5px;
 $helptext-font-size: 12px;
-$radius-round: 50%;
-$radius-block-ui: 2px;
-$radio-input-size: 20px;
+$radio-input-size: 16px;
 $radio-input-size-sm: 24px; // Width & height for small viewports.
 
 // Deprecated, please avoid using these.
 $block-padding: 14px; // Used to define space between block footprint and surrouding borders.
-
+$radius-block-ui: $radius-small;
+$shadow-popover: $elevation-x-small;
+$shadow-modal: $elevation-large;
+$default-font-size: $font-size-medium;
 
 /**
  * Block paddings.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 9c7b55e78a69cc..af679edb910642 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -4,17 +4,16 @@
 
 $z-layers: (
 	".block-editor-block-list__block::before": 0,
+	".block-editor-block-list__block.is-selected": 20,
 	".block-editor-block-switcher__arrow": 1,
 	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
-	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
-	".edit-post-text-editor__toolbar": 1,
-	".edit-site-code-editor__toolbar": 1,
-	".edit-post-sidebar__panel-tab.is-active": 1,
+	".editor-text-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
+	".block-library-query-pattern__selection-search": 2, // higher sticky element
 
 	// These next two share a stacking context
 	".interface-complementary-area .components-panel" : 0, // lower scrolling content
@@ -32,13 +31,14 @@ $z-layers: (
 	".interface-interface-skeleton__header": 30,
 	".interface-interface-skeleton__content": 20,
 	".edit-widgets-header": 30,
-	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
-	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
+
 	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
+	// These z-index are now used only for a deprecated version of the cover block.
+	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
-	".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
 	".wp-block-cover__image-background": 0, // Image background inside cover block.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
+
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Fixed position appender:
@@ -66,12 +66,10 @@ $z-layers: (
 	// Needs to be below media library that has a z-index of 160000.
 	"{core/video track editor popover}": 160000 - 10,
 
-	// Needs to be below media library that has a z-index of 160000.
+	// Needs to be below media library (.media-model) that has a z-index of 160000.
 	".block-editor-format-toolbar__image-popover": 160000 - 10,
-
-	// Small screen inner blocks overlay must be displayed above drop zone,
-	// settings menu, and movers.
-	".block-editor-block-list__layout.has-overlay::after": 60,
+	// Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
+	".block-editor-global-styles-background-panel__popover": 159900 - 10,
 
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-contextual-toolbar": 61,
@@ -87,17 +85,15 @@ $z-layers: (
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
 	".interface-interface-skeleton__sidebar": 100000,
-	".edit-post-layout__toggle-sidebar-panel": 100000,
+	".editor-layout__toggle-sidebar-panel": 100000,
 	".edit-widgets-sidebar": 100000,
-	".edit-post-layout .edit-post-post-publish-panel": 100001,
+	".editor-post-publish-panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be at top of
 	// the Publish Post sidebar.
-	".edit-post-layout .edit-post-post-publish-panel {greater than small}": 99998,
+	".editor-post-publish-panel {greater than small}": 99998,
 
-	".entities-saved-states__panel": 100001,
 	// For larger views, the wp-admin navbar dropdown should be on top of
 	// the multi-entity saving sidebar.
-	".entities-saved-states__panel {greater than small}": 99998,
 	".edit-site-editor__toggle-save-panel": 100000,
 
 	// Show sidebar in greater than small viewports above editor related elements
@@ -108,17 +104,12 @@ $z-layers: (
 	// Show interface skeleton footer above interface skeleton drawer
 	".interface-interface-skeleton__footer": 90,
 
-	// Show the navigation toggle above the skeleton header
-	".edit-site-navigation-toggle": 31,
-	// Show the navigation link above the skeleton header
-	".edit-site-navigation-link": 31,
-
-	// Show the FSE template previews above the editor and any open block toolbars
-	".edit-site-navigation-panel__preview": 32,
-
 	// Above the block list and the header.
 	".block-editor-block-popover": 31,
 
+	// Below the block toolbar.
+	".block-editor-grid-visualizer": 30,
+
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,
 
@@ -131,9 +122,17 @@ $z-layers: (
 
 	// Should be above the popover (dropdown)
 	".reusable-blocks-menu-items__convert-modal": 1000001,
-	".edit-site-create-template-part-modal": 1000001,
+	".patterns-menu-items__convert-modal": 1000001,
+	".fields-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
 	".block-editor-template-part__selection-modal": 1000001,
+	".block-editor-block-rename-modal": 1000001,
+	".edit-site-list__rename-modal": 1000001,
+	".dataviews-action-modal": 1000001,
+	".editor-action-modal": 1000001,
+	".editor-post-template__swap-template-modal": 1000001,
+	".edit-site-template-panel__replace-template-modal": 1000001,
+	".fields-controls__template-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.
@@ -142,14 +141,18 @@ $z-layers: (
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,
 	".components-popover.interface-more-menu__content": 99998,
+	".components-popover.more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 	".components-popover.block-editor-warning__dropdown": 99998,
-	".components-popover.edit-navigation-menu-actions__switcher-dropdown": 99998,
 
 	".components-autocomplete__results": 1000000,
 
 	".skip-to-selected-block": 100000,
 	".interface-interface-skeleton__actions": 100000,
+	".edit-site-layout__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,
@@ -157,21 +160,15 @@ $z-layers: (
 	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
 	".components-tooltip": 1000002,
 
-	// Keep template popover underneath 'Create custom template' modal overlay.
-	".edit-post-post-template__dialog": 99999,
-
 	// Make sure corner handles are above side handles for ResizableBox component
 	".components-resizable-box__handle": 2,
 	".components-resizable-box__side-handle": 2,
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options
-	".edit-post-block-manager__category-title": 1,
+	".block-editor-block-manager__category-title": 1,
 	// And block manager sticky disabled block count is higher still
-	".edit-post-block-manager__disabled-blocks-count": 2,
-
-	// Needs to be higher than any other element as this is an overlay to catch all events
-	".components-tooltip .event-catcher": 100002,
+	".block-editor-block-manager__disabled-blocks-count": 2,
 
 	// Needs to appear below other color circular picker related UI elements.
 	".components-circular-option-picker__option-wrapper::before": -1,
@@ -179,7 +176,11 @@ $z-layers: (
 	".components-circular-option-picker__option.is-pressed": 1,
 	// Needs to be higher than .components-circular-option-picker__option.is-pressed.
 	".components-circular-option-picker__option.is-pressed + svg": 2,
-	".edit-navigation-layout__overlay": 999,
+
+	// The following two indexes are needed so that the swatches (and their tooltips)
+	// always render on top of the rest of the component's UI.
+	".components-circular-option-picker__swatches": 1,
+	"> *:not(.components-circular-option-picker__swatches)": 0,
 
 	// Appear under the customizer heading UI, but over anything else.
 	".customize-widgets__topbar": 8,
@@ -187,7 +188,30 @@ $z-layers: (
 	// Appear under the topbar.
 	".customize-widgets__block-toolbar": 7,
 
-	".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker": -1,
+	// Site editor layout
+	".edit-site-page-header": 2,
+	".edit-site-page-content": 1,
+	".edit-site-templates__dataviews-list-pagination": 2,
+	".edit-site-layout__canvas-container": 2,
+	".edit-site-layout__sidebar": 1,
+	".edit-site-layout__canvas-container.is-resizing::after": 100,
+	// Title needs to appear above other UI the section content.
+	".edit-site-sidebar-navigation-screen__title-icon": 1,
+
+	// Ensure modal footer actions appear above modal contents
+	".editor-start-template-options__modal__actions": 1,
+
+	// Ensure checkbox + actions don't overlap table header
+	".dataviews-view-table thead": 1,
+
+	// Ensure selection checkbox stays above the preview field.
+	".dataviews-view-grid__card .dataviews-selection-checkbox": 1,
+
+	// Ensure footer stays above the preview field.
+	".dataviews-footer": 2,
+
+	// Needs to be below media library (.media-model) that has a z-index of 160000.
+	".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown": 160000 - 10,
 );
 
 @function z-index( $key ) {
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 3e76e6ea0870e7..2fc026a9ee72ab 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "4.13.0",
+	"version": "5.13.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,6 +20,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/blob/.npmrc b/packages/blob/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/blob/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index 0c491bfff84f4a..2d518db27bb40a 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+### Internal
+
+-   Refactor to TypeScript ([#62569](https://github.com/WordPress/gutenberg/pull/62569)).
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+### New Features
+
+-   Add `downloadBlob` function and remove `downloadjs` dependency ([#56024](https://github.com/WordPress/gutenberg/pull/56024)).
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,13 +169,13 @@
 
 ## 2.11.0 (2020-10-19)
 
-### New feature
+### New Features
 
 -   Added a new `getBlobTypeByURL` function. Returns the file type of the blob or undefined if not a blob.
 
 ## 2.8.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
@@ -77,6 +189,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/blob/README.md b/packages/blob/README.md
index cfa7b745a595c5..d315cdab5e4a48 100644
--- a/packages/blob/README.md
+++ b/packages/blob/README.md
@@ -26,11 +26,34 @@ _Returns_
 
 -   `string`: The blob URL.
 
+### downloadBlob
+
+Downloads a file, e.g., a text or readable stream, in the browser. Appropriate for downloading smaller file sizes, e.g., \< 5 MB.
+
+Example usage:
+
+```js
+const fileContent = JSON.stringify(
+	{
+		title: 'My Post',
+	},
+	null,
+	2
+);
+const filename = 'file.json';
+
+downloadBlob( filename, fileContent, 'application/json' );
+```
+
+_Parameters_
+
+-   _filename_ `string`: File name.
+-   _content_ `BlobPart`: File content (BufferSource | Blob | string).
+-   _contentType_ `string`: (Optional) File mime type. Default is `''`.
+
 ### getBlobByURL
 
-Retrieve a file based on a blob URL. The file must have been created by
-`createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
-`undefined`.
+Retrieve a file based on a blob URL. The file must have been created by `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return `undefined`.
 
 _Parameters_
 
@@ -38,13 +61,11 @@ _Parameters_
 
 _Returns_
 
--   `File|undefined`: The file for the blob URL.
+-   `File | undefined`: The file for the blob URL.
 
 ### getBlobTypeByURL
 
-Retrieve a blob type based on URL. The file must have been created by
-`createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
-`undefined`.
+Retrieve a blob type based on URL. The file must have been created by `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return `undefined`.
 
 _Parameters_
 
@@ -52,7 +73,7 @@ _Parameters_
 
 _Returns_
 
--   `string|undefined`: The blob type.
+-   `string | undefined`: The blob type.
 
 ### isBlobURL
 
@@ -60,7 +81,7 @@ Check whether a url is a blob url.
 
 _Parameters_
 
--   _url_ `string`: The URL.
+-   _url_ `string | undefined`: The URL.
 
 _Returns_
 
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 02bd7a49733582..4ecf6602400496 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,15 +19,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/blob/src/index.js b/packages/blob/src/index.js
deleted file mode 100644
index 3af66755c011e8..00000000000000
--- a/packages/blob/src/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Browser dependencies
- */
-const { createObjectURL, revokeObjectURL } = window.URL;
-
-/**
- * @type {Record<string, File|undefined>}
- */
-const cache = {};
-
-/**
- * Create a blob URL from a file.
- *
- * @param {File} file The file to create a blob URL for.
- *
- * @return {string} The blob URL.
- */
-export function createBlobURL( file ) {
-	const url = createObjectURL( file );
-
-	cache[ url ] = file;
-
-	return url;
-}
-
-/**
- * Retrieve a file based on a blob URL. The file must have been created by
- * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
- * `undefined`.
- *
- * @param {string} url The blob URL.
- *
- * @return {File|undefined} The file for the blob URL.
- */
-export function getBlobByURL( url ) {
-	return cache[ url ];
-}
-
-/**
- * Retrieve a blob type based on URL. The file must have been created by
- * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
- * `undefined`.
- *
- * @param {string} url The blob URL.
- *
- * @return {string|undefined} The blob type.
- */
-export function getBlobTypeByURL( url ) {
-	return getBlobByURL( url )?.type.split( '/' )[ 0 ]; // 0: media type , 1: file extension eg ( type: 'image/jpeg' ).
-}
-
-/**
- * Remove the resource and file cache from memory.
- *
- * @param {string} url The blob URL.
- */
-export function revokeBlobURL( url ) {
-	if ( cache[ url ] ) {
-		revokeObjectURL( url );
-	}
-
-	delete cache[ url ];
-}
-
-/**
- * Check whether a url is a blob url.
- *
- * @param {string} url The URL.
- *
- * @return {boolean} Is the url a blob url?
- */
-export function isBlobURL( url ) {
-	if ( ! url || ! url.indexOf ) {
-		return false;
-	}
-	return url.indexOf( 'blob:' ) === 0;
-}
diff --git a/packages/blob/src/index.ts b/packages/blob/src/index.ts
new file mode 100644
index 00000000000000..62a6671db61544
--- /dev/null
+++ b/packages/blob/src/index.ts
@@ -0,0 +1,113 @@
+const cache: Record< string, File > = {};
+
+/**
+ * Create a blob URL from a file.
+ *
+ * @param file The file to create a blob URL for.
+ *
+ * @return The blob URL.
+ */
+export function createBlobURL( file: File ): string {
+	const url = window.URL.createObjectURL( file );
+
+	cache[ url ] = file;
+
+	return url;
+}
+
+/**
+ * Retrieve a file based on a blob URL. The file must have been created by
+ * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
+ * `undefined`.
+ *
+ * @param url The blob URL.
+ *
+ * @return The file for the blob URL.
+ */
+export function getBlobByURL( url: string ): File | undefined {
+	return cache[ url ];
+}
+
+/**
+ * Retrieve a blob type based on URL. The file must have been created by
+ * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
+ * `undefined`.
+ *
+ * @param url The blob URL.
+ *
+ * @return The blob type.
+ */
+export function getBlobTypeByURL( url: string ): string | undefined {
+	return getBlobByURL( url )?.type.split( '/' )[ 0 ]; // 0: media type , 1: file extension eg ( type: 'image/jpeg' ).
+}
+
+/**
+ * Remove the resource and file cache from memory.
+ *
+ * @param url The blob URL.
+ */
+export function revokeBlobURL( url: string ): void {
+	if ( cache[ url ] ) {
+		window.URL.revokeObjectURL( url );
+	}
+
+	delete cache[ url ];
+}
+
+/**
+ * Check whether a url is a blob url.
+ *
+ * @param url The URL.
+ *
+ * @return Is the url a blob url?
+ */
+export function isBlobURL( url: string | undefined ): boolean {
+	if ( ! url || ! url.indexOf ) {
+		return false;
+	}
+	return url.indexOf( 'blob:' ) === 0;
+}
+
+/**
+ * Downloads a file, e.g., a text or readable stream, in the browser.
+ * Appropriate for downloading smaller file sizes, e.g., < 5 MB.
+ *
+ * Example usage:
+ *
+ * ```js
+ * 	const fileContent = JSON.stringify(
+ * 		{
+ * 			"title": "My Post",
+ * 		},
+ * 		null,
+ * 		2
+ * 	);
+ * 	const filename = 'file.json';
+ *
+ * 	downloadBlob( filename, fileContent, 'application/json' );
+ * ```
+ *
+ * @param filename    File name.
+ * @param content     File content (BufferSource | Blob | string).
+ * @param contentType (Optional) File mime type. Default is `''`.
+ */
+export function downloadBlob(
+	filename: string,
+	content: BlobPart,
+	contentType: string = ''
+): void {
+	if ( ! filename || ! content ) {
+		return;
+	}
+
+	const file = new window.Blob( [ content ], { type: contentType } );
+	const url = window.URL.createObjectURL( file );
+	const anchorElement = document.createElement( 'a' );
+	anchorElement.href = url;
+	anchorElement.download = filename;
+	anchorElement.style.display = 'none';
+	document.body.appendChild( anchorElement );
+	anchorElement.click();
+	document.body.removeChild( anchorElement );
+	window.URL.revokeObjectURL( url );
+}
diff --git a/packages/blob/src/test/index.js b/packages/blob/src/test/index.js
deleted file mode 100644
index 4e59917522b519..00000000000000
--- a/packages/blob/src/test/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Internal dependencies
- */
-import { isBlobURL, getBlobTypeByURL } from '../';
-
-describe( 'isBlobURL', () => {
-	it( 'returns true if the url starts with "blob:"', () => {
-		expect( isBlobURL( 'blob:thisbitdoesnotmatter' ) ).toBe( true );
-	} );
-
-	it( 'returns false if the url does not start with "blob:"', () => {
-		expect( isBlobURL( 'https://www.example.com' ) ).toBe( false );
-	} );
-
-	it( 'returns false if the url is not defined', () => {
-		expect( isBlobURL() ).toBe( false );
-	} );
-} );
-
-describe( 'getBlobTypeByURL', () => {
-	it( 'returns undefined if the blob is not found', () => {
-		expect( getBlobTypeByURL( 'blob:notexisting' ) ).toBe( undefined );
-	} );
-
-	it( 'returns undefined if the url is not defined', () => {
-		expect( getBlobTypeByURL() ).toBe( undefined );
-	} );
-} );
diff --git a/packages/blob/src/test/index.ts b/packages/blob/src/test/index.ts
new file mode 100644
index 00000000000000..381b04fd817a6b
--- /dev/null
+++ b/packages/blob/src/test/index.ts
@@ -0,0 +1,95 @@
+/**
+ * Internal dependencies
+ */
+import { isBlobURL, getBlobTypeByURL, downloadBlob } from '..';
+
+describe( 'isBlobURL', () => {
+	it( 'returns true if the url starts with "blob:"', () => {
+		expect( isBlobURL( 'blob:thisbitdoesnotmatter' ) ).toBe( true );
+	} );
+
+	it( 'returns false if the url does not start with "blob:"', () => {
+		expect( isBlobURL( 'https://www.example.com' ) ).toBe( false );
+	} );
+
+	it( 'returns false if the url is not defined', () => {
+		expect(
+			// @ts-expect-error This is not a valid call according to types.
+			isBlobURL()
+		).toBe( false );
+	} );
+} );
+
+describe( 'getBlobTypeByURL', () => {
+	it( 'returns undefined if the blob is not found', () => {
+		expect( getBlobTypeByURL( 'blob:notexisting' ) ).toBeUndefined();
+	} );
+
+	it( 'returns undefined if the url is not defined', () => {
+		expect(
+			// @ts-expect-error This is not a valid call according to types.
+			getBlobTypeByURL()
+		).toBeUndefined();
+	} );
+} );
+
+describe( 'downloadBlob', () => {
+	const originalURL = window.URL;
+	const createObjectURL = jest.fn().mockReturnValue( 'blob:pannacotta' );
+	const revokeObjectURL = jest.fn().mockReturnValue( false );
+	const mockAnchorElement = document.createElement( 'a' );
+	mockAnchorElement.click = jest.fn();
+	const createElementSpy = jest
+		.spyOn( global.document, 'createElement' )
+		.mockReturnValue( mockAnchorElement );
+
+	const mockBlob = jest.fn();
+	const blobSpy = jest
+		.spyOn( window, 'Blob' )
+		.mockReturnValue( mockBlob as unknown as Blob );
+	jest.spyOn( document.body, 'appendChild' );
+	jest.spyOn( document.body, 'removeChild' );
+	beforeEach( () => {
+		// Can't seem to spy on these static methods. They are `undefined`.
+		// Possibly overwritten: https://github.com/WordPress/gutenberg/blob/trunk/packages/jest-preset-default/scripts/setup-globals.js#L5
+		// @ts-expect-error This is not a valid URL object.
+		window.URL = {
+			createObjectURL,
+			revokeObjectURL,
+		};
+	} );
+
+	afterAll( () => {
+		window.URL = originalURL;
+	} );
+
+	it( 'requires a filename argument', () => {
+		downloadBlob( '', '{}', 'application/json' );
+		expect( blobSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'requires a content argument', () => {
+		downloadBlob( 'text.txt', '', 'text/plain' );
+		expect( blobSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'constructs an anchor element with attributes and removes it', () => {
+		downloadBlob( 'filename.json', '{}', 'application/json' );
+		expect( blobSpy ).toHaveBeenCalledWith( [ '{}' ], {
+			type: 'application/json',
+		} );
+		expect( createObjectURL ).toHaveBeenCalledWith( mockBlob );
+		expect( createElementSpy ).toHaveBeenCalledWith( 'a' );
+		expect( mockAnchorElement.download ).toBe( 'filename.json' );
+		expect( mockAnchorElement.href ).toBe( 'blob:pannacotta' );
+		expect( mockAnchorElement ).toHaveStyle( 'display:none' );
+		expect( document.body.appendChild ).toHaveBeenCalledWith(
+			mockAnchorElement
+		);
+		expect( mockAnchorElement.click ).toHaveBeenCalledTimes( 1 );
+		expect( document.body.removeChild ).toHaveBeenCalledWith(
+			mockAnchorElement
+		);
+		expect( revokeObjectURL ).toHaveBeenCalled();
+	} );
+} );
diff --git a/packages/blob/tsconfig.json b/packages/blob/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/blob/tsconfig.json
+++ b/packages/blob/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/block-directory/.npmrc b/packages/block-directory/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/block-directory/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index d65f7d56149a6f..ff4fac035eaa06 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -42,7 +150,7 @@
 
 ## 3.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/url` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,7 +158,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -69,7 +177,7 @@
 
 ## 1.18.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the block directory namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
diff --git a/packages/block-directory/README.md b/packages/block-directory/README.md
index 7cb81993d837f2..abb44a7c3849ec 100644
--- a/packages/block-directory/README.md
+++ b/packages/block-directory/README.md
@@ -30,8 +30,7 @@ The following set of dispatching action creators are available on the object ret
 
 ### addInstalledBlockType
 
-Returns an action object used to add a block type to the "newly installed"
-tracking list.
+Returns an action object used to add a block type to the "newly installed" tracking list.
 
 _Parameters_
 
@@ -55,8 +54,7 @@ _Returns_
 
 ### fetchDownloadableBlocks
 
-Returns an action object used in signalling that the downloadable blocks
-have been requested and are loading.
+Returns an action object used in signalling that the downloadable blocks have been requested and are loading.
 
 _Parameters_
 
@@ -80,8 +78,7 @@ _Returns_
 
 ### receiveDownloadableBlocks
 
-Returns an action object used in signalling that the downloadable blocks
-have been updated.
+Returns an action object used in signalling that the downloadable blocks have been updated.
 
 _Parameters_
 
@@ -94,8 +91,7 @@ _Returns_
 
 ### removeInstalledBlockType
 
-Returns an action object used to remove a block type from the "newly installed"
-tracking list.
+Returns an action object used to remove a block type from the "newly installed" tracking list.
 
 _Parameters_
 
@@ -188,8 +184,7 @@ _Returns_
 
 ### getInstalledBlockTypes
 
-Returns the block types that have been installed on the server in this
-session.
+Returns the block types that have been installed on the server in this session.
 
 _Parameters_
 
@@ -201,8 +196,7 @@ _Returns_
 
 ### getNewBlockTypes
 
-Returns block types that have been installed on the server and used in the
-current post.
+Returns block types that have been installed on the server and used in the current post.
 
 _Parameters_
 
@@ -214,8 +208,7 @@ _Returns_
 
 ### getUnusedBlockTypes
 
-Returns the block types that have been installed on the server but are not
-used in the current post.
+Returns the block types that have been installed on the server but are not used in the current post.
 
 _Parameters_
 
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 1083e6281f7aba..2fa0bf52ea126f 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,36 +19,39 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/edit-post": "file:../edit-post",
-		"@wordpress/editor": "file:../editor",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/url": "file:../url",
-		"change-case": "^4.1.2"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/editor": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/url": "*",
+		"change-case": "^4.1.2",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/block-directory/src/components/downloadable-block-icon/style.scss b/packages/block-directory/src/components/downloadable-block-icon/style.scss
index 57a792b3f7f6e3..e11c1f05e864f8 100644
--- a/packages/block-directory/src/components/downloadable-block-icon/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-icon/style.scss
@@ -3,5 +3,5 @@
 	width: $button-size * 1.5;
 	height: $button-size * 1.5;
 	vertical-align: middle;
-	border: 1px solid $gray-300;
+	border: $border-width solid $gray-300;
 }
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js
index aed5c99ec89b28..c04ea8ea1767bd 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js
@@ -1,12 +1,17 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
-	Button,
+	Tooltip,
 	Spinner,
 	VisuallyHidden,
-	__unstableCompositeItem as CompositeItem,
+	Composite,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -29,28 +34,28 @@ function getDownloadableBlockLabel(
 	const stars = Math.round( rating / 0.5 ) * 0.5;
 
 	if ( ! isInstalled && hasNotice ) {
-		/* translators: %1$s: block title */
+		/* translators: %s: block title */
 		return sprintf( 'Retry installing %s.', decodeEntities( title ) );
 	}
 
 	if ( isInstalled ) {
-		/* translators: %1$s: block title */
+		/* translators: %s: block title */
 		return sprintf( 'Add %s.', decodeEntities( title ) );
 	}
 
 	if ( isInstalling ) {
-		/* translators: %1$s: block title */
+		/* translators: %s: block title */
 		return sprintf( 'Installing %s.', decodeEntities( title ) );
 	}
 
 	// No ratings yet, just use the title.
 	if ( ratingCount < 1 ) {
-		/* translators: %1$s: block title */
+		/* translators: %s: block title */
 		return sprintf( 'Install %s.', decodeEntities( title ) );
 	}
 
 	return sprintf(
-		/* translators: %1$s: block title, %2$s: average rating, %3$s: total ratings count. */
+		/* translators: 1: block title, 2: average rating, 3: total ratings count. */
 		_n(
 			'Install %1$s. %2$s stars with %3$s review.',
 			'Install %1$s. %2$s stars with %3$s reviews.',
@@ -62,7 +67,7 @@ function getDownloadableBlockLabel(
 	);
 }
 
-function DownloadableBlockListItem( { composite, item, onClick } ) {
+function DownloadableBlockListItem( { item, onClick } ) {
 	const { author, description, icon, rating, title } = item;
 	// getBlockType returns a block object if this block exists, or null if not.
 	const isInstalled = !! getBlockType( item.name );
@@ -89,72 +94,75 @@ function DownloadableBlockListItem( { composite, item, onClick } ) {
 		statusText = __( 'Installing…' );
 	}
 
+	const itemLabel = getDownloadableBlockLabel( item, {
+		hasNotice,
+		isInstalled,
+		isInstalling,
+	} );
+
 	return (
-		<CompositeItem
-			__experimentalIsFocusable
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className="block-directory-downloadable-block-list-item"
-			onClick={ ( event ) => {
-				event.preventDefault();
-				onClick();
-			} }
-			isBusy={ isInstalling }
-			disabled={ isInstalling || ! isInstallable }
-			label={ getDownloadableBlockLabel( item, {
-				hasNotice,
-				isInstalled,
-				isInstalling,
-			} ) }
-			showTooltip={ true }
-			tooltipPosition="top center"
-		>
-			<div className="block-directory-downloadable-block-list-item__icon">
-				<DownloadableBlockIcon icon={ icon } title={ title } />
-				{ isInstalling ? (
-					<span className="block-directory-downloadable-block-list-item__spinner">
-						<Spinner />
-					</span>
-				) : (
-					<BlockRatings rating={ rating } />
+		<Tooltip placement="top" text={ itemLabel }>
+			<Composite.Item
+				className={ clsx(
+					'block-directory-downloadable-block-list-item',
+					isInstalling && 'is-installing'
 				) }
-			</div>
-			<span className="block-directory-downloadable-block-list-item__details">
-				<span className="block-directory-downloadable-block-list-item__title">
-					{ createInterpolateElement(
-						sprintf(
-							/* translators: %1$s: block title, %2$s: author name. */
-							__( '%1$s <span>by %2$s</span>' ),
-							decodeEntities( title ),
-							author
-						),
-						{
-							span: (
-								<span className="block-directory-downloadable-block-list-item__author" />
+				accessibleWhenDisabled
+				disabled={ isInstalling || ! isInstallable }
+				onClick={ ( event ) => {
+					event.preventDefault();
+					onClick();
+				} }
+				aria-label={ itemLabel }
+				type="button"
+				role="option"
+			>
+				<div className="block-directory-downloadable-block-list-item__icon">
+					<DownloadableBlockIcon icon={ icon } title={ title } />
+					{ isInstalling ? (
+						<span className="block-directory-downloadable-block-list-item__spinner">
+							<Spinner />
+						</span>
+					) : (
+						<BlockRatings rating={ rating } />
+					) }
+				</div>
+				<span className="block-directory-downloadable-block-list-item__details">
+					<span className="block-directory-downloadable-block-list-item__title">
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: 1: block title. 2: author name. */
+								__( '%1$s <span>by %2$s</span>' ),
+								decodeEntities( title ),
+								author
 							),
-						}
+							{
+								span: (
+									<span className="block-directory-downloadable-block-list-item__author" />
+								),
+							}
+						) }
+					</span>
+					{ hasNotice ? (
+						<DownloadableBlockNotice block={ item } />
+					) : (
+						<>
+							<span className="block-directory-downloadable-block-list-item__desc">
+								{ !! statusText
+									? statusText
+									: decodeEntities( description ) }
+							</span>
+							{ isInstallable &&
+								! ( isInstalled || isInstalling ) && (
+									<VisuallyHidden>
+										{ __( 'Install block' ) }
+									</VisuallyHidden>
+								) }
+						</>
 					) }
 				</span>
-				{ hasNotice ? (
-					<DownloadableBlockNotice block={ item } />
-				) : (
-					<>
-						<span className="block-directory-downloadable-block-list-item__desc">
-							{ !! statusText
-								? statusText
-								: decodeEntities( description ) }
-						</span>
-						{ isInstallable &&
-							! ( isInstalled || isInstalling ) && (
-								<VisuallyHidden>
-									{ __( 'Install block' ) }
-								</VisuallyHidden>
-							) }
-					</>
-				) }
-			</span>
-		</CompositeItem>
+			</Composite.Item>
+		</Tooltip>
 	);
 }
 
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index 61b292788a03ae..e13e46ef8d8786 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -1,37 +1,46 @@
 .block-directory-downloadable-block-list-item {
-	padding: $grid-unit-15;
+	& + & {
+		margin-top: $grid-unit-05;
+	}
+
+	display: grid;
+	grid-template-columns: auto 1fr;
+
 	width: 100%;
 	height: auto;
+	padding: $grid-unit-15;
+	margin: 0;
+
+	appearance: none;
+	background: none;
+	border: 0;
 	text-align: left;
-	display: grid;
-	grid-template-columns: auto 1fr;
+	transition: box-shadow 0.1s linear;
+
+	// The item contains absolutely positioned items.
+	// Set `position: relative` on the parent to prevent overflow issues
+	// in scroll containers.
+	// See: https://github.com/WordPress/gutenberg/issues/63384
+	position: relative;
+
+
+	&:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
 
 	&:hover {
-		box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+		@include button-style__focus();
 	}
 
-	&.is-busy {
-		background: transparent;
+	&[data-focus-visible] {
+		@include button-style__focus();
+	}
 
+	&.is-installing {
 		.block-directory-downloadable-block-list-item__author {
-			border: 0;
-			clip: rect(1px, 1px, 1px, 1px);
-			-webkit-clip-path: inset(50%);
-			clip-path: inset(50%);
-			height: 1px;
-			margin: -1px;
-			overflow: hidden;
-			padding: 0;
-			position: absolute;
-			width: 1px;
-			word-wrap: normal !important;
+			display: none;
 		}
 	}
-
-	&:disabled,
-	&[aria-disabled] {
-		opacity: 1;
-	}
 }
 
 .block-directory-downloadable-block-list-item__icon {
@@ -50,6 +59,11 @@
 		align-items: center;
 		justify-content: center;
 	}
+
+	.is-installing & {
+		// Adding an extra 6px to avoid the UI from jumping when the rating bar gets hidden
+		margin-right: $grid-unit-20 + 6px;
+	}
 }
 
 .block-directory-block-ratings {
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..d98fb31f1895cf 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
@@ -61,14 +61,12 @@ describe( 'DownloadableBlockListItem', () => {
 		);
 		const button = screen.getByRole( 'option' );
 		// Keeping it false to avoid focus loss and disable it using aria-disabled.
-		expect( button.disabled ).toBe( false );
+		expect( button ).toBeEnabled();
 		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
 	it( 'should try to install the block plugin', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		useSelect.mockImplementation( () => ( {
 			isInstalling: false,
diff --git a/packages/block-directory/src/components/downloadable-blocks-list/index.js b/packages/block-directory/src/components/downloadable-blocks-list/index.js
index b8ea7330f2d0ee..3e44aa423bfa5e 100644
--- a/packages/block-directory/src/components/downloadable-blocks-list/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-list/index.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -18,7 +15,6 @@ import { store as blockDirectoryStore } from '../../store';
 const noop = () => {};
 
 function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
-	const composite = useCompositeState();
 	const { installBlockType } = useDispatch( blockDirectoryStore );
 
 	if ( ! items.length ) {
@@ -27,7 +23,6 @@ function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
 
 	return (
 		<Composite
-			{ ...composite }
 			role="listbox"
 			className="block-directory-downloadable-blocks-list"
 			aria-label={ __( 'Blocks available for install' ) }
@@ -36,7 +31,6 @@ function DownloadableBlocksList( { items, onHover = noop, onSelect } ) {
 				return (
 					<DownloadableBlockListItem
 						key={ item.id }
-						composite={ composite }
 						onClick={ () => {
 							// Check if the block is registered (`getBlockType`
 							// will return an object). If so, insert the block.
diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/index.js b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
index d98145c514c747..4ceee3ddcb16e6 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/index.js
@@ -3,10 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,16 +15,73 @@ import DownloadableBlocksInserterPanel from './inserter-panel';
 import DownloadableBlocksNoResults from './no-results';
 import { store as blockDirectoryStore } from '../../store';
 
-function DownloadableBlocksPanel( {
-	downloadableItems,
+const EMPTY_ARRAY = [];
+
+const useDownloadableBlocks = ( filterValue ) =>
+	useSelect(
+		( select ) => {
+			const {
+				getDownloadableBlocks,
+				isRequestingDownloadableBlocks,
+				getInstalledBlockTypes,
+			} = select( blockDirectoryStore );
+
+			const hasPermission = select( coreStore ).canUser(
+				'read',
+				'block-directory/search'
+			);
+
+			let downloadableBlocks = EMPTY_ARRAY;
+			if ( hasPermission ) {
+				downloadableBlocks = getDownloadableBlocks( filterValue );
+
+				// Filter out blocks that are already installed.
+				const installedBlockTypes = getInstalledBlockTypes();
+				const installableBlocks = downloadableBlocks.filter(
+					( { name } ) => {
+						// Check if the block has just been installed, in which case it
+						// should still show in the list to avoid suddenly disappearing.
+						// `installedBlockTypes` only returns blocks stored in state
+						// immediately after installation, not all installed blocks.
+						const isJustInstalled = installedBlockTypes.some(
+							( blockType ) => blockType.name === name
+						);
+						const isPreviouslyInstalled = getBlockType( name );
+						return isJustInstalled || ! isPreviouslyInstalled;
+					}
+				);
+
+				// Keep identity of the `downloadableBlocks` array if nothing was filtered out
+				if ( installableBlocks.length !== downloadableBlocks.length ) {
+					downloadableBlocks = installableBlocks;
+				}
+
+				// Return identical empty array when there are no blocks
+				if ( downloadableBlocks.length === 0 ) {
+					downloadableBlocks = EMPTY_ARRAY;
+				}
+			}
+
+			return {
+				hasPermission,
+				downloadableBlocks,
+				isLoading: isRequestingDownloadableBlocks( filterValue ),
+			};
+		},
+		[ filterValue ]
+	);
+
+export default function DownloadableBlocksPanel( {
 	onSelect,
 	onHover,
 	hasLocalBlocks,
-	hasPermission,
-	isLoading,
 	isTyping,
+	filterValue,
 } ) {
-	if ( typeof hasPermission === 'undefined' || isLoading || isTyping ) {
+	const { hasPermission, downloadableBlocks, isLoading } =
+		useDownloadableBlocks( filterValue );
+
+	if ( hasPermission === undefined || isLoading || isTyping ) {
 		return (
 			<>
 				{ hasPermission && ! hasLocalBlocks && (
@@ -53,48 +109,20 @@ function DownloadableBlocksPanel( {
 		return null;
 	}
 
-	return !! downloadableItems.length ? (
+	if ( downloadableBlocks.length === 0 ) {
+		return hasLocalBlocks ? null : <DownloadableBlocksNoResults />;
+	}
+
+	return (
 		<DownloadableBlocksInserterPanel
-			downloadableItems={ downloadableItems }
+			downloadableItems={ downloadableBlocks }
 			hasLocalBlocks={ hasLocalBlocks }
 		>
 			<DownloadableBlocksList
-				items={ downloadableItems }
+				items={ downloadableBlocks }
 				onSelect={ onSelect }
 				onHover={ onHover }
 			/>
 		</DownloadableBlocksInserterPanel>
-	) : (
-		! hasLocalBlocks && <DownloadableBlocksNoResults />
 	);
 }
-
-export default compose( [
-	withSelect( ( select, { filterValue, rootClientId = null } ) => {
-		const { getDownloadableBlocks, isRequestingDownloadableBlocks } =
-			select( blockDirectoryStore );
-		const { canInsertBlockType } = select( blockEditorStore );
-
-		const hasPermission = select( coreStore ).canUser(
-			'read',
-			'block-directory/search'
-		);
-
-		function getInstallableBlocks( term ) {
-			return getDownloadableBlocks( term ).filter( ( block ) =>
-				canInsertBlockType( block, rootClientId, true )
-			);
-		}
-
-		const downloadableItems = hasPermission
-			? getInstallableBlocks( filterValue )
-			: [];
-		const isLoading = isRequestingDownloadableBlocks( filterValue );
-
-		return {
-			downloadableItems,
-			hasPermission,
-			isLoading,
-		};
-	} ),
-] )( DownloadableBlocksPanel );
diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
index ff3fdb9ea8e319..f4df5ad4abda53 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
@@ -32,6 +32,3 @@
 	margin-top: 0;
 }
 
-.block-directory-downloadable-blocks-panel button {
-	margin-top: $grid-unit-05;
-}
diff --git a/packages/block-directory/src/lock-unlock.js b/packages/block-directory/src/lock-unlock.js
new file mode 100644
index 00000000000000..79b82edbc0fc78
--- /dev/null
+++ b/packages/block-directory/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/block-directory'
+	);
diff --git a/packages/block-directory/src/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js
index 58d6cdb1a188cb..43c051cb9aa371 100644
--- a/packages/block-directory/src/plugins/get-install-missing/index.js
+++ b/packages/block-directory/src/plugins/get-install-missing/index.js
@@ -100,7 +100,12 @@ const ModifiedWarning = ( { originalBlock, ...props } ) => {
 			originalBlock.title || originalName
 		);
 		actions.push(
-			<Button key="convert" onClick={ convertToHTML } variant="tertiary">
+			<Button
+				__next40pxDefaultSize
+				key="convert"
+				onClick={ convertToHTML }
+				variant="tertiary"
+			>
 				{ __( 'Keep as HTML' ) }
 			</Button>
 		);
diff --git a/packages/block-directory/src/plugins/get-install-missing/install-button.js b/packages/block-directory/src/plugins/get-install-missing/install-button.js
index 2dc01184bdeb4a..ec4a48dd39bf53 100644
--- a/packages/block-directory/src/plugins/get-install-missing/install-button.js
+++ b/packages/block-directory/src/plugins/get-install-missing/install-button.js
@@ -22,6 +22,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 
 	return (
 		<Button
+			__next40pxDefaultSize
 			onClick={ () =>
 				installBlockType( block ).then( ( success ) => {
 					if ( success ) {
@@ -42,6 +43,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 					}
 				} )
 			}
+			accessibleWhenDisabled
 			disabled={ isInstallingBlock }
 			isBusy={ isInstallingBlock }
 			variant="primary"
diff --git a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
index badcc407c78cb5..34fc9011b9a1cf 100644
--- a/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
+++ b/packages/block-directory/src/plugins/inserter-menu-downloadable-blocks-panel/index.js
@@ -16,13 +16,7 @@ function InserterMenuDownloadableBlocksPanel() {
 
 	return (
 		<__unstableInserterMenuExtension>
-			{ ( {
-				onSelect,
-				onHover,
-				filterValue,
-				hasItems,
-				rootClientId,
-			} ) => {
+			{ ( { onSelect, onHover, filterValue, hasItems } ) => {
 				if ( debouncedFilterValue !== filterValue ) {
 					debouncedSetFilterValue( filterValue );
 				}
@@ -35,7 +29,6 @@ function InserterMenuDownloadableBlocksPanel() {
 					<DownloadableBlocksPanel
 						onSelect={ onSelect }
 						onHover={ onHover }
-						rootClientId={ rootClientId }
 						filterValue={ debouncedFilterValue }
 						hasLocalBlocks={ hasItems }
 						isTyping={ filterValue !== debouncedFilterValue }
diff --git a/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js
index a51b68fcaffef2..17630c9904e8bd 100644
--- a/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js
+++ b/packages/block-directory/src/plugins/installed-blocks-pre-publish-panel/index.js
@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { _n, sprintf } from '@wordpress/i18n';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
 import { useSelect } from '@wordpress/data';
 import { blockDefault } from '@wordpress/icons';
+import { PluginPrePublishPanel } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -34,7 +34,7 @@ export default function InstalledBlocksPrePublishPanel() {
 				),
 				newBlockTypes.length
 			) }
-			initialOpen={ true }
+			initialOpen
 		>
 			<p className="installed-blocks-pre-publish-panel__copy">
 				{ _n(
diff --git a/packages/block-directory/src/store/selectors.js b/packages/block-directory/src/store/selectors.js
index e9b73b51f4544d..f7e541dd14ed82 100644
--- a/packages/block-directory/src/store/selectors.js
+++ b/packages/block-directory/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
@@ -53,15 +53,21 @@ export function getInstalledBlockTypes( state ) {
  *
  * @return {Array} Block type items.
  */
-export const getNewBlockTypes = createRegistrySelector(
-	( select ) => ( state ) => {
-		const usedBlockTree = select( blockEditorStore ).getBlocks();
-		const installedBlockTypes = getInstalledBlockTypes( state );
+export const getNewBlockTypes = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			const usedBlockTree = select( blockEditorStore ).getBlocks();
+			const installedBlockTypes = getInstalledBlockTypes( state );
 
-		return installedBlockTypes.filter( ( blockType ) =>
-			hasBlockType( blockType, usedBlockTree )
-		);
-	}
+			return installedBlockTypes.filter( ( blockType ) =>
+				hasBlockType( blockType, usedBlockTree )
+			);
+		},
+		( state ) => [
+			getInstalledBlockTypes( state ),
+			select( blockEditorStore ).getBlocks(),
+		]
+	)
 );
 
 /**
@@ -72,15 +78,21 @@ export const getNewBlockTypes = createRegistrySelector(
  *
  * @return {Array} Block type items.
  */
-export const getUnusedBlockTypes = createRegistrySelector(
-	( select ) => ( state ) => {
-		const usedBlockTree = select( blockEditorStore ).getBlocks();
-		const installedBlockTypes = getInstalledBlockTypes( state );
+export const getUnusedBlockTypes = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			const usedBlockTree = select( blockEditorStore ).getBlocks();
+			const installedBlockTypes = getInstalledBlockTypes( state );
 
-		return installedBlockTypes.filter(
-			( blockType ) => ! hasBlockType( blockType, usedBlockTree )
-		);
-	}
+			return installedBlockTypes.filter(
+				( blockType ) => ! hasBlockType( blockType, usedBlockTree )
+			);
+		},
+		( state ) => [
+			getInstalledBlockTypes( state ),
+			select( blockEditorStore ).getBlocks(),
+		]
+	)
 );
 
 /**
diff --git a/packages/block-editor/.npmrc b/packages/block-editor/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/block-editor/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 4d37bf5737599c..87dc0459bfb715 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,28 +2,207 @@
 
 ## Unreleased
 
+## 14.8.0 (2024-11-27)
+
+## 14.7.0 (2024-11-16)
+
+## 14.6.0 (2024-10-30)
+
+## 14.5.0 (2024-10-16)
+
+## 14.4.0 (2024-10-03)
+
+## 14.3.0 (2024-09-19)
+
+## 14.2.0 (2024-09-05)
+
+## 14.1.0 (2024-08-21)
+
+## 14.0.0 (2024-08-07)
+
+### Breaking Changes
+
+-   `URLInput`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64282](https://github.com/WordPress/gutenberg/pull/64282)).
+-   `LineHeightControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#64281](https://github.com/WordPress/gutenberg/pull/64281)).
+
+### Enhancements
+
+-   `FontFamilyControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#64280](https://github.com/WordPress/gutenberg/pull/64280)).
+
+## 13.4.0 (2024-07-24)
+
+## 13.3.0 (2024-07-10)
+
+## 13.2.0 (2024-06-26)
+
+## 13.1.0 (2024-06-15)
+
+## 13.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 12.26.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 12.25.0 (2024-05-02)
+
+## 12.24.0 (2024-04-19)
+
+## 12.23.0 (2024-04-03)
+
+## 12.22.0 (2024-03-21)
+
+## 12.21.0 (2024-03-06)
+
+## 12.20.0 (2024-02-21)
+
+## 12.19.0 (2024-02-09)
+
+-   `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)).
+
+## 12.18.0 (2024-01-24)
+
+-   Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.
+
+## 12.17.0 (2024-01-10)
+
+## 12.16.0 (2023-12-13)
+
+## 12.15.0 (2023-11-29)
+
+## 12.14.0 (2023-11-16)
+
+## 12.13.0 (2023-11-02)
+
+-   Deprecated the `useSetting` function in favor of new `useSettings` one that can retrieve multiple settings at once ([#55337](https://github.com/WordPress/gutenberg/pull/55337)).
+
+## 12.12.0 (2023-10-18)
+
+## 12.11.0 (2023-10-05)
+
+-   Deprecated `CopyHandler`, absorbed into `WritingFlow`.
+
+## 12.10.0 (2023-09-20)
+
+-   The Deprecated multiline prop on RichText will now fall back to using multiple
+    rich text instances instead of a single multiline instance. The prop remains
+    deprecated.
+
+## 12.9.0 (2023-08-31)
+
+### Enhancements
+
+-   Embed the `ObserveTyping` behavior within the `BlockList` component making to simplify instanciations of third-party block editors.
+
+## 12.8.0 (2023-08-16)
+
+## 12.7.0 (2023-08-10)
+
+## 12.6.0 (2023-07-20)
+
+## 12.5.0 (2023-07-05)
+
+## 12.4.0 (2023-06-23)
+
+### Enhancements
+
+-   Add `HeadingLevelDropdown` component for selecting H1-H6 and paragraph HTML tags from the block toolbar.
+
+### Bug Fixes
+
+-   Fluid typography: custom font-sizes should use max viewport width ([#51516](https://github.com/WordPress/gutenberg/pull/51516)).
+
+## 12.3.0 (2023-06-07)
+
+## 12.2.0 (2023-05-24)
+
+## 12.1.0 (2023-05-10)
+
+-   `MediaPlaceholder`: Remove the undocumented `onHTMLDrop` prop ([#49673](https://github.com/WordPress/gutenberg/pull/49673)).
+
+## 12.0.0 (2023-04-26)
+
+### Breaking Changes
+
+-   Renamed utility function `immutableSet` to `setImmutably` ([#50040](https://github.com/WordPress/gutenberg/pull/50040)).
+
+## 11.8.0 (2023-04-12)
+
+## 11.7.0 (2023-03-29)
+
+-   `ImageSizeControl`: Update image size label ([#49112](https://github.com/WordPress/gutenberg/pull/49112)).
+
+## 11.6.0 (2023-03-15)
+
+## 11.5.0 (2023-03-01)
+
+### Bug Fixes
+
+-   `SpacingSizesControl`: fix white dot on thumb ([#48574](https://github.com/WordPress/gutenberg/pull/48574)).
+
+## 11.4.0 (2023-02-15)
+
+### Bug Fixes
+
+-   `LinkControl`: fix scrollbar displayed on toggle link settings ([#47986](https://github.com/WordPress/gutenberg/pull/47986)).
+
+## 11.3.0 (2023-02-01)
+
+## 11.2.0 (2023-01-11)
+
+### Bug Fixes
+
+-   `BlockInspector`: Fix browser warning error when block is not selected ([#46875](https://github.com/WordPress/gutenberg/pull/46875)).
+-   Move component styles needed for iframes to content styles ([#47103](https://github.com/WordPress/gutenberg/pull/47103)).
+-   Block Inserter: Correctly apply style to the default inserter ([#47166](https://github.com/WordPress/gutenberg/pull/47166)).
+-   List View: Fix crash when the first template-parts is deleted width del key ([#47227](https://github.com/WordPress/gutenberg/pull/47227)).
+
+## 11.1.0 (2023-01-02)
+
+## 11.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+### 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)).
+-   `URLInput`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([46692](https://github.com/WordPress/gutenberg/pull/46692)).
+
+### Bug Fixes
+
+-   `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)
 
-### Enhancement
+### Enhancements
 
 -   `BlockLockModal`: Move Icon component out of CheckboxControl label ([#45535](https://github.com/WordPress/gutenberg/pull/45535))
 -   Fluid typography: adjust font size min and max rules ([#45536](https://github.com/WordPress/gutenberg/pull/45536)).
 
 ## 10.4.0 (2022-11-02)
 
-### Bug Fix
+### Bug Fixes
 
 -   `InserterListItem`: Fix dragging and dropping in Firefox. ([#44631](https://github.com/WordPress/gutenberg/pull/44631))
 
 ## 10.3.0 (2022-10-19)
 
-### Bug Fix
+### Bug Fixes
 
 -   `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))
 -   `getTypographyClassesAndStyles()`: Ensure that font sizes are transformed into fluid values if fluid typography is activated ([#44852](https://github.com/WordPress/gutenberg/pull/44852))
 -   `BlockPopover`: Ensure that padding and margin visualizers display in correct position even when scrolling past block. ([#44998](https://github.com/WordPress/gutenberg/pull/44998))
 
-### New features
+### New Features
 
 -   You can now drop files/blocks/HTML on unmodified default blocks to transform them into corresponding blocks ([#44647](https://github.com/WordPress/gutenberg/pull/44647)).
 
@@ -33,7 +212,7 @@
 
 ## 10.0.0 (2022-09-13)
 
-### Breaking change
+### Breaking Changes
 
 -   `FontSizePicker`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43870](https://github.com/WordPress/gutenberg/pull/43870)).
 
@@ -49,7 +228,7 @@
 
 ## 9.3.0 (2022-06-15)
 
-### Bug fix
+### Bug Fixes
 
 -   Fix focus trap on certain `input` elements when navigating within a block with the left/right arrow keys ([#41538](https://github.com/WordPress/gutenberg/pull/41538)).
 
@@ -59,7 +238,7 @@
 
 ## 9.0.0 (2022-05-04)
 
-### Breaking change
+### Breaking Changes
 
 -   `BlockNavigationDropdown` is now deprecated. Use the `Dropdown` component from the `@wordpress/components` package and the `ListView` component from this package ([#40777](https://github.com/WordPress/gutenberg/pull/40777)).
 -   `ListView` no longer accepts the `__experimentalFeatures`, `__experimentalPersistentListViewFeatures`, `__experimentalHideContainerBlockActions`, and `showNestedBlocks` props. Passing additional undocumented props through to `ListView` is also now disallowed. ([#40777](https://github.com/WordPress/gutenberg/pull/40777)).
@@ -80,7 +259,7 @@
 
 ## 8.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/block-serialization-default-parser`, `css-mediaquery`, `memize` and `redux-multi` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -97,13 +276,13 @@
 -   Avoid re-rendering all List View items on block focus [#35706](https://github.com/WordPress/gutenberg/pull/35706). When List View is open Block focus time is 4 times faster in large posts.
 -   Render fixed number of items in List View [#35706](https://github.com/WordPress/gutenberg/pull/35230). Opening List View is 13 times faster in large posts.
 
-### Breaking change
+### Breaking Changes
 
 -   List View no longer supports the `showOnlyCurrentHierarchy` flag [#35706](https://github.com/WordPress/gutenberg/pull/35706). To display a subset of blocks, use the `blocks` parameter instead.
 
 ## 7.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -119,8 +298,8 @@
 
 ### 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/.
+-   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/>.
 
 ## 5.3.0 (2021-03-17)
 
@@ -128,7 +307,7 @@
 
 ## 5.2.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the block editor namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
@@ -157,7 +336,7 @@
 
 -   Added a `label` prop to `URLInput`. This allows the label to be set without needing to wrap the `URLInput` in a `BaseControl`.
 
-### Deprecation
+### Deprecations
 
 -   `dropZoneUIOnly` prop in `MediaPlaceholder` component has been deprecated in favor of `disableMediaButtons` prop.
 
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 5760f1584c5db8..a0f75683914408 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -15,15 +15,12 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 ## Usage
 
 ```js
+import { useState } from 'react';
 import {
+	BlockCanvas,
 	BlockEditorProvider,
 	BlockList,
-	BlockTools,
-	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
-import { SlotFillProvider, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function MyEditorComponent() {
 	const [ blocks, updateBlocks ] = useState( [] );
@@ -34,16 +31,7 @@ function MyEditorComponent() {
 			onInput={ ( blocks ) => updateBlocks( blocks ) }
 			onChange={ ( blocks ) => updateBlocks( blocks ) }
 		>
-			<SlotFillProvider>
-				<BlockTools>
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
-					</WritingFlow>
-				</BlockTools>
-				<Popover.Slot />
-			</SlotFillProvider>
+			<BlockCanvas height="400px" />
 		</BlockEditorProvider>
 	);
 }
@@ -57,7 +45,7 @@ In this example, we're instantiating a block editor. A block editor is composed
 
 Inside `BlockEditorProvider`, you can nest any of the available `@wordpress/block-editor` UI components to build the UI of your editor.
 
-In the example above we're rendering the `BlockList` to show and edit the block list. For instance we could add a custom sidebar and use the `BlockInspector` component to be able to edit the advanced settings for the currently selected block. (See the [API](#API) for the list of all the available components).
+In the example above we're rendering the `BlockList` to show and edit the block list. For instance we could add a custom sidebar and use the `BlockInspector` component to be able to edit the advanced settings for the currently selected block. (See the [API](#api) for the list of all the available components).
 
 The `BlockTools` component is used to render the toolbar for a selected block.
 
@@ -76,6 +64,10 @@ registerCoreBlocks();
 
 ## API
 
+Any components in this package that have a counterpart in [@wordpress/components](/packages/components/README.md) are an extension of those components.
+
+Unless you're [creating an editor](/docs/how-to-guides/platform/custom-block-editor.md), it is recommended that the components in @wordpress/components should be used rather than the ones in this package as these components have been customized for use in an editor and may result in unexpected behaviour if used outside of this context.
+
 <!-- START TOKEN(Autogenerated API docs) -->
 
 ### AlignmentControl
@@ -119,7 +111,39 @@ _Parameters_
 
 _Returns_
 
--   `WPElement`: Block Breadcrumb.
+-   `Element`: Block Breadcrumb.
+
+### BlockCanvas
+
+BlockCanvas component is a component used to display the canvas of the block editor. What we call the canvas is an iframe containing the block list that you can manipulate. The component is also responsible of wiring up all the necessary hooks to enable the keyboard navigation across blocks in the editor and inject content styles into the iframe.
+
+_Usage_
+
+```jsx
+function MyBlockEditor() {
+	const [ blocks, updateBlocks ] = useState( [] );
+	return (
+		<BlockEditorProvider
+			value={ blocks }
+			onInput={ updateBlocks }
+			onChange={ persistBlocks }
+		>
+			<BlockCanvas height="400px" />
+		</BlockEditorProvider>
+	);
+}
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.height_ `string`: Canvas height, defaults to 300px.
+-   _props.styles_ `Array`: Content styles to inject into the iframe.
+-   _props.children_ `Element`: Content of the canvas, defaults to the BlockList component.
+
+_Returns_
+
+-   `Element`: Block Breadcrumb.
 
 ### BlockColorsStyleSelector
 
@@ -183,6 +207,12 @@ _Related_
 
 Undocumented declaration.
 
+### BlockPopover
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md>
+
 ### BlockPreview
 
 BlockPreview renders a preview of a block or array of blocks.
@@ -199,7 +229,7 @@ _Parameters_
 
 _Returns_
 
--   `WPComponent`: The component to be rendered.
+-   `Component`: The component to be rendered.
 
 ### BlockSelectionClearer
 
@@ -221,7 +251,7 @@ _Parameters_
 
 _Returns_
 
--   `WPElement`: Element.
+-   `Element`: Element.
 
 ### BlockStyles
 
@@ -229,8 +259,7 @@ Undocumented declaration.
 
 ### BlockTitle
 
-Renders the block's configured title as a string, or empty if the title
-cannot be determined.
+Renders the block's configured title as a string, or empty if the title cannot be determined.
 
 _Usage_
 
@@ -254,15 +283,21 @@ _Returns_
 
 ### BlockToolbar
 
+Renders the block toolbar.
+
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md>
 
+_Parameters_
+
+-   _props_ `Object`: Components props.
+-   _props.hideDragHandle_ `boolean`: Show or hide the Drag Handle for drag and drop functionality.
+-   _props.variant_ `string`: Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
+
 ### BlockTools
 
-Renders block tools (the block toolbar, select/navigation mode toolbar, the
-insertion point and a slot for the inline rich text toolbar). Must be wrapped
-around the block content and editor styles wrapper or iframe.
+Renders block tools (the block toolbar, select/navigation mode toolbar, the insertion point and a slot for the inline rich text toolbar). Must be wrapped around the block content and editor styles wrapper or iframe.
 
 _Parameters_
 
@@ -310,14 +345,15 @@ _Related_
 
 ### CopyHandler
 
-_Related_
+> **Deprecated**
 
--   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md>
+_Parameters_
+
+-   _props_ `Object`:
 
 ### createCustomColorsHOC
 
-A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic
-for class generation color value, retrieval and color attribute setting.
+A higher-order component factory for creating a 'withCustomColors' HOC, which handles color logic for class generation color value, retrieval and color attribute setting.
 
 Use this higher-order component to work with a custom set of colors.
 
@@ -369,8 +405,7 @@ _Returns_
 
 ### getColorObjectByAttributeValues
 
-Provided an array of color objects as set by the theme or by the editor defaults,
-and the values of the defined color or custom color returns a color object describing the color.
+Provided an array of color objects as set by the theme or by the editor defaults, and the values of the defined color or custom color returns a color object describing the color.
 
 _Parameters_
 
@@ -397,12 +432,9 @@ _Returns_
 
 ### getComputedFluidTypographyValue
 
-Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
-font size OR a single font size can be specified.
+Computes a fluid font-size value that uses clamp(). A minimum and maximum font size OR a single font size can be specified.
 
-If a single font size is specified, it is scaled up and down by
-minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
-maximum sizes.
+If a single font size is specified, it is scaled up and down using a logarithmic scale.
 
 _Usage_
 
@@ -421,22 +453,34 @@ const fontSize = getComputedFluidTypographyValue( {
 _Parameters_
 
 -   _args_ `Object`:
--   _args.minimumViewPortWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
--   _args.maximumViewPortWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+-   _args.minimumViewportWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+-   _args.maximumViewportWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified.
 -   _args.fontSize_ `[string|number]`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
 -   _args.maximumFontSize_ `?string`: Maximum font size for any clamp() calculation. Optional.
 -   _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_
 
 -   `string|null`: A font-size value using clamp().
 
+### getCustomValueFromPreset
+
+Converts a spacing preset into a custom value.
+
+_Parameters_
+
+-   _value_ `string`: Value to convert
+-   _spacingSizes_ `Array`: Array of the current spacing preset objects
+
+_Returns_
+
+-   `string`: Mapping of the spacing preset to its equivalent custom value.
+
 ### getFontSize
 
-Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
-If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
+Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned.
 
 _Parameters_
 
@@ -458,7 +502,7 @@ _Parameters_
 
 _Returns_
 
--   `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
+-   `string | undefined`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
 
 ### getFontSizeObjectByValue
 
@@ -501,31 +545,70 @@ _Returns_
 
 ### getPxFromCssUnit
 
-Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+> **Deprecated**
+
+This function was accidentally exposed for mobile/native usage.
+
+_Returns_
+
+-   `string`: Empty string.
+
+### getSpacingPresetCssVar
+
+Converts a spacing preset into a custom value.
 
 _Parameters_
 
--   _cssUnit_ `string`:
--   _options_ `Object`:
+-   _value_ `string`: Value to convert.
 
 _Returns_
 
--   `string`: returns the cssUnit value in a simple px format.
+-   `string | undefined`: CSS var string for given spacing preset value.
 
 ### getTypographyClassesAndStyles
 
-Provides the CSS class names and inline styles for a block's typography support
-attributes.
+Provides the CSS class names and inline styles for a block's typography support attributes.
 
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
--   _isFluidFontSizeActive_ `boolean`: Whether the function should try to convert font sizes to fluid values.
+-   _settings_ `Object|boolean`: Merged theme.json settings
 
 _Returns_
 
 -   `Object`: Typography block support derived CSS classes & styles.
 
+### HeadingLevelDropdown
+
+Dropdown for selecting a heading level (1 through 6) or paragraph (0).
+
+_Parameters_
+
+-   _props_ `WPHeadingLevelDropdownProps`: Component props.
+
+_Returns_
+
+-   `ComponentType`: The toolbar.
+
+### HeightControl
+
+HeightControl renders a linked unit control and range control for adjusting the height of a block.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md>
+
+_Parameters_
+
+-   _props_ `Object`:
+-   _props.label_ `?string`: A label for the control.
+-   _props.onChange_ `( value: string ) => void`: Called when the height changes.
+-   _props.value_ `string`: The current height value.
+
+_Returns_
+
+-   `Component`: The component to be rendered.
+
 ### InnerBlocks
 
 _Related_
@@ -546,6 +629,18 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md>
 
+### isValueSpacingPreset
+
+Checks is given value is a spacing preset.
+
+_Parameters_
+
+-   _value_ `string`: Value to check
+
+_Returns_
+
+-   `boolean`: Return true if value is string in format var:preset|spacing|.
+
 ### JustifyContentControl
 
 _Related_
@@ -592,8 +687,7 @@ _Related_
 
 > **Deprecated**
 
-Scrolls the multi block selection end into view if not in view already. This
-is important to do after selection by keyboard.
+Scrolls the multi block selection end into view if not in view already. This is important to do after selection by keyboard.
 
 ### NavigableToolbar
 
@@ -615,6 +709,27 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md>
 
+### privateApis
+
+Private @wordpress/block-editor APIs.
+
+### RecursionProvider
+
+A React context provider for use with the `useHasRecursion` hook to prevent recursive renders.
+
+Wrap block content with this provider and provide the same `uniqueId` prop as used with `useHasRecursion`.
+
+_Parameters_
+
+-   _props_ `Object`:
+-   _props.uniqueId_ `*`: Any value that acts as a unique identifier for a block instance.
+-   _props.blockName_ `string`: Optional block name.
+-   _props.children_ `JSX.Element`: React children.
+
+_Returns_
+
+-   `JSX.Element`: A React element.
+
 ### RichText
 
 _Related_
@@ -646,6 +761,7 @@ _Properties_
 -   _maxWidth_ `number`: Max width to constraint resizing
 -   _allowedBlockTypes_ `boolean|Array`: Allowed block types
 -   _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
+-   _distractionFree_ `boolean`: Whether or not the editor UI is distraction free
 -   _focusMode_ `boolean`: Whether the focus mode is enabled or not
 -   _styles_ `Array`: Editor Styles
 -   _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode
@@ -654,12 +770,12 @@ _Properties_
 -   _canLockBlocks_ `boolean`: Whether the user can manage Block Lock state
 -   _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
 -   _generateAnchors_ `boolean`: Enable/Disable auto anchor generation for Heading blocks
+-   _enableOpenverseMediaCategory_ `boolean`: Enable/Disable the Openverse media category in the inserter.
+-   _clearBlockSelection_ `boolean`: Whether the block editor should clear selection on mousedown when a block is not clicked.
 -   _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
--   _\_\_experimentalClearBlockSelection_ `boolean`: Whether the block editor should clear selection on mousedown when a block is not clicked.
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
--   _\_\_unstableGalleryWithImageBlocks_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks
 
 ### SkipToSelectedBlock
 
@@ -693,8 +809,9 @@ Applies a series of CSS rule transforms to wrap selectors inside a given class a
 
 _Parameters_
 
--   _styles_ `Array`: CSS rules.
--   _wrapperClassName_ `string`: Wrapper Class Name.
+-   _styles_ `EditorStyle[]`: CSS rules.
+-   _wrapperSelector_ `string`: Wrapper selector.
+-   _transformOptions_ `TransformOptions`: Additional options for style transformation.
 
 _Returns_
 
@@ -702,9 +819,7 @@ _Returns_
 
 ### Typewriter
 
-Ensures that the text selection keeps the same vertical distance from the
-viewport during keyboard events within this component. The vertical distance
-can vary. It is the last clicked or scrolled to position.
+Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.
 
 ### URLInput
 
@@ -724,17 +839,65 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-popover/README.md>
 
+### useBlockBindingsUtils
+
+Retrieves the existing utils needed to update the block `bindings` metadata. They can be used to create, modify, or remove connections from the existing block attributes.
+
+It contains the following utils:
+
+-   `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+-   `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+
+_Usage_
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+
+// Update url and alt attributes.
+updateBlockBindings( {
+	url: {
+		source: 'core/post-meta',
+		args: {
+			key: 'url_custom_field',
+		},
+	},
+	alt: {
+		source: 'core/post-meta',
+		args: {
+			key: 'text_custom_field',
+		},
+	},
+} );
+
+// Remove binding from url attribute.
+updateBlockBindings( { url: undefined } );
+
+// Remove bindings from all attributes.
+removeAllBlockBindings();
+```
+
+_Parameters_
+
+-   _clientId_ `?string`: Optional block client ID. If not set, it will use the current block client ID from the context.
+
+_Returns_
+
+-   `?WPBlockBindingsUtils`: Object containing the block bindings utils.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
+### useBlockCommands
+
+Undocumented declaration.
+
 ### useBlockDisplayInformation
 
-Hook used to try to find a matching block variation and return
-the appropriate information for display reasons. In order to
-to try to find a match we need to things:
-1\. Block's client id to extract it's current attributes.
-2\. A block variation should have set `isActive` prop to a proper function.
+Hook used to try to find a matching block variation and return the appropriate information for display reasons. In order to to try to find a match we need to things: 1. Block's client id to extract it's current attributes. 2. A block variation should have set `isActive` prop to a proper function.
 
-If for any reason a block variaton match cannot be found,
-the returned information come from the Block Type.
-If no blockType is found with the provided clientId, returns null.
+If for any reason a block variation match cannot be found, the returned information come from the Block Type. If no blockType is found with the provided clientId, returns null.
 
 _Parameters_
 
@@ -746,24 +909,69 @@ _Returns_
 
 ### useBlockEditContext
 
-The `useBlockEditContext` hook provides information about the block this hook is being used in.
-It returns an object with the `name`, `isSelected` state, and the `clientId` of the block.
-It is useful if you want to create custom hooks that need access to the current blocks clientId
-but don't want to rely on the data getting passed in as a parameter.
+The `useBlockEditContext` hook provides information about the block this hook is being used in. It returns an object with the `name`, `isSelected` state, and the `clientId` of the block. It is useful if you want to create custom hooks that need access to the current blocks clientId but don't want to rely on the data getting passed in as a parameter.
 
 _Returns_
 
 -   `Object`: Block edit context
 
+### useBlockEditingMode
+
+Allows a block to restrict the user interface that is displayed for editing that block and its inner blocks.
+
+_Usage_
+
+```js
+function MyBlock( { attributes, setAttributes } ) {
+	useBlockEditingMode( 'disabled' );
+	return <div { ...useBlockProps() }></div>;
+}
+```
+
+`mode` can be one of three options:
+
+-   `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+    selected.
+-   `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+    toolbar, the block movers, block settings.
+-   `'default'`: Allows editing the block as normal.
+
+The mode is inherited by all of the block's inner blocks, unless they have
+their own mode.
+
+If called outside of a block context, the mode is applied to all blocks.
+
+_Parameters_
+
+-   _mode_ `?BlockEditingMode`: The editing mode to apply. If undefined, the current editing mode is not changed.
+
+_Returns_
+
+-   `BlockEditingMode`: The current editing mode.
+
 ### useBlockProps
 
-This hook is used to lightly mark an element as a block element. The element
-should be the outermost element of a block. Call this hook and pass the
-returned props to the element to mark as a block. If you define a ref for the
-element, it is important to pass the ref to this hook, which the hook in turn
-will pass to the component through the props it returns. Optionally, you can
-also pass any other props through this hook, and they will be merged and
-returned.
+This hook is used to lightly mark an element as a block element. The element should be the outermost element of a block. Call this hook and pass the returned props to the element to mark as a block. If you define a ref for the element, it is important to pass the ref to this hook, which the hook in turn will pass to the component through the props it returns. Optionally, you can also pass any other props through this hook, and they will be merged and returned.
+
+Use of this hook on the outermost element of a block is required if using API >= v2.
+
+_Usage_
+
+```js
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function Edit() {
+	const blockProps = useBlockProps( {
+		className: 'my-custom-class',
+		style: {
+			color: '#222222',
+			backgroundColor: '#eeeeee',
+		},
+	} );
+
+	return <div { ...blockProps }></div>;
+}
+```
 
 _Parameters_
 
@@ -787,15 +995,24 @@ _Returns_
 
 -   `any`: value
 
+### useHasRecursion
+
+A React hook for keeping track of blocks previously rendered up in the block tree. Blocks susceptible to recursion can use this hook in their `Edit` function to prevent said recursion.
+
+Use this with the `RecursionProvider` component, using the same `uniqueId` value for both the hook and the provider.
+
+_Parameters_
+
+-   _uniqueId_ `*`: Any value that acts as a unique identifier for a block instance.
+-   _blockName_ `string`: Optional block name.
+
+_Returns_
+
+-   `boolean`: A boolean describing whether the provided id has already been rendered.
+
 ### useInnerBlocksProps
 
-This hook is used to lightly mark an element as an inner blocks wrapper
-element. Call this hook and pass the returned props to the element to mark as
-an inner blocks wrapper, automatically rendering inner blocks as children. If
-you define a ref for the element, it is important to pass the ref to this
-hook, which the hook in turn will pass to the component through the props it
-returns. Optionally, you can also pass any other props through this hook, and
-they will be merged and returned.
+This hook is used to lightly mark an element as an inner blocks wrapper element. Call this hook and pass the returned props to the element to mark as an inner blocks wrapper, automatically rendering inner blocks as children. If you define a ref for the element, it is important to pass the ref to this hook, which the hook in turn will pass to the component through the props it returns. Optionally, you can also pass any other props through this hook, and they will be merged and returned.
 
 _Related_
 
@@ -808,10 +1025,11 @@ _Parameters_
 
 ### useSetting
 
+> **Deprecated** 6.5.0 Use useSettings instead.
+
 Hook that retrieves the given setting for the block instance in use.
 
-It looks up the settings first in the block instance hierarchy.
-If none is found, it'll look it up in the block editor store.
+It looks up the setting first in the block instance hierarchy. If none is found, it'll look it up in the block editor settings.
 
 _Usage_
 
@@ -827,6 +1045,36 @@ _Returns_
 
 -   `any`: Returns the value defined for the setting.
 
+### useSettings
+
+Hook that retrieves the given settings for the block instance in use.
+
+It looks up the settings first in the block instance hierarchy. If none are found, it'll look them up in the block editor settings.
+
+_Usage_
+
+```js
+const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );
+```
+
+_Parameters_
+
+-   _paths_ `string[]`: The paths to the settings.
+
+_Returns_
+
+-   `any[]`: Returns the values defined for the settings.
+
+### useStyleOverride
+
+Override a block editor settings style. Leave the ID blank to create a new style.
+
+_Parameters_
+
+-   _override_ `Object`: Override object.
+-   _override.id_ `?string`: Id of the style override, leave blank to create a new style.
+-   _override.css_ `string`: CSS to apply.
+
 ### Warning
 
 _Related_
@@ -862,8 +1110,7 @@ _Returns_
 
 ### withFontSizes
 
-Higher-order component, which handles font size logic for class generation,
-font size value retrieval, and font size change handling.
+Higher-order component, which handles font size logic for class generation, font size value retrieval, and font size change handling.
 
 _Parameters_
 
@@ -875,13 +1122,12 @@ _Returns_
 
 ### WritingFlow
 
-Handles selection and navigation across blocks. This component should be
-wrapped around BlockList.
+Handles selection and navigation across blocks. This component should be wrapped around BlockList.
 
 _Parameters_
 
 -   _props_ `Object`: Component properties.
--   _props.children_ `WPElement`: Children to be rendered.
+-   _props.children_ `Element`: Children to be rendered.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index e90f7aaf4619f4..008e02355ac703 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.5.0",
+	"version": "14.8.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,61 +20,72 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
 		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/blob": "file:../blob",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/date": "file:../date",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/rich-text": "file:../rich-text",
-		"@wordpress/shortcode": "file:../shortcode",
-		"@wordpress/style-engine": "file:../style-engine",
-		"@wordpress/token-list": "file:../token-list",
-		"@wordpress/url": "file:../url",
-		"@wordpress/warning": "file:../warning",
-		"@wordpress/wordcount": "file:../wordcount",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-serialization-default-parser": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/token-list": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
+		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
-		"dom-scroll-into-view": "^1.2.1",
-		"inherits": "^2.0.3",
-		"lodash": "^4.17.21",
+		"fast-deep-equal": "^3.1.3",
+		"memize": "^2.1.0",
+		"parsel-js": "^1.1.2",
+		"postcss": "^8.4.21",
+		"postcss-prefix-selector": "^1.16.0",
+		"postcss-urlrebase": "^1.4.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-easy-crop": "^4.5.1",
-		"rememo": "^4.0.0",
-		"remove-accents": "^0.4.2",
-		"traverse": "^0.6.6"
+		"react-easy-crop": "^5.0.6",
+		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
index e5bcd2e78dbbf0..eedd5e102db2ca 100644
--- a/packages/block-editor/src/autocompleters/block.js
+++ b/packages/block-editor/src/autocompleters/block.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { orderBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,6 +5,8 @@ import { useSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	parse,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -20,16 +17,16 @@ import { searchBlockItems } from '../components/inserter/search-items';
 import useBlockTypesState from '../components/inserter/hooks/use-block-types-state';
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
+import { orderBy } from '../utils/sorting';
+import { orderInserterBlockItems } from '../utils/order-inserter-block-items';
 
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
 
-/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
-
 /**
  * Creates a blocks repeater for replacing the current block with a selected block type.
  *
- * @return {WPCompleter} A blocks completer.
+ * @return {Object} A blocks completer.
  */
 function createBlockCompleter() {
 	return {
@@ -38,26 +35,40 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName } = useSelect(
-				( select ) => {
+			const { rootClientId, selectedBlockId, prioritizedBlocks } =
+				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
-						getBlockName,
-						getBlockInsertionPoint,
+						getBlock,
+						getBlockListSettings,
+						getBlockRootClientId,
 					} = select( blockEditorStore );
+					const { getActiveBlockVariation } = select( blocksStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const { name: blockName, attributes } = getBlock(
+						selectedBlockClientId
+					);
+					const activeBlockVariation = getActiveBlockVariation(
+						blockName,
+						attributes
+					);
+					const _rootClientId = getBlockRootClientId(
+						selectedBlockClientId
+					);
 					return {
-						selectedBlockName: selectedBlockClientId
-							? getBlockName( selectedBlockClientId )
-							: null,
-						rootClientId: getBlockInsertionPoint().rootClientId,
+						selectedBlockId: activeBlockVariation
+							? `${ blockName }/${ activeBlockVariation.name }`
+							: blockName,
+						rootClientId: _rootClientId,
+						prioritizedBlocks:
+							getBlockListSettings( _rootClientId )
+								?.prioritizedInserterBlocks,
 					};
-				},
-				[]
-			);
+				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
-				noop
+				noop,
+				true
 			);
 
 			const filteredItems = useMemo( () => {
@@ -68,17 +79,21 @@ function createBlockCompleter() {
 							collections,
 							filterValue
 					  )
-					: orderBy( items, [ 'frecency' ], [ 'desc' ] );
+					: orderInserterBlockItems(
+							orderBy( items, 'frecency', 'desc' ),
+							prioritizedBlocks
+					  );
 
 				return initialFilteredItems
-					.filter( ( item ) => item.name !== selectedBlockName )
+					.filter( ( item ) => item.id !== selectedBlockId )
 					.slice( 0, SHOWN_BLOCK_TYPES );
 			}, [
 				filterValue,
-				selectedBlockName,
+				selectedBlockId,
 				items,
 				categories,
 				collections,
+				prioritizedBlocks,
 			] );
 
 			const options = useMemo(
@@ -110,14 +125,28 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const { name, initialAttributes, innerBlocks } = inserterItem;
+			const {
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+			} = inserterItem;
+
 			return {
 				action: 'replace',
-				value: createBlock(
-					name,
-					initialAttributes,
-					createBlocksFromInnerBlocksTemplate( innerBlocks )
-				),
+				value:
+					syncStatus === 'unsynced'
+						? parse( content, {
+								__unstableSkipMigrationLogs: true,
+						  } )
+						: createBlock(
+								name,
+								initialAttributes,
+								createBlocksFromInnerBlocksTemplate(
+									innerBlocks
+								)
+						  ),
 			};
 		},
 	};
@@ -126,6 +155,6 @@ function createBlockCompleter() {
 /**
  * Creates a blocks repeater for replacing the current block with a selected block type.
  *
- * @return {WPCompleter} A blocks completer.
+ * @return {Object} A blocks completer.
  */
 export default createBlockCompleter();
diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js
index d439c5e6587aa2..9088b65b4abc86 100644
--- a/packages/block-editor/src/autocompleters/link.js
+++ b/packages/block-editor/src/autocompleters/link.js
@@ -1,18 +1,19 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Icon, page, post } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const SHOWN_SUGGESTIONS = 10;
 
-/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
-
 /**
  * Creates a suggestion list for links to posts or pages.
  *
- * @return {WPCompleter} A links completer.
+ * @return {Object} A links completer.
  */
 function createLinkCompleter() {
 	return {
@@ -44,7 +45,7 @@ function createLinkCompleter() {
 						key="icon"
 						icon={ item.subtype === 'page' ? page : post }
 					/>
-					{ item.title }
+					{ decodeEntities( item.title ) }
 				</>
 			);
 		},
@@ -57,6 +58,6 @@ function createLinkCompleter() {
 /**
  * Creates a suggestion list for links to posts or pages..
  *
- * @return {WPCompleter} A link completer.
+ * @return {Object} A link completer.
  */
 export default createLinkCompleter();
diff --git a/packages/block-editor/src/autocompleters/style.scss b/packages/block-editor/src/autocompleters/style.scss
index 5380ddcfbe48b2..43acc4efc16a5e 100644
--- a/packages/block-editor/src/autocompleters/style.scss
+++ b/packages/block-editor/src/autocompleters/style.scss
@@ -4,6 +4,10 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-10;
 	}
+
+	&[aria-selected="true"] .block-editor-block-icon {
+		color: inherit !important;
+	}
 }
 
 .block-editor-autocompleters__link {
diff --git a/packages/block-editor/src/components/alignment-control/README.md b/packages/block-editor/src/components/alignment-control/README.md
index 5f52e19de8b979..c51da803c77aef 100644
--- a/packages/block-editor/src/components/alignment-control/README.md
+++ b/packages/block-editor/src/components/alignment-control/README.md
@@ -6,11 +6,6 @@ This component is mostly used for blocks that display text, such as Heading, Par
 
 ![Post Title block alignment options](https://make.wordpress.org/core/files/2020/09/post-title-block-alignment-options.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js
new file mode 100644
index 00000000000000..9d029c30b48466
--- /dev/null
+++ b/packages/block-editor/src/components/alignment-control/stories/aliginment-toolbar.story.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentToolbar } from '..';
+
+/**
+ * The `AlignmentToolbar` component renders a dropdown menu that displays alignment options for the selected block in `Toolbar`.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentToolbar',
+	component: AlignmentToolbar,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentToolbar
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};
diff --git a/packages/block-editor/src/components/alignment-control/stories/index.story.js b/packages/block-editor/src/components/alignment-control/stories/index.story.js
new file mode 100644
index 00000000000000..165f9343e1710b
--- /dev/null
+++ b/packages/block-editor/src/components/alignment-control/stories/index.story.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl } from '../';
+
+/**
+ * The `AlignmentControl` component renders a dropdown menu that displays alignment options for the selected block.
+ *
+ * This component is mostly used for blocks that display text, such as Heading, Paragraph, Post Author, Post Comments, Verse, Quote, Post Title, etc... And the available alignment options are `left`, `center` or `right` alignment.
+ *
+ * If you want to use the alignment control in a toolbar, you should use the `AlignmentToolbar` component instead.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentControl',
+	component: AlignmentControl,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};
diff --git a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap
index bf0267e8574d3b..c1383ae8ecc44a 100644
--- a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap
@@ -5,14 +5,14 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button
         align="custom-left"
         aria-label="My custom left"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -25,7 +25,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -35,7 +35,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-right"
         aria-label="My custom right"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -48,7 +48,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -66,7 +66,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align text"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -80,7 +80,7 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
         />
       </svg>
     </button>
@@ -93,14 +93,14 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align text"
   >
     <div>
       <button
         align="left"
         aria-label="Align text left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -113,7 +113,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
           />
         </svg>
       </button>
@@ -123,7 +123,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="center"
         aria-label="Align text center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -136,7 +136,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
           />
         </svg>
       </button>
@@ -146,7 +146,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="right"
         aria-label="Align text right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -159,7 +159,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
           />
         </svg>
       </button>
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..178ba294127c31 100644
--- a/packages/block-editor/src/components/alignment-control/test/index.js
+++ b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -48,9 +48,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<AlignmentUI
@@ -68,7 +66,7 @@ describe( 'AlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align text',
 			} )
 		);
 
@@ -83,9 +81,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change with undefined when a control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -109,9 +105,7 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should call on change a new value when the control is not active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<AlignmentUI
@@ -134,14 +128,12 @@ describe( 'AlignmentUI', () => {
 	} );
 
 	test( 'should allow custom alignment controls to be specified', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { container } = render(
 			<AlignmentUI
 				isToolbar
-				value={ 'custom-right' }
+				value="custom-right"
 				onChange={ onChangeSpy }
 				isCollapsed={ false }
 				alignmentControls={ [
diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index f50e69044f9e59..6b423a79aa9e06 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
  */
@@ -29,16 +24,15 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 ];
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align' ),
-	describedBy = __( 'Change text alignment' ),
+	label = __( 'Align text' ),
+	description = __( 'Change text alignment' ),
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -46,13 +40,14 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 
 	function setIcon() {
-		if ( activeAlignment ) return activeAlignment.icon;
+		if ( activeAlignment ) {
+			return activeAlignment.icon;
+		}
 		return isRTL() ? alignRight : alignLeft;
 	}
 
@@ -61,7 +56,7 @@ function AlignmentUI( {
 		? { isCollapsed }
 		: {
 				toggleProps: {
-					describedBy,
+					description,
 				},
 				popoverProps: POPOVER_PROPS,
 		  };
diff --git a/packages/components/src/mobile/audio-player/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/audio-url-parser.native.js
similarity index 100%
rename from packages/components/src/mobile/audio-player/audio-url-parser.native.js
rename to packages/block-editor/src/components/audio-player/audio-url-parser.native.js
diff --git a/packages/block-editor/src/components/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js
new file mode 100644
index 00000000000000..bee31ea5872ef5
--- /dev/null
+++ b/packages/block-editor/src/components/audio-player/index.native.js
@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import {
+	Text,
+	TouchableWithoutFeedback,
+	Linking,
+	Alert,
+	Platform,
+} from 'react-native';
+import { default as VideoPlayer } from 'react-native-video';
+
+/**
+ * WordPress dependencies
+ */
+import { View } from '@wordpress/primitives';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { audio, warning } from '@wordpress/icons';
+import {
+	requestImageFailedRetryDialog,
+	requestImageUploadCancelDialog,
+} from '@wordpress/react-native-bridge';
+import { getProtocol } from '@wordpress/url';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+import { parseAudioUrl } from './audio-url-parser.native';
+import { useEditorColorScheme } from '../global-styles/use-global-styles-context';
+
+const isIOS = Platform.OS === 'ios';
+
+function Player( {
+	isUploadInProgress,
+	isUploadFailed,
+	attributes,
+	isSelected,
+} ) {
+	const { id, src } = attributes;
+	const [ paused, setPaused ] = useState( true );
+
+	const onPressListen = () => {
+		if ( src ) {
+			if ( isIOS && this.player ) {
+				this.player.presentFullscreenPlayer();
+				return;
+			}
+
+			Linking.canOpenURL( src )
+				.then( ( supported ) => {
+					if ( ! supported ) {
+						Alert.alert(
+							__( 'Problem opening the audio' ),
+							__( 'No application can handle this request.' )
+						);
+					} else {
+						return Linking.openURL( src );
+					}
+				} )
+				.catch( () => {
+					Alert.alert(
+						__( 'Problem opening the audio' ),
+						__( 'An unknown error occurred. Please try again.' )
+					);
+				} );
+		}
+	};
+
+	const containerStyle = useEditorColorScheme(
+		styles.container,
+		styles.containerDark
+	);
+
+	const iconStyle = useEditorColorScheme( styles.icon, styles.iconDark );
+
+	const iconDisabledStyle = useEditorColorScheme(
+		styles.iconDisabled,
+		styles.iconDisabledDark
+	);
+
+	const isDisabled = isUploadFailed || isUploadInProgress;
+
+	const finalIconStyle = {
+		...iconStyle,
+		...( isDisabled && iconDisabledStyle ),
+	};
+
+	const iconContainerStyle = useEditorColorScheme(
+		styles.iconContainer,
+		styles.iconContainerDark
+	);
+
+	const titleContainerStyle = {
+		...styles.titleContainer,
+		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
+	};
+
+	const titleStyle = useEditorColorScheme( styles.title, styles.titleDark );
+
+	const uploadFailedStyle = useEditorColorScheme(
+		styles.uploadFailed,
+		styles.uploadFailedDark
+	);
+
+	const subtitleStyle = useEditorColorScheme(
+		styles.subtitle,
+		styles.subtitleDark
+	);
+
+	const finalSubtitleStyle = {
+		...subtitleStyle,
+		...( isUploadFailed && uploadFailedStyle ),
+	};
+
+	const buttonBackgroundStyle = useEditorColorScheme(
+		styles.buttonBackground,
+		styles.buttonBackgroundDark
+	);
+
+	let title = '';
+	let extension = '';
+
+	if ( src ) {
+		const result = parseAudioUrl( src );
+		extension = result.extension;
+		title = result.title;
+	}
+
+	const getSubtitleValue = () => {
+		if ( isUploadInProgress ) {
+			return __( 'Uploading…' );
+		}
+		if ( isUploadFailed ) {
+			return __( 'Failed to insert audio file. Please tap for options.' );
+		}
+		return (
+			extension +
+			// translators: displays audio file extension. e.g. MP3 audio file
+			__( 'audio file' )
+		);
+	};
+
+	function onAudioUploadCancelDialog() {
+		if ( isUploadInProgress ) {
+			requestImageUploadCancelDialog( id );
+		} else if ( id && getProtocol( src ) === 'file:' ) {
+			requestImageFailedRetryDialog( id );
+		}
+	}
+
+	return (
+		<TouchableWithoutFeedback
+			accessible={ ! isSelected }
+			disabled={ ! isSelected }
+			onPress={ onAudioUploadCancelDialog }
+		>
+			<View style={ containerStyle }>
+				<View style={ iconContainerStyle }>
+					<Icon icon={ audio } style={ finalIconStyle } size={ 24 } />
+				</View>
+				<View style={ titleContainerStyle }>
+					<Text style={ titleStyle }>{ title }</Text>
+					<View style={ styles.subtitleContainer }>
+						{ isUploadFailed && (
+							<Icon
+								icon={ warning }
+								style={ {
+									...styles.errorIcon,
+									...uploadFailedStyle,
+								} }
+								size={ 16 }
+							/>
+						) }
+						<Text style={ finalSubtitleStyle }>
+							{ getSubtitleValue() }
+						</Text>
+					</View>
+				</View>
+				{ ! isDisabled && (
+					<TouchableWithoutFeedback
+						accessibilityLabel={ __( 'Audio Player' ) }
+						accessibilityRole="button"
+						accessibilityHint={ __(
+							'Double tap to listen the audio file'
+						) }
+						onPress={ onPressListen }
+					>
+						<View style={ buttonBackgroundStyle }>
+							<Text style={ styles.buttonText }>
+								{ __( 'OPEN' ) }
+							</Text>
+						</View>
+					</TouchableWithoutFeedback>
+				) }
+				{ isIOS && (
+					<VideoPlayer
+						source={ { uri: src } }
+						paused={ paused }
+						ref={ ( ref ) => {
+							this.player = ref;
+						} }
+						controls={ false }
+						ignoreSilentSwitch="ignore"
+						onFullscreenPlayerWillPresent={ () => {
+							setPaused( false );
+						} }
+						onFullscreenPlayerDidDismiss={ () => {
+							setPaused( true );
+						} }
+					/>
+				) }
+			</View>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default withPreferredColorScheme( Player );
diff --git a/packages/components/src/mobile/audio-player/styles.scss b/packages/block-editor/src/components/audio-player/styles.native.scss
similarity index 100%
rename from packages/components/src/mobile/audio-player/styles.scss
rename to packages/block-editor/src/components/audio-player/styles.native.scss
diff --git a/packages/components/src/mobile/audio-player/test/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js
similarity index 100%
rename from packages/components/src/mobile/audio-player/test/audio-url-parser.native.js
rename to packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js
diff --git a/packages/block-editor/src/components/autocomplete/index.js b/packages/block-editor/src/components/autocomplete/index.js
index da211838089f52..91cc3aa4e7cf03 100644
--- a/packages/block-editor/src/components/autocomplete/index.js
+++ b/packages/block-editor/src/components/autocomplete/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clone } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -44,7 +39,9 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		if ( hasFilter( 'editor.Autocomplete.completers' ) ) {
 			// Provide copies so filters may directly modify them.
 			if ( filteredCompleters === completers ) {
-				filteredCompleters = filteredCompleters.map( clone );
+				filteredCompleters = filteredCompleters.map(
+					( completer ) => ( { ...completer } )
+				);
 			}
 
 			filteredCompleters = applyFilters(
diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
new file mode 100644
index 00000000000000..2703aa3988d64e
--- /dev/null
+++ b/packages/block-editor/src/components/background-image-control/index.js
@@ -0,0 +1,741 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+	__experimentalVStack as VStack,
+	DropZone,
+	FlexItem,
+	FocalPointPicker,
+	MenuItem,
+	VisuallyHidden,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+	Dropdown,
+	Placeholder,
+	Spinner,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
+import { useRef, useState, useEffect, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import { getResolvedValue } from '../global-styles/utils';
+import { hasBackgroundImageValue } from '../global-styles/background-panel';
+import { setImmutably } from '../../utils/object';
+import MediaReplaceFlow from '../media-replace-flow';
+import { store as blockEditorStore } from '../../store';
+
+import {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+} from '../../store/private-keys';
+
+const IMAGE_BACKGROUND_TYPE = 'image';
+
+const BACKGROUND_POPOVER_PROPS = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-global-styles-background-panel__popover',
+};
+const noop = () => {};
+
+/**
+ * Get the help text for the background size control.
+ *
+ * @param {string} value backgroundSize value.
+ * @return {string}      Translated help text.
+ */
+function backgroundSizeHelpText( value ) {
+	if ( value === 'cover' || value === undefined ) {
+		return __( 'Image covers the space evenly.' );
+	}
+	if ( value === 'contain' ) {
+		return __( 'Image is contained without distortion.' );
+	}
+	return __( 'Image has a fixed width.' );
+}
+
+/**
+ * Converts decimal x and y coords from FocalPointPicker to percentage-based values
+ * to use as backgroundPosition value.
+ *
+ * @param {{x?:number, y?:number}} value FocalPointPicker coords.
+ * @return {string}      				 backgroundPosition value.
+ */
+export const coordsToBackgroundPosition = ( value ) => {
+	if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
+		return undefined;
+	}
+
+	const x = isNaN( value.x ) ? 0.5 : value.x;
+	const y = isNaN( value.y ) ? 0.5 : value.y;
+
+	return `${ x * 100 }% ${ y * 100 }%`;
+};
+
+/**
+ * Converts backgroundPosition value to x and y coords for FocalPointPicker.
+ *
+ * @param {string} value backgroundPosition value.
+ * @return {{x?:number, y?:number}}       FocalPointPicker coords.
+ */
+export const backgroundPositionToCoords = ( value ) => {
+	if ( ! value ) {
+		return { x: undefined, y: undefined };
+	}
+
+	let [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );
+	x = isNaN( x ) ? undefined : x;
+	y = isNaN( y ) ? x : y;
+
+	return { x, y };
+};
+
+function InspectorImagePreviewItem( {
+	as = 'span',
+	imgUrl,
+	toggleProps = {},
+	filename,
+	label,
+	className,
+	onToggleCallback = noop,
+} ) {
+	useEffect( () => {
+		if ( typeof toggleProps?.isOpen !== 'undefined' ) {
+			onToggleCallback( toggleProps?.isOpen );
+		}
+	}, [ toggleProps?.isOpen, onToggleCallback ] );
+	return (
+		<ItemGroup as={ as } className={ className } { ...toggleProps }>
+			<HStack
+				justify="flex-start"
+				as="span"
+				className="block-editor-global-styles-background-panel__inspector-preview-inner"
+			>
+				{ imgUrl && (
+					<span
+						className="block-editor-global-styles-background-panel__inspector-image-indicator-wrapper"
+						aria-hidden
+					>
+						<span
+							className="block-editor-global-styles-background-panel__inspector-image-indicator"
+							style={ {
+								backgroundImage: `url(${ imgUrl })`,
+							} }
+						/>
+					</span>
+				) }
+				<FlexItem as="span" style={ imgUrl ? {} : { flexGrow: 1 } }>
+					<Truncate
+						numberOfLines={ 1 }
+						className="block-editor-global-styles-background-panel__inspector-media-replace-title"
+					>
+						{ label }
+					</Truncate>
+					<VisuallyHidden as="span">
+						{ imgUrl
+							? sprintf(
+									/* translators: %s: file name */
+									__( 'Background image: %s' ),
+									filename || label
+							  )
+							: __( 'No background image selected' ) }
+					</VisuallyHidden>
+				</FlexItem>
+			</HStack>
+		</ItemGroup>
+	);
+}
+
+function BackgroundControlsPanel( {
+	label,
+	filename,
+	url: imgUrl,
+	children,
+	onToggle: onToggleCallback = noop,
+	hasImageValue,
+} ) {
+	if ( ! hasImageValue ) {
+		return;
+	}
+
+	const imgLabel =
+		label || getFilename( imgUrl ) || __( 'Add background image' );
+
+	return (
+		<Dropdown
+			popoverProps={ BACKGROUND_POPOVER_PROPS }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className:
+						'block-editor-global-styles-background-panel__dropdown-toggle',
+					'aria-expanded': isOpen,
+					'aria-label': __(
+						'Background size, position and repeat options.'
+					),
+					isOpen,
+				};
+				return (
+					<InspectorImagePreviewItem
+						imgUrl={ imgUrl }
+						filename={ filename }
+						label={ imgLabel }
+						toggleProps={ toggleProps }
+						as="button"
+						onToggleCallback={ onToggleCallback }
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-editor-global-styles-background-panel__dropdown-content-wrapper"
+					paddingSize="medium"
+				>
+					{ children }
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function LoadingSpinner() {
+	return (
+		<Placeholder className="block-editor-global-styles-background-panel__loading">
+			<Spinner />
+		</Placeholder>
+	);
+}
+
+function BackgroundImageControls( {
+	onChange,
+	style,
+	inheritedValue,
+	onRemoveImage = noop,
+	onResetImage = noop,
+	displayInPanel,
+	defaultValues,
+} ) {
+	const [ isUploading, setIsUploading ] = useState( false );
+	const { getSettings } = useSelect( blockEditorStore );
+
+	const { id, title, url } = style?.background?.backgroundImage || {
+		...inheritedValue?.background?.backgroundImage,
+	};
+	const replaceContainerRef = useRef();
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+		setIsUploading( false );
+	};
+
+	const resetBackgroundImage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundImage' ],
+				undefined
+			)
+		);
+
+	const onSelectMedia = ( media ) => {
+		if ( ! media || ! media.url ) {
+			resetBackgroundImage();
+			setIsUploading( false );
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			setIsUploading( true );
+			return;
+		}
+
+		// For media selections originated from a file upload.
+		if (
+			( media.media_type &&
+				media.media_type !== IMAGE_BACKGROUND_TYPE ) ||
+			( ! media.media_type &&
+				media.type &&
+				media.type !== IMAGE_BACKGROUND_TYPE )
+		) {
+			onUploadError(
+				__( 'Only images can be used as a background image.' )
+			);
+			return;
+		}
+
+		const sizeValue =
+			style?.background?.backgroundSize || defaultValues?.backgroundSize;
+		const positionValue = style?.background?.backgroundPosition;
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				...style?.background,
+				backgroundImage: {
+					url: media.url,
+					id: media.id,
+					source: 'file',
+					title: media.title || undefined,
+				},
+				backgroundPosition:
+					/*
+					 * A background image uploaded and set in the editor receives a default background position of '50% 0',
+					 * when the background image size is the equivalent of "Tile".
+					 * This is to increase the chance that the image's focus point is visible.
+					 * This is in-editor only to assist with the user experience.
+					 */
+					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
+						? '50% 0'
+						: positionValue,
+				backgroundSize: sizeValue,
+			} )
+		);
+		setIsUploading( false );
+	};
+
+	// Drag and drop callback, restricting image to one.
+	const onFilesDrop = ( filesList ) => {
+		if ( filesList?.length > 1 ) {
+			onUploadError(
+				__( 'Only one image can be used as a background image.' )
+			);
+			return;
+		}
+		getSettings().mediaUpload( {
+			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
+			filesList,
+			onFileChange( [ image ] ) {
+				onSelectMedia( image );
+			},
+			onError: onUploadError,
+		} );
+	};
+
+	const hasValue = hasBackgroundImageValue( style );
+
+	const closeAndFocus = () => {
+		const [ toggleButton ] = focus.tabbable.find(
+			replaceContainerRef.current
+		);
+		// Focus the toggle button and close the dropdown menu.
+		// This ensures similar behaviour as to selecting an image, where the dropdown is
+		// closed and focus is redirected to the dropdown toggle button.
+		toggleButton?.focus();
+		toggleButton?.click();
+	};
+
+	const onRemove = () =>
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				backgroundImage: 'none',
+			} )
+		);
+	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
+	const imgLabel =
+		title || getFilename( url ) || __( 'Add background image' );
+
+	return (
+		<div
+			ref={ replaceContainerRef }
+			className="block-editor-global-styles-background-panel__image-tools-panel-item"
+		>
+			{ isUploading && <LoadingSpinner /> }
+			<MediaReplaceFlow
+				mediaId={ id }
+				mediaURL={ url }
+				allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
+				accept="image/*"
+				onSelect={ onSelectMedia }
+				popoverProps={ {
+					className: clsx( {
+						'block-editor-global-styles-background-panel__media-replace-popover':
+							displayInPanel,
+					} ),
+				} }
+				name={
+					<InspectorImagePreviewItem
+						className="block-editor-global-styles-background-panel__image-preview"
+						imgUrl={ url }
+						filename={ title }
+						label={ imgLabel }
+					/>
+				}
+				variant="secondary"
+				onError={ onUploadError }
+				onReset={ () => {
+					closeAndFocus();
+					onResetImage();
+				} }
+			>
+				{ canRemove && (
+					<MenuItem
+						onClick={ () => {
+							closeAndFocus();
+							onRemove();
+							onRemoveImage();
+						} }
+					>
+						{ __( 'Remove' ) }
+					</MenuItem>
+				) }
+			</MediaReplaceFlow>
+			<DropZone
+				onFilesDrop={ onFilesDrop }
+				label={ __( 'Drop to upload' ) }
+			/>
+		</div>
+	);
+}
+
+function BackgroundSizeControls( {
+	onChange,
+	style,
+	inheritedValue,
+	defaultValues,
+} ) {
+	const sizeValue =
+		style?.background?.backgroundSize ||
+		inheritedValue?.background?.backgroundSize;
+	const repeatValue =
+		style?.background?.backgroundRepeat ||
+		inheritedValue?.background?.backgroundRepeat;
+	const imageValue =
+		style?.background?.backgroundImage?.url ||
+		inheritedValue?.background?.backgroundImage?.url;
+	const isUploadedImage = style?.background?.backgroundImage?.id;
+	const positionValue =
+		style?.background?.backgroundPosition ||
+		inheritedValue?.background?.backgroundPosition;
+	const attachmentValue =
+		style?.background?.backgroundAttachment ||
+		inheritedValue?.background?.backgroundAttachment;
+
+	/*
+	 * Set default values for uploaded images.
+	 * The default values are passed by the consumer.
+	 * Block-level controls may have different defaults to root-level controls.
+	 * A falsy value is treated by default as `auto` (Tile).
+	 */
+	let currentValueForToggle =
+		! sizeValue && isUploadedImage
+			? defaultValues?.backgroundSize
+			: sizeValue || 'auto';
+	/*
+	 * The incoming value could be a value + unit, e.g. '20px'.
+	 * In this case set the value to 'tile'.
+	 */
+	currentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(
+		currentValueForToggle
+	)
+		? 'auto'
+		: currentValueForToggle;
+	/*
+	 * If the current value is `cover` and the repeat value is `undefined`, then
+	 * the toggle should be unchecked as the default state. Otherwise, the toggle
+	 * should reflect the current repeat value.
+	 */
+	const repeatCheckedValue = ! (
+		repeatValue === 'no-repeat' ||
+		( currentValueForToggle === 'cover' && repeatValue === undefined )
+	);
+
+	const updateBackgroundSize = ( next ) => {
+		// When switching to 'contain' toggle the repeat off.
+		let nextRepeat = repeatValue;
+		let nextPosition = positionValue;
+
+		if ( next === 'contain' ) {
+			nextRepeat = 'no-repeat';
+			nextPosition = undefined;
+		}
+
+		if ( next === 'cover' ) {
+			nextRepeat = undefined;
+			nextPosition = undefined;
+		}
+
+		if (
+			( currentValueForToggle === 'cover' ||
+				currentValueForToggle === 'contain' ) &&
+			next === 'auto'
+		) {
+			nextRepeat = undefined;
+			/*
+			 * A background image uploaded and set in the editor (an image with a record id),
+			 * receives a default background position of '50% 0',
+			 * when the toggle switches to "Tile". This is to increase the chance that
+			 * the image's focus point is visible.
+			 * This is in-editor only to assist with the user experience.
+			 */
+			if ( !! style?.background?.backgroundImage?.id ) {
+				nextPosition = '50% 0';
+			}
+		}
+
+		/*
+		 * Next will be null when the input is cleared,
+		 * in which case the value should be 'auto'.
+		 */
+		if ( ! next && currentValueForToggle === 'auto' ) {
+			next = 'auto';
+		}
+
+		onChange(
+			setImmutably( style, [ 'background' ], {
+				...style?.background,
+				backgroundPosition: nextPosition,
+				backgroundRepeat: nextRepeat,
+				backgroundSize: next,
+			} )
+		);
+	};
+
+	const updateBackgroundPosition = ( next ) => {
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundPosition' ],
+				coordsToBackgroundPosition( next )
+			)
+		);
+	};
+
+	const toggleIsRepeated = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundRepeat' ],
+				repeatCheckedValue === true ? 'no-repeat' : 'repeat'
+			)
+		);
+
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
+	// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.
+	const backgroundPositionValue =
+		! positionValue && isUploadedImage && 'contain' === sizeValue
+			? defaultValues?.backgroundPosition
+			: positionValue;
+
+	return (
+		<VStack spacing={ 3 } className="single-column">
+			<FocalPointPicker
+				__nextHasNoMarginBottom
+				label={ __( 'Focal point' ) }
+				url={ imageValue }
+				value={ backgroundPositionToCoords( backgroundPositionValue ) }
+				onChange={ updateBackgroundPosition }
+			/>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Fixed background' ) }
+				checked={ attachmentValue === 'fixed' }
+				onChange={ toggleScrollWithPage }
+			/>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size="__unstable-large"
+				label={ __( 'Size' ) }
+				value={ currentValueForToggle }
+				onChange={ updateBackgroundSize }
+				isBlock
+				help={ backgroundSizeHelpText(
+					sizeValue || defaultValues?.backgroundSize
+				) }
+			>
+				<ToggleGroupControlOption
+					key="cover"
+					value="cover"
+					label={ _x(
+						'Cover',
+						'Size option for background image control'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="contain"
+					value="contain"
+					label={ _x(
+						'Contain',
+						'Size option for background image control'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="tile"
+					value="auto"
+					label={ _x(
+						'Tile',
+						'Size option for background image control'
+					) }
+				/>
+			</ToggleGroupControl>
+			<HStack justify="flex-start" spacing={ 2 } as="span">
+				<UnitControl
+					aria-label={ __( 'Background image width' ) }
+					onChange={ updateBackgroundSize }
+					value={ sizeValue }
+					size="__unstable-large"
+					__unstableInputWidth="100px"
+					min={ 0 }
+					placeholder={ __( 'Auto' ) }
+					disabled={
+						currentValueForToggle !== 'auto' ||
+						currentValueForToggle === undefined
+					}
+				/>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Repeat' ) }
+					checked={ repeatCheckedValue }
+					onChange={ toggleIsRepeated }
+					disabled={ currentValueForToggle === 'cover' }
+				/>
+			</HStack>
+		</VStack>
+	);
+}
+
+export default function BackgroundImagePanel( {
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	defaultValues = {},
+} ) {
+	/*
+	 * Resolve any inherited "ref" pointers.
+	 * Should the block editor need resolved, inherited values
+	 * across all controls, this could be abstracted into a hook,
+	 * e.g., useResolveGlobalStyle
+	 */
+	const { globalStyles, _links } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const _settings = getSettings();
+		return {
+			globalStyles: _settings[ globalStylesDataKey ],
+			_links: _settings[ globalStylesLinksDataKey ],
+		};
+	}, [] );
+	const resolvedInheritedValue = useMemo( () => {
+		const resolvedValues = {
+			background: {},
+		};
+
+		if ( ! inheritedValue?.background ) {
+			return inheritedValue;
+		}
+
+		Object.entries( inheritedValue?.background ).forEach(
+			( [ key, backgroundValue ] ) => {
+				resolvedValues.background[ key ] = getResolvedValue(
+					backgroundValue,
+					{
+						styles: globalStyles,
+						_links,
+					}
+				);
+			}
+		);
+		return resolvedValues;
+	}, [ globalStyles, _links, inheritedValue ] );
+
+	const resetBackground = () =>
+		onChange( setImmutably( value, [ 'background' ], {} ) );
+
+	const { title, url } = value?.background?.backgroundImage || {
+		...resolvedInheritedValue?.background?.backgroundImage,
+	};
+	const hasImageValue =
+		hasBackgroundImageValue( value ) ||
+		hasBackgroundImageValue( resolvedInheritedValue );
+
+	const imageValue =
+		value?.background?.backgroundImage ||
+		inheritedValue?.background?.backgroundImage;
+
+	const shouldShowBackgroundImageControls =
+		hasImageValue &&
+		'none' !== imageValue &&
+		( settings?.background?.backgroundSize ||
+			settings?.background?.backgroundPosition ||
+			settings?.background?.backgroundRepeat );
+
+	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
+
+	return (
+		<div
+			className={ clsx(
+				'block-editor-global-styles-background-panel__inspector-media-replace-container',
+				{
+					'is-open': isDropDownOpen,
+				}
+			) }
+		>
+			{ shouldShowBackgroundImageControls ? (
+				<BackgroundControlsPanel
+					label={ title }
+					filename={ title }
+					url={ url }
+					onToggle={ setIsDropDownOpen }
+					hasImageValue={ hasImageValue }
+				>
+					<VStack spacing={ 3 } className="single-column">
+						<BackgroundImageControls
+							onChange={ onChange }
+							style={ value }
+							inheritedValue={ resolvedInheritedValue }
+							displayInPanel
+							onResetImage={ () => {
+								setIsDropDownOpen( false );
+								resetBackground();
+							} }
+							onRemoveImage={ () => setIsDropDownOpen( false ) }
+							defaultValues={ defaultValues }
+						/>
+						<BackgroundSizeControls
+							onChange={ onChange }
+							style={ value }
+							defaultValues={ defaultValues }
+							inheritedValue={ resolvedInheritedValue }
+						/>
+					</VStack>
+				</BackgroundControlsPanel>
+			) : (
+				<BackgroundImageControls
+					onChange={ onChange }
+					style={ value }
+					inheritedValue={ resolvedInheritedValue }
+					defaultValues={ defaultValues }
+					onResetImage={ () => {
+						setIsDropDownOpen( false );
+						resetBackground();
+					} }
+					onRemoveImage={ () => setIsDropDownOpen( false ) }
+				/>
+			) }
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/background-image-control/style.scss b/packages/block-editor/src/components/background-image-control/style.scss
new file mode 100644
index 00000000000000..cde8044c24c121
--- /dev/null
+++ b/packages/block-editor/src/components/background-image-control/style.scss
@@ -0,0 +1,170 @@
+.block-editor-global-styles-background-panel__inspector-media-replace-container {
+	border: $border-width solid $gray-300;
+	border-radius: $radius-small;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		flex-grow: 1;
+		border: 0;
+
+		.components-dropdown {
+			display: block;
+		}
+	}
+
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
+		height: 100%;
+	}
+
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+	border: $border-width solid $gray-300;
+
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	// Ensure the dropzone is positioned to the size of the item.
+	position: relative;
+
+	// Since there is no option to skip rendering the drag'n'drop icon in drop
+	// zone, we hide it for now.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+
+	button.components-button {
+		color: $gray-900;
+		width: 100%;
+		display: block;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-editor-global-styles-background-panel__loading {
+		height: 100%;
+		position: absolute;
+		z-index: 1;
+		width: 100%;
+		padding: 10px 0 0 0;
+
+		svg {
+			margin: 0;
+		}
+	}
+}
+
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	height: 100%;
+	width: 100%;
+	padding-left: $grid-unit-15;
+}
+
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
+
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
+	word-break: break-all;
+	// The Button component is white-space: nowrap, and that won't work with line-clamp.
+	white-space: normal;
+
+	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+	text-align: start;
+	text-align-last: center;
+}
+
+.block-editor-global-styles-background-panel__inspector-preview-inner {
+	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+		width: 20px;
+		height: 20px;
+		min-width: auto;
+	}
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator {
+	background-size: cover;
+	border-radius: $radius-round;
+	width: 20px;
+	height: 20px;
+	display: block;
+	position: relative;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator::after {
+	content: "";
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	bottom: -1px;
+	right: -1px;
+	border-radius: $radius-round;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+	border: 1px solid transparent;
+	box-sizing: inherit;
+}
+
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+	min-width: 260px;
+	overflow-x: hidden;
+
+	.components-focal-point-picker-wrapper {
+		background-color: $gray-100;
+		width: 100%;
+		border-radius: $radius-small;
+		border: $border-width solid $gray-300;
+	}
+
+	.components-focal-point-picker__media--image {
+		max-height: 180px;
+	}
+
+	// Override focal picker to avoid a double border.
+	.components-focal-point-picker::after {
+		content: none;
+	}
+}
+
+// Push control panel into the background when the media modal is open.
+.modal-open .block-editor-global-styles-background-panel__popover {
+	z-index: z-index(".block-editor-global-styles-background-panel__popover");
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover {
+	.components-popover__content {
+		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
+		width: 226px;
+	}
+
+	.components-button {
+		padding: 0 $grid-unit-10;
+	}
+
+	.components-button .components-menu-items__item-icon.has-icon-right {
+		margin-left: $grid-unit-30 - $grid-unit-10;
+	}
+}
diff --git a/packages/block-editor/src/components/background-image-control/test/index.js b/packages/block-editor/src/components/background-image-control/test/index.js
new file mode 100644
index 00000000000000..ebadad97eda022
--- /dev/null
+++ b/packages/block-editor/src/components/background-image-control/test/index.js
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+
+import { backgroundPositionToCoords, coordsToBackgroundPosition } from '../';
+
+describe( 'backgroundPositionToCoords', () => {
+	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
+		expect( backgroundPositionToCoords( '25% 75%' ) ).toEqual( {
+			x: 0.25,
+			y: 0.75,
+		} );
+	} );
+
+	it( 'should return the correct coordinates for a percentage using 1-value syntax', () => {
+		expect( backgroundPositionToCoords( '50%' ) ).toEqual( {
+			x: 0.5,
+			y: 0.5,
+		} );
+	} );
+
+	it( 'should return undefined coords in given an empty value', () => {
+		expect( backgroundPositionToCoords( '' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+
+	it( 'should return undefined coords in given a string that cannot be converted', () => {
+		expect( backgroundPositionToCoords( 'apples' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+} );
+
+describe( 'coordsToBackgroundPosition', () => {
+	it( 'should return the correct background position for a set of coordinates', () => {
+		expect( coordsToBackgroundPosition( { x: 0.25, y: 0.75 } ) ).toBe(
+			'25% 75%'
+		);
+	} );
+
+	it( 'should return undefined if no coordinates are provided', () => {
+		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
index f94f16e9256283..f06c8addedad50 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -11,7 +11,8 @@ import {
 /**
  * Internal dependencies
  */
-import { useNotifyCopy } from '../copy-handler';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockActions( {
@@ -19,33 +20,52 @@ export default function BlockActions( {
 	children,
 	__experimentalUpdateSelection: updateSelection,
 } ) {
-	const {
-		canInsertBlockType,
-		getBlockRootClientId,
-		getBlocksByClientId,
-		canMoveBlocks,
-		canRemoveBlocks,
-	} = useSelect( blockEditorStore );
 	const { getDefaultBlockName, getGroupingBlockName } =
 		useSelect( blocksStore );
+	const selected = useSelect(
+		( select ) => {
+			const {
+				canInsertBlockType,
+				getBlockRootClientId,
+				getBlocksByClientId,
+				getDirectInsertBlock,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
 
-	const blocks = getBlocksByClientId( clientIds );
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-	const canDuplicate = blocks.every( ( block ) => {
-		return (
-			!! block &&
-			hasBlockSupport( block.name, 'multiple', true ) &&
-			canInsertBlockType( block.name, rootClientId )
-		);
-	} );
+			const blocks = getBlocksByClientId( clientIds );
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const canInsertDefaultBlock = canInsertBlockType(
+				getDefaultBlockName(),
+				rootClientId
+			);
+			const directInsertBlock = rootClientId
+				? getDirectInsertBlock( rootClientId )
+				: null;
 
-	const canInsertDefaultBlock = canInsertBlockType(
-		getDefaultBlockName(),
-		rootClientId
+			return {
+				canRemove: canRemoveBlocks( clientIds ),
+				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canCopyStyles: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						( hasBlockSupport( block.name, 'color' ) ||
+							hasBlockSupport( block.name, 'typography' ) )
+					);
+				} ),
+				canDuplicate: blocks.every( ( block ) => {
+					return (
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, rootClientId )
+					);
+				} ),
+			};
+		},
+		[ clientIds, getDefaultBlockName ]
 	);
+	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const canMove = canMoveBlocks( clientIds, rootClientId );
-	const canRemove = canRemoveBlocks( clientIds, rootClientId );
+	const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
 	const {
 		removeBlocks,
@@ -54,20 +74,16 @@ export default function BlockActions( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		flashBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
+	const pasteStyles = usePasteStyles();
 
 	return children( {
+		canCopyStyles,
 		canDuplicate,
-		canInsertDefaultBlock,
-		canMove,
+		canInsertBlock,
 		canRemove,
-		rootClientId,
-		blocks,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
 		},
@@ -75,31 +91,23 @@ export default function BlockActions( {
 			return removeBlocks( clientIds, updateSelection );
 		},
 		onInsertBefore() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ 0 ]
-				: clientId;
-			insertBeforeBlock( clientId );
+			insertBeforeBlock( clientIds[ 0 ] );
 		},
 		onInsertAfter() {
-			const clientId = Array.isArray( clientIds )
-				? clientIds[ clientIds.length - 1 ]
-				: clientId;
-			insertAfterBlock( clientId );
-		},
-		onMoveTo() {
-			setNavigationMode( true );
-			selectBlock( clientIds[ 0 ] );
-			setBlockMovingClientId( clientIds[ 0 ] );
+			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
 		onGroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = switchToBlockType(
+				getBlocksByClientId( clientIds ),
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;
@@ -107,12 +115,11 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, newBlocks );
 		},
 		onUngroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
-			const innerBlocks = blocks[ 0 ].innerBlocks;
-
+			const innerBlocks = getBlocks( clientIds[ 0 ] );
 			if ( ! innerBlocks.length ) {
 				return;
 			}
@@ -120,13 +127,13 @@ export default function BlockActions( {
 			replaceBlocks( clientIds, innerBlocks );
 		},
 		onCopy() {
-			const selectedBlockClientIds = blocks.map(
-				( { clientId } ) => clientId
-			);
-			if ( blocks.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', selectedBlockClientIds );
+			notifyCopy( 'copy', clientIds );
+		},
+		async onPasteStyles() {
+			await pasteStyles( getBlocksByClientId( clientIds ) );
 		},
 	} );
 }
diff --git a/packages/block-editor/src/components/block-alignment-control/README.md b/packages/block-editor/src/components/block-alignment-control/README.md
index 14f08d1dda9ce6..22b5df9af9bd42 100644
--- a/packages/block-editor/src/components/block-alignment-control/README.md
+++ b/packages/block-editor/src/components/block-alignment-control/README.md
@@ -4,11 +4,6 @@ The `BlockAlignmentToolbar` component is used to render block alignment options
 
 ![Image block alignment options](https://make.wordpress.org/core/files/2020/09/image-block-alignment-options.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-alignment-control/constants.js b/packages/block-editor/src/components/block-alignment-control/constants.js
index 2fa133740a4cfb..44505d0475d99f 100644
--- a/packages/block-editor/src/components/block-alignment-control/constants.js
+++ b/packages/block-editor/src/components/block-alignment-control/constants.js
@@ -39,7 +39,3 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 };
 
 export const DEFAULT_CONTROL = 'none';
-
-export const POPOVER_PROPS = {
-	variant: 'toolbar',
-};
diff --git a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
index 9b56e451a56bdd..9e7e59c0c31447 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
@@ -23,7 +23,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
         />
       </svg>
     </button>
@@ -42,7 +42,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="None"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -55,7 +55,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>
@@ -64,7 +64,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -77,7 +77,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z"
+            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
           />
         </svg>
       </button>
@@ -86,7 +86,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -99,7 +99,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z"
+            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
           />
         </svg>
       </button>
@@ -108,7 +108,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -121,7 +121,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z"
+            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
           />
         </svg>
       </button>
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..c8cd686e06954b 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
@@ -43,9 +43,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<BlockAlignmentUI
@@ -78,9 +76,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should call onChange with undefined, when the control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockAlignmentUI
@@ -103,9 +99,7 @@ describe( 'BlockAlignmentUI', () => {
 	} );
 
 	test( 'should call onChange with alignment value when the control is inactive', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockAlignmentUI
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 597b0beca80ffc..87c5c7b0275a22 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,11 +18,7 @@ import {
  * Internal dependencies
  */
 import useAvailableAlignments from './use-available-alignments';
-import {
-	BLOCK_ALIGNMENTS_CONTROLS,
-	DEFAULT_CONTROL,
-	POPOVER_PROPS,
-} from './constants';
+import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';
 
 function BlockAlignmentUI( {
 	value,
@@ -68,8 +64,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { describedBy: __( 'Change alignment' ) },
-				popoverProps: POPOVER_PROPS,
+				toggleProps: { description: __( 'Change alignment' ) },
 				children: ( { onClose } ) => {
 					return (
 						<>
@@ -90,7 +85,7 @@ function BlockAlignmentUI( {
 												key={ controlName }
 												icon={ icon }
 												iconPosition="left"
-												className={ classNames(
+												className={ clsx(
 													'components-dropdown-menu__menu-item',
 													{
 														'is-active': isSelected,
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.native.js b/packages/block-editor/src/components/block-alignment-control/ui.native.js
index 8faa8fe3e0d596..9234f50ccccb62 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.native.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.native.js
@@ -77,7 +77,7 @@ function BlockAlignmentUI( {
 					};
 				} ),
 				popoverProps: POPOVER_PROPS,
-				toggleProps: { describedBy: __( 'Change alignment' ) },
+				toggleProps: { description: __( 'Change alignment' ) },
 		  };
 
 	return <UIComponent { ...commonProps } { ...extraProps } />;
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..67e92b012a53bf 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' ];
 
@@ -18,56 +19,76 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( ! controls.includes( 'none' ) ) {
 		controls = [ 'none', ...controls ];
 	}
-	const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				wideControlsEnabled: settings.alignWide,
-				themeSupportsLayout: settings.supportsLayout,
-			};
-		},
-		[]
-	);
+	const isNoneOnly = controls.length === 1 && controls[ 0 ] === 'none';
+
+	const [ wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme ] =
+		useSelect(
+			( select ) => {
+				// If `isNoneOnly` is true, we'll be returning early because there is
+				// nothing to filter on an empty array. We won't need the info from
+				// the `useSelect` but we must call it anyway because Rules of Hooks.
+				// So the callback returns early to avoid block editor subscription.
+				if ( isNoneOnly ) {
+					return [ false, false, false ];
+				}
+
+				const settings = select( blockEditorStore ).getSettings();
+				return [
+					settings.alignWide ?? false,
+					settings.supportsLayout,
+					settings.__unstableIsBlockBasedTheme,
+				];
+			},
+			[ isNoneOnly ]
+		);
 	const layout = useLayout();
+
+	if ( isNoneOnly ) {
+		return EMPTY_ARRAY;
+	}
+
 	const layoutType = getLayoutType( layout?.type );
-	const layoutAlignments = layoutType.getAlignments( layout );
 
 	if ( themeSupportsLayout ) {
-		const alignments = layoutAlignments.filter(
-			( { name: alignmentName } ) => controls.includes( alignmentName )
+		const layoutAlignments = layoutType.getAlignments(
+			layout,
+			isBlockBasedTheme
+		);
+		const alignments = layoutAlignments.filter( ( alignment ) =>
+			controls.includes( alignment.name )
 		);
 		// 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
-		.filter(
-			( control ) =>
-				( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-					wideControlsEnabled ||
-					! WIDE_CONTROLS.includes( control ) ) &&
-				availableAlignments.includes( control )
-		)
-		.map( ( enabledControl ) => ( { name: enabledControl } ) );
+
+	const alignments = controls
+		.filter( ( control ) => {
+			if ( layout.alignments ) {
+				return layout.alignments.includes( control );
+			}
+
+			if ( ! wideControlsEnabled && WIDE_CONTROLS.includes( control ) ) {
+				return false;
+			}
+
+			return DEFAULT_CONTROLS.includes( control );
+		} )
+		.map( ( name ) => ( { name } ) );
 
 	// While we treat `none` as an alignment, we shouldn't return it if no
 	// other alignments exist.
-	if (
-		enabledControls.length === 1 &&
-		enabledControls[ 0 ].name === 'none'
-	) {
-		return [];
+	if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
+		return EMPTY_ARRAY;
 	}
 
-	return enabledControls;
+	return alignments;
 }
diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/README.md b/packages/block-editor/src/components/block-alignment-matrix-control/README.md
index 377f9f368dae4d..dfb38e15964124 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-control/README.md
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/README.md
@@ -4,16 +4,6 @@ The alignment matrix control allows users to quickly adjust inner block alignmen
 
 ![Button components](https://i.imgur.com/PxYkgL5.png)
 
-## Table of contents
-
--   [Alignment Matrix Control](#alignment-matrix-control)
-    -   [Table of contents](#table-of-contents)
-    -   [Design guidelines](#design-guidelines)
-        -   [Usage](#usage)
-    -   [Development guidelines](#development-guidelines)
-        -   [Usage](#usage-1)
-        -   [Props](#props)
-
 ## Design guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
index 6ea7b2a49c8a95..cdec41dfc7b978 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -6,7 +6,7 @@ import { DOWN } from '@wordpress/keycodes';
 import {
 	ToolbarButton,
 	Dropdown,
-	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
+	AlignmentMatrixControl,
 } from '@wordpress/components';
 
 const noop = () => {};
@@ -23,8 +23,7 @@ function BlockAlignmentMatrixControl( props ) {
 
 	return (
 		<Dropdown
-			position="bottom right"
-			popoverProps={ { variant: 'toolbar' } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {
diff --git a/packages/block-editor/src/components/block-breadcrumb/README.md b/packages/block-editor/src/components/block-breadcrumb/README.md
index 298ff8fdf5ea61..c1ffe43472b0c1 100644
--- a/packages/block-editor/src/components/block-breadcrumb/README.md
+++ b/packages/block-editor/src/components/block-breadcrumb/README.md
@@ -6,11 +6,6 @@ The block breadcrumb trail displays the hierarchy of the current block selection
 
 ![Image in column block breadcrumb](https://make.wordpress.org/core/files/2020/08/gutenberg-image-in-column-block-breadcrumb.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 #### Props
diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js
index 419d4c729b17d2..440d9611d278be 100644
--- a/packages/block-editor/src/components/block-breadcrumb/index.js
+++ b/packages/block-editor/src/components/block-breadcrumb/index.js
@@ -5,34 +5,46 @@ import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
+import getEditorRegion from '../../utils/get-editor-region';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
  *
  * @param {Object} props               Component props.
  * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
- * @return {WPElement}                 Block Breadcrumb.
+ * @return {Element}                   Block Breadcrumb.
  */
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getEnabledBlockParents,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
-			parents: getBlockParents( selectedBlockClientId ),
+			parents: getEnabledBlockParents( selectedBlockClientId ),
 			clientId: selectedBlockClientId,
 			hasSelection: !! getSelectionStart().clientId,
 		};
 	}, [] );
 	const rootLabel = rootLabelText || __( 'Document' );
 
+	// We don't care about this specific ref, but this is a way
+	// to get a ref within the editor canvas so we can focus it later.
+	const blockRef = useRef();
+	useBlockElementRef( clientId, blockRef );
+
 	/*
 	 * Disable reason: The `list` ARIA role is redundant but
 	 * Safari+VoiceOver won't announce the list otherwise.
@@ -54,9 +66,18 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			>
 				{ hasSelection && (
 					<Button
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
-						onClick={ clearSelectedBlock }
+						onClick={ () => {
+							// Find the block editor wrapper for the selected block
+							const blockEditor = blockRef.current?.closest(
+								'.editor-styles-wrapper'
+							);
+
+							clearSelectedBlock();
+
+							getEditorRegion( blockEditor )?.focus();
+						} }
 					>
 						{ rootLabel }
 					</Button>
@@ -73,8 +94,8 @@ function BlockBreadcrumb( { rootLabelText } ) {
 			{ parents.map( ( parentClientId ) => (
 				<li key={ parentClientId }>
 					<Button
+						size="small"
 						className="block-editor-block-breadcrumb__button"
-						variant="tertiary"
 						onClick={ () => selectBlock( parentClientId ) }
 					>
 						<BlockTitle
diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
index 32b1f2ff1a42b8..af56971fe4c5c9 100644
--- a/packages/block-editor/src/components/block-breadcrumb/style.scss
+++ b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -22,39 +22,11 @@
 	}
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-	height: $button-size-small;
-	line-height: $button-size-small;
-	padding: 0;
-	position: relative;
-
-	&:hover:not(:disabled) {
-		text-decoration: underline;
-		box-shadow: none;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&:focus::before {
-		content: "";
-		display: block;
-		position: absolute;
-		border-radius: $radius-block-ui;
-		top: $border-width;
-		right: $border-width;
-		bottom: $border-width;
-		left: $border-width;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-}
-
 .block-editor-block-breadcrumb__current {
 	cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
 	color: $gray-900;
 	padding: 0 $grid-unit-10;
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
new file mode 100644
index 00000000000000..36aca7fa1c7220
--- /dev/null
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../block-list';
+import BlockTools from '../block-tools';
+import EditorStyles from '../editor-styles';
+import Iframe from '../iframe';
+import WritingFlow from '../writing-flow';
+import { useMouseMoveTypingReset } from '../observe-typing';
+import { useBlockSelectionClearer } from '../block-selection-clearer';
+import { useBlockCommands } from '../use-block-commands';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// EditorStyles is a memoized component, so avoid passing a new
+// object reference on each render.
+const EDITOR_STYLE_TRANSFORM_OPTIONS = {
+	// Don't transform selectors that already specify `.editor-styles-wrapper`.
+	ignoredSelectors: [ /\.editor-styles-wrapper/gi ],
+};
+
+export function ExperimentalBlockCanvas( {
+	shouldIframe = true,
+	height = '300px',
+	children = <BlockList />,
+	styles,
+	contentRef: contentRefProp,
+	iframeProps,
+} ) {
+	useBlockCommands();
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
+	const resetTypingRef = useMouseMoveTypingReset();
+	const clearerRef = useBlockSelectionClearer();
+	const localRef = useRef();
+	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	const zoomLevel = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
+		[]
+	);
+	const zoomOutIframeProps =
+		zoomLevel !== 100 && ! isTabletViewport
+			? {
+					scale: zoomLevel,
+					frameSize: '40px',
+			  }
+			: {};
+
+	if ( ! shouldIframe ) {
+		return (
+			<BlockTools
+				__unstableContentRef={ localRef }
+				className="block-editor-block-canvas"
+				style={ { height } }
+			>
+				<EditorStyles
+					styles={ styles }
+					scope=":where(.editor-styles-wrapper)"
+					transformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }
+				/>
+				<WritingFlow
+					ref={ contentRef }
+					className="editor-styles-wrapper"
+					tabIndex={ -1 }
+				>
+					{ children }
+				</WritingFlow>
+			</BlockTools>
+		);
+	}
+
+	return (
+		<BlockTools
+			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
+			style={ { height, display: 'flex' } }
+		>
+			<Iframe
+				{ ...iframeProps }
+				{ ...zoomOutIframeProps }
+				ref={ resetTypingRef }
+				contentRef={ contentRef }
+				style={ {
+					...iframeProps?.style,
+				} }
+				name="editor-canvas"
+			>
+				<EditorStyles styles={ styles } />
+				{ children }
+			</Iframe>
+		</BlockTools>
+	);
+}
+
+/**
+ * BlockCanvas component is a component used to display the canvas of the block editor.
+ * What we call the canvas is an iframe containing the block list that you can manipulate.
+ * The component is also responsible of wiring up all the necessary hooks to enable
+ * the keyboard navigation across blocks in the editor and inject content styles into the iframe.
+ *
+ * @example
+ *
+ * ```jsx
+ * function MyBlockEditor() {
+ *   const [ blocks, updateBlocks ] = useState([]);
+ *   return (
+ *     <BlockEditorProvider
+ *       value={ blocks }
+ *       onInput={ updateBlocks }
+ *       onChange={ persistBlocks }
+ *      >
+ *        <BlockCanvas height="400px" />
+ *      </BlockEditorProvider>
+ *    );
+ * }
+ * ```
+ *
+ * @param {Object}  props          Component props.
+ * @param {string}  props.height   Canvas height, defaults to 300px.
+ * @param {Array}   props.styles   Content styles to inject into the iframe.
+ * @param {Element} props.children Content of the canvas, defaults to the BlockList component.
+ * @return {Element}               Block Breadcrumb.
+ */
+function BlockCanvas( { children, height, styles } ) {
+	return (
+		<ExperimentalBlockCanvas height={ height } styles={ styles }>
+			{ children }
+		</ExperimentalBlockCanvas>
+	);
+}
+
+export default BlockCanvas;
diff --git a/packages/block-editor/src/components/block-canvas/style.scss b/packages/block-editor/src/components/block-canvas/style.scss
new file mode 100644
index 00000000000000..ea54646e64a59a
--- /dev/null
+++ b/packages/block-editor/src/components/block-canvas/style.scss
@@ -0,0 +1,10 @@
+iframe[name="editor-canvas"] {
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	display: block;
+	// Handles transitions between device previews
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	@include reduce-motion("transition");
+	background-color: $gray-300;
+}
diff --git a/packages/block-editor/src/components/block-caption/README.md b/packages/block-editor/src/components/block-caption/README.md
new file mode 100644
index 00000000000000..2d3bce1f6d2d4b
--- /dev/null
+++ b/packages/block-editor/src/components/block-caption/README.md
@@ -0,0 +1,104 @@
+## Block Caption
+
+The `BlockCaption` component renders block-level UI for adding and editing captions. It wraps logic around the more generic `Caption` component to provide an editable caption field that is designed specifically for block-level use.
+
+`BlockCaption` is used in several native blocks, including `Video`, `Image`, `Audio`, etc.
+
+## Development guidelines
+
+### Usage
+
+Renders an editable caption field designed specifically for block-level use.
+
+```jsx
+import { BlockCaption, RichText } from '@wordpress/block-editor';
+
+const MyBlockCaption = (
+	clientId,
+	isCaptionSelected,
+	onFocusCaption,
+	onBlur,
+	insertBlocksAfter
+) => (
+	<BlockCaption
+		clientId={ clientId }
+		accessible={ true }
+		accessibilityLabelCreator={ ( caption ) =>
+			RichText.isEmpty( caption )
+				? /* translators: accessibility text. Empty caption. */
+				  'Caption. Empty'
+				: sprintf(
+						/* translators: accessibility text. %s: caption. */
+						__( 'Caption. %s' ),
+						caption
+				  )
+		}
+		isSelected={ isCaptionSelected }
+		onFocus={ onFocusCaption }
+		onBlur={ onBlur }
+		insertBlocksAfter={ insertBlocksAfter }
+	/>
+);
+```
+
+### Props
+
+The `clientId` prop is the only required prop.
+
+The `onBlur`, `onFocus`, `isSelected`, and `insertBlocksAfter` props are all passed directly to the `Caption` component, which then passes them to the inner `RichText` component. ([See detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)). These props are not strictly required, but necessary for many implementations of the component to function as expected.
+
+The `accessible` prop is `false` by default and must be set to `true` in order to set an accessibility label via the `accessibilityLabelCreator` prop.
+
+### `clientId`
+
+-   **Type:** `String`
+-   **Required:** `Yes`
+
+The client ID of the block that the caption is associated with. This is prop is required in order for the component to perform key functionality, including retrieving the current caption from the block attributes.
+
+### `accessible`
+
+-   **Type:** `Boolean`
+-   **Default:** `false`
+-   **Required:** `No`
+
+Boolean to indicate whether component is an accessibility element. When set to true, the component and all of its children will be treated as a single accessible element. Refer to [the relevant React Native documentation](https://reactnative.dev/docs/accessibility#accessible) for the most up-to-date information on this prop.
+
+### `accessibilityLabelCreator`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Function that returns an accessibility label, which screen readers will use for the component. The `accessible` prop must be set to `true` in order for this prop to have any effect.
+
+### `onBlur`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Handler for `onBlur` events, called when the component loses focus. Although not required, it's highly recommended to pass down the component's `onBlur` function to ensure that loss of focus is always handled correctly.
+
+### `onFocus`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Handler for `onFocus` events, called when the component is brought into focus. Similar to `onBlur`, it's not required but recommended. Passing down this prop helps to ensure focus is always handled as expected on the native side.
+
+### `isSelected`
+
+-   **Type:** `Boolean`
+-   **Required:** `No`
+
+Boolean that indicates whether the caption is currently selected. This is used by the child `RichText` component to determine whether to display formatting controls.
+
+### `insertBlocksAfter`
+
+-   **Type:** `Function`
+-   **Required:** `No`
+
+Function to handle how blocks are inserted after pressing enter at the end of the component.
+
+## Related components
+
+`BlockCaption` passes props directly to the [`Caption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/caption) component. In turn, the `Caption` component uses the [`RichText`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/) component. It is recommended to refer to each of those components' documentation for more information on their props and usage.
diff --git a/packages/block-editor/src/components/block-card/README.md b/packages/block-editor/src/components/block-card/README.md
index 8aab2a45f612bd..216cf4e3865a04 100644
--- a/packages/block-editor/src/components/block-card/README.md
+++ b/packages/block-editor/src/components/block-card/README.md
@@ -6,11 +6,6 @@ In the editor, this component is displayed in two different places: in the block
 
 ![Heading block card in the block inspector](https://make.wordpress.org/core/files/2020/09/screenshot-wordpress.org-2020.09.08-14_19_21.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index afda93d5ece7af..c8a12a3be5ef6a 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -1,29 +1,28 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import { store as blockEditorStore } from '../../store';
 
-function BlockCard( {
-	title,
-	icon,
-	description,
-	blockType,
-	parentBlockClientId,
-	handleBackButton,
-	isSynced,
-} ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -32,35 +31,56 @@ function BlockCard( {
 		( { title, icon, description } = blockType );
 	}
 
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+	const { parentNavBlockClientId } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+			select( blockEditorStore );
+
+		const _selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			parentNavBlockClientId: getBlockParentsByBlockName(
+				_selectedBlockClientId,
+				'core/navigation',
+				true
+			)[ 0 ],
+		};
+	}, [] );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
 
 	return (
-		<div
-			className={ classnames( 'block-editor-block-card', {
-				'is-synced': isSynced,
-			} ) }
-		>
-			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
+		<div className={ clsx( 'block-editor-block-card', className ) }>
+			{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
 				<Button
-					onClick={ handleBackButton }
-					label={ __( 'Navigate to parent block' ) }
+					onClick={ () => selectBlock( parentNavBlockClientId ) }
+					label={ __( 'Go to parent Navigation block' ) }
 					style={
 						// TODO: This style override is also used in ToolsPanelHeader.
 						// It should be supported out-of-the-box by Button.
 						{ minWidth: 24, padding: 0 }
 					}
 					icon={ isRTL() ? chevronRight : chevronLeft }
-					isSmall
+					size="small"
 				/>
 			) }
 			<BlockIcon icon={ icon } showColors />
-			<div className="block-editor-block-card__content">
-				<h2 className="block-editor-block-card__title">{ title }</h2>
-				<span className="block-editor-block-card__description">
-					{ description }
-				</span>
-			</div>
+			<VStack spacing={ 1 }>
+				<h2 className="block-editor-block-card__title">
+					{ name?.length
+						? sprintf(
+								// translators:  1: Custom block name. 2: Block title.
+								_x( '%1$s (%2$s)', 'block label' ),
+								name,
+								title
+						  )
+						: title }
+				</h2>
+				{ description && (
+					<Text className="block-editor-block-card__description">
+						{ description }
+					</Text>
+				) }
+			</VStack>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
index 1b2156c19fa797..42cf77aa4b0a84 100644
--- a/packages/block-editor/src/components/block-card/style.scss
+++ b/packages/block-editor/src/components/block-card/style.scss
@@ -1,26 +1,21 @@
 .block-editor-block-card {
-	display: flex;
 	align-items: flex-start;
-}
-
-.block-editor-block-card__content {
-	flex-grow: 1;
-	margin-bottom: $grid-unit-05;
+	color: $gray-900;
+	display: flex;
+	padding: $grid-unit-20;
 }
 
 .block-editor-block-card__title {
 	font-weight: 500;
 
 	&.block-editor-block-card__title {
-		line-height: $button-size-small;
-		margin: 0 0 $grid-unit-05;
+		font-size: $default-font-size;
+		line-height: $default-line-height;
+		margin: 0;
+		padding: 3px 0; // This makes the title as high as the icon.
 	}
 }
 
-.block-editor-block-card__description {
-	font-size: $default-font-size;
-}
-
 .block-editor-block-card .block-editor-block-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;
diff --git a/packages/block-editor/src/components/block-compare/block-view.js b/packages/block-editor/src/components/block-compare/block-view.js
index 3c4839931e10fe..48a13540e78425 100644
--- a/packages/block-editor/src/components/block-compare/block-view.js
+++ b/packages/block-editor/src/components/block-compare/block-view.js
@@ -30,7 +30,12 @@ export default function BlockView( {
 			</div>
 
 			<div className="block-editor-block-compare__action">
-				<Button variant="secondary" tabIndex="0" onClick={ action }>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					tabIndex="0"
+					onClick={ action }
+				>
 					{ actionText }
 				</Button>
 			</div>
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
index 46454f82a070d1..4b9b6db596864e 100644
--- a/packages/block-editor/src/components/block-compare/index.js
+++ b/packages/block-editor/src/components/block-compare/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -28,7 +28,7 @@ function BlockCompare( {
 		const difference = diffChars( originalContent, newContent );
 
 		return difference.map( ( item, pos ) => {
-			const classes = classnames( {
+			const classes = clsx( {
 				'block-editor-block-compare__added': item.added,
 				'block-editor-block-compare__removed': item.removed,
 			} );
diff --git a/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
index f8abe9753c0310..c90f2bac7365ab 100644
--- a/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
+++ b/packages/block-editor/src/components/block-compare/test/__snapshots__/block-view.js.snap
@@ -30,7 +30,7 @@ exports[`BlockView should match snapshot 1`] = `
       class="block-editor-block-compare__action"
     >
       <button
-        class="components-button is-secondary"
+        class="components-button is-next-40px-default-size is-secondary"
         tabindex="0"
         type="button"
       >
diff --git a/packages/block-editor/src/components/block-content-overlay/content.scss b/packages/block-editor/src/components/block-content-overlay/content.scss
new file mode 100644
index 00000000000000..088ae40940d402
--- /dev/null
+++ b/packages/block-editor/src/components/block-content-overlay/content.scss
@@ -0,0 +1,13 @@
+.block-editor-block-list__block.has-block-overlay {
+	cursor: default;
+
+	.block-editor-block-list__block {
+		pointer-events: none;
+	}
+
+	.block-editor-block-list__block.has-block-overlay::before {
+		left: 0;
+		right: 0;
+		width: auto;
+	}
+}
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
deleted file mode 100644
index 17fd28ae07279a..00000000000000
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.block-editor-block-list__block.has-block-overlay {
-	cursor: default;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: transparent;
-		border: none;
-		border-radius: $radius-block-ui;
-		z-index: z-index(".block-editor-block-list__block.has-block-overlay");
-	}
-
-	&::after {
-		content: none !important;
-	}
-
-	&:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	&.is-reusable:hover:not(.is-dragging-blocks)::before,
-	&.wp-block-template-part:hover:not(.is-dragging-blocks)::before {
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
-	}
-
-	&.is-selected:not(.is-dragging-blocks)::before {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
-	}
-
-	.block-editor-block-list__block {
-		pointer-events: none;
-	}
-
-	.block-editor-iframe__body.is-zoomed-out &::before {
-		// Unfortunately because of the vw unit, this is not always going to be exact
-		// When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
-		width: calc(100vw);
-		left: calc(( 100% - 100vw ) / 2);
-	}
-}
diff --git a/packages/block-editor/src/components/block-context/README.md b/packages/block-editor/src/components/block-context/README.md
index 9c28b853045ce5..dd6fd22de757a7 100644
--- a/packages/block-editor/src/components/block-context/README.md
+++ b/packages/block-editor/src/components/block-context/README.md
@@ -1,12 +1,12 @@
 # Block Context
 
-Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://reactjs.org/docs/context.html), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
+Block Context is a React implementation of WordPress's block context. Block context, much like [React's context](https://react.dev/learn/passing-data-deeply-with-context), is a method for passing and inheriting values deeply through a hierarchy of blocks. Because of the similarities with React's context, the client-side implementation here is quite minimal. It is complemented by equivalent behaviors in the server-side rendering of a block.
 
 Note that the implementation of Block Context is distinct from [the `BlockEdit` context](../block-edit). While it is true that both provide context relevant for the editing of a block, Block Context is implemented separately so as to prioritize it as most identifiable amongst the machinery of block context, and not amongst other client-side editing context of a block.
 
 ## Usage
 
-Currently, only the [Provider component](https://reactjs.org/docs/context.html#contextprovider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
+Currently, only the [Provider component](https://react.dev/reference/react/createContext#provider) is made available on the public interface of the `@wordpress/block-editor` module. This can be used to add or override context which can then be consumed by blocks rendered within that context in the block editor.
 
 ```js
 import { BlockContextProvider } from '@wordpress/block-editor';
@@ -20,10 +20,10 @@ function MyCustomPostEditor() {
 }
 ```
 
-Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://reactjs.org/docs/context.html#api), typically for use in combination with [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext).
+Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://react.dev/reference/react/createContext), typically for use in combination with [`useContext`](https://react.dev/reference/react/useContext).
 
 ```js
-import { useContext } from '@wordpress/element';
+import { useContext } from 'react';
 
 // Only available internally within `@wordpress/block-editor`!
 import BlockContext from '../block-context';
@@ -39,7 +39,7 @@ The reason `BlockContext` is only internally available within the `@wordpress/bl
 
 ## Props
 
-`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://reactjs.org/docs/context.html#contextprovider). It receives `value` and `children` props. The `value` is merged with the current block context value.
+`BlockContextProvider` behaves like a standard [`Context.Provider` component](https://react.dev/reference/react/createContext#provider). It receives `value` and `children` props. The `value` is merged with the current block context value.
 
 ### `value`
 
diff --git a/packages/block-editor/src/components/block-controls/README.md b/packages/block-editor/src/components/block-controls/README.md
new file mode 100644
index 00000000000000..58daea482ef395
--- /dev/null
+++ b/packages/block-editor/src/components/block-controls/README.md
@@ -0,0 +1,89 @@
+# BlockControls
+
+When the user selects a particular block, a toolbar positioned above the selected block displays a set of control buttons. Certain block-level controls are automatically included in the toolbar under specific circumstances. For example, there is a control for converting the block into a different type or when the focused element is a RichText component.
+
+With `BlockControls`, you can customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, the controls nested inside it will be shown in the selected block's toolbar.
+
+![Screenshot of the block controls of a Paragraph block inside the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/toolbar-text.png)
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyBlockEdit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+	const { contentPosition } = attributes;
+
+	return (
+		<div { ...blockProps }>
+			{
+				<BlockControls>
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+					/>
+				</BlockControls>
+			}
+		</div>
+	);
+}
+
+/// ...
+
+<MyBlockEdit />;
+```
+
+See [this custom block tutorial page](/docs/getting-started/fundamentals/block-in-the-editor.md) for more information and block controls examples.
+
+Furthermore, the READMEs of various components inside the block editor package and the components package include examples that also utilize `BlockControls` and can be a good reference.
+
+### Props
+
+The component accepts the following props:
+
+### `group`
+
+Group of the block controls. Allows you to create and render multiple groups of block controls.
+
+- Type: `string`
+- Default: `default`
+- Required: No
+
+### `controls`
+
+Allows overriding the default `controls` if the `default` group is used. 
+
+See [this custom block tutorial page](/docs/getting-started/fundamentals/block-in-the-editor.md) for more details and examples with block controls.
+
+- Type: `array`
+
+### `children`
+
+Additional control components to be rendered.
+
+- Type: `Element`
+- Required: No.
+
+
+### `__experimentalShareWithChildBlocks`
+
+Whether the additional block controls should be added to the block toolbars of child blocks.
+
+- Type: `boolean`
+- Default: `false`
diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js
index 73c6a4c8c912f4..3090cfe5e0c8cf 100644
--- a/packages/block-editor/src/components/block-controls/fill.js
+++ b/packages/block-editor/src/components/block-controls/fill.js
@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalStyleProvider as StyleProvider,
-	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
 
@@ -31,21 +25,25 @@ export default function BlockControlsFill( {
 		return null;
 	}
 
+	const innerMarkup = (
+		<>
+			{ group === 'default' && <ToolbarGroup controls={ controls } /> }
+			{ children }
+		</>
+	);
+
 	return (
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to BlockControlsFill will not have access to any
-					// React Context whose Provider is part of the BlockControlsSlot tree.
-					// So we re-create the Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
-					return (
-						<ToolbarContext.Provider value={ value }>
-							{ group === 'default' && (
-								<ToolbarGroup controls={ controls } />
-							) }
-							{ children }
-						</ToolbarContext.Provider>
+					// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
+					// that should wrap the fill markup.
+					const { forwardedContext = [] } = fillProps;
+					return forwardedContext.reduce(
+						( inner, [ Provider, props ] ) => (
+							<Provider { ...props }>{ inner }</Provider>
+						),
+						innerMarkup
 					);
 				} }
 			</Fill>
diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js
index 8f4940a8597dae..4e9592471cb298 100644
--- a/packages/block-editor/src/components/block-controls/hook.js
+++ b/packages/block-editor/src/components/block-controls/hook.js
@@ -1,42 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
-import { store as blockEditorStore } from '../../store';
-import { useBlockEditContext } from '../block-edit/context';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../block-edit/context';
 
 export default function useBlockControlsFill( group, shareWithChildBlocks ) {
-	const isDisplayed = useDisplayBlockControls();
-	const { clientId } = useBlockEditContext();
-	const isParentDisplayed = useSelect(
-		( select ) => {
-			const { getBlockName, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-			return (
-				shareWithChildBlocks &&
-				hasBlockSupport(
-					getBlockName( clientId ),
-					'__experimentalExposeControlsToChildren',
-					false
-				) &&
-				hasSelectedInnerBlock( clientId )
-			);
-		},
-		[ shareWithChildBlocks, clientId ]
-	);
-
-	if ( isDisplayed ) {
+	const context = useBlockEditContext();
+	if ( context[ mayDisplayControlsKey ] ) {
 		return groups[ group ]?.Fill;
 	}
-	if ( isParentDisplayed ) {
+	if ( context[ mayDisplayParentControlsKey ] && shareWithChildBlocks ) {
 		return groups.parent.Fill;
 	}
 	return null;
diff --git a/packages/block-editor/src/components/block-controls/slot.js b/packages/block-editor/src/components/block-controls/slot.js
index c8cb65848e9f77..9548b3e5cb0de8 100644
--- a/packages/block-editor/src/components/block-controls/slot.js
+++ b/packages/block-editor/src/components/block-controls/slot.js
@@ -1,45 +1,54 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import {
+	privateApis,
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
+import { unlock } from '../../lock-unlock';
+
+const { ComponentsContext } = unlock( privateApis );
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
-	const fills = useSlotFills( Slot.__unstableName );
-	const hasFills = Boolean( fills && fills.length );
+	const toolbarState = useContext( ToolbarContext );
+	const contextState = useContext( ComponentsContext );
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ ToolbarContext.Provider, { value: toolbarState } ],
+				[ ComponentsContext.Provider, { value: contextState } ],
+			],
+		} ),
+		[ toolbarState, contextState ]
+	);
+
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill.name );
+
+	if ( ! slotFill ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 
+	const { Slot } = slotFill;
+	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
+
 	if ( group === 'default' ) {
-		return (
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		);
+		return slot;
 	}
 
-	return (
-		<ToolbarGroup>
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		</ToolbarGroup>
-	);
+	return <ToolbarGroup>{ slot }</ToolbarGroup>;
 }
diff --git a/packages/block-editor/src/components/block-controls/slot.native.js b/packages/block-editor/src/components/block-controls/slot.native.js
index 7ec46a8ef2251c..8b4e0ef25ce0d3 100644
--- a/packages/block-editor/src/components/block-controls/slot.native.js
+++ b/packages/block-editor/src/components/block-controls/slot.native.js
@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -13,15 +10,18 @@ import {
 import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-	const Slot = groups[ group ].Slot;
+	const Slot = groups[ group ]?.Slot;
+	if ( ! Slot ) {
+		warning( `Unknown BlockControls group "${ group }" provided.` );
+		return null;
+	}
 
 	if ( group === 'default' ) {
-		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+		return <Slot { ...props } />;
 	}
 
 	return (
-		<Slot { ...props } fillProps={ accessibleToolbarState }>
+		<Slot { ...props }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
 					return null;
diff --git a/packages/block-editor/src/components/block-controls/test/index.js b/packages/block-editor/src/components/block-controls/test/index.js
index cbfcb3c1873a75..bbd987cbeb20e8 100644
--- a/packages/block-editor/src/components/block-controls/test/index.js
+++ b/packages/block-editor/src/components/block-controls/test/index.js
@@ -59,7 +59,7 @@ describe( 'BlockControls', () => {
 	it( 'should render a dynamic toolbar of controls', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -84,7 +84,7 @@ describe( 'BlockControls', () => {
 	it( 'should render its children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls controls={ controls }>
 						<p>Child</p>
 					</BlockControls>
@@ -99,7 +99,7 @@ describe( 'BlockControls', () => {
 	it( 'should a dynamic toolbar when passed as children', () => {
 		render(
 			<SlotFillProvider>
-				<BlockEdit name="core/test-block" isSelected>
+				<BlockEdit name="core/test-block" mayDisplayControls>
 					<BlockControls>
 						<ToolbarGroup controls={ controls } />
 					</BlockControls>
diff --git a/packages/block-editor/src/components/block-draggable/content.scss b/packages/block-editor/src/components/block-draggable/content.scss
new file mode 100644
index 00000000000000..25a0f5c2565951
--- /dev/null
+++ b/packages/block-editor/src/components/block-draggable/content.scss
@@ -0,0 +1,26 @@
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overridden.
+.block-editor-block-list__layout .is-dragging {
+	opacity: 0.1 !important;
+	border-radius: $radius-small !important;
+
+	iframe {
+		pointer-events: none;
+	}
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
+}
+
+// Images are draggable by default, so disable drag for them if not explicitly
+// set. This is done so that the block can capture the drag event instead.
+.wp-block img:not([draggable]),
+.wp-block svg:not([draggable]) {
+	pointer-events: none;
+}
diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index d7d053be179fa6..cca21e7e0b7858 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -10,7 +10,12 @@ import { dragHandle } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockDraggableChip( { count, icon, isPattern } ) {
+export default function BlockDraggableChip( {
+	count,
+	icon,
+	isPattern,
+	fadeWhenDisabled,
+} ) {
 	const patternLabel = isPattern && __( 'Pattern' );
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
@@ -37,6 +42,11 @@ export default function BlockDraggableChip( { count, icon, isPattern } ) {
 					<FlexItem>
 						<BlockIcon icon={ dragHandle } />
 					</FlexItem>
+					{ fadeWhenDisabled && (
+						<FlexItem className="block-editor-block-draggable-chip__disabled">
+							<span className="block-editor-block-draggable-chip__disabled-icon"></span>
+						</FlexItem>
+					) }
 				</Flex>
 			</div>
 		</div>
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index 40f61bfc79ce4d..5bb328f7cf9f58 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
+import { throttle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -12,45 +13,165 @@ import { useEffect, useRef } from '@wordpress/element';
 import BlockDraggableChip from './draggable-chip';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import { store as blockEditorStore } from '../../store';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { isDropTargetValid } from '../use-block-drop-zone';
 
 const BlockDraggable = ( {
+	appendToOwnerDocument,
 	children,
 	clientIds,
 	cloneClassname,
+	elementId,
 	onDragStart,
 	onDragEnd,
+	fadeWhenDisabled = false,
+	dragComponent,
 } ) => {
-	const { srcRootClientId, isDraggable, icon } = useSelect(
+	const {
+		srcRootClientId,
+		isDraggable,
+		icon,
+		visibleInserter,
+		getBlockType,
+	} = useSelect(
 		( select ) => {
-			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
+			const {
+				canMoveBlocks,
+				getBlockRootClientId,
+				getBlockName,
+				getBlockAttributes,
+				isBlockInsertionPointVisible,
+			} = select( blockEditorStore );
+			const { getBlockType: _getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
+			const variation = getActiveBlockVariation(
+				blockName,
+				getBlockAttributes( clientIds[ 0 ] )
+			);
 
 			return {
 				srcRootClientId: rootClientId,
-				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: getBlockType( blockName )?.icon,
+				isDraggable: canMoveBlocks( clientIds ),
+				icon: variation?.icon || _getBlockType( blockName )?.icon,
+				visibleInserter: isBlockInsertionPointVisible(),
+				getBlockType: _getBlockType,
 			};
 		},
 		[ clientIds ]
 	);
-	const isDragging = useRef( false );
+
+	const isDraggingRef = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
+	const { getAllowedBlocks, getBlockNamesByClientId, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+
 	const { startDraggingBlocks, stopDraggingBlocks } =
 		useDispatch( blockEditorStore );
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
 		return () => {
-			if ( isDragging.current ) {
+			if ( isDraggingRef.current ) {
 				stopDraggingBlocks();
 			}
 		};
 	}, [] );
 
+	// Find the root of the editor iframe.
+	const blockEl = useBlockElement( clientIds[ 0 ] );
+	const editorRoot = blockEl?.closest( 'body' );
+
+	/*
+	 * Add a dragover event listener to the editor root to track the blocks being dragged over.
+	 * The listener has to be inside the editor iframe otherwise the target isn't accessible.
+	 */
+	useEffect( () => {
+		if ( ! editorRoot || ! fadeWhenDisabled ) {
+			return;
+		}
+
+		const onDragOver = ( event ) => {
+			if ( ! event.target.closest( '[data-block]' ) ) {
+				return;
+			}
+			const draggedBlockNames = getBlockNamesByClientId( clientIds );
+			const targetClientId = event.target
+				.closest( '[data-block]' )
+				.getAttribute( 'data-block' );
+
+			const allowedBlocks = getAllowedBlocks( targetClientId );
+			const targetBlockName = getBlockNamesByClientId( [
+				targetClientId,
+			] )[ 0 ];
+
+			/*
+			 * Check if the target is valid to drop in.
+			 * If the target's allowedBlocks is an empty array,
+			 * it isn't a container block, in which case we check
+			 * its parent's validity instead.
+			 */
+			let dropTargetValid;
+			if ( allowedBlocks?.length === 0 ) {
+				const targetRootClientId =
+					getBlockRootClientId( targetClientId );
+				const targetRootBlockName = getBlockNamesByClientId( [
+					targetRootClientId,
+				] )[ 0 ];
+				const rootAllowedBlocks =
+					getAllowedBlocks( targetRootClientId );
+				dropTargetValid = isDropTargetValid(
+					getBlockType,
+					rootAllowedBlocks,
+					draggedBlockNames,
+					targetRootBlockName
+				);
+			} else {
+				dropTargetValid = isDropTargetValid(
+					getBlockType,
+					allowedBlocks,
+					draggedBlockNames,
+					targetBlockName
+				);
+			}
+
+			/*
+			 * Update the body class to reflect if drop target is valid.
+			 * This has to be done on the document body because the draggable
+			 * chip is rendered outside of the editor iframe.
+			 */
+			if ( ! dropTargetValid && ! visibleInserter ) {
+				window?.document?.body?.classList?.add(
+					'block-draggable-invalid-drag-token'
+				);
+			} else {
+				window?.document?.body?.classList?.remove(
+					'block-draggable-invalid-drag-token'
+				);
+			}
+		};
+
+		const throttledOnDragOver = throttle( onDragOver, 200 );
+
+		editorRoot.addEventListener( 'dragover', throttledOnDragOver );
+
+		return () => {
+			editorRoot.removeEventListener( 'dragover', throttledOnDragOver );
+		};
+	}, [
+		clientIds,
+		editorRoot,
+		fadeWhenDisabled,
+		getAllowedBlocks,
+		getBlockNamesByClientId,
+		getBlockRootClientId,
+		getBlockType,
+		visibleInserter,
+	] );
+
 	if ( ! isDraggable ) {
 		return children( { draggable: false } );
 	}
@@ -63,23 +184,28 @@ const BlockDraggable = ( {
 
 	return (
 		<Draggable
+			appendToOwnerDocument={ appendToOwnerDocument }
 			cloneClassname={ cloneClassname }
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				startDraggingBlocks( clientIds );
-				isDragging.current = true;
+				// Defer hiding the dragged source element to the next
+				// frame to enable dragging.
+				window.requestAnimationFrame( () => {
+					startDraggingBlocks( clientIds );
+					isDraggingRef.current = true;
 
-				startScrolling( event );
+					startScrolling( event );
 
-				if ( onDragStart ) {
-					onDragStart();
-				}
+					if ( onDragStart ) {
+						onDragStart();
+					}
+				} );
 			} }
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {
 				stopDraggingBlocks();
-				isDragging.current = false;
+				isDraggingRef.current = false;
 
 				stopScrolling();
 
@@ -88,8 +214,19 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ clientIds.length } icon={ icon } />
+				// Check against `undefined` so that `null` can be used to disable
+				// the default drag component.
+				dragComponent !== undefined ? (
+					dragComponent
+				) : (
+					<BlockDraggableChip
+						count={ clientIds.length }
+						icon={ icon }
+						fadeWhenDisabled
+					/>
+				)
 			}
+			elementId={ elementId }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
diff --git a/packages/block-editor/src/components/block-draggable/index.native.js b/packages/block-editor/src/components/block-draggable/index.native.js
index cbad2ef5a1be52..6128bf0cb179a2 100644
--- a/packages/block-editor/src/components/block-draggable/index.native.js
+++ b/packages/block-editor/src/components/block-draggable/index.native.js
@@ -9,7 +9,6 @@ import {
 import Animated, {
 	runOnJS,
 	runOnUI,
-	useAnimatedRef,
 	useAnimatedStyle,
 	useSharedValue,
 	withDelay,
@@ -39,7 +38,6 @@ import RCTAztecView from '@wordpress/react-native-aztec';
 import useScrollWhenDragging from './use-scroll-when-dragging';
 import DraggableChip from './draggable-chip';
 import { store as blockEditorStore } from '../../store';
-import { useBlockListContext } from '../block-list/block-list-context';
 import DroppingInsertionPoint from './dropping-insertion-point';
 import useBlockDropZone from '../use-block-drop-zone';
 import styles from './style.scss';
@@ -74,13 +72,10 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	const { selectBlock, startDraggingBlocks, stopDraggingBlocks } =
 		useDispatch( blockEditorStore );
 
-	const { scrollRef } = useBlockListContext();
-	const animatedScrollRef = useAnimatedRef();
 	const { left, right } = useSafeAreaInsets();
 	const { width } = useSafeAreaFrame();
 	const safeAreaOffset = left + right;
 	const contentWidth = width - safeAreaOffset;
-	animatedScrollRef( scrollRef );
 
 	const scroll = {
 		offsetY: useSharedValue( 0 ),
@@ -109,8 +104,12 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		draggingScrollHandler( event );
 	};
 
-	const { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =
-		useBlockDropZone();
+	const {
+		onBlockDragOverWorklet,
+		onBlockDragEnd,
+		onBlockDrop,
+		targetBlockIndex,
+	} = useBlockDropZone();
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
@@ -184,7 +183,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		chip.y.value = dragPosition.y;
 		currentYPosition.value = dragPosition.y;
 
-		runOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );
+		onBlockDragOverWorklet( { x, y: y + scroll.offsetY.value } );
 
 		// Update scrolling velocity
 		scrollOnDragOver( dragPosition.y );
@@ -285,6 +284,58 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	);
 };
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
+function useIsEditingText() {
+	const [ isEditingText, setIsEditingText ] = useState( () =>
+		RCTAztecView.InputState.isFocused()
+	);
+
+	useEffect( () => {
+		const onFocusChangeAztec = ( { isFocused } ) => {
+			setIsEditingText( isFocused );
+		};
+
+		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		return () => {
+			RCTAztecView.InputState.removeFocusChangeListener(
+				onFocusChangeAztec
+			);
+		};
+	}, [] );
+
+	return isEditingText;
+}
+
 /**
  * Block draggable component
  *
@@ -308,9 +359,8 @@ const BlockDraggable = ( {
 	testID,
 } ) => {
 	const wasBeingDragged = useRef( false );
-	const [ isEditingText, setIsEditingText ] = useState( false );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isEditingText = useIsEditingText();
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -365,43 +415,6 @@ const BlockDraggable = ( {
 		wasBeingDragged.current = isBeingDragged;
 	}, [ isBeingDragged ] );
 
-	const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
-		setIsEditingText( isFocused );
-	}, [] );
-
-	useEffect( () => {
-		let mounted = true;
-
-		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
-		if ( isAnyAztecInputFocused ) {
-			setIsEditingText( isAnyAztecInputFocused );
-		}
-
-		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
-
-		const screenReaderChangedListener = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				if ( mounted ) {
-					setIsScreenReaderEnabled( screenReaderEnabled );
-				}
-			}
-		);
-
-		return () => {
-			mounted = false;
-
-			RCTAztecView.InputState.removeFocusChangeListener(
-				onFocusChangeAztec
-			);
-
-			screenReaderChangedListener.remove();
-		};
-	}, [] );
-
 	const onLongPressDraggable = useCallback( () => {
 		// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
 		RCTAztecView.InputState.blurCurrentFocusedElement();
diff --git a/packages/block-editor/src/components/block-draggable/stories/index.js b/packages/block-editor/src/components/block-draggable/stories/index.story.js
similarity index 100%
rename from packages/block-editor/src/components/block-draggable/stories/index.js
rename to packages/block-editor/src/components/block-draggable/stories/index.story.js
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 03ecec53945ba1..f716f2d32a1d40 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -7,14 +7,16 @@
 
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
-	border-radius: $radius-block-ui;
-	box-shadow: 0 6px 8px rgba($black, 0.3);
+	border-radius: $radius-small;
+	box-shadow: $elevation-small;
 	color: $white;
 	cursor: grabbing;
 	display: inline-flex;
 	height: $block-toolbar-height;
 	padding: 0 ( $grid-unit-15 + $border-width );
+	position: relative;
 	user-select: none;
+	width: max-content;
 
 	svg {
 		fill: currentColor;
@@ -45,23 +47,36 @@
 	}
 }
 
-// This creates a "slot" where the block you're dragging appeared.
-// We use !important as one of the rules are meant to be overriden.
-.block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
-	border-radius: $radius-block-ui !important;
+// Specificity bump to override native component style.
+.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: transparent;
+	transition: all 0.1s linear 0.1s;
 
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
+	.block-editor-block-draggable-chip__disabled-icon {
+		width: $grid-unit-50 * 0.5;
+		height: $grid-unit-50 * 0.5;
+		box-shadow: inset 0 0 0 1.5px $white;
+		border-radius: 50%;
+		display: inline-block;
+		padding: 0;
+		background: transparent linear-gradient(-45deg, transparent 47.5%, $white 47.5%, $white 52.5%, transparent 52.5%);
 
-	// Hide the multi selection indicator when dragging.
-	&::selection {
-		background: transparent !important;
 	}
+}
 
-	&::after {
-		content: none !important;
+.block-draggable-invalid-drag-token {
+	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
+		background-color: $gray-700;
+		opacity: 1;
+		box-shadow: $elevation-small;
 	}
 }
diff --git a/packages/block-editor/src/components/block-draggable/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/block-draggable/test/__snapshots__/index.native.js.snap
index 286c6e11e2a305..1c2dc4c68a0ab5 100644
--- a/packages/block-editor/src/components/block-draggable/test/__snapshots__/index.native.js.snap
+++ b/packages/block-editor/src/components/block-draggable/test/__snapshots__/index.native.js.snap
@@ -5,28 +5,28 @@ exports[`BlockDraggable moves blocks: Initial order 1`] = `
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Paragraph block moved from first to second position 1`] = `
-"<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+"<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
@@ -34,40 +34,40 @@ exports[`BlockDraggable moves blocks: Paragraph block moved from first to second
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`BlockDraggable moves blocks: Spacer block moved from third to first position 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
 <p>This is a paragraph.</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"sizeSlug\\":\\"large\\",\\"linkDestination\\":\\"none\\"} -->
-<figure class=\\"wp-block-image size-large\\"><img src=\\"https://cldup.com/cXyG__fTLN.jpg\\" alt=\\"\\"/></figure>
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
diff --git a/packages/block-editor/src/components/block-draggable/test/helpers.native.js b/packages/block-editor/src/components/block-draggable/test/helpers.native.js
index ed9bf443d4013a..eb0689c13cfa1c 100644
--- a/packages/block-editor/src/components/block-draggable/test/helpers.native.js
+++ b/packages/block-editor/src/components/block-draggable/test/helpers.native.js
@@ -3,11 +3,12 @@
  */
 import {
 	act,
+	advanceAnimationByFrames,
 	fireEvent,
 	initializeEditor,
+	screen,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -52,15 +53,15 @@ const DEFAULT_TOUCH_EVENTS = [
 export const initializeWithBlocksLayouts = async ( blocks ) => {
 	const initialHtml = blocks.map( ( block ) => block.html ).join( '\n' );
 
-	const screen = await initializeEditor( { initialHtml } );
-	const { getByLabelText } = screen;
+	await initializeEditor( { initialHtml } );
 
 	const waitPromises = [];
+	const blockListItems = screen.getAllByTestId( 'block-list-item-cell' );
+	// Check that rendered block list items match expected block count.
+	expect( blockListItems.length ).toBe( blocks.length );
+
 	blocks.forEach( ( block, index ) => {
-		const a11yLabel = new RegExp(
-			`${ block.name } Block\\. Row ${ index + 1 }`
-		);
-		const element = getByLabelText( a11yLabel );
+		const element = blockListItems[ index ];
 		// "onLayout" event will populate the blocks layouts data.
 		fireEvent( element, 'layout', {
 			nativeEvent: { layout: block.layout },
@@ -91,13 +92,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 				const nestedA11yLabel = new RegExp(
 					`${ nestedBlock.name } Block\\. Row ${ nestedIndex + 1 }`
 				);
-				fireEvent(
-					within( element ).getByLabelText( nestedA11yLabel ),
-					'layout',
-					{
-						nativeEvent: { layout: nestedBlock.layout },
-					}
-				);
+				const [ nestedElement ] =
+					within( element ).getAllByLabelText( nestedA11yLabel );
+				fireEvent( nestedElement, 'layout', {
+					nativeEvent: { layout: nestedBlock.layout },
+				} );
 			} );
 		}
 	} );
diff --git a/packages/block-editor/src/components/block-draggable/test/index.native.js b/packages/block-editor/src/components/block-draggable/test/index.native.js
index 2783845946050f..3611f6669ef5d5 100644
--- a/packages/block-editor/src/components/block-draggable/test/index.native.js
+++ b/packages/block-editor/src/components/block-draggable/test/index.native.js
@@ -16,7 +16,6 @@ import TextInputState from 'react-native/Libraries/Components/TextInput/TextInpu
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import '@wordpress/jest-console';
 
 /**
  * Internal dependencies
@@ -93,11 +92,13 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 
 					// Start dragging from block's content
+					const [ paragraphBlock ] = screen.getAllByLabelText(
+						/Paragraph Block\. Row 1/
+					);
 					fireLongPress(
-						getByLabelText( /Paragraph Block\. Row 1/ ),
+						paragraphBlock,
 						'draggable-trigger-content'
 					);
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -112,12 +113,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
+
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const paragraphBlock = getByLabelText(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 					fireEvent.press( paragraphBlock );
@@ -131,24 +132,13 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						paragraphBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'does not enable drag mode when selected and editing text', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 
-					const paragraphBlock = getByLabelText(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
 
@@ -178,13 +168,12 @@ describe( 'BlockDraggable', () => {
 			it( 'finishes editing text and enables drag mode when long-pressing over a different block', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 
-					const paragraphBlock = getByLabelText(
+					const [ paragraphBlock ] = screen.getAllByLabelText(
 						/Paragraph Block\. Row 1/
 					);
-					const spacerBlock =
-						getByLabelText( /Spacer Block\. Row 3/ );
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
 
 					// Select Paragraph block and start editing text
 					fireEvent.press( paragraphBlock );
@@ -208,12 +197,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByLabelText } = screen;
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock =
-						getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
+					const [ imageBlock ] =
+						screen.getAllByLabelText( /Image Block\. Row 2/ );
 					// Start dragging from block's content
 					fireLongPress( imageBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
@@ -228,15 +216,14 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getAllByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
 					// We select the first Image block as the Gallery block
 					// also contains Image blocks.
-					const imageBlock =
-						getAllByLabelText( /Image Block\. Row 2/ )[ 0 ];
+					const [ imageBlock ] =
+						screen.getAllByLabelText( /Image Block\. Row 2/ );
 					fireEvent.press( imageBlock );
 
 					// Start dragging from block's content
@@ -245,16 +232,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						imageBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -262,15 +239,15 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 
 					// Start dragging from block's content, specifically the first
 					// trigger index, which corresponds to the Gallery block content.
-					fireLongPress(
-						getByLabelText( /Gallery Block\. Row 4/ ),
-						'draggable-trigger-content',
-						{ triggerIndex: 0 }
+					const [ galleryBlock ] = screen.getAllByLabelText(
+						/Gallery Block\. Row 4/
 					);
+					fireLongPress( galleryBlock, 'draggable-trigger-content', {
+						triggerIndex: 0,
+					} );
 					expect( getDraggableChip( screen ) ).toBeVisible();
 
 					// "firePanGesture" finishes the dragging gesture
@@ -283,12 +260,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByLabelText(
+					const [ galleryBlock ] = screen.getAllByLabelText(
 						/Gallery Block\. Row 4/
 					);
 					await waitForStoreResolvers( () =>
@@ -304,31 +280,20 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						galleryBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 
 			it( 'enables drag mode when nested block is selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const galleryBlock = getByLabelText(
+					const [ galleryBlock ] = screen.getAllByLabelText(
 						/Gallery Block\. Row 4/
 					);
-					const galleryItem =
-						within( galleryBlock ).getByLabelText(
+					const [ galleryItem ] =
+						within( galleryBlock ).getAllByLabelText(
 							/Image Block\. Row 2/
 						);
 					fireEvent.press( galleryBlock );
@@ -340,20 +305,6 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// After dropping the block, the gallery item gets automatically selected.
-					// Hence, we have to select the gallery item again.
-					fireEvent.press( galleryItem );
-
-					// Start dragging from nested block's mobile toolbar
-					fireLongPress(
-						galleryItem,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 
@@ -361,13 +312,11 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when unselected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 
 					// Start dragging from block's content
-					fireLongPress(
-						getByLabelText( /Spacer Block\. Row 3/ ),
-						'draggable-trigger-content'
-					);
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
+					fireLongPress( spacerBlock, 'draggable-trigger-content' );
 					expect( getDraggableChip( screen ) ).toBeVisible();
 
 					// "firePanGesture" finishes the dragging gesture
@@ -380,13 +329,12 @@ describe( 'BlockDraggable', () => {
 			it( 'enables drag mode when selected', async () =>
 				withReanimatedTimer( async () => {
 					const screen = await initializeWithBlocksLayouts( BLOCKS );
-					const { getByLabelText } = screen;
 					const blockDraggableWrapper = getByGestureTestId(
 						'block-draggable-wrapper'
 					);
 
-					const spacerBlock =
-						getByLabelText( /Spacer Block\. Row 3/ );
+					const [ spacerBlock ] =
+						screen.getAllByLabelText( /Spacer Block\. Row 3/ );
 					await waitForStoreResolvers( () =>
 						fireEvent.press( spacerBlock )
 					);
@@ -397,25 +345,13 @@ describe( 'BlockDraggable', () => {
 					// "firePanGesture" finishes the dragging gesture
 					firePanGesture( blockDraggableWrapper );
 					expect( getDraggableChip( screen ) ).not.toBeDefined();
-
-					// Start dragging from block's mobile toolbar
-					fireLongPress(
-						spacerBlock,
-						'draggable-trigger-mobile-toolbar'
-					);
-					expect( getDraggableChip( screen ) ).toBeVisible();
-					// "firePanGesture" finishes the dragging gesture
-					firePanGesture( blockDraggableWrapper );
-					expect( getDraggableChip( screen ) ).not.toBeDefined();
 				} ) );
 		} );
 	} );
 
 	it( 'moves blocks', async () =>
 		withReanimatedTimer( async () => {
-			const { getByLabelText } = await initializeWithBlocksLayouts(
-				BLOCKS
-			);
+			const screen = await initializeWithBlocksLayouts( BLOCKS );
 			const blockDraggableWrapper = getByGestureTestId(
 				'block-draggable-wrapper'
 			);
@@ -423,10 +359,10 @@ describe( 'BlockDraggable', () => {
 			expect( getEditorHtml() ).toMatchSnapshot( 'Initial order' );
 
 			// Move Paragraph block from first to second position
-			fireLongPress(
-				getByLabelText( /Paragraph Block\. Row 1/ ),
-				'draggable-trigger-content'
+			const [ paragraphBlock ] = screen.getAllByLabelText(
+				/Paragraph Block\. Row 1/
 			);
+			fireLongPress( paragraphBlock, 'draggable-trigger-content' );
 			firePanGesture( blockDraggableWrapper, [
 				{
 					id: TOUCH_EVENT_ID,
@@ -446,17 +382,16 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Paragraph block moved from first to second position'
 			);
 
 			// Move Spacer block from third to first position
-			fireLongPress(
-				getByLabelText( /Spacer Block\. Row 3/ ),
-				'draggable-trigger-content'
-			);
+			const [ spacerBlock ] =
+				screen.getAllByLabelText( /Spacer Block\. Row 3/ );
+			fireLongPress( spacerBlock, 'draggable-trigger-content' );
 			firePanGesture( blockDraggableWrapper, [
 				{
 					id: TOUCH_EVENT_ID,
@@ -475,7 +410,7 @@ describe( 'BlockDraggable', () => {
 			// activate the gesture. Since this not available in tests, the library
 			// displays a warning message.
 			expect( console ).toHaveWarnedWith(
-				'[react-native-gesture-handler] You have to use react-native-reanimated in order to control the state of the gesture.'
+				'[Reanimated] setGestureState() cannot be used with Jest.'
 			);
 			expect( getEditorHtml() ).toMatchSnapshot(
 				'Spacer block moved from third to first position'
diff --git a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
index aa66c27503cf98..515f3002de9344 100644
--- a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
+++ b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
@@ -18,36 +18,36 @@ const VELOCITY_MULTIPLIER =
  *                      and `onDragEnd` events respectively.
  */
 export default function useScrollWhenDragging() {
-	const dragStartY = useRef( null );
-	const velocityY = useRef( null );
-	const scrollParentY = useRef( null );
-	const scrollEditorInterval = useRef( null );
+	const dragStartYRef = useRef( null );
+	const velocityYRef = useRef( null );
+	const scrollParentYRef = useRef( null );
+	const scrollEditorIntervalRef = useRef( null );
 
 	// Clear interval when unmounting.
 	useEffect(
 		() => () => {
-			if ( scrollEditorInterval.current ) {
-				clearInterval( scrollEditorInterval.current );
-				scrollEditorInterval.current = null;
+			if ( scrollEditorIntervalRef.current ) {
+				clearInterval( scrollEditorIntervalRef.current );
+				scrollEditorIntervalRef.current = null;
 			}
 		},
 		[]
 	);
 
 	const startScrolling = useCallback( ( event ) => {
-		dragStartY.current = event.clientY;
+		dragStartYRef.current = event.clientY;
 
 		// Find nearest parent(s) to scroll.
-		scrollParentY.current = getScrollContainer( event.target );
+		scrollParentYRef.current = getScrollContainer( event.target );
 
-		scrollEditorInterval.current = setInterval( () => {
-			if ( scrollParentY.current && velocityY.current ) {
+		scrollEditorIntervalRef.current = setInterval( () => {
+			if ( scrollParentYRef.current && velocityYRef.current ) {
 				const newTop =
-					scrollParentY.current.scrollTop + velocityY.current;
+					scrollParentYRef.current.scrollTop + velocityYRef.current;
 
 				// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
 				// Better to use a small scroll interval.
-				scrollParentY.current.scroll( {
+				scrollParentYRef.current.scroll( {
 					top: newTop,
 				} );
 			}
@@ -55,14 +55,14 @@ export default function useScrollWhenDragging() {
 	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
-		if ( ! scrollParentY.current ) {
+		if ( ! scrollParentYRef.current ) {
 			return;
 		}
-		const scrollParentHeight = scrollParentY.current.offsetHeight;
+		const scrollParentHeight = scrollParentYRef.current.offsetHeight;
 		const offsetDragStartPosition =
-			dragStartY.current - scrollParentY.current.offsetTop;
+			dragStartYRef.current - scrollParentYRef.current.offsetTop;
 		const offsetDragPosition =
-			event.clientY - scrollParentY.current.offsetTop;
+			event.clientY - scrollParentYRef.current.offsetTop;
 
 		if ( event.clientY > offsetDragStartPosition ) {
 			// User is dragging downwards.
@@ -78,8 +78,11 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
-			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
+			velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
 			const moveableDistance = Math.max(
@@ -92,20 +95,23 @@ export default function useScrollWhenDragging() {
 					SCROLL_INACTIVE_DISTANCE_PX,
 				0
 			);
-			const distancePercentage = dragDistance / moveableDistance;
-			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
+			const distancePercentage =
+				moveableDistance === 0 || dragDistance === 0
+					? 0
+					: dragDistance / moveableDistance;
+			velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
-			velocityY.current = 0;
+			velocityYRef.current = 0;
 		}
 	}, [] );
 
 	const stopScrolling = () => {
-		dragStartY.current = null;
-		scrollParentY.current = null;
+		dragStartYRef.current = null;
+		scrollParentYRef.current = null;
 
-		if ( scrollEditorInterval.current ) {
-			clearInterval( scrollEditorInterval.current );
-			scrollEditorInterval.current = null;
+		if ( scrollEditorIntervalRef.current ) {
+			clearInterval( scrollEditorIntervalRef.current );
+			scrollEditorIntervalRef.current = null;
 		}
 	};
 
diff --git a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.native.js b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.native.js
index ef5c437206bbd1..75e6c04ffa33b2 100644
--- a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.native.js
+++ b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.native.js
@@ -34,7 +34,7 @@ const VELOCITY_MULTIPLIER = 5000;
 export default function useScrollWhenDragging() {
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
-	animatedScrollRef( scrollRef );
+	animatedScrollRef( scrollRef?.scrollViewRef );
 
 	const { height: windowHeight } = useWindowDimensions();
 
diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js
index d8b9c829484102..6bb1861abd0a2b 100644
--- a/packages/block-editor/src/components/block-edit/context.js
+++ b/packages/block-editor/src/components/block-edit/context.js
@@ -3,6 +3,12 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
+export const mayDisplayControlsKey = Symbol( 'mayDisplayControls' );
+export const mayDisplayParentControlsKey = Symbol( 'mayDisplayParentControls' );
+export const blockEditingModeKey = Symbol( 'blockEditingMode' );
+export const blockBindingsKey = Symbol( 'blockBindings' );
+export const isPreviewModeKey = Symbol( 'isPreviewMode' );
+
 export const DEFAULT_BLOCK_EDIT_CONTEXT = {
 	name: '',
 	isSelected: false,
diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js
index f9154067e0729a..83d0e3f406f829 100644
--- a/packages/block-editor/src/components/block-edit/edit.js
+++ b/packages/block-editor/src/components/block-edit/edit.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { pick } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +29,25 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
-export const Edit = ( props ) => {
+const Edit = ( props ) => {
+	const { name } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferentially as the render value for the block.
+	const Component = blockType.edit || blockType.save;
+
+	return <Component { ...props } />;
+};
+
+const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
+
+const EditWithGeneratedProps = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
@@ -38,7 +55,11 @@ export const Edit = ( props ) => {
 	// Assign context values using the block type's declared context needs.
 	const context = useMemo( () => {
 		return blockType && blockType.usesContext
-			? pick( blockContext, blockType.usesContext )
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						blockType.usesContext.includes( key )
+					)
+			  )
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ blockType, blockContext ] );
 
@@ -46,28 +67,27 @@ export const Edit = ( props ) => {
 		return null;
 	}
 
-	// `edit` and `save` are functions or components describing the markup
-	// with which a block is displayed. If `blockType` is valid, assign
-	// them preferentially as the render value for the block.
-	const Component = blockType.edit || blockType.save;
-
 	if ( blockType.apiVersion > 1 ) {
-		return <Component { ...props } context={ context } />;
+		return <EditWithFilters { ...props } context={ context } />;
 	}
 
 	// Generate a class name for the block's editable form.
 	const generatedClassName = hasBlockSupport( blockType, 'className', true )
 		? getBlockDefaultClassName( name )
 		: null;
-	const className = classnames(
+	const className = clsx(
 		generatedClassName,
 		attributes.className,
 		props.className
 	);
 
 	return (
-		<Component { ...props } context={ context } className={ className } />
+		<EditWithFilters
+			{ ...props }
+			context={ context }
+			className={ className }
+		/>
 	);
 };
 
-export default withFilters( 'editor.BlockEdit' )( Edit );
+export default EditWithGeneratedProps;
diff --git a/packages/block-editor/src/components/block-edit/edit.native.js b/packages/block-editor/src/components/block-edit/edit.native.js
index 80b07374cf11ef..12d16d155d7b31 100644
--- a/packages/block-editor/src/components/block-edit/edit.native.js
+++ b/packages/block-editor/src/components/block-edit/edit.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,7 +29,11 @@ export const Edit = ( props ) => {
 	// Assign context values using the block type's declared context needs.
 	const context = useMemo( () => {
 		return blockType && blockType.usesContext
-			? pick( blockContext, blockType.usesContext )
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						blockType.usesContext.includes( key )
+					)
+			  )
 			: DEFAULT_BLOCK_CONTEXT;
 	}, [ blockType, blockContext ] );
 
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index 747e25b820847d..0c29c0e98b1bfd 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -1,13 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Edit from './edit';
-import { BlockEditContextProvider, useBlockEditContext } from './context';
+import {
+	BlockEditContextProvider,
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+	blockEditingModeKey,
+	blockBindingsKey,
+	isPreviewModeKey,
+} from './context';
+import { MultipleUsageWarning } from './multiple-usage-warning';
+import { PrivateBlockContext } from '../block-list/private-block-context';
 
 /**
  * The `useBlockEditContext` hook provides information about the block this hook is being used in.
@@ -19,22 +30,72 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
  */
 export { useBlockEditContext };
 
-export default function BlockEdit( props ) {
-	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
-	const context = {
+export default function BlockEdit( {
+	mayDisplayControls,
+	mayDisplayParentControls,
+	blockEditingMode,
+	isPreviewMode,
+	// The remaining props are passed through the BlockEdit filters and are thus
+	// public API!
+	...props
+} ) {
+	const {
 		name,
 		isSelected,
 		clientId,
+		attributes = {},
 		__unstableLayoutClassNames,
-	};
+	} = props;
+	const { layout = null, metadata = {} } = attributes;
+	const { bindings } = metadata;
+	const layoutSupport =
+		hasBlockSupport( name, 'layout', false ) ||
+		hasBlockSupport( name, '__experimentalLayout', false );
+	const { originalBlockClientId } = useContext( PrivateBlockContext );
+
 	return (
 		<BlockEditContextProvider
 			// It is important to return the same object if props haven't
 			// changed to avoid  unnecessary rerenders.
 			// See https://reactjs.org/docs/context.html#caveats.
-			value={ useMemo( () => context, Object.values( context ) ) }
+			value={ useMemo(
+				() => ( {
+					name,
+					isSelected,
+					clientId,
+					layout: layoutSupport ? layout : null,
+					__unstableLayoutClassNames,
+					// We use symbols in favour of an __unstable prefix to avoid
+					// usage outside of the package (this context is exposed).
+					[ mayDisplayControlsKey ]: mayDisplayControls,
+					[ mayDisplayParentControlsKey ]: mayDisplayParentControls,
+					[ blockEditingModeKey ]: blockEditingMode,
+					[ blockBindingsKey ]: bindings,
+					[ isPreviewModeKey ]: isPreviewMode,
+				} ),
+				[
+					name,
+					isSelected,
+					clientId,
+					layoutSupport,
+					layout,
+					__unstableLayoutClassNames,
+					mayDisplayControls,
+					mayDisplayParentControls,
+					blockEditingMode,
+					bindings,
+					isPreviewMode,
+				]
+			) }
 		>
 			<Edit { ...props } />
+			{ originalBlockClientId && (
+				<MultipleUsageWarning
+					originalBlockClientId={ originalBlockClientId }
+					name={ name }
+					onReplace={ props.onReplace }
+				/>
+			) }
 		</BlockEditContextProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-edit/multiple-usage-warning.js b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
new file mode 100644
index 00000000000000..ac83b0e5c11315
--- /dev/null
+++ b/packages/block-editor/src/components/block-edit/multiple-usage-warning.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Warning from '../warning';
+
+export function MultipleUsageWarning( {
+	originalBlockClientId,
+	name,
+	onReplace,
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const blockType = getBlockType( name );
+
+	return (
+		<Warning
+			actions={ [
+				<Button
+					__next40pxDefaultSize
+					key="find-original"
+					variant="secondary"
+					onClick={ () => selectBlock( originalBlockClientId ) }
+				>
+					{ __( 'Find original' ) }
+				</Button>,
+				<Button
+					__next40pxDefaultSize
+					key="remove"
+					variant="secondary"
+					onClick={ () => onReplace( [] ) }
+				>
+					{ __( 'Remove' ) }
+				</Button>,
+			] }
+		>
+			<strong>{ blockType?.title }: </strong>
+			{ __( 'This block can only be used once.' ) }
+		</Warning>
+	);
+}
diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js
index 26d90bcd5b2811..76afbcb852ac19 100644
--- a/packages/block-editor/src/components/block-edit/test/edit.js
+++ b/packages/block-editor/src/components/block-edit/test/edit.js
@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { Edit } from '../edit';
+import Edit from '../edit';
 import { BlockContextProvider } from '../../block-context';
 
 const noop = () => {};
@@ -107,7 +107,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				apiVersion: 2,
+				apiVersion: 3,
 				category: 'text',
 				title: 'block title',
 				usesContext: [ 'value' ],
diff --git a/packages/block-editor/src/components/block-editing-mode/index.js b/packages/block-editor/src/components/block-editing-mode/index.js
new file mode 100644
index 00000000000000..7cb500af1e9c05
--- /dev/null
+++ b/packages/block-editor/src/components/block-editing-mode/index.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import {
+	useBlockEditContext,
+	blockEditingModeKey,
+} from '../block-edit/context';
+
+/**
+ * @typedef {'disabled'|'contentOnly'|'default'} BlockEditingMode
+ */
+
+/**
+ * Allows a block to restrict the user interface that is displayed for editing
+ * that block and its inner blocks.
+ *
+ * @example
+ * ```js
+ * function MyBlock( { attributes, setAttributes } ) {
+ *     useBlockEditingMode( 'disabled' );
+ *     return <div { ...useBlockProps() }></div>;
+ * }
+ * ```
+ *
+ * `mode` can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * If called outside of a block context, the mode is applied to all blocks.
+ *
+ * @param {?BlockEditingMode} mode The editing mode to apply. If undefined, the
+ *                                 current editing mode is not changed.
+ *
+ * @return {BlockEditingMode} The current editing mode.
+ */
+export function useBlockEditingMode( mode ) {
+	const context = useBlockEditContext();
+	const { clientId = '' } = context;
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+	const globalBlockEditingMode = useSelect(
+		( select ) =>
+			// Avoid adding the subscription if not needed!
+			clientId ? null : select( blockEditorStore ).getBlockEditingMode(),
+		[ clientId ]
+	);
+	useEffect( () => {
+		if ( mode ) {
+			setBlockEditingMode( clientId, mode );
+		}
+		return () => {
+			if ( mode ) {
+				unsetBlockEditingMode( clientId );
+			}
+		};
+	}, [ clientId, mode, setBlockEditingMode, unsetBlockEditingMode ] );
+	return clientId ? context[ blockEditingModeKey ] : globalBlockEditingMode;
+}
diff --git a/packages/block-editor/src/components/block-full-height-alignment-control/index.js b/packages/block-editor/src/components/block-full-height-alignment-control/index.js
index 98384414ae4ba4..00d908ce8b7e79 100644
--- a/packages/block-editor/src/components/block-full-height-alignment-control/index.js
+++ b/packages/block-editor/src/components/block-full-height-alignment-control/index.js
@@ -7,7 +7,7 @@ import { fullscreen } from '@wordpress/icons';
 
 function BlockFullHeightAlignmentControl( {
 	isActive,
-	label = __( 'Toggle full height' ),
+	label = __( 'Full height' ),
 	onToggle,
 	isDisabled,
 } ) {
diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/README.md b/packages/block-editor/src/components/block-heading-level-dropdown/README.md
new file mode 100644
index 00000000000000..b718bf6b25339d
--- /dev/null
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/README.md
@@ -0,0 +1,52 @@
+# Heading Level Dropdown
+
+`<HeadingLevelDropdown>` Adds a dropdown for selecting H1-H6 and paragraph HTML tags from the block toolbar.
+Uses `<ToolbarDropdownMenu>`.
+
+## Usage
+
+```jsx
+
+import { BlockControls, HeadingLevelDropdown } from '@wordpress/block-editor';
+
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
+
+const MyHeadingLevelToolbar = () => (
+	<BlockControls group="block">
+		<HeadingLevelDropdown
+			options={ HEADING_LEVELS }
+			value={ tag }
+			onChange={ ( newTag ) =>
+				setAttributes( { tag: newTag } )
+			}
+		/>
+	</BlockControls>
+);
+```
+
+### Props
+
+#### options
+
+The list of available heading levels, passed from the block.
+
+-   Type: `Object`
+-   Required: no
+
+#### value
+
+The chosen heading level.
+
+-   Type: `number`
+-   Required: no
+
+#### onChange
+
+Function called with the selected value changes.
+
+-   Type: `() => number`
+-   Required: yes
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js
new file mode 100644
index 00000000000000..397b1a27e65253
--- /dev/null
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/heading-level-icon.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	headingLevel1,
+	headingLevel2,
+	headingLevel3,
+	headingLevel4,
+	headingLevel5,
+	headingLevel6,
+	paragraph,
+} from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
+
+/** @typedef {import('react').ComponentType} ComponentType */
+
+/**
+ * HeadingLevelIcon props.
+ *
+ * @typedef WPHeadingLevelIconProps
+ *
+ * @property {number} level The heading level to show an icon for.
+ */
+
+const LEVEL_TO_PATH = {
+	0: paragraph,
+	1: headingLevel1,
+	2: headingLevel2,
+	3: headingLevel3,
+	4: headingLevel4,
+	5: headingLevel5,
+	6: headingLevel6,
+};
+
+/**
+ * Heading level icon.
+ *
+ * @param {WPHeadingLevelIconProps} props Component props.
+ *
+ * @return {?ComponentType} The icon.
+ */
+export default function HeadingLevelIcon( { level } ) {
+	if ( LEVEL_TO_PATH[ level ] ) {
+		return <Icon icon={ LEVEL_TO_PATH[ level ] } />;
+	}
+
+	return null;
+}
diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
new file mode 100644
index 00000000000000..6b9bad09978a50
--- /dev/null
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+const POPOVER_PROPS = {
+	className: 'block-library-heading-level-dropdown',
+};
+
+/** @typedef {import('react').ComponentType} ComponentType */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6) or paragraph (0).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {ComponentType} The toolbar.
+ */
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
+	const validOptions = options
+		.filter(
+			( option ) => option === 0 || HEADING_LEVELS.includes( option )
+		)
+		.sort( ( a, b ) => a - b ); // Sorts numerically in ascending order;
+
+	return (
+		<ToolbarDropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			icon={ <HeadingLevelIcon level={ value } /> }
+			label={ __( 'Change level' ) }
+			controls={ validOptions.map( ( targetLevel ) => {
+				const isActive = targetLevel === value;
+				return {
+					icon: <HeadingLevelIcon level={ targetLevel } />,
+					title:
+						targetLevel === 0
+							? __( 'Paragraph' )
+							: sprintf(
+									// translators: %d: heading level e.g: "1", "2", "3"
+									__( 'Heading %d' ),
+									targetLevel
+							  ),
+					isActive,
+					onClick() {
+						onChange( targetLevel );
+					},
+					role: 'menuitemradio',
+				};
+			} ) }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js
new file mode 100644
index 00000000000000..d1a87fe542d41f
--- /dev/null
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.native.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { DropdownMenu } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelIcon from './heading-level-icon';
+
+const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
+
+/** @typedef {import('react').ComponentType} ComponentType */
+
+/**
+ * HeadingLevelDropdown props.
+ *
+ * @typedef WPHeadingLevelDropdownProps
+ *
+ * @property {number}     value    The chosen heading level.
+ * @property {number[]}   options  An array of supported heading levels.
+ * @property {()=>number} onChange Function called with
+ *                                 the selected value changes.
+ */
+
+/**
+ * Dropdown for selecting a heading level (1 through 6).
+ *
+ * @param {WPHeadingLevelDropdownProps} props Component props.
+ *
+ * @return {ComponentType} The toolbar.
+ */
+export default function HeadingLevelDropdown( {
+	options = HEADING_LEVELS,
+	value,
+	onChange,
+} ) {
+	const createLevelControl = (
+		targetLevel,
+		currentLevel,
+		onChangeCallback
+	) => {
+		const isActive = targetLevel === currentLevel;
+		return {
+			icon: (
+				<HeadingLevelIcon
+					level={ targetLevel }
+					isPressed={ isActive }
+				/>
+			),
+			// translators: %d: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive,
+			onClick: () => onChangeCallback( targetLevel ),
+		};
+	};
+
+	return (
+		<DropdownMenu
+			icon={ <HeadingLevelIcon level={ value } /> }
+			controls={ options.map( ( index ) =>
+				createLevelControl( index, value, onChange )
+			) }
+			label={ __( 'Change level' ) }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md
index 4d7178032b366f..638d7956831988 100644
--- a/packages/block-editor/src/components/block-icon/README.md
+++ b/packages/block-editor/src/components/block-icon/README.md
@@ -6,11 +6,6 @@ The rendered an [Icon](https://github.com/WordPress/gutenberg/tree/HEAD/packages
 
 ![Image block icons in various places](https://make.wordpress.org/core/files/2020/08/image-block-icons-in-various-places.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-icon/content.scss b/packages/block-editor/src/components/block-icon/content.scss
new file mode 100644
index 00000000000000..033e0d3129d741
--- /dev/null
+++ b/packages/block-editor/src/components/block-icon/content.scss
@@ -0,0 +1,31 @@
+.block-editor-block-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+
+	&.has-colors {
+		svg {
+			fill: currentColor;
+
+			// Optimizate for high contrast modes.
+			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+			@media (forced-colors: active) {
+				fill: CanvasText;
+			}
+		}
+	}
+
+	// Icons with width/height attributes below 20px will be sized up to 20px,
+	// and icons with width/height attributes above 24px will be sized down to
+	// 24px. Icons with width/height >=20px and <=24px will display at the
+	// indicated size.
+	// See: https://github.com/WordPress/gutenberg/pull/9828
+	svg {
+		min-width: 20px;
+		min-height: 20px;
+		max-width: 24px;
+		max-height: 24px;
+	}
+}
diff --git a/packages/block-editor/src/components/block-icon/index.js b/packages/block-editor/src/components/block-icon/index.js
index ad3484c9e4a049..023a903d39cb6c 100644
--- a/packages/block-editor/src/components/block-icon/index.js
+++ b/packages/block-editor/src/components/block-icon/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -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,
@@ -28,7 +30,7 @@ function BlockIcon( { icon, showColors = false, className } ) {
 	return (
 		<span
 			style={ style }
-			className={ classnames( 'block-editor-block-icon', className, {
+			className={ clsx( 'block-editor-block-icon', className, {
 				'has-colors': showColors,
 			} ) }
 		>
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..ab317c8c42eaa7 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,9 +70,9 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
-			backgroundColor: 'white',
-			color: 'black',
+		expect( getIconWrapper( container ) ).toHaveStyle( {
+			backgroundColor: 'rgb(255, 255, 255)',
+			color: 'rgb(0, 0, 0)',
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/block-inspector/README.md b/packages/block-editor/src/components/block-inspector/README.md
index 1f9d52482eb210..4c2fd2a06a61bf 100644
--- a/packages/block-editor/src/components/block-inspector/README.md
+++ b/packages/block-editor/src/components/block-inspector/README.md
@@ -4,11 +4,6 @@ The Block inspector is one of the panels that is displayed in the editor; it is
 
 ![Paragraph block inspector](https://make.wordpress.org/core/files/2020/08/paragraph-block-inspector.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index c8ed85f2fd51bc..450a370b5c212a 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -5,18 +5,10 @@ import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
-	hasBlockSupport,
 	store as blocksStore,
 } from '@wordpress/blocks';
-import {
-	FlexItem,
-	PanelBody,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Button,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
+import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,105 +19,23 @@ import MultiSelectionInspector from '../multi-selection-inspector';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
-import BlockIcon from '../block-icon';
 import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
 import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
+import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
+import PositionControls from '../inspector-controls-tabs/position-controls-panel';
+import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
+import BlockQuickNavigation from '../block-quick-navigation';
+import { useBorderPanelLabel } from '../../hooks/border';
 
-function useContentBlocks( blockTypes, block ) {
-	const contentBlocksObjectAux = useMemo( () => {
-		return blockTypes.reduce( ( result, blockType ) => {
-			if (
-				blockType.name !== 'core/list-item' &&
-				Object.entries( blockType.attributes ).some(
-					( [ , { __experimentalRole } ] ) =>
-						__experimentalRole === 'content'
-				)
-			) {
-				result[ blockType.name ] = true;
-			}
-			return result;
-		}, {} );
-	}, [ blockTypes ] );
-	const isContentBlock = useCallback(
-		( blockName ) => {
-			return !! contentBlocksObjectAux[ blockName ];
-		},
-		[ blockTypes ]
-	);
-	return useMemo( () => {
-		return getContentBlocks( [ block ], isContentBlock );
-	}, [ block, isContentBlock ] );
-}
-
-function getContentBlocks( blocks, isContentBlock ) {
-	const result = [];
-	for ( const block of blocks ) {
-		if ( isContentBlock( block.name ) ) {
-			result.push( block );
-		}
-		result.push( ...getContentBlocks( block.innerBlocks, isContentBlock ) );
-	}
-	return result;
-}
-
-function BlockNavigationButton( { blockTypes, block, selectedBlock } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const blockType = blockTypes.find( ( { name } ) => name === block.name );
-	const isSelected =
-		selectedBlock && selectedBlock.clientId === block.clientId;
-	return (
-		<Button
-			isPressed={ isSelected }
-			onClick={ () => selectBlock( block.clientId ) }
-		>
-			<HStack justify="flex-start">
-				<BlockIcon icon={ blockType.icon } />
-				<FlexItem>{ blockType.title }</FlexItem>
-			</HStack>
-		</Button>
-	);
-}
+import { unlock } from '../../lock-unlock';
 
-function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const { blockTypes, block, selectedBlock } = useSelect(
-		( select ) => {
-			return {
-				blockTypes: select( blocksStore ).getBlockTypes(),
-				block: select( blockEditorStore ).getBlock(
-					topLevelLockedBlock
-				),
-				selectedBlock: select( blockEditorStore ).getSelectedBlock(),
-			};
-		},
-		[ topLevelLockedBlock ]
-	);
-	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
-	const contentBlocks = useContentBlocks( blockTypes, block );
+function BlockStylesPanel( { clientId } ) {
 	return (
-		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
-			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
-			<VStack
-				spacing={ 1 }
-				padding={ 4 }
-				className="block-editor-block-inspector__block-buttons-container"
-			>
-				<h2 className="block-editor-block-card__title">
-					{ __( 'Content' ) }
-				</h2>
-				{ contentBlocks.map( ( contentBlock ) => (
-					<BlockNavigationButton
-						selectedBlock={ selectedBlock }
-						key={ contentBlock.clientId }
-						block={ contentBlock }
-						blockTypes={ blockTypes }
-					/>
-				) ) }
-			</VStack>
-		</div>
+		<PanelBody title={ __( 'Styles' ) }>
+			<BlockStyles clientId={ clientId } />
+		</PanelBody>
 	);
 }
 
@@ -135,69 +45,80 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
-		topLevelLockedBlock,
-		parentBlockClientId,
+		isSectionBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
-			__unstableGetContentLockingParent,
-			getTemplateLock,
-			getBlockParents,
-		} = select( blockEditorStore );
-
+			getParentSectionBlock,
+			isSectionBlock: _isSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const _selectedBlockClientId = getSelectedBlockClientId();
+		const renderedBlockClientId =
+			getParentSectionBlock( _selectedBlockClientId ) ||
+			getSelectedBlockClientId();
 		const _selectedBlockName =
-			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
+			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
 			_selectedBlockName && getBlockType( _selectedBlockName );
 
 		return {
 			count: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
+			selectedBlockClientId: renderedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				__unstableGetContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
-					? _selectedBlockClientId
-					: undefined ),
-			parentBlockClientId: getBlockParents(
-				_selectedBlockClientId,
-				true
-			)[ 0 ],
+			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 		};
 	}, [] );
 
-	const showTabs = window?.__experimentalEnableBlockInspectorTabs;
+	const availableTabs = useInspectorControlsTabs( blockType?.name );
+	const showTabs = availableTabs?.length > 1;
+
+	// The block inspector animation settings will be completely
+	// removed in the future to create an API which allows the block
+	// inspector to transition between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
+	const blockInspectorAnimationSettings =
+		useBlockInspectorAnimationSettings( blockType );
 
-	if ( count > 1 ) {
+	const borderPanelLabel = useBorderPanelLabel( {
+		blockName: selectedBlockName,
+	} );
+
+	if ( count > 1 && ! isSectionBlock ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
 				{ showTabs ? (
-					<InspectorControlsTabs />
+					<InspectorControlsTabs tabs={ availableTabs } />
 				) : (
 					<>
 						<InspectorControls.Slot />
 						<InspectorControls.Slot
-							__experimentalGroup="color"
+							group="color"
 							label={ __( 'Color' ) }
 							className="color-block-support-panel__inner-wrapper"
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="typography"
+							group="background"
+							label={ __( 'Background image' ) }
+						/>
+						<InspectorControls.Slot
+							group="typography"
 							label={ __( 'Typography' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="dimensions"
+							group="dimensions"
 							label={ __( 'Dimensions' ) }
 						/>
 						<InspectorControls.Slot
-							__experimentalGroup="border"
-							label={ __( 'Border' ) }
+							group="border"
+							label={ borderPanelLabel }
 						/>
+						<InspectorControls.Slot group="styles" />
 					</>
 				) }
 			</div>
@@ -225,28 +146,73 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
-	if ( topLevelLockedBlock ) {
-		return (
-			<BlockInspectorLockedBlocks
-				topLevelLockedBlock={ topLevelLockedBlock }
+
+	return (
+		<BlockInspectorSingleBlockWrapper
+			animate={ blockInspectorAnimationSettings }
+			wrapper={ ( children ) => (
+				<AnimatedContainer
+					blockInspectorAnimationSettings={
+						blockInspectorAnimationSettings
+					}
+					selectedBlockClientId={ selectedBlockClientId }
+				>
+					{ children }
+				</AnimatedContainer>
+			) }
+		>
+			<BlockInspectorSingleBlock
+				clientId={ selectedBlockClientId }
+				blockName={ blockType.name }
+				isSectionBlock={ isSectionBlock }
 			/>
-		);
-	}
+		</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 (
-		<BlockInspectorSingleBlock
-			clientId={ selectedBlockClientId }
-			blockName={ blockType.name }
-			parentBlockClientId={ parentBlockClientId }
-		/>
+		<motion.div
+			animate={ {
+				x: 0,
+				opacity: 1,
+				transition: {
+					ease: 'easeInOut',
+					duration: 0.14,
+				},
+			} }
+			initial={ {
+				x: animationOrigin,
+				opacity: 0,
+			} }
+			key={ selectedBlockClientId }
+		>
+			{ children }
+		</motion.div>
 	);
 };
 
 const BlockInspectorSingleBlock = ( {
 	clientId,
 	blockName,
-	parentBlockClientId,
+	isSectionBlock,
 } ) => {
-	const showTabs = window?.__experimentalEnableBlockInspectorTabs;
+	const availableTabs = useInspectorControlsTabs( blockName );
+	const showTabs = ! isSectionBlock && availableTabs?.length > 1;
 
 	const hasBlockStyles = useSelect(
 		( select ) => {
@@ -257,17 +223,33 @@ const BlockInspectorSingleBlock = ( {
 		[ blockName ]
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const contentClientIds = useSelect(
+		( select ) => {
+			// Avoid unnecessary subscription.
+			if ( ! isSectionBlock ) {
+				return;
+			}
 
-	const { selectBlock } = useDispatch( blockEditorStore );
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			return getClientIdsOfDescendants( clientId ).filter(
+				( current ) =>
+					getBlockName( current ) !== 'core/list-item' &&
+					getBlockEditingMode( current ) === 'contentOnly'
+			);
+		},
+		[ isSectionBlock, clientId ]
+	);
 
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
 				{ ...blockInformation }
-				parentBlockClientId={ parentBlockClientId }
-				handleBackButton={ () => {
-					selectBlock( parentBlockClientId );
-				} }
+				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
 			{ showTabs && (
@@ -275,47 +257,56 @@ const BlockInspectorSingleBlock = ( {
 					hasBlockStyles={ hasBlockStyles }
 					clientId={ clientId }
 					blockName={ blockName }
+					tabs={ availableTabs }
 				/>
 			) }
 			{ ! showTabs && (
 				<>
 					{ hasBlockStyles && (
-						<div>
-							<PanelBody title={ __( 'Styles' ) }>
-								<BlockStyles clientId={ clientId } />
-								{ hasBlockSupport(
-									blockName,
-									'defaultStylePicker',
-									true
-								) && (
-									<DefaultStylePicker
-										blockName={ blockName }
-									/>
-								) }
-							</PanelBody>
-						</div>
+						<BlockStylesPanel clientId={ clientId } />
+					) }
+
+					{ contentClientIds && contentClientIds?.length > 0 && (
+						<PanelBody title={ __( 'Content' ) }>
+							<BlockQuickNavigation
+								clientIds={ contentClientIds }
+							/>
+						</PanelBody>
+					) }
+
+					{ ! isSectionBlock && (
+						<>
+							<InspectorControls.Slot />
+							<InspectorControls.Slot group="list" />
+							<InspectorControls.Slot
+								group="color"
+								label={ __( 'Color' ) }
+								className="color-block-support-panel__inner-wrapper"
+							/>
+							<InspectorControls.Slot
+								group="background"
+								label={ __( 'Background image' ) }
+							/>
+							<InspectorControls.Slot
+								group="typography"
+								label={ __( 'Typography' ) }
+							/>
+							<InspectorControls.Slot
+								group="dimensions"
+								label={ __( 'Dimensions' ) }
+							/>
+							<InspectorControls.Slot
+								group="border"
+								label={ borderPanelLabel }
+							/>
+							<InspectorControls.Slot group="styles" />
+							<PositionControls />
+							<InspectorControls.Slot group="bindings" />
+							<div>
+								<AdvancedControls />
+							</div>
+						</>
 					) }
-					<InspectorControls.Slot />
-					<InspectorControls.Slot
-						__experimentalGroup="color"
-						label={ __( 'Color' ) }
-						className="color-block-support-panel__inner-wrapper"
-					/>
-					<InspectorControls.Slot
-						__experimentalGroup="typography"
-						label={ __( 'Typography' ) }
-					/>
-					<InspectorControls.Slot
-						__experimentalGroup="dimensions"
-						label={ __( 'Dimensions' ) }
-					/>
-					<InspectorControls.Slot
-						__experimentalGroup="border"
-						label={ __( 'Border' ) }
-					/>
-					<div>
-						<AdvancedControls />
-					</div>
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 08ca013629927e..dd9d8f254ff76b 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -10,20 +10,28 @@
 		margin-bottom: 1.5em;
 	}
 
-	.components-base-control {
-		margin-bottom: #{ $grid-unit-30 };
+	.components-base-control,
+	.components-radio-control {
+		&:where(:not(:last-child)) {
+			margin-bottom: $grid-unit-20;
+		}
+	}
 
-		&:last-child {
-			margin-bottom: $grid-unit-10;
+	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
+	.components-focal-point-picker-control,
+	.components-query-controls,
+	.components-range-control {
+		.components-base-control {
+			margin-bottom: 0;
 		}
 	}
+
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;
-	}
 
-	.block-editor-block-card {
-		padding: $grid-unit-20;
+		// Ensures this PanelBody is treated like the ToolsPanel, removing double borders.
+		margin-top: -$border-width;
 	}
 }
 
@@ -39,12 +47,3 @@
 .block-editor-block-inspector__no-block-tools {
 	border-top: $border-width solid $gray-300;
 }
-
-.block-editor-block-inspector__tab-item {
-	flex: 1 1 0px;
-}
-
-.block-editor-block-inspector__block-buttons-container {
-	border-top: $border-width solid $gray-200;
-	padding: $grid-unit-20;
-}
diff --git a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js
new file mode 100644
index 00000000000000..d89639c4b9ac8c
--- /dev/null
+++ b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useBlockInspectorAnimationSettings( blockType ) {
+	return useSelect(
+		( select ) => {
+			if ( blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.blockInspectorAnimation;
+
+				// Get the name of the block that will allow it's children to be animated.
+				const animationParent =
+					globalBlockInspectorAnimationSettings?.animationParent;
+
+				// Determine whether the animationParent block is a parent of the selected block.
+				const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+					select( blockEditorStore );
+				const _selectedBlockClientId = getSelectedBlockClientId();
+				const animationParentBlockClientId = getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					animationParent,
+					true
+				)[ 0 ];
+
+				// If the selected block is not a child of the animationParent block,
+				// and not an animationParent block itself, don't animate.
+				if (
+					! animationParentBlockClientId &&
+					blockType.name !== animationParent
+				) {
+					return null;
+				}
+
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ blockType ]
+	);
+}
diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/content.scss
similarity index 100%
rename from packages/block-editor/src/components/block-list-appender/style.scss
rename to packages/block-editor/src/components/block-list-appender/content.scss
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..4c65ead6b4e62c 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,68 +16,54 @@ 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 ( hideInserter || CustomAppender === false ) {
-		return null;
+	if ( canInsertDefaultBlock ) {
+		// Render the default block appender if the context supports use
+		// of the default appender.
+		return <DefaultBlockAppender rootClientId={ rootClientId } />;
 	}
 
-	let appender;
-	if ( CustomAppender ) {
-		// Prefer custom render prop if provided.
-		appender = <CustomAppender />;
-	} else {
-		const isParentSelected =
-			selectedBlockClientId === rootClientId ||
-			( ! rootClientId && ! selectedBlockClientId );
-
-		if ( ! isParentSelected ) {
-			return null;
-		}
+	// Fallback in case the default block can't be inserted.
+	return (
+		<ButtonBlockAppender
+			rootClientId={ rootClientId }
+			className="block-list-appender__toggle"
+		/>
+	);
+}
 
-		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"
-				/>
+export default function BlockListAppender( {
+	rootClientId,
+	CustomAppender,
+	className,
+	tagName: TagName = 'div',
+} ) {
+	const isDragOver = useSelect(
+		( select ) => {
+			const {
+				getBlockInsertionPoint,
+				isBlockInsertionPointVisible,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const insertionPoint = getBlockInsertionPoint();
+			// Ideally we should also check for `isDragging` but currently it
+			// requires a lot more setup. We can revisit this once we refactor
+			// the DnD utility hooks.
+			return (
+				isBlockInsertionPointVisible() &&
+				rootClientId === insertionPoint?.rootClientId &&
+				getBlockCount( rootClientId ) === 0
 			);
-		}
-	}
+		},
+		[ rootClientId ]
+	);
 
 	return (
 		<TagName
@@ -90,10 +76,9 @@ function BlockListAppender( {
 			//
 			// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 			tabIndex={ -1 }
-			className={ classnames(
-				'block-list-appender wp-block',
-				className
-			) }
+			className={ clsx( 'block-list-appender wp-block', className, {
+				'is-drag-over': isDragOver,
+			} ) }
 			// Needed in case the whole editor is content editable (for multi
 			// selection). It fixes an edge case where ArrowDown and ArrowRight
 			// should collapse the selection to the end of that selection and
@@ -108,9 +93,11 @@ function BlockListAppender( {
 			// have commonly targeted that attribute for margins.
 			data-block
 		>
-			{ appender }
+			{ CustomAppender ? (
+				<CustomAppender />
+			) : (
+				<DefaultAppender rootClientId={ rootClientId } />
+			) }
 		</TagName>
 	);
 }
-
-export default BlockListAppender;
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 );
diff --git a/packages/block-editor/src/components/block-list/block-crash-boundary.native.js b/packages/block-editor/src/components/block-list/block-crash-boundary.native.js
new file mode 100644
index 00000000000000..d50d26878d04a7
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-crash-boundary.native.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { logException } from '@wordpress/react-native-bridge';
+
+class BlockCrashBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	componentDidCatch( error ) {
+		const { blockName } = this.props;
+
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+				block_name: blockName,
+			},
+			isHandled: true,
+			handledBy: 'Block-level Error Boundary',
+		} );
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		return this.props.fallback;
+	}
+}
+
+export default BlockCrashBoundary;
diff --git a/packages/block-editor/src/components/block-list/block-crash-warning.native.js b/packages/block-editor/src/components/block-list/block-crash-warning.native.js
new file mode 100644
index 00000000000000..4736938b9d74f2
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-crash-warning.native.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+
+const warning = (
+	<Warning
+		message={ __(
+			'This block has encountered an error and cannot be previewed.'
+		) }
+	/>
+);
+
+export default () => warning;
diff --git a/packages/block-editor/src/components/block-list/block-html.js b/packages/block-editor/src/components/block-list/block-html.js
index ef38df983740a0..5d9e7bfeb7bf77 100644
--- a/packages/block-editor/src/components/block-list/block-html.js
+++ b/packages/block-editor/src/components/block-list/block-html.js
@@ -59,7 +59,7 @@ function BlockHTML( { clientId } ) {
 
 		// Ensure the state is updated if we reset so it displays the default content.
 		if ( ! html ) {
-			setHtml( { content } );
+			setHtml( content );
 		}
 	};
 
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.js b/packages/block-editor/src/components/block-list/block-invalid-warning.js
index c638da242c375f..a35ecaf6bae8eb 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.js
@@ -4,9 +4,8 @@
 import { __, _x } from '@wordpress/i18n';
 import { Button, Modal } from '@wordpress/components';
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { getBlockType, createBlock, rawHandler } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { createBlock, rawHandler } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,38 +14,86 @@ import Warning from '../warning';
 import BlockCompare from '../block-compare';
 import { store as blockEditorStore } from '../../store';
 
-export function BlockInvalidWarning( {
-	convertToHTML,
-	convertToBlocks,
-	convertToClassic,
-	attemptBlockRecovery,
-	block,
-} ) {
-	const hasHTMLBlock = !! getBlockType( 'core/html' );
-	const [ compare, setCompare ] = useState( false );
+const blockToBlocks = ( block ) =>
+	rawHandler( {
+		HTML: block.originalContent,
+	} );
+
+export default function BlockInvalidWarning( { clientId } ) {
+	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+		( select ) => {
+			const { canInsertBlockType, getBlock, getBlockRootClientId } =
+				select( blockEditorStore );
 
-	const onCompare = useCallback( () => setCompare( true ), [] );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				block: getBlock( clientId ),
+				canInsertHTMLBlock: canInsertBlockType(
+					'core/html',
+					rootClientId
+				),
+				canInsertClassicBlock: canInsertBlockType(
+					'core/freeform',
+					rootClientId
+				),
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const [ compare, setCompare ] = useState( false );
 	const onCompareClose = useCallback( () => setCompare( false ), [] );
 
-	// We memo the array here to prevent the children components from being updated unexpectedly.
-	const hiddenActions = useMemo(
+	const convert = useMemo(
+		() => ( {
+			toClassic() {
+				const classicBlock = createBlock( 'core/freeform', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, classicBlock );
+			},
+			toHTML() {
+				const htmlBlock = createBlock( 'core/html', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, htmlBlock );
+			},
+			toBlocks() {
+				const newBlocks = blockToBlocks( block );
+				return replaceBlock( block.clientId, newBlocks );
+			},
+			toRecoveredBlock() {
+				const recoveredBlock = createBlock(
+					block.name,
+					block.attributes,
+					block.innerBlocks
+				);
+				return replaceBlock( block.clientId, recoveredBlock );
+			},
+		} ),
+		[ block, replaceBlock ]
+	);
+
+	const secondaryActions = useMemo(
 		() =>
 			[
 				{
 					// translators: Button to fix block content
 					title: _x( 'Resolve', 'imperative verb' ),
-					onClick: onCompare,
+					onClick: () => setCompare( true ),
 				},
-				hasHTMLBlock && {
+				canInsertHTMLBlock && {
 					title: __( 'Convert to HTML' ),
-					onClick: convertToHTML,
+					onClick: convert.toHTML,
 				},
-				{
+				canInsertClassicBlock && {
 					title: __( 'Convert to Classic Block' ),
-					onClick: convertToClassic,
+					onClick: convert.toClassic,
 				},
 			].filter( Boolean ),
-		[ onCompare, convertToHTML, convertToClassic ]
+		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
 	);
 
 	return (
@@ -54,16 +101,17 @@ export function BlockInvalidWarning( {
 			<Warning
 				actions={ [
 					<Button
+						__next40pxDefaultSize
 						key="recover"
-						onClick={ attemptBlockRecovery }
+						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
-						{ __( 'Attempt Block Recovery' ) }
+						{ __( 'Attempt recovery' ) }
 					</Button>,
 				] }
-				secondaryActions={ hiddenActions }
+				secondaryActions={ secondaryActions }
 			>
-				{ __( 'This block contains unexpected or invalid content.' ) }
+				{ __( 'Block contains unexpected or invalid content.' ) }
 			</Warning>
 			{ compare && (
 				<Modal
@@ -76,8 +124,8 @@ export function BlockInvalidWarning( {
 				>
 					<BlockCompare
 						block={ block }
-						onKeep={ convertToHTML }
-						onConvert={ convertToBlocks }
+						onKeep={ convert.toHTML }
+						onConvert={ convert.toBlocks }
 						convertor={ blockToBlocks }
 						convertButtonText={ __( 'Convert to Blocks' ) }
 					/>
@@ -86,42 +134,3 @@ export function BlockInvalidWarning( {
 		</>
 	);
 }
-
-const blockToClassic = ( block ) =>
-	createBlock( 'core/freeform', {
-		content: block.originalContent,
-	} );
-const blockToHTML = ( block ) =>
-	createBlock( 'core/html', {
-		content: block.originalContent,
-	} );
-const blockToBlocks = ( block ) =>
-	rawHandler( {
-		HTML: block.originalContent,
-	} );
-const recoverBlock = ( { name, attributes, innerBlocks } ) =>
-	createBlock( name, attributes, innerBlocks );
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => ( {
-		block: select( blockEditorStore ).getBlock( clientId ),
-	} ) ),
-	withDispatch( ( dispatch, { block } ) => {
-		const { replaceBlock } = dispatch( blockEditorStore );
-
-		return {
-			convertToClassic() {
-				replaceBlock( block.clientId, blockToClassic( block ) );
-			},
-			convertToHTML() {
-				replaceBlock( block.clientId, blockToHTML( block ) );
-			},
-			convertToBlocks() {
-				replaceBlock( block.clientId, blockToBlocks( block ) );
-			},
-			attemptBlockRecovery() {
-				replaceBlock( block.clientId, recoverBlock( block ) );
-			},
-		};
-	} ),
-] )( BlockInvalidWarning );
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
index 83f4513ba643eb..8734f6f8804f03 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,22 +16,30 @@ import { createBlock } from '@wordpress/blocks';
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
+
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
 
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
@@ -45,8 +53,8 @@ export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ attemptBlockRecovery }
-			accessible={ true }
-			accessibilityRole={ 'button' }
+			accessible
+			accessibilityRole="button"
 		>
 			<Warning
 				title={ blockTitle }
diff --git a/packages/block-editor/src/components/block-list/block-list-compact.native.js b/packages/block-editor/src/components/block-list/block-list-compact.native.js
deleted file mode 100644
index ad9d0c7301eed3..00000000000000
--- a/packages/block-editor/src/components/block-list/block-list-compact.native.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import BlockListBlock from './block';
-
-/**
- * NOTE: This is a component currently used by the List block (V2)
- * It only passes the needed props for this block, if other blocks will use it
- * make sure you pass other props that might be required coming from:
- * components/inner-blocks/index.native.js
- */
-
-function BlockListCompact( props ) {
-	const {
-		marginHorizontal = styles.defaultBlock.marginLeft,
-		marginVertical = styles.defaultBlock.marginTop,
-		rootClientId,
-	} = props;
-	const { blockClientIds } = useSelect(
-		( select ) => {
-			const { getBlockOrder } = select( blockEditorStore );
-			const blockOrder = getBlockOrder( rootClientId );
-
-			return {
-				blockClientIds: blockOrder,
-			};
-		},
-		[ rootClientId ]
-	);
-
-	const containerStyle = {
-		marginVertical: -marginVertical,
-		marginHorizontal: -marginHorizontal,
-	};
-
-	return (
-		<View style={ containerStyle } testID="block-list-wrapper">
-			{ blockClientIds.map( ( currentClientId ) => (
-				<BlockListBlock
-					clientId={ currentClientId }
-					rootClientId={ rootClientId }
-					key={ currentClientId }
-					marginHorizontal={ marginHorizontal }
-					marginVertical={ marginVertical }
-				/>
-			) ) }
-		</View>
-	);
-}
-
-export default BlockListCompact;
diff --git a/packages/block-editor/src/components/block-list/block-list-context.native.js b/packages/block-editor/src/components/block-list/block-list-context.native.js
index be028a25c9e419..b332a2d4ad5d85 100644
--- a/packages/block-editor/src/components/block-list/block-list-context.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-context.native.js
@@ -1,12 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { orderBy } from 'lodash';
+import { createContext, useContext } from '@wordpress/element';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { createContext, useContext } from '@wordpress/element';
+import { orderBy } from '../../utils/sorting';
 
 export const DEFAULT_BLOCK_LIST_CONTEXT = {
 	scrollRef: null,
@@ -103,10 +103,7 @@ export function deleteBlockLayoutByClientId( data, clientId ) {
  */
 function getBlockLayoutsOrderedByYCoord( data ) {
 	// Only enabled for root level blocks.
-	// Using lodash orderBy due to hermes not having
-	// stable support for native .sort(). It will be
-	// supported in the React Native version 0.68.0.
-	return orderBy( data, [ 'y', 'asc' ] );
+	return orderBy( Object.values( data ), 'y' );
 }
 
 /**
diff --git a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
index e32d793af46d67..e15a3e1063cad2 100644
--- a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
@@ -7,14 +7,23 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
-function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
+function BlockListItemCell( { children, item: clientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+	const { rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return { rootClientId: getBlockRootClientId( clientId ) };
+		},
+		[ clientId ]
+	);
 
 	useEffect( () => {
 		return () => {
@@ -43,7 +52,11 @@ function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
 		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
 	);
 
-	return <View onLayout={ onCellLayout }>{ children }</View>;
+	return (
+		<View testID="block-list-item-cell" onLayout={ onCellLayout }>
+			{ children }
+		</View>
+	);
 }
 
 export default BlockListItemCell;
diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js
index 394defd84c9e38..769e634b6741c2 100644
--- a/packages/block-editor/src/components/block-list/block-list-item.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item.native.js
@@ -1,237 +1,209 @@
 /**
  * External dependencies
  */
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockListBlock from './block';
-import BlockInsertionPoint from './insertion-point';
+import Block from './block';
 import Grid from './grid-item';
-
-import styles from './block-list-item.native.scss';
+import BlockInsertionPoint from './insertion-point';
 import { store as blockEditorStore } from '../../store';
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 
-const stretchStyle = {
-	flex: 1,
-};
-
-export class BlockListItem extends Component {
-	getMarginHorizontal() {
-		const {
-			blockAlignment,
-			marginHorizontal,
-			parentBlockAlignment,
-			hasParents,
-			blockName,
-			parentBlockName,
-			parentWidth,
-			blockWidth,
-		} = this.props;
-		const { isFullWidth, isWideWidth, isWider, isContainerRelated } =
-			alignmentHelpers;
-
-		if ( isFullWidth( blockAlignment ) ) {
-			if ( ! hasParents ) {
-				return 0;
-			}
-			return marginHorizontal;
-		}
-		if ( isWideWidth( blockAlignment ) ) {
-			return marginHorizontal;
-		}
-
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-
-		if (
-			isFullWidth( parentBlockAlignment ) &&
-			! isWider( blockWidth, 'medium' )
-		) {
-			if (
-				isContainerRelated( blockName ) ||
-				isWider( screenWidth, 'mobile' )
-			) {
-				return marginHorizontal;
-			}
-			return marginHorizontal * 2;
-		}
-
-		if (
-			isContainerRelated( parentBlockName ) &&
-			! isContainerRelated( blockName )
-		) {
-			const isScreenWidthEqual = parentWidth === screenWidth;
-			if ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {
-				return marginHorizontal;
-			}
-		}
-
-		return marginHorizontal;
-	}
-
-	getContentStyles( readableContentViewStyle ) {
-		const { blockAlignment, blockName, hasParents, parentBlockName } =
-			this.props;
-		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-
-		return [
-			readableContentViewStyle,
-			isFullWidth( blockAlignment ) &&
-				! hasParents && {
-					width: styles.fullAlignment.width,
-				},
-			! blockAlignment &&
-				hasParents &&
-				! isContainerRelated( parentBlockName ) &&
-				isContainerRelated( blockName ) && {
-					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
-				},
-		];
-	}
-
-	renderContent() {
-		const {
-			blockAlignment,
-			clientId,
-			isReadOnly,
-			shouldShowInsertionPointBefore,
-			shouldShowInsertionPointAfter,
-			contentResizeMode,
-			shouldShowInnerBlockAppender,
-			parentWidth,
-			marginHorizontal,
-			blockName,
-			blockWidth,
-			...restProps
-		} = this.props;
-
-		const readableContentViewStyle =
-			contentResizeMode === 'stretch' && stretchStyle;
-		const { isContainerRelated } = alignmentHelpers;
-
-		return (
-			<ReadableContentView
-				align={ blockAlignment }
-				style={ [
-					readableContentViewStyle,
-					isContainerRelated( blockName ) &&
-						parentWidth && {
-							maxWidth: parentWidth + 2 * marginHorizontal,
-						},
-				] }
-			>
-				<View
-					style={ this.getContentStyles( readableContentViewStyle ) }
-					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
-				>
-					{ shouldShowInsertionPointBefore && (
-						<BlockInsertionPoint />
-					) }
-					<BlockListBlock
-						key={ clientId }
-						showTitle={ false }
-						clientId={ clientId }
-						parentWidth={ parentWidth }
-						{ ...restProps }
-						marginHorizontal={ this.getMarginHorizontal() }
-						blockWidth={ blockWidth }
-					/>
-					{ ! shouldShowInnerBlockAppender() &&
-						shouldShowInsertionPointAfter && (
-							<BlockInsertionPoint />
-						) }
-				</View>
-			</ReadableContentView>
-		);
-	}
-
-	render() {
-		const { parentWidth, blockWidth, isGridItem } = this.props;
-
-		if ( ! blockWidth ) {
-			return null;
-		}
-
-		if ( isGridItem ) {
-			const { numOfColumns, tileCount, tileIndex } = this.props;
-			return (
-				<Grid
-					maxWidth={ parentWidth }
-					numOfColumns={ numOfColumns }
-					tileCount={ tileCount }
-					index={ tileIndex }
-				>
-					{ this.renderContent() }
-				</Grid>
-			);
-		}
-		return this.renderContent();
-	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { rootClientId, isStackedHorizontally, clientId } ) => {
+/**
+ * BlockListItemContent component. Renders a block with an optional insertion point.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {Component} The rendered block list item content.
+ */
+function BlockListItemContent( {
+	blockWidth,
+	clientId,
+	contentResizeMode,
+	contentStyle,
+	index,
+	isStackedHorizontally,
+	marginHorizontal,
+	marginVertical,
+	onAddBlock,
+	onDeleteBlock,
+	parentWidth,
+	rootClientId,
+	shouldShowInnerBlockAppender,
+} ) {
+	const {
+		blockAlignment,
+		blockName,
+		hasParents,
+		parentBlockAlignment,
+		parentBlockName,
+		shouldShowInsertionPointAfter,
+		shouldShowInsertionPointBefore,
+	} = useSelect(
+		( select ) => {
 			const {
-				getBlockOrder,
+				getBlockAttributes,
 				getBlockInsertionPoint,
+				getBlockName,
+				getBlockOrder,
 				isBlockInsertionPointVisible,
-				getSettings,
-				getBlockParents,
-				getBlock,
 			} = select( blockEditorStore );
-
 			const blockClientIds = getBlockOrder( rootClientId );
 			const insertionPoint = getBlockInsertionPoint();
-			const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-			const shouldShowInsertionPointBefore =
-				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If list is empty, show the insertion point (via the default appender)
-				( blockClientIds.length === 0 ||
-					// Or if the insertion point is right before the denoted block.
-					blockClientIds[ insertionPoint.index ] === clientId );
-
-			const shouldShowInsertionPointAfter =
+
+			const insertionPointVisibleInCurrentRoot =
 				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If the insertion point is at the end of the list.
-				blockClientIds.length === insertionPoint.index &&
-				// And the denoted block is the last one on the list, show the indicator at the end of the block.
+				isBlockInsertionPointVisible() &&
+				insertionPoint.rootClientId === rootClientId;
+
+			const isListEmpty = blockClientIds.length === 0;
+			const isInsertionPointBeforeBlock =
+				blockClientIds[ insertionPoint.index ] === clientId;
+			const isInsertionPointAtEnd =
+				blockClientIds.length === insertionPoint.index;
+			const isBlockLastInList =
 				blockClientIds[ insertionPoint.index - 1 ] === clientId;
 
-			const isReadOnly = getSettings().readOnly;
+			const showInsertionPointBefore =
+				insertionPointVisibleInCurrentRoot &&
+				( isListEmpty || isInsertionPointBeforeBlock );
+
+			const showInsertionPointAfter =
+				insertionPointVisibleInCurrentRoot &&
+				isInsertionPointAtEnd &&
+				isBlockLastInList;
 
-			const { attributes, name } = getBlock( clientId ) || {};
-			const { align } = attributes || {};
-			const parents = getBlockParents( clientId, true );
-			const hasParents = !! parents.length;
-			const parentBlock = hasParents ? getBlock( parents[ 0 ] ) : {};
-			const { align: parentBlockAlignment } =
-				parentBlock?.attributes || {};
-			const { name: parentBlockName } = parentBlock || {};
+			const blockHasParents = !! rootClientId;
+			const name = getBlockName( clientId );
+			const parentName = getBlockName( rootClientId );
+			const { align } = getBlockAttributes( clientId ) || {};
+			const { textAlign: parentBlockAlign } =
+				getBlockAttributes( rootClientId ) || {};
 
 			return {
-				shouldShowInsertionPointBefore,
-				shouldShowInsertionPointAfter,
-				isReadOnly,
-				hasParents,
 				blockAlignment: align,
-				parentBlockAlignment,
 				blockName: name,
-				parentBlockName,
+				hasParents: blockHasParents,
+				parentBlockAlignment: parentBlockAlign,
+				parentBlockName: parentName,
+				shouldShowInsertionPointAfter: showInsertionPointAfter,
+				shouldShowInsertionPointBefore: showInsertionPointBefore,
 			};
-		}
-	),
-] )( BlockListItem );
+		},
+		[ isStackedHorizontally, rootClientId, clientId ]
+	);
+
+	const [ wrapperStyles, margin ] = useEditorWrapperStyles( {
+		align: blockAlignment,
+		blockName,
+		blockWidth,
+		contentResizeMode,
+		hasParents,
+		marginHorizontal,
+		parentBlockAlignment,
+		parentBlockName,
+		parentWidth,
+	} );
+
+	const shouldShowBlockInsertionPointAfter =
+		! shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
+
+	return (
+		<View style={ wrapperStyles }>
+			{ shouldShowInsertionPointBefore && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-before-row-${ index + 1 }` }
+				/>
+			) }
+			<Block
+				blockWidth={ blockWidth }
+				clientId={ clientId }
+				contentStyle={ contentStyle }
+				isStackedHorizontally={ isStackedHorizontally }
+				marginHorizontal={ margin }
+				marginVertical={ marginVertical }
+				onAddBlock={ onAddBlock }
+				parentBlockAlignment={ parentBlockAlignment }
+				onDeleteBlock={ onDeleteBlock }
+				parentWidth={ parentWidth }
+				rootClientId={ rootClientId }
+			/>
+			{ shouldShowBlockInsertionPointAfter && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-after-row-${ index + 1 }` }
+				/>
+			) }
+		</View>
+	);
+}
+
+/**
+ * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
+ * @param {number}   props.numOfColumns                 The number of columns for grid layout.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {number}   props.tileCount                    The total number of tiles in the grid.
+ * @param {number}   props.tileIndex                    The index of the current tile in the grid.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {Component|null} The rendered block list item or null if the block width is not provided.
+ */
+function BlockListItem( props ) {
+	const { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =
+		props;
+
+	if ( ! props?.blockWidth ) {
+		return null;
+	}
+
+	if ( isGridItem ) {
+		return (
+			<Grid
+				maxWidth={ props?.parentWidth }
+				numOfColumns={ numOfColumns }
+				tileCount={ tileCount }
+				index={ tileIndex }
+			>
+				<BlockListItemContent { ...restProps } />
+			</Grid>
+		);
+	}
+
+	return <BlockListItemContent { ...restProps } />;
+}
+
+export default BlockListItem;
diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js
new file mode 100644
index 00000000000000..92146816eb1529
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-outline.native.js
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
+const DESIGN_BLOCKS_WITHOUT_OUTLINE = [ 'core/button', 'core/spacer' ];
+const MEDIA_BLOCKS_WITH_OUTLINE = [ 'core/audio', 'core/file' ];
+
+function BlockOutline( { blockCategory, hasInnerBlocks, isSelected, name } ) {
+	const textBlockWithOutline = TEXT_BLOCKS_WITH_OUTLINE.includes( name );
+
+	const hasBlockTextCategory =
+		blockCategory === 'text' && ! textBlockWithOutline;
+	const hasBlockMediaCategory =
+		blockCategory === 'media' ||
+		blockCategory === 'embed' ||
+		! blockCategory;
+	const shouldShowCompactOutline =
+		( hasBlockMediaCategory && ! hasInnerBlocks ) || textBlockWithOutline;
+
+	const styleSolidBorder = [
+		styles.solidBorder,
+		usePreferredColorSchemeStyle(
+			styles.solidBorderColor,
+			styles.solidBorderColorDark
+		),
+		shouldShowCompactOutline && styles.solidBorderCompact,
+		hasBlockTextCategory && styles.solidBorderTextContent,
+	];
+
+	if ( ! isSelected ) {
+		return null;
+	}
+
+	let shouldShowOutline = true;
+	if ( hasBlockTextCategory && ! hasInnerBlocks ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'media' &&
+		! hasInnerBlocks &&
+		! MEDIA_BLOCKS_WITH_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	} else if ( blockCategory === 'media' && name === 'core/cover' ) {
+		shouldShowOutline = false;
+	} else if (
+		blockCategory === 'design' &&
+		DESIGN_BLOCKS_WITHOUT_OUTLINE.includes( name )
+	) {
+		shouldShowOutline = false;
+	}
+
+	if ( shouldShowOutline ) {
+		return (
+			<View
+				pointerEvents="box-none"
+				style={ styleSolidBorder }
+				testID="block-outline"
+			/>
+		);
+	}
+
+	return null;
+}
+
+export default BlockOutline;
diff --git a/packages/block-editor/src/components/block-list/block-selection-button.native.js b/packages/block-editor/src/components/block-list/block-selection-button.native.js
index 5bcf61cf54cb39..264c09a2612e6b 100644
--- a/packages/block-editor/src/components/block-list/block-selection-button.native.js
+++ b/packages/block-editor/src/components/block-list/block-selection-button.native.js
@@ -40,9 +40,7 @@ const BlockSelectionButton = ( {
 				onPress={ () => {
 					/* Open BottomSheet with markup. */
 				} }
-				disabled={
-					true
-				} /* Disable temporarily since onPress function is empty. */
+				disabled /* Disable temporarily since onPress function is empty. */
 			>
 				{ rootClientId &&
 					rootBlockIcon && [
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 9e4c9755ec2255..29f8a97b031ce2 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -1,33 +1,29 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useMemo,
-	useCallback,
-	RawHTML,
-} from '@wordpress/element';
+import { memo, RawHTML, useContext, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
 	isUnmodifiedDefaultBlock,
 	serializeRawBlock,
 	switchToBlockType,
+	getDefaultBlockName,
+	isUnmodifiedBlock,
+	isReusableBlock,
+	getBlockDefaultClassName,
+	hasBlockSupport,
+	createBlock,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import {
-	withDispatch,
-	withSelect,
-	useDispatch,
-	useSelect,
-} from '@wordpress/data';
-import { compose, pure, ifCondition } from '@wordpress/compose';
+import { withDispatch, useSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -40,8 +36,10 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
+import { useLayout } from './layout';
+import { PrivateBlockContext } from './private-block-context';
 
-export const BlockListBlockContext = createContext();
+import { unlock } from '../../lock-unlock';
 
 /**
  * Merges wrapper props with special handling for classNames and styles.
@@ -57,10 +55,18 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA?.className && propsB?.className ) {
-		newProps.className = classnames( propsA.className, propsB.className );
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
+		newProps.className = clsx( propsA.className, propsB.className );
 	}
-	if ( propsA?.style && propsB?.style ) {
+
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 
@@ -91,44 +97,19 @@ function BlockListBlock( {
 	wrapperProps,
 	setAttributes,
 	onReplace,
+	onRemove,
 	onInsertBlocksAfter,
 	onMerge,
 	toggleSelection,
 } ) {
 	const {
+		mayDisplayControls,
+		mayDisplayParentControls,
 		themeSupportsLayout,
-		hasContentLockedParent,
-		isContentBlock,
-		isContentLocking,
-		isTemporarilyEditingAsBlocks,
-	} = useSelect(
-		( select ) => {
-			const {
-				getSettings,
-				__unstableGetContentLockingParent,
-				getTemplateLock,
-				__unstableGetTemporarilyEditingAsBlocks,
-			} = select( blockEditorStore );
-			const _hasContentLockedParent =
-				!! __unstableGetContentLockingParent( clientId );
-			return {
-				themeSupportsLayout: getSettings().supportsLayout,
-				isContentBlock:
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					),
-				hasContentLockedParent: _hasContentLockedParent,
-				isContentLocking:
-					getTemplateLock( clientId ) === 'contentOnly' &&
-					! _hasContentLockedParent,
-				isTemporarilyEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ name, clientId ]
-	);
-	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
+		...context
+	} = useContext( PrivateBlockContext );
+
+	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
@@ -148,17 +129,18 @@ function BlockListBlock( {
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
 			__unstableLayoutClassNames={ layoutClassNames }
+			__unstableParentLayout={
+				Object.keys( parentLayout ).length ? parentLayout : undefined
+			}
+			mayDisplayControls={ mayDisplayControls }
+			mayDisplayParentControls={ mayDisplayParentControls }
+			blockEditingMode={ context.blockEditingMode }
+			isPreviewMode={ context.isPreviewMode }
 		/>
 	);
 
 	const blockType = getBlockType( name );
 
-	if ( hasContentLockedParent && ! isContentBlock ) {
-		wrapperProps = {
-			...wrapperProps,
-			tabIndex: -1,
-		};
-	}
 	// Determine whether the block has props to apply to the wrapper.
 	if ( blockType?.getEditWrapperProps ) {
 		wrapperProps = mergeWrapperProps(
@@ -172,6 +154,10 @@ function BlockListBlock( {
 		!! wrapperProps[ 'data-align' ] &&
 		! themeSupportsLayout;
 
+	// Support for sticky position in classic themes with alignment wrappers.
+
+	const isSticky = className?.includes( 'is-position-sticky' );
+
 	// For aligned blocks, provide a wrapper element so the block can be
 	// positioned relative to the block column.
 	// This is only kept for classic themes that don't support layout
@@ -183,7 +169,7 @@ function BlockListBlock( {
 	if ( isAligned ) {
 		blockEdit = (
 			<div
-				className="wp-block"
+				className={ clsx( 'wp-block', isSticky && className ) }
 				data-align={ wrapperProps[ 'data-align' ] }
 			>
 				{ blockEdit }
@@ -218,31 +204,35 @@ function BlockListBlock( {
 	} else if ( blockType?.apiVersion > 1 ) {
 		block = blockEdit;
 	} else {
-		block = <Block { ...wrapperProps }>{ blockEdit }</Block>;
+		block = <Block>{ blockEdit }</Block>;
 	}
 
 	const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
-
-	const value = {
-		clientId,
-		className: classnames(
-			{
-				'is-content-locked': isContentLocking,
-				'is-content-locked-temporarily-editing-as-blocks':
-					isTemporarilyEditingAsBlocks,
-				'is-content-block': hasContentLockedParent && isContentBlock,
-			},
+	const updatedWrapperProps = {
+		...restWrapperProps,
+		className: clsx(
+			restWrapperProps.className,
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-			className
+			! ( dataAlign && isSticky ) && className
 		),
-		wrapperProps: restWrapperProps,
-		isAligned,
 	};
 
-	const memoizedValue = useMemo( () => value, Object.values( value ) );
-
+	// We set a new context with the adjusted and filtered wrapperProps (through
+	// `editor.BlockListBlock`), which the `BlockListBlockProvider` did not have
+	// access to.
+	// Note that the context value doesn't have to be memoized in this case
+	// because when it changes, this component will be re-rendered anyway, and
+	// none of the consumers (BlockListBlock and useBlockProps) are memoized or
+	// "pure". This is different from the public BlockEditContext, where
+	// consumers might be memoized or "pure".
 	return (
-		<BlockListBlockContext.Provider value={ memoizedValue }>
+		<PrivateBlockContext.Provider
+			value={ {
+				wrapperProps: updatedWrapperProps,
+				isAligned,
+				...context,
+			} }
+		>
 			<BlockCrashBoundary
 				fallback={
 					<Block className="has-warning">
@@ -252,52 +242,10 @@ function BlockListBlock( {
 			>
 				{ block }
 			</BlockCrashBoundary>
-		</BlockListBlockContext.Provider>
+		</PrivateBlockContext.Provider>
 	);
 }
 
-const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
-	const {
-		isBlockSelected,
-		getBlockMode,
-		isSelectionEnabled,
-		getTemplateLock,
-		__unstableGetBlockWithoutInnerBlocks,
-		canRemoveBlock,
-		canMoveBlock,
-	} = select( blockEditorStore );
-	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
-	const isSelected = isBlockSelected( clientId );
-	const templateLock = getTemplateLock( rootClientId );
-	const canRemove = canRemoveBlock( clientId, rootClientId );
-	const canMove = canMoveBlock( clientId, rootClientId );
-
-	// The fallback to `{}` is a temporary fix.
-	// This function should never be called when a block is not present in
-	// the state. It happens now because the order in withSelect rendering
-	// is not correct.
-	const { name, attributes, isValid } = block || {};
-
-	// Do not add new properties here, use `useSelect` instead to avoid
-	// leaking new props to the public API (editor.BlockListBlock filter).
-	return {
-		mode: getBlockMode( clientId ),
-		isSelectionEnabled: isSelectionEnabled(),
-		isLocked: !! templateLock,
-		canRemove,
-		canMove,
-		// Users of the editor.BlockListBlock filter used to be able to
-		// access the block prop.
-		// Ideally these blocks would rely on the clientId prop only.
-		// This is kept for backward compatibility reasons.
-		block,
-		name,
-		attributes,
-		isValid,
-		isSelected,
-	};
-} );
-
 const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	const {
 		updateBlockAttributes,
@@ -345,8 +293,119 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				getBlockAttributes,
 				getBlockName,
 				getBlockOrder,
+				getBlockIndex,
+				getBlockRootClientId,
+				canInsertBlockType,
 			} = registry.select( blockEditorStore );
 
+			function switchToDefaultOrRemove() {
+				const block = getBlock( clientId );
+				const defaultBlockName = getDefaultBlockName();
+				const defaultBlockType = getBlockType( defaultBlockName );
+				if ( getBlockName( clientId ) !== defaultBlockName ) {
+					const replacement = switchToBlockType(
+						block,
+						defaultBlockName
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
+				} else if ( isUnmodifiedDefaultBlock( block ) ) {
+					const nextBlockClientId = getNextBlockClientId( clientId );
+					if ( nextBlockClientId ) {
+						registry.batch( () => {
+							removeBlock( clientId );
+							selectBlock( nextBlockClientId );
+						} );
+					}
+				} else if ( defaultBlockType.merge ) {
+					const attributes = defaultBlockType.merge(
+						{},
+						block.attributes
+					);
+					replaceBlocks(
+						[ clientId ],
+						[ createBlock( defaultBlockName, attributes ) ]
+					);
+				}
+			}
+
+			/**
+			 * Moves the block with clientId up one level. If the block type
+			 * cannot be inserted at the new location, it will be attempted to
+			 * convert to the default block type.
+			 *
+			 * @param {string}  _clientId       The block to move.
+			 * @param {boolean} changeSelection Whether to change the selection
+			 *                                  to the moved block.
+			 */
+			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const wrapperBlockName = getBlockName( _clientId );
+				const wrapperBlockType = getBlockType( wrapperBlockName );
+				const isTextualWrapper = wrapperBlockType.category === 'text';
+				const targetRootClientId = getBlockRootClientId( _clientId );
+				const blockOrder = getBlockOrder( _clientId );
+				const [ firstClientId ] = blockOrder;
+
+				if (
+					blockOrder.length === 1 &&
+					isUnmodifiedBlock( getBlock( firstClientId ) )
+				) {
+					removeBlock( _clientId );
+				} else if ( isTextualWrapper ) {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if (
+								replacement &&
+								replacement.length &&
+								replacement.every( ( block ) =>
+									canInsertBlockType(
+										block.name,
+										targetRootClientId
+									)
+								)
+							) {
+								insertBlocks(
+									replacement,
+									getBlockIndex( _clientId ),
+									targetRootClientId,
+									changeSelection
+								);
+								removeBlock( firstClientId, false );
+							} else {
+								switchToDefaultOrRemove();
+							}
+						}
+
+						if (
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
+				} else {
+					switchToDefaultOrRemove();
+				}
+			}
+
 			// For `Delete` or forward merge, we should do the exact same thing
 			// as `Backspace`, but from the other block.
 			if ( forward ) {
@@ -397,15 +456,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					return;
 				}
 
-				// Check if it's possibile to "unwrap" the following block
-				// before trying to merge.
-				const replacement = switchToBlockType(
-					getBlock( nextBlockClientId ),
-					'*'
-				);
-
-				if ( replacement && replacement.length ) {
-					replaceBlocks( nextBlockClientId, replacement );
+				if ( getBlockOrder( nextBlockClientId ).length ) {
+					moveFirstItemUp( nextBlockClientId, false );
 				} else {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
@@ -450,18 +502,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 						}
 					}
 
-					// Attempt to "unwrap" the block contents when there's no
-					// preceding block to merge with.
-					const replacement = switchToBlockType(
-						getBlock( rootClientId ),
-						'*'
-					);
-					if ( replacement && replacement.length ) {
-						registry.batch( () => {
-							replaceBlocks( rootClientId, replacement );
-							selectBlock( replacement[ 0 ].clientId, 0 );
-						} );
-					}
+					moveFirstItemUp( rootClientId );
+				} else {
+					switchToDefaultOrRemove();
 				}
 			}
 		},
@@ -472,26 +515,319 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 			) {
 				__unstableMarkLastChangeAsPersistent();
 			}
+			//Unsynced patterns are nested in an array so we need to flatten them.
+			const replacementBlocks =
+				blocks?.length === 1 && Array.isArray( blocks[ 0 ] )
+					? blocks[ 0 ]
+					: blocks;
 			replaceBlocks(
 				[ ownProps.clientId ],
-				blocks,
+				replacementBlocks,
 				indexToSelect,
 				initialPosition
 			);
 		},
+		onRemove() {
+			removeBlock( ownProps.clientId );
+		},
 		toggleSelection( selectionEnabled ) {
 			toggleSelection( selectionEnabled );
 		},
 	};
 } );
 
-export default compose(
-	pure,
-	applyWithSelect,
+// This component is used by the BlockListBlockProvider component below. It will
+// add the props necessary for the `editor.BlockListBlock` filters.
+BlockListBlock = compose(
 	applyWithDispatch,
-	// Block is sometimes not mounted at the right time, causing it be undefined
-	// see issue for more info
-	// https://github.com/WordPress/gutenberg/issues/17013
-	ifCondition( ( { block } ) => !! block ),
 	withFilters( 'editor.BlockListBlock' )
 )( BlockListBlock );
+
+// This component provides all the information we need through a single store
+// subscription (useSelect mapping). Only the necessary props are passed down
+// to the BlockListBlock component, which is a filtered component, so these
+// props are public API. To avoid adding to the public API, we use a private
+// context to pass the rest of the information to the filtered BlockListBlock
+// component, and useBlockProps.
+function BlockListBlockProvider( props ) {
+	const { clientId, rootClientId } = props;
+	const selectedProps = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				getBlockMode,
+				isSelectionEnabled,
+				getTemplateLock,
+				isSectionBlock: _isSectionBlock,
+				getBlockWithoutAttributes,
+				getBlockAttributes,
+				canRemoveBlock,
+				canMoveBlock,
+
+				getSettings,
+				getTemporarilyEditingAsBlocks,
+				getBlockEditingMode,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+				hasSelectedInnerBlock,
+				getBlocksByName,
+
+				getBlockIndex,
+				isBlockMultiSelected,
+				isBlockSubtreeDisabled,
+				isBlockHighlighted,
+				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
+				isBlockBeingDragged,
+				isDragging,
+				__unstableHasActiveBlockOverlayActive,
+				getSelectedBlocksInitialCaretPosition,
+			} = unlock( select( blockEditorStore ) );
+			const blockWithoutAttributes =
+				getBlockWithoutAttributes( clientId );
+
+			// This is a temporary fix.
+			// This function should never be called when a block is not
+			// present in the state. It happens now because the order in
+			// withSelect rendering is not correct.
+			if ( ! blockWithoutAttributes ) {
+				return;
+			}
+
+			const {
+				hasBlockSupport: _hasBlockSupport,
+				getActiveBlockVariation,
+			} = select( blocksStore );
+			const attributes = getBlockAttributes( clientId );
+			const { name: blockName, isValid } = blockWithoutAttributes;
+			const blockType = getBlockType( blockName );
+			const { supportsLayout, isPreviewMode } = getSettings();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const previewContext = {
+				isPreviewMode,
+				blockWithoutAttributes,
+				name: blockName,
+				attributes,
+				isValid,
+				themeSupportsLayout: supportsLayout,
+				index: getBlockIndex( clientId ),
+				isReusable: isReusableBlock( blockType ),
+				className: hasLightBlockWrapper
+					? attributes.className
+					: undefined,
+				defaultClassName: hasLightBlockWrapper
+					? getBlockDefaultClassName( blockName )
+					: undefined,
+				blockTitle: blockType?.title,
+			};
+
+			// When in preview mode, we can avoid a lot of selection and
+			// editing related selectors.
+			if ( isPreviewMode ) {
+				return previewContext;
+			}
+
+			const _isSelected = isBlockSelected( clientId );
+			const canRemove = canRemoveBlock( clientId );
+			const canMove = canMoveBlock( clientId );
+			const match = getActiveBlockVariation( blockName, attributes );
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const checkDeep = true;
+			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+				clientId,
+				checkDeep
+			);
+			const blockEditingMode = getBlockEditingMode( clientId );
+
+			const multiple = hasBlockSupport( blockName, 'multiple', true );
+
+			// For block types with `multiple` support, there is no "original
+			// block" to be found in the content, as the block itself is valid.
+			const blocksWithSameName = multiple
+				? []
+				: getBlocksByName( blockName );
+			const isInvalid =
+				blocksWithSameName.length &&
+				blocksWithSameName[ 0 ] !== clientId;
+
+			return {
+				...previewContext,
+				mode: getBlockMode( clientId ),
+				isSelectionEnabled: isSelectionEnabled(),
+				isLocked: !! getTemplateLock( rootClientId ),
+				isSectionBlock: _isSectionBlock( clientId ),
+				canRemove,
+				canMove,
+				isSelected: _isSelected,
+				isTemporarilyEditingAsBlocks:
+					getTemporarilyEditingAsBlocks() === clientId,
+				blockEditingMode,
+				mayDisplayControls:
+					_isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === blockName
+						) ),
+				mayDisplayParentControls:
+					_hasBlockSupport(
+						getBlockName( clientId ),
+						'__experimentalExposeControlsToChildren',
+						false
+					) && hasSelectedInnerBlock( clientId ),
+				blockApiVersion: blockType?.apiVersion || 1,
+				blockTitle: match?.title || blockType?.title,
+				isSubtreeDisabled:
+					blockEditingMode === 'disabled' &&
+					isBlockSubtreeDisabled( clientId ),
+				hasOverlay:
+					__unstableHasActiveBlockOverlayActive( clientId ) &&
+					! isDragging(),
+				initialPosition: _isSelected
+					? getSelectedBlocksInitialCaretPosition()
+					: undefined,
+				isHighlighted: isBlockHighlighted( clientId ),
+				isMultiSelected,
+				isPartiallySelected:
+					isMultiSelected &&
+					! __unstableIsFullySelected() &&
+					! __unstableSelectionHasUnmergeableBlock(),
+				isDragging: isBlockBeingDragged( clientId ),
+				hasChildSelected: isAncestorOfSelectedBlock,
+				isEditingDisabled: blockEditingMode === 'disabled',
+				hasEditableOutline:
+					blockEditingMode !== 'disabled' &&
+					getBlockEditingMode( rootClientId ) === 'disabled',
+				originalBlockClientId: isInvalid
+					? blocksWithSameName[ 0 ]
+					: false,
+			};
+		},
+		[ clientId, rootClientId ]
+	);
+
+	const {
+		isPreviewMode,
+		// Fill values that end up as a public API and may not be defined in
+		// preview mode.
+		mode = 'visual',
+		isSelectionEnabled = false,
+		isLocked = false,
+		canRemove = false,
+		canMove = false,
+		blockWithoutAttributes,
+		name,
+		attributes,
+		isValid,
+		isSelected = false,
+		themeSupportsLayout,
+		isTemporarilyEditingAsBlocks,
+		blockEditingMode,
+		mayDisplayControls,
+		mayDisplayParentControls,
+		index,
+		blockApiVersion,
+		blockTitle,
+		isSubtreeDisabled,
+		hasOverlay,
+		initialPosition,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		isSectionBlock,
+		isEditingDisabled,
+		hasEditableOutline,
+		className,
+		defaultClassName,
+		originalBlockClientId,
+	} = selectedProps;
+
+	// Users of the editor.BlockListBlock filter used to be able to
+	// access the block prop.
+	// Ideally these blocks would rely on the clientId prop only.
+	// This is kept for backward compatibility reasons.
+	const block = useMemo(
+		() => ( { ...blockWithoutAttributes, attributes } ),
+		[ blockWithoutAttributes, attributes ]
+	);
+
+	// Block is sometimes not mounted at the right time, causing it be
+	// undefined see issue for more info
+	// https://github.com/WordPress/gutenberg/issues/17013
+	if ( ! selectedProps ) {
+		return null;
+	}
+
+	const privateContext = {
+		isPreviewMode,
+		clientId,
+		className,
+		index,
+		mode,
+		name,
+		blockApiVersion,
+		blockTitle,
+		isSelected,
+		isSubtreeDisabled,
+		hasOverlay,
+		initialPosition,
+		blockEditingMode,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		isSectionBlock,
+		isEditingDisabled,
+		hasEditableOutline,
+		isTemporarilyEditingAsBlocks,
+		defaultClassName,
+		mayDisplayControls,
+		mayDisplayParentControls,
+		originalBlockClientId,
+		themeSupportsLayout,
+		canMove,
+	};
+
+	// Here we separate between the props passed to BlockListBlock and any other
+	// information we selected for internal use. BlockListBlock is a filtered
+	// component and thus ALL the props are PUBLIC API.
+
+	// Note that the context value doesn't have to be memoized in this case
+	// because when it changes, this component will be re-rendered anyway, and
+	// none of the consumers (BlockListBlock and useBlockProps) are memoized or
+	// "pure". This is different from the public BlockEditContext, where
+	// consumers might be memoized or "pure".
+	return (
+		<PrivateBlockContext.Provider value={ privateContext }>
+			<BlockListBlock
+				{ ...props }
+				// WARNING: all the following props are public API (through the
+				// editor.BlockListBlock filter) and normally nothing new should
+				// be added to it.
+				{ ...{
+					mode,
+					isSelectionEnabled,
+					isLocked,
+					canRemove,
+					canMove,
+					// Users of the editor.BlockListBlock filter used to be able
+					// to access the block prop. Ideally these blocks would rely
+					// on the clientId prop only. This is kept for backward
+					// compatibility reasons.
+					block,
+					name,
+					attributes,
+					isValid,
+					isSelected,
+				} }
+			/>
+		</PrivateBlockContext.Provider>
+	);
+}
+
+export default memo( BlockListBlockProvider );
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index bf62fe9c24e13e..9f34195e50e040 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -1,519 +1,592 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
-import { pick } from 'lodash';
+import { Pressable, View } from 'react-native';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { Component, createRef, useMemo } from '@wordpress/element';
 import {
-	GlobalStylesContext,
-	getMergedGlobalStyles,
-	useMobileGlobalStylesColors,
-	alignmentHelpers,
-	useGlobalStyles,
-} from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	memo,
+} from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
 import {
-	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
+	getBlockType,
+	getDefaultBlockName,
+	isUnmodifiedBlock,
+	isUnmodifiedDefaultBlock,
 	switchToBlockType,
 } from '@wordpress/blocks';
-import { useSetting } from '@wordpress/block-editor';
+import {
+	useDispatch,
+	useSelect,
+	withDispatch,
+	withSelect,
+} from '@wordpress/data';
+import { compose, ifCondition } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import styles from './block.scss';
 import BlockEdit from '../block-edit';
+import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
-import BlockMobileToolbar from '../block-mobile-toolbar';
+import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
+import { useLayout } from './layout';
+import useScrollUponInsertion from './use-scroll-upon-insertion';
+import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
+import BlockCrashBoundary from './block-crash-boundary';
+import BlockCrashWarning from './block-crash-warning';
+import {
+	getMergedGlobalStyles,
+	GlobalStylesContext,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
+} from '../global-styles/use-global-styles-context';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Merges wrapper props with special handling for classNames and styles.
+ *
+ * @param {Object} propsA
+ * @param {Object} propsB
+ *
+ * @return {Object} Merged props.
+ */
+function mergeWrapperProps( propsA, propsB ) {
+	const newProps = {
+		...propsA,
+		...propsB,
+	};
+
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
+		newProps.className = clsx( propsA.className, propsB.className );
+	}
 
-const emptyArray = [];
-function BlockForType( {
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
+		newProps.style = { ...propsA.style, ...propsB.style };
+	}
+
+	return newProps;
+}
+
+function BlockWrapper( {
+	accessibilityLabel,
+	blockCategory,
+	children,
+	clientId,
+	draggingClientId,
+	draggingEnabled,
+	hasInnerBlocks,
+	isDescendentBlockSelected,
+	isSelected,
+	isTouchable,
+	marginHorizontal,
+	marginVertical,
+	name,
+	onFocus,
+} ) {
+	const blockWrapperStyles = { flex: 1 };
+	const blockWrapperStyle = [
+		blockWrapperStyles,
+		{
+			marginVertical,
+			marginHorizontal,
+		},
+	];
+	const accessible = ! ( isSelected || isDescendentBlockSelected );
+
+	const ref = useRef();
+	const [ isLayoutCalculated, setIsLayoutCalculated ] = useState();
+	useScrollUponInsertion( {
+		clientId,
+		isSelected,
+		isLayoutCalculated,
+		elementRef: ref,
+	} );
+	const onLayout = useCallback( () => {
+		setIsLayoutCalculated( true );
+	}, [] );
+
+	return (
+		<Pressable
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityRole="button"
+			accessible={ accessible }
+			disabled={ ! isTouchable }
+			onPress={ onFocus }
+			style={ blockWrapperStyle }
+			ref={ ref }
+			onLayout={ onLayout }
+		>
+			<BlockOutline
+				blockCategory={ blockCategory }
+				hasInnerBlocks={ hasInnerBlocks }
+				isSelected={ isSelected }
+				name={ name }
+			/>
+			<BlockCrashBoundary
+				blockName={ name }
+				fallback={ <BlockCrashWarning /> }
+			>
+				<BlockDraggable
+					clientId={ clientId }
+					draggingClientId={ draggingClientId }
+					enabled={ draggingEnabled }
+					testID="draggable-trigger-content"
+				>
+					{ children }
+				</BlockDraggable>
+			</BlockCrashBoundary>
+		</Pressable>
+	);
+}
+
+function BlockListBlock( {
 	attributes,
+	blockWidth: blockWrapperWidth,
+	canRemove,
 	clientId,
 	contentStyle,
-	getBlockWidth,
-	insertBlocksAfter,
+	isLocked,
 	isSelected,
-	onMerge,
+	isSelectionEnabled,
+	isStackedHorizontally,
+	isValid,
+	marginHorizontal,
+	marginVertical,
 	name,
-	onBlockFocus,
-	onChange,
 	onDeleteBlock,
+	onInsertBlocksAfter,
+	onMerge,
 	onReplace,
-	parentWidth,
 	parentBlockAlignment,
+	parentWidth,
+	rootClientId,
+	setAttributes,
+	toggleSelection,
 	wrapperProps,
-	blockWidth,
-	baseGlobalStyles,
 } ) {
+	const {
+		baseGlobalStyles,
+		blockCategory,
+		blockType,
+		draggingClientId,
+		draggingEnabled,
+		hasInnerBlocks,
+		isDescendantOfParentSelected,
+		isDescendentBlockSelected,
+		isParentSelected,
+		order,
+		mayDisplayControls,
+		blockEditingMode,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockCount,
+				getBlockHierarchyRootClientId,
+				getBlockIndex,
+				getBlockParents,
+				getSelectedBlockClientId,
+				getSettings,
+				hasSelectedInnerBlock,
+				getBlockName,
+				isFirstMultiSelectedBlock,
+				getMultiSelectedBlockClientIds,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			const currentBlockType = getBlockType( name || 'core/missing' );
+			const currentBlockCategory = currentBlockType?.category;
+			const blockOrder = getBlockIndex( clientId );
+			const descendentBlockSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			const parents = getBlockParents( clientId, true );
+			const parentSelected =
+				// Set false as a default value to prevent re-render when it's changed from null to false.
+				( selectedBlockClientId || false ) &&
+				selectedBlockClientId === rootClientId;
+
+			const selectedParents = clientId ? parents : [];
+			const descendantOfParentSelected =
+				selectedParents.includes( rootClientId );
+			const blockHasInnerBlocks = getBlockCount( clientId ) > 0;
+
+			// For blocks with inner blocks, we only enable the dragging in the nested
+			// blocks if any of them are selected. This way we prevent the long-press
+			// gesture from being disabled for elements within the block UI.
+			const isDraggingEnabled =
+				! blockHasInnerBlocks ||
+				isSelected ||
+				! descendentBlockSelected;
+			// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
+			// will be the top in the hierarchy.
+			const currentDraggingClientId =
+				getBlockHierarchyRootClientId( clientId );
+
+			const globalStylesBaseStyles =
+				getSettings()?.__experimentalGlobalStylesBaseStyles;
+
+			return {
+				baseGlobalStyles: globalStylesBaseStyles,
+				blockCategory: currentBlockCategory,
+				blockType: currentBlockType,
+				draggingClientId: currentDraggingClientId,
+				draggingEnabled: isDraggingEnabled,
+				hasInnerBlocks: blockHasInnerBlocks,
+				isDescendantOfParentSelected: descendantOfParentSelected,
+				isDescendentBlockSelected: descendentBlockSelected,
+				isParentSelected: parentSelected,
+				order: blockOrder,
+				mayDisplayControls:
+					isSelected ||
+					( isFirstMultiSelectedBlock( clientId ) &&
+						getMultiSelectedBlockClientIds().every(
+							( id ) => getBlockName( id ) === name
+						) ),
+				blockEditingMode: getBlockEditingMode( clientId ),
+			};
+		},
+		[ clientId, isSelected, name, rootClientId ]
+	);
+	const { removeBlock, selectBlock } = useDispatch( blockEditorStore );
+	const initialBlockWidth = blockWrapperWidth - 2 * marginHorizontal;
+	const [ blockWidth, setBlockWidth ] = useState( initialBlockWidth );
+	const parentLayout = useLayout() || {};
 	const defaultColors = useMobileGlobalStylesColors();
-	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+
+	const onRemove = useCallback(
+		() => removeBlock( clientId ),
+		[ clientId, removeBlock ]
+	);
+	const onFocus = useCallback( () => {
+		if ( ! isSelected ) {
+			selectBlock( clientId );
+		}
+	}, [ selectBlock, clientId, isSelected ] );
+
+	const onLayout = useCallback(
+		( { nativeEvent } ) => {
+			const layoutWidth = Math.floor( nativeEvent.layout.width );
+
+			if ( ! blockWidth || ! layoutWidth ) {
+				return;
+			}
+
+			if ( blockWidth !== layoutWidth ) {
+				setBlockWidth( layoutWidth );
+			}
+		},
+		[ blockWidth, setBlockWidth ]
+	);
+
+	// Determine whether the block has props to apply to the wrapper.
+	if ( blockType?.getEditWrapperProps ) {
+		wrapperProps = mergeWrapperProps(
+			wrapperProps,
+			blockType.getEditWrapperProps( attributes )
+		);
+	}
+
+	// Inherited styles merged with block level styles.
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
 			baseGlobalStyles,
 			globalStyle,
-			wrapperProps.style,
+			wrapperProps?.style,
 			attributes,
 			defaultColors,
 			name,
-			fontSizes
+			fontSizes || EMPTY_ARRAY
 		);
 	}, [
-		defaultColors,
-		globalStyle,
-		// I couldn't simply use attributes and wrapperProps.styles as a dependency because they are almost always a new reference.
-		// Thanks to the JSON.stringify we check if the value is the same instead of reference.
-		JSON.stringify( wrapperProps.style ),
+		// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
+		// JSON.stringify is used for the following purposes:
+		// 1. To create a single, comparable value from the globalStyle, wrapperProps.style, and attributes objects. This allows useMemo to
+		//    efficiently determine if a change has occurred in any of these objects.
+		// 2. To filter the attributes object, ensuring that only the relevant attributes (included in
+		//    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
+		//    unnecessary useMemo calls when other, unrelated attributes change.
+		JSON.stringify( globalStyle ),
+		JSON.stringify( wrapperProps?.style ),
 		JSON.stringify(
-			pick( attributes, GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES )
+			Object.fromEntries(
+				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>
+					GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES.includes( key )
+				)
+			)
 		),
 	] );
 
-	return (
-		<GlobalStylesContext.Provider value={ mergedStyle }>
-			<BlockEdit
-				name={ name }
-				isSelected={ isSelected }
-				attributes={ attributes }
-				setAttributes={ onChange }
-				onFocus={ onBlockFocus }
-				onReplace={ onReplace }
-				insertBlocksAfter={ insertBlocksAfter }
-				mergeBlocks={ onMerge }
-				// Block level styles.
-				wrapperProps={ wrapperProps }
-				// Inherited styles merged with block level styles.
-				style={ mergedStyle }
-				clientId={ clientId }
-				parentWidth={ parentWidth }
-				contentStyle={ contentStyle }
-				onDeleteBlock={ onDeleteBlock }
-				blockWidth={ blockWidth }
-				parentBlockAlignment={ parentBlockAlignment }
-			/>
-			<View onLayout={ getBlockWidth } />
-		</GlobalStylesContext.Provider>
+	const isFocused = isSelected || isDescendentBlockSelected;
+	const isTouchable =
+		isSelected ||
+		isDescendantOfParentSelected ||
+		isParentSelected ||
+		! rootClientId;
+
+	const accessibilityLabel = getAccessibleBlockLabel(
+		blockType,
+		attributes,
+		order + 1
 	);
-}
-
-class BlockListBlock extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
-		this.onFocus = this.onFocus.bind( this );
-		this.getBlockWidth = this.getBlockWidth.bind( this );
-
-		this.state = {
-			blockWidth: this.props.blockWidth - 2 * this.props.marginHorizontal,
-		};
-
-		this.anchorNodeRef = createRef();
-	}
-
-	onFocus() {
-		const { firstToSelectId, isSelected, onSelect } = this.props;
-		if ( ! isSelected ) {
-			onSelect( firstToSelectId );
-		}
-	}
-
-	insertBlocksAfter( blocks ) {
-		this.props.onInsertBlocks( blocks, this.props.order + 1 );
-
-		if ( blocks[ 0 ] ) {
-			// Focus on the first block inserted.
-			this.props.onSelect( blocks[ 0 ].clientId );
-		}
-	}
-
-	getBlockWidth( { nativeEvent } ) {
-		const { layout } = nativeEvent;
-		const { blockWidth } = this.state;
-		const layoutWidth = Math.floor( layout.width );
-
-		if ( ! blockWidth || ! layoutWidth ) {
-			return;
-		}
-
-		if ( blockWidth !== layoutWidth ) {
-			this.setState( { blockWidth: layoutWidth } );
-		}
-	}
-
-	getBlockForType() {
-		const { blockWidth } = this.state;
-		return (
-			<BlockForType
-				{ ...this.props }
-				onBlockFocus={ this.onFocus }
-				insertBlocksAfter={ this.insertBlocksAfter }
-				getBlockWidth={ this.getBlockWidth }
-				blockWidth={ blockWidth }
-			/>
-		);
-	}
-
-	renderBlockTitle() {
-		return (
-			<View style={ styles.blockTitle }>
-				<Text>BlockType: { this.props.name }</Text>
-			</View>
-		);
-	}
-
-	render() {
-		const {
-			attributes,
-			blockType,
-			clientId,
-			icon,
-			isSelected,
-			isValid,
-			order,
-			title,
-			isDimmed,
-			isTouchable,
-			onDeleteBlock,
-			isStackedHorizontally,
-			isParentSelected,
-			getStylesFromColorScheme,
-			marginVertical,
-			marginHorizontal,
-			isInnerBlockSelected,
-			name,
-			draggingEnabled,
-			draggingClientId,
-		} = this.props;
 
-		if ( ! attributes || ! blockType ) {
-			return null;
-		}
-		const { blockWidth } = this.state;
-		const { align } = attributes;
-		const accessibilityLabel = getAccessibleBlockLabel(
-			blockType,
-			attributes,
-			order + 1
-		);
-		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-		const accessible = ! ( isSelected || isInnerBlockSelected );
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-		const isScreenWidthEqual = blockWidth === screenWidth;
-		const isScreenWidthWider = blockWidth < screenWidth;
-		const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ this.onFocus }
-				accessible={ accessible }
-				accessibilityRole={ 'button' }
-			>
-				<View
-					style={ { flex: 1 } }
-					accessibilityLabel={ accessibilityLabel }
-				>
-					<View
-						pointerEvents={ isTouchable ? 'auto' : 'box-only' }
-						accessibilityLabel={ accessibilityLabel }
-						style={ [
-							{ marginVertical, marginHorizontal, flex: 1 },
-							isDimmed && styles.dimmed,
-						] }
-					>
-						{ isSelected && (
-							<View
-								pointerEvents="box-none"
-								style={ [
-									styles.solidBorder,
-									isFullWidth( align ) &&
-										isScreenWidthWider &&
-										styles.borderFullWidth,
-									isFullWidth( align ) &&
-										isContainerRelated( name ) &&
-										isScreenWidthWider &&
-										styles.containerBorderFullWidth,
-									getStylesFromColorScheme(
-										styles.solidBorderColor,
-										styles.solidBorderColorDark
-									),
-								] }
-							/>
-						) }
-						{ isParentSelected && (
-							<View
-								style={ [
-									styles.dashedBorder,
-									getStylesFromColorScheme(
-										styles.dashedBorderColor,
-										styles.dashedBorderColorDark
-									),
-								] }
-							/>
-						) }
-						<BlockDraggable
+	return (
+		<BlockWrapper
+			accessibilityLabel={ accessibilityLabel }
+			blockCategory={ blockCategory }
+			clientId={ clientId }
+			draggingClientId={ draggingClientId }
+			draggingEnabled={ draggingEnabled }
+			hasInnerBlocks={ hasInnerBlocks }
+			isDescendentBlockSelected={ isDescendentBlockSelected }
+			isFocused={ isFocused }
+			isSelected={ isSelected }
+			isStackedHorizontally={ isStackedHorizontally }
+			isTouchable={ isTouchable }
+			marginHorizontal={ marginHorizontal }
+			marginVertical={ marginVertical }
+			name={ name }
+			onFocus={ onFocus }
+		>
+			{ () =>
+				! isValid ? (
+					<BlockInvalidWarning clientId={ clientId } />
+				) : (
+					<GlobalStylesContext.Provider value={ mergedStyle }>
+						<BlockEdit
+							attributes={ attributes }
+							blockWidth={ blockWidth }
 							clientId={ clientId }
-							draggingClientId={ draggingClientId }
-							enabled={ draggingEnabled }
-							testID="draggable-trigger-content"
-						>
-							{ () =>
-								isValid ? (
-									this.getBlockForType()
-								) : (
-									<BlockInvalidWarning
-										blockTitle={ title }
-										icon={ icon }
-										clientId={ clientId }
-									/>
-								)
+							contentStyle={ contentStyle }
+							insertBlocksAfter={
+								isLocked ? undefined : onInsertBlocksAfter
 							}
-						</BlockDraggable>
-						<View
-							style={ styles.neutralToolbar }
-							ref={ this.anchorNodeRef }
-						>
-							{ isSelected && (
-								<BlockMobileToolbar
-									clientId={ clientId }
-									onDelete={ onDeleteBlock }
-									isStackedHorizontally={
-										isStackedHorizontally
-									}
-									blockWidth={ blockWidth }
-									anchorNodeRef={ this.anchorNodeRef.current }
-									isFullWidth={ isFullWidthToolbar }
-									draggingClientId={ draggingClientId }
-								/>
-							) }
-						</View>
-					</View>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-}
-
-// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
-const wrapperPropsCache = new WeakMap();
-const emptyObj = {};
-function getWrapperProps( value, getWrapperPropsFunction ) {
-	if ( ! getWrapperPropsFunction ) {
-		return emptyObj;
-	}
-	const cachedValue = wrapperPropsCache.get( value );
-	if ( ! cachedValue ) {
-		const wrapperProps = getWrapperPropsFunction( value );
-		wrapperPropsCache.set( value, wrapperProps );
-		return wrapperProps;
-	}
-	return cachedValue;
+							isSelected={ isSelected }
+							isSelectionEnabled={ isSelectionEnabled }
+							mergeBlocks={ canRemove ? onMerge : undefined }
+							name={ name }
+							onDeleteBlock={ onDeleteBlock }
+							onFocus={ onFocus }
+							onRemove={ canRemove ? onRemove : undefined }
+							onReplace={ canRemove ? onReplace : undefined }
+							parentBlockAlignment={ parentBlockAlignment }
+							parentWidth={ parentWidth }
+							setAttributes={ setAttributes }
+							style={ mergedStyle }
+							toggleSelection={ toggleSelection }
+							__unstableParentLayout={
+								Object.keys( parentLayout ).length
+									? parentLayout
+									: undefined
+							}
+							wrapperProps={ wrapperProps }
+							mayDisplayControls={ mayDisplayControls }
+							blockEditingMode={ blockEditingMode }
+						/>
+						<View onLayout={ onLayout } />
+					</GlobalStylesContext.Provider>
+				)
+			}
+		</BlockWrapper>
+	);
 }
 
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockIndex,
-			getBlockCount,
-			getSettings,
-			isBlockSelected,
-			getBlock,
-			getSelectedBlockClientId,
-			getLowestCommonAncestorWithSelectedBlock,
-			getBlockParents,
-			hasSelectedInnerBlock,
-			getBlockHierarchyRootClientId,
-		} = select( blockEditorStore );
-
-		const order = getBlockIndex( clientId );
-		const isSelected = isBlockSelected( clientId );
-		const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
-		const block = getBlock( clientId );
-		const { name, attributes, isValid } = block || {};
-
-		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType?.title;
-		const icon = blockType?.icon;
-
-		const parents = getBlockParents( clientId, true );
-		const parentId = parents[ 0 ] || '';
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-
-		const commonAncestor =
-			getLowestCommonAncestorWithSelectedBlock( clientId );
-		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
-		const firstToSelectId = commonAncestor
-			? parents[ commonAncestorIndex ]
-			: parents[ parents.length - 1 ];
-
-		const isParentSelected =
-			// Set false as a default value to prevent re-render when it's changed from null to false.
-			( selectedBlockClientId || false ) &&
-			selectedBlockClientId === parentId;
-
-		const selectedParents = selectedBlockClientId
-			? getBlockParents( selectedBlockClientId )
-			: [];
-		const isDescendantOfParentSelected =
-			selectedParents.includes( parentId );
-		const isTouchable =
-			isSelected ||
-			isDescendantOfParentSelected ||
-			isParentSelected ||
-			parentId === '';
-		const baseGlobalStyles =
-			getSettings()?.__experimentalGlobalStylesBaseStyles;
-
-		const hasInnerBlocks = getBlockCount( clientId ) > 0;
-		// For blocks with inner blocks, we only enable the dragging in the nested
-		// blocks if any of them are selected. This way we prevent the long-press
-		// gesture from being disabled for elements within the block UI.
-		const draggingEnabled =
-			! hasInnerBlocks ||
-			isSelected ||
-			! hasSelectedInnerBlock( clientId, true );
-		// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
-		// will be the top in the hierarchy.
-		const draggingClientId = getBlockHierarchyRootClientId( clientId );
-
-		return {
-			icon,
-			name: name || 'core/missing',
-			order,
-			title,
-			attributes,
-			blockType,
-			draggingClientId,
-			draggingEnabled,
-			isSelected,
-			isInnerBlockSelected,
-			isValid,
-			isParentSelected,
-			firstToSelectId,
-			isTouchable,
-			baseGlobalStyles,
-			wrapperProps: getWrapperProps(
-				attributes,
-				blockType.getEditWrapperProps
-			),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps, registry ) => {
-		const {
-			insertBlocks,
-			mergeBlocks,
-			replaceBlocks,
-			selectBlock,
-			updateBlockAttributes,
-			moveBlocksToPosition,
-			removeBlock,
-		} = dispatch( blockEditorStore );
-
-		return {
-			onMerge( forward ) {
-				const { clientId, rootClientId } = ownProps;
-				const {
-					getPreviousBlockClientId,
-					getNextBlockClientId,
-					getBlock,
-					getBlockAttributes,
-					getBlockName,
-					getBlockOrder,
-				} = registry.select( blockEditorStore );
-
-				// For `Delete` or forward merge, we should do the exact same thing
-				// as `Backspace`, but from the other block.
-				if ( forward ) {
-					if ( rootClientId ) {
-						const nextRootClientId =
-							getNextBlockClientId( rootClientId );
-
-						if ( nextRootClientId ) {
-							// If there is a block that follows with the same parent
-							// block name and the same attributes, merge the inner
-							// blocks.
-							if (
-								getBlockName( rootClientId ) ===
-								getBlockName( nextRootClientId )
-							) {
-								const rootAttributes =
-									getBlockAttributes( rootClientId );
-								const previousRootAttributes =
-									getBlockAttributes( nextRootClientId );
-
-								if (
-									Object.keys( rootAttributes ).every(
-										( key ) =>
-											rootAttributes[ key ] ===
-											previousRootAttributes[ key ]
-									)
-								) {
-									registry.batch( () => {
-										moveBlocksToPosition(
-											getBlockOrder( nextRootClientId ),
-											nextRootClientId,
-											rootClientId
-										);
-										removeBlock( nextRootClientId, false );
-									} );
-									return;
-								}
-							} else {
-								mergeBlocks( rootClientId, nextRootClientId );
-								return;
+const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		isBlockSelected,
+		getBlockMode,
+		isSelectionEnabled,
+		getTemplateLock,
+		getBlockWithoutAttributes,
+		getBlockAttributes,
+		canRemoveBlock,
+		canMoveBlock,
+	} = unlock( select( blockEditorStore ) );
+	const block = getBlockWithoutAttributes( clientId );
+	const attributes = getBlockAttributes( clientId );
+	const isSelected = isBlockSelected( clientId );
+	const templateLock = getTemplateLock( rootClientId );
+	const canRemove = canRemoveBlock( clientId );
+	const canMove = canMoveBlock( clientId );
+
+	// The fallback to `{}` is a temporary fix.
+	// This function should never be called when a block is not present in
+	// the state. It happens now because the order in withSelect rendering
+	// is not correct.
+	const { name, isValid } = block || {};
+
+	// Do not add new properties here, use `useSelect` instead to avoid
+	// leaking new props to the public API (editor.BlockListBlock filter).
+	return {
+		mode: getBlockMode( clientId ),
+		isSelectionEnabled: isSelectionEnabled(),
+		isLocked: !! templateLock,
+		canRemove,
+		canMove,
+		// Users of the editor.BlockListBlock filter used to be able to
+		// access the block prop.
+		// Ideally these blocks would rely on the clientId prop only.
+		// This is kept for backward compatibility reasons.
+		block,
+		name,
+		attributes,
+		isValid,
+		isSelected,
+	};
+} );
+
+const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
+	const {
+		updateBlockAttributes,
+		insertBlocks,
+		mergeBlocks,
+		replaceBlocks,
+		toggleSelection,
+		__unstableMarkLastChangeAsPersistent,
+		moveBlocksToPosition,
+		removeBlock,
+	} = dispatch( blockEditorStore );
+
+	// Do not add new properties here, use `useDispatch` instead to avoid
+	// leaking new props to the public API (editor.BlockListBlock filter).
+	return {
+		setAttributes( newAttributes ) {
+			const { getMultiSelectedBlockClientIds } =
+				registry.select( blockEditorStore );
+			const multiSelectedBlockClientIds =
+				getMultiSelectedBlockClientIds();
+			const { clientId } = ownProps;
+			const clientIds = multiSelectedBlockClientIds.length
+				? multiSelectedBlockClientIds
+				: [ clientId ];
+
+			updateBlockAttributes( clientIds, newAttributes );
+		},
+		onInsertBlocks( blocks, index ) {
+			const { rootClientId } = ownProps;
+			insertBlocks( blocks, index, rootClientId );
+		},
+		onInsertBlocksAfter( blocks ) {
+			const { clientId, rootClientId } = ownProps;
+			const { getBlockIndex } = registry.select( blockEditorStore );
+			const index = getBlockIndex( clientId );
+			insertBlocks( blocks, index + 1, rootClientId );
+		},
+		onMerge( forward ) {
+			const { clientId, rootClientId } = ownProps;
+			const {
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getBlock,
+				getBlockAttributes,
+				getBlockName,
+				getBlockOrder,
+				getBlockIndex,
+				getBlockRootClientId,
+				canInsertBlockType,
+			} = registry.select( blockEditorStore );
+
+			/**
+			 * Moves the block with clientId up one level. If the block type
+			 * cannot be inserted at the new location, it will be attempted to
+			 * convert to the default block type.
+			 *
+			 * @param {string}  _clientId       The block to move.
+			 * @param {boolean} changeSelection Whether to change the selection
+			 *                                  to the moved block.
+			 */
+			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const targetRootClientId = getBlockRootClientId( _clientId );
+				const blockOrder = getBlockOrder( _clientId );
+				const [ firstClientId ] = blockOrder;
+
+				if (
+					blockOrder.length === 1 &&
+					isUnmodifiedBlock( getBlock( firstClientId ) )
+				) {
+					removeBlock( _clientId );
+				} else {
+					registry.batch( () => {
+						if (
+							canInsertBlockType(
+								getBlockName( firstClientId ),
+								targetRootClientId
+							)
+						) {
+							moveBlocksToPosition(
+								[ firstClientId ],
+								_clientId,
+								targetRootClientId,
+								getBlockIndex( _clientId )
+							);
+						} else {
+							const replacement = switchToBlockType(
+								getBlock( firstClientId ),
+								getDefaultBlockName()
+							);
+
+							if ( replacement && replacement.length ) {
+								insertBlocks(
+									replacement,
+									getBlockIndex( _clientId ),
+									targetRootClientId,
+									changeSelection
+								);
+								removeBlock( firstClientId, false );
 							}
 						}
-					}
-
-					const nextBlockClientId = getNextBlockClientId( clientId );
-
-					if ( ! nextBlockClientId ) {
-						return;
-					}
 
-					// Check if it's possibile to "unwrap" the following block
-					// before trying to merge.
-					const replacement = switchToBlockType(
-						getBlock( nextBlockClientId ),
-						'*'
-					);
-
-					if ( replacement && replacement.length ) {
-						replaceBlocks( nextBlockClientId, replacement );
-					} else {
-						mergeBlocks( clientId, nextBlockClientId );
-					}
-				} else {
-					const previousBlockClientId =
-						getPreviousBlockClientId( clientId );
-
-					if ( previousBlockClientId ) {
-						mergeBlocks( previousBlockClientId, clientId );
-					} else if ( rootClientId ) {
-						const previousRootClientId =
-							getPreviousBlockClientId( rootClientId );
-
-						// If there is a preceding block with the same parent block
-						// name and the same attributes, merge the inner blocks.
 						if (
-							previousRootClientId &&
+							! getBlockOrder( _clientId ).length &&
+							isUnmodifiedBlock( getBlock( _clientId ) )
+						) {
+							removeBlock( _clientId, false );
+						}
+					} );
+				}
+			}
+
+			// For `Delete` or forward merge, we should do the exact same thing
+			// as `Backspace`, but from the other block.
+			if ( forward ) {
+				if ( rootClientId ) {
+					const nextRootClientId =
+						getNextBlockClientId( rootClientId );
+
+					if ( nextRootClientId ) {
+						// If there is a block that follows with the same parent
+						// block name and the same attributes, merge the inner
+						// blocks.
+						if (
 							getBlockName( rootClientId ) ===
-								getBlockName( previousRootClientId )
+							getBlockName( nextRootClientId )
 						) {
 							const rootAttributes =
 								getBlockAttributes( rootClientId );
 							const previousRootAttributes =
-								getBlockAttributes( previousRootClientId );
+								getBlockAttributes( nextRootClientId );
 
 							if (
 								Object.keys( rootAttributes ).every(
@@ -524,44 +597,115 @@ export default compose( [
 							) {
 								registry.batch( () => {
 									moveBlocksToPosition(
-										getBlockOrder( rootClientId ),
-										rootClientId,
-										previousRootClientId
+										getBlockOrder( nextRootClientId ),
+										nextRootClientId,
+										rootClientId
 									);
-									removeBlock( rootClientId, false );
+									removeBlock( nextRootClientId, false );
 								} );
 								return;
 							}
+						} else {
+							mergeBlocks( rootClientId, nextRootClientId );
+							return;
 						}
+					}
+				}
+
+				const nextBlockClientId = getNextBlockClientId( clientId );
+
+				if ( ! nextBlockClientId ) {
+					return;
+				}
+
+				if ( getBlockOrder( nextBlockClientId ).length ) {
+					moveFirstItemUp( nextBlockClientId, false );
+				} else {
+					mergeBlocks( clientId, nextBlockClientId );
+				}
+			} else {
+				const previousBlockClientId =
+					getPreviousBlockClientId( clientId );
+
+				if ( previousBlockClientId ) {
+					mergeBlocks( previousBlockClientId, clientId );
+				} else if ( rootClientId ) {
+					const previousRootClientId =
+						getPreviousBlockClientId( rootClientId );
+
+					// If there is a preceding block with the same parent block
+					// name and the same attributes, merge the inner blocks.
+					if (
+						previousRootClientId &&
+						getBlockName( rootClientId ) ===
+							getBlockName( previousRootClientId )
+					) {
+						const rootAttributes =
+							getBlockAttributes( rootClientId );
+						const previousRootAttributes =
+							getBlockAttributes( previousRootClientId );
 
-						// Attempt to "unwrap" the block contents when there's no
-						// preceding block to merge with.
-						const replacement = switchToBlockType(
-							getBlock( rootClientId ),
-							'*'
-						);
-						if ( replacement && replacement.length ) {
+						if (
+							Object.keys( rootAttributes ).every(
+								( key ) =>
+									rootAttributes[ key ] ===
+									previousRootAttributes[ key ]
+							)
+						) {
 							registry.batch( () => {
-								replaceBlocks( rootClientId, replacement );
-								selectBlock( replacement[ 0 ].clientId, 0 );
+								moveBlocksToPosition(
+									getBlockOrder( rootClientId ),
+									rootClientId,
+									previousRootClientId
+								);
+								removeBlock( rootClientId, false );
 							} );
+							return;
 						}
 					}
+
+					moveFirstItemUp( rootClientId );
+				} else if (
+					getBlockName( clientId ) !== getDefaultBlockName()
+				) {
+					const replacement = switchToBlockType(
+						getBlock( clientId ),
+						getDefaultBlockName()
+					);
+					if ( replacement && replacement.length ) {
+						replaceBlocks( clientId, replacement );
+					}
 				}
-			},
-			onInsertBlocks( blocks, index ) {
-				insertBlocks( blocks, index, ownProps.rootClientId );
-			},
-			onSelect( clientId = ownProps.clientId, initialPosition ) {
-				selectBlock( clientId, initialPosition );
-			},
-			onChange: ( attributes ) => {
-				updateBlockAttributes( ownProps.clientId, attributes );
-			},
-			onReplace( blocks, indexToSelect ) {
-				replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
-			},
-		};
-	} ),
-	withPreferredColorScheme,
-] )( BlockListBlock );
+			}
+		},
+		onReplace( blocks, indexToSelect, initialPosition, meta ) {
+			if (
+				blocks.length &&
+				! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
+			) {
+				__unstableMarkLastChangeAsPersistent();
+			}
+			replaceBlocks(
+				[ ownProps.clientId ],
+				blocks,
+				indexToSelect,
+				initialPosition,
+				meta
+			);
+		},
+		toggleSelection( selectionEnabled ) {
+			toggleSelection( selectionEnabled );
+		},
+	};
+} );
+
+export default compose(
+	memo,
+	applyWithSelect,
+	applyWithDispatch,
+	// Block is sometimes not mounted at the right time, causing it be undefined
+	// see issue for more info
+	// https://github.com/WordPress/gutenberg/issues/17013
+	ifCondition( ( { block } ) => !! block ),
+	withFilters( 'editor.BlockListBlock' )
+)( BlockListBlock );
diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
index 78905de5bd733f..547a6129659a28 100644
--- a/packages/block-editor/src/components/block-list/block.native.scss
+++ b/packages/block-editor/src/components/block-list/block.native.scss
@@ -3,29 +3,11 @@
 }
 
 .solidBorderColor {
-	border-color: $blue-wordpress;
+	border-color: $blue-40;
 }
 
 .solidBorderColorDark {
-	border-color: $blue-30;
-}
-
-.dashedBorderColor {
-	border-color: $gray;
-}
-
-.dashedBorderColorDark {
-	border-color: $gray-70;
-}
-
-.borderFullWidth {
-	left: 0;
-	right: 0;
-}
-
-.containerBorderFullWidth {
-	left: -$solid-border-space * 0.5;
-	right: -$solid-border-space * 0.5;
+	border-color: $blue-50;
 }
 
 .dimmed {
@@ -51,32 +33,28 @@
 	min-height: 50px;
 }
 
-.neutralToolbar {
-	margin-left: -$block-edge-to-content;
-	margin-right: -$block-edge-to-content;
-}
-
 .solidBorder {
 	position: absolute;
-	top: -$solid-border-space;
-	bottom: 0;
-	left: -$solid-border-space;
-	right: -$solid-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 4px;
+	top: -6px;
+	bottom: -6px;
+	left: -6px;
+	right: -6px;
+	border-width: 2px;
+	border-radius: 2px;
 	border-style: solid;
 	z-index: 1;
 }
 
-.dashedBorder {
-	position: absolute;
-	top: -$dashed-border-space;
-	bottom: -$dashed-border-space;
-	left: -$dashed-border-space;
-	right: -$dashed-border-space;
-	border-width: $block-selected-border-width;
-	border-radius: 2px;
-	border-style: dashed;
+.solidBorderCompact {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.solidBorderTextContent {
+	left: 0;
+	right: 0;
 }
 
 .fullWidthPadding {
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
new file mode 100644
index 00000000000000..cd517fced833ef
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -0,0 +1,435 @@
+// This remove the margins set here: https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/editor.scss#L56
+// It removes the margins around blocks when a BlockPreview is rendered in the block style selector
+.block-editor-block-styles .block-editor-block-list__block {
+	margin: 0;
+}
+
+/**
+ * Cross-Block Selection
+ */
+
+@keyframes selection-overlay__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0.4;
+	}
+}
+
+// Hide selections on this element, otherwise Safari will include it stacked
+// under your actual selection.
+// This uses a CSS hack to show the rules to Safari only. Failing here is okay,
+// it just makes the selection indication slightly less precise. That makes this
+// hack a progressive enhancement.
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
+_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
+_::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .block-editor-block-list__layout::selection {
+	background-color: transparent;
+}
+/* stylelint-enable */
+
+
+// Note to developers refactoring this, please test navigation mode, and
+// multi selection and hovering the block switcher to highlight the block.
+// Also be sure to test partial selections in Safari, as it draws the
+// selection marker with an entirely different model than Blink.
+.block-editor-block-list__layout {
+	position: relative;
+
+	// Block multi selection
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+		// Hide the native selection indicator, for the selection, and children.
+		&::selection,
+		& ::selection {
+			background: transparent;
+		}
+
+		// Draw a spot color overlay.
+		&::after {
+			content: "";
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background: var(--wp-admin-theme-color);
+			opacity: 0.4;
+
+			// Animate.
+			animation: selection-overlay__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+
+			// Show outline in high contrast mode.
+			outline: 2px solid transparent;
+		}
+
+		// Don't show the highlight focus style when multi selected.
+		&.is-highlighted::after {
+			outline-color: transparent;
+		}
+	}
+
+	// Block highlight, and navigation mode, and focus.
+	// This piece of code has gone back and forth between using a pseudo element
+	// vs. styling the block directly. Ultimately we likely need a pseudo element
+	// (unless styles like focus and selection overlay can be rendered as separate elements),
+	// since things like border-radius need to be able to be set on the block itself.
+	.block-editor-block-list__block.is-highlighted,
+	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
+	.block-editor-block-list__block:not([contenteditable="true"]):focus {
+		outline: none;
+
+		// We're using a pseudo element to overflow placeholder borders
+		// and any border inside the block itself.
+		&::after {
+			@include selected-block-focus();
+			z-index: 1;
+		}
+	}
+
+	// Re-enable it on components inside.
+	[class^="components-"] {
+		user-select: text;
+	}
+}
+
+.block-editor-block-list__layout .block-editor-block-list__block {
+	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
+	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
+	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
+	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
+	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
+	position: relative;
+
+	// Break long strings of text without spaces so they don't overflow the block.
+	overflow-wrap: break-word;
+
+	pointer-events: auto;
+
+	&.is-editing-disabled {
+		pointer-events: none;
+	}
+
+	&.has-negative-margin {
+		&.is-selected,
+		&.has-child-selected {
+			// Bring the selected block forward so we can see it.
+			z-index: z-index(".block-editor-block-list__block.is-selected");
+		}
+	}
+
+	.reusable-block-edit-panel * {
+		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
+	}
+
+	/**
+	 * Notices
+	 */
+	.components-placeholder .components-with-notices-ui {
+		margin: -10px 0 12px 0;
+	}
+
+	.components-with-notices-ui {
+		margin: 0 0 12px 0;
+		width: 100%;
+
+		.components-notice {
+			.components-notice__content {
+				font-size: $default-font-size;
+			}
+		}
+	}
+
+	// Warnings
+	&.has-warning {
+		min-height: $grid-unit-60;
+
+		// When a block has a warning, you shouldn't be able to manipulate the contents.
+		> * {
+			pointer-events: none;
+			user-select: none;
+		}
+
+		// Allow the warning action buttons to be manipulable.
+		.block-editor-warning {
+			pointer-events: all;
+		}
+	}
+
+	// Scrim overlay.
+	&.has-warning::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		background-color: rgba($white, 0.4);
+	}
+
+	// Avoid conflict with the multi-selection highlight color.
+	&.has-warning.is-multi-selected::after {
+		background-color: transparent;
+	}
+
+	// Reusable blocks parent border.
+	&.is-reusable.has-child-selected::after {
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+	}
+
+	// Clear floats.
+	&[data-clear="true"] {
+		float: none;
+	}
+}
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
+
+	&.is-selected,
+	&.is-hovered {
+		cursor: default;
+
+		&.rich-text,
+		.rich-text {
+			cursor: auto;
+		}
+	}
+
+	&.is-hovered:not(.is-selected),
+	&:not(.rich-text):not([contenteditable="true"]).is-selected {
+
+		&::after {
+			@include selected-block-focus();
+		}
+	}
+}
+
+// Colorize outlines for template parts and synced patterns (.is-reusable).
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
+	&.is-hovered::after,
+	&.is-selected::after,
+	&.is-highlighted::after {
+		outline-color: var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			outline-color: var(--wp-block-synced-color);
+		}
+	}
+}
+
+// Add fade in/out background for editable blocks in synced patterns.
+@keyframes block-editor-is-editable__animation {
+	from {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	}
+	to {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+	}
+}
+
+@keyframes block-editor-is-editable__animation_reduce-motion {
+	0% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	}
+	99% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+	}
+	100% {
+		background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+	}
+}
+
+.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
+	animation-name: block-editor-is-editable__animation;
+	animation-duration: 0.8s;
+	animation-timing-function: ease-out;
+	animation-delay: 0.1s;
+	animation-fill-mode: backwards;
+	bottom: 0;
+	content: "";
+	left: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+
+	// Unique reduced-motion affordance to ensure the effect is still visible when reduce motion is enabled.
+	@media (prefers-reduced-motion: reduce) {
+		animation-name: block-editor-is-editable__animation_reduce-motion;
+		animation-delay: 0s;
+	}
+}
+
+// Spotlight mode. Fade out blocks unless they contain a selected block.
+.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
+	opacity: 0.2;
+	transition: opacity 0.1s linear;
+	@include reduce-motion("transition");
+
+	// Nested blocks should never be faded. If the parent block is already faded
+	// out, it shouldn't be faded out more. If the parent block in not faded
+	// out, it shouldn't be faded out either because the block as a whole,
+	// including inner blocks, should be focused.
+	.block-editor-block-list__block,
+	&.is-selected,
+	&.is-multi-selected {
+		opacity: 1;
+	}
+}
+
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+	&,
+	& .block-editor-block-list__block {
+		opacity: 1;
+	}
+}
+
+.wp-block[data-align="left"] > *,
+.wp-block[data-align="right"] > *,
+.wp-block.alignleft,
+.wp-block.alignright {
+	// Without z-index, won't be clickable as "above" adjacent content.
+	z-index: z-index("{core/image aligned left or right} .wp-block");
+}
+
+.wp-site-blocks > [data-align="left"] {
+	float: left;
+	margin-right: 2em;
+}
+
+.wp-site-blocks > [data-align="right"] {
+	float: right;
+	margin-left: 2em;
+}
+
+.wp-site-blocks > [data-align="center"] {
+	justify-content: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/**
+ * In-Canvas Inserter
+ */
+
+.block-editor-block-list .block-editor-inserter {
+	margin: $grid-unit-10;
+	cursor: move; // Fallback for IE/Edge < 14
+	cursor: grab;
+}
+
+@keyframes block-editor-inserter__toggle__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+// Hide the appender that sits at the end of block lists, when inside a nested block,
+// unless the block itself, or a parent, is selected.
+.wp-block .block-list-appender .block-editor-inserter__toggle {
+	animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
+	display: none;
+
+	.block-editor-inserter__toggle {
+		opacity: 0;
+		transform: scale(0);
+	}
+}
+
+.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
+	display: block;
+	margin: 0;
+	padding: $grid-unit-15;
+	width: 100%;
+	border: none;
+	outline: none;
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 $border-width $gray-900;
+	resize: none;
+	overflow: hidden;
+	font-family: $editor-html-font;
+	font-size: $text-editor-font-size;
+	line-height: 1.5;
+	transition: padding 0.2s linear;
+	@include reduce-motion("transition");
+
+	&:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+
+/**
+ * Warnings.
+ */
+
+.block-editor-block-list__block .block-editor-warning {
+	z-index: z-index(".block-editor-warning");
+	position: relative;
+
+	&.block-editor-block-list__block-crash-warning {
+		// The block crash warning has no block preview underneath it.
+		// The lack of a preview combined with the negative margin that
+		// the warning normally has results in crashed blocks overlapping
+		// any blocks that come after them. Resetting the margin to `auto`
+		// solves this.
+		margin-bottom: auto;
+	}
+}
+
+.block-editor-block-list__zoom-out-separator {
+	/* same color as the iframe's background */
+	background: $gray-300;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin-left: -1px;
+	margin-right: -1px;
+	transition: background-color 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	font-size: $default-font-size;
+	font-family: $default-font;
+	color: $black;
+	font-weight: normal;
+
+	.is-zoomed-out & {
+		// Maintains an absolute font-size by counter-scaling based on the zoom level.
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
+	}
+
+	&.is-dragged-over {
+		background: $gray-400;
+	}
+}
+
+// In Post Editor allow the separator to occupy the full width by ignoring (cancelling out) the global padding.
+.has-global-padding > .block-editor-block-list__zoom-out-separator,
+.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
+	max-width: none;
+	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
+	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+}
+
+// This only works in Firefox, Chrome and Safari don't accept a custom cursor
+// during drag.
+.is-dragging {
+	cursor: grabbing;
+}
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 2193cedcf1c108..2d91108ccb4123 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,9 +19,9 @@ import {
 } from '@wordpress/compose';
 import {
 	createContext,
-	useState,
 	useMemo,
 	useCallback,
+	useEffect,
 } from '@wordpress/element';
 
 /**
@@ -31,37 +31,33 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
-import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
-import BlockToolsBackCompat from '../block-tools/back-compat';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
 import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
-
-const elementContext = createContext();
+import { useTypingObserver } from '../observe-typing';
+import { ZoomOutSeparator } from './zoom-out-separator';
+import { unlock } from '../../lock-unlock';
 
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetEditorMode } =
-				select( blockEditorStore );
+	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+		useSelect( ( select ) => {
+			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+				unlock( select( blockEditorStore ) );
 			const { outlineMode, focusMode } = getSettings();
 			return {
-				isOutlineMode: outlineMode,
+				isOutlineMode: outlineMode && ! isTyping(),
 				isFocusMode: focusMode,
-				editorMode: __unstableGetEditorMode(),
+				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -105,59 +101,120 @@ function Root( { className, ...settings } ) {
 			ref: useMergeRefs( [
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
-				setElement,
+				useTypingObserver(),
 			] ),
-			className: classnames( 'is-root-container', className, {
+			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings
 	);
 	return (
-		<elementContext.Provider value={ element }>
-			<IntersectionObserver.Provider value={ intersectionObserver }>
-				<div { ...innerBlocksProps } />
-			</IntersectionObserver.Provider>
-		</elementContext.Provider>
+		<IntersectionObserver.Provider value={ intersectionObserver }>
+			<div { ...innerBlocksProps } />
+			{ !! temporarilyEditingAsBlocks && (
+				<StopEditingAsBlocksOnOutsideSelect
+					clientId={ temporarilyEditingAsBlocks }
+				/>
+			) }
+		</IntersectionObserver.Provider>
+	);
+}
+
+function StopEditingAsBlocksOnOutsideSelect( { clientId } ) {
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const isBlockOrDescendantSelected = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true )
+			);
+		},
+		[ clientId ]
 	);
+	useEffect( () => {
+		if ( ! isBlockOrDescendantSelected ) {
+			stopEditingAsBlocks( clientId );
+		}
+	}, [ isBlockOrDescendantSelected, clientId, stopEditingAsBlocks ] );
+	return null;
 }
 
 export default function BlockList( settings ) {
-	usePreParsePatterns();
 	return (
-		<BlockToolsBackCompat>
-			<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
-				<Root { ...settings } />
-			</BlockEditContextProvider>
-		</BlockToolsBackCompat>
+		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
+			<Root { ...settings } />
+		</BlockEditContextProvider>
 	);
 }
 
-BlockList.__unstableElementContext = elementContext;
+const EMPTY_ARRAY = [];
+const EMPTY_SET = new Set();
 
 function Items( {
 	placeholder,
 	rootClientId,
-	renderAppender,
+	renderAppender: CustomAppender,
 	__experimentalAppenderTagName,
-	__experimentalLayout: layout = defaultLayout,
+	layout = defaultLayout,
 } ) {
-	const { order, selectedBlocks, visibleBlocks } = useSelect(
+	// Avoid passing CustomAppender to useSelect because it could be a new
+	// function on every render.
+	const hasAppender = CustomAppender !== false;
+	const hasCustomAppender = !! CustomAppender;
+	const {
+		order,
+		isZoomOut,
+		selectedBlocks,
+		visibleBlocks,
+		shouldRenderAppender,
+	} = useSelect(
 		( select ) => {
 			const {
+				getSettings,
 				getBlockOrder,
+				getSelectedBlockClientId,
 				getSelectedBlockClientIds,
 				__unstableGetVisibleBlocks,
-			} = select( blockEditorStore );
+				getTemplateLock,
+				getBlockEditingMode,
+				isSectionBlock,
+				isZoomOut: _isZoomOut,
+			} = unlock( select( blockEditorStore ) );
+
+			const _order = getBlockOrder( rootClientId );
+
+			if ( getSettings().isPreviewMode ) {
+				return {
+					order: _order,
+					selectedBlocks: EMPTY_ARRAY,
+					visibleBlocks: EMPTY_SET,
+				};
+			}
+
+			const selectedBlockClientId = getSelectedBlockClientId();
 			return {
-				order: getBlockOrder( rootClientId ),
+				order: _order,
 				selectedBlocks: getSelectedBlockClientIds(),
 				visibleBlocks: __unstableGetVisibleBlocks(),
+				isZoomOut: _isZoomOut(),
+				shouldRenderAppender:
+					! isSectionBlock( rootClientId ) &&
+					getBlockEditingMode( rootClientId ) !== 'disabled' &&
+					! getTemplateLock( rootClientId ) &&
+					hasAppender &&
+					! _isZoomOut() &&
+					( hasCustomAppender ||
+						rootClientId === selectedBlockClientId ||
+						( ! rootClientId &&
+							! selectedBlockClientId &&
+							! _order.length ) ),
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, hasAppender, hasCustomAppender ]
 	);
 
 	return (
@@ -172,18 +229,34 @@ function Items( {
 						! selectedBlocks.includes( clientId )
 					}
 				>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="top"
+						/>
+					) }
 					<BlockListBlock
 						rootClientId={ rootClientId }
 						clientId={ clientId }
 					/>
+					{ isZoomOut && (
+						<ZoomOutSeparator
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+							position="bottom"
+						/>
+					) }
 				</AsyncModeProvider>
 			) ) }
 			{ order.length < 1 && placeholder }
-			<BlockListAppender
-				tagName={ __experimentalAppenderTagName }
-				rootClientId={ rootClientId }
-				renderAppender={ renderAppender }
-			/>
+			{ shouldRenderAppender && (
+				<BlockListAppender
+					tagName={ __experimentalAppenderTagName }
+					rootClientId={ rootClientId }
+					CustomAppender={ CustomAppender }
+				/>
+			) }
 		</LayoutProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index b562daedcf30cd..830b7ffec02f4d 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -1,18 +1,16 @@
 /**
  * External dependencies
  */
-import { View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, Pressable } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { Component, createContext } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { useRef, useState, useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
 	KeyboardAwareFlatList,
-	ReadableContentView,
 	WIDE_ALIGNMENTS,
 	alignmentHelpers,
 } from '@wordpress/components';
@@ -27,24 +25,16 @@ import BlockListItem from './block-list-item';
 import BlockListItemCell from './block-list-item-cell';
 import {
 	BlockListProvider,
-	BlockListConsumer,
 	DEFAULT_BLOCK_LIST_CONTEXT,
 } from './block-list-context';
 import { BlockDraggableWrapper } from '../block-draggable';
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 import { store as blockEditorStore } from '../../store';
 
-export const OnCaretVerticalPositionChange = createContext();
 const identity = ( x ) => x;
 
 const stylesMemo = {};
-const getStyles = (
-	isRootList,
-	isStackedHorizontally,
-	horizontalAlignment
-) => {
-	if ( isRootList ) {
-		return;
-	}
+const getStyles = ( isStackedHorizontally, horizontalAlignment ) => {
 	const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`;
 	if ( stylesMemo[ styleName ] ) {
 		return stylesMemo[ styleName ];
@@ -58,94 +48,116 @@ const getStyles = (
 	return computedStyles;
 };
 
-export class BlockList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.extraData = {
-			parentWidth: this.props.parentWidth,
-			renderFooterAppender: this.props.renderFooterAppender,
-			renderAppender: this.props.renderAppender,
-			onDeleteBlock: this.props.onDeleteBlock,
-			contentStyle: this.props.contentStyle,
-		};
-		this.renderItem = this.renderItem.bind( this );
-		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange =
-			this.onCaretVerticalPositionChange.bind( this );
-		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
-		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
-		this.shouldFlatListPreventAutomaticScroll =
-			this.shouldFlatListPreventAutomaticScroll.bind( this );
-		this.shouldShowInnerBlockAppender =
-			this.shouldShowInnerBlockAppender.bind( this );
-		this.renderEmptyList = this.renderEmptyList.bind( this );
-		this.getExtraData = this.getExtraData.bind( this );
-		this.getCellRendererComponent =
-			this.getCellRendererComponent.bind( this );
-
-		this.onLayout = this.onLayout.bind( this );
-
-		this.state = {
-			blockWidth: this.props.blockWidth || 0,
-		};
-	}
+export default function BlockList( {
+	blockWidth: initialBlockWidth,
+	contentResizeMode,
+	contentStyle,
+	filterInnerBlocks,
+	gridProperties,
+	header,
+	horizontal,
+	horizontalAlignment,
+	marginHorizontal = styles.defaultBlock.marginLeft,
+	marginVertical = styles.defaultBlock.marginTop,
+	onAddBlock,
+	onDeleteBlock,
+	orientation,
+	parentWidth,
+	renderAppender,
+	renderFooterAppender,
+	rootClientId,
+	withFooter = true,
+} ) {
+	const {
+		blockClientIds,
+		blockCount,
+		blockInsertionPointIsVisible,
+		isReadOnly,
+		isRootList,
+		isFloatingToolbarVisible,
+		isStackedHorizontally,
+		maxWidth,
+		isRTL,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockCount,
+				getBlockHierarchyRootClientId,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				isBlockInsertionPointVisible,
+				getSettings,
+			} = select( blockEditorStore );
 
-	addBlockToEndOfPost( newBlock ) {
-		this.props.insertBlock( newBlock, this.props.blockCount );
-	}
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const rootBlockId = getBlockHierarchyRootClientId(
+				selectedBlockClientId
+			);
 
-	onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
-		KeyboardAwareFlatList.handleCaretVerticalPositionChange(
-			this.scrollViewRef,
-			targetId,
-			caretY,
-			previousCaretY
-		);
-	}
+			let blockOrder = getBlockOrder( rootClientId );
+			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
+			if ( filterInnerBlocks ) {
+				blockOrder = filterInnerBlocks( blockOrder );
+			}
 
-	scrollViewInnerRef( ref ) {
-		this.scrollViewRef = ref;
-	}
+			const {
+				isRTL: isRTLSetting,
+				maxWidth: maxWidthSetting,
+				readOnly,
+			} = getSettings();
 
-	shouldFlatListPreventAutomaticScroll() {
-		return this.props.isBlockInsertionPointVisible;
-	}
+			return {
+				blockClientIds: blockOrder,
+				blockCount: getBlockCount(),
+				blockInsertionPointIsVisible:
+					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+				isReadOnly: readOnly,
+				isRootList: rootClientId === undefined,
+				isFloatingToolbarVisible:
+					!! selectedBlockClientId && !! getBlockCount( rootBlockId ),
+				isStackedHorizontally: orientation === 'horizontal',
+				maxWidth: maxWidthSetting,
+				isRTL: isRTLSetting,
+			};
+		},
+		[ filterInnerBlocks, orientation, rootClientId ]
+	);
 
-	shouldShowInnerBlockAppender() {
-		const { blockClientIds, renderAppender } = this.props;
-		return renderAppender && blockClientIds.length > 0;
-	}
+	const { insertBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 
-	renderEmptyList() {
-		return (
-			<EmptyListComponentCompose
-				rootClientId={ this.props.rootClientId }
-				renderAppender={ this.props.renderAppender }
-				renderFooterAppender={ this.props.renderFooterAppender }
-			/>
-		);
-	}
+	const extraData = useRef( {
+		parentWidth,
+		renderFooterAppender,
+		renderAppender,
+		onDeleteBlock,
+		contentStyle,
+	} );
 
-	getExtraData() {
-		const {
-			parentWidth,
-			renderFooterAppender,
-			onDeleteBlock,
-			contentStyle,
-			renderAppender,
-			gridProperties,
-		} = this.props;
-		const { blockWidth } = this.state;
+	const [ blockWidth, setBlockWidth ] = useState( initialBlockWidth || 0 );
+
+	const addBlockToEndOfPost = ( newBlock ) => {
+		insertBlock( newBlock, blockCount );
+	};
+
+	const scrollRef = useRef( null );
+
+	const shouldFlatListPreventAutomaticScroll = () =>
+		blockInsertionPointIsVisible;
+
+	const shouldShowInnerBlockAppender = () =>
+		renderAppender && blockClientIds.length > 0;
+
+	const getExtraData = () => {
 		if (
-			this.extraData.parentWidth !== parentWidth ||
-			this.extraData.renderFooterAppender !== renderFooterAppender ||
-			this.extraData.onDeleteBlock !== onDeleteBlock ||
-			this.extraData.contentStyle !== contentStyle ||
-			this.extraData.renderAppender !== renderAppender ||
-			this.extraData.blockWidth !== blockWidth ||
-			this.extraData.gridProperties !== gridProperties
+			extraData.current.parentWidth !== parentWidth ||
+			extraData.current.renderFooterAppender !== renderFooterAppender ||
+			extraData.current.onDeleteBlock !== onDeleteBlock ||
+			extraData.current.contentStyle !== contentStyle ||
+			extraData.current.renderAppender !== renderAppender ||
+			extraData.current.blockWidth !== blockWidth ||
+			extraData.current.gridProperties !== gridProperties
 		) {
-			this.extraData = {
+			extraData.current = {
 				parentWidth,
 				renderFooterAppender,
 				onDeleteBlock,
@@ -155,194 +167,21 @@ export class BlockList extends Component {
 				gridProperties,
 			};
 		}
-		return this.extraData;
-	}
-
-	getCellRendererComponent( { children, item, onLayout } ) {
-		const { rootClientId } = this.props;
-		return (
-			<BlockListItemCell
-				children={ children }
-				clientId={ item }
-				onLayout={ onLayout }
-				rootClientId={ rootClientId }
-			/>
-		);
-	}
+		return extraData.current;
+	};
 
-	onLayout( { nativeEvent } ) {
+	const onLayout = ( { nativeEvent } ) => {
 		const { layout } = nativeEvent;
-		const { blockWidth } = this.state;
-		const { isRootList, maxWidth } = this.props;
 
 		const layoutWidth = Math.floor( layout.width );
 		if ( isRootList && blockWidth !== layoutWidth ) {
-			this.setState( {
-				blockWidth: Math.min( layoutWidth, maxWidth ),
-			} );
+			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
 		} else if ( ! isRootList && ! blockWidth ) {
-			this.setState( { blockWidth: Math.min( layoutWidth, maxWidth ) } );
+			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
 		}
-	}
-
-	render() {
-		const { isRootList, isRTL } = this.props;
-		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-		const blockList = isRootList ? (
-			<BlockListProvider
-				value={ {
-					...DEFAULT_BLOCK_LIST_CONTEXT,
-					scrollRef: this.scrollViewRef,
-				} }
-			>
-				<BlockDraggableWrapper isRTL={ isRTL }>
-					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
-				</BlockDraggableWrapper>
-			</BlockListProvider>
-		) : (
-			<BlockListConsumer>
-				{ ( { scrollRef } ) =>
-					this.renderList( {
-						parentScrollRef: scrollRef,
-					} )
-				}
-			</BlockListConsumer>
-		);
-
-		return (
-			<OnCaretVerticalPositionChange.Provider
-				value={ this.onCaretVerticalPositionChange }
-			>
-				{ blockList }
-			</OnCaretVerticalPositionChange.Provider>
-		);
-	}
-
-	renderList( extraProps = {} ) {
-		const {
-			clearSelectedBlock,
-			blockClientIds,
-			title,
-			header,
-			isReadOnly,
-			isRootList,
-			horizontal,
-			marginVertical = styles.defaultBlock.marginTop,
-			marginHorizontal = styles.defaultBlock.marginLeft,
-			isFloatingToolbarVisible,
-			isStackedHorizontally,
-			horizontalAlignment,
-			contentResizeMode,
-			blockWidth,
-		} = this.props;
-		const { parentScrollRef, onScroll } = extraProps;
-
-		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
-			styles;
-
-		const containerStyle = {
-			flex: isRootList ? 1 : 0,
-			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
-			marginVertical: isRootList ? 0 : -marginVertical,
-			marginHorizontal: isRootList ? 0 : -marginHorizontal,
-		};
-
-		const isContentStretch = contentResizeMode === 'stretch';
-		const isMultiBlocks = blockClientIds.length > 1;
-		const { isWider } = alignmentHelpers;
-
-		return (
-			<View
-				style={ containerStyle }
-				onAccessibilityEscape={ clearSelectedBlock }
-				onLayout={ this.onLayout }
-				testID="block-list-wrapper"
-			>
-				<KeyboardAwareFlatList
-					{ ...( Platform.OS === 'android'
-						? { removeClippedSubviews: false }
-						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
-					accessibilityLabel="block-list"
-					autoScroll={ this.props.autoScroll }
-					innerRef={ ( ref ) => {
-						this.scrollViewInnerRef( parentScrollRef || ref );
-					} }
-					extraScrollHeight={
-						blockToolbar.height + blockBorder.width
-					}
-					inputAccessoryViewHeight={
-						headerToolbar.height +
-						( isFloatingToolbarVisible
-							? floatingToolbar.height
-							: 0 )
-					}
-					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ [
-						{ flex: isRootList ? 1 : 0 },
-						! isRootList && styles.overflowVisible,
-					] }
-					extraData={ this.getExtraData() }
-					scrollEnabled={ isRootList }
-					contentContainerStyle={ [
-						horizontal && styles.horizontalContentContainer,
-						isWider( blockWidth, 'medium' ) &&
-							( isContentStretch && isMultiBlocks
-								? styles.horizontalContentContainerStretch
-								: styles.horizontalContentContainerCenter ),
-					] }
-					style={ getStyles(
-						isRootList,
-						isStackedHorizontally,
-						horizontalAlignment
-					) }
-					data={ blockClientIds }
-					keyExtractor={ identity }
-					renderItem={ this.renderItem }
-					CellRendererComponent={ this.getCellRendererComponent }
-					shouldPreventAutomaticScroll={
-						this.shouldFlatListPreventAutomaticScroll
-					}
-					title={ title }
-					ListHeaderComponent={ header }
-					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
-					ListFooterComponent={ this.renderBlockListFooter }
-					onScroll={ onScroll }
-				/>
-				{ this.shouldShowInnerBlockAppender() && (
-					<View
-						style={ {
-							marginHorizontal:
-								marginHorizontal -
-								styles.innerAppender.marginLeft,
-						} }
-					>
-						<BlockListAppender
-							rootClientId={ this.props.rootClientId }
-							renderAppender={ this.props.renderAppender }
-							showSeparator
-						/>
-					</View>
-				) }
-			</View>
-		);
-	}
-
-	renderItem( { item: clientId } ) {
-		const {
-			contentResizeMode,
-			contentStyle,
-			onAddBlock,
-			onDeleteBlock,
-			rootClientId,
-			isStackedHorizontally,
-			blockClientIds,
-			parentWidth,
-			marginVertical = styles.defaultBlock.marginTop,
-			marginHorizontal = styles.defaultBlock.marginLeft,
-			gridProperties,
-		} = this.props;
-		const { blockWidth } = this.state;
+	};
 
+	const renderItem = ( { item: clientId, index } ) => {
 		// Extracting the grid item properties here to avoid
 		// re-renders in the blockListItem component.
 		const isGridItem = !! gridProperties;
@@ -353,6 +192,7 @@ export class BlockList extends Component {
 		};
 		return (
 			<BlockListItem
+				index={ index }
 				isStackedHorizontally={ isStackedHorizontally }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
@@ -363,138 +203,197 @@ export class BlockList extends Component {
 				marginVertical={ marginVertical }
 				marginHorizontal={ marginHorizontal }
 				onDeleteBlock={ onDeleteBlock }
-				shouldShowInnerBlockAppender={
-					this.shouldShowInnerBlockAppender
-				}
+				shouldShowInnerBlockAppender={ shouldShowInnerBlockAppender }
 				blockWidth={ blockWidth }
 				isGridItem={ isGridItem }
 				{ ...gridItemProps }
 			/>
 		);
-	}
-
-	renderBlockListFooter() {
-		const paragraphBlock = createBlock( 'core/paragraph' );
-		const {
-			isReadOnly,
-			withFooter = true,
-			renderFooterAppender,
-		} = this.props;
-
-		if ( ! isReadOnly && withFooter ) {
-			return (
+	};
+
+	const { blockToolbar, floatingToolbar } = styles;
+
+	const containerStyle = {
+		flex: isRootList ? 1 : 0,
+		// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
+		marginVertical: isRootList ? 0 : -marginVertical,
+		marginHorizontal: isRootList ? 0 : -marginHorizontal,
+	};
+
+	const isContentStretch = contentResizeMode === 'stretch';
+	const isMultiBlocks = blockClientIds.length > 1;
+	const { isWider } = alignmentHelpers;
+	const extraScrollHeight =
+		blockToolbar.height +
+		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
+
+	return (
+		<View
+			style={ containerStyle }
+			onAccessibilityEscape={ clearSelectedBlock }
+			onLayout={ onLayout }
+			testID="block-list-wrapper"
+		>
+			{ isRootList ? (
+				<BlockListProvider
+					value={ {
+						...DEFAULT_BLOCK_LIST_CONTEXT,
+						scrollRef: scrollRef.current,
+					} }
+				>
+					<BlockDraggableWrapper isRTL={ isRTL }>
+						{ ( { onScroll } ) => (
+							<KeyboardAwareFlatList
+								accessibilityLabel="block-list"
+								ref={ scrollRef }
+								extraScrollHeight={ extraScrollHeight }
+								keyboardShouldPersistTaps="always"
+								extraData={ getExtraData() }
+								scrollEnabled={ isRootList }
+								contentContainerStyle={ [
+									horizontal &&
+										styles.horizontalContentContainer,
+									isWider( blockWidth, 'medium' ) &&
+										( isContentStretch && isMultiBlocks
+											? styles.horizontalContentContainerStretch
+											: styles.horizontalContentContainerCenter ),
+								] }
+								data={ blockClientIds }
+								keyExtractor={ identity }
+								renderItem={ renderItem }
+								CellRendererComponent={ BlockListItemCell }
+								shouldPreventAutomaticScroll={
+									shouldFlatListPreventAutomaticScroll
+								}
+								ListHeaderComponent={ header }
+								ListEmptyComponent={
+									! isReadOnly && (
+										<EmptyList
+											orientation={ orientation }
+											rootClientId={ rootClientId }
+											renderAppender={ renderAppender }
+											renderFooterAppender={
+												renderFooterAppender
+											}
+										/>
+									)
+								}
+								ListFooterComponent={
+									<Footer
+										addBlockToEndOfPost={
+											addBlockToEndOfPost
+										}
+										isReadOnly={ isReadOnly }
+										renderFooterAppender={
+											renderFooterAppender
+										}
+										withFooter={ withFooter }
+									/>
+								}
+								onScroll={ onScroll }
+							/>
+						) }
+					</BlockDraggableWrapper>
+				</BlockListProvider>
+			) : (
 				<>
-					<TouchableWithoutFeedback
-						accessibilityLabel={ __( 'Add paragraph block' ) }
-						testID={ __( 'Add paragraph block' ) }
-						onPress={ () => {
-							this.addBlockToEndOfPost( paragraphBlock );
-						} }
-					>
-						<View style={ styles.blockListFooter } />
-					</TouchableWithoutFeedback>
+					{ blockClientIds.length > 0 ? (
+						<View style={ [ { flex: 0 }, styles.overflowVisible ] }>
+							<View
+								style={ [
+									...getStyles(
+										isStackedHorizontally,
+										horizontalAlignment
+									),
+									horizontal &&
+										styles.horizontalContentContainer,
+								] }
+							>
+								{ blockClientIds.map(
+									( currentClientId, index ) => {
+										return (
+											<View key={ currentClientId }>
+												{ renderItem( {
+													item: currentClientId,
+													index,
+												} ) }
+											</View>
+										);
+									}
+								) }
+								<Footer
+									addBlockToEndOfPost={ addBlockToEndOfPost }
+									isReadOnly={ isReadOnly }
+									renderFooterAppender={
+										renderFooterAppender
+									}
+									withFooter={ withFooter }
+								/>
+							</View>
+						</View>
+					) : (
+						<EmptyList
+							orientation={ orientation }
+							rootClientId={ rootClientId }
+							renderAppender={ renderAppender }
+							renderFooterAppender={ renderFooterAppender }
+						/>
+					) }
 				</>
-			);
-		} else if ( renderFooterAppender ) {
-			return renderFooterAppender();
-		}
-		return null;
-	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { rootClientId, orientation, filterInnerBlocks } ) => {
-			const {
-				getBlockCount,
-				getBlockOrder,
-				getSelectedBlockClientId,
-				isBlockInsertionPointVisible,
-				getSettings,
-			} = select( blockEditorStore );
-
-			const isStackedHorizontally = orientation === 'horizontal';
-
-			const selectedBlockClientId = getSelectedBlockClientId();
-
-			let blockClientIds = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-			if ( filterInnerBlocks ) {
-				blockClientIds = filterInnerBlocks( blockClientIds );
-			}
-
-			const { maxWidth } = getSettings();
-			const isReadOnly = getSettings().readOnly;
-
-			const blockCount = getBlockCount();
-			const hasRootInnerBlocks = !! blockCount;
-
-			const isFloatingToolbarVisible =
-				!! selectedBlockClientId && hasRootInnerBlocks;
-			const isRTL = getSettings().isRTL;
-
-			return {
-				blockClientIds,
-				blockCount,
-				isBlockInsertionPointVisible:
-					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
-				isReadOnly,
-				isRootList: rootClientId === undefined,
-				isFloatingToolbarVisible,
-				isStackedHorizontally,
-				maxWidth,
-				isRTL,
-			};
-		}
-	),
-	withDispatch( ( dispatch ) => {
-		const { insertBlock, replaceBlock, clearSelectedBlock } =
-			dispatch( blockEditorStore );
-
-		return {
-			clearSelectedBlock,
-			insertBlock,
-			replaceBlock,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( BlockList );
-
-class EmptyListComponent extends Component {
-	render() {
-		const {
-			shouldShowInsertionPoint,
-			rootClientId,
-			renderAppender,
-			renderFooterAppender,
-		} = this.props;
-
-		if ( renderFooterAppender || renderAppender === false ) {
-			return null;
-		}
-
-		return (
-			<View style={ styles.defaultAppender }>
-				<ReadableContentView
-					align={
-						renderAppender
-							? WIDE_ALIGNMENTS.alignments.full
-							: undefined
-					}
+			) }
+			{ shouldShowInnerBlockAppender() && (
+				<View
+					style={ {
+						marginHorizontal:
+							marginHorizontal - styles.innerAppender.marginLeft,
+					} }
 				>
 					<BlockListAppender
 						rootClientId={ rootClientId }
 						renderAppender={ renderAppender }
-						showSeparator={ shouldShowInsertionPoint }
+						showSeparator
 					/>
-				</ReadableContentView>
-			</View>
+				</View>
+			) }
+		</View>
+	);
+}
+
+function Footer( {
+	addBlockToEndOfPost,
+	isReadOnly,
+	renderFooterAppender,
+	withFooter,
+} ) {
+	const onAddParagraphBlock = useCallback( () => {
+		const paragraphBlock = createBlock( 'core/paragraph' );
+		addBlockToEndOfPost( paragraphBlock );
+	}, [ addBlockToEndOfPost ] );
+
+	if ( ! isReadOnly && withFooter ) {
+		return (
+			<Pressable
+				accessibilityLabel={ __( 'Add paragraph block' ) }
+				testID={ __( 'Add paragraph block' ) }
+				onPress={ onAddParagraphBlock }
+			>
+				<View style={ styles.blockListFooter } />
+			</Pressable>
 		);
+	} else if ( renderFooterAppender ) {
+		return <View>{ renderFooterAppender() }</View>;
 	}
+
+	return null;
 }
 
-const EmptyListComponentCompose = compose( [
-	withSelect( ( select, { rootClientId, orientation } ) => {
+function EmptyList( {
+	orientation,
+	renderAppender,
+	renderFooterAppender,
+	rootClientId,
+} ) {
+	const { shouldShowInsertionPoint } = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
 			getBlockInsertionPoint,
@@ -505,17 +404,34 @@ const EmptyListComponentCompose = compose( [
 		const blockClientIds = getBlockOrder( rootClientId );
 		const insertionPoint = getBlockInsertionPoint();
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-		const shouldShowInsertionPoint =
-			! isStackedHorizontally &&
-			blockInsertionPointIsVisible &&
-			insertionPoint.rootClientId === rootClientId &&
-			// If list is empty, show the insertion point (via the default appender)
-			( blockClientIds.length === 0 ||
-				// Or if the insertion point is right before the denoted block.
-				! blockClientIds[ insertionPoint.index ] );
 
 		return {
-			shouldShowInsertionPoint,
+			shouldShowInsertionPoint:
+				! isStackedHorizontally &&
+				blockInsertionPointIsVisible &&
+				insertionPoint.rootClientId === rootClientId &&
+				// If list is empty, show the insertion point (via the default appender)
+				( blockClientIds.length === 0 ||
+					// Or if the insertion point is right before the denoted block.
+					! blockClientIds[ insertionPoint.index ] ),
 		};
-	} ),
-] )( EmptyListComponent );
+	} );
+	const align = renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined;
+	const [ wrapperStyles ] = useEditorWrapperStyles( { align } );
+
+	if ( renderFooterAppender || renderAppender === false ) {
+		return null;
+	}
+
+	const containerStyles = [ styles.defaultAppender, wrapperStyles ];
+
+	return (
+		<View style={ containerStyles }>
+			<BlockListAppender
+				rootClientId={ rootClientId }
+				renderAppender={ renderAppender }
+				showSeparator={ shouldShowInsertionPoint }
+			/>
+		</View>
+	);
+}
diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/packages/block-editor/src/components/block-list/insertion-point.native.js
index 5f19827ba6840e..2d86ea3a8ecaad 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.native.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.native.js
@@ -14,7 +14,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+const BlockInsertionPoint = ( { getStylesFromColorScheme, testID } ) => {
 	const lineStyle = getStylesFromColorScheme(
 		styles.lineStyleAddHere,
 		styles.lineStyleAddHereDark
@@ -25,7 +25,7 @@ const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
 	);
 
 	return (
-		<View style={ styles.containerStyleAddHere }>
+		<View style={ styles.containerStyleAddHere } testID={ testID }>
 			<View style={ lineStyle }></View>
 			<Text style={ labelStyle }>{ __( 'ADD BLOCK HERE' ) }</Text>
 			<View style={ lineStyle }></View>
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index d7a9113ebfa0f3..a7de26cc5a0fa8 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -7,7 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export const defaultLayout = { type: 'default' };
 
@@ -27,7 +27,7 @@ export function useLayout() {
 
 export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {
diff --git a/packages/block-editor/src/components/block-list/private-block-context.js b/packages/block-editor/src/components/block-list/private-block-context.js
new file mode 100644
index 00000000000000..4ff3caa43a7241
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/private-block-context.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const PrivateBlockContext = createContext( {} );
diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
index 6ff09277e9ea54..78f7b47067c5a3 100644
--- a/packages/block-editor/src/components/block-list/style.native.scss
+++ b/packages/block-editor/src/components/block-list/style.native.scss
@@ -66,12 +66,12 @@
 }
 
 .defaultBlock {
-	margin: $block-edge-to-content;
+	margin: $block-edge-to-content * 0.5 $block-edge-to-content;
 }
 
 .defaultAppender {
-	margin-top: $block-edge-to-content;
-	margin-bottom: $block-edge-to-content;
+	margin-top: $grid-unit;
+	margin-bottom: $grid-unit;
 	width: 100%;
 }
 
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
deleted file mode 100644
index 14f85840887be2..00000000000000
--- a/packages/block-editor/src/components/block-list/style.scss
+++ /dev/null
@@ -1,451 +0,0 @@
-// This remove the margins set here: https://github.com/WordPress/gutenberg/blob/17e5c2d870d84fb6de48dcd5bc3c38cd0c0fb0d0/packages/block-library/src/editor.scss#L56
-// It removes the margins around blocks when a BlockPreview is rendered in the block style selector
-.block-editor-block-styles .block-editor-block-list__block {
-	margin: 0;
-}
-
-/**
- * Cross-Block Selection
- */
-
-@keyframes selection-overlay__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 0.4;
-	}
-}
-
-// Note to developers refactoring this, please test navigation mode, and
-// multi selection and hovering the block switcher to highlight the block.
-// Also be sure to test partial selections in Safari, as it draws the
-// selection marker with an entirely different model than Blink.
-.block-editor-block-list__layout {
-	position: relative;
-
-	// Hide selections on this element, otherwise Safari will include it stacked
-	// under your actual selection.
-	&::selection {
-		background: transparent;
-	}
-
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
-
-	// Block multi selection
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-		// Apply a rounded radius to the entire block.
-		border-radius: $radius-block-ui;
-		overflow: hidden;
-
-		// Hide the native selection indicator, for the selection, and children.
-		&::selection,
-		& ::selection {
-			background: transparent;
-		}
-
-		// Draw a spot color overlay.
-		&::after {
-			content: "";
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			background: var(--wp-admin-theme-color);
-			opacity: 0.4;
-			border-radius: $radius-block-ui;
-
-			// Animate.
-			animation: selection-overlay__fade-in-animation 0.1s ease-out;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
-
-			// Show outline in high contrast mode.
-			outline: 2px solid transparent;
-		}
-	}
-
-	// Block highlight, and navigation mode, not focus.
-	// By not using a pseudo element, we can limit ourselves to only
-	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
-	// would require the opacity-changing overlay to be on ::before.
-	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Show outline in high contrast mode.
-		outline: 2px solid transparent;
-	}
-
-	// Block focus.
-	.block-editor-block-list__block:not([contenteditable]):focus {
-		outline: none;
-
-		// We're using a pseudo element to overflow placeholder borders
-		// and any border inside the block itself.
-		&::after {
-			content: "";
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			top: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-
-	// Moving blocks using keyboard (Ellipsis > Move).
-	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-		box-shadow: none;
-		outline: none;
-
-		&::after {
-			content: "";
-			position: absolute;
-			z-index: 0;
-			pointer-events: none;
-			transition:
-				border-color 0.1s linear,
-				border-style 0.1s linear,
-				box-shadow 0.1s linear;
-			right: 0;
-			left: 0;
-			top: -$default-block-margin * 0.5;
-			border-radius: $radius-block-ui;
-			border-top: 4px solid $gray-400;
-		}
-	}
-
-	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::after {
-			border-color: var(--wp-admin-theme-color);
-		}
-	}
-
-	// Ensure an accurate partial text selection.
-	// To do this, we disable text selection on the main container, then re-enable it only on the
-	// elements that actually get selected.
-	// To keep in mind: user-select is currently inherited to all nodes inside.
-	.has-multi-selection & {
-		user-select: none;
-	}
-
-	// Re-enable it on components inside.
-	[class^="components-"] {
-		user-select: text;
-	}
-}
-
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
-	// Should be invisible but not unfocusable.
-	opacity: 0;
-	font-size: 1px;
-	height: 1px;
-	padding: 0;
-}
-
-.is-content-locked {
-	.block-editor-block-list__block {
-		pointer-events: none;
-	}
-	.is-content-block {
-		pointer-events: initial;
-	}
-}
-
-.block-editor-block-list__layout .block-editor-block-list__block {
-	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
-	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
-	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
-	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
-	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
-	position: relative;
-
-	// Re-enable text-selection on editable blocks.
-	user-select: text;
-
-	// Break long strings of text without spaces so they don't overflow the block.
-	overflow-wrap: break-word;
-
-	.reusable-block-edit-panel * {
-		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
-	}
-
-	/**
-	 * Notices
-	 */
-	.components-placeholder .components-with-notices-ui {
-		margin: -10px 0 12px 0;
-	}
-
-	.components-with-notices-ui {
-		margin: 0 0 12px 0;
-		width: 100%;
-
-		.components-notice {
-			margin-left: 0;
-			margin-right: 0;
-
-			.components-notice__content {
-				font-size: $default-font-size;
-			}
-		}
-	}
-
-	// Warnings
-	&.has-warning {
-		min-height: $grid-unit-60;
-
-		// When a block has a warning, you shouldn't be able to manipulate the contents.
-		> * {
-			pointer-events: none;
-			user-select: none;
-		}
-
-		// Allow the warning action buttons to be manipulable.
-		.block-editor-warning {
-			pointer-events: all;
-		}
-	}
-
-	// Scrim overlay.
-	&.has-warning::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: $radius-block-ui;
-		background-color: rgba($white, 0.4);
-	}
-
-	// Avoid conflict with the multi-selection highlight color.
-	&.has-warning.is-multi-selected::after {
-		background-color: transparent;
-	}
-
-	// Reusable blocks clickthrough overlays.
-	&.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
-		// Remove only the top click overlay.
-		&::after {
-			display: none;
-		}
-
-		// Restore it for subsequent.
-		.block-editor-block-list__layout.has-overlay::after {
-			display: block;
-		}
-	}
-
-	// Reusable blocks parent border.
-	&.is-reusable.has-child-selected::after {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-
-	// Clear floats.
-	&[data-clear="true"] {
-		float: none;
-	}
-}
-
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
-	&.is-hovered {
-		cursor: default;
-
-		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width;
-		}
-	}
-
-	&.is-selected {
-		cursor: default;
-
-		&.rich-text {
-			cursor: unset;
-		}
-
-		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui;
-		}
-	}
-}
-
-// Spotlight mode. Fade out blocks unless they contain a selected block.
-.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-	opacity: 0.2;
-	transition: opacity 0.1s linear;
-	@include reduce-motion("transition");
-
-	// Nested blocks should never be faded. If the parent block is already faded
-	// out, it shouldn't be faded out more. If the parent block in not faded
-	// out, it shouldn't be faded out either because the block as a whole,
-	// including inner blocks, should be focused.
-	.block-editor-block-list__block,
-	&.is-selected,
-	&.is-multi-selected {
-		opacity: 1;
-	}
-}
-
-.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
-.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
-	&,
-	& .block-editor-block-list__block {
-		opacity: 1;
-	}
-}
-
-.wp-block[data-align="left"] > *,
-.wp-block[data-align="right"] > *,
-.wp-block.alignleft,
-.wp-block.alignright {
-	// Without z-index, won't be clickable as "above" adjacent content.
-	z-index: z-index("{core/image aligned left or right} .wp-block");
-}
-
-.wp-site-blocks > [data-align="left"] {
-	float: left;
-	margin-right: 2em;
-}
-
-.wp-site-blocks > [data-align="right"] {
-	float: right;
-	margin-left: 2em;
-}
-
-.wp-site-blocks > [data-align="center"] {
-	justify-content: center;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-/**
- * In-Canvas Inserter
- */
-
-.block-editor-block-list .block-editor-inserter {
-	margin: $grid-unit-10;
-	cursor: move; // Fallback for IE/Edge < 14
-	cursor: grab;
-}
-
-@keyframes block-editor-inserter__toggle__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-// Hide the appender that sits at the end of block lists, when inside a nested block,
-// unless the block itself, or a parent, is selected.
-.wp-block .block-list-appender .block-editor-inserter__toggle {
-	animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
-}
-
-.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
-	display: none;
-
-	.block-editor-inserter__toggle {
-		opacity: 0;
-		transform: scale(0);
-	}
-}
-
-.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
-	display: block;
-	margin: 0;
-	padding: $grid-unit-15;
-	width: 100%;
-	border: none;
-	outline: none;
-	border-radius: 2px;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	line-height: 1.5;
-	transition: padding 0.2s linear;
-	@include reduce-motion("transition");
-
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-}
-
-
-/**
- * Warnings.
- */
-
-.block-editor-block-list__block .block-editor-warning {
-	z-index: z-index(".block-editor-warning");
-	position: relative;
-
-	&.block-editor-block-list__block-crash-warning {
-		// The block crash warning has no block preview underneath it.
-		// The lack of a preview combined with the negative margin that
-		// the warning normally has results in crashed blocks overlapping
-		// any blocks that come after them. Resetting the margin to `auto`
-		// solves this.
-		margin-bottom: auto;
-	}
-}
-
-/** Zoom Out mode styles **/
-.block-editor-iframe__body {
-	transition: all 0.3s;
-	transform-origin: top center;
-
-	&.is-zoomed-out {
-		margin: 100px 0;
-		transform: scale(0.45);
-
-		// Add a bit more space between the top level blocks.
-		.wp-site-blocks > * + * {
-			margin-block-start: 2.5rem;
-		}
-
-		> .block-list-appender {
-			display: none;
-		}
-	}
-}
diff --git a/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js
new file mode 100644
index 00000000000000..4cf4c0aec2ff0d
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+beforeEach( () => {
+	// Intentionally suppress the expected console errors and warnings to reduce
+	// noise in the test output.
+	jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+	jest.spyOn( console, 'warn' ).mockImplementation( () => {} );
+} );
+
+describe( 'Block invalid warning', () => {
+	it( 'shows invalid placeholder', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
+
+		// Assert
+		const warningElement = screen.getByText( /Problem displaying block./ );
+		expect( warningElement ).toBeVisible();
+	} );
+
+	it( 'recovers a block successfully', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+		expect( console ).toHaveErrored();
+		expect( console ).toHaveWarnedWith(
+			'Encountered unexpected attribute `styless`.'
+		);
+		// Act
+		fireEvent.press( screen.getByText( /Problem displaying block./ ) );
+		const spacerBlock = getBlock( screen, 'Spacer' );
+		fireEvent.press( spacerBlock );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+        "<!-- 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-list/test/block-outline.native.js b/packages/block-editor/src/components/block-list/test/block-outline.native.js
new file mode 100644
index 00000000000000..6e549542ad6672
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/test/block-outline.native.js
@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import BlockOutline from '../block-outline';
+
+describe( 'BlockOutline', () => {
+	describe( 'containing an unselected block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected={ false }
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a block with inner blocks', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+					hasInnerBlocks
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a design category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/group"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a text category block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/paragraph"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="text"
+						name="core/list"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a widget category block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="widgets"
+					name="core/latest-posts"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a spacer block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/spacer"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a button block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="design"
+					name="core/button"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+	} );
+
+	describe( 'containing a social link block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="embed"
+					name="core/social-link"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+
+		describe( 'when platform specific', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="embed"
+						name="core/social-link-amazon"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a media block', () => {
+		it( 'should not render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="media"
+					name="core/image"
+				/>
+			);
+
+			expect( screen.queryByTestId( 'block-outline' ) ).toBeNull();
+		} );
+
+		describe( 'with inner blocks', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/gallery"
+						hasInnerBlocks
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+
+			describe( 'when cover block', () => {
+				it( 'should not render an outline', async () => {
+					render(
+						<BlockOutline
+							isSelected
+							blockCategory="media"
+							name="core/cover"
+							hasInnerBlocks
+						/>
+					);
+
+					expect(
+						screen.queryByTestId( 'block-outline' )
+					).toBeNull();
+				} );
+			} );
+		} );
+
+		describe( 'when a file block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/file"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+
+		describe( 'when an audio block', () => {
+			it( 'should render an outline', async () => {
+				render(
+					<BlockOutline
+						isSelected
+						blockCategory="media"
+						name="core/audio"
+					/>
+				);
+
+				expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'containing a freeform block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/freeform"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'containing a missing block', () => {
+		it( 'should render an outline', async () => {
+			render(
+				<BlockOutline
+					isSelected
+					blockCategory="text"
+					name="core/missing"
+				/>
+			);
+
+			expect( screen.getByTestId( 'block-outline' ) ).toBeVisible();
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-list/test/index.native.js b/packages/block-editor/src/components/block-list/test/index.native.js
new file mode 100644
index 00000000000000..e8d6c8388f1306
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/test/index.native.js
@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	triggerBlockListLayout,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'BlockList', () => {
+	describe( 'when empty', () => {
+		beforeEach( async () => {
+			// Arrange
+			await initializeEditor();
+		} );
+
+		it( 'renders a post title', async () => {
+			// Assert
+			expect( screen.getByPlaceholderText( 'Add title' ) ).toBeTruthy();
+		} );
+
+		it( 'renders a block appender as a content placeholder', async () => {
+			// Act
+			const appender = screen.getByPlaceholderText( /Start writing/ );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+
+		it( 'renders an end-of-list paragraph appender', async () => {
+			// Act
+			const appender = screen.getByLabelText( 'Add paragraph block' );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'when not empty', () => {
+		it( 'renders a footer appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Social Icons' );
+			const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+			fireEvent.press( socialLinksBlock );
+			await triggerBlockListLayout( socialLinksBlock );
+
+			// Act
+			fireEvent.press(
+				within( socialLinksBlock ).getByTestId( 'appender-button' )
+			);
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
+			fireEvent.scroll( blockList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+			fireEvent.press( await screen.findByText( 'Amazon' ) );
+
+			// Assert
+			const amazonSettings = await screen.findByTestId(
+				'navigation-screen-LinkSettingsScreen'
+			);
+			expect( amazonSettings ).toBeVisible();
+		} );
+	} );
+
+	describe( 'for inner blocks', () => {
+		it( 'renders an inner block appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Group' );
+			const groupBlock = await getBlock( screen, 'Group' );
+			await triggerBlockListLayout( groupBlock );
+
+			// Assert
+			expect(
+				within( groupBlock ).getByTestId( 'appender-button' )
+			).toBeTruthy();
+		} );
+
+		describe( 'when a non-last block is selected', () => {
+			beforeEach( async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+			} );
+
+			it( 'renders an insertion point before the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-1' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+
+		describe( 'when the last block is selected', () => {
+			it( 'renders an insertion point before the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-after-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index ca6bb4355f52db..554adccdc22c9d 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -1,47 +1,36 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__unstableGetBlockProps as getBlockProps,
-	getBlockType,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { BlockListBlockContext } from '../block';
+import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
-import { useBlockClassNames } from './use-block-class-names';
-import { useBlockDefaultClassName } from './use-block-default-class-name';
-import { useBlockCustomClassName } from './use-block-custom-class-name';
-import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
-import { store as blockEditorStore } from '../../../store';
-import useBlockOverlayActive from '../../block-content-overlay';
-
-/**
- * If the block count exceeds the threshold, we disable the reordering animation
- * to avoid laginess.
- */
-const BLOCK_ANIMATION_THRESHOLD = 200;
+import { useScrollIntoView } from './use-scroll-into-view';
+import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
+import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -52,6 +41,32 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
  * also pass any other props through this hook, and they will be merged and
  * returned.
  *
+ * Use of this hook on the outermost element of a block is required if using API >= v2.
+ *
+ * @example
+ * ```js
+ * import { useBlockProps } from '@wordpress/block-editor';
+ *
+ * export default function Edit() {
+ *
+ *   const blockProps = useBlockProps( {
+ *     className: 'my-custom-class',
+ *     style: {
+ *       color: '#222222',
+ *       backgroundColor: '#eeeeee'
+ *     }
+ *   } )
+ *
+ *   return (
+ *	    <div { ...blockProps }>
+ *
+ *     </div>
+ *   )
+ * }
+ *
+ * ```
+ *
+ *
  * @param {Object}  props                    Optional. Props to pass to the element. Must contain
  *                                           the ref if one is defined.
  * @param {Object}  options                  Options for internal use only.
@@ -65,81 +80,63 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		className,
 		wrapperProps = {},
 		isAligned,
-	} = useContext( BlockListBlockContext );
-	const {
 		index,
 		mode,
 		name,
 		blockApiVersion,
 		blockTitle,
-		isPartOfSelection,
-		adjustScrolling,
-		enableAnimation,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockIndex,
-				getBlockMode,
-				getBlockName,
-				isTyping,
-				getGlobalBlockCount,
-				isBlockSelected,
-				isBlockMultiSelected,
-				isAncestorMultiSelected,
-				isFirstMultiSelectedBlock,
-			} = select( blockEditorStore );
-			const { getActiveBlockVariation } = select( blocksStore );
-			const isSelected = isBlockSelected( clientId );
-			const isPartOfMultiSelection =
-				isBlockMultiSelected( clientId ) ||
-				isAncestorMultiSelected( clientId );
-			const blockName = getBlockName( clientId );
-			const blockType = getBlockType( blockName );
-			const attributes = getBlockAttributes( clientId );
-			const match = getActiveBlockVariation( blockName, attributes );
-
-			return {
-				index: getBlockIndex( clientId ),
-				mode: getBlockMode( clientId ),
-				name: blockName,
-				blockApiVersion: blockType?.apiVersion || 1,
-				blockTitle: match?.title || blockType?.title,
-				isPartOfSelection: isSelected || isPartOfMultiSelection,
-				adjustScrolling:
-					isSelected || isFirstMultiSelectedBlock( clientId ),
-				enableAnimation:
-					! isTyping() &&
-					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
-			};
-		},
-		[ clientId ]
-	);
-
-	const hasOverlay = useBlockOverlayActive( clientId );
+		isSelected,
+		isSubtreeDisabled,
+		hasOverlay,
+		initialPosition,
+		blockEditingMode,
+		isHighlighted,
+		isMultiSelected,
+		isPartiallySelected,
+		isReusable,
+		isDragging,
+		hasChildSelected,
+		isEditingDisabled,
+		hasEditableOutline,
+		isTemporarilyEditingAsBlocks,
+		defaultClassName,
+		isSectionBlock,
+		canMove,
+	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
+	const ffDragRef = useFirefoxDraggableCompatibility();
 	const mergedRefs = useMergeRefs( [
 		props.ref,
-		useFocusFirstElement( clientId ),
+		useFocusFirstElement( { clientId, initialPosition } ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useEventHandlers( clientId ),
-		useNavModeExit( clientId ),
-		useIsHovered(),
+		useEventHandlers( { clientId, isSelected } ),
+		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
-		useMovingAnimation( {
-			isSelected: isPartOfSelection,
-			adjustScrolling,
-			enableAnimation,
-			triggerAnimationOnChange: index,
-		} ),
+		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
+		useFlashEditableBlocks( {
+			clientId,
+			isEnabled: isSectionBlock,
+		} ),
+		useScrollIntoView( { isSelected } ),
+		canMove ? ffDragRef : undefined,
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? {
+					'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
+					'--wp-admin-theme-color--rgb':
+						'var(--wp-block-synced-color--rgb)',
+			  }
+			: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -147,8 +144,19 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		);
 	}
 
+	let hasNegativeMargin = false;
+	if (
+		wrapperProps?.style?.marginTop?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginBottom?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginLeft?.charAt( 0 ) === '-' ||
+		wrapperProps?.style?.marginRight?.charAt( 0 ) === '-'
+	) {
+		hasNegativeMargin = true;
+	}
+
 	return {
-		tabIndex: 0,
+		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
+		draggable: canMove && ! hasChildSelected ? true : undefined,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,
@@ -158,21 +166,32 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
-		className: classnames(
-			// The wp-block className is important for editor styles.
-			classnames( 'block-editor-block-list__block', {
+		inert: isSubtreeDisabled ? 'true' : undefined,
+		className: clsx(
+			'block-editor-block-list__block',
+			{
+				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
-			} ),
+				'is-selected': isSelected,
+				'is-highlighted': isHighlighted,
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected': isPartiallySelected,
+				'is-reusable': isReusable,
+				'is-dragging': isDragging,
+				'has-child-selected': hasChildSelected,
+				'is-editing-disabled': isEditingDisabled,
+				'has-editable-outline': hasEditableOutline,
+				'has-negative-margin': hasNegativeMargin,
+				'is-content-locked-temporarily-editing-as-blocks':
+					isTemporarilyEditingAsBlocks,
+			},
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
deleted file mode 100644
index fce94b85f91190..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { isReusableBlock, getBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Returns the class names used for the different states of the block.
- *
- * @param {string} clientId The block client ID.
- *
- * @return {string} The class names.
- */
-export function useBlockClassNames( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				isBlockBeingDragged,
-				isBlockHighlighted,
-				isBlockSelected,
-				isBlockMultiSelected,
-				getBlockName,
-				getSettings,
-				hasSelectedInnerBlock,
-				isTyping,
-				__unstableIsFullySelected,
-				__unstableSelectionHasUnmergeableBlock,
-			} = select( blockEditorStore );
-			const { outlineMode } = getSettings();
-			const isDragging = isBlockBeingDragged( clientId );
-			const isSelected = isBlockSelected( clientId );
-			const name = getBlockName( clientId );
-			const checkDeep = true;
-			// "ancestor" is the more appropriate label due to "deep" check.
-			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
-				clientId,
-				checkDeep
-			);
-			const isMultiSelected = isBlockMultiSelected( clientId );
-			return classnames( {
-				'is-selected': isSelected,
-				'is-highlighted': isBlockHighlighted( clientId ),
-				'is-multi-selected': isMultiSelected,
-				'is-partially-selected':
-					isMultiSelected &&
-					! __unstableIsFullySelected() &&
-					! __unstableSelectionHasUnmergeableBlock(),
-				'is-reusable': isReusableBlock( getBlockType( name ) ),
-				'is-dragging': isDragging,
-				'has-child-selected': isAncestorOfSelectedBlock,
-				'remove-outline': isSelected && outlineMode && isTyping(),
-			} );
-		},
-		[ clientId ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-custom-class-name.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-custom-class-name.js
deleted file mode 100644
index 50372c09a042ca..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-custom-class-name.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { getBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Returns the custom class name if the block is a light block.
- *
- * @param {string} clientId The block client ID.
- *
- * @return {string} The custom class name.
- */
-export function useBlockCustomClassName( clientId ) {
-	// It's good for this to be a separate selector because it will be executed
-	// on every attribute change, while the other selectors are not re-evaluated
-	// as much.
-	return useSelect(
-		( select ) => {
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
-			const attributes = getBlockAttributes( clientId );
-
-			if ( ! attributes?.className ) {
-				return;
-			}
-
-			const blockType = getBlockType( getBlockName( clientId ) );
-			const hasLightBlockWrapper = blockType?.apiVersion > 1;
-
-			if ( ! hasLightBlockWrapper ) {
-				return;
-			}
-
-			return attributes.className;
-		},
-		[ clientId ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-default-class-name.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-default-class-name.js
deleted file mode 100644
index 7877ceb96490ca..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-default-class-name.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { getBlockType, getBlockDefaultClassName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Returns the default class name if the block is a light block and it supports
- * `className`.
- *
- * @param {string} clientId The block client ID.
- *
- * @return {string} The class name, e.g. `wp-block-paragraph`.
- */
-export function useBlockDefaultClassName( clientId ) {
-	return useSelect(
-		( select ) => {
-			const name = select( blockEditorStore ).getBlockName( clientId );
-			const blockType = getBlockType( name );
-			const hasLightBlockWrapper = blockType?.apiVersion > 1;
-
-			if ( ! hasLightBlockWrapper ) {
-				return;
-			}
-
-			return getBlockDefaultClassName( name );
-		},
-		[ clientId ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-moving-mode-class-names.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-moving-mode-class-names.js
deleted file mode 100644
index 686e719196f982..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-moving-mode-class-names.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Returns the class names used for block moving mode.
- *
- * @param {string} clientId The block client ID to insert above.
- *
- * @return {string} The class names.
- */
-export function useBlockMovingModeClassNames( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				hasBlockMovingClientId,
-				canInsertBlockType,
-				getBlockName,
-				getBlockRootClientId,
-				isBlockSelected,
-			} = select( blockEditorStore );
-
-			// The classes are only relevant for the selected block. Avoid
-			// re-rendering all blocks!
-			if ( ! isBlockSelected( clientId ) ) {
-				return;
-			}
-
-			const movingClientId = hasBlockMovingClientId();
-
-			if ( ! movingClientId ) {
-				return;
-			}
-
-			return classnames( 'is-block-moving-mode', {
-				'can-insert-moving-block': canInsertBlockType(
-					getBlockName( movingClientId ),
-					getBlockRootClientId( clientId )
-				),
-			} );
-		},
-		[ clientId ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js
index 56e424319739e1..16fd3ff1ca81dd 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-refs.js
@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { useContext, useState, useLayoutEffect } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -16,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
 import { BlockRefs } from '../../provider/block-refs-provider';
 
 /** @typedef {import('@wordpress/element').RefCallback} RefCallback */
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('@wordpress/element').Ref} Ref */
 
 /**
  * Provides a ref to the BlockRefs context.
@@ -26,61 +20,43 @@ import { BlockRefs } from '../../provider/block-refs-provider';
  * @return {RefCallback} Ref callback.
  */
 export function useBlockRefProvider( clientId ) {
-	const { refs, callbacks } = useContext( BlockRefs );
-	const ref = useRef();
-	useLayoutEffect( () => {
-		refs.set( ref, clientId );
-		return () => {
-			refs.delete( ref );
-		};
-	}, [ clientId ] );
+	const { refsMap } = useContext( BlockRefs );
 	return useRefEffect(
 		( element ) => {
-			// Update the ref in the provider.
-			ref.current = element;
-			// Call any update functions.
-			callbacks.forEach( ( id, setElement ) => {
-				if ( clientId === id ) {
-					setElement( element );
-				}
-			} );
+			refsMap.set( clientId, element );
+			return () => refsMap.delete( clientId );
 		},
 		[ clientId ]
 	);
 }
 
+function assignRef( ref, value ) {
+	if ( typeof ref === 'function' ) {
+		ref( value );
+	} else if ( ref ) {
+		ref.current = value;
+	}
+}
+
 /**
- * Gets a ref pointing to the current block element. Continues to return a
- * stable ref even if the block client ID changes.
+ * Tracks the DOM element for the block identified by `clientId` and assigns it to the `ref`
+ * whenever it changes.
  *
- * @param {string} clientId The client ID to get a ref for.
- *
- * @return {RefObject} A ref containing the element.
+ * @param {string} clientId The client ID to track.
+ * @param {Ref}    ref      The ref object/callback to assign to.
  */
-function useBlockRef( clientId ) {
-	const { refs } = useContext( BlockRefs );
-	const freshClientId = useRef();
-	freshClientId.current = clientId;
-	// Always return an object, even if no ref exists for a given client ID, so
-	// that `current` works at a later point.
-	return useMemo(
-		() => ( {
-			get current() {
-				let element = null;
-
-				// Multiple refs may be created for a single block. Find the
-				// first that has an element set.
-				for ( const [ ref, id ] of refs.entries() ) {
-					if ( id === freshClientId.current && ref.current ) {
-						element = ref.current;
-					}
-				}
-
-				return element;
-			},
-		} ),
-		[]
-	);
+export function useBlockElementRef( clientId, ref ) {
+	const { refsMap } = useContext( BlockRefs );
+	useLayoutEffect( () => {
+		assignRef( ref, refsMap.get( clientId ) );
+		const unsubscribe = refsMap.subscribe( clientId, () =>
+			assignRef( ref, refsMap.get( clientId ) )
+		);
+		return () => {
+			unsubscribe();
+			assignRef( ref, null );
+		};
+	}, [ refsMap, clientId, ref ] );
 }
 
 /**
@@ -91,24 +67,8 @@ function useBlockRef( clientId ) {
  *
  * @return {Element|null} The block's wrapper element.
  */
-function useBlockElement( clientId ) {
-	const { callbacks } = useContext( BlockRefs );
-	const ref = useBlockRef( clientId );
-	const [ element, setElement ] = useState( null );
-
-	useLayoutEffect( () => {
-		if ( ! clientId ) {
-			return;
-		}
-
-		callbacks.set( setElement, clientId );
-		return () => {
-			callbacks.delete( setElement );
-		};
-	}, [ clientId ] );
-
-	return ref.current || element;
+export function useBlockElement( clientId ) {
+	const [ blockElement, setBlockElement ] = useState( null );
+	useBlockElementRef( clientId, setBlockElement );
+	return blockElement;
 }
-
-export { useBlockRef as __unstableUseBlockRef };
-export { useBlockElement as __unstableUseBlockElement };
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js
new file mode 100644
index 00000000000000..a53983b95954ad
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+const nodesByDocument = new Map();
+
+function add( doc, node ) {
+	let set = nodesByDocument.get( doc );
+	if ( ! set ) {
+		set = new Set();
+		nodesByDocument.set( doc, set );
+		doc.addEventListener( 'pointerdown', down );
+	}
+	set.add( node );
+}
+
+function remove( doc, node ) {
+	const set = nodesByDocument.get( doc );
+	if ( set ) {
+		set.delete( node );
+		restore( node );
+		if ( set.size === 0 ) {
+			nodesByDocument.delete( doc );
+			doc.removeEventListener( 'pointerdown', down );
+		}
+	}
+}
+
+function restore( node ) {
+	const prevDraggable = node.getAttribute( 'data-draggable' );
+	if ( prevDraggable ) {
+		node.removeAttribute( 'data-draggable' );
+		// Only restore if `draggable` is still removed. It could have been
+		// changed by React in the meantime.
+		if ( prevDraggable === 'true' && ! node.getAttribute( 'draggable' ) ) {
+			node.setAttribute( 'draggable', 'true' );
+		}
+	}
+}
+
+function down( event ) {
+	const { target } = event;
+	const { ownerDocument, isContentEditable } = target;
+	const nodes = nodesByDocument.get( ownerDocument );
+
+	if ( isContentEditable ) {
+		// Whenever an editable element is clicked, check which draggable
+		// blocks contain this element, and temporarily disable draggability.
+		for ( const node of nodes ) {
+			if (
+				node.getAttribute( 'draggable' ) === 'true' &&
+				node.contains( target )
+			) {
+				node.removeAttribute( 'draggable' );
+				node.setAttribute( 'data-draggable', 'true' );
+			}
+		}
+	} else {
+		// Whenever a non-editable element is clicked, re-enable draggability
+		// for any blocks that were previously disabled.
+		for ( const node of nodes ) {
+			restore( node );
+		}
+	}
+}
+
+/**
+ * In Firefox, the `draggable` and `contenteditable` attributes don't play well
+ * together. When `contenteditable` is within a `draggable` element, selection
+ * doesn't get set in the right place. The only solution is to temporarily
+ * remove the `draggable` attribute clicking inside `contenteditable` elements.
+ *
+ * @return {Function} Cleanup function.
+ */
+export function useFirefoxDraggableCompatibility() {
+	return useRefEffect( ( node ) => {
+		add( node.ownerDocument, node );
+		return () => {
+			remove( node.ownerDocument, node );
+		};
+	}, [] );
+}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
index 21515d74b2ecdb..26f7cca2990d89 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -15,41 +15,10 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
-/**
- * Returns the initial position if the block needs to be focussed, `undefined`
- * otherwise. The initial position is either 0 (start) or -1 (end).
- *
- * @param {string} clientId Block client ID.
- *
- * @return {number} The initial position, either 0 (start) or -1 (end).
- */
-function useInitialPosition( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlocksInitialCaretPosition,
-				__unstableGetEditorMode,
-				isBlockSelected,
-			} = select( blockEditorStore );
-
-			if ( ! isBlockSelected( clientId ) ) {
-				return;
-			}
-
-			if ( __unstableGetEditorMode() !== 'edit' ) {
-				return;
-			}
-
-			// If there's no initial position, return 0 to focus the start.
-			return getSelectedBlocksInitialCaretPosition();
-		},
-		[ clientId ]
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -58,14 +27,19 @@ function useInitialPosition( clientId ) {
  *
  * @return {RefObject} React ref with the block element.
  */
-export function useFocusFirstElement( clientId ) {
+export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const initialPosition = useInitialPosition( clientId );
-	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
-		if ( ! isBlockSelected( clientId ) || isMultiSelecting() ) {
+		if (
+			! isBlockSelected( clientId ) ||
+			isMultiSelecting() ||
+			isZoomOut()
+		) {
 			return;
 		}
 
@@ -113,7 +87,6 @@ export function useFocusFirstElement( clientId ) {
 				return;
 			}
 		}
-
 		placeCaretAtHorizontalEdge( target, isReverse );
 	}, [ initialPosition, clientId ] );
 
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
index 653ef3049b1242..7c4b4aae8a70a1 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
@@ -1,50 +1,49 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
 
-function listener( event ) {
-	if ( event.defaultPrevented ) {
-		return;
+/*
+ * Adds `is-hovered` class when the block is hovered and in navigation or
+ * outline mode.
+ */
+export function useIsHovered( { clientId } ) {
+	const { hoverBlock } = useDispatch( blockEditorStore );
+
+	function listener( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const action = event.type === 'mouseover' ? 'add' : 'remove';
+
+		event.preventDefault();
+		event.currentTarget.classList[ action ]( 'is-hovered' );
+
+		if ( action === 'add' ) {
+			hoverBlock( clientId );
+		} else {
+			hoverBlock( null );
+		}
 	}
 
-	const action = event.type === 'mouseover' ? 'add' : 'remove';
+	return useRefEffect( ( node ) => {
+		node.addEventListener( 'mouseout', listener );
+		node.addEventListener( 'mouseover', listener );
 
-	event.preventDefault();
-	event.currentTarget.classList[ action ]( 'is-hovered' );
-}
+		return () => {
+			node.removeEventListener( 'mouseout', listener );
+			node.removeEventListener( 'mouseover', listener );
 
-/**
- * Adds `is-hovered` class when the block is hovered and in navigation or
- * outline mode.
- */
-export function useIsHovered() {
-	const isEnabled = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().outlineMode;
+			// Remove class in case it lingers.
+			node.classList.remove( 'is-hovered' );
+			hoverBlock( null );
+		};
 	}, [] );
-
-	return useRefEffect(
-		( node ) => {
-			if ( isEnabled ) {
-				node.addEventListener( 'mouseout', listener );
-				node.addEventListener( 'mouseover', listener );
-
-				return () => {
-					node.removeEventListener( 'mouseout', listener );
-					node.removeEventListener( 'mouseover', listener );
-
-					// Remove class in case it lingers.
-					node.classList.remove( 'is-hovered' );
-				};
-			}
-		},
-		[ isEnabled ]
-	);
 }
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
deleted file mode 100644
index 7289751f515ae1..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Allows navigation mode to be exited by clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
- */
-export function useNavModeExit( clientId ) {
-	const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
-	const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
-	return useRefEffect(
-		( node ) => {
-			function onMouseDown( event ) {
-				// Don't select a block if it's already handled by a child
-				// block.
-				if ( isNavigationMode() && ! event.defaultPrevented ) {
-					// Prevent focus from moving to the block.
-					event.preventDefault();
-
-					// When clicking on a selected block, exit navigation mode.
-					if ( isBlockSelected( clientId ) ) {
-						setNavigationMode( false );
-					} else {
-						selectBlock( clientId );
-					}
-				}
-			}
-
-			node.addEventListener( 'mousedown', onMouseDown );
-
-			return () => {
-				node.addEventListener( 'mousedown', onMouseDown );
-			};
-		},
-		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js
new file mode 100644
index 00000000000000..6301dac2c2108e
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-scroll-into-view.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion, useRefEffect } from '@wordpress/compose';
+
+export function useScrollIntoView( { isSelected } ) {
+	const prefersReducedMotion = useReducedMotion();
+	return useRefEffect(
+		( node ) => {
+			if ( isSelected ) {
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				if ( ! defaultView.IntersectionObserver ) {
+					return;
+				}
+				const observer = new defaultView.IntersectionObserver(
+					( entries ) => {
+						// Once observing starts, we always get an initial
+						// entry with the intersecting state.
+						if ( ! entries[ 0 ].isIntersecting ) {
+							node.scrollIntoView( {
+								behavior: prefersReducedMotion
+									? 'instant'
+									: 'smooth',
+							} );
+						}
+						observer.disconnect();
+					}
+				);
+				observer.observe( node );
+				return () => {
+					observer.disconnect();
+				};
+			}
+		},
+		[ isSelected ]
+	);
+}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
index bd6566112263f1..0a13ce6700b8e8 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js
@@ -5,11 +5,15 @@ import { isTextField } from '@wordpress/dom';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { createRoot } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import BlockDraggableChip from '../../../components/block-draggable/draggable-chip';
 
 /**
  * Adds block behaviour:
@@ -19,14 +23,17 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string} clientId Block client ID.
  */
-export function useEventHandlers( clientId ) {
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
+export function useEventHandlers( { clientId, isSelected } ) {
+	const { getBlockType } = useSelect( blocksStore );
+	const { getBlockRootClientId, isZoomOut, hasMultiSelection, getBlockName } =
+		unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		resetZoomLevel,
+		startDraggingBlocks,
+		stopDraggingBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -60,12 +67,10 @@ export function useEventHandlers( clientId ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
-					insertDefaultBlock(
-						{},
-						getBlockRootClientId( clientId ),
-						getBlockIndex( clientId ) + 1
-					);
+				if ( keyCode === ENTER && isZoomOut() ) {
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
+					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
 				}
@@ -78,7 +83,102 @@ export function useEventHandlers( clientId ) {
 			 * @param {DragEvent} event Drag event.
 			 */
 			function onDragStart( event ) {
-				event.preventDefault();
+				if (
+					node !== event.target ||
+					node.isContentEditable ||
+					node.ownerDocument.activeElement !== node ||
+					hasMultiSelection()
+				) {
+					event.preventDefault();
+					return;
+				}
+				const data = JSON.stringify( {
+					type: 'block',
+					srcClientIds: [ clientId ],
+					srcRootClientId: getBlockRootClientId( clientId ),
+				} );
+				event.dataTransfer.effectAllowed = 'move'; // remove "+" cursor
+				event.dataTransfer.clearData();
+				event.dataTransfer.setData( 'wp-blocks', data );
+				const { ownerDocument } = node;
+				const { defaultView } = ownerDocument;
+				const selection = defaultView.getSelection();
+				selection.removeAllRanges();
+
+				const domNode = document.createElement( 'div' );
+				const root = createRoot( domNode );
+				root.render(
+					<BlockDraggableChip
+						icon={ getBlockType( getBlockName( clientId ) ).icon }
+					/>
+				);
+				document.body.appendChild( domNode );
+				domNode.style.position = 'absolute';
+				domNode.style.top = '0';
+				domNode.style.left = '0';
+				domNode.style.zIndex = '1000';
+				domNode.style.pointerEvents = 'none';
+
+				// Setting the drag chip as the drag image actually works, but
+				// the behaviour is slightly different in every browser. In
+				// Safari, it animates, in Firefox it's slightly transparent...
+				// So we set a fake drag image and have to reposition it
+				// ourselves.
+				const dragElement = ownerDocument.createElement( 'div' );
+				// Chrome will show a globe icon if the drag element does not
+				// have dimensions.
+				dragElement.style.width = '1px';
+				dragElement.style.height = '1px';
+				dragElement.style.position = 'fixed';
+				dragElement.style.visibility = 'hidden';
+				ownerDocument.body.appendChild( dragElement );
+				event.dataTransfer.setDragImage( dragElement, 0, 0 );
+
+				let offset = { x: 0, y: 0 };
+
+				if ( document !== ownerDocument ) {
+					const frame = defaultView.frameElement;
+					if ( frame ) {
+						const rect = frame.getBoundingClientRect();
+						offset = { x: rect.left, y: rect.top };
+					}
+				}
+
+				// chip handle offset
+				offset.x -= 58;
+
+				function over( e ) {
+					domNode.style.transform = `translate( ${
+						e.clientX + offset.x
+					}px, ${ e.clientY + offset.y }px )`;
+				}
+
+				over( event );
+
+				function end() {
+					ownerDocument.removeEventListener( 'dragover', over );
+					ownerDocument.removeEventListener( 'dragend', end );
+					domNode.remove();
+					dragElement.remove();
+					stopDraggingBlocks();
+					document.body.classList.remove(
+						'is-dragging-components-draggable'
+					);
+					ownerDocument.documentElement.classList.remove(
+						'is-dragging'
+					);
+				}
+
+				ownerDocument.addEventListener( 'dragover', over );
+				ownerDocument.addEventListener( 'dragend', end );
+				ownerDocument.addEventListener( 'drop', end );
+
+				startDraggingBlocks( [ clientId ] );
+				// Important because it hides the block toolbar.
+				document.body.classList.add(
+					'is-dragging-components-draggable'
+				);
+				ownerDocument.documentElement.classList.add( 'is-dragging' );
 			}
 
 			node.addEventListener( 'keydown', onKeyDown );
@@ -93,9 +193,13 @@ export function useEventHandlers( clientId ) {
 			clientId,
 			isSelected,
 			getBlockRootClientId,
-			getBlockIndex,
-			insertDefaultBlock,
+			insertAfterBlock,
 			removeBlock,
+			isZoomOut,
+			resetZoomLevel,
+			hasMultiSelection,
+			startDraggingBlocks,
+			stopDraggingBlocks,
 		]
 	);
 }
diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index 2053c8f3eb4fc9..71eda2558f7930 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -4,31 +4,36 @@
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
 	const isInBetweenInserterDisabled = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree ||
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+			unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const {
 		getBlockListSettings,
-		getBlockRootClientId,
 		getBlockIndex,
-		isBlockInsertionPointVisible,
 		isMultiSelecting,
 		getSelectedBlockClientIds,
+		getSettings,
 		getTemplateLock,
 		__unstableIsWithinBlockOverlay,
-	} = useSelect( blockEditorStore );
+		getBlockEditingMode,
+		getBlockName,
+		getBlockAttributes,
+		getParentSectionBlock,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -39,7 +44,14 @@ export function useInBetweenInserter() {
 			}
 
 			function onMouseMove( event ) {
-				if ( openRef.current ) {
+				// openRef is the reference to the insertion point between blocks.
+				// If the reference is not set or the insertion point is already open, return.
+				if ( openRef === undefined || openRef.current ) {
+					return;
+				}
+
+				// Ignore text nodes sometimes detected in FireFox.
+				if ( event.target.nodeType === event.target.TEXT_NODE ) {
 					return;
 				}
 
@@ -68,14 +80,22 @@ export function useInBetweenInserter() {
 					rootClientId = blockElement.getAttribute( 'data-block' );
 				}
 
-				// Don't set the insertion point if the template is locked.
-				if ( getTemplateLock( rootClientId ) ) {
+				if (
+					getTemplateLock( rootClientId ) ||
+					getBlockEditingMode( rootClientId ) === 'disabled' ||
+					getBlockName( rootClientId ) === 'core/block' ||
+					( rootClientId &&
+						getBlockAttributes( rootClientId ).layout
+							?.isManualPlacement )
+				) {
 					return;
 				}
 
+				const blockListSettings = getBlockListSettings( rootClientId );
 				const orientation =
-					getBlockListSettings( rootClientId )?.orientation ||
-					'vertical';
+					blockListSettings?.orientation || 'vertical';
+				const captureToolbars =
+					!! blockListSettings?.__experimentalCaptureToolbars;
 				const offsetTop = event.clientY;
 				const offsetLeft = event.clientX;
 
@@ -88,7 +108,9 @@ export function useInBetweenInserter() {
 							blockElRect.top > offsetTop ) ||
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'horizontal' &&
-							blockElRect.left > offsetLeft )
+							( isRTL()
+								? blockElRect.right < offsetLeft
+								: blockElRect.left > offsetLeft ) )
 					);
 				} );
 
@@ -113,14 +135,24 @@ export function useInBetweenInserter() {
 				const clientId = element.id.slice( 'block-'.length );
 				if (
 					! clientId ||
-					__unstableIsWithinBlockOverlay( clientId )
+					__unstableIsWithinBlockOverlay( clientId ) ||
+					!! getParentSectionBlock( clientId )
 				) {
 					return;
 				}
 
-				// Don't show the inserter when hovering above (conflicts with
-				// block toolbar) or inside selected block(s).
-				if ( getSelectedBlockClientIds().includes( clientId ) ) {
+				// Don't show the inserter if the following conditions are met,
+				// as it conflicts with the block toolbar:
+				// 1. when hovering above or inside selected block(s)
+				// 2. when the orientation is vertical
+				// 3. when the __experimentalCaptureToolbars is not enabled
+				// 4. when the Top Toolbar is not disabled
+				if (
+					getSelectedBlockClientIds().includes( clientId ) &&
+					orientation === 'vertical' &&
+					! captureToolbars &&
+					! getSettings().hasFixedToolbar
+				) {
 					return;
 				}
 				const elementRect = element.getBoundingClientRect();
@@ -160,9 +192,7 @@ export function useInBetweenInserter() {
 		[
 			openRef,
 			getBlockListSettings,
-			getBlockRootClientId,
 			getBlockIndex,
-			isBlockInsertionPointVisible,
 			isMultiSelecting,
 			showInsertionPoint,
 			hideInsertionPoint,
diff --git a/packages/block-editor/src/components/block-list/use-scroll-upon-insertion.native.js b/packages/block-editor/src/components/block-list/use-scroll-upon-insertion.native.js
new file mode 100644
index 00000000000000..d224c4c7776716
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/use-scroll-upon-insertion.native.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
+
+const useScrollUponInsertion = ( {
+	clientId,
+	isSelected,
+	isLayoutCalculated,
+	elementRef,
+} ) => {
+	const { scrollRef } = useBlockListContext();
+	const wasBlockJustInserted = useSelect(
+		( select ) =>
+			!! select( blockEditorStore ).wasBlockJustInserted(
+				clientId,
+				'inserter_menu'
+			),
+		[ clientId ]
+	);
+	useEffect( () => {
+		const lastScrollTo = scrollRef?.lastScrollTo.current;
+		const alreadyScrolledTo = lastScrollTo?.clientId === clientId;
+		if (
+			alreadyScrolledTo ||
+			! isSelected ||
+			! scrollRef ||
+			! wasBlockJustInserted ||
+			! isLayoutCalculated
+		) {
+			return;
+		}
+		scrollRef.scrollToElement( elementRef );
+		lastScrollTo.clientId = clientId;
+	}, [
+		isSelected,
+		scrollRef,
+		wasBlockJustInserted,
+		elementRef,
+		isLayoutCalculated,
+		clientId,
+	] );
+};
+
+export default useScrollUponInsertion;
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
new file mode 100644
index 00000000000000..f2e6d050141fb5
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useReducedMotion } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function ZoomOutSeparator( {
+	clientId,
+	rootClientId = '',
+	position = 'top',
+} ) {
+	const [ isDraggedOver, setIsDraggedOver ] = useState( false );
+	const {
+		sectionRootClientId,
+		sectionClientIds,
+		insertionPoint,
+		blockInsertionPointVisible,
+		blockInsertionPoint,
+	} = useSelect( ( select ) => {
+		const {
+			getInsertionPoint,
+			getBlockOrder,
+			getSectionRootClientId,
+			isBlockInsertionPointVisible,
+			getBlockInsertionPoint,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+		const sectionRootClientIds = getBlockOrder( root );
+		return {
+			sectionRootClientId: root,
+			sectionClientIds: sectionRootClientIds,
+			blockOrder: getBlockOrder( root ),
+			insertionPoint: getInsertionPoint(),
+			blockInsertionPoint: getBlockInsertionPoint(),
+			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+		};
+	}, [] );
+
+	const isReducedMotion = useReducedMotion();
+
+	if ( ! clientId ) {
+		return;
+	}
+
+	let isVisible = false;
+
+	const isSectionBlock =
+		rootClientId === sectionRootClientId &&
+		sectionClientIds &&
+		sectionClientIds.includes( clientId );
+
+	if ( ! isSectionBlock ) {
+		return null;
+	}
+
+	const hasTopInsertionPoint =
+		insertionPoint?.index === 0 &&
+		clientId === sectionClientIds[ insertionPoint.index ];
+	const hasBottomInsertionPoint =
+		insertionPoint &&
+		insertionPoint.hasOwnProperty( 'index' ) &&
+		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+	// We want to show the zoom out separator in either of these conditions:
+	// 1. If the inserter has an insertion index set
+	// 2. We are dragging a pattern over an insertion point
+	if ( position === 'top' ) {
+		isVisible =
+			hasTopInsertionPoint ||
+			( blockInsertionPointVisible &&
+				blockInsertionPoint.index === 0 &&
+				clientId === sectionClientIds[ blockInsertionPoint.index ] );
+	}
+
+	if ( position === 'bottom' ) {
+		isVisible =
+			hasBottomInsertionPoint ||
+			( blockInsertionPointVisible &&
+				clientId ===
+					sectionClientIds[ blockInsertionPoint.index - 1 ] );
+	}
+
+	return (
+		<AnimatePresence>
+			{ isVisible && (
+				<motion.div
+					initial={ { height: 0 } }
+					animate={ {
+						// Use a height equal to that of the zoom out frame size.
+						height: 'calc(1 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)',
+					} }
+					exit={ { height: 0 } }
+					transition={ {
+						type: 'tween',
+						duration: isReducedMotion ? 0 : 0.2,
+						ease: [ 0.6, 0, 0.4, 1 ],
+					} }
+					className={ clsx(
+						'block-editor-block-list__zoom-out-separator',
+						{
+							'is-dragged-over': isDraggedOver,
+						}
+					) }
+					data-is-insertion-point="true"
+					onDragOver={ () => setIsDraggedOver( true ) }
+					onDragLeave={ () => setIsDraggedOver( false ) }
+				>
+					<motion.div
+						initial={ { opacity: 0 } }
+						animate={ { opacity: 1 } }
+						exit={ { opacity: 0, transition: { delay: -0.125 } } }
+						transition={ {
+							ease: 'linear',
+							duration: 0.1,
+							delay: 0.125,
+						} }
+					>
+						{ __( 'Drop pattern.' ) }
+					</motion.div>
+				</motion.div>
+			) }
+		</AnimatePresence>
+	);
+}
diff --git a/packages/block-editor/src/components/block-lock/menu-item.js b/packages/block-editor/src/components/block-lock/menu-item.js
index 65607c646e9684..496d7900049e90 100644
--- a/packages/block-editor/src/components/block-lock/menu-item.js
+++ b/packages/block-editor/src/components/block-lock/menu-item.js
@@ -31,6 +31,8 @@ export default function BlockLockMenuItem( { clientId } ) {
 			<MenuItem
 				icon={ isLocked ? unlock : lockOutline }
 				onClick={ toggleModal }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
 			>
 				{ label }
 			</MenuItem>
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
index 00429c3a9b6992..3be23f6adde146 100644
--- a/packages/block-editor/src/components/block-lock/modal.js
+++ b/packages/block-editor/src/components/block-lock/modal.js
@@ -13,7 +13,6 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockType } from '@wordpress/blocks';
 
@@ -25,7 +24,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 // Entity based blocks which allow edit locking
-const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
+const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];
 
 function getTemplateLockValue( lock ) {
 	// Prevents all operations.
@@ -64,10 +63,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
 	);
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const instanceId = useInstanceId(
-		BlockLockModal,
-		'block-editor-block-lock-modal__options-title'
-	);
 
 	useEffect( () => {
 		setLock( {
@@ -88,14 +83,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 				blockInformation.title
 			) }
 			overlayClassName="block-editor-block-lock-modal"
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
-			<p>
-				{ __(
-					'Choose specific attributes to restrict or lock all available options.'
-				) }
-			</p>
 			<form
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -108,86 +97,110 @@ export default function BlockLockModal( { clientId, onClose } ) {
 					onClose();
 				} }
 			>
-				<div
-					role="group"
-					aria-labelledby={ instanceId }
-					className="block-editor-block-lock-modal__options"
-				>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						className="block-editor-block-lock-modal__options-title"
-						label={
-							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
-						}
-						checked={ isAllChecked }
-						indeterminate={ isMixed }
-						onChange={ ( newValue ) =>
-							setLock( {
-								move: newValue,
-								remove: newValue,
-								...( allowsEditLocking
-									? { edit: newValue }
-									: {} ),
-							} )
-						}
-					/>
-					<ul className="block-editor-block-lock-modal__checklist">
-						{ allowsEditLocking && (
-							<li className="block-editor-block-lock-modal__checklist-item">
-								<CheckboxControl
-									__nextHasNoMarginBottom
-									label={ __( 'Restrict editing' ) }
-									checked={ !! lock.edit }
-									onChange={ ( edit ) =>
-										setLock( ( prevLock ) => ( {
-											...prevLock,
-											edit,
-										} ) )
-									}
-								/>
-								<Icon
-									className="block-editor-block-lock-modal__lock-icon"
-									icon={ lock.edit ? lockIcon : unlockIcon }
-								/>
-							</li>
+				<fieldset className="block-editor-block-lock-modal__options">
+					<legend>
+						{ __(
+							'Choose specific attributes to restrict or lock all available options.'
 						) }
-						<li className="block-editor-block-lock-modal__checklist-item">
+					</legend>
+					{ /*
+					 * Disable reason: The `list` ARIA role is redundant but
+					 * Safari+VoiceOver won't announce the list otherwise.
+					 */
+					/* eslint-disable jsx-a11y/no-redundant-roles */ }
+					<ul
+						role="list"
+						className="block-editor-block-lock-modal__checklist"
+					>
+						<li>
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={ __( 'Disable movement' ) }
-								checked={ lock.move }
-								onChange={ ( move ) =>
-									setLock( ( prevLock ) => ( {
-										...prevLock,
-										move,
-									} ) )
+								className="block-editor-block-lock-modal__options-all"
+								label={ __( 'Lock all' ) }
+								checked={ isAllChecked }
+								indeterminate={ isMixed }
+								onChange={ ( newValue ) =>
+									setLock( {
+										move: newValue,
+										remove: newValue,
+										...( allowsEditLocking
+											? { edit: newValue }
+											: {} ),
+									} )
 								}
 							/>
-							<Icon
-								className="block-editor-block-lock-modal__lock-icon"
-								icon={ lock.move ? lockIcon : unlockIcon }
-							/>
-						</li>
-						<li className="block-editor-block-lock-modal__checklist-item">
-							<CheckboxControl
-								__nextHasNoMarginBottom
-								label={ __( 'Prevent removal' ) }
-								checked={ lock.remove }
-								onChange={ ( remove ) =>
-									setLock( ( prevLock ) => ( {
-										...prevLock,
-										remove,
-									} ) )
-								}
-							/>
-							<Icon
-								className="block-editor-block-lock-modal__lock-icon"
-								icon={ lock.remove ? lockIcon : unlockIcon }
-							/>
+							<ul
+								role="list"
+								className="block-editor-block-lock-modal__checklist"
+							>
+								{ allowsEditLocking && (
+									<li className="block-editor-block-lock-modal__checklist-item">
+										<CheckboxControl
+											__nextHasNoMarginBottom
+											label={ __( 'Restrict editing' ) }
+											checked={ !! lock.edit }
+											onChange={ ( edit ) =>
+												setLock( ( prevLock ) => ( {
+													...prevLock,
+													edit,
+												} ) )
+											}
+										/>
+										<Icon
+											className="block-editor-block-lock-modal__lock-icon"
+											icon={
+												lock.edit
+													? lockIcon
+													: unlockIcon
+											}
+										/>
+									</li>
+								) }
+								<li className="block-editor-block-lock-modal__checklist-item">
+									<CheckboxControl
+										__nextHasNoMarginBottom
+										label={ __( 'Disable movement' ) }
+										checked={ lock.move }
+										onChange={ ( move ) =>
+											setLock( ( prevLock ) => ( {
+												...prevLock,
+												move,
+											} ) )
+										}
+									/>
+									<Icon
+										className="block-editor-block-lock-modal__lock-icon"
+										icon={
+											lock.move ? lockIcon : unlockIcon
+										}
+									/>
+								</li>
+								<li className="block-editor-block-lock-modal__checklist-item">
+									<CheckboxControl
+										__nextHasNoMarginBottom
+										label={ __( 'Prevent removal' ) }
+										checked={ lock.remove }
+										onChange={ ( remove ) =>
+											setLock( ( prevLock ) => ( {
+												...prevLock,
+												remove,
+											} ) )
+										}
+									/>
+									<Icon
+										className="block-editor-block-lock-modal__lock-icon"
+										icon={
+											lock.remove ? lockIcon : unlockIcon
+										}
+									/>
+								</li>
+							</ul>
 						</li>
 					</ul>
+					{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 					{ hasTemplateLock && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							className="block-editor-block-lock-modal__template-lock"
 							label={ __( 'Apply to all blocks inside' ) }
 							checked={ applyTemplateLock }
@@ -197,19 +210,27 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							}
 						/>
 					) }
-				</div>
+				</fieldset>
 				<Flex
 					className="block-editor-block-lock-modal__actions"
 					justify="flex-end"
 					expanded={ false }
 				>
 					<FlexItem>
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							variant="tertiary"
+							onClick={ onClose }
+							__next40pxDefaultSize
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 					</FlexItem>
 					<FlexItem>
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							__next40pxDefaultSize
+						>
 							{ __( 'Apply' ) }
 						</Button>
 					</FlexItem>
diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
index b833ec72d95a59..ad59030a8f4405 100644
--- a/packages/block-editor/src/components/block-lock/style.scss
+++ b/packages/block-editor/src/components/block-lock/style.scss
@@ -8,22 +8,23 @@
 	}
 }
 
+.block-editor-block-lock-modal__options legend {
+	margin-bottom: $grid-unit-20;
+	padding: 0;
+}
+
 .block-editor-block-lock-modal__checklist {
 	margin: 0;
 }
 
-.block-editor-block-lock-modal__options-title {
+.block-editor-block-lock-modal__options-all {
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-	}
 }
+
 .block-editor-block-lock-modal__checklist-item {
 	display: flex;
 	justify-content: space-between;
@@ -40,18 +41,14 @@
 
 	&:hover {
 		background-color: $gray-100;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 }
 
 .block-editor-block-lock-modal__template-lock {
 	border-top: $border-width solid $gray-300;
 	margin-top: $grid-unit-20;
-	padding: $grid-unit-15 0;
-
-	.components-base-control__field {
-		margin: 0;
-	}
+	padding-top: $grid-unit-20;
 }
 
 .block-editor-block-lock-modal__actions {
@@ -61,10 +58,17 @@
 .block-editor-block-lock-toolbar {
 	.components-button.has-icon {
 		min-width: $button-size-small + $grid-unit-15 !important;
-		padding-left: 0 !important;
+	}
+}
 
-		&:focus::before {
-			right: $grid-unit-10 !important;
-		}
+.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+	margin-left: -$grid-unit-15 * 0.5 !important;
+}
+
+.show-icon-labels {
+	.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar {
+		border-left: 1px solid $gray-900;
+		margin-left: $grid-unit-15 * 0.5 !important;
+		margin-right: -$grid-unit-15 * 0.5;
 	}
 }
diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
index 99080ff38134d3..12376a7b56a5ee 100644
--- a/packages/block-editor/src/components/block-lock/toolbar.js
+++ b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -1,46 +1,58 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { useReducer } from '@wordpress/element';
-import { lock } from '@wordpress/icons';
+import { useReducer, useRef, useEffect } from '@wordpress/element';
+import { lock, unlock } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockLockModal from './modal';
 import useBlockLock from './use-block-lock';
-import useBlockDisplayInformation from '../use-block-display-information';
 
 export default function BlockLockToolbar( { clientId } ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canEdit, canMove, canRemove, canLock } = useBlockLock( clientId );
+	const { canLock, isLocked } = useBlockLock( clientId );
 
 	const [ isModalOpen, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
 	);
 
-	if ( ! canLock ) {
+	const hasLockButtonShownRef = useRef( false );
+
+	// If the block lock button has been shown, we don't want to remove it
+	// from the toolbar until the toolbar is rendered again without it.
+	// Removing it beforehand can cause focus loss issues, such as when
+	// unlocking the block from the modal. It needs to return focus from
+	// whence it came, and to do that, we need to leave the button in the toolbar.
+	useEffect( () => {
+		if ( isLocked ) {
+			hasLockButtonShownRef.current = true;
+		}
+	}, [ isLocked ] );
+
+	if ( ! isLocked && ! hasLockButtonShownRef.current ) {
 		return null;
 	}
 
-	if ( canEdit && canMove && canRemove ) {
-		return null;
+	let label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
+
+	if ( ! canLock && isLocked ) {
+		label = __( 'Locked' );
 	}
 
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					icon={ lock }
-					label={ sprintf(
-						/* translators: %s: block name */
-						__( 'Unlock %s' ),
-						blockInformation.title
-					) }
+					disabled={ ! canLock }
+					icon={ isLocked ? lock : unlock }
+					label={ label }
 					onClick={ toggleModal }
+					aria-expanded={ isModalOpen }
+					aria-haspopup="dialog"
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (
diff --git a/packages/block-editor/src/components/block-lock/use-block-lock.js b/packages/block-editor/src/components/block-lock/use-block-lock.js
index da6ccc4092096d..9917a739eacd83 100644
--- a/packages/block-editor/src/components/block-lock/use-block-lock.js
+++ b/packages/block-editor/src/components/block-lock/use-block-lock.js
@@ -24,14 +24,12 @@ export default function useBlockLock( clientId ) {
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
-				getBlockRootClientId,
 				getTemplateLock,
 			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
 
 			const canEdit = canEditBlock( clientId );
-			const canMove = canMoveBlock( clientId, rootClientId );
-			const canRemove = canRemoveBlock( clientId, rootClientId );
+			const canMove = canMoveBlock( clientId );
+			const canRemove = canRemoveBlock( clientId );
 
 			return {
 				canEdit,
diff --git a/packages/block-editor/src/components/block-manager/category.js b/packages/block-editor/src/components/block-manager/category.js
new file mode 100644
index 00000000000000..79d5896b4502e4
--- /dev/null
+++ b/packages/block-editor/src/components/block-manager/category.js
@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesChecklist from './checklist';
+
+function BlockManagerCategory( {
+	title,
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+
+	const toggleVisible = useCallback(
+		( blockType, nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [ ...selectedBlockTypes, blockType ] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( { name } ) => name !== blockType.name
+					)
+				);
+			}
+		},
+		[ selectedBlockTypes, onChange ]
+	);
+
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				onChange( [
+					...selectedBlockTypes,
+					...blockTypes.filter(
+						( blockType ) =>
+							! selectedBlockTypes.find(
+								( { name } ) => name === blockType.name
+							)
+					),
+				] );
+			} else {
+				onChange(
+					selectedBlockTypes.filter(
+						( selectedBlockType ) =>
+							! blockTypes.find(
+								( { name } ) => name === selectedBlockType.name
+							)
+					)
+				);
+			}
+		},
+		[ blockTypes, selectedBlockTypes, onChange ]
+	);
+
+	if ( ! blockTypes.length ) {
+		return null;
+	}
+
+	const checkedBlockNames = blockTypes
+		.map( ( { name } ) => name )
+		.filter( ( type ) =>
+			( selectedBlockTypes ?? [] ).some(
+				( selectedBlockType ) => selectedBlockType.name === type
+			)
+		);
+
+	const titleId = 'block-editor-block-manager__category-title-' + instanceId;
+
+	const isAllChecked = checkedBlockNames.length === blockTypes.length;
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
+
+	return (
+		<div
+			role="group"
+			aria-labelledby={ titleId }
+			className="block-editor-block-manager__category"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ isAllChecked }
+				onChange={ toggleAllVisible }
+				className="block-editor-block-manager__category-title"
+				indeterminate={ isIndeterminate }
+				label={ <span id={ titleId }>{ title }</span> }
+			/>
+			<BlockTypesChecklist
+				blockTypes={ blockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
+			/>
+		</div>
+	);
+}
+
+export default BlockManagerCategory;
diff --git a/packages/block-editor/src/components/block-manager/checklist.js b/packages/block-editor/src/components/block-manager/checklist.js
new file mode 100644
index 00000000000000..d5456a14355efb
--- /dev/null
+++ b/packages/block-editor/src/components/block-manager/checklist.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="block-editor-block-manager__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="block-editor-block-manager__checklist-item"
+				>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ blockType.title }
+						checked={ value.includes( blockType.name ) }
+						onChange={ ( ...args ) =>
+							onItemChange( blockType, ...args )
+						}
+					/>
+					<BlockIcon icon={ blockType.icon } />
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;
diff --git a/packages/block-editor/src/components/block-manager/index.js b/packages/block-editor/src/components/block-manager/index.js
new file mode 100644
index 00000000000000..30d10e67040c71
--- /dev/null
+++ b/packages/block-editor/src/components/block-manager/index.js
@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { SearchControl, Button } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockManagerCategory from './category';
+
+/**
+ * Provides a list of blocks with checkboxes.
+ *
+ * @param {Object}   props                    Props.
+ * @param {Array}    props.blockTypes         An array of blocks.
+ * @param {Array}    props.selectedBlockTypes An array of selected blocks.
+ * @param {Function} props.onChange           Function to be called when the selected blocks change.
+ */
+export default function BlockManager( {
+	blockTypes,
+	selectedBlockTypes,
+	onChange,
+} ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ search, setSearch ] = useState( '' );
+	const { categories, isMatchingSearchTerm } = useSelect( ( select ) => {
+		return {
+			categories: select( blocksStore ).getCategories(),
+			isMatchingSearchTerm: select( blocksStore ).isMatchingSearchTerm,
+		};
+	}, [] );
+
+	function enableAllBlockTypes() {
+		onChange( blockTypes );
+	}
+
+	const filteredBlockTypes = blockTypes.filter( ( blockType ) => {
+		return ! search || isMatchingSearchTerm( blockType, search );
+	} );
+
+	const numberOfHiddenBlocks = blockTypes.length - selectedBlockTypes.length;
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = filteredBlockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
+
+	return (
+		<div className="block-editor-block-manager__content">
+			{ !! numberOfHiddenBlocks && (
+				<div className="block-editor-block-manager__disabled-blocks-count">
+					{ sprintf(
+						/* translators: %d: number of blocks. */
+						_n(
+							'%d block is hidden.',
+							'%d blocks are hidden.',
+							numberOfHiddenBlocks
+						),
+						numberOfHiddenBlocks
+					) }
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ enableAllBlockTypes }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			) }
+			<SearchControl
+				__nextHasNoMarginBottom
+				label={ __( 'Search for a block' ) }
+				placeholder={ __( 'Search for a block' ) }
+				value={ search }
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
+				className="block-editor-block-manager__search"
+			/>
+			<div
+				tabIndex="0"
+				role="region"
+				aria-label={ __( 'Available block types' ) }
+				className="block-editor-block-manager__results"
+			>
+				{ filteredBlockTypes.length === 0 && (
+					<p className="block-editor-block-manager__no-results">
+						{ __( 'No blocks found.' ) }
+					</p>
+				) }
+				{ categories.map( ( category ) => (
+					<BlockManagerCategory
+						key={ category.slug }
+						title={ category.title }
+						blockTypes={ filteredBlockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
+						selectedBlockTypes={ selectedBlockTypes }
+						onChange={ onChange }
+					/>
+				) ) }
+				<BlockManagerCategory
+					title={ __( 'Uncategorized' ) }
+					blockTypes={ filteredBlockTypes.filter(
+						( { category } ) => ! category
+					) }
+					selectedBlockTypes={ selectedBlockTypes }
+					onChange={ onChange }
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/block-manager/style.scss b/packages/block-editor/src/components/block-manager/style.scss
new file mode 100644
index 00000000000000..d72c682dcbb5d5
--- /dev/null
+++ b/packages/block-editor/src/components/block-manager/style.scss
@@ -0,0 +1,82 @@
+.block-editor-block-manager__no-results {
+	font-style: italic;
+	padding: $grid-unit-30 0;
+	text-align: center;
+}
+
+.block-editor-block-manager__search {
+	margin: $grid-unit-20 0;
+}
+
+.block-editor-block-manager__disabled-blocks-count {
+	border: $border-width solid $gray-300;
+	border-width: $border-width 0;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: ($grid-unit-05 + 1) * -1;
+	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
+		top: $grid-unit-40 - 1;
+	}
+	.is-link {
+		margin-left: 12px;
+	}
+}
+
+.block-editor-block-manager__category {
+	margin: 0 0 $grid-unit-30 0;
+}
+
+.block-editor-block-manager__category-title {
+	position: sticky;
+	top: - $grid-unit-05; // Offsets the top padding on the modal content container
+	padding: $grid-unit-20 0;
+	background-color: $white;
+	z-index: z-index(".block-editor-block-manager__category-title");
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+}
+
+.block-editor-block-manager__checklist {
+	margin-top: 0;
+}
+
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
+	border-bottom: 1px solid $gray-300;
+}
+
+.block-editor-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
+
+	.components-modal__content &.components-checkbox-control__input-container {
+		margin: 0 $grid-unit-10;
+	}
+
+	.block-editor-block-icon {
+		margin-right: 10px;
+		fill: $gray-900;
+	}
+}
+
+.block-editor-block-manager__results {
+	border-top: $border-width solid $gray-300;
+}
+
+// Remove the top border from results when adjacent to the disabled block count
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
+	border-top-width: 0;
+}
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
deleted file mode 100644
index 538f67fe23c408..00000000000000
--- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
+++ /dev/null
@@ -1,445 +0,0 @@
-/**
- * External dependencies
- */
-import { Platform, findNodeHandle } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	getClipboard,
-	setClipboard,
-	ToolbarButton,
-	Picker,
-} from '@wordpress/components';
-import {
-	getBlockType,
-	getDefaultBlockName,
-	hasBlockSupport,
-	serialize,
-	rawHandler,
-	createBlock,
-	isUnmodifiedDefaultBlock,
-	isReusableBlock,
-} from '@wordpress/blocks';
-import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { withInstanceId, compose } from '@wordpress/compose';
-import { moreHorizontalMobile } from '@wordpress/icons';
-import { useRef, useState } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { getMoversSetup } from '../block-mover/mover-description';
-import { store as blockEditorStore } from '../../store';
-import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
-
-const BlockActionsMenu = ( {
-	// Select.
-	blockTitle,
-	canInsertBlockType,
-	getBlocksByClientId,
-	isEmptyDefaultBlock,
-	isLocked,
-	canDuplicate,
-	isFirst,
-	isLast,
-	isReusableBlockType,
-	reusableBlock,
-	rootClientId,
-	selectedBlockClientId,
-	selectedBlockPossibleTransformations,
-	// Dispatch.
-	createSuccessNotice,
-	convertToRegularBlocks,
-	duplicateBlock,
-	onMoveDown,
-	onMoveUp,
-	openGeneralSidebar,
-	pasteBlock,
-	removeBlocks,
-	// Passed in.
-	anchorNodeRef,
-	isStackedHorizontally,
-	onDelete,
-	wrapBlockMover,
-	wrapBlockSettings,
-} ) => {
-	const [ clipboard, setCurrentClipboard ] = useState( getClipboard() );
-	const blockActionsMenuPickerRef = useRef();
-	const blockTransformationMenuPickerRef = useRef();
-	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
-	const clipboardBlock = clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
-	const isPasteEnabled =
-		clipboardBlock &&
-		canInsertBlockType( clipboardBlock.name, rootClientId );
-
-	const {
-		actionTitle: {
-			backward: backwardButtonTitle,
-			forward: forwardButtonTitle,
-		},
-	} = getMoversSetup( isStackedHorizontally, moversOptions );
-
-	const allOptions = {
-		settings: {
-			id: 'settingsOption',
-			label: __( 'Block settings' ),
-			value: 'settingsOption',
-			onSelect: openGeneralSidebar,
-		},
-		backwardButton: {
-			id: 'backwardButtonOption',
-			label: backwardButtonTitle,
-			value: 'backwardButtonOption',
-			disabled: isFirst,
-			onSelect: onMoveUp,
-		},
-		forwardButton: {
-			id: 'forwardButtonOption',
-			label: forwardButtonTitle,
-			value: 'forwardButtonOption',
-			disabled: isLast,
-			onSelect: onMoveDown,
-		},
-		delete: {
-			id: 'deleteOption',
-			label: __( 'Remove block' ),
-			value: 'deleteOption',
-			separated: true,
-			disabled: isEmptyDefaultBlock,
-			onSelect: () => {
-				onDelete();
-				createSuccessNotice(
-					// translators: displayed right after the block is removed.
-					__( 'Block removed' )
-				);
-			},
-		},
-		transformButton: {
-			id: 'transformButtonOption',
-			label: __( 'Transform block…' ),
-			value: 'transformButtonOption',
-			onSelect: () => {
-				if ( blockTransformationMenuPickerRef.current ) {
-					blockTransformationMenuPickerRef.current.presentPicker();
-				}
-			},
-		},
-		copyButton: {
-			id: 'copyButtonOption',
-			label: __( 'Copy block' ),
-			value: 'copyButtonOption',
-			onSelect: () => {
-				const serializedBlock = serialize(
-					getBlocksByClientId( selectedBlockClientId )
-				);
-				setCurrentClipboard( serializedBlock );
-				setClipboard( serializedBlock );
-				createSuccessNotice(
-					// translators: displayed right after the block is copied.
-					__( 'Block copied' )
-				);
-			},
-		},
-		cutButton: {
-			id: 'cutButtonOption',
-			label: __( 'Cut block' ),
-			value: 'cutButtonOption',
-			onSelect: () => {
-				setClipboard(
-					serialize( getBlocksByClientId( selectedBlockClientId ) )
-				);
-				removeBlocks( selectedBlockClientId );
-				createSuccessNotice(
-					// translators: displayed right after the block is cut.
-					__( 'Block cut' )
-				);
-			},
-		},
-		pasteButton: {
-			id: 'pasteButtonOption',
-			label: __( 'Paste block after' ),
-			value: 'pasteButtonOption',
-			onSelect: () => {
-				onPasteBlock();
-				createSuccessNotice(
-					// translators: displayed right after the block is pasted.
-					__( 'Block pasted' )
-				);
-			},
-		},
-		duplicateButton: {
-			id: 'duplicateButtonOption',
-			label: __( 'Duplicate block' ),
-			value: 'duplicateButtonOption',
-			onSelect: () => {
-				duplicateBlock();
-				createSuccessNotice(
-					// translators: displayed right after the block is duplicated.
-					__( 'Block duplicated' )
-				);
-			},
-		},
-		convertToRegularBlocks: {
-			id: 'convertToRegularBlocksOption',
-			label: __( 'Convert to regular blocks' ),
-			value: 'convertToRegularBlocksOption',
-			onSelect: () => {
-				createSuccessNotice(
-					sprintf(
-						/* translators: %s: name of the reusable block */
-						__( '%s converted to regular blocks' ),
-						reusableBlock?.title?.raw || blockTitle
-					)
-				);
-				convertToRegularBlocks();
-			},
-		},
-	};
-
-	const options = [
-		wrapBlockMover && allOptions.backwardButton,
-		wrapBlockMover && allOptions.forwardButton,
-		wrapBlockSettings && allOptions.settings,
-		! isLocked &&
-			selectedBlockPossibleTransformations.length &&
-			allOptions.transformButton,
-		canDuplicate && allOptions.copyButton,
-		canDuplicate && allOptions.cutButton,
-		canDuplicate && isPasteEnabled && allOptions.pasteButton,
-		canDuplicate && allOptions.duplicateButton,
-		isReusableBlockType && allOptions.convertToRegularBlocks,
-		! isLocked && allOptions.delete,
-	].filter( Boolean );
-
-	// End early if there are no options to show.
-	if ( ! options.length ) {
-		return (
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				icon={ moreHorizontalMobile }
-				disabled={ true }
-			/>
-		);
-	}
-
-	function onPasteBlock() {
-		if ( ! clipboard ) {
-			return;
-		}
-
-		pasteBlock( rawHandler( { HTML: clipboard } )[ 0 ] );
-	}
-
-	function onPickerSelect( value ) {
-		const selectedItem = options.find( ( item ) => item.value === value );
-		selectedItem.onSelect();
-	}
-
-	function onPickerPresent() {
-		if ( blockActionsMenuPickerRef.current ) {
-			blockActionsMenuPickerRef.current.presentPicker();
-		}
-	}
-
-	const disabledButtonIndices = options
-		.map( ( option, index ) => option.disabled && index + 1 )
-		.filter( Boolean );
-
-	const accessibilityHint =
-		Platform.OS === 'ios'
-			? __( 'Double tap to open Action Sheet with available options' )
-			: __( 'Double tap to open Bottom Sheet with available options' );
-
-	const getAnchor = () =>
-		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
-
-	return (
-		<>
-			<ToolbarButton
-				title={ __( 'Open Block Actions Menu' ) }
-				onClick={ onPickerPresent }
-				icon={ moreHorizontalMobile }
-				extraProps={ {
-					hint: accessibilityHint,
-				} }
-			/>
-			<Picker
-				ref={ blockActionsMenuPickerRef }
-				options={ options }
-				onChange={ onPickerSelect }
-				destructiveButtonIndex={ options.length }
-				disabledButtonIndices={ disabledButtonIndices }
-				hideCancelButton={ Platform.OS !== 'ios' }
-				leftAlign={ true }
-				getAnchor={ getAnchor }
-				// translators: %s: block title e.g: "Paragraph".
-				title={ sprintf( __( '%s block options' ), blockTitle ) }
-			/>
-			<BlockTransformationsMenu
-				anchorNodeRef={ anchorNodeRef }
-				blockTitle={ blockTitle }
-				pickerRef={ blockTransformationMenuPickerRef }
-				possibleTransformations={ selectedBlockPossibleTransformations }
-				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
-				selectedBlockClientId={ selectedBlockClientId }
-			/>
-		</>
-	);
-};
-
-export default compose(
-	withSelect( ( select, { clientIds } ) => {
-		const {
-			getBlockIndex,
-			getBlockRootClientId,
-			getBlockOrder,
-			getBlockName,
-			getBlockTransformItems,
-			getBlock,
-			getBlocksByClientId,
-			getSelectedBlockClientIds,
-			canInsertBlockType,
-			getTemplateLock,
-		} = select( blockEditorStore );
-		const normalizedClientIds = Array.isArray( clientIds )
-			? clientIds
-			: [ clientIds ];
-		const block = getBlock( normalizedClientIds );
-		const blockName = getBlockName( normalizedClientIds );
-		const blockType = getBlockType( blockName );
-		const blockTitle = blockType?.title;
-		const firstClientId = normalizedClientIds[ 0 ];
-		const rootClientId = getBlockRootClientId( firstClientId );
-		const blockOrder = getBlockOrder( rootClientId );
-
-		const firstIndex = getBlockIndex( firstClientId );
-		const lastIndex = getBlockIndex(
-			normalizedClientIds[ normalizedClientIds.length - 1 ]
-		);
-
-		const innerBlocks = getBlocksByClientId( clientIds );
-
-		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
-			return (
-				!! innerBlock &&
-				hasBlockSupport( innerBlock.name, 'multiple', true ) &&
-				canInsertBlockType( innerBlock.name, rootClientId )
-			);
-		} );
-
-		const isDefaultBlock = blockName === getDefaultBlockName();
-		const isEmptyContent = block?.attributes.content === '';
-		const isExactlyOneBlock = blockOrder.length === 1;
-		const isEmptyDefaultBlock =
-			isExactlyOneBlock && isDefaultBlock && isEmptyContent;
-		const isLocked = !! getTemplateLock( rootClientId );
-
-		const selectedBlockClientId = getSelectedBlockClientIds()[ 0 ];
-		const selectedBlock = selectedBlockClientId
-			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
-			: undefined;
-		const selectedBlockPossibleTransformations = selectedBlock
-			? getBlockTransformItems( [ selectedBlock ], rootClientId )
-			: [];
-
-		const isReusableBlockType = block ? isReusableBlock( block ) : false;
-		const reusableBlock = isReusableBlockType
-			? select( coreStore ).getEntityRecord(
-					'postType',
-					'wp_block',
-					block?.attributes.ref
-			  )
-			: undefined;
-
-		return {
-			blockTitle,
-			canInsertBlockType,
-			currentIndex: firstIndex,
-			getBlocksByClientId,
-			isEmptyDefaultBlock,
-			isLocked,
-			canDuplicate,
-			isFirst: firstIndex === 0,
-			isLast: lastIndex === blockOrder.length - 1,
-			isReusableBlockType,
-			reusableBlock,
-			rootClientId,
-			selectedBlockClientId,
-			selectedBlockPossibleTransformations,
-		};
-	} ),
-	withDispatch(
-		(
-			dispatch,
-			{ clientIds, rootClientId, currentIndex, selectedBlockClientId },
-			{ select }
-		) => {
-			const {
-				moveBlocksDown,
-				moveBlocksUp,
-				duplicateBlocks,
-				removeBlocks,
-				insertBlock,
-				replaceBlocks,
-				clearSelectedBlock,
-			} = dispatch( blockEditorStore );
-			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-			const { getBlockSelectionEnd, getBlock } =
-				select( blockEditorStore );
-			const { createSuccessNotice } = dispatch( noticesStore );
-
-			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
-				dispatch( reusableBlocksStore );
-
-			return {
-				createSuccessNotice,
-				convertToRegularBlocks() {
-					clearSelectedBlock();
-					// Convert action is executed at the end of the current JavaScript execution block
-					// to prevent issues related to undo/redo actions.
-					setImmediate( () =>
-						convertBlockToStatic( selectedBlockClientId )
-					);
-				},
-				duplicateBlock() {
-					return duplicateBlocks( clientIds );
-				},
-				onMoveDown: ( ...args ) =>
-					moveBlocksDown( clientIds, rootClientId, ...args ),
-				onMoveUp: ( ...args ) =>
-					moveBlocksUp( clientIds, rootClientId, ...args ),
-				openGeneralSidebar: () =>
-					openGeneralSidebar( 'edit-post/block' ),
-				pasteBlock: ( clipboardBlock ) => {
-					const canReplaceBlock = isUnmodifiedDefaultBlock(
-						getBlock( getBlockSelectionEnd() )
-					);
-
-					if ( ! canReplaceBlock ) {
-						const insertedBlock = createBlock(
-							clipboardBlock.name,
-							clipboardBlock.attributes,
-							clipboardBlock.innerBlocks
-						);
-
-						insertBlock(
-							insertedBlock,
-							currentIndex + 1,
-							rootClientId
-						);
-					} else {
-						replaceBlocks( clientIds, clipboardBlock );
-					}
-				},
-				removeBlocks,
-			};
-		}
-	),
-	withInstanceId
-)( BlockActionsMenu );
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
deleted file mode 100644
index b1b9c4635a29b7..00000000000000
--- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import BlockMover from '../block-mover';
-import BlockDraggable from '../block-draggable';
-import BlockActionsMenu from './block-actions-menu';
-import { BlockSettingsButton } from '../block-settings';
-import { store as blockEditorStore } from '../../store';
-
-// Defined breakpoints are used to get a point when
-// `settings` and `mover` controls should be wrapped into `BlockActionsMenu`
-// and accessed through `BottomSheet`(Android)/`ActionSheet`(iOS).
-const BREAKPOINTS = {
-	wrapSettings: 65,
-	wrapMover: 150,
-};
-const BlockMobileToolbar = ( {
-	clientId,
-	onDelete,
-	isStackedHorizontally,
-	blockWidth,
-	anchorNodeRef,
-	isFullWidth,
-	draggingClientId,
-} ) => {
-	const [ fillsLength, setFillsLength ] = useState( null );
-	const [ appenderWidth, setAppenderWidth ] = useState( 0 );
-	const spacingValue = styles.toolbar.marginLeft * 2;
-
-	function onLayout( { nativeEvent } ) {
-		const { layout } = nativeEvent;
-		const layoutWidth = Math.floor( layout.width );
-		if ( layoutWidth !== appenderWidth ) {
-			setAppenderWidth( nativeEvent.layout.width );
-		}
-	}
-
-	const wrapBlockSettings =
-		blockWidth < BREAKPOINTS.wrapSettings ||
-		appenderWidth - spacingValue < BREAKPOINTS.wrapSettings;
-	const wrapBlockMover =
-		blockWidth <= BREAKPOINTS.wrapMover ||
-		appenderWidth - spacingValue <= BREAKPOINTS.wrapMover;
-
-	const BlockSettingsButtonFill = ( fillProps ) => {
-		useEffect(
-			() => fillProps.onChangeFillsLength( fillProps.fillsLength ),
-			[ fillProps.fillsLength ]
-		);
-		return fillProps.children ?? null;
-	};
-
-	return (
-		<View
-			style={ [ styles.toolbar, isFullWidth && styles.toolbarFullWidth ] }
-			onLayout={ onLayout }
-		>
-			{ ! wrapBlockMover && (
-				<BlockMover
-					clientIds={ [ clientId ] }
-					isStackedHorizontally={ isStackedHorizontally }
-				/>
-			) }
-
-			<BlockDraggable
-				clientId={ clientId }
-				draggingClientId={ draggingClientId }
-				testID="draggable-trigger-mobile-toolbar"
-			>
-				{ () => <View style={ styles.spacer } /> }
-			</BlockDraggable>
-
-			<BlockSettingsButton.Slot>
-				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
-				{ ( fills = [ null ] ) => (
-					// The purpose of BlockSettingsButtonFill component is only to provide a way
-					// to pass data upstream from the slot rendering.
-					<BlockSettingsButtonFill
-						fillsLength={ fills.length }
-						onChangeFillsLength={ setFillsLength }
-					>
-						{ wrapBlockSettings ? null : fills[ 0 ] }
-					</BlockSettingsButtonFill>
-				) }
-			</BlockSettingsButton.Slot>
-
-			<BlockActionsMenu
-				clientIds={ [ clientId ] }
-				wrapBlockMover={ wrapBlockMover }
-				wrapBlockSettings={ wrapBlockSettings && fillsLength }
-				isStackedHorizontally={ isStackedHorizontally }
-				onDelete={ onDelete }
-				anchorNodeRef={ anchorNodeRef }
-			/>
-		</View>
-	);
-};
-
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockIndex } = select( blockEditorStore );
-
-		return {
-			order: getBlockIndex( clientId ),
-		};
-	} ),
-	withDispatch( ( dispatch, { clientId, rootClientId, onDelete } ) => {
-		const { removeBlock } = dispatch( blockEditorStore );
-		return {
-			onDelete:
-				onDelete || ( () => removeBlock( clientId, rootClientId ) ),
-		};
-	} )
-)( BlockMobileToolbar );
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
deleted file mode 100644
index 9a951770486602..00000000000000
--- a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.toolbar {
-	flex-direction: row;
-	height: $mobile-block-toolbar-height;
-	align-items: flex-start;
-	margin-left: $block-selected-margin;
-	margin-right: $block-selected-margin;
-}
-
-.toolbarFullWidth {
-	padding-left: $grid-unit-15;
-	padding-right: $grid-unit-15;
-}
-
-.spacer {
-	flex-grow: 1;
-}
diff --git a/packages/block-editor/src/components/block-mover/README.md b/packages/block-editor/src/components/block-mover/README.md
index 3763b7dbada11f..b781de773ef9f3 100644
--- a/packages/block-editor/src/components/block-mover/README.md
+++ b/packages/block-editor/src/components/block-mover/README.md
@@ -1,17 +1,10 @@
-# Block mover
+# BlockMover
 
-Block movers allow moving blocks inside the editor using up and down buttons.
+BlockMover component allows moving blocks inside the editor using up and down buttons.
 
 ![Block mover screenshot](https://make.wordpress.org/core/files/2020/08/block-mover-screenshot.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
-## Development guidelines
-
-### Usage
+## Usage
 
 Shows the block mover buttons in the block toolbar.
 
@@ -20,13 +13,22 @@ import { BlockMover } from '@wordpress/block-editor';
 const MyMover = () => <BlockMover clientIds={ [ clientId ] } />;
 ```
 
-### Props
+## Props
 
-#### clientIds
+### clientIds
 
-Blocks IDs
+The IDs of the blocks to move.
 
 -   Type: `Array`
+-   Required: Yes
+
+### hideDragHandle
+
+If this property is true, the drag handle is hidden.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
 
 ## Related components
 
diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
index 2b820a481b5833..76b46701758e8d 100644
--- a/packages/block-editor/src/components/block-mover/button.js
+++ b/packages/block-editor/src/components/block-mover/button.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -65,6 +65,7 @@ const BlockMoverButton = forwardRef(
 			? clientIds
 			: [ clientIds ];
 		const blocksCount = normalizedClientIds.length;
+		const { disabled } = props;
 
 		const {
 			blockType,
@@ -98,7 +99,9 @@ const BlockMoverButton = forwardRef(
 
 				return {
 					blockType: block ? getBlockType( block.name ) : null,
-					isDisabled: direction === 'up' ? isFirstBlock : isLastBlock,
+					isDisabled:
+						disabled ||
+						( direction === 'up' ? isFirstBlock : isLastBlock ),
 					rootClientId: blockRootClientId,
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,
@@ -126,8 +129,9 @@ const BlockMoverButton = forwardRef(
 		return (
 			<>
 				<Button
+					__next40pxDefaultSize
 					ref={ ref }
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-mover-button',
 						`is-${ direction }-button`
 					) }
@@ -140,7 +144,7 @@ const BlockMoverButton = forwardRef(
 					{ ...props }
 					onClick={ isDisabled ? null : onClick }
 					disabled={ isDisabled }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 				/>
 				<VisuallyHidden id={ descriptionId }>
 					{ getBlockMoverDescription(
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 9b9f32457561e6..4e993252ef974f 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,8 +19,20 @@ import BlockDraggable from '../block-draggable';
 import { BlockMoverUpButton, BlockMoverDownButton } from './button';
 import { store as blockEditorStore } from '../../store';
 
-function BlockMover( { clientIds, hideDragHandle } ) {
-	const { canMove, rootClientId, isFirst, isLast, orientation } = useSelect(
+function BlockMover( {
+	clientIds,
+	hideDragHandle,
+	isBlockMoverUpButtonDisabled,
+	isBlockMoverDownButtonDisabled,
+} ) {
+	const {
+		canMove,
+		rootClientId,
+		isFirst,
+		isLast,
+		orientation,
+		isManualGrid,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockIndex,
@@ -28,6 +40,7 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				canMoveBlocks,
 				getBlockOrder,
 				getBlockRootClientId,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 			const normalizedClientIds = Array.isArray( clientIds )
 				? clientIds
@@ -39,38 +52,45 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 				normalizedClientIds[ normalizedClientIds.length - 1 ]
 			);
 			const blockOrder = getBlockOrder( _rootClientId );
+			const { layout = {} } = getBlockAttributes( _rootClientId ) ?? {};
 
 			return {
-				canMove: canMoveBlocks( clientIds, _rootClientId ),
+				canMove: canMoveBlocks( clientIds ),
 				rootClientId: _rootClientId,
 				isFirst: firstIndex === 0,
 				isLast: lastIndex === blockOrder.length - 1,
 				orientation: getBlockListSettings( _rootClientId )?.orientation,
+				isManualGrid:
+					layout.type === 'grid' &&
+					layout.isManualPlacement &&
+					window.__experimentalEnableGridInteractivity,
 			};
 		},
 		[ clientIds ]
 	);
 
-	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
+	if (
+		! canMove ||
+		( isFirst && isLast && ! rootClientId ) ||
+		( hideDragHandle && isManualGrid )
+	) {
 		return null;
 	}
 
-	const dragHandleLabel = __( 'Drag' );
-
 	return (
 		<ToolbarGroup
-			className={ classnames( 'block-editor-block-mover', {
+			className={ clsx( 'block-editor-block-mover', {
 				'is-horizontal': orientation === 'horizontal',
 			} ) }
 		>
 			{ ! hideDragHandle && (
-				<BlockDraggable clientIds={ clientIds }>
+				<BlockDraggable clientIds={ clientIds } fadeWhenDisabled>
 					{ ( draggableProps ) => (
 						<Button
+							__next40pxDefaultSize
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
-							aria-hidden="true"
-							label={ dragHandleLabel }
+							label={ __( 'Drag' ) }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
 							tabIndex="-1"
@@ -79,24 +99,28 @@ function BlockMover( { clientIds, hideDragHandle } ) {
 					) }
 				</BlockDraggable>
 			) }
-			<div className="block-editor-block-mover__move-button-container">
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverUpButton
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-				<ToolbarItem>
-					{ ( itemProps ) => (
-						<BlockMoverDownButton
-							clientIds={ clientIds }
-							{ ...itemProps }
-						/>
-					) }
-				</ToolbarItem>
-			</div>
+			{ ! isManualGrid && (
+				<div className="block-editor-block-mover__move-button-container">
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverUpButton
+								disabled={ isBlockMoverUpButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<BlockMoverDownButton
+								disabled={ isBlockMoverDownButtonDisabled }
+								clientIds={ clientIds }
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				</div>
+			) }
 		</ToolbarGroup>
 	);
 }
diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
index 852515a3438212..74a72aec01dbef 100644
--- a/packages/block-editor/src/components/block-mover/index.native.js
+++ b/packages/block-editor/src/components/block-mover/index.native.js
@@ -7,7 +7,7 @@ import { Platform } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Picker, ToolbarButton } from '@wordpress/components';
+import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
@@ -90,7 +90,9 @@ export const BlockMover = ( {
 		const option = blockPageMoverOptions.find(
 			( el ) => el.value === value
 		);
-		if ( option && option.onSelect ) option.onSelect();
+		if ( option && option.onSelect ) {
+			option.onSelect();
+		}
 	};
 
 	const onLongPressMoveUp = useCallback(
@@ -107,7 +109,7 @@ export const BlockMover = ( {
 	}
 
 	return (
-		<>
+		<ToolbarGroup>
 			<ToolbarButton
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
@@ -133,10 +135,10 @@ export const BlockMover = ( {
 				options={ blockPageMoverOptions }
 				onChange={ onPickerSelect }
 				title={ __( 'Change block position' ) }
-				leftAlign={ true }
+				leftAlign
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
-		</>
+		</ToolbarGroup>
 	);
 };
 
@@ -164,7 +166,7 @@ export default compose(
 			numberOfBlocks: blockOrder.length - 1,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
-			canMove: canMoveBlocks( clientIds, rootClientId ),
+			canMove: canMoveBlocks( clientIds ),
 			rootClientId,
 		};
 	} ),
diff --git a/packages/block-editor/src/components/block-mover/mover-description.js b/packages/block-editor/src/components/block-mover/mover-description.js
index cda6044affd652..7c7f9e7a50c698 100644
--- a/packages/block-editor/src/components/block-mover/mover-description.js
+++ b/packages/block-editor/src/components/block-mover/mover-description.js
@@ -32,7 +32,7 @@ const getMovementDirection = ( moveDirection, orientation ) => {
  * @param {string}  orientation   The orientation of the block movers, vertical or
  *                                horizontal.
  *
- * @return {string} Label for the block movement controls.
+ * @return {string | undefined} Label for the block movement controls.
  */
 export function getBlockMoverDescription(
 	selectedCount,
@@ -227,7 +227,7 @@ export function getBlockMoverDescription(
  * @param {string}  orientation   The orientation of the block movers, vertical or
  *                                horizontal.
  *
- * @return {string} Label for the block movement controls.
+ * @return {string | undefined} Label for the block movement controls.
  */
 export function getMultiBlockMoverDescription(
 	selectedCount,
diff --git a/packages/block-editor/src/components/block-mover/stories/index.js b/packages/block-editor/src/components/block-mover/stories/index.js
deleted file mode 100644
index aac98ecc84d6ed..00000000000000
--- a/packages/block-editor/src/components/block-mover/stories/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { useDispatch } from '@wordpress/data';
-import { Toolbar } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BlockMover from '../';
-import BlockEditorProvider from '../../provider';
-import { store as blockEditorStore } from '../../../store';
-
-registerCoreBlocks();
-const blocks = [
-	// vertical
-	createBlock( 'core/group', { layout: { type: 'flex' } }, [
-		createBlock( 'core/paragraph' ),
-		createBlock( 'core/paragraph' ),
-		createBlock( 'core/paragraph' ),
-	] ),
-	// horizontal
-	createBlock( 'core/buttons', {}, [
-		createBlock( 'core/button' ),
-		createBlock( 'core/button' ),
-		createBlock( 'core/button' ),
-	] ),
-];
-
-function Provider( { children } ) {
-	const wrapperStyle = { margin: '24px', position: 'relative' };
-
-	return (
-		<div style={ wrapperStyle }>
-			<BlockEditorProvider value={ blocks }>
-				{ children }
-			</BlockEditorProvider>
-		</div>
-	);
-}
-
-function BlockMoverStory() {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	useEffect( () => {
-		/**
-		 * This shouldn't be needed but unfortunatley
-		 * the layout orientation is not declarative, we need
-		 *  to render the blocks to update the block settings in the state.
-		 */
-		updateBlockListSettings( blocks[ 1 ].clientId, {
-			orientation: 'horizontal',
-		} );
-	}, [] );
-
-	return (
-		<div>
-			<p>The mover by default is vertical</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 0 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
-
-			<p style={ { marginTop: 36 } }>
-				But it can also accommodate horizontal blocks.
-			</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 1 ].clientId ]
-							: []
-					}
-				/>
-			</Toolbar>
-
-			<p style={ { marginTop: 36 } }>We can also hide the drag handle.</p>
-			<Toolbar label="Block Mover">
-				<BlockMover
-					clientIds={
-						blocks.length
-							? [ blocks[ 1 ].innerBlocks[ 0 ].clientId ]
-							: []
-					}
-					hideDragHandle
-				/>
-			</Toolbar>
-		</div>
-	);
-}
-
-export default {
-	title: 'BlockEditor/BlockMover',
-};
-
-export const _default = () => {
-	return (
-		<Provider>
-			<BlockMoverStory />
-		</Provider>
-	);
-};
diff --git a/packages/block-editor/src/components/block-mover/stories/index.story.js b/packages/block-editor/src/components/block-mover/stories/index.story.js
new file mode 100644
index 00000000000000..de6d13c797b4d9
--- /dev/null
+++ b/packages/block-editor/src/components/block-mover/stories/index.story.js
@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { useDispatch } from '@wordpress/data';
+import { Toolbar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockMover from '../';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import { store as blockEditorStore } from '../../../store';
+
+// For the purpose of this story, we need to register the core blocks samples.
+registerCoreBlocks();
+const blocks = [
+	// vertical
+	createBlock( 'core/group', { layout: { type: 'flex' } }, [
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+	] ),
+	// horizontal
+	createBlock( 'core/buttons', {}, [
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+		createBlock( 'core/button' ),
+	] ),
+];
+
+/**
+ * BlockMover component allows moving blocks inside the editor using up and down buttons.
+ */
+const meta = {
+	title: 'BlockEditor/BlockMover',
+	component: BlockMover,
+	parameters: {
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	decorators: [
+		( Story ) => (
+			<ExperimentalBlockEditorProvider value={ blocks }>
+				<Toolbar label="Block Mover">
+					<Story />
+				</Toolbar>
+			</ExperimentalBlockEditorProvider>
+		),
+	],
+	argTypes: {
+		clientIds: {
+			control: {
+				type: 'none',
+			},
+			description: 'The client IDs of the blocks to move.',
+		},
+		hideDragHandle: {
+			control: {
+				type: 'boolean',
+			},
+			description: 'If this property is true, the drag handle is hidden.',
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	args: {
+		clientIds: [ blocks[ 0 ].innerBlocks[ 1 ].clientId ],
+	},
+};
+
+/**
+ * This story shows the block mover with horizontal orientation.
+ * It is necessary to render the blocks to update the block settings in the state.
+ */
+export const Horizontal = {
+	decorators: [
+		( Story ) => {
+			const { updateBlockListSettings } = useDispatch( blockEditorStore );
+			useEffect( () => {
+				/**
+				 * This shouldn't be needed but unfortunately
+				 * the layout orientation is not declarative, we need
+				 * to render the blocks to update the block settings in the state.
+				 */
+				updateBlockListSettings( blocks[ 1 ].clientId, {
+					orientation: 'horizontal',
+				} );
+			}, [] );
+			return <Story />;
+		},
+	],
+	args: {
+		clientIds: [ blocks[ 1 ].innerBlocks[ 1 ].clientId ],
+	},
+	parameters: {
+		docs: { canvas: { sourceState: 'hidden' } },
+	},
+};
+
+/**
+ * You can hide the drag handle by `hideDragHandle` attribute.
+ */
+export const HideDragHandle = {
+	args: {
+		...Default.args,
+		hideDragHandle: true,
+	},
+};
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index cf4061b3789dfb..7d23c0f1e5a988 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -2,13 +2,14 @@
 	display: flex;
 	padding: 0;
 	border: none;
+	justify-content: center;
 
 	@include break-small() {
 		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
 
 			> * {
-				height: $block-toolbar-height * 0.5;
+				height: $block-toolbar-height * 0.5 - $grid-unit-05;
 				width: 100%;
 				min-width: 0 !important; // overrides default button width.
 
@@ -19,12 +20,12 @@
 			}
 
 			.block-editor-block-mover-button.is-up-button svg {
-				top: 5px;
+				top: 3px;
 				flex-shrink: 0;
 			}
 
 			.block-editor-block-mover-button.is-down-button svg {
-				bottom: 5px;
+				bottom: 3px;
 				flex-shrink: 0;
 			}
 		}
@@ -35,11 +36,14 @@
 			> * {
 				width: $block-toolbar-height * 0.5;
 				min-width: 0 !important; // overrides default button width.
-				padding-left: 0 !important;
-				padding-right: 0 !important;
 				overflow: hidden;
 			}
 
+			.block-editor-block-mover-button {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
 			.block-editor-block-mover-button.is-up-button svg {
 				left: 5px;
 			}
@@ -52,23 +56,30 @@
 }
 
 .block-editor-block-mover__drag-handle {
+	cursor: grab;
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		padding-left: 0 !important;
-		padding-right: 0 !important;
 		overflow: hidden;
+
+		.block-editor-block-mover &.has-icon.has-icon {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 }
 
 // Specificity is necessary to override block toolbar button styles.
 .components-button.block-editor-block-mover-button {
+	// Prevent the SVGs inside the button from overflowing the button.
+	overflow: hidden;
+
 	// Focus and toggle pseudo elements.
 	&::before {
 		content: "";
 		position: absolute;
 		display: block;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		height: $grid-unit-40;
 
 		// Position the focus rectangle.
diff --git a/packages/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 ec1b5b196d57bb..3f34bb39ef1422 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,21 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Block Mover Picker should match snapshot 1`] = `
-Array [
+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 render without crashing and match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "height": 44,
+      },
+      {
+        "borderLeftWidth": 0.5,
+      },
+      undefined,
+    ]
+  }
+>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the left"
       accessibilityLabel="Move block left from position 2 to position 1"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
       }
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -24,7 +89,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -35,12 +100,12 @@ Array [
     >
       <View
         collapsable={false}
-        handlerTag={3}
+        handlerTag={1}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -52,30 +117,49 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
         >
-          Svg
+          <Svg
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <View>
     <View
       accessibilityHint="Double tap to move the block to the right"
       accessibilityLabel="Move block right"
       accessibilityRole="button"
       accessibilityState={
-        Object {
+        {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
       }
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -84,7 +168,7 @@ Array [
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "alignItems": "center",
           "flex": 1,
           "justifyContent": "center",
@@ -95,12 +179,12 @@ Array [
     >
       <View
         collapsable={false}
-        handlerTag={4}
+        handlerTag={2}
         handlerType="LongPressGestureHandler"
         onGestureHandlerEvent={[Function]}
         onGestureHandlerStateChange={[Function]}
         style={
-          Object {
+          {
             "alignItems": "center",
             "aspectRatio": 1,
             "flex": 1,
@@ -112,15 +196,23 @@ Array [
       >
         <View
           style={
-            Object {
+            {
               "flexDirection": "row",
             }
           }
         >
-          Svg
+          <Svg
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>
-  </View>,
-]
+  </View>
+</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..c02289044838db 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,
+	typeInRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -9,7 +24,7 @@ import { render } from 'test/helpers';
 import { BlockMover } from '../index';
 
 describe( 'Block Mover Picker', () => {
-	it( 'renders without crashing', () => {
+	it( 'should render without crashing and match snapshot', () => {
 		const props = {
 			isFirst: false,
 			isLast: true,
@@ -25,25 +40,147 @@ describe( 'Block Mover Picker', () => {
 			isStackedHorizontally: true,
 		};
 		const screen = render( <BlockMover { ...props } /> );
-		expect( screen.container ).toBeTruthy();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
-	it( 'should match snapshot', () => {
-		const props = {
-			isFirst: false,
-			isLast: true,
-			canMove: true,
-			numberOfBlocks: 2,
-			firstIndex: 1,
+	describe( 'moving blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
 
-			onMoveDown: jest.fn(),
-			onMoveUp: jest.fn(),
-			onLongPress: jest.fn(),
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
 
-			rootClientId: '',
-			isStackedHorizontally: true,
-		};
-		const screen = render( <BlockMover { ...props } /> );
-		expect( screen.toJSON() ).toMatchSnapshot();
+		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…'
+				);
+			typeInRichText( 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…'
+				);
+			typeInRichText( 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…'
+				);
+			typeInRichText( 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/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index 8574d66e943160..0bf8fd05320188 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -27,6 +27,7 @@ function BlockNavigationDropdownToggle( {
 } ) {
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ innerRef }
 			icon={ listView }
@@ -56,7 +57,7 @@ function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
 	return (
 		<Dropdown
 			contentClassName="block-editor-block-navigation__popover"
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<BlockNavigationDropdownToggle
 					{ ...props }
diff --git a/packages/block-editor/src/components/block-parent-selector/README.md b/packages/block-editor/src/components/block-parent-selector/README.md
index 181e03a20800b6..e16af799cb66ad 100644
--- a/packages/block-editor/src/components/block-parent-selector/README.md
+++ b/packages/block-editor/src/components/block-parent-selector/README.md
@@ -8,11 +8,6 @@ In practice the BlockParentSelector component renders a <ToolbarButton /> compon
 
 ![Block parent selector test](https://make.wordpress.org/core/files/2020/09/block-parent-selector-test.gif)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index e338a10f170695..84b5211089cd95 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,77 +11,55 @@ import { useRef } from '@wordpress/element';
  */
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import { useShowMoversGestures } from '../block-toolbar/utils';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
  * current block selection as a single icon to "go up" a level.
  *
- * @return {WPComponent} Parent block selector.
+ * @return {Component} Parent block selector.
  */
 export default function BlockParentSelector() {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const { firstParentClientId, shouldHide, isDistractionFree } = useSelect(
-		( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientId,
-				getSettings,
-			} = select( blockEditorStore );
-			const { hasBlockSupport } = select( blocksStore );
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const parents = getBlockParents( selectedBlockClientId );
-			const _firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( _firstParentClientId );
-			const _parentBlockType = getBlockType( parentBlockName );
-			const settings = getSettings();
-			return {
-				firstParentClientId: _firstParentClientId,
-				shouldHide: ! hasBlockSupport(
-					_parentBlockType,
-					'__experimentalParentSelector',
-					true
-				),
-				isDistractionFree: settings.isDistractionFree,
-			};
-		},
-		[]
-	);
-	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const { parentClientId } = useSelect( ( select ) => {
+		const {
+			getBlockParents,
+			getSelectedBlockClientId,
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parents = getBlockParents( selectedBlockClientId );
+		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		return {
+			parentClientId: _parentClientId,
+		};
+	}, [] );
+	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
 	const nodeRef = useRef();
-	const { gestures: showMoversGestures } = useShowMoversGestures( {
+	const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
 		ref: nodeRef,
-		onChange( isFocused ) {
-			if ( isFocused && isDistractionFree ) {
-				return;
-			}
-			toggleBlockHighlight( firstParentClientId, isFocused );
-		},
+		highlightParent: true,
 	} );
 
-	if ( shouldHide || firstParentClientId === undefined ) {
-		return null;
-	}
-
 	return (
 		<div
 			className="block-editor-block-parent-selector"
-			key={ firstParentClientId }
+			key={ parentClientId }
 			ref={ nodeRef }
-			{ ...showMoversGestures }
+			{ ...showHoveredOrFocusedGestures }
 		>
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"
-				onClick={ () => selectBlock( firstParentClientId ) }
+				onClick={ () => selectBlock( parentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
-					__( 'Select %s' ),
+					__( 'Select parent block: %s' ),
 					blockInformation?.title
 				) }
 				showTooltip
diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
deleted file mode 100644
index c5a1869835188c..00000000000000
--- a/packages/block-editor/src/components/block-parent-selector/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.block-editor-block-parent-selector {
-	background: $white;
-	border-radius: $radius-block-ui;
-
-	.block-editor-block-parent-selector__button {
-		width: $grid-unit-60;
-		height: $grid-unit-60;
-		border: $border-width solid $gray-900;
-		border-radius: $radius-block-ui;
-	}
-}
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 9ad58ffc5379f5..83cceca7a20a79 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -3,12 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
-import {
-	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
-} from '@wordpress/components';
+import { Composite, VisuallyHidden } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
@@ -28,9 +23,10 @@ const SetupContent = ( {
 	activeSlide,
 	patterns,
 	onBlockPatternSelect,
+	showTitles,
 } ) => {
-	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
+
 	if ( viewMode === VIEWMODES.carousel ) {
 		const slideClass = new Map( [
 			[ activeSlide, 'active-slide' ],
@@ -40,23 +36,24 @@ const SetupContent = ( {
 		return (
 			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
-					<ul className="carousel-container">
+					<div className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
 							<BlockPatternSlide
+								active={ index === activeSlide }
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
 							/>
 						) ) }
-					</ul>
+					</div>
 				</div>
 			</div>
 		);
 	}
+
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				{ ...composite }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
@@ -66,7 +63,7 @@ const SetupContent = ( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
-						composite={ composite }
+						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
@@ -74,7 +71,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -82,54 +79,61 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
-			<CompositeItem
+		<div className={ `${ baseClassName }__list-item` }>
+			<Composite.Item
+				render={
+					<div
+						aria-describedby={
+							description ? descriptionId : undefined
+						}
+						aria-label={ pattern.title }
+						className={ `${ baseClassName }__item` }
+					/>
+				}
+				id={ `${ baseClassName }__pattern__${ pattern.name }` }
 				role="option"
-				as="div"
-				{ ...composite }
-				className={ `${ baseClassName }__item` }
 				onClick={ () => onSelect( blocks ) }
 			>
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
 				/>
-			</CompositeItem>
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
+			</Composite.Item>
 		</div>
 	);
 }
 
-function BlockPatternSlide( { className, pattern, minHeight } ) {
+function BlockPatternSlide( { active, className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
 		'block-editor-block-pattern-setup-list__item-description'
 	);
 	return (
-		<li
+		<div
+			aria-hidden={ ! active }
+			role="img"
 			className={ `pattern-slide ${ className }` }
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<BlockPreview
-				blocks={ blocks }
-				__experimentalMinHeight={ minHeight }
-			/>
+			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
 			{ !! description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ description }
 				</VisuallyHidden>
 			) }
-		</li>
+		</div>
 	);
 }
 
@@ -138,8 +142,10 @@ const BlockPatternSetup = ( {
 	blockName,
 	filterPatternsFn,
 	onBlockPatternSelect,
+	initialViewMode = VIEWMODES.carousel,
+	showTitles = false,
 } ) => {
-	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
+	const [ viewMode, setViewMode ] = useState( initialViewMode );
 	const [ activeSlide, setActiveSlide ] = useState( 0 );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
@@ -164,6 +170,7 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					showTitles={ showTitles }
 				/>
 				<SetupToolbar
 					viewMode={ viewMode }
@@ -171,10 +178,14 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					totalSlides={ patterns.length }
 					handleNext={ () => {
-						setActiveSlide( ( active ) => active + 1 );
+						setActiveSlide( ( active ) =>
+							Math.min( active + 1, patterns.length - 1 )
+						);
 					} }
 					handlePrevious={ () => {
-						setActiveSlide( ( active ) => active - 1 );
+						setActiveSlide( ( active ) =>
+							Math.max( active - 1, 0 )
+						);
 					} }
 					onBlockPatternSelect={ () => {
 						onPatternSelectCallback(
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index 69922f9560ab0b..d571e0fef5dcc3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import {
 	chevronRight,
@@ -17,7 +17,11 @@ import { VIEWMODES } from './constants';
 
 const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
-		<Button variant="primary" onClick={ onBlockPatternSelect }>
+		<Button
+			__next40pxDefaultSize
+			variant="primary"
+			onClick={ onBlockPatternSelect }
+		>
 			{ __( 'Choose' ) }
 		</Button>
 	</div>
@@ -31,16 +35,20 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			icon={ chevronLeft }
+			size="compact"
+			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
+			accessibleWhenDisabled
 		/>
 		<Button
-			icon={ chevronRight }
+			size="compact"
+			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
+			accessibleWhenDisabled
 		/>
 	</div>
 );
@@ -58,12 +66,14 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
+				size="compact"
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
+				size="compact"
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }
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..10582a7a2ce496 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -4,10 +4,11 @@
 	justify-content: center;
 	align-items: flex-start;
 	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
-	// TODO change to check parent.
 	&.view-mode-grid {
+		padding-top: $grid-unit-05;
+
 		.block-editor-block-pattern-setup__toolbar {
 			justify-content: center;
 		}
@@ -30,13 +31,36 @@
 				cursor: pointer;
 			}
 
+			.block-editor-block-pattern-setup-list__item {
+				scroll-margin: 5px 0;
+
+				&:hover .block-editor-block-preview__container {
+					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+				}
+
+				&:focus .block-editor-block-preview__container {
+					@include button-style-outset__focus(var(--wp-admin-theme-color));
+				}
+				&: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;
+					border-radius: $radius-medium;
 					border: $border-width solid $gray-300;
 				}
 
@@ -64,7 +88,7 @@
 		align-items: center;
 		justify-content: space-between;
 		border-top: 1px solid $gray-300;
-		align-self: flex-end;
+		align-self: stretch;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;
@@ -84,6 +108,7 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
+		height: 100%;
 		box-sizing: border-box;
 
 		.carousel-container {
@@ -91,6 +116,7 @@
 			position: relative;
 			padding: 0;
 			margin: 0;
+			height: 100%;
 			list-style: none;
 			transform-style: preserve-3d;
 			* {
@@ -100,6 +126,8 @@
 				position: absolute;
 				top: 0;
 				width: 100%;
+				height: 100%;
+				background-color: $white;
 				margin: auto;
 				padding: 0;
 				transition: transform 0.5s, z-index 0.5s;
diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
index 1b6a90b87457a0..1ad94c5385c6c9 100644
--- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
+++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js
@@ -13,7 +13,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) {
 		( select ) => {
 			const {
 				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
+				getPatternsByBlockTypes,
 				__experimentalGetAllowedPatterns,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
@@ -22,10 +22,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) {
 					filterPatternsFn
 				);
 			}
-			return __experimentalGetPatternsByBlockTypes(
-				blockName,
-				rootClientId
-			);
+			return getPatternsByBlockTypes( blockName, rootClientId );
 		},
 		[ clientId, blockName, filterPatternsFn ]
 	);
diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md
index 7b30dcecc7bbd4..f4c6cc6141de13 100644
--- a/packages/block-editor/src/components/block-patterns-list/README.md
+++ b/packages/block-editor/src/components/block-patterns-list/README.md
@@ -1,16 +1,11 @@
 # Block Patterns List
 
-The `BlockPatternList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
+The `BlockPatternsList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
 
 For more infos about blocks patterns, read [this](https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/).
 
 ![Block patterns sidebar in WordPress 5.5](https://make.wordpress.org/core/files/2020/09/blocks-patterns-sidebar-in-wordpress-5-5.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
@@ -18,12 +13,11 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
 Renders a block patterns list.
 
 ```jsx
-import { BlockPatternList } from '@wordpress/block-editor';
+import { BlockPatternsList } from '@wordpress/block-editor';
 
-const MyBlockPatternList = () => (
-	<BlockPatternList
+const MyBlockPatternsList = () => (
+	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
-		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }
 	/>
 );
@@ -38,13 +32,6 @@ An array of block patterns that can be shown in the block patterns list.
 -   Type: `Array`
 -   Required: Yes
 
-#### shownPatterns
-
-An array of shown block patterns objects.
-
--   Type: `Array`
--   Required: Yes
-
 #### onClickPattern
 
 The performed event after a click on a block pattern. In most cases, the pattern is inserted in the block editor.
@@ -74,6 +61,14 @@ The aria label for the block patterns list.
 -   Required: No
 -   Default: `Block Patterns`
 
+#### showTitlesAsTooltip
+
+Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index 925410e760f6a4..0c7e54c3c62b24 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -1,63 +1,172 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
+import { cloneBlock } from '@wordpress/blocks';
+import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
+	Composite,
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { Icon, symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import BlockPatternsPaging from '../block-patterns-paging';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+
+const WithToolTip = ( { showTooltip, title, children } ) => {
+	if ( showTooltip ) {
+		return <Tooltip text={ title }>{ children }</Tooltip>;
+	}
+	return <>{ children }</>;
+};
 
-function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
+function BlockPattern( {
+	id,
+	isDraggable,
+	pattern,
+	onClick,
+	onHover,
+	showTitlesAsTooltip,
+	category,
+	isSelected,
+} ) {
+	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
+	const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
+
+	// When we have a selected category and the pattern is draggable, we need to update the
+	// pattern's categories in metadata to only contain the selected category, and pass this to
+	// InserterDraggableBlocks component. We do that because we use this information for pattern
+	// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
+	const patternBlocks = useMemo( () => {
+		if ( ! category || ! isDraggable ) {
+			return blocks;
+		}
+		return ( blocks ?? [] ).map( ( block ) => {
+			const clonedBlock = cloneBlock( block );
+			if (
+				clonedBlock.attributes.metadata?.categories?.includes(
+					category
+				)
+			) {
+				clonedBlock.attributes.metadata.categories = [ category ];
+			}
+			return clonedBlock;
+		} );
+	}, [ blocks, isDraggable, category ] );
 
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
-			blocks={ blocks }
-			isPattern={ !! pattern }
+			blocks={ patternBlocks }
+			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
 					className="block-editor-block-patterns-list__list-item"
 					draggable={ draggable }
-					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
+					onDragStart={ ( event ) => {
+						setIsDragging( true );
+						if ( onDragStart ) {
+							onHover?.( null );
+							onDragStart( event );
 						}
+					} }
+					onDragEnd={ ( event ) => {
+						setIsDragging( false );
+						if ( onDragEnd ) {
+							onDragEnd( event );
+						}
+					} }
+				>
+					<WithToolTip
+						showTooltip={ showTitlesAsTooltip && ! isUserPattern }
+						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>
+						<Composite.Item
+							render={
+								<div
+									role="option"
+									aria-label={ pattern.title }
+									aria-describedby={
+										pattern.description
+											? descriptionId
+											: undefined
+									}
+									className={ clsx(
+										'block-editor-block-patterns-list__item',
+										{
+											'block-editor-block-patterns-list__list-item-synced':
+												pattern.type ===
+													INSERTER_PATTERN_TYPES.user &&
+												! pattern.syncStatus,
+											'is-selected': isSelected,
+										}
+									) }
+								/>
+							}
+							id={ id }
+							onClick={ () => {
+								onClick( pattern, blocks );
+								onHover?.( null );
+							} }
+							onMouseEnter={ () => {
+								if ( isDragging ) {
+									return;
+								}
+								onHover?.( pattern );
+							} }
+							onMouseLeave={ () => onHover?.( null ) }
+						>
+							<BlockPreview.Async
+								placeholder={ <BlockPatternPlaceholder /> }
+							>
+								<BlockPreview
+									blocks={ blocks }
+									viewportWidth={ viewportWidth }
+								/>
+							</BlockPreview.Async>
+							{ ( ! showTitlesAsTooltip || isUserPattern ) && (
+								<HStack
+									className="block-editor-patterns__pattern-details"
+									spacing={ 2 }
+								>
+									{ isUserPattern && ! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
+										</div>
+									) }
+									<div className="block-editor-block-patterns-list__item-title">
+										{ pattern.title }
+									</div>
+								</HStack>
+							) }
+
+							{ !! pattern.description && (
+								<VisuallyHidden id={ descriptionId }>
+									{ pattern.description }
+								</VisuallyHidden>
+							) }
+						</Composite.Item>
+					</WithToolTip>
 				</div>
 			) }
 		</InserterDraggableBlocks>
@@ -70,38 +179,64 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList( {
-	isDraggable,
-	blockPatterns,
-	shownPatterns,
-	onClickPattern,
-	orientation,
-	label = __( 'Block Patterns' ),
-} ) {
-	const composite = useCompositeState( { orientation } );
+function BlockPatternsList(
+	{
+		isDraggable,
+		blockPatterns,
+		onHover,
+		onClickPattern,
+		orientation,
+		label = __( 'Block patterns' ),
+		category,
+		showTitlesAsTooltip,
+		pagingProps,
+	},
+	ref
+) {
+	const [ activeCompositeId, setActiveCompositeId ] = useState( undefined );
+	const [ activePattern, setActivePattern ] = useState( null ); // State to track active pattern
+
+	useEffect( () => {
+		// Reset the active composite item whenever the available patterns change,
+		// to make sure that Composite widget can receive focus correctly when its
+		// composite items change. The first composite item will receive focus.
+		const firstCompositeItemId = blockPatterns[ 0 ]?.name;
+		setActiveCompositeId( firstCompositeItemId );
+	}, [ blockPatterns ] );
+
+	const handleClickPattern = ( pattern, blocks ) => {
+		setActivePattern( pattern.name );
+		onClickPattern( pattern, blocks );
+	};
+
 	return (
 		<Composite
-			{ ...composite }
+			orientation={ orientation }
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
+			ref={ ref }
 		>
-			{ blockPatterns.map( ( pattern ) => {
-				const isShown = shownPatterns.includes( pattern );
-				return isShown ? (
-					<BlockPattern
-						key={ pattern.name }
-						pattern={ pattern }
-						onClick={ onClickPattern }
-						isDraggable={ isDraggable }
-						composite={ composite }
-					/>
-				) : (
-					<BlockPatternPlaceholder key={ pattern.name } />
-				);
-			} ) }
+			{ blockPatterns.map( ( pattern ) => (
+				<BlockPattern
+					key={ pattern.name }
+					id={ pattern.name }
+					pattern={ pattern }
+					onClick={ handleClickPattern }
+					onHover={ onHover }
+					isDraggable={ isDraggable }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					category={ category }
+					isSelected={
+						!! activePattern && activePattern === pattern.name
+					}
+				/>
+			) ) }
+			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);
 }
 
-export default BlockPatternList;
+export default forwardRef( BlockPatternsList );
diff --git a/packages/block-editor/src/components/block-patterns-list/stories/fixtures.js b/packages/block-editor/src/components/block-patterns-list/stories/fixtures.js
new file mode 100644
index 00000000000000..0fd895bbe1716d
--- /dev/null
+++ b/packages/block-editor/src/components/block-patterns-list/stories/fixtures.js
@@ -0,0 +1,834 @@
+export default [
+	{
+		name: 'test/1',
+		title: 'Centered image with two-tone background color',
+		blocks: [
+			{
+				clientId: '035ea9e6-cf5a-4631-a11e-29f3f696f836',
+				name: 'core/cover',
+				isValid: true,
+				attributes: {
+					useFeaturedImage: false,
+					alt: '',
+					hasParallax: false,
+					isRepeated: false,
+					dimRatio: 100,
+					backgroundType: 'image',
+					minHeight: 66,
+					minHeightUnit: 'vh',
+					customGradient:
+						'linear-gradient(90deg,rgb(35,74,20) 50%,rgb(225,137,116) 50%)',
+					isDark: false,
+					tagName: 'div',
+					align: 'full',
+					style: {
+						spacing: {
+							padding: {
+								top: '5vw',
+								right: '5vw',
+								bottom: '5vw',
+								left: '5vw',
+							},
+							margin: {
+								top: '0',
+							},
+						},
+					},
+				},
+				innerBlocks: [
+					{
+						clientId: '57c3e044-137d-456d-8426-20768e07f09f',
+						name: 'core/group',
+						isValid: true,
+						attributes: {
+							tagName: 'div',
+							style: {
+								spacing: {
+									blockGap: '0px',
+								},
+								layout: {
+									selfStretch: 'fill',
+									flexSize: null,
+								},
+							},
+							layout: {
+								type: 'constrained',
+								contentSize: '600px',
+								wideSize: '1200px',
+							},
+						},
+						innerBlocks: [
+							{
+								clientId:
+									'9e251315-0ea5-4849-9e1a-974de0981f51',
+								name: 'core/spacer',
+								isValid: true,
+								attributes: {
+									height: '100px',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'd83373a3-bdc3-44d6-9f6f-5a36ef8d637c',
+								name: 'core/image',
+								isValid: true,
+								attributes: {
+									url: 'https://pd.w.org/2022/03/3866241b433db4ee2.96648572.jpeg',
+									alt: '',
+									caption: '',
+									sizeSlug: 'large',
+									className: 'is-style-default',
+									style: {
+										color: {
+											duotone: [ '#000000', '#ffffff' ],
+										},
+									},
+								},
+								innerBlocks: [],
+								originalContent:
+									'<figure class="wp-block-image size-large is-style-default"><img src="https://pd.w.org/2022/03/3866241b433db4ee2.96648572.jpeg" alt="" /></figure>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'56e72331-1213-466f-bd14-1131a56b2c95',
+								name: 'core/spacer',
+								isValid: true,
+								attributes: {
+									height: '48px',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'851c15bc-f5cf-4780-838e-6bfea2b09b30',
+								name: 'core/heading',
+								isValid: true,
+								attributes: {
+									textAlign: 'center',
+									content: 'Etcetera',
+									level: 2,
+									align: 'wide',
+									style: {
+										typography: {
+											fontSize: '50px',
+											fontStyle: 'normal',
+											fontWeight: '400',
+											textTransform: 'uppercase',
+											letterSpacing: '32px',
+											lineHeight: '1',
+										},
+										spacing: {
+											padding: {
+												left: '32px',
+											},
+										},
+									},
+									textColor: 'white',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<h2 class="wp-block-heading alignwide has-text-align-center has-white-color has-text-color" style="padding-left:32px;font-size:50px;font-style:normal;font-weight:400;letter-spacing:32px;line-height:1;text-transform:uppercase">Etcetera</h2>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'a734e600-5b98-47c4-982d-c98e8c8b78a2',
+								name: 'core/spacer',
+								isValid: true,
+								attributes: {
+									height: '100px',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>',
+								validationIssues: [],
+							},
+						],
+						originalContent:
+							'<div class="wp-block-group">\n\n\n\n\n\n\n\n</div>',
+						validationIssues: [],
+					},
+				],
+				originalContent:
+					'<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient" style="background:linear-gradient(90deg,rgb(35,74,20) 50%,rgb(225,137,116) 50%)"></span><div class="wp-block-cover__inner-container"></div></div>',
+				validationIssues: [],
+			},
+		],
+	},
+	{
+		name: 'test/2',
+		title: 'Fullwidth, vertically aligned headline on right with description on left',
+		blocks: [
+			{
+				clientId: 'efa29ce0-cf43-421b-b9e6-46f52f17d943',
+				name: 'core/cover',
+				isValid: true,
+				attributes: {
+					alt: '',
+					hasParallax: false,
+					isRepeated: false,
+					dimRatio: 100,
+					customOverlayColor: '#e68b14',
+					backgroundType: 'image',
+					isDark: false,
+					useFeaturedImage: false,
+					tagName: 'div',
+					align: 'full',
+					style: {
+						spacing: {
+							padding: {
+								top: '5vw',
+								right: '5vw',
+								bottom: '5vw',
+								left: '5vw',
+							},
+							margin: {
+								top: '0',
+							},
+						},
+					},
+					isUserOverlayColor: true,
+				},
+				innerBlocks: [
+					{
+						clientId: '4e50914f-9c9c-471a-84ad-4a22b514a393',
+						name: 'core/group',
+						isValid: true,
+						attributes: {
+							tagName: 'div',
+							layout: {
+								type: 'flex',
+								flexWrap: 'wrap',
+								verticalAlignment: 'top',
+							},
+						},
+						innerBlocks: [
+							{
+								clientId:
+									'72b5d32d-35df-4530-8c81-ce67baaf34d1',
+								name: 'core/group',
+								isValid: true,
+								attributes: {
+									tagName: 'div',
+									style: {
+										layout: {
+											selfStretch: 'fixed',
+											flexSize: '320px',
+										},
+										spacing: {
+											blockGap: '24px',
+										},
+									},
+									layout: {
+										type: 'default',
+									},
+								},
+								innerBlocks: [
+									{
+										clientId:
+											'86b7c5b3-2de6-42ff-9d41-d38dd267a122',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											content:
+												"Let 'em Roll is an album by American organist Big John Patton recorded in 1965 and released on the Blue Note label.",
+											dropCap: false,
+											style: {
+												layout: {
+													selfStretch: 'fixed',
+													flexSize: '330px',
+												},
+												typography: {
+													fontSize: '17px',
+													fontStyle: 'normal',
+													fontWeight: '300',
+													lineHeight: '1.4',
+													textTransform: 'none',
+													textDecoration: 'none',
+													letterSpacing: '0px',
+												},
+											},
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p style="font-size:17px;font-style:normal;font-weight:300;letter-spacing:0px;line-height:1.4;text-decoration:none;text-transform:none">Let \'em Roll is an album by American organist Big John Patton recorded in 1965 and released on the Blue Note label.</p>',
+										validationIssues: [],
+									},
+									{
+										clientId:
+											'50d8d1c7-05dd-41d4-af67-29449e818ef7',
+										name: 'core/buttons',
+										isValid: true,
+										attributes: {},
+										innerBlocks: [
+											{
+												clientId:
+													'3e26f576-a29a-4947-85f2-1454ea85db60',
+												name: 'core/button',
+												isValid: true,
+												attributes: {
+													tagName: 'a',
+													type: 'button',
+													text: 'Shop Now',
+													backgroundColor: 'black',
+													textColor: 'white',
+													style: {
+														typography: {
+															fontSize: '17px',
+															fontStyle: 'normal',
+															fontWeight: '700',
+															textDecoration:
+																'none',
+															textTransform:
+																'uppercase',
+															letterSpacing:
+																'0px',
+														},
+														spacing: {
+															padding: {
+																top: '14px',
+																bottom: '14px',
+																left: '36px',
+																right: '36px',
+															},
+														},
+														border: {
+															radius: '0px',
+															top: {
+																radius: '0px',
+																width: '0px',
+																style: 'none',
+															},
+															right: {
+																radius: '0px',
+																width: '0px',
+																style: 'none',
+															},
+															bottom: {
+																radius: '0px',
+																width: '0px',
+																style: 'none',
+															},
+															left: {
+																radius: '0px',
+																width: '0px',
+																style: 'none',
+															},
+														},
+													},
+												},
+												innerBlocks: [],
+												originalContent:
+													'<div class="wp-block-button has-custom-font-size" style="font-size:17px;font-style:normal;font-weight:700;letter-spacing:0px;text-decoration:none;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:0px;border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-style:none;border-bottom-width:0px;border-left-style:none;border-left-width:0px;padding-top:14px;padding-right:36px;padding-bottom:14px;padding-left:36px">Shop Now</a></div>',
+												validationIssues: [],
+											},
+										],
+										originalContent:
+											'<div class="wp-block-buttons"></div>',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-group">\n\n</div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'e8176dce-481f-4454-8e01-13bc5382e0fd',
+								name: 'core/group',
+								isValid: true,
+								attributes: {
+									tagName: 'div',
+									style: {
+										spacing: {
+											blockGap: '0px',
+										},
+										layout: {
+											selfStretch: 'fill',
+											flexSize: null,
+										},
+									},
+									layout: {
+										type: 'default',
+									},
+								},
+								innerBlocks: [
+									{
+										clientId:
+											'738291ae-b0d1-4867-90b5-f35b999ca407',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											align: 'right',
+											content: "Let<br>'EM<br>Roll",
+											dropCap: false,
+											style: {
+												typography: {
+													fontSize: '148px',
+													textTransform: 'uppercase',
+													fontStyle: 'normal',
+													fontWeight: '700',
+													lineHeight: '0.8',
+													letterSpacing: '-4px',
+												},
+											},
+											textColor: 'black',
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Let<br>\'EM<br>Roll</p>',
+										validationIssues: [],
+									},
+									{
+										clientId:
+											'331df46f-7623-49a1-8031-7c421bddc15a',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											align: 'right',
+											content: 'Big<br>John<br>Patton',
+											dropCap: false,
+											style: {
+												typography: {
+													fontSize: '148px',
+													textTransform: 'uppercase',
+													fontStyle: 'normal',
+													fontWeight: '700',
+													lineHeight: '0.8',
+													letterSpacing: '-4px',
+												},
+											},
+											textColor: 'white',
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p class="has-text-align-right has-white-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Big<br>John<br>Patton</p>',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-group">\n\n</div>',
+								validationIssues: [],
+							},
+						],
+						originalContent:
+							'<div class="wp-block-group">\n\n</div>',
+						validationIssues: [],
+					},
+				],
+				originalContent:
+					'<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#e68b14"></span><div class="wp-block-cover__inner-container"></div></div>',
+				validationIssues: [],
+			},
+		],
+	},
+	{
+		name: 'test/3',
+		title: 'Two columns of text with offset heading',
+		blocks: [
+			{
+				clientId: 'da715d18-2126-4be0-bf13-3328419f220a',
+				name: 'core/group',
+				isValid: true,
+				attributes: {
+					tagName: 'div',
+					align: 'full',
+					style: {
+						color: {
+							background: '#f2f0e9',
+						},
+					},
+				},
+				innerBlocks: [
+					{
+						clientId: '8a89e4af-1f70-4545-9d1e-887ff50a141d',
+						name: 'core/spacer',
+						isValid: true,
+						attributes: {
+							height: '70px',
+						},
+						innerBlocks: [],
+						originalContent:
+							'<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>',
+						validationIssues: [],
+					},
+					{
+						clientId: '4ab42169-0fcd-416a-bd34-487f6a4e33ad',
+						name: 'core/columns',
+						isValid: true,
+						attributes: {
+							verticalAlignment: 'center',
+							isStackedOnMobile: true,
+							align: 'wide',
+						},
+						innerBlocks: [
+							{
+								clientId:
+									'88b53c37-16dc-4396-b9bc-6cc115411d9a',
+								name: 'core/column',
+								isValid: true,
+								attributes: {
+									width: '50%',
+								},
+								innerBlocks: [
+									{
+										clientId:
+											'1b5a12e4-06cf-4f78-b665-7440771d0025',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											content:
+												'<strong>Oceanic Inspiration</strong>',
+											dropCap: false,
+											style: {
+												typography: {
+													lineHeight: '1.1',
+													fontSize: '30px',
+												},
+												color: {
+													text: '#000000',
+												},
+											},
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p class="has-text-color" style="color:#000000;font-size:30px;line-height:1.1"><strong>Oceanic Inspiration</strong></p>',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-column" style="flex-basis:50%"></div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'82b7e2aa-dcd8-4b34-a2a9-d239192fed71',
+								name: 'core/column',
+								isValid: true,
+								attributes: {
+									width: '50%',
+								},
+								innerBlocks: [
+									{
+										clientId:
+											'b0fbba51-f3ec-40d5-91d6-64a24ae223f4',
+										name: 'core/separator',
+										isValid: true,
+										attributes: {
+											className: 'is-style-wide',
+											opacity: 'css',
+											style: {
+												color: {
+													background: '#000000',
+												},
+											},
+										},
+										innerBlocks: [],
+										originalContent:
+											'<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#000000;color:#000000" />',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-column" style="flex-basis:50%"></div>',
+								validationIssues: [],
+							},
+						],
+						originalContent:
+							'<div class="wp-block-columns alignwide are-vertically-aligned-center">\n\n</div>',
+						validationIssues: [],
+					},
+					{
+						clientId: '72d3dc7f-bbbe-4088-b556-a32c07191068',
+						name: 'core/columns',
+						isValid: true,
+						attributes: {
+							isStackedOnMobile: true,
+							align: 'wide',
+						},
+						innerBlocks: [
+							{
+								clientId:
+									'cf3abb5c-eee8-4314-af70-022b4f7e5bc4',
+								name: 'core/column',
+								isValid: true,
+								attributes: {},
+								innerBlocks: [],
+								originalContent:
+									'<div class="wp-block-column"></div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'6978a278-bcf8-4244-9e99-bf5b56fe0f5e',
+								name: 'core/column',
+								isValid: true,
+								attributes: {},
+								innerBlocks: [
+									{
+										clientId:
+											'26a6b210-07b6-49b1-8c0b-41d0760562a5',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											content:
+												'Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.',
+											dropCap: false,
+											style: {
+												color: {
+													text: '#000000',
+												},
+											},
+											fontSize: 'extra-small',
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p class="has-text-color has-extra-small-font-size" style="color:#000000">Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.</p>',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-column"></div>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'53ac5018-2b60-429e-b893-fce01f8bad24',
+								name: 'core/column',
+								isValid: true,
+								attributes: {},
+								innerBlocks: [
+									{
+										clientId:
+											'10a12c7d-77b5-46c7-8215-ff2f94ed4e27',
+										name: 'core/paragraph',
+										isValid: true,
+										attributes: {
+											content:
+												'No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.',
+											dropCap: false,
+											style: {
+												color: {
+													text: '#000000',
+												},
+											},
+											fontSize: 'extra-small',
+										},
+										innerBlocks: [],
+										originalContent:
+											'<p class="has-text-color has-extra-small-font-size" style="color:#000000">No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.</p>',
+										validationIssues: [],
+									},
+								],
+								originalContent:
+									'<div class="wp-block-column"></div>',
+								validationIssues: [],
+							},
+						],
+						originalContent:
+							'<div class="wp-block-columns alignwide">\n\n\n\n</div>',
+						validationIssues: [],
+					},
+					{
+						clientId: 'f401521c-d5d4-486a-b069-47350b032dc9',
+						name: 'core/spacer',
+						isValid: true,
+						attributes: {
+							height: '40px',
+						},
+						innerBlocks: [],
+						originalContent:
+							'<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>',
+						validationIssues: [],
+					},
+				],
+				originalContent:
+					'<div class="wp-block-group alignfull has-background" style="background-color:#f2f0e9">\n\n\n\n\n\n</div>',
+				validationIssues: [],
+			},
+		],
+	},
+	{
+		name: 'test/4',
+		title: 'Offset text with a brutalist design vibe',
+		blocks: [
+			{
+				clientId: 'ac947e62-0568-4fa2-85a0-927b86c8ae42',
+				name: 'core/cover',
+				isValid: true,
+				attributes: {
+					alt: '',
+					hasParallax: false,
+					isRepeated: false,
+					dimRatio: 100,
+					customOverlayColor: '#ffb43c',
+					backgroundType: 'image',
+					minHeight: 66,
+					minHeightUnit: 'vh',
+					isDark: false,
+					useFeaturedImage: false,
+					tagName: 'div',
+					align: 'full',
+					textColor: 'black',
+					style: {
+						spacing: {
+							padding: {
+								top: '48px',
+								right: '48px',
+								bottom: '48px',
+								left: '48px',
+							},
+							margin: {
+								top: '0',
+							},
+						},
+					},
+					isUserOverlayColor: true,
+				},
+				innerBlocks: [
+					{
+						clientId: 'a23ab6aa-b6dc-4148-a7fc-a4ad04deb738',
+						name: 'core/group',
+						isValid: true,
+						attributes: {
+							tagName: 'div',
+							style: {
+								spacing: {
+									blockGap: '0px',
+								},
+							},
+							layout: {
+								type: 'constrained',
+								wideSize: '1200px',
+								contentSize: '800px',
+							},
+						},
+						innerBlocks: [
+							{
+								clientId:
+									'2cd000fa-8e5b-4edc-8238-5912c5e397d2',
+								name: 'core/paragraph',
+								isValid: true,
+								attributes: {
+									align: 'left',
+									content:
+										'<mark style="color:#a65a00" class="has-inline-color">✴︎</mark> Walk',
+									dropCap: false,
+									style: {
+										typography: {
+											fontSize: '148px',
+											textTransform: 'uppercase',
+											fontStyle: 'normal',
+											fontWeight: '700',
+											lineHeight: '0.9',
+											letterSpacing: '-2px',
+										},
+									},
+									textColor: 'black',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase"><mark style="color:#a65a00" class="has-inline-color">✴︎</mark> Walk</p>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'2d747e99-c672-4d7f-91d4-f8f03d295f2b',
+								name: 'core/paragraph',
+								isValid: true,
+								attributes: {
+									align: 'right',
+									content: 'In the',
+									dropCap: false,
+									style: {
+										typography: {
+											fontSize: '148px',
+											textTransform: 'uppercase',
+											fontStyle: 'normal',
+											fontWeight: '700',
+											lineHeight: '0.9',
+											letterSpacing: '-2px',
+										},
+									},
+									textColor: 'black',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">In the</p>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'd63e34e7-8943-49ff-bc05-8749809f4117',
+								name: 'core/paragraph',
+								isValid: true,
+								attributes: {
+									align: 'left',
+									content: 'Park',
+									dropCap: false,
+									style: {
+										typography: {
+											fontSize: '148px',
+											textTransform: 'uppercase',
+											fontStyle: 'normal',
+											fontWeight: '700',
+											lineHeight: '0.9',
+											letterSpacing: '-2px',
+										},
+									},
+									textColor: 'black',
+								},
+								innerBlocks: [],
+								originalContent:
+									'<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">Park</p>',
+								validationIssues: [],
+							},
+							{
+								clientId:
+									'e996575b-4ada-43b1-8ae1-a6dbb2ec0ecc',
+								name: 'core/paragraph',
+								isValid: true,
+								attributes: {
+									align: 'center',
+									content: '—01.03',
+									dropCap: false,
+									style: {
+										typography: {
+											fontSize: '140px',
+											textTransform: 'uppercase',
+											fontStyle: 'italic',
+											fontWeight: '200',
+											letterSpacing: '0px',
+											lineHeight: '0.9',
+										},
+										color: {
+											text: '#a65a00',
+										},
+									},
+								},
+								innerBlocks: [],
+								originalContent:
+									'<p class="has-text-align-center has-text-color" style="color:#a65a00;font-size:140px;font-style:italic;font-weight:200;letter-spacing:0px;line-height:0.9;text-transform:uppercase">—01.03</p>',
+								validationIssues: [],
+							},
+						],
+						originalContent:
+							'<div class="wp-block-group">\n\n\n\n\n\n</div>',
+						validationIssues: [],
+					},
+				],
+				originalContent:
+					'<div class="wp-block-cover alignfull is-light has-black-color has-text-color" style="margin-top:0;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#ffb43c"></span><div class="wp-block-cover__inner-container"></div></div>',
+				validationIssues: [],
+			},
+		],
+	},
+];
diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js
new file mode 100644
index 00000000000000..ad9bffab762c23
--- /dev/null
+++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import patterns from './fixtures';
+
+const blockEditorSettings = {
+	styles: [ { css: blockLibraryStyles } ],
+};
+
+export default {
+	component: BlockPatternsList,
+	title: 'BlockEditor/BlockPatternsList',
+};
+
+export const Default = {
+	render: function Template( props ) {
+		return (
+			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
+				<BlockPatternsList { ...props } />
+			</ExperimentalBlockEditorProvider>
+		);
+	},
+	args: {
+		blockPatterns: patterns,
+		isDraggable: false,
+		label: 'Block patterns story',
+		showTitlesAsTooltip: false,
+	},
+	argTypes: {
+		blockPatterns: { description: 'The patterns to render.' },
+		shownPatterns: {
+			description:
+				'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.',
+		},
+		onClickPattern: { type: 'function' },
+		onHover: { type: 'function' },
+		showTitlesAsTooltip: {
+			description:
+				'Whether to render the title of each pattern as a tooltip. If enabled',
+		},
+		orientation: {
+			description: 'Orientation for the underlying composite widget.',
+			table: {
+				defaultValue: { summary: 'both' },
+				type: { summary: 'string' },
+			},
+		},
+		category: { description: 'The currently selected pattern category.' },
+		isDraggable: {
+			description: 'Whether the pattern list item should be draggable.',
+		},
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+	},
+};
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
index 8873e9cf7121d6..8b1b0b54c9b1a0 100644
--- a/packages/block-editor/src/components/block-patterns-list/style.scss
+++ b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-bottom: $grid-unit-30;
+	margin-bottom: $grid-unit-20;
 
 	// The list item contains absolutely positioned visually hidden text,
 	// so make this container relative. This prevents the bug experienced in
@@ -11,41 +11,76 @@
 		min-height: 100px;
 	}
 
-	&[draggable="true"] .block-editor-block-preview__container {
+	&[draggable="true"] {
 		cursor: grab;
 	}
 }
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
+	// This is derived from the top padding set on
+	// `.block-editor-block-patterns-explorer__list`
+	scroll-margin-top: $grid-unit-30;
+	// This is derived from the bottom padding set on
+	// `.block-editor-block-patterns-explorer__list` and
+	// the bottom margin set on `...__list-item` above
+	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
+
+	outline: 0;
+
+	.block-editor-block-patterns-list__item-title {
+		flex-grow: 1;
+		font-size: $helptext-font-size;
+		text-align: left;
+	}
 
 	.block-editor-block-preview__container {
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: 4px;
+		border-radius: $radius-medium;
+
+		&::after {
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+			border-radius: $radius-medium;
+
+			transition: outline 0.1s linear;
+			@include reduce-motion("transition");
+		}
 	}
 
-	.block-editor-block-patterns-list__item-title {
-		padding-top: $grid-unit-10;
-		font-size: 12px;
-		text-align: center;
+	// Selected
+	&.is-selected .block-editor-block-preview__container::after {
+		outline-color: $gray-900;
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
 	}
 
-	&:hover .block-editor-block-preview__container {
-		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+	// Hover state
+	&:hover .block-editor-block-preview__container::after {
+		outline-color: rgba($black, 0.3);
 	}
 
-	&: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);
+	// Focused state
+	&[data-focus-visible] .block-editor-block-preview__container::after {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+	}
 
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
+	.block-editor-patterns__pattern-details:not(:empty) {
+		align-items: center;
+		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-05; // Add more space for labels on user-created patterns.
 	}
 
+	.block-editor-patterns__pattern-icon-wrapper {
+		min-width: 24px;
+		height: 24px;
 
-	&:hover .block-editor-block-patterns-list__item-title,
-	&:focus .block-editor-block-patterns-list__item-title {
-		color: var(--wp-admin-theme-color);
+		.block-editor-patterns__pattern-icon {
+			fill: var(--wp-block-synced-color);
+		}
 	}
 }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
new file mode 100644
index 00000000000000..d4d513902ca705
--- /dev/null
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+
+export default function Pagination( {
+	currentPage,
+	numPages,
+	changePage,
+	totalItems,
+} ) {
+	return (
+		<VStack className="block-editor-patterns__grid-pagination-wrapper">
+			<Text variant="muted">
+				{ sprintf(
+					// translators: %s: Total number of patterns.
+					_n( '%s item', '%s items', totalItems ),
+					totalItems
+				) }
+			</Text>
+
+			{ numPages > 1 && (
+				<HStack
+					expanded={ false }
+					spacing={ 3 }
+					justify="flex-start"
+					className="block-editor-patterns__grid-pagination"
+				>
+					<HStack
+						expanded={ false }
+						spacing={ 1 }
+						className="block-editor-patterns__grid-pagination-previous"
+					>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'First page' ) }
+							size="compact"
+							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
+						>
+							<span>«</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage - 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'Previous page' ) }
+							size="compact"
+							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
+						>
+							<span>‹</span>
+						</Button>
+					</HStack>
+					<Text variant="muted">
+						{ sprintf(
+							// translators: 1: Current page number. 2: Total number of pages.
+							_x( '%1$s of %2$s', 'paging' ),
+							currentPage,
+							numPages
+						) }
+					</Text>
+					<HStack
+						expanded={ false }
+						spacing={ 1 }
+						className="block-editor-patterns__grid-pagination-next"
+					>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage + 1 ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Next page' ) }
+							size="compact"
+							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
+						>
+							<span>›</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( numPages ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Last page' ) }
+							size="compact"
+							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
+						>
+							<span>»</span>
+						</Button>
+					</HStack>
+				</HStack>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
new file mode 100644
index 00000000000000..85d39f9a36577c
--- /dev/null
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -0,0 +1,23 @@
+.block-editor-patterns__grid-pagination-wrapper {
+
+	.block-editor-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		padding: $grid-unit-05;
+		justify-content: center;
+	}
+}
+
+.show-icon-labels {
+	.block-editor-patterns__grid-pagination-button {
+		width: auto;
+		// Hide the button icons when labels are set to display...
+		span {
+			display: none;
+		}
+		// ... and display labels.
+		// Uses ::before as ::after is already used for active tab styling.
+		&::before {
+			content: attr(aria-label);
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md
index c60da7a982ae87..c50e8c90647f69 100644
--- a/packages/block-editor/src/components/block-popover/README.md
+++ b/packages/block-editor/src/components/block-popover/README.md
@@ -30,7 +30,7 @@ This determines whether the block popover always shifts into the viewport or rem
 -	Required: No
 -	Default: `true`
 
-## BlockPopoverInbetween
+## BlockPopoverInbetween - Private Component
 
 ### Props
 
diff --git a/packages/block-editor/src/components/block-popover/cover.js b/packages/block-editor/src/components/block-popover/cover.js
new file mode 100644
index 00000000000000..401431defe4fd5
--- /dev/null
+++ b/packages/block-editor/src/components/block-popover/cover.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { PrivateBlockPopover } from '.';
+
+function BlockPopoverCover(
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
+	ref
+) {
+	bottomClientId ??= clientId;
+
+	const selectedElement = useBlockElement( clientId );
+
+	return (
+		<PrivateBlockPopover
+			ref={ ref }
+			clientId={ clientId }
+			bottomClientId={ bottomClientId }
+			shift={ shift }
+			{ ...props }
+		>
+			{ selectedElement && clientId === bottomClientId ? (
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
+					{ children }
+				</CoverContainer>
+			) : (
+				children
+			) }
+		</PrivateBlockPopover>
+	);
+}
+
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
+	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
+	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			setWidth( selectedElement.offsetWidth );
+			setHeight( selectedElement.offsetHeight );
+		} );
+		observer.observe( selectedElement, { box: 'border-box' } );
+		return () => observer.disconnect();
+	}, [ selectedElement ] );
+
+	const style = useMemo( () => {
+		return {
+			position: 'absolute',
+			width,
+			height,
+			...additionalStyles,
+		};
+	}, [ width, height, additionalStyles ] );
+
+	return <div style={ style }>{ children }</div>;
+}
+
+export default forwardRef( BlockPopoverCover );
diff --git a/packages/block-editor/src/components/block-popover/drop-zone.js b/packages/block-editor/src/components/block-popover/drop-zone.js
index c26f28127022d6..1174c619cb3f43 100644
--- a/packages/block-editor/src/components/block-popover/drop-zone.js
+++ b/packages/block-editor/src/components/block-popover/drop-zone.js
@@ -9,7 +9,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockPopover from './index';
+import BlockPopoverCover from './cover';
 
 const animateVariants = {
 	hide: { opacity: 0, scaleY: 0.75 },
@@ -38,9 +38,8 @@ function BlockDropZonePopover( {
 	const reducedMotion = useReducedMotion();
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-block-popover__drop-zone"
@@ -56,7 +55,7 @@ function BlockDropZonePopover( {
 				}
 				className="block-editor-block-popover__drop-zone-foreground"
 			/>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }
 
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index 9de5bd36637055..1d7c1766732409 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import { isRTL } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
@@ -33,6 +33,8 @@ function BlockPopoverInbetween( {
 	children,
 	__unstablePopoverSlot,
 	__unstableContentRef,
+	operation = 'insert',
+	nearestSide = 'right',
 	...props
 } ) {
 	// This is a temporary hack to get the inbetween inserter to recompute properly.
@@ -68,53 +70,6 @@ function BlockPopoverInbetween( {
 	const previousElement = useBlockElement( previousClientId );
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
-	const style = useMemo( () => {
-		if (
-			// popoverRecomputeCounter is by definition always equal or greater than 0.
-			// This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverRecomputeCounter < 0 ||
-			( ! previousElement && ! nextElement ) ||
-			! isVisible
-		) {
-			return {};
-		}
-
-		const previousRect = previousElement
-			? previousElement.getBoundingClientRect()
-			: null;
-		const nextRect = nextElement
-			? nextElement.getBoundingClientRect()
-			: null;
-
-		if ( isVertical ) {
-			return {
-				width: previousRect ? previousRect.width : nextRect.width,
-				height:
-					nextRect && previousRect
-						? nextRect.top - previousRect.bottom
-						: 0,
-			};
-		}
-
-		let width = 0;
-		if ( previousRect && nextRect ) {
-			width = isRTL()
-				? previousRect.left - nextRect.right
-				: nextRect.left - previousRect.right;
-		}
-
-		return {
-			width,
-			height: previousRect ? previousRect.height : nextRect.height,
-		};
-	}, [
-		previousElement,
-		nextElement,
-		isVertical,
-		popoverRecomputeCounter,
-		isVisible,
-	] );
 
 	const popoverAnchor = useMemo( () => {
 		if (
@@ -128,10 +83,13 @@ function BlockPopoverInbetween( {
 			return undefined;
 		}
 
-		const { ownerDocument } = previousElement || nextElement;
+		const contextElement =
+			operation === 'group'
+				? nextElement || previousElement
+				: previousElement || nextElement;
 
 		return {
-			ownerDocument,
+			contextElement,
 			getBoundingClientRect() {
 				const previousRect = previousElement
 					? previousElement.getBoundingClientRect()
@@ -142,37 +100,61 @@ function BlockPopoverInbetween( {
 
 				let left = 0;
 				let top = 0;
+				let width = 0;
+				let height = 0;
 
-				if ( isVertical ) {
+				if ( operation === 'group' ) {
+					const targetRect = nextRect || previousRect;
+					top = targetRect.top;
+					// No spacing is likely around blocks in this operation.
+					// So width of the inserter containing rect is set to 0.
+					width = 0;
+					height = targetRect.bottom - targetRect.top;
+					// Popover calculates its distance from mid-block so some
+					// adjustments are needed to make it appear in the right place.
+					left =
+						nearestSide === 'left'
+							? targetRect.left - 2
+							: targetRect.right - 2;
+				} else if ( isVertical ) {
 					// vertical
 					top = previousRect ? previousRect.bottom : nextRect.top;
-
-					if ( isRTL() ) {
-						// vertical, rtl
-						left = previousRect
-							? previousRect.right
-							: nextRect.right;
-					} else {
-						// vertical, ltr
-						left = previousRect ? previousRect.left : nextRect.left;
-					}
+					width = previousRect ? previousRect.width : nextRect.width;
+					height =
+						nextRect && previousRect
+							? nextRect.top - previousRect.bottom
+							: 0;
+					left = previousRect ? previousRect.left : nextRect.left;
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
+					height = previousRect
+						? previousRect.height
+						: nextRect.height;
 
 					if ( isRTL() ) {
 						// non vertical, rtl
-						left = previousRect
-							? previousRect.left
-							: nextRect.right;
+						left = nextRect ? nextRect.right : previousRect.left;
+						width =
+							previousRect && nextRect
+								? previousRect.left - nextRect.right
+								: 0;
 					} else {
 						// non vertical, ltr
 						left = previousRect
 							? previousRect.right
 							: nextRect.left;
+						width =
+							previousRect && nextRect
+								? nextRect.left - previousRect.right
+								: 0;
 					}
+
+					// Avoid a negative width which happens when the next rect
+					// is on the next line.
+					width = Math.max( width, 0 );
 				}
 
-				return new window.DOMRect( left, top, 0, 0 );
+				return new window.DOMRect( left, top, width, height );
 			},
 		};
 	}, [
@@ -181,6 +163,8 @@ function BlockPopoverInbetween( {
 		popoverRecomputeCounter,
 		isVertical,
 		isVisible,
+		operation,
+		nearestSide,
 	] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
@@ -255,25 +239,23 @@ function BlockPopoverInbetween( {
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }
 			{ ...props }
-			className={ classnames(
+			className={ clsx(
 				'block-editor-block-popover',
 				'block-editor-block-popover__inbetween',
 				props.className
 			) }
 			resize={ false }
 			flip={ false }
-			placement="bottom-start"
+			placement="overlay"
 			variant="unstyled"
 		>
-			<div
-				className="block-editor-block-popover__inbetween-container"
-				style={ style }
-			>
+			<div className="block-editor-block-popover__inbetween-container">
 				{ children }
 			</div>
 		</Popover>
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 5382949684abd9..06409bc6e65f42 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,8 +18,9 @@ import {
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
+import { rectUnion, getElementBounds } from '../../utils/dom';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -28,8 +29,6 @@ function BlockPopover(
 		clientId,
 		bottomClientId,
 		children,
-		__unstableRefreshSize,
-		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
 		shift = true,
@@ -75,30 +74,6 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const style = useMemo( () => {
-		if (
-			// popoverDimensionsRecomputeCounter is by definition always equal or greater
-			// than 0. This check is only there to satisfy the correctness of the
-			// exhaustive-deps rule for the `useMemo` hook.
-			popoverDimensionsRecomputeCounter < 0 ||
-			! selectedElement ||
-			lastSelectedElement !== selectedElement
-		) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [
-		selectedElement,
-		lastSelectedElement,
-		__unstableRefreshSize,
-		popoverDimensionsRecomputeCounter,
-	] );
-
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
@@ -113,42 +88,20 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
-				const selectedBCR = selectedElement.getBoundingClientRect();
-				const lastSelectedBCR =
-					lastSelectedElement?.getBoundingClientRect();
-
-				// Get the biggest rectangle that encompasses completely the currently
-				// selected element and the last selected element:
-				// - for top/left coordinates, use the smaller numbers
-				// - for the bottom/right coordinates, use the largest numbers
-				const left = Math.min(
-					selectedBCR.left,
-					lastSelectedBCR?.left ?? Infinity
-				);
-				const top = Math.min(
-					selectedBCR.top,
-					lastSelectedBCR?.top ?? Infinity
-				);
-				const right = Math.max(
-					selectedBCR.right,
-					lastSelectedBCR.right ?? -Infinity
-				);
-				const bottom = Math.max(
-					selectedBCR.bottom,
-					lastSelectedBCR.bottom ?? -Infinity
-				);
-				const width = right - left;
-				const height = bottom - top;
-
-				return new window.DOMRect( left, top, width, height );
+				return lastSelectedElement
+					? rectUnion(
+							getElementBounds( selectedElement ),
+							getElementBounds( lastSelectedElement )
+					  )
+					: getElementBounds( selectedElement );
 			},
-			ownerDocument: selectedElement.ownerDocument,
+			contextElement: selectedElement,
 		};
 	}, [
+		popoverDimensionsRecomputeCounter,
+		selectedElement,
 		bottomClientId,
 		lastSelectedElement,
-		selectedElement,
-		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
@@ -163,22 +116,40 @@ function BlockPopover(
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			placement="top-start"
 			resize={ false }
 			flip={ false }
 			shift={ shift }
 			{ ...props }
-			className={ classnames(
-				'block-editor-block-popover',
-				props.className
-			) }
+			className={ clsx( 'block-editor-block-popover', props.className ) }
 			variant="unstyled"
 		>
-			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
-			{ ! __unstableCoverTarget && children }
+			{ children }
 		</Popover>
 	);
 }
 
-export default forwardRef( BlockPopover );
+export const PrivateBlockPopover = forwardRef( BlockPopover );
+
+const PublicBlockPopover = (
+	{ clientId, bottomClientId, children, ...props },
+	ref
+) => (
+	<PrivateBlockPopover
+		{ ...props }
+		bottomClientId={ bottomClientId }
+		clientId={ clientId }
+		__unstableContentRef={ undefined }
+		__unstablePopoverSlot={ undefined }
+		ref={ ref }
+	>
+		{ children }
+	</PrivateBlockPopover>
+);
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-popover/README.md
+ */
+export default forwardRef( PublicBlockPopover );
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
index e393e77c63b056..c49538378a12ca 100644
--- a/packages/block-editor/src/components/block-popover/style.scss
+++ b/packages/block-editor/src/components/block-popover/style.scss
@@ -57,6 +57,6 @@
 		position: absolute;
 		inset: 0;
 		background-color: var(--wp-admin-theme-color);
-		border-radius: 2px;
+		border-radius: $radius-small;
 	}
 }
diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
index 0da7348817cd85..5cce2e45cb54ff 100644
--- a/packages/block-editor/src/components/block-preview/README.md
+++ b/packages/block-editor/src/components/block-preview/README.md
@@ -28,9 +28,28 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 `viewportWidth` can be used to simulate how blocks look on different device sizes or to make sure make sure multiple previews will be rendered with the same scale, regardless of their content.
 
-### `__experimentalPadding`
+Set `viewportWidth` to `0` to make the viewport the same width as the container.
 
--   **Type** `Int`
--   **Default** `undefined`
+### minHeight
 
-Padding for the preview container body.
+Minimum height of the preview iframe in pixels.
+
+-   **Type:** `Int`
+-   **Default:** `undefined`
+
+### `additionalStyles`
+
+List of additional editor styles to load into the preview iframe. Each object
+should contain a `css` attribute. See `EditorStyles` for more info.
+
+```jsx
+<BlockPreview
+	blocks={ blocks }
+	additionalStyles={ [
+		{ css: 'body { padding: 16px; }' },
+	] }
+/>
+```
+
+-   **Type** `Array`
+-   **Default** `[]`
diff --git a/packages/block-editor/src/components/block-preview/async.js b/packages/block-editor/src/components/block-preview/async.js
new file mode 100644
index 00000000000000..ecbc9618f93ba2
--- /dev/null
+++ b/packages/block-editor/src/components/block-preview/async.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, flushSync } from '@wordpress/element';
+import { createQueue } from '@wordpress/priority-queue';
+
+const blockPreviewQueue = createQueue();
+
+/**
+ * Renders a component at the next idle time.
+ * @param {*} props
+ */
+export function Async( { children, placeholder } ) {
+	const [ shouldRender, setShouldRender ] = useState( false );
+
+	// In the future, we could try to use startTransition here, but currently
+	// react will batch all transitions, which means all previews will be
+	// rendered at the same time.
+	// https://react.dev/reference/react/startTransition#caveats
+	// > If there are multiple ongoing Transitions, React currently batches them
+	// > together. This is a limitation that will likely be removed in a future
+	// > release.
+
+	useEffect( () => {
+		const context = {};
+		blockPreviewQueue.add( context, () => {
+			// Synchronously run all renders so it consumes timeRemaining.
+			// See https://github.com/WordPress/gutenberg/pull/48238
+			flushSync( () => {
+				setShouldRender( true );
+			} );
+		} );
+		return () => {
+			blockPreviewQueue.cancel( context );
+		};
+	}, [] );
+
+	if ( ! shouldRender ) {
+		return placeholder;
+	}
+
+	return children;
+}
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index ddf4ee0ec75abd..835f379c09b987 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useResizeObserver, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { memo, useMemo } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
 
 /**
@@ -12,28 +12,30 @@ import { Disabled } from '@wordpress/components';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
-import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
-let MemoizedBlockList;
+const MemoizedBlockList = memo( BlockList );
 
 const MAX_HEIGHT = 2000;
+const EMPTY_ADDITIONAL_STYLES = [];
 
 function ScaledBlockPreview( {
 	viewportWidth,
 	containerWidth,
-	__experimentalPadding,
-	__experimentalMinHeight,
+	minHeight,
+	additionalStyles = EMPTY_ADDITIONAL_STYLES,
 } ) {
+	if ( ! viewportWidth ) {
+		viewportWidth = containerWidth;
+	}
+
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets, duotone } = useSelect( ( select ) => {
+	const { styles } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
-			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -43,37 +45,36 @@ function ScaledBlockPreview( {
 			return [
 				...styles,
 				{
-					css: 'body{height:auto;overflow:hidden;}',
+					css: 'body{height:auto;overflow:hidden;border:none;padding:0;}',
 					__unstableType: 'presets',
 				},
+				...additionalStyles,
 			];
 		}
 
 		return styles;
-	}, [ styles ] );
-
-	const svgFilters = useMemo( () => {
-		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
-	}, [ duotone ] );
-
-	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
+	}, [ styles, additionalStyles ] );
 
 	const scale = containerWidth / viewportWidth;
+	const aspectRatio = contentHeight
+		? containerWidth / ( contentHeight * scale )
+		: 0;
 	return (
 		<Disabled
 			className="block-editor-block-preview__content"
 			style={ {
 				transform: `scale(${ scale })`,
-				height: contentHeight * scale,
+				// Using width + aspect-ratio instead of height here triggers browsers' native
+				// handling of scrollbar's visibility. It prevents the flickering issue seen
+				// in https://github.com/WordPress/gutenberg/issues/52027.
+				// See https://github.com/WordPress/gutenberg/pull/52921 for more info.
+				aspectRatio,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
-				minHeight: __experimentalMinHeight,
+				minHeight,
 			} }
 		>
 			<Iframe
-				head={ <EditorStyles styles={ editorStyles } /> }
-				assets={ assets }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
@@ -83,7 +84,6 @@ function ScaledBlockPreview( {
 					);
 					documentElement.style.position = 'absolute';
 					documentElement.style.width = '100%';
-					bodyElement.style.padding = __experimentalPadding + 'px';
 
 					// Necessary for contentResizeListener to work.
 					bodyElement.style.boxSizing = 'border-box';
@@ -101,21 +101,13 @@ function ScaledBlockPreview( {
 					// See: https://github.com/WordPress/gutenberg/pull/38175.
 					maxHeight: MAX_HEIGHT,
 					minHeight:
-						scale !== 0 && scale < 1 && __experimentalMinHeight
-							? __experimentalMinHeight / scale
-							: __experimentalMinHeight,
+						scale !== 0 && scale < 1 && minHeight
+							? minHeight / scale
+							: minHeight,
 				} }
 			>
+				<EditorStyles styles={ editorStyles } />
 				{ contentResizeListener }
-				{
-					/* Filters need to be rendered before children to avoid Safari rendering issues. */
-					svgFilters.map( ( preset ) => (
-						<PresetDuotoneFilter
-							preset={ preset }
-							key={ preset.slug }
-						/>
-					) )
-				}
 				<MemoizedBlockList renderAppender={ false } />
 			</Iframe>
 		</Disabled>
diff --git a/packages/block-editor/src/components/block-preview/content.scss b/packages/block-editor/src/components/block-preview/content.scss
new file mode 100644
index 00000000000000..79cd9f70005b45
--- /dev/null
+++ b/packages/block-editor/src/components/block-preview/content.scss
@@ -0,0 +1,27 @@
+// Hide inserter from previews.
+.block-editor-block-preview__content-iframe .block-list-appender {
+	display: none;
+}
+
+.block-editor-block-preview__live-content {
+	* {
+		pointer-events: none;
+	}
+
+	// Hide the block appender, as the block is not editable in this context.
+	.block-list-appender {
+		display: none;
+	}
+
+	// Revert button disable styles to ensure that button styles render as they will on the
+	// front end of the site. For example, this ensures that Social Links icons display correctly.
+	.components-button:disabled {
+		opacity: initial;
+	}
+
+	// Hide placeholders.
+	.components-placeholder,
+	.block-editor-block-list__block[data-empty="true"] {
+		display: none;
+	}
+}
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 535a67438cad8e..62b137ff37194b 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,47 +9,88 @@ import classnames from 'classnames';
 import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import BlockEditorProvider from '../provider';
+import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
+import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
+import { Async } from './async';
+
+const EMPTY_ADDITIONAL_STYLES = [];
 
 export function BlockPreview( {
 	blocks,
-	__experimentalPadding = 0,
 	viewportWidth = 1200,
+	minHeight,
+	additionalStyles = EMPTY_ADDITIONAL_STYLES,
+	// Deprecated props:
 	__experimentalMinHeight,
+	__experimentalPadding,
 } ) {
+	if ( __experimentalMinHeight ) {
+		minHeight = __experimentalMinHeight;
+		deprecated( 'The __experimentalMinHeight prop', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'minHeight',
+		} );
+	}
+	if ( __experimentalPadding ) {
+		additionalStyles = [
+			...additionalStyles,
+			{ css: `body { padding: ${ __experimentalPadding }px; }` },
+		];
+		deprecated( 'The __experimentalPadding prop of BlockPreview', {
+			since: '6.2',
+			version: '6.4',
+			alternative: 'additionalStyles',
+		} );
+	}
+
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			isPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const renderedBlocks = useMemo(
 		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
 		[ blocks ]
 	);
+
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
+
 	return (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
 			<AutoHeightBlockPreview
 				viewportWidth={ viewportWidth }
-				__experimentalPadding={ __experimentalPadding }
-				__experimentalMinHeight={ __experimentalMinHeight }
+				minHeight={ minHeight }
+				additionalStyles={ additionalStyles }
 			/>
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
 
+const MemoizedBlockPreview = memo( BlockPreview );
+
+MemoizedBlockPreview.Async = Async;
+
 /**
  * BlockPreview renders a preview of a block or array of blocks.
  *
@@ -59,9 +100,9 @@ export function BlockPreview( {
  * @param {Array|Object} preview.blocks        A block instance (object) or an array of blocks to be previewed.
  * @param {number}       preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
-export default memo( BlockPreview );
+export default MemoizedBlockPreview;
 
 /**
  * This hook is used to lightly mark an element as a block preview wrapper
@@ -72,24 +113,24 @@ export default memo( BlockPreview );
  * returns. Optionally, you can also pass any other props through this hook, and
  * they will be merged and returned.
  *
- * @param {Object}    options                      Preview options.
- * @param {WPBlock[]} options.blocks               Block objects.
- * @param {Object}    options.props                Optional. Props to pass to the element. Must contain
- *                                                 the ref if one is defined.
- * @param {Object}    options.__experimentalLayout Layout settings to be used in the preview.
- *
+ * @param {Object}    options        Preview options.
+ * @param {WPBlock[]} options.blocks Block objects.
+ * @param {Object}    options.props  Optional. Props to pass to the element. Must contain
+ *                                   the ref if one is defined.
+ * @param {Object}    options.layout Layout settings to be used in the preview.
  */
-export function useBlockPreview( {
-	blocks,
-	props = {},
-	__experimentalLayout,
-} ) {
+export function useBlockPreview( { blocks, props = {}, layout } ) {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			focusMode: false, // Disable "Spotlight mode".
+			isPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const disabledRef = useDisabled();
@@ -100,18 +141,19 @@ export function useBlockPreview( {
 	);
 
 	const children = (
-		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			<BlockListItems
-				renderAppender={ false }
-				__experimentalLayout={ __experimentalLayout }
-			/>
-		</BlockEditorProvider>
+		<ExperimentalBlockEditorProvider
+			value={ renderedBlocks }
+			settings={ settings }
+		>
+			<EditorStyles />
+			<BlockListItems renderAppender={ false } layout={ layout } />
+		</ExperimentalBlockEditorProvider>
 	);
 
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-preview__live-content',
 			'components-disabled'
diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss
index 54dad77698d940..9bdd85f66445f8 100644
--- a/packages/block-editor/src/components/block-preview/style.scss
+++ b/packages/block-editor/src/components/block-preview/style.scss
@@ -11,8 +11,9 @@
 	overflow: hidden;
 
 	.block-editor-block-preview__content {
-		// This element receives inline styles for width, height, and transform-scale.
+		// This element receives inline styles for transform-scale and aspect-ratio.
 		// Those inline styles are calculated to fit a perfect thumbnail.
+		width: 100%;
 
 		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
 		top: 0;
@@ -35,34 +36,6 @@
 	}
 }
 
-// Hide inserter from previews.
-.block-editor-block-preview__content-iframe .block-list-appender {
-	display: none;
-}
-
-.block-editor-block-preview__live-content {
-	* {
-		pointer-events: none;
-	}
-
-	// Hide the block appender, as the block is not editable in this context.
-	.block-list-appender {
-		display: none;
-	}
-
-	// Revert button disable styles to ensure that button styles render as they will on the
-	// front end of the site. For example, this ensures that Social Links icons display correctly.
-	.components-button:disabled {
-		opacity: initial;
-	}
-
-	// Hide placeholders.
-	.components-placeholder,
-	.block-editor-block-list__block[data-empty="true"] {
-		display: none;
-	}
-}
-
 // The goal of this pseudo-element is to cover the iframe
 // otherwise it won't be able to drag elements containing
 // the preview iframe in Safari.
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..fcd5f48e8a0fc6 100644
--- a/packages/block-editor/src/components/block-preview/test/index.js
+++ b/packages/block-editor/src/components/block-preview/test/index.js
@@ -17,38 +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', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {
@@ -78,14 +46,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 +72,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 );
 	} );
 } );
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
new file mode 100644
index 00000000000000..fdb3475b3e180f
--- /dev/null
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalTruncate as Truncate,
+	Flex,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+
+export default function BlockQuickNavigation( { clientIds, onSelect } ) {
+	if ( ! clientIds.length ) {
+		return null;
+	}
+	return (
+		<VStack spacing={ 1 }>
+			{ clientIds.map( ( clientId ) => (
+				<BlockQuickNavigationItem
+					onSelect={ onSelect }
+					key={ clientId }
+					clientId={ clientId }
+				/>
+			) ) }
+		</VStack>
+	);
+}
+
+function BlockQuickNavigationItem( { clientId, onSelect } ) {
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const { isSelected } = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+
+			return {
+				isSelected:
+					isBlockSelected( clientId ) ||
+					hasSelectedInnerBlock( clientId, /* deep: */ true ),
+			};
+		},
+		[ clientId ]
+	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			isPressed={ isSelected }
+			onClick={ async () => {
+				await selectBlock( clientId );
+				if ( onSelect ) {
+					onSelect( clientId );
+				}
+			} }
+		>
+			<Flex>
+				<FlexItem>
+					<BlockIcon icon={ blockInformation?.icon } />
+				</FlexItem>
+				<FlexBlock style={ { textAlign: 'left' } }>
+					<Truncate>{ blockTitle }</Truncate>
+				</FlexBlock>
+			</Flex>
+		</Button>
+	);
+}
diff --git a/packages/block-editor/src/components/block-removal-warning-modal/index.js b/packages/block-editor/src/components/block-removal-warning-modal/index.js
new file mode 100644
index 00000000000000..2f716e875fb604
--- /dev/null
+++ b/packages/block-editor/src/components/block-removal-warning-modal/index.js
@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function BlockRemovalWarningModal( { rules } ) {
+	const { clientIds, selectPrevious, message } = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).getRemovalPromptData()
+	);
+
+	const {
+		clearBlockRemovalPrompt,
+		setBlockRemovalRules,
+		privateRemoveBlocks,
+	} = unlock( useDispatch( blockEditorStore ) );
+
+	// Load block removal rules, simultaneously signalling that the block
+	// removal prompt is in place.
+	useEffect( () => {
+		setBlockRemovalRules( rules );
+		return () => {
+			setBlockRemovalRules();
+		};
+	}, [ rules, setBlockRemovalRules ] );
+
+	if ( ! message ) {
+		return;
+	}
+
+	const onConfirmRemoval = () => {
+		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
+		clearBlockRemovalPrompt();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Be careful!' ) }
+			onRequestClose={ clearBlockRemovalPrompt }
+			size="medium"
+		>
+			<p>{ message }</p>
+			<HStack justify="right">
+				<Button
+					variant="tertiary"
+					onClick={ clearBlockRemovalPrompt }
+					__next40pxDefaultSize
+				>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					onClick={ onConfirmRemoval }
+					__next40pxDefaultSize
+				>
+					{ __( 'Delete' ) }
+				</Button>
+			</HStack>
+		</Modal>
+	);
+}
diff --git a/packages/block-editor/src/components/block-rename/index.js b/packages/block-editor/src/components/block-rename/index.js
new file mode 100644
index 00000000000000..0379893d412ec9
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/index.js
@@ -0,0 +1,3 @@
+export { default as BlockRenameControl } from './rename-control';
+export { default as BlockRenameModal } from './modal';
+export { default as useBlockRename } from './use-block-rename';
diff --git a/packages/block-editor/src/components/block-rename/is-empty-string.js b/packages/block-editor/src/components/block-rename/is-empty-string.js
new file mode 100644
index 00000000000000..42d88be77b96e5
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/is-empty-string.js
@@ -0,0 +1,3 @@
+export default function isEmptyString( testString ) {
+	return testString?.trim()?.length === 0;
+}
diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
new file mode 100644
index 00000000000000..2679c8157cc0a2
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import isEmptyString from './is-empty-string';
+
+export default function BlockRenameModal( {
+	blockName,
+	originalBlockName,
+	onClose,
+	onSave,
+	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
+	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
+	hasOverridesWarning,
+} ) {
+	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+
+	const nameHasChanged = editedBlockName !== blockName;
+	const nameIsOriginal = editedBlockName === originalBlockName;
+	const nameIsEmpty = isEmptyString( editedBlockName );
+
+	const isNameValid = nameHasChanged || nameIsOriginal;
+
+	const autoSelectInputText = ( event ) => event.target.select();
+
+	const handleSubmit = () => {
+		const message =
+			nameIsOriginal || nameIsEmpty
+				? sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name reset to: "%s".' ),
+						editedBlockName
+				  )
+				: sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name changed to: "%s".' ),
+						editedBlockName
+				  );
+
+		// Must be assertive to immediately announce change.
+		speak( message, 'assertive' );
+		onSave( editedBlockName );
+
+		// Immediate close avoids ability to hit save multiple times.
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			overlayClassName="block-editor-block-rename-modal"
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form
+				onSubmit={ ( e ) => {
+					e.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						value={ editedBlockName }
+						label={ __( 'Name' ) }
+						help={
+							hasOverridesWarning
+								? __(
+										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
+								  )
+								: undefined
+						}
+						placeholder={ originalBlockName }
+						onChange={ setEditedBlockName }
+						onFocus={ autoSelectInputText }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/block-editor/src/components/block-rename/rename-control.js b/packages/block-editor/src/components/block-rename/rename-control.js
new file mode 100644
index 00000000000000..fb6b446782aa78
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/rename-control.js
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockDisplayInformation } from '..';
+import isEmptyString from './is-empty-string';
+import BlockRenameModal from './modal';
+
+export default function BlockRenameControl( { clientId } ) {
+	const [ renamingBlock, setRenamingBlock ] = useState( false );
+
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			const _metadata = getBlockAttributes( clientId )?.metadata;
+			return {
+				metadata: _metadata,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const customName = metadata?.name;
+	const hasPatternOverrides =
+		!! customName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
+
+	function onChange( newName ) {
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...metadata,
+				name: newName,
+			},
+		} );
+	}
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setRenamingBlock( true );
+				} }
+				aria-expanded={ renamingBlock }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ renamingBlock && (
+				<BlockRenameModal
+					blockName={ customName || '' }
+					originalBlockName={ blockInformation?.title }
+					hasOverridesWarning={ hasPatternOverrides }
+					onClose={ () => setRenamingBlock( false ) }
+					onSave={ ( newName ) => {
+						// If the new value is the block's original name (e.g. `Group`)
+						// or it is an empty string then assume the intent is to reset
+						// the value. Therefore reset the metadata.
+						if (
+							newName === blockInformation?.title ||
+							isEmptyString( newName )
+						) {
+							newName = undefined;
+						}
+
+						onChange( newName );
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/block-rename/style.scss b/packages/block-editor/src/components/block-rename/style.scss
new file mode 100644
index 00000000000000..2b08e82662bc6f
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/style.scss
@@ -0,0 +1,3 @@
+.block-editor-block-rename-modal {
+	z-index: z-index(".block-editor-block-rename-modal");
+}
diff --git a/packages/block-editor/src/components/block-rename/use-block-rename.js b/packages/block-editor/src/components/block-rename/use-block-rename.js
new file mode 100644
index 00000000000000..a3fca66f13670e
--- /dev/null
+++ b/packages/block-editor/src/components/block-rename/use-block-rename.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+
+export default function useBlockRename( name ) {
+	return {
+		canRename: getBlockSupport( name, 'renaming', true ),
+	};
+}
diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
index ca2d5eae9e619d..b22fc7ab708101 100644
--- a/packages/block-editor/src/components/block-selection-clearer/index.js
+++ b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -20,7 +20,7 @@ export function useBlockSelectionClearer() {
 	const { getSettings, hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { __experimentalClearBlockSelection: isEnabled } = getSettings();
+	const { clearBlockSelection: isEnabled } = getSettings();
 
 	return useRefEffect(
 		( node ) => {
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..bee73647876e60 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
@@ -17,7 +17,7 @@ const defaultUseSelectValues = {
 	hasSelectedBlock: jest.fn().mockReturnValue( false ),
 	hasMultiSelection: jest.fn().mockReturnValue( false ),
 	getSettings: jest.fn().mockReturnValue( {
-		__experimentalClearBlockSelection: true,
+		clearBlockSelection: true,
 	} ),
 };
 
@@ -43,14 +43,14 @@ 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 );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
+
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the selected block when multiple blocks are selected', () => {
@@ -64,14 +64,14 @@ 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 );
 
-		expect( mockClearSelectedBlock ).toBeCalled();
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
+
+		expect( mockClearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when no blocks are selected', () => {
@@ -82,14 +82,14 @@ 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 );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
+
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not clear the block selection when the feature is disabled', () => {
@@ -98,7 +98,7 @@ describe( 'BlockSelectionClearer component', () => {
 			...defaultUseSelectValues,
 			hasSelectedBlock: jest.fn().mockReturnValue( true ),
 			getSettings: jest.fn().mockReturnValue( {
-				__experimentalClearBlockSelection: false,
+				clearBlockSelection: false,
 			} ),
 		} ) );
 		useDispatch.mockImplementation( () => ( {
@@ -106,13 +106,13 @@ 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 );
 
-		expect( mockClearSelectedBlock ).not.toBeCalled();
+		fireEvent.mouseDown( screen.getByTestId( 'selection-clearer' ) );
+
+		expect( mockClearSelectedBlock ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/README.md b/packages/block-editor/src/components/block-settings-menu-controls/README.md
index 4537f4de987a5d..84c3cc5e44ed21 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/README.md
+++ b/packages/block-editor/src/components/block-settings-menu-controls/README.md
@@ -16,12 +16,3 @@ function ReusableBlocksMenuItems() {
 	);
 }
 ```
-
-## Props
-
-### `__unstableDisplayLocation`
-
--   **Type:** `String`
--   **Default:** `undefined`
-
-A string representing the location where the component is being displayed within the UI. This can be used to conditionalize certain behaviors including the display of associated components. This behaviour will likely be refactored to a React.Context implementation.
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 35aab859d2f73e..b0755be4c26297 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -22,50 +17,51 @@ import {
 } from '../convert-to-group-buttons';
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
+import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
+import { ModifyContentLockMenuItem } from '../content-lock';
+import { BlockRenameControl, useBlockRename } from '../block-rename';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
-const BlockSettingsMenuControlsSlot = ( {
-	fillProps,
-	clientIds = null,
-	__unstableDisplayLocation,
-} ) => {
-	const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
+const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
+	const { selectedBlocks, selectedClientIds, isContentOnly } = useSelect(
 		( select ) => {
 			const {
-				getBlocksByClientId,
+				getBlockNamesByClientId,
 				getSelectedBlockClientIds,
-				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
-				selectedBlocks: map(
-					getBlocksByClientId( ids ).filter( Boolean ),
-					( block ) => block.name
-				),
+				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
-				canRemove: canRemoveBlocks( ids ),
+				isContentOnly:
+					getBlockEditingMode( ids[ 0 ] ) === 'contentOnly',
 			};
 		},
 		[ clientIds ]
 	);
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
-	const showLockButton = selectedClientIds.length === 1 && canLock;
+	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
+	const showLockButton =
+		selectedClientIds.length === 1 && canLock && ! isContentOnly;
+	const showRenameButton =
+		selectedClientIds.length === 1 && canRename && ! isContentOnly;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps();
+	const convertToGroupButtonProps =
+		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
-		( isGroupable || isUngroupable ) && canRemove;
+		( isGroupable || isUngroupable ) && ! isContentOnly;
 
 	return (
 		<Slot
 			fillProps={ {
 				...fillProps,
-				__unstableDisplayLocation,
 				selectedBlocks,
 				selectedClientIds,
 			} }
@@ -81,18 +77,35 @@ const BlockSettingsMenuControlsSlot = ( {
 
 				return (
 					<MenuGroup>
+						{ showConvertToGroupButton && (
+							<ConvertToGroupButton
+								{ ...convertToGroupButtonProps }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
+						{ showRenameButton && (
+							<BlockRenameControl
+								clientId={ selectedClientIds[ 0 ] }
+							/>
+						) }
 						{ fills }
-						{ showConvertToGroupButton && (
-							<ConvertToGroupButton
-								{ ...convertToGroupButtonProps }
+						{ selectedClientIds.length === 1 && (
+							<ModifyContentLockMenuItem
+								clientId={ selectedClientIds[ 0 ] }
 								onClose={ fillProps?.onClose }
 							/>
 						) }
+						{ fillProps?.count === 1 && ! isContentOnly && (
+							<BlockModeToggle
+								clientId={ fillProps?.firstBlockClientId }
+								onToggle={ fillProps?.onClose }
+							/>
+						) }
 					</MenuGroup>
 				);
 			} }
@@ -104,7 +117,7 @@ const BlockSettingsMenuControlsSlot = ( {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
  *
  * @param {Object} props Fill props.
- * @return {WPElement} Element.
+ * @return {Element} Element.
  */
 function BlockSettingsMenuControls( { ...props } ) {
 	return (
diff --git a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
deleted file mode 100644
index 130ca47aa47167..00000000000000
--- a/packages/block-editor/src/components/block-settings-menu/block-convert-button.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-
-export default function BlockConvertButton( { shouldRender, onClick, small } ) {
-	if ( ! shouldRender ) {
-		return null;
-	}
-
-	const label = __( 'Convert to Blocks' );
-	return <MenuItem onClick={ onClick }>{ ! small && label }</MenuItem>;
-}
diff --git a/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
index 4936627c2ca4c1..bb2511e880b62a 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-html-convert-button.js
@@ -1,30 +1,39 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
 import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockConvertButton from './block-convert-button';
 import { store as blockEditorStore } from '../../store';
 
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const block = select( blockEditorStore ).getBlock( clientId );
+function BlockHTMLConvertButton( { clientId } ) {
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-		return {
-			block,
-			shouldRender: block && block.name === 'core/html',
-		};
-	} ),
-	withDispatch( ( dispatch, { block } ) => ( {
-		onClick: () =>
-			dispatch( blockEditorStore ).replaceBlocks(
-				block.clientId,
-				rawHandler( { HTML: getBlockContent( block ) } )
-			),
-	} ) )
-)( BlockConvertButton );
+	if ( ! block || block.name !== 'core/html' ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () =>
+				replaceBlocks(
+					clientId,
+					rawHandler( { HTML: getBlockContent( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to Blocks' ) }
+		</MenuItem>
+	);
+}
+
+export default BlockHTMLConvertButton;
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 6810a21581f12e..7ca294a2894158 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -4,8 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,13 +13,23 @@ import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
-export function BlockModeToggle( {
-	blockType,
-	mode,
-	onToggleMode,
-	small = false,
-	isCodeEditingEnabled = true,
-} ) {
+export default function BlockModeToggle( { clientId, onToggle = noop } ) {
+	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockMode, getSettings } =
+				select( blockEditorStore );
+			const block = getBlock( clientId );
+
+			return {
+				mode: getBlockMode( clientId ),
+				blockType: block ? getBlockType( block.name ) : null,
+				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+			};
+		},
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
@@ -32,26 +41,14 @@ export function BlockModeToggle( {
 	const label =
 		mode === 'visual' ? __( 'Edit as HTML' ) : __( 'Edit visually' );
 
-	return <MenuItem onClick={ onToggleMode }>{ ! small && label }</MenuItem>;
+	return (
+		<MenuItem
+			onClick={ () => {
+				toggleBlockMode( clientId );
+				onToggle();
+			} }
+		>
+			{ label }
+		</MenuItem>
+	);
 }
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } =
-			select( blockEditorStore );
-		const block = getBlock( clientId );
-		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
-
-		return {
-			mode: getBlockMode( clientId ),
-			blockType: block ? getBlockType( block.name ) : null,
-			isCodeEditingEnabled,
-		};
-	} ),
-	withDispatch( ( dispatch, { onToggle = noop, clientId } ) => ( {
-		onToggleMode() {
-			dispatch( blockEditorStore ).toggleBlockMode( clientId );
-			onToggle();
-		},
-	} ) ),
-] )( BlockModeToggle );
diff --git a/packages/block-editor/src/components/block-settings-menu/block-parent-selector-menu-item.js b/packages/block-editor/src/components/block-settings-menu/block-parent-selector-menu-item.js
new file mode 100644
index 00000000000000..4ba65e41ae7324
--- /dev/null
+++ b/packages/block-editor/src/components/block-settings-menu/block-parent-selector-menu-item.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockParentSelectorMenuItem( {
+	parentClientId,
+	parentBlockType,
+} ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 9ebc961440f7a5..b9caee7c338beb 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -9,13 +9,9 @@ import {
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import {
-	Children,
-	cloneElement,
-	useCallback,
-	useRef,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { Children, cloneElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { displayShortcut } from '@wordpress/keycodes';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
@@ -23,61 +19,65 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import BlockIcon from '../block-icon';
-import BlockModeToggle from './block-mode-toggle';
+import CommentIconSlotFill from '../../components/collab/block-comment-icon-slot';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
+import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import { useShowMoversGestures } from '../block-toolbar/utils';
+import { unlock } from '../../lock-unlock';
 
-const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { blocks, onCopy } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemLabel =
-		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
-	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
+function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCopy
+	);
+	const copyMenuItemLabel = label ? label : __( 'Copy' );
+	return (
+		<MenuItem ref={ ref } shortcut={ shortcut }>
+			{ copyMenuItemLabel }
+		</MenuItem>
+	);
 }
 
 export function BlockSettingsDropdown( {
+	block,
 	clientIds,
-	__experimentalSelectBlock,
 	children,
-	__unstableDisplayLocation,
+	__experimentalSelectBlock,
 	...props
 } ) {
-	const blockClientIds = Array.isArray( clientIds )
-		? clientIds
-		: [ clientIds ];
-	const count = blockClientIds.length;
-	const firstBlockClientId = blockClientIds[ 0 ];
+	// Get the client id of the current block for this menu, if one is set.
+	const currentClientId = block?.clientId;
+	const count = clientIds.length;
+	const firstBlockClientId = clientIds[ 0 ];
+
 	const {
 		firstParentClientId,
-		isDistractionFree,
-		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
-		nextBlockClientId,
 		selectedBlockClientIds,
+		openedBlockSettingsMenu,
+		isContentOnly,
+		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
-				getNextBlockClientId,
 				getSelectedBlockClientIds,
-				getSettings,
 				getBlockAttributes,
-			} = select( blockEditorStore );
+				getOpenedBlockSettingsMenu,
+				getBlockEditingMode,
+				isZoomOut: _isZoomOut,
+			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
 
@@ -88,8 +88,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				isDistractionFree: getSettings().isDistractionFree,
-				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
 					( getActiveBlockVariation(
@@ -99,13 +97,23 @@ export function BlockSettingsDropdown( {
 						getBlockType( parentBlockName ) ),
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
-				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
+				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
+				isContentOnly:
+					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
 	);
 
+	const { getBlockOrder, getSelectedBlockClientIds } =
+		useSelect( blockEditorStore );
+
+	const { setOpenedBlockSettingsMenu } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
 	const shortcuts = useSelect( ( select ) => {
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		return {
@@ -121,225 +129,225 @@ export function BlockSettingsDropdown( {
 			),
 		};
 	}, [] );
+	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-	const updateSelectionAfterDuplicate = useCallback(
-		__experimentalSelectBlock
-			? async ( clientIdsPromise ) => {
-					const ids = await clientIdsPromise;
-					if ( ids && ids[ 0 ] ) {
-						__experimentalSelectBlock( ids[ 0 ] );
-					}
-			  }
-			: noop,
-		[ __experimentalSelectBlock ]
-	);
+		const ids = await clientIdsPromise;
+		if ( ids && ids[ 0 ] ) {
+			__experimentalSelectBlock( ids[ 0 ], false );
+		}
+	}
 
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: firstBlockClientId,
-		maximumLength: 25,
-	} );
+	function updateSelectionAfterRemove() {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-	const updateSelectionAfterRemove = useCallback(
-		__experimentalSelectBlock
-			? () => {
-					const blockToSelect =
-						previousBlockClientId || nextBlockClientId;
+		let blockToFocus = previousBlockClientId || firstParentClientId;
 
-					if (
-						blockToSelect &&
-						// From the block options dropdown, it's possible to remove a block that is not selected,
-						// in this case, it's not necessary to update the selection since the selected block wasn't removed.
-						selectedBlockClientIds.includes( firstBlockClientId ) &&
-						// Don't update selection when next/prev block also is in the selection ( and gets removed ),
-						// In case someone selects all blocks and removes them at once.
-						! selectedBlockClientIds.includes( blockToSelect )
-					) {
-						__experimentalSelectBlock( blockToSelect );
-					}
-			  }
-			: noop,
-		[
-			__experimentalSelectBlock,
-			previousBlockClientId,
-			nextBlockClientId,
-			selectedBlockClientIds,
-		]
-	);
+		// Focus the first block if there's no previous block nor parent block.
+		if ( ! blockToFocus ) {
+			blockToFocus = getBlockOrder()[ 0 ];
+		}
 
-	const label = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		blockTitle
-	);
-	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
+		// Only update the selection if the original selection is removed.
+		const shouldUpdateSelection =
+			hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
 
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const selectParentButtonRef = useRef();
-	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
-		ref: selectParentButtonRef,
-		onChange( isFocused ) {
-			if ( isFocused && isDistractionFree ) {
-				return;
-			}
-			toggleBlockHighlight( firstParentClientId, isFocused );
-		},
-	} );
+		__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+	}
 
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
 	const parentBlockIsSelected =
 		selectedBlockClientIds?.includes( firstParentClientId );
 
+	// When a currentClientId is in use, treat the menu as a controlled component.
+	// This ensures that only one block settings menu is open at a time.
+	// This is a temporary solution to work around an issue with `onFocusOutside`
+	// where it does not allow a dropdown to be closed if focus was never within
+	// the dropdown to begin with. Examples include a user either CMD+Clicking or
+	// right clicking into an inactive window.
+	// See: https://github.com/WordPress/gutenberg/pull/54083
+	const open = ! currentClientId
+		? undefined
+		: openedBlockSettingsMenu === currentClientId || false;
+
+	function onToggle( localOpen ) {
+		if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
+			setOpenedBlockSettingsMenu( currentClientId );
+		} else if (
+			! localOpen &&
+			openedBlockSettingsMenu &&
+			openedBlockSettingsMenu === currentClientId
+		) {
+			setOpenedBlockSettingsMenu( undefined );
+		}
+	}
+
+	const shouldShowBlockParentMenuItem =
+		! parentBlockIsSelected && !! firstParentClientId;
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
 			__experimentalUpdateSelection={ ! __experimentalSelectBlock }
 		>
 			{ ( {
+				canCopyStyles,
 				canDuplicate,
-				canInsertDefaultBlock,
-				canMove,
+				canInsertBlock,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
 				onInsertBefore,
 				onRemove,
 				onCopy,
-				onMoveTo,
-				blocks,
-			} ) => (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'Options' ) }
-					className="block-editor-block-settings-menu"
-					popoverProps={ POPOVER_PROPS }
-					noIcons
-					{ ...props }
-				>
-					{ ( { onClose } ) => (
-						<>
-							<MenuGroup>
-								<__unstableBlockSettingsMenuFirstItem.Slot
-									fillProps={ { onClose } }
-								/>
-								{ ! parentBlockIsSelected &&
-									!! firstParentClientId && (
-										<MenuItem
-											{ ...showParentOutlineGestures }
-											ref={ selectParentButtonRef }
-											icon={
-												<BlockIcon
-													icon={
-														parentBlockType.icon
-													}
-												/>
-											}
-											onClick={ () =>
-												selectBlock(
-													firstParentClientId
-												)
+				onPasteStyles,
+			} ) => {
+				// It is possible that some plugins register fills for this menu
+				// even if Core doesn't render anything in the block settings menu.
+				// in which case, we may want to render the menu anyway.
+				// That said for now, we can start more conservative.
+				const isEmpty =
+					! canRemove &&
+					! canDuplicate &&
+					! canInsertBlock &&
+					isContentOnly;
+
+				if ( isEmpty ) {
+					return null;
+				}
+
+				return (
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Options' ) }
+						className="block-editor-block-settings-menu"
+						popoverProps={ POPOVER_PROPS }
+						open={ open }
+						onToggle={ onToggle }
+						noIcons
+						{ ...props }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuGroup>
+									<__unstableBlockSettingsMenuFirstItem.Slot
+										fillProps={ { onClose } }
+									/>
+									{ shouldShowBlockParentMenuItem && (
+										<BlockParentSelectorMenuItem
+											parentClientId={
+												firstParentClientId
 											}
-										>
-											{ sprintf(
-												/* translators: %s: Name of the block's parent. */
-												__(
-													'Select parent block (%s)'
-												),
-												parentBlockType.title
+											parentBlockType={ parentBlockType }
+										/>
+									) }
+									{ count === 1 && (
+										<BlockHTMLConvertButton
+											clientId={ firstBlockClientId }
+										/>
+									) }
+									{ ( ! isContentOnly || isZoomOut ) && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ displayShortcut.primary(
+												'c'
 											) }
-										</MenuItem>
+										/>
 									) }
-								{ count === 1 && (
-									<BlockHTMLConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
-								<CopyMenuItem
-									blocks={ blocks }
-									onCopy={ onCopy }
-								/>
-								{ canDuplicate && (
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onDuplicate,
-											updateSelectionAfterDuplicate
-										) }
-										shortcut={ shortcuts.duplicate }
-									>
-										{ __( 'Duplicate' ) }
-									</MenuItem>
-								) }
-								{ canInsertDefaultBlock && (
-									<>
+									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertBefore
+												onDuplicate,
+												updateSelectionAfterDuplicate
 											) }
-											shortcut={ shortcuts.insertBefore }
+											shortcut={ shortcuts.duplicate }
 										>
-											{ __( 'Insert before' ) }
+											{ __( 'Duplicate' ) }
+										</MenuItem>
+									) }
+									{ canInsertBlock && ! isContentOnly && (
+										<>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertBefore
+												) }
+												shortcut={
+													shortcuts.insertBefore
+												}
+											>
+												{ __( 'Add before' ) }
+											</MenuItem>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertAfter
+												) }
+												shortcut={
+													shortcuts.insertAfter
+												}
+											>
+												{ __( 'Add after' ) }
+											</MenuItem>
+										</>
+									) }
+									<CommentIconSlotFill.Slot
+										fillProps={ { onClose } }
+									/>
+								</MenuGroup>
+								{ canCopyStyles && ! isContentOnly && (
+									<MenuGroup>
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											label={ __( 'Copy styles' ) }
+										/>
+										<MenuItem onClick={ onPasteStyles }>
+											{ __( 'Paste styles' ) }
 										</MenuItem>
+									</MenuGroup>
+								) }
+								<BlockSettingsMenuControls.Slot
+									fillProps={ {
+										onClose,
+										count,
+										firstBlockClientId,
+									} }
+									clientIds={ clientIds }
+								/>
+								{ typeof children === 'function'
+									? children( { onClose } )
+									: Children.map( ( child ) =>
+											cloneElement( child, { onClose } )
+									  ) }
+								{ canRemove && (
+									<MenuGroup>
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertAfter
+												onRemove,
+												updateSelectionAfterRemove
 											) }
-											shortcut={ shortcuts.insertAfter }
+											shortcut={ shortcuts.remove }
 										>
-											{ __( 'Insert after' ) }
+											{ __( 'Delete' ) }
 										</MenuItem>
-									</>
+									</MenuGroup>
 								) }
-								{ canMove && ! onlyBlock && (
-									<MenuItem
-										onClick={ pipe( onClose, onMoveTo ) }
-									>
-										{ __( 'Move to' ) }
-									</MenuItem>
-								) }
-								{ count === 1 && (
-									<BlockModeToggle
-										clientId={ firstBlockClientId }
-										onToggle={ onClose }
-									/>
-								) }
-							</MenuGroup>
-							<BlockSettingsMenuControls.Slot
-								fillProps={ { onClose } }
-								clientIds={ clientIds }
-								__unstableDisplayLocation={
-									__unstableDisplayLocation
-								}
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
-							{ canRemove && (
-								<MenuGroup>
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onRemove,
-											updateSelectionAfterRemove
-										) }
-										shortcut={ shortcuts.remove }
-									>
-										{ removeBlockLabel }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</>
-					) }
-				</DropdownMenu>
-			) }
+							</>
+						) }
+					</DropdownMenu>
+				);
+			} }
 		</BlockActions>
 	);
 }
diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
index 0b0b1a775e736f..1b96f30e130386 100644
--- a/packages/block-editor/src/components/block-settings-menu/index.js
+++ b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -7,10 +7,13 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import CommentIconToolbarSlotFill from '../../components/collab/block-comment-icon-toolbar-slot';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
 		<ToolbarGroup>
+			<CommentIconToolbarSlotFill.Slot />
+
 			<ToolbarItem>
 				{ ( toggleProps ) => (
 					<BlockSettingsDropdown
diff --git a/packages/block-editor/src/components/block-settings-menu/style.scss b/packages/block-editor/src/components/block-settings-menu/style.scss
deleted file mode 100644
index bea2242fc59d4e..00000000000000
--- a/packages/block-editor/src/components/block-settings-menu/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
-	padding: 0;
-}
diff --git a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
index c297bad15f29ea..67d88125e3429c 100644
--- a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -3,16 +3,32 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { BlockModeToggle } from '../block-mode-toggle';
+import BlockModeToggle from '../block-mode-toggle';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
+	useSelect.mockImplementation( () => {
+		return {
+			mode,
+			blockType,
+			isCodeEditingEnabled: codeEditingEnabled,
+		};
+	} );
+}
 
 describe( 'BlockModeToggle', () => {
 	it( "should not render the HTML mode button if the block doesn't support it", () => {
-		render(
-			<BlockModeToggle blockType={ { supports: { html: false } } } />
-		);
+		setupUseSelectMock( undefined, { supports: { html: false } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -20,12 +36,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the HTML mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="visual"
-			/>
-		);
+		setupUseSelectMock( 'visual', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit as HTML' } )
@@ -33,12 +45,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should render the Visual mode button', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } } );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.getByRole( 'menuitem', { name: 'Edit visually' } )
@@ -46,13 +54,8 @@ describe( 'BlockModeToggle', () => {
 	} );
 
 	it( 'should not render the Visual mode button if code editing is disabled', () => {
-		render(
-			<BlockModeToggle
-				blockType={ { supports: { html: true } } }
-				mode="html"
-				isCodeEditingEnabled={ false }
-			/>
-		);
+		setupUseSelectMock( 'html', { supports: { html: true } }, false );
+		render( <BlockModeToggle /> );
 
 		expect(
 			screen.queryByRole( 'menuitem', { name: 'Edit visually' } )
diff --git a/packages/block-editor/src/components/block-settings/button.native.js b/packages/block-editor/src/components/block-settings/button.native.js
index 9fa1a037494294..40c16858839dd4 100644
--- a/packages/block-editor/src/components/block-settings/button.native.js
+++ b/packages/block-editor/src/components/block-settings/button.native.js
@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, ToolbarButton } from '@wordpress/components';
+import {
+	createSlotFill,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
@@ -9,11 +13,13 @@ import { cog } from '@wordpress/icons';
 const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
 const SettingsButton = ( { openGeneralSidebar } ) => (
-	<ToolbarButton
-		title={ __( 'Open Settings' ) }
-		icon={ cog }
-		onClick={ openGeneralSidebar }
-	/>
+	<ToolbarGroup>
+		<ToolbarButton
+			title={ __( 'Open Settings' ) }
+			icon={ cog }
+			onClick={ openGeneralSidebar }
+		/>
+	</ToolbarGroup>
 );
 
 const SettingsButtonFill = ( props ) => (
diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js
index f54d9ca27f9232..aa2583c960559e 100644
--- a/packages/block-editor/src/components/block-settings/container.native.js
+++ b/packages/block-editor/src/components/block-settings/container.native.js
@@ -1,24 +1,23 @@
 /**
  * WordPress dependencies
  */
-import {
-	InspectorControls,
-	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
 import {
 	BottomSheet,
 	ColorSettings,
 	FocalPointSettingsPanel,
-	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import styles from './container.native.scss';
-import { store as blockEditorStore } from '../../store';
+import InspectorControls from '../inspector-controls';
+import ImageLinkDestinationsScreen from '../image-link-destinations';
+import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import { useMobileGlobalStylesColors } from '../global-styles/use-global-styles-context';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -28,12 +27,13 @@ export const blockSettingsScreens = {
 	imageLinkDestinations: 'imageLinkDestinations',
 };
 
-function BottomSheetSettings( {
-	editorSidebarOpened,
-	closeGeneralSidebar,
-	...props
-} ) {
+export default function BottomSheetSettings( props ) {
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = useMobileGlobalStylesColors();
+	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
+	const editorSidebarOpened = useSelect( ( select ) =>
+		select( 'core/edit-post' ).isEditorSidebarOpened()
+	);
 
 	return (
 		<BottomSheet
@@ -49,7 +49,10 @@ function BottomSheetSettings( {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.settings }
 				>
-					<InspectorControls.Slot />
+					<>
+						<InspectorControls.Slot />
+						<AdvancedControls />
+					</>
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ BottomSheet.SubSheet.screenName }
@@ -86,21 +89,3 @@ function BottomSheetSettings( {
 		</BottomSheet>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		const { getSettings } = select( blockEditorStore );
-		return {
-			settings: getSettings(),
-			editorSidebarOpened: isEditorSidebarOpened(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { closeGeneralSidebar } = dispatch( 'core/edit-post' );
-
-		return {
-			closeGeneralSidebar,
-		};
-	} ),
-] )( BottomSheetSettings );
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a4c45dea8c14e1..951c6d13c52f43 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,6 @@ import {
 	__experimentalTruncate as Truncate,
 	Popover,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -68,7 +67,8 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 					return (
 						<Button
-							className={ classnames(
+							__next40pxDefaultSize
+							className={ clsx(
 								'block-editor-block-styles__item',
 								{
 									'is-active':
@@ -96,7 +96,11 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				} ) }
 			</div>
 			{ hoveredStyle && ! isMobileViewport && (
-				<Popover placement="left-start" offset={ 20 }>
+				<Popover
+					placement="left-start"
+					offset={ 34 }
+					focusOnMount={ false }
+				>
 					<div
 						className="block-editor-block-styles__preview-panel"
 						onMouseLeave={ () => styleItemHandler( null ) }
@@ -115,12 +119,3 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 }
 
 export default BlockStyles;
-
-BlockStyles.Slot = () => {
-	deprecated( 'BlockStyles.Slot', {
-		version: '6.4',
-		since: '6.2',
-	} );
-
-	return null;
-};
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..40e29476287ffb 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
@@ -20,14 +19,16 @@ import StylePreview from './preview';
 import containerStyles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
+const EMPTY_ARRAY = [];
+
 function BlockStyles( { clientId, url } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const { getBlockStyles } = select( blocksStore );
 		const block = getBlock( clientId );
 		return {
-			styles: getBlockStyles( block.name ),
-			className: block.attributes.className || '',
+			styles: getBlockStyles( block?.name ) || EMPTY_ARRAY,
+			className: block?.attributes?.className || '',
 		};
 	};
 
@@ -35,7 +36,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/preview-panel.js b/packages/block-editor/src/components/block-styles/preview-panel.js
index 3cd24ec03be756..2693e175ba3fde 100644
--- a/packages/block-editor/src/components/block-styles/preview-panel.js
+++ b/packages/block-editor/src/components/block-styles/preview-panel.js
@@ -33,7 +33,5 @@ export default function BlockStylesPreviewPanel( {
 		};
 	}, [ genericPreviewBlock, styleClassName ] );
 
-	return (
-		<InserterPreviewPanel item={ previewBlocks } isStylePreview={ true } />
-	);
+	return <InserterPreviewPanel item={ previewBlocks } />;
 }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 794608c5d3c96f..a83adb25c6ae15 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -1,12 +1,5 @@
-.block-editor-block-styles + .default-style-picker__default-switcher {
-	margin-top: $grid-unit-20;
-}
-
 .block-editor-block-styles__preview-panel {
 	display: none;
-	position: absolute;
-	right: $grid-unit-20;
-	left: auto;
 	// Same layer as the sidebar from which it's triggered.
 	z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 
@@ -15,17 +8,6 @@
 		display: block;
 	}
 
-	// Overrides for InserterPreviewPanel.
-	.block-editor-inserter__preview-container {
-		left: auto;
-		right: auto;
-		top: auto;
-		position: static;
-	}
-
-	.block-editor-block-card__title.block-editor-block-card__title {
-		margin: 0;
-	}
 	.block-editor-block-icon {
 		display: none;
 	}
@@ -37,21 +19,20 @@
 	justify-content: space-between;
 	gap: $grid-unit-10;
 
-	.block-editor-block-styles__item {
-		color: $gray-800;
-		box-shadow: inset 0 0 0 1px $gray-400;
+	button.components-button.block-editor-block-styles__item {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 $border-width $gray-300;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
 
-		&:focus,
 		&:hover {
 			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width $gray-300;
 		}
 
 		&.is-active,
 		&.is-active:hover {
-			background-color: $gray-800;
+			background-color: $gray-900;
 			box-shadow: none;
 		}
 
@@ -60,8 +41,9 @@
 			color: $white;
 		}
 
+		&:focus,
 		&.is-active:focus {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
+			@include block-toolbar-button-style__focus();
 		}
 	}
 
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-switcher/block-transformations-menu.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
index 6b88fddb1163fa..271b7fabd51731 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.js
@@ -14,6 +14,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import BlockIcon from '../block-icon';
 import PreviewBlockPopover from './preview-block-popover';
+import BlockVariationTransformations from './block-variation-transformations';
 
 /**
  * Helper hook to group transformations to display them in a specific order in the UI.
@@ -36,7 +37,7 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 		const priorityTextTranformsNames = Object.keys(
 			priorityContentTranformationBlocks
 		);
-		return possibleBlockTransformations.reduce(
+		const groupedPossibleTransforms = possibleBlockTransformations.reduce(
 			( accumulator, item ) => {
 				const { name } = item;
 				if ( priorityTextTranformsNames.includes( name ) ) {
@@ -48,6 +49,23 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 			},
 			{ priorityTextTransformations: [], restTransformations: [] }
 		);
+		/**
+		 * If there is only one priority text transformation and it's a Quote,
+		 * is should move to the rest transformations. This is because Quote can
+		 * be a container for any block type, so in multi-block selection it will
+		 * always be suggested, even for non-text blocks.
+		 */
+		if (
+			groupedPossibleTransforms.priorityTextTransformations.length ===
+				1 &&
+			groupedPossibleTransforms.priorityTextTransformations[ 0 ].name ===
+				'core/quote'
+		) {
+			const singleQuote =
+				groupedPossibleTransforms.priorityTextTransformations.pop();
+			groupedPossibleTransforms.restTransformations.push( singleQuote );
+		}
+		return groupedPossibleTransforms;
 	}, [ possibleBlockTransformations ] );
 
 	// Order the priority text transformations.
@@ -65,7 +83,9 @@ function useGroupedTransforms( possibleBlockTransformations ) {
 const BlockTransformationsMenu = ( {
 	className,
 	possibleBlockTransformations,
+	possibleBlockVariationTransformations,
 	onSelect,
+	onSelectVariation,
 	blocks,
 } ) => {
 	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
@@ -95,6 +115,15 @@ const BlockTransformationsMenu = ( {
 						) }
 					/>
 				) }
+				{ !! possibleBlockVariationTransformations?.length && (
+					<BlockVariationTransformations
+						transformations={
+							possibleBlockVariationTransformations
+						}
+						blocks={ blocks }
+						onSelect={ onSelectVariation }
+					/>
+				) }
 				{ priorityTextTransformations.map( ( item ) => (
 					<BlockTranformationItem
 						key={ item.name }
diff --git a/packages/block-editor/src/components/block-switcher/block-transformations-menu.native.js b/packages/block-editor/src/components/block-switcher/block-transformations-menu.native.js
index fc91bdd6d37dc1..4b95af2c59d523 100644
--- a/packages/block-editor/src/components/block-switcher/block-transformations-menu.native.js
+++ b/packages/block-editor/src/components/block-switcher/block-transformations-menu.native.js
@@ -75,11 +75,12 @@ const BlockTransformationsMenu = ( {
 
 	return (
 		<Picker
+			testID="block-transformations-menu"
 			ref={ pickerRef }
 			options={ pickerOptions() }
 			onChange={ onPickerSelect }
 			hideCancelButton={ Platform.OS !== 'ios' }
-			leftAlign={ true }
+			leftAlign
 			getAnchor={ getAnchor }
 			// translators: %s: block title e.g: "Paragraph".
 			title={ sprintf( __( 'Transform %s to' ), blockTitle ) }
diff --git a/packages/block-editor/src/components/block-switcher/block-variation-transformations.js b/packages/block-editor/src/components/block-switcher/block-variation-transformations.js
new file mode 100644
index 00000000000000..b2ecdb7622209f
--- /dev/null
+++ b/packages/block-editor/src/components/block-switcher/block-variation-transformations.js
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import {
+	getBlockMenuDefaultClassName,
+	cloneBlock,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import PreviewBlockPopover from './preview-block-popover';
+
+const EMPTY_OBJECT = {};
+
+export function useBlockVariationTransforms( { clientIds, blocks } ) {
+	const { activeBlockVariation, blockVariationTransformations } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, canRemoveBlocks } =
+				select( blockEditorStore );
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const canRemove = canRemoveBlocks( clientIds );
+			// Only handle single selected blocks for now.
+			if ( blocks.length !== 1 || ! canRemove ) {
+				return EMPTY_OBJECT;
+			}
+			const [ firstBlock ] = blocks;
+			return {
+				blockVariationTransformations: getBlockVariations(
+					firstBlock.name,
+					'transform'
+				),
+				activeBlockVariation: getActiveBlockVariation(
+					firstBlock.name,
+					getBlockAttributes( firstBlock.clientId )
+				),
+			};
+		},
+		[ clientIds, blocks ]
+	);
+	const transformations = useMemo( () => {
+		return blockVariationTransformations?.filter(
+			( { name } ) => name !== activeBlockVariation?.name
+		);
+	}, [ blockVariationTransformations, activeBlockVariation ] );
+	return transformations;
+}
+
+const BlockVariationTransformations = ( {
+	transformations,
+	onSelect,
+	blocks,
+} ) => {
+	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
+		useState();
+	return (
+		<>
+			{ hoveredTransformItemName && (
+				<PreviewBlockPopover
+					blocks={ cloneBlock(
+						blocks[ 0 ],
+						transformations.find(
+							( { name } ) => name === hoveredTransformItemName
+						).attributes
+					) }
+				/>
+			) }
+			{ transformations?.map( ( item ) => (
+				<BlockVariationTranformationItem
+					key={ item.name }
+					item={ item }
+					onSelect={ onSelect }
+					setHoveredTransformItemName={ setHoveredTransformItemName }
+				/>
+			) ) }
+		</>
+	);
+};
+
+function BlockVariationTranformationItem( {
+	item,
+	onSelect,
+	setHoveredTransformItemName,
+} ) {
+	const { name, icon, title } = item;
+	return (
+		<MenuItem
+			className={ getBlockMenuDefaultClassName( name ) }
+			onClick={ ( event ) => {
+				event.preventDefault();
+				onSelect( name );
+			} }
+			onMouseLeave={ () => setHoveredTransformItemName( null ) }
+			onMouseEnter={ () => setHoveredTransformItemName( name ) }
+		>
+			<BlockIcon icon={ icon } showColors />
+			{ title }
+		</MenuItem>
+	);
+}
+
+export default BlockVariationTransformations;
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 696b097757d335..285581578ead43 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -1,12 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
+	__experimentalText as Text,
+	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -16,79 +18,62 @@ import {
 } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import BlockTransformationsMenu from './block-transformations-menu';
+import { useBlockVariationTransforms } from './block-variation-transformations';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
-export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
-	const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
-	const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );
-	const {
-		possibleBlockTransformations,
-		canRemove,
-		hasBlockStyles,
-		icon,
-		patterns,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockRootClientId,
-				getBlockTransformItems,
-				__experimentalGetPatternTransformItems,
-			} = select( blockEditorStore );
-			const { getBlockStyles, getBlockType } = select( blocksStore );
-			const { canRemoveBlocks } = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const [ { name: firstBlockName } ] = blocks;
-			const _isSingleBlockSelected = blocks.length === 1;
-			const styles =
-				_isSingleBlockSelected && getBlockStyles( firstBlockName );
-			let _icon;
-			if ( _isSingleBlockSelected ) {
-				_icon = blockInformation?.icon; // Take into account active block variations.
-			} else {
-				const isSelectionOfSameType =
-					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
-				// When selection consists of blocks of multiple types, display an
-				// appropriate icon to communicate the non-uniformity.
-				_icon = isSelectionOfSameType
-					? getBlockType( firstBlockName )?.icon
-					: copy;
-			}
-			return {
-				possibleBlockTransformations: getBlockTransformItems(
-					blocks,
-					rootClientId
-				),
-				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				hasBlockStyles: !! styles?.length,
-				icon: _icon,
-				patterns: __experimentalGetPatternTransformItems(
-					blocks,
-					rootClientId
-				),
-			};
-		},
-		[ clientIds, blocks, blockInformation?.icon ]
-	);
-
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
-		maximumLength: 35,
+function BlockSwitcherDropdownMenuContents( {
+	onClose,
+	clientIds,
+	hasBlockStyles,
+	canRemove,
+} ) {
+	const { replaceBlocks, multiSelect, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockAttributes,
+					getBlocksByClientId,
+					getBlockRootClientId,
+					getBlockTransformItems,
+					__experimentalGetPatternTransformItems,
+				} = select( blockEditorStore );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+				const _blocks = getBlocksByClientId( clientIds );
+				return {
+					blocks: _blocks,
+					possibleBlockTransformations: getBlockTransformItems(
+						_blocks,
+						rootClientId
+					),
+					patterns: __experimentalGetPatternTransformItems(
+						_blocks,
+						rootClientId
+					),
+					isUsingBindings: clientIds.every(
+						( clientId ) =>
+							!! getBlockAttributes( clientId )?.metadata
+								?.bindings
+					),
+				};
+			},
+			[ clientIds ]
+		);
+	const blockVariationTransformations = useBlockVariationTransforms( {
+		clientIds,
+		blocks,
 	} );
-	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
-	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
-
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
 			multiSelect(
@@ -97,73 +82,238 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			);
 		}
 	}
-
 	// Simple block tranformation based on the `Block Transforms` API.
 	function onBlockTransform( name ) {
 		const newBlocks = switchToBlockType( blocks, name );
 		replaceBlocks( clientIds, newBlocks );
 		selectForMultipleBlocks( newBlocks );
 	}
-
+	function onBlockVariationTransform( name ) {
+		updateBlockAttributes( blocks[ 0 ].clientId, {
+			...blockVariationTransformations.find(
+				( { name: variationName } ) => variationName === name
+			).attributes,
+		} );
+	}
 	// Pattern transformation through the `Patterns` API.
 	function onPatternTransform( transformedBlocks ) {
 		replaceBlocks( clientIds, transformedBlocks );
 		selectForMultipleBlocks( transformedBlocks );
 	}
-
 	/**
 	 * The `isTemplate` check is a stopgap solution here.
 	 * Ideally, the Transforms API should handle this
 	 * by allowing to exclude blocks from wildcard transformations.
 	 */
+	const isSingleBlock = blocks.length === 1;
+	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
 	const hasPossibleBlockTransformations =
 		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+	const hasPossibleBlockVariationTransformations =
+		!! blockVariationTransformations?.length;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
-	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
+	const hasContents =
+		hasBlockStyles ||
+		hasBlockOrBlockVariationTransforms ||
+		hasPatternTransformation;
+	if ( ! hasContents ) {
+		return (
+			<p className="block-editor-block-switcher__no-transforms">
+				{ __( 'No transforms.' ) }
+			</p>
+		);
+	}
+
+	const connectedBlockDescription = isSingleBlock
+		? _x(
+				'This block is connected.',
+				'block toolbar button label and description'
+		  )
+		: _x(
+				'These blocks are connected.',
+				'block toolbar button label and description'
+		  );
+
+	return (
+		<div className="block-editor-block-switcher__container">
+			{ hasPatternTransformation && (
+				<PatternTransformationsMenu
+					blocks={ blocks }
+					patterns={ patterns }
+					onSelect={ ( transformedBlocks ) => {
+						onPatternTransform( transformedBlocks );
+						onClose();
+					} }
+				/>
+			) }
+			{ hasBlockOrBlockVariationTransforms && (
+				<BlockTransformationsMenu
+					className="block-editor-block-switcher__transforms__menugroup"
+					possibleBlockTransformations={
+						possibleBlockTransformations
+					}
+					possibleBlockVariationTransformations={
+						blockVariationTransformations
+					}
+					blocks={ blocks }
+					onSelect={ ( name ) => {
+						onBlockTransform( name );
+						onClose();
+					} }
+					onSelectVariation={ ( name ) => {
+						onBlockVariationTransform( name );
+						onClose();
+					} }
+				/>
+			) }
+			{ hasBlockStyles && (
+				<BlockStylesMenu
+					hoveredBlock={ blocks[ 0 ] }
+					onSwitch={ onClose }
+				/>
+			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
+		</div>
+	);
+}
+
+export const BlockSwitcher = ( { clientIds } ) => {
+	const {
+		hasContentOnlyLocking,
+		canRemove,
+		hasBlockStyles,
+		icon,
+		invalidBlocks,
+		isReusable,
+		isTemplate,
+		isDisabled,
+	} = useSelect(
+		( select ) => {
+			const {
+				getTemplateLock,
+				getBlocksByClientId,
+				getBlockAttributes,
+				canRemoveBlocks,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const _blocks = getBlocksByClientId( clientIds );
+			if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
+				return { invalidBlocks: true };
+			}
+			const [ { name: firstBlockName } ] = _blocks;
+			const _isSingleBlockSelected = _blocks.length === 1;
+			const blockType = getBlockType( firstBlockName );
+			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
+
+			let _icon;
+			let _hasTemplateLock;
+			if ( _isSingleBlockSelected ) {
+				const match = getActiveBlockVariation(
+					firstBlockName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || blockType.icon;
+				_hasTemplateLock =
+					getTemplateLock( clientIds[ 0 ] ) === 'contentOnly';
+			} else {
+				const isSelectionOfSameType =
+					new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
+				_hasTemplateLock = clientIds.some(
+					( id ) => getTemplateLock( id ) === 'contentOnly'
+				);
+				// When selection consists of blocks of multiple types, display an
+				// appropriate icon to communicate the non-uniformity.
+				_icon = isSelectionOfSameType ? blockType.icon : copy;
+			}
+
+			return {
+				canRemove: canRemoveBlocks( clientIds ),
+				hasBlockStyles:
+					_isSingleBlockSelected &&
+					!! getBlockStyles( firstBlockName )?.length,
+				icon: _icon,
+				isReusable:
+					_isSingleBlockSelected && isReusableBlock( _blocks[ 0 ] ),
+				isTemplate:
+					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
+				hasContentOnlyLocking: _hasTemplateLock,
+				isDisabled: editingMode !== 'default',
+			};
+		},
+		[ clientIds ]
+	);
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: clientIds?.[ 0 ],
+		maximumLength: 35,
+	} );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
+	if ( invalidBlocks ) {
+		return null;
+	}
+
+	const isSingleBlock = clientIds.length === 1;
+	const blockSwitcherLabel = isSingleBlock
+		? blockTitle
+		: __( 'Multiple blocks selected' );
+
+	const blockIndicatorText =
+		( isReusable || isTemplate ) && ! showIconLabels && blockTitle
+			? blockTitle
+			: undefined;
+
+	const hideDropdown =
+		isDisabled ||
+		( ! hasBlockStyles && ! canRemove ) ||
+		hasContentOnlyLocking;
+
+	if ( hideDropdown ) {
 		return (
 			<ToolbarGroup>
 				<ToolbarButton
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockTitle }
+					title={ blockSwitcherLabel }
 					icon={
-						<>
-							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
-								<span className="block-editor-block-switcher__toggle-text">
-									{ blockTitle }
-								</span>
-							) }
-						</>
+						<BlockIcon
+							className="block-editor-block-switcher__toggle"
+							icon={ icon }
+							showColors
+						/>
 					}
+					text={ blockIndicatorText }
 				/>
 			</ToolbarGroup>
 		);
 	}
 
-	const blockSwitcherLabel = blockTitle;
-
-	const blockSwitcherDescription =
-		1 === blocks.length
-			? sprintf(
-					/* translators: %s: block title. */
-					__( '%s: Change block type or style' ),
-					blockTitle
-			  )
-			: sprintf(
-					/* translators: %d: number of blocks. */
-					_n(
-						'Change type of %d block',
-						'Change type of %d blocks',
-						blocks.length
-					),
-					blocks.length
-			  );
-
-	const showDropDown =
-		hasBlockStyles ||
-		hasPossibleBlockTransformations ||
-		hasPatternTransformation;
+	const blockSwitcherDescription = isSingleBlock
+		? __( 'Change block type or style' )
+		: sprintf(
+				/* translators: %d: number of blocks. */
+				_n(
+					'Change type of %d block',
+					'Change type of %d blocks',
+					clientIds.length
+				),
+				clientIds.length
+		  );
 	return (
 		<ToolbarGroup>
 			<ToolbarItem>
@@ -172,69 +322,31 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						className="block-editor-block-switcher"
 						label={ blockSwitcherLabel }
 						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
+							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
-							<>
-								<BlockIcon
-									icon={ icon }
-									className="block-editor-block-switcher__toggle"
-									showColors
-								/>
-								{ ( isReusable || isTemplate ) && (
-									<span className="block-editor-block-switcher__toggle-text">
-										{ blockTitle }
-									</span>
-								) }
-							</>
+							<BlockIcon
+								className="block-editor-block-switcher__toggle"
+								icon={ icon }
+								showColors
+							/>
 						}
+						text={ blockIndicatorText }
 						toggleProps={ {
-							describedBy: blockSwitcherDescription,
+							description: blockSwitcherDescription,
 							...toggleProps,
 						} }
 						menuProps={ { orientation: 'both' } }
 					>
-						{ ( { onClose } ) =>
-							showDropDown && (
-								<div className="block-editor-block-switcher__container">
-									{ hasPatternTransformation && (
-										<PatternTransformationsMenu
-											blocks={ blocks }
-											patterns={ patterns }
-											onSelect={ (
-												transformedBlocks
-											) => {
-												onPatternTransform(
-													transformedBlocks
-												);
-												onClose();
-											} }
-										/>
-									) }
-									{ hasPossibleBlockTransformations && (
-										<BlockTransformationsMenu
-											className="block-editor-block-switcher__transforms__menugroup"
-											possibleBlockTransformations={
-												possibleBlockTransformations
-											}
-											blocks={ blocks }
-											onSelect={ ( name ) => {
-												onBlockTransform( name );
-												onClose();
-											} }
-										/>
-									) }
-									{ hasBlockStyles && (
-										<BlockStylesMenu
-											hoveredBlock={ blocks[ 0 ] }
-											onSwitch={ onClose }
-										/>
-									) }
-								</div>
-							)
-						}
+						{ ( { onClose } ) => (
+							<BlockSwitcherDropdownMenuContents
+								onClose={ onClose }
+								clientIds={ clientIds }
+								hasBlockStyles={ hasBlockStyles }
+								canRemove={ canRemove }
+							/>
+						) }
 					</DropdownMenu>
 				) }
 			</ToolbarItem>
@@ -242,20 +354,4 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	);
 };
 
-export const BlockSwitcher = ( { clientIds } ) => {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
-		[ clientIds ]
-	);
-
-	if ( ! blocks.length || blocks.some( ( block ) => ! block ) ) {
-		return null;
-	}
-
-	return (
-		<BlockSwitcherDropdownMenu clientIds={ clientIds } blocks={ blocks } />
-	);
-};
-
 export default BlockSwitcher;
diff --git a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
index c3516f7e3ec794..7d66e19a214a28 100644
--- a/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
+++ b/packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js
@@ -3,17 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { chevronRight } from '@wordpress/icons';
 
 import {
+	Composite,
 	MenuGroup,
 	MenuItem,
 	Popover,
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 
 /**
@@ -29,7 +27,10 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
-	if ( ! patterns.length ) return null;
+
+	if ( ! patterns.length ) {
+		return null;
+	}
 
 	return (
 		<MenuGroup className="block-editor-block-switcher__pattern__transforms__menugroup">
@@ -53,33 +54,29 @@ function PatternTransformationsMenu( {
 }
 
 function PreviewPatternsPopover( { patterns, onSelect } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
-				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
-						<BlockPatternsList
-							patterns={ patterns }
-							onSelect={ onSelect }
-						/>
-					</div>
-				</Popover>
-			</div>
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement={ isMobile ? 'bottom' : 'right-start' }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview is-pattern-list-preview">
+					<BlockPatternsList
+						patterns={ patterns }
+						onSelect={ onSelect }
+					/>
+				</div>
+			</Popover>
 		</div>
 	);
 }
 
 function BlockPatternsList( { patterns, onSelect } ) {
-	const composite = useCompositeState();
 	return (
 		<Composite
-			{ ...composite }
 			role="listbox"
 			className="block-editor-block-switcher__preview-patterns-container"
 			aria-label={ __( 'Patterns list' ) }
@@ -89,14 +86,13 @@ function BlockPatternsList( { patterns, onSelect } ) {
 					key={ pattern.name }
 					pattern={ pattern }
 					onSelect={ onSelect }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>
 	);
 }
 
-function BlockPattern( { pattern, onSelect, composite } ) {
+function BlockPattern( { pattern, onSelect } ) {
 	// TODO check pattern/preview width...
 	const baseClassName =
 		'block-editor-block-switcher__preview-patterns-container';
@@ -105,16 +101,18 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 		`${ baseClassName }-list__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }-list__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
-			<CompositeItem
-				role="option"
-				as="div"
-				{ ...composite }
-				className={ `${ baseClassName }-list__item` }
+		<div className={ `${ baseClassName }-list__list-item` }>
+			<Composite.Item
+				render={
+					<div
+						role="option"
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
+						className={ `${ baseClassName }-list__item` }
+					/>
+				}
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>
 				<BlockPreview
@@ -124,7 +122,7 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 				<div className={ `${ baseClassName }-list__item-title` }>
 					{ pattern.title }
 				</div>
-			</CompositeItem>
+			</Composite.Item>
 			{ !! pattern.description && (
 				<VisuallyHidden id={ descriptionId }>
 					{ pattern.description }
diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index 78e29f4ad09fba..f978ed43af1da9 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -10,22 +11,27 @@ import { Popover } from '@wordpress/components';
 import BlockPreview from '../block-preview';
 
 export default function PreviewBlockPopover( { blocks } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( isMobile ) {
+		return null;
+	}
+
 	return (
-		<div className="block-editor-block-switcher__popover__preview__parent">
-			<div className="block-editor-block-switcher__popover__preview__container">
-				<Popover
-					className="block-editor-block-switcher__preview__popover"
-					placement="bottom-start"
-					focusOnMount={ false }
-				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
-						<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+		<div className="block-editor-block-switcher__popover-preview-container">
+			<Popover
+				className="block-editor-block-switcher__popover-preview"
+				placement="right-start"
+				focusOnMount={ false }
+				offset={ 16 }
+			>
+				<div className="block-editor-block-switcher__preview">
+					<div className="block-editor-block-switcher__preview-title">
+						{ __( 'Preview' ) }
 					</div>
-				</Popover>
-			</div>
+					<BlockPreview viewportWidth={ 500 } blocks={ blocks } />
+				</div>
+			</Popover>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
index 2a8acbf4130145..62a7bebe95d278 100644
--- a/packages/block-editor/src/components/block-switcher/style.scss
+++ b/packages/block-editor/src/components/block-switcher/style.scss
@@ -1,7 +1,7 @@
 .block-editor-block-switcher {
 	position: relative;
 
-	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
 	.components-button.components-dropdown-menu__toggle.has-icon.has-icon {
@@ -26,19 +26,6 @@
 	}
 }
 
-.block-editor-block-switcher__toggle-text {
-	margin-left: $grid-unit-10;
-
-	// Account for double label when show-text-buttons is set.
-	.show-icon-labels & {
-		display: none;
-	}
-}
-
-.show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after {
-	font-size: 14px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 
@@ -50,79 +37,52 @@
 }
 
 // Even when the block switcher does not have any transformations, it still serves as a block indicator.
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled {
-	opacity: 1;
+.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled="true"] {
+	color: $gray-900;
 
 	// Since it's not clickable, though, don't show a hover state.
-	&,
-	.block-editor-block-icon.has-colors {
+	&:hover {
 		color: $gray-900;
 	}
 }
 
-// Style this the same as the block buttons in the library.
-// Needs specificity to override the icon button.
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon {
-	.block-editor-block-icon {
-		height: 100%;
-		position: relative;
-		margin: 0 auto;
-		display: flex;
-		align-items: center;
-		min-width: 100%;
-	}
-
-	// Position the focus style correctly.
-	&::before {
-		top: $grid-unit-10;
-		right: $grid-unit-10;
-		bottom: $grid-unit-10;
-		left: $grid-unit-10;
-	}
-}
-
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
 	min-width: 300px;
 }
 
-.block-editor-block-switcher__popover__preview__parent {
-	.block-editor-block-switcher__popover__preview__container {
-		position: absolute;
-		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-20});
-	}
+.block-editor-block-switcher__popover-preview-container {
+	left: 0;
+	position: absolute;
+	top: -$border-width;
+	width: 100%;
+	bottom: 0;
+	pointer-events: none;
 }
 
-.block-editor-block-switcher__preview__popover {
-	display: none;
-
-	// Position correctly. Needs specificity.
-	&.components-popover {
-		margin-top: $grid-unit-15 - $border-width;
-	}
-
-	@include break-medium() {
-		display: block;
-	}
+.block-editor-block-switcher__popover-preview {
+	overflow: hidden;
 
 	.components-popover__content {
-		box-shadow: none;
+		width: 300px;
 		border: $border-width solid $gray-900;
 		background: $white;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-medium;
 		outline: none;
+		box-shadow: none;
+		overflow: auto;
 	}
 
 	.block-editor-block-switcher__preview {
-		width: 300px;
-		height: auto;
-		// Subtract margin from max-height.
+		// Subtract vertical margin from max-height.
 		max-height: calc(500px - #{$grid-unit-40});
-		margin: $grid-unit-20;
+		margin: $grid-unit-20 0;
+		// Use padding to prevent the pattern previews focus style from being cut-off.
+		padding: 0 $grid-unit-20;
 		overflow: hidden;
+
+		&.is-pattern-list-preview {
+			overflow: unset;
+		}
 	}
 }
 
@@ -168,7 +128,7 @@
 
 		.block-editor-block-switcher__preview-patterns-container-list__item {
 			height: 100%;
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
 			transition: all 0.05s ease-in-out;
 			position: relative;
 			border: $border-width solid transparent;
@@ -194,3 +154,14 @@
 		}
 	}
 }
+
+.block-editor-block-switcher__no-transforms {
+	color: $gray-700;
+	padding: 6px $grid-unit;
+	margin: 0;
+}
+
+.block-editor-block-switcher__binding-indicator {
+	display: block;
+	padding: $grid-unit;
+}
diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
deleted file mode 100644
index 2824cbdd92b968..00000000000000
--- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BlockSwitcherDropdownMenu should render disabled block switcher with multi block of different types when no transforms 1`] = `
-<div>
-  <div
-    class="components-toolbar"
-  >
-    <div>
-      <button
-        aria-label="Block Name"
-        class="components-button components-toolbar__control block-editor-block-switcher__no-switcher-icon has-icon"
-        data-toolbar-item="true"
-        disabled=""
-        type="button"
-      >
-        <span
-          class="block-editor-block-icon has-colors"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`BlockSwitcherDropdownMenu should render enabled block switcher with multi block when transforms exist 1`] = `
-<div>
-  <div
-    class="components-toolbar"
-  >
-    <div
-      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
-      tabindex="-1"
-    >
-      <button
-        aria-describedby="components-button__description-2"
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Block Name"
-        class="components-button components-dropdown-menu__toggle has-icon"
-        data-toolbar-item="true"
-        type="button"
-      >
-        <span
-          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
-        />
-      </button>
-      <div
-        class="components-visually-hidden emotion-0 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="VisuallyHidden"
-        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
-      >
-        <span
-          id="components-button__description-2"
-        >
-          Change type of 2 blocks
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`BlockSwitcherDropdownMenu should render switcher with blocks 1`] = `
-<div>
-  <div
-    class="components-toolbar"
-  >
-    <div
-      class="components-dropdown components-dropdown-menu block-editor-block-switcher"
-      tabindex="-1"
-    >
-      <button
-        aria-describedby="components-button__description-0"
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Block Name"
-        class="components-button components-dropdown-menu__toggle has-icon"
-        data-toolbar-item="true"
-        type="button"
-      >
-        <span
-          class="block-editor-block-icon block-editor-block-switcher__toggle has-colors"
-        />
-      </button>
-      <div
-        class="components-visually-hidden emotion-0 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="VisuallyHidden"
-        style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
-      >
-        <span
-          id="components-button__description-0"
-        >
-          Block Name: Change block type or style
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
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 9d788f9d6eb14d..bc1b7d1a4a3640 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 { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -14,7 +14,7 @@ import { copy } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
+import { BlockSwitcher } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../block-title/use-block-display-title', () =>
@@ -22,23 +22,6 @@ jest.mock( '../../block-title/use-block-display-title', () =>
 );
 
 describe( 'BlockSwitcher', () => {
-	test( 'should not render block switcher without blocks', () => {
-		useSelect.mockImplementation( () => ( {} ) );
-		const { container } = render( <BlockSwitcher /> );
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	test( 'should not render block switcher with null blocks', () => {
-		useSelect.mockImplementation( () => ( { blocks: [ null ] } ) );
-		const { container } = render(
-			<BlockSwitcher
-				clientIds={ [ 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9' ] }
-			/>
-		);
-		expect( container ).toBeEmptyDOMElement();
-	} );
-} );
-describe( 'BlockSwitcherDropdownMenu', () => {
 	const headingBlock1 = {
 		attributes: {
 			content: [ 'How are you?' ],
@@ -49,66 +32,46 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		originalContent: '<h2>How are you?</h2>',
 		clientId: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9',
 	};
-
-	const textBlock = {
-		attributes: {
-			content: [ 'I am great!' ],
+	const headingBlockType = {
+		category: 'text',
+		title: 'Heading',
+		edit: () => {},
+		save: () => {},
+		transforms: {
+			to: [
+				{
+					type: 'block',
+					blocks: [ 'core/paragraph' ],
+					transform: () => {},
+				},
+				{
+					type: 'block',
+					blocks: [ 'core/paragraph' ],
+					transform: () => {},
+					isMultiBlock: true,
+				},
+			],
 		},
-		isValid: true,
-		name: 'core/paragraph',
-		originalContent: '<p>I am great!</p>',
-		clientId: 'b1303fdb-3e60-43faf-a770-2e1ea656c5b8',
 	};
-
-	const headingBlock2 = {
-		attributes: {
-			content: [ 'I am the greatest!' ],
-			level: 3,
+	const paragraphBlockType = {
+		category: 'text',
+		title: 'Paragraph',
+		edit: () => {},
+		save: () => {},
+		transforms: {
+			to: [
+				{
+					type: 'block',
+					blocks: [ 'core/heading' ],
+					transform: () => {},
+				},
+			],
 		},
-		isValid: true,
-		name: 'core/heading',
-		originalContent: '<h3>I am the greatest!</h3>',
-		clientId: 'c2403fd2-4e63-5ffa-b71c-1e0ea656c5b0',
 	};
 
 	beforeAll( () => {
-		registerBlockType( 'core/heading', {
-			category: 'text',
-			title: 'Heading',
-			edit: () => {},
-			save: () => {},
-			transforms: {
-				to: [
-					{
-						type: 'block',
-						blocks: [ 'core/paragraph' ],
-						transform: () => {},
-					},
-					{
-						type: 'block',
-						blocks: [ 'core/paragraph' ],
-						transform: () => {},
-						isMultiBlock: true,
-					},
-				],
-			},
-		} );
-
-		registerBlockType( 'core/paragraph', {
-			category: 'text',
-			title: 'Paragraph',
-			edit: () => {},
-			save: () => {},
-			transforms: {
-				to: [
-					{
-						type: 'block',
-						blocks: [ 'core/heading' ],
-						transform: () => {},
-					},
-				],
-			},
-		} );
+		registerBlockType( 'core/heading', headingBlockType );
+		registerBlockType( 'core/paragraph', paragraphBlockType );
 	} );
 
 	afterAll( () => {
@@ -116,180 +79,104 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 		unregisterBlockType( 'core/paragraph' );
 	} );
 
-	test( 'should render switcher with blocks', () => {
+	test( 'should render switcher with block transforms', async () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [
-				{ name: 'core/heading', frecency: 1 },
-				{ name: 'core/paragraph', frecency: 1 },
+				{
+					name: 'core/heading',
+					title: headingBlockType.title,
+					frecency: 1,
+				},
+				{
+					name: 'core/paragraph',
+					title: paragraphBlockType.title,
+					frecency: 1,
+				},
 			],
+			blocks: [ headingBlock1 ],
 			canRemove: true,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
+		const user = userEvent.setup();
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+				expanded: false,
+			} )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'menu', {
+				name: 'Block Name',
+			} )
+		).not.toBeInTheDocument();
+		await user.type(
+			screen.getByRole( 'button', {
+				name: 'Block Name',
+				expanded: false,
+			} ),
+			'[ArrowDown]'
 		);
-		expect( container ).toMatchSnapshot();
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Block Name',
+					expanded: true,
+				} )
+			).toBeVisible()
+		);
+		const dropdown = screen.getByRole( 'menu', {
+			name: 'Block Name',
+		} );
+		await waitFor( () => expect( dropdown ).toBeVisible() );
+		const items = within( dropdown ).getAllByRole( 'menuitem' );
+		expect( items ).toHaveLength( 2 );
+		expect( items[ 0 ] ).toHaveTextContent( paragraphBlockType.title );
+		expect( items[ 1 ] ).toHaveTextContent( headingBlockType.title );
 	} );
 
-	test( 'should render disabled block switcher with multi block of different types when no transforms', () => {
+	test( 'should render accessibly disabled block switcher when we have a single selected block without styles and we cannot remove it', () => {
 		useSelect.mockImplementation( () => ( {
-			possibleBlockTransformations: [],
+			blocks: [ headingBlock1 ],
 			icon: copy,
+			hasBlockStyles: false,
+			canRemove: false,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu
-				blocks={ [ headingBlock1, textBlock ] }
-			/>
-		);
-		expect( container ).toMatchSnapshot();
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		const blockSwitcher = screen.getByRole( 'button', {
+			name: 'Block Name',
+		} );
+		expect( blockSwitcher ).toBeEnabled();
+		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
-	test( 'should render enabled block switcher with multi block when transforms exist', () => {
+	test( 'should render message for no available transforms', async () => {
 		useSelect.mockImplementation( () => ( {
-			possibleBlockTransformations: [
-				{ name: 'core/heading', frecency: 1 },
-				{ name: 'core/paragraph', frecency: 1 },
-			],
+			possibleBlockTransformations: [],
+			blocks: [ headingBlock1 ],
+			icon: copy,
 			canRemove: true,
 		} ) );
-		const { container } = render(
-			<BlockSwitcherDropdownMenu
-				blocks={ [ headingBlock1, headingBlock2 ] }
-			/>
-		);
-		expect( container ).toMatchSnapshot();
-	} );
-
-	describe( 'Dropdown', () => {
-		beforeAll( () => {
-			useSelect.mockImplementation( () => ( {
-				possibleBlockTransformations: [
-					{ name: 'core/paragraph', frecency: 3 },
-				],
-				canRemove: true,
-			} ) );
-		} );
-
-		test( 'should dropdown exist', () => {
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			).toBeVisible();
-		} );
-
-		test( 'should simulate a keydown event, which should open transform toggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			).toBeVisible();
-			expect(
-				screen.queryByRole( 'menu', {
-					name: 'Block Name',
-				} )
-			).not.toBeInTheDocument();
-
-			await user.type(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} ),
-				'[ArrowDown]'
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible();
-
-			const menu = screen.getByRole( 'menu', {
+		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
+		const user = userEvent.setup();
+		await user.type(
+			screen.getByRole( 'button', {
 				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
-		} );
-
-		test( 'should simulate a click event, which should call onToggle.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			).toBeVisible();
-			expect(
-				screen.queryByRole( 'menu', {
-					name: 'Block Name',
-				} )
-			).not.toBeInTheDocument();
-
-			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			);
-
+				expanded: false,
+			} ),
+			'[ArrowDown]'
+		);
+		await waitFor( () =>
 			expect(
 				screen.getByRole( 'button', {
 					name: 'Block Name',
 					expanded: true,
 				} )
-			).toBeVisible();
-
-			const menu = screen.getByRole( 'menu', {
+			).toBeVisible()
+		);
+		expect(
+			screen.getByRole( 'menu', {
 				name: 'Block Name',
-			} );
-			expect( menu ).toBeInTheDocument();
-			expect( menu ).not.toBeVisible();
-		} );
-
-		test( 'should create the transform items for the chosen block.', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<BlockSwitcherDropdownMenu blocks={ [ headingBlock1 ] } />
-			);
-
-			await user.click(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: false,
-				} )
-			);
-
-			expect(
-				within(
-					screen.getByRole( 'menu', {
-						name: 'Block Name',
-					} )
-				).getByRole( 'menuitem' )
-			).toBeInTheDocument();
-		} );
+			} )
+		).toHaveTextContent( 'No transforms.' );
 	} );
 } );
diff --git a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
index 05ce545667d464..4d63c763174791 100644
--- a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
+++ b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save() {},
diff --git a/packages/block-editor/src/components/block-switcher/test/utils.js b/packages/block-editor/src/components/block-switcher/test/utils.js
index 38009601e16468..eafe5e8a4d9378 100644
--- a/packages/block-editor/src/components/block-switcher/test/utils.js
+++ b/packages/block-editor/src/components/block-switcher/test/utils.js
@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
 					},
 					content: {
 						type: 'boolean',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					level: {
 						type: 'number',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					color: {
 						type: 'string',
-						__experimentalRole: 'other',
+						role: 'other',
 					},
 				},
 				save() {},
diff --git a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
index ba340f62d5e835..86055d5425255b 100644
--- a/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
+++ b/packages/block-editor/src/components/block-switcher/use-transformed-patterns.js
@@ -62,7 +62,9 @@ export const getPatternTransformedBlocks = (
 				selectedBlock.name,
 				consumedBlocks
 			);
-			if ( ! match ) continue;
+			if ( ! match ) {
+				continue;
+			}
 			isMatch = true;
 			consumedBlocks.add( match.clientId );
 			// We update (mutate) the matching pattern block.
@@ -71,7 +73,9 @@ export const getPatternTransformedBlocks = (
 			break;
 		}
 		// Bail eary if a selected block has not been matched.
-		if ( ! isMatch ) return;
+		if ( ! isMatch ) {
+			return;
+		}
 	}
 	return _patternBlocks;
 };
diff --git a/packages/block-editor/src/components/block-switcher/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
index 46888a5d15fbc2..49257a2126cbe5 100644
--- a/packages/block-editor/src/components/block-switcher/utils.js
+++ b/packages/block-editor/src/components/block-switcher/utils.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided
@@ -13,7 +13,7 @@ import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesB
  * @param {string}  selectedBlockName The block's name to use for matching condition.
  * @param {Set}     consumedBlocks    A set holding the previously matched/consumed blocks.
  *
- * @return {WPBlock?} The matched block if found or nothing(`undefined`).
+ * @return {WPBlock | undefined} The matched block if found or nothing(`undefined`).
  */
 export const getMatchingBlockByName = (
 	block,
@@ -22,8 +22,12 @@ export const getMatchingBlockByName = (
 ) => {
 	const { clientId, name, innerBlocks = [] } = block;
 	// Check if block has been consumed already.
-	if ( consumedBlocks.has( clientId ) ) return;
-	if ( name === selectedBlockName ) return block;
+	if ( consumedBlocks.has( clientId ) ) {
+		return;
+	}
+	if ( name === selectedBlockName ) {
+		return block;
+	}
 	// Try to find a matching block from InnerBlocks recursively.
 	for ( const innerBlock of innerBlocks ) {
 		const match = getMatchingBlockByName(
@@ -31,7 +35,9 @@ export const getMatchingBlockByName = (
 			selectedBlockName,
 			consumedBlocks
 		);
-		if ( match ) return match;
+		if ( match ) {
+			return match;
+		}
 	}
 };
 
@@ -47,11 +53,14 @@ export const getMatchingBlockByName = (
  */
 export const getRetainedBlockAttributes = ( name, attributes ) => {
 	const contentAttributes = getBlockAttributesNamesByRole( name, 'content' );
-	if ( ! contentAttributes?.length ) return attributes;
+	if ( ! contentAttributes?.length ) {
+		return attributes;
+	}
 
 	return contentAttributes.reduce( ( _accumulator, attribute ) => {
-		if ( attributes[ attribute ] )
+		if ( attributes[ attribute ] ) {
 			_accumulator[ attribute ] = attributes[ attribute ];
+		}
 		return _accumulator;
 	}, {} );
 };
diff --git a/packages/block-editor/src/components/block-title/test/index.js b/packages/block-editor/src/components/block-title/test/index.js
index 7031b0b197bf41..fc6af61bae9e7c 100644
--- a/packages/block-editor/src/components/block-title/test/index.js
+++ b/packages/block-editor/src/components/block-title/test/index.js
@@ -13,65 +13,42 @@ import { useSelect } from '@wordpress/data';
  */
 import BlockTitle from '../';
 
+const blockTypeMap = {
+	'name-not-exists': null,
+	'name-exists': { title: 'Block Title' },
+	'name-with-label': { title: 'Block With Label' },
+	'name-with-custom-label': { title: 'Block With Custom Label' },
+	'name-with-long-label': { title: 'Block With Long Label' },
+	'reusable-block': { title: 'Reusable Block' },
+};
+
+const blockLabelMap = {
+	'Block With Label': 'Test Label',
+	'Block With Long Label':
+		'This is a longer label than typical for blocks to have.',
+	'Block With Custom Label': 'A Custom Label like a Block Variation Label',
+	'Reusable Block': 'Reuse me!',
+};
+
 jest.mock( '@wordpress/blocks', () => {
+	const actualImplementation = jest.requireActual( '@wordpress/blocks' );
 	return {
-		getBlockType( name ) {
-			switch ( name ) {
-				case 'name-not-exists':
-					return null;
-
-				case 'name-exists':
-					return { title: 'Block Title' };
-
-				case 'name-with-label':
-					return { title: 'Block With Label' };
-
-				case 'name-with-custom-label':
-					return { title: 'Block With Custom Label' };
-
-				case 'name-with-long-label':
-					return { title: 'Block With Long Label' };
-			}
+		...actualImplementation,
+		isReusableBlock( { title } ) {
+			return title === 'Reusable Block';
 		},
 		__experimentalGetBlockLabel( { title } ) {
-			switch ( title ) {
-				case 'Block With Label':
-					return 'Test Label';
-
-				case 'Block With Long Label':
-					return 'This is a longer label than typical for blocks to have.';
-
-				case 'Block With Custom Label':
-					return 'A Custom Label like a Block Variation Label';
-
-				default:
-					return title;
-			}
+			return blockLabelMap[ title ] || title;
 		},
 	};
 } );
 
-jest.mock( '../../use-block-display-information', () => {
-	const resultsMap = {
-		'id-name-exists': { title: 'Block Title' },
-		'id-name-with-label': { title: 'Block With Label' },
-		'id-name-with-long-label': { title: 'Block With Long Label' },
-	};
-	return jest.fn( ( clientId ) => resultsMap[ clientId ] );
-} );
-
-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;
-} );
+// This allows us to tweak the returned value on each test.
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 
 describe( 'BlockTitle', () => {
 	it( 'renders nothing if name is falsey', () => {
-		useSelect.mockImplementation( () => ( {
-			name: null,
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( () => null );
 
 		const { container } = render( <BlockTitle /> );
 
@@ -79,10 +56,12 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders nothing if block type does not exist', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-not-exists',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-not-exists',
+				getBlockType: () => null,
+			} ) )
+		);
 
 		const { container } = render(
 			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
@@ -92,10 +71,14 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders title if block type exists', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-exists',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-exists',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+				getActiveBlockVariation: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-exists" /> );
 
@@ -103,10 +86,13 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'renders label if it is set', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-label" /> );
 
@@ -114,23 +100,28 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'should prioritize reusable block title over title', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-label',
-			reusableBlockTitle: 'Reuse me!',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'reusable-block',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => ( { ref: 1 } ),
+			} ) )
+		);
 
-		render( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-reusable-block" /> );
 
 		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'Reuse me!' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize block label over title', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-custom-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-custom-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-label" /> );
 
@@ -140,22 +131,31 @@ describe( 'BlockTitle', () => {
 		).toBeVisible();
 	} );
 
-	it( 'should default to block information title if no reusable title or block name is available', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'some-rando-name',
-			attributes: null,
-		} ) );
+	it( 'should default to block variation title if no reusable title or block name is available', () => {
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-exists',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+				getActiveBlockVariation: () => ( {
+					title: 'Block Variation Label',
+				} ),
+			} ) )
+		);
 
-		render( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-exists" /> );
 
-		expect( screen.getByText( 'Block With Label' ) ).toBeVisible();
+		expect( screen.getByText( 'Block Variation Label' ) ).toBeVisible();
 	} );
 
 	it( 'truncates the label with custom truncate length', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-long-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-long-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render(
 			<BlockTitle
@@ -168,10 +168,13 @@ describe( 'BlockTitle', () => {
 	} );
 
 	it( 'should not truncate the label if maximum length is undefined', () => {
-		useSelect.mockImplementation( () => ( {
-			name: 'name-with-long-label',
-			attributes: null,
-		} ) );
+		useSelect.mockImplementation( ( mapSelect ) =>
+			mapSelect( () => ( {
+				getBlockName: () => 'name-with-long-label',
+				getBlockType: ( name ) => blockTypeMap[ name ],
+				getBlockAttributes: () => null,
+			} ) )
+		);
 
 		render( <BlockTitle clientId="id-name-with-long-label" /> );
 
diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js
index be1e26319d671c..a51b336554a2a7 100644
--- a/packages/block-editor/src/components/block-title/use-block-display-title.js
+++ b/packages/block-editor/src/components/block-title/use-block-display-title.js
@@ -3,15 +3,13 @@
  */
 import { useSelect } from '@wordpress/data';
 import {
-	getBlockType,
 	__experimentalGetBlockLabel as getBlockLabel,
-	isReusableBlock,
+	store as blocksStore,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import useBlockDisplayInformation from '../use-block-display-information';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -35,49 +33,40 @@ export default function useBlockDisplayTitle( {
 	maximumLength,
 	context,
 } ) {
-	const { attributes, name, reusableBlockTitle } = useSelect(
+	const blockTitle = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
-				return {};
+				return null;
 			}
-			const {
-				getBlockName,
-				getBlockAttributes,
-				__experimentalGetReusableBlockTitle,
-			} = select( blockEditorStore );
+
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+
 			const blockName = getBlockName( clientId );
-			if ( ! blockName ) {
-				return {};
+			const blockType = getBlockType( blockName );
+			if ( ! blockType ) {
+				return null;
+			}
+
+			const attributes = getBlockAttributes( clientId );
+			const label = getBlockLabel( blockType, attributes, context );
+			// If the label is defined we prioritize it over a possible block variation title match.
+			if ( label !== blockType.title ) {
+				return label;
 			}
-			const isReusable = isReusableBlock( getBlockType( blockName ) );
-			return {
-				attributes: getBlockAttributes( clientId ),
-				name: blockName,
-				reusableBlockTitle:
-					isReusable &&
-					__experimentalGetReusableBlockTitle(
-						getBlockAttributes( clientId ).ref
-					),
-			};
+
+			const match = getActiveBlockVariation( blockName, attributes );
+			// Label will fallback to the title if no label is defined for the current label context.
+			return match?.title || blockType.title;
 		},
-		[ clientId ]
+		[ clientId, context ]
 	);
 
-	const blockInformation = useBlockDisplayInformation( clientId );
-	if ( ! name || ! blockInformation ) {
+	if ( ! blockTitle ) {
 		return null;
 	}
-	const blockType = getBlockType( name );
-	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes, context )
-		: null;
-
-	const label = reusableBlockTitle || blockLabel;
-	// Label will fallback to the title if no label is defined for the current
-	// label context. If the label is defined we prioritize it over a
-	// possible block variation title match.
-	const blockTitle =
-		label && label !== blockType.title ? label : blockInformation.title;
 
 	if (
 		maximumLength &&
diff --git a/packages/block-editor/src/components/block-toolbar/README.md b/packages/block-editor/src/components/block-toolbar/README.md
index be4c8e15abe097..7a8a0543e179e1 100644
--- a/packages/block-editor/src/components/block-toolbar/README.md
+++ b/packages/block-editor/src/components/block-toolbar/README.md
@@ -6,11 +6,6 @@ The `BlockToolbar` component is used to render a toolbar that serves as a wrappe
 
 ![Image block toolbar](https://make.wordpress.org/core/files/2020/09/image-block-toolbar.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-toolbar/block-toolbar-menu.native.js b/packages/block-editor/src/components/block-toolbar/block-toolbar-menu.native.js
new file mode 100644
index 00000000000000..c68e4be1c40545
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/block-toolbar-menu.native.js
@@ -0,0 +1,477 @@
+/**
+ * External dependencies
+ */
+import { Platform, findNodeHandle } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	getClipboard,
+	setClipboard,
+	ToolbarGroup,
+	ToolbarButton,
+	Picker,
+} from '@wordpress/components';
+import {
+	getBlockType,
+	getDefaultBlockName,
+	hasBlockSupport,
+	serialize,
+	rawHandler,
+	createBlock,
+	isUnmodifiedDefaultBlock,
+	isReusableBlock,
+} from '@wordpress/blocks';
+import { __, sprintf } from '@wordpress/i18n';
+import { withDispatch, withSelect, useSelect } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
+import { moreHorizontalMobile } from '@wordpress/icons';
+import { useRef, useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { getMoversSetup } from '../block-mover/mover-description';
+import { store as blockEditorStore } from '../../store';
+import BlockTransformationsMenu from '../block-switcher/block-transformations-menu';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const BlockActionsMenu = ( {
+	// Select.
+	blockTitle,
+	canInsertBlockType,
+	getBlocksByClientId,
+	isEmptyDefaultBlock,
+	isLocked,
+	canDuplicate,
+	isFirst,
+	isLast,
+	isReusableBlockType,
+	reusableBlock,
+	rootClientId,
+	selectedBlockClientId,
+	selectedBlockPossibleTransformations,
+	// Dispatch.
+	createSuccessNotice,
+	convertToRegularBlocks,
+	duplicateBlock,
+	onMoveDown,
+	onMoveUp,
+	openGeneralSidebar,
+	pasteBlock,
+	removeBlocks,
+	// Passed in.
+	anchorNodeRef,
+	isStackedHorizontally,
+	onDelete,
+	wrapBlockMover,
+	wrapBlockSettings,
+} ) => {
+	const [ clipboard, setCurrentClipboard ] = useState( getClipboard() );
+	const blockActionsMenuPickerRef = useRef();
+	const blockTransformationMenuPickerRef = useRef();
+	const moversOptions = { keys: [ 'icon', 'actionTitle' ] };
+	const clipboardBlock = clipboard && rawHandler( { HTML: clipboard } )[ 0 ];
+	const isPasteEnabled =
+		clipboardBlock &&
+		canInsertBlockType( clipboardBlock.name, rootClientId );
+
+	const innerBlockCount = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockCount( selectedBlockClientId ),
+		[ selectedBlockClientId ]
+	);
+
+	const {
+		actionTitle: {
+			backward: backwardButtonTitle,
+			forward: forwardButtonTitle,
+		},
+	} = getMoversSetup( isStackedHorizontally, moversOptions );
+
+	// Check if selected block is Groupable and/or Ungroupable.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps(
+		// `selectedBlockClientId` can be undefined in some cases where this
+		// component gets re-rendered right after the block is removed.
+		selectedBlockClientId ? [ selectedBlockClientId ] : []
+	);
+	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
+	const showConvertToGroupButton = isGroupable || isUngroupable;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+
+	const allOptions = {
+		settings: {
+			id: 'settingsOption',
+			label: __( 'Block settings' ),
+			value: 'settingsOption',
+			onSelect: openGeneralSidebar,
+		},
+		backwardButton: {
+			id: 'backwardButtonOption',
+			label: backwardButtonTitle,
+			value: 'backwardButtonOption',
+			disabled: isFirst,
+			onSelect: onMoveUp,
+		},
+		forwardButton: {
+			id: 'forwardButtonOption',
+			label: forwardButtonTitle,
+			value: 'forwardButtonOption',
+			disabled: isLast,
+			onSelect: onMoveDown,
+		},
+		delete: {
+			id: 'deleteOption',
+			label: __( 'Remove block' ),
+			value: 'deleteOption',
+			separated: true,
+			disabled: isEmptyDefaultBlock,
+			onSelect: () => {
+				onDelete();
+				createSuccessNotice(
+					// translators: displayed right after the block is removed.
+					__( 'Block removed' )
+				);
+			},
+		},
+		transformButton: {
+			id: 'transformButtonOption',
+			label: __( 'Transform block…' ),
+			value: 'transformButtonOption',
+			onSelect: () => {
+				if ( blockTransformationMenuPickerRef.current ) {
+					blockTransformationMenuPickerRef.current.presentPicker();
+				}
+			},
+		},
+		copyButton: {
+			id: 'copyButtonOption',
+			label: __( 'Copy' ),
+			value: 'copyButtonOption',
+			onSelect: () => {
+				const serializedBlock = serialize(
+					getBlocksByClientId( selectedBlockClientId )
+				);
+				setCurrentClipboard( serializedBlock );
+				setClipboard( serializedBlock );
+				createSuccessNotice(
+					// translators: displayed right after the block is copied.
+					__( 'Block copied' )
+				);
+			},
+		},
+		cutButton: {
+			id: 'cutButtonOption',
+			label: __( 'Cut block' ),
+			value: 'cutButtonOption',
+			onSelect: () => {
+				setClipboard(
+					serialize( getBlocksByClientId( selectedBlockClientId ) )
+				);
+				removeBlocks( selectedBlockClientId );
+				createSuccessNotice(
+					// translators: displayed right after the block is cut.
+					__( 'Block cut' )
+				);
+			},
+		},
+		pasteButton: {
+			id: 'pasteButtonOption',
+			label: __( 'Paste block after' ),
+			value: 'pasteButtonOption',
+			onSelect: () => {
+				onPasteBlock();
+				createSuccessNotice(
+					// translators: displayed right after the block is pasted.
+					__( 'Block pasted' )
+				);
+			},
+		},
+		duplicateButton: {
+			id: 'duplicateButtonOption',
+			label: __( 'Duplicate block' ),
+			value: 'duplicateButtonOption',
+			onSelect: () => {
+				duplicateBlock();
+				createSuccessNotice(
+					// translators: displayed right after the block is duplicated.
+					__( 'Block duplicated' )
+				);
+			},
+		},
+		convertToRegularBlocks: {
+			id: 'convertToRegularBlocksOption',
+			label: __( 'Detach' ),
+			value: 'convertToRegularBlocksOption',
+			onSelect: () => {
+				/* translators: %s: name of the synced block */
+				const successNotice = __( '%s detached' );
+				createSuccessNotice(
+					sprintf(
+						successNotice,
+						reusableBlock?.title?.raw || blockTitle
+					)
+				);
+				convertToRegularBlocks();
+			},
+		},
+	};
+
+	const options = [
+		wrapBlockMover && allOptions.backwardButton,
+		wrapBlockMover && allOptions.forwardButton,
+		wrapBlockSettings && allOptions.settings,
+		! isLocked &&
+			selectedBlockPossibleTransformations.length &&
+			allOptions.transformButton,
+		canDuplicate && allOptions.copyButton,
+		canDuplicate && allOptions.cutButton,
+		canDuplicate && isPasteEnabled && allOptions.pasteButton,
+		canDuplicate && allOptions.duplicateButton,
+		showConvertToGroupButton && isGroupable && convertToGroupButtons.group,
+		showConvertToGroupButton &&
+			isUngroupable &&
+			convertToGroupButtons.ungroup,
+		isReusableBlockType &&
+			innerBlockCount > 0 &&
+			allOptions.convertToRegularBlocks,
+		! isLocked && allOptions.delete,
+	].filter( Boolean );
+
+	// End early if there are no options to show.
+	if ( ! options.length ) {
+		return (
+			<ToolbarGroup>
+				<ToolbarButton
+					title={ __( 'Open Block Actions Menu' ) }
+					icon={ moreHorizontalMobile }
+					disabled
+				/>
+			</ToolbarGroup>
+		);
+	}
+
+	function onPasteBlock() {
+		if ( ! clipboard ) {
+			return;
+		}
+
+		pasteBlock( rawHandler( { HTML: clipboard } )[ 0 ] );
+	}
+
+	function onPickerSelect( value ) {
+		const selectedItem = options.find( ( item ) => item.value === value );
+		selectedItem.onSelect();
+	}
+
+	function onPickerPresent() {
+		if ( blockActionsMenuPickerRef.current ) {
+			blockActionsMenuPickerRef.current.presentPicker();
+		}
+	}
+
+	const disabledButtonIndices = options
+		.map( ( option, index ) => option.disabled && index + 1 )
+		.filter( Boolean );
+
+	const accessibilityHint =
+		Platform.OS === 'ios'
+			? __( 'Double tap to open Action Sheet with available options' )
+			: __( 'Double tap to open Bottom Sheet with available options' );
+
+	const getAnchor = () =>
+		anchorNodeRef ? findNodeHandle( anchorNodeRef ) : undefined;
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				title={ __( 'Open Block Actions Menu' ) }
+				onClick={ onPickerPresent }
+				icon={ moreHorizontalMobile }
+				extraProps={ {
+					hint: accessibilityHint,
+				} }
+			/>
+			<Picker
+				testID="block-actions-menu"
+				ref={ blockActionsMenuPickerRef }
+				options={ options }
+				onChange={ onPickerSelect }
+				destructiveButtonIndex={ options.length }
+				disabledButtonIndices={ disabledButtonIndices }
+				hideCancelButton={ Platform.OS !== 'ios' }
+				leftAlign
+				getAnchor={ getAnchor }
+				// translators: %s: block title e.g: "Paragraph".
+				title={ sprintf( __( '%s block options' ), blockTitle ) }
+			/>
+			<BlockTransformationsMenu
+				anchorNodeRef={ anchorNodeRef }
+				blockTitle={ blockTitle }
+				pickerRef={ blockTransformationMenuPickerRef }
+				possibleTransformations={ selectedBlockPossibleTransformations }
+				selectedBlock={ getBlocksByClientId( selectedBlockClientId ) }
+				selectedBlockClientId={ selectedBlockClientId }
+			/>
+		</ToolbarGroup>
+	);
+};
+
+const EMPTY_BLOCK_LIST = [];
+
+export default compose(
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockIndex,
+			getBlockRootClientId,
+			getBlockOrder,
+			getBlockName,
+			getBlockTransformItems,
+			getBlock,
+			getBlocksByClientId,
+			getSelectedBlockClientIds,
+			canInsertBlockType,
+			getTemplateLock,
+		} = select( blockEditorStore );
+		const block = getBlock( clientId );
+		const blockName = getBlockName( clientId );
+		const blockType = getBlockType( blockName );
+		const blockTitle = blockType?.title;
+		const rootClientId = getBlockRootClientId( clientId );
+		const blockOrder = getBlockOrder( rootClientId );
+
+		const currentBlockIndex = getBlockIndex( clientId );
+		const isFirst = currentBlockIndex === 0;
+		const isLast = currentBlockIndex === blockOrder.length - 1;
+
+		const innerBlocks = getBlocksByClientId( clientId );
+
+		const canDuplicate = innerBlocks.every( ( innerBlock ) => {
+			return (
+				!! innerBlock &&
+				hasBlockSupport( innerBlock.name, 'multiple', true ) &&
+				canInsertBlockType( innerBlock.name, rootClientId )
+			);
+		} );
+
+		const isDefaultBlock = blockName === getDefaultBlockName();
+		const isEmptyContent = block?.attributes.content === '';
+		const isExactlyOneBlock = blockOrder.length === 1;
+		const isEmptyDefaultBlock =
+			isExactlyOneBlock && isDefaultBlock && isEmptyContent;
+		const isLocked = !! getTemplateLock( rootClientId );
+
+		const selectedBlockClientId = getSelectedBlockClientIds()[ 0 ];
+		const selectedBlock = selectedBlockClientId
+			? getBlocksByClientId( selectedBlockClientId )[ 0 ]
+			: undefined;
+		const selectedBlockPossibleTransformations = selectedBlock
+			? getBlockTransformItems( selectedBlock, rootClientId )
+			: EMPTY_BLOCK_LIST;
+
+		const isReusableBlockType = block ? isReusableBlock( block ) : false;
+		const reusableBlock = isReusableBlockType
+			? select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					block?.attributes.ref
+			  )
+			: undefined;
+
+		return {
+			blockTitle,
+			canInsertBlockType,
+			currentIndex: currentBlockIndex,
+			getBlocksByClientId,
+			isEmptyDefaultBlock,
+			isLocked,
+			canDuplicate,
+			isFirst,
+			isLast,
+			isReusableBlockType,
+			reusableBlock,
+			rootClientId,
+			selectedBlockClientId,
+			selectedBlockPossibleTransformations,
+		};
+	} ),
+	withDispatch(
+		(
+			dispatch,
+			{ clientId, rootClientId, currentIndex, selectedBlockClientId },
+			{ select }
+		) => {
+			const {
+				moveBlocksDown,
+				moveBlocksUp,
+				duplicateBlocks,
+				removeBlocks,
+				insertBlock,
+				replaceBlock,
+				clearSelectedBlock,
+			} = dispatch( blockEditorStore );
+			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+			const { getBlockSelectionEnd, getBlock } =
+				select( blockEditorStore );
+			const { createSuccessNotice } = dispatch( noticesStore );
+
+			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+				dispatch( reusableBlocksStore );
+
+			return {
+				createSuccessNotice,
+				convertToRegularBlocks() {
+					clearSelectedBlock();
+					// Convert action is executed at the end of the current JavaScript execution block
+					// to prevent issues related to undo/redo actions.
+					setImmediate( () =>
+						convertBlockToStatic( selectedBlockClientId )
+					);
+				},
+				duplicateBlock() {
+					return duplicateBlocks( [ clientId ] );
+				},
+				onMoveDown: ( ...args ) =>
+					moveBlocksDown( [ clientId ], rootClientId, ...args ),
+				onMoveUp: ( ...args ) =>
+					moveBlocksUp( [ clientId ], rootClientId, ...args ),
+				openGeneralSidebar: () =>
+					openGeneralSidebar( 'edit-post/block' ),
+				pasteBlock: ( clipboardBlock ) => {
+					const canReplaceBlock = isUnmodifiedDefaultBlock(
+						getBlock( getBlockSelectionEnd() )
+					);
+
+					if ( ! canReplaceBlock ) {
+						const insertedBlock = createBlock(
+							clipboardBlock.name,
+							clipboardBlock.attributes,
+							clipboardBlock.innerBlocks
+						);
+
+						insertBlock(
+							insertedBlock,
+							currentIndex + 1,
+							rootClientId
+						);
+					} else {
+						replaceBlock( clientId, clipboardBlock );
+					}
+				},
+				removeBlocks,
+			};
+		}
+	),
+	withInstanceId
+)( BlockActionsMenu );
diff --git a/packages/block-editor/src/components/block-toolbar/change-design.js b/packages/block-editor/src/components/block-toolbar/change-design.js
new file mode 100644
index 00000000000000..2d69675218ea48
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/change-design.js
@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cloneBlock } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockPatternsList from '../block-patterns-list';
+
+const EMPTY_ARRAY = [];
+const MAX_PATTERNS_TO_SHOW = 6;
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+export default function ChangeDesign( { clientId } ) {
+	const { categories, currentPatternName, patterns } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockRootClientId,
+				__experimentalGetAllowedPatterns,
+			} = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const rootBlock = getBlockRootClientId( clientId );
+
+			// Calling `__experimentalGetAllowedPatterns` is expensive.
+			// Checking if the block can be changed prevents unnecessary selector calls.
+			// See: https://github.com/WordPress/gutenberg/pull/64736.
+			const _patterns =
+				_categories.length > 0
+					? __experimentalGetAllowedPatterns( rootBlock )
+					: EMPTY_ARRAY;
+			return {
+				categories: _categories,
+				currentPatternName: attributes?.metadata?.patternName,
+				patterns: _patterns,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
+		if ( categories.length === 0 || ! patterns || patterns.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		return patterns
+			.filter( ( pattern ) => {
+				const isCorePattern =
+					pattern.source === 'core' ||
+					( pattern.source?.startsWith( 'pattern-directory' ) &&
+						pattern.source !== 'pattern-directory/theme' );
+				return (
+					// Check if the pattern has only one top level block,
+					// otherwise we may switch to a pattern that doesn't have replacement suggestions.
+					pattern.blocks.length === 1 &&
+					// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+					! isCorePattern &&
+					// Exclude current pattern.
+					currentPatternName !== pattern.name &&
+					pattern.categories?.some( ( category ) => {
+						return categories.includes( category );
+					} ) &&
+					// Check if the pattern is not a synced pattern.
+					( pattern.syncStatus === 'unsynced' || ! pattern.id )
+				);
+			} )
+			.slice( 0, MAX_PATTERNS_TO_SHOW );
+	}, [ categories, currentPatternName, patterns ] );
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
+		return null;
+	}
+
+	const onClickPattern = ( pattern ) => {
+		const newBlocks = ( pattern.blocks ?? [] ).map( ( block ) => {
+			return cloneBlock( block );
+		} );
+		newBlocks[ 0 ].attributes.metadata = {
+			...newBlocks[ 0 ].attributes.metadata,
+			categories,
+		};
+		replaceBlocks( clientId, newBlocks );
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => onToggle( ! isOpen ) }
+							aria-expanded={ isOpen }
+						>
+							{ __( 'Change design' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-editor-block-toolbar-change-design-content-wrapper"
+					paddingSize="none"
+				>
+					<BlockPatternsList
+						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
+						onClickPattern={ onClickPattern }
+						showTitlesAsTooltip
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 6727851e1647bf..083d77a694a7b2 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -29,159 +30,265 @@ import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import BlockEditVisuallyButton from '../block-edit-visually-button';
-import { useShowMoversGestures } from './utils';
+import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
+import NavigableToolbar from '../navigable-toolbar';
+import { useHasBlockToolbar } from './use-has-block-toolbar';
+import ChangeDesign from './change-design';
+import SwitchSectionStyle from './switch-section-style';
+import { unlock } from '../../lock-unlock';
 
-const BlockToolbar = ( { hideDragHandle } ) => {
+/**
+ * Renders the block toolbar.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}   props                             Components props.
+ * @param {boolean}  props.hideDragHandle              Show or hide the Drag Handle for drag and drop functionality.
+ * @param {boolean}  props.focusOnMount                Focus the toolbar when mounted.
+ * @param {number}   props.__experimentalInitialIndex  The initial index of the toolbar item to focus.
+ * @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
+ * @param {string}   props.variant                     Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
+ */
+export function PrivateBlockToolbar( {
+	hideDragHandle,
+	focusOnMount,
+	__experimentalInitialIndex,
+	__experimentalOnIndexChange,
+	variant = 'unstyled',
+} ) {
 	const {
-		blockClientIds,
 		blockClientId,
+		blockClientIds,
+		isDefaultEditingMode,
 		blockType,
+		toolbarKey,
+		shouldShowVisualToolbar,
+		showParentSelector,
+		isUsingBindings,
+		hasParentPattern,
+		hasContentOnlyLocking,
+		showShuffleButton,
+		showSlots,
+		showGroupButtons,
+		showLockButtons,
+		showSwitchSectionStyleButton,
 		hasFixedToolbar,
-		isDistractionFree,
-		isValid,
-		isVisual,
-		isContentLocked,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockMode,
+			getBlockParents,
 			getSelectedBlockClientIds,
 			isBlockValid,
-			getBlockRootClientId,
+			getBlockEditingMode,
+			getBlockAttributes,
+			getBlockParentsByBlockName,
+			getTemplateLock,
 			getSettings,
-			__unstableGetContentLockingParent,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+			isZoomOut,
+			isNavigationMode: _isNavigationMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
-		const settings = getSettings();
+		const parents = getBlockParents( selectedBlockClientId );
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( parentClientId );
+		const parentBlockType = getBlockType( parentBlockName );
+		const editingMode = getBlockEditingMode( selectedBlockClientId );
+		const _isDefaultEditingMode = editingMode === 'default';
+		const _blockName = getBlockName( selectedBlockClientId );
+		const isValid = selectedBlockClientIds.every( ( id ) =>
+			isBlockValid( id )
+		);
+		const isVisual = selectedBlockClientIds.every(
+			( id ) => getBlockMode( id ) === 'visual'
+		);
+		const _isUsingBindings = selectedBlockClientIds.every(
+			( clientId ) =>
+				!! getBlockAttributes( clientId )?.metadata?.bindings
+		);
+
+		const _hasParentPattern = selectedBlockClientIds.every(
+			( clientId ) =>
+				getBlockParentsByBlockName( clientId, 'core/block', true )
+					.length > 0
+		);
+
+		// If one or more selected blocks are locked, do not show the BlockGroupToolbar.
+		const _hasTemplateLock = selectedBlockClientIds.some(
+			( id ) => getTemplateLock( id ) === 'contentOnly'
+		);
+
+		const _isZoomOut = isZoomOut();
 
 		return {
-			blockClientIds: selectedBlockClientIds,
 			blockClientId: selectedBlockClientId,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-			hasFixedToolbar: settings.hasFixedToolbar,
-			isDistractionFree: settings.isDistractionFree,
-			rootClientId: blockRootClientId,
-			isValid: selectedBlockClientIds.every( ( id ) =>
-				isBlockValid( id )
-			),
-			isVisual: selectedBlockClientIds.every(
-				( id ) => getBlockMode( id ) === 'visual'
-			),
-			isContentLocked: !! __unstableGetContentLockingParent(
-				selectedBlockClientId
-			),
+			blockClientIds: selectedBlockClientIds,
+			isDefaultEditingMode: _isDefaultEditingMode,
+			blockType: selectedBlockClientId && getBlockType( _blockName ),
+			shouldShowVisualToolbar: isValid && isVisual,
+			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
+			showParentSelector:
+				! _isZoomOut &&
+				parentBlockType &&
+				editingMode !== 'contentOnly' &&
+				getBlockEditingMode( parentClientId ) !== 'disabled' &&
+				hasBlockSupport(
+					parentBlockType,
+					'__experimentalParentSelector',
+					true
+				) &&
+				selectedBlockClientIds.length === 1,
+			isUsingBindings: _isUsingBindings,
+			hasParentPattern: _hasParentPattern,
+			hasContentOnlyLocking: _hasTemplateLock,
+			showShuffleButton: _isZoomOut,
+			showSlots: ! _isZoomOut,
+			showGroupButtons: ! _isZoomOut,
+			showLockButtons: ! _isZoomOut,
+			showSwitchSectionStyleButton: _isZoomOut,
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+			isNavigationMode: _isNavigationMode(),
 		};
 	}, [] );
 
+	const toolbarWrapperRef = useRef( null );
+
 	// Handles highlighting the current block outline on hover or focus of the
 	// block type toolbar area.
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const nodeRef = useRef();
-	const { showMovers, gestures: showMoversGestures } = useShowMoversGestures(
-		{
-			ref: nodeRef,
-			onChange( isFocused ) {
-				if ( isFocused && isDistractionFree ) {
-					return;
-				}
-				toggleBlockHighlight( blockClientId, isFocused );
-			},
-		}
-	);
-
-	// Account for the cases where the block toolbar is rendered within the
-	// header area and not contextually to the block.
-	const displayHeaderToolbar =
-		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
-
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
-	}
+	const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
+		ref: nodeRef,
+	} );
 
-	const shouldShowMovers = displayHeaderToolbar || showMovers;
+	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
-	if ( blockClientIds.length === 0 ) {
+	const hasBlockToolbar = useHasBlockToolbar();
+	if ( ! hasBlockToolbar ) {
 		return null;
 	}
 
-	const shouldShowVisualToolbar = isValid && isVisual;
 	const isMultiToolbar = blockClientIds.length > 1;
 	const isSynced =
 		isReusableBlock( blockType ) || isTemplatePart( blockType );
 
-	const classes = classnames( 'block-editor-block-toolbar', {
-		'is-showing-movers': shouldShowMovers,
+	// Shifts the toolbar to make room for the parent block selector.
+	const classes = clsx( 'block-editor-block-contextual-toolbar', {
+		'has-parent': showParentSelector,
+		'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar,
+	} );
+
+	const innerClasses = clsx( 'block-editor-block-toolbar', {
 		'is-synced': isSynced,
+		'is-connected': isUsingBindings,
 	} );
 
 	return (
-		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
-			<div ref={ nodeRef } { ...showMoversGestures }>
+		<NavigableToolbar
+			focusEditorOnEscape
+			className={ classes }
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block tools' ) }
+			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+			variant={ variant === 'toolbar' ? undefined : variant }
+			focusOnMount={ focusOnMount }
+			__experimentalInitialIndex={ __experimentalInitialIndex }
+			__experimentalOnIndexChange={ __experimentalOnIndexChange }
+			// Resets the index whenever the active block changes so
+			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+			key={ toolbarKey }
+		>
+			<div ref={ toolbarWrapperRef } className={ innerClasses }>
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					! isContentLocked && (
-						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-							<BlockSwitcher clientIds={ blockClientIds } />
-							{ ! isMultiToolbar && (
-								<BlockLockToolbar
-									clientId={ blockClientIds[ 0 ] }
+					! hasParentPattern && (
+						<div
+							ref={ nodeRef }
+							{ ...showHoveredOrFocusedGestures }
+						>
+							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar &&
+									isDefaultEditingMode &&
+									showLockButtons && (
+										<BlockLockToolbar
+											clientId={ blockClientId }
+										/>
+									) }
+								<BlockMover
+									clientIds={ blockClientIds }
+									hideDragHandle={ hideDragHandle }
 								/>
-							) }
-							<BlockMover
-								clientIds={ blockClientIds }
-								hideDragHandle={ hideDragHandle }
-							/>
-						</ToolbarGroup>
+							</ToolbarGroup>
+						</div>
 					) }
-			</div>
-			{ shouldShowVisualToolbar && isMultiToolbar && (
-				<BlockGroupToolbar />
-			) }
-			{ shouldShowVisualToolbar && (
-				<>
-					<BlockControls.Slot
-						group="parent"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot
-						group="block"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot className="block-editor-block-toolbar__slot" />
-					<BlockControls.Slot
-						group="inline"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<BlockControls.Slot
-						group="other"
-						className="block-editor-block-toolbar__slot"
-					/>
-					<__unstableBlockNameContext.Provider
-						value={ blockType?.name }
-					>
-						<__unstableBlockToolbarLastItem.Slot />
-					</__unstableBlockNameContext.Provider>
-				</>
-			) }
-			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			{ ! isContentLocked && (
+				{ ! hasContentOnlyLocking &&
+					shouldShowVisualToolbar &&
+					isMultiToolbar &&
+					showGroupButtons && <BlockGroupToolbar /> }
+				{ showShuffleButton && (
+					<ChangeDesign clientId={ blockClientIds[ 0 ] } />
+				) }
+				{ showSwitchSectionStyleButton && (
+					<SwitchSectionStyle clientId={ blockClientIds[ 0 ] } />
+				) }
+				{ shouldShowVisualToolbar && showSlots && (
+					<>
+						<BlockControls.Slot
+							group="parent"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot
+							group="block"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot className="block-editor-block-toolbar__slot" />
+						<BlockControls.Slot
+							group="inline"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<BlockControls.Slot
+							group="other"
+							className="block-editor-block-toolbar__slot"
+						/>
+						<__unstableBlockNameContext.Provider
+							value={ blockType?.name }
+						>
+							<__unstableBlockToolbarLastItem.Slot />
+						</__unstableBlockNameContext.Provider>
+					</>
+				) }
+				<BlockEditVisuallyButton clientIds={ blockClientIds } />
 				<BlockSettingsMenu clientIds={ blockClientIds } />
-			) }
-		</div>
+			</div>
+		</NavigableToolbar>
 	);
-};
+}
 
 /**
+ * Renders the block toolbar.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
+ *
+ * @param {Object}  props                Components props.
+ * @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
+ * @param {string}  props.variant        Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
  */
-export default BlockToolbar;
+export default function BlockToolbar( { hideDragHandle, variant } ) {
+	return (
+		<PrivateBlockToolbar
+			hideDragHandle={ hideDragHandle }
+			variant={ variant }
+			focusOnMount={ undefined }
+			__experimentalInitialIndex={ undefined }
+			__experimentalOnIndexChange={ undefined }
+		/>
+	);
+}
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..ad7d6a16b3b47a 100644
--- a/packages/block-editor/src/components/block-toolbar/index.native.js
+++ b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -1,47 +1,124 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import BlockActionsMenu from './block-toolbar-menu';
 import BlockControls from '../block-controls';
+import BlockMover from '../block-mover';
 import UngroupButton from '../ungroup-button';
+import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockToolbar() {
-	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
-		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
-			select( blockEditorStore );
+const REMOVE_EMPY_PARENT_BLOCKS = [
+	'core/buttons',
+	'core/columns',
+	'core/social-links',
+];
+
+export default function BlockToolbar( { anchorNodeRef } ) {
+	const {
+		rootClientId,
+		blockClientId,
+		isSelected,
+		isValidAndVisual,
+		isStackedHorizontally,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockListSettings,
+			getBlockMode,
+			getBlockName,
+			getBlockCount,
+			getBlockRootClientId,
+			getSelectedBlockClientIds,
+			isBlockValid,
+		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+		const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
+		const blockListSettings = getBlockListSettings( blockRootClientId );
+		const orientation = blockListSettings?.orientation;
+		const isBlockStackedHorizontally = orientation === 'horizontal';
+		const parentName = getBlockName( blockRootClientId );
+		const numberOfInnerBlocks = getBlockCount( blockRootClientId );
 
 		return {
-			blockClientIds: selectedBlockClientIds,
-			isValid:
-				selectedBlockClientIds.length === 1
-					? isBlockValid( selectedBlockClientIds[ 0 ] )
-					: null,
-			mode:
+			rootClientId: blockRootClientId,
+			blockClientId: selectedBlockClientId,
+			isSelected: selectedBlockClientIds.length > 0,
+			isStackedHorizontally: isBlockStackedHorizontally,
+			parentBlockName: parentName,
+			parentNumberOfInnerBlocks: numberOfInnerBlocks,
+			isValidAndVisual:
 				selectedBlockClientIds.length === 1
-					? getBlockMode( selectedBlockClientIds[ 0 ] )
-					: null,
+					? isBlockValid( selectedBlockClientIds[ 0 ] ) &&
+					  getBlockMode( selectedBlockClientIds[ 0 ] ) === 'visual'
+					: false,
 		};
 	}, [] );
 
-	if ( blockClientIds.length === 0 ) {
+	const { removeBlock } = useDispatch( blockEditorStore );
+	const onRemove = useCallback( () => {
+		// Temp: remove parent block for specific cases where they don't
+		// have inner blocks, ideally we should match the behavior as in
+		// the Web editor and show a placeholder instead of removing the parent.
+		if (
+			REMOVE_EMPY_PARENT_BLOCKS.includes( parentBlockName ) &&
+			parentNumberOfInnerBlocks === 1
+		) {
+			removeBlock( rootClientId );
+			return;
+		}
+
+		removeBlock( blockClientId );
+	}, [
+		blockClientId,
+		parentBlockName,
+		parentNumberOfInnerBlocks,
+		removeBlock,
+		rootClientId,
+	] );
+
+	if ( ! isSelected ) {
 		return null;
 	}
 
 	return (
 		<>
-			{ mode === 'visual' && isValid && (
+			{ isValidAndVisual && (
 				<>
-					<UngroupButton />
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />
 					<BlockControls.Slot group="inline" />
 					<BlockControls.Slot group="other" />
+					<UngroupButton />
+
+					<BlockMover
+						clientIds={ [ blockClientId ] }
+						isStackedHorizontally={ isStackedHorizontally }
+					/>
+
+					<BlockActionsMenu
+						clientId={ blockClientId }
+						isStackedHorizontally={ isStackedHorizontally }
+						onDelete={ onRemove }
+						anchorNodeRef={ anchorNodeRef }
+					/>
 				</>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 41faa1a46eaed2..26bf71356925e9 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -24,8 +24,6 @@
 	.components-toolbar-group,
 	.components-toolbar {
 		background: none;
-		// IE11 has thick paddings without this.
-		line-height: 0;
 
 		// These margins make the buttons themselves overlap the chrome of the toolbar.
 		// This helps make them square, and maximize the hit area.
@@ -39,46 +37,108 @@
 		border-right: $border-width solid $gray-300;
 	}
 
-	&.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
+	&.is-connected {
+		.block-editor-block-switcher .components-button::before {
+			background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+			border-radius: $radius-small;
+		}
 	}
 
-	&.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
-		&:disabled .block-editor-block-icon.has-colors {
+	&.is-synced,
+	&.is-connected {
+		.block-editor-block-switcher .components-button .block-editor-block-icon {
 			color: var(--wp-block-synced-color);
 		}
+
+		.components-toolbar-button.block-editor-block-switcher__no-switcher-icon {
+			&:disabled .block-editor-block-icon.has-colors {
+				color: var(--wp-block-synced-color);
+			}
+		}
 	}
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+.block-editor-block-contextual-toolbar {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+	// Block UI appearance.
+	background-color: $white;
+	flex-shrink: 3;
+
+	// Raise the specificity.
+	&.components-accessible-toolbar {
+		border: none;
+		border-radius: 0;
+	}
 
-	.show-icon-labels & {
-		margin-left: 0;
+	&.is-unstyled {
+		box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+	}
+
+	.block-editor-block-toolbar {
+		overflow: auto;
+		overflow-y: hidden;
+		@include custom-scrollbars-on-hover($gray-200, $gray-600);
+
+		// Prevents padding from being applied to the left and right sides of the element.
+		scrollbar-gutter: auto;
+
+		> :last-child,
+		> :last-child .components-toolbar-group,
+		> :last-child .components-toolbar {
+			&::after {
+				display: none;
+			}
+		}
 	}
-}
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+	& > .block-editor-block-toolbar {
+		flex-grow: initial;
+		width: initial;
+	}
 
-	.show-icon-labels & {
+	.block-editor-block-parent-selector {
 		position: relative;
-		left: auto;
-		top: auto;
+		// Must use the same negative margins of the .components-toolbar-group
+		// https://github.com/WordPress/gutenberg/blob/73a4716f429b5dce0190638049f5bd30f0b242f6/packages/block-editor/src/components/block-toolbar/style.scss#L32-L33
 		margin-top: -$border-width;
-		margin-left: -$border-width;
 		margin-bottom: -$border-width;
+
+		// Parent selector dot divider
+		&::after {
+			align-items: center;
+			background-color: $gray-900;
+			border-radius: 100%;
+			content: "";
+			display: inline-flex;
+			height: 2px;
+			position: absolute;
+			right: 0;
+			top: $grid-unit-20 - $border-width;
+			width: 2px;
+		}
 	}
 }
 
+
 // Block controls.
 .block-editor-block-toolbar__block-controls {
 	// Switcher.
@@ -90,11 +150,7 @@
 		}
 	}
 
-	.block-editor-block-lock-toolbar {
-		margin-left: -$grid-unit-15 * 0.5 !important;
-	}
-
-	// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+	// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
 	// This is best fixed by making the mover control area a proper single toolbar group.
 	.components-toolbar-group {
 		padding: 0;
@@ -112,15 +168,7 @@
 }
 
 .block-editor-block-toolbar__slot {
-	// Required for IE11.
-	display: inline-block;
-	// Fix for toolbar button misalignment on IE11
-	line-height: 0;
-
-	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-	@supports (position: sticky) {
-		display: inline-flex;
-	}
+	display: inline-flex;
 }
 
 .show-icon-labels {
@@ -141,7 +189,6 @@
 	}
 
 	// Padding overrides.
-
 	.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
 		padding-left: 6px;
 		padding-right: 6px;
@@ -152,75 +199,74 @@
 		.block-editor-block-icon {
 			width: 0 !important;
 			height: 0 !important;
+			min-width: 0 !important;
 		}
 	}
 
 	// Parent selector overrides
+	.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+		text-wrap: nowrap;
 
-	.block-editor-block-parent-selector__button {
 		.block-editor-block-icon {
 			width: 0;
 		}
 	}
 
-	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
-		width: auto;
-	}
+	.block-editor-block-mover {
+		.block-editor-block-mover__move-button-container {
+			width: auto;
+			position: relative;
+		}
 
-	// Mover overrides.
-	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left: 1px solid $gray-900;
-		margin-left: 6px;
-		margin-right: -6px;
-		white-space: nowrap;
-	}
+		&:not(.is-horizontal) .block-editor-block-mover__move-button-container::before {
+			@include break-small() {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-200;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
 
-	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		border-left-color: $gray-200;
+			@include break-medium {
+				background: $gray-900;
+			}
+		}
 	}
 
-	.block-editor-block-mover-button {
-		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
-		padding-left: $grid-unit !important;
-		padding-right: $grid-unit !important;
+	.block-editor-block-mover.is-horizontal {
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-mover-button {
+			padding-left: 6px;
+			padding-right: 6px;
+		}
 	}
 
-	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 12px !important;
-		padding-right: 12px !important;
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
-		border-width: 0;
+	// Mover overrides.
+	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		border-left: 1px solid $gray-300;
+		margin-left: 6px;
+		margin-right: -6px;
+		white-space: nowrap;
 	}
 
-	@include break-small() {
-		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
-		.is-up-button.is-up-button.is-up-button {
-			margin-right: 0;
-			border-radius: 0;
-			order: 1;
-		}
-
-		.block-editor-block-mover__move-button-container {
-			border-left: 1px solid $gray-900;
-
-			&::before {
-				content: "";
-				display: block;
-				height: 1px;
-				background: $gray-900;
-				order: 2;
-			}
-		}
-
-		.is-down-button.is-down-button.is-down-button {
-			order: 3;
-		}
-
-		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
-			background: $gray-300;
-		}
+	.block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 
 	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
@@ -239,3 +285,19 @@
 		}
 	}
 }
+
+.block-editor-block-toolbar-change-design-content-wrapper {
+	padding: $grid-unit-15;
+	width: 320px;
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: $grid-unit-15;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-inserter__media-list__list-item {
+			min-height: 100px;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/block-toolbar/switch-section-style.js b/packages/block-editor/src/components/block-toolbar/switch-section-style.js
new file mode 100644
index 00000000000000..be4f041c0e8a48
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/switch-section-style.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Icon,
+	Path,
+	SVG,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useStylesForBlocks from '../block-styles/use-styles-for-block';
+import { replaceActiveStyle } from '../block-styles/utils';
+import { store as blockEditorStore } from '../../store';
+import { GlobalStylesContext } from '../global-styles';
+import { globalStylesDataKey } from '../../store/private-keys';
+import { getVariationStylesWithRefValues } from '../../hooks/block-style-variation';
+
+const styleIcon = (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z" />
+		<Path
+			stroke="currentColor"
+			strokeWidth="1.5"
+			d="M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3z"
+		/>
+	</SVG>
+);
+
+function SwitchSectionStyle( { clientId } ) {
+	const { stylesToRender, activeStyle, className } = useStylesForBlocks( {
+		clientId,
+	} );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Get global styles data
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles, blockName } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				globalSettings: settings.__experimentalFeatures,
+				globalStyles: settings[ globalStylesDataKey ],
+				blockName: select( blockEditorStore ).getBlockName( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Get the background color for the active style
+	const activeStyleBackground = activeStyle?.name
+		? getVariationStylesWithRefValues(
+				{
+					settings: mergedConfig?.settings ?? globalSettings,
+					styles: mergedConfig?.styles ?? globalStyles,
+				},
+				blockName,
+				activeStyle.name
+		  )?.color?.background
+		: undefined;
+
+	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+		return null;
+	}
+
+	const handleStyleSwitch = () => {
+		const currentIndex = stylesToRender.findIndex(
+			( style ) => style.name === activeStyle.name
+		);
+
+		const nextIndex = ( currentIndex + 1 ) % stylesToRender.length;
+		const nextStyle = stylesToRender[ nextIndex ];
+
+		const styleClassName = replaceActiveStyle(
+			className,
+			activeStyle,
+			nextStyle
+		);
+
+		updateBlockAttributes( clientId, {
+			className: styleClassName,
+		} );
+	};
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ handleStyleSwitch }
+				label={ __( 'Shuffle styles' ) }
+			>
+				<Icon
+					icon={ styleIcon }
+					style={ {
+						fill: activeStyleBackground || 'transparent',
+					} }
+				/>
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}
+
+export default SwitchSectionStyle;
diff --git a/packages/block-editor/src/components/block-toolbar/test/__snapshots__/block-toolbar-menu.native.js.snap b/packages/block-editor/src/components/block-toolbar/test/__snapshots__/block-toolbar-menu.native.js.snap
new file mode 100644
index 00000000000000..6e6c832d5bd52b
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/test/__snapshots__/block-toolbar-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-toolbar/test/block-toolbar-menu.native.js b/packages/block-editor/src/components/block-toolbar/test/block-toolbar-menu.native.js
new file mode 100644
index 00000000000000..6e26b906d68c9a
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/test/block-toolbar-menu.native.js
@@ -0,0 +1,405 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	within,
+	getEditorHtml,
+	typeInRichText,
+	openBlockActionsMenu,
+} 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 { getByRole } = screen;
+
+		// Get block
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open block actions menu
+		await openBlockActionsMenu( screen );
+
+		// 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();
+			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…'
+				);
+			typeInRichText( 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
+			fireEvent.press( getByLabelText( /Move block down/ ) );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Tap on the Move Up button
+			fireEvent.press( getByLabelText( /Move block up/ ) );
+
+			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…'
+				);
+			typeInRichText( 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( {
+				screenWidth: 100,
+			} );
+			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…'
+				);
+			typeInRichText( 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();
+		} );
+	} );
+
+	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…'
+				);
+			typeInRichText( 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
+			await openBlockActionsMenu( screen );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			await openBlockActionsMenu( screen );
+
+			// 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…'
+				);
+			typeInRichText( 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
+			await openBlockActionsMenu( screen );
+
+			// Tap on the Copy button
+			fireEvent.press( getByLabelText( /Copy/ ) );
+
+			// Get Paragraph block
+			paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Open block actions menu
+			await openBlockActionsMenu( screen );
+
+			// 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…'
+				);
+			typeInRichText( 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
+			await openBlockActionsMenu( screen );
+
+			// 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
+			await openBlockActionsMenu( screen );
+
+			// 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…'
+				);
+			typeInRichText( 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
+			await openBlockActionsMenu( screen );
+
+			// 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…'
+				);
+			typeInRichText( 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
+			await openBlockActionsMenu( screen );
+
+			// 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-toolbar/test/index.native.js b/packages/block-editor/src/components/block-toolbar/test/index.native.js
new file mode 100644
index 00000000000000..cac41845b06993
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/test/index.native.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block Toolbar', () => {
+	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Shortcode' );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();
+	} );
+
+	it( 'renders the block settings button for the current selected block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeVisible();
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
new file mode 100644
index 00000000000000..80ce3691147834
--- /dev/null
+++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns true if the block toolbar should be shown.
+ *
+ * @return {boolean} Whether the block toolbar component will be rendered.
+ */
+export function useHasBlockToolbar() {
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
+
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
+
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
+
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
+
+	if ( ! isToolbarEnabled || isBlockDisabled ) {
+		return false;
+	}
+
+	return true;
+}
diff --git a/packages/block-editor/src/components/block-toolbar/utils.js b/packages/block-editor/src/components/block-toolbar/utils.js
index ee2a35789c7156..3df7d106e37174 100644
--- a/packages/block-editor/src/components/block-toolbar/utils.js
+++ b/packages/block-editor/src/components/block-toolbar/utils.js
@@ -1,43 +1,57 @@
 /**
  * WordPress dependencies
  */
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
 const { clearTimeout, setTimeout } = window;
-const noop = () => {};
 const DEBOUNCE_TIMEOUT = 200;
 
 /**
- * Hook that creates a showMover state, as well as debounced show/hide callbacks.
+ * Hook that creates debounced callbacks when the node is hovered or focused.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {boolean}  props.isFocused             Whether the component has current focus.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object}  props                       Component props.
+ * @param {Object}  props.ref                   Element reference.
+ * @param {boolean} props.isFocused             Whether the component has current focus.
+ * @param {number}  props.highlightParent       Whether to highlight the parent block. It defaults in highlighting the selected block.
+ * @param {number}  [props.debounceTimeout=250] Debounce timeout in milliseconds.
  */
-export function useDebouncedShowMovers( {
+function useDebouncedShowGestures( {
 	ref,
 	isFocused,
+	highlightParent,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
-	const [ showMovers, setShowMovers ] = useState( false );
+	const { getSelectedBlockClientId, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 	const timeoutRef = useRef();
-
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
 	const handleOnChange = ( nextIsFocused ) => {
-		if ( ref?.current ) {
-			setShowMovers( nextIsFocused );
+		if ( nextIsFocused && isDistractionFree ) {
+			return;
 		}
-
-		onChange( nextIsFocused );
+		const selectedBlockClientId = getSelectedBlockClientId();
+		const clientId = highlightParent
+			? getBlockRootClientId( selectedBlockClientId )
+			: selectedBlockClientId;
+		toggleBlockHighlight( clientId, nextIsFocused );
 	};
 
 	const getIsHovered = () => {
 		return ref?.current && ref.current.matches( ':hover' );
 	};
 
-	const shouldHideMovers = () => {
+	const shouldHideGestures = () => {
 		const isHovered = getIsHovered();
 		return ! isFocused && ! isHovered;
 	};
@@ -50,19 +64,16 @@ export function useDebouncedShowMovers( {
 		}
 	};
 
-	const debouncedShowMovers = ( event ) => {
+	const debouncedShowGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
 
 		clearTimeoutRef();
-
-		if ( ! showMovers ) {
-			handleOnChange( true );
-		}
+		handleOnChange( true );
 	};
 
-	const debouncedHideMovers = ( event ) => {
+	const debouncedHideGestures = ( event ) => {
 		if ( event ) {
 			event.stopPropagation();
 		}
@@ -70,7 +81,7 @@ export function useDebouncedShowMovers( {
 		clearTimeoutRef();
 
 		timeoutRef.current = setTimeout( () => {
-			if ( shouldHideMovers() ) {
+			if ( shouldHideGestures() ) {
 				handleOnChange( false );
 			}
 		}, debounceTimeout );
@@ -90,29 +101,33 @@ export function useDebouncedShowMovers( {
 	);
 
 	return {
-		showMovers,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	};
 }
 
 /**
- * Hook that provides a showMovers state and gesture events for DOM elements
- * that interact with the showMovers state.
+ * Hook that provides gesture events for DOM elements
+ * that interact with the isFocused state.
  *
- * @param {Object}   props                       Component props.
- * @param {Object}   props.ref                   Element reference.
- * @param {number}   [props.debounceTimeout=250] Debounce timeout in milliseconds.
- * @param {Function} [props.onChange=noop]       Callback function.
+ * @param {Object} props                         Component props.
+ * @param {Object} props.ref                     Element reference.
+ * @param {number} [props.highlightParent=false] Whether to highlight the parent block. It defaults to highlighting the selected block.
+ * @param {number} [props.debounceTimeout=250]   Debounce timeout in milliseconds.
  */
-export function useShowMoversGestures( {
+export function useShowHoveredOrFocusedGestures( {
 	ref,
+	highlightParent = false,
 	debounceTimeout = DEBOUNCE_TIMEOUT,
-	onChange = noop,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const { showMovers, debouncedShowMovers, debouncedHideMovers } =
-		useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+	const { debouncedShowGestures, debouncedHideGestures } =
+		useDebouncedShowGestures( {
+			ref,
+			debounceTimeout,
+			isFocused,
+			highlightParent,
+		} );
 
 	const registerRef = useRef( false );
 
@@ -129,14 +144,14 @@ export function useShowMoversGestures( {
 		const handleOnFocus = () => {
 			if ( isFocusedWithin() ) {
 				setIsFocused( true );
-				debouncedShowMovers();
+				debouncedShowGestures();
 			}
 		};
 
 		const handleOnBlur = () => {
 			if ( ! isFocusedWithin() ) {
 				setIsFocused( false );
-				debouncedHideMovers();
+				debouncedHideGestures();
 			}
 		};
 
@@ -160,15 +175,12 @@ export function useShowMoversGestures( {
 		ref,
 		registerRef,
 		setIsFocused,
-		debouncedShowMovers,
-		debouncedHideMovers,
+		debouncedShowGestures,
+		debouncedHideGestures,
 	] );
 
 	return {
-		showMovers,
-		gestures: {
-			onMouseMove: debouncedShowMovers,
-			onMouseLeave: debouncedHideMovers,
-		},
+		onMouseMove: debouncedShowGestures,
+		onMouseLeave: debouncedHideGestures,
 	};
 }
diff --git a/packages/block-editor/src/components/block-tools/back-compat.js b/packages/block-editor/src/components/block-tools/back-compat.js
deleted file mode 100644
index 3597bc07b07f79..00000000000000
--- a/packages/block-editor/src/components/block-tools/back-compat.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import { Disabled } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './selected-block-popover';
-
-export default function BlockToolsBackCompat( { children } ) {
-	const openRef = useContext( InsertionPointOpenRef );
-	const isDisabled = useContext( Disabled.Context );
-
-	// If context is set, `BlockTools` is a parent component.
-	if ( openRef || isDisabled ) {
-		return children;
-	}
-
-	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
-		alternative: 'wp.blockEditor.BlockTools',
-		since: '5.8',
-		version: '6.3',
-	} );
-
-	return (
-		<InsertionPoint __unstablePopoverSlot="block-toolbar">
-			<BlockPopover __unstablePopoverSlot="block-toolbar" />
-			{ children }
-		</InsertionPoint>
-	);
-}
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
deleted file mode 100644
index ba31043ada2dd8..00000000000000
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import NavigableToolbar from '../navigable-toolbar';
-import BlockToolbar from '../block-toolbar';
-import { store as blockEditorStore } from '../../store';
-
-function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	const { blockType, hasParents, showParentSelector } = useSelect(
-		( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-				__unstableGetContentLockingParent,
-			} = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( selectedBlockClientId );
-			const firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( firstParentClientId );
-			const parentBlockType = getBlockType( parentBlockName );
-
-			return {
-				blockType:
-					selectedBlockClientId &&
-					getBlockType( getBlockName( selectedBlockClientId ) ),
-				hasParents: parents.length,
-				showParentSelector:
-					parentBlockType &&
-					hasBlockSupport(
-						parentBlockType,
-						'__experimentalParentSelector',
-						true
-					) &&
-					selectedBlockClientIds.length <= 1 &&
-					! __unstableGetContentLockingParent(
-						selectedBlockClientId
-					),
-			};
-		},
-		[]
-	);
-
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
-	}
-
-	// Shifts the toolbar to make room for the parent block selector.
-	const classes = classnames( 'block-editor-block-contextual-toolbar', {
-		'has-parent': hasParents && showParentSelector,
-		'is-fixed': isFixed,
-	} );
-
-	return (
-		<NavigableToolbar
-			focusOnMount={ focusOnMount }
-			className={ classes }
-			/* translators: accessibility text for the block toolbar */
-			aria-label={ __( 'Block tools' ) }
-			{ ...props }
-		>
-			<BlockToolbar hideDragHandle={ isFixed } />
-		</NavigableToolbar>
-	);
-}
-
-export default BlockContextualToolbar;
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
deleted file mode 100644
index 195ab92985b84e..00000000000000
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ /dev/null
@@ -1,293 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import {
-	BACKSPACE,
-	DELETE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	TAB,
-	ESCAPE,
-	ENTER,
-	SPACE,
-} from '@wordpress/keycodes';
-import {
-	getBlockType,
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-} from '@wordpress/blocks';
-import { speak } from '@wordpress/a11y';
-import { focus } from '@wordpress/dom';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockTitle from '../block-title';
-import BlockIcon from '../block-icon';
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import useBlockDisplayInformation from '../use-block-display-information';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
-import BlockMover from '../block-mover';
-
-/**
- * Block selection button component, displaying the label of the block. If the block
- * descends from a root block, a button is displayed enabling the user to select
- * the root block.
- *
- * @param {string} props          Component props.
- * @param {string} props.clientId Client ID of block.
- *
- * @return {WPComponent} The component to be rendered.
- */
-function BlockSelectionButton( { clientId, rootClientId } ) {
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getBlockIndex,
-				hasBlockMovingClientId,
-				getBlockListSettings,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
-			const index = getBlockIndex( clientId );
-			const { name, attributes } = getBlock( clientId );
-			const blockMovingMode = hasBlockMovingClientId();
-			return {
-				index,
-				name,
-				attributes,
-				blockMovingMode,
-				orientation: getBlockListSettings( rootClientId )?.orientation,
-				editorMode: __unstableGetEditorMode(),
-			};
-		},
-		[ clientId, rootClientId ]
-	);
-	const {
-		index,
-		name,
-		attributes,
-		blockMovingMode,
-		orientation,
-		editorMode,
-	} = selected;
-	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-	const ref = useRef();
-
-	const blockType = getBlockType( name );
-	const label = getAccessibleBlockLabel(
-		blockType,
-		attributes,
-		index + 1,
-		orientation
-	);
-
-	// Focus the breadcrumb in navigation mode.
-	useEffect( () => {
-		ref.current.focus();
-
-		speak( label );
-	}, [ label ] );
-	const blockElement = useBlockElement( clientId );
-
-	const {
-		hasBlockMovingClientId,
-		getBlockIndex,
-		getBlockRootClientId,
-		getClientIdsOfDescendants,
-		getSelectedBlockClientId,
-		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-	} = useSelect( blockEditorStore );
-	const {
-		selectBlock,
-		clearSelectedBlock,
-		setBlockMovingClientId,
-		moveBlockToPosition,
-	} = useDispatch( blockEditorStore );
-
-	function onKeyDown( event ) {
-		const { keyCode } = event;
-		const isUp = keyCode === UP;
-		const isDown = keyCode === DOWN;
-		const isLeft = keyCode === LEFT;
-		const isRight = keyCode === RIGHT;
-		const isTab = keyCode === TAB;
-		const isEscape = keyCode === ESCAPE;
-		const isEnter = keyCode === ENTER;
-		const isSpace = keyCode === SPACE;
-		const isShift = event.shiftKey;
-
-		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
-			removeBlock( clientId );
-			event.preventDefault();
-			return;
-		}
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const selectionEndClientId = getMultiSelectedBlocksEndClientId();
-		const selectionBeforeEndClientId = getPreviousBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-		const selectionAfterEndClientId = getNextBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-
-		const navigateUp = ( isTab && isShift ) || isUp;
-		const navigateDown = ( isTab && ! isShift ) || isDown;
-		// Move out of current nesting level (no effect if at root level).
-		const navigateOut = isLeft;
-		// Move into next nesting level (no effect if the current block has no innerBlocks).
-		const navigateIn = isRight;
-
-		let focusedBlockUid;
-		if ( navigateUp ) {
-			focusedBlockUid = selectionBeforeEndClientId;
-		} else if ( navigateDown ) {
-			focusedBlockUid = selectionAfterEndClientId;
-		} else if ( navigateOut ) {
-			focusedBlockUid =
-				getBlockRootClientId( selectedBlockClientId ) ??
-				selectedBlockClientId;
-		} else if ( navigateIn ) {
-			focusedBlockUid =
-				getClientIdsOfDescendants( [ selectedBlockClientId ] )[ 0 ] ??
-				selectedBlockClientId;
-		}
-		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
-			setBlockMovingClientId( null );
-			event.preventDefault();
-		}
-		if ( ( isEnter || isSpace ) && startingBlockClientId ) {
-			const sourceRoot = getBlockRootClientId( startingBlockClientId );
-			const destRoot = getBlockRootClientId( selectedBlockClientId );
-			const sourceBlockIndex = getBlockIndex( startingBlockClientId );
-			let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
-			if (
-				sourceBlockIndex < destinationBlockIndex &&
-				sourceRoot === destRoot
-			) {
-				destinationBlockIndex -= 1;
-			}
-			moveBlockToPosition(
-				startingBlockClientId,
-				sourceRoot,
-				destRoot,
-				destinationBlockIndex
-			);
-			selectBlock( startingBlockClientId );
-			setBlockMovingClientId( null );
-		}
-		if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
-			if ( focusedBlockUid ) {
-				event.preventDefault();
-				selectBlock( focusedBlockUid );
-			} else if ( isTab && selectedBlockClientId ) {
-				let nextTabbable;
-
-				if ( navigateDown ) {
-					nextTabbable = blockElement;
-					do {
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					} while (
-						nextTabbable &&
-						blockElement.contains( nextTabbable )
-					);
-
-					if ( ! nextTabbable ) {
-						nextTabbable =
-							blockElement.ownerDocument.defaultView.frameElement;
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					}
-				} else {
-					nextTabbable = focus.tabbable.findPrevious( blockElement );
-				}
-
-				if ( nextTabbable ) {
-					event.preventDefault();
-					nextTabbable.focus();
-					clearSelectedBlock();
-				}
-			}
-		}
-	}
-
-	const classNames = classnames(
-		'block-editor-block-list__block-selection-button',
-		{
-			'is-block-moving-mode': !! blockMovingMode,
-		}
-	);
-
-	const dragHandleLabel = __( 'Drag' );
-
-	return (
-		<div className={ classNames }>
-			<Flex
-				justify="center"
-				className="block-editor-block-list__block-selection-button__content"
-			>
-				<FlexItem>
-					<BlockIcon icon={ blockInformation?.icon } showColors />
-				</FlexItem>
-				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
-					) }
-					{ editorMode === 'navigation' && (
-						<BlockDraggable clientIds={ [ clientId ] }>
-							{ ( draggableProps ) => (
-								<Button
-									icon={ dragHandle }
-									className="block-selection-button_drag-handle"
-									aria-hidden="true"
-									label={ dragHandleLabel }
-									// Should not be able to tab to drag handle as this
-									// button can only be used with a pointer device.
-									tabIndex="-1"
-									{ ...draggableProps }
-								/>
-							) }
-						</BlockDraggable>
-					) }
-				</FlexItem>
-				<FlexItem>
-					<Button
-						ref={ ref }
-						onClick={
-							editorMode === 'navigation'
-								? () => setNavigationMode( false )
-								: undefined
-						}
-						onKeyDown={ onKeyDown }
-						label={ label }
-						showTooltip={ false }
-						className="block-selection-button_select-button"
-					>
-						<BlockTitle
-							clientId={ clientId }
-							maximumLength={ 35 }
-						/>
-					</Button>
-				</FlexItem>
-			</Flex>
-		</div>
-	);
-}
-
-export default BlockSelectionButton;
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-popover.js b/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
new file mode 100644
index 00000000000000..c6378130b7da42
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import { store as blockEditorStore } from '../../store';
+import { PrivateBlockToolbar } from '../block-toolbar';
+
+export default function BlockToolbarPopover( {
+	clientId,
+	isTyping,
+	__unstableContentRef,
+} ) {
+	const { capturingClientId, isInsertionPointVisible, lastClientId } =
+		useSelectedBlockToolProps( clientId );
+
+	// Stores the active toolbar item index so the block toolbar can return focus
+	// to it when re-mounting.
+	const initialToolbarItemIndexRef = useRef();
+
+	useEffect( () => {
+		// Resets the index whenever the active block changes so this is not
+		// persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
+		initialToolbarItemIndexRef.current = undefined;
+	}, [ clientId ] );
+
+	const { stopTyping } = useDispatch( blockEditorStore );
+	const isToolbarForcedRef = useRef( false );
+
+	useShortcut( 'core/block-editor/focus-toolbar', () => {
+		isToolbarForcedRef.current = true;
+		stopTyping( true );
+	} );
+
+	useEffect( () => {
+		isToolbarForcedRef.current = false;
+	} );
+
+	// If the block has a parent with __experimentalCaptureToolbars enabled,
+	// the toolbar should be positioned over the topmost capturing parent.
+	const clientIdToPositionOver = capturingClientId || clientId;
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId: clientIdToPositionOver,
+	} );
+
+	return (
+		! isTyping && (
+			<BlockPopover
+				clientId={ clientIdToPositionOver }
+				bottomClientId={ lastClientId }
+				className={ clsx( 'block-editor-block-list__block-popover', {
+					'is-insertion-point-visible': isInsertionPointVisible,
+				} ) }
+				resize={ false }
+				{ ...popoverProps }
+			>
+				<PrivateBlockToolbar
+					// If the toolbar is being shown because of being forced
+					// it should focus the toolbar right after the mount.
+					focusOnMount={ isToolbarForcedRef.current }
+					__experimentalInitialIndex={
+						initialToolbarItemIndexRef.current
+					}
+					__experimentalOnIndexChange={ ( index ) => {
+						initialToolbarItemIndexRef.current = index;
+					} }
+					variant="toolbar"
+				/>
+			</BlockPopover>
+		)
+	);
+}
diff --git a/packages/block-editor/src/components/block-tools/empty-block-inserter.js b/packages/block-editor/src/components/block-tools/empty-block-inserter.js
new file mode 100644
index 00000000000000..7faeda933f4c48
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/empty-block-inserter.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverCover from '../block-popover/cover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function EmptyBlockInserter( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopoverCover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
+			className={ clsx(
+				'block-editor-block-list__block-side-inserter-popover',
+				{
+					'is-insertion-point-visible': isInsertionPointVisible,
+				}
+			) }
+			__unstableContentRef={ __unstableContentRef }
+			{ ...popoverProps }
+		>
+			<div className="block-editor-block-list__empty-block-inserter">
+				<Inserter
+					position="bottom right"
+					rootClientId={ rootClientId }
+					clientId={ clientId }
+					__experimentalIsQuick
+				/>
+			</div>
+		</BlockPopoverCover>
+	);
+}
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 519d8f7d82bff9..e6c49af6b61061 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -2,32 +2,48 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
+import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { speak } from '@wordpress/a11y';
+import { __, sprintf, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import EmptyBlockInserter from './empty-block-inserter';
 import {
 	InsertionPointOpenRef,
 	default as InsertionPoint,
 } from './insertion-point';
-import SelectedBlockPopover from './selected-block-popover';
+import BlockToolbarPopover from './block-toolbar-popover';
 import { store as blockEditorStore } from '../../store';
-import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
+import { useShowBlockTools } from './use-show-block-tools';
+import { unlock } from '../../lock-unlock';
 
 function selector( select ) {
-	const { __unstableGetEditorMode, getSettings, isTyping } =
-		select( blockEditorStore );
+	const {
+		getSelectedBlockClientId,
+		getFirstMultiSelectedBlockClientId,
+		getSettings,
+		isTyping,
+		isDragging,
+		isZoomOut,
+	} = unlock( select( blockEditorStore ) );
+
+	const clientId =
+		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
 	return {
-		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
+		isZoomOutMode: isZoomOut(),
+		isDragging: isDragging(),
 	};
 }
 
@@ -45,40 +61,66 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
-		selector,
-		[]
-	);
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode, isDragging } =
+		useSelect( selector, [] );
+
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		isGroupable,
+	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
+	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
+		useShowBlockTools();
+
 	const {
 		duplicateBlocks,
 		removeBlocks,
+		replaceBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
-		clearSelectedBlock,
+		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
-	} = useDispatch( blockEditorStore );
+		expandBlock,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
-		if ( event.defaultPrevented ) return;
+		if ( event.defaultPrevented ) {
+			return;
+		}
 
-		if ( isMatch( 'core/block-editor/move-up', event ) ) {
-			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
-				event.preventDefault();
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksUp( clientIds, rootClientId );
-			}
-		} else if ( isMatch( 'core/block-editor/move-down', event ) ) {
+		if (
+			isMatch( 'core/block-editor/move-up', event ) ||
+			isMatch( 'core/block-editor/move-down', event )
+		) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
 				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				moveBlocksDown( clientIds, rootClientId );
+				const direction = isMatch( 'core/block-editor/move-up', event )
+					? 'up'
+					: 'down';
+				if ( direction === 'up' ) {
+					moveBlocksUp( clientIds, rootClientId );
+				} else {
+					moveBlocksDown( clientIds, rootClientId );
+				}
+				const blockLength = Array.isArray( clientIds )
+					? clientIds.length
+					: 1;
+				const message = sprintf(
+					// translators: %d: the name of the block that has been moved
+					_n(
+						'%d block moved.',
+						'%d blocks moved.',
+						clientIds.length
+					),
+					blockLength
+				);
+				speak( message );
 			}
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
@@ -105,18 +147,52 @@ export default function BlockTools( {
 				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
+			if ( event.target.closest( '[role=toolbar]' ) ) {
+				// This shouldn't be necessary, but we have a combination of a few things all combining to create a situation where:
+				// - Because the block toolbar uses createPortal to populate the block toolbar fills, we can't rely on the React event bubbling to hit the onKeyDown listener for the block toolbar
+				// - Since we can't use the React tree, we use the DOM tree which _should_ handle the event bubbling correctly from a `createPortal` element.
+				// - This bubbles via the React tree, which hits this `unselect` escape keypress before the block toolbar DOM event listener has access to it.
+				// An alternative would be to remove the addEventListener on the navigableToolbar and use this event to handle it directly right here. That feels hacky too though.
+				return;
+			}
+
 			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length ) {
+			if ( clientIds.length > 1 ) {
+				event.preventDefault();
+				// If there is more than one block selected, select the first
+				// block so that focus is directed back to the beginning of the selection.
+				// In effect, to the user this feels like deselecting the multi-selection.
+				selectBlock( clientIds[ 0 ] );
+			}
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			// If focus is currently within a text field, such as a rich text block or other editable field,
+			// skip collapsing the list view, and allow the keyboard shortcut to be handled by the text field.
+			// This condition checks for both the active element and the active element within an iframed editor.
+			if (
+				isTextField( event.target ) ||
+				isTextField(
+					event.target?.contentWindow?.document?.activeElement
+				)
+			) {
+				return;
+			}
+			event.preventDefault();
+			expandBlock( clientId );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length > 1 && isGroupable( clientIds ) ) {
 				event.preventDefault();
-				clearSelectedBlock();
-				event.target.ownerDocument.defaultView
-					.getSelection()
-					.removeAllRanges();
-				__unstableContentRef?.current.focus();
+				const blocks = getBlocksByClientId( clientIds );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( clientIds, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
 			}
 		}
 	}
-
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
@@ -124,29 +200,41 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isTyping && (
+				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ ! isZoomOutMode &&
-					( hasFixedToolbar || ! isLargeViewport ) && (
-						<BlockContextualToolbar isFixed />
-					) }
-				{ /* Even if the toolbar is fixed, the block popover is still
-					needed for navigation and zoom-out mode. */ }
-				<SelectedBlockPopover
-					__unstableContentRef={ __unstableContentRef }
-				/>
-				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
+
+				{ showEmptyBlockSideInserter && (
+					<EmptyBlockInserter
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+					/>
+				) }
+
+				{ showBlockToolbarPopover && (
+					<BlockToolbarPopover
+						__unstableContentRef={ __unstableContentRef }
+						clientId={ clientId }
+						isTyping={ isTyping }
+					/>
+				) }
+
+				{ /* Used for the inline rich text toolbar. Until this toolbar is combined into BlockToolbar, someone implementing their own BlockToolbar will also need to use this to see the image caption toolbar. */ }
+				{ ! isZoomOutMode && ! hasFixedToolbar && (
+					<Popover.Slot
+						name="block-toolbar"
+						ref={ blockToolbarRef }
+					/>
+				) }
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
+				{ isZoomOutMode && ! isDragging && (
 					<ZoomOutModeInserters
 						__unstableContentRef={ __unstableContentRef }
 					/>
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index b7cd30462e3594..6c54993b23bcaa 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,12 +18,15 @@ import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import BlockDropZonePopover from '../block-popover/drop-zone';
+import { unlock } from '../../lock-unlock';
 
 export const InsertionPointOpenRef = createContext();
 
 function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
+	operation = 'insert',
+	nearestSide = 'right',
 } ) {
 	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
@@ -35,7 +38,7 @@ function InbetweenInsertionPointPopover( {
 		rootClientId,
 		isInserterShown,
 		isDistractionFree,
-		isNavigationMode,
+		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -45,8 +48,8 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			isNavigationMode: _isNavigationMode,
-		} = select( blockEditorStore );
+			isZoomOut,
+		} = unlock( select( blockEditorStore ) );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
 
@@ -74,17 +77,21 @@ function InbetweenInsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
-			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
+			isZoomOutMode: isZoomOut(),
 		};
 	}, [] );
-	const isVertical = orientation === 'vertical';
+	const { getBlockEditingMode } = useSelect( blockEditorStore );
 
 	const disableMotion = useReducedMotion();
 
 	function onClick( event ) {
-		if ( event.target === ref.current && nextClientId ) {
+		if (
+			event.target === ref.current &&
+			nextClientId &&
+			getBlockEditingMode( nextClientId ) !== 'disabled'
+		) {
 			selectBlock( nextClientId, -1 );
 		}
 	}
@@ -105,65 +112,22 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
-	// Define animation variants for the line element.
-	const horizontalLine = {
-		start: {
-			width: 0,
-			top: '50%',
-			bottom: '50%',
-			x: 0,
-		},
-		rest: {
-			width: 4,
-			top: 0,
-			bottom: 0,
-			x: -2,
-		},
-		hover: {
-			width: 4,
-			top: 0,
-			bottom: 0,
-			x: -2,
-		},
-	};
-	const verticalLine = {
-		start: {
-			height: 0,
-			left: '50%',
-			right: '50%',
-			y: 0,
-		},
-		rest: {
-			height: 4,
-			left: 0,
-			right: 0,
-			y: -2,
-		},
-		hover: {
-			height: 4,
-			left: 0,
-			right: 0,
-			y: -2,
-		},
-	};
 	const lineVariants = {
 		// Initial position starts from the center and invisible.
 		start: {
-			...( ! isVertical ? horizontalLine.start : verticalLine.start ),
 			opacity: 0,
+			scale: 0,
 		},
 		// The line expands to fill the container. If the inserter is visible it
 		// is delayed so it appears orchestrated.
 		rest: {
-			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
-			borderRadius: '2px',
+			scale: 1,
 			transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },
 		},
 		hover: {
-			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
-			borderRadius: '2px',
+			scale: 1,
 			transition: { delay: 0.5, type: 'tween' },
 		},
 	};
@@ -178,13 +142,26 @@ function InbetweenInsertionPointPopover( {
 		},
 	};
 
-	if ( isDistractionFree && ! isNavigationMode ) {
+	if ( isDistractionFree ) {
 		return null;
 	}
 
-	const className = classnames(
+	// Zoom out mode should only show the insertion point for the insert operation.
+	// Other operations such as "group" are when the editor tries to create a row
+	// block by grouping the block being dragged with the block it's being dropped
+	// onto.
+	if ( isZoomOutMode && operation !== 'insert' ) {
+		return null;
+	}
+
+	const orientationClassname =
+		orientation === 'horizontal' || operation === 'group'
+			? 'is-horizontal'
+			: 'is-vertical';
+
+	const className = clsx(
 		'block-editor-block-list__insertion-point',
-		'is-' + orientation
+		orientationClassname
 	);
 
 	return (
@@ -193,6 +170,8 @@ function InbetweenInsertionPointPopover( {
 			nextClientId={ nextClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			operation={ operation }
+			nearestSide={ nearestSide }
 		>
 			<motion.div
 				layout={ ! disableMotion }
@@ -205,7 +184,7 @@ function InbetweenInsertionPointPopover( {
 				tabIndex={ -1 }
 				onClick={ onClick }
 				onFocus={ onFocus }
-				className={ classnames( className, {
+				className={ clsx( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
 				onHoverEnd={ maybeHideInserterPoint }
@@ -218,7 +197,7 @@ function InbetweenInsertionPointPopover( {
 				{ isInserterShown && (
 					<motion.div
 						variants={ inserterVariants }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-list__insertion-point-inserter'
 						) }
 					>
@@ -242,16 +221,30 @@ function InbetweenInsertionPointPopover( {
 }
 
 export default function InsertionPoint( props ) {
-	const { insertionPoint, isVisible } = useSelect( ( select ) => {
-		const { getBlockInsertionPoint, isBlockInsertionPointVisible } =
-			select( blockEditorStore );
-		return {
-			insertionPoint: getBlockInsertionPoint(),
-			isVisible: isBlockInsertionPointVisible(),
-		};
-	}, [] );
+	const { insertionPoint, isVisible, isBlockListEmpty } = useSelect(
+		( select ) => {
+			const {
+				getBlockInsertionPoint,
+				isBlockInsertionPointVisible,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const blockInsertionPoint = getBlockInsertionPoint();
+			return {
+				insertionPoint: blockInsertionPoint,
+				isVisible: isBlockInsertionPointVisible(),
+				isBlockListEmpty:
+					getBlockCount( blockInsertionPoint?.rootClientId ) === 0,
+			};
+		},
+		[]
+	);
 
-	if ( ! isVisible ) {
+	if (
+		! isVisible ||
+		// Don't render the insertion point if the block list is empty.
+		// The insertion point will be represented by the appender instead.
+		isBlockListEmpty
+	) {
 		return null;
 	}
 
@@ -266,6 +259,10 @@ export default function InsertionPoint( props ) {
 			{ ...props }
 		/>
 	) : (
-		<InbetweenInsertionPointPopover { ...props } />
+		<InbetweenInsertionPointPopover
+			operation={ insertionPoint.operation }
+			nearestSide={ insertionPoint.nearestSide }
+			{ ...props }
+		/>
 	);
 }
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
deleted file mode 100644
index 343cd50058655a..00000000000000
--- a/packages/block-editor/src/components/block-tools/selected-block-popover.js
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import BlockContextualToolbar from './block-contextual-toolbar';
-import { store as blockEditorStore } from '../../store';
-import BlockPopover from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import Inserter from '../inserter';
-
-function selector( select ) {
-	const {
-		__unstableGetEditorMode,
-		isMultiSelecting,
-		hasMultiSelection,
-		isTyping,
-		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
-		getSettings,
-		getLastMultiSelectedBlockClientId,
-	} = select( blockEditorStore );
-
-	return {
-		editorMode: __unstableGetEditorMode(),
-		isMultiSelecting: isMultiSelecting(),
-		isTyping: isTyping(),
-		isBlockInterfaceHidden: isBlockInterfaceHidden(),
-		hasFixedToolbar: getSettings().hasFixedToolbar,
-		isDistractionFree: getSettings().isDistractionFree,
-		lastClientId: hasMultiSelection()
-			? getLastMultiSelectedBlockClientId()
-			: null,
-	};
-}
-
-function SelectedBlockPopover( {
-	clientId,
-	rootClientId,
-	isEmptyDefaultBlock,
-	showContents, // we may need to mount an empty popover because we reuse
-	capturingClientId,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-} ) {
-	const {
-		editorMode,
-		isMultiSelecting,
-		isTyping,
-		isBlockInterfaceHidden,
-		hasFixedToolbar,
-		isDistractionFree,
-		lastClientId,
-	} = useSelect( selector, [] );
-	const isInsertionPointVisible = useSelect(
-		( select ) => {
-			const {
-				isBlockInsertionPointVisible,
-				getBlockInsertionPoint,
-				getBlockOrder,
-			} = select( blockEditorStore );
-
-			if ( ! isBlockInsertionPointVisible() ) {
-				return false;
-			}
-
-			const insertionPoint = getBlockInsertionPoint();
-			const order = getBlockOrder( insertionPoint.rootClientId );
-			return order[ insertionPoint.index ] === clientId;
-		},
-		[ clientId ]
-	);
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isToolbarForced = useRef( false );
-	const { stopTyping } = useDispatch( blockEditorStore );
-
-	const showEmptyBlockSideInserter =
-		! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
-	const shouldShowBreadcrumb =
-		editorMode === 'navigation' || editorMode === 'zoom-out';
-	const shouldShowContextualToolbar =
-		editorMode === 'edit' &&
-		! hasFixedToolbar &&
-		isLargeViewport &&
-		! isMultiSelecting &&
-		! showEmptyBlockSideInserter &&
-		! isTyping &&
-		! isBlockInterfaceHidden;
-	const canFocusHiddenToolbar =
-		editorMode === 'edit' &&
-		! shouldShowContextualToolbar &&
-		! hasFixedToolbar &&
-		! isDistractionFree &&
-		! isEmptyDefaultBlock;
-
-	useShortcut(
-		'core/block-editor/focus-toolbar',
-		() => {
-			isToolbarForced.current = true;
-			stopTyping( true );
-		},
-		{
-			isDisabled: ! canFocusHiddenToolbar,
-		}
-	);
-
-	useEffect( () => {
-		isToolbarForced.current = false;
-	} );
-
-	// Stores the active toolbar item index so the block toolbar can return focus
-	// to it when re-mounting.
-	const initialToolbarItemIndexRef = useRef();
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! showEmptyBlockSideInserter
-	) {
-		return null;
-	}
-
-	return (
-		<>
-			{ showEmptyBlockSideInserter && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					__unstableCoverTarget
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-side-inserter-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
-						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					shift={ false }
-					{ ...popoverProps }
-				>
-					<div className="block-editor-block-list__empty-block-inserter">
-						<Inserter
-							position="bottom right"
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-							__experimentalIsQuick
-						/>
-					</div>
-				</BlockPopover>
-			) }
-			{ ( shouldShowBreadcrumb || shouldShowContextualToolbar ) && (
-				<BlockPopover
-					clientId={ capturingClientId || clientId }
-					bottomClientId={ lastClientId }
-					className={ classnames(
-						'block-editor-block-list__block-popover',
-						{
-							'is-insertion-point-visible':
-								isInsertionPointVisible,
-						}
-					) }
-					__unstablePopoverSlot={ __unstablePopoverSlot }
-					__unstableContentRef={ __unstableContentRef }
-					resize={ false }
-					{ ...popoverProps }
-				>
-					{ shouldShowContextualToolbar && showContents && (
-						<BlockContextualToolbar
-							// If the toolbar is being shown because of being forced
-							// it should focus the toolbar right after the mount.
-							focusOnMount={ isToolbarForced.current }
-							__experimentalInitialIndex={
-								initialToolbarItemIndexRef.current
-							}
-							__experimentalOnIndexChange={ ( index ) => {
-								initialToolbarItemIndexRef.current = index;
-							} }
-							// Resets the index whenever the active block changes so
-							// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-							key={ clientId }
-						/>
-					) }
-					{ shouldShowBreadcrumb && (
-						<BlockSelectionButton
-							clientId={ clientId }
-							rootClientId={ rootClientId }
-						/>
-					) }
-				</BlockPopover>
-			) }
-		</>
-	);
-}
-
-function wrapperSelector( select ) {
-	const {
-		getSelectedBlockClientId,
-		getFirstMultiSelectedBlockClientId,
-		getBlockRootClientId,
-		getBlock,
-		getBlockParents,
-		getSettings,
-		isNavigationMode: _isNavigationMode,
-		__experimentalGetBlockListSettingsForBlocks,
-	} = select( blockEditorStore );
-
-	const clientId =
-		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
-
-	if ( ! clientId ) {
-		return;
-	}
-
-	const { name, attributes = {} } = getBlock( clientId ) || {};
-	const blockParentsClientIds = getBlockParents( clientId );
-
-	// Get Block List Settings for all ancestors of the current Block clientId.
-	const parentBlockListSettings = __experimentalGetBlockListSettingsForBlocks(
-		blockParentsClientIds
-	);
-
-	// Get the clientId of the topmost parent with the capture toolbars setting.
-	const capturingClientId = find(
-		blockParentsClientIds,
-		( parentClientId ) =>
-			parentBlockListSettings[ parentClientId ]
-				?.__experimentalCaptureToolbars
-	);
-
-	const settings = getSettings();
-
-	return {
-		clientId,
-		rootClientId: getBlockRootClientId( clientId ),
-		name,
-		isDistractionFree: settings.isDistractionFree,
-		isNavigationMode: _isNavigationMode(),
-		isEmptyDefaultBlock:
-			name && isUnmodifiedDefaultBlock( { name, attributes } ),
-		capturingClientId,
-	};
-}
-
-export default function WrappedBlockPopover( {
-	__unstablePopoverSlot,
-	__unstableContentRef,
-} ) {
-	const selected = useSelect( wrapperSelector, [] );
-
-	if ( ! selected ) {
-		return null;
-	}
-
-	const {
-		clientId,
-		rootClientId,
-		name,
-		isEmptyDefaultBlock,
-		capturingClientId,
-		isDistractionFree,
-		isNavigationMode,
-	} = selected;
-
-	if ( ! name ) {
-		return null;
-	}
-
-	return (
-		<SelectedBlockPopover
-			clientId={ clientId }
-			rootClientId={ rootClientId }
-			isEmptyDefaultBlock={ isEmptyDefaultBlock }
-			showContents={ ! isDistractionFree || isNavigationMode }
-			capturingClientId={ capturingClientId }
-			__unstablePopoverSlot={ __unstablePopoverSlot }
-			__unstableContentRef={ __unstableContentRef }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index e301859c165491..80fe4c420d1e1f 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -13,17 +13,22 @@
 .block-editor-block-list__insertion-point-indicator {
 	position: absolute;
 	background: var(--wp-admin-theme-color);
+	border-radius: $radius-small;
+	transform-origin: center;
+	opacity: 0;
+	will-change: transform, opacity;
 
 	.block-editor-block-list__insertion-point.is-vertical > & {
-		top: 50%;
-		height: $border-width;
+		top: calc(50% - 2px);
+		height: 4px;
+		width: 100%;
 	}
 
 	.block-editor-block-list__insertion-point.is-horizontal > & {
 		top: 0;
-		right: 0;
-		left: 50%;
-		width: $border-width;
+		bottom: 0;
+		left: calc(50% - 2px);
+		width: 4px;
 	}
 }
 
@@ -32,6 +37,8 @@
 	// Don't show on mobile.
 	display: none;
 	position: absolute;
+	will-change: transform;
+
 	@include break-mobile() {
 		display: flex;
 	}
@@ -50,14 +57,24 @@
 	}
 }
 
+// The black plus that shows up on the right side of an empty paragraph block.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
-		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
 
@@ -79,140 +96,91 @@
 	}
 }
 
-/**
- * Block Toolbar when contextual.
- */
+// Hide the popover block editor list while dragging.
+// Using a hacky animation to delay hiding the element.
+// It's needed because if we hide the element immediately upon dragging,
+// the dragging will end immediately since there are no elements to be dragged anymore.
+// Fortunately, we only have to keep it visible for a frame immediately after dragging,
+// after that, we can safely hide it altogether.
+@keyframes hide-during-dragging {
+	to {
+		position: fixed;
+		transform: translate(9999px, 9999px);
+	}
+}
 
-.block-editor-block-contextual-toolbar {
-	// Block UI appearance.
-	display: inline-flex;
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	background-color: $white;
+.components-popover.block-editor-block-list__block-popover {
+
+	// Position the block toolbar.
+	.block-editor-block-contextual-toolbar {
+		pointer-events: all;
+		margin-top: $grid-unit-10;
+		margin-bottom: $grid-unit-10;
+		border: $border-width solid $gray-900;
+		border-radius: $radius-small;
+		overflow: visible; // allow the parent selector to be visible
+		position: static;
+		width: auto;
+
+		&.has-parent {
+			margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+			.show-icon-labels & {
+				margin-left: 0;
+			}
+		}
+	}
+
+	.block-editor-block-toolbar {
+		overflow: visible;
+	}
 
 	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar {
 		border-right-color: $gray-900;
 	}
 
-	&.is-fixed {
-		position: sticky;
-		top: 0;
-		width: 100%;
-		z-index: z-index(".block-editor-block-popover");
-		// Fill up when empty
-		min-height: $block-toolbar-height;
-		display: block;
-
-		border: none;
-		border-bottom: $border-width solid $gray-200;
-		border-radius: 0;
-
-		.block-editor-block-toolbar .components-toolbar-group,
-		.block-editor-block-toolbar .components-toolbar {
-			border-right-color: $gray-200;
-		}
-	}
-}
-
-/**
- * Block Label for Navigation/Selection Mode
- */
+	.is-inverted-toolbar {
+		background-color: $gray-900;
+		color: $gray-100;
 
-.block-editor-block-list__block-selection-button {
-	display: inline-flex;
-	padding: 0 $grid-unit-15;
-	z-index: z-index(".block-editor-block-list__block-selection-button");
+		&.block-editor-block-contextual-toolbar {
+			border-color: $gray-800;
+		}
 
-	// Dark block UI appearance.
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
+		button {
+			color: $gray-300;
 
-	font-size: $default-font-size;
-	height: $block-toolbar-height;
+			&:hover {
+				color: $white;
+			}
 
-	.block-editor-block-list__block-selection-button__content {
-		margin: auto;
-		display: inline-flex;
-		align-items: center;
+			&:focus::before {
+				box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
 
-		> .components-flex__item {
-			margin-right: $grid-unit-15 * 0.5;
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-700;
+			}
 		}
-	}
-	.components-button.has-icon.block-selection-button_drag-handle {
-		cursor: grab;
-		padding: 0;
-		height: $grid-unit-30;
-		min-width: $grid-unit-30;
-		margin-left: -2px;
-
-		// Drag handle is smaller than the others.
-		svg {
-			min-width: 18px;
-			min-height: 18px;
-		}
-	}
-
-	.block-editor-block-icon {
-		font-size: $default-font-size;
-		color: $white;
-		height: $block-toolbar-height;
-	}
-
-	// The button here has a special style to appear as a toolbar.
-	.components-button {
-		min-width: $button-size;
-		color: $white;
-		height: $block-toolbar-height;
 
-		// When button is focused, it receives a box-shadow instead of the border.
-		&:focus {
-			box-shadow: none;
-			border: none;
+		.block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+			border-color: $gray-800;
+			background-color: $gray-900;
 		}
 
-		&:active {
-			color: $white;
+		.block-editor-block-switcher__toggle {
+			color: $gray-100;
 		}
 
-		// Make sure the button has no hover style when it's disabled.
-		&[aria-disabled="true"]:hover {
-			color: $white;
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right-color: $gray-800 !important;
 		}
 
-		display: flex;
-	}
-	.block-selection-button_select-button.components-button {
-		padding: 0;
-	}
-
-	.block-editor-block-mover {
-		background: unset;
-		border: none;
-	}
-}
-
-// Hide the popover block editor list while dragging.
-// Using a hacky animation to delay hiding the element.
-// It's needed because if we hide the element immediately upon dragging,
-// the dragging will end immediately since there are no elements to be dragged anymore.
-// Fortunately, we only have to keep it visible for a frame immediately after dragging,
-// after that, we can safely hide it altogether.
-@keyframes hide-during-dragging {
-	to {
-		position: fixed;
-		transform: translate(9999px, 9999px);
-	}
-}
-
-.components-popover.block-editor-block-list__block-popover {
-	// Position the block toolbar.
-	.block-editor-block-list__block-selection-button,
-	.block-editor-block-contextual-toolbar {
-		pointer-events: all;
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-15;
+		.is-pressed {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 
 	// Hide the block toolbar if the insertion point is shown.
@@ -226,8 +194,52 @@
 		// It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements.
 		animation: hide-during-dragging 1ms linear forwards;
 	}
+
+	.block-editor-block-parent-selector {
+		position: absolute;
+		left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+
+		&::before {
+			content: "";
+		}
+
+		.block-editor-block-parent-selector__button {
+			border: $border-width solid $gray-900;
+			padding-right: 6px;
+			padding-left: 6px;
+			background-color: $white;
+
+			.show-icon-labels & {
+				padding-right: $grid-unit-15;
+				padding-left: $grid-unit-15;
+			}
+		}
+	}
+
+	// Show Icon Label Styles
+	.show-icon-labels & {
+
+		.block-editor-block-parent-selector {
+			position: relative;
+			left: auto;
+			margin-left: -$border-width;
+		}
+
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+			border-left: 1px solid $gray-900;
+		}
+	}
 }
 
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
+
+.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button {
+	pointer-events: all;
+	position: absolute;
+	transform: translateX(-50%) translateY(-50%);
+	top: 50%;
+	left: 50%;
+}
diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
index d218b1104139cf..df016e73c29d45 100644
--- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
+++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
@@ -3,13 +3,21 @@
  */
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+import { getScrollContainer } from '@wordpress/dom';
+import {
+	useCallback,
+	useLayoutEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { hasStickyOrFixedPositionValue } from '../../hooks/position';
+import { getElementBounds } from '../../utils/dom';
 
 const COMMON_PROPS = {
 	placement: 'top-start',
@@ -40,28 +48,50 @@ const RESTRICTED_HEIGHT_PROPS = {
  *
  * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
  * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {Element} scrollContainer      The scrollable container for the contentElement.
  * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ * @param {boolean} isSticky             Whether or not the selected block is sticky or fixed.
  *
  * @return {Object} The popover props used to determine the position of the toolbar.
  */
-function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+function getProps(
+	contentElement,
+	selectedBlockElement,
+	scrollContainer,
+	toolbarHeight,
+	isSticky
+) {
 	if ( ! contentElement || ! selectedBlockElement ) {
 		return DEFAULT_PROPS;
 	}
 
-	const blockRect = selectedBlockElement.getBoundingClientRect();
+	// Get how far the content area has been scrolled.
+	const scrollTop = scrollContainer?.scrollTop || 0;
+
+	const blockRect = getElementBounds( selectedBlockElement );
 	const contentRect = contentElement.getBoundingClientRect();
 
+	// Get the vertical position of top of the visible content area.
+	const topOfContentElementInViewport = scrollTop + contentRect.top;
+
 	// The document element's clientHeight represents the viewport height.
 	const viewportHeight =
 		contentElement.ownerDocument.documentElement.clientHeight;
 
-	const hasSpaceForToolbarAbove =
-		blockRect.top - contentRect.top > toolbarHeight;
+	// The restricted height area is calculated as the sum of the
+	// vertical position of the visible content area, plus the height
+	// of the block toolbar.
+	const restrictedTopArea = topOfContentElementInViewport + toolbarHeight;
+	const hasSpaceForToolbarAbove = blockRect.top > restrictedTopArea;
+
 	const isBlockTallerThanViewport =
 		blockRect.height > viewportHeight - toolbarHeight;
 
-	if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
+	// Sticky blocks are treated as if they will never have enough space for the toolbar above.
+	if (
+		! isSticky &&
+		( hasSpaceForToolbarAbove || isBlockTallerThanViewport )
+	) {
 		return DEFAULT_PROPS;
 	}
 
@@ -83,13 +113,34 @@ export default function useBlockToolbarPopoverProps( {
 } ) {
 	const selectedBlockElement = useBlockElement( clientId );
 	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
-	const [ props, setProps ] = useState( () =>
-		getProps( contentElement, selectedBlockElement, toolbarHeight )
-	);
-	const blockIndex = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+	const { blockIndex, isSticky } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockAttributes } =
+				select( blockEditorStore );
+			return {
+				blockIndex: getBlockIndex( clientId ),
+				isSticky: hasStickyOrFixedPositionValue(
+					getBlockAttributes( clientId )
+				),
+			};
+		},
 		[ clientId ]
 	);
+	const scrollContainer = useMemo( () => {
+		if ( ! contentElement ) {
+			return;
+		}
+		return getScrollContainer( contentElement );
+	}, [ contentElement ] );
+	const [ props, setProps ] = useState( () =>
+		getProps(
+			contentElement,
+			selectedBlockElement,
+			scrollContainer,
+			toolbarHeight,
+			isSticky
+		)
+	);
 
 	const popoverRef = useRefEffect( ( popoverNode ) => {
 		setToolbarHeight( popoverNode.offsetHeight );
@@ -98,9 +149,15 @@ export default function useBlockToolbarPopoverProps( {
 	const updateProps = useCallback(
 		() =>
 			setProps(
-				getProps( contentElement, selectedBlockElement, toolbarHeight )
+				getProps(
+					contentElement,
+					selectedBlockElement,
+					scrollContainer,
+					toolbarHeight,
+					isSticky
+				)
 			),
-		[ contentElement, selectedBlockElement, toolbarHeight ]
+		[ contentElement, selectedBlockElement, scrollContainer, toolbarHeight ]
 	);
 
 	// Update props when the block is moved. This also ensures the props are
diff --git a/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js b/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js
new file mode 100644
index 00000000000000..a2783f49bb5389
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/use-selected-block-tool-props.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns props for the selected block tools and empty block inserter.
+ *
+ * @param {string} clientId Selected block client ID.
+ */
+export default function useSelectedBlockToolProps( clientId ) {
+	const selectedBlockProps = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockParents,
+				__experimentalGetBlockListSettingsForBlocks,
+				isBlockInsertionPointVisible,
+				getBlockInsertionPoint,
+				getBlockOrder,
+				hasMultiSelection,
+				getLastMultiSelectedBlockClientId,
+			} = select( blockEditorStore );
+
+			const blockParentsClientIds = getBlockParents( clientId );
+
+			// Get Block List Settings for all ancestors of the current Block clientId.
+			const parentBlockListSettings =
+				__experimentalGetBlockListSettingsForBlocks(
+					blockParentsClientIds
+				);
+
+			// Get the clientId of the topmost parent with the capture toolbars setting.
+			const capturingClientId = blockParentsClientIds.find(
+				( parentClientId ) =>
+					parentBlockListSettings[ parentClientId ]
+						?.__experimentalCaptureToolbars
+			);
+
+			let isInsertionPointVisible = false;
+			if ( isBlockInsertionPointVisible() ) {
+				const insertionPoint = getBlockInsertionPoint();
+				const order = getBlockOrder( insertionPoint.rootClientId );
+				isInsertionPointVisible =
+					order[ insertionPoint.index ] === clientId;
+			}
+
+			return {
+				capturingClientId,
+				isInsertionPointVisible,
+				lastClientId: hasMultiSelection()
+					? getLastMultiSelectedBlockClientId()
+					: null,
+				rootClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	return selectedBlockProps;
+}
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
new file mode 100644
index 00000000000000..db651bce00fec7
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Source of truth for which block tools are showing in the block editor.
+ *
+ * @return {Object} Object of which block tools will be shown.
+ */
+export function useShowBlockTools() {
+	return useSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getFirstMultiSelectedBlockClientId,
+			getBlock,
+			getBlockMode,
+			getSettings,
+			__unstableGetEditorMode,
+			isTyping,
+		} = unlock( select( blockEditorStore ) );
+
+		const clientId =
+			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
+
+		const block = getBlock( clientId );
+		const editorMode = __unstableGetEditorMode();
+		const hasSelectedBlock = !! clientId && !! block;
+		const isEmptyDefaultBlock =
+			hasSelectedBlock &&
+			isUnmodifiedDefaultBlock( block ) &&
+			getBlockMode( clientId ) !== 'html';
+		const _showEmptyBlockSideInserter =
+			clientId &&
+			! isTyping() &&
+			// Hide the block inserter on the navigation mode.
+			// See https://github.com/WordPress/gutenberg/pull/66636#discussion_r1824728483.
+			editorMode !== 'navigation' &&
+			isEmptyDefaultBlock;
+		const _showBlockToolbarPopover =
+			! getSettings().hasFixedToolbar &&
+			! _showEmptyBlockSideInserter &&
+			hasSelectedBlock &&
+			! isEmptyDefaultBlock;
+
+		return {
+			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+			showBlockToolbarPopover: _showBlockToolbarPopover,
+		};
+	}, [] );
+}
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
new file mode 100644
index 00000000000000..961552caa66e01
--- /dev/null
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+function ZoomOutModeInserterButton( { onClick } ) {
+	return (
+		<Button
+			variant="primary"
+			icon={ plus }
+			size="compact"
+			className={ clsx(
+				'block-editor-button-pattern-inserter__button',
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
+			) }
+			onClick={ onClick }
+			label={ _x(
+				'Add pattern',
+				'Generic label for pattern inserter button'
+			) }
+		/>
+	);
+}
+
+export default ZoomOutModeInserterButton;
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 3c42bdcdb4a48d..17af902bf9baf2 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
@@ -1,22 +1,49 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
+import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button';
 import { store as blockEditorStore } from '../../store';
-import Inserter from '../inserter';
+import { unlock } from '../../lock-unlock';
 
-function ZoomOutModeInserters( { __unstableContentRef } ) {
+function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
-	const blockOrder = useSelect( ( select ) => {
-		return select( blockEditorStore ).getBlockOrder();
+	const {
+		hasSelection,
+		blockOrder,
+		setInserterIsOpened,
+		sectionRootClientId,
+		selectedBlockClientId,
+	} = useSelect( ( select ) => {
+		const {
+			getSettings,
+			getBlockOrder,
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+
+		return {
+			hasSelection: !! getSelectionStart().clientId,
+			blockOrder: getBlockOrder( root ),
+			sectionRootClientId: root,
+			setInserterIsOpened:
+				getSettings().__experimentalSetIsInserterOpened,
+			selectedBlockClientId: getSelectedBlockClientId(),
+		};
 	}, [] );
 
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) );
+
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -27,31 +54,36 @@ function ZoomOutModeInserters( { __unstableContentRef } ) {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
-	return blockOrder.map( ( clientId, index ) => {
-		if ( index === blockOrder.length - 1 ) {
-			return null;
-		}
-		return (
-			<BlockPopoverInbetween
-				key={ clientId }
-				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index + 1 ] }
-				__unstableContentRef={ __unstableContentRef }
-			>
-				<div className="block-editor-block-list__insertion-point-inserter is-with-inserter">
-					<Inserter
-						position="bottom center"
-						clientId={ blockOrder[ index + 1 ] }
-						__experimentalIsQuick
-					/>
-				</div>
-			</BlockPopoverInbetween>
-		);
-	} );
+	const previousClientId = selectedBlockClientId;
+	const index = blockOrder.findIndex(
+		( clientId ) => selectedBlockClientId === clientId
+	);
+	const nextClientId = blockOrder[ index + 1 ];
+
+	return (
+		<BlockPopoverInbetween
+			previousClientId={ previousClientId }
+			nextClientId={ nextClientId }
+		>
+			<ZoomOutModeInserterButton
+				onClick={ () => {
+					setInserterIsOpened( {
+						rootClientId: sectionRootClientId,
+						insertionIndex: index + 1,
+						tab: 'patterns',
+						category: 'all',
+					} );
+					showInsertionPoint( sectionRootClientId, index + 1, {
+						operation: 'insert',
+					} );
+				} }
+			/>
+		</BlockPopoverInbetween>
+	);
 }
 
 export default ZoomOutModeInserters;
diff --git a/packages/block-editor/src/components/block-types-list/README.md b/packages/block-editor/src/components/block-types-list/README.md
index 68e89573447db8..8740cdbf2c7741 100644
--- a/packages/block-editor/src/components/block-types-list/README.md
+++ b/packages/block-editor/src/components/block-types-list/README.md
@@ -10,11 +10,6 @@ This component is present in the block insertion tab, the reusable blocks tab an
 
 ![Block types list in the quick inserter modal](https://make.wordpress.org/core/files/2020/09/block-types-list-emplacement-3.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 40e04b040d5a80..0be6f82a653d18 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>
diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js
index d62987d408aeaf..1d32103773fb39 100644
--- a/packages/block-editor/src/components/block-types-list/index.native.js
+++ b/packages/block-editor/src/components/block-types-list/index.native.js
@@ -15,7 +15,7 @@ import {
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient } from '@wordpress/components';
 import {
 	usePreferredColorScheme,
 	usePreferredColorSchemeStyle,
@@ -25,6 +25,7 @@ import {
  * Internal dependencies
  */
 import styles from './style.scss';
+import InserterButton from '../inserter-button';
 
 const MIN_COL_NUM = 3;
 
@@ -32,6 +33,7 @@ export default function BlockTypesList( {
 	name,
 	sections,
 	onSelect,
+	label,
 	listProps,
 	initialNumToRender = 3,
 } ) {
@@ -154,6 +156,7 @@ export default function BlockTypesList( {
 		<SectionList
 			onLayout={ onLayout }
 			testID={ `InserterUI-${ name }` }
+			accessibilityLabel={ label }
 			keyboardShouldPersistTaps="always"
 			sections={ sections }
 			initialNumToRender={ initialNumToRender }
diff --git a/packages/block-editor/src/components/block-variation-picker/README.md b/packages/block-editor/src/components/block-variation-picker/README.md
index 4816822e535a2a..891cd21b1f50c2 100644
--- a/packages/block-editor/src/components/block-variation-picker/README.md
+++ b/packages/block-editor/src/components/block-variation-picker/README.md
@@ -10,11 +10,6 @@ This component is currently used by "Columns" and "Query Loop" blocks.
 
 ![Columns block variations](https://make.wordpress.org/core/files/2020/09/colums-block-variations.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
@@ -24,9 +19,9 @@ Renders the variations of a block.
 ```jsx
 import { useSelect } from '@wordpress/data';
 import {
-	__experimentalBlockVariationPicker as BlockVariationPicker,
-	store as blockEditorStore,
+	__experimentalBlockVariationPicker as BlockVariationPicker
 } from '@wordpress/block-editor';
+import { store as blocksStore } from '@wordpress/blocks';
 
 const MyBlockVariationPicker = ( { blockName } ) => {
 	const variations = useSelect(
diff --git a/packages/block-editor/src/components/block-variation-picker/content.scss b/packages/block-editor/src/components/block-variation-picker/content.scss
new file mode 100644
index 00000000000000..e7dd3e87cb1d55
--- /dev/null
+++ b/packages/block-editor/src/components/block-variation-picker/content.scss
@@ -0,0 +1,39 @@
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+	list-style: none;
+	display: flex;
+	justify-content: flex-start;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	gap: $grid-unit-10;
+	font-size: $helptext-font-size;
+
+	svg {
+		fill: $gray-600 !important;
+	}
+
+	.components-button {
+		padding: 4px;
+	}
+
+	.components-button:hover {
+		background: none !important; // !important to simplify the selector.
+	}
+
+	.components-button:hover svg {
+		fill: var(--wp-admin-theme-color) !important;
+	}
+
+	& > li {
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $grid-unit-05;
+	}
+}
+
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..f3687a305e84fd 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,12 +13,12 @@ import { layout } from '@wordpress/icons';
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),
-	instructions = __( 'Select a variation to start with.' ),
+	instructions = __( 'Select a variation to start with:' ),
 	variations,
 	onSelect,
 	allowSkip,
 } ) {
-	const classes = classnames( 'block-editor-block-variation-picker', {
+	const classes = clsx( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
 	} );
 
@@ -42,8 +42,13 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
-							icon={ variation.icon }
+							__next40pxDefaultSize
+							variant="tertiary"
+							icon={
+								variation.icon && variation.icon.src
+									? variation.icon.src
+									: variation.icon
+							}
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"
@@ -58,7 +63,11 @@ function BlockVariationPicker( {
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
-					<Button variant="link" onClick={ () => onSelect() }>
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ () => onSelect() }
+					>
 						{ __( 'Skip' ) }
 					</Button>
 				</div>
diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js
index e794a4bbba2089..e117bda7c93df5 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.native.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.native.js
@@ -12,27 +12,23 @@ import {
 /**
  * WordPress dependencies
  */
-import { withSelect, useDispatch } from '@wordpress/data';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	createBlocksFromInnerBlocksTemplate,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
 	BottomSheet,
 	FooterMessageControl,
-	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
+import InserterButton from '../inserter-button';
 
 const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 
@@ -45,28 +41,25 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		styles.cancelButtonDark
 	);
 
-	const leftButton = useMemo(
-		() => (
-			<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
-				<View>
-					{ isIOS ? (
-						<Text
-							style={ cancelButtonStyle }
-							maxFontSizeMultiplier={ 2 }
-						>
-							{ __( 'Cancel' ) }
-						</Text>
-					) : (
-						<Icon
-							icon={ close }
-							size={ 24 }
-							style={ styles.closeIcon }
-						/>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
-		),
-		[ onClose, cancelButtonStyle ]
+	const leftButton = (
+		<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
+			<View>
+				{ isIOS ? (
+					<Text
+						style={ cancelButtonStyle }
+						maxFontSizeMultiplier={ 2 }
+					>
+						{ __( 'Cancel' ) }
+					</Text>
+				) : (
+					<Icon
+						icon={ close }
+						size={ 24 }
+						style={ styles.closeIcon }
+					/>
+				) }
+			</View>
+		</TouchableWithoutFeedback>
 	);
 
 	const onVariationSelect = ( variation ) => {
@@ -77,51 +70,38 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		onClose();
 	};
 
-	return useMemo(
-		() => (
-			<BottomSheet
-				isVisible={ isVisible }
-				onClose={ onClose }
-				title={ __( 'Select a layout' ) }
-				contentStyle={ styles.contentStyle }
-				leftButton={ leftButton }
-				testID="block-variation-modal"
+	return (
+		<BottomSheet
+			isVisible={ isVisible }
+			onClose={ onClose }
+			title={ __( 'Select a layout' ) }
+			contentStyle={ styles.contentStyle }
+			leftButton={ leftButton }
+			testID="block-variation-modal"
+		>
+			<ScrollView
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				contentContainerStyle={ styles.contentContainerStyle }
+				style={ styles.containerStyle }
 			>
-				<ScrollView
-					horizontal
-					showsHorizontalScrollIndicator={ false }
-					contentContainerStyle={ styles.contentContainerStyle }
-					style={ styles.containerStyle }
-				>
-					{ variations.map( ( v ) => {
-						return (
-							<InserterButton
-								item={ v }
-								key={ v.name }
-								onSelect={ () => onVariationSelect( v ) }
-							/>
-						);
-					} ) }
-				</ScrollView>
-				<PanelBody>
-					<FooterMessageControl
-						label={ __(
-							'Note: Column layout may vary between themes and screen sizes'
-						) }
+				{ variations.map( ( v ) => (
+					<InserterButton
+						item={ v }
+						key={ v.name }
+						onSelect={ () => onVariationSelect( v ) }
 					/>
-				</PanelBody>
-			</BottomSheet>
-		),
-		[ variations, isVisible, onClose ]
+				) ) }
+			</ScrollView>
+			<PanelBody>
+				<FooterMessageControl
+					label={ __(
+						'Note: Column layout may vary between themes and screen sizes'
+					) }
+				/>
+			</PanelBody>
+		</BottomSheet>
 	);
 }
 
-export default compose(
-	withSelect( ( select, {} ) => {
-		const { getBlockVariations } = select( blocksStore );
-
-		return {
-			date: getBlockVariations( 'core/columns', 'block' ),
-		};
-	} )
-)( BlockVariationPicker );
+export default BlockVariationPicker;
diff --git a/packages/block-editor/src/components/block-variation-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss
deleted file mode 100644
index 882e2748f6c92c..00000000000000
--- a/packages/block-editor/src/components/block-variation-picker/style.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.block-editor-block-variation-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-variations .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
-	display: flex;
-	justify-content: flex-start;
-	flex-direction: row;
-	flex-wrap: wrap;
-	width: 100%;
-	margin: $grid-unit-20 0;
-	padding: 0;
-	list-style: none;
-
-	> li {
-		list-style: none;
-		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
-		flex-shrink: 1;
-		width: 75px;
-		text-align: center;
-
-		button {
-			display: inline-flex;
-			margin-right: 0;
-		}
-	}
-
-	.block-editor-block-variation-picker__variation {
-		padding: $grid-unit-10;
-	}
-
-	.block-editor-block-variation-picker__variation-label {
-		font-family: $default-font;
-		font-size: 12px;
-		display: block;
-		line-height: 1.4;
-	}
-}
-
-.block-editor-block-variation-picker__variation {
-	width: 100%;
-
-	&.components-button.has-icon {
-		// Override default styles inherited from <Button /> to center
-		// icon horizontally.
-		justify-content: center;
-		width: auto;
-
-		&.is-secondary {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
-	}
-
-	&:last-child {
-		margin-right: 0;
-	}
-}
diff --git a/packages/block-editor/src/components/block-variation-transforms/README.md b/packages/block-editor/src/components/block-variation-transforms/README.md
index 0eb016d493207a..c9edc9dd1639fe 100644
--- a/packages/block-editor/src/components/block-variation-transforms/README.md
+++ b/packages/block-editor/src/components/block-variation-transforms/README.md
@@ -4,11 +4,6 @@ This component allows to display the selected block's variations which have the
 
 By selecting such a variation an update to the selected block's attributes happen, based on the variation's attributes.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index 4c90009ea00006..f03e72843d4731 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -8,6 +8,8 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItemsChoice,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -19,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function VariationsButtons( {
 	className,
@@ -33,6 +36,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
+					__next40pxDefaultSize
+					size="compact"
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
@@ -40,7 +45,7 @@ function VariationsButtons( {
 						selectedValue === variation.name
 							? variation.title
 							: sprintf(
-									/* translators: %s: Name of the block variation */
+									/* translators: %s: Block or block variation name. */
 									__( 'Transform to %s' ),
 									variation.title
 							  )
@@ -95,21 +100,69 @@ function VariationsDropdown( {
 	);
 }
 
+function VariationsToggleGroupControl( {
+	className,
+	onSelectVariation,
+	selectedValue,
+	variations,
+} ) {
+	return (
+		<div className={ className }>
+			<ToggleGroupControl
+				label={ __( 'Transform to variation' ) }
+				value={ selectedValue }
+				hideLabelFromVision
+				onChange={ onSelectVariation }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+			>
+				{ variations.map( ( variation ) => (
+					<ToggleGroupControlOptionIcon
+						key={ variation.name }
+						icon={
+							<BlockIcon icon={ variation.icon } showColors />
+						}
+						value={ variation.name }
+						label={
+							selectedValue === variation.name
+								? variation.title
+								: sprintf(
+										/* translators: %s: Block or block variation name. */
+										__( 'Transform to %s' ),
+										variation.title
+								  )
+						}
+					/>
+				) ) }
+			</ToggleGroupControl>
+		</div>
+	);
+}
+
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations } = useSelect(
+	const { activeBlockVariation, variations, isContentOnly } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const { getBlockName, getBlockAttributes } =
+
+			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
 				select( blockEditorStore );
+
 			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
 			return {
 				activeBlockVariation: getActiveBlockVariation(
 					name,
 					getBlockAttributes( blockClientId )
 				),
 				variations: name && getBlockVariations( name, 'transform' ),
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
 			};
 		},
 		[ blockClientId ]
@@ -138,12 +191,20 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
+	if ( ! variations?.length || isContentOnly ) {
+		return null;
+	}
+
 	const baseClass = 'block-editor-block-variation-transforms';
 
-	// Skip rendering if there are no variations
-	if ( ! variations?.length ) return null;
+	// Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
+	const showButtons = variations.length > 5;
+
+	const ButtonComponent = showButtons
+		? VariationsButtons
+		: VariationsToggleGroupControl;
 
-	const Component = hasUniqueIcons ? VariationsButtons : VariationsDropdown;
+	const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
 
 	return (
 		<Component
diff --git a/packages/block-editor/src/components/block-variation-transforms/style.scss b/packages/block-editor/src/components/block-variation-transforms/style.scss
index b828bc6020bfbe..b8d2a1d4649fa0 100644
--- a/packages/block-editor/src/components/block-variation-transforms/style.scss
+++ b/packages/block-editor/src/components/block-variation-transforms/style.scss
@@ -3,8 +3,8 @@
 	width: 100%;
 
 	.components-dropdown-menu__toggle {
-		border: 1px solid $gray-700;
-		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-700;
+		border-radius: $radius-small;
 		min-height: 30px;
 		width: 100%;
 		position: relative;
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/icons.js b/packages/block-editor/src/components/block-vertical-alignment-control/icons.js
deleted file mode 100644
index 14c68957b9e6a1..00000000000000
--- a/packages/block-editor/src/components/block-vertical-alignment-control/icons.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export const alignBottom = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z" />
-	</SVG>
-);
-
-export const alignCenter = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
-	</SVG>
-);
-
-export const alignTop = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
-	</SVG>
-);
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
index e58d9a264310a7..e8ad6cddbba56e 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
@@ -42,7 +42,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align top"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align middle"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
       <button
         aria-label="Align bottom"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
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..74c21cd100e7e2 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
@@ -41,9 +41,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 	} );
 
 	test( 'should expand controls when toggled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<BlockVerticalAlignmentUI
@@ -76,9 +74,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 	} );
 
 	it( 'should call onChange with undefined, when the control is already active', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockVerticalAlignmentUI
@@ -102,9 +98,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 	it( 'should call onChange with alignment value when the control is inactive', async () => {
 		// note "middle" alias for "center"
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<BlockVerticalAlignmentUI
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 3a243da1b95728..26340aa9179d82 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -3,34 +3,40 @@
  */
 import { _x } from '@wordpress/i18n';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { alignTop, alignCenter, alignBottom } from './icons';
+import {
+	justifyTop,
+	justifyCenterVertical,
+	justifyBottom,
+	justifyStretchVertical,
+	justifySpaceBetweenVertical,
+} from '@wordpress/icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	top: {
-		icon: alignTop,
+		icon: justifyTop,
 		title: _x( 'Align top', 'Block vertical alignment setting' ),
 	},
 	center: {
-		icon: alignCenter,
+		icon: justifyCenterVertical,
 		title: _x( 'Align middle', 'Block vertical alignment setting' ),
 	},
 	bottom: {
-		icon: alignBottom,
+		icon: justifyBottom,
 		title: _x( 'Align bottom', 'Block vertical alignment setting' ),
 	},
+	stretch: {
+		icon: justifyStretchVertical,
+		title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
+	},
+	'space-between': {
+		icon: justifySpaceBetweenVertical,
+		title: _x( 'Space between', 'Block vertical alignment setting' ),
+	},
 };
 
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
-const POPOVER_PROPS = {
-	variant: 'toolbar',
-};
-
 function BlockVerticalAlignmentUI( {
 	value,
 	onChange,
@@ -47,9 +53,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: { popoverProps: { POPOVER_PROPS } };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent
diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
index 27256f03547f03..14abf3c6c2bc94 100644
--- a/packages/block-editor/src/components/border-radius-control/all-input-control.js
+++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -61,7 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
-			size={ '__unstable-large' }
+			size="__unstable-large"
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js
index 8754d39ac570f4..cab9b87b3b29c0 100644
--- a/packages/block-editor/src/components/border-radius-control/index.js
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import LinkedButton from './linked-button';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import {
 	getAllValue,
 	getAllUnit,
@@ -44,7 +44,7 @@ const MAX_BORDER_RADIUS_VALUES = {
  * @param {Function} props.onChange Callback to handle onChange.
  * @param {Object}   props.values   Border radius values.
  *
- * @return {WPElement}              Custom border radius control.
+ * @return {Element}              Custom border radius control.
  */
 export default function BorderRadiusControl( { onChange, values } ) {
 	const [ isLinked, setIsLinked ] = useState(
@@ -67,8 +67,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		)[ 1 ],
 	} );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
 	const unit = getAllUnit( selectedUnits );
@@ -103,6 +104,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							__next40pxDefaultSize
 							label={ __( 'Border radius' ) }
 							hideLabelFromVision
 							className="components-border-radius-control__range-control"
diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
index b33b79a482435f..4529c00b997ac7 100644
--- a/packages/block-editor/src/components/border-radius-control/input-controls.js
+++ b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -68,7 +68,7 @@ export default function BoxInputControls( {
 					: selectedUnits[ corner ] || selectedUnits.flat;
 
 				return (
-					<Tooltip text={ label } position="top" key={ corner }>
+					<Tooltip text={ label } placement="top" key={ corner }>
 						<div className="components-border-radius-control__tooltip-wrapper">
 							<UnitControl
 								{ ...props }
@@ -80,7 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
-								size={ '__unstable-large' }
+								size="__unstable-large"
 							/>
 						</div>
 					</Tooltip>
diff --git a/packages/block-editor/src/components/border-radius-control/linked-button.js b/packages/block-editor/src/components/border-radius-control/linked-button.js
index b4142d5286453e..58afe350b72126 100644
--- a/packages/block-editor/src/components/border-radius-control/linked-button.js
+++ b/packages/block-editor/src/components/border-radius-control/linked-button.js
@@ -1,26 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink radii' ) : __( 'Link radii' );
 
-	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
-		<Tooltip text={ label }>
-			<span>
-				<Button
-					{ ...props }
-					className="component-border-radius-control__linked-button"
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-				/>
-			</span>
-		</Tooltip>
+		<Button
+			{ ...props }
+			className="component-border-radius-control__linked-button"
+			size="small"
+			icon={ isLinked ? link : linkOff }
+			iconSize={ 24 }
+			label={ label }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
index c94dfbbd0a8fdb..18360cf3162ab1 100644
--- a/packages/block-editor/src/components/border-radius-control/style.scss
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -20,16 +20,6 @@
 		.components-border-radius-control__range-control {
 			flex: 1;
 			margin-right: $grid-unit-15;
-
-			> div {
-				height: 40px;
-				display: flex;
-				align-items: center;
-			}
-		}
-
-		> span {
-			flex: 0 0 auto;
 		}
 	}
 
diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss
new file mode 100644
index 00000000000000..f5486d3f6f6086
--- /dev/null
+++ b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -0,0 +1,88 @@
+.block-editor-button-block-appender {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: auto;
+	color: $gray-900;
+	box-shadow: inset 0 0 0 $border-width $gray-900;
+
+	.is-dark-theme & {
+		color: $light-gray-placeholder;
+		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
+	}
+
+	&:hover {
+		color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+
+	&:focus {
+		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+	}
+
+	&:active {
+		color: $black;
+	}
+}
+
+
+// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
+.block-list-appender:only-child {
+	// One level of nesting
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
+	// Legacy groups have an inner container so need to be targeted separately
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
+		pointer-events: none;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			pointer-events: none;
+			border: $border-width dashed currentColor;
+		}
+
+		.block-editor-inserter {
+			opacity: 0;
+
+			&:focus-within {
+				opacity: 1;
+			}
+		}
+
+		&.is-drag-over {
+			&::after {
+				border: none;
+			}
+
+			.block-editor-inserter {
+				visibility: visible;
+			}
+		}
+	}
+
+	// Hide the dashed outline in 2-level nested cases, so for example the dashed
+	// empty column is only shown when the columns block is selected.
+	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
+		border: none;
+	}
+
+	// Drop zone.
+	&.is-drag-over .block-editor-button-block-appender {
+		background-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
+		color: $light-gray-placeholder;
+		transition: background-color 0.2s ease-in-out;
+
+		@media ( prefers-reduced-motion: reduce ) {
+			transition: none;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index a1b568c99474ac..53b15e2fd2cfdd 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { forwardRef, useRef } from '@wordpress/element';
 import { _x, sprintf } from '@wordpress/i18n';
 import { Icon, plus } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,16 +16,26 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Inserter from '../inserter';
+import { useMergeRefs } from '@wordpress/compose';
 
 function ButtonBlockAppender(
-	{ rootClientId, className, onFocus, tabIndex },
+	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
+	const inserterButtonRef = useRef();
+
+	const mergedInserterButtonRef = useMergeRefs( [ inserterButtonRef, ref ] );
 	return (
 		<Inserter
 			position="bottom center"
 			rootClientId={ rootClientId }
 			__experimentalIsQuick
+			onSelectOrClose={ ( ...args ) => {
+				if ( onSelect && typeof onSelect === 'function' ) {
+					onSelect( ...args );
+				}
+				inserterButtonRef.current?.focus();
+			} }
 			renderToggle={ ( {
 				onToggle,
 				disabled,
@@ -33,49 +43,43 @@ function ButtonBlockAppender(
 				blockTitle,
 				hasSingleBlockType,
 			} ) => {
-				let label;
-				if ( hasSingleBlockType ) {
-					label = sprintf(
-						// translators: %s: the name of the block when there is only one
-						_x( 'Add %s', 'directly add the only allowed block' ),
-						blockTitle
-					);
-				} else {
-					label = _x(
-						'Add block',
-						'Generic label for block inserter button'
-					);
-				}
 				const isToggleButton = ! hasSingleBlockType;
+				const label = hasSingleBlockType
+					? sprintf(
+							// translators: %s: the name of the block when there is only one
+							_x(
+								'Add %s',
+								'directly add the only allowed block'
+							),
+							blockTitle
+					  )
+					: _x(
+							'Add block',
+							'Generic label for block inserter button'
+					  );
 
-				let inserterButton = (
+				return (
 					<Button
-						ref={ ref }
+						__next40pxDefaultSize
+						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
-						className={ classnames(
+						className={ clsx(
 							className,
 							'block-editor-button-block-appender'
 						) }
 						onClick={ onToggle }
 						aria-haspopup={ isToggleButton ? 'true' : undefined }
 						aria-expanded={ isToggleButton ? isOpen : undefined }
+						// Disable reason: There shouldn't be a case where this button is disabled but not visually hidden.
+						// eslint-disable-next-line no-restricted-syntax
 						disabled={ disabled }
 						label={ label }
+						showTooltip
 					>
-						{ ! hasSingleBlockType && (
-							<VisuallyHidden as="span">{ label }</VisuallyHidden>
-						) }
 						<Icon icon={ plus } />
 					</Button>
 				);
-
-				if ( isToggleButton || hasSingleBlockType ) {
-					inserterButton = (
-						<Tooltip text={ label }>{ inserterButton }</Tooltip>
-					);
-				}
-				return inserterButton;
 			} }
 			isAppender
 		/>
diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
index ff6391278d0a0b..ba510d07af659b 100644
--- a/packages/block-editor/src/components/button-block-appender/index.native.js
+++ b/packages/block-editor/src/components/button-block-appender/index.native.js
@@ -9,6 +9,7 @@ import { View } from 'react-native';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,20 @@ function ButtonBlockAppender( {
 	isFloating = false,
 	onAddBlock,
 } ) {
+	const onAppenderPress = useCallback(
+		( onToggle ) => () => {
+			if ( onAddBlock ) {
+				onAddBlock();
+				return;
+			}
+
+			if ( onToggle ) {
+				onToggle();
+			}
+		},
+		[ onAddBlock ]
+	);
+
 	const appenderStyle = {
 		...styles.appender,
 		...getStylesFromColorScheme(
@@ -44,7 +59,7 @@ function ButtonBlockAppender( {
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
 						testID="appender-button"
-						onClick={ onAddBlock || onToggle }
+						onClick={ onAppenderPress( onToggle ) }
 						aria-expanded={ isOpen }
 						disabled={ disabled }
 						fixedRatio={ false }
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
deleted file mode 100644
index 7db34b7cfbd177..00000000000000
--- a/packages/block-editor/src/components/button-block-appender/style.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.block-editor-button-block-appender {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: auto;
-	color: $gray-900;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
-
-	// Needs specificity to override button styles.
-	&.components-button.components-button {
-		padding: $grid-unit-15;
-	}
-
-	.is-dark-theme & {
-		color: $light-gray-placeholder;
-		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
-	}
-
-	&:hover {
-		color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
-	}
-
-	&:active {
-		color: $black;
-	}
-}
-
-// When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
-.block-list-appender:only-child {
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
-	// Legacy groups have an inner container so need to be targeted separately
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
-		pointer-events: none;
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			pointer-events: none;
-			border: $border-width dashed currentColor;
-			@include placeholder-style();
-		}
-
-		.block-editor-inserter {
-			visibility: hidden;
-		}
-	}
-}
diff --git a/packages/block-editor/src/components/button-block-appender/styles.native.scss b/packages/block-editor/src/components/button-block-appender/styles.native.scss
index 7faa8953a4ef03..7df30b74f8d31f 100644
--- a/packages/block-editor/src/components/button-block-appender/styles.native.scss
+++ b/packages/block-editor/src/components/button-block-appender/styles.native.scss
@@ -3,8 +3,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: 9px;
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: $grid-unit;
+	margin-right: $grid-unit;
 	border-radius: 4px;
 }
 
diff --git a/packages/block-editor/src/components/caption/README.md b/packages/block-editor/src/components/caption/README.md
new file mode 100644
index 00000000000000..c8cf4ebe8701dd
--- /dev/null
+++ b/packages/block-editor/src/components/caption/README.md
@@ -0,0 +1,44 @@
+## Caption
+
+The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...).
+
+This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
+
+## Development guidelines
+
+### Usage
+
+Renders a Caption area:
+
+```jsx
+import { Caption } from '@wordpress/block-editor';
+const BlockCaption = ( {
+	onBlur,
+	onChange,
+	onFocus,
+	isSelected,
+	shouldDisplay,
+	text,
+	insertBlocksAfter,
+} ) => (
+	<View >
+		<Caption
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			shouldDisplay={ shouldDisplay }
+			value={ text }
+			insertBlocksAfter={ insertBlocksAfter }
+		/>
+	</View>
+);
+```
+
+### Props
+
+The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)).
+
+## Related components
+
+Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/caption/index.native.js b/packages/block-editor/src/components/caption/index.native.js
index 6e26fa8ae7d396..3f944ff5aafa73 100644
--- a/packages/block-editor/src/components/caption/index.native.js
+++ b/packages/block-editor/src/components/caption/index.native.js
@@ -44,7 +44,6 @@ const Caption = ( {
 			onChange={ onChange }
 			placeholder={ placeholder }
 			placeholderTextColor={ placeholderTextColor }
-			rootTagsToEliminate={ [ 'p' ] }
 			style={ style }
 			tagName="p"
 			textAlign="center"
@@ -54,7 +53,7 @@ const Caption = ( {
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( 'core/paragraph' ) )
 			}
-			deleteEnter={ true }
+			deleteEnter
 		/>
 	</View>
 );
diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
new file mode 100644
index 00000000000000..022acf2e1074a4
--- /dev/null
+++ b/packages/block-editor/src/components/child-layout-control/index.js
@@ -0,0 +1,356 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+	__experimentalInputControl as InputControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' && orientation === 'horizontal' ) {
+		return __( 'Specify a fixed width.' );
+	} else if ( selfStretch === 'fixed' ) {
+		return __( 'Specify a fixed height.' );
+	}
+	return __( 'Fit contents.' );
+}
+
+/**
+ * Form to edit the child layout value.
+ *
+ * @param {Object}   props                  Props.
+ * @param {Object}   props.value            The child layout value.
+ * @param {Function} props.onChange         Function to update the child layout value.
+ * @param {Object}   props.parentLayout     The parent layout value.
+ *
+ * @param {boolean}  props.isShownByDefault
+ * @param {string}   props.panelId
+ * @return {Element} child layout edit element.
+ */
+export default function ChildLayoutControl( {
+	value: childLayout = {},
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const {
+		type: parentType,
+		default: { type: defaultParentType = 'default' } = {},
+	} = parentLayout ?? {};
+	const parentLayoutType = parentType || defaultParentType;
+
+	if ( parentLayoutType === 'flex' ) {
+		return (
+			<FlexControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	} else if ( parentLayoutType === 'grid' ) {
+		return (
+			<GridControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	}
+
+	return null;
+}
+
+function FlexControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+	const { orientation = 'horizontal' } = parentLayout ?? {};
+	const hasFlexValue = () => !! selfStretch;
+	const flexResetLabel =
+		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const resetFlex = () => {
+		onChange( {
+			selfStretch: undefined,
+			flexSize: undefined,
+		} );
+	};
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 2 }
+			hasValue={ hasFlexValue }
+			label={ flexResetLabel }
+			onDeselect={ resetFlex }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size="__unstable-large"
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					key="fit"
+					value="fit"
+					label={ _x(
+						'Fit',
+						'Intrinsic block width in flex layout'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="fill"
+					value="fill"
+					label={ _x(
+						'Grow',
+						'Block with expanding width in flex layout'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="fixed"
+					value="fixed"
+					label={ _x(
+						'Fixed',
+						'Block with fixed width in flex layout'
+					) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size="__unstable-large"
+					onChange={ ( value ) => {
+						onChange( {
+							selfStretch,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+					label={ flexResetLabel }
+					hideLabelFromVision
+				/>
+			) }
+		</VStack>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}
+
+function GridControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
+	const { columnCount = 3, rowCount } = parentLayout ?? {};
+	const rootClientId = useSelect( ( select ) =>
+		select( blockEditorStore ).getBlockRootClientId( panelId )
+	);
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		rootClientId,
+		columnCount
+	);
+	const hasStartValue = () => !! columnStart || !! rowStart;
+	const hasSpanValue = () => !! columnSpan || !! rowSpan;
+	const resetGridStarts = () => {
+		onChange( {
+			columnStart: undefined,
+			rowStart: undefined,
+		} );
+	};
+	const resetGridSpans = () => {
+		onChange( {
+			columnSpan: undefined,
+			rowSpan: undefined,
+		} );
+	};
+
+	return (
+		<>
+			<HStack
+				as={ ToolsPanelItem }
+				hasValue={ hasSpanValue }
+				label={ __( 'Grid span' ) }
+				onDeselect={ resetGridSpans }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			>
+				<InputControl
+					size="__unstable-large"
+					label={ __( 'Column span' ) }
+					type="number"
+					onChange={ ( value ) => {
+						// Don't allow unsetting.
+						const newColumnSpan =
+							value === '' ? 1 : parseInt( value, 10 );
+						onChange( {
+							columnStart,
+							rowStart,
+							rowSpan,
+							columnSpan: newColumnSpan,
+						} );
+					} }
+					value={ columnSpan ?? 1 }
+					min={ 1 }
+				/>
+				<InputControl
+					size="__unstable-large"
+					label={ __( 'Row span' ) }
+					type="number"
+					onChange={ ( value ) => {
+						// Don't allow unsetting.
+						const newRowSpan =
+							value === '' ? 1 : parseInt( value, 10 );
+						onChange( {
+							columnStart,
+							rowStart,
+							columnSpan,
+							rowSpan: newRowSpan,
+						} );
+					} }
+					value={ rowSpan ?? 1 }
+					min={ 1 }
+				/>
+			</HStack>
+			{ window.__experimentalEnableGridInteractivity && columnCount && (
+				// Use Flex with an explicit width on the FlexItem instead of HStack to
+				// work around an issue in webkit where inputs with a max attribute are
+				// sized incorrectly.
+				<Flex
+					as={ ToolsPanelItem }
+					hasValue={ hasStartValue }
+					label={ __( 'Grid placement' ) }
+					onDeselect={ resetGridStarts }
+					isShownByDefault={ false }
+					panelId={ panelId }
+				>
+					<FlexItem style={ { width: '50%' } }>
+						<InputControl
+							size="__unstable-large"
+							label={ __( 'Column' ) }
+							type="number"
+							onChange={ ( value ) => {
+								// Don't allow unsetting.
+								const newColumnStart =
+									value === '' ? 1 : parseInt( value, 10 );
+								onChange( {
+									columnStart: newColumnStart,
+									rowStart,
+									columnSpan,
+									rowSpan,
+								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										newColumnStart,
+										rowStart
+									)
+								);
+							} }
+							value={ columnStart ?? 1 }
+							min={ 1 }
+							max={
+								columnCount
+									? columnCount - ( columnSpan ?? 1 ) + 1
+									: undefined
+							}
+						/>
+					</FlexItem>
+					<FlexItem style={ { width: '50%' } }>
+						<InputControl
+							size="__unstable-large"
+							label={ __( 'Row' ) }
+							type="number"
+							onChange={ ( value ) => {
+								// Don't allow unsetting.
+								const newRowStart =
+									value === '' ? 1 : parseInt( value, 10 );
+								onChange( {
+									columnStart,
+									rowStart: newRowStart,
+									columnSpan,
+									rowSpan,
+								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										columnStart,
+										newRowStart
+									)
+								);
+							} }
+							value={ rowStart ?? 1 }
+							min={ 1 }
+							max={
+								rowCount
+									? rowCount - ( rowSpan ?? 1 ) + 1
+									: undefined
+							}
+						/>
+					</FlexItem>
+				</Flex>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/collab/block-comment-icon-slot.js b/packages/block-editor/src/components/collab/block-comment-icon-slot.js
new file mode 100644
index 00000000000000..bcf8c5f5ff0c5b
--- /dev/null
+++ b/packages/block-editor/src/components/collab/block-comment-icon-slot.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const CommentIconSlotFill = createSlotFill( Symbol( 'CommentIconSlotFill' ) );
+
+export default CommentIconSlotFill;
diff --git a/packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js b/packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js
new file mode 100644
index 00000000000000..056b9a2623262f
--- /dev/null
+++ b/packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const CommentIconToolbarSlotFill = createSlotFill(
+	Symbol( 'CommentIconToolbarSlotFill' )
+);
+
+export default CommentIconToolbarSlotFill;
diff --git a/packages/block-editor/src/components/color-palette/control.js b/packages/block-editor/src/components/color-palette/control.js
index 397c2d85494d06..5b492100adbb86 100644
--- a/packages/block-editor/src/components/color-palette/control.js
+++ b/packages/block-editor/src/components/color-palette/control.js
@@ -14,7 +14,7 @@ export default function ColorPaletteControl( {
 			onColorChange={ onChange }
 			colorValue={ value }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index ddc08d9985fbbc..14196a221304bc 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -22,17 +22,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-4>* {
@@ -44,7 +45,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
@@ -54,17 +55,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-8>* {
@@ -76,45 +78,52 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-10>* {
-  min-width: 0;
+  min-height: 0;
 }
 
-.emotion-13 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-12 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 0.5);
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+
+.emotion-12>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-15 {
+.emotion-14 {
   display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 <div>
@@ -155,67 +164,90 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 class="components-dropdown"
                 tabindex="-1"
               >
-                <button
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                <div
+                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="Flex"
-                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+                  data-wp-component="VStack"
                 >
-                  <span
-                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                    data-wp-c16t="true"
-                    data-wp-component="FlexItem"
-                  >
-                    red
-                  </span>
-                  <span
-                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
+                    class="components-color-palette__custom-color-button"
+                    style="background: rgb(255, 0, 0);"
+                    type="button"
+                  />
+                  <div
+                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
                     data-wp-c16t="true"
-                    data-wp-component="FlexItem"
+                    data-wp-component="VStack"
                   >
-                    f00
-                  </span>
-                </button>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      red
+                    </span>
+                    <span
+                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      data-wp-c16t="true"
+                      data-wp-component="Truncate"
+                    >
+                      #f00
+                    </span>
+                  </div>
+                </div>
               </div>
               <div
                 class="components-circular-option-picker"
               >
                 <div
-                  class="components-circular-option-picker__swatches"
+                  aria-label="Custom color picker."
+                  id="components-circular-option-picker-0"
+                  role="listbox"
                 >
                   <div
-                    class="components-circular-option-picker__option-wrapper"
+                    class="components-circular-option-picker__swatches"
                   >
-                    <button
-                      aria-label="Color: red"
-                      aria-pressed="true"
-                      class="components-button components-circular-option-picker__option is-pressed"
-                      style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                      type="button"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      fill="#000"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="components-circular-option-picker__option-group components-circular-option-picker__swatches"
                     >
-                      <path
-                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                      />
-                    </svg>
+                      <div
+                        class="components-circular-option-picker__option-wrapper"
+                      >
+                        <button
+                          aria-label="Color: red"
+                          aria-selected="true"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
+                          data-active-item="true"
+                          id="components-circular-option-picker-0-0"
+                          role="option"
+                          style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+                          type="button"
+                        />
+                        <svg
+                          aria-hidden="true"
+                          fill="#000"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear
diff --git a/packages/block-editor/src/components/color-palette/test/control.js b/packages/block-editor/src/components/color-palette/test/control.js
index 3a5dcc657a94c4..e1a5529544f791 100644
--- a/packages/block-editor/src/components/color-palette/test/control.js
+++ b/packages/block-editor/src/components/color-palette/test/control.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, waitFor, queryByAttribute } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,22 @@ import ColorPaletteControl from '../control';
 
 const noop = () => {};
 
+async function renderAndValidate( ...renderArgs ) {
+	const view = render( ...renderArgs );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
-		const { container } = render(
+		const { container } = await renderAndValidate(
 			<ColorPaletteControl
 				label="Test Color"
 				value="#f00"
diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js
index 85bff66fa23d3a..38c90531edaac1 100644
--- a/packages/block-editor/src/components/color-palette/with-color-context.js
+++ b/packages/block-editor/src/components/color-palette/with-color-context.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,19 +6,38 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const colorsFeature = useSetting( 'color.palette' );
-		const disableCustomColorsFeature = ! useSetting( 'color.custom' );
-		const colors =
-			props.colors === undefined ? colorsFeature : props.colors;
-		const disableCustomColors =
-			props.disableCustomColors === undefined
-				? disableCustomColorsFeature
-				: props.disableCustomColors;
-		const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;
+		// Get the default colors, theme colors, and custom colors
+		const [
+			defaultColors,
+			themeColors,
+			customColors,
+			enableCustomColors,
+			enableDefaultColors,
+		] = useSettings(
+			'color.palette.default',
+			'color.palette.theme',
+			'color.palette.custom',
+			'color.custom',
+			'color.defaultPalette'
+		);
+
+		const _colors = enableDefaultColors
+			? [
+					...( themeColors || [] ),
+					...( defaultColors || [] ),
+					...( customColors || [] ),
+			  ]
+			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
+
+		const { colors = _colors, disableCustomColors = ! enableCustomColors } =
+			props;
+
+		const hasColorsToChoose =
+			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (
 			<WrappedComponent
 				{ ...{
diff --git a/packages/block-editor/src/components/color-style-selector/index.js b/packages/block-editor/src/components/color-style-selector/index.js
index 40f2a7276a4697..4a76a1da8369e2 100644
--- a/packages/block-editor/src/components/color-style-selector/index.js
+++ b/packages/block-editor/src/components/color-style-selector/index.js
@@ -13,7 +13,7 @@ import { DOWN } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
 		<Path d="M7.434 5l3.18 9.16H8.538l-.692-2.184H4.628l-.705 2.184H2L5.18 5h2.254zm-1.13 1.904h-.115l-1.148 3.593H7.44L6.304 6.904zM14.348 7.006c1.853 0 2.9.876 2.9 2.374v4.78h-1.79v-.914h-.114c-.362.64-1.123 1.022-2.031 1.022-1.346 0-2.292-.826-2.292-2.108 0-1.27.972-2.006 2.71-2.107l1.696-.102V9.38c0-.584-.42-.914-1.18-.914-.667 0-1.112.228-1.264.647h-1.701c.12-1.295 1.307-2.107 3.066-2.107zm1.079 4.1l-1.416.09c-.793.056-1.18.342-1.18.844 0 .52.45.837 1.091.837.857 0 1.505-.545 1.505-1.256v-.515z" />
 	</SVG>
 );
@@ -87,7 +87,7 @@ const BlockColorsStyleSelector = ( { children, ...other } ) => {
 
 	return (
 		<Dropdown
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			className="block-library-colors-selector"
 			contentClassName="block-library-colors-selector__popover"
 			renderToggle={ renderToggleComponent( other ) }
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 685adea3a664d6..d6b34876c8eaad 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -1,25 +1,27 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
-	TabPanel,
 	ColorPalette,
 	GradientPicker,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
 
+const { Tabs } = unlock( componentsPrivateApis );
 const colorsAndGradientKeys = [
 	'colors',
 	'disableCustomColors',
@@ -27,25 +29,13 @@ const colorsAndGradientKeys = [
 	'disableCustomGradients',
 ];
 
-const TAB_COLOR = {
-	name: 'color',
-	title: 'Solid',
-	value: 'color',
-};
-const TAB_GRADIENT = {
-	name: 'gradient',
-	title: 'Gradient',
-	value: 'gradient',
-};
-
-const TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];
+const TAB_IDS = { color: 'color', gradient: 'gradient' };
 
 function ColorGradientControlInner( {
 	colors,
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	className,
 	label,
@@ -56,19 +46,21 @@ function ColorGradientControlInner( {
 	clearable,
 	showTitle = true,
 	enableAlpha,
+	headingLevel,
 } ) {
 	const canChooseAColor =
-		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
+		onColorChange &&
+		( ( colors && colors.length > 0 ) || ! disableCustomColors );
 	const canChooseAGradient =
 		onGradientChange &&
-		( ! isEmpty( gradients ) || ! disableCustomGradients );
+		( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );
 
 	if ( ! canChooseAColor && ! canChooseAGradient ) {
 		return null;
 	}
 
 	const tabPanels = {
-		[ TAB_COLOR.value ]: (
+		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
 				onChange={
@@ -80,19 +72,16 @@ function ColorGradientControlInner( {
 						: onColorChange
 				}
 				{ ...{ colors, disableCustomColors } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
 				clearable={ clearable }
 				enableAlpha={ enableAlpha }
+				headingLevel={ headingLevel }
 			/>
 		),
-		[ TAB_GRADIENT.value ]: (
+		[ TAB_IDS.gradient ]: (
 			<GradientPicker
-				__nextHasNoMargin
 				value={ gradientValue }
 				onChange={
 					canChooseAColor
@@ -103,13 +92,11 @@ function ColorGradientControlInner( {
 						: onGradientChange
 				}
 				{ ...{ gradients, disableCustomGradients } }
-				__experimentalHasMultipleOrigins={
-					__experimentalHasMultipleOrigins
-				}
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
 				}
 				clearable={ clearable }
+				headingLevel={ headingLevel }
 			/>
 		),
 	};
@@ -123,7 +110,7 @@ function ColorGradientControlInner( {
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
-			className={ classnames(
+			className={ clsx(
 				'block-editor-color-gradient-control',
 				className
 			) }
@@ -140,22 +127,42 @@ function ColorGradientControlInner( {
 						</legend>
 					) }
 					{ canChooseAColor && canChooseAGradient && (
-						<TabPanel
-							className="block-editor-color-gradient-control__tabs"
-							tabs={ TABS_SETTINGS }
-							initialTabName={
-								gradientValue
-									? TAB_GRADIENT.value
-									: !! canChooseAColor && TAB_COLOR.value
-							}
-						>
-							{ ( tab ) => renderPanelType( tab.value ) }
-						</TabPanel>
+						<div>
+							<Tabs
+								defaultTabId={
+									gradientValue
+										? TAB_IDS.gradient
+										: !! canChooseAColor && TAB_IDS.color
+								}
+							>
+								<Tabs.TabList>
+									<Tabs.Tab tabId={ TAB_IDS.color }>
+										{ __( 'Color' ) }
+									</Tabs.Tab>
+									<Tabs.Tab tabId={ TAB_IDS.gradient }>
+										{ __( 'Gradient' ) }
+									</Tabs.Tab>
+								</Tabs.TabList>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.color }
+									className="block-editor-color-gradient-control__panel"
+									focusable={ false }
+								>
+									{ tabPanels.color }
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									tabId={ TAB_IDS.gradient }
+									className="block-editor-color-gradient-control__panel"
+									focusable={ false }
+								>
+									{ tabPanels.gradient }
+								</Tabs.TabPanel>
+							</Tabs>
+						</div>
 					) }
-					{ ! canChooseAGradient &&
-						renderPanelType( TAB_COLOR.value ) }
-					{ ! canChooseAColor &&
-						renderPanelType( TAB_GRADIENT.value ) }
+
+					{ ! canChooseAGradient && renderPanelType( TAB_IDS.color ) }
+					{ ! canChooseAColor && renderPanelType( TAB_IDS.gradient ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>
@@ -163,17 +170,20 @@ function ColorGradientControlInner( {
 }
 
 function ColorGradientControlSelect( props ) {
-	const colorGradientSettings = {};
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
+	const [ colors, gradients, customColors, customGradients ] = useSettings(
+		'color.palette',
+		'color.gradients',
+		'color.custom',
 		'color.customGradient'
 	);
 
 	return (
 		<ColorGradientControlInner
-			{ ...{ ...colorGradientSettings, ...props } }
+			colors={ colors }
+			gradients={ gradients }
+			disableCustomColors={ ! customColors }
+			disableCustomGradients={ ! customGradients }
+			{ ...props }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 9c13efba03cdbb..71b27c06e7ccfc 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ const renderToggle =
 
 		const toggleProps = {
 			onClick: onToggle,
-			className: classnames(
+			className: clsx(
 				'block-editor-panel-color-gradient-settings__dropdown',
 				{ 'is-open': isOpen }
 			),
@@ -88,7 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button { ...toggleProps }>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }
@@ -111,7 +111,6 @@ export default function ColorGradientSettingsDropdown( {
 	enableAlpha,
 	gradients,
 	settings,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
@@ -140,7 +139,6 @@ export default function ColorGradientSettingsDropdown( {
 					onColorChange: setting.onColorChange,
 					onGradientChange: setting.onGradientChange,
 					showTitle: false,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					...setting,
 				};
diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
index a69a53e549902a..4e581046585663 100644
--- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
+++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,9 +17,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import ColorGradientSettingsDropdown from './dropdown';
-import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
+import useColorsAndGradientsPalettes from './use-multiple-origin-colors-and-gradients';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -39,21 +36,20 @@ export const PanelColorGradientSettingsInner = ( {
 	settings,
 	title,
 	showTitle = true,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 	enableAlpha,
 } ) => {
 	const panelId = useInstanceId( PanelColorGradientSettingsInner );
 	const { batch } = useRegistry();
 	if (
-		isEmpty( colors ) &&
-		isEmpty( gradients ) &&
+		( ! colors || colors.length === 0 ) &&
+		( ! gradients || gradients.length === 0 ) &&
 		disableCustomColors &&
 		disableCustomGradients &&
 		settings?.every(
 			( setting ) =>
-				isEmpty( setting.colors ) &&
-				isEmpty( setting.gradients ) &&
+				( ! setting.colors || setting.colors.length === 0 ) &&
+				( ! setting.gradients || setting.gradients.length === 0 ) &&
 				( setting.disableCustomColors === undefined ||
 					setting.disableCustomColors ) &&
 				( setting.disableCustomGradients === undefined ||
@@ -65,7 +61,7 @@ export const PanelColorGradientSettingsInner = ( {
 
 	return (
 		<ToolsPanel
-			className={ classnames(
+			className={ clsx(
 				'block-editor-panel-color-gradient-settings',
 				className
 			) }
@@ -100,7 +96,6 @@ export const PanelColorGradientSettingsInner = ( {
 					gradients,
 					disableCustomColors,
 					disableCustomGradients,
-					__experimentalHasMultipleOrigins,
 					__experimentalIsRenderedInSidebar,
 					enableAlpha,
 				} }
@@ -114,19 +109,8 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSingleSelect = ( props ) => {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	return (
-		<PanelColorGradientSettingsInner
-			{ ...{ ...colorGradientSettings, ...props } }
-		/>
-	);
-};
-
-const PanelColorGradientSettingsMultipleSelect = ( props ) => {
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+const PanelColorGradientSettingsSelect = ( props ) => {
+	const colorGradientSettings = useColorsAndGradientsPalettes();
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -140,10 +124,7 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	if ( props.__experimentalHasMultipleOrigins ) {
-		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
-	}
-	return <PanelColorGradientSettingsSingleSelect { ...props } />;
+	return <PanelColorGradientSettingsSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 5d86252105acfe..fc1b1a4d469033 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -15,12 +15,6 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
-.block-editor-color-gradient-control__tabs {
-	.block-editor-color-gradient-control__panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -33,7 +27,6 @@ $swatch-gap: 12px;
 		.components-circular-option-picker__swatches {
 			display: grid;
 			grid-template-columns: repeat(6, $swatch-size);
-			justify-content: space-between;
 		}
 	}
 
@@ -73,20 +66,22 @@ $swatch-gap: 12px;
 	max-width: 100%;
 
 	// Border styles.
-	border-left: 1px solid rgba(0, 0, 0, 0.1);
-	border-right: 1px solid rgba(0, 0, 0, 0.1);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-left: 1px solid $gray-300;
+	border-right: 1px solid $gray-300;
+	border-bottom: 1px solid $gray-300;
 
-	&.first {
+	// Identify the first visible instance as placeholder items will not have this class.
+	&:nth-child(1 of &) {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: 2px;
-		border-top-right-radius: 2px;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-top-left-radius: $radius-small;
+		border-top-right-radius: $radius-small;
+		border-top: 1px solid $gray-300;
 	}
 
-	&.last {
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+	// Identify the last visible instance as placeholder items will not have this class.
+	&:nth-last-child(1 of &) {
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
 	}
 
 	> div,
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index 3c6e4a77b57413..19640d41daeb35 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
@@ -12,7 +13,7 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		render(
+		await render(
 			<ColorGradientControl
 				label="Test Color Gradient"
 				colorValue="#f00"
@@ -43,7 +44,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid' } )
+			screen.getByRole( 'tab', { name: 'Color' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -64,7 +65,7 @@ describe( 'ColorPaletteControl', () => {
 				] }
 				gradients={ [] }
 				disableCustomColors={ false }
-				disableCustomGradients={ true }
+				disableCustomGradients
 				onColorChange={ noop }
 				onGradientChange={ noop }
 			/>
@@ -72,7 +73,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -102,7 +103,7 @@ describe( 'ColorPaletteControl', () => {
 						slug: 'light-green-cyan-to-vivid-green-cyan',
 					},
 				] }
-				disableCustomColors={ true }
+				disableCustomColors
 				disableCustomGradients={ false }
 				onColorChange={ noop }
 				onGradientChange={ noop }
@@ -111,7 +112,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid' } )
+			screen.queryByRole( 'tab', { name: 'Color' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
deleted file mode 100644
index 6a538a33de44e7..00000000000000
--- a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import useSetting from '../use-setting';
-
-export default function useCommonSingleMultipleSelects() {
-	return {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
-	};
-}
diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
index ca3ecc26446358..cfa5930ba7034c 100644
--- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
+++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
@@ -7,8 +7,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
-import useCommonSingleMultipleSelects from './use-common-single-multiple-selects';
+import { useSettings } from '../use-settings';
 
 /**
  * Retrieves color and gradient related settings.
@@ -19,11 +18,34 @@ import useCommonSingleMultipleSelects from './use-common-single-multiple-selects
  * @return {Object} Color and gradient related settings.
  */
 export default function useMultipleOriginColorsAndGradients() {
-	const colorGradientSettings = useCommonSingleMultipleSelects();
-	const customColors = useSetting( 'color.palette.custom' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const defaultColors = useSetting( 'color.palette.default' );
-	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
+	const [
+		enableCustomColors,
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+		enableCustomGradients,
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] = useSettings(
+		'color.custom',
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette',
+		'color.customGradient',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default',
+		'color.defaultGradients'
+	);
+
+	const colorGradientSettings = {
+		disableCustomColors: ! enableCustomColors,
+		disableCustomGradients: ! enableCustomGradients,
+	};
 
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
@@ -33,6 +55,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				colors: themeColors,
 			} );
 		}
@@ -46,6 +69,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				colors: defaultColors,
 			} );
 		}
@@ -53,20 +77,20 @@ export default function useMultipleOriginColorsAndGradients() {
 			result.push( {
 				name: _x(
 					'Custom',
-					'Indicates this palette comes from the theme.'
+					'Indicates this palette is created by the user.'
 				),
+				slug: 'custom',
 				colors: customColors,
 			} );
 		}
 		return result;
-	}, [ defaultColors, themeColors, customColors ] );
+	}, [
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+	] );
 
-	const customGradients = useSetting( 'color.gradients.custom' );
-	const themeGradients = useSetting( 'color.gradients.theme' );
-	const defaultGradients = useSetting( 'color.gradients.default' );
-	const shouldDisplayDefaultGradients = useSetting(
-		'color.defaultGradients'
-	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
 		if ( themeGradients && themeGradients.length ) {
@@ -75,6 +99,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Theme',
 					'Indicates this palette comes from the theme.'
 				),
+				slug: 'theme',
 				gradients: themeGradients,
 			} );
 		}
@@ -88,6 +113,7 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Default',
 					'Indicates this palette comes from WordPress.'
 				),
+				slug: 'default',
 				gradients: defaultGradients,
 			} );
 		}
@@ -97,11 +123,21 @@ export default function useMultipleOriginColorsAndGradients() {
 					'Custom',
 					'Indicates this palette is created by the user.'
 				),
+				slug: 'custom',
 				gradients: customGradients,
 			} );
 		}
 		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+
+	colorGradientSettings.hasColorsOrGradients =
+		!! colorGradientSettings.colors.length ||
+		!! colorGradientSettings.gradients.length;
 
 	return colorGradientSettings;
 }
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..47753a800c9bcb 100644
--- a/packages/block-editor/src/components/colors/test/with-colors.js
+++ b/packages/block-editor/src/components/colors/test/with-colors.js
@@ -42,9 +42,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -74,9 +72,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index e22b5ed8661d36..5ec42a6bae7007 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -1,13 +1,24 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
 
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
 extend( [ namesPlugin, a11yPlugin ] );
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
  * and the values of the defined color or custom color returns a color object describing the color.
@@ -26,7 +37,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 +60,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/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js
index 0444aab3050516..680521fb6519c3 100644
--- a/packages/block-editor/src/components/colors/with-colors.js
+++ b/packages/block-editor/src/components/colors/with-colors.js
@@ -1,13 +1,9 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useMemo, Component } from '@wordpress/element';
 import { compose, createHigherOrderComponent } from '@wordpress/compose';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,7 +14,10 @@ import {
 	getColorObjectByAttributeValues,
 	getMostReadableColor,
 } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
+import { unlock } from '../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Capitalizes the first letter in a string.
@@ -40,8 +39,9 @@ const upperFirst = ( [ firstLetter, ...rest ] ) =>
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) =>
-			<WrappedComponent { ...props } colors={ colorsArray } />,
+		( WrappedComponent ) => ( props ) => (
+			<WrappedComponent { ...props } colors={ colorsArray } />
+		),
 		'withCustomColorPalette'
 	);
 
@@ -54,12 +54,11 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			// Some color settings have a special handling for deprecated flags in `useSetting`,
-			// so we can't unwrap them by doing const { ... } = useSetting('color')
-			// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-			const userPalette = useSetting( 'color.palette.custom' );
-			const themePalette = useSetting( 'color.palette.theme' );
-			const defaultPalette = useSetting( 'color.palette.default' );
+			const [ userPalette, themePalette, defaultPalette ] = useSettings(
+				'color.palette.custom',
+				'color.palette.theme',
+				'color.palette.default'
+			);
 			const allColors = useMemo(
 				() => [
 					...( userPalette || [] ),
@@ -80,7 +79,7 @@ const withEditorColorPalette = () =>
  * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).
  * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.
  *
- * @return {WPComponent} The component that can be used as a HOC.
+ * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {
diff --git a/packages/block-editor/src/components/content-lock/index.js b/packages/block-editor/src/components/content-lock/index.js
new file mode 100644
index 00000000000000..651bf885a7d1e9
--- /dev/null
+++ b/packages/block-editor/src/components/content-lock/index.js
@@ -0,0 +1 @@
+export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';
diff --git a/packages/block-editor/src/components/content-lock/modify-content-lock-menu-item.js b/packages/block-editor/src/components/content-lock/modify-content-lock-menu-item.js
new file mode 100644
index 00000000000000..18c4d0763cd52d
--- /dev/null
+++ b/packages/block-editor/src/components/content-lock/modify-content-lock-menu-item.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
+
+export function ModifyContentLockMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+		( select ) => {
+			const {
+				getContentLockingParent,
+				getTemplateLock,
+				getTemporarilyEditingAsBlocks,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				templateLock: getTemplateLock( clientId ),
+				isLockedByParent: !! getContentLockingParent( clientId ),
+				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ clientId ]
+	);
+	const blockEditorActions = useDispatch( blockEditorStore );
+	const isContentLocked =
+		! isLockedByParent && templateLock === 'contentOnly';
+	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+		return null;
+	}
+
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+	const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked;
+
+	return (
+		showStartEditingAsBlocks && (
+			<MenuItem
+				onClick={ () => {
+					modifyContentLockBlock( clientId );
+					onClose();
+				} }
+			>
+				{ _x( 'Modify', 'Unlock content locked blocks' ) }
+			</MenuItem>
+		)
+	);
+}
diff --git a/packages/block-editor/src/components/contrast-checker/README.md b/packages/block-editor/src/components/contrast-checker/README.md
index 6f3b41ecb7d0cf..cb9d18252a04c9 100644
--- a/packages/block-editor/src/components/contrast-checker/README.md
+++ b/packages/block-editor/src/components/contrast-checker/README.md
@@ -6,10 +6,6 @@ ContrastChecker also accounts for font sizes.
 
 A notice will be rendered if the color combination of text and background colors are low.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Developer guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/contrast-checker/style.scss b/packages/block-editor/src/components/contrast-checker/style.scss
deleted file mode 100644
index b3b08d6230d05d..00000000000000
--- a/packages/block-editor/src/components/contrast-checker/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.block-editor-contrast-checker > .components-notice {
-	margin: 0;
-}
diff --git a/packages/block-editor/src/components/contrast-checker/test/index.js b/packages/block-editor/src/components/contrast-checker/test/index.js
index af5c0b62bbc67e..9abd7d7f7e2e6a 100644
--- a/packages/block-editor/src/components/contrast-checker/test/index.js
+++ b/packages/block-editor/src/components/contrast-checker/test/index.js
@@ -221,7 +221,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -263,7 +263,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor="#C44B4B"
 				textColor="#000000"
 				fontSize={ 23 }
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -363,7 +363,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -375,10 +375,10 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -396,10 +396,10 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ backgroundColor }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -416,11 +416,11 @@ describe( 'ContrastChecker', () => {
 	test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
 		const { container } = render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -437,7 +437,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -450,11 +450,11 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor={ colorWithTransparency }
 				textColor={ sameShade }
-				linkColor={ 'rgba(0,0,0,0.9)' }
+				linkColor="rgba(0,0,0,0.9)"
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -472,12 +472,12 @@ describe( 'ContrastChecker', () => {
 		render(
 			<ContrastChecker
 				backgroundColor={ sameShade }
-				textColor={ 'rgba(0,0,0,0.9)' }
+				textColor="rgba(0,0,0,0.9)"
 				linkColor={ sameShade }
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -494,11 +494,11 @@ describe( 'ContrastChecker', () => {
 	test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
 		render(
 			<ContrastChecker
-				backgroundColor={ 'rgba(255,255,255,0.7)' }
-				linkColor={ 'rgba(0,0,0,0.7)' }
-				textColor={ 'rgba(0,0,0,0.7)' }
+				backgroundColor="rgba(255,255,255,0.7)"
+				linkColor="rgba(0,0,0,0.7)"
+				textColor="rgba(0,0,0,0.7)"
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
diff --git a/packages/block-editor/src/components/convert-to-group-buttons/index.js b/packages/block-editor/src/components/convert-to-group-buttons/index.js
index 233c859bdefb71..d2e5fda1e96b7c 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/index.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/index.js
@@ -4,7 +4,8 @@
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -17,10 +18,12 @@ function ConvertToGroupButton( {
 	clientIds,
 	isGroupable,
 	isUngroupable,
+	onUngroup,
 	blocksSelection,
 	groupingBlockName,
 	onClose = () => {},
 } ) {
+	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
@@ -34,10 +37,16 @@ function ConvertToGroupButton( {
 	};
 
 	const onConvertFromGroup = () => {
-		const innerBlocks = blocksSelection[ 0 ].innerBlocks;
+		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
 		if ( ! innerBlocks.length ) {
 			return;
 		}
+		if ( onUngroup ) {
+			innerBlocks = onUngroup(
+				blocksSelection[ 0 ].attributes,
+				blocksSelection[ 0 ].innerBlocks
+			);
+		}
 		replaceBlocks( clientIds, innerBlocks );
 	};
 
@@ -45,10 +54,17 @@ function ConvertToGroupButton( {
 		return null;
 	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds();
+
 	return (
 		<>
 			{ isGroupable && (
 				<MenuItem
+					shortcut={
+						selectedBlockClientIds.length > 1
+							? displayShortcut.primary( 'g' )
+							: undefined
+					}
 					onClick={ () => {
 						onConvertToGroup();
 						onClose();
@@ -66,7 +82,7 @@ function ConvertToGroupButton( {
 				>
 					{ _x(
 						'Ungroup',
-						'Ungrouping blocks from within a Group block back into individual blocks within the Editor '
+						'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'
 					) }
 				</MenuItem>
 			) }
diff --git a/packages/block-editor/src/components/convert-to-group-buttons/index.native.js b/packages/block-editor/src/components/convert-to-group-buttons/index.native.js
index 461f67a0a4bcbe..1a85d43ff01ed0 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/index.native.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/index.native.js
@@ -1 +1,79 @@
-export default () => null;
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { switchToBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+
+function useConvertToGroupButtons( {
+	clientIds,
+	onUngroup,
+	blocksSelection,
+	groupingBlockName,
+} ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const onConvertToGroup = () => {
+		// Activate the `transform` on the Grouping Block which does the conversion.
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+		if ( newBlocks ) {
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	const onConvertFromGroup = () => {
+		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+		if ( onUngroup ) {
+			innerBlocks = onUngroup(
+				blocksSelection[ 0 ].attributes,
+				blocksSelection[ 0 ].innerBlocks
+			);
+		}
+		replaceBlocks( clientIds, innerBlocks );
+	};
+
+	return {
+		group: {
+			id: 'groupButtonOption',
+			label: _x( 'Group', 'verb' ),
+			value: 'groupButtonOption',
+			onSelect: () => {
+				onConvertToGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is grouped
+					__( 'Block grouped' )
+				);
+			},
+		},
+		ungroup: {
+			id: 'ungroupButtonOption',
+			label: _x(
+				'Ungroup',
+				'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'
+			),
+			value: 'ungroupButtonOption',
+			onSelect: () => {
+				onConvertFromGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is ungrouped.
+					__( 'Block ungrouped' )
+				);
+			},
+		},
+	};
+}
+
+export { useConvertToGroupButtons, useConvertToGroupButtonProps };
diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
index 38405fe3ee6abb..b82205d0c46616 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
@@ -4,7 +4,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -17,6 +17,7 @@ const layouts = {
 	group: { type: 'constrained' },
 	row: { type: 'flex', flexWrap: 'nowrap' },
 	stack: { type: 'flex', orientation: 'vertical' },
+	grid: { type: 'grid' },
 };
 
 function BlockGroupToolbar() {
@@ -60,6 +61,7 @@ function BlockGroupToolbar() {
 
 	const onConvertToRow = () => onConvertToGroup( 'row' );
 	const onConvertToStack = () => onConvertToGroup( 'stack' );
+	const onConvertToGrid = () => onConvertToGroup( 'grid' );
 
 	// Don't render the button if the current selection cannot be grouped.
 	// A good example is selecting multiple button blocks within a Buttons block:
@@ -75,28 +77,38 @@ function BlockGroupToolbar() {
 	const canInsertStack = !! variations.find(
 		( { name } ) => name === 'group-stack'
 	);
+	const canInsertGrid = !! variations.find(
+		( { name } ) => name === 'group-grid'
+	);
 
 	return (
 		<ToolbarGroup>
 			<ToolbarButton
 				icon={ group }
-				label={ _x( 'Group', 'verb' ) }
+				label={ _x( 'Group', 'action: convert blocks to group' ) }
 				onClick={ onConvertToGroup }
 			/>
 			{ canInsertRow && (
 				<ToolbarButton
 					icon={ row }
-					label={ _x( 'Row', 'single horizontal line' ) }
+					label={ _x( 'Row', 'action: convert blocks to row' ) }
 					onClick={ onConvertToRow }
 				/>
 			) }
 			{ canInsertStack && (
 				<ToolbarButton
 					icon={ stack }
-					label={ _x( 'Stack', 'verb' ) }
+					label={ _x( 'Stack', 'action: convert blocks to stack' ) }
 					onClick={ onConvertToStack }
 				/>
 			) }
+			{ canInsertGrid && (
+				<ToolbarButton
+					icon={ grid }
+					label={ _x( 'Grid', 'action: convert blocks to grid' ) }
+					onClick={ onConvertToGrid }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }
diff --git a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
index 9f3a7d908a11ed..5c0aa5dc68fc9f 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
@@ -25,64 +25,41 @@ import { store as blockEditorStore } from '../../store';
  * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
  * should be rendered, to avoid ending up with an empty MenuGroup.
  *
+ * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
+ *                                      from the block editor store are used if this is not provided.
+ *
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
-export default function useConvertToGroupButtonProps() {
-	const {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlocksByClientId,
-			canInsertBlockType,
-			getSelectedBlockClientIds,
-		} = select( blockEditorStore );
-		const { getGroupingBlockName } = select( blocksStore );
-
-		const _clientIds = getSelectedBlockClientIds();
-		const _groupingBlockName = getGroupingBlockName();
-
-		const rootClientId = !! _clientIds?.length
-			? getBlockRootClientId( _clientIds[ 0 ] )
-			: undefined;
-
-		const groupingBlockAvailable = canInsertBlockType(
-			_groupingBlockName,
-			rootClientId
-		);
-
-		const _blocksSelection = getBlocksByClientId( _clientIds );
-
-		const isSingleGroupingBlock =
-			_blocksSelection.length === 1 &&
-			_blocksSelection[ 0 ]?.name === _groupingBlockName;
-
-		// Do we have
-		// 1. Grouping block available to be inserted?
-		// 2. One or more blocks selected
-		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
-
-		// Do we have a single Group Block selected and does that group have inner blocks?
-		const _isUngroupable =
-			isSingleGroupingBlock &&
-			!! _blocksSelection[ 0 ].innerBlocks.length;
-		return {
-			clientIds: _clientIds,
-			isGroupable: _isGroupable,
-			isUngroupable: _isUngroupable,
-			blocksSelection: _blocksSelection,
-			groupingBlockName: _groupingBlockName,
-		};
-	}, [] );
-	return {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	};
+export default function useConvertToGroupButtonProps( selectedClientIds ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getBlocksByClientId,
+				getSelectedBlockClientIds,
+				isUngroupable,
+				isGroupable,
+			} = select( blockEditorStore );
+			const { getGroupingBlockName, getBlockType } =
+				select( blocksStore );
+			const clientIds = selectedClientIds?.length
+				? selectedClientIds
+				: getSelectedBlockClientIds();
+			const blocksSelection = getBlocksByClientId( clientIds );
+			const [ firstSelectedBlock ] = blocksSelection;
+			const _isUngroupable =
+				clientIds.length === 1 && isUngroupable( clientIds[ 0 ] );
+			return {
+				clientIds,
+				isGroupable: isGroupable( clientIds ),
+				isUngroupable: _isUngroupable,
+				blocksSelection,
+				groupingBlockName: getGroupingBlockName(),
+				onUngroup:
+					_isUngroupable &&
+					getBlockType( firstSelectedBlock.name )?.transforms
+						?.ungroup,
+			};
+		},
+		[ selectedClientIds ]
+	);
 }
diff --git a/packages/block-editor/src/components/copy-handler/README.md b/packages/block-editor/src/components/copy-handler/README.md
index 089d1ce0b73f1c..1e9883d9a2b3b3 100644
--- a/packages/block-editor/src/components/copy-handler/README.md
+++ b/packages/block-editor/src/components/copy-handler/README.md
@@ -1,21 +1,13 @@
 # Copy Handler
 
+**Deprecated**
+
 The `CopyHandler` component handles the copy/cut and paste events of its children blocks. It handles multiple selection of blocks as well.
 
 Concretely, it handles the display of success messages and takes care of copying the block to the clipboard. It uses for that the [serialize function](https://github.com/WordPress/gutenberg/blob/HEAD/packages/blocks/src/api/serializer.js), which outputs HTML augmented with the HTML-comment demarcations to denote blocks.
 
 ![Copy/cut behaviours](https://user-images.githubusercontent.com/150562/81698101-6e341d80-945d-11ea-9bfb-b20781f55033.gif)
 
-## Table of contents
-
-- [Copy Handler](#copy-handler)
-	- [Table of contents](#table-of-contents)
-	- [Development guidelines](#development-guidelines)
-		- [Usage](#usage)
-		- [Props](#props)
-		- [`children`](#children)
-	- [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
index 3e5a50a8fe49ea..0b0318c387fab7 100644
--- a/packages/block-editor/src/components/copy-handler/index.js
+++ b/packages/block-editor/src/components/copy-handler/index.js
@@ -1,257 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
-import {
-	serialize,
-	pasteHandler,
-	store as blocksStore,
-	createBlock,
-} from '@wordpress/blocks';
-import {
-	documentHasSelection,
-	documentHasUncollapsedSelection,
-	__unstableStripHTML as stripHTML,
-} from '@wordpress/dom';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useRefEffect } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { getPasteEventData } from '../../utils/pasting';
-import { store as blockEditorStore } from '../../store';
-
-export function useNotifyCopy() {
-	const { getBlockName } = useSelect( blockEditorStore );
-	const { getBlockType } = useSelect( blocksStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	return useCallback( ( eventType, selectedBlockClientIds ) => {
-		let notice = '';
-		if ( selectedBlockClientIds.length === 1 ) {
-			const clientId = selectedBlockClientIds[ 0 ];
-			const title = getBlockType( getBlockName( clientId ) )?.title;
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: Name of the block being copied, e.g. "Paragraph".
-							__( 'Copied "%s" to clipboard.' ),
-							title
-					  )
-					: sprintf(
-							// Translators: Name of the block being cut, e.g. "Paragraph".
-							__( 'Moved "%s" to clipboard.' ),
-							title
-					  );
-		} else {
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: %d: Number of blocks being copied.
-							_n(
-								'Copied %d block to clipboard.',
-								'Copied %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  )
-					: sprintf(
-							// Translators: %d: Number of blocks being cut.
-							_n(
-								'Moved %d block to clipboard.',
-								'Moved %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  );
-		}
-		createSuccessNotice( notice, {
-			type: 'snackbar',
-		} );
-	}, [] );
-}
-
-export function useClipboardHandler() {
-	const {
-		getBlocksByClientId,
-		getSelectedBlockClientIds,
-		hasMultiSelection,
-		getSettings,
-		__unstableIsFullySelected,
-		__unstableIsSelectionCollapsed,
-		__unstableIsSelectionMergeable,
-		__unstableGetSelectedBlocksWithPartialSelection,
-	} = useSelect( blockEditorStore );
-	const {
-		flashBlock,
-		removeBlocks,
-		replaceBlocks,
-		__unstableDeleteSelection,
-		__unstableExpandSelection,
-	} = useDispatch( blockEditorStore );
-	const notifyCopy = useNotifyCopy();
-
-	return useRefEffect( ( node ) => {
-		function handler( event ) {
-			const selectedBlockClientIds = getSelectedBlockClientIds();
-
-			if ( selectedBlockClientIds.length === 0 ) {
-				return;
-			}
-
-			// Always handle multiple selected blocks.
-			if ( ! hasMultiSelection() ) {
-				const { target } = event;
-				const { ownerDocument } = target;
-				// If copying, only consider actual text selection as selection.
-				// Otherwise, any focus on an input field is considered.
-				const hasSelection =
-					event.type === 'copy' || event.type === 'cut'
-						? documentHasUncollapsedSelection( ownerDocument )
-						: documentHasSelection( ownerDocument );
-
-				// Let native copy behaviour take over in input fields.
-				if ( hasSelection ) {
-					return;
-				}
-			}
-
-			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
-				return;
-			}
-
-			const eventDefaultPrevented = event.defaultPrevented;
-			event.preventDefault();
-
-			const isSelectionMergeable = __unstableIsSelectionMergeable();
-			const shouldHandleWholeBlocks =
-				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
-			const expandSelectionIsNeeded =
-				! shouldHandleWholeBlocks && ! isSelectionMergeable;
-			if ( event.type === 'copy' || event.type === 'cut' ) {
-				if ( selectedBlockClientIds.length === 1 ) {
-					flashBlock( selectedBlockClientIds[ 0 ] );
-				}
-				// If we have a partial selection that is not mergeable, just
-				// expand the selection to the whole blocks.
-				if ( expandSelectionIsNeeded ) {
-					__unstableExpandSelection();
-				} else {
-					notifyCopy( event.type, selectedBlockClientIds );
-					let blocks;
-					// Check if we have partial selection.
-					if ( shouldHandleWholeBlocks ) {
-						blocks = getBlocksByClientId( selectedBlockClientIds );
-					} else {
-						const [ head, tail ] =
-							__unstableGetSelectedBlocksWithPartialSelection();
-						const inBetweenBlocks = getBlocksByClientId(
-							selectedBlockClientIds.slice(
-								1,
-								selectedBlockClientIds.length - 1
-							)
-						);
-						blocks = [ head, ...inBetweenBlocks, tail ];
-					}
-
-					const wrapperBlockName = event.clipboardData.getData(
-						'__unstableWrapperBlockName'
-					);
-
-					if ( wrapperBlockName ) {
-						blocks = createBlock(
-							wrapperBlockName,
-							JSON.parse(
-								event.clipboardData.getData(
-									'__unstableWrapperBlockAttributes'
-								)
-							),
-							blocks
-						);
-					}
-
-					const serialized = serialize( blocks );
-
-					event.clipboardData.setData(
-						'text/plain',
-						toPlainText( serialized )
-					);
-					event.clipboardData.setData( 'text/html', serialized );
-				}
-			}
-
-			if ( event.type === 'cut' ) {
-				// We need to also check if at the start we needed to
-				// expand the selection, as in this point we might have
-				// programmatically fully selected the blocks above.
-				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
-					removeBlocks( selectedBlockClientIds );
-				} else {
-					__unstableDeleteSelection();
-				}
-			} else if ( event.type === 'paste' ) {
-				if ( eventDefaultPrevented ) {
-					// This was likely already handled in rich-text/use-paste-handler.js.
-					return;
-				}
-				const {
-					__experimentalCanUserUseUnfilteredHTML:
-						canUserUseUnfilteredHTML,
-				} = getSettings();
-				const { plainText, html } = getPasteEventData( event );
-				const blocks = pasteHandler( {
-					HTML: html,
-					plainText,
-					mode: 'BLOCKS',
-					canUserUseUnfilteredHTML,
-				} );
-
-				replaceBlocks(
-					selectedBlockClientIds,
-					blocks,
-					blocks.length - 1,
-					-1
-				);
-			}
-		}
-
-		node.ownerDocument.addEventListener( 'copy', handler );
-		node.ownerDocument.addEventListener( 'cut', handler );
-		node.ownerDocument.addEventListener( 'paste', handler );
-
-		return () => {
-			node.ownerDocument.removeEventListener( 'copy', handler );
-			node.ownerDocument.removeEventListener( 'cut', handler );
-			node.ownerDocument.removeEventListener( 'paste', handler );
-		};
-	}, [] );
-}
-
-function CopyHandler( { children } ) {
-	return <div ref={ useClipboardHandler() }>{ children }</div>;
-}
+import useClipboardHandler from '../writing-flow/use-clipboard-handler';
 
 /**
- * Given a string of HTML representing serialized blocks, returns the plain
- * text extracted after stripping the HTML of any tags and fixing line breaks.
- *
- * @param {string} html Serialized blocks.
- * @return {string} The plain-text content with any html removed.
+ * @deprecated
  */
-function toPlainText( html ) {
-	// Manually handle BR tags as line breaks prior to `stripHTML` call
-	html = html.replace( /<br>/g, '\n' );
-
-	const plainText = stripHTML( html ).trim();
-
-	// Merge any consecutive line breaks
-	return plainText.replace( /\n\n+/g, '\n\n' );
-}
+export const __unstableUseClipboardHandler = () => {
+	deprecated( '__unstableUseClipboardHandler', {
+		alternative: 'BlockCanvas or WritingFlow',
+		since: '6.4',
+		version: '6.7',
+	} );
+	return useClipboardHandler();
+};
 
 /**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/copy-handler/README.md
+ * @deprecated
+ * @param {Object} props
  */
-export default CopyHandler;
+export default function CopyHandler( props ) {
+	deprecated( 'CopyHandler', {
+		alternative: 'BlockCanvas or WritingFlow',
+		since: '6.4',
+		version: '6.7',
+	} );
+	return <div { ...props } ref={ useClipboardHandler() } />;
+}
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 555910d70f76ce..eb269e03ca5abc 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -2,22 +2,26 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
+import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
 	ExternalLink,
 	VisuallyHidden,
-	CustomSelectControl,
-	BaseControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
+	CustomSelectControl,
 } from '@wordpress/components';
 
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
-const EXAMPLE_DATE = new Date( 2022, 0, 25 );
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
+const exampleDate = new Date();
+exampleDate.setDate( 20 );
+exampleDate.setMonth( exampleDate.getMonth() - 3 );
+if ( exampleDate.getMonth() === 4 ) {
+	// May has three letters, so use March.
+	exampleDate.setMonth( 3 );
+}
 
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -50,14 +54,12 @@ export default function DateFormatPicker( {
 		<fieldset className="block-editor-date-format-picker">
 			<VisuallyHidden as="legend">{ __( 'Date format' ) }</VisuallyHidden>
 			<ToggleControl
-				label={
-					<>
-						{ __( 'Default format' ) }
-						<span className="block-editor-date-format-picker__default-format-toggle-control__hint">
-							{ dateI18n( defaultFormat, EXAMPLE_DATE ) }
-						</span>
-					</>
-				}
+				__nextHasNoMarginBottom
+				label={ __( 'Default format' ) }
+				help={ `${ __( 'Example:' ) }  ${ dateI18n(
+					defaultFormat,
+					exampleDate
+				) }` }
 				checked={ ! format }
 				onChange={ ( checked ) =>
 					onChange( checked ? null : defaultFormat )
@@ -80,61 +82,76 @@ function NonDefaultControls( { format, onChange } ) {
 	// formats.
 	const suggestedFormats = [
 		...new Set( [
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			'Y-m-d',
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y', 'short date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y', 'medium date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'F j, Y', 'long date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j', 'short date format without the year' ),
 		] ),
 	];
 
-	const suggestedOptions = suggestedFormats.map(
-		( suggestedFormat, index ) => ( {
+	const suggestedOptions = [
+		...suggestedFormats.map( ( suggestedFormat, index ) => ( {
 			key: `suggested-${ index }`,
-			name: dateI18n( suggestedFormat, EXAMPLE_DATE ),
+			name: dateI18n( suggestedFormat, exampleDate ),
 			format: suggestedFormat,
-		} )
-	);
+		} ) ),
+		{
+			key: 'human-diff',
+			name: humanTimeDiff( exampleDate ),
+			format: 'human-diff',
+		},
+	];
+
 	const customOption = {
 		key: 'custom',
 		name: __( 'Custom' ),
 		className:
 			'block-editor-date-format-picker__custom-format-select-control__custom-option',
-		__experimentalHint: __( 'Enter your own date format' ),
+		hint: __( 'Enter your own date format' ),
 	};
 
 	const [ isCustom, setIsCustom ] = useState(
-		() => !! format && ! suggestedFormats.includes( format )
+		() =>
+			!! format &&
+			! suggestedOptions.some( ( option ) => option.format === format )
 	);
 
 	return (
-		<>
-			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
-				<CustomSelectControl
-					__nextUnconstrainedWidth
-					label={ __( 'Choose a format' ) }
-					options={ [ ...suggestedOptions, customOption ] }
-					value={
-						isCustom
-							? customOption
-							: suggestedOptions.find(
-									( option ) => option.format === format
-							  ) ?? customOption
+		<VStack>
+			<CustomSelectControl
+				__next40pxDefaultSize
+				label={ __( 'Choose a format' ) }
+				options={ [ ...suggestedOptions, customOption ] }
+				value={
+					isCustom
+						? customOption
+						: suggestedOptions.find(
+								( option ) => option.format === format
+						  ) ?? customOption
+				}
+				onChange={ ( { selectedItem } ) => {
+					if ( selectedItem === customOption ) {
+						setIsCustom( true );
+					} else {
+						setIsCustom( false );
+						onChange( selectedItem.format );
 					}
-					onChange={ ( { selectedItem } ) => {
-						if ( selectedItem === customOption ) {
-							setIsCustom( true );
-						} else {
-							setIsCustom( false );
-							onChange( selectedItem.format );
-						}
-					} }
-				/>
-			</BaseControl>
+				} }
+			/>
 			{ isCustom && (
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(
@@ -145,7 +162,7 @@ function NonDefaultControls( { format, onChange } ) {
 							Link: (
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/formatting-date-and-time/'
+										'https://wordpress.org/documentation/article/customize-date-and-time-format/'
 									) }
 								/>
 							),
@@ -155,6 +172,6 @@ function NonDefaultControls( { format, onChange } ) {
 					onChange={ ( value ) => onChange( value ) }
 				/>
 			) }
-		</>
+		</VStack>
 	);
 }
diff --git a/packages/block-editor/src/components/date-format-picker/style.scss b/packages/block-editor/src/components/date-format-picker/style.scss
index 48c44899358727..748e43bb8db94a 100644
--- a/packages/block-editor/src/components/date-format-picker/style.scss
+++ b/packages/block-editor/src/components/date-format-picker/style.scss
@@ -2,26 +2,6 @@
 	margin-bottom: $grid-unit-20;
 }
 
-.block-editor-date-format-picker__default-format-toggle-control__hint {
-	color: $gray-700;
-	display: block;
-}
-
-.block-editor-date-format-picker__custom-format-select-control {
-	&.components-base-control {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
-
-	&.has-hint {
-		grid-template-columns: auto 30px;
-	}
-
-	.components-custom-select-control__item-hint {
-		grid-row: 2;
-		text-align: left;
-	}
 }
diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss
new file mode 100644
index 00000000000000..71ede90d25c0ca
--- /dev/null
+++ b/packages/block-editor/src/components/default-block-appender/content.scss
@@ -0,0 +1,157 @@
+/**
+ * Default block appender.
+ *
+ * This component shows up in 3 places:
+ * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
+ * - on the right, inside empty paragraphs
+ * - absolute positioned and blue inside nesting containers
+ */
+
+.block-editor-default-block-appender {
+	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
+
+	// Default to centered and content-width, like blocks
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+
+	&[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
+		// Outline on root-level default block appender is redundant with the
+		// WritingFlow click redirector.
+		outline: 1px solid transparent;
+	}
+
+	.block-editor-default-block-appender__content {
+		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
+		opacity: 0.62;
+
+		// The following prevents user agent styles from applying margins to the appender's inner paragraph.
+		// This in turn prevents layout shift due to layout styles removing margins from first and last children.
+		margin-block-start: 0;
+		margin-block-end: 0;
+	}
+
+	// Dropzone.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+
+	.block-editor-inserter__toggle.components-button.has-icon {
+		// Basic look
+		background: $gray-900;
+		color: $white;
+		padding: 0;
+
+		// Special dimensions for this button.
+		min-width: $button-size-small;
+		height: $button-size-small;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+// The initial appender that exists only on empty documents.
+.block-editor-default-block-appender .block-editor-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
+/**
+ * Fixed position appender (right bottom corner).
+ *
+ * These styles apply to all in-canvas inserters. All in-canvas inserters always
+ * exist within a block.
+ */
+
+.block-editor-block-list__block .block-list-appender {
+	position: absolute;
+	list-style: none;
+	padding: 0;
+	z-index: z-index(".block-editor-block-list__block .block-list-appender");
+	bottom: 0;
+	right: 0;
+
+	// These rules needs extra specificity as it's affected by DOM rules.
+	&.block-list-appender {
+		margin: 0;
+		line-height: 0;
+	}
+
+	.block-editor-inserter:disabled {
+		display: none;
+	}
+
+	.block-editor-default-block-appender {
+		height: $button-size-small;
+	}
+
+	// @todo these are currently two separate components. Since we're now
+	// treating them the same, one or both can be retired.
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		flex-direction: row;
+		box-shadow: none;
+		height: $button-size-small;
+		width: $button-size-small;
+		min-width: $button-size-small;
+
+		// Hide by default, then we unhide it when the selected block is a direct ancestor.
+		display: none;
+
+		// Important to override styles form Button component.
+		padding: 0 !important;
+
+		// Basic look
+		background: $gray-900;
+		color: $white;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	// This content only shows up inside the empty appender.
+	.block-editor-default-block-appender__content {
+		display: none;
+	}
+
+	// These could be avoided by employing a :not(:only-child) on the parent,
+	// but this should be more performant.
+	// @todo These styles can almost certainly be refactored away we refactor
+	// the markup and classes of the component itself. The rules provide some
+	// baseline styles for when the block is the only one inside.
+	&:only-child {
+		position: relative;
+		right: auto;
+		align-self: center;
+		list-style: none;
+		line-height: inherit;
+
+		.block-editor-default-block-appender__content {
+			display: block;
+		}
+	}
+}
+
+// Unhide the inserter when you're in the exact container.
+.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
+.block-editor-block-list__block.is-selected > .block-list-appender {
+	.block-editor-inserter__toggle.components-button.has-icon,
+	.block-list-appender__toggle {
+		display: flex;
+	}
+}
+
+.block-editor-default-block-appender__content {
+	cursor: text;
+}
diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
index 07ce2609d571f9..fbc2c7c08821d4 100644
--- a/packages/block-editor/src/components/default-block-appender/index.js
+++ b/packages/block-editor/src/components/default-block-appender/index.js
@@ -1,15 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -24,24 +23,49 @@ import { store as blockEditorStore } from '../../store';
  */
 export const ZWNBSP = '\ufeff';
 
-export function DefaultBlockAppender( {
-	isLocked,
-	onAppend,
-	showPrompt,
-	placeholder,
-	rootClientId,
-} ) {
-	if ( isLocked ) {
+export default function DefaultBlockAppender( { rootClientId } ) {
+	const { showPrompt, isLocked, placeholder, isManualGrid } = useSelect(
+		( select ) => {
+			const {
+				getBlockCount,
+				getSettings,
+				getTemplateLock,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+
+			const isEmpty = ! getBlockCount( rootClientId );
+			const { bodyPlaceholder } = getSettings();
+
+			return {
+				showPrompt: isEmpty,
+				isLocked: !! getTemplateLock( rootClientId ),
+				placeholder: bodyPlaceholder,
+				isManualGrid:
+					getBlockAttributes( rootClientId )?.layout
+						?.isManualPlacement,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const { insertDefaultBlock, startTyping } = useDispatch( blockEditorStore );
+
+	if ( isLocked || isManualGrid ) {
 		return null;
 	}
 
 	const value =
 		decodeEntities( placeholder ) || __( 'Type / to choose a block' );
 
+	const onAppend = () => {
+		insertDefaultBlock( undefined, rootClientId );
+		startTyping();
+	};
+
 	return (
 		<div
 			data-root-client-id={ rootClientId || '' }
-			className={ classnames( 'block-editor-default-block-appender', {
+			className={ clsx( 'block-editor-default-block-appender', {
 				'has-visible-prompt': showPrompt,
 			} ) }
 		>
@@ -76,32 +100,3 @@ export function DefaultBlockAppender( {
 		</div>
 	);
 }
-
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getSettings, getTemplateLock } =
-			select( blockEditorStore );
-
-		const isEmpty = ! getBlockCount( ownProps.rootClientId );
-		const { bodyPlaceholder } = getSettings();
-
-		return {
-			showPrompt: isEmpty,
-			isLocked: !! getTemplateLock( ownProps.rootClientId ),
-			placeholder: bodyPlaceholder,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => {
-		const { insertDefaultBlock, startTyping } =
-			dispatch( blockEditorStore );
-
-		return {
-			onAppend() {
-				const { rootClientId } = ownProps;
-
-				insertDefaultBlock( undefined, rootClientId );
-				startTyping();
-			},
-		};
-	} )
-)( DefaultBlockAppender );
diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
index dae0750b8e30d4..330b860029b6f7 100644
--- a/packages/block-editor/src/components/default-block-appender/index.native.js
+++ b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableWithoutFeedback, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,11 @@ import BlockInsertionPoint from '../block-list/insertion-point';
 import styles from './style.scss';
 import { store as blockEditorStore } from '../../store';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+const noop = () => {};
+
 export function DefaultBlockAppender( {
+	baseGlobalStyles,
 	isLocked,
 	isVisible,
 	onAppend,
@@ -31,43 +35,64 @@ export function DefaultBlockAppender( {
 	if ( isLocked || ! isVisible ) {
 		return null;
 	}
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];
+	const { fontSize, lineHeight } = blockGlobalStyles?.typography || {};
+
+	const textStyles = blockGlobalStyles?.typography
+		? {
+				...( fontSize && { fontSize } ),
+				...( lineHeight && { lineHeight } ),
+		  }
+		: undefined;
 
 	const value =
 		typeof placeholder === 'string'
 			? decodeEntities( placeholder )
 			: __( 'Start writing…' );
 
+	const appenderStyles = [
+		styles.blockHolder,
+		showSeparator && containerStyle,
+	];
+
 	return (
-		<TouchableWithoutFeedback onPress={ onAppend }>
-			<View
-				style={ [
-					styles.blockHolder,
-					showSeparator && containerStyle,
-				] }
-				pointerEvents="box-only"
-			>
+		<Pressable onPress={ onAppend } hitSlop={ hitSlop }>
+			<View style={ appenderStyles } pointerEvents="box-only">
 				{ showSeparator ? (
 					<BlockInsertionPoint />
 				) : (
-					<RichText placeholder={ value } onChange={ () => {} } />
+					<RichText
+						placeholder={ value }
+						onChange={ noop }
+						tagName="p"
+						style={ textStyles }
+					/>
 				) }
 			</View>
-		</TouchableWithoutFeedback>
+		</Pressable>
 	);
 }
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } =
-			select( blockEditorStore );
+		const {
+			getBlockCount,
+			getBlockName,
+			getSettings,
+			isBlockValid,
+			getTemplateLock,
+		} = select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const isLastBlockDefault =
 			getBlockName( ownProps.lastBlockClientId ) ===
 			getDefaultBlockName();
 		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
+		const globalStylesBaseStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles;
 
 		return {
+			baseGlobalStyles: globalStylesBaseStyles,
 			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 		};
diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
deleted file mode 100644
index ca93381349c0ce..00000000000000
--- a/packages/block-editor/src/components/default-block-appender/style.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Default block appender.
- *
- * This component shows up in 3 places:
- * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
- * - on the right, inside empty paragraphs
- * - absolute positioned and blue inside nesting containers
- */
-
-.block-editor-default-block-appender {
-	clear: both; // The appender doesn't scale well to sit next to floats, so clear them.
-
-	// Default to centered and content-width, like blocks
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
-
-	&[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
-		// Outline on root-level default block appender is redundant with the
-		// WritingFlow click redirector.
-		outline: 1px solid transparent;
-	}
-
-	.block-editor-default-block-appender__content {
-		// Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block.
-		opacity: 0.62;
-	}
-
-	// Dropzone.
-	.components-drop-zone__content-icon {
-		display: none;
-	}
-}
-
-// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
-// that exists only on empty documents.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	position: absolute;
-	top: 0;
-	right: 0;
-	line-height: 0;
-
-	&:disabled {
-		display: none;
-	}
-}
-
-
-/**
- * Fixed position appender.
- * These styles apply to all in-canvas inserters that exist inside nesting containers.
- */
-
-.block-editor-block-list__block .block-list-appender {
-	position: absolute;
-	list-style: none;
-	padding: 0;
-	z-index: z-index(".block-editor-block-list__block .block-list-appender");
-	bottom: 0;
-	right: 0;
-
-	// These rules needs extra specificity as it's affected by DOM rules.
-	&.block-list-appender {
-		margin: 0;
-		line-height: 0;
-	}
-
-	.block-editor-default-block-appender {
-		height: $button-size-small;
-	}
-
-	// @todo: these are currently two separate components. Since we're now
-	// treating them the same, one or both can be retired.
-	.block-editor-inserter__toggle.components-button.has-icon,
-	.block-list-appender__toggle {
-		flex-direction: row;
-		box-shadow: none;
-		height: $button-size-small;
-		width: $button-size-small;
-
-		// Hide by default, then we unhide it when the selected block is a direct ancestor.
-		display: none;
-
-		// Important to override styles form Button component.
-		padding: 0 !important;
-
-		// Basic look
-		background: $gray-900;
-		color: $white;
-
-		&:hover {
-			color: $white;
-			background: var(--wp-admin-theme-color);
-		}
-	}
-
-	// This content only shows up inside the empty appender.
-	.block-editor-default-block-appender__content {
-		display: none;
-	}
-
-	// These could be avoided by employing a :not(:only-child) on the parent,
-	// but this should be more performant.
-	// @todo: These styles can almost certainly be refactored away we refactor
-	// the markup and classes of the component itself. The rules provide some
-	// baseline styles for when the block is the only one inside.
-	&:only-child {
-		position: relative;
-		right: auto;
-		align-self: center;
-		list-style: none;
-		line-height: inherit;
-
-		.block-editor-default-block-appender__content {
-			display: block;
-		}
-	}
-}
-
-// Unhide the inserter when you're in the exact container.
-.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender,
-.block-editor-block-list__block.is-selected > .block-list-appender {
-	.block-editor-inserter__toggle.components-button.has-icon,
-	.block-list-appender__toggle {
-		display: flex;
-	}
-}
-
-.block-editor-default-block-appender__content {
-	cursor: text;
-}
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..7495620594ac1a 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
@@ -7,28 +7,36 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import { DefaultBlockAppender, ZWNBSP } from '../';
+import DefaultBlockAppender, { ZWNBSP } from '../';
+import * as blockEditorActions from '../../../store/actions';
+import * as blockEditorSelectors from '../../../store/selectors';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		startTyping: jest.fn( actions.startTyping ),
+	};
+} );
+jest.mock( '../../../store/selectors', () => {
+	const selectors = jest.requireActual( '../../../store/selectors' );
+	return {
+		...selectors,
+		getBlockCount: jest.fn( selectors.getBlockCount ),
+	};
+} );
 
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
-		const onAppend = jest.fn();
-
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should append a default block when input focused', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onAppend = jest.fn();
+		const startTyping = jest.spyOn( blockEditorActions, 'startTyping' );
+		const user = userEvent.setup();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		await user.click(
 			screen.getByRole( 'button', { name: 'Add default block' } )
@@ -37,19 +45,15 @@ describe( 'DefaultBlockAppender', () => {
 		expect( container ).toMatchSnapshot();
 
 		// Called once for focusing and once for clicking.
-		expect( onAppend ).toHaveBeenCalledTimes( 2 );
-		expect( onAppend ).toHaveBeenCalledWith();
+		expect( startTyping ).toHaveBeenCalledTimes( 2 );
+		expect( startTyping ).toHaveBeenCalledWith();
 	} );
 
 	it( 'should optionally show without prompt', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onAppend = jest.fn();
+		blockEditorSelectors.getBlockCount.mockImplementation( () => 1 );
+		const user = userEvent.setup();
 
-		const { container } = render(
-			<DefaultBlockAppender onAppend={ onAppend } showPrompt={ false } />
-		);
+		const { container } = render( <DefaultBlockAppender /> );
 
 		const appender = screen.getByRole( 'button', {
 			name: 'Add default block',
diff --git a/packages/block-editor/src/components/default-style-picker/index.js b/packages/block-editor/src/components/default-style-picker/index.js
deleted file mode 100644
index 4d4bbaac6a259c..00000000000000
--- a/packages/block-editor/src/components/default-style-picker/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useMemo, useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { getDefaultStyle } from '../block-styles/utils';
-
-export default function DefaultStylePicker( { blockName } ) {
-	const { preferredStyle, onUpdatePreferredStyleVariations, styles } =
-		useSelect(
-			( select ) => {
-				const settings = select( blockEditorStore ).getSettings();
-				const preferredStyleVariations =
-					settings.__experimentalPreferredStyleVariations;
-				return {
-					preferredStyle:
-						preferredStyleVariations?.value?.[ blockName ],
-					onUpdatePreferredStyleVariations:
-						preferredStyleVariations?.onChange ?? null,
-					styles: select( blocksStore ).getBlockStyles( blockName ),
-				};
-			},
-			[ blockName ]
-		);
-	const selectOptions = useMemo(
-		() => [
-			{ label: __( 'Not set' ), value: '' },
-			...styles.map( ( { label, name } ) => ( { label, value: name } ) ),
-		],
-		[ styles ]
-	);
-	const defaultStyleName = useMemo(
-		() => getDefaultStyle( styles )?.name,
-		[ styles ]
-	);
-	const selectOnChange = useCallback(
-		( blockStyle ) => {
-			onUpdatePreferredStyleVariations( blockName, blockStyle );
-		},
-		[ blockName, onUpdatePreferredStyleVariations ]
-	);
-
-	// Until the functionality is migrated to global styles,
-	// only show the default style picker if a non-default style has already been selected.
-	if ( ! preferredStyle || preferredStyle === defaultStyleName ) {
-		return null;
-	}
-
-	return (
-		onUpdatePreferredStyleVariations && (
-			<div className="default-style-picker__default-switcher">
-				<SelectControl
-					options={ selectOptions }
-					value={ preferredStyle || '' }
-					label={ __( 'Default Style' ) }
-					onChange={ selectOnChange }
-				/>
-			</div>
-		)
-	);
-}
diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
new file mode 100644
index 00000000000000..d963e71289cb0f
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../use-settings';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @callback AspectRatioToolPropsOnChange
+ * @param {string} [value] New aspect ratio value.
+ * @return {void} No return.
+ */
+
+/**
+ * @typedef {Object} AspectRatioToolProps
+ * @property {string}                       [panelId]          ID of the panel this tool is associated with.
+ * @property {string}                       [value]            Current aspect ratio value.
+ * @property {AspectRatioToolPropsOnChange} [onChange]         Callback to update the aspect ratio value.
+ * @property {SelectControlProps[]}         [options]          Aspect ratio options.
+ * @property {string}                       [defaultValue]     Default aspect ratio value.
+ * @property {boolean}                      [isShownByDefault] Whether the tool is shown by default.
+ */
+
+export default function AspectRatioTool( {
+	panelId,
+	value,
+	onChange = () => {},
+	options,
+	defaultValue = 'auto',
+	hasValue,
+	isShownByDefault = true,
+} ) {
+	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+	const displayValue = value ?? 'auto';
+
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+		{
+			label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
+			value: 'custom',
+			disabled: true,
+			hidden: true,
+		},
+	];
+
+	return (
+		<ToolsPanelItem
+			hasValue={
+				hasValue ? hasValue : () => displayValue !== defaultValue
+			}
+			label={ __( 'Aspect ratio' ) }
+			onDeselect={ () => onChange( undefined ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				label={ __( 'Aspect ratio' ) }
+				value={ displayValue }
+				options={ options ?? aspectRatioOptions }
+				onChange={ onChange }
+				size="__unstable-large"
+				__nextHasNoMarginBottom
+			/>
+		</ToolsPanelItem>
+	);
+}
diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js
new file mode 100644
index 00000000000000..49d0fe03b4cb48
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/index.js
@@ -0,0 +1,220 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AspectRatioTool from './aspect-ratio-tool';
+import ScaleTool from './scale-tool';
+import WidthHeightTool from './width-height-tool';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} Dimensions
+ * @property {string} [width]       CSS width property.
+ * @property {string} [height]      CSS height property.
+ * @property {string} [scale]       CSS object-fit property.
+ * @property {string} [aspectRatio] CSS aspect-ratio property.
+ */
+
+/**
+ * @callback DimensionsControlsOnChange
+ * @param {Dimensions} nextValue
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} DimensionsControlsProps
+ * @property {string}                     [panelId]            ID of the panel that contains the controls.
+ * @property {Dimensions}                 [value]              Current dimensions values.
+ * @property {DimensionsControlsOnChange} [onChange]           Callback to update the dimensions values.
+ * @property {SelectControlProps[]}       [aspectRatioOptions] Aspect ratio options.
+ * @property {SelectControlProps[]}       [scaleOptions]       Scale options.
+ * @property {WPUnitControlUnit[]}        [unitsOptions]       Units options.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {DimensionsControlsProps} props The component props.
+ *
+ * @return {Element} The dimensions controls.
+ */
+function DimensionsTool( {
+	panelId,
+	value = {},
+	onChange = () => {},
+	aspectRatioOptions, // Default options handled by AspectRatioTool.
+	defaultAspectRatio = 'auto', // Match CSS default value for aspect-ratio.
+	scaleOptions, // Default options handled by ScaleTool.
+	defaultScale = 'fill', // Match CSS default value for object-fit.
+	unitsOptions, // Default options handled by UnitControl.
+	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
+} ) {
+	// Coerce undefined and CSS default values to be null.
+	const width =
+		value.width === undefined || value.width === 'auto'
+			? null
+			: value.width;
+	const height =
+		value.height === undefined || value.height === 'auto'
+			? null
+			: value.height;
+	const aspectRatio =
+		value.aspectRatio === undefined || value.aspectRatio === 'auto'
+			? null
+			: value.aspectRatio;
+	const scale =
+		value.scale === undefined || value.scale === 'fill'
+			? null
+			: value.scale;
+
+	// Keep track of state internally, so when the value is cleared by means
+	// other than directly editing that field, it's easier to restore the
+	// previous value.
+	const [ lastScale, setLastScale ] = useState( scale );
+	const [ lastAspectRatio, setLastAspectRatio ] = useState( aspectRatio );
+
+	// 'custom' is not a valid value for CSS aspect-ratio, but it is used in the
+	// dropdown to indicate that setting both the width and height is the same
+	// as a custom aspect ratio.
+	const aspectRatioValue = width && height ? 'custom' : lastAspectRatio;
+
+	const showScaleControl = aspectRatio || ( width && height );
+
+	return (
+		<>
+			{ tools.includes( 'aspectRatio' ) && (
+				<AspectRatioTool
+					panelId={ panelId }
+					options={ aspectRatioOptions }
+					defaultValue={ defaultAspectRatio }
+					value={ aspectRatioValue }
+					onChange={ ( nextAspectRatio ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextAspectRatio =
+							nextAspectRatio === 'auto' ? null : nextAspectRatio;
+
+						setLastAspectRatio( nextAspectRatio );
+
+						// Update aspectRatio.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.aspectRatio;
+						} else {
+							nextValue.aspectRatio = nextAspectRatio;
+						}
+
+						// Auto-update scale.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						// Auto-update width and height.
+						if ( 'custom' !== nextAspectRatio && width && height ) {
+							delete nextValue.height;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'widthHeight' ) && (
+				<WidthHeightTool
+					panelId={ panelId }
+					units={ unitsOptions }
+					value={ { width, height } }
+					onChange={ ( { width: nextWidth, height: nextHeight } ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextWidth = nextWidth === 'auto' ? null : nextWidth;
+						nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+						// Update width.
+						if ( ! nextWidth ) {
+							delete nextValue.width;
+						} else {
+							nextValue.width = nextWidth;
+						}
+
+						// Update height.
+						if ( ! nextHeight ) {
+							delete nextValue.height;
+						} else {
+							nextValue.height = nextHeight;
+						}
+
+						// Auto-update aspectRatio.
+						if ( nextWidth && nextHeight ) {
+							delete nextValue.aspectRatio;
+						} else if ( lastAspectRatio ) {
+							nextValue.aspectRatio = lastAspectRatio;
+						} else {
+							// No setting defaultAspectRatio here, because
+							// aspectRatio is optional in this scenario,
+							// unlike scale.
+						}
+
+						// Auto-update scale.
+						if (
+							! lastAspectRatio &&
+							!! nextWidth !== !! nextHeight
+						) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'scale' ) && showScaleControl && (
+				<ScaleTool
+					panelId={ panelId }
+					options={ scaleOptions }
+					defaultValue={ defaultScale }
+					value={ lastScale }
+					onChange={ ( nextScale ) => {
+						const nextValue = { ...value };
+
+						// 'fill' is CSS default, so it gets treated as null.
+						nextScale = nextScale === 'fill' ? null : nextScale;
+
+						setLastScale( nextScale );
+
+						// Update scale.
+						if ( ! nextScale ) {
+							delete nextValue.scale;
+						} else {
+							nextValue.scale = nextScale;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+		</>
+	);
+}
+
+export default DimensionsTool;
diff --git a/packages/block-editor/src/components/dimensions-tool/scale-tool.js b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
new file mode 100644
index 00000000000000..a23fad586d4705
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/scale-tool.js
@@ -0,0 +1,125 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps
+ */
+
+/**
+ * The descriptions are purposely made generic as object-fit could be used for
+ * any replaced element. Provide your own set of options if you need different
+ * help text or labels.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
+ *
+ * @type {SelectControlProps[]}
+ */
+const DEFAULT_SCALE_OPTIONS = [
+	{
+		value: 'fill',
+		label: _x( 'Fill', 'Scale option for dimensions control' ),
+		help: __( 'Fill the space by stretching the content.' ),
+	},
+	{
+		value: 'contain',
+		label: _x( 'Contain', 'Scale option for dimensions control' ),
+		help: __( 'Fit the content to the space without clipping.' ),
+	},
+	{
+		value: 'cover',
+		label: _x( 'Cover', 'Scale option for dimensions control' ),
+		help: __( "Fill the space by clipping what doesn't fit." ),
+	},
+	{
+		value: 'none',
+		label: _x( 'None', 'Scale option for dimensions control' ),
+		help: __(
+			'Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding.'
+		),
+	},
+	{
+		value: 'scale-down',
+		label: _x( 'Scale down', 'Scale option for dimensions control' ),
+		help: __(
+			'Scale down the content to fit the space if it is too big. Content that is too small will have additional padding.'
+		),
+	},
+];
+
+/**
+ * @callback ScaleToolPropsOnChange
+ * @param {string} nextValue New scale value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} ScaleToolProps
+ * @property {string}                 [panelId]               ID of the panel that contains the controls.
+ * @property {string}                 [value]                 Current scale value.
+ * @property {ScaleToolPropsOnChange} [onChange]              Callback to update the scale value.
+ * @property {SelectControlProps[]}   [options]               Scale options.
+ * @property {string}                 [defaultValue]          Default scale value.
+ * @property {boolean}                [showControl=true]      Whether to show the control.
+ * @property {boolean}                [isShownByDefault=true] Whether the tool panel is shown by default.
+ */
+
+/**
+ * A tool to select the CSS object-fit property for the image.
+ *
+ * @param {ScaleToolProps} props
+ *
+ * @return {import('react').ReactElement} The scale tool.
+ */
+export default function ScaleTool( {
+	panelId,
+	value,
+	onChange,
+	options = DEFAULT_SCALE_OPTIONS,
+	defaultValue = DEFAULT_SCALE_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
+	const displayValue = value ?? 'fill';
+
+	const scaleHelp = useMemo( () => {
+		return options.reduce( ( acc, option ) => {
+			acc[ option.value ] = option.help;
+			return acc;
+		}, {} );
+	}, [ options ] );
+
+	return (
+		<ToolsPanelItem
+			label={ __( 'Scale' ) }
+			isShownByDefault={ isShownByDefault }
+			hasValue={ () => displayValue !== defaultValue }
+			onDeselect={ () => onChange( defaultValue ) }
+			panelId={ panelId }
+		>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				label={ __( 'Scale' ) }
+				isBlock
+				help={ scaleHelp[ displayValue ] }
+				value={ displayValue }
+				onChange={ onChange }
+				size="__unstable-large"
+			>
+				{ options.map( ( option ) => (
+					<ToggleGroupControlOption
+						key={ option.value }
+						{ ...option }
+					/>
+				) ) }
+			</ToggleGroupControl>
+		</ToolsPanelItem>
+	);
+}
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js
new file mode 100644
index 00000000000000..b853d780052942
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/aspect-ratio-tool.story.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AspectRatioTool from '../aspect-ratio-tool';
+
+export default {
+	title: 'BlockEditor (Private APIs)/DimensionsTool/AspectRatioTool',
+	component: AspectRatioTool,
+	argTypes: {
+		panelId: { control: false },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ value, setValue ] = useState( undefined );
+	const resetAll = () => {
+		setValue( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel
+				label="Aspect Ratio"
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
+				<AspectRatioTool
+					panelId={ panelId }
+					onChange={ ( nextValue ) => {
+						setValue( nextValue );
+						onChangeProp( nextValue );
+					} }
+					value={ value }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/index.story.js b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js
new file mode 100644
index 00000000000000..ebf08fba0c686b
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/index.story.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DimensionsTool from '..';
+
+export default {
+	title: 'BlockEditor (Private APIs)/DimensionsTool',
+	component: DimensionsTool,
+	argTypes: {
+		panelId: { control: false },
+		onChange: { action: 'changed' },
+	},
+};
+
+const EMPTY_OBJECT = {};
+
+export const Default = ( { panelId, onChange, ...props } ) => {
+	const [ value, setValue ] = useState( EMPTY_OBJECT );
+	const resetAll = () => {
+		setValue( EMPTY_OBJECT );
+		onChange( EMPTY_OBJECT );
+	};
+	return (
+		<Panel>
+			<ToolsPanel
+				label="Dimensions"
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
+				<DimensionsTool
+					panelId={ panelId }
+					onChange={ ( nextValue ) => {
+						setValue( nextValue );
+						onChange( nextValue );
+					} }
+					value={ value }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js
new file mode 100644
index 00000000000000..b485bf68a892d9
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/scale-tool.story.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScaleTool from '../scale-tool';
+
+export default {
+	title: 'BlockEditor (Private APIs)/DimensionsTool/ScaleTool',
+	component: ScaleTool,
+	argTypes: {
+		panelId: { control: false },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ value, setValue ] = useState( undefined );
+	const resetAll = () => {
+		setValue( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel label="Scale" panelId={ panelId } resetAll={ resetAll }>
+				<ScaleTool
+					panelId={ panelId }
+					onChange={ ( nextValue ) => {
+						setValue( nextValue );
+						onChangeProp( nextValue );
+					} }
+					value={ value }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js
new file mode 100644
index 00000000000000..eed3cbc02f466e
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/stories/width-height-tool.story.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import WidthHeightTool from '../width-height-tool';
+
+export default {
+	title: 'BlockEditor (Private APIs)/DimensionsTool/WidthHeightTool',
+	component: WidthHeightTool,
+	argTypes: {
+		panelId: { control: false },
+		onChange: { action: 'changed' },
+	},
+};
+
+const EMPTY_OBJECT = {};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ value, setValue ] = useState( EMPTY_OBJECT );
+	const resetAll = () => {
+		setValue( EMPTY_OBJECT );
+		onChangeProp( EMPTY_OBJECT );
+	};
+	return (
+		<Panel>
+			<ToolsPanel
+				label="Width & Height"
+				panelId={ panelId }
+				resetAll={ resetAll }
+			>
+				<WidthHeightTool
+					panelId={ panelId }
+					onChange={ ( nextValue ) => {
+						setValue( nextValue );
+						onChangeProp( nextValue );
+					} }
+					value={ value }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/dimensions-tool/test/index.js b/packages/block-editor/src/components/dimensions-tool/test/index.js
new file mode 100644
index 00000000000000..f6f7d71eb2dcbf
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/test/index.js
@@ -0,0 +1,651 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DimensionsTool from '../';
+
+const EMPTY_OBJECT = {};
+
+function Example( { initialValue, onChange, ...props } ) {
+	const [ value, setValue ] = useState( initialValue );
+	const resetAll = () => {
+		setValue( EMPTY_OBJECT );
+		onChange( EMPTY_OBJECT );
+	};
+	return (
+		<ToolsPanel label="Dimensions" panelId="panel-id" resetAll={ resetAll }>
+			<DimensionsTool
+				panelId="panel-id"
+				onChange={ ( nextValue ) => {
+					setValue( nextValue );
+					onChange( nextValue );
+				} }
+				defaultScale="cover"
+				defaultAspectRatio="auto"
+				aspectRatioOptions={ [
+					{ label: 'Original', value: 'auto' },
+					{ label: '16/9', value: '16/9' },
+					{
+						label: 'Custom',
+						value: 'custom',
+						disabled: true,
+						hidden: true,
+					},
+				] }
+				value={ value }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
+// (xxxx) -> (yyyy) is a shorthand for categorizing the test cases by initial
+// state (xxxx) and final state (yyyy). Each digit represents whether or not the
+// value is set, in the order: [aspectRatio, scale, width, height].
+//
+// See https://github.com/WordPress/gutenberg/pull/51545#issuecomment-1601326289
+
+// Using expect( onChange.mock.calls ).toStrictEqual(...) so undefined
+// properties are treated differently from missing properties.
+
+describe( 'DimensionsTool', () => {
+	describe( 'updating aspectRatio', () => {
+		it( 'when starting with empty initial state, setting aspectRatio also sets scale (0000) -> (1100)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				// scale,
+				// width,
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, '16/9' );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'cover' } ],
+			] );
+		} );
+
+		it( 'when starting with just height, setting aspectRatio also sets scale (0001) -> (1101)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				// scale,
+				// width,
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, '16/9' );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'cover', height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with just width, setting aspectRatio also sets scale (0010) -> (1110)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				// scale,
+				width: '8px',
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, '16/9' );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+			] );
+		} );
+
+		it( 'when starting with scale, width, and height, setting aspectRatio also clears height (0111) -> (1110)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				scale: 'cover',
+				width: '8px',
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, '16/9' );
+
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+			] );
+		} );
+
+		it( 'when starting with aspectRatio and scale, setting aspectRatio to "Original" also clears scale (1100) -> (0000)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+				// width,
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, 'auto' );
+
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+			expect( onChange.mock.calls ).toStrictEqual( [ [ {} ] ] );
+		} );
+
+		it( 'when starting with aspectRatio, scale, and height, setting aspectRatio to "Original" also clears scale (1101) -> (0001)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+				// width,
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, 'auto' );
+
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with aspectRatio, scale, and width, setting aspectRatio to "Original" also clears scale (1110) -> (0010)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+				width: '8px',
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			await user.selectOptions( aspectRatioSelect, 'auto' );
+
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { width: '8px' } ],
+			] );
+		} );
+	} );
+
+	describe( 'updating scale', () => {
+		// No custom interactions here. Things should just update normally.
+	} );
+
+	describe( 'updating dimensions', () => {
+		it( 'when starting with just height, setting width also sets scale (0001) -> (0111)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				// scale,
+				// width,
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
+
+			await user.type( widthInput, '8' );
+
+			expect( widthInput ).toHaveValue( 8 );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { scale: 'cover', width: '8px', height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with just width, setting height also sets scale (0010) -> (0111)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				// scale,
+				width: '8px',
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+
+			await user.type( heightInput, '6' );
+
+			expect( heightInput ).toHaveValue( 6 );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { scale: 'cover', width: '8px', height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with scale, width, and height, clearing width also clears scale (0111) -> (0001)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				scale: 'cover',
+				width: '8px',
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
+
+			await user.clear( widthInput );
+
+			expect( widthInput ).toHaveValue( null );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with scale, width, and height, clearing height also clears scale (0111) -> (0010)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				// aspectRatio,
+				scale: 'cover',
+				width: '8px',
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+
+			await user.clear( heightInput );
+
+			expect( heightInput ).toHaveValue( null );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).not.toBeInTheDocument();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { width: '8px' } ],
+			] );
+		} );
+
+		it( 'when starting with aspectRatio, scale, and height, setting width also clears aspectRatio (1101) -> (0111)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+				// width,
+				height: '6px',
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
+
+			await user.type( widthInput, '8' );
+
+			expect( widthInput ).toHaveValue( 8 );
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { scale: 'cover', width: '8px', height: '6px' } ],
+			] );
+		} );
+
+		it( 'when starting with aspectRatio, scale, and width, setting height also clears aspectRatio (1110) -> (0111)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const initialValue = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+				width: '8px',
+				// height,
+			};
+
+			render(
+				<Example initialValue={ initialValue } onChange={ onChange } />
+			);
+
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+
+			await user.type( heightInput, '6' );
+
+			expect( heightInput ).toHaveValue( 6 );
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+			const scaleRadioGroup = screen.queryByRole( 'radiogroup', {
+				name: 'Scale',
+			} );
+
+			expect( scaleRadioGroup ).toBeInTheDocument();
+
+			const scaleCoverRadio = screen.getByRole( 'radio', {
+				name: 'Cover',
+			} );
+
+			expect( scaleCoverRadio ).toBeChecked();
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { scale: 'cover', width: '8px', height: '6px' } ],
+			] );
+		} );
+	} );
+
+	describe( 'internal component state', () => {
+		it( 'when aspect ratio is change to custom by setting width and height then removing a width value should return the original aspect ratio (1100) -> (1110) -> (0111) -> (1101)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const value = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+			};
+
+			render( <Example initialValue={ value } onChange={ onChange } /> );
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Width',
+			} );
+
+			const heightInput = screen.getByRole( 'spinbutton', {
+				name: 'Height',
+			} );
+
+			await user.type( widthInput, '8' );
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			await user.type( heightInput, '6' );
+			expect( aspectRatioSelect ).toHaveValue( 'custom' );
+
+			await user.clear( widthInput, '' );
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'cover', width: '8px' } ],
+				[ { scale: 'cover', width: '8px', height: '6px' } ],
+				[ { aspectRatio: '16/9', scale: 'cover', height: '6px' } ],
+			] );
+		} );
+
+		it( 'when custom scale is set then aspect ratio is set to original and then aspect ratio is changed back (1100) -> (1100) -> (0000) -> (1100)', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const value = {
+				aspectRatio: '16/9',
+				scale: 'cover',
+			};
+
+			render( <Example initialValue={ value } onChange={ onChange } /> );
+
+			const aspectRatioSelect = screen.getByRole( 'combobox', {
+				name: 'Aspect ratio',
+			} );
+
+			const scaleContainRadio = screen.getByRole( 'radio', {
+				name: 'Contain',
+			} );
+
+			await user.click( scaleContainRadio );
+			expect( scaleContainRadio ).toBeChecked();
+
+			await user.selectOptions( aspectRatioSelect, 'auto' );
+			expect( aspectRatioSelect ).toHaveValue( 'auto' );
+
+			await user.selectOptions( aspectRatioSelect, '16/9' );
+			expect( aspectRatioSelect ).toHaveValue( '16/9' );
+
+			expect( onChange.mock.calls ).toStrictEqual( [
+				[ { aspectRatio: '16/9', scale: 'contain' } ],
+				[ {} ],
+				[
+					{
+						aspectRatio: '16/9',
+						scale: 'contain',
+					},
+				],
+			] );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/dimensions-tool/width-height-tool.js b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
new file mode 100644
index 00000000000000..4c45dd6feca8c1
--- /dev/null
+++ b/packages/block-editor/src/components/dimensions-tool/width-height-tool.js
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const SingleColumnToolsPanelItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
+`;
+
+/**
+ * @typedef {import('@wordpress/components/build-types/unit-control/types').WPUnitControlUnit} WPUnitControlUnit
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolValue
+ * @property {string} [width]  Width CSS value.
+ * @property {string} [height] Height CSS value.
+ */
+
+/**
+ * @callback WidthHeightToolOnChange
+ * @param {WidthHeightToolValue} nextValue Next dimensions value.
+ * @return {void}
+ */
+
+/**
+ * @typedef {Object} WidthHeightToolProps
+ * @property {string}                  [panelId]          ID of the panel that contains the controls.
+ * @property {WidthHeightToolValue}    [value]            Current dimensions values.
+ * @property {WidthHeightToolOnChange} [onChange]         Callback to update the dimensions values.
+ * @property {WPUnitControlUnit[]}     [units]            Units options.
+ * @property {boolean}                 [isShownByDefault] Whether the panel is shown by default.
+ */
+
+/**
+ * Component that renders controls to edit the dimensions of an image or container.
+ *
+ * @param {WidthHeightToolProps} props The component props.
+ *
+ * @return {import('react').ReactElement} The width and height tool.
+ */
+export default function WidthHeightTool( {
+	panelId,
+	value = {},
+	onChange = () => {},
+	units,
+	isShownByDefault = true,
+} ) {
+	// null, undefined, and 'auto' all represent the default value.
+	const width = value.width === 'auto' ? '' : value.width ?? '';
+	const height = value.height === 'auto' ? '' : value.height ?? '';
+
+	const onDimensionChange = ( dimension ) => ( nextDimension ) => {
+		const nextValue = { ...value };
+		// Empty strings or undefined may be passed and both represent removing the value.
+		if ( ! nextDimension ) {
+			delete nextValue[ dimension ];
+		} else {
+			nextValue[ dimension ] = nextDimension;
+		}
+		onChange( nextValue );
+	};
+
+	return (
+		<>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Width' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => width !== '' }
+				onDeselect={ onDimensionChange( 'width' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Width' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ width }
+					onChange={ onDimensionChange( 'width' ) }
+					size="__unstable-large"
+				/>
+			</SingleColumnToolsPanelItem>
+			<SingleColumnToolsPanelItem
+				label={ __( 'Height' ) }
+				isShownByDefault={ isShownByDefault }
+				hasValue={ () => height !== '' }
+				onDeselect={ onDimensionChange( 'height' ) }
+				panelId={ panelId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					placeholder={ __( 'Auto' ) }
+					labelPosition="top"
+					units={ units }
+					min={ 0 }
+					value={ height }
+					onChange={ onDimensionChange( 'height' ) }
+					size="__unstable-large"
+				/>
+			</SingleColumnToolsPanelItem>
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index d27e6863fe0dfd..247e0c51354b0e 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -12,8 +12,10 @@ import {
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { Icon, filter } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 function DuotoneControl( {
+	id: idProp,
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
@@ -31,12 +33,16 @@ function DuotoneControl( {
 	} else {
 		toolbarIcon = <Icon icon={ filter } />;
 	}
+
+	const actionLabel = __( 'Apply duotone filter' );
+	const id = useInstanceId( DuotoneControl, 'duotone-control', idProp );
+	const descriptionId = `${ id }__description`;
+
 	return (
 		<Dropdown
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
@@ -52,19 +58,21 @@ function DuotoneControl( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
-						label={ __( 'Apply duotone filter' ) }
+						label={ actionLabel }
 						icon={ toolbarIcon }
 					/>
 				);
 			} }
 			renderContent={ () => (
 				<MenuGroup label={ __( 'Duotone' ) }>
-					<div className="block-editor-duotone-control__description">
+					<p>
 						{ __(
 							'Create a two-tone color effect without losing your original image.'
 						) }
-					</div>
+					</p>
 					<DuotonePicker
+						aria-label={ actionLabel }
+						aria-describedby={ descriptionId }
 						colorPalette={ colorPalette }
 						duotonePalette={ duotonePalette }
 						disableCustomColors={ disableCustomColors }
diff --git a/packages/block-editor/src/components/duotone-control/style.scss b/packages/block-editor/src/components/duotone-control/style.scss
index d80f7c4628c35f..3a3a5a143289b8 100644
--- a/packages/block-editor/src/components/duotone-control/style.scss
+++ b/packages/block-editor/src/components/duotone-control/style.scss
@@ -3,7 +3,7 @@
 $swatch-size: 28px;
 $swatch-gap: 12px;
 
-$popover-width: $sidebar-width;
+$popover-width: 260px;
 $popover-padding: $grid-unit-20;
 
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
@@ -26,11 +26,6 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	}
 }
 
-.block-editor-duotone-control__description {
-	margin: $grid-unit-20 0;
-	font-size: $helptext-font-size;
-}
-
 .block-editor-duotone-control__unset-indicator {
 	// Show a diagonal line (crossed out) for empty swatches.
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
diff --git a/packages/block-editor/src/components/duotone/components.js b/packages/block-editor/src/components/duotone/components.js
deleted file mode 100644
index 471c03502c588c..00000000000000
--- a/packages/block-editor/src/components/duotone/components.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { __unstableGetValuesFromColors as getValuesFromColors } from './index';
-
-/**
- * SVG and stylesheet needed for rendering the duotone filter.
- *
- * @param {Object} props          Duotone props.
- * @param {string} props.selector Selector to apply the filter to.
- * @param {string} props.id       Unique id for this duotone filter.
- *
- * @return {WPElement} Duotone element.
- */
-export function DuotoneStylesheet( { selector, id } ) {
-	const css = `
-${ selector } {
-	filter: url( #${ id } );
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * Stylesheet for disabling a global styles duotone filter.
- *
- * @param {Object} props          Duotone props.
- * @param {string} props.selector Selector to disable the filter for.
- *
- * @return {WPElement} Filter none style element.
- */
-export function DuotoneUnsetStylesheet( { selector } ) {
-	const css = `
-${ selector } {
-	filter: none;
-}
-`;
-	return <style>{ css }</style>;
-}
-
-/**
- * The SVG part of the duotone filter.
- *
- * @param {Object}   props        Duotone props.
- * @param {string}   props.id     Unique id for this duotone filter.
- * @param {string[]} props.colors Color strings from dark to light.
- *
- * @return {WPElement} Duotone SVG.
- */
-export function DuotoneFilter( { id, colors } ) {
-	const values = getValuesFromColors( colors );
-	return (
-		<SVG
-			xmlnsXlink="http://www.w3.org/1999/xlink"
-			viewBox="0 0 0 0"
-			width="0"
-			height="0"
-			focusable="false"
-			role="none"
-			style={ {
-				visibility: 'hidden',
-				position: 'absolute',
-				left: '-9999px',
-				overflow: 'hidden',
-			} }
-		>
-			<defs>
-				<filter id={ id }>
-					<feColorMatrix
-						// Use sRGB instead of linearRGB so transparency looks correct.
-						colorInterpolationFilters="sRGB"
-						type="matrix"
-						// Use perceptual brightness to convert to grayscale.
-						values="
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-							.299 .587 .114 0 0
-						"
-					/>
-					<feComponentTransfer
-						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
-						colorInterpolationFilters="sRGB"
-					>
-						<feFuncR
-							type="table"
-							tableValues={ values.r.join( ' ' ) }
-						/>
-						<feFuncG
-							type="table"
-							tableValues={ values.g.join( ' ' ) }
-						/>
-						<feFuncB
-							type="table"
-							tableValues={ values.b.join( ' ' ) }
-						/>
-						<feFuncA
-							type="table"
-							tableValues={ values.a.join( ' ' ) }
-						/>
-					</feComponentTransfer>
-					<feComposite
-						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
-						in2="SourceGraphic"
-						operator="in"
-					/>
-				</filter>
-			</defs>
-		</SVG>
-	);
-}
-
-/**
- * SVG from a duotone preset
- *
- * @param {Object} props        Duotone props.
- * @param {Object} props.preset Duotone preset settings.
- *
- * @return {WPElement} Duotone element.
- */
-export function PresetDuotoneFilter( { preset } ) {
-	return (
-		<DuotoneFilter
-			id={ `wp-duotone-${ preset.slug }` }
-			colors={ preset.colors }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/duotone/index.js b/packages/block-editor/src/components/duotone/index.js
deleted file mode 100644
index 919d67780d7c7d..00000000000000
--- a/packages/block-editor/src/components/duotone/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { getValuesFromColors as __unstableGetValuesFromColors } from './utils';
-export {
-	DuotoneFilter as __unstableDuotoneFilter,
-	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
-	DuotoneStylesheet as __unstableDuotoneStylesheet,
-	DuotoneUnsetStylesheet as __unstableDuotoneUnsetStylesheet,
-} from './components';
diff --git a/packages/block-editor/src/components/duotone/utils.js b/packages/block-editor/src/components/duotone/utils.js
index d7cbd0ccba26e9..ac58eca18bb9f8 100644
--- a/packages/block-editor/src/components/duotone/utils.js
+++ b/packages/block-editor/src/components/duotone/utils.js
@@ -23,3 +23,68 @@ export function getValuesFromColors( colors = [] ) {
 
 	return values;
 }
+
+/**
+ * Stylesheet for disabling a global styles duotone filter.
+ *
+ * @param {string} selector Selector to disable the filter for.
+ *
+ * @return {string} Filter none style.
+ */
+export function getDuotoneUnsetStylesheet( selector ) {
+	return `${ selector }{filter:none}`;
+}
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {string} selector Selector to apply the filter to.
+ * @param {string} id       Unique id for this duotone filter.
+ *
+ * @return {string} Duotone filter style.
+ */
+export function getDuotoneStylesheet( selector, id ) {
+	return `${ selector }{filter:url(#${ id })}`;
+}
+
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {string}   id     Unique id for this duotone filter.
+ * @param {string[]} colors Color strings from dark to light.
+ *
+ * @return {string} Duotone SVG.
+ */
+export function getDuotoneFilter( id, colors ) {
+	const values = getValuesFromColors( colors );
+	return `
+<svg
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 0 0"
+	width="0"
+	height="0"
+	focusable="false"
+	role="none"
+	aria-hidden="true"
+	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+>
+	<defs>
+		<filter id="${ id }">
+			<!--
+				Use sRGB instead of linearRGB so transparency looks correct.
+				Use perceptual brightness to convert to grayscale.
+			-->
+			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
+			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="${ values.r.join( ' ' ) }"></feFuncR>
+				<feFuncG type="table" tableValues="${ values.g.join( ' ' ) }"></feFuncG>
+				<feFuncB type="table" tableValues="${ values.b.join( ' ' ) }"></feFuncB>
+				<feFuncA type="table" tableValues="${ values.a.join( ' ' ) }"></feFuncA>
+			</feComponentTransfer>
+			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
+			<feComposite in2="SourceGraphic" operator="in"></feComposite>
+		</filter>
+	</defs>
+</svg>`;
+}
diff --git a/packages/block-editor/src/components/editable-text/README.md b/packages/block-editor/src/components/editable-text/README.md
index 601b996e50be2a..fda19ba52b1144 100644
--- a/packages/block-editor/src/components/editable-text/README.md
+++ b/packages/block-editor/src/components/editable-text/README.md
@@ -25,10 +25,6 @@ _Optional._ `Text` won't insert line breaks on `Enter` if set to `true`.
 _Optional._ Placeholder text to show when the field is empty, similar to the
 [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
 
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `Text` instance can be replaced with the given blocks.
@@ -47,40 +43,6 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'div',
-		},
-	},
-
-	edit: function( props ) {
-		return wp.element.createElement( wp.editor.EditableText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return wp.element.createElement( wp.editor.EditableText.Content, {
-			value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 const { registerBlockType } = wp.blocks;
 const { EditableText } = wp.editor;
@@ -110,5 +72,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}
diff --git a/packages/block-editor/src/components/editable-text/index.js b/packages/block-editor/src/components/editable-text/index.js
index 21366087257efb..62bb166efa8e6b 100644
--- a/packages/block-editor/src/components/editable-text/index.js
+++ b/packages/block-editor/src/components/editable-text/index.js
@@ -9,14 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import RichText from '../rich-text';
 
 const EditableText = forwardRef( ( props, ref ) => {
-	return (
-		<RichText
-			ref={ ref }
-			{ ...props }
-			__unstableDisableFormats
-			preserveWhiteSpace
-		/>
-	);
+	return <RichText ref={ ref } { ...props } __unstableDisableFormats />;
 } );
 
 EditableText.Content = ( { value = '', tagName: Tag = 'div', ...props } ) => {
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index b6288f1afb452d..a59ac310bcd303 100644
--- a/packages/block-editor/src/components/editor-styles/index.js
+++ b/packages/block-editor/src/components/editor-styles/index.js
@@ -8,17 +8,20 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { SVG } from '@wordpress/components';
+import { useCallback, useMemo, memo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import transformStyles from '../../utils/transform-styles';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
 
-function useDarkThemeBodyClassName( styles ) {
+function useDarkThemeBodyClassName( styles, scope ) {
 	return useCallback(
 		( node ) => {
 			if ( ! node ) {
@@ -27,9 +30,7 @@ function useDarkThemeBodyClassName( styles ) {
 
 			const { ownerDocument } = node;
 			const { defaultView, body } = ownerDocument;
-			const canvas = ownerDocument.querySelector(
-				EDITOR_STYLES_SELECTOR
-			);
+			const canvas = scope ? ownerDocument.querySelector( scope ) : body;
 
 			let backgroundColor;
 
@@ -42,13 +43,13 @@ function useDarkThemeBodyClassName( styles ) {
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView
-					.getComputedStyle( tempCanvas, null )
+					?.getComputedStyle( tempCanvas, null )
 					.getPropertyValue( 'background-color' );
 
 				body.removeChild( tempCanvas );
 			} else {
 				backgroundColor = defaultView
-					.getComputedStyle( canvas, null )
+					?.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
 			const colordBackgroundColor = colord( backgroundColor );
@@ -62,24 +63,67 @@ function useDarkThemeBodyClassName( styles ) {
 				body.classList.add( 'is-dark-theme' );
 			}
 		},
-		[ styles ]
+		[ styles, scope ]
 	);
 }
 
-export default function EditorStyles( { styles } ) {
-	const transformedStyles = useMemo(
-		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
-		[ styles ]
+function EditorStyles( { styles, scope, transformOptions } ) {
+	const overrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
 	);
+	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
+		const _styles = Object.values( styles ?? [] );
+
+		for ( const [ id, override ] of overrides ) {
+			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
+			const overrideWithId = { ...override, id };
+			if ( index === -1 ) {
+				_styles.push( overrideWithId );
+			} else {
+				_styles[ index ] = overrideWithId;
+			}
+		}
+
+		return [
+			transformStyles(
+				_styles.filter( ( style ) => style?.css ),
+				scope,
+				transformOptions
+			),
+			_styles
+				.filter( ( style ) => style.__unstableType === 'svgs' )
+				.map( ( style ) => style.assets )
+				.join( '' ),
+		];
+	}, [ styles, overrides, scope, transformOptions ] );
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			<style
+				ref={ useDarkThemeBodyClassName( transformedStyles, scope ) }
+			/>
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
+			/>
 		</>
 	);
 }
+
+export default memo( EditorStyles );
diff --git a/packages/block-editor/src/components/floating-toolbar/index.native.js b/packages/block-editor/src/components/floating-toolbar/index.native.js
index f4ebf1d9ebe8da..d78262fb01f27d 100644
--- a/packages/block-editor/src/components/floating-toolbar/index.native.js
+++ b/packages/block-editor/src/components/floating-toolbar/index.native.js
@@ -47,8 +47,9 @@ const FloatingToolbar = ( {
 	}, [ showFloatingToolbar ] );
 
 	useEffect( () => {
-		if ( showFloatingToolbar )
+		if ( showFloatingToolbar ) {
 			setPreviousSelection( { clientId: selectedClientId, parentId } );
+		}
 	}, [ selectedClientId ] );
 
 	const translationRange =
@@ -115,7 +116,9 @@ export default compose( [
 
 		const selectedClientId = getSelectedBlockClientId();
 
-		if ( ! selectedClientId ) return;
+		if ( ! selectedClientId ) {
+			return;
+		}
 
 		const rootBlockId = getBlockHierarchyRootClientId( selectedClientId );
 
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 5e7a4de57ca343..f9e8023f93ec69 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -3,57 +3,12 @@
  */
 import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
-
-const FONT_STYLES = [
-	{
-		name: _x( 'Regular', 'font style' ),
-		value: 'normal',
-	},
-	{
-		name: _x( 'Italic', 'font style' ),
-		value: 'italic',
-	},
-];
-
-const FONT_WEIGHTS = [
-	{
-		name: _x( 'Thin', 'font weight' ),
-		value: '100',
-	},
-	{
-		name: _x( 'Extra Light', 'font weight' ),
-		value: '200',
-	},
-	{
-		name: _x( 'Light', 'font weight' ),
-		value: '300',
-	},
-	{
-		name: _x( 'Regular', 'font weight' ),
-		value: '400',
-	},
-	{
-		name: _x( 'Medium', 'font weight' ),
-		value: '500',
-	},
-	{
-		name: _x( 'Semi Bold', 'font weight' ),
-		value: '600',
-	},
-	{
-		name: _x( 'Bold', 'font weight' ),
-		value: '700',
-	},
-	{
-		name: _x( 'Extra Bold', 'font weight' ),
-		value: '800',
-	},
-	{
-		name: _x( 'Black', 'font weight' ),
-		value: '900',
-	},
-];
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 /**
  * Adjusts font appearance field label in case either font styles or weights
@@ -63,7 +18,7 @@ const FONT_WEIGHTS = [
  * @param {boolean} hasFontWeights Whether font weights are enabled and present.
  * @return {string} A label representing what font appearance is being edited.
  */
-export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 	if ( ! hasFontStyles ) {
 		return __( 'Font weight' );
 	}
@@ -76,17 +31,20 @@ export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
 };
 
 /**
- * Control to display unified font style and weight options.
+ * Control to display font style and weight options of the active font.
  *
  * @param {Object} props Component props.
  *
- * @return {WPElement} Font appearance control.
+ * @return {Element} Font appearance control.
  */
 export default function FontAppearanceControl( props ) {
 	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next40pxDefaultSize = false,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
+		fontFamilyFaces,
 		value: { fontStyle, fontWeight },
 		...otherProps
 	} = props;
@@ -97,43 +55,22 @@ export default function FontAppearanceControl( props ) {
 		name: __( 'Default' ),
 		style: { fontStyle: undefined, fontWeight: undefined },
 	};
+	const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
+		getFontStylesAndWeights( fontFamilyFaces );
 
-	// Combines both font style and weight options into a single dropdown.
+	// Generates select options for combined font styles and weights.
 	const combineOptions = () => {
 		const combinedOptions = [ defaultOption ];
-
-		FONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {
-			FONT_WEIGHTS.forEach(
-				( { name: weightName, value: weightValue } ) => {
-					const optionName =
-						styleValue === 'normal'
-							? weightName
-							: sprintf(
-									/* translators: 1: Font weight name. 2: Font style name. */
-									__( '%1$s %2$s' ),
-									weightName,
-									styleName
-							  );
-
-					combinedOptions.push( {
-						key: `${ styleValue }-${ weightValue }`,
-						name: optionName,
-						style: {
-							fontStyle: styleValue,
-							fontWeight: weightValue,
-						},
-					} );
-				}
-			);
-		} );
-
+		if ( combinedStyleAndWeightOptions ) {
+			combinedOptions.push( ...combinedStyleAndWeightOptions );
+		}
 		return combinedOptions;
 	};
 
 	// Generates select options for font styles only.
 	const styleOptions = () => {
 		const combinedOptions = [ defaultOption ];
-		FONT_STYLES.forEach( ( { name, value } ) => {
+		fontStyles.forEach( ( { name, value } ) => {
 			combinedOptions.push( {
 				key: value,
 				name,
@@ -146,7 +83,7 @@ export default function FontAppearanceControl( props ) {
 	// Generates select options for font weights only.
 	const weightOptions = () => {
 		const combinedOptions = [ defaultOption ];
-		FONT_WEIGHTS.forEach( ( { name, value } ) => {
+		fontWeights.forEach( ( { name, value } ) => {
 			combinedOptions.push( {
 				key: value,
 				name,
@@ -158,12 +95,19 @@ export default function FontAppearanceControl( props ) {
 
 	// Map font styles and weights to select options.
 	const selectOptions = useMemo( () => {
+		// Display combined available font style and weight options.
 		if ( hasFontStyles && hasFontWeights ) {
 			return combineOptions();
 		}
 
+		// Display only font style options or font weight options.
 		return hasFontStyles ? styleOptions() : weightOptions();
-	}, [ props.options ] );
+	}, [
+		props.options,
+		fontStyles,
+		fontWeights,
+		combinedStyleAndWeightOptions,
+	] );
 
 	// Find current selection by comparing font style & weight against options,
 	// and fall back to the Default option if there is no matching option.
@@ -208,6 +152,8 @@ export default function FontAppearanceControl( props ) {
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
@@ -215,7 +161,6 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
-				__nextUnconstrainedWidth
 			/>
 		)
 	);
diff --git a/packages/block-editor/src/components/font-appearance-control/style.scss b/packages/block-editor/src/components/font-appearance-control/style.scss
index d9af9f29a456c8..d1db850a410110 100644
--- a/packages/block-editor/src/components/font-appearance-control/style.scss
+++ b/packages/block-editor/src/components/font-appearance-control/style.scss
@@ -1,8 +1,6 @@
 .components-font-appearance-control {
-	ul {
-		li {
-			color: $gray-900;
-			text-transform: capitalize;
-		}
+	[role="option"] {
+		color: $gray-900;
+		text-transform: capitalize;
 	}
 }
diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
new file mode 100644
index 00000000000000..57697f595cc800
--- /dev/null
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -0,0 +1,92 @@
+# FontFamilyControl
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+FontFamilyControl is a React component that renders a UI that allows users to select a font family.
+The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
+Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
+
+![FontFamilyControl component preview](https://i.imgur.com/blS5iA3.png)
+
+## Usage
+
+```jsx
+import { useState } from 'react';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyFontFamilyControl = () => {
+	const [ fontFamily, setFontFamily ] = useState( '' );
+
+	return (
+		<FontFamilyControl
+			value={ fontFamily }
+			onChange={ ( newFontFamily ) => {
+				setFontFamily( newFontFamily );
+			} }
+			__nextHasNoMarginBottom
+		/>
+	);
+};
+
+/// ...
+
+<MyFontFamilyControl />
+```
+
+## Props
+
+The component accepts the following props:
+
+### onChange
+
+A function that receives the new font family value.
+If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font family to undefined or set the font family a starting value.
+
+- Type: `function`
+- Required: Yes
+
+### fontFamilies
+
+A user-provided set of font families.
+Optional, used in case we want to override the predefined ones coming from presets.
+
+- Type: `Array`
+- Required: No
+
+The font families are provided as an array of objects with the following schema:
+
+| Property   | Description                               | Type   |
+| ---------- | ----------------------------------------- | ------ |
+| fontFamily | Font family, as used in CSS.              | string |
+| name       | Optional display name of the font family. | string |
+
+### value
+
+The current font family value.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+The rest of the props are passed down to the underlying `<SelectControl />` instance.
+
+#### `__next40pxDefaultSize`
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+#### `__nextHasNoMarginBottom`
+
+- Type: `boolean`
+- Required: No
+- Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
index 8d49de5bf0b168..e8d0d7ed2dd808 100644
--- a/packages/block-editor/src/components/font-family/index.js
+++ b/packages/block-editor/src/components/font-family/index.js
@@ -1,50 +1,74 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
+	className,
 	...props
 } ) {
-	const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' );
+	const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
 	if ( ! fontFamilies ) {
 		fontFamilies = blockLevelFontFamilies;
 	}
 
-	if ( isEmpty( fontFamilies ) ) {
+	if ( ! fontFamilies || fontFamilies.length === 0 ) {
 		return null;
 	}
 
 	const options = [
-		{ value: '', label: __( 'Default' ) },
-		...fontFamilies.map( ( { fontFamily, name } ) => {
-			return {
-				value: fontFamily,
-				label: name || fontFamily,
-			};
-		} ),
+		{
+			key: '',
+			name: __( 'Default' ),
+		},
+		...fontFamilies.map( ( { fontFamily, name } ) => ( {
+			key: fontFamily,
+			name: name || fontFamily,
+			style: { fontFamily },
+		} ) ),
 	];
+
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
-		<SelectControl
+		<CustomSelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
-			options={ options }
 			value={ value }
-			onChange={ onChange }
-			labelPosition="top"
+			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
+			options={ options }
+			className={ clsx( 'block-editor-font-family-control', className, {
+				'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+			} ) }
 			{ ...props }
 		/>
 	);
diff --git a/packages/block-editor/src/components/font-family/stories/index.story.js b/packages/block-editor/src/components/font-family/stories/index.story.js
new file mode 100644
index 00000000000000..54dadeb213f12c
--- /dev/null
+++ b/packages/block-editor/src/components/font-family/stories/index.story.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontFamilyControl from '..';
+
+export default {
+	component: FontFamilyControl,
+	title: 'BlockEditor/FontFamilyControl',
+};
+
+export const Default = {
+	render: function Template( props ) {
+		const [ value, setValue ] = useState();
+		return (
+			<FontFamilyControl
+				onChange={ setValue }
+				value={ value }
+				{ ...props }
+			/>
+		);
+	},
+	args: {
+		fontFamilies: [
+			{
+				fontFace: [
+					{
+						fontFamily: 'Inter',
+						fontStretch: 'normal',
+						fontStyle: 'normal',
+						fontWeight: '200 900',
+						src: [
+							'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
+						],
+					},
+				],
+				fontFamily: '"Inter", sans-serif',
+				name: 'Inter',
+				slug: 'inter',
+			},
+			{
+				fontFamily:
+					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+				name: 'System Font',
+				slug: 'system-font',
+			},
+		],
+		__nextHasNoMarginBottom: true,
+	},
+};
diff --git a/packages/block-editor/src/components/font-family/style.scss b/packages/block-editor/src/components/font-family/style.scss
new file mode 100644
index 00000000000000..7ee181ebb79534
--- /dev/null
+++ b/packages/block-editor/src/components/font-family/style.scss
@@ -0,0 +1,5 @@
+.block-editor-font-family-control {
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-10;
+	}
+}
diff --git a/packages/block-editor/src/components/font-sizes/README.MD b/packages/block-editor/src/components/font-sizes/README.MD
deleted file mode 100644
index adfe0ca8853d8d..00000000000000
--- a/packages/block-editor/src/components/font-sizes/README.MD
+++ /dev/null
@@ -1,90 +0,0 @@
-# FontSizePicker
-
-FontSizePicker is a React component that renders a UI that allows users to select a font size.
-The component renders a user interface that allows the user to select predefined (common) font sizes and contains an option that allows users to select custom font sizes (by choosing the value) if that functionality is enabled.
-There is an equivalent component exposed under @wordpress/components. The difference between this component and the @wordpress components one is that this component does not require the `fontSizes` and `disableCustomFontSizes` properties. The editor settings are used to compute the value of these props.
-
-## Usage
-
-
-```jsx
-import { FontSizePicker } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-...
-const MyFontSizePicker = () => {
-	const [ fontSize, setFontSize ] = useState( 16 );
-	const fontSizes = [
-		{
-			name: __( 'Small' ),
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: __( 'Big' ),
-			slug: 'big',
-			size: 26,
-		},
-	];
-	const fallbackFontSize = 16;
-
-	return (
-		<FontSizePicker
-			__nextHasNoMarginBottom
-			value={ fontSize }
-			fallbackFontSize={ fallbackFontSize }
-			onChange={ ( newFontSize ) => {
-				setFontSize( newFontSize );
-			} }
-		/>
-	);
-} );
-
-...
-
-<MyFontSizePicker />
-```
-
-## Props
-
-The component accepts the following props:
-
-
-### fallbackFontSize
-
-If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.
-
-- Type: `Number`
-- Required: No
-
-### onChange
-
-A function that receives the new font size value.
-If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font size to undefined or set the font size a starting value.
-
-- Type: `function`
-- Required: Yes
-
-### value
-
-The current font size value.
-
-- Type: `Number`
-- Required: No
-
-### withSlider
-
-If `true`, the UI will contain a slider, instead of a numeric text input field. If `false`, no slider will be present.
-
-- Type: `Boolean`
-- Required: no
-- Default: `false`
-
-### __nextHasNoMarginBottom
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Type: `Boolean`
--   Required: no
--   Default: `false`
diff --git a/packages/block-editor/src/components/font-sizes/README.md b/packages/block-editor/src/components/font-sizes/README.md
new file mode 100644
index 00000000000000..69354b90f2a351
--- /dev/null
+++ b/packages/block-editor/src/components/font-sizes/README.md
@@ -0,0 +1,81 @@
+# FontSizePicker
+
+FontSizePicker is a React component that renders a UI that allows users to select a font size.
+The component renders a user interface that allows the user to select predefined (common) font sizes and contains an option that allows users to select custom font sizes (by choosing the value) if that functionality is enabled.
+There is an equivalent component exposed under @wordpress/components. The difference between this component and the @wordpress components one is that this component does not require the `fontSizes` and `disableCustomFontSizes` properties. The editor settings are used to compute the value of these props.
+
+## Usage
+
+
+```jsx
+import { FontSizePicker } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+...
+const MyFontSizePicker = () => {
+	const [ fontSize, setFontSize ] = useState( 16 );
+	const fontSizes = [
+		{
+			name: __( 'Small' ),
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: __( 'Big' ),
+			slug: 'big',
+			size: 26,
+		},
+	];
+	const fallbackFontSize = 16;
+
+	return (
+		<FontSizePicker
+			value={ fontSize }
+			fallbackFontSize={ fallbackFontSize }
+			onChange={ ( newFontSize ) => {
+				setFontSize( newFontSize );
+			} }
+		/>
+	);
+} );
+
+...
+
+<MyFontSizePicker />
+```
+
+## Props
+
+The component accepts the following props:
+
+
+### fallbackFontSize
+
+If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.
+
+- Type: `Number`
+- Required: No
+
+### onChange
+
+A function that receives the new font size value.
+If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font size to undefined or set the font size a starting value.
+
+- Type: `function`
+- Required: Yes
+
+### value
+
+The current font size value.
+
+- Type: `Number`
+- Required: No
+
+### withSlider
+
+If `true`, the UI will contain a slider, instead of a numeric text input field. If `false`, no slider will be present.
+
+- Type: `Boolean`
+- Required: no
+- Default: `false`
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..595011b68bafb6 100644
--- a/packages/block-editor/src/components/font-sizes/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -6,18 +6,17 @@
 
 // Defaults.
 const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
-const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';
 const DEFAULT_SCALE_FACTOR = 1;
-const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
- * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
- * If a single font size is specified, it is scaled up and down by
- * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
- * maximum sizes.
+ * If a single font size is specified, it is scaled up and down using a logarithmic scale.
  *
  * @example
  * ```js
@@ -33,13 +32,13 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
- * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
- * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
- * @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.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
+ * @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 {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -47,12 +46,16 @@ export function getComputedFluidTypographyValue( {
 	minimumFontSize,
 	maximumFontSize,
 	fontSize,
-	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
-	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+	minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+	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.
@@ -100,6 +103,26 @@ export function getComputedFluidTypographyValue( {
 		 * the given font size multiplied by the min font size scale factor.
 		 */
 		if ( ! minimumFontSize ) {
+			const fontSizeValueInPx =
+				fontSizeParsed.unit === 'px'
+					? fontSizeParsed.value
+					: fontSizeParsed.value * 16;
+
+			/*
+			 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+			 * that is, how quickly the size factor reaches 0 given increasing font size values.
+			 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+			 * The scale factor is constrained between min and max values.
+			 */
+			const minimumFontSizeFactor = Math.min(
+				Math.max(
+					1 - 0.075 * Math.log2( fontSizeValueInPx ),
+					DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
+				),
+				DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
+			);
+
+			// Calculates the minimum font size.
 			const calculatedMinimumFontSize = roundToPrecision(
 				fontSizeParsed.value * minimumFontSizeFactor,
 				3
@@ -140,43 +163,49 @@ export function getComputedFluidTypographyValue( {
 	} );
 
 	// Viewport widths defined for fluid typography. Normalize units
-	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
-		maximumViewPortWidth,
+	const maximumViewportWidthParsed = getTypographyValueAndUnit(
+		maximumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
-	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
-		minimumViewPortWidth,
+	const minimumViewportWidthParsed = getTypographyValueAndUnit(
+		minimumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
 
 	// Protect against unsupported units.
 	if (
-		! maximumViewPortWidthParsed ||
-		! minumumViewPortWidthParsed ||
+		! maximumViewportWidthParsed ||
+		! minimumViewportWidthParsed ||
 		! minimumFontSizeRem
 	) {
 		return null;
 	}
 
+	// Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
+	const linearDenominator =
+		maximumViewportWidthParsed.value - minimumViewportWidthParsed.value;
+	if ( ! linearDenominator ) {
+		return null;
+	}
+
 	// Build CSS rule.
 	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
-	const minViewPortWidthOffsetValue = roundToPrecision(
-		minumumViewPortWidthParsed.value / 100,
+	const minViewportWidthOffsetValue = roundToPrecision(
+		minimumViewportWidthParsed.value / 100,
 		3
 	);
 
-	const viewPortWidthOffset =
-		roundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit;
+	const viewportWidthOffset =
+		roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit;
 	const linearFactor =
 		100 *
 		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
-			( maximumViewPortWidthParsed.value -
-				minumumViewPortWidthParsed.value ) );
+			linearDenominator );
 	const linearFactorScaled = roundToPrecision(
 		( linearFactor || 1 ) * scaleFactor,
 		3
 	);
-	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewportWidthOffset }) * ${ linearFactorScaled })`;
 
 	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
 }
diff --git a/packages/block-editor/src/components/font-sizes/font-size-picker.js b/packages/block-editor/src/components/font-sizes/font-size-picker.js
index 9f195310367fc1..959b2c23806ded 100644
--- a/packages/block-editor/src/components/font-sizes/font-size-picker.js
+++ b/packages/block-editor/src/components/font-sizes/font-size-picker.js
@@ -6,17 +6,19 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 function FontSizePicker( props ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
-	const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' );
+	const [ fontSizes, customFontSize ] = useSettings(
+		'typography.fontSizes',
+		'typography.customFontSize'
+	);
 
 	return (
 		<BaseFontSizePicker
 			{ ...props }
 			fontSizes={ fontSizes }
-			disableCustomFontSizes={ disableCustomFontSizes }
+			disableCustomFontSizes={ ! customFontSize }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
index 15805431a959fb..27b1cfe8c994a0 100644
--- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js
@@ -17,6 +17,13 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			delete logged[ key ];
 		}
 	} );
+	it( 'should return `null` when given a font size is not a support value+unit', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize:
+				'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
 
 	it( 'should return a fluid font size when given a min and max font size', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
@@ -24,7 +31,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSize: '45px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+			'clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.953), 45px)'
 		);
 	} );
 
@@ -33,7 +40,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -42,127 +49,139 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
 	it( 'should return a fluid font size when given a min and max viewport width', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			minimumViewPortWidth: '500px',
-			maximumViewPortWidth: '1000px',
+			minimumViewportWidth: '500px',
+			maximumViewportWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
 		);
 	} );
 
+	it( 'should return `null` when maximum and minimum viewport width are equal', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			minimumViewportWidth: '500px',
+			maximumViewportWidth: '500px',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
+
 	it( 'should return a fluid font size when given a scale factor', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
 		);
 	} );
 
-	it( 'should return a fluid font size when given a min and max font size factor', () => {
+	it( 'should return null when maximumViewportWidth is not a supported value or unit', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			minimumFontSizeFactor: '0.5',
-			maximumFontSizeFactor: '2',
+			maximumViewportWidth: 'min(calc(100% - 60px), 1200px)',
 		} );
-		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
-		);
+		expect( fluidTypographyValues ).toBeNull();
 	} );
 
-	describe( 'getTypographyValueAndUnit', () => {
-		it( 'should return the expected return values', () => {
-			[
-				{
-					value: null,
-					expected: null,
-				},
-				{
-					value: false,
-					expected: null,
-				},
-				{
-					value: true,
-					expected: null,
-				},
-				{
-					value: [ '10' ],
-					expected: null,
-				},
-				{
-					value: '10vh',
-					expected: null,
-				},
-				{
-					value: 'calc(2 * 10px)',
-					expected: null,
-				},
-				{
-					value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
-					expected: null,
-				},
-				{
-					value: '10',
-					expected: {
-						value: 10,
-						unit: 'px',
-					},
+	it( 'should return `null` font size when minimumViewportWidth is not a supported value or unit', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '33px',
+			minimumViewportWidth: 'calc(100% - 60px)',
+		} );
+		expect( fluidTypographyValues ).toBeNull();
+	} );
+} );
+
+describe( 'getTypographyValueAndUnit', () => {
+	it( 'should return the expected return values', () => {
+		[
+			{
+				value: null,
+				expected: null,
+			},
+			{
+				value: false,
+				expected: null,
+			},
+			{
+				value: true,
+				expected: null,
+			},
+			{
+				value: [ '10' ],
+				expected: null,
+			},
+			{
+				value: '10vh',
+				expected: null,
+			},
+			{
+				value: 'calc(2 * 10px)',
+				expected: null,
+			},
+			{
+				value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
+				expected: null,
+			},
+			{
+				value: '10',
+				expected: {
+					value: 10,
+					unit: 'px',
 				},
-				{
+			},
+			{
+				value: 11,
+				expected: {
 					value: 11,
-					expected: {
-						value: 11,
-						unit: 'px',
-					},
+					unit: 'px',
 				},
-				{
+			},
+			{
+				value: 11.234,
+				expected: {
 					value: 11.234,
-					expected: {
-						value: 11.234,
-						unit: 'px',
-					},
+					unit: 'px',
 				},
-				{
-					value: '12rem',
-					expected: {
-						value: 12,
-						unit: 'rem',
-					},
+			},
+			{
+				value: '12rem',
+				expected: {
+					value: 12,
+					unit: 'rem',
 				},
-				{
-					value: '12px',
-					expected: {
-						value: 12,
-						unit: 'px',
-					},
+			},
+			{
+				value: '12px',
+				expected: {
+					value: 12,
+					unit: 'px',
 				},
-				{
-					value: '12em',
-					expected: {
-						value: 12,
-						unit: 'em',
-					},
+			},
+			{
+				value: '12em',
+				expected: {
+					value: 12,
+					unit: 'em',
 				},
-				{
-					value: '12.74em',
-					expected: {
-						value: 12.74,
-						unit: 'em',
-					},
+			},
+			{
+				value: '12.74em',
+				expected: {
+					value: 12.74,
+					unit: 'em',
 				},
-			].forEach( ( { value, expected } ) => {
-				expect( getTypographyValueAndUnit( value ) ).toEqual(
-					expected
-				);
-			} );
+			},
+		].forEach( ( { value, expected } ) => {
+			expect( getTypographyValueAndUnit( value ) ).toEqual( expected );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js
index 1237a13efd7db6..b43ed049507aa4 100644
--- a/packages/block-editor/src/components/font-sizes/utils.js
+++ b/packages/block-editor/src/components/font-sizes/utils.js
@@ -1,7 +1,14 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  *  Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.
@@ -20,7 +27,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 +48,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;
 	}
@@ -54,7 +63,7 @@ export function getFontSizeObjectByValue( fontSizes, value ) {
  *
  * @param {string} fontSizeSlug Slug of the fontSize.
  *
- * @return {string} String with the class corresponding to the fontSize passed.
+ * @return {string | undefined} String with the class corresponding to the fontSize passed.
  *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {
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..8402a2c23afeb3 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,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, pickBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,7 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import { getFontSize, getFontSizeClass } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const DEFAULT_FONT_SIZES = [];
 
@@ -57,13 +52,11 @@ export default ( ...fontSizeNames ) => {
 		compose( [
 			createHigherOrderComponent(
 				( WrappedComponent ) => ( props ) => {
-					const fontSizes =
-						useSetting( 'typography.fontSizes' ) ||
-						DEFAULT_FONT_SIZES;
+					const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 					return (
 						<WrappedComponent
 							{ ...props }
-							fontSizes={ fontSizes }
+							fontSizes={ fontSizes || DEFAULT_FONT_SIZES }
 						/>
 					);
 				},
@@ -107,9 +100,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
@@ -160,35 +153,40 @@ export default ( ...fontSizeNames ) => {
 						}
 
 						const newState = Object.entries(
-							pickBy(
-								fontSizeAttributeNames,
-								didAttributesChange
+							fontSizeAttributeNames
+						)
+							.filter( ( [ key, value ] ) =>
+								didAttributesChange( value, key )
 							)
-						).reduce(
-							(
-								newStateAccumulator,
-								[
-									fontSizeAttributeName,
-									customFontSizeAttributeName,
-								]
-							) => {
-								const fontSizeAttributeValue =
-									attributes[ fontSizeAttributeName ];
-								const fontSizeObject = getFontSize(
-									fontSizes,
-									fontSizeAttributeValue,
-									attributes[ customFontSizeAttributeName ]
-								);
-								newStateAccumulator[ fontSizeAttributeName ] = {
-									...fontSizeObject,
-									class: getFontSizeClass(
-										fontSizeAttributeValue
-									),
-								};
-								return newStateAccumulator;
-							},
-							{}
-						);
+							.reduce(
+								(
+									newStateAccumulator,
+									[
+										fontSizeAttributeName,
+										customFontSizeAttributeName,
+									]
+								) => {
+									const fontSizeAttributeValue =
+										attributes[ fontSizeAttributeName ];
+									const fontSizeObject = getFontSize(
+										fontSizes,
+										fontSizeAttributeValue,
+										attributes[
+											customFontSizeAttributeName
+										]
+									);
+									newStateAccumulator[
+										fontSizeAttributeName
+									] = {
+										...fontSizeObject,
+										class: getFontSizeClass(
+											fontSizeAttributeValue
+										),
+									};
+									return newStateAccumulator;
+								},
+								{}
+							);
 
 						return {
 							...previousState,
diff --git a/packages/block-editor/src/components/global-styles/README.md b/packages/block-editor/src/components/global-styles/README.md
new file mode 100644
index 00000000000000..2ddb23cd01f704
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/README.md
@@ -0,0 +1,190 @@
+# Global Styles
+
+This folder contains all the necessary APIs to manipulate the global styles data. It can be potentially extracted to its own package.
+
+# Available public APIs
+
+## useGlobalStylesReset
+
+A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
+
+```js
+import { useGlobalStylesReset } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ canReset, reset ] = useGlobalStylesReset();
+
+	return canReset ? <Button onClick={ () => reset() }>Reset</Button> : null;
+}
+```
+
+## useGlobalStylesOutput
+
+A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
+
+```js
+import {
+	useGlobalStylesOutput,
+	BlockEditorProvider,
+	BlockList,
+} from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ styles, settings ] = useGlobalStylesOutput();
+
+	return (
+		<BlockEditorProvider
+			settings={ {
+				styles,
+				__experimentalFeatures: settings,
+			} }
+		>
+			<BlockList />
+		</BlockEditorProvider>
+	);
+}
+```
+
+## useGlobalStyle
+
+A react hook used to retrieve the style applied to a given context.
+
+```js
+import { useGlobalStyle } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// Text color for the site root.
+	const [ color, setColor ] = useGlobalStyle( 'color.text' );
+
+	// The user modified color for the core paragraph block.
+	const [ pColor, setPColor ] = useGlobalStyle(
+		'color.text',
+		'core/paragraph',
+		'user'
+	);
+
+	return 'Something';
+}
+```
+
+## useGlobalSetting
+
+A react hook used to retrieve the setting applied to a given context.
+
+```js
+import { useGlobalSetting } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// The theme color palette.
+	const [ colorPalette, setColorPalette ] = useGlobalSetting(
+		'color.palette.theme'
+	);
+
+	// The theme color palette for the paragraph block, ignoring user changes.
+	// If the palette is not defined for the paragraph block, the root one is returned.
+	const [ pColor, setPColor ] = useGlobalSetting(
+		'color.palette.theme',
+		'core/paragraph',
+		'base'
+	);
+
+	return 'Something';
+}
+```
+
+## UI Components
+
+The global styles folder also offers a set of reusable UI components. These components follow a strict set of guidelines:
+
+-   They are independent of any context or any store dependency. They only rely on the props passed to them.
+-   They receive a similar set of props:
+
+    -   `value`: The value is a style object that maps closely the format used in `theme.json` and is also very close to the format of the `style` attributes for blocks. There are some differences with the block attributes due to the iteration process and the fact that we need to maintain compatibility with the existing blocks even if they predate the introduction of Global Styles and these UI components. An example value for a style object is:
+
+```js
+{
+	color: {
+		text: 'var:preset|color|blue',
+		background: '#FF0000',
+	},
+	typography: {
+		fontFamily: 'var:preset|font-family|base',
+		fontSize: '10px',
+		lineHeight: 1.5,
+	},
+	spacing: {
+		padding: 'var:preset|spacing|medium',
+	},
+	elements: {
+		link: {
+			color: {
+			text: 'var:preset|color|green',
+			},
+		},
+	},
+}
+```
+
+-   `onChange`: A callback that receives the new value and is called when the user changes the value of the UI component.
+-   `inheritedValue`: The inherited value is a style object that represents the combined value of the style inherited from the parent context in addition to the style applied to the current context. The format is the same as the `value` prop.
+-   `settings`: The settings are the theme.json settings. They are used to provide the UI components with the necessary information to render the UI. An example value for the settings is:
+
+```js
+{
+	color: {
+		palette: {
+			custom: [
+				{
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					slug: 'white',
+					color: '#FFFFFF',
+				},
+				{
+					slug: 'blue',
+					color: '#0000FF',
+				},
+			]
+		},
+		gradients: {
+			custom: [
+				{
+					slug: 'gradient-1',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+				{
+					slug: 'gradient-2',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+			]
+		},
+	},
+	typography: {
+		fontSizes: [
+			{
+				slug: 'small',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				size: '16px',
+			},
+			{
+				slug: 'large',
+				size: '24px',
+			},
+		],
+	}
+}
+```
+-   `defaultControls`: The default controls are the controls that are used by default to render the UI. They are used to provide the UI components with the necessary information to render the UI. An example value for the default controls for the `ColorPanel` component is:
+
+```js
+{
+	background: true,
+	text: true,
+	link: true,
+},
+```
diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js
new file mode 100644
index 00000000000000..bbb756cd78247d
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/advanced-panel.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextareaControl,
+	Notice,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { default as transformStyles } from '../../utils/transform-styles';
+
+export default function AdvancedPanel( {
+	value,
+	onChange,
+	inheritedValue = value,
+} ) {
+	// Custom CSS
+	const [ cssError, setCSSError ] = useState( null );
+	const customCSS = inheritedValue?.css;
+	function handleOnChange( newValue ) {
+		onChange( {
+			...value,
+			css: newValue,
+		} );
+		if ( cssError ) {
+			// Check if the new value is valid CSS, and pass a wrapping selector
+			// to ensure that `transformStyles` validates the CSS. Note that the
+			// wrapping selector here is not used in the actual output of any styles.
+			const [ transformed ] = transformStyles(
+				[ { css: newValue } ],
+				'.for-validation-only'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		// Check if the new value is valid CSS, and pass a wrapping selector
+		// to ensure that `transformStyles` validates the CSS. Note that the
+		// wrapping selector here is not used in the actual output of any styles.
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.for-validation-only'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			{ cssError && (
+				<Notice status="error" onRemove={ () => setCSSError( null ) }>
+					{ cssError }
+				</Notice>
+			) }
+			<TextareaControl
+				label={ __( 'Additional CSS' ) }
+				__nextHasNoMarginBottom
+				value={ customCSS }
+				onChange={ ( newValue ) => handleOnChange( newValue ) }
+				onBlur={ handleOnBlur }
+				className="block-editor-global-styles-advanced-panel__custom-css-input"
+				spellCheck={ false }
+			/>
+		</VStack>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
new file mode 100644
index 00000000000000..c66ea01bce5498
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { useCallback, Platform } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import BackgroundImageControl from '../background-image-control';
+import { useToolsPanelDropdownMenuProps } from './utils';
+import { setImmutably } from '../../utils/object';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_CONTROLS = {
+	backgroundImage: true,
+};
+
+/**
+ * Checks site settings to see if the background panel may be used.
+ * `settings.background.backgroundSize` exists also,
+ * but can only be used if settings?.background?.backgroundImage is `true`.
+ *
+ * @param {Object} settings Site settings
+ * @return {boolean}        Whether site settings has activated background panel.
+ */
+export function useHasBackgroundPanel( settings ) {
+	return Platform.OS === 'web' && settings?.background?.backgroundImage;
+}
+
+/**
+ * Checks if there is a current value in the background size block support
+ * attributes. Background size values include background size as well
+ * as background position.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background size value set.
+ */
+export function hasBackgroundSizeValue( style ) {
+	return (
+		style?.background?.backgroundPosition !== undefined ||
+		style?.background?.backgroundSize !== undefined
+	);
+}
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue( style ) {
+	return (
+		!! style?.background?.backgroundImage?.id ||
+		// Supports url() string values in theme.json.
+		'string' === typeof style?.background?.backgroundImage ||
+		!! style?.background?.backgroundImage?.url
+	);
+}
+
+function BackgroundToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+	headerLabel,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ headerLabel }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+export default function BackgroundImagePanel( {
+	as: Wrapper = BackgroundToolsPanel,
+	value,
+	onChange,
+	inheritedValue,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+	defaultValues = {},
+	headerLabel = __( 'Background image' ),
+} ) {
+	const showBackgroundImageControl = useHasBackgroundPanel( settings );
+	const resetBackground = () =>
+		onChange( setImmutably( value, [ 'background' ], {} ) );
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			background: {},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+			headerLabel={ headerLabel }
+		>
+			{ showBackgroundImageControl && (
+				<ToolsPanelItem
+					hasValue={ () => !! value?.background }
+					label={ __( 'Image' ) }
+					onDeselect={ resetBackground }
+					isShownByDefault={ defaultControls.backgroundImage }
+					panelId={ panelId }
+				>
+					<BackgroundImageControl
+						value={ value }
+						onChange={ onChange }
+						settings={ settings }
+						inheritedValue={ inheritedValue }
+						defaultControls={ defaultControls }
+						defaultValues={ defaultValues }
+					/>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
new file mode 100644
index 00000000000000..aea8e67f5b5944
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -0,0 +1,312 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BorderBoxControl,
+	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalIsDefinedBorder as isDefinedBorder,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	BaseControl,
+} from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BorderRadiusControl from '../border-radius-control';
+import { useColorsPerOrigin } from './hooks';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { setImmutably } from '../../utils/object';
+import { useBorderPanelLabel } from '../../hooks/border';
+import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
+
+export function useHasBorderPanel( settings ) {
+	const controls = Object.values( useHasBorderPanelControls( settings ) );
+	return controls.some( Boolean );
+}
+
+export function useHasBorderPanelControls( settings ) {
+	const controls = {
+		hasBorderColor: useHasBorderColorControl( settings ),
+		hasBorderRadius: useHasBorderRadiusControl( settings ),
+		hasBorderStyle: useHasBorderStyleControl( settings ),
+		hasBorderWidth: useHasBorderWidthControl( settings ),
+		hasShadow: useHasShadowControl( settings ),
+	};
+
+	return controls;
+}
+
+function useHasBorderColorControl( settings ) {
+	return settings?.border?.color;
+}
+
+function useHasBorderRadiusControl( settings ) {
+	return settings?.border?.radius;
+}
+
+function useHasBorderStyleControl( settings ) {
+	return settings?.border?.style;
+}
+
+function useHasBorderWidthControl( settings ) {
+	return settings?.border?.width;
+}
+
+function useHasShadowControl( settings ) {
+	const shadows = useShadowPresets( settings );
+	return !! settings?.shadow && shadows.length > 0;
+}
+
+function BorderToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+	label,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ label }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	radius: true,
+	color: true,
+	width: true,
+	shadow: true,
+};
+
+export default function BorderPanel( {
+	as: Wrapper = BorderToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	name,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const colors = useColorsPerOrigin( settings );
+	const decodeValue = useCallback(
+		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
+		[ settings ]
+	);
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const border = useMemo( () => {
+		if ( hasSplitBorders( inheritedValue?.border ) ) {
+			const borderValue = { ...inheritedValue?.border };
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				borderValue[ side ] = {
+					...borderValue[ side ],
+					color: decodeValue( borderValue[ side ]?.color ),
+				};
+			} );
+			return borderValue;
+		}
+		return {
+			...inheritedValue?.border,
+			color: inheritedValue?.border?.color
+				? decodeValue( inheritedValue?.border?.color )
+				: undefined,
+		};
+	}, [ inheritedValue?.border, decodeValue ] );
+	const setBorder = ( newBorder ) =>
+		onChange( { ...value, border: newBorder } );
+	const showBorderColor = useHasBorderColorControl( settings );
+	const showBorderStyle = useHasBorderStyleControl( settings );
+	const showBorderWidth = useHasBorderWidthControl( settings );
+
+	// Border radius.
+	const showBorderRadius = useHasBorderRadiusControl( settings );
+	const borderRadiusValues = decodeValue( border?.radius );
+	const setBorderRadius = ( newBorderRadius ) =>
+		setBorder( { ...border, radius: newBorderRadius } );
+	const hasBorderRadius = () => {
+		const borderValues = value?.border?.radius;
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	};
+	const hasShadowControl = useHasShadowControl( settings );
+
+	// Shadow
+	const shadow = decodeValue( inheritedValue?.shadow );
+	const shadowPresets = settings?.shadow?.presets ?? {};
+	const mergedShadowPresets =
+		shadowPresets.custom ??
+		shadowPresets.theme ??
+		shadowPresets.default ??
+		[];
+	const setShadow = ( newValue ) => {
+		const slug = mergedShadowPresets?.find(
+			( { shadow: shadowName } ) => shadowName === newValue
+		)?.slug;
+
+		onChange(
+			setImmutably(
+				value,
+				[ 'shadow' ],
+				slug ? `var:preset|shadow|${ slug }` : newValue || undefined
+			)
+		);
+	};
+	const hasShadow = () => !! value?.shadow;
+	const resetShadow = () => setShadow( undefined );
+
+	const resetBorder = () => {
+		if ( hasBorderRadius() ) {
+			return setBorder( { radius: value?.border?.radius } );
+		}
+
+		setBorder( undefined );
+	};
+
+	const onBorderChange = ( newBorder ) => {
+		// Ensure we have a visible border style when a border width or
+		// color is being selected.
+		const updatedBorder = { ...newBorder };
+
+		if ( hasSplitBorders( updatedBorder ) ) {
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				if ( updatedBorder[ side ] ) {
+					updatedBorder[ side ] = {
+						...updatedBorder[ side ],
+						color: encodeColorValue( updatedBorder[ side ]?.color ),
+					};
+				}
+			} );
+		} else if ( updatedBorder ) {
+			updatedBorder.color = encodeColorValue( updatedBorder.color );
+		}
+
+		// As radius is maintained separately to color, style, and width
+		// maintain its value. Undefined values here will be cleaned when
+		// global styles are saved.
+		setBorder( { radius: border?.radius, ...updatedBorder } );
+	};
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			border: undefined,
+			shadow: undefined,
+		};
+	}, [] );
+
+	const showBorderByDefault =
+		defaultControls?.color || defaultControls?.width;
+
+	const hasBorderControl =
+		showBorderColor ||
+		showBorderStyle ||
+		showBorderWidth ||
+		showBorderRadius;
+
+	const label = useBorderPanelLabel( {
+		blockName: name,
+		hasShadowControl,
+		hasBorderControl,
+	} );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+			label={ label }
+		>
+			{ ( showBorderWidth || showBorderColor ) && (
+				<ToolsPanelItem
+					hasValue={ () => isDefinedBorder( value?.border ) }
+					label={ __( 'Border' ) }
+					onDeselect={ () => resetBorder() }
+					isShownByDefault={ showBorderByDefault }
+					panelId={ panelId }
+				>
+					<BorderBoxControl
+						colors={ colors }
+						enableAlpha
+						enableStyle={ showBorderStyle }
+						onChange={ onBorderChange }
+						popoverOffset={ 40 }
+						popoverPlacement="left-start"
+						value={ border }
+						__experimentalIsRenderedInSidebar
+						size="__unstable-large"
+						hideLabelFromVision={ ! hasShadowControl }
+						label={ __( 'Border' ) }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ () => setBorderRadius( undefined ) }
+					isShownByDefault={ defaultControls.radius }
+					panelId={ panelId }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ ( newValue ) => {
+							setBorderRadius( newValue || undefined );
+						} }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasShadowControl && (
+				<ToolsPanelItem
+					label={ __( 'Shadow' ) }
+					hasValue={ hasShadow }
+					onDeselect={ resetShadow }
+					isShownByDefault={ defaultControls.shadow }
+					panelId={ panelId }
+				>
+					{ hasBorderControl ? (
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Shadow' ) }
+						</BaseControl.VisualLabel>
+					) : null }
+
+					<ItemGroup isBordered isSeparated>
+						<ShadowPopover
+							shadow={ shadow }
+							onShadowChange={ setShadow }
+							settings={ settings }
+						/>
+					</ItemGroup>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
new file mode 100644
index 00000000000000..7c5257ae93bfaa
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -0,0 +1,729 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	ColorIndicator,
+	Flex,
+	FlexItem,
+	Dropdown,
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from '../colors-gradients/control';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { setImmutably } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
+
+export function useHasColorPanel( settings ) {
+	const hasTextPanel = useHasTextPanel( settings );
+	const hasBackgroundPanel = useHasBackgroundColorPanel( settings );
+	const hasLinkPanel = useHasLinkPanel( settings );
+	const hasHeadingPanel = useHasHeadingPanel( settings );
+	const hasButtonPanel = useHasButtonPanel( settings );
+	const hasCaptionPanel = useHasCaptionPanel( settings );
+
+	return (
+		hasTextPanel ||
+		hasBackgroundPanel ||
+		hasLinkPanel ||
+		hasHeadingPanel ||
+		hasButtonPanel ||
+		hasCaptionPanel
+	);
+}
+
+export function useHasTextPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.text &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasLinkPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.link &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasCaptionPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	return (
+		settings?.color?.caption &&
+		( colors?.length > 0 || settings?.color?.custom )
+	);
+}
+
+export function useHasHeadingPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.heading &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+export function useHasButtonPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.button &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+export function useHasBackgroundColorPanel( settings ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	return (
+		settings?.color?.background &&
+		( colors?.length > 0 ||
+			settings?.color?.custom ||
+			gradients?.length > 0 ||
+			settings?.color?.customGradient )
+	);
+}
+
+function ColorToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Elements' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			hasInnerWrapper
+			headingLevel={ 3 }
+			className="color-block-support-panel"
+			__experimentalFirstVisibleItemClass="first"
+			__experimentalLastVisibleItemClass="last"
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			<div className="color-block-support-panel__inner-wrapper">
+				{ children }
+			</div>
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	text: true,
+	background: true,
+	link: true,
+	heading: true,
+	button: true,
+	caption: true,
+};
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+};
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					<ColorIndicator colorValue={ indicator } />
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem className="block-editor-panel-color-gradient-settings__color-name">
+			{ label }
+		</FlexItem>
+	</HStack>
+);
+
+function ColorPanelTab( {
+	isGradient,
+	inheritedValue,
+	userValue,
+	setValue,
+	colorGradientControlSettings,
+} ) {
+	return (
+		<ColorGradientControl
+			{ ...colorGradientControlSettings }
+			showTitle={ false }
+			enableAlpha
+			__experimentalIsRenderedInSidebar
+			colorValue={ isGradient ? undefined : inheritedValue }
+			gradientValue={ isGradient ? inheritedValue : undefined }
+			onColorChange={ isGradient ? undefined : setValue }
+			onGradientChange={ isGradient ? setValue : undefined }
+			clearable={ inheritedValue === userValue }
+			headingLevel={ 3 }
+		/>
+	);
+}
+
+function ColorPanelDropdown( {
+	label,
+	hasValue,
+	resetValue,
+	isShownByDefault,
+	indicators,
+	tabs,
+	colorGradientControlSettings,
+	panelId,
+} ) {
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+	return (
+		<ToolsPanelItem
+			className="block-editor-tools-panel-color-gradient-settings__item"
+			hasValue={ hasValue }
+			label={ label }
+			onDeselect={ resetValue }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="block-editor-tools-panel-color-gradient-settings__dropdown"
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					const toggleProps = {
+						onClick: onToggle,
+						className: clsx(
+							'block-editor-panel-color-gradient-settings__dropdown',
+							{ 'is-open': isOpen }
+						),
+						'aria-expanded': isOpen,
+					};
+
+					return (
+						<Button __next40pxDefaultSize { ...toggleProps }>
+							<LabeledColorIndicators
+								indicators={ indicators }
+								label={ label }
+							/>
+						</Button>
+					);
+				} }
+				renderContent={ () => (
+					<DropdownContentWrapper paddingSize="none">
+						<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+							{ tabs.length === 1 && (
+								<ColorPanelTab
+									key={ firstTabKey }
+									{ ...firstTab }
+									colorGradientControlSettings={
+										colorGradientControlSettings
+									}
+								/>
+							) }
+							{ tabs.length > 1 && (
+								<Tabs defaultTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
+										const { key: tabKey, ...restTabProps } =
+											tab;
+										return (
+											<Tabs.TabPanel
+												key={ tabKey }
+												tabId={ tabKey }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													key={ tabKey }
+													{ ...restTabProps }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
+										);
+									} ) }
+								</Tabs>
+							) }
+						</div>
+					</DropdownContentWrapper>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}
+
+export default function ColorPanel( {
+	as: Wrapper = ColorToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+	children,
+} ) {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
+	const areCustomGradientsEnabled = settings?.color?.customGradient;
+	const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
+	const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = ( colorValue ) => {
+		const allColors = colors.flatMap(
+			( { colors: originColors } ) => originColors
+		);
+		const colorObject = allColors.find(
+			( { color } ) => color === colorValue
+		);
+		return colorObject
+			? 'var:preset|color|' + colorObject.slug
+			: colorValue;
+	};
+	const encodeGradientValue = ( gradientValue ) => {
+		const allGradients = gradients.flatMap(
+			( { gradients: originGradients } ) => originGradients
+		);
+		const gradientObject = allGradients.find(
+			( { gradient } ) => gradient === gradientValue
+		);
+		return gradientObject
+			? 'var:preset|gradient|' + gradientObject.slug
+			: gradientValue;
+	};
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const userBackgroundColor = decodeValue( value?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const userGradient = decodeValue( value?.color?.gradient );
+	const hasBackground = () => !! userBackgroundColor || !! userGradient;
+	const setBackgroundColor = ( newColor ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			encodeColorValue( newColor )
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+	const setGradient = ( newGradient ) => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'gradient' ],
+			encodeGradientValue( newGradient )
+		);
+		newValue.color.background = undefined;
+		onChange( newValue );
+	};
+	const resetBackground = () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	};
+
+	// Links
+	const showLinkPanel = useHasLinkPanel( settings );
+	const linkColor = decodeValue(
+		inheritedValue?.elements?.link?.color?.text
+	);
+	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
+	const setLinkColor = ( newColor ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			)
+		);
+	};
+	const hoverLinkColor = decodeValue(
+		inheritedValue?.elements?.link?.[ ':hover' ]?.color?.text
+	);
+	const userHoverLinkColor = decodeValue(
+		value?.elements?.link?.[ ':hover' ]?.color?.text
+	);
+	const setHoverLinkColor = ( newColor ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'elements', 'link', ':hover', 'color', 'text' ],
+				encodeColorValue( newColor )
+			)
+		);
+	};
+	const hasLink = () => !! userLinkColor || !! userHoverLinkColor;
+	const resetLink = () => {
+		let newValue = setImmutably(
+			value,
+			[ 'elements', 'link', ':hover', 'color', 'text' ],
+			undefined
+		);
+		newValue = setImmutably(
+			newValue,
+			[ 'elements', 'link', 'color', 'text' ],
+			undefined
+		);
+		onChange( newValue );
+	};
+
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		let changedObject = setImmutably(
+			value,
+			[ 'color', 'text' ],
+			encodeColorValue( newColor )
+		);
+		if ( textColor === linkColor ) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			);
+		}
+
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
+	// Elements
+	const elements = [
+		{
+			name: 'caption',
+			label: __( 'Captions' ),
+			showPanel: useHasCaptionPanel( settings ),
+		},
+		{
+			name: 'button',
+			label: __( 'Button' ),
+			showPanel: useHasButtonPanel( settings ),
+		},
+		{
+			name: 'heading',
+			label: __( 'Heading' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h1',
+			label: __( 'H1' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h2',
+			label: __( 'H2' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h3',
+			label: __( 'H3' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h4',
+			label: __( 'H4' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h5',
+			label: __( 'H5' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+		{
+			name: 'h6',
+			label: __( 'H6' ),
+			showPanel: useHasHeadingPanel( settings ),
+		},
+	];
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			color: undefined,
+			elements: {
+				...previousValue?.elements,
+				link: {
+					...previousValue?.elements?.link,
+					color: undefined,
+					':hover': {
+						color: undefined,
+					},
+				},
+				...elements.reduce( ( acc, element ) => {
+					return {
+						...acc,
+						[ element.name ]: {
+							...previousValue?.elements?.[ element.name ],
+							color: undefined,
+						},
+					};
+				}, {} ),
+			},
+		};
+	}, [] );
+
+	const items = [
+		showTextPanel && {
+			key: 'text',
+			label: __( 'Text' ),
+			hasValue: hasTextColor,
+			resetValue: resetTextColor,
+			isShownByDefault: defaultControls.text,
+			indicators: [ textColor ],
+			tabs: [
+				{
+					key: 'text',
+					label: __( 'Text' ),
+					inheritedValue: textColor,
+					setValue: setTextColor,
+					userValue: userTextColor,
+				},
+			],
+		},
+		showBackgroundPanel && {
+			key: 'background',
+			label: __( 'Background' ),
+			hasValue: hasBackground,
+			resetValue: resetBackground,
+			isShownByDefault: defaultControls.background,
+			indicators: [ gradient ?? backgroundColor ],
+			tabs: [
+				hasSolidColors && {
+					key: 'background',
+					label: __( 'Color' ),
+					inheritedValue: backgroundColor,
+					setValue: setBackgroundColor,
+					userValue: userBackgroundColor,
+				},
+				hasGradientColors && {
+					key: 'gradient',
+					label: __( 'Gradient' ),
+					inheritedValue: gradient,
+					setValue: setGradient,
+					userValue: userGradient,
+					isGradient: true,
+				},
+			].filter( Boolean ),
+		},
+		showLinkPanel && {
+			key: 'link',
+			label: __( 'Link' ),
+			hasValue: hasLink,
+			resetValue: resetLink,
+			isShownByDefault: defaultControls.link,
+			indicators: [ linkColor, hoverLinkColor ],
+			tabs: [
+				{
+					key: 'link',
+					label: __( 'Default' ),
+					inheritedValue: linkColor,
+					setValue: setLinkColor,
+					userValue: userLinkColor,
+				},
+				{
+					key: 'hover',
+					label: __( 'Hover' ),
+					inheritedValue: hoverLinkColor,
+					setValue: setHoverLinkColor,
+					userValue: userHoverLinkColor,
+				},
+			],
+		},
+	].filter( Boolean );
+
+	elements.forEach( ( { name, label, showPanel } ) => {
+		if ( ! showPanel ) {
+			return;
+		}
+
+		const elementBackgroundColor = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.background
+		);
+		const elementGradient = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.gradient
+		);
+		const elementTextColor = decodeValue(
+			inheritedValue?.elements?.[ name ]?.color?.text
+		);
+		const elementBackgroundUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.background
+		);
+		const elementGradientUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.gradient
+		);
+		const elementTextUserColor = decodeValue(
+			value?.elements?.[ name ]?.color?.text
+		);
+		const hasElement = () =>
+			!! (
+				elementTextUserColor ||
+				elementBackgroundUserColor ||
+				elementGradientUserColor
+			);
+		const resetElement = () => {
+			const newValue = setImmutably(
+				value,
+				[ 'elements', name, 'color', 'background' ],
+				undefined
+			);
+			newValue.elements[ name ].color.gradient = undefined;
+			newValue.elements[ name ].color.text = undefined;
+			onChange( newValue );
+		};
+
+		const setElementTextColor = ( newTextColor ) => {
+			onChange(
+				setImmutably(
+					value,
+					[ 'elements', name, 'color', 'text' ],
+					encodeColorValue( newTextColor )
+				)
+			);
+		};
+		const setElementBackgroundColor = ( newBackgroundColor ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'elements', name, 'color', 'background' ],
+				encodeColorValue( newBackgroundColor )
+			);
+			newValue.elements[ name ].color.gradient = undefined;
+			onChange( newValue );
+		};
+		const setElementGradient = ( newGradient ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'elements', name, 'color', 'gradient' ],
+				encodeGradientValue( newGradient )
+			);
+			newValue.elements[ name ].color.background = undefined;
+			onChange( newValue );
+		};
+		const supportsTextColor = true;
+		// Background color is not supported for `caption`
+		// as there isn't yet a way to set padding for the element.
+		const supportsBackground = name !== 'caption';
+
+		items.push( {
+			key: name,
+			label,
+			hasValue: hasElement,
+			resetValue: resetElement,
+			isShownByDefault: defaultControls[ name ],
+			indicators:
+				supportsTextColor && supportsBackground
+					? [
+							elementTextColor,
+							elementGradient ?? elementBackgroundColor,
+					  ]
+					: [
+							supportsTextColor
+								? elementTextColor
+								: elementGradient ?? elementBackgroundColor,
+					  ],
+			tabs: [
+				hasSolidColors &&
+					supportsTextColor && {
+						key: 'text',
+						label: __( 'Text' ),
+						inheritedValue: elementTextColor,
+						setValue: setElementTextColor,
+						userValue: elementTextUserColor,
+					},
+				hasSolidColors &&
+					supportsBackground && {
+						key: 'background',
+						label: __( 'Background' ),
+						inheritedValue: elementBackgroundColor,
+						setValue: setElementBackgroundColor,
+						userValue: elementBackgroundUserColor,
+					},
+				hasGradientColors &&
+					supportsBackground && {
+						key: 'gradient',
+						label: __( 'Gradient' ),
+						inheritedValue: elementGradient,
+						setValue: setElementGradient,
+						userValue: elementGradientUserColor,
+						isGradient: true,
+					},
+			].filter( Boolean ),
+		} );
+	} );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ items.map( ( item ) => {
+				const { key, ...restItem } = item;
+				return (
+					<ColorPanelDropdown
+						key={ key }
+						{ ...restItem }
+						colorGradientControlSettings={ {
+							colors,
+							disableCustomColors: ! areCustomSolidsEnabled,
+							gradients,
+							disableCustomGradients: ! areCustomGradientsEnabled,
+						} }
+						panelId={ panelId }
+					/>
+				);
+			} ) }
+			{ children }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/color-panel.native.js b/packages/block-editor/src/components/global-styles/color-panel.native.js
new file mode 100644
index 00000000000000..87002b5fa3e22f
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/color-panel.native.js
@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import { getValueFromVariable } from './utils';
+import { setImmutably } from '../../utils/object';
+import ContrastChecker from '../contrast-checker';
+import InspectorControls from '../inspector-controls';
+import {
+	useHasColorPanel,
+	useHasTextPanel,
+	useHasBackgroundColorPanel,
+} from './color-panel.js';
+import { useGlobalStyles } from './use-global-styles-context';
+
+const ColorPanel = ( {
+	value,
+	inheritedValue = value,
+	onChange,
+	settings,
+} ) => {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles:
+				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = useCallback(
+		( colorValue ) => {
+			const allColors = colors.flatMap(
+				( { colors: originColors } ) => originColors
+			);
+			const colorObject = allColors.find(
+				( { color } ) => color === colorValue
+			);
+			return colorObject
+				? 'var:preset|color|' + colorObject.slug
+				: colorValue;
+		},
+		[ colors ]
+	);
+	const encodeGradientValue = useCallback(
+		( gradientValue ) => {
+			const allGradients = gradients.flatMap(
+				( { gradients: originGradients } ) => originGradients
+			);
+			const gradientObject = allGradients.find(
+				( { gradient } ) => gradient === gradientValue
+			);
+			return gradientObject
+				? 'var:preset|gradient|' + gradientObject.slug
+				: gradientValue;
+		},
+		[ gradients ]
+	);
+
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const setTextColor = useCallback(
+		( newColor ) => {
+			onChange(
+				setImmutably(
+					value,
+					[ 'color', 'text' ],
+					encodeColorValue( newColor )
+				)
+			);
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const resetTextColor = useCallback(
+		() => setTextColor( undefined ),
+		[ setTextColor ]
+	);
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundColorPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const setBackgroundColor = useCallback(
+		( newColor ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'background' ],
+				encodeColorValue( newColor )
+			);
+			newValue.color.gradient = undefined;
+			onChange( newValue );
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const setGradient = useCallback(
+		( newGradient ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'gradient' ],
+				encodeGradientValue( newGradient )
+			);
+			newValue.color.background = undefined;
+			onChange( newValue );
+		},
+		[ encodeGradientValue, onChange, value ]
+	);
+	const resetBackground = useCallback( () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	}, [ onChange, value ] );
+	const currentGradients = settings?.color?.gradients;
+	const withoutGradientsSupport =
+		Array.isArray( currentGradients ) && currentGradients.length === 0;
+
+	const items = useMemo(
+		() =>
+			[
+				showTextPanel && {
+					label: __( 'Text' ),
+					colorValue: textColor,
+					onColorChange: setTextColor,
+					onColorCleared: resetTextColor,
+				},
+				showBackgroundPanel && {
+					label: __( 'Background' ),
+					colorValue: backgroundColor,
+					onColorChange: setBackgroundColor,
+					onColorCleared: resetBackground,
+					onGradientChange: ! withoutGradientsSupport
+						? setGradient
+						: undefined,
+					gradientValue: gradient,
+				},
+			].filter( Boolean ),
+		[
+			backgroundColor,
+			gradient,
+			resetBackground,
+			resetTextColor,
+			setBackgroundColor,
+			setGradient,
+			setTextColor,
+			showBackgroundPanel,
+			showTextPanel,
+			textColor,
+			withoutGradientsSupport,
+		]
+	);
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const currentDetectedTextColor =
+			globalStyles?.color || baseGlobalStyles?.text;
+		const currentDetectedBackgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( currentDetectedTextColor );
+		setDetectedBackgroundColor( currentDetectedBackgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ items }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export { useHasColorPanel };
+export default ColorPanel;
diff --git a/packages/edit-site/src/components/global-styles/context.js b/packages/block-editor/src/components/global-styles/context.js
similarity index 100%
rename from packages/edit-site/src/components/global-styles/context.js
rename to packages/block-editor/src/components/global-styles/context.js
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
new file mode 100644
index 00000000000000..385f28b668eda2
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -0,0 +1,704 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	BoxControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+} from '@wordpress/components';
+import { Icon, alignNone, stretchWide } from '@wordpress/icons';
+import { useCallback, useState, Platform } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import SpacingSizesControl from '../spacing-sizes-control';
+import HeightControl from '../height-control';
+import ChildLayoutControl from '../child-layout-control';
+import AspectRatioTool from '../dimensions-tool/aspect-ratio-tool';
+import { cleanEmptyObject } from '../../hooks/utils';
+import { setImmutably } from '../../utils/object';
+
+const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
+
+export function useHasDimensionsPanel( settings ) {
+	const hasContentSize = useHasContentSize( settings );
+	const hasWideSize = useHasWideSize( settings );
+	const hasPadding = useHasPadding( settings );
+	const hasMargin = useHasMargin( settings );
+	const hasGap = useHasGap( settings );
+	const hasMinHeight = useHasMinHeight( settings );
+	const hasAspectRatio = useHasAspectRatio( settings );
+	const hasChildLayout = useHasChildLayout( settings );
+
+	return (
+		Platform.OS === 'web' &&
+		( hasContentSize ||
+			hasWideSize ||
+			hasPadding ||
+			hasMargin ||
+			hasGap ||
+			hasMinHeight ||
+			hasAspectRatio ||
+			hasChildLayout )
+	);
+}
+
+function useHasContentSize( settings ) {
+	return settings?.layout?.contentSize;
+}
+
+function useHasWideSize( settings ) {
+	return settings?.layout?.wideSize;
+}
+
+function useHasPadding( settings ) {
+	return settings?.spacing?.padding;
+}
+
+function useHasMargin( settings ) {
+	return settings?.spacing?.margin;
+}
+
+function useHasGap( settings ) {
+	return settings?.spacing?.blockGap;
+}
+
+function useHasMinHeight( settings ) {
+	return settings?.dimensions?.minHeight;
+}
+
+function useHasAspectRatio( settings ) {
+	return settings?.dimensions?.aspectRatio;
+}
+
+function useHasChildLayout( settings ) {
+	const {
+		type: parentLayoutType = 'default',
+		default: { type: defaultParentLayoutType = 'default' } = {},
+		allowSizingOnChildren = false,
+	} = settings?.parentLayout ?? {};
+
+	const support =
+		( defaultParentLayoutType === 'flex' ||
+			parentLayoutType === 'flex' ||
+			defaultParentLayoutType === 'grid' ||
+			parentLayoutType === 'grid' ) &&
+		allowSizingOnChildren;
+	return !! settings?.layout && support;
+}
+
+function useHasSpacingPresets( settings ) {
+	const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
+	return (
+		( defaultSpacingSizes !== false &&
+			spacingSizes?.default?.length > 0 ) ||
+		spacingSizes?.theme?.length > 0 ||
+		spacingSizes?.custom?.length > 0
+	);
+}
+
+function filterValuesBySides( values, sides ) {
+	// If no custom side configuration, all sides are opted into by default.
+	// Without any values, we have nothing to filter either.
+	if ( ! sides || ! values ) {
+		return values;
+	}
+
+	// Only include sides opted into within filtered values.
+	const filteredValues = {};
+	sides.forEach( ( side ) => {
+		if ( side === 'vertical' ) {
+			filteredValues.top = values.top;
+			filteredValues.bottom = values.bottom;
+		}
+		if ( side === 'horizontal' ) {
+			filteredValues.left = values.left;
+			filteredValues.right = values.right;
+		}
+		filteredValues[ side ] = values?.[ side ];
+	} );
+
+	return filteredValues;
+}
+
+function splitStyleValue( value ) {
+	// Check for shorthand value (a string value).
+	if ( value && typeof value === 'string' ) {
+		// Convert to value for individual sides for BoxControl.
+		return {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		};
+	}
+
+	return value;
+}
+
+function splitGapValue( value, isAxialGap ) {
+	if ( ! value ) {
+		return value;
+	}
+
+	// Check for shorthand value (a string value).
+	if ( typeof value === 'string' ) {
+		/*
+		 * Map the string value to appropriate sides for the spacing control depending
+		 * on whether the current block has axial gap support or not.
+		 *
+		 * Note: The axial value pairs must match for the spacing control to display
+		 * the appropriate horizontal/vertical sliders.
+		 */
+		return isAxialGap
+			? { top: value, right: value, bottom: value, left: value }
+			: { top: value };
+	}
+
+	return {
+		...value,
+		right: value?.left,
+		bottom: value?.top,
+	};
+}
+
+function DimensionsToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Dimensions' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
+	aspectRatio: true,
+	childLayout: true,
+};
+
+export default function DimensionsPanel( {
+	as: Wrapper = DimensionsToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+	onVisualize = () => {},
+	// Special case because the layout controls are not part of the dimensions panel
+	// in global styles but not in block inspector.
+	includeLayoutControls = false,
+} ) {
+	const { dimensions, spacing } = settings;
+
+	const decodeValue = ( rawValue ) => {
+		if ( rawValue && typeof rawValue === 'object' ) {
+			return Object.keys( rawValue ).reduce( ( acc, key ) => {
+				acc[ key ] = getValueFromVariable(
+					{ settings: { dimensions, spacing } },
+					'',
+					rawValue[ key ]
+				);
+				return acc;
+			}, {} );
+		}
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
+	};
+
+	const showSpacingPresetsControl = useHasSpacingPresets( settings );
+	const units = useCustomUnits( {
+		availableUnits: settings?.spacing?.units || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
+	//Minimum Margin Value
+	const minimumMargin = -Infinity;
+	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
+
+	// Content Width
+	const showContentSizeControl =
+		useHasContentSize( settings ) && includeLayoutControls;
+	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
+	const setContentSizeValue = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'layout', 'contentSize' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
+	const resetContentSizeValue = () => setContentSizeValue( undefined );
+
+	// Wide Width
+	const showWideSizeControl =
+		useHasWideSize( settings ) && includeLayoutControls;
+	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
+	const setWideSizeValue = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'layout', 'wideSize' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
+	const resetWideSizeValue = () => setWideSizeValue( undefined );
+
+	// Padding
+	const showPaddingControl = useHasPadding( settings );
+	const rawPadding = decodeValue( inheritedValue?.spacing?.padding );
+	const paddingValues = splitStyleValue( rawPadding );
+	const paddingSides = Array.isArray( settings?.spacing?.padding )
+		? settings?.spacing?.padding
+		: settings?.spacing?.padding?.sides;
+	const isAxialPadding =
+		paddingSides &&
+		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const setPaddingValues = ( newPaddingValues ) => {
+		const padding = filterValuesBySides( newPaddingValues, paddingSides );
+		onChange( setImmutably( value, [ 'spacing', 'padding' ], padding ) );
+	};
+	const hasPaddingValue = () =>
+		!! value?.spacing?.padding &&
+		Object.keys( value?.spacing?.padding ).length;
+	const resetPaddingValue = () => setPaddingValues( undefined );
+	const onMouseOverPadding = () => onVisualize( 'padding' );
+
+	// Margin
+	const showMarginControl = useHasMargin( settings );
+	const rawMargin = decodeValue( inheritedValue?.spacing?.margin );
+	const marginValues = splitStyleValue( rawMargin );
+	const marginSides = Array.isArray( settings?.spacing?.margin )
+		? settings?.spacing?.margin
+		: settings?.spacing?.margin?.sides;
+	const isAxialMargin =
+		marginSides &&
+		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const setMarginValues = ( newMarginValues ) => {
+		const margin = filterValuesBySides( newMarginValues, marginSides );
+		onChange( setImmutably( value, [ 'spacing', 'margin' ], margin ) );
+	};
+	const hasMarginValue = () =>
+		!! value?.spacing?.margin &&
+		Object.keys( value?.spacing?.margin ).length;
+	const resetMarginValue = () => setMarginValues( undefined );
+	const onMouseOverMargin = () => onVisualize( 'margin' );
+
+	// Block Gap
+	const showGapControl = useHasGap( settings );
+	const gapSides = Array.isArray( settings?.spacing?.blockGap )
+		? settings?.spacing?.blockGap
+		: settings?.spacing?.blockGap?.sides;
+	const isAxialGap =
+		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const gapValue = decodeValue( inheritedValue?.spacing?.blockGap );
+	const gapValues = splitGapValue( gapValue, isAxialGap );
+	const setGapValue = ( newGapValue ) => {
+		onChange(
+			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
+		);
+	};
+	const setGapValues = ( nextBoxGapValue ) => {
+		if ( ! nextBoxGapValue ) {
+			setGapValue( null );
+		}
+		// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
+		if ( ! isAxialGap && nextBoxGapValue?.hasOwnProperty( 'top' ) ) {
+			setGapValue( nextBoxGapValue.top );
+		} else {
+			setGapValue( {
+				top: nextBoxGapValue?.top,
+				left: nextBoxGapValue?.left,
+			} );
+		}
+	};
+	const resetGapValue = () => setGapValue( undefined );
+	const hasGapValue = () => !! value?.spacing?.blockGap;
+
+	// Min Height
+	const showMinHeightControl = useHasMinHeight( settings );
+	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
+	const setMinHeightValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'minHeight' ],
+			newValue
+		);
+		// Apply min-height, while removing any applied aspect ratio.
+		onChange(
+			setImmutably(
+				tempValue,
+				[ 'dimensions', 'aspectRatio' ],
+				undefined
+			)
+		);
+	};
+	const resetMinHeightValue = () => {
+		setMinHeightValue( undefined );
+	};
+	const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
+
+	// Aspect Ratio
+	const showAspectRatioControl = useHasAspectRatio( settings );
+	const aspectRatioValue = decodeValue(
+		inheritedValue?.dimensions?.aspectRatio
+	);
+	const setAspectRatioValue = ( newValue ) => {
+		const tempValue = setImmutably(
+			value,
+			[ 'dimensions', 'aspectRatio' ],
+			newValue
+		);
+		// Apply aspect-ratio, while removing any applied min-height.
+		onChange(
+			setImmutably( tempValue, [ 'dimensions', 'minHeight' ], undefined )
+		);
+	};
+	const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
+
+	// Child Layout
+	const showChildLayoutControl = useHasChildLayout( settings );
+	const childLayout = inheritedValue?.layout;
+
+	const setChildLayout = ( newChildLayout ) => {
+		onChange( {
+			...value,
+			layout: {
+				...newChildLayout,
+			},
+		} );
+	};
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			layout: cleanEmptyObject( {
+				...previousValue?.layout,
+				contentSize: undefined,
+				wideSize: undefined,
+				selfStretch: undefined,
+				flexSize: undefined,
+				columnStart: undefined,
+				rowStart: undefined,
+				columnSpan: undefined,
+				rowSpan: undefined,
+			} ),
+			spacing: {
+				...previousValue?.spacing,
+				padding: undefined,
+				margin: undefined,
+				blockGap: undefined,
+			},
+			dimensions: {
+				...previousValue?.dimensions,
+				minHeight: undefined,
+				aspectRatio: undefined,
+			},
+		};
+	}, [] );
+
+	const onMouseLeaveControls = () => onVisualize( false );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ ( showContentSizeControl || showWideSizeControl ) && (
+				<span className="span-columns">
+					{ __( 'Set the width of the main content area.' ) }
+				</span>
+			) }
+			{ showContentSizeControl && (
+				<ToolsPanelItem
+					label={ __( 'Content width' ) }
+					hasValue={ hasUserSetContentSizeValue }
+					onDeselect={ resetContentSizeValue }
+					isShownByDefault={
+						defaultControls.contentSize ??
+						DEFAULT_CONTROLS.contentSize
+					}
+					panelId={ panelId }
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Content width' ) }
+						labelPosition="top"
+						value={ contentSizeValue || '' }
+						onChange={ ( nextContentSize ) => {
+							setContentSizeValue( nextContentSize );
+						} }
+						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ alignNone } />
+							</InputControlPrefixWrapper>
+						}
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showWideSizeControl && (
+				<ToolsPanelItem
+					label={ __( 'Wide width' ) }
+					hasValue={ hasUserSetWideSizeValue }
+					onDeselect={ resetWideSizeValue }
+					isShownByDefault={
+						defaultControls.wideSize ?? DEFAULT_CONTROLS.wideSize
+					}
+					panelId={ panelId }
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label={ __( 'Wide width' ) }
+						labelPosition="top"
+						value={ wideSizeValue || '' }
+						onChange={ ( nextWideSize ) => {
+							setWideSizeValue( nextWideSize );
+						} }
+						units={ units }
+						prefix={
+							<InputControlPrefixWrapper variant="icon">
+								<Icon icon={ stretchWide } />
+							</InputControlPrefixWrapper>
+						}
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showPaddingControl && (
+				<ToolsPanelItem
+					hasValue={ hasPaddingValue }
+					label={ __( 'Padding' ) }
+					onDeselect={ resetPaddingValue }
+					isShownByDefault={
+						defaultControls.padding ?? DEFAULT_CONTROLS.padding
+					}
+					className={ clsx( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
+					panelId={ panelId }
+				>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							__next40pxDefaultSize
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialPadding }
+							inputProps={ {
+								onMouseOver: onMouseOverPadding,
+								onMouseOut: onMouseLeaveControls,
+							} }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							onMouseOver={ onMouseOverPadding }
+							onMouseOut={ onMouseLeaveControls }
+						/>
+					) }
+				</ToolsPanelItem>
+			) }
+			{ showMarginControl && (
+				<ToolsPanelItem
+					hasValue={ hasMarginValue }
+					label={ __( 'Margin' ) }
+					onDeselect={ resetMarginValue }
+					isShownByDefault={
+						defaultControls.margin ?? DEFAULT_CONTROLS.margin
+					}
+					className={ clsx( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
+					panelId={ panelId }
+				>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							__next40pxDefaultSize
+							values={ marginValues }
+							onChange={ setMarginValues }
+							inputProps={ {
+								min: minMarginValue,
+								onDragStart: () => {
+									// Reset to 0 in case the value was negative.
+									setMinMarginValue( 0 );
+								},
+								onDragEnd: () => {
+									setMinMarginValue( minimumMargin );
+								},
+								onMouseOver: onMouseOverMargin,
+								onMouseOut: onMouseLeaveControls,
+							} }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialMargin }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ marginValues }
+							onChange={ setMarginValues }
+							minimumCustomValue={ -Infinity }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							onMouseOver={ onMouseOverMargin }
+							onMouseOut={ onMouseLeaveControls }
+						/>
+					) }
+				</ToolsPanelItem>
+			) }
+			{ showGapControl && (
+				<ToolsPanelItem
+					hasValue={ hasGapValue }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ resetGapValue }
+					isShownByDefault={
+						defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap
+					}
+					className={ clsx( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+						'single-column':
+							// If UnitControl is used, should be single-column.
+							! showSpacingPresetsControl && ! isAxialGap,
+					} ) }
+					panelId={ panelId }
+				>
+					{ ! showSpacingPresetsControl &&
+						( isAxialGap ? (
+							<BoxControl
+								__next40pxDefaultSize
+								label={ __( 'Block spacing' ) }
+								min={ 0 }
+								onChange={ setGapValues }
+								units={ units }
+								sides={ gapSides }
+								values={ gapValues }
+								allowReset={ false }
+								splitOnAxis={ isAxialGap }
+							/>
+						) : (
+							<UnitControl
+								__next40pxDefaultSize
+								label={ __( 'Block spacing' ) }
+								min={ 0 }
+								onChange={ setGapValue }
+								units={ units }
+								value={ gapValue }
+							/>
+						) ) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							label={ __( 'Block spacing' ) }
+							min={ 0 }
+							onChange={ setGapValues }
+							showSideInLabel={ false }
+							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
+							values={ gapValues }
+							allowReset={ false }
+						/>
+					) }
+				</ToolsPanelItem>
+			) }
+			{ showChildLayoutControl && (
+				<ChildLayoutControl
+					value={ childLayout }
+					onChange={ setChildLayout }
+					parentLayout={ settings?.parentLayout }
+					panelId={ panelId }
+					isShownByDefault={
+						defaultControls.childLayout ??
+						DEFAULT_CONTROLS.childLayout
+					}
+				/>
+			) }
+			{ showMinHeightControl && (
+				<ToolsPanelItem
+					hasValue={ hasMinHeightValue }
+					label={ __( 'Minimum height' ) }
+					onDeselect={ resetMinHeightValue }
+					isShownByDefault={
+						defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight
+					}
+					panelId={ panelId }
+				>
+					<HeightControl
+						label={ __( 'Minimum height' ) }
+						value={ minHeightValue }
+						onChange={ setMinHeightValue }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showAspectRatioControl && (
+				<AspectRatioTool
+					hasValue={ hasAspectRatioValue }
+					value={ aspectRatioValue }
+					onChange={ setAspectRatioValue }
+					panelId={ panelId }
+					isShownByDefault={
+						defaultControls.aspectRatio ??
+						DEFAULT_CONTROLS.aspectRatio
+					}
+				/>
+			) }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
new file mode 100644
index 00000000000000..581661e0c84071
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -0,0 +1,229 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	MenuGroup,
+	ColorIndicator,
+	DuotonePicker,
+	DuotoneSwatch,
+	Dropdown,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { setImmutably } from '../../utils/object';
+
+const EMPTY_ARRAY = [];
+function useMultiOriginColorPresets(
+	settings,
+	{ presetSetting, defaultSetting }
+) {
+	const disableDefault = ! settings?.color?.[ defaultSetting ];
+	const userPresets =
+		settings?.color?.[ presetSetting ]?.custom || EMPTY_ARRAY;
+	const themePresets =
+		settings?.color?.[ presetSetting ]?.theme || EMPTY_ARRAY;
+	const defaultPresets =
+		settings?.color?.[ presetSetting ]?.default || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
+export function useHasFiltersPanel( settings ) {
+	return useHasDuotoneControl( settings );
+}
+
+function useHasDuotoneControl( settings ) {
+	return (
+		settings.color.customDuotone ||
+		settings.color.defaultDuotone ||
+		settings.color.duotone.length > 0
+	);
+}
+
+function FiltersToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	duotone: true,
+};
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-duotone-control__popover',
+	headerTitle: __( 'Duotone' ),
+};
+
+const LabeledColorIndicator = ( { indicator, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			<Flex expanded={ false }>
+				{ indicator === 'unset' || ! indicator ? (
+					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+				) : (
+					<DuotoneSwatch values={ indicator } />
+				) }
+			</Flex>
+		</ZStack>
+		<FlexItem title={ label }>{ label }</FlexItem>
+	</HStack>
+);
+
+export default function FiltersPanel( {
+	as: Wrapper = FiltersToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Duotone
+	const hasDuotoneEnabled = useHasDuotoneControl( settings );
+	const duotonePalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'duotone',
+		defaultSetting: 'defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'palette',
+		defaultSetting: 'defaultPalette',
+	} );
+	const duotone = decodeValue( inheritedValue?.filter?.duotone );
+	const setDuotone = ( newValue ) => {
+		const duotonePreset = duotonePalette.find( ( { colors } ) => {
+			return colors === newValue;
+		} );
+		const settedValue = duotonePreset
+			? `var:preset|duotone|${ duotonePreset.slug }`
+			: newValue;
+		onChange( setImmutably( value, [ 'filter', 'duotone' ], settedValue ) );
+	};
+	const hasDuotone = () => !! value?.filter?.duotone;
+	const resetDuotone = () => setDuotone( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			filter: {
+				...previousValue.filter,
+				duotone: undefined,
+			},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasDuotoneEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Duotone' ) }
+					hasValue={ hasDuotone }
+					onDeselect={ resetDuotone }
+					isShownByDefault={ defaultControls.duotone }
+					panelId={ panelId }
+				>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-global-styles-filters-panel__dropdown"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const toggleProps = {
+								onClick: onToggle,
+								className: clsx( { 'is-open': isOpen } ),
+								'aria-expanded': isOpen,
+							};
+
+							return (
+								<ItemGroup isBordered isSeparated>
+									<Button
+										__next40pxDefaultSize
+										{ ...toggleProps }
+									>
+										<LabeledColorIndicator
+											indicator={ duotone }
+											label={ __( 'Duotone' ) }
+										/>
+									</Button>
+								</ItemGroup>
+							);
+						} }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="small">
+								<MenuGroup label={ __( 'Duotone' ) }>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										// TODO: Re-enable both when custom colors are supported for block-level styles.
+										disableCustomColors
+										disableCustomDuotone
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</MenuGroup>
+							</DropdownContentWrapper>
+						) }
+					/>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/get-block-css-selector.js b/packages/block-editor/src/components/global-styles/get-block-css-selector.js
new file mode 100644
index 00000000000000..6cb7cfaa3f47d3
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/get-block-css-selector.js
@@ -0,0 +1,114 @@
+/**
+ * Internal dependencies
+ */
+import { scopeSelector } from './utils';
+import { getValueFromObjectPath } from '../../utils/object';
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {import('@wordpress/blocks').Block} blockType        The block's type.
+ * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}                            options          Options object.
+ * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+export function getBlockCSSSelector(
+	blockType,
+	target = 'root',
+	options = {}
+) {
+	if ( ! target ) {
+		return null;
+	}
+
+	const { fallback = false } = options;
+	const { name, selectors, supports } = blockType;
+
+	const hasSelectors = selectors && Object.keys( selectors ).length > 0;
+	const path = Array.isArray( target ) ? target.join( '.' ) : target;
+
+	// Root selector.
+
+	// Calculated before returning as it can be used as a fallback for feature
+	// selectors later on.
+	let rootSelector = null;
+
+	if ( hasSelectors && selectors.root ) {
+		// Use the selectors API if available.
+		rootSelector = selectors?.root;
+	} else if ( supports?.__experimentalSelector ) {
+		// Use the old experimental selector supports property if set.
+		rootSelector = supports.__experimentalSelector;
+	} else {
+		// If no root selector found, generate default block class selector.
+		rootSelector =
+			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+	}
+
+	// Return selector if it's the root target we are looking for.
+	if ( path === 'root' ) {
+		return rootSelector;
+	}
+
+	// If target is not `root` or `duotone` we have a feature or subfeature
+	// as the target. If the target is a string convert to an array.
+	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
+
+	// Feature selectors ( may fallback to root selector );
+	if ( pathArray.length === 1 ) {
+		const fallbackSelector = fallback ? rootSelector : null;
+
+		// Prefer the selectors API if available.
+		if ( hasSelectors ) {
+			// Get selector from either `feature.root` or shorthand path.
+			const featureSelector =
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
+
+			// Return feature selector if found or any available fallback.
+			return featureSelector || fallbackSelector;
+		}
+
+		// Try getting old experimental supports selector value.
+		const featureSelector = getValueFromObjectPath(
+			supports,
+			`${ path }.__experimentalSelector`,
+			null
+		);
+
+		// If nothing to work with, provide fallback selector if available.
+		if ( ! featureSelector ) {
+			return fallbackSelector;
+		}
+
+		// Scope the feature selector by the block's root selector.
+		return scopeSelector( rootSelector, featureSelector );
+	}
+
+	// Subfeature selector.
+	// This may fallback either to parent feature or root selector.
+	let subfeatureSelector;
+
+	// Use selectors API if available.
+	if ( hasSelectors ) {
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
+	}
+
+	// Only return if we have a subfeature selector.
+	if ( subfeatureSelector ) {
+		return subfeatureSelector;
+	}
+
+	// To this point we don't have a subfeature selector. If a fallback has been
+	// requested, remove subfeature from target path and return results of a
+	// call for the parent feature's selector.
+	if ( fallback ) {
+		return getBlockCSSSelector( blockType, pathArray[ 0 ], options );
+	}
+
+	// We tried.
+	return null;
+}
diff --git a/packages/block-editor/src/components/global-styles/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/get-global-styles-changes.js
new file mode 100644
index 00000000000000..51e9b16d8048f4
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/get-global-styles-changes.js
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { getBlockTypes } from '@wordpress/blocks';
+
+const globalStylesChangesCache = new Map();
+const EMPTY_ARRAY = [];
+const translationMap = {
+	caption: __( 'Caption' ),
+	link: __( 'Link' ),
+	button: __( 'Button' ),
+	heading: __( 'Heading' ),
+	h1: __( 'H1' ),
+	h2: __( 'H2' ),
+	h3: __( 'H3' ),
+	h4: __( 'H4' ),
+	h5: __( 'H5' ),
+	h6: __( 'H6' ),
+	'settings.color': __( 'Color' ),
+	'settings.typography': __( 'Typography' ),
+	'styles.color': __( 'Colors' ),
+	'styles.spacing': __( 'Spacing' ),
+	'styles.background': __( 'Background' ),
+	'styles.typography': __( 'Typography' ),
+};
+const getBlockNames = memoize( () =>
+	getBlockTypes().reduce( ( accumulator, { name, title } ) => {
+		accumulator[ name ] = title;
+		return accumulator;
+	}, {} )
+);
+const isObject = ( obj ) => obj !== null && typeof obj === 'object';
+
+/**
+ * Get the translation for a given global styles key.
+ * @param {string} key A key representing a path to a global style property or setting.
+ * @return {string|undefined}                A translated key or undefined if no translation exists.
+ */
+function getTranslation( key ) {
+	if ( translationMap[ key ] ) {
+		return translationMap[ key ];
+	}
+
+	const keyArray = key.split( '.' );
+
+	if ( keyArray?.[ 0 ] === 'blocks' ) {
+		const blockName = getBlockNames()?.[ keyArray[ 1 ] ];
+		return blockName || keyArray[ 1 ];
+	}
+
+	if ( keyArray?.[ 0 ] === 'elements' ) {
+		return translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];
+	}
+
+	return undefined;
+}
+
+/**
+ * A deep comparison of two objects, optimized for comparing global styles.
+ * @param {Object} changedObject  The changed object to compare.
+ * @param {Object} originalObject The original object to compare against.
+ * @param {string} parentPath     A key/value pair object of block names and their rendered titles.
+ * @return {string[]}             An array of paths whose values have changed.
+ */
+function deepCompare( changedObject, originalObject, parentPath = '' ) {
+	// We have two non-object values to compare.
+	if ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {
+		/*
+		 * Only return a path if the value has changed.
+		 * And then only the path name up to 2 levels deep.
+		 */
+		return changedObject !== originalObject
+			? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )
+			: undefined;
+	}
+
+	// Enable comparison when an object doesn't have a corresponding property to compare.
+	changedObject = isObject( changedObject ) ? changedObject : {};
+	originalObject = isObject( originalObject ) ? originalObject : {};
+
+	const allKeys = new Set( [
+		...Object.keys( changedObject ),
+		...Object.keys( originalObject ),
+	] );
+
+	let diffs = [];
+	for ( const key of allKeys ) {
+		const path = parentPath ? parentPath + '.' + key : key;
+		const changedPath = deepCompare(
+			changedObject[ key ],
+			originalObject[ key ],
+			path
+		);
+		if ( changedPath ) {
+			diffs = diffs.concat( changedPath );
+		}
+	}
+	return diffs;
+}
+
+/**
+ * Returns an array of translated summarized global styles changes.
+ * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.
+ *
+ * @param {Object} next     The changed object to compare.
+ * @param {Object} previous The original object to compare against.
+ * @return {Array[]}        A 2-dimensional array of tuples: [ "group", "translated change" ].
+ */
+export function getGlobalStylesChangelist( next, previous ) {
+	const cacheKey = JSON.stringify( { next, previous } );
+
+	if ( globalStylesChangesCache.has( cacheKey ) ) {
+		return globalStylesChangesCache.get( cacheKey );
+	}
+
+	/*
+	 * Compare the two changesets with normalized keys.
+	 * The order of these keys determines the order in which
+	 * they'll appear in the results.
+	 */
+	const changedValueTree = deepCompare(
+		{
+			styles: {
+				background: next?.styles?.background,
+				color: next?.styles?.color,
+				typography: next?.styles?.typography,
+				spacing: next?.styles?.spacing,
+			},
+			blocks: next?.styles?.blocks,
+			elements: next?.styles?.elements,
+			settings: next?.settings,
+		},
+		{
+			styles: {
+				background: previous?.styles?.background,
+				color: previous?.styles?.color,
+				typography: previous?.styles?.typography,
+				spacing: previous?.styles?.spacing,
+			},
+			blocks: previous?.styles?.blocks,
+			elements: previous?.styles?.elements,
+			settings: previous?.settings,
+		}
+	);
+
+	if ( ! changedValueTree.length ) {
+		globalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );
+		return EMPTY_ARRAY;
+	}
+
+	// Remove duplicate results.
+	const result = [ ...new Set( changedValueTree ) ]
+		/*
+		 * Translate the keys.
+		 * Remove empty translations.
+		 */
+		.reduce( ( acc, curr ) => {
+			const translation = getTranslation( curr );
+			if ( translation ) {
+				acc.push( [ curr.split( '.' )[ 0 ], translation ] );
+			}
+			return acc;
+		}, [] );
+
+	globalStylesChangesCache.set( cacheKey, result );
+
+	return result;
+}
+
+/**
+ * From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.
+ * The types are 'blocks', 'elements', 'settings', and 'styles'.
+ *
+ * @param {Object}              next     The changed object to compare.
+ * @param {Object}              previous The original object to compare against.
+ * @param {{maxResults:number}} options  Options. maxResults: results to return before truncating.
+ * @return {string[]}                    An array of translated changes.
+ */
+export default function getGlobalStylesChanges( next, previous, options = {} ) {
+	let changeList = getGlobalStylesChangelist( next, previous );
+	const changesLength = changeList.length;
+	const { maxResults } = options;
+
+	if ( changesLength ) {
+		// Truncate to `n` results if necessary.
+		if ( !! maxResults && changesLength > maxResults ) {
+			changeList = changeList.slice( 0, maxResults );
+		}
+		return Object.entries(
+			changeList.reduce( ( acc, curr ) => {
+				const group = acc[ curr[ 0 ] ] || [];
+				if ( ! group.includes( curr[ 1 ] ) ) {
+					acc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];
+				}
+				return acc;
+			}, {} )
+		).map( ( [ key, changeValues ] ) => {
+			const changeValuesLength = changeValues.length;
+			const joinedChangesValue = changeValues.join(
+				/* translators: Used between list items, there is a space after the comma. */
+				__( ', ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
+			);
+			switch ( key ) {
+				case 'blocks': {
+					return sprintf(
+						// translators: %s: a list of block names separated by a comma.
+						_n( '%s block.', '%s blocks.', changeValuesLength ),
+						joinedChangesValue
+					);
+				}
+				case 'elements': {
+					return sprintf(
+						// translators: %s: a list of element names separated by a comma.
+						_n( '%s element.', '%s elements.', changeValuesLength ),
+						joinedChangesValue
+					);
+				}
+				case 'settings': {
+					return sprintf(
+						// translators: %s: a list of theme.json setting labels separated by a comma.
+						__( '%s settings.' ),
+						joinedChangesValue
+					);
+				}
+				case 'styles': {
+					return sprintf(
+						// translators: %s: a list of theme.json top-level styles labels separated by a comma.
+						__( '%s styles.' ),
+						joinedChangesValue
+					);
+				}
+				default: {
+					return sprintf(
+						// translators: %s: a list of global styles changes separated by a comma.
+						__( '%s.' ),
+						joinedChangesValue
+					);
+				}
+			}
+		} );
+	}
+
+	return EMPTY_ARRAY;
+}
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
new file mode 100644
index 00000000000000..2be77aec18a2c6
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -0,0 +1,491 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
+import { GlobalStylesContext } from './context';
+import { unlock } from '../../lock-unlock';
+
+const EMPTY_CONFIG = { settings: {}, styles: {} };
+
+const VALID_SETTINGS = [
+	'appearanceTools',
+	'useRootPaddingAwareAlignments',
+	'background.backgroundImage',
+	'background.backgroundRepeat',
+	'background.backgroundSize',
+	'background.backgroundPosition',
+	'border.color',
+	'border.radius',
+	'border.style',
+	'border.width',
+	'shadow.presets',
+	'shadow.defaultPresets',
+	'color.background',
+	'color.button',
+	'color.caption',
+	'color.custom',
+	'color.customDuotone',
+	'color.customGradient',
+	'color.defaultDuotone',
+	'color.defaultGradients',
+	'color.defaultPalette',
+	'color.duotone',
+	'color.gradients',
+	'color.heading',
+	'color.link',
+	'color.palette',
+	'color.text',
+	'custom',
+	'dimensions.aspectRatio',
+	'dimensions.minHeight',
+	'layout.contentSize',
+	'layout.definitions',
+	'layout.wideSize',
+	'lightbox.enabled',
+	'lightbox.allowEditing',
+	'position.fixed',
+	'position.sticky',
+	'spacing.customSpacingSize',
+	'spacing.defaultSpacingSizes',
+	'spacing.spacingSizes',
+	'spacing.spacingScale',
+	'spacing.blockGap',
+	'spacing.margin',
+	'spacing.padding',
+	'spacing.units',
+	'typography.fluid',
+	'typography.customFontSize',
+	'typography.defaultFontSizes',
+	'typography.dropCap',
+	'typography.fontFamilies',
+	'typography.fontSizes',
+	'typography.fontStyle',
+	'typography.fontWeight',
+	'typography.letterSpacing',
+	'typography.lineHeight',
+	'typography.textAlign',
+	'typography.textColumns',
+	'typography.textDecoration',
+	'typography.textTransform',
+	'typography.writingMode',
+];
+
+export const useGlobalStylesReset = () => {
+	const { user, setUserConfig } = useContext( GlobalStylesContext );
+	const config = {
+		settings: user.settings,
+		styles: user.styles,
+	};
+	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
+	return [
+		canReset,
+		useCallback( () => setUserConfig( EMPTY_CONFIG ), [ setUserConfig ] ),
+	];
+};
+
+export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
+	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
+	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
+	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
+	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
+	const globalPath = `settings${ appendedPropertyPath }`;
+	const sourceKey = source === 'all' ? 'merged' : source;
+
+	const settingValue = useMemo( () => {
+		const configToUse = configs[ sourceKey ];
+		if ( ! configToUse ) {
+			throw 'Unsupported source';
+		}
+
+		if ( propertyPath ) {
+			return (
+				getValueFromObjectPath( configToUse, contextualPath ) ??
+				getValueFromObjectPath( configToUse, globalPath )
+			);
+		}
+
+		let result = {};
+		VALID_SETTINGS.forEach( ( setting ) => {
+			const value =
+				getValueFromObjectPath(
+					configToUse,
+					`settings${ appendedBlockPath }.${ setting }`
+				) ??
+				getValueFromObjectPath( configToUse, `settings.${ setting }` );
+			if ( value !== undefined ) {
+				result = setImmutably( result, setting.split( '.' ), value );
+			}
+		} );
+		return result;
+	}, [
+		configs,
+		sourceKey,
+		propertyPath,
+		contextualPath,
+		globalPath,
+		appendedBlockPath,
+	] );
+
+	const setSetting = ( newValue ) => {
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
+		);
+	};
+	return [ settingValue, setSetting ];
+}
+
+export function useGlobalStyle(
+	path,
+	blockName,
+	source = 'all',
+	{ shouldDecodeEncode = true } = {}
+) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+	const appendedPath = path ? '.' + path : '';
+	const finalPath = ! blockName
+		? `styles${ appendedPath }`
+		: `styles.blocks.${ blockName }${ appendedPath }`;
+
+	const setStyle = ( newValue ) => {
+		setUserConfig( ( currentConfig ) =>
+			setImmutably(
+				currentConfig,
+				finalPath.split( '.' ),
+				shouldDecodeEncode
+					? getPresetVariableFromValue(
+							mergedConfig.settings,
+							blockName,
+							path,
+							newValue
+					  )
+					: newValue
+			)
+		);
+	};
+
+	let rawResult, result;
+	switch ( source ) {
+		case 'all':
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
+				: rawResult;
+			break;
+		case 'user':
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( mergedConfig, blockName, rawResult )
+				: rawResult;
+			break;
+		case 'base':
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
+			result = shouldDecodeEncode
+				? getValueFromVariable( baseConfig, blockName, rawResult )
+				: rawResult;
+			break;
+		default:
+			throw 'Unsupported source';
+	}
+
+	return [ result, setStyle ];
+}
+
+/**
+ * React hook that overrides a global settings object with block and element specific settings.
+ *
+ * @param {Object}     parentSettings Settings object.
+ * @param {blockName?} blockName      Block name.
+ * @param {element?}   element        Element name.
+ *
+ * @return {Object} Merge of settings and supports.
+ */
+export function useSettingsForBlockElement(
+	parentSettings,
+	blockName,
+	element
+) {
+	const { supportedStyles, supports } = useSelect(
+		( select ) => {
+			return {
+				supportedStyles: unlock(
+					select( blocksStore )
+				).getSupportedStyles( blockName, element ),
+				supports:
+					select( blocksStore ).getBlockType( blockName )?.supports,
+			};
+		},
+		[ blockName, element ]
+	);
+
+	return useMemo( () => {
+		const updatedSettings = { ...parentSettings };
+
+		if ( ! supportedStyles.includes( 'fontSize' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				fontSizes: {},
+				customFontSize: false,
+				defaultFontSizes: false,
+			};
+		}
+
+		if ( ! supportedStyles.includes( 'fontFamily' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				fontFamilies: {},
+			};
+		}
+
+		updatedSettings.color = {
+			...updatedSettings.color,
+			text:
+				updatedSettings.color?.text &&
+				supportedStyles.includes( 'color' ),
+			background:
+				updatedSettings.color?.background &&
+				( supportedStyles.includes( 'background' ) ||
+					supportedStyles.includes( 'backgroundColor' ) ),
+			button:
+				updatedSettings.color?.button &&
+				supportedStyles.includes( 'buttonColor' ),
+			heading:
+				updatedSettings.color?.heading &&
+				supportedStyles.includes( 'headingColor' ),
+			link:
+				updatedSettings.color?.link &&
+				supportedStyles.includes( 'linkColor' ),
+			caption:
+				updatedSettings.color?.caption &&
+				supportedStyles.includes( 'captionColor' ),
+		};
+
+		// Some blocks can enable background colors but disable gradients.
+		if ( ! supportedStyles.includes( 'background' ) ) {
+			updatedSettings.color.gradients = [];
+			updatedSettings.color.customGradient = false;
+		}
+
+		// If filters are not supported by the block/element, disable duotone.
+		if ( ! supportedStyles.includes( 'filter' ) ) {
+			updatedSettings.color.defaultDuotone = false;
+			updatedSettings.color.customDuotone = false;
+		}
+
+		[
+			'lineHeight',
+			'fontStyle',
+			'fontWeight',
+			'letterSpacing',
+			'textAlign',
+			'textTransform',
+			'textDecoration',
+			'writingMode',
+		].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.typography = {
+					...updatedSettings.typography,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		// The column-count style is named text column to reduce confusion with
+		// the columns block and manage expectations from the support.
+		// See: https://github.com/WordPress/gutenberg/pull/33587
+		if ( ! supportedStyles.includes( 'columnCount' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textColumns: false,
+			};
+		}
+
+		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.layout = {
+					...updatedSettings.layout,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'padding', 'margin', 'blockGap' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: false,
+				};
+			}
+
+			const sides = Array.isArray( supports?.spacing?.[ key ] )
+				? supports?.spacing?.[ key ]
+				: supports?.spacing?.[ key ]?.sides;
+			// Check if spacing type is supported before adding sides.
+			if ( sides?.length && updatedSettings.spacing?.[ key ] ) {
+				updatedSettings.spacing = {
+					...updatedSettings.spacing,
+					[ key ]: {
+						...updatedSettings.spacing?.[ key ],
+						sides,
+					},
+				};
+			}
+		} );
+
+		[ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.dimensions = {
+					...updatedSettings.dimensions,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
+			if (
+				! supportedStyles.includes(
+					'border' + key.charAt( 0 ).toUpperCase() + key.slice( 1 )
+				)
+			) {
+				updatedSettings.border = {
+					...updatedSettings.border,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		[ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => {
+			if ( ! supportedStyles.includes( key ) ) {
+				updatedSettings.background = {
+					...updatedSettings.background,
+					[ key ]: false,
+				};
+			}
+		} );
+
+		updatedSettings.shadow = supportedStyles.includes( 'shadow' )
+			? updatedSettings.shadow
+			: false;
+
+		// Text alignment is only available for blocks.
+		if ( element ) {
+			updatedSettings.typography.textAlign = false;
+		}
+
+		return updatedSettings;
+	}, [ parentSettings, supportedStyles, supports, element ] );
+}
+
+export function useColorsPerOrigin( settings ) {
+	const customColors = settings?.color?.palette?.custom;
+	const themeColors = settings?.color?.palette?.theme;
+	const defaultColors = settings?.color?.palette?.default;
+	const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+	] );
+}
+
+export function useGradientsPerOrigin( settings ) {
+	const customGradients = settings?.color?.gradients?.custom;
+	const themeGradients = settings?.color?.gradients?.theme;
+	const defaultGradients = settings?.color?.gradients?.default;
+	const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+}
diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
new file mode 100644
index 00000000000000..4ebc20ab201983
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from './utils';
+
+export function useHasImageSettingsPanel( name, value, inheritedValue ) {
+	// Note: If lightbox `value` exists, that means it was
+	// defined via the the Global Styles UI and will NOT
+	// be a boolean value or contain the `allowEditing` property,
+	// so we should show the settings panel in those cases.
+	return (
+		( name === 'core/image' && inheritedValue?.lightbox?.allowEditing ) ||
+		!! value?.lightbox
+	);
+}
+
+export default function ImageSettingsPanel( {
+	onChange,
+	value,
+	inheritedValue,
+	panelId,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetLightbox = () => {
+		onChange( undefined );
+	};
+
+	const onChangeLightbox = ( newSetting ) => {
+		onChange( {
+			enabled: newSetting,
+		} );
+	};
+
+	let lightboxChecked = false;
+
+	if ( inheritedValue?.lightbox?.enabled ) {
+		lightboxChecked = inheritedValue.lightbox.enabled;
+	}
+
+	return (
+		<>
+			<ToolsPanel
+				label={ _x( 'Settings', 'Image settings' ) }
+				resetAll={ resetLightbox }
+				panelId={ panelId }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					// We use the `userSettings` prop instead of `settings`, because `settings`
+					// contains the core/theme values for the lightbox and we want to show the
+					// "RESET" button ONLY when the user has explicitly set a value in the
+					// Global Styles.
+					hasValue={ () => !! value?.lightbox }
+					label={ __( 'Expand on click' ) }
+					onDeselect={ resetLightbox }
+					isShownByDefault
+					panelId={ panelId }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Expand on click' ) }
+						checked={ lightboxChecked }
+						onChange={ onChangeLightbox }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
new file mode 100644
index 00000000000000..8096a48569f199
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -0,0 +1,41 @@
+export {
+	useGlobalStylesReset,
+	useGlobalSetting,
+	useGlobalStyle,
+	useSettingsForBlockElement,
+} from './hooks';
+export { getBlockCSSSelector } from './get-block-css-selector';
+export {
+	getLayoutStyles,
+	getBlockSelectors,
+	toStyles,
+	useGlobalStylesOutput,
+	useGlobalStylesOutputWithConfig,
+} from './use-global-styles-output';
+export { GlobalStylesContext } from './context';
+export {
+	default as TypographyPanel,
+	useHasTypographyPanel,
+} from './typography-panel';
+export {
+	default as DimensionsPanel,
+	useHasDimensionsPanel,
+} from './dimensions-panel';
+export {
+	default as BorderPanel,
+	useHasBorderPanel,
+	useHasBorderPanelControls,
+} from './border-panel';
+export { default as ColorPanel, useHasColorPanel } from './color-panel';
+export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export {
+	default as ImageSettingsPanel,
+	useHasImageSettingsPanel,
+} from './image-settings-panel';
+export { default as AdvancedPanel } from './advanced-panel';
+export {
+	default as BackgroundPanel,
+	useHasBackgroundPanel,
+} from './background-panel';
+export { areGlobalStyleConfigsEqual } from './utils';
+export { default as getGlobalStylesChanges } from './get-global-styles-changes';
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
new file mode 100644
index 00000000000000..1cfdff0be286ee
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -0,0 +1,188 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	FlexItem,
+	Dropdown,
+	Composite,
+	Tooltip,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array}
+ */
+const EMPTY_ARRAY = [];
+
+export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const shadows = useShadowPresets( settings );
+
+	return (
+		<div className="block-editor-global-styles__shadow-popover-container">
+			<VStack spacing={ 4 }>
+				<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
+				<ShadowPresets
+					presets={ shadows }
+					activeShadow={ shadow }
+					onSelect={ onShadowChange }
+				/>
+				<div className="block-editor-global-styles__clear-shadow">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => onShadowChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</div>
+			</VStack>
+		</div>
+	);
+}
+
+export function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	return ! presets ? null : (
+		<Composite
+			role="listbox"
+			className="block-editor-global-styles__shadow__list"
+			aria-label={ __( 'Drop shadows' ) }
+		>
+			{ presets.map( ( { name, slug, shadow } ) => (
+				<ShadowIndicator
+					key={ slug }
+					label={ name }
+					isActive={ shadow === activeShadow }
+					type={ slug === 'unset' ? 'unset' : 'preset' }
+					onSelect={ () =>
+						onSelect( shadow === activeShadow ? undefined : shadow )
+					}
+					shadow={ shadow }
+				/>
+			) ) }
+		</Composite>
+	);
+}
+
+export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
+	return (
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
+	);
+}
+
+export function ShadowPopover( { shadow, onShadowChange, settings } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-global-styles__shadow-dropdown"
+			renderToggle={ renderShadowToggle() }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<ShadowPopoverContainer
+						shadow={ shadow }
+						onShadowChange={ onShadowChange }
+						settings={ settings }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function renderShadowToggle() {
+	return ( { onToggle, isOpen } ) => {
+		const toggleProps = {
+			onClick: onToggle,
+			className: clsx( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+		};
+
+		return (
+			<Button __next40pxDefaultSize { ...toggleProps }>
+				<HStack justify="flex-start">
+					<Icon
+						className="block-editor-global-styles__toggle-icon"
+						icon={ shadowIcon }
+						size={ 24 }
+					/>
+					<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+				</HStack>
+			</Button>
+		);
+	};
+}
+
+export function useShadowPresets( settings ) {
+	return useMemo( () => {
+		if ( ! settings?.shadow ) {
+			return EMPTY_ARRAY;
+		}
+
+		const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+		const {
+			default: defaultShadows,
+			theme: themeShadows,
+			custom: customShadows,
+		} = settings?.shadow?.presets ?? {};
+		const unsetShadow = {
+			name: __( 'Unset' ),
+			slug: 'unset',
+			shadow: 'none',
+		};
+
+		const shadowPresets = [
+			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
+			...( themeShadows || EMPTY_ARRAY ),
+			...( customShadows || EMPTY_ARRAY ),
+		];
+		if ( shadowPresets.length ) {
+			shadowPresets.unshift( unsetShadow );
+		}
+
+		return shadowPresets;
+	}, [ settings ] );
+}
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
new file mode 100644
index 00000000000000..e0782fdb01b1d0
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -0,0 +1,77 @@
+.block-editor-global-styles__toggle-icon {
+	fill: currentColor;
+}
+
+// @todo Ideally, popover, swatch size, and gap values should be CSS variables
+// to apply precise grid layouts.
+// https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
+.block-editor-global-styles__shadow-popover-container {
+	width: 230px;
+}
+
+.block-editor-global-styles__shadow__list {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+	padding-bottom: $grid-unit-10;
+}
+
+.block-editor-global-styles__clear-shadow {
+	text-align: right;
+}
+
+.block-editor-global-styles-filters-panel__dropdown,
+.block-editor-global-styles__shadow-dropdown {
+	display: block;
+	padding: 0;
+
+	button {
+		width: 100%;
+		padding: $grid-unit-10;
+
+		&.is-open {
+			background-color: $gray-100;
+		}
+	}
+}
+
+// These styles are similar to the color palette.
+.block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
+	color: $gray-800;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-small;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
+	padding: 0;
+
+	height: $button-size-small + 2 * $border-width;
+	width: $button-size-small + 2 * $border-width;
+	box-sizing: border-box;
+
+	transform: scale(1);
+	transition: transform 0.1s ease;
+	will-change: transform;
+
+	&:focus {
+		border: #{ $border-width * 2 } solid $gray-700;
+	}
+
+	&:hover {
+		transform: scale(1.2);
+	}
+
+	&.unset {
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+	font-family: $editor_html_font;
+	// CSS input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
+}
diff --git a/packages/block-editor/src/components/global-styles/test/background-panel.js b/packages/block-editor/src/components/global-styles/test/background-panel.js
new file mode 100644
index 00000000000000..ad2c55e747f705
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/background-panel.js
@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+
+import { hasBackgroundImageValue } from '../background-panel';
+
+describe( 'hasBackgroundImageValue', () => {
+	it( 'should return `true` when id and url exist', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { id: 1, url: 'url' } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` when only url exists', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { url: 'url' } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `true` when only id exists', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: { id: 1 } },
+			} )
+		).toBe( true );
+	} );
+
+	it( 'should return `false` when id and url do not exist', () => {
+		expect(
+			hasBackgroundImageValue( {
+				background: { backgroundImage: {} },
+			} )
+		).toBe( false );
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
new file mode 100644
index 00000000000000..9c220da7ead12e
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js
@@ -0,0 +1,290 @@
+/**
+ * Internal dependencies
+ */
+import getGlobalStylesChanges, {
+	getGlobalStylesChangelist,
+} from '../get-global-styles-changes';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+
+describe( 'getGlobalStylesChanges and utils', () => {
+	const next = {
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'https://example.com/image.jpg',
+				},
+				backgroundSize: 'contain',
+				backgroundPosition: '30% 30%',
+				backgroundRepeat: 'no-repeat',
+			},
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--potato)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--asparagus)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				h3: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
+				caption: {
+					color: {
+						text: 'var(--wp--preset--color--pineapple)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+			},
+			blocks: {
+				'core/test-fiori-di-zucca': {
+					color: {
+						text: '#000000',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'pink',
+						},
+					],
+				},
+				gradients: [
+					{
+						name: 'Something something',
+						gradient:
+							'linear-gradient(105deg,rgba(6,147,100,1) 0%,rgb(155,81,100) 100%)',
+						slug: 'something-something',
+					},
+				],
+			},
+		},
+	};
+	const previous = {
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'https://example.com/image_new.jpg',
+				},
+				backgroundSize: 'contain',
+				backgroundPosition: '40% 77%',
+				backgroundRepeat: 'repeat',
+			},
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--fungus)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--grapes)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				h3: {
+					typography: {
+						lineHeight: '2',
+					},
+				},
+				h6: {
+					typography: {
+						lineHeight: '1.2',
+					},
+				},
+				caption: {
+					typography: {
+						fontSize: '1.11rem',
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				link: {
+					typography: {
+						lineHeight: 2,
+						textDecoration: 'line-through',
+					},
+					color: {
+						text: 'var(--wp--preset--color--egg)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+				background: 'var(--wp--preset--color--pumpkin)',
+			},
+			blocks: {
+				'core/test-fiori-di-zucca': {
+					color: {
+						text: '#fff',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'blue',
+						},
+					],
+					custom: [
+						{
+							slug: 'one',
+							color: 'tomato',
+						},
+					],
+				},
+				gradients: [
+					{
+						name: 'Vivid cyan blue to vivid purple',
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+				],
+			},
+			typography: {
+				fluid: true,
+			},
+		},
+	};
+
+	beforeEach( () => {
+		registerBlockType( 'core/test-fiori-di-zucca', {
+			save: () => {},
+			category: 'text',
+			title: 'Test pumpkin flowers',
+			edit: () => {},
+		} );
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'getGlobalStylesChanges()', () => {
+		it( 'returns a list of changes', () => {
+			const result = getGlobalStylesChanges( next, previous );
+			expect( result ).toEqual( [
+				'Background, Colors, Typography styles.',
+				'Test pumpkin flowers block.',
+				'H3, Caption, H6, Link elements.',
+				'Color, Typography settings.',
+			] );
+		} );
+
+		it( 'returns a list of truncated changes', () => {
+			const resultA = getGlobalStylesChanges( next, previous, {
+				maxResults: 4,
+			} );
+			expect( resultA ).toEqual( [
+				'Background, Colors, Typography styles.',
+				'Test pumpkin flowers block.',
+			] );
+		} );
+
+		it( 'skips unknown and unchanged keys', () => {
+			const result = getGlobalStylesChanges(
+				{
+					styles: {
+						frogs: {
+							legs: 'green',
+						},
+						typography: {
+							fontSize: '1rem',
+						},
+						settings: {
+							'': {
+								'': 'foo',
+							},
+						},
+					},
+				},
+				{
+					styles: {
+						frogs: {
+							legs: 'yellow',
+						},
+						typography: {
+							fontSize: '1rem',
+						},
+						settings: {
+							'': {
+								'': 'bar',
+							},
+						},
+					},
+				}
+			);
+			expect( result ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'getGlobalStylesChangelist()', () => {
+		it( 'compares two objects and returns a cached list of changed keys', () => {
+			const resultA = getGlobalStylesChangelist( next, previous );
+
+			expect( resultA ).toEqual( [
+				[ 'styles', 'Background' ],
+				[ 'styles', 'Colors' ],
+				[ 'styles', 'Typography' ],
+				[ 'blocks', 'Test pumpkin flowers' ],
+				[ 'elements', 'H3' ],
+				[ 'elements', 'Caption' ],
+				[ 'elements', 'H6' ],
+				[ 'elements', 'Link' ],
+				[ 'settings', 'Color' ],
+				[ 'settings', 'Typography' ],
+			] );
+
+			const resultB = getGlobalStylesChangelist( next, previous );
+
+			expect( resultB ).toEqual( resultA );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js
new file mode 100644
index 00000000000000..b094d1e827783e
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js
@@ -0,0 +1,1462 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+	getMergedFontFamiliesAndFontFamilyFaces,
+	findNearestFontWeight,
+	findNearestFontStyle,
+	findNearestStyleAndWeight,
+} from '../typography-utils';
+
+describe( 'typography utils', () => {
+	describe( 'getTypographyFontSizeValue', () => {
+		[
+			{
+				message:
+					'should return value when fluid typography is not active',
+				preset: {
+					size: '28px',
+				},
+				typographySettings: undefined,
+				expected: '28px',
+			},
+
+			{
+				message: 'should return value where font size is 0',
+				preset: {
+					size: 0,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: 0,
+			},
+
+			{
+				message: "should return value where font size is '0'",
+				preset: {
+					size: '0',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: '0',
+			},
+
+			{
+				message: 'should return value where `size` is `null`.',
+				preset: {
+					size: null,
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected: null,
+			},
+
+			{
+				message: 'should return value when fluid is `false`',
+				preset: {
+					size: '28px',
+					fluid: false,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '28px',
+			},
+
+			{
+				message: 'should return value when fluid config is empty`',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {},
+					},
+				},
+				expected: '28px',
+			},
+
+			{
+				message:
+					'should return  clamp value with `minViewportWidth` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minViewportWidth: '500px',
+						},
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
+			},
+
+			{
+				message:
+					'should return  clamp value with `maxViewportWidth` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '500px',
+						},
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			},
+
+			{
+				message:
+					'should return clamp value with `layout.wideSize` override',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+					layout: {
+						wideSize: '500px',
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			},
+
+			{
+				message:
+					'should return clamp value with `maxViewportWidth` preferred over fallback `layout.wideSize` value',
+				preset: {
+					size: '28px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1000px',
+						},
+					},
+					layout: {
+						wideSize: '500px',
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.485), 28px)',
+			},
+
+			{
+				message: 'should return already clamped value',
+				preset: {
+					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+			},
+
+			{
+				message: 'should return value with unsupported unit',
+				preset: {
+					size: '1000%',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '1000%',
+			},
+
+			{
+				message: 'should return clamp value with rem min and max units',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default max viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1200px',
+						},
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 1.147), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default min viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minViewportWidth: '800px',
+						},
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.5rem) * 1.262), 1.75rem)',
+			},
+
+			{
+				message: 'should return clamp value with em min and max units',
+				preset: {
+					size: '1.75em',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
+			},
+
+			{
+				message: 'should return clamp value for floats',
+				preset: {
+					size: '70.175px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
+			},
+
+			{
+				message:
+					'should coerce integer to `px` and returns clamp value',
+				preset: {
+					size: 33,
+					fluid: true,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
+			},
+
+			{
+				message: 'should coerce float to `px` and returns clamp value',
+				preset: {
+					size: 70.175,
+					fluid: true,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
+			},
+
+			{
+				message:
+					'should return clamp value when `fluid` is empty array',
+				preset: {
+					size: '28px',
+					fluid: [],
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			},
+
+			{
+				message: 'should return clamp value when `fluid` is `null`',
+				preset: {
+					size: '28px',
+					fluid: null,
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			},
+
+			{
+				message:
+					'returns clamp value where min and max fluid values defined',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			},
+
+			{
+				message:
+					'should apply maxViewportWidth as maximum viewport width',
+				preset: {
+					size: '80px',
+					fluid: {
+						min: '70px',
+						max: '125px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: {
+							maxViewportWidth: '1100px',
+						},
+					},
+				},
+				expected:
+					'clamp(70px, 4.375rem + ((1vw - 3.2px) * 7.051), 125px)',
+			},
+
+			{
+				message: 'returns clamp value where max is equal to size',
+				preset: {
+					size: '7.8125rem',
+					fluid: {
+						min: '4.375rem',
+						max: '7.8125rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
+			},
+
+			{
+				message:
+					'should return clamp value if min font size is greater than max',
+				preset: {
+					size: '3rem',
+					fluid: {
+						min: '5rem',
+						max: '32px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
+			},
+
+			{
+				message: 'should return value with invalid min/max fluid units',
+				preset: {
+					size: '10em',
+					fluid: {
+						min: '20vw',
+						max: '50%',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '10em',
+			},
+
+			{
+				message:
+					'should return value when size is < lower bounds and no fluid min/max set',
+				preset: {
+					size: '3px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '3px',
+			},
+
+			{
+				message:
+					'should return value when size is equal to lower bounds and no fluid min/max set',
+				preset: {
+					size: '14px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: '14px',
+			},
+
+			{
+				message:
+					'should return clamp value with different min max units',
+				preset: {
+					size: '28px',
+					fluid: {
+						min: '20px',
+						max: '50rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
+			},
+
+			{
+				message:
+					'should return clamp value where no fluid max size is set',
+				preset: {
+					size: '50px',
+					fluid: {
+						min: '2.6rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
+			},
+
+			{
+				message:
+					'should return clamp value where no fluid min size is set',
+				preset: {
+					size: '28px',
+					fluid: {
+						max: '80px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when fluid values are set',
+				preset: {
+					size: '1.5rem',
+					fluid: {
+						min: '0.5rem',
+						max: '5rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid min is set',
+				preset: {
+					size: '20px',
+					fluid: {
+						min: '12px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
+			},
+
+			{
+				message:
+					'should not apply lower bound test when only fluid max is set',
+				preset: {
+					size: '0.875rem',
+					fluid: {
+						max: '20rem',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
+			},
+			{
+				message:
+					'should return clamp value when min and max font sizes are equal',
+				preset: {
+					size: '4rem',
+					fluid: {
+						min: '30px',
+						max: '30px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected: 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
+			},
+
+			{
+				message:
+					'should use default min font size value where min font size unit in fluid config is not supported',
+				preset: {
+					size: '15px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16%',
+						},
+					},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 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',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+						},
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px)',
+			},
+
+			{
+				message:
+					'should return value when font size <= custom min font size bound',
+				preset: {
+					size: '15px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+						},
+					},
+				},
+				expected: '15px',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for em values when custom min font size is not set',
+				preset: {
+					size: '12rem',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for px values when custom min font size is not set',
+				preset: {
+					size: '200px',
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
+			},
+
+			{
+				message:
+					'should not apply scaled min font size for minimum font size when custom min font size is set',
+				preset: {
+					size: '200px',
+					fluid: {
+						min: '100px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: true,
+					},
+				},
+				expected:
+					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
+			},
+
+			{
+				message: 'should apply all custom fluid typography settings',
+				preset: {
+					size: '17px',
+				},
+				settings: {
+					typography: {
+						fluid: {
+							minFontSize: '16px',
+							maxViewportWidth: '1200px',
+							minViewportWidth: '640px',
+						},
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
+			},
+
+			// Individual preset settings override global settings.
+			{
+				message:
+					'should convert individual preset size to fluid if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: true,
+				},
+				settings: {
+					typography: {},
+				},
+				expected:
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
+			},
+			{
+				message:
+					'should use individual preset settings if fluid is disabled in global settings',
+				preset: {
+					size: '17px',
+					fluid: {
+						min: '16px',
+						max: '26px',
+					},
+				},
+				settings: {
+					typography: {
+						fluid: false,
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
+			},
+		].forEach( ( { message, preset, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect( getTypographyFontSizeValue( preset, settings ) ).toBe(
+					expected
+				);
+			} );
+		} );
+	} );
+
+	describe( 'getMergedFontFamiliesAndFontFamilyFaces', () => {
+		[
+			{
+				message:
+					'should return empty arrays when settings and fontFamily are empty',
+				settings: {},
+				fontFamily: '',
+				expected: {
+					fontFamilies: [],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return empty arrays when only settings is `undefined`',
+				settings: undefined,
+				fontFamily: 'ABeeZee, sans-serif',
+				expected: {
+					fontFamilies: [],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return fontFamilies array and an empty fontFamilyFaces array when fontfamily is empty',
+				settings: {
+					typography: {
+						fontFamilies: {
+							custom: [
+								{
+									name: 'ABeeZee',
+									slug: 'abeezee',
+									fontFamily: 'ABeeZee, sans-serif',
+									fontFace: [
+										{
+											src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+											fontWeight: '400',
+											fontStyle: 'italic',
+											fontFamily: 'ABeeZee',
+										},
+									],
+								},
+							],
+						},
+					},
+				},
+				fontFamily: '',
+				expected: {
+					fontFamilies: [
+						{
+							fontFace: [
+								{
+									fontFamily: 'ABeeZee',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+								},
+							],
+							fontFamily: 'ABeeZee, sans-serif',
+							name: 'ABeeZee',
+							slug: 'abeezee',
+						},
+					],
+					fontFamilyFaces: [],
+				},
+			},
+
+			{
+				message:
+					'should return font families and font faces when both settings and fontFamily are defined',
+				settings: {
+					typography: {
+						fontFamilies: {
+							theme: [
+								{
+									fontFace: [
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'normal',
+											fontWeight: '400',
+											src: [
+												'file:./assets/fonts/pt-sans_normal_400.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'normal',
+											fontWeight: '700',
+											src: [
+												'file:./assets/fonts/pt-sans_normal_700.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'italic',
+											fontWeight: '400',
+											src: [
+												'file:./assets/fonts/pt-sans_italic_400.ttf',
+											],
+										},
+										{
+											fontFamily: 'PT Sans',
+											fontStyle: 'italic',
+											fontWeight: '700',
+											src: [
+												'file:./assets/fonts/pt-sans_italic_700.ttf',
+											],
+										},
+									],
+									fontFamily: 'PT Sans',
+									name: 'PT Sans',
+									slug: 'pt-sans',
+								},
+							],
+							custom: [
+								{
+									name: 'ABeeZee',
+									slug: 'abeezee',
+									fontFamily: 'ABeeZee, sans-serif',
+									fontFace: [
+										{
+											src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+											fontWeight: '400',
+											fontStyle: 'italic',
+											fontFamily: 'ABeeZee',
+										},
+									],
+								},
+							],
+						},
+					},
+				},
+				fontFamily: 'ABeeZee, sans-serif',
+				expected: {
+					fontFamilyFaces: [
+						{
+							fontFamily: 'ABeeZee',
+							fontStyle: 'italic',
+							fontWeight: '400',
+							src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+						},
+					],
+					fontFamilies: [
+						{
+							fontFace: [
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'normal',
+									fontWeight: '400',
+									src: [
+										'file:./assets/fonts/pt-sans_normal_400.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'normal',
+									fontWeight: '700',
+									src: [
+										'file:./assets/fonts/pt-sans_normal_700.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: [
+										'file:./assets/fonts/pt-sans_italic_400.ttf',
+									],
+								},
+								{
+									fontFamily: 'PT Sans',
+									fontStyle: 'italic',
+									fontWeight: '700',
+									src: [
+										'file:./assets/fonts/pt-sans_italic_700.ttf',
+									],
+								},
+							],
+							fontFamily: 'PT Sans',
+							name: 'PT Sans',
+							slug: 'pt-sans',
+						},
+						{
+							fontFace: [
+								{
+									fontFamily: 'ABeeZee',
+									fontStyle: 'italic',
+									fontWeight: '400',
+									src: 'http://www.wordpress.org/wp-content/uploads/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+								},
+							],
+							fontFamily: 'ABeeZee, sans-serif',
+							name: 'ABeeZee',
+							slug: 'abeezee',
+						},
+					],
+				},
+			},
+		].forEach( ( { message, settings, fontFamily, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getMergedFontFamiliesAndFontFamilyFaces(
+						settings,
+						fontFamily
+					)
+				).toEqual( expected );
+			} );
+		} );
+	} );
+
+	describe( 'findNearestFontWeight', () => {
+		[
+			{
+				message:
+					'should return empty string when newFontWeightValue is `undefined`',
+				availableFontWeights: undefined,
+				newFontWeightValue: undefined,
+				expected: '',
+			},
+			{
+				message:
+					'should return newFontWeightValue value when availableFontWeights is empty',
+				availableFontWeights: [],
+				newFontWeightValue: '300',
+				expected: '300',
+			},
+			{
+				message: 'should return correct nearest higher font weight',
+				availableFontWeights: [
+					{ name: 'Regular', value: '400' },
+					{ name: 'Bold', value: '700' },
+					{ name: 'Black', value: '900' },
+				],
+				newFontWeightValue: '300',
+				expected: '400',
+			},
+			{
+				message: 'should return correct nearest lower font weight',
+				availableFontWeights: [
+					{ name: 'Thin', value: '100' },
+					{ name: 'Light', value: '300' },
+					{ name: 'Regular', value: '400' },
+				],
+				newFontWeightValue: '900',
+				expected: '400',
+			},
+		].forEach(
+			( {
+				message,
+				availableFontWeights,
+				newFontWeightValue,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestFontWeight(
+							availableFontWeights,
+							newFontWeightValue
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
+	describe( 'findNearestFontStyle', () => {
+		[
+			{
+				message:
+					'should return empty string when newFontStyleValue is `undefined`',
+				availableFontStyles: undefined,
+				newFontStyleValue: undefined,
+				expected: '',
+			},
+			{
+				message:
+					'should return newFontStyleValue value when availableFontStyles is empty',
+				availableFontStyles: [],
+				newFontStyleValue: 'italic',
+				expected: 'italic',
+			},
+			{
+				message:
+					'should return empty string if there is no new font style available',
+				availableFontStyles: [ { name: 'Normal', value: 'normal' } ],
+				newFontStyleValue: 'italic',
+				expected: '',
+			},
+			{
+				message:
+					'should return empty string if the new font style is invalid',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'not-valid',
+				expected: '',
+			},
+			{
+				message: 'should return italic if oblique is not available',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'oblique',
+				expected: 'italic',
+			},
+			{
+				message: 'should return normal if normal is available',
+				availableFontStyles: [
+					{ name: 'Regular', value: 'normal' },
+					{ name: 'Italic', value: 'italic' },
+				],
+				newFontStyleValue: 'normal',
+				expected: 'normal',
+			},
+		].forEach(
+			( {
+				message,
+				availableFontStyles,
+				newFontStyleValue,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestFontStyle(
+							availableFontStyles,
+							newFontStyleValue
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
+	describe( 'findNearestStyleAndWeight', () => {
+		[
+			{
+				message: 'should return empty object when all values are empty',
+				fontFamilyFaces: [],
+				fontStyle: undefined,
+				fontWeight: undefined,
+				expected: {},
+			},
+			{
+				message:
+					'should return original fontStyle and fontWeight when fontFamilyFaces is empty',
+				fontFamilyFaces: [],
+				fontStyle: 'italic',
+				fontWeight: '700',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return undefined values if both fontStyle and fontWeight are not available',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'ABeeZee',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/esDT31xSG-6AGleN2tCkkJUCGpG-GQ.woff2',
+						],
+					},
+				],
+				fontStyle: undefined,
+				fontWeight: undefined,
+				expected: {
+					nearestFontStyle: undefined,
+					nearestFontWeight: undefined,
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/100',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '100',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for italic/900',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'italic',
+				fontWeight: '900',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for oblique/600',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'oblique',
+				fontWeight: '600',
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '700',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for 300 font weight and empty font style',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: undefined,
+				fontWeight: '300',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for oblique font style and empty font weight',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'oblique',
+				fontWeight: undefined,
+				expected: {
+					nearestFontStyle: 'italic',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain numerical fontWeight value',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: 400,
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'italic',
+						fontWeight: '400',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Italic.woff2',
+						],
+					},
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						fontWeight: '700',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '400',
+				},
+			},
+			{
+				message:
+					'should return nearest fontStyle and fontWeight for normal/400 when fontFamilyFaces contain undefined fontWeight value',
+				fontFamilyFaces: [
+					{
+						fontFamily: 'IBM Plex Mono',
+						fontStyle: 'normal',
+						src: [
+							'file:./assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2',
+						],
+					},
+				],
+				fontStyle: 'normal',
+				fontWeight: '400',
+				expected: {
+					nearestFontStyle: 'normal',
+					nearestFontWeight: '700',
+				},
+			},
+		].forEach(
+			( {
+				message,
+				fontFamilyFaces,
+				fontStyle,
+				fontWeight,
+				expected,
+			} ) => {
+				it( `${ message }`, () => {
+					expect(
+						findNearestStyleAndWeight(
+							fontFamilyFaces,
+							fontStyle,
+							fontWeight
+						)
+					).toEqual( expected );
+				} );
+			}
+		);
+	} );
+
+	describe( 'typography utils', () => {
+		[
+			{
+				message:
+					'should return `undefined` when settings is `undefined`',
+				settings: undefined,
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography is `undefined`',
+				settings: {},
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `undefined` when typography.fluid is `undefined`',
+				settings: { typography: {} },
+				expected: { fluid: undefined },
+			},
+
+			{
+				message:
+					'should return `false` when typography.fluid is disabled by `false`',
+				settings: { typography: { fluid: false } },
+				expected: { fluid: false },
+			},
+
+			{
+				message: 'should return `{}` when typography.fluid is empty',
+				settings: { typography: { fluid: {} } },
+				expected: { fluid: {} },
+			},
+
+			{
+				message:
+					'should return false when typography.fluid is disabled and layout.wideSize is defined',
+				settings: {
+					typography: { fluid: false },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: false },
+			},
+
+			{
+				message:
+					'should return true when fluid is enabled by a boolean',
+				settings: { typography: { fluid: true } },
+				expected: { fluid: true },
+			},
+
+			{
+				message:
+					'should return fluid settings with merged `layout.wideSize`',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: {
+					fluid: { maxViewportWidth: '1000rem', minFontSize: '16px' },
+				},
+			},
+
+			{
+				message:
+					'should prioritize fluid `maxViewportWidth` over `layout.wideSize`',
+				settings: {
+					typography: { fluid: { maxViewportWidth: '10px' } },
+					layout: { wideSize: '1000rem' },
+				},
+				expected: { fluid: { maxViewportWidth: '10px' } },
+			},
+			{
+				message: 'should not merge `layout.wideSize` if it is fluid',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: 'clamp(1000px, 85vw, 2000px)' },
+				},
+				expected: {
+					fluid: { minFontSize: '16px' },
+				},
+			},
+		].forEach( ( { message, settings, expected } ) => {
+			it( `${ message }`, () => {
+				expect(
+					getFluidTypographyOptionsFromSettings( settings )
+				).toEqual( expected );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js
new file mode 100644
index 00000000000000..a8b1e9e1bdf1b9
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js
@@ -0,0 +1,435 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockPaddings,
+	getBlockColors,
+	parseStylesVariables,
+	getGlobalStyles,
+} from '../use-global-styles-context';
+
+const DEFAULT_COLORS = [
+	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
+	{ color: '#000000', name: 'Primary', slug: 'primary' },
+	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
+];
+
+const GLOBAL_STYLES_PALETTE = [
+	{
+		slug: 'green',
+		color: '#D1E4DD',
+		name: 'Green',
+	},
+	{
+		slug: 'blue',
+		color: '#D1DFE4',
+		name: 'Blue',
+	},
+	{
+		slug: 'purple',
+		color: '#D1D1E4',
+		name: 'Purple',
+	},
+	{
+		color: '#cf1594',
+		name: 'Color 2 ',
+		slug: 'custom-color-2',
+	},
+];
+
+const GLOBAL_STYLES_GRADIENTS = {
+	default: [
+		{
+			name: 'Vivid cyan blue to vivid purple',
+			gradient:
+				'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+			slug: 'vivid-cyan-blue-to-vivid-purple',
+		},
+		{
+			name: 'Light green cyan to vivid green cyan',
+			gradient:
+				'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+			slug: 'light-green-cyan-to-vivid-green-cyan',
+		},
+	],
+	theme: [
+		{
+			slug: 'purple-to-blue',
+			gradient:
+				'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
+			name: 'Purple to Blue',
+		},
+		{
+			slug: 'green-to-purple',
+			gradient:
+				'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
+			name: 'Green to Purple',
+		},
+	],
+};
+
+const DEFAULT_GLOBAL_STYLES = {
+	color: {
+		background: 'var(--wp--preset--color--green)',
+		text: 'var(--wp--preset--color--blue)',
+	},
+	typography: {
+		fontSize: 'var(--wp--preset--font-size--normal)',
+		lineHeight: 'var(--wp--custom--line-height--body)',
+	},
+	elements: {
+		link: {
+			color: {
+				text: 'var(--wp--preset--color--purple)',
+			},
+		},
+		h1: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--gigantic)',
+				lineHeight: 'var(--wp--custom--line-height--page-title)',
+			},
+		},
+		h2: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--extra-large)',
+				lineHeight: 'var(--wp--custom--line-height--heading)',
+			},
+		},
+	},
+	blocks: {
+		'core/button': {
+			color: {
+				background: 'var(--wp--preset--color--purple)',
+				text: 'var(--wp--preset--color--green)',
+			},
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--normal)',
+			},
+		},
+		'core/separator': {
+			color: {
+				text: 'var:preset|color|custom-color-2',
+			},
+		},
+	},
+};
+
+const PARSED_GLOBAL_STYLES = {
+	color: {
+		background: '#D1E4DD',
+		text: '#D1DFE4',
+	},
+	typography: {
+		fontSize: '18px',
+		lineHeight: '1.7',
+	},
+	elements: {
+		link: {
+			color: {
+				text: '#D1D1E4',
+			},
+		},
+		h1: {
+			typography: {
+				fontSize: '144px',
+				lineHeight: '1.1',
+			},
+		},
+		h2: {
+			typography: {
+				fontSize: '40px',
+				lineHeight: '1.3',
+			},
+		},
+	},
+	blocks: {
+		'core/button': {
+			color: {
+				background: '#D1D1E4',
+				text: '#D1E4DD',
+			},
+			typography: {
+				fontSize: '18px',
+			},
+		},
+		'core/separator': {
+			color: {
+				text: '#cf1594',
+			},
+		},
+	},
+};
+
+const RAW_FEATURES = {
+	color: {
+		palette: {
+			default: [
+				{
+					name: 'Black',
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					name: 'Cyan bluish gray',
+					slug: 'cyan-bluish-gray',
+					color: '#abb8c3',
+				},
+				{
+					name: 'White',
+					slug: 'white',
+					color: '#ffffff',
+				},
+			],
+			theme: [
+				{
+					slug: 'green',
+					color: '#D1E4DD',
+					name: 'Green',
+				},
+				{
+					slug: 'blue',
+					color: '#D1DFE4',
+					name: 'Blue',
+				},
+				{
+					slug: 'purple',
+					color: '#D1D1E4',
+					name: 'Purple',
+				},
+			],
+			custom: [
+				{
+					color: '#1bf5c1',
+					name: 'Color 1 ',
+					slug: 'custom-color-1',
+				},
+				{
+					color: '#cf1594',
+					name: 'Color 2 ',
+					slug: 'custom-color-2',
+				},
+			],
+		},
+		gradients: {
+			default: [
+				{
+					name: 'Vivid cyan blue to vivid purple',
+					gradient:
+						'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+					slug: 'vivid-cyan-blue-to-vivid-purple',
+				},
+				{
+					name: 'Light green cyan to vivid green cyan',
+					gradient:
+						'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+					slug: 'light-green-cyan-to-vivid-green-cyan',
+				},
+			],
+			theme: [
+				{
+					slug: 'purple-to-blue',
+					gradient: 'linear-gradient(160deg, #D1D1E4, #D1DFE4)',
+					name: 'Purple to Blue',
+				},
+				{
+					slug: 'green-to-purple',
+					gradient: 'linear-gradient(160deg, #D1E4DD, #D1D1E4)',
+					name: 'Green to Purple',
+				},
+			],
+		},
+	},
+	typography: {
+		fontSizes: {
+			theme: [
+				{
+					name: 'Normal',
+					slug: 'normal',
+					size: '18px',
+					sizePx: '18px',
+				},
+				{
+					slug: 'extra-large',
+					size: '40px',
+					sizePx: '40px',
+					name: 'Extra large',
+				},
+				{
+					slug: 'gigantic',
+					size: '144px',
+					sizePx: '144px',
+					name: 'Gigantic',
+				},
+			],
+		},
+	},
+	custom: {
+		'line-height': {
+			body: 1.7,
+			heading: 1.3,
+			'page-title': 1.1,
+		},
+	},
+};
+
+const MAPPED_VALUES = {
+	color: {
+		values: GLOBAL_STYLES_PALETTE,
+		slug: 'color',
+	},
+	'font-size': {
+		values: RAW_FEATURES.typography.fontSizes.theme,
+		slug: 'size',
+	},
+};
+
+describe( 'getBlockPaddings', () => {
+	const PADDING = 12;
+
+	it( 'returns no paddings for a block without background color', () => {
+		const paddings = getBlockPaddings(
+			{ color: 'red' },
+			{ backgroundColor: 'red' },
+			{ textColor: 'primary' }
+		);
+		expect( paddings ).toEqual( expect.objectContaining( {} ) );
+	} );
+
+	it( 'returns paddings for a block with background color', () => {
+		const paddings = getBlockPaddings(
+			{ color: 'red' },
+			{},
+			{ backgroundColor: 'red', textColor: 'primary' }
+		);
+		expect( paddings ).toEqual(
+			expect.objectContaining( { padding: PADDING } )
+		);
+	} );
+
+	it( 'returns no paddings for an inner block without background color within a parent block with background color', () => {
+		const paddings = getBlockPaddings(
+			{ backgroundColor: 'blue', color: 'yellow', padding: PADDING },
+			{},
+			{ textColor: 'primary' }
+		);
+
+		expect( paddings ).toEqual(
+			expect.not.objectContaining( { padding: PADDING } )
+		);
+	} );
+} );
+
+describe( 'getBlockColors', () => {
+	it( 'returns the theme colors correctly', () => {
+		const blockColors = getBlockColors(
+			{ backgroundColor: 'accent', textColor: 'secondary' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				backgroundColor: '#cd2653',
+				color: '#6d6d6d',
+			} )
+		);
+	} );
+
+	it( 'returns custom background color correctly', () => {
+		const blockColors = getBlockColors(
+			{ backgroundColor: '#222222', textColor: 'accent' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				backgroundColor: '#222222',
+				color: '#cd2653',
+			} )
+		);
+	} );
+
+	it( 'returns custom text color correctly', () => {
+		const blockColors = getBlockColors(
+			{ textColor: '#4ddddd' },
+			DEFAULT_COLORS
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( {
+				color: '#4ddddd',
+			} )
+		);
+	} );
+} );
+
+describe( 'parseStylesVariables', () => {
+	it( 'returns the parsed preset values correctly', () => {
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const blockColors = parseStylesVariables(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( blockColors ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+
+	it( 'returns the parsed custom color values correctly', () => {
+		const defaultStyles = {
+			...DEFAULT_GLOBAL_STYLES,
+			color: {
+				text: 'var(--wp--custom--color--blue)',
+				background: 'var(--wp--custom--color--green)',
+			},
+		};
+		const customValues = parseStylesVariables(
+			JSON.stringify( RAW_FEATURES.custom ),
+			MAPPED_VALUES
+		);
+		const styles = parseStylesVariables(
+			JSON.stringify( defaultStyles ),
+			MAPPED_VALUES,
+			customValues
+		);
+		expect( styles ).toEqual(
+			expect.objectContaining( PARSED_GLOBAL_STYLES )
+		);
+	} );
+} );
+
+describe( 'getGlobalStyles', () => {
+	it( 'returns the global styles data correctly', () => {
+		const rawFeatures = JSON.stringify( RAW_FEATURES );
+		const gradients = parseStylesVariables(
+			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
+			MAPPED_VALUES
+		);
+
+		const globalStyles = getGlobalStyles(
+			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
+			rawFeatures
+		);
+
+		expect( globalStyles ).toEqual(
+			expect.objectContaining( {
+				__experimentalFeatures: {
+					blocks: {},
+					color: {
+						palette: RAW_FEATURES.color.palette,
+						gradients,
+						text: true,
+						background: true,
+						defaultPalette: true,
+						defaultGradients: true,
+					},
+					typography: {
+						fontSizes: RAW_FEATURES.typography.fontSizes,
+						customLineHeight: RAW_FEATURES.custom[ 'line-height' ],
+					},
+				},
+				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
+			} )
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
new file mode 100644
index 00000000000000..93e5cc9afdbb3c
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -0,0 +1,1131 @@
+/**
+ * WordPress dependencies
+ */
+import { __EXPERIMENTAL_ELEMENTS as ELEMENTS } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getLayoutStyles,
+	getNodesWithSettings,
+	getNodesWithStyles,
+	getBlockSelectors,
+	toCustomProperties,
+	toStyles,
+	getStylesDeclarations,
+	processCSSNesting,
+} from '../use-global-styles-output';
+import { ROOT_BLOCK_SELECTOR, ROOT_CSS_PROPERTIES_SELECTOR } from '../utils';
+
+describe( 'global styles renderer', () => {
+	describe( 'getNodesWithStyles', () => {
+		it( 'should return the nodes with styles', () => {
+			const tree = {
+				styles: {
+					color: {
+						background: 'red',
+						text: 'red',
+					},
+					blocks: {
+						'core/heading': {
+							color: {
+								background: 'blue',
+								text: 'blue',
+							},
+							elements: {
+								h1: {
+									typography: {
+										fontSize: '42px',
+									},
+								},
+								h2: {
+									typography: {
+										fontSize: '23px',
+									},
+								},
+								link: {
+									':hover': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+									':focus': {
+										color: {
+											background: 'green',
+											text: 'yellow',
+										},
+									},
+								},
+							},
+						},
+						'core/image': {
+							border: {
+								radius: '9999px',
+							},
+						},
+					},
+					elements: {
+						link: {
+							color: {
+								background: 'yellow',
+								text: 'yellow',
+							},
+							':hover': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
+							':focus': {
+								color: {
+									background: 'hotpink',
+									text: 'black',
+								},
+							},
+						},
+					},
+				},
+			};
+			const blockSelectors = {
+				'core/heading': {
+					selector: '.my-heading1, .my-heading2',
+				},
+				'core/image': {
+					selector: '.my-image',
+					featureSelectors: '.my-image img, .my-image .crop-area',
+				},
+			};
+
+			expect( getNodesWithStyles( tree, blockSelectors ) ).toEqual( [
+				{
+					styles: {
+						color: {
+							background: 'red',
+							text: 'red',
+						},
+					},
+					selector: ROOT_BLOCK_SELECTOR,
+					skipSelectorWrapper: true,
+				},
+				{
+					styles: {
+						color: {
+							background: 'yellow',
+							text: 'yellow',
+						},
+						':hover': {
+							color: {
+								background: 'hotpink',
+								text: 'black',
+							},
+						},
+						':focus': {
+							color: {
+								background: 'hotpink',
+								text: 'black',
+							},
+						},
+					},
+					selector: ELEMENTS.link,
+					skipSelectorWrapper: true,
+				},
+				{
+					styles: {
+						color: {
+							background: 'blue',
+							text: 'blue',
+						},
+					},
+					selector: '.my-heading1, .my-heading2',
+				},
+				{
+					styles: {
+						typography: {
+							fontSize: '42px',
+						},
+					},
+					selector: '.my-heading1 h1, .my-heading2 h1',
+				},
+				{
+					styles: {
+						typography: {
+							fontSize: '23px',
+						},
+					},
+					selector: '.my-heading1 h2, .my-heading2 h2',
+				},
+				{
+					styles: {
+						':hover': {
+							color: {
+								background: 'green',
+								text: 'yellow',
+							},
+						},
+						':focus': {
+							color: {
+								background: 'green',
+								text: 'yellow',
+							},
+						},
+					},
+					selector:
+						'.my-heading1 a:where(:not(.wp-element-button)), .my-heading2 a:where(:not(.wp-element-button))',
+				},
+				{
+					styles: {
+						border: {
+							radius: '9999px',
+						},
+					},
+					selector: '.my-image',
+					featureSelectors: '.my-image img, .my-image .crop-area',
+				},
+			] );
+		} );
+	} );
+	describe( 'getNodesWithSettings', () => {
+		it( 'should return nodes with settings', () => {
+			const tree = {
+				styles: {
+					color: {
+						background: 'red',
+						text: 'red',
+					},
+				},
+				settings: {
+					color: {
+						palette: [
+							{ name: 'White', slug: 'white', color: 'white' },
+							{ name: 'Black', slug: 'black', color: 'black' },
+						],
+					},
+					blocks: {
+						'core/paragraph': {
+							typography: {
+								fontSizes: [
+									{
+										name: 'small',
+										slug: 'small',
+										size: '12px',
+									},
+									{
+										name: 'medium',
+										slug: 'medium',
+										size: '23px',
+									},
+								],
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/paragraph': {
+					selector: 'p',
+					elements: {
+						link: 'p a',
+						h1: 'p h1',
+						h2: 'p h2',
+						h3: 'p h3',
+						h4: 'p h4',
+						h5: 'p h5',
+						h6: 'p h6',
+					},
+				},
+			};
+
+			expect( getNodesWithSettings( tree, blockSelectors ) ).toEqual( [
+				{
+					presets: {
+						color: {
+							palette: [
+								{
+									name: 'White',
+									slug: 'white',
+									color: 'white',
+								},
+								{
+									name: 'Black',
+									slug: 'black',
+									color: 'black',
+								},
+							],
+						},
+					},
+					selector: ROOT_CSS_PROPERTIES_SELECTOR,
+				},
+				{
+					presets: {
+						typography: {
+							fontSizes: [
+								{
+									name: 'small',
+									slug: 'small',
+									size: '12px',
+								},
+								{
+									name: 'medium',
+									slug: 'medium',
+									size: '23px',
+								},
+							],
+						},
+					},
+					selector: 'p',
+				},
+			] );
+		} );
+	} );
+
+	describe( 'toCustomProperties', () => {
+		it( 'should return a ruleset', () => {
+			const tree = {
+				settings: {
+					color: {
+						palette: {
+							custom: [
+								{
+									name: 'White',
+									slug: 'white',
+									color: 'white',
+								},
+								{
+									name: 'Black',
+									slug: 'black',
+									color: 'black',
+								},
+								{
+									name: 'White to Black',
+									slug: 'white2black',
+									color: 'value',
+								},
+							],
+						},
+					},
+					custom: {
+						white2black: 'value',
+						'font-primary': 'value',
+						'line-height': {
+							body: 1.7,
+							heading: 1.3,
+						},
+					},
+					blocks: {
+						'core/heading': {
+							typography: {
+								fontSizes: {
+									theme: [
+										{
+											name: 'small',
+											slug: 'small',
+											size: '12px',
+										},
+										{
+											name: 'medium',
+											slug: 'medium',
+											size: '23px',
+										},
+									],
+								},
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/heading': {
+					selector: 'h1,h2,h3,h4,h5,h6',
+				},
+			};
+
+			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
+				':root{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
+			);
+		} );
+	} );
+
+	describe( 'toStyles', () => {
+		it( 'should return a ruleset', () => {
+			const tree = {
+				settings: {
+					color: {
+						palette: {
+							default: [
+								{
+									name: 'White',
+									slug: 'white',
+									color: 'white',
+								},
+								{
+									name: 'Black',
+									slug: 'black',
+									color: 'black',
+								},
+							],
+						},
+					},
+					blocks: {
+						'core/heading': {
+							color: {
+								palette: {
+									default: [
+										{
+											name: 'Blue',
+											slug: 'blue',
+											color: 'blue',
+										},
+									],
+								},
+							},
+						},
+					},
+				},
+				styles: {
+					spacing: {
+						margin: '10px',
+						padding: '10px',
+					},
+					color: {
+						background: 'red',
+					},
+					elements: {
+						h1: {
+							typography: {
+								fontSize: '42px',
+							},
+						},
+						link: {
+							color: {
+								text: 'blue',
+							},
+							':hover': {
+								color: {
+									text: 'orange',
+								},
+							},
+							':focus': {
+								color: {
+									text: 'orange',
+								},
+							},
+						},
+					},
+					blocks: {
+						'core/group': {
+							spacing: {
+								margin: {
+									top: '10px',
+									right: '20px',
+									bottom: '30px',
+									left: '40px',
+								},
+								padding: {
+									top: '11px',
+									right: '22px',
+									bottom: '33px',
+									left: '44px',
+								},
+							},
+						},
+						'core/heading': {
+							color: {
+								text: 'orange',
+							},
+							elements: {
+								link: {
+									color: {
+										text: 'hotpink',
+									},
+									':hover': {
+										color: {
+											text: 'red',
+										},
+									},
+									':focus': {
+										color: {
+											text: 'red',
+										},
+									},
+								},
+							},
+						},
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							border: {
+								radius: '9999px',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/group': {
+					selector: '.wp-block-group',
+				},
+				'core/heading': {
+					selector: 'h1,h2,h3,h4,h5,h6',
+				},
+				'core/image': {
+					selector: '.wp-block-image',
+					featureSelectors: {
+						border: '.wp-block-image img, .wp-block-image .wp-crop-area',
+					},
+				},
+			};
+
+			expect( toStyles( tree, blockSelectors ) ).toEqual(
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }body{background-color: red;margin: 10px;padding: 10px;}a:where(:not(.wp-element-button)){color: blue;}:root :where(a:where(:not(.wp-element-button)):hover){color: orange;}:root :where(a:where(:not(.wp-element-button)):focus){color: orange;}h1{font-size: 42px;}:root :where(.wp-block-group){margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}:root :where(h1,h2,h3,h4,h5,h6){color: orange;}:root :where(h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button))){color: hotpink;}:root :where(h1 a:where(:not(.wp-element-button)):hover,h2 a:where(:not(.wp-element-button)):hover,h3 a:where(:not(.wp-element-button)):hover,h4 a:where(:not(.wp-element-button)):hover,h5 a:where(:not(.wp-element-button)):hover,h6 a:where(:not(.wp-element-button)):hover){color: red;}:root :where(h1 a:where(:not(.wp-element-button)):focus,h2 a:where(:not(.wp-element-button)):focus,h3 a:where(:not(.wp-element-button)):focus,h4 a:where(:not(.wp-element-button)):focus,h5 a:where(:not(.wp-element-button)):focus,h6 a:where(:not(.wp-element-button)):focus){color: red;}:root :where(.wp-block-image img, .wp-block-image .wp-crop-area){border-radius: 9999px;}:root :where(.wp-block-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
+			);
+		} );
+
+		it( 'should handle feature selectors', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							spacing: {
+								padding: {
+									top: '1px',
+								},
+							},
+							border: {
+								color: 'red',
+								radius: '9999px',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }:root :where(.wp-image-spacing){padding-top: 1px;}:root :where(.wp-image-border-color){border-color: red;}:root :where(.wp-image-border){border-radius: 9999px;}:root :where(.wp-image){color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should handle block variations', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							variations: {
+								foo: {
+									color: {
+										text: 'blue',
+									},
+									spacing: {
+										padding: {
+											top: '2px',
+										},
+									},
+									border: {
+										color: 'blue',
+									},
+								},
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+					styleVariationSelectors: {
+						foo: '.is-style-foo.wp-image',
+					},
+				},
+			};
+
+			const hasBlockGapSupport = false;
+			const hasFallbackGapSupport = true;
+			const disableLayoutStyles = true;
+			const disableRootPadding = true;
+			const styleOptions = {
+				blockGap: false,
+				blockStyles: true,
+				layoutStyles: false,
+				marginReset: false,
+				presets: false,
+				rootPadding: false,
+			};
+
+			// Confirm no variation styles by default.
+			const withoutVariations = toStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				hasBlockGapSupport,
+				hasFallbackGapSupport,
+				disableLayoutStyles,
+				disableRootPadding,
+				styleOptions
+			);
+			expect( withoutVariations ).toEqual( '' );
+
+			// Includes variation styles when requested.
+			styleOptions.variationStyles = true;
+			const withVariations = toStyles(
+				Object.freeze( tree ),
+				blockSelectors,
+				hasBlockGapSupport,
+				hasFallbackGapSupport,
+				disableLayoutStyles,
+				disableRootPadding,
+				styleOptions
+			);
+			expect( withVariations ).toEqual(
+				':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}'
+			);
+		} );
+
+		it( 'should handle duotone filter', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							filter: {
+								duotone: 'blur(5px)',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					duotoneSelector: '.wp-image img',
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }.wp-image img{filter: blur(5px);}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should output content and wide size variables if values are specified', () => {
+			const tree = {
+				settings: {
+					layout: {
+						contentSize: '840px',
+						wideSize: '1100px',
+					},
+				},
+			};
+			expect( toStyles( Object.freeze( tree ), 'body' ) ).toEqual(
+				':root { --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}:where(body) {margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+	} );
+
+	describe( 'getLayoutStyles', () => {
+		const layoutDefinitionsTree = {
+			settings: {
+				layout: {
+					definitions: {
+						default: {
+							name: 'default',
+							slug: 'flow',
+							className: 'is-layout-flow',
+							baseStyles: [
+								{
+									selector: ' > .alignleft',
+									rules: {
+										float: 'left',
+										'margin-inline-start': '0',
+										'margin-inline-end': '2em',
+									},
+								},
+								{
+									selector: ' > .alignright',
+									rules: {
+										float: 'right',
+										'margin-inline-start': '2em',
+										'margin-inline-end': '0',
+									},
+								},
+								{
+									selector: ' > .aligncenter',
+									rules: {
+										'margin-left': 'auto !important',
+										'margin-right': 'auto !important',
+									},
+								},
+							],
+							spacingStyles: [
+								{
+									selector: ' > *',
+									rules: {
+										'margin-block-start': '0',
+										'margin-block-end': '0',
+									},
+								},
+								{
+									selector: ' > * + *',
+									rules: {
+										'margin-block-start': null,
+										'margin-block-end': '0',
+									},
+								},
+							],
+						},
+						flex: {
+							name: 'flex',
+							slug: 'flex',
+							className: 'is-layout-flex',
+							displayMode: 'flex',
+							baseStyles: [
+								{
+									selector: '',
+									rules: {
+										'flex-wrap': 'wrap',
+										'align-items': 'center',
+									},
+								},
+								{
+									selector: ' > *',
+									rules: {
+										margin: '0',
+									},
+								},
+							],
+							spacingStyles: [
+								{
+									selector: '',
+									rules: {
+										gap: null,
+									},
+								},
+							],
+						},
+					},
+				},
+			},
+		};
+
+		it( 'should return fallback gap flex layout style, and all base styles, if block styles are enabled and blockGap is disabled', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: false,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				':where(.is-layout-flex) { gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+			);
+		} );
+
+		it( 'should return fallback gap layout styles, and base styles, if blockGap is enabled, but there is no blockGap value', () => {
+			const style = {};
+
+			const layoutStyles = getLayoutStyles( {
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 0.5em; }:root { --wp--style--block-gap: 0.5em; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+			);
+		} );
+
+		it( 'should return real gap layout style if blockGap is enabled, and base styles', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
+				style,
+				selector: 'body',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				':root :where(.is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.is-layout-flex) { gap: 12px; }:root { --wp--style--block-gap: 12px; }.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > * { margin: 0; }'
+			);
+		} );
+
+		it( 'should return real gap layout style if blockGap is enabled', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
+				style,
+				selector: '.wp-block-group',
+				hasBlockGapSupport: true,
+				hasFallbackGapSupport: true,
+			} );
+
+			expect( layoutStyles ).toEqual(
+				':root :where(.wp-block-group-is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:root :where(.wp-block-group-is-layout-flex) { gap: 12px; }'
+			);
+		} );
+
+		it( 'should return fallback gap flex layout style for a block if blockGap is disabled, and a fallback value is provided', () => {
+			const style = { spacing: { blockGap: '12px' } };
+
+			const layoutStyles = getLayoutStyles( {
+				layoutDefinitions:
+					layoutDefinitionsTree.settings.layout.definitions,
+				style,
+				selector: '.wp-block-group',
+				hasBlockGapSupport: false, // This means that the fallback value will be used instead of the "real" one.
+				hasFallbackGapSupport: true,
+				fallbackGapValue: '2em',
+			} );
+
+			expect( layoutStyles ).toEqual(
+				':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
+			);
+		} );
+	} );
+
+	describe( 'getBlockSelectors', () => {
+		it( 'should return block selectors data', () => {
+			const imageSelectors = {
+				root: '.my-image',
+				border: '.my-image img, .my-image .crop-area',
+				filter: { duotone: 'img' },
+			};
+			const imageBlock = {
+				name: 'core/image',
+				selectors: imageSelectors,
+			};
+			const blockTypes = [ imageBlock ];
+			const getBlockStyles = () => [ { name: 'foo' } ];
+
+			expect( getBlockSelectors( blockTypes, getBlockStyles ) ).toEqual( {
+				'core/image': {
+					name: imageBlock.name,
+					selector: imageSelectors.root,
+					duotoneSelector: imageSelectors.filter.duotone,
+					fallbackGapValue: undefined,
+					featureSelectors: {
+						root: '.my-image',
+						border: '.my-image img, .my-image .crop-area',
+						filter: { duotone: 'img' },
+					},
+					styleVariationSelectors: {
+						foo: '.my-image.is-style-foo',
+					},
+					hasLayoutSupport: false,
+				},
+			} );
+		} );
+
+		it( 'should return block selectors data with old experimental selectors', () => {
+			const imageSupports = {
+				border: {
+					radius: true,
+					__experimentalSelector: 'img, .crop-area',
+				},
+				color: {
+					__experimentalDuotone: 'img',
+				},
+				__experimentalSelector: '.my-image',
+			};
+			const imageBlock = { name: 'core/image', supports: imageSupports };
+			const blockTypes = [ imageBlock ];
+
+			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
+				'core/image': {
+					name: imageBlock.name,
+					selector: imageSupports.__experimentalSelector,
+					duotoneSelector: '.my-image img',
+					fallbackGapValue: undefined,
+					featureSelectors: {
+						root: '.my-image',
+						border: '.my-image img, .my-image .crop-area',
+					},
+					hasLayoutSupport: false,
+				},
+			} );
+		} );
+	} );
+
+	describe( 'getStylesDeclarations', () => {
+		const blockStyles = {
+			spacing: {
+				padding: {
+					top: '33px',
+					right: '33px',
+					bottom: '33px',
+					left: '33px',
+				},
+			},
+			color: {
+				background: 'var:preset|color|light-green-cyan',
+			},
+			typography: {
+				fontFamily: 'sans-serif',
+				fontSize: '15px',
+			},
+		};
+
+		it( 'should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', true )
+			).toEqual( [
+				'--wp--style--root--padding-top: 33px',
+				'--wp--style--root--padding-right: 33px',
+				'--wp--style--root--padding-bottom: 33px',
+				'--wp--style--root--padding-left: 33px',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'font-family: sans-serif',
+				'font-size: 15px',
+			] );
+		} );
+
+		it( 'should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', false )
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+				'font-size: 15px',
+			] );
+		} );
+
+		it( 'should not output padding variables if selector is not root', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-button__link',
+					true
+				)
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+				'font-size: 15px',
+			] );
+		} );
+
+		it( 'should output clamp values for font-size when fluid typography is enabled', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-site-title',
+					true,
+					{
+						settings: {
+							typography: {
+								fluid: true,
+							},
+						},
+					}
+				)
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+				'font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
+			] );
+		} );
+
+		it( 'should output direct values for font-size when fluid typography is disabled', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-site-title',
+					true,
+					{
+						settings: {
+							typography: {
+								fluid: false,
+							},
+						},
+					}
+				)
+			).toEqual( [
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+				'font-family: sans-serif',
+				'font-size: 15px',
+			] );
+		} );
+
+		it( 'should correctly resolve referenced values', () => {
+			const stylesWithRef = {
+				typography: {
+					fontSize: {
+						ref: 'styles.elements.h1.typography.fontSize',
+					},
+					letterSpacing: {
+						ref: 'styles.elements.h1.typography.letterSpacing',
+					},
+				},
+				background: {
+					backgroundImage: {
+						ref: 'styles.background.backgroundImage',
+					},
+					backgroundSize: {
+						ref: 'styles.background.backgroundSize',
+					},
+				},
+			};
+			const tree = {
+				styles: {
+					background: {
+						backgroundImage: {
+							url: 'http://my-image.org/image.gif',
+						},
+						backgroundSize: 'cover',
+					},
+					elements: {
+						h1: {
+							typography: {
+								fontSize: 'var:preset|font-size|xx-large',
+								letterSpacing: '2px',
+							},
+						},
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( stylesWithRef, '.wp-block', false, tree )
+			).toEqual( [
+				'font-size: var(--wp--preset--font-size--xx-large)',
+				'letter-spacing: 2px',
+				"background-image: url( 'http://my-image.org/image.gif' )",
+				'background-size: cover',
+			] );
+		} );
+		it( 'should set default values for block background styles', () => {
+			const backgroundStyles = {
+				background: {
+					backgroundImage: {
+						url: 'https://wordpress.org/assets/image.jpg',
+						id: 123,
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( backgroundStyles, '.wp-block-group' )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-size: cover',
+			] );
+			// Test with root-level styles.
+			expect(
+				getStylesDeclarations( backgroundStyles, ROOT_BLOCK_SELECTOR )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+			] );
+			expect(
+				getStylesDeclarations(
+					{
+						background: {
+							...backgroundStyles.background,
+							backgroundSize: 'contain',
+						},
+					},
+					'.wp-block-group'
+				)
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-position: 50% 50%',
+				'background-size: contain',
+			] );
+		} );
+	} );
+
+	describe( 'processCSSNesting', () => {
+		it( 'should return empty string when supplied css is empty', () => {
+			expect( processCSSNesting( '', '.foo' ) ).toEqual( '' );
+		} );
+		it( 'should return processed CSS without any nested selectors', () => {
+			expect(
+				processCSSNesting( 'color: red; margin: auto;', '.foo' )
+			).toEqual( ':root :where(.foo){color: red; margin: auto;}' );
+		} );
+		it( 'should return processed CSS when there are no root selectors', () => {
+			expect(
+				processCSSNesting( '&::before{color: red;}', '.foo' )
+			).toEqual( ':root :where(.foo)::before{color: red;}' );
+		} );
+		it( 'should return processed CSS with nested selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+					'.foo'
+				)
+			).toEqual(
+				':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}'
+			);
+		} );
+		it( 'should return processed CSS with pseudo elements', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;} & > ::before{color: darkseagreen;}',
+					'.foo'
+				)
+			).toEqual(
+				':root :where(.foo){color: red; margin: auto;}:root :where(.foo)::before{color: blue;}:root :where(.foo) ::before{color: green;}:root :where(.foo.one)::before{color: yellow;}:root :where(.foo .two)::before{color: purple;}:root :where(.foo) > ::before{color: darkseagreen;}'
+			);
+		} );
+		it( 'should return processed CSS with multiple root selectors', () => {
+			expect(
+				processCSSNesting(
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;} & > ::before{color: darkseagreen;}',
+					'.foo, .bar'
+				)
+			).toEqual(
+				':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo, .bar)::before{color: yellow;}:root :where(.foo, .bar) ::before{color: purple;}:root :where(.foo.three, .bar.three)::before{color: orange;}:root :where(.foo .four, .bar .four)::before{color: skyblue;}:root :where(.foo, .bar) > ::before{color: darkseagreen;}'
+			);
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/utils.js b/packages/block-editor/src/components/global-styles/test/utils.js
new file mode 100644
index 00000000000000..57a157662969e1
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/utils.js
@@ -0,0 +1,499 @@
+/**
+ * Internal dependencies
+ */
+import {
+	areGlobalStyleConfigsEqual,
+	getBlockStyleVariationSelector,
+	getPresetVariableFromValue,
+	getValueFromVariable,
+	scopeFeatureSelectors,
+	getResolvedThemeFilePath,
+	getResolvedRefValue,
+	getResolvedValue,
+} from '../utils';
+
+describe( 'editor utils', () => {
+	const themeJson = {
+		version: 1,
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#006ba1',
+							name: 'Secondary',
+						},
+					],
+					custom: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#a65555',
+							name: 'Secondary',
+						},
+					],
+				},
+				custom: true,
+				customDuotone: true,
+				customGradient: true,
+				link: true,
+			},
+			custom: {
+				color: {
+					primary: 'var(--wp--preset--color--primary)',
+					secondary: 'var(--wp--preset--color--secondary)',
+				},
+			},
+		},
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'file:./assets/image.jpg',
+				},
+				backgroundAttachment: 'fixed',
+				backgroundPosition: 'top left',
+			},
+			blocks: {
+				'core/group': {
+					background: {
+						backgroundImage: {
+							ref: 'styles.background.backgroundImage',
+						},
+					},
+					dimensions: {
+						minHeight: '100px',
+					},
+					spacing: {
+						padding: {
+							top: 0,
+						},
+					},
+				},
+			},
+		},
+		_links: {
+			'wp:theme-file': [
+				{
+					name: 'file:./assets/image.jpg',
+					href: 'https://wordpress.org/assets/image.jpg',
+					target: 'styles.background.backgroundImage.url',
+				},
+				{
+					name: 'file:./assets/other/image.jpg',
+					href: 'https://wordpress.org/assets/other/image.jpg',
+					target: "styles.blocks.['core/group'].background.backgroundImage.url",
+				},
+			],
+		},
+		isGlobalStylesUserThemeJSON: true,
+	};
+
+	describe( 'getPresetVariableFromValue', () => {
+		const context = 'root';
+		const propertyName = 'color.text';
+		const value = '#007cba';
+
+		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getPresetVariableFromValue(
+					themeJson.settings,
+					context,
+					'fakePropertyName',
+					value
+				);
+				expect( actual ).toBe( value );
+			} );
+		} );
+
+		describe( 'when a global style is cleared by the user', () => {
+			it( 'returns an undefined preset variable', () => {
+				const actual = getPresetVariableFromValue(
+					themeJson.settings,
+					context,
+					propertyName,
+					undefined
+				);
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when a global style is selected by the user', () => {
+			describe( 'and it is not a preset value (e.g. custom color)', () => {
+				it( 'returns the originally provided value', () => {
+					const customValue = '#6e4545';
+					const actual = getPresetVariableFromValue(
+						themeJson.settings,
+						context,
+						propertyName,
+						customValue
+					);
+					expect( actual ).toBe( customValue );
+				} );
+			} );
+
+			describe( 'and it is a preset value', () => {
+				it( 'returns the preset variable', () => {
+					const actual = getPresetVariableFromValue(
+						themeJson.settings,
+						context,
+						propertyName,
+						value
+					);
+					expect( actual ).toBe( 'var:preset|color|primary' );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'getValueFromVariable', () => {
+		describe( 'when provided an invalid variable', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					undefined
+				);
+
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when provided a preset variable', () => {
+			it( 'retrieves the correct preset value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					'var:preset|color|primary'
+				);
+
+				expect( actual ).toBe( '#007cba' );
+			} );
+		} );
+
+		describe( 'when provided a custom variable', () => {
+			it( 'retrieves the correct custom value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					'var(--wp--custom--color--secondary)'
+				);
+
+				expect( actual ).toBe( '#a65555' );
+			} );
+		} );
+
+		describe( 'when provided a dynamic reference', () => {
+			it( 'retrieves the referenced value', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: 'purple-rain',
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference and reference does not exist', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+		} );
+	} );
+
+	describe( 'areGlobalStyleConfigsEqual', () => {
+		test.each( [
+			{ original: null, variation: null, expected: true },
+			{ original: {}, variation: {}, expected: true },
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--blue)' },
+					},
+				},
+				expected: false,
+			},
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				expected: true,
+			},
+		] )(
+			'.areGlobalStyleConfigsEqual( $original, $variation )',
+			( { original, variation, expected } ) => {
+				expect(
+					areGlobalStyleConfigsEqual( original, variation )
+				).toBe( expected );
+			}
+		);
+	} );
+
+	describe( 'getBlockStyleVariationSelector', () => {
+		test.each( [
+			{ type: 'empty', selector: '', expected: '.is-style-custom' },
+			{
+				type: 'class',
+				selector: '.wp-block',
+				expected: '.wp-block.is-style-custom',
+			},
+			{
+				type: 'id',
+				selector: '#wp-block',
+				expected: '#wp-block.is-style-custom',
+			},
+			{
+				type: 'element tag',
+				selector: 'p',
+				expected: 'p.is-style-custom',
+			},
+			{
+				type: 'attribute',
+				selector: '[style*="color"]',
+				expected: '[style*="color"].is-style-custom',
+			},
+			{
+				type: 'descendant',
+				selector: '.wp-block .inner',
+				expected: '.wp-block.is-style-custom .inner',
+			},
+			{
+				type: 'comma-separated',
+				selector: '.wp-block .inner, .wp-block .alternative',
+				expected:
+					'.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
+			},
+			{
+				type: 'pseudo',
+				selector: 'div:first-child',
+				expected: 'div.is-style-custom:first-child',
+			},
+			{
+				type: ':is',
+				selector: '.wp-block:is(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:is(.outer .inner:first-child)',
+			},
+			{
+				type: ':not',
+				selector: '.wp-block:not(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:not(.outer .inner:first-child)',
+			},
+			{
+				type: ':has',
+				selector: '.wp-block:has(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:has(.outer .inner:first-child)',
+			},
+			{
+				type: ':where',
+				selector: '.wp-block:where(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:where(.outer .inner:first-child)',
+			},
+			{
+				type: 'wrapping :where',
+				selector: ':where(.outer .inner:first-child)',
+				expected: ':where(.outer.is-style-custom .inner:first-child)',
+			},
+			{
+				type: 'complex',
+				selector:
+					'.wp:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+				expected:
+					'.wp.is-style-custom:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp.is-style-custom:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+			},
+		] )(
+			'should add variation class to ancestor in $type selector',
+			( { selector, expected } ) => {
+				expect(
+					getBlockStyleVariationSelector( 'custom', selector )
+				).toBe( expected );
+			}
+		);
+	} );
+
+	describe( 'scopeFeatureSelectors', () => {
+		it( 'correctly scopes selectors while maintaining selectors object structure', () => {
+			const actual = scopeFeatureSelectors( '.custom, .secondary', {
+				color: '.my-block h1',
+				typography: {
+					root: '.my-block',
+					lineHeight: '.my-block h1',
+				},
+			} );
+
+			expect( actual ).toEqual( {
+				color: '.custom .my-block h1, .secondary .my-block h1',
+				typography: {
+					root: '.custom .my-block, .secondary .my-block',
+					lineHeight: '.custom .my-block h1, .secondary .my-block h1',
+				},
+			} );
+		} );
+	} );
+
+	describe( 'getResolvedThemeFilePath()', () => {
+		it.each( [
+			[
+				'file:./assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should return absolute URL if found in themeFileURIs',
+			],
+			[
+				'file:./misc/image.jpg',
+				'file:./misc/image.jpg',
+				'Should return value if not found in themeFileURIs',
+			],
+			[
+				'https://wordpress.org/assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should not match absolute URLs',
+			],
+		] )(
+			'Given file %s and return value %s: %s',
+			( file, returnedValue ) => {
+				expect(
+					getResolvedThemeFilePath(
+						file,
+						themeJson._links[ 'wp:theme-file' ]
+					) === returnedValue
+				).toBe( true );
+			}
+		);
+	} );
+
+	describe( 'getResolvedRefValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'file:./assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{ ref: 'styles.blocks.core/group.spacing.padding.top' },
+				0,
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedRefValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
+
+	describe( 'getResolvedValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'https://wordpress.org/assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
new file mode 100644
index 00000000000000..9bc875cdc0a308
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -0,0 +1,592 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	FontSizePicker,
+	__experimentalNumberControl as NumberControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontFamilyControl from '../font-family';
+import FontAppearanceControl from '../font-appearance-control';
+import LineHeightControl from '../line-height-control';
+import LetterSpacingControl from '../letter-spacing-control';
+import TextAlignmentControl from '../text-alignment-control';
+import TextTransformControl from '../text-transform-control';
+import TextDecorationControl from '../text-decoration-control';
+import WritingModeControl from '../writing-mode-control';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { setImmutably } from '../../utils/object';
+import {
+	getMergedFontFamiliesAndFontFamilyFaces,
+	findNearestStyleAndWeight,
+} from './typography-utils';
+
+const MIN_TEXT_COLUMNS = 1;
+const MAX_TEXT_COLUMNS = 6;
+
+export function useHasTypographyPanel( settings ) {
+	const hasFontFamily = useHasFontFamilyControl( settings );
+	const hasLineHeight = useHasLineHeightControl( settings );
+	const hasFontAppearance = useHasAppearanceControl( settings );
+	const hasLetterSpacing = useHasLetterSpacingControl( settings );
+	const hasTextAlign = useHasTextAlignmentControl( settings );
+	const hasTextTransform = useHasTextTransformControl( settings );
+	const hasTextDecoration = useHasTextDecorationControl( settings );
+	const hasWritingMode = useHasWritingModeControl( settings );
+	const hasTextColumns = useHasTextColumnsControl( settings );
+	const hasFontSize = useHasFontSizeControl( settings );
+
+	return (
+		hasFontFamily ||
+		hasLineHeight ||
+		hasFontAppearance ||
+		hasLetterSpacing ||
+		hasTextAlign ||
+		hasTextTransform ||
+		hasFontSize ||
+		hasTextDecoration ||
+		hasWritingMode ||
+		hasTextColumns
+	);
+}
+
+function useHasFontSizeControl( settings ) {
+	return (
+		( settings?.typography?.defaultFontSizes !== false &&
+			settings?.typography?.fontSizes?.default?.length ) ||
+		settings?.typography?.fontSizes?.theme?.length ||
+		settings?.typography?.fontSizes?.custom?.length ||
+		settings?.typography?.customFontSize
+	);
+}
+
+function useHasFontFamilyControl( settings ) {
+	return [ 'default', 'theme', 'custom' ].some(
+		( key ) => settings?.typography?.fontFamilies?.[ key ]?.length
+	);
+}
+
+function useHasLineHeightControl( settings ) {
+	return settings?.typography?.lineHeight;
+}
+
+function useHasAppearanceControl( settings ) {
+	return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
+}
+
+function useAppearanceControlLabel( settings ) {
+	if ( ! settings?.typography?.fontStyle ) {
+		return __( 'Font weight' );
+	}
+	if ( ! settings?.typography?.fontWeight ) {
+		return __( 'Font style' );
+	}
+	return __( 'Appearance' );
+}
+
+function useHasLetterSpacingControl( settings ) {
+	return settings?.typography?.letterSpacing;
+}
+
+function useHasTextTransformControl( settings ) {
+	return settings?.typography?.textTransform;
+}
+
+function useHasTextAlignmentControl( settings ) {
+	return settings?.typography?.textAlign;
+}
+
+function useHasTextDecorationControl( settings ) {
+	return settings?.typography?.textDecoration;
+}
+
+function useHasWritingModeControl( settings ) {
+	return settings?.typography?.writingMode;
+}
+
+function useHasTextColumnsControl( settings ) {
+	return settings?.typography?.textColumns;
+}
+
+/**
+ * Concatenate all the font sizes into a single list for the font size picker.
+ *
+ * @param {Object} settings The global styles settings.
+ *
+ * @return {Array} The merged font sizes.
+ */
+function getMergedFontSizes( settings ) {
+	const fontSizes = settings?.typography?.fontSizes;
+	const defaultFontSizesEnabled = !! settings?.typography?.defaultFontSizes;
+	return [
+		...( fontSizes?.custom ?? [] ),
+		...( fontSizes?.theme ?? [] ),
+		...( defaultFontSizesEnabled ? fontSizes?.default ?? [] : [] ),
+	];
+}
+
+function TypographyToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Typography' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	fontFamily: true,
+	fontSize: true,
+	fontAppearance: true,
+	lineHeight: true,
+	letterSpacing: true,
+	textAlign: true,
+	textTransform: true,
+	textDecoration: true,
+	writingMode: true,
+	textColumns: true,
+};
+
+export default function TypographyPanel( {
+	as: Wrapper = TypographyToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Font Family
+	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
+	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
+	const { fontFamilies, fontFamilyFaces } = useMemo( () => {
+		return getMergedFontFamiliesAndFontFamilyFaces( settings, fontFamily );
+	}, [ settings, fontFamily ] );
+
+	const setFontFamily = ( newValue ) => {
+		const slug = fontFamilies?.find(
+			( { fontFamily: f } ) => f === newValue
+		)?.slug;
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'fontFamily' ],
+				slug
+					? `var:preset|font-family|${ slug }`
+					: newValue || undefined
+			)
+		);
+	};
+	const hasFontFamily = () => !! value?.typography?.fontFamily;
+	const resetFontFamily = () => setFontFamily( undefined );
+
+	// Font Size
+	const hasFontSizeEnabled = useHasFontSizeControl( settings );
+	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
+	const mergedFontSizes = getMergedFontSizes( settings );
+
+	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
+	const setFontSize = ( newValue, metadata ) => {
+		const actualValue = !! metadata?.slug
+			? `var:preset|font-size|${ metadata?.slug }`
+			: newValue;
+
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'fontSize' ],
+				actualValue || undefined
+			)
+		);
+	};
+	const hasFontSize = () => !! value?.typography?.fontSize;
+	const resetFontSize = () => setFontSize( undefined );
+
+	// Appearance
+	const hasAppearanceControl = useHasAppearanceControl( settings );
+	const appearanceControlLabel = useAppearanceControlLabel( settings );
+	const hasFontStyles = settings?.typography?.fontStyle;
+	const hasFontWeights = settings?.typography?.fontWeight;
+	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
+	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
+	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
+		fontFamilyFaces,
+		fontStyle,
+		fontWeight
+	);
+	const setFontAppearance = useCallback(
+		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
+			// Only update the font style and weight if they have changed.
+			if ( newFontStyle !== fontStyle || newFontWeight !== fontWeight ) {
+				onChange( {
+					...value,
+					typography: {
+						...value?.typography,
+						fontStyle: newFontStyle || undefined,
+						fontWeight: newFontWeight || undefined,
+					},
+				} );
+			}
+		},
+		[ fontStyle, fontWeight, onChange, value ]
+	);
+	const hasFontAppearance = () =>
+		!! value?.typography?.fontStyle || !! value?.typography?.fontWeight;
+	const resetFontAppearance = useCallback( () => {
+		setFontAppearance( {} );
+	}, [ setFontAppearance ] );
+
+	// Check if previous font style and weight values are available in the new font family.
+	useEffect( () => {
+		if ( nearestFontStyle && nearestFontWeight ) {
+			setFontAppearance( {
+				fontStyle: nearestFontStyle,
+				fontWeight: nearestFontWeight,
+			} );
+		} else {
+			// Reset font appearance if there are no available styles or weights.
+			resetFontAppearance();
+		}
+	}, [
+		nearestFontStyle,
+		nearestFontWeight,
+		resetFontAppearance,
+		setFontAppearance,
+	] );
+
+	// Line Height
+	const hasLineHeightEnabled = useHasLineHeightControl( settings );
+	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
+	const setLineHeight = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'lineHeight' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
+	const resetLineHeight = () => setLineHeight( undefined );
+
+	// Letter Spacing
+	const hasLetterSpacingControl = useHasLetterSpacingControl( settings );
+	const letterSpacing = decodeValue(
+		inheritedValue?.typography?.letterSpacing
+	);
+	const setLetterSpacing = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'letterSpacing' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
+	const resetLetterSpacing = () => setLetterSpacing( undefined );
+
+	// Text Columns
+	const hasTextColumnsControl = useHasTextColumnsControl( settings );
+	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
+	const setTextColumns = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textColumns' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextColumns = () => !! value?.typography?.textColumns;
+	const resetTextColumns = () => setTextColumns( undefined );
+
+	// Text Transform
+	const hasTextTransformControl = useHasTextTransformControl( settings );
+	const textTransform = decodeValue(
+		inheritedValue?.typography?.textTransform
+	);
+	const setTextTransform = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textTransform' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextTransform = () => !! value?.typography?.textTransform;
+	const resetTextTransform = () => setTextTransform( undefined );
+
+	// Text Decoration
+	const hasTextDecorationControl = useHasTextDecorationControl( settings );
+	const textDecoration = decodeValue(
+		inheritedValue?.typography?.textDecoration
+	);
+	const setTextDecoration = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textDecoration' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextDecoration = () => !! value?.typography?.textDecoration;
+	const resetTextDecoration = () => setTextDecoration( undefined );
+
+	// Text Orientation
+	const hasWritingModeControl = useHasWritingModeControl( settings );
+	const writingMode = decodeValue( inheritedValue?.typography?.writingMode );
+	const setWritingMode = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'writingMode' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasWritingMode = () => !! value?.typography?.writingMode;
+	const resetWritingMode = () => setWritingMode( undefined );
+
+	// Text Alignment
+	const hasTextAlignmentControl = useHasTextAlignmentControl( settings );
+
+	const textAlign = decodeValue( inheritedValue?.typography?.textAlign );
+	const setTextAlign = ( newValue ) => {
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'textAlign' ],
+				newValue || undefined
+			)
+		);
+	};
+	const hasTextAlign = () => !! value?.typography?.textAlign;
+	const resetTextAlign = () => setTextAlign( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			typography: {},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasFontFamilyEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Font' ) }
+					hasValue={ hasFontFamily }
+					onDeselect={ resetFontFamily }
+					isShownByDefault={ defaultControls.fontFamily }
+					panelId={ panelId }
+				>
+					<FontFamilyControl
+						fontFamilies={ fontFamilies }
+						value={ fontFamily }
+						onChange={ setFontFamily }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasFontSizeEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Size' ) }
+					hasValue={ hasFontSize }
+					onDeselect={ resetFontSize }
+					isShownByDefault={ defaultControls.fontSize }
+					panelId={ panelId }
+				>
+					<FontSizePicker
+						value={ fontSize }
+						onChange={ setFontSize }
+						fontSizes={ mergedFontSizes }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						withReset={ false }
+						withSlider
+						size="__unstable-large"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasAppearanceControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ appearanceControlLabel }
+					hasValue={ hasFontAppearance }
+					onDeselect={ resetFontAppearance }
+					isShownByDefault={ defaultControls.fontAppearance }
+					panelId={ panelId }
+				>
+					<FontAppearanceControl
+						value={ {
+							fontStyle,
+							fontWeight,
+						} }
+						onChange={ setFontAppearance }
+						hasFontStyles={ hasFontStyles }
+						hasFontWeights={ hasFontWeights }
+						fontFamilyFaces={ fontFamilyFaces }
+						size="__unstable-large"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasLineHeightEnabled && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Line height' ) }
+					hasValue={ hasLineHeight }
+					onDeselect={ resetLineHeight }
+					isShownByDefault={ defaultControls.lineHeight }
+					panelId={ panelId }
+				>
+					<LineHeightControl
+						__unstableInputWidth="auto"
+						value={ lineHeight }
+						onChange={ setLineHeight }
+						size="__unstable-large"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasLetterSpacingControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Letter spacing' ) }
+					hasValue={ hasLetterSpacing }
+					onDeselect={ resetLetterSpacing }
+					isShownByDefault={ defaultControls.letterSpacing }
+					panelId={ panelId }
+				>
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault={ defaultControls.textColumns }
+					panelId={ panelId }
+				>
+					<NumberControl
+						label={ __( 'Columns' ) }
+						max={ MAX_TEXT_COLUMNS }
+						min={ MIN_TEXT_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextDecorationControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Decoration' ) }
+					hasValue={ hasTextDecoration }
+					onDeselect={ resetTextDecoration }
+					isShownByDefault={ defaultControls.textDecoration }
+					panelId={ panelId }
+				>
+					<TextDecorationControl
+						value={ textDecoration }
+						onChange={ setTextDecoration }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasWritingModeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Orientation' ) }
+					hasValue={ hasWritingMode }
+					onDeselect={ resetWritingMode }
+					isShownByDefault={ defaultControls.writingMode }
+					panelId={ panelId }
+				>
+					<WritingModeControl
+						value={ writingMode }
+						onChange={ setWritingMode }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextTransformControl && (
+				<ToolsPanelItem
+					label={ __( 'Letter case' ) }
+					hasValue={ hasTextTransform }
+					onDeselect={ resetTextTransform }
+					isShownByDefault={ defaultControls.textTransform }
+					panelId={ panelId }
+				>
+					<TextTransformControl
+						value={ textTransform }
+						onChange={ setTextTransform }
+						showNone
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasTextAlignmentControl && (
+				<ToolsPanelItem
+					label={ __( 'Text alignment' ) }
+					hasValue={ hasTextAlign }
+					onDeselect={ resetTextAlign }
+					isShownByDefault={ defaultControls.textAlign }
+					panelId={ panelId }
+				>
+					<TextAlignmentControl
+						value={ textAlign }
+						onChange={ setTextAlign }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/typography-utils.js b/packages/block-editor/src/components/global-styles/typography-utils.js
new file mode 100644
index 00000000000000..4b7c90ae4f222c
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/typography-utils.js
@@ -0,0 +1,299 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+/**
+ * Internal dependencies
+ */
+import {
+	getComputedFluidTypographyValue,
+	getTypographyValueAndUnit,
+} from '../font-sizes/fluid-utils';
+import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
+
+/**
+ * @typedef {Object} FluidPreset
+ * @property {string|undefined}  max A maximum font size value.
+ * @property {?string|undefined} min A minimum font size value.
+ */
+
+/**
+ * @typedef {Object} Preset
+ * @property {?string|?number}               size  A default font size.
+ * @property {string}                        name  A font size name, displayed in the UI.
+ * @property {string}                        slug  A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid Specifies the minimum and maximum font size value of a fluid font size.
+ */
+
+/**
+ * @typedef {Object} TypographySettings
+ * @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.
+ *
+ * The Core PHP equivalent is wp_get_typography_font_size_value().
+ *
+ * @param {Preset}                     preset
+ * @param {Object}                     settings
+ * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.
+ * @param {Object?}                    settings.typography.layout Layout options.
+ *
+ * @return {string|*} A font-size value or the value of preset.size.
+ */
+export function getTypographyFontSizeValue( preset, settings ) {
+	const { size: defaultSize } = preset;
+
+	/*
+	 * Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
+	 * Also return early when a preset font size explicitly disables fluid typography with `false`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
+		return defaultSize;
+	}
+
+	/*
+	 * Return early when fluid typography is disabled in the settings, and there
+	 * are no local settings to enable it for the individual preset.
+	 *
+	 * If this condition isn't met, either the settings or individual preset settings
+	 * have enabled fluid typography.
+	 */
+	if (
+		! isFluidTypographyEnabled( settings?.typography ) &&
+		! isFluidTypographyEnabled( preset )
+	) {
+		return defaultSize;
+	}
+
+	let fluidTypographySettings =
+		getFluidTypographyOptionsFromSettings( settings );
+	fluidTypographySettings =
+		typeof fluidTypographySettings?.fluid === 'object'
+			? fluidTypographySettings?.fluid
+			: {};
+
+	const fluidFontSizeValue = getComputedFluidTypographyValue( {
+		minimumFontSize: preset?.fluid?.min,
+		maximumFontSize: preset?.fluid?.max,
+		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+		maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
+		minimumViewportWidth: fluidTypographySettings?.minViewportWidth,
+	} );
+
+	if ( !! fluidFontSizeValue ) {
+		return fluidFontSizeValue;
+	}
+
+	return defaultSize;
+}
+
+function isFluidTypographyEnabled( typographySettings ) {
+	const fluidSettings = typographySettings?.fluid;
+	return (
+		true === fluidSettings ||
+		( fluidSettings &&
+			typeof fluidSettings === 'object' &&
+			Object.keys( fluidSettings ).length > 0 )
+	);
+}
+
+/**
+ * Returns fluid typography settings from theme.json setting object.
+ *
+ * @param {Object} settings            Theme.json settings
+ * @param {Object} settings.typography Theme.json typography settings
+ * @param {Object} settings.layout     Theme.json layout settings
+ * @return {TypographySettings} Fluid typography settings
+ */
+export function getFluidTypographyOptionsFromSettings( settings ) {
+	const typographySettings = settings?.typography;
+	const layoutSettings = settings?.layout;
+	const defaultMaxViewportWidth = getTypographyValueAndUnit(
+		layoutSettings?.wideSize
+	)
+		? layoutSettings?.wideSize
+		: null;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		defaultMaxViewportWidth
+		? {
+				fluid: {
+					maxViewportWidth: defaultMaxViewportWidth,
+					...typographySettings.fluid,
+				},
+		  }
+		: {
+				fluid: typographySettings?.fluid,
+		  };
+}
+
+/**
+ * Returns an object of merged font families and the font faces from the selected font family
+ * based on the theme.json settings object and the currently selected font family.
+ *
+ * @param {Object} settings           Theme.json settings.
+ * @param {string} selectedFontFamily Decoded font family string.
+ * @return {Object} Merged font families and font faces from the selected font family.
+ */
+export function getMergedFontFamiliesAndFontFamilyFaces(
+	settings,
+	selectedFontFamily
+) {
+	const fontFamiliesFromSettings = settings?.typography?.fontFamilies;
+
+	const fontFamilies = [ 'default', 'theme', 'custom' ].flatMap(
+		( key ) => fontFamiliesFromSettings?.[ key ] ?? []
+	);
+
+	const fontFamilyFaces =
+		fontFamilies.find(
+			( family ) => family.fontFamily === selectedFontFamily
+		)?.fontFace ?? [];
+
+	return { fontFamilies, fontFamilyFaces };
+}
+
+/**
+ * Returns the nearest font weight value from the available font weight list based on the new font weight.
+ * The nearest font weight is the one with the smallest difference from the new font weight.
+ *
+ * @param {Array}  availableFontWeights Array of available font weights.
+ * @param {string} newFontWeightValue   New font weight value.
+ * @return {string} Nearest font weight.
+ */
+export function findNearestFontWeight(
+	availableFontWeights,
+	newFontWeightValue
+) {
+	newFontWeightValue =
+		'number' === typeof newFontWeightValue
+			? newFontWeightValue.toString()
+			: newFontWeightValue;
+	if ( ! newFontWeightValue || typeof newFontWeightValue !== 'string' ) {
+		return '';
+	}
+
+	if ( ! availableFontWeights || availableFontWeights.length === 0 ) {
+		return newFontWeightValue;
+	}
+
+	const nearestFontWeight = availableFontWeights?.reduce(
+		( nearest, { value: fw } ) => {
+			const currentDiff = Math.abs(
+				parseInt( fw ) - parseInt( newFontWeightValue )
+			);
+			const nearestDiff = Math.abs(
+				parseInt( nearest ) - parseInt( newFontWeightValue )
+			);
+			return currentDiff < nearestDiff ? fw : nearest;
+		},
+		availableFontWeights[ 0 ]?.value
+	);
+
+	return nearestFontWeight;
+}
+
+/**
+ * Returns the nearest font style based on the new font style.
+ * Defaults to an empty string if the new font style is not valid or available.
+ *
+ * @param {Array}  availableFontStyles Array of available font weights.
+ * @param {string} newFontStyleValue   New font style value.
+ * @return {string} Nearest font style or an empty string.
+ */
+export function findNearestFontStyle( availableFontStyles, newFontStyleValue ) {
+	if ( typeof newFontStyleValue !== 'string' || ! newFontStyleValue ) {
+		return '';
+	}
+
+	const validStyles = [ 'normal', 'italic', 'oblique' ];
+	if ( ! validStyles.includes( newFontStyleValue ) ) {
+		return '';
+	}
+
+	if (
+		! availableFontStyles ||
+		availableFontStyles.length === 0 ||
+		availableFontStyles.find(
+			( style ) => style.value === newFontStyleValue
+		)
+	) {
+		return newFontStyleValue;
+	}
+
+	if (
+		newFontStyleValue === 'oblique' &&
+		! availableFontStyles.find( ( style ) => style.value === 'oblique' )
+	) {
+		return 'italic';
+	}
+
+	return '';
+}
+
+/**
+ * Returns the nearest font style and weight based on the available font family faces and the new font style and weight.
+ *
+ * @param {Array}  fontFamilyFaces Array of available font family faces.
+ * @param {string} fontStyle       New font style. Defaults to previous value.
+ * @param {string} fontWeight      New font weight. Defaults to previous value.
+ * @return {Object} Nearest font style and font weight.
+ */
+export function findNearestStyleAndWeight(
+	fontFamilyFaces,
+	fontStyle,
+	fontWeight
+) {
+	let nearestFontStyle = fontStyle;
+	let nearestFontWeight = fontWeight;
+
+	const { fontStyles, fontWeights, combinedStyleAndWeightOptions } =
+		getFontStylesAndWeights( fontFamilyFaces );
+
+	// Check if the new font style and weight are available in the font family faces.
+	const hasFontStyle = fontStyles?.some(
+		( { value: fs } ) => fs === fontStyle
+	);
+	const hasFontWeight = fontWeights?.some(
+		( { value: fw } ) => fw?.toString() === fontWeight?.toString()
+	);
+
+	if ( ! hasFontStyle ) {
+		/*
+		 * Default to italic if oblique is not available.
+		 * Or find the nearest font style based on the nearest font weight.
+		 */
+		nearestFontStyle = fontStyle
+			? findNearestFontStyle( fontStyles, fontStyle )
+			: combinedStyleAndWeightOptions?.find(
+					( option ) =>
+						option.style.fontWeight ===
+						findNearestFontWeight( fontWeights, fontWeight )
+			  )?.style?.fontStyle;
+	}
+
+	if ( ! hasFontWeight ) {
+		/*
+		 * Find the nearest font weight based on available weights.
+		 * Or find the nearest font weight based on the nearest font style.
+		 */
+		nearestFontWeight = fontWeight
+			? findNearestFontWeight( fontWeights, fontWeight )
+			: combinedStyleAndWeightOptions?.find(
+					( option ) =>
+						option.style.fontStyle ===
+						( nearestFontStyle || fontStyle )
+			  )?.style?.fontWeight;
+	}
+
+	return { nearestFontStyle, nearestFontWeight };
+}
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js
new file mode 100644
index 00000000000000..f4aedc378e1a73
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js
@@ -0,0 +1,592 @@
+/**
+ * External dependencies
+ */
+import { camelCase } from 'change-case';
+import { Dimensions } from 'react-native';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createContext, useContext } from '@wordpress/element';
+import { getPxFromCssUnit } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import { useSettings } from '../use-settings';
+import { SETTINGS_DEFAULTS } from '../../store/defaults';
+
+const BLOCK_STYLE_ATTRIBUTES = [
+	'textColor',
+	'backgroundColor',
+	'style',
+	'color',
+	'fontSize',
+];
+
+export const GlobalStylesContext = createContext( { style: {} } );
+GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
+
+// Mapping style properties name to native.
+const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
+	textColor: 'color',
+	text: 'color',
+	background: 'backgroundColor',
+	link: 'linkColor',
+	placeholder: 'placeholderColor',
+};
+
+const PADDING = 12; // $solid-border-space
+const UNKNOWN_VALUE = 'undefined';
+const DEFAULT_FONT_SIZE = 16;
+
+export function getBlockPaddings(
+	mergedStyle,
+	wrapperPropsStyle,
+	blockStyleAttributes,
+	blockColors
+) {
+	const blockPaddings = {};
+
+	if (
+		! mergedStyle.padding &&
+		( wrapperPropsStyle?.backgroundColor ||
+			blockStyleAttributes?.backgroundColor ||
+			blockColors?.backgroundColor )
+	) {
+		blockPaddings.padding = PADDING;
+		return blockPaddings;
+	}
+
+	// Prevent adding extra paddings to inner blocks without background colors.
+	if (
+		mergedStyle?.padding &&
+		! wrapperPropsStyle?.backgroundColor &&
+		! blockStyleAttributes?.backgroundColor &&
+		! blockColors?.backgroundColor
+	) {
+		blockPaddings.padding = undefined;
+	}
+
+	return blockPaddings;
+}
+
+export function getBlockColors(
+	blockStyleAttributes,
+	defaultColors,
+	blockName,
+	baseGlobalStyles
+) {
+	const blockStyles = {};
+	const customBlockStyles = blockStyleAttributes?.style?.color || {};
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+
+	// Global styles colors.
+	if ( blockGlobalStyles?.color ) {
+		Object.entries( blockGlobalStyles.color ).forEach(
+			( [ key, value ] ) => {
+				const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ key ];
+
+				if ( styleKey && value !== UNKNOWN_VALUE ) {
+					const color = customBlockStyles[ key ] ?? value;
+					blockStyles[ styleKey ] = color;
+				}
+			}
+		);
+	} else if ( baseGlobalStyles?.styles?.color?.text ) {
+		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.text ] =
+			baseGlobalStyles?.styles?.color?.text;
+	}
+
+	// Global styles elements.
+	if ( blockGlobalStyles?.elements ) {
+		const linkColor = blockGlobalStyles.elements?.link?.color?.text;
+		const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
+
+		if ( styleKey && linkColor && linkColor !== UNKNOWN_VALUE ) {
+			blockStyles[ styleKey ] = linkColor;
+		}
+	}
+
+	// Custom colors.
+	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
+		const isCustomColor = value?.startsWith?.( '#' );
+		let styleKey = key;
+
+		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
+			styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ];
+		}
+
+		if ( ! isCustomColor ) {
+			const mappedColor = Object.values( defaultColors ?? {} ).find(
+				( { slug } ) => slug === value
+			);
+
+			if ( mappedColor ) {
+				blockStyles[ styleKey ] = mappedColor.color;
+			}
+		} else {
+			blockStyles[ styleKey ] = value;
+		}
+	} );
+
+	// Color placeholder.
+	if ( blockStyles?.color ) {
+		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] =
+			blockStyles.color;
+	}
+
+	return blockStyles;
+}
+
+function getBlockTypography(
+	blockStyleAttributes,
+	fontSizes,
+	blockName,
+	baseGlobalStyles
+) {
+	const typographyStyles = {};
+	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+	const parsedFontSizes = Object.values( fontSizes ?? {} );
+
+	// Global styles.
+	if ( blockGlobalStyles?.typography ) {
+		const fontSize = blockGlobalStyles?.typography?.fontSize;
+		const lineHeight = blockGlobalStyles?.typography?.lineHeight;
+
+		if ( fontSize ) {
+			if ( parseInt( fontSize, 10 ) ) {
+				typographyStyles.fontSize = fontSize;
+			} else {
+				const mappedFontSize = parsedFontSizes.find(
+					( { slug } ) => slug === fontSize
+				);
+
+				if ( mappedFontSize ) {
+					typographyStyles.fontSize = mappedFontSize?.size;
+				}
+			}
+		}
+
+		if ( lineHeight ) {
+			typographyStyles.lineHeight = lineHeight;
+		}
+	}
+
+	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
+		const mappedFontSize = parsedFontSizes.find(
+			( { slug } ) => slug === blockStyleAttributes?.fontSize
+		);
+
+		if ( mappedFontSize ) {
+			typographyStyles.fontSize = mappedFontSize?.size;
+		}
+	}
+
+	// Custom styles.
+	if ( customBlockStyles?.fontSize ) {
+		typographyStyles.fontSize = customBlockStyles?.fontSize;
+	}
+
+	if ( customBlockStyles?.lineHeight ) {
+		typographyStyles.lineHeight = customBlockStyles?.lineHeight;
+	}
+
+	return typographyStyles;
+}
+
+/**
+ * Return a value from a certain path of the object.
+ * Path is specified as an array of properties, like: [ 'parent', 'child' ].
+ *
+ * @param {Object} object Input object.
+ * @param {Array}  path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
+export function parseStylesVariables( styles, mappedValues, customValues ) {
+	let stylesBase = styles;
+	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
+
+	if ( ! stylesBase ) {
+		return styles;
+	}
+
+	variables.forEach( ( variable ) => {
+		// Examples
+		// var(--wp--preset--color--gray)
+		// var(--wp--custom--body--typography--font-family)
+		// var:preset|color|custom-color-2
+		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
+		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
+		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
+
+		if ( variable === 'preset' ) {
+			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
+				const path = $2.split( '--' );
+				const mappedPresetValue = mappedValues[ path[ 0 ] ];
+				if ( mappedPresetValue && mappedPresetValue.slug ) {
+					const matchedValue = Object.values(
+						mappedPresetValue.values ?? {}
+					).find( ( { slug } ) => slug === path[ 1 ] );
+					return matchedValue?.[ mappedPresetValue.slug ];
+				}
+				return UNKNOWN_VALUE;
+			} );
+		}
+		if ( variable === 'custom' ) {
+			const customValuesData = customValues ?? JSON.parse( stylesBase );
+			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
+				const path = $2.split( '--' );
+
+				// Supports cases for variables like var(--wp--custom--color--background)
+				if ( path[ 0 ] === 'color' ) {
+					const colorKey = path[ path.length - 1 ];
+					if ( mappedValues?.color ) {
+						const matchedValue = mappedValues.color?.values?.find(
+							( { slug } ) => slug === colorKey
+						);
+						if ( matchedValue ) {
+							return `${ matchedValue?.color }`;
+						}
+					}
+				}
+
+				if (
+					path.reduce(
+						( prev, curr ) => prev && prev[ curr ],
+						customValuesData
+					)
+				) {
+					return getValueFromObjectPath( customValuesData, path );
+				}
+
+				// Check for camelcase properties.
+				return getValueFromObjectPath( customValuesData, [
+					...path.slice( 0, path.length - 1 ),
+					camelCase( path[ path.length - 1 ] ),
+				] );
+			} );
+		}
+
+		if ( variable === 'var' ) {
+			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
+				if ( mappedValues?.color ) {
+					const matchedValue = mappedValues.color?.values?.find(
+						( { slug } ) => slug === $2
+					);
+					return `"${ matchedValue?.color }"`;
+				}
+				return UNKNOWN_VALUE;
+			} );
+		}
+
+		if ( variable === 'fontSize' ) {
+			const { width, height } = Dimensions.get( 'window' );
+
+			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
+				const parsedFontSize =
+					getPxFromCssUnit( $2, {
+						width,
+						height,
+						fontSize: DEFAULT_FONT_SIZE,
+					} ) || `${ DEFAULT_FONT_SIZE }px`;
+
+				return `"fontSize":"${ parsedFontSize }"`;
+			} );
+		}
+	} );
+
+	return JSON.parse( stylesBase );
+}
+
+function getMappedValues( features, palette ) {
+	const typography = features?.typography;
+	const colors = [
+		...( palette?.theme || [] ),
+		...( palette?.custom || [] ),
+		...( palette?.default || [] ),
+	];
+
+	const fontSizes = {
+		...typography?.fontSizes?.theme,
+		...typography?.fontSizes?.custom,
+	};
+	const mappedValues = {
+		color: {
+			values: colors,
+			slug: 'color',
+		},
+		'font-size': {
+			values: fontSizes,
+			slug: 'size',
+		},
+	};
+	return mappedValues;
+}
+
+/**
+ * Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
+ *
+ * @param {Object} fontSizes found in global styles.
+ * @return {Object} normalized sizes.
+ */
+function normalizeFontSizes( fontSizes ) {
+	if ( ! fontSizes ) {
+		return fontSizes;
+	}
+
+	const dimensions = Dimensions.get( 'window' );
+	const normalizedFontSizes = {};
+	const keysToProcess = [];
+
+	// Check if 'theme' or 'custom' keys exist and add them to keysToProcess array
+	if ( fontSizes?.theme ) {
+		keysToProcess.push( 'theme' );
+	}
+	if ( fontSizes?.custom ) {
+		keysToProcess.push( 'custom' );
+	}
+
+	// If neither 'theme' nor 'custom' exist, add 'default' if it exists
+	if ( keysToProcess.length === 0 && fontSizes?.default ) {
+		keysToProcess.push( 'default' );
+	}
+
+	keysToProcess.forEach( ( key ) => {
+		normalizedFontSizes[ key ] = fontSizes[ key ].map(
+			( fontSizeObject ) => {
+				fontSizeObject.sizePx = getPxFromCssUnit( fontSizeObject.size, {
+					width: dimensions.width,
+					height: dimensions.height,
+					fontSize: DEFAULT_FONT_SIZE,
+				} );
+				return fontSizeObject;
+			}
+		);
+	} );
+
+	return normalizedFontSizes;
+}
+
+export function useMobileGlobalStylesColors( type = 'colors' ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableThemeColors = colorGradientSettings?.[ type ]?.reduce(
+		( colors, origin ) => colors.concat( origin?.[ type ] ),
+		[]
+	);
+	// Default editor colors/gradients if it's not a block-based theme.
+	const defaultPaletteSetting =
+		type === 'colors' ? 'color.palette' : 'color.gradients';
+	const [ defaultPaletteValue ] = useSettings( defaultPaletteSetting );
+	// In edge cases, the default palette might be undefined. To avoid
+	// exceptions across the editor in that case, we explicitly return
+	// the default editor colors.
+	const defaultPalette = defaultPaletteValue ?? SETTINGS_DEFAULTS.colors;
+
+	return availableThemeColors.length >= 1
+		? availableThemeColors
+		: defaultPalette;
+}
+
+export function getColorsAndGradients(
+	defaultEditorColors = [],
+	defaultEditorGradients = [],
+	rawFeatures
+) {
+	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
+
+	return {
+		__experimentalGlobalStylesBaseStyles: null,
+		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
+			color: {
+				...( ! features?.color
+					? {
+							text: true,
+							background: true,
+							palette: {
+								default: defaultEditorColors,
+							},
+							gradients: {
+								default: defaultEditorGradients,
+							},
+					  }
+					: features?.color ),
+				defaultPalette: defaultEditorColors?.length > 0,
+				defaultGradients: defaultEditorGradients?.length > 0,
+			},
+		},
+	};
+}
+
+export function getGlobalStyles( rawStyles, rawFeatures ) {
+	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
+	const mappedValues = getMappedValues( features, features?.color?.palette );
+	const colors = parseStylesVariables(
+		JSON.stringify( features?.color ),
+		mappedValues
+	);
+	const gradients = parseStylesVariables(
+		JSON.stringify( features?.color?.gradients ),
+		mappedValues
+	);
+	const customValues = parseStylesVariables(
+		JSON.stringify( features?.custom ),
+		mappedValues
+	);
+	const globalStyles = parseStylesVariables(
+		rawStyles,
+		mappedValues,
+		customValues
+	);
+
+	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
+
+	return {
+		__experimentalFeatures: {
+			// Set an empty object to avoid errors from shared web components relying
+			// upon block settings. E.g., the Gallery block.
+			blocks: {},
+			color: {
+				palette: colors?.palette,
+				gradients,
+				text: features?.color?.text ?? true,
+				background: features?.color?.background ?? true,
+				defaultPalette: features?.color?.defaultPalette ?? true,
+				defaultGradients: features?.color?.defaultGradients ?? true,
+			},
+			typography: {
+				fontSizes,
+				customLineHeight: features?.custom?.[ 'line-height' ],
+			},
+			spacing: features?.spacing,
+		},
+		__experimentalGlobalStylesBaseStyles: globalStyles,
+	};
+}
+
+export const getMergedGlobalStyles = (
+	baseGlobalStyles,
+	globalStyle,
+	wrapperPropsStyle,
+	blockAttributes,
+	defaultColors,
+	blockName,
+	fontSizes
+) => {
+	// Current support for general styles and blocks.
+	const baseGlobalColors = {
+		baseColors: {
+			color: baseGlobalStyles?.color,
+			typography: baseGlobalStyles?.typography,
+			elements: {
+				link: baseGlobalStyles?.elements?.link,
+			},
+			blocks: {
+				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
+			},
+		},
+	};
+
+	const blockStyleAttributes = Object.fromEntries(
+		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
+	);
+
+	// This prevents certain wrapper styles from being applied to blocks that
+	// don't support them yet.
+	const wrapperPropsStyleFiltered = Object.fromEntries(
+		Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
+	);
+
+	const mergedStyle = {
+		...baseGlobalColors,
+		...globalStyle,
+		...wrapperPropsStyleFiltered,
+	};
+	const blockColors = getBlockColors(
+		blockStyleAttributes,
+		defaultColors,
+		blockName,
+		baseGlobalStyles
+	);
+	const blockPaddings = getBlockPaddings(
+		mergedStyle,
+		wrapperPropsStyle,
+		blockStyleAttributes,
+		blockColors
+	);
+	const blockTypography = getBlockTypography(
+		blockStyleAttributes,
+		fontSizes,
+		blockName,
+		baseGlobalStyles
+	);
+
+	return {
+		...mergedStyle,
+		...blockPaddings,
+		...blockColors,
+		...blockTypography,
+	};
+};
+
+export const useGlobalStyles = () => {
+	const globalStyles = useContext( GlobalStylesContext );
+
+	return globalStyles;
+};
+
+/**
+ * Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
+ *
+ * The function first attempts to retrieve the editor's background color from global styles.
+ * If the detected background color is light, light styles are applied, and dark styles otherwise.
+ * If no custom background color is defined, styles are applied using the device's dark/light setting.
+ *
+ * @param {Object} baseStyle - An object representing the base (light theme) styles for the editor.
+ * @param {Object} darkStyle - An object representing the additional styles to apply when the editor is in dark mode.
+ *
+ * @return {Object} - The combined style object that should be applied to the editor.
+ */
+export const useEditorColorScheme = ( baseStyle, darkStyle ) => {
+	const globalStyles = useGlobalStyles();
+
+	const deviceColorScheme = usePreferredColorSchemeStyle(
+		baseStyle,
+		darkStyle
+	);
+
+	const editorColors = globalStyles?.baseColors?.color;
+	const editorBackgroundColor = editorColors?.background;
+
+	const isBackgroundColorDefined =
+		typeof editorBackgroundColor !== 'undefined' &&
+		editorBackgroundColor !== 'undefined';
+
+	if ( isBackgroundColorDefined ) {
+		const isEditorBackgroundDark = colord( editorBackgroundColor ).isDark();
+		return isEditorBackgroundDark
+			? { ...baseStyle, ...darkStyle }
+			: baseStyle;
+	}
+
+	return deviceColorScheme;
+};
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
new file mode 100644
index 00000000000000..7bdc95d222142d
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -0,0 +1,1487 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
+	getBlockSupport,
+	getBlockTypes,
+	store as blocksStore,
+} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	PRESET_METADATA,
+	ROOT_BLOCK_SELECTOR,
+	ROOT_CSS_PROPERTIES_SELECTOR,
+	scopeSelector,
+	scopeFeatureSelectors,
+	appendToSelector,
+	getBlockStyleVariationSelector,
+	getResolvedValue,
+} from './utils';
+import { getBlockCSSSelector } from './get-block-css-selector';
+import { getTypographyFontSizeValue } from './typography-utils';
+import { GlobalStylesContext } from './context';
+import { useGlobalSetting } from './hooks';
+import { getDuotoneFilter } from '../duotone/utils';
+import { getGapCSSValue } from '../../hooks/gap';
+import { setBackgroundStyleDefaults } from '../../hooks/background';
+import { store as blockEditorStore } from '../../store';
+import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
+import { getValueFromObjectPath, setImmutably } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
+
+// Elements that rely on class names in their selectors.
+const ELEMENT_CLASS_NAMES = {
+	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 = {
+	border: 'border',
+	color: 'color',
+	spacing: 'spacing',
+	typography: 'typography',
+};
+const { kebabCase } = unlock( componentsPrivateApis );
+
+/**
+ * Transform given preset tree into a set of style declarations.
+ *
+ * @param {Object} blockPresets
+ * @param {Object} mergedSettings Merged theme.json settings.
+ *
+ * @return {Array<Object>} An array of style declarations.
+ */
+function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
+	return PRESET_METADATA.reduce(
+		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
+			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
+				if ( presetByOrigin[ origin ] ) {
+					presetByOrigin[ origin ].forEach( ( value ) => {
+						if ( valueKey && ! valueFunc ) {
+							declarations.push(
+								`--wp--preset--${ cssVarInfix }--${ kebabCase(
+									value.slug
+								) }: ${ value[ valueKey ] }`
+							);
+						} else if (
+							valueFunc &&
+							typeof valueFunc === 'function'
+						) {
+							declarations.push(
+								`--wp--preset--${ cssVarInfix }--${ kebabCase(
+									value.slug
+								) }: ${ valueFunc( value, mergedSettings ) }`
+							);
+						}
+					} );
+				}
+			} );
+
+			return declarations;
+		},
+		[]
+	);
+}
+
+/**
+ * Transform given preset tree into a set of preset class declarations.
+ *
+ * @param {?string} blockSelector
+ * @param {Object}  blockPresets
+ * @return {string} CSS declarations for the preset classes.
+ */
+function getPresetsClasses( blockSelector = '*', blockPresets = {} ) {
+	return PRESET_METADATA.reduce(
+		( declarations, { path, cssVarInfix, classes } ) => {
+			if ( ! classes ) {
+				return declarations;
+			}
+
+			const presetByOrigin = getValueFromObjectPath(
+				blockPresets,
+				path,
+				[]
+			);
+			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
+				if ( presetByOrigin[ origin ] ) {
+					presetByOrigin[ origin ].forEach( ( { slug } ) => {
+						classes.forEach( ( { classSuffix, propertyName } ) => {
+							const classSelectorToUse = `.has-${ kebabCase(
+								slug
+							) }-${ classSuffix }`;
+							const selectorToUse = blockSelector
+								.split( ',' ) // Selector can be "h1, h2, h3"
+								.map(
+									( selector ) =>
+										`${ selector }${ classSelectorToUse }`
+								)
+								.join( ',' );
+							const value = `var(--wp--preset--${ cssVarInfix }--${ kebabCase(
+								slug
+							) })`;
+							declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;
+						} );
+					} );
+				}
+			} );
+			return declarations;
+		},
+		''
+	);
+}
+
+function getPresetsSvgFilters( blockPresets = {} ) {
+	return PRESET_METADATA.filter(
+		// Duotone are the only type of filters for now.
+		( metadata ) => metadata.path.at( -1 ) === 'duotone'
+	).flatMap( ( metadata ) => {
+		const presetByOrigin = getValueFromObjectPath(
+			blockPresets,
+			metadata.path,
+			{}
+		);
+		return [ 'default', 'theme' ]
+			.filter( ( origin ) => presetByOrigin[ origin ] )
+			.flatMap( ( origin ) =>
+				presetByOrigin[ origin ].map( ( preset ) =>
+					getDuotoneFilter(
+						`wp-duotone-${ preset.slug }`,
+						preset.colors
+					)
+				)
+			)
+			.join( '' );
+	} );
+}
+
+function flattenTree( input = {}, prefix, token ) {
+	let result = [];
+	Object.keys( input ).forEach( ( key ) => {
+		const newKey = prefix + kebabCase( key.replace( '/', '-' ) );
+		const newLeaf = input[ key ];
+
+		if ( newLeaf instanceof Object ) {
+			const newPrefix = newKey + token;
+			result = [ ...result, ...flattenTree( newLeaf, newPrefix, token ) ];
+		} else {
+			result.push( `${ newKey }: ${ newLeaf }` );
+		}
+	} );
+	return result;
+}
+
+/**
+ * Gets variation selector string from feature selector.
+ *
+ * @param {string} featureSelector        The feature selector.
+ *
+ * @param {string} styleVariationSelector The style variation selector.
+ * @return {string} Combined selector string.
+ */
+function concatFeatureVariationSelectorString(
+	featureSelector,
+	styleVariationSelector
+) {
+	const featureSelectors = featureSelector.split( ',' );
+	const combinedSelectors = [];
+	featureSelectors.forEach( ( selector ) => {
+		combinedSelectors.push(
+			`${ styleVariationSelector.trim() }${ selector.trim() }`
+		);
+	} );
+	return combinedSelectors.join( ', ' );
+}
+
+/**
+ * Generate style declarations for a block's custom feature and subfeature
+ * selectors.
+ *
+ * NOTE: The passed `styles` object will be mutated by this function.
+ *
+ * @param {Object} selectors Custom selectors object for a block.
+ * @param {Object} styles    A block's styles object.
+ *
+ * @return {Object} Style declarations.
+ */
+const getFeatureDeclarations = ( selectors, styles ) => {
+	const declarations = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		// We're only processing features/subfeatures that have styles.
+		if ( feature === 'root' || ! styles?.[ feature ] ) {
+			return;
+		}
+
+		const isShorthand = typeof selector === 'string';
+
+		// If we have a selector object instead of shorthand process it.
+		if ( ! isShorthand ) {
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					// Don't process root feature selector yet or any
+					// subfeature that doesn't have a style.
+					if (
+						subfeature === 'root' ||
+						! styles?.[ feature ][ subfeature ]
+					) {
+						return;
+					}
+
+					// Create a temporary styles object and build
+					// declarations for subfeature.
+					const subfeatureStyles = {
+						[ feature ]: {
+							[ subfeature ]: styles[ feature ][ subfeature ],
+						},
+					};
+					const newDeclarations =
+						getStylesDeclarations( subfeatureStyles );
+
+					// Merge new declarations in with any others that
+					// share the same selector.
+					declarations[ subfeatureSelector ] = [
+						...( declarations[ subfeatureSelector ] || [] ),
+						...newDeclarations,
+					];
+
+					// Remove the subfeature's style now it will be
+					// included under its own selector not the block's.
+					delete styles[ feature ][ subfeature ];
+				}
+			);
+		}
+
+		// Now subfeatures have been processed and removed, we can
+		// process root, or shorthand, feature selectors.
+		if ( isShorthand || selector.root ) {
+			const featureSelector = isShorthand ? selector : selector.root;
+
+			// Create temporary style object and build declarations for feature.
+			const featureStyles = { [ feature ]: styles[ feature ] };
+			const newDeclarations = getStylesDeclarations( featureStyles );
+
+			// Merge new declarations with any others that share the selector.
+			declarations[ featureSelector ] = [
+				...( declarations[ featureSelector ] || [] ),
+				...newDeclarations,
+			];
+
+			// Remove the feature from the block's styles now as it will be
+			// included under its own selector not the block's.
+			delete styles[ feature ];
+		}
+	} );
+
+	return declarations;
+};
+
+/**
+ * Transform given style tree into a set of style declarations.
+ *
+ * @param {Object}  blockStyles         Block styles.
+ *
+ * @param {string}  selector            The selector these declarations should attach to.
+ *
+ * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
+ *
+ * @param {Object}  tree                A theme.json tree containing layout definitions.
+ *
+ * @param {boolean} disableRootPadding  Whether to force disable the root padding styles.
+ * @return {Array} An array of style declarations.
+ */
+export function getStylesDeclarations(
+	blockStyles = {},
+	selector = '',
+	useRootPaddingAlign,
+	tree = {},
+	disableRootPadding = false
+) {
+	const isRoot = ROOT_BLOCK_SELECTOR === selector;
+	const output = Object.entries( STYLE_PROPERTY ).reduce(
+		(
+			declarations,
+			[ key, { value, properties, useEngine, rootOnly } ]
+		) => {
+			if ( rootOnly && ! isRoot ) {
+				return declarations;
+			}
+			const pathToValue = value;
+			if ( pathToValue[ 0 ] === 'elements' || useEngine ) {
+				return declarations;
+			}
+
+			const styleValue = getValueFromObjectPath(
+				blockStyles,
+				pathToValue
+			);
+
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if (
+				key === '--wp--style--root--padding' &&
+				( typeof styleValue === 'string' || ! useRootPaddingAlign )
+			) {
+				return declarations;
+			}
+
+			if ( properties && typeof styleValue !== 'string' ) {
+				Object.entries( properties ).forEach( ( entry ) => {
+					const [ name, prop ] = entry;
+
+					if (
+						! getValueFromObjectPath( styleValue, [ prop ], false )
+					) {
+						// Do not create a declaration
+						// for sub-properties that don't have any value.
+						return;
+					}
+
+					const cssProperty = name.startsWith( '--' )
+						? name
+						: kebabCase( name );
+					declarations.push(
+						`${ cssProperty }: ${ getCSSValueFromRawStyle(
+							getValueFromObjectPath( styleValue, [ prop ] )
+						) }`
+					);
+				} );
+			} else if (
+				getValueFromObjectPath( blockStyles, pathToValue, false )
+			) {
+				const cssProperty = key.startsWith( '--' )
+					? key
+					: kebabCase( key );
+				declarations.push(
+					`${ cssProperty }: ${ getCSSValueFromRawStyle(
+						getValueFromObjectPath( blockStyles, pathToValue )
+					) }`
+				);
+			}
+
+			return declarations;
+		},
+		[]
+	);
+
+	/*
+	 * Preprocess background image values.
+	 *
+	 * Note: As we absorb more and more styles into the engine, we could simplify this function.
+	 * A refactor is for the style engine to handle ref resolution (and possibly defaults)
+	 * via a public util used internally and externally. Theme.json tree and defaults could be passed
+	 * as options.
+	 */
+	if ( !! blockStyles.background ) {
+		/*
+		 * Resolve dynamic values before they are compiled by the style engine,
+		 * which doesn't (yet) resolve dynamic values.
+		 */
+		if ( blockStyles.background?.backgroundImage ) {
+			blockStyles.background.backgroundImage = getResolvedValue(
+				blockStyles.background.backgroundImage,
+				tree
+			);
+		}
+
+		/*
+		 * Set default values for block background styles.
+		 * Top-level styles are an exception as they are applied to the body.
+		 */
+		if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) {
+			blockStyles = {
+				...blockStyles,
+				background: {
+					...blockStyles.background,
+					...setBackgroundStyleDefaults( blockStyles.background ),
+				},
+			};
+		}
+	}
+
+	const extraRules = getCSSRules( blockStyles );
+	extraRules.forEach( ( rule ) => {
+		// Don't output padding properties if padding variables are set or if we're not editing a full template.
+		if (
+			isRoot &&
+			( useRootPaddingAlign || disableRootPadding ) &&
+			rule.key.startsWith( 'padding' )
+		) {
+			return;
+		}
+		const cssProperty = rule.key.startsWith( '--' )
+			? rule.key
+			: kebabCase( rule.key );
+
+		let ruleValue = getResolvedValue( rule.value, tree, null );
+
+		// Calculate fluid typography rules where available.
+		if ( cssProperty === 'font-size' ) {
+			/*
+			 * getTypographyFontSizeValue() 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.
+			 */
+			ruleValue = getTypographyFontSizeValue(
+				{ size: ruleValue },
+				tree?.settings
+			);
+		}
+
+		// For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
+		// This ensures that a fixed height does not override the aspect ratio.
+		if ( cssProperty === 'aspect-ratio' ) {
+			output.push( 'min-height: unset' );
+		}
+
+		output.push( `${ cssProperty }: ${ ruleValue }` );
+	} );
+
+	return output;
+}
+
+/**
+ * Get generated CSS for layout styles by looking up layout definitions provided
+ * in theme.json, and outputting common layout styles, and specific blockGap values.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.layoutDefinitions     Layout definitions, keyed by layout type.
+ * @param {Object}  props.style                 A style object containing spacing values.
+ * @param {string}  props.selector              Selector used to group together layout styling rules.
+ * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
+ * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
+ * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
+ * @return {string} Generated CSS rules for the layout styles.
+ */
+export function getLayoutStyles( {
+	layoutDefinitions = LAYOUT_DEFINITIONS,
+	style,
+	selector,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	fallbackGapValue,
+} ) {
+	let ruleset = '';
+	let gapValue = hasBlockGapSupport
+		? getGapCSSValue( style?.spacing?.blockGap )
+		: '';
+
+	// Ensure a fallback gap value for the root layout definitions,
+	// and use a fallback value if one is provided for the current block.
+	if ( hasFallbackGapSupport ) {
+		if ( selector === ROOT_BLOCK_SELECTOR ) {
+			gapValue = ! gapValue ? '0.5em' : gapValue;
+		} else if ( ! hasBlockGapSupport && fallbackGapValue ) {
+			gapValue = fallbackGapValue;
+		}
+	}
+
+	if ( gapValue && layoutDefinitions ) {
+		Object.values( layoutDefinitions ).forEach(
+			( { className, name, spacingStyles } ) => {
+				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
+				if (
+					! hasBlockGapSupport &&
+					'flex' !== name &&
+					'grid' !== name
+				) {
+					return;
+				}
+
+				if ( spacingStyles?.length ) {
+					spacingStyles.forEach( ( spacingStyle ) => {
+						const declarations = [];
+
+						if ( spacingStyle.rules ) {
+							Object.entries( spacingStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${
+											cssValue ? cssValue : gapValue
+										}`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							let combinedSelector = '';
+
+							if ( ! hasBlockGapSupport ) {
+								// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `:where(.${ className }${
+												spacingStyle?.selector || ''
+										  })`
+										: `:where(${ selector }.${ className }${
+												spacingStyle?.selector || ''
+										  })`;
+							} else {
+								combinedSelector =
+									selector === ROOT_BLOCK_SELECTOR
+										? `:root :where(.${ className })${
+												spacingStyle?.selector || ''
+										  }`
+										: `:root :where(${ selector }-${ className })${
+												spacingStyle?.selector || ''
+										  }`;
+							}
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
+		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
+			ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } { --wp--style--block-gap: ${ gapValue }; }`;
+		}
+	}
+
+	// Output base styles
+	if ( selector === ROOT_BLOCK_SELECTOR && layoutDefinitions ) {
+		const validDisplayModes = [ 'block', 'flex', 'grid' ];
+		Object.values( layoutDefinitions ).forEach(
+			( { className, displayMode, baseStyles } ) => {
+				if (
+					displayMode &&
+					validDisplayModes.includes( displayMode )
+				) {
+					ruleset += `${ selector } .${ className } { display:${ displayMode }; }`;
+				}
+
+				if ( baseStyles?.length ) {
+					baseStyles.forEach( ( baseStyle ) => {
+						const declarations = [];
+
+						if ( baseStyle.rules ) {
+							Object.entries( baseStyle.rules ).forEach(
+								( [ cssProperty, cssValue ] ) => {
+									declarations.push(
+										`${ cssProperty }: ${ cssValue }`
+									);
+								}
+							);
+						}
+
+						if ( declarations.length ) {
+							const combinedSelector = `.${ className }${
+								baseStyle?.selector || ''
+							}`;
+							ruleset += `${ combinedSelector } { ${ declarations.join(
+								'; '
+							) }; }`;
+						}
+					} );
+				}
+			}
+		);
+	}
+
+	return ruleset;
+}
+
+const STYLE_KEYS = [
+	'border',
+	'color',
+	'dimensions',
+	'spacing',
+	'typography',
+	'filter',
+	'outline',
+	'shadow',
+	'background',
+];
+
+function pickStyleKeys( treeToPickFrom ) {
+	if ( ! treeToPickFrom ) {
+		return {};
+	}
+	const entries = Object.entries( treeToPickFrom );
+	const pickedEntries = entries.filter( ( [ key ] ) =>
+		STYLE_KEYS.includes( key )
+	);
+	// clone the style objects so that `getFeatureDeclarations` can remove consumed keys from it
+	const clonedEntries = pickedEntries.map( ( [ key, style ] ) => [
+		key,
+		JSON.parse( JSON.stringify( style ) ),
+	] );
+	return Object.fromEntries( clonedEntries );
+}
+
+export const getNodesWithStyles = ( tree, blockSelectors ) => {
+	const nodes = [];
+
+	if ( ! tree?.styles ) {
+		return nodes;
+	}
+
+	// Top-level.
+	const styles = pickStyleKeys( tree.styles );
+	if ( styles ) {
+		nodes.push( {
+			styles,
+			selector: ROOT_BLOCK_SELECTOR,
+			// Root selector (body) styles should not be wrapped in `:root where()` to keep
+			// specificity at (0,0,1) and maintain backwards compatibility.
+			skipSelectorWrapper: true,
+		} );
+	}
+
+	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
+		if ( tree.styles?.elements?.[ name ] ) {
+			nodes.push( {
+				styles: tree.styles?.elements?.[ name ],
+				selector,
+				// Top level elements that don't use a class name should not receive the
+				// `:root :where()` wrapper to maintain backwards compatibility.
+				skipSelectorWrapper: ! ELEMENT_CLASS_NAMES[ name ],
+			} );
+		}
+	} );
+
+	// Iterate over blocks: they can have styles & elements.
+	Object.entries( tree.styles?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockStyles = pickStyleKeys( node );
+
+			if ( node?.variations ) {
+				const variations = {};
+				Object.entries( node.variations ).forEach(
+					( [ variationName, variation ] ) => {
+						variations[ variationName ] =
+							pickStyleKeys( variation );
+						if ( variation?.css ) {
+							variations[ variationName ].css = variation.css;
+						}
+						const variationSelector =
+							blockSelectors[ blockName ]
+								?.styleVariationSelectors?.[ variationName ];
+
+						// Process the variation's inner element styles.
+						// This comes before the inner block styles so the
+						// element styles within the block type styles take
+						// precedence over these.
+						Object.entries( variation?.elements ?? {} ).forEach(
+							( [ element, elementStyles ] ) => {
+								if ( elementStyles && ELEMENTS[ element ] ) {
+									nodes.push( {
+										styles: elementStyles,
+										selector: scopeSelector(
+											variationSelector,
+											ELEMENTS[ element ]
+										),
+									} );
+								}
+							}
+						);
+
+						// Process the variations inner block type styles.
+						Object.entries( variation?.blocks ?? {} ).forEach(
+							( [
+								variationBlockName,
+								variationBlockStyles,
+							] ) => {
+								const variationBlockSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										?.selector
+								);
+								const variationDuotoneSelector = scopeSelector(
+									variationSelector,
+									blockSelectors[ variationBlockName ]
+										?.duotoneSelector
+								);
+								const variationFeatureSelectors =
+									scopeFeatureSelectors(
+										variationSelector,
+										blockSelectors[ variationBlockName ]
+											?.featureSelectors
+									);
+
+								const variationBlockStyleNodes =
+									pickStyleKeys( variationBlockStyles );
+
+								if ( variationBlockStyles?.css ) {
+									variationBlockStyleNodes.css =
+										variationBlockStyles.css;
+								}
+
+								nodes.push( {
+									selector: variationBlockSelector,
+									duotoneSelector: variationDuotoneSelector,
+									featureSelectors: variationFeatureSelectors,
+									fallbackGapValue:
+										blockSelectors[ variationBlockName ]
+											?.fallbackGapValue,
+									hasLayoutSupport:
+										blockSelectors[ variationBlockName ]
+											?.hasLayoutSupport,
+									styles: variationBlockStyleNodes,
+								} );
+
+								// Process element styles for the inner blocks
+								// of the variation.
+								Object.entries(
+									variationBlockStyles.elements ?? {}
+								).forEach(
+									( [
+										variationBlockElement,
+										variationBlockElementStyles,
+									] ) => {
+										if (
+											variationBlockElementStyles &&
+											ELEMENTS[ variationBlockElement ]
+										) {
+											nodes.push( {
+												styles: variationBlockElementStyles,
+												selector: scopeSelector(
+													variationBlockSelector,
+													ELEMENTS[
+														variationBlockElement
+													]
+												),
+											} );
+										}
+									}
+								);
+							}
+						);
+					}
+				);
+				blockStyles.variations = variations;
+			}
+
+			if ( blockSelectors?.[ blockName ]?.selector ) {
+				nodes.push( {
+					duotoneSelector:
+						blockSelectors[ blockName ].duotoneSelector,
+					fallbackGapValue:
+						blockSelectors[ blockName ].fallbackGapValue,
+					hasLayoutSupport:
+						blockSelectors[ blockName ].hasLayoutSupport,
+					selector: blockSelectors[ blockName ].selector,
+					styles: blockStyles,
+					featureSelectors:
+						blockSelectors[ blockName ].featureSelectors,
+					styleVariationSelectors:
+						blockSelectors[ blockName ].styleVariationSelectors,
+				} );
+			}
+
+			Object.entries( node?.elements ?? {} ).forEach(
+				( [ elementName, value ] ) => {
+					if (
+						value &&
+						blockSelectors?.[ blockName ] &&
+						ELEMENTS[ elementName ]
+					) {
+						nodes.push( {
+							styles: value,
+							selector: blockSelectors[ blockName ]?.selector
+								.split( ',' )
+								.map( ( sel ) => {
+									const elementSelectors =
+										ELEMENTS[ elementName ].split( ',' );
+									return elementSelectors.map(
+										( elementSelector ) =>
+											sel + ' ' + elementSelector
+									);
+								} )
+								.join( ',' ),
+						} );
+					}
+				}
+			);
+		}
+	);
+
+	return nodes;
+};
+
+export const getNodesWithSettings = ( tree, blockSelectors ) => {
+	const nodes = [];
+
+	if ( ! tree?.settings ) {
+		return nodes;
+	}
+
+	const pickPresets = ( treeToPickFrom ) => {
+		let presets = {};
+		PRESET_METADATA.forEach( ( { path } ) => {
+			const value = getValueFromObjectPath( treeToPickFrom, path, false );
+			if ( value !== false ) {
+				presets = setImmutably( presets, path, value );
+			}
+		} );
+		return presets;
+	};
+
+	// Top-level.
+	const presets = pickPresets( tree.settings );
+	const custom = tree.settings?.custom;
+	if ( Object.keys( presets ).length > 0 || custom ) {
+		nodes.push( {
+			presets,
+			custom,
+			selector: ROOT_CSS_PROPERTIES_SELECTOR,
+		} );
+	}
+
+	// Blocks.
+	Object.entries( tree.settings?.blocks ?? {} ).forEach(
+		( [ blockName, node ] ) => {
+			const blockPresets = pickPresets( node );
+			const blockCustom = node.custom;
+			if ( Object.keys( blockPresets ).length > 0 || blockCustom ) {
+				nodes.push( {
+					presets: blockPresets,
+					custom: blockCustom,
+					selector: blockSelectors[ blockName ]?.selector,
+				} );
+			}
+		}
+	);
+
+	return nodes;
+};
+
+export const toCustomProperties = ( tree, blockSelectors ) => {
+	const settings = getNodesWithSettings( tree, blockSelectors );
+	let ruleset = '';
+	settings.forEach( ( { presets, custom, selector } ) => {
+		const declarations = getPresetsDeclarations( presets, tree?.settings );
+		const customProps = flattenTree( custom, '--wp--custom--', '--' );
+		if ( customProps.length > 0 ) {
+			declarations.push( ...customProps );
+		}
+
+		if ( declarations.length > 0 ) {
+			ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
+		}
+	} );
+
+	return ruleset;
+};
+
+export const toStyles = (
+	tree,
+	blockSelectors,
+	hasBlockGapSupport,
+	hasFallbackGapSupport,
+	disableLayoutStyles = false,
+	disableRootPadding = false,
+	styleOptions = undefined
+) => {
+	// These allow opting out of certain sets of styles.
+	const options = {
+		blockGap: true,
+		blockStyles: true,
+		layoutStyles: true,
+		marginReset: true,
+		presets: true,
+		rootPadding: true,
+		variationStyles: false,
+		...styleOptions,
+	};
+	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
+	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
+	const { contentSize, wideSize } = tree?.settings?.layout || {};
+	const hasBodyStyles =
+		options.marginReset || options.rootPadding || options.layoutStyles;
+
+	let ruleset = '';
+
+	if ( options.presets && ( contentSize || wideSize ) ) {
+		ruleset += `${ ROOT_CSS_PROPERTIES_SELECTOR } {`;
+		ruleset = contentSize
+			? ruleset + ` --wp--style--global--content-size: ${ contentSize };`
+			: ruleset;
+		ruleset = wideSize
+			? ruleset + ` --wp--style--global--wide-size: ${ wideSize };`
+			: ruleset;
+		ruleset += '}';
+	}
+
+	if ( hasBodyStyles ) {
+		/*
+		 * Reset default browser margin on the body element.
+		 * This is set on the body selector **before** generating the ruleset
+		 * from the `theme.json`. This is to ensure that if the `theme.json` declares
+		 * `margin` in its `spacing` declaration for the `body` element then these
+		 * user-generated values take precedence in the CSS cascade.
+		 * @link https://github.com/WordPress/gutenberg/issues/36147.
+		 */
+		ruleset += ':where(body) {margin: 0;';
+
+		// Root padding styles should be output for full templates, patterns and template parts.
+		if ( options.rootPadding && useRootPaddingAlign ) {
+			/*
+			 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
+			 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
+			 */
+			ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
+				.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+				.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
+				.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0;
+				`;
+		}
+
+		ruleset += '}';
+	}
+
+	if ( options.blockStyles ) {
+		nodesWithStyles.forEach(
+			( {
+				selector,
+				duotoneSelector,
+				styles,
+				fallbackGapValue,
+				hasLayoutSupport,
+				featureSelectors,
+				styleVariationSelectors,
+				skipSelectorWrapper,
+			} ) => {
+				// Process styles for block support features with custom feature level
+				// CSS selectors set.
+				if ( featureSelectors ) {
+					const featureDeclarations = getFeatureDeclarations(
+						featureSelectors,
+						styles
+					);
+
+					Object.entries( featureDeclarations ).forEach(
+						( [ cssSelector, declarations ] ) => {
+							if ( declarations.length ) {
+								const rules = declarations.join( ';' );
+								ruleset += `:root :where(${ cssSelector }){${ rules };}`;
+							}
+						}
+					);
+				}
+
+				// Process duotone styles.
+				if ( duotoneSelector ) {
+					const duotoneStyles = {};
+					if ( styles?.filter ) {
+						duotoneStyles.filter = styles.filter;
+						delete styles.filter;
+					}
+					const duotoneDeclarations =
+						getStylesDeclarations( duotoneStyles );
+					if ( duotoneDeclarations.length ) {
+						ruleset += `${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
+					}
+				}
+
+				// Process blockGap and layout styles.
+				if (
+					! disableLayoutStyles &&
+					( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
+				) {
+					ruleset += getLayoutStyles( {
+						style: styles,
+						selector,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						fallbackGapValue,
+					} );
+				}
+
+				// Process the remaining block styles (they use either normal block class or __experimentalSelector).
+				const styleDeclarations = getStylesDeclarations(
+					styles,
+					selector,
+					useRootPaddingAlign,
+					tree,
+					disableRootPadding
+				);
+				if ( styleDeclarations?.length ) {
+					const generalSelector = skipSelectorWrapper
+						? selector
+						: `:root :where(${ selector })`;
+					ruleset += `${ generalSelector }{${ styleDeclarations.join(
+						';'
+					) };}`;
+				}
+				if ( styles?.css ) {
+					ruleset += processCSSNesting(
+						styles.css,
+						`:root :where(${ selector })`
+					);
+				}
+
+				if ( options.variationStyles && styleVariationSelectors ) {
+					Object.entries( styleVariationSelectors ).forEach(
+						( [ styleVariationName, styleVariationSelector ] ) => {
+							const styleVariations =
+								styles?.variations?.[ styleVariationName ];
+							if ( styleVariations ) {
+								// If the block uses any custom selectors for block support, add those first.
+								if ( featureSelectors ) {
+									const featureDeclarations =
+										getFeatureDeclarations(
+											featureSelectors,
+											styleVariations
+										);
+
+									Object.entries(
+										featureDeclarations
+									).forEach(
+										( [ baseSelector, declarations ] ) => {
+											if ( declarations.length ) {
+												const cssSelector =
+													concatFeatureVariationSelectorString(
+														baseSelector,
+														styleVariationSelector
+													);
+												const rules =
+													declarations.join( ';' );
+												ruleset += `:root :where(${ cssSelector }){${ rules };}`;
+											}
+										}
+									);
+								}
+
+								// Otherwise add regular selectors.
+								const styleVariationDeclarations =
+									getStylesDeclarations(
+										styleVariations,
+										styleVariationSelector,
+										useRootPaddingAlign,
+										tree
+									);
+								if ( styleVariationDeclarations.length ) {
+									ruleset += `:root :where(${ styleVariationSelector }){${ styleVariationDeclarations.join(
+										';'
+									) };}`;
+								}
+								if ( styleVariations?.css ) {
+									ruleset += processCSSNesting(
+										styleVariations.css,
+										`:root :where(${ styleVariationSelector })`
+									);
+								}
+							}
+						}
+					);
+				}
+
+				// Check for pseudo selector in `styles` and handle separately.
+				const pseudoSelectorStyles = Object.entries( styles ).filter(
+					( [ key ] ) => key.startsWith( ':' )
+				);
+
+				if ( pseudoSelectorStyles?.length ) {
+					pseudoSelectorStyles.forEach(
+						( [ pseudoKey, pseudoStyle ] ) => {
+							const pseudoDeclarations =
+								getStylesDeclarations( pseudoStyle );
+
+							if ( ! pseudoDeclarations?.length ) {
+								return;
+							}
+
+							// `selector` may be provided in a form
+							// where block level selectors have sub element
+							// selectors appended to them as a comma separated
+							// string.
+							// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
+							// Split and append pseudo selector to create
+							// the proper rules to target the elements.
+							const _selector = selector
+								.split( ',' )
+								.map( ( sel ) => sel + pseudoKey )
+								.join( ',' );
+
+							// As pseudo classes such as :hover, :focus etc. have class-level
+							// specificity, they must use the `:root :where()` wrapper. This.
+							// caps the specificity at `0-1-0` to allow proper nesting of variations
+							// and block type element styles.
+							const pseudoRule = `:root :where(${ _selector }){${ pseudoDeclarations.join(
+								';'
+							) };}`;
+
+							ruleset += pseudoRule;
+						}
+					);
+				}
+			}
+		);
+	}
+
+	if ( options.layoutStyles ) {
+		/* Add alignment / layout styles */
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+		ruleset =
+			ruleset +
+			'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+	}
+
+	if ( options.blockGap && hasBlockGapSupport ) {
+		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
+		const gapValue =
+			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
+		ruleset =
+			ruleset +
+			`:root :where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
+		ruleset =
+			ruleset +
+			':root :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }';
+		ruleset =
+			ruleset +
+			':root :where(.wp-site-blocks) > :last-child { margin-block-end: 0; }';
+	}
+
+	if ( options.presets ) {
+		nodesWithSettings.forEach( ( { selector, presets } ) => {
+			if (
+				ROOT_BLOCK_SELECTOR === selector ||
+				ROOT_CSS_PROPERTIES_SELECTOR === selector
+			) {
+				// Do not add extra specificity for top-level classes.
+				selector = '';
+			}
+
+			const classes = getPresetsClasses( selector, presets );
+			if ( classes.length > 0 ) {
+				ruleset += classes;
+			}
+		} );
+	}
+
+	return ruleset;
+};
+
+export function toSvgFilters( tree, blockSelectors ) {
+	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
+	return nodesWithSettings.flatMap( ( { presets } ) => {
+		return getPresetsSvgFilters( presets );
+	} );
+}
+
+const getSelectorsConfig = ( blockType, rootSelector ) => {
+	if (
+		blockType?.selectors &&
+		Object.keys( blockType.selectors ).length > 0
+	) {
+		return blockType.selectors;
+	}
+
+	const config = { root: rootSelector };
+	Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
+		( [ featureKey, featureName ] ) => {
+			const featureSelector = getBlockCSSSelector(
+				blockType,
+				featureKey
+			);
+
+			if ( featureSelector ) {
+				config[ featureName ] = featureSelector;
+			}
+		}
+	);
+
+	return config;
+};
+
+export const getBlockSelectors = (
+	blockTypes,
+	getBlockStyles,
+	variationInstanceId
+) => {
+	const result = {};
+	blockTypes.forEach( ( blockType ) => {
+		const name = blockType.name;
+		const selector = getBlockCSSSelector( blockType );
+		let duotoneSelector = getBlockCSSSelector(
+			blockType,
+			'filter.duotone'
+		);
+
+		// Keep backwards compatibility for support.color.__experimentalDuotone.
+		if ( ! duotoneSelector ) {
+			const rootSelector = getBlockCSSSelector( blockType );
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			duotoneSelector =
+				duotoneSupport && scopeSelector( rootSelector, duotoneSupport );
+		}
+
+		const hasLayoutSupport =
+			!! blockType?.supports?.layout ||
+			!! blockType?.supports?.__experimentalLayout;
+		const fallbackGapValue =
+			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
+
+		const blockStyleVariations = getBlockStyles( name );
+		const styleVariationSelectors = {};
+		blockStyleVariations?.forEach( ( variation ) => {
+			const variationSuffix = variationInstanceId
+				? `-${ variationInstanceId }`
+				: '';
+			const variationName = `${ variation.name }${ variationSuffix }`;
+			const styleVariationSelector = getBlockStyleVariationSelector(
+				variationName,
+				selector
+			);
+
+			styleVariationSelectors[ variationName ] = styleVariationSelector;
+		} );
+
+		// For each block support feature add any custom selectors.
+		const featureSelectors = getSelectorsConfig( blockType, selector );
+
+		result[ name ] = {
+			duotoneSelector,
+			fallbackGapValue,
+			featureSelectors: Object.keys( featureSelectors ).length
+				? featureSelectors
+				: undefined,
+			hasLayoutSupport,
+			name,
+			selector,
+			styleVariationSelectors: blockStyleVariations?.length
+				? styleVariationSelectors
+				: undefined,
+		};
+	} );
+
+	return result;
+};
+
+/**
+ * If there is a separator block whose color is defined in theme.json via background,
+ * update the separator color to the same value by using border color.
+ *
+ * @param {Object} config Theme.json configuration file object.
+ * @return {Object} configTheme.json configuration file object updated.
+ */
+function updateConfigWithSeparator( config ) {
+	const needsSeparatorStyleUpdate =
+		config.styles?.blocks?.[ 'core/separator' ] &&
+		config.styles?.blocks?.[ 'core/separator' ].color?.background &&
+		! config.styles?.blocks?.[ 'core/separator' ].color?.text &&
+		! config.styles?.blocks?.[ 'core/separator' ].border?.color;
+	if ( needsSeparatorStyleUpdate ) {
+		return {
+			...config,
+			styles: {
+				...config.styles,
+				blocks: {
+					...config.styles.blocks,
+					'core/separator': {
+						...config.styles.blocks[ 'core/separator' ],
+						color: {
+							...config.styles.blocks[ 'core/separator' ].color,
+							text: config.styles?.blocks[ 'core/separator' ]
+								.color.background,
+						},
+					},
+				},
+			},
+		};
+	}
+	return config;
+}
+
+export function processCSSNesting( css, blockSelector ) {
+	let processedCSS = '';
+
+	if ( ! css || css.trim() === '' ) {
+		return processedCSS;
+	}
+
+	// Split CSS nested rules.
+	const parts = css.split( '&' );
+	parts.forEach( ( part ) => {
+		if ( ! part || part.trim() === '' ) {
+			return;
+		}
+
+		const isRootCss = ! part.includes( '{' );
+		if ( isRootCss ) {
+			// If the part doesn't contain braces, it applies to the root level.
+			processedCSS += `:root :where(${ blockSelector }){${ part.trim() }}`;
+		} else {
+			// If the part contains braces, it's a nested CSS rule.
+			const splittedPart = part.replace( '}', '' ).split( '{' );
+			if ( splittedPart.length !== 2 ) {
+				return;
+			}
+
+			const [ nestedSelector, cssValue ] = splittedPart;
+
+			// Handle pseudo elements such as ::before, ::after, etc. Regex will also
+			// capture any leading combinator such as >, +, or ~, as well as spaces.
+			// This allows pseudo elements as descendants e.g. `.parent ::before`.
+			const matches = nestedSelector.match( /([>+~\s]*::[a-zA-Z-]+)/ );
+			const pseudoPart = matches ? matches[ 1 ] : '';
+			const withoutPseudoElement = matches
+				? nestedSelector.replace( pseudoPart, '' ).trim()
+				: nestedSelector.trim();
+
+			let combinedSelector;
+			if ( withoutPseudoElement === '' ) {
+				// Only contained a pseudo element to use the block selector to form
+				// the final `:root :where()` selector.
+				combinedSelector = blockSelector;
+			} else {
+				// If the nested selector is a descendant of the block scope it with the
+				// block selector. Otherwise append it to the block selector.
+				combinedSelector = nestedSelector.startsWith( ' ' )
+					? scopeSelector( blockSelector, withoutPseudoElement )
+					: appendToSelector( blockSelector, withoutPseudoElement );
+			}
+
+			// Build final rule, re-adding any pseudo element outside the `:where()`
+			// to maintain valid CSS selector.
+			processedCSS += `:root :where(${ combinedSelector })${ pseudoPart }{${ cssValue.trim() }}`;
+		}
+	} );
+	return processedCSS;
+}
+
+/**
+ * Returns the global styles output using a global styles configuration.
+ * If wishing to generate global styles and settings based on the
+ * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
+ * The use case for a custom config is to generate bespoke styles
+ * and settings for previews, or other out-of-editor experiences.
+ *
+ * @param {Object}  mergedConfig       Global styles configuration.
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig(
+	mergedConfig = {},
+	disableRootPadding
+) {
+	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGap !== null;
+	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
+	const disableLayoutStyles = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return !! getSettings().disableLayoutStyles;
+	} );
+
+	const { getBlockStyles } = useSelect( blocksStore );
+
+	return useMemo( () => {
+		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
+			return [];
+		}
+		const updatedConfig = updateConfigWithSeparator( mergedConfig );
+
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles
+		);
+
+		const customProperties = toCustomProperties(
+			updatedConfig,
+			blockSelectors
+		);
+
+		const globalStyles = toStyles(
+			updatedConfig,
+			blockSelectors,
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			disableRootPadding
+		);
+		const svgs = toSvgFilters( updatedConfig, blockSelectors );
+
+		const styles = [
+			{
+				css: customProperties,
+				isGlobalStyles: true,
+			},
+			{
+				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: updatedConfig.styles.css ?? '',
+				isGlobalStyles: true,
+			},
+			{
+				assets: svgs,
+				__unstableType: 'svg',
+				isGlobalStyles: true,
+			},
+		];
+
+		// Loop through the blocks to check if there are custom CSS values.
+		// If there are, get the block selector and push the selector together with
+		// the CSS value to the 'stylesheets' array.
+		getBlockTypes().forEach( ( blockType ) => {
+			if ( updatedConfig.styles.blocks[ blockType.name ]?.css ) {
+				const selector = blockSelectors[ blockType.name ].selector;
+				styles.push( {
+					css: processCSSNesting(
+						updatedConfig.styles.blocks[ blockType.name ]?.css,
+						selector
+					),
+					isGlobalStyles: true,
+				} );
+			}
+		} );
+
+		return [ styles, updatedConfig.settings ];
+	}, [
+		hasBlockGapSupport,
+		hasFallbackGapSupport,
+		mergedConfig,
+		disableLayoutStyles,
+		disableRootPadding,
+		getBlockStyles,
+	] );
+}
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @param {boolean} disableRootPadding Disable root padding styles.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput( disableRootPadding = false ) {
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
+}
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
new file mode 100644
index 00000000000000..f5dc157d1df8eb
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -0,0 +1,615 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
+
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from './typography-utils';
+import { getValueFromObjectPath } from '../../utils/object';
+
+/* Supporting data. */
+export const ROOT_BLOCK_SELECTOR = 'body';
+export const ROOT_CSS_PROPERTIES_SELECTOR = ':root';
+
+export const PRESET_METADATA = [
+	{
+		path: [ 'color', 'palette' ],
+		valueKey: 'color',
+		cssVarInfix: 'color',
+		classes: [
+			{ classSuffix: 'color', propertyName: 'color' },
+			{
+				classSuffix: 'background-color',
+				propertyName: 'background-color',
+			},
+			{
+				classSuffix: 'border-color',
+				propertyName: 'border-color',
+			},
+		],
+	},
+	{
+		path: [ 'color', 'gradients' ],
+		valueKey: 'gradient',
+		cssVarInfix: 'gradient',
+		classes: [
+			{
+				classSuffix: 'gradient-background',
+				propertyName: 'background',
+			},
+		],
+	},
+	{
+		path: [ 'color', 'duotone' ],
+		valueKey: 'colors',
+		cssVarInfix: 'duotone',
+		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
+		classes: [],
+	},
+	{
+		path: [ 'shadow', 'presets' ],
+		valueKey: 'shadow',
+		cssVarInfix: 'shadow',
+		classes: [],
+	},
+	{
+		path: [ 'typography', 'fontSizes' ],
+		valueFunc: ( preset, settings ) =>
+			getTypographyFontSizeValue( preset, settings ),
+		valueKey: 'size',
+		cssVarInfix: 'font-size',
+		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
+	},
+	{
+		path: [ 'typography', 'fontFamilies' ],
+		valueKey: 'fontFamily',
+		cssVarInfix: 'font-family',
+		classes: [
+			{ classSuffix: 'font-family', propertyName: 'font-family' },
+		],
+	},
+	{
+		path: [ 'spacing', 'spacingSizes' ],
+		valueKey: 'size',
+		cssVarInfix: 'spacing',
+		valueFunc: ( { size } ) => size,
+		classes: [],
+	},
+];
+
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'color.background': 'color',
+	'color.text': 'color',
+	'filter.duotone': 'duotone',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.caption.color.text': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	shadow: 'shadow',
+	'typography.fontSize': 'font-size',
+	'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',
+};
+
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}
+
+function findInPresetsBy(
+	features,
+	blockName,
+	presetPath,
+	presetProperty,
+	presetValueValue
+) {
+	// Block presets take priority above root level presets.
+	const orderedPresetsByOrigin = [
+		getValueFromObjectPath( features, [
+			'blocks',
+			blockName,
+			...presetPath,
+		] ),
+		getValueFromObjectPath( features, presetPath ),
+	];
+
+	for ( const presetByOrigin of orderedPresetsByOrigin ) {
+		if ( presetByOrigin ) {
+			// Preset origins ordered by priority.
+			const origins = [ 'custom', 'theme', 'default' ];
+			for ( const origin of origins ) {
+				const presets = presetByOrigin[ origin ];
+				if ( presets ) {
+					const presetObject = presets.find(
+						( preset ) =>
+							preset[ presetProperty ] === presetValueValue
+					);
+					if ( presetObject ) {
+						if ( presetProperty === 'slug' ) {
+							return presetObject;
+						}
+						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
+						const highestPresetObjectWithSameSlug = findInPresetsBy(
+							features,
+							blockName,
+							presetPath,
+							'slug',
+							presetObject.slug
+						);
+						if (
+							highestPresetObjectWithSameSlug[
+								presetProperty
+							] === presetObject[ presetProperty ]
+						) {
+							return presetObject;
+						}
+						return undefined;
+					}
+				}
+			}
+		}
+	}
+}
+
+export function getPresetVariableFromValue(
+	features,
+	blockName,
+	variableStylePath,
+	presetPropertyValue
+) {
+	if ( ! presetPropertyValue ) {
+		return presetPropertyValue;
+	}
+
+	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
+
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === cssVarInfix
+	);
+
+	if ( ! metadata ) {
+		// The property doesn't have preset data
+		// so the value should be returned as it is.
+		return presetPropertyValue;
+	}
+	const { valueKey, path } = metadata;
+
+	const presetObject = findInPresetsBy(
+		features,
+		blockName,
+		path,
+		valueKey,
+		presetPropertyValue
+	);
+
+	if ( ! presetObject ) {
+		// Value wasn't found in the presets,
+		// so it must be a custom value.
+		return presetPropertyValue;
+	}
+
+	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;
+}
+
+function getValueFromPresetVariable(
+	features,
+	blockName,
+	variable,
+	[ presetType, slug ]
+) {
+	const metadata = PRESET_METADATA.find(
+		( data ) => data.cssVarInfix === presetType
+	);
+	if ( ! metadata ) {
+		return variable;
+	}
+
+	const presetObject = findInPresetsBy(
+		features.settings,
+		blockName,
+		metadata.path,
+		'slug',
+		slug
+	);
+
+	if ( presetObject ) {
+		const { valueKey } = metadata;
+		const result = presetObject[ valueKey ];
+		return getValueFromVariable( features, blockName, result );
+	}
+
+	return variable;
+}
+
+function getValueFromCustomVariable( features, blockName, variable, path ) {
+	const result =
+		getValueFromObjectPath( features.settings, [
+			'blocks',
+			blockName,
+			'custom',
+			...path,
+		] ) ??
+		getValueFromObjectPath( features.settings, [ 'custom', ...path ] );
+	if ( ! result ) {
+		return variable;
+	}
+	// A variable may reference another variable so we need recursion until we find the value.
+	return getValueFromVariable( features, blockName, result );
+}
+
+/**
+ * Attempts to fetch the value of a theme.json CSS variable.
+ *
+ * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
+ * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
+ * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
+ * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
+ */
+export function getValueFromVariable( features, blockName, variable ) {
+	if ( ! variable || typeof variable !== 'string' ) {
+		if ( typeof variable?.ref === 'string' ) {
+			variable = getValueFromObjectPath( features, variable.ref );
+			// Presence of another ref indicates a reference to another dynamic value.
+			// Pointing to another dynamic value is not supported.
+			if ( ! variable || !! variable?.ref ) {
+				return variable;
+			}
+		} else {
+			return variable;
+		}
+	}
+	const USER_VALUE_PREFIX = 'var:';
+	const THEME_VALUE_PREFIX = 'var(--wp--';
+	const THEME_VALUE_SUFFIX = ')';
+
+	let parsedVar;
+
+	if ( variable.startsWith( USER_VALUE_PREFIX ) ) {
+		parsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );
+	} else if (
+		variable.startsWith( THEME_VALUE_PREFIX ) &&
+		variable.endsWith( THEME_VALUE_SUFFIX )
+	) {
+		parsedVar = variable
+			.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )
+			.split( '--' );
+	} else {
+		// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
+		return variable;
+	}
+
+	const [ type, ...path ] = parsedVar;
+	if ( type === 'preset' ) {
+		return getValueFromPresetVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
+	}
+	if ( type === 'custom' ) {
+		return getValueFromCustomVariable(
+			features,
+			blockName,
+			variable,
+			path
+		);
+	}
+	return variable;
+}
+
+/**
+ * Function that scopes a selector with another one. This works a bit like
+ * SCSS nesting except the `&` operator isn't supported.
+ *
+ * @example
+ * ```js
+ * const scope = '.a, .b .c';
+ * const selector = '> .x, .y';
+ * const merged = scopeSelector( scope, selector );
+ * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+ * ```
+ *
+ * @param {string} scope    Selector to scope to.
+ * @param {string} selector Original selector.
+ *
+ * @return {string} Scoped selector.
+ */
+export function scopeSelector( scope, selector ) {
+	if ( ! scope || ! selector ) {
+		return selector;
+	}
+
+	const scopes = scope.split( ',' );
+	const selectors = selector.split( ',' );
+
+	const selectorsScoped = [];
+	scopes.forEach( ( outer ) => {
+		selectors.forEach( ( inner ) => {
+			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
+		} );
+	} );
+
+	return selectorsScoped.join( ', ' );
+}
+
+/**
+ * Scopes a collection of selectors for features and subfeatures.
+ *
+ * @example
+ * ```js
+ * const scope = '.custom-scope';
+ * const selectors = {
+ *     color: '.wp-my-block p',
+ *     typography: { fontSize: '.wp-my-block caption' },
+ * };
+ * const result = scopeFeatureSelector( scope, selectors );
+ * // result is {
+ * //     color: '.custom-scope .wp-my-block p',
+ * //     typography: { fonSize: '.custom-scope .wp-my-block caption' },
+ * // }
+ * ```
+ *
+ * @param {string} scope     Selector to scope collection of selectors with.
+ * @param {Object} selectors Collection of feature selectors e.g.
+ *
+ * @return {Object|undefined} Scoped collection of feature selectors.
+ */
+export function scopeFeatureSelectors( scope, selectors ) {
+	if ( ! scope || ! selectors ) {
+		return;
+	}
+
+	const featureSelectors = {};
+
+	Object.entries( selectors ).forEach( ( [ feature, selector ] ) => {
+		if ( typeof selector === 'string' ) {
+			featureSelectors[ feature ] = scopeSelector( scope, selector );
+		}
+
+		if ( typeof selector === 'object' ) {
+			featureSelectors[ feature ] = {};
+
+			Object.entries( selector ).forEach(
+				( [ subfeature, subfeatureSelector ] ) => {
+					featureSelectors[ feature ][ subfeature ] = scopeSelector(
+						scope,
+						subfeatureSelector
+					);
+				}
+			);
+		}
+	} );
+
+	return featureSelectors;
+}
+
+/**
+ * Appends a sub-selector to an existing one.
+ *
+ * Given the compounded `selector` "h1, h2, h3"
+ * and the `toAppend` selector ".some-class" the result will be
+ * "h1.some-class, h2.some-class, h3.some-class".
+ *
+ * @param {string} selector Original selector.
+ * @param {string} toAppend Selector to append.
+ *
+ * @return {string} The new selector.
+ */
+export function appendToSelector( selector, toAppend ) {
+	if ( ! selector.includes( ',' ) ) {
+		return selector + toAppend;
+	}
+	const selectors = selector.split( ',' );
+	const newSelectors = selectors.map( ( sel ) => sel + toAppend );
+	return newSelectors.join( ',' );
+}
+
+/**
+ * Compares global style variations according to their styles and settings properties.
+ *
+ * @example
+ * ```js
+ * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
+ * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
+ * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
+ * // false
+ * ```
+ *
+ * @param {Object} original  A global styles object.
+ * @param {Object} variation A global styles object.
+ *
+ * @return {boolean} Whether `original` and `variation` match.
+ */
+export function areGlobalStyleConfigsEqual( original, variation ) {
+	if ( typeof original !== 'object' || typeof variation !== 'object' ) {
+		return original === variation;
+	}
+	return (
+		fastDeepEqual( original?.styles, variation?.styles ) &&
+		fastDeepEqual( original?.settings, variation?.settings )
+	);
+}
+
+/**
+ * Generates the selector for a block style variation by creating the
+ * appropriate CSS class and adding it to the ancestor portion of the block's
+ * selector.
+ *
+ * For example, take the Button block which has a compound selector:
+ * `.wp-block-button .wp-block-button__link`. With a variation named 'custom',
+ * the class `.is-style-custom` should be added to the `.wp-block-button`
+ * ancestor only.
+ *
+ * This function will take into account comma separated and complex selectors.
+ *
+ * @param {string} variation     Name for the variation.
+ * @param {string} blockSelector CSS selector for the block.
+ *
+ * @return {string} CSS selector for the block style variation.
+ */
+export function getBlockStyleVariationSelector( variation, blockSelector ) {
+	const variationClass = `.is-style-${ variation }`;
+
+	if ( ! blockSelector ) {
+		return variationClass;
+	}
+
+	const ancestorRegex = /((?::\([^)]+\))?\s*)([^\s:]+)/;
+	const addVariationClass = ( _match, group1, group2 ) => {
+		return group1 + group2 + variationClass;
+	};
+
+	const result = blockSelector
+		.split( ',' )
+		.map( ( part ) => part.replace( ancestorRegex, addVariationClass ) );
+
+	return result.join( ',' );
+}
+
+/**
+ * Looks up a theme file URI based on a relative path.
+ *
+ * @param {string}        file          A relative path.
+ * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
+ * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.
+ */
+export function getResolvedThemeFilePath( file, themeFileURIs ) {
+	if ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {
+		return file;
+	}
+
+	const uri = themeFileURIs.find(
+		( themeFileUri ) => themeFileUri?.name === file
+	);
+
+	if ( ! uri?.href ) {
+		return file;
+	}
+
+	return uri?.href;
+}
+
+/**
+ * Resolves ref values in theme JSON.
+ *
+ * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
+ * @param {Object}        tree      A theme.json object.
+ * @return {*} The resolved value or incoming ruleValue.
+ */
+export function getResolvedRefValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
+	}
+
+	/*
+	 * Where the rule value is an object with a 'ref' property pointing
+	 * to a path, this converts that path into the value at that path.
+	 * For example: { "ref": "style.color.background" } => "#fff".
+	 */
+	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
+		const resolvedRuleValue = getCSSValueFromRawStyle(
+			getValueFromObjectPath( tree, ruleValue.ref )
+		);
+
+		/*
+		 * Presence of another ref indicates a reference to another dynamic value.
+		 * Pointing to another dynamic value is not supported.
+		 */
+		if ( resolvedRuleValue?.ref ) {
+			return undefined;
+		}
+
+		if ( resolvedRuleValue === undefined ) {
+			return ruleValue;
+		}
+
+		return resolvedRuleValue;
+	}
+	return ruleValue;
+}
+
+/**
+ * Resolves ref and relative path values in theme JSON.
+ *
+ * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
+ * @param {Object}        tree      A theme.json object.
+ * @return {*} The resolved value or incoming ruleValue.
+ */
+export function getResolvedValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
+	}
+
+	// Resolve ref values.
+	const resolvedValue = getResolvedRefValue( ruleValue, tree );
+
+	// Resolve relative paths.
+	if ( resolvedValue?.url ) {
+		resolvedValue.url = getResolvedThemeFilePath(
+			resolvedValue.url,
+			tree?._links?.[ 'wp:theme-file' ]
+		);
+	}
+
+	return resolvedValue;
+}
diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js
index 4acf09fc03b522..938a60143d7670 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
  */
@@ -13,7 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { useBlockEditContext } from '../block-edit';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import { store as blockEditorStore } from '../../store';
 
 export function __experimentalGetGradientClass( gradientSlug ) {
@@ -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;
 }
 
@@ -65,9 +60,15 @@ export function __experimentalUseGradient( {
 } = {} ) {
 	const { clientId } = useBlockEditContext();
 
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const [
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+	] = useSettings(
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default'
+	);
 	const allGradients = useMemo(
 		() => [
 			...( userGradientPalette || [] ),
diff --git a/packages/block-editor/src/components/grid/grid-item-movers.js b/packages/block-editor/src/components/grid/grid-item-movers.js
new file mode 100644
index 00000000000000..a7f21181eb9a5f
--- /dev/null
+++ b/packages/block-editor/src/components/grid/grid-item-movers.js
@@ -0,0 +1,184 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	VisuallyHidden,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronUp,
+	chevronDown,
+	chevronRight,
+} from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
+
+export function GridItemMovers( {
+	layout,
+	parentLayout,
+	onChange,
+	gridClientId,
+	blockClientId,
+} ) {
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const columnStart = layout?.columnStart ?? 1;
+	const rowStart = layout?.rowStart ?? 1;
+	const columnSpan = layout?.columnSpan ?? 1;
+	const rowSpan = layout?.rowSpan ?? 1;
+	const columnEnd = columnStart + columnSpan - 1;
+	const rowEnd = rowStart + rowSpan - 1;
+	const columnCount = parentLayout?.columnCount;
+	const rowCount = parentLayout?.rowCount;
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		columnCount
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
+					<GridItemMover
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						label={ __( 'Move left' ) }
+						description={ __( 'Move left' ) }
+						isDisabled={ columnStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart - 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
+				<div className="block-editor-grid-item-mover__move-vertical-button-container">
+					<GridItemMover
+						className="is-up-button"
+						icon={ chevronUp }
+						label={ __( 'Move up' ) }
+						description={ __( 'Move up' ) }
+						isDisabled={ rowStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart - 1
+								)
+							);
+						} }
+					/>
+					<GridItemMover
+						className="is-down-button"
+						icon={ chevronDown }
+						label={ __( 'Move down' ) }
+						description={ __( 'Move down' ) }
+						isDisabled={ rowCount && rowEnd >= rowCount }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart + 1
+								)
+							);
+						} }
+					/>
+				</div>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
+					<GridItemMover
+						icon={ isRTL() ? chevronLeft : chevronRight }
+						label={ __( 'Move right' ) }
+						description={ __( 'Move right' ) }
+						isDisabled={ columnCount && columnEnd >= columnCount }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart + 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+
+function GridItemMover( {
+	className,
+	icon,
+	label,
+	isDisabled,
+	onClick,
+	description,
+} ) {
+	const instanceId = useInstanceId( GridItemMover );
+	const descriptionId = `block-editor-grid-item-mover-button__description-${ instanceId }`;
+	return (
+		<>
+			<ToolbarButton
+				className={ clsx(
+					'block-editor-grid-item-mover-button',
+					className
+				) }
+				icon={ icon }
+				label={ label }
+				aria-describedby={ descriptionId }
+				onClick={ isDisabled ? null : onClick }
+				disabled={ isDisabled }
+				accessibleWhenDisabled
+			/>
+			<VisuallyHidden id={ descriptionId }>
+				{ description }
+			</VisuallyHidden>
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/grid/grid-item-resizer.js b/packages/block-editor/src/components/grid/grid-item-resizer.js
new file mode 100644
index 00000000000000..1277ac2a239531
--- /dev/null
+++ b/packages/block-editor/src/components/grid/grid-item-resizer.js
@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
+
+export function GridItemResizer( {
+	clientId,
+	bounds,
+	onChange,
+	parentLayout,
+} ) {
+	const blockElement = useBlockElement( clientId );
+	const rootBlockElement = blockElement?.parentElement;
+	const { isManualPlacement } = parentLayout;
+
+	if ( ! blockElement || ! rootBlockElement ) {
+		return null;
+	}
+
+	return (
+		<GridItemResizerInner
+			clientId={ clientId }
+			bounds={ bounds }
+			blockElement={ blockElement }
+			rootBlockElement={ rootBlockElement }
+			onChange={ onChange }
+			isManualGrid={
+				isManualPlacement &&
+				window.__experimentalEnableGridInteractivity
+			}
+		/>
+	);
+}
+
+function GridItemResizerInner( {
+	clientId,
+	bounds,
+	blockElement,
+	rootBlockElement,
+	onChange,
+	isManualGrid,
+} ) {
+	const [ resizeDirection, setResizeDirection ] = useState( null );
+	const [ enableSide, setEnableSide ] = useState( {
+		top: false,
+		bottom: false,
+		left: false,
+		right: false,
+	} );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			const blockClientRect = blockElement.getBoundingClientRect();
+			const rootBlockClientRect =
+				rootBlockElement.getBoundingClientRect();
+			setEnableSide( {
+				top: blockClientRect.top > rootBlockClientRect.top,
+				bottom: blockClientRect.bottom < rootBlockClientRect.bottom,
+				left: blockClientRect.left > rootBlockClientRect.left,
+				right: blockClientRect.right < rootBlockClientRect.right,
+			} );
+		} );
+		observer.observe( blockElement );
+		return () => observer.disconnect();
+	}, [ blockElement, rootBlockElement ] );
+
+	const justification = {
+		right: 'left',
+		left: 'right',
+	};
+
+	const alignment = {
+		top: 'flex-end',
+		bottom: 'flex-start',
+	};
+
+	const styles = {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		...( justification[ resizeDirection ] && {
+			justifyContent: justification[ resizeDirection ],
+		} ),
+		...( alignment[ resizeDirection ] && {
+			alignItems: alignment[ resizeDirection ],
+		} ),
+	};
+
+	return (
+		<BlockPopoverCover
+			className="block-editor-grid-item-resizer"
+			clientId={ clientId }
+			__unstablePopoverSlot="__unstable-block-tools-after"
+			additionalStyles={ styles }
+		>
+			<ResizableBox
+				className="block-editor-grid-item-resizer__box"
+				size={ {
+					width: '100%',
+					height: '100%',
+				} }
+				enable={ {
+					bottom: enableSide.bottom,
+					bottomLeft: false,
+					bottomRight: false,
+					left: enableSide.left,
+					right: enableSide.right,
+					top: enableSide.top,
+					topLeft: false,
+					topRight: false,
+				} }
+				bounds={ bounds }
+				boundsByDirection
+				onPointerDown={ ( { target, pointerId } ) => {
+					/*
+					 * Captures the pointer to avoid hiccups while dragging over objects
+					 * like iframes and ensures that the event to end the drag is
+					 * captured by the target (resize handle) whether or not it’s under
+					 * the pointer.
+					 */
+					target.setPointerCapture( pointerId );
+				} }
+				onResizeStart={ ( event, direction ) => {
+					/*
+					 * The container justification and alignment need to be set
+					 * according to the direction the resizer is being dragged in,
+					 * so that it resizes in the right direction.
+					 */
+					setResizeDirection( direction );
+				} }
+				onResizeStop={ ( event, direction, boxElement ) => {
+					const columnGap = parseFloat(
+						getComputedCSS( rootBlockElement, 'column-gap' )
+					);
+					const rowGap = parseFloat(
+						getComputedCSS( rootBlockElement, 'row-gap' )
+					);
+					const gridColumnTracks = getGridTracks(
+						getComputedCSS(
+							rootBlockElement,
+							'grid-template-columns'
+						),
+						columnGap
+					);
+					const gridRowTracks = getGridTracks(
+						getComputedCSS(
+							rootBlockElement,
+							'grid-template-rows'
+						),
+						rowGap
+					);
+					const rect = new window.DOMRect(
+						blockElement.offsetLeft + boxElement.offsetLeft,
+						blockElement.offsetTop + boxElement.offsetTop,
+						boxElement.offsetWidth,
+						boxElement.offsetHeight
+					);
+					const columnStart =
+						getClosestTrack( gridColumnTracks, rect.left ) + 1;
+					const rowStart =
+						getClosestTrack( gridRowTracks, rect.top ) + 1;
+					const columnEnd =
+						getClosestTrack( gridColumnTracks, rect.right, 'end' ) +
+						1;
+					const rowEnd =
+						getClosestTrack( gridRowTracks, rect.bottom, 'end' ) +
+						1;
+					onChange( {
+						columnSpan: columnEnd - columnStart + 1,
+						rowSpan: rowEnd - rowStart + 1,
+						columnStart: isManualGrid ? columnStart : undefined,
+						rowStart: isManualGrid ? rowStart : undefined,
+					} );
+				} }
+			/>
+		</BlockPopoverCover>
+	);
+}
diff --git a/packages/block-editor/src/components/grid/grid-visualizer.js b/packages/block-editor/src/components/grid/grid-visualizer.js
new file mode 100644
index 00000000000000..81da0457ffc5ca
--- /dev/null
+++ b/packages/block-editor/src/components/grid/grid-visualizer.js
@@ -0,0 +1,399 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, forwardRef, useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { range, GridRect, getGridInfo } from './utils';
+import { store as blockEditorStore } from '../../store';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import ButtonBlockAppender from '../button-block-appender';
+import { unlock } from '../../lock-unlock';
+
+export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
+	const gridElement = useBlockElement( clientId );
+
+	if ( isDistractionFree || ! gridElement ) {
+		return null;
+	}
+
+	const isManualGrid =
+		parentLayout?.isManualPlacement &&
+		window.__experimentalEnableGridInteractivity;
+	return (
+		<GridVisualizerGrid
+			gridClientId={ clientId }
+			gridElement={ gridElement }
+			isManualGrid={ isManualGrid }
+			ref={ contentRef }
+		/>
+	);
+}
+
+const GridVisualizerGrid = forwardRef(
+	( { gridClientId, gridElement, isManualGrid }, ref ) => {
+		const [ gridInfo, setGridInfo ] = useState( () =>
+			getGridInfo( gridElement )
+		);
+		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
+
+		useEffect( () => {
+			const observers = [];
+			for ( const element of [ gridElement, ...gridElement.children ] ) {
+				const observer = new window.ResizeObserver( () => {
+					setGridInfo( getGridInfo( gridElement ) );
+				} );
+				observer.observe( element );
+				observers.push( observer );
+			}
+			return () => {
+				for ( const observer of observers ) {
+					observer.disconnect();
+				}
+			};
+		}, [ gridElement ] );
+
+		useEffect( () => {
+			function onGlobalDrag() {
+				setIsDroppingAllowed( true );
+			}
+			function onGlobalDragEnd() {
+				setIsDroppingAllowed( false );
+			}
+			document.addEventListener( 'drag', onGlobalDrag );
+			document.addEventListener( 'dragend', onGlobalDragEnd );
+			return () => {
+				document.removeEventListener( 'drag', onGlobalDrag );
+				document.removeEventListener( 'dragend', onGlobalDragEnd );
+			};
+		}, [] );
+
+		return (
+			<BlockPopoverCover
+				className={ clsx( 'block-editor-grid-visualizer', {
+					'is-dropping-allowed': isDroppingAllowed,
+				} ) }
+				clientId={ gridClientId }
+				__unstablePopoverSlot="__unstable-block-tools-after"
+			>
+				<div
+					ref={ ref }
+					className="block-editor-grid-visualizer__grid"
+					style={ gridInfo.style }
+				>
+					{ isManualGrid ? (
+						<ManualGridVisualizer
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+						/>
+					) : (
+						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+							<GridVisualizerCell
+								key={ i }
+								color={ gridInfo.currentColor }
+							/>
+						) )
+					) }
+				</div>
+			</BlockPopoverCover>
+		);
+	}
+);
+
+function ManualGridVisualizer( { gridClientId, gridInfo } ) {
+	const [ highlightedRect, setHighlightedRect ] = useState( null );
+
+	const gridItemStyles = useSelect(
+		( select ) => {
+			const { getBlockOrder, getBlockStyles } = unlock(
+				select( blockEditorStore )
+			);
+			const blockOrder = getBlockOrder( gridClientId );
+			return getBlockStyles( blockOrder );
+		},
+		[ gridClientId ]
+	);
+	const occupiedRects = useMemo( () => {
+		const rects = [];
+		for ( const style of Object.values( gridItemStyles ) ) {
+			const {
+				columnStart,
+				rowStart,
+				columnSpan = 1,
+				rowSpan = 1,
+			} = style?.layout ?? {};
+			if ( ! columnStart || ! rowStart ) {
+				continue;
+			}
+			rects.push(
+				new GridRect( {
+					columnStart,
+					rowStart,
+					columnSpan,
+					rowSpan,
+				} )
+			);
+		}
+		return rects;
+	}, [ gridItemStyles ] );
+
+	return range( 1, gridInfo.numRows ).map( ( row ) =>
+		range( 1, gridInfo.numColumns ).map( ( column ) => {
+			const isCellOccupied = occupiedRects.some( ( rect ) =>
+				rect.contains( column, row )
+			);
+			const isHighlighted =
+				highlightedRect?.contains( column, row ) ?? false;
+			return (
+				<GridVisualizerCell
+					key={ `${ row }-${ column }` }
+					color={ gridInfo.currentColor }
+					className={ isHighlighted && 'is-highlighted' }
+				>
+					{ isCellOccupied ? (
+						<GridVisualizerDropZone
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) : (
+						<GridVisualizerAppender
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) }
+				</GridVisualizerCell>
+			);
+		} )
+	);
+}
+
+function GridVisualizerCell( { color, children, className } ) {
+	return (
+		<div
+			className={ clsx(
+				'block-editor-grid-visualizer__cell',
+				className
+			) }
+			style={ {
+				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+				color,
+			} }
+		>
+			{ children }
+		</div>
+	);
+}
+
+function useGridVisualizerDropZone(
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect
+) {
+	const {
+		getBlockAttributes,
+		getBlockRootClientId,
+		canInsertBlockType,
+		getBlockName,
+	} = useSelect( blockEditorStore );
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	return useDropZoneWithValidation( {
+		validateDrag( srcClientId ) {
+			const blockName = getBlockName( srcClientId );
+			if ( ! canInsertBlockType( blockName, gridClientId ) ) {
+				return false;
+			}
+			const attributes = getBlockAttributes( srcClientId );
+			const rect = new GridRect( {
+				columnStart: column,
+				rowStart: row,
+				columnSpan: attributes.style?.layout?.columnSpan,
+				rowSpan: attributes.style?.layout?.rowSpan,
+			} );
+			const isInBounds = new GridRect( {
+				columnSpan: gridInfo.numColumns,
+				rowSpan: gridInfo.numRows,
+			} ).containsRect( rect );
+			return isInBounds;
+		},
+		onDragEnter( srcClientId ) {
+			const attributes = getBlockAttributes( srcClientId );
+			setHighlightedRect(
+				new GridRect( {
+					columnStart: column,
+					rowStart: row,
+					columnSpan: attributes.style?.layout?.columnSpan,
+					rowSpan: attributes.style?.layout?.rowSpan,
+				} )
+			);
+		},
+		onDragLeave() {
+			// onDragEnter can be called before onDragLeave if the user moves
+			// their mouse quickly, so only clear the highlight if it was set
+			// by this cell.
+			setHighlightedRect( ( prevHighlightedRect ) =>
+				prevHighlightedRect?.columnStart === column &&
+				prevHighlightedRect?.rowStart === row
+					? null
+					: prevHighlightedRect
+			);
+		},
+		onDrop( srcClientId ) {
+			setHighlightedRect( null );
+			const attributes = getBlockAttributes( srcClientId );
+			updateBlockAttributes( srcClientId, {
+				style: {
+					...attributes.style,
+					layout: {
+						...attributes.style?.layout,
+						columnStart: column,
+						rowStart: row,
+					},
+				},
+			} );
+			__unstableMarkNextChangeAsNotPersistent();
+			moveBlocksToPosition(
+				[ srcClientId ],
+				getBlockRootClientId( srcClientId ),
+				gridClientId,
+				getNumberOfBlocksBeforeCell( column, row )
+			);
+		},
+	} );
+}
+
+function GridVisualizerDropZone( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
+	return (
+		<div
+			className="block-editor-grid-visualizer__drop-zone"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+		/>
+	);
+}
+
+function GridVisualizerAppender( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	return (
+		<ButtonBlockAppender
+			rootClientId={ gridClientId }
+			className="block-editor-grid-visualizer__appender"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+			style={ {
+				color: gridInfo.currentColor,
+			} }
+			onSelect={ ( block ) => {
+				if ( ! block ) {
+					return;
+				}
+				updateBlockAttributes( block.clientId, {
+					style: {
+						layout: {
+							columnStart: column,
+							rowStart: row,
+						},
+					},
+				} );
+				__unstableMarkNextChangeAsNotPersistent();
+				moveBlocksToPosition(
+					[ block.clientId ],
+					gridClientId,
+					gridClientId,
+					getNumberOfBlocksBeforeCell( column, row )
+				);
+			} }
+		/>
+	);
+}
+
+function useDropZoneWithValidation( {
+	validateDrag,
+	onDragEnter,
+	onDragLeave,
+	onDrop,
+} ) {
+	const { getDraggedBlockClientIds } = useSelect( blockEditorStore );
+	return useDropZone( {
+		onDragEnter() {
+			const [ srcClientId ] = getDraggedBlockClientIds();
+			if ( srcClientId && validateDrag( srcClientId ) ) {
+				onDragEnter( srcClientId );
+			}
+		},
+		onDragLeave() {
+			onDragLeave();
+		},
+		onDrop() {
+			const [ srcClientId ] = getDraggedBlockClientIds();
+			if ( srcClientId && validateDrag( srcClientId ) ) {
+				onDrop( srcClientId );
+			}
+		},
+	} );
+}
diff --git a/packages/block-editor/src/components/grid/index.js b/packages/block-editor/src/components/grid/index.js
new file mode 100644
index 00000000000000..a1552610102a06
--- /dev/null
+++ b/packages/block-editor/src/components/grid/index.js
@@ -0,0 +1,4 @@
+export { GridVisualizer } from './grid-visualizer';
+export { GridItemResizer } from './grid-item-resizer';
+export { GridItemMovers } from './grid-item-movers';
+export { useGridLayoutSync } from './use-grid-layout-sync';
diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss
new file mode 100644
index 00000000000000..3a04eb006e7910
--- /dev/null
+++ b/packages/block-editor/src/components/grid/style.scss
@@ -0,0 +1,262 @@
+.block-editor-grid-visualizer {
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-visualizer.block-editor-grid-visualizer {
+		z-index: z-index(".block-editor-grid-visualizer");
+
+		.components-popover__content * {
+			pointer-events: none;
+		}
+
+		&.is-dropping-allowed {
+			.block-editor-grid-visualizer__drop-zone {
+				pointer-events: all;
+			}
+		}
+		.block-editor-inserter * {
+			pointer-events: auto;
+		}
+	}
+}
+
+.block-editor-grid-visualizer__grid {
+	display: grid;
+}
+
+.block-editor-grid-visualizer__cell {
+	display: grid;
+	position: relative;
+
+	.block-editor-inserter {
+		color: inherit;
+		z-index: 32;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+
+		.block-editor-grid-visualizer__appender {
+			box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor  20%, #0000);
+			color: inherit;
+			overflow: hidden;
+			height: 100%;
+			width: 100%;
+			padding: 0 !important;
+			opacity: 0;
+		}
+
+	}
+
+	&.is-highlighted {
+		.block-editor-inserter,
+		.block-editor-grid-visualizer__drop-zone {
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	&:hover .block-editor-grid-visualizer__appender,
+	.block-editor-grid-visualizer__appender:focus {
+		opacity: 1;
+		background-color: color-mix(in srgb, currentColor  20%, #0000);
+	}
+}
+
+.block-editor-grid-visualizer__drop-zone {
+	background: rgba($gray-400, 0.1);
+	width: 100%;
+	height: 100%;
+	grid-column: 1;
+	grid-row: 1;
+
+	// Make drop zone 8x8 at minimum so that it's easier to drag into. This will overflow the parent.
+	min-width: $grid-unit-10;
+	min-height: $grid-unit-10;
+}
+
+.block-editor-grid-item-resizer {
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+		z-index: z-index(".block-editor-grid-visualizer");
+
+		.components-popover__content * {
+			pointer-events: none;
+		}
+	}
+}
+
+.block-editor-grid-item-resizer__box {
+	border: $border-width solid var(--wp-admin-theme-color);
+
+	.components-resizable-box__handle {
+		// Specificity to override the pointer-events set by .components-popover.
+		&.components-resizable-box__handle.components-resizable-box__handle {
+			pointer-events: all;
+		}
+	}
+}
+
+.block-editor-grid-item-mover__move-button-container {
+	display: flex;
+	padding: 0;
+	border: none;
+	justify-content: center;
+
+	.block-editor-grid-item-mover-button {
+		width: $block-toolbar-height * 0.5;
+		min-width: 0 !important; // overrides default button width.
+		padding-left: 0;
+		padding-right: 0;
+
+		svg {
+			min-width: $grid-unit-30;
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-small;
+			height: $grid-unit-40;
+
+			// Position the focus rectangle.
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus,
+		&:focus:enabled,
+		&:focus::before {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible::before {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+}
+
+
+.block-editor-grid-item-mover__move-vertical-button-container {
+	display: flex;
+	position: relative;
+	@include break-small() {
+		flex-direction: column;
+		justify-content: space-around;
+
+		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
+			height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
+			width: 100%;
+			min-width: 0 !important; // overrides default button width.
+
+			// Focus style.
+			&::before {
+				height: calc(100% - 4px);
+			}
+		}
+
+		.block-editor-grid-item-mover-button.is-up-button svg,
+		.block-editor-grid-item-mover-button.is-down-button svg {
+			flex-shrink: 0;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+		}
+	}
+}
+
+.editor-collapsible-block-toolbar {
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			height: $grid-unit-50;
+			position: relative;
+			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+		}
+	}
+}
+
+.show-icon-labels {
+
+	.block-editor-grid-item-mover__move-horizontal-button-container {
+		position: relative;
+
+		&::before {
+			@include break-small() {
+				content: "";
+				height: 100%;
+				width: $border-width;
+				background: $gray-200;
+				position: absolute;
+				top: 0;
+			}
+
+			@include break-medium() {
+				background: $gray-900;
+			}
+		}
+
+		&.is-left {
+			padding-right: 6px;
+
+			&::before {
+				right: 0;
+			}
+		}
+
+		&.is-right {
+			padding-left: 6px;
+
+			&::before {
+				left: 0;
+			}
+		}
+	}
+
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		&::before {
+			@include break-small() {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-200;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+
+			@include break-medium {
+				background: $gray-900;
+			}
+		}
+	}
+
+	.block-editor-grid-item-mover-button {
+		white-space: nowrap;
+	}
+
+	.editor-collapsible-block-toolbar {
+		.block-editor-grid-item-mover__move-horizontal-button-container::before {
+			height: $grid-unit-30;
+			background: $gray-300;
+			top: $grid-unit-05;
+		}
+
+		.block-editor-grid-item-mover__move-vertical-button-container::before {
+			background: $gray-300;
+			width: calc(100% - #{$grid-unit-30});
+		}
+	}
+}
+
diff --git a/packages/block-editor/src/components/grid/use-get-number-of-blocks-before-cell.js b/packages/block-editor/src/components/grid/use-get-number-of-blocks-before-cell.js
new file mode 100644
index 00000000000000..11e991c432080d
--- /dev/null
+++ b/packages/block-editor/src/components/grid/use-get-number-of-blocks-before-cell.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export function useGetNumberOfBlocksBeforeCell( gridClientId, numColumns ) {
+	const { getBlockOrder, getBlockAttributes } = useSelect( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = ( column, row ) => {
+		const targetIndex = ( row - 1 ) * numColumns + column - 1;
+
+		let count = 0;
+		for ( const clientId of getBlockOrder( gridClientId ) ) {
+			const { columnStart, rowStart } =
+				getBlockAttributes( clientId ).style?.layout ?? {};
+			const cellIndex = ( rowStart - 1 ) * numColumns + columnStart - 1;
+			if ( cellIndex < targetIndex ) {
+				count++;
+			}
+		}
+		return count;
+	};
+
+	return getNumberOfBlocksBeforeCell;
+}
diff --git a/packages/block-editor/src/components/grid/use-grid-layout-sync.js b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
new file mode 100644
index 00000000000000..3e31530d4e526f
--- /dev/null
+++ b/packages/block-editor/src/components/grid/use-grid-layout-sync.js
@@ -0,0 +1,263 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { GridRect } from './utils';
+import { setImmutably } from '../../utils/object';
+
+export function useGridLayoutSync( { clientId: gridClientId } ) {
+	const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getBlockOrder } =
+				select( blockEditorStore );
+			const selectedBlock = select( blockEditorStore ).getSelectedBlock();
+			return {
+				gridLayout: getBlockAttributes( gridClientId ).layout ?? {},
+				blockOrder: getBlockOrder( gridClientId ),
+				selectedBlockLayout: selectedBlock?.attributes.style?.layout,
+			};
+		},
+		[ gridClientId ]
+	);
+
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const selectedBlockRect = useMemo(
+		() =>
+			selectedBlockLayout ? new GridRect( selectedBlockLayout ) : null,
+		[ selectedBlockLayout ]
+	);
+
+	const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+	const previousIsManualPlacement = usePrevious(
+		gridLayout.isManualPlacement
+	);
+	const previousBlockOrder = usePrevious( blockOrder );
+
+	useEffect( () => {
+		const updates = {};
+
+		if ( gridLayout.isManualPlacement ) {
+			const occupiedRects = [];
+
+			// Respect the position of blocks that already have a columnStart and rowStart value.
+			for ( const clientId of blockOrder ) {
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = getBlockAttributes( clientId ).style?.layout ?? {};
+				if ( ! columnStart || ! rowStart ) {
+					continue;
+				}
+				occupiedRects.push(
+					new GridRect( {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+					} )
+				);
+			}
+
+			// When in manual mode, ensure that every block has a columnStart and rowStart value.
+			for ( const clientId of blockOrder ) {
+				const attributes = getBlockAttributes( clientId );
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout ?? {};
+				if ( columnStart && rowStart ) {
+					continue;
+				}
+				const [ newColumnStart, newRowStart ] = placeBlock(
+					occupiedRects,
+					gridLayout.columnCount,
+					columnSpan,
+					rowSpan,
+					previouslySelectedBlockRect?.columnEnd,
+					previouslySelectedBlockRect?.rowEnd
+				);
+				occupiedRects.push(
+					new GridRect( {
+						columnStart: newColumnStart,
+						rowStart: newRowStart,
+						columnSpan,
+						rowSpan,
+					} )
+				);
+				updates[ clientId ] = {
+					style: {
+						...attributes.style,
+						layout: {
+							...attributes.style?.layout,
+							columnStart: newColumnStart,
+							rowStart: newRowStart,
+						},
+					},
+				};
+			}
+
+			// Ensure there's enough rows to fit all blocks.
+			const bottomMostRow = Math.max(
+				...occupiedRects.map( ( r ) => r.rowEnd )
+			);
+			if (
+				! gridLayout.rowCount ||
+				gridLayout.rowCount < bottomMostRow
+			) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: bottomMostRow,
+					},
+				};
+			}
+
+			// Unset grid layout attributes for blocks removed from the grid.
+			for ( const clientId of previousBlockOrder ?? [] ) {
+				if ( ! blockOrder.includes( clientId ) ) {
+					const rootClientId = getBlockRootClientId( clientId );
+
+					// Block was removed from the editor, so nothing to do.
+					if ( rootClientId === null ) {
+						continue;
+					}
+
+					// Check if the block is being moved to another grid.
+					// If so, do nothing and let the new grid parent handle
+					// the attributes.
+					const rootAttributes = getBlockAttributes( rootClientId );
+					if ( rootAttributes?.layout?.type === 'grid' ) {
+						continue;
+					}
+
+					const attributes = getBlockAttributes( clientId );
+					const {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+						...layout
+					} = attributes.style?.layout ?? {};
+
+					if ( columnStart || rowStart || columnSpan || rowSpan ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
+		} else {
+			// Remove all of the columnStart and rowStart values
+			// when switching from manual to auto mode,
+			if ( previousIsManualPlacement === true ) {
+				for ( const clientId of blockOrder ) {
+					const attributes = getBlockAttributes( clientId );
+					const { columnStart, rowStart, ...layout } =
+						attributes.style?.layout ?? {};
+					// Only update attributes if columnStart or rowStart are set.
+					if ( columnStart || rowStart ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
+
+			// Remove row styles in auto mode
+			if ( gridLayout.rowCount ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: undefined,
+					},
+				};
+			}
+		}
+
+		if ( Object.keys( updates ).length ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes(
+				Object.keys( updates ),
+				updates,
+				/* uniqueByBlock: */ true
+			);
+		}
+	}, [
+		// Actual deps to sync:
+		gridClientId,
+		gridLayout,
+		previousBlockOrder,
+		blockOrder,
+		previouslySelectedBlockRect,
+		previousIsManualPlacement,
+		// These won't change, but the linter thinks they might:
+		__unstableMarkNextChangeAsNotPersistent,
+		getBlockAttributes,
+		getBlockRootClientId,
+		updateBlockAttributes,
+	] );
+}
+
+/**
+ * @param {GridRect[]} occupiedRects
+ * @param {number}     gridColumnCount
+ * @param {number}     blockColumnSpan
+ * @param {number}     blockRowSpan
+ * @param {number?}    startColumn
+ * @param {number?}    startRow
+ */
+function placeBlock(
+	occupiedRects,
+	gridColumnCount,
+	blockColumnSpan,
+	blockRowSpan,
+	startColumn = 1,
+	startRow = 1
+) {
+	for ( let row = startRow; ; row++ ) {
+		for (
+			let column = row === startRow ? startColumn : 1;
+			column <= gridColumnCount;
+			column++
+		) {
+			const candidateRect = new GridRect( {
+				columnStart: column,
+				rowStart: row,
+				columnSpan: blockColumnSpan,
+				rowSpan: blockRowSpan,
+			} );
+			if (
+				! occupiedRects.some( ( r ) =>
+					r.intersectsRect( candidateRect )
+				)
+			) {
+				return [ column, row ];
+			}
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/grid/utils.js b/packages/block-editor/src/components/grid/utils.js
new file mode 100644
index 00000000000000..fc012c645f0916
--- /dev/null
+++ b/packages/block-editor/src/components/grid/utils.js
@@ -0,0 +1,178 @@
+export function range( start, length ) {
+	return Array.from( { length }, ( _, i ) => start + i );
+}
+
+export class GridRect {
+	constructor( {
+		columnStart,
+		rowStart,
+		columnEnd,
+		rowEnd,
+		columnSpan,
+		rowSpan,
+	} = {} ) {
+		this.columnStart = columnStart ?? 1;
+		this.rowStart = rowStart ?? 1;
+		if ( columnSpan !== undefined ) {
+			this.columnEnd = this.columnStart + columnSpan - 1;
+		} else {
+			this.columnEnd = columnEnd ?? this.columnStart;
+		}
+		if ( rowSpan !== undefined ) {
+			this.rowEnd = this.rowStart + rowSpan - 1;
+		} else {
+			this.rowEnd = rowEnd ?? this.rowStart;
+		}
+	}
+
+	get columnSpan() {
+		return this.columnEnd - this.columnStart + 1;
+	}
+
+	get rowSpan() {
+		return this.rowEnd - this.rowStart + 1;
+	}
+
+	contains( column, row ) {
+		return (
+			column >= this.columnStart &&
+			column <= this.columnEnd &&
+			row >= this.rowStart &&
+			row <= this.rowEnd
+		);
+	}
+
+	containsRect( rect ) {
+		return (
+			this.contains( rect.columnStart, rect.rowStart ) &&
+			this.contains( rect.columnEnd, rect.rowEnd )
+		);
+	}
+
+	intersectsRect( rect ) {
+		return (
+			this.columnStart <= rect.columnEnd &&
+			this.columnEnd >= rect.columnStart &&
+			this.rowStart <= rect.rowEnd &&
+			this.rowEnd >= rect.rowStart
+		);
+	}
+}
+
+export function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+/**
+ * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
+ * position in pixels of each grid track.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
+ *                          Only supports fixed sizes in pixels.
+ * @param {number} gap      The gap between grid tracks in pixels.
+ *
+ * @return {Array<{start: number, end: number}>} An array of objects with the start and end
+ *                                               position in pixels of each grid track.
+ */
+export function getGridTracks( template, gap ) {
+	const tracks = [];
+	for ( const size of template.split( ' ' ) ) {
+		const previousTrack = tracks[ tracks.length - 1 ];
+		const start = previousTrack ? previousTrack.end + gap : 0;
+		const end = start + parseFloat( size );
+		tracks.push( { start, end } );
+	}
+	return tracks;
+}
+
+/**
+ * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
+ * that position.
+ *
+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
+ *
+ * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
+ *                                                       position in pixels of each grid track.
+ * @param {number}                              position The position in pixels.
+ * @param {string}                              edge     The edge of the track to compare the
+ *                                                       position to. Either 'start' or 'end'.
+ *
+ * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
+ *                  is 1-based.
+ */
+export function getClosestTrack( tracks, position, edge = 'start' ) {
+	return tracks.reduce(
+		( closest, track, index ) =>
+			Math.abs( track[ edge ] - position ) <
+			Math.abs( tracks[ closest ][ edge ] - position )
+				? index
+				: closest,
+		0
+	);
+}
+
+export function getGridRect( gridElement, rect ) {
+	const columnGap = parseFloat( getComputedCSS( gridElement, 'column-gap' ) );
+	const rowGap = parseFloat( getComputedCSS( gridElement, 'row-gap' ) );
+	const gridColumnTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-columns' ),
+		columnGap
+	);
+	const gridRowTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-rows' ),
+		rowGap
+	);
+	const columnStart = getClosestTrack( gridColumnTracks, rect.left ) + 1;
+	const rowStart = getClosestTrack( gridRowTracks, rect.top ) + 1;
+	const columnEnd =
+		getClosestTrack( gridColumnTracks, rect.right, 'end' ) + 1;
+	const rowEnd = getClosestTrack( gridRowTracks, rect.bottom, 'end' ) + 1;
+	return new GridRect( {
+		columnStart,
+		columnEnd,
+		rowStart,
+		rowEnd,
+	} );
+}
+
+export function getGridItemRect( gridItemElement ) {
+	return getGridRect(
+		gridItemElement.parentElement,
+		new window.DOMRect(
+			gridItemElement.offsetLeft,
+			gridItemElement.offsetTop,
+			gridItemElement.offsetWidth,
+			gridItemElement.offsetHeight
+		)
+	);
+}
+
+export function getGridInfo( gridElement ) {
+	const gridTemplateColumns = getComputedCSS(
+		gridElement,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS(
+		gridElement,
+		'grid-template-rows'
+	);
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const numItems = numColumns * numRows;
+	return {
+		numColumns,
+		numRows,
+		numItems,
+		currentColor: getComputedCSS( gridElement, 'color' ),
+		style: {
+			gridTemplateColumns,
+			gridTemplateRows,
+			gap: getComputedCSS( gridElement, 'gap' ),
+			padding: getComputedCSS( gridElement, 'padding' ),
+		},
+	};
+}
diff --git a/packages/block-editor/src/components/height-control/README.md b/packages/block-editor/src/components/height-control/README.md
new file mode 100644
index 00000000000000..9be1741e8cdd8e
--- /dev/null
+++ b/packages/block-editor/src/components/height-control/README.md
@@ -0,0 +1,50 @@
+# Height Control
+
+The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
+
+_Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls.
+
+## Development guidelines
+
+### Usage
+
+Renders the markup for height control component, to be used in the block inspector.
+
+```jsx
+import { useState } from 'react';
+import { HeightControl } from '@wordpress/block-editor';
+
+const MyLineHeightControl = () => (
+	const [ value, setValue ] = useState();
+	<HeightControl
+		label={ 'My Height Control' }
+		onChange={ setValue }
+		value={ value }
+	/>
+);
+```
+
+### Props
+
+#### `value`
+
+-   **Type:** `String` or `Number` or `Undefined`
+
+The value of the current height.
+
+#### `onChange`
+
+-   **Type:** `Function`
+
+A callback function that handles the application of the height value.
+
+#### `label`
+
+-   **Type:** `String`
+-   **Default:** `'Height'`
+
+A label for the height control. This is useful when using the height control for a feature that is controlled in the same way as height, but requires a different label. For example, "Minimum height".
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
new file mode 100644
index 00000000000000..5d42e217776d6a
--- /dev/null
+++ b/packages/block-editor/src/components/height-control/index.js
@@ -0,0 +1,189 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	__experimentalSpacer as Spacer,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../use-settings';
+
+const RANGE_CONTROL_CUSTOM_SETTINGS = {
+	px: { max: 1000, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 50, step: 0.1 },
+	rem: { max: 50, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+/**
+ * HeightControl renders a linked unit control and range control for adjusting the height of a block.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
+ *
+ * @param {Object}                     props
+ * @param {?string}                    props.label    A label for the control.
+ * @param {( value: string ) => void } props.onChange Called when the height changes.
+ * @param {string}                     props.value    The current height value.
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function HeightControl( {
+	label = __( 'Height' ),
+	onChange,
+	value,
+} ) {
+	const customRangeValue = parseFloat( value );
+
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( value ),
+			[ value ]
+		)[ 1 ] ||
+		units[ 0 ]?.value ||
+		'px';
+
+	const handleSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		const [ currentValue, currentUnit ] =
+			parseQuantityAndUnitFromRawValue( value );
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && currentUnit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			onChange( ( currentValue / 16 ).toFixed( 2 ) + newUnit );
+		} else if (
+			[ 'em', 'rem' ].includes( currentUnit ) &&
+			newUnit === 'px'
+		) {
+			// Convert to pixel value assuming a root size of 16px.
+			onChange( Math.round( currentValue * 16 ) + newUnit );
+		} else if (
+			[
+				'%',
+				'vw',
+				'svw',
+				'lvw',
+				'dvw',
+				'vh',
+				'svh',
+				'lvh',
+				'dvh',
+				'vi',
+				'svi',
+				'lvi',
+				'dvi',
+				'vb',
+				'svb',
+				'lvb',
+				'dvb',
+				'vmin',
+				'svmin',
+				'lvmin',
+				'dvmin',
+				'vmax',
+				'svmax',
+				'lvmax',
+				'dvmax',
+			].includes( newUnit ) &&
+			currentValue > 100
+		) {
+			// When converting to `%` or viewport-relative units, cap the new value at 100.
+			onChange( 100 + newUnit );
+		}
+	};
+
+	return (
+		<fieldset className="block-editor-height-control">
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						value={ value }
+						units={ units }
+						onChange={ onChange }
+						onUnitChange={ handleUnitChange }
+						min={ 0 }
+						size="__unstable-large"
+						label={ label }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							__next40pxDefaultSize
+							value={ customRangeValue }
+							min={ 0 }
+							max={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.max ?? 100
+							}
+							step={
+								RANGE_CONTROL_CUSTOM_SETTINGS[ selectedUnit ]
+									?.step ?? 0.1
+							}
+							withInputField={ false }
+							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
+							label={ label }
+							hideLabelFromVision
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}
diff --git a/packages/block-editor/src/components/height-control/stories/index.story.js b/packages/block-editor/src/components/height-control/stories/index.story.js
new file mode 100644
index 00000000000000..f4b586a96b0e33
--- /dev/null
+++ b/packages/block-editor/src/components/height-control/stories/index.story.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeightControl from '../';
+
+export default {
+	component: HeightControl,
+	title: 'BlockEditor/HeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return <HeightControl onChange={ setValue } value={ value } { ...props } />;
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/height-control/style.scss b/packages/block-editor/src/components/height-control/style.scss
new file mode 100644
index 00000000000000..add0866835f767
--- /dev/null
+++ b/packages/block-editor/src/components/height-control/style.scss
@@ -0,0 +1,5 @@
+.block-editor-height-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
new file mode 100644
index 00000000000000..05bbdb25c2dc63
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -0,0 +1,69 @@
+.block-editor-iframe__body {
+	position: relative;
+}
+
+.block-editor-iframe__html {
+	transform-origin: top center;
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
+
+	&.zoom-out-animation {
+		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
+		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+		$overflow-behavior: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
+
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: calc(-1 * #{$scroll-top});
+		bottom: 0;
+		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
+		// and removing the scrollbar causes the content to shift.
+		overflow-y: $overflow-behavior;
+	}
+
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
+		$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+		// Apply an X translation to center the scaled content within the available space.
+		transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+		scale: $scale;
+		background-color: $gray-300;
+
+		// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+		// so we need to adjust the height of the content to match the scale by using negative margins.
+		$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
+		$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
+		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+		margin-bottom: calc(-1 * #{$total-height});
+
+		// Add the top/bottom frame size. We use scaling to account for the left/right, as
+		// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+		// of the content.
+		padding-top: calc(#{$frame-size} / #{$scale});
+		padding-bottom: calc(#{$frame-size} / #{$scale});
+
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+
+			> .is-root-container:not(.wp-block-post-content) {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
+			}
+		}
+
+		.wp-block[draggable] {
+			cursor: grab;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/iframe/get-compatibility-styles.js b/packages/block-editor/src/components/iframe/get-compatibility-styles.js
new file mode 100644
index 00000000000000..fd14e02a219bf6
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/get-compatibility-styles.js
@@ -0,0 +1,120 @@
+let compatibilityStyles = null;
+
+/**
+ * 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 getCompatibilityStyles() {
+	if ( compatibilityStyles ) {
+		return compatibilityStyles;
+	}
+
+	// Only memoize the result once on load, since these stylesheets should not
+	// change.
+	compatibilityStyles = 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;
+
+			// Stylesheet is added by another stylesheet. See
+			// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/ownerNode#notes.
+			if ( ownerNode === null ) {
+				return accumulator;
+			}
+
+			if ( ! cssRules ) {
+				return accumulator;
+			}
+
+			// Don't try to add core WP styles. We are responsible for adding
+			// them. This compatibility layer is only meant to add styles added
+			// by plugins or themes.
+			if ( ownerNode.id.startsWith( 'wp-' ) ) {
+				return accumulator;
+			}
+
+			// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
+			if ( ! ownerNode.id ) {
+				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 ) ) {
+				const isInline = ownerNode.tagName === 'STYLE';
+
+				if ( isInline ) {
+					// If the current target is inline,
+					// it could be a dependency of an existing stylesheet.
+					// Look for that dependency and add it BEFORE the current target.
+					const mainStylesCssId = ownerNode.id.replace(
+						'-inline-css',
+						'-css'
+					);
+					const mainStylesElement =
+						document.getElementById( mainStylesCssId );
+					if ( mainStylesElement ) {
+						accumulator.push( mainStylesElement.cloneNode( true ) );
+					}
+				}
+
+				accumulator.push( ownerNode.cloneNode( true ) );
+
+				if ( ! isInline ) {
+					// If the current target is not inline,
+					// we still look for inline styles that could be relevant for the current target.
+					// If they exist, add them AFTER the current target.
+					const inlineStylesCssId = ownerNode.id.replace(
+						'-css',
+						'-inline-css'
+					);
+					const inlineStylesElement =
+						document.getElementById( inlineStylesCssId );
+					if ( inlineStylesElement ) {
+						accumulator.push(
+							inlineStylesElement.cloneNode( true )
+						);
+					}
+				}
+			}
+
+			return accumulator;
+		},
+		[]
+	);
+
+	return compatibilityStyles;
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 25e36037ebac5b..751e940dd166cc 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,111 +11,51 @@ import {
 	createPortal,
 	forwardRef,
 	useMemo,
-	useReducer,
+	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	useResizeObserver,
-	useMergeRefs,
-	useRefEffect,
-} from '@wordpress/compose';
+import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
+import { getCompatibilityStyles } from './get-compatibility-styles';
+import { useScaleCanvas } from './use-scale-canvas';
+import { store as blockEditorStore } from '../../store';
 
-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;
-			}
+function bubbleEvent( event, Constructor, frame ) {
+	const init = {};
 
-			// 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 );
+	for ( const key in event ) {
+		init[ key ] = event[ key ];
+	}
 
-			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 ) );
+	// Check if the event is a MouseEvent generated within the iframe.
+	// If so, adjust the coordinates to be relative to the position of
+	// the iframe. This ensures that components such as Draggable
+	// receive coordinates relative to the window, instead of relative
+	// to the iframe. Without this, the Draggable event handler would
+	// result in components "jumping" position as soon as the user
+	// drags over the iframe.
+	if ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {
+		const rect = frame.getBoundingClientRect();
+		init.clientX += rect.left;
+		init.clientY += rect.top;
+	}
 
-				// Add inline styles belonging to the stylesheet.
-				const inlineCssId = ownerNode.id.replace(
-					'-css',
-					'-inline-css'
-				);
-				const inlineCssElement = document.getElementById( inlineCssId );
+	const newEvent = new Constructor( event.type, init );
+	if ( init.defaultPrevented ) {
+		newEvent.preventDefault();
+	}
+	const cancelled = ! frame.dispatchEvent( newEvent );
 
-				if ( inlineCssElement ) {
-					node.appendChild( inlineCssElement.cloneNode( true ) );
-				}
-			}
-		} );
-	}, [] );
+	if ( cancelled ) {
+		event.preventDefault();
+	}
 }
 
 /**
@@ -126,97 +66,78 @@ function useStylesCompatibility() {
  * should be context dependent, e.g. actions on blocks like Cmd+A should not
  * work globally outside the block editor.
  *
- * @param {Document} doc Document to attach listeners to.
+ * @param {Document} iframeDocument Document to attach listeners to.
  */
-function bubbleEvents( doc ) {
-	const { defaultView } = doc;
-	const { frameElement } = defaultView;
-
-	function bubbleEvent( event ) {
-		const prototype = Object.getPrototypeOf( event );
-		const constructorName = prototype.constructor.name;
-		const Constructor = window[ constructorName ];
-
-		const init = {};
-
-		for ( const key in event ) {
-			init[ key ] = event[ key ];
+function useBubbleEvents( iframeDocument ) {
+	return useRefEffect( () => {
+		const { defaultView } = iframeDocument;
+		if ( ! defaultView ) {
+			return;
 		}
-
-		if ( event instanceof defaultView.MouseEvent ) {
-			const rect = frameElement.getBoundingClientRect();
-			init.clientX += rect.left;
-			init.clientY += rect.top;
-		}
-
-		const newEvent = new Constructor( event.type, init );
-		const cancelled = ! frameElement.dispatchEvent( newEvent );
-
-		if ( cancelled ) {
-			event.preventDefault();
+		const { frameElement } = defaultView;
+		const html = iframeDocument.documentElement;
+		const eventTypes = [ 'dragover', 'mousemove' ];
+		const handlers = {};
+		for ( const name of eventTypes ) {
+			handlers[ name ] = ( event ) => {
+				const prototype = Object.getPrototypeOf( event );
+				const constructorName = prototype.constructor.name;
+				const Constructor = window[ constructorName ];
+				bubbleEvent( event, Constructor, frameElement );
+			};
+			html.addEventListener( name, handlers[ name ] );
 		}
-	}
-
-	const eventTypes = [ 'dragover' ];
-
-	for ( const name of eventTypes ) {
-		doc.addEventListener( name, bubbleEvent );
-	}
-}
 
-function useParsedAssets( html ) {
-	return useMemo( () => {
-		const doc = document.implementation.createHTMLDocument( '' );
-		doc.body.innerHTML = html;
-		return Array.from( doc.body.children );
-	}, [ html ] );
-}
-
-async function loadScript( head, { id, src } ) {
-	return new Promise( ( resolve, reject ) => {
-		const script = head.ownerDocument.createElement( 'script' );
-		script.id = id;
-		if ( src ) {
-			script.src = src;
-			script.onload = () => resolve();
-			script.onerror = () => reject();
-		} else {
-			resolve();
-		}
-		head.appendChild( script );
+		return () => {
+			for ( const name of eventTypes ) {
+				html.removeEventListener( name, handlers[ name ] );
+			}
+		};
 	} );
 }
 
-function Iframe(
-	{ contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
-	ref
-) {
-	const [ , forceRender ] = useReducer( () => ( {} ) );
+function Iframe( {
+	contentRef,
+	children,
+	tabIndex = 0,
+	scale = 1,
+	frameSize = 0,
+	readonly,
+	forwardedRef: ref,
+	title = __( 'Editor canvas' ),
+	...props
+} ) {
+	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+			isPreviewMode: settings.isPreviewMode,
+		};
+	}, [] );
+	const { styles = '', scripts = '' } = resolvedAssets;
+	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( assets?.styles );
-	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
+
 	const setRef = useRefEffect( ( node ) => {
+		node._load = () => {
+			setIframeDocument( node.contentDocument );
+		};
 		let iFrameDocument;
 		// Prevent the default browser action for files dropped outside of dropzones.
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
-		function setDocumentIfReady() {
+		function onLoad() {
 			const { contentDocument, ownerDocument } = node;
-			const { readyState, documentElement } = contentDocument;
+			const { documentElement } = contentDocument;
 			iFrameDocument = contentDocument;
 
-			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
-				return false;
-			}
+			documentElement.classList.add( 'block-editor-iframe__html' );
 
-			bubbleEvents( contentDocument );
-			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -232,8 +153,24 @@ function Iframe(
 			);
 
 			contentDocument.dir = ownerDocument.dir;
-			documentElement.removeChild( contentDocument.head );
-			documentElement.removeChild( contentDocument.body );
+
+			for ( const compatStyle of getCompatibilityStyles() ) {
+				if ( contentDocument.getElementById( compatStyle.id ) ) {
+					continue;
+				}
+
+				contentDocument.head.appendChild(
+					compatStyle.cloneNode( true )
+				);
+
+				if ( ! isPreviewMode ) {
+					// eslint-disable-next-line no-console
+					console.warn(
+						`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+						compatStyle
+					);
+				}
+			}
 
 			iFrameDocument.addEventListener(
 				'dragover',
@@ -245,14 +182,29 @@ function Iframe(
 				preventFileDropDefault,
 				false
 			);
-			return true;
+			// Prevent clicks on links from navigating away. Note that links
+			// inside `contenteditable` are already disabled by the browser, so
+			// this is for links in blocks outside of `contenteditable`.
+			iFrameDocument.addEventListener( 'click', ( event ) => {
+				if ( event.target.tagName === 'A' ) {
+					event.preventDefault();
+
+					// Appending a hash to the current URL will not reload the
+					// page. This is useful for e.g. footnotes.
+					const href = event.target.getAttribute( 'href' );
+					if ( href.startsWith( '#' ) ) {
+						iFrameDocument.defaultView.location.hash =
+							href.slice( 1 );
+					}
+				}
+			} );
 		}
 
-		// Document set with srcDoc is not immediately ready.
-		node.addEventListener( 'load', setDocumentIfReady );
+		node.addEventListener( 'load', onLoad );
 
 		return () => {
-			node.removeEventListener( 'load', setDocumentIfReady );
+			delete node._load;
+			node.removeEventListener( 'load', onLoad );
 			iFrameDocument?.removeEventListener(
 				'dragover',
 				preventFileDropDefault
@@ -264,114 +216,179 @@ function Iframe(
 		};
 	}, [] );
 
-	const headRef = useRefEffect( ( element ) => {
-		scripts
-			.reduce(
-				( promise, script ) =>
-					promise.then( () => loadScript( element, script ) ),
-				Promise.resolve()
-			)
-			.finally( () => {
-				// When script are loaded, re-render blocks to allow them
-				// to initialise.
-				forceRender();
-			} );
-	}, [] );
-	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-	const styleCompatibilityRef = useStylesCompatibility();
+	const {
+		contentResizeListener,
+		containerResizeListener,
+		isZoomedOut,
+		scaleContainerWidth,
+	} = useScaleCanvas( {
+		scale,
+		frameSize: parseInt( frameSize ),
+		iframeDocument,
+	} );
 
-	head = (
-		<>
-			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
-			{ styles.map(
-				( { tagName, href, id, rel, media, textContent } ) => {
-					const TagName = tagName.toLowerCase();
-
-					if ( TagName === 'style' ) {
-						return (
-							<TagName { ...{ id } } key={ id }>
-								{ textContent }
-							</TagName>
-						);
-					}
+	const disabledRef = useDisabled( { isDisabled: ! readonly } );
+	const bodyRef = useMergeRefs( [
+		useBubbleEvents( iframeDocument ),
+		contentRef,
+		clearerRef,
+		writingFlowRef,
+		disabledRef,
+	] );
+
+	// Correct doctype is required to enable rendering in standards
+	// mode. Also preload the styles to avoid a flash of unstyled
+	// content.
+	const html = `<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<base href="${ window.location.origin }">
+		<script>window.frameElement._load()</script>
+		<style>
+			html{
+				height: auto !important;
+				min-height: 100%;
+			}
+			/* Lowest specificity to not override global styles */
+			:where(body) {
+				margin: 0;
+				/* Default background color in case zoom out mode background
+				colors the html element */
+				background-color: white;
+			}
+		</style>
+		${ styles }
+		${ scripts }
+	</head>
+	<body>
+		<script>document.currentScript.parentElement.remove()</script>
+	</body>
+</html>`;
+
+	const [ src, cleanup ] = useMemo( () => {
+		const _src = URL.createObjectURL(
+			new window.Blob( [ html ], { type: 'text/html' } )
+		);
+		return [ _src, () => URL.revokeObjectURL( _src ) ];
+	}, [ html ] );
 
-					return (
-						<TagName { ...{ href, id, rel, media } } key={ id } />
-					);
-				}
-			) }
-			{ head }
-		</>
-	);
+	useEffect( () => cleanup, [ cleanup ] );
 
-	return (
+	// Make sure to not render the before and after focusable div elements in view
+	// mode. They're only needed to capture focus in edit mode.
+	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
+
+	const iframe = (
 		<>
-			{ tabIndex >= 0 && before }
+			{ shouldRenderFocusCaptureElements && before }
+			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<iframe
 				{ ...props }
+				style={ {
+					...props.style,
+					height: props.style?.height,
+					border: 0,
+				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }
-				// Correct doctype is required to enable rendering in standards mode
-				srcDoc="<!doctype html>"
-				title={ __( 'Editor canvas' ) }
+				// Correct doctype is required to enable rendering in standards
+				// mode. Also preload the styles to avoid a flash of unstyled
+				// content.
+				src={ src }
+				title={ title }
+				onKeyDown={ ( event ) => {
+					if ( props.onKeyDown ) {
+						props.onKeyDown( event );
+					}
+					// If the event originates from inside the iframe, it means
+					// it bubbled through the portal, but only with React
+					// events. We need to to bubble native events as well,
+					// though by doing so we also trigger another React event,
+					// so we need to stop the propagation of this event to avoid
+					// duplication.
+					if (
+						event.currentTarget.ownerDocument !==
+						event.target.ownerDocument
+					) {
+						// We should only stop propagation of the React event,
+						// the native event should further bubble inside the
+						// iframe to the document and window.
+						// Alternatively, we could consider redispatching the
+						// native event in the iframe.
+						const { stopPropagation } = event.nativeEvent;
+						event.nativeEvent.stopPropagation = () => {};
+						event.stopPropagation();
+						event.nativeEvent.stopPropagation = stopPropagation;
+						bubbleEvent(
+							event,
+							window.KeyboardEvent,
+							event.currentTarget
+						);
+					}
+				} }
 			>
 				{ iframeDocument &&
 					createPortal(
-						<>
-							<head ref={ headRef }>
-								{ head }
-								<style>
-									{ `html { transition: background 5s; ${
-										isZoomedOut
-											? 'background: #2f2f2f; transition: background 0s;'
-											: ''
-									} }` }
-								</style>
-							</head>
-							<body
-								ref={ bodyRef }
-								className={ classnames(
-									'block-editor-iframe__body',
-									BODY_CLASS_NAME,
-									...bodyClasses,
-									{
-										'is-zoomed-out': isZoomedOut,
-									}
-								) }
-								style={
-									isZoomedOut
-										? {
-												// This is the remaining percentage from the scaling down
-												// of the iframe body(`scale(0.45)`). We also need to subtract
-												// the body's bottom margin.
-												marginBottom: `-${
-													contentHeight * 0.55 - 100
-												}px`,
-										  }
-										: {}
-								}
-							>
-								{ 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>
-							</body>
-						</>,
+						// We want to prevent React events from bubbling throught the iframe
+						// we bubble these manually.
+						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+						<body
+							ref={ bodyRef }
+							className={ clsx(
+								'block-editor-iframe__body',
+								'editor-styles-wrapper',
+								...bodyClasses
+							) }
+						>
+							{ contentResizeListener }
+							<StyleProvider document={ iframeDocument }>
+								{ children }
+							</StyleProvider>
+						</body>,
 						iframeDocument.documentElement
 					) }
 			</iframe>
-			{ tabIndex >= 0 && after }
+			{ shouldRenderFocusCaptureElements && after }
 		</>
 	);
+
+	return (
+		<div className="block-editor-iframe__container">
+			{ containerResizeListener }
+			<div
+				className={ clsx(
+					'block-editor-iframe__scale-container',
+					isZoomedOut && 'is-zoomed-out'
+				) }
+				style={ {
+					'--wp-block-editor-iframe-zoom-out-scale-container-width':
+						isZoomedOut && `${ scaleContainerWidth }px`,
+				} }
+			>
+				{ iframe }
+			</div>
+		</div>
+	);
+}
+
+function IframeIfReady( props, ref ) {
+	const isInitialised = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().__internalIsInitialized,
+		[]
+	);
+
+	// We shouldn't render the iframe until the editor settings are initialised.
+	// The initial settings are needed to get the styles for the srcDoc, which
+	// cannot be changed after the iframe is mounted. srcDoc is used to to set
+	// the initial iframe HTML, which is required to avoid a flash of unstyled
+	// content.
+	if ( ! isInitialised ) {
+		return null;
+	}
+
+	return <Iframe { ...props } forwardedRef={ ref } />;
 }
 
-export default forwardRef( Iframe );
+export default forwardRef( IframeIfReady );
diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
new file mode 100644
index 00000000000000..b7374304b38e04
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/style.scss
@@ -0,0 +1,17 @@
+.block-editor-iframe__container {
+	width: 100%;
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container {
+	height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+	width: $scale-container-width;
+	// Position the iframe so that it is always aligned with the right side so that
+	// the scrollbar is always visible on the right side
+	position: absolute;
+	right: 0;
+}
diff --git a/packages/block-editor/src/components/iframe/use-scale-canvas.js b/packages/block-editor/src/components/iframe/use-scale-canvas.js
new file mode 100644
index 00000000000000..d2651a75ec86ca
--- /dev/null
+++ b/packages/block-editor/src/components/iframe/use-scale-canvas.js
@@ -0,0 +1,490 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
+
+/**
+ * @typedef {Object} TransitionState
+ * @property {number} scaleValue      Scale of the canvas.
+ * @property {number} frameSize       Size of the frame/offset around the canvas.
+ * @property {number} containerHeight containerHeight of the iframe.
+ * @property {number} scrollTop       ScrollTop of the iframe.
+ * @property {number} scrollHeight    ScrollHeight of the iframe.
+ */
+
+/**
+ * Calculate the scale of the canvas.
+ *
+ * @param {Object} options                     Object of options
+ * @param {number} options.frameSize           Size of the frame/offset around the canvas
+ * @param {number} options.containerWidth      Actual width of the canvas container
+ * @param {number} options.maxContainerWidth   Maximum width of the container to use for the scale calculation. This locks the canvas to a maximum width when zooming out.
+ * @param {number} options.scaleContainerWidth Width the of the container wrapping the canvas container
+ * @return {number} Scale value between 0 and/or equal to 1
+ */
+function calculateScale( {
+	frameSize,
+	containerWidth,
+	maxContainerWidth,
+	scaleContainerWidth,
+} ) {
+	return (
+		( Math.min( containerWidth, maxContainerWidth ) - frameSize * 2 ) /
+		scaleContainerWidth
+	);
+}
+
+/**
+ * Compute the next scrollHeight based on the transition states.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollHeight based on scale and frame value changes.
+ */
+function computeScrollHeightNext( transitionFrom, transitionTo ) {
+	const { scaleValue: prevScale, scrollHeight: prevScrollHeight } =
+		transitionFrom;
+	const { frameSize, scaleValue } = transitionTo;
+
+	return prevScrollHeight * ( scaleValue / prevScale ) + frameSize * 2;
+}
+
+/**
+ * Compute the next scrollTop position after scaling the iframe content.
+ *
+ * @param {TransitionState} transitionFrom Starting point of the transition
+ * @param {TransitionState} transitionTo   Ending state of the transition
+ * @return {number} Next scrollTop position after scaling the iframe content.
+ */
+function computeScrollTopNext( transitionFrom, transitionTo ) {
+	const {
+		containerHeight: prevContainerHeight,
+		frameSize: prevFrameSize,
+		scaleValue: prevScale,
+		scrollTop: prevScrollTop,
+	} = transitionFrom;
+	const { containerHeight, frameSize, scaleValue, scrollHeight } =
+		transitionTo;
+	// Step 0: Start with the current scrollTop.
+	let scrollTopNext = prevScrollTop;
+	// Step 1: Undo the effects of the previous scale and frame around the
+	// midpoint of the visible area.
+	scrollTopNext =
+		( scrollTopNext + prevContainerHeight / 2 - prevFrameSize ) /
+			prevScale -
+		prevContainerHeight / 2;
+
+	// Step 2: Apply the new scale and frame around the midpoint of the
+	// visible area.
+	scrollTopNext =
+		( scrollTopNext + containerHeight / 2 ) * scaleValue +
+		frameSize -
+		containerHeight / 2;
+
+	// Step 3: Handle an edge case so that you scroll to the top of the
+	// iframe if the top of the iframe content is visible in the container.
+	// The same edge case for the bottom is skipped because changing content
+	// makes calculating it impossible.
+	scrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;
+
+	// This is the scrollTop value if you are scrolled to the bottom of the
+	// iframe. We can't just let the browser handle it because we need to
+	// animate the scaling.
+	const maxScrollTop = scrollHeight - containerHeight;
+
+	// Step 4: Clamp the scrollTopNext between the minimum and maximum
+	// possible scrollTop positions. Round the value to avoid subpixel
+	// truncation by the browser which sometimes causes a 1px error.
+	return Math.round(
+		Math.min( Math.max( 0, scrollTopNext ), Math.max( 0, maxScrollTop ) )
+	);
+}
+
+/**
+ * Generate the keyframes to use for the zoom out animation.
+ *
+ * @param {TransitionState} transitionFrom Starting transition state.
+ * @param {TransitionState} transitionTo   Ending transition state.
+ * @return {Object[]} An array of keyframes to use for the animation.
+ */
+function getAnimationKeyframes( transitionFrom, transitionTo ) {
+	const {
+		scaleValue: prevScale,
+		frameSize: prevFrameSize,
+		scrollTop,
+	} = transitionFrom;
+	const { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;
+
+	return [
+		{
+			translate: `0 0`,
+			scale: prevScale,
+			paddingTop: `${ prevFrameSize / prevScale }px`,
+			paddingBottom: `${ prevFrameSize / prevScale }px`,
+		},
+		{
+			translate: `0 ${ scrollTop - scrollTopNext }px`,
+			scale: scaleValue,
+			paddingTop: `${ frameSize / scaleValue }px`,
+			paddingBottom: `${ frameSize / scaleValue }px`,
+		},
+	];
+}
+
+/**
+ * @typedef {Object} ScaleCanvasResult
+ * @property {boolean} isZoomedOut             A boolean indicating if the canvas is zoomed out.
+ * @property {number}  scaleContainerWidth     The width of the container used to calculate the scale.
+ * @property {Object}  contentResizeListener   A resize observer for the content.
+ * @property {Object}  containerResizeListener A resize observer for the container.
+ */
+
+/**
+ * Handles scaling the canvas for the zoom out mode and animating between
+ * the states.
+ *
+ * @param {Object}        options                   Object of options.
+ * @param {number}        options.frameSize         Size of the frame around the content.
+ * @param {Document}      options.iframeDocument    Document of the iframe.
+ * @param {number}        options.maxContainerWidth Max width of the canvas to use as the starting scale point. Defaults to 750.
+ * @param {number|string} options.scale             Scale of the canvas. Can be an decimal between 0 and 1, 1, or 'auto-scaled'.
+ * @return {ScaleCanvasResult} Properties of the result.
+ */
+export function useScaleCanvas( {
+	frameSize,
+	iframeDocument,
+	maxContainerWidth = 750,
+	scale,
+} ) {
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
+	const [
+		containerResizeListener,
+		{ width: containerWidth, height: containerHeight },
+	] = useResizeObserver();
+
+	const initialContainerWidthRef = useRef( 0 );
+	const isZoomedOut = scale !== 1;
+	const prefersReducedMotion = useReducedMotion();
+	const isAutoScaled = scale === 'auto-scaled';
+	// Track if the animation should start when the useEffect runs.
+	const startAnimationRef = useRef( false );
+	// Track the animation so we know if we have an animation running,
+	// and can cancel it, reverse it, call a finish event, etc.
+	const animationRef = useRef( null );
+
+	useEffect( () => {
+		if ( ! isZoomedOut ) {
+			initialContainerWidthRef.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
+
+	const scaleContainerWidth = Math.max(
+		initialContainerWidthRef.current,
+		containerWidth
+	);
+
+	const scaleValue = isAutoScaled
+		? calculateScale( {
+				frameSize,
+				containerWidth,
+				maxContainerWidth,
+				scaleContainerWidth,
+		  } )
+		: scale;
+
+	/**
+	 * The starting transition state for the zoom out animation.
+	 * @type {import('react').RefObject<TransitionState>}
+	 */
+	const transitionFromRef = useRef( {
+		scaleValue,
+		frameSize,
+		containerHeight: 0,
+		scrollTop: 0,
+		scrollHeight: 0,
+	} );
+
+	/**
+	 * The ending transition state for the zoom out animation.
+	 * @type {import('react').RefObject<TransitionState>}
+	 */
+	const transitionToRef = useRef( {
+		scaleValue,
+		frameSize,
+		containerHeight: 0,
+		scrollTop: 0,
+		scrollHeight: 0,
+	} );
+
+	/**
+	 * Start the zoom out animation. This sets the necessary CSS variables
+	 * for animating the canvas and returns the Animation object.
+	 *
+	 * @return {Animation} The animation object for the zoom out animation.
+	 */
+	const startZoomOutAnimation = useCallback( () => {
+		const { scrollTop } = transitionFromRef.current;
+		const { scrollTop: scrollTopNext } = transitionToRef.current;
+
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top',
+			`${ scrollTop }px`
+		);
+
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top-next',
+			`${ scrollTopNext }px`
+		);
+
+		// If the container has a scrolllbar, force a scrollbar to prevent the content from shifting while animating.
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior',
+			transitionFromRef.current.scrollHeight ===
+				transitionFromRef.current.containerHeight
+				? 'auto'
+				: 'scroll'
+		);
+
+		iframeDocument.documentElement.classList.add( 'zoom-out-animation' );
+
+		return iframeDocument.documentElement.animate(
+			getAnimationKeyframes(
+				transitionFromRef.current,
+				transitionToRef.current
+			),
+			{
+				easing: 'cubic-bezier(0.46, 0.03, 0.52, 0.96)',
+				duration: 400,
+			}
+		);
+	}, [ iframeDocument ] );
+
+	/**
+	 * Callback when the zoom out animation is finished.
+	 * - Cleans up animations refs.
+	 * - Adds final CSS vars for scale and frame size to preserve the state.
+	 * - Removes the 'zoom-out-animation' class (which has the fixed positioning).
+	 * - Sets the final scroll position after the canvas is no longer in fixed position.
+	 * - Removes CSS vars related to the animation.
+	 * - Sets the transitionFrom to the transitionTo state to be ready for the next animation.
+	 */
+	const finishZoomOutAnimation = useCallback( () => {
+		startAnimationRef.current = false;
+		animationRef.current = null;
+
+		// Add our final scale and frame size now that the animation is done.
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-scale',
+			transitionToRef.current.scaleValue
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-frame-size',
+			`${ transitionToRef.current.frameSize }px`
+		);
+
+		iframeDocument.documentElement.classList.remove( 'zoom-out-animation' );
+
+		// Set the final scroll position that was just animated to.
+		// Disable reason: Eslint isn't smart enough to know that this is a
+		// DOM element. https://github.com/facebook/react/issues/31483
+		// eslint-disable-next-line react-compiler/react-compiler
+		iframeDocument.documentElement.scrollTop =
+			transitionToRef.current.scrollTop;
+
+		iframeDocument.documentElement.style.removeProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top'
+		);
+		iframeDocument.documentElement.style.removeProperty(
+			'--wp-block-editor-iframe-zoom-out-scroll-top-next'
+		);
+		iframeDocument.documentElement.style.removeProperty(
+			'--wp-block-editor-iframe-zoom-out-overflow-behavior'
+		);
+
+		// Update previous values.
+		transitionFromRef.current = transitionToRef.current;
+	}, [ iframeDocument ] );
+
+	const previousIsZoomedOut = useRef( false );
+
+	/**
+	 * Runs when zoom out mode is toggled, and sets the startAnimation flag
+	 * so the animation will start when the next useEffect runs. We _only_
+	 * want to animate when the zoom out mode is toggled, not when the scale
+	 * changes due to the container resizing.
+	 */
+	useEffect( () => {
+		const trigger =
+			iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+
+		previousIsZoomedOut.current = isZoomedOut;
+
+		if ( ! trigger ) {
+			return;
+		}
+
+		startAnimationRef.current = true;
+
+		if ( ! isZoomedOut ) {
+			return;
+		}
+
+		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+		return () => {
+			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
+		};
+	}, [ iframeDocument, isZoomedOut ] );
+
+	/**
+	 * This handles:
+	 * 1. Setting the correct scale and vars of the canvas when zoomed out
+	 * 2. If zoom out mode has been toggled, runs the animation of zooming in/out
+	 */
+	useEffect( () => {
+		if ( ! iframeDocument ) {
+			return;
+		}
+
+		// We need to update the appropriate scale to exit from. If sidebars have been opened since setting the
+		// original scale, we will snap to a much smaller scale due to the scale container immediately changing sizes when exiting.
+		if ( isAutoScaled && transitionFromRef.current.scaleValue !== 1 ) {
+			// We use containerWidth as the divisor, as scaleContainerWidth will always match the containerWidth when
+			// exiting.
+			transitionFromRef.current.scaleValue = calculateScale( {
+				frameSize: transitionFromRef.current.frameSize,
+				containerWidth,
+				maxContainerWidth,
+				scaleContainerWidth: containerWidth,
+			} );
+		}
+
+		if ( scaleValue < 1 ) {
+			// If we are not going to animate the transition, set the scale and frame size directly.
+			// If we are animating, these values will be set when the animation is finished.
+			// Example: Opening sidebars that reduce the scale of the canvas, but we don't want to
+			// animate the transition.
+			if ( ! startAnimationRef.current ) {
+				iframeDocument.documentElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-scale',
+					scaleValue
+				);
+				iframeDocument.documentElement.style.setProperty(
+					'--wp-block-editor-iframe-zoom-out-frame-size',
+					`${ frameSize }px`
+				);
+			}
+
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-content-height',
+				`${ contentHeight }px`
+			);
+
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-inner-height',
+				`${ containerHeight }px`
+			);
+
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-container-width',
+				`${ containerWidth }px`
+			);
+			iframeDocument.documentElement.style.setProperty(
+				'--wp-block-editor-iframe-zoom-out-scale-container-width',
+				`${ scaleContainerWidth }px`
+			);
+		}
+
+		/**
+		 * Handle the zoom out animation:
+		 *
+		 * - Get the current scrollTop position.
+		 * - Calculate where the same scroll position is after scaling.
+		 * - Apply fixed positioning to the canvas with a transform offset
+		 *   to keep the canvas centered.
+		 * - Animate the scale and padding to the new scale and frame size.
+		 * - After the animation is complete, remove the fixed positioning
+		 *   and set the scroll position that keeps everything centered.
+		 */
+		if ( startAnimationRef.current ) {
+			// Don't allow a new transition to start again unless it was started by the zoom out mode changing.
+			startAnimationRef.current = false;
+
+			/**
+			 * If we already have an animation running, reverse it.
+			 */
+			if ( animationRef.current ) {
+				animationRef.current.reverse();
+				// Swap the transition to/from refs so that we set the correct values when
+				// finishZoomOutAnimation runs.
+				const tempTransitionFrom = transitionFromRef.current;
+				const tempTransitionTo = transitionToRef.current;
+				transitionFromRef.current = tempTransitionTo;
+				transitionToRef.current = tempTransitionFrom;
+			} else {
+				/**
+				 * Start a new zoom animation.
+				 */
+
+				// We can't trust the set value from contentHeight, as it was measured
+				// before the zoom out mode was changed. After zoom out mode is changed,
+				// appenders may appear or disappear, so we need to get the height from
+				// the iframe at this point when we're about to animate the zoom out.
+				// The iframe scrollTop, scrollHeight, and clientHeight will all be
+				// the most accurate.
+				transitionFromRef.current.scrollTop =
+					iframeDocument.documentElement.scrollTop;
+				transitionFromRef.current.scrollHeight =
+					iframeDocument.documentElement.scrollHeight;
+				// Use containerHeight, as it's the previous container height before the zoom out animation starts.
+				transitionFromRef.current.containerHeight = containerHeight;
+
+				transitionToRef.current = {
+					scaleValue,
+					frameSize,
+					containerHeight:
+						iframeDocument.documentElement.clientHeight, // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
+				};
+
+				transitionToRef.current.scrollHeight = computeScrollHeightNext(
+					transitionFromRef.current,
+					transitionToRef.current
+				);
+				transitionToRef.current.scrollTop = computeScrollTopNext(
+					transitionFromRef.current,
+					transitionToRef.current
+				);
+
+				animationRef.current = startZoomOutAnimation();
+
+				// If the user prefers reduced motion, finish the animation immediately and set the final state.
+				if ( prefersReducedMotion ) {
+					finishZoomOutAnimation();
+				} else {
+					animationRef.current.onfinish = finishZoomOutAnimation;
+				}
+			}
+		}
+	}, [
+		startZoomOutAnimation,
+		finishZoomOutAnimation,
+		prefersReducedMotion,
+		isAutoScaled,
+		scaleValue,
+		frameSize,
+		iframeDocument,
+		contentHeight,
+		containerWidth,
+		containerHeight,
+		maxContainerWidth,
+		scaleContainerWidth,
+	] );
+
+	return {
+		isZoomedOut,
+		scaleContainerWidth,
+		contentResizeListener,
+		containerResizeListener,
+	};
+}
diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
index bc4ce5b904c324..b8432d1669f285 100644
--- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
@@ -8,45 +8,80 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { useSettings } from '../use-settings';
 import { POPOVER_PROPS } from './constants';
 import { useImageEditingContext } from './context';
 
-function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
+function AspectRatioGroup( {
+	aspectRatios,
+	isDisabled,
+	label,
+	onClick,
+	value,
+} ) {
 	return (
 		<MenuGroup label={ label }>
-			{ aspectRatios.map( ( { title, aspect } ) => (
+			{ aspectRatios.map( ( { name, slug, ratio } ) => (
 				<MenuItem
-					key={ aspect }
+					key={ slug }
 					disabled={ isDisabled }
 					onClick={ () => {
-						onClick( aspect );
+						onClick( ratio );
 					} }
 					role="menuitemradio"
-					isSelected={ aspect === value }
-					icon={ aspect === value ? check : undefined }
+					isSelected={ ratio === value }
+					icon={ ratio === value ? check : undefined }
 				>
-					{ title }
+					{ name }
 				</MenuItem>
 			) ) }
 		</MenuGroup>
 	);
 }
 
+export function ratioToNumber( str ) {
+	// TODO: support two-value aspect ratio?
+	// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
+	const [ a, b, ...rest ] = str.split( '/' ).map( Number );
+	if (
+		a <= 0 ||
+		b <= 0 ||
+		Number.isNaN( a ) ||
+		Number.isNaN( b ) ||
+		rest.length
+	) {
+		return NaN;
+	}
+	return b ? a / b : a;
+}
+
+function presetRatioAsNumber( { ratio, ...rest } ) {
+	return {
+		ratio: ratioToNumber( ratio ),
+		...rest,
+	};
+}
+
 export default function AspectRatioDropdown( { toggleProps } ) {
 	const { isInProgress, aspect, setAspect, defaultAspect } =
 		useImageEditingContext();
 
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
 	return (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ toggleProps }
-			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (
 				<>
-					<AspectGroup
+					<AspectRatioGroup
 						isDisabled={ isInProgress }
 						onClick={ ( newAspect ) => {
 							setAspect( newAspect );
@@ -54,70 +89,59 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
+							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
-								title: __( 'Original' ),
+								slug: 'original',
+								name: __( 'Original' ),
 								aspect: defaultAspect,
 							},
-							{
-								title: __( 'Square' ),
-								aspect: 1,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Landscape' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '16:10' ),
-								aspect: 16 / 10,
-							},
-							{
-								title: __( '16:9' ),
-								aspect: 16 / 9,
-							},
-							{
-								title: __( '4:3' ),
-								aspect: 4 / 3,
-							},
-							{
-								title: __( '3:2' ),
-								aspect: 3 / 2,
-							},
-						] }
-					/>
-					<AspectGroup
-						label={ __( 'Portrait' ) }
-						isDisabled={ isInProgress }
-						onClick={ ( newAspect ) => {
-							setAspect( newAspect );
-							onClose();
-						} }
-						value={ aspect }
-						aspectRatios={ [
-							{
-								title: __( '10:16' ),
-								aspect: 10 / 16,
-							},
-							{
-								title: __( '9:16' ),
-								aspect: 9 / 16,
-							},
-							{
-								title: __( '3:4' ),
-								aspect: 3 / 4,
-							},
-							{
-								title: __( '2:3' ),
-								aspect: 2 / 3,
-							},
+							...( showDefaultRatios
+								? defaultRatios
+										.map( presetRatioAsNumber )
+										.filter( ( { ratio } ) => ratio === 1 )
+								: [] ),
 						] }
 					/>
+					{ themeRatios?.length > 0 && (
+						<AspectRatioGroup
+							label={ __( 'Theme' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ themeRatios }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Landscape' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio > 1 ) }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Portrait' ) }
+							isDisabled={ isInProgress }
+							onClick={ ( newAspect ) => {
+								setAspect( newAspect );
+								onClose();
+							} }
+							value={ aspect }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio < 1 ) }
+						/>
+					) }
 				</>
 			) }
 		</DropdownMenu>
diff --git a/packages/block-editor/src/components/image-editor/constants.js b/packages/block-editor/src/components/image-editor/constants.js
index b2419aa07b7ce7..78ba8969a4fd5b 100644
--- a/packages/block-editor/src/components/image-editor/constants.js
+++ b/packages/block-editor/src/components/image-editor/constants.js
@@ -1,6 +1,5 @@
 export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
diff --git a/packages/block-editor/src/components/image-editor/context.js b/packages/block-editor/src/components/image-editor/context.js
index ed11045c819da9..fc81c349d8d014 100644
--- a/packages/block-editor/src/components/image-editor/context.js
+++ b/packages/block-editor/src/components/image-editor/context.js
@@ -18,19 +18,15 @@ export default function ImageEditingProvider( {
 	url,
 	naturalWidth,
 	naturalHeight,
-	isEditing,
 	onFinishEditing,
 	onSaveImage,
 	children,
 } ) {
-	const transformImage = useTransformImage(
-		{
-			url,
-			naturalWidth,
-			naturalHeight,
-		},
-		isEditing
-	);
+	const transformImage = useTransformImage( {
+		url,
+		naturalWidth,
+		naturalHeight,
+	} );
 
 	const saveImage = useSaveImage( {
 		id,
diff --git a/packages/block-editor/src/components/image-editor/cropper.js b/packages/block-editor/src/components/image-editor/cropper.js
index ed0be17a09b154..d5b0c3b03586e5 100644
--- a/packages/block-editor/src/components/image-editor/cropper.js
+++ b/packages/block-editor/src/components/image-editor/cropper.js
@@ -2,12 +2,13 @@
  * External dependencies
  */
 import Cropper from 'react-easy-crop';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,7 +21,6 @@ export default function ImageCropper( {
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
 	borderProps,
@@ -36,6 +36,8 @@ export default function ImageCropper( {
 		setZoom,
 		rotation,
 	} = useImageEditingContext();
+	const [ contentResizeListener, { width: clientWidth } ] =
+		useResizeObserver();
 
 	let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;
 
@@ -43,9 +45,9 @@ export default function ImageCropper( {
 		editedHeight = ( clientWidth * naturalWidth ) / naturalHeight;
 	}
 
-	return (
+	const area = (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'wp-block-image__crop-area',
 				borderProps?.className,
 				{
@@ -66,7 +68,9 @@ export default function ImageCropper( {
 				crop={ position }
 				zoom={ zoom / 100 }
 				aspect={ aspect }
-				onCropChange={ setPosition }
+				onCropChange={ ( pos ) => {
+					setPosition( pos );
+				} }
 				onCropComplete={ ( newCropPercent ) => {
 					setCrop( newCropPercent );
 				} }
@@ -77,4 +81,11 @@ export default function ImageCropper( {
 			{ isInProgress && <Spinner /> }
 		</div>
 	);
+
+	return (
+		<>
+			{ contentResizeListener }
+			{ area }
+		</>
+	);
 }
diff --git a/packages/block-editor/src/components/image-editor/index.js b/packages/block-editor/src/components/image-editor/index.js
index 554220ad70dd2f..133f79732bdbd5 100644
--- a/packages/block-editor/src/components/image-editor/index.js
+++ b/packages/block-editor/src/components/image-editor/index.js
@@ -6,30 +6,39 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 /**
  * Internal dependencies
  */
+import AspectRatioDropdown from './aspect-ratio-dropdown';
 import BlockControls from '../block-controls';
+import ImageEditingProvider from './context';
 import Cropper from './cropper';
 import ZoomDropdown from './zoom-dropdown';
-import AspectRatioDropdown from './aspect-ratio-dropdown';
 import RotationButton from './rotation-button';
 import FormControls from './form-controls';
 
 export default function ImageEditor( {
+	id,
 	url,
 	width,
 	height,
-	clientWidth,
 	naturalHeight,
 	naturalWidth,
+	onSaveImage,
+	onFinishEditing,
 	borderProps,
 } ) {
 	return (
-		<>
+		<ImageEditingProvider
+			id={ id }
+			url={ url }
+			naturalWidth={ naturalWidth }
+			naturalHeight={ naturalHeight }
+			onSaveImage={ onSaveImage }
+			onFinishEditing={ onFinishEditing }
+		>
 			<Cropper
 				borderProps={ borderProps }
 				url={ url }
 				width={ width }
 				height={ height }
-				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 			/>
@@ -47,8 +56,6 @@ export default function ImageEditor( {
 					<FormControls />
 				</ToolbarGroup>
 			</BlockControls>
-		</>
+		</ImageEditingProvider>
 	);
 }
-
-export { default as ImageEditingProvider } from './context';
diff --git a/packages/block-editor/src/components/image-editor/test/index.js b/packages/block-editor/src/components/image-editor/test/index.js
new file mode 100644
index 00000000000000..9f0f3491667a8d
--- /dev/null
+++ b/packages/block-editor/src/components/image-editor/test/index.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { ratioToNumber } from '../aspect-ratio-dropdown';
+
+test( 'ratioToNumber', () => {
+	expect( ratioToNumber( '1/1' ) ).toBe( 1 );
+	expect( ratioToNumber( '1' ) ).toBe( 1 );
+	expect( ratioToNumber( '11/11' ) ).toBe( 1 );
+	expect( ratioToNumber( '16/9' ) ).toBe( 16 / 9 );
+	expect( ratioToNumber( '4/3' ) ).toBe( 4 / 3 );
+	expect( ratioToNumber( '3/2' ) ).toBe( 3 / 2 );
+	expect( ratioToNumber( '2/1' ) ).toBe( 2 );
+	expect( ratioToNumber( '1/2' ) ).toBe( 1 / 2 );
+	expect( ratioToNumber( '2/3' ) ).toBe( 2 / 3 );
+	expect( ratioToNumber( '3/4' ) ).toBe( 3 / 4 );
+	expect( ratioToNumber( '9/16' ) ).toBe( 9 / 16 );
+	expect( ratioToNumber( '1/16' ) ).toBe( 1 / 16 );
+	expect( ratioToNumber( '16/1' ) ).toBe( 16 );
+	expect( ratioToNumber( '1/9' ) ).toBe( 1 / 9 );
+	expect( ratioToNumber( 'auto' ) ).toBe( NaN );
+} );
diff --git a/packages/block-editor/src/components/image-editor/use-save-image.js b/packages/block-editor/src/components/image-editor/use-save-image.js
index 79c0bea11fba14..980ac9b8b1123c 100644
--- a/packages/block-editor/src/components/image-editor/use-save-image.js
+++ b/packages/block-editor/src/components/image-editor/use-save-image.js
@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+// Disable Reason: Needs to be refactored.
+// eslint-disable-next-line no-restricted-imports
 import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
@@ -8,58 +10,96 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
+const messages = {
+	crop: __( 'Image cropped.' ),
+	rotate: __( 'Image rotated.' ),
+	cropAndRotate: __( 'Image cropped and rotated.' ),
+};
+
 export default function useSaveImage( {
 	crop,
 	rotation,
-	height,
-	width,
-	aspect,
 	url,
 	id,
 	onSaveImage,
 	onFinishEditing,
 } ) {
-	const { createErrorNotice } = useDispatch( noticesStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
 	const [ isInProgress, setIsInProgress ] = useState( false );
 
 	const cancel = useCallback( () => {
 		setIsInProgress( false );
 		onFinishEditing();
-	}, [ setIsInProgress, onFinishEditing ] );
+	}, [ onFinishEditing ] );
 
 	const apply = useCallback( () => {
 		setIsInProgress( true );
 
-		let attrs = {};
+		const modifiers = [];
+
+		if ( rotation > 0 ) {
+			modifiers.push( {
+				type: 'rotate',
+				args: {
+					angle: rotation,
+				},
+			} );
+		}
 
 		// The crop script may return some very small, sub-pixel values when the image was not cropped.
 		// Crop only when the new size has changed by more than 0.1%.
 		if ( crop.width < 99.9 || crop.height < 99.9 ) {
-			attrs = crop;
+			modifiers.push( {
+				type: 'crop',
+				args: {
+					left: crop.x,
+					top: crop.y,
+					width: crop.width,
+					height: crop.height,
+				},
+			} );
 		}
 
-		if ( rotation > 0 ) {
-			attrs.rotation = rotation;
+		if ( modifiers.length === 0 ) {
+			// No changes to apply.
+			setIsInProgress( false );
+			onFinishEditing();
+			return;
 		}
 
-		attrs.src = url;
+		const modifierType =
+			modifiers.length === 1 ? modifiers[ 0 ].type : 'cropAndRotate';
 
 		apiFetch( {
 			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',
-			data: attrs,
+			data: { src: url, modifiers },
 		} )
 			.then( ( response ) => {
 				onSaveImage( {
 					id: response.id,
 					url: response.source_url,
-					height: height && width ? width / aspect : undefined,
+				} );
+				createSuccessNotice( messages[ modifierType ], {
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								onSaveImage( {
+									id,
+									url,
+								} );
+							},
+						},
+					],
 				} );
 			} )
 			.catch( ( error ) => {
 				createErrorNotice(
 					sprintf(
-						/* translators: 1. Error message */
+						/* translators: %s: Error message. */
 						__( 'Could not edit image. %s' ),
 						stripHTML( error.message )
 					),
@@ -74,16 +114,13 @@ export default function useSaveImage( {
 				onFinishEditing();
 			} );
 	}, [
-		setIsInProgress,
 		crop,
 		rotation,
-		height,
-		width,
-		aspect,
+		id,
 		url,
 		onSaveImage,
 		createErrorNotice,
-		setIsInProgress,
+		createSuccessNotice,
 		onFinishEditing,
 	] );
 
diff --git a/packages/block-editor/src/components/image-editor/use-transform-image.js b/packages/block-editor/src/components/image-editor/use-transform-image.js
index 885ae8894c0920..b5932506b36867 100644
--- a/packages/block-editor/src/components/image-editor/use-transform-image.js
+++ b/packages/block-editor/src/components/image-editor/use-transform-image.js
@@ -1,51 +1,39 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-function useTransformState( { url, naturalWidth, naturalHeight } ) {
+export default function useTransformImage( {
+	url,
+	naturalWidth,
+	naturalHeight,
+} ) {
 	const [ editedUrl, setEditedUrl ] = useState();
 	const [ crop, setCrop ] = useState();
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ zoom, setZoom ] = useState();
-	const [ rotation, setRotation ] = useState();
-	const [ aspect, setAspect ] = useState();
-	const [ defaultAspect, setDefaultAspect ] = useState();
-
-	const initializeTransformValues = useCallback( () => {
-		setPosition( { x: 0, y: 0 } );
-		setZoom( 100 );
-		setRotation( 0 );
-		setAspect( naturalWidth / naturalHeight );
-		setDefaultAspect( naturalWidth / naturalHeight );
-	}, [
-		naturalWidth,
-		naturalHeight,
-		setPosition,
-		setZoom,
-		setRotation,
-		setAspect,
-		setDefaultAspect,
-	] );
+	const [ zoom, setZoom ] = useState( 100 );
+	const [ rotation, setRotation ] = useState( 0 );
+	const defaultAspect = naturalWidth / naturalHeight;
+	const [ aspect, setAspect ] = useState( defaultAspect );
 
 	const rotateClockwise = useCallback( () => {
 		const angle = ( rotation + 90 ) % 360;
 
-		let naturalAspectRatio = naturalWidth / naturalHeight;
+		let naturalAspectRatio = defaultAspect;
 
 		if ( rotation % 180 === 90 ) {
-			naturalAspectRatio = naturalHeight / naturalWidth;
+			naturalAspectRatio = 1 / defaultAspect;
 		}
 
 		if ( angle === 0 ) {
 			setEditedUrl();
 			setRotation( angle );
-			setAspect( naturalWidth / naturalHeight );
-			setPosition( {
-				x: -( position.y * naturalAspectRatio ),
-				y: position.x * naturalAspectRatio,
-			} );
+			setAspect( defaultAspect );
+			setPosition( ( prevPosition ) => ( {
+				x: -( prevPosition.y * naturalAspectRatio ),
+				y: prevPosition.x * naturalAspectRatio,
+			} ) );
 			return;
 		}
 
@@ -81,10 +69,10 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 				setEditedUrl( URL.createObjectURL( blob ) );
 				setRotation( angle );
 				setAspect( canvas.width / canvas.height );
-				setPosition( {
-					x: -( position.y * naturalAspectRatio ),
-					y: position.x * naturalAspectRatio,
-				} );
+				setPosition( ( prevPosition ) => ( {
+					x: -( prevPosition.y * naturalAspectRatio ),
+					y: prevPosition.x * naturalAspectRatio,
+				} ) );
 			} );
 		}
 
@@ -100,15 +88,7 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 		if ( typeof imgCrossOrigin === 'string' ) {
 			el.crossOrigin = imgCrossOrigin;
 		}
-	}, [
-		rotation,
-		naturalWidth,
-		naturalHeight,
-		setEditedUrl,
-		setRotation,
-		setAspect,
-		setPosition,
-	] );
+	}, [ rotation, defaultAspect, url ] );
 
 	return useMemo(
 		() => ( {
@@ -126,37 +106,16 @@ function useTransformState( { url, naturalWidth, naturalHeight } ) {
 			aspect,
 			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		} ),
 		[
 			editedUrl,
-			setEditedUrl,
 			crop,
-			setCrop,
 			position,
-			setPosition,
 			zoom,
-			setZoom,
 			rotation,
-			setRotation,
 			rotateClockwise,
 			aspect,
-			setAspect,
 			defaultAspect,
-			initializeTransformValues,
 		]
 	);
 }
-
-export default function useTransformImage( imageProperties, isEditing ) {
-	const transformState = useTransformState( imageProperties );
-	const { initializeTransformValues } = transformState;
-
-	useEffect( () => {
-		if ( isEditing ) {
-			initializeTransformValues();
-		}
-	}, [ isEditing, initializeTransformValues ] );
-
-	return transformState;
-}
diff --git a/packages/block-editor/src/components/image-editor/zoom-dropdown.js b/packages/block-editor/src/components/image-editor/zoom-dropdown.js
index 2694382e3860c2..5093b11feb6d87 100644
--- a/packages/block-editor/src/components/image-editor/zoom-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/zoom-dropdown.js
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
+import {
+	ToolbarButton,
+	RangeControl,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { search } from '@wordpress/icons';
 
@@ -27,13 +32,17 @@ export default function ZoomDropdown() {
 				/>
 			) }
 			renderContent={ () => (
-				<RangeControl
-					label={ __( 'Zoom' ) }
-					min={ MIN_ZOOM }
-					max={ MAX_ZOOM }
-					value={ Math.round( zoom ) }
-					onChange={ setZoom }
-				/>
+				<DropdownContentWrapper paddingSize="medium">
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Zoom' ) }
+						min={ MIN_ZOOM }
+						max={ MAX_ZOOM }
+						value={ Math.round( zoom ) }
+						onChange={ setZoom }
+					/>
+				</DropdownContentWrapper>
 			) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/image-link-destinations/index.native.js b/packages/block-editor/src/components/image-link-destinations/index.native.js
new file mode 100644
index 00000000000000..ed815426f4e27d
--- /dev/null
+++ b/packages/block-editor/src/components/image-link-destinations/index.native.js
@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { BottomSheet, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+import { blockSettingsScreens } from '../block-settings';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters.
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker.
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;
diff --git a/packages/block-editor/src/components/image-link-destinations/style.native.scss b/packages/block-editor/src/components/image-link-destinations/style.native.scss
new file mode 100644
index 00000000000000..cc1486efa2487d
--- /dev/null
+++ b/packages/block-editor/src/components/image-link-destinations/style.native.scss
@@ -0,0 +1,16 @@
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}
diff --git a/packages/block-editor/src/components/image-size-control/README.md b/packages/block-editor/src/components/image-size-control/README.md
index 2fc078c773b5a1..17e3b1ea85928a 100644
--- a/packages/block-editor/src/components/image-size-control/README.md
+++ b/packages/block-editor/src/components/image-size-control/README.md
@@ -7,8 +7,8 @@ Allow users to control the width & height of an image.
 Render a ImageSizeControl.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalImageSizeControl as ImageSizeControl } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 
 const MyImageSizeControl = () => {
 	const [ size, setSize ] = useState( { width: null, height: null } );
@@ -36,7 +36,7 @@ The component accepts the following props:
 
 If this property is added, a help text will be generated for the image size control, using imageSizeHelp property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
 
 ### slug
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 15337ef3887f14..b5bb705ab101c1 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -1,16 +1,12 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
-	Button,
-	ButtonGroup,
 	SelectControl,
-	TextControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -22,6 +18,25 @@ import useDimensionHandler from './use-dimension-handler';
 const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
 
+/**
+ * Get scaled width and height for the given scale.
+ *
+ * @param {number} scale       The scale to get the scaled width and height for.
+ * @param {number} imageWidth  The image width.
+ * @param {number} imageHeight The image height.
+ *
+ * @return {Object} The scaled width and height.
+ */
+function getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {
+	const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
+	const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );
+
+	return {
+		scaledWidth,
+		scaledHeight,
+	};
+}
+
 export default function ImageSizeControl( {
 	imageSizeHelp,
 	imageWidth,
@@ -37,25 +52,57 @@ export default function ImageSizeControl( {
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 
+	/**
+	 * Updates the dimensions for the given scale.
+	 * Handler for toggle group control change.
+	 *
+	 * @param {number} scale The scale to update the dimensions for.
+	 */
+	const handleUpdateDimensions = ( scale ) => {
+		if ( undefined === scale ) {
+			updateDimensions();
+			return;
+		}
+
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		updateDimensions( scaledHeight, scaledWidth );
+	};
+
+	/**
+	 * Add the stored image preset value to toggle group control.
+	 */
+	const selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		return currentWidth === scaledWidth && currentHeight === scaledHeight;
+	} );
+
 	return (
 		<>
-			{ ! isEmpty( imageSizeOptions ) && (
+			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
-					label={ __( 'Image size' ) }
+					__nextHasNoMarginBottom
+					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
 					onChange={ onChangeImage }
 					help={ imageSizeHelp }
+					size="__unstable-large"
 				/>
 			) }
 			{ isResizable && (
 				<div className="block-editor-image-size-control">
-					<p className="block-editor-image-size-control__row">
-						{ __( 'Image dimensions' ) }
-					</p>
-					<div className="block-editor-image-size-control__row">
-						<TextControl
-							type="number"
+					<HStack align="baseline" spacing="3">
+						<NumberControl
 							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
@@ -63,9 +110,9 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'width', value )
 							}
+							size="__unstable-large"
 						/>
-						<TextControl
-							type="number"
+						<NumberControl
 							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
@@ -73,46 +120,28 @@ export default function ImageSizeControl( {
 							onChange={ ( value ) =>
 								updateDimension( 'height', value )
 							}
+							size="__unstable-large"
 						/>
-					</div>
-					<div className="block-editor-image-size-control__row">
-						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
-							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
-								const scaledWidth = Math.round(
-									imageWidth * ( scale / 100 )
-								);
-								const scaledHeight = Math.round(
-									imageHeight * ( scale / 100 )
-								);
-
-								const isCurrent =
-									currentWidth === scaledWidth &&
-									currentHeight === scaledHeight;
-
-								return (
-									<Button
-										key={ scale }
-										isSmall
-										variant={
-											isCurrent ? 'primary' : undefined
-										}
-										isPressed={ isCurrent }
-										onClick={ () =>
-											updateDimensions(
-												scaledHeight,
-												scaledWidth
-											)
-										}
-									>
-										{ scale }%
-									</Button>
-								);
-							} ) }
-						</ButtonGroup>
-						<Button isSmall onClick={ () => updateDimensions() }>
-							{ __( 'Reset' ) }
-						</Button>
-					</div>
+					</HStack>
+					<ToggleGroupControl
+						label={ __( 'Image size presets' ) }
+						hideLabelFromVision
+						onChange={ handleUpdateDimensions }
+						value={ selectedValue }
+						isBlock
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					>
+						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
+							return (
+								<ToggleGroupControlOption
+									key={ scale }
+									value={ scale }
+									label={ `${ scale }%` }
+								/>
+							);
+						} ) }
+					</ToggleGroupControl>
 				</div>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/image-size-control/style.scss b/packages/block-editor/src/components/image-size-control/style.scss
index 2a0bf9fa6c3513..d01bfc5929fbe3 100644
--- a/packages/block-editor/src/components/image-size-control/style.scss
+++ b/packages/block-editor/src/components/image-size-control/style.scss
@@ -1,26 +1,8 @@
 .block-editor-image-size-control {
 	margin-bottom: 1em;
 
-	.block-editor-image-size-control__row {
-		display: flex;
-		justify-content: space-between;
-
-		.block-editor-image-size-control__width,
-		.block-editor-image-size-control__height {
-			margin-bottom: 0.5em;
-
-			// Fix the text and placeholder text being misaligned in Safari
-			input {
-				line-height: 1.25;
-			}
-		}
-
-		.block-editor-image-size-control__width {
-			margin-right: 5px;
-		}
-
-		.block-editor-image-size-control__height {
-			margin-left: 5px;
-		}
+	.block-editor-image-size-control__width,
+	.block-editor-image-size-control__height {
+		margin-bottom: 1.115em;
 	}
 }
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..70d94e78e70c2e 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,62 +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( '' );
-		} );
-	} );
-
-	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', () => {
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="200"
-					height="300"
-					width="400"
-					onChange={ mockOnChange }
-				/>
-			);
-
-			const heightInput = getHeightInput();
-			const widthInput = getWidthInput();
-
-			// The initial dimension values display first.
-			expect( heightInput.value ).toBe( '300' );
-			expect( widthInput.value ).toBe( '400' );
-
-			fireEvent.click( screen.getByText( 'Reset' ) );
-
-			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenCalledWith( {
-				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( null );
 		} );
 	} );
 
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', () => {
+		it( 'updates height and width on selection', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -223,31 +233,28 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			const button = screen.getByRole( 'radio', {
+				name: '50%',
+				checked: false,
+			} );
+
+			await user.click( button );
 
-			expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
+			expect( button ).toBeChecked();
 
 			// 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', () => {
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="201"
-					onChange={ mockOnChange }
-				/>
-			);
 
-			fireEvent.click( screen.getByText( '50%' ) );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Height' } )
+			).toHaveValue( 50 );
 
-			// Both attributes are set to the rounded scaled value.
-			expect( getHeightInput().value ).toBe( '50' );
-			expect( getWidthInput().value ).toBe( '101' );
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Width' } )
+			).toHaveValue( 101 );
 		} );
 	} );
 
@@ -268,12 +275,14 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			expect( screen.getByLabelText( 'Image size' ).value ).toBe(
-				'medium'
-			);
+			expect(
+				screen.getByRole( 'combobox', { name: 'Resolution' } )
+			).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 +292,13 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			fireEvent.change( screen.getByLabelText( 'Image size' ), {
-				target: { value: 'thumbnail' },
-			} );
+			await user.selectOptions(
+				screen.getByRole( 'combobox', { name: 'Resolution' } ),
+				'thumbnail'
+			);
 
 			// onChangeImage is called with the slug and the event.
-			expect( mockOnChangeImage ).toHaveBeenCalledWith(
+			expect( mockOnChangeImage ).toHaveBeenLastCalledWith(
 				'thumbnail',
 				expect.any( Object )
 			);
diff --git a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js
index 4a8efbf187c23e..aeb0975ae204c2 100644
--- a/packages/block-editor/src/components/image-size-control/use-dimension-handler.js
+++ b/packages/block-editor/src/components/image-size-control/use-dimension-handler.js
@@ -47,13 +47,14 @@ export default function useDimensionHandler(
 	}, [ customWidth, customHeight ] );
 
 	const updateDimension = ( dimension, value ) => {
+		const parsedValue = value === '' ? undefined : parseInt( value, 10 );
 		if ( dimension === 'width' ) {
-			setCurrentWidth( value );
+			setCurrentWidth( parsedValue );
 		} else {
-			setCurrentHeight( value );
+			setCurrentHeight( parsedValue );
 		}
 		onChange( {
-			[ dimension ]: value === '' ? undefined : parseInt( value, 10 ),
+			[ dimension ]: parsedValue,
 		} );
 	};
 
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 7743a98066c437..29bb71b682e970 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -5,7 +5,6 @@
 export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
-export * from './duotone';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
 export { default as Autocomplete } from './autocomplete';
 export {
@@ -17,6 +16,7 @@ export { default as __experimentalBlockAlignmentMatrixControl } from './block-al
 export { default as BlockBreadcrumb } from './block-breadcrumb';
 export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay';
 export { BlockContextProvider } from './block-context';
+export { default as BlockCanvas } from './block-canvas';
 export {
 	default as BlockControls,
 	BlockFormatControls,
@@ -26,6 +26,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -49,14 +50,13 @@ export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
+export { default as __experimentalWritingModeControl } from './writing-mode-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
-export {
-	default as __experimentalImageEditor,
-	ImageEditingProvider as __experimentalImageEditingProvider,
-} from './image-editor';
+export { default as HeightControl } from './height-control';
+export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
 export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
@@ -73,7 +73,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { default as __experimentalOffCanvasEditor } from './off-canvas-editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
@@ -95,7 +94,11 @@ export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
 export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
-
+export {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+	getCustomValueFromPreset,
+} from './spacing-sizes-control/utils';
 /*
  * Content Related Components
  */
@@ -109,7 +112,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
-export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
 export {
 	default as BlockPreview,
@@ -126,7 +128,7 @@ export { default as BlockToolbar } from './block-toolbar';
 export { default as BlockTools } from './block-tools';
 export {
 	default as CopyHandler,
-	useClipboardHandler as __unstableUseClipboardHandler,
+	__unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
@@ -150,16 +152,21 @@ export { default as WritingFlow } from './writing-flow';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
 export {
-	RecursionProvider as __experimentalRecursionProvider,
-	useHasRecursion as __experimentalUseHasRecursion,
+	RecursionProvider,
+	DeprecatedExperimentalRecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion,
+	DeprecatedExperimentalUseHasRecursion as __experimentalUseHasRecursion,
 } from './recursion-provider';
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { default as BlockPopover } from './block-popover';
+export { useBlockEditingMode } from './block-editing-mode';
 
 /*
  * State Related Components
  */
 
 export { default as BlockEditorProvider } from './provider';
-export { default as useSetting } from './use-setting';
+export { useSettings, useSetting } from './use-settings';
+export { useBlockCommands } from './use-block-commands';
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 68218c374cb03c..ae565cd9cc665a 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -28,6 +28,7 @@ export {
 	JustifyContentControl,
 } from './justify-content-control';
 export { default as LineHeightControl } from './line-height-control';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as PlainText } from './plain-text';
 export {
 	default as RichText,
@@ -37,20 +38,21 @@ export {
 } from './rich-text';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
+export { default as MediaUpload } from './media-upload';
 export {
-	default as MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
-} from './media-upload';
+} from './media-upload/constants';
+export { default as MediaUploadProgress } from './media-upload-progress';
 export {
-	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_PAUSED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from './media-upload-progress';
+} from './media-upload-progress/constants';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
@@ -58,14 +60,23 @@ export { default as BlockCaption } from './block-caption';
 export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
-export { default as useSetting } from './use-setting';
+export { useSettings, default as useSetting } from './use-settings';
 export {
-	RecursionProvider as __experimentalRecursionProvider,
-	useHasRecursion as __experimentalUseHasRecursion,
+	RecursionProvider,
+	DeprecatedExperimentalRecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion,
+	DeprecatedExperimentalUseHasRecursion as __experimentalUseHasRecursion,
 } from './recursion-provider';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as UnsupportedBlockDetails } from './unsupported-block-details';
+export {
+	useGlobalStyles,
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './global-styles/use-global-styles-context';
 
 export {
 	BottomSheetSettings,
@@ -73,7 +84,13 @@ export {
 	blockSettingsScreens,
 } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';
+export { default as AudioPlayer } from './audio-player';
 
+export {
+	getSpacingPresetCssVar,
+	getCustomValueFromPreset,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 // Content Related Components.
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
@@ -83,6 +100,7 @@ export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
+export { default as InserterButton } from './inserter-button';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index ce4eacb5e09954..92d4fdb5739cec 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -130,7 +130,7 @@ _Options:_
 -   `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 -   `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overriden: it's present, the `templateLock` value of any children is ignored.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `contentOnly` can't be overridden: it's present, the `templateLock` value of any children is ignored.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 
@@ -180,3 +180,29 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 -   **Type:** `Function`
 -   **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.
+
+### `prioritizedInserterBlocks`
+
+-   **Type:** `Array`
+-   **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.
+
+### `defaultBlock`
+
+- **Type:** `Object`
+- **Default:** - `undefined`
+
+Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an object in the form of `{ name: blockname, attributes: {blockAttributes} }`.
+
+```jsx
+const DEFAULT_BLOCK = { name: 'core/paragraph', attributes: { content: 'Lorem ipsum...' } };
+...
+<InnerBlocks
+    defaultBlock={ DEFAULT_BLOCK }
+    directInsert={ true }
+/>
+```
+
+### `directInsert`
+
+- **Type:** `Boolean`
+- **Default:** - `undefined`. Determines whether the default block should be inserted directly into the InnerBlocks area by the block appender.
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 5319b5d4d3c368..5bc788d58582f6 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -1,24 +1,24 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
 import BaseButtonBlockAppender from '../button-block-appender';
-import withClientId from './with-client-id';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const ButtonBlockAppender = ( {
-	clientId,
+export default function ButtonBlockAppender( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
 	isToggle,
-} ) => {
+} ) {
+	const { clientId } = useBlockEditContext();
 	return (
 		<BaseButtonBlockAppender
-			className={ classnames( {
+			className={ clsx( {
 				'block-list-appender__toggle': isToggle,
 			} ) }
 			rootClientId={ clientId }
@@ -27,6 +27,4 @@ export const ButtonBlockAppender = ( {
 			onAddBlock={ onAddBlock }
 		/>
 	);
-};
-
-export default withClientId( ButtonBlockAppender );
+}
diff --git a/packages/block-editor/src/components/inner-blocks/constants.native.js b/packages/block-editor/src/components/inner-blocks/constants.native.js
new file mode 100644
index 00000000000000..79962a2373b886
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/constants.native.js
@@ -0,0 +1,5 @@
+// Hermes has a limit for the call stack depth to avoid infinite recursion.
+// When creating a deep nested structure of inner blocks, the editor might exceed
+// this limit and crash. In order to avoid this, we set a maximum depth level where
+// we stop rendering blocks.
+export const MAX_NESTING_DEPTH = 10;
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index d2e137004d83bf..91e48a2854b513 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -1,29 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
 /**
  * Internal dependencies
  */
 import BaseDefaultBlockAppender from '../default-block-appender';
-import withClientId from './with-client-id';
-import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit/context';
 
-export const DefaultBlockAppender = ( { clientId } ) => {
+export default function DefaultBlockAppender() {
+	const { clientId } = useBlockEditContext();
 	return <BaseDefaultBlockAppender rootClientId={ clientId } />;
-};
-
-export default compose( [
-	withClientId,
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockOrder } = select( blockEditorStore );
-
-		const blockClientIds = getBlockOrder( clientId );
-
-		return {
-			lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
-		};
-	} ),
-] )( DefaultBlockAppender );
+}
diff --git a/packages/block-editor/src/components/inner-blocks/get-block-context.js b/packages/block-editor/src/components/inner-blocks/get-block-context.js
deleted file mode 100644
index 295ef380d3808d..00000000000000
--- a/packages/block-editor/src/components/inner-blocks/get-block-context.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
-/**
- * Block context cache, implemented as a WeakMap mapping block types to a
- * WeakMap mapping attributes object to context value.
- *
- * @type {WeakMap<string,WeakMap<string,*>>}
- */
-const BLOCK_CONTEXT_CACHE = new WeakMap();
-
-/**
- * Returns a cached context object value for a given set of attributes for the
- * block type.
- *
- * @param {Record<string,*>} attributes Block attributes object.
- * @param {WPBlockType}      blockType  Block type settings.
- *
- * @return {Record<string,*>} Context value.
- */
-export default function getBlockContext( attributes, blockType ) {
-	if ( ! BLOCK_CONTEXT_CACHE.has( blockType ) ) {
-		BLOCK_CONTEXT_CACHE.set( blockType, new WeakMap() );
-	}
-
-	const blockTypeCache = BLOCK_CONTEXT_CACHE.get( blockType );
-	if ( ! blockTypeCache.has( attributes ) ) {
-		const context = mapValues(
-			blockType.providesContext,
-			( attributeName ) => attributes[ attributeName ]
-		);
-
-		blockTypeCache.set( attributes, context );
-	}
-
-	return blockTypeCache.get( attributes );
-}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index c03a8616fed657..ae587720278200 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -1,16 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useMemo, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
-	getBlockType,
+	getBlockSupport,
 	store as blocksStore,
 	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
@@ -22,13 +22,27 @@ import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 import useNestedSettingsUpdate from './use-nested-settings-update';
 import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import getBlockContext from './get-block-context';
+import useBlockContext from './use-block-context';
 import { BlockListItems } from '../block-list';
 import { BlockContextProvider } from '../block-context';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import useBlockDropZone from '../use-block-drop-zone';
+import { unlock } from '../../lock-unlock';
+
+const EMPTY_OBJECT = {};
+
+function BlockContext( { children, clientId } ) {
+	const context = useBlockContext( clientId );
+	return (
+		<BlockContextProvider value={ context }>
+			{ children }
+		</BlockContextProvider>
+	);
+}
+
+const BlockListItemsMemo = memo( BlockListItems );
 
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
@@ -42,6 +56,9 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		template,
@@ -53,18 +70,26 @@ function UncontrolledInnerBlocks( props ) {
 		renderAppender,
 		orientation,
 		placeholder,
-		__experimentalLayout,
+		layout,
+		name,
+		blockType,
+		parentLock,
+		defaultLayout,
 	} = props;
 
 	useNestedSettingsUpdate(
 		clientId,
+		parentLock,
 		allowedBlocks,
+		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,
 		captureToolbars,
 		orientation,
-		__experimentalLayout
+		layout
 	);
 
 	useInnerBlockTemplateSync(
@@ -74,41 +99,47 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const context = useSelect(
-		( select ) => {
-			const block = select( blockEditorStore ).getBlock( clientId );
-
-			// This check is here to avoid the Redux zombie bug where a child subscription
-			// is called before a parent, causing potential JS errors when the child has been removed.
-			if ( ! block ) {
-				return;
-			}
+	const defaultLayoutBlockSupport =
+		getBlockSupport( name, 'layout' ) ||
+		getBlockSupport( name, '__experimentalLayout' ) ||
+		EMPTY_OBJECT;
 
-			const blockType = getBlockType( block.name );
+	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
+	const usedLayout = layout || defaultLayoutBlockSupport;
 
-			if ( ! blockType || ! blockType.providesContext ) {
-				return;
-			}
-
-			return getBlockContext( block.attributes, blockType );
-		},
-		[ clientId ]
+	const memoedLayout = useMemo(
+		() => ( {
+			// Default layout will know about any content/wide size defined by the theme.
+			...defaultLayout,
+			...usedLayout,
+			...( allowSizingOnChildren && {
+				allowSizingOnChildren: true,
+			} ),
+		} ),
+		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
-	// This component needs to always be synchronous as it's the one changing
-	// the async mode depending on the block selection.
-	return (
-		<BlockContextProvider value={ context }>
-			<BlockListItems
-				rootClientId={ clientId }
-				renderAppender={ renderAppender }
-				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ __experimentalLayout }
-				wrapperRef={ wrapperRef }
-				placeholder={ placeholder }
-			/>
-		</BlockContextProvider>
+	// For controlled inner blocks, we don't want a change in blocks to
+	// re-render the blocks list.
+	const items = (
+		<BlockListItemsMemo
+			rootClientId={ clientId }
+			renderAppender={ renderAppender }
+			__experimentalAppenderTagName={ __experimentalAppenderTagName }
+			layout={ memoedLayout }
+			wrapperRef={ wrapperRef }
+			placeholder={ placeholder }
+		/>
 	);
+
+	if (
+		! blockType?.providesContext ||
+		Object.keys( blockType.providesContext ).length === 0
+	) {
+		return items;
+	}
+
+	return <BlockContext clientId={ clientId }>{ items }</BlockContext>;
 }
 
 /**
@@ -150,55 +181,105 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
-		options;
-	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
-		useBlockEditContext();
-	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
+	const {
+		__unstableDisableLayoutClassNames,
+		__unstableDisableDropZone,
+		dropZoneElement,
+	} = options;
+	const {
+		clientId,
+		layout = null,
+		__unstableLayoutClassNames: layoutClassNames = '',
+	} = useBlockEditContext();
+	const selected = useSelect(
 		( select ) => {
+			const {
+				getBlockName,
+				isZoomOut,
+				getTemplateLock,
+				getBlockRootClientId,
+				getBlockEditingMode,
+				getBlockSettings,
+				getSectionRootClientId,
+			} = unlock( select( blockEditorStore ) );
+
 			if ( ! clientId ) {
-				return {};
+				const sectionRootClientId = getSectionRootClientId();
+				// Disable the root drop zone when zoomed out and the section root client id
+				// is not the root block list (represented by an empty string).
+				// This avoids drag handling bugs caused by having two block lists acting as
+				// drop zones - the actual 'root' block list and the section root.
+				return {
+					isDropZoneDisabled:
+						isZoomOut() && sectionRootClientId !== '',
+				};
 			}
 
-			const {
-				getBlockName,
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation' || isSmallScreen;
+			const blockEditingMode = getBlockEditingMode( clientId );
+			const parentClientId = getBlockRootClientId( clientId );
+			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
+
+			let _isDropZoneDisabled = blockEditingMode === 'disabled';
+
+			if ( isZoomOut() ) {
+				// In zoom out mode, we want to disable the drop zone for the sections.
+				// The inner blocks belonging to the section drop zone is
+				// already disabled by the blocks themselves being disabled.
+				const sectionRootClientId = getSectionRootClientId();
+				_isDropZoneDisabled = clientId !== sectionRootClientId;
+			}
+
 			return {
-				__experimentalCaptureToolbars: select(
-					blocksStore
-				).hasBlockSupport(
+				__experimentalCaptureToolbars: hasBlockSupport(
 					blockName,
 					'__experimentalExposeControlsToChildren',
 					false
 				),
-				hasOverlay:
-					blockName !== 'core/template' &&
-					! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough,
+				name: blockName,
+				blockType: getBlockType( blockName ),
+				parentLock: getTemplateLock( parentClientId ),
+				parentClientId,
+				isDropZoneDisabled: _isDropZoneDisabled,
+				defaultLayout,
 			};
 		},
-		[ clientId, isSmallScreen ]
+		[ clientId ]
 	);
+	const {
+		__experimentalCaptureToolbars,
+		name,
+		blockType,
+		parentLock,
+		parentClientId,
+		isDropZoneDisabled,
+		defaultLayout,
+	} = selected;
 
 	const blockDropZoneRef = useBlockDropZone( {
+		dropZoneElement,
 		rootClientId: clientId,
+		parentClientId,
 	} );
 
 	const ref = useMergeRefs( [
 		props.ref,
-		__unstableDisableDropZone ? null : blockDropZoneRef,
+		__unstableDisableDropZone ||
+		isDropZoneDisabled ||
+		( layout?.isManualPlacement &&
+			window.__experimentalEnableGridInteractivity )
+			? null
+			: blockDropZoneRef,
 	] );
 
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
+		layout,
+		name,
+		blockType,
+		parentLock,
+		defaultLayout,
 		...options,
 	};
 	const InnerBlocks =
@@ -209,13 +290,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	return {
 		...props,
 		ref,
-		className: classnames(
+		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
-			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
-			{
-				'has-overlay': hasOverlay,
-			}
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames
 		),
 		children: clientId ? (
 			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 2b5ffe01aaf08c..1398a5abd51e4b 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -1,12 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import {
-	getBlockType,
-	__unstableGetInnerBlocksProps as getInnerBlocksProps,
-} from '@wordpress/blocks';
+import { __unstableGetInnerBlocksProps as getInnerBlocksProps } from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,18 +12,19 @@ import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 import useNestedSettingsUpdate from './use-nested-settings-update';
 import useInnerBlockTemplateSync from './use-inner-block-template-sync';
-import getBlockContext from './get-block-context';
+import useBlockContext from './use-block-context';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../block-list';
-import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
 import { defaultLayout, LayoutProvider } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
+import WarningMaxDepthExceeded from './warning-max-depth-exceeded';
+import { MAX_NESTING_DEPTH } from './constants';
 
 /**
  * This hook is used to lightly mark an element as an inner blocks wrapper
@@ -78,9 +76,15 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection,
+		__experimentalCaptureToolbars: captureToolbars,
 		orientation,
 		renderAppender,
 		renderFooterAppender,
@@ -95,17 +99,38 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 		filterInnerBlocks,
 		blockWidth,
-		__experimentalLayout: layout = defaultLayout,
+		layout = defaultLayout,
 		gridProperties,
-		useCompactList,
 	} = props;
 
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
+	const context = useBlockContext( clientId );
+
+	const { nestingLevel, parentLock } = useSelect(
+		( select ) => {
+			const { getBlockParents, getTemplateLock, getBlockRootClientId } =
+				select( blockEditorStore );
+			return {
+				nestingLevel: getBlockParents( clientId )?.length,
+				parentLock: getTemplateLock( getBlockRootClientId( clientId ) ),
+			};
+		},
 		[ clientId ]
-	) || { innerBlocks: [] };
+	);
 
-	useNestedSettingsUpdate( clientId, allowedBlocks, templateLock );
+	useNestedSettingsUpdate(
+		clientId,
+		parentLock,
+		allowedBlocks,
+		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
+		__experimentalDefaultBlock,
+		__experimentalDirectInsert,
+		templateLock,
+		captureToolbars,
+		orientation,
+		layout
+	);
 
 	useInnerBlockTemplateSync(
 		clientId,
@@ -114,45 +139,35 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
-
-	let blockList = (
-		<BlockListComponent
-			marginVertical={ marginVertical }
-			marginHorizontal={ marginHorizontal }
-			rootClientId={ clientId }
-			renderAppender={ renderAppender }
-			renderFooterAppender={ renderFooterAppender }
-			withFooter={ false }
-			orientation={ orientation }
-			parentWidth={ parentWidth }
-			horizontalAlignment={ horizontalAlignment }
-			horizontal={ horizontal }
-			contentResizeMode={ contentResizeMode }
-			contentStyle={ contentStyle }
-			onAddBlock={ onAddBlock }
-			onDeleteBlock={ onDeleteBlock }
-			filterInnerBlocks={ filterInnerBlocks }
-			gridProperties={ gridProperties }
-			blockWidth={ blockWidth }
-		/>
-	);
-
-	// Wrap context provider if (and only if) block has context to provide.
-	const blockType = getBlockType( block.name );
-	if ( blockType && blockType.providesContext ) {
-		const context = getBlockContext( block.attributes, blockType );
-
-		blockList = (
-			<LayoutProvider value={ layout }>
-				<BlockContextProvider value={ context }>
-					{ blockList }
-				</BlockContextProvider>
-			</LayoutProvider>
-		);
+	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
+		return <WarningMaxDepthExceeded clientId={ clientId } />;
 	}
 
-	return blockList;
+	return (
+		<LayoutProvider value={ layout }>
+			<BlockContextProvider value={ context }>
+				<BlockList
+					marginVertical={ marginVertical }
+					marginHorizontal={ marginHorizontal }
+					rootClientId={ clientId }
+					renderAppender={ renderAppender }
+					renderFooterAppender={ renderFooterAppender }
+					withFooter={ false }
+					orientation={ orientation }
+					parentWidth={ parentWidth }
+					horizontalAlignment={ horizontalAlignment }
+					horizontal={ horizontal }
+					contentResizeMode={ contentResizeMode }
+					contentStyle={ contentStyle }
+					onAddBlock={ onAddBlock }
+					onDeleteBlock={ onDeleteBlock }
+					filterInnerBlocks={ filterInnerBlocks }
+					gridProperties={ gridProperties }
+					blockWidth={ blockWidth }
+				/>
+			</BlockContextProvider>
+		</LayoutProvider>
+	);
 }
 
 /**
diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss
deleted file mode 100644
index 05259ede35daaa..00000000000000
--- a/packages/block-editor/src/components/inner-blocks/style.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Add clickable overlay to blocks with nesting.
-// This makes it easy to select all layers of the block.
-.block-editor-block-list__layout.has-overlay {
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
-	}
-}
diff --git a/packages/block-editor/src/components/inner-blocks/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/inner-blocks/test/__snapshots__/index.js.snap
index 5766351dc3c236..e63477b49e875a 100644
--- a/packages/block-editor/src/components/inner-blocks/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/inner-blocks/test/__snapshots__/index.js.snap
@@ -9,7 +9,7 @@ exports[`InnerBlocks should force serialize for invalid block with inner blocks
 `;
 
 exports[`InnerBlocks should return element as string, with inner blocks 1`] = `
-"<div>Bananas<!-- wp:fruit {\\"fruit\\":\\"Apples\\"} -->
+"<div>Bananas<!-- wp:fruit {"fruit":"Apples"} -->
 <div>Apples</div>
 <!-- /wp:fruit --></div>"
 `;
diff --git a/packages/block-editor/src/components/inner-blocks/use-block-context.js b/packages/block-editor/src/components/inner-blocks/use-block-context.js
new file mode 100644
index 00000000000000..885f8feda5c6f7
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/use-block-context.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * Returns a context object for a given block.
+ *
+ * @param {string} clientId The block client ID.
+ *
+ * @return {Record<string,*>} Context value.
+ */
+export default function useBlockContext( clientId ) {
+	return useSelect(
+		( select ) => {
+			const block = select( blockEditorStore ).getBlock( clientId );
+			if ( ! block ) {
+				return undefined;
+			}
+
+			const blockType = select( blocksStore ).getBlockType( block.name );
+			if ( ! blockType ) {
+				return undefined;
+			}
+
+			if ( Object.keys( blockType.providesContext ).length === 0 ) {
+				return undefined;
+			}
+
+			return Object.fromEntries(
+				Object.entries( blockType.providesContext ).map(
+					( [ contextName, attributeName ] ) => [
+						contextName,
+						block.attributes[ attributeName ],
+					]
+				)
+			);
+		},
+		[ clientId ]
+	);
+}
diff --git a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
index 1b81069c44f3dc..fd801779372aac 100644
--- a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
+++ b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -40,23 +40,32 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
-		useSelect( blockEditorStore );
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
-	const innerBlocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks( clientId ),
-		[ clientId ]
-	);
-	const { getBlocks } = useSelect( blockEditorStore );
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
+	const {
+		getBlocks,
+		getSelectedBlocksInitialCaretPosition,
+		isBlockSelected,
+	} = useSelect( blockEditorStore );
+	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
-	const existingTemplate = useRef( null );
+	const existingTemplateRef = useRef( null );
+
 	useLayoutEffect( () => {
+		let isCancelled = false;
+
 		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
 		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
 		// we need to schedule this one in a microtask as well.
-		// Exemple: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
+		// Example: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
 		window.queueMicrotask( () => {
+			if ( isCancelled ) {
+				return;
+			}
+
 			// Only synchronize innerBlocks with template if innerBlocks are empty
 			// or a locking "all" or "contentOnly" exists directly on the block.
 			const currentInnerBlocks = getBlocks( clientId );
@@ -65,22 +74,23 @@ export default function useInnerBlockTemplateSync(
 				templateLock === 'all' ||
 				templateLock === 'contentOnly';
 
-			const hasTemplateChanged = ! isEqual(
+			const hasTemplateChanged = ! fastDeepEqual(
 				template,
-				existingTemplate.current
+				existingTemplateRef.current
 			);
 
 			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
 				return;
 			}
 
-			existingTemplate.current = template;
+			existingTemplateRef.current = template;
 			const nextBlocks = synchronizeBlocksWithTemplate(
 				currentInnerBlocks,
 				template
 			);
 
-			if ( ! isEqual( nextBlocks, currentInnerBlocks ) ) {
+			if ( ! fastDeepEqual( nextBlocks, currentInnerBlocks ) ) {
+				__unstableMarkNextChangeAsNotPersistent();
 				replaceInnerBlocks(
 					clientId,
 					nextBlocks,
@@ -96,5 +106,9 @@ export default function useInnerBlockTemplateSync(
 				);
 			}
 		} );
-	}, [ innerBlocks, template, templateLock, clientId ] );
+
+		return () => {
+			isCancelled = true;
+		};
+	}, [ template, templateLock, clientId ] );
 }
diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
index d9518eb303a044..bc07a5a1829e2b 100644
--- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
+++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -15,6 +16,23 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+// Creates a memoizing caching function that remembers the last value and keeps returning it
+// as long as the new values are shallowly equal. Helps keep dependencies stable.
+function createShallowMemo() {
+	let value;
+	return ( newValue ) => {
+		if ( value === undefined || ! isShallowEqual( value, newValue ) ) {
+			value = newValue;
+		}
+		return value;
+	};
+}
+
+function useShallowMemo( value ) {
+	const [ memo ] = useState( createShallowMemo );
+	return memo( value );
+}
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -23,11 +41,17 @@ const pendingSettingsUpdates = new WeakMap();
  * came from props.
  *
  * @param {string}               clientId                   The client ID of the block to update.
+ * @param {string}               parentLock
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
- * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
- * @param {?Function|boolean}    __experimentalDirectInsert If a default block should be inserted directly by the
- *                                                          appender.
+ * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
+ * @param {?WPDirectInsertBlock} defaultBlock               The default block to insert: [ blockName, { blockAttributes } ].
+ * @param {?boolean}             directInsert               If a default block should be inserted directly by the appender.
+ *
+ * @param {?WPDirectInsertBlock} __experimentalDefaultBlock A deprecated prop for the default block to insert: [ blockName, { blockAttributes } ]. Use `defaultBlock` instead.
+ *
+ * @param {?boolean}             __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
+ *
  * @param {string}               [templateLock]             The template lock specified for the inner
  *                                                          blocks component. (e.g. "all")
  * @param {boolean}              captureToolbars            Whether or children toolbars should be shown
@@ -39,7 +63,11 @@ const pendingSettingsUpdates = new WeakMap();
  */
 export default function useNestedSettingsUpdate(
 	clientId,
+	parentLock,
 	allowedBlocks,
+	prioritizedInserterBlocks,
+	defaultBlock,
+	directInsert,
 	__experimentalDefaultBlock,
 	__experimentalDirectInsert,
 	templateLock,
@@ -47,34 +75,31 @@ export default function useNestedSettingsUpdate(
 	orientation,
 	layout
 ) {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
 	const registry = useRegistry();
 
-	const { blockListSettings, parentLock } = useSelect(
-		( select ) => {
-			const rootClientId =
-				select( blockEditorStore ).getBlockRootClientId( clientId );
-			return {
-				blockListSettings:
-					select( blockEditorStore ).getBlockListSettings( clientId ),
-				parentLock:
-					select( blockEditorStore ).getTemplateLock( rootClientId ),
-			};
-		},
-		[ clientId ]
+	// Implementors often pass a new array on every render,
+	// and the contents of the arrays are just strings, so the entire array
+	// can be passed as dependencies but We need to include the length of the array,
+	// otherwise if the arrays change length but the first elements are equal the comparison,
+	// does not works as expected.
+	const _allowedBlocks = useShallowMemo( allowedBlocks );
+	const _prioritizedInserterBlocks = useShallowMemo(
+		prioritizedInserterBlocks
 	);
 
-	// Memoize as inner blocks implementors often pass a new array on every
-	// render.
-	const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks );
+	const _templateLock =
+		templateLock === undefined || parentLock === 'contentOnly'
+			? parentLock
+			: templateLock;
 
 	useLayoutEffect( () => {
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
-			templateLock:
-				templateLock === undefined || parentLock === 'contentOnly'
-					? parentLock
-					: templateLock,
+			prioritizedInserterBlocks: _prioritizedInserterBlocks,
+			templateLock: _templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they
@@ -93,50 +118,71 @@ export default function useNestedSettingsUpdate(
 		}
 
 		if ( __experimentalDefaultBlock !== undefined ) {
-			newSettings.__experimentalDefaultBlock = __experimentalDefaultBlock;
+			deprecated( '__experimentalDefaultBlock', {
+				alternative: 'defaultBlock',
+				since: '6.3',
+				version: '6.4',
+			} );
+			newSettings.defaultBlock = __experimentalDefaultBlock;
+		}
+
+		if ( defaultBlock !== undefined ) {
+			newSettings.defaultBlock = defaultBlock;
 		}
 
 		if ( __experimentalDirectInsert !== undefined ) {
-			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
+			deprecated( '__experimentalDirectInsert', {
+				alternative: 'directInsert',
+				since: '6.3',
+				version: '6.4',
+			} );
+			newSettings.directInsert = __experimentalDirectInsert;
 		}
 
-		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			// Batch updates to block list settings to avoid triggering cascading renders
-			// for each container block included in a tree and optimize initial render.
-			// To avoid triggering updateBlockListSettings for each container block
-			// causing X re-renderings for X container blocks,
-			// we batch all the updatedBlockListSettings in a single "data" batch
-			// which results in a single re-render.
-			if ( ! pendingSettingsUpdates.get( registry ) ) {
-				pendingSettingsUpdates.set( registry, [] );
-			}
-			pendingSettingsUpdates
-				.get( registry )
-				.push( [ clientId, newSettings ] );
-			window.queueMicrotask( () => {
-				if ( pendingSettingsUpdates.get( registry )?.length ) {
-					registry.batch( () => {
-						pendingSettingsUpdates
-							.get( registry )
-							.forEach( ( args ) => {
-								updateBlockListSettings( ...args );
-							} );
-						pendingSettingsUpdates.set( registry, [] );
-					} );
-				}
+		if ( directInsert !== undefined ) {
+			newSettings.directInsert = directInsert;
+		}
+
+		if (
+			newSettings.directInsert !== undefined &&
+			typeof newSettings.directInsert !== 'boolean'
+		) {
+			deprecated( 'Using `Function` as a `directInsert` argument', {
+				alternative: '`boolean` values',
+				since: '6.5',
 			} );
 		}
+
+		// Batch updates to block list settings to avoid triggering cascading renders
+		// for each container block included in a tree and optimize initial render.
+		// To avoid triggering updateBlockListSettings for each container block
+		// causing X re-renderings for X container blocks,
+		// we batch all the updatedBlockListSettings in a single "data" batch
+		// which results in a single re-render.
+		if ( ! pendingSettingsUpdates.get( registry ) ) {
+			pendingSettingsUpdates.set( registry, {} );
+		}
+		pendingSettingsUpdates.get( registry )[ clientId ] = newSettings;
+		window.queueMicrotask( () => {
+			const settings = pendingSettingsUpdates.get( registry );
+			if ( Object.keys( settings ).length ) {
+				const { updateBlockListSettings } =
+					registry.dispatch( blockEditorStore );
+				updateBlockListSettings( settings );
+				pendingSettingsUpdates.set( registry, {} );
+			}
+		} );
 	}, [
 		clientId,
-		blockListSettings,
 		_allowedBlocks,
+		_prioritizedInserterBlocks,
+		_templateLock,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
-		templateLock,
-		parentLock,
 		captureToolbars,
 		orientation,
-		updateBlockListSettings,
 		layout,
 		registry,
 	] );
diff --git a/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
new file mode 100644
index 00000000000000..f759b0e519fd60
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/warning-max-depth-exceeded.native.js
@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Warning from '../warning';
+import UnsupportedBlockDetails from '../unsupported-block-details';
+import { store as blockEditorStore } from '../../store';
+import { MAX_NESTING_DEPTH } from './constants';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+import {
+	useConvertToGroupButtons,
+	useConvertToGroupButtonProps,
+} from '../convert-to-group-buttons';
+
+const EMPTY_ARRAY = [];
+
+const WarningMaxDepthExceeded = ( { clientId } ) => {
+	const [ showDetails, setShowDetails ] = useState( false );
+
+	const isSelected = useSelect(
+		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
+		[ clientId ]
+	);
+
+	// We rely on the logic related to the Group/Ungroup buttons used in the block options to
+	// determine whether to use the Ungroup action.
+	const convertToGroupButtonProps = useConvertToGroupButtonProps( [
+		clientId,
+	] );
+	const { isUngroupable } = convertToGroupButtonProps;
+	const convertToGroupButtons = useConvertToGroupButtons( {
+		...convertToGroupButtonProps,
+	} );
+	const onUngroup = convertToGroupButtons.ungroup.onSelect;
+
+	const {
+		isUnsupportedBlockEditorSupported,
+		canEnableUnsupportedBlockEditor,
+	} = useUnsupportedBlockEditor( clientId );
+
+	/* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
+	const descriptionFormat = __(
+		'Blocks nested deeper than %d levels may not render properly in the mobile editor.'
+	);
+	let description = sprintf( descriptionFormat, MAX_NESTING_DEPTH );
+	if (
+		! isUnsupportedBlockEditorSupported &&
+		! canEnableUnsupportedBlockEditor
+	) {
+		// When UBE can't be used, the description mentions using the web browser to edit the block.
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using your web browser.'
+			);
+	}
+	// Otherwise, the description mentions using the web editor (i.e. UBE).
+	else {
+		description +=
+			' ' +
+			/* translators: Recommendation included in a warning related to having blocks deeply nested. */
+			__(
+				'For this reason, we recommend editing the block using the web editor.'
+			);
+	}
+	// If the block can be flattened, we also suggest to ungroup the block.
+	if ( isUngroupable ) {
+		description +=
+			' ' +
+			/* translators: Alternative option included in a warning related to having blocks deeply nested. */
+			__(
+				'Alternatively, you can flatten the content by ungrouping the block.'
+			);
+	}
+
+	return (
+		<TouchableWithoutFeedback
+			disabled={ ! isSelected }
+			accessibilityLabel={ __( 'Warning message' ) }
+			accessibilityRole="button"
+			accessibilityHint={ __( 'Tap here to show more details.' ) }
+			onPress={ () => setShowDetails( true ) }
+		>
+			<View>
+				<Warning
+					message={ __(
+						'Block cannot be rendered because it is deeply nested. Tap here for more details.'
+					) }
+				/>
+				<UnsupportedBlockDetails
+					clientId={ clientId }
+					showSheet={ showDetails }
+					onCloseSheet={ () => setShowDetails( false ) }
+					title={ __( 'Deeply nested block' ) }
+					description={ description }
+					customActions={
+						isUngroupable
+							? [
+									{
+										label: __( 'Ungroup block' ),
+										onPress: onUngroup,
+									},
+							  ]
+							: EMPTY_ARRAY
+					}
+				/>
+			</View>
+		</TouchableWithoutFeedback>
+	);
+};
+
+export default WarningMaxDepthExceeded;
diff --git a/packages/block-editor/src/components/inner-blocks/with-client-id.js b/packages/block-editor/src/components/inner-blocks/with-client-id.js
deleted file mode 100644
index 97c73ae2803934..00000000000000
--- a/packages/block-editor/src/components/inner-blocks/with-client-id.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-
-const withClientId = createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const { clientId } = useBlockEditContext();
-		return <WrappedComponent { ...props } clientId={ clientId } />;
-	},
-	'withClientId'
-);
-
-export default withClientId;
diff --git a/packages/components/src/mobile/inserter-button/README.md b/packages/block-editor/src/components/inserter-button/README.md
similarity index 100%
rename from packages/components/src/mobile/inserter-button/README.md
rename to packages/block-editor/src/components/inserter-button/README.md
diff --git a/packages/block-editor/src/components/inserter-button/index.native.js b/packages/block-editor/src/components/inserter-button/index.native.js
new file mode 100644
index 00000000000000..d9147b2f4d95bd
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-button/index.native.js
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { View, TouchableHighlight, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon } from '../block-icon';
+import styles from './style.scss';
+import sparkles from './sparkles';
+class MenuItem extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onPress = this.onPress.bind( this );
+	}
+
+	onPress() {
+		const { onSelect, item } = this.props;
+		onSelect( item );
+	}
+
+	render() {
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
+
+		const modalIconWrapperStyle = getStylesFromColorScheme(
+			styles.modalIconWrapper,
+			styles.modalIconWrapperDark
+		);
+		const modalIconStyle = styles.modalIcon;
+		const modalItemLabelStyle = getStylesFromColorScheme(
+			styles.modalItemLabel,
+			styles.modalItemLabelDark
+		);
+
+		const clipboardBlockStyles = getStylesFromColorScheme(
+			styles.clipboardBlock,
+			styles.clipboardBlockDark
+		);
+
+		const isClipboardBlock = item.id === 'clipboard';
+		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+		const blockIsNew = item.isNew === true;
+		const accessibilityLabelFormat = blockIsNew
+			? // translators: Newly available block name. %s: The localized block name
+			  __( '%s block, newly available' )
+			: // translators: %s: Block name e.g. "Image block"
+			  __( '%s block' );
+		const accessibilityLabel = sprintf(
+			accessibilityLabelFormat,
+			item.title
+		);
+
+		return (
+			<TouchableHighlight
+				style={ [
+					styles.touchableArea,
+					item.isDisabled ? styles.disabled : null,
+				] }
+				underlayColor="transparent"
+				activeOpacity={ 0.5 }
+				accessibilityRole="button"
+				accessibilityLabel={ accessibilityLabel }
+				onPress={ this.onPress }
+				disabled={ item.isDisabled }
+			>
+				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+					<View
+						style={ [
+							modalIconWrapperStyle,
+							itemWidth && {
+								width: itemWidth,
+							},
+							isClipboardBlock && clipboardBlockStyles,
+						] }
+					>
+						{ blockIsNew && (
+							<Icon
+								icon={ sparkles }
+								style={ styles.newIndicator }
+							/>
+						) }
+						<View style={ modalIconStyle }>
+							<BlockIcon
+								icon={ item.icon }
+								size={ modalIconStyle.width }
+							/>
+						</View>
+					</View>
+					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+						{ blockTitle }
+					</Text>
+				</View>
+			</TouchableHighlight>
+		);
+	}
+}
+
+const InserterButton = withPreferredColorScheme( MenuItem );
+
+InserterButton.Styles = {
+	modalItem: styles.modalItem,
+	modalIconWrapper: styles.modalIconWrapper,
+};
+
+export default InserterButton;
diff --git a/packages/components/src/mobile/inserter-button/sparkles.js b/packages/block-editor/src/components/inserter-button/sparkles.js
similarity index 95%
rename from packages/components/src/mobile/inserter-button/sparkles.js
rename to packages/block-editor/src/components/inserter-button/sparkles.js
index 663824e11a1d61..1b893f30bbfd52 100644
--- a/packages/components/src/mobile/inserter-button/sparkles.js
+++ b/packages/block-editor/src/components/inserter-button/sparkles.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SVG, Path } from '@wordpress/primitives';
+import { SVG, Path } from '@wordpress/components';
 
 const sparkles = (
 	<SVG viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/components/src/mobile/inserter-button/style.native.scss b/packages/block-editor/src/components/inserter-button/style.native.scss
similarity index 100%
rename from packages/components/src/mobile/inserter-button/style.native.scss
rename to packages/block-editor/src/components/inserter-button/style.native.scss
diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index c5cee77fa00255..ebef6304937aa7 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -2,40 +2,86 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
 	blocks,
 	icon,
 	children,
-	isPattern,
+	pattern,
 } ) => {
-	const transferData = {
-		type: 'inserter',
-		blocks,
-	};
+	const blockTypeIcon = useSelect(
+		( select ) => {
+			const { getBlockType } = select( blocksStore );
+			return (
+				blocks.length === 1 && getBlockType( blocks[ 0 ].name )?.icon
+			);
+		},
+		[ blocks ]
+	);
+
+	const { startDragging, stopDragging } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
+	const patternBlock = useMemo( () => {
+		return pattern?.type === INSERTER_PATTERN_TYPES.user &&
+			pattern?.syncStatus !== 'unsynced'
+			? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+			: undefined;
+	}, [ pattern?.type, pattern?.syncStatus, pattern?.id ] );
+
+	if ( ! isEnabled ) {
+		return children( {
+			draggable: false,
+			onDragStart: undefined,
+			onDragEnd: undefined,
+		} );
+	}
+
+	const draggableBlocks = patternBlock ?? blocks;
 	return (
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
-			transferData={ transferData }
+			transferData={ { type: 'inserter', blocks: draggableBlocks } }
+			onDragStart={ ( event ) => {
+				startDragging();
+				for ( const block of draggableBlocks ) {
+					const type = `wp-block:${ block.name }`;
+					// This will fill in the dataTransfer.types array so that
+					// the drop zone can check if the draggable is eligible.
+					// Unfortuantely, on drag start, we don't have access to the
+					// actual data, only the data keys/types.
+					event.dataTransfer.items.add( '', type );
+				}
+			} }
+			onDragEnd={ () => {
+				stopDragging();
+			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
-					icon={ icon }
-					isPattern={ isPattern }
+					icon={ icon || ( ! pattern && blockTypeIcon ) }
+					isPattern={ !! pattern }
 				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
-					draggable: isEnabled,
-					onDragStart: isEnabled ? onDraggableStart : undefined,
-					onDragEnd: isEnabled ? onDraggableEnd : undefined,
+					draggable: true,
+					onDragStart: onDraggableStart,
+					onDragEnd: onDraggableEnd,
 				} );
 			} }
 		</Draggable>
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 2c7e73ffc0f68e..c5bf2110702629 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,50 +32,52 @@ function InserterListItem( {
 	isDraggable,
 	...props
 } ) {
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const itemIconStyle = item.icon
 		? {
 				backgroundColor: item.icon.background,
 				color: item.icon.foreground,
 		  }
 		: {};
-	const blocks = useMemo( () => {
-		return [
+	const blocks = useMemo(
+		() => [
 			createBlock(
 				item.name,
 				item.initialAttributes,
 				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
 			),
-		];
-	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
+		],
+		[ item.name, item.initialAttributes, item.innerBlocks ]
+	);
 
-	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+	const isSynced =
+		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
+		isTemplatePart( item );
 
 	return (
 		<InserterDraggableBlocks
-			isEnabled={ isDraggable && ! item.disabled }
+			isEnabled={ isDraggable && ! item.isDisabled }
 			blocks={ blocks }
 			icon={ item.icon }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-types-list__list-item',
-
 						{
 							'is-synced': isSynced,
 						}
 					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
-						isDragging.current = true;
+						isDraggingRef.current = true;
 						if ( onDragStart ) {
 							onHover( null );
 							onDragStart( event );
 						}
 					} }
 					onDragEnd={ ( event ) => {
-						isDragging.current = false;
+						isDraggingRef.current = false;
 						if ( onDragEnd ) {
 							onDragEnd( event );
 						}
@@ -83,7 +85,7 @@ function InserterListItem( {
 				>
 					<InserterListboxItem
 						isFirst={ isFirst }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-types-list__item',
 							className
 						) }
@@ -107,20 +109,13 @@ function InserterListItem( {
 								onHover( null );
 							}
 						} }
-						onFocus={ () => {
-							if ( isDragging.current ) {
-								return;
-							}
-							onHover( item );
-						} }
 						onMouseEnter={ () => {
-							if ( isDragging.current ) {
+							if ( isDraggingRef.current ) {
 								return;
 							}
 							onHover( item );
 						} }
 						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
 						{ ...props }
 					>
 						<span
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..435f60ed9e2f14 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);
+				}
+			}
 		}
 	}
 }
@@ -22,7 +43,6 @@
 	cursor: pointer;
 	background: transparent;
 	word-break: break-word;
-	border-radius: $radius-block-ui;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -51,7 +71,7 @@
 				bottom: 0;
 				left: 0;
 				right: 0;
-				border-radius: $radius-block-ui;
+				border-radius: $radius-small;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
 				// This fixes drag-and-drop in Firefox.
@@ -76,7 +96,6 @@
 
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
-	border-radius: $radius-block-ui;
 	color: $gray-900;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
@@ -99,4 +118,5 @@
 .block-editor-block-types-list__item-title {
 	padding: 4px 2px 8px;
 	font-size: 12px;
+	hyphens: auto;
 }
diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
index 6345cb38c494ac..bc833b0e4c36b1 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -1,26 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
-	} );
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite focusShift focusWrap="horizontal" render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index 50adb4a7880387..06c266d793d2ff 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -1,34 +1,23 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	__unstableCompositeItem as CompositeItem,
-} from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import InserterListboxContext from './context';
+import { Button, Composite } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
-		<CompositeItem
+		<Composite.Item
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the Composite.Item `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -43,9 +32,13 @@ function InserterListboxItem(
 				if ( typeof children === 'function' ) {
 					return children( propsWithTabIndex );
 				}
-				return <Button { ...propsWithTabIndex }>{ children }</Button>;
+				return (
+					<Button __next40pxDefaultSize { ...propsWithTabIndex }>
+						{ children }
+					</Button>
+				);
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
index 710267660199d7..bafdbf8f5593c1 100644
--- a/packages/block-editor/src/components/inserter-listbox/row.js
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -1,24 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import InserterListboxContext from './context';
+import { forwardRef } from '@wordpress/element';
+import { Composite } from '@wordpress/components';
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <Composite.Group role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
deleted file mode 100644
index d9aecc848ab6d9..00000000000000
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import PatternExplorerSidebar from './sidebar';
-import PatternList from './patterns-list';
-
-function PatternsExplorer( { initialCategory, patternCategories } ) {
-	const [ filterValue, setFilterValue ] = useState( '' );
-	const [ selectedCategory, setSelectedCategory ] = useState(
-		initialCategory?.name
-	);
-	return (
-		<div className="block-editor-block-patterns-explorer">
-			<PatternExplorerSidebar
-				selectedCategory={ selectedCategory }
-				patternCategories={ patternCategories }
-				onClickCategory={ setSelectedCategory }
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
-			/>
-			<PatternList
-				filterValue={ filterValue }
-				selectedCategory={ selectedCategory }
-				patternCategories={ patternCategories }
-			/>
-		</div>
-	);
-}
-
-function PatternsExplorerModal( { onModalClose, ...restProps } ) {
-	return (
-		<Modal
-			title={ __( 'Patterns' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ onModalClose }
-			isFullScreen
-		>
-			<PatternsExplorer { ...restProps } />
-		</Modal>
-	);
-}
-
-export default PatternsExplorerModal;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
new file mode 100644
index 00000000000000..93a03ee200497e
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternExplorerSidebar from './pattern-explorer-sidebar';
+import PatternList from './pattern-list';
+import { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';
+
+function PatternsExplorer( { initialCategory, rootClientId } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+
+	const patternCategories = usePatternCategories( rootClientId );
+
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<PatternExplorerSidebar
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+				onClickCategory={ setSelectedCategory }
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
+			/>
+			<PatternList
+				searchValue={ searchValue }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+				rootClientId={ rootClientId }
+			/>
+		</div>
+	);
+}
+
+function PatternsExplorerModal( { onModalClose, ...restProps } ) {
+	return (
+		<Modal
+			title={ __( 'Patterns' ) }
+			onRequestClose={ onModalClose }
+			isFullScreen
+		>
+			<PatternsExplorer { ...restProps } />
+		</Modal>
+	);
+}
+
+export default PatternsExplorerModal;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
new file mode 100644
index 00000000000000..89384bc0537143
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, SearchControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function PatternCategoriesList( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ `${ baseClassName }__categories-list` }>
+			{ patternCategories.map( ( { name, label } ) => {
+				return (
+					<Button
+						__next40pxDefaultSize
+						key={ name }
+						label={ label }
+						className={ `${ baseClassName }__categories-list__item` }
+						isPressed={ selectedCategory === name }
+						onClick={ () => {
+							onClickCategory( name );
+						} }
+					>
+						{ label }
+					</Button>
+				);
+			} ) }
+		</div>
+	);
+}
+
+function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__search';
+	return (
+		<div className={ baseClassName }>
+			<SearchControl
+				__nextHasNoMarginBottom
+				onChange={ setSearchValue }
+				value={ searchValue }
+				label={ __( 'Search' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+		</div>
+	);
+}
+
+function PatternExplorerSidebar( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+	searchValue,
+	setSearchValue,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ baseClassName }>
+			<PatternsExplorerSearch
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
+			/>
+			{ ! searchValue && (
+				<PatternCategoriesList
+					selectedCategory={ selectedCategory }
+					patternCategories={ patternCategories }
+					onClickCategory={ onClickCategory }
+				/>
+			) }
+		</div>
+	);
+}
+
+export default PatternExplorerSidebar;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
new file mode 100644
index 00000000000000..8e5e50500ec72b
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -0,0 +1,166 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
+import { useDebounce } from '@wordpress/compose';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../../block-patterns-list';
+import useInsertionPoint from '../hooks/use-insertion-point';
+import usePatternsState from '../hooks/use-patterns-state';
+import InserterListbox from '../../inserter-listbox';
+import { searchItems } from '../search-items';
+import BlockPatternsPaging from '../../block-patterns-paging';
+import usePatternsPaging from '../hooks/use-patterns-paging';
+import {
+	INSERTER_PATTERN_TYPES,
+	allPatternsCategory,
+	myPatternsCategory,
+} from '../block-patterns-tab/utils';
+
+function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
+	if ( ! filterValue ) {
+		return null;
+	}
+
+	return (
+		<Heading
+			level={ 2 }
+			lineHeight="48px"
+			className="block-editor-block-patterns-explorer__search-results-count"
+		>
+			{ sprintf(
+				/* translators: %d: number of patterns. */
+				_n(
+					'%d pattern found',
+					'%d patterns found',
+					filteredBlockPatternsLength
+				),
+				filteredBlockPatternsLength
+			) }
+		</Heading>
+	);
+}
+
+function PatternList( {
+	searchValue,
+	selectedCategory,
+	patternCategories,
+	rootClientId,
+} ) {
+	const container = useRef();
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		rootClientId,
+		shouldFocusBlock: true,
+	} );
+	const [ patterns, , onClickPattern ] = usePatternsState(
+		onInsertBlocks,
+		destinationRootClientId,
+		selectedCategory
+	);
+
+	const registeredPatternCategories = useMemo(
+		() =>
+			patternCategories.map(
+				( patternCategory ) => patternCategory.name
+			),
+		[ patternCategories ]
+	);
+
+	const filteredBlockPatterns = useMemo( () => {
+		const filteredPatterns = patterns.filter( ( pattern ) => {
+			if ( selectedCategory === allPatternsCategory.name ) {
+				return true;
+			}
+			if (
+				selectedCategory === myPatternsCategory.name &&
+				pattern.type === INSERTER_PATTERN_TYPES.user
+			) {
+				return true;
+			}
+			if ( selectedCategory === 'uncategorized' ) {
+				const hasKnownCategory =
+					pattern.categories?.some( ( category ) =>
+						registeredPatternCategories.includes( category )
+					) ?? false;
+
+				return ! pattern.categories?.length || ! hasKnownCategory;
+			}
+
+			return pattern.categories?.includes( selectedCategory );
+		} );
+
+		if ( ! searchValue ) {
+			return filteredPatterns;
+		}
+
+		return searchItems( filteredPatterns, searchValue );
+	}, [
+		searchValue,
+		patterns,
+		selectedCategory,
+		registeredPatternCategories,
+	] );
+
+	// Announce search results on change.
+	useEffect( () => {
+		if ( ! searchValue ) {
+			return;
+		}
+		const count = filteredBlockPatterns.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );
+
+	const pagingProps = usePatternsPaging(
+		filteredBlockPatterns,
+		selectedCategory,
+		container
+	);
+
+	// Reset page when search value changes.
+	const [ previousSearchValue, setPreviousSearchValue ] =
+		useState( searchValue );
+	if ( searchValue !== previousSearchValue ) {
+		setPreviousSearchValue( searchValue );
+		pagingProps.changePage( 1 );
+	}
+
+	const hasItems = !! filteredBlockPatterns?.length;
+	return (
+		<div
+			className="block-editor-block-patterns-explorer__list"
+			ref={ container }
+		>
+			<PatternsListHeader
+				filterValue={ searchValue }
+				filteredBlockPatternsLength={ filteredBlockPatterns.length }
+			/>
+
+			<InserterListbox>
+				{ hasItems && (
+					<>
+						<BlockPatternsList
+							blockPatterns={ pagingProps.categoryPatterns }
+							onClickPattern={ onClickPattern }
+							isDraggable={ false }
+						/>
+						<BlockPatternsPaging { ...pagingProps } />
+					</>
+				) }
+			</InserterListbox>
+		</div>
+	);
+}
+
+export default PatternList;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
deleted file mode 100644
index a4e3c91cba4ba2..00000000000000
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, useEffect } from '@wordpress/element';
-import { _n, sprintf } from '@wordpress/i18n';
-import { useDebounce, useAsyncList } from '@wordpress/compose';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import BlockPatternsList from '../../block-patterns-list';
-import InserterNoResults from '../no-results';
-import useInsertionPoint from '../hooks/use-insertion-point';
-import usePatternsState from '../hooks/use-patterns-state';
-import InserterListbox from '../../inserter-listbox';
-import { searchItems } from '../search-items';
-
-const INITIAL_INSERTER_RESULTS = 2;
-
-function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
-	if ( ! filterValue ) {
-		return null;
-	}
-	return (
-		<Heading
-			level={ 2 }
-			lineHeight={ '48px' }
-			className="block-editor-block-patterns-explorer__search-results-count"
-		>
-			{ sprintf(
-				/* translators: %d: number of patterns. %s: block pattern search query */
-				_n(
-					'%1$d pattern found for "%2$s"',
-					'%1$d patterns found for "%2$s"',
-					filteredBlockPatternsLength
-				),
-				filteredBlockPatternsLength,
-				filterValue
-			) }
-		</Heading>
-	);
-}
-
-function PatternList( { filterValue, selectedCategory, patternCategories } ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
-	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
-		shouldFocusBlock: true,
-	} );
-	const [ allPatterns, , onSelectBlockPattern ] = usePatternsState(
-		onInsertBlocks,
-		destinationRootClientId
-	);
-	const registeredPatternCategories = useMemo(
-		() =>
-			patternCategories.map(
-				( patternCategory ) => patternCategory.name
-			),
-		[ patternCategories ]
-	);
-
-	const filteredBlockPatterns = useMemo( () => {
-		if ( ! filterValue ) {
-			return allPatterns.filter( ( pattern ) =>
-				selectedCategory === 'uncategorized'
-					? ! pattern.categories?.length ||
-					  pattern.categories.every(
-							( category ) =>
-								! registeredPatternCategories.includes(
-									category
-								)
-					  )
-					: pattern.categories?.includes( selectedCategory )
-			);
-		}
-		return searchItems( allPatterns, filterValue );
-	}, [ filterValue, selectedCategory, allPatterns ] );
-
-	// Announce search results on change.
-	useEffect( () => {
-		if ( ! filterValue ) {
-			return;
-		}
-		const count = filteredBlockPatterns.length;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
-
-	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
-
-	const hasItems = !! filteredBlockPatterns?.length;
-	return (
-		<div className="block-editor-block-patterns-explorer__list">
-			{ hasItems && (
-				<PatternsListHeader
-					filterValue={ filterValue }
-					filteredBlockPatternsLength={ filteredBlockPatterns.length }
-				/>
-			) }
-			<InserterListbox>
-				{ ! hasItems && <InserterNoResults /> }
-				{ hasItems && (
-					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
-						blockPatterns={ filteredBlockPatterns }
-						onClickPattern={ onSelectBlockPattern }
-						isDraggable={ false }
-					/>
-				) }
-			</InserterListbox>
-		</div>
-	);
-}
-
-export default PatternList;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js
deleted file mode 100644
index 122e1fd95ebb4f..00000000000000
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button, SearchControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-function PatternCategoriesList( {
-	selectedCategory,
-	patternCategories,
-	onClickCategory,
-} ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
-	return (
-		<div className={ `${ baseClassName }__categories-list` }>
-			{ patternCategories.map( ( { name, label } ) => {
-				return (
-					<Button
-						key={ name }
-						label={ label }
-						className={ `${ baseClassName }__categories-list__item` }
-						isPressed={ selectedCategory === name }
-						onClick={ () => {
-							onClickCategory( name );
-						} }
-					>
-						{ label }
-					</Button>
-				);
-			} ) }
-		</div>
-	);
-}
-
-function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__search';
-	return (
-		<div className={ baseClassName }>
-			<SearchControl
-				onChange={ setFilterValue }
-				value={ filterValue }
-				label={ __( 'Search for patterns' ) }
-				placeholder={ __( 'Search' ) }
-			/>
-		</div>
-	);
-}
-
-function PatternExplorerSidebar( {
-	selectedCategory,
-	patternCategories,
-	onClickCategory,
-	filterValue,
-	setFilterValue,
-} ) {
-	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
-	return (
-		<div className={ baseClassName }>
-			<PatternsExplorerSearch
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
-			/>
-			{ ! filterValue && (
-				<PatternCategoriesList
-					selectedCategory={ selectedCategory }
-					patternCategories={ patternCategories }
-					onClickCategory={ onClickCategory }
-				/>
-			) }
-		</div>
-	);
-}
-
-export default PatternExplorerSidebar;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
deleted file mode 100644
index 83d7b899f181f7..00000000000000
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ /dev/null
@@ -1,300 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	useMemo,
-	useState,
-	useCallback,
-	useRef,
-	useEffect,
-} from '@wordpress/element';
-import { _x, __, isRTL } from '@wordpress/i18n';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	FlexBlock,
-	Button,
-} from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
-import { focus } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
-import usePatternsState from './hooks/use-patterns-state';
-import BlockPatternList from '../block-patterns-list';
-import PatternsExplorerModal from './block-patterns-explorer/explorer';
-
-function usePatternsCategories() {
-	const [ allPatterns, allCategories ] = usePatternsState();
-
-	const hasRegisteredCategory = useCallback(
-		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
-				return false;
-			}
-
-			return pattern.categories.some( ( cat ) =>
-				allCategories.some( ( category ) => category.name === cat )
-			);
-		},
-		[ allCategories ]
-	);
-
-	// Remove any empty categories.
-	const populatedCategories = useMemo( () => {
-		const categories = allCategories
-			.filter( ( category ) =>
-				allPatterns.some( ( pattern ) =>
-					pattern.categories?.includes( category.name )
-				)
-			)
-			.sort( ( { name: currentName }, { name: nextName } ) => {
-				if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
-					return 0;
-				}
-				return currentName === 'featured' ? -1 : 1;
-			} );
-
-		if (
-			allPatterns.some(
-				( pattern ) => ! hasRegisteredCategory( pattern )
-			) &&
-			! categories.find(
-				( category ) => category.name === 'uncategorized'
-			)
-		) {
-			categories.push( {
-				name: 'uncategorized',
-				label: _x( 'Uncategorized' ),
-			} );
-		}
-
-		return categories;
-	}, [ allPatterns, allCategories ] );
-
-	return populatedCategories;
-}
-
-export function BlockPatternsCategoryDialog( {
-	rootClientId,
-	onInsert,
-	category,
-} ) {
-	const container = useRef();
-
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			const [ firstTabbable ] = focus.tabbable.find( container.current );
-			firstTabbable?.focus();
-		} );
-		return () => clearTimeout( timeout );
-	}, [ category ] );
-
-	return (
-		<div
-			ref={ container }
-			className="block-editor-inserter__patterns-category-panel"
-		>
-			<BlockPatternsCategoryPanel
-				rootClientId={ rootClientId }
-				onInsert={ onInsert }
-				category={ category }
-			/>
-		</div>
-	);
-}
-
-export function BlockPatternsCategoryPanel( {
-	rootClientId,
-	onInsert,
-	category,
-} ) {
-	const [ allPatterns, , onClick ] = usePatternsState(
-		onInsert,
-		rootClientId
-	);
-
-	const availableCategories = usePatternsCategories();
-	const currentCategoryPatterns = useMemo(
-		() =>
-			allPatterns.filter( ( pattern ) => {
-				if ( category.name !== 'uncategorized' ) {
-					return pattern.categories?.includes( category.name );
-				}
-
-				// The uncategorized category should show all the patterns without any category
-				// or with no available category.
-				const availablePatternCategories =
-					pattern.categories?.filter( ( cat ) =>
-						availableCategories.find(
-							( availableCategory ) =>
-								availableCategory.name === cat
-						)
-					) ?? [];
-
-				return availablePatternCategories.length === 0;
-			} ),
-		[ allPatterns, category ]
-	);
-
-	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
-
-	if ( ! currentCategoryPatterns.length ) {
-		return null;
-	}
-
-	return (
-		<div>
-			<div className="block-editor-inserter__patterns-category-panel-title">
-				{ category.label }
-			</div>
-			<p>{ category.description }</p>
-			<BlockPatternList
-				shownPatterns={ currentShownPatterns }
-				blockPatterns={ currentCategoryPatterns }
-				onClickPattern={ onClick }
-				label={ category.label }
-				orientation="vertical"
-				category={ category.label }
-				isDraggable
-			/>
-		</div>
-	);
-}
-
-function BlockPatternsTabs( {
-	onSelectCategory,
-	selectedCategory,
-	onInsert,
-	rootClientId,
-} ) {
-	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories();
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	return (
-		<>
-			{ ! isMobile && (
-				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<nav aria-label={ __( 'Block pattern categories' ) }>
-						<ItemGroup
-							role="list"
-							className="block-editor-inserter__block-patterns-tabs"
-						>
-							{ categories.map( ( category ) => (
-								<Item
-									role="listitem"
-									key={ category.name }
-									onClick={ () =>
-										onSelectCategory( category )
-									}
-									className={
-										category === selectedCategory
-											? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'
-											: 'block-editor-inserter__patterns-category'
-									}
-									aria-label={ category.label }
-									aria-current={
-										category === selectedCategory
-											? 'true'
-											: undefined
-									}
-								>
-									<HStack>
-										<FlexBlock>
-											{ category.label }
-										</FlexBlock>
-										<Icon icon={ chevronRight } />
-									</HStack>
-								</Item>
-							) ) }
-							<div role="listitem">
-								<Button
-									className="block-editor-inserter__patterns-explore-button"
-									onClick={ () =>
-										setShowPatternsExplorer( true )
-									}
-									variant="secondary"
-								>
-									{ __( 'Explore all patterns' ) }
-								</Button>
-							</div>
-						</ItemGroup>
-					</nav>
-				</div>
-			) }
-			{ isMobile && (
-				<BlockPatternsTabNavigation
-					onInsert={ onInsert }
-					rootClientId={ rootClientId }
-				/>
-			) }
-			{ showPatternsExplorer && (
-				<PatternsExplorerModal
-					initialCategory={ selectedCategory }
-					patternCategories={ categories }
-					onModalClose={ () => setShowPatternsExplorer( false ) }
-				/>
-			) }
-		</>
-	);
-}
-
-function BlockPatternsTabNavigation( { onInsert, rootClientId } ) {
-	const categories = usePatternsCategories();
-
-	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
-				<ItemGroup>
-					{ categories.map( ( category ) => (
-						<NavigatorButton
-							key={ category.name }
-							path={ `/category/${ category.name }` }
-							as={ Item }
-							isAction
-						>
-							<HStack>
-								<FlexBlock>{ category.label }</FlexBlock>
-								<Icon
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigatorButton>
-					) ) }
-				</ItemGroup>
-			</NavigatorScreen>
-
-			{ categories.map( ( category ) => (
-				<NavigatorScreen
-					key={ category.name }
-					path={ `/category/${ category.name }` }
-				>
-					<NavigatorBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						isSmall
-						aria-label={ __( 'Navigate to the categories list' ) }
-					>
-						{ __( 'Back' ) }
-					</NavigatorBackButton>
-					<BlockPatternsCategoryPanel
-						category={ category }
-						rootClientId={ rootClientId }
-						onInsert={ onInsert }
-					/>
-				</NavigatorScreen>
-			) ) }
-		</NavigatorProvider>
-	);
-}
-
-export default BlockPatternsTabs;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
new file mode 100644
index 00000000000000..45db4732aa9c6a
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternsExplorerModal from '../block-patterns-explorer';
+import MobileTabNavigation from '../mobile-tab-navigation';
+import { PatternCategoryPreviews } from './pattern-category-previews';
+import { usePatternCategories } from './use-pattern-categories';
+import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
+
+function BlockPatternsTab( {
+	onSelectCategory,
+	selectedCategory,
+	onInsert,
+	rootClientId,
+	children,
+} ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+
+	const categories = usePatternCategories( rootClientId );
+
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
+	return (
+		<>
+			{ ! isMobile && (
+				<div className="block-editor-inserter__block-patterns-tabs-container">
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
+					>
+						{ children }
+					</CategoryTabs>
+					<Button
+						__next40pxDefaultSize
+						className="block-editor-inserter__patterns-explore-button"
+						onClick={ () => setShowPatternsExplorer( true ) }
+						variant="secondary"
+					>
+						{ __( 'Explore all patterns' ) }
+					</Button>
+				</div>
+			) }
+			{ isMobile && (
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<div className="block-editor-inserter__category-panel">
+							<PatternCategoryPreviews
+								key={ category.name }
+								onInsert={ onInsert }
+								rootClientId={ rootClientId }
+								category={ category }
+							/>
+						</div>
+					) }
+				</MobileTabNavigation>
+			) }
+			{ showPatternsExplorer && (
+				<PatternsExplorerModal
+					initialCategory={ selectedCategory || categories[ 0 ] }
+					patternCategories={ categories }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
+					rootClientId={ rootClientId }
+				/>
+			) }
+		</>
+	);
+}
+
+export default BlockPatternsTab;
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
new file mode 100644
index 00000000000000..c6ce9ba97d2501
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -0,0 +1,199 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useMemo,
+	useState,
+	useCallback,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	FlexBlock,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import usePatternsState from '../hooks/use-patterns-state';
+import BlockPatternsList from '../../block-patterns-list';
+import usePatternsPaging from '../hooks/use-patterns-paging';
+import { PatternsFilter } from './patterns-filter';
+import { usePatternCategories } from './use-pattern-categories';
+import {
+	isPatternFiltered,
+	allPatternsCategory,
+	myPatternsCategory,
+	starterPatternsCategory,
+	INSERTER_PATTERN_TYPES,
+} from './utils';
+
+const noop = () => {};
+
+export function PatternCategoryPreviews( {
+	rootClientId,
+	onInsert,
+	onHover = noop,
+	category,
+	showTitlesAsTooltip,
+} ) {
+	const [ allPatterns, , onClickPattern ] = usePatternsState(
+		onInsert,
+		rootClientId,
+		category?.name
+	);
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
+
+	const availableCategories = usePatternCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+	const scrollContainerRef = useRef();
+	const currentCategoryPatterns = useMemo(
+		() =>
+			allPatterns.filter( ( pattern ) => {
+				if (
+					isPatternFiltered(
+						pattern,
+						patternSourceFilter,
+						patternSyncFilter
+					)
+				) {
+					return false;
+				}
+
+				if ( category.name === allPatternsCategory.name ) {
+					return true;
+				}
+
+				if (
+					category.name === myPatternsCategory.name &&
+					pattern.type === INSERTER_PATTERN_TYPES.user
+				) {
+					return true;
+				}
+
+				if (
+					category.name === starterPatternsCategory.name &&
+					pattern.blockTypes?.includes( 'core/post-content' )
+				) {
+					return true;
+				}
+
+				if ( category.name === 'uncategorized' ) {
+					// The uncategorized category should show all the patterns without any category...
+					if ( ! pattern.categories ) {
+						return true;
+					}
+
+					// ...or with no available category.
+					return ! pattern.categories.some( ( catName ) =>
+						availableCategories.some( ( c ) => c.name === catName )
+					);
+				}
+
+				return pattern.categories?.includes( category.name );
+			} ),
+		[
+			allPatterns,
+			availableCategories,
+			category.name,
+			patternSourceFilter,
+			patternSyncFilter,
+		]
+	);
+
+	const pagingProps = usePatternsPaging(
+		currentCategoryPatterns,
+		category,
+		scrollContainerRef
+	);
+	const { changePage } = pagingProps;
+
+	// Hide block pattern preview on unmount.
+	useEffect( () => () => onHover( null ), [] );
+
+	const onSetPatternSyncFilter = useCallback(
+		( value ) => {
+			setPatternSyncFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSyncFilter, changePage ]
+	);
+	const onSetPatternSourceFilter = useCallback(
+		( value ) => {
+			setPatternSourceFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSourceFilter, changePage ]
+	);
+
+	return (
+		<>
+			<VStack
+				spacing={ 2 }
+				className="block-editor-inserter__patterns-category-panel-header"
+			>
+				<HStack>
+					<FlexBlock>
+						<Heading
+							className="block-editor-inserter__patterns-category-panel-title"
+							size={ 13 }
+							level={ 4 }
+							as="div"
+						>
+							{ category.label }
+						</Heading>
+					</FlexBlock>
+					<PatternsFilter
+						patternSyncFilter={ patternSyncFilter }
+						patternSourceFilter={ patternSourceFilter }
+						setPatternSyncFilter={ onSetPatternSyncFilter }
+						setPatternSourceFilter={ onSetPatternSourceFilter }
+						scrollContainerRef={ scrollContainerRef }
+						category={ category }
+					/>
+				</HStack>
+				{ ! currentCategoryPatterns.length && (
+					<Text
+						variant="muted"
+						className="block-editor-inserter__patterns-category-no-results"
+					>
+						{ __( 'No results found' ) }
+					</Text>
+				) }
+			</VStack>
+			{ currentCategoryPatterns.length > 0 && (
+				<>
+					<Text
+						size="12"
+						as="p"
+						className="block-editor-inserter__help-text"
+					>
+						{ __( 'Drag and drop patterns into the canvas.' ) }
+					</Text>
+					<BlockPatternsList
+						ref={ scrollContainerRef }
+						blockPatterns={ pagingProps.categoryPatterns }
+						onClickPattern={ onClickPattern }
+						onHover={ onHover }
+						label={ category.label }
+						orientation="vertical"
+						category={ category.name }
+						isDraggable
+						showTitlesAsTooltip={ showTitlesAsTooltip }
+						patternFilter={ patternSourceFilter }
+						pagingProps={ pagingProps }
+					/>
+				</>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js b/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js
new file mode 100644
index 00000000000000..766082bd7690d9
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js
@@ -0,0 +1,182 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SVG,
+	Path,
+	DropdownMenu,
+	MenuGroup,
+	MenuItemsChoice,
+	ExternalLink,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	myPatternsCategory,
+	INSERTER_SYNC_TYPES,
+	INSERTER_PATTERN_TYPES,
+} from './utils';
+
+const getShouldDisableSyncFilter = ( sourceFilter ) =>
+	sourceFilter !== 'all' && sourceFilter !== 'user';
+const getShouldHideSourcesFilter = ( category ) => {
+	return category.name === myPatternsCategory.name;
+};
+
+const PATTERN_SOURCE_MENU_OPTIONS = [
+	{
+		value: 'all',
+		label: _x( 'All', 'patterns' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.directory,
+		label: __( 'Pattern Directory' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.theme,
+		label: __( 'Theme & Plugins' ),
+	},
+	{
+		value: INSERTER_PATTERN_TYPES.user,
+		label: __( 'User' ),
+	},
+];
+
+export function PatternsFilter( {
+	setPatternSyncFilter,
+	setPatternSourceFilter,
+	patternSyncFilter,
+	patternSourceFilter,
+	scrollContainerRef,
+	category,
+} ) {
+	// If the category is `myPatterns` then we need to set the source filter to `user`, but
+	// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
+	// the user may be confused when switching to another category if the haven't explicity set
+	// this filter themselves.
+	const currentPatternSourceFilter =
+		category.name === myPatternsCategory.name
+			? INSERTER_PATTERN_TYPES.user
+			: patternSourceFilter;
+
+	// We need to disable the sync filter option if the source filter is not 'all' or 'user'
+	// otherwise applying them will just result in no patterns being shown.
+	const shouldDisableSyncFilter = getShouldDisableSyncFilter(
+		currentPatternSourceFilter
+	);
+
+	// We also hide the directory and theme source filter if the category is `myPatterns`
+	// otherwise there will only be one option available.
+	const shouldHideSourcesFilter = getShouldHideSourcesFilter( category );
+
+	const patternSyncMenuOptions = useMemo(
+		() => [
+			{
+				value: 'all',
+				label: _x( 'All', 'patterns' ),
+			},
+			{
+				value: INSERTER_SYNC_TYPES.full,
+				label: _x( 'Synced', 'patterns' ),
+				disabled: shouldDisableSyncFilter,
+			},
+			{
+				value: INSERTER_SYNC_TYPES.unsynced,
+				label: _x( 'Not synced', 'patterns' ),
+				disabled: shouldDisableSyncFilter,
+			},
+		],
+		[ shouldDisableSyncFilter ]
+	);
+
+	function handleSetSourceFilterChange( newSourceFilter ) {
+		setPatternSourceFilter( newSourceFilter );
+		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
+			setPatternSyncFilter( 'all' );
+		}
+	}
+
+	return (
+		<>
+			<DropdownMenu
+				popoverProps={ {
+					placement: 'right-end',
+				} }
+				label={ __( 'Filter patterns' ) }
+				toggleProps={ { size: 'compact' } }
+				icon={
+					<Icon
+						icon={
+							<SVG
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<Path
+									d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
+									fill="currentColor"
+								/>
+							</SVG>
+						}
+					/>
+				}
+			>
+				{ () => (
+					<>
+						{ ! shouldHideSourcesFilter && (
+							<MenuGroup label={ __( 'Source' ) }>
+								<MenuItemsChoice
+									choices={ PATTERN_SOURCE_MENU_OPTIONS }
+									onSelect={ ( value ) => {
+										handleSetSourceFilterChange( value );
+										scrollContainerRef.current?.scrollTo(
+											0,
+											0
+										);
+									} }
+									value={ currentPatternSourceFilter }
+								/>
+							</MenuGroup>
+						) }
+						<MenuGroup label={ __( 'Type' ) }>
+							<MenuItemsChoice
+								choices={ patternSyncMenuOptions }
+								onSelect={ ( value ) => {
+									setPatternSyncFilter( value );
+									scrollContainerRef.current?.scrollTo(
+										0,
+										0
+									);
+								} }
+								value={ patternSyncFilter }
+							/>
+						</MenuGroup>
+						<div className="block-editor-inserter__patterns-filter-help">
+							{ createInterpolateElement(
+								__(
+									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'
+								),
+								{
+									Link: (
+										<ExternalLink
+											href={ __(
+												'https://wordpress.org/patterns/'
+											) }
+										/>
+									),
+								}
+							) }
+						</div>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js
new file mode 100644
index 00000000000000..2adc6b48579dd7
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { _x, _n, sprintf } from '@wordpress/i18n';
+
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import usePatternsState from '../hooks/use-patterns-state';
+import {
+	isPatternFiltered,
+	allPatternsCategory,
+	myPatternsCategory,
+	starterPatternsCategory,
+	INSERTER_PATTERN_TYPES,
+} from './utils';
+
+function hasRegisteredCategory( pattern, allCategories ) {
+	if ( ! pattern.categories || ! pattern.categories.length ) {
+		return false;
+	}
+
+	return pattern.categories.some( ( cat ) =>
+		allCategories.some( ( category ) => category.name === cat )
+	);
+}
+
+export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
+	const [ patterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
+
+	const filteredPatterns = useMemo(
+		() =>
+			sourceFilter === 'all'
+				? patterns
+				: patterns.filter(
+						( pattern ) =>
+							! isPatternFiltered( pattern, sourceFilter )
+				  ),
+		[ sourceFilter, patterns ]
+	);
+
+	// Remove any empty categories.
+	const populatedCategories = useMemo( () => {
+		const categories = allCategories
+			.filter( ( category ) =>
+				filteredPatterns.some( ( pattern ) =>
+					pattern.categories?.includes( category.name )
+				)
+			)
+			.sort( ( a, b ) => a.label.localeCompare( b.label ) );
+
+		if (
+			filteredPatterns.some(
+				( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
+			) &&
+			! categories.find(
+				( category ) => category.name === 'uncategorized'
+			)
+		) {
+			categories.push( {
+				name: 'uncategorized',
+				label: _x( 'Uncategorized' ),
+			} );
+		}
+		if (
+			filteredPatterns.some( ( pattern ) =>
+				pattern.blockTypes?.includes( 'core/post-content' )
+			)
+		) {
+			categories.unshift( starterPatternsCategory );
+		}
+		if (
+			filteredPatterns.some(
+				( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user
+			)
+		) {
+			categories.unshift( myPatternsCategory );
+		}
+		if ( filteredPatterns.length > 0 ) {
+			categories.unshift( {
+				name: allPatternsCategory.name,
+				label: allPatternsCategory.label,
+			} );
+		}
+		speak(
+			sprintf(
+				/* translators: %d: number of categories . */
+				_n(
+					'%d category button displayed.',
+					'%d category buttons displayed.',
+					categories.length
+				),
+				categories.length
+			)
+		);
+		return categories;
+	}, [ allCategories, filteredPatterns ] );
+
+	return populatedCategories;
+}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
new file mode 100644
index 00000000000000..7e2b71545e7969
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __, _x } from '@wordpress/i18n';
+
+export const INSERTER_PATTERN_TYPES = {
+	user: 'user',
+	theme: 'theme',
+	directory: 'directory',
+};
+
+export const INSERTER_SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+export const allPatternsCategory = {
+	name: 'allPatterns',
+	label: _x( 'All', 'patterns' ),
+};
+
+export const myPatternsCategory = {
+	name: 'myPatterns',
+	label: __( 'My patterns' ),
+};
+
+export const starterPatternsCategory = {
+	name: 'core/starter-content',
+	label: __( 'Starter content' ),
+};
+
+export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
+	const isUserPattern = pattern.name.startsWith( 'core/block' );
+	const isDirectoryPattern =
+		pattern.source === 'core' ||
+		pattern.source?.startsWith( 'pattern-directory' );
+
+	// If theme source selected, filter out user created patterns and those from
+	// the core patterns directory.
+	if (
+		sourceFilter === INSERTER_PATTERN_TYPES.theme &&
+		( isUserPattern || isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If the directory source is selected, filter out user created patterns
+	// and those bundled with the theme.
+	if (
+		sourceFilter === INSERTER_PATTERN_TYPES.directory &&
+		( isUserPattern || ! isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If user source selected, filter out theme patterns.
+	if (
+		sourceFilter === INSERTER_PATTERN_TYPES.user &&
+		pattern.type !== INSERTER_PATTERN_TYPES.user
+	) {
+		return true;
+	}
+
+	// Filter by sync status.
+	if (
+		syncFilter === INSERTER_SYNC_TYPES.full &&
+		pattern.syncStatus !== ''
+	) {
+		return true;
+	}
+
+	if (
+		syncFilter === INSERTER_SYNC_TYPES.unsynced &&
+		pattern.syncStatus !== 'unsynced' &&
+		isUserPattern
+	) {
+		return true;
+	}
+
+	return false;
+}
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index b5ecb5ad212753..844d5dd341437e 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -1,14 +1,9 @@
-/**
- * External dependencies
- */
-import { map, groupBy, orderBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useMemo, useEffect } from '@wordpress/element';
-import { pipe, useAsyncList } from '@wordpress/compose';
+import { useMemo, useEffect, forwardRef } from '@wordpress/element';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -17,6 +12,8 @@ import BlockTypesList from '../block-types-list';
 import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
+import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -30,19 +27,17 @@ const MAX_SUGGESTED_ITEMS = 6;
  */
 const EMPTY_ARRAY = [];
 
-export function BlockTypesTab( {
-	rootClientId,
-	onInsert,
+export function BlockTypesTabPanel( {
+	items,
+	collections,
+	categories,
+	onSelectItem,
 	onHover,
 	showMostUsedBlocks,
+	className,
 } ) {
-	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
 	const suggestedItems = useMemo( () => {
-		return orderBy( items, [ 'frecency' ], [ 'desc' ] ).slice(
+		return orderBy( items, 'frecency', 'desc' ).slice(
 			0,
 			MAX_SUGGESTED_ITEMS
 		);
@@ -52,16 +47,6 @@ export function BlockTypesTab( {
 		return items.filter( ( item ) => ! item.category );
 	}, [ items ] );
 
-	const itemsPerCategory = useMemo( () => {
-		return pipe(
-			( itemList ) =>
-				itemList.filter(
-					( item ) => item.category && item.category !== 'reusable'
-				),
-			( itemList ) => groupBy( itemList, 'category' )
-		)( items );
-	}, [ items ] );
-
 	const itemsPerCollection = useMemo( () => {
 		// Create a new Object to avoid mutating collection.
 		const result = { ...collections };
@@ -99,9 +84,12 @@ export function BlockTypesTab( {
 	);
 
 	return (
-		<InserterListbox>
-			<div>
-				{ showMostUsedBlocks && !! suggestedItems.length && (
+		<div className={ className }>
+			{ showMostUsedBlocks &&
+				// Only show the most used blocks if the total amount of block
+				// is larger than 1 row, otherwise it is not so useful.
+				items.length > 3 &&
+				!! suggestedItems.length && (
 					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
 							items={ suggestedItems }
@@ -112,68 +100,127 @@ export function BlockTypesTab( {
 					</InserterPanel>
 				) }
 
-				{ map( currentlyRenderedCategories, ( category ) => {
-					const categoryItems = itemsPerCategory[ category.slug ];
-					if ( ! categoryItems || ! categoryItems.length ) {
+			{ currentlyRenderedCategories.map( ( category ) => {
+				const categoryItems = items.filter(
+					( item ) => item.category === category.slug
+				);
+				if ( ! categoryItems || ! categoryItems.length ) {
+					return null;
+				}
+				return (
+					<InserterPanel
+						key={ category.slug }
+						title={ category.title }
+						icon={ category.icon }
+					>
+						<BlockTypesList
+							items={ categoryItems }
+							onSelect={ onSelectItem }
+							onHover={ onHover }
+							label={ category.title }
+						/>
+					</InserterPanel>
+				);
+			} ) }
+
+			{ didRenderAllCategories && uncategorizedItems.length > 0 && (
+				<InserterPanel
+					className="block-editor-inserter__uncategorized-blocks-panel"
+					title={ __( 'Uncategorized' ) }
+				>
+					<BlockTypesList
+						items={ uncategorizedItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
+					/>
+				</InserterPanel>
+			) }
+
+			{ currentlyRenderedCollections.map(
+				( [ namespace, collection ] ) => {
+					const collectionItems = itemsPerCollection[ namespace ];
+					if ( ! collectionItems || ! collectionItems.length ) {
 						return null;
 					}
+
 					return (
 						<InserterPanel
-							key={ category.slug }
-							title={ category.title }
-							icon={ category.icon }
+							key={ namespace }
+							title={ collection.title }
+							icon={ collection.icon }
 						>
 							<BlockTypesList
-								items={ categoryItems }
+								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								label={ category.title }
+								label={ collection.title }
 							/>
 						</InserterPanel>
 					);
-				} ) }
+				}
+			) }
+		</div>
+	);
+}
 
-				{ didRenderAllCategories && uncategorizedItems.length > 0 && (
-					<InserterPanel
-						className="block-editor-inserter__uncategorized-blocks-panel"
-						title={ __( 'Uncategorized' ) }
-					>
-						<BlockTypesList
-							items={ uncategorizedItems }
-							onSelect={ onSelectItem }
+export function BlockTypesTab(
+	{ rootClientId, onInsert, onHover, showMostUsedBlocks },
+	ref
+) {
+	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
+		rootClientId,
+		onInsert
+	);
+
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
+	const itemsForCurrentRoot = [];
+	const itemsRemaining = [];
+
+	for ( const item of items ) {
+		// Skip reusable blocks, they moved to the patterns tab.
+		if ( item.category === 'reusable' ) {
+			continue;
+		}
+
+		if ( rootClientId && item.isAllowedInCurrentRoot ) {
+			itemsForCurrentRoot.push( item );
+		} else {
+			itemsRemaining.push( item );
+		}
+	}
+
+	return (
+		<InserterListbox>
+			<div ref={ ref }>
+				{ !! itemsForCurrentRoot.length && (
+					<>
+						<BlockTypesTabPanel
+							items={ itemsForCurrentRoot }
+							categories={ categories }
+							collections={ collections }
+							onSelectItem={ onSelectItem }
 							onHover={ onHover }
-							label={ __( 'Uncategorized' ) }
+							showMostUsedBlocks={ showMostUsedBlocks }
+							className="block-editor-inserter__insertable-blocks-at-selection"
 						/>
-					</InserterPanel>
-				) }
-
-				{ map(
-					currentlyRenderedCollections,
-					( [ namespace, collection ] ) => {
-						const collectionItems = itemsPerCollection[ namespace ];
-						if ( ! collectionItems || ! collectionItems.length ) {
-							return null;
-						}
-
-						return (
-							<InserterPanel
-								key={ namespace }
-								title={ collection.title }
-								icon={ collection.icon }
-							>
-								<BlockTypesList
-									items={ collectionItems }
-									onSelect={ onSelectItem }
-									onHover={ onHover }
-									label={ collection.title }
-								/>
-							</InserterPanel>
-						);
-					}
+					</>
 				) }
+				<BlockTypesTabPanel
+					items={ itemsRemaining }
+					categories={ categories }
+					collections={ collections }
+					onSelectItem={ onSelectItem }
+					onHover={ onHover }
+					showMostUsedBlocks={ showMostUsedBlocks }
+					className="block-editor-inserter__all-blocks"
+				/>
 			</div>
 		</InserterListbox>
 	);
 }
 
-export default BlockTypesTab;
+export default forwardRef( BlockTypesTab );
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.native.js b/packages/block-editor/src/components/inserter/block-types-tab.native.js
index 97455915100840..e92efde21b1388 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.native.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const [ rawBlockTypes, , collections ] = useBlockTypesState(
 		rootClientId,
-		onSelect
+		onSelect,
+		true
 	);
 	const clipboardBlock = useClipboardBlock( rootClientId );
 	const filteredBlockTypes = filterInserterItems( rawBlockTypes );
@@ -66,6 +68,7 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 			sections={ sections }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks menu' ) }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
new file mode 100644
index 00000000000000..ff0a130f1a8271
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { usePrevious, useReducedMotion } from '@wordpress/compose';
+import {
+	privateApis as componentsPrivateApis,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function CategoryTabs( {
+	categories,
+	selectedCategory,
+	onSelectCategory,
+	children,
+} ) {
+	// Copied from InterfaceSkeleton.
+	const ANIMATION_DURATION = 0.25;
+	const disableMotion = useReducedMotion();
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
+
+	const previousSelectedCategory = usePrevious( selectedCategory );
+
+	const selectedTabId = selectedCategory ? selectedCategory.name : null;
+	const [ activeTabId, setActiveId ] = useState();
+	const firstTabId = categories?.[ 0 ]?.name;
+
+	// If there is no active tab, make the first tab the active tab, so that
+	// when focus is moved to the tablist, the first tab will be focused
+	// despite not being selected
+	if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+		setActiveId( firstTabId );
+	}
+
+	return (
+		<Tabs
+			selectOnMove={ false }
+			selectedTabId={ selectedTabId }
+			orientation="vertical"
+			onSelect={ ( categoryId ) => {
+				// Pass the full category object
+				onSelectCategory(
+					categories.find(
+						( category ) => category.name === categoryId
+					)
+				);
+			} }
+			activeTabId={ activeTabId }
+			onActiveTabIdChange={ setActiveId }
+		>
+			<Tabs.TabList className="block-editor-inserter__category-tablist">
+				{ categories.map( ( category ) => (
+					<Tabs.Tab
+						key={ category.name }
+						tabId={ category.name }
+						aria-label={ category.label }
+						aria-current={
+							category === selectedCategory ? 'true' : undefined
+						}
+					>
+						{ category.label }
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ categories.map( ( category ) => (
+				<Tabs.TabPanel
+					key={ category.name }
+					tabId={ category.name }
+					focusable={ false }
+				>
+					<motion.div
+						className="block-editor-inserter__category-panel"
+						initial={
+							! previousSelectedCategory ? 'closed' : 'open'
+						}
+						animate="open"
+						variants={ {
+							open: {
+								transform: 'translateX( 0 )',
+								transitionEnd: {
+									zIndex: '1',
+								},
+							},
+							closed: {
+								transform: 'translateX( -100% )',
+								zIndex: '-1',
+							},
+						} }
+						transition={ defaultTransition }
+					>
+						{ children }
+					</motion.div>
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+}
+
+export default CategoryTabs;
diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
index 0b7c8040af8d34..2ff8f1a1dc23c0 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -2,51 +2,104 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
+	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { isFiltered } from '../../../store/utils';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Retrieves the block types inserter state.
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
+ * @param {boolean}  isQuick
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert ) => {
-	const { categories, collections, items } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const { getCategories, getCollections } = select( blocksStore );
-
-			return {
-				categories: getCategories(),
-				collections: getCollections(),
-				items: getInserterItems( rootClientId ),
-			};
-		},
-		[ rootClientId ]
+const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
+	const options = useMemo(
+		() => ( { [ isFiltered ]: !! isQuick } ),
+		[ isQuick ]
+	);
+	const [ items ] = useSelect(
+		( select ) => [
+			select( blockEditorStore ).getInserterItems(
+				rootClientId,
+				options
+			),
+		],
+		[ rootClientId, options ]
 	);
+	const { getClosestAllowedInsertionPoint } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ categories, collections ] = useSelect( ( select ) => {
+		const { getCategories, getCollections } = select( blocksStore );
+		return [ getCategories(), getCollections() ];
+	}, [] );
 
 	const onSelectItem = useCallback(
-		( { name, initialAttributes, innerBlocks }, shouldFocusBlock ) => {
-			const insertedBlock = createBlock(
+		(
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			shouldFocusBlock
+		) => {
+			const destinationClientId = getClosestAllowedInsertionPoint(
 				name,
-				initialAttributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
+				rootClientId
 			);
+			if ( destinationClientId === null ) {
+				const title = getBlockType( name )?.title ?? name;
+				createErrorNotice(
+					sprintf(
+						/* translators: %s: block pattern title. */
+						__( 'Block "%s" can\'t be inserted.' ),
+						title
+					),
+					{
+						type: 'snackbar',
+						id: 'inserter-notice',
+					}
+				);
+				return;
+			}
 
-			onInsert( insertedBlock, undefined, shouldFocusBlock );
+			const insertedBlock =
+				syncStatus === 'unsynced'
+					? parse( content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: createBlock(
+							name,
+							initialAttributes,
+							createBlocksFromInnerBlocksTemplate( innerBlocks )
+					  );
+			onInsert(
+				insertedBlock,
+				undefined,
+				shouldFocusBlock,
+				destinationClientId
+			);
 		},
-		[ onInsert ]
+		[
+			getClosestAllowedInsertionPoint,
+			rootClientId,
+			onInsert,
+			createErrorNotice,
+		]
 	);
 
 	return [ items, categories, collections, onSelectItem ];
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..de814152c620b0 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
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { _n, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -11,6 +11,35 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+function getIndex( {
+	destinationRootClientId,
+	destinationIndex,
+	rootClientId,
+	registry,
+} ) {
+	if ( rootClientId === destinationRootClientId ) {
+		return destinationIndex;
+	}
+	const parents = [
+		'',
+		...registry
+			.select( blockEditorStore )
+			.getBlockParents( destinationRootClientId ),
+		destinationRootClientId,
+	];
+	const parentIndex = parents.indexOf( rootClientId );
+	if ( parentIndex !== -1 ) {
+		return (
+			registry
+				.select( blockEditorStore )
+				.getBlockIndex( parents[ parentIndex + 1 ] ) + 1
+		);
+	}
+	return registry.select( blockEditorStore ).getBlockOrder( rootClientId )
+		.length;
+}
 
 /**
  * @typedef WPInserterConfig
@@ -39,8 +68,14 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	selectBlockOnInsert = true,
 } ) {
-	const { getSelectedBlock } = useSelect( blockEditorStore );
+	const registry = useRegistry();
+	const {
+		getSelectedBlock,
+		getClosestAllowedInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
 			const {
@@ -48,15 +83,24 @@ function useInsertionPoint( {
 				getBlockRootClientId,
 				getBlockIndex,
 				getBlockOrder,
-			} = select( blockEditorStore );
+				getInsertionPoint,
+			} = unlock( select( blockEditorStore ) );
 			const selectedBlockClientId = getSelectedBlockClientId();
-
 			let _destinationRootClientId = rootClientId;
 			let _destinationIndex;
+			const insertionPoint = getInsertionPoint();
 
 			if ( insertionIndex !== undefined ) {
 				// Insert into a specific index.
 				_destinationIndex = insertionIndex;
+			} else if (
+				insertionPoint &&
+				insertionPoint.hasOwnProperty( 'index' )
+			) {
+				_destinationRootClientId = insertionPoint?.rootClientId
+					? insertionPoint.rootClientId
+					: rootClientId;
+				_destinationIndex = insertionPoint.index;
 			} else if ( clientId ) {
 				// Insert after a specific client ID.
 				_destinationIndex = getBlockIndex( clientId );
@@ -85,10 +129,23 @@ function useInsertionPoint( {
 		insertBlocks,
 		showInsertionPoint,
 		hideInsertionPoint,
-	} = useDispatch( blockEditorStore );
+		setLastFocus,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	const onInsertBlocks = useCallback(
-		( blocks, meta, shouldForceFocusBlock = false ) => {
+		( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => {
+			// When we are trying to move focus or select a new block on insert, we also
+			// need to clear the last focus to avoid the focus being set to the wrong block
+			// when tabbing back into the canvas if the block was added from outside the
+			// editor canvas.
+			if (
+				shouldForceFocusBlock ||
+				shouldFocusBlock ||
+				selectBlockOnInsert
+			) {
+				setLastFocus( null );
+			}
+
 			const selectedBlock = getSelectedBlock();
 
 			if (
@@ -106,9 +163,18 @@ function useInsertionPoint( {
 			} else {
 				insertBlocks(
 					blocks,
-					destinationIndex,
-					destinationRootClientId,
-					true,
+					isAppender || _rootClientId === undefined
+						? destinationIndex
+						: getIndex( {
+								destinationRootClientId,
+								destinationIndex,
+								rootClientId: _rootClientId,
+								registry,
+						  } ),
+					isAppender || _rootClientId === undefined
+						? destinationRootClientId
+						: _rootClientId,
+					selectBlockOnInsert,
 					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
 					meta
 				);
@@ -122,7 +188,7 @@ function useInsertionPoint( {
 			speak( message );
 
 			if ( onSelect ) {
-				onSelect();
+				onSelect( blocks );
 			}
 		},
 		[
@@ -134,18 +200,36 @@ function useInsertionPoint( {
 			destinationIndex,
 			onSelect,
 			shouldFocusBlock,
+			selectBlockOnInsert,
 		]
 	);
 
 	const onToggleInsertionPoint = useCallback(
-		( show ) => {
-			if ( show ) {
-				showInsertionPoint( destinationRootClientId, destinationIndex );
+		( item ) => {
+			if ( item && ! isBlockInsertionPointVisible() ) {
+				const allowedDestinationRootClientId =
+					getClosestAllowedInsertionPoint(
+						item.name,
+						destinationRootClientId
+					);
+				if ( allowedDestinationRootClientId !== null ) {
+					showInsertionPoint(
+						allowedDestinationRootClientId,
+						getIndex( {
+							destinationRootClientId,
+							destinationIndex,
+							rootClientId: allowedDestinationRootClientId,
+							registry,
+						} )
+					);
+				}
 			} else {
 				hideInsertionPoint();
 			}
 		},
 		[
+			getClosestAllowedInsertionPoint,
+			isBlockInsertionPointVisible,
 			showInsertionPoint,
 			hideInsertionPoint,
 			destinationRootClientId,
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
new file mode 100644
index 00000000000000..cdffef4a00513e
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { getScrollContainer } from '@wordpress/dom';
+
+const PAGE_SIZE = 20;
+
+/**
+ * Supplies values needed to page the patterns list client side.
+ *
+ * @param {Array}  currentCategoryPatterns An array of the current patterns to display.
+ * @param {string} currentCategory         The currently selected category.
+ * @param {Object} scrollContainerRef      Ref of container to to find scroll container for when moving between pages.
+ * @param {string} currentFilter           The currently search filter.
+ *
+ * @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)
+ */
+export default function usePatternsPaging(
+	currentCategoryPatterns,
+	currentCategory,
+	scrollContainerRef,
+	currentFilter = ''
+) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const previousCategory = usePrevious( currentCategory );
+	const previousFilter = usePrevious( currentFilter );
+	if (
+		( previousCategory !== currentCategory ||
+			previousFilter !== currentFilter ) &&
+		currentPage !== 1
+	) {
+		setCurrentPage( 1 );
+	}
+	const totalItems = currentCategoryPatterns.length;
+	const pageIndex = currentPage - 1;
+	const categoryPatterns = useMemo( () => {
+		return currentCategoryPatterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, currentCategoryPatterns ] );
+	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = getScrollContainer(
+			scrollContainerRef?.current
+		);
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
+
+	useEffect(
+		function scrollToTopOnCategoryChange() {
+			const scrollContainer = getScrollContainer(
+				scrollContainerRef?.current
+			);
+			scrollContainer?.scrollTo( 0, 0 );
+		},
+		[ currentCategory, scrollContainerRef ]
+	);
+
+	return {
+		totalItems,
+		categoryPatterns,
+		numPages,
+		changePage,
+		currentPage,
+	};
+}
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index e61a5df8717e87..91b34c0ec72c3d 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
+import { useCallback, useMemo } from '@wordpress/element';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -16,47 +11,127 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { isFiltered } from '../../../store/utils';
 
 /**
  * Retrieves the block patterns inserter state.
  *
- * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {string=}  rootClientId Insertion's root client ID.
+ * @param {Function} onInsert         function called when inserter a list of blocks.
+ * @param {string=}  rootClientId     Insertion's root client ID.
+ * @param {string}   selectedCategory The selected pattern category.
+ * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
  *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId ) => {
-	const { patternCategories, patterns } = useSelect(
+const usePatternsState = (
+	onInsert,
+	rootClientId,
+	selectedCategory,
+	isQuick
+) => {
+	const options = useMemo(
+		() => ( { [ isFiltered ]: !! isQuick } ),
+		[ isQuick ]
+	);
+	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
-				select( blockEditorStore );
+			const { getSettings, __experimentalGetAllowedPatterns } = unlock(
+				select( blockEditorStore )
+			);
+			const {
+				__experimentalUserPatternCategories,
+				__experimentalBlockPatternCategories,
+			} = getSettings();
 			return {
-				patterns: __experimentalGetAllowedPatterns( rootClientId ),
-				patternCategories:
-					getSettings().__experimentalBlockPatternCategories,
+				patterns: __experimentalGetAllowedPatterns(
+					rootClientId,
+					options
+				),
+				userPatternCategories: __experimentalUserPatternCategories,
+				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, options ]
+	);
+	const { getClosestAllowedInsertionPointForPattern } = unlock(
+		useSelect( blockEditorStore )
 	);
+
+	const allCategories = useMemo( () => {
+		const categories = [ ...patternCategories ];
+		userPatternCategories?.forEach( ( userCategory ) => {
+			if (
+				! categories.find(
+					( existingCategory ) =>
+						existingCategory.name === userCategory.name
+				)
+			) {
+				categories.push( userCategory );
+			}
+		} );
+		return categories;
+	}, [ patternCategories, userPatternCategories ] );
+
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onClickPattern = useCallback( ( pattern, blocks ) => {
-		onInsert(
-			map( blocks, ( block ) => cloneBlock( block ) ),
-			pattern.name
-		);
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: block pattern title. */
-				__( 'Block pattern "%s" inserted.' ),
-				pattern.title
-			),
-			{
-				type: 'snackbar',
+	const onClickPattern = useCallback(
+		( pattern, blocks ) => {
+			const destinationRootClientId = isQuick
+				? rootClientId
+				: getClosestAllowedInsertionPointForPattern(
+						pattern,
+						rootClientId
+				  );
+			if ( destinationRootClientId === null ) {
+				return;
 			}
-		);
-	}, [] );
+			const patternBlocks =
+				pattern.type === INSERTER_PATTERN_TYPES.user &&
+				pattern.syncStatus !== 'unsynced'
+					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+					: blocks;
+			onInsert(
+				( patternBlocks ?? [] ).map( ( block ) => {
+					const clonedBlock = cloneBlock( block );
+					if (
+						clonedBlock.attributes.metadata?.categories?.includes(
+							selectedCategory
+						)
+					) {
+						clonedBlock.attributes.metadata.categories = [
+							selectedCategory,
+						];
+					}
+					return clonedBlock;
+				} ),
+				pattern.name,
+				false,
+				destinationRootClientId
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: %s: block pattern title. */
+					__( 'Block pattern "%s" inserted.' ),
+					pattern.title
+				),
+				{
+					type: 'snackbar',
+					id: 'inserter-notice',
+				}
+			);
+		},
+		[
+			createSuccessNotice,
+			onInsert,
+			selectedCategory,
+			rootClientId,
+			getClosestAllowedInsertionPointForPattern,
+			isQuick,
+		]
+	);
 
-	return [ patterns, patternCategories, onClickPattern ];
+	return [ patterns, allCategories, onClickPattern ];
 };
 
 export default usePatternsState;
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 17183d13a87090..1af81d0231a1a8 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,21 +31,26 @@ const defaultRenderToggle = ( {
 	toggleProps = {},
 	prioritizePatterns,
 } ) => {
-	let label;
-	if ( hasSingleBlockType ) {
+	const {
+		as: Wrapper = Button,
+		label: labelProp,
+		onClick,
+		...rest
+	} = toggleProps;
+
+	let label = labelProp;
+	if ( ! label && hasSingleBlockType ) {
 		label = sprintf(
 			// translators: %s: the name of the block when there is only one
 			_x( 'Add %s', 'directly add the only allowed block' ),
 			blockTitle
 		);
-	} else if ( prioritizePatterns ) {
+	} else if ( ! label && prioritizePatterns ) {
 		label = __( 'Add pattern' );
-	} else {
+	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}
 
-	const { onClick, ...rest } = toggleProps;
-
 	// Handle both onClick functions from the toggle and the parent component.
 	function handleClick( event ) {
 		if ( onToggle ) {
@@ -57,7 +62,7 @@ const defaultRenderToggle = ( {
 	}
 
 	return (
-		<Button
+		<Wrapper
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"
@@ -97,7 +102,7 @@ class Inserter extends Component {
 	 *                                    pressed.
 	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown toggle element.
+	 * @return {Element} Dropdown toggle element.
 	 */
 	renderToggle( { onToggle, isOpen } ) {
 		const {
@@ -130,7 +135,7 @@ class Inserter extends Component {
 	 * @param {Function} options.onClose Callback to invoke when dropdown is
 	 *                                   closed.
 	 *
-	 * @return {WPElement} Dropdown content element.
+	 * @return {Element} Dropdown content element.
 	 */
 	renderContent( { onClose } ) {
 		const {
@@ -143,18 +148,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 }
 				/>
 			);
 		}
@@ -168,7 +186,6 @@ class Inserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
-				prioritizePatterns={ prioritizePatterns }
 			/>
 		);
 	}
@@ -190,11 +207,10 @@ class Inserter extends Component {
 		return (
 			<Dropdown
 				className="block-editor-inserter"
-				contentClassName={ classnames(
-					'block-editor-inserter__popover',
-					{ 'is-quick': isQuick }
-				) }
-				position={ position }
+				contentClassName={ clsx( 'block-editor-inserter__popover', {
+					'is-quick': isQuick,
+				} ) }
+				popoverProps={ { position, shift: true } }
 				onToggle={ this.onToggle }
 				expandOnMobile
 				headerTitle={ __( 'Add a block' ) }
@@ -207,48 +223,51 @@ class Inserter extends Component {
 }
 
 export default compose( [
-	withSelect( ( select, { clientId, rootClientId } ) => {
-		const {
-			getBlockRootClientId,
-			hasInserterItems,
-			__experimentalGetAllowedBlocks,
-			__experimentalGetDirectInsertBlock,
-			getSettings,
-		} = select( blockEditorStore );
-
-		const { getBlockVariations } = select( blocksStore );
-
-		rootClientId =
-			rootClientId || getBlockRootClientId( clientId ) || undefined;
-
-		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
-
-		const directInsertBlock =
-			__experimentalGetDirectInsertBlock( rootClientId );
-
-		const settings = getSettings();
-
-		const hasSingleBlockType =
-			allowedBlocks?.length === 1 &&
-			getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
-				?.length === 0;
-
-		let allowedBlockType = false;
-		if ( hasSingleBlockType ) {
-			allowedBlockType = allowedBlocks[ 0 ];
+	withSelect(
+		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
+			const {
+				getBlockRootClientId,
+				hasInserterItems,
+				getAllowedBlocks,
+				getDirectInsertBlock,
+				getSettings,
+			} = select( blockEditorStore );
+
+			const { getBlockVariations } = select( blocksStore );
+
+			rootClientId =
+				rootClientId || getBlockRootClientId( clientId ) || undefined;
+
+			const allowedBlocks = getAllowedBlocks( rootClientId );
+
+			const directInsertBlock =
+				shouldDirectInsert && getDirectInsertBlock( rootClientId );
+
+			const settings = getSettings();
+
+			const hasSingleBlockType =
+				allowedBlocks?.length === 1 &&
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+					?.length === 0;
+
+			let allowedBlockType = false;
+			if ( hasSingleBlockType ) {
+				allowedBlockType = allowedBlocks[ 0 ];
+			}
+
+			return {
+				hasItems: hasInserterItems( rootClientId ),
+				hasSingleBlockType,
+				blockTitle: allowedBlockType ? allowedBlockType.title : '',
+				allowedBlockType,
+				directInsertBlock,
+				rootClientId,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId,
+			};
 		}
-
-		return {
-			hasItems: hasInserterItems( rootClientId ),
-			hasSingleBlockType,
-			blockTitle: allowedBlockType ? allowedBlockType.title : '',
-			allowedBlockType,
-			directInsertBlock,
-			rootClientId,
-			prioritizePatterns:
-				settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
-		};
-	} ),
+	),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
 		return {
 			insertOnlyAllowedBlock() {
@@ -260,6 +279,7 @@ export default compose( [
 					allowedBlockType,
 					directInsertBlock,
 					onSelectOrClose,
+					selectBlockOnInsert,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType && ! directInsertBlock ) {
@@ -370,10 +390,17 @@ export default compose( [
 					blockToInsert = createBlock( allowedBlockType.name );
 				}
 
-				insertBlock( blockToInsert, getInsertionIndex(), rootClientId );
+				insertBlock(
+					blockToInsert,
+					getInsertionIndex(),
+					rootClientId,
+					selectBlockOnInsert
+				);
 
 				if ( onSelectOrClose ) {
-					onSelectOrClose();
+					onSelectOrClose( {
+						clientId: blockToInsert?.clientId,
+					} );
 				}
 
 				const message = sprintf(
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index 7dcc0fdbef0e13..5966b3d90c66fb 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform, Text } from 'react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -35,33 +35,17 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 const defaultRenderToggle = ( {
 	onToggle,
 	disabled,
-	style,
-	containerStyle,
+	iconStyle,
+	buttonStyle,
 	onLongPress,
-	useExpandedMode,
 } ) => {
-	// The "expanded mode" refers to the editor's appearance when no blocks
-	// are currently selected. The "add block" button has a separate style
-	// for the "expanded mode", which are added via the below "expandedModeViewProps"
-	// and "expandedModeViewText" variables.
-	const expandedModeViewProps = useExpandedMode && {
-		icon: <Icon icon={ plus } style={ style } />,
-		customContainerStyles: containerStyle,
-		fixedRatio: false,
-	};
-	const expandedModeViewText = (
-		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
-			{ __( 'Add blocks' ) }
-		</Text>
-	);
-
 	return (
 		<ToolbarButton
 			title={ _x(
 				'Add block',
 				'Generic label for block inserter button'
 			) }
-			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			icon={ <Icon icon={ plus } style={ iconStyle } /> }
 			onClick={ onToggle }
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
@@ -69,12 +53,12 @@ const defaultRenderToggle = ( {
 				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
+				hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
 			} }
 			isDisabled={ disabled }
-			{ ...expandedModeViewProps }
-		>
-			{ useExpandedMode && expandedModeViewText }
-		</ToolbarButton>
+			customContainerStyles={ buttonStyle }
+			fixedRatio={ false }
+		/>
 	);
 };
 
@@ -216,7 +200,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
@@ -241,7 +225,7 @@ export class Inserter extends Component {
 	 *                                    pressed.
 	 * @param {boolean}  options.isOpen   Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown toggle element.
+	 * @return {Element} Dropdown toggle element.
 	 */
 	renderInserterToggle( { onToggle, isOpen } ) {
 		const {
@@ -249,23 +233,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
-			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = useExpandedMode
-			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
-			: getStylesFromColorScheme(
-					styles[ 'inserter-menu__add-block-button-icon' ],
-					styles[ 'inserter-menu__add-block-button-icon--dark' ]
-			  );
-
-		const containerStyle = getStylesFromColorScheme(
+
+		const buttonStyle = getStylesFromColorScheme(
 			styles[ 'inserter-menu__add-block-button' ],
 			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
+		const iconStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button-icon' ],
+			styles[ 'inserter-menu__add-block-button-icon--dark' ]
+		);
+
 		const onPress = () => {
 			this.setState(
 				{
@@ -301,10 +283,9 @@ export class Inserter extends Component {
 					onToggle: onPress,
 					isOpen,
 					disabled,
-					style,
-					containerStyle,
+					iconStyle,
+					buttonStyle,
 					onLongPress,
-					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }
@@ -324,7 +305,7 @@ export class Inserter extends Component {
 	 *                                   closed.
 	 * @param {boolean}  options.isOpen  Whether dropdown is currently open.
 	 *
-	 * @return {WPElement} Dropdown content element.
+	 * @return {Element} Dropdown content element.
 	 */
 	renderContent( { onClose, isOpen } ) {
 		const { clientId, isAppender } = this.props;
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 23dfdb7fd7dc62..4e10a051996a9f 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import InserterMenu from './menu';
+import { PrivateInserterMenu } from './menu';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
@@ -20,30 +20,30 @@ function InserterLibrary(
 		showInserterHelpPanel,
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 		__experimentalFilterValue,
+		onPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
-	const { destinationRootClientId, prioritizePatterns } = useSelect(
+	const { destinationRootClientId } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, getSettings } =
-				select( blockEditorStore );
-
+			const { getBlockRootClientId } = select( blockEditorStore );
 			const _rootClientId =
 				rootClientId || getBlockRootClientId( clientId ) || undefined;
 			return {
 				destinationRootClientId: _rootClientId,
-				prioritizePatterns:
-					getSettings().__experimentalPreferPatternsOnRoot,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
 
 	return (
-		<InserterMenu
+		<PrivateInserterMenu
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -52,11 +52,26 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
+			onPatternCategorySelection={ onPatternCategorySelection }
+			__experimentalInitialTab={ __experimentalInitialTab }
+			__experimentalInitialCategory={ __experimentalInitialCategory }
 			shouldFocusBlock={ shouldFocusBlock }
-			prioritizePatterns={ prioritizePatterns }
+			ref={ ref }
+			onClose={ onClose }
+		/>
+	);
+}
+
+export const PrivateInserterLibrary = forwardRef( InserterLibrary );
+
+function PublicInserterLibrary( props, ref ) {
+	return (
+		<PrivateInserterLibrary
+			{ ...props }
+			onPatternCategorySelection={ undefined }
 			ref={ ref }
 		/>
 	);
 }
 
-export default forwardRef( InserterLibrary );
+export default forwardRef( PublicInserterLibrary );
diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
new file mode 100644
index 00000000000000..694b321832422a
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+/** @typedef {import('../../../store/actions').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('../../../store/actions').InserterMediaItem} InserterMediaItem */
+
+/**
+ * Fetches media items based on the provided category.
+ * Each media category is responsible for providing a `fetch` function.
+ *
+ * @param {Object}               category The media category to fetch results for.
+ * @param {InserterMediaRequest} query    The query args to use for the request.
+ * @return {InserterMediaItem[]} The media results.
+ */
+export function useMediaResults( category, query = {} ) {
+	const [ mediaList, setMediaList ] = useState();
+	const [ isLoading, setIsLoading ] = useState( false );
+	// We need to keep track of the last request made because
+	// multiple request can be fired without knowing the order
+	// of resolution, and we need to ensure we are showing
+	// the results of the last request.
+	// In the future we could use AbortController to cancel previous
+	// requests, but we don't for now as it involves adding support
+	// for this to `core-data` package.
+	const lastRequestRef = useRef();
+	useEffect( () => {
+		( async () => {
+			const key = JSON.stringify( {
+				category: category.name,
+				...query,
+			} );
+			lastRequestRef.current = key;
+			setIsLoading( true );
+			setMediaList( [] ); // Empty the previous results.
+			const _media = await category.fetch?.( query );
+			if ( key === lastRequestRef.current ) {
+				setMediaList( _media );
+				setIsLoading( false );
+			}
+		} )();
+	}, [ category.name, ...Object.values( query ) ] );
+	return { mediaList, isLoading };
+}
+
+export function useMediaCategories( rootClientId ) {
+	const [ categories, setCategories ] = useState( [] );
+
+	const inserterMediaCategories = useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getInserterMediaCategories(),
+		[]
+	);
+	const { canInsertImage, canInsertVideo, canInsertAudio } = useSelect(
+		( select ) => {
+			const { canInsertBlockType } = select( blockEditorStore );
+			return {
+				canInsertImage: canInsertBlockType(
+					'core/image',
+					rootClientId
+				),
+				canInsertVideo: canInsertBlockType(
+					'core/video',
+					rootClientId
+				),
+				canInsertAudio: canInsertBlockType(
+					'core/audio',
+					rootClientId
+				),
+			};
+		},
+		[ rootClientId ]
+	);
+	useEffect( () => {
+		( async () => {
+			const _categories = [];
+			// If `inserterMediaCategories` is not defined in
+			// block editor settings, do not show any media categories.
+			if ( ! inserterMediaCategories ) {
+				return;
+			}
+			// Loop through categories to check if they have at least one media item.
+			const categoriesHaveMedia = new Map(
+				await Promise.all(
+					inserterMediaCategories.map( async ( category ) => {
+						// Some sources are external and we don't need to make a request.
+						if ( category.isExternalResource ) {
+							return [ category.name, true ];
+						}
+						let results = [];
+						try {
+							results = await category.fetch( {
+								per_page: 1,
+							} );
+						} catch ( e ) {
+							// If the request fails, we shallow the error and just don't show
+							// the category, in order to not break the media tab.
+						}
+						return [ category.name, !! results.length ];
+					} )
+				)
+			);
+			// We need to filter out categories that don't have any media items or
+			// whose corresponding block type is not allowed to be inserted, based
+			// on the category's `mediaType`.
+			const canInsertMediaType = {
+				image: canInsertImage,
+				video: canInsertVideo,
+				audio: canInsertAudio,
+			};
+			inserterMediaCategories.forEach( ( category ) => {
+				if (
+					canInsertMediaType[ category.mediaType ] &&
+					categoriesHaveMedia.get( category.name )
+				) {
+					_categories.push( category );
+				}
+			} );
+			if ( !! _categories.length ) {
+				setCategories( _categories );
+			}
+		} )();
+	}, [
+		canInsertImage,
+		canInsertVideo,
+		canInsertAudio,
+		inserterMediaCategories,
+	] );
+	return categories;
+}
diff --git a/packages/block-editor/src/components/inserter/media-tab/index.js b/packages/block-editor/src/components/inserter/media-tab/index.js
new file mode 100644
index 00000000000000..2a44fd922f5239
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/index.js
@@ -0,0 +1,3 @@
+export { default as MediaTab } from './media-tab';
+export { MediaCategoryPanel } from './media-panel';
+export { useMediaCategories } from './hooks';
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-list.js b/packages/block-editor/src/components/inserter/media-tab/media-list.js
new file mode 100644
index 00000000000000..73f38cfc306fbc
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/media-list.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Composite } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { MediaPreview } from './media-preview';
+
+function MediaList( {
+	mediaList,
+	category,
+	onClick,
+	label = __( 'Media List' ),
+} ) {
+	return (
+		<Composite
+			role="listbox"
+			className="block-editor-inserter__media-list"
+			aria-label={ label }
+		>
+			{ mediaList.map( ( media, index ) => (
+				<MediaPreview
+					key={ media.id || media.sourceId || index }
+					media={ media }
+					category={ category }
+					onClick={ onClick }
+				/>
+			) ) }
+		</Composite>
+	);
+}
+
+export default MediaList;
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
new file mode 100644
index 00000000000000..cc19403f9d9473
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner, SearchControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDebouncedInput } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import MediaList from './media-list';
+import { useMediaResults } from './hooks';
+import InserterNoResults from '../no-results';
+
+const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
+
+export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const { mediaList, isLoading } = useMediaResults( category, {
+		per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
+		search: debouncedSearch,
+	} );
+	const baseCssClass = 'block-editor-inserter__media-panel';
+	const searchLabel = category.labels.search_items || __( 'Search' );
+	return (
+		<div className={ baseCssClass }>
+			<SearchControl
+				__nextHasNoMarginBottom
+				className={ `${ baseCssClass }-search` }
+				onChange={ setSearch }
+				value={ search }
+				label={ searchLabel }
+				placeholder={ searchLabel }
+			/>
+			{ isLoading && (
+				<div className={ `${ baseCssClass }-spinner` }>
+					<Spinner />
+				</div>
+			) }
+			{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }
+			{ ! isLoading && !! mediaList?.length && (
+				<MediaList
+					rootClientId={ rootClientId }
+					onClick={ onInsert }
+					mediaList={ mediaList }
+					category={ category }
+				/>
+			) }
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
new file mode 100644
index 00000000000000..319c25c01831c8
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
@@ -0,0 +1,317 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Tooltip,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Spinner,
+	Modal,
+	Flex,
+	FlexItem,
+	Button,
+	Composite,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useCallback, useState } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { moreVertical, external } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { isBlobURL } from '@wordpress/blob';
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import InserterDraggableBlocks from '../../inserter-draggable-blocks';
+import { getBlockAndPreviewFromMedia } from './utils';
+import { store as blockEditorStore } from '../../../store';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const MAXIMUM_TITLE_LENGTH = 25;
+const MEDIA_OPTIONS_POPOVER_PROPS = {
+	position: 'bottom left',
+	className:
+		'block-editor-inserter__media-list__item-preview-options__popover',
+};
+
+function MediaPreviewOptions( { category, media } ) {
+	if ( ! category.getReportUrl ) {
+		return null;
+	}
+	const reportUrl = category.getReportUrl( media );
+	return (
+		<DropdownMenu
+			className="block-editor-inserter__media-list__item-preview-options"
+			label={ __( 'Options' ) }
+			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
+			icon={ moreVertical }
+		>
+			{ () => (
+				<MenuGroup>
+					<MenuItem
+						onClick={ () =>
+							window.open( reportUrl, '_blank' ).focus()
+						}
+						icon={ external }
+					>
+						{ sprintf(
+							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
+							__( 'Report %s' ),
+							category.mediaType
+						) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function InsertExternalImageModal( { onClose, onSubmit } ) {
+	return (
+		<Modal
+			title={ __( 'Insert external image' ) }
+			onRequestClose={ onClose }
+			className="block-editor-inserter-media-tab-media-preview-inserter-external-image-modal"
+		>
+			<VStack spacing={ 3 }>
+				<p>
+					{ __(
+						'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'
+					) }
+				</p>
+				<p>
+					{ __(
+						'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'
+					) }
+				</p>
+			</VStack>
+			<Flex
+				className="block-editor-block-lock-modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ onClose }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ onSubmit }
+					>
+						{ __( 'Insert' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export function MediaPreview( { media, onClick, category } ) {
+	const [ showExternalUploadModal, setShowExternalUploadModal ] =
+		useState( false );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ isInserting, setIsInserting ] = useState( false );
+	const [ block, preview ] = useMemo(
+		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
+		[ media, category.mediaType ]
+	);
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+	const { getSettings, getBlock } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const onMediaInsert = useCallback(
+		( previewBlock ) => {
+			// Prevent multiple uploads when we're in the process of inserting.
+			if ( isInserting ) {
+				return;
+			}
+
+			const settings = getSettings();
+			const clonedBlock = cloneBlock( previewBlock );
+			const { id, url, caption } = clonedBlock.attributes;
+
+			// User has no permission to upload media.
+			if ( ! id && ! settings.mediaUpload ) {
+				setShowExternalUploadModal( true );
+				return;
+			}
+
+			// Media item already exists in library, so just insert it.
+			if ( !! id ) {
+				onClick( clonedBlock );
+				return;
+			}
+
+			setIsInserting( true );
+			// Media item does not exist in library, so try to upload it.
+			// Fist fetch the image data. This may fail if the image host
+			// doesn't allow CORS with the domain.
+			// If this happens, we insert the image block using the external
+			// URL and let the user know about the possible implications.
+			window
+				.fetch( url )
+				.then( ( response ) => response.blob() )
+				.then( ( blob ) => {
+					const fileName = getFilename( url ) || 'image.jpg';
+					const file = new File( [ blob ], fileName, {
+						type: blob.type,
+					} );
+
+					settings.mediaUpload( {
+						filesList: [ file ],
+						additionalData: { caption },
+						onFileChange( [ img ] ) {
+							if ( isBlobURL( img.url ) ) {
+								return;
+							}
+
+							if ( ! getBlock( clonedBlock.clientId ) ) {
+								// Ensure the block is only inserted once.
+								onClick( {
+									...clonedBlock,
+									attributes: {
+										...clonedBlock.attributes,
+										id: img.id,
+										url: img.url,
+									},
+								} );
+
+								createSuccessNotice(
+									__( 'Image uploaded and inserted.' ),
+									{ type: 'snackbar', id: 'inserter-notice' }
+								);
+							} else {
+								// For subsequent calls, update the existing block.
+								updateBlockAttributes( clonedBlock.clientId, {
+									...clonedBlock.attributes,
+									id: img.id,
+									url: img.url,
+								} );
+							}
+
+							setIsInserting( false );
+						},
+						allowedTypes: ALLOWED_MEDIA_TYPES,
+						onError( message ) {
+							createErrorNotice( message, {
+								type: 'snackbar',
+								id: 'inserter-notice',
+							} );
+							setIsInserting( false );
+						},
+					} );
+				} )
+				.catch( () => {
+					setShowExternalUploadModal( true );
+					setIsInserting( false );
+				} );
+		},
+		[
+			isInserting,
+			getSettings,
+			onClick,
+			createSuccessNotice,
+			updateBlockAttributes,
+			createErrorNotice,
+			getBlock,
+		]
+	);
+
+	const title =
+		typeof media.title === 'string'
+			? media.title
+			: media.title?.rendered || __( 'no title' );
+
+	let truncatedTitle;
+	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
+		const omission = '...';
+		truncatedTitle =
+			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
+	}
+	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
+	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
+	return (
+		<>
+			<InserterDraggableBlocks isEnabled blocks={ [ block ] }>
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<div
+						className={ clsx(
+							'block-editor-inserter__media-list__list-item',
+							{
+								'is-hovered': isHovered,
+							}
+						) }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+					>
+						{ /* Adding `is-hovered` class to the wrapper element is needed
+						because the options Popover is rendered outside of this node. */ }
+						<div
+							onMouseEnter={ onMouseEnter }
+							onMouseLeave={ onMouseLeave }
+						>
+							<Tooltip text={ truncatedTitle || title }>
+								<Composite.Item
+									render={
+										<div
+											aria-label={ title }
+											role="option"
+											className="block-editor-inserter__media-list__item"
+										/>
+									}
+									onClick={ () => onMediaInsert( block ) }
+								>
+									<div className="block-editor-inserter__media-list__item-preview">
+										{ preview }
+										{ isInserting && (
+											<div className="block-editor-inserter__media-list__item-preview-spinner">
+												<Spinner />
+											</div>
+										) }
+									</div>
+								</Composite.Item>
+							</Tooltip>
+							{ ! isInserting && (
+								<MediaPreviewOptions
+									category={ category }
+									media={ media }
+								/>
+							) }
+						</div>
+					</div>
+				) }
+			</InserterDraggableBlocks>
+			{ showExternalUploadModal && (
+				<InsertExternalImageModal
+					onClose={ () => setShowExternalUploadModal( false ) }
+					onSubmit={ () => {
+						onClick( cloneBlock( block ) );
+						createSuccessNotice( __( 'Image inserted.' ), {
+							type: 'snackbar',
+							id: 'inserter-notice',
+						} );
+						setShowExternalUploadModal( false );
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
new file mode 100644
index 00000000000000..ca901a127e5b42
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { MediaCategoryPanel } from './media-panel';
+import MediaUploadCheck from '../../media-upload/check';
+import MediaUpload from '../../media-upload';
+import { useMediaCategories } from './hooks';
+import { getBlockAndPreviewFromMedia } from './utils';
+import MobileTabNavigation from '../mobile-tab-navigation';
+import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
+
+const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
+
+function MediaTab( {
+	rootClientId,
+	selectedCategory,
+	onSelectCategory,
+	onInsert,
+	children,
+} ) {
+	const mediaCategories = useMediaCategories( rootClientId );
+	const isMobile = useViewportMatch( 'medium', '<' );
+	const baseCssClass = 'block-editor-inserter__media-tabs';
+	const onSelectMedia = useCallback(
+		( media ) => {
+			if ( ! media?.url ) {
+				return;
+			}
+			const [ block ] = getBlockAndPreviewFromMedia( media, media.type );
+			onInsert( block );
+		},
+		[ onInsert ]
+	);
+	const categories = useMemo(
+		() =>
+			mediaCategories.map( ( mediaCategory ) => ( {
+				...mediaCategory,
+				label: mediaCategory.labels.name,
+			} ) ),
+		[ mediaCategories ]
+	);
+
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
+	return (
+		<>
+			{ ! isMobile && (
+				<div className={ `${ baseCssClass }-container` }>
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
+					>
+						{ children }
+					</CategoryTabs>
+					<MediaUploadCheck>
+						<MediaUpload
+							multiple={ false }
+							onSelect={ onSelectMedia }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							render={ ( { open } ) => (
+								<Button
+									__next40pxDefaultSize
+									onClick={ ( event ) => {
+										// Safari doesn't emit a focus event on button elements when
+										// clicked and we need to manually focus the button here.
+										// The reason is that core's Media Library modal explicitly triggers a
+										// focus event and therefore a `blur` event is triggered on a different
+										// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
+										// attribute making the Inserter dialog to close.
+										event.target.focus();
+										open();
+									} }
+									className="block-editor-inserter__media-library-button"
+									variant="secondary"
+									data-unstable-ignore-focus-outside-for-relatedtarget=".media-modal"
+								>
+									{ __( 'Open Media Library' ) }
+								</Button>
+							) }
+						/>
+					</MediaUploadCheck>
+				</div>
+			) }
+			{ isMobile && (
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<MediaCategoryPanel
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+						/>
+					) }
+				</MobileTabNavigation>
+			) }
+		</>
+	);
+}
+
+export default MediaTab;
diff --git a/packages/block-editor/src/components/inserter/media-tab/utils.js b/packages/block-editor/src/components/inserter/media-tab/utils.js
new file mode 100644
index 00000000000000..0a835c065a3a1b
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/media-tab/utils.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const mediaTypeTag = { image: 'img', video: 'video', audio: 'audio' };
+
+/** @typedef {import('./hooks').InserterMediaItem} InserterMediaItem */
+
+/**
+ * Creates a block and a preview element from a media object.
+ *
+ * @param {InserterMediaItem}         media     The media object to create the block from.
+ * @param {('image'|'audio'|'video')} mediaType The media type to create the block for.
+ * @return {[WPBlock, JSX.Element]} An array containing the block and the preview element.
+ */
+export function getBlockAndPreviewFromMedia( media, mediaType ) {
+	// Add the common attributes between the different media types.
+	const attributes = {
+		id: media.id || undefined,
+		caption: media.caption || undefined,
+	};
+	const mediaSrc = media.url;
+	const alt = media.alt || undefined;
+	if ( mediaType === 'image' ) {
+		attributes.url = mediaSrc;
+		attributes.alt = alt;
+	} else if ( [ 'video', 'audio' ].includes( mediaType ) ) {
+		attributes.src = mediaSrc;
+	}
+	const PreviewTag = mediaTypeTag[ mediaType ];
+	const preview = (
+		<PreviewTag
+			src={ media.previewUrl || mediaSrc }
+			alt={ alt }
+			controls={ mediaType === 'audio' ? true : undefined }
+			inert="true"
+			onError={ ( { currentTarget } ) => {
+				// Fall back to the media source if the preview cannot be loaded.
+				if ( currentTarget.src === media.previewUrl ) {
+					currentTarget.src = mediaSrc;
+				}
+			} }
+		/>
+	);
+	return [ createBlock( `core/${ mediaType }`, attributes ), preview ];
+}
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index c6d019c8ff9a74..ef260beb85906b 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,11 +11,12 @@ import {
 	useState,
 	useCallback,
 	useMemo,
-	useImperativeHandle,
 	useRef,
+	useLayoutEffect,
 } from '@wordpress/element';
-import { VisuallyHidden, SearchControl } from '@wordpress/components';
+import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useDebouncedInput, useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -24,15 +25,17 @@ import { useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
-import BlockPatternsTabs, {
-	BlockPatternsCategoryDialog,
-} from './block-patterns-tab';
-import ReusableBlocksTab from './reusable-blocks-tab';
+import BlockPatternsTab from './block-patterns-tab';
+import { PatternCategoryPreviews } from './block-patterns-tab/pattern-category-previews';
+import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
-import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import TabbedSidebar from '../tabbed-sidebar';
+import { useZoomOut } from '../../hooks/use-zoom-out';
+import { unlock } from '../../lock-unlock';
 
+const NOOP = () => {};
 function InserterMenu(
 	{
 		rootClientId,
@@ -44,17 +47,49 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
-		prioritizePatterns,
+		onPatternCategorySelection,
+		onClose,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 	},
 	ref
 ) {
-	const [ filterValue, setFilterValue ] = useState(
-		__experimentalFilterValue
+	const isZoomOutMode = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).isZoomOut(),
+		[]
 	);
+	const hasSectionRootClientId = useSelect(
+		( select ) =>
+			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
+		[]
+	);
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] =
+	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
+		__experimentalInitialCategory
+	);
+	const [ patternFilter, setPatternFilter ] = useState( 'all' );
+	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( null );
+	const isLargeViewport = useViewportMatch( 'large' );
+
+	function getInitialTab() {
+		if ( __experimentalInitialTab ) {
+			return __experimentalInitialTab;
+		}
+
+		if ( isZoomOutMode ) {
+			return 'patterns';
+		}
+	}
+	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
+
+	const shouldUseZoomOut =
+		hasSectionRootClientId &&
+		( selectedTab === 'patterns' || selectedTab === 'media' );
+
+	useZoomOut( shouldUseZoomOut && isLargeViewport );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -64,33 +99,38 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, hasReusableBlocks } = useSelect(
-		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
-				select( blockEditorStore );
-
-			return {
-				showPatterns: !! __experimentalGetAllowedPatterns(
-					destinationRootClientId
-				).length,
-				hasReusableBlocks:
-					!! getSettings().__experimentalReusableBlocks?.length,
-			};
-		},
-		[ destinationRootClientId ]
-	);
+	const blockTypesTabRef = useRef();
 
 	const onInsert = useCallback(
-		( blocks, meta, shouldForceFocusBlock ) => {
-			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
-			onSelect();
+		( blocks, meta, shouldForceFocusBlock, _rootClientId ) => {
+			onInsertBlocks(
+				blocks,
+				meta,
+				shouldForceFocusBlock,
+				_rootClientId
+			);
+			onSelect( blocks );
+
+			// Check for focus loss due to filtering blocks by selected block type
+			window.requestAnimationFrame( () => {
+				if (
+					! shouldFocusBlock &&
+					! blockTypesTabRef.current?.contains(
+						ref.current.ownerDocument.activeElement
+					)
+				) {
+					// There has been a focus loss, so focus the first button in the block types tab
+					blockTypesTabRef.current?.querySelector( 'button' ).focus();
+				}
+			} );
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
-		( blocks, patternName ) => {
-			onInsertBlocks( blocks, { patternName } );
+		( blocks, patternName, ...args ) => {
+			onToggleInsertionPoint( false );
+			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
 		},
 		[ onInsertBlocks, onSelect ]
@@ -98,24 +138,88 @@ function InserterMenu(
 
 	const onHover = useCallback(
 		( item ) => {
-			onToggleInsertionPoint( !! item );
+			onToggleInsertionPoint( item );
 			setHoveredItem( item );
 		},
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
 	const onClickPatternCategory = useCallback(
-		( patternCategory ) => {
+		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
+			setPatternFilter( filter );
+			onPatternCategorySelection?.();
 		},
-		[ setSelectedPatternCategory ]
+		[ setSelectedPatternCategory, onPatternCategorySelection ]
 	);
 
-	const blocksTab = useMemo(
-		() => (
+	const showPatternPanel =
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		!! selectedPatternCategory;
+
+	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
+
+	const inserterSearch = useMemo( () => {
+		if ( selectedTab === 'media' ) {
+			return null;
+		}
+
+		return (
+			<>
+				<SearchControl
+					__nextHasNoMarginBottom
+					className="block-editor-inserter__search"
+					onChange={ ( value ) => {
+						if ( hoveredItem ) {
+							setHoveredItem( null );
+						}
+						setFilterValue( value );
+					} }
+					value={ filterValue }
+					label={ __( 'Search' ) }
+					placeholder={ __( 'Search' ) }
+				/>
+				{ !! delayedFilterValue && (
+					<InserterSearchResults
+						filterValue={ delayedFilterValue }
+						onSelect={ onSelect }
+						onHover={ onHover }
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						isAppender={ isAppender }
+						__experimentalInsertionIndex={
+							__experimentalInsertionIndex
+						}
+						showBlockDirectory
+						shouldFocusBlock={ shouldFocusBlock }
+						prioritizePatterns={ selectedTab === 'patterns' }
+					/>
+				) }
+			</>
+		);
+	}, [
+		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
+		filterValue,
+		delayedFilterValue,
+		onSelect,
+		onHover,
+		shouldFocusBlock,
+		clientId,
+		rootClientId,
+		__experimentalInsertionIndex,
+		isAppender,
+	] );
+
+	const blocksTab = useMemo( () => {
+		return (
 			<>
 				<div className="block-editor-inserter__block-list">
 					<BlockTypesTab
+						ref={ blockTypesTabRef }
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsert }
 						onHover={ onHover }
@@ -131,131 +235,166 @@ function InserterMenu(
 					</div>
 				) }
 			</>
-		),
-		[
-			destinationRootClientId,
-			onInsert,
-			onHover,
-			filterValue,
-			showMostUsedBlocks,
-			showInserterHelpPanel,
-		]
-	);
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		onHover,
+		showMostUsedBlocks,
+		showInserterHelpPanel,
+	] );
 
-	const patternsTab = useMemo(
-		() => (
-			<BlockPatternsTabs
+	const patternsTab = useMemo( () => {
+		return (
+			<BlockPatternsTab
 				rootClientId={ destinationRootClientId }
 				onInsert={ onInsertPattern }
 				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
-			/>
-		),
-		[
-			destinationRootClientId,
-			onInsertPattern,
-			onClickPatternCategory,
-			selectedPatternCategory,
-		]
-	);
+			>
+				{ showPatternPanel && (
+					<PatternCategoryPreviews
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsertPattern }
+						category={ selectedPatternCategory }
+						patternFilter={ patternFilter }
+						showTitlesAsTooltip
+					/>
+				) }
+			</BlockPatternsTab>
+		);
+	}, [
+		destinationRootClientId,
+		onInsertPattern,
+		onClickPatternCategory,
+		patternFilter,
+		selectedPatternCategory,
+		showPatternPanel,
+	] );
 
-	const reusableBlocksTab = useMemo(
-		() => (
-			<ReusableBlocksTab
+	const mediaTab = useMemo( () => {
+		return (
+			<MediaTab
 				rootClientId={ destinationRootClientId }
+				selectedCategory={ selectedMediaCategory }
+				onSelectCategory={ setSelectedMediaCategory }
 				onInsert={ onInsert }
-				onHover={ onHover }
-			/>
-		),
-		[ destinationRootClientId, onInsert, onHover ]
-	);
-
-	const getCurrentTab = useCallback(
-		( tab ) => {
-			if ( tab.name === 'blocks' ) {
-				return blocksTab;
-			} else if ( tab.name === 'patterns' ) {
-				return patternsTab;
-			}
-			return reusableBlocksTab;
-		},
-		[ blocksTab, patternsTab, reusableBlocksTab ]
-	);
+			>
+				{ showMediaPanel && (
+					<MediaCategoryPanel
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsert }
+						category={ selectedMediaCategory }
+					/>
+				) }
+			</MediaTab>
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		selectedMediaCategory,
+		setSelectedMediaCategory,
+		showMediaPanel,
+	] );
 
-	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			searchRef.current.focus();
-		},
-	} ) );
+	const handleSetSelectedTab = ( value ) => {
+		// If no longer on patterns tab remove the category setting.
+		if ( value !== 'patterns' ) {
+			setSelectedPatternCategory( null );
+		}
+		setSelectedTab( value );
+	};
 
-	const showPatternPanel =
-		selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
-	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
+	// Focus first active tab, if any
+	const tabsRef = useRef();
+	useLayoutEffect( () => {
+		if ( tabsRef.current ) {
+			window.requestAnimationFrame( () => {
+				tabsRef.current
+					.querySelector( '[role="tab"][aria-selected="true"]' )
+					?.focus();
+			} );
+		}
+	}, [] );
 
 	return (
-		<div className="block-editor-inserter__menu">
-			<div
-				className={ classnames( 'block-editor-inserter__main-area', {
-					'show-as-tabs': showAsTabs,
-				} ) }
-			>
-				<SearchControl
-					className="block-editor-inserter__search"
-					onChange={ ( value ) => {
-						if ( hoveredItem ) setHoveredItem( null );
-						setFilterValue( value );
-					} }
-					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
-					placeholder={ __( 'Search' ) }
-					ref={ searchRef }
+		<div
+			className={ clsx( 'block-editor-inserter__menu', {
+				'show-panel': showPatternPanel || showMediaPanel,
+				'is-zoom-out': isZoomOutMode,
+			} ) }
+			ref={ ref }
+		>
+			<div className="block-editor-inserter__main-area">
+				<TabbedSidebar
+					ref={ tabsRef }
+					onSelect={ handleSetSelectedTab }
+					onClose={ onClose }
+					selectedTab={ selectedTab }
+					closeButtonLabel={ __( 'Close Block Inserter' ) }
+					tabs={ [
+						{
+							name: 'blocks',
+							title: __( 'Blocks' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'blocks' &&
+										! delayedFilterValue &&
+										blocksTab }
+								</>
+							),
+						},
+						{
+							name: 'patterns',
+							title: __( 'Patterns' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ selectedTab === 'patterns' &&
+										! delayedFilterValue &&
+										patternsTab }
+								</>
+							),
+						},
+						{
+							name: 'media',
+							title: __( 'Media' ),
+							panel: (
+								<>
+									{ inserterSearch }
+									{ mediaTab }
+								</>
+							),
+						},
+					] }
 				/>
-				{ !! filterValue && (
-					<div className="block-editor-inserter__no-tab-container">
-						<InserterSearchResults
-							filterValue={ filterValue }
-							onSelect={ onSelect }
-							onHover={ onHover }
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-							isAppender={ isAppender }
-							__experimentalInsertionIndex={
-								__experimentalInsertionIndex
-							}
-							showBlockDirectory
-							shouldFocusBlock={ shouldFocusBlock }
-						/>
-					</div>
-				) }
-				{ showAsTabs && (
-					<InserterTabs
-						showPatterns={ showPatterns }
-						showReusableBlocks={ hasReusableBlocks }
-						prioritizePatterns={ prioritizePatterns }
-						onSelect={ setSelectedTab }
-					>
-						{ getCurrentTab }
-					</InserterTabs>
-				) }
-				{ ! filterValue && ! showAsTabs && (
-					<div className="block-editor-inserter__no-tab-container">
-						{ blocksTab }
-					</div>
-				) }
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
-				<InserterPreviewPanel item={ hoveredItem } />
-			) }
-			{ showPatternPanel && (
-				<BlockPatternsCategoryDialog
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsertPattern }
-					category={ selectedPatternCategory }
-				/>
+				<Popover
+					className="block-editor-inserter__preview-container__popover"
+					placement="right-start"
+					offset={ 16 }
+					focusOnMount={ false }
+					animate={ false }
+				>
+					<InserterPreviewPanel item={ hoveredItem } />
+				</Popover>
 			) }
 		</div>
 	);
 }
 
-export default forwardRef( InserterMenu );
+export const PrivateInserterMenu = forwardRef( InserterMenu );
+
+function PublicInserterMenu( props, ref ) {
+	return (
+		<PrivateInserterMenu
+			{ ...props }
+			onPatternCategorySelection={ NOOP }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicInserterMenu );
diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
index 01ace49bd2070e..538abd593663d8 100644
--- a/packages/block-editor/src/components/inserter/menu.native.js
+++ b/packages/block-editor/src/components/inserter/menu.native.js
@@ -177,7 +177,7 @@ function InserterMenu( {
 
 	return (
 		<BottomSheet
-			isVisible={ true }
+			isVisible
 			onClose={ onClose }
 			onKeyboardShow={ onKeyboardShow }
 			onKeyboardHide={ onKeyboardHide }
@@ -198,10 +198,10 @@ function InserterMenu( {
 				</>
 			}
 			hasNavigation
-			setMinHeightToMaxHeight={ true }
+			setMinHeightToMaxHeight
 			contentStyle={ styles[ 'inserter-menu__list' ] }
 			isFullScreen={ isFullScreen }
-			allowDragIndicator={ true }
+			allowDragIndicator
 		>
 			<BottomSheetConsumer>
 				{ ( { listProps } ) => (
diff --git a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
new file mode 100644
index 00000000000000..5f34c3c21d832f
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+	Navigator,
+	FlexBlock,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+function ScreenHeader( { title } ) {
+	return (
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<Navigator.BackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							size="small"
+							label={ __( 'Back' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default function MobileTabNavigation( { categories, children } ) {
+	return (
+		<Navigator
+			initialPath="/"
+			className="block-editor-inserter__mobile-tab-navigation"
+		>
+			<Navigator.Screen path="/">
+				<ItemGroup>
+					{ categories.map( ( category ) => (
+						<Navigator.Button
+							key={ category.name }
+							path={ `/category/${ category.name }` }
+							as={ Item }
+							isAction
+						>
+							<HStack>
+								<FlexBlock>{ category.label }</FlexBlock>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</Navigator.Button>
+					) ) }
+				</ItemGroup>
+			</Navigator.Screen>
+			{ categories.map( ( category ) => (
+				<Navigator.Screen
+					key={ category.name }
+					path={ `/category/${ category.name }` }
+				>
+					<ScreenHeader title={ __( 'Back' ) } />
+					{ children( category ) }
+				</Navigator.Screen>
+			) ) }
+		</Navigator>
+	);
+}
diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js
index 83bb91101e5301..612b435d06dcc5 100644
--- a/packages/block-editor/src/components/inserter/preview-panel.js
+++ b/packages/block-editor/src/components/inserter/preview-panel.js
@@ -6,6 +6,7 @@ import {
 	createBlock,
 	getBlockFromExample,
 } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,30 +18,58 @@ import BlockPreview from '../block-preview';
 function InserterPreviewPanel( { item } ) {
 	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
+	const blocks = useMemo( () => {
+		if ( ! example ) {
+			return createBlock( name, initialAttributes );
+		}
+		return getBlockFromExample( name, {
+			attributes: {
+				...example.attributes,
+				...initialAttributes,
+			},
+			innerBlocks: example.innerBlocks,
+		} );
+	}, [ name, example, initialAttributes ] );
+	// Same as height of BlockPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 280;
+	const viewportWidth = example?.viewportWidth ?? 500;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
+
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
 				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							__experimentalPadding={ 16 }
-							viewportWidth={ example?.viewportWidth ?? 500 }
-							blocks={
-								example
-									? getBlockFromExample( name, {
-											attributes: {
-												...example.attributes,
-												...initialAttributes,
-											},
-											innerBlocks: example.innerBlocks,
-									  } )
-									: createBlock( name, initialAttributes )
+							blocks={ blocks }
+							viewportWidth={ viewportWidth }
+							minHeight={ previewHeight }
+							additionalStyles={
+								//We want this CSS to be in sync with the one in BlockPreviewPanel.
+								[
+									{
+										css: `
+										body { 
+											padding: 24px;
+											min-height:${ Math.round( minHeight ) }px;
+											display:flex;
+											align-items:center;
+										}
+										.is-root-container { width: 100%; }
+									`,
+									},
+								]
 							}
 						/>
 					</div>
 				) : (
 					<div className="block-editor-inserter__preview-content-missing">
-						{ __( 'No Preview Available.' ) }
+						{ __( 'No preview available.' ) }
 					</div>
 				) }
 			</div>
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index d9eabfc3363fc4..9f393a7ce15202 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,6 +31,8 @@ export default function QuickInserter( {
 	clientId,
 	isAppender,
 	prioritizePatterns,
+	selectBlockOnInsert,
+	hasSearch = true,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -38,15 +40,18 @@ export default function QuickInserter( {
 		rootClientId,
 		clientId,
 		isAppender,
+		selectBlockOnInsert,
 	} );
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
-		onInsertBlocks
+		onInsertBlocks,
+		true
 	);
-
 	const [ patterns ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		true
 	);
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
@@ -68,8 +73,9 @@ export default function QuickInserter( {
 	const showPatterns =
 		patterns.length && ( !! filterValue || prioritizePatterns );
 	const showSearch =
-		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-		blockTypes.length > SEARCH_THRESHOLD;
+		hasSearch &&
+		( ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+			blockTypes.length > SEARCH_THRESHOLD );
 
 	useEffect( () => {
 		if ( setInserterIsOpened ) {
@@ -80,7 +86,12 @@ export default function QuickInserter( {
 	// When clicking Browse All select the appropriate block so as
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
-		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
+		setInserterIsOpened( {
+			filterValue,
+			onSelect,
+			rootClientId,
+			insertionIndex,
+		} );
 	};
 
 	let maxBlockPatterns = 0;
@@ -92,19 +103,20 @@ export default function QuickInserter( {
 
 	return (
 		<div
-			className={ classnames( 'block-editor-inserter__quick-inserter', {
+			className={ clsx( 'block-editor-inserter__quick-inserter', {
 				'has-search': showSearch,
 				'has-expand': setInserterIsOpened,
 			} ) }
 		>
 			{ showSearch && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {
 						setFilterValue( value );
 					} }
-					label={ __( 'Search for blocks and patterns' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 			) }
@@ -120,11 +132,14 @@ export default function QuickInserter( {
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
+					selectBlockOnInsert={ selectBlockOnInsert }
+					isQuick
 				/>
 			</div>
 
 			{ setInserterIsOpened && (
 				<Button
+					__next40pxDefaultSize
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(
diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
deleted file mode 100644
index 9505dd77f3b94d..00000000000000
--- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BlockTypesList from '../block-types-list';
-import InserterPanel from './panel';
-import InserterNoResults from './no-results';
-import useBlockTypesState from './hooks/use-block-types-state';
-
-function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
-	const [ items, , , onSelectItem ] = useBlockTypesState(
-		rootClientId,
-		onInsert
-	);
-
-	const filteredItems = useMemo( () => {
-		return items.filter( ( { category } ) => category === 'reusable' );
-	}, [ items ] );
-
-	if ( filteredItems.length === 0 ) {
-		return <InserterNoResults />;
-	}
-
-	return (
-		<InserterPanel title={ __( 'Reusable blocks' ) }>
-			<BlockTypesList
-				items={ filteredItems }
-				onSelect={ onSelectItem }
-				onHover={ onHover }
-				label={ __( 'Reusable blocks' ) }
-			/>
-		</InserterPanel>
-	);
-}
-
-// The unwrapped component is only exported for use by unit tests.
-/**
- * List of reusable blocks shown in the "Reusable" tab of the inserter.
- *
- * @param {Object}   props              Component props.
- * @param {?string}  props.rootClientId Client id of block to insert into.
- * @param {Function} props.onInsert     Callback to run when item is inserted.
- * @param {Function} props.onHover      Callback to run when item is hovered.
- *
- * @return {WPComponent} The component.
- */
-export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
-	return (
-		<>
-			<ReusableBlocksList
-				onHover={ onHover }
-				onInsert={ onInsert }
-				rootClientId={ rootClientId }
-			/>
-			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<Button
-					className="block-editor-inserter__manage-reusable-blocks"
-					variant="secondary"
-					href={ addQueryArgs( 'edit.php', {
-						post_type: 'wp_block',
-					} ) }
-				>
-					{ __( 'Manage Reusable blocks' ) }
-				</Button>
-			</div>
-		</>
-	);
-}
-
-export default ReusableBlocksTab;
diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
index 825169e17315f8..97f3ab7c3ce4fa 100644
--- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
+++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,26 +13,31 @@ import { store as blockEditorStore } from '../../store';
 import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { items } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
 
 			return {
-				items: filterInserterItems( allItems, { onlyReusable: true } ),
+				inserterItems: allItems,
 			};
 		},
 		[ rootClientId ]
 	);
 
+	const items = useMemo( () => {
+		return filterInserterItems( inserterItems, { onlyReusable: true } );
+	}, [ inserterItems ] );
+
 	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
 
 	return (
 		<BlockTypesList
-			name="ReusableBlocks"
+			name="SyncedPatterns"
 			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
+			label={ __( 'Synced patterns' ) }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 5451f19937b01d..154098fc1a837b 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.
@@ -13,6 +12,17 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+// Normalization regexes
+const splitRegexp = [
+	/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+	/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+];
+const stripRegexp = /(\p{C}|\p{P}|\p{S})+/giu; // Anything that's not a punctuation, symbol or control/format character.
+
+// Normalization cache
+const extractedWords = new Map();
+const normalizedStrings = new Map();
+
 /**
  * Extracts words from an input string.
  *
@@ -20,16 +30,21 @@ const defaultGetCollection = () => null;
  *
  * @return {Array} Words, extracted from the input string.
  */
-function extractWords( input = '' ) {
-	return noCase( input, {
-		splitRegexp: [
-			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
-			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
-		],
-		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+export function extractWords( input = '' ) {
+	if ( extractedWords.has( input ) ) {
+		return extractedWords.get( input );
+	}
+
+	const result = noCase( input, {
+		splitRegexp,
+		stripRegexp,
 	} )
 		.split( ' ' )
 		.filter( Boolean );
+
+	extractedWords.set( input, result );
+
+	return result;
 }
 
 /**
@@ -39,20 +54,26 @@ function extractWords( input = '' ) {
  *
  * @return {string} The normalized search input.
  */
-function normalizeSearchInput( input = '' ) {
+export function normalizeString( input = '' ) {
+	if ( normalizedStrings.has( input ) ) {
+		return normalizedStrings.get( input );
+	}
+
 	// Disregard diacritics.
 	//  Input: "média"
-	input = removeAccents( input );
+	let result = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
-	input = input.replace( /^\//, '' );
+	result = result.replace( /^\//, '' );
 
 	// Lowercase.
 	//  Input: "MEDIA"
-	input = input.toLowerCase();
+	result = result.toLowerCase();
+
+	normalizedStrings.set( input, result );
 
-	return input;
+	return result;
 }
 
 /**
@@ -63,7 +84,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return extractWords( normalizeString( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -88,7 +109,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,
 	};
@@ -149,8 +170,8 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 	const category = getCategory( item );
 	const collection = getCollection( item );
 
-	const normalizedSearchInput = normalizeSearchInput( searchTerm );
-	const normalizedTitle = normalizeSearchInput( title );
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
 
 	let rank = 0;
 
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
index 53cd9df210fbfc..5a5725a3bb08cd 100644
--- a/packages/block-editor/src/components/inserter/search-results.js
+++ b/packages/block-editor/src/components/inserter/search-results.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { orderBy, isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
 import { useDebounce, useAsyncList } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,6 +21,9 @@ import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
 import InserterListbox from '../inserter-listbox';
+import { orderBy } from '../../utils/sorting';
+import { orderInserterBlockItems } from '../../utils/order-inserter-block-items';
+import { store as blockEditorStore } from '../../store';
 
 const INITIAL_INSERTER_RESULTS = 9;
 /**
@@ -39,6 +38,7 @@ function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	onHover,
+	onHoverPattern,
 	rootClientId,
 	clientId,
 	isAppender,
@@ -49,9 +49,24 @@ function InserterSearchResults( {
 	isDraggable = true,
 	shouldFocusBlock = true,
 	prioritizePatterns,
+	selectBlockOnInsert,
+	isQuick,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
+	const { prioritizedBlocks } = useSelect(
+		( select ) => {
+			const blockListSettings =
+				select( blockEditorStore ).getBlockListSettings( rootClientId );
+
+			return {
+				prioritizedBlocks:
+					blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY,
+			};
+		},
+		[ rootClientId ]
+	);
+
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
@@ -59,14 +74,15 @@ function InserterSearchResults( {
 		isAppender,
 		insertionIndex: __experimentalInsertionIndex,
 		shouldFocusBlock,
+		selectBlockOnInsert,
 	} );
 	const [
 		blockTypes,
 		blockTypeCategories,
 		blockTypeCollections,
 		onSelectBlockType,
-	] = useBlockTypesState( destinationRootClientId, onInsertBlocks );
-	const [ patterns, , onSelectBlockPattern ] = usePatternsState(
+	] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick );
+	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId
 	);
@@ -90,8 +106,20 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
+		const nonPatternBlockTypes = blockTypes.filter(
+			( blockType ) => blockType.name !== 'core/block'
+		);
+		let orderedItems = orderBy( nonPatternBlockTypes, 'frecency', 'desc' );
+
+		if ( ! filterValue && prioritizedBlocks.length ) {
+			orderedItems = orderInserterBlockItems(
+				orderedItems,
+				prioritizedBlocks
+			);
+		}
+
 		const results = searchBlockItems(
-			orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ),
+			orderedItems,
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue
@@ -105,7 +133,8 @@ function InserterSearchResults( {
 		blockTypes,
 		blockTypeCategories,
 		blockTypeCollections,
-		maxBlockTypes,
+		maxBlockTypesToShow,
+		prioritizedBlocks,
 	] );
 
 	// Announce search results on change.
@@ -120,19 +149,19 @@ function InserterSearchResults( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
+	}, [
+		filterValue,
+		debouncedSpeak,
+		filteredBlockTypes,
+		filteredBlockPatterns,
+	] );
 
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
-	const currentShownPatterns = useAsyncList(
-		currentShownBlockTypes.length === filteredBlockTypes.length
-			? filteredBlockPatterns
-			: EMPTY_ARRAY
-	);
 
 	const hasItems =
-		! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns );
+		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
 
 	const blocksUI = !! filteredBlockTypes.length && (
 		<InserterPanel
@@ -151,14 +180,14 @@ function InserterSearchResults( {
 	const patternsUI = !! filteredBlockPatterns.length && (
 		<InserterPanel
 			title={
-				<VisuallyHidden>{ __( 'Block Patterns' ) }</VisuallyHidden>
+				<VisuallyHidden>{ __( 'Block patterns' ) }</VisuallyHidden>
 			}
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">
 				<BlockPatternsList
-					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
-					onClickPattern={ onSelectBlockPattern }
+					onClickPattern={ onClickPattern }
+					onHover={ onHoverPattern }
 					isDraggable={ isDraggable }
 				/>
 			</div>
diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js
index a32c6ecf1a1c31..93bdaa96b5175f 100644
--- a/packages/block-editor/src/components/inserter/search-results.native.js
+++ b/packages/block-editor/src/components/inserter/search-results.native.js
@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,21 +22,24 @@ function InserterSearchResults( {
 	rootClientId,
 	isFullScreen,
 } ) {
-	const { blockTypes } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
-			const allItems =
+			const items =
 				select( blockEditorStore ).getInserterItems( rootClientId );
 
-			const availableItems = filterInserterItems( allItems, {
-				allowReusable: true,
-			} );
-			const filteredItems = searchItems( availableItems, filterValue );
-
-			return { blockTypes: filteredItems };
+			return { inserterItems: items };
 		},
-		[ rootClientId, filterValue ]
+		[ rootClientId ]
 	);
 
+	const blockTypes = useMemo( () => {
+		const availableItems = filterInserterItems( inserterItems, {
+			allowReusable: true,
+		} );
+
+		return searchItems( availableItems, filterValue );
+	}, [ inserterItems, filterValue ] );
+
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 
@@ -54,6 +59,7 @@ function InserterSearchResults( {
 			sections={ [ createInserterSection( { key: 'search', items } ) ] }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks' ) }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/stories/index.js b/packages/block-editor/src/components/inserter/stories/index.js
deleted file mode 100644
index f6949653c87872..00000000000000
--- a/packages/block-editor/src/components/inserter/stories/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Internal dependencies
- */
-import BlockLibrary from '../library';
-import BlockEditorProvider from '../../provider';
-import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
-import Inserter from '../';
-
-export default { title: 'BlockEditor/Inserter' };
-
-export const libraryWithoutPatterns = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
-	return (
-		<BlockEditorProvider>
-			<div style={ wrapperStyle }>
-				<BlockLibrary showInserterHelpPanel />
-			</div>
-		</BlockEditorProvider>
-	);
-};
-
-export const libraryWithPatterns = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
-	return (
-		<BlockEditorProvider
-			settings={ {
-				__experimentalBlockPatternCategories: patternCategories,
-				__experimentalBlockPatterns: patterns,
-			} }
-		>
-			<div style={ wrapperStyle }>
-				<BlockLibrary showInserterHelpPanel />
-			</div>
-		</BlockEditorProvider>
-	);
-};
-
-export const libraryWithPatternsAndReusableBlocks = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
-	return (
-		<BlockEditorProvider
-			settings={ {
-				__experimentalBlockPatternCategories: patternCategories,
-				__experimentalBlockPatterns: patterns,
-				__experimentalReusableBlocks: reusableBlocks,
-			} }
-		>
-			<div style={ wrapperStyle }>
-				<BlockLibrary showInserterHelpPanel />
-			</div>
-		</BlockEditorProvider>
-	);
-};
-
-export const quickInserter = () => {
-	const wrapperStyle = {
-		margin: '24px',
-		height: 400,
-		border: '1px solid #f3f3f3',
-		display: 'inline-block',
-	};
-	return (
-		<BlockEditorProvider
-			settings={ {
-				__experimentalBlockPatternCategories: patternCategories,
-				__experimentalBlockPatterns: patterns,
-				__experimentalReusableBlocks: reusableBlocks,
-			} }
-		>
-			<div style={ wrapperStyle }>
-				<Inserter __experimentalIsQuick />
-			</div>
-		</BlockEditorProvider>
-	);
-};
diff --git a/packages/block-editor/src/components/inserter/stories/index.story.js b/packages/block-editor/src/components/inserter/stories/index.story.js
new file mode 100644
index 00000000000000..58dd99b48d9a02
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/stories/index.story.js
@@ -0,0 +1,90 @@
+/**
+ * Internal dependencies
+ */
+import BlockLibrary from '../library';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
+import Inserter from '../';
+
+export default { title: 'BlockEditor/Inserter' };
+
+export const LibraryWithoutPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<ExperimentalBlockEditorProvider>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export const LibraryWithPatterns = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export const LibraryWithPatternsAndReusableBlocks = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<BlockLibrary showInserterHelpPanel />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export const QuickInserter = () => {
+	const wrapperStyle = {
+		margin: '24px',
+		height: 400,
+		border: '1px solid #f3f3f3',
+		display: 'inline-block',
+	};
+	return (
+		<ExperimentalBlockEditorProvider
+			settings={ {
+				__experimentalBlockPatternCategories: patternCategories,
+				__experimentalBlockPatterns: patterns,
+				__experimentalReusableBlocks: reusableBlocks,
+			} }
+		>
+			<div style={ wrapperStyle }>
+				<Inserter __experimentalIsQuick />
+			</div>
+		</ExperimentalBlockEditorProvider>
+	);
+};
diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
index fd17217da75da1..cc4b8d95a22011 100644
--- a/packages/block-editor/src/components/inserter/style.native.scss
+++ b/packages/block-editor/src/components/inserter/style.native.scss
@@ -1,26 +1,21 @@
 /** @format */
-
-.inserter-menu__add-block-button-icon {
-	color: $blue-50;
+.inserter-menu__add-block-button {
+	border-radius: 2px;
+	background-color: $black;
+	margin: 9px $grid-unit-20 10px $grid-unit-20;
+	padding: 0;
 }
 
-.inserter-menu__add-block-button-icon--dark {
-	color: $blue-30;
+.inserter-menu__add-block-button--dark {
+	background-color: $white;
 }
 
-.inserter-menu__add-block-button-icon--expanded {
+.inserter-menu__add-block-button-icon {
 	color: $white;
 }
 
-.inserter-menu__add-block-button {
-	border-radius: 22px;
-	background-color: $blue-50;
-	margin: 8px;
-	padding: 6px 16px 6px 12px;
-}
-
-.inserter-menu__add-block-button--dark {
-	background-color: $blue-30;
+.inserter-menu__add-block-button-icon--dark {
+	color: $black;
 }
 
 .inserter-menu__add-block-button-text {
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index ad5a2d6642b4a2..c6522671f938d7 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -1,5 +1,5 @@
 $block-inserter-preview-height: 350px;
-$block-inserter-width: 350px;
+$block-quick-inserter-width: 350px;
 $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter {
@@ -17,17 +17,18 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__main-area {
-	position: relative;
-	display: flex;
-	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
+	position: relative;
+
 	&.show-as-tabs {
 		gap: 0;
 	}
 
-	@include break-medium {
-		width: $block-inserter-width;
+	.block-editor-tabbed-sidebar {
+		@include break-medium() {
+			width: $secondary-sidebar-width;
+		}
 	}
 }
 
@@ -35,6 +36,7 @@ $block-inserter-tabs-height: 44px;
 	.components-popover__content {
 		border: none;
 		outline: none;
+		box-shadow: $elevation-x-small;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -42,10 +44,12 @@ $block-inserter-tabs-height: 44px;
 
 			&:first-child {
 				border-top: $border-width solid $gray-400;
+				border-radius: $radius-medium $radius-medium 0 0;
 			}
 
 			&:last-child {
 				border-bottom: $border-width solid $gray-400;
+				border-radius: 0 0 $radius-medium $radius-medium;
 			}
 
 			&.components-button {
@@ -58,7 +62,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover .block-editor-inserter__menu {
 	margin: -$grid-unit-15;
 
-	.block-editor-inserter__tabs .components-tab-panel__tabs {
+	.block-editor-inserter__tablist {
 		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
 	}
 
@@ -87,6 +91,12 @@ $block-inserter-tabs-height: 44px;
 	height: 100%;
 	position: relative;
 	overflow: visible;
+
+	&.show-panel {
+		@include break-medium() {
+			width: $secondary-sidebar-width + $sidebar-width;
+		}
+	}
 }
 
 .block-editor-inserter__inline-elements {
@@ -103,51 +113,22 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
-
-	.components-search-control__icon {
-		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-}
-
-.block-editor-inserter__tabs {
-	flex-grow: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	.components-tab-panel__tabs {
-		border-bottom: $border-width solid $gray-300;
-
-		.components-tab-panel__tabs-item {
-			flex-grow: 1;
-			margin-bottom: -$border-width;
-			&[id$="reusable"] {
-				flex-grow: inherit;
-				// These are to align the `reusable` icon with the search icon.
-				padding-left: $grid-unit-20;
-				padding-right: $grid-unit-20;
-			}
-		}
-	}
-
-	.components-tab-panel__tab-content {
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		overflow-y: auto;
-	}
 }
 
 .block-editor-inserter__no-tab-container {
 	overflow-y: auto;
 	flex-grow: 1;
+	// Fixes the editor canvas scrolling on search results https://github.com/WordPress/gutenberg/issues/56811
+	position: relative;
 }
 
 .block-editor-inserter__panel-header {
+	// Use `position: relative` to ensure any absolute positioned child elements are
+	// positioned relative to the panel header.
+	// This makes the overflow rule of the panel work correctly, particularly when the
+	// `VisuallyHidden` component is used within the inserter UI.
+	position: relative;
+
 	display: inline-flex;
 	align-items: center;
 	padding: $grid-unit-20 $grid-unit-20 0;
@@ -180,16 +161,8 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	margin: auto $grid-unit-20 $grid-unit-20;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-	justify-content: center;
-	width: 100%;
-}
-
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
 	text-align: center;
 }
@@ -215,15 +188,14 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__preview-container__popover {
+	top: $grid-unit-20 !important;
+}
+
 .block-editor-inserter__preview-container {
 	display: none;
-	width: 300px;
-	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $gray-300;
-	position: absolute;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	width: $sidebar-width;
+	padding: $grid-unit-20;
 	max-height: calc(100% - #{$grid-unit-40});
 	overflow-y: hidden;
 
@@ -231,103 +203,84 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-card {
-		padding: $grid-unit-20;
+	.block-editor-inserter__media-list__list-item {
+		height: 100%;
 	}
 
-	.block-editor-block-card__title {
-		font-size: $default-font-size;
+	.block-editor-block-card {
+		padding-left: 0;
+		padding-right: 0;
+		padding-bottom: $grid-unit-05;
 	}
 }
 
-.block-editor-inserter__patterns-explore-button.components-button {
-	padding: $grid-unit-20;
-	justify-content: center;
-	margin-top: $grid-unit-20;
-	width: 100%;
+.block-editor-inserter__insertable-blocks-at-selection {
+	border-bottom: $border-width solid $gray-200;
 }
 
-.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
-	color: var(--wp-admin-theme-color);
-	position: relative;
-
-	.components-flex-item {
-		filter: brightness(0.95);
-	}
-
-	svg {
-		fill: var(--wp-admin-theme-color);
-	}
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		border-radius: $radius-block-ui;
-		opacity: 0.04;
-		background: var(--wp-admin-theme-color);
-	}
+.block-editor-inserter__media-tabs-container,
+.block-editor-inserter__block-patterns-tabs-container {
+	flex-grow: 1;
+	padding: $grid-unit-20;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
-.block-editor-inserter__block-patterns-tabs-container {
-	height: 100%;
-	nav {
-		height: 100%;
-	}
+.block-editor-inserter__category-tablist {
+	margin-bottom: $grid-unit-10;
 }
 
-.block-editor-inserter__block-patterns-tabs {
+.block-editor-inserter__category-panel {
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	display: flex;
 	flex-direction: column;
-	padding: $grid-unit-20;
-	overflow-y: auto;
-	height: 100%;
-	// Push the listitem wrapping the "explore" button to the bottom of the panel.
-	div[role="listitem"]:last-child {
-		margin-top: auto;
+	padding: 0 $grid-unit-20;
+
+	@include break-medium {
+		border-left: $border-width solid $gray-200;
+		padding: 0;
+		left: $secondary-sidebar-width;
+		width: $sidebar-width;
+		position: absolute;
+		top: -$border-width;
+		height: calc(100% + #{$border-width});
+		background: $gray-100;
+		border-top: $border-width solid $gray-200;
+
+		.block-editor-inserter__media-list,
+		.block-editor-block-patterns-list {
+			padding: 0 $grid-unit-30 $grid-unit-20;
+		}
 	}
 }
 
-.block-editor-inserter__patterns-category-panel {
-	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
-	position: absolute;
-	padding: $grid-unit-40 $grid-unit-30;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	overflow-y: auto;
-	scrollbar-gutter: stable both-edges;
-
+.block-editor-inserter__patterns-category-panel-header {
+	padding: $grid-unit-10 0;
 	@include break-medium {
-		left: 100%;
-		display: block;
-		width: 300px;
+		padding: $grid-unit-10 $grid-unit-30;
 	}
+}
 
-	.block-editor-block-patterns-list {
-		margin-top: $grid-unit-30;
-	}
+.block-editor-inserter__patterns-category-no-results {
+	margin-top: $grid-unit-30;
+}
 
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		&:hover {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
+.block-editor-inserter__patterns-filter-help {
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	color: $gray-700;
+	min-width: 280px;
+}
 
-	.block-editor-block-patterns-list__item-title {
-		display: none;
-	}
+.block-editor-inserter__media-list,
+.block-editor-block-patterns-list {
+	overflow-y: auto;
+	flex-grow: 1;
+	height: 100%;
 }
 
 .block-editor-inserter__preview-content {
-	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
 	display: grid;
 	flex-grow: 1;
@@ -342,6 +295,7 @@ $block-inserter-tabs-height: 44px;
 	min-height: $grid-unit-60 * 3;
 	color: $gray-700;
 	background: $gray-100;
+	border-radius: $radius-small;
 }
 
 .block-editor-inserter__tips {
@@ -359,7 +313,7 @@ $block-inserter-tabs-height: 44px;
 	max-width: 100%;
 
 	@include break-medium {
-		width: $block-inserter-width;
+		width: $block-quick-inserter-width;
 	}
 }
 
@@ -382,7 +336,7 @@ $block-inserter-tabs-height: 44px;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			min-height: 100px;
 		}
 	}
@@ -401,7 +355,6 @@ $block-inserter-tabs-height: 44px;
 	background: $gray-900;
 	color: $white;
 	width: 100%;
-	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
 
 	&:hover {
@@ -423,7 +376,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-20;
+		top: $header-height + $grid-unit-15;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;
@@ -450,12 +403,18 @@ $block-inserter-tabs-height: 44px;
 	&__list {
 		margin-left: $sidebar-width;
 		padding: $grid-unit-30 0 $grid-unit-40;
+		.block-editor-patterns__sync-status-filter {
+			.components-input-control__container {
+				width: 380px;
+			}
+		}
 	}
 
 	.block-editor-block-patterns-list {
 		display: grid;
 		grid-gap: $grid-unit-40;
 		grid-template-columns: repeat(1, 1fr);
+		margin-bottom: $grid-unit-20;
 
 		@include break-xlarge() {
 			grid-template-columns: repeat(2, 1fr);
@@ -469,7 +428,7 @@ $block-inserter-tabs-height: 44px;
 			min-height: 240px;
 		}
 
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			height: inherit;
 			min-height: 100px;
 			max-height: 800px;
@@ -477,6 +436,215 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-category-panel-title {
-	font-size: calc(1.25 * 13px);
+.components-heading.block-editor-inserter__patterns-category-panel-title {
+	font-weight: 500;
+}
+
+.block-editor-inserter__patterns-explore-button,
+.block-editor-inserter__media-library-button {
+	&.components-button {
+		padding: $grid-unit-20;
+		justify-content: center;
+		margin-top: $grid-unit-20;
+		width: 100%;
+	}
+}
+
+.block-editor-inserter__media-panel {
+	min-height: 100%;
+	padding: 0 $grid-unit-20;
+	display: flex;
+	flex-direction: column;
+
+	@include break-medium {
+		padding: 0;
+	}
+
+	.block-editor-inserter__media-panel-spinner {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+	}
+
+	.block-editor-inserter__media-panel-search {
+		margin-bottom: $grid-unit-30;
+		// TODO: Consider using the Theme component to automatically adapt to a gray background.
+		@include break-medium() {
+			margin-bottom: 0;
+			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
+
+			&:not(:focus-within) {
+				--wp-components-color-background: #{$white};
+			}
+		}
+	}
+}
+
+.block-editor-inserter__media-list__list-item {
+	position: relative;
+	cursor: pointer;
+	margin-bottom: $grid-unit-30;
+
+	&.is-placeholder {
+		min-height: 100px;
+	}
+
+	&[draggable="true"] .block-editor-inserter__media-list__list-item {
+		cursor: grab;
+	}
+
+	&.is-hovered {
+		.block-editor-inserter__media-list__item-preview > * {
+			outline-color: rgba($black, 0.3);
+		}
+
+		.block-editor-inserter__media-list__item-preview-options > button {
+			display: block;
+		}
+	}
+
+	.block-editor-inserter__media-list__item-preview-options {
+		position: absolute;
+		right: $grid-unit-10;
+		top: $grid-unit-10;
+
+		> button {
+			background: $white;
+			display: none;
+
+			// These styles are important so as focus isn't lost
+			// when the button is focused and we hover away.
+			&.is-opened,
+			&:focus {
+				display: block;
+			}
+
+			&:hover {
+				box-shadow: inset 0 0 0 2px $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;
+			}
+		}
+	}
+}
+
+.block-editor-inserter__media-list__item {
+	height: 100%;
+
+	.block-editor-inserter__media-list__item-preview {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: $radius-small;
+
+		> * {
+			margin: 0 auto;
+			max-width: 100%;
+			outline: $border-width solid rgba($black, 0.1);
+			outline-offset: -$border-width;
+		}
+
+		.block-editor-inserter__media-list__item-preview-spinner {
+			display: flex;
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			justify-content: center;
+			background: rgba($white, 0.7);
+			align-items: center;
+			pointer-events: none;
+		}
+	}
+
+	&:focus .block-editor-inserter__media-list__item-preview > * {
+		outline-color: var(--wp-admin-theme-color);
+		outline-width: var(--wp-admin-border-width-focus);
+		outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
+	}
+}
+
+.block-editor-inserter__media-list__item-preview-options__popover {
+	.components-menu-item__button .components-menu-item__item {
+		min-width: auto;
+	}
+}
+
+
+.block-editor-inserter__mobile-tab-navigation {
+	padding: $grid-unit-20;
+	height: 100%;
+
+	> * {
+		height: 100%;
+	}
+}
+
+
+.block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
+	@include break-small() {
+		max-width: $break-mobile;
+	}
+
+	p {
+		margin: 0;
+	}
+}
+
+.block-editor-inserter__hint {
+	margin: $grid-unit-20 $grid-unit-20 0;
+}
+
+.block-editor-patterns__sync-status-filter {
+	.components-input-control__container {
+		select.components-select-control__input {
+			height: 40px;
+		}
+	}
+}
+
+// Only relevant in zoom-out-mode
+.block-editor-inserter__pattern-panel-placeholder {
+	display: none;
+}
+
+.block-editor-inserter__menu.is-zoom-out {
+	display: flex;
+	&.show-panel::after {
+		// Makes space for the inserter flyout panel
+		@include break-medium {
+			content: "";
+			display: block;
+			width: 300px;
+			height: 100%;
+		}
+	}
+}
+
+.show-icon-labels {
+	@media (max-width: #{ ($break-large - 1) }) {
+		.block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {
+			flex-direction: column;
+			.block-editor-patterns__grid-pagination-previous,
+			.block-editor-patterns__grid-pagination-next {
+				flex-direction: column;
+			}
+		}
+	}
+
+	.block-editor-inserter__category-panel .block-editor-patterns__grid-pagination {
+		flex-direction: column;
+		.block-editor-patterns__grid-pagination-previous,
+		.block-editor-patterns__grid-pagination-next {
+			flex-direction: column;
+		}
+	}
+}
+
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+	padding: 0 $grid-unit-30 $grid-unit-20;
 }
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
deleted file mode 100644
index 24bfade8b2f4be..00000000000000
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { symbol as reusableBlockIcon } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
-import { TabPanel } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-const blocksTab = {
-	name: 'blocks',
-	/* translators: Blocks tab title in the block inserter. */
-	title: __( 'Blocks' ),
-};
-const patternsTab = {
-	name: 'patterns',
-	/* translators: Patterns tab title in the block inserter. */
-	title: __( 'Patterns' ),
-};
-const reusableBlocksTab = {
-	name: 'reusable',
-	/* translators: Reusable blocks tab title in the block inserter. */
-	title: __( 'Reusable' ),
-	icon: reusableBlockIcon,
-};
-
-function InserterTabs( {
-	children,
-	showPatterns = false,
-	showReusableBlocks = false,
-	onSelect,
-	prioritizePatterns,
-} ) {
-	const tabs = useMemo( () => {
-		const tempTabs = [];
-		if ( prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		tempTabs.push( blocksTab );
-		if ( ! prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		if ( showReusableBlocks ) {
-			tempTabs.push( reusableBlocksTab );
-		}
-
-		return tempTabs;
-	}, [
-		prioritizePatterns,
-		blocksTab,
-		showPatterns,
-		patternsTab,
-		showReusableBlocks,
-		reusableBlocksTab,
-	] );
-
-	return (
-		<TabPanel
-			className="block-editor-inserter__tabs"
-			tabs={ tabs }
-			onSelect={ onSelect }
-		>
-			{ children }
-		</TabPanel>
-	);
-}
-
-export default InserterTabs;
diff --git a/packages/block-editor/src/components/inserter/tabs.native.js b/packages/block-editor/src/components/inserter/tabs.native.js
index 452305663358af..a921f8e4c5794c 100644
--- a/packages/block-editor/src/components/inserter/tabs.native.js
+++ b/packages/block-editor/src/components/inserter/tabs.native.js
@@ -142,7 +142,11 @@ InserterTabs.Control = TabsControl;
 
 InserterTabs.getTabs = () => [
 	{ name: 'blocks', title: __( 'Blocks' ), component: BlockTypesTab },
-	{ name: 'reusable', title: __( 'Reusable' ), component: ReusableBlocksTab },
+	{
+		name: 'reusable',
+		title: __( 'Synced patterns' ),
+		component: ReusableBlocksTab,
+	},
 ];
 
 export default InserterTabs;
diff --git a/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..f53e11c9e310bb
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inserter can add blocks adds new block at the end of post 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 -->"
+`;
+
+exports[`Inserter can add blocks after another 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:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks before another block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading"></h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last 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></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
+"<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Inserter can add blocks inserts block at the end of post when no block is selected 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:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
+
+exports[`Inserter can add blocks to the beginning 1`] = `
+"<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- 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></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Inserter can add blocks to the end 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></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->"
+`;
diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
deleted file mode 100644
index 925570130359a6..00000000000000
--- a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import items from './fixtures';
-import BlockTypesTab from '../block-types-tab';
-
-jest.mock( '../hooks/use-clipboard-block' );
-jest.mock( '@wordpress/data/src/components/use-select' );
-
-const selectMock = {
-	getCategories: jest.fn().mockReturnValue( [] ),
-	getCollections: jest.fn().mockReturnValue( [] ),
-	getInserterItems: jest.fn().mockReturnValue( [] ),
-	canInsertBlockType: jest.fn(),
-	getBlockType: jest.fn(),
-	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( { impressions: {} } ) ),
-};
-
-describe( 'BlockTypesTab component', () => {
-	beforeEach( () => {
-		useSelect.mockImplementation( ( callback ) =>
-			callback( () => selectMock )
-		);
-	} );
-
-	it( 'renders without crashing', () => {
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-		expect( component ).toBeTruthy();
-	} );
-
-	it( 'shows block items', () => {
-		selectMock.getInserterItems.mockReturnValue( items );
-
-		const blockItems = items.filter(
-			( { id, category } ) =>
-				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
-		);
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-
-		blockItems.forEach( ( item ) => {
-			expect( component.getByText( item.title ) ).toBeTruthy();
-		} );
-	} );
-} );
diff --git a/packages/block-editor/src/components/inserter/test/index.native.js b/packages/block-editor/src/components/inserter/test/index.native.js
index fd65e88ffec3bc..d11eb5925c76ca 100644
--- a/packages/block-editor/src/components/inserter/test/index.native.js
+++ b/packages/block-editor/src/components/inserter/test/index.native.js
@@ -1,7 +1,20 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	getBlock,
+	getEditorHtml,
+	render,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -20,4 +33,241 @@ describe( 'Inserter', () => {
 
 		expect( screen.getByTestId( 'add-block-button' ) ).toBeTruthy();
 	} );
+
+	describe( 'can add blocks', () => {
+		beforeAll( () => {
+			// Register all core blocks
+			registerCoreBlocks();
+		} );
+
+		afterAll( () => {
+			// Clean up registered blocks
+			getBlockTypes().forEach( ( block ) => {
+				unregisterBlockType( block.name );
+			} );
+		} );
+
+		it( 'to the beginning', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To Beginning option
+			const addBlockToBeginningButton =
+				await getByLabelText( 'Add To Beginning' );
+			expect( addBlockToBeginningButton ).toBeVisible();
+			fireEvent.press( addBlockToBeginningButton );
+
+			// Add another block at the beginning
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'before another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph' );
+			fireEvent.press( paragraphBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block Before option
+			const addBlockBeforeButton =
+				await getByLabelText( 'Add Block Before' );
+			expect( addBlockBeforeButton ).toBeVisible();
+			fireEvent.press( addBlockBeforeButton );
+
+			// Add another block before the first one
+			await addBlock( screen, 'Heading', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'after another block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			fireEvent.press( headingBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add Block After option
+			const addBlockAfterButton =
+				await getByLabelText( 'Add Block After' );
+			expect( addBlockAfterButton ).toBeVisible();
+			fireEvent.press( addBlockAfterButton );
+
+			// Add another block after the Heading block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'to the end', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText, getByTestId } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Add Paragraph block
+			await addBlock( screen, 'Paragraph' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Get Inserter button
+			const addBlockButton = await getByTestId( 'add-block-button' );
+
+			// Long press the inserter button
+			fireEvent( addBlockButton, 'onLongPress' );
+
+			// Get Add To End option
+			const addBlockToEndButton = await getByLabelText( 'Add To End' );
+			expect( addBlockToEndButton ).toBeVisible();
+			fireEvent.press( addBlockToEndButton );
+
+			// Add another block to the end after the Paragraph Block
+			await addBlock( screen, 'More', { isPickerOpened: true } );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'adds new block at the end of post', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Heading block
+			const headingBlock = await getBlock( screen, 'Heading', {
+				rowIndex: 2,
+			} );
+			expect( headingBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts between 2 existing blocks', async () => {
+			const screen = await initializeEditor();
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get Spacer block
+			const spacerBlock = await getBlock( screen, 'Spacer' );
+			fireEvent.press( spacerBlock );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 2 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'inserts block at the end of post when no block is selected', async () => {
+			const screen = await initializeEditor();
+			const { getAllByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Select the title
+			const titleInputElement =
+				await getAllByLabelText( 'Post title. test' )[ 0 ];
+			expect( titleInputElement ).toBeVisible();
+			fireEvent.press( titleInputElement );
+
+			// Add More block
+			await addBlock( screen, 'More' );
+
+			// Get More block
+			const moreBlock = await getBlock( screen, 'More', { rowIndex: 3 } );
+			expect( moreBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
+			const screen = await initializeEditor();
+			const { getByLabelText } = screen;
+
+			// Add Spacer block
+			await addBlock( screen, 'Spacer' );
+
+			// Add Heading block
+			await addBlock( screen, 'Heading' );
+
+			// Get the empty paragraph placeholder
+			const paragraphPlaceholder = await getByLabelText(
+				'Add paragraph block'
+			);
+			fireEvent.press( paragraphPlaceholder );
+
+			// Get Paragraph block
+			const paragraphBlock = await getBlock( screen, 'Paragraph', {
+				rowIndex: 3,
+			} );
+			expect( paragraphBlock ).toBeVisible();
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.js
deleted file mode 100644
index ce47db3d7f4079..00000000000000
--- a/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { ReusableBlocksTab } from '../reusable-blocks-tab';
-import items, { categories, collections } from './fixtures';
-import useBlockTypesState from '../hooks/use-block-types-state';
-
-jest.mock( '../hooks/use-block-types-state', () => {
-	// This allows us to tweak the returned value on each test.
-	const mock = jest.fn();
-	return mock;
-} );
-
-describe( 'InserterMenu', () => {
-	beforeAll( () => {
-		registerBlockType( 'core/block', {
-			save: () => {},
-			title: 'reusable block',
-			edit: () => {},
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( 'core/block' );
-	} );
-
-	beforeEach( () => {
-		useBlockTypesState.mockImplementation( () => [
-			items,
-			categories,
-			collections,
-		] );
-	} );
-
-	it( 'should show nothing if there are no items', () => {
-		const noItems = [];
-		useBlockTypesState.mockImplementation( () => [
-			noItems,
-			categories,
-			collections,
-		] );
-
-		render( <ReusableBlocksTab filterValue="random" /> );
-
-		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should list reusable blocks', () => {
-		render( <ReusableBlocksTab /> );
-
-		expect(
-			screen.getByRole( 'option', { name: 'My reusable block' } )
-		).toBeVisible();
-	} );
-
-	it( 'should trim whitespace of search terms', () => {
-		render( <ReusableBlocksTab filterValue=" my reusable" /> );
-
-		expect(
-			screen.getByRole( 'option', { name: 'My reusable block' } )
-		).toBeVisible();
-	} );
-} );
diff --git a/packages/block-editor/src/components/inserter/test/search-items.js b/packages/block-editor/src/components/inserter/test/search-items.js
index 057432113b7317..990e545b3a3994 100644
--- a/packages/block-editor/src/components/inserter/test/search-items.js
+++ b/packages/block-editor/src/components/inserter/test/search-items.js
@@ -50,7 +50,10 @@ describe( 'getNormalizedSearchTerms', () => {
 		).toEqual( [ '师父领进门', '修行在个人' ] );
 		expect(
 			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
-		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'маистора' ] );
+		expect(
+			getNormalizedSearchTerms( 'Cảm ơn sự giúp đỡ của bạn.' )
+		).toEqual( [ 'cam', 'on', 'su', 'giup', 'do', 'cua', 'ban' ] );
 	} );
 } );
 
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
index 83027861e9d190..6807a776b0ee63 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
@@ -29,7 +29,7 @@ const AdvancedControls = () => {
 			title={ __( 'Advanced' ) }
 			initialOpen={ false }
 		>
-			<InspectorControls.Slot __experimentalGroup="advanced" />
+			<InspectorControls.Slot group="advanced" />
 		</PanelBody>
 	);
 };
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js
new file mode 100644
index 00000000000000..f0403139f271ae
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import groups from '../inspector-controls/groups';
+
+export default function AdvancedControls( props ) {
+	const Slot = groups.advanced?.Slot;
+	if ( ! Slot ) {
+		return null;
+	}
+
+	return (
+		<Slot { ...props }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+
+				return (
+					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
+				);
+			} }
+		</Slot>
+	);
+}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
deleted file mode 100644
index deb3bccffaa168..00000000000000
--- a/packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-import {
-	PanelBody,
-	__experimentalUseSlotFills as useSlotFills,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockStyles from '../block-styles';
-import DefaultStylePicker from '../default-style-picker';
-import InspectorControls from '../inspector-controls';
-import InspectorControlsGroups from '../inspector-controls/groups';
-
-const AppearanceTab = ( {
-	blockName,
-	clientId,
-	hasBlockStyles,
-	hasSingleBlockSelection = false,
-} ) => {
-	const { border, color, dimensions, typography } = InspectorControlsGroups;
-	const appearanceFills = [
-		...( useSlotFills( border.Slot.__unstableName ) || [] ),
-		...( useSlotFills( color.Slot.__unstableName ) || [] ),
-		...( useSlotFills( dimensions.Slot.__unstableName ) || [] ),
-		...( useSlotFills( typography.Slot.__unstableName ) || [] ),
-	];
-
-	return (
-		<>
-			{ ! appearanceFills.length && (
-				<span className="block-editor-block-inspector__no-block-tools">
-					{ hasSingleBlockSelection
-						? __( 'This block has no style options.' )
-						: __( 'The selected blocks have no style options.' ) }
-				</span>
-			) }
-			{ hasBlockStyles && (
-				<div>
-					<PanelBody title={ __( 'Styles' ) }>
-						<BlockStyles clientId={ clientId } />
-						{ hasBlockSupport(
-							blockName,
-							'defaultStylePicker',
-							true
-						) && <DefaultStylePicker blockName={ blockName } /> }
-					</PanelBody>
-				</div>
-			) }
-			<InspectorControls.Slot
-				__experimentalGroup="color"
-				label={ __( 'Color' ) }
-				className="color-block-support-panel__inner-wrapper"
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="typography"
-				label={ __( 'Typography' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="dimensions"
-				label={ __( 'Dimensions' ) }
-			/>
-			<InspectorControls.Slot
-				__experimentalGroup="border"
-				label={ __( 'Border' ) }
-			/>
-		</>
-	);
-};
-
-export default AppearanceTab;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index ad34f5625b5dd5..12465df0ca467c 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -1,57 +1,80 @@
 /**
  * WordPress dependencies
  */
-import { TabPanel } from '@wordpress/components';
+import {
+	Icon,
+	Tooltip,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { TAB_SETTINGS, TAB_APPEARANCE, TAB_LIST_VIEW } from './utils';
-import AppearanceTab from './appearance-tab';
+import { TAB_SETTINGS, TAB_STYLES, TAB_LIST_VIEW } from './utils';
 import SettingsTab from './settings-tab';
-import { default as ListViewTab, useIsListViewDisabled } from './list-view-tab';
+import StylesTab from './styles-tab';
+import InspectorControls from '../inspector-controls';
+import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { unlock } from '../../lock-unlock';
 
-const defaultTabs = [ TAB_APPEARANCE, TAB_SETTINGS ];
-const tabsWithListView = [ TAB_LIST_VIEW, TAB_APPEARANCE, TAB_SETTINGS ];
+const { Tabs } = unlock( componentsPrivateApis );
 
 export default function InspectorControlsTabs( {
 	blockName,
 	clientId,
 	hasBlockStyles,
+	tabs,
 } ) {
-	const tabs = useIsListViewDisabled( blockName )
-		? defaultTabs
-		: tabsWithListView;
+	const showIconLabels = useSelect( ( select ) => {
+		return select( preferencesStore ).get( 'core', 'showIconLabels' );
+	}, [] );
 
-	return (
-		<TabPanel className="block-editor-block-inspector__tabs" tabs={ tabs }>
-			{ ( tab ) => {
-				if ( tab.name === TAB_SETTINGS.name ) {
-					return (
-						<SettingsTab hasSingleBlockSelection={ !! blockName } />
-					);
-				}
-
-				if ( tab.name === TAB_APPEARANCE.name ) {
-					return (
-						<AppearanceTab
-							blockName={ blockName }
-							clientId={ clientId }
-							hasBlockStyles={ hasBlockStyles }
-							hasSingleBlockSelection={ !! blockName }
-						/>
-					);
-				}
+	// The tabs panel will mount before fills are rendered to the list view
+	// slot. This means the list view tab isn't initially included in the
+	// available tabs so the panel defaults selection to the settings tab
+	// which at the time is the first tab. This check allows blocks known to
+	// include the list view tab to set it as the tab selected by default.
+	const initialTabName = ! useIsListViewTabDisabled( blockName )
+		? TAB_LIST_VIEW.name
+		: undefined;
 
-				if ( tab.name === TAB_LIST_VIEW.name ) {
-					return (
-						<ListViewTab
-							blockName={ blockName }
-							hasSingleBlockSelection={ !! blockName }
-						/>
-					);
-				}
-			} }
-		</TabPanel>
+	return (
+		<div className="block-editor-block-inspector__tabs">
+			<Tabs defaultTabId={ initialTabName } key={ clientId }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) =>
+						showIconLabels ? (
+							<Tabs.Tab key={ tab.name } tabId={ tab.name }>
+								{ tab.title }
+							</Tabs.Tab>
+						) : (
+							<Tooltip text={ tab.title } key={ tab.name }>
+								<Tabs.Tab
+									tabId={ tab.name }
+									aria-label={ tab.title }
+								>
+									<Icon icon={ tab.icon } />
+								</Tabs.Tab>
+							</Tooltip>
+						)
+					) }
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
+					<SettingsTab showAdvancedControls={ !! blockName } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_STYLES.name } focusable={ false }>
+					<StylesTab
+						blockName={ blockName }
+						clientId={ clientId }
+						hasBlockStyles={ hasBlockStyles }
+					/>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ TAB_LIST_VIEW.name } focusable={ false }>
+					<InspectorControls.Slot group="list" />
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js
deleted file mode 100644
index d95f39b6e96515..00000000000000
--- a/packages/block-editor/src/components/inspector-controls-tabs/list-view-tab.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import InspectorControls from '../inspector-controls';
-import InspectorControlsGroups from '../inspector-controls/groups';
-
-// This tab restricts the blocks that may render to it via the allowlist below.
-const allowlist = [ 'core/navigation' ];
-
-export const useIsListViewDisabled = ( blockName ) => {
-	return ! allowlist.includes( blockName );
-};
-
-const ListViewTab = ( { blockName, hasSingleBlockSelection } ) => {
-	const { list } = InspectorControlsGroups;
-	const fills = useSlotFills( list.Slot.__unstableName ) || [];
-
-	// Unlike other tabs the List View is much more niche. As such it will be
-	// omitted if the current block isn't in the allowlist.
-	if ( useIsListViewDisabled( blockName ) ) {
-		return;
-	}
-
-	return (
-		<>
-			{ ! fills.length && (
-				<span className="block-editor-block-inspector__no-block-tools">
-					{ hasSingleBlockSelection
-						? __( 'This block has no list options.' )
-						: __( 'The selected blocks have no list options.' ) }
-				</span>
-			) }
-			<InspectorControls.Slot __experimentalGroup="list" />
-		</>
-	);
-};
-
-export default ListViewTab;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
new file mode 100644
index 00000000000000..42a8597227dee9
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import { default as InspectorControls } from '../inspector-controls';
+import { store as blockEditorStore } from '../../store';
+
+const PositionControlsPanel = () => {
+	const [ initialOpen, setInitialOpen ] = useState();
+
+	// Determine whether the panel should be expanded.
+	const { multiSelectedBlocks } = useSelect( ( select ) => {
+		const { getBlocksByClientId, getSelectedBlockClientIds } =
+			select( blockEditorStore );
+		const clientIds = getSelectedBlockClientIds();
+		return {
+			multiSelectedBlocks: getBlocksByClientId( clientIds ),
+		};
+	}, [] );
+
+	useLayoutEffect( () => {
+		// If any selected block has a position set, open the panel by default.
+		// The first block's value will still be used within the control though.
+		if ( initialOpen === undefined ) {
+			setInitialOpen(
+				multiSelectedBlocks.some(
+					( { attributes } ) => !! attributes?.style?.position?.type
+				)
+			);
+		}
+	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+
+	return (
+		<PanelBody
+			className="block-editor-block-inspector__position"
+			title={ __( 'Position' ) }
+			initialOpen={ initialOpen ?? false }
+		>
+			<InspectorControls.Slot group="position" />
+		</PanelBody>
+	);
+};
+
+const PositionControls = () => {
+	const fills = useSlotFills( InspectorControlsGroups.position.name );
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return <PositionControlsPanel />;
+};
+
+export default PositionControls;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
index a000173807c197..ea2f45114bf9cf 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js
@@ -1,43 +1,21 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import AdvancedControls from './advanced-controls-panel';
-import InspectorControlsGroups from '../inspector-controls/groups';
-import {
-	default as InspectorControls,
-	InspectorAdvancedControls,
-} from '../inspector-controls';
-
-const SettingsTab = ( { hasSingleBlockSelection = false } ) => {
-	const { default: defaultGroup } = InspectorControlsGroups;
-	const settingsFills = [
-		...( useSlotFills( defaultGroup.Slot.__unstableName ) || [] ),
-		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
-	];
+import PositionControls from './position-controls-panel';
+import { default as InspectorControls } from '../inspector-controls';
 
-	return (
-		<>
-			<InspectorControls.Slot />
-			{ hasSingleBlockSelection && (
-				<div>
-					<AdvancedControls />
-				</div>
-			) }
-			{ ! settingsFills.length && (
-				<span className="block-editor-block-inspector__no-block-tools">
-					{ hasSingleBlockSelection
-						? __( 'This block has no settings.' )
-						: __( 'The selected blocks have no settings.' ) }
-				</span>
-			) }
-		</>
-	);
-};
+const SettingsTab = ( { showAdvancedControls = false } ) => (
+	<>
+		<InspectorControls.Slot />
+		<PositionControls />
+		<InspectorControls.Slot group="bindings" />
+		{ showAdvancedControls && (
+			<div>
+				<AdvancedControls />
+			</div>
+		) }
+	</>
+);
 
 export default SettingsTab;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
new file mode 100644
index 00000000000000..9c9b04f7b84734
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -0,0 +1,3 @@
+.block-editor-block-inspector__tabs [role="tablist"] {
+	width: 100%;
+}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
new file mode 100644
index 00000000000000..e45805a51391a4
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/styles-tab.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockStyles from '../block-styles';
+import InspectorControls from '../inspector-controls';
+import { useBorderPanelLabel } from '../../hooks/border';
+
+const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+
+	return (
+		<>
+			{ hasBlockStyles && (
+				<div>
+					<PanelBody title={ __( 'Styles' ) }>
+						<BlockStyles clientId={ clientId } />
+					</PanelBody>
+				</div>
+			) }
+			<InspectorControls.Slot
+				group="color"
+				label={ __( 'Color' ) }
+				className="color-block-support-panel__inner-wrapper"
+			/>
+			<InspectorControls.Slot
+				group="background"
+				label={ __( 'Background image' ) }
+			/>
+			<InspectorControls.Slot group="filter" />
+			<InspectorControls.Slot
+				group="typography"
+				label={ __( 'Typography' ) }
+			/>
+			<InspectorControls.Slot
+				group="dimensions"
+				label={ __( 'Dimensions' ) }
+			/>
+			<InspectorControls.Slot group="border" label={ borderPanelLabel } />
+			<InspectorControls.Slot group="styles" />
+		</>
+	);
+};
+
+export default StylesTab;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
new file mode 100644
index 00000000000000..c0655f4d85f3f4
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControlsGroups from '../inspector-controls/groups';
+import useIsListViewTabDisabled from './use-is-list-view-tab-disabled';
+import { InspectorAdvancedControls } from '../inspector-controls';
+import { TAB_LIST_VIEW, TAB_SETTINGS, TAB_STYLES } from './utils';
+import { store as blockEditorStore } from '../../store';
+
+const EMPTY_ARRAY = [];
+
+function getShowTabs( blockName, tabSettings = {} ) {
+	// Block specific setting takes precedence over generic default.
+	if ( tabSettings[ blockName ] !== undefined ) {
+		return tabSettings[ blockName ];
+	}
+
+	// Use generic default if set over the Gutenberg experiment option.
+	if ( tabSettings.default !== undefined ) {
+		return tabSettings.default;
+	}
+
+	return true;
+}
+
+export default function useInspectorControlsTabs( blockName ) {
+	const tabs = [];
+	const {
+		bindings: bindingsGroup,
+		border: borderGroup,
+		color: colorGroup,
+		default: defaultGroup,
+		dimensions: dimensionsGroup,
+		list: listGroup,
+		position: positionGroup,
+		styles: stylesGroup,
+		typography: typographyGroup,
+		effects: effectsGroup,
+	} = InspectorControlsGroups;
+
+	// List View Tab: If there are any fills for the list group add that tab.
+	const listViewDisabled = useIsListViewTabDisabled( blockName );
+	const listFills = useSlotFills( listGroup.name );
+	const hasListFills = ! listViewDisabled && !! listFills && listFills.length;
+
+	// Styles Tab: Add this tab if there are any fills for block supports
+	// e.g. border, color, spacing, typography, etc.
+	const styleFills = [
+		...( useSlotFills( borderGroup.name ) || [] ),
+		...( useSlotFills( colorGroup.name ) || [] ),
+		...( useSlotFills( dimensionsGroup.name ) || [] ),
+		...( useSlotFills( stylesGroup.name ) || [] ),
+		...( useSlotFills( typographyGroup.name ) || [] ),
+		...( useSlotFills( effectsGroup.name ) || [] ),
+	];
+	const hasStyleFills = styleFills.length;
+
+	// Settings Tab: If we don't have multiple tabs to display
+	// (i.e. both list view and styles), check only the default and position
+	// InspectorControls slots. If we have multiple tabs, we'll need to check
+	// the advanced controls slot as well to ensure they are rendered.
+	const advancedFills = [
+		...( useSlotFills( InspectorAdvancedControls.slotName ) || [] ),
+		...( useSlotFills( bindingsGroup.name ) || [] ),
+	];
+
+	const settingsFills = [
+		...( useSlotFills( defaultGroup.name ) || [] ),
+		...( useSlotFills( positionGroup.name ) || [] ),
+		...( hasListFills && hasStyleFills > 1 ? advancedFills : [] ),
+	];
+
+	// Add the tabs in the order that they will default to if available.
+	// List View > Settings > Styles.
+	if ( hasListFills ) {
+		tabs.push( TAB_LIST_VIEW );
+	}
+
+	if ( settingsFills.length ) {
+		tabs.push( TAB_SETTINGS );
+	}
+
+	if ( hasStyleFills ) {
+		tabs.push( TAB_STYLES );
+	}
+
+	const tabSettings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().blockInspectorTabs;
+	}, [] );
+
+	const showTabs = getShowTabs( blockName, tabSettings );
+	return showTabs ? tabs : EMPTY_ARRAY;
+}
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js b/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js
new file mode 100644
index 00000000000000..f102211f3353a4
--- /dev/null
+++ b/packages/block-editor/src/components/inspector-controls-tabs/use-is-list-view-tab-disabled.js
@@ -0,0 +1,9 @@
+// List view tab restricts the blocks that may render to it via the
+// allowlist below.
+const allowlist = [ 'core/navigation' ];
+
+export const useIsListViewTabDisabled = ( blockName ) => {
+	return ! allowlist.includes( blockName );
+};
+
+export default useIsListViewTabDisabled;
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/utils.js b/packages/block-editor/src/components/inspector-controls-tabs/utils.js
index 4ab6f0164a19c0..ff05e79cbd37cc 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/utils.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/utils.js
@@ -2,27 +2,25 @@
  * WordPress dependencies
  */
 import { cog, styles, listView } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 export const TAB_SETTINGS = {
 	name: 'settings',
-	title: 'Settings',
+	title: __( 'Settings' ),
 	value: 'settings',
 	icon: cog,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
-export const TAB_APPEARANCE = {
-	name: 'appearance',
-	title: 'Appearance',
-	value: 'appearance',
+export const TAB_STYLES = {
+	name: 'styles',
+	title: __( 'Styles' ),
+	value: 'styles',
 	icon: styles,
-	className: 'block-editor-block-inspector__tab-item',
 };
 
 export const TAB_LIST_VIEW = {
 	name: 'list',
-	title: 'List View',
+	title: __( 'List View' ),
 	value: 'list-view',
 	icon: listView,
-	className: 'block-editor-block-inspector__tab-item',
 };
diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md
index 2799431917b75e..916f53b5f42d8b 100644
--- a/packages/block-editor/src/components/inspector-controls/README.md
+++ b/packages/block-editor/src/components/inspector-controls/README.md
@@ -23,7 +23,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'my-plugin/inspector-controls-example', {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	title: 'Inspector controls example',
 
@@ -96,6 +96,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -114,6 +115,8 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
 							value={ textField }
@@ -121,12 +124,14 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
+							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -188,9 +193,7 @@ Inspector Advanced Controls appear under the _Advanced_ panel of a block's [Insp
 ### Usage
 
 ```js
-import {
-	TextControl,
-} from '@wordpress/components';
+import { TextControl } from '@wordpress/components';
 import {
 	InspectorControls,
 	InspectorAdvancedControls,
@@ -199,14 +202,14 @@ import {
 function MyBlockEdit( { attributes, setAttributes } ) {
 	return (
 		<>
-			<div>
-				{ /* Block markup goes here */ }
-			</div
+			<div>{ /* Block markup goes here */ }</div>
 			<InspectorControls>
-				{ /* Regular control goes here */
+				{ /* Regular control goes here */ }
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }
 					onChange={ ( nextValue ) => {
diff --git a/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js b/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
index fb53e47afbd82e..be2f01b5ed1688 100644
--- a/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
+++ b/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
@@ -2,11 +2,27 @@
  * WordPress dependencies
  */
 import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+export default function BlockSupportSlotContainer( {
+	Slot,
+	fillProps,
+	...props
+} ) {
+	// Add the toolspanel context provider and value to existing fill props
 	const toolsPanelContext = useContext( ToolsPanelContext );
+	const computedFillProps = useMemo(
+		() => ( {
+			...( fillProps ?? {} ),
+			forwardedContext: [
+				...( fillProps?.forwardedContext ?? [] ),
+				[ ToolsPanelContext.Provider, { value: toolsPanelContext } ],
+			],
+		} ),
+		[ toolsPanelContext, fillProps ]
+	);
+
 	return (
-		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
 	);
 }
diff --git a/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js b/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
index d582548b5d64ef..3eee7bf1b09574 100644
--- a/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
+++ b/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
@@ -10,6 +10,7 @@ import { useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -19,7 +20,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 		getSelectedBlockClientId,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
-
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const panelId = getSelectedBlockClientId();
 	const resetAll = useCallback(
 		( resetFilters = [] ) => {
@@ -52,7 +53,6 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			updateBlockAttributes( clientIds, newAttributes, true );
 		},
 		[
-			cleanEmptyObject,
 			getBlockAttributes,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
@@ -68,10 +68,11 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			resetAll={ resetAll }
 			key={ panelId }
 			panelId={ panelId }
-			hasInnerWrapper={ true }
-			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
+			hasInnerWrapper
+			shouldRenderPlaceholderItems // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ children }
 		</ToolsPanel>
diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
index af3478252de6d2..456b33af9137fe 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,24 +6,43 @@ import {
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
+import { useEffect, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import groups from './groups';
 
 export default function InspectorControlsFill( {
-	__experimentalGroup: group = 'default',
 	children,
+	group = 'default',
+	__experimentalGroup,
+	resetAllFilter,
 } ) {
-	const isDisplayed = useDisplayBlockControls();
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+
+	const context = useBlockEditContext();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 
@@ -36,18 +50,55 @@ export default function InspectorControlsFill( {
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to InspectorControlsFill will not have
-					// access to any React Context whose Provider is part of
-					// the InspectorControlsSlot tree. So we re-create the
-					// Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
 					return (
-						<ToolsPanelContext.Provider value={ value }>
-							{ children }
-						</ToolsPanelContext.Provider>
+						<ToolsPanelInspectorControl
+							fillProps={ fillProps }
+							children={ children }
+							resetAllFilter={ resetAllFilter }
+						/>
 					);
 				} }
 			</Fill>
 		</StyleProvider>
 	);
 }
+
+function RegisterResetAll( { resetAllFilter, children } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } =
+		useContext( ToolsPanelContext );
+	useEffect( () => {
+		if (
+			resetAllFilter &&
+			registerResetAllFilter &&
+			deregisterResetAllFilter
+		) {
+			registerResetAllFilter( resetAllFilter );
+			return () => {
+				deregisterResetAllFilter( resetAllFilter );
+			};
+		}
+	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+	return children;
+}
+
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
+	// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
+	// that should wrap the fill markup.
+	const { forwardedContext = [] } = fillProps;
+
+	// Children passed to InspectorControlsFill will not have
+	// access to any React Context whose Provider is part of
+	// the InspectorControlsSlot tree. So we re-create the
+	// Provider in this subtree.
+	const innerMarkup = (
+		<RegisterResetAll resetAllFilter={ resetAllFilter }>
+			{ children }
+		</RegisterResetAll>
+	);
+	return forwardedContext.reduce(
+		( inner, [ Provider, props ] ) => (
+			<Provider { ...props }>{ inner }</Provider>
+		),
+		innerMarkup
+	);
+}
diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
index 01d3fc9c104727..69da92dd42b378 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.native.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -9,38 +9,52 @@ import { View } from 'react-native';
 import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import groups from './groups';
-import useDisplayBlockControls from '../use-display-block-controls';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
-	__experimentalGroup: group = 'default',
+	group = 'default',
+	__experimentalGroup,
 	...props
 } ) {
-	const isDisplayed = useDisplayBlockControls();
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsFill`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+	const context = useBlockEditContext();
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
-	if ( ! isDisplayed ) {
+	if ( ! context[ mayDisplayControlsKey ] ) {
 		return null;
 	}
 
 	return (
 		<>
 			<Fill { ...props }>
-				{
-					<BottomSheetConsumer>
-						{ () => <View>{ children }</View> }
-					</BottomSheetConsumer>
-				}
+				<BottomSheetConsumer>
+					{ () => <View>{ children }</View> }
+				</BottomSheetConsumer>
 			</Fill>
 			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index cb03c1ff13fa57..34ec49a5e1cb41 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,23 +5,38 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsBindings = createSlotFill( 'InspectorControlsBindings' );
+const InspectorControlsBackground = createSlotFill(
+	'InspectorControlsBackground'
+);
 const InspectorControlsBorder = createSlotFill( 'InspectorControlsBorder' );
 const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
+const InspectorControlsFilter = createSlotFill( 'InspectorControlsFilter' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsPosition = createSlotFill( 'InspectorControlsPosition' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
 const InspectorControlsListView = createSlotFill( 'InspectorControlsListView' );
+const InspectorControlsStyles = createSlotFill( 'InspectorControlsStyles' );
+const InspectorControlsEffects = createSlotFill( 'InspectorControlsEffects' );
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	background: InspectorControlsBackground,
+	bindings: InspectorControlsBindings,
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
+	effects: InspectorControlsEffects,
+	filter: InspectorControlsFilter,
 	list: InspectorControlsListView,
+	position: InspectorControlsPosition,
+	settings: InspectorControlsDefault, // Alias for default.
+	styles: InspectorControlsStyles,
 	typography: InspectorControlsTypography,
 };
 
diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js
index 4cb36cdc843994..f066f059235064 100644
--- a/packages/block-editor/src/components/inspector-controls/index.js
+++ b/packages/block-editor/src/components/inspector-controls/index.js
@@ -10,14 +10,10 @@ InspectorControls.Slot = InspectorControlsSlot;
 
 // This is just here for backward compatibility.
 export const InspectorAdvancedControls = ( props ) => {
-	return (
-		<InspectorControlsFill { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsFill { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.Slot = ( props ) => {
-	return (
-		<InspectorControlsSlot { ...props } __experimentalGroup="advanced" />
-	);
+	return <InspectorControlsSlot { ...props } group="advanced" />;
 };
 InspectorAdvancedControls.slotName = 'InspectorAdvancedControls';
 
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
index 010332c0a3112d..4957ca90b5679a 100644
--- a/packages/block-editor/src/components/inspector-controls/slot.js
+++ b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -1,11 +1,9 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseSlot as useSlot,
-	__experimentalUseSlotFills as useSlotFills,
-} from '@wordpress/components';
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -15,30 +13,48 @@ import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	label,
+	fillProps,
 	...props
 } ) {
-	const Slot = groups[ group ]?.Slot;
-	const slot = useSlot( Slot?.__unstableName );
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot || ! slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
+	const slotFill = groups[ group ];
+	const fills = useSlotFills( slotFill?.name );
+
+	if ( ! slotFill ) {
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( fills && fills.length );
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 
+	const { Slot } = slotFill;
+
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					fillProps={ fillProps }
+					Slot={ Slot }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually />;
+	return <Slot { ...props } fillProps={ fillProps } bubblesVirtually />;
 }
diff --git a/packages/block-editor/src/components/inspector-controls/slot.native.js b/packages/block-editor/src/components/inspector-controls/slot.native.js
index adf4da06965e42..e8917a6003b47d 100644
--- a/packages/block-editor/src/components/inspector-controls/slot.native.js
+++ b/packages/block-editor/src/components/inspector-controls/slot.native.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -9,12 +10,24 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
-	__experimentalGroup: group = 'default',
+	__experimentalGroup,
+	group = 'default',
 	...props
 } ) {
+	if ( __experimentalGroup ) {
+		deprecated(
+			'`__experimentalGroup` property in `InspectorControlsSlot`',
+			{
+				since: '6.2',
+				version: '6.4',
+				alternative: '`group`',
+			}
+		);
+		group = __experimentalGroup;
+	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/inspector-popover-header/index.js b/packages/block-editor/src/components/inspector-popover-header/index.js
index e5f492eddd2b77..cf6bf0d3d6796e 100644
--- a/packages/block-editor/src/components/inspector-popover-header/index.js
+++ b/packages/block-editor/src/components/inspector-popover-header/index.js
@@ -31,6 +31,7 @@ export default function InspectorPopoverHeader( {
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
+						size="small"
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
@@ -43,6 +44,7 @@ export default function InspectorPopoverHeader( {
 				) ) }
 				{ onClose && (
 					<Button
+						size="small"
 						className="block-editor-inspector-popover-header__action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
diff --git a/packages/block-editor/src/components/inspector-popover-header/style.scss b/packages/block-editor/src/components/inspector-popover-header/style.scss
index ebb76aab23e28a..1ce9ec07f64094 100644
--- a/packages/block-editor/src/components/inspector-popover-header/style.scss
+++ b/packages/block-editor/src/components/inspector-popover-header/style.scss
@@ -1,16 +1,3 @@
 .block-editor-inspector-popover-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].block-editor-inspector-popover-header__action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}
diff --git a/packages/block-editor/src/components/justify-content-control/ui.js b/packages/block-editor/src/components/justify-content-control/ui.js
index 08c13079c2fcc9..60848db7405187 100644
--- a/packages/block-editor/src/components/justify-content-control/ui.js
+++ b/packages/block-editor/src/components/justify-content-control/ui.js
@@ -7,6 +7,7 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,7 @@ const icons = {
 	center: justifyCenter,
 	right: justifyRight,
 	'space-between': justifySpaceBetween,
+	stretch: justifyStretch,
 };
 
 function JustifyContentUI( {
@@ -66,6 +68,13 @@ function JustifyContentUI( {
 			isActive: 'space-between' === value,
 			onClick: () => handleClick( 'space-between' ),
 		},
+		{
+			name: 'stretch',
+			icon: justifyStretch,
+			title: __( 'Stretch items' ),
+			isActive: 'stretch' === value,
+			onClick: () => handleClick( 'stretch' ),
+		},
 	];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
index ae41f75e473fca..9b838446469229 100644
--- a/packages/block-editor/src/components/keyboard-shortcuts/index.js
+++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -93,6 +93,16 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/multi-text-selection',
+			category: 'selection',
+			description: __( 'Select text across multiple blocks.' ),
+			keyCombination: {
+				modifier: 'shift',
+				character: 'arrow',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/focus-toolbar',
 			category: 'global',
@@ -122,6 +132,29 @@ function KeyboardShortcutsRegister() {
 				character: 'y',
 			},
 		} );
+
+		// List view shortcuts.
+		registerShortcut( {
+			name: 'core/block-editor/collapse-list-view',
+			category: 'list-view',
+			description: __( 'Collapse all other items.' ),
+			keyCombination: {
+				modifier: 'alt',
+				character: 'l',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/group',
+			category: 'block',
+			description: __(
+				'Create a group block from the selected multiple blocks.'
+			),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'g',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;
diff --git a/packages/block-editor/src/components/letter-spacing-control/README.md b/packages/block-editor/src/components/letter-spacing-control/README.md
index fb4dd4fd23daca..535ca2ae8cbbff 100644
--- a/packages/block-editor/src/components/letter-spacing-control/README.md
+++ b/packages/block-editor/src/components/letter-spacing-control/README.md
@@ -5,11 +5,6 @@ The `LetterSpacingControl` component renders a [`UnitControl`](https://github.co
 This component is used for blocks that display text, commonly inside a 
 [`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md).
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
@@ -17,13 +12,14 @@ This component is used for blocks that display text, commonly inside a
 Renders a letter spacing control.
 
 ```jsx
-import { LetterSpacingControl } from '@wordpress/block-editor';
+import { __experimentalLetterSpacingControl as LetterSpacingControl } from '@wordpress/block-editor';
 
 const MyLetterSpacingControl = () => (
 	<LetterSpacingControl
 		value={ value }
 		onChange={ onChange }
 		__unstableInputWidth="auto"
+		__next40pxDefaultSize
 	/>
 );
 ```
@@ -43,13 +39,20 @@ The current value of the letter spacing setting.
 
 A callback function invoked when the value is changed.
 
-### `_unstableInputWidth`
+### `__unstableInputWidth`
 
 -   **Type:** `string|number|undefined`
 -   **Default:** `undefined`
 
 Input width to pass through to inner UnitControl. Should be a valid CSS value.
 
+#### `__next40pxDefaultSize`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
index 0b67a74cda0cd2..1edbe65a3737e6 100644
--- a/packages/block-editor/src/components/letter-spacing-control/index.js
+++ b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -5,35 +5,56 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../../components/use-setting';
+import { useSettings } from '../../components/use-settings';
 
 /**
  * Control for letter-spacing.
  *
- * @param {Object}                  props                      Component props.
- * @param {string}                  props.value                Currently selected letter-spacing.
- * @param {Function}                props.onChange             Handles change in letter-spacing selection.
- * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {Object}                  props                       Component props.
+ * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
+ * @param {string}                  props.value                 Currently selected letter-spacing.
+ * @param {Function}                props.onChange              Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
- * @return {WPElement} Letter-spacing control.
+ * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
+	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
 	...otherProps
 } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: 2, em: 0.2, rem: 0.2 },
 	} );
+
+	if (
+		! __next40pxDefaultSize &&
+		( otherProps.size === undefined || otherProps.size === 'default' )
+	) {
+		deprecated(
+			`36px default size for wp.blockEditor.__experimentalLetterSpacingControl`,
+			{
+				since: '6.8',
+				version: '7.1',
+				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+			}
+		);
+	}
+
 	return (
 		<UnitControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }
diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index 36f9d17f15bd65..89bcc69622367f 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -6,11 +6,6 @@ The `LineHeightControl` component adds a lineHeight attribute to the core Paragr
 
 _Note:_ It is worth noting that the line height setting option is an opt-in feature. [Themes need to declare support for it](/docs/how-to-guides/themes/theme-support.md#supporting-custom-line-heights) before it'll be available.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
@@ -23,7 +18,6 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__nextHasNoMarginBottom={ true }
 	/>
 );
 ```
@@ -42,12 +36,12 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
-#### `__nextHasNoMarginBottom`
+#### `__next40pxDefaultSize`
 
--   **Type:** `boolean`
--   **Default:** `false`
+- **Type:** `boolean`
+- **Default:** `false`
 
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+Start opting into the larger default height that will become the default size in a future version.
 
 ## Related components
 
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 670d6fac37e8df..e6af602c2875ae 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
@@ -12,14 +11,15 @@ import {
 	BASE_DEFAULT_VALUE,
 	RESET_VALUE,
 	STEP,
+	SPIN_FACTOR,
 	isLineHeightDefined,
 } from './utils';
 
 const LineHeightControl = ( {
+	/** Start opting into the larger default height that will become the default size in a future version. */
+	__next40pxDefaultSize = false,
 	value: lineHeight,
 	onChange,
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
 	...otherProps
 } ) => {
@@ -27,27 +27,32 @@ const LineHeightControl = ( {
 
 	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
 		// Set the next value without modification if lineHeight has been defined.
-		if ( isDefined ) return nextValue;
+		if ( isDefined ) {
+			return nextValue;
+		}
 
 		/**
-		 * The following logic handles the initial step up/down action
+		 * The following logic handles the initial spin up/down action
 		 * (from an undefined value state) so that the next values are better suited for
-		 * line-height rendering. For example, the first step up should immediately
+		 * line-height rendering. For example, the first spin up should immediately
 		 * go to 1.6, rather than the normally expected 0.1.
 		 *
-		 * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
-		 * or by clicking the spin buttons.
+		 * Spin up/down actions can be triggered by keydowns of the up/down arrow keys,
+		 * dragging the input or by clicking the spin buttons.
 		 */
+		const spin = STEP * SPIN_FACTOR;
 		switch ( `${ nextValue }` ) {
-			case `${ STEP }`:
-				// Increment by step value.
-				return BASE_DEFAULT_VALUE + STEP;
+			case `${ spin }`:
+				// Increment by spin value.
+				return BASE_DEFAULT_VALUE + spin;
 			case '0': {
-				// This means the user explicitly input '0', rather than stepped down
-				// from an undefined value state.
-				if ( wasTypedOrPasted ) return nextValue;
-				// Decrement by step value.
-				return BASE_DEFAULT_VALUE - STEP;
+				// This means the user explicitly input '0', rather than using the
+				// spin down action from an undefined value state.
+				if ( wasTypedOrPasted ) {
+					return nextValue;
+				}
+				// Decrement by spin value.
+				return BASE_DEFAULT_VALUE - spin;
 			}
 			case '':
 				return BASE_DEFAULT_VALUE;
@@ -70,33 +75,33 @@ const LineHeightControl = ( {
 
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.blockEditor.LineHeightControl',
-			{
-				since: '6.0',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-	const deprecatedStyles = __nextHasNoMarginBottom
-		? undefined
-		: { marginBottom: 24 };
+	const handleOnChange = ( nextValue, { event } ) => {
+		if ( nextValue === '' ) {
+			onChange();
+			return;
+		}
+
+		if ( event.type === 'click' ) {
+			onChange( adjustNextValue( `${ nextValue }`, false ) );
+			return;
+		}
+
+		onChange( `${ nextValue }` );
+	};
 
 	return (
-		<div
-			className="block-editor-line-height-control"
-			style={ deprecatedStyles }
-		>
+		<div className="block-editor-line-height-control">
 			<NumberControl
 				{ ...otherProps }
+				__shouldNotWarnDeprecated36pxSize
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
-				onChange={ onChange }
+				onChange={ handleOnChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
+				spinFactor={ SPIN_FACTOR }
 				value={ value }
 				min={ 0 }
 				spinControls="custom"
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
deleted file mode 100644
index 1b751409f32e38..00000000000000
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import LineHeightControl from '../';
-
-export default {
-	component: LineHeightControl,
-	title: 'BlockEditor/LineHeightControl',
-};
-
-const Template = ( props ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-	__unstableInputWidth: '60px',
-};
-
-export const UnconstrainedWidth = Template.bind( {} );
-UnconstrainedWidth.args = {
-	...Default.args,
-	__unstableInputWidth: '100%',
-};
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.story.js b/packages/block-editor/src/components/line-height-control/stories/index.story.js
new file mode 100644
index 00000000000000..6d26fe2220fd23
--- /dev/null
+++ b/packages/block-editor/src/components/line-height-control/stories/index.story.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import LineHeightControl from '../';
+
+export default {
+	component: LineHeightControl,
+	title: 'BlockEditor/LineHeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__unstableInputWidth: '100px',
+};
+
+export const UnconstrainedWidth = Template.bind( {} );
+UnconstrainedWidth.args = {
+	...Default.args,
+	__unstableInputWidth: '100%',
+};
diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js
index c6a16f5db3cad0..b98bc93c48a83a 100644
--- a/packages/block-editor/src/components/line-height-control/test/index.js
+++ b/packages/block-editor/src/components/line-height-control/test/index.js
@@ -1,61 +1,59 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import LineHeightControl from '../';
-import { BASE_DEFAULT_VALUE, STEP } from '../utils';
+import { BASE_DEFAULT_VALUE, SPIN_FACTOR, STEP } from '../utils';
+
+const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl
-			value={ value }
-			onChange={ setValue }
-			__nextHasNoMarginBottom={ true }
-		/>
-	);
+	return <LineHeightControl value={ value } onChange={ setValue } />;
 };
 
 describe( 'LineHeightControl', () => {
-	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+	it( 'should immediately step up from the default value if up-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
-		fireEvent.keyDown( input, { keyCode: UP } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		await user.click( input );
+		await user.keyboard( '{ArrowUp}' );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+	it( 'should immediately step down from the default value if down-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
-		fireEvent.keyDown( input, { keyCode: DOWN } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		await user.click( input );
+		await user.keyboard( '{ArrowDown}' );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
-	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
-		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		await user.click( screen.getByRole( 'button', { name: 'Increment' } ) );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		input.focus();
-		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		await user.click( screen.getByRole( 'button', { name: 'Decrement' } ) );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );
diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js
index a232394540d2f6..e9bf66259991e3 100644
--- a/packages/block-editor/src/components/line-height-control/utils.js
+++ b/packages/block-editor/src/components/line-height-control/utils.js
@@ -1,5 +1,10 @@
 export const BASE_DEFAULT_VALUE = 1.5;
-export const STEP = 0.1;
+export const STEP = 0.01;
+/**
+ * A spin factor of 10 allows the spin controls to increment/decrement by 0.1.
+ * e.g. A line-height value of 1.55 will increment to 1.65.
+ */
+export const SPIN_FACTOR = 10;
 /**
  * There are varying value types within LineHeightControl:
  *
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index 3d3dd7b0aaa210..5c31c4c14371c9 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -4,6 +4,26 @@ Renders a link control. A link control is a controlled input which maintains a v
 
 It is designed to provide a standardized UI for the creation of a link throughout the Editor, see History section at bottom for further background.
 
+## Best Practices
+
+### Ensuring unique instances
+
+It is possible that a given editor may render multiple instances of the `<LinkControl>` component. As a result, it is important to ensure each instance is unique across the editor to avoid state "leaking" between components.
+
+Why would this happen?
+
+React's reconciliation algorithm means that if you return the same element from a component, it keeps the nodes around as an optimization, even if the props change. This means that if you render two (or more) `<LinkControl>`s, it is possible that the `value` from one will appear in the other as you move between them.
+
+As a result it is recommended that consumers provide a `key` prop to each instance of `<LinkControl>`:
+
+```jsx
+<LinkControl key="some-unique-key" { ...props } />
+```
+
+This will cause React to return the same component/element type but force remount a new instance, thus avoiding the issues described above.
+
+For more information see: https://github.com/WordPress/gutenberg/pull/34742.
+
 ## Relationship to `<URLInput>`
 
 As of Gutenberg 7.4, `<LinkControl>` became the default link creation interface within the Block Editor, replacing previous disparate uses of `<URLInput>` and standardizing the UI.
@@ -15,6 +35,16 @@ The distinction between the two components is perhaps best summarized by the fol
 -   `<URLInput>` - an input for presenting and managing selection behaviors associated with choosing a URL, optionally from a pool of available candidates.
 -   `<LinkControl>` - includes the features of `<URLInput>`, plus additional UI and behaviors to control how this URL applies to the concept of a "link". This includes link "settings" (eg: "opens in new tab", etc) and dynamic, "on the fly" link creation capabilities.
 
+## Persistent "Advanced" (settings) toggle state
+
+By default the link "settings" are hidden and can be toggled open/closed by way of a button labelled `Advanced` in the UI.
+
+In some circumstances if may be desirable to persist the toggle state of this portion of the UI so that it remains in the last state triggered by user interaction.
+
+For example, once the user has toggled the UI to "open", then it may remain open across all links on the site until such time as the user toggles the UI back again.
+
+Consumers who which to take advantage of this functionality should ensure that their block editor environment utilizes the [`@wordpress/preferences`](packages/preferences/README.md) package. By default the `<LinkControl>` component will attempt to persist the state of UI to a setting named `linkControlSettingsDrawer` with a scope of `core/block-editor`. If the preferences package is not available then local state is used and the setting will not be persisted.
+
 ## Search Suggestions
 
 When creating links the `LinkControl` component will handle two kinds of input from users:
@@ -49,6 +79,29 @@ The resulting default properties of `value` include:
 -   `title` (`string`, optional): Link title.
 -   `opensInNewTab` (`boolean`, optional): Whether link should open in a new browser tab. This value is only assigned when not providing a custom `settings` prop.
 
+Note: `<LinkControl>` maintains an internal state tracking temporary user edits to the link `value` prior to submission. To avoid unwanted synchronization of this internal value, it is advised that the `value` prop is stablized (likely via memozation) before it is passed to the component. This will avoid unwanted loss of any changes users have may made whilst interacting with the control.
+
+```jsx
+const memoizedValue = useMemo(
+	() => ( {
+		url: attributes.url,
+		type: attributes.type,
+		opensInNewTab: attributes.target === '_blank',
+		title: attributes.text,
+	} ),
+	[
+		attributes.url,
+		attributes.type,
+		attributes.target,
+		attributes.text,
+	]
+);
+
+<LinkControl
+	value={ memoizedValue }
+>
+```
+
 ### settings
 
 -   Type: `Array`
@@ -69,9 +122,7 @@ An array of settings objects associated with a link (for example: a setting to d
 To disable settings, pass in an empty array. for example:
 
 ```jsx
-<LinkControl
-	settings={ [] }
-/>
+<LinkControl settings={ [] } />
 ```
 
 ### onChange
@@ -192,6 +243,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+
 ### renderControlBottom
 
 -   Type: `Function`
@@ -223,14 +275,14 @@ If passed, children are rendered after the input.
 
 ```jsx
 <LinkControlSearchInput>
-	<div className="block-editor-link-control__search-actions">
+	<HStack justify="right">
 		<Button
 			type="submit"
 			label={ __( 'Submit' ) }
 			icon={ keyboardReturn }
 			className="block-editor-link-control__search-submit"
 		/>
-	</div>
+	</HStack>
 </LinkControlSearchInput>
 ```
 
@@ -322,10 +374,10 @@ The following properties are provided by URLInput:
 -   suggestions
 -   selectedSuggestion
 -   suggestionsListProps
+-   currentInputValue
 
 The following extra properties are provided by LinkControlSearchInput:
 
--   currentInputValue
 -   createSuggestionButtonText
 -   handleSuggestionClick
 -   instanceId
diff --git a/packages/block-editor/src/components/link-control/constants.js b/packages/block-editor/src/components/link-control/constants.js
index eaf07aea73703b..e70ff7b04c7477 100644
--- a/packages/block-editor/src/components/link-control/constants.js
+++ b/packages/block-editor/src/components/link-control/constants.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 // order to handle it as a unique case.
 export const CREATE_TYPE = '__CREATE__';
 export const TEL_TYPE = 'tel';
-export const URL_TYPE = 'URL';
+export const URL_TYPE = 'link';
 export const MAILTO_TYPE = 'mailto';
 export const INTERNAL_TYPE = 'internal';
 
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 52048cdc25b056..0f2ae4a0e05d26 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -1,17 +1,27 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
-import { keyboardReturn } from '@wordpress/icons';
+import {
+	Button,
+	Spinner,
+	Notice,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
+import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { keyboardReturn } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,8 +29,9 @@ import { ENTER } from '@wordpress/keycodes';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
+import LinkSettings from './settings';
 import useCreatePage from './use-create-page';
-import useInternalInputValue from './use-internal-input-value';
+import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -93,12 +104,16 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {boolean=}                   withCreateSuggestion       Whether to allow creation of link value from suggestion.
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
+ * @property {boolean=}                   hasTextControl             Whether to add a text field to the UI to update the value.title.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
  * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
 const noop = () => {};
 
+const PREFERENCE_SCOPE = 'core/block-editor';
+const PREFERENCE_KEY = 'linkControlSettingsDrawer';
+
 /**
  * Renders a link control. A link control is a controlled input which maintains
  * a value associated with a link (HTML anchor element) and relevant settings
@@ -112,6 +127,7 @@ function LinkControl( {
 	settings = DEFAULT_LINK_SETTINGS,
 	onChange = noop,
 	onRemove,
+	onCancel,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -130,16 +146,58 @@ function LinkControl( {
 		withCreateSuggestion = true;
 	}
 
-	const isMounting = useRef( true );
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
+	const { advancedSettingsPreference } = useSelect( ( select ) => {
+		const prefsStore = select( preferencesStore );
+
+		return {
+			advancedSettingsPreference:
+				prefsStore.get( PREFERENCE_SCOPE, PREFERENCE_KEY ) ?? false,
+		};
+	}, [] );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	/**
+	 * Sets the open/closed state of the Advanced Settings Drawer,
+	 * optionlly persisting the state to the user's preferences.
+	 *
+	 * Note that Block Editor components can be consumed by non-WordPress
+	 * environments which may not have preferences setup.
+	 * Therefore a local state is also  used as a fallback.
+	 *
+	 * @param {boolean} prefVal the open/closed state of the Advanced Settings Drawer.
+	 */
+	const setSettingsOpenWithPreference = ( prefVal ) => {
+		if ( setPreference ) {
+			setPreference( PREFERENCE_SCOPE, PREFERENCE_KEY, prefVal );
+		}
+		setSettingsOpen( prefVal );
+	};
+
+	// Block Editor components can be consumed by non-WordPress environments
+	// which may not have these preferences setup.
+	// Therefore a local state is used as a fallback.
+	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
+
+	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
-	const isEndingEditWithFocus = useRef( false );
+	const isEndingEditWithFocusRef = useRef( false );
+
+	const settingsKeys = settings.map( ( { id } ) => id );
 
-	const [ internalUrlInputValue, setInternalUrlInputValue ] =
-		useInternalInputValue( value?.url || '' );
+	const [
+		internalControlValue,
+		setInternalControlValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	] = useInternalValue( value );
 
-	const [ internalTextInputValue, setInternalTextInputValue ] =
-		useInternalInputValue( value?.title || '' );
+	const valueHasChanges =
+		value && ! isShallowEqualObjects( internalControlValue, value );
 
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
@@ -151,28 +209,20 @@ function LinkControl( {
 		useCreatePage( createSuggestion );
 
 	useEffect( () => {
-		if (
-			forceIsEditingLink !== undefined &&
-			forceIsEditingLink !== isEditingLink
-		) {
-			setIsEditingLink( forceIsEditingLink );
+		if ( forceIsEditingLink === undefined ) {
+			return;
 		}
+
+		setIsEditingLink( forceIsEditingLink );
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
 		// We don't auto focus into the Link UI on mount
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
-		if ( isMounting.current ) {
-			isMounting.current = false;
+		if ( isMountingRef.current ) {
 			return;
 		}
-		// Unless we are mounting, we always want to focus either:
-		// - the URL input
-		// - the first focusable element in the Link UI.
-		// But in editing mode if there is a text input present then
-		// the URL input is at index 1. If not then it is at index 0.
-		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 
 		// Scenario - when:
 		// - switching between editable and non editable LinkControl
@@ -180,21 +230,32 @@ function LinkControl( {
 		// ...then move focus to the *first* element to avoid focus loss
 		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[
-				whichFocusTargetIndex
-			] || wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[ 0 ] ||
+			wrapperNode.current;
 
 		nextFocusTarget.focus();
 
-		isEndingEditWithFocus.current = false;
+		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	// The component mounting reference is maintained separately
+	// to correctly reset values in `StrictMode`.
+	useEffect( () => {
+		isMountingRef.current = false;
+
+		return () => {
+			isMountingRef.current = true;
+		};
+	}, [] );
+
+	const hasLinkValue = value?.url?.trim()?.length > 0;
+
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
 	const stopEditing = () => {
-		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
+		isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
@@ -202,22 +263,39 @@ function LinkControl( {
 	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
+		// which should not overide any existing settings values set by the
+		// user. This filters out any settings values from the suggestion.
+		const nonSettingsChanges = Object.keys( updatedValue ).reduce(
+			( acc, key ) => {
+				if ( ! settingsKeys.includes( key ) ) {
+					acc[ key ] = updatedValue[ key ];
+				}
+				return acc;
+			},
+			{}
+		);
+
 		onChange( {
-			...updatedValue,
-			title: internalTextInputValue || updatedValue?.title,
+			...internalControlValue,
+			...nonSettingsChanges,
+			// As title is not a setting, it must be manually applied
+			// in such a way as to preserve the users changes over
+			// any "title" value provided by the "suggestion".
+			title: internalControlValue?.title || updatedValue?.title,
 		} );
+
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
-		if (
-			currentUrlInputValue !== value?.url ||
-			internalTextInputValue !== value?.title
-		) {
+		if ( valueHasChanges ) {
+			// Submit the original value with new stored values applied
+			// on top. URL is a special case as it may also be a prop.
 			onChange( {
 				...value,
+				...internalControlValue,
 				url: currentUrlInputValue,
-				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -225,6 +303,7 @@ function LinkControl( {
 
 	const handleSubmitWithEnter = ( event ) => {
 		const { keyCode } = event;
+
 		if (
 			keyCode === ENTER &&
 			! currentInputIsEmpty // Disallow submitting empty values.
@@ -234,19 +313,46 @@ function LinkControl( {
 		}
 	};
 
-	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+	const resetInternalValues = () => {
+		setInternalControlValue( value );
+	};
+
+	const handleCancel = ( event ) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		// Ensure that any unsubmitted input changes are reset.
+		resetInternalValues();
+
+		if ( hasLinkValue ) {
+			// If there is a link then exist editing mode and show preview.
+			stopEditing();
+		} else {
+			// If there is no link value, then remove the link entirely.
+			onRemove?.();
+		}
+
+		onCancel?.();
+	};
+
+	const currentUrlInputValue =
+		propInputValue || internalControlValue?.url || '';
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
 
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettingsDrawer = !! settings?.length;
+	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
-	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
+	const showTextControl = hasLinkValue && hasTextControl;
+
+	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
 	return (
 		<div
@@ -260,25 +366,27 @@ function LinkControl( {
 				</div>
 			) }
 
-			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
+			{ isEditing && (
 				<>
 					<div
-						className={ classnames( {
+						className={ clsx( {
 							'block-editor-link-control__search-input-wrapper': true,
 							'has-text-control': showTextControl,
+							'has-actions': showActions,
 						} ) }
 					>
 						{ showTextControl && (
 							<TextControl
+								__nextHasNoMarginBottom
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label="Text"
-								value={ internalTextInputValue }
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
+								__next40pxDefaultSize
 							/>
 						) }
-
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -286,7 +394,7 @@ function LinkControl( {
 							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalUrlInputValue }
+							onChange={ setInternalURLInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }
@@ -296,18 +404,24 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
-							useLabel={ showTextControl }
-						>
-							<div className="block-editor-link-control__search-actions">
-								<Button
-									onClick={ handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									disabled={ currentInputIsEmpty } // Disallow submitting empty values.
-								/>
-							</div>
-						</LinkControlSearchInput>
+							hideLabelFromVision={ ! showTextControl }
+							suffix={
+								showActions ? undefined : (
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											onClick={
+												isDisabled ? noop : handleSubmit
+											}
+											label={ __( 'Submit' ) }
+											icon={ keyboardReturn }
+											className="block-editor-link-control__search-submit"
+											aria-disabled={ isDisabled }
+											size="small"
+										/>
+									</InputControlSuffixWrapper>
+								)
+							}
+						/>
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -328,24 +442,62 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					onRemove={ onRemove }
+					onRemove={ () => {
+						onRemove();
+						setIsEditingLink( true );
+					} }
 				/>
 			) }
 
-			{ showSettingsDrawer && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					<LinkControlSettingsDrawer
-						value={ value }
-						settings={ settings }
-						onChange={ onChange }
-					/>
+					{ ! currentInputIsEmpty && (
+						<LinkControlSettingsDrawer
+							settingsOpen={ isSettingsOpen }
+							setSettingsOpen={ setSettingsOpenWithPreference }
+						>
+							<LinkSettings
+								value={ internalControlValue }
+								settings={ settings }
+								onChange={ createSetInternalSettingValueHandler(
+									settingsKeys
+								) }
+							/>
+						</LinkControlSettingsDrawer>
+					) }
 				</div>
 			) }
-			{ renderControlBottom && renderControlBottom() }
+
+			{ showActions && (
+				<HStack
+					justify="right"
+					className="block-editor-link-control__search-actions"
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ handleCancel }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ isDisabled ? noop : handleSubmit }
+						className="block-editor-link-control__search-submit"
+						aria-disabled={ isDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			) }
+
+			{ ! isCreatingPage && renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }
 
 LinkControl.ViewerFill = ViewerFill;
+LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
 export default LinkControl;
diff --git a/packages/block-editor/src/components/link-control/is-url-like.js b/packages/block-editor/src/components/link-control/is-url-like.js
index 3021ace38a26e1..58861b71b837b8 100644
--- a/packages/block-editor/src/components/link-control/is-url-like.js
+++ b/packages/block-editor/src/components/link-control/is-url-like.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { isURL } from '@wordpress/url';
+import { getProtocol, isValidProtocol, isValidFragment } from '@wordpress/url';
 
 /**
  * Determines whether a given value could be a URL. Note this does not
@@ -15,6 +15,43 @@ import { isURL } from '@wordpress/url';
  * @return {boolean} whether or not the value is potentially a URL.
  */
 export default function isURLLike( val ) {
-	const isInternal = val?.startsWith( '#' );
-	return isURL( val ) || ( val && val.includes( 'www.' ) ) || isInternal;
+	const hasSpaces = val.includes( ' ' );
+
+	if ( hasSpaces ) {
+		return false;
+	}
+
+	const protocol = getProtocol( val );
+	const protocolIsValid = isValidProtocol( protocol );
+
+	const mayBeTLD = hasPossibleTLD( val );
+
+	const isWWW = val?.startsWith( 'www.' );
+
+	const isInternal = val?.startsWith( '#' ) && isValidFragment( val );
+
+	return protocolIsValid || isWWW || isInternal || mayBeTLD;
+}
+
+/**
+ * Checks if a given URL has a valid Top-Level Domain (TLD).
+ *
+ * @param {string} url       - The URL to check.
+ * @param {number} maxLength - The maximum length of the TLD.
+ * @return {boolean} Returns true if the URL has a valid TLD, false otherwise.
+ */
+function hasPossibleTLD( url, maxLength = 6 ) {
+	// Clean the URL by removing anything after the first occurrence of "?" or "#".
+	const cleanedURL = url.split( /[?#]/ )[ 0 ];
+
+	// Regular expression explanation:
+	// - (?<=\S)                  : Positive lookbehind assertion to ensure there is at least one non-whitespace character before the TLD
+	// - \.                       : Matches a literal dot (.)
+	// - [a-zA-Z_]{2,maxLength}   : Matches 2 to maxLength letters or underscores, representing the TLD
+	// - (?:\/|$)                 : Non-capturing group that matches either a forward slash (/) or the end of the string
+	const regex = new RegExp(
+		`(?<=\\S)\\.(?:[a-zA-Z_]{2,${ maxLength }})(?:\\/|$)`
+	);
+
+	return regex.test( cleanedURL );
 }
diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
index 71e3cd464ada14..962228583f43e5 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,11 +10,15 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
-	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
+import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -23,6 +27,20 @@ import { ViewerSlot } from './viewer-slot';
 
 import useRichUrlData from './use-rich-url-data';
 
+/**
+ * Filters the title for display. Removes the protocol and www prefix.
+ *
+ * @param {string} title The title to be filtered.
+ *
+ * @return {string} The filtered title.
+ */
+function filterTitleForDisplay( title ) {
+	// Derived from `filterURLForDisplay` in `@wordpress/url`.
+	return title
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
+}
+
 export default function LinkPreview( {
 	value,
 	onEditClick,
@@ -30,6 +48,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -39,14 +63,19 @@ export default function LinkPreview( {
 	const hasRichData = richData && Object.keys( richData ).length;
 
 	const displayURL =
-		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
+		( value && filterURLForDisplay( safeDecodeURI( value.url ), 24 ) ) ||
 		'';
 
-	const displayTitle = richData?.title || value?.title || displayURL;
-
 	// url can be undefined if the href attribute is unset
 	const isEmptyURL = ! value?.url?.length;
 
+	const displayTitle =
+		! isEmptyURL &&
+		stripHTML( richData?.title || value?.title || displayURL );
+
+	const isUrlRedundant =
+		! value?.url || filterTitleForDisplay( displayTitle ) === displayURL;
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -57,21 +86,38 @@ export default function LinkPreview( {
 		icon = <Icon icon={ globe } />;
 	}
 
+	const { createNotice } = useDispatch( noticesStore );
+	const ref = useCopyToClipboard( value.url, () => {
+		createNotice( 'info', __( 'Link copied to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
+
 	return (
 		<div
-			aria-label={ __( 'Currently selected' ) }
-			className={ classnames( 'block-editor-link-control__search-item', {
+			role="group"
+			aria-label={ __( 'Manage link' ) }
+			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
 				'is-fetching': !! isFetching,
 				'is-preview': true,
 				'is-error': isEmptyURL,
+				'is-url-title': displayTitle === displayURL,
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
-				<span className="block-editor-link-control__search-item-header">
+				<span
+					className="block-editor-link-control__search-item-header"
+					role="figure"
+					aria-label={
+						/* translators: Accessibility text for the link preview when editing a link. */
+						__( 'Link information' )
+					}
+				>
 					<span
-						className={ classnames(
+						className={ clsx(
 							'block-editor-link-control__search-item-icon',
 							{
 								'is-image': richData?.icon,
@@ -87,12 +133,15 @@ export default function LinkPreview( {
 									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
-									{ stripHTML( displayTitle ) }
+									<Truncate numberOfLines={ 1 }>
+										{ displayTitle }
+									</Truncate>
 								</ExternalLink>
-
-								{ value?.url && (
+								{ ! isUrlRedundant && (
 									<span className="block-editor-link-control__search-item-info">
-										{ displayURL }
+										<Truncate numberOfLines={ 1 }>
+											{ displayURL }
+										</Truncate>
 									</span>
 								) }
 							</>
@@ -103,67 +152,33 @@ export default function LinkPreview( {
 						) }
 					</span>
 				</span>
-
 				<Button
 					icon={ edit }
-					label={ __( 'Edit' ) }
-					className="block-editor-link-control__search-item-action"
+					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
-					iconSize={ 24 }
+					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				{ hasUnlinkControl && (
 					<Button
 						icon={ linkOff }
-						label={ __( 'Unlink' ) }
-						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
+						label={ __( 'Remove link' ) }
 						onClick={ onRemove }
-						iconSize={ 24 }
+						size="compact"
+						showTooltip={ ! showIconLabels }
 					/>
 				) }
+				<Button
+					icon={ copySmall }
+					label={ __( 'Copy link' ) }
+					ref={ ref }
+					accessibleWhenDisabled
+					disabled={ isEmptyURL }
+					size="compact"
+					showTooltip={ ! showIconLabels }
+				/>
 				<ViewerSlot fillProps={ value } />
 			</div>
-
-			{ !! (
-				( hasRichData &&
-					( richData?.image || richData?.description ) ) ||
-				isFetching
-			) && (
-				<div className="block-editor-link-control__search-item-bottom">
-					{ ( richData?.image || isFetching ) && (
-						<div
-							aria-hidden={ ! richData?.image }
-							className={ classnames(
-								'block-editor-link-control__search-item-image',
-								{
-									'is-placeholder': ! richData?.image,
-								}
-							) }
-						>
-							{ richData?.image && (
-								<img src={ richData?.image } alt="" />
-							) }
-						</div>
-					) }
-
-					{ ( richData?.description || isFetching ) && (
-						<div
-							aria-hidden={ ! richData?.description }
-							className={ classnames(
-								'block-editor-link-control__search-item-description',
-								{
-									'is-placeholder': ! richData?.description,
-								}
-							) }
-						>
-							{ richData?.description && (
-								<Text truncate numberOfLines="2">
-									{ richData.description }
-								</Text>
-							) }
-						</div>
-					) }
-				</div>
-			) }
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/link-control/search-create-button.js b/packages/block-editor/src/components/link-control/search-create-button.js
index 1786b516df5c02..6a53fd36cf893e 100644
--- a/packages/block-editor/src/components/link-control/search-create-button.js
+++ b/packages/block-editor/src/components/link-control/search-create-button.js
@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { Icon, plus } from '@wordpress/icons';
+import { plus } from '@wordpress/icons';
 
 export const LinkControlSearchCreate = ( {
 	searchTerm,
 	onClick,
 	itemProps,
-	isSelected,
 	buttonText,
 } ) => {
 	if ( ! searchTerm ) {
@@ -40,27 +34,15 @@ export const LinkControlSearchCreate = ( {
 	}
 
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
-			className={ classnames(
-				'block-editor-link-control__search-create block-editor-link-control__search-item',
-				{
-					'is-selected': isSelected,
-				}
-			) }
+			iconPosition="left"
+			icon={ plus }
+			className="block-editor-link-control__search-item"
 			onClick={ onClick }
 		>
-			<Icon
-				className="block-editor-link-control__search-item-icon"
-				icon={ plus }
-			/>
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					{ text }
-				</span>
-			</span>
-		</Button>
+			{ text }
+		</MenuItem>
 	);
 };
 
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index cabe52f907469e..3f109b8a371552 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -1,11 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -46,7 +41,8 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
+			suffix,
 		},
 		ref
 	) => {
@@ -61,7 +57,6 @@ const LinkControlSearchInput = forwardRef(
 			? fetchSuggestions || genericSearchHandler
 			: noopSearchHandler;
 
-		const instanceId = useInstanceId( LinkControlSearchInput );
 		const [ focusedSuggestion, setFocusedSuggestion ] = useState();
 
 		/**
@@ -79,9 +74,7 @@ const LinkControlSearchInput = forwardRef(
 		const handleRenderSuggestions = ( props ) =>
 			renderSuggestions( {
 				...props,
-				instanceId,
 				withCreateSuggestion,
-				currentInputValue: value,
 				createSuggestionButtonText,
 				suggestionsQuery,
 				handleSuggestionClick: ( suggestion ) => {
@@ -120,23 +113,23 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
-		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
-		} );
+		const inputLabel = placeholder ?? __( 'Search or type URL' );
 
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
-					label={ useLabel ? 'URL' : undefined }
-					className={ inputClasses }
+					disableSuggestions={ currentLink?.url === value }
+					label={ inputLabel }
+					hideLabelFromVision={ hideLabelFromVision }
+					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					placeholder={ inputLabel }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}
 					__experimentalFetchLinkSuggestions={ searchHandler }
-					__experimentalHandleURLSuggestions={ true }
+					__experimentalHandleURLSuggestions
 					__experimentalShowInitialSuggestions={
 						showInitialSuggestions
 					}
@@ -154,6 +147,7 @@ const LinkControlSearchInput = forwardRef(
 						}
 					} }
 					ref={ ref }
+					suffix={ suffix }
 				/>
 				{ children }
 			</div>
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
index a1ef09d2fc3612..fa8d1540b3daed 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-import { Button, TextHighlight } from '@wordpress/components';
+import { MenuItem, TextHighlight } from '@wordpress/components';
 import {
 	Icon,
 	globe,
@@ -17,7 +11,12 @@ import {
 	postList,
 	category,
 	file,
+	home,
+	verse,
 } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { safeDecodeURI, filterURLForDisplay, getPath } from '@wordpress/url';
+import { pipe } from '@wordpress/compose';
 
 const ICONS_MAP = {
 	post: postList,
@@ -34,6 +33,14 @@ function SearchItemIcon( { isURL, suggestion } ) {
 		icon = globe;
 	} else if ( suggestion.type in ICONS_MAP ) {
 		icon = ICONS_MAP[ suggestion.type ];
+		if ( suggestion.type === 'page' ) {
+			if ( suggestion.isFrontPage ) {
+				icon = home;
+			}
+			if ( suggestion.isBlogHome ) {
+				icon = verse;
+			}
+		}
 	}
 
 	if ( icon ) {
@@ -48,52 +55,94 @@ function SearchItemIcon( { isURL, suggestion } ) {
 	return null;
 }
 
+/**
+ * Adds a leading slash to a url if it doesn't already have one.
+ * @param {string} url the url to add a leading slash to.
+ * @return {string} the url with a leading slash.
+ */
+function addLeadingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
+
+	return url?.replace( /^\/?/, '/' );
+}
+
+function removeTrailingSlash( url ) {
+	const trimmedURL = url?.trim();
+
+	if ( ! trimmedURL?.length ) {
+		return url;
+	}
+
+	return url?.replace( /\/$/, '' );
+}
+
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
+const defaultTo = ( d ) => ( v ) => {
+	return v === null || v === undefined || v !== v ? d : v;
+};
+
+/**
+ * Prepares a URL for display in the UI.
+ * - decodes the URL.
+ * - filters it (removes protocol, www, etc.).
+ * - truncates it if necessary.
+ * - adds a leading slash.
+ * @param {string} url the url.
+ * @return {string} the processed url to display.
+ */
+function getURLForDisplay( url ) {
+	if ( ! url ) {
+		return url;
+	}
+
+	return pipe(
+		safeDecodeURI,
+		getPath,
+		defaultTo( '' ),
+		partialRight( filterURLForDisplay, 24 ),
+		removeTrailingSlash,
+		addLeadingSlash
+	)( url );
+}
+
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
-	isSelected = false,
+	searchTerm,
 	onClick,
 	isURL = false,
-	searchTerm = '',
 	shouldShowType = false,
 } ) => {
+	const info = isURL
+		? __( 'Press ENTER to add this link' )
+		: getURLForDisplay( suggestion.url );
+
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
+			info={ info }
+			iconPosition="left"
+			icon={
+				<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
+			}
 			onClick={ onClick }
-			className={ classnames( 'block-editor-link-control__search-item', {
-				'is-selected': isSelected,
-				'is-url': isURL,
-				'is-entity': ! isURL,
-			} ) }
+			shortcut={ shouldShowType && getVisualTypeName( suggestion ) }
+			className="block-editor-link-control__search-item"
 		>
-			<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					<TextHighlight
-						text={ suggestion.title }
-						highlight={ searchTerm }
-					/>
-				</span>
-				<span
-					aria-hidden={ ! isURL }
-					className="block-editor-link-control__search-item-info"
-				>
-					{ ! isURL &&
-						( filterURLForDisplay(
-							safeDecodeURI( suggestion.url )
-						) ||
-							'' ) }
-					{ isURL && __( 'Press ENTER to add this link' ) }
-				</span>
-			</span>
-			{ shouldShowType && suggestion.type && (
-				<span className="block-editor-link-control__search-item-type">
-					{ getVisualTypeName( suggestion ) }
-				</span>
-			) }
-		</Button>
+			<TextHighlight
+				// The component expects a plain text string.
+				text={ stripHTML( suggestion.title ) }
+				highlight={ searchTerm }
+			/>
+		</MenuItem>
 	);
 };
 
@@ -102,6 +151,10 @@ function getVisualTypeName( suggestion ) {
 		return 'front page';
 	}
 
+	if ( suggestion.isBlogHome ) {
+		return 'blog home';
+	}
+
 	// Rename 'post_tag' to 'tag'. Ideally, the API would return the localised CPT or taxonomy label.
 	return suggestion.type === 'post_tag' ? 'tag' : suggestion.type;
 }
diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
index 37ef1f72ce3d8b..29558f69291c57 100644
--- a/packages/block-editor/src/components/link-control/search-results.js
+++ b/packages/block-editor/src/components/link-control/search-results.js
@@ -2,13 +2,12 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { createElement, Fragment } from '@wordpress/element';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -18,7 +17,6 @@ import LinkControlSearchItem from './search-item';
 import { CREATE_TYPE, LINK_ENTRY_TYPES } from './constants';
 
 export default function LinkControlSearchResults( {
-	instanceId,
 	withCreateSuggestion,
 	currentInputValue,
 	handleSuggestionClick,
@@ -31,7 +29,7 @@ export default function LinkControlSearchResults( {
 	createSuggestionButtonText,
 	suggestionsQuery,
 } ) {
-	const resultsListClasses = classnames(
+	const resultsListClasses = clsx(
 		'block-editor-link-control__search-results',
 		{
 			'is-loading': isLoading,
@@ -48,93 +46,77 @@ export default function LinkControlSearchResults( {
 	// If the query has a specified type, then we can skip showing them in the result. See #24839.
 	const shouldShowSuggestionsTypes = ! suggestionsQuery?.type;
 
-	// According to guidelines aria-label should be added if the label
-	// itself is not visible.
-	// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
-	const searchResultsLabelId = `block-editor-link-control-search-results-label-${ instanceId }`;
 	const labelText = isInitialSuggestions
-		? __( 'Recently updated' )
+		? __( 'Suggestions' )
 		: sprintf(
 				/* translators: %s: search term. */
 				__( 'Search results for "%s"' ),
 				currentInputValue
 		  );
 
-	// VisuallyHidden rightly doesn't accept custom classNames
-	// so we conditionally render it as a wrapper to visually hide the label
-	// when that is required.
-	const searchResultsLabel = createElement(
-		isInitialSuggestions ? Fragment : VisuallyHidden,
-		{}, // Empty props.
-		<span
-			className="block-editor-link-control__search-results-label"
-			id={ searchResultsLabelId }
-		>
-			{ labelText }
-		</span>
-	);
-
 	return (
 		<div className="block-editor-link-control__search-results-wrapper">
-			{ searchResultsLabel }
 			<div
 				{ ...suggestionsListProps }
 				className={ resultsListClasses }
-				aria-labelledby={ searchResultsLabelId }
+				aria-label={ labelText }
 			>
-				{ suggestions.map( ( suggestion, index ) => {
-					if (
-						shouldShowCreateSuggestion &&
-						CREATE_TYPE === suggestion.type
-					) {
+				<MenuGroup>
+					{ suggestions.map( ( suggestion, index ) => {
+						if (
+							shouldShowCreateSuggestion &&
+							CREATE_TYPE === suggestion.type
+						) {
+							return (
+								<LinkControlSearchCreate
+									searchTerm={ currentInputValue }
+									buttonText={ createSuggestionButtonText }
+									onClick={ () =>
+										handleSuggestionClick( suggestion )
+									}
+									// Intentionally only using `type` here as
+									// the constant is enough to uniquely
+									// identify the single "CREATE" suggestion.
+									key={ suggestion.type }
+									itemProps={ buildSuggestionItemProps(
+										suggestion,
+										index
+									) }
+									isSelected={ index === selectedSuggestion }
+								/>
+							);
+						}
+
+						// If we're not handling "Create" suggestions above then
+						// we don't want them in the main results so exit early.
+						if ( CREATE_TYPE === suggestion.type ) {
+							return null;
+						}
+
 						return (
-							<LinkControlSearchCreate
-								searchTerm={ currentInputValue }
-								buttonText={ createSuggestionButtonText }
-								onClick={ () =>
-									handleSuggestionClick( suggestion )
-								}
-								// Intentionally only using `type` here as
-								// the constant is enough to uniquely
-								// identify the single "CREATE" suggestion.
-								key={ suggestion.type }
+							<LinkControlSearchItem
+								key={ `${ suggestion.id }-${ suggestion.type }` }
 								itemProps={ buildSuggestionItemProps(
 									suggestion,
 									index
 								) }
+								suggestion={ suggestion }
+								index={ index }
+								onClick={ () => {
+									handleSuggestionClick( suggestion );
+								} }
 								isSelected={ index === selectedSuggestion }
+								isURL={ LINK_ENTRY_TYPES.includes(
+									suggestion.type
+								) }
+								searchTerm={ currentInputValue }
+								shouldShowType={ shouldShowSuggestionsTypes }
+								isFrontPage={ suggestion?.isFrontPage }
+								isBlogHome={ suggestion?.isBlogHome }
 							/>
 						);
-					}
-
-					// If we're not handling "Create" suggestions above then
-					// we don't want them in the main results so exit early.
-					if ( CREATE_TYPE === suggestion.type ) {
-						return null;
-					}
-
-					return (
-						<LinkControlSearchItem
-							key={ `${ suggestion.id }-${ suggestion.type }` }
-							itemProps={ buildSuggestionItemProps(
-								suggestion,
-								index
-							) }
-							suggestion={ suggestion }
-							index={ index }
-							onClick={ () => {
-								handleSuggestionClick( suggestion );
-							} }
-							isSelected={ index === selectedSuggestion }
-							isURL={ LINK_ENTRY_TYPES.includes(
-								suggestion.type
-							) }
-							searchTerm={ currentInputValue }
-							shouldShowType={ shouldShowSuggestionsTypes }
-							isFrontPage={ suggestion?.isFrontPage }
-						/>
-					);
-				} ) }
+					} ) }
+				</MenuGroup>
 			</div>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index 4b9d0d7f7419e7..935a50ac99a6f7 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -1,41 +1,64 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import {
+	Button,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
+import { _x, isRTL } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 
-const noop = () => {};
+function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
+	const prefersReducedMotion = useReducedMotion();
+	const MaybeAnimatePresence = prefersReducedMotion
+		? Fragment
+		: AnimatePresence;
+	const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
 
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
-	if ( ! settings || ! settings.length ) {
-		return null;
-	}
+	const id = useInstanceId( LinkSettingsDrawer );
 
-	const handleSettingChange = ( setting ) => ( newValue ) => {
-		onChange( {
-			...value,
-			[ setting.id ]: newValue,
-		} );
-	};
-
-	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-		/>
-	) );
+	const settingsDrawerId = `link-control-settings-drawer-${ id }`;
 
 	return (
-		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
-			</VisuallyHidden>
-			{ theSettings }
-		</fieldset>
+		<>
+			<Button
+				__next40pxDefaultSize
+				className="block-editor-link-control__drawer-toggle"
+				aria-expanded={ settingsOpen }
+				onClick={ () => setSettingsOpen( ! settingsOpen ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
+				aria-controls={ settingsDrawerId }
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
+			<MaybeAnimatePresence>
+				{ settingsOpen && (
+					<MaybeMotionDiv
+						className="block-editor-link-control__drawer"
+						hidden={ ! settingsOpen }
+						id={ settingsDrawerId }
+						initial="collapsed"
+						animate="open"
+						exit="collapsed"
+						variants={ {
+							open: { opacity: 1, height: 'auto' },
+							collapsed: { opacity: 0, height: 0 },
+						} }
+						transition={ {
+							duration: 0.1,
+						} }
+					>
+						<div className="block-editor-link-control__drawer-inner">
+							{ children }
+						</div>
+					</MaybeMotionDiv>
+				) }
+			</MaybeAnimatePresence>
+		</>
 	);
-};
+}
 
-export default LinkControlSettingsDrawer;
+export default LinkSettingsDrawer;
diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
new file mode 100644
index 00000000000000..e63ef926358fe9
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/settings.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
+
+const noop = () => {};
+
+const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
+	if ( ! settings || ! settings.length ) {
+		return null;
+	}
+
+	const handleSettingChange = ( setting ) => ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const theSettings = settings.map( ( setting ) => (
+		<CheckboxControl
+			__nextHasNoMarginBottom
+			className="block-editor-link-control__setting"
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ handleSettingChange( setting ) }
+			checked={ value ? !! value[ setting.id ] : false }
+			help={ setting?.help }
+		/>
+	) );
+
+	return (
+		<fieldset className="block-editor-link-control__settings">
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
+			</VisuallyHidden>
+			{ theSettings }
+		</fieldset>
+	);
+};
+
+export default LinkControlSettings;
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index dadcc2ffc2f1f2..16493e1a5aa7f0 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -1,5 +1,4 @@
 $block-editor-link-control-number-of-actions: 1;
-$preview-image-height: 140px;
 
 @keyframes loadingpulse {
 	0% {
@@ -22,84 +21,69 @@ $preview-image-height: 140px;
 		width: 90vw;
 		max-width: $modal-min-width;
 	}
+
+	.show-icon-labels & {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-05;
+			flex-wrap: wrap;
+
+			.components-button.has-icon {
+				width: auto;
+				padding: $grid-unit-05;
+			}
+		}
+
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
+		}
+	}
 }
 
 // Provides positioning context for reset button. Without this then when an
 // error notice is displayed the input's reset button is incorrectly positioned.
 .block-editor-link-control__search-input-wrapper {
+	margin-bottom: $grid-unit-10;
 	position: relative;
 }
 
 // Provides positioning context for search actions
-.block-editor-link-control__search-input-container {
+.block-editor-link-control__search-input-container,
+.block-editor-link-control__search-input-wrapper {
 	position: relative;
 }
 
-// If the input doesn't have a visible label then
-// we need to expand the input itself to occupy
-// the full available horizontal space.
-.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
-	flex: 1;
-}
-
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
-	// Element wrapping the label and input.
-	> .components-base-control__field {
-		display: flex;
-		align-items: center;
-		margin: 0;
-	}
-
 	.components-base-control__label {
-		margin-right: $grid-unit-20;
-		margin-bottom: 0;
+		color: $gray-900;
 	}
 
-	input[type="text"],
-	// Specificity overide of URLInput defaults.
-	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
-		@include input-control;
-		width: calc(100% - #{$grid-unit-20 * 2});
-		display: block;
-		padding: 11px $grid-unit-20;
-		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
-		margin: 0;
-		position: relative;
-		border: 1px solid $gray-300;
-		border-radius: $radius-block-ui;
-	}
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
-	position: absolute;
-	/*
-	 * Actions must be positioned on top of URLInput, since the input will grow
-	 * when suggestions are rendered.
-	 *
-	 * Compensate for:
-	 *  - Border (1px)
-	 *  - Vertically, for the difference in height between the input (40px) and
-	 *    the icon buttons.
-	 *  - Horizontally, pad to the minimum of: default input padding, or the
-	 *    equivalent of the vertical padding.
-	 */
-	top: 1px + ( ( 40px - $button-size ) * 0.5 );
-	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
-}
-
-.components-button .block-editor-link-control__search-submit .has-icon {
-	margin: -1px;
+	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 }
 
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
-	margin-top: -$grid-unit-20 + 1px;
 
 	&::before,
 	&::after {
@@ -113,7 +97,7 @@ $preview-image-height: 140px;
 	}
 
 	&::before {
-		height: $grid-unit-20*0.5;
+		height: $grid-unit-20 * 0.5;
 		top: 0;
 		bottom: auto;
 	}
@@ -125,15 +109,9 @@ $preview-image-height: 140px;
 	}
 }
 
-.block-editor-link-control__search-results-label {
-	padding: $grid-unit-20 $grid-unit-40 0;
-	display: block;
-	font-weight: 600;
-}
-
 .block-editor-link-control__search-results {
-	margin: 0;
-	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
+	margin-top: -$grid-unit-20;
+	padding: $grid-unit-10;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -143,39 +121,35 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-item {
-	position: relative;
-	display: flex;
-	align-items: flex-start; // when link text is very long it is important this indicator remains visible and thus should be aligned top.
-	font-size: $default-font-size;
-	cursor: pointer;
-	background: $white;
-	width: 100%;
-	border: none;
-	text-align: left;
-	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 2px;
-	height: auto;
 
-	&:hover,
-	&:focus {
-		background-color: $gray-100;
+	&.components-button.components-menu-item__button {
+		height: auto;
+		text-align: left;
+	}
 
-		.block-editor-link-control__search-item-type {
-			background: $white;
+	.components-menu-item__item {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		// Inline block required to preserve white space
+		// between `<mark>` elements and text nodes.
+		display: inline-block;
+		width: 100%;
+
+		mark {
+			font-weight: 600;
+			color: inherit;
+			background-color: transparent;
 		}
 	}
 
-	// The added specificity is needed to override.
-	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+	.components-menu-item__shortcut {
+		color: $gray-700;
+		text-transform: capitalize;
+		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 
-	&.is-selected {
+	&[aria-selected] {
 		background: $gray-100;
-
-		.block-editor-link-control__search-item-type {
-			background: $white;
-		}
 	}
 
 	&.is-current {
@@ -190,8 +164,9 @@ $preview-image-height: 140px;
 	.block-editor-link-control__search-item-header {
 		display: block;
 		flex-direction: row;
-		align-items: flex-start;
+		align-items: center;
 		margin-right: $grid-unit-10;
+		gap: $grid-unit-10;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -200,6 +175,9 @@ $preview-image-height: 140px;
 		overflow-wrap: break-word;
 
 		.block-editor-link-control__search-item-info {
+			color: $gray-700;
+			line-height: 1.1;
+			font-size: $helptext-font-size;
 			word-break: break-all;
 		}
 	}
@@ -213,18 +191,34 @@ $preview-image-height: 140px;
 		align-items: center;
 	}
 
+	&.is-url-title .block-editor-link-control__search-item-title {
+		// To prevent overflow when the title is a URL
+		word-break: break-all;
+	}
+
+	.block-editor-link-control__search-item-details {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: $grid-unit-05;
+	}
+
+	.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+		background-color: $gray-100;
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		border-radius: $radius-small;
+	}
+
 	.block-editor-link-control__search-item-icon {
 		position: relative;
-		top: 0.2em;
-		margin-right: $grid-unit-10;
-		max-height: 24px;
 		flex-shrink: 0;
-		width: 24px;
 		display: flex;
 		justify-content: center;
+		align-items: center;
 
 		img {
-			width: 16px; // favicons often have a source of 32px
+			width: $grid-unit-20; // favicons often have a source of 32px
 		}
 	}
 
@@ -234,27 +228,21 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-
-	.block-editor-link-control__search-item-info,
 	.block-editor-link-control__search-item-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
+		line-height: 1.1;
 
-		.components-external-link__icon {
-			position: absolute;
-			right: 0;
-			margin-top: 0;
+
+		&:focus {
+			box-shadow: none;
 		}
-	}
 
-	.block-editor-link-control__search-item-title {
-		display: block;
-		margin-bottom: 0.2em;
-		font-weight: 500;
-		position: relative;
+		&:focus-visible {
+			@include block-toolbar-button-style__focus();
+			text-decoration: none;
+		}
 
 		mark {
-			font-weight: 700;
+			font-weight: 600;
 			color: inherit;
 			background-color: transparent;
 		}
@@ -263,82 +251,15 @@ $preview-image-height: 140px;
 			font-weight: normal;
 		}
 
-		svg {
-			display: none; // specifically requested to be removed visually as well.
-		}
-	}
-
-	.block-editor-link-control__search-item-info {
-		display: block;
-		color: $gray-700;
-		font-size: 0.9em;
-		line-height: 1.3;
-	}
-
-	.block-editor-link-control__search-item-error-notice {
-		font-style: italic;
-		font-size: 1.1em;
-	}
-
-	.block-editor-link-control__search-item-type {
-		display: block;
-		padding: 3px 6px;
-		margin-left: auto;
-		font-size: 0.9em;
-		background-color: $gray-100;
-		border-radius: 2px;
-		white-space: nowrap; // tags shouldn't go over two lines.
-	}
-
-	.block-editor-link-control__search-item-description {
-		padding-top: 12px;
-		margin: 0;
-
-		&.is-placeholder {
-			margin-top: 12px;
-			padding-top: 0;
-			height: 28px;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-
-			&::before,
-			&::after {
-				display: block;
-				content: "";
-				height: 0.7em;
-				width: 100%;
-				background-color: $gray-100;
-				border-radius: 3px;
-			}
-		}
-
-		.components-text {
-			font-size: 0.9em;
-		}
-	}
-
-	.block-editor-link-control__search-item-image {
-		display: flex;
-		width: 100%;
-		background-color: $gray-100;
-		justify-content: center;
-		height: $preview-image-height; // limit height
-		max-height: $preview-image-height; // limit height
-		overflow: hidden;
-		border-radius: 2px;
-		margin-top: 12px;
-
-		&.is-placeholder {
-			background-color: $gray-100;
-			border-radius: 3px;
-		}
-
-		img {
-			display: block; // remove unwanted space below image
-			max-width: 100%;
-			height: $preview-image-height; // limit height
-			max-height: $preview-image-height; // limit height
+		.components-external-link__icon {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0); // specifically requested to be removed visually as well.
+			border: 0;
 		}
 	}
 }
@@ -347,30 +268,11 @@ $preview-image-height: 140px;
 	display: flex;
 	flex-direction: row;
 	width: 100%; // clip.
+	align-items: center;
 }
 
-.block-editor-link-control__search-item-bottom {
-	transition: opacity 1.5s;
-	width: 100%;
-}
-
-
 .block-editor-link-control__search-item.is-fetching {
 
-	.block-editor-link-control__search-item-description {
-		&::before,
-		&::after {
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
-		}
-
-	}
-
-	.block-editor-link-control__search-item-image {
-		animation: loadingpulse 1s linear infinite;
-		animation-delay: 0.5s; // avoid animating for fast network responses
-	}
-
 	.block-editor-link-control__search-item-icon {
 		svg,
 		img {
@@ -413,7 +315,7 @@ $preview-image-height: 140px;
 	&::before {
 		content: "";
 		position: absolute;
-		top: -#{$block-selected-child-margin*2};
+		top: -#{$block-selected-child-margin * 2};
 		left: 0;
 		display: block;
 		width: 100%;
@@ -432,43 +334,64 @@ $preview-image-height: 140px;
 	}
 }
 
-// Specificity override
-.block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
-	padding: 10px;
-}
-
-.block-editor-link-control__tools {
-	display: flex;
-	align-items: center;
-	border-top: $border-width solid $gray-300;
-	margin: 0;
-	padding: $grid-unit-20;
-}
-
-.block-editor-link-control__unlink {
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
+// Inner div required to avoid padding/margin
+// causing janky animation.
+.block-editor-link-control__drawer-inner {
+	display: flex; // allow for ordering.
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+	position: relative;
 }
 
-.block-editor-link-control__settings {
+.block-editor-link-control__setting {
+	margin-bottom: 0;
 	flex: 1;
-	margin: 0;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
+	.components-base-control__field {
+		display: flex; // don't allow label to wrap under checkbox.
 
-	:last-child {
-		margin-bottom: 0;
+		.components-checkbox-control__label {
+			color: $gray-900;
+		}
+	}
+
+	// Cancel left margin inherited from WP Admin Forms CSS.
+	input {
+		margin-left: 0;
 	}
 
-	.is-alternate & {
-		border-top: $border-width solid $gray-900;
+	.is-preview & {
+		padding: 20px $grid-unit-10 $grid-unit-10 0;
 	}
 }
 
-.block-editor-link-control__setting {
-	margin-bottom: $grid-unit-20;
+.block-editor-link-control__tools {
+	padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
+	margin-top: #{$grid-unit-20 * -1};
 
-	:last-child {
-		margin-bottom: 0;
+	.components-button.block-editor-link-control__drawer-toggle {
+		padding-left: 0;
+		gap: 0;
+
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
+		// Point downwards when open (same as list view expander)
+		&[aria-expanded="true"] svg {
+			visibility: visible;
+			transition: transform 0.1s ease;
+			transform: rotate(90deg);
+			@include reduce-motion("transition");
+		}
+		// Point rightwards when closed (same as list view expander)
+		&[aria-expanded="false"] svg {
+			visibility: visible;
+			transform: rotate(0deg);
+			transition: transform 0.1s ease;
+			@include reduce-motion("transition");
+		}
 	}
 }
 
@@ -479,18 +402,12 @@ $preview-image-height: 140px;
 		position: absolute;
 		left: auto;
 		bottom: auto;
-		/*
-		 * Position spinner to the left of the actions.
-		 *
-		 * Compensate for:
-		 *  - Input padding right ($button-size)
-		 */
 		top: calc(50% - #{$spinner-size} / 2);
-		right: $button-size;
+		right: $grid-unit-50;
 	}
 }
 
-.block-editor-link-control__search-item-action {
-	margin-left: auto; // push to far right hand side
-	flex-shrink: 0;
+.block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
+	top: calc(50% + #{$spinner-size} / 4); // Add top spacing because this input has a visual label.
+	right: $grid-unit-15;
 }
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 e7a65a0743a192..bd97fec4ba0073 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -1,18 +1,21 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import {
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+	within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-
-/**
- * WordPress dependencies
- */
 import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -23,14 +26,6 @@ import {
 	uniqueId,
 } from './fixtures';
 
-// Mock debounce() so that it runs instantly.
-jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 const mockFetchSearchSuggestions = jest.fn();
 
 /**
@@ -56,19 +51,10 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 	useDispatch: () => ( { saveEntityRecords: jest.fn() } ),
 } ) );
 
-jest.useRealTimers();
-
-/**
- * Wait for next tick of event loop. This is required
- * because the `fetchSearchSuggestions` Promise will
- * resolve on the next tick of the event loop (this is
- * inline with the Promise spec). As a result we need to
- * wait on this loop to "tick" before we can expect the UI
- * to have updated.
- */
-function eventLoopTick() {
-	return new Promise( ( resolve ) => setImmediate( resolve ) );
-}
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: jest.fn( () => true ),
+} ) );
 
 beforeEach( () => {
 	// Setup a DOM element as a render target.
@@ -152,9 +138,129 @@ describe( 'Basic rendering', () => {
 		render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
-		expect( searchInput ).toBeInTheDocument();
+		expect( searchInput ).toBeVisible();
+	} );
+
+	it( 'should have aria-owns attribute to follow the ARIA 1.0 pattern', () => {
+		render( <LinkControl /> );
+
+		// Search Input UI.
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		expect( searchInput ).toBeVisible();
+		// Make sure we use the ARIA 1.0 pattern with aria-owns.
+		// See https://github.com/WordPress/gutenberg/issues/47147
+		expect( searchInput ).not.toHaveAttribute( 'aria-controls' );
+		expect( searchInput ).toHaveAttribute( 'aria-owns' );
+	} );
+
+	it( 'should have aria-selected attribute only on the highlighted item', async () => {
+		const user = userEvent.setup();
+
+		let resolver;
+		mockFetchSearchSuggestions.mockImplementation(
+			() =>
+				new Promise( ( resolve ) => {
+					resolver = resolve;
+				} )
+		);
+
+		render( <LinkControl /> );
+
+		// Search Input UI.
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		// Simulate searching for a term.
+		await user.type( searchInput, 'Hello' );
+
+		// Wait for the spinner SVG icon to be rendered.
+		expect( await screen.findByRole( 'presentation' ) ).toBeVisible();
+		// Check the suggestions list is not rendered yet.
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+
+		// Make the search suggestions fetch return a response.
+		resolver( fauxEntitySuggestions );
+
+		const resultsList = await screen.findByRole( 'listbox', {
+			name: 'Search results for "Hello"',
+		} );
+
+		// Check the suggestions list is rendered.
+		expect( resultsList ).toBeVisible();
+		// Check the spinner SVG icon is not rendered any longer.
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+
+		const searchResultElements =
+			within( resultsList ).getAllByRole( 'option' );
+
+		expect( searchResultElements ).toHaveLength(
+			fauxEntitySuggestions.length
+		);
+
+		// Step down into the search results, highlighting the first result item.
+		triggerArrowDown( searchInput );
+
+		const firstSearchSuggestion = searchResultElements[ 0 ];
+		const secondSearchSuggestion = searchResultElements[ 1 ];
+
+		let selectedSearchResultElement = screen.getByRole( 'option', {
+			selected: true,
+		} );
+
+		// We should have highlighted the first item using the keyboard.
+		expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( firstSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+		// Check the aria-selected attribute is omitted on the non-highlighted items.
+		expect( secondSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
+
+		// Step down into the search results, highlighting the second result item.
+		triggerArrowDown( searchInput );
+
+		selectedSearchResultElement = screen.getByRole( 'option', {
+			selected: true,
+		} );
+
+		// We should have highlighted the first item using the keyboard.
+		expect( selectedSearchResultElement ).toEqual( secondSearchSuggestion );
+
+		// Check the aria-selected attribute is omitted on non-highlighted items.
+		expect( firstSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( secondSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+
+		// Step up into the search results, highlighting the first result item.
+		triggerArrowUp( searchInput );
+
+		selectedSearchResultElement = screen.getByRole( 'option', {
+			selected: true,
+		} );
+
+		// We should be back to highlighting the first search result again.
+		expect( selectedSearchResultElement ).toEqual( firstSearchSuggestion );
+
+		// Check the aria-selected attribute is set only on the highlighted item.
+		expect( firstSearchSuggestion ).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+		// Check the aria-selected attribute is omitted on non-highlighted items.
+		expect( secondSearchSuggestion ).not.toHaveAttribute( 'aria-selected' );
 	} );
 
 	it( 'should not render protocol in links', async () => {
@@ -183,7 +289,9 @@ describe( 'Basic rendering', () => {
 		render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, searchTerm );
@@ -196,7 +304,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'URL' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -209,7 +317,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'URL' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 		} );
 
@@ -221,13 +329,13 @@ describe( 'Basic rendering', () => {
 
 			// Click the "Edit" button to trigger into the editing mode.
 			const editButton = screen.queryByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} );
 
 			await user.click( editButton );
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'URL' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 
 			// If passed `forceIsEditingLink` of `false` while editing, should
@@ -240,7 +348,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'URL' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -265,7 +373,9 @@ describe( 'Basic rendering', () => {
 				/>
 			);
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			const isPreviewError = linkPreview.classList.contains( 'is-error' );
 			expect( isPreviewError ).toBe( true );
@@ -279,7 +389,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			const unLinkButton = screen.queryByRole( 'button', {
-				name: 'Unlink',
+				name: 'Remove link',
 			} );
 
 			expect( unLinkButton ).not.toBeInTheDocument();
@@ -288,6 +398,28 @@ describe( 'Basic rendering', () => {
 		it( 'should show "Unlink" button if a onRemove handler is provided', async () => {
 			const user = userEvent.setup();
 			const mockOnRemove = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: 'https://example.com' } }
+					onRemove={ mockOnRemove }
+				/>
+			);
+
+			const unLinkButton = screen.queryByRole( 'button', {
+				name: 'Remove link',
+			} );
+			expect( unLinkButton ).toBeVisible();
+
+			await user.click( unLinkButton );
+
+			expect( mockOnRemove ).toHaveBeenCalled();
+		} );
+
+		it( 'should revert to "editing" mode when onRemove is triggered', async () => {
+			const user = userEvent.setup();
+			const mockOnRemove = jest.fn();
+
 			render(
 				<LinkControl
 					value={ { url: 'https://example.com' } }
@@ -296,13 +428,18 @@ describe( 'Basic rendering', () => {
 			);
 
 			const unLinkButton = screen.queryByRole( 'button', {
-				name: 'Unlink',
+				name: 'Remove link',
 			} );
 			expect( unLinkButton ).toBeVisible();
 
 			await user.click( unLinkButton );
 
 			expect( mockOnRemove ).toHaveBeenCalled();
+
+			// Should revert back to editing mode.
+			expect(
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+			).toBeVisible();
 		} );
 	} );
 } );
@@ -313,117 +450,155 @@ describe( 'Searching for a link', () => {
 		const searchTerm = 'Hello';
 
 		let resolver;
-
-		const fauxRequest = () =>
-			new Promise( ( resolve ) => {
-				resolver = resolve;
-			} );
-
-		mockFetchSearchSuggestions.mockImplementation( fauxRequest );
+		mockFetchSearchSuggestions.mockImplementation(
+			() =>
+				new Promise( ( resolve ) => {
+					resolver = resolve;
+				} )
+		);
 
 		render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, searchTerm );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		expect( await screen.findByRole( 'presentation' ) ).toBeVisible();
+		expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 
-		const searchResultsField = screen.queryByRole( 'listbox' );
+		// make the search suggestions fetch return a response
+		resolver( fauxEntitySuggestions );
 
-		let loadingUI = screen.queryByRole( 'presentation' );
+		expect( await screen.findByRole( 'listbox' ) ).toBeVisible();
+		expect( screen.queryByRole( 'presentation' ) ).not.toBeInTheDocument();
+	} );
 
-		expect( searchResultsField ).not.toBeInTheDocument();
+	it.each( [ 'With spaces', 'Uppercase', 'lowercase' ] )(
+		'should display only search suggestions (and not URL result type) when current input value (e.g. %s) is not URL-like',
+		async ( searchTerm ) => {
+			const user = userEvent.setup();
+			const firstSuggestion = fauxEntitySuggestions[ 0 ];
 
-		expect( loadingUI ).toBeVisible();
+			render( <LinkControl /> );
 
-		act( () => {
-			resolver( fauxEntitySuggestions );
-		} );
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
-		await eventLoopTick();
+			// Simulate searching for a term.
+			await user.type( searchInput, searchTerm );
 
-		loadingUI = screen.queryByRole( 'presentation' );
+			const searchResultElements = within(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).getAllByRole( 'option' );
 
-		expect( loadingUI ).not.toBeInTheDocument();
-	} );
+			expect( searchResultElements ).toHaveLength(
+				fauxEntitySuggestions.length
+			);
 
-	it( 'should display only search suggestions when current input value is not URL-like', async () => {
-		const user = userEvent.setup();
-		const searchTerm = 'Hello world';
-		const firstFauxSuggestion = fauxEntitySuggestions[ 0 ];
+			expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		render( <LinkControl /> );
+			// Check that a search suggestion shows up corresponding to the data.
+			expect( searchResultElements[ 0 ] ).toHaveTextContent(
+				firstSuggestion.title
+			);
+			expect( searchResultElements[ 0 ] ).toHaveTextContent(
+				firstSuggestion.type
+			);
 
-		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			// The fallback URL suggestion should not be shown when input is not URL-like.
+			expect(
+				searchResultElements[ searchResultElements.length - 1 ]
+			).not.toHaveTextContent( 'Press ENTER to add this link' );
+		}
+	);
 
-		// Simulate searching for a term.
-		await user.type( searchInput, searchTerm );
+	it.each( [
+		[ 'https://wordpress.org', 'link' ],
+		[ 'http://wordpress.org', 'link' ],
+		[ 'www.wordpress.org', 'link' ],
+		[ 'wordpress.org', 'link' ],
+		[ 'ftp://wordpress.org', 'link' ],
+		[ 'mailto:hello@wordpress.org', 'mailto' ],
+		[ 'tel:123456789', 'tel' ],
+		[ '#internal', 'internal' ],
+	] )(
+		'should display only URL result when current input value is URL-like (e.g. %s)',
+		async ( searchTerm, type ) => {
+			const user = userEvent.setup();
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+			render( <LinkControl /> );
 
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+			// Search Input UI.
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
-		expect( searchResultElements ).toHaveLength(
-			fauxEntitySuggestions.length
-		);
+			// Simulate searching for a term.
+			await user.type( searchInput, searchTerm );
 
-		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+			const searchResultElement = within(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).getByRole( 'option' );
 
-		// Sanity check that a search suggestion shows up corresponding to the data.
-		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstFauxSuggestion.title
-		);
-		expect( searchResultElements[ 0 ] ).toHaveTextContent(
-			firstFauxSuggestion.type
-		);
+			expect( searchResultElement ).toBeInTheDocument();
 
-		// The fallback URL suggestion should not be shown when input is not URL-like.
-		expect(
-			searchResultElements[ searchResultElements.length - 1 ]
-		).not.toHaveTextContent( 'URL' );
-	} );
+			// Should only be the `URL` suggestion.
+			expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+
+			expect( searchResultElement ).toHaveTextContent( searchTerm );
+			expect( searchResultElement ).toHaveTextContent( type );
+			expect( searchResultElement ).toHaveTextContent(
+				'Press ENTER to add this link'
+			);
+		}
+	);
 
 	it( 'should trim search term', async () => {
 		const user = userEvent.setup();
 		const searchTerm = '   Hello    ';
 
-		const { container } = render( <LinkControl /> );
+		render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, searchTerm );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const searchResultTextHighlightElements = Array.from(
-			container.querySelectorAll(
-				'[role="listbox"] 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 );
 
-		const invalidResults = searchResultTextHighlightElements.find(
-			( mark ) => mark.innerHTML !== 'Hello'
-		);
-
-		// Given we're mocking out the results we should always have 4 mark elements.
-		expect( searchResultTextHighlightElements ).toHaveLength( 4 );
+		expect( searchResultTextHighlightElements ).toHaveLength( 3 );
 
 		// Make sure there are no `mark` elements which contain anything other
 		// than the trimmed search term (ie: no whitespace).
-		expect( invalidResults ).toBeFalsy();
+		expect(
+			searchResultTextHighlightElements.every(
+				( mark ) => mark.innerHTML === 'Hello'
+			)
+		).toBe( true );
 
 		// Implementation detail test to ensure that the fetch handler is called
 		// with the trimmed search value. We do this because we are mocking out
@@ -440,77 +615,66 @@ describe( 'Searching for a link', () => {
 		render( <LinkControl showSuggestions={ false } /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, 'anything' );
 
 		const searchResultsField = screen.queryByRole( 'listbox' );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
 		expect( searchResultsField ).not.toBeInTheDocument();
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
 
-	it.each( [
-		[ 'couldbeurlorentitysearchterm' ],
-		[ 'ThisCouldAlsoBeAValidURL' ],
-	] )(
-		'should display a URL suggestion as a default fallback for the search term "%s" which could potentially be a valid url.',
-		async ( searchTerm ) => {
-			const user = userEvent.setup();
-			render( <LinkControl /> );
-
-			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+	it( 'should not display a URL suggestion when input is not likely to be a URL.', async () => {
+		const searchTerm = 'unlikelytobeaURL';
+		const user = userEvent.setup();
+		render( <LinkControl /> );
 
-			// Simulate searching for a term.
-			await user.type( searchInput, searchTerm );
+		// Search Input UI.
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
+		// Simulate searching for a term.
+		await user.type( searchInput, searchTerm );
 
-			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
-					name: /Search results for.*/,
-				} )
-			).getAllByRole( 'option' );
+		const searchResultElements = within(
+			await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} )
+		).getAllByRole( 'option' );
 
-			const lastSearchResultItem =
-				searchResultElements[ searchResultElements.length - 1 ];
+		const lastSearchResultItem =
+			searchResultElements[ searchResultElements.length - 1 ];
 
-			// We should see a search result for each of the expect search suggestions
-			// plus 1 additional one for the fallback URL suggestion.
-			expect( searchResultElements ).toHaveLength(
-				fauxEntitySuggestions.length + 1
-			);
+		// We should see a search result for each of the expect search suggestions.
+		expect( searchResultElements ).toHaveLength(
+			fauxEntitySuggestions.length
+		);
 
-			// The last item should be a URL search suggestion.
-			expect( lastSearchResultItem ).toHaveTextContent( searchTerm );
-			expect( lastSearchResultItem ).toHaveTextContent( 'URL' );
-			expect( lastSearchResultItem ).toHaveTextContent(
-				'Press ENTER to add this link'
-			);
-		}
-	);
+		// The URL search suggestion should not exist.
+		expect( lastSearchResultItem ).not.toHaveTextContent(
+			'Press ENTER to add this link'
+		);
+	} );
 
 	it( 'should not display a URL suggestion as a default fallback when noURLSuggestion is passed.', async () => {
 		const user = userEvent.setup();
 		render( <LinkControl noURLSuggestion /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, 'couldbeurlorentitysearchterm' );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
@@ -534,23 +698,21 @@ describe( 'Manual link entry', () => {
 			render( <LinkControl /> );
 
 			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			// Simulate searching for a term.
 			await user.type( searchInput, searchTerm );
 
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
-
 			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: /Search results for.*/,
 				} )
 			).getByRole( 'option' );
 
 			expect( searchResultElements ).toBeVisible();
 			expect( searchResultElements ).toHaveTextContent( searchTerm );
-			expect( searchResultElements ).toHaveTextContent( 'URL' );
 			expect( searchResultElements ).toHaveTextContent(
 				'Press ENTER to add this link'
 			);
@@ -573,16 +735,9 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
-				let submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
-				} );
-
-				expect( submitButton ).toBeDisabled();
-				expect( submitButton ).toBeVisible();
-
 				if ( searchString.length ) {
 					// Simulate searching for a term.
 					await user.type( searchInput, searchString );
@@ -591,69 +746,184 @@ describe( 'Manual link entry', () => {
 					await user.clear( searchInput );
 				}
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
-
 				// Attempt to submit the empty search value in the input.
 				await user.keyboard( '[Enter]' );
 
-				submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
-				} );
-
-				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
-				expect( submitButton ).toBeDisabled();
-				expect( submitButton ).toBeVisible();
+				// Verify the UI hasn't allowed submission because
+				// the search input is still visible.
+				expect( searchInput ).toBeVisible();
 			}
 		);
 
 		it.each( testTable )(
-			'should not allow creation of links %s via the UI "submit" button',
+			'should not allow editing of links to a new link %s via the UI "submit" button',
 			async ( _desc, searchString ) => {
 				const user = userEvent.setup();
 
-				render( <LinkControl /> );
+				render(
+					<LinkControl
+						value={ fauxEntitySuggestions[ 0 ] }
+						forceIsEditingLink
+					/>
+				);
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
-				let submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
-				} );
+				// Remove the existing link.
+				await user.clear( searchInput );
 
-				expect( submitButton ).toBeDisabled();
-				expect( submitButton ).toBeVisible();
-
-				// Simulate searching for a term.
 				if ( searchString.length ) {
-					// Simulate searching for a term.
 					await user.type( searchInput, searchString );
 				} else {
 					// Simulate clearing the search term.
 					await user.clear( searchInput );
 				}
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
+				const submitButton = screen.queryByRole( 'button', {
+					name: 'Save',
+				} );
+
+				// Verify the submission UI is disabled.
+				expect( submitButton ).toBeVisible();
+				expect( submitButton ).toHaveAttribute(
+					'aria-disabled',
+					'true'
+				);
 
 				// Attempt to submit the empty search value in the input.
 				await user.click( submitButton );
 
-				submitButton = screen.queryByRole( 'button', {
-					name: 'Submit',
-				} );
-
-				// Verify the UI hasn't allowed submission.
-				expect( searchInput ).toBeInTheDocument();
-				expect( submitButton ).toBeDisabled();
-				expect( submitButton ).toBeVisible();
+				// Verify the UI hasn't allowed submission because
+				// the search input is still visible.
+				expect( searchInput ).toBeVisible();
 			}
 		);
 	} );
 
+	describe( 'Handling cancellation', () => {
+		it( 'should not show cancellation button during link creation', async () => {
+			const mockOnRemove = jest.fn();
+
+			render( <LinkControl onRemove={ mockOnRemove } /> );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			expect( cancelButton ).not.toBeInTheDocument();
+		} );
+
+		it( 'should allow cancellation of the link editing process and reset any entered values', async () => {
+			const user = userEvent.setup();
+			const initialLink = fauxEntitySuggestions[ 0 ];
+
+			const LinkControlConsumer = () => {
+				const [ link, setLink ] = useState( initialLink );
+
+				return (
+					<LinkControl
+						value={ link }
+						onChange={ ( suggestion ) => {
+							setLink( suggestion );
+						} }
+						hasTextControl
+					/>
+				);
+			};
+
+			render( <LinkControlConsumer /> );
+
+			let linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Click the "Edit" button to trigger into the editing mode.
+			let editButton = screen.queryByRole( 'button', {
+				name: 'Edit link',
+			} );
+
+			await user.click( editButton );
+
+			await toggleSettingsDrawer( user );
+
+			let searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			let textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Make a change to the search input.
+			await user.type( searchInput, 'This URL value was changed!' );
+
+			// Make a change to the text input.
+			await user.type( textInput, 'This text value was changed!' );
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			// Cancel the editing process.
+			await user.click( cancelButton );
+
+			linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
+			} );
+
+			expect( linkPreview ).toBeInTheDocument();
+
+			// Re-query the edit button as it's been replaced.
+			editButton = screen.queryByRole( 'button', {
+				name: 'Edit link',
+			} );
+
+			await user.click( editButton );
+
+			await toggleSettingsDrawer( user );
+
+			// Re-query the inputs as they have been replaced.
+			searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			textInput = screen.getByRole( 'textbox', {
+				name: 'Text',
+			} );
+
+			// Expect to see the original link values and **not** the changed values.
+			expect( searchInput ).toHaveValue( initialLink.url );
+			expect( textInput ).toHaveValue( initialLink.text );
+		} );
+
+		it( 'should call onCancel callback when cancelling if provided', async () => {
+			const user = userEvent.setup();
+			const mockOnCancel = jest.fn();
+
+			render(
+				<LinkControl
+					value={ fauxEntitySuggestions[ 0 ] }
+					onCancel={ mockOnCancel }
+					forceIsEditingLink
+				/>
+			);
+
+			const cancelButton = screen.queryByRole( 'button', {
+				name: 'Cancel',
+			} );
+
+			await user.click( cancelButton );
+
+			// Verify the consumer can handle the cancellation.
+			expect( mockOnCancel ).toHaveBeenCalled();
+		} );
+	} );
+
 	describe( 'Alternative link protocols and formats', () => {
 		it.each( [
 			[ 'mailto:example123456@wordpress.org', 'mailto' ],
@@ -667,17 +937,14 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
 				await user.type( searchInput, searchTerm );
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
-
 				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
+					await screen.findByRole( 'listbox', {
 						name: /Search results for.*/,
 					} )
 				).getByRole( 'option' );
@@ -693,26 +960,108 @@ describe( 'Manual link entry', () => {
 	} );
 } );
 
+describe( 'Link submission', () => {
+	it( 'should show a submit button when creating a link', async () => {
+		const user = userEvent.setup();
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( {} );
+
+			return <LinkControl value={ link } onChange={ setLink } />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		const submitButton = screen.getByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		expect( submitButton ).toBeVisible();
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Click the button and check it's not possible to prematurely submit the link.
+		await user.click( submitButton );
+
+		expect( searchInput ).toBeVisible();
+		expect( submitButton ).toBeVisible();
+
+		await user.type( searchInput, 'https://wordpress.org' );
+
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'false' );
+	} );
+
+	it( 'should show a submit button when editing a link', async () => {
+		const user = userEvent.setup();
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( fauxEntitySuggestions[ 0 ] );
+
+			return (
+				<LinkControl
+					forceIsEditingLink
+					value={ link }
+					onChange={ setLink }
+				/>
+			);
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		const createSubmitButton = screen.queryByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		// Check the submit button for "creation" of links is not displayed.
+		expect( createSubmitButton ).not.toBeInTheDocument();
+
+		const editSubmitButton = screen.getByRole( 'button', {
+			name: 'Save',
+		} );
+
+		expect( editSubmitButton ).toBeVisible();
+		expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Click the button and check it's not possible to prematurely submit the link.
+		await user.click( editSubmitButton );
+
+		expect( searchInput ).toBeVisible();
+		expect( editSubmitButton ).toBeVisible();
+
+		await user.type( searchInput, '#appendtolinktext' );
+
+		// As typing triggers the search handler, we need to wait for the
+		// search results to be returned. We can use the presence of the
+		// search results listbox as a proxy for this.
+		expect( await screen.findByRole( 'listbox' ) ).toBeVisible();
+
+		expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' );
+	} );
+} );
+
 describe( 'Default search suggestions', () => {
 	it( 'should display a list of initial search suggestions when there is no search value or suggestions', async () => {
-		const expectedResultsLength = 3; // Set within `LinkControl`.
-
 		render( <LinkControl showInitialSuggestions /> );
 
-		await eventLoopTick();
-
 		expect(
-			screen.queryByRole( 'listbox', {
-				name: 'Recently updated',
+			await screen.findByRole( 'listbox', {
+				name: 'Suggestions',
 			} )
 		).toBeVisible();
 
 		// Verify input has no value has default suggestions should only show
 		// when this does not have a value.
 		// Search Input UI.
-		expect( screen.getByRole( 'combobox', { name: 'URL' } ) ).toHaveValue(
-			''
-		);
+		expect(
+			screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+		).toHaveValue( '' );
 
 		// Ensure only called once as a guard against potential infinite
 		// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -720,56 +1069,42 @@ describe( 'Default search suggestions', () => {
 		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 
 		// Verify the search results already display the initial suggestions.
-		expect( screen.queryAllByRole( 'option' ) ).toHaveLength(
-			expectedResultsLength
-		);
+		// `LinkControl` internally always limits the number of initial suggestions to 3.
+		expect( screen.queryAllByRole( 'option' ) ).toHaveLength( 3 );
 	} );
 
 	it( 'should not display initial suggestions when input value is present', async () => {
 		const user = userEvent.setup();
 
-		// Render with an initial value an ensure that no initial suggestions
-		// are shown.
-		render(
-			<LinkControl
-				showInitialSuggestions
-				value={ fauxEntitySuggestions[ 0 ] }
-			/>
-		);
-
-		await eventLoopTick();
-
-		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
+		// Render with an initial value an ensure that no initial suggestions are shown.
+		const initialValue = fauxEntitySuggestions[ 0 ];
+		render( <LinkControl showInitialSuggestions value={ initialValue } /> );
 
 		// Click the "Edit/Change" button and check initial suggestions are not
 		// shown.
-		const currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		const currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
-			name: 'Edit',
+			name: 'Edit link',
 		} );
-
 		await user.click( currentLinkBtn );
 
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
-		searchInput.focus();
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
-		await eventLoopTick();
+		// Search input is set to the URL value.
+		expect( searchInput ).toHaveValue( initialValue.url );
 
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+		// Ensure no initial suggestions are shown.
+		expect(
+			screen.queryByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
-		).getAllByRole( 'option' );
-
-		// Search input is set to the URL value.
-		expect( searchInput ).toHaveValue( fauxEntitySuggestions[ 0 ].url );
-
-		// It should match any url that's like ?p= and also include a URL option.
-		expect( searchResultElements ).toHaveLength( 5 );
-
-		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
+		).not.toBeInTheDocument();
 
-		expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
+		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should display initial suggestions when input value is manually deleted', async () => {
@@ -778,66 +1113,53 @@ describe( 'Default search suggestions', () => {
 
 		render( <LinkControl showInitialSuggestions /> );
 
-		let searchResultElements;
-		let searchInput;
-
 		// Search Input UI.
-		searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, searchTerm );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
 		expect( searchInput ).toHaveValue( searchTerm );
 
-		searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
-
-		// Delete the text.
-		await userEvent.clear( searchInput );
+		const searchResultsList = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		await eventLoopTick();
+		expect( searchResultsList ).toBeVisible();
 
-		searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: 'Recently updated',
-			} )
-		).getAllByRole( 'option' );
+		expect(
+			within( searchResultsList ).getAllByRole( 'option' )
+		).toHaveLength( 4 );
 
-		searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		// Delete the text.
+		await userEvent.clear( searchInput );
 
 		// Check the input is empty now.
 		expect( searchInput ).toHaveValue( '' );
 
-		expect(
-			screen.queryByRole( 'listbox', {
-				name: 'Recently updated',
-			} )
-		).toBeVisible();
+		const initialResultsList = await screen.findByRole( 'listbox', {
+			name: 'Suggestions',
+		} );
 
-		expect( searchResultElements ).toHaveLength( 3 );
+		expect(
+			within( initialResultsList ).getAllByRole( 'option' )
+		).toHaveLength( 3 );
 	} );
 
 	it( 'should not display initial suggestions when there are no recently updated pages/posts', async () => {
-		const noResults = [];
 		// Force API returning empty results for recently updated Pages.
-		mockFetchSearchSuggestions.mockImplementation( () =>
-			Promise.resolve( noResults )
-		);
+		mockFetchSearchSuggestions.mockImplementation( async () => [] );
 
 		render( <LinkControl showInitialSuggestions /> );
 
-		await eventLoopTick();
-
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
-			name: 'Recently updated',
+			name: 'Suggestions',
 		} );
 
 		expect( searchResultsField ).not.toBeInTheDocument();
@@ -864,19 +1186,15 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		async ( entityNameText ) => {
 			const user = userEvent.setup();
 			let resolver;
-			let resolvedEntity;
-
 			const createSuggestion = ( title ) =>
 				new Promise( ( resolve ) => {
-					resolver = ( arg ) => {
-						resolve( arg );
-					};
-					resolvedEntity = {
-						title,
-						id: 123,
-						url: '/?p=123',
-						type: 'page',
-					};
+					resolver = () =>
+						resolve( {
+							title,
+							id: 123,
+							url: '/?p=123',
+							type: 'page',
+						} );
 				} );
 
 			const LinkControlConsumer = () => {
@@ -896,18 +1214,20 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			render( <LinkControlConsumer /> );
 
 			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			// Simulate searching for a term.
 			await user.type( searchInput, entityNameText );
 
-			await eventLoopTick();
-
-			const searchResultElements = screen.queryAllByRole( 'option' );
+			const searchResults = await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} );
 
-			const createButton = Array.from( searchResultElements ).filter(
-				( result ) => result.innerHTML.includes( 'Create:' )
-			)[ 0 ];
+			const createButton = within( searchResults ).getByRole( 'option', {
+				name: /^Create:/,
+			} );
 
 			expect( createButton ).toBeVisible();
 			expect( createButton ).toHaveTextContent( entityNameText );
@@ -916,12 +1236,11 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			// resolution manually via the `resolver` reference.
 			await user.click( createButton );
 
-			await eventLoopTick();
-
 			// Check for loading indicator.
 			const loadingIndicator = screen.getByText( 'Creating…' );
-			const currentLinkLabel =
-				screen.queryByLabelText( 'Currently selected' );
+			const currentLinkLabel = screen.queryByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLinkLabel ).not.toBeInTheDocument();
 			expect( loadingIndicator ).toBeVisible();
@@ -930,13 +1249,11 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			);
 
 			// Resolve the `createSuggestion` promise.
-			await act( async () => {
-				resolver( resolvedEntity );
-			} );
+			resolver();
 
-			await eventLoopTick();
-
-			const currentLink = screen.getByLabelText( 'Currently selected' );
+			const currentLink = await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} );
 
 			expect( currentLink ).toHaveTextContent( entityNameText );
 			expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -967,28 +1284,26 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, 'Some new page to create' );
 
-		await eventLoopTick();
-
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const createButton = Array.from( searchResultElements ).filter(
-			( result ) => result.innerHTML.includes( 'Create:' )
-		)[ 0 ];
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /^Create:/,
+		} );
 
 		await user.click( createButton );
 
-		await eventLoopTick();
-
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		expect( currentLink ).toHaveTextContent( 'Some new page to create' );
 		expect( currentLink ).toHaveTextContent( '/?p=123' );
@@ -1022,33 +1337,34 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, entityNameText );
 
-		await eventLoopTick();
-
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
-		const createButton = searchResultElements.find( ( result ) =>
-			result.innerHTML.includes( 'Create:' )
-		);
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		// Step down into the search results, highlighting the first result item.
+		// Step down into the search results, selecting the first result item.
 		triggerArrowDown( searchInput );
 
-		await user.click( createButton );
-
-		await user.type( searchInput, '[Enter]' );
+		// Check that the create button is in the results and that it's selected
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /^Create:/,
+			selected: true,
+		} );
+		expect( createButton ).toBeVisible();
 
-		await eventLoopTick();
+		expect( searchInput ).toHaveFocus();
+		triggerEnter( searchInput );
 
 		expect(
-			screen.getByLabelText( 'Currently selected' )
+			await screen.findByRole( 'group', {
+				name: 'Manage link',
+			} )
 		).toHaveTextContent( entityNameText );
 	} );
 
@@ -1068,22 +1384,20 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 		render( <LinkControlConsumer /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, entityNameText );
 
-		await eventLoopTick();
-
-		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
-				name: /Search results for.*/,
-			} )
-		).getAllByRole( 'option' );
+		const searchResults = await screen.findByRole( 'listbox', {
+			name: /Search results for.*/,
+		} );
 
-		const createButton = Array.from( searchResultElements ).filter(
-			( result ) => result.innerHTML.includes( 'Custom suggestion text' )
-		)[ 0 ];
+		const createButton = within( searchResults ).getByRole( 'option', {
+			name: /Custom suggestion text/,
+		} );
 
 		expect( createButton ).toBeVisible();
 	} );
@@ -1094,12 +1408,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			async ( handler ) => {
 				render( <LinkControl createSuggestion={ handler } /> );
 
-				// Await the initial suggestions to be fetched.
-				await eventLoopTick();
-
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
 				const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1110,19 +1421,18 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			}
 		);
 
-		it( 'should not show not show an option to create an entity when input is empty', async () => {
+		it( 'should not show an option to create an entity when input is empty', async () => {
 			render(
 				<LinkControl
-					showInitialSuggestions={ true } // Should show even if we're not showing initial suggestions.
+					showInitialSuggestions // Should show even if we're not showing initial suggestions.
 					createSuggestion={ jest.fn() }
 				/>
 			);
 
-			// Await the initial suggestions to be fetched.
-			await eventLoopTick();
-
 			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			const searchResultsField = screen.queryByRole( 'listbox' );
 
@@ -1145,25 +1455,21 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
 				await user.type( searchInput, inputText );
 
-				await eventLoopTick();
-
-				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
-						name: /Search results for.*/,
-					} )
-				).getAllByRole( 'option' );
-
-				const createButton = Array.from( searchResultElements ).filter(
-					( result ) => result.innerHTML.includes( 'New page' )
-				)[ 0 ];
+				const searchResults = await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} );
 
-				expect( createButton ).toBeFalsy(); // Shouldn't exist!
+				const createButton = within( searchResults ).queryByRole(
+					'option',
+					{ name: /New page/ }
+				);
+				expect( createButton ).not.toBeInTheDocument(); // Shouldn't exist!
 			}
 		);
 	} );
@@ -1183,27 +1489,26 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			render( <LinkControl createSuggestion={ createSuggestion } /> );
 
 			// Search Input UI.
-			searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			// Simulate searching for a term.
 			await user.type( searchInput, searchText );
 
-			await eventLoopTick();
+			const searchResults = await screen.findByRole( 'listbox', {
+				name: /Search results for.*/,
+			} );
 
-			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
-					name: /Search results for.*/,
-				} )
-			).getAllByRole( 'option' );
-			const createButton = Array.from( searchResultElements ).filter(
-				( result ) => result.innerHTML.includes( 'Create:' )
-			)[ 0 ];
+			const createButton = within( searchResults ).getByRole( 'option', {
+				name: /^Create:/,
+			} );
 
 			await user.click( createButton );
 
-			await eventLoopTick();
-
-			searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			const errorNotice = screen.getAllByText(
 				'API response returned invalid entity.'
@@ -1214,6 +1519,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'
 			);
@@ -1237,14 +1543,16 @@ describe( 'Selecting links', () => {
 
 		render( <LinkControlConsumer /> );
 
-		const currentLink = screen.getByLabelText( 'Currently selected' );
+		const currentLink = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkAnchor = screen.getByRole( 'link', {
 			name: `${ selectedLink.title } (opens in a new tab)`,
 		} );
 
 		expect( currentLink ).toBeVisible();
 		expect(
-			screen.queryByRole( 'button', { name: 'Edit' } )
+			screen.queryByRole( 'button', { name: 'Edit link' } )
 		).toBeVisible();
 		expect( currentLinkAnchor ).toBeVisible();
 	} );
@@ -1267,16 +1575,22 @@ describe( 'Selecting links', () => {
 		render( <LinkControlConsumer /> );
 
 		// Required in order to select the button below.
-		let currentLinkUI = screen.getByLabelText( 'Currently selected' );
+		let currentLinkUI = screen.getByRole( 'group', {
+			name: 'Manage link',
+		} );
 		const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
-			name: 'Edit',
+			name: 'Edit link',
 		} );
 
 		// Simulate searching for a term.
 		await user.click( currentLinkBtn );
 
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
-		currentLinkUI = screen.queryByLabelText( 'Currently selected' );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+		currentLinkUI = screen.queryByRole( 'group', {
+			name: 'Manage link',
+		} );
 
 		// We should be back to showing the search input.
 		expect( searchInput ).toBeVisible();
@@ -1316,17 +1630,14 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
 				await user.type( searchInput, searchTerm );
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
-
 				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
+					await screen.findByRole( 'listbox', {
 						name: /Search results for.*/,
 					} )
 				).getAllByRole( 'option' );
@@ -1342,7 +1653,7 @@ describe( 'Selecting links', () => {
 
 				// Check that this suggestion is now shown as selected.
 				expect(
-					screen.getByRole( 'button', { name: 'Edit' } )
+					screen.getByRole( 'button', { name: 'Edit link' } )
 				).toBeVisible();
 				expect( currentLinkAnchor ).toBeVisible();
 			}
@@ -1381,23 +1692,21 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'URL',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
 				await user.type( searchInput, searchTerm );
 
-				// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-				await eventLoopTick();
+				const searchResults = await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} );
 
 				// Step down into the search results, highlighting the first result item.
 				triggerArrowDown( searchInput );
 
-				const searchResultElements = within(
-					screen.getByRole( 'listbox', {
-						name: /Search results for.*/,
-					} )
-				).getAllByRole( 'option' );
+				const searchResultElements =
+					within( searchResults ).getAllByRole( 'option' );
 
 				const firstSearchSuggestion = searchResultElements[ 0 ];
 				const secondSearchSuggestion = searchResultElements[ 1 ];
@@ -1407,7 +1716,7 @@ describe( 'Selecting links', () => {
 				} );
 
 				// We should have highlighted the first item using the keyboard.
-				expect( selectedSearchResultElement ).toEqual(
+				expect( selectedSearchResultElement ).toBe(
 					firstSearchSuggestion
 				);
 
@@ -1422,7 +1731,7 @@ describe( 'Selecting links', () => {
 
 					// We should have highlighted the first item using the keyboard
 					// eslint-disable-next-line jest/no-conditional-expect
-					expect( selectedSearchResultElement ).toEqual(
+					expect( selectedSearchResultElement ).toBe(
 						secondSearchSuggestion
 					);
 
@@ -1435,7 +1744,7 @@ describe( 'Selecting links', () => {
 
 					// We should be back to highlighting the first search result again
 					// eslint-disable-next-line jest/no-conditional-expect
-					expect( selectedSearchResultElement ).toEqual(
+					expect( selectedSearchResultElement ).toBe(
 						firstSearchSuggestion
 					);
 				}
@@ -1444,18 +1753,20 @@ describe( 'Selecting links', () => {
 				triggerEnter( searchInput );
 
 				// Check that the suggestion selected via is now shown as selected.
-				const currentLink =
-					screen.getByLabelText( 'Currently selected' );
+				const currentLink = screen.getByRole( 'group', {
+					name: 'Manage link',
+				} );
 				const currentLinkAnchor = screen.getByRole( 'link', {
 					name: `${ selectedLink.title } (opens in a new tab)`,
 				} );
 
 				// 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(
-					screen.getByRole( 'button', { name: 'Edit' } )
+					screen.getByRole( 'button', { name: 'Edit link' } )
 				).toBeVisible();
 				expect( currentLinkAnchor ).toBeVisible();
 			}
@@ -1464,25 +1775,23 @@ describe( 'Selecting links', () => {
 		it( 'should allow selection of initial search results via the keyboard', async () => {
 			render( <LinkControl showInitialSuggestions /> );
 
-			await eventLoopTick();
-
 			expect(
-				screen.queryByRole( 'listbox', {
-					name: 'Recently updated',
+				await screen.findByRole( 'listbox', {
+					name: 'Suggestions',
 				} )
 			).toBeVisible();
 
 			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			// Step down into the search results, highlighting the first result item.
 			triggerArrowDown( searchInput );
 
-			await eventLoopTick();
-
 			const searchResultElements = within(
 				screen.getByRole( 'listbox', {
-					name: 'Recently updated',
+					name: 'Suggestions',
 				} )
 			).getAllByRole( 'option' );
 
@@ -1524,13 +1833,48 @@ describe( 'Selecting links', () => {
 
 			expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
 		} );
+
+		it( 'should not show search results on URL input focus when the URL has not changed', async () => {
+			const selectedLink = fauxEntitySuggestions[ 0 ];
+
+			render( <LinkControl value={ selectedLink } forceIsEditingLink /> );
+
+			// focus the search input
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			fireEvent.focus( searchInput );
+
+			// check that the search results are not visible
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).not.toBeInTheDocument();
+
+			// check that the mock fetch function was not called
+			expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
+
+			// check that typing in the search input to make the value dirty
+			// does trigger search results
+			fireEvent.change( searchInput, { target: { value: 'changes' } } );
+
+			expect(
+				await screen.findByRole( 'listbox', {
+					name: /Search results for.*/,
+				} )
+			).toBeVisible();
+
+			// check the mock fetch function was called
+			expect( mockFetchSearchSuggestions ).toHaveBeenCalledTimes( 1 );
+		} );
 	} );
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
+	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
-		const expectedSettingText = 'Open in new tab';
 
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
@@ -1540,6 +1884,62 @@ describe( 'Addition Settings UI', () => {
 
 		render( <LinkControlConsumer /> );
 
+		const settingsToggle = getSettingsDrawerToggle();
+
+		expect( settingsToggle ).not.toBeInTheDocument();
+	} );
+
+	it( 'should provides a means to toggle the advanced link settings when editing a link', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } forceIsEditingLink />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const user = userEvent.setup();
+
+		const settingsToggle = getSettingsDrawerToggle();
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		expect( settingsToggle ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		const newTabSettingInput = screen.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+
+		expect( newTabSettingInput ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+		expect( newTabSettingInput ).not.toBeVisible();
+	} );
+
+	it( 'should display "New Tab" setting (in "off" mode) by default when a link is edited', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+		const expectedSettingText = 'Open in new tab';
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } forceIsEditingLink />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		const newTabSettingLabel = screen.getByText( expectedSettingText );
 		expect( newTabSettingLabel ).toBeVisible();
 
@@ -1556,7 +1956,7 @@ describe( 'Addition Settings UI', () => {
 
 		const customSettings = [
 			{
-				id: 'newTab',
+				id: 'opensInNewTab',
 				title: 'Open in new tab',
 			},
 			{
@@ -1572,12 +1972,17 @@ describe( 'Addition Settings UI', () => {
 				<LinkControl
 					value={ { ...link, newTab: false, noFollow: true } }
 					settings={ customSettings }
+					forceIsEditingLink
 				/>
 			);
 		};
 
 		render( <LinkControlConsumer /> );
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect( screen.queryAllByRole( 'checkbox' ) ).toHaveLength( 2 );
 
 		expect(
@@ -1591,6 +1996,63 @@ describe( 'Addition Settings UI', () => {
 			} )
 		).toBeChecked();
 	} );
+
+	it( 'should require settings changes to be submitted/applied', async () => {
+		const user = userEvent.setup();
+
+		const mockOnChange = jest.fn();
+
+		const selectedLink = {
+			...fauxEntitySuggestions[ 0 ],
+			// Including a setting here helps to assert on a potential bug
+			// whereby settings on the suggestion override the current (internal)
+			// settings values set by the user in the UI.
+			opensInNewTab: false,
+		};
+
+		render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// check that the "Apply" button is disabled by default.
+		const submitButton = screen.queryByRole( 'button', {
+			name: 'Save',
+		} );
+
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await toggleSettingsDrawer( user );
+
+		const opensInNewTabToggle = screen.queryByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+
+		// toggle the checkbox
+		await user.click( opensInNewTabToggle );
+
+		// Check settings are **not** directly submitted
+		// which would trigger the onChange handler.
+		expect( mockOnChange ).not.toHaveBeenCalled();
+
+		// Check Apply button is now enabled because changes
+		// have been detected.
+		expect( submitButton ).toBeEnabled();
+
+		// Submit the changed setting value using the Apply button
+		await user.click( submitButton );
+
+		// Assert the value is updated.
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				opensInNewTab: true,
+			} )
+		);
+	} );
 } );
 
 describe( 'Post types', () => {
@@ -1601,16 +2063,15 @@ describe( 'Post types', () => {
 		render( <LinkControl /> );
 
 		// Search Input UI.
-		const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+		const searchInput = screen.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
 
 		// Simulate searching for a term.
 		await user.type( searchInput, searchTerm );
 
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-		await eventLoopTick();
-
 		const searchResultElements = within(
-			screen.getByRole( 'listbox', {
+			await screen.findByRole( 'listbox', {
 				name: /Search results for.*/,
 			} )
 		).getAllByRole( 'option' );
@@ -1631,16 +2092,15 @@ describe( 'Post types', () => {
 			render( <LinkControl suggestionsQuery={ { type: postType } } /> );
 
 			// Search Input UI.
-			const searchInput = screen.getByRole( 'combobox', { name: 'URL' } );
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
 
 			// Simulate searching for a term.
 			await user.type( searchInput, searchTerm );
 
-			// fetchFauxEntitySuggestions resolves on next "tick" of event loop.
-			await eventLoopTick();
-
 			const searchResultElements = within(
-				screen.getByRole( 'listbox', {
+				await screen.findByRole( 'listbox', {
 					name: /Search results for.*/,
 				} )
 			).getAllByRole( 'option' );
@@ -1660,7 +2120,7 @@ describe( 'Post types', () => {
 describe( 'Rich link previews', () => {
 	const selectedLink = {
 		id: '1',
-		title: 'Wordpress.org', // Customize this for differentiation in assertions.
+		title: 'WordPress.org', // Customize this for differentiation in assertions.
 		url: 'https://www.wordpress.org',
 		type: 'URL',
 	};
@@ -1688,13 +2148,10 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
 		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
 
 		expect( mockFetchRichUrlData ).not.toHaveBeenCalled();
@@ -1714,16 +2171,11 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-
-		expect( isRichLinkPreview ).toBe( true );
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 	} );
 
 	it( 'should not display placeholders for the image and description if neither is available in the data', async () => {
@@ -1738,19 +2190,20 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
+		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'
 		);
@@ -1771,19 +2224,16 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-		expect( isRichLinkPreview ).toBe( true );
+		await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
 
 		const titlePreview = screen.getByText( selectedLink.title );
 
-		expect( titlePreview ).toHaveClass(
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( titlePreview.parentElement.parentElement ).toHaveClass(
 			'block-editor-link-control__search-item-title'
 		);
 	} );
@@ -1800,21 +2250,20 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-		expect( isRichLinkPreview ).toBe( true );
+		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();
@@ -1838,17 +2287,15 @@ describe( 'Rich link previews', () => {
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			// mockFetchRichUrlData resolves on next "tick" of event loop.
-			await act( async () => {
-				await eventLoopTick();
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
 			} );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-			const isRichLinkPreview =
-				linkPreview.classList.contains( 'is-rich' );
-			expect( isRichLinkPreview ).toBe( true );
+			await waitFor( () =>
+				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 }`
 			);
@@ -1863,23 +2310,21 @@ describe( 'Rich link previews', () => {
 	] )(
 		'should not display a rich preview when data is %s',
 		async ( _descriptor, data ) => {
-			mockFetchRichUrlData.mockImplementation( () =>
-				Promise.resolve( data )
-			);
+			mockFetchRichUrlData.mockImplementation( async () => data );
 
 			render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-			// mockFetchRichUrlData resolves on next "tick" of event loop.
-			await act( async () => {
-				await eventLoopTick();
+			const linkPreview = screen.getByRole( 'group', {
+				name: 'Manage link',
 			} );
 
-			const linkPreview = screen.getByLabelText( 'Currently selected' );
+			expect( linkPreview ).toHaveClass( 'is-fetching' );
 
-			const isRichLinkPreview =
-				linkPreview.classList.contains( 'is-rich' );
+			await waitFor( () =>
+				expect( linkPreview ).not.toHaveClass( 'is-fetching' )
+			);
 
-			expect( isRichLinkPreview ).toBe( false );
+			expect( linkPreview ).not.toHaveClass( 'is-rich' );
 		}
 	);
 
@@ -1890,19 +2335,12 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-		const isFetchingRichPreview =
-			linkPreview.classList.contains( 'is-fetching' );
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
-
-		expect( isFetchingRichPreview ).toBe( true );
-		expect( isRichLinkPreview ).toBe( false );
+		expect( linkPreview ).toHaveClass( 'is-fetching' );
+		expect( linkPreview ).not.toHaveClass( 'is-rich' );
 	} );
 
 	it( 'should remove fetching UI indicators and fallback to standard preview if request for rich preview results in an error', async () => {
@@ -1912,20 +2350,17 @@ describe( 'Rich link previews', () => {
 
 		render( <LinkControl value={ selectedLink } hasRichPreviews /> );
 
-		// mockFetchRichUrlData resolves on next "tick" of event loop.
-		await act( async () => {
-			await eventLoopTick();
+		const linkPreview = screen.getByRole( 'group', {
+			name: 'Manage link',
 		} );
 
-		const linkPreview = screen.getByLabelText( 'Currently selected' );
-
-		const isFetchingRichPreview =
-			linkPreview.classList.contains( 'is-fetching' );
+		expect( linkPreview ).toHaveClass( 'is-fetching' );
 
-		const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );
+		await waitFor( () =>
+			expect( linkPreview ).not.toHaveClass( 'is-fetching' )
+		);
 
-		expect( isFetchingRichPreview ).toBe( false );
-		expect( isRichLinkPreview ).toBe( false );
+		expect( linkPreview ).not.toHaveClass( 'is-rich' );
 	} );
 
 	afterAll( () => {
@@ -1976,6 +2411,10 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect(
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).toBeVisible();
@@ -2002,6 +2441,10 @@ describe( 'Controlling link title text', () => {
 				/>
 			);
 
+			const user = userEvent.setup();
+
+			await toggleSettingsDrawer( user );
+
 			const textInput = screen.queryByRole( 'textbox', {
 				name: 'Text',
 			} );
@@ -2024,6 +2467,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		await user.clear( textInput );
@@ -2032,7 +2477,7 @@ describe( 'Controlling link title text', () => {
 		expect( textInput ).toHaveValue( textValue );
 
 		const submitButton = screen.queryByRole( 'button', {
-			name: 'Submit',
+			name: 'Save',
 		} );
 
 		await user.click( submitButton );
@@ -2046,7 +2491,7 @@ describe( 'Controlling link title text', () => {
 
 	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
 		const user = userEvent.setup();
-		const textValue = 'My new text value';
+		const newTextValue = 'My new text value';
 		const mockOnChange = jest.fn();
 
 		render(
@@ -2058,19 +2503,21 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		expect( textInput ).toBeVisible();
 
 		await user.clear( textInput );
-		await user.keyboard( textValue );
+		await user.keyboard( newTextValue );
 
 		// Attempt to submit the empty search value in the input.
 		triggerEnter( textInput );
 
 		expect( mockOnChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
-				title: textValue,
+				title: newTextValue,
 				url: selectedLink.url,
 			} )
 		);
@@ -2080,4 +2527,58 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state upon controlled value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
+
+function getSettingsDrawerToggle() {
+	return screen.queryByRole( 'button', {
+		name: 'Advanced',
+	} );
+}
+
+async function toggleSettingsDrawer( user ) {
+	const settingsToggle = getSettingsDrawerToggle();
+
+	await user.click( settingsToggle );
+}
diff --git a/packages/block-editor/src/components/link-control/test/is-url-like.js b/packages/block-editor/src/components/link-control/test/is-url-like.js
new file mode 100644
index 00000000000000..37bec089931931
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/test/is-url-like.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import isURLLike from '../is-url-like';
+
+describe( 'isURLLike', () => {
+	it.each( [ 'https://wordpress.org', 'http://wordpress.org' ] )(
+		'returns true for a string that starts with an http(s) protocol',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it.each( [
+		'hello world',
+		'https://   has spaces even though starts with protocol',
+		'www. wordpress . org',
+	] )(
+		'returns false for any string with spaces (e.g. "%s")',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( false );
+		}
+	);
+
+	it( 'returns false for a string without a protocol or a TLD', () => {
+		expect( isURLLike( 'somedirectentryhere' ) ).toBe( false );
+	} );
+
+	it( 'returns true for a string beginning with www.', () => {
+		expect( isURLLike( 'www.wordpress.org' ) ).toBe( true );
+	} );
+
+	it.each( [ 'mailto:test@wordpress.org', 'tel:123456' ] )(
+		'returns true for common protocols',
+		( testString ) => {
+			expect( isURLLike( testString ) ).toBe( true );
+		}
+	);
+
+	it( 'returns true for internal anchor ("hash") links.', () => {
+		expect( isURLLike( '#someinternallink' ) ).toBe( true );
+	} );
+
+	// use .each to test multiple cases
+	it.each( [
+		[ true, 'http://example.com' ],
+		[ true, 'https://test.co.uk?query=param' ],
+		[ true, 'ftp://openai.ai?param=value#section' ],
+		[ true, 'example.com' ],
+		[ true, 'http://example.com?query=param#section' ],
+		[ true, 'https://test.co.uk/some/path' ],
+		[ true, 'ftp://openai.ai/some/path' ],
+		[ true, 'example.org/some/path' ],
+		[ true, 'example_test.tld' ],
+		[ true, 'example_test.com' ],
+		[ false, 'example' ],
+		[ false, '.com' ],
+		[ true, '_test.com' ],
+		[ true, 'http://example_test.com' ],
+	] )(
+		'returns %s when testing against string "%s" for a valid TLD',
+		( expected, testString ) => {
+			expect( isURLLike( testString ) ).toBe( expected );
+		}
+	);
+} );
diff --git a/packages/block-editor/src/components/link-control/use-internal-input-value.js b/packages/block-editor/src/components/link-control/use-internal-input-value.js
deleted file mode 100644
index c69c8d06bcb2f5..00000000000000
--- a/packages/block-editor/src/components/link-control/use-internal-input-value.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-export default function useInternalInputValue( value ) {
-	const [ internalInputValue, setInternalInputValue ] = useState(
-		value || ''
-	);
-
-	useEffect( () => {
-		/**
-		 * If the value's `text` property changes then sync this
-		 * back up with state.
-		 */
-		if ( value?.title && value.title !== internalInputValue ) {
-			setInternalInputValue( value.title );
-		}
-	}, [ value ] );
-
-	return [ internalInputValue, setInternalInputValue ];
-}
diff --git a/packages/block-editor/src/components/link-control/use-internal-value.js b/packages/block-editor/src/components/link-control/use-internal-value.js
new file mode 100644
index 00000000000000..9df557be1460cf
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/use-internal-value.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal';
+
+export default function useInternalValue( value ) {
+	const [ internalValue, setInternalValue ] = useState( value || {} );
+	const [ previousValue, setPreviousValue ] = useState( value );
+
+	// If the value prop changes, update the internal state.
+	// See:
+	// - https://github.com/WordPress/gutenberg/pull/51387#issuecomment-1722927384.
+	// - https://react.dev/reference/react/useState#storing-information-from-previous-renders.
+	if ( ! fastDeepEqual( value, previousValue ) ) {
+		setPreviousValue( value );
+		setInternalValue( value );
+	}
+
+	const setInternalURLInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			url: nextValue,
+		} );
+	};
+
+	const setInternalTextInputValue = ( nextValue ) => {
+		setInternalValue( {
+			...internalValue,
+			title: nextValue,
+		} );
+	};
+
+	const createSetInternalSettingValueHandler =
+		( settingsKeys ) => ( nextValue ) => {
+			// Only apply settings values which are defined in the settings prop.
+			const settingsUpdates = Object.keys( nextValue ).reduce(
+				( acc, key ) => {
+					if ( settingsKeys.includes( key ) ) {
+						acc[ key ] = nextValue[ key ];
+					}
+					return acc;
+				},
+				{}
+			);
+
+			setInternalValue( {
+				...internalValue,
+				...settingsUpdates,
+			} );
+		};
+
+	return [
+		internalValue,
+		setInternalValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	];
+}
diff --git a/packages/block-editor/src/components/link-control/use-search-handler.js b/packages/block-editor/src/components/link-control/use-search-handler.js
index 47c20ed60b8e32..455d228be1974b 100644
--- a/packages/block-editor/src/components/link-control/use-search-handler.js
+++ b/packages/block-editor/src/components/link-control/use-search-handler.js
@@ -51,46 +51,27 @@ const handleEntitySearch = async (
 	val,
 	suggestionsQuery,
 	fetchSearchSuggestions,
-	directEntryHandler,
 	withCreateSuggestion,
-	withURLSuggestion,
-	pageOnFront
+	pageOnFront,
+	pageForPosts
 ) => {
 	const { isInitialSuggestions } = suggestionsQuery;
-	let resultsIncludeFrontPage = false;
 
-	let results = await Promise.all( [
-		fetchSearchSuggestions( val, suggestionsQuery ),
-		directEntryHandler( val ),
-	] );
+	const results = await fetchSearchSuggestions( val, suggestionsQuery );
 
 	// Identify front page and update type to match.
-	results[ 0 ] = results[ 0 ].map( ( result ) => {
+	results.map( ( result ) => {
 		if ( Number( result.id ) === pageOnFront ) {
-			resultsIncludeFrontPage = true;
 			result.isFrontPage = true;
 			return result;
+		} else if ( Number( result.id ) === pageForPosts ) {
+			result.isBlogHome = true;
+			return result;
 		}
 
 		return result;
 	} );
 
-	const couldBeURL = ! val.includes( ' ' );
-
-	// If it's potentially a URL search then concat on a URL search suggestion
-	// just for good measure. That way once the actual results run out we always
-	// have a URL option to fallback on.
-	if (
-		! resultsIncludeFrontPage &&
-		couldBeURL &&
-		withURLSuggestion &&
-		! isInitialSuggestions
-	) {
-		results = results[ 0 ].concat( results[ 1 ] );
-	} else {
-		results = results[ 0 ];
-	}
-
 	// If displaying initial suggestions just return plain results.
 	if ( isInitialSuggestions ) {
 		return results;
@@ -125,18 +106,21 @@ const handleEntitySearch = async (
 export default function useSearchHandler(
 	suggestionsQuery,
 	allowDirectEntry,
-	withCreateSuggestion,
-	withURLSuggestion
+	withCreateSuggestion
 ) {
-	const { fetchSearchSuggestions, pageOnFront } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-
-		return {
-			pageOnFront: getSettings().pageOnFront,
-			fetchSearchSuggestions:
-				getSettings().__experimentalFetchLinkSuggestions,
-		};
-	}, [] );
+	const { fetchSearchSuggestions, pageOnFront, pageForPosts } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+
+			return {
+				pageOnFront: getSettings().pageOnFront,
+				pageForPosts: getSettings().pageForPosts,
+				fetchSearchSuggestions:
+					getSettings().__experimentalFetchLinkSuggestions,
+			};
+		},
+		[]
+	);
 
 	const directEntryHandler = allowDirectEntry
 		? handleDirectEntry
@@ -150,12 +134,18 @@ export default function useSearchHandler(
 						val,
 						{ ...suggestionsQuery, isInitialSuggestions },
 						fetchSearchSuggestions,
-						directEntryHandler,
 						withCreateSuggestion,
-						withURLSuggestion,
-						pageOnFront
+						pageOnFront,
+						pageForPosts
 				  );
 		},
-		[ directEntryHandler, fetchSearchSuggestions, withCreateSuggestion ]
+		[
+			directEntryHandler,
+			fetchSearchSuggestions,
+			pageOnFront,
+			pageForPosts,
+			suggestionsQuery,
+			withCreateSuggestion,
+		]
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/README.md b/packages/block-editor/src/components/list-view/README.md
index 25fb7b61ac6c0e..0db077c6412494 100644
--- a/packages/block-editor/src/components/list-view/README.md
+++ b/packages/block-editor/src/components/list-view/README.md
@@ -2,6 +2,8 @@
 
 The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
 
+By providing the `rootClientId` prop you can restrict the blocks that are shown to only children of the block with that client id.
+
 Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below.
 
 In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree. Multiple blocks at the same level of nesting can be selected by holding down the `SHIFT` key and clicking blocks within the list.
@@ -9,11 +11,6 @@ In addition to presenting the structure of the blocks in the editor, the ListVie
 ![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png)
 ![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js
new file mode 100644
index 00000000000000..8cd515499b1a61
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/appender.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
+import { forwardRef, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useListViewContext } from './context';
+import Inserter from '../inserter';
+import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
+
+export const Appender = forwardRef(
+	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
+		const { insertedBlock, setInsertedBlock } = useListViewContext();
+
+		const instanceId = useInstanceId( Appender );
+		const hideInserter = useSelect(
+			( select ) => {
+				const { getTemplateLock, isZoomOut } = unlock(
+					select( blockEditorStore )
+				);
+
+				return !! getTemplateLock( clientId ) || isZoomOut();
+			},
+			[ clientId ]
+		);
+
+		const blockTitle = useBlockDisplayTitle( {
+			clientId,
+			context: 'list-view',
+		} );
+
+		const insertedBlockTitle = useBlockDisplayTitle( {
+			clientId: insertedBlock?.clientId,
+			context: 'list-view',
+		} );
+
+		useEffect( () => {
+			if ( ! insertedBlockTitle?.length ) {
+				return;
+			}
+
+			speak(
+				sprintf(
+					// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
+					__( '%s block inserted' ),
+					insertedBlockTitle
+				),
+				'assertive'
+			);
+		}, [ insertedBlockTitle ] );
+
+		if ( hideInserter ) {
+			return null;
+		}
+
+		const descriptionId = `list-view-appender__${ instanceId }`;
+		const description = sprintf(
+			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
+			__( 'Append to %1$s block at position %2$d, Level %3$d' ),
+			blockTitle,
+			blockCount + 1,
+			nestingLevel
+		);
+
+		return (
+			<div className="list-view-appender">
+				<Inserter
+					ref={ ref }
+					rootClientId={ clientId }
+					position="bottom right"
+					isAppender
+					selectBlockOnInsert={ false }
+					shouldDirectInsert={ false }
+					__experimentalIsQuick
+					{ ...props }
+					toggleProps={ { 'aria-describedby': descriptionId } }
+					onSelectOrClose={ ( maybeInsertedBlock ) => {
+						if ( maybeInsertedBlock?.clientId ) {
+							setInsertedBlock( maybeInsertedBlock );
+						}
+					} }
+				/>
+				<AriaReferencedText id={ descriptionId }>
+					{ description }
+				</AriaReferencedText>
+			</div>
+		);
+	}
+);
diff --git a/packages/block-editor/src/components/list-view/aria-referenced-text.js b/packages/block-editor/src/components/list-view/aria-referenced-text.js
new file mode 100644
index 00000000000000..b5d7a73e8bcf52
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/aria-referenced-text.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+/**
+ * A component specifically designed to be used as an element referenced
+ * by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
+ *
+ * @param {Object}                    props          Props.
+ * @param {import('react').ReactNode} props.children
+ */
+export default function AriaReferencedText( { children, ...props } ) {
+	const ref = useRef();
+
+	useEffect( () => {
+		if ( ref.current ) {
+			// This seems like a no-op, but it fixes a bug in Firefox where
+			// it fails to recompute the text when only the text node changes.
+			// @see https://github.com/WordPress/gutenberg/pull/51035
+			ref.current.textContent = ref.current.textContent;
+		}
+	}, [ children ] );
+
+	return (
+		<div hidden { ...props } ref={ ref }>
+			{ children }
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 507e7575344ab3..0ed2b162b127b8 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -14,7 +8,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
+import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -33,25 +27,8 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
-			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-				};
-			},
-			[ clientId ]
-		);
-
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = classnames( 'block-editor-list-view-block-contents', {
-			'is-dropping-before': isBlockMoveTarget,
-		} );
+		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
+			useListViewContext();
 
 		// Only include all selected blocks if the currently clicked on block
 		// is one of the selected blocks. This ensures that if a user attempts
@@ -62,26 +39,39 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
+			<>
+				{ AdditionalBlockContent && (
+					<AdditionalBlockContent
 						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
+						insertedBlock={ insertedBlock }
+						setInsertedBlock={ setInsertedBlock }
 					/>
 				) }
-			</BlockDraggable>
+				<BlockDraggable
+					appendToOwnerDocument
+					clientIds={ draggableClientIds }
+					cloneClassname="block-editor-list-view-draggable-chip"
+				>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className="block-editor-list-view-block-contents"
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );
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..3b21fd4a04e6d0 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
@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -23,18 +23,24 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
+import useListViewImages from './use-list-view-images';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
 		className,
 		block: { clientId },
 		onClick,
+		onContextMenu,
+		onMouseDown,
 		onToggleExpanded,
 		tabIndex,
 		onFocus,
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -44,6 +50,17 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
+	const { isContentOnly } = useSelect(
+		( select ) => ( {
+			isContentOnly:
+				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
+				'contentOnly',
+		} ),
+		[ clientId ]
+	);
+	const shouldShowLockIcon = isLocked && ! isContentOnly;
+	const isSticky = blockInformation?.positionType === 'sticky';
+	const images = useListViewImages( { clientId, isExpanded } );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
 	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
@@ -54,59 +71,89 @@ function ListViewBlockSelectButton(
 		onDragStart?.( event );
 	};
 
-	function onKeyDownHandler( event ) {
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	function onKeyDown( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
 			onClick( event );
 		}
 	}
 
 	return (
-		<>
-			<Button
-				className={ classnames(
-					'block-editor-list-view-block-select-button',
-					className
-				) }
-				onClick={ onClick }
-				onKeyDown={ onKeyDownHandler }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
-				onDragEnd={ onDragEnd }
-				draggable={ draggable }
-				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+		<a
+			className={ clsx(
+				'block-editor-list-view-block-select-button',
+				className
+			) }
+			onClick={ onClick }
+			onContextMenu={ onContextMenu }
+			onKeyDown={ onKeyDown }
+			onMouseDown={ onMouseDown }
+			ref={ ref }
+			tabIndex={ tabIndex }
+			onFocus={ onFocus }
+			onDragStart={ onDragStartHandler }
+			onDragEnd={ onDragEnd }
+			draggable={ draggable }
+			href={ `#block-${ clientId }` }
+			aria-describedby={ ariaDescribedBy }
+			aria-expanded={ isExpanded }
+		>
+			<ListViewExpander onClick={ onToggleExpanded } />
+			<BlockIcon
+				icon={ blockInformation?.icon }
+				showColors
+				context="list-view"
+			/>
+			<HStack
+				alignment="center"
+				className="block-editor-list-view-block-select-button__label-wrapper"
+				justify="flex-start"
+				spacing={ 1 }
 			>
-				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<HStack
-					alignment="center"
-					className="block-editor-list-view-block-select-button__label-wrapper"
-					justify="flex-start"
-					spacing={ 1 }
-				>
-					<span className="block-editor-list-view-block-select-button__title">
-						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+				<span className="block-editor-list-view-block-select-button__title">
+					<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
+				</span>
+				{ blockInformation?.anchor && (
+					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+						<Truncate
+							className="block-editor-list-view-block-select-button__anchor"
+							ellipsizeMode="auto"
+						>
+							{ blockInformation.anchor }
+						</Truncate>
+					</span>
+				) }
+				{ isSticky && (
+					<span className="block-editor-list-view-block-select-button__sticky">
+						<Icon icon={ pinSmall } />
 					</span>
-					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-							<Truncate
-								className="block-editor-list-view-block-select-button__anchor"
-								ellipsizeMode="auto"
-							>
-								{ blockInformation.anchor }
-							</Truncate>
-						</span>
-					) }
-					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
-							<Icon icon={ lock } />
-						</span>
-					) }
-				</HStack>
-			</Button>
-		</>
+				) }
+				{ images.length ? (
+					<span
+						className="block-editor-list-view-block-select-button__images"
+						aria-hidden
+					>
+						{ images.map( ( image, index ) => (
+							<span
+								className="block-editor-list-view-block-select-button__image"
+								key={ image.clientId }
+								style={ {
+									backgroundImage: `url(${ image.url })`,
+									zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
+								} }
+							/>
+						) ) }
+					</span>
+				) : null }
+				{ shouldShowLockIcon && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
+				) }
+			</HStack>
+		</a>
 	);
 }
 
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index c79f463b5ed26e..f4dcf8caef449d 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	switchToBlockType,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -14,34 +18,47 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import {
+	useCallback,
+	useMemo,
 	useState,
 	useRef,
-	useEffect,
-	useCallback,
 	memo,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import ListViewLeaf from './leaf';
+import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
-import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
+import {
+	getBlockPositionDescription,
+	getBlockPropertiesDescription,
+	focusListItem,
+} from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
+import AriaReferencedText from './aria-referenced-text';
+import { unlock } from '../../lock-unlock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
+	displacement,
+	isAfterDraggedBlocks,
 	isDragged,
+	isNesting,
 	isSelected,
 	isBranchSelected,
 	selectBlock,
@@ -53,108 +70,286 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
+	const rowRef = useRef( null );
+	const settingsRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
+	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 
-	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
-	const forceSelectionContentLock = useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return false;
-			}
-			if ( ! isContentLocked ) {
-				return false;
-			}
-			return select( blockEditorStore ).hasSelectedInnerBlock(
-				clientId,
-				true
-			);
-		},
-		[ isContentLocked, clientId, isSelected ]
-	);
+	const { isLocked, canEdit, canMove } = useBlockLock( clientId );
 
-	const canExpand = isContentLocked ? false : canEdit;
 	const isFirstSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected && selectedClientIds[ 0 ] === clientId );
+		isSelected && selectedClientIds[ 0 ] === clientId;
 	const isLastSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected &&
-			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
+		isSelected &&
+		selectedClientIds[ selectedClientIds.length - 1 ] === clientId;
+
+	const {
+		toggleBlockHighlight,
+		duplicateBlocks,
+		multiSelect,
+		replaceBlocks,
+		removeBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		setOpenedBlockSettingsMenu,
+	} = unlock( useDispatch( blockEditorStore ) );
 
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
+	const {
+		canInsertBlockType,
+		getSelectedBlockClientIds,
+		getPreviousBlockClientId,
+		getBlockRootClientId,
+		getBlockOrder,
+		getBlockParents,
+		getBlocksByClientId,
+		canRemoveBlocks,
+		isGroupable,
+	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+
+	const { block, blockName, allowRightClickOverrides } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getSettings } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				allowRightClickOverrides:
+					getSettings().allowRightClickOverrides,
+			};
+		},
 		[ clientId ]
 	);
 
-	// 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(
-		blockName,
-		'__experimentalToolbar',
-		true
-	);
+	const showBlockActions =
+		// 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.
+		hasBlockSupport( blockName, '__experimentalToolbar', true );
 	const instanceId = useInstanceId( ListViewBlock );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		siblingBlockCount,
-		level
-	);
+	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
+	const {
+		expand,
+		collapse,
+		collapseAll,
+		BlockSettingsMenu,
+		listViewInstanceId,
+		expandedState,
+		setInsertedBlock,
+		treeGridElementRef,
+		rootClientId,
+	} = useListViewContext();
+	const isMatch = useShortcutEventMatch();
+
+	// Determine which blocks to update:
+	// If the current (focused) block is part of the block selection, use the whole selection.
+	// If the focused block is not part of the block selection, only update the focused block.
+	function getBlocksToUpdate() {
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		const isUpdatingSelectedBlocks =
+			selectedBlockClientIds.includes( clientId );
+		const firstBlockClientId = isUpdatingSelectedBlocks
+			? selectedBlockClientIds[ 0 ]
+			: clientId;
+		const firstBlockRootClientId =
+			getBlockRootClientId( firstBlockClientId );
+
+		const blocksToUpdate = isUpdatingSelectedBlocks
+			? selectedBlockClientIds
+			: [ clientId ];
+
+		return {
+			blocksToUpdate,
+			firstBlockClientId,
+			firstBlockRootClientId,
+			selectedBlockClientIds,
+		};
 	}
 
-	const settingsAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Options' );
+	/**
+	 * @param {KeyboardEvent} event
+	 */
+	async function onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+		// Do not handle events if it comes from modals;
+		// retain the default behavior for these keys.
+		if ( event.target.closest( '[role=dialog]' ) ) {
+			return;
+		}
 
-	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
-		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered || isSelected }
-	);
+		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
 
-	const listViewBlockSettingsClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isFirstSelectedBlock }
-	);
+		// If multiple blocks are selected, deselect all blocks when the user
+		// presses the escape key.
+		if (
+			isMatch( 'core/block-editor/unselect', event ) &&
+			selectedClientIds.length > 0
+		) {
+			event.stopPropagation();
+			event.preventDefault();
+			selectBlock( event, undefined );
+		} else if (
+			isDeleteKey ||
+			isMatch( 'core/block-editor/remove', event )
+		) {
+			const {
+				blocksToUpdate: blocksToDelete,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				selectedBlockClientIds,
+			} = getBlocksToUpdate();
+
+			// Don't update the selection if the blocks cannot be deleted.
+			if ( ! canRemoveBlocks( blocksToDelete ) ) {
+				return;
+			}
+
+			let blockToFocus =
+				getPreviousBlockClientId( firstBlockClientId ) ??
+				// If the previous block is not found (when the first block is deleted),
+				// fallback to focus the parent block.
+				firstBlockRootClientId;
+
+			removeBlocks( blocksToDelete, false );
+
+			// Update the selection if the original selection has been removed.
+			const shouldUpdateSelection =
+				selectedBlockClientIds.length > 0 &&
+				getSelectedBlockClientIds().length === 0;
+
+			// If there's no previous block nor parent block, focus the first block.
+			if ( ! blockToFocus ) {
+				blockToFocus = getBlockOrder()[ 0 ];
+			}
+
+			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate, firstBlockRootClientId } =
+				getBlocksToUpdate();
+
+			const canDuplicate = getBlocksByClientId( blocksToUpdate ).every(
+				( blockToUpdate ) => {
+					return (
+						!! blockToUpdate &&
+						hasBlockSupport(
+							blockToUpdate.name,
+							'multiple',
+							true
+						) &&
+						canInsertBlockType(
+							blockToUpdate.name,
+							firstBlockRootClientId
+						)
+					);
+				}
+			);
+
+			if ( canDuplicate ) {
+				const updatedBlocks = await duplicateBlocks(
+					blocksToUpdate,
+					false
+				);
+
+				if ( updatedBlocks?.length ) {
+					// If blocks have been duplicated, focus the first duplicated block.
+					updateFocusAndSelection( updatedBlocks[ 0 ], false );
+				}
+			}
+		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertBeforeBlock( blocksToUpdate[ 0 ] );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			await insertAfterBlock( blocksToUpdate.at( -1 ) );
+			const newlySelectedBlocks = getSelectedBlockClientIds();
+
+			// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+			setOpenedBlockSettingsMenu( undefined );
+			updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
+			event.preventDefault();
+
+			const { firstBlockRootClientId, selectedBlockClientIds } =
+				getBlocksToUpdate();
+			const blockClientIds = getBlockOrder( firstBlockRootClientId );
+			if ( ! blockClientIds.length ) {
+				return;
+			}
+
+			// If we have selected all sibling nested blocks, try selecting up a level.
+			// This is a similar implementation to that used by `useSelectAll`.
+			// `isShallowEqual` is used for the list view instead of a length check,
+			// as the array of siblings of the currently focused block may be a different
+			// set of blocks from the current block selection if the user is focused
+			// on a different part of the list view from the block selection.
+			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
+				// Only select up a level if the first block is not the root block.
+				// This ensures that the block selection can't break out of the root block
+				// used by the list view, if the list view is only showing a partial hierarchy.
+				if (
+					firstBlockRootClientId &&
+					firstBlockRootClientId !== rootClientId
+				) {
+					updateFocusAndSelection( firstBlockRootClientId, true );
+					return;
+				}
+			}
 
-	// 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();
+			// Select all while passing `null` to skip focusing to the editor canvas,
+			// and retain focus within the list view.
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ],
+				null
+			);
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			event.preventDefault();
+			const { firstBlockClientId } = getBlocksToUpdate();
+			const blockParents = getBlockParents( firstBlockClientId, false );
+			// Collapse all blocks.
+			collapseAll();
+			// Expand all parents of the current block.
+			expand( blockParents );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const { blocksToUpdate } = getBlocksToUpdate();
+			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( blocksToUpdate );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( blocksToUpdate, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+				const newlySelectedBlocks = getSelectedBlockClientIds();
+				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+				setOpenedBlockSettingsMenu( undefined );
+				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+			}
 		}
-	}, [] );
+	}
 
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
@@ -173,11 +368,15 @@ function ListViewBlock( {
 		[ clientId, selectBlock ]
 	);
 
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
+	const updateFocusAndSelection = useCallback(
+		( focusClientId, shouldSelectBlock ) => {
+			if ( shouldSelectBlock ) {
+				selectBlock( undefined, focusClientId, null, null );
+			}
+
+			focusListItem( focusClientId, treeGridElementRef?.current );
 		},
-		[ selectBlock ]
+		[ selectBlock, treeGridElementRef ]
 	);
 
 	const toggleExpanded = useCallback(
@@ -194,6 +393,95 @@ function ListViewBlock( {
 		[ clientId, expand, collapse, isExpanded ]
 	);
 
+	// Allow right-clicking an item in the List View to open up the block settings dropdown.
+	const onContextMenu = useCallback(
+		( event ) => {
+			if ( showBlockActions && allowRightClickOverrides ) {
+				settingsRef.current?.click();
+				// Ensure the position of the settings dropdown is at the cursor.
+				setSettingsAnchorRect(
+					new window.DOMRect( event.clientX, event.clientY, 0, 0 )
+				);
+				event.preventDefault();
+			}
+		},
+		[ allowRightClickOverrides, settingsRef, showBlockActions ]
+	);
+
+	const onMouseDown = useCallback(
+		( event ) => {
+			// Prevent right-click from focusing the block,
+			// because focus will be handled when opening the block settings dropdown.
+			if ( allowRightClickOverrides && event.button === 2 ) {
+				event.preventDefault();
+			}
+		},
+		[ allowRightClickOverrides ]
+	);
+
+	const settingsPopoverAnchor = useMemo( () => {
+		const { ownerDocument } = rowRef?.current || {};
+
+		// If no custom position is set, the settings dropdown will be anchored to the
+		// DropdownMenu toggle button.
+		if ( ! settingsAnchorRect || ! ownerDocument ) {
+			return undefined;
+		}
+
+		// Position the settings dropdown at the cursor when right-clicking a block.
+		return {
+			ownerDocument,
+			getBoundingClientRect() {
+				return settingsAnchorRect;
+			},
+		};
+	}, [ settingsAnchorRect ] );
+
+	const clearSettingsAnchorRect = useCallback( () => {
+		// Clear the custom position for the settings dropdown so that it is restored back
+		// to being anchored to the DropdownMenu toggle button.
+		setSettingsAnchorRect( undefined );
+	}, [ setSettingsAnchorRect ] );
+
+	// Pass in a ref to the row, so that it can be scrolled
+	// into view when selected. For long lists, the placeholder for the
+	// selected block is also observed, within ListViewLeafPlaceholder.
+	useListViewScrollIntoView( {
+		isSelected,
+		rowItemRef: rowRef,
+		selectedClientIds,
+	} );
+
+	// When switching between rendering modes (such as template preview and content only),
+	// it is possible for a block to temporarily be unavailable. In this case, we should not
+	// render the leaf, to avoid errors further down the tree.
+	if ( ! block ) {
+		return null;
+	}
+
+	const blockPositionDescription = getBlockPositionDescription(
+		position,
+		siblingBlockCount,
+		level
+	);
+
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
+
+	const hasSiblings = siblingBlockCount > 0;
+	const hasRenderedMovers = showBlockMovers && hasSiblings;
+	const moverCellClassName = clsx(
+		'block-editor-list-view-block__mover-cell',
+		{ 'is-visible': isHovered || isSelected }
+	);
+
+	const listViewBlockSettingsClassName = clsx(
+		'block-editor-list-view-block__menu-cell',
+		{ 'is-visible': isHovered || isFirstSelectedBlock }
+	);
+
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -201,15 +489,21 @@ function ListViewBlock( {
 		colSpan = 3;
 	}
 
-	const classes = classnames( {
-		'is-selected': isSelected || forceSelectionContentLock,
+	const classes = clsx( {
+		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,
 		'is-branch-selected': isBranchSelected,
 		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-synced': blockInformation.isSynced,
+		'is-synced': blockInformation?.isSynced,
+		'is-draggable': canMove,
+		'is-displacement-normal': displacement === 'normal',
+		'is-displacement-up': displacement === 'up',
+		'is-displacement-down': displacement === 'down',
+		'is-after-dragged-blocks': isAfterDraggedBlocks,
+		'is-nesting': isNesting,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block
@@ -220,9 +514,15 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
+	const currentlyEditingBlockInCanvas =
+		isSelected && selectedClientIds.length === 1;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
+			isDragged={ isDragged }
+			onKeyDown={ onKeyDown }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			onFocus={ onMouseEnter }
@@ -231,43 +531,46 @@ function ListViewBlock( {
 			position={ position }
 			rowCount={ rowCount }
 			path={ path }
-			id={ `list-view-block-${ clientId }` }
+			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
+			data-expanded={ canEdit ? isExpanded : undefined }
+			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
-				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
+				aria-selected={ !! isSelected }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
 							onClick={ selectEditorBlock }
+							onContextMenu={ onContextMenu }
+							onMouseDown={ onMouseDown }
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={ tabIndex }
+							tabIndex={
+								currentlyEditingBlockInCanvas ? 0 : tabIndex
+							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canEdit ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaDescribedBy={ descriptionId }
 						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
-							{ blockPositionDescription }
-						</div>
+						<AriaReferencedText id={ descriptionId }>
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
+						</AriaReferencedText>
 					</div>
 				) }
 			</TreeGridCell>
@@ -303,24 +606,35 @@ function ListViewBlock( {
 				</>
 			) }
 
-			{ showBlockActions && (
+			{ showBlockActions && BlockSettingsMenu && (
 				<TreeGridCell
 					className={ listViewBlockSettingsClassName }
-					aria-selected={ !! isSelected || forceSelectionContentLock }
+					aria-selected={ !! isSelected }
+					ref={ settingsRef }
 				>
 					{ ( { ref, tabIndex, onFocus } ) => (
-						<BlockSettingsDropdown
+						<BlockSettingsMenu
 							clientIds={ dropdownClientIds }
+							block={ block }
 							icon={ moreVertical }
-							label={ settingsAriaLabel }
+							label={ __( 'Options' ) }
+							popoverProps={ {
+								anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
+							} }
 							toggleProps={ {
 								ref,
 								className: 'block-editor-list-view-block__menu',
 								tabIndex,
+								onClick: clearSettingsAnchorRect,
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ updateSelection }
+							expand={ expand }
+							expandedState={ expandedState }
+							setInsertedBlock={ setInsertedBlock }
+							__experimentalSelectBlock={
+								updateFocusAndSelection
+							}
 						/>
 					) }
 				</TreeGridCell>
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
index 1ee073445ee448..5df7134e125cdb 100644
--- a/packages/block-editor/src/components/list-view/branch.js
+++ b/packages/block-editor/src/components/list-view/branch.js
@@ -1,18 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import {
+	__experimentalTreeGridRow as TreeGridRow,
+	__experimentalTreeGridCell as TreeGridCell,
+} from '@wordpress/components';
+import { memo, useRef } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-/**
- * Internal dependencies
- */
+import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
-import { isClientIdSelected } from './utils';
+import { getDragDisplacementValues, isClientIdSelected } from './utils';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 
@@ -79,10 +81,12 @@ const countReducer =
 		return count + 1;
 	};
 
+const noop = () => {};
+
 function ListViewBranch( props ) {
 	const {
 		blocks,
-		selectBlock,
+		selectBlock = noop,
 		showBlockMovers,
 		selectedClientIds,
 		level = 1,
@@ -94,6 +98,7 @@ function ListViewBranch( props ) {
 		parentId,
 		shouldShowInnerBlocks = true,
 		isSyncedBranch = false,
+		showAppender: showAppenderProp = true,
 	} = props;
 
 	const parentBlockInformation = useBlockDisplayInformation( parentId );
@@ -104,26 +109,33 @@ function ListViewBranch( props ) {
 			if ( ! parentId ) {
 				return true;
 			}
-
-			const isContentLocked =
-				select( blockEditorStore ).getTemplateLock( parentId ) ===
-				'contentOnly';
-			const canEdit = select( blockEditorStore ).canEditBlock( parentId );
-
-			return isContentLocked ? false : canEdit;
+			return select( blockEditorStore ).canEditBlock( parentId );
 		},
 		[ parentId ]
 	);
 
-	const { expandedState, draggedClientIds } = useListViewContext();
+	const {
+		blockDropPosition,
+		blockDropTargetIndex,
+		firstDraggedBlockIndex,
+		blockIndexes,
+		expandedState,
+		draggedClientIds,
+	} = useListViewContext();
+
+	const nextPositionRef = useRef();
 
 	if ( ! canParentExpand ) {
 		return null;
 	}
 
+	// Only show the appender at the first level.
+	const showAppender = showAppenderProp && level === 1;
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
-	let nextPosition = listPosition;
+	// The appender means an extra row in List View, so add 1 to the row count.
+	const rowCount = showAppender ? blockCount + 1 : blockCount;
+	nextPositionRef.current = listPosition;
 
 	return (
 		<>
@@ -131,7 +143,7 @@ function ListViewBranch( props ) {
 				const { clientId, innerBlocks } = block;
 
 				if ( index > 0 ) {
-					nextPosition += countBlocks(
+					nextPositionRef.current += countBlocks(
 						filteredBlocks[ index - 1 ],
 						expandedState,
 						draggedClientIds,
@@ -139,8 +151,23 @@ function ListViewBranch( props ) {
 					);
 				}
 
+				const isDragged = !! draggedClientIds?.includes( clientId );
+
+				// Determine the displacement of the block while dragging. This
+				// works out whether the current block should be displaced up or
+				// down, relative to the dragged blocks and the drop target.
+				const { displacement, isAfterDraggedBlocks, isNesting } =
+					getDragDisplacementValues( {
+						blockIndexes,
+						blockDropTargetIndex,
+						blockDropPosition,
+						clientId,
+						firstDraggedBlockIndex,
+						isDragged,
+					} );
+
 				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPosition );
+				const blockInView = itemInView( nextPositionRef.current );
 
 				const position = index + 1;
 				const updatedPath =
@@ -154,10 +181,6 @@ function ListViewBranch( props ) {
 						? expandedState[ clientId ] ?? isExpanded
 						: undefined;
 
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
-				const showBlock = isDragged || blockInView;
-
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
 				const isSelected = isClientIdSelected(
@@ -166,6 +189,21 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+
+				// To avoid performance issues, we only render blocks that are in view,
+				// or blocks that are selected or dragged. If a block is selected,
+				// it is only counted if it is the first of the block selection.
+				// This prevents the entire tree from being rendered when a branch is
+				// selected, or a user selects all blocks, while still enabling scroll
+				// into view behavior when selecting a block or opening the list view.
+				// The first and last blocks of the list are always rendered, to ensure
+				// that Home and End keys work as expected.
+				const showBlock =
+					isDragged ||
+					blockInView ||
+					( isSelected && clientId === selectedClientIds[ 0 ] ) ||
+					index === 0 ||
+					index === blockCount - 1;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (
@@ -177,14 +215,17 @@ function ListViewBranch( props ) {
 								isDragged={ isDragged }
 								level={ level }
 								position={ position }
-								rowCount={ blockCount }
+								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
-								isExpanded={ shouldExpand }
-								listPosition={ nextPosition }
+								isExpanded={ isDragged ? false : shouldExpand }
+								listPosition={ nextPositionRef.current }
 								selectedClientIds={ selectedClientIds }
 								isSyncedBranch={ syncedBranch }
+								displacement={ displacement }
+								isAfterDraggedBlocks={ isAfterDraggedBlocks }
+								isNesting={ isNesting }
 							/>
 						) }
 						{ ! showBlock && (
@@ -200,7 +241,7 @@ function ListViewBranch( props ) {
 								showBlockMovers={ showBlockMovers }
 								level={ level + 1 }
 								path={ updatedPath }
-								listPosition={ nextPosition + 1 }
+								listPosition={ nextPositionRef.current + 1 }
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
@@ -211,12 +252,27 @@ function ListViewBranch( props ) {
 					</AsyncModeProvider>
 				);
 			} ) }
+			{ showAppender && (
+				<TreeGridRow
+					level={ level }
+					setSize={ rowCount }
+					positionInSet={ rowCount }
+					isExpanded
+				>
+					<TreeGridCell>
+						{ ( treeGridCellProps ) => (
+							<Appender
+								clientId={ parentId }
+								nestingLevel={ level }
+								blockCount={ blockCount }
+								{ ...treeGridCellProps }
+							/>
+						) }
+					</TreeGridCell>
+				</TreeGridRow>
+			) }
 		</>
 	);
 }
 
-ListViewBranch.defaultProps = {
-	selectBlock: () => {},
-};
-
 export default memo( ListViewBranch );
diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
index 1e8d51a73919ab..3185bf9fbb2485 100644
--- a/packages/block-editor/src/components/list-view/drop-indicator.js
+++ b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -1,13 +1,40 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
+import {
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+	Popover,
+} from '@wordpress/components';
+
+import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
-export default function ListViewDropIndicator( {
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import ListViewExpander from './expander';
+
+export default function ListViewDropIndicatorPreview( {
+	draggedBlockClientId,
 	listViewRef,
 	blockDropTarget,
 } ) {
+	const blockInformation = useBlockDisplayInformation( draggedBlockClientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: draggedBlockClientId,
+		context: 'list-view',
+	} );
+
 	const { rootClientId, clientId, dropPosition } = blockDropTarget || {};
 
 	const [ rootBlockElement, blockElement ] = useMemo( () => {
@@ -33,40 +60,156 @@ export default function ListViewDropIndicator( {
 			: undefined;
 
 		return [ _rootBlockElement, _blockElement ];
-	}, [ rootClientId, clientId ] );
+	}, [ listViewRef, rootClientId, clientId ] );
 
 	// The targetElement is the element that the drop indicator will appear
 	// before or after. When dropping into an empty block list, blockElement
 	// is undefined, so the indicator will appear after the rootBlockElement.
 	const targetElement = blockElement || rootBlockElement;
 
-	const getDropIndicatorIndent = useCallback( () => {
-		if ( ! rootBlockElement ) {
-			return 0;
-		}
+	const rtl = isRTL();
 
-		// Calculate the indent using the block icon of the root block.
-		// Using a classname selector here might be flaky and could be
-		// improved.
-		const targetElementRect = targetElement.getBoundingClientRect();
-		const rootBlockIconElement = rootBlockElement.querySelector(
-			'.block-editor-block-icon'
-		);
-		const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-		return rootBlockIconRect.right - targetElementRect.left;
-	}, [ rootBlockElement, targetElement ] );
+	const getDropIndicatorWidth = useCallback(
+		( targetElementRect, indent ) => {
+			if ( ! targetElement ) {
+				return 0;
+			}
+
+			// Default to assuming that the width of the drop indicator
+			// should be the same as the target element.
+			let width = targetElement.offsetWidth;
+
+			// In deeply nested lists, where a scrollbar is present,
+			// the width of the drop indicator should be the width of
+			// the scroll container, minus the distance from the left
+			// edge of the scroll container to the left edge of the
+			// target element.
+			const scrollContainer = getScrollContainer(
+				targetElement,
+				'horizontal'
+			);
+
+			const ownerDocument = targetElement.ownerDocument;
+			const windowScroll =
+				scrollContainer === ownerDocument.body ||
+				scrollContainer === ownerDocument.documentElement;
+
+			if ( scrollContainer && ! windowScroll ) {
+				const scrollContainerRect =
+					scrollContainer.getBoundingClientRect();
+
+				const distanceBetweenContainerAndTarget = isRTL()
+					? scrollContainerRect.right - targetElementRect.right
+					: targetElementRect.left - scrollContainerRect.left;
+
+				const scrollContainerWidth = scrollContainer.clientWidth;
+
+				if (
+					scrollContainerWidth <
+					width + distanceBetweenContainerAndTarget
+				) {
+					width =
+						scrollContainerWidth -
+						distanceBetweenContainerAndTarget;
+				}
+
+				// LTR logic for ensuring the drop indicator does not extend
+				// beyond the right edge of the scroll container.
+				if (
+					! rtl &&
+					targetElementRect.left + indent < scrollContainerRect.left
+				) {
+					width -= scrollContainerRect.left - targetElementRect.left;
+					return width;
+				}
+
+				// RTL logic for ensuring the drop indicator does not extend
+				// beyond the right edge of the scroll container.
+				if (
+					rtl &&
+					targetElementRect.right - indent > scrollContainerRect.right
+				) {
+					width -=
+						targetElementRect.right - scrollContainerRect.right;
+					return width;
+				}
+			}
+
+			// Subtract the indent from the final width of the indicator.
+			return width - indent;
+		},
+		[ rtl, targetElement ]
+	);
 
 	const style = useMemo( () => {
 		if ( ! targetElement ) {
 			return {};
 		}
 
-		const indent = getDropIndicatorIndent();
+		const targetElementRect = targetElement.getBoundingClientRect();
 
 		return {
-			width: targetElement.offsetWidth - indent,
+			width: getDropIndicatorWidth( targetElementRect, 0 ),
 		};
-	}, [ getDropIndicatorIndent, targetElement ] );
+	}, [ getDropIndicatorWidth, targetElement ] );
+
+	const horizontalScrollOffsetStyle = useMemo( () => {
+		if ( ! targetElement ) {
+			return {};
+		}
+
+		const scrollContainer = getScrollContainer( targetElement );
+		const ownerDocument = targetElement.ownerDocument;
+		const windowScroll =
+			scrollContainer === ownerDocument.body ||
+			scrollContainer === ownerDocument.documentElement;
+
+		if ( scrollContainer && ! windowScroll ) {
+			const scrollContainerRect = scrollContainer.getBoundingClientRect();
+			const targetElementRect = targetElement.getBoundingClientRect();
+
+			const distanceBetweenContainerAndTarget = rtl
+				? scrollContainerRect.right - targetElementRect.right
+				: targetElementRect.left - scrollContainerRect.left;
+
+			if ( ! rtl && scrollContainerRect.left > targetElementRect.left ) {
+				return {
+					transform: `translateX( ${ distanceBetweenContainerAndTarget }px )`,
+				};
+			}
+
+			if ( rtl && scrollContainerRect.right < targetElementRect.right ) {
+				return {
+					transform: `translateX( ${
+						distanceBetweenContainerAndTarget * -1
+					}px )`,
+				};
+			}
+		}
+
+		return {};
+	}, [ rtl, targetElement ] );
+
+	const ariaLevel = useMemo( () => {
+		if ( ! rootBlockElement ) {
+			return 1;
+		}
+
+		const _ariaLevel = parseInt(
+			rootBlockElement.getAttribute( 'aria-level' ),
+			10
+		);
+
+		return _ariaLevel ? _ariaLevel + 1 : 1;
+	}, [ rootBlockElement ] );
+
+	const hasAdjacentSelectedBranch = useMemo( () => {
+		if ( ! targetElement ) {
+			return false;
+		}
+
+		return targetElement.classList.contains( 'is-branch-selected' );
+	}, [ targetElement ] );
 
 	const popoverAnchor = useMemo( () => {
 		const isValidDropPosition =
@@ -78,32 +221,70 @@ export default function ListViewDropIndicator( {
 		}
 
 		return {
-			ownerDocument: targetElement.ownerDocument,
+			contextElement: targetElement,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
-				const indent = getDropIndicatorIndent();
-
-				const left = rect.left + indent;
-				const right = rect.right;
+				// In RTL languages, the drop indicator should be positioned
+				// to the left of the target element, with the width of the
+				// indicator determining the indent at the right edge of the
+				// target element. In LTR languages, the drop indicator should
+				// end at the right edge of the target element, with the indent
+				// added to the position of the left edge of the target element.
+				// let left = rtl ? rect.left : rect.left + indent;
+				let left = rect.left;
 				let top = 0;
-				let bottom = 0;
+
+				// In deeply nested lists, where a scrollbar is present,
+				// the width of the drop indicator should be the width of
+				// the visible area of the scroll container. Additionally,
+				// the left edge of the drop indicator line needs to be
+				// offset by the distance the left edge of the target element
+				// and the left edge of the scroll container. The ensures
+				// that the drop indicator position never breaks out of the
+				// visible area of the scroll container.
+				const scrollContainer = getScrollContainer(
+					targetElement,
+					'horizontal'
+				);
+
+				const doc = targetElement.ownerDocument;
+				const windowScroll =
+					scrollContainer === doc.body ||
+					scrollContainer === doc.documentElement;
+
+				// If the scroll container is not the window, offset the left position, if need be.
+				if ( scrollContainer && ! windowScroll ) {
+					const scrollContainerRect =
+						scrollContainer.getBoundingClientRect();
+
+					// In RTL languages, a vertical scrollbar is present on the
+					// left edge of the scroll container. The width of the
+					// scrollbar needs to be accounted for when positioning the
+					// drop indicator.
+					const scrollbarWidth = rtl
+						? scrollContainer.offsetWidth -
+						  scrollContainer.clientWidth
+						: 0;
+
+					if ( left < scrollContainerRect.left + scrollbarWidth ) {
+						left = scrollContainerRect.left + scrollbarWidth;
+					}
+				}
 
 				if ( dropPosition === 'top' ) {
-					top = rect.top;
-					bottom = rect.top;
+					top = rect.top - rect.height * 2;
 				} else {
 					// `dropPosition` is either `bottom` or `inside`
-					top = rect.bottom;
-					bottom = rect.bottom;
+					top = rect.top;
 				}
 
-				const width = right - left;
-				const height = bottom - top;
+				const width = getDropIndicatorWidth( rect, 0 );
+				const height = rect.height;
 
 				return new window.DOMRect( left, top, width, height );
 			},
 		};
-	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
+	}, [ targetElement, dropPosition, getDropIndicatorWidth, rtl ] );
 
 	if ( ! targetElement ) {
 		return null;
@@ -114,13 +295,54 @@ export default function ListViewDropIndicator( {
 			animate={ false }
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
-			className="block-editor-list-view-drop-indicator"
+			className="block-editor-list-view-drop-indicator--preview"
 			variant="unstyled"
+			flip={ false }
+			resize
 		>
 			<div
 				style={ style }
-				className="block-editor-list-view-drop-indicator__line"
-			/>
+				className={ clsx(
+					'block-editor-list-view-drop-indicator__line',
+					{
+						'block-editor-list-view-drop-indicator__line--darker':
+							hasAdjacentSelectedBranch,
+					}
+				) }
+			>
+				<div
+					className="block-editor-list-view-leaf"
+					aria-level={ ariaLevel }
+				>
+					<div
+						className={ clsx(
+							'block-editor-list-view-block-select-button',
+							'block-editor-list-view-block-contents'
+						) }
+						style={ horizontalScrollOffsetStyle }
+					>
+						<ListViewExpander onClick={ () => {} } />
+						<BlockIcon
+							icon={ blockInformation?.icon }
+							showColors
+							context="list-view"
+						/>
+						<HStack
+							alignment="center"
+							className="block-editor-list-view-block-select-button__label-wrapper"
+							justify="flex-start"
+							spacing={ 1 }
+						>
+							<span className="block-editor-list-view-block-select-button__title">
+								<Truncate ellipsizeMode="auto">
+									{ blockTitle }
+								</Truncate>
+							</span>
+						</HStack>
+					</div>
+					<div className="block-editor-list-view-block__menu-cell"></div>
+				</div>
+			</div>
 		</Popover>
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/expander.js b/packages/block-editor/src/components/list-view/expander.js
index 3b93f8ad01185c..969a8960d63904 100644
--- a/packages/block-editor/src/components/list-view/expander.js
+++ b/packages/block-editor/src/components/list-view/expander.js
@@ -19,6 +19,7 @@ export default function ListViewExpander( { onClick } ) {
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
+			data-testid="list-view-expander"
 		>
 			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 7166b594c276c2..d7961bd6c02f3d 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -1,12 +1,22 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import {
+	useInstanceId,
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import {
+	__experimentalTreeGrid as TreeGrid,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import {
 	useCallback,
 	useEffect,
@@ -14,6 +24,7 @@ import {
 	useRef,
 	useReducer,
 	forwardRef,
+	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -22,14 +33,22 @@ import { __ } from '@wordpress/i18n';
  */
 import ListViewBranch from './branch';
 import { ListViewContext } from './context';
-import ListViewDropIndicator from './drop-indicator';
+import ListViewDropIndicatorPreview from './drop-indicator';
 import useBlockSelection from './use-block-selection';
+import useListViewBlockIndexes from './use-list-view-block-indexes';
 import useListViewClientIds from './use-list-view-client-ids';
+import useListViewCollapseItems from './use-list-view-collapse-items';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
+import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';
+import { focusListItem } from './utils';
+import useClipboardHandler from './use-clipboard-handler';
 
 const expanded = ( state, action ) => {
+	if ( action.type === 'clear' ) {
+		return {};
+	}
 	if ( Array.isArray( action.clientIds ) ) {
 		return {
 			...state,
@@ -45,39 +64,71 @@ const expanded = ( state, action ) => {
 	return state;
 };
 
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
+export const BLOCK_LIST_ITEM_HEIGHT = 32;
+
+/** @typedef {import('react').ComponentType} ComponentType */
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
 
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers Flag to enable block movers
- * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}         props                        Components props.
+ * @param {string}         props.id                     An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
+ * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description            Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
+ * @param {Ref}            ref                          Forwarded ref
  */
-function ListView(
-	{ id, blocks, showBlockMovers = false, isExpanded = false },
+function ListViewComponent(
+	{
+		id,
+		blocks,
+		dropZoneElement,
+		showBlockMovers = false,
+		isExpanded = false,
+		showAppender = false,
+		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
+		rootClientId,
+		description,
+		onSelect,
+		additionalBlockContent: AdditionalBlockContent,
+	},
 	ref
 ) {
+	// This can be removed once we no longer need to support the blocks prop.
+	if ( blocks ) {
+		deprecated(
+			'`blocks` property in `wp.blockEditor.__experimentalListView`',
+			{
+				since: '6.3',
+				alternative: '`rootClientId` property',
+			}
+		);
+	}
+
+	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
+		useListViewClientIds( { blocks, rootClientId } );
+	const blockIndexes = useListViewBlockIndexes( clientIdsTree );
 
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
+	const { getBlock } = useSelect( blockEditorStore );
+	const { visibleBlockCount } = useSelect(
 		( select ) => {
-			const {
-				getGlobalBlockCount,
-				getClientIdsOfDescendants,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+			const { getGlobalBlockCount, getClientIdsOfDescendants } =
+				select( blockEditorStore );
 			const draggedBlockCount =
 				draggedClientIds?.length > 0
 					? getClientIdsOfDescendants( draggedClientIds ).length + 1
 					: 0;
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
-				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
 			};
 		},
 		[ draggedClientIds ]
@@ -87,45 +138,65 @@ function ListView(
 
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
-	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
+	const [ insertedBlock, setInsertedBlock ] = useState( null );
 
-	const isMounted = useRef( false );
 	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
 		firstSelectedBlockClientId: selectedClientIds[ 0 ],
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		/**
+		 * @param {MouseEvent | KeyboardEvent | undefined} event
+		 * @param {string}                                 blockClientId
+		 * @param {null | undefined | -1 | 1}              focusPosition
+		 */
+		( event, blockClientId, focusPosition ) => {
+			updateBlockSelection( event, blockClientId, null, focusPosition );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
-	useEffect( () => {
-		isMounted.current = true;
-	}, [] );
 
-	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	const [ fixedListWindow ] = useFixedWindowList(
+	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {
+		dropZoneElement,
+		expandedState,
+		setExpandedState,
+	} );
+	const elementRef = useRef();
+
+	// Allow handling of copy, cut, and paste events.
+	const clipBoardRef = useClipboardHandler( {
+		selectBlock: selectEditorBlock,
+	} );
+
+	const treeGridRef = useMergeRefs( [
+		clipBoardRef,
 		elementRef,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
+		dropZoneRef,
+		ref,
+	] );
+
+	useEffect( () => {
+		// If a blocks are already selected when the list view is initially
+		// mounted, shift focus to the first selected block.
+		if ( selectedClientIds?.length ) {
+			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
 		}
-	);
+		// Only focus on the selected item when the list view is mounted.
+	}, [] );
 
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
 				return;
 			}
-			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
+			const clientIds = Array.isArray( clientId )
+				? clientId
+				: [ clientId ];
+			setExpandedState( { type: 'expand', clientIds } );
 		},
 		[ setExpandedState ]
 	);
@@ -138,6 +209,9 @@ function ListView(
 		},
 		[ setExpandedState ]
 	);
+	const collapseAll = useCallback( () => {
+		setExpandedState( { type: 'clear' } );
+	}, [ setExpandedState ] );
 	const expandRow = useCallback(
 		( row ) => {
 			expand( row?.dataset?.block );
@@ -163,46 +237,185 @@ function ListView(
 		[ updateBlockSelection ]
 	);
 
+	useListViewCollapseItems( {
+		collapseAll,
+		expand,
+	} );
+
+	const firstDraggedBlockClientId = draggedClientIds?.[ 0 ];
+
+	// Convert a blockDropTarget into indexes relative to the blocks in the list view.
+	// These values are used to determine which blocks should be displaced to make room
+	// for the drop indicator. See `ListViewBranch` and `getDragDisplacementValues`.
+	const { blockDropTargetIndex, blockDropPosition, firstDraggedBlockIndex } =
+		useMemo( () => {
+			let _blockDropTargetIndex, _firstDraggedBlockIndex;
+
+			if ( blockDropTarget?.clientId ) {
+				const foundBlockIndex =
+					blockIndexes[ blockDropTarget.clientId ];
+				// If dragging below or inside the block, treat the drop target as the next block.
+				_blockDropTargetIndex =
+					foundBlockIndex === undefined ||
+					blockDropTarget?.dropPosition === 'top'
+						? foundBlockIndex
+						: foundBlockIndex + 1;
+			} else if ( blockDropTarget === null ) {
+				// A `null` value is used to indicate that the user is dragging outside of the list view.
+				_blockDropTargetIndex = null;
+			}
+
+			if ( firstDraggedBlockClientId ) {
+				const foundBlockIndex =
+					blockIndexes[ firstDraggedBlockClientId ];
+				_firstDraggedBlockIndex =
+					foundBlockIndex === undefined ||
+					blockDropTarget?.dropPosition === 'top'
+						? foundBlockIndex
+						: foundBlockIndex + 1;
+			}
+
+			return {
+				blockDropTargetIndex: _blockDropTargetIndex,
+				blockDropPosition: blockDropTarget?.dropPosition,
+				firstDraggedBlockIndex: _firstDraggedBlockIndex,
+			};
+		}, [ blockDropTarget, blockIndexes, firstDraggedBlockClientId ] );
+
 	const contextValue = useMemo(
 		() => ( {
-			isTreeGridMounted: isMounted.current,
+			blockDropPosition,
+			blockDropTargetIndex,
+			blockIndexes,
 			draggedClientIds,
 			expandedState,
 			expand,
+			firstDraggedBlockIndex,
 			collapse,
+			collapseAll,
+			BlockSettingsMenu,
+			listViewInstanceId: instanceId,
+			AdditionalBlockContent,
+			insertedBlock,
+			setInsertedBlock,
+			treeGridElementRef: elementRef,
+			rootClientId,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			blockDropPosition,
+			blockDropTargetIndex,
+			blockIndexes,
+			draggedClientIds,
+			expandedState,
+			expand,
+			firstDraggedBlockIndex,
+			collapse,
+			collapseAll,
+			BlockSettingsMenu,
+			instanceId,
+			AdditionalBlockContent,
+			insertedBlock,
+			setInsertedBlock,
+			rootClientId,
+		]
+	);
+
+	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		BLOCK_LIST_ITEM_HEIGHT,
+		visibleBlockCount,
+		{
+			// Ensure that the windowing logic is recalculated when the expanded state changes.
+			// This is necessary because expanding a collapsed block in a short list view can
+			// switch the list view to a tall list view with a scrollbar, and vice versa.
+			// When this happens, the windowing logic needs to be recalculated to ensure that
+			// the correct number of blocks are rendered, by rechecking for a scroll container.
+			expandedState,
+			useWindowing: true,
+			windowOverscan: 40,
+		}
 	);
 
+	// If there are no blocks to show and we're not showing the appender, do not render the list view.
+	if ( ! clientIdsTree.length && ! showAppender ) {
+		return null;
+	}
+
+	const describedById =
+		description && `block-editor-list-view-description-${ instanceId }`;
+
 	return (
-		<AsyncModeProvider value={ true }>
-			<ListViewDropIndicator
+		<AsyncModeProvider value>
+			<ListViewDropIndicatorPreview
+				draggedBlockClientId={ firstDraggedBlockClientId }
 				listViewRef={ elementRef }
 				blockDropTarget={ blockDropTarget }
 			/>
+			{ description && (
+				<VisuallyHidden id={ describedById }>
+					{ description }
+				</VisuallyHidden>
+			) }
 			<TreeGrid
 				id={ id }
-				className="block-editor-list-view-tree"
+				className={ clsx( 'block-editor-list-view-tree', {
+					'is-dragging':
+						draggedClientIds?.length > 0 &&
+						blockDropTargetIndex !== undefined,
+				} ) }
 				aria-label={ __( 'Block navigation structure' ) }
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
+				aria-describedby={ describedById }
+				style={ {
+					'--wp-admin--list-view-dragged-items-height':
+						draggedClientIds?.length
+							? `${
+									BLOCK_LIST_ITEM_HEIGHT *
+									( draggedClientIds.length - 1 )
+							  }px`
+							: null,
+				} }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
 						blocks={ clientIdsTree }
+						parentId={ rootClientId }
 						selectBlock={ selectEditorBlock }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
-						shouldShowInnerBlocks={ shouldShowInnerBlocks }
+						showAppender={ showAppender }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>
 		</AsyncModeProvider>
 	);
 }
-export default forwardRef( ListView );
+
+// This is the private API for the ListView component.
+// It allows access to all props, not just the public ones.
+export const PrivateListView = forwardRef( ListViewComponent );
+
+// This is the public API for the ListView component.
+// We wrap the PrivateListView component to hide some props from the public API.
+export default forwardRef( ( props, ref ) => {
+	return (
+		<PrivateListView
+			ref={ ref }
+			{ ...props }
+			showAppender={ false }
+			rootClientId={ null }
+			onSelect={ null }
+			additionalBlockContent={ null }
+			blockSettingsMenu={ undefined }
+		/>
+	);
+} );
diff --git a/packages/block-editor/src/components/list-view/leaf.js b/packages/block-editor/src/components/list-view/leaf.js
index 41bf4bc34cc665..1e3e6320d2ace3 100644
--- a/packages/block-editor/src/components/list-view/leaf.js
+++ b/packages/block-editor/src/components/list-view/leaf.js
@@ -2,12 +2,14 @@
  * External dependencies
  */
 import { animated } from '@react-spring/web';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,33 +18,43 @@ import useMovingAnimation from '../use-moving-animation';
 
 const AnimatedTreeGridRow = animated( TreeGridRow );
 
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
+const ListViewLeaf = forwardRef(
+	(
+		{
+			isDragged,
+			isSelected,
+			position,
+			level,
+			rowCount,
+			children,
+			className,
+			path,
+			...props
+		},
+		ref
+	) => {
+		const animationRef = useMovingAnimation( {
+			clientId: props[ 'data-block' ],
+			enableAnimation: true,
+			triggerAnimationOnChange: path,
+		} );
 
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames( 'block-editor-list-view-leaf', className ) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}
+		const mergedRef = useMergeRefs( [ ref, animationRef ] );
+
+		return (
+			<AnimatedTreeGridRow
+				ref={ mergedRef }
+				className={ clsx( 'block-editor-list-view-leaf', className ) }
+				level={ level }
+				positionInSet={ position }
+				setSize={ rowCount }
+				isExpanded={ undefined }
+				{ ...props }
+			>
+				{ children }
+			</AnimatedTreeGridRow>
+		);
+	}
+);
+
+export default ListViewLeaf;
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 9c30798830dae3..2916622efabee9 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -7,13 +7,61 @@
 	// Move upwards when in modal.
 	.components-modal__content & {
 		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
-		width: calc(100% + #{ $grid-unit-15 });
+		width: calc(100% + #{$grid-unit-15});
+	}
+
+	// Without setting `pointer-events: none`, when dragging over list view items,
+	// Safari calls onDropZoneLeave causing flickering in the position of the drop indicator.
+	// https://bugs.webkit.org/show_bug.cgi?id=66547
+	// See: https://github.com/WordPress/gutenberg/pull/56625
+	&.is-dragging tbody {
+		pointer-events: none;
 	}
 }
 
 .block-editor-list-view-leaf {
 	// Use position relative for row animation.
 	position: relative;
+	// Set the initial translate position to ensure the UI in Safari doesn't jump
+	// when rows later receive the is-displacement-up or is-displacement-down class.
+	transform: translateY(0);
+
+	&.is-draggable,
+	&.is-draggable .block-editor-list-view-block-contents {
+		cursor: grab;
+	}
+
+	.block-editor-list-view-block-select-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: inherit;
+		}
+
+		// Ensure that on hover, the admin color is still used.
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		svg {
+			fill: currentColor;
+			// Optimizate for high contrast modes.
+			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+			@media (forced-colors: active) {
+				fill: CanvasText;
+			}
+		}
+	}
+
+	&:not(.is-selected) .block-editor-list-view-block-select-button {
+		// While components are being dragged, ensure that hover styles are not applied.
+		// This resolves a bug where while dragging, the hover styles would be applied to
+		// the wrong list item while scrolling long lists, particularly in Chrome.
+		.is-dragging-components-draggable & {
+			&:hover {
+				color: inherit;
+			}
+		}
+	}
 
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
@@ -22,111 +70,170 @@
 	&.is-selected.is-synced td {
 		background: var(--wp-block-synced-color);
 	}
-	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
-		color: var(--wp-block-synced-color);
+	&.is-synced:not(.is-selected) .block-editor-list-view-block-contents {
+		&:hover,
+		&:focus,
+		.block-editor-block-icon {
+			color: var(--wp-block-synced-color);
+		}
+
+		&:focus::after {
+			box-shadow:
+				inset 0 0 0 1px $white,
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
+		}
 	}
 	&.is-selected .block-editor-list-view-block-contents,
 	&.is-selected .components-button.has-icon {
 		color: $white;
 	}
-	&.is-selected .block-editor-list-view-block-contents {
-		// Hide selection styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			background: none;
-			color: $gray-900;
-		}
-	}
 	&.is-selected .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 		}
 	}
 	&.is-selected.is-synced .block-editor-list-view-block-contents:focus {
 		&::after {
 			box-shadow:
 				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-block-synced-color);
 		}
 	}
 	&.is-selected .block-editor-list-view-block__menu:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
-	&.is-dragging {
-		display: none;
-	}
-
 	// Border radius for corners of the selected item.
 	&.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
 	}
 	&.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
+		border-top-right-radius: $radius-small;
 	}
 	&.is-last-selected td:first-child {
-		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-left-radius: $radius-small;
 	}
 	&.is-last-selected td:last-child {
-		border-bottom-right-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-small;
 	}
 	&.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
-	&.is-synced-branch:not(.is-selected) {
+	&.is-synced-branch.is-branch-selected {
 		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 	}
 	&.is-branch-selected.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
+		border-top-left-radius: $radius-small;
 	}
 	&.is-branch-selected.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
+		border-top-right-radius: $radius-small;
 	}
-	&[aria-expanded="false"] {
+	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
-			border-top-left-radius: $radius-block-ui;
+			border-top-left-radius: $radius-small;
 		}
 		&.is-branch-selected.is-first-selected td:last-child {
-			border-top-right-radius: $radius-block-ui;
+			border-top-right-radius: $radius-small;
 		}
 		&.is-branch-selected.is-last-selected td:first-child {
-			border-bottom-left-radius: $radius-block-ui;
+			border-bottom-left-radius: $radius-small;
 		}
 		&.is-branch-selected.is-last-selected td:last-child {
-			border-bottom-right-radius: $radius-block-ui;
+			border-bottom-right-radius: $radius-small;
 		}
 	}
 	&.is-branch-selected:not(.is-selected) td {
 		border-radius: 0;
 	}
 
+	// List view items will be displaced up or down relative to their original position
+	// when a user is dragging a block within the list view. This creates a space for a
+	// visual indicator of where the block will be placed when dropped. The `normal` state
+	// is used to allow rows to smoothly transition back into their original position,
+	// without attaching the transition to the list view leaf itself. This prevents rows
+	// from animating too much once the user has dropped the block.
+	&.is-displacement-normal {
+		transition: transform 0.2s;
+		transform: translateY(0);
+		@include reduce-motion("transition");
+	}
+
+	&.is-displacement-up {
+		transition: transform 0.2s;
+		transform: translateY(-32px);
+		@include reduce-motion("transition");
+	}
+
+	&.is-displacement-down {
+		transition: transform 0.2s;
+		transform: translateY(32px);
+		@include reduce-motion("transition");
+	}
+
+	// Collapse multi-selections down into a single row space while dragging. The following
+	// rules ensure that during a multi-selection, the space for additional blocks is factored in
+	// when displacing up and down. The result is that there should only ever be a single row's
+	// worth of space for the visual indicator of where a block will be placed when dropped.
+	&.is-after-dragged-blocks {
+		transition: transform 0.2s;
+		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
+		@include reduce-motion("transition");
+	}
+
+	&.is-after-dragged-blocks.is-displacement-up {
+		transition: transform 0.2s;
+		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
+		@include reduce-motion("transition");
+	}
 
-	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
+	&.is-after-dragged-blocks.is-displacement-down {
+		transition: transform 0.2s;
+		transform:
+			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
+			-1));
+		@include reduce-motion("transition");
+	}
+
+	// To ensure displaced rows behave correctly, ensure that blocks that are currently being dragged
+	// are visually hidden. The below rules are used in favor of `display: none` to ensure that
+	// there is no flicker when a user begins to drag a block.
+	&.is-dragging {
+		opacity: 0;
+		// The row's left position is set to 0 to ensure that the animation
+		// when dropping a block animates from the correct position.
+		left: 0;
+		// Ensure the dragged element does not otherwise affect dropping to
+		// other positions.
+		pointer-events: none;
+		z-index: -9999;
+	}
+
+	// List View renders a fixed number of items and relies on each item having a fixed height of 32px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
 		width: 100%;
-		height: auto;
+		height: $grid-unit-40;
 		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
-		color: $gray-900;
-		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
-
-		&.is-dropping-before::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			top: -2px;
-			right: 0;
-			left: 0;
-			border-top: 4px solid var(--wp-admin-theme-color);
-		}
+		border-radius: 2px;
+		box-sizing: border-box;
+		color: inherit;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 400;
+		margin: 0;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
 
 		.components-modal__content & {
 			padding-left: 0;
@@ -134,6 +241,7 @@
 		}
 	}
 
+	&.is-nesting .block-editor-list-view-block-contents,
 	.block-editor-list-view-block-contents:focus {
 		box-shadow: none;
 
@@ -145,14 +253,11 @@
 			bottom: 0;
 			left: 0;
 			border-radius: inherit;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
 			z-index: 2;
 			pointer-events: none;
-
-			// Hide focus styles while a user is dragging blocks/files etc.
-			.is-dragging-components-draggable & {
-				box-shadow: none;
-			}
 		}
 	}
 
@@ -161,32 +266,28 @@
 		right: 0;
 	}
 
+	&.is-nesting .block-editor-list-view__menu,
 	.block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		z-index: 1;
-
-		// Hide focus styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			box-shadow: none;
-		}
 	}
 
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
-		@include edit-post__fade-in-animation;
+		@include animation__fade-in;
 	}
 
 	.block-editor-block-icon {
-		align-self: flex-start;
-		margin-right: $grid-unit-10;
-		width: $icon-size;
+		margin-right: $grid-unit-10 * 0.5; // 6px.
+		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell,
 	.block-editor-list-view-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
+		padding: 0;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -194,28 +295,24 @@
 		line-height: 0;
 		width: $button-size;
 		vertical-align: middle;
-		@include reduce-motion("transition");
 
 		> * {
 			opacity: 0;
 		}
 
-		// Show on hover, visible, and show above to keep the hit area size.
+		// Show on hover, visible, when focused, and show above to keep the hit area size.
 		&:hover,
+		&:focus-within,
 		&.is-visible {
-			position: relative;
-			z-index: 1;
-
 			> * {
 				opacity: 1;
-				@include edit-post__fade-in-animation;
 			}
 		}
 
 		&,
 		.components-button.has-icon {
-			width: 24px;
-			min-width: 24px;
+			width: $button-size-small;
+			min-width: $button-size-small;
 			padding: 0;
 		}
 	}
@@ -284,8 +381,10 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
+	// Style lock and position icons in line with image previews.
+	.block-editor-list-view-block-select-button__label-wrapper svg {
+		left: $grid-unit-05 * 0.5; // 2px.
+		position: relative;
 	}
 
 	.block-editor-list-view-block-select-button__title {
@@ -310,7 +409,7 @@
 		right: 0;
 		transform: translateY(-50%);
 		background: rgba($black, 0.1);
-		border-radius: $radius-block-ui;
+		border-radius: $radius-x-small;
 		padding: 2px 6px;
 		max-width: 100%;
 		box-sizing: border-box;
@@ -320,19 +419,43 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock {
+	.block-editor-list-view-block-select-button__lock,
+	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
-		width: 24px;
-		min-width: 24px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
+	}
+
+	.block-editor-list-view-block-select-button__images {
+		display: flex;
+	}
+
+	.block-editor-list-view-block-select-button__image {
+		background-size: cover;
+		width: 18px;
+		height: 18px;
+		border-radius: $radius-x-small;
+
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-small $white;
+		}
+
+		&:not(:first-child) {
+			margin-left: #{$grid-unit-15 * -0.5};
+		}
+	}
+
+	&.is-selected .block-editor-list-view-block-select-button__image {
+		&:not(:only-child) {
+			box-shadow: 0 0 0 $radius-small var(--wp-admin-theme-color);
+		}
 	}
 }
 
-.block-editor-list-view-block-select-button__description,
-.block-editor-list-view-appender__description {
-	display: none;
+// First level of indentation is aria-level 2, max indent is 8.
+// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
+$block-navigation-max-indent: 8;
+
+.block-editor-list-view-draggable-chip {
+	opacity: 0.8;
 }
 
 .block-editor-list-view-block__contents-cell,
@@ -346,30 +469,24 @@
 // Chevron container metrics.
 .block-editor-list-view__expander {
 	height: $icon-size;
-	margin-left: $grid-unit-05;
 	width: $icon-size;
+	cursor: pointer;
 }
 
-// First level of indentation is aria-level 2, max indent is 8.
-// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
-$block-navigation-max-indent: 8;
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
-}
-
-.block-editor-list-view-leaf:not([aria-level="1"]) {
-	.block-editor-list-view__expander {
-		margin-right: 4px;
-	}
+	margin-left: ($grid-unit-30 * $block-navigation-max-indent);
 }
 
+// When updating the margin for each indentation level, the corresponding
+// indentation in `use-list-view-drop-zone.js` must be updated as well
+// to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
-	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
+	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
+	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
+			margin-left: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
+		} @else {
+			margin-left: 0;
 		}
 	}
 }
@@ -379,7 +496,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -387,7 +506,9 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"]
+.block-editor-list-view__expander
+svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;
@@ -399,13 +520,53 @@ $block-navigation-max-indent: 8;
 
 	.block-editor-list-view-drop-indicator__line {
 		background: var(--wp-admin-theme-color);
-		height: $border-width;
+		height: 4px;
+		border-radius: 4px;
+	}
+}
+
+.block-editor-list-view-drop-indicator--preview {
+	pointer-events: none;
+
+	// If the drop indicator's popover ever extends to the edge of the screen,
+	// avoid any scrollbars by hiding the overflow.
+	.components-popover__content {
+		overflow: hidden !important;
+	}
+
+	.block-editor-list-view-drop-indicator__line {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		height: 32px;
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.block-editor-list-view-drop-indicator__line--darker {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
 	}
 }
 
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
-	height: 36px;
+	height: 32px;
+}
+
+.list-view-appender .block-editor-inserter__toggle {
+	background-color: #1e1e1e;
+	color: #fff;
+	margin: $grid-unit-10 0 0 24px;
+	height: 24px;
+	min-width: 24px;
+	padding: 0;
+
+	&:hover,
+	&:focus {
+		background: var(--wp-admin-theme-color);
+		color: #fff;
+	}
 }
 
+.list-view-appender__description {
+	display: none;
+}
diff --git a/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js
new file mode 100644
index 00000000000000..f1180a9fa27ca1
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/test/use-list-view-drop-zone.js
@@ -0,0 +1,400 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getListViewDropTarget,
+	NESTING_LEVEL_INDENTATION,
+} from '../use-list-view-drop-zone';
+
+describe( 'getListViewDropTarget', () => {
+	const blocksData = [
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-1',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 50,
+					bottom: 100,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 50,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 1,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: '',
+			nestingLevel: 1,
+		},
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-2',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 100,
+					bottom: 150,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 100,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 1,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: 'block-1',
+			nestingLevel: 2,
+		},
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-3',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 150,
+					bottom: 200,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 150,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: 'block-2',
+			nestingLevel: 3,
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-4',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 200,
+					bottom: 250,
+					left: 10,
+					right: 300,
+					x: 10,
+					y: 200,
+					width: 290,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: false,
+			rootClientId: '',
+			nestingLevel: 1,
+		},
+	];
+
+	it( 'should return the correct target when dragging a block over the top half of the first block', () => {
+		[
+			{ position: { x: 50, y: 70 }, rtl: false },
+			{ position: { x: 250, y: 70 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				clientId: 'block-1',
+				dropPosition: 'top',
+				rootClientId: '',
+			} );
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the bottom half of an expanded block', () => {
+		[
+			{ position: { x: 50, y: 90 }, rtl: false },
+			{ position: { x: 250, y: 90 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				clientId: 'block-1',
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the right side of the bottom half of a block nested to three levels', () => {
+		[
+			{ position: { x: 250, y: 180 }, rtl: false },
+			{ position: { x: 50, y: 180 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				clientId: 'block-3',
+				dropPosition: 'inside',
+				rootClientId: 'block-3',
+			} );
+		} );
+	} );
+
+	it( 'should drag below when positioned at the bottom half of a block nested to three levels, and over the third level horizontally', () => {
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION * 3, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION * 3, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: 'block-2',
+			} );
+		} );
+	} );
+
+	it( 'should drag one level up when positioned at the bottom half of a block nested to three levels, and over the second level horizontally', () => {
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION * 2, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION * 2, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: 'block-1',
+			} );
+		} );
+	} );
+
+	it( 'should drag two levels up below when positioned at the bottom half of a block nested to three levels, and over the first level horizontally', () => {
+		[
+			{
+				position: { x: 10 + NESTING_LEVEL_INDENTATION, y: 180 },
+				rtl: false,
+			},
+			{
+				position: { x: 300 - NESTING_LEVEL_INDENTATION, y: 180 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( blocksData, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-3',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
+		} );
+	} );
+
+	it( 'should nest and append to end when dragging a block over the right side and bottom half of a collapsed block with children', () => {
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		[
+			{
+				position: { x: 250, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 50, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
+		} );
+	} );
+
+	it( 'should nest and prepend when dragging a block over the right side and bottom half of an expanded block with children', () => {
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be expanded.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: true,
+		};
+
+		[
+			{
+				position: { x: 250, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 50, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 0,
+				clientId: 'block-1',
+				dropPosition: 'inside',
+				rootClientId: 'block-1',
+			} );
+		} );
+	} );
+
+	it( 'should drag below when dragging a block over the left side and bottom half of a collapsed block with children', () => {
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		[
+			{
+				position: { x: 30, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 270, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				collapsedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
+		} );
+	} );
+
+	it( 'should drag below when attempting to nest but the dragged block is not allowed as a child', () => {
+		const childNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a child.
+		childNotAllowedBlockData[ 0 ] = {
+			...childNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsChild: false,
+		};
+
+		[
+			{
+				position: { x: 70, y: 90 },
+				rtl: false,
+			},
+			{
+				position: { x: 230, y: 90 },
+				rtl: true,
+			},
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget(
+				childNotAllowedBlockData,
+				position,
+				rtl
+			);
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
+		} );
+	} );
+
+	it( 'should return undefined when the dragged block cannot be inserted as a sibling', () => {
+		const position = { x: 50, y: 70 };
+
+		const siblingNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a sibling.
+		siblingNotAllowedBlockData[ 0 ] = {
+			...siblingNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsSibling: false,
+		};
+
+		const target = getListViewDropTarget(
+			siblingNotAllowedBlockData,
+			position
+		);
+
+		expect( target ).toBeUndefined();
+	} );
+
+	it( 'should move below, and not nest when dragging lower than the bottom-most block', () => {
+		const singleBlock = [ { ...blocksData[ 0 ], innerBlockCount: 0 } ];
+
+		// This position is to the right of the block, but below the bottom of the block.
+		// This should result in the block being moved below the bottom-most block, and
+		// not being treated as a nesting gesture.
+		[
+			{ position: { x: 160, y: 250 }, rtl: false },
+			{ position: { x: 140, y: 250 }, rtl: true },
+		].forEach( ( { position, rtl } ) => {
+			const target = getListViewDropTarget( singleBlock, position, rtl );
+
+			expect( target ).toEqual( {
+				blockIndex: 1,
+				clientId: 'block-1',
+				dropPosition: 'bottom',
+				rootClientId: '',
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/list-view/test/utils.js b/packages/block-editor/src/components/list-view/test/utils.js
index 78d78a9d90069c..d603d9ef1bb8b4 100644
--- a/packages/block-editor/src/components/list-view/test/utils.js
+++ b/packages/block-editor/src/components/list-view/test/utils.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getCommonDepthClientIds } from '../utils';
+import { getCommonDepthClientIds, getDragDisplacementValues } from '../utils';
 
 describe( 'getCommonDepthClientIds', () => {
 	it( 'should return start and end when no depth is provided', () => {
@@ -48,3 +48,220 @@ describe( 'getCommonDepthClientIds', () => {
 		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
 	} );
 } );
+
+describe( 'getDragDisplacementValues', () => {
+	const blockIndexes = {
+		'block-a': 0,
+		'block-b': 1,
+		'block-c': 2,
+		'block-d': 3,
+		'block-e': 4,
+		'block-f': 5,
+		'block-g': 6,
+		'block-h': 7,
+	};
+
+	it( 'should return displacement of normal when block is after dragged block and drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of up when block is after dragged block and before the drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 7,
+			blockDropPosition: 'bottom',
+			clientId: 'block-d',
+			firstDraggedBlockIndex: 2,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'up',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of down when block is before dragged block and after the drop target', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'bottom',
+			clientId: 'block-d',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return isNesting of true when block is just before the drop target and drop position is inside', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'inside',
+			clientId: 'block-a',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: true,
+		} );
+	} );
+
+	it( 'should return isNesting of false when block is not just before the drop target and drop position is inside', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 1,
+			blockDropPosition: 'inside',
+			clientId: 'block-b',
+			firstDraggedBlockIndex: 6,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of up when drop target index is null and block is after dragged block', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'up',
+			isAfterDraggedBlocks: true,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when drop target index is null and block is before dragged block', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-c',
+			firstDraggedBlockIndex: 5,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when dragging a file (no dragged block) and the block is before the target index', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-b',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of down when dragging a file (no dragged block) and the block is after the target index', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'down',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return displacement of normal when dragging a file (no dragged block) and dragging outside the list view (drop target of null)', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: null,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: 'normal',
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return undefined displacement if the target index is undefined', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: undefined,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: undefined,
+			isDragged: false,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: undefined,
+			isAfterDraggedBlocks: false,
+			isNesting: false,
+		} );
+	} );
+
+	it( 'should return all undefined values if the block is dragged', () => {
+		const result = getDragDisplacementValues( {
+			blockIndexes,
+			blockDropTargetIndex: 3,
+			blockDropPosition: 'bottom',
+			clientId: 'block-h',
+			firstDraggedBlockIndex: 7,
+			isDragged: true,
+		} );
+
+		expect( result ).toEqual( {
+			displacement: undefined,
+			isAfterDraggedBlocks: undefined,
+			isNesting: undefined,
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/list-view/use-block-selection.js b/packages/block-editor/src/components/list-view/use-block-selection.js
index 59aaaeacb01d40..134cc9d4369ac7 100644
--- a/packages/block-editor/src/components/list-view/use-block-selection.js
+++ b/packages/block-editor/src/components/list-view/use-block-selection.js
@@ -5,7 +5,7 @@ import { speak } from '@wordpress/a11y';
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { UP, DOWN, HOME, END } from '@wordpress/keycodes';
+import { UP, DOWN, HOME, END, ESCAPE } from '@wordpress/keycodes';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -21,7 +21,6 @@ export default function useBlockSelection() {
 		getBlockName,
 		getBlockParents,
 		getBlockSelectionStart,
-		getBlockSelectionEnd,
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		hasSelectedBlock,
@@ -30,9 +29,9 @@ export default function useBlockSelection() {
 	const { getBlockType } = useSelect( blocksStore );
 
 	const updateBlockSelection = useCallback(
-		async ( event, clientId, destinationClientId ) => {
-			if ( ! event?.shiftKey ) {
-				selectBlock( clientId );
+		async ( event, clientId, destinationClientId, focusPosition ) => {
+			if ( ! event?.shiftKey && event?.keyCode !== ESCAPE ) {
+				selectBlock( clientId, focusPosition );
 				return;
 			}
 
@@ -40,6 +39,8 @@ export default function useBlockSelection() {
 			// the browser default behavior of opening the link in a new window.
 			event.preventDefault();
 
+			const isOnlyDeselection =
+				event.type === 'keydown' && event.keyCode === ESCAPE;
 			const isKeyPress =
 				event.type === 'keydown' &&
 				( event.keyCode === UP ||
@@ -64,10 +65,11 @@ export default function useBlockSelection() {
 			];
 
 			if (
-				isKeyPress &&
-				! selectedBlocks.some( ( blockId ) =>
-					clientIdWithParents.includes( blockId )
-				)
+				isOnlyDeselection ||
+				( isKeyPress &&
+					! selectedBlocks.some( ( blockId ) =>
+						clientIdWithParents.includes( blockId )
+					) )
 			) {
 				// Ensure that shift-selecting blocks via the keyboard only
 				// expands the current selection if focusing over already
@@ -76,35 +78,38 @@ export default function useBlockSelection() {
 				await clearSelectedBlock();
 			}
 
-			let startTarget = getBlockSelectionStart();
-			let endTarget = clientId;
-
-			// Handle keyboard behavior for selecting multiple blocks.
-			if ( isKeyPress ) {
-				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
-					// Set the starting point of the selection to the currently
-					// focused block, if there are no blocks currently selected.
-					// This ensures that as the selection is expanded or contracted,
-					// the starting point of the selection is anchored to that block.
-					startTarget = clientId;
+			// Update selection, if not only clearing the selection.
+			if ( ! isOnlyDeselection ) {
+				let startTarget = getBlockSelectionStart();
+				let endTarget = clientId;
+
+				// Handle keyboard behavior for selecting multiple blocks.
+				if ( isKeyPress ) {
+					if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
+						// Set the starting point of the selection to the currently
+						// focused block, if there are no blocks currently selected.
+						// This ensures that as the selection is expanded or contracted,
+						// the starting point of the selection is anchored to that block.
+						startTarget = clientId;
+					}
+					if ( destinationClientId ) {
+						// If the user presses UP or DOWN, we want to ensure that the block they're
+						// moving to is the target for selection, and not the currently focused one.
+						endTarget = destinationClientId;
+					}
 				}
-				if ( destinationClientId ) {
-					// If the user presses UP or DOWN, we want to ensure that the block they're
-					// moving to is the target for selection, and not the currently focused one.
-					endTarget = destinationClientId;
-				}
-			}
 
-			const startParents = getBlockParents( startTarget );
-			const endParents = getBlockParents( endTarget );
+				const startParents = getBlockParents( startTarget );
+				const endParents = getBlockParents( endTarget );
 
-			const { start, end } = getCommonDepthClientIds(
-				startTarget,
-				endTarget,
-				startParents,
-				endParents
-			);
-			await multiSelect( start, end, null );
+				const { start, end } = getCommonDepthClientIds(
+					startTarget,
+					endTarget,
+					startParents,
+					endParents
+				);
+				await multiSelect( start, end, null );
+			}
 
 			// Announce deselected block, or number of deselected blocks if
 			// the total number of blocks deselected is greater than one.
@@ -145,7 +150,7 @@ export default function useBlockSelection() {
 			}
 
 			if ( label ) {
-				speak( label );
+				speak( label, 'assertive' );
 			}
 		},
 		[
@@ -154,7 +159,6 @@ export default function useBlockSelection() {
 			getBlockType,
 			getBlockParents,
 			getBlockSelectionStart,
-			getBlockSelectionEnd,
 			getSelectedBlockClientIds,
 			hasMultiSelection,
 			hasSelectedBlock,
diff --git a/packages/block-editor/src/components/list-view/use-clipboard-handler.js b/packages/block-editor/src/components/list-view/use-clipboard-handler.js
new file mode 100644
index 00000000000000..e7c3026e70f090
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/use-clipboard-handler.js
@@ -0,0 +1,195 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+import { focusListItem } from './utils';
+import { getPasteBlocks, setClipboardBlocks } from '../writing-flow/utils';
+
+// This hook borrows from useClipboardHandler in ../writing-flow/use-clipboard-handler.js
+// and adds behaviour for the list view, while skipping partial selection.
+export default function useClipboardHandler( { selectBlock } ) {
+	const registry = useRegistry();
+	const {
+		getBlockOrder,
+		getBlockRootClientId,
+		getBlocksByClientId,
+		getPreviousBlockClientId,
+		getSelectedBlockClientIds,
+		getSettings,
+		canInsertBlockType,
+		canRemoveBlocks,
+	} = useSelect( blockEditorStore );
+	const { flashBlock, removeBlocks, replaceBlocks, insertBlocks } =
+		useDispatch( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
+
+	return useRefEffect( ( node ) => {
+		function updateFocusAndSelection( focusClientId, shouldSelectBlock ) {
+			if ( shouldSelectBlock ) {
+				selectBlock( undefined, focusClientId, null, null );
+			}
+
+			focusListItem( focusClientId, node );
+		}
+
+		// Determine which blocks to update:
+		// If the current (focused) block is part of the block selection, use the whole selection.
+		// If the focused block is not part of the block selection, only update the focused block.
+		function getBlocksToUpdate( clientId ) {
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const isUpdatingSelectedBlocks =
+				selectedBlockClientIds.includes( clientId );
+			const firstBlockClientId = isUpdatingSelectedBlocks
+				? selectedBlockClientIds[ 0 ]
+				: clientId;
+			const firstBlockRootClientId =
+				getBlockRootClientId( firstBlockClientId );
+
+			const blocksToUpdate = isUpdatingSelectedBlocks
+				? selectedBlockClientIds
+				: [ clientId ];
+
+			return {
+				blocksToUpdate,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				originallySelectedBlockClientIds: selectedBlockClientIds,
+			};
+		}
+
+		function handler( event ) {
+			if ( event.defaultPrevented ) {
+				// This was possibly already handled in rich-text/use-paste-handler.js.
+				return;
+			}
+
+			// Only handle events that occur within the list view.
+			if ( ! node.contains( event.target.ownerDocument.activeElement ) ) {
+				return;
+			}
+
+			// Retrieve the block clientId associated with the focused list view row.
+			// This enables applying copy / cut / paste behavior to the focused block,
+			// rather than just the blocks that are currently selected.
+			const listViewRow =
+				event.target.ownerDocument.activeElement?.closest(
+					'[role=row]'
+				);
+			const clientId = listViewRow?.dataset?.block;
+			if ( ! clientId ) {
+				return;
+			}
+
+			const {
+				blocksToUpdate: selectedBlockClientIds,
+				firstBlockClientId,
+				firstBlockRootClientId,
+				originallySelectedBlockClientIds,
+			} = getBlocksToUpdate( clientId );
+
+			if ( selectedBlockClientIds.length === 0 ) {
+				return;
+			}
+
+			event.preventDefault();
+
+			if ( event.type === 'copy' || event.type === 'cut' ) {
+				if ( selectedBlockClientIds.length === 1 ) {
+					flashBlock( selectedBlockClientIds[ 0 ] );
+				}
+
+				notifyCopy( event.type, selectedBlockClientIds );
+				const blocks = getBlocksByClientId( selectedBlockClientIds );
+				setClipboardBlocks( event, blocks, registry );
+			}
+
+			if ( event.type === 'cut' ) {
+				// Don't update the selection if the blocks cannot be deleted.
+				if ( ! canRemoveBlocks( selectedBlockClientIds ) ) {
+					return;
+				}
+
+				let blockToFocus =
+					getPreviousBlockClientId( firstBlockClientId ) ??
+					// If the previous block is not found (when the first block is deleted),
+					// fallback to focus the parent block.
+					firstBlockRootClientId;
+
+				// Remove blocks, but don't update selection, and it will be handled below.
+				removeBlocks( selectedBlockClientIds, false );
+
+				// Update the selection if the original selection has been removed.
+				const shouldUpdateSelection =
+					originallySelectedBlockClientIds.length > 0 &&
+					getSelectedBlockClientIds().length === 0;
+
+				// If there's no previous block nor parent block, focus the first block.
+				if ( ! blockToFocus ) {
+					blockToFocus = getBlockOrder()[ 0 ];
+				}
+
+				updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+			} else if ( event.type === 'paste' ) {
+				const {
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
+				} = getSettings();
+				const blocks = getPasteBlocks(
+					event,
+					canUserUseUnfilteredHTML
+				);
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					const [ selectedBlockClientId ] = selectedBlockClientIds;
+
+					// If a single block is focused, and the blocks to be posted can
+					// be inserted within the block, then append the pasted blocks
+					// within the focused block. For example, if you have copied a paragraph
+					// block and paste it within a single Group block, this will append
+					// the paragraph block within the Group block.
+					if (
+						blocks.every( ( block ) =>
+							canInsertBlockType(
+								block.name,
+								selectedBlockClientId
+							)
+						)
+					) {
+						insertBlocks(
+							blocks,
+							undefined,
+							selectedBlockClientId
+						);
+						updateFocusAndSelection( blocks[ 0 ]?.clientId, false );
+						return;
+					}
+				}
+
+				replaceBlocks(
+					selectedBlockClientIds,
+					blocks,
+					blocks.length - 1,
+					-1
+				);
+				updateFocusAndSelection( blocks[ 0 ]?.clientId, false );
+			}
+		}
+
+		node.ownerDocument.addEventListener( 'copy', handler );
+		node.ownerDocument.addEventListener( 'cut', handler );
+		node.ownerDocument.addEventListener( 'paste', handler );
+
+		return () => {
+			node.ownerDocument.removeEventListener( 'copy', handler );
+			node.ownerDocument.removeEventListener( 'cut', handler );
+			node.ownerDocument.removeEventListener( 'paste', handler );
+		};
+	}, [] );
+}
diff --git a/packages/block-editor/src/components/list-view/use-list-view-block-indexes.js b/packages/block-editor/src/components/list-view/use-list-view-block-indexes.js
new file mode 100644
index 00000000000000..5890e366d7ce9a
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/use-list-view-block-indexes.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+export default function useListViewBlockIndexes( blocks ) {
+	const blockIndexes = useMemo( () => {
+		const indexes = {};
+
+		let currentGlobalIndex = 0;
+
+		const traverseBlocks = ( blockList ) => {
+			blockList.forEach( ( block ) => {
+				indexes[ block.clientId ] = currentGlobalIndex;
+				currentGlobalIndex++;
+
+				if ( block.innerBlocks.length > 0 ) {
+					traverseBlocks( block.innerBlocks );
+				}
+			} );
+		};
+
+		traverseBlocks( blocks );
+
+		return indexes;
+	}, [ blocks ] );
+
+	return blockIndexes;
+}
diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
index 5dafa765f16ea5..8a1ccfcede4c12 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js
@@ -8,22 +8,24 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function useListViewClientIds( blocks ) {
+export default function useListViewClientIds( { blocks, rootClientId } ) {
 	return useSelect(
 		( select ) => {
 			const {
 				getDraggedBlockClientIds,
 				getSelectedBlockClientIds,
-				__unstableGetClientIdsTree,
-			} = select( blockEditorStore );
+				getEnabledClientIdsTree,
+			} = unlock( select( blockEditorStore ) );
 
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
+				clientIdsTree:
+					blocks ?? getEnabledClientIdsTree( rootClientId ),
 			};
 		},
-		[ blocks ]
+		[ blocks, rootClientId ]
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/use-list-view-collapse-items.js b/packages/block-editor/src/components/list-view/use-list-view-collapse-items.js
new file mode 100644
index 00000000000000..930c6424c3b0be
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/use-list-view-collapse-items.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function useListViewCollapseItems( { collapseAll, expand } ) {
+	const { expandedBlock, getBlockParents } = useSelect( ( select ) => {
+		const { getBlockParents: _getBlockParents, getExpandedBlock } = unlock(
+			select( blockEditorStore )
+		);
+		return {
+			expandedBlock: getExpandedBlock(),
+			getBlockParents: _getBlockParents,
+		};
+	}, [] );
+
+	// Collapse all but the specified block when the expanded block client Id changes.
+	useEffect( () => {
+		if ( expandedBlock ) {
+			const blockParents = getBlockParents( expandedBlock, false );
+			// Collapse all blocks and expand the block's parents.
+			collapseAll();
+			expand( blockParents );
+		}
+	}, [ collapseAll, expand, expandedBlock, getBlockParents ] );
+}
diff --git a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
index 346631667c2544..64730be6156df9 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
@@ -2,11 +2,13 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
+	usePrevious,
 } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,19 +29,26 @@ import { store as blockEditorStore } from '../../store';
  */
 
 /**
- * An array representing data for blocks in the DOM used by drag and drop.
+ * An object representing data for blocks in the DOM used by drag and drop.
  *
- * @typedef {Object} WPListViewDropZoneBlocks
+ * @typedef {Object} WPListViewDropZoneBlock
  * @property {string}  clientId                        The client id for the block.
  * @property {string}  rootClientId                    The root client id for the block.
  * @property {number}  blockIndex                      The block's index.
  * @property {Element} element                         The DOM element representing the block.
  * @property {number}  innerBlockCount                 The number of inner blocks the block has.
  * @property {boolean} isDraggedBlock                  Whether the block is currently being dragged.
+ * @property {boolean} isExpanded                      Whether the block is expanded in the UI.
  * @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
  * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
  */
 
+/**
+ * An array representing data for blocks in the DOM used by drag and drop.
+ *
+ * @typedef {WPListViewDropZoneBlock[]} WPListViewDropZoneBlocks
+ */
+
 /**
  * An object containing details of a drop target.
  *
@@ -51,19 +60,135 @@ import { store as blockEditorStore } from '../../store';
  *                                                  'inside' refers to nesting as an inner block.
  */
 
+// When the indentation level, the corresponding left margin in `style.scss`
+// must be updated as well to ensure the drop zone is aligned with the indentation.
+export const NESTING_LEVEL_INDENTATION = 24;
+
+/**
+ * Determines whether the user is positioning the dragged block to be
+ * moved up to a parent level.
+ *
+ * Determined based on nesting level indentation of the current block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
+ * @return {boolean} Whether the gesture is an upward gesture.
+ */
+function isUpGesture( point, rect, nestingLevel = 1, rtl = false ) {
+	// If the block is nested, and the user is dragging to the bottom
+	// left of the block (or bottom right in RTL languages), then it is an upward gesture.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+	return rtl ? point.x > blockIndentPosition : point.x < blockIndentPosition;
+}
+
+/**
+ * Returns how many nesting levels up the user is attempting to drag to.
+ *
+ * The relative parent level is calculated based on how far
+ * the cursor is from the provided nesting level (e.g. of a candidate block
+ * that the user is hovering over). The nesting level is considered "desired"
+ * because it is not guaranteed that the user will be able to drag to the desired level.
+ *
+ * The returned integer can be used to access an ascending array
+ * of parent blocks, where the first item is the block the user
+ * is hovering over, and the last item is the root block.
+ *
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
+ * @return {number} The desired relative parent level.
+ */
+function getDesiredRelativeParentLevel(
+	point,
+	rect,
+	nestingLevel = 1,
+	rtl = false
+) {
+	// In RTL languages, the block indent position is from the right edge of the block.
+	// In LTR languages, the block indent position is from the left edge of the block.
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const distanceBetweenPointAndBlockIndentPosition = rtl
+		? blockIndentPosition - point.x
+		: point.x - blockIndentPosition;
+
+	const desiredParentLevel = Math.round(
+		distanceBetweenPointAndBlockIndentPosition / NESTING_LEVEL_INDENTATION
+	);
+
+	return Math.abs( desiredParentLevel );
+}
+
+/**
+ * Returns an array of the parent blocks of the block the user is dropping to.
+ *
+ * @param {WPListViewDropZoneBlock}  candidateBlockData The block the user is dropping to.
+ * @param {WPListViewDropZoneBlocks} blocksData         Data about the blocks in list view.
+ * @return {WPListViewDropZoneBlocks} An array of block parents, including the block the user is dropping to.
+ */
+function getCandidateBlockParents( candidateBlockData, blocksData ) {
+	const candidateBlockParents = [];
+	let currentBlockData = candidateBlockData;
+
+	while ( currentBlockData ) {
+		candidateBlockParents.push( { ...currentBlockData } );
+		currentBlockData = blocksData.find(
+			( blockData ) =>
+				blockData.clientId === currentBlockData.rootClientId
+		);
+	}
+
+	return candidateBlockParents;
+}
+
+/**
+ * Given a list of blocks data and a block index, return the next non-dragged
+ * block. This is used to determine the block that the user is dropping to,
+ * while ignoring the dragged block.
+ *
+ * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
+ * @param {number}                   index      The index to begin searching from.
+ * @return {WPListViewDropZoneBlock | undefined} The next non-dragged block.
+ */
+function getNextNonDraggedBlock( blocksData, index ) {
+	const nextBlockData = blocksData[ index + 1 ];
+	if ( nextBlockData && nextBlockData.isDraggedBlock ) {
+		return getNextNonDraggedBlock( blocksData, index + 1 );
+	}
+
+	return nextBlockData;
+}
+
 /**
  * Determines whether the user positioning the dragged block to nest as an
  * inner block.
  *
- * Presently this is determined by whether the cursor is on the right hand side
- * of the block.
+ * Determined based on nesting level indentation of the current block, plus
+ * the indentation of the next level of nesting. The vertical position of the
+ * cursor must also be within the block.
  *
- * @param {WPPoint} point The point representing the cursor position when dragging.
- * @param {DOMRect} rect  The rectangle.
+ * @param {WPPoint} point        The point representing the cursor position when dragging.
+ * @param {DOMRect} rect         The rectangle.
+ * @param {number}  nestingLevel The nesting level of the block.
+ * @param {boolean} rtl          Whether the editor is in RTL mode.
  */
-function isNestingGesture( point, rect ) {
-	const blockCenterX = rect.left + rect.width / 2;
-	return point.x > blockCenterX;
+function isNestingGesture( point, rect, nestingLevel = 1, rtl = false ) {
+	const blockIndentPosition = rtl
+		? rect.right - nestingLevel * NESTING_LEVEL_INDENTATION
+		: rect.left + nestingLevel * NESTING_LEVEL_INDENTATION;
+
+	const isNestingHorizontalGesture = rtl
+		? point.x < blockIndentPosition - NESTING_LEVEL_INDENTATION
+		: point.x > blockIndentPosition + NESTING_LEVEL_INDENTATION;
+
+	return isNestingHorizontalGesture && point.y < rect.bottom;
 }
 
 // Block navigation is always a vertical list, so only allow dropping
@@ -75,16 +200,19 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  *
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
+ * @param {boolean}                  rtl        Whether the editor is in RTL mode.
  *
- * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
+ * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
-function getListViewDropTarget( blocksData, position ) {
+export function getListViewDropTarget( blocksData, position, rtl = false ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
 	let candidateRect;
+	let candidateBlockIndex;
 
-	for ( const blockData of blocksData ) {
+	for ( let i = 0; i < blocksData.length; i++ ) {
+		const blockData = blocksData[ i ];
 		if ( blockData.isDraggedBlock ) {
 			continue;
 		}
@@ -120,10 +248,12 @@ function getListViewDropTarget( blocksData, position ) {
 				candidateEdge = 'bottom';
 				candidateRect =
 					previousBlockData.element.getBoundingClientRect();
+				candidateBlockIndex = index - 1;
 			} else {
 				candidateBlockData = blockData;
 				candidateEdge = edge;
 				candidateRect = rect;
+				candidateBlockIndex = index;
 			}
 
 			// If the mouse position is within the block, break early
@@ -142,25 +272,117 @@ function getListViewDropTarget( blocksData, position ) {
 		return;
 	}
 
+	const candidateBlockParents = getCandidateBlockParents(
+		candidateBlockData,
+		blocksData
+	);
+
 	const isDraggingBelow = candidateEdge === 'bottom';
 
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, this should always be treated
+	// If the block already has inner blocks, and is expanded, this should be treated
 	// as nesting since the next block in the tree will be the first child.
+	// However, if the block is collapsed, dragging beneath the block should
+	// still be allowed, as the next visible block in the tree will be a sibling.
 	if (
 		isDraggingBelow &&
 		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( candidateBlockData.innerBlockCount > 0 ||
-			isNestingGesture( position, candidateRect ) )
+		( ( candidateBlockData.innerBlockCount > 0 &&
+			candidateBlockData.isExpanded ) ||
+			isNestingGesture(
+				position,
+				candidateRect,
+				candidateBlockParents.length,
+				rtl
+			) )
 	) {
+		// If the block is expanded, insert the block as the first child.
+		// Otherwise, for collapsed blocks, insert the block as the last child.
+		const newBlockIndex = candidateBlockData.isExpanded
+			? 0
+			: candidateBlockData.innerBlockCount || 0;
+
 		return {
 			rootClientId: candidateBlockData.clientId,
-			blockIndex: 0,
+			clientId: candidateBlockData.clientId,
+			blockIndex: newBlockIndex,
 			dropPosition: 'inside',
 		};
 	}
 
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to move the block to be at a parent level.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.rootClientId &&
+		isUpGesture(
+			position,
+			candidateRect,
+			candidateBlockParents.length,
+			rtl
+		)
+	) {
+		const nextBlock = getNextNonDraggedBlock(
+			blocksData,
+			candidateBlockIndex
+		);
+		const currentLevel = candidateBlockData.nestingLevel;
+		const nextLevel = nextBlock ? nextBlock.nestingLevel : 1;
+
+		if ( currentLevel && nextLevel ) {
+			// Determine the desired relative level of the block to be dropped.
+			const desiredRelativeLevel = getDesiredRelativeParentLevel(
+				position,
+				candidateRect,
+				candidateBlockParents.length,
+				rtl
+			);
+
+			const targetParentIndex = Math.max(
+				Math.min( desiredRelativeLevel, currentLevel - nextLevel ),
+				0
+			);
+
+			if ( candidateBlockParents[ targetParentIndex ] ) {
+				// Default to the block index of the candidate block.
+				let newBlockIndex = candidateBlockData.blockIndex;
+
+				// If the next block is at the same level, use that as the default
+				// block index. This ensures that the block is dropped in the correct
+				// position when dragging to the bottom of a block.
+				if (
+					candidateBlockParents[ targetParentIndex ].nestingLevel ===
+					nextBlock?.nestingLevel
+				) {
+					newBlockIndex = nextBlock?.blockIndex;
+				} else {
+					// Otherwise, search from the current block index back
+					// to find the last block index within the same target parent.
+					for ( let i = candidateBlockIndex; i >= 0; i-- ) {
+						const blockData = blocksData[ i ];
+						if (
+							blockData.rootClientId ===
+							candidateBlockParents[ targetParentIndex ]
+								.rootClientId
+						) {
+							newBlockIndex = blockData.blockIndex + 1;
+							break;
+						}
+					}
+				}
+
+				return {
+					rootClientId:
+						candidateBlockParents[ targetParentIndex ].rootClientId,
+					clientId: candidateBlockData.clientId,
+					blockIndex: newBlockIndex,
+					dropPosition: candidateEdge,
+				};
+			}
+		}
+	}
+
 	// If dropping as a sibling, but block cannot be inserted in
 	// this context, return early.
 	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
@@ -176,12 +398,30 @@ function getListViewDropTarget( blocksData, position ) {
 	};
 }
 
+// Throttle options need to be defined outside of the hook to avoid
+// re-creating the object on every render. This is due to a limitation
+// of the `useThrottle` hook, where the options object is included
+// in the dependency array for memoization.
+const EXPAND_THROTTLE_OPTIONS = {
+	leading: false, // Don't call the function immediately on the first call.
+	trailing: true, // Do call the function on the last call.
+};
+
 /**
  * A react hook for implementing a drop zone in list view.
  *
+ * @param {Object}       props                    Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement]  Optional element to be used as the drop zone.
+ * @param {Object}       [props.expandedState]    The expanded state of the blocks in the list view.
+ * @param {Function}     [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
+ *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone() {
+export default function useListViewDropZone( {
+	dropZoneElement,
+	expandedState,
+	setExpandedState,
+} ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -195,6 +435,57 @@ export default function useListViewDropZone() {
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
 
+	const rtl = isRTL();
+
+	const previousRootClientId = usePrevious( targetRootClientId );
+
+	const maybeExpandBlock = useCallback(
+		( _expandedState, _target ) => {
+			// If the user is attempting to drop a block inside a collapsed block,
+			// that is, using a nesting gesture flagged by 'inside' dropPosition,
+			// expand the block within the list view, if it isn't already.
+			const { rootClientId } = _target || {};
+			if ( ! rootClientId ) {
+				return;
+			}
+			if (
+				_target?.dropPosition === 'inside' &&
+				! _expandedState[ rootClientId ]
+			) {
+				setExpandedState( {
+					type: 'expand',
+					clientIds: [ rootClientId ],
+				} );
+			}
+		},
+		[ setExpandedState ]
+	);
+
+	// Throttle the maybeExpandBlock function to avoid expanding the block
+	// too quickly when the user is dragging over the block. This is to
+	// avoid expanding the block when the user is just passing over it.
+	const throttledMaybeExpandBlock = useThrottle(
+		maybeExpandBlock,
+		500,
+		EXPAND_THROTTLE_OPTIONS
+	);
+
+	useEffect( () => {
+		if (
+			target?.dropPosition !== 'inside' ||
+			previousRootClientId !== target?.rootClientId
+		) {
+			throttledMaybeExpandBlock.cancel();
+			return;
+		}
+		throttledMaybeExpandBlock( expandedState, target );
+	}, [
+		expandedState,
+		previousRootClientId,
+		target,
+		throttledMaybeExpandBlock,
+	] );
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -208,16 +499,25 @@ export default function useListViewDropZone() {
 
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
+					const isExpanded = blockElement.dataset.expanded === 'true';
+					const isDraggedBlock =
+						blockElement.classList.contains( 'is-dragging' );
+
+					// Get nesting level from `aria-level` attribute because Firefox does not support `element.ariaLevel`.
+					const nestingLevel = parseInt(
+						blockElement.getAttribute( 'aria-level' ),
+						10
+					);
 					const rootClientId = getBlockRootClientId( clientId );
 
 					return {
 						clientId,
+						isExpanded,
 						rootClientId,
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
+						nestingLevel: nestingLevel || undefined,
+						isDraggedBlock: isBlockDrag ? isDraggedBlock : false,
 						innerBlockCount: getBlockCount( clientId ),
 						canInsertDraggedBlocksAsSibling: isBlockDrag
 							? canInsertBlocks(
@@ -231,19 +531,47 @@ export default function useListViewDropZone() {
 					};
 				} );
 
-				const newTarget = getListViewDropTarget( blocksData, position );
+				const newTarget = getListViewDropTarget(
+					blocksData,
+					position,
+					rtl
+				);
 
 				if ( newTarget ) {
 					setTarget( newTarget );
 				}
 			},
-			[ draggedBlockClientIds ]
+			[
+				canInsertBlocks,
+				draggedBlockClientIds,
+				getBlockCount,
+				getBlockIndex,
+				getBlockRootClientId,
+				rtl,
+			]
 		),
-		200
+		50
 	);
 
 	const ref = useDropZone( {
-		onDrop: onBlockDrop,
+		dropZoneElement,
+		onDrop( event ) {
+			throttled.cancel();
+			if ( target ) {
+				onBlockDrop( event );
+			}
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
+		},
+		onDragLeave() {
+			throttled.cancel();
+			// Use `null` value to indicate that the drop target is not valid,
+			// but that the drag is still active. This allows for styling rules
+			// that are active only when a user drags outside of the list view.
+			setTarget( null );
+		},
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
 			// handled, so get it now and pass it to the thottled function.
@@ -252,7 +580,10 @@ export default function useListViewDropZone() {
 		},
 		onDragEnd() {
 			throttled.cancel();
-			setTarget( null );
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
 		},
 	} );
 
diff --git a/packages/block-editor/src/components/list-view/use-list-view-expand-selected-item.js b/packages/block-editor/src/components/list-view/use-list-view-expand-selected-item.js
index 09b5e09e4713a3..f84419dc1db933 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-expand-selected-item.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-expand-selected-item.js
@@ -27,12 +27,6 @@ export default function useListViewExpandSelectedItem( {
 		[ firstSelectedBlockClientId ]
 	);
 
-	const parentClientIds =
-		Array.isArray( selectedBlockParentClientIds ) &&
-		selectedBlockParentClientIds.length
-			? selectedBlockParentClientIds
-			: null;
-
 	// Expand tree when a block is selected.
 	useEffect( () => {
 		// If the selectedTreeId is the same as the selected block,
@@ -42,7 +36,7 @@ export default function useListViewExpandSelectedItem( {
 		}
 
 		// If the selected block has parents, get the top-level parent.
-		if ( parentClientIds ) {
+		if ( selectedBlockParentClientIds?.length ) {
 			// If the selected block has parents,
 			// expand the tree branch.
 			setExpandedState( {
@@ -50,7 +44,12 @@ export default function useListViewExpandSelectedItem( {
 				clientIds: selectedBlockParentClientIds,
 			} );
 		}
-	}, [ firstSelectedBlockClientId ] );
+	}, [
+		firstSelectedBlockClientId,
+		selectedBlockParentClientIds,
+		selectedTreeId,
+		setExpandedState,
+	] );
 
 	return {
 		setSelectedTreeId,
diff --git a/packages/block-editor/src/components/list-view/use-list-view-images.js b/packages/block-editor/src/components/list-view/use-list-view-images.js
new file mode 100644
index 00000000000000..97633349b6b028
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/use-list-view-images.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Maximum number of images to display in a list view row.
+const MAX_IMAGES = 3;
+
+function getImage( block ) {
+	if ( block.name !== 'core/image' ) {
+		return;
+	}
+
+	if ( block.attributes?.url ) {
+		return {
+			url: block.attributes.url,
+			alt: block.attributes.alt,
+			clientId: block.clientId,
+		};
+	}
+}
+
+function getImagesFromGallery( block ) {
+	if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
+		return [];
+	}
+
+	const images = [];
+
+	for ( const innerBlock of block.innerBlocks ) {
+		const img = getImage( innerBlock );
+		if ( img ) {
+			images.push( img );
+		}
+		if ( images.length >= MAX_IMAGES ) {
+			return images;
+		}
+	}
+
+	return images;
+}
+
+function getImagesFromBlock( block, isExpanded ) {
+	const img = getImage( block );
+	if ( img ) {
+		return [ img ];
+	}
+	return isExpanded ? [] : getImagesFromGallery( block );
+}
+
+/**
+ * Get a block's preview images for display within a list view row.
+ *
+ * TODO: Currently only supports images from the core/image and core/gallery
+ * blocks. This should be expanded to support other blocks that have images,
+ * potentially via an API that blocks can opt into / provide their own logic.
+ *
+ * @param {Object}  props            Hook properties.
+ * @param {string}  props.clientId   The block's clientId.
+ * @param {boolean} props.isExpanded Whether or not the block is expanded in the list view.
+ * @return {Array} Images.
+ */
+export default function useListViewImages( { clientId, isExpanded } ) {
+	const { block } = useSelect(
+		( select ) => {
+			const _block = select( blockEditorStore ).getBlock( clientId );
+			return { block: _block };
+		},
+		[ clientId ]
+	);
+
+	const images = useMemo( () => {
+		return getImagesFromBlock( block, isExpanded );
+	}, [ block, isExpanded ] );
+
+	return images;
+}
diff --git a/packages/block-editor/src/components/list-view/use-list-view-scroll-into-view.js b/packages/block-editor/src/components/list-view/use-list-view-scroll-into-view.js
new file mode 100644
index 00000000000000..bee9c3b87a729a
--- /dev/null
+++ b/packages/block-editor/src/components/list-view/use-list-view-scroll-into-view.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { getScrollContainer } from '@wordpress/dom';
+import { useLayoutEffect } from '@wordpress/element';
+
+export default function useListViewScrollIntoView( {
+	isSelected,
+	selectedClientIds,
+	rowItemRef,
+} ) {
+	const isSingleSelection = selectedClientIds.length === 1;
+
+	useLayoutEffect( () => {
+		// Skip scrolling into view if this particular block isn't selected,
+		// or if more than one block is selected overall. This is to avoid
+		// scrolling the view in a multi selection where the user has intentionally
+		// selected multiple blocks within the list view, but the initially
+		// selected block may be out of view.
+		if ( ! isSelected || ! isSingleSelection || ! rowItemRef.current ) {
+			return;
+		}
+
+		const scrollContainer = getScrollContainer( rowItemRef.current );
+		const { ownerDocument } = rowItemRef.current;
+
+		const windowScroll =
+			scrollContainer === ownerDocument.body ||
+			scrollContainer === ownerDocument.documentElement;
+
+		// If the there is no scroll container, of if the scroll container is the window,
+		// do not scroll into view, as the block is already in view.
+		if ( windowScroll || ! scrollContainer ) {
+			return;
+		}
+
+		const rowRect = rowItemRef.current.getBoundingClientRect();
+		const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+		// If the selected block is not currently visible, scroll to it.
+		if (
+			rowRect.top < scrollContainerRect.top ||
+			rowRect.bottom > scrollContainerRect.bottom
+		) {
+			rowItemRef.current.scrollIntoView();
+		}
+	}, [ isSelected, isSingleSelection, rowItemRef ] );
+}
diff --git a/packages/block-editor/src/components/list-view/utils.js b/packages/block-editor/src/components/list-view/utils.js
index f53f5a4cd4884a..2b8454924c5135 100644
--- a/packages/block-editor/src/components/list-view/utils.js
+++ b/packages/block-editor/src/components/list-view/utils.js
@@ -2,16 +2,31 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 
 export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 	sprintf(
 		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
-		__( 'Block %1$d of %2$d, Level %3$d' ),
+		__( 'Block %1$d of %2$d, Level %3$d.' ),
 		position,
 		siblingCount,
 		level
 	);
 
+export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
+	[
+		blockInformation?.positionLabel
+			? `${ sprintf(
+					// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
+					__( 'Position: %s' ),
+					blockInformation.positionLabel
+			  ) }.`
+			: undefined,
+		isLocked ? __( 'This block is locked.' ) : undefined,
+	]
+		.filter( Boolean )
+		.join( ' ' );
+
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,
  * or false otherwise.
@@ -56,3 +71,157 @@ export function getCommonDepthClientIds(
 		end,
 	};
 }
+
+/**
+ * Shift focus to the list view item associated with a particular clientId.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {string}       focusClientId   The client ID of the block to focus.
+ * @param {?HTMLElement} treeGridElement The container element to search within.
+ */
+export function focusListItem( focusClientId, treeGridElement ) {
+	const getFocusElement = () => {
+		const row = treeGridElement?.querySelector(
+			`[role=row][data-block="${ focusClientId }"]`
+		);
+		if ( ! row ) {
+			return null;
+		}
+		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+		return focus.focusable.find( row )[ 0 ];
+	};
+
+	let focusElement = getFocusElement();
+	if ( focusElement ) {
+		focusElement.focus();
+	} else {
+		// The element hasn't been painted yet. Defer focusing on the next frame.
+		// This could happen when all blocks have been deleted and the default block
+		// hasn't been added to the editor yet.
+		window.requestAnimationFrame( () => {
+			focusElement = getFocusElement();
+
+			// Ignore if the element still doesn't exist.
+			if ( focusElement ) {
+				focusElement.focus();
+			}
+		} );
+	}
+}
+
+/**
+ * Get values for the block that flag whether the block should be displaced up or down,
+ * whether the block is being nested, and whether the block appears after the dragged
+ * blocks. These values are used to determine the class names to apply to the block.
+ * The list view rows are displaced visually via CSS rules. Displacement rules:
+ * - `normal`: no displacement — used to apply a translateY of `0` so that the block
+ *  appears in its original position, and moves to that position smoothly when dragging
+ *  outside of the list view area.
+ * - `up`: the block should be displaced up, creating room beneath the block for the drop indicator.
+ * - `down`: the block should be displaced down, creating room above the block for the drop indicator.
+ *
+ * @param {Object}                props
+ * @param {Object}                props.blockIndexes           The indexes of all the blocks in the list view, keyed by clientId.
+ * @param {number|null|undefined} props.blockDropTargetIndex   The index of the block that the user is dropping to.
+ * @param {?string}               props.blockDropPosition      The position relative to the block that the user is dropping to.
+ * @param {string}                props.clientId               The client id for the current block.
+ * @param {?number}               props.firstDraggedBlockIndex The index of the first dragged block.
+ * @param {?boolean}              props.isDragged              Whether the current block is being dragged. Dragged blocks skip displacement.
+ * @return {Object} An object containing the `displacement`, `isAfterDraggedBlocks` and `isNesting` values.
+ */
+export function getDragDisplacementValues( {
+	blockIndexes,
+	blockDropTargetIndex,
+	blockDropPosition,
+	clientId,
+	firstDraggedBlockIndex,
+	isDragged,
+} ) {
+	let displacement;
+	let isNesting;
+	let isAfterDraggedBlocks;
+
+	if ( ! isDragged ) {
+		isNesting = false;
+		const thisBlockIndex = blockIndexes[ clientId ];
+		isAfterDraggedBlocks = thisBlockIndex > firstDraggedBlockIndex;
+
+		// Determine where to displace the position of the current block, relative
+		// to the blocks being dragged (in their original position) and the drop target
+		// (the position where a user is currently dragging the blocks to).
+		if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// If the block is being dragged and there is a valid drop target,
+			// determine if the block being rendered should be displaced up or down.
+
+			if ( thisBlockIndex !== undefined ) {
+				if (
+					thisBlockIndex >= firstDraggedBlockIndex &&
+					thisBlockIndex < blockDropTargetIndex
+				) {
+					// If the current block appears after the set of dragged blocks
+					// (in their original position), but is before the drop target,
+					// then the current block should be displaced up.
+					displacement = 'up';
+				} else if (
+					thisBlockIndex < firstDraggedBlockIndex &&
+					thisBlockIndex >= blockDropTargetIndex
+				) {
+					// If the current block appears before the set of dragged blocks
+					// (in their original position), but is after the drop target,
+					// then the current block should be displaced down.
+					displacement = 'down';
+				} else {
+					displacement = 'normal';
+				}
+				isNesting =
+					typeof blockDropTargetIndex === 'number' &&
+					blockDropTargetIndex - 1 === thisBlockIndex &&
+					blockDropPosition === 'inside';
+			}
+		} else if (
+			blockDropTargetIndex === null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// A `null` value for `blockDropTargetIndex` indicates that the
+			// drop target is outside of the valid areas within the list view.
+			// In this case, the drag is still active, but as there is no
+			// valid drop target, we should remove the gap indicating where
+			// the block would be inserted.
+			if (
+				thisBlockIndex !== undefined &&
+				thisBlockIndex >= firstDraggedBlockIndex
+			) {
+				displacement = 'up';
+			} else {
+				displacement = 'normal';
+			}
+		} else if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex === undefined
+		) {
+			// If the blockdrop target is defined, but there are no dragged blocks,
+			// then the block should be displaced relative to the drop target.
+			if ( thisBlockIndex !== undefined ) {
+				if ( thisBlockIndex < blockDropTargetIndex ) {
+					displacement = 'normal';
+				} else {
+					displacement = 'down';
+				}
+			}
+		} else if ( blockDropTargetIndex === null ) {
+			displacement = 'normal';
+		}
+	}
+
+	return {
+		displacement,
+		isNesting,
+		isAfterDraggedBlocks,
+	};
+}
diff --git a/packages/block-editor/src/components/media-placeholder/README.md b/packages/block-editor/src/components/media-placeholder/README.md
index 8c26484ead115a..68fcf150c4edc4 100644
--- a/packages/block-editor/src/components/media-placeholder/README.md
+++ b/packages/block-editor/src/components/media-placeholder/README.md
@@ -98,9 +98,9 @@ The `disableDropZone` prop still takes precedence over `dropZoneUIOnly` – spec
 
 ### icon
 
-Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `WPComponent` such as `BlockIcon`to render instead.
+Icon to display left of the title. When passed as a `String`, the icon will be resolved as a [Dashicon](https://developer.wordpress.org/resource/dashicons/). Alternatively, you can pass in a `Component` such as `BlockIcon`to render instead.
 
--   Type: `String|WPComponent`
+-   Type: `String|Component`
 -   Required: No
 -   Platform: Web | Mobile
 
@@ -133,9 +133,9 @@ An object that can contain a `title` and `instructions` properties. These proper
 
 ### multiple
 
-Whether to allow multiple selection of files or not.
+Whether to allow multiple selection of files or not. This property will also accept a string with the value `add` to allow multiple selection of files without the need to use the `Shift` or `Ctrl`/`Cmd` keys.
 
--   Type: `Boolean`
+-   Type: `Boolean|String`
 -   Required: No
 -   Default: `false`
 -   Platform: Web
@@ -198,9 +198,9 @@ Callback called when urls can be configured. No media insertion from url will be
 
 ### handleUpload
 
-When set to false the handling of the upload is left to the calling component.
+When the value is set to `false` or returned as `false`, the handling of the upload is left to the consumer component. The function signature accepts an array containing the files to be uploaded.
 
--   Type: `Boolean`
+-   Type: `Boolean|Function`
 -   Required: No
 -   Default: `true`
 -   Platform: Web
@@ -216,7 +216,7 @@ Replace implementation of the placeholder:
 ```js
 function replaceMediaPlaceholder() {
 	return function () {
-		return wp.element.createElement(
+		return React.createElement(
 			'div',
 			{},
 			'The replacement contents or components.'
diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
new file mode 100644
index 00000000000000..2f7bb2e673f12e
--- /dev/null
+++ b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -0,0 +1,21 @@
+.block-editor-media-placeholder__url-input-form {
+	min-width: 260px;
+
+	@include break-small() {
+		width: 300px;
+	}
+}
+
+.block-editor-media-placeholder__cancel-button.is-link {
+	margin: 1em;
+	display: block;
+}
+
+.block-editor-media-placeholder.is-appender {
+	min-height: 0;
+
+	&:hover {
+		cursor: pointer;
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+	}
+}
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index a969940745eea0..0cbc6c8c26203f 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,12 +11,15 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -25,33 +28,92 @@ import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
+import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
-const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
-	<URLPopover onClose={ onClose }>
+const InsertFromURLPopover = ( {
+	src,
+	onChange,
+	onSubmit,
+	onClose,
+	popoverAnchor,
+} ) => (
+	<URLPopover anchor={ popoverAnchor } onClose={ onClose }>
 		<form
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
-			<input
-				className="block-editor-media-placeholder__url-input-field"
-				type="text"
-				aria-label={ __( 'URL' ) }
+			<InputControl
+				__next40pxDefaultSize
+				label={ __( 'URL' ) }
+				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
 				value={ src }
-			/>
-			<Button
-				className="block-editor-media-placeholder__url-input-submit-button"
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
+				suffix={
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							size="small"
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</InputControlSuffixWrapper>
+				}
 			/>
 		</form>
 	</URLPopover>
 );
 
+const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
+
+	const openURLInput = () => {
+		setIsURLInputVisible( true );
+	};
+	const closeURLInput = () => {
+		setIsURLInputVisible( false );
+		popoverAnchor?.focus();
+	};
+
+	const onSubmitSrc = ( event ) => {
+		event.preventDefault();
+		if ( src && onSelectURL ) {
+			onSelectURL( src );
+			closeURLInput();
+		}
+	};
+
+	return (
+		<div className="block-editor-media-placeholder__url-input-container">
+			<Button
+				__next40pxDefaultSize
+				className="block-editor-media-placeholder__button"
+				onClick={ openURLInput }
+				isPressed={ isURLInputVisible }
+				variant="secondary"
+				aria-haspopup="dialog"
+				ref={ setPopoverAnchor }
+			>
+				{ __( 'Insert from URL' ) }
+			</Button>
+			{ isURLInputVisible && (
+				<InsertFromURLPopover
+					src={ src }
+					onChange={ onChangeSrc }
+					onSubmit={ onSubmitSrc }
+					onClose={ closeURLInput }
+					popoverAnchor={ popoverAnchor }
+				/>
+			) }
+		</div>
+	);
+};
+
 export function MediaPlaceholder( {
 	value = {},
 	allowedTypes,
@@ -74,18 +136,24 @@ export function MediaPlaceholder( {
 	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
-	onHTMLDrop = noop,
+	onHTMLDrop: deprecatedOnHTMLDrop,
 	children,
 	mediaLibraryButton,
 	placeholder,
 	style,
 } ) {
+	if ( deprecatedOnHTMLDrop ) {
+		deprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {
+			since: '6.2',
+			version: '6.4',
+		} );
+	}
+
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
 	}, [] );
 	const [ src, setSrc ] = useState( '' );
-	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
 
 	useEffect( () => {
 		setSrc( value?.src ?? '' );
@@ -102,27 +170,11 @@ export function MediaPlaceholder( {
 		);
 	};
 
-	const onChangeSrc = ( event ) => {
-		setSrc( event.target.value );
-	};
-
-	const openURLInput = () => {
-		setIsURLInputVisible( true );
-	};
-	const closeURLInput = () => {
-		setIsURLInputVisible( false );
-	};
-
-	const onSubmitSrc = ( event ) => {
-		event.preventDefault();
-		if ( src && onSelectURL ) {
-			onSelectURL( src );
-			closeURLInput();
-		}
-	};
-
 	const onFilesUpload = ( files ) => {
-		if ( ! handleUpload ) {
+		if (
+			! handleUpload ||
+			( typeof handleUpload === 'function' && ! handleUpload( files ) )
+		) {
 			return onSelect( files );
 		}
 		onFilesPreUpload( files );
@@ -177,6 +229,54 @@ export function MediaPlaceholder( {
 		} );
 	};
 
+	async function handleBlocksDrop( event ) {
+		const { blocks } = parseDropEvent( event );
+
+		if ( ! blocks?.length ) {
+			return;
+		}
+
+		const uploadedMediaList = await Promise.all(
+			blocks.map( ( block ) => {
+				const blockType = block.name.split( '/' )[ 1 ];
+				if ( block.attributes.id ) {
+					block.attributes.type = blockType;
+					return block.attributes;
+				}
+				return new Promise( ( resolve, reject ) => {
+					window
+						.fetch( block.attributes.url )
+						.then( ( response ) => response.blob() )
+						.then( ( blob ) =>
+							mediaUpload( {
+								filesList: [ blob ],
+								additionalData: {
+									title: block.attributes.title,
+									alt_text: block.attributes.alt,
+									caption: block.attributes.caption,
+									type: blockType,
+								},
+								onFileChange: ( [ media ] ) => {
+									if ( media.id ) {
+										resolve( media );
+									}
+								},
+								allowedTypes,
+								onError: reject,
+							} )
+						)
+						.catch( () => resolve( block.attributes.url ) );
+				} );
+			} )
+		).catch( ( err ) => onError( err ) );
+
+		if ( multiple ) {
+			onSelect( uploadedMediaList );
+		} else {
+			onSelect( uploadedMediaList[ 0 ] );
+		}
+	}
+
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};
@@ -201,20 +301,20 @@ export function MediaPlaceholder( {
 
 			if ( instructions === undefined && mediaUpload ) {
 				instructions = __(
-					'Upload a media file or pick one from your media library.'
+					'Drag and drop an image or video, upload, or choose from your library.'
 				);
 
 				if ( isAudio ) {
 					instructions = __(
-						'Upload an audio file, pick one from your media library, or add one with a URL.'
+						'Drag and drop an audio file, upload, or choose from your library.'
 					);
 				} else if ( isImage ) {
 					instructions = __(
-						'Upload an image file, pick one from your media library, or add one with a URL.'
+						'Drag and drop an image, upload, or choose from your library.'
 					);
 				} else if ( isVideo ) {
 					instructions = __(
-						'Upload a video file, pick one from your media library, or add one with a URL.'
+						'Drag and drop a video, upload, or choose from your library.'
 					);
 				}
 			}
@@ -232,7 +332,7 @@ export function MediaPlaceholder( {
 			}
 		}
 
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className,
 			{
@@ -264,7 +364,24 @@ export function MediaPlaceholder( {
 		}
 
 		return (
-			<DropZone onFilesDrop={ onFilesUpload } onHTMLDrop={ onHTMLDrop } />
+			<DropZone
+				onFilesDrop={ onFilesUpload }
+				onDrop={ handleBlocksDrop }
+				isEligible={ ( dataTransfer ) => {
+					const prefix = 'wp-block:core/';
+					const types = [];
+					for ( const type of dataTransfer.types ) {
+						if ( type.startsWith( prefix ) ) {
+							types.push( type.slice( prefix.length ) );
+						}
+					}
+					return (
+						types.every( ( type ) =>
+							allowedTypes.includes( type )
+						) && ( multiple ? true : types.length === 1 )
+					);
+				} }
+			/>
 		);
 	};
 
@@ -272,6 +389,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -286,24 +404,11 @@ export function MediaPlaceholder( {
 	const renderUrlSelectionUI = () => {
 		return (
 			onSelectURL && (
-				<div className="block-editor-media-placeholder__url-input-container">
-					<Button
-						className="block-editor-media-placeholder__button"
-						onClick={ openURLInput }
-						isPressed={ isURLInputVisible }
-						variant="tertiary"
-					>
-						{ __( 'Insert from URL' ) }
-					</Button>
-					{ isURLInputVisible && (
-						<InsertFromURLPopover
-							src={ src }
-							onChange={ onChangeSrc }
-							onSubmit={ onSubmitSrc }
-							onClose={ closeURLInput }
-						/>
-					) }
-				</div>
+				<URLSelectionUI
+					src={ src }
+					onChangeSrc={ setSrc }
+					onSelectURL={ onSelectURL }
+				/>
 			)
 		);
 	};
@@ -313,9 +418,10 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
-						variant="tertiary"
+						variant="secondary"
 					>
 						{ __( 'Use featured image' ) }
 					</Button>
@@ -328,7 +434,8 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					variant="tertiary"
+					__next40pxDefaultSize
+					variant="secondary"
 					onClick={ () => {
 						open();
 					} }
@@ -345,7 +452,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
-				mode={ 'browse' }
+				mode="browse"
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )
@@ -362,13 +469,14 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						onChange={ onUpload }
 						accept={ accept }
-						multiple={ multiple }
+						multiple={ !! multiple }
 						render={ ( { openFileDialog } ) => {
 							const content = (
 								<>
 									<Button
+										__next40pxDefaultSize
 										variant="primary"
-										className={ classnames(
+										className={ clsx(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
@@ -394,17 +502,23 @@ export function MediaPlaceholder( {
 				<>
 					{ renderDropZone() }
 					<FormFileUpload
-						variant="primary"
-						className={ classnames(
-							'block-editor-media-placeholder__button',
-							'block-editor-media-placeholder__upload-button'
+						render={ ( { openFileDialog } ) => (
+							<Button
+								__next40pxDefaultSize
+								onClick={ openFileDialog }
+								variant="primary"
+								className={ clsx(
+									'block-editor-media-placeholder__button',
+									'block-editor-media-placeholder__upload-button'
+								) }
+							>
+								{ __( 'Upload' ) }
+							</Button>
 						) }
 						onChange={ onUpload }
 						accept={ accept }
-						multiple={ multiple }
-					>
-						{ __( 'Upload' ) }
-					</FormFileUpload>
+						multiple={ !! multiple }
+					/>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
 					{ renderFeaturedImageToggle() }
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
index 25f6571fd80f3a..bbd9cbad73a4a1 100644
--- a/packages/block-editor/src/components/media-placeholder/index.native.js
+++ b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -1,26 +1,27 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MediaUpload,
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-} from '@wordpress/block-editor';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { cloneElement, useCallback, useRef } from '@wordpress/element';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { useBlockEditContext } from '../block-edit/context';
+import MediaUpload from '../media-upload';
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+} from '../media-upload/constants';
 
 const isMediaEqual = ( media1, media2 ) =>
 	media1.id === media2.id || media1.url === media2.url;
@@ -35,10 +36,13 @@ const dedupMedia = ( media ) =>
 		[]
 	);
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 function MediaPlaceholder( props ) {
 	const {
 		addToGallery,
 		allowedTypes = [],
+		className = '',
 		labels = {},
 		icon,
 		onSelect,
@@ -46,7 +50,6 @@ function MediaPlaceholder( props ) {
 		__experimentalOnlyMediaLibrary,
 		isAppender,
 		disableMediaButtons,
-		getStylesFromColorScheme,
 		multiple,
 		value = [],
 		children,
@@ -61,6 +64,16 @@ function MediaPlaceholder( props ) {
 	const mediaRef = useRef( value );
 	mediaRef.current = value;
 
+	const blockEditContext = useBlockEditContext();
+
+	const onButtonPress = useCallback(
+		( open ) => ( event ) => {
+			onFocus?.( event );
+			open();
+		},
+		[ onFocus ]
+	);
+
 	// Append and deduplicate media array for gallery use case.
 	const setMedia =
 		multiple && addToGallery
@@ -90,13 +103,13 @@ function MediaPlaceholder( props ) {
 	let instructions = labels.instructions;
 	if ( instructions === undefined ) {
 		if ( isImage ) {
-			instructions = __( 'ADD IMAGE' );
+			instructions = __( 'Add image' );
 		} else if ( isVideo ) {
-			instructions = __( 'ADD VIDEO' );
+			instructions = __( 'Add video' );
 		} else if ( isAudio ) {
-			instructions = __( 'ADD AUDIO' );
+			instructions = __( 'Add audio' );
 		} else {
-			instructions = __( 'ADD IMAGE OR VIDEO' );
+			instructions = __( 'Add image or video' );
 		}
 	}
 
@@ -109,55 +122,104 @@ function MediaPlaceholder( props ) {
 		accessibilityHint = __( 'Double tap to select an audio file' );
 	}
 
-	const emptyStateTitleStyle = getStylesFromColorScheme(
-		styles.emptyStateTitle,
-		styles.emptyStateTitleDark
+	const titleStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__header-title' ],
+		styles[ 'media-placeholder__header-title--dark' ]
 	);
-	const addMediaButtonStyle = getStylesFromColorScheme(
+	const addMediaButtonStyle = usePreferredColorSchemeStyle(
 		styles.addMediaButton,
 		styles.addMediaButtonDark
 	);
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__button' ],
+		styles[ 'media-placeholder__button--dark' ]
+	);
+	const emptyStateDescriptionStyles = usePreferredColorSchemeStyle(
+		styles.emptyStateDescription,
+		styles.emptyStateDescriptionDark
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__header-icon' ],
+		styles[ 'media-placeholder__header-icon--dark' ]
+	);
+	const placeholderIcon = cloneElement( icon, {
+		fill: iconStyles.fill,
+	} );
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for the media block empty state. %s: media type */
+		__( '%s block. Empty' ),
+		placeholderTitle
+	);
 
-	const renderContent = () => {
+	const renderContent = ( open ) => {
 		if ( isAppender === undefined || ! isAppender ) {
 			return (
 				<>
-					<View style={ styles.modalIcon }>{ icon }</View>
-					<Text style={ emptyStateTitleStyle }>
-						{ placeholderTitle }
-					</Text>
+					<View style={ styles[ 'media-placeholder__header' ] }>
+						<View style={ iconStyles }>{ placeholderIcon }</View>
+						<Text style={ titleStyles }>{ placeholderTitle }</Text>
+					</View>
 					{ children }
-					<Text style={ styles.emptyStateDescription }>
-						{ instructions }
-					</Text>
+					<TouchableOpacity
+						activeOpacity={ 0.5 }
+						accessibilityLabel={ accessibilityLabel }
+						style={ buttonStyles }
+						accessibilityRole="button"
+						accessibilityHint={ accessibilityHint }
+						hitSlop={ hitSlop }
+						onPress={ onButtonPress( open ) }
+					>
+						<Text style={ emptyStateDescriptionStyles }>
+							{ instructions }
+						</Text>
+					</TouchableOpacity>
 				</>
 			);
 		} else if ( isAppender && ! disableMediaButtons ) {
 			return (
-				<View testID="media-placeholder-appender-icon">
-					<Icon
-						icon={ plusCircleFilled }
-						style={ addMediaButtonStyle }
-						color={ addMediaButtonStyle.color }
-						size={ addMediaButtonStyle.size }
-					/>
-				</View>
+				<TouchableOpacity
+					activeOpacity={ 0.5 }
+					accessibilityLabel={ accessibilityLabel }
+					style={ styles[ 'media-placeholder__appender' ] }
+					accessibilityRole="button"
+					accessibilityHint={ accessibilityHint }
+					hitSlop={ hitSlop }
+					onPress={ onButtonPress( open ) }
+				>
+					<View testID="media-placeholder-appender-icon">
+						<Icon
+							icon={ plusCircleFilled }
+							style={ addMediaButtonStyle }
+							color={ addMediaButtonStyle.color }
+							size={ addMediaButtonStyle.size }
+						/>
+					</View>
+				</TouchableOpacity>
 			);
 		}
 	};
 
-	if ( isAppender && disableMediaButtons ) {
-		return null;
-	}
-
-	const appenderStyle = getStylesFromColorScheme(
+	const appenderStyle = usePreferredColorSchemeStyle(
 		styles.appender,
 		styles.appenderDark
 	);
-	const emptyStateContainerStyle = getStylesFromColorScheme(
-		styles.emptyStateContainer,
-		styles.emptyStateContainerDark
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'media-placeholder__container-selected' ],
+		styles[ 'media-placeholder__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'media-placeholder__container' ],
+			styles[ 'media-placeholder__container--dark' ]
+		),
+		blockEditContext?.isSelected &&
+			! className.includes( 'no-block-outline' ) &&
+			containerSelectedStyle,
+	];
+
+	if ( isAppender && disableMediaButtons ) {
+		return null;
+	}
 
 	return (
 		<View style={ { flex: 1 } }>
@@ -173,33 +235,19 @@ function MediaPlaceholder( props ) {
 				autoOpen={ autoOpenMediaUpload }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
-						<TouchableWithoutFeedback
-							accessibilityLabel={ sprintf(
-								/* translators: accessibility text for the media block empty state. %s: media type */
-								__( '%s block. Empty' ),
-								placeholderTitle
-							) }
-							accessibilityRole={ 'button' }
-							accessibilityHint={ accessibilityHint }
-							onPress={ ( event ) => {
-								onFocus?.( event );
-								open();
-							} }
+						<View
+							style={ [
+								[
+									containerStyle,
+									height && { height },
+									backgroundColor && { backgroundColor },
+								],
+								isAppender && appenderStyle,
+							] }
 						>
-							<View
-								style={ [
-									[
-										emptyStateContainerStyle,
-										height && { height },
-										backgroundColor && { backgroundColor },
-									],
-									isAppender && appenderStyle,
-								] }
-							>
-								{ getMediaOptions() }
-								{ ! hideContent && renderContent() }
-							</View>
-						</TouchableWithoutFeedback>
+							{ getMediaOptions() }
+							{ ! hideContent && renderContent( open ) }
+						</View>
 					);
 				} }
 			/>
@@ -207,4 +255,4 @@ function MediaPlaceholder( props ) {
 	);
 }
 
-export default withPreferredColorScheme( MediaPlaceholder );
+export default MediaPlaceholder;
diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
deleted file mode 100644
index e8eaa4bf43d94b..00000000000000
--- a/packages/block-editor/src/components/media-placeholder/style.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.block-editor-media-placeholder__url-input-container {
-	// Reset the margin to ensure the url popover is adjacent to the button.
-	.block-editor-media-placeholder__button {
-		margin-bottom: 0;
-	}
-}
-
-.block-editor-media-placeholder__url-input-form {
-	display: flex;
-
-	// Selector requires a lot of specificity to override base styles.
-	input[type="url"].block-editor-media-placeholder__url-input-field {
-		width: 100%;
-		min-width: 200px;
-
-		@include break-small() {
-			width: 300px;
-		}
-
-		flex-grow: 1;
-		border: none;
-		border-radius: 0;
-		margin: 2px;
-
-	}
-}
-
-.block-editor-media-placeholder__url-input-submit-button {
-	flex-shrink: 1;
-}
-
-.block-editor-media-placeholder__button {
-	margin-bottom: 0.5rem;
-}
-
-.block-editor-media-placeholder__cancel-button.is-link {
-	margin: 1em;
-	display: block;
-}
-
-.block-editor-media-placeholder.is-appender {
-	min-height: 0;
-
-	&:hover {
-		cursor: pointer;
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-}
diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss
index 708c2f07755e38..93b4dd945e044e 100644
--- a/packages/block-editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss
@@ -1,50 +1,63 @@
-.emptyStateContainer {
+.media-placeholder__container {
 	flex: 1;
 	height: 142;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
-.emptyStateContainerDark {
-	background-color: $background-dark-secondary;
+.media-placeholder__container--dark {
+	background-color: #1f1f1f; // $dark-dim
 }
 
-.emptyStateTitle {
-	text-align: center;
-	margin-top: 4;
-	margin-bottom: 16;
-	font-size: 14;
-	color: #2e4453;
+.media-placeholder__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
 }
 
-.emptyStateTitleDark {
-	color: $white;
+.media-placeholder__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .emptyStateDescription {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.emptyStateDescriptionDark {
+	color: $black;
 }
 
-.modalIcon {
+.media-placeholder__header-icon {
 	width: 24px;
 	height: 24px;
-	justify-content: center;
-	align-items: center;
-	fill: $gray-dark;
+	margin-right: $grid-unit;
+	fill: $light-secondary;
+}
+
+.media-placeholder__header-icon--dark {
+	fill: $dark-tertiary;
+}
+
+.media-placeholder__header-title {
+	text-align: center;
+	font-size: 16;
+	color: $light-secondary;
+}
+
+.media-placeholder__header-title--dark {
+	color: $dark-tertiary;
 }
 
 .appender {
@@ -71,3 +84,25 @@
 	color: $background-dark-secondary;
 	background-color: $gray-20;
 }
+
+.media-placeholder__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.media-placeholder__button--dark {
+	background-color: $dark-primary;
+}
+
+.media-placeholder__header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.media-placeholder__appender {
+	width: 100%;
+	align-items: center;
+}
diff --git a/packages/block-editor/src/components/media-replace-flow/README.md b/packages/block-editor/src/components/media-replace-flow/README.md
index 03b18cbf2b91dd..a5808ab9561980 100644
--- a/packages/block-editor/src/components/media-replace-flow/README.md
+++ b/packages/block-editor/src/components/media-replace-flow/README.md
@@ -65,10 +65,11 @@ Callback called when an upload error happens and receives an error message as an
 
 ### name
 
-The label of the replace button.
+A `string` value will be used as the label of the replace button. It can also accept `Phrasing content` elements(ex. `span`).
 
--   Type: `string`
+-   Type: `string|Element`
 -   Required: No
+-   Default: `Replace`
 
 ### createNotice
 
@@ -90,3 +91,10 @@ Removes a media replace notice.
 -   Required: No
 
 If passed, children are rendered inside the dropdown.
+
+### children
+
+-   Type: `Element | func`
+-   Required: No
+
+If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index a2fb5f36036aaa..0da15033a86bf0 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -11,7 +16,6 @@ import {
 	ToolbarButton,
 	Dropdown,
 	withFilters,
-	Tooltip,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -44,6 +48,7 @@ const MediaReplaceFlow = ( {
 	onError,
 	onSelect,
 	onSelectURL,
+	onReset,
 	onToggleFeaturedImage,
 	useFeaturedImage,
 	onFilesUpload = noop,
@@ -54,10 +59,12 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
+	popoverProps,
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
+	const canUpload = !! mediaUpload;
 	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
@@ -69,7 +76,7 @@ const MediaReplaceFlow = ( {
 		}
 		// We need to set a timeout for showing the notice
 		// so that VoiceOver and possibly other screen readers
-		// can announce the error afer the toolbar button
+		// can announce the error after the toolbar button
 		// regains focus once the upload dialog closes.
 		// Otherwise VO simply skips over the notice and announces
 		// the focused element and the open menu.
@@ -130,13 +137,9 @@ const MediaReplaceFlow = ( {
 
 	const gallery = multiple && onlyAllowsImages();
 
-	const POPOVER_PROPS = {
-		variant: 'toolbar',
-	};
-
 	return (
 		<Dropdown
-			popoverProps={ POPOVER_PROPS }
+			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarButton
@@ -152,7 +155,7 @@ const MediaReplaceFlow = ( {
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
-						<>
+						<MediaUploadCheck>
 							<MediaUpload
 								gallery={ gallery }
 								addToGallery={ addToGallery }
@@ -171,28 +174,26 @@ const MediaReplaceFlow = ( {
 									</MenuItem>
 								) }
 							/>
-							<MediaUploadCheck>
-								<FormFileUpload
-									onChange={ ( event ) => {
-										uploadFiles( event, onClose );
-									} }
-									accept={ accept }
-									multiple={ multiple }
-									render={ ( { openFileDialog } ) => {
-										return (
-											<MenuItem
-												icon={ upload }
-												onClick={ () => {
-													openFileDialog();
-												} }
-											>
-												{ __( 'Upload' ) }
-											</MenuItem>
-										);
-									} }
-								/>
-							</MediaUploadCheck>
-						</>
+							<FormFileUpload
+								onChange={ ( event ) => {
+									uploadFiles( event, onClose );
+								} }
+								accept={ accept }
+								multiple={ !! multiple }
+								render={ ( { openFileDialog } ) => {
+									return (
+										<MenuItem
+											icon={ upload }
+											onClick={ () => {
+												openFileDialog();
+											} }
+										>
+											{ __( 'Upload' ) }
+										</MenuItem>
+									);
+								} }
+							/>
+						</MediaUploadCheck>
 						{ onToggleFeaturedImage && (
 							<MenuItem
 								icon={ postFeaturedImage }
@@ -202,28 +203,44 @@ const MediaReplaceFlow = ( {
 								{ __( 'Use featured image' ) }
 							</MenuItem>
 						) }
-						{ children }
+						{ mediaURL && onReset && (
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+							>
+								{ __( 'Reset' ) }
+							</MenuItem>
+						) }
+						{ typeof children === 'function'
+							? children( { onClose } )
+							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-						<form className="block-editor-media-flow__url-input">
+						<form
+							className={ clsx(
+								'block-editor-media-flow__url-input',
+								{
+									'has-siblings':
+										canUpload || onToggleFeaturedImage,
+								}
+							) }
+						>
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURL } position="bottom">
-								<div>
-									<LinkControl
-										value={ { url: mediaURL } }
-										settings={ [] }
-										showSuggestions={ false }
-										onChange={ ( { url } ) => {
-											onSelectURL( url );
-											editMediaButtonRef.current.focus();
-										} }
-									/>
-								</div>
-							</Tooltip>
+							<LinkControl
+								value={ { url: mediaURL } }
+								settings={ [] }
+								showSuggestions={ false }
+								onChange={ ( { url } ) => {
+									onSelectURL( url );
+									editMediaButtonRef.current.focus();
+								} }
+							/>
 						</form>
 					) }
 				</>
diff --git a/packages/block-editor/src/components/media-replace-flow/index.native.js b/packages/block-editor/src/components/media-replace-flow/index.native.js
index 49e98a3b3b9ca5..ca2ce4ee78c637 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.native.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.native.js
@@ -1,3 +1,12 @@
-// MediaReplaceFlow component is not yet implemented in the native version,
-// so we return an empty component instead.
-export default () => null;
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+// MediaReplaceFlow component is not yet implemented in the native version.
+// For testing purposes, we are using an empty View component with a testID prop.
+const MediaReplaceFlow = () => {
+	return <View testID="media-replace-flow" />;
+};
+
+export default MediaReplaceFlow;
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index 707fd9393ee6c6..61df542cf58404 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -10,12 +10,16 @@
 }
 
 .block-editor-media-flow__url-input {
-	border-top: $border-width solid $gray-900;
-	margin-top: $grid-unit-10;
 	margin-right: -$grid-unit-10;
 	margin-left: -$grid-unit-10;
 	padding: $grid-unit-20;
 
+	&.has-siblings {
+		border-top: $border-width solid $gray-900;
+		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-10;
+	}
+
 	.block-editor-media-replace-flow__image-url-label {
 		display: block;
 		top: $grid-unit-20;
@@ -23,24 +27,22 @@
 	}
 
 	.block-editor-link-control {
-		width: 220px; // Hardcoded width avoids resizing of control when switching between preview/edit.
+		width: 300px; // Hardcoded width avoids resizing of control when switching between preview/edit.
 
 		.block-editor-url-input {
 			padding: 0; // Cancel unnecessary default 1px padding in this case.
 			margin: 0; // Reset default LinkControl margins.
 		}
 
-		.components-base-control .components-base-control__field {
-			margin-bottom: 0;
-		}
-
-		.block-editor-link-control__search-item-title {
-			max-width: 180px;
+		.block-editor-link-control__search-item-title,
+		.block-editor-link-control__search-item-info {
+			max-width: 200px;
 			white-space: nowrap;
 		}
 
-		.block-editor-link-control__search-item-info {
-			white-space: nowrap;
+		.block-editor-link-control__tools {
+			justify-content: flex-end;
+			padding: $grid-unit-20 var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 		}
 
 		.block-editor-link-control__search-item.is-current {
@@ -54,8 +56,7 @@
 		}
 
 		.block-editor-link-control__search-actions {
-			top: 0; // cancel default top positioning
-			right: 4px;
+			padding: $grid-unit-10 0 0;
 		}
 	}
 }
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 d73da6c77c5d55..dace470aa67b0f 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
@@ -32,34 +32,6 @@ function TestWrapper() {
 	);
 }
 
-/**
- * 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' );
-}
-
-/**
- * Asserts that the specified popover has already been positioned.
- * Necessary because it will be positioned a bit later after it's displayed.
- *
- * We're intentionally not using `.toHaveStyle()` because we want to be
- * less specific and avoid specific values for better test flexibility.
- *
- * @async
- *
- * @param {HTMLElement} popover Popover element.
- */
-async function popoverIsPositioned( popover ) {
-	/* eslint-disable jest-dom/prefer-to-have-style */
-	await waitFor( () => expect( popover.style.top ).not.toBe( '' ) );
-	await waitFor( () => expect( popover.style.left ).not.toBe( '' ) );
-	/* eslint-enable jest-dom/prefer-to-have-style */
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
 		render( <TestWrapper /> );
@@ -73,9 +45,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'renders replace menu', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -87,15 +57,13 @@ describe( 'General media replace flow', () => {
 		);
 		const uploadMenu = screen.getByRole( 'menu' );
 
-		await popoverIsPositioned( getWrappingPopoverElement( uploadMenu ) );
+		await waitFor( () => expect( uploadMenu ).toBePositionedPopover() );
 
 		await waitFor( () => expect( uploadMenu ).toBeVisible() );
 	} );
 
 	it( 'displays media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -110,15 +78,13 @@ describe( 'General media replace flow', () => {
 			name: 'example.media (opens in a new tab)',
 		} );
 
-		await popoverIsPositioned( getWrappingPopoverElement( link ) );
+		await waitFor( () => expect( link ).toBePositionedPopover() );
 
 		expect( link ).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
 	it( 'edits media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -129,22 +95,22 @@ describe( 'General media replace flow', () => {
 			} )
 		);
 
-		await popoverIsPositioned(
-			getWrappingPopoverElement(
+		await waitFor( () =>
+			expect(
 				screen.getByRole( 'link', {
 					name: 'example.media (opens in a new tab)',
 				} )
-			)
+			).toBePositionedPopover()
 		);
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Edit',
+				name: 'Edit link',
 			} )
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'URL',
+			name: 'Search or type URL',
 			expanded: false,
 		} );
 
@@ -153,7 +119,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Submit',
+				name: 'Save',
 			} )
 		);
 
diff --git a/packages/block-editor/src/components/media-upload-progress/constants.js b/packages/block-editor/src/components/media-upload-progress/constants.js
new file mode 100644
index 00000000000000..4003cd30e44c53
--- /dev/null
+++ b/packages/block-editor/src/components/media-upload-progress/constants.js
@@ -0,0 +1,6 @@
+export const MEDIA_UPLOAD_STATE_IDLE = 0;
+export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
+export const MEDIA_UPLOAD_STATE_FAILED = 3;
+export const MEDIA_UPLOAD_STATE_RESET = 4;
+export const MEDIA_UPLOAD_STATE_PAUSED = 11;
diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index b64b08eec09d8f..b2a63e715ba89a 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -9,29 +9,37 @@ import { View } from 'react-native';
 import { Component } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { subscribeMediaUpload } from '@wordpress/react-native-bridge';
+import {
+	subscribeMediaUpload,
+	requestImageUploadCancel,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
-
-export const MEDIA_UPLOAD_STATE_UPLOADING = 1;
-export const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
-export const MEDIA_UPLOAD_STATE_FAILED = 3;
-export const MEDIA_UPLOAD_STATE_RESET = 4;
+import {
+	MEDIA_UPLOAD_STATE_IDLE,
+	MEDIA_UPLOAD_STATE_UPLOADING,
+	MEDIA_UPLOAD_STATE_SUCCEEDED,
+	MEDIA_UPLOAD_STATE_FAILED,
+	MEDIA_UPLOAD_STATE_RESET,
+	MEDIA_UPLOAD_STATE_PAUSED,
+} from './constants';
 
 export class MediaUploadProgress extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.state = {
+			uploadState: MEDIA_UPLOAD_STATE_IDLE,
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
+		this.getRetryMessage = this.getRetryMessage.bind( this );
 	}
 
 	componentDidMount() {
@@ -39,13 +47,27 @@ export class MediaUploadProgress extends Component {
 	}
 
 	componentWillUnmount() {
+		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { mediaId } = this.props;
+
+		if ( isUploadInProgress || isUploadFailed ) {
+			requestImageUploadCancel( mediaId );
+		}
 		this.removeMediaUploadListener();
 	}
 
 	mediaUpload( payload ) {
 		const { mediaId } = this.props;
+		if (
+			payload.mediaId !== mediaId ||
+			( payload.state === this.state.uploadState &&
+				payload.progress === this.state.progress )
+		) {
+			return;
+		}
 
-		if ( payload.mediaId !== mediaId ) {
+		if ( payload?.mediaUrl && ! payload.state ) {
+			this.updateMediaThumbnail( payload );
 			return;
 		}
 
@@ -56,6 +78,9 @@ export class MediaUploadProgress extends Component {
 			case MEDIA_UPLOAD_STATE_SUCCEEDED:
 				this.finishMediaUploadWithSuccess( payload );
 				break;
+			case MEDIA_UPLOAD_STATE_PAUSED:
+				this.finishMediaUploadWithPause( payload );
+				break;
 			case MEDIA_UPLOAD_STATE_FAILED:
 				this.finishMediaUploadWithFailure( payload );
 				break;
@@ -68,6 +93,7 @@ export class MediaUploadProgress extends Component {
 	updateMediaProgress( payload ) {
 		this.setState( {
 			progress: payload.progress,
+			uploadState: payload.state,
 			isUploadInProgress: true,
 			isUploadFailed: false,
 		} );
@@ -76,22 +102,56 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	updateMediaThumbnail( payload ) {
+		const { onUpdateMediaProgress } = this.props;
+		if ( onUpdateMediaProgress ) {
+			onUpdateMediaProgress( payload );
+		}
+	}
+
 	finishMediaUploadWithSuccess( payload ) {
-		this.setState( { isUploadInProgress: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+		} );
 		if ( this.props.onFinishMediaUploadWithSuccess ) {
 			this.props.onFinishMediaUploadWithSuccess( payload );
 		}
 	}
 
+	finishMediaUploadWithPause( payload ) {
+		if ( ! this.props.enablePausedUploads ) {
+			this.finishMediaUploadWithFailure( payload );
+			return;
+		}
+
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: true,
+			isUploadFailed: false,
+		} );
+		if ( this.props.onFinishMediaUploadWithFailure ) {
+			this.props.onFinishMediaUploadWithFailure( payload );
+		}
+	}
+
 	finishMediaUploadWithFailure( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: true } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: true,
+		} );
 		if ( this.props.onFinishMediaUploadWithFailure ) {
 			this.props.onFinishMediaUploadWithFailure( payload );
 		}
 	}
 
 	mediaUploadStateReset( payload ) {
-		this.setState( { isUploadInProgress: false, isUploadFailed: false } );
+		this.setState( {
+			uploadState: payload.state,
+			isUploadInProgress: false,
+			isUploadFailed: false,
+		} );
 		if ( this.props.onMediaUploadStateReset ) {
 			this.props.onMediaUploadStateReset( payload );
 		}
@@ -115,15 +175,24 @@ export class MediaUploadProgress extends Component {
 		}
 	}
 
+	getRetryMessage() {
+		if (
+			this.state.uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+			this.props.enablePausedUploads
+		) {
+			return __( 'Waiting for connection' );
+		}
+
+		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+		return __( 'Failed to insert media.\nTap for more info.' );
+	}
+
 	render() {
 		const { renderContent = () => null } = this.props;
-		const { isUploadInProgress, isUploadFailed } = this.state;
+		const { isUploadInProgress, isUploadFailed, uploadState } = this.state;
 		const showSpinner = this.state.isUploadInProgress;
 		const progress = this.state.progress * 100;
-		// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
-		const retryMessage = __(
-			'Failed to insert media.\nTap for more info.'
-		);
+		const retryMessage = this.getRetryMessage();
 
 		const progressBarStyle = [
 			styles.progressBar,
@@ -149,6 +218,9 @@ export class MediaUploadProgress extends Component {
 					) }
 				</View>
 				{ renderContent( {
+					isUploadPaused:
+						uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
+						this.props.enablePausedUploads,
 					isUploadInProgress,
 					isUploadFailed,
 					retryMessage,
diff --git a/packages/block-editor/src/components/media-upload-progress/test/index.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
index 1185c9c35a8682..e5a6b460d94ef5 100644
--- a/packages/block-editor/src/components/media-upload-progress/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
@@ -14,13 +14,13 @@ import {
 /**
  * Internal dependencies
  */
+import { MediaUploadProgress } from '../';
 import {
-	MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from '../';
+} from '../constants';
 
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {
diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
index cec211005e9cd6..27bbc93d8a2b65 100644
--- a/packages/block-editor/src/components/media-upload/README.md
+++ b/packages/block-editor/src/components/media-upload/README.md
@@ -72,11 +72,12 @@ Value of Frame content default mode like 'browse', 'upload' etc.
 -   Required: No
 -   Default: false
 -   Platform: Web
+
 ### multiple
 
-Whether to allow multiple selections or not.
+Whether to allow multiple selection of files or not. This property will also accept a string with the value `add` to allow multiple selection of files without the need to use the `Shift` or `Ctrl`/`Cmd` keys.
 
--   Type: `Boolean`
+-   Type: `Boolean|String`
 -   Required: No
 -   Default: false
 -   Platform: Web
@@ -104,6 +105,8 @@ Callback called when the media modal is closed after media is selected.
 
 This is called subsequent to `onClose` when media is selected. The selected media are passed as an argument.
 
+The `image.sizes.full` resolution does always exist. Other defined sizes are only available when the image is larger and thus could be scaled down.
+
 -   Type: `Function`
 -   Required: Yes
 -   Platform: Web | Mobile
diff --git a/packages/block-editor/src/components/media-upload/constants.native.js b/packages/block-editor/src/components/media-upload/constants.native.js
new file mode 100644
index 00000000000000..4463df29843821
--- /dev/null
+++ b/packages/block-editor/src/components/media-upload/constants.native.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const MEDIA_TYPE_IMAGE = 'image';
+export const MEDIA_TYPE_VIDEO = 'video';
+export const MEDIA_TYPE_AUDIO = 'audio';
+export const MEDIA_TYPE_ANY = 'any';
+
+export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
+export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
+export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
diff --git a/packages/block-editor/src/components/media-upload/index.js b/packages/block-editor/src/components/media-upload/index.js
index ccaf902e497f43..0b129a14726a50 100644
--- a/packages/block-editor/src/components/media-upload/index.js
+++ b/packages/block-editor/src/components/media-upload/index.js
@@ -8,7 +8,7 @@ import { withFilters } from '@wordpress/components';
  * an integration with the core blocks that handle media files. By default it renders nothing but
  * it provides a way to have it overridden with the `editor.MediaUpload` filter.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 const MediaUpload = () => null;
 
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 75bc716a3e1f69..c4871d48ebe129 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -3,14 +3,17 @@
  */
 import { Platform } from 'react-native';
 
-import prompt from 'react-native-prompt-android';
-
 /**
  * WordPress dependencies
  */
 import { Component, React } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
+import {
+	BottomSheet,
+	PanelBody,
+	Picker,
+	TextControl,
+} from '@wordpress/components';
 import {
 	getOtherMediaOptions,
 	requestMediaPicker,
@@ -28,16 +31,20 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
-export const MEDIA_TYPE_IMAGE = 'image';
-export const MEDIA_TYPE_VIDEO = 'video';
-export const MEDIA_TYPE_AUDIO = 'audio';
-export const MEDIA_TYPE_ANY = 'any';
-
-export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
-export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
-export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
-export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
+/**
+ * Internal dependencies
+ */
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+	MEDIA_TYPE_ANY,
+	OPTION_TAKE_VIDEO,
+	OPTION_TAKE_PHOTO,
+	OPTION_INSERT_FROM_URL,
+	OPTION_WORDPRESS_MEDIA_LIBRARY,
+} from './constants';
+import styles from './style.scss';
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -52,6 +59,8 @@ export class MediaUpload extends Component {
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getAllSources = this.getAllSources.bind( this );
 		this.state = {
+			url: '',
+			showURLInput: false,
 			otherMediaOptions: [],
 		};
 	}
@@ -88,7 +97,7 @@ export class MediaUpload extends Component {
 		const cameraImageSource = {
 			id: mediaSources.deviceCamera, // ID is the value sent to native.
 			value: mediaSources.deviceCamera + '-IMAGE', // This is needed to diferenciate image-camera from video-camera sources.
-			label: __( 'Take a Photo' ),
+			label: OPTION_TAKE_PHOTO,
 			requiresModal: true,
 			types: [ MEDIA_TYPE_IMAGE ],
 			icon: capturePhoto,
@@ -97,7 +106,7 @@ export class MediaUpload extends Component {
 		const cameraVideoSource = {
 			id: mediaSources.deviceCamera,
 			value: mediaSources.deviceCamera,
-			label: __( 'Take a Video' ),
+			label: OPTION_TAKE_VIDEO,
 			requiresModal: true,
 			types: [ MEDIA_TYPE_VIDEO ],
 			icon: captureVideo,
@@ -115,7 +124,7 @@ export class MediaUpload extends Component {
 		const siteLibrarySource = {
 			id: mediaSources.siteMediaLibrary,
 			value: mediaSources.siteMediaLibrary,
-			label: __( 'WordPress Media Library' ),
+			label: OPTION_WORDPRESS_MEDIA_LIBRARY,
 			requiresModal: true,
 			types: [
 				MEDIA_TYPE_IMAGE,
@@ -130,7 +139,7 @@ export class MediaUpload extends Component {
 		const urlSource = {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
-			label: __( 'Insert from URL' ),
+			label: OPTION_INSERT_FROM_URL,
 			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
@@ -204,31 +213,10 @@ export class MediaUpload extends Component {
 	}
 
 	onPickerSelect( value ) {
-		const {
-			allowedTypes = [],
-			onSelect,
-			onSelectURL,
-			multiple = false,
-		} = this.props;
+		const { allowedTypes = [], onSelect, multiple = false } = this.props;
 
 		if ( value === URL_MEDIA_SOURCE ) {
-			prompt(
-				__( 'Type a URL' ), // title
-				undefined, // message
-				[
-					{
-						text: __( 'Cancel' ),
-						style: 'cancel',
-					},
-					{
-						text: __( 'Apply' ),
-						onPress: onSelectURL,
-					},
-				], // Buttons.
-				'plain-text', // type
-				undefined, // defaultValue
-				'url' // keyboardType
-			);
+			this.setState( { showURLInput: true } );
 			return;
 		}
 
@@ -306,19 +294,63 @@ export class MediaUpload extends Component {
 			/>
 		);
 
-		return this.props.render( {
-			open: this.onPickerPresent,
-			getMediaOptions,
-		} );
+		return (
+			<>
+				<URLInput
+					isVisible={ this.state.showURLInput }
+					onClose={ () => {
+						if ( this.state.url !== '' ) {
+							this.props.onSelectURL( this.state.url );
+						}
+						this.setState( { showURLInput: false, url: '' } );
+					} }
+					onChange={ ( url ) => {
+						this.setState( { url } );
+					} }
+					value={ this.state.url }
+				/>
+				{ this.props.render( {
+					open: this.onPickerPresent,
+					getMediaOptions,
+				} ) }
+			</>
+		);
 	}
 }
 
+function URLInput( props ) {
+	return (
+		<BottomSheet
+			hideHeader
+			isVisible={ props.isVisible }
+			onClose={ props.onClose }
+		>
+			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
+				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					autoCapitalize="none"
+					autoCorrect={ false }
+					autoComplete={ Platform.isIOS ? 'url' : 'off' }
+					keyboardType="url"
+					label={ OPTION_INSERT_FROM_URL }
+					onChange={ props.onChange }
+					placeholder={ __( 'Type a URL' ) }
+					value={ props.value }
+				/>
+			</PanelBody>
+		</BottomSheet>
+	);
+}
+
 export default compose( [
 	withSelect( ( select ) => {
+		const { capabilities } = select( blockEditorStore ).getSettings();
 		return {
 			isAudioBlockMediaUploadEnabled:
-				select( blockEditorStore ).getSettings( 'capabilities' )
-					.isAudioBlockMediaUploadEnabled === true,
+				capabilities?.isAudioBlockMediaUploadEnabled === true,
 		};
 	} ),
 ] )( MediaUpload );
diff --git a/packages/block-editor/src/components/media-upload/style.native.scss b/packages/block-editor/src/components/media-upload/style.native.scss
new file mode 100644
index 00000000000000..894620739409b7
--- /dev/null
+++ b/packages/block-editor/src/components/media-upload/style.native.scss
@@ -0,0 +1,4 @@
+.media-upload__link-input {
+	padding-left: 0;
+	padding-right: 0;
+}
diff --git a/packages/block-editor/src/components/media-upload/test/index.native.js b/packages/block-editor/src/components/media-upload/test/index.native.js
index 73cbf41b7dfc14..b856cb0388de14 100644
--- a/packages/block-editor/src/components/media-upload/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload/test/index.native.js
@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expect*"] }] */
+
 /**
  * External dependencies
  */
@@ -12,8 +14,8 @@ import { requestMediaPicker } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
+import { MediaUpload } from '../index';
 import {
-	MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
@@ -21,7 +23,7 @@ import {
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
 	OPTION_WORDPRESS_MEDIA_LIBRARY,
-} from '../index';
+} from '../constants';
 
 const MEDIA_URL = 'http://host.media.type';
 const MEDIA_ID = 123;
@@ -42,6 +44,7 @@ describe( 'MediaUpload component', () => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
+					onSelectURL={ jest.fn() }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
 							<>
diff --git a/packages/block-editor/src/components/multi-selection-inspector/README.md b/packages/block-editor/src/components/multi-selection-inspector/README.md
index e7edc7ef2f43da..726a4d72d6697d 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/README.md
+++ b/packages/block-editor/src/components/multi-selection-inspector/README.md
@@ -6,11 +6,6 @@ This card contains information on the number of blocks selected, and in the case
 
 ![Multi selection inspector card](https://make.wordpress.org/core/files/2020/09/multi-selection-inspector-card.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index 380c4371a45b2b..23d890d79fff4d 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { sprintf, _n } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
-import { serialize } from '@wordpress/blocks';
-import { count as wordCount } from '@wordpress/wordcount';
+import { useSelect } from '@wordpress/data';
 import { copy } from '@wordpress/icons';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,35 +12,25 @@ import { copy } from '@wordpress/icons';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function MultiSelectionInspector( { blocks } ) {
-	const words = wordCount( serialize( blocks ), 'words' );
-
+export default function MultiSelectionInspector() {
+	const selectedBlockCount = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockCount(),
+		[]
+	);
 	return (
-		<div className="block-editor-multi-selection-inspector__card">
+		<HStack
+			justify="flex-start"
+			spacing={ 2 }
+			className="block-editor-multi-selection-inspector__card"
+		>
 			<BlockIcon icon={ copy } showColors />
-			<div className="block-editor-multi-selection-inspector__card-content">
-				<div className="block-editor-multi-selection-inspector__card-title">
-					{ sprintf(
-						/* translators: %d: number of blocks */
-						_n( '%d block', '%d blocks', blocks.length ),
-						blocks.length
-					) }
-				</div>
-				<div className="block-editor-multi-selection-inspector__card-description">
-					{ sprintf(
-						/* translators: %d: number of words */
-						_n( '%d word', '%d words', words ),
-						words
-					) }
-				</div>
+			<div className="block-editor-multi-selection-inspector__card-title">
+				{ sprintf(
+					/* translators: %d: number of blocks */
+					_n( '%d Block', '%d Blocks', selectedBlockCount ),
+					selectedBlockCount
+				) }
 			</div>
-		</div>
+		</HStack>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getMultiSelectedBlocks } = select( blockEditorStore );
-	return {
-		blocks: getMultiSelectedBlocks(),
-	};
-} )( MultiSelectionInspector );
diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss
index 61bf5f8cdb3820..e37245d58f5dd5 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/style.scss
+++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss
@@ -1,25 +1,13 @@
 .block-editor-multi-selection-inspector__card {
-	display: flex;
-	align-items: flex-start;
 	padding: $grid-unit-20;
 }
 
-.block-editor-multi-selection-inspector__card-content {
-	flex-grow: 1;
-}
-
 .block-editor-multi-selection-inspector__card-title {
 	font-weight: 500;
-	margin-bottom: 5px;
-}
-
-.block-editor-multi-selection-inspector__card-description {
-	font-size: $default-font-size;
 }
 
 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
 	margin-left: -2px;
-	margin-right: 10px;
 	padding: 0 3px;
 	width: $button-size;
 	height: $button-size-small;
diff --git a/packages/block-editor/src/components/navigable-toolbar/README.md b/packages/block-editor/src/components/navigable-toolbar/README.md
index 30a4d100195f85..317be48f38faa2 100644
--- a/packages/block-editor/src/components/navigable-toolbar/README.md
+++ b/packages/block-editor/src/components/navigable-toolbar/README.md
@@ -8,6 +8,8 @@ The component accepts the following props. Props not included in this set will b
 
 ## `focusOnMount`
 
+_Note: this prop is deprecated._
+
 Whether to immediately focus when the component mounts.
 
 - Type: `Boolean`
diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js
index 8da587487fb8d1..f524887fdc0ed4 100644
--- a/packages/block-editor/src/components/navigable-toolbar/index.js
+++ b/packages/block-editor/src/components/navigable-toolbar/index.js
@@ -9,17 +9,27 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function hasOnlyToolbarItem( elements ) {
 	const dataProp = 'toolbarItem';
 	return ! elements.some( ( element ) => ! ( dataProp in element.dataset ) );
 }
 
-function getAllToolbarItemsIn( container ) {
-	return Array.from( container.querySelectorAll( '[data-toolbar-item]' ) );
+function getAllFocusableToolbarItemsIn( container ) {
+	return Array.from(
+		container.querySelectorAll( '[data-toolbar-item]:not([disabled])' )
+	);
 }
 
 function hasFocusWithin( container ) {
@@ -28,6 +38,7 @@ function hasFocusWithin( container ) {
 
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
+
 	if ( firstTabbable ) {
 		firstTabbable.focus( {
 			// When focusing newly mounted toolbars,
@@ -38,7 +49,7 @@ function focusFirstTabbableIn( container ) {
 	}
 }
 
-function useIsAccessibleToolbar( ref ) {
+function useIsAccessibleToolbar( toolbarRef ) {
 	/*
 	 * By default, we'll assume the starting accessible state of the Toolbar
 	 * is true, as it seems to be the most common case.
@@ -62,7 +73,7 @@ function useIsAccessibleToolbar( ref ) {
 	);
 
 	const determineIsAccessibleToolbar = useCallback( () => {
-		const tabbables = focus.tabbable.find( ref.current );
+		const tabbables = focus.tabbable.find( toolbarRef.current );
 		const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
 		if ( ! onlyToolbarItem ) {
 			deprecated( 'Using custom components as toolbar controls', {
@@ -73,7 +84,7 @@ function useIsAccessibleToolbar( ref ) {
 			} );
 		}
 		setIsAccessibleToolbar( onlyToolbarItem );
-	}, [] );
+	}, [ toolbarRef ] );
 
 	useLayoutEffect( () => {
 		// Toolbar buttons may be rendered asynchronously, so we use
@@ -81,30 +92,41 @@ function useIsAccessibleToolbar( ref ) {
 		const observer = new window.MutationObserver(
 			determineIsAccessibleToolbar
 		);
-		observer.observe( ref.current, { childList: true, subtree: true } );
+		observer.observe( toolbarRef.current, {
+			childList: true,
+			subtree: true,
+		} );
 		return () => observer.disconnect();
-	}, [ isAccessibleToolbar ] );
+	}, [ determineIsAccessibleToolbar, isAccessibleToolbar, toolbarRef ] );
 
 	return isAccessibleToolbar;
 }
 
-function useToolbarFocus(
-	ref,
+function useToolbarFocus( {
+	toolbarRef,
 	focusOnMount,
 	isAccessibleToolbar,
 	defaultIndex,
-	onIndexChange
-) {
+	onIndexChange,
+	shouldUseKeyboardFocusShortcut,
+	focusEditorOnEscape,
+} ) {
 	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
 	const [ initialIndex ] = useState( defaultIndex );
 
 	const focusToolbar = useCallback( () => {
-		focusFirstTabbableIn( ref.current );
-	}, [] );
+		focusFirstTabbableIn( toolbarRef.current );
+	}, [ toolbarRef ] );
+
+	const focusToolbarViaShortcut = () => {
+		if ( shouldUseKeyboardFocusShortcut ) {
+			focusToolbar();
+		}
+	};
 
 	// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
-	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
+	useShortcut( 'core/block-editor/focus-toolbar', focusToolbarViaShortcut );
 
 	useEffect( () => {
 		if ( initialFocusOnMount ) {
@@ -113,16 +135,25 @@ function useToolbarFocus(
 	}, [ isAccessibleToolbar, initialFocusOnMount, focusToolbar ] );
 
 	useEffect( () => {
+		// Store ref so we have access on useEffect cleanup: https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
+		const navigableToolbarRef = toolbarRef.current;
 		// If initialIndex is passed, we focus on that toolbar item when the
 		// toolbar gets mounted and initial focus is not forced.
 		// We have to wait for the next browser paint because block controls aren't
 		// rendered right away when the toolbar gets mounted.
 		let raf = 0;
-		if ( initialIndex && ! initialFocusOnMount ) {
+
+		// If the toolbar already had focus before the render, we don't want to move it.
+		// https://github.com/WordPress/gutenberg/issues/58511
+		if (
+			! initialFocusOnMount &&
+			! hasFocusWithin( navigableToolbarRef )
+		) {
 			raf = window.requestAnimationFrame( () => {
-				const items = getAllToolbarItemsIn( ref.current );
+				const items =
+					getAllFocusableToolbarItemsIn( navigableToolbarRef );
 				const index = initialIndex || 0;
-				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
+				if ( items[ index ] && hasFocusWithin( navigableToolbarRef ) ) {
 					items[ index ].focus( {
 						// When focusing newly mounted toolbars,
 						// the position of the popover is often not right on the first render
@@ -134,37 +165,75 @@ function useToolbarFocus(
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! ref.current ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) {
+				return;
+			}
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
-			const items = getAllToolbarItemsIn( ref.current );
+			const items = getAllFocusableToolbarItemsIn( navigableToolbarRef );
 			const index = items.findIndex( ( item ) => item.tabIndex === 0 );
 			onIndexChange( index );
 		};
-	}, [ initialIndex, initialFocusOnMount ] );
+	}, [ initialIndex, initialFocusOnMount, onIndexChange, toolbarRef ] );
+
+	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
+	/**
+	 * Handles returning focus to the block editor canvas when pressing escape.
+	 */
+	useEffect( () => {
+		const navigableToolbarRef = toolbarRef.current;
+
+		if ( focusEditorOnEscape ) {
+			const handleKeyDown = ( event ) => {
+				const lastFocus = getLastFocus();
+				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
+					// Focus the last focused element when pressing escape.
+					event.preventDefault();
+					lastFocus.current.focus();
+				}
+			};
+			navigableToolbarRef.addEventListener( 'keydown', handleKeyDown );
+			return () => {
+				navigableToolbarRef.removeEventListener(
+					'keydown',
+					handleKeyDown
+				);
+			};
+		}
+	}, [ focusEditorOnEscape, getLastFocus, toolbarRef ] );
 }
 
-function NavigableToolbar( {
+export default function NavigableToolbar( {
 	children,
 	focusOnMount,
+	focusEditorOnEscape = false,
+	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
+	orientation = 'horizontal',
 	...props
 } ) {
-	const ref = useRef();
-	const isAccessibleToolbar = useIsAccessibleToolbar( ref );
+	const toolbarRef = useRef();
+	const isAccessibleToolbar = useIsAccessibleToolbar( toolbarRef );
 
-	useToolbarFocus(
-		ref,
+	useToolbarFocus( {
+		toolbarRef,
 		focusOnMount,
+		defaultIndex: initialIndex,
+		onIndexChange,
 		isAccessibleToolbar,
-		initialIndex,
-		onIndexChange
-	);
+		shouldUseKeyboardFocusShortcut,
+		focusEditorOnEscape,
+	} );
 
 	if ( isAccessibleToolbar ) {
 		return (
-			<Toolbar label={ props[ 'aria-label' ] } ref={ ref } { ...props }>
+			<Toolbar
+				label={ props[ 'aria-label' ] }
+				ref={ toolbarRef }
+				orientation={ orientation }
+				{ ...props }
+			>
 				{ children }
 			</Toolbar>
 		);
@@ -172,14 +241,12 @@ function NavigableToolbar( {
 
 	return (
 		<NavigableMenu
-			orientation="horizontal"
+			orientation={ orientation }
 			role="toolbar"
-			ref={ ref }
+			ref={ toolbarRef }
 			{ ...props }
 		>
 			{ children }
 		</NavigableMenu>
 	);
 }
-
-export default NavigableToolbar;
diff --git a/packages/block-editor/src/components/observe-typing/README.md b/packages/block-editor/src/components/observe-typing/README.md
index c589c6903416d7..e44c612a144155 100644
--- a/packages/block-editor/src/components/observe-typing/README.md
+++ b/packages/block-editor/src/components/observe-typing/README.md
@@ -1,6 +1,6 @@
 # Observe Typing
 
-`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content — typically the top-level block list — it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
+`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content, it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
 
 ## Usage
 
@@ -10,7 +10,7 @@ Wrap the component where blocks are to be rendered with `<ObserveTyping />`:
 function VisualEditor() {
 	return (
 		<ObserveTyping>
-			<BlockList />
+			<MyInput />
 		</ObserveTyping>
 	);
 }
diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js
index 08764f5939a13f..75afc4bbdf0f96 100644
--- a/packages/block-editor/src/components/observe-typing/index.js
+++ b/packages/block-editor/src/components/observe-typing/index.js
@@ -115,11 +115,10 @@ export function useMouseMoveTypingReset() {
  *   field, presses ESC or TAB, or moves the mouse in the document.
  */
 export function useTypingObserver() {
-	const { isTyping, hasInlineToolbar } = useSelect( ( select ) => {
-		const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+	const { isTyping } = useSelect( ( select ) => {
+		const { isTyping: _isTyping } = select( blockEditorStore );
 		return {
 			isTyping: _isTyping(),
-			hasInlineToolbar: getSettings().hasInlineToolbar,
 		};
 	}, [] );
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
@@ -183,12 +182,10 @@ export function useTypingObserver() {
 				node.addEventListener( 'focus', stopTypingOnNonTextField );
 				node.addEventListener( 'keydown', stopTypingOnEscapeKey );
 
-				if ( ! hasInlineToolbar ) {
-					ownerDocument.addEventListener(
-						'selectionchange',
-						stopTypingOnSelectionUncollapse
-					);
-				}
+				ownerDocument.addEventListener(
+					'selectionchange',
+					stopTypingOnSelectionUncollapse
+				);
 
 				return () => {
 					defaultView.clearTimeout( timerId );
@@ -245,7 +242,7 @@ export function useTypingObserver() {
 				node.removeEventListener( 'keydown', startTypingInTextField );
 			};
 		},
-		[ isTyping, hasInlineToolbar, startTyping, stopTyping ]
+		[ isTyping, startTyping, stopTyping ]
 	);
 
 	return useMergeRefs( [ ref1, ref2 ] );
diff --git a/packages/block-editor/src/components/off-canvas-editor/README.md b/packages/block-editor/src/components/off-canvas-editor/README.md
deleted file mode 100644
index 0c5f2a36156a57..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Experimental Off Canvas Editor
-
-The __ExperimentalOffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
-
-It is an experimental component which may end up completely merged into the ListView component via configuration props.
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-contents.js b/packages/block-editor/src/components/off-canvas-editor/block-contents.js
deleted file mode 100644
index 507e7575344ab3..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/block-contents.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ListViewBlockSelectButton from './block-select-button';
-import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
-
-const ListViewBlockContents = forwardRef(
-	(
-		{
-			onClick,
-			onToggleExpanded,
-			block,
-			isSelected,
-			position,
-			siblingBlockCount,
-			level,
-			isExpanded,
-			selectedClientIds,
-			...props
-		},
-		ref
-	) => {
-		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
-			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-				};
-			},
-			[ clientId ]
-		);
-
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = classnames( 'block-editor-list-view-block-contents', {
-			'is-dropping-before': isBlockMoveTarget,
-		} );
-
-		// Only include all selected blocks if the currently clicked on block
-		// is one of the selected blocks. This ensures that if a user attempts
-		// to drag a block that isn't part of the selection, they're still able
-		// to drag it and rearrange its position.
-		const draggableClientIds = selectedClientIds.includes( clientId )
-			? selectedClientIds
-			: [ clientId ];
-
-		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
-					/>
-				) }
-			</BlockDraggable>
-		);
-	}
-);
-
-export default ListViewBlockContents;
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js b/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
deleted file mode 100644
index 15ae423ad5ddb8..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { edit } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-const BlockEditButton = ( { label, clientId } ) => {
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	const onClick = () => {
-		selectBlock( clientId );
-	};
-
-	return <Button icon={ edit } label={ label } onClick={ onClick } />;
-};
-
-export default BlockEditButton;
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
deleted file mode 100644
index 9477eb2cda40c0..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
-import { SPACE, ENTER } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import BlockIcon from '../block-icon';
-import useBlockDisplayInformation from '../use-block-display-information';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import ListViewExpander from './expander';
-import { useBlockLock } from '../block-lock';
-
-function ListViewBlockSelectButton(
-	{
-		className,
-		block: { clientId },
-		onClick,
-		onToggleExpanded,
-		tabIndex,
-		onFocus,
-		onDragStart,
-		onDragEnd,
-		draggable,
-	},
-	ref
-) {
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockTitle = useBlockDisplayTitle( {
-		clientId,
-		context: 'list-view',
-	} );
-	const { isLocked } = useBlockLock( clientId );
-
-	// The `href` attribute triggers the browser's native HTML drag operations.
-	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
-	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
-	// inside the `useOnBlockDrop` hook.
-	const onDragStartHandler = ( event ) => {
-		event.dataTransfer.clearData();
-		onDragStart?.( event );
-	};
-
-	function onKeyDownHandler( event ) {
-		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
-			onClick( event );
-		}
-	}
-
-	return (
-		<>
-			<Button
-				className={ classnames(
-					'block-editor-list-view-block-select-button',
-					className
-				) }
-				onClick={ onClick }
-				onKeyDown={ onKeyDownHandler }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
-				onDragStart={ onDragStartHandler }
-				onDragEnd={ onDragEnd }
-				draggable={ draggable }
-				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
-			>
-				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<HStack
-					alignment="center"
-					className="block-editor-list-view-block-select-button__label-wrapper"
-					justify="flex-start"
-					spacing={ 1 }
-				>
-					<span className="block-editor-list-view-block-select-button__title">
-						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
-					</span>
-					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-							<Truncate
-								className="block-editor-list-view-block-select-button__anchor"
-								ellipsizeMode="auto"
-							>
-								{ blockInformation.anchor }
-							</Truncate>
-						</span>
-					) }
-					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
-							<Icon icon={ lock } />
-						</span>
-					) }
-				</HStack>
-			</Button>
-		</>
-	);
-}
-
-export default forwardRef( ListViewBlockSelectButton );
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
deleted file mode 100644
index a0bf8529a4d01c..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ /dev/null
@@ -1,396 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { createBlock, hasBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalTreeGridCell as TreeGridCell,
-	__experimentalTreeGridItem as TreeGridItem,
-	MenuItem,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { moreVertical } from '@wordpress/icons';
-import {
-	useState,
-	useRef,
-	useEffect,
-	useCallback,
-	memo,
-} from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { sprintf, __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ListViewLeaf from './leaf';
-import {
-	BlockMoverUpButton,
-	BlockMoverDownButton,
-} from '../block-mover/button';
-import ListViewBlockContents from './block-contents';
-import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
-import BlockEditButton from './block-edit-button';
-import { useListViewContext } from './context';
-import { getBlockPositionDescription } from './utils';
-import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
-import { useBlockLock } from '../block-lock';
-
-function ListViewBlock( {
-	block,
-	isDragged,
-	isSelected,
-	isBranchSelected,
-	selectBlock,
-	position,
-	level,
-	rowCount,
-	siblingBlockCount,
-	showBlockMovers,
-	path,
-	isExpanded,
-	selectedClientIds,
-	preventAnnouncement,
-	selectBlockInCanvas,
-} ) {
-	const cellRef = useRef( null );
-	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId, attributes } = block;
-
-	const { isLocked, isContentLocked } = useBlockLock( clientId );
-	const forceSelectionContentLock = useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return false;
-			}
-			if ( ! isContentLocked ) {
-				return false;
-			}
-			return select( blockEditorStore ).hasSelectedInnerBlock(
-				clientId,
-				true
-			);
-		},
-		[ isContentLocked, clientId, isSelected ]
-	);
-
-	const isFirstSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected && selectedClientIds[ 0 ] === clientId );
-	const isLastSelectedBlock =
-		forceSelectionContentLock ||
-		( isSelected &&
-			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
-
-	const { replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
-		[ clientId ]
-	);
-
-	// 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(
-		blockName,
-		'__experimentalToolbar',
-		true
-	);
-	const instanceId = useInstanceId( ListViewBlock );
-	const descriptionId = `list-view-block-select-button__${ instanceId }`;
-	const blockPositionDescription = getBlockPositionDescription(
-		position,
-		siblingBlockCount,
-		level
-	);
-
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Options' );
-
-	const editAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Edit %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Edit' );
-
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
-
-	const hasSiblings = siblingBlockCount > 0;
-	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
-		'block-editor-list-view-block__mover-cell',
-		{ 'is-visible': isHovered || isSelected }
-	);
-
-	const listViewBlockSettingsClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isFirstSelectedBlock }
-	);
-
-	const listViewBlockEditClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ '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;
-	} else if ( ! showBlockActions ) {
-		colSpan = 3;
-	}
-
-	const classes = classnames( {
-		'is-selected': isSelected || forceSelectionContentLock,
-		'is-first-selected': isFirstSelectedBlock,
-		'is-last-selected': isLastSelectedBlock,
-		'is-branch-selected': isBranchSelected,
-		'is-dragging': isDragged,
-		'has-single-cell': ! showBlockActions,
-	} );
-
-	// Only include all selected blocks if the currently clicked on block
-	// is one of the selected blocks. This ensures that if a user attempts
-	// to alter a block that isn't part of the selection, they're still able
-	// to do so.
-	const dropdownClientIds = selectedClientIds.includes( clientId )
-		? selectedClientIds
-		: [ clientId ];
-
-	return (
-		<ListViewLeaf
-			className={ classes }
-			onMouseEnter={ onMouseEnter }
-			onMouseLeave={ onMouseLeave }
-			onFocus={ onMouseEnter }
-			onBlur={ onMouseLeave }
-			level={ level }
-			position={ position }
-			rowCount={ rowCount }
-			path={ path }
-			id={ `list-view-block-${ clientId }` }
-			data-block={ clientId }
-			isExpanded={ isContentLocked ? undefined : isExpanded }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
-		>
-			<TreeGridCell
-				className="block-editor-list-view-block__contents-cell"
-				colSpan={ colSpan }
-				ref={ cellRef }
-				aria-label={ blockAriaLabel }
-				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ isContentLocked ? undefined : isExpanded }
-				aria-describedby={ descriptionId }
-			>
-				{ ( { ref, tabIndex, onFocus } ) => (
-					<div className="block-editor-list-view-block__contents-container">
-						<ListViewBlockContents
-							block={ block }
-							onClick={
-								selectBlockInCanvas
-									? selectEditorBlock
-									: ( event ) => {
-											event.preventDefault();
-									  }
-							}
-							onToggleExpanded={ toggleExpanded }
-							isSelected={ isSelected }
-							position={ position }
-							siblingBlockCount={ siblingBlockCount }
-							level={ level }
-							ref={ ref }
-							tabIndex={ tabIndex }
-							onFocus={ onFocus }
-							isExpanded={ isExpanded }
-							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
-						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
-							{ blockPositionDescription }
-						</div>
-					</div>
-				) }
-			</TreeGridCell>
-			{ hasRenderedMovers && (
-				<>
-					<TreeGridCell
-						className={ moverCellClassName }
-						withoutGridItem
-					>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverUpButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverDownButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-					</TreeGridCell>
-				</>
-			) }
-
-			{ showBlockActions && (
-				<>
-					<TreeGridCell
-						className={ listViewBlockEditClassName }
-						aria-selected={
-							!! isSelected || forceSelectionContentLock
-						}
-					>
-						{ () => (
-							<BlockEditButton
-								label={ editAriaLabel }
-								clientId={ clientId }
-							/>
-						) }
-					</TreeGridCell>
-					<TreeGridCell
-						className={ listViewBlockSettingsClassName }
-						aria-selected={
-							!! isSelected || forceSelectionContentLock
-						}
-					>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockSettingsDropdown
-								clientIds={ dropdownClientIds }
-								icon={ moreVertical }
-								label={ settingsAriaLabel }
-								toggleProps={ {
-									ref,
-									className:
-										'block-editor-list-view-block__menu',
-									tabIndex,
-									onFocus,
-								} }
-								disableOpenOnArrowDown
-								__experimentalSelectBlock={ updateSelection }
-							>
-								{ ( { onClose } ) => (
-									<MenuItem
-										onClick={ () => {
-											const newLink = createBlock(
-												'core/navigation-link'
-											);
-											const newSubmenu = createBlock(
-												'core/navigation-submenu',
-												attributes,
-												block.innerBlocks
-													? [
-															...block.innerBlocks,
-															newLink,
-													  ]
-													: [ newLink ]
-											);
-											replaceBlock(
-												clientId,
-												newSubmenu
-											);
-											onClose();
-										} }
-									>
-										{ __( 'Add a submenu item' ) }
-									</MenuItem>
-								) }
-							</BlockSettingsDropdown>
-						) }
-					</TreeGridCell>
-				</>
-			) }
-		</ListViewLeaf>
-	);
-}
-
-export default memo( ListViewBlock );
diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js
deleted file mode 100644
index e752bcbc6cae54..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/branch.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import ListViewBlock from './block';
-import { useListViewContext } from './context';
-import { isClientIdSelected } from './utils';
-import { store as blockEditorStore } from '../../store';
-
-/**
- * Given a block, returns the total number of blocks in that subtree. This is used to help determine
- * the list position of a block.
- *
- * When a block is collapsed, we do not count their children as part of that total. In the current drag
- * implementation dragged blocks and their children are not counted.
- *
- * @param {Object}  block               block tree
- * @param {Object}  expandedState       state that notes which branches are collapsed
- * @param {Array}   draggedClientIds    a list of dragged client ids
- * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
- * @return {number} block count
- */
-function countBlocks(
-	block,
-	expandedState,
-	draggedClientIds,
-	isExpandedByDefault
-) {
-	const isDragged = draggedClientIds?.includes( block.clientId );
-	if ( isDragged ) {
-		return 0;
-	}
-	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
-
-	if ( isExpanded ) {
-		return (
-			1 +
-			block.innerBlocks.reduce(
-				countReducer(
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				),
-				0
-			)
-		);
-	}
-	return 1;
-}
-const countReducer =
-	( expandedState, draggedClientIds, isExpandedByDefault ) =>
-	( count, block ) => {
-		const isDragged = draggedClientIds?.includes( block.clientId );
-		if ( isDragged ) {
-			return count;
-		}
-		const isExpanded =
-			expandedState[ block.clientId ] ?? isExpandedByDefault;
-		if ( isExpanded && block.innerBlocks.length > 0 ) {
-			return (
-				count +
-				countBlocks(
-					block,
-					expandedState,
-					draggedClientIds,
-					isExpandedByDefault
-				)
-			);
-		}
-		return count + 1;
-	};
-
-function ListViewBranch( props ) {
-	const {
-		blocks,
-		selectBlock,
-		showBlockMovers,
-		selectedClientIds,
-		level = 1,
-		path = '',
-		isBranchSelected = false,
-		listPosition = 0,
-		fixedListWindow,
-		isExpanded,
-		parentId,
-		shouldShowInnerBlocks = true,
-		selectBlockInCanvas,
-	} = props;
-
-	const isContentLocked = useSelect(
-		( select ) => {
-			return !! (
-				parentId &&
-				select( blockEditorStore ).getTemplateLock( parentId ) ===
-					'contentOnly'
-			);
-		},
-		[ parentId ]
-	);
-
-	const { expandedState, draggedClientIds } = useListViewContext();
-
-	if ( isContentLocked ) {
-		return null;
-	}
-
-	const filteredBlocks = blocks.filter( Boolean );
-	const blockCount = filteredBlocks.length;
-	let nextPosition = listPosition;
-
-	return (
-		<>
-			{ filteredBlocks.map( ( block, index ) => {
-				const { clientId, innerBlocks } = block;
-
-				if ( index > 0 ) {
-					nextPosition += countBlocks(
-						filteredBlocks[ index - 1 ],
-						expandedState,
-						draggedClientIds,
-						isExpanded
-					);
-				}
-
-				const { itemInView } = fixedListWindow;
-				const blockInView = itemInView( nextPosition );
-
-				const position = index + 1;
-				const updatedPath =
-					path.length > 0
-						? `${ path }_${ position }`
-						: `${ position }`;
-				const hasNestedBlocks = !! innerBlocks?.length;
-
-				const shouldExpand =
-					hasNestedBlocks && shouldShowInnerBlocks
-						? expandedState[ clientId ] ?? isExpanded
-						: undefined;
-
-				const isDragged = !! draggedClientIds?.includes( clientId );
-
-				const showBlock = isDragged || blockInView;
-
-				// Make updates to the selected or dragged blocks synchronous,
-				// but asynchronous for any other block.
-				const isSelected = isClientIdSelected(
-					clientId,
-					selectedClientIds
-				);
-				const isSelectedBranch =
-					isBranchSelected || ( isSelected && hasNestedBlocks );
-				return (
-					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
-						{ showBlock && (
-							<ListViewBlock
-								block={ block }
-								selectBlock={ selectBlock }
-								isSelected={ isSelected }
-								isBranchSelected={ isSelectedBranch }
-								isDragged={ isDragged }
-								level={ level }
-								position={ position }
-								rowCount={ blockCount }
-								siblingBlockCount={ blockCount }
-								showBlockMovers={ showBlockMovers }
-								path={ updatedPath }
-								isExpanded={ shouldExpand }
-								listPosition={ nextPosition }
-								selectedClientIds={ selectedClientIds }
-								selectBlockInCanvas={ selectBlockInCanvas }
-							/>
-						) }
-						{ ! showBlock && (
-							<tr>
-								<td className="block-editor-list-view-placeholder" />
-							</tr>
-						) }
-						{ hasNestedBlocks && shouldExpand && ! isDragged && (
-							<ListViewBranch
-								parentId={ clientId }
-								blocks={ innerBlocks }
-								selectBlock={ selectBlock }
-								showBlockMovers={ showBlockMovers }
-								level={ level + 1 }
-								path={ updatedPath }
-								listPosition={ nextPosition + 1 }
-								fixedListWindow={ fixedListWindow }
-								isBranchSelected={ isSelectedBranch }
-								selectedClientIds={ selectedClientIds }
-								isExpanded={ isExpanded }
-								selectBlockInCanvas={ selectBlockInCanvas }
-							/>
-						) }
-					</AsyncModeProvider>
-				);
-			} ) }
-		</>
-	);
-}
-
-ListViewBranch.defaultProps = {
-	selectBlock: () => {},
-};
-
-export default memo( ListViewBranch );
diff --git a/packages/block-editor/src/components/off-canvas-editor/context.js b/packages/block-editor/src/components/off-canvas-editor/context.js
deleted file mode 100644
index c837dce9ca23fd..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/context.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const ListViewContext = createContext( {} );
-
-export const useListViewContext = () => useContext( ListViewContext );
diff --git a/packages/block-editor/src/components/off-canvas-editor/drop-indicator.js b/packages/block-editor/src/components/off-canvas-editor/drop-indicator.js
deleted file mode 100644
index 1e8d51a73919ab..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/drop-indicator.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Popover } from '@wordpress/components';
-import { useCallback, useMemo } from '@wordpress/element';
-
-export default function ListViewDropIndicator( {
-	listViewRef,
-	blockDropTarget,
-} ) {
-	const { rootClientId, clientId, dropPosition } = blockDropTarget || {};
-
-	const [ rootBlockElement, blockElement ] = useMemo( () => {
-		if ( ! listViewRef.current ) {
-			return [];
-		}
-
-		// The rootClientId will be defined whenever dropping into inner
-		// block lists, but is undefined when dropping at the root level.
-		const _rootBlockElement = rootClientId
-			? listViewRef.current.querySelector(
-					`[data-block="${ rootClientId }"]`
-			  )
-			: undefined;
-
-		// The clientId represents the sibling block, the dragged block will
-		// usually be inserted adjacent to it. It will be undefined when
-		// dropping a block into an empty block list.
-		const _blockElement = clientId
-			? listViewRef.current.querySelector(
-					`[data-block="${ clientId }"]`
-			  )
-			: undefined;
-
-		return [ _rootBlockElement, _blockElement ];
-	}, [ rootClientId, clientId ] );
-
-	// The targetElement is the element that the drop indicator will appear
-	// before or after. When dropping into an empty block list, blockElement
-	// is undefined, so the indicator will appear after the rootBlockElement.
-	const targetElement = blockElement || rootBlockElement;
-
-	const getDropIndicatorIndent = useCallback( () => {
-		if ( ! rootBlockElement ) {
-			return 0;
-		}
-
-		// Calculate the indent using the block icon of the root block.
-		// Using a classname selector here might be flaky and could be
-		// improved.
-		const targetElementRect = targetElement.getBoundingClientRect();
-		const rootBlockIconElement = rootBlockElement.querySelector(
-			'.block-editor-block-icon'
-		);
-		const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-		return rootBlockIconRect.right - targetElementRect.left;
-	}, [ rootBlockElement, targetElement ] );
-
-	const style = useMemo( () => {
-		if ( ! targetElement ) {
-			return {};
-		}
-
-		const indent = getDropIndicatorIndent();
-
-		return {
-			width: targetElement.offsetWidth - indent,
-		};
-	}, [ getDropIndicatorIndent, targetElement ] );
-
-	const popoverAnchor = useMemo( () => {
-		const isValidDropPosition =
-			dropPosition === 'top' ||
-			dropPosition === 'bottom' ||
-			dropPosition === 'inside';
-		if ( ! targetElement || ! isValidDropPosition ) {
-			return undefined;
-		}
-
-		return {
-			ownerDocument: targetElement.ownerDocument,
-			getBoundingClientRect() {
-				const rect = targetElement.getBoundingClientRect();
-				const indent = getDropIndicatorIndent();
-
-				const left = rect.left + indent;
-				const right = rect.right;
-				let top = 0;
-				let bottom = 0;
-
-				if ( dropPosition === 'top' ) {
-					top = rect.top;
-					bottom = rect.top;
-				} else {
-					// `dropPosition` is either `bottom` or `inside`
-					top = rect.bottom;
-					bottom = rect.bottom;
-				}
-
-				const width = right - left;
-				const height = bottom - top;
-
-				return new window.DOMRect( left, top, width, height );
-			},
-		};
-	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
-
-	if ( ! targetElement ) {
-		return null;
-	}
-
-	return (
-		<Popover
-			animate={ false }
-			anchor={ popoverAnchor }
-			focusOnMount={ false }
-			className="block-editor-list-view-drop-indicator"
-			variant="unstyled"
-		>
-			<div
-				style={ style }
-				className="block-editor-list-view-drop-indicator__line"
-			/>
-		</Popover>
-	);
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/expander.js b/packages/block-editor/src/components/off-canvas-editor/expander.js
deleted file mode 100644
index 3b93f8ad01185c..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/expander.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
-import { isRTL } from '@wordpress/i18n';
-
-export default function ListViewExpander( { onClick } ) {
-	return (
-		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
-		//
-		// The expander component is implemented as a pseudo element in the w3 example
-		// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
-		//
-		// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
-		// For the current tree grid implementation, please do not try to make this a button.
-		//
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-		<span
-			className="block-editor-list-view__expander"
-			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
-			aria-hidden="true"
-		>
-			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
-		</span>
-	);
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
deleted file mode 100644
index dd88b9ec43cc94..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/index.js
+++ /dev/null
@@ -1,216 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	useMergeRefs,
-	__experimentalUseFixedWindowList as useFixedWindowList,
-} from '@wordpress/compose';
-import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useReducer,
-	forwardRef,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ListViewBranch from './branch';
-import { ListViewContext } from './context';
-import ListViewDropIndicator from './drop-indicator';
-import useBlockSelection from './use-block-selection';
-import useListViewClientIds from './use-list-view-client-ids';
-import useListViewDropZone from './use-list-view-drop-zone';
-import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
-import { store as blockEditorStore } from '../../store';
-
-const expanded = ( state, action ) => {
-	if ( Array.isArray( action.clientIds ) ) {
-		return {
-			...state,
-			...action.clientIds.reduce(
-				( newState, id ) => ( {
-					...newState,
-					[ id ]: action.type === 'expand',
-				} ),
-				{}
-			),
-		};
-	}
-	return state;
-};
-
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
-
-/**
- * Show a hierarchical list of blocks.
- *
- * @param {Object}  props                     Components props.
- * @param {string}  props.id                  An HTML element id for the root element of ListView.
- * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers     Flag to enable block movers
- * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
- * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
- * @param {Object}  ref                       Forwarded ref
- */
-function __ExperimentalOffCanvasEditor(
-	{
-		id,
-		blocks,
-		showBlockMovers = false,
-		isExpanded = false,
-		selectBlockInCanvas = true,
-	},
-	ref
-) {
-	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
-
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
-		( select ) => {
-			const {
-				getGlobalBlockCount,
-				getClientIdsOfDescendants,
-				__unstableGetEditorMode,
-			} = select( blockEditorStore );
-			const draggedBlockCount =
-				draggedClientIds?.length > 0
-					? getClientIdsOfDescendants( draggedClientIds ).length + 1
-					: 0;
-			return {
-				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
-				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
-			};
-		},
-		[ draggedClientIds ]
-	);
-
-	const { updateBlockSelection } = useBlockSelection();
-
-	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
-
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
-	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
-
-	const isMounted = useRef( false );
-	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
-		firstSelectedBlockClientId: selectedClientIds[ 0 ],
-		setExpandedState,
-	} );
-	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
-		},
-		[ setSelectedTreeId, updateBlockSelection ]
-	);
-	useEffect( () => {
-		isMounted.current = true;
-	}, [] );
-
-	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	const [ fixedListWindow ] = useFixedWindowList(
-		elementRef,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
-		}
-	);
-
-	const expand = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
-				return;
-			}
-			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
-		},
-		[ setExpandedState ]
-	);
-	const collapse = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
-				return;
-			}
-			setExpandedState( { type: 'collapse', clientIds: [ clientId ] } );
-		},
-		[ setExpandedState ]
-	);
-	const expandRow = useCallback(
-		( row ) => {
-			expand( row?.dataset?.block );
-		},
-		[ expand ]
-	);
-	const collapseRow = useCallback(
-		( row ) => {
-			collapse( row?.dataset?.block );
-		},
-		[ collapse ]
-	);
-	const focusRow = useCallback(
-		( event, startRow, endRow ) => {
-			if ( event.shiftKey ) {
-				updateBlockSelection(
-					event,
-					startRow?.dataset?.block,
-					endRow?.dataset?.block
-				);
-			}
-		},
-		[ updateBlockSelection ]
-	);
-
-	const contextValue = useMemo(
-		() => ( {
-			isTreeGridMounted: isMounted.current,
-			draggedClientIds,
-			expandedState,
-			expand,
-			collapse,
-		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
-	);
-
-	return (
-		<AsyncModeProvider value={ true }>
-			<ListViewDropIndicator
-				listViewRef={ elementRef }
-				blockDropTarget={ blockDropTarget }
-			/>
-			<TreeGrid
-				id={ id }
-				className="block-editor-list-view-tree"
-				aria-label={ __( 'Block navigation structure' ) }
-				ref={ treeGridRef }
-				onCollapseRow={ collapseRow }
-				onExpandRow={ expandRow }
-				onFocusRow={ focusRow }
-				applicationAriaLabel={ __( 'Block navigation structure' ) }
-			>
-				<ListViewContext.Provider value={ contextValue }>
-					<ListViewBranch
-						blocks={ clientIdsTree }
-						selectBlock={ selectEditorBlock }
-						showBlockMovers={ showBlockMovers }
-						fixedListWindow={ fixedListWindow }
-						selectedClientIds={ selectedClientIds }
-						isExpanded={ isExpanded }
-						shouldShowInnerBlocks={ shouldShowInnerBlocks }
-						selectBlockInCanvas={ selectBlockInCanvas }
-					/>
-				</ListViewContext.Provider>
-			</TreeGrid>
-		</AsyncModeProvider>
-	);
-}
-export default forwardRef( __ExperimentalOffCanvasEditor );
diff --git a/packages/block-editor/src/components/off-canvas-editor/leaf.js b/packages/block-editor/src/components/off-canvas-editor/leaf.js
deleted file mode 100644
index 41bf4bc34cc665..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/leaf.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { animated } from '@react-spring/web';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import useMovingAnimation from '../use-moving-animation';
-
-const AnimatedTreeGridRow = animated( TreeGridRow );
-
-export default function ListViewLeaf( {
-	isSelected,
-	position,
-	level,
-	rowCount,
-	children,
-	className,
-	path,
-	...props
-} ) {
-	const ref = useMovingAnimation( {
-		isSelected,
-		adjustScrolling: false,
-		enableAnimation: true,
-		triggerAnimationOnChange: path,
-	} );
-
-	return (
-		<AnimatedTreeGridRow
-			ref={ ref }
-			className={ classnames( 'block-editor-list-view-leaf', className ) }
-			level={ level }
-			positionInSet={ position }
-			setSize={ rowCount }
-			{ ...props }
-		>
-			{ children }
-		</AnimatedTreeGridRow>
-	);
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
deleted file mode 100644
index 7f22f6f5340cfd..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/style.scss
+++ /dev/null
@@ -1 +0,0 @@
-//Styles for off-canvas editor, remove this line when you add some css to this file!
diff --git a/packages/block-editor/src/components/off-canvas-editor/test/utils.js b/packages/block-editor/src/components/off-canvas-editor/test/utils.js
deleted file mode 100644
index 78d78a9d90069c..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/test/utils.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getCommonDepthClientIds } from '../utils';
-
-describe( 'getCommonDepthClientIds', () => {
-	it( 'should return start and end when no depth is provided', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[],
-			[]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
-	} );
-
-	it( 'should return deepest start and end when depths match', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1', 'start-2', 'start-3' ],
-			[ 'end-1', 'end-2', 'end-3' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
-	} );
-
-	it( 'should return shallower ids when start is shallower', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1' ],
-			[ 'end-1', 'end-2', 'end-3' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-id', end: 'end-2' } );
-	} );
-
-	it( 'should return shallower ids when end is shallower', () => {
-		const result = getCommonDepthClientIds(
-			'start-id',
-			'clicked-id',
-			[ 'start-1', 'start-2', 'start-3' ],
-			[ 'end-1', 'end-2' ]
-		);
-
-		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
-	} );
-} );
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-block-selection.js b/packages/block-editor/src/components/off-canvas-editor/use-block-selection.js
deleted file mode 100644
index 59aaaeacb01d40..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/use-block-selection.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { speak } from '@wordpress/a11y';
-import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { UP, DOWN, HOME, END } from '@wordpress/keycodes';
-import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { getCommonDepthClientIds } from './utils';
-
-export default function useBlockSelection() {
-	const { clearSelectedBlock, multiSelect, selectBlock } =
-		useDispatch( blockEditorStore );
-	const {
-		getBlockName,
-		getBlockParents,
-		getBlockSelectionStart,
-		getBlockSelectionEnd,
-		getSelectedBlockClientIds,
-		hasMultiSelection,
-		hasSelectedBlock,
-	} = useSelect( blockEditorStore );
-
-	const { getBlockType } = useSelect( blocksStore );
-
-	const updateBlockSelection = useCallback(
-		async ( event, clientId, destinationClientId ) => {
-			if ( ! event?.shiftKey ) {
-				selectBlock( clientId );
-				return;
-			}
-
-			// To handle multiple block selection via the `SHIFT` key, prevent
-			// the browser default behavior of opening the link in a new window.
-			event.preventDefault();
-
-			const isKeyPress =
-				event.type === 'keydown' &&
-				( event.keyCode === UP ||
-					event.keyCode === DOWN ||
-					event.keyCode === HOME ||
-					event.keyCode === END );
-
-			// Handle clicking on a block when no blocks are selected, and return early.
-			if (
-				! isKeyPress &&
-				! hasSelectedBlock() &&
-				! hasMultiSelection()
-			) {
-				selectBlock( clientId, null );
-				return;
-			}
-
-			const selectedBlocks = getSelectedBlockClientIds();
-			const clientIdWithParents = [
-				...getBlockParents( clientId ),
-				clientId,
-			];
-
-			if (
-				isKeyPress &&
-				! selectedBlocks.some( ( blockId ) =>
-					clientIdWithParents.includes( blockId )
-				)
-			) {
-				// Ensure that shift-selecting blocks via the keyboard only
-				// expands the current selection if focusing over already
-				// selected blocks. Otherwise, clear the selection so that
-				// a user can create a new selection entirely by keyboard.
-				await clearSelectedBlock();
-			}
-
-			let startTarget = getBlockSelectionStart();
-			let endTarget = clientId;
-
-			// Handle keyboard behavior for selecting multiple blocks.
-			if ( isKeyPress ) {
-				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
-					// Set the starting point of the selection to the currently
-					// focused block, if there are no blocks currently selected.
-					// This ensures that as the selection is expanded or contracted,
-					// the starting point of the selection is anchored to that block.
-					startTarget = clientId;
-				}
-				if ( destinationClientId ) {
-					// If the user presses UP or DOWN, we want to ensure that the block they're
-					// moving to is the target for selection, and not the currently focused one.
-					endTarget = destinationClientId;
-				}
-			}
-
-			const startParents = getBlockParents( startTarget );
-			const endParents = getBlockParents( endTarget );
-
-			const { start, end } = getCommonDepthClientIds(
-				startTarget,
-				endTarget,
-				startParents,
-				endParents
-			);
-			await multiSelect( start, end, null );
-
-			// Announce deselected block, or number of deselected blocks if
-			// the total number of blocks deselected is greater than one.
-			const updatedSelectedBlocks = getSelectedBlockClientIds();
-
-			// If the selection is greater than 1 and the Home or End keys
-			// were used to generate the selection, then skip announcing the
-			// deselected blocks.
-			if (
-				( event.keyCode === HOME || event.keyCode === END ) &&
-				updatedSelectedBlocks.length > 1
-			) {
-				return;
-			}
-
-			const selectionDiff = selectedBlocks.filter(
-				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
-			);
-
-			let label;
-			if ( selectionDiff.length === 1 ) {
-				const title = getBlockType(
-					getBlockName( selectionDiff[ 0 ] )
-				)?.title;
-				if ( title ) {
-					label = sprintf(
-						/* translators: %s: block name */
-						__( '%s deselected.' ),
-						title
-					);
-				}
-			} else if ( selectionDiff.length > 1 ) {
-				label = sprintf(
-					/* translators: %s: number of deselected blocks */
-					__( '%s blocks deselected.' ),
-					selectionDiff.length
-				);
-			}
-
-			if ( label ) {
-				speak( label );
-			}
-		},
-		[
-			clearSelectedBlock,
-			getBlockName,
-			getBlockType,
-			getBlockParents,
-			getBlockSelectionStart,
-			getBlockSelectionEnd,
-			getSelectedBlockClientIds,
-			hasMultiSelection,
-			hasSelectedBlock,
-			multiSelect,
-			selectBlock,
-		]
-	);
-
-	return {
-		updateBlockSelection,
-	};
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-list-view-client-ids.js b/packages/block-editor/src/components/off-canvas-editor/use-list-view-client-ids.js
deleted file mode 100644
index 5dafa765f16ea5..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/use-list-view-client-ids.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export default function useListViewClientIds( blocks ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getDraggedBlockClientIds,
-				getSelectedBlockClientIds,
-				__unstableGetClientIdsTree,
-			} = select( blockEditorStore );
-
-			return {
-				selectedClientIds: getSelectedBlockClientIds(),
-				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
-			};
-		},
-		[ blocks ]
-	);
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-list-view-drop-zone.js b/packages/block-editor/src/components/off-canvas-editor/use-list-view-drop-zone.js
deleted file mode 100644
index 346631667c2544..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/use-list-view-drop-zone.js
+++ /dev/null
@@ -1,260 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
-import {
-	useThrottle,
-	__experimentalUseDropZone as useDropZone,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import {
-	getDistanceToNearestEdge,
-	isPointContainedByRect,
-} from '../../utils/math';
-import useOnBlockDrop from '../use-on-block-drop';
-import { store as blockEditorStore } from '../../store';
-
-/** @typedef {import('../../utils/math').WPPoint} WPPoint */
-
-/**
- * The type of a drag event.
- *
- * @typedef {'default'|'file'|'html'} WPDragEventType
- */
-
-/**
- * An array representing data for blocks in the DOM used by drag and drop.
- *
- * @typedef {Object} WPListViewDropZoneBlocks
- * @property {string}  clientId                        The client id for the block.
- * @property {string}  rootClientId                    The root client id for the block.
- * @property {number}  blockIndex                      The block's index.
- * @property {Element} element                         The DOM element representing the block.
- * @property {number}  innerBlockCount                 The number of inner blocks the block has.
- * @property {boolean} isDraggedBlock                  Whether the block is currently being dragged.
- * @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
- * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
- */
-
-/**
- * An object containing details of a drop target.
- *
- * @typedef {Object} WPListViewDropZoneTarget
- * @property {string}                  blockIndex   The insertion index.
- * @property {string}                  rootClientId The root client id for the block.
- * @property {string|undefined}        clientId     The client id for the block.
- * @property {'top'|'bottom'|'inside'} dropPosition The position relative to the block that the user is dropping to.
- *                                                  'inside' refers to nesting as an inner block.
- */
-
-/**
- * Determines whether the user positioning the dragged block to nest as an
- * inner block.
- *
- * Presently this is determined by whether the cursor is on the right hand side
- * of the block.
- *
- * @param {WPPoint} point The point representing the cursor position when dragging.
- * @param {DOMRect} rect  The rectangle.
- */
-function isNestingGesture( point, rect ) {
-	const blockCenterX = rect.left + rect.width / 2;
-	return point.x > blockCenterX;
-}
-
-// Block navigation is always a vertical list, so only allow dropping
-// to the above or below a block.
-const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
-
-/**
- * Given blocks data and the cursor position, compute the drop target.
- *
- * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
- * @param {WPPoint}                  position   The point representing the cursor position when dragging.
- *
- * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
- */
-function getListViewDropTarget( blocksData, position ) {
-	let candidateEdge;
-	let candidateBlockData;
-	let candidateDistance;
-	let candidateRect;
-
-	for ( const blockData of blocksData ) {
-		if ( blockData.isDraggedBlock ) {
-			continue;
-		}
-
-		const rect = blockData.element.getBoundingClientRect();
-		const [ distance, edge ] = getDistanceToNearestEdge(
-			position,
-			rect,
-			ALLOWED_DROP_EDGES
-		);
-
-		const isCursorWithinBlock = isPointContainedByRect( position, rect );
-		if (
-			candidateDistance === undefined ||
-			distance < candidateDistance ||
-			isCursorWithinBlock
-		) {
-			candidateDistance = distance;
-
-			const index = blocksData.indexOf( blockData );
-			const previousBlockData = blocksData[ index - 1 ];
-
-			// If dragging near the top of a block and the preceding block
-			// is at the same level, use the preceding block as the candidate
-			// instead, as later it makes determining a nesting drop easier.
-			if (
-				edge === 'top' &&
-				previousBlockData &&
-				previousBlockData.rootClientId === blockData.rootClientId &&
-				! previousBlockData.isDraggedBlock
-			) {
-				candidateBlockData = previousBlockData;
-				candidateEdge = 'bottom';
-				candidateRect =
-					previousBlockData.element.getBoundingClientRect();
-			} else {
-				candidateBlockData = blockData;
-				candidateEdge = edge;
-				candidateRect = rect;
-			}
-
-			// If the mouse position is within the block, break early
-			// as the user would intend to drop either before or after
-			// this block.
-			//
-			// This solves an issue where some rows in the list view
-			// tree overlap slightly due to sub-pixel rendering.
-			if ( isCursorWithinBlock ) {
-				break;
-			}
-		}
-	}
-
-	if ( ! candidateBlockData ) {
-		return;
-	}
-
-	const isDraggingBelow = candidateEdge === 'bottom';
-
-	// If the user is dragging towards the bottom of the block check whether
-	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, this should always be treated
-	// as nesting since the next block in the tree will be the first child.
-	if (
-		isDraggingBelow &&
-		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( candidateBlockData.innerBlockCount > 0 ||
-			isNestingGesture( position, candidateRect ) )
-	) {
-		return {
-			rootClientId: candidateBlockData.clientId,
-			blockIndex: 0,
-			dropPosition: 'inside',
-		};
-	}
-
-	// If dropping as a sibling, but block cannot be inserted in
-	// this context, return early.
-	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
-		return;
-	}
-
-	const offset = isDraggingBelow ? 1 : 0;
-	return {
-		rootClientId: candidateBlockData.rootClientId,
-		clientId: candidateBlockData.clientId,
-		blockIndex: candidateBlockData.blockIndex + offset,
-		dropPosition: candidateEdge,
-	};
-}
-
-/**
- * A react hook for implementing a drop zone in list view.
- *
- * @return {WPListViewDropZoneTarget} The drop target.
- */
-export default function useListViewDropZone() {
-	const {
-		getBlockRootClientId,
-		getBlockIndex,
-		getBlockCount,
-		getDraggedBlockClientIds,
-		canInsertBlocks,
-	} = useSelect( blockEditorStore );
-	const [ target, setTarget ] = useState();
-	const { rootClientId: targetRootClientId, blockIndex: targetBlockIndex } =
-		target || {};
-
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
-
-	const draggedBlockClientIds = getDraggedBlockClientIds();
-	const throttled = useThrottle(
-		useCallback(
-			( event, currentTarget ) => {
-				const position = { x: event.clientX, y: event.clientY };
-				const isBlockDrag = !! draggedBlockClientIds?.length;
-
-				const blockElements = Array.from(
-					currentTarget.querySelectorAll( '[data-block]' )
-				);
-
-				const blocksData = blockElements.map( ( blockElement ) => {
-					const clientId = blockElement.dataset.block;
-					const rootClientId = getBlockRootClientId( clientId );
-
-					return {
-						clientId,
-						rootClientId,
-						blockIndex: getBlockIndex( clientId ),
-						element: blockElement,
-						isDraggedBlock: isBlockDrag
-							? draggedBlockClientIds.includes( clientId )
-							: false,
-						innerBlockCount: getBlockCount( clientId ),
-						canInsertDraggedBlocksAsSibling: isBlockDrag
-							? canInsertBlocks(
-									draggedBlockClientIds,
-									rootClientId
-							  )
-							: true,
-						canInsertDraggedBlocksAsChild: isBlockDrag
-							? canInsertBlocks( draggedBlockClientIds, clientId )
-							: true,
-					};
-				} );
-
-				const newTarget = getListViewDropTarget( blocksData, position );
-
-				if ( newTarget ) {
-					setTarget( newTarget );
-				}
-			},
-			[ draggedBlockClientIds ]
-		),
-		200
-	);
-
-	const ref = useDropZone( {
-		onDrop: onBlockDrop,
-		onDragOver( event ) {
-			// `currentTarget` is only available while the event is being
-			// handled, so get it now and pass it to the thottled function.
-			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
-			throttled( event, event.currentTarget );
-		},
-		onDragEnd() {
-			throttled.cancel();
-			setTarget( null );
-		},
-	} );
-
-	return { ref, target };
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/use-list-view-expand-selected-item.js b/packages/block-editor/src/components/off-canvas-editor/use-list-view-expand-selected-item.js
deleted file mode 100644
index 09b5e09e4713a3..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/use-list-view-expand-selected-item.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export default function useListViewExpandSelectedItem( {
-	firstSelectedBlockClientId,
-	setExpandedState,
-} ) {
-	const [ selectedTreeId, setSelectedTreeId ] = useState( null );
-	const { selectedBlockParentClientIds } = useSelect(
-		( select ) => {
-			const { getBlockParents } = select( blockEditorStore );
-			return {
-				selectedBlockParentClientIds: getBlockParents(
-					firstSelectedBlockClientId,
-					false
-				),
-			};
-		},
-		[ firstSelectedBlockClientId ]
-	);
-
-	const parentClientIds =
-		Array.isArray( selectedBlockParentClientIds ) &&
-		selectedBlockParentClientIds.length
-			? selectedBlockParentClientIds
-			: null;
-
-	// Expand tree when a block is selected.
-	useEffect( () => {
-		// If the selectedTreeId is the same as the selected block,
-		// it means that the block was selected using the block list tree.
-		if ( selectedTreeId === firstSelectedBlockClientId ) {
-			return;
-		}
-
-		// If the selected block has parents, get the top-level parent.
-		if ( parentClientIds ) {
-			// If the selected block has parents,
-			// expand the tree branch.
-			setExpandedState( {
-				type: 'expand',
-				clientIds: selectedBlockParentClientIds,
-			} );
-		}
-	}, [ firstSelectedBlockClientId ] );
-
-	return {
-		setSelectedTreeId,
-	};
-}
diff --git a/packages/block-editor/src/components/off-canvas-editor/utils.js b/packages/block-editor/src/components/off-canvas-editor/utils.js
deleted file mode 100644
index f53f5a4cd4884a..00000000000000
--- a/packages/block-editor/src/components/off-canvas-editor/utils.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-export const getBlockPositionDescription = ( position, siblingCount, level ) =>
-	sprintf(
-		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
-		__( 'Block %1$d of %2$d, Level %3$d' ),
-		position,
-		siblingCount,
-		level
-	);
-
-/**
- * Returns true if the client ID occurs within the block selection or multi-selection,
- * or false otherwise.
- *
- * @param {string}          clientId               Block client ID.
- * @param {string|string[]} selectedBlockClientIds Selected block client ID, or an array of multi-selected blocks client IDs.
- *
- * @return {boolean} Whether the block is in multi-selection set.
- */
-export const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>
-	Array.isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
-		? selectedBlockClientIds.indexOf( clientId ) !== -1
-		: selectedBlockClientIds === clientId;
-
-/**
- * From a start and end clientId of potentially different nesting levels,
- * return the nearest-depth ids that have a common level of depth in the
- * nesting hierarchy. For multiple block selection, this ensure that the
- * selection is always at the same nesting level, and not split across
- * separate levels.
- *
- * @param {string}   startId      The first id of a selection.
- * @param {string}   endId        The end id of a selection, usually one that has been clicked on.
- * @param {string[]} startParents An array of ancestor ids for the start id, in descending order.
- * @param {string[]} endParents   An array of ancestor ids for the end id, in descending order.
- * @return {Object} An object containing the start and end ids.
- */
-export function getCommonDepthClientIds(
-	startId,
-	endId,
-	startParents,
-	endParents
-) {
-	const startPath = [ ...startParents, startId ];
-	const endPath = [ ...endParents, endId ];
-	const depth = Math.min( startPath.length, endPath.length ) - 1;
-	const start = startPath[ depth ];
-	const end = endPath[ depth ];
-
-	return {
-		start,
-		end,
-	};
-}
diff --git a/packages/block-editor/src/components/panel-color-settings/README.md b/packages/block-editor/src/components/panel-color-settings/README.md
new file mode 100644
index 00000000000000..e9f3818fab55c3
--- /dev/null
+++ b/packages/block-editor/src/components/panel-color-settings/README.md
@@ -0,0 +1,102 @@
+# PanelColorSettings
+
+`PanelColorSettings` is a React component that renders a UI for managing various color settings.
+It is essentially a wrapper around the `PanelColorGradientSettings` component, but specifically disables the gradient features.
+
+## Usage
+
+```jsx
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { PanelColorSettings } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+// ...
+
+const MyPanelColorSettings = () => {
+	const [ textColor, setTextColor ] = useState( { color: '#000' } );
+	const [ backgroundColor, setBackgroundColor ] = useState( {
+		color: '#fff',
+	} );
+	const [ overlayTextColor, setOverlayTextColor ] = useState( {
+		color: '#000',
+	} );
+	const [ overlayBackgroundColor, setOverlayBackgroundColor ] = useState( {
+		color: '#eee',
+	} );
+
+	return (
+		<PanelColorSettings
+			__experimentalIsRenderedInSidebar
+			title={ __( 'Color' ) }
+			colorSettings={ [
+				{
+					value: textColor.color,
+					onChange: setTextColor,
+					label: __( 'Text' ),
+				},
+				{
+					value: backgroundColor.color,
+					onChange: setBackgroundColor,
+					label: __( 'Background' ),
+				},
+				{
+					value: overlayTextColor.color,
+					onChange: setOverlayTextColor,
+					label: __( 'Submenu & overlay text' ),
+				},
+				{
+					value: overlayBackgroundColor.color,
+					onChange: setOverlayBackgroundColor,
+					label: __( 'Submenu & overlay background' ),
+				},
+			] }
+		/>
+	);
+};
+
+/// ...
+
+<MyPanelColorSettings />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### colorSettings
+
+A user-provided set of color settings.
+
+- Type: `Array`
+- Required: No
+
+Colors settings are provided as an array of objects with the following schema:
+
+| Property | Description                       | Type     |
+| -------- | --------------------------------- | -------- |
+| value    | The current color of the setting  | string   |
+| onChange | Callback on change of the setting | Function |
+| label    | Label of the setting              | string   |
+
+Additionally, the following `PanelColorGradientSettings` props are supported and directly passed down to the underlying `PanelColorGradientSettings` instance:
+
+- `className` - added to the underlying `ToolsPanel` instance.
+- `colors` - array of colors to be used.
+- `gradients` - not recommended to be used since `PanelColorSettings` resets it.
+- `disableCustomColors` - whether addition of custom colors is enabled
+- `disableCustomGradients` - not recommended to be used since `PanelColorSettings` sets it.
+- `children` - displayed below the underlying `PanelColorGradientSettings` instance.
+- `settings` - not recommended to be used, since `PanelColorSettings` builds it from the `colorSettings` prop.
+- `title` - title of the underlying `ToolsPanel`.
+- `showTitle` - whether to show the title of the `ToolsPanel`.
+- `__experimentalIsRenderedInSidebar`
+- `enableAlpha` - whether to enable setting opacity when specifying a color.
+
+Please refer to the `PanelColorGradientSettings` component for more information.
diff --git a/packages/block-editor/src/components/panel-color-settings/index.js b/packages/block-editor/src/components/panel-color-settings/index.js
index eb235b9877edda..29a444def88a20 100644
--- a/packages/block-editor/src/components/panel-color-settings/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/index.js
@@ -19,7 +19,7 @@ const PanelColorSettings = ( { colorSettings, ...props } ) => {
 		<PanelColorGradientSettings
 			settings={ settings }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 			{ ...props }
 		/>
 	);
diff --git a/packages/block-editor/src/components/panel-color-settings/test/index.js b/packages/block-editor/src/components/panel-color-settings/test/index.js
index e93c72b89a66e7..52edfa23ce718b 100644
--- a/packages/block-editor/src/components/panel-color-settings/test/index.js
+++ b/packages/block-editor/src/components/panel-color-settings/test/index.js
@@ -16,7 +16,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -39,7 +39,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
@@ -63,7 +63,7 @@ describe( 'PanelColorSettings', () => {
 			<PanelColorSettings
 				title="Test Title"
 				colors={ [] }
-				disableCustomColors={ true }
+				disableCustomColors
 				colorSettings={ [
 					{
 						value: '#000',
diff --git a/packages/block-editor/src/components/plain-text/README.md b/packages/block-editor/src/components/plain-text/README.md
index 64d1c04b5c09bc..aa15758118afdc 100644
--- a/packages/block-editor/src/components/plain-text/README.md
+++ b/packages/block-editor/src/components/plain-text/README.md
@@ -20,36 +20,9 @@ _Optional._ The component forwards the `ref` property to the `TextareaAutosize`
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			type: 'string',
-		},
-	},
-
-	edit: function( props ) {
-		return wp.element.createElement( wp.editor.PlainText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			},
-		} );
-	},
-} );
-```
-
-{% ESNext %}
-
 ```js
-const { registerBlockType } = wp.blocks;
-const { PlainText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { PlainText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...
@@ -72,4 +45,3 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
diff --git a/packages/block-editor/src/components/plain-text/style.scss b/packages/block-editor/src/components/plain-text/content.scss
similarity index 100%
rename from packages/block-editor/src/components/plain-text/style.scss
rename to packages/block-editor/src/components/plain-text/content.scss
diff --git a/packages/block-editor/src/components/plain-text/index.js b/packages/block-editor/src/components/plain-text/index.js
index 2a4e1b423e6094..4bd6681f4eb079 100644
--- a/packages/block-editor/src/components/plain-text/index.js
+++ b/packages/block-editor/src/components/plain-text/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'block-editor-plain-text', className ) }
+			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...remainingProps }
 		/>
diff --git a/packages/block-editor/src/components/plain-text/index.native.js b/packages/block-editor/src/components/plain-text/index.native.js
index dc1af954c6e1cd..d61c3647af0184 100644
--- a/packages/block-editor/src/components/plain-text/index.native.js
+++ b/packages/block-editor/src/components/plain-text/index.native.js
@@ -7,7 +7,12 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../rich-text';
 
 /**
  * Internal dependencies
diff --git a/packages/block-editor/src/components/preview-options/README.md b/packages/block-editor/src/components/preview-options/README.md
deleted file mode 100644
index 0a2e89a70c7d44..00000000000000
--- a/packages/block-editor/src/components/preview-options/README.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# Preview Options
-
-The `PreviewOptions` component displays the list of different preview options available in the editor.
-
-It returns a [`DropdownMenu`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/dropdown-menu) component with these different options. The options currently available in the editor are Desktop, Mobile, Tablet and "Preview in new tab".
-
-![Preview options dropdown menu](https://make.wordpress.org/core/files/2020/09/preview-options-dropdown-menu.png)
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
-## Development guidelines
-
-### Usage
-
-Renders the previews options of the editor in a dropdown menu.
-
-```jsx
-import { Icon, MenuGroup } from '@wordpress/components';
-import { PostPreviewButton } from '@wordpress/editor';
-import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
-
-const MyPreviewOptions = () => (
-	<PreviewOptions
-		isEnabled={ true }
-		className="edit-post-post-preview-dropdown"
-		deviceType={ deviceType }
-		setDeviceType={ setPreviewDeviceType }
-	>
-		<MenuGroup>
-			<div className="edit-post-header-preview__grouping-external">
-				<PostPreviewButton
-					className={ 'edit-post-header-preview__button-external' }
-					role="menuitem"
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-					textContent={
-						<>
-							{ __( 'Preview in new tab' ) }
-							<Icon icon={ external } />
-						</>
-					}
-				/>
-			</div>
-		</MenuGroup>
-	</PreviewOptions>
-);
-```
-
-### Props
-
-#### className
-
-The CSS classes added to the component.
-
--   Type: `String`
--   Required: no
-
-#### isEnabled
-
-Wheter or not the preview options are enabled for the current post.
-And example of when the preview options are not enabled is when the current post is not savable.
-
--   Type: `boolean`
--   Required: no
--   Default: true
-
-#### deviceType
-
-The device type in the preview options. It can be either Desktop or Tablet or Mobile among others.
-
--   Type: `String`
--   Required: yes
-
-#### setDeviceType
-
-Used to set the device type that will be used to display the preview inside the editor.
-
--   Type: `func`
--   Required: yes
-
-## Related components
-
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js
index 2b4c0dc7a95fe4..8f540c35f64551 100644
--- a/packages/block-editor/src/components/preview-options/index.js
+++ b/packages/block-editor/src/components/preview-options/index.js
@@ -1,79 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
-
-export default function PreviewOptions( {
-	children,
-	viewLabel,
-	className,
-	isEnabled = true,
-	deviceType,
-	setDeviceType,
-} ) {
-	const isMobile = useViewportMatch( 'small', '<' );
-	if ( isMobile ) return null;
+import deprecated from '@wordpress/deprecated';
 
-	const popoverProps = {
-		className: classnames(
-			className,
-			'block-editor-post-preview__dropdown-content'
-		),
-		position: 'bottom left',
-	};
-	const toggleProps = {
-		variant: 'tertiary',
-		className: 'block-editor-post-preview__button-toggle',
-		disabled: ! isEnabled,
-		children: viewLabel,
-	};
-	const menuProps = {
-		'aria-label': __( 'View options' ),
-	};
-	return (
-		<DropdownMenu
-			className="block-editor-post-preview__dropdown"
-			popoverProps={ popoverProps }
-			toggleProps={ toggleProps }
-			menuProps={ menuProps }
-			icon={ null }
-		>
-			{ () => (
-				<>
-					<MenuGroup>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Desktop' ) }
-							icon={ deviceType === 'Desktop' && check }
-						>
-							{ __( 'Desktop' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Tablet' ) }
-							icon={ deviceType === 'Tablet' && check }
-						>
-							{ __( 'Tablet' ) }
-						</MenuItem>
-						<MenuItem
-							className="block-editor-post-preview__button-resize"
-							onClick={ () => setDeviceType( 'Mobile' ) }
-							icon={ deviceType === 'Mobile' && check }
-						>
-							{ __( 'Mobile' ) }
-						</MenuItem>
-					</MenuGroup>
-					{ children }
-				</>
-			) }
-		</DropdownMenu>
-	);
+export default function PreviewOptions() {
+	deprecated( 'wp.blockEditor.PreviewOptions', {
+		version: '6.5',
+	} );
+	return null;
 }
diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss
deleted file mode 100644
index fb79926ba1dee9..00000000000000
--- a/packages/block-editor/src/components/preview-options/style.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.block-editor-post-preview__dropdown {
-	padding: 0;
-}
-
-.block-editor-post-preview__button-resize.block-editor-post-preview__button-resize {
-	padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
-	&.has-icon {
-		padding-left: $grid-unit-10;
-	}
-}
-
-.block-editor-post-preview__dropdown-content {
-	&.edit-post-post-preview-dropdown {
-		.components-menu-group {
-			&:first-child {
-				padding-bottom: $grid-unit-10;
-			}
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	.components-menu-group + .components-menu-group {
-		padding: $grid-unit-10;
-	}
-}
-
-.edit-post-header__settings,
-.edit-site-header-edit-mode__actions {
-	@include break-small () {
-		.editor-post-preview {
-			display: none;
-		}
-	}
-}
-
-// Reduced UI.
-.edit-post-header.has-reduced-ui {
-	@include break-small() {
-		// Apply transition to first two buttons.
-		.edit-post-header__settings .editor-post-save-draft,
-		.edit-post-header__settings .editor-post-saved-state,
-		.edit-post-header__settings .block-editor-post-preview__button-toggle {
-			transition: opacity 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		// Zero out opacity unless hovered.
-		&:not(:hover) {
-			.edit-post-header__settings .editor-post-save-draft,
-			.edit-post-header__settings .editor-post-saved-state,
-			.edit-post-header__settings .block-editor-post-preview__button-toggle {
-				opacity: 0;
-			}
-
-			// ... or opened.
-			.edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened {
-				opacity: 1;
-			}
-		}
-	}
-}
diff --git a/packages/block-editor/src/components/provider/README.md b/packages/block-editor/src/components/provider/README.md
index 8d78e5b85db0e7..4f72386cba2a56 100644
--- a/packages/block-editor/src/components/provider/README.md
+++ b/packages/block-editor/src/components/provider/README.md
@@ -33,7 +33,7 @@ A callback invoked when the blocks have been modified in a non-persistent manner
 
 ### `children`
 
--   **Type:** `WPElement`
+-   **Type:** `Element`
 -   **Required** `no`
 
 Children elements for which the BlockEditorProvider context should apply.
diff --git a/packages/block-editor/src/components/provider/block-refs-provider.js b/packages/block-editor/src/components/provider/block-refs-provider.js
index 3f2d19b658a630..e54680356efda2 100644
--- a/packages/block-editor/src/components/provider/block-refs-provider.js
+++ b/packages/block-editor/src/components/provider/block-refs-provider.js
@@ -2,17 +2,12 @@
  * WordPress dependencies
  */
 import { createContext, useMemo } from '@wordpress/element';
+import { observableMap } from '@wordpress/compose';
 
-export const BlockRefs = createContext( {
-	refs: new Map(),
-	callbacks: new Map(),
-} );
+export const BlockRefs = createContext( { refsMap: observableMap() } );
 
 export function BlockRefsProvider( { children } ) {
-	const value = useMemo(
-		() => ( { refs: new Map(), callbacks: new Map() } ),
-		[]
-	);
+	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
 	return (
 		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
 	);
diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
index 8851a2b9b47a15..abbb122ae3a0e0 100644
--- a/packages/block-editor/src/components/provider/index.js
+++ b/packages/block-editor/src/components/provider/index.js
@@ -3,6 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,21 +12,53 @@ import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
+import { unlock } from '../../lock-unlock';
+import KeyboardShortcuts from '../keyboard-shortcuts';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
-function BlockEditorProvider( props ) {
-	const { children, settings } = props;
+export const ExperimentalBlockEditorProvider = withRegistryProvider(
+	( props ) => {
+		const { children, settings, stripExperimentalSettings = false } = props;
 
-	const { updateSettings } = useDispatch( blockEditorStore );
-	useEffect( () => {
-		updateSettings( settings );
-	}, [ settings ] );
+		const { __experimentalUpdateSettings } = unlock(
+			useDispatch( blockEditorStore )
+		);
+		useEffect( () => {
+			__experimentalUpdateSettings(
+				{
+					...settings,
+					__internalIsInitialized: true,
+				},
+				{
+					stripExperimentalSettings,
+					reset: true,
+				}
+			);
+		}, [
+			settings,
+			stripExperimentalSettings,
+			__experimentalUpdateSettings,
+		] );
 
-	// Syncs the entity provider with changes in the block-editor store.
-	useBlockSync( props );
+		// Syncs the entity provider with changes in the block-editor store.
+		useBlockSync( props );
 
-	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-}
+		return (
+			<SlotFillProvider passthrough>
+				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
+				<BlockRefsProvider>{ children }</BlockRefsProvider>
+			</SlotFillProvider>
+		);
+	}
+);
 
-export default withRegistryProvider( BlockEditorProvider );
+export const BlockEditorProvider = ( props ) => {
+	return (
+		<ExperimentalBlockEditorProvider { ...props } stripExperimentalSettings>
+			{ props.children }
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export default BlockEditorProvider;
diff --git a/packages/block-editor/src/components/provider/index.native.js b/packages/block-editor/src/components/provider/index.native.js
index 8851a2b9b47a15..1bb790a20c19d2 100644
--- a/packages/block-editor/src/components/provider/index.native.js
+++ b/packages/block-editor/src/components/provider/index.native.js
@@ -14,7 +14,7 @@ import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
-function BlockEditorProvider( props ) {
+const BlockEditorProvider = withRegistryProvider( function ( props ) {
 	const { children, settings } = props;
 
 	const { updateSettings } = useDispatch( blockEditorStore );
@@ -26,6 +26,7 @@ function BlockEditorProvider( props ) {
 	useBlockSync( props );
 
 	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-}
+} );
 
-export default withRegistryProvider( BlockEditorProvider );
+export default BlockEditorProvider;
+export { BlockEditorProvider as ExperimentalBlockEditorProvider };
diff --git a/packages/block-editor/src/components/provider/test/experimental-provider.js b/packages/block-editor/src/components/provider/test/experimental-provider.js
new file mode 100644
index 00000000000000..8bb94698fffc81
--- /dev/null
+++ b/packages/block-editor/src/components/provider/test/experimental-provider.js
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
+import { store as blockEditorStore } from '../../../store';
+
+const HasEditorSetting = ( props ) => {
+	const registry = useRegistry();
+	if ( props.setRegistry ) {
+		props.setRegistry( registry );
+	}
+	return <p>Test.</p>;
+};
+
+const PreviewModeGetter = () => {
+	const previewModeKeys = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			// This property will be removed in the future. There is a test that asserts we're throwing a deprecation warning.
+			__unstableIsPreviewMode: settings.__unstableIsPreviewMode,
+			isPreviewMode: settings.isPreviewMode,
+		};
+	}, [] );
+
+	return <>{ JSON.stringify( previewModeKeys ) }</>;
+};
+
+describe( 'BlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should not allow updating experimental settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					blockInspectorAnimation: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		// `blockInspectorAnimation` setting is one of the block editor's
+		// default settings, so it has a value. We're testing that its
+		// value was not updated.
+		expect( settings.blockInspectorAnimation ).not.toBe( true );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+	it( 'preserves deprecated getters incoming from the settings reducer', async () => {
+		const consoleWarn = jest
+			.spyOn( global.console, 'warn' )
+			.mockImplementation();
+
+		const { container } = render(
+			<BlockEditorProvider
+				settings={ {
+					isPreviewMode: true,
+				} }
+			>
+				<PreviewModeGetter />
+			</BlockEditorProvider>
+		);
+
+		expect( container ).toHaveTextContent(
+			JSON.stringify( {
+				__unstableIsPreviewMode: true,
+				isPreviewMode: true,
+			} )
+		);
+
+		expect( consoleWarn ).toHaveBeenCalledWith(
+			'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+		);
+
+		consoleWarn.mockRestore();
+	} );
+} );
+
+describe( 'ExperimentalBlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should allow updating/adding experimental settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					blockInspectorAnimation: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings.blockInspectorAnimation ).toBe( true );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+} );
diff --git a/packages/block-editor/src/components/provider/test/use-block-sync.js b/packages/block-editor/src/components/provider/test/use-block-sync.js
index 9f8b091e52a10b..b2afdb942e66fa 100644
--- a/packages/block-editor/src/components/provider/test/use-block-sync.js
+++ b/packages/block-editor/src/components/provider/test/use-block-sync.js
@@ -14,14 +14,26 @@ import { render } from '@testing-library/react';
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
+
 import { store as blockEditorStore } from '../../../store';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		resetBlocks: jest.fn( actions.resetBlocks ),
+		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: jest.fn(
+			actions.setHasControlledInnerBlocks
+		),
+	};
+} );
 
 const TestWrapper = withRegistryProvider( ( props ) => {
 	if ( props.setRegistry ) {
 		props.setRegistry( props.registry );
 	}
 	useBlockSync( props );
-	return <p>Test.</p>;
+	return null;
 } );
 
 describe( 'useBlockSync hook', () => {
@@ -38,7 +50,7 @@ describe( 'useBlockSync hook', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'resets the block-editor blocks when the controll value changes', async () => {
+	it( 'resets the block-editor blocks when the controlled value changes', async () => {
 		const fakeBlocks = [];
 		const resetBlocks = jest.spyOn( blockEditorActions, 'resetBlocks' );
 		const replaceInnerBlocks = jest.spyOn(
@@ -48,7 +60,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				value={ fakeBlocks }
 				onChange={ onChange }
@@ -61,6 +73,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( fakeBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
@@ -78,9 +91,18 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( testBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 2 );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
+		expect( resetBlocks ).toHaveBeenCalledWith( [] );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
-	it( 'replaces the inner blocks of a block when the control value changes if a clientId is passed', async () => {
+	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
 		const fakeBlocks = [];
 		const replaceInnerBlocks = jest.spyOn(
 			blockEditorActions,
@@ -90,7 +112,7 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		const { rerender } = render(
+		const { rerender, unmount } = render(
 			<TestWrapper
 				clientId="test"
 				value={ fakeBlocks }
@@ -106,6 +128,7 @@ describe( 'useBlockSync hook', () => {
 			'test', // It should use the given client ID.
 			fakeBlocks // It should use the controlled blocks value.
 		);
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{
@@ -128,8 +151,18 @@ describe( 'useBlockSync hook', () => {
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( resetBlocks ).not.toHaveBeenCalled();
-		// We can't check the args because the blocks are cloned.
-		expect( replaceInnerBlocks ).toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [
+			expect.objectContaining( { name: 'test/test-block' } ),
+		] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 2 );
+
+		unmount();
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect( onInput ).not.toHaveBeenCalled();
+		expect( resetBlocks ).not.toHaveBeenCalled();
+		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {
@@ -238,13 +271,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onInput ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onChange ).not.toHaveBeenCalled();
 	} );
@@ -278,13 +311,13 @@ describe( 'useBlockSync hook', () => {
 
 		expect( onChange ).toHaveBeenCalledWith(
 			[ { clientId: 'a', innerBlocks: [], attributes: { foo: 2 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -329,6 +362,7 @@ describe( 'useBlockSync hook', () => {
 		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -381,13 +415,13 @@ describe( 'useBlockSync hook', () => {
 					attributes: { foo: 2 },
 				},
 			],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 		expect( onInput ).not.toHaveBeenCalled();
 	} );
@@ -422,13 +456,16 @@ describe( 'useBlockSync hook', () => {
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 2 } },
 		];
 
-		expect( onChange1 ).toHaveBeenCalledWith( updatedBlocks1, {
-			selection: {
-				initialPosition: null,
-				selectionEnd: {},
-				selectionStart: {},
-			},
-		} );
+		expect( onChange1 ).toHaveBeenCalledWith(
+			updatedBlocks1,
+			expect.objectContaining( {
+				selection: {
+					initialPosition: null,
+					selectionEnd: {},
+					selectionStart: {},
+				},
+			} )
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -460,13 +497,13 @@ describe( 'useBlockSync hook', () => {
 		// The second callback should be called with the new change.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 
@@ -519,13 +556,13 @@ describe( 'useBlockSync hook', () => {
 		// Only the new callback should be called.
 		expect( onChange2 ).toHaveBeenCalledWith(
 			[ { clientId: 'b', innerBlocks: [], attributes: { foo: 3 } } ],
-			{
+			expect.objectContaining( {
 				selection: {
 					selectionEnd: {},
 					selectionStart: {},
 					initialPosition: null,
 				},
-			}
+			} )
 		);
 	} );
 } );
diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js
index e17a9054f5d123..fa148109d510f6 100644
--- a/packages/block-editor/src/components/provider/use-block-sync.js
+++ b/packages/block-editor/src/components/provider/use-block-sync.js
@@ -79,7 +79,8 @@ export default function useBlockSync( {
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( blockEditorStore );
-	const { getBlockName, getBlocks } = registry.select( blockEditorStore );
+	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
+		registry.select( blockEditorStore );
 	const isControlled = useSelect(
 		( select ) => {
 			return (
@@ -90,8 +91,8 @@ export default function useBlockSync( {
 		[ clientId ]
 	);
 
-	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
-	const subscribed = useRef( false );
+	const pendingChangesRef = useRef( { incoming: null, outgoing: [] } );
+	const subscribedRef = useRef( false );
 
 	const setControlledBlocks = () => {
 		if ( ! controlledBlocks ) {
@@ -112,20 +113,33 @@ export default function useBlockSync( {
 				const storeBlocks = controlledBlocks.map( ( block ) =>
 					cloneBlock( block )
 				);
-				if ( subscribed.current ) {
-					pendingChanges.current.incoming = storeBlocks;
+				if ( subscribedRef.current ) {
+					pendingChangesRef.current.incoming = storeBlocks;
 				}
 				__unstableMarkNextChangeAsNotPersistent();
 				replaceInnerBlocks( clientId, storeBlocks );
 			} );
 		} else {
-			if ( subscribed.current ) {
-				pendingChanges.current.incoming = controlledBlocks;
+			if ( subscribedRef.current ) {
+				pendingChangesRef.current.incoming = controlledBlocks;
 			}
 			resetBlocks( controlledBlocks );
 		}
 	};
 
+	// Clean up the changes made by setControlledBlocks() when the component
+	// containing useBlockSync() unmounts.
+	const unsetControlledBlocks = () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		if ( clientId ) {
+			setHasControlledInnerBlocks( clientId, false );
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceInnerBlocks( clientId, [] );
+		} else {
+			resetBlocks( [] );
+		}
+	};
+
 	// Add a subscription to the block-editor registry to detect when changes
 	// have been made. This lets us inform the data source of changes. This
 	// is an effect so that the subscriber can run synchronously without
@@ -139,7 +153,7 @@ export default function useBlockSync( {
 
 	// Determine if blocks need to be reset when they change.
 	useEffect( () => {
-		if ( pendingChanges.current.outgoing.includes( controlledBlocks ) ) {
+		if ( pendingChangesRef.current.outgoing.includes( controlledBlocks ) ) {
 			// Skip block reset if the value matches expected outbound sync
 			// triggered by this component by a preceding change detection.
 			// Only skip if the value matches expectation, since a reset should
@@ -147,18 +161,18 @@ export default function useBlockSync( {
 			// to allow that the consumer may apply modifications to reflect
 			// back on the editor.
 			if (
-				pendingChanges.current.outgoing[
-					pendingChanges.current.outgoing.length - 1
+				pendingChangesRef.current.outgoing[
+					pendingChangesRef.current.outgoing.length - 1
 				] === controlledBlocks
 			) {
-				pendingChanges.current.outgoing = [];
+				pendingChangesRef.current.outgoing = [];
 			}
 		} else if ( getBlocks( clientId ) !== controlledBlocks ) {
 			// Reset changing value in all other cases than the sync described
 			// above. Since this can be reached in an update following an out-
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
-			pendingChanges.current.outgoing = [];
+			pendingChangesRef.current.outgoing = [];
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -171,19 +185,25 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	const isMountedRef = useRef( false );
+
 	useEffect( () => {
+		// On mount, controlled blocks are already set in the effect above.
+		if ( ! isMountedRef.current ) {
+			isMountedRef.current = true;
+			return;
+		}
+
 		// When the block becomes uncontrolled, it means its inner state has been reset
 		// we need to take the blocks again from the external value property.
 		if ( ! isControlled ) {
-			pendingChanges.current.outgoing = [];
+			pendingChangesRef.current.outgoing = [];
 			setControlledBlocks();
 		}
 	}, [ isControlled ] );
 
 	useEffect( () => {
 		const {
-			getSelectionStart,
-			getSelectionEnd,
 			getSelectedBlocksInitialCaretPosition,
 			isLastBlockChangePersistent,
 			__unstableIsLastBlockChangeIgnored,
@@ -194,7 +214,7 @@ export default function useBlockSync( {
 		let isPersistent = isLastBlockChangePersistent();
 		let previousAreBlocksDifferent = false;
 
-		subscribed.current = true;
+		subscribedRef.current = true;
 		const unsubscribe = registry.subscribe( () => {
 			// Sometimes, when changing block lists, lingering subscriptions
 			// might trigger before they are cleaned up. If the block for which
@@ -203,8 +223,9 @@ export default function useBlockSync( {
 			// the subscription is triggering for a block (`clientId !== null`)
 			// and its block name can't be found because it's not on the list.
 			// (`getBlockName( clientId ) === null`).
-			if ( clientId !== null && getBlockName( clientId ) === null )
+			if ( clientId !== null && getBlockName( clientId ) === null ) {
 				return;
+			}
 
 			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
 			// can reset to uncontrolled, in these situations, it means we need to populate
@@ -220,13 +241,12 @@ export default function useBlockSync( {
 			const newBlocks = getBlocks( clientId );
 			const areBlocksDifferent = newBlocks !== blocks;
 			blocks = newBlocks;
-
 			if (
 				areBlocksDifferent &&
-				( pendingChanges.current.incoming ||
+				( pendingChangesRef.current.incoming ||
 					__unstableIsLastBlockChangeIgnored() )
 			) {
-				pendingChanges.current.incoming = null;
+				pendingChangesRef.current.incoming = null;
 				isPersistent = newIsPersistent;
 				return;
 			}
@@ -246,7 +266,7 @@ export default function useBlockSync( {
 				// We need to be aware that it was caused by an outgoing change
 				// so that we do not treat it as an incoming change later on,
 				// which would cause a block reset.
-				pendingChanges.current.outgoing.push( blocks );
+				pendingChangesRef.current.outgoing.push( blocks );
 
 				// Inform the controlling entity that changes have been made to
 				// the block-editor store they should be aware about.
@@ -263,8 +283,17 @@ export default function useBlockSync( {
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;
-		} );
+		}, blockEditorStore );
 
-		return () => unsubscribe();
+		return () => {
+			subscribedRef.current = false;
+			unsubscribe();
+		};
 	}, [ registry, clientId ] );
+
+	useEffect( () => {
+		return () => {
+			unsetControlledBlocks();
+		};
+	}, [] );
 }
diff --git a/packages/block-editor/src/components/provider/with-registry-provider.js b/packages/block-editor/src/components/provider/with-registry-provider.js
index 5c00da6e93eabc..582a9bd547f20e 100644
--- a/packages/block-editor/src/components/provider/with-registry-provider.js
+++ b/packages/block-editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -15,41 +11,40 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig } from '../../store';
 import { STORE_NAME as blockEditorStoreName } from '../../store/constants';
 
-const withRegistryProvider = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return withRegistry(
-			( { useSubRegistry = true, registry, ...props } ) => {
-				if ( ! useSubRegistry ) {
-					return (
-						<WrappedComponent registry={ registry } { ...props } />
-					);
-				}
-
-				const [ subRegistry, setSubRegistry ] = useState( null );
-				useEffect( () => {
-					const newRegistry = createRegistry( {}, registry );
-					newRegistry.registerStore(
-						blockEditorStoreName,
-						storeConfig
-					);
-					setSubRegistry( newRegistry );
-				}, [ registry ] );
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry( {}, registry );
+		subRegistry.registerStore( blockEditorStoreName, storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
 
-				if ( ! subRegistry ) {
-					return null;
-				}
+const withRegistryProvider = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
+				registry,
+				useSubRegistry
+			);
 
-				return (
-					<RegistryProvider value={ subRegistry }>
-						<WrappedComponent
-							registry={ subRegistry }
-							{ ...props }
-						/>
-					</RegistryProvider>
-				);
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
-		);
-	},
+
+			return (
+				<RegistryProvider value={ subRegistry }>
+					<WrappedComponent registry={ subRegistry } { ...props } />
+				</RegistryProvider>
+			);
+		},
 	'withRegistryProvider'
 );
 
diff --git a/packages/block-editor/src/components/publish-date-time-picker/README.md b/packages/block-editor/src/components/publish-date-time-picker/README.md
index af98bebfdfda95..a7d92250c7cb0f 100644
--- a/packages/block-editor/src/components/publish-date-time-picker/README.md
+++ b/packages/block-editor/src/components/publish-date-time-picker/README.md
@@ -10,9 +10,9 @@ for more information.
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { Dropdown, Button } from '@wordpress/components';
 import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
 
 const MyDateTimePicker = () => {
 	const [ date, setDate ] = useState( new Date() );
diff --git a/packages/block-editor/src/components/publish-date-time-picker/index.js b/packages/block-editor/src/components/publish-date-time-picker/index.js
index 364fb095948024..eeaa5b2daad6fa 100644
--- a/packages/block-editor/src/components/publish-date-time-picker/index.js
+++ b/packages/block-editor/src/components/publish-date-time-picker/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { DateTimePicker } from '@wordpress/components';
+import { DateTimePicker, TimePicker } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
 import { getSettings } from '@wordpress/date';
@@ -11,31 +11,57 @@ import { getSettings } from '@wordpress/date';
  */
 import InspectorPopoverHeader from '../inspector-popover-header';
 
-function PublishDateTimePicker(
-	{ onClose, onChange, ...additionalProps },
+export function PublishDateTimePicker(
+	{
+		onClose,
+		onChange,
+		showPopoverHeaderActions,
+		isCompact,
+		currentDate,
+		...additionalProps
+	},
 	ref
 ) {
+	const datePickerProps = {
+		startOfWeek: getSettings().l10n.startOfWeek,
+		onChange,
+		currentDate: isCompact ? undefined : currentDate,
+		currentTime: isCompact ? currentDate : undefined,
+		...additionalProps,
+	};
+	const DatePickerComponent = isCompact ? TimePicker : DateTimePicker;
 	return (
 		<div ref={ ref } className="block-editor-publish-date-time-picker">
 			<InspectorPopoverHeader
 				title={ __( 'Publish' ) }
-				actions={ [
-					{
-						label: __( 'Now' ),
-						onClick: () => onChange?.( null ),
-					},
-				] }
+				actions={
+					showPopoverHeaderActions
+						? [
+								{
+									label: __( 'Now' ),
+									onClick: () => onChange?.( null ),
+								},
+						  ]
+						: undefined
+				}
 				onClose={ onClose }
 			/>
-			<DateTimePicker
-				startOfWeek={ getSettings().l10n.startOfWeek }
-				__nextRemoveHelpButton
-				__nextRemoveResetButton
-				onChange={ onChange }
-				{ ...additionalProps }
-			/>
+			<DatePickerComponent { ...datePickerProps } />
 		</div>
 	);
 }
 
-export default forwardRef( PublishDateTimePicker );
+export const PrivatePublishDateTimePicker = forwardRef( PublishDateTimePicker );
+
+function PublicPublishDateTimePicker( props, ref ) {
+	return (
+		<PrivatePublishDateTimePicker
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( PublicPublishDateTimePicker );
diff --git a/packages/block-editor/src/components/recursion-provider/README.md b/packages/block-editor/src/components/recursion-provider/README.md
new file mode 100644
index 00000000000000..37af15d75c1914
--- /dev/null
+++ b/packages/block-editor/src/components/recursion-provider/README.md
@@ -0,0 +1,101 @@
+# RecursionProvider
+
+According to Gutenberg's block rendering architecture, any block type capable of recursion should be responsible for handling its own infinite loops. 
+
+To help with detecting infinite loops on the client, the `RecursionProvider` component and the `useHasRecursion()` hook are used to identify if a block has already been rendered. 
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	RecursionProvider,
+	useHasRecursion,
+	useBlockProps,
+	Warning,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyRecursiveBlockEdit( { attributes: { ref } } ) {
+	const hasAlreadyRendered = useHasRecursion( ref );
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+
+	if ( hasAlreadyRendered ) {
+		return (
+			<div { ...blockProps }>
+				<Warning>
+					{ __( 'Block cannot be rendered inside itself.' ) }
+				</Warning>
+			</div>
+		);
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			Block editing code here....
+		</RecursionProvider>
+	);
+}
+
+/// ...
+
+<MyRecursiveBlockEdit />;
+```
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### children
+
+Components to be rendered as content.
+
+- Type: `Element`
+- Required: Yes.
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
+# `useHasRecursion()`
+
+Used in conjunction with `RecursionProvider`, this hook is used to identify if a block has already been rendered.
+
+## Usage
+
+For example usage, refer to the example above.
+
+## Props
+
+The component accepts the following props:
+
+### uniqueId
+
+Any value that acts as a unique identifier for a block instance.
+
+- Type: `any`
+- Required: Yes
+
+### blockName
+
+Optional block name.
+
+- Type: `String`
+- Required: No
+- Default: ''
+
diff --git a/packages/block-editor/src/components/recursion-provider/index.js b/packages/block-editor/src/components/recursion-provider/index.js
index 2c38087a8731d4..98a2b5c546f2bf 100644
--- a/packages/block-editor/src/components/recursion-provider/index.js
+++ b/packages/block-editor/src/components/recursion-provider/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createContext, useContext, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -82,3 +83,19 @@ export function useHasRecursion( uniqueId, blockName = '' ) {
 	blockName = blockName || name;
 	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }
+
+export const DeprecatedExperimentalRecursionProvider = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalRecursionProvider', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.RecursionProvider',
+	} );
+	return <RecursionProvider { ...props } />;
+};
+
+export const DeprecatedExperimentalUseHasRecursion = ( ...args ) => {
+	deprecated( 'wp.blockEditor.__experimentalUseHasRecursion', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.useHasRecursion',
+	} );
+	return useHasRecursion( ...args );
+};
diff --git a/packages/block-editor/src/components/recursion-provider/test/index.js b/packages/block-editor/src/components/recursion-provider/test/index.js
index d2b4a06bce7954..e835cec670b3de 100644
--- a/packages/block-editor/src/components/recursion-provider/test/index.js
+++ b/packages/block-editor/src/components/recursion-provider/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -19,12 +19,12 @@ function Edit( { attributes: { uniqueId } } ) {
 	const hasRecursion = useHasRecursion( uniqueId );
 
 	if ( hasRecursion ) {
-		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
+		return <div data-testid={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
 		<RecursionProvider uniqueId={ uniqueId }>
-			<div className={ `wp-block__${ name }` }>
+			<div data-testid={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
 					<Edit attributes={ { uniqueId } } />
@@ -51,76 +51,74 @@ describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'allows equal but sibling blocks to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'prevents a block from rendering itself', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SINGLY-RECURSIVE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents a block from rendering itself only when the same block type', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'ANOTHER-BLOCK-SAME-ID' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
+		expect( screen.getByTestId( 'wp-block__another-block' ) ).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__another-block' )
-		).toHaveLength( 1 );
-		expect(
-			container.querySelectorAll( '.wp-block__another-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__another-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents mutual recursion between two blocks', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'MUTUALLY-RECURSIVE-1' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 } );
diff --git a/packages/block-editor/src/components/resizable-box-popover/index.js b/packages/block-editor/src/components/resizable-box-popover/index.js
new file mode 100644
index 00000000000000..61f599663a4f5d
--- /dev/null
+++ b/packages/block-editor/src/components/resizable-box-popover/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverCover from '../block-popover/cover';
+
+export default function ResizableBoxPopover( {
+	clientId,
+	resizableBoxProps,
+	...props
+} ) {
+	return (
+		<BlockPopoverCover
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+			{ ...props }
+		>
+			<ResizableBox { ...resizableBoxProps } />
+		</BlockPopoverCover>
+	);
+}
diff --git a/packages/block-editor/src/components/resolution-tool/index.js b/packages/block-editor/src/components/resolution-tool/index.js
new file mode 100644
index 00000000000000..df43cb6acb096d
--- /dev/null
+++ b/packages/block-editor/src/components/resolution-tool/index.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+
+const DEFAULT_SIZE_OPTIONS = [
+	{
+		label: _x( 'Thumbnail', 'Image size option for resolution control' ),
+		value: 'thumbnail',
+	},
+	{
+		label: _x( 'Medium', 'Image size option for resolution control' ),
+		value: 'medium',
+	},
+	{
+		label: _x( 'Large', 'Image size option for resolution control' ),
+		value: 'large',
+	},
+	{
+		label: _x( 'Full Size', 'Image size option for resolution control' ),
+		value: 'full',
+	},
+];
+
+export default function ResolutionTool( {
+	panelId,
+	value,
+	onChange,
+	options = DEFAULT_SIZE_OPTIONS,
+	defaultValue = DEFAULT_SIZE_OPTIONS[ 0 ].value,
+	isShownByDefault = true,
+} ) {
+	const displayValue = value ?? defaultValue;
+	return (
+		<ToolsPanelItem
+			hasValue={ () => displayValue !== defaultValue }
+			label={ __( 'Resolution' ) }
+			onDeselect={ () => onChange( defaultValue ) }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<SelectControl
+				__nextHasNoMarginBottom
+				label={ __( 'Resolution' ) }
+				value={ displayValue }
+				options={ options }
+				onChange={ onChange }
+				help={ __( 'Select the size of the source image.' ) }
+				size="__unstable-large"
+			/>
+		</ToolsPanelItem>
+	);
+}
diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js
new file mode 100644
index 00000000000000..3fedb6d6facae7
--- /dev/null
+++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	Panel,
+	__experimentalToolsPanel as ToolsPanel,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResolutionTool from '..';
+
+export default {
+	title: 'BlockEditor (Private APIs)/ResolutionControl',
+	component: ResolutionTool,
+	argTypes: {
+		panelId: { control: false },
+		onChange: { action: 'changed' },
+	},
+};
+
+export const Default = ( { panelId, onChange: onChangeProp, ...props } ) => {
+	const [ resolution, setResolution ] = useState( undefined );
+	const resetAll = () => {
+		setResolution( undefined );
+		onChangeProp( undefined );
+	};
+	return (
+		<Panel>
+			<ToolsPanel panelId={ panelId } resetAll={ resetAll }>
+				<ResolutionTool
+					panelId={ panelId }
+					onChange={ ( newValue ) => {
+						setResolution( newValue );
+						onChangeProp( newValue );
+					} }
+					value={ resolution }
+					{ ...props }
+				/>
+			</ToolsPanel>
+		</Panel>
+	);
+};
+Default.args = {
+	panelId: 'panel-id',
+};
diff --git a/packages/block-editor/src/components/responsive-block-control/README.md b/packages/block-editor/src/components/responsive-block-control/README.md
index c9704ab7ca3eff..16183ccd6314f5 100644
--- a/packages/block-editor/src/components/responsive-block-control/README.md
+++ b/packages/block-editor/src/components/responsive-block-control/README.md
@@ -2,7 +2,7 @@
 
 `ResponsiveBlockControl` provides a standardised interface for the creation of Block controls that require **different settings per viewport** (ie: "responsive" settings).
 
-For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screensize_.
+For example, imagine your Block provides a control which affords the ability to change a "padding" value used in the Block display. Consider that whilst this setting may work well on "large" screens, the same value may not work well on smaller screens (it may be too large for example). As a result, you now need to provide a padding control _per viewport/screen size_.
 
 `ResponsiveBlockControl` provides a standardised component for the creation of such interfaces within Gutenberg.
 
@@ -21,51 +21,26 @@ In a block's `edit` implementation, render a `<ResponsiveBlockControl />` compon
 By default the default control will be used to render the default (ie: "All") setting _as well as_ the per-viewport responsive settings.
 
 ```jsx
+import { useState } from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import {
 	InspectorControls,
-	ResponsiveBlockControl,
+	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
 
-import { useState } from '@wordpress/element';
-
-import {
-	DimensionControl,
-} from '@wordpress/components';
-
 registerBlockType( 'my-plugin/my-block', {
 	// ...
 
 	edit( { attributes, setAttributes } ) {
 
 		const [ isResponsive, setIsResponsive ] = useState( false );
-
-		// Used for example purposes only
-		const sizeOptions = [
-			{
-				label: 'Small',
-				value: 'small',
-			},
-			{
-				label: 'Medium',
-				value: 'medium',
-			},
-			{
-				label: 'Large',
-				value: 'large',
-			},
-		];
-
 		const { paddingSize } = attributes;
 
-
 		// Your custom control can be anything you'd like to use.
-		// You are not restricted to `DimensionControl`s, but this
-		// makes life easier if dealing with standard CSS values.
-		// see `packages/components/src/dimension-control/README.md`
 		const paddingControl = ( labelComponent, viewport ) => {
 			return (
-				<DimensionControl
+				<input
+					type="number"
 					label={ viewport.label }
 					onChange={ // handle update to padding value here  }
 					value={ paddingSize }
@@ -156,7 +131,7 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 	// 	id: 'small',
 	// 	label: 'All'
 	// }
-	return <DimensionControl label={ labelComponent } />;
+	return <SelectControl label={ labelComponent } />;
 };
 ```
 
@@ -196,7 +171,7 @@ const renderResponsiveControls = ( viewports ) => {
 ### `toggleLabel`
 
 -   **Type:** `String`
--   **Default:** `Use the same %s on all screensizes.` (where "%s" is the `property` prop - see above )
+-   **Default:** `Use the same %s on all screen sizes.` (where "%s" is the `property` prop - see above )
 -   **Required:** `false`
 
 Optional label used for the toggle control which switches the interface between showing responsive controls or not.
@@ -215,7 +190,7 @@ Optional label used for the toggle control which switches the interface between
 
 -   **Required:** `false`
 
-Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screensizes".
+Optional object describing the attributes of the default value. By default this is `All` which indicates the control will affect "all viewports/screen sizes".
 
 ### `viewports`
 
diff --git a/packages/block-editor/src/components/responsive-block-control/index.js b/packages/block-editor/src/components/responsive-block-control/index.js
index 53854980a1070d..148ba9600f0032 100644
--- a/packages/block-editor/src/components/responsive-block-control/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/index.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 
@@ -26,8 +26,7 @@ function ResponsiveBlockControl( props ) {
 		isResponsive = false,
 		defaultLabel = {
 			id: 'all',
-			/* translators: 'Label. Used to signify a layout property (eg: margin, padding) will apply uniformly to all screensizes.' */
-			label: __( 'All' ),
+			label: _x( 'All', 'screen sizes' ),
 		},
 		viewports = [
 			{
@@ -52,12 +51,11 @@ function ResponsiveBlockControl( props ) {
 	const toggleControlLabel =
 		toggleLabel ||
 		sprintf(
-			/* translators: 'Toggle control label. Should the property be the same across all screen sizes or unique per screen size.'. %s property value for the control (eg: margin, padding...etc) */
-			__( 'Use the same %s on all screensizes.' ),
+			/* translators: %s: Property value for the control (eg: margin, padding, etc.). */
+			__( 'Use the same %s on all screen sizes.' ),
 			property
 		);
 
-	/* translators: 'Help text for the responsive mode toggle control.' */
 	const toggleHelpText = __(
 		'Toggle between using the same value for all screen sizes or using a unique value per screen size.'
 	);
@@ -92,6 +90,7 @@ function ResponsiveBlockControl( props ) {
 
 			<div className="block-editor-responsive-block-control__inner">
 				<ToggleControl
+					__nextHasNoMarginBottom
 					className="block-editor-responsive-block-control__toggle"
 					label={ toggleControlLabel }
 					checked={ ! isResponsive }
@@ -99,7 +98,7 @@ function ResponsiveBlockControl( props ) {
 					help={ toggleHelpText }
 				/>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-responsive-block-control__group',
 						{
 							'is-responsive': isResponsive,
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/style.scss b/packages/block-editor/src/components/responsive-block-control/style.scss
index 7f90e12dd87c66..e840a3bfcf436a 100644
--- a/packages/block-editor/src/components/responsive-block-control/style.scss
+++ b/packages/block-editor/src/components/responsive-block-control/style.scss
@@ -1,6 +1,5 @@
 @mixin screen-reader-text() {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;
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..ef32c60722f541 100644
--- a/packages/block-editor/src/components/responsive-block-control/test/index.js
+++ b/packages/block-editor/src/components/responsive-block-control/test/index.js
@@ -38,13 +38,18 @@ const sizeOptions = [
 
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
-		<Fragment>
-			<SelectControl label={ labelComponent } options={ sizeOptions } />
+		<>
+			<SelectControl
+				__next40pxDefaultSize
+				label={ labelComponent }
+				options={ sizeOptions }
+				__nextHasNoMarginBottom
+			/>
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.
 			</p>
-		</Fragment>
+		</>
 	);
 };
 
@@ -81,7 +86,7 @@ describe( 'Basic rendering', () => {
 		} );
 
 		const toggleState = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -177,7 +182,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ renderTestDefaultControlComponent }
 			/>
 		);
@@ -217,7 +222,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ mockRenderDefaultControl }
 				viewports={ customViewportSet }
 			/>
@@ -244,9 +249,7 @@ describe( 'Default and Responsive modes', () => {
 	} );
 
 	it( 'should switch between default and responsive modes when interacting with toggle control', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const ResponsiveBlockControlConsumer = () => {
 			const [ isResponsive, setIsResponsive ] = useState( false );
 
@@ -270,7 +273,7 @@ describe( 'Default and Responsive modes', () => {
 
 		// Select elements based on what the user can see.
 		const toggleInput = screen.getByRole( 'checkbox', {
-			name: 'Use the same padding on all screensizes.',
+			name: 'Use the same padding on all screen sizes.',
 			checked: true,
 		} );
 
@@ -321,7 +324,7 @@ describe( 'Default and Responsive modes', () => {
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
-				isResponsive={ true }
+				isResponsive
 				renderDefaultControl={ spyRenderDefaultControl }
 				renderResponsiveControls={ mockRenderResponsiveControls }
 			/>
diff --git a/packages/block-editor/src/components/rich-text/README.md b/packages/block-editor/src/components/rich-text/README.md
index 91161414899bfb..11ea1c75204dd7 100644
--- a/packages/block-editor/src/components/rich-text/README.md
+++ b/packages/block-editor/src/components/rich-text/README.md
@@ -12,6 +12,10 @@ _Required._ HTML string to make editable. The HTML should be valid, and valid in
 
 _Required._ Called when the value changes.
 
+### `identifier: String`
+
+_Optional._ If the editable field is bound to a block attribute (through the `value` and `onChange` props) then this prop should specify the attribute name. The field will use this value to set the block editor selection correctly, specifying in which attribute and at what offset does the selection start or end.
+
 ### `tagName: String`
 
 _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element.
@@ -21,13 +25,9 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
 _Optional._ Placeholder text to show when the field is empty, similar to the
 [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
 
-### `multiline: Boolean | String`
-
-_Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
+### `disableLineBreaks: Boolean`
 
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
+_Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
 
 ### `onReplace( blocks: Array ): Function`
 
@@ -50,6 +50,7 @@ _Optional._ By default, all registered formats are allowed. This setting can be
 ```js
 <RichText
 	tagName="h2"
+	identifier="content"
 	value={ attributes.content }
 	allowedFormats={ [ 'core/bold', 'core/italic' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
 	onChange={ ( content ) => setAttributes( { content } ) }
@@ -71,7 +72,8 @@ _Optional._ A list of autocompleters to use instead of the default.
 
 ### `preserveWhiteSpace: Boolean`
 
-_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space. If turned on, soft line breaks will be saved as newline characters, not as line break elements.
+_Optional._ Whether or not to preserve white space characters in the `value`. Normally tab, newline and space characters are collapsed to a single space or
+trimmed.
 
 ## RichText.Content
 
@@ -79,44 +81,9 @@ _Optional._ Whether or not to preserve white space characters in the `value`. No
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
 ```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'h2',
-		},
-	},
-
-	edit: function( props ) {
-		return wp.element.createElement( wp.editor.RichText, {
-			tagName: 'h2',
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return wp.element.createElement( wp.editor.RichText.Content, {
-			tagName: 'h2', value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
-```js
-const { registerBlockType } = wp.blocks;
-const { RichText } = wp.editor;
+import { registerBlockType } from '@wordpress/blocks';
+import { RichText } from '@wordpress/block-editor';
 
 registerBlockType( /* ... */, {
 	// ...
@@ -133,6 +100,7 @@ registerBlockType( /* ... */, {
 			<RichText
 				tagName="h2"
 				className={ className }
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 			/>
@@ -145,7 +113,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 ## RichTextToolbarButton
 
@@ -153,30 +120,10 @@ Slot to extend the format toolbar. Use it in the edit function of a `registerFor
 
 ### Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.richText.registerFormatType( /* ... */, {
-	/* ... */
-	edit: function( props ) {
-		return wp.element.createElement(
-			wp.editor.RichTextToolbarButton, {
-				icon: 'editor-code',
-				title: 'My formatting button',
-				onClick: function() { /* ... */ }
-				isActive: props.isActive,
-			} );
-	},
-	/* ... */
-} );
-```
-
-{% ESNext %}
 
 ```js
-import { registerFormatType } from 'wp-rich-text';
-import { richTextToolbarButton } from 'wp-editor';
+import { registerFormatType } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
 
 registerFormatType( /* ... */, {
 	/* ... */
@@ -193,5 +140,3 @@ registerFormatType( /* ... */, {
 	/* ... */
 } );
 ```
-
-{% end %}
diff --git a/packages/block-editor/src/components/rich-text/content.js b/packages/block-editor/src/components/rich-text/content.js
new file mode 100644
index 00000000000000..64f747879c4e9e
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/content.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+import { children as childrenSource } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import RichText from './';
+
+/**
+ * Internal dependencies
+ */
+import { getMultilineTag } from './utils';
+
+export function valueToHTMLString( value, multiline ) {
+	if ( RichText.isEmpty( value ) ) {
+		const multilineTag = getMultilineTag( multiline );
+		return multilineTag ? `<${ multilineTag }></${ multilineTag }>` : '';
+	}
+
+	if ( Array.isArray( value ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+		return childrenSource.toHTML( value );
+	}
+
+	// To do: deprecate string type.
+	if ( typeof value === 'string' ) {
+		return value;
+	}
+
+	// To do: create a toReactComponent method on RichTextData, which we
+	// might in the future also use for the editable tree. See
+	// https://github.com/WordPress/gutenberg/pull/41655.
+	return value.toHTMLString();
+}
+
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	value = <RawHTML>{ valueToHTMLString( value, multiline ) }</RawHTML>;
+	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
+}
diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss
new file mode 100644
index 00000000000000..67e14b0882d7ef
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/content.scss
@@ -0,0 +1,47 @@
+.rich-text {
+	[data-rich-text-placeholder] {
+		pointer-events: none;
+	}
+
+	[data-rich-text-placeholder]::after {
+		content: attr(data-rich-text-placeholder);
+		// Use opacity to work in various editor styles.
+		// We don't specify the color here, because blocks or editor styles might provide their own.
+		opacity: 0.62;
+	}
+
+	&:focus {
+		// Removes outline added by the browser.
+		outline: none;
+	}
+}
+
+// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
+// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
+figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
+	opacity: 0.8;
+}
+
+[data-rich-text-script] {
+	display: inline;
+
+	&::before {
+		content: "</>";
+		background: rgb(255, 255, 0);
+	}
+}
+
+[data-rich-text-comment],
+[data-rich-text-format-boundary] {
+	border-radius: $radius-small;
+}
+
+[data-rich-text-comment] {
+	background-color: currentColor;
+
+	span {
+		filter: invert(100%);
+		color: currentColor;
+		padding: 0 2px;
+	}
+}
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/before-input-rules.js b/packages/block-editor/src/components/rich-text/event-listeners/before-input-rules.js
new file mode 100644
index 00000000000000..e02b059550bd1c
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/before-input-rules.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		const { inputType, data } = event;
+		const { value, onChange, registry } = props.current;
+
+		// Only run the rules when inserting text.
+		if ( inputType !== 'insertText' ) {
+			return;
+		}
+
+		if ( isCollapsed( value ) ) {
+			return;
+		}
+
+		const pair = applyFilters(
+			'blockEditor.wrapSelectionSettings',
+			wrapSelectionSettings
+		).find(
+			( [ startChar, endChar ] ) => startChar === data || endChar === data
+		);
+
+		if ( ! pair ) {
+			return;
+		}
+
+		const [ startChar, endChar = startChar ] = pair;
+		const start = value.start;
+		const end = value.end + startChar.length;
+
+		let newValue = insert( value, startChar, start, start );
+		newValue = insert( newValue, endChar, end, end );
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		__unstableMarkLastChangeAsPersistent();
+		onChange( newValue );
+		__unstableMarkAutomaticChange();
+
+		const init = {};
+
+		for ( const key in event ) {
+			init[ key ] = event[ key ];
+		}
+
+		init.data = endChar;
+
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		const newEvent = new defaultView.InputEvent( 'input', init );
+
+		// Dispatch an `input` event with the new data. This will trigger the
+		// input rules.
+		// Postpone the `input` to the next event loop tick so that the dispatch
+		// doesn't happen synchronously in the middle of `beforeinput` dispatch.
+		// This is closer to how native `input` event would be timed, and also
+		// makes sure that the `input` event is dispatched only after the `onChange`
+		// call few lines above has fully updated the data store state and rerendered
+		// all affected components.
+		window.queueMicrotask( () => {
+			event.target.dispatchEvent( newEvent );
+		} );
+		event.preventDefault();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/delete.js b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
new file mode 100644
index 00000000000000..ae3fd733bb94e1
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { isCollapsed, isEmpty } from '@wordpress/rich-text';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { value, onMerge, onRemove } = props.current;
+
+		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
+			const { start, end, text } = value;
+			const isReverse = keyCode === BACKSPACE;
+			const hasActiveFormats =
+				value.activeFormats && !! value.activeFormats.length;
+
+			// Only process delete if the key press occurs at an uncollapsed edge.
+			if (
+				! isCollapsed( value ) ||
+				hasActiveFormats ||
+				( isReverse && start !== 0 ) ||
+				( ! isReverse && end !== text.length )
+			) {
+				return;
+			}
+
+			if ( onMerge ) {
+				onMerge( ! isReverse );
+			}
+
+			// Only handle remove on Backspace. This serves dual-purpose of being
+			// an intentional user interaction distinguishing between Backspace and
+			// Delete to remove the empty field, but also to avoid merge & remove
+			// causing destruction of two fields (merge, then removed merged).
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
+				onRemove( ! isReverse );
+			}
+
+			event.preventDefault();
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/enter.js b/packages/block-editor/src/components/rich-text/event-listeners/enter.js
new file mode 100644
index 00000000000000..63c2145fe7acbc
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/enter.js
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+import { insert, remove } from '@wordpress/rich-text';
+
+export default ( props ) => ( element ) => {
+	function onKeyDownDeprecated( event ) {
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const { onReplace, onSplit } = props.current;
+
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const {
+			value,
+			onChange,
+			disableLineBreaks,
+			onSplitAtEnd,
+			onSplitAtDoubleLineEnd,
+			registry,
+		} = props.current;
+
+		event.preventDefault();
+
+		const { text, start, end } = value;
+
+		if ( event.shiftKey ) {
+			if ( ! disableLineBreaks ) {
+				onChange( insert( value, '\n' ) );
+			}
+		} else if ( onSplitAtEnd && start === end && end === text.length ) {
+			onSplitAtEnd();
+		} else if (
+			// For some blocks it's desirable to split at the end of the
+			// block when there are two line breaks at the end of the
+			// block, so triple Enter exits the block.
+			onSplitAtDoubleLineEnd &&
+			start === end &&
+			end === text.length &&
+			text.slice( -2 ) === '\n\n'
+		) {
+			registry.batch( () => {
+				const _value = { ...value };
+				_value.start = _value.end - 2;
+				onChange( remove( _value ) );
+				onSplitAtDoubleLineEnd();
+			} );
+		} else if ( ! disableLineBreaks ) {
+			onChange( insert( value, '\n' ) );
+		}
+	}
+
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'keydown', onKeyDown );
+	element.addEventListener( 'keydown', onKeyDownDeprecated );
+	return () => {
+		defaultView.removeEventListener( 'keydown', onKeyDown );
+		element.removeEventListener( 'keydown', onKeyDownDeprecated );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/firefox-compat.js b/packages/block-editor/src/components/rich-text/event-listeners/firefox-compat.js
new file mode 100644
index 00000000000000..b6b859d346fd36
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/firefox-compat.js
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onFocus() {
+		const { registry } = props.current;
+		if ( ! registry.select( blockEditorStore ).isMultiSelecting() ) {
+			return;
+		}
+
+		// This is a little hack to work around focus issues with nested
+		// editable elements in Firefox. For some reason the editable child
+		// element sometimes regains focus, while it should not be focusable
+		// and focus should remain on the editable parent element.
+		// To do: try to find the cause of the shifting focus.
+		const parentEditable = element.parentElement.closest(
+			'[contenteditable="true"]'
+		);
+
+		if ( parentEditable ) {
+			parentEditable.focus();
+		}
+	}
+
+	element.addEventListener( 'focus', onFocus );
+	return () => {
+		element.removeEventListener( 'focus', onFocus );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/index.js b/packages/block-editor/src/components/rich-text/event-listeners/index.js
new file mode 100644
index 00000000000000..4ec67d8f30af97
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/index.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useRef, useInsertionEffect } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import beforeInputRules from './before-input-rules';
+import inputRules from './input-rules';
+import insertReplacementText from './insert-replacement-text';
+import removeBrowserShortcuts from './remove-browser-shortcuts';
+import shortcuts from './shortcuts';
+import inputEvents from './input-events';
+import undoAutomaticChange from './undo-automatic-change';
+import pasteHandler from './paste-handler';
+import _delete from './delete';
+import enter from './enter';
+import firefoxCompat from './firefox-compat';
+
+const allEventListeners = [
+	beforeInputRules,
+	inputRules,
+	insertReplacementText,
+	removeBrowserShortcuts,
+	shortcuts,
+	inputEvents,
+	undoAutomaticChange,
+	pasteHandler,
+	_delete,
+	enter,
+	firefoxCompat,
+];
+
+export function useEventListeners( props ) {
+	const propsRef = useRef( props );
+	useInsertionEffect( () => {
+		propsRef.current = props;
+	} );
+	const refEffects = useMemo(
+		() => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ),
+		[ propsRef ]
+	);
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! props.isSelected ) {
+				return;
+			}
+			const cleanups = refEffects.map( ( effect ) => effect( element ) );
+			return () => {
+				cleanups.forEach( ( cleanup ) => cleanup() );
+			};
+		},
+		[ refEffects, props.isSelected ]
+	);
+}
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/input-events.js b/packages/block-editor/src/components/rich-text/event-listeners/input-events.js
new file mode 100644
index 00000000000000..e16dc8f1dd0f5c
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/input-events.js
@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { inputEvents } = props.current;
+	function onInput( event ) {
+		for ( const keyboardShortcut of inputEvents.current ) {
+			keyboardShortcut( event );
+		}
+	}
+
+	element.addEventListener( 'input', onInput );
+	return () => {
+		element.removeEventListener( 'input', onInput );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/input-rules.js b/packages/block-editor/src/components/rich-text/event-listeners/input-rules.js
new file mode 100644
index 00000000000000..4a1e8400e35a17
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/input-rules.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, toHTMLString } from '@wordpress/rich-text';
+import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { preventEventDiscovery } from '../prevent-event-discovery';
+import {
+	retrieveSelectedAttribute,
+	START_OF_SELECTED_AREA,
+} from '../../../utils/selection';
+
+export function findSelection( blocks ) {
+	let i = blocks.length;
+
+	while ( i-- ) {
+		const attributeKey = retrieveSelectedAttribute(
+			blocks[ i ].attributes
+		);
+
+		if ( attributeKey ) {
+			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
+				attributeKey
+			]
+				// To do: refactor this to use rich text's selection instead, so
+				// we no longer have to use on this hack inserting a special
+				// character.
+				.toString()
+				.replace( START_OF_SELECTED_AREA, '' );
+			return [ blocks[ i ].clientId, attributeKey, 0, 0 ];
+		}
+
+		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
+
+		if ( nestedSelection ) {
+			return nestedSelection;
+		}
+	}
+
+	return [];
+}
+
+export default ( props ) => ( element ) => {
+	function inputRule() {
+		const { getValue, onReplace, selectionChange, registry } =
+			props.current;
+
+		if ( ! onReplace ) {
+			return;
+		}
+
+		// We must use getValue() here because value may be update
+		// asynchronously.
+		const value = getValue();
+		const { start, text } = value;
+		const characterBefore = text.slice( start - 1, start );
+
+		// The character right before the caret must be a plain space.
+		if ( characterBefore !== ' ' ) {
+			return;
+		}
+
+		const trimmedTextBefore = text.slice( 0, start ).trim();
+		const prefixTransforms = getBlockTransforms( 'from' ).filter(
+			( { type } ) => type === 'prefix'
+		);
+		const transformation = findTransform(
+			prefixTransforms,
+			( { prefix } ) => {
+				return trimmedTextBefore === prefix;
+			}
+		);
+
+		if ( ! transformation ) {
+			return;
+		}
+
+		const content = toHTMLString( {
+			value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+		} );
+		const block = transformation.transform( content );
+
+		selectionChange( ...findSelection( [ block ] ) );
+		onReplace( [ block ] );
+		registry.dispatch( blockEditorStore ).__unstableMarkAutomaticChange();
+
+		return true;
+	}
+
+	function onInput( event ) {
+		const { inputType, type } = event;
+		const {
+			getValue,
+			onChange,
+			__unstableAllowPrefixTransformations,
+			formatTypes,
+			registry,
+		} = props.current;
+
+		// Only run input rules when inserting text.
+		if ( inputType !== 'insertText' && type !== 'compositionend' ) {
+			return;
+		}
+
+		if ( __unstableAllowPrefixTransformations && inputRule() ) {
+			return;
+		}
+
+		const value = getValue();
+		const transformed = formatTypes.reduce(
+			( accumlator, { __unstableInputRule } ) => {
+				if ( __unstableInputRule ) {
+					accumlator = __unstableInputRule( accumlator );
+				}
+
+				return accumlator;
+			},
+			preventEventDiscovery( value )
+		);
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		if ( transformed !== value ) {
+			__unstableMarkLastChangeAsPersistent();
+			onChange( {
+				...transformed,
+				activeFormats: value.activeFormats,
+			} );
+			__unstableMarkAutomaticChange();
+		}
+	}
+
+	element.addEventListener( 'input', onInput );
+	element.addEventListener( 'compositionend', onInput );
+	return () => {
+		element.removeEventListener( 'input', onInput );
+		element.removeEventListener( 'compositionend', onInput );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/insert-replacement-text.js b/packages/block-editor/src/components/rich-text/event-listeners/insert-replacement-text.js
new file mode 100644
index 00000000000000..78b862eb4ac9e0
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/insert-replacement-text.js
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * When the browser is about to auto correct, add an undo level so the user can
+ * revert the change.
+ *
+ * @param {Object} props
+ */
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		if ( event.inputType !== 'insertReplacementText' ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
new file mode 100644
index 00000000000000..ef1833bda88e63
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { pasteHandler } from '@wordpress/blocks';
+import { isEmpty, insert, create } from '@wordpress/rich-text';
+import { isURL } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { addActiveFormats } from '../utils';
+import { getPasteEventData } from '../../../utils/pasting';
+
+/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
+
+export default ( props ) => ( element ) => {
+	function _onPaste( event ) {
+		const {
+			disableFormats,
+			onChange,
+			value,
+			formatTypes,
+			tagName,
+			onReplace,
+			__unstableEmbedURLOnPaste,
+			preserveWhiteSpace,
+			pastePlainText,
+		} = props.current;
+
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element or inside the element.
+		if ( ! element.contains( event.target ) ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { plainText, html } = getPasteEventData( event );
+
+		event.preventDefault();
+
+		// Allows us to ask for this information when we get a report.
+		window.console.log( 'Received HTML:\n\n', html );
+		window.console.log( 'Received plain text:\n\n', plainText );
+
+		if ( disableFormats ) {
+			onChange( insert( value, plainText ) );
+			return;
+		}
+
+		const isInternal =
+			event.clipboardData.getData( 'rich-text' ) === 'true';
+
+		function pasteInline( content ) {
+			const transformed = formatTypes.reduce(
+				( accumulator, { __unstablePasteRule } ) => {
+					// Only allow one transform.
+					if ( __unstablePasteRule && accumulator === value ) {
+						accumulator = __unstablePasteRule( value, {
+							html,
+							plainText,
+						} );
+					}
+
+					return accumulator;
+				},
+				value
+			);
+			if ( transformed !== value ) {
+				onChange( transformed );
+			} else {
+				const valueToInsert = create( { html: content } );
+				addActiveFormats( valueToInsert, value.activeFormats );
+				onChange( insert( value, valueToInsert ) );
+			}
+		}
+
+		// If the data comes from a rich text instance, we can directly use it
+		// without filtering the data. The filters are only meant for externally
+		// pasted content and remove inline styles.
+		if ( isInternal ) {
+			pasteInline( html );
+			return;
+		}
+
+		if ( pastePlainText ) {
+			onChange( insert( value, create( { text: plainText } ) ) );
+			return;
+		}
+
+		let mode = 'INLINE';
+
+		const trimmedPlainText = plainText.trim();
+
+		if (
+			__unstableEmbedURLOnPaste &&
+			isEmpty( value ) &&
+			isURL( trimmedPlainText ) &&
+			// For the link pasting feature, allow only http(s) protocols.
+			/^https?:/.test( trimmedPlainText )
+		) {
+			mode = 'BLOCKS';
+		}
+
+		const content = pasteHandler( {
+			HTML: html,
+			plainText,
+			mode,
+			tagName,
+			preserveWhiteSpace,
+		} );
+
+		if ( typeof content === 'string' ) {
+			pasteInline( content );
+		} else if ( content.length > 0 ) {
+			if ( onReplace && isEmpty( value ) ) {
+				onReplace( content, content.length - 1, -1 );
+			}
+		}
+	}
+
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'paste', _onPaste );
+	return () => {
+		defaultView.removeEventListener( 'paste', _onPaste );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/remove-browser-shortcuts.js b/packages/block-editor/src/components/rich-text/event-listeners/remove-browser-shortcuts.js
new file mode 100644
index 00000000000000..7a057022dd2a82
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/remove-browser-shortcuts.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { isKeyboardEvent } from '@wordpress/keycodes';
+
+/**
+ * Hook to prevent default behaviors for key combinations otherwise handled
+ * internally by RichText.
+ */
+export default () => ( node ) => {
+	function onKeydown( event ) {
+		if (
+			isKeyboardEvent.primary( event, 'z' ) ||
+			isKeyboardEvent.primary( event, 'y' ) ||
+			isKeyboardEvent.primaryShift( event, 'z' )
+		) {
+			event.preventDefault();
+		}
+	}
+	node.addEventListener( 'keydown', onKeydown );
+	return () => {
+		node.removeEventListener( 'keydown', onKeydown );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/shortcuts.js b/packages/block-editor/src/components/rich-text/event-listeners/shortcuts.js
new file mode 100644
index 00000000000000..bb51a729588151
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/shortcuts.js
@@ -0,0 +1,13 @@
+export default ( props ) => ( element ) => {
+	const { keyboardShortcuts } = props.current;
+	function onKeyDown( event ) {
+		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+			keyboardShortcut( event );
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/undo-automatic-change.js b/packages/block-editor/src/components/rich-text/event-listeners/undo-automatic-change.js
new file mode 100644
index 00000000000000..6bcfd0822f7fe1
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/event-listeners/undo-automatic-change.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( keyCode !== BACKSPACE && keyCode !== ESCAPE ) {
+			return;
+		}
+
+		const { registry } = props.current;
+		const { didAutomaticChange, getSettings } =
+			registry.select( blockEditorStore );
+
+		const { __experimentalUndo } = getSettings();
+
+		if ( ! __experimentalUndo ) {
+			return;
+		}
+
+		if ( ! didAutomaticChange() ) {
+			return;
+		}
+
+		event.preventDefault();
+		__experimentalUndo();
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};
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/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
index 3c6861c341cd4b..a70b9f8f778815 100644
--- a/packages/block-editor/src/components/rich-text/format-edit.js
+++ b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -1,78 +1,68 @@
 /**
  * WordPress dependencies
  */
-import {
-	getActiveFormat,
-	getActiveObject,
-	isCollapsed,
-} from '@wordpress/rich-text';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
+
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { find } from 'lodash';
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
+export const usesContextKey = Symbol( 'usesContext' );
 
-		if ( ! Edit ) {
-			return null;
-		}
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
 
-		const activeFormat = getActiveFormat( value, name );
-		let isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
+	const blockContext = useContext( BlockContext );
 
-		// Edge case: un-collapsed link formats.
-		// If there is a missing link format at either end of the selection
-		// then we shouldn't show the Edit UI because the selection has exceeded
-		// the bounds of the link format.
-		// Also if the format objects don't match then we're dealing with two separate
-		// links so we should not allow the link to be modified over the top.
-		if ( name === 'core/link' && ! isCollapsed( value ) ) {
-			const formats = value.formats;
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
 
-			const linkFormatAtStart = find( formats[ value.start ], {
-				type: 'core/link',
-			} );
+	if ( ! EditFunction ) {
+		return null;
+	}
 
-			const linkFormatAtEnd = find( formats[ value.end - 1 ], {
-				type: 'core/link',
-			} );
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
 
-			if (
-				! linkFormatAtStart ||
-				! linkFormatAtEnd ||
-				linkFormatAtStart !== linkFormatAtEnd
-			) {
-				isActive = false;
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
 			}
-		}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
 
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index 0f89dd4b248f75..ae98cacaf82cce 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -3,13 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import {
-	isCollapsed,
-	getActiveFormats,
-	useAnchor,
-	store as richTextStore,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -17,27 +10,6 @@ import {
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import NavigableToolbar from '../navigable-toolbar';
-import { store as blockEditorStore } from '../../store';
-
-function InlineSelectionToolbar( {
-	value,
-	editableContentElement,
-	activeFormats,
-} ) {
-	const lastFormat = activeFormats[ activeFormats.length - 1 ];
-	const lastFormatType = lastFormat?.type;
-	const settings = useSelect(
-		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
-		[ lastFormatType ]
-	);
-	const popoverAnchor = useAnchor( {
-		editableContentElement,
-		value,
-		settings,
-	} );
-
-	return <InlineToolbar popoverAnchor={ popoverAnchor } />;
-}
 
 function InlineToolbar( { popoverAnchor } ) {
 	return (
@@ -61,36 +33,11 @@ function InlineToolbar( { popoverAnchor } ) {
 	);
 }
 
-const FormatToolbarContainer = ( {
-	inline,
-	editableContentElement,
-	value,
-} ) => {
-	const hasInlineToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
-		[]
-	);
-
+const FormatToolbarContainer = ( { inline, editableContentElement } ) => {
 	if ( inline ) {
 		return <InlineToolbar popoverAnchor={ editableContentElement } />;
 	}
 
-	if ( hasInlineToolbar ) {
-		const activeFormats = getActiveFormats( value );
-
-		if ( isCollapsed( value ) && ! activeFormats.length ) {
-			return null;
-		}
-
-		return (
-			<InlineSelectionToolbar
-				editableContentElement={ editableContentElement }
-				value={ value }
-				activeFormats={ activeFormats }
-			/>
-		);
-	}
-
 	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">
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 12d14d24130685..811164b0751c5f 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
@@ -1,27 +1,28 @@
 /**
  * External dependencies
  */
-
-import { orderBy } from 'lodash';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
 import { ToolbarItem, DropdownMenu, Slot } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { orderBy } from '../../../utils/sorting';
+
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const FormatToolbar = () => {
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link' ].map( ( format ) => (
+			{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }
@@ -47,11 +48,11 @@ const FormatToolbar = () => {
 									label={ __( 'More' ) }
 									toggleProps={ {
 										...toggleProps,
-										className: classnames(
+										className: clsx(
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
-										describedBy: __(
+										description: __(
 											'Displays more block tools'
 										),
 									} }
diff --git a/packages/block-editor/src/components/rich-text/get-rich-text-values.js b/packages/block-editor/src/components/rich-text/get-rich-text-values.js
new file mode 100644
index 00000000000000..ee2bc638269308
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/get-rich-text-values.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML, StrictMode, Fragment } from '@wordpress/element';
+import {
+	getSaveElement,
+	__unstableGetBlockProps as getBlockProps,
+} from '@wordpress/blocks';
+import { RichTextData } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import InnerBlocks from '../inner-blocks';
+import { Content } from './content';
+
+/*
+ * This function is similar to `@wordpress/element`'s `renderToString` function,
+ * except that it does not render the elements to a string, but instead collects
+ * the values of all rich text `Content` elements.
+ */
+function addValuesForElement( element, values, innerBlocks ) {
+	if ( null === element || undefined === element || false === element ) {
+		return;
+	}
+
+	if ( Array.isArray( element ) ) {
+		return addValuesForElements( element, values, innerBlocks );
+	}
+
+	switch ( typeof element ) {
+		case 'string':
+		case 'number':
+			return;
+	}
+
+	const { type, props } = element;
+
+	switch ( type ) {
+		case StrictMode:
+		case Fragment:
+			return addValuesForElements( props.children, values, innerBlocks );
+		case RawHTML:
+			return;
+		case InnerBlocks.Content:
+			return addValuesForBlocks( values, innerBlocks );
+		case Content:
+			values.push( props.value );
+			return;
+	}
+
+	switch ( typeof type ) {
+		case 'string':
+			if ( typeof props.children !== 'undefined' ) {
+				return addValuesForElements(
+					props.children,
+					values,
+					innerBlocks
+				);
+			}
+			return;
+		case 'function':
+			const el =
+				type.prototype && typeof type.prototype.render === 'function'
+					? new type( props ).render()
+					: type( props );
+			return addValuesForElement( el, values, innerBlocks );
+	}
+}
+
+function addValuesForElements( children, ...args ) {
+	children = Array.isArray( children ) ? children : [ children ];
+
+	for ( let i = 0; i < children.length; i++ ) {
+		addValuesForElement( children[ i ], ...args );
+	}
+}
+
+function addValuesForBlocks( values, blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		const { name, attributes, innerBlocks } = blocks[ i ];
+		const saveElement = getSaveElement(
+			name,
+			attributes,
+			// Instead of letting save elements use `useInnerBlocksProps.save`,
+			// force them to use InnerBlocks.Content instead so we can intercept
+			// a single component.
+			<InnerBlocks.Content />
+		);
+		addValuesForElement( saveElement, values, innerBlocks );
+	}
+}
+
+export function getRichTextValues( blocks = [] ) {
+	getBlockProps.skipFilters = true;
+	const values = [];
+	addValuesForBlocks( values, blocks );
+	getBlockProps.skipFilters = false;
+	return values.map( ( value ) =>
+		value instanceof RichTextData
+			? value
+			: RichTextData.fromHTMLString( value )
+	);
+}
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index ee364e8c3beaeb..bc8eca6ea94d05 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -1,56 +1,52 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	RawHTML,
 	useRef,
 	useCallback,
 	forwardRef,
 	createContext,
+	useContext,
 } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { children as childrenSource } from '@wordpress/blocks';
-import { useInstanceId, useMergeRefs } from '@wordpress/compose';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
+import { useMergeRefs, useInstanceId } from '@wordpress/compose';
 import {
 	__unstableUseRichText as useRichText,
-	__unstableCreateElement,
-	isEmpty,
-	isCollapsed,
 	removeFormat,
 } from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { Popover } from '@wordpress/components';
+import { getBlockBindingsSource } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
+import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
-import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { useMarkPersistent } from './use-mark-persistent';
-import { usePasteHandler } from './use-paste-handler';
-import { useBeforeInputRules } from './use-before-input-rules';
-import { useInputRules } from './use-input-rules';
-import { useEnter } from './use-enter';
 import { useFormatTypes } from './use-format-types';
-import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
-import { useShortcuts } from './use-shortcuts';
-import { useInputEvents } from './use-input-events';
-import { useFirefoxCompat } from './use-firefox-compat';
+import { useEventListeners } from './event-listeners';
 import FormatEdit from './format-edit';
-import { getMultilineTag, getAllowedFormats } from './utils';
+import { getAllowedFormats } from './utils';
+import { Content, valueToHTMLString } from './content';
+import { withDeprecations } from './with-deprecations';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
 
+const instanceIdKey = Symbol( 'instanceId' );
+
 /**
  * Removes props used for the native version of RichText so that they are not
  * passed to the DOM element and log warnings.
@@ -67,7 +63,6 @@ function removeNativeProps( props ) {
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,
@@ -75,7 +70,6 @@ function removeNativeProps( props ) {
 		fontStyle,
 		minWidth,
 		maxWidth,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		...restProps
@@ -83,12 +77,12 @@ function removeNativeProps( props ) {
 	return restProps;
 }
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName = 'div',
-		value: originalValue = '',
-		onChange: originalOnChange,
+		value: adjustedValue = '',
+		onChange: adjustedOnChange,
 		isSelected: originalIsSelected,
 		multiline,
 		inlineToolbar,
@@ -97,42 +91,47 @@ function RichTextWrapper(
 		onReplace,
 		placeholder,
 		allowedFormats,
-		formattingControls,
 		withoutInteractiveFormatting,
 		onRemove,
 		onMerge,
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
-		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
 		__unstableEmbedURLOnPaste,
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
-		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
+		readOnly,
 		...props
 	},
 	forwardedRef
 ) {
-	if ( multiline ) {
-		deprecated( 'wp.blockEditor.RichText multiline prop', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'nested blocks (InnerBlocks)',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
+	props = removeNativeProps( props );
+
+	if ( onSplit ) {
+		deprecated( 'wp.blockEditor.RichText onSplit prop', {
+			since: '6.4',
+			alternative: 'block.json support key: "splitting"',
 		} );
 	}
 
 	const instanceId = useInstanceId( RichTextWrapper );
-
-	identifier = identifier || instanceId;
-	props = removeNativeProps( props );
-
 	const anchorRef = useRef();
-	const { clientId } = useBlockEditContext();
+	const context = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const blockBindings = context[ blockBindingsKey ];
+	const blockContext = useContext( BlockContext );
+	const registry = useRegistry();
 	const selector = ( select ) => {
+		// Avoid subscribing to the block editor store if the block is not
+		// selected.
+		if ( ! isBlockSelected ) {
+			return { isSelected: false };
+		}
+
 		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
@@ -144,7 +143,9 @@ function RichTextWrapper(
 			isSelected =
 				selectionStart.clientId === clientId &&
 				selectionEnd.clientId === clientId &&
-				selectionStart.attributeKey === identifier;
+				( identifier
+					? selectionStart.attributeKey === identifier
+					: selectionStart[ instanceIdKey ] === instanceId );
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
 		}
@@ -155,47 +156,117 @@ function RichTextWrapper(
 			isSelected,
 		};
 	};
-	// This selector must run on every render so the right selection state is
-	// retreived from the store on merge.
-	// To do: fix this somehow.
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		instanceId,
+		originalIsSelected,
+		isBlockSelected,
+	] );
+
+	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
+		( select ) => {
+			if (
+				! blockBindings?.[ identifier ] ||
+				! canBindBlock( blockName )
+			) {
+				return {};
+			}
+
+			const relatedBinding = blockBindings[ identifier ];
+			const blockBindingsSource = getBlockBindingsSource(
+				relatedBinding.source
+			);
+			const blockBindingsContext = {};
+			if ( blockBindingsSource?.usesContext?.length ) {
+				for ( const key of blockBindingsSource.usesContext ) {
+					blockBindingsContext[ key ] = blockContext[ key ];
+				}
+			}
+
+			const _disableBoundBlock =
+				! blockBindingsSource?.canUserEditValue?.( {
+					select,
+					context: blockBindingsContext,
+					args: relatedBinding.args,
+				} );
+
+			// Don't modify placeholders if value is not empty.
+			if ( adjustedValue.length > 0 ) {
+				return {
+					disableBoundBlock: _disableBoundBlock,
+					// Null values will make them fall back to the default behavior.
+					bindingsPlaceholder: null,
+					bindingsLabel: null,
+				};
+			}
+
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+				select,
+				context: blockBindingsContext,
+			} );
+			const bindingKey =
+				fieldsList?.[ relatedBinding?.args?.key ]?.label ??
+				blockBindingsSource?.label;
+
+			const _bindingsPlaceholder = _disableBoundBlock
+				? bindingKey
+				: sprintf(
+						/* translators: %s: connected field label or source label */
+						__( 'Add %s' ),
+						bindingKey
+				  );
+			const _bindingsLabel = _disableBoundBlock
+				? relatedBinding?.args?.key || blockBindingsSource?.label
+				: sprintf(
+						/* translators: %s: source label or key */
+						__( 'Empty %s; start writing to edit its value' ),
+						relatedBinding?.args?.key || blockBindingsSource?.label
+				  );
+
+			return {
+				disableBoundBlock: _disableBoundBlock,
+				bindingsPlaceholder:
+					blockAttributes?.placeholder || _bindingsPlaceholder,
+				bindingsLabel: _bindingsLabel,
+			};
+		},
+		[
+			blockBindings,
+			identifier,
+			blockName,
+			adjustedValue,
+			clientId,
+			blockContext,
+		]
+	);
+
+	const shouldDisableEditing = readOnly || disableBoundBlock;
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
-		formattingControls,
 		disableFormats,
 	} );
 	const hasFormats =
 		! adjustedAllowedFormats || adjustedAllowedFormats.length > 0;
-	let adjustedValue = originalValue;
-	let adjustedOnChange = originalOnChange;
-
-	// Handle deprecated format.
-	if ( Array.isArray( originalValue ) ) {
-		deprecated( 'wp.blockEditor.RichText value prop as children type', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'value prop as string',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
-		} );
-
-		adjustedValue = childrenSource.toHTML( originalValue );
-		adjustedOnChange = ( newValue ) =>
-			originalOnChange(
-				childrenSource.fromDOM(
-					__unstableCreateElement( document, newValue ).childNodes
-				)
-			);
-	}
 
 	const onSelectionChange = useCallback(
 		( start, end ) => {
 			const selection = {};
 			const unset = start === undefined && end === undefined;
 
+			const baseSelection = {
+				clientId,
+				[ identifier ? 'attributeKey' : instanceIdKey ]: identifier
+					? identifier
+					: instanceId,
+			};
+
 			if ( typeof start === 'number' || unset ) {
 				// If we are only setting the start (or the end below), which
 				// means a partial selection, and we're not updating a selection
@@ -210,8 +281,7 @@ function RichTextWrapper(
 				}
 
 				selection.start = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: start,
 				};
 			}
@@ -226,15 +296,22 @@ function RichTextWrapper(
 				}
 
 				selection.end = {
-					clientId,
-					attributeKey: identifier,
+					...baseSelection,
 					offset: end,
 				};
 			}
 
 			selectionChange( selection );
 		},
-		[ clientId, identifier ]
+		[
+			clientId,
+			getBlockRootClientId,
+			getSelectionEnd,
+			getSelectionStart,
+			identifier,
+			instanceId,
+			selectionChange,
+		]
 	);
 
 	const {
@@ -282,6 +359,7 @@ function RichTextWrapper(
 
 	const {
 		value,
+		getValue,
 		onChange,
 		ref: richTextRef,
 	} = useRichText( {
@@ -295,9 +373,8 @@ function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		onSelectionChange,
-		placeholder,
+		placeholder: bindingsPlaceholder || placeholder,
 		__unstableIsSelected: isSelected,
-		__unstableMultilineTag: multilineTag,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
 		__unstableDependencies: [ ...dependencies, tagName ],
@@ -317,45 +394,6 @@ function RichTextWrapper(
 	const keyboardShortcuts = useRef( new Set() );
 	const inputEvents = useRef( new Set() );
 
-	function onKeyDown( event ) {
-		const { keyCode } = event;
-
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
-			const { start, end, text } = value;
-			const isReverse = keyCode === BACKSPACE;
-			const hasActiveFormats =
-				value.activeFormats && !! value.activeFormats.length;
-
-			// Only process delete if the key press occurs at an uncollapsed edge.
-			if (
-				! isCollapsed( value ) ||
-				hasActiveFormats ||
-				( isReverse && start !== 0 ) ||
-				( ! isReverse && end !== text.length )
-			) {
-				return;
-			}
-
-			if ( onMerge ) {
-				onMerge( ! isReverse );
-			}
-
-			// Only handle remove on Backspace. This serves dual-purpose of being
-			// an intentional user interaction distinguishing between Backspace and
-			// Delete to remove the empty field, but also to avoid merge & remove
-			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
-				onRemove( ! isReverse );
-			}
-
-			event.preventDefault();
-		}
-	}
-
 	function onFocus() {
 		anchorRef.current?.focus();
 	}
@@ -369,6 +407,7 @@ function RichTextWrapper(
 						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
 							{ children &&
 								children( { value, onChange, onFocus } ) }
+
 							<FormatEdit
 								value={ value }
 								onChange={ onChange }
@@ -384,121 +423,151 @@ function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					editableContentElement={ anchorRef.current }
-					value={ value }
 				/>
 			) }
 			<TagName
 				// Overridable props.
 				role="textbox"
 				aria-multiline={ ! disableLineBreaks }
-				aria-label={ placeholder }
+				aria-readonly={ shouldDisableEditing }
 				{ ...props }
+				// Unset draggable (coming from block props) for contentEditable
+				// elements because it will interfere with multi block selection
+				// when the contentEditable and draggable elements are the same
+				// element.
+				draggable={ undefined }
+				aria-label={
+					bindingsLabel || props[ 'aria-label' ] || placeholder
+				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
+					// Rich text ref must be first because its focus listener
+					// must be set up before any other ref calls .focus() on
+					// mount.
+					richTextRef,
 					forwardedRef,
 					autocompleteProps.ref,
 					props.ref,
-					richTextRef,
-					useBeforeInputRules( { value, onChange } ),
-					useInputRules( {
-						value,
+					useEventListeners( {
+						registry,
+						getValue,
 						onChange,
 						__unstableAllowPrefixTransformations,
 						formatTypes,
 						onReplace,
 						selectionChange,
-					} ),
-					useRemoveBrowserShortcuts(),
-					useShortcuts( keyboardShortcuts ),
-					useInputEvents( inputEvents ),
-					useUndoAutomaticChange(),
-					usePasteHandler( {
 						isSelected,
 						disableFormats,
-						onChange,
 						value,
-						formatTypes,
 						tagName,
-						onReplace,
 						onSplit,
-						onSplitMiddle,
 						__unstableEmbedURLOnPaste,
-						multilineTag,
-						preserveWhiteSpace,
 						pastePlainText,
-					} ),
-					useEnter( {
+						onMerge,
+						onRemove,
 						removeEditorOnlyFormats,
-						value,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-						onChange,
 						disableLineBreaks,
 						onSplitAtEnd,
+						onSplitAtDoubleLineEnd,
+						keyboardShortcuts,
+						inputEvents,
 					} ),
-					useFirefoxCompat(),
 					anchorRef,
 				] ) }
-				contentEditable={ true }
-				suppressContentEditableWarning={ true }
-				className={ classnames(
+				contentEditable={ ! shouldDisableEditing }
+				suppressContentEditableWarning
+				className={ clsx(
 					'block-editor-rich-text__editable',
 					props.className,
 					'rich-text'
 				) }
-				onFocus={ unstableOnFocus }
-				onKeyDown={ onKeyDown }
+				// Setting tabIndex to 0 is unnecessary, the element is already
+				// focusable because it's contentEditable. This also fixes a
+				// Safari bug where it's not possible to Shift+Click multi
+				// select blocks when Shift Clicking into an element with
+				// tabIndex because Safari will focus the element. However,
+				// Safari will correctly ignore nested contentEditable elements.
+				tabIndex={
+					props.tabIndex === 0 && ! shouldDisableEditing
+						? null
+						: props.tabIndex
+				}
+				data-wp-block-attribute-key={ identifier }
 			/>
 		</>
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
-
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		deprecated( 'wp.blockEditor.RichText value prop as children type', {
-			since: '6.1',
-			version: '6.3',
-			alternative: 'value prop as string',
-			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
-		} );
-
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
+// This is the private API for the RichText component.
+// It allows access to all props, not just the public ones.
+export const PrivateRichText = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
-	const content = <RawHTML>{ value }</RawHTML>;
+PrivateRichText.Content = Content;
+PrivateRichText.isEmpty = ( value ) => {
+	return ! value || value.length === 0;
+};
 
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
+// This is the public API for the RichText component.
+// We wrap the PrivateRichText component to hide some props from the public API.
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
+ */
+const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	const context = useBlockEditContext();
+	const isPreviewMode = context[ isPreviewModeKey ];
+
+	if ( isPreviewMode ) {
+		// Remove all non-content props.
+		const {
+			children,
+			tagName: Tag = 'div',
+			value,
+			onChange,
+			isSelected,
+			multiline,
+			inlineToolbar,
+			wrapperClassName,
+			autocompleters,
+			onReplace,
+			placeholder,
+			allowedFormats,
+			withoutInteractiveFormatting,
+			onRemove,
+			onMerge,
+			onSplit,
+			__unstableOnSplitAtEnd,
+			__unstableOnSplitAtDoubleLineEnd,
+			identifier,
+			preserveWhiteSpace,
+			__unstablePastePlainText,
+			__unstableEmbedURLOnPaste,
+			__unstableDisableFormats,
+			disableLineBreaks,
+			__unstableAllowPrefixTransformations,
+			readOnly,
+			...contentProps
+		} = removeNativeProps( props );
+		return (
+			<Tag
+				{ ...contentProps }
+				dangerouslySetInnerHTML={ {
+					__html: valueToHTMLString( value, multiline ),
+				} }
+			/>
+		);
 	}
 
-	return content;
-};
+	return <PrivateRichText ref={ ref } { ...props } readOnly={ false } />;
+} );
 
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PublicForwardedRichTextContainer.Content = Content;
+PublicForwardedRichTextContainer.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
- */
-export default ForwardedRichTextContainer;
+export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 45826129017a86..687c2759c05de2 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -1,18 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	RawHTML,
-	Platform,
-	useRef,
-	useCallback,
-	forwardRef,
-} from '@wordpress/element';
+import { Platform, useRef, useCallback, forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	pasteHandler,
@@ -23,18 +17,13 @@ import {
 } from '@wordpress/blocks';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import {
-	__experimentalRichText as RichText,
 	__unstableCreateElement,
 	isEmpty,
-	__unstableIsEmptyLine as isEmptyLine,
 	insert,
-	__unstableInsertLineSeparator as insertLineSeparator,
+	remove,
 	create,
-	replace,
 	split,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
 	toHTMLString,
-	slice,
 } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -46,20 +35,22 @@ import { useBlockEditContext } from '../block-edit';
 import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 import { filePasteHandler } from './file-paste-handler';
 import FormatToolbarContainer from './format-toolbar-container';
-import { useNativeProps } from './use-native-props';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
-	getMultilineTag,
 	getAllowedFormats,
-	isShortcode,
 	createLinkInParagraph,
 } from './utils';
 import EmbedHandlerPicker from './embed-handler-picker';
+import { Content } from './content';
+import RichText from './native';
+import { withDeprecations } from './with-deprecations';
+import { findSelection } from './event-listeners/input-rules';
+import { START_OF_SELECTED_AREA } from '../../utils/selection';
 
 const classes = 'block-editor-rich-text__editable';
 
-function RichTextWrapper(
+export function RichTextWrapper(
 	{
 		children,
 		tagName,
@@ -68,20 +59,19 @@ function RichTextWrapper(
 		value: originalValue,
 		onChange: originalOnChange,
 		isSelected: originalIsSelected,
-		multiline,
 		inlineToolbar,
 		wrapperClassName,
 		autocompleters,
 		onReplace,
 		placeholder,
 		allowedFormats,
-		formattingControls,
 		withoutInteractiveFormatting,
 		onRemove,
 		onMerge,
 		onSplit,
 		__unstableOnSplitAtEnd: onSplitAtEnd,
 		__unstableOnSplitMiddle: onSplitMiddle,
+		__unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
 		identifier,
 		preserveWhiteSpace,
 		__unstablePastePlainText: pastePlainText,
@@ -90,15 +80,14 @@ function RichTextWrapper(
 		disableLineBreaks,
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
-		__unstableMultilineRootTag,
 		// Native props.
+		__unstableUseSplitSelection,
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
 		placeholderTextColor,
 		textAlign,
 		selectionColor,
 		tagsToEliminate,
-		rootTagsToEliminate,
 		disableEditingMenu,
 		fontSize,
 		fontFamily,
@@ -107,14 +96,13 @@ function RichTextWrapper(
 		minWidth,
 		maxWidth,
 		onBlur,
-		setRef,
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
 		onEnter: onCustomEnter,
 		...props
 	},
-	forwardedRef
+	providedRef
 ) {
 	const instanceId = useInstanceId( RichTextWrapper );
 
@@ -122,7 +110,6 @@ function RichTextWrapper(
 
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
-	const nativeProps = useNativeProps();
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
@@ -133,6 +120,7 @@ function RichTextWrapper(
 			getBlock,
 			isMultiSelecting,
 			hasMultiSelection,
+			getSelectedBlockClientId,
 		} = select( blockEditorStore );
 
 		const selectionStart = getSelectionStart();
@@ -169,6 +157,7 @@ function RichTextWrapper(
 			didAutomaticChange: didAutomaticChange(),
 			disabled: isMultiSelecting() || hasMultiSelection(),
 			undo,
+			getSelectedBlockClientId,
 			...extraProps,
 		};
 	};
@@ -179,6 +168,7 @@ function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		isSelected,
+		getSelectedBlockClientId,
 		didAutomaticChange,
 		disabled,
 		undo,
@@ -190,11 +180,11 @@ function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		__unstableSplitSelection,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
-	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
-		formattingControls,
 		disableFormats,
 	} );
 	const hasFormats =
@@ -225,6 +215,12 @@ function RichTextWrapper(
 		[ clientId, identifier ]
 	);
 
+	const clearCurrentSelectionOnUnmount = useCallback( () => {
+		if ( getSelectedBlockClientId() === clientId ) {
+			clearSelectedBlock();
+		}
+	}, [ clearSelectedBlock, clientId, getSelectedBlockClientId ] );
+
 	const onDelete = useCallback(
 		( { value, isReverse } ) => {
 			if ( onMerge ) {
@@ -235,7 +231,7 @@ function RichTextWrapper(
 			// an intentional user interaction distinguishing between Backspace and
 			// Delete to remove the empty field, but also to avoid merge & remove
 			// causing destruction of two fields (merge, then removed merged).
-			if ( onRemove && isEmpty( value ) && isReverse ) {
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
 				onRemove( ! isReverse );
 			}
 		},
@@ -273,10 +269,7 @@ function RichTextWrapper(
 			if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
 				blocks.push(
 					onSplit(
-						toHTMLString( {
-							value: before,
-							multilineTag,
-						} ),
+						toHTMLString( { value: before } ),
 						! isAfterOriginal
 					)
 				);
@@ -300,13 +293,7 @@ function RichTextWrapper(
 					: ! onSplitMiddle || ! isEmpty( after )
 			) {
 				blocks.push(
-					onSplit(
-						toHTMLString( {
-							value: after,
-							multilineTag,
-						} ),
-						isAfterOriginal
-					)
+					onSplit( toHTMLString( { value: after } ), isAfterOriginal )
 				);
 			}
 
@@ -320,7 +307,7 @@ function RichTextWrapper(
 
 			onReplace( blocks, indexToSelect, initialPosition );
 		},
-		[ onReplace, onSplit, multilineTag, onSplitMiddle ]
+		[ onReplace, onSplit, onSplitMiddle ]
 	);
 
 	const onEnter = useCallback(
@@ -340,6 +327,7 @@ function RichTextWrapper(
 						transformation.transform( { content: value.text } ),
 					] );
 					__unstableMarkAutomaticChange();
+					return;
 				}
 			}
 
@@ -347,39 +335,42 @@ function RichTextWrapper(
 				onCustomEnter();
 			}
 
-			if ( multiline ) {
-				if ( shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( value ) ) {
-					splitValue( value );
-				} else {
-					onChange( insertLineSeparator( value ) );
-				}
-			} else {
-				const { text, start: splitStart, end: splitEnd } = value;
-				const canSplitAtEnd =
-					onSplitAtEnd &&
-					splitStart === splitEnd &&
-					splitEnd === text.length;
-
-				if ( shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( value );
+			const { text, start: splitStart, end: splitEnd } = value;
+			const canSplitAtEnd =
+				onSplitAtEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length;
+
+			if ( shiftKey ) {
+				if ( ! disableLineBreaks ) {
+					onChange( insert( value, '\n' ) );
 				}
+			} else if ( canSplit ) {
+				splitValue( value );
+			} else if ( __unstableUseSplitSelection ) {
+				__unstableSplitSelection();
+			} else if ( canSplitAtEnd ) {
+				onSplitAtEnd();
+			} else if (
+				// For some blocks it's desirable to split at the end of the
+				// block when there are two line breaks at the end of the
+				// block, so triple Enter exits the block.
+				onSplitAtDoubleLineEnd &&
+				splitStart === splitEnd &&
+				splitEnd === text.length &&
+				text.slice( -2 ) === '\n\n'
+			) {
+				value.start = value.end - 2;
+				onChange( remove( value ) );
+				onSplitAtDoubleLineEnd();
+			} else if ( ! disableLineBreaks ) {
+				onChange( insert( value, '\n' ) );
 			}
 		},
 		[
 			onReplace,
 			onSplit,
 			__unstableMarkAutomaticChange,
-			multiline,
 			splitValue,
 			onSplitAtEnd,
 		]
@@ -401,9 +392,6 @@ function RichTextWrapper(
 			if ( isInternal ) {
 				const pastedValue = create( {
 					html,
-					multilineTag,
-					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
 					preserveWhiteSpace,
 				} );
 				addActiveFormats( pastedValue, activeFormats );
@@ -441,18 +429,6 @@ function RichTextWrapper(
 
 			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
 
-			// Force the blocks mode when the user is pasting
-			// on a new line & the content resembles a shortcode.
-			// Otherwise it's going to be detected as inline
-			// and the shortcode won't be replaced.
-			if (
-				mode === 'AUTO' &&
-				isEmpty( value ) &&
-				isShortcode( plainText )
-			) {
-				mode = 'BLOCKS';
-			}
-
 			const isPastedURL = isURL( plainText.trim() );
 			const presentEmbedHandlerPicker = () =>
 				embedHandlerPickerRef.current?.presentPicker( {
@@ -479,20 +455,8 @@ function RichTextWrapper(
 			} );
 
 			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
+				const valueToInsert = create( { html: content } );
 				addActiveFormats( valueToInsert, activeFormats );
-
-				// If the content should be multiline, we should process text
-				// separated by a line break as separate lines.
-				if ( multilineTag ) {
-					valueToInsert = replace(
-						valueToInsert,
-						/\n+/g,
-						LINE_SEPARATOR
-					);
-				}
-
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
 				// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL
@@ -511,7 +475,9 @@ function RichTextWrapper(
 						}
 						return;
 					}
-					onReplace( content, content.length - 1, -1 );
+					onReplace( content, content.length - 1, -1, {
+						source: 'clipboard',
+					} );
 				} else {
 					if ( canPasteEmbed ) {
 						onChange(
@@ -529,14 +495,13 @@ function RichTextWrapper(
 			onSplit,
 			splitValue,
 			__unstableEmbedURLOnPaste,
-			multilineTag,
 			preserveWhiteSpace,
 			pastePlainText,
 		]
 	);
 
 	const inputRule = useCallback(
-		( value, valueToFormat ) => {
+		( value ) => {
 			if ( ! onReplace ) {
 				return;
 			}
@@ -552,7 +517,7 @@ function RichTextWrapper(
 				return;
 			}
 
-			const trimmedTextBefore = text.slice( 0, startPosition ).trim();
+			const trimmedTextBefore = text.slice( 0, start ).trim();
 			const prefixTransforms = getBlockTransforms( 'from' ).filter(
 				( { type } ) => type === 'prefix'
 			);
@@ -567,24 +532,25 @@ function RichTextWrapper(
 				return;
 			}
 
-			const content = valueToFormat(
-				slice( value, startPosition, text.length )
-			);
+			const content = toHTMLString( {
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+			} );
 			const block = transformation.transform( content );
-
+			const currentSelection = findSelection( [ block ] );
 			onReplace( [ block ] );
+			selectionChange( ...currentSelection );
 			__unstableMarkAutomaticChange();
 		},
-		[ onReplace, __unstableMarkAutomaticChange ]
+		[ onReplace, start, selectionChange, __unstableMarkAutomaticChange ]
 	);
 
-	const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
+	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );
 
 	return (
 		<RichText
 			clientId={ clientId }
 			identifier={ identifier }
-			ref={ mergedRef }
+			nativeEditorRef={ mergedRef }
 			value={ adjustedValue }
 			onChange={ adjustedOnChange }
 			selectionStart={ selectionStart }
@@ -601,7 +567,6 @@ function RichTextWrapper(
 			onPaste={ onPaste }
 			__unstableIsSelected={ isSelected }
 			__unstableInputRule={ inputRule }
-			__unstableMultilineTag={ multilineTag }
 			__unstableOnEnterFormattedText={ enterFormattedText }
 			__unstableOnExitFormattedText={ exitFormattedText }
 			__unstableOnCreateUndoLevel={ __unstableMarkLastChangeAsPersistent }
@@ -615,9 +580,7 @@ function RichTextWrapper(
 			__unstableAllowPrefixTransformations={
 				__unstableAllowPrefixTransformations
 			}
-			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
-			{ ...nativeProps }
 			blockIsSelected={
 				originalIsSelected !== undefined
 					? originalIsSelected
@@ -630,7 +593,6 @@ function RichTextWrapper(
 			textAlign={ textAlign }
 			selectionColor={ selectionColor }
 			tagsToEliminate={ tagsToEliminate }
-			rootTagsToEliminate={ rootTagsToEliminate }
 			disableEditingMenu={ disableEditingMenu }
 			fontSize={ fontSize }
 			fontFamily={ fontFamily }
@@ -639,10 +601,10 @@ function RichTextWrapper(
 			minWidth={ minWidth }
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
-			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
+			clearCurrentSelectionOnUnmount={ clearCurrentSelectionOnUnmount }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.
@@ -686,7 +648,7 @@ function RichTextWrapper(
 										  }
 										: editableProps.style
 								}
-								className={ classnames(
+								className={ clsx(
 									classes,
 									props.className,
 									editableProps.className
@@ -710,48 +672,32 @@ function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
-
-ForwardedRichTextContainer.Content = ( {
-	value,
-	tagName: Tag,
-	multiline,
-	...props
-} ) => {
-	// Handle deprecated `children` and `node` sources.
-	if ( Array.isArray( value ) ) {
-		value = childrenSource.toHTML( value );
-	}
-
-	const MultilineTag = getMultilineTag( multiline );
-
-	if ( ! value && MultilineTag ) {
-		value = `<${ MultilineTag }></${ MultilineTag }>`;
-	}
-
-	const content = <RawHTML>{ value }</RawHTML>;
+// This export does not actually implement a private API, but was exported
+// under this name for interoperability with the web version of the RichText
+// component.
+export const PrivateRichText = withDeprecations(
+	forwardRef( RichTextWrapper )
+);
 
-	if ( Tag ) {
-		const { format, ...restProps } = props;
-		return <Tag { ...restProps }>{ content }</Tag>;
-	}
-
-	return content;
-};
+PrivateRichText.Content = Content;
 
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
-ForwardedRichTextContainer.Content.defaultProps = {
+PrivateRichText.Content.defaultProps = {
 	format: 'string',
 	value: '',
 };
 
+PrivateRichText.Raw = forwardRef( ( props, ref ) => (
+	<RichText { ...props } nativeEditorRef={ ref } />
+) );
+
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+export default PrivateRichText;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';
diff --git a/packages/block-editor/src/components/rich-text/multiline.js b/packages/block-editor/src/components/rich-text/multiline.js
new file mode 100644
index 00000000000000..1fa77b25a4db9c
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/multiline.js
@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { ENTER } from '@wordpress/keycodes';
+import { create, split, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { RichTextWrapper } from './';
+import { store as blockEditorStore } from '../../store';
+import { useBlockEditContext } from '../block-edit';
+import { getMultilineTag } from './utils';
+
+function RichTextMultiline(
+	{
+		children,
+		identifier,
+		tagName: TagName = 'div',
+		value = '',
+		onChange,
+		multiline,
+		...props
+	},
+	forwardedRef
+) {
+	deprecated( 'wp.blockEditor.RichText multiline prop', {
+		since: '6.1',
+		version: '6.3',
+		alternative: 'nested blocks (InnerBlocks)',
+		link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/',
+	} );
+
+	const { clientId } = useBlockEditContext();
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
+	const { selectionChange } = useDispatch( blockEditorStore );
+
+	const multilineTagName = getMultilineTag( multiline );
+	value = value || `<${ multilineTagName }></${ multilineTagName }>`;
+	const padded = `</${ multilineTagName }>${ value }<${ multilineTagName }>`;
+	const values = padded.split(
+		`</${ multilineTagName }><${ multilineTagName }>`
+	);
+
+	values.shift();
+	values.pop();
+
+	function _onChange( newValues ) {
+		onChange(
+			`<${ multilineTagName }>${ newValues.join(
+				`</${ multilineTagName }><${ multilineTagName }>`
+			) }</${ multilineTagName }>`
+		);
+	}
+
+	return (
+		<TagName ref={ forwardedRef }>
+			{ values.map( ( _value, index ) => {
+				return (
+					<RichTextWrapper
+						key={ index }
+						identifier={ `${ identifier }-${ index }` }
+						tagName={ multilineTagName }
+						value={ _value }
+						onChange={ ( newValue ) => {
+							const newValues = values.slice();
+							newValues[ index ] = newValue;
+							_onChange( newValues );
+						} }
+						isSelected={ undefined }
+						onKeyDown={ ( event ) => {
+							if ( event.keyCode !== ENTER ) {
+								return;
+							}
+
+							event.preventDefault();
+
+							const { offset: start } = getSelectionStart();
+							const { offset: end } = getSelectionEnd();
+
+							// Cannot split if there is no selection.
+							if (
+								typeof start !== 'number' ||
+								typeof end !== 'number'
+							) {
+								return;
+							}
+
+							const richTextValue = create( { html: _value } );
+							richTextValue.start = start;
+							richTextValue.end = end;
+
+							const array = split( richTextValue ).map( ( v ) =>
+								toHTMLString( { value: v } )
+							);
+
+							const newValues = values.slice();
+							newValues.splice( index, 1, ...array );
+							_onChange( newValues );
+							selectionChange(
+								clientId,
+								`${ identifier }-${ index + 1 }`,
+								0,
+								0
+							);
+						} }
+						onMerge={ ( forward ) => {
+							const newValues = values.slice();
+							let offset = 0;
+							if ( forward ) {
+								if ( ! newValues[ index + 1 ] ) {
+									return;
+								}
+								newValues.splice(
+									index,
+									2,
+									newValues[ index ] + newValues[ index + 1 ]
+								);
+								offset = newValues[ index ].length - 1;
+							} else {
+								if ( ! newValues[ index - 1 ] ) {
+									return;
+								}
+								newValues.splice(
+									index - 1,
+									2,
+									newValues[ index - 1 ] + newValues[ index ]
+								);
+								offset = newValues[ index - 1 ].length - 1;
+							}
+							_onChange( newValues );
+							selectionChange(
+								clientId,
+								`${ identifier }-${
+									index - ( forward ? 0 : 1 )
+								}`,
+								offset,
+								offset
+							);
+						} }
+						{ ...props }
+					/>
+				);
+			} ) }
+		</TagName>
+	);
+}
+
+export default forwardRef( RichTextMultiline );
diff --git a/packages/rich-text/src/component/format-edit.js b/packages/block-editor/src/components/rich-text/native/format-edit.js
similarity index 86%
rename from packages/rich-text/src/component/format-edit.js
rename to packages/block-editor/src/components/rich-text/native/format-edit.js
index 1867c1ef2e4f75..75b077ab321d43 100644
--- a/packages/rich-text/src/component/format-edit.js
+++ b/packages/block-editor/src/components/rich-text/native/format-edit.js
@@ -1,8 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { getActiveFormat } from '../get-active-format';
-import { getActiveObject } from '../get-active-object';
+import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
 
 export default function FormatEdit( {
 	formatTypes,
diff --git a/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js
new file mode 100644
index 00000000000000..bd3c9171c8c73f
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/get-format-colors.native.js
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import { getColorObjectByAttributeValues } from '../../../components/colors';
+
+const FORMAT_TYPE = 'core/text-color';
+const REGEX_TO_MATCH = /^has-(.*)-color$/;
+
+export function getFormatColors( formats, colors ) {
+	const newFormats = formats.slice();
+
+	// We are looping through a sparse array where empty indices will be
+	// skipped.
+	newFormats.forEach( ( format ) => {
+		format.forEach( ( currentFormat ) => {
+			if ( currentFormat?.type === FORMAT_TYPE ) {
+				const className = currentFormat?.attributes?.class;
+
+				className?.split( ' ' ).forEach( ( currentClass ) => {
+					const match = currentClass.match( REGEX_TO_MATCH );
+					if ( match ) {
+						const [ , colorSlug ] =
+							currentClass.match( REGEX_TO_MATCH );
+						const colorObject = getColorObjectByAttributeValues(
+							colors,
+							colorSlug
+						);
+						const currentStyles = currentFormat?.attributes?.style;
+						if (
+							colorObject?.color &&
+							( ! currentStyles ||
+								currentStyles?.indexOf( colorObject.color ) ===
+									-1 )
+						) {
+							currentFormat.attributes.style = [
+								`color: ${ colorObject.color }`,
+								currentStyles,
+							].join( ';' );
+						}
+					}
+				} );
+			}
+		} );
+	} );
+
+	return newFormats;
+}
diff --git a/packages/block-editor/src/components/rich-text/native/index.js b/packages/block-editor/src/components/rich-text/native/index.js
new file mode 100644
index 00000000000000..2d1ec238274a0b
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/index.js
@@ -0,0 +1 @@
+export default () => {};
diff --git a/packages/block-editor/src/components/rich-text/native/index.native.js b/packages/block-editor/src/components/rich-text/native/index.native.js
new file mode 100644
index 00000000000000..f30a56fd1268ce
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/index.native.js
@@ -0,0 +1,1388 @@
+/* eslint no-console: ["error", { allow: ["warn"] }] */
+
+/**
+ * External dependencies
+ */
+import { View, Platform, Dimensions } from 'react-native';
+import memize from 'memize';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import {
+	showUserSuggestions,
+	showXpostSuggestions,
+} from '@wordpress/react-native-bridge';
+import { BlockFormatControls } from '@wordpress/block-editor';
+import { getPxFromCssUnit } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import {
+	compose,
+	debounce,
+	withPreferredColorScheme,
+} from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { childrenBlock } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
+import { isURL } from '@wordpress/url';
+import { atSymbol, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import {
+	applyFormat,
+	getActiveFormat,
+	getActiveFormats,
+	insert,
+	getTextContent,
+	isEmpty,
+	create,
+	toHTMLString,
+	isCollapsed,
+	remove,
+} from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { useFormatTypes } from './use-format-types';
+import FormatEdit from './format-edit';
+import { getFormatColors } from './get-format-colors';
+import styles from './style.scss';
+import ToolbarButtonWithOptions from './toolbar-button-with-options';
+
+// The flattened color palettes array is memoized to ensure that the same array instance is
+// returned for the colors palettes. This value might be used as a prop, so having the same
+// instance will prevent unnecessary re-renders of the RichText component.
+const flatColorPalettes = memize( ( colorsPalettes ) => [
+	...( colorsPalettes?.theme || [] ),
+	...( colorsPalettes?.custom || [] ),
+	...( colorsPalettes?.default || [] ),
+] );
+
+const getSelectionColor = memize(
+	(
+		currentSelectionColor,
+		defaultSelectionColor,
+		baseGlobalStyles,
+		isBlockBasedTheme
+	) => {
+		let selectionColor = defaultSelectionColor;
+		if ( currentSelectionColor ) {
+			selectionColor = currentSelectionColor;
+		}
+
+		if ( isBlockBasedTheme ) {
+			const colordTextColor = colord( selectionColor );
+			const colordBackgroundColor = colord(
+				baseGlobalStyles?.color?.background
+			);
+			const isColordTextReadable = colordTextColor.isReadable(
+				colordBackgroundColor
+			);
+			if ( ! isColordTextReadable ) {
+				selectionColor = baseGlobalStyles?.color?.text;
+			}
+		}
+
+		return selectionColor;
+	}
+);
+
+const gutenbergFormatNamesToAztec = {
+	'core/bold': 'bold',
+	'core/italic': 'italic',
+	'core/strikethrough': 'strikethrough',
+	'core/text-color': 'mark',
+};
+
+const EMPTY_PARAGRAPH_TAGS = '<p></p>';
+const DEFAULT_FONT_SIZE = 16;
+const MIN_LINE_HEIGHT = 1;
+
+export class RichText extends Component {
+	constructor( { value, selectionStart, selectionEnd } ) {
+		super( ...arguments );
+
+		this.isIOS = Platform.OS === 'ios';
+		this.createRecord = this.createRecord.bind( this );
+		this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
+		this.onKeyDown = this.onKeyDown.bind( this );
+		this.handleEnter = this.handleEnter.bind( this );
+		this.handleDelete = this.handleDelete.bind( this );
+		this.onPaste = this.onPaste.bind( this );
+		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+		this.onTextUpdate = this.onTextUpdate.bind( this );
+		this.onContentSizeChange = this.onContentSizeChange.bind( this );
+		this.onFormatChange = this.onFormatChange.bind( this );
+		this.formatToValue = memize( this.formatToValue.bind( this ), {
+			maxSize: 1,
+		} );
+		this.debounceCreateUndoLevel = debounce( this.onCreateUndoLevel, 1000 );
+		// This prevents a bug in Aztec which triggers onSelectionChange twice on format change.
+		this.onSelectionChange = this.onSelectionChange.bind( this );
+		this.onSelectionChangeFromAztec =
+			this.onSelectionChangeFromAztec.bind( this );
+		this.valueToFormat = this.valueToFormat.bind( this );
+		this.getHtmlToRender = this.getHtmlToRender.bind( this );
+		this.handleSuggestionFunc = this.handleSuggestionFunc.bind( this );
+		this.handleUserSuggestion = this.handleSuggestionFunc(
+			showUserSuggestions,
+			'@'
+		).bind( this );
+		this.handleXpostSuggestion = this.handleSuggestionFunc(
+			showXpostSuggestions,
+			'+'
+		).bind( this );
+		this.suggestionOptions = this.suggestionOptions.bind( this );
+		this.insertString = this.insertString.bind( this );
+		this.manipulateEventCounterToForceNativeToRefresh =
+			this.manipulateEventCounterToForceNativeToRefresh.bind( this );
+		this.shouldDropEventFromAztec =
+			this.shouldDropEventFromAztec.bind( this );
+		this.state = {
+			activeFormats: [],
+			selectedFormat: null,
+			height: 0,
+			currentFontSize: this.getFontSize( arguments[ 0 ] ),
+		};
+		this.needsSelectionUpdate = false;
+		this.savedContent = '';
+		this.isTouched = false;
+		this.lastAztecEventType = null;
+
+		this.lastHistoryValue = value;
+
+		// Internal values that are update synchronously, unlike props.
+		this.value = value;
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+
+	/**
+	 * Get the current record (value and selection) from props and state.
+	 *
+	 * @return {Object} The current record (value and selection).
+	 */
+	getRecord() {
+		const {
+			selectionStart: start,
+			selectionEnd: end,
+			colorPalette,
+		} = this.props;
+		const { value } = this.props;
+		const currentValue = this.formatToValue( value );
+
+		const { formats, replacements, text } = currentValue;
+		const { activeFormats } = this.state;
+		const newFormats = getFormatColors( formats, colorPalette );
+
+		return {
+			formats: newFormats,
+			replacements,
+			text,
+			start,
+			end,
+			activeFormats,
+		};
+	}
+
+	/**
+	 * Creates a RichText value "record" from the current content and selection
+	 * information
+	 *
+	 *
+	 * @return {Object} A RichText value with formats and selection.
+	 */
+	createRecord() {
+		const { preserveWhiteSpace } = this.props;
+		const value = {
+			start: this.selectionStart,
+			end: this.selectionEnd,
+			...create( {
+				html: this.value,
+				range: null,
+				preserveWhiteSpace,
+			} ),
+		};
+		const start = Math.min( this.selectionStart, value.text.length );
+		const end = Math.min( this.selectionEnd, value.text.length );
+		return { ...value, start, end };
+	}
+
+	valueToFormat( value ) {
+		// Remove the outer root tags.
+		return this.removeRootTagsProducedByAztec( toHTMLString( { value } ) );
+	}
+
+	getActiveFormatNames( record ) {
+		const { formatTypes } = this.props;
+
+		return formatTypes
+			.map( ( { name } ) => name )
+			.filter( ( name ) => {
+				return getActiveFormat( record, name ) !== undefined;
+			} )
+			.map( ( name ) => gutenbergFormatNamesToAztec[ name ] )
+			.filter( Boolean );
+	}
+
+	onFormatChange( record ) {
+		const { start = 0, end = 0, activeFormats = [] } = record;
+		const changeHandlers = Object.fromEntries(
+			Object.entries( this.props ).filter( ( [ key ] ) =>
+				key.startsWith( 'format_on_change_functions_' )
+			)
+		);
+
+		Object.values( changeHandlers ).forEach( ( changeHandler ) => {
+			changeHandler( record.formats, record.text );
+		} );
+
+		this.value = this.valueToFormat( record );
+		this.props.onChange( this.value );
+		this.setState( { activeFormats } );
+		this.props.onSelectionChange( start, end );
+		this.selectionStart = start;
+		this.selectionEnd = end;
+
+		this.onCreateUndoLevel();
+
+		this.lastAztecEventType = 'format change';
+	}
+
+	insertString( record, string ) {
+		if ( record && string ) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			const toInsert = insert( record, string );
+			this.onFormatChange( toInsert );
+		}
+	}
+
+	onCreateUndoLevel() {
+		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
+		// If the content is the same, no level needs to be created.
+		if ( this.lastHistoryValue?.toString() === this.value?.toString() ) {
+			return;
+		}
+
+		onCreateUndoLevel();
+		this.lastHistoryValue = this.value;
+	}
+
+	/*
+	 * Cleans up any root tags produced by aztec.
+	 * TODO: This should be removed on a later version when aztec doesn't return the top tag of the text being edited
+	 */
+	removeRootTagsProducedByAztec( html ) {
+		let result = this.removeRootTag( this.props.tagName, html );
+
+		if ( this.props.tagsToEliminate ) {
+			this.props.tagsToEliminate.forEach( ( element ) => {
+				result = this.removeTag( element, result );
+			} );
+		}
+
+		return result;
+	}
+
+	removeRootTag( tag, html ) {
+		const openingTagRegexp = RegExp( '^<' + tag + '[^>]*>', 'gim' );
+		const closingTagRegexp = RegExp( '</' + tag + '>$', 'gim' );
+
+		return html
+			.replace( openingTagRegexp, '' )
+			.replace( closingTagRegexp, '' );
+	}
+
+	removeTag( tag, html ) {
+		const openingTagRegexp = RegExp( '<' + tag + '>', 'gim' );
+		const closingTagRegexp = RegExp( '</' + tag + '>', 'gim' );
+		return html
+			.replace( openingTagRegexp, '' )
+			.replace( closingTagRegexp, '' );
+	}
+
+	/*
+	 * Handles any case where the content of the AztecRN instance has changed
+	 */
+	onChangeFromAztec( event ) {
+		if ( this.shouldDropEventFromAztec( event, 'onChange' ) ) {
+			return;
+		}
+
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			event.nativeEvent.text
+		);
+
+		const { __unstableInputRule } = this.props;
+		const currentValuePosition = {
+			end: this.isIOS ? this.selectionEnd : this.selectionEnd + 1,
+			start: this.isIOS ? this.selectionStart : this.selectionStart + 1,
+		};
+
+		if (
+			__unstableInputRule &&
+			__unstableInputRule( {
+				...currentValuePosition,
+				...this.formatToValue( contentWithoutRootTag ),
+			} )
+		) {
+			return;
+		}
+
+		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
+		if ( contentWithoutRootTag === this.value?.toString() ) {
+			return;
+		}
+		this.lastEventCount = event.nativeEvent.eventCount;
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = true; // The onChange event always fires after the fact.
+		this.onTextUpdate( event );
+		this.lastAztecEventType = 'input';
+	}
+
+	onTextUpdate( event ) {
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			event.nativeEvent.text
+		);
+
+		this.debounceCreateUndoLevel();
+		const refresh = this.value?.toString() !== contentWithoutRootTag;
+		this.value = contentWithoutRootTag;
+
+		// We don't want to refresh if our goal is just to create a record.
+		if ( refresh ) {
+			this.props.onChange( contentWithoutRootTag );
+		}
+	}
+
+	/*
+	 * Handles any case where the content of the AztecRN instance has changed in size
+	 */
+	onContentSizeChange( contentSize ) {
+		this.setState( contentSize );
+		this.lastAztecEventType = 'content size change';
+	}
+
+	onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		// Add stubs for conformance in downstream autocompleters logic.
+		this.customEditableOnKeyDown?.( {
+			preventDefault: () => undefined,
+			...event,
+			key: RCTAztecView.KeyCodes[ event?.keyCode ],
+		} );
+
+		this.handleDelete( event );
+		this.handleEnter( event );
+		this.handleTriggerKeyCodes( event );
+	}
+
+	handleEnter( event ) {
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+		const { onEnter } = this.props;
+
+		if ( ! onEnter ) {
+			return;
+		}
+
+		onEnter( {
+			value: this.createRecord(),
+			onChange: this.onFormatChange,
+			shiftKey: event.shiftKey,
+		} );
+		this.lastAztecEventType = 'input';
+	}
+
+	handleDelete( event ) {
+		if ( this.shouldDropEventFromAztec( event, 'handleDelete' ) ) {
+			return;
+		}
+
+		const { keyCode } = event;
+
+		if ( keyCode !== DELETE && keyCode !== BACKSPACE ) {
+			return;
+		}
+		const isReverse = keyCode === BACKSPACE;
+
+		const { onDelete } = this.props;
+		this.lastEventCount = event.nativeEvent.eventCount;
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
+		const value = this.createRecord();
+		const { start, end, text, activeFormats } = value;
+		const hasActiveFormats = activeFormats && !! activeFormats.length;
+		let newValue;
+
+		// Always handle full content deletion ourselves.
+		if ( start === 0 && end !== 0 && end >= text.length ) {
+			newValue = remove( value );
+			this.onFormatChange( newValue );
+			event.preventDefault();
+			return;
+		}
+
+		// Only process delete if the key press occurs at an uncollapsed edge.
+		if (
+			! isCollapsed( value ) ||
+			hasActiveFormats ||
+			( isReverse && start !== 0 ) ||
+			( ! isReverse && end !== text.length )
+		) {
+			return;
+		}
+
+		if ( onDelete ) {
+			onDelete( { isReverse, value } );
+		}
+
+		event.preventDefault();
+		this.lastAztecEventType = 'input';
+	}
+
+	handleTriggerKeyCodes( event ) {
+		const { keyCode } = event;
+		const triggeredOption = this.suggestionOptions().find( ( option ) => {
+			const triggeredKeyCode = option.triggerChar.charCodeAt( 0 );
+			return triggeredKeyCode === keyCode;
+		} );
+
+		if ( triggeredOption ) {
+			const record = this.getRecord();
+			const text = getTextContent( record );
+			// Only respond to the trigger if the selection is on the start of text or line
+			// or if the character before is a space.
+			const useTrigger =
+				text.length === 0 ||
+				record.start === 0 ||
+				text.charAt( record.start - 1 ) === '\n' ||
+				text.charAt( record.start - 1 ) === ' ';
+
+			if ( useTrigger && triggeredOption.onClick ) {
+				triggeredOption.onClick();
+			} else {
+				this.insertString( record, triggeredOption.triggerChar );
+			}
+		}
+	}
+
+	suggestionOptions() {
+		const { areMentionsSupported, areXPostsSupported } = this.props;
+		const allOptions = [
+			{
+				supported: areMentionsSupported,
+				title: __( 'Insert mention' ),
+				onClick: this.handleUserSuggestion,
+				triggerChar: '@',
+				value: 'mention',
+				label: __( 'Mention' ),
+				icon: atSymbol,
+			},
+			{
+				supported: areXPostsSupported,
+				title: __( 'Insert crosspost' ),
+				onClick: this.handleXpostSuggestion,
+				triggerChar: '+',
+				value: 'crosspost',
+				label: __( 'Crosspost' ),
+				icon: plus,
+			},
+		];
+		return allOptions.filter( ( op ) => op.supported );
+	}
+
+	handleSuggestionFunc( suggestionFunction, prefix ) {
+		return () => {
+			const record = this.getRecord();
+			suggestionFunction()
+				.then( ( suggestion ) => {
+					this.insertString( record, `${ prefix }${ suggestion } ` );
+				} )
+				.catch( () => {} );
+		};
+	}
+
+	/**
+	 * Handles a paste event from the native Aztec Wrapper.
+	 *
+	 * @param {Object} event The paste event which wraps `nativeEvent`.
+	 */
+	onPaste( event ) {
+		const { onPaste, onChange } = this.props;
+		const { activeFormats = [] } = this.state;
+
+		const { pastedText, pastedHtml, files } = event.nativeEvent;
+		const currentRecord = this.createRecord();
+
+		event.preventDefault();
+
+		// There is a selection, check if a URL is pasted.
+		if ( ! isCollapsed( currentRecord ) ) {
+			const trimmedText = ( pastedHtml || pastedText )
+				.replace( /<[^>]+>/g, '' )
+				.trim();
+
+			// A URL was pasted, turn the selection into a link.
+			if ( isURL( trimmedText ) ) {
+				const linkedRecord = applyFormat( currentRecord, {
+					type: 'a',
+					attributes: {
+						href: decodeEntities( trimmedText ),
+					},
+				} );
+				this.value = this.valueToFormat( linkedRecord );
+				onChange( this.value );
+
+				// Allows us to ask for this information when we get a report.
+				window.console.log( 'Created link:\n\n', trimmedText );
+
+				return;
+			}
+		}
+
+		if ( onPaste ) {
+			onPaste( {
+				value: currentRecord,
+				onChange: this.onFormatChange,
+				html: pastedHtml,
+				plainText: pastedText,
+				files,
+				activeFormats,
+			} );
+		}
+	}
+
+	onFocus() {
+		this.isTouched = true;
+
+		const { unstableOnFocus, onSelectionChange } = this.props;
+
+		if ( unstableOnFocus ) {
+			unstableOnFocus();
+		}
+
+		// We know for certain that on focus, the old selection is invalid. It
+		// will be recalculated on `selectionchange`.
+
+		onSelectionChange( this.selectionStart, this.selectionEnd );
+
+		this.lastAztecEventType = 'focus';
+	}
+
+	onBlur( event ) {
+		this.isTouched = false;
+
+		// Check if value is up to date with latest state of native AztecView.
+		if (
+			event.nativeEvent.text &&
+			event.nativeEvent.text !== this.props.value?.toString()
+		) {
+			this.onTextUpdate( event );
+		}
+
+		if ( this.props.onBlur ) {
+			this.props.onBlur( event );
+		}
+
+		this.lastAztecEventType = 'blur';
+	}
+
+	onSelectionChange( start, end ) {
+		const hasChanged =
+			this.selectionStart !== start || this.selectionEnd !== end;
+
+		this.selectionStart = start;
+		this.selectionEnd = end;
+
+		// This is a manual selection change event if onChange was not triggered just before
+		// and we did not just trigger a text update
+		// `onChange` could be the last event and could have been triggered a long time ago so
+		// this approach is not perfectly reliable.
+		const isManual =
+			this.lastAztecEventType !== 'input' &&
+			this.props.value?.toString() === this.value?.toString();
+		if ( hasChanged && isManual ) {
+			const value = this.createRecord();
+			const activeFormats = getActiveFormats( value );
+			this.setState( { activeFormats } );
+		}
+
+		this.props.onSelectionChange( start, end );
+	}
+
+	shouldDropEventFromAztec( event, logText ) {
+		const shouldDrop =
+			! this.isIOS && event.nativeEvent.eventCount <= this.lastEventCount;
+		if ( shouldDrop ) {
+			window.console.log(
+				`Dropping ${ logText } from Aztec as its event counter is older than latest sent to the native side. Got ${ event.nativeEvent.eventCount } but lastEventCount is ${ this.lastEventCount }.`
+			);
+		}
+		return shouldDrop;
+	}
+
+	/**
+	 * Determines whether the text input should receive focus after an update.
+	 * For cases where a RichText with a value is merged with an empty one.
+	 *
+	 * @param {Object} prevProps - The previous props of the component.
+	 * @return {boolean} True if the text input should receive focus, false otherwise.
+	 */
+	shouldFocusTextInputAfterMerge( prevProps ) {
+		const {
+			__unstableIsSelected: isSelected,
+			blockIsSelected,
+			selectionStart,
+			selectionEnd,
+			__unstableMobileNoFocusOnMount,
+		} = this.props;
+
+		const {
+			__unstableIsSelected: prevIsSelected,
+			blockIsSelected: prevBlockIsSelected,
+		} = prevProps;
+
+		const noSelectionValues =
+			selectionStart === undefined && selectionEnd === undefined;
+		const textInputWasNotFocused = ! prevIsSelected && ! isSelected;
+
+		return (
+			! __unstableMobileNoFocusOnMount &&
+			noSelectionValues &&
+			textInputWasNotFocused &&
+			! prevBlockIsSelected &&
+			blockIsSelected
+		);
+	}
+
+	onSelectionChangeFromAztec( start, end, text, event ) {
+		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
+			return;
+		}
+
+		// `end` can be less than `start` on iOS
+		// Let's fix that here so `rich-text/slice` can work properly.
+		const realStart = Math.min( start, end );
+		const realEnd = Math.max( start, end );
+
+		// Check and dicsard stray event, where the text and selection is equal to the ones already cached.
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			event.nativeEvent.text
+		);
+		if (
+			contentWithoutRootTag === this.value?.toString() &&
+			realStart === this.selectionStart &&
+			realEnd === this.selectionEnd
+		) {
+			return;
+		}
+
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = true; // Selection change event always fires after the fact.
+
+		// Update text before updating selection
+		// Make sure there are changes made to the content before upgrading it upward.
+		this.onTextUpdate( event );
+
+		// Aztec can send us selection change events after it has lost focus.
+		// For instance the autocorrect feature will complete a partially written
+		// word when resigning focus, causing a selection change event.
+		// Forwarding this selection change could cause this RichText to regain
+		// focus and start a focus loop.
+		//
+		// See https://github.com/wordpress-mobile/gutenberg-mobile/issues/1696
+		if ( this.props.__unstableIsSelected ) {
+			this.onSelectionChange( realStart, realEnd );
+		}
+		// Update lastEventCount to prevent Aztec from re-rendering the content it just sent.
+		this.lastEventCount = event.nativeEvent.eventCount;
+
+		this.lastAztecEventType = 'selection change';
+	}
+
+	isEmpty() {
+		return isEmpty( this.formatToValue( this.props.value ) );
+	}
+
+	formatToValue( value ) {
+		const { preserveWhiteSpace } = this.props;
+		// Handle deprecated `children` and `node` sources.
+		if ( Array.isArray( value ) ) {
+			return create( {
+				html: childrenBlock.toHTML( value ),
+				preserveWhiteSpace,
+			} );
+		}
+
+		if ( this.props.format === 'string' ) {
+			return create( {
+				html: value,
+				preserveWhiteSpace,
+			} );
+		}
+
+		// Guard for blocks passing `null` in onSplit callbacks. May be removed
+		// if onSplit is revised to not pass a `null` value.
+		if ( value === null ) {
+			return create();
+		}
+
+		return value;
+	}
+
+	manipulateEventCounterToForceNativeToRefresh() {
+		if ( this.isIOS ) {
+			this.lastEventCount = undefined;
+			return;
+		}
+
+		if ( typeof this.lastEventCount !== 'undefined' ) {
+			this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
+		} // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
+		//   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
+	}
+
+	shouldComponentUpdate( nextProps, nextState ) {
+		if (
+			nextProps.tagName !== this.props.tagName ||
+			nextProps.reversed !== this.props.reversed ||
+			nextProps.start !== this.props.start
+		) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			this.value = undefined;
+			return true;
+		}
+
+		// TODO: Please re-introduce the check to avoid updating the content right after an `onChange` call.
+		// It was removed in https://github.com/WordPress/gutenberg/pull/12417 to fix undo/redo problem.
+
+		// If the component is changed React side (undo/redo/merging/splitting/custom text actions)
+		// we need to make sure the native is updated as well.
+
+		// Also, don't trust the "this.lastContent" as on Android, incomplete text events arrive
+		//  with only some of the text, while the virtual keyboard's suggestion system does its magic.
+		// ** compare with this.lastContent for optimizing performance by not forcing Aztec with text it already has
+		// , but compare with props.value to not lose "half word" text because of Android virtual keyb autosuggestion behavior
+		if (
+			typeof nextProps.value !== 'undefined' &&
+			typeof this.props.value !== 'undefined' &&
+			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
+			nextProps.value?.toString() !== this.props.value?.toString()
+		) {
+			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
+			//  let's force caret update if state has selection set.
+			if (
+				typeof nextProps.selectionStart !== 'undefined' &&
+				typeof nextProps.selectionEnd !== 'undefined'
+			) {
+				this.needsSelectionUpdate = true;
+			}
+
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+		}
+
+		if ( ! this.comesFromAztec ) {
+			if (
+				typeof nextProps.selectionStart !== 'undefined' &&
+				typeof nextProps.selectionEnd !== 'undefined' &&
+				nextProps.selectionStart !== this.props.selectionStart &&
+				nextProps.selectionStart !== this.selectionStart &&
+				nextProps.__unstableIsSelected
+			) {
+				this.needsSelectionUpdate = true;
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+
+			// For font size changes from a prop value a force refresh
+			// is needed without the selection update.
+			if ( nextProps?.fontSize !== this.props?.fontSize ) {
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+
+			if (
+				( nextProps?.style?.fontSize !== this.props?.style?.fontSize &&
+					nextState.currentFontSize !==
+						this.state.currentFontSize ) ||
+				nextState.currentFontSize !== this.state.currentFontSize ||
+				nextProps?.style?.lineHeight !== this.props?.style?.lineHeight
+			) {
+				this.needsSelectionUpdate = true;
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+		}
+
+		return true;
+	}
+
+	componentDidMount() {
+		// Request focus if wrapping block is selected and parent hasn't inhibited the focus request. This method of focusing
+		//  is trying to implement the web-side counterpart of BlockList's `focusTabbable` where the BlockList is focusing an
+		//  inputbox by searching the DOM. We don't have the DOM in RN so, using the combination of blockIsSelected and __unstableMobileNoFocusOnMount
+		//  to determine if we should focus the RichText.
+		if (
+			this.props.blockIsSelected &&
+			! this.props.__unstableMobileNoFocusOnMount
+		) {
+			this._editor.focus();
+			this.onSelectionChange(
+				this.props.selectionStart || 0,
+				this.props.selectionEnd || 0
+			);
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { style, tagName } = this.props;
+		const { currentFontSize } = this.state;
+
+		if ( this.props.value?.toString() !== this.value?.toString() ) {
+			this.value = this.props.value;
+		}
+		const { __unstableIsSelected: prevIsSelected } = prevProps;
+		const { __unstableIsSelected: isSelected } = this.props;
+
+		if ( isSelected && ! prevIsSelected ) {
+			this._editor.focus();
+			// Update selection props explicitly when component is selected as Aztec won't call onSelectionChange
+			// if its internal value hasn't change. When created, default value is 0, 0.
+			this.onSelectionChange(
+				this.props.selectionStart || 0,
+				this.props.selectionEnd || 0
+			);
+		} else if ( this.shouldFocusTextInputAfterMerge( prevProps ) ) {
+			// Since this is happening when merging blocks, the selection should be at the last character position.
+			// As a fallback the internal selectionEnd value is used.
+			const lastCharacterPosition =
+				this.value?.toString().length ?? this.selectionEnd;
+			this._editor.focus();
+			this.props.onSelectionChange(
+				lastCharacterPosition,
+				lastCharacterPosition
+			);
+		} else if ( ! isSelected && prevIsSelected ) {
+			this._editor.blur();
+		}
+
+		// For font size values changes from the font size picker
+		// we compare previous values to refresh the selected font size,
+		// this is also used when the tag name changes
+		// e.g Heading block and a level change like h1->h2.
+		const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
+		const prevFontSizeStyle = this.getParsedFontSize(
+			prevProps?.style?.fontSize
+		);
+		const isDifferentTag = prevProps.tagName !== tagName;
+		if (
+			( currentFontSize &&
+				( currentFontSizeStyle || prevFontSizeStyle ) &&
+				currentFontSizeStyle !== currentFontSize ) ||
+			isDifferentTag
+		) {
+			this.setState( {
+				currentFontSize: this.getFontSize( this.props ),
+			} );
+		}
+	}
+
+	componentWillUnmount() {
+		const { clearCurrentSelectionOnUnmount } = this.props;
+
+		// There are cases when the component is unmounted e.g. scrolling in a
+		// long post due to virtualization, so the block selection needs to be cleared
+		// so it doesn't auto-focus when it's added back.
+		if ( this._editor?.isFocused() ) {
+			clearCurrentSelectionOnUnmount?.();
+		}
+	}
+
+	getHtmlToRender( record, tagName ) {
+		// Save back to HTML from React tree.
+		let value = this.valueToFormat( record );
+
+		if ( value === undefined ) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			value = '';
+		}
+		// On android if content is empty we need to send no content or else the placeholder will not show.
+		if (
+			! this.isIOS &&
+			( value?.toString() === '' ||
+				value?.toString() === EMPTY_PARAGRAPH_TAGS )
+		) {
+			return '';
+		}
+
+		if ( tagName ) {
+			let extraAttributes = ``;
+			if ( tagName === `ol` ) {
+				if ( this.props.reversed ) {
+					extraAttributes += ` reversed`;
+				}
+				if ( this.props.start ) {
+					extraAttributes += ` start=${ this.props.start }`;
+				}
+			}
+			value = `<${ tagName }${ extraAttributes }>${ value }</${ tagName }>`;
+		}
+		return value;
+	}
+
+	getEditableProps() {
+		return {
+			// Overridable props.
+			style: {},
+			className: 'rich-text',
+			onKeyDown: () => null,
+		};
+	}
+
+	getParsedFontSize( fontSize ) {
+		const { height, width } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
+
+		if ( ! fontSize ) {
+			return fontSize;
+		}
+
+		const selectedPxValue =
+			getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;
+
+		return parseFloat( selectedPxValue );
+	}
+
+	getFontSize( props ) {
+		const { baseGlobalStyles, tagName, fontSize, style } = props;
+		const tagNameFontSize =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
+
+		let newFontSize = DEFAULT_FONT_SIZE;
+
+		// Disables line-height rendering for pre elements until we fix some issues with AztecAndroid.
+		if ( tagName === 'pre' && ! this.isIOS ) {
+			return undefined;
+		}
+
+		// For block-based themes, get the default editor font size.
+		if ( baseGlobalStyles?.typography?.fontSize && tagName === 'p' ) {
+			newFontSize = baseGlobalStyles?.typography?.fontSize;
+		}
+
+		// For block-based themes, get the default element font size
+		// e.g h1, h2.
+		if ( tagNameFontSize ) {
+			newFontSize = tagNameFontSize;
+		}
+
+		// For font size values provided from the styles,
+		// usually from values set from the font size picker.
+		if ( style?.fontSize ) {
+			newFontSize = style.fontSize;
+		}
+
+		// Fall-back to a font size provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
+			newFontSize = fontSize;
+		}
+
+		// We need to always convert to px units because the selected value
+		// could be coming from the web where it could be stored as a different unit.
+		const selectedPxValue = this.getParsedFontSize( newFontSize );
+
+		return selectedPxValue;
+	}
+
+	getLineHeight() {
+		const { baseGlobalStyles, tagName, lineHeight, style } = this.props;
+		const tagNameLineHeight =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight;
+		let newLineHeight;
+
+		// Disables line-height rendering for pre elements until we fix some issues with AztecAndroid.
+		if ( tagName === 'pre' && ! this.isIOS ) {
+			return undefined;
+		}
+
+		if ( ! this.getIsBlockBasedTheme() ) {
+			return;
+		}
+
+		// For block-based themes, get the default editor line height.
+		if ( baseGlobalStyles?.typography?.lineHeight && tagName === 'p' ) {
+			newLineHeight = parseFloat(
+				baseGlobalStyles?.typography?.lineHeight
+			);
+		}
+
+		// For block-based themes, get the default element line height
+		// e.g h1, h2.
+		if ( tagNameLineHeight ) {
+			newLineHeight = parseFloat( tagNameLineHeight );
+		}
+
+		// For line height values provided from the styles,
+		// usually from values set from the line height picker.
+		if ( style?.lineHeight ) {
+			newLineHeight = parseFloat( style.lineHeight );
+		}
+
+		// Fall-back to a line height provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( lineHeight && ! tagNameLineHeight && ! style?.lineHeight ) {
+			newLineHeight = lineHeight;
+		}
+
+		// Check the final value is not over the minimum supported value.
+		if ( newLineHeight && newLineHeight < MIN_LINE_HEIGHT ) {
+			newLineHeight = MIN_LINE_HEIGHT;
+		}
+
+		// Until we parse CSS values correctly, avoid passing NaN values to Aztec
+		if ( isNaN( newLineHeight ) ) {
+			return undefined;
+		}
+
+		return newLineHeight;
+	}
+
+	getIsBlockBasedTheme() {
+		const { baseGlobalStyles } = this.props;
+
+		return (
+			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0
+		);
+	}
+
+	getBlockUseDefaultFont() {
+		// For block-based themes it enables using the defaultFont
+		// in Aztec for iOS so it allows customizing the font size
+		// for the Preformatted/Code and Heading blocks.
+		if ( ! this.isIOS ) {
+			return;
+		}
+
+		const { tagName } = this.props;
+		const isBlockBasedTheme = this.getIsBlockBasedTheme();
+		const tagsToMatch = /pre|h([1-6])$/gm;
+
+		return isBlockBasedTheme && tagsToMatch.test( tagName );
+	}
+
+	getLinkTextColor( defaultColor ) {
+		const { style } = this.props;
+		const customColor = style?.linkColor && colord( style.linkColor );
+
+		return customColor && customColor.isValid()
+			? customColor.toHex()
+			: defaultColor;
+	}
+
+	getPlaceholderTextColor() {
+		const {
+			baseGlobalStyles,
+			getStylesFromColorScheme,
+			placeholderTextColor,
+			style,
+		} = this.props;
+
+		// Default placeholder text color.
+		const placeholderStyle = getStylesFromColorScheme(
+			styles.richTextPlaceholder,
+			styles.richTextPlaceholderDark
+		);
+		const { color: defaultPlaceholderTextColor } = placeholderStyle;
+		// Custom 63% opacity for theme and inherited colors.
+		const placeholderOpacity = 'A1';
+
+		// Determine inherited placeholder color if available.
+		const inheritPlaceholderColor = style?.placeholderColor
+			? `${ style.placeholderColor }${ placeholderOpacity }`
+			: undefined;
+
+		// If using block-based themes, derive the placeholder color from global styles.
+		const globalStylesPlaceholderColor = baseGlobalStyles?.color?.text
+			? `${ baseGlobalStyles.color.text }${ placeholderOpacity }`
+			: undefined;
+
+		return (
+			inheritPlaceholderColor ??
+			placeholderTextColor ??
+			globalStylesPlaceholderColor ??
+			defaultPlaceholderTextColor
+		);
+	}
+
+	render() {
+		const {
+			tagName,
+			style,
+			__unstableIsSelected: isSelected,
+			children,
+			getStylesFromColorScheme,
+			minWidth,
+			maxWidth,
+			formatTypes,
+			parentBlockStyles,
+			accessibilityLabel,
+			disableEditingMenu = false,
+			baseGlobalStyles,
+			selectionStart,
+			selectionEnd,
+			disableSuggestions,
+			containerWidth,
+		} = this.props;
+		const { currentFontSize } = this.state;
+
+		const record = this.getRecord();
+		const html = this.getHtmlToRender( record, tagName );
+		const editableProps = this.getEditableProps();
+		const blockUseDefaultFont = this.getBlockUseDefaultFont();
+
+		const fontSize = currentFontSize;
+		const lineHeight = this.getLineHeight();
+
+		const {
+			color: defaultColor,
+			textDecorationColor: defaultTextDecorationColor,
+			fontFamily: defaultFontFamily,
+		} = getStylesFromColorScheme( styles.richText, styles.richTextDark );
+		const linkTextColor = this.getLinkTextColor(
+			defaultTextDecorationColor
+		);
+
+		const currentSelectionStart = selectionStart ?? 0;
+		const currentSelectionEnd = selectionEnd ?? 0;
+		let selection = null;
+		if ( this.needsSelectionUpdate ) {
+			this.needsSelectionUpdate = false;
+			selection = {
+				start: currentSelectionStart,
+				end: currentSelectionEnd,
+			};
+
+			// On AztecAndroid, setting the caret to an out-of-bounds position will crash the editor so, let's check for some cases.
+			if ( ! this.isIOS ) {
+				// The following regular expression is used in Aztec here:
+				// https://github.com/wordpress-mobile/AztecEditor-Android/blob/b1fad439d56fa6d4aa0b78526fef355c59d00dd3/aztec/src/main/kotlin/org/wordpress/aztec/AztecParser.kt#L656
+				const brBeforeParaMatches = html.match( /(<br>)+<\/p>$/g );
+				if ( brBeforeParaMatches ) {
+					console.warn(
+						'Oops, BR tag(s) at the end of content. Aztec will remove them, adapting the selection...'
+					);
+					const count = (
+						brBeforeParaMatches[ 0 ].match( /br/g ) || []
+					).length;
+					if ( count > 0 ) {
+						let newSelectionStart = currentSelectionStart - count;
+						if ( newSelectionStart < 0 ) {
+							newSelectionStart = 0;
+						}
+						let newSelectionEnd = currentSelectionEnd - count;
+						if ( newSelectionEnd < 0 ) {
+							newSelectionEnd = 0;
+						}
+						selection = {
+							start: newSelectionStart,
+							end: newSelectionEnd,
+						};
+					}
+				}
+			}
+		}
+
+		if ( this.comesFromAztec ) {
+			this.comesFromAztec = false;
+			this.firedAfterTextChanged = false;
+		}
+
+		// Logic below assures that `RichText` width will always have equal value when container is almost fully filled.
+		const width =
+			maxWidth && this.state.width && maxWidth - this.state.width < 10
+				? maxWidth
+				: this.state.width;
+		const containerStyles = [
+			style?.padding &&
+				style?.backgroundColor && {
+					padding: style.padding,
+					backgroundColor: style.backgroundColor,
+				},
+			containerWidth && {
+				width: containerWidth,
+			},
+		];
+
+		const defaultSelectionColor = getStylesFromColorScheme(
+			styles[ 'rich-text-selection' ],
+			styles[ 'rich-text-selection--dark' ]
+		).color;
+		const selectionColor = getSelectionColor(
+			this.props.selectionColor,
+			defaultSelectionColor,
+			baseGlobalStyles,
+			this.getIsBlockBasedTheme()
+		);
+
+		const EditableView = ( props ) => {
+			this.customEditableOnKeyDown = props?.onKeyDown;
+
+			return <></>;
+		};
+
+		return (
+			<View style={ containerStyles }>
+				{ children &&
+					children( {
+						isSelected,
+						value: record,
+						onChange: this.onFormatChange,
+						onFocus: () => {},
+						editableProps,
+						editableTagName: EditableView,
+					} ) }
+				<RCTAztecView
+					accessibilityLabel={ accessibilityLabel }
+					ref={ ( ref ) => {
+						this._editor = ref;
+
+						if ( this.props.nativeEditorRef ) {
+							this.props.nativeEditorRef( ref );
+						}
+					} }
+					style={ {
+						backgroundColor: styles.richText.backgroundColor,
+						...style,
+						...( this.isIOS && minWidth && maxWidth
+							? { width }
+							: { maxWidth } ),
+						minHeight: this.state.height,
+					} }
+					blockUseDefaultFont={ blockUseDefaultFont }
+					text={ {
+						text: html,
+						eventCount: this.lastEventCount,
+						selection,
+						linkTextColor,
+						tag: tagName,
+					} }
+					placeholder={ this.props.placeholder }
+					placeholderTextColor={ this.getPlaceholderTextColor() }
+					deleteEnter={ this.props.deleteEnter }
+					onChange={ this.onChangeFromAztec }
+					onFocus={ this.onFocus }
+					onBlur={ this.onBlur }
+					onKeyDown={ this.onKeyDown }
+					triggerKeyCodes={
+						disableEditingMenu
+							? []
+							: this.suggestionOptions().map(
+									( op ) => op.triggerChar
+							  )
+					}
+					onPaste={ this.onPaste }
+					activeFormats={ this.getActiveFormatNames( record ) }
+					onContentSizeChange={ this.onContentSizeChange }
+					onSelectionChange={ this.onSelectionChangeFromAztec }
+					blockType={ { tag: tagName } }
+					color={
+						( style && style.color ) ||
+						( parentBlockStyles && parentBlockStyles.color ) ||
+						( baseGlobalStyles && baseGlobalStyles?.color?.text ) ||
+						defaultColor
+					}
+					maxImagesWidth={ 200 }
+					fontFamily={ this.props.fontFamily || defaultFontFamily }
+					fontSize={ fontSize }
+					lineHeight={ lineHeight }
+					fontWeight={ this.props.fontWeight }
+					fontStyle={ this.props.fontStyle }
+					disableEditingMenu={ disableEditingMenu }
+					isMultiline={ false }
+					textAlign={ this.props.textAlign }
+					{ ...( this.isIOS ? { maxWidth } : {} ) }
+					minWidth={ minWidth }
+					id={ this.props.id }
+					selectionColor={ selectionColor }
+					disableAutocorrection={ this.props.disableAutocorrection }
+				/>
+				{ isSelected && (
+					<>
+						<FormatEdit
+							forwardedRef={ this._editor }
+							formatTypes={ formatTypes }
+							value={ record }
+							onChange={ this.onFormatChange }
+							onFocus={ () => {} }
+						/>
+						{ ! disableSuggestions && (
+							<BlockFormatControls>
+								<ToolbarButtonWithOptions
+									options={ this.suggestionOptions() }
+								/>
+							</BlockFormatControls>
+						) }
+					</>
+				) }
+			</View>
+		);
+	}
+}
+
+RichText.defaultProps = {
+	format: 'string',
+	value: '',
+	tagName: 'div',
+};
+
+const withFormatTypes = ( WrappedComponent ) => ( props ) => {
+	const {
+		clientId,
+		identifier,
+		withoutInteractiveFormatting,
+		allowedFormats,
+	} = props;
+	const { formatTypes } = useFormatTypes( {
+		clientId,
+		identifier,
+		withoutInteractiveFormatting,
+		allowedFormats,
+	} );
+
+	return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
+};
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const { getBlockParents, getBlock, getSettings } =
+			select( 'core/block-editor' );
+		const parents = getBlockParents( clientId, true );
+		const parentBlock = parents ? getBlock( parents[ 0 ] ) : undefined;
+		const parentBlockStyles = parentBlock?.attributes?.childrenStyles;
+
+		const settings = getSettings();
+		const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles;
+
+		const colorPalettes = settings?.__experimentalFeatures?.color?.palette;
+		const colorPalette = colorPalettes
+			? flatColorPalettes( colorPalettes )
+			: settings?.colors;
+
+		return {
+			areMentionsSupported: settings?.capabilities?.mentions === true,
+			areXPostsSupported: settings?.capabilities?.xposts === true,
+			parentBlockStyles,
+			baseGlobalStyles,
+			colorPalette,
+		};
+	} ),
+	withPreferredColorScheme,
+	withFormatTypes,
+] )( RichText );
diff --git a/packages/block-editor/src/components/rich-text/native/style.native.scss b/packages/block-editor/src/components/rich-text/native/style.native.scss
new file mode 100644
index 00000000000000..3ba3be6a7150b6
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/style.native.scss
@@ -0,0 +1,28 @@
+
+.richText {
+	font-family: $default-regular-font;
+	color: $gray-900;
+	text-decoration-color: $blue-500;
+	background-color: transparent;
+}
+
+.richTextDark {
+	color: $white;
+	text-decoration-color: $blue-30;
+}
+
+.richTextPlaceholder {
+	color: $gray-20;
+}
+
+.richTextPlaceholderDark {
+	color: $gray-50;
+}
+
+.rich-text-selection {
+	color: $black;
+}
+
+.rich-text-selection--dark {
+	color: $white;
+}
diff --git a/packages/block-editor/src/components/rich-text/native/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/rich-text/native/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..84e9b467132714
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RichText/> when applying the font size renders component with style and font size 1`] = `
+"<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`<RichText/> when applying the font size should update the font size when style prop with font size property is provided 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={12}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;
+
+exports[`<RichText/> when applying the font size should update the font size with decimals when style prop with font size property is provided 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={13}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;
diff --git a/packages/block-editor/src/components/rich-text/native/test/index.native.js b/packages/block-editor/src/components/rich-text/native/test/index.native.js
new file mode 100644
index 00000000000000..26b6d6c5358ec5
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/test/index.native.js
@@ -0,0 +1,345 @@
+/**
+ * External dependencies
+ */
+import { Dimensions } from 'react-native';
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	screen,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import {
+	store as richTextStore,
+	RichTextData,
+	__unstableCreateElement,
+} from '@wordpress/rich-text';
+import { coreBlocks } from '@wordpress/block-library';
+import {
+	getBlockTypes,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../../store';
+import RichText from '../index.native';
+
+/**
+ * Mock `useSelect` with various global application settings, e.g., styles.
+ *
+ * @param {Object} settings the global application settings you would like to mock.
+ */
+const mockGlobalSettings = (
+	settings = { fontSize: 'var(--wp--preset--font-size--normal)' }
+) => {
+	const { fontSize } = settings;
+	const DEFAULT_GLOBAL_STYLES = {
+		__experimentalGlobalStylesBaseStyles: { typography: { fontSize } },
+	};
+	jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
+		DEFAULT_GLOBAL_STYLES
+	);
+	jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
+		[]
+	);
+};
+
+describe( '<RichText/>', () => {
+	/**
+	 * Capture initial `window` dimensions before our integration tests modify them to stage runtime fixtures.
+	 * Reset to the initial `window` dimensions after each test is executed in case they were modified.
+	 */
+	const window = Dimensions.get( 'window' );
+
+	const decimalUnitsData = [
+		[ '1.125rem', 18 ],
+		[ '10.52px', 11 ],
+		[ '2.3136em', 37 ],
+		[ '1.42vh', 19 ],
+	];
+
+	beforeAll( () => {
+		// Register Paragraph block.
+		const paragraph = coreBlocks[ 'core/paragraph' ];
+		paragraph.init();
+		setDefaultBlockName( paragraph.name );
+	} );
+
+	beforeEach( () => {
+		mockGlobalSettings( {} );
+	} );
+
+	afterEach( () => {
+		Dimensions.set( { window } );
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks.
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'when the value changes', () => {
+		it( 'should avoid updating attributes when values are equal', async () => {
+			const handleChange = jest.fn();
+			const defaultEmptyValue = RichTextData.empty();
+			render(
+				<RichText
+					onChange={ handleChange }
+					value={ defaultEmptyValue }
+				/>
+			);
+
+			// Simulate an empty string from Aztec
+			fireEvent( screen.getByLabelText( 'Text input. Empty' ), 'change', {
+				nativeEvent: { text: '' },
+			} );
+
+			expect( handleChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should preserve non-breaking space HTML entity', () => {
+			const onChange = jest.fn();
+			const onSelectionChange = jest.fn();
+			// The initial value is created using an HTML element to preserve
+			// the HTML entity.
+			const initialValue = RichTextData.fromHTMLElement(
+				__unstableCreateElement( document, '&nbsp;' )
+			);
+			render(
+				<RichText
+					onChange={ onChange }
+					onSelectionChange={ onSelectionChange }
+					value={ initialValue }
+					__unstableIsSelected
+				/>
+			);
+
+			// Trigger selection event with same text value as initial.
+			fireEvent(
+				screen.getByLabelText( /Text input/ ),
+				'onSelectionChange',
+				0,
+				0,
+				initialValue.toString(),
+				{
+					nativeEvent: {
+						eventCount: 0,
+						target: undefined,
+						text: initialValue.toString(),
+					},
+				}
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+			expect( onSelectionChange ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'when applying the font size', () => {
+		it( 'should display rich text at the DEFAULT font size.', () => {
+			// Arrange.
+			const expectedFontSize = 16;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `fontSize` CSS.', () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel="editor"
+					fontSize="min(2em, 3em)"
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `style.fontSize` CSS.', () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel="editor"
+					style={ { fontSize: 'min(2em, 3em)' } }
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( `should display rich text with the default editor font size value and not use the
+		\`default font size value from the global styles for a tag different than (p)`, () => {
+			// Arrange.
+			const defaultFontSize = 16;
+			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" tagName="div" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( defaultFontSize );
+		} );
+
+		it( `should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS.`, () => {
+			// Arrange.
+			const expectedFontSize = 32;
+			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" tagName="p" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		test.each( decimalUnitsData )(
+			`should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS with decimal value: %s`,
+			( unit, expected ) => {
+				// Arrange.
+				mockGlobalSettings( { fontSize: unit } );
+				// Act.
+				const { getByLabelText } = render(
+					<RichText accessibilityLabel="editor" tagName="p" />
+				);
+				// Assert.
+				const actualFontSize =
+					getByLabelText( 'editor' ).props.fontSize;
+				expect( actualFontSize ).toBe( expected );
+			}
+		);
+
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
+		when CSS is provided ambiguously from ALL possible sources.`, () => {
+			// Arrange.
+			const expectedFontSize = 1;
+			mockGlobalSettings( { fontSize: '0' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel="editor"
+					style={ { fontSize: '1' } }
+					fontSize="2"
+					tagName="p"
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with
+		NEXT PRIORITY when CSS is provided ambiguously from MULTIPLE possible sources EXCLUDING \`fontSize\`.`, () => {
+			// Arrange.
+			const expectedFontSize = 1;
+			mockGlobalSettings( { fontSize: '0' } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText
+					accessibilityLabel="editor"
+					style={ { fontSize: '1' } }
+					tagName="p"
+				/>
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT WIDTH.', () => {
+			// Arrange.
+			const expectedFontSize = 3;
+			Dimensions.set( { window: { ...window, width: 300 } } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" fontSize="1vw" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT HEIGHT.', () => {
+			// Arrange.
+			const expectedFontSize = 3;
+			Dimensions.set( { window: { ...window, height: 300 } } );
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" fontSize="1vh" />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( expectedFontSize );
+		} );
+
+		it( 'should update the font size when style prop with font size property is provided', () => {
+			// Arrange.
+			const fontSize = '10';
+			const style = { fontSize: '12' };
+			// Act.
+			render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert.
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'renders component with style and font size', async () => {
+			// Arrange.
+			const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+					<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+					<!-- /wp:paragraph -->`;
+			// Act.
+			await initializeEditor( { initialHtml } );
+			// Assert.
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'should update the font size with decimals when style prop with font size property is provided', () => {
+			// Arrange.
+			const fontSize = '10';
+			const style = { fontSize: '12.56px' };
+			// Act.
+			render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert.
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'should set the default minimum line height value if the provided value from the styles is lower', () => {
+			// Arrange.
+			const expectedLineHeight = 1;
+			const style = { lineHeight: 0.2 };
+			// Act.
+			const { getByLabelText } = render(
+				<RichText accessibilityLabel="editor" style={ style } />
+			);
+			// Assert.
+			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;
+			expect( actualFontSize ).toBe( expectedLineHeight );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/rich-text/native/test/performance/rich-text.native.js b/packages/block-editor/src/components/rich-text/native/test/performance/rich-text.native.js
new file mode 100644
index 00000000000000..7be9981d04bcec
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/native/test/performance/rich-text.native.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	typeInRichText,
+	fireEvent,
+	measurePerformance,
+	screen,
+} from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import RichText from '../../index.native';
+
+describe( 'RichText Performance', () => {
+	const onCreateUndoLevel = jest.fn();
+	const onChange = jest.fn();
+	const onSelectionChange = jest.fn();
+
+	it( 'performance is stable when typing using Rich Text', async () => {
+		const scenario = async () => {
+			const richTextInput = screen.getByLabelText( 'Text input. Empty' );
+
+			fireEvent( richTextInput, 'focus' );
+
+			typeInRichText(
+				richTextInput,
+				'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> text'
+			);
+		};
+
+		await measurePerformance(
+			<RichText
+				onChange={ onChange }
+				__unstableOnCreateUndoLevel={ onCreateUndoLevel }
+				onSelectionChange={ onSelectionChange }
+			/>,
+			{
+				scenario,
+			}
+		);
+	} );
+} );
diff --git a/packages/rich-text/src/component/toolbar-button-with-options.native.js b/packages/block-editor/src/components/rich-text/native/toolbar-button-with-options.native.js
similarity index 100%
rename from packages/rich-text/src/component/toolbar-button-with-options.native.js
rename to packages/block-editor/src/components/rich-text/native/toolbar-button-with-options.native.js
diff --git a/packages/rich-text/src/component/use-format-types.js b/packages/block-editor/src/components/rich-text/native/use-format-types.js
similarity index 97%
rename from packages/rich-text/src/component/use-format-types.js
rename to packages/block-editor/src/components/rich-text/native/use-format-types.js
index 637be62b4361e0..ff65d7421ae5cc 100644
--- a/packages/rich-text/src/component/use-format-types.js
+++ b/packages/block-editor/src/components/rich-text/native/use-format-types.js
@@ -3,10 +3,7 @@
  */
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { store as richTextStore } from '../store';
+import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
 	return select( richTextStore ).getFormatTypes();
diff --git a/packages/block-editor/src/components/rich-text/split-value.js b/packages/block-editor/src/components/rich-text/split-value.js
deleted file mode 100644
index e64fb603a05a13..00000000000000
--- a/packages/block-editor/src/components/rich-text/split-value.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { isEmpty, split, toHTMLString } from '@wordpress/rich-text';
-
-/*
- * Signals to the RichText owner that the block can be replaced with two blocks
- * as a result of splitting the block by pressing enter, or with blocks as a
- * result of splitting the block by pasting block content in the instance.
- */
-export function splitValue( {
-	value,
-	pastedBlocks = [],
-	onReplace,
-	onSplit,
-	onSplitMiddle,
-	multilineTag,
-} ) {
-	if ( ! onReplace || ! onSplit ) {
-		return;
-	}
-
-	// Ensure the value has a selection. This might happen when trying to split
-	// an empty value before there was a `selectionchange` event.
-	const { start = 0, end = 0 } = value;
-	const valueWithEnsuredSelection = { ...value, start, end };
-	const blocks = [];
-	const [ before, after ] = split( valueWithEnsuredSelection );
-	const hasPastedBlocks = pastedBlocks.length > 0;
-	let lastPastedBlockIndex = -1;
-
-	// Consider the after value to be the original it is not empty and the
-	// before value *is* empty.
-	const isAfterOriginal = isEmpty( before ) && ! isEmpty( after );
-
-	// Create a block with the content before the caret if there's no pasted
-	// blocks, or if there are pasted blocks and the value is not empty. We do
-	// not want a leading empty block on paste, but we do if split with e.g. the
-	// enter key.
-	if ( ! hasPastedBlocks || ! isEmpty( before ) ) {
-		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: before,
-					multilineTag,
-				} ),
-				! isAfterOriginal
-			)
-		);
-		lastPastedBlockIndex += 1;
-	}
-
-	if ( hasPastedBlocks ) {
-		blocks.push( ...pastedBlocks );
-		lastPastedBlockIndex += pastedBlocks.length;
-	} else if ( onSplitMiddle ) {
-		blocks.push( onSplitMiddle() );
-	}
-
-	// If there's pasted blocks, append a block with non empty content / after
-	// the caret. Otherwise, do append an empty block if there is no
-	// `onSplitMiddle` prop, but if there is and the content is empty, the
-	// middle block is enough to set focus in.
-	if (
-		hasPastedBlocks
-			? ! isEmpty( after )
-			: ! onSplitMiddle || ! isEmpty( after )
-	) {
-		blocks.push(
-			onSplit(
-				toHTMLString( {
-					value: after,
-					multilineTag,
-				} ),
-				isAfterOriginal
-			)
-		);
-	}
-
-	// If there are pasted blocks, set the selection to the last one. Otherwise,
-	// set the selection to the second block.
-	const indexToSelect = hasPastedBlocks ? lastPastedBlockIndex : 1;
-
-	// If there are pasted blocks, move the caret to the end of the selected
-	// block Otherwise, retain the default value.
-	const initialPosition = hasPastedBlocks ? -1 : 0;
-
-	onReplace( blocks, indexToSelect, initialPosition );
-}
diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss
index 03bb7dd607a538..ba109648df1428 100644
--- a/packages/block-editor/src/components/rich-text/style.scss
+++ b/packages/block-editor/src/components/rich-text/style.scss
@@ -1,37 +1,3 @@
-.rich-text {
-	[data-rich-text-placeholder] {
-		pointer-events: none;
-	}
-
-	[data-rich-text-placeholder]::after {
-		content: attr(data-rich-text-placeholder);
-		// Use opacity to work in various editor styles.
-		// We don't specify the color here, because blocks or editor styles might provide their own.
-		opacity: 0.62;
-	}
-
-	&:focus {
-		// Removes outline added by the browser.
-		outline: none;
-
-		[data-rich-text-format-boundary] {
-			border-radius: 2px;
-		}
-	}
-}
-
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
-	}
-}
-
-// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
-// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
-figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
-	opacity: 0.8;
-}
-
 .components-popover.block-editor-rich-text__inline-format-toolbar {
 	// Set z-index as if it's displayed on the bottom, otherwise the block
 	// switcher popover might overlap if displayed on the bottom.
@@ -43,10 +9,15 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		margin-bottom: $grid-unit-10;
 		box-shadow: none;
 		outline: none;
+		border-radius: $radius-small;
 	}
 
 	.components-toolbar {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
+	}
+
+	.components-toolbar-group {
+		background: none;
 	}
 
 	.components-toolbar__control,
@@ -80,12 +51,3 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 		}
 	}
 }
-
-[data-rich-text-script] {
-	display: inline;
-
-	&::before {
-		content: "</>";
-		background: rgb(255, 255, 0);
-	}
-}
diff --git a/packages/block-editor/src/components/rich-text/use-before-input-rules.js b/packages/block-editor/src/components/rich-text/use-before-input-rules.js
deleted file mode 100644
index 762a8e8d990bf5..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-before-input-rules.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { insert, isCollapsed } from '@wordpress/rich-text';
-import { useDispatch } from '@wordpress/data';
-import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-/**
- * When typing over a selection, the selection will we wrapped by a matching
- * character pair. The second character is optional, it defaults to the first
- * character.
- *
- * @type {string[]} Array of character pairs.
- */
-const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
-
-export function useBeforeInputRules( props ) {
-	const {
-		__unstableMarkLastChangeAsPersistent,
-		__unstableMarkAutomaticChange,
-	} = useDispatch( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function onInput( event ) {
-			const { inputType, data } = event;
-			const { value, onChange } = propsRef.current;
-
-			// Only run the rules when inserting text.
-			if ( inputType !== 'insertText' ) {
-				return;
-			}
-
-			if ( isCollapsed( value ) ) {
-				return;
-			}
-
-			const pair = applyFilters(
-				'blockEditor.wrapSelectionSettings',
-				wrapSelectionSettings
-			).find(
-				( [ startChar, endChar ] ) =>
-					startChar === data || endChar === data
-			);
-
-			if ( ! pair ) {
-				return;
-			}
-
-			const [ startChar, endChar = startChar ] = pair;
-			const start = value.start;
-			const end = value.end + startChar.length;
-
-			let newValue = insert( value, startChar, start, start );
-			newValue = insert( newValue, endChar, end, end );
-
-			__unstableMarkLastChangeAsPersistent();
-			onChange( newValue );
-			__unstableMarkAutomaticChange();
-
-			const init = {};
-
-			for ( const key in event ) {
-				init[ key ] = event[ key ];
-			}
-
-			init.data = endChar;
-
-			const { ownerDocument } = element;
-			const { defaultView } = ownerDocument;
-			const newEvent = new defaultView.InputEvent( 'input', init );
-
-			// Dispatch an input event with the new data. This will trigger the
-			// input rules.
-			event.target.dispatchEvent( newEvent );
-			event.preventDefault();
-		}
-
-		element.addEventListener( 'beforeinput', onInput );
-		return () => {
-			element.removeEventListener( 'beforeinput', onInput );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-enter.js b/packages/block-editor/src/components/rich-text/use-enter.js
deleted file mode 100644
index 1c05a423da1400..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-enter.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { ENTER } from '@wordpress/keycodes';
-import {
-	insert,
-	__unstableIsEmptyLine as isEmptyLine,
-	__unstableInsertLineSeparator as insertLineSeparator,
-} from '@wordpress/rich-text';
-import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { splitValue } from './split-value';
-
-export function useEnter( props ) {
-	const { __unstableMarkAutomaticChange } = useDispatch( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			const {
-				removeEditorOnlyFormats,
-				value,
-				onReplace,
-				onSplit,
-				onSplitMiddle,
-				multilineTag,
-				onChange,
-				disableLineBreaks,
-				onSplitAtEnd,
-			} = propsRef.current;
-
-			if ( event.keyCode !== ENTER ) {
-				return;
-			}
-
-			event.preventDefault();
-
-			const _value = { ...value };
-			_value.formats = removeEditorOnlyFormats( value );
-			const canSplit = onReplace && onSplit;
-
-			if ( onReplace ) {
-				const transforms = getBlockTransforms( 'from' ).filter(
-					( { type } ) => type === 'enter'
-				);
-				const transformation = findTransform( transforms, ( item ) => {
-					return item.regExp.test( _value.text );
-				} );
-
-				if ( transformation ) {
-					onReplace( [
-						transformation.transform( {
-							content: _value.text,
-						} ),
-					] );
-					__unstableMarkAutomaticChange();
-				}
-			}
-
-			if ( multilineTag ) {
-				if ( event.shiftKey ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( canSplit && isEmptyLine( _value ) ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
-				} else {
-					onChange( insertLineSeparator( _value ) );
-				}
-			} else {
-				const { text, start, end } = _value;
-				const canSplitAtEnd =
-					onSplitAtEnd && start === end && end === text.length;
-
-				if ( event.shiftKey || ( ! canSplit && ! canSplitAtEnd ) ) {
-					if ( ! disableLineBreaks ) {
-						onChange( insert( _value, '\n' ) );
-					}
-				} else if ( ! canSplit && canSplitAtEnd ) {
-					onSplitAtEnd();
-				} else if ( canSplit ) {
-					splitValue( {
-						value: _value,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
-				}
-			}
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-firefox-compat.js b/packages/block-editor/src/components/rich-text/use-firefox-compat.js
deleted file mode 100644
index 59a57185081638..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-firefox-compat.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export function useFirefoxCompat() {
-	const { isMultiSelecting } = useSelect( blockEditorStore );
-	return useRefEffect( ( element ) => {
-		function onFocus() {
-			if ( ! isMultiSelecting() ) {
-				return;
-			}
-
-			// This is a little hack to work around focus issues with nested
-			// editable elements in Firefox. For some reason the editable child
-			// element sometimes regains focus, while it should not be focusable
-			// and focus should remain on the editable parent element.
-			// To do: try to find the cause of the shifting focus.
-			const parentEditable = element.parentElement.closest(
-				'[contenteditable="true"]'
-			);
-
-			if ( parentEditable ) {
-				parentEditable.focus();
-			}
-		}
-
-		element.addEventListener( 'focus', onFocus );
-		return () => {
-			element.removeEventListener( 'focus', onFocus );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-format-types.js b/packages/block-editor/src/components/rich-text/use-format-types.js
index f798e41ede4dfb..3c9b3b62ef78a5 100644
--- a/packages/block-editor/src/components/rich-text/use-format-types.js
+++ b/packages/block-editor/src/components/rich-text/use-format-types.js
@@ -29,7 +29,9 @@ const interactiveContentTags = new Set( [
 ] );
 
 function prefixSelectKeys( selected, prefix ) {
-	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	if ( typeof selected !== 'object' ) {
+		return { [ prefix ]: selected };
+	}
 	return Object.fromEntries(
 		Object.entries( selected ).map( ( [ key, value ] ) => [
 			`${ prefix }.${ key }`,
@@ -39,7 +41,9 @@ function prefixSelectKeys( selected, prefix ) {
 }
 
 function getPrefixedSelectKeys( selected, prefix ) {
-	if ( selected[ prefix ] ) return selected[ prefix ];
+	if ( selected[ prefix ] ) {
+		return selected[ prefix ];
+	}
 	return Object.keys( selected )
 		.filter( ( key ) => key.startsWith( prefix + '.' ) )
 		.reduce( ( accumulator, key ) => {
@@ -66,21 +70,21 @@ export function useFormatTypes( {
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter( ( { name, tagName } ) => {
+		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
 			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
 				return false;
 			}
 
 			if (
 				withoutInteractiveFormatting &&
-				interactiveContentTags.has( tagName )
+				( interactive || interactiveContentTags.has( tagName ) )
 			) {
 				return false;
 			}
 
 			return true;
 		} );
-	}, [ allFormatTypes, allowedFormats, interactiveContentTags ] );
+	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
diff --git a/packages/block-editor/src/components/rich-text/use-input-events.js b/packages/block-editor/src/components/rich-text/use-input-events.js
deleted file mode 100644
index 4305e126fda7e7..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-input-events.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-export function useInputEvents( inputEvents ) {
-	return useRefEffect( ( element ) => {
-		function onInput( event ) {
-			for ( const keyboardShortcut of inputEvents.current ) {
-				keyboardShortcut( event );
-			}
-		}
-
-		element.addEventListener( 'input', onInput );
-		return () => {
-			element.removeEventListener( 'input', onInput );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-input-rules.js b/packages/block-editor/src/components/rich-text/use-input-rules.js
deleted file mode 100644
index b2b1800ef037d4..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-input-rules.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { insert, toHTMLString } from '@wordpress/rich-text';
-import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { preventEventDiscovery } from './prevent-event-discovery';
-import {
-	retrieveSelectedAttribute,
-	START_OF_SELECTED_AREA,
-} from '../../utils/selection';
-
-function findSelection( blocks ) {
-	let i = blocks.length;
-
-	while ( i-- ) {
-		const attributeKey = retrieveSelectedAttribute(
-			blocks[ i ].attributes
-		);
-
-		if ( attributeKey ) {
-			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
-				attributeKey
-			].replace( START_OF_SELECTED_AREA, '' );
-			return blocks[ i ].clientId;
-		}
-
-		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
-
-		if ( nestedSelection ) {
-			return nestedSelection;
-		}
-	}
-}
-
-export function useInputRules( props ) {
-	const {
-		__unstableMarkLastChangeAsPersistent,
-		__unstableMarkAutomaticChange,
-	} = useDispatch( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function inputRule() {
-			const { value, onReplace, selectionChange } = propsRef.current;
-
-			if ( ! onReplace ) {
-				return;
-			}
-
-			const { start, text } = value;
-			const characterBefore = text.slice( start - 1, start );
-
-			// The character right before the caret must be a plain space.
-			if ( characterBefore !== ' ' ) {
-				return;
-			}
-
-			const trimmedTextBefore = text.slice( 0, start ).trim();
-			const prefixTransforms = getBlockTransforms( 'from' ).filter(
-				( { type } ) => type === 'prefix'
-			);
-			const transformation = findTransform(
-				prefixTransforms,
-				( { prefix } ) => {
-					return trimmedTextBefore === prefix;
-				}
-			);
-
-			if ( ! transformation ) {
-				return;
-			}
-
-			const content = toHTMLString( {
-				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
-			} );
-			const block = transformation.transform( content );
-
-			selectionChange( findSelection( [ block ] ) );
-			onReplace( [ block ] );
-			__unstableMarkAutomaticChange();
-		}
-
-		function onInput( event ) {
-			const { inputType, type } = event;
-			const {
-				value,
-				onChange,
-				__unstableAllowPrefixTransformations,
-				formatTypes,
-			} = propsRef.current;
-
-			// Only run input rules when inserting text.
-			if ( inputType !== 'insertText' && type !== 'compositionend' ) {
-				return;
-			}
-
-			if ( __unstableAllowPrefixTransformations && inputRule ) {
-				inputRule();
-			}
-
-			const transformed = formatTypes.reduce(
-				( accumlator, { __unstableInputRule } ) => {
-					if ( __unstableInputRule ) {
-						accumlator = __unstableInputRule( accumlator );
-					}
-
-					return accumlator;
-				},
-				preventEventDiscovery( value )
-			);
-
-			if ( transformed !== value ) {
-				__unstableMarkLastChangeAsPersistent();
-				onChange( {
-					...transformed,
-					activeFormats: value.activeFormats,
-				} );
-				__unstableMarkAutomaticChange();
-			}
-		}
-
-		element.addEventListener( 'input', onInput );
-		element.addEventListener( 'compositionend', onInput );
-		return () => {
-			element.removeEventListener( 'input', onInput );
-			element.removeEventListener( 'compositionend', onInput );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-mark-persistent.js b/packages/block-editor/src/components/rich-text/use-mark-persistent.js
index 9a564dfb7f97e8..0be460fedd92fa 100644
--- a/packages/block-editor/src/components/rich-text/use-mark-persistent.js
+++ b/packages/block-editor/src/components/rich-text/use-mark-persistent.js
@@ -10,27 +10,26 @@ import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 export function useMarkPersistent( { html, value } ) {
-	const previousText = useRef();
-	const hasActiveFormats =
-		value.activeFormats && !! value.activeFormats.length;
+	const previousTextRef = useRef();
+	const hasActiveFormats = !! value.activeFormats?.length;
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
 
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {
 		// Ignore mount.
-		if ( ! previousText.current ) {
-			previousText.current = value.text;
+		if ( ! previousTextRef.current ) {
+			previousTextRef.current = value.text;
 			return;
 		}
 
 		// Text input, so don't create an undo level for every character.
 		// Create an undo level after 1 second of no input.
-		if ( previousText.current !== value.text ) {
+		if ( previousTextRef.current !== value.text ) {
 			const timeout = window.setTimeout( () => {
 				__unstableMarkLastChangeAsPersistent();
 			}, 1000 );
-			previousText.current = value.text;
+			previousTextRef.current = value.text;
 			return () => {
 				window.clearTimeout( timeout );
 			};
diff --git a/packages/block-editor/src/components/rich-text/use-native-props.js b/packages/block-editor/src/components/rich-text/use-native-props.js
deleted file mode 100644
index 04343773a04c60..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-native-props.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function useNativeProps() {
-	return {};
-}
diff --git a/packages/block-editor/src/components/rich-text/use-native-props.native.js b/packages/block-editor/src/components/rich-text/use-native-props.native.js
deleted file mode 100644
index 41f4e2ea9ac2cb..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-native-props.native.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { OnCaretVerticalPositionChange } from '../block-list';
-
-export function useNativeProps() {
-	return {
-		onCaretVerticalPositionChange: useContext(
-			OnCaretVerticalPositionChange
-		),
-	};
-}
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
deleted file mode 100644
index 5e4f4260f5001f..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-paste-handler.js
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { getFilesFromDataTransfer } from '@wordpress/dom';
-import { pasteHandler } from '@wordpress/blocks';
-import {
-	isEmpty,
-	insert,
-	create,
-	replace,
-	__UNSTABLE_LINE_SEPARATOR as LINE_SEPARATOR,
-} from '@wordpress/rich-text';
-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';
-
-/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
-
-/**
- * Replaces line separators with line breaks if not multiline.
- * Replaces line breaks with line separators if multiline.
- *
- * @param {RichTextValue} value       Value to adjust.
- * @param {boolean}       isMultiline Whether to adjust to multiline or not.
- *
- * @return {RichTextValue} Adjusted value.
- */
-function adjustLines( value, isMultiline ) {
-	if ( isMultiline ) {
-		return replace( value, /\n+/g, LINE_SEPARATOR );
-	}
-
-	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
-}
-
-export function usePasteHandler( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function _onPaste( event ) {
-			const {
-				isSelected,
-				disableFormats,
-				onChange,
-				value,
-				formatTypes,
-				tagName,
-				onReplace,
-				onSplit,
-				onSplitMiddle,
-				__unstableEmbedURLOnPaste,
-				multilineTag,
-				preserveWhiteSpace,
-				pastePlainText,
-			} = propsRef.current;
-
-			if ( ! isSelected ) {
-				return;
-			}
-
-			const { clipboardData } = event;
-
-			let plainText = '';
-			let html = '';
-
-			// IE11 only supports `Text` as an argument for `getData` and will
-			// otherwise throw an invalid argument error, so we try the standard
-			// arguments first, then fallback to `Text` if they fail.
-			try {
-				plainText = clipboardData.getData( 'text/plain' );
-				html = clipboardData.getData( 'text/html' );
-			} catch ( error1 ) {
-				try {
-					html = clipboardData.getData( 'Text' );
-				} catch ( error2 ) {
-					// Some browsers like UC Browser paste plain text by default and
-					// don't support clipboardData at all, so allow default
-					// behaviour.
-					return;
-				}
-			}
-
-			// Remove Windows-specific metadata appended within copied HTML text.
-			html = removeWindowsFragments( html );
-
-			// Strip meta tag.
-			html = removeCharsetMetaTag( html );
-
-			event.preventDefault();
-
-			// Allows us to ask for this information when we get a report.
-			window.console.log( 'Received HTML:\n\n', html );
-			window.console.log( 'Received plain text:\n\n', plainText );
-
-			if ( disableFormats ) {
-				onChange( insert( value, plainText ) );
-				return;
-			}
-
-			const transformed = formatTypes.reduce(
-				( accumlator, { __unstablePasteRule } ) => {
-					// Only allow one transform.
-					if ( __unstablePasteRule && accumlator === value ) {
-						accumlator = __unstablePasteRule( value, {
-							html,
-							plainText,
-						} );
-					}
-
-					return accumlator;
-				},
-				value
-			);
-
-			if ( transformed !== value ) {
-				onChange( transformed );
-				return;
-			}
-
-			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
-			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
-
-			// If the data comes from a rich text instance, we can directly use it
-			// without filtering the data. The filters are only meant for externally
-			// pasted content and remove inline styles.
-			if ( isInternal ) {
-				const pastedMultilineTag =
-					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
-					undefined;
-				let pastedValue = create( {
-					html,
-					multilineTag: pastedMultilineTag,
-					multilineWrapperTags:
-						pastedMultilineTag === 'li'
-							? [ 'ul', 'ol' ]
-							: undefined,
-					preserveWhiteSpace,
-				} );
-				pastedValue = adjustLines( pastedValue, !! multilineTag );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
-				return;
-			}
-
-			if ( pastePlainText ) {
-				onChange( insert( value, create( { text: plainText } ) ) );
-				return;
-			}
-
-			// 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.
-			//
-			// @see shouldDismissPastedFiles
-			if (
-				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 );
-
-				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content );
-				} else {
-					splitValue( {
-						value,
-						pastedBlocks: content,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
-				}
-
-				return;
-			}
-
-			let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
-
-			// Force the blocks mode when the user is pasting
-			// on a new line & the content resembles a shortcode.
-			// Otherwise it's going to be detected as inline
-			// and the shortcode won't be replaced.
-			if (
-				mode === 'AUTO' &&
-				isEmpty( value ) &&
-				isShortcode( plainText )
-			) {
-				mode = 'BLOCKS';
-			}
-
-			if (
-				__unstableEmbedURLOnPaste &&
-				isEmpty( value ) &&
-				isURL( plainText.trim() )
-			) {
-				mode = 'BLOCKS';
-			}
-
-			const content = pasteHandler( {
-				HTML: html,
-				plainText,
-				mode,
-				tagName,
-				preserveWhiteSpace,
-			} );
-
-			if ( typeof content === 'string' ) {
-				let valueToInsert = create( { html: content } );
-
-				// If the content should be multiline, we should process text
-				// separated by a line break as separate lines.
-				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
-
-				addActiveFormats( valueToInsert, value.activeFormats );
-				onChange( insert( value, valueToInsert ) );
-			} else if ( content.length > 0 ) {
-				if ( onReplace && isEmpty( value ) ) {
-					onReplace( content, content.length - 1, -1 );
-				} else {
-					splitValue( {
-						value,
-						pastedBlocks: content,
-						onReplace,
-						onSplit,
-						onSplitMiddle,
-						multilineTag,
-					} );
-				}
-			}
-		}
-
-		element.addEventListener( 'paste', _onPaste );
-		return () => {
-			element.removeEventListener( 'paste', _onPaste );
-		};
-	}, [] );
-}
-
-/**
- * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
- * comments and any preceding and trailing content.
- *
- * @param {string} html the html to be normalized
- * @return {string} the normalized html
- */
-function removeWindowsFragments( html ) {
-	const startStr = '<!--StartFragment-->';
-	const startIdx = html.indexOf( startStr );
-	if ( startIdx > -1 ) {
-		html = html.substring( startIdx + startStr.length );
-	} else {
-		// No point looking for EndFragment
-		return html;
-	}
-
-	const endStr = '<!--EndFragment-->';
-	const endIdx = html.indexOf( endStr );
-	if ( endIdx > -1 ) {
-		html = html.substring( 0, endIdx );
-	}
-
-	return html;
-}
-
-/**
- * Removes the charset meta tag inserted by Chromium.
- * See:
- * - https://github.com/WordPress/gutenberg/issues/33585
- * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
- *
- * @param {string} html the html to be stripped of the meta tag.
- * @return {string} the cleaned html
- */
-function removeCharsetMetaTag( html ) {
-	const metaTag = `<meta charset='utf-8'>`;
-
-	if ( html.startsWith( metaTag ) ) {
-		return html.slice( metaTag.length );
-	}
-
-	return html;
-}
diff --git a/packages/block-editor/src/components/rich-text/use-remove-browser-shortcuts.js b/packages/block-editor/src/components/rich-text/use-remove-browser-shortcuts.js
deleted file mode 100644
index 22a6c47401aecf..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-remove-browser-shortcuts.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { isKeyboardEvent } from '@wordpress/keycodes';
-
-/**
- * Hook to prevent default behaviors for key combinations otherwise handled
- * internally by RichText.
- *
- * @return {import('react').RefObject} The component to be rendered.
- */
-export function useRemoveBrowserShortcuts() {
-	return useRefEffect( ( node ) => {
-		function onKeydown( event ) {
-			if (
-				isKeyboardEvent.primary( event, 'z' ) ||
-				isKeyboardEvent.primary( event, 'y' ) ||
-				isKeyboardEvent.primaryShift( event, 'z' )
-			) {
-				event.preventDefault();
-			}
-		}
-		node.addEventListener( 'keydown', onKeydown );
-		return () => {
-			node.addEventListener( 'keydown', onKeydown );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-shortcuts.js b/packages/block-editor/src/components/rich-text/use-shortcuts.js
deleted file mode 100644
index 61b2e3f6ce31bc..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-shortcuts.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-export function useShortcuts( keyboardShortcuts ) {
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			for ( const keyboardShortcut of keyboardShortcuts.current ) {
-				keyboardShortcut( event );
-			}
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js b/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js
deleted file mode 100644
index 890746cec74a35..00000000000000
--- a/packages/block-editor/src/components/rich-text/use-undo-automatic-change.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-import { BACKSPACE, DELETE, ESCAPE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export function useUndoAutomaticChange() {
-	const { didAutomaticChange, getSettings } = useSelect( blockEditorStore );
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			const { keyCode } = event;
-
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if (
-				keyCode !== DELETE &&
-				keyCode !== BACKSPACE &&
-				keyCode !== ESCAPE
-			) {
-				return;
-			}
-
-			if ( ! didAutomaticChange() ) {
-				return;
-			}
-
-			event.preventDefault();
-			getSettings().__experimentalUndo();
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/rich-text/utils.js b/packages/block-editor/src/components/rich-text/utils.js
index 6c8275d930eebf..975e152ff81778 100644
--- a/packages/block-editor/src/components/rich-text/utils.js
+++ b/packages/block-editor/src/components/rich-text/utils.js
@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { regexp } from '@wordpress/shortcode';
-import deprecated from '@wordpress/deprecated';
 import { renderToString } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 
@@ -24,7 +22,7 @@ export function addActiveFormats( value, activeFormats ) {
  *
  * @param {?(string|boolean)} multiline The multiline prop.
  *
- * @return {?string} The multiline tag.
+ * @return {string | undefined} The multiline tag.
  */
 export function getMultilineTag( multiline ) {
 	if ( multiline !== true && multiline !== 'p' && multiline !== 'li' ) {
@@ -34,36 +32,16 @@ export function getMultilineTag( multiline ) {
 	return multiline === true ? 'p' : multiline;
 }
 
-export function getAllowedFormats( {
-	allowedFormats,
-	formattingControls,
-	disableFormats,
-} ) {
+export function getAllowedFormats( { allowedFormats, disableFormats } ) {
 	if ( disableFormats ) {
 		return getAllowedFormats.EMPTY_ARRAY;
 	}
 
-	if ( ! allowedFormats && ! formattingControls ) {
-		return;
-	}
-
-	if ( allowedFormats ) {
-		return allowedFormats;
-	}
-
-	deprecated( 'wp.blockEditor.RichText formattingControls prop', {
-		since: '5.4',
-		alternative: 'allowedFormats',
-		version: '6.2',
-	} );
-
-	return formattingControls.map( ( name ) => `core/${ name }` );
+	return allowedFormats;
 }
 
 getAllowedFormats.EMPTY_ARRAY = [];
 
-export const isShortcode = ( text ) => regexp( '.*' ).test( text );
-
 /**
  * Creates a link from pasted URL.
  * Creates a paragraph block containing a link to the URL, and calls `onReplace`.
diff --git a/packages/block-editor/src/components/rich-text/with-deprecations.js b/packages/block-editor/src/components/rich-text/with-deprecations.js
new file mode 100644
index 00000000000000..92a101f84be629
--- /dev/null
+++ b/packages/block-editor/src/components/rich-text/with-deprecations.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { children as childrenSource } from '@wordpress/blocks';
+import { __unstableCreateElement } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import RichTextMultiline from './multiline';
+
+export function withDeprecations( Component ) {
+	return forwardRef( ( props, ref ) => {
+		let value = props.value;
+		let onChange = props.onChange;
+
+		// Handle deprecated format.
+		if ( Array.isArray( value ) ) {
+			deprecated( 'wp.blockEditor.RichText value prop as children type', {
+				since: '6.1',
+				version: '6.3',
+				alternative: 'value prop as string',
+				link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+			} );
+
+			value = childrenSource.toHTML( props.value );
+			onChange = ( newValue ) =>
+				props.onChange(
+					childrenSource.fromDOM(
+						__unstableCreateElement( document, newValue ).childNodes
+					)
+				);
+		}
+
+		const NewComponent = props.multiline ? RichTextMultiline : Component;
+
+		return (
+			<NewComponent
+				{ ...props }
+				value={ value }
+				onChange={ onChange }
+				ref={ ref }
+			/>
+		);
+	} );
+}
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index 584e51176ec306..2b52433480f3e6 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -1,24 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from '../block-list/use-block-props/use-block-refs';
 
-const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
-	const ref = useBlockRef( selectedBlockClientId );
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
+export default function SkipToSelectedBlock() {
+	const selectedBlockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockSelectionStart(),
+		[]
+	);
+	const ref = useRef();
+	useBlockElementRef( selectedBlockClientId, ref );
 	const onClick = () => {
-		ref.current.focus();
+		ref.current?.focus();
 	};
 
 	return selectedBlockClientId ? (
 		<Button
+			__next40pxDefaultSize
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }
@@ -26,14 +36,4 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 			{ __( 'Skip to the selected block' ) }
 		</Button>
 	) : null;
-};
-
-/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
- */
-export default withSelect( ( select ) => {
-	return {
-		selectedBlockClientId:
-			select( blockEditorStore ).getBlockSelectionStart(),
-	};
-} )( SkipToSelectedBlock );
+}
diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss
index 075e9d3c522653..8a1933423e2f9e 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/style.scss
+++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss
@@ -3,18 +3,9 @@
 	top: -9999em;
 
 	&:focus {
-		height: auto;
-		width: auto;
-		display: block;
 		font-size: 14px;
 		font-weight: 600;
-		padding: 15px 23px 14px;
 		background: #f1f1f1;
-		color: var(--wp-admin-theme-color);
-		line-height: normal;
-		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		text-decoration: none;
-		outline: none;
 		z-index: z-index(".skip-to-selected-block");
 	}
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
deleted file mode 100644
index f7f9686daee33a..00000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import SpacingInputControl from './spacing-input-control';
-import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
-
-export default function AllInputControl( {
-	onChange,
-	values,
-	sides,
-	spacingSizes,
-	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	const allValue = getAllRawValue( values );
-	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, sides );
-
-	const handleOnChange = ( next ) => {
-		const nextValues = applyValueToSides( values, next, sides );
-		onChange( nextValues );
-	};
-
-	return (
-		<SpacingInputControl
-			value={ allValue }
-			onChange={ handleOnChange }
-			side={ 'all' }
-			spacingSizes={ spacingSizes }
-			isMixed={ isMixed }
-			type={ type }
-			minimumCustomValue={ minimumCustomValue }
-			onMouseOver={ onMouseOver }
-			onMouseOut={ onMouseOut }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
deleted file mode 100644
index 3551e20ede7596..00000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Internal dependencies
- */
-import SpacingInputControl from './spacing-input-control';
-import { LABELS } from './utils';
-
-const groupedSides = [ 'vertical', 'horizontal' ];
-
-export default function AxialInputControls( {
-	onChange,
-	values,
-	sides,
-	spacingSizes,
-	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	const createHandleOnChange = ( side ) => ( next ) => {
-		if ( ! onChange ) {
-			return;
-		}
-		const nextValues = { ...values };
-
-		if ( side === 'vertical' ) {
-			nextValues.top = next;
-			nextValues.bottom = next;
-		}
-
-		if ( side === 'horizontal' ) {
-			nextValues.left = next;
-			nextValues.right = next;
-		}
-
-		onChange( nextValues );
-	};
-
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? groupedSides.filter( ( side ) => sides.includes( side ) )
-		: groupedSides;
-
-	return (
-		<>
-			{ filteredSides.map( ( side ) => {
-				const axisValue =
-					side === 'vertical' ? values.top : values.left;
-				return (
-					<SpacingInputControl
-						value={ axisValue }
-						onChange={ createHandleOnChange( side ) }
-						label={ LABELS[ side ] }
-						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
-						side={ side }
-						spacingSizes={ spacingSizes }
-						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				);
-			} ) }
-		</>
-	);
-}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
new file mode 100644
index 00000000000000..d822dd200b626d
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/hooks/use-spacing-sizes.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../../use-settings';
+import { RANGE_CONTROL_MAX_SIZE } from '../utils';
+
+const EMPTY_ARRAY = [];
+
+const compare = new Intl.Collator( 'und', { numeric: true } ).compare;
+
+export default function useSpacingSizes() {
+	const [
+		customSpacingSizes,
+		themeSpacingSizes,
+		defaultSpacingSizes,
+		defaultSpacingSizesEnabled,
+	] = useSettings(
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.theme',
+		'spacing.spacingSizes.default',
+		'spacing.defaultSpacingSizes'
+	);
+
+	const customSizes = customSpacingSizes ?? EMPTY_ARRAY;
+
+	const themeSizes = themeSpacingSizes ?? EMPTY_ARRAY;
+
+	const defaultSizes =
+		defaultSpacingSizes && defaultSpacingSizesEnabled !== false
+			? defaultSpacingSizes
+			: EMPTY_ARRAY;
+
+	return useMemo( () => {
+		const sizes = [
+			{ name: __( 'None' ), slug: '0', size: 0 },
+			...customSizes,
+			...themeSizes,
+			...defaultSizes,
+		];
+
+		// Using numeric slugs opts-in to sorting by slug.
+		if ( sizes.every( ( { slug } ) => /^[0-9]/.test( slug ) ) ) {
+			sizes.sort( ( a, b ) => compare( a.slug, b.slug ) );
+		}
+
+		return sizes.length > RANGE_CONTROL_MAX_SIZE
+			? [
+					{
+						name: __( 'Default' ),
+						slug: 'default',
+						size: undefined,
+					},
+					...sizes,
+			  ]
+			: sizes;
+	}, [ customSizes, themeSizes, defaultSizes ] );
+}
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..458b0abee60f2e 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -1,60 +1,54 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
+import {
+	BaseControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { BaseControl } from '@wordpress/components';
+import { _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
+import AxialInputControls from './input-controls/axial';
+import SeparatedInputControls from './input-controls/separated';
+import SingleInputControl from './input-controls/single';
 import LinkedButton from './linked-button';
-import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
-import useSetting from '../use-setting';
+import useSpacingSizes from './hooks/use-spacing-sizes';
+import {
+	ALL_SIDES,
+	DEFAULT_VALUES,
+	LABELS,
+	VIEWS,
+	getInitialView,
+} from './utils';
 
 export default function SpacingSizesControl( {
 	inputProps,
-	onChange,
-	label = __( 'Spacing Control' ),
-	values,
-	sides,
-	splitOnAxis = false,
-	useSelect,
+	label: labelProp,
 	minimumCustomValue = 0,
-	onMouseOver,
+	onChange,
 	onMouseOut,
+	onMouseOver,
+	showSideInLabel = true,
+	sides = ALL_SIDES,
+	useSelect,
+	values,
 } ) {
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
+	const spacingSizes = useSpacingSizes();
 	const inputValues = values || DEFAULT_VALUES;
-	const hasInitialValue = isValuesDefined( values );
 	const hasOneSide = sides?.length === 1;
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
-	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
-	);
+	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
 	const toggleLinked = () => {
-		setIsLinked( ! isLinked );
+		setView( view === VIEWS.axial ? VIEWS.custom : VIEWS.axial );
 	};
 
 	const handleOnChange = ( nextValue ) => {
@@ -64,44 +58,61 @@ export default function SpacingSizesControl( {
 
 	const inputControlProps = {
 		...inputProps,
+		minimumCustomValue,
 		onChange: handleOnChange,
-		isLinked,
+		onMouseOut,
+		onMouseOver,
 		sides,
-		values: inputValues,
 		spacingSizes,
+		type: labelProp,
 		useSelect,
-		type: label,
-		minimumCustomValue,
-		onMouseOver,
-		onMouseOut,
+		values: inputValues,
 	};
 
-	return (
-		<fieldset
-			role="region"
-			className={ classnames( 'component-spacing-sizes-control', {
-				'is-unlinked': ! isLinked,
-			} ) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			{ ! hasOneSide && (
-				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
-			) }
-			{ isLinked && (
-				<AllInputControl
-					aria-label={ label }
-					{ ...inputControlProps }
-				/>
-			) }
+	const renderControls = () => {
+		if ( view === VIEWS.axial ) {
+			return <AxialInputControls { ...inputControlProps } />;
+		}
+		if ( view === VIEWS.custom ) {
+			return <SeparatedInputControls { ...inputControlProps } />;
+		}
+		return (
+			<SingleInputControl
+				side={ view }
+				{ ...inputControlProps }
+				showSideInLabel={ showSideInLabel }
+			/>
+		);
+	};
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+	const sideLabel =
+		ALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';
+
+	const label = sprintf(
+		// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
+		_x( '%1$s %2$s', 'spacing' ),
+		labelProp,
+		sideLabel
+	).trim();
+
+	return (
+		<fieldset className="spacing-sizes-control">
+			<HStack className="spacing-sizes-control__header">
+				<BaseControl.VisualLabel
+					as="legend"
+					className="spacing-sizes-control__label"
+				>
+					{ label }
+				</BaseControl.VisualLabel>
+				{ ! hasOneSide && ! hasOnlyAxialSides && (
+					<LinkedButton
+						label={ labelProp }
+						onClick={ toggleLinked }
+						isLinked={ view === VIEWS.axial }
+					/>
+				) }
+			</HStack>
+			<VStack spacing={ 0.5 }>{ renderControls() }</VStack>
 		</fieldset>
 	);
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
deleted file mode 100644
index 412dbad2030c99..00000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Internal dependencies
- */
-import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS } from './utils';
-
-export default function BoxInputControls( {
-	values,
-	sides,
-	onChange,
-	spacingSizes,
-	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
-		: ALL_SIDES;
-
-	const createHandleOnChange = ( side ) => ( next ) => {
-		const nextValues = { ...values };
-		nextValues[ side ] = next;
-
-		onChange( nextValues );
-	};
-
-	return (
-		<>
-			{ filteredSides.map( ( side ) => {
-				return (
-					<SpacingInputControl
-						value={ values[ side ] }
-						label={ LABELS[ side ] }
-						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
-						side={ side }
-						onChange={ createHandleOnChange( side ) }
-						spacingSizes={ spacingSizes }
-						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				);
-			} ) }
-		</>
-	);
-}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
new file mode 100644
index 00000000000000..6811349b74ad74
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
@@ -0,0 +1,82 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import {
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+	hasAxisSupport,
+} from '../utils';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function AxialInputControls( {
+	minimumCustomValue,
+	onChange,
+	onMouseOut,
+	onMouseOver,
+	sides,
+	spacingSizes,
+	type,
+	values,
+} ) {
+	const createHandleOnChange = ( side ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
+		if ( side === 'vertical' ) {
+			nextValues.top = next;
+			nextValues.bottom = next;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = next;
+			nextValues.right = next;
+		}
+
+		onChange( nextValues );
+	};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const axisValue =
+					side === 'vertical' ? values.top : values.left;
+				return (
+					<SpacingInputControl
+						key={ `spacing-sizes-control-${ side }` }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
+						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						value={ axisValue }
+						withInputField={ false }
+					/>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
new file mode 100644
index 00000000000000..e9e2f828808549
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import {
+	ALL_SIDES,
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+} from '../utils';
+
+export default function SeparatedInputControls( {
+	minimumCustomValue,
+	onChange,
+	onMouseOut,
+	onMouseOver,
+	sides,
+	spacingSizes,
+	type,
+	values,
+} ) {
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
+		: ALL_SIDES;
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
+		nextValues[ side ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				return (
+					<SpacingInputControl
+						key={ `spacing-sizes-control-${ side }` }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
+						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+						value={ values[ side ] }
+						withInputField={ false }
+					/>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js
new file mode 100644
index 00000000000000..df6beb0f8f7b73
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js
@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS, getPresetValueFromCustomValue } from '../utils';
+
+export default function SingleInputControl( {
+	minimumCustomValue,
+	onChange,
+	onMouseOut,
+	onMouseOver,
+	showSideInLabel,
+	side,
+	spacingSizes,
+	type,
+	values,
+} ) {
+	const createHandleOnChange = ( currentSide ) => ( next ) => {
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
+		nextValues[ currentSide ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			label={ LABELS[ side ] }
+			minimumCustomValue={ minimumCustomValue }
+			onChange={ createHandleOnChange( side ) }
+			onMouseOut={ onMouseOut }
+			onMouseOver={ onMouseOver }
+			showSideInLabel={ showSideInLabel }
+			side={ side }
+			spacingSizes={ spacingSizes }
+			type={ type }
+			value={ values[ side ] }
+			withInputField={ false }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
new file mode 100644
index 00000000000000..f03af41bfbc00d
--- /dev/null
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
@@ -0,0 +1,350 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	RangeControl,
+	__experimentalHStack as HStack,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	CustomSelectControl,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../../use-settings';
+import { store as blockEditorStore } from '../../../store';
+import {
+	RANGE_CONTROL_MAX_SIZE,
+	ALL_SIDES,
+	LABELS,
+	getSliderValueFromPreset,
+	getCustomValueFromPreset,
+	getPresetValueFromCustomValue,
+	isValueSpacingPreset,
+} from '../utils';
+
+const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 300, steps: 1 },
+	'%': { max: 100, steps: 1 },
+	vw: { max: 100, steps: 1 },
+	vh: { max: 100, steps: 1 },
+	em: { max: 10, steps: 0.1 },
+	rm: { max: 10, steps: 0.1 },
+	svw: { max: 100, steps: 1 },
+	lvw: { max: 100, steps: 1 },
+	dvw: { max: 100, steps: 1 },
+	svh: { max: 100, steps: 1 },
+	lvh: { max: 100, steps: 1 },
+	dvh: { max: 100, steps: 1 },
+	vi: { max: 100, steps: 1 },
+	svi: { max: 100, steps: 1 },
+	lvi: { max: 100, steps: 1 },
+	dvi: { max: 100, steps: 1 },
+	vb: { max: 100, steps: 1 },
+	svb: { max: 100, steps: 1 },
+	lvb: { max: 100, steps: 1 },
+	dvb: { max: 100, steps: 1 },
+	vmin: { max: 100, steps: 1 },
+	svmin: { max: 100, steps: 1 },
+	lvmin: { max: 100, steps: 1 },
+	dvmin: { max: 100, steps: 1 },
+	vmax: { max: 100, steps: 1 },
+	svmax: { max: 100, steps: 1 },
+	lvmax: { max: 100, steps: 1 },
+	dvmax: { max: 100, steps: 1 },
+};
+
+export default function SpacingInputControl( {
+	icon,
+	isMixed = false,
+	minimumCustomValue,
+	onChange,
+	onMouseOut,
+	onMouseOver,
+	showSideInLabel = true,
+	side,
+	spacingSizes,
+	type,
+	value,
+} ) {
+	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
+	value = getPresetValueFromCustomValue( value, spacingSizes );
+
+	let selectListSizes = spacingSizes;
+	const showRangeControl = spacingSizes.length <= RANGE_CONTROL_MAX_SIZE;
+
+	const disableCustomSpacingSizes = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+		return editorSettings?.disableCustomSpacingSizes;
+	} );
+
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! disableCustomSpacingSizes &&
+			value !== undefined &&
+			! isValueSpacingPreset( value )
+	);
+
+	const [ minValue, setMinValue ] = useState( minimumCustomValue );
+
+	const previousValue = usePrevious( value );
+	if (
+		!! value &&
+		previousValue !== value &&
+		! isValueSpacingPreset( value ) &&
+		showCustomValueControl !== true
+	) {
+		setShowCustomValueControl( true );
+	}
+
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
+	} );
+
+	let currentValue = null;
+
+	const showCustomValueInSelectList =
+		! showRangeControl &&
+		! showCustomValueControl &&
+		value !== undefined &&
+		( ! isValueSpacingPreset( value ) ||
+			( isValueSpacingPreset( value ) && isMixed ) );
+
+	if ( showCustomValueInSelectList ) {
+		selectListSizes = [
+			...spacingSizes,
+			{
+				name: ! isMixed
+					? // translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
+					  sprintf( __( 'Custom (%s)' ), value )
+					: __( 'Mixed' ),
+				slug: 'custom',
+				size: value,
+			},
+		];
+		currentValue = selectListSizes.length - 1;
+	} else if ( ! isMixed ) {
+		currentValue = ! showCustomValueControl
+			? getSliderValueFromPreset( value, spacingSizes )
+			: getCustomValueFromPreset( value, spacingSizes );
+	}
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( currentValue ),
+			[ currentValue ]
+		)[ 1 ] || units[ 0 ]?.value;
+
+	const setInitialValue = () => {
+		if ( value === undefined ) {
+			onChange( '0' );
+		}
+	};
+
+	const customTooltipContent = ( newValue ) =>
+		value === undefined ? undefined : spacingSizes[ newValue ]?.name;
+
+	const customRangeValue = parseFloat( currentValue, 10 );
+
+	const getNewCustomValue = ( newSize ) => {
+		const isNumeric = ! isNaN( parseFloat( newSize ) );
+		const nextValue = isNumeric ? newSize : undefined;
+		return nextValue;
+	};
+
+	const getNewPresetValue = ( newSize, controlType ) => {
+		const size = parseInt( newSize, 10 );
+
+		if ( controlType === 'selectList' ) {
+			if ( size === 0 ) {
+				return undefined;
+			}
+			if ( size === 1 ) {
+				return '0';
+			}
+		} else if ( size === 0 ) {
+			return '0';
+		}
+		return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
+	};
+
+	const handleCustomValueSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
+
+	const options = selectListSizes.map( ( size, index ) => ( {
+		key: index,
+		name: size.name,
+	} ) );
+
+	const marks = spacingSizes
+		.slice( 1, spacingSizes.length - 1 )
+		.map( ( _newValue, index ) => ( {
+			value: index + 1,
+			label: undefined,
+		} ) );
+
+	const sideLabel =
+		ALL_SIDES.includes( side ) && showSideInLabel ? LABELS[ side ] : '';
+	const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
+
+	const ariaLabel = sprintf(
+		// translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
+		_x( '%1$s %2$s', 'spacing' ),
+		sideLabel,
+		typeLabel
+	).trim();
+
+	return (
+		<HStack className="spacing-sizes-control__wrapper">
+			{ icon && (
+				<Icon
+					className="spacing-sizes-control__icon"
+					icon={ icon }
+					size={ 24 }
+				/>
+			) }
+			{ showCustomValueControl && (
+				<>
+					<UnitControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
+						onChange={ ( newSize ) =>
+							onChange( getNewCustomValue( newSize ) )
+						}
+						value={ currentValue }
+						units={ units }
+						min={ minValue }
+						placeholder={ allPlaceholder }
+						disableUnits={ isMixed }
+						label={ ariaLabel }
+						hideLabelFromVision
+						className="spacing-sizes-control__custom-value-input"
+						size="__unstable-large"
+						onDragStart={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDrag={ () => {
+							if ( value?.charAt( 0 ) === '-' ) {
+								setMinValue( 0 );
+							}
+						} }
+						onDragEnd={ () => {
+							setMinValue( minimumCustomValue );
+						} }
+					/>
+					<RangeControl
+						__next40pxDefaultSize
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
+						value={ customRangeValue }
+						min={ 0 }
+						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
+						step={
+							CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ?? 0.1
+						}
+						withInputField={ false }
+						onChange={ handleCustomValueSliderChange }
+						className="spacing-sizes-control__custom-value-range"
+						__nextHasNoMarginBottom
+						label={ ariaLabel }
+						hideLabelFromVision
+					/>
+				</>
+			) }
+			{ showRangeControl && ! showCustomValueControl && (
+				<RangeControl
+					__next40pxDefaultSize
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
+					className="spacing-sizes-control__range-control"
+					value={ currentValue }
+					onChange={ ( newSize ) =>
+						onChange( getNewPresetValue( newSize ) )
+					}
+					onMouseDown={ ( event ) => {
+						// If mouse down is near start of range set initial value to 0, which
+						// prevents the user have to drag right then left to get 0 setting.
+						if ( event?.nativeEvent?.offsetX < 35 ) {
+							setInitialValue();
+						}
+					} }
+					withInputField={ false }
+					aria-valuenow={ currentValue }
+					aria-valuetext={ spacingSizes[ currentValue ]?.name }
+					renderTooltipContent={ customTooltipContent }
+					min={ 0 }
+					max={ spacingSizes.length - 1 }
+					marks={ marks }
+					label={ ariaLabel }
+					hideLabelFromVision
+					__nextHasNoMarginBottom
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
+				/>
+			) }
+			{ ! showRangeControl && ! showCustomValueControl && (
+				<CustomSelectControl
+					className="spacing-sizes-control__custom-select-control"
+					value={
+						// passing empty string as a fallback to continue using the
+						// component in controlled mode
+						options.find(
+							( option ) => option.key === currentValue
+						) || ''
+					}
+					onChange={ ( selection ) => {
+						onChange(
+							getNewPresetValue(
+								selection.selectedItem.key,
+								'selectList'
+							)
+						);
+					} }
+					options={ options }
+					label={ ariaLabel }
+					hideLabelFromVision
+					size="__unstable-large"
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
+				/>
+			) }
+			{ ! disableCustomSpacingSizes && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					size="small"
+					className="spacing-sizes-control__custom-toggle"
+					iconSize={ 24 }
+				/>
+			) }
+		</HStack>
+	);
+}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/linked-button.js b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
index bacdc083e80d63..f6d56be66072ad 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/linked-button.js
@@ -1,24 +1,22 @@
 /**
  * WordPress dependencies
  */
+import { Button, Tooltip } from '@wordpress/components';
 import { link, linkOff } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-import { Button, Tooltip } from '@wordpress/components';
 
-export default function LinkedButton( { isLinked, onClick } ) {
+export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
 		<Tooltip text={ label }>
-			<span className="component-spacing-sizes-control__linked-button">
-				<Button
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-					onClick={ onClick }
-				/>
-			</span>
+			<Button
+				{ ...props }
+				size="small"
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
 		</Tooltip>
 	);
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
deleted file mode 100644
index 0e155c421d6ab0..00000000000000
--- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import {
-	BaseControl,
-	Button,
-	RangeControl,
-	CustomSelectControl,
-	__experimentalUnitControl as UnitControl,
-	__experimentalHStack as HStack,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import useSetting from '../use-setting';
-import { store as blockEditorStore } from '../../store';
-import {
-	LABELS,
-	getSliderValueFromPreset,
-	getCustomValueFromPreset,
-	getPresetValueFromCustomValue,
-	isValueSpacingPreset,
-} from './utils';
-
-const CUSTOM_VALUE_SETTINGS = {
-	px: { max: 300, steps: 1 },
-	'%': { max: 100, steps: 1 },
-	vw: { max: 100, steps: 1 },
-	vh: { max: 100, steps: 1 },
-	em: { max: 10, steps: 0.1 },
-	rm: { max: 10, steps: 0.1 },
-};
-
-export default function SpacingInputControl( {
-	spacingSizes,
-	value,
-	side,
-	onChange,
-	isMixed = false,
-	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
-	value = getPresetValueFromCustomValue( value, spacingSizes );
-
-	let selectListSizes = spacingSizes;
-	const showRangeControl = spacingSizes.length <= 8;
-
-	const disableCustomSpacingSizes = useSelect( ( select ) => {
-		const editorSettings = select( blockEditorStore ).getSettings();
-		return editorSettings?.disableCustomSpacingSizes;
-	} );
-
-	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
-		! disableCustomSpacingSizes &&
-			value !== undefined &&
-			! isValueSpacingPreset( value )
-	);
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
-	} );
-
-	let currentValue = null;
-
-	const showCustomValueInSelectList =
-		! showRangeControl &&
-		! showCustomValueControl &&
-		value !== undefined &&
-		( ! isValueSpacingPreset( value ) ||
-			( isValueSpacingPreset( value ) && isMixed ) );
-
-	if ( showCustomValueInSelectList ) {
-		selectListSizes = [
-			...spacingSizes,
-			{
-				name: ! isMixed
-					? // translators: A custom measurement, eg. a number followed by a unit like 12px.
-					  sprintf( __( 'Custom (%s)' ), value )
-					: __( 'Mixed' ),
-				slug: 'custom',
-				size: value,
-			},
-		];
-		currentValue = selectListSizes.length - 1;
-	} else if ( ! isMixed ) {
-		currentValue = ! showCustomValueControl
-			? getSliderValueFromPreset( value, spacingSizes )
-			: getCustomValueFromPreset( value, spacingSizes );
-	}
-
-	const selectedUnit =
-		useMemo(
-			() => parseQuantityAndUnitFromRawValue( currentValue ),
-			[ currentValue ]
-		)[ 1 ] || units[ 0 ].value;
-
-	const setInitialValue = () => {
-		if ( value === undefined ) {
-			onChange( '0' );
-		}
-	};
-
-	const customTooltipContent = ( newValue ) =>
-		value === undefined ? undefined : spacingSizes[ newValue ]?.name;
-
-	const customRangeValue = parseFloat( currentValue, 10 );
-
-	const getNewCustomValue = ( newSize ) => {
-		const isNumeric = ! isNaN( parseFloat( newSize ) );
-		const nextValue = isNumeric ? newSize : undefined;
-		return nextValue;
-	};
-
-	const getNewPresetValue = ( newSize, controlType ) => {
-		const size = parseInt( newSize, 10 );
-
-		if ( controlType === 'selectList' ) {
-			if ( size === 0 ) {
-				return undefined;
-			}
-			if ( size === 1 ) {
-				return '0';
-			}
-		} else if ( size === 0 ) {
-			return '0';
-		}
-		return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
-	};
-
-	const handleCustomValueSliderChange = ( next ) => {
-		onChange( [ next, selectedUnit ].join( '' ) );
-	};
-
-	const allPlaceholder = isMixed ? __( 'Mixed' ) : null;
-
-	const currentValueHint = ! isMixed
-		? customTooltipContent( currentValue )
-		: __( 'Mixed' );
-
-	const options = selectListSizes.map( ( size, index ) => ( {
-		key: index,
-		name: size.name,
-	} ) );
-
-	const marks = spacingSizes.map( ( newValue, index ) => ( {
-		value: index,
-		label: undefined,
-	} ) );
-
-	const ariaLabel = sprintf(
-		// translators: 1: The side of the block being modified (top, bottom, left, etc.). 2. Type of spacing being modified (Padding, margin, etc)
-		__( '%1$s %2$s' ),
-		LABELS[ side ],
-		type?.toLowerCase()
-	);
-
-	const showHint =
-		showRangeControl &&
-		! showCustomValueControl &&
-		currentValueHint !== undefined;
-
-	return (
-		<>
-			{ side !== 'all' && (
-				<HStack className="components-spacing-sizes-control__side-labels">
-					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
-						{ LABELS[ side ] }
-					</BaseControl.VisualLabel>
-
-					{ showHint && (
-						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
-							{ currentValueHint }
-						</BaseControl.VisualLabel>
-					) }
-				</HStack>
-			) }
-			{ side === 'all' && showHint && (
-				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
-					{ currentValueHint }
-				</BaseControl.VisualLabel>
-			) }
-
-			{ ! disableCustomSpacingSizes && (
-				<Button
-					label={
-						showCustomValueControl
-							? __( 'Use size preset' )
-							: __( 'Set custom size' )
-					}
-					icon={ settings }
-					onClick={ () => {
-						setShowCustomValueControl( ! showCustomValueControl );
-					} }
-					isPressed={ showCustomValueControl }
-					isSmall
-					className={ classnames( {
-						'components-spacing-sizes-control__custom-toggle-all':
-							side === 'all',
-						'components-spacing-sizes-control__custom-toggle-single':
-							side !== 'all',
-					} ) }
-					iconSize={ 24 }
-				/>
-			) }
-			{ showCustomValueControl && (
-				<>
-					<UnitControl
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-						onChange={ ( newSize ) =>
-							onChange( getNewCustomValue( newSize ) )
-						}
-						value={ currentValue }
-						units={ units }
-						min={ minimumCustomValue }
-						placeholder={ allPlaceholder }
-						disableUnits={ isMixed }
-						label={ ariaLabel }
-						hideLabelFromVision={ true }
-						className="components-spacing-sizes-control__custom-value-input"
-						size={ '__unstable-large' }
-					/>
-
-					<RangeControl
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-						value={ customRangeValue }
-						min={ 0 }
-						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
-						step={
-							CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ?? 0.1
-						}
-						withInputField={ false }
-						onChange={ handleCustomValueSliderChange }
-						className="components-spacing-sizes-control__custom-value-range"
-					/>
-				</>
-			) }
-			{ showRangeControl && ! showCustomValueControl && (
-				<RangeControl
-					onMouseOver={ onMouseOver }
-					onMouseOut={ onMouseOut }
-					className="components-spacing-sizes-control__range-control"
-					value={ currentValue }
-					onChange={ ( newSize ) =>
-						onChange( getNewPresetValue( newSize ) )
-					}
-					onMouseDown={ ( event ) => {
-						// If mouse down is near start of range set initial value to 0, which
-						// prevents the user have to drag right then left to get 0 setting.
-						if ( event?.nativeEvent?.offsetX < 35 ) {
-							setInitialValue();
-						}
-					} }
-					withInputField={ false }
-					aria-valuenow={ currentValue }
-					aria-valuetext={ spacingSizes[ currentValue ]?.name }
-					renderTooltipContent={ customTooltipContent }
-					min={ 0 }
-					max={ spacingSizes.length - 1 }
-					marks={ marks }
-					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextHasNoMarginBottom={ true }
-				/>
-			) }
-			{ ! showRangeControl && ! showCustomValueControl && (
-				<CustomSelectControl
-					className="components-spacing-sizes-control__custom-select-control"
-					value={
-						options.find(
-							( option ) => option.key === currentValue
-						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
-					}
-					onChange={ ( selection ) => {
-						onChange(
-							getNewPresetValue(
-								selection.selectedItem.key,
-								'selectList'
-							)
-						);
-					} }
-					options={ options }
-					label={ ariaLabel }
-					hideLabelFromVision={ true }
-					__nextUnconstrainedWidth={ true }
-					size={ '__unstable-large' }
-					onMouseOver={ onMouseOver }
-					onMouseOut={ onMouseOut }
-				/>
-			) }
-		</>
-	);
-}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
index 4b60a744bfd90b..a387e5369d01ed 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -1,137 +1,64 @@
-.tools-panel-item-spacing {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	align-items: center;
-	grid-template-rows: 16px auto;
-}
-
-.component-spacing-sizes-control {
-	box-sizing: border-box;
-	padding-bottom: 12px;
-	width: 100%;
-	display: contents;
-
-	legend {
-		padding: 0;
-		grid-column: 1 / 1;
-		grid-row: 1 / 1;
-		align-self: center;
-	}
-
-	.components-base-control__label {
+.spacing-sizes-control {
+	.spacing-sizes-control__custom-value-input,
+	.spacing-sizes-control__label {
 		margin-bottom: 0;
-		height: $grid-unit-20;
 	}
 
-	.components-spacing-sizes-control__side-labels {
-		grid-column: 1 / 1;
-		justify-content: left;
-		height: $grid-unit-20;
-		margin-top: $grid-unit-20;
-	}
-
-	.components-spacing-sizes-control__side-label {
-		grid-column: 1 / 1;
-		justify-self: left;
-		margin-bottom: 0;
-	}
-
-	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control,
-		.components-spacing-sizes-control__custom-value-input {
-			margin-top: $grid-unit-10;
+	.is-marked {
+		.components-range-control__track {
+			transition: width ease 0.1s;
+			@include reduce-motion("transition");
 		}
-	}
 
-	.components-spacing-sizes-control__hint-single,
-	.components-spacing-sizes-control__hint-all {
-		color: $gray-700;
-		margin-bottom: 0;
-	}
-
-	.components-spacing-sizes-control__hint-all {
-		grid-column: 2 / 2;
-		justify-self: left;
-		grid-row: 1 / 1;
-		align-self: center;
-		margin-left: $grid-unit-05;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all {
-		grid-column: 2 / 2;
-		grid-row: 1 / 1;
-		justify-self: end;
-		margin-top: -4px;
-	}
-
-	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
-		margin-right: $grid-unit-05;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-single {
-		grid-column: 3 / 3;
-		justify-self: end;
-		margin-top: $grid-unit-15;
-	}
-
-	.component-spacing-sizes-control__linked-button {
-		grid-column: 3 / 3;
-		grid-row: 1 / 1;
-		justify-self: end;
-		line-height: 0;
-		margin-top: -4px;
-	}
-
-	.components-spacing-sizes-control__custom-value-range {
-		grid-column: span 2;
-		margin-left: $grid-unit-20;
-		margin-top: 8px;
-	}
-
-	.components-spacing-sizes-control__custom-value-input {
-		width: 124px;
-		margin-top: 8px;
-		grid-column: 1;
-	}
-
-	.components-range-control {
-		height: 40px;
-		/* Vertically center the RangeControl until it has true 40px height. */
-		display: flex;
-		align-items: center;
-
-		> .components-base-control__field {
-			/* Fixes RangeControl contents when the outer wrapper is flex */
-			flex: 1;
+		.components-range-control__thumb-wrapper {
+			transition: left ease 0.1s;
+			@include reduce-motion("transition");
 		}
 	}
 
-	.components-spacing-sizes-control__range-control {
-		grid-column: span 3;
-		margin-top: 8px;
+	.spacing-sizes-control__range-control,
+	.spacing-sizes-control__custom-value-range {
+		flex: 1;
+		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
 
 	.components-range-control__mark {
+		transform: translateX(-50%);
 		height: $grid-unit-05;
-		width: 3px;
-		background-color: #fff;
+		width: math.div($grid-unit-05, 2);
+		background-color: $white;
 		z-index: 1;
+		top: -#{$grid-unit-05};
 	}
 
 	.components-range-control__marks {
 		margin-top: 17px;
-
-		:first-child {
-			display: none;
-		}
 	}
 
-	[class*="ThumbWrapper-thumbColor"] {
+	.components-range-control__thumb-wrapper {
 		z-index: 3;
 	}
+}
 
-	.components-spacing-sizes-control__custom-select-control {
-		grid-column: span 3;
-		margin-top: $grid-unit-10;
-	}
+.spacing-sizes-control__header {
+	height: $grid-unit-20;
+	margin-bottom: $grid-unit-15;
+}
+
+.spacing-sizes-control__dropdown {
+	height: $grid-unit-30;
+}
+
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+	flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+	flex: 0 0 auto;
+}
+
+.spacing-sizes-control__icon {
+	margin-left: $grid-unit-05 * -1; // Aligns the icon to the control header.
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
index b79d9ef4cf5a43..a8440bb5be8caf 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
@@ -2,15 +2,22 @@
  * Internal dependencies
  */
 import {
-	isValueSpacingPreset,
+	ALL_SIDES,
+	getAllRawValue,
 	getCustomValueFromPreset,
+	getInitialView,
 	getPresetValueFromCustomValue,
+	getSliderValueFromPreset,
 	getSpacingPresetCssVar,
 	getSpacingPresetSlug,
-	getSliderValueFromPreset,
-	getAllRawValue,
-	isValuesMixed,
+	getSupportedMenuItems,
+	hasAxisSupport,
+	hasBalancedSidesSupport,
 	isValuesDefined,
+	isValuesMixed,
+	isValueSpacingPreset,
+	LABELS,
+	VIEWS,
 } from '../utils';
 
 describe( 'isValueSpacingPreset', () => {
@@ -42,7 +49,15 @@ describe( 'getCustomValueFromPreset', () => {
 } );
 
 describe( 'getPresetValueFromCustomValue', () => {
-	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	const spacingSizes = [
+		{ name: 'Default', slug: 'default', size: undefined },
+		{ name: 'Small', slug: 20, size: '8px' },
+	];
+	it( 'should return undefined even if an undefined value exist in spacing sizes as occurs if spacingSizes has > 7 entries', () => {
+		expect( getPresetValueFromCustomValue( undefined, spacingSizes ) ).toBe(
+			undefined
+		);
+	} );
 	it( 'should return original value if a string in spacing presets var format', () => {
 		expect(
 			getPresetValueFromCustomValue(
@@ -180,3 +195,217 @@ describe( 'isValuesDefined', () => {
 		expect( isValuesDefined( definedValues ) ).toBe( true );
 	} );
 } );
+
+describe( 'hasAxisSupport', () => {
+	it( 'should return true for horizontal support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'horizontal' ], 'horizontal' ) ).toBe( true );
+	} );
+	it( 'should return true for horizontal support if both left and right are in sides', () => {
+		expect( hasAxisSupport( [ 'left', 'right' ], 'horizontal' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for horizontal when not supported', () => {
+		expect( hasAxisSupport( [ 'left' ], 'horizontal' ) ).toBe( false );
+	} );
+	it( 'should return true for vertical support if it is in sides', () => {
+		expect( hasAxisSupport( [ 'vertical' ], 'vertical' ) ).toBe( true );
+	} );
+	it( 'should return true for vertical support if both top and bottom are in sides', () => {
+		expect( hasAxisSupport( [ 'top', 'bottom' ], 'vertical' ) ).toBe(
+			true
+		);
+	} );
+	it( 'should return false for vertical when not supported', () => {
+		expect( hasAxisSupport( [ 'top' ], 'vertical' ) ).toBe( false );
+	} );
+	it( 'should return true when either horizontal or vertical axes are supported and no axis supplied', () => {
+		expect( hasAxisSupport( [ 'horizontal' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'vertical' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasAxisSupport( [ 'top', 'left' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getSupportedMenuItems', () => {
+	it( 'returns no items when sides are not configured', () => {
+		expect( getSupportedMenuItems( [] ) ).toEqual( {} );
+		expect( getSupportedMenuItems() ).toEqual( {} );
+	} );
+
+	const sideConfigs = [
+		[ LABELS.axial, [ 'horizontal', 'vertical' ] ],
+		[ LABELS.axial, [ 'top', 'right', 'bottom', 'left' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+		[ LABELS.horizontal, [ 'left', 'right' ] ],
+		[ LABELS.vertical, [ 'vertical' ] ],
+		[ LABELS.vertical, [ 'top', 'bottom' ] ],
+		[ LABELS.horizontal, [ 'horizontal' ] ],
+	];
+
+	test.each( sideConfigs )(
+		'should include %s axial menu with %s sides',
+		( label, sides ) => {
+			expect( getSupportedMenuItems( sides ) ).toHaveProperty(
+				'axial.label',
+				label
+			);
+		}
+	);
+
+	it( 'returns no axial item when not not supported', () => {
+		expect( getSupportedMenuItems( [ 'left', 'top' ] ) ).not.toHaveProperty(
+			'axial'
+		);
+	} );
+
+	it( 'should include the correct individual side options', () => {
+		expect( getSupportedMenuItems( [ 'top' ] ) ).toHaveProperty(
+			'top.label',
+			LABELS.top
+		);
+		expect( getSupportedMenuItems( [ 'right' ] ) ).toHaveProperty(
+			'right.label',
+			LABELS.right
+		);
+		expect( getSupportedMenuItems( [ 'bottom' ] ) ).toHaveProperty(
+			'bottom.label',
+			LABELS.bottom
+		);
+		expect( getSupportedMenuItems( [ 'left' ] ) ).toHaveProperty(
+			'left.label',
+			LABELS.left
+		);
+	} );
+	it( 'should include the custom option only when applicable', () => {
+		expect( getSupportedMenuItems( [ 'top', 'left' ] ) ).toHaveProperty(
+			'custom.label',
+			LABELS.custom
+		);
+		expect( getSupportedMenuItems( [ 'top' ] ) ).not.toHaveProperty(
+			'custom'
+		);
+		expect(
+			getSupportedMenuItems( [ 'horizontal', 'vertical' ] )
+		).not.toHaveProperty( 'custom.label' );
+	} );
+} );
+
+describe( 'hasBalancedSidesSupport', () => {
+	it( 'should determine balanced sides', () => {
+		expect( hasBalancedSidesSupport( ALL_SIDES ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'top', 'bottom' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport( [ 'left', 'right' ] ) ).toBe( true );
+		expect( hasBalancedSidesSupport() ).toBe( true );
+	} );
+	it( 'should determine unbalanced sides', () => {
+		expect( hasBalancedSidesSupport( [ 'top' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'left' ] ) ).toBe( false );
+		expect( hasBalancedSidesSupport( [ 'top', 'right' ] ) ).toBe( false );
+	} );
+} );
+
+describe( 'getInitialView', () => {
+	describe( 'Axial view (Horizontal & vertical, Horizontal, or Vertical)', () => {
+		it( 'should return axial view when no values defined with balanced sides config', () => {
+			expect( getInitialView( {}, ALL_SIDES ) ).toBe( VIEWS.axial );
+			expect( getInitialView( undefined, ALL_SIDES ) ).toBe(
+				VIEWS.axial
+			);
+		} );
+		it( 'should return axial view when horizontal & vertical axes are supported and have axial values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when horizontal axis is supported, horizontal values set and no vertical supported or values', () => {
+			expect(
+				getInitialView( { left: '1em', right: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should return axial view when vertical axis is supported and vertical values are set without horizontal values', () => {
+			expect(
+				getInitialView( { top: '1em', bottom: '1em' }, ALL_SIDES )
+			).toBe( VIEWS.axial );
+		} );
+		it( 'should not return axial view when axial values do not match', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).not.toBe( VIEWS.axial );
+		} );
+	} );
+
+	describe( 'Custom sides view', () => {
+		it( 'should return custom view when no values and unbalanced sides config with > 1 side', () => {
+			expect( getInitialView( {}, [ 'top', 'left' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect(
+				getInitialView( undefined, [ 'right', 'bottom', 'left' ] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom sides view when all values match and unbalanced sides config', () => {
+			expect(
+				getInitialView( { top: '1em', right: '1em', bottom: '1em' }, [
+					'top',
+					'right',
+					'bottom',
+				] )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if there is more than one side with differing values', () => {
+			expect(
+				getInitialView(
+					{ top: '1em', bottom: '1.5em', left: '1em', right: '1em' },
+					ALL_SIDES
+				)
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if mixed partial subset of values is provided', () => {
+			expect(
+				getInitialView( { top: '1em', right: '10px' }, ALL_SIDES )
+			).toBe( VIEWS.custom );
+		} );
+		it( 'should return custom view if there is only a single side value', () => {
+			expect( getInitialView( { top: '1em' }, ALL_SIDES ) ).toBe(
+				VIEWS.custom
+			);
+		} );
+		it( 'should return custom view even if only single side supported', () => {
+			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.custom
+			);
+		} );
+	} );
+
+	describe( 'Single side view', () => {
+		it( 'should return single side when only single side supported and no value defined', () => {
+			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
+		} );
+
+		it( 'should return single side when only single side supported and has only axial sides', () => {
+			expect(
+				getInitialView( { top: '1em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.top );
+			expect(
+				getInitialView( { left: '4em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.left );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index ece1573ba9a943..046bee98761bf2 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -1,12 +1,60 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	sidesAll,
+	sidesBottom,
+	sidesHorizontal,
+	sidesLeft,
+	sidesRight,
+	sidesTop,
+	sidesVertical,
+} from '@wordpress/icons';
+
+export const RANGE_CONTROL_MAX_SIZE = 8;
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ICONS = {
+	custom: sidesAll,
+	axial: sidesAll,
+	horizontal: sidesHorizontal,
+	vertical: sidesVertical,
+	top: sidesTop,
+	right: sidesRight,
+	bottom: sidesBottom,
+	left: sidesLeft,
+};
+
+export const LABELS = {
+	default: __( 'Spacing control' ),
+	top: __( 'Top' ),
+	bottom: __( 'Bottom' ),
+	left: __( 'Left' ),
+	right: __( 'Right' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
+	axial: __( 'Horizontal & vertical' ),
+	custom: __( 'Custom' ),
+};
+
+export const VIEWS = {
+	axial: 'axial',
+	top: 'top',
+	right: 'right',
+	bottom: 'bottom',
+	left: 'left',
+	custom: 'custom',
+};
 
 /**
  * Checks is given value is a spacing preset.
@@ -54,8 +102,8 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  * @return {string} The preset value if it can be found.
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
-	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 
@@ -75,7 +123,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  *
  * @param {string} value Value to convert.
  *
- * @return {string} CSS var string for given spacing preset value.
+ * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
 	if ( ! value ) {
@@ -96,7 +144,7 @@ export function getSpacingPresetCssVar( value ) {
  *
  * @param {string} value Value to extract slug from.
  *
- * @return {number} The int value of the slug from given spacing preset.
+ * @return {string|undefined} The int value of the slug from given spacing preset.
  */
 export function getSpacingPresetSlug( value ) {
 	if ( ! value ) {
@@ -136,26 +184,6 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	return sliderValue !== -1 ? sliderValue : NaN;
 }
 
-export const LABELS = {
-	all: __( 'All sides' ),
-	top: __( 'Top' ),
-	bottom: __( 'Bottom' ),
-	left: __( 'Left' ),
-	right: __( 'Right' ),
-	mixed: __( 'Mixed' ),
-	vertical: __( 'Vertical' ),
-	horizontal: __( 'Horizontal' ),
-};
-
-export const DEFAULT_VALUES = {
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-
-export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
-
 /**
  * Gets an items with the most occurrence within an array
  * https://stackoverflow.com/a/20762713
@@ -211,5 +239,160 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
+	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
+}
+
+/**
+ * Determines whether a particular axis has support. If no axis is
+ * specified, this function checks if either axis is supported.
+ *
+ * @param {Array}  sides Supported sides.
+ * @param {string} axis  Which axis to check.
+ *
+ * @return {boolean} Whether there is support for the specified axis or both axes.
+ */
+export function hasAxisSupport( sides, axis ) {
+	if ( ! sides || ! sides.length ) {
+		return false;
+	}
+
+	const hasHorizontalSupport =
+		sides.includes( 'horizontal' ) ||
+		( sides.includes( 'left' ) && sides.includes( 'right' ) );
+
+	const hasVerticalSupport =
+		sides.includes( 'vertical' ) ||
+		( sides.includes( 'top' ) && sides.includes( 'bottom' ) );
+
+	if ( axis === 'horizontal' ) {
+		return hasHorizontalSupport;
+	}
+
+	if ( axis === 'vertical' ) {
+		return hasVerticalSupport;
+	}
+
+	return hasHorizontalSupport || hasVerticalSupport;
+}
+
+/**
+ * Determines which menu options should be included in the SidePicker.
+ *
+ * @param {Array} sides Supported sides.
+ *
+ * @return {Object} Menu options with each option containing label & icon.
+ */
+export function getSupportedMenuItems( sides ) {
+	if ( ! sides || ! sides.length ) {
+		return {};
+	}
+
+	const menuItems = {};
+
+	// Determine the primary "side" menu options.
+	const hasHorizontalSupport = hasAxisSupport( sides, 'horizontal' );
+	const hasVerticalSupport = hasAxisSupport( sides, 'vertical' );
+
+	if ( hasHorizontalSupport && hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.axial, icon: ICONS.axial };
+	} else if ( hasHorizontalSupport ) {
+		menuItems.axial = { label: LABELS.horizontal, icon: ICONS.horizontal };
+	} else if ( hasVerticalSupport ) {
+		menuItems.axial = { label: LABELS.vertical, icon: ICONS.vertical };
+	}
+
+	// Track whether we have any individual sides so we can omit the custom
+	// option if required.
+	let numberOfIndividualSides = 0;
+
+	ALL_SIDES.forEach( ( side ) => {
+		if ( sides.includes( side ) ) {
+			numberOfIndividualSides += 1;
+			menuItems[ side ] = {
+				label: LABELS[ side ],
+				icon: ICONS[ side ],
+			};
+		}
+	} );
+
+	// Add custom item if there are enough sides to warrant a separated view.
+	if ( numberOfIndividualSides > 1 ) {
+		menuItems.custom = { label: LABELS.custom, icon: ICONS.custom };
+	}
+
+	return menuItems;
+}
+
+/**
+ * Checks if the supported sides are balanced for each axis.
+ * - Horizontal - both left and right sides are supported.
+ * - Vertical - both top and bottom are supported.
+ *
+ * @param {Array} sides The supported sides which may be axes as well.
+ *
+ * @return {boolean} Whether or not the supported sides are balanced.
+ */
+export function hasBalancedSidesSupport( sides = [] ) {
+	const counts = { top: 0, right: 0, bottom: 0, left: 0 };
+	sides.forEach( ( side ) => ( counts[ side ] += 1 ) );
+
+	return (
+		( counts.top + counts.bottom ) % 2 === 0 &&
+		( counts.left + counts.right ) % 2 === 0
+	);
+}
+
+/**
+ * Determines which view the SpacingSizesControl should default to on its
+ * first render; Axial, Custom, or Single side.
+ *
+ * @param {Object} values Current side values.
+ * @param {Array}  sides  Supported sides.
+ *
+ * @return {string} View to display.
+ */
+export function getInitialView( values = {}, sides ) {
+	const { top, right, bottom, left } = values;
+	const sideValues = [ top, right, bottom, left ].filter( Boolean );
+
+	// Axial ( Horizontal & vertical ).
+	// - Has axial side support
+	// - Has axial side values which match
+	// - Has no values and the supported sides are balanced
+	const hasMatchingAxialValues =
+		top === bottom && left === right && ( !! top || !! left );
+	const hasNoValuesAndBalancedSides =
+		! sideValues.length && hasBalancedSidesSupport( sides );
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
+
+	if (
+		hasAxisSupport( sides ) &&
+		( hasMatchingAxialValues || hasNoValuesAndBalancedSides )
+	) {
+		return VIEWS.axial;
+	}
+
+	// Only axial sides are supported and single value defined.
+	// - Ensure the side returned is the first side that has a value.
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
+	// Default to the Custom (separated sides) view.
+	return VIEWS.custom;
 }
diff --git a/packages/block-editor/src/components/tabbed-sidebar/README.md b/packages/block-editor/src/components/tabbed-sidebar/README.md
new file mode 100644
index 00000000000000..42001dbfc79cb0
--- /dev/null
+++ b/packages/block-editor/src/components/tabbed-sidebar/README.md
@@ -0,0 +1,76 @@
+# Tabbed Panel
+
+The `TabbedPanel` component is used to create the secondary panels in the editor.
+
+## Development guidelines
+
+This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example:
+
+-   A close button
+-   Tabs that fill the panel
+-   Custom scollbars
+
+### Usage
+
+Renders a block alignment toolbar with alignments options.
+
+```jsx
+import { TabbedSidebar } from '@wordpress/components';
+
+const MyTabbedSidebar = () => (
+	<TabbedSidebar
+		tabs={ [
+			{
+				name: 'slug-1',
+				title: _x( 'Title 1', 'context' ),
+				panel: <PanelContents>,
+				panelRef: useRef('an-optional-ref'),
+			},
+			{
+				name: 'slug-2',
+				title: _x( 'Title 2', 'context' ),
+				panel: <PanelContents />,
+			},
+		] }
+		onClose={ onClickCloseButton }
+		onSelect={ onSelectTab }
+		defaultTabId="slug-1"
+		ref={ tabsRef }
+	/>
+);
+```
+
+### Props
+
+### `defaultTabId`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders.
+
+### `onClose`
+
+-   **Type:** `Function`
+
+The function that is called when the close button is clicked.
+
+### `onSelect`
+
+-   **Type:** `Function`
+
+This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument.
+
+### `selectedTab`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component - it will display this tab as selected.
+
+### `tabs`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of tabs which will be rendered as `TabList` and `TabPanel` components.
diff --git a/packages/block-editor/src/components/tabbed-sidebar/index.js b/packages/block-editor/src/components/tabbed-sidebar/index.js
new file mode 100644
index 00000000000000..c9ff6bbf6555f0
--- /dev/null
+++ b/packages/block-editor/src/components/tabbed-sidebar/index.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function TabbedSidebar(
+	{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },
+	ref
+) {
+	return (
+		<div className="block-editor-tabbed-sidebar">
+			<Tabs
+				selectOnMove={ false }
+				defaultTabId={ defaultTabId }
+				onSelect={ onSelect }
+				selectedTabId={ selectedTab }
+			>
+				<div className="block-editor-tabbed-sidebar__tablist-and-close-button">
+					<Button
+						className="block-editor-tabbed-sidebar__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel }
+						onClick={ () => onClose() }
+						size="compact"
+					/>
+
+					<Tabs.TabList
+						className="block-editor-tabbed-sidebar__tablist"
+						ref={ ref }
+					>
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-tabbed-sidebar__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+						className="block-editor-tabbed-sidebar__tabpanel"
+						ref={ tab.panelRef }
+					>
+						{ tab.panel }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
+	);
+}
+
+export default forwardRef( TabbedSidebar );
diff --git a/packages/block-editor/src/components/tabbed-sidebar/style.scss b/packages/block-editor/src/components/tabbed-sidebar/style.scss
new file mode 100644
index 00000000000000..c6f8f14d6ca7c7
--- /dev/null
+++ b/packages/block-editor/src/components/tabbed-sidebar/style.scss
@@ -0,0 +1,35 @@
+.block-editor-tabbed-sidebar {
+	background-color: $white;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+	border-bottom: $border-width solid $gray-300;
+	display: flex;
+	justify-content: space-between;
+	padding-right: $grid-unit-10;
+}
+
+
+.block-editor-tabbed-sidebar__close-button {
+	background: $white;
+	/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+	order: 1;
+	align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+	margin-bottom: -$border-width;
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	overflow-y: auto;
+	scrollbar-gutter: auto;
+}
diff --git a/packages/block-editor/src/components/text-alignment-control/index.js b/packages/block-editor/src/components/text-alignment-control/index.js
new file mode 100644
index 00000000000000..6eeaad784db0f0
--- /dev/null
+++ b/packages/block-editor/src/components/text-alignment-control/index.js
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	alignLeft,
+	alignCenter,
+	alignRight,
+	alignJustify,
+} from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
+
+const TEXT_ALIGNMENT_OPTIONS = [
+	{
+		label: __( 'Align text left' ),
+		value: 'left',
+		icon: alignLeft,
+	},
+	{
+		label: __( 'Align text center' ),
+		value: 'center',
+		icon: alignCenter,
+	},
+	{
+		label: __( 'Align text right' ),
+		value: 'right',
+		icon: alignRight,
+	},
+	{
+		label: __( 'Justify text' ),
+		value: 'justify',
+		icon: alignJustify,
+	},
+];
+
+const DEFAULT_OPTIONS = [ 'left', 'center', 'right' ];
+
+/**
+ * Control to facilitate text alignment selections.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected text alignment.
+ * @param {Function} props.onChange  Handles change in text alignment selection.
+ * @param {string[]} props.options   Array of text alignment options to display.
+ *
+ * @return {Element} Text alignment control.
+ */
+export default function TextAlignmentControl( {
+	className,
+	value,
+	onChange,
+	options = DEFAULT_OPTIONS,
+} ) {
+	const validOptions = useMemo(
+		() =>
+			TEXT_ALIGNMENT_OPTIONS.filter( ( option ) =>
+				options.includes( option.value )
+			),
+		[ options ]
+	);
+
+	if ( ! validOptions.length ) {
+		return null;
+	}
+
+	return (
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Text alignment' ) }
+			className={ clsx(
+				'block-editor-text-alignment-control',
+				className
+			) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		>
+			{ validOptions.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/block-editor/src/components/text-alignment-control/stories/index.story.js b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
new file mode 100644
index 00000000000000..3744f3fa012a71
--- /dev/null
+++ b/packages/block-editor/src/components/text-alignment-control/stories/index.story.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextAlignmentControl from '../';
+
+export default {
+	title: 'BlockEditor/TextAlignmentControl',
+	component: TextAlignmentControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		className: { control: 'text' },
+		options: {
+			control: 'check',
+			options: [ 'left', 'center', 'right', 'justify' ],
+		},
+		value: { control: false },
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextAlignmentControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-decoration-control/README.md b/packages/block-editor/src/components/text-decoration-control/README.md
new file mode 100644
index 00000000000000..a606140baa330e
--- /dev/null
+++ b/packages/block-editor/src/components/text-decoration-control/README.md
@@ -0,0 +1,40 @@
+# TextDecorationControl
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+<br />
+
+![TextDecorationControl Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-decoration-component.png?raw=true)
+
+
+## Usage
+
+```jsx
+import { __experimentalTextDecorationControl as TextDecorationControl } from '@wordpress/block-editor';
+```
+
+Then, you can use the component in your block editor UI:
+
+```jsx
+<TextDecorationControl
+  value={textDecorationValue}
+  onChange={(newValue) => setAttributes({ textDecoration: newValue })}
+/>
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `none`
+-   **Options:** `none`, `underline`, `line-through`
+
+The current value of the Text Decoration setting. You may only choose from the `Options` listed above.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the Text Decoration value is changed via an interaction with any of the buttons. Called with the Text Decoration value (`none`, `underline`, `line-through`) as the only argument.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 36211185acb77c..720f3d2d9558eb 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,28 +1,31 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_DECORATIONS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Underline' ),
+		label: __( 'Underline' ),
 		value: 'underline',
 		icon: formatUnderline,
 	},
 	{
-		name: __( 'Strikethrough' ),
+		label: __( 'Strikethrough' ),
 		value: 'line-through',
 		icon: formatStrikethrough,
 	},
@@ -31,12 +34,12 @@ const TEXT_DECORATIONS = [
 /**
  * Control to facilitate text decoration selections.
  *
- * @param {Object}   props             Component props.
- * @param {string}   props.value       Currently selected text decoration.
- * @param {Function} props.onChange    Handles change in text decoration selection.
- * @param {string}   [props.className] Additional class name to apply.
+ * @param {Object}   props           Component props.
+ * @param {string}   props.value     Currently selected text decoration.
+ * @param {Function} props.onChange  Handles change in text decoration selection.
+ * @param {string}   props.className Additional class name to apply.
  *
- * @return {WPElement} Text decoration control.
+ * @return {Element} Text decoration control.
  */
 export default function TextDecorationControl( {
 	value,
@@ -44,34 +47,30 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<fieldset
-			className={ classnames(
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Decoration' ) }
+			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
 		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Decoration' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-decoration-control__buttons">
-				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-					return (
-						<Button
-							key={ textDecoration.value }
-							icon={ textDecoration.icon }
-							label={ textDecoration.name }
-							isPressed={ textDecoration.value === value }
-							onClick={ () => {
-								onChange(
-									textDecoration.value === value
-										? undefined
-										: textDecoration.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			{ TEXT_DECORATIONS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.js b/packages/block-editor/src/components/text-decoration-control/stories/index.js
deleted file mode 100644
index cb50e4cd6c6f73..00000000000000
--- a/packages/block-editor/src/components/text-decoration-control/stories/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextDecorationControl from '../';
-
-export default {
-	title: 'BlockEditor/TextDecorationControl',
-	component: TextDecorationControl,
-	argTypes: {
-		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
-	},
-};
-
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextDecorationControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.story.js b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
new file mode 100644
index 00000000000000..2212b484185cde
--- /dev/null
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.story.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+	title: 'BlockEditor/TextDecorationControl',
+	component: TextDecorationControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextDecorationControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss b/packages/block-editor/src/components/text-decoration-control/style.scss
deleted file mode 100644
index 689707a66b7ca9..00000000000000
--- a/packages/block-editor/src/components/text-decoration-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-decoration-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-decoration-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		height: $grid-unit-40;
-		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
-	}
-}
diff --git a/packages/block-editor/src/components/text-transform-control/README.md b/packages/block-editor/src/components/text-transform-control/README.md
new file mode 100644
index 00000000000000..2d40cc16ba86f8
--- /dev/null
+++ b/packages/block-editor/src/components/text-transform-control/README.md
@@ -0,0 +1,40 @@
+# TextTransformControl
+
+The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`.
+ 
+![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
+
+## Development guidelines
+
+### Usage
+
+Renders the Text Transform Component with `none`, `uppercase`, `lowercase`, `capitalize` options.
+
+```jsx
+import { TextTransformControl } from '@wordpress/block-editor';
+
+const MyTextTransformControlComponent = () => (
+	<TextTransformControl
+		value={ textTransform }
+		onChange={ ( value ) => {
+			setAttributes( { textTransform: value } );
+		} }
+	/>
+);
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `none`
+-   **Options:** `none`, `uppercase`, `lowercase`, `capitalize`
+
+The current value of the Text Transform setting. You may only choose from the `Options` listed above.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index 9674b49d5ed5ac..a3183e630c328a 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	reset,
@@ -14,25 +13,29 @@ import {
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_TRANSFORMS = [
 	{
-		name: __( 'None' ),
+		label: __( 'None' ),
 		value: 'none',
 		icon: reset,
 	},
 	{
-		name: __( 'Uppercase' ),
+		label: __( 'Uppercase' ),
 		value: 'uppercase',
 		icon: formatUppercase,
 	},
 	{
-		name: __( 'Lowercase' ),
+		label: __( 'Lowercase' ),
 		value: 'lowercase',
 		icon: formatLowercase,
 	},
 	{
-		name: __( 'Capitalize' ),
+		label: __( 'Capitalize' ),
 		value: 'capitalize',
 		icon: formatCapitalize,
 	},
@@ -46,38 +49,34 @@ const TEXT_TRANSFORMS = [
  * @param {string}   props.value     Currently selected text transform.
  * @param {Function} props.onChange  Handles change in text transform selection.
  *
- * @return {WPElement} Text transform control.
+ * @return {Element} Text transform control.
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<fieldset
-			className={ classnames(
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Letter case' ) }
+			className={ clsx(
 				'block-editor-text-transform-control',
 				className
 			) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
 		>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Letter case' ) }
-			</BaseControl.VisualLabel>
-			<div className="block-editor-text-transform-control__buttons">
-				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-					return (
-						<Button
-							key={ textTransform.value }
-							icon={ textTransform.icon }
-							label={ textTransform.name }
-							isPressed={ textTransform.value === value }
-							onClick={ () => {
-								onChange(
-									textTransform.value === value
-										? undefined
-										: textTransform.value
-								);
-							} }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+			{ TEXT_TRANSFORMS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.js b/packages/block-editor/src/components/text-transform-control/stories/index.js
deleted file mode 100644
index 3219d714257e81..00000000000000
--- a/packages/block-editor/src/components/text-transform-control/stories/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextTransformControl from '../';
-
-export default {
-	title: 'BlockEditor/TextTransformControl',
-	component: TextTransformControl,
-	argTypes: {
-		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
-	},
-};
-
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextTransformControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.story.js b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
new file mode 100644
index 00000000000000..96dd8ed479dc4e
--- /dev/null
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.story.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextTransformControl from '../';
+
+export default {
+	title: 'BlockEditor/TextTransformControl',
+	component: TextTransformControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<TextTransformControl
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setValue( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-transform-control/style.scss b/packages/block-editor/src/components/text-transform-control/style.scss
deleted file mode 100644
index 0e097405e332b7..00000000000000
--- a/packages/block-editor/src/components/text-transform-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-transform-control {
-	border: 0;
-	margin: 0;
-	padding: 0;
-
-	.block-editor-text-transform-control__buttons {
-		// 4px of padding makes the row 40px high, same as an input.
-		padding: $grid-unit-05 0;
-		display: flex;
-	}
-
-	.components-button.has-icon {
-		height: $grid-unit-40;
-		margin-right: $grid-unit-05;
-		min-width: $grid-unit-40;
-		padding: 0;
-	}
-}
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index 3da6ebc5a9c468..8c4b5c86c40828 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -41,9 +41,10 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					size="compact"
 					{ ...props }
 					ref={ ref }
-					icon={ mode === 'navigation' ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? editIcon : selectIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -51,40 +52,50 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
-					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
+					<NavigableMenu
+						className="block-editor-tool-selector__menu"
+						role="menu"
+						aria-label={ __( 'Tools' ) }
+					>
 						<MenuItemsChoice
 							value={
 								mode === 'navigation' ? 'navigation' : 'edit'
 							}
-							onSelect={ __unstableSetEditorMode }
+							onSelect={ ( newMode ) => {
+								__unstableSetEditorMode( newMode );
+							} }
 							choices={ [
 								{
-									value: 'edit',
+									value: 'navigation',
 									label: (
 										<>
 											<Icon icon={ editIcon } />
-											{ __( 'Edit' ) }
+											{ __( 'Write' ) }
 										</>
 									),
+									info: __( 'Focus on content.' ),
+									'aria-label': __( 'Write' ),
 								},
 								{
-									value: 'navigation',
+									value: 'edit',
 									label: (
 										<>
 											{ selectIcon }
-											{ __( 'Select' ) }
+											{ __( 'Design' ) }
 										</>
 									),
+									info: __( 'Edit layout and styles.' ),
+									'aria-label': __( 'Design' ),
 								},
 							] }
 						/>
 					</NavigableMenu>
 					<div className="block-editor-tool-selector__help">
 						{ __(
-							'Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.'
+							'Tools provide different sets of interactions for blocks. Toggle between simplified content tools (Write) and advanced visual editing tools (Design).'
 						) }
 					</div>
 				</>
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss
index 03774fe0f6b9d3..07ca91d346d907 100644
--- a/packages/block-editor/src/components/tool-selector/style.scss
+++ b/packages/block-editor/src/components/tool-selector/style.scss
@@ -8,3 +8,8 @@
 	color: $gray-700;
 	min-width: 280px;
 }
+
+.block-editor-tool-selector__menu .components-menu-item__info {
+	margin-left: $grid-unit-30 + $grid-unit-15; // icon size + margin
+	text-align: left;
+}
diff --git a/packages/block-editor/src/components/typewriter/index.js b/packages/block-editor/src/components/typewriter/index.js
index 8e3cbe140d9917..b5e230d314a7e2 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;
@@ -271,7 +273,7 @@ function Typewriter( { children } ) {
  * challenges in Internet Explorer, and is simply skipped, rendering the given
  * props children instead.
  *
- * @type {WPComponent}
+ * @type {Component}
  */
 const TypewriterOrIEBypass = isIE ? ( props ) => props.children : Typewriter;
 
diff --git a/packages/block-editor/src/components/ungroup-button/README.md b/packages/block-editor/src/components/ungroup-button/README.md
index e869e6266f5b85..fe1985535b103e 100644
--- a/packages/block-editor/src/components/ungroup-button/README.md
+++ b/packages/block-editor/src/components/ungroup-button/README.md
@@ -6,11 +6,6 @@ This only happens in the mobile WordPress apps.
 
 ![Ungroup button icon](https://user-images.githubusercontent.com/21242757/65593577-11006000-df91-11e9-8460-1179e9ef46d2.png)
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
-
 ## Development guidelines
 
 ### Usage
diff --git a/packages/block-editor/src/components/ungroup-button/icon.js b/packages/block-editor/src/components/ungroup-button/icon.js
deleted file mode 100644
index d71219e4696662..00000000000000
--- a/packages/block-editor/src/components/ungroup-button/icon.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-
-const UngroupSVG = (
-	<SVG
-		width="20"
-		height="20"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M9 2H15C16.1 2 17 2.9 17 4V7C17 8.1 16.1 9 15 9H9C7.9 9 7 8.1 7 7V4C7 2.9 7.9 2 9 2ZM9 7H15V4H9V7Z"
-		/>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M5 11H11C12.1 11 13 11.9 13 13V16C13 17.1 12.1 18 11 18H5C3.9 18 3 17.1 3 16V13C3 11.9 3.9 11 5 11ZM5 16H11V13H5V16Z"
-		/>
-	</SVG>
-);
-
-export default UngroupSVG;
diff --git a/packages/block-editor/src/components/ungroup-button/index.native.js b/packages/block-editor/src/components/ungroup-button/index.native.js
index db5cb33cff9bc5..4abfd6a81f9974 100644
--- a/packages/block-editor/src/components/ungroup-button/index.native.js
+++ b/packages/block-editor/src/components/ungroup-button/index.native.js
@@ -6,14 +6,15 @@ import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
+import { ungroup } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import UngroupIcon from './icon';
 import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
+const EMPTY_BLOCKS_LIST = [];
 
 export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 	if ( ! isUngroupable ) {
@@ -23,7 +24,7 @@ export function UngroupButton( { onConvertFromGroup, isUngroupable = false } ) {
 		<ToolbarGroup>
 			<ToolbarButton
 				title={ __( 'Ungroup' ) }
-				icon={ UngroupIcon }
+				icon={ ungroup }
 				onClick={ onConvertFromGroup }
 			/>
 		</ToolbarGroup>
@@ -45,9 +46,12 @@ export default compose( [
 		const isUngroupable =
 			selectedBlock &&
 			selectedBlock.innerBlocks &&
-			!! selectedBlock.innerBlocks.length &&
+			selectedBlock.innerBlocks.length > 0 &&
 			selectedBlock.name === groupingBlockName;
-		const innerBlocks = isUngroupable ? selectedBlock.innerBlocks : [];
+
+		const innerBlocks = isUngroupable
+			? selectedBlock.innerBlocks
+			: EMPTY_BLOCKS_LIST;
 
 		return {
 			isUngroupable,
diff --git a/packages/block-editor/src/components/unit-control/README.md b/packages/block-editor/src/components/unit-control/README.md
index 4d99d85254decb..7cd5269f00d032 100644
--- a/packages/block-editor/src/components/unit-control/README.md
+++ b/packages/block-editor/src/components/unit-control/README.md
@@ -15,10 +15,6 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px
 }
 ```
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Developer guidelines
 
 ### Usage
@@ -26,8 +22,8 @@ UnitControl component allows the user to set a value as well as a unit (e.g. `px
 Renders a control (`input` and `select`) with the values `10` and `px` parsed from `10px`.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalUnitControl as UnitControl } from '@wordpress/block-editor/';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
index 5af8830dc48c25..a1ce0281759c04 100644
--- a/packages/block-editor/src/components/unit-control/index.js
+++ b/packages/block-editor/src/components/unit-control/index.js
@@ -9,17 +9,12 @@ import {
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		units: unitsProp,
 	} );
 
diff --git a/packages/block-editor/src/components/unsupported-block-details/index.native.js b/packages/block-editor/src/components/unsupported-block-details/index.native.js
new file mode 100644
index 00000000000000..a35d96a925676b
--- /dev/null
+++ b/packages/block-editor/src/components/unsupported-block-details/index.native.js
@@ -0,0 +1,183 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import {
+	requestUnsupportedBlockFallback,
+	sendActionButtonPressedAction,
+	actionButtons,
+} from '@wordpress/react-native-bridge';
+import { help } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { getBlockType } from '@wordpress/blocks';
+import { useCallback, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
+
+const EMPTY_ARRAY = [];
+
+const UnsupportedBlockDetails = ( {
+	clientId,
+	showSheet,
+	onCloseSheet,
+	customBlockTitle = '',
+	icon,
+	title,
+	description,
+	actionButtonLabel,
+	customActions = EMPTY_ARRAY,
+} ) => {
+	const [ sendFallbackMessage, setSendFallbackMessage ] = useState( false );
+	const [ sendButtonPressMessage, setSendButtonPressMessage ] =
+		useState( false );
+
+	const {
+		blockName,
+		blockContent,
+		isUnsupportedBlockEditorSupported,
+		canEnableUnsupportedBlockEditor,
+		isEditableInUnsupportedBlockEditor,
+	} = useUnsupportedBlockEditor( clientId );
+
+	// Styles
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__text' ],
+		styles[ 'unsupported-block-details__text--dark' ]
+	);
+	const titleStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__title' ],
+		styles[ 'unsupported-block-details__title--dark' ]
+	);
+	const descriptionStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__description' ],
+		styles[ 'unsupported-block-details__description--dark' ]
+	);
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__icon' ],
+		styles[ 'unsupported-block-details__icon--dark' ]
+	);
+	const actionButtonStyle = usePreferredColorSchemeStyle(
+		styles[ 'unsupported-block-details__action-button' ],
+		styles[ 'unsupported-block-details__action-button--dark' ]
+	);
+
+	const blockTitle =
+		customBlockTitle || getBlockType( blockName )?.title || blockName;
+
+	const requestFallback = useCallback( () => {
+		if (
+			canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported === false
+		) {
+			onCloseSheet();
+			setSendButtonPressMessage( true );
+		} else {
+			onCloseSheet();
+			setSendFallbackMessage( true );
+		}
+	}, [
+		canEnableUnsupportedBlockEditor,
+		isUnsupportedBlockEditorSupported,
+		onCloseSheet,
+	] );
+
+	// The description can include extra notes via WP hooks.
+	const descriptionWithNotes = applyFilters(
+		'native.unsupported_block_details_extra_note',
+		description,
+		blockName
+	);
+
+	const webEditorDefaultLabel = applyFilters(
+		'native.unsupported_block_details_web_editor_action',
+		__( 'Edit using web editor' )
+	);
+
+	const canUseWebEditor =
+		( isUnsupportedBlockEditorSupported ||
+			canEnableUnsupportedBlockEditor ) &&
+		isEditableInUnsupportedBlockEditor;
+	const actions = [
+		...[
+			canUseWebEditor && {
+				label: actionButtonLabel || webEditorDefaultLabel,
+				onPress: requestFallback,
+			},
+		],
+		...customActions,
+	].filter( Boolean );
+
+	return (
+		<BottomSheet
+			isVisible={ showSheet }
+			hideHeader
+			onClose={ onCloseSheet }
+			onModalHide={ () => {
+				if ( sendFallbackMessage ) {
+					// On iOS, onModalHide is called when the controller is still part of the hierarchy.
+					// A small delay will ensure that the controller has already been removed.
+					this.timeout = setTimeout( () => {
+						// For the Classic block, the content is kept in the `content` attribute.
+						requestUnsupportedBlockFallback(
+							blockContent,
+							clientId,
+							blockName,
+							blockTitle
+						);
+					}, 100 );
+					setSendFallbackMessage( false );
+				} else if ( sendButtonPressMessage ) {
+					this.timeout = setTimeout( () => {
+						sendActionButtonPressedAction(
+							actionButtons.missingBlockAlertActionButton
+						);
+					}, 100 );
+					setSendButtonPressMessage( false );
+				}
+			} }
+		>
+			<View style={ styles[ 'unsupported-block-details__container' ] }>
+				<Icon
+					icon={ icon || help }
+					color={ iconStyle.color }
+					size={ iconStyle.size }
+				/>
+				<Text style={ [ textStyle, titleStyle ] }>{ title }</Text>
+				{ isEditableInUnsupportedBlockEditor &&
+					descriptionWithNotes && (
+						<Text style={ [ textStyle, descriptionStyle ] }>
+							{ descriptionWithNotes }
+						</Text>
+					) }
+			</View>
+			{ actions.map( ( { label, onPress }, index ) => (
+				<TextControl
+					key={ `${ label } - ${ index }` }
+					label={ label }
+					separatorType="topFullWidth"
+					onPress={ onPress }
+					labelStyle={ actionButtonStyle }
+				/>
+			) ) }
+			<TextControl
+				label={ __( 'Dismiss' ) }
+				separatorType="topFullWidth"
+				onPress={ onCloseSheet }
+				labelStyle={ actionButtonStyle }
+			/>
+		</BottomSheet>
+	);
+};
+
+export default UnsupportedBlockDetails;
diff --git a/packages/block-editor/src/components/unsupported-block-details/style.native.scss b/packages/block-editor/src/components/unsupported-block-details/style.native.scss
new file mode 100644
index 00000000000000..a12272e6c85938
--- /dev/null
+++ b/packages/block-editor/src/components/unsupported-block-details/style.native.scss
@@ -0,0 +1,56 @@
+.unsupported-block-details__container {
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.unsupported-block-details__icon {
+	size: 36;
+	height: 36;
+	padding-top: 8;
+	padding-bottom: 8;
+	color: $gray;
+}
+
+.unsupported-block-details__icon--dark {
+	color: $gray-20;
+}
+
+.unsupported-block-details__text {
+	text-align: center;
+	color: $gray-dark;
+}
+
+.unsupported-block-details__text--dark {
+	color: $white;
+}
+
+.unsupported-block-details__title {
+	padding-top: 8;
+	padding-bottom: 12;
+	font-size: 20;
+	font-weight: bold;
+	color: $gray-dark;
+}
+
+.unsupported-block-details__title--dark {
+	color: $white;
+}
+
+.unsupported-block-details__description {
+	padding-bottom: 24;
+	font-size: 16;
+	color: $gray-darken-20;
+}
+
+.unsupported-block-details__description--dark {
+	color: $gray-20;
+}
+
+.unsupported-block-details__action-button {
+	color: $blue-50;
+}
+
+.unsupported-block-details__action-button--dark {
+	color: $blue-30;
+}
diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
index c6f4f172968759..714f7f062990f6 100644
--- a/packages/block-editor/src/components/url-input/README.md
+++ b/packages/block-editor/src/components/url-input/README.md
@@ -36,41 +36,6 @@ This prop is passed directly to the `URLInput` component.
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return wp.element.createElement( wp.blockEditor.URLInputButton, {
-			className: props.className,
-			url: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return wp.element.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -103,7 +68,6 @@ registerBlockType( /* ... */, {
 } );
 ```
 
-{% end %}
 
 # `URLInput`
 
@@ -139,6 +103,12 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
 ### `label: String`
 
 _Optional._ If this property is added, a label will be generated using label property as the content.
@@ -162,41 +132,6 @@ This prop allows the suggestions list to be programmatically not rendered by pas
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		url: {
-			type: 'string'
-		},
-		text: {
-			type: 'string'
-		}
-	},
-
-	edit: function( props ) {
-		return wp.element.createElement( wp.blockEditor.URLInput, {
-			className: props.className,
-			value: props.attributes.url,
-			onChange: function( url, post ) {
-				props.setAttributes( { url: url, text: (post && post.title) || 'Click here' } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return wp.element.createElement( 'a', {
-			href: props.attributes.url,
-		}, props.attributes.text );
-	}
-} );
-```
-
-{% ESNext %}
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
@@ -229,5 +164,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 6ee6b96f61e0e1..560f5cd7d3d5db 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
 
 /**
@@ -38,6 +41,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
+					size="compact"
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -51,6 +55,7 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
+								__next40pxDefaultSize
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -59,11 +64,16 @@ class URLInputButton extends Component {
 							<URLInput
 								value={ url || '' }
 								onChange={ onChange }
-							/>
-							<Button
-								icon={ keyboardReturn }
-								label={ __( 'Submit' ) }
-								type="submit"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											size="small"
+											icon={ keyboardReturn }
+											label={ __( 'Submit' ) }
+											type="submit"
+										/>
+									</InputControlSuffixWrapper>
+								}
 							/>
 						</div>
 					</form>
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 3858f3983103a9..60cbf4d5e88099 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import scrollIntoView from 'dom-scroll-into-view';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
+	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
@@ -60,13 +60,13 @@ class URLInput extends Component {
 
 		this.suggestionNodes = [];
 
-		this.isUpdatingSuggestions = false;
+		this.suggestionsRequest = null;
 
 		this.state = {
 			suggestions: [],
 			showSuggestions: false,
+			suggestionsValue: null,
 			selectedSuggestion: null,
-
 			suggestionsListboxId: '',
 			suggestionOptionIdPrefix: '',
 		};
@@ -82,29 +82,17 @@ class URLInput extends Component {
 		if (
 			showSuggestions &&
 			selectedSuggestion !== null &&
-			this.suggestionNodes[ selectedSuggestion ] &&
-			! this.scrollingIntoView
+			this.suggestionNodes[ selectedSuggestion ]
 		) {
-			this.scrollingIntoView = true;
-			scrollIntoView(
-				this.suggestionNodes[ selectedSuggestion ],
-				this.autocompleteRef.current,
-				{
-					onlyScrollIfNeeded: true,
-				}
-			);
-
-			this.props.setTimeout( () => {
-				this.scrollingIntoView = false;
-			}, 100 );
+			this.suggestionNodes[ selectedSuggestion ].scrollIntoView( {
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
 		}
 
 		// Update suggestions when the value changes.
-		if (
-			prevProps.value !== value &&
-			! this.props.disableSuggestions &&
-			! this.isUpdatingSuggestions
-		) {
+		if ( prevProps.value !== value && ! this.props.disableSuggestions ) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
 				this.updateSuggestions( value );
@@ -123,7 +111,7 @@ class URLInput extends Component {
 
 	componentWillUnmount() {
 		this.suggestionsRequest?.cancel?.();
-		delete this.suggestionsRequest;
+		this.suggestionsRequest = null;
 	}
 
 	bindSuggestionNode( index ) {
@@ -133,14 +121,10 @@ class URLInput extends Component {
 	}
 
 	shouldShowInitialSuggestions() {
-		const { suggestions } = this.state;
 		const { __experimentalShowInitialSuggestions = false, value } =
 			this.props;
 		return (
-			! this.isUpdatingSuggestions &&
-			__experimentalShowInitialSuggestions &&
-			! ( value && value.length ) &&
-			! ( suggestions && suggestions.length )
+			__experimentalShowInitialSuggestions && ! ( value && value.length )
 		);
 	}
 
@@ -170,8 +154,13 @@ class URLInput extends Component {
 			! isInitialSuggestions &&
 			( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) )
 		) {
+			this.suggestionsRequest?.cancel?.();
+			this.suggestionsRequest = null;
+
 			this.setState( {
+				suggestions: [],
 				showSuggestions: false,
+				suggestionsValue: value,
 				selectedSuggestion: null,
 				loading: false,
 			} );
@@ -179,8 +168,6 @@ class URLInput extends Component {
 			return;
 		}
 
-		this.isUpdatingSuggestions = true;
-
 		this.setState( {
 			selectedSuggestion: null,
 			loading: true,
@@ -201,6 +188,7 @@ class URLInput extends Component {
 
 				this.setState( {
 					suggestions,
+					suggestionsValue: value,
 					loading: false,
 					showSuggestions: !! suggestions.length,
 				} );
@@ -208,7 +196,7 @@ class URLInput extends Component {
 				if ( !! suggestions.length ) {
 					this.props.debouncedSpeak(
 						sprintf(
-							/* translators: %s: number of results. */
+							/* translators: %d: number of results. */
 							_n(
 								'%d result found, use up and down arrow keys to navigate.',
 								'%d results found, use up and down arrow keys to navigate.',
@@ -224,14 +212,21 @@ class URLInput extends Component {
 						'assertive'
 					);
 				}
-				this.isUpdatingSuggestions = false;
 			} )
 			.catch( () => {
+				if ( this.suggestionsRequest !== request ) {
+					return;
+				}
+
+				this.setState( {
+					loading: false,
+				} );
+			} )
+			.finally( () => {
+				// If this is the current promise then reset the reference
+				// to allow for checking if a new request is made.
 				if ( this.suggestionsRequest === request ) {
-					this.setState( {
-						loading: false,
-					} );
-					this.isUpdatingSuggestions = false;
+					this.suggestionsRequest = null;
 				}
 			} );
 
@@ -240,13 +235,8 @@ class URLInput extends Component {
 		this.suggestionsRequest = request;
 	}
 
-	onChange( event ) {
-		const inputValue = event.target.value;
-
-		this.props.onChange( inputValue );
-		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue );
-		}
+	onChange( newValue ) {
+		this.props.onChange( newValue );
 	}
 
 	onFocus() {
@@ -255,11 +245,12 @@ class URLInput extends Component {
 
 		// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value
 		// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)
+		// or there is already a request in progress.
 		if (
 			value &&
 			! disableSuggestions &&
-			! this.isUpdatingSuggestions &&
-			! ( suggestions && suggestions.length )
+			! ( suggestions && suggestions.length ) &&
+			this.suggestionsRequest === null
 		) {
 			// Ensure the suggestions are updated with the current input value.
 			this.updateSuggestions( value );
@@ -267,6 +258,7 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
+		this.props.onKeyDown?.( event );
 		const { showSuggestions, selectedSuggestion, suggestions, loading } =
 			this.state;
 
@@ -309,11 +301,10 @@ class URLInput extends Component {
 
 				// Submitting while loading should trigger onSubmit.
 				case ENTER: {
-					event.preventDefault();
 					if ( this.props.onSubmit ) {
+						event.preventDefault();
 						this.props.onSubmit( null, event );
 					}
-
 					break;
 				}
 			}
@@ -432,6 +423,7 @@ class URLInput extends Component {
 			placeholder = __( 'Paste URL or type to search' ),
 			__experimentalRenderControl: renderControl,
 			value = '',
+			hideLabelFromVision = false,
 		} = this.props;
 
 		const {
@@ -447,16 +439,16 @@ class URLInput extends Component {
 		const controlProps = {
 			id: inputId, // Passes attribute to label for the for attribute
 			label,
-			className: classnames( 'block-editor-url-input', className, {
+			className: clsx( 'block-editor-url-input', className, {
 				'is-full-width': isFullWidth,
 			} ),
+			hideLabelFromVision,
 		};
 
 		const inputProps = {
 			id: inputId,
 			value,
 			required: true,
-			className: 'block-editor-url-input__input',
 			type: 'text',
 			onChange: this.onChange,
 			onFocus: this.onFocus,
@@ -466,12 +458,13 @@ class URLInput extends Component {
 			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
-			'aria-controls': suggestionsListboxId,
+			'aria-owns': suggestionsListboxId,
 			'aria-activedescendant':
 				selectedSuggestion !== null
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
 					: undefined,
 			ref: this.inputRef,
+			suffix: this.props.suffix,
 		};
 
 		if ( renderControl ) {
@@ -479,8 +472,8 @@ class URLInput extends Component {
 		}
 
 		return (
-			<BaseControl { ...controlProps }>
-				<input { ...inputProps } />
+			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
+				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);
@@ -490,19 +483,22 @@ class URLInput extends Component {
 		const {
 			className,
 			__experimentalRenderSuggestions: renderSuggestions,
-			value = '',
-			__experimentalShowInitialSuggestions = false,
 		} = this.props;
 
 		const {
 			showSuggestions,
 			suggestions,
+			suggestionsValue,
 			selectedSuggestion,
 			suggestionsListboxId,
 			suggestionOptionIdPrefix,
 			loading,
 		} = this.state;
 
+		if ( ! showSuggestions || suggestions.length === 0 ) {
+			return null;
+		}
+
 		const suggestionsListProps = {
 			id: suggestionsListboxId,
 			ref: this.autocompleteRef,
@@ -515,15 +511,12 @@ class URLInput extends Component {
 				tabIndex: '-1',
 				id: `${ suggestionOptionIdPrefix }-${ index }`,
 				ref: this.bindSuggestionNode( index ),
-				'aria-selected': index === selectedSuggestion,
+				'aria-selected':
+					index === selectedSuggestion ? true : undefined,
 			};
 		};
 
-		if (
-			isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
+		if ( isFunction( renderSuggestions ) ) {
 			return renderSuggestions( {
 				suggestions,
 				selectedSuggestion,
@@ -531,52 +524,38 @@ class URLInput extends Component {
 				buildSuggestionItemProps,
 				isLoading: loading,
 				handleSuggestionClick: this.handleOnClick,
-				isInitialSuggestions:
-					__experimentalShowInitialSuggestions &&
-					! ( value && value.length ),
+				isInitialSuggestions: ! suggestionsValue?.length,
+				currentInputValue: suggestionsValue,
 			} );
 		}
 
-		if (
-			! isFunction( renderSuggestions ) &&
-			showSuggestions &&
-			!! suggestions.length
-		) {
-			return (
-				<Popover placement="bottom" focusOnMount={ false }>
-					<div
-						{ ...suggestionsListProps }
-						className={ classnames(
-							'block-editor-url-input__suggestions',
-							`${ className }__suggestions`
-						) }
-					>
-						{ suggestions.map( ( suggestion, index ) => (
-							<Button
-								{ ...buildSuggestionItemProps(
-									suggestion,
-									index
-								) }
-								key={ suggestion.id }
-								className={ classnames(
-									'block-editor-url-input__suggestion',
-									{
-										'is-selected':
-											index === selectedSuggestion,
-									}
-								) }
-								onClick={ () =>
-									this.handleOnClick( suggestion )
+		return (
+			<Popover placement="bottom" focusOnMount={ false }>
+				<div
+					{ ...suggestionsListProps }
+					className={ clsx( 'block-editor-url-input__suggestions', {
+						[ `${ className }__suggestions` ]: className,
+					} ) }
+				>
+					{ suggestions.map( ( suggestion, index ) => (
+						<Button
+							__next40pxDefaultSize
+							{ ...buildSuggestionItemProps( suggestion, index ) }
+							key={ suggestion.id }
+							className={ clsx(
+								'block-editor-url-input__suggestion',
+								{
+									'is-selected': index === selectedSuggestion,
 								}
-							>
-								{ suggestion.title }
-							</Button>
-						) ) }
-					</div>
-				</Popover>
-			);
-		}
-		return null;
+							) }
+							onClick={ () => this.handleOnClick( suggestion ) }
+						>
+							{ suggestion.title }
+						</Button>
+					) ) }
+				</div>
+			</Popover>
+		);
 	}
 }
 
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 214866ccbab183..ef37566f8e34e0 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -9,35 +9,14 @@ $input-size: 300px;
 	position: relative;
 	padding: 1px;
 
-	input[type="text"] {
-		width: 100%;
-		@include break-small() {
-			width: $input-size;
-		}
-		padding: $input-padding;
-		border: none;
-		border-radius: 0;
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&::-ms-clear {
-			display: none;
-		}
+	@include break-small() {
+		min-width: $input-size;
+		width: auto;
 	}
 
 	&.is-full-width {
 		width: 100%;
 
-		.block-editor-url-input__input[type="text"] {
-			width: 100%;
-		}
-
 		&__suggestions {
 			width: 100%;
 		}
@@ -51,10 +30,6 @@ $input-size: 300px;
 	}
 }
 
-.block-editor-url-input__input[type="text"] {
-	@include input-control;
-}
-
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;
@@ -122,8 +97,8 @@ $input-size: 300px;
 }
 
 .block-editor-url-input__button-modal {
-	box-shadow: $shadow-popover;
-	border: 1px solid $gray-300;
+	box-shadow: $elevation-x-small;
+	border: $border-width solid $gray-300;
 	background: $white;
 }
 
@@ -134,10 +109,4 @@ $input-size: 300px;
 	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
-
-	.components-button {
-		flex-shrink: 0;
-		width: $button-size;
-		height: $button-size;
-	}
 }
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..d3652a2dc3822f 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -4,6 +4,11 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -55,9 +60,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should render a form when `Insert link` button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render( <URLInputButton /> );
 
 		// Click the button to insert a link.
@@ -74,9 +77,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should call `onChange` function once per each value change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onChangeMock = jest.fn();
 
 		render( <URLInputButton onChange={ onChangeMock } /> );
@@ -102,9 +103,7 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when the user clicks the `Close` button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <URLInputButton /> );
 
@@ -133,12 +132,15 @@ describe( 'URLInputButton', () => {
 	} );
 
 	it( 'should close the form when user submits it', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onChangeMock = jest.fn();
+		const user = userEvent.setup();
 
-		render( <URLInputButton onChange={ onChangeMock } /> );
+		function TestURLInputButton() {
+			// maintain state for the controlled component and process value changes
+			const [ url, setUrl ] = useState( '' );
+			return <URLInputButton url={ url } onChange={ setUrl } />;
+		}
+
+		render( <TestURLInputButton /> );
 
 		// Click the button to insert a link.
 		await user.click(
@@ -151,15 +153,15 @@ describe( 'URLInputButton', () => {
 		// Type something into the URL field.
 		await user.type( screen.getByRole( 'combobox' ), 'foo' );
 
+		const submitButton = screen.getByRole( 'button', {
+			name: 'Submit',
+		} );
+
+		expect( submitButton ).toBeInTheDocument();
+
 		// Submit the form.
-		await user.click(
-			screen.getByRole( 'button', {
-				name: 'Submit',
-			} )
-		);
+		await user.click( submitButton );
 
-		expect(
-			screen.queryByRole( 'button', { name: 'Submit' } )
-		).not.toBeInTheDocument();
+		expect( submitButton ).not.toBeInTheDocument();
 	} );
 } );
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..c68cf5e58b9530 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -1,24 +1,26 @@
-/**
- * External dependencies
- */
-import { find, map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useState, useCallback } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
 import {
 	ToolbarButton,
-	Button,
 	NavigableMenu,
+	Button,
 	MenuItem,
 	ToggleControl,
 	TextControl,
-	SVG,
-	Path,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { link as linkIcon, close } from '@wordpress/icons';
+import {
+	Icon,
+	link as linkIcon,
+	image,
+	page,
+	fullscreen,
+	linkOff,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,14 +33,6 @@ const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 
-const icon = (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M0,0h24v24H0V0z" fill="none" />
-		<Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" />
-		<Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" />
-	</SVG>
-);
-
 const ImageURLInputUI = ( {
 	linkDestination,
 	onChangeUrl,
@@ -49,21 +43,36 @@ const ImageURLInputUI = ( {
 	linkTarget,
 	linkClass,
 	rel,
+	showLightboxSetting,
+	lightboxEnabled,
+	onSetLightbox,
+	resetLightbox,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	const openLinkUI = useCallback( () => {
+	const openLinkUI = () => {
 		setIsOpen( true );
-	} );
+	};
 
 	const [ isEditingLink, setIsEditingLink ] = useState( false );
 	const [ urlInput, setUrlInput ] = useState( null );
 
 	const autocompleteRef = useRef( null );
+	const wrapperRef = useRef();
 
-	const startEditLink = useCallback( () => {
+	useEffect( () => {
+		if ( ! wrapperRef.current ) {
+			return;
+		}
+		const nextFocusTarget =
+			focus.focusable.find( wrapperRef.current )[ 0 ] ||
+			wrapperRef.current;
+		nextFocusTarget.focus();
+	}, [ isEditingLink, url, lightboxEnabled ] );
+
+	const startEditLink = () => {
 		if (
 			linkDestination === LINK_DESTINATION_MEDIA ||
 			linkDestination === LINK_DESTINATION_ATTACHMENT
@@ -71,17 +80,17 @@ const ImageURLInputUI = ( {
 			setUrlInput( '' );
 		}
 		setIsEditingLink( true );
-	} );
+	};
 
-	const stopEditLink = useCallback( () => {
+	const stopEditLink = () => {
 		setIsEditingLink( false );
-	} );
+	};
 
-	const closeLinkUI = useCallback( () => {
+	const closeLinkUI = () => {
 		setUrlInput( null );
 		stopEditLink();
 		setIsOpen( false );
-	} );
+	};
 
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -110,7 +119,7 @@ const ImageURLInputUI = ( {
 		};
 	};
 
-	const onFocusOutside = useCallback( () => {
+	const onFocusOutside = () => {
 		return ( event ) => {
 			// The autocomplete suggestions list renders in a separate popover (in a portal),
 			// so onFocusOutside fails to detect that a click on a suggestion occurred in the
@@ -127,9 +136,9 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			stopEditLink();
 		};
-	} );
+	};
 
-	const onSubmitLinkChange = useCallback( () => {
+	const onSubmitLinkChange = () => {
 		return ( event ) => {
 			if ( urlInput ) {
 				// It is possible the entered URL actually matches a named link destination.
@@ -142,41 +151,37 @@ const ImageURLInputUI = ( {
 				onChangeUrl( {
 					href: urlInput,
 					linkDestination: selectedDestination,
+					lightbox: { enabled: false },
 				} );
 			}
 			stopEditLink();
 			setUrlInput( null );
 			event.preventDefault();
 		};
-	} );
+	};
 
-	const onLinkRemove = useCallback( () => {
+	const onLinkRemove = () => {
 		onChangeUrl( {
 			linkDestination: LINK_DESTINATION_NONE,
 			href: '',
 		} );
-	} );
+	};
 
 	const getLinkDestinations = () => {
 		const linkDestinations = [
 			{
 				linkDestination: LINK_DESTINATION_MEDIA,
-				title: __( 'Media File' ),
+				title: __( 'Link to image file' ),
 				url: mediaType === 'image' ? mediaUrl : undefined,
-				icon,
+				icon: image,
 			},
 		];
 		if ( mediaType === 'image' && mediaLink ) {
 			linkDestinations.push( {
 				linkDestination: LINK_DESTINATION_ATTACHMENT,
-				title: __( 'Attachment Page' ),
+				title: __( 'Link to attachment page' ),
 				url: mediaType === 'image' ? mediaLink : undefined,
-				icon: (
-					<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-						<Path d="M0 0h24v24H0V0z" fill="none" />
-						<Path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z" />
-					</SVG>
-				),
+				icon: page,
 			} );
 		}
 		return linkDestinations;
@@ -189,7 +194,7 @@ const ImageURLInputUI = ( {
 			linkDestinationInput = LINK_DESTINATION_NONE;
 		} else {
 			linkDestinationInput = (
-				find( linkDestinations, ( destination ) => {
+				linkDestinations.find( ( destination ) => {
 					return destination.url === value;
 				} ) || { linkDestination: LINK_DESTINATION_CUSTOM }
 			).linkDestination;
@@ -214,55 +219,130 @@ const ImageURLInputUI = ( {
 	};
 
 	const advancedOptions = (
-		<>
+		<VStack spacing="3">
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
-				label={ __( 'Link CSS Class' ) }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
-		</>
+		</VStack>
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;
+	const hideLightboxPanel =
+		! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting );
+	const showLinkEditor = ! linkEditorValue && hideLightboxPanel;
 
 	const urlLabel = (
-		find( getLinkDestinations(), [ 'linkDestination', linkDestination ] ) ||
-		{}
+		getLinkDestinations().find(
+			( destination ) => destination.linkDestination === linkDestination
+		) || {}
 	).title;
 
+	const PopoverChildren = () => {
+		if (
+			lightboxEnabled &&
+			showLightboxSetting &&
+			! url &&
+			! isEditingLink
+		) {
+			return (
+				<div className="block-editor-url-popover__expand-on-click">
+					<Icon icon={ fullscreen } />
+					<div className="text">
+						<p>{ __( 'Expand on click' ) }</p>
+						<p className="description">
+							{ __( 'Scales the image with a lightbox effect' ) }
+						</p>
+					</div>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Disable expand on click' ) }
+						onClick={ () => {
+							onSetLightbox?.( false );
+						} }
+						size="compact"
+					/>
+				</div>
+			);
+		} else if ( ! url || isEditingLink ) {
+			return (
+				<URLPopover.LinkEditor
+					className="block-editor-format-toolbar__link-container-content"
+					value={ linkEditorValue }
+					onChangeInputValue={ setUrlInput }
+					onSubmit={ onSubmitLinkChange() }
+					autocompleteRef={ autocompleteRef }
+				/>
+			);
+		} else if ( url && ! isEditingLink ) {
+			return (
+				<>
+					<URLPopover.LinkViewer
+						className="block-editor-format-toolbar__link-container-content"
+						url={ url }
+						onEditLinkClick={ startEditLink }
+						urlLabel={ urlLabel }
+					/>
+					<Button
+						icon={ linkOff }
+						label={ __( 'Remove link' ) }
+						onClick={ () => {
+							onLinkRemove();
+							resetLightbox?.();
+						} }
+						size="compact"
+					/>
+				</>
+			);
+		}
+	};
+
 	return (
 		<>
 			<ToolbarButton
 				icon={ linkIcon }
 				className="components-toolbar__control"
-				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
+				label={ __( 'Link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
+				isActive={
+					!! url || ( lightboxEnabled && showLightboxSetting )
+				}
 			/>
 			{ isOpen && (
 				<URLPopover
+					ref={ wrapperRef }
 					anchor={ popoverAnchor }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
-					renderSettings={ () => advancedOptions }
+					renderSettings={
+						hideLightboxPanel ? () => advancedOptions : null
+					}
 					additionalControls={
-						! linkEditorValue && (
+						showLinkEditor && (
 							<NavigableMenu>
-								{ map( getLinkDestinations(), ( link ) => (
+								{ getLinkDestinations().map( ( link ) => (
 									<MenuItem
 										key={ link.linkDestination }
 										icon={ link.icon }
+										iconPosition="left"
 										onClick={ () => {
 											setUrlInput( null );
 											onSetHref( link.url );
@@ -272,34 +352,35 @@ const ImageURLInputUI = ( {
 										{ link.title }
 									</MenuItem>
 								) ) }
+								{ showLightboxSetting && (
+									<MenuItem
+										key="expand-on-click"
+										className="block-editor-url-popover__expand-on-click"
+										icon={ fullscreen }
+										info={ __(
+											'Scale the image with a lightbox effect.'
+										) }
+										iconPosition="left"
+										onClick={ () => {
+											setUrlInput( null );
+											onChangeUrl( {
+												linkDestination:
+													LINK_DESTINATION_NONE,
+												href: '',
+											} );
+											onSetLightbox?.( true );
+											stopEditLink();
+										} }
+									>
+										{ __( 'Expand on click' ) }
+									</MenuItem>
+								) }
 							</NavigableMenu>
 						)
 					}
+					offset={ 13 }
 				>
-					{ ( ! url || isEditingLink ) && (
-						<URLPopover.LinkEditor
-							className="block-editor-format-toolbar__link-container-content"
-							value={ linkEditorValue }
-							onChangeInputValue={ setUrlInput }
-							onSubmit={ onSubmitLinkChange() }
-							autocompleteRef={ autocompleteRef }
-						/>
-					) }
-					{ url && ! isEditingLink && (
-						<>
-							<URLPopover.LinkViewer
-								className="block-editor-format-toolbar__link-container-content"
-								url={ url }
-								onEditLinkClick={ startEditLink }
-								urlLabel={ urlLabel }
-							/>
-							<Button
-								icon={ close }
-								label={ __( 'Remove link' ) }
-								onClick={ onLinkRemove }
-							/>
-						</>
-					) }
+					{ PopoverChildren() }
 				</URLPopover>
 			) }
 		</>
diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js
index 98b22e86f6b0bd..db71d8127e7a48 100644
--- a/packages/block-editor/src/components/url-popover/index.js
+++ b/packages/block-editor/src/components/url-popover/index.js
@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 import {
 	Button,
 	Popover,
-	__experimentalPopoverPositionToPlacement as positionToPlacement,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,83 +16,100 @@ import deprecated from '@wordpress/deprecated';
  */
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
+import { unlock } from '../../lock-unlock';
+
+const { __experimentalPopoverLegacyPositionToPlacement } = unlock(
+	componentsPrivateApis
+);
 
 const DEFAULT_PLACEMENT = 'bottom';
 
-function URLPopover( {
-	additionalControls,
-	children,
-	renderSettings,
-	// The DEFAULT_PLACEMENT value is assigned inside the function's body
-	placement,
-	focusOnMount = 'firstElement',
-	// Deprecated
-	position,
-	// Rest
-	...popoverProps
-} ) {
-	if ( position !== undefined ) {
-		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
-			since: '6.2',
-			alternative: '`placement` prop',
-		} );
-	}
+const URLPopover = forwardRef(
+	(
+		{
+			additionalControls,
+			children,
+			renderSettings,
+			// The DEFAULT_PLACEMENT value is assigned inside the function's body
+			placement,
+			focusOnMount = 'firstElement',
+			// Deprecated
+			position,
+			// Rest
+			...popoverProps
+		},
+		ref
+	) => {
+		if ( position !== undefined ) {
+			deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+				since: '6.2',
+				alternative: '`placement` prop',
+			} );
+		}
 
-	// Compute popover's placement:
-	// - give priority to `placement` prop, if defined
-	// - otherwise, compute it from the legacy `position` prop (if defined)
-	// - finally, fallback to the DEFAULT_PLACEMENT.
-	let computedPlacement;
-	if ( placement !== undefined ) {
-		computedPlacement = placement;
-	} else if ( position !== undefined ) {
-		computedPlacement = positionToPlacement( position );
-	}
-	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+		// Compute popover's placement:
+		// - give priority to `placement` prop, if defined
+		// - otherwise, compute it from the legacy `position` prop (if defined)
+		// - finally, fallback to the DEFAULT_PLACEMENT.
+		let computedPlacement;
+		if ( placement !== undefined ) {
+			computedPlacement = placement;
+		} else if ( position !== undefined ) {
+			computedPlacement =
+				__experimentalPopoverLegacyPositionToPlacement( position );
+		}
+		computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
 
-	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
+		const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
-	const showSettings = !! renderSettings && isSettingsExpanded;
+		const showSettings = !! renderSettings && isSettingsExpanded;
 
-	const toggleSettingsVisibility = () => {
-		setIsSettingsExpanded( ! isSettingsExpanded );
-	};
+		const toggleSettingsVisibility = () => {
+			setIsSettingsExpanded( ! isSettingsExpanded );
+		};
 
-	return (
-		<Popover
-			className="block-editor-url-popover"
-			focusOnMount={ focusOnMount }
-			placement={ computedPlacement }
-			shift
-			{ ...popoverProps }
-		>
-			<div className="block-editor-url-popover__input-container">
-				<div className="block-editor-url-popover__row">
-					{ children }
-					{ !! renderSettings && (
-						<Button
-							className="block-editor-url-popover__settings-toggle"
-							icon={ chevronDown }
-							label={ __( 'Link settings' ) }
-							onClick={ toggleSettingsVisibility }
-							aria-expanded={ isSettingsExpanded }
-						/>
-					) }
+		return (
+			<Popover
+				ref={ ref }
+				role="dialog"
+				aria-modal="true"
+				aria-label={ __( 'Edit URL' ) }
+				className="block-editor-url-popover"
+				focusOnMount={ focusOnMount }
+				placement={ computedPlacement }
+				shift
+				variant="toolbar"
+				{ ...popoverProps }
+			>
+				<div className="block-editor-url-popover__input-container">
+					<div className="block-editor-url-popover__row">
+						{ children }
+						{ !! renderSettings && (
+							<Button
+								className="block-editor-url-popover__settings-toggle"
+								icon={ chevronDown }
+								label={ __( 'Link settings' ) }
+								onClick={ toggleSettingsVisibility }
+								aria-expanded={ isSettingsExpanded }
+								size="compact"
+							/>
+						) }
+					</div>
 				</div>
 				{ showSettings && (
-					<div className="block-editor-url-popover__row block-editor-url-popover__settings">
+					<div className="block-editor-url-popover__settings">
 						{ renderSettings() }
 					</div>
 				) }
-			</div>
-			{ additionalControls && ! showSettings && (
-				<div className="block-editor-url-popover__additional-controls">
-					{ additionalControls }
-				</div>
-			) }
-		</Popover>
-	);
-}
+				{ additionalControls && ! showSettings && (
+					<div className="block-editor-url-popover__additional-controls">
+						{ additionalControls }
+					</div>
+				) }
+			</Popover>
+		);
+	}
+);
 
 URLPopover.LinkEditor = LinkEditor;
 
diff --git a/packages/block-editor/src/components/url-popover/link-editor.js b/packages/block-editor/src/components/url-popover/link-editor.js
index cf783b6875b0a9..e7d39eed764b84 100644
--- a/packages/block-editor/src/components/url-popover/link-editor.js
+++ b/packages/block-editor/src/components/url-popover/link-editor.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,7 +24,7 @@ export default function LinkEditor( {
 } ) {
 	return (
 		<form
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-editor',
 				className
 			) }
@@ -39,6 +39,7 @@ export default function LinkEditor( {
 				icon={ keyboardReturn }
 				label={ __( 'Apply' ) }
 				type="submit"
+				size="compact"
 			/>
 		</form>
 	);
diff --git a/packages/block-editor/src/components/url-popover/link-viewer-url.js b/packages/block-editor/src/components/url-popover/link-viewer-url.js
index 5cf710f2030097..c465cd5ad50ebe 100644
--- a/packages/block-editor/src/components/url-popover/link-viewer-url.js
+++ b/packages/block-editor/src/components/url-popover/link-viewer-url.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,7 +10,7 @@ import { ExternalLink } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 export default function LinkViewerURL( { url, urlLabel, className } ) {
-	const linkClassName = classnames(
+	const linkClassName = clsx(
 		className,
 		'block-editor-url-popover__link-viewer-url'
 	);
diff --git a/packages/block-editor/src/components/url-popover/link-viewer.js b/packages/block-editor/src/components/url-popover/link-viewer.js
index d34c9baa377340..2b3249b7ba0aac 100644
--- a/packages/block-editor/src/components/url-popover/link-viewer.js
+++ b/packages/block-editor/src/components/url-popover/link-viewer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function LinkViewer( {
 } ) {
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'block-editor-url-popover__link-viewer',
 				className
 			) }
@@ -41,6 +41,7 @@ export default function LinkViewer( {
 					icon={ edit }
 					label={ __( 'Edit' ) }
 					onClick={ onEditLinkClick }
+					size="compact"
 				/>
 			) }
 		</div>
diff --git a/packages/block-editor/src/components/url-popover/stories/index.js b/packages/block-editor/src/components/url-popover/stories/index.js
deleted file mode 100644
index cd07f94ec4bbb1..00000000000000
--- a/packages/block-editor/src/components/url-popover/stories/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button, ToggleControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { keyboardReturn } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import URLPopover from '../';
-
-export default { title: 'BlockEditor/URLPopover' };
-
-const TestURLPopover = () => {
-	const [ isVisible, setVisiblility ] = useState( false );
-	const [ url, setUrl ] = useState( '' );
-
-	const close = () => setVisiblility( false );
-	const setTarget = () => {};
-
-	return (
-		<>
-			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
-			{ isVisible && (
-				<URLPopover
-					onClose={ close }
-					renderSettings={ () => (
-						<ToggleControl
-							label={ __( 'Open in new tab' ) }
-							onChange={ setTarget }
-						/>
-					) }
-				>
-					<form onSubmit={ close }>
-						<input type="url" value={ url } onChange={ setUrl } />
-						<Button
-							icon={ keyboardReturn }
-							label={ __( 'Apply' ) }
-							type="submit"
-						/>
-					</form>
-				</URLPopover>
-			) }
-		</>
-	);
-};
-
-export const _default = () => {
-	return <TestURLPopover />;
-};
diff --git a/packages/block-editor/src/components/url-popover/stories/index.story.js b/packages/block-editor/src/components/url-popover/stories/index.story.js
new file mode 100644
index 00000000000000..ceed23eed6b841
--- /dev/null
+++ b/packages/block-editor/src/components/url-popover/stories/index.story.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, ToggleControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { keyboardReturn } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import URLPopover from '../';
+
+export default { title: 'BlockEditor/URLPopover' };
+
+const TestURLPopover = () => {
+	const [ isVisible, setVisiblility ] = useState( false );
+	const [ url, setUrl ] = useState( '' );
+
+	const close = () => setVisiblility( false );
+	const setTarget = () => {};
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				onClick={ () => setVisiblility( true ) }
+			>
+				Edit URL
+			</Button>
+			{ isVisible && (
+				<URLPopover
+					onClose={ close }
+					renderSettings={ () => (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ setTarget }
+						/>
+					) }
+				>
+					<form onSubmit={ close }>
+						<input type="url" value={ url } onChange={ setUrl } />
+						<Button
+							__next40pxDefaultSize
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</form>
+				</URLPopover>
+			) }
+		</>
+	);
+};
+
+export const _default = () => {
+	return <TestURLPopover />;
+};
diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
index 2ef1009019e4ed..8c9d867071017d 100644
--- a/packages/block-editor/src/components/url-popover/style.scss
+++ b/packages/block-editor/src/components/url-popover/style.scss
@@ -1,90 +1,93 @@
 .block-editor-url-popover__additional-controls {
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
+	padding: $grid-unit-10 $grid-unit-10;
 }
 
-.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
-	box-shadow: none;
-}
-
-.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
-	padding-left: $grid-unit-15;
+.block-editor-url-popover__input-container {
+	padding: $grid-unit-10;
 }
 
 .block-editor-url-popover__row {
 	display: flex;
+	gap: $grid-unit-05;
+	align-items: center;
 }
 
 // Any children of the popover-row that are not the settings-toggle
 // should take up as much space as possible.
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
 	flex-grow: 1;
+	gap: $grid-unit-10;
 }
 
-// Mimic toolbar component styles for the icons in this popover.
-.block-editor-url-popover .components-button.has-icon {
-	padding: 3px;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+	padding-left: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	height: auto;
+	text-align: left;
 
 	> svg {
-		padding: 5px;
-		border-radius: $radius-block-ui;
-		height: 30px;
-		width: 30px;
-	}
-
-	&:not(:disabled):focus {
-		box-shadow: none;
-
-		> svg {
-			@include block-toolbar-button-style__focus();
-		}
+		margin-right: $grid-unit-10;
 	}
 }
 
 .block-editor-url-popover__settings-toggle {
 	flex-shrink: 0;
 
-	// Add a left divider to the toggle button.
-	border-radius: 0;
-	border-left: $border-width solid $gray-300;
-	margin-left: 1px;
-
 	&[aria-expanded="true"] .dashicon {
 		transform: rotate(180deg);
 	}
 }
-.block-editor-url-popover__input-container {
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
 
 .block-editor-url-popover__settings {
 	display: block;
 	padding: $grid-unit-20;
-	border-top: $border-width solid $gray-300;
+	border-top: $border-width solid $gray-900;
 }
 
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
-
-	.block-editor-url-input .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {
-	margin: $grid-unit-10 - $border-width;
+	display: flex;
+	align-items: center;
 	flex-grow: 1;
 	flex-shrink: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	margin-right: $grid-unit-10;
 	min-width: 150px;
-	max-width: 500px;
+	// Avoids the popover from growing too wide when the URL is long.
+	// See https://github.com/WordPress/gutenberg/issues/58599
+	max-width: $modal-min-width;
 
 	&.has-invalid-link {
 		color: $alert-red;
 	}
 }
+
+.block-editor-url-popover__expand-on-click {
+	display: flex;
+	align-items: center;
+	min-width: $modal-min-width;
+	white-space: nowrap;
+
+	.text {
+		flex-grow: 1;
+
+		p {
+			margin: 0;
+			// This ensures the text and help text is 32px, which with
+			// padding makes the popover same height as the block toolbar.
+			line-height: $grid-unit-20;
+
+			&.description {
+				color: $gray-700;
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}
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
deleted file mode 100644
index 3011c99d73f8d4..00000000000000
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,131 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`URLPopover matches the snapshot in its default state 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-            <button
-              aria-expanded="false"
-              aria-label="Link settings"
-              class="components-button block-editor-url-popover__settings-toggle 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="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0; left: 0px; top: 0px;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-        style="max-height: 0px; overflow: auto;"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-            <button
-              aria-expanded="true"
-              aria-label="Link settings"
-              class="components-button block-editor-url-popover__settings-toggle 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="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="block-editor-url-popover__row block-editor-url-popover__settings"
-          >
-            <div>
-              Settings
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`URLPopover matches the snapshot when there are no settings 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover"
-      style="position: absolute; opacity: 0; transform: translateY(-2em) scale(0) translateZ(0); transform-origin: 50% 0% 0;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
diff --git a/packages/block-editor/src/components/url-popover/test/index.js b/packages/block-editor/src/components/url-popover/test/index.js
deleted file mode 100644
index 1d84ad5643b827..00000000000000
--- a/packages/block-editor/src/components/url-popover/test/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import URLPopover from '../';
-
-describe( 'URLPopover', () => {
-	it( 'matches the snapshot in its default state', () => {
-		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'matches the snapshot when the settings are toggled open', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const { container } = render(
-			<URLPopover renderSettings={ () => <div>Settings</div> }>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Link settings' } )
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'matches the snapshot when there are no settings', () => {
-		const { container } = render(
-			<URLPopover>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js
new file mode 100644
index 00000000000000..ff919710a2284e
--- /dev/null
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -0,0 +1,309 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	hasBlockSupport,
+	store as blocksStore,
+	switchToBlockType,
+	isTemplatePart,
+} from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCommandLoader } from '@wordpress/commands';
+import {
+	copy,
+	trash as remove,
+	plus as add,
+	group,
+	ungroup,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { store as blockEditorStore } from '../../store';
+
+const getTransformCommands = () =>
+	function useTransformCommands() {
+		const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
+		const {
+			blocks,
+			clientIds,
+			canRemove,
+			possibleBlockTransformations,
+			invalidSelection,
+		} = useSelect( ( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockTransformItems,
+				getSelectedBlockClientIds,
+				getBlocksByClientId,
+				canRemoveBlocks,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlocks = getBlocksByClientId(
+				selectedBlockClientIds
+			);
+
+			// selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
+			// These nulls will cause fatal errors down the line.
+			// In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
+			// @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
+			if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+				return {
+					invalidSelection: true,
+				};
+			}
+
+			const rootClientId = getBlockRootClientId(
+				selectedBlockClientIds[ 0 ]
+			);
+			return {
+				blocks: selectedBlocks,
+				clientIds: selectedBlockClientIds,
+				possibleBlockTransformations: getBlockTransformItems(
+					selectedBlocks,
+					rootClientId
+				),
+				canRemove: canRemoveBlocks( selectedBlockClientIds ),
+				invalidSelection: false,
+			};
+		}, [] );
+
+		if ( invalidSelection ) {
+			return {
+				isLoading: false,
+				commands: [],
+			};
+		}
+		const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+		function selectForMultipleBlocks( insertedBlocks ) {
+			if ( insertedBlocks.length > 1 ) {
+				multiSelect(
+					insertedBlocks[ 0 ].clientId,
+					insertedBlocks[ insertedBlocks.length - 1 ].clientId
+				);
+			}
+		}
+
+		// Simple block tranformation based on the `Block Transforms` API.
+		function onBlockTransform( name ) {
+			const newBlocks = switchToBlockType( blocks, name );
+			replaceBlocks( clientIds, newBlocks );
+			selectForMultipleBlocks( newBlocks );
+		}
+
+		/**
+		 * The `isTemplate` check is a stopgap solution here.
+		 * Ideally, the Transforms API should handle this
+		 * by allowing to exclude blocks from wildcard transformations.
+		 */
+		const hasPossibleBlockTransformations =
+			!! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+		if (
+			! clientIds ||
+			clientIds.length < 1 ||
+			! hasPossibleBlockTransformations
+		) {
+			return { isLoading: false, commands: [] };
+		}
+
+		const commands = possibleBlockTransformations.map(
+			( transformation ) => {
+				const { name, title, icon } = transformation;
+				return {
+					name:
+						'core/block-editor/transform-to-' +
+						name.replace( '/', '-' ),
+					/* translators: %s: Block or block variation name. */
+					label: sprintf( __( 'Transform to %s' ), title ),
+					icon: <BlockIcon icon={ icon } />,
+					callback: ( { close } ) => {
+						onBlockTransform( name );
+						close();
+					},
+				};
+			}
+		);
+
+		return { isLoading: false, commands };
+	};
+
+const getQuickActionsCommands = () =>
+	function useQuickActionsCommands() {
+		const { clientIds, isUngroupable, isGroupable } = useSelect(
+			( select ) => {
+				const {
+					getSelectedBlockClientIds,
+					isUngroupable: _isUngroupable,
+					isGroupable: _isGroupable,
+				} = select( blockEditorStore );
+				const selectedBlockClientIds = getSelectedBlockClientIds();
+
+				return {
+					clientIds: selectedBlockClientIds,
+					isUngroupable: _isUngroupable(),
+					isGroupable: _isGroupable(),
+				};
+			},
+			[]
+		);
+		const {
+			canInsertBlockType,
+			getBlockRootClientId,
+			getBlocksByClientId,
+			canRemoveBlocks,
+		} = useSelect( blockEditorStore );
+		const { getDefaultBlockName, getGroupingBlockName } =
+			useSelect( blocksStore );
+
+		const blocks = getBlocksByClientId( clientIds );
+
+		const {
+			removeBlocks,
+			replaceBlocks,
+			duplicateBlocks,
+			insertAfterBlock,
+			insertBeforeBlock,
+		} = useDispatch( blockEditorStore );
+
+		const onGroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
+
+			const groupingBlockName = getGroupingBlockName();
+
+			// Activate the `transform` on `core/group` which does the conversion.
+			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+			if ( ! newBlocks ) {
+				return;
+			}
+			replaceBlocks( clientIds, newBlocks );
+		};
+		const onUngroup = () => {
+			if ( ! blocks.length ) {
+				return;
+			}
+
+			const innerBlocks = blocks[ 0 ].innerBlocks;
+
+			if ( ! innerBlocks.length ) {
+				return;
+			}
+
+			replaceBlocks( clientIds, innerBlocks );
+		};
+
+		if ( ! clientIds || clientIds.length < 1 ) {
+			return { isLoading: false, commands: [] };
+		}
+
+		const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+		const canInsertDefaultBlock = canInsertBlockType(
+			getDefaultBlockName(),
+			rootClientId
+		);
+		const canDuplicate = blocks.every( ( block ) => {
+			return (
+				!! block &&
+				hasBlockSupport( block.name, 'multiple', true ) &&
+				canInsertBlockType( block.name, rootClientId )
+			);
+		} );
+		const canRemove = canRemoveBlocks( clientIds );
+
+		const commands = [];
+
+		if ( canDuplicate ) {
+			commands.push( {
+				name: 'duplicate',
+				label: __( 'Duplicate' ),
+				callback: () => duplicateBlocks( clientIds, true ),
+				icon: copy,
+			} );
+		}
+
+		if ( canInsertDefaultBlock ) {
+			commands.push(
+				{
+					name: 'add-before',
+					label: __( 'Add before' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ 0 ]
+							: clientId;
+						insertBeforeBlock( clientId );
+					},
+					icon: add,
+				},
+				{
+					name: 'add-after',
+					label: __( 'Add after' ),
+					callback: () => {
+						const clientId = Array.isArray( clientIds )
+							? clientIds[ clientIds.length - 1 ]
+							: clientId;
+						insertAfterBlock( clientId );
+					},
+					icon: add,
+				}
+			);
+		}
+
+		if ( isGroupable ) {
+			commands.push( {
+				name: 'Group',
+				label: __( 'Group' ),
+				callback: onGroup,
+				icon: group,
+			} );
+		}
+
+		if ( isUngroupable ) {
+			commands.push( {
+				name: 'ungroup',
+				label: __( 'Ungroup' ),
+				callback: onUngroup,
+				icon: ungroup,
+			} );
+		}
+
+		if ( canRemove ) {
+			commands.push( {
+				name: 'remove',
+				label: __( 'Delete' ),
+				callback: () => removeBlocks( clientIds, true ),
+				icon: remove,
+			} );
+		}
+
+		return {
+			isLoading: false,
+			commands: commands.map( ( command ) => ( {
+				...command,
+				name: 'core/block-editor/action-' + command.name,
+				callback: ( { close } ) => {
+					command.callback();
+					close();
+				},
+			} ) ),
+		};
+	};
+
+export const useBlockCommands = () => {
+	useCommandLoader( {
+		name: 'core/block-editor/blockTransforms',
+		hook: getTransformCommands(),
+	} );
+	useCommandLoader( {
+		name: 'core/block-editor/blockQuickActions',
+		hook: getQuickActionsCommands(),
+		context: 'block-selection-edit',
+	} );
+};
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
index e9b1e8865a05cf..0da99d415f53f1 100644
--- a/packages/block-editor/src/components/use-block-display-information/index.js
+++ b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -6,7 +6,9 @@ import {
 	store as blocksStore,
 	isReusableBlock,
 	isTemplatePart,
+	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,8 +27,29 @@ import { store as blockEditorStore } from '../../store';
  * @property {WPIcon}  icon        Block type icon.
  * @property {string}  description A detailed block type description.
  * @property {string}  anchor      HTML anchor.
+ * @property {name}    name        A custom, human readable name for the block.
  */
 
+/**
+ * Get the display label for a block's position type.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {string} The position type label.
+ */
+function getPositionTypeLabel( attributes ) {
+	const positionType = attributes?.style?.position?.type;
+
+	if ( positionType === 'sticky' ) {
+		return __( 'Sticky' );
+	}
+
+	if ( positionType === 'fixed' ) {
+		return __( 'Fixed' );
+	}
+
+	return null;
+}
+
 /**
  * Hook used to try to find a matching block variation and return
  * the appropriate information for display reasons. In order to
@@ -34,7 +57,7 @@ import { store as blockEditorStore } from '../../store';
  * 1. Block's client id to extract it's current attributes.
  * 2. A block variation should have set `isActive` prop to a proper function.
  *
- * If for any reason a block variaton match cannot be found,
+ * If for any reason a block variation match cannot be found,
  * the returned information come from the Block Type.
  * If no blockType is found with the provided clientId, returns null.
  *
@@ -45,26 +68,40 @@ import { store as blockEditorStore } from '../../store';
 export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
-			if ( ! clientId ) return null;
+			if ( ! clientId ) {
+				return null;
+			}
 			const { getBlockName, getBlockAttributes } =
 				select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
-			if ( ! blockType ) return null;
+			if ( ! blockType ) {
+				return null;
+			}
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const syncedTitle = isSynced
+				? getBlockLabel( blockType, attributes )
+				: undefined;
+			const title = syncedTitle || blockType.title;
+			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
-				title: blockType.title,
+				title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
+				name: attributes?.metadata?.name,
 			};
-			if ( ! match ) return blockTypeInfo;
+			if ( ! match ) {
+				return blockTypeInfo;
+			}
 
 			return {
 				isSynced,
@@ -72,6 +109,9 @@ export default function useBlockDisplayInformation( clientId ) {
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
+				name: attributes?.metadata?.name,
 			};
 		},
 		[ clientId ]
diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
index d0700bd8d05abb..221e5ab74ebb2e 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -1,14 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
-import { isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import {
+	isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -17,8 +20,14 @@ import useOnBlockDrop from '../use-on-block-drop';
 import {
 	getDistanceToNearestEdge,
 	isPointContainedByRect,
+	isPointWithinTopAndBottomBoundariesOfRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const THRESHOLD_DISTANCE = 30;
+const MINIMUM_HEIGHT_FOR_THRESHOLD = 120;
+const MINIMUM_WIDTH_FOR_THRESHOLD = 120;
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -48,26 +57,95 @@ import { store as blockEditorStore } from '../../store';
  * @param {WPBlockData[]}          blocksData  The block data list.
  * @param {WPPoint}                position    The position of the item being dragged.
  * @param {WPBlockListOrientation} orientation The orientation of the block list.
+ * @param {Object}                 options     Additional options.
  * @return {[number, WPDropOperation]} The drop target position.
  */
 export function getDropTargetPosition(
 	blocksData,
 	position,
-	orientation = 'vertical'
+	orientation = 'vertical',
+	options = {}
 ) {
 	const allowedEdges =
 		orientation === 'horizontal'
 			? [ 'left', 'right' ]
 			: [ 'top', 'bottom' ];
 
-	const isRightToLeft = isRTL();
-
 	let nearestIndex = 0;
 	let insertPosition = 'before';
 	let minDistance = Infinity;
+	let targetBlockIndex = null;
+	let nearestSide = 'right';
+
+	const {
+		dropZoneElement,
+		parentBlockOrientation,
+		rootBlockIndex = 0,
+	} = options;
+
+	// Allow before/after when dragging over the top/bottom edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation !== 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'top',
+			'bottom',
+		] );
+
+		// If dragging over the top or bottom of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group or Cover.
+		if (
+			rect.height > MINIMUM_HEIGHT_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if ( edge === 'top' ) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if ( edge === 'bottom' ) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
+
+	const isRightToLeft = isRTL();
+
+	// Allow before/after when dragging over the left/right edges of the drop zone.
+	if ( dropZoneElement && parentBlockOrientation === 'horizontal' ) {
+		const rect = dropZoneElement.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge( position, rect, [
+			'left',
+			'right',
+		] );
+
+		// If dragging over the left or right of the drop zone, insert the block
+		// before or after the parent block. This only applies to blocks that use
+		// a drop zone element, typically container blocks such as Group.
+		if (
+			rect.width > MINIMUM_WIDTH_FOR_THRESHOLD &&
+			distance < THRESHOLD_DISTANCE
+		) {
+			if (
+				( isRightToLeft && edge === 'right' ) ||
+				( ! isRightToLeft && edge === 'left' )
+			) {
+				return [ rootBlockIndex, 'before' ];
+			}
+			if (
+				( isRightToLeft && edge === 'left' ) ||
+				( ! isRightToLeft && edge === 'right' )
+			) {
+				return [ rootBlockIndex + 1, 'after' ];
+			}
+		}
+	}
 
 	blocksData.forEach(
-		( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {
+		( {
+			isUnmodifiedDefaultBlock,
+			getBoundingClientRect,
+			blockIndex,
+			blockOrientation,
+		} ) => {
 			const rect = getBoundingClientRect();
 
 			let [ distance, edge ] = getDistanceToNearestEdge(
@@ -75,12 +153,35 @@ export function getDropTargetPosition(
 				rect,
 				allowedEdges
 			);
+			// If the the point is close to a side, prioritize that side.
+			const [ sideDistance, sideEdge ] = getDistanceToNearestEdge(
+				position,
+				rect,
+				[ 'left', 'right' ]
+			);
+
+			const isPointInsideRect = isPointContainedByRect( position, rect );
+
 			// Prioritize the element if the point is inside of an unmodified default block.
-			if (
-				isUnmodifiedDefaultBlock &&
-				isPointContainedByRect( position, rect )
-			) {
+			if ( isUnmodifiedDefaultBlock && isPointInsideRect ) {
 				distance = 0;
+			} else if (
+				orientation === 'vertical' &&
+				blockOrientation !== 'horizontal' &&
+				( ( isPointInsideRect && sideDistance < THRESHOLD_DISTANCE ) ||
+					( ! isPointInsideRect &&
+						isPointWithinTopAndBottomBoundariesOfRect(
+							position,
+							rect
+						) ) )
+			) {
+				/**
+				 * This condition should only apply when the layout is vertical (otherwise there's
+				 * no need to create a Row) and dropzones should only activate when the block is
+				 * either within and close to the sides of the target block or on its outer sides.
+				 */
+				targetBlockIndex = blockIndex;
+				nearestSide = sideEdge;
 			}
 
 			if ( distance < minDistance ) {
@@ -106,6 +207,10 @@ export function getDropTargetPosition(
 	const isAdjacentBlockUnmodifiedDefaultBlock =
 		!! blocksData[ adjacentIndex ]?.isUnmodifiedDefaultBlock;
 
+	// If the target index is set then group with the block at that index.
+	if ( targetBlockIndex !== null ) {
+		return [ targetBlockIndex, 'group', nearestSide ];
+	}
 	// If both blocks are not unmodified default blocks then just insert between them.
 	if (
 		! isNearestBlockUnmodifiedDefaultBlock &&
@@ -125,9 +230,71 @@ export function getDropTargetPosition(
 	];
 }
 
+/**
+ * Check if the dragged blocks can be dropped on the target.
+ * @param {Function} getBlockType
+ * @param {Object[]} allowedBlocks
+ * @param {string[]} draggedBlockNames
+ * @param {string}   targetBlockName
+ * @return {boolean} Whether the dragged blocks can be dropped on the target.
+ */
+export function isDropTargetValid(
+	getBlockType,
+	allowedBlocks,
+	draggedBlockNames,
+	targetBlockName
+) {
+	// At root level allowedBlocks is undefined and all blocks are allowed.
+	// Otherwise, check if all dragged blocks are allowed.
+	let areBlocksAllowed = true;
+	if ( allowedBlocks ) {
+		const allowedBlockNames = allowedBlocks?.map( ( { name } ) => name );
+
+		areBlocksAllowed = draggedBlockNames.every( ( name ) =>
+			allowedBlockNames?.includes( name )
+		);
+	}
+
+	// Work out if dragged blocks have an allowed parent and if so
+	// check target block matches the allowed parent.
+	const draggedBlockTypes = draggedBlockNames.map( ( name ) =>
+		getBlockType( name )
+	);
+	const targetMatchesDraggedBlockParents = draggedBlockTypes.every(
+		( block ) => {
+			const [ allowedParentName ] = block?.parent || [];
+			if ( ! allowedParentName ) {
+				return true;
+			}
+
+			return allowedParentName === targetBlockName;
+		}
+	);
+
+	return areBlocksAllowed && targetMatchesDraggedBlockParents;
+}
+
+/**
+ * Checks if the given element is an insertion point.
+ *
+ * @param {EventTarget|null} targetToCheck - The element to check.
+ * @param {Document}         ownerDocument - The owner document of the element.
+ * @return {boolean} True if the element is a insertion point, false otherwise.
+ */
+function isInsertionPoint( targetToCheck, ownerDocument ) {
+	const { defaultView } = ownerDocument;
+
+	return !! (
+		defaultView &&
+		targetToCheck instanceof defaultView.HTMLElement &&
+		targetToCheck.closest( '[data-is-insertion-point]' )
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
- * @property {string} rootClientId The root client id for the block list.
+ * @property {?HTMLElement} dropZoneElement Optional element to be used as the drop zone.
+ * @property {string}       rootClientId    The root client id for the block list.
  */
 
 /**
@@ -136,54 +303,121 @@ export function getDropTargetPosition(
  * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
  */
 export default function useBlockDropZone( {
+	dropZoneElement,
 	// An undefined value represents a top-level block. Default to an empty
 	// string for this so that `targetRootClientId` can be easily compared to
 	// values returned by the `getRootBlockClientId` selector, which also uses
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
+	parentClientId: parentBlockClientId = '',
+	isDisabled = false,
 } = {} ) {
+	const registry = useRegistry();
 	const [ dropTarget, setDropTarget ] = useState( {
 		index: null,
 		operation: 'insert',
 	} );
 
-	const isDisabled = useSelect(
-		( select ) => {
-			const {
-				getTemplateLock,
-				__unstableIsWithinBlockOverlay,
-				__unstableHasActiveBlockOverlayActive,
-			} = select( blockEditorStore );
-			const templateLock = getTemplateLock( targetRootClientId );
-			return (
-				[ 'all', 'contentOnly' ].some(
-					( lock ) => lock === templateLock
-				) ||
-				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
-				__unstableIsWithinBlockOverlay( targetRootClientId )
-			);
-		},
-		[ targetRootClientId ]
-	);
+	const { getBlockType, getBlockVariations, getGroupingBlockName } =
+		useSelect( blocksStore );
+	const {
+		canInsertBlockType,
+		getBlockListSettings,
+		getBlocks,
+		getBlockIndex,
+		getDraggedBlockClientIds,
+		getBlockNamesByClientId,
+		getAllowedBlocks,
+		isDragging,
+		isGroupable,
+		isZoomOut,
+		getSectionRootClientId,
+		getBlockParents,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		showInsertionPoint,
+		hideInsertionPoint,
+		startDragging,
+		stopDragging,
+	} = unlock( useDispatch( blockEditorStore ) );
 
-	const { getBlockListSettings, getBlocks, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } =
-		useDispatch( blockEditorStore );
-
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, dropTarget.index, {
-		operation: dropTarget.operation,
-	} );
+	const onBlockDrop = useOnBlockDrop(
+		dropTarget.operation === 'before' || dropTarget.operation === 'after'
+			? parentBlockClientId
+			: targetRootClientId,
+		dropTarget.index,
+		{
+			operation: dropTarget.operation,
+			nearestSide: dropTarget.nearestSide,
+		}
+	);
 	const throttled = useThrottle(
 		useCallback(
 			( event, ownerDocument ) => {
+				if ( ! isDragging() ) {
+					// When dragging from the desktop, no drag start event is fired.
+					// So, ensure that the drag state is set when the user drags over a drop zone.
+					startDragging();
+				}
+
+				const draggedBlockClientIds = getDraggedBlockClientIds();
+				const targetParents = [
+					targetRootClientId,
+					...getBlockParents( targetRootClientId, true ),
+				];
+
+				// Check if the target is within any of the dragged blocks.
+				const isTargetWithinDraggedBlocks = draggedBlockClientIds.some(
+					( clientId ) => targetParents.includes( clientId )
+				);
+
+				if ( isTargetWithinDraggedBlocks ) {
+					return;
+				}
+
+				const allowedBlocks = getAllowedBlocks( targetRootClientId );
+				const targetBlockName = getBlockNamesByClientId( [
+					targetRootClientId,
+				] )[ 0 ];
+
+				const draggedBlockNames = getBlockNamesByClientId(
+					draggedBlockClientIds
+				);
+				const isBlockDroppingAllowed = isDropTargetValid(
+					getBlockType,
+					allowedBlocks,
+					draggedBlockNames,
+					targetBlockName
+				);
+
+				if ( ! isBlockDroppingAllowed ) {
+					return;
+				}
+
+				const sectionRootClientId = getSectionRootClientId();
+
+				// In Zoom Out mode, if the target is not the section root provided by settings then
+				// do not allow dropping as the drop target is not within the root (that which is
+				// treated as "the content" by Zoom Out Mode).
+				if (
+					isZoomOut() &&
+					sectionRootClientId !== targetRootClientId
+				) {
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
 				if ( blocks.length === 0 ) {
-					setDropTarget( {
-						index: 0,
-						operation: 'insert',
+					registry.batch( () => {
+						setDropTarget( {
+							index: 0,
+							operation: 'insert',
+						} );
+						showInsertionPoint( targetRootClientId, 0, {
+							operation: 'insert',
+						} );
 					} );
 					return;
 				}
@@ -199,29 +433,124 @@ export default function useBlockDropZone( {
 								.getElementById( `block-${ clientId }` )
 								.getBoundingClientRect(),
 						blockIndex: getBlockIndex( clientId ),
+						blockOrientation:
+							getBlockListSettings( clientId )?.orientation,
 					};
 				} );
 
-				const [ targetIndex, operation ] = getDropTargetPosition(
+				const dropTargetPosition = getDropTargetPosition(
 					blocksData,
 					{ x: event.clientX, y: event.clientY },
-					getBlockListSettings( targetRootClientId )?.orientation
+					getBlockListSettings( targetRootClientId )?.orientation,
+					{
+						dropZoneElement,
+						parentBlockClientId,
+						parentBlockOrientation: parentBlockClientId
+							? getBlockListSettings( parentBlockClientId )
+									?.orientation
+							: undefined,
+						rootBlockIndex: getBlockIndex( targetRootClientId ),
+					}
 				);
 
-				setDropTarget( {
-					index: targetIndex,
-					operation,
-				} );
-				showInsertionPoint( targetRootClientId, targetIndex, {
-					operation,
+				const [ targetIndex, operation, nearestSide ] =
+					dropTargetPosition;
+
+				if ( isZoomOut() && operation !== 'insert' ) {
+					return;
+				}
+
+				if ( operation === 'group' ) {
+					const targetBlock = blocks[ targetIndex ];
+					const areAllImages = [
+						targetBlock.name,
+						...draggedBlockNames,
+					].every( ( name ) => name === 'core/image' );
+					const canInsertGalleryBlock = canInsertBlockType(
+						'core/gallery',
+						targetRootClientId
+					);
+					const areGroupableBlocks = isGroupable( [
+						targetBlock.clientId,
+						getDraggedBlockClientIds(),
+					] );
+					const groupBlockVariations = getBlockVariations(
+						getGroupingBlockName(),
+						'block'
+					);
+					const canInsertRow =
+						groupBlockVariations &&
+						groupBlockVariations.find(
+							( { name } ) => name === 'group-row'
+						);
+
+					// If the dragged blocks and the target block are all images,
+					// check if it is creatable either a Row variation or a Gallery block.
+					if (
+						areAllImages &&
+						! canInsertGalleryBlock &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+					// If the dragged blocks and the target block are not all images,
+					// check if it is creatable a Row variation.
+					if (
+						! areAllImages &&
+						( ! areGroupableBlocks || ! canInsertRow )
+					) {
+						return;
+					}
+				}
+
+				registry.batch( () => {
+					setDropTarget( {
+						index: targetIndex,
+						operation,
+						nearestSide,
+					} );
+
+					const insertionPointClientId = [
+						'before',
+						'after',
+					].includes( operation )
+						? parentBlockClientId
+						: targetRootClientId;
+
+					showInsertionPoint( insertionPointClientId, targetIndex, {
+						operation,
+						nearestSide,
+					} );
 				} );
 			},
-			[ targetRootClientId ]
+			[
+				isDragging,
+				getAllowedBlocks,
+				targetRootClientId,
+				getBlockNamesByClientId,
+				getDraggedBlockClientIds,
+				getBlockType,
+				getSectionRootClientId,
+				isZoomOut,
+				getBlocks,
+				getBlockListSettings,
+				dropZoneElement,
+				parentBlockClientId,
+				getBlockIndex,
+				registry,
+				startDragging,
+				showInsertionPoint,
+				canInsertBlockType,
+				isGroupable,
+				getBlockVariations,
+				getGroupingBlockName,
+			]
 		),
 		200
 	);
 
 	return useDropZone( {
+		dropZoneElement,
 		isDisabled,
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
@@ -230,12 +559,24 @@ export default function useBlockDropZone( {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},
-		onDragLeave() {
+		onDragLeave( event ) {
+			const { ownerDocument } = event.currentTarget;
+
+			// If the drag event is leaving the drop zone and entering an insertion point,
+			// do not hide the insertion point as it is conceptually within the dropzone.
+			if (
+				isInsertionPoint( event.relatedTarget, ownerDocument ) ||
+				isInsertionPoint( event.target, ownerDocument )
+			) {
+				return;
+			}
+
 			throttled.cancel();
 			hideInsertionPoint();
 		},
 		onDragEnd() {
 			throttled.cancel();
+			stopDragging();
 			hideInsertionPoint();
 		},
 	} );
diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.native.js b/packages/block-editor/src/components/use-block-drop-zone/index.native.js
index 5a64803aa4bc20..f40900ec7db970 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.native.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.native.js
@@ -1,14 +1,17 @@
 /**
  * External dependencies
  */
-import { useSharedValue } from 'react-native-reanimated';
+import {
+	runOnJS,
+	useDerivedValue,
+	useSharedValue,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { useThrottle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -18,6 +21,8 @@ import { useBlockListContext } from '../block-list/block-list-context';
 import { getDistanceToNearestEdge } from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 
+const UPDATE_TARGET_BLOCK_INDEX_THRESHOLD = 20; // In pixels
+
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 
 /**
@@ -111,6 +116,14 @@ export default function useBlockDropZone( {
 	rootClientId: targetRootClientId = '',
 } = {} ) {
 	const targetBlockIndex = useSharedValue( null );
+	const dragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
+	const prevDragPosition = {
+		x: useSharedValue( 0 ),
+		y: useSharedValue( 0 ),
+	};
 
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
 	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
@@ -118,43 +131,66 @@ export default function useBlockDropZone( {
 
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+		// We use the value of `blocksLayouts` as the dependency.
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;
 
 	const onBlockDrop = useOnBlockDrop();
 
-	const throttled = useThrottle(
-		useCallback(
-			( event ) => {
-				const sortedBlockLayouts = getSortedBlocksLayouts();
-
-				const targetIndex = getNearestBlockIndex(
-					sortedBlockLayouts,
-					{ x: event.x, y: event.y },
-					getBlockListSettings( targetRootClientId )?.orientation,
-					isRTL
-				);
-				if ( targetIndex !== null ) {
-					targetBlockIndex.value = targetIndex ?? 0;
-				}
-			},
-			[
-				getSortedBlocksLayouts,
-				getNearestBlockIndex,
-				getBlockListSettings,
-				targetBlockIndex,
-			]
-		),
-		200
+	const updateTargetBlockIndex = useCallback(
+		( event ) => {
+			const sortedBlockLayouts = getSortedBlocksLayouts();
+
+			const targetIndex = getNearestBlockIndex(
+				sortedBlockLayouts,
+				{ x: event.x, y: event.y },
+				getBlockListSettings( targetRootClientId )?.orientation,
+				isRTL
+			);
+			if ( targetIndex !== null ) {
+				targetBlockIndex.value = targetIndex ?? 0;
+			}
+		},
+		[
+			getSortedBlocksLayouts,
+			getBlockListSettings,
+			targetRootClientId,
+			isRTL,
+			targetBlockIndex,
+		]
 	);
 
+	useDerivedValue( () => {
+		const x = dragPosition.x.value;
+		const y = dragPosition.y.value;
+		const prevX = prevDragPosition.x.value;
+		const prevY = prevDragPosition.y.value;
+		// `updateTargetBlockIndex` performs expensive calculations, so we throttle
+		// the call using a offset threshold based on the dragging position.
+		if (
+			Math.abs( x - prevX ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD ||
+			Math.abs( y - prevY ) >= UPDATE_TARGET_BLOCK_INDEX_THRESHOLD
+		) {
+			runOnJS( updateTargetBlockIndex )( { x, y } );
+			prevDragPosition.x.value = x;
+			prevDragPosition.y.value = y;
+			return true;
+		}
+		return false;
+	} );
+
 	return {
-		onBlockDragOver( event ) {
-			throttled( event );
+		onBlockDragOver( { x, y } ) {
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
+		},
+		onBlockDragOverWorklet( { x, y } ) {
+			'worklet';
+			dragPosition.x.value = x;
+			dragPosition.y.value = y;
 		},
 		onBlockDragEnd() {
-			throttled.cancel();
 			targetBlockIndex.value = null;
 		},
 		onBlockDrop: ( event ) => {
diff --git a/packages/block-editor/src/components/use-block-drop-zone/test/index.js b/packages/block-editor/src/components/use-block-drop-zone/test/index.js
index f5560c1cfdf13a..e6614b3fafc133 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/test/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/test/index.js
@@ -22,13 +22,6 @@ const elementData = [
 		bottom: 900,
 		right: 400,
 	},
-	// Fourth block wraps to the next row/column.
-	{
-		top: 0,
-		left: 400,
-		bottom: 300,
-		right: 800,
-	},
 ];
 
 const mapElements =
@@ -73,7 +66,7 @@ describe( 'getDropTargetPosition', () => {
 		const orientation = 'vertical';
 
 		it( 'returns `0` when the position is nearest to the start of the first block', () => {
-			const position = { x: 0, y: 0 };
+			const position = { x: 32, y: 0 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -85,7 +78,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `1` when the position is nearest to the end of the first block', () => {
-			const position = { x: 0, y: 190 };
+			const position = { x: 32, y: 190 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -97,7 +90,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `1` when the position is nearest to the start of the second block', () => {
-			const position = { x: 0, y: 210 };
+			const position = { x: 32, y: 210 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -109,7 +102,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `2` when the position is nearest to the end of the second block', () => {
-			const position = { x: 0, y: 450 };
+			const position = { x: 32, y: 450 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -121,7 +114,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `2` when the position is nearest to the start of the third block', () => {
-			const position = { x: 0, y: 510 };
+			const position = { x: 32, y: 510 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -133,7 +126,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `3` when the position is nearest to the end of the third block', () => {
-			const position = { x: 0, y: 880 };
+			const position = { x: 32, y: 880 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -145,7 +138,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `3` when the position is past the end of the third block', () => {
-			const position = { x: 0, y: 920 };
+			const position = { x: 32, y: 920 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -155,9 +148,8 @@ describe( 'getDropTargetPosition', () => {
 
 			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
-
-		it( 'returns `4` when the position is nearest to the start of the fourth block', () => {
-			const position = { x: 401, y: 0 };
+		it( 'returns group with index 0 when position is close to the right of the first block', () => {
+			const position = { x: 372, y: 0 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -165,11 +157,10 @@ describe( 'getDropTargetPosition', () => {
 				orientation
 			);
 
-			expect( result ).toEqual( [ 3, 'insert' ] );
+			expect( result ).toEqual( [ 0, 'group', 'right' ] );
 		} );
-
-		it( 'returns `5` when the position is nearest to the end of the fourth block', () => {
-			const position = { x: 401, y: 300 };
+		it( 'returns group with index 1 when position is close to the left of the second block', () => {
+			const position = { x: 12, y: 212 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -177,7 +168,7 @@ describe( 'getDropTargetPosition', () => {
 				orientation
 			);
 
-			expect( result ).toEqual( [ 4, 'insert' ] );
+			expect( result ).toEqual( [ 1, 'group', 'left' ] );
 		} );
 	} );
 
@@ -267,30 +258,6 @@ describe( 'getDropTargetPosition', () => {
 
 			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
-
-		it( 'returns `3` when the position is nearest to the start of the last block', () => {
-			const position = { x: 0, y: 401 };
-
-			const result = getDropTargetPosition(
-				horizontalBlocksData,
-				position,
-				orientation
-			);
-
-			expect( result ).toEqual( [ 3, 'insert' ] );
-		} );
-
-		it( 'returns `4` when the position is nearest to the end of the last block', () => {
-			const position = { x: 300, y: 401 };
-
-			const result = getDropTargetPosition(
-				horizontalBlocksData,
-				position,
-				orientation
-			);
-
-			expect( result ).toEqual( [ 4, 'insert' ] );
-		} );
 	} );
 
 	describe( 'Unmodified default blocks', () => {
@@ -316,14 +283,18 @@ describe( 'getDropTargetPosition', () => {
 
 			// Dropping above the first block.
 			expect(
-				getDropTargetPosition( blocksData, { x: 0, y: 0 }, orientation )
+				getDropTargetPosition(
+					blocksData,
+					{ x: 32, y: 0 },
+					orientation
+				)
 			).toEqual( [ 0, 'replace' ] );
 
 			// Dropping on the top half of the first block.
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 20 },
+					{ x: 32, y: 20 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -332,7 +303,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 200 },
+					{ x: 32, y: 200 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -341,7 +312,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 211 },
+					{ x: 32, y: 211 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -350,7 +321,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 219 },
+					{ x: 32, y: 219 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -359,7 +330,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 230 },
+					{ x: 32, y: 230 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -368,7 +339,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 410 },
+					{ x: 32, y: 410 },
 					orientation
 				)
 			).toEqual( [ 2, 'insert' ] );
@@ -377,7 +348,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 421 },
+					{ x: 32, y: 421 },
 					orientation
 				)
 			).toEqual( [ 2, 'insert' ] );
@@ -410,7 +381,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 20 },
+					{ x: 32, y: 20 },
 					orientation
 				)
 			).toEqual( [ 0, 'insert' ] );
@@ -419,7 +390,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 200 },
+					{ x: 32, y: 200 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -428,7 +399,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 211 },
+					{ x: 32, y: 211 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -437,7 +408,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 219 },
+					{ x: 32, y: 219 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -446,7 +417,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 230 },
+					{ x: 32, y: 230 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -455,7 +426,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 410 },
+					{ x: 32, y: 410 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -464,7 +435,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 421 },
+					{ x: 32, y: 421 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
diff --git a/packages/block-editor/src/components/use-display-block-controls/index.js b/packages/block-editor/src/components/use-display-block-controls/index.js
deleted file mode 100644
index 605556f295b968..00000000000000
--- a/packages/block-editor/src/components/use-display-block-controls/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-import { store as blockEditorStore } from '../../store';
-
-export default function useDisplayBlockControls() {
-	const { isSelected, clientId, name } = useBlockEditContext();
-	return useSelect(
-		( select ) => {
-			if ( isSelected ) {
-				return true;
-			}
-
-			const {
-				getBlockName,
-				isFirstMultiSelectedBlock,
-				getMultiSelectedBlockClientIds,
-			} = select( blockEditorStore );
-
-			if ( isFirstMultiSelectedBlock( clientId ) ) {
-				return getMultiSelectedBlockClientIds().every(
-					( id ) => getBlockName( id ) === name
-				);
-			}
-
-			return false;
-		},
-		[ clientId, isSelected, name ]
-	);
-}
diff --git a/packages/block-editor/src/components/use-display-block-controls/index.native.js b/packages/block-editor/src/components/use-display-block-controls/index.native.js
deleted file mode 100644
index e8a198e1592e82..00000000000000
--- a/packages/block-editor/src/components/use-display-block-controls/index.native.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit/context';
-import { store as blockEditorStore } from '../../store';
-
-export default function useDisplayBlockControls() {
-	const { isSelected, clientId, name } = useBlockEditContext();
-	return useSelect(
-		( select ) => {
-			const { getBlockName, getBlockRootClientId } =
-				select( blockEditorStore );
-
-			const parentId = getBlockRootClientId( clientId );
-			const parentBlockName = getBlockName( parentId );
-
-			const hideControls = hasBlockSupport(
-				parentBlockName,
-				'__experimentalHideChildBlockControls',
-				false
-			);
-
-			if ( ! hideControls && isSelected ) {
-				return true;
-			}
-
-			return false;
-		},
-		[ clientId, isSelected, name ]
-	);
-}
diff --git a/packages/block-editor/src/components/use-flash-editable-blocks/index.js b/packages/block-editor/src/components/use-flash-editable-blocks/index.js
new file mode 100644
index 00000000000000..34386ea8eadf3b
--- /dev/null
+++ b/packages/block-editor/src/components/use-flash-editable-blocks/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function useFlashEditableBlocks( {
+	clientId = '',
+	isEnabled = true,
+} = {} ) {
+	const { getEnabledClientIdsTree } = unlock( useSelect( blockEditorStore ) );
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			const flashEditableBlocks = () => {
+				getEnabledClientIdsTree( clientId ).forEach(
+					( { clientId: id } ) => {
+						const block = element.querySelector(
+							`[data-block="${ id }"]`
+						);
+						if ( ! block ) {
+							return;
+						}
+						block.classList.remove( 'has-editable-outline' );
+						// Force reflow to trigger the animation.
+						// eslint-disable-next-line no-unused-expressions
+						block.offsetWidth;
+						block.classList.add( 'has-editable-outline' );
+					}
+				);
+			};
+
+			const handleClick = ( event ) => {
+				const shouldFlash =
+					event.target === element ||
+					event.target.classList.contains( 'is-root-container' );
+				if ( ! shouldFlash ) {
+					return;
+				}
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				event.preventDefault();
+				flashEditableBlocks();
+			};
+
+			element.addEventListener( 'click', handleClick );
+			return () => element.removeEventListener( 'click', handleClick );
+		},
+		[ isEnabled ]
+	);
+}
diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
index bf49a480bc6b44..b11710acd24334 100644
--- a/packages/block-editor/src/components/use-moving-animation/index.js
+++ b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -1,35 +1,32 @@
 /**
  * External dependencies
  */
-import { useSpring } from '@react-spring/web';
+import { Controller } from '@react-spring/web';
 
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	useLayoutEffect,
-	useReducer,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
-import { useReducedMotion } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 import { getScrollContainer } from '@wordpress/dom';
+import { useSelect } from '@wordpress/data';
 
 /**
- * Simple reducer used to increment a counter.
- *
- * @param {number} state Previous counter value.
- * @return {number} New state value.
+ * Internal dependencies
  */
-const counterReducer = ( state ) => state + 1;
+import { store as blockEditorStore } from '../../store';
 
-const getAbsolutePosition = ( element ) => {
+/**
+ * If the block count exceeds the threshold, we disable the reordering animation
+ * to avoid laginess.
+ */
+const BLOCK_ANIMATION_THRESHOLD = 200;
+
+function getAbsolutePosition( element ) {
 	return {
 		top: element.offsetTop,
 		left: element.offsetLeft,
 	};
-};
+}
 
 /**
  * Hook used to compute the styles required to move a div into a new position.
@@ -42,114 +39,136 @@ const getAbsolutePosition = ( element ) => {
  *  - It uses the "resetAnimation" flag to reset the animation
  *    from the beginning in order to animate to the new destination point.
  *
- * @param {Object}  $1                          Options
- * @param {boolean} $1.isSelected               Whether it's the current block or not.
- * @param {boolean} $1.adjustScrolling          Adjust the scroll position to the current block.
- * @param {boolean} $1.enableAnimation          Enable/Disable animation.
- * @param {*}       $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ * @param {string} $1.clientId
  */
-function useMovingAnimation( {
-	isSelected,
-	adjustScrolling,
-	enableAnimation,
-	triggerAnimationOnChange,
-} ) {
+function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 	const ref = useRef();
-	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
-	const [ triggeredAnimation, triggerAnimation ] = useReducer(
-		counterReducer,
-		0
-	);
-	const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
-	const [ transform, setTransform ] = useState( { x: 0, y: 0 } );
-	const previous = useMemo(
-		() => ( ref.current ? getAbsolutePosition( ref.current ) : null ),
+	const {
+		isTyping,
+		getGlobalBlockCount,
+		isBlockSelected,
+		isFirstMultiSelectedBlock,
+		isBlockMultiSelected,
+		isAncestorMultiSelected,
+		isDraggingBlocks,
+	} = useSelect( blockEditorStore );
+
+	// Whenever the trigger changes, we need to take a snapshot of the current
+	// position of the block to use it as a destination point for the animation.
+	const { previous, prevRect } = useMemo(
+		() => ( {
+			previous: ref.current && getAbsolutePosition( ref.current ),
+			prevRect: ref.current && ref.current.getBoundingClientRect(),
+		} ),
 		[ triggerAnimationOnChange ]
 	);
 
-	// Calculate the previous position of the block relative to the viewport and
-	// return a function to maintain that position by scrolling.
-	const preserveScrollPosition = useMemo( () => {
-		if ( ! adjustScrolling || ! ref.current ) {
-			return () => {};
+	useLayoutEffect( () => {
+		if ( ! previous || ! ref.current ) {
+			return;
 		}
 
 		const scrollContainer = getScrollContainer( ref.current );
+		const isSelected = isBlockSelected( clientId );
+		const adjustScrolling =
+			isSelected || isFirstMultiSelectedBlock( clientId );
+		const isDragging = isDraggingBlocks();
+
+		function preserveScrollPosition() {
+			// The user already scrolled when dragging blocks.
+			if ( isDragging ) {
+				return;
+			}
 
-		if ( ! scrollContainer ) {
-			return () => {};
-		}
-
-		const prevRect = ref.current.getBoundingClientRect();
-		return () => {
-			const blockRect = ref.current.getBoundingClientRect();
-			const diff = blockRect.top - prevRect.top;
+			if ( adjustScrolling && prevRect ) {
+				const blockRect = ref.current.getBoundingClientRect();
+				const diff = blockRect.top - prevRect.top;
 
-			if ( diff ) {
-				scrollContainer.scrollTop += diff;
+				if ( diff ) {
+					scrollContainer.scrollTop += diff;
+				}
 			}
-		};
-	}, [ triggerAnimationOnChange, adjustScrolling ] );
-
-	useLayoutEffect( () => {
-		if ( triggeredAnimation ) {
-			endAnimation();
-		}
-	}, [ triggeredAnimation ] );
-	useLayoutEffect( () => {
-		if ( ! previous ) {
-			return;
 		}
 
-		if ( prefersReducedMotion ) {
+		// We disable the animation if the user has a preference for reduced
+		// motion, if the user is typing (insertion by Enter), or if the block
+		// count exceeds the threshold (insertion caused all the blocks that
+		// follow to animate).
+		// To do: consider enableing the _moving_ animation even for large
+		// posts, while only disabling the _insertion_ animation?
+		const disableAnimation =
+			window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ||
+			isTyping() ||
+			getGlobalBlockCount() > BLOCK_ANIMATION_THRESHOLD;
+
+		if ( disableAnimation ) {
 			// If the animation is disabled and the scroll needs to be adjusted,
 			// just move directly to the final scroll position.
 			preserveScrollPosition();
-
 			return;
 		}
 
-		ref.current.style.transform = undefined;
-		const destination = getAbsolutePosition( ref.current );
+		const isPartOfSelection =
+			isSelected ||
+			isBlockMultiSelected( clientId ) ||
+			isAncestorMultiSelected( clientId );
 
-		triggerAnimation();
-		setTransform( {
-			x: Math.round( previous.left - destination.left ),
-			y: Math.round( previous.top - destination.top ),
-		} );
-	}, [ triggerAnimationOnChange ] );
-
-	function onChange( { value } ) {
-		if ( ! ref.current ) {
+		// The user already dragged the blocks to the new position, so don't
+		// animate the dragged blocks.
+		if ( isPartOfSelection && isDragging ) {
 			return;
 		}
-		let { x, y } = value;
-		x = Math.round( x );
-		y = Math.round( y );
-		const finishedMoving = x === 0 && y === 0;
-		ref.current.style.transformOrigin = 'center center';
-		ref.current.style.transform = finishedMoving
-			? undefined
-			: `translate3d(${ x }px,${ y }px,0)`;
-		ref.current.style.zIndex = isSelected ? '1' : '';
-
-		preserveScrollPosition();
-	}
-
-	useSpring( {
-		from: {
-			x: transform.x,
-			y: transform.y,
-		},
-		to: {
+
+		// Make sure the other blocks move under the selected block(s).
+		const zIndex = isPartOfSelection ? '1' : '';
+
+		const controller = new Controller( {
 			x: 0,
 			y: 0,
-		},
-		reset: triggeredAnimation !== finishedAnimation,
-		config: { mass: 5, tension: 2000, friction: 200 },
-		immediate: prefersReducedMotion,
-		onChange,
-	} );
+			config: { mass: 5, tension: 2000, friction: 200 },
+			onChange( { value } ) {
+				if ( ! ref.current ) {
+					return;
+				}
+				let { x, y } = value;
+				x = Math.round( x );
+				y = Math.round( y );
+				const finishedMoving = x === 0 && y === 0;
+				ref.current.style.transformOrigin = 'center center';
+				ref.current.style.transform = finishedMoving
+					? null // Set to `null` to explicitly remove the transform.
+					: `translate3d(${ x }px,${ y }px,0)`;
+				ref.current.style.zIndex = zIndex;
+				preserveScrollPosition();
+			},
+		} );
+
+		ref.current.style.transform = undefined;
+		const destination = getAbsolutePosition( ref.current );
+
+		const x = Math.round( previous.left - destination.left );
+		const y = Math.round( previous.top - destination.top );
+
+		controller.start( { x: 0, y: 0, from: { x, y } } );
+
+		return () => {
+			controller.stop();
+			controller.set( { x: 0, y: 0 } );
+		};
+	}, [
+		previous,
+		prevRect,
+		clientId,
+		isTyping,
+		getGlobalBlockCount,
+		isBlockSelected,
+		isFirstMultiSelectedBlock,
+		isBlockMultiSelected,
+		isAncestorMultiSelected,
+		isDraggingBlocks,
+	] );
 
 	return ref;
 }
diff --git a/packages/block-editor/src/components/use-on-block-drop/index.js b/packages/block-editor/src/components/use-on-block-drop/index.js
index 6b0a9300124493..75b9a44e166f5c 100644
--- a/packages/block-editor/src/components/use-on-block-drop/index.js
+++ b/packages/block-editor/src/components/use-on-block-drop/index.js
@@ -4,9 +4,11 @@
 import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
+	createBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
@@ -16,13 +18,13 @@ import { getFilesFromDataTransfer } from '@wordpress/dom';
  */
 import { store as blockEditorStore } from '../../store';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
 /** @typedef {import('./types').WPDropOperation} WPDropOperation */
 
 /**
  * Retrieve the data for a block drop event.
  *
- * @param {WPSyntheticEvent} event The drop event.
+ * @param {SyntheticEvent} event The drop event.
  *
  * @return {Object} An object with block drag and drop data.
  */
@@ -61,6 +63,8 @@ export function parseDropEvent( event ) {
  * @param {Function} moveBlocks                A function that moves blocks.
  * @param {Function} insertOrReplaceBlocks     A function that inserts or replaces blocks.
  * @param {Function} clearSelectedBlock        A function that clears block selection.
+ * @param {string}   operation                 The type of operation to perform on drop. Could be `insert` or `replace` or `group`.
+ * @param {Function} getBlock                  A function that returns a block given its client id.
  * @return {Function} The event handler for a block drop event.
  */
 export function onBlockDrop(
@@ -70,7 +74,9 @@ export function onBlockDrop(
 	getClientIdsOfDescendants,
 	moveBlocks,
 	insertOrReplaceBlocks,
-	clearSelectedBlock
+	clearSelectedBlock,
+	operation,
+	getBlock
 ) {
 	return ( event ) => {
 		const {
@@ -113,6 +119,21 @@ export function onBlockDrop(
 				return;
 			}
 
+			// If the user is dropping a block over another block, replace both blocks
+			// with a group block containing them
+			if ( operation === 'group' ) {
+				const blocksToInsert = sourceClientIds.map( ( clientId ) =>
+					getBlock( clientId )
+				);
+				insertOrReplaceBlocks(
+					blocksToInsert,
+					true,
+					null,
+					sourceClientIds
+				);
+				return;
+			}
+
 			const isAtSameLevel = sourceRootClientId === targetRootClientId;
 			const draggedBlockCount = sourceClientIds.length;
 
@@ -133,8 +154,7 @@ export function onBlockDrop(
  * A function that returns an event handler function for block-related file drop events.
  *
  * @param {string}   targetRootClientId    The root client id where the block(s) will be inserted.
- * @param {number}   targetBlockIndex      The index where the block(s) will be inserted.
- * @param {boolean}  hasUploadPermissions  Whether the user has upload permissions.
+ * @param {Function} getSettings           A function that gets the block editor settings.
  * @param {Function} updateBlockAttributes A function that updates a block's attributes.
  * @param {Function} canInsertBlockType    A function that returns checks whether a block type can be inserted.
  * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
@@ -143,14 +163,13 @@ export function onBlockDrop(
  */
 export function onFilesDrop(
 	targetRootClientId,
-	targetBlockIndex,
-	hasUploadPermissions,
+	getSettings,
 	updateBlockAttributes,
 	canInsertBlockType,
 	insertOrReplaceBlocks
 ) {
 	return ( files ) => {
-		if ( ! hasUploadPermissions ) {
+		if ( ! getSettings().mediaUpload ) {
 			return;
 		}
 
@@ -175,17 +194,11 @@ export function onFilesDrop(
 /**
  * A function that returns an event handler function for block-related HTML drop events.
  *
- * @param {string}   targetRootClientId    The root client id where the block(s) will be inserted.
- * @param {number}   targetBlockIndex      The index where the block(s) will be inserted.
  * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related HTML drop event.
  */
-export function onHTMLDrop(
-	targetRootClientId,
-	targetBlockIndex,
-	insertOrReplaceBlocks
-) {
+export function onHTMLDrop( insertOrReplaceBlocks ) {
 	return ( HTML ) => {
 		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
 
@@ -210,18 +223,17 @@ export default function useOnBlockDrop(
 	targetBlockIndex,
 	options = {}
 ) {
-	const { operation = 'insert' } = options;
-	const hasUploadPermissions = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
+	const { operation = 'insert', nearestSide = 'right' } = options;
 	const {
 		canInsertBlockType,
 		getBlockIndex,
 		getClientIdsOfDescendants,
 		getBlockOrder,
 		getBlocksByClientId,
+		getSettings,
+		getBlock,
 	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
@@ -233,12 +245,65 @@ export default function useOnBlockDrop(
 	const registry = useRegistry();
 
 	const insertOrReplaceBlocks = useCallback(
-		( blocks, updateSelection = true, initialPosition = 0 ) => {
+		(
+			blocks,
+			updateSelection = true,
+			initialPosition = 0,
+			clientIdsToReplace = []
+		) => {
+			if ( ! Array.isArray( blocks ) ) {
+				blocks = [ blocks ];
+			}
+			const clientIds = getBlockOrder( targetRootClientId );
+			const clientId = clientIds[ targetBlockIndex ];
 			if ( operation === 'replace' ) {
-				const clientIds = getBlockOrder( targetRootClientId );
-				const clientId = clientIds[ targetBlockIndex ];
-
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
+			} else if ( operation === 'group' ) {
+				const targetBlock = getBlock( clientId );
+				if ( nearestSide === 'left' ) {
+					blocks.push( targetBlock );
+				} else {
+					blocks.unshift( targetBlock );
+				}
+
+				const groupInnerBlocks = blocks.map( ( block ) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				} );
+
+				const areAllImages = blocks.every( ( block ) => {
+					return block.name === 'core/image';
+				} );
+
+				const galleryBlock = canInsertBlockType(
+					'core/gallery',
+					targetRootClientId
+				);
+
+				const wrappedBlocks = createBlock(
+					areAllImages && galleryBlock
+						? 'core/gallery'
+						: getGroupingBlockName(),
+					{
+						layout: {
+							type: 'flex',
+							flexWrap:
+								areAllImages && galleryBlock ? null : 'nowrap',
+						},
+					},
+					groupInnerBlocks
+				);
+				// Need to make sure both the target block and the block being dragged are replaced
+				// otherwise the dragged block will be duplicated.
+				replaceBlocks(
+					[ clientId, ...clientIdsToReplace ],
+					wrappedBlocks,
+					undefined,
+					initialPosition
+				);
 			} else {
 				insertBlocks(
 					blocks,
@@ -250,12 +315,16 @@ export default function useOnBlockDrop(
 			}
 		},
 		[
-			operation,
 			getBlockOrder,
-			insertBlocks,
-			replaceBlocks,
-			targetBlockIndex,
 			targetRootClientId,
+			targetBlockIndex,
+			operation,
+			replaceBlocks,
+			getBlock,
+			nearestSide,
+			canInsertBlockType,
+			getGroupingBlockName,
+			insertBlocks,
 		]
 	);
 
@@ -292,9 +361,10 @@ export default function useOnBlockDrop(
 			operation,
 			getBlockOrder,
 			getBlocksByClientId,
-			insertBlocks,
 			moveBlocksToPosition,
+			registry,
 			removeBlocks,
+			replaceBlocks,
 			targetBlockIndex,
 			targetRootClientId,
 		]
@@ -307,21 +377,18 @@ export default function useOnBlockDrop(
 		getClientIdsOfDescendants,
 		moveBlocks,
 		insertOrReplaceBlocks,
-		clearSelectedBlock
+		clearSelectedBlock,
+		operation,
+		getBlock
 	);
 	const _onFilesDrop = onFilesDrop(
 		targetRootClientId,
-		targetBlockIndex,
-		hasUploadPermissions,
+		getSettings,
 		updateBlockAttributes,
 		canInsertBlockType,
 		insertOrReplaceBlocks
 	);
-	const _onHTMLDrop = onHTMLDrop(
-		targetRootClientId,
-		targetBlockIndex,
-		insertOrReplaceBlocks
-	);
+	const _onHTMLDrop = onHTMLDrop( insertOrReplaceBlocks );
 
 	return ( event ) => {
 		const files = getFilesFromDataTransfer( event.dataTransfer );
diff --git a/packages/block-editor/src/components/use-on-block-drop/test/index.js b/packages/block-editor/src/components/use-on-block-drop/test/index.js
index 1b95cc0085a79e..cd4ef2ad4a8894 100644
--- a/packages/block-editor/src/components/use-on-block-drop/test/index.js
+++ b/packages/block-editor/src/components/use-on-block-drop/test/index.js
@@ -306,13 +306,11 @@ describe( 'onFilesDrop', () => {
 		const canInsertBlockType = noop;
 		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = false;
+		const getSettings = jest.fn( () => ( {} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -331,13 +329,13 @@ describe( 'onFilesDrop', () => {
 		const insertOrReplaceBlocks = jest.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = true;
+		const getSettings = jest.fn( () => ( {
+			mediaUpload: true,
+		} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -359,13 +357,13 @@ describe( 'onFilesDrop', () => {
 		const canInsertBlockType = noop;
 		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
-		const uploadPermissions = true;
+		const getSettings = jest.fn( () => ( {
+			mediaUpload: true,
+		} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
-			targetBlockIndex,
-			uploadPermissions,
+			getSettings,
 			updateBlockAttributes,
 			canInsertBlockType,
 			insertOrReplaceBlocks
@@ -385,15 +383,9 @@ describe( 'onFilesDrop', () => {
 describe( 'onHTMLDrop', () => {
 	it( 'does nothing if the HTML cannot be converted into blocks', () => {
 		pasteHandler.mockImplementation( () => [] );
-		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
 		const insertOrReplaceBlocks = jest.fn();
 
-		const eventHandler = onHTMLDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			insertOrReplaceBlocks
-		);
+		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
 
 		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
@@ -402,15 +394,9 @@ describe( 'onHTMLDrop', () => {
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
 		const blocks = [ 'blocks' ];
 		pasteHandler.mockImplementation( () => blocks );
-		const targetRootClientId = '1';
-		const targetBlockIndex = 0;
 		const insertOrReplaceBlocks = jest.fn();
 
-		const eventHandler = onHTMLDrop(
-			targetRootClientId,
-			targetBlockIndex,
-			insertOrReplaceBlocks
-		);
+		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
 
 		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );
diff --git a/packages/block-editor/src/components/use-paste-styles/index.js b/packages/block-editor/src/components/use-paste-styles/index.js
new file mode 100644
index 00000000000000..1c2a844488b862
--- /dev/null
+++ b/packages/block-editor/src/components/use-paste-styles/index.js
@@ -0,0 +1,232 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { getBlockType, parse } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import {
+	hasAlignSupport,
+	hasBorderSupport,
+	hasBackgroundColorSupport,
+	hasTextAlignSupport,
+	hasTextColorSupport,
+	hasGradientSupport,
+	hasCustomClassNameSupport,
+	hasFontFamilySupport,
+	hasFontSizeSupport,
+	hasLayoutSupport,
+	hasStyleSupport,
+} from '../../hooks/supports';
+
+/**
+ * Determine if the copied text looks like serialized blocks or not.
+ * Since plain text will always get parsed into a freeform block,
+ * we check that if the parsed blocks is anything other than that.
+ *
+ * @param {string} text The copied text.
+ * @return {boolean} True if the text looks like serialized blocks, false otherwise.
+ */
+function hasSerializedBlocks( text ) {
+	try {
+		const blocks = parse( text, {
+			__unstableSkipMigrationLogs: true,
+			__unstableSkipAutop: true,
+		} );
+		if ( blocks.length === 1 && blocks[ 0 ].name === 'core/freeform' ) {
+			// It's likely that the text is just plain text and not serialized blocks.
+			return false;
+		}
+		return true;
+	} catch ( err ) {
+		// Parsing error, the text is not serialized blocks.
+		// (Even though that it technically won't happen)
+		return false;
+	}
+}
+
+/**
+ * Style attributes are attributes being added in `block-editor/src/hooks/*`.
+ * (Except for some unrelated to style like `anchor` or `settings`.)
+ * They generally represent the default block supports.
+ */
+const STYLE_ATTRIBUTES = {
+	align: hasAlignSupport,
+	borderColor: ( nameOrType ) => hasBorderSupport( nameOrType, 'color' ),
+	backgroundColor: hasBackgroundColorSupport,
+	textAlign: hasTextAlignSupport,
+	textColor: hasTextColorSupport,
+	gradient: hasGradientSupport,
+	className: hasCustomClassNameSupport,
+	fontFamily: hasFontFamilySupport,
+	fontSize: hasFontSizeSupport,
+	layout: hasLayoutSupport,
+	style: hasStyleSupport,
+};
+
+/**
+ * Get the "style attributes" from a given block to a target block.
+ *
+ * @param {WPBlock} sourceBlock The source block.
+ * @param {WPBlock} targetBlock The target block.
+ * @return {Object} the filtered attributes object.
+ */
+function getStyleAttributes( sourceBlock, targetBlock ) {
+	return Object.entries( STYLE_ATTRIBUTES ).reduce(
+		( attributes, [ attributeKey, hasSupport ] ) => {
+			// Only apply the attribute if both blocks support it.
+			if (
+				hasSupport( sourceBlock.name ) &&
+				hasSupport( targetBlock.name )
+			) {
+				// Override attributes that are not present in the block to their defaults.
+				attributes[ attributeKey ] =
+					sourceBlock.attributes[ attributeKey ];
+			}
+			return attributes;
+		},
+		{}
+	);
+}
+
+/**
+ * Update the target blocks with style attributes recursively.
+ *
+ * @param {WPBlock[]} targetBlocks          The target blocks to be updated.
+ * @param {WPBlock[]} sourceBlocks          The source blocks to get th style attributes from.
+ * @param {Function}  updateBlockAttributes The function to update the attributes.
+ */
+function recursivelyUpdateBlockAttributes(
+	targetBlocks,
+	sourceBlocks,
+	updateBlockAttributes
+) {
+	for (
+		let index = 0;
+		index < Math.min( sourceBlocks.length, targetBlocks.length );
+		index += 1
+	) {
+		updateBlockAttributes(
+			targetBlocks[ index ].clientId,
+			getStyleAttributes( sourceBlocks[ index ], targetBlocks[ index ] )
+		);
+
+		recursivelyUpdateBlockAttributes(
+			targetBlocks[ index ].innerBlocks,
+			sourceBlocks[ index ].innerBlocks,
+			updateBlockAttributes
+		);
+	}
+}
+
+/**
+ * A hook to return a pasteStyles event function for handling pasting styles to blocks.
+ *
+ * @return {Function} A function to update the styles to the blocks.
+ */
+export default function usePasteStyles() {
+	const registry = useRegistry();
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { createSuccessNotice, createWarningNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	return useCallback(
+		async ( targetBlocks ) => {
+			let html = '';
+			try {
+				// `http:` sites won't have the clipboard property on navigator.
+				// (with the exception of localhost.)
+				if ( ! window.navigator.clipboard ) {
+					createErrorNotice(
+						__(
+							'Unable to paste styles. This feature is only available on secure (https) sites in supporting browsers.'
+						),
+						{ type: 'snackbar' }
+					);
+					return;
+				}
+
+				html = await window.navigator.clipboard.readText();
+			} catch ( error ) {
+				// Possibly the permission is denied.
+				createErrorNotice(
+					__(
+						'Unable to paste styles. Please allow browser clipboard permissions before continuing.'
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			// Abort if the copied text is empty or doesn't look like serialized blocks.
+			if ( ! html || ! hasSerializedBlocks( html ) ) {
+				createWarningNotice(
+					__(
+						"Unable to paste styles. Block styles couldn't be found within the copied content."
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+
+			const copiedBlocks = parse( html );
+
+			if ( copiedBlocks.length === 1 ) {
+				// Apply styles of the block to all the target blocks.
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						targetBlocks.map( () => copiedBlocks[ 0 ] ),
+						updateBlockAttributes
+					);
+				} );
+			} else {
+				registry.batch( () => {
+					recursivelyUpdateBlockAttributes(
+						targetBlocks,
+						copiedBlocks,
+						updateBlockAttributes
+					);
+				} );
+			}
+
+			if ( targetBlocks.length === 1 ) {
+				const title = getBlockType( targetBlocks[ 0 ].name )?.title;
+				createSuccessNotice(
+					sprintf(
+						// Translators: Name of the block being pasted, e.g. "Paragraph".
+						__( 'Pasted styles to %s.' ),
+						title
+					),
+					{ type: 'snackbar' }
+				);
+			} else {
+				createSuccessNotice(
+					sprintf(
+						// Translators: The number of the blocks.
+						__( 'Pasted styles to %d blocks.' ),
+						targetBlocks.length
+					),
+					{ type: 'snackbar' }
+				);
+			}
+		},
+		[
+			registry.batch,
+			updateBlockAttributes,
+			createSuccessNotice,
+			createWarningNotice,
+			createErrorNotice,
+		]
+	);
+}
diff --git a/packages/block-editor/src/components/use-resize-canvas/README.md b/packages/block-editor/src/components/use-resize-canvas/README.md
index 18d28df7b3e3af..a34958c56c4542 100644
--- a/packages/block-editor/src/components/use-resize-canvas/README.md
+++ b/packages/block-editor/src/components/use-resize-canvas/README.md
@@ -1,27 +1,23 @@
 # useResizeCanvas
 
-This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions. It has no effect on desktop.
+This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions.
 
 On-page CSS media queries are also updated to match the width of the device.
 
 Note that this is currently experimental, and is available as `__experimentalUseResizeCanvas`.
 
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-
 ## Development guidelines
 
 ### Usage
 
-The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `__experimentalGetPreviewDeviceType`.
+The hook returns a style object which can be applied to a container. It is passed the current device type, which can be obtained from `getDeviceType`.
 
 ```jsx
 import { __experimentalUseResizeCanvas as useResizeCanvas } from '@wordpress/block-editor';
 
 function ResizedContainer() {
 	const deviceType = useSelect( ( select ) => {
-		return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType();
+		return select( 'core/editor' ).getDeviceType();
 	}, [] );
 	const inlineStyles = useResizeCanvas( deviceType );
 
diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index d329e20d6106e4..0aa46c9c3278f7 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -43,23 +43,30 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
-
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
+		const marginVertical = '40px';
+		const marginHorizontal = 'auto';
+
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
 					width: getCanvasWidth( device ),
-					margin: marginValue() + 'px auto',
+					// Keeping margin styles separate to avoid warnings
+					// when those props get overridden in the iframe component
+					marginTop: marginVertical,
+					marginBottom: marginVertical,
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
-					overflowY: 'auto',
+					maxWidth: '100%',
 				};
 			default:
-				return null;
+				return {
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
+				};
 		}
 	};
 
diff --git a/packages/block-editor/src/components/use-setting/index.js b/packages/block-editor/src/components/use-setting/index.js
deleted file mode 100644
index 630909f48738c9..00000000000000
--- a/packages/block-editor/src/components/use-setting/index.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
-	hasBlockSupport,
-} from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { useBlockEditContext } from '../block-edit';
-import { store as blockEditorStore } from '../../store';
-
-const blockedPaths = [
-	'color',
-	'border',
-	'dimensions',
-	'typography',
-	'spacing',
-];
-
-const deprecatedFlags = {
-	'color.palette': ( settings ) => settings.colors,
-	'color.gradients': ( settings ) => settings.gradients,
-	'color.custom': ( settings ) =>
-		settings.disableCustomColors === undefined
-			? undefined
-			: ! settings.disableCustomColors,
-	'color.customGradient': ( settings ) =>
-		settings.disableCustomGradients === undefined
-			? undefined
-			: ! settings.disableCustomGradients,
-	'typography.fontSizes': ( settings ) => settings.fontSizes,
-	'typography.customFontSize': ( settings ) =>
-		settings.disableCustomFontSizes === undefined
-			? undefined
-			: ! settings.disableCustomFontSizes,
-	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
-	'spacing.units': ( settings ) => {
-		if ( settings.enableCustomUnits === undefined ) {
-			return;
-		}
-
-		if ( settings.enableCustomUnits === true ) {
-			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
-		}
-
-		return settings.enableCustomUnits;
-	},
-	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
-};
-
-const prefixedFlags = {
-	/*
-	 * These were only available in the plugin
-	 * and can be removed when the minimum WordPress version
-	 * for the plugin is 5.9.
-	 */
-	'border.customColor': 'border.color',
-	'border.customStyle': 'border.style',
-	'border.customWidth': 'border.width',
-	'typography.customFontStyle': 'typography.fontStyle',
-	'typography.customFontWeight': 'typography.fontWeight',
-	'typography.customLetterSpacing': 'typography.letterSpacing',
-	'typography.customTextDecorations': 'typography.textDecoration',
-	'typography.customTextTransforms': 'typography.textTransform',
-	/*
-	 * These were part of WordPress 5.8 and we need to keep them.
-	 */
-	'border.customRadius': 'border.radius',
-	'spacing.customMargin': 'spacing.margin',
-	'spacing.customPadding': 'spacing.padding',
-	'typography.customLineHeight': 'typography.lineHeight',
-};
-
-/**
- * Remove `custom` prefixes for flags that did not land in 5.8.
- *
- * This provides continued support for `custom` prefixed properties. It will
- * be removed once third party devs have had sufficient time to update themes,
- * plugins, etc.
- *
- * @see https://github.com/WordPress/gutenberg/pull/34485
- *
- * @param {string} path Path to desired value in settings.
- * @return {string}     The value for defined setting.
- */
-const removeCustomPrefixes = ( path ) => {
-	return prefixedFlags[ path ] || path;
-};
-
-/**
- * Hook that retrieves the given setting for the block instance in use.
- *
- * It looks up the settings first in the block instance hierarchy.
- * If none is found, it'll look it up in the block editor store.
- *
- * @param {string} path The path to the setting.
- * @return {any} Returns the value defined for the setting.
- * @example
- * ```js
- * const isEnabled = useSetting( 'typography.dropCap' );
- * ```
- */
-export default function useSetting( path ) {
-	const { name: blockName, clientId } = useBlockEditContext();
-
-	return useSelect(
-		( select ) => {
-			if ( blockedPaths.includes( path ) ) {
-				// eslint-disable-next-line no-console
-				console.warn(
-					'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
-				);
-				return undefined;
-			}
-
-			let result;
-
-			const normalizedPath = removeCustomPrefixes( path );
-
-			// 1. Take settings from the block instance or its ancestors.
-			// Start from the current block and work our way up the ancestors.
-			const candidates = [
-				clientId,
-				...select( blockEditorStore ).getBlockParents(
-					clientId,
-					/* ascending */ true
-				),
-			];
-
-			for ( const candidateClientId of candidates ) {
-				const candidateBlockName =
-					select( blockEditorStore ).getBlockName(
-						candidateClientId
-					);
-				if (
-					hasBlockSupport(
-						candidateBlockName,
-						'__experimentalSettings',
-						false
-					)
-				) {
-					const candidateAtts =
-						select( blockEditorStore ).getBlockAttributes(
-							candidateClientId
-						);
-					result =
-						get(
-							candidateAtts,
-							`settings.blocks.${ blockName }.${ normalizedPath }`
-						) ??
-						get( candidateAtts, `settings.${ normalizedPath }` );
-					if ( result !== undefined ) {
-						// Stop the search for more distant ancestors and move on.
-						break;
-					}
-				}
-			}
-
-			// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
-			const settings = select( blockEditorStore ).getSettings();
-			if ( result === undefined ) {
-				const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
-				const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
-				result =
-					get( settings, blockPath ) ?? get( settings, defaultsPath );
-			}
-
-			// Return if the setting was found in either the block instance or the store.
-			if ( result !== undefined ) {
-				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-					return result.custom ?? result.theme ?? result.default;
-				}
-				return result;
-			}
-
-			// 3. Otherwise, use deprecated settings.
-			const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
-				? deprecatedFlags[ normalizedPath ]( settings )
-				: undefined;
-			if ( deprecatedSettingsValue !== undefined ) {
-				return deprecatedSettingsValue;
-			}
-
-			// 4. Fallback for typography.dropCap:
-			// This is only necessary to support typography.dropCap.
-			// when __experimentalFeatures are not present (core without plugin).
-			// To remove when __experimentalFeatures are ported to core.
-			return normalizedPath === 'typography.dropCap' ? true : undefined;
-		},
-		[ blockName, clientId, path ]
-	);
-}
diff --git a/packages/block-editor/src/components/use-settings/README.md b/packages/block-editor/src/components/use-settings/README.md
new file mode 100644
index 00000000000000..68f580aa357bea
--- /dev/null
+++ b/packages/block-editor/src/components/use-settings/README.md
@@ -0,0 +1,34 @@
+## Use Settings
+
+`useSettings` is a hook that will retrieve the settings for the block instance that's in use.
+
+It does the lookup of the settings in the following order:
+
+1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`.
+2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors.
+3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store.
+4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead.
+
+## Development guidelines
+
+### Usage
+
+This will fetch the default color palette based on the block instance.
+
+```jsx
+import { useSettings } from '@wordpress/block-editor';
+
+const [ defaultColorPalette ] = useSettings( 'color.palette.default' );
+```
+
+Refer [here](https://github.com/WordPress/gutenberg/blob/HEAD/docs/how-to-guides/curating-the-editor-experience.md?plain=1#L330) in order to understand how the filter mentioned above `blockEditor.useSetting.before` can be used.
+
+### Props
+
+This hooks accepts the following arguments.
+
+#### `paths`
+
+-   **Type:** `Array<String>`
+
+Array of paths to the settings to be retrieved. E.g., `[ 'typography.fontSizes' ]`
diff --git a/packages/block-editor/src/components/use-settings/index.js b/packages/block-editor/src/components/use-settings/index.js
new file mode 100644
index 00000000000000..072653b913c304
--- /dev/null
+++ b/packages/block-editor/src/components/use-settings/index.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Hook that retrieves the given settings for the block instance in use.
+ *
+ * It looks up the settings first in the block instance hierarchy.
+ * If none are found, it'll look them up in the block editor settings.
+ *
+ * @param {string[]} paths The paths to the settings.
+ * @return {any[]} Returns the values defined for the settings.
+ * @example
+ * ```js
+ * const [ fixed, sticky ] = useSettings( 'position.fixed', 'position.sticky' );
+ * ```
+ */
+export function useSettings( ...paths ) {
+	const { clientId = null } = useBlockEditContext();
+	return useSelect(
+		( select ) =>
+			unlock( select( blockEditorStore ) ).getBlockSettings(
+				clientId,
+				...paths
+			),
+		[ clientId, ...paths ]
+	);
+}
+
+/**
+ * Hook that retrieves the given setting for the block instance in use.
+ *
+ * It looks up the setting first in the block instance hierarchy.
+ * If none is found, it'll look it up in the block editor settings.
+ *
+ * @deprecated 6.5.0 Use useSettings instead.
+ *
+ * @param {string} path The path to the setting.
+ * @return {any} Returns the value defined for the setting.
+ * @example
+ * ```js
+ * const isEnabled = useSetting( 'typography.dropCap' );
+ * ```
+ */
+export function useSetting( path ) {
+	deprecated( 'wp.blockEditor.useSetting', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.useSettings',
+		note: 'The new useSettings function can retrieve multiple settings at once, with better performance.',
+	} );
+
+	const [ value ] = useSettings( path );
+	return value;
+}
diff --git a/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js b/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js
new file mode 100644
index 00000000000000..4b5bbe65857b28
--- /dev/null
+++ b/packages/block-editor/src/components/use-unsupported-block-editor/index.native.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+// Blocks that can't be edited through the Unsupported block editor identified by their name.
+const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
+
+/**
+ * Hook that retrieves the settings to determine if the
+ * Unsupported Block Editor can be used in a specific block.
+ *
+ * @param {string} clientId Client ID of block.
+ * @return {Object} Unsupported block editor settings.
+ */
+export default function useUnsupportedBlockEditor( clientId ) {
+	return useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			const { capabilities } = getSettings();
+
+			const block = getBlock( clientId );
+			const blockAttributes = block?.attributes || {};
+
+			const blockDetails = {
+				blockName: block?.name,
+				blockContent: serialize( block ? [ block ] : [] ),
+			};
+
+			// If the block is unsupported, use the `original` attributes to identify the block's name.
+			if ( blockDetails.blockName === 'core/missing' ) {
+				blockDetails.blockName = blockAttributes.originalName;
+				blockDetails.blockContent =
+					blockDetails.blockName === 'core/freeform'
+						? blockAttributes.content
+						: block?.originalContent;
+			}
+
+			return {
+				isUnsupportedBlockEditorSupported:
+					capabilities?.unsupportedBlockEditor === true,
+				canEnableUnsupportedBlockEditor:
+					capabilities?.canEnableUnsupportedBlockEditor === true,
+				isEditableInUnsupportedBlockEditor:
+					! UBE_INCOMPATIBLE_BLOCKS.includes(
+						blockDetails.blockName
+					),
+				...blockDetails,
+			};
+		},
+		[ clientId ]
+	);
+}
diff --git a/packages/block-editor/src/components/video-player/index.native.js b/packages/block-editor/src/components/video-player/index.native.js
index a409c1d4ad99fc..3c9de8758579b6 100644
--- a/packages/block-editor/src/components/video-player/index.native.js
+++ b/packages/block-editor/src/components/video-player/index.native.js
@@ -99,7 +99,7 @@ class Video extends Component {
 					// So we are setting controls=false and adding a play button that
 					// will trigger presentFullscreenPlayer()
 					controls={ false }
-					ignoreSilentSwitch={ 'ignore' }
+					ignoreSilentSwitch="ignore"
 					paused={ ! isFullScreen }
 					onLayout={ this.onVideoLayout }
 					onFullscreenPlayerWillPresent={ () => {
diff --git a/packages/block-editor/src/components/warning/content.scss b/packages/block-editor/src/components/warning/content.scss
new file mode 100644
index 00000000000000..9380a224b2ff95
--- /dev/null
+++ b/packages/block-editor/src/components/warning/content.scss
@@ -0,0 +1,47 @@
+.block-editor-warning {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	font-family: $default-font;
+	padding: 1em;
+
+	// Block UI appearance.
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	background-color: $white;
+
+	.block-editor-warning__message {
+		line-height: $default-line-height;
+		font-family: $default-font;
+		font-size: $default-font-size;
+		color: $gray-900;
+		margin: 0;
+	}
+
+	// Required extra-specifity to override paragraph block styles.
+	p.block-editor-warning__message.block-editor-warning__message {
+		min-height: auto;
+	}
+
+	.block-editor-warning__contents {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		align-items: baseline;
+		width: 100%;
+		gap: $grid-unit-15;
+	}
+
+	.block-editor-warning__actions {
+		align-items: center;
+		display: flex;
+		gap: $grid-unit-10;
+	}
+}
+
+.components-popover.block-editor-warning__dropdown {
+	// Set z-index as if it's displayed on the bottom, otherwise the modal
+	// dialog popover might overlap if displayed on the bottom.
+	z-index: z-index(".components-popover.block-editor-warning__dropdown");
+}
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 4891c0a90df98f..8b6279bef6044d 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,12 +9,12 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
 		<div style={ { display: 'contents', all: 'initial' } }>
-			<div className={ classnames( className, 'block-editor-warning' ) }>
+			<div className={ clsx( className, 'block-editor-warning' ) }>
 				<div className="block-editor-warning__contents">
 					<p className="block-editor-warning__message">
 						{ children }
@@ -34,7 +34,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 							{ secondaryActions && (
 								<DropdownMenu
 									className="block-editor-warning__secondary"
-									icon={ moreHorizontal }
+									icon={ moreVertical }
 									label={ __( 'More options' ) }
 									popoverProps={ {
 										position: 'bottom left',
diff --git a/packages/block-editor/src/components/warning/index.native.js b/packages/block-editor/src/components/warning/index.native.js
index cda7f13a68405d..9c825abed271b7 100644
--- a/packages/block-editor/src/components/warning/index.native.js
+++ b/packages/block-editor/src/components/warning/index.native.js
@@ -16,33 +16,36 @@ import { normalizeIconObject } from '@wordpress/blocks';
 import styles from './style.scss';
 
 function Warning( {
+	actions,
 	title,
 	message,
 	icon,
 	iconClass,
 	preferredColorScheme,
 	getStylesFromColorScheme,
+	containerStyle: extraContainerStyle,
+	titleStyle: extraTitleStyle,
+	messageStyle: extraMessageStyle,
 	...viewProps
 } ) {
 	icon = icon && normalizeIconObject( icon );
 	const internalIconClass = 'warning-icon' + '-' + preferredColorScheme;
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const messageStyle = getStylesFromColorScheme(
-		styles.message,
-		styles.messageDark
-	);
+
+	const containerStyle = [
+		getStylesFromColorScheme( styles.container, styles.containerDark ),
+		extraContainerStyle,
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		extraTitleStyle,
+	];
+	const messageStyle = [
+		getStylesFromColorScheme( styles.message, styles.messageDark ),
+		extraMessageStyle,
+	];
 
 	return (
-		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
-			{ ...viewProps }
-		>
+		<View style={ containerStyle } { ...viewProps }>
 			{ icon && (
 				<View style={ styles.icon }>
 					<Icon
@@ -53,6 +56,7 @@ function Warning( {
 			) }
 			{ title && <Text style={ titleStyle }>{ title }</Text> }
 			{ message && <Text style={ messageStyle }>{ message }</Text> }
+			{ actions }
 		</View>
 	);
 }
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
deleted file mode 100644
index f4eeb253c1c2fb..00000000000000
--- a/packages/block-editor/src/components/warning/style.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.block-editor-warning {
-	align-items: center;
-	display: flex;
-	flex-wrap: wrap;
-	font-family: $default-font;
-	padding: 1em;
-
-	// Block UI appearance.
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	background-color: $white;
-
-	.block-editor-warning__message {
-		line-height: $default-line-height;
-		font-family: $default-font;
-		font-size: $default-font-size;
-		color: $gray-900;
-		margin: 0;
-	}
-
-	// Required extra-specifity to override paragraph block styles.
-	p.block-editor-warning__message.block-editor-warning__message {
-		min-height: auto;
-	}
-
-	.block-editor-warning__contents {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		align-items: baseline;
-		width: 100%;
-	}
-
-	.block-editor-warning__actions {
-		align-items: center;
-		display: flex;
-		margin-top: 1em;
-	}
-
-	.block-editor-warning__action {
-		margin: 0 $grid-unit-10 0 0;
-	}
-}
-
-.block-editor-warning__secondary {
-	margin: auto 0 auto $grid-unit-10;
-}
-
-.components-popover.block-editor-warning__dropdown {
-	// Set z-index as if it's displayed on the bottom, otherwise the modal
-	// dialog popover might overlap if displayed on the bottom.
-	z-index: z-index(".components-popover.block-editor-warning__dropdown");
-}
diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index 88c9006b8ace9d..6a0373da611c01 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -31,9 +31,7 @@ describe( 'Warning', () => {
 	} );
 
 	it( 'should show hidden secondary actions', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index b28f065c559c5f..cb789bdd7035b4 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -22,6 +22,7 @@ import useDragSelection from './use-drag-selection';
 import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
+import useClipboardHandler from './use-clipboard-handler';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -35,6 +36,7 @@ export function useWritingFlow() {
 		before,
 		useMergeRefs( [
 			ref,
+			useClipboardHandler(),
 			useInput(),
 			useDragSelection(),
 			useSelectionObserver(),
@@ -44,21 +46,22 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
-					node.contentEditable = hasMultiSelection;
+					node.tabIndex = 0;
+					node.dataset.hasMultiSelection = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
-						return;
+						return () => {
+							delete node.dataset.hasMultiSelection;
+						};
 					}
 
-					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
-						node.classList.remove( 'has-multi-selection' );
+						delete node.dataset.hasMultiSelection;
 						node.removeAttribute( 'aria-label' );
 					};
 				},
@@ -77,7 +80,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
 			<div
 				{ ...props }
 				ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-				className={ classNames(
+				className={ clsx(
 					props.className,
 					'block-editor-writing-flow'
 				) }
@@ -93,7 +96,7 @@ function WritingFlow( { children, ...props }, forwardedRef ) {
  * Handles selection and navigation across blocks. This component should be
  * wrapped around BlockList.
  *
- * @param {Object}    props          Component properties.
- * @param {WPElement} props.children Children to be rendered.
+ * @param {Object}  props          Component properties.
+ * @param {Element} props.children Children to be rendered.
  */
 export default forwardRef( WritingFlow );
diff --git a/packages/block-editor/src/components/writing-flow/test/index.js b/packages/block-editor/src/components/writing-flow/test/index.js
index 39fc379111bd65..4d19417cf36e54 100644
--- a/packages/block-editor/src/components/writing-flow/test/index.js
+++ b/packages/block-editor/src/components/writing-flow/test/index.js
@@ -19,6 +19,9 @@ describe( 'isNavigationCandidate', () => {
 		elements.inputCheckbox = document.createElement( 'input' );
 		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
 
+		elements.inputNumber = document.createElement( 'input' );
+		elements.inputNumber.setAttribute( 'type', 'number' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -47,6 +50,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+		[ UP, DOWN ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputNumber,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( false );
+		} );
+	} );
+
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
index f0da074d196a2b..44051b324ff64d 100644
--- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
@@ -32,19 +32,32 @@ import { store as blockEditorStore } from '../../store';
  */
 export function isNavigationCandidate( element, keyCode, hasModifier ) {
 	const isVertical = keyCode === UP || keyCode === DOWN;
+	const { tagName } = element;
+	const elementType = element.getAttribute( 'type' );
 
-	// Currently, all elements support unmodified vertical navigation.
+	// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.
 	if ( isVertical && ! hasModifier ) {
+		if ( tagName === 'INPUT' ) {
+			const verticalInputTypes = [
+				'date',
+				'datetime-local',
+				'month',
+				'number',
+				'range',
+				'time',
+				'week',
+			];
+			return ! verticalInputTypes.includes( elementType );
+		}
 		return true;
 	}
 
-	const { tagName } = element;
-
 	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
 	if ( tagName === 'INPUT' ) {
 		const simpleInputTypes = [
 			'button',
 			'checkbox',
+			'number',
 			'color',
 			'file',
 			'image',
@@ -52,7 +65,7 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 			'reset',
 			'submit',
 		];
-		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+		return simpleInputTypes.includes( elementType );
 	}
 
 	// Native textareas should not navigate horizontally.
@@ -101,6 +114,10 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
+		if ( node.closest( '[inert]' ) ) {
+			return;
+		}
+
 		// Skip if there's only one child that is content editable (and thus a
 		// better candidate).
 		if (
@@ -167,6 +184,12 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
+			// Abort if navigation has already been handled (e.g. RichText
+			// inline boundaries).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
 			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
 				event;
 			const isUp = keyCode === UP;
@@ -182,24 +205,20 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			if ( ! isNav ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
-				// Only handle if we have a full selection (not a native partial
-				// selection).
-				if ( ! __unstableIsFullySelected() ) {
-					return;
-				}
-
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				if ( ! isNav ) {
+				if ( shiftKey ) {
 					return;
 				}
 
-				if ( shiftKey ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
 					return;
 				}
 
@@ -214,6 +233,12 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// Abort if our current target is not a candidate for navigation
+			// (e.g. preserve native input behaviors).
+			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
+				return;
+			}
+
 			// When presing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
 			// it can be restored as well as possible on sebsequent vertical
@@ -227,22 +252,6 @@ export default function useArrowNav() {
 				verticalRect = computeCaretRect( defaultView );
 			}
 
-			// Abort if navigation has already been handled (e.g. RichText
-			// inline boundaries).
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( ! isNav ) {
-				return;
-			}
-
-			// Abort if our current target is not a candidate for navigation
-			// (e.g. preserve native input behaviors).
-			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
-				return;
-			}
-
 			// In the case of RTL scripts, right means previous and left means
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
diff --git a/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
new file mode 100644
index 00000000000000..bed07b183cc0cc
--- /dev/null
+++ b/packages/block-editor/src/components/writing-flow/use-clipboard-handler.js
@@ -0,0 +1,256 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+	hasBlockSupport,
+	switchToBlockType,
+} from '@wordpress/blocks';
+import {
+	documentHasSelection,
+	documentHasUncollapsedSelection,
+} from '@wordpress/dom';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
+import { setClipboardBlocks } from './utils';
+import { getPasteEventData } from '../../utils/pasting';
+
+export default function useClipboardHandler() {
+	const registry = useRegistry();
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		hasMultiSelection,
+		getSettings,
+		getBlockName,
+		__unstableIsFullySelected,
+		__unstableIsSelectionCollapsed,
+		__unstableIsSelectionMergeable,
+		__unstableGetSelectedBlocksWithPartialSelection,
+		canInsertBlockType,
+		getBlockRootClientId,
+	} = useSelect( blockEditorStore );
+	const {
+		flashBlock,
+		removeBlocks,
+		replaceBlocks,
+		__unstableDeleteSelection,
+		__unstableExpandSelection,
+		__unstableSplitSelection,
+	} = useDispatch( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
+
+	return useRefEffect( ( node ) => {
+		function handler( event ) {
+			if ( event.defaultPrevented ) {
+				// This was likely already handled in rich-text/use-paste-handler.js.
+				return;
+			}
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+
+			if ( selectedBlockClientIds.length === 0 ) {
+				return;
+			}
+
+			// Let native copy/paste behaviour take over in input fields.
+			// But always handle multiple selected blocks.
+			if ( ! hasMultiSelection() ) {
+				const { target } = event;
+				const { ownerDocument } = target;
+				// If copying, only consider actual text selection as selection.
+				// Otherwise, any focus on an input field is considered.
+				const hasSelection =
+					event.type === 'copy' || event.type === 'cut'
+						? documentHasUncollapsedSelection( ownerDocument )
+						: documentHasSelection( ownerDocument ) &&
+						  ! ownerDocument.activeElement.isContentEditable;
+
+				// Let native copy behaviour take over in input fields.
+				if ( hasSelection ) {
+					return;
+				}
+			}
+
+			const { activeElement } = event.target.ownerDocument;
+
+			if ( ! node.contains( activeElement ) ) {
+				return;
+			}
+
+			const isSelectionMergeable = __unstableIsSelectionMergeable();
+			const shouldHandleWholeBlocks =
+				__unstableIsSelectionCollapsed() || __unstableIsFullySelected();
+			const expandSelectionIsNeeded =
+				! shouldHandleWholeBlocks && ! isSelectionMergeable;
+			if ( event.type === 'copy' || event.type === 'cut' ) {
+				event.preventDefault();
+
+				if ( selectedBlockClientIds.length === 1 ) {
+					flashBlock( selectedBlockClientIds[ 0 ] );
+				}
+				// If we have a partial selection that is not mergeable, just
+				// expand the selection to the whole blocks.
+				if ( expandSelectionIsNeeded ) {
+					__unstableExpandSelection();
+				} else {
+					notifyCopy( event.type, selectedBlockClientIds );
+					let blocks;
+					// Check if we have partial selection.
+					if ( shouldHandleWholeBlocks ) {
+						blocks = getBlocksByClientId( selectedBlockClientIds );
+					} else {
+						const [ head, tail ] =
+							__unstableGetSelectedBlocksWithPartialSelection();
+						const inBetweenBlocks = getBlocksByClientId(
+							selectedBlockClientIds.slice(
+								1,
+								selectedBlockClientIds.length - 1
+							)
+						);
+						blocks = [ head, ...inBetweenBlocks, tail ];
+					}
+
+					setClipboardBlocks( event, blocks, registry );
+				}
+			}
+
+			if ( event.type === 'cut' ) {
+				// We need to also check if at the start we needed to
+				// expand the selection, as in this point we might have
+				// programmatically fully selected the blocks above.
+				if ( shouldHandleWholeBlocks && ! expandSelectionIsNeeded ) {
+					removeBlocks( selectedBlockClientIds );
+				} else {
+					event.target.ownerDocument.activeElement.contentEditable = false;
+					__unstableDeleteSelection();
+				}
+			} else if ( event.type === 'paste' ) {
+				const {
+					__experimentalCanUserUseUnfilteredHTML:
+						canUserUseUnfilteredHTML,
+				} = getSettings();
+				const isInternal =
+					event.clipboardData.getData( 'rich-text' ) === 'true';
+				if ( isInternal ) {
+					return;
+				}
+				const { plainText, html, files } = getPasteEventData( event );
+				const isFullySelected = __unstableIsFullySelected();
+				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: isFullySelected ? 'BLOCKS' : 'AUTO',
+						canUserUseUnfilteredHTML,
+					} );
+				}
+
+				// Inline paste: let rich text handle it.
+				if ( typeof blocks === 'string' ) {
+					return;
+				}
+
+				if ( isFullySelected ) {
+					replaceBlocks(
+						selectedBlockClientIds,
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					event.preventDefault();
+					return;
+				}
+
+				// If a block doesn't support splitting, let rich text paste
+				// inline.
+				if (
+					! hasMultiSelection() &&
+					! hasBlockSupport(
+						getBlockName( selectedBlockClientIds[ 0 ] ),
+						'splitting',
+						false
+					) &&
+					! event.__deprecatedOnSplit
+				) {
+					return;
+				}
+
+				const [ firstSelectedClientId ] = selectedBlockClientIds;
+				const rootClientId = getBlockRootClientId(
+					firstSelectedClientId
+				);
+
+				const newBlocks = [];
+
+				for ( const block of blocks ) {
+					if ( canInsertBlockType( block.name, rootClientId ) ) {
+						newBlocks.push( block );
+					} else {
+						// If a block cannot be inserted in a root block, try
+						// converting it to that root block type and insert the
+						// inner blocks.
+						// Example: paragraphs cannot be inserted into a list,
+						// so convert the paragraphs to a list for list items.
+						const rootBlockName = getBlockName( rootClientId );
+						const switchedBlocks =
+							block.name !== rootBlockName
+								? switchToBlockType( block, rootBlockName )
+								: [ block ];
+
+						if ( ! switchedBlocks ) {
+							return;
+						}
+
+						for ( const switchedBlock of switchedBlocks ) {
+							for ( const innerBlock of switchedBlock.innerBlocks ) {
+								newBlocks.push( innerBlock );
+							}
+						}
+					}
+				}
+
+				__unstableSplitSelection( newBlocks );
+				event.preventDefault();
+			}
+		}
+
+		node.ownerDocument.addEventListener( 'copy', handler );
+		node.ownerDocument.addEventListener( 'cut', handler );
+		node.ownerDocument.addEventListener( 'paste', handler );
+
+		return () => {
+			node.ownerDocument.removeEventListener( 'copy', handler );
+			node.ownerDocument.removeEventListener( 'cut', handler );
+			node.ownerDocument.removeEventListener( 'paste', handler );
+		};
+	}, [] );
+}
diff --git a/packages/block-editor/src/components/writing-flow/use-drag-selection.js b/packages/block-editor/src/components/writing-flow/use-drag-selection.js
index 87d5e93f90994e..ea4c09b3dc9577 100644
--- a/packages/block-editor/src/components/writing-flow/use-drag-selection.js
+++ b/packages/block-editor/src/components/writing-flow/use-drag-selection.js
@@ -18,7 +18,9 @@ import { store as blockEditorStore } from '../../store';
 function setContentEditableWrapper( node, value ) {
 	node.contentEditable = value;
 	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+	if ( value ) {
+		node.focus();
+	}
 }
 
 /**
@@ -27,8 +29,12 @@ function setContentEditableWrapper( node, value ) {
 export default function useDragSelection() {
 	const { startMultiSelect, stopMultiSelect } =
 		useDispatch( blockEditorStore );
-	const { isSelectionEnabled, hasMultiSelection, isDraggingBlocks } =
-		useSelect( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		hasSelectedBlock,
+		isDraggingBlocks,
+		isMultiSelecting,
+	} = useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -45,7 +51,7 @@ export default function useDragSelection() {
 				// so wait until the next animation frame to get the browser
 				// selection.
 				rafId = defaultView.requestAnimationFrame( () => {
-					if ( hasMultiSelection() ) {
+					if ( ! hasSelectedBlock() ) {
 						return;
 					}
 
@@ -59,19 +65,38 @@ export default function useDragSelection() {
 					const selection = defaultView.getSelection();
 
 					if ( selection.rangeCount ) {
-						const { commonAncestorContainer } =
-							selection.getRangeAt( 0 );
+						const range = selection.getRangeAt( 0 );
+						const { commonAncestorContainer } = range;
+						const clonedRange = range.cloneRange();
 
 						if (
 							anchorElement.contains( commonAncestorContainer )
 						) {
 							anchorElement.focus();
+							selection.removeAllRanges();
+							selection.addRange( clonedRange );
 						}
 					}
 				} );
 			}
 
-			function onMouseLeave( { buttons, target } ) {
+			let lastMouseDownTarget;
+
+			function onMouseDown( { target } ) {
+				lastMouseDownTarget = target;
+			}
+
+			function onMouseLeave( { buttons, target, relatedTarget } ) {
+				if ( ! target.contains( lastMouseDownTarget ) ) {
+					return;
+				}
+
+				// If we're moving into a child element, ignore. We're tracking
+				// the mouse leaving the element to a parent, no a child.
+				if ( target.contains( relatedTarget ) ) {
+					return;
+				}
+
 				// Avoid triggering a multi-selection if the user is already
 				// dragging blocks.
 				if ( isDraggingBlocks() ) {
@@ -84,11 +109,21 @@ export default function useDragSelection() {
 					return;
 				}
 
+				// Abort if we are already multi-selecting.
+				if ( isMultiSelecting() ) {
+					return;
+				}
+
+				// Abort if selection is leaving writing flow.
+				if ( node === target ) {
+					return;
+				}
+
 				// Check the attribute, not the contentEditable attribute. All
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
 				// multi selecting when the mouse leaves the wrapper.
-				if ( ! target.getAttribute( 'contenteditable' ) ) {
+				if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
 					return;
 				}
 
@@ -96,7 +131,11 @@ export default function useDragSelection() {
 					return;
 				}
 
-				anchorElement = ownerDocument.activeElement;
+				// Do not rely on the active element because it may change after
+				// the mouse leaves for the first time. See
+				// https://github.com/WordPress/gutenberg/issues/48747.
+				anchorElement = target;
+
 				startMultiSelect();
 
 				// `onSelectionStart` is called after `mousedown` and
@@ -112,6 +151,7 @@ export default function useDragSelection() {
 			}
 
 			node.addEventListener( 'mouseout', onMouseLeave );
+			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
 				node.removeEventListener( 'mouseout', onMouseLeave );
@@ -123,7 +163,7 @@ export default function useDragSelection() {
 			startMultiSelect,
 			stopMultiSelect,
 			isSelectionEnabled,
-			hasMultiSelection,
+			hasSelectedBlock,
 		]
 	);
 }
diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js
index de68fa1ded943f..0f10cc9c2d1c75 100644
--- a/packages/block-editor/src/components/writing-flow/use-input.js
+++ b/packages/block-editor/src/components/writing-flow/use-input.js
@@ -4,7 +4,13 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	hasBlockSupport,
+	getBlockTransforms,
+	findTransform,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,8 +24,15 @@ export default function useInput() {
 	const {
 		__unstableIsFullySelected,
 		getSelectedBlockClientIds,
+		getSelectedBlockClientId,
 		__unstableIsSelectionMergeable,
 		hasMultiSelection,
+		getBlockName,
+		canInsertBlockType,
+		getBlockRootClientId,
+		getSelectionStart,
+		getSelectionEnd,
+		getBlockAttributes,
 	} = useSelect( blockEditorStore );
 	const {
 		replaceBlocks,
@@ -27,15 +40,15 @@ export default function useInput() {
 		removeBlocks,
 		__unstableDeleteSelection,
 		__unstableExpandSelection,
+		__unstableMarkAutomaticChange,
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
 		function onBeforeInput( event ) {
-			if ( ! hasMultiSelection() ) {
-				return;
-			}
-			// Prevent the browser to format something when we have multiselection.
-			if ( event.inputType?.startsWith( 'format' ) ) {
+			// If writing flow is editable, NEVER allow the browser to alter the
+			// DOM. This will cause React errors (and the DOM should only be
+			// altered in a controlled fashion).
+			if ( node.contentEditable === 'true' ) {
 				event.preventDefault();
 			}
 		}
@@ -46,6 +59,66 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
+				if ( event.keyCode === ENTER ) {
+					if ( event.shiftKey || __unstableIsFullySelected() ) {
+						return;
+					}
+
+					const clientId = getSelectedBlockClientId();
+					const blockName = getBlockName( clientId );
+					const selectionStart = getSelectionStart();
+					const selectionEnd = getSelectionEnd();
+
+					if (
+						selectionStart.attributeKey ===
+						selectionEnd.attributeKey
+					) {
+						const selectedAttributeValue =
+							getBlockAttributes( clientId )[
+								selectionStart.attributeKey
+							];
+						const transforms = getBlockTransforms( 'from' ).filter(
+							( { type } ) => type === 'enter'
+						);
+						const transformation = findTransform(
+							transforms,
+							( item ) => {
+								return item.regExp.test(
+									selectedAttributeValue
+								);
+							}
+						);
+
+						if ( transformation ) {
+							replaceBlocks(
+								clientId,
+								transformation.transform( {
+									content: selectedAttributeValue,
+								} )
+							);
+							__unstableMarkAutomaticChange();
+							return;
+						}
+					}
+
+					if (
+						! hasBlockSupport( blockName, 'splitting', false ) &&
+						! event.__deprecatedOnSplit
+					) {
+						return;
+					}
+
+					// Ensure template is not locked.
+					if (
+						canInsertBlockType(
+							blockName,
+							getBlockRootClientId( clientId )
+						)
+					) {
+						__unstableSplitSelection();
+						event.preventDefault();
+					}
+				}
 				return;
 			}
 
diff --git a/packages/block-editor/src/components/writing-flow/use-selection-observer.js b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
index 3d20c59ba80ab3..c7ce5d259d875a 100644
--- a/packages/block-editor/src/components/writing-flow/use-selection-observer.js
+++ b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
@@ -3,6 +3,8 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
+import { create } from '@wordpress/rich-text';
+import { isSelectionForward } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -52,6 +54,14 @@ function extractSelectionEndNode( selection ) {
 		return focusNode;
 	}
 
+	// When the selection is forward (the selection ends with the focus node),
+	// the selection may extend into the next element with an offset of 0. This
+	// may trigger multi selection even though the selection does not visually
+	// end in the next block.
+	if ( focusOffset === 0 && isSelectionForward( selection ) ) {
+		return focusNode.previousSibling ?? focusNode.parentElement;
+	}
+
 	return focusNode.childNodes[ focusOffset ];
 }
 
@@ -72,9 +82,23 @@ function findDepth( a, b ) {
  * @param {boolean}     value `contentEditable` value (true or false)
  */
 function setContentEditableWrapper( node, value ) {
-	node.contentEditable = value;
-	// Firefox doesn't automatically move focus.
-	if ( value ) node.focus();
+	// Since we are calling this on every selection change, check if the value
+	// needs to be updated first because it trigger the browser to recalculate
+	// style.
+	if ( node.contentEditable !== String( value ) ) {
+		node.contentEditable = value;
+
+		// Firefox doesn't automatically move focus.
+		if ( value ) {
+			node.focus();
+		}
+	}
+}
+
+function getRichTextElement( node ) {
+	const element =
+		node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;
+	return element?.closest( '[data-wp-block-attribute-key]' );
 }
 
 /**
@@ -83,7 +107,7 @@ function setContentEditableWrapper( node, value ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const { getBlockParents, getBlockSelectionStart } =
+	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
 		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
@@ -97,6 +121,16 @@ export default function useSelectionObserver() {
 					return;
 				}
 
+				const startNode = extractSelectionStartNode( selection );
+				const endNode = extractSelectionEndNode( selection );
+
+				if (
+					! node.contains( startNode ) ||
+					! node.contains( endNode )
+				) {
+					return;
+				}
+
 				// If selection is collapsed and we haven't used `shift+click`,
 				// end multi selection and disable the contentEditable wrapper.
 				// We have to check about `shift+click` case because elements
@@ -105,16 +139,24 @@ export default function useSelectionObserver() {
 				// For now we check if the event is a `mouse` event.
 				const isClickShift = event.shiftKey && event.type === 'mouseup';
 				if ( selection.isCollapsed && ! isClickShift ) {
-					setContentEditableWrapper( node, false );
+					if (
+						node.contentEditable === 'true' &&
+						! isMultiSelecting()
+					) {
+						setContentEditableWrapper( node, false );
+						let element =
+							startNode.nodeType === startNode.ELEMENT_NODE
+								? startNode
+								: startNode.parentElement;
+						element = element?.closest( '[contenteditable]' );
+						element?.focus();
+					}
 					return;
 				}
 
-				let startClientId = getBlockClientId(
-					extractSelectionStartNode( selection )
-				);
-				let endClientId = getBlockClientId(
-					extractSelectionEndNode( selection )
-				);
+				let startClientId = getBlockClientId( startNode );
+				let endClientId = getBlockClientId( endNode );
+
 				// If the selection has changed and we had pressed `shift+click`,
 				// we need to check if in an element that doesn't support
 				// text selection has been clicked.
@@ -151,7 +193,11 @@ export default function useSelectionObserver() {
 
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
-					selectBlock( startClientId );
+					if ( ! isMultiSelecting() ) {
+						selectBlock( startClientId );
+					} else {
+						multiSelect( startClientId, startClientId );
+					}
 				} else {
 					const startPath = [
 						...getBlockParents( startClientId ),
@@ -163,39 +209,68 @@ export default function useSelectionObserver() {
 					];
 					const depth = findDepth( startPath, endPath );
 
-					multiSelect( startPath[ depth ], endPath[ depth ] );
-				}
-			}
+					if (
+						startPath[ depth ] !== startClientId ||
+						endPath[ depth ] !== endClientId
+					) {
+						multiSelect( startPath[ depth ], endPath[ depth ] );
+						return;
+					}
 
-			function addListeners() {
-				ownerDocument.addEventListener(
-					'selectionchange',
-					onSelectionChange
-				);
-				defaultView.addEventListener( 'mouseup', onSelectionChange );
+					const richTextElementStart =
+						getRichTextElement( startNode );
+					const richTextElementEnd = getRichTextElement( endNode );
+
+					if ( richTextElementStart && richTextElementEnd ) {
+						const range = selection.getRangeAt( 0 );
+						const richTextDataStart = create( {
+							element: richTextElementStart,
+							range,
+							__unstableIsEditableTree: true,
+						} );
+						const richTextDataEnd = create( {
+							element: richTextElementEnd,
+							range,
+							__unstableIsEditableTree: true,
+						} );
+
+						const startOffset =
+							richTextDataStart.start ?? richTextDataStart.end;
+						const endOffset =
+							richTextDataEnd.start ?? richTextDataEnd.end;
+						selectionChange( {
+							start: {
+								clientId: startClientId,
+								attributeKey:
+									richTextElementStart.dataset
+										.wpBlockAttributeKey,
+								offset: startOffset,
+							},
+							end: {
+								clientId: endClientId,
+								attributeKey:
+									richTextElementEnd.dataset
+										.wpBlockAttributeKey,
+								offset: endOffset,
+							},
+						} );
+					} else {
+						multiSelect( startClientId, endClientId );
+					}
+				}
 			}
 
-			function removeListeners() {
+			ownerDocument.addEventListener(
+				'selectionchange',
+				onSelectionChange
+			);
+			defaultView.addEventListener( 'mouseup', onSelectionChange );
+			return () => {
 				ownerDocument.removeEventListener(
 					'selectionchange',
 					onSelectionChange
 				);
 				defaultView.removeEventListener( 'mouseup', onSelectionChange );
-			}
-
-			function resetListeners() {
-				removeListeners();
-				addListeners();
-			}
-
-			addListeners();
-			// We must allow rich text to set selection first. This ensures that
-			// our `selectionchange` listener is always reset to be called after
-			// the rich text one.
-			node.addEventListener( 'focusin', resetListeners );
-			return () => {
-				removeListeners();
-				node.removeEventListener( 'focusin', resetListeners );
 			};
 		},
 		[ multiSelect, selectBlock, selectionChange, getBlockParents ]
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index fccc9132bf98e5..46c40d56fe96d9 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { focus, isFormElement } from '@wordpress/dom';
-import { TAB, ESCAPE } from '@wordpress/keycodes';
+import { TAB } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
@@ -11,52 +11,92 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
+import { unlock } from '../../lock-unlock';
 
 export default function useTabNav() {
 	const container = useRef();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
-	const lastFocus = useRef();
-	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
-		useSelect( blockEditorStore );
-	const { setNavigationMode } = useDispatch( blockEditorStore );
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
 
-	// Don't allow tabbing to this element in Navigation mode.
-	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
+	const {
+		hasMultiSelection,
+		getSelectedBlockClientId,
+		getBlockCount,
+		getBlockOrder,
+		getLastFocus,
+		getSectionRootClientId,
+		isZoomOut,
+	} = unlock( useSelect( blockEditorStore ) );
+	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
 
 	// Reference that holds the a flag for enabling or disabling
 	// capturing on the focus capture elements.
-	const noCapture = useRef();
+	const noCaptureRef = useRef();
 
 	function onFocusCapture( event ) {
+		const canvasElement =
+			container.current.ownerDocument === event.target.ownerDocument
+				? container.current
+				: container.current.ownerDocument.defaultView.frameElement;
+
 		// Do not capture incoming focus if set by us in WritingFlow.
-		if ( noCapture.current ) {
-			noCapture.current = null;
+		if ( noCaptureRef.current ) {
+			noCaptureRef.current = null;
 		} else if ( hasMultiSelection() ) {
 			container.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
-			lastFocus.current.focus();
+			if ( getLastFocus()?.current ) {
+				getLastFocus().current.focus();
+			} else {
+				// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
+				container.current
+					.querySelector(
+						`[data-block="${ getSelectedBlockClientId() }"]`
+					)
+					.focus();
+			}
+		}
+		// In "compose" mode without a selected ID, we want to place focus on the section root when tabbing to the canvas.
+		else if ( isZoomOut() ) {
+			const sectionRootClientId = getSectionRootClientId();
+			const sectionBlocks = getBlockOrder( sectionRootClientId );
+
+			// If we have section within the section root, focus the first one.
+			if ( sectionBlocks.length ) {
+				container.current
+					.querySelector( `[data-block="${ sectionBlocks[ 0 ] }"]` )
+					.focus();
+			}
+			// If we don't have any section blocks, focus the section root.
+			else if ( sectionRootClientId ) {
+				container.current
+					.querySelector( `[data-block="${ sectionRootClientId }"]` )
+					.focus();
+			} else {
+				// If we don't have any section root, focus the canvas.
+				canvasElement.focus();
+			}
 		} else {
-			setNavigationMode( true );
-
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
-				event.target.compareDocumentPosition( container.current ) &
+				event.target.compareDocumentPosition( canvasElement ) &
 				event.target.DOCUMENT_POSITION_FOLLOWING;
-			const action = isBefore ? 'findNext' : 'findPrevious';
+			const tabbables = focus.tabbable.find( container.current );
 
-			focus.tabbable[ action ]( event.target ).focus();
+			if ( tabbables.length ) {
+				const next = isBefore
+					? tabbables[ 0 ]
+					: tabbables[ tabbables.length - 1 ];
+				next.focus();
+			}
 		}
 	}
 
 	const before = (
 		<div
 			ref={ focusCaptureBeforeRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -64,7 +104,7 @@ export default function useTabNav() {
 	const after = (
 		<div
 			ref={ focusCaptureAfterRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -75,12 +115,6 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE ) {
-				event.preventDefault();
-				setNavigationMode( true );
-				return;
-			}
-
 			// In Edit mode, Tab should focus the first tabbable element after
 			// the content, which is normally the sidebar (with block controls)
 			// and Shift+Tab should focus the first tabbable element before the
@@ -93,29 +127,29 @@ export default function useTabNav() {
 
 			const isShift = event.shiftKey;
 			const direction = isShift ? 'findPrevious' : 'findNext';
-
-			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
-				// Preserve the behaviour of entering navigation mode when
-				// tabbing into the content without a block selection.
-				// `onFocusCapture` already did this previously, but we need to
-				// do it again here because after clearing block selection,
-				// focus land on the writing flow container and pressing Tab
-				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) setNavigationMode( true );
-				return;
-			}
+			const nextTabbable = focus.tabbable[ direction ]( event.target );
+
+			// We want to constrain the tabbing to the block and its child blocks.
+			// If the preceding form element is within a different block,
+			// such as two sibling image blocks in the placeholder state,
+			// we want shift + tab from the first form element to move to the image
+			// block toolbar and not the previous image block's form element.
+			const currentBlock = event.target.closest( '[data-block]' );
+			const isElementPartOfSelectedBlock =
+				currentBlock &&
+				nextTabbable &&
+				( isInSameBlock( currentBlock, nextTabbable ) ||
+					isInsideRootBlock( currentBlock, nextTabbable ) );
 
 			// Allow tabbing from the block wrapper to a form element,
-			// and between form elements rendered in a block,
+			// and between form elements rendered in a block and its child blocks,
 			// such as inside a placeholder. Form elements are generally
 			// meant to be UI rather than part of the content. Ideally
 			// these are not rendered in the content and perhaps in the
 			// future they can be rendered in an iframe or shadow DOM.
 			if (
-				( isFormElement( event.target ) ||
-					event.target.getAttribute( 'data-block' ) ===
-						getSelectedBlockClientId() ) &&
-				isFormElement( focus.tabbable[ direction ]( event.target ) )
+				isFormElement( nextTabbable ) &&
+				isElementPartOfSelectedBlock
 			) {
 				return;
 			}
@@ -125,7 +159,7 @@ export default function useTabNav() {
 			// Disable focus capturing on the focus capture element, so it
 			// doesn't refocus this block and so it allows default behaviour
 			// (moving focus to the next tabbable element).
-			noCapture.current = true;
+			noCaptureRef.current = true;
 
 			// Focusing the focus capture element, which is located above and
 			// below the editor, should not scroll the page all the way up or
@@ -134,7 +168,7 @@ export default function useTabNav() {
 		}
 
 		function onFocusOut( event ) {
-			lastFocus.current = event.target;
+			setLastFocus( { ...getLastFocus(), current: event.target } );
 
 			const { ownerDocument } = node;
 
diff --git a/packages/block-editor/src/components/writing-flow/utils.js b/packages/block-editor/src/components/writing-flow/utils.js
new file mode 100644
index 00000000000000..2a2010854ed205
--- /dev/null
+++ b/packages/block-editor/src/components/writing-flow/utils.js
@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import {
+	serialize,
+	createBlock,
+	pasteHandler,
+	findTransform,
+	getBlockTransforms,
+	store as blocksStore,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getPasteEventData } from '../../utils/pasting';
+import { store as blockEditorStore } from '../../store';
+
+export const requiresWrapperOnCopy = Symbol( 'requiresWrapperOnCopy' );
+
+/**
+ * Sets the clipboard data for the provided blocks, with both HTML and plain
+ * text representations.
+ *
+ * @param {ClipboardEvent} event    Clipboard event.
+ * @param {WPBlock[]}      blocks   Blocks to set as clipboard data.
+ * @param {Object}         registry The registry to select from.
+ */
+export function setClipboardBlocks( event, blocks, registry ) {
+	let _blocks = blocks;
+
+	const [ firstBlock ] = blocks;
+
+	if ( firstBlock ) {
+		const firstBlockType = registry
+			.select( blocksStore )
+			.getBlockType( firstBlock.name );
+
+		if ( firstBlockType[ requiresWrapperOnCopy ] ) {
+			const { getBlockRootClientId, getBlockName, getBlockAttributes } =
+				registry.select( blockEditorStore );
+			const wrapperBlockClientId = getBlockRootClientId(
+				firstBlock.clientId
+			);
+			const wrapperBlockName = getBlockName( wrapperBlockClientId );
+
+			if ( wrapperBlockName ) {
+				_blocks = createBlock(
+					wrapperBlockName,
+					getBlockAttributes( wrapperBlockClientId ),
+					_blocks
+				);
+			}
+		}
+	}
+
+	const serialized = serialize( _blocks );
+
+	event.clipboardData.setData( 'text/plain', toPlainText( serialized ) );
+	event.clipboardData.setData( 'text/html', serialized );
+}
+
+/**
+ * Returns the blocks to be pasted from the clipboard event.
+ *
+ * @param {ClipboardEvent} event                    The clipboard event.
+ * @param {boolean}        canUserUseUnfilteredHTML Whether the user can or can't post unfiltered HTML.
+ * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
+ */
+export function getPasteBlocks( event, 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,
+		} );
+	}
+
+	return blocks;
+}
+
+/**
+ * Given a string of HTML representing serialized blocks, returns the plain
+ * text extracted after stripping the HTML of any tags and fixing line breaks.
+ *
+ * @param {string} html Serialized blocks.
+ * @return {string} The plain-text content with any html removed.
+ */
+function toPlainText( html ) {
+	// Manually handle BR tags as line breaks prior to `stripHTML` call
+	html = html.replace( /<br>/g, '\n' );
+
+	const plainText = stripHTML( html ).trim();
+
+	// Merge any consecutive line breaks
+	return plainText.replace( /\n\n+/g, '\n\n' );
+}
diff --git a/packages/block-editor/src/components/writing-mode-control/index.js b/packages/block-editor/src/components/writing-mode-control/index.js
new file mode 100644
index 00000000000000..bffccfd579c6b0
--- /dev/null
+++ b/packages/block-editor/src/components/writing-mode-control/index.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { textHorizontal, textVertical } from '@wordpress/icons';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
+
+const WRITING_MODES = [
+	{
+		label: __( 'Horizontal' ),
+		value: 'horizontal-tb',
+		icon: textHorizontal,
+	},
+	{
+		label: __( 'Vertical' ),
+		value: isRTL() ? 'vertical-lr' : 'vertical-rl',
+		icon: textVertical,
+	},
+];
+
+/**
+ * Control to facilitate writing mode selections.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected writing mode.
+ * @param {Function} props.onChange  Handles change in the writing mode selection.
+ *
+ * @return {Element} Writing Mode control.
+ */
+export default function WritingModeControl( { className, value, onChange } ) {
+	return (
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Orientation' ) }
+			className={ clsx( 'block-editor-writing-mode-control', className ) }
+			value={ value }
+			onChange={ ( newValue ) => {
+				onChange( newValue === value ? undefined : newValue );
+			} }
+		>
+			{ WRITING_MODES.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
new file mode 100644
index 00000000000000..1ef4e118fb1bbe
--- /dev/null
+++ b/packages/block-editor/src/content.scss
@@ -0,0 +1,18 @@
+@import "./components/block-icon/content.scss";
+@import "./components/block-list/content.scss";
+@import "./components/block-list-appender/content.scss";
+@import "./components/block-content-overlay/content.scss";
+@import "./components/block-draggable/content.scss";
+@import "./components/block-preview/content.scss";
+@import "./components/block-variation-picker/content.scss";
+@import "./components/button-block-appender/content.scss";
+@import "./components/default-block-appender/content.scss";
+@import "./components/iframe/content.scss";
+@import "./components/media-placeholder/content.scss";
+@import "./components/plain-text/content.scss";
+@import "./components/rich-text/content.scss";
+@import "./components/warning/content.scss";
+
+// To do: ideally the iframe does not contain UI, but there's still the block
+// placeholders that will be moved to shadow DOM in the future.
+@include wordpress-admin-schemes();
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 184f490ef6df5c..faaf5bb7f03ce1 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -1,26 +1,24 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
-import { store as blockEditorStore } from '../store';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * An array which includes all possible valid alignments,
@@ -99,8 +97,8 @@ export function addAttribute( settings ) {
 			...settings.attributes,
 			align: {
 				type: 'string',
-				// Allow for '' since it is used by updateAlignment function
-				// in withToolbarControls for special cases with defined default values.
+				// Allow for '' since it is used by the `updateAlignment` function
+				// in toolbar controls for special cases with defined default values.
 				enum: [ ...ALL_ALIGNMENTS, '' ],
 			},
 		};
@@ -109,104 +107,74 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include new toolbar controls for block
- * alignment, if block defines support.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withToolbarControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const blockEdit = <BlockEdit { ...props } />;
-		const { name: blockName } = props;
-		// Compute the block valid alignments by taking into account,
-		// if the theme supports wide alignments or not and the layout's
-		// availble alignments. We do that for conditionally rendering
-		// Slot.
-		const blockAllowedAlignments = getValidAlignments(
-			getBlockSupport( blockName, 'align' ),
-			hasBlockSupport( blockName, 'alignWide', true )
-		);
-
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		).map( ( { name } ) => name );
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
-		if ( ! validAlignments.length || isContentLocked ) {
-			return blockEdit;
-		}
+function BlockEditAlignmentToolbarControlsPure( {
+	name: blockName,
+	align,
+	setAttributes,
+} ) {
+	// Compute the block valid alignments by taking into account,
+	// if the theme supports wide alignments or not and the layout's
+	// available alignments. We do that for conditionally rendering
+	// Slot.
+	const blockAllowedAlignments = getValidAlignments(
+		getBlockSupport( blockName, 'align' ),
+		hasBlockSupport( blockName, 'alignWide', true )
+	);
+
+	const validAlignments = useAvailableAlignments(
+		blockAllowedAlignments
+	).map( ( { name } ) => name );
+	const blockEditingMode = useBlockEditingMode();
+	if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-		const updateAlignment = ( nextAlign ) => {
-			if ( ! nextAlign ) {
-				const blockType = getBlockType( props.name );
-				const blockDefaultAlign = blockType?.attributes?.align?.default;
-				if ( blockDefaultAlign ) {
-					nextAlign = '';
-				}
+	const updateAlignment = ( nextAlign ) => {
+		if ( ! nextAlign ) {
+			const blockType = getBlockType( blockName );
+			const blockDefaultAlign = blockType?.attributes?.align?.default;
+			if ( blockDefaultAlign ) {
+				nextAlign = '';
 			}
-			props.setAttributes( { align: nextAlign } );
-		};
+		}
+		setAttributes( { align: nextAlign } );
+	};
+
+	return (
+		<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockAlignmentControl
+				value={ align }
+				onChange={ updateAlignment }
+				controls={ validAlignments }
+			/>
+		</BlockControls>
+	);
+}
 
-		return (
-			<>
-				<BlockControls group="block" __experimentalShareWithChildBlocks>
-					<BlockAlignmentControl
-						value={ props.attributes.align }
-						onChange={ updateAlignment }
-						controls={ validAlignments }
-					/>
-				</BlockControls>
-				{ blockEdit }
-			</>
-		);
+export default {
+	shareWithChildBlocks: true,
+	edit: BlockEditAlignmentToolbarControlsPure,
+	useBlockProps,
+	addSaveProps: addAssignedAlign,
+	attributeKeys: [ 'align' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'align', false );
 	},
-	'withToolbarControls'
-);
-
-/**
- * Override the default block element to add alignment wrapper props.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withDataAlign = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { align } = attributes;
-		const blockAllowedAlignments = getValidAlignments(
-			getBlockSupport( name, 'align' ),
-			hasBlockSupport( name, 'alignWide', true )
-		);
-		const validAlignments = useAvailableAlignments(
-			blockAllowedAlignments
-		);
+};
 
-		// If an alignment is not assigned, there's no need to go through the
-		// effort to validate or assign its value.
-		if ( align === undefined ) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		let wrapperProps = props.wrapperProps;
-		if (
-			validAlignments.some( ( alignment ) => alignment.name === align )
-		) {
-			wrapperProps = { ...wrapperProps, 'data-align': align };
-		}
+function useBlockProps( { name, align } ) {
+	const blockAllowedAlignments = getValidAlignments(
+		getBlockSupport( name, 'align' ),
+		hasBlockSupport( name, 'alignWide', true )
+	);
+	const validAlignments = useAvailableAlignments( blockAllowedAlignments );
 
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	if ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {
+		return { 'data-align': align };
 	}
-);
+
+	return {};
+}
 
 /**
  * Override props assigned to save component to inject alignment class name if
@@ -231,7 +199,7 @@ export function addAssignedAlign( props, blockType, attributes ) {
 		hasWideBlockSupport
 	).includes( align );
 	if ( isAlignValid ) {
-		props.className = classnames( `align${ align }`, props.className );
+		props.className = clsx( `align${ align }`, props.className );
 	}
 
 	return props;
@@ -239,21 +207,6 @@ export function addAssignedAlign( props, blockType, attributes ) {
 
 addFilter(
 	'blocks.registerBlockType',
-	'core/align/addAttribute',
+	'core/editor/align/addAttribute',
 	addAttribute
 );
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/align/with-data-align',
-	withDataAlign
-);
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/align/with-toolbar-controls',
-	withToolbarControls
-);
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/align/addAssignedAlign',
-	addAssignedAlign
-);
diff --git a/packages/block-editor/src/hooks/align.native.js b/packages/block-editor/src/hooks/align.native.js
index 75b25b8dca5a6b..7a229e79870a80 100644
--- a/packages/block-editor/src/hooks/align.native.js
+++ b/packages/block-editor/src/hooks/align.native.js
@@ -8,6 +8,7 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components';
 const ALIGNMENTS = [ 'left', 'center', 'right' ];
 
 export * from './align.js';
+export { default } from './align.js';
 
 // Used to filter out blocks that don't support wide/full alignment on mobile
 addFilter(
@@ -36,8 +37,8 @@ addFilter(
 				...settings.attributes,
 				align: {
 					type: 'string',
-					// Allow for '' since it is used by updateAlignment function
-					// in withToolbarControls for special cases with defined default values.
+					// Allow for '' since it is used by the `updateAlignment` function
+					// in toolbar controls for special cases with defined default values.
 					enum: [ ...ALIGNMENTS, '' ],
 				},
 			};
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 804375da6e2d0c..e08bea1adf78eb 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -2,16 +2,16 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
+import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -51,85 +51,64 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning the anchor ID, if block supports anchor.
- *
- * @param {WPComponent} BlockEdit Original component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export const withInspectorControl = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			const hasAnchor = hasBlockSupport( props.name, 'anchor' );
+function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
 
-			if ( hasAnchor && props.isSelected ) {
-				const isWeb = Platform.OS === 'web';
-				const textControl = (
-					<TextControl
-						className="html-anchor-control"
-						label={ __( 'HTML anchor' ) }
-						help={
-							<>
-								{ __(
-									'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
-								) }
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-								{ isWeb && (
-									<ExternalLink
-										href={ __(
-											'https://wordpress.org/support/article/page-jumps/'
-										) }
-									>
-										{ __( 'Learn more about anchors' ) }
-									</ExternalLink>
-								) }
-							</>
-						}
-						value={ props.attributes.anchor || '' }
-						placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
-						onChange={ ( nextValue ) => {
-							nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-							props.setAttributes( {
-								anchor: nextValue,
-							} );
-						} }
-						autoCapitalize="none"
-						autoComplete="off"
-					/>
-				);
+	const isWeb = Platform.OS === 'web';
 
-				return (
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				className="html-anchor-control"
+				label={ __( 'HTML anchor' ) }
+				help={
 					<>
-						<BlockEdit { ...props } />
-						{ isWeb && (
-							<InspectorControls __experimentalGroup="advanced">
-								{ textControl }
-							</InspectorControls>
+						{ __(
+							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
 						) }
-						{ /*
-						 * We plan to remove scoping anchors to 'core/heading' to support
-						 * anchors for all eligble blocks. Additionally we plan to explore
-						 * leveraging InspectorAdvancedControls instead of a custom
-						 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
-						 */ }
-						{ ! isWeb && props.name === 'core/heading' && (
-							<InspectorControls>
-								<PanelBody title={ __( 'Heading settings' ) }>
-									{ textControl }
-								</PanelBody>
-							</InspectorControls>
+						{ isWeb && (
+							<>
+								{ ' ' }
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-jumps/'
+									) }
+								>
+									{ __( 'Learn more about anchors' ) }
+								</ExternalLink>
+							</>
 						) }
 					</>
-				);
-			}
+				}
+				value={ anchor || '' }
+				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				onChange={ ( nextValue ) => {
+					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+					setAttributes( {
+						anchor: nextValue,
+					} );
+				} }
+				autoCapitalize="none"
+				autoComplete="off"
+			/>
+		</InspectorControls>
+	);
+}
 
-			return <BlockEdit { ...props } />;
-		};
+export default {
+	addSaveProps,
+	edit: BlockEditAnchorControlPure,
+	attributeKeys: [ 'anchor' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'anchor' );
 	},
-	'withInspectorControl'
-);
+};
 
 /**
  * Override props assigned to save component to inject anchor ID, if block
@@ -151,13 +130,3 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 }
 
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/anchor/with-inspector-control',
-	withInspectorControl
-);
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/anchor/save-props',
-	addSaveProps
-);
diff --git a/packages/block-editor/src/hooks/anchor.scss b/packages/block-editor/src/hooks/anchor.scss
deleted file mode 100644
index 32d8557c08ac30..00000000000000
--- a/packages/block-editor/src/hooks/anchor.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.html-anchor-control .components-external-link {
-	display: block;
-	margin-top: $grid-unit-10;
-}
diff --git a/packages/block-editor/src/hooks/aria-label.js b/packages/block-editor/src/hooks/aria-label.js
index c4387daab71137..7f93aa4ff8c8b2 100644
--- a/packages/block-editor/src/hooks/aria-label.js
+++ b/packages/block-editor/src/hooks/aria-label.js
@@ -55,13 +55,16 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 	return extraProps;
 }
 
+export default {
+	addSaveProps,
+	attributeKeys: [ 'ariaLabel' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'ariaLabel' );
+	},
+};
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/ariaLabel/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/ariaLabel/save-props',
-	addSaveProps
-);
diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
new file mode 100644
index 00000000000000..3755aecbcb9d0b
--- /dev/null
+++ b/packages/block-editor/src/hooks/background.js
@@ -0,0 +1,197 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+import {
+	default as StylesBackgroundPanel,
+	useHasBackgroundPanel,
+	hasBackgroundImageValue,
+} from '../components/global-styles/background-panel';
+import { globalStylesDataKey } from '../store/private-keys';
+
+export const BACKGROUND_SUPPORT_KEY = 'background';
+
+// Initial control values.
+export const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
+};
+
+/**
+ * Determine whether there is block support for background.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBackgroundSupport( blockName, feature = 'any' ) {
+	const support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return (
+			!! support?.backgroundImage ||
+			!! support?.backgroundSize ||
+			!! support?.backgroundRepeat
+		);
+	}
+
+	return !! support?.[ feature ];
+}
+
+export function setBackgroundStyleDefaults( backgroundStyle ) {
+	if ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {
+		return;
+	}
+
+	let backgroundStylesWithDefaults;
+
+	// Set block background defaults.
+	if ( ! backgroundStyle?.backgroundSize ) {
+		backgroundStylesWithDefaults = {
+			backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+		};
+	}
+
+	if (
+		'contain' === backgroundStyle?.backgroundSize &&
+		! backgroundStyle?.backgroundPosition
+	) {
+		backgroundStylesWithDefaults = {
+			backgroundPosition:
+				BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+		};
+	}
+	return backgroundStylesWithDefaults;
+}
+
+function useBlockProps( { name, style } ) {
+	if (
+		! hasBackgroundSupport( name ) ||
+		! style?.background?.backgroundImage
+	) {
+		return;
+	}
+
+	const backgroundStyles = setBackgroundStyleDefaults( style?.background );
+
+	if ( ! backgroundStyles ) {
+		return;
+	}
+
+	return {
+		style: {
+			...backgroundStyles,
+		},
+	};
+}
+
+/**
+ * Generates a CSS class name if an background image is set.
+ *
+ * @param {Object} style A block's style attribute.
+ *
+ * @return {string} CSS class name.
+ */
+export function getBackgroundImageClasses( style ) {
+	return hasBackgroundImageValue( style ) ? 'has-background' : '';
+}
+
+function BackgroundInspectorControl( { children } ) {
+	const resetAllFilter = useCallback( ( attributes ) => {
+		return {
+			...attributes,
+			style: {
+				...attributes.style,
+				background: undefined,
+			},
+		};
+	}, [] );
+	return (
+		<InspectorControls group="background" resetAllFilter={ resetAllFilter }>
+			{ children }
+		</InspectorControls>
+	);
+}
+
+export function BackgroundImagePanel( {
+	clientId,
+	name,
+	setAttributes,
+	settings,
+} ) {
+	const { style, inheritedValue } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+			const _settings = getSettings();
+			return {
+				style: getBlockAttributes( clientId )?.style,
+				/*
+				 * To ensure we pass down the right inherited values:
+				 * @TODO 1. Pass inherited value down to all block style controls,
+				 *   See: packages/block-editor/src/hooks/style.js
+				 * @TODO 2. Add support for block style variations,
+				 *   See implementation: packages/block-editor/src/hooks/block-style-variation.js
+				 */
+				inheritedValue:
+					_settings[ globalStylesDataKey ]?.blocks?.[ name ],
+			};
+		},
+		[ clientId, name ]
+	);
+
+	if (
+		! useHasBackgroundPanel( settings ) ||
+		! hasBackgroundSupport( name, 'backgroundImage' )
+	) {
+		return null;
+	}
+
+	const onChange = ( newStyle ) => {
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const updatedSettings = {
+		...settings,
+		background: {
+			...settings.background,
+			backgroundSize:
+				settings?.background?.backgroundSize &&
+				hasBackgroundSupport( name, 'backgroundSize' ),
+		},
+	};
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedValue }
+			as={ BackgroundInspectorControl }
+			panelId={ clientId }
+			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+			settings={ updatedSettings }
+			onChange={ onChange }
+			value={ style }
+		/>
+	);
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport: hasBackgroundSupport,
+};
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
new file mode 100644
index 00000000000000..e10696cc1257d7
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -0,0 +1,325 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	getBlockBindingsSource,
+	getBlockBindingsSources,
+	getBlockType,
+} from '@wordpress/blocks';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalText as Text,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useContext, Fragment } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	canBindAttribute,
+	getBindableAttributes,
+} from '../hooks/use-bindings-attributes';
+import { unlock } from '../lock-unlock';
+import InspectorControls from '../components/inspector-controls';
+import BlockContext from '../components/block-context';
+import { useBlockEditContext } from '../components/block-edit';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
+import { store as blockEditorStore } from '../store';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+const EMPTY_OBJECT = {};
+
+const useToolsPanelDropdownMenuProps = () => {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+};
+
+function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+	const { clientId } = useBlockEditContext();
+	const registeredSources = getBlockBindingsSources();
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const currentKey = binding?.args?.key;
+	const attributeType = useSelect(
+		( select ) => {
+			const { name: blockName } =
+				select( blockEditorStore ).getBlock( clientId );
+			const _attributeType =
+				getBlockType( blockName ).attributes?.[ attribute ]?.type;
+			return _attributeType === 'rich-text' ? 'string' : _attributeType;
+		},
+		[ clientId, attribute ]
+	);
+	return (
+		<>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
+					<Menu.Group>
+						{ Object.keys( fieldsList ).length > 1 && (
+							<Menu.GroupLabel>
+								{ registeredSources[ name ].label }
+							</Menu.GroupLabel>
+						) }
+						{ Object.entries( fields )
+							.filter(
+								( [ , args ] ) => args?.type === attributeType
+							)
+							.map( ( [ key, args ] ) => (
+								<Menu.RadioItem
+									key={ key }
+									onChange={ () =>
+										updateBlockBindings( {
+											[ attribute ]: {
+												source: name,
+												args: { key },
+											},
+										} )
+									}
+									name={ attribute + '-binding' }
+									value={ key }
+									checked={ key === currentKey }
+								>
+									<Menu.ItemLabel>
+										{ args?.label }
+									</Menu.ItemLabel>
+									<Menu.ItemHelpText>
+										{ args?.value }
+									</Menu.ItemHelpText>
+								</Menu.RadioItem>
+							) ) }
+					</Menu.Group>
+					{ i !== Object.keys( fieldsList ).length - 1 && (
+						<Menu.Separator />
+					) }
+				</Fragment>
+			) ) }
+		</>
+	);
+}
+
+function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
+	const { source: sourceName, args } = binding || {};
+	const sourceProps = getBlockBindingsSource( sourceName );
+	const isSourceInvalid = ! sourceProps;
+	return (
+		<VStack className="block-editor-bindings__item" spacing={ 0 }>
+			<Text truncate>{ attribute }</Text>
+			{ !! binding && (
+				<Text
+					truncate
+					variant={ ! isSourceInvalid && 'muted' }
+					isDestructive={ isSourceInvalid }
+				>
+					{ isSourceInvalid
+						? __( 'Invalid source' )
+						: fieldsList?.[ sourceName ]?.[ args?.key ]?.label ||
+						  sourceProps?.label ||
+						  sourceName }
+				</Text>
+			) }
+		</VStack>
+	);
+}
+
+function ReadOnlyBlockBindingsPanelItems( { bindings, fieldsList } ) {
+	return (
+		<>
+			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
+				<Item key={ attribute }>
+					<BlockBindingsAttribute
+						attribute={ attribute }
+						binding={ binding }
+						fieldsList={ fieldsList }
+					/>
+				</Item>
+			) ) }
+		</>
+	);
+}
+
+function EditableBlockBindingsPanelItems( {
+	attributes,
+	bindings,
+	fieldsList,
+} ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return (
+		<>
+			{ attributes.map( ( attribute ) => {
+				const binding = bindings[ attribute ];
+				return (
+					<ToolsPanelItem
+						key={ attribute }
+						hasValue={ () => !! binding }
+						label={ attribute }
+						onDeselect={ () => {
+							updateBlockBindings( {
+								[ attribute ]: undefined,
+							} );
+						} }
+					>
+						<Menu
+							placement={
+								isMobile ? 'bottom-start' : 'left-start'
+							}
+							gutter={ isMobile ? 8 : 36 }
+							trigger={
+								<Item>
+									<BlockBindingsAttribute
+										attribute={ attribute }
+										binding={ binding }
+										fieldsList={ fieldsList }
+									/>
+								</Item>
+							}
+						>
+							<BlockBindingsPanelDropdown
+								fieldsList={ fieldsList }
+								attribute={ attribute }
+								binding={ binding }
+							/>
+						</Menu>
+					</ToolsPanelItem>
+				);
+			} ) }
+		</>
+	);
+}
+
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
+	const blockContext = useContext( BlockContext );
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	// `useSelect` is used purposely here to ensure `getFieldsList`
+	// is updated whenever there are updates in block context.
+	// `source.getFieldsList` may also call a selector via `select`.
+	const _fieldsList = {};
+	const { fieldsList, canUpdateBlockBindings } = useSelect(
+		( select ) => {
+			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+				return EMPTY_OBJECT;
+			}
+			const registeredSources = getBlockBindingsSources();
+			Object.entries( registeredSources ).forEach(
+				( [ sourceName, { getFieldsList, usesContext } ] ) => {
+					if ( getFieldsList ) {
+						// Populate context.
+						const context = {};
+						if ( usesContext?.length ) {
+							for ( const key of usesContext ) {
+								context[ key ] = blockContext[ key ];
+							}
+						}
+						const sourceList = getFieldsList( {
+							select,
+							context,
+						} );
+						// Only add source if the list is not empty.
+						if ( Object.keys( sourceList || {} ).length ) {
+							_fieldsList[ sourceName ] = { ...sourceList };
+						}
+					}
+				}
+			);
+			return {
+				fieldsList:
+					Object.values( _fieldsList ).length > 0
+						? _fieldsList
+						: EMPTY_OBJECT,
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+			};
+		},
+		[ blockContext, bindableAttributes ]
+	);
+	// Return early if there are no bindable attributes.
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		return null;
+	}
+	// Filter bindings to only show bindable attributes and remove pattern overrides.
+	const { bindings } = metadata || {};
+	const filteredBindings = { ...bindings };
+	Object.keys( filteredBindings ).forEach( ( key ) => {
+		if (
+			! canBindAttribute( blockName, key ) ||
+			filteredBindings[ key ].source === 'core/pattern-overrides'
+		) {
+			delete filteredBindings[ key ];
+		}
+	} );
+
+	// Lock the UI when the user can't update bindings or there are no fields to connect to.
+	const readOnly =
+		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
+
+	if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="bindings">
+			<ToolsPanel
+				label={ __( 'Attributes' ) }
+				resetAll={ () => {
+					removeAllBlockBindings();
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+				className="block-editor-bindings__panel"
+			>
+				<ItemGroup isBordered isSeparated>
+					{ readOnly ? (
+						<ReadOnlyBlockBindingsPanelItems
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+						/>
+					) : (
+						<EditableBlockBindingsPanelItems
+							attributes={ bindableAttributes }
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+						/>
+					) }
+				</ItemGroup>
+				{ /*
+					Use a div element to make the ToolsPanelHiddenInnerWrapper
+					toggle the visibility of this help text automatically.
+				*/ }
+				<Text as="div" variant="muted">
+					<p>
+						{ __(
+							'Attributes connected to custom fields or other dynamic data.'
+						) }
+					</p>
+				</Text>
+			</ToolsPanel>
+		</InspectorControls>
+	);
+};
+
+export default {
+	edit: BlockBindingsPanel,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};
diff --git a/packages/block-editor/src/hooks/block-bindings.scss b/packages/block-editor/src/hooks/block-bindings.scss
new file mode 100644
index 00000000000000..e8f05895922f0f
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-bindings.scss
@@ -0,0 +1,6 @@
+div.block-editor-bindings__panel {
+	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+	button:hover .block-editor-bindings__item span {
+		color: inherit;
+	}
+}
diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
new file mode 100644
index 00000000000000..04a2313b629ba7
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -0,0 +1,241 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment, useMemo } from '@wordpress/element';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+
+const EMPTY_OBJECT = {};
+
+function BlockHooksControlPure( {
+	name,
+	clientId,
+	metadata: { ignoredHookedBlocks = [] } = {},
+} ) {
+	const blockTypes = useSelect(
+		( select ) => select( blocksStore ).getBlockTypes(),
+		[]
+	);
+
+	// A hooked block added via a filter will not be exposed through a block
+	// type's `blockHooks` property; however, if the containing layout has been
+	// modified, it will be present in the anchor block's `ignoredHookedBlocks`
+	// metadata.
+	const hookedBlocksForCurrentBlock = useMemo(
+		() =>
+			blockTypes?.filter(
+				( { name: blockName, blockHooks } ) =>
+					( blockHooks && name in blockHooks ) ||
+					ignoredHookedBlocks.includes( blockName )
+			),
+		[ blockTypes, name, ignoredHookedBlocks ]
+	);
+
+	const hookedBlockClientIds = useSelect(
+		( select ) => {
+			const { getBlocks, getBlockRootClientId, getGlobalBlockCount } =
+				select( blockEditorStore );
+
+			const rootClientId = getBlockRootClientId( clientId );
+			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
+				( clientIds, block ) => {
+					// If the block doesn't exist anywhere in the block tree,
+					// we know that we have to set the toggle to disabled.
+					if ( getGlobalBlockCount( block.name ) === 0 ) {
+						return clientIds;
+					}
+
+					const relativePosition = block?.blockHooks?.[ name ];
+					let candidates;
+
+					switch ( relativePosition ) {
+						case 'before':
+						case 'after':
+							// Any of the current block's siblings (with the right block type) qualifies
+							// as a hooked block (inserted `before` or `after` the current one), as the block
+							// might've been automatically inserted and then moved around a bit by the user.
+							candidates = getBlocks( rootClientId );
+							break;
+
+						case 'first_child':
+						case 'last_child':
+							// Any of the current block's child blocks (with the right block type) qualifies
+							// as a hooked first or last child block, as the block might've been automatically
+							// inserted and then moved around a bit by the user.
+							candidates = getBlocks( clientId );
+							break;
+
+						case undefined:
+							// If we haven't found a blockHooks field with a relative position for the hooked
+							// block, it means that it was added by a filter. In this case, we look for the block
+							// both among the current block's siblings and its children.
+							candidates = [
+								...getBlocks( rootClientId ),
+								...getBlocks( clientId ),
+							];
+							break;
+					}
+
+					const hookedBlock = candidates?.find(
+						( candidate ) => candidate.name === block.name
+					);
+
+					// If the block exists in the designated location, we consider it hooked
+					// and show the toggle as enabled.
+					if ( hookedBlock ) {
+						return {
+							...clientIds,
+							[ block.name ]: hookedBlock.clientId,
+						};
+					}
+
+					// If no hooked block was found in any of its designated locations,
+					// we set the toggle to disabled.
+					return clientIds;
+				},
+				{}
+			);
+
+			if ( Object.values( _hookedBlockClientIds ).length > 0 ) {
+				return _hookedBlockClientIds;
+			}
+
+			return EMPTY_OBJECT;
+		},
+		[ hookedBlocksForCurrentBlock, name, clientId ]
+	);
+
+	const { getBlockIndex, getBlockCount, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
+
+	if ( ! hookedBlocksForCurrentBlock.length ) {
+		return null;
+	}
+
+	// Group by block namespace (i.e. prefix before the slash).
+	const groupedHookedBlocks = hookedBlocksForCurrentBlock.reduce(
+		( groups, block ) => {
+			const [ namespace ] = block.name.split( '/' );
+			if ( ! groups[ namespace ] ) {
+				groups[ namespace ] = [];
+			}
+			groups[ namespace ].push( block );
+			return groups;
+		},
+		{}
+	);
+
+	const insertBlockIntoDesignatedLocation = ( block, relativePosition ) => {
+		const blockIndex = getBlockIndex( clientId );
+		const innerBlocksLength = getBlockCount( clientId );
+		const rootClientId = getBlockRootClientId( clientId );
+
+		switch ( relativePosition ) {
+			case 'before':
+			case 'after':
+				insertBlock(
+					block,
+					relativePosition === 'after' ? blockIndex + 1 : blockIndex,
+					rootClientId, // Insert as a child of the current block's parent
+					false
+				);
+				break;
+
+			case 'first_child':
+			case 'last_child':
+				insertBlock(
+					block,
+					// TODO: It'd be great if insertBlock() would accept negative indices for insertion.
+					relativePosition === 'first_child' ? 0 : innerBlocksLength,
+					clientId, // Insert as a child of the current block.
+					false
+				);
+				break;
+
+			case undefined:
+				// If we do not know the relative position, it is because the block was
+				// added via a filter. In this case, we default to inserting it after the
+				// current block.
+				insertBlock(
+					block,
+					blockIndex + 1,
+					rootClientId, // Insert as a child of the current block's parent
+					false
+				);
+				break;
+		}
+	};
+
+	return (
+		<InspectorControls>
+			<PanelBody
+				className="block-editor-hooks__block-hooks"
+				title={ __( 'Plugins' ) }
+				initialOpen
+			>
+				<p className="block-editor-hooks__block-hooks-helptext">
+					{ __(
+						'Manage the inclusion of blocks added automatically by plugins.'
+					) }
+				</p>
+				{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {
+					return (
+						<Fragment key={ vendor }>
+							<h3>{ vendor }</h3>
+							{ groupedHookedBlocks[ vendor ].map( ( block ) => {
+								const checked =
+									block.name in hookedBlockClientIds;
+
+								return (
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ checked }
+										key={ block.title }
+										label={ block.title }
+										onChange={ () => {
+											if ( ! checked ) {
+												// Create and insert block.
+												const relativePosition =
+													block.blockHooks[ name ];
+												insertBlockIntoDesignatedLocation(
+													createBlock( block.name ),
+													relativePosition
+												);
+												return;
+											}
+
+											// Remove block.
+											removeBlock(
+												hookedBlockClientIds[
+													block.name
+												],
+												false
+											);
+										} }
+									/>
+								);
+							} ) }
+						</Fragment>
+					);
+				} ) }
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+export default {
+	edit: BlockHooksControlPure,
+	attributeKeys: [ 'metadata' ],
+	hasSupport() {
+		return true;
+	},
+};
diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/packages/block-editor/src/hooks/block-hooks.scss
new file mode 100644
index 00000000000000..03cabd638d8684
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-hooks.scss
@@ -0,0 +1,14 @@
+.block-editor-hooks__block-hooks {
+	/**
+	 * Un-reverse the flex direction for the toggle's label.
+	 */
+	.components-toggle-control .components-h-stack .components-h-stack {
+		flex-direction: row;
+	}
+
+	.block-editor-hooks__block-hooks-helptext {
+		color: $gray-700;
+		font-size: $helptext-font-size;
+		margin-bottom: $grid-unit-20;
+	}
+}
diff --git a/packages/block-editor/src/hooks/block-renaming.js b/packages/block-editor/src/hooks/block-renaming.js
new file mode 100644
index 00000000000000..5db06d1a652d41
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-renaming.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addLabelCallback( settings ) {
+	// If blocks provide their own label callback, do not override it.
+	if ( settings.__experimentalLabel ) {
+		return settings;
+	}
+
+	const supportsBlockNaming = hasBlockSupport(
+		settings,
+		'renaming',
+		true // default value
+	);
+
+	// Check whether block metadata is supported before using it.
+	if ( supportsBlockNaming ) {
+		settings.__experimentalLabel = ( attributes, { context } ) => {
+			const { metadata } = attributes;
+
+			// In the list view, use the block's name attribute as the label.
+			if ( context === 'list-view' && metadata?.name ) {
+				return metadata.name;
+			}
+		};
+	}
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/metadata/addLabelCallback',
+	addLabelCallback
+);
diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
new file mode 100644
index 00000000000000..65582d0c0cf948
--- /dev/null
+++ b/packages/block-editor/src/hooks/block-style-variation.js
@@ -0,0 +1,373 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	GlobalStylesContext,
+	toStyles,
+	getBlockSelectors,
+} from '../components/global-styles';
+import { usePrivateStyleOverride } from './utils';
+import { getValueFromObjectPath } from '../utils/object';
+import { store as blockEditorStore } from '../store';
+import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
+
+const VARIATION_PREFIX = 'is-style-';
+
+function getVariationMatches( className ) {
+	if ( ! className ) {
+		return [];
+	}
+	return className.split( /\s+/ ).reduce( ( matches, name ) => {
+		if ( name.startsWith( VARIATION_PREFIX ) ) {
+			const match = name.slice( VARIATION_PREFIX.length );
+			if ( match !== 'default' ) {
+				matches.push( match );
+			}
+		}
+		return matches;
+	}, [] );
+}
+
+/**
+ * Get the first block style variation that has been registered from the class string.
+ *
+ * @param {string} className        CSS class string for a block.
+ * @param {Array}  registeredStyles Currently registered block styles.
+ *
+ * @return {string|null} The name of the first registered variation.
+ */
+function getVariationNameFromClass( className, registeredStyles = [] ) {
+	// The global flag affects how capturing groups work in JS. So the regex
+	// below will only return full CSS classes not just the variation name.
+	const matches = getVariationMatches( className );
+
+	if ( ! matches ) {
+		return null;
+	}
+
+	for ( const variation of matches ) {
+		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
+			return variation;
+		}
+	}
+	return null;
+}
+
+// A helper component to apply a style override using the useStyleOverride hook.
+function OverrideStyles( { override } ) {
+	usePrivateStyleOverride( override );
+}
+
+/**
+ * This component is used to generate new block style variation overrides
+ * based on an incoming theme config. If a matching style is found in the config,
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor. Its use is
+ * subject to change.
+ *
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element|undefined} An array of new block variation overrides.
+ */
+export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
+	const { getBlockStyles, overrides } = useSelect(
+		( select ) => ( {
+			getBlockStyles: select( blocksStore ).getBlockStyles,
+			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		} ),
+		[]
+	);
+	const { getBlockName } = useSelect( blockEditorStore );
+
+	const overridesWithConfig = useMemo( () => {
+		if ( ! overrides?.length ) {
+			return;
+		}
+		const newOverrides = [];
+		const overriddenClientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! overriddenClientIds.includes( override.clientId )
+			) {
+				const blockName = getBlockName( override.clientId );
+				const configStyles =
+					config?.styles?.blocks?.[ blockName ]?.variations?.[
+						override.variation
+					];
+				if ( configStyles ) {
+					const variationConfig = {
+						settings: config?.settings,
+						// The variation style data is all that is needed to generate
+						// the styles for the current application to a block. The variation
+						// name is updated to match the instance specific class name.
+						styles: {
+							blocks: {
+								[ blockName ]: {
+									variations: {
+										[ `${ override.variation }-${ override.clientId }` ]:
+											configStyles,
+									},
+								},
+							},
+						},
+					};
+					const blockSelectors = getBlockSelectors(
+						getBlockTypes(),
+						getBlockStyles,
+						override.clientId
+					);
+					const hasBlockGapSupport = false;
+					const hasFallbackGapSupport = true;
+					const disableLayoutStyles = true;
+					const disableRootPadding = true;
+					const variationStyles = toStyles(
+						variationConfig,
+						blockSelectors,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						disableLayoutStyles,
+						disableRootPadding,
+						{
+							blockGap: false,
+							blockStyles: true,
+							layoutStyles: false,
+							marginReset: false,
+							presets: false,
+							rootPadding: false,
+							variationStyles: true,
+						}
+					);
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					overriddenClientIds.push( override.clientId );
+				}
+			}
+		}
+		return newOverrides;
+	}, [ config, overrides, getBlockStyles, getBlockName ] );
+
+	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
+		return;
+	}
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
+}
+
+/**
+ * Retrieves any variation styles data and resolves any referenced values.
+ *
+ * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
+ * @param {string}    name         The name of the desired block type.
+ * @param {variation} variation    The of the block style variation to retrieve data for.
+ *
+ * @return {Object|undefined} The global styles data for the specified variation.
+ */
+export function getVariationStylesWithRefValues(
+	globalStyles,
+	name,
+	variation
+) {
+	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
+		return;
+	}
+
+	// Helper to recursively look for `ref` values to resolve.
+	const replaceRefs = ( variationStyles ) => {
+		Object.keys( variationStyles ).forEach( ( key ) => {
+			const value = variationStyles[ key ];
+
+			// Only process objects.
+			if ( typeof value === 'object' && value !== null ) {
+				// Process `ref` value if present.
+				if ( value.ref !== undefined ) {
+					if (
+						typeof value.ref !== 'string' ||
+						value.ref.trim() === ''
+					) {
+						// Remove invalid ref.
+						delete variationStyles[ key ];
+					} else {
+						// Resolve `ref` value.
+						const refValue = getValueFromObjectPath(
+							globalStyles,
+							value.ref
+						);
+
+						if ( refValue ) {
+							variationStyles[ key ] = refValue;
+						} else {
+							delete variationStyles[ key ];
+						}
+					}
+				} else {
+					// Recursively resolve `ref` values in nested objects.
+					replaceRefs( value );
+
+					// After recursion, if value is empty due to explicitly
+					// `undefined` ref value, remove it.
+					if ( Object.keys( value ).length === 0 ) {
+						delete variationStyles[ key ];
+					}
+				}
+			}
+		} );
+	};
+
+	// Deep clone variation node to avoid mutating it within global styles and losing refs.
+	const styles = JSON.parse(
+		JSON.stringify(
+			globalStyles.styles.blocks[ name ].variations[ variation ]
+		)
+	);
+	replaceRefs( styles );
+
+	return styles;
+}
+
+function useBlockStyleVariation( name, variation, clientId ) {
+	// Prefer global styles data in GlobalStylesContext, which are available
+	// if in the site editor. Otherwise fall back to whatever is in the
+	// editor settings and available in the post editor.
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	const { globalSettings, globalStyles } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			globalSettings: settings.__experimentalFeatures,
+			globalStyles: settings[ globalStylesDataKey ],
+		};
+	}, [] );
+
+	return useMemo( () => {
+		const variationStyles = getVariationStylesWithRefValues(
+			{
+				settings: mergedConfig?.settings ?? globalSettings,
+				styles: mergedConfig?.styles ?? globalStyles,
+			},
+			name,
+			variation
+		);
+
+		return {
+			settings: mergedConfig?.settings ?? globalSettings,
+			// The variation style data is all that is needed to generate
+			// the styles for the current application to a block. The variation
+			// name is updated to match the instance specific class name.
+			styles: {
+				blocks: {
+					[ name ]: {
+						variations: {
+							[ `${ variation }-${ clientId }` ]: variationStyles,
+						},
+					},
+				},
+			},
+		};
+	}, [
+		mergedConfig,
+		globalSettings,
+		globalStyles,
+		variation,
+		clientId,
+		name,
+	] );
+}
+
+// Rather than leveraging `useInstanceId` here, the `clientId` is used.
+// This is so that the variation style override's ID is predictable
+// when the order of applied style variations changes.
+function useBlockProps( { name, className, clientId } ) {
+	const { getBlockStyles } = useSelect( blocksStore );
+
+	const registeredStyles = getBlockStyles( name );
+	const variation = getVariationNameFromClass( className, registeredStyles );
+	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
+
+	const { settings, styles } = useBlockStyleVariation(
+		name,
+		variation,
+		clientId
+	);
+
+	const variationStyles = useMemo( () => {
+		if ( ! variation ) {
+			return;
+		}
+
+		const variationConfig = { settings, styles };
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles,
+			clientId
+		);
+		const hasBlockGapSupport = false;
+		const hasFallbackGapSupport = true;
+		const disableLayoutStyles = true;
+		const disableRootPadding = true;
+
+		return toStyles(
+			variationConfig,
+			blockSelectors,
+			hasBlockGapSupport,
+			hasFallbackGapSupport,
+			disableLayoutStyles,
+			disableRootPadding,
+			{
+				blockGap: false,
+				blockStyles: true,
+				layoutStyles: false,
+				marginReset: false,
+				presets: false,
+				rootPadding: false,
+				variationStyles: true,
+			}
+		);
+	}, [ variation, settings, styles, getBlockStyles, clientId ] );
+
+	usePrivateStyleOverride( {
+		id: `variation-${ clientId }`,
+		css: variationStyles,
+		__unstableType: 'variation',
+		variation,
+		// The clientId will be stored with the override and used to ensure
+		// the order of overrides matches the order of blocks so that the
+		// correct CSS cascade is maintained.
+		clientId,
+	} );
+
+	return variation ? { className: variationClass } : {};
+}
+
+export default {
+	hasSupport: () => true,
+	attributeKeys: [ 'className' ],
+	isMatch: ( { className } ) => getVariationMatches( className ).length > 0,
+	useBlockProps,
+};
diff --git a/packages/block-editor/src/hooks/border-radius.js b/packages/block-editor/src/hooks/border-radius.js
deleted file mode 100644
index 6b247e141b6818..00000000000000
--- a/packages/block-editor/src/hooks/border-radius.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Internal dependencies
- */
-import BorderRadiusControl from '../components/border-radius-control';
-import { cleanEmptyObject } from './utils';
-import { removeBorderAttribute } from './border';
-
-/**
- * Inspector control panel containing the border radius related configuration.
- *
- * @param {Object} props Block properties.
- *
- * @return {WPElement} Border radius edit element.
- */
-export function BorderRadiusEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	const onChange = ( newRadius ) => {
-		const newStyle = cleanEmptyObject( {
-			...style,
-			border: {
-				...style?.border,
-				radius: newRadius,
-			},
-		} );
-
-		setAttributes( { style: newStyle } );
-	};
-
-	return (
-		<BorderRadiusControl
-			values={ style?.border?.radius }
-			onChange={ onChange }
-		/>
-	);
-}
-
-/**
- * Checks if there is a current value in the border radius block support
- * attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a border radius value set.
- */
-export function hasBorderRadiusValue( props ) {
-	const borderRadius = props.attributes.style?.border?.radius;
-
-	if ( typeof borderRadius === 'object' ) {
-		return Object.entries( borderRadius ).some( Boolean );
-	}
-
-	return !! borderRadius;
-}
-
-/**
- * Resets the border radius block support attributes. This can be used when
- * disabling the border radius support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetBorderRadius( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-	setAttributes( { style: removeBorderAttribute( style, 'radius' ) } );
-}
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 11ee3e95f4d663..14b3dbf7669b3a 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -1,71 +1,38 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { Platform } from '@wordpress/element';
+import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
+import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
+import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import {
-	BorderRadiusEdit,
-	hasBorderRadiusValue,
-	resetBorderRadius,
-} from './border-radius';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
-
-export const BORDER_SUPPORT_KEY = '__experimentalBorder';
-
-const borderSides = [ 'top', 'right', 'bottom', 'left' ];
-
-const hasBorderValue = ( props ) => {
-	const { borderColor, style } = props.attributes;
-	return isDefinedBorder( style?.border ) || !! borderColor;
-};
-
-// The border color, style, and width are omitted so they get undefined. The
-// border radius is separate and must retain its selection.
-const resetBorder = ( { attributes = {}, setAttributes } ) => {
-	const { style } = attributes;
-	setAttributes( {
-		borderColor: undefined,
-		style: {
-			...style,
-			border: cleanEmptyObject( {
-				radius: style?.border?.radius,
-			} ),
-		},
-	} );
-};
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
+import {
+	useHasBorderPanel,
+	useHasBorderPanelControls,
+	BorderPanel as StylesBorderPanel,
+} from '../components/global-styles';
+import { store as blockEditorStore } from '../store';
+import { __ } from '@wordpress/i18n';
 
-const resetBorderFilter = ( newAttributes ) => ( {
-	...newAttributes,
-	borderColor: undefined,
-	style: {
-		...newAttributes.style,
-		border: {
-			radius: newAttributes.style?.border?.radius,
-		},
-	},
-} );
+export const BORDER_SUPPORT_KEY = 'border';
+export const SHADOW_SUPPORT_KEY = 'shadow';
 
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
@@ -103,51 +70,6 @@ export const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {
 	return colorObject ? colorObject : { color: customColor };
 };
 
-const getBorderObject = ( attributes, colors ) => {
-	const { borderColor, style } = attributes;
-	const { border: borderStyles } = style || {};
-
-	// If we have a named color for a flat border. Fetch that color object and
-	// apply that color's value to the color property within the style object.
-	if ( borderColor ) {
-		const { color } = getMultiOriginColor( {
-			colors,
-			namedColor: borderColor,
-		} );
-
-		return color ? { ...borderStyles, color } : borderStyles;
-	}
-
-	// Individual side border color slugs are stored within the border style
-	// object. If we don't have a border styles object we have nothing further
-	// to hydrate.
-	if ( ! borderStyles ) {
-		return borderStyles;
-	}
-
-	// If we have named colors for the individual side borders, retrieve their
-	// related color objects and apply the real color values to the split
-	// border objects.
-	const hydratedBorderStyles = { ...borderStyles };
-	borderSides.forEach( ( side ) => {
-		const colorSlug = getColorSlugFromVariable(
-			hydratedBorderStyles[ side ]?.color
-		);
-		if ( colorSlug ) {
-			const { color } = getMultiOriginColor( {
-				colors,
-				namedColor: colorSlug,
-			} );
-			hydratedBorderStyles[ side ] = {
-				...hydratedBorderStyles[ side ],
-				color,
-			};
-		}
-	} );
-
-	return hydratedBorderStyles;
-};
-
 function getColorSlugFromVariable( value ) {
 	const namedColor = /var:preset\|color\|(.+)/.exec( value );
 	if ( namedColor && namedColor[ 1 ] ) {
@@ -156,151 +78,102 @@ function getColorSlugFromVariable( value ) {
 	return null;
 }
 
-export function BorderPanel( props ) {
-	const { attributes, clientId, setAttributes } = props;
-	const { style } = attributes;
-	const { colors } = useMultipleOriginColorsAndGradients();
+function styleToAttributes( style ) {
+	if ( hasSplitBorders( style?.border ) ) {
+		return {
+			style,
+			borderColor: undefined,
+		};
+	}
 
-	const isSupported = hasBorderSupport( props.name );
-	const isColorSupported =
-		useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
-	const isRadiusSupported =
-		useSetting( 'border.radius' ) &&
-		hasBorderSupport( props.name, 'radius' );
-	const isStyleSupported =
-		useSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );
-	const isWidthSupported =
-		useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
-
-	const isDisabled = [
-		! isColorSupported,
-		! isRadiusSupported,
-		! isStyleSupported,
-		! isWidthSupported,
-	].every( Boolean );
-
-	if ( isDisabled || ! isSupported ) {
-		return null;
+	const borderColorValue = style?.border?.color;
+	const borderColorSlug = borderColorValue?.startsWith( 'var:preset|color|' )
+		? borderColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const updatedStyle = { ...style };
+	updatedStyle.border = {
+		...updatedStyle.border,
+		color: borderColorSlug ? undefined : borderColorValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		borderColor: borderColorSlug,
+	};
+}
+
+function attributesToStyle( attributes ) {
+	if ( hasSplitBorders( attributes.style?.border ) ) {
+		return attributes.style;
 	}
+	return {
+		...attributes.style,
+		border: {
+			...attributes.style?.border,
+			color: attributes.borderColor
+				? 'var:preset|color|' + attributes.borderColor
+				: attributes.style?.border?.color,
+		},
+	};
+}
 
-	const defaultBorderControls = getBlockSupport( props.name, [
-		BORDER_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
-
-	const showBorderByDefault =
-		defaultBorderControls?.color || defaultBorderControls?.width;
-
-	const onBorderChange = ( newBorder ) => {
-		// Filter out named colors and apply them to appropriate block
-		// attributes so that CSS classes can be used to apply those colors.
-		// e.g. has-primary-border-top-color.
-
-		let newBorderStyles = { ...newBorder };
-		let newBorderColor;
-
-		if ( hasSplitBorders( newBorder ) ) {
-			// For each side check if the side has a color value set
-			// If so, determine if it belongs to a named color, in which case
-			// we update the color property.
-			//
-			// This deliberately overwrites `newBorderStyles` to avoid mutating
-			// the passed object which causes problems otherwise.
-			newBorderStyles = {
-				top: { ...newBorder.top },
-				right: { ...newBorder.right },
-				bottom: { ...newBorder.bottom },
-				left: { ...newBorder.left },
+function BordersInspectorControl( { label, children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
 			};
+		},
+		[ resetAllFilter ]
+	);
 
-			borderSides.forEach( ( side ) => {
-				if ( newBorder[ side ]?.color ) {
-					const colorObject = getMultiOriginColor( {
-						colors,
-						customColor: newBorder[ side ]?.color,
-					} );
-
-					if ( colorObject.slug ) {
-						newBorderStyles[
-							side
-						].color = `var:preset|color|${ colorObject.slug }`;
-					}
-				}
-			} );
-		} else if ( newBorder?.color ) {
-			// We have a flat border configuration. Apply named color slug to
-			// `borderColor` attribute and clear color style property if found.
-			const customColor = newBorder?.color;
-			const colorObject = getMultiOriginColor( { colors, customColor } );
-
-			if ( colorObject.slug ) {
-				newBorderColor = colorObject.slug;
-				newBorderStyles.color = undefined;
-			}
-		}
+	return (
+		<InspectorControls
+			group="border"
+			resetAllFilter={ attributesResetAllFilter }
+			label={ label }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
+
+export function BorderPanel( { clientId, name, setAttributes, settings } ) {
+	const isEnabled = useHasBorderPanel( settings );
+	function selector( select ) {
+		const { style, borderColor } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, borderColor };
+	}
+	const { style, borderColor } = useSelect( selector, [ clientId ] );
+	const value = useMemo( () => {
+		return attributesToStyle( { style, borderColor } );
+	}, [ style, borderColor ] );
 
-		// Ensure previous border radius styles are maintained and clean
-		// overall result for empty objects or properties.
-		const newStyle = cleanEmptyObject( {
-			...style,
-			border: { radius: style?.border?.radius, ...newBorderStyles },
-		} );
-
-		setAttributes( {
-			style: newStyle,
-			borderColor: newBorderColor,
-		} );
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
-	const hydratedBorder = getBorderObject( attributes, colors );
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const defaultControls = {
+		...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ),
+		...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ),
+	};
 
 	return (
-		<InspectorControls __experimentalGroup="border">
-			{ ( isWidthSupported || isColorSupported ) && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderValue( props ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder( props ) }
-					isShownByDefault={ showBorderByDefault }
-					resetAllFilter={ resetBorderFilter }
-					panelId={ clientId }
-				>
-					<BorderBoxControl
-						colors={ colors }
-						enableAlpha={ true }
-						enableStyle={ isStyleSupported }
-						onChange={ onBorderChange }
-						popoverOffset={ 40 }
-						popoverPlacement="left-start"
-						size="__unstable-large"
-						value={ hydratedBorder }
-						__experimentalHasMultipleOrigins={ true }
-						__experimentalIsRenderedInSidebar={ true }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ isRadiusSupported && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderRadiusValue( props ) }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => resetBorderRadius( props ) }
-					isShownByDefault={ defaultBorderControls?.radius }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							border: {
-								...newAttributes.style?.border,
-								radius: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<BorderRadiusEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<StylesBorderPanel
+			as={ BordersInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+		/>
 	);
 }
 
@@ -335,6 +208,45 @@ export function hasBorderSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+/**
+ * Determine whether there is block support for shadow properties.
+ *
+ * @param {string} blockName Block name.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasShadowSupport( blockName ) {
+	return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
+}
+
+export function useBorderPanelLabel( {
+	blockName,
+	hasBorderControl,
+	hasShadowControl,
+} = {} ) {
+	const settings = useBlockSettings( blockName );
+	const controls = useHasBorderPanelControls( settings );
+
+	if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
+		hasBorderControl =
+			controls?.hasBorderColor ||
+			controls?.hasBorderStyle ||
+			controls?.hasBorderWidth ||
+			controls?.hasBorderRadius;
+		hasShadowControl = controls?.hasShadow;
+	}
+
+	if ( hasBorderControl && hasShadowControl ) {
+		return __( 'Border & Shadow' );
+	}
+
+	if ( hasShadowControl ) {
+		return __( 'Shadow' );
+	}
+
+	return __( 'Border' );
+}
+
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.
@@ -387,22 +299,22 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject border color.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type definition.
- * @param {Object} attributes Block's attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type definition.
+ * @param {Object}        attributes      Block's attributes.
  *
  * @return {Object} Filtered props to apply to save element.
  */
-function addSaveProps( props, blockType, attributes ) {
+function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasBorderSupport( blockType, 'color' ) ||
-		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
+		! hasBorderSupport( blockNameOrType, 'color' ) ||
+		shouldSkipSerialization( blockNameOrType, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return props;
 	}
 
 	const borderClasses = getBorderClasses( attributes );
-	const newClassName = classnames( props.className, borderClasses );
+	const newClassName = clsx( props.className, borderClasses );
 
 	// If we are clearing the last of the previous classes in `className`
 	// set it to `undefined` to avoid rendering empty DOM attributes.
@@ -423,127 +335,69 @@ export function getBorderClasses( attributes ) {
 	const { borderColor, style } = attributes;
 	const borderColorClass = getColorClassName( 'border-color', borderColor );
 
-	return classnames( {
+	return clsx( {
 		'has-border-color': borderColor || style?.border?.color,
 		[ borderColorClass ]: !! borderColorClass,
 	} );
 }
 
-/**
- * Filters the registered block settings to apply border color styles and
- * classnames to the block edit wrapper.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
+function useBlockProps( { name, borderColor, style } ) {
+	const { colors } = useMultipleOriginColorsAndGradients();
+
 	if (
-		! hasBorderSupport( settings, 'color' ) ||
-		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
+		! hasBorderSupport( name, 'color' ) ||
+		shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
 	) {
-		return settings;
+		return {};
 	}
 
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
+	const { color: borderColorValue } = getMultiOriginColor( {
+		colors,
+		namedColor: borderColor,
+	} );
+	const { color: borderTopColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
+	} );
+	const { color: borderRightColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
+	} );
 
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
+	const { color: borderBottomColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.bottom?.color ),
+	} );
+	const { color: borderLeftColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
+	} );
 
-		return addSaveProps( props, settings, attributes );
+	const extraStyles = {
+		borderTopColor: borderTopColor || borderColorValue,
+		borderRightColor: borderRightColor || borderColorValue,
+		borderBottomColor: borderBottomColor || borderColorValue,
+		borderLeftColor: borderLeftColor || borderColorValue,
 	};
 
-	return settings;
+	return addSaveProps(
+		{ style: cleanEmptyObject( extraStyles ) || {} },
+		name,
+		{ borderColor, style }
+	);
 }
 
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withBorderColorPaletteStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { borderColor, style } = attributes;
-		const { colors } = useMultipleOriginColorsAndGradients();
-
-		if (
-			! hasBorderSupport( name, 'color' ) ||
-			shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
-		) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		const { color: borderColorValue } = getMultiOriginColor( {
-			colors,
-			namedColor: borderColor,
-		} );
-		const { color: borderTopColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
-		} );
-		const { color: borderRightColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
-		} );
-
-		const { color: borderBottomColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable(
-				style?.border?.bottom?.color
-			),
-		} );
-		const { color: borderLeftColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
-		} );
-
-		const extraStyles = {
-			borderTopColor: borderTopColor || borderColorValue,
-			borderRightColor: borderRightColor || borderColorValue,
-			borderBottomColor: borderBottomColor || borderColorValue,
-			borderLeftColor: borderLeftColor || borderColorValue,
-		};
-
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = {
-			...props.wrapperProps,
-			style: {
-				...props.wrapperProps?.style,
-				...extraStyles,
-			},
-		};
-
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
-);
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'borderColor', 'style' ],
+	hasSupport( name ) {
+		return hasBorderSupport( name, 'color' );
+	},
+};
 
 addFilter(
 	'blocks.registerBlockType',
 	'core/border/addAttributes',
 	addAttributes
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/border/addSaveProps',
-	addSaveProps
-);
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/border/addEditProps',
-	addEditProps
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/border/with-border-color-palette-styles',
-	withBorderColorPaletteStyles
-);
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
deleted file mode 100644
index d8b804c300eb04..00000000000000
--- a/packages/block-editor/src/hooks/color-panel.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
-import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
-
-function getComputedStyle( node ) {
-	return node.ownerDocument.defaultView.getComputedStyle( node );
-}
-
-export default function ColorPanel( {
-	enableAlpha = false,
-	settings,
-	clientId,
-	enableContrastChecking = true,
-} ) {
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
-	const ref = useBlockRef( clientId );
-	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
-
-	useEffect( () => {
-		if ( ! enableContrastChecking ) {
-			return;
-		}
-		if ( ! definedColors.length ) {
-			if ( detectedBackgroundColor ) {
-				setDetectedBackgroundColor();
-			}
-			if ( detectedColor ) {
-				setDetectedColor();
-			}
-			if ( detectedLinkColor ) {
-				setDetectedColor();
-			}
-			return;
-		}
-
-		if ( ! ref.current ) {
-			return;
-		}
-		setDetectedColor( getComputedStyle( ref.current ).color );
-
-		const firstLinkElement = ref.current?.querySelector( 'a' );
-		if ( firstLinkElement && !! firstLinkElement.innerText ) {
-			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
-		}
-
-		let backgroundColorNode = ref.current;
-		let backgroundColor =
-			getComputedStyle( backgroundColorNode ).backgroundColor;
-		while (
-			backgroundColor === 'rgba(0, 0, 0, 0)' &&
-			backgroundColorNode.parentNode &&
-			backgroundColorNode.parentNode.nodeType ===
-				backgroundColorNode.parentNode.ELEMENT_NODE
-		) {
-			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor =
-				getComputedStyle( backgroundColorNode ).backgroundColor;
-		}
-
-		setDetectedBackgroundColor( backgroundColor );
-	} );
-
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-
-	return (
-		<InspectorControls __experimentalGroup="color">
-			<ColorGradientSettingsDropdown
-				enableAlpha={ enableAlpha }
-				panelId={ clientId }
-				settings={ settings }
-				__experimentalIsItemGroup={ false }
-				__experimentalHasMultipleOrigins
-				__experimentalIsRenderedInSidebar
-				{ ...colorGradientSettings }
-			/>
-			{ enableContrastChecking && (
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-					enableAlphaChecker={ enableAlpha }
-					linkColor={ detectedLinkColor }
-				/>
-			) }
-		</InspectorControls>
-	);
-}
diff --git a/packages/block-editor/src/hooks/color-panel.native.js b/packages/block-editor/src/hooks/color-panel.native.js
deleted file mode 100644
index ff994899bbf06b..00000000000000
--- a/packages/block-editor/src/hooks/color-panel.native.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { useGlobalStyles } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
-import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-
-const ColorPanel = ( { settings } ) => {
-	const globalStyles = useGlobalStyles();
-
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedTextColor, setDetectedTextColor ] = useState();
-
-	const { baseGlobalStyles } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return {
-			baseGlobalStyles:
-				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
-		};
-	} );
-
-	useEffect( () => {
-		// The following logic is used to determine current text/background colors:
-		// 1. The globalStyles object is queried to determine whether a color has been
-		// set via a block's settings.
-		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
-		// default/base colors are used.
-		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
-		// to determine the default text/background color and the checker won't run.
-		const textColor = globalStyles?.color || baseGlobalStyles?.text;
-		const backgroundColor =
-			globalStyles?.backgroundColor || baseGlobalStyles?.background;
-
-		setDetectedTextColor( textColor );
-		setDetectedBackgroundColor( backgroundColor );
-	}, [ globalStyles, baseGlobalStyles ] );
-
-	return (
-		<InspectorControls>
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				initialOpen={ false }
-				settings={ settings }
-			>
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedTextColor }
-				/>
-			</PanelColorGradientSettings>
-		</InspectorControls>
-	);
-};
-
-export default ColorPanel;
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 593eea881e3107..2fecc10a311984 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -1,43 +1,43 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { useMemo, Platform, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import {
 	getColorClassName,
-	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
-import {
-	__experimentalGetGradientClass,
-	getGradientValueBySlug,
-	getGradientSlugByValue,
-} from '../components/gradients';
+import { __experimentalGetGradientClass } from '../components/gradients';
 import {
 	cleanEmptyObject,
 	transformStyles,
-	immutableSet,
 	shouldSkipSerialization,
 } from './utils';
-import ColorPanel from './color-panel';
-import useSetting from '../components/use-setting';
+import { getBackgroundImageClasses } from './background';
+import { useSettings } from '../components/use-settings';
+import InspectorControls from '../components/inspector-controls';
+import {
+	useHasColorPanel,
+	default as StylesColorPanel,
+} from '../components/global-styles/color-panel';
+import BlockColorContrastChecker from './contrast-checker';
+import { store as blockEditorStore } from '../store';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const hasColorSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasColorSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 	return (
 		colorSupport &&
 		( colorSupport.link === true ||
@@ -61,8 +61,8 @@ const hasLinkColorSupport = ( blockType ) => {
 	);
 };
 
-const hasGradientSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasGradientSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 
 	return (
 		colorSupport !== null &&
@@ -83,60 +83,6 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
-/**
- * Clears a single color property from a style object.
- *
- * @param {Array}  path  Path to color property to clear within styles object.
- * @param {Object} style Block attributes style object.
- * @return {Object} Styles with the color property omitted.
- */
-const clearColorFromStyles = ( path, style ) =>
-	cleanEmptyObject( immutableSet( style, path, undefined ) );
-
-/**
- * Clears text color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with text color properties omitted.
- */
-const resetAllTextFilter = ( attributes ) => ( {
-	textColor: undefined,
-	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-} );
-
-/**
- * Clears link color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with link color properties omitted.
- */
-const resetAllLinkFilter = ( attributes ) => ( {
-	style: clearColorFromStyles(
-		[ 'elements', 'link', 'color', 'text' ],
-		attributes.style
-	),
-} );
-
-/**
- * Clears all background color related properties including gradients from
- * supplied block attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Block attributes with background and gradient omitted.
- */
-const clearBackgroundAndGradient = ( attributes ) => ( {
-	backgroundColor: undefined,
-	gradient: undefined,
-	style: {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			background: undefined,
-			gradient: undefined,
-		},
-	},
-} );
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -180,27 +126,31 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject colors classnames.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type.
+ * @param {Object}        attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addSaveProps( props, blockType, attributes ) {
+export function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasColorSupport( blockType ) ||
-		shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY )
+		! hasColorSupport( blockNameOrType ) ||
+		shouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )
 	) {
 		return props;
 	}
 
-	const hasGradient = hasGradientSupport( blockType );
+	const hasGradient = hasGradientSupport( blockNameOrType );
 
 	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const shouldSerialize = ( feature ) =>
-		! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
+		! shouldSkipSerialization(
+			blockNameOrType,
+			COLOR_SUPPORT_KEY,
+			feature
+		);
 
 	// Primary color classes must come before the `has-text-color`,
 	// `has-background` and `has-link-color` classes to maintain backwards
@@ -224,378 +174,238 @@ export function addSaveProps( props, blockType, attributes ) {
 		style?.color?.background ||
 		( hasGradient && ( gradient || style?.color?.gradient ) );
 
-	const newClassName = classnames(
-		props.className,
-		textClass,
-		gradientClass,
-		{
-			// Don't apply the background class if there's a custom gradient.
-			[ backgroundClass ]:
-				( ! hasGradient || ! style?.color?.gradient ) &&
-				!! backgroundClass,
-			'has-text-color':
-				shouldSerialize( 'text' ) &&
-				( textColor || style?.color?.text ),
-			'has-background': serializeHasBackground && hasBackground,
-			'has-link-color':
-				shouldSerialize( 'link' ) && style?.elements?.link?.color,
-		}
-	);
+	const newClassName = clsx( props.className, textClass, gradientClass, {
+		// Don't apply the background class if there's a custom gradient.
+		[ backgroundClass ]:
+			( ! hasGradient || ! style?.color?.gradient ) && !! backgroundClass,
+		'has-text-color':
+			shouldSerialize( 'text' ) && ( textColor || style?.color?.text ),
+		'has-background': serializeHasBackground && hasBackground,
+		'has-link-color':
+			shouldSerialize( 'link' ) && style?.elements?.link?.color,
+	} );
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
 }
 
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addEditProps( settings ) {
-	if (
-		! hasColorSupport( settings ) ||
-		shouldSkipSerialization( settings, COLOR_SUPPORT_KEY )
-	) {
-		return settings;
-	}
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
+function styleToAttributes( style ) {
+	const textColorValue = style?.color?.text;
+	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
+		? textColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const backgroundColorValue = style?.color?.background;
+	const backgroundColorSlug = backgroundColorValue?.startsWith(
+		'var:preset|color|'
+	)
+		? backgroundColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const gradientValue = style?.color?.gradient;
+	const gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )
+		? gradientValue.substring( 'var:preset|gradient|'.length )
+		: undefined;
+	const updatedStyle = { ...style };
+	updatedStyle.color = {
+		...updatedStyle.color,
+		text: textColorSlug ? undefined : textColorValue,
+		background: backgroundColorSlug ? undefined : backgroundColorValue,
+		gradient: gradientSlug ? undefined : gradientValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		textColor: textColorSlug,
+		backgroundColor: backgroundColorSlug,
+		gradient: gradientSlug,
 	};
-
-	return settings;
 }
 
-const getLinkColorFromAttributeValue = ( colors, value ) => {
-	const attributeParsed = /var:preset\|color\|(.+)/.exec( value );
-	if ( attributeParsed && attributeParsed[ 1 ] ) {
-		return getColorObjectByAttributeValues( colors, attributeParsed[ 1 ] )
-			.color;
-	}
-	return value;
-};
+function attributesToStyle( attributes ) {
+	return {
+		...attributes.style,
+		color: {
+			...attributes.style?.color,
+			text: attributes.textColor
+				? 'var:preset|color|' + attributes.textColor
+				: attributes.style?.color?.text,
+			background: attributes.backgroundColor
+				? 'var:preset|color|' + attributes.backgroundColor
+				: attributes.style?.color?.background,
+			gradient: attributes.gradient
+				? 'var:preset|gradient|' + attributes.gradient
+				: attributes.style?.color?.gradient,
+		},
+	};
+}
 
-/**
- * Inspector control panel containing the color related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Color edit element.
- */
-export function ColorEdit( props ) {
-	const { name: blockName, attributes } = props;
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' );
-	const themePalette = useSetting( 'color.palette.theme' );
-	const defaultPalette = useSetting( 'color.palette.default' );
-	const allSolids = useMemo(
-		() => [
-			...( userPalette || [] ),
-			...( themePalette || [] ),
-			...( defaultPalette || [] ),
-		],
-		[ userPalette, themePalette, defaultPalette ]
-	);
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
-	const allGradients = useMemo(
-		() => [
-			...( userGradientPalette || [] ),
-			...( themeGradientPalette || [] ),
-			...( defaultGradientPalette || [] ),
-		],
-		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+function ColorInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
 	);
-	const areCustomSolidsEnabled = useSetting( 'color.custom' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-
-	const solidsEnabled =
-		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
-
-	const gradientsEnabled =
-		areCustomGradientsEnabled ||
-		! themeGradientPalette ||
-		themeGradientPalette?.length > 0;
-
-	// Shouldn't be needed but right now the ColorGradientsPanel
-	// can trigger both onChangeColor and onChangeBackground
-	// synchronously causing our two callbacks to override changes
-	// from each other.
-	const localAttributes = useRef( attributes );
-	useEffect( () => {
-		localAttributes.current = attributes;
-	}, [ attributes ] );
-
-	if ( ! hasColorSupport( blockName ) ) {
-		return null;
-	}
-
-	const hasLinkColor =
-		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
-	const hasTextColor =
-		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
-	const hasBackgroundColor =
-		hasBackgroundColorSupport( blockName ) &&
-		isBackgroundEnabled &&
-		solidsEnabled;
-	const hasGradientColor =
-		hasGradientSupport( blockName ) && gradientsEnabled;
 
-	if (
-		! hasLinkColor &&
-		! hasTextColor &&
-		! hasBackgroundColor &&
-		! hasGradientColor
-	) {
-		return null;
-	}
+	return (
+		<InspectorControls
+			group="color"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-	const { style, textColor, backgroundColor, gradient } = attributes;
-	let gradientValue;
-	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( allGradients, gradient );
-	} else if ( hasGradientColor ) {
-		gradientValue = style?.color?.gradient;
+export function ColorEdit( { clientId, name, setAttributes, settings } ) {
+	const isEnabled = useHasColorPanel( settings );
+	function selector( select ) {
+		const { style, textColor, backgroundColor, gradient } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, textColor, backgroundColor, gradient };
 	}
+	const { style, textColor, backgroundColor, gradient } = useSelect(
+		selector,
+		[ clientId ]
+	);
+	const value = useMemo( () => {
+		return attributesToStyle( {
+			style,
+			textColor,
+			backgroundColor,
+			gradient,
+		} );
+	}, [ style, textColor, backgroundColor, gradient ] );
 
-	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const attributeName = name + 'Color';
-		const newStyle = {
-			...localAttributes.current.style,
-			color: {
-				...localAttributes.current?.style?.color,
-				[ name ]: colorObject?.slug ? undefined : value,
-			},
-		};
-
-		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
-		const newAttributes = {
-			style: cleanEmptyObject( newStyle ),
-			[ attributeName ]: newNamedColor,
-		};
-
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
-	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( allGradients, value );
-		let newAttributes;
-		if ( slug ) {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: undefined,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: slug,
-			};
-		} else {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: value,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: undefined,
-			};
-		}
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
-	};
-
-	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const newLinkColorValue = colorObject?.slug
-			? `var:preset|color|${ colorObject.slug }`
-			: value;
-
-		const newStyle = cleanEmptyObject(
-			immutableSet(
-				localAttributes.current?.style,
-				[ 'elements', 'link', 'color', 'text' ],
-				newLinkColorValue
-			)
-		);
-		props.setAttributes( { style: newStyle } );
-		localAttributes.current = {
-			...localAttributes.current,
-			...{ style: newStyle },
-		};
-	};
+	if ( ! isEnabled ) {
+		return null;
+	}
 
-	const defaultColorControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
 	const enableContrastChecking =
 		Platform.OS === 'web' &&
-		! gradient &&
-		! style?.color?.gradient &&
-		hasBackgroundColor &&
-		( hasLinkColor || hasTextColor ) &&
+		! value?.color?.gradient &&
+		( settings?.color?.text || settings?.color?.link ) &&
 		// Contrast checking is enabled by default.
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.
 		false !==
-			getBlockSupport( props.name, [
+			getBlockSupport( name, [
 				COLOR_SUPPORT_KEY,
 				'enableContrastChecker',
 			] );
 
 	return (
-		<ColorPanel
-			enableContrastChecking={ enableContrastChecking }
-			clientId={ props.clientId }
-			enableAlpha={ true }
-			settings={ [
-				...( hasTextColor
-					? [
-							{
-								label: __( 'Text' ),
-								onColorChange: onChangeColor( 'text' ),
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									textColor,
-									style?.color?.text
-								).color,
-								isShownByDefault: defaultColorControls?.text,
-								resetAllFilter: resetAllTextFilter,
-							},
-					  ]
-					: [] ),
-				...( hasBackgroundColor || hasGradientColor
-					? [
-							{
-								label: __( 'Background' ),
-								onColorChange: hasBackgroundColor
-									? onChangeColor( 'background' )
-									: undefined,
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									backgroundColor,
-									style?.color?.background
-								).color,
-								gradientValue,
-								onGradientChange: hasGradientColor
-									? onChangeGradient
-									: undefined,
-								isShownByDefault:
-									defaultColorControls?.background,
-								resetAllFilter: clearBackgroundAndGradient,
-							},
-					  ]
-					: [] ),
-				...( hasLinkColor
-					? [
-							{
-								label: __( 'Link' ),
-								onColorChange: onChangeLinkColor,
-								colorValue: getLinkColorFromAttributeValue(
-									allSolids,
-									style?.elements?.link?.color?.text
-								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
-								isShownByDefault: defaultColorControls?.link,
-								resetAllFilter: resetAllLinkFilter,
-							},
-					  ]
-					: [] ),
-			] }
-		/>
+		<StylesColorPanel
+			as={ ColorInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+			enableContrastChecker={
+				false !==
+				getBlockSupport( name, [
+					COLOR_SUPPORT_KEY,
+					'enableContrastChecker',
+				] )
+			}
+		>
+			{ enableContrastChecking && (
+				<BlockColorContrastChecker clientId={ clientId } />
+			) }
+		</StylesColorPanel>
 	);
 }
 
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withColorPaletteStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { backgroundColor, textColor } = attributes;
-		const userPalette = useSetting( 'color.palette.custom' ) || [];
-		const themePalette = useSetting( 'color.palette.theme' ) || [];
-		const defaultPalette = useSetting( 'color.palette.default' ) || [];
-		const colors = useMemo(
-			() => [
-				...( userPalette || [] ),
-				...( themePalette || [] ),
-				...( defaultPalette || [] ),
-			],
-			[ userPalette, themePalette, defaultPalette ]
-		);
-		if (
-			! hasColorSupport( name ) ||
-			shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
-		) {
-			return <BlockListBlock { ...props } />;
-		}
-		const extraStyles = {};
-
-		if (
-			textColor &&
-			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
-		) {
-			extraStyles.color = getColorObjectByAttributeValues(
-				colors,
-				textColor
-			)?.color;
-		}
-		if (
-			backgroundColor &&
-			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
-		) {
-			extraStyles.backgroundColor = getColorObjectByAttributeValues(
-				colors,
-				backgroundColor
-			)?.color;
-		}
-
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = {
-			...props.wrapperProps,
-			style: {
-				...extraStyles,
-				...props.wrapperProps?.style,
-			},
-		};
+function useBlockProps( {
+	name,
+	backgroundColor,
+	textColor,
+	gradient,
+	style,
+} ) {
+	const [ userPalette, themePalette, defaultPalette ] = useSettings(
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default'
+	);
 
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+	const colors = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
+	if (
+		! hasColorSupport( name ) ||
+		shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
+	) {
+		return {};
 	}
-);
+	const extraStyles = {};
+
+	if (
+		textColor &&
+		! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
+	) {
+		extraStyles.color = getColorObjectByAttributeValues(
+			colors,
+			textColor
+		)?.color;
+	}
+	if (
+		backgroundColor &&
+		! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
+	) {
+		extraStyles.backgroundColor = getColorObjectByAttributeValues(
+			colors,
+			backgroundColor
+		)?.color;
+	}
+
+	const saveProps = addSaveProps( { style: extraStyles }, name, {
+		textColor,
+		backgroundColor,
+		gradient,
+		style,
+	} );
+
+	const hasBackgroundValue =
+		backgroundColor ||
+		style?.color?.background ||
+		gradient ||
+		style?.color?.gradient;
+
+	return {
+		...saveProps,
+		className: clsx(
+			saveProps.className,
+			// Add background image classes in the editor, if not already handled by background color values.
+			! hasBackgroundValue && getBackgroundImageClasses( style )
+		),
+	};
+}
+
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],
+	hasSupport: hasColorSupport,
+};
 
 const MIGRATION_PATHS = {
 	linkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],
@@ -631,24 +441,6 @@ addFilter(
 	addAttributes
 );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/color/addSaveProps',
-	addSaveProps
-);
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/color/addEditProps',
-	addEditProps
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/color/with-color-palette-styles',
-	withColorPaletteStyles
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/color/addTransforms',
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index f9b7898f941b75..8be620bf40d938 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -5,6 +5,7 @@
 		 * injected color controls can appear as a single item group without
 		 * the contrast checkers suddenly appearing between items.
 		 */
+		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
 		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 2de6d762ceadbb..f5e3bde31ce509 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -1,173 +1,69 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton, MenuItem } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { ToolbarButton } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls, BlockSettingsMenuControls } from '../components';
-/**
- * External dependencies
- */
-import classnames from 'classnames';
+import { BlockControls } from '../components';
+import { unlock } from '../lock-unlock';
 
-function StopEditingAsBlocksOnOutsideSelect( {
-	clientId,
-	stopEditingAsBlock,
-} ) {
-	const isBlockOrDescendantSelected = useSelect(
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
+
+function ContentLockControlsPure( { clientId } ) {
+	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return (
-				isBlockSelected( clientId ) ||
-				hasSelectedInnerBlock( clientId, true )
-			);
+			const {
+				getContentLockingParent,
+				getTemplateLock,
+				getTemporarilyEditingAsBlocks,
+			} = unlock( select( blockEditorStore ) );
+			return {
+				templateLock: getTemplateLock( clientId ),
+				isLockedByParent: !! getContentLockingParent( clientId ),
+				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
+			};
 		},
 		[ clientId ]
 	);
-	useEffect( () => {
-		if ( ! isBlockOrDescendantSelected ) {
-			stopEditingAsBlock();
-		}
-	}, [ isBlockOrDescendantSelected ] );
-	return null;
-}
 
-export const withBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { getBlockListSettings, getSettings } =
-			useSelect( blockEditorStore );
-		const focusModeToRevert = useRef();
-		const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-			( select ) => {
-				const {
-					__unstableGetContentLockingParent,
-					getTemplateLock,
-					__unstableGetTemporarilyEditingAsBlocks,
-				} = select( blockEditorStore );
-				return {
-					templateLock: getTemplateLock( props.clientId ),
-					isLockedByParent: !! __unstableGetContentLockingParent(
-						props.clientId
-					),
-					isEditingAsBlocks:
-						__unstableGetTemporarilyEditingAsBlocks() ===
-						props.clientId,
-				};
-			},
-			[ props.clientId ]
-		);
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
+	const isContentLocked =
+		! isLockedByParent && templateLock === 'contentOnly';
 
-		const {
-			updateSettings,
-			updateBlockListSettings,
-			__unstableSetTemporarilyEditingAsBlocks,
-		} = useDispatch( blockEditorStore );
-		const isContentLocked =
-			! isLockedByParent && templateLock === 'contentOnly';
-		const {
-			__unstableMarkNextChangeAsNotPersistent,
-			updateBlockAttributes,
-		} = useDispatch( blockEditorStore );
+	const stopEditingAsBlockCallback = useCallback( () => {
+		stopEditingAsBlocks( clientId );
+	}, [ clientId, stopEditingAsBlocks ] );
 
-		const stopEditingAsBlock = useCallback( () => {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( props.clientId, {
-				templateLock: 'contentOnly',
-			} );
-			updateBlockListSettings( props.clientId, {
-				...getBlockListSettings( props.clientId ),
-				templateLock: 'contentOnly',
-			} );
-			updateSettings( { focusMode: focusModeToRevert.current } );
-			__unstableSetTemporarilyEditingAsBlocks();
-		}, [
-			props.clientId,
-			focusModeToRevert,
-			updateSettings,
-			updateBlockListSettings,
-			getBlockListSettings,
-			__unstableMarkNextChangeAsNotPersistent,
-			updateBlockAttributes,
-			__unstableSetTemporarilyEditingAsBlocks,
-		] );
+	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+		return null;
+	}
 
-		if ( ! isContentLocked && ! isEditingAsBlocks ) {
-			return <BlockEdit { ...props } />;
-		}
+	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
 
-		return (
-			<>
-				{ isEditingAsBlocks && ! isContentLocked && (
-					<>
-						<StopEditingAsBlocksOnOutsideSelect
-							clientId={ props.clientId }
-							stopEditingAsBlock={ stopEditingAsBlock }
-						/>
-						<BlockControls group="other">
-							<ToolbarButton
-								onClick={ () => {
-									stopEditingAsBlock();
-								} }
-							>
-								{ __( 'Done' ) }
-							</ToolbarButton>
-						</BlockControls>
-					</>
-				) }
-				{ ! isEditingAsBlocks && isContentLocked && props.isSelected && (
-					<BlockSettingsMenuControls>
-						{ ( { onClose } ) => (
-							<MenuItem
-								onClick={ () => {
-									__unstableMarkNextChangeAsNotPersistent();
-									updateBlockAttributes( props.clientId, {
-										templateLock: undefined,
-									} );
-									updateBlockListSettings( props.clientId, {
-										...getBlockListSettings(
-											props.clientId
-										),
-										templateLock: false,
-									} );
-									focusModeToRevert.current =
-										getSettings().focusMode;
-									updateSettings( { focusMode: true } );
-									__unstableSetTemporarilyEditingAsBlocks(
-										props.clientId
-									);
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						) }
-					</BlockSettingsMenuControls>
-				) }
-				<BlockEdit
-					{ ...props }
-					className={ classnames(
-						props.className,
-						isEditingAsBlocks &&
-							'is-content-locked-editing-as-blocks'
-					) }
-				/>
-			</>
-		);
-	},
-	'withToolbarControls'
-);
+	return (
+		showStopEditingAsBlocks && (
+			<BlockControls group="other">
+				<ToolbarButton onClick={ stopEditingAsBlockCallback }>
+					{ __( 'Done' ) }
+				</ToolbarButton>
+			</BlockControls>
+		)
+	);
+}
 
-addFilter(
-	'editor.BlockEdit',
-	'core/style/with-block-controls',
-	withBlockControls
-);
+export default {
+	edit: ContentLockControlsPure,
+	hasSupport() {
+		return true;
+	},
+};
diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js
new file mode 100644
index 00000000000000..368e2e75264858
--- /dev/null
+++ b/packages/block-editor/src/hooks/contrast-checker.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ContrastChecker from '../components/contrast-checker';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function getComputedStyle( node ) {
+	return node.ownerDocument.defaultView.getComputedStyle( node );
+}
+
+export default function BlockColorContrastChecker( { clientId } ) {
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
+	const blockEl = useBlockElement( clientId );
+
+	// There are so many things that can change the color of a block
+	// So we perform this check on every render.
+	useEffect( () => {
+		if ( ! blockEl ) {
+			return;
+		}
+		setDetectedColor( getComputedStyle( blockEl ).color );
+
+		const firstLinkElement = blockEl.querySelector( 'a' );
+		if ( firstLinkElement && !! firstLinkElement.innerText ) {
+			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
+		}
+
+		let backgroundColorNode = blockEl;
+		let backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
+		while (
+			backgroundColor === 'rgba(0, 0, 0, 0)' &&
+			backgroundColorNode.parentNode &&
+			backgroundColorNode.parentNode.nodeType ===
+				backgroundColorNode.parentNode.ELEMENT_NODE
+		) {
+			backgroundColorNode = backgroundColorNode.parentNode;
+			backgroundColor =
+				getComputedStyle( backgroundColorNode ).backgroundColor;
+		}
+
+		setDetectedBackgroundColor( backgroundColor );
+	}, [ blockEl ] );
+
+	return (
+		<ContrastChecker
+			backgroundColor={ detectedBackgroundColor }
+			textColor={ detectedColor }
+			enableAlphaChecker
+			linkColor={ detectedLinkColor }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
index 5814e72a0efbf9..91ef07506fd95c 100644
--- a/packages/block-editor/src/hooks/custom-class-name.js
+++ b/packages/block-editor/src/hooks/custom-class-name.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,16 +10,15 @@ import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
- * Filters registered block settings, extending attributes with anchor using ID
- * of the first node.
+ * Filters registered block settings, extending attributes to include `className`.
  *
  * @param {Object} settings Original block settings.
  *
@@ -39,57 +38,43 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning the custom class name, if block supports custom class name.
- *
- * @param {WPComponent} BlockEdit Original component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export const withInspectorControl = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			const hasCustomClassName = hasBlockSupport(
-				props.name,
-				'customClassName',
-				true
-			);
-			if ( hasCustomClassName && props.isSelected ) {
-				return (
-					<>
-						<BlockEdit { ...props } />
-						<InspectorControls __experimentalGroup="advanced">
-							<TextControl
-								autoComplete="off"
-								label={ __( 'Additional CSS class(es)' ) }
-								value={ props.attributes.className || '' }
-								onChange={ ( nextValue ) => {
-									props.setAttributes( {
-										className:
-											nextValue !== ''
-												? nextValue
-												: undefined,
-									} );
-								} }
-								help={ __(
-									'Separate multiple classes with spaces.'
-								) }
-							/>
-						</InspectorControls>
-					</>
-				);
-			}
+function CustomClassNameControlsPure( { className, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-			return <BlockEdit { ...props } />;
-		};
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				autoComplete="off"
+				label={ __( 'Additional CSS class(es)' ) }
+				value={ className || '' }
+				onChange={ ( nextValue ) => {
+					setAttributes( {
+						className: nextValue !== '' ? nextValue : undefined,
+					} );
+				} }
+				help={ __( 'Separate multiple classes with spaces.' ) }
+			/>
+		</InspectorControls>
+	);
+}
+
+export default {
+	edit: CustomClassNameControlsPure,
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
 	},
-	'withInspectorControl'
-);
+};
 
 /**
- * Override props assigned to save component to inject anchor ID, if block
- * supports anchor. This is only applied if the block's save result is an
+ * Override props assigned to save component to inject the className, if block
+ * supports customClassName. This is only applied if the block's save result is an
  * element and not a markup string.
  *
  * @param {Object} extraProps Additional props applied to save element.
@@ -103,7 +88,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);
@@ -153,19 +138,9 @@ export function addTransforms( result, source, index, results ) {
 
 addFilter(
 	'blocks.registerBlockType',
-	'core/custom-class-name/attribute',
+	'core/editor/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/custom-class-name/with-inspector-control',
-	withInspectorControl
-);
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
-	addSaveProps
-);
 
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
diff --git a/packages/block-editor/src/hooks/custom-class-name.native.js b/packages/block-editor/src/hooks/custom-class-name.native.js
index ea2d98068b7863..b3f153b2bdad13 100644
--- a/packages/block-editor/src/hooks/custom-class-name.native.js
+++ b/packages/block-editor/src/hooks/custom-class-name.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,8 +10,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
- * Filters registered block settings, extending attributes with anchor using ID
- * of the first node.
+ * Filters registered block settings, extending attributes to include `className`.
  *
  * @param {Object} settings Original block settings.
  *
@@ -32,8 +31,8 @@ export function addAttribute( settings ) {
 }
 
 /**
- * Override props assigned to save component to inject anchor ID, if block
- * supports anchor. This is only applied if the block's save result is an
+ * Override props assigned to save component to inject the className, if block
+ * supports customClassName. This is only applied if the block's save result is an
  * element and not a markup string.
  *
  * @param {Object} extraProps Additional props applied to save element.
@@ -47,7 +46,7 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 		hasBlockSupport( blockType, 'customClassName', true ) &&
 		attributes.className
 	) {
-		extraProps.className = classnames(
+		extraProps.className = clsx(
 			extraProps.className,
 			attributes.className
 		);
@@ -61,8 +60,11 @@ addFilter(
 	'core/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
-	addSaveProps
-);
+
+export default {
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
+	},
+};
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 44a9fd83278a95..c98cc34e4272c8 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -1,214 +1,127 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { Platform, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
 import {
-	GapEdit,
-	hasGapSupport,
-	hasGapValue,
-	resetGap,
-	useIsGapDisabled,
-} from './gap';
-import {
-	MarginEdit,
-	MarginVisualizer,
-	hasMarginSupport,
-	hasMarginValue,
-	resetMargin,
-	useIsMarginDisabled,
-} from './margin';
-import {
-	MinHeightEdit,
-	hasMinHeightSupport,
-	hasMinHeightValue,
-	resetMinHeight,
-	useIsMinHeightDisabled,
-} from './min-height';
-import {
-	PaddingEdit,
-	PaddingVisualizer,
-	hasPaddingSupport,
-	hasPaddingValue,
-	resetPadding,
-	useIsPaddingDisabled,
-} from './padding';
-import useSetting from '../components/use-setting';
+	DimensionsPanel as StylesDimensionsPanel,
+	useHasDimensionsPanel,
+} from '../components/global-styles';
+import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
-function useVisualizerMouseOver() {
-	const [ isMouseOver, setIsMouseOver ] = useState( false );
-	const {
-		__experimentalHideBlockInterface: hideBlockInterface,
-		__experimentalShowBlockInterface: showBlockInterface,
-	} = useDispatch( blockEditorStore );
-	const onMouseOver = ( e ) => {
-		e.stopPropagation();
-		hideBlockInterface();
-		setIsMouseOver( true );
-	};
-	const onMouseOut = ( e ) => {
-		e.stopPropagation();
-		showBlockInterface();
-		setIsMouseOver( false );
-	};
-	return { isMouseOver, onMouseOver, onMouseOut };
+function useVisualizer() {
+	const [ property, setProperty ] = useState( false );
+	const { hideBlockInterface, showBlockInterface } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	useEffect( () => {
+		if ( ! property ) {
+			showBlockInterface();
+		} else {
+			hideBlockInterface();
+		}
+	}, [ property, showBlockInterface, hideBlockInterface ] );
+
+	return [ property, setProperty ];
 }
 
-/**
- * Inspector controls for dimensions support.
- *
- * @param {Object} props Block props.
- *
- * @return {WPElement} Inspector controls for dimensions and spacing support features.
- */
-export function DimensionsPanel( props ) {
-	const isGapDisabled = useIsGapDisabled( props );
-	const isPaddingDisabled = useIsPaddingDisabled( props );
-	const isMarginDisabled = useIsMarginDisabled( props );
-	const isMinHeightDisabled = useIsMinHeightDisabled( props );
-	const isDisabled = useIsDimensionsDisabled( props );
-	const isSupported = hasDimensionsSupport( props.name );
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-	const paddingMouseOver = useVisualizerMouseOver();
-	const marginMouseOver = useVisualizerMouseOver();
+function DimensionsInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributes.style;
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				style: updatedStyle,
+			};
+		},
+		[ resetAllFilter ]
+	);
+
+	return (
+		<InspectorControls
+			group="dimensions"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-	if ( isDisabled || ! isSupported ) {
+export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
+	const isEnabled = useHasDimensionsPanel( settings );
+	const value = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
+	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
+	const onChange = ( newStyle ) => {
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	if ( ! isEnabled ) {
 		return null;
 	}
 
-	const defaultDimensionsControls = getBlockSupport( props.name, [
+	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
-
-	const defaultSpacingControls = getBlockSupport( props.name, [
+	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
-
-	const createResetAllFilter =
-		( attribute, featureSet ) => ( newAttributes ) => ( {
-			...newAttributes,
-			style: {
-				...newAttributes.style,
-				[ featureSet ]: {
-					...newAttributes.style?.[ featureSet ],
-					[ attribute ]: undefined,
-				},
-			},
-		} );
-
-	const spacingClassnames = classnames( {
-		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
-	} );
+	const defaultControls = {
+		...defaultDimensionsControls,
+		...defaultSpacingControls,
+	};
 
 	return (
 		<>
-			<InspectorControls __experimentalGroup="dimensions">
-				{ ! isPaddingDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasPaddingValue( props ) }
-						label={ __( 'Padding' ) }
-						onDeselect={ () => resetPadding( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'padding',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.padding }
-						panelId={ props.clientId }
-					>
-						<PaddingEdit
-							onMouseOver={ paddingMouseOver.onMouseOver }
-							onMouseOut={ paddingMouseOver.onMouseOut }
-							{ ...props }
-						/>
-					</ToolsPanelItem>
-				) }
-				{ ! isMarginDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasMarginValue( props ) }
-						label={ __( 'Margin' ) }
-						onDeselect={ () => resetMargin( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'margin',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.margin }
-						panelId={ props.clientId }
-					>
-						<MarginEdit
-							onMouseOver={ marginMouseOver.onMouseOver }
-							onMouseOut={ marginMouseOver.onMouseOut }
-							{ ...props }
-						/>
-					</ToolsPanelItem>
-				) }
-				{ ! isGapDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasGapValue( props ) }
-						label={ __( 'Block spacing' ) }
-						onDeselect={ () => resetGap( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'blockGap',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.blockGap }
-						panelId={ props.clientId }
-					>
-						<GapEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-				{ ! isMinHeightDisabled && (
-					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => hasMinHeightValue( props ) }
-						label={ __( 'Min. height' ) }
-						onDeselect={ () => resetMinHeight( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'minHeight',
-							'dimensions'
-						) }
-						isShownByDefault={
-							defaultDimensionsControls?.minHeight
-						}
-						panelId={ props.clientId }
-					>
-						<MinHeightEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-			</InspectorControls>
-			{ ! isPaddingDisabled && (
+			<StylesDimensionsPanel
+				as={ DimensionsInspectorControl }
+				panelId={ clientId }
+				settings={ settings }
+				value={ value }
+				onChange={ onChange }
+				defaultControls={ defaultControls }
+				onVisualize={ setVisualizedProperty }
+			/>
+			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer
-					forceShow={ paddingMouseOver.isMouseOver }
-					{ ...props }
+					forceShow={ visualizedProperty === 'padding' }
+					clientId={ clientId }
+					value={ value }
 				/>
 			) }
-			{ ! isMarginDisabled && (
+			{ !! settings?.spacing?.margin && (
 				<MarginVisualizer
-					forceShow={ marginMouseOver.isMouseOver }
-					{ ...props }
+					forceShow={ visualizedProperty === 'margin' }
+					clientId={ clientId }
+					value={ value }
 				/>
 			) }
 		</>
@@ -216,98 +129,78 @@ export function DimensionsPanel( props ) {
 }
 
 /**
- * Determine whether there is dimensions related block support.
+ * Determine whether there is block support for dimensions.
  *
  * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
  *
  * @return {boolean} Whether there is support.
  */
-export function hasDimensionsSupport( blockName ) {
+export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	if ( Platform.OS !== 'web' ) {
 		return false;
 	}
 
-	return (
-		hasGapSupport( blockName ) ||
-		hasMinHeightSupport( blockName ) ||
-		hasPaddingSupport( blockName ) ||
-		hasMarginSupport( blockName )
-	);
-}
+	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
 
-/**
- * Determines whether dimensions support has been disabled.
- *
- * @param {Object} props Block properties.
- *
- * @return {boolean} If spacing support is completely disabled.
- */
-const useIsDimensionsDisabled = ( props = {} ) => {
-	const gapDisabled = useIsGapDisabled( props );
-	const minHeightDisabled = useIsMinHeightDisabled( props );
-	const paddingDisabled = useIsPaddingDisabled( props );
-	const marginDisabled = useIsMarginDisabled( props );
-
-	return (
-		gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled
-	);
-};
-
-/**
- * Custom hook to retrieve which padding/margin/blockGap is supported
- * e.g. top, right, bottom or left.
- *
- * Sides are opted into by default. It is only if a specific side is set to
- * false that it is omitted.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {?string[]} Strings representing the custom sides available.
- */
-export function useCustomSides( blockName, feature ) {
-	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
-
-	// Skip when setting is boolean as theme isn't setting arbitrary sides.
-	if ( ! support || typeof support[ feature ] === 'boolean' ) {
-		return;
+	if ( support === true ) {
+		return true;
 	}
 
-	// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
-	if ( Array.isArray( support[ feature ] ) ) {
-		return support[ feature ];
+	if ( feature === 'any' ) {
+		return !! ( support?.aspectRatio || !! support?.minHeight );
 	}
 
-	// Finally, attempt to return `.sides` if the setting is an object.
-	if ( support[ feature ]?.sides ) {
-		return support[ feature ].sides;
-	}
+	return !! support?.[ feature ];
 }
 
-/**
- * Custom hook to determine whether the sides configured in the
- * block support are valid. A dimension property cannot declare
- * support for a mix of axial and individual sides.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {boolean} If the feature has a valid configuration of sides.
- */
-export function useIsDimensionsSupportValid( blockName, feature ) {
-	const sides = useCustomSides( blockName, feature );
+export default {
+	useBlockProps,
+	attributeKeys: [ 'minHeight', 'style' ],
+	hasSupport( name ) {
+		return hasDimensionsSupport( name, 'aspectRatio' );
+	},
+};
 
+function useBlockProps( { name, minHeight, style } ) {
 	if (
-		sides &&
-		sides.some( ( side ) => ALL_SIDES.includes( side ) ) &&
-		sides.some( ( side ) => AXIAL_SIDES.includes( side ) )
+		! hasDimensionsSupport( name, 'aspectRatio' ) ||
+		shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
 	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The ${ feature } support for the "${ blockName }" block can not be configured to support both axial and arbitrary sides.`
-		);
-		return false;
+		return {};
 	}
 
-	return true;
+	const className = clsx( {
+		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+	} );
+
+	// Allow dimensions-based inline style overrides to override any global styles rules that
+	// might be set for the block, and therefore affect the display of the aspect ratio.
+	const inlineStyleOverrides = {};
+
+	// Apply rules to unset incompatible styles.
+	// Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
+	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
+	// that is set should be intentional and should override any existing minHeight. The Cover block
+	// and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
+	// is set.
+	if ( style?.dimensions?.aspectRatio ) {
+		// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+		inlineStyleOverrides.minHeight = 'unset';
+	} else if ( minHeight || style?.dimensions?.minHeight ) {
+		// To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
+		inlineStyleOverrides.aspectRatio = 'unset';
+	}
+
+	return { className, style: inlineStyleOverrides };
+}
+
+/**
+ * @deprecated
+ */
+export function useCustomSides() {
+	deprecated( 'wp.blockEditor.__experimentalUseCustomSides', {
+		since: '6.3',
+		version: '6.4',
+	} );
 }
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index a33ad059cb6653..246e4fde7d8ba8 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -1,83 +1,103 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import {
+	getBlockSupport,
+	getBlockType,
+	hasBlockSupport,
+} from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { useMemo, useContext, createPortal } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import {
 	BlockControls,
+	InspectorControls,
 	__experimentalDuotoneControl as DuotoneControl,
-	useSetting,
+	useSettings,
 } from '../components';
-import BlockList from '../components/block-list';
 import {
-	__unstableDuotoneFilter as DuotoneFilter,
-	__unstableDuotoneStylesheet as DuotoneStylesheet,
-	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
-} from '../components/duotone';
-import { store as blockEditorStore } from '../store';
+	getDuotoneFilter,
+	getDuotoneStylesheet,
+	getDuotoneUnsetStylesheet,
+} from '../components/duotone/utils';
+import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
+import { scopeSelector } from '../components/global-styles/utils';
+import { useBlockSettings, usePrivateStyleOverride } from './utils';
+import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 const EMPTY_ARRAY = [];
 
-extend( [ namesPlugin ] );
-
-/**
- * SVG and stylesheet needed for rendering the duotone filter.
- *
- * @param {Object}           props          Duotone props.
- * @param {string}           props.selector Selector to apply the filter to.
- * @param {string}           props.id       Unique id for this duotone filter.
- * @param {string[]|"unset"} props.colors   Array of RGB color strings ordered from dark to light.
- *
- * @return {WPElement} Duotone element.
- */
-function InlineDuotone( { selector, id, colors } ) {
-	if ( colors === 'unset' ) {
-		return <DuotoneUnsetStylesheet selector={ selector } />;
-	}
+// Safari does not always update the duotone filter when the duotone colors
+// are changed. This browser check is later used to force a re-render of the block
+// element to ensure the duotone filter is updated. The check is included at the
+// root of this file as it only needs to be run once per page load.
+const isSafari =
+	window?.navigator.userAgent &&
+	window.navigator.userAgent.includes( 'Safari' ) &&
+	! window.navigator.userAgent.includes( 'Chrome' ) &&
+	! window.navigator.userAgent.includes( 'Chromium' );
 
-	return (
-		<>
-			<DuotoneFilter id={ id } colors={ colors } />
-			<DuotoneStylesheet id={ id } selector={ selector } />
-		</>
-	);
-}
+extend( [ namesPlugin ] );
 
 function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
-	const disableDefault = ! useSetting( defaultSetting );
-	const userPresets =
-		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
-	const themePresets =
-		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
-	const defaultPresets =
-		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	const [ enableDefault, userPresets, themePresets, defaultPresets ] =
+		useSettings(
+			defaultSetting,
+			`${ presetSetting }.custom`,
+			`${ presetSetting }.theme`,
+			`${ presetSetting }.default`
+		);
 	return useMemo(
 		() => [
-			...userPresets,
-			...themePresets,
-			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+			...( userPresets || EMPTY_ARRAY ),
+			...( themePresets || EMPTY_ARRAY ),
+			...( ( enableDefault && defaultPresets ) || EMPTY_ARRAY ),
 		],
-		[ disableDefault, userPresets, themePresets, defaultPresets ]
+		[ enableDefault, userPresets, themePresets, defaultPresets ]
 	);
 }
 
-function DuotonePanel( { attributes, setAttributes } ) {
-	const style = attributes?.style;
-	const duotone = style?.color?.duotone;
+export function getColorsFromDuotonePreset( duotone, duotonePalette ) {
+	if ( ! duotone ) {
+		return;
+	}
+	const preset = duotonePalette?.find( ( { slug } ) => {
+		return duotone === `var:preset|duotone|${ slug }`;
+	} );
+
+	return preset ? preset.colors : undefined;
+}
+
+export function getDuotonePresetFromColors( colors, duotonePalette ) {
+	if ( ! colors || ! Array.isArray( colors ) ) {
+		return;
+	}
+
+	const preset = duotonePalette?.find( ( duotonePreset ) => {
+		return duotonePreset?.colors?.every(
+			( val, index ) => val === colors[ index ]
+		);
+	} );
+
+	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
+}
+
+function DuotonePanelPure( { style, setAttributes, name } ) {
+	const duotoneStyle = style?.color?.duotone;
+	const settings = useBlockSettings( name );
+	const blockEditingMode = useBlockEditingMode();
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -87,38 +107,83 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		presetSetting: 'color.palette',
 		defaultSetting: 'color.defaultPalette',
 	} );
-	const disableCustomColors = ! useSetting( 'color.custom' );
+	const [ enableCustomColors, enableCustomDuotone ] = useSettings(
+		'color.custom',
+		'color.customDuotone'
+	);
+	const disableCustomColors = ! enableCustomColors;
 	const disableCustomDuotone =
-		! useSetting( 'color.customDuotone' ) ||
+		! enableCustomDuotone ||
 		( colorPalette?.length === 0 && disableCustomColors );
 
 	if ( duotonePalette?.length === 0 && disableCustomDuotone ) {
 		return null;
 	}
 
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
+		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
+		: duotoneStyle;
+
 	return (
-		<BlockControls group="block" __experimentalShareWithChildBlocks>
-			<DuotoneControl
-				duotonePalette={ duotonePalette }
-				colorPalette={ colorPalette }
-				disableCustomDuotone={ disableCustomDuotone }
-				disableCustomColors={ disableCustomColors }
-				value={ duotone }
-				onChange={ ( newDuotone ) => {
-					const newStyle = {
-						...style,
-						color: {
-							...style?.color,
-							duotone: newDuotone,
-						},
-					};
-					setAttributes( { style: newStyle } );
-				} }
-			/>
-		</BlockControls>
+		<>
+			<InspectorControls group="filter">
+				<StylesFiltersPanel
+					value={ { filter: { duotone: duotonePresetOrColors } } }
+					onChange={ ( newDuotone ) => {
+						const newStyle = {
+							...style,
+							color: {
+								...newDuotone?.filter,
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</InspectorControls>
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DuotoneControl
+					duotonePalette={ duotonePalette }
+					colorPalette={ colorPalette }
+					disableCustomDuotone={ disableCustomDuotone }
+					disableCustomColors={ disableCustomColors }
+					value={ duotonePresetOrColors }
+					onChange={ ( newDuotone ) => {
+						const maybePreset = getDuotonePresetFromColors(
+							newDuotone,
+							duotonePalette
+						);
+
+						const newStyle = {
+							...style,
+							color: {
+								...style?.color,
+								duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
+							},
+						};
+						setAttributes( { style: newStyle } );
+					} }
+					settings={ settings }
+				/>
+			</BlockControls>
+		</>
 	);
 }
 
+export default {
+	shareWithChildBlocks: true,
+	edit: DuotonePanelPure,
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'filter.duotone' );
+	},
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * the `duotone` attribute.
@@ -128,7 +193,9 @@ function DuotonePanel( { attributes, setAttributes } ) {
  * @return {Object} Filtered block settings.
  */
 function addDuotoneAttributes( settings ) {
-	if ( ! hasBlockSupport( settings, 'color.__experimentalDuotone' ) ) {
+	// Previous `color.__experimentalDuotone` support flag is migrated via
+	// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
+	if ( ! hasBlockSupport( settings, 'filter.duotone' ) ) {
 		return settings;
 	}
 
@@ -145,135 +212,172 @@ function addDuotoneAttributes( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include toolbar controls for duotone if the
- * block supports duotone.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const hasDuotoneSupport = hasBlockSupport(
-			props.name,
-			'color.__experimentalDuotone'
-		);
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
+function useDuotoneStyles( {
+	clientId,
+	id: filterId,
+	selector: duotoneSelector,
+	attribute: duotoneAttr,
+} ) {
+	const duotonePalette = useMultiOriginPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
 
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ hasDuotoneSupport && ! isContentLocked && (
-					<DuotonePanel { ...props } />
-				) }
-			</>
-		);
-	},
-	'withDuotoneControls'
-);
+	// Possible values for duotone attribute:
+	// 1. Array of colors - e.g. ['#000000', '#ffffff'].
+	// 2. Variable for an existing Duotone preset - e.g. 'var:preset|duotone|green-blue' or 'var(--wp--preset--duotone--green-blue)''
+	// 3. A CSS string - e.g. 'unset' to remove globally applied duotone.
+	const isCustom = Array.isArray( duotoneAttr );
+	const duotonePreset = isCustom
+		? undefined
+		: getColorsFromDuotonePreset( duotoneAttr, duotonePalette );
+	const isPreset = typeof duotoneAttr === 'string' && duotonePreset;
+	const isCSS = typeof duotoneAttr === 'string' && ! isPreset;
 
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-function scopeSelector( scope, selector ) {
-	const scopes = scope.split( ',' );
-	const selectors = selector.split( ',' );
-
-	const selectorsScoped = [];
-	scopes.forEach( ( outer ) => {
-		selectors.forEach( ( inner ) => {
-			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
-		} );
+	// Match the structure of WP_Duotone_Gutenberg::render_duotone_support() in PHP.
+	let colors = null;
+	if ( isPreset ) {
+		// Array of colors.
+		colors = duotonePreset;
+	} else if ( isCSS ) {
+		// CSS filter property string (e.g. 'unset').
+		colors = duotoneAttr;
+	} else if ( isCustom ) {
+		// Array of colors.
+		colors = duotoneAttr;
+	}
+
+	// Build the CSS selectors to which the filter will be applied.
+	const selectors = duotoneSelector.split( ',' );
+
+	const selectorsScoped = selectors.map( ( selectorPart ) => {
+		// Assuming the selector part is a subclass selector (not a tag name)
+		// so we can prepend the filter id class. If we want to support elements
+		// such as `img` or namespaces, we'll need to add a case for that here.
+		return `.${ filterId }${ selectorPart.trim() }`;
 	} );
 
-	return selectorsScoped.join( ', ' );
+	const selector = selectorsScoped.join( ', ' );
+
+	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
+
+	usePrivateStyleOverride(
+		isValidFilter
+			? {
+					css:
+						colors !== 'unset'
+							? getDuotoneStylesheet( selector, filterId )
+							: getDuotoneUnsetStylesheet( selector ),
+					__unstableType: 'presets',
+			  }
+			: undefined
+	);
+	usePrivateStyleOverride(
+		isValidFilter
+			? {
+					assets:
+						colors !== 'unset'
+							? getDuotoneFilter( filterId, colors )
+							: '',
+					__unstableType: 'svgs',
+			  }
+			: undefined
+	);
+
+	const blockElement = useBlockElement( clientId );
+
+	useEffect( () => {
+		if ( ! isValidFilter ) {
+			return;
+		}
+
+		// Safari does not always update the duotone filter when the duotone
+		// colors are changed. When using Safari, force the block element to be
+		// repainted by the browser to ensure any changes are reflected
+		// visually. This logic matches that used on the site frontend in
+		// `block-supports/duotone.php`.
+		if ( blockElement && isSafari ) {
+			const display = blockElement.style.display;
+			// Switch to `inline-block` to force a repaint. In the editor,
+			// `inline-block` is used instead of `none` to ensure that scroll
+			// position is not affected, as `none` results in the editor
+			// scrolling to the top of the block.
+			blockElement.style.setProperty( 'display', 'inline-block' );
+			// Simply accessing el.offsetHeight flushes layout and style changes
+			// in WebKit without having to wait for setTimeout.
+			// eslint-disable-next-line no-unused-expressions
+			blockElement.offsetHeight;
+			blockElement.style.setProperty( 'display', display );
+		}
+		// `colors` must be a dependency so this effect runs when the colors
+		// change in Safari.
+	}, [ isValidFilter, blockElement, colors ] );
 }
 
-/**
- * Override the default block element to include duotone styles.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const duotoneSupport = getBlockSupport(
-			props.name,
-			'color.__experimentalDuotone'
-		);
-		const colors = props?.attributes?.style?.color?.duotone;
+// Used for generating the instance ID
+const DUOTONE_BLOCK_PROPS_REFERENCE = {};
+
+function useBlockProps( { clientId, name, style } ) {
+	const id = useInstanceId( DUOTONE_BLOCK_PROPS_REFERENCE );
+	const selector = useMemo( () => {
+		const blockType = getBlockType( name );
+
+		if ( blockType ) {
+			// Backwards compatibility for `supports.color.__experimentalDuotone`
+			// is provided via the `block_type_metadata_settings` filter. If
+			// `supports.filter.duotone` has not been set and the
+			// experimental property has been, the experimental property
+			// value is copied into `supports.filter.duotone`.
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'filter.duotone',
+				false
+			);
+			if ( ! duotoneSupport ) {
+				return null;
+			}
 
-		if ( ! duotoneSupport || ! colors ) {
-			return <BlockListBlock { ...props } />;
+			// If the experimental duotone support was set, that value is
+			// to be treated as a selector and requires scoping.
+			const experimentalDuotone = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			if ( experimentalDuotone ) {
+				const rootSelector = getBlockCSSSelector( blockType );
+				return typeof experimentalDuotone === 'string'
+					? scopeSelector( rootSelector, experimentalDuotone )
+					: rootSelector;
+			}
+
+			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+			return getBlockCSSSelector( blockType, 'filter.duotone', {
+				fallback: true,
+			} );
 		}
+	}, [ name ] );
 
-		const id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;
+	const attribute = style?.color?.duotone;
 
-		// Extra .editor-styles-wrapper specificity is needed in the editor
-		// since we're not using inline styles to apply the filter. We need to
-		// override duotone applied by global styles and theme.json.
-		const selectorsGroup = scopeSelector(
-			`.editor-styles-wrapper .${ id }`,
-			duotoneSupport
-		);
+	const filterClass = `wp-duotone-${ id }`;
 
-		const className = classnames( props?.className, id );
-
-		const element = useContext( BlockList.__unstableElementContext );
-
-		return (
-			<>
-				{ element &&
-					createPortal(
-						<InlineDuotone
-							selector={ selectorsGroup }
-							id={ id }
-							colors={ colors }
-						/>,
-						element
-					) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
-	},
-	'withDuotoneStyles'
-);
+	const shouldRender = selector && attribute;
+
+	useDuotoneStyles( {
+		clientId,
+		id: filterClass,
+		selector,
+		attribute,
+	} );
+
+	return {
+		className: shouldRender ? filterClass : '',
+	};
+}
 
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',
 	addDuotoneAttributes
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/duotone/with-editor-controls',
-	withDuotoneControls
-);
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/duotone/with-styles',
-	withDuotoneStyles
-);
diff --git a/packages/block-editor/src/hooks/font-appearance.js b/packages/block-editor/src/hooks/font-appearance.js
deleted file mode 100644
index af25daed0d30b5..00000000000000
--- a/packages/block-editor/src/hooks/font-appearance.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import FontAppearanceControl from '../components/font-appearance-control';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Key within block settings' support array indicating support for font style.
- */
-export const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
-
-/**
- * Key within block settings' support array indicating support for font weight.
- */
-export const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
-
-/**
- * Inspector control panel containing the font appearance options.
- *
- * @param {Object} props Block properties.
- *
- * @return {WPElement} Font appearance edit element.
- */
-export function FontAppearanceEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	const hasFontStyles = ! useIsFontStyleDisabled( props );
-	const hasFontWeights = ! useIsFontWeightDisabled( props );
-
-	const onChange = ( newStyles ) => {
-		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...style?.typography,
-					fontStyle: newStyles.fontStyle,
-					fontWeight: newStyles.fontWeight,
-				},
-			} ),
-		} );
-	};
-
-	const fontStyle = style?.typography?.fontStyle;
-	const fontWeight = style?.typography?.fontWeight;
-
-	return (
-		<FontAppearanceControl
-			onChange={ onChange }
-			hasFontStyles={ hasFontStyles }
-			hasFontWeights={ hasFontWeights }
-			value={ { fontStyle, fontWeight } }
-			size="__unstable-large"
-		/>
-	);
-}
-
-/**
- * Checks if font style support has been disabled either by not opting in for
- * support or by failing to provide preset styles.
- *
- * @param {Object} props      Block properties.
- * @param {string} props.name Name for the block type.
- *
- * @return {boolean} Whether font style support has been disabled.
- */
-export function useIsFontStyleDisabled( { name: blockName } = {} ) {
-	const styleSupport = hasBlockSupport( blockName, FONT_STYLE_SUPPORT_KEY );
-	const hasFontStyles = useSetting( 'typography.fontStyle' );
-
-	return ! styleSupport || ! hasFontStyles;
-}
-
-/**
- * Checks if font weight support has been disabled either by not opting in for
- * support or by failing to provide preset weights.
- *
- * @param {Object} props      Block properties.
- * @param {string} props.name Name for the block type.
- *
- * @return {boolean} Whether font weight support has been disabled.
- */
-export function useIsFontWeightDisabled( { name: blockName } = {} ) {
-	const weightSupport = hasBlockSupport( blockName, FONT_WEIGHT_SUPPORT_KEY );
-	const hasFontWeights = useSetting( 'typography.fontWeight' );
-
-	return ! weightSupport || ! hasFontWeights;
-}
-
-/**
- * Checks if font appearance support has been disabled.
- *
- * @param {Object} props Block properties.
- *
- * @return {boolean} Whether font appearance support has been disabled.
- */
-export function useIsFontAppearanceDisabled( props ) {
-	const stylesDisabled = useIsFontStyleDisabled( props );
-	const weightsDisabled = useIsFontWeightDisabled( props );
-
-	return stylesDisabled && weightsDisabled;
-}
-
-/**
- * Checks if there is either a font style or weight value set within the
- * typography styles.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font style or weight.
- */
-export function hasFontAppearanceValue( props ) {
-	const { fontStyle, fontWeight } = props.attributes.style?.typography || {};
-	return !! fontStyle || !! fontWeight;
-}
-
-/**
- * Resets the font style and weight block support attributes. This can be used
- * when disabling the font appearance support controls for a block via a
- * progressive discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetFontAppearance( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				fontStyle: undefined,
-				fontWeight: undefined,
-			},
-		} ),
-	} );
-}
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
index fe8693f64421bf..e5d8e02ab8ec02 100644
--- a/packages/block-editor/src/hooks/font-family.js
+++ b/packages/block-editor/src/hooks/font-family.js
@@ -1,24 +1,20 @@
-/**
- * External dependencies
- */
-import { find, kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import FontFamilyControl from '../components/font-family';
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import { unlock } from '../lock-unlock';
 
-export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
+export const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /**
  * Filters registered block settings, extending attributes to include
@@ -80,88 +76,18 @@ function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to expand the block edit wrapper
- * by applying the desired styles and classnames.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
-export function FontFamilyEdit( {
-	setAttributes,
-	attributes: { fontFamily },
-} ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-
-	const value = find(
-		fontFamilies,
-		( { slug } ) => fontFamily === slug
-	)?.fontFamily;
-
-	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
-			( { fontFamily: f } ) => f === newValue
-		);
-		setAttributes( {
-			fontFamily: predefinedFontFamily?.slug,
-		} );
-	}
-
-	return (
-		<FontFamilyControl
-			className="block-editor-hooks-font-family-control"
-			fontFamilies={ fontFamilies }
-			value={ value }
-			onChange={ onChange }
-			size="__unstable-large"
-			__nextHasNoMarginBottom
-		/>
-	);
-}
-
-/**
- * Custom hook that checks if font-family functionality is disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean} Whether setting is disabled.
- */
-export function useIsFontFamilyDisabled( { name } ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	return (
-		! fontFamilies ||
-		fontFamilies.length === 0 ||
-		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
-	);
+function useBlockProps( { name, fontFamily } ) {
+	return addSaveProps( {}, name, { fontFamily } );
 }
 
-/**
- * Checks if there is a current value set for the font family block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font family value set.
- */
-export function hasFontFamilyValue( props ) {
-	return !! props.attributes.fontFamily;
-}
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'fontFamily' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
+	},
+};
 
 /**
  * Resets the font family block support attribute. This can be used when
@@ -180,15 +106,3 @@ addFilter(
 	'core/fontFamily/addAttribute',
 	addAttributes
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/fontFamily/addSaveProps',
-	addSaveProps
-);
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/fontFamily/addEditProps',
-	addEditProps
-);
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index 6cb950afc45641..e0f8c47c163b07 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -4,8 +4,6 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,7 +13,6 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
-	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -23,8 +20,8 @@ import {
 	transformStyles,
 	shouldSkipSerialization,
 } from './utils';
-import useSetting from '../components/use-setting';
-import { store as blockEditorStore } from '../store';
+import { useSettings } from '../components/use-settings';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -56,19 +53,23 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject font size.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object} props           Additional props applied to save element.
+ * @param {Object} blockNameOrType Block type.
+ * @param {Object} attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-function addSaveProps( props, blockType, attributes ) {
-	if ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {
+function addSaveProps( props, blockNameOrType, attributes ) {
+	if ( ! hasBlockSupport( blockNameOrType, FONT_SIZE_SUPPORT_KEY ) ) {
 		return props;
 	}
 
 	if (
-		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
+		shouldSkipSerialization(
+			blockNameOrType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'fontSize'
+		)
 	) {
 		return props;
 	}
@@ -82,44 +83,19 @@ function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to expand the block edit wrapper
- * by applying the desired styles and classnames.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
 /**
  * Inspector control panel containing the font size related configuration
  *
  * @param {Object} props
  *
- * @return {WPElement} Font size edit element.
+ * @return {Element} Font size edit element.
  */
 export function FontSizeEdit( props ) {
 	const {
 		attributes: { fontSize, style },
 		setAttributes,
 	} = props;
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const onChange = ( value ) => {
 		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
@@ -152,46 +128,10 @@ export function FontSizeEdit( props ) {
 			withReset={ false }
 			withSlider
 			size="__unstable-large"
-			__nextHasNoMarginBottom
 		/>
 	);
 }
 
-/**
- * Checks if there is a current value set for the font size block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font size value set.
- */
-export function hasFontSizeValue( props ) {
-	const { fontSize, style } = props.attributes;
-	return !! fontSize || !! style?.typography?.fontSize;
-}
-
-/**
- * Resets the font size block support attribute. This can be used when
- * disabling the font size support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetFontSize( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		fontSize: undefined,
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				fontSize: undefined,
-			},
-		} ),
-	} );
-}
-
 /**
  * Custom hook that checks if font-size settings have been disabled.
  *
@@ -199,7 +139,7 @@ export function resetFontSize( { attributes = {}, setAttributes } ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsFontSizeDisabled( { name: blockName } = {} ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 	const hasFontSizes = !! fontSizes?.length;
 
 	return (
@@ -207,68 +147,77 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
 	);
 }
 
-/**
- * Add inline styles for font sizes.
- * Ideally, this is not needed and themes load the font-size classes on the
- * editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withFontSizeInlineStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const fontSizes = useSetting( 'typography.fontSizes' );
-		const {
-			name: blockName,
-			attributes: { fontSize, style },
-			wrapperProps,
-		} = props;
+function useBlockProps( { name, fontSize, style } ) {
+	const [ fontSizes, fluidTypographySettings, layoutSettings ] = useSettings(
+		'typography.fontSizes',
+		'typography.fluid',
+		'layout'
+	);
 
-		// Only add inline styles if the block supports font sizes,
-		// doesn't skip serialization of font sizes,
-		// doesn't already have an inline font size,
-		// and does have a class to extract the font size from.
-		if (
-			! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||
-			shouldSkipSerialization(
-				blockName,
-				TYPOGRAPHY_SUPPORT_KEY,
-				'fontSize'
-			) ||
-			! fontSize ||
-			style?.typography?.fontSize
-		) {
-			return <BlockListBlock { ...props } />;
-		}
+	/*
+	 * Only add inline styles if the block supports font sizes,
+	 * doesn't skip serialization of font sizes,
+	 * and has either a custom font size or a preset font size.
+	 */
+	if (
+		! hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY ) ||
+		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' ) ||
+		( ! fontSize && ! style?.typography?.fontSize )
+	) {
+		return;
+	}
 
-		const fontSizeValue = getFontSize(
-			fontSizes,
-			fontSize,
-			style?.typography?.fontSize
-		).size;
+	let props;
 
-		const newProps = {
-			...props,
-			wrapperProps: {
-				...wrapperProps,
-				style: {
-					fontSize: fontSizeValue,
-					...wrapperProps?.style,
-				},
+	if ( style?.typography?.fontSize ) {
+		props = {
+			style: {
+				fontSize: getTypographyFontSizeValue(
+					{ size: style.typography.fontSize },
+					{
+						typography: {
+							fluid: fluidTypographySettings,
+						},
+						layout: layoutSettings,
+					}
+				),
+			},
+		};
+	}
+
+	if ( fontSize ) {
+		props = {
+			style: {
+				fontSize: getFontSize(
+					fontSizes,
+					fontSize,
+					style?.typography?.fontSize
+				).size,
 			},
 		};
+	}
+
+	if ( ! props ) {
+		return;
+	}
+
+	return addSaveProps( props, name, { fontSize } );
+}
 
-		return <BlockListBlock { ...newProps } />;
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'fontSize', 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},
-	'withFontSizeInlineStyles'
-);
+};
 
 const MIGRATION_PATHS = {
 	fontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],
 };
 
-export function addTransforms( result, source, index, results ) {
+function addTransforms( result, source, index, results ) {
 	const destinationBlockType = result.name;
 	const activeSupports = {
 		fontSize: hasBlockSupport(
@@ -286,100 +235,14 @@ export function addTransforms( result, source, index, results ) {
 	);
 }
 
-/**
- * Allow custom font sizes to appear fluid when fluid typography is enabled at
- * the theme level.
- *
- * Adds a custom getEditWrapperProps() callback to all block types that support
- * font sizes. Then, if fluid typography is enabled, this callback will swap any
- * custom font size in style.fontSize with a fluid font size (i.e. one that uses
- * clamp()).
- *
- * It's important that this hook runs after 'core/style/addEditProps' sets
- * style.fontSize as otherwise fontSize will be overwritten.
- *
- * @param {Object} blockType Block settings object.
- */
-function addEditPropsForFluidCustomFontSizes( blockType ) {
-	if (
-		! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
-		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
-	) {
-		return blockType;
-	}
-
-	const existingGetEditWrapperProps = blockType.getEditWrapperProps;
-
-	blockType.getEditWrapperProps = ( attributes ) => {
-		const wrapperProps = existingGetEditWrapperProps
-			? existingGetEditWrapperProps( attributes )
-			: {};
-
-		const fontSize = wrapperProps?.style?.fontSize;
-
-		// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
-		// or even useSelect( blockEditorStore ). We can't do either here
-		// because getEditWrapperProps is a plain JavaScript function called by
-		// BlockListBlock and not a React component rendered within
-		// 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
-				?.typography?.fluid;
-
-		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
-				: null;
-
-		if ( newFontSize === null ) {
-			return wrapperProps;
-		}
-
-		return {
-			...wrapperProps,
-			style: {
-				...wrapperProps?.style,
-				fontSize: newFontSize,
-			},
-		};
-	};
-
-	return blockType;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
 	addAttributes
 );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/font/addSaveProps',
-	addSaveProps
-);
-
-addFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/font-size/with-font-size-inline-styles',
-	withFontSizeInlineStyles
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/font-size/addTransforms',
 	addTransforms
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/font-size/addEditPropsForFluidCustomFontSizes',
-	addEditPropsForFluidCustomFontSizes,
-	// Run after 'core/style/addEditProps' so that the style object has already
-	// been translated into inline CSS.
-	11
-);
diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
index 018872eb840329..887325e6409dde 100644
--- a/packages/block-editor/src/hooks/gap.js
+++ b/packages/block-editor/src/hooks/gap.js
@@ -1,45 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-import SpacingSizesControl from '../components/spacing-sizes-control';
-import useSetting from '../components/use-setting';
-import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Determines if there is gap support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- * @return {boolean}                Whether there is support.
- */
-export function hasGapSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.blockGap );
-}
-
-/**
- * Checks if there is a current value in the gap block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a gap value set.
- */
-export function hasGapValue( props ) {
-	return props.attributes.style?.spacing?.blockGap !== undefined;
-}
 
 /**
  * Returns a BoxControl object value from a given blockGap style value.
@@ -65,7 +27,7 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
  * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
- * @param {string?}           defaultValue  A default gap value.
+ * @param {?string}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
@@ -82,166 +44,3 @@ export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 
 	return row === column ? row : `${ row } ${ column }`;
 }
-
-/**
- * Resets the gap block support attribute. This can be used when disabling
- * the gap support controls for a block via a progressive discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetGap( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: {
-			...style,
-			spacing: {
-				...style?.spacing,
-				blockGap: undefined,
-			},
-		},
-	} );
-}
-
-/**
- * Custom hook that checks if gap settings have been disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean}     Whether the gap setting is disabled.
- */
-export function useIsGapDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.blockGap' );
-	return ! hasGapSupport( blockName ) || isDisabled;
-}
-
-/**
- * Inspector control panel containing the gap related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Gap edit element.
- */
-export function GapEdit( props ) {
-	const {
-		clientId,
-		attributes: { style },
-		name: blockName,
-		setAttributes,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'blockGap' );
-	const ref = useBlockRef( clientId );
-
-	if ( useIsGapDisabled( props ) ) {
-		return null;
-	}
-
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	const onChange = ( next ) => {
-		let blockGap = next;
-
-		// If splitOnAxis activated we need to return a BoxControl object to the BoxControl component.
-		if ( !! next && splitOnAxis ) {
-			blockGap = { ...getGapBoxControlValueFromStyle( next ) };
-		} else if ( next?.hasOwnProperty( 'top' ) ) {
-			// If splitOnAxis is not enabled, treat the 'top' value as the shorthand gap value.
-			blockGap = next.top;
-		}
-
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				blockGap,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-
-		// In Safari, changing the `gap` CSS value on its own will not trigger the layout
-		// to be recalculated / re-rendered. To force the updated gap to re-render, here
-		// we replace the block's node with itself.
-		const isSafari =
-			window?.navigator.userAgent &&
-			window.navigator.userAgent.includes( 'Safari' ) &&
-			! window.navigator.userAgent.includes( 'Chrome ' ) &&
-			! window.navigator.userAgent.includes( 'Chromium ' );
-
-		if ( ref.current && isSafari ) {
-			ref.current.parentNode?.replaceChild( ref.current, ref.current );
-		}
-	};
-
-	const gapValue = getGapBoxControlValueFromStyle( style?.spacing?.blockGap );
-
-	// The BoxControl component expects a full complement of side values.
-	// Gap row and column values translate to top/bottom and left/right respectively.
-	const boxControlGapValue = splitOnAxis
-		? {
-				...gapValue,
-				right: gapValue?.left,
-				bottom: gapValue?.top,
-		  }
-		: {
-				top: gapValue?.top,
-		  };
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) &&
-					( splitOnAxis ? (
-						<BoxControl
-							label={ __( 'Block spacing' ) }
-							min={ 0 }
-							onChange={ onChange }
-							units={ units }
-							sides={ sides }
-							values={ boxControlGapValue }
-							allowReset={ false }
-							splitOnAxis={ splitOnAxis }
-						/>
-					) : (
-						<UnitControl
-							label={ __( 'Block spacing' ) }
-							__unstableInputWidth="80px"
-							min={ 0 }
-							onChange={ onChange }
-							units={ units }
-							// Default to `row` for combined values.
-							value={ boxControlGapValue }
-						/>
-					) ) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ boxControlGapValue }
-						onChange={ onChange }
-						label={ __( 'Block spacing' ) }
-						sides={ splitOnAxis ? sides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}
diff --git a/packages/block-editor/src/hooks/grid-visualizer.js b/packages/block-editor/src/hooks/grid-visualizer.js
new file mode 100644
index 00000000000000..26650c85ea5094
--- /dev/null
+++ b/packages/block-editor/src/hooks/grid-visualizer.js
@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { GridVisualizer, useGridLayoutSync } from '../components/grid';
+import { store as blockEditorStore } from '../store';
+
+function GridLayoutSync( props ) {
+	useGridLayoutSync( props );
+}
+
+function GridTools( { clientId, layout } ) {
+	const isVisible = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				isDraggingBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+
+			// These calls are purposely ordered from least expensive to most expensive.
+			// Hides the visualizer in cases where the user is not or cannot interact with it.
+			if (
+				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+				getTemplateLock( clientId ) ||
+				getBlockEditingMode( clientId ) !== 'default'
+			) {
+				return false;
+			}
+
+			return true;
+		},
+		[ clientId ]
+	);
+
+	return (
+		<>
+			<GridLayoutSync clientId={ clientId } />
+			{ isVisible && (
+				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			) }
+		</>
+	);
+}
+
+const addGridVisualizerToBlockEdit = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.attributes.layout?.type !== 'grid' ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
+		return (
+			<>
+				<GridTools
+					clientId={ props.clientId }
+					layout={ props.attributes.layout }
+				/>
+				<BlockEdit key="edit" { ...props } />
+			</>
+		);
+	},
+	'addGridVisualizerToBlockEdit'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/grid-visualizer',
+	addGridVisualizerToBlockEdit
+);
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f6fa73a053ac58..66ff60b691b66f 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -1,29 +1,94 @@
 /**
  * Internal dependencies
  */
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
-import './align';
+import align from './align';
+import background from './background';
 import './lock';
-import './anchor';
-import './aria-label';
-import './custom-class-name';
+import anchor from './anchor';
+import ariaLabel from './aria-label';
+import customClassName from './custom-class-name';
 import './generated-class-name';
-import './style';
+import style from './style';
 import './settings';
-import './color';
-import './duotone';
-import './font-size';
-import './border';
-import './layout';
-import './content-lock-ui';
+import color from './color';
+import dimensions from './dimensions';
+import duotone from './duotone';
+import fontFamily from './font-family';
+import fontSize from './font-size';
+import textAlign from './text-align';
+import border from './border';
+import position from './position';
+import blockStyleVariation from './block-style-variation';
+import layout from './layout';
+import childLayout from './layout-child';
+import contentLockUI from './content-lock-ui';
 import './metadata';
-import './metadata-name';
+import blockHooks from './block-hooks';
+import blockBindingsPanel from './block-bindings';
+import './block-renaming';
+import './use-bindings-attributes';
+import './grid-visualizer';
+
+createBlockEditFilter(
+	[
+		align,
+		textAlign,
+		anchor,
+		customClassName,
+		style,
+		duotone,
+		position,
+		layout,
+		contentLockUI,
+		blockHooks,
+		blockBindingsPanel,
+		childLayout,
+	].filter( Boolean )
+);
+createBlockListBlockFilter( [
+	align,
+	textAlign,
+	background,
+	style,
+	color,
+	dimensions,
+	duotone,
+	fontFamily,
+	fontSize,
+	border,
+	position,
+	blockStyleVariation,
+	childLayout,
+] );
+createBlockSaveFilter( [
+	align,
+	textAlign,
+	anchor,
+	ariaLabel,
+	customClassName,
+	border,
+	color,
+	style,
+	fontFamily,
+	fontSize,
+] );
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { setBackgroundStyleDefaults } from './background';
+export { useZoomOut } from './use-zoom-out';
+export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { useStyleOverride } from './utils';
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index 57e98ef91f915d..c7f9df868f2bd7 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -1,17 +1,35 @@
 /**
  * Internal dependencies
  */
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
-import './align';
-import './anchor';
-import './custom-class-name';
+import align from './align';
+import anchor from './anchor';
+import customClassName from './custom-class-name';
 import './generated-class-name';
-import './style';
-import './color';
-import './font-size';
+import style from './style';
+import color from './color';
+import fontSize from './font-size';
 import './layout';
 
+createBlockEditFilter( [ align, anchor, style ] );
+createBlockListBlockFilter( [ align, style, color, fontSize ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	customClassName,
+	color,
+	style,
+	fontSize,
+] );
+
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
new file mode 100644
index 00000000000000..7a8e039c689690
--- /dev/null
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -0,0 +1,286 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useStyleOverride } from './utils';
+import { useLayout } from '../components/block-list/layout';
+import {
+	GridVisualizer,
+	GridItemResizer,
+	GridItemMovers,
+} from '../components/grid';
+
+// Used for generating the instance ID
+const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
+
+function useBlockPropsChildLayoutStyles( { style } ) {
+	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
+		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
+	} );
+	const layout = style?.layout ?? {};
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = layout;
+	const parentLayout = useLayout() || {};
+	const { columnCount, minimumColumnWidth } = parentLayout;
+	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
+	const selector = `.wp-container-content-${ id }`;
+
+	// Check that the grid layout attributes are of the correct type, so that we don't accidentally
+	// write code that stores a string attribute instead of a number.
+	if ( process.env.NODE_ENV === 'development' ) {
+		if ( columnStart && typeof columnStart !== 'number' ) {
+			throw new Error( 'columnStart must be a number' );
+		}
+		if ( rowStart && typeof rowStart !== 'number' ) {
+			throw new Error( 'rowStart must be a number' );
+		}
+		if ( columnSpan && typeof columnSpan !== 'number' ) {
+			throw new Error( 'columnSpan must be a number' );
+		}
+		if ( rowSpan && typeof rowSpan !== 'number' ) {
+			throw new Error( 'rowSpan must be a number' );
+		}
+	}
+
+	let css = '';
+	if ( shouldRenderChildLayoutStyles ) {
+		if ( selfStretch === 'fixed' && flexSize ) {
+			css = `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+		} else if ( selfStretch === 'fill' ) {
+			css = `${ selector } {
+				flex-grow: 1;
+			}`;
+		} else if ( columnStart && columnSpan ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart } / span ${ columnSpan };
+			}`;
+		} else if ( columnStart ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart };
+			}`;
+		} else if ( columnSpan ) {
+			css = `${ selector } {
+				grid-column: span ${ columnSpan };
+			}`;
+		}
+		if ( rowStart && rowSpan ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart } / span ${ rowSpan };
+			}`;
+		} else if ( rowStart ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart };
+			}`;
+		} else if ( rowSpan ) {
+			css += `${ selector } {
+				grid-row: span ${ rowSpan };
+			}`;
+		}
+		/**
+		 * If minimumColumnWidth is set on the parent, or if no
+		 * columnCount is set, the grid is responsive so a
+		 * container query is needed for the span to resize.
+		 */
+		if (
+			( columnSpan || columnStart ) &&
+			( minimumColumnWidth || ! columnCount )
+		) {
+			let parentColumnValue = parseFloat( minimumColumnWidth );
+			/**
+			 * 12rem is the default minimumColumnWidth value.
+			 * If parentColumnValue is not a number, default to 12.
+			 */
+			if ( isNaN( parentColumnValue ) ) {
+				parentColumnValue = 12;
+			}
+
+			let parentColumnUnit = minimumColumnWidth?.replace(
+				parentColumnValue,
+				''
+			);
+			/**
+			 * Check that parent column unit is either 'px', 'rem' or 'em'.
+			 * If not, default to 'rem'.
+			 */
+			if ( ! [ 'px', 'rem', 'em' ].includes( parentColumnUnit ) ) {
+				parentColumnUnit = 'rem';
+			}
+
+			let numColsToBreakAt = 2;
+
+			if ( columnSpan && columnStart ) {
+				numColsToBreakAt = columnSpan + columnStart - 1;
+			} else if ( columnSpan ) {
+				numColsToBreakAt = columnSpan;
+			} else {
+				numColsToBreakAt = columnStart;
+			}
+
+			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
+			const containerQueryValue =
+				numColsToBreakAt * parentColumnValue +
+				( numColsToBreakAt - 1 ) * defaultGapValue;
+			// For blocks that only span one column, we want to remove any rowStart values as
+			// the container reduces in size, so that blocks are still arranged in markup order.
+			const minimumContainerQueryValue =
+				parentColumnValue * 2 + defaultGapValue - 1;
+			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
+			const gridColumnValue =
+				columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
+
+			css += `@container (max-width: ${ Math.max(
+				containerQueryValue,
+				minimumContainerQueryValue
+			) }${ parentColumnUnit }) {
+				${ selector } {
+					grid-column: ${ gridColumnValue };
+					grid-row: auto;
+				}
+			}`;
+		}
+	}
+
+	useStyleOverride( { css } );
+
+	// Only attach a container class if there is generated CSS to be attached.
+	if ( ! css ) {
+		return;
+	}
+
+	// Attach a `wp-container-content` id-based classname.
+	return { className: `wp-container-content-${ id }` };
+}
+
+function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+		isManualPlacement,
+	} = parentLayout;
+
+	if ( parentLayoutType !== 'grid' ) {
+		return null;
+	}
+
+	return (
+		<GridTools
+			clientId={ clientId }
+			style={ style }
+			setAttributes={ setAttributes }
+			allowSizingOnChildren={ allowSizingOnChildren }
+			isManualPlacement={ isManualPlacement }
+			parentLayout={ parentLayout }
+		/>
+	);
+}
+
+function GridTools( {
+	clientId,
+	style,
+	setAttributes,
+	allowSizingOnChildren,
+	isManualPlacement,
+	parentLayout,
+} ) {
+	const { rootClientId, isVisible } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlockEditingMode,
+				getTemplateLock,
+			} = select( blockEditorStore );
+
+			const _rootClientId = getBlockRootClientId( clientId );
+
+			if (
+				getTemplateLock( _rootClientId ) ||
+				getBlockEditingMode( _rootClientId ) !== 'default'
+			) {
+				return {
+					rootClientId: _rootClientId,
+					isVisible: false,
+				};
+			}
+
+			return {
+				rootClientId: _rootClientId,
+				isVisible: true,
+			};
+		},
+		[ clientId ]
+	);
+
+	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
+	const [ resizerBounds, setResizerBounds ] = useState();
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	function updateLayout( layout ) {
+		setAttributes( {
+			style: {
+				...style,
+				layout: {
+					...style?.layout,
+					...layout,
+				},
+			},
+		} );
+	}
+
+	return (
+		<>
+			<GridVisualizer
+				clientId={ rootClientId }
+				contentRef={ setResizerBounds }
+				parentLayout={ parentLayout }
+			/>
+			{ allowSizingOnChildren && (
+				<GridItemResizer
+					clientId={ clientId }
+					// Don't allow resizing beyond the grid visualizer.
+					bounds={ resizerBounds }
+					onChange={ updateLayout }
+					parentLayout={ parentLayout }
+				/>
+			) }
+			{ isManualPlacement &&
+				window.__experimentalEnableGridInteractivity && (
+					<GridItemMovers
+						layout={ style?.layout }
+						parentLayout={ parentLayout }
+						onChange={ updateLayout }
+						gridClientId={ rootClientId }
+						blockClientId={ clientId }
+					/>
+				) }
+		</>
+	);
+}
+
+export default {
+	useBlockProps: useBlockPropsChildLayoutStyles,
+	edit: ChildLayoutControlsPure,
+	attributeKeys: [ 'style' ],
+	hasSupport() {
+		return true;
+	},
+};
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index a2058cb24677e9..54a376a0c6a4f7 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { kebabCase } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,46 +11,48 @@ import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
-	Button,
-	ButtonGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
 	PanelBody,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useContext, createPortal } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
-import useSetting from '../components/use-setting';
-import { LayoutStyle } from '../components/block-list/layout';
-import BlockList from '../components/block-list';
+import { useSettings } from '../components/use-settings';
 import { getLayoutType, getLayoutTypes } from '../layouts';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
+import { useBlockSettings, useStyleOverride } from './utils';
+import { unlock } from '../lock-unlock';
 
-const layoutBlockSupportKey = '__experimentalLayout';
+const layoutBlockSupportKey = 'layout';
+const { kebabCase } = unlock( componentsPrivateApis );
+
+function hasLayoutBlockSupport( blockName ) {
+	return (
+		hasBlockSupport( blockName, 'layout' ) ||
+		hasBlockSupport( blockName, '__experimentalLayout' )
+	);
+}
 
 /**
  * Generates the utility classnames for the given block's layout attributes.
  *
- * @param { Object } block Block object.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
  *
  * @return { Array } Array of CSS classname strings.
  */
-export function useLayoutClasses( block = {} ) {
-	const rootPaddingAlignment = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalFeatures
-			?.useRootPaddingAwareAlignments;
-	}, [] );
-	const globalLayoutSettings = useSetting( 'layout' ) || {};
-
-	const { attributes = {}, name } = block;
-	const { layout } = attributes;
-
+export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
+	const { layout } = blockAttributes;
 	const { default: defaultBlockLayout } =
-		getBlockSupport( name, layoutBlockSupportKey ) || {};
+		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
@@ -59,22 +60,32 @@ export function useLayoutClasses( block = {} ) {
 
 	const layoutClassnames = [];
 
-	if (
-		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-			?.className
-	) {
-		layoutClassnames.push(
-			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-				?.className
-		);
+	if ( LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className ) {
+		const baseClassName =
+			LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className;
+		const splitBlockName = blockName.split( '/' );
+		const fullBlockName =
+			splitBlockName[ 0 ] === 'core'
+				? splitBlockName.pop()
+				: splitBlockName.join( '-' );
+		const compoundClassName = `wp-block-${ fullBlockName }-${ baseClassName }`;
+		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
-	if (
-		( usedLayout?.inherit ||
-			usedLayout?.contentSize ||
-			usedLayout?.type === 'constrained' ) &&
-		rootPaddingAlignment
-	) {
+	const hasGlobalPadding = useSelect(
+		( select ) => {
+			return (
+				( usedLayout?.inherit ||
+					usedLayout?.contentSize ||
+					usedLayout?.type === 'constrained' ) &&
+				select( blockEditorStore ).getSettings().__experimentalFeatures
+					?.useRootPaddingAwareAlignments
+			);
+		},
+		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
+	);
+
+	if ( hasGlobalPadding ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -100,88 +111,110 @@ export function useLayoutClasses( block = {} ) {
 /**
  * Generates a CSS rule with the given block's layout styles.
  *
- * @param { Object } block    Block object.
- * @param { string } selector A selector to use in generating the CSS rule.
+ * @param { Object } blockAttributes Block attributes.
+ * @param { string } blockName       Block name.
+ * @param { string } selector        A selector to use in generating the CSS rule.
  *
  * @return { string } CSS rule.
  */
-export function useLayoutStyles( block = {}, selector ) {
-	const { attributes = {}, name } = block;
-	const { layout = {}, style = {} } = attributes;
+export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
+	const { layout = {}, style = {} } = blockAttributes;
 	// Update type for blocks using legacy layouts.
 	const usedLayout =
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
 			: layout || {};
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
-	const globalLayoutSettings = useSetting( 'layout' ) || {};
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
-	const css = fullLayoutType?.getLayoutStyle?.( {
-		blockName: name,
+	return fullLayoutType?.getLayoutStyle?.( {
+		blockName,
 		selector,
 		layout,
-		layoutDefinitions: globalLayoutSettings?.definitions,
 		style,
 		hasBlockGapSupport,
 	} );
-	return css;
 }
 
-function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
-	const { layout } = attributes;
-	const defaultThemeLayout = useSetting( 'layout' );
-	const themeSupportsLayout = useSelect( ( select ) => {
+function LayoutPanelPure( {
+	layout,
+	setAttributes,
+	name: blockName,
+	clientId,
+} ) {
+	const settings = useBlockSettings( blockName );
+	// Block settings come from theme.json under settings.[blockName].
+	const { layout: layoutSettings } = settings;
+	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
+		return {
+			themeSupportsLayout: getSettings().supportsLayout,
+		};
 	}, [] );
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
+	// Layout block support comes from the block's block.json.
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
 		layoutBlockSupportKey,
 		{}
 	);
+	const blockSupportAndThemeSettings = {
+		...layoutSettings,
+		...layoutBlockSupport,
+	};
 	const {
 		allowSwitching,
 		allowEditing = true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
-	} = layoutBlockSupport;
+	} = blockSupportAndThemeSettings;
 
 	if ( ! allowEditing ) {
 		return null;
 	}
 
+	/*
+	 * Try to find the layout type from either the
+	 * block's layout settings or any saved layout config.
+	 */
+	const blockSupportAndLayout = {
+		...layoutBlockSupport,
+		...layout,
+	};
+	const { type, default: { type: defaultType = 'default' } = {} } =
+		blockSupportAndLayout;
+	const blockLayoutType = type || defaultType;
+
 	// Only show the inherit toggle if it's supported,
-	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
 	// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 	const showInheritToggle = !! (
 		allowInheriting &&
-		!! defaultThemeLayout &&
-		( ! layout?.type ||
-			layout?.type === 'default' ||
-			layout?.type === 'constrained' ||
-			layout?.inherit )
+		( ! blockLayoutType ||
+			blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ||
+			blockSupportAndLayout.inherit )
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const {
-		inherit = false,
-		type = 'default',
-		contentSize = null,
-	} = usedLayout;
+	const { inherit = false, contentSize = null } = usedLayout;
 	/**
 	 * `themeSupportsLayout` is only relevant to the `default/flow` or
 	 * `constrained` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
 	if (
-		( type === 'default' || type === 'constrained' ) &&
+		( blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ) &&
 		! themeSupportsLayout
 	) {
 		return null;
 	}
-	const layoutType = getLayoutType( type );
+	const layoutType = getLayoutType( blockLayoutType );
 	const constrainedType = getLayoutType( 'constrained' );
 	const displayControlsForLegacyLayouts =
 		! usedLayout.type && ( contentSize || inherit );
@@ -199,7 +232,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								className="block-editor-hooks__toggle-control"
+								__nextHasNoMarginBottom
 								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
@@ -233,7 +266,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 
 					{ ! inherit && allowSwitching && (
 						<LayoutTypeSwitcher
-							type={ type }
+							type={ blockLayoutType }
 							onChange={ onChangeType }
 						/>
 					) }
@@ -242,14 +275,18 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 				</PanelBody>
@@ -259,27 +296,45 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					name={ blockName }
+					clientId={ clientId }
 				/>
 			) }
 		</>
 	);
 }
 
+export default {
+	shareWithChildBlocks: true,
+	edit: LayoutPanelPure,
+	attributeKeys: [ 'layout' ],
+	hasSupport( name ) {
+		return hasLayoutBlockSupport( name );
+	},
+};
+
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
-		<ButtonGroup>
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Layout type' ) }
+			__nextHasNoMarginBottom
+			hideLabelFromVision
+			isAdaptiveWidth
+			value={ type }
+			onChange={ onChange }
+		>
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
-					<Button
+					<ToggleGroupControlOption
 						key={ name }
-						isPressed={ type === name }
-						onClick={ () => onChange( name ) }
-					>
-						{ label }
-					</Button>
+						value={ name }
+						label={ label }
+					/>
 				);
 			} ) }
-		</ButtonGroup>
+		</ToggleGroupControl>
 	);
 }
 
@@ -294,7 +349,7 @@ export function addAttribute( settings ) {
 	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
-	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
+	if ( hasLayoutBlockSupport( settings ) ) {
 		settings.attributes = {
 			...settings.attributes,
 			layout: {
@@ -306,28 +361,55 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include layout controls
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withInspectorControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const supportLayout = hasBlockSupport(
-			blockName,
-			layoutBlockSupportKey
-		);
+function BlockWithLayoutStyles( {
+	block: BlockListBlock,
+	props,
+	blockGapSupport,
+	layoutClasses,
+} ) {
+	const { name, attributes } = props;
+	const id = useInstanceId( BlockListBlock );
+	const { layout } = attributes;
+	const { default: defaultBlockLayout } =
+		getBlockSupport( name, layoutBlockSupportKey ) || {};
+	const usedLayout =
+		layout?.inherit || layout?.contentSize || layout?.wideSize
+			? { ...layout, type: 'constrained' }
+			: layout || defaultBlockLayout || {};
 
-		return [
-			supportLayout && <LayoutPanel key="layout" { ...props } />,
-			<BlockEdit key="edit" { ...props } />,
-		];
-	},
-	'withInspectorControls'
-);
+	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
+	// Higher specificity to override defaults from theme.json.
+	const selector = `.${ selectorPrefix }${ id }`;
+	const hasBlockGapSupport = blockGapSupport !== null;
+
+	// Get CSS string for the current layout type.
+	// The CSS and `style` element is only output if it is not empty.
+	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
+	const css = fullLayoutType?.getLayoutStyle?.( {
+		blockName: name,
+		selector,
+		layout: usedLayout,
+		style: attributes?.style,
+		hasBlockGapSupport,
+	} );
+
+	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
+	const layoutClassNames = clsx(
+		{
+			[ `${ selectorPrefix }${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
+		},
+		layoutClasses
+	);
+
+	useStyleOverride( { css } );
+
+	return (
+		<BlockListBlock
+			{ ...props }
+			__unstableLayoutClassNames={ layoutClassNames }
+		/>
+	);
+}
 
 /**
  * Override the default block element to add the layout styles.
@@ -338,82 +420,56 @@ export const withInspectorControls = createHigherOrderComponent(
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const { name, attributes, block } = props;
-		const hasLayoutBlockSupport = hasBlockSupport(
-			name,
-			layoutBlockSupportKey
-		);
-		const disableLayoutStyles = useSelect( ( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return !! getSettings().disableLayoutStyles;
-		} );
-		const shouldRenderLayoutStyles =
-			hasLayoutBlockSupport && ! disableLayoutStyles;
-		const id = useInstanceId( BlockListBlock );
-		const defaultThemeLayout = useSetting( 'layout' ) || {};
-		const element = useContext( BlockList.__unstableElementContext );
-		const { layout } = attributes;
-		const { default: defaultBlockLayout } =
-			getBlockSupport( name, layoutBlockSupportKey ) || {};
-		const usedLayout =
-			layout?.inherit || layout?.contentSize || layout?.wideSize
-				? { ...layout, type: 'constrained' }
-				: layout || defaultBlockLayout || {};
-		const layoutClasses = hasLayoutBlockSupport
-			? useLayoutClasses( block )
-			: null;
-		// Higher specificity to override defaults from theme.json.
-		const selector = `.wp-container-${ id }.wp-container-${ id }`;
-		const blockGapSupport = useSetting( 'spacing.blockGap' );
-		const hasBlockGapSupport = blockGapSupport !== null;
-
-		// Get CSS string for the current layout type.
-		// The CSS and `style` element is only output if it is not empty.
-		let css;
-		if ( shouldRenderLayoutStyles ) {
-			const fullLayoutType = getLayoutType(
-				usedLayout?.type || 'default'
-			);
-			css = fullLayoutType?.getLayoutStyle?.( {
-				blockName: name,
-				selector,
-				layout: usedLayout,
-				layoutDefinitions: defaultThemeLayout?.definitions,
-				style: attributes?.style,
-				hasBlockGapSupport,
-			} );
-		}
+		const { clientId, name, attributes } = props;
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
+		const layoutClasses = useLayoutClasses( attributes, name );
+		const extraProps = useSelect(
+			( select ) => {
+				// The callback returns early to avoid block editor subscription.
+				if ( ! blockSupportsLayout ) {
+					return;
+				}
+
+				const { getSettings, getBlockSettings } = unlock(
+					select( blockEditorStore )
+				);
+				const { disableLayoutStyles } = getSettings();
+
+				if ( disableLayoutStyles ) {
+					return;
+				}
 
-		// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
-		const layoutClassNames = classnames(
-			{
-				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+				const [ blockGapSupport ] = getBlockSettings(
+					clientId,
+					'spacing.blockGap'
+				);
+
+				return { blockGapSupport };
 			},
-			layoutClasses
+			[ blockSupportsLayout, clientId ]
 		);
 
-		return (
-			<>
-				{ shouldRenderLayoutStyles &&
-					element &&
-					!! css &&
-					createPortal(
-						<LayoutStyle
-							blockName={ name }
-							selector={ selector }
-							css={ css }
-							layout={ usedLayout }
-							style={ attributes?.style }
-						/>,
-						element
-					) }
+		if ( ! extraProps ) {
+			return (
 				<BlockListBlock
 					{ ...props }
-					__unstableLayoutClassNames={ layoutClassNames }
+					__unstableLayoutClassNames={
+						blockSupportsLayout ? layoutClasses : undefined
+					}
 				/>
-			</>
+			);
+		}
+
+		return (
+			<BlockWithLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+				layoutClasses={ layoutClasses }
+				{ ...extraProps }
+			/>
 		);
-	}
+	},
+	'withLayoutStyles'
 );
 
 addFilter(
@@ -426,8 +482,3 @@ addFilter(
 	'core/editor/layout/with-layout-styles',
 	withLayoutStyles
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/layout/with-inspector-controls',
-	withInspectorControls
-);
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 8ac39b1dec5f41..400b09490bbe51 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,27 +1,13 @@
-.block-editor-hooks__layout-controls {
-	display: flex;
-	margin-bottom: $grid-unit-10;
-
-	.block-editor-hooks__layout-controls-unit {
-		display: flex;
-		margin-right: $grid-unit-30;
-
-		svg {
-			margin: auto 0 $grid-unit-05 $grid-unit-10;
-		}
+.block-editor-hooks__layout-constrained {
+	.components-base-control {
+		margin-bottom: 0; // Cancel out margins added by block inspector
 	}
 }
 
-.block-editor-hooks__layout-controls-reset {
-	display: flex;
-	justify-content: flex-end;
-	margin-bottom: $grid-unit-30;
-}
-
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
 	color: $gray-700;
 	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: 0; // Cancel out margins added by common.css
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -31,7 +17,3 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
-
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-	margin-bottom: $grid-unit-20;
-}
diff --git a/packages/block-editor/src/hooks/letter-spacing.js b/packages/block-editor/src/hooks/letter-spacing.js
deleted file mode 100644
index 9e214fd07d792c..00000000000000
--- a/packages/block-editor/src/hooks/letter-spacing.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import LetterSpacingControl from '../components/letter-spacing-control';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Key within block settings' supports array indicating support for letter-spacing
- * e.g. settings found in `block.json`.
- */
-export const LETTER_SPACING_SUPPORT_KEY =
-	'typography.__experimentalLetterSpacing';
-
-/**
- * Inspector control panel containing the letter-spacing options.
- *
- * @param {Object} props Block properties.
- * @return {WPElement}    Letter-spacing edit element.
- */
-export function LetterSpacingEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	function onChange( newSpacing ) {
-		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...style?.typography,
-					letterSpacing: newSpacing,
-				},
-			} ),
-		} );
-	}
-
-	return (
-		<LetterSpacingControl
-			value={ style?.typography?.letterSpacing }
-			onChange={ onChange }
-			__unstableInputWidth={ '100%' }
-			size="__unstable-large"
-		/>
-	);
-}
-
-/**
- * Checks if letter-spacing settings have been disabled.
- *
- * @param {string} name Name of the block.
- * @return {boolean}     Whether or not the setting is disabled.
- */
-export function useIsLetterSpacingDisabled( { name: blockName } = {} ) {
-	const notSupported = ! hasBlockSupport(
-		blockName,
-		LETTER_SPACING_SUPPORT_KEY
-	);
-	const hasLetterSpacing = useSetting( 'typography.letterSpacing' );
-
-	return notSupported || ! hasLetterSpacing;
-}
-
-/**
- * Checks if there is a current value set for the letter spacing block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a letter spacing set.
- */
-export function hasLetterSpacingValue( props ) {
-	return !! props.attributes.style?.typography?.letterSpacing;
-}
-
-/**
- * Resets the letter spacing block support attribute. This can be used when
- * disabling the letter spacing support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetLetterSpacing( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				letterSpacing: undefined,
-			},
-		} ),
-	} );
-}
diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index c8397d850a1e55..9c27b9d0269722 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -8,7 +8,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
  */
 import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
@@ -17,7 +17,7 @@ export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
  *
  * @param {Object} props
  *
- * @return {WPElement} Line height edit element.
+ * @return {Element} Line height edit element.
  */
 export function LineHeightEdit( props ) {
 	const {
@@ -39,7 +39,6 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"
@@ -54,42 +53,9 @@ export function LineHeightEdit( props ) {
  * @return {boolean} Whether setting is disabled.
  */
 export function useIsLineHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'typography.lineHeight' );
+	const [ isEnabled ] = useSettings( 'typography.lineHeight' );
 
 	return (
-		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
+		! isEnabled || ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY )
 	);
 }
-
-/**
- * Checks if there is a current value set for the line height block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a line height value set.
- */
-export function hasLineHeightValue( props ) {
-	return !! props.attributes.style?.typography?.lineHeight;
-}
-
-/**
- * Resets the line height block support attribute. This can be used when
- * disabling the line height support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetLineHeight( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				lineHeight: undefined,
-			},
-		} ),
-	} );
-}
diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
deleted file mode 100644
index 8491ab41dfe636..00000000000000
--- a/packages/block-editor/src/hooks/margin.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	Platform,
-	useMemo,
-	useRef,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-} from '@wordpress/components';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import useSetting from '../components/use-setting';
-import {
-	AXIAL_SIDES,
-	SPACING_SUPPORT_KEY,
-	useCustomSides,
-	useIsDimensionsSupportValid,
-} from './dimensions';
-import { cleanEmptyObject } from './utils';
-import BlockPopover from '../components/block-popover';
-import SpacingSizesControl from '../components/spacing-sizes-control';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-
-/**
- * Determines if there is margin support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- *
- * @return {boolean} Whether there is support.
- */
-export function hasMarginSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.margin );
-}
-
-/**
- * Checks if there is a current value in the margin block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a margin value set.
- */
-export function hasMarginValue( props ) {
-	return props.attributes.style?.spacing?.margin !== undefined;
-}
-
-/**
- * Resets the margin block support attributes. This can be used when disabling
- * the margin support controls for a block via a `ToolsPanel`.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetMargin( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			spacing: {
-				...style?.spacing,
-				margin: undefined,
-			},
-		} ),
-	} );
-}
-
-/**
- * Custom hook that checks if margin settings have been disabled.
- *
- * @param {string} name The name of the block.
- *
- * @return {boolean} Whether margin setting is disabled.
- */
-export function useIsMarginDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.margin' );
-	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'margin' );
-
-	return ! hasMarginSupport( blockName ) || isDisabled || isInvalid;
-}
-
-/**
- * Inspector control panel containing the margin related configuration
- *
- * @param {Object} props Block props.
- *
- * @return {WPElement} Margin edit element.
- */
-export function MarginEdit( props ) {
-	const {
-		name: blockName,
-		attributes: { style },
-		setAttributes,
-		onMouseOver,
-		onMouseOut,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'margin' );
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	if ( useIsMarginDisabled( props ) ) {
-		return null;
-	}
-
-	const onChange = ( next ) => {
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				margin: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-					<BoxControl
-						values={ style?.spacing?.margin }
-						onChange={ onChange }
-						label={ __( 'Margin' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ style?.spacing?.margin }
-						onChange={ onChange }
-						label={ __( 'Margin' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ false }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}
-
-export function MarginVisualizer( { clientId, attributes, forceShow } ) {
-	const margin = attributes?.style?.spacing?.margin;
-
-	const style = useMemo( () => {
-		const marginTop = margin?.top
-			? getSpacingPresetCssVar( margin?.top )
-			: 0;
-		const marginRight = margin?.right
-			? getSpacingPresetCssVar( margin?.right )
-			: 0;
-		const marginBottom = margin?.bottom
-			? getSpacingPresetCssVar( margin?.bottom )
-			: 0;
-		const marginLeft = margin?.left
-			? getSpacingPresetCssVar( margin?.left )
-			: 0;
-
-		return {
-			borderTopWidth: marginTop,
-			borderRightWidth: marginRight,
-			borderBottomWidth: marginBottom,
-			borderLeftWidth: marginLeft,
-			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
-			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
-			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
-			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
-		};
-	}, [ margin ] );
-
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( margin );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
-			setIsActive( true );
-			valueRef.current = margin;
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => {
-			setIsActive( false );
-			clearTimer();
-		};
-	}, [ margin, forceShow ] );
-
-	if ( ! isActive && ! forceShow ) {
-		return null;
-	}
-
-	return (
-		<BlockPopover
-			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ margin }
-			shift={ false }
-		>
-			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
-	);
-}
diff --git a/packages/block-editor/src/hooks/metadata-name.js b/packages/block-editor/src/hooks/metadata-name.js
deleted file mode 100644
index 6eecb0ce3667c4..00000000000000
--- a/packages/block-editor/src/hooks/metadata-name.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import { hasBlockMetadataSupport } from './metadata';
-
-/**
- * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addLabelCallback( settings ) {
-	// If blocks provide their own label callback, do not override it.
-	if ( settings.__experimentalLabel ) {
-		return settings;
-	}
-
-	const supportsBlockNaming = hasBlockMetadataSupport(
-		settings,
-		'name',
-		false // default value
-	);
-
-	// Check whether block metadata is supported before using it.
-	if ( supportsBlockNaming ) {
-		settings.__experimentalLabel = ( attributes, { context } ) => {
-			const { metadata } = attributes;
-
-			// In the list view, use the block's name attribute as the label.
-			if ( context === 'list-view' && metadata?.name ) {
-				return metadata.name;
-			}
-		};
-	}
-
-	return settings;
-}
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/metadata/addLabelCallback',
-	addLabelCallback
-);
diff --git a/packages/block-editor/src/hooks/metadata.js b/packages/block-editor/src/hooks/metadata.js
index 5ed4870d56e4f0..8b938f1348f1c1 100644
--- a/packages/block-editor/src/hooks/metadata.js
+++ b/packages/block-editor/src/hooks/metadata.js
@@ -2,15 +2,8 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport } from '@wordpress/blocks';
-
 const META_ATTRIBUTE_NAME = 'metadata';
 
-export function hasBlockMetadataSupport( blockType, feature = '' ) {
-	const support = getBlockSupport( blockType, '__experimentalMetadata' );
-	return !! ( true === support || support?.[ feature ] );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `metadata`.
  *
@@ -25,40 +18,18 @@ export function addMetaAttribute( blockTypeSettings ) {
 		return blockTypeSettings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
-		blockTypeSettings,
-		'name',
-		false
-	);
-
-	if ( supportsBlockNaming ) {
-		blockTypeSettings.attributes = {
-			...blockTypeSettings.attributes,
-			[ META_ATTRIBUTE_NAME ]: {
-				type: 'object',
-			},
-		};
-	}
+	blockTypeSettings.attributes = {
+		...blockTypeSettings.attributes,
+		[ META_ATTRIBUTE_NAME ]: {
+			type: 'object',
+		},
+	};
 
 	return blockTypeSettings;
 }
 
-export function addSaveProps( extraProps, blockType, attributes ) {
-	if ( hasBlockMetadataSupport( blockType ) ) {
-		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
-	}
-
-	return extraProps;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addMetaAttribute',
 	addMetaAttribute
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/metadata/save-props',
-	addSaveProps
-);
diff --git a/packages/block-editor/src/hooks/min-height.js b/packages/block-editor/src/hooks/min-height.js
deleted file mode 100644
index 3167edba8a8293..00000000000000
--- a/packages/block-editor/src/hooks/min-height.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import useSetting from '../components/use-setting';
-import { DIMENSIONS_SUPPORT_KEY } from './dimensions';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Determines if there is minHeight support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- * @return {boolean} Whether there is support.
- */
-export function hasMinHeightSupport( blockType ) {
-	const support = getBlockSupport( blockType, DIMENSIONS_SUPPORT_KEY );
-	return !! ( true === support || support?.minHeight );
-}
-
-/**
- * Checks if there is a current value in the minHeight block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean} Whether or not the block has a minHeight value set.
- */
-export function hasMinHeightValue( props ) {
-	return props.attributes.style?.dimensions?.minHeight !== undefined;
-}
-
-/**
- * Resets the minHeight block support attributes. This can be used when disabling
- * the padding support controls for a block via a `ToolsPanel`.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetMinHeight( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			dimensions: {
-				...style?.dimensions,
-				minHeight: undefined,
-			},
-		} ),
-	} );
-}
-
-/**
- * Custom hook that checks if minHeight controls have been disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean} Whether minHeight control is disabled.
- */
-export function useIsMinHeightDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'dimensions.minHeight' );
-	return ! hasMinHeightSupport( blockName ) || isDisabled;
-}
-
-/**
- * Inspector control panel containing the minHeight related configuration.
- *
- * @param {Object} props Block props.
- * @return {WPElement} Edit component for height.
- */
-export function MinHeightEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'dimensions.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vh',
-			'vw',
-		],
-	} );
-
-	if ( useIsMinHeightDisabled( props ) ) {
-		return null;
-	}
-
-	const onChange = ( next ) => {
-		const newStyle = {
-			...style,
-			dimensions: {
-				...style?.dimensions,
-				minHeight: next,
-			},
-		};
-
-		setAttributes( { style: cleanEmptyObject( newStyle ) } );
-	};
-
-	return (
-		<UnitControl
-			label={ __( 'Min. height' ) }
-			value={ style?.dimensions?.minHeight }
-			units={ units }
-			onChange={ onChange }
-			min={ 0 }
-			size={ '__unstable-large' }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
deleted file mode 100644
index 0c039e637619f8..00000000000000
--- a/packages/block-editor/src/hooks/padding.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	Platform,
-	useState,
-	useRef,
-	useEffect,
-	useMemo,
-} from '@wordpress/element';
-import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalBoxControl as BoxControl,
-} from '@wordpress/components';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import useSetting from '../components/use-setting';
-import {
-	AXIAL_SIDES,
-	SPACING_SUPPORT_KEY,
-	useCustomSides,
-	useIsDimensionsSupportValid,
-} from './dimensions';
-import { cleanEmptyObject } from './utils';
-import BlockPopover from '../components/block-popover';
-import SpacingSizesControl from '../components/spacing-sizes-control';
-import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
-/**
- * Determines if there is padding support.
- *
- * @param {string|Object} blockType Block name or Block Type object.
- *
- * @return {boolean} Whether there is support.
- */
-export function hasPaddingSupport( blockType ) {
-	const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY );
-	return !! ( true === support || support?.padding );
-}
-
-/**
- * Checks if there is a current value in the padding block support attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a padding value set.
- */
-export function hasPaddingValue( props ) {
-	return props.attributes.style?.spacing?.padding !== undefined;
-}
-
-/**
- * Resets the padding block support attributes. This can be used when disabling
- * the padding support controls for a block via a `ToolsPanel`.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetPadding( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			spacing: {
-				...style?.spacing,
-				padding: undefined,
-			},
-		} ),
-	} );
-}
-
-/**
- * Custom hook that checks if padding settings have been disabled.
- *
- * @param {string} name The name of the block.
- *
- * @return {boolean} Whether padding setting is disabled.
- */
-export function useIsPaddingDisabled( { name: blockName } = {} ) {
-	const isDisabled = ! useSetting( 'spacing.padding' );
-	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'padding' );
-
-	return ! hasPaddingSupport( blockName ) || isDisabled || isInvalid;
-}
-
-/**
- * Inspector control panel containing the padding related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Padding edit element.
- */
-export function PaddingEdit( props ) {
-	const {
-		name: blockName,
-		attributes: { style },
-		setAttributes,
-		onMouseOver,
-		onMouseOut,
-	} = props;
-
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-	const sides = useCustomSides( blockName, 'padding' );
-	const splitOnAxis =
-		sides && sides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	if ( useIsPaddingDisabled( props ) ) {
-		return null;
-	}
-
-	const onChange = ( next ) => {
-		const newStyle = {
-			...style,
-			spacing: {
-				...style?.spacing,
-				padding: next,
-			},
-		};
-
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
-
-	return Platform.select( {
-		web: (
-			<>
-				{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
-					<BoxControl
-						values={ style?.spacing?.padding }
-						onChange={ onChange }
-						label={ __( 'Padding' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-				{ spacingSizes?.length > 0 && (
-					<SpacingSizesControl
-						values={ style?.spacing?.padding }
-						onChange={ onChange }
-						label={ __( 'Padding' ) }
-						sides={ sides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ splitOnAxis }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
-					/>
-				) }
-			</>
-		),
-		native: null,
-	} );
-}
-
-export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
-	const padding = attributes?.style?.spacing?.padding;
-	const style = useMemo( () => {
-		return {
-			borderTopWidth: padding?.top
-				? getSpacingPresetCssVar( padding?.top )
-				: 0,
-			borderRightWidth: padding?.right
-				? getSpacingPresetCssVar( padding?.right )
-				: 0,
-			borderBottomWidth: padding?.bottom
-				? getSpacingPresetCssVar( padding?.bottom )
-				: 0,
-			borderLeftWidth: padding?.left
-				? getSpacingPresetCssVar( padding?.left )
-				: 0,
-		};
-	}, [ padding ] );
-
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( padding );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {
-			setIsActive( true );
-			valueRef.current = padding;
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => {
-			setIsActive( false );
-			clearTimer();
-		};
-	}, [ padding, forceShow ] );
-
-	if ( ! isActive && ! forceShow ) {
-		return null;
-	}
-
-	return (
-		<BlockPopover
-			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ padding }
-			shift={ false }
-		>
-			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
-	);
-}
diff --git a/packages/block-editor/src/hooks/padding.scss b/packages/block-editor/src/hooks/padding.scss
deleted file mode 100644
index dbb99919881893..00000000000000
--- a/packages/block-editor/src/hooks/padding.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block-editor__padding-visualizer {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	opacity: 0.5;
-	border-color: var(--wp-admin-theme-color);
-	border-style: solid;
-	pointer-events: none;
-	box-sizing: border-box;
-}
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
new file mode 100644
index 00000000000000..bf1b730cd67d1a
--- /dev/null
+++ b/packages/block-editor/src/hooks/position.js
@@ -0,0 +1,349 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useMemo, Platform } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../components/use-settings';
+import InspectorControls from '../components/inspector-controls';
+import useBlockDisplayInformation from '../components/use-block-display-information';
+import { cleanEmptyObject, useStyleOverride } from './utils';
+import { store as blockEditorStore } from '../store';
+
+const POSITION_SUPPORT_KEY = 'position';
+
+const DEFAULT_OPTION = {
+	key: 'default',
+	value: '',
+	name: __( 'Default' ),
+};
+
+const STICKY_OPTION = {
+	key: 'sticky',
+	value: 'sticky',
+	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
+	hint: __(
+		'The block will stick to the top of the window instead of scrolling.'
+	),
+};
+
+const FIXED_OPTION = {
+	key: 'fixed',
+	value: 'fixed',
+	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
+	hint: __( 'The block will not move when the page is scrolled.' ),
+};
+
+const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+const VALID_POSITION_TYPES = [ 'sticky', 'fixed' ];
+
+/**
+ * Get calculated position CSS.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.selector Selector to use.
+ * @param {Object} props.style    Style object.
+ * @return {string} The generated CSS rules.
+ */
+export function getPositionCSS( { selector, style } ) {
+	let output = '';
+
+	const { type: positionType } = style?.position || {};
+
+	if ( ! VALID_POSITION_TYPES.includes( positionType ) ) {
+		return output;
+	}
+
+	output += `${ selector } {`;
+	output += `position: ${ positionType };`;
+
+	POSITION_SIDES.forEach( ( side ) => {
+		if ( style?.position?.[ side ] !== undefined ) {
+			output += `${ side }: ${ style.position[ side ] };`;
+		}
+	} );
+
+	if ( positionType === 'sticky' || positionType === 'fixed' ) {
+		// TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+		output += `z-index: 10`;
+	}
+	output += `}`;
+
+	return output;
+}
+
+/**
+ * Determines if there is sticky position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasStickyPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.sticky );
+}
+
+/**
+ * Determines if there is fixed position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasFixedPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.fixed );
+}
+
+/**
+ * Determines if there is position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! support;
+}
+
+/**
+ * Checks if there is a current value in the position block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a position value set.
+ */
+export function hasPositionValue( props ) {
+	return props.attributes.style?.position?.type !== undefined;
+}
+
+/**
+ * Checks if the block is currently set to a sticky or fixed position.
+ * This check is helpful for determining how to position block toolbars or other elements.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {boolean} Whether or not the block is set to a sticky or fixed position.
+ */
+export function hasStickyOrFixedPositionValue( attributes ) {
+	const positionType = attributes?.style?.position?.type;
+	return positionType === 'sticky' || positionType === 'fixed';
+}
+
+/**
+ * Resets the position block support attributes. This can be used when disabling
+ * the position support controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetPosition( { attributes = {}, setAttributes } ) {
+	const { style = {} } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			position: {
+				...style?.position,
+				type: undefined,
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			},
+		} ),
+	} );
+}
+
+/**
+ * Custom hook that checks if position settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ *
+ * @return {boolean} Whether padding setting is disabled.
+ */
+export function useIsPositionDisabled( { name: blockName } = {} ) {
+	const [ allowFixed, allowSticky ] = useSettings(
+		'position.fixed',
+		'position.sticky'
+	);
+	const isDisabled = ! allowFixed && ! allowSticky;
+
+	return ! hasPositionSupport( blockName ) || isDisabled;
+}
+
+/*
+ * Position controls rendered in an inspector control panel.
+ *
+ * @param {Object} props
+ *
+ * @return {Element} Position panel.
+ */
+export function PositionPanelPure( {
+	style = {},
+	clientId,
+	name: blockName,
+	setAttributes,
+} ) {
+	const allowFixed = hasFixedPositionSupport( blockName );
+	const allowSticky = hasStickyPositionSupport( blockName );
+	const value = style?.position?.type;
+
+	const { firstParentClientId } = useSelect(
+		( select ) => {
+			const { getBlockParents } = select( blockEditorStore );
+			const parents = getBlockParents( clientId );
+			return { firstParentClientId: parents[ parents.length - 1 ] };
+		},
+		[ clientId ]
+	);
+
+	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const stickyHelpText =
+		allowSticky && value === STICKY_OPTION.value && blockInformation
+			? sprintf(
+					/* translators: %s: the name of the parent block. */
+					__(
+						'The block will stick to the scrollable area of the parent %s block.'
+					),
+					blockInformation.title
+			  )
+			: null;
+
+	const options = useMemo( () => {
+		const availableOptions = [ DEFAULT_OPTION ];
+		// Display options if they are allowed, or if a block already has a valid value set.
+		// This allows for a block to be switched off from a position type that is not allowed.
+		if ( allowSticky || value === STICKY_OPTION.value ) {
+			availableOptions.push( STICKY_OPTION );
+		}
+		if ( allowFixed || value === FIXED_OPTION.value ) {
+			availableOptions.push( FIXED_OPTION );
+		}
+		return availableOptions;
+	}, [ allowFixed, allowSticky, value ] );
+
+	const onChangeType = ( next ) => {
+		// For now, use a hard-coded `0px` value for the position.
+		// `0px` is preferred over `0` as it can be used in `calc()` functions.
+		// In the future, it could be useful to allow for an offset value.
+		const placementValue = '0px';
+
+		const newStyle = {
+			...style,
+			position: {
+				...style?.position,
+				type: next,
+				top:
+					next === 'sticky' || next === 'fixed'
+						? placementValue
+						: undefined,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const selectedOption = value
+		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
+		: DEFAULT_OPTION;
+
+	// Only display position controls if there is at least one option to choose from.
+	return Platform.select( {
+		web:
+			options.length > 1 ? (
+				<InspectorControls group="position">
+					<BaseControl
+						__nextHasNoMarginBottom
+						help={ stickyHelpText }
+					>
+						<CustomSelectControl
+							__next40pxDefaultSize
+							label={ __( 'Position' ) }
+							hideLabelFromVision
+							describedBy={ sprintf(
+								// translators: %s: Currently selected position.
+								__( 'Currently selected position: %s' ),
+								selectedOption.name
+							) }
+							options={ options }
+							value={ selectedOption }
+							onChange={ ( { selectedItem } ) => {
+								onChangeType( selectedItem.value );
+							} }
+							size="__unstable-large"
+						/>
+					</BaseControl>
+				</InspectorControls>
+			) : null,
+		native: null,
+	} );
+}
+
+export default {
+	edit: function Edit( props ) {
+		const isPositionDisabled = useIsPositionDisabled( props );
+		if ( isPositionDisabled ) {
+			return null;
+		}
+		return <PositionPanelPure { ...props } />;
+	},
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, POSITION_SUPPORT_KEY );
+	},
+};
+
+// Used for generating the instance ID
+const POSITION_BLOCK_PROPS_REFERENCE = {};
+
+function useBlockProps( { name, style } ) {
+	const hasPositionBlockSupport = hasBlockSupport(
+		name,
+		POSITION_SUPPORT_KEY
+	);
+	const isPositionDisabled = useIsPositionDisabled( { name } );
+	const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;
+
+	const id = useInstanceId( POSITION_BLOCK_PROPS_REFERENCE );
+
+	// Higher specificity to override defaults in editor UI.
+	const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
+
+	// Get CSS string for the current position values.
+	let css;
+	if ( allowPositionStyles ) {
+		css =
+			getPositionCSS( {
+				selector: positionSelector,
+				style,
+			} ) || '';
+	}
+
+	// Attach a `wp-container-` id-based class name.
+	const className = clsx( {
+		[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		[ `is-position-${ style?.position?.type }` ]:
+			allowPositionStyles && !! css && !! style?.position?.type,
+	} );
+
+	useStyleOverride( { css } );
+
+	return { className };
+}
diff --git a/packages/block-editor/src/hooks/spacing-visualizer.js b/packages/block-editor/src/hooks/spacing-visualizer.js
new file mode 100644
index 00000000000000..2f0abe8e0d293d
--- /dev/null
+++ b/packages/block-editor/src/hooks/spacing-visualizer.js
@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useRef,
+	useLayoutEffect,
+	useEffect,
+	useReducer,
+} from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopoverCover from '../components/block-popover/cover';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+
+function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
+	const blockElement = useBlockElement( clientId );
+	const [ style, updateStyle ] = useReducer( () =>
+		computeStyle( blockElement )
+	);
+
+	useLayoutEffect( () => {
+		if ( ! blockElement ) {
+			return;
+		}
+		// It's not sufficient to read the computed spacing value when value.spacing changes as
+		// useEffect may run before the browser recomputes CSS. We therefore combine
+		// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
+		// paint but before the next paint.
+		// See https://github.com/WordPress/gutenberg/pull/59227.
+		window.requestAnimationFrame( () =>
+			window.requestAnimationFrame( updateStyle )
+		);
+	}, [ blockElement, value ] );
+
+	const previousValueRef = useRef( value );
+	const [ isActive, setIsActive ] = useState( false );
+
+	useEffect( () => {
+		if ( isShallowEqual( value, previousValueRef.current ) || forceShow ) {
+			return;
+		}
+
+		setIsActive( true );
+		previousValueRef.current = value;
+
+		const timeout = setTimeout( () => {
+			setIsActive( false );
+		}, 400 );
+
+		return () => {
+			setIsActive( false );
+			clearTimeout( timeout );
+		};
+	}, [ value, forceShow ] );
+
+	if ( ! isActive && ! forceShow ) {
+		return null;
+	}
+
+	return (
+		<BlockPopoverCover
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<div className="block-editor__spacing-visualizer" style={ style } />
+		</BlockPopoverCover>
+	);
+}
+
+function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+export function MarginVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.margin }
+			computeStyle={ ( blockElement ) => {
+				const top = getComputedCSS( blockElement, 'margin-top' );
+				const right = getComputedCSS( blockElement, 'margin-right' );
+				const bottom = getComputedCSS( blockElement, 'margin-bottom' );
+				const left = getComputedCSS( blockElement, 'margin-left' );
+				return {
+					borderTopWidth: top,
+					borderRightWidth: right,
+					borderBottomWidth: bottom,
+					borderLeftWidth: left,
+					top: top ? `-${ top }` : 0,
+					right: right ? `-${ right }` : 0,
+					bottom: bottom ? `-${ bottom }` : 0,
+					left: left ? `-${ left }` : 0,
+				};
+			} }
+			forceShow={ forceShow }
+		/>
+	);
+}
+
+export function PaddingVisualizer( { clientId, value, forceShow } ) {
+	return (
+		<SpacingVisualizer
+			clientId={ clientId }
+			value={ value?.spacing?.padding }
+			computeStyle={ ( blockElement ) => ( {
+				borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
+				borderRightWidth: getComputedCSS(
+					blockElement,
+					'padding-right'
+				),
+				borderBottomWidth: getComputedCSS(
+					blockElement,
+					'padding-bottom'
+				),
+				borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
+			} ) }
+			forceShow={ forceShow }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/hooks/spacing.scss b/packages/block-editor/src/hooks/spacing.scss
new file mode 100644
index 00000000000000..52894d8ff2ba62
--- /dev/null
+++ b/packages/block-editor/src/hooks/spacing.scss
@@ -0,0 +1,12 @@
+.block-editor__spacing-visualizer {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	opacity: 0.5;
+	border-color: var(--wp-admin-theme-color);
+	border-style: solid;
+	pointer-events: none;
+	box-sizing: border-box;
+}
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index b6fe7b8188c2be..db2acd01665b60 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -1,26 +1,21 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, createPortal } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
 	hasBlockSupport,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
  */
-import BlockList from '../components/block-list';
-import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
+import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
+import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
 	TypographyPanel,
@@ -32,19 +27,26 @@ import {
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
 } from './dimensions';
-import useDisplayBlockControls from '../components/use-display-block-controls';
-import { shouldSkipSerialization } from './utils';
+import {
+	shouldSkipSerialization,
+	useStyleOverride,
+	useBlockSettings,
+} from './utils';
+import { scopeSelector } from '../components/global-styles/utils';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	DIMENSIONS_SUPPORT_KEY,
+	BACKGROUND_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
+	SHADOW_SUPPORT_KEY,
 ];
 
-const hasStyleSupport = ( blockType ) =>
-	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
+const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
 
 /**
  * Returns the inline styles to add depending on the style object
@@ -96,19 +98,16 @@ function addAttribute( settings ) {
  * @type {Record<string, string[]>}
  */
 const skipSerializationPathsEdit = {
-	[ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ],
-	[ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		COLOR_SUPPORT_KEY,
-	],
-	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ],
+	[ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ],
+	[ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
-	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+	[ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [
 		DIMENSIONS_SUPPORT_KEY,
 	],
-	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		SPACING_SUPPORT_KEY,
-	],
+	[ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ],
+	[ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ],
 };
 
 /**
@@ -125,7 +124,15 @@ const skipSerializationPathsEdit = {
  */
 const skipSerializationPathsSave = {
 	...skipSerializationPathsEdit,
-	[ `${ SPACING_SUPPORT_KEY }` ]: [ 'spacing.blockGap' ],
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [
+		`${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,
+	], // Skip serialization of aspect ratio in save mode.
+	[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.
+};
+
+const skipSerializationPathsSaveChecks = {
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: true,
+	[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,
 };
 
 /**
@@ -264,26 +271,28 @@ export function omitStyle( style, paths, preserveReference = false ) {
 /**
  * Override props assigned to save component to inject the CSS variables definition.
  *
- * @param {Object}                    props      Additional props applied to save element.
- * @param {Object}                    blockType  Block type.
- * @param {Object}                    attributes Block attributes.
- * @param {?Record<string, string[]>} skipPaths  An object of keys and paths to skip serialization.
+ * @param {Object}                    props           Additional props applied to save element.
+ * @param {Object|string}             blockNameOrType Block type.
+ * @param {Object}                    attributes      Block attributes.
+ * @param {?Record<string, string[]>} skipPaths       An object of keys and paths to skip serialization.
  *
  * @return {Object} Filtered props applied to save element.
  */
 export function addSaveProps(
 	props,
-	blockType,
+	blockNameOrType,
 	attributes,
 	skipPaths = skipSerializationPathsSave
 ) {
-	if ( ! hasStyleSupport( blockType ) ) {
+	if ( ! hasStyleSupport( blockNameOrType ) ) {
 		return props;
 	}
 
 	let { style } = attributes;
 	Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
-		const skipSerialization = getBlockSupport( blockType, indicator );
+		const skipSerialization =
+			skipSerializationPathsSaveChecks[ indicator ] ||
+			getBlockSupport( blockNameOrType, indicator );
 
 		if ( skipSerialization === true ) {
 			style = omitStyle( style, path );
@@ -305,176 +314,156 @@ export function addSaveProps(
 	return props;
 }
 
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object}.Filtered block settings.
- */
-export function addEditProps( settings ) {
-	if ( ! hasStyleSupport( settings ) ) {
-		return settings;
+function BlockStyleControls( {
+	clientId,
+	name,
+	setAttributes,
+	__unstableParentLayout,
+} ) {
+	const settings = useBlockSettings( name, __unstableParentLayout );
+	const blockEditingMode = useBlockEditingMode();
+	const passedProps = {
+		clientId,
+		name,
+		setAttributes,
+		settings: {
+			...settings,
+			typography: {
+				...settings.typography,
+				// The text alignment UI for individual blocks is rendered in
+				// the block toolbar, so disable it here.
+				textAlign: false,
+			},
+		},
+	};
+	if ( blockEditingMode !== 'default' ) {
+		return null;
 	}
+	return (
+		<>
+			<ColorEdit { ...passedProps } />
+			<BackgroundImagePanel { ...passedProps } />
+			<TypographyPanel { ...passedProps } />
+			<BorderPanel { ...passedProps } />
+			<DimensionsPanel { ...passedProps } />
+		</>
+	);
+}
+
+export default {
+	edit: BlockStyleControls,
+	hasSupport: hasStyleSupport,
+	addSaveProps,
+	attributeKeys: [ 'style' ],
+	useBlockProps,
+};
+
+// Defines which element types are supported, including their hover styles or
+// any other elements that have been included under a single element type
+// e.g. heading and h1-h6.
+const elementTypes = [
+	{ elementType: 'button' },
+	{ elementType: 'link', pseudo: [ ':hover' ] },
+	{
+		elementType: 'heading',
+		elements: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+	},
+];
+
+// Used for generating the instance ID
+const STYLE_BLOCK_PROPS_REFERENCE = {};
 
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
+function useBlockProps( { name, style } ) {
+	const blockElementsContainerIdentifier = useInstanceId(
+		STYLE_BLOCK_PROPS_REFERENCE,
+		'wp-elements'
+	);
+
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
+	const blockElementStyles = style?.elements;
+
+	const styles = useMemo( () => {
+		if ( ! blockElementStyles ) {
+			return;
 		}
 
-		return addSaveProps(
-			props,
-			settings,
-			attributes,
-			skipSerializationPathsEdit
-		);
-	};
+		const elementCSSRules = [];
 
-	return settings;
-}
+		elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
+			const skipSerialization = shouldSkipSerialization(
+				name,
+				COLOR_SUPPORT_KEY,
+				elementType
+			);
 
-/**
- * Override the default edit UI to include new inspector controls for
- * all the custom styles configs.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const shouldDisplayControls = useDisplayBlockControls();
-
-		return (
-			<>
-				{ shouldDisplayControls && (
-					<>
-						<ColorEdit { ...props } />
-						<TypographyPanel { ...props } />
-						<BorderPanel { ...props } />
-						<DimensionsPanel { ...props } />
-					</>
-				) }
-				<BlockEdit { ...props } />
-			</>
-		);
-	},
-	'withToolbarControls'
-);
+			if ( skipSerialization ) {
+				return;
+			}
 
-/**
- * Override the default block element to include elements styles.
- *
- * @param {Function} BlockListBlock Original component
- * @return {Function}                Wrapped component
- */
-const withElementsStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
-			BlockListBlock
-		) }`;
-
-		const skipLinkColorSerialization = shouldSkipSerialization(
-			props.name,
-			COLOR_SUPPORT_KEY,
-			'link'
-		);
-
-		const styles = useMemo( () => {
-			const rawElementsStyles = props.attributes.style?.elements;
-			const elementCssRules = [];
-			if (
-				rawElementsStyles &&
-				Object.keys( rawElementsStyles ).length > 0
-			) {
-				// Remove values based on whether serialization has been skipped for a specific style.
-				const filteredElementsStyles = {
-					...rawElementsStyles,
-					link: {
-						...rawElementsStyles.link,
-						color: ! skipLinkColorSerialization
-							? rawElementsStyles.link?.color
-							: undefined,
-					},
-				};
-
-				for ( const [ elementName, elementStyles ] of Object.entries(
-					filteredElementsStyles
-				) ) {
-					const cssRule = compileCSS( elementStyles, {
-						// The .editor-styles-wrapper selector is required on elements styles. As it is
-						// added to all other editor styles, not providing it causes reset and global
-						// styles to override element styles because of higher specificity.
-						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+			const elementStyles = blockElementStyles?.[ elementType ];
+
+			// Process primary element type styles.
+			if ( elementStyles ) {
+				const selector = scopeSelector(
+					baseElementSelector,
+					ELEMENTS[ elementType ]
+				);
+
+				elementCSSRules.push(
+					compileCSS( elementStyles, { selector } )
+				);
+
+				// Process any interactive states for the element type.
+				if ( pseudo ) {
+					pseudo.forEach( ( pseudoSelector ) => {
+						if ( elementStyles[ pseudoSelector ] ) {
+							elementCSSRules.push(
+								compileCSS( elementStyles[ pseudoSelector ], {
+									selector: scopeSelector(
+										baseElementSelector,
+										`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
+									),
+								} )
+							);
+						}
 					} );
-					if ( !! cssRule ) {
-						elementCssRules.push( cssRule );
-					}
 				}
 			}
-			return elementCssRules.length > 0 ? elementCssRules : undefined;
-		}, [ props.attributes.style?.elements ] );
-
-		const element = useContext( BlockList.__unstableElementContext );
-
-		return (
-			<>
-				{ styles &&
-					element &&
-					createPortal(
-						<style
-							dangerouslySetInnerHTML={ {
-								__html: styles,
-							} }
-						/>,
-						element
-					) }
-
-				<BlockListBlock
-					{ ...props }
-					className={
-						props.attributes.style?.elements
-							? classnames(
-									props.className,
-									blockElementsContainerIdentifier
-							  )
-							: props.className
-					}
-				/>
-			</>
-		);
-	}
-);
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/style/addAttribute',
-	addAttribute
-);
+			// Process related elements e.g. h1-h6 for headings
+			if ( elements ) {
+				elements.forEach( ( element ) => {
+					if ( blockElementStyles[ element ] ) {
+						elementCSSRules.push(
+							compileCSS( blockElementStyles[ element ], {
+								selector: scopeSelector(
+									baseElementSelector,
+									ELEMENTS[ element ]
+								),
+							} )
+						);
+					}
+				} );
+			}
+		} );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/style/addSaveProps',
-	addSaveProps
-);
+		return elementCSSRules.length > 0
+			? elementCSSRules.join( '' )
+			: undefined;
+	}, [ baseElementSelector, blockElementStyles, name ] );
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/style/addEditProps',
-	addEditProps
-);
+	useStyleOverride( { css: styles } );
 
-addFilter(
-	'editor.BlockEdit',
-	'core/style/with-block-controls',
-	withBlockControls
-);
+	return addSaveProps(
+		{ className: blockElementsContainerIdentifier },
+		name,
+		{ style },
+		skipSerializationPathsEdit
+	);
+}
 
 addFilter(
-	'editor.BlockListBlock',
-	'core/editor/with-elements-styles',
-	withElementsStyles
+	'blocks.registerBlockType',
+	'core/style/addAttribute',
+	addAttribute
 );
diff --git a/packages/block-editor/src/hooks/supports.js b/packages/block-editor/src/hooks/supports.js
new file mode 100644
index 00000000000000..102b78bbb96e68
--- /dev/null
+++ b/packages/block-editor/src/hooks/supports.js
@@ -0,0 +1,341 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { Platform } from '@wordpress/element';
+
+const ALIGN_SUPPORT_KEY = 'align';
+const ALIGN_WIDE_SUPPORT_KEY = 'alignWide';
+const BORDER_SUPPORT_KEY = 'border';
+const COLOR_SUPPORT_KEY = 'color';
+const CUSTOM_CLASS_NAME_SUPPORT_KEY = 'customClassName';
+const FONT_FAMILY_SUPPORT_KEY = 'typography.fontFamily';
+const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
+const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
+/**
+ * Key within block settings' support array indicating support for font style.
+ */
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+/**
+ * Key within block settings' support array indicating support for font weight.
+ */
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * align e.g. settings found in `block.json`.
+ */
+const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
+/**
+ * Key within block settings' supports array indicating support for text
+ * columns e.g. settings found in `block.json`.
+ */
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
+/**
+ * Key within block settings' supports array indicating support for text
+ * decorations e.g. settings found in `block.json`.
+ */
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+/**
+ * Key within block settings' supports array indicating support for writing mode
+ * e.g. settings found in `block.json`.
+ */
+const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
+/**
+ * Key within block settings' supports array indicating support for text
+ * transforms e.g. settings found in `block.json`.
+ */
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+
+/**
+ * Key within block settings' supports array indicating support for letter-spacing
+ * e.g. settings found in `block.json`.
+ */
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const LAYOUT_SUPPORT_KEY = 'layout';
+const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+	FONT_STYLE_SUPPORT_KEY,
+	FONT_WEIGHT_SUPPORT_KEY,
+	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
+	TEXT_DECORATION_SUPPORT_KEY,
+	TEXT_TRANSFORM_SUPPORT_KEY,
+	WRITING_MODE_SUPPORT_KEY,
+	LETTER_SPACING_SUPPORT_KEY,
+];
+const EFFECTS_SUPPORT_KEYS = [ 'shadow' ];
+const SPACING_SUPPORT_KEY = 'spacing';
+const styleSupportKeys = [
+	...EFFECTS_SUPPORT_KEYS,
+	...TYPOGRAPHY_SUPPORT_KEYS,
+	BORDER_SUPPORT_KEY,
+	COLOR_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+];
+
+/**
+ * Returns true if the block defines support for align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for align wide.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasAlignWideSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for align wide, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getAlignWideSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, ALIGN_WIDE_SUPPORT_KEY );
+
+/**
+ * Determine whether there is block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to check support for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBorderSupport( nameOrType, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( nameOrType, BORDER_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! (
+			support?.color ||
+			support?.radius ||
+			support?.width ||
+			support?.style
+		);
+	}
+
+	return !! support?.[ feature ];
+}
+
+/**
+ * Get block support for border properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Border feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getBorderSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ BORDER_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+	return (
+		colorSupport &&
+		( colorSupport.link === true ||
+			colorSupport.gradient === true ||
+			colorSupport.background !== false ||
+			colorSupport.text !== false )
+	);
+};
+
+/**
+ * Returns true if the block defines support for link color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLinkColorSupport = ( nameOrType ) => {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
+};
+
+/**
+ * Returns true if the block defines support for gradient color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasGradientSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
+};
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasBackgroundColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.background !== false;
+};
+
+/**
+ * Returns true if the block defines support for text-align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for text-align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getTextAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for background color.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextColorSupport = ( nameOrType ) => {
+	const colorSupport = getBlockSupport( nameOrType, COLOR_SUPPORT_KEY );
+
+	return colorSupport && colorSupport.text !== false;
+};
+
+/**
+ * Get block support for color properties.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @param {string}        feature    Color feature to get.
+ *
+ * @return {unknown} The block support.
+ */
+export const getColorSupport = ( nameOrType, feature ) =>
+	getBlockSupport( nameOrType, [ COLOR_SUPPORT_KEY, feature ] );
+
+/**
+ * Returns true if the block defines support for custom class name.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasCustomClassNameSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns the block support value for custom class name, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getCustomClassNameSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, CUSTOM_CLASS_NAME_SUPPORT_KEY, true );
+
+/**
+ * Returns true if the block defines support for font family.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontFamilySupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font family, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontFamilySupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_FAMILY_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for font size.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasFontSizeSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for font size, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getFontSizeSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, FONT_SIZE_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for layout.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasLayoutSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for layout, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getLayoutSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, LAYOUT_SUPPORT_KEY );
+
+/**
+ * Returns true if the block defines support for style.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
new file mode 100644
index 00000000000000..045fb0e3bd944a
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Align options for group block sets Full width option 1`] = `
+"<!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets None option 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for group block sets Wide width option 1`] = `
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Align options for media block sets Align center option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
+<figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align left option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
+<figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Align right option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
+<figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Full width option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
+<figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets None option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for media block sets Wide width option 1`] = `
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
+<figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Align options for text block sets Align text center option 1`] = `
+"<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text left option 1`] = `
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Align options for text block sets Align text right option 1`] = `
+"<!-- wp:paragraph {"align":"right"} -->
+<p class="has-text-align-right"></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap
new file mode 100644
index 00000000000000..03407a1fe55d85
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`anchor should set the ID attribute on the block 1`] = `
+"<!-- wp:paragraph -->
+<p id="my-anchor"></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-editor/src/hooks/test/align.js b/packages/block-editor/src/hooks/test/align.js
index d6a9b3aba65ce4..73c55133a4b29b 100644
--- a/packages/block-editor/src/hooks/test/align.js
+++ b/packages/block-editor/src/hooks/test/align.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
 /**
  * WordPress dependencies
  */
@@ -12,20 +7,11 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
-import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockControls from '../../components/block-controls';
-import BlockEdit from '../../components/block-edit';
-import BlockEditorProvider from '../../components/provider';
-import {
-	getValidAlignments,
-	withToolbarControls,
-	withDataAlign,
-	addAssignedAlign,
-} from '../align';
+import { getValidAlignments, addAssignedAlign } from '../align';
 
 const noop = () => {};
 
@@ -157,169 +143,6 @@ describe( 'align', () => {
 		} );
 	} );
 
-	describe( 'withToolbarControls', () => {
-		const componentProps = {
-			name: 'core/foo',
-			attributes: {},
-			isSelected: true,
-		};
-
-		it( 'should do nothing if no valid alignments', () => {
-			registerBlockType( 'core/foo', blockSettings );
-
-			const EnhancedComponent = withToolbarControls(
-				( { wrapperProps } ) => <div { ...wrapperProps } />
-			);
-
-			render(
-				<SlotFillProvider>
-					<BlockEdit { ...componentProps }>
-						<EnhancedComponent { ...componentProps } />
-					</BlockEdit>
-					<BlockControls.Slot group="block" />
-				</SlotFillProvider>
-			);
-
-			expect(
-				screen.queryByRole( 'button', {
-					name: 'Align',
-					expanded: false,
-				} )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'should render toolbar controls if valid alignments', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: false,
-				},
-			} );
-
-			const EnhancedComponent = withToolbarControls(
-				( { wrapperProps } ) => <div { ...wrapperProps } />
-			);
-
-			render(
-				<SlotFillProvider>
-					<BlockEdit { ...componentProps }>
-						<EnhancedComponent { ...componentProps } />
-					</BlockEdit>
-					<BlockControls.Slot group="block" />
-				</SlotFillProvider>
-			);
-
-			expect(
-				screen.getAllByRole( 'button', {
-					name: 'Align',
-					expanded: false,
-				} )
-			).toHaveLength( 2 );
-		} );
-	} );
-
-	describe( 'withDataAlign', () => {
-		it( 'should render with wrapper props', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: true,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: true, supportsLayout: false } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						attributes={ {
-							align: 'wide',
-						} }
-						name="core/foo"
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-
-		it( 'should not render wide/full wrapper props if wide controls are not enabled', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: true,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: false } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						name="core/foo"
-						attributes={ {
-							align: 'wide',
-						} }
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-
-		it( 'should not render invalid align', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: false,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: true } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						name="core/foo"
-						attributes={ {
-							align: 'wide',
-						} }
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-	} );
-
 	describe( 'addAssignedAlign', () => {
 		it( 'should do nothing if block does not support align', () => {
 			registerBlockType( 'core/foo', blockSettings );
diff --git a/packages/block-editor/src/hooks/test/align.native.js b/packages/block-editor/src/hooks/test/align.native.js
new file mode 100644
index 00000000000000..5b7ab25bb24b21
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/align.native.js
@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	fireEvent,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+const imageHTML = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Align options', () => {
+	describe( 'for media block', () => {
+		[
+			'None',
+			'Align left',
+			'Align center',
+			'Align right',
+			'Wide width',
+			'Full width',
+		].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor( {
+					initialHtml: imageHTML,
+				} );
+				const { getByLabelText } = screen;
+
+				// Get Image block
+				const imageBlock = await getBlock( screen, 'Image' );
+				expect( imageBlock ).toBeVisible();
+				fireEvent.press( imageBlock );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+
+	describe( 'for text block', () => {
+		[ 'Align text left', 'Align text center', 'Align text right' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
+
+					// Add Paragraph block
+					await addBlock( screen, 'Paragraph' );
+
+					// Get Paragraph block
+					const paragraphBlock = await getBlock(
+						screen,
+						'Paragraph'
+					);
+					expect( paragraphBlock ).toBeVisible();
+
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align text' );
+					fireEvent.press( alignmentButtons );
+
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
+
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
+		);
+	} );
+
+	describe( 'for group block', () => {
+		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
+			it( `sets ${ alignmentOption } option`, async () => {
+				const screen = await initializeEditor();
+				const { getByLabelText } = screen;
+
+				// Add Group block
+				await addBlock( screen, 'Group' );
+
+				// Get Paragraph block
+				const groupBlock = await getBlock( screen, 'Group' );
+				expect( groupBlock ).toBeVisible();
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper =
+					await within( groupBlock ).findByTestId(
+						'block-list-wrapper'
+					);
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Open alignments menu
+				const alignmentButtons = getByLabelText( 'Align' );
+				fireEvent.press( alignmentButtons );
+
+				// Select alignment option.
+				fireEvent.press( await getByLabelText( alignmentOption ) );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/anchor.js b/packages/block-editor/src/hooks/test/anchor.js
new file mode 100644
index 00000000000000..557789b1c088f3
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/anchor.js
@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import anchor from '../anchor';
+
+const noop = () => {};
+
+describe( 'anchor', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+	};
+
+	describe( 'addAttribute()', () => {
+		const registerBlockType = applyFilters.bind(
+			null,
+			'blocks.registerBlockType'
+		);
+
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const settings = registerBlockType( blockSettings );
+
+			expect( settings.attributes ).toBe( undefined );
+		} );
+
+		it( 'should assign a new anchor attribute', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+			} );
+
+			expect( settings.attributes ).toHaveProperty( 'anchor' );
+		} );
+
+		it( 'should not override attributes defined in settings', () => {
+			const settings = registerBlockType( {
+				...blockSettings,
+				supports: {
+					anchor: true,
+				},
+				attributes: {
+					anchor: {
+						type: 'string',
+						default: 'testAnchor',
+					},
+				},
+			} );
+
+			expect( settings.attributes.anchor ).toEqual( {
+				type: 'string',
+				default: 'testAnchor',
+			} );
+		} );
+	} );
+
+	describe( 'addSaveProps', () => {
+		it( 'should do nothing if the block settings do not define anchor support', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = anchor.addSaveProps(
+				{},
+				blockSettings,
+				attributes
+			);
+
+			expect( extraProps ).not.toHaveProperty( 'id' );
+		} );
+
+		it( 'should inject anchor attribute ID', () => {
+			const attributes = { anchor: 'foo' };
+			const extraProps = anchor.addSaveProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( 'foo' );
+		} );
+
+		it( 'should remove an anchor attribute ID when field is cleared', () => {
+			const attributes = { anchor: '' };
+			const extraProps = anchor.addSaveProps(
+				{},
+				{
+					...blockSettings,
+					supports: {
+						anchor: true,
+					},
+				},
+				attributes
+			);
+
+			expect( extraProps.id ).toBe( null );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/anchor.native.js b/packages/block-editor/src/hooks/test/anchor.native.js
new file mode 100644
index 00000000000000..d6d2de845cbf48
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/anchor.native.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	changeTextOfTextInput,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph' ] );
+
+describe( 'anchor', () => {
+	it( 'should set the ID attribute on the block', async () => {
+		// Arrange
+		await initializeEditor();
+		const block = await addBlock( screen, 'Paragraph' );
+		await openBlockSettings( screen, block );
+
+		// Act
+		await changeTextOfTextInput(
+			await screen.getByPlaceholderText( 'Add an anchor' ),
+			'my-anchor'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/background.js b/packages/block-editor/src/hooks/test/background.js
new file mode 100644
index 00000000000000..030e88ae67fbd8
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/background.js
@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import {
+	setBackgroundStyleDefaults,
+	BACKGROUND_BLOCK_DEFAULT_VALUES,
+} from '../background';
+
+describe( 'background', () => {
+	describe( 'setBackgroundStyleDefaults', () => {
+		const backgroundStyles = {
+			backgroundImage: { id: 123, url: 'image.png' },
+		};
+		const backgroundStylesContain = {
+			backgroundImage: { id: 123, url: 'image.png' },
+			backgroundSize: 'contain',
+		};
+		const backgroundStylesNoURL = { backgroundImage: { id: 123 } };
+		it.each( [
+			[
+				'return background size default',
+				backgroundStyles,
+				{
+					backgroundSize:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+				},
+			],
+			[ 'return early if no styles are passed', undefined, undefined ],
+			[
+				'return early if images has no id',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return early if images has no URL',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return background position default',
+				backgroundStylesContain,
+				{
+					backgroundPosition:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+				},
+			],
+			[
+				'not apply background position value if one already exists in styles',
+				{
+					...backgroundStylesContain,
+					backgroundPosition: 'center',
+				},
+				undefined,
+			],
+		] )( 'should %s', ( message, styles, expected ) => {
+			const result = setBackgroundStyleDefaults( styles );
+			expect( result ).toEqual( expected );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/color.js b/packages/block-editor/src/hooks/test/color.js
deleted file mode 100644
index 29710d30a9c390..00000000000000
--- a/packages/block-editor/src/hooks/test/color.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import BlockEditorProvider from '../../components/provider';
-import { cleanEmptyObject } from '../utils';
-import { withColorPaletteStyles } from '../color';
-
-describe( 'cleanEmptyObject', () => {
-	it( 'should remove nested keys', () => {
-		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
-			undefined
-		);
-	} );
-} );
-
-describe( 'withColorPaletteStyles', () => {
-	const settings = {
-		__experimentalFeatures: {
-			color: {
-				palette: {
-					default: [
-						{
-							name: 'Pale pink',
-							slug: 'pale-pink',
-							color: '#f78da7',
-						},
-						{
-							name: 'Vivid green cyan',
-							slug: 'vivid-green-cyan',
-							color: '#00d084',
-						},
-					],
-				},
-			},
-		},
-	};
-
-	const EnhancedComponent = withColorPaletteStyles(
-		( { getStyleObj, wrapperProps } ) => (
-			<div>{ getStyleObj( wrapperProps.style ) }</div>
-		)
-	);
-
-	beforeAll( () => {
-		registerBlockType( 'core/test-block', {
-			save: () => undefined,
-			edit: () => undefined,
-			category: 'text',
-			title: 'test block',
-			supports: {
-				color: {
-					text: true,
-					background: true,
-				},
-			},
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( 'core/test-block' );
-	} );
-
-	it( 'should add color styles from attributes', () => {
-		const getStyleObj = jest.fn();
-
-		render(
-			<BlockEditorProvider settings={ settings } value={ [] }>
-				<EnhancedComponent
-					attributes={ {
-						backgroundColor: 'vivid-green-cyan',
-						textColor: 'pale-pink',
-					} }
-					name="core/test-block"
-					getStyleObj={ getStyleObj }
-				/>
-			</BlockEditorProvider>
-		);
-
-		expect( getStyleObj ).toHaveBeenLastCalledWith( {
-			color: '#f78da7',
-			backgroundColor: '#00d084',
-		} );
-	} );
-
-	it( 'should not add undefined style values', () => {
-		// This test ensures that undefined `color` and `backgroundColor` styles
-		// are not added to the styles object. An undefined `backgroundColor`
-		// style causes a React warning when gradients are used, as the gradient
-		// style currently uses the `background` shorthand syntax.
-		// See: https://github.com/WordPress/gutenberg/issues/36899.
-		const getStyleObj = jest.fn();
-
-		render(
-			<BlockEditorProvider settings={ settings } value={ [] }>
-				<EnhancedComponent
-					attributes={ {
-						backgroundColor: undefined,
-						textColor: undefined,
-					} }
-					name="core/test-block"
-					getStyleObj={ getStyleObj }
-				/>
-			</BlockEditorProvider>
-		);
-		// Check explictly for the object used in the call, because
-		// `toHaveBeenCalledWith` does not check for empty keys.
-		expect(
-			getStyleObj.mock.calls[ getStyleObj.mock.calls.length - 1 ][ 0 ]
-		).toStrictEqual( {} );
-	} );
-} );
diff --git a/packages/block-editor/src/hooks/test/custom-class-name.js b/packages/block-editor/src/hooks/test/custom-class-name.js
index 5a662a99d59aec..29d5d836bce8f7 100644
--- a/packages/block-editor/src/hooks/test/custom-class-name.js
+++ b/packages/block-editor/src/hooks/test/custom-class-name.js
@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import '../custom-class-name';
+import customClassName from '../custom-class-name';
 
 describe( 'custom className', () => {
 	const blockSettings = {
@@ -40,14 +40,9 @@ describe( 'custom className', () => {
 	} );
 
 	describe( 'addSaveProps', () => {
-		const addSaveProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
-		);
-
 		it( 'should do nothing if the block settings do not define custom className support', () => {
 			const attributes = { className: 'foo' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{},
 				{
 					...blockSettings,
@@ -63,7 +58,7 @@ describe( 'custom className', () => {
 
 		it( 'should inject the custom className', () => {
 			const attributes = { className: 'bar' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{ className: 'foo' },
 				blockSettings,
 				attributes
diff --git a/packages/block-editor/src/hooks/test/duotone.js b/packages/block-editor/src/hooks/test/duotone.js
new file mode 100644
index 00000000000000..8bee8f6c11dcfb
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/duotone.js
@@ -0,0 +1,102 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getColorsFromDuotonePreset,
+	getDuotonePresetFromColors,
+} from '../duotone';
+
+describe( 'Duotone utilities', () => {
+	const duotonePalette = [
+		{
+			name: 'Dark grayscale',
+			colors: [ '#000000', '#7f7f7f' ],
+			slug: 'dark-grayscale',
+		},
+		{
+			name: 'Grayscale',
+			colors: [ '#000000', '#ffffff' ],
+			slug: 'grayscale',
+		},
+		{
+			name: 'Purple and yellow',
+			colors: [ '#8c00b7', '#fcff41' ],
+			slug: 'purple-yellow',
+		},
+	];
+	describe( 'getColorsFromDuotonePreset', () => {
+		it( 'should return undefined if no arguments are provided', () => {
+			expect( getColorsFromDuotonePreset() ).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no duotone preset is provided', () => {
+			expect(
+				getColorsFromDuotonePreset( undefined, duotonePalette )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if a non-existent preset is provided', () => {
+			expect(
+				getColorsFromDuotonePreset(
+					`var:preset|duotone|does-not-exist`,
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return the colors from the preset if found', () => {
+			expect(
+				getColorsFromDuotonePreset(
+					`var:preset|duotone|${ duotonePalette[ 2 ].slug }`,
+					duotonePalette
+				)
+			).toEqual( duotonePalette[ 2 ].colors );
+		} );
+	} );
+
+	describe( 'getDuotonePresetFromColors', () => {
+		it( 'should return undefined if no arguments are provided', () => {
+			expect( getDuotonePresetFromColors() ).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no colors are provided', () => {
+			expect(
+				getDuotonePresetFromColors( undefined, duotonePalette )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if provided colors is not of valid type', () => {
+			const notAnArrayOfColorStrings = 'purple-yellow';
+			expect(
+				getDuotonePresetFromColors(
+					notAnArrayOfColorStrings,
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if no duotone palette is provided', () => {
+			expect(
+				getDuotonePresetFromColors( [ '#8c00b7', '#fcff41' ] )
+			).toBeUndefined();
+		} );
+
+		it( 'should return undefined if the provided colors do not match any preset', () => {
+			expect(
+				getDuotonePresetFromColors(
+					[ '#000000', '#000000' ],
+					duotonePalette
+				)
+			).toBeUndefined();
+		} );
+
+		it( 'should return the slug of the preset if found', () => {
+			expect(
+				getDuotonePresetFromColors(
+					duotonePalette[ 2 ].colors,
+					duotonePalette
+				)
+			).toEqual( `var:preset|duotone|${ duotonePalette[ 2 ].slug }` );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/font-size.js b/packages/block-editor/src/hooks/test/font-size.js
new file mode 100644
index 00000000000000..11cd024bf8a285
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/font-size.js
@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import _fontSize from '../font-size';
+
+const noop = () => {};
+
+function addUseSettingFilter( callback ) {
+	addFilter(
+		'blockEditor.useSetting.before',
+		'test/useSetting.before',
+		callback
+	);
+}
+
+describe( 'useBlockProps', () => {
+	const blockSettings = {
+		save: () => noop,
+		category: 'text',
+		title: 'font size title',
+		name: 'test/font-size',
+		supports: {
+			typography: {
+				fontSize: true,
+			},
+		},
+	};
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should return preset classname', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [
+					{
+						name: 'A larger font',
+						size: '32px',
+						slug: 'larger',
+					},
+				];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return false;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				fontSize: 'larger',
+			} )
+		);
+		const { style, className } = result.current;
+		expect( className ).toBe( 'has-larger-font-size' );
+		expect( style.fontSize ).toBe( '32px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should return custom font size', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return false;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				style: {
+					typography: {
+						fontSize: '28px',
+					},
+				},
+			} )
+		);
+		const { style } = result.current;
+		expect( style.fontSize ).toBe( '28px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should convert custom font sizes to fluid', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return true;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				style: {
+					typography: {
+						fontSize: '28px',
+					},
+				},
+			} )
+		);
+		const { style } = result.current;
+		expect( style.fontSize ).toBe(
+			'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)'
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/get-variation-styles-with-ref-values.js b/packages/block-editor/src/hooks/test/get-variation-styles-with-ref-values.js
new file mode 100644
index 00000000000000..e42fcef06122b8
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/get-variation-styles-with-ref-values.js
@@ -0,0 +1,91 @@
+/**
+ * Internal dependencies
+ */
+import { getVariationStylesWithRefValues } from '../block-style-variation';
+
+describe( 'getVariationStylesWithRefValues', () => {
+	it( 'should resolve ref values correctly', () => {
+		const globalStyles = {
+			styles: {
+				color: { background: 'red' },
+				blocks: {
+					'core/heading': {
+						color: { text: 'blue' },
+					},
+					'core/group': {
+						variations: {
+							custom: {
+								color: {
+									text: { ref: 'styles.does-not-exist' },
+									background: {
+										ref: 'styles.color.background',
+									},
+								},
+								blocks: {
+									'core/heading': {
+										color: {
+											text: {
+												ref: 'styles.blocks.core/heading.color.text',
+											},
+											background: { ref: '' },
+										},
+									},
+								},
+								elements: {
+									link: {
+										color: {
+											text: {
+												ref: 'styles.elements.link.color.text',
+											},
+											background: { ref: undefined },
+										},
+										':hover': {
+											color: {
+												text: {
+													ref: 'styles.elements.link.:hover.color.text',
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+				elements: {
+					link: {
+						color: { text: 'green' },
+						':hover': {
+							color: { text: 'yellow' },
+						},
+					},
+				},
+			},
+		};
+
+		expect(
+			getVariationStylesWithRefValues(
+				globalStyles,
+				'core/group',
+				'custom'
+			)
+		).toEqual( {
+			color: { background: 'red' },
+			blocks: {
+				'core/heading': {
+					color: { text: 'blue' },
+				},
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'green',
+					},
+					':hover': {
+						color: { text: 'yellow' },
+					},
+				},
+			},
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
index ad8ba0667e781d..40e7169194b82e 100644
--- a/packages/block-editor/src/hooks/test/style.js
+++ b/packages/block-editor/src/hooks/test/style.js
@@ -1,12 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import { getInlineStyles, omitStyle } from '../style';
+import _style, { getInlineStyles, omitStyle } from '../style';
 
 describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
@@ -21,7 +16,7 @@ describe( 'getInlineStyles', () => {
 		expect(
 			getInlineStyles( {
 				color: { text: 'red', background: 'black' },
-				typography: { lineHeight: 1.5, fontSize: 10 },
+				typography: { lineHeight: 1.5, fontSize: 10, textColumns: 2 },
 				border: {
 					radius: '10px',
 					width: '1em',
@@ -44,6 +39,7 @@ describe( 'getInlineStyles', () => {
 			borderStyle: 'dotted',
 			borderWidth: '1em',
 			color: 'red',
+			columnCount: 2,
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',
@@ -119,11 +115,6 @@ describe( 'getInlineStyles', () => {
 } );
 
 describe( 'addSaveProps', () => {
-	const addSaveProps = applyFilters.bind(
-		null,
-		'blocks.getSaveContent.extraProps'
-	);
-
 	const blockSettings = {
 		save: () => <div className="default" />,
 		category: 'text',
@@ -142,8 +133,7 @@ describe( 'addSaveProps', () => {
 	const applySkipSerialization = ( features ) => {
 		const updatedSettings = { ...blockSettings };
 		Object.keys( features ).forEach( ( key ) => {
-			updatedSettings.supports[ key ].__experimentalSkipSerialization =
-				features[ key ];
+			updatedSettings.supports[ key ].skipSerialization = features[ key ];
 		} );
 		return updatedSettings;
 	};
@@ -165,7 +155,7 @@ describe( 'addSaveProps', () => {
 	};
 
 	it( 'should serialize all styles by default', () => {
-		const extraProps = addSaveProps( {}, blockSettings, attributes );
+		const extraProps = _style.addSaveProps( {}, blockSettings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -182,7 +172,7 @@ describe( 'addSaveProps', () => {
 		const settings = applySkipSerialization( {
 			typography: true,
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -197,7 +187,7 @@ describe( 'addSaveProps', () => {
 			color: [ 'gradient' ],
 			typography: [ 'textDecoration', 'textTransform' ],
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			color: '#d92828',
diff --git a/packages/block-editor/src/hooks/test/text-align.js b/packages/block-editor/src/hooks/test/text-align.js
new file mode 100644
index 00000000000000..3b7d338193b30b
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/text-align.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getValidTextAlignments, addAssignedTextAlign } from '../text-align';
+
+const noop = () => {};
+
+describe( 'textAlign', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+		edit: ( { children } ) => <>{ children }</>,
+	};
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'getValidTextAlignments()', () => {
+		it( 'should return an empty array if block does not define align support', () => {
+			expect( getValidTextAlignments() ).toEqual( [] );
+		} );
+
+		it( 'should return all custom text aligns set', () => {
+			expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [
+				'left',
+				'right',
+			] );
+		} );
+
+		it( 'should return all text aligns sorted when provided in the random order', () => {
+			expect(
+				getValidTextAlignments( [ 'right', 'center', 'left' ] )
+			).toEqual( [ 'left', 'center', 'right' ] );
+		} );
+
+		it( 'should return all text aligns if block defines text align support as true', () => {
+			expect( getValidTextAlignments( true ) ).toEqual( [
+				'left',
+				'center',
+				'right',
+			] );
+		} );
+
+		it( 'should remove incorrect text aligns', () => {
+			expect(
+				getValidTextAlignments( [ 'left', 'right', 'justify' ] )
+			).toEqual( [ 'left', 'right' ] );
+		} );
+	} );
+
+	describe( 'addAssignedTextAlign', () => {
+		it( 'should do nothing if block does not support text align', () => {
+			registerBlockType( 'core/foo', blockSettings );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					typography: {
+						textAlign: 'center',
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'foo',
+			} );
+		} );
+
+		it( 'should do add text align classname if block supports text align', () => {
+			registerBlockType( 'core/foo', {
+				...blockSettings,
+				supports: {
+					typography: {
+						textAlign: true,
+					},
+				},
+			} );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					style: {
+						typography: {
+							textAlign: 'center',
+						},
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'has-text-align-center foo',
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js b/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
new file mode 100644
index 00000000000000..9c7fbe14df6913
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
@@ -0,0 +1,282 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorWrapperStyles } from '../use-editor-wrapper-styles';
+
+jest.mock( '../use-editor-wrapper-styles.scss', () => ( {
+	'use-editor-wrapper-styles': {
+		width: '100%',
+		maxWidth: 580,
+		alignSelf: 'center',
+	},
+	'use-editor-wrapper-styles--reversed': {
+		flexDirection: 'column-reverse',
+		width: '100%',
+		maxWidth: 580,
+	},
+} ) );
+
+const defaultCanvasStyles = {
+	width: '100%',
+	maxWidth: 580,
+	alignSelf: 'center',
+};
+
+describe( 'useEditorWrapperStyles', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should return the default wrapper styles when no props are set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () => useEditorWrapperStyles() );
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (medium) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 770,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (landscape) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 662,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 1194, height: 834 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 1054,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for full alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'full',
+				blockName: 'core/cover',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: '100%',
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 0 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for left alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'left', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for center alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 640, height: 960 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'center', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for right alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 960, height: 640 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'right', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when reversed is true', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { reversed: true, marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flexDirection: 'column-reverse',
+				width: '100%',
+				maxWidth: 580,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when contentResizeMode is set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				contentResizeMode: 'stretch',
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flex: 1,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+} );
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..c226b7f8199b9f 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -12,13 +12,17 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textAlign: 'center',
+					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
 		};
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
-			className: 'has-tofu-font-family has-large-font-size',
+			className:
+				'has-tofu-font-family has-text-align-center has-large-font-size',
 			style: {
+				columnCount: 3,
 				letterSpacing: '22px',
 				fontSize: '2rem',
 				textTransform: 'uppercase',
@@ -37,12 +41,83 @@ describe( 'getTypographyClassesAndStyles', () => {
 				},
 			},
 		};
-		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
 			className: 'has-tofu-font-family',
 			style: {
 				letterSpacing: '22px',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
+
+	it( 'should use layout.wideSize for the maximum viewport value', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+				layout: {
+					wideSize: '1000px',
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );
diff --git a/packages/block-editor/src/hooks/test/utils.js b/packages/block-editor/src/hooks/test/utils.js
index a919fad575312e..801ed0878df47b 100644
--- a/packages/block-editor/src/hooks/test/utils.js
+++ b/packages/block-editor/src/hooks/test/utils.js
@@ -1,113 +1,32 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import '../anchor';
+import { cleanEmptyObject } from '../utils';
 
-const noop = () => {};
-
-describe( 'anchor', () => {
-	const blockSettings = {
-		save: noop,
-		category: 'text',
-		title: 'block title',
-	};
-
-	describe( 'addAttribute()', () => {
-		const registerBlockType = applyFilters.bind(
-			null,
-			'blocks.registerBlockType'
+describe( 'cleanEmptyObject', () => {
+	it( 'should remove nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
+			undefined
 		);
+	} );
 
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const settings = registerBlockType( blockSettings );
-
-			expect( settings.attributes ).toBe( undefined );
-		} );
-
-		it( 'should assign a new anchor attribute', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-			} );
-
-			expect( settings.attributes ).toHaveProperty( 'anchor' );
-		} );
-
-		it( 'should not override attributes defined in settings', () => {
-			const settings = registerBlockType( {
-				...blockSettings,
-				supports: {
-					anchor: true,
-				},
-				attributes: {
-					anchor: {
-						type: 'string',
-						default: 'testAnchor',
-					},
-				},
-			} );
-
-			expect( settings.attributes.anchor ).toEqual( {
-				type: 'string',
-				default: 'testAnchor',
-			} );
+	it( 'should remove partial nested keys', () => {
+		expect(
+			cleanEmptyObject( {
+				color: { text: undefined },
+				typography: { fontSize: '10px' },
+			} )
+		).toEqual( {
+			typography: { fontSize: '10px' },
 		} );
 	} );
 
-	describe( 'addSaveProps', () => {
-		const getSaveContentExtraProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
+	it( 'should not remove falsy nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: false } } ) ).not.toEqual(
+			undefined
+		);
+		expect( cleanEmptyObject( { color: { text: '' } } ) ).not.toEqual(
+			undefined
 		);
-
-		it( 'should do nothing if the block settings do not define anchor support', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				blockSettings,
-				attributes
-			);
-
-			expect( extraProps ).not.toHaveProperty( 'id' );
-		} );
-
-		it( 'should inject anchor attribute ID', () => {
-			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( 'foo' );
-		} );
-
-		it( 'should remove an anchor attribute ID when field is cleared', () => {
-			const attributes = { anchor: '' };
-			const extraProps = getSaveContentExtraProps(
-				{},
-				{
-					...blockSettings,
-					supports: {
-						anchor: true,
-					},
-				},
-				attributes
-			);
-
-			expect( extraProps.id ).toBe( null );
-		} );
 	} );
 } );
diff --git a/packages/block-editor/src/hooks/text-align.js b/packages/block-editor/src/hooks/text-align.js
new file mode 100644
index 00000000000000..af20404d79eccf
--- /dev/null
+++ b/packages/block-editor/src/hooks/text-align.js
@@ -0,0 +1,184 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl, BlockControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+
+export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
+
+const TEXT_ALIGNMENT_OPTIONS = [
+	{
+		icon: alignLeft,
+		title: __( 'Align text left' ),
+		align: 'left',
+	},
+	{
+		icon: alignCenter,
+		title: __( 'Align text center' ),
+		align: 'center',
+	},
+	{
+		icon: alignRight,
+		title: __( 'Align text right' ),
+		align: 'right',
+	},
+];
+
+const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
+const NO_TEXT_ALIGNMENTS = [];
+
+/**
+ * Returns the valid text alignments.
+ * Takes into consideration the text aligns supported by a block.
+ * Exported just for testing purposes, not exported outside the module.
+ *
+ * @param {?boolean|string[]} blockTextAlign Text aligns supported by the block.
+ *
+ * @return {string[]} Valid text alignments.
+ */
+export function getValidTextAlignments( blockTextAlign ) {
+	if ( Array.isArray( blockTextAlign ) ) {
+		return VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
+			blockTextAlign.includes( textAlign )
+		);
+	}
+
+	return blockTextAlign === true ? VALID_TEXT_ALIGNMENTS : NO_TEXT_ALIGNMENTS;
+}
+
+function BlockEditTextAlignmentToolbarControlsPure( {
+	style,
+	name: blockName,
+	setAttributes,
+} ) {
+	const settings = useBlockSettings( blockName );
+	const hasTextAlignControl = settings?.typography?.textAlign;
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( ! hasTextAlignControl || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY )
+	);
+	if ( ! validTextAlignments.length ) {
+		return null;
+	}
+
+	const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) =>
+		validTextAlignments.includes( control.align )
+	);
+
+	const onChange = ( newTextAlignValue ) => {
+		const newStyle = {
+			...style,
+			typography: {
+				...style?.typography,
+				textAlign: newTextAlignValue,
+			},
+		};
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	return (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ style?.typography?.textAlign }
+				onChange={ onChange }
+				alignmentControls={ textAlignmentControls }
+			/>
+		</BlockControls>
+	);
+}
+
+export default {
+	edit: BlockEditTextAlignmentToolbarControlsPure,
+	useBlockProps,
+	addSaveProps: addAssignedTextAlign,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false );
+	},
+};
+
+function useBlockProps( { name, style } ) {
+	if ( ! style?.typography?.textAlign ) {
+		return null;
+	}
+
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY )
+	);
+
+	if ( ! validTextAlignments.length ) {
+		return null;
+	}
+
+	if (
+		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' )
+	) {
+		return null;
+	}
+
+	const textAlign = style.typography.textAlign;
+
+	const className = clsx( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
+	} );
+	return { className };
+}
+
+/**
+ * Override props assigned to save component to inject text alignment class
+ * name if block supports it.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addAssignedTextAlign( props, blockType, attributes ) {
+	if ( ! attributes?.style?.typography?.textAlign ) {
+		return props;
+	}
+
+	const { textAlign } = attributes.style.typography;
+	const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY );
+	const isTextAlignValid =
+		getValidTextAlignments( blockTextAlign ).includes( textAlign );
+	if (
+		isTextAlignValid &&
+		! shouldSkipSerialization(
+			blockType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'textAlign'
+		)
+	) {
+		props.className = clsx(
+			`has-text-align-${ textAlign }`,
+			props.className
+		);
+	}
+	return props;
+}
diff --git a/packages/block-editor/src/hooks/text-decoration.js b/packages/block-editor/src/hooks/text-decoration.js
deleted file mode 100644
index 17ba9ee73f698f..00000000000000
--- a/packages/block-editor/src/hooks/text-decoration.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import TextDecorationControl from '../components/text-decoration-control';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Key within block settings' supports array indicating support for text
- * decorations e.g. settings found in `block.json`.
- */
-export const TEXT_DECORATION_SUPPORT_KEY =
-	'typography.__experimentalTextDecoration';
-
-/**
- * Inspector control panel containing the text decoration options.
- *
- * @param {Object} props Block properties.
- *
- * @return {WPElement} Text decoration edit element.
- */
-export function TextDecorationEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	function onChange( newDecoration ) {
-		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...style?.typography,
-					textDecoration: newDecoration,
-				},
-			} ),
-		} );
-	}
-
-	return (
-		<TextDecorationControl
-			value={ style?.typography?.textDecoration }
-			onChange={ onChange }
-			size="__unstable-large"
-		/>
-	);
-}
-
-/**
- * Checks if text-decoration settings have been disabled.
- *
- * @param {string} name Name of the block.
- *
- * @return {boolean} Whether or not the setting is disabled.
- */
-export function useIsTextDecorationDisabled( { name: blockName } = {} ) {
-	const notSupported = ! hasBlockSupport(
-		blockName,
-		TEXT_DECORATION_SUPPORT_KEY
-	);
-	const hasTextDecoration = useSetting( 'typography.textDecoration' );
-
-	return notSupported || ! hasTextDecoration;
-}
-
-/**
- * Checks if there is a current value set for the text decoration block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a text decoration set.
- */
-export function hasTextDecorationValue( props ) {
-	return !! props.attributes.style?.typography?.textDecoration;
-}
-
-/**
- * Resets the text decoration block support attribute. This can be used when
- * disabling the text decoration support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetTextDecoration( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				textDecoration: undefined,
-			},
-		} ),
-	} );
-}
diff --git a/packages/block-editor/src/hooks/text-transform.js b/packages/block-editor/src/hooks/text-transform.js
deleted file mode 100644
index 588327633ecb8a..00000000000000
--- a/packages/block-editor/src/hooks/text-transform.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { hasBlockSupport } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import TextTransformControl from '../components/text-transform-control';
-import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
-
-/**
- * Key within block settings' supports array indicating support for text
- * transforms e.g. settings found in `block.json`.
- */
-export const TEXT_TRANSFORM_SUPPORT_KEY =
-	'typography.__experimentalTextTransform';
-
-/**
- * Inspector control panel containing the text transform options.
- *
- * @param {Object} props Block properties.
- *
- * @return {WPElement} Text transform edit element.
- */
-export function TextTransformEdit( props ) {
-	const {
-		attributes: { style },
-		setAttributes,
-	} = props;
-
-	function onChange( newTransform ) {
-		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...style?.typography,
-					textTransform: newTransform,
-				},
-			} ),
-		} );
-	}
-
-	return (
-		<TextTransformControl
-			value={ style?.typography?.textTransform }
-			onChange={ onChange }
-			size="__unstable-large"
-		/>
-	);
-}
-
-/**
- * Checks if text-transform settings have been disabled.
- *
- * @param {string} name Name of the block.
- *
- * @return {boolean} Whether or not the setting is disabled.
- */
-export function useIsTextTransformDisabled( { name: blockName } = {} ) {
-	const notSupported = ! hasBlockSupport(
-		blockName,
-		TEXT_TRANSFORM_SUPPORT_KEY
-	);
-	const hasTextTransforms = useSetting( 'typography.textTransform' );
-	return notSupported || ! hasTextTransforms;
-}
-
-/**
- * Checks if there is a current value set for the text transform block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a text transform set.
- */
-export function hasTextTransformValue( props ) {
-	return !! props.attributes.style?.typography?.textTransform;
-}
-
-/**
- * Resets the text transform block support attribute. This can be used when
- * disabling the text transform support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetTextTransform( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				textTransform: undefined,
-			},
-		} ),
-	} );
-}
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index bbdadaed3ba52b..160894eac4e610 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -2,68 +2,38 @@
  * WordPress dependencies
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useMemo, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
-import { getFontAppearanceLabel } from '../components/font-appearance-control';
-
-import {
-	LINE_HEIGHT_SUPPORT_KEY,
-	LineHeightEdit,
-	hasLineHeightValue,
-	resetLineHeight,
-	useIsLineHeightDisabled,
-} from './line-height';
-import {
-	FONT_STYLE_SUPPORT_KEY,
-	FONT_WEIGHT_SUPPORT_KEY,
-	FontAppearanceEdit,
-	hasFontAppearanceValue,
-	resetFontAppearance,
-	useIsFontAppearanceDisabled,
-	useIsFontStyleDisabled,
-	useIsFontWeightDisabled,
-} from './font-appearance';
-import {
-	FONT_FAMILY_SUPPORT_KEY,
-	FontFamilyEdit,
-	hasFontFamilyValue,
-	resetFontFamily,
-	useIsFontFamilyDisabled,
-} from './font-family';
-import {
-	FONT_SIZE_SUPPORT_KEY,
-	FontSizeEdit,
-	hasFontSizeValue,
-	resetFontSize,
-	useIsFontSizeDisabled,
-} from './font-size';
 import {
-	TEXT_DECORATION_SUPPORT_KEY,
-	TextDecorationEdit,
-	hasTextDecorationValue,
-	resetTextDecoration,
-	useIsTextDecorationDisabled,
-} from './text-decoration';
-import {
-	TEXT_TRANSFORM_SUPPORT_KEY,
-	TextTransformEdit,
-	hasTextTransformValue,
-	resetTextTransform,
-	useIsTextTransformDisabled,
-} from './text-transform';
-import {
-	LETTER_SPACING_SUPPORT_KEY,
-	LetterSpacingEdit,
-	hasLetterSpacingValue,
-	resetLetterSpacing,
-	useIsLetterSpacingDisabled,
-} from './letter-spacing';
+	default as StylesTypographyPanel,
+	useHasTypographyPanel,
+} from '../components/global-styles/typography-panel';
+
+import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
+import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
+import { FONT_SIZE_SUPPORT_KEY } from './font-size';
+import { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+
+function omit( object, keys ) {
+	return Object.fromEntries(
+		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
+	);
+}
 
+const LETTER_SPACING_SUPPORT_KEY = 'typography.letterSpacing';
+const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.textTransform';
+const TEXT_DECORATION_SUPPORT_KEY = 'typography.textDecoration';
+const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
+const FONT_STYLE_SUPPORT_KEY = 'typography.fontStyle';
+const FONT_WEIGHT_SUPPORT_KEY = 'typography.fontWeight';
+const WRITING_MODE_SUPPORT_KEY = 'typography.__experimentalWritingMode';
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
@@ -71,164 +41,110 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
+	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
+	WRITING_MODE_SUPPORT_KEY,
 	TEXT_TRANSFORM_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
 
-export function TypographyPanel( props ) {
-	const { clientId } = props;
-	const isFontFamilyDisabled = useIsFontFamilyDisabled( props );
-	const isFontSizeDisabled = useIsFontSizeDisabled( props );
-	const isFontAppearanceDisabled = useIsFontAppearanceDisabled( props );
-	const isLineHeightDisabled = useIsLineHeightDisabled( props );
-	const isTextDecorationDisabled = useIsTextDecorationDisabled( props );
-	const isTextTransformDisabled = useIsTextTransformDisabled( props );
-	const isLetterSpacingDisabled = useIsLetterSpacingDisabled( props );
+function styleToAttributes( style ) {
+	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
+	const fontSizeValue = style?.typography?.fontSize;
+	const fontFamilyValue = style?.typography?.fontFamily;
+	const fontSizeSlug = fontSizeValue?.startsWith( 'var:preset|font-size|' )
+		? fontSizeValue.substring( 'var:preset|font-size|'.length )
+		: undefined;
+	const fontFamilySlug = fontFamilyValue?.startsWith(
+		'var:preset|font-family|'
+	)
+		? fontFamilyValue.substring( 'var:preset|font-family|'.length )
+		: undefined;
+	updatedStyle.typography = {
+		...omit( updatedStyle.typography, [ 'fontFamily' ] ),
+		fontSize: fontSizeSlug ? undefined : fontSizeValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		fontFamily: fontFamilySlug,
+		fontSize: fontSizeSlug,
+	};
+}
 
-	const hasFontStyles = ! useIsFontStyleDisabled( props );
-	const hasFontWeights = ! useIsFontWeightDisabled( props );
+function attributesToStyle( attributes ) {
+	return {
+		...attributes.style,
+		typography: {
+			...attributes.style?.typography,
+			fontFamily: attributes.fontFamily
+				? 'var:preset|font-family|' + attributes.fontFamily
+				: undefined,
+			fontSize: attributes.fontSize
+				? 'var:preset|font-size|' + attributes.fontSize
+				: attributes.style?.typography?.fontSize,
+		},
+	};
+}
 
-	const isDisabled = useIsTypographyDisabled( props );
-	const isSupported = hasTypographySupport( props.name );
+function TypographyInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
 
-	if ( isDisabled || ! isSupported ) return null;
+	return (
+		<InspectorControls
+			group="typography"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-	const defaultControls = getBlockSupport( props.name, [
+export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
+	function selector( select ) {
+		const { style, fontFamily, fontSize } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, fontFamily, fontSize };
+	}
+	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
+	const isEnabled = useHasTypographyPanel( settings );
+	const value = useMemo(
+		() => attributesToStyle( { style, fontFamily, fontSize } ),
+		[ style, fontSize, fontFamily ]
+	);
+
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
+	};
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const defaultControls = getBlockSupport( name, [
 		TYPOGRAPHY_SUPPORT_KEY,
-		'__experimentalDefaultControls',
+		'defaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			typography: {
-				...newAttributes.style?.typography,
-				[ attribute ]: undefined,
-			},
-		},
-	} );
-
 	return (
-		<InspectorControls __experimentalGroup="typography">
-			{ ! isFontFamilyDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontFamilyValue( props ) }
-					label={ __( 'Font family' ) }
-					onDeselect={ () => resetFontFamily( props ) }
-					isShownByDefault={ defaultControls?.fontFamily }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontFamily: undefined,
-					} ) }
-					panelId={ clientId }
-				>
-					<FontFamilyEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontSizeDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasFontSizeValue( props ) }
-					/* translators: Ensure translation is distinct from "Letter case" */
-					label={ __( 'Font size' ) }
-					onDeselect={ () => resetFontSize( props ) }
-					isShownByDefault={ defaultControls?.fontSize }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						fontSize: undefined,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontSize: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontSizeEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isFontAppearanceDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasFontAppearanceValue( props ) }
-					label={ getFontAppearanceLabel(
-						hasFontStyles,
-						hasFontWeights
-					) }
-					onDeselect={ () => resetFontAppearance( props ) }
-					isShownByDefault={ defaultControls?.fontAppearance }
-					resetAllFilter={ ( newAttributes ) => ( {
-						...newAttributes,
-						style: {
-							...newAttributes.style,
-							typography: {
-								...newAttributes.style?.typography,
-								fontStyle: undefined,
-								fontWeight: undefined,
-							},
-						},
-					} ) }
-					panelId={ clientId }
-				>
-					<FontAppearanceEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLineHeightDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLineHeightValue( props ) }
-					label={ __( 'Line height' ) }
-					onDeselect={ () => resetLineHeight( props ) }
-					isShownByDefault={ defaultControls?.lineHeight }
-					resetAllFilter={ createResetAllFilter( 'lineHeight' ) }
-					panelId={ clientId }
-				>
-					<LineHeightEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isLetterSpacingDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter spacing' ) }
-					onDeselect={ () => resetLetterSpacing( props ) }
-					isShownByDefault={ defaultControls?.letterSpacing }
-					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }
-					panelId={ clientId }
-				>
-					<LetterSpacingEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextDecorationDisabled && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasTextDecorationValue( props ) }
-					label={ __( 'Decoration' ) }
-					onDeselect={ () => resetTextDecoration( props ) }
-					isShownByDefault={ defaultControls?.textDecoration }
-					resetAllFilter={ createResetAllFilter( 'textDecoration' ) }
-					panelId={ clientId }
-				>
-					<TextDecorationEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ ! isTextTransformDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasTextTransformValue( props ) }
-					/* translators: Ensure translation is distinct from "Font size" */
-					label={ __( 'Letter case' ) }
-					onDeselect={ () => resetTextTransform( props ) }
-					isShownByDefault={ defaultControls?.textTransform }
-					resetAllFilter={ createResetAllFilter( 'textTransform' ) }
-					panelId={ clientId }
-				>
-					<TextTransformEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-		</InspectorControls>
+		<StylesTypographyPanel
+			as={ TypographyInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+		/>
 	);
 }
 
@@ -237,17 +153,3 @@ export const hasTypographySupport = ( blockName ) => {
 		hasBlockSupport( blockName, key )
 	);
 };
-
-function useIsTypographyDisabled( props = {} ) {
-	const configs = [
-		useIsFontAppearanceDisabled( props ),
-		useIsFontSizeDisabled( props ),
-		useIsLineHeightDisabled( props ),
-		useIsFontFamilyDisabled( props ),
-		useIsTextDecorationDisabled( props ),
-		useIsTextTransformDisabled( props ),
-		useIsLetterSpacingDisabled( props ),
-	];
-
-	return configs.filter( Boolean ).length === configs.length;
-}
diff --git a/packages/block-editor/src/hooks/typography.native.js b/packages/block-editor/src/hooks/typography.native.js
index f6fe58edb28703..f0e9c9c10913d7 100644
--- a/packages/block-editor/src/hooks/typography.native.js
+++ b/packages/block-editor/src/hooks/typography.native.js
@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
-/**
- * External dependencies
- */
+import { useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -12,17 +10,12 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import { useHasTypographyPanel } from '../components/global-styles/typography-panel';
 
-import {
-	LINE_HEIGHT_SUPPORT_KEY,
-	LineHeightEdit,
-	useIsLineHeightDisabled,
-} from './line-height';
-import {
-	FONT_SIZE_SUPPORT_KEY,
-	FontSizeEdit,
-	useIsFontSizeDisabled,
-} from './font-size';
+import { store as blockEditorStore } from '../store';
+
+import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
+import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
 
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -30,11 +23,26 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_SIZE_SUPPORT_KEY,
 ];
 
-export function TypographyPanel( props ) {
-	const isDisabled = useIsTypographyDisabled( props );
-	const isSupported = hasTypographySupport( props.name );
-
-	if ( isDisabled || ! isSupported ) return null;
+function TypographyPanelPure( { clientId, setAttributes, settings } ) {
+	function selector( select ) {
+		const { style, fontFamily, fontSize } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, fontFamily, fontSize };
+	}
+	const { style, fontSize } = useSelect( selector, [ clientId ] );
+	const isEnabled = useHasTypographyPanel( settings );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const props = {
+		attributes: {
+			fontSize,
+			style,
+		},
+		setAttributes,
+	};
 
 	return (
 		<InspectorControls>
@@ -46,17 +54,7 @@ export function TypographyPanel( props ) {
 	);
 }
 
-const hasTypographySupport = ( blockName ) => {
-	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
-		hasBlockSupport( blockName, key )
-	);
-};
-
-function useIsTypographyDisabled( props = {} ) {
-	const configs = [
-		useIsFontSizeDisabled( props ),
-		useIsLineHeightDisabled( props ),
-	];
-
-	return configs.filter( Boolean ).length === configs.length;
-}
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+export const TypographyPanel = memo( TypographyPanelPure );
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
new file mode 100644
index 00000000000000..fdc617fda20c05
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -0,0 +1,322 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useCallback, useMemo, useContext } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import isURLLike from '../components/link-control/is-url-like';
+import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
+
+/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+/**
+ * Given a binding of block attributes, returns a higher order component that
+ * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ *
+ * @return {WPHigherOrderComponent} Higher-order component.
+ */
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget', 'rel' ],
+};
+
+const DEFAULT_ATTRIBUTE = '__default';
+
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param {string} blockName The block name (e.g. 'core/paragraph').
+ * @param {Object} bindings  A block's bindings from the metadata attribute.
+ *
+ * @return {Object} The bindings with default replaced for pattern overrides.
+ */
+function replacePatternOverrideDefaultBindings( blockName, bindings ) {
+	// The `__default` binding currently only works for pattern overrides.
+	if (
+		bindings?.[ DEFAULT_ATTRIBUTE ]?.source === 'core/pattern-overrides'
+	) {
+		const supportedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+		const bindingsWithDefaults = {};
+		for ( const attributeName of supportedAttributes ) {
+			// If the block has mixed binding sources, retain any non pattern override bindings.
+			const bindingSource = bindings[ attributeName ]
+				? bindings[ attributeName ]
+				: { source: 'core/pattern-overrides' };
+			bindingsWithDefaults[ attributeName ] = bindingSource;
+		}
+
+		return bindingsWithDefaults;
+	}
+
+	return bindings;
+}
+
+/**
+ * Based on the given block name,
+ * check if it is possible to bind the block.
+ *
+ * @param {string} blockName - The block name.
+ * @return {boolean} Whether it is possible to bind the block to sources.
+ */
+export function canBindBlock( blockName ) {
+	return blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS;
+}
+
+/**
+ * Based on the given block name and attribute name,
+ * check if it is possible to bind the block attribute.
+ *
+ * @param {string} blockName     - The block name.
+ * @param {string} attributeName - The attribute name.
+ * @return {boolean} Whether it is possible to bind the block attribute.
+ */
+export function canBindAttribute( blockName, attributeName ) {
+	return (
+		canBindBlock( blockName ) &&
+		BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ].includes( attributeName )
+	);
+}
+
+export function getBindableAttributes( blockName ) {
+	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+}
+
+export const withBlockBindingSupport = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const registry = useRegistry();
+		const blockContext = useContext( BlockContext );
+		const sources = useSelect( ( select ) =>
+			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
+		);
+		const { name, clientId, context, setAttributes } = props;
+		const blockBindings = useMemo(
+			() =>
+				replacePatternOverrideDefaultBindings(
+					name,
+					props.attributes.metadata?.bindings
+				),
+			[ props.attributes.metadata?.bindings, name ]
+		);
+
+		// While this hook doesn't directly call any selectors, `useSelect` is
+		// used purposely here to ensure `boundAttributes` is updated whenever
+		// there are attribute updates.
+		// `source.getValues` may also call a selector via `registry.select`.
+		const updatedContext = {};
+		const boundAttributes = useSelect(
+			( select ) => {
+				if ( ! blockBindings ) {
+					return;
+				}
+
+				const attributes = {};
+
+				const blockBindingsBySource = new Map();
+
+				for ( const [ attributeName, binding ] of Object.entries(
+					blockBindings
+				) ) {
+					const { source: sourceName, args: sourceArgs } = binding;
+					const source = sources[ sourceName ];
+					if (
+						! source ||
+						! canBindAttribute( name, attributeName )
+					) {
+						continue;
+					}
+
+					// Populate context.
+					for ( const key of source.usesContext || [] ) {
+						updatedContext[ key ] = blockContext[ key ];
+					}
+
+					blockBindingsBySource.set( source, {
+						...blockBindingsBySource.get( source ),
+						[ attributeName ]: {
+							args: sourceArgs,
+						},
+					} );
+				}
+
+				if ( blockBindingsBySource.size ) {
+					for ( const [
+						source,
+						bindings,
+					] of blockBindingsBySource ) {
+						// Get values in batch if the source supports it.
+						let values = {};
+						if ( ! source.getValues ) {
+							Object.keys( bindings ).forEach( ( attr ) => {
+								// Default to the the source label when `getValues` doesn't exist.
+								values[ attr ] = source.label;
+							} );
+						} else {
+							values = source.getValues( {
+								select,
+								context: updatedContext,
+								clientId,
+								bindings,
+							} );
+						}
+						for ( const [ attributeName, value ] of Object.entries(
+							values
+						) ) {
+							if (
+								attributeName === 'url' &&
+								( ! value || ! isURLLike( value ) )
+							) {
+								// Return null if value is not a valid URL.
+								attributes[ attributeName ] = null;
+							} else {
+								attributes[ attributeName ] = value;
+							}
+						}
+					}
+				}
+
+				return attributes;
+			},
+			[ blockBindings, name, clientId, updatedContext, sources ]
+		);
+
+		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
+
+		const _setAttributes = useCallback(
+			( nextAttributes ) => {
+				registry.batch( () => {
+					if ( ! blockBindings ) {
+						setAttributes( nextAttributes );
+						return;
+					}
+
+					const keptAttributes = { ...nextAttributes };
+					const blockBindingsBySource = new Map();
+
+					// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
+					for ( const [ attributeName, newValue ] of Object.entries(
+						keptAttributes
+					) ) {
+						if (
+							! blockBindings[ attributeName ] ||
+							! canBindAttribute( name, attributeName )
+						) {
+							continue;
+						}
+
+						const binding = blockBindings[ attributeName ];
+						const source = sources[ binding?.source ];
+						if ( ! source?.setValues ) {
+							continue;
+						}
+						blockBindingsBySource.set( source, {
+							...blockBindingsBySource.get( source ),
+							[ attributeName ]: {
+								args: binding.args,
+								newValue,
+							},
+						} );
+						delete keptAttributes[ attributeName ];
+					}
+
+					if ( blockBindingsBySource.size ) {
+						for ( const [
+							source,
+							bindings,
+						] of blockBindingsBySource ) {
+							source.setValues( {
+								select: registry.select,
+								dispatch: registry.dispatch,
+								context: updatedContext,
+								clientId,
+								bindings,
+							} );
+						}
+					}
+
+					if (
+						// Don't update non-connected attributes if the block is using pattern overrides
+						// and the editing is happening while overriding the pattern (not editing the original).
+						! (
+							hasPatternOverridesDefaultBinding &&
+							hasParentPattern
+						) &&
+						Object.keys( keptAttributes ).length
+					) {
+						// Don't update caption and href until they are supported.
+						if ( hasPatternOverridesDefaultBinding ) {
+							delete keptAttributes?.caption;
+							delete keptAttributes?.href;
+						}
+						setAttributes( keptAttributes );
+					}
+				} );
+			},
+			[
+				registry,
+				blockBindings,
+				name,
+				clientId,
+				updatedContext,
+				setAttributes,
+				sources,
+				hasPatternOverridesDefaultBinding,
+				hasParentPattern,
+			]
+		);
+
+		return (
+			<>
+				<BlockEdit
+					{ ...props }
+					attributes={ { ...props.attributes, ...boundAttributes } }
+					setAttributes={ _setAttributes }
+					context={ { ...context, ...updatedContext } }
+				/>
+			</>
+		);
+	},
+	'withBlockBindingSupport'
+);
+
+/**
+ * Filters a registered block's settings to enhance a block's `edit` component
+ * to upgrade bound attributes.
+ *
+ * @param {WPBlockSettings} settings - Registered block settings.
+ * @param {string}          name     - Block name.
+ * @return {WPBlockSettings} Filtered block settings.
+ */
+function shimAttributeSource( settings, name ) {
+	if ( ! canBindBlock( name ) ) {
+		return settings;
+	}
+
+	return {
+		...settings,
+		edit: withBlockBindingSupport( settings.edit ),
+	};
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
+	shimAttributeSource
+);
diff --git a/packages/block-editor/src/hooks/use-color-props.js b/packages/block-editor/src/hooks/use-color-props.js
index 4e2bfb446bcce9..5e52b3eb6841fa 100644
--- a/packages/block-editor/src/hooks/use-color-props.js
+++ b/packages/block-editor/src/hooks/use-color-props.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import {
 	__experimentalGetGradientClass,
 	getGradientValueBySlug,
 } from '../components/gradients';
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 
 // The code in this file has largely been lifted from the color block support
 // hook.
@@ -51,7 +51,7 @@ export function getColorClassesAndStyles( attributes ) {
 	const hasGradient = gradientClass || style?.color?.gradient;
 
 	// Determine color CSS class name list.
-	const className = classnames( textClass, gradientClass, {
+	const className = clsx( textClass, gradientClass, {
 		// Don't apply the background class if there's a gradient.
 		[ backgroundClass ]: ! hasGradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,
@@ -73,8 +73,6 @@ export function getColorClassesAndStyles( attributes ) {
 	};
 }
 
-const EMPTY_OBJECT = {};
-
 /**
  * Determines the color related props for a block derived from its color block
  * support attributes.
@@ -89,13 +87,22 @@ const EMPTY_OBJECT = {};
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' ) || [];
-	const themePalette = useSetting( 'color.palette.theme' ) || [];
-	const defaultPalette = useSetting( 'color.palette.default' ) || [];
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const [
+		userPalette,
+		themePalette,
+		defaultPalette,
+		userGradients,
+		themeGradients,
+		defaultGradients,
+	] = useSettings(
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default'
+	);
+
 	const colors = useMemo(
 		() => [
 			...( userPalette || [] ),
@@ -106,11 +113,11 @@ export function useColorProps( attributes ) {
 	);
 	const gradients = useMemo(
 		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
+			...( userGradients || [] ),
+			...( themeGradients || [] ),
+			...( defaultGradients || [] ),
 		],
-		[ gradientsPerOrigin ]
+		[ userGradients, themeGradients, defaultGradients ]
 	);
 
 	const colorProps = getColorClassesAndStyles( attributes );
diff --git a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
new file mode 100644
index 00000000000000..beafe9b743f6f2
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	ALIGNMENT_BREAKPOINTS,
+	WIDE_ALIGNMENTS,
+	alignmentHelpers,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './use-editor-wrapper-styles.scss';
+
+const ALIGNMENT_MAX_WIDTH = {
+	full: '100%',
+	wide: 1054,
+	wideMedium: 770,
+	wideLandscape: 662,
+};
+
+const BLOCK_DEFAULT_MARGIN = 16;
+
+/**
+ * Get the styles for the wide width alignment.
+ *
+ * @param {Object}  [options]           The options for the helper.
+ * @param {string}  options.align       The alignment value.
+ * @param {boolean} options.isLandscape Whether the screen is in landscape mode.
+ * @param {number}  options.width       The width of the screen.
+ * @return {Object} An object containing the styles for the wide width alignment.
+ */
+function getWideWidthStyles( { align, isLandscape, width } = {} ) {
+	if ( align !== WIDE_ALIGNMENTS.alignments.wide ) {
+		return {};
+	}
+
+	if ( isLandscape && width < ALIGNMENT_BREAKPOINTS.large ) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideLandscape };
+	}
+
+	if ( width <= ALIGNMENT_BREAKPOINTS.small ) {
+		return { maxWidth: width };
+	}
+
+	if (
+		width >= ALIGNMENT_BREAKPOINTS.medium &&
+		width < ALIGNMENT_BREAKPOINTS.wide
+	) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideMedium };
+	}
+
+	return { maxWidth: ALIGNMENT_MAX_WIDTH.wide };
+}
+
+/**
+ * Get the styles for the full width alignment.
+ *
+ * @param {Object}  [options]               The options for the helper.
+ * @param {string}  options.align           The alignment value.
+ * @param {string}  options.blockName       The name of the block.
+ * @param {boolean} options.hasParents      Whether the block has parents.
+ * @param {string}  options.parentBlockName The name of the parent block.
+ * @return {Object} An object containing the styles for the full width alignment.
+ */
+function getFullWidthStyles( {
+	align,
+	blockName,
+	hasParents,
+	parentBlockName,
+} = {} ) {
+	const { isContainerRelated, isFullWidth } = alignmentHelpers;
+	const fullWidthStyles = isFullWidth( align )
+		? { maxWidth: ALIGNMENT_MAX_WIDTH.full }
+		: {};
+
+	if (
+		! align &&
+		hasParents &&
+		! isContainerRelated( parentBlockName ) &&
+		isContainerRelated( blockName )
+	) {
+		fullWidthStyles.paddingHorizontal = BLOCK_DEFAULT_MARGIN;
+	}
+
+	return fullWidthStyles;
+}
+
+/**
+ * Get the block margin based on various conditions.
+ *
+ * @param {Object}  [options]                    The options for the helper.
+ * @param {string}  options.align                The alignment value.
+ * @param {string}  options.blockName            The name of the block.
+ * @param {number}  options.blockWidth           The width of the block.
+ * @param {boolean} options.hasParents           Whether the block has parents.
+ * @param {number}  options.marginHorizontal     Default horizontal margin.
+ * @param {string}  options.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  options.parentBlockName      The name of the parent block.
+ * @param {number}  options.parentWidth          The width of the parent block.
+ * @param {number}  options.width                The width of the screen.
+ * @return {number} The calculated block margin.
+ */
+function getBlockMargin( {
+	align,
+	blockName,
+	blockWidth,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	width,
+} = {} ) {
+	const { isContainerRelated, isWider, isWideWidth, isFullWidth } =
+		alignmentHelpers;
+
+	if ( isFullWidth( align ) ) {
+		if ( ! hasParents ) {
+			return 0;
+		}
+		return marginHorizontal;
+	}
+
+	if ( isWideWidth( align ) ) {
+		return marginHorizontal;
+	}
+
+	if (
+		isFullWidth( parentBlockAlignment ) &&
+		! isWider( blockWidth, 'medium' )
+	) {
+		if ( isContainerRelated( blockName ) || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+		return marginHorizontal * 2;
+	}
+
+	if (
+		isContainerRelated( parentBlockName ) &&
+		! isContainerRelated( blockName )
+	) {
+		const isScreenWidthEqual = parentWidth === width;
+		if ( isScreenWidthEqual || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+	}
+
+	return marginHorizontal;
+}
+
+/**
+ * Custom hook to get the styles and margin for the editor wrapper.
+ *
+ * @param {Object}  [props]                    The props for the hook.
+ * @param {string}  props.align                The alignment value.
+ * @param {string}  props.blockName            The name of the block.
+ * @param {number}  props.blockWidth           The width of the block.
+ * @param {string}  props.contentResizeMode    The content resize mode.
+ * @param {boolean} props.hasParents           Whether the block has parents.
+ * @param {number}  props.marginHorizontal     Default horizontal margin.
+ * @param {string}  props.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  props.parentBlockName      The name of the parent block.
+ * @param {number}  props.parentWidth          The width of the parent block.
+ * @param {boolean} [props.reversed=false]     Whether the flex direction should be reversed.
+ * @return {[Array, number]} An array containing the wrapper styles and block margin.
+ */
+export function useEditorWrapperStyles( {
+	align,
+	blockName,
+	blockWidth,
+	contentResizeMode,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	reversed = false,
+} = {} ) {
+	const { width, height } = useWindowDimensions();
+	const isLandscape = width >= height;
+
+	const blockMargin = useMemo(
+		() =>
+			getBlockMargin( {
+				align,
+				blockName,
+				blockWidth,
+				hasParents,
+				marginHorizontal,
+				parentBlockAlignment,
+				parentBlockName,
+				parentWidth,
+				width,
+			} ),
+		[
+			align,
+			blockName,
+			blockWidth,
+			hasParents,
+			marginHorizontal,
+			parentBlockAlignment,
+			parentBlockName,
+			parentWidth,
+			width,
+		]
+	);
+
+	const wrapperStyles = useMemo( () => {
+		let canvasStyles;
+
+		if ( contentResizeMode === 'stretch' ) {
+			// For these cases, no width constraints should be added.
+			canvasStyles = { flex: 1 };
+		} else if ( reversed ) {
+			canvasStyles = styles[ 'use-editor-wrapper-styles--reversed' ];
+		} else {
+			canvasStyles = styles[ 'use-editor-wrapper-styles' ];
+		}
+
+		const alignmentStyles = {
+			...getWideWidthStyles( { align, isLandscape, width } ),
+			...getFullWidthStyles( {
+				align,
+				blockName,
+				hasParents,
+				parentBlockName,
+			} ),
+		};
+
+		return [ canvasStyles, alignmentStyles ];
+	}, [
+		align,
+		blockName,
+		hasParents,
+		parentBlockName,
+		isLandscape,
+		width,
+		contentResizeMode,
+		reversed,
+	] );
+
+	return [ wrapperStyles, blockMargin ];
+}
diff --git a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
new file mode 100644
index 00000000000000..2ae4ed8b86144c
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
@@ -0,0 +1,12 @@
+.use-editor-wrapper-styles {
+	width: 100%;
+	max-width: 580;
+	align-self: center;
+}
+
+.use-editor-wrapper-styles--reversed {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
+	flex-direction: column-reverse;
+	width: 100%;
+	max-width: 580;
+}
diff --git a/packages/block-editor/src/hooks/use-shadow-props.js b/packages/block-editor/src/hooks/use-shadow-props.js
new file mode 100644
index 00000000000000..34fb8b45467521
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-shadow-props.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+
+// This utility is intended to assist where the serialization of the shadow
+// block support is being skipped for a block but the shadow related CSS classes
+// & styles still need to be generated so they can be applied to inner elements.
+
+/**
+ * Provides the CSS class names and inline styles for a block's shadow support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Shadow block support derived CSS classes & styles.
+ */
+export function getShadowClassesAndStyles( attributes ) {
+	const shadow = attributes.style?.shadow || '';
+
+	return {
+		style: getInlineStyles( { shadow } ),
+	};
+}
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index d70ae08aafc593..0f1a2caefde048 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -1,51 +1,57 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
-import classnames from 'classnames';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
+import { unlock } from '../lock-unlock';
 
-// This utility is intended to assist where the serialization of the typography
-// block support is being skipped for a block but the typography related CSS
-// styles still need to be generated so they can be applied to inner elements.
+const { kebabCase } = unlock( componentsPrivateApis );
 
+/*
+ * This utility is intended to assist where the serialization of the typography
+ * block support is being skipped for a block but the typography related CSS
+ * styles still need to be generated so they can be applied to inner elements.
+ */
 /**
  * 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} settings   Merged theme.json settings
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles(
-	attributes,
-	isFluidFontSizeActive
-) {
+export function getTypographyClassesAndStyles( attributes, settings ) {
 	let typographyStyles = attributes?.style?.typography || {};
-
-	if ( isFluidFontSizeActive ) {
-		typographyStyles = {
-			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
-		};
-	}
+	typographyStyles = {
+		...typographyStyles,
+		fontSize: getTypographyFontSizeValue(
+			{ size: attributes?.style?.typography?.fontSize },
+			settings
+		),
+	};
 
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
 		: '';
-
-	const className = classnames(
+	const textAlignClassName = !! attributes?.style?.typography?.textAlign
+		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
+		: '';
+	const className = clsx(
 		fontFamilyClassName,
+		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )
 	);
 
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
new file mode 100644
index 00000000000000..bcf5d9ff882f7b
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ *
+ * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ */
+export function useZoomOut( zoomOut = true ) {
+	const { setZoomLevel, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
+
+	useEffect( () => {
+		const isZoomOutOnMount = isZoomOut();
+
+		return () => {
+			if ( isZoomOutOnMount ) {
+				setZoomLevel( 'auto-scaled' );
+			} else {
+				resetZoomLevel();
+			}
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( zoomOut ) {
+			setZoomLevel( 'auto-scaled' );
+		} else {
+			resetZoomLevel();
+		}
+	}, [ zoomOut, setZoomLevel, resetZoomLevel ] );
+}
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index f8feba34fabece..ac6e55efe4d3bd 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -1,12 +1,29 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { isEmpty, mapValues, get, setWith, clone } from 'lodash';
+import { getBlockSupport } from '@wordpress/blocks';
+import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
+import { useDispatch, useRegistry } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../components/block-edit/context';
+import { useSettings } from '../components';
+import { useSettingsForBlockElement } from '../components/global-styles/hooks';
+import { getValueFromObjectPath, setImmutably } from '../utils/object';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
 
 /**
  * Removed falsy values from nested object.
@@ -22,17 +39,14 @@ export const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
 
-export function immutableSet( object, path, value ) {
-	return setWith( object ? clone( object ) : {}, path, value, clone );
-}
+	const cleanedNestedObjects = Object.entries( object )
+		.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+		.filter( ( [ , value ] ) => value !== undefined );
+	return ! cleanedNestedObjects.length
+		? undefined
+		: Object.fromEntries( cleanedNestedObjects );
+};
 
 export function transformStyles(
 	activeSupports,
@@ -74,11 +88,14 @@ export function transformStyles(
 	Object.entries( activeSupports ).forEach( ( [ support, isActive ] ) => {
 		if ( isActive ) {
 			migrationPaths[ support ].forEach( ( path ) => {
-				const styleValue = get( referenceBlockAttributes, path );
+				const styleValue = getValueFromObjectPath(
+					referenceBlockAttributes,
+					path
+				);
 				if ( styleValue ) {
 					returnBlock = {
 						...returnBlock,
-						attributes: immutableSet(
+						attributes: setImmutably(
 							returnBlock.attributes,
 							path,
 							styleValue
@@ -95,15 +112,19 @@ export function transformStyles(
  * Check whether serialization of specific block support feature or set should
  * be skipped.
  *
- * @param {string|Object} blockType  Block name or block type object.
- * @param {string}        featureSet Name of block support feature set.
- * @param {string}        feature    Name of the individual feature to check.
+ * @param {string|Object} blockNameOrType Block name or block type object.
+ * @param {string}        featureSet      Name of block support feature set.
+ * @param {string}        feature         Name of the individual feature to check.
  *
  * @return {boolean} Whether serialization should occur.
  */
-export function shouldSkipSerialization( blockType, featureSet, feature ) {
-	const support = getBlockSupport( blockType, featureSet );
-	const skipSerialization = support?.__experimentalSkipSerialization;
+export function shouldSkipSerialization(
+	blockNameOrType,
+	featureSet,
+	feature
+) {
+	const support = getBlockSupport( blockNameOrType, featureSet );
+	const skipSerialization = support?.skipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
 		return skipSerialization.includes( feature );
@@ -111,3 +132,587 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 
 	return skipSerialization;
 }
+
+const pendingStyleOverrides = new WeakMap();
+
+/**
+ * Override a block editor settings style. Leave the ID blank to create a new
+ * style.
+ *
+ * @param {Object}  override     Override object.
+ * @param {?string} override.id  Id of the style override, leave blank to create
+ *                               a new style.
+ * @param {string}  override.css CSS to apply.
+ */
+export function useStyleOverride( { id, css } ) {
+	return usePrivateStyleOverride( { id, css } );
+}
+
+export function usePrivateStyleOverride( {
+	id,
+	css,
+	assets,
+	__unstableType,
+	variation,
+	clientId,
+} = {} ) {
+	const { setStyleOverride, deleteStyleOverride } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const registry = useRegistry();
+	const fallbackId = useId();
+	useEffect( () => {
+		// Unmount if there is CSS and assets are empty.
+		if ( ! css && ! assets ) {
+			return;
+		}
+
+		const _id = id || fallbackId;
+		const override = {
+			id,
+			css,
+			assets,
+			__unstableType,
+			variation,
+			clientId,
+		};
+		// Batch updates to style overrides to avoid triggering cascading renders
+		// for each style override block included in a tree and optimize initial render.
+		if ( ! pendingStyleOverrides.get( registry ) ) {
+			pendingStyleOverrides.set( registry, [] );
+		}
+		pendingStyleOverrides.get( registry ).push( [ _id, override ] );
+		window.queueMicrotask( () => {
+			if ( pendingStyleOverrides.get( registry )?.length ) {
+				registry.batch( () => {
+					pendingStyleOverrides.get( registry ).forEach( ( args ) => {
+						setStyleOverride( ...args );
+					} );
+					pendingStyleOverrides.set( registry, [] );
+				} );
+			}
+		} );
+
+		return () => {
+			const isPending = pendingStyleOverrides
+				.get( registry )
+				?.find( ( [ currentId ] ) => currentId === _id );
+			if ( isPending ) {
+				pendingStyleOverrides.set(
+					registry,
+					pendingStyleOverrides
+						.get( registry )
+						.filter( ( [ currentId ] ) => currentId !== _id )
+				);
+			} else {
+				deleteStyleOverride( _id );
+			}
+		};
+	}, [
+		id,
+		css,
+		clientId,
+		assets,
+		__unstableType,
+		fallbackId,
+		setStyleOverride,
+		deleteStyleOverride,
+		registry,
+	] );
+}
+
+/**
+ * Based on the block and its context, returns an object of all the block settings.
+ * This object can be passed as a prop to all the Styles UI components
+ * (TypographyPanel, DimensionsPanel...).
+ *
+ * @param {string} name         Block name.
+ * @param {*}      parentLayout Parent layout.
+ *
+ * @return {Object} Settings object.
+ */
+export function useBlockSettings( name, parentLayout ) {
+	const [
+		backgroundImage,
+		backgroundSize,
+		customFontFamilies,
+		defaultFontFamilies,
+		themeFontFamilies,
+		defaultFontSizesEnabled,
+		customFontSizes,
+		defaultFontSizes,
+		themeFontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textAlign,
+		textColumns,
+		textDecoration,
+		writingMode,
+		textTransform,
+		letterSpacing,
+		padding,
+		margin,
+		blockGap,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
+		units,
+		aspectRatio,
+		minHeight,
+		layout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		customDuotone,
+		themeColors,
+		defaultColors,
+		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
+		shadow,
+	] = useSettings(
+		'background.backgroundImage',
+		'background.backgroundSize',
+		'typography.fontFamilies.custom',
+		'typography.fontFamilies.default',
+		'typography.fontFamilies.theme',
+		'typography.defaultFontSizes',
+		'typography.fontSizes.custom',
+		'typography.fontSizes.default',
+		'typography.fontSizes.theme',
+		'typography.customFontSize',
+		'typography.fontStyle',
+		'typography.fontWeight',
+		'typography.lineHeight',
+		'typography.textAlign',
+		'typography.textColumns',
+		'typography.textDecoration',
+		'typography.writingMode',
+		'typography.textTransform',
+		'typography.letterSpacing',
+		'spacing.padding',
+		'spacing.margin',
+		'spacing.blockGap',
+		'spacing.defaultSpacingSizes',
+		'spacing.customSpacingSize',
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.default',
+		'spacing.spacingSizes.theme',
+		'spacing.units',
+		'dimensions.aspectRatio',
+		'dimensions.minHeight',
+		'layout',
+		'border.color',
+		'border.radius',
+		'border.style',
+		'border.width',
+		'color.custom',
+		'color.palette.custom',
+		'color.customDuotone',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette',
+		'color.defaultDuotone',
+		'color.duotone.custom',
+		'color.duotone.theme',
+		'color.duotone.default',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default',
+		'color.defaultGradients',
+		'color.customGradient',
+		'color.background',
+		'color.link',
+		'color.text',
+		'color.heading',
+		'color.button',
+		'shadow'
+	);
+
+	const rawSettings = useMemo( () => {
+		return {
+			background: {
+				backgroundImage,
+				backgroundSize,
+			},
+			color: {
+				palette: {
+					custom: customColors,
+					theme: themeColors,
+					default: defaultColors,
+				},
+				gradients: {
+					custom: userGradientPalette,
+					theme: themeGradientPalette,
+					default: defaultGradientPalette,
+				},
+				duotone: {
+					custom: userDuotonePalette,
+					theme: themeDuotonePalette,
+					default: defaultDuotonePalette,
+				},
+				defaultGradients,
+				defaultPalette,
+				defaultDuotone,
+				custom: customColorsEnabled,
+				customGradient: areCustomGradientsEnabled,
+				customDuotone,
+				background: isBackgroundEnabled,
+				link: isLinkEnabled,
+				heading: isHeadingEnabled,
+				button: isButtonEnabled,
+				text: isTextEnabled,
+			},
+			typography: {
+				fontFamilies: {
+					custom: customFontFamilies,
+					default: defaultFontFamilies,
+					theme: themeFontFamilies,
+				},
+				fontSizes: {
+					custom: customFontSizes,
+					default: defaultFontSizes,
+					theme: themeFontSizes,
+				},
+				customFontSize,
+				defaultFontSizes: defaultFontSizesEnabled,
+				fontStyle,
+				fontWeight,
+				lineHeight,
+				textAlign,
+				textColumns,
+				textDecoration,
+				textTransform,
+				letterSpacing,
+				writingMode,
+			},
+			spacing: {
+				spacingSizes: {
+					custom: userSpacingSizes,
+					default: defaultSpacingSizes,
+					theme: themeSpacingSizes,
+				},
+				customSpacingSize,
+				defaultSpacingSizes: defaultSpacingSizesEnabled,
+				padding,
+				margin,
+				blockGap,
+				units,
+			},
+			border: {
+				color: borderColor,
+				radius: borderRadius,
+				style: borderStyle,
+				width: borderWidth,
+			},
+			dimensions: {
+				aspectRatio,
+				minHeight,
+			},
+			layout,
+			parentLayout,
+			shadow,
+		};
+	}, [
+		backgroundImage,
+		backgroundSize,
+		customFontFamilies,
+		defaultFontFamilies,
+		themeFontFamilies,
+		defaultFontSizesEnabled,
+		customFontSizes,
+		defaultFontSizes,
+		themeFontSizes,
+		customFontSize,
+		fontStyle,
+		fontWeight,
+		lineHeight,
+		textAlign,
+		textColumns,
+		textDecoration,
+		textTransform,
+		letterSpacing,
+		writingMode,
+		padding,
+		margin,
+		blockGap,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
+		units,
+		aspectRatio,
+		minHeight,
+		layout,
+		parentLayout,
+		borderColor,
+		borderRadius,
+		borderStyle,
+		borderWidth,
+		customColorsEnabled,
+		customColors,
+		customDuotone,
+		themeColors,
+		defaultColors,
+		defaultPalette,
+		defaultDuotone,
+		userDuotonePalette,
+		themeDuotonePalette,
+		defaultDuotonePalette,
+		userGradientPalette,
+		themeGradientPalette,
+		defaultGradientPalette,
+		defaultGradients,
+		areCustomGradientsEnabled,
+		isBackgroundEnabled,
+		isLinkEnabled,
+		isTextEnabled,
+		isHeadingEnabled,
+		isButtonEnabled,
+		shadow,
+	] );
+
+	return useSettingsForBlockElement( rawSettings, name );
+}
+
+export function createBlockEditFilter( features ) {
+	// We don't want block controls to re-render when typing inside a block.
+	// `memo` will prevent re-renders unless props change, so only pass the
+	// needed props and not the whole attributes object.
+	features = features.map( ( settings ) => {
+		return { ...settings, Edit: memo( settings.edit ) };
+	} );
+	const withBlockEditHooks = createHigherOrderComponent(
+		( OriginalBlockEdit ) => ( props ) => {
+			const context = useBlockEditContext();
+			// CAUTION: code added before this line will be executed for all
+			// blocks, not just those that support the feature! Code added
+			// above this line should be carefully evaluated for its impact on
+			// performance.
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						Edit,
+						hasSupport,
+						attributeKeys = [],
+						shareWithChildBlocks,
+					} = feature;
+					const shouldDisplayControls =
+						context[ mayDisplayControlsKey ] ||
+						( context[ mayDisplayParentControlsKey ] &&
+							shareWithChildBlocks );
+
+					if (
+						! shouldDisplayControls ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					return (
+						<Edit
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							name={ props.name }
+							isSelected={ props.isSelected }
+							clientId={ props.clientId }
+							setAttributes={ props.setAttributes }
+							__unstableParentLayout={
+								props.__unstableParentLayout
+							}
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<OriginalBlockEdit key="edit" { ...props } />,
+			];
+		},
+		'withBlockEditHooks'
+	);
+	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
+}
+
+function BlockProps( {
+	index,
+	useBlockProps: hook,
+	setAllWrapperProps,
+	...props
+} ) {
+	const wrapperProps = hook( props );
+	const setWrapperProps = ( next ) =>
+		setAllWrapperProps( ( prev ) => {
+			const nextAll = [ ...prev ];
+			nextAll[ index ] = next;
+			return nextAll;
+		} );
+	// Setting state after every render is fine because this component is
+	// pure and will only re-render when needed props change.
+	useEffect( () => {
+		// We could shallow compare the props, but since this component only
+		// changes when needed attributes change, the benefit is probably small.
+		setWrapperProps( wrapperProps );
+		return () => {
+			setWrapperProps( undefined );
+		};
+	} );
+	return null;
+}
+
+const BlockPropsPure = memo( BlockProps );
+
+export function createBlockListBlockFilter( features ) {
+	const withBlockListBlockHooks = createHigherOrderComponent(
+		( BlockListBlock ) => ( props ) => {
+			const [ allWrapperProps, setAllWrapperProps ] = useState(
+				Array( features.length ).fill( undefined )
+			);
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						hasSupport,
+						attributeKeys = [],
+						useBlockProps,
+						isMatch,
+					} = feature;
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					if (
+						// Skip rendering if none of the needed attributes are
+						// set.
+						! Object.keys( neededProps ).length ||
+						! hasSupport( props.name ) ||
+						( isMatch && ! isMatch( neededProps ) )
+					) {
+						return null;
+					}
+
+					return (
+						<BlockPropsPure
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							index={ i }
+							useBlockProps={ useBlockProps }
+							// This component is pure, so we must pass a stable
+							// function reference.
+							setAllWrapperProps={ setAllWrapperProps }
+							name={ props.name }
+							clientId={ props.clientId }
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<BlockListBlock
+					key="edit"
+					{ ...props }
+					wrapperProps={ allWrapperProps
+						.filter( Boolean )
+						.reduce( ( acc, wrapperProps ) => {
+							return {
+								...acc,
+								...wrapperProps,
+								className: clsx(
+									acc.className,
+									wrapperProps.className
+								),
+								style: {
+									...acc.style,
+									...wrapperProps.style,
+								},
+							};
+						}, props.wrapperProps || {} ) }
+				/>,
+			];
+		},
+		'withBlockListBlockHooks'
+	);
+	addFilter(
+		'editor.BlockListBlock',
+		'core/editor/hooks',
+		withBlockListBlockHooks
+	);
+}
+
+export function createBlockSaveFilter( features ) {
+	function extraPropsFromHooks( props, name, attributes ) {
+		return features.reduce( ( accu, feature ) => {
+			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
+
+			const neededAttributes = {};
+			for ( const key of attributeKeys ) {
+				if ( attributes[ key ] ) {
+					neededAttributes[ key ] = attributes[ key ];
+				}
+			}
+
+			if (
+				// Skip rendering if none of the needed attributes are
+				// set.
+				! Object.keys( neededAttributes ).length ||
+				! hasSupport( name )
+			) {
+				return accu;
+			}
+
+			return addSaveProps( accu, name, neededAttributes );
+		}, props );
+	}
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		extraPropsFromHooks,
+		0
+	);
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		( props ) => {
+			// Previously we had a filter deleting the className if it was an empty
+			// string. That filter is no longer running, so now we need to delete it
+			// here.
+			if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
+				delete props.className;
+			}
+
+			return props;
+		}
+	);
+}
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index 1c81c910b21e12..d81f23a702b04e 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -11,12 +11,13 @@ export {
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
+	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
-	useLayoutClasses as __experimentaluseLayoutClasses,
-	useLayoutStyles as __experimentaluseLayoutStyles,
+	useStyleOverride,
 } from './hooks';
 export * from './components';
 export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
+export { privateApis } from './private-apis';
diff --git a/packages/block-editor/src/index.native.js b/packages/block-editor/src/index.native.js
new file mode 100644
index 00000000000000..f1b544c29c6bd9
--- /dev/null
+++ b/packages/block-editor/src/index.native.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export * from './index.js';
+
+export { useEditorWrapperStyles } from './hooks';
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 5e3b7eab405d89..7bf6badf008709 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -6,11 +6,13 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	Icon,
-	positionCenter,
+	alignNone,
 	stretchWide,
 	justifyLeft,
 	justifyCenter,
@@ -21,10 +23,12 @@ import { getCSSRules } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
+import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
+import { BlockControls, JustifyContentControl } from '../components';
 import { shouldSkipSerialization } from '../hooks/utils';
+import { LAYOUT_DEFINITIONS } from './definitions';
 
 export default {
 	name: 'constrained',
@@ -32,8 +36,13 @@ export default {
 	inspectorControls: function DefaultLayoutInspectorControls( {
 		layout,
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
+		const {
+			allowJustification = true,
+			allowCustomContentAndWideSize = true,
+		} = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -57,23 +66,21 @@ export default {
 				label: __( 'Justify items right' ),
 			},
 		];
+		const [ availableUnits ] = useSettings( 'spacing.units' );
 		const units = useCustomUnits( {
-			availableUnits: useSetting( 'spacing.units' ) || [
-				'%',
-				'px',
-				'em',
-				'rem',
-				'vw',
-			],
+			availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 		} );
 		return (
-			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
+			<VStack
+				spacing={ 4 }
+				className="block-editor-hooks__layout-constrained"
+			>
+				{ allowCustomContentAndWideSize && (
+					<>
 						<UnitControl
-							label={ __( 'Content' ) }
+							__next40pxDefaultSize
+							label={ __( 'Content width' ) }
 							labelPosition="top"
-							__unstableInputWidth="80px"
 							value={ contentSize || wideSize || '' }
 							onChange={ ( nextWidth ) => {
 								nextWidth =
@@ -86,14 +93,16 @@ export default {
 								} );
 							} }
 							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ alignNone } />
+								</InputControlPrefixWrapper>
+							}
 						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
 						<UnitControl
-							label={ __( 'Wide' ) }
+							__next40pxDefaultSize
+							label={ __( 'Wide width' ) }
 							labelPosition="top"
-							__unstableInputWidth="80px"
 							value={ wideSize || contentSize || '' }
 							onChange={ ( nextWidth ) => {
 								nextWidth =
@@ -106,36 +115,62 @@ export default {
 								} );
 							} }
 							units={ units }
+							prefix={
+								<InputControlPrefixWrapper variant="icon">
+									<Icon icon={ stretchWide } />
+								</InputControlPrefixWrapper>
+							}
 						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
-				<ToggleGroupControl
-					label={ __( 'Justification' ) }
-					value={ justifyContent }
-					onChange={ onJustificationChange }
-				>
-					{ justificationOptions.map( ( { value, icon, label } ) => {
-						return (
-							<ToggleGroupControlOptionIcon
-								key={ value }
-								value={ value }
-								icon={ icon }
-								label={ label }
-							/>
-						);
-					} ) }
-				</ToggleGroupControl>
-			</>
+						<p className="block-editor-hooks__layout-constrained-helptext">
+							{ __(
+								'Customize the width for all elements that are assigned to the center or wide columns.'
+							) }
+						</p>
+					</>
+				) }
+				{ allowJustification && (
+					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Justification' ) }
+						value={ justifyContent }
+						onChange={ onJustificationChange }
+					>
+						{ justificationOptions.map(
+							( { value, icon, label } ) => {
+								return (
+									<ToggleGroupControlOptionIcon
+										key={ value }
+										value={ value }
+										icon={ icon }
+										label={ label }
+									/>
+								);
+							}
+						) }
+					</ToggleGroupControl>
+				) }
+			</VStack>
 		);
 	},
-	toolBarControls: function DefaultLayoutToolbarControls() {
-		return null;
+	toolBarControls: function DefaultLayoutToolbarControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport,
+	} ) {
+		const { allowJustification = true } = layoutBlockSupport;
+
+		if ( ! allowJustification ) {
+			return null;
+		}
+		return (
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DefaultLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+			</BlockControls>
+		);
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -143,7 +178,7 @@ export default {
 		style,
 		blockName,
 		hasBlockGapSupport,
-		layoutDefinitions,
+		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
 		const { contentSize, wideSize, justifyContent } = layout;
 		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
@@ -205,15 +240,23 @@ export default {
 			const paddingValues = getCSSRules( style );
 			paddingValues.forEach( ( rule ) => {
 				if ( rule.key === 'paddingRight' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingRightValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
+						margin-right: calc(${ paddingRightValue } * -1);
 					}
 					`;
 				} else if ( rule.key === 'paddingLeft' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingLeftValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
+						margin-left: calc(${ paddingLeftValue } * -1);
 					}
 					`;
 				}
@@ -266,3 +309,27 @@ export default {
 		return alignments;
 	},
 };
+
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+function DefaultLayoutJustifyContentControl( { layout, onChange } ) {
+	const { justifyContent = 'center' } = layout;
+	const onJustificationChange = ( value ) => {
+		onChange( {
+			...layout,
+			justifyContent: value,
+		} );
+	};
+	const allowedControls = [ 'left', 'center', 'right' ];
+
+	return (
+		<JustifyContentControl
+			allowedControls={ allowedControls }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			popoverProps={ POPOVER_PROPS }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/layouts/definitions.js b/packages/block-editor/src/layouts/definitions.js
new file mode 100644
index 00000000000000..a5c6d431c50f20
--- /dev/null
+++ b/packages/block-editor/src/layouts/definitions.js
@@ -0,0 +1,174 @@
+// Layout definitions keyed by layout type.
+// Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.
+// If making changes or additions to layout definitions, be sure to update the corresponding PHP definitions in
+// `block-supports/layout.php` so that the server-side and client-side definitions match.
+export const LAYOUT_DEFINITIONS = {
+	default: {
+		name: 'default',
+		slug: 'flow',
+		className: 'is-layout-flow',
+		baseStyles: [
+			{
+				selector: ' > .alignleft',
+				rules: {
+					float: 'left',
+					'margin-inline-start': '0',
+					'margin-inline-end': '2em',
+				},
+			},
+			{
+				selector: ' > .alignright',
+				rules: {
+					float: 'right',
+					'margin-inline-start': '2em',
+					'margin-inline-end': '0',
+				},
+			},
+			{
+				selector: ' > .aligncenter',
+				rules: {
+					'margin-left': 'auto !important',
+					'margin-right': 'auto !important',
+				},
+			},
+		],
+		spacingStyles: [
+			{
+				selector: ' > :first-child',
+				rules: {
+					'margin-block-start': '0',
+				},
+			},
+			{
+				selector: ' > :last-child',
+				rules: {
+					'margin-block-end': '0',
+				},
+			},
+			{
+				selector: ' > *',
+				rules: {
+					'margin-block-start': null,
+					'margin-block-end': '0',
+				},
+			},
+		],
+	},
+	constrained: {
+		name: 'constrained',
+		slug: 'constrained',
+		className: 'is-layout-constrained',
+		baseStyles: [
+			{
+				selector: ' > .alignleft',
+				rules: {
+					float: 'left',
+					'margin-inline-start': '0',
+					'margin-inline-end': '2em',
+				},
+			},
+			{
+				selector: ' > .alignright',
+				rules: {
+					float: 'right',
+					'margin-inline-start': '2em',
+					'margin-inline-end': '0',
+				},
+			},
+			{
+				selector: ' > .aligncenter',
+				rules: {
+					'margin-left': 'auto !important',
+					'margin-right': 'auto !important',
+				},
+			},
+			{
+				selector:
+					' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',
+				rules: {
+					'max-width': 'var(--wp--style--global--content-size)',
+					'margin-left': 'auto !important',
+					'margin-right': 'auto !important',
+				},
+			},
+			{
+				selector: ' > .alignwide',
+				rules: {
+					'max-width': 'var(--wp--style--global--wide-size)',
+				},
+			},
+		],
+		spacingStyles: [
+			{
+				selector: ' > :first-child',
+				rules: {
+					'margin-block-start': '0',
+				},
+			},
+			{
+				selector: ' > :last-child',
+				rules: {
+					'margin-block-end': '0',
+				},
+			},
+			{
+				selector: ' > *',
+				rules: {
+					'margin-block-start': null,
+					'margin-block-end': '0',
+				},
+			},
+		],
+	},
+	flex: {
+		name: 'flex',
+		slug: 'flex',
+		className: 'is-layout-flex',
+		displayMode: 'flex',
+		baseStyles: [
+			{
+				selector: '',
+				rules: {
+					'flex-wrap': 'wrap',
+					'align-items': 'center',
+				},
+			},
+			{
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
+				rules: {
+					margin: '0',
+				},
+			},
+		],
+		spacingStyles: [
+			{
+				selector: '',
+				rules: {
+					gap: null,
+				},
+			},
+		],
+	},
+	grid: {
+		name: 'grid',
+		slug: 'grid',
+		className: 'is-layout-grid',
+		displayMode: 'grid',
+		baseStyles: [
+			{
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
+				rules: {
+					margin: '0',
+				},
+			},
+		],
+		spacingStyles: [
+			{
+				selector: '',
+				rules: {
+					gap: null,
+				},
+			},
+		],
+	},
+};
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 948eceb6624d60..f57ccbde466169 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -7,11 +7,11 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
 import {
-	Button,
 	ToggleControl,
 	Flex,
 	FlexItem,
@@ -30,6 +30,7 @@ import {
 	BlockVerticalAlignmentControl,
 } from '../components';
 import { shouldSkipSerialization } from '../hooks/utils';
+import { LAYOUT_DEFINITIONS } from './definitions';
 
 // Used with the default, horizontal flex orientation.
 const justifyContentMap = {
@@ -44,12 +45,15 @@ const alignItemsMap = {
 	left: 'flex-start',
 	right: 'flex-end',
 	center: 'center',
+	stretch: 'stretch',
 };
 
 const verticalAlignmentMap = {
 	top: 'flex-start',
 	center: 'center',
 	bottom: 'flex-end',
+	stretch: 'stretch',
+	'space-between': 'space-between',
 };
 
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
@@ -62,24 +66,27 @@ export default {
 		onChange,
 		layoutBlockSupport = {},
 	} ) {
-		const { allowOrientation = true } = layoutBlockSupport;
+		const { allowOrientation = true, allowJustification = true } =
+			layoutBlockSupport;
 		return (
 			<>
 				<Flex>
-					<FlexItem>
-						<FlexLayoutJustifyContentControl
-							layout={ layout }
-							onChange={ onChange }
-						/>
-					</FlexItem>
-					<FlexItem>
-						{ allowOrientation && (
+					{ allowJustification && (
+						<FlexItem>
+							<FlexLayoutJustifyContentControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						</FlexItem>
+					) }
+					{ allowOrientation && (
+						<FlexItem>
 							<OrientationControl
 								layout={ layout }
 								onChange={ onChange }
 							/>
-						) }
-					</FlexItem>
+						</FlexItem>
+					) }
 				</Flex>
 				<FlexWrapControl layout={ layout } onChange={ onChange } />
 			</>
@@ -90,25 +97,28 @@ export default {
 		onChange,
 		layoutBlockSupport,
 	} ) {
-		if ( layoutBlockSupport?.allowSwitching ) {
+		const { allowVerticalAlignment = true, allowJustification = true } =
+			layoutBlockSupport;
+
+		if ( ! allowJustification && ! allowVerticalAlignment ) {
 			return null;
 		}
-		const { allowVerticalAlignment = true } = layoutBlockSupport;
+
 		return (
 			<BlockControls group="block" __experimentalShareWithChildBlocks>
-				<FlexLayoutJustifyContentControl
-					layout={ layout }
-					onChange={ onChange }
-					isToolbar
-				/>
-				{ allowVerticalAlignment &&
-					layout?.orientation !== 'vertical' && (
-						<FlexLayoutVerticalAlignmentControl
-							layout={ layout }
-							onChange={ onChange }
-							isToolbar
-						/>
-					) }
+				{ allowJustification && (
+					<FlexLayoutJustifyContentControl
+						layout={ layout }
+						onChange={ onChange }
+						isToolbar
+					/>
+				) }
+				{ allowVerticalAlignment && (
+					<FlexLayoutVerticalAlignmentControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
 			</BlockControls>
 		);
 	},
@@ -118,7 +128,7 @@ export default {
 		style,
 		blockName,
 		hasBlockGapSupport,
-		layoutDefinitions,
+		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
 		const { orientation = 'horizontal' } = layout;
 
@@ -153,6 +163,9 @@ export default {
 				rules.push( `justify-content: ${ justifyContent }` );
 			}
 		} else {
+			if ( verticalAlignment ) {
+				rules.push( `justify-content: ${ verticalAlignment }` );
+			}
 			rules.push( 'flex-direction: column' );
 			rules.push( `align-items: ${ alignItems }` );
 		}
@@ -183,12 +196,15 @@ export default {
 	},
 };
 
-function FlexLayoutVerticalAlignmentControl( {
-	layout,
-	onChange,
-	isToolbar = false,
-} ) {
-	const { verticalAlignment = verticalAlignmentMap.center } = layout;
+function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
+	const { orientation = 'horizontal' } = layout;
+
+	const defaultVerticalAlignment =
+		orientation === 'horizontal'
+			? verticalAlignmentMap.center
+			: verticalAlignmentMap.top;
+
+	const { verticalAlignment = defaultVerticalAlignment } = layout;
 
 	const onVerticalAlignmentChange = ( value ) => {
 		onChange( {
@@ -196,50 +212,24 @@ function FlexLayoutVerticalAlignmentControl( {
 			verticalAlignment: value,
 		} );
 	};
-	if ( isToolbar ) {
-		return (
-			<BlockVerticalAlignmentControl
-				onChange={ onVerticalAlignmentChange }
-				value={ verticalAlignment }
-			/>
-		);
-	}
-
-	const verticalAlignmentOptions = [
-		{
-			value: 'flex-start',
-			label: __( 'Align items top' ),
-		},
-		{
-			value: 'center',
-			label: __( 'Align items center' ),
-		},
-		{
-			value: 'flex-end',
-			label: __( 'Align items bottom' ),
-		},
-	];
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
-			<legend>{ __( 'Vertical alignment' ) }</legend>
-			<div>
-				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
-					return (
-						<Button
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ verticalAlignment === value }
-							onClick={ () => onVerticalAlignmentChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<BlockVerticalAlignmentControl
+			onChange={ onVerticalAlignmentChange }
+			value={ verticalAlignment }
+			controls={
+				orientation === 'horizontal'
+					? [ 'top', 'center', 'bottom', 'stretch' ]
+					: [ 'top', 'center', 'bottom', 'space-between' ]
+			}
+		/>
 	);
 }
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,
@@ -255,6 +245,8 @@ function FlexLayoutJustifyContentControl( {
 	const allowedControls = [ 'left', 'center', 'right' ];
 	if ( orientation === 'horizontal' ) {
 		allowedControls.push( 'space-between' );
+	} else {
+		allowedControls.push( 'stretch' );
 	}
 	if ( isToolbar ) {
 		return (
@@ -262,10 +254,7 @@ function FlexLayoutJustifyContentControl( {
 				allowedControls={ allowedControls }
 				value={ justifyContent }
 				onChange={ onJustificationChange }
-				popoverProps={ {
-					position: 'bottom right',
-					variant: 'toolbar',
-				} }
+				popoverProps={ POPOVER_PROPS }
 			/>
 		);
 	}
@@ -293,10 +282,18 @@ function FlexLayoutJustifyContentControl( {
 			icon: justifySpaceBetween,
 			label: __( 'Space between items' ),
 		} );
+	} else {
+		justificationOptions.push( {
+			value: 'stretch',
+			icon: justifyStretch,
+			label: __( 'Stretch items' ),
+		} );
 	}
 
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
 			onChange={ onJustificationChange }
@@ -320,6 +317,7 @@ function FlexWrapControl( { layout, onChange } ) {
 	const { flexWrap = 'wrap' } = layout;
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label={ __( 'Allow to wrap to multiple lines' ) }
 			onChange={ ( value ) => {
 				onChange( {
@@ -333,27 +331,53 @@ function FlexWrapControl( { layout, onChange } ) {
 }
 
 function OrientationControl( { layout, onChange } ) {
-	const { orientation = 'horizontal' } = layout;
+	const {
+		orientation = 'horizontal',
+		verticalAlignment,
+		justifyContent,
+	} = layout;
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }
-			onChange={ ( value ) =>
-				onChange( {
+			onChange={ ( value ) => {
+				// Make sure the vertical alignment and justification are compatible with the new orientation.
+				let newVerticalAlignment = verticalAlignment;
+				let newJustification = justifyContent;
+				if ( value === 'horizontal' ) {
+					if ( verticalAlignment === 'space-between' ) {
+						newVerticalAlignment = 'center';
+					}
+					if ( justifyContent === 'stretch' ) {
+						newJustification = 'left';
+					}
+				} else {
+					if ( verticalAlignment === 'stretch' ) {
+						newVerticalAlignment = 'top';
+					}
+					if ( justifyContent === 'space-between' ) {
+						newJustification = 'left';
+					}
+				}
+				return onChange( {
 					...layout,
 					orientation: value,
-				} )
-			}
+					verticalAlignment: newVerticalAlignment,
+					justifyContent: newJustification,
+				} );
+			} }
 		>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				value={ 'horizontal' }
+				value="horizontal"
 				label={ __( 'Horizontal' ) }
 			/>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				value={ 'vertical' }
+				value="vertical"
 				label={ __( 'Vertical' ) }
 			/>
 		</ToggleGroupControl>
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index ecc6779b9128dd..de76e430eac888 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
+import { LAYOUT_DEFINITIONS } from './definitions';
 
 export default {
 	name: 'default',
@@ -24,7 +25,7 @@ export default {
 		style,
 		blockName,
 		hasBlockGapSupport,
-		layoutDefinitions,
+		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
 		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
 
@@ -56,7 +57,7 @@ export default {
 	getOrientation() {
 		return 'vertical';
 	},
-	getAlignments( layout ) {
+	getAlignments( layout, isBlockBasedTheme ) {
 		const alignmentInfo = getAlignmentsInfo( layout );
 		if ( layout.alignments !== undefined ) {
 			if ( ! layout.alignments.includes( 'none' ) ) {
@@ -67,7 +68,6 @@ export default {
 				info: alignmentInfo[ alignment ],
 			} ) );
 		}
-		const { contentSize, wideSize } = layout;
 
 		const alignments = [
 			{ name: 'left' },
@@ -75,12 +75,19 @@ export default {
 			{ name: 'right' },
 		];
 
-		if ( contentSize ) {
-			alignments.unshift( { name: 'full' } );
-		}
+		// This is for backwards compatibility with hybrid themes.
+		if ( ! isBlockBasedTheme ) {
+			const { contentSize, wideSize } = layout;
+			if ( contentSize ) {
+				alignments.unshift( { name: 'full' } );
+			}
 
-		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+			if ( wideSize ) {
+				alignments.unshift( {
+					name: 'wide',
+					info: alignmentInfo.wide,
+				} );
+			}
 		}
 
 		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
new file mode 100644
index 00000000000000..f1573b5c949603
--- /dev/null
+++ b/packages/block-editor/src/layouts/grid.js
@@ -0,0 +1,485 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	BaseControl,
+	Flex,
+	FlexItem,
+	RangeControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { appendSelectors, getBlockGapCSS } from './utils';
+import { getGapCSSValue } from '../hooks/gap';
+import { shouldSkipSerialization } from '../hooks/utils';
+import { LAYOUT_DEFINITIONS } from './definitions';
+
+const RANGE_CONTROL_MAX_VALUES = {
+	px: 600,
+	'%': 100,
+	vw: 100,
+	vh: 100,
+	em: 38,
+	rem: 38,
+	svw: 100,
+	lvw: 100,
+	dvw: 100,
+	svh: 100,
+	lvh: 100,
+	dvh: 100,
+	vi: 100,
+	svi: 100,
+	lvi: 100,
+	dvi: 100,
+	vb: 100,
+	svb: 100,
+	lvb: 100,
+	dvb: 100,
+	vmin: 100,
+	svmin: 100,
+	lvmin: 100,
+	dvmin: 100,
+	vmax: 100,
+	svmax: 100,
+	lvmax: 100,
+	dvmax: 100,
+};
+
+const units = [
+	{ value: 'px', label: 'px', default: 0 },
+	{ value: 'rem', label: 'rem', default: 0 },
+	{ value: 'em', label: 'em', default: 0 },
+];
+
+export default {
+	name: 'grid',
+	label: __( 'Grid' ),
+	inspectorControls: function GridLayoutInspectorControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport = {},
+	} ) {
+		const { allowSizingOnChildren = false } = layoutBlockSupport;
+
+		// In the experiment we want to also show column control in Auto mode, and
+		// the minimum width control in Manual mode.
+		const showColumnsControl =
+			window.__experimentalEnableGridInteractivity ||
+			!! layout?.columnCount;
+		const showMinWidthControl =
+			window.__experimentalEnableGridInteractivity ||
+			! layout?.columnCount;
+		return (
+			<>
+				<GridLayoutTypeControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+				<VStack spacing={ 4 }>
+					{ showColumnsControl && (
+						<GridLayoutColumnsAndRowsControl
+							layout={ layout }
+							onChange={ onChange }
+							allowSizingOnChildren={ allowSizingOnChildren }
+						/>
+					) }
+					{ showMinWidthControl && (
+						<GridLayoutMinimumWidthControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					) }
+				</VStack>
+			</>
+		);
+	},
+	toolBarControls: function GridLayoutToolbarControls() {
+		return null;
+	},
+	getLayoutStyle: function getLayoutStyle( {
+		selector,
+		layout,
+		style,
+		blockName,
+		hasBlockGapSupport,
+		layoutDefinitions = LAYOUT_DEFINITIONS,
+	} ) {
+		const {
+			minimumColumnWidth = null,
+			columnCount = null,
+			rowCount = null,
+		} = layout;
+
+		// Check that the grid layout attributes are of the correct type, so that we don't accidentally
+		// write code that stores a string attribute instead of a number.
+		if ( process.env.NODE_ENV === 'development' ) {
+			if (
+				minimumColumnWidth &&
+				typeof minimumColumnWidth !== 'string'
+			) {
+				throw new Error( 'minimumColumnWidth must be a string' );
+			}
+			if ( columnCount && typeof columnCount !== 'number' ) {
+				throw new Error( 'columnCount must be a number' );
+			}
+			if ( rowCount && typeof rowCount !== 'number' ) {
+				throw new Error( 'rowCount must be a number' );
+			}
+		}
+
+		// If a block's block.json skips serialization for spacing or spacing.blockGap,
+		// don't apply the user-defined value to the styles.
+		const blockGapValue =
+			style?.spacing?.blockGap &&
+			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
+				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
+				: undefined;
+
+		let output = '';
+		const rules = [];
+
+		if ( minimumColumnWidth && columnCount > 0 ) {
+			const maxValue = `max(${ minimumColumnWidth }, ( 100% - (${
+				blockGapValue || '1.2rem'
+			}*${ columnCount - 1 }) ) / ${ columnCount })`;
+			rules.push(
+				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,
+				`container-type: inline-size`
+			);
+			if ( rowCount ) {
+				rules.push(
+					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
+				);
+			}
+		} else if ( columnCount ) {
+			rules.push(
+				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
+			);
+			if ( rowCount ) {
+				rules.push(
+					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
+				);
+			}
+		} else {
+			rules.push(
+				`grid-template-columns: repeat(auto-fill, minmax(min(${
+					minimumColumnWidth || '12rem'
+				}, 100%), 1fr))`,
+				'container-type: inline-size'
+			);
+		}
+
+		if ( rules.length ) {
+			// Reason to disable: the extra line breaks added by prettier mess with the unit tests.
+			// eslint-disable-next-line prettier/prettier
+			output = `${ appendSelectors( selector ) } { ${ rules.join(
+				'; '
+			) }; }`;
+		}
+
+		// Output blockGap styles based on rules contained in layout definitions in theme.json.
+		if ( hasBlockGapSupport && blockGapValue ) {
+			output += getBlockGapCSS(
+				selector,
+				layoutDefinitions,
+				'grid',
+				blockGapValue
+			);
+		}
+		return output;
+	},
+	getOrientation() {
+		return 'horizontal';
+	},
+	getAlignments() {
+		return [];
+	},
+};
+
+// Enables setting minimum width of grid items.
+function GridLayoutMinimumWidthControl( { layout, onChange } ) {
+	const { minimumColumnWidth, columnCount, isManualPlacement } = layout;
+	const defaultValue = isManualPlacement || columnCount ? null : '12rem';
+	const value = minimumColumnWidth || defaultValue;
+	const [ quantity, unit = 'rem' ] =
+		parseQuantityAndUnitFromRawValue( value );
+
+	const handleSliderChange = ( next ) => {
+		onChange( {
+			...layout,
+			minimumColumnWidth: [ next, unit ].join( '' ),
+		} );
+	};
+
+	// Mostly copied from HeightControl.
+	const handleUnitChange = ( newUnit ) => {
+		// Attempt to smooth over differences between currentUnit and newUnit.
+		// This should slightly improve the experience of switching between unit types.
+		let newValue;
+
+		if ( [ 'em', 'rem' ].includes( newUnit ) && unit === 'px' ) {
+			// Convert pixel value to an approximate of the new unit, assuming a root size of 16px.
+			newValue = ( quantity / 16 ).toFixed( 2 ) + newUnit;
+		} else if ( [ 'em', 'rem' ].includes( unit ) && newUnit === 'px' ) {
+			// Convert to pixel value assuming a root size of 16px.
+			newValue = Math.round( quantity * 16 ) + newUnit;
+		}
+
+		onChange( {
+			...layout,
+			minimumColumnWidth: newValue,
+		} );
+	};
+
+	return (
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Minimum column width' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<UnitControl
+						size="__unstable-large"
+						onChange={ ( newValue ) => {
+							onChange( {
+								...layout,
+								minimumColumnWidth:
+									newValue === '' ? undefined : newValue,
+							} );
+						} }
+						onUnitChange={ handleUnitChange }
+						value={ value }
+						units={ units }
+						min={ 0 }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						onChange={ handleSliderChange }
+						value={ quantity || 0 }
+						min={ 0 }
+						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
+						withInputField={ false }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}
+
+// Enables setting number of grid columns
+function GridLayoutColumnsAndRowsControl( {
+	layout,
+	onChange,
+	allowSizingOnChildren,
+} ) {
+	// If the grid interactivity experiment is enabled, allow unsetting the column count.
+	const defaultColumnCount = window.__experimentalEnableGridInteractivity
+		? undefined
+		: 3;
+	const {
+		columnCount = defaultColumnCount,
+		rowCount,
+		isManualPlacement,
+	} = layout;
+
+	return (
+		<>
+			<fieldset>
+				{ ( ! window.__experimentalEnableGridInteractivity ||
+					! isManualPlacement ) && (
+					<BaseControl.VisualLabel as="legend">
+						{ __( 'Columns' ) }
+					</BaseControl.VisualLabel>
+				) }
+				<Flex gap={ 4 }>
+					<FlexItem isBlock>
+						<NumberControl
+							size="__unstable-large"
+							onChange={ ( value ) => {
+								if (
+									window.__experimentalEnableGridInteractivity
+								) {
+									// Allow unsetting the column count when in auto mode.
+									const defaultNewColumnCount =
+										isManualPlacement ? 1 : undefined;
+									const newColumnCount =
+										value === '' || value === '0'
+											? defaultNewColumnCount
+											: parseInt( value, 10 );
+									onChange( {
+										...layout,
+										columnCount: newColumnCount,
+									} );
+								} else {
+									// Don't allow unsetting the column count.
+									const newColumnCount =
+										value === '' || value === '0'
+											? 1
+											: parseInt( value, 10 );
+									onChange( {
+										...layout,
+										columnCount: newColumnCount,
+									} );
+								}
+							} }
+							value={ columnCount }
+							min={ 1 }
+							label={ __( 'Columns' ) }
+							hideLabelFromVision={
+								! window.__experimentalEnableGridInteractivity ||
+								! isManualPlacement
+							}
+						/>
+					</FlexItem>
+
+					<FlexItem isBlock>
+						{ window.__experimentalEnableGridInteractivity &&
+						allowSizingOnChildren &&
+						isManualPlacement ? (
+							<NumberControl
+								size="__unstable-large"
+								onChange={ ( value ) => {
+									// Don't allow unsetting the row count.
+									const newRowCount =
+										value === '' || value === '0'
+											? 1
+											: parseInt( value, 10 );
+									onChange( {
+										...layout,
+										rowCount: newRowCount,
+									} );
+								} }
+								value={ rowCount }
+								min={ 1 }
+								label={ __( 'Rows' ) }
+							/>
+						) : (
+							<RangeControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								value={ columnCount ?? 1 }
+								onChange={ ( value ) =>
+									onChange( {
+										...layout,
+										columnCount:
+											value === '' || value === '0'
+												? 1
+												: value,
+									} )
+								}
+								min={ 1 }
+								max={ 16 }
+								withInputField={ false }
+								label={ __( 'Columns' ) }
+								hideLabelFromVision
+							/>
+						) }
+					</FlexItem>
+				</Flex>
+			</fieldset>
+		</>
+	);
+}
+
+// Enables switching between grid types
+function GridLayoutTypeControl( { layout, onChange } ) {
+	const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =
+		layout;
+
+	/**
+	 * When switching, temporarily save any custom values set on the
+	 * previous type so we can switch back without loss.
+	 */
+	const [ tempColumnCount, setTempColumnCount ] = useState(
+		columnCount || 3
+	);
+	const [ tempRowCount, setTempRowCount ] = useState( rowCount );
+	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
+		minimumColumnWidth || '12rem'
+	);
+
+	const gridPlacement =
+		isManualPlacement ||
+		( !! columnCount && ! window.__experimentalEnableGridInteractivity )
+			? 'manual'
+			: 'auto';
+
+	const onChangeType = ( value ) => {
+		if ( value === 'manual' ) {
+			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
+		} else {
+			setTempColumnCount( columnCount || 3 );
+			setTempRowCount( rowCount );
+		}
+		onChange( {
+			...layout,
+			columnCount: value === 'manual' ? tempColumnCount : null,
+			rowCount:
+				value === 'manual' &&
+				window.__experimentalEnableGridInteractivity
+					? tempRowCount
+					: undefined,
+			isManualPlacement:
+				value === 'manual' &&
+				window.__experimentalEnableGridInteractivity
+					? true
+					: undefined,
+			minimumColumnWidth:
+				value === 'auto' ? tempMinimumColumnWidth : null,
+		} );
+	};
+
+	const helpText =
+		gridPlacement === 'manual'
+			? __(
+					'Grid items can be manually placed in any position on the grid.'
+			  )
+			: __(
+					'Grid items are placed automatically depending on their order.'
+			  );
+
+	return (
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Grid item position' ) }
+			value={ gridPlacement }
+			onChange={ onChangeType }
+			isBlock
+			help={
+				window.__experimentalEnableGridInteractivity
+					? helpText
+					: undefined
+			}
+		>
+			<ToggleGroupControlOption
+				key="auto"
+				value="auto"
+				label={ __( 'Auto' ) }
+			/>
+			<ToggleGroupControlOption
+				key="manual"
+				value="manual"
+				label={ __( 'Manual' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js
index 4ec1ff6f331911..1d30ac3ad36833 100644
--- a/packages/block-editor/src/layouts/index.js
+++ b/packages/block-editor/src/layouts/index.js
@@ -4,8 +4,9 @@
 import flex from './flex';
 import flow from './flow';
 import constrained from './constrained';
+import grid from './grid';
 
-const layoutTypes = [ flow, flex, constrained ];
+const layoutTypes = [ flow, flex, constrained, grid ];
 
 /**
  * Retrieves a layout type by name.
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
new file mode 100644
index 00000000000000..ab7b279aaae78c
--- /dev/null
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import grid from '../grid';
+
+describe( 'getLayoutStyle', () => {
+	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
+		const expected = `.my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { columnCount: 3 },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );
diff --git a/packages/block-editor/src/layouts/test/utils.js b/packages/block-editor/src/layouts/test/utils.js
index 529e1bf74e24c9..09cfef8f48f8ff 100644
--- a/packages/block-editor/src/layouts/test/utils.js
+++ b/packages/block-editor/src/layouts/test/utils.js
@@ -37,7 +37,7 @@ const layoutDefinitions = {
 describe( 'getBlockGapCSS', () => {
 	it( 'should output default blockGap rules', () => {
 		const expected =
-			'.editor-styles-wrapper .my-container > * { margin-block-start: 0; margin-block-end: 0; }.editor-styles-wrapper .my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
+			'.my-container > * { margin-block-start: 0; margin-block-end: 0; }.my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -50,7 +50,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should output flex blockGap rules', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 3em; }';
+		const expected = '.my-container { gap: 3em; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -75,15 +75,10 @@ describe( 'getBlockGapCSS', () => {
 		expect( result ).toBe( expected );
 	} );
 
-	it( 'should return an empty string if layout definitions cannot be found', () => {
+	it( 'should return an empty string if layout definitions is null', () => {
 		const expected = '';
 
-		const result = getBlockGapCSS(
-			'.my-container',
-			undefined,
-			'flex',
-			'3em'
-		);
+		const result = getBlockGapCSS( '.my-container', null, 'flex', '3em' );
 
 		expect( result ).toBe( expected );
 	} );
@@ -102,7 +97,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should treat a blockGap string containing 0 as a valid value', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 0; }';
+		const expected = '.my-container { gap: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -118,21 +113,19 @@ describe( 'getBlockGapCSS', () => {
 describe( 'appendSelectors', () => {
 	it( 'should append a subselector without an appended selector', () => {
 		expect( appendSelectors( '.original-selector' ) ).toBe(
-			'.editor-styles-wrapper .original-selector'
+			'.original-selector'
 		);
 	} );
 
 	it( 'should append a subselector to a single selector', () => {
 		expect( appendSelectors( '.original-selector', '.appended' ) ).toBe(
-			'.editor-styles-wrapper .original-selector .appended'
+			'.original-selector .appended'
 		);
 	} );
 
 	it( 'should append a subselector to multiple selectors', () => {
 		expect(
 			appendSelectors( '.first-selector,.second-selector', '.appended' )
-		).toBe(
-			'.editor-styles-wrapper .first-selector .appended,.editor-styles-wrapper .second-selector .appended'
-		);
+		).toBe( '.first-selector .appended,.second-selector .appended' );
 	} );
 } );
diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js
index 11996d4715312d..15a8d2cef83732 100644
--- a/packages/block-editor/src/layouts/utils.js
+++ b/packages/block-editor/src/layouts/utils.js
@@ -3,6 +3,11 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { LAYOUT_DEFINITIONS } from './definitions';
+
 /**
  * Utility to generate the proper CSS selector for layout styles.
  *
@@ -12,19 +17,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * @return {string} - CSS selector.
  */
 export function appendSelectors( selectors, append = '' ) {
-	// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
-	// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
-	// it's used to reset the default margin added by wp-admin to paragraphs
-	// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
-	// When the post editor is fully iframed, this extra classname could be removed.
-
 	return selectors
 		.split( ',' )
 		.map(
 			( subselector ) =>
-				`.editor-styles-wrapper ${ subselector }${
-					append ? ` ${ append }` : ''
-				}`
+				`${ subselector }${ append ? ` ${ append }` : '' }`
 		)
 		.join( ',' );
 }
@@ -35,14 +32,14 @@ export function appendSelectors( selectors, append = '' ) {
  * with the provided `blockGapValue`.
  *
  * @param {string} selector          The CSS selector to target for the generated rules.
- * @param {Object} layoutDefinitions Layout definitions object from theme.json.
+ * @param {Object} layoutDefinitions Layout definitions object.
  * @param {string} layoutType        The layout type (e.g. `default` or `flex`).
  * @param {string} blockGapValue     The current blockGap value to be applied.
  * @return {string} The generated CSS rules.
  */
 export function getBlockGapCSS(
 	selector,
-	layoutDefinitions,
+	layoutDefinitions = LAYOUT_DEFINITIONS,
 	layoutType,
 	blockGapValue
 ) {
@@ -83,10 +80,11 @@ export function getBlockGapCSS(
  * @return {Object} An object with contextual info per alignment.
  */
 export function getAlignmentsInfo( layout ) {
-	const { contentSize, wideSize } = layout;
+	const { contentSize, wideSize, type = 'default' } = layout;
 	const alignmentInfo = {};
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
-	if ( sizeRegex.test( contentSize ) ) {
+	const sizeRegex =
+		/^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
+	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
 		// translators: %s: container size (i.e. 600px etc)
 		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
 	}
diff --git a/packages/block-editor/src/lock-unlock.ts b/packages/block-editor/src/lock-unlock.ts
new file mode 100644
index 00000000000000..51929a5920b11b
--- /dev/null
+++ b/packages/block-editor/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/block-editor'
+	);
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
new file mode 100644
index 00000000000000..21b9f4bca7fc3d
--- /dev/null
+++ b/packages/block-editor/src/private-apis.js
@@ -0,0 +1,100 @@
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
+import ResizableBoxPopover from './components/resizable-box-popover';
+import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
+import {
+	extractWords,
+	getNormalizedSearchTerms,
+	normalizeString,
+} from './components/inserter/search-items';
+import { PrivateListView } from './components/list-view';
+import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
+import { cleanEmptyObject } from './hooks/utils';
+import BlockQuickNavigation from './components/block-quick-navigation';
+import { LayoutStyle } from './components/block-list/layout';
+import BlockManager from './components/block-manager';
+import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
+import {
+	setBackgroundStyleDefaults,
+	useLayoutClasses,
+	useLayoutStyles,
+	__unstableBlockStyleVariationOverridesWithConfig,
+	useZoomOut,
+} from './hooks';
+import DimensionsTool from './components/dimensions-tool';
+import ResolutionTool from './components/resolution-tool';
+import TextAlignmentControl from './components/text-alignment-control';
+import { usesContextKey } from './components/rich-text/format-edit';
+import { ExperimentalBlockCanvas } from './components/block-canvas';
+import { getDuotoneFilter } from './components/duotone/utils';
+import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
+import {
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+	sectionRootClientIdKey,
+} from './store/private-keys';
+import { requiresWrapperOnCopy } from './components/writing-flow/utils';
+import { PrivateRichText } from './components/rich-text/';
+import { PrivateBlockPopover } from './components/block-popover';
+import { PrivateInserterLibrary } from './components/inserter/library';
+import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
+import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
+import useBlockDisplayTitle from './components/block-title/use-block-display-title';
+import TabbedSidebar from './components/tabbed-sidebar';
+import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
+import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+/**
+ * Private @wordpress/block-editor APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	...globalStyles,
+	ExperimentalBlockCanvas,
+	ExperimentalBlockEditorProvider,
+	getDuotoneFilter,
+	getRichTextValues,
+	PrivateQuickInserter,
+	extractWords,
+	getNormalizedSearchTerms,
+	normalizeString,
+	PrivateListView,
+	ResizableBoxPopover,
+	useHasBlockToolbar,
+	cleanEmptyObject,
+	BlockQuickNavigation,
+	LayoutStyle,
+	BlockManager,
+	BlockRemovalWarningModal,
+	useLayoutClasses,
+	useLayoutStyles,
+	DimensionsTool,
+	ResolutionTool,
+	TabbedSidebar,
+	TextAlignmentControl,
+	usesContextKey,
+	useFlashEditableBlocks,
+	useZoomOut,
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+	selectBlockPatternsKey,
+	requiresWrapperOnCopy,
+	PrivateRichText,
+	PrivateInserterLibrary,
+	reusableBlocksSelectKey,
+	PrivateBlockPopover,
+	PrivatePublishDateTimePicker,
+	useSpacingSizes,
+	useBlockDisplayTitle,
+	__unstableBlockStyleVariationOverridesWithConfig,
+	setBackgroundStyleDefaults,
+	sectionRootClientIdKey,
+	CommentIconSlotFill,
+	CommentIconToolbarSlotFill,
+} );
diff --git a/packages/block-editor/src/private-apis.native.js b/packages/block-editor/src/private-apis.native.js
new file mode 100644
index 00000000000000..f99d523933106b
--- /dev/null
+++ b/packages/block-editor/src/private-apis.native.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import * as globalStyles from './components/global-styles';
+import { ExperimentalBlockEditorProvider } from './components/provider';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
+import { lock } from './lock-unlock';
+import { PrivateRichText } from './components/rich-text/';
+
+/**
+ * Private @wordpress/block-editor APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	...globalStyles,
+	ExperimentalBlockEditorProvider,
+	getRichTextValues,
+	PrivateRichText,
+} );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e1c88c2bd99b49..6edc5cb4da0393 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1,3 +1,4 @@
+/* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
 /**
  * WordPress dependencies
  */
@@ -11,53 +12,35 @@ import {
 	hasBlockSupport,
 	switchToBlockType,
 	synchronizeBlocksWithTemplate,
+	getBlockSupport,
+	isUnmodifiedDefaultBlock,
+	isUnmodifiedBlock,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { mapRichTextSettings } from './utils';
 import {
 	retrieveSelectedAttribute,
+	findRichTextAttributeKey,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
+import {
+	__experimentalUpdateSettings,
+	privateRemoveBlocks,
+} from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
-/**
- * Action which will insert a default block insert action if there
- * are no other blocks at the root of the editor. This action should be used
- * in actions which may result in no blocks remaining in the editor (removal,
- * replacement, etc).
- */
-const ensureDefaultBlock =
-	() =>
-	( { select, dispatch } ) => {
-		// To avoid a focus loss when removing the last block, assure there is
-		// always a default block if the last of the blocks have been removed.
-		const count = select.getBlockCount();
-		if ( count > 0 ) {
-			return;
-		}
-
-		// If there's an custom appender, don't insert default block.
-		// We have to remember to manually move the focus elsewhere to
-		// prevent it from being lost though.
-		const { __unstableHasCustomAppender } = select.getSettings();
-		if ( __unstableHasCustomAppender ) {
-			return;
-		}
-
-		dispatch.insertDefaultBlock();
-	};
-
 /**
  * Action that resets blocks state to the specified array of blocks, taking precedence
  * over any other content reflected as an edit in state.
@@ -74,7 +57,7 @@ export const resetBlocks =
 /**
  * Block validity is a function of blocks state (at the point of a
  * reset) and the template setting. As a compromise to its placement
- * across distinct parts of state, it is implemented here as a side-
+ * across distinct parts of state, it is implemented here as a side
  * effect of the block reset action.
  *
  * @param {Array} blocks Array of blocks.
@@ -230,18 +213,40 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 }
 
 /**
- * Yields action objects used in signalling that the block preceding the given
- * clientId should be selected.
+ * Returns an action object used in signalling that the block with the
+ * specified client ID has been hovered.
  *
  * @param {string} clientId Block client ID.
+ *
+ * @return {Object} Action object.
+ */
+export function hoverBlock( clientId ) {
+	return {
+		type: 'HOVER_BLOCK',
+		clientId,
+	};
+}
+
+/**
+ * Yields action objects used in signalling that the block preceding the given
+ * clientId (or optionally, its first parent from bottom to top)
+ * should be selected.
+ *
+ * @param {string}  clientId         Block client ID.
+ * @param {boolean} fallbackToParent If true, select the first parent if there is no previous block.
  */
 export const selectPreviousBlock =
-	( clientId ) =>
+	( clientId, fallbackToParent = false ) =>
 	( { select, dispatch } ) => {
 		const previousBlockClientId =
 			select.getPreviousBlockClientId( clientId );
 		if ( previousBlockClientId ) {
 			dispatch.selectBlock( previousBlockClientId, -1 );
+		} else if ( fallbackToParent ) {
+			const firstParentClientId = select.getBlockRootClientId( clientId );
+			if ( firstParentClientId ) {
+				dispatch.selectBlock( firstParentClientId, -1 );
+			}
 		}
 	};
 
@@ -345,36 +350,6 @@ export function toggleSelection( isSelectionEnabled = true ) {
 	};
 }
 
-function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
-	const preferredStyleVariations =
-		blockEditorSettings?.__experimentalPreferredStyleVariations?.value ??
-		{};
-	return blocks.map( ( block ) => {
-		const blockName = block.name;
-		if ( ! hasBlockSupport( blockName, 'defaultStylePicker', true ) ) {
-			return block;
-		}
-		if ( ! preferredStyleVariations[ blockName ] ) {
-			return block;
-		}
-		const className = block.attributes?.className;
-		if ( className?.includes( 'is-style-' ) ) {
-			return block;
-		}
-		const { attributes = {} } = block;
-		const blockStyle = preferredStyleVariations[ blockName ];
-		return {
-			...block,
-			attributes: {
-				...attributes,
-				className: `${
-					className || ''
-				} is-style-${ blockStyle }`.trim(),
-			},
-		};
-	} );
-}
-
 /* eslint-disable jsdoc/valid-types */
 /**
  * Action that replaces given blocks with one or more replacement blocks.
@@ -389,13 +364,10 @@ function getBlocksWithDefaultStylesApplied( blocks, blockEditorSettings ) {
  */
 export const replaceBlocks =
 	( clientIds, blocks, indexToSelect, initialPosition = 0, meta ) =>
-	( { select, dispatch } ) => {
+	( { select, dispatch, registry } ) => {
 		/* eslint-enable jsdoc/valid-types */
 		clientIds = castArray( clientIds );
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 		// Replace is valid if the new blocks can be inserted in the root block.
 		for ( let index = 0; index < blocks.length; index++ ) {
@@ -408,16 +380,22 @@ export const replaceBlocks =
 				return;
 			}
 		}
-		dispatch( {
-			type: 'REPLACE_BLOCKS',
-			clientIds,
-			blocks,
-			time: Date.now(),
-			indexToSelect,
-			initialPosition,
-			meta,
+		// We're batching these two actions because an extra `undo/redo` step can
+		// be created, based on whether we insert a default block or not.
+		registry.batch( () => {
+			dispatch( {
+				type: 'REPLACE_BLOCKS',
+				clientIds,
+				blocks,
+				time: Date.now(),
+				indexToSelect,
+				initialPosition,
+				meta,
+			} );
+			// To avoid a focus loss when removing the last block, assure there is
+			// always a default block if the last of the blocks have been removed.
+			dispatch.ensureDefaultBlock();
 		} );
-		dispatch( ensureDefaultBlock() );
 	};
 
 /**
@@ -445,7 +423,7 @@ const createOnMove =
 	( clientIds, rootClientId ) =>
 	( { select, dispatch } ) => {
 		// If one of the blocks is locked or the parent is locked, we cannot move any block.
-		const canMoveBlocks = select.canMoveBlocks( clientIds, rootClientId );
+		const canMoveBlocks = select.canMoveBlocks( clientIds );
 		if ( ! canMoveBlocks ) {
 			return;
 		}
@@ -467,10 +445,7 @@ export const moveBlocksUp = createOnMove( 'MOVE_BLOCKS_UP' );
 export const moveBlocksToPosition =
 	( clientIds, fromRootClientId = '', toRootClientId = '', index ) =>
 	( { select, dispatch } ) => {
-		const canMoveBlocks = select.canMoveBlocks(
-			clientIds,
-			fromRootClientId
-		);
+		const canMoveBlocks = select.canMoveBlocks( clientIds );
 
 		// If one of the blocks is locked or the parent is locked, we cannot move any block.
 		if ( ! canMoveBlocks ) {
@@ -479,10 +454,7 @@ export const moveBlocksToPosition =
 
 		// If moving inside the same root block the move is always possible.
 		if ( fromRootClientId !== toRootClientId ) {
-			const canRemoveBlocks = select.canRemoveBlocks(
-				clientIds,
-				fromRootClientId
-			);
+			const canRemoveBlocks = select.canRemoveBlocks( clientIds );
 
 			// If we're moving to another block, it means we're deleting blocks from
 			// the original block, so we need to check if removing is possible.
@@ -535,6 +507,9 @@ export function moveBlockToPosition(
 /**
  * Action that inserts a single block, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object}   block           Block object to insert.
  * @param {?number}  index           Index at which block should be inserted.
  * @param {?string}  rootClientId    Optional root client ID of block list on which to insert.
@@ -564,12 +539,16 @@ export function insertBlock(
 /**
  * Action that inserts an array of blocks, optionally at a specific index respective a root block list.
  *
+ * Only allowed blocks are inserted. The action may fail silently for blocks that are not allowed or if
+ * a templateLock is active on the block list.
+ *
  * @param {Object[]}  blocks          Block objects to insert.
  * @param {?number}   index           Index at which block should be inserted.
  * @param {?string}   rootClientId    Optional root client ID of block list on which to insert.
  * @param {?boolean}  updateSelection If true block selection will be updated.  If false, block selection will not change. Defaults to true.
  * @param {0|-1|null} initialPosition Initial focus position. Setting it to null prevent focusing the inserted block.
  * @param {?Object}   meta            Optional Meta values to be passed to the action object.
+ *
  * @return {Object} Action object.
  */
 export const insertBlocks =
@@ -595,10 +574,7 @@ export const insertBlocks =
 			);
 		}
 
-		blocks = getBlocksWithDefaultStylesApplied(
-			castArray( blocks ),
-			select.getSettings()
-		);
+		blocks = castArray( blocks );
 		const allowedBlocks = [];
 		for ( const block of blocks ) {
 			const isValid = select.canInsertBlockType(
@@ -641,13 +617,15 @@ export function showInsertionPoint(
 	index,
 	__unstableOptions = {}
 ) {
-	const { __unstableWithInserter, operation } = __unstableOptions;
+	const { __unstableWithInserter, operation, nearestSide } =
+		__unstableOptions;
 	return {
 		type: 'SHOW_INSERTION_POINT',
 		rootClientId,
 		index,
 		__unstableWithInserter,
 		operation,
+		nearestSide,
 	};
 }
 /**
@@ -708,7 +686,9 @@ export const __unstableDeleteSelection =
 		const selectionAnchor = select.getSelectionStart();
 		const selectionFocus = select.getSelectionEnd();
 
-		if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
+		if ( selectionAnchor.clientId === selectionFocus.clientId ) {
+			return;
+		}
 
 		// It's not mergeable if there's no rich text selection.
 		if (
@@ -716,8 +696,9 @@ export const __unstableDeleteSelection =
 			! selectionFocus.attributeKey ||
 			typeof selectionAnchor.offset === 'undefined' ||
 			typeof selectionFocus.offset === 'undefined'
-		)
+		) {
 			return false;
+		}
 
 		const anchorRootClientId = select.getBlockRootClientId(
 			selectionAnchor.clientId
@@ -759,43 +740,23 @@ export const __unstableDeleteSelection =
 		const selectionB = selectionEnd;
 
 		const blockA = select.getBlock( selectionA.clientId );
-		const blockAType = getBlockType( blockA.name );
-
 		const blockB = select.getBlock( selectionB.clientId );
-		const blockBType = getBlockType( blockB.name );
 
 		const htmlA = blockA.attributes[ selectionA.attributeKey ];
 		const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
-		const attributeDefinitionA =
-			blockAType.attributes[ selectionA.attributeKey ];
-		const attributeDefinitionB =
-			blockBType.attributes[ selectionB.attributeKey ];
-
-		let valueA = create( {
-			html: htmlA,
-			...mapRichTextSettings( attributeDefinitionA ),
-		} );
-		let valueB = create( {
-			html: htmlB,
-			...mapRichTextSettings( attributeDefinitionB ),
-		} );
+		let valueA = create( { html: htmlA } );
+		let valueB = create( { html: htmlB } );
 
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
 		// Clone the blocks so we don't manipulate the original.
 		const cloneA = cloneBlock( blockA, {
-			[ selectionA.attributeKey ]: toHTMLString( {
-				value: valueA,
-				...mapRichTextSettings( attributeDefinitionA ),
-			} ),
+			[ selectionA.attributeKey ]: toHTMLString( { value: valueA } ),
 		} );
 		const cloneB = cloneBlock( blockB, {
-			[ selectionB.attributeKey ]: toHTMLString( {
-				value: valueB,
-				...mapRichTextSettings( attributeDefinitionB ),
-			} ),
+			[ selectionB.attributeKey ]: toHTMLString( { value: valueB } ),
 		} );
 
 		const followingBlock = isForward ? cloneA : cloneB;
@@ -831,20 +792,10 @@ export const __unstableDeleteSelection =
 		const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
 		const convertedHtml = updatedAttributes[ newAttributeKey ];
-		const convertedValue = create( {
-			html: convertedHtml,
-			...mapRichTextSettings(
-				targetBlockType.attributes[ newAttributeKey ]
-			),
-		} );
+		const convertedValue = create( { html: convertedHtml } );
 		const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
 		const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-		const newHtml = toHTMLString( {
-			value: newValue,
-			...mapRichTextSettings(
-				targetBlockType.attributes[ newAttributeKey ]
-			),
-		} );
+		const newHtml = toHTMLString( { value: newValue } );
 
 		updatedAttributes[ newAttributeKey ] = newHtml;
 
@@ -881,24 +832,13 @@ export const __unstableDeleteSelection =
 
 /**
  * Split the current selection.
+ * @param {?Array} blocks
  */
 export const __unstableSplitSelection =
-	() =>
-	( { select, dispatch } ) => {
+	( blocks = [] ) =>
+	( { registry, select, dispatch } ) => {
 		const selectionAnchor = select.getSelectionStart();
 		const selectionFocus = select.getSelectionEnd();
-
-		if ( selectionAnchor.clientId === selectionFocus.clientId ) return;
-
-		// Can't split if the selection is not set.
-		if (
-			! selectionAnchor.attributeKey ||
-			! selectionFocus.attributeKey ||
-			typeof selectionAnchor.offset === 'undefined' ||
-			typeof selectionFocus.offset === 'undefined'
-		)
-			return;
-
 		const anchorRootClientId = select.getBlockRootClientId(
 			selectionAnchor.clientId
 		);
@@ -929,63 +869,264 @@ export const __unstableSplitSelection =
 
 		const selectionA = selectionStart;
 		const selectionB = selectionEnd;
-
 		const blockA = select.getBlock( selectionA.clientId );
-		const blockAType = getBlockType( blockA.name );
-
 		const blockB = select.getBlock( selectionB.clientId );
+		const blockAType = getBlockType( blockA.name );
 		const blockBType = getBlockType( blockB.name );
+		const attributeKeyA =
+			typeof selectionA.attributeKey === 'string'
+				? selectionA.attributeKey
+				: findRichTextAttributeKey( blockAType );
+		const attributeKeyB =
+			typeof selectionB.attributeKey === 'string'
+				? selectionB.attributeKey
+				: findRichTextAttributeKey( blockBType );
+		const blockAttributes = select.getBlockAttributes(
+			selectionA.clientId
+		);
+		const bindings = blockAttributes?.metadata?.bindings;
+
+		// If the attribute is bound, don't split the selection and insert a new block instead.
+		if ( bindings?.[ attributeKeyA ] ) {
+			// Show warning if user tries to insert a block into another block with bindings.
+			if ( blocks.length ) {
+				const { createWarningNotice } =
+					registry.dispatch( noticesStore );
+				createWarningNotice(
+					__(
+						"Blocks can't be inserted into other blocks with bindings"
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+			dispatch.insertAfterBlock( selectionA.clientId );
+			return;
+		}
 
-		const htmlA = blockA.attributes[ selectionA.attributeKey ];
-		const htmlB = blockB.attributes[ selectionB.attributeKey ];
+		// Can't split if the selection is not set.
+		if (
+			! attributeKeyA ||
+			! attributeKeyB ||
+			typeof selectionAnchor.offset === 'undefined' ||
+			typeof selectionFocus.offset === 'undefined'
+		) {
+			return;
+		}
+
+		// We can do some short-circuiting if the selection is collapsed.
+		if (
+			selectionA.clientId === selectionB.clientId &&
+			attributeKeyA === attributeKeyB &&
+			selectionA.offset === selectionB.offset
+		) {
+			// If an unmodified default block is selected, replace it. We don't
+			// want to be converting into a default block.
+			if ( blocks.length ) {
+				if ( isUnmodifiedDefaultBlock( blockA ) ) {
+					dispatch.replaceBlocks(
+						[ selectionA.clientId ],
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					return;
+				}
+			}
 
-		const attributeDefinitionA =
-			blockAType.attributes[ selectionA.attributeKey ];
-		const attributeDefinitionB =
-			blockBType.attributes[ selectionB.attributeKey ];
+			// If selection is at the start or end, we can simply insert an
+			// empty block, provided this block has no inner blocks.
+			else if ( ! select.getBlockOrder( selectionA.clientId ).length ) {
+				function createEmpty() {
+					const defaultBlockName = getDefaultBlockName();
+					return select.canInsertBlockType(
+						defaultBlockName,
+						anchorRootClientId
+					)
+						? createBlock( defaultBlockName )
+						: createBlock(
+								select.getBlockName( selectionA.clientId )
+						  );
+				}
 
-		let valueA = create( {
-			html: htmlA,
-			...mapRichTextSettings( attributeDefinitionA ),
-		} );
-		let valueB = create( {
-			html: htmlB,
-			...mapRichTextSettings( attributeDefinitionB ),
-		} );
+				const length = blockAttributes[ attributeKeyA ].length;
+
+				if ( selectionA.offset === 0 && length ) {
+					dispatch.insertBlocks(
+						[ createEmpty() ],
+						select.getBlockIndex( selectionA.clientId ),
+						anchorRootClientId,
+						false
+					);
+					return;
+				}
+
+				if ( selectionA.offset === length ) {
+					dispatch.insertBlocks(
+						[ createEmpty() ],
+						select.getBlockIndex( selectionA.clientId ) + 1,
+						anchorRootClientId
+					);
+					return;
+				}
+			}
+		}
+
+		const htmlA = blockA.attributes[ attributeKeyA ];
+		const htmlB = blockB.attributes[ attributeKeyB ];
+
+		let valueA = create( { html: htmlA } );
+		let valueB = create( { html: htmlB } );
 
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
 
-		dispatch.replaceBlocks(
-			select.getSelectedBlockClientIds(),
-			[
-				{
-					// Preserve the original client ID.
-					...blockA,
-					attributes: {
-						...blockA.attributes,
-						[ selectionA.attributeKey ]: toHTMLString( {
-							value: valueA,
-							...mapRichTextSettings( attributeDefinitionA ),
-						} ),
-					},
+		let head = {
+			// Preserve the original client ID.
+			...blockA,
+			// If both start and end are the same, should only copy innerBlocks
+			// once.
+			innerBlocks:
+				blockA.clientId === blockB.clientId ? [] : blockA.innerBlocks,
+			attributes: {
+				...blockA.attributes,
+				[ attributeKeyA ]: toHTMLString( { value: valueA } ),
+			},
+		};
+
+		let tail = {
+			...blockB,
+			// Only preserve the original client ID if the end is different.
+			clientId:
+				blockA.clientId === blockB.clientId
+					? createBlock( blockB.name ).clientId
+					: blockB.clientId,
+			attributes: {
+				...blockB.attributes,
+				[ attributeKeyB ]: toHTMLString( { value: valueB } ),
+			},
+		};
+
+		// When splitting a block, attempt to convert the tail block to the
+		// default block type. For example, when splitting a heading block, the
+		// tail block will be converted to a paragraph block. Note that for
+		// blocks such as a list item and button, this will be skipped because
+		// the default block type cannot be inserted.
+		const defaultBlockName = getDefaultBlockName();
+		if (
+			// A block is only split when the selection is within the same
+			// block.
+			blockA.clientId === blockB.clientId &&
+			defaultBlockName &&
+			tail.name !== defaultBlockName &&
+			select.canInsertBlockType( defaultBlockName, anchorRootClientId )
+		) {
+			const switched = switchToBlockType( tail, defaultBlockName );
+			if ( switched?.length === 1 ) {
+				tail = switched[ 0 ];
+			}
+		}
+
+		if ( ! blocks.length ) {
+			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+				head,
+				tail,
+			] );
+			return;
+		}
+
+		let selection;
+		const output = [];
+		const clonedBlocks = [ ...blocks ];
+		const firstBlock = clonedBlocks.shift();
+		const headType = getBlockType( head.name );
+		const firstBlocks =
+			headType.merge && firstBlock.name === headType.name
+				? [ firstBlock ]
+				: switchToBlockType( firstBlock, headType.name );
+
+		if ( firstBlocks?.length ) {
+			const first = firstBlocks.shift();
+			head = {
+				...head,
+				attributes: {
+					...head.attributes,
+					...headType.merge( head.attributes, first.attributes ),
 				},
-				createBlock( getDefaultBlockName() ),
-				{
-					// Preserve the original client ID.
-					...blockB,
+			};
+			output.push( head );
+			selection = {
+				clientId: head.clientId,
+				attributeKey: attributeKeyA,
+				offset: create( { html: head.attributes[ attributeKeyA ] } )
+					.text.length,
+			};
+			clonedBlocks.unshift( ...firstBlocks );
+		} else {
+			if ( ! isUnmodifiedBlock( head ) ) {
+				output.push( head );
+			}
+			output.push( firstBlock );
+		}
+
+		const lastBlock = clonedBlocks.pop();
+		const tailType = getBlockType( tail.name );
+
+		if ( clonedBlocks.length ) {
+			output.push( ...clonedBlocks );
+		}
+
+		if ( lastBlock ) {
+			const lastBlocks =
+				tailType.merge && tailType.name === lastBlock.name
+					? [ lastBlock ]
+					: switchToBlockType( lastBlock, tailType.name );
+
+			if ( lastBlocks?.length ) {
+				const last = lastBlocks.pop();
+				output.push( {
+					...tail,
 					attributes: {
-						...blockB.attributes,
-						[ selectionB.attributeKey ]: toHTMLString( {
-							value: valueB,
-							...mapRichTextSettings( attributeDefinitionB ),
-						} ),
+						...tail.attributes,
+						...tailType.merge( last.attributes, tail.attributes ),
 					},
-				},
-			],
-			1, // If we don't pass the `indexToSelect` it will default to the last block.
-			select.getSelectedBlocksInitialCaretPosition()
-		);
+				} );
+				output.push( ...lastBlocks );
+				selection = {
+					clientId: tail.clientId,
+					attributeKey: attributeKeyB,
+					offset: create( {
+						html: last.attributes[ attributeKeyB ],
+					} ).text.length,
+				};
+			} else {
+				output.push( lastBlock );
+				if ( ! isUnmodifiedBlock( tail ) ) {
+					output.push( tail );
+				}
+			}
+		} else if ( ! isUnmodifiedBlock( tail ) ) {
+			output.push( tail );
+		}
+
+		registry.batch( () => {
+			dispatch.replaceBlocks(
+				select.getSelectedBlockClientIds(),
+				output,
+				output.length - 1,
+				0
+			);
+			if ( selection ) {
+				dispatch.selectionChange(
+					selection.clientId,
+					selection.attributeKey,
+					selection.offset,
+					selection.offset
+				);
+			}
+		} );
 	};
 
 /**
@@ -1011,18 +1152,21 @@ export const __unstableExpandSelection =
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
 	( { registry, select, dispatch } ) => {
-		const blocks = [ firstBlockClientId, secondBlockClientId ];
-		dispatch( { type: 'MERGE_BLOCKS', blocks } );
-
-		const [ clientIdA, clientIdB ] = blocks;
+		const clientIdA = firstBlockClientId;
+		const clientIdB = secondBlockClientId;
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		if ( ! blockAType ) return;
+		if ( ! blockAType ) {
+			return;
+		}
 
 		const blockB = select.getBlock( clientIdB );
 
-		if ( blockAType && ! blockAType.merge ) {
+		if (
+			! blockAType.merge &&
+			getBlockSupport( blockA.name, '__experimentalOnMerge' )
+		) {
 			// If there's no merge function defined, attempt merging inner
 			// blocks.
 			const blocksWithTheSameType = switchToBlockType(
@@ -1039,6 +1183,7 @@ export const mergeBlocks =
 				dispatch.selectBlock( blockA.clientId );
 				return;
 			}
+
 			registry.batch( () => {
 				dispatch.insertBlocks(
 					blockWithSameType.innerBlocks,
@@ -1049,10 +1194,66 @@ export const mergeBlocks =
 				dispatch.selectBlock(
 					blockWithSameType.innerBlocks[ 0 ].clientId
 				);
+
+				// Attempt to merge the next block if it's the same type and
+				// same attributes. This is useful when merging a paragraph into
+				// a list, and the next block is also a list. If we don't merge,
+				// it looks like one list, but it's actually two lists. The same
+				// applies to other blocks such as a group with the same
+				// attributes.
+				const nextBlockClientId =
+					select.getNextBlockClientId( clientIdA );
+
+				if (
+					nextBlockClientId &&
+					select.getBlockName( clientIdA ) ===
+						select.getBlockName( nextBlockClientId )
+				) {
+					const rootAttributes =
+						select.getBlockAttributes( clientIdA );
+					const previousRootAttributes =
+						select.getBlockAttributes( nextBlockClientId );
+
+					if (
+						Object.keys( rootAttributes ).every(
+							( key ) =>
+								rootAttributes[ key ] ===
+								previousRootAttributes[ key ]
+						)
+					) {
+						dispatch.moveBlocksToPosition(
+							select.getBlockOrder( nextBlockClientId ),
+							nextBlockClientId,
+							clientIdA
+						);
+						dispatch.removeBlock( nextBlockClientId, false );
+					}
+				}
 			} );
 			return;
 		}
 
+		if ( isUnmodifiedDefaultBlock( blockA ) ) {
+			dispatch.removeBlock(
+				clientIdA,
+				select.isBlockSelected( clientIdA )
+			);
+			return;
+		}
+
+		if ( isUnmodifiedDefaultBlock( blockB ) ) {
+			dispatch.removeBlock(
+				clientIdB,
+				select.isBlockSelected( clientIdB )
+			);
+			return;
+		}
+
+		if ( ! blockAType.merge ) {
+			dispatch.selectBlock( blockA.clientId );
+			return;
+		}
+
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =
@@ -1089,10 +1290,7 @@ export const mergeBlocks =
 			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
 			const html = selectedBlock.attributes[ attributeKey ];
 			const value = insert(
-				create( {
-					html,
-					...mapRichTextSettings( attributeDefinition ),
-				} ),
+				create( { html } ),
 				START_OF_SELECTED_AREA,
 				offset,
 				offset
@@ -1100,7 +1298,6 @@ export const mergeBlocks =
 
 			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
 				value,
-				...mapRichTextSettings( attributeDefinition ),
 			} );
 		}
 
@@ -1126,22 +1323,12 @@ export const mergeBlocks =
 			const newAttributeKey =
 				retrieveSelectedAttribute( updatedAttributes );
 			const convertedHtml = updatedAttributes[ newAttributeKey ];
-			const convertedValue = create( {
-				html: convertedHtml,
-				...mapRichTextSettings(
-					blockAType.attributes[ newAttributeKey ]
-				),
-			} );
+			const convertedValue = create( { html: convertedHtml } );
 			const newOffset = convertedValue.text.indexOf(
 				START_OF_SELECTED_AREA
 			);
 			const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-			const newHtml = toHTMLString( {
-				value: newValue,
-				...mapRichTextSettings(
-					blockAType.attributes[ newAttributeKey ]
-				),
-			} );
+			const newHtml = toHTMLString( { value: newValue } );
 
 			updatedAttributes[ newAttributeKey ] = newHtml;
 
@@ -1174,37 +1361,14 @@ export const mergeBlocks =
  * the set of specified client IDs are to be removed.
  *
  * @param {string|string[]} clientIds      Client IDs of blocks to remove.
- * @param {boolean}         selectPrevious True if the previous block should be
- *                                         selected when a block is removed.
+ * @param {boolean}         selectPrevious True if the previous block
+ *                                         or the immediate parent
+ *                                         (if no previous block exists)
+ *                                         should be selected
+ *                                         when a block is removed.
  */
-export const removeBlocks =
-	( clientIds, selectPrevious = true ) =>
-	( { select, dispatch } ) => {
-		if ( ! clientIds || ! clientIds.length ) {
-			return;
-		}
-
-		clientIds = castArray( clientIds );
-		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
-		const canRemoveBlocks = select.canRemoveBlocks(
-			clientIds,
-			rootClientId
-		);
-
-		if ( ! canRemoveBlocks ) {
-			return;
-		}
-
-		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ] );
-		}
-
-		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
-
-		// To avoid a focus loss when removing the last block, assure there is
-		// always a default block if the last of the blocks have been removed.
-		dispatch( ensureDefaultBlock() );
-	};
+export const removeBlocks = ( clientIds, selectPrevious = true ) =>
+	privateRemoveBlocks( clientIds, selectPrevious );
 
 /**
  * Returns an action object used in signalling that the block with the
@@ -1263,28 +1427,6 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
- *
- * @return {Object} Action object.
- */
-export function __experimentalHideBlockInterface() {
-	return {
-		type: 'HIDE_BLOCK_INTERFACE',
-	};
-}
-
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
- *
- * @return {Object} Action object.
- */
-export function __experimentalShowBlockInterface() {
-	return {
-		type: 'SHOW_BLOCK_INTERFACE',
-	};
-}
-
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *
@@ -1418,11 +1560,18 @@ export const insertDefaultBlock =
 	};
 
 /**
- * Action that changes the nested settings of a given block.
+ * @typedef {Object< string, Object >} SettingsByClientId
+ */
+
+/**
+ * Action that changes the nested settings of the given block(s).
  *
- * @param {string} clientId Client ID of the block whose nested setting are
- *                          being received.
- * @param {Object} settings Object with the new settings for the nested block.
+ * @param {string | SettingsByClientId} clientId Client ID of the block whose
+ *                                               nested setting are being
+ *                                               received, or object of settings
+ *                                               by client ID.
+ * @param {Object}                      settings Object with the new settings
+ *                                               for the nested block.
  *
  * @return {Object} Action object
  */
@@ -1442,10 +1591,9 @@ export function updateBlockListSettings( clientId, settings ) {
  * @return {Object} Action object
  */
 export function updateSettings( settings ) {
-	return {
-		type: 'UPDATE_SETTINGS',
-		settings,
-	};
+	return __experimentalUpdateSettings( settings, {
+		stripExperimentalSettings: true,
+	} );
 }
 
 /**
@@ -1521,56 +1669,35 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select } ) => {
-		// When switching to zoom-out mode, we need to select the root block
-		if ( mode === 'zoom-out' ) {
-			const firstSelectedClientId = select.getBlockSelectionStart();
-			if ( firstSelectedClientId ) {
-				dispatch.selectBlock(
-					select.getBlockHierarchyRootClientId(
-						firstSelectedClientId
-					)
-				);
-			}
-		}
-
-		dispatch( { type: 'SET_EDITOR_MODE', mode } );
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).set( 'core', 'editorTool', mode );
 
 		if ( mode === 'navigation' ) {
-			speak(
-				__(
-					'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
-				)
-			);
+			speak( __( 'You are currently in Write mode.' ) );
 		} else if ( mode === 'edit' ) {
-			speak(
-				__(
-					'You are currently in edit mode. To return to the navigation mode, press Escape.'
-				)
-			);
-		} else if ( mode === 'zoom-out' ) {
-			speak( __( 'You are currently in zoom-out mode.' ) );
+			speak( __( 'You are currently in Design mode.' ) );
 		}
 	};
 
 /**
- * Action that enables or disables the block moving mode.
+ * Set the block moving client ID.
  *
- * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
+ * @deprecated
+ *
+ * @return {Object} Action object.
  */
-export const setBlockMovingClientId =
-	( hasBlockMovingClientId = null ) =>
-	( { dispatch } ) => {
-		dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
-
-		if ( hasBlockMovingClientId ) {
-			speak(
-				__(
-					'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
-				)
-			);
+export function setBlockMovingClientId() {
+	deprecated(
+		'wp.data.dispatch( "core/block-editor" ).setBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
 		}
+	);
+	return {
+		type: 'DO_NOTHING',
 	};
+}
 
 /**
  * Action that duplicates a list of blocks.
@@ -1626,7 +1753,7 @@ export const duplicateBlocks =
 	};
 
 /**
- * Action that inserts an empty block before a given block.
+ * Action that inserts a default block before a given block.
  *
  * @param {string} clientId
  */
@@ -1642,16 +1769,34 @@ export const insertBeforeBlock =
 			return;
 		}
 
-		const firstSelectedIndex = select.getBlockIndex( clientId );
-		return dispatch.insertDefaultBlock(
-			{},
-			rootClientId,
-			firstSelectedIndex
-		);
+		const blockIndex = select.getBlockIndex( clientId );
+		const directInsertBlock = rootClientId
+			? select.getDirectInsertBlock( rootClientId )
+			: null;
+
+		if ( ! directInsertBlock ) {
+			return dispatch.insertDefaultBlock( {}, rootClientId, blockIndex );
+		}
+
+		const copiedAttributes = {};
+		if ( directInsertBlock.attributesToCopy ) {
+			const attributes = select.getBlockAttributes( clientId );
+			directInsertBlock.attributesToCopy.forEach( ( key ) => {
+				if ( attributes[ key ] ) {
+					copiedAttributes[ key ] = attributes[ key ];
+				}
+			} );
+		}
+
+		const block = createBlock( directInsertBlock.name, {
+			...directInsertBlock.attributes,
+			...copiedAttributes,
+		} );
+		return dispatch.insertBlock( block, blockIndex, rootClientId );
 	};
 
 /**
- * Action that inserts an empty block after a given block.
+ * Action that inserts a default block after a given block.
  *
  * @param {string} clientId
  */
@@ -1667,12 +1812,34 @@ export const insertAfterBlock =
 			return;
 		}
 
-		const firstSelectedIndex = select.getBlockIndex( clientId );
-		return dispatch.insertDefaultBlock(
-			{},
-			rootClientId,
-			firstSelectedIndex + 1
-		);
+		const blockIndex = select.getBlockIndex( clientId );
+		const directInsertBlock = rootClientId
+			? select.getDirectInsertBlock( rootClientId )
+			: null;
+
+		if ( ! directInsertBlock ) {
+			return dispatch.insertDefaultBlock(
+				{},
+				rootClientId,
+				blockIndex + 1
+			);
+		}
+
+		const copiedAttributes = {};
+		if ( directInsertBlock.attributesToCopy ) {
+			const attributes = select.getBlockAttributes( clientId );
+			directInsertBlock.attributesToCopy.forEach( ( key ) => {
+				if ( attributes[ key ] ) {
+					copiedAttributes[ key ] = attributes[ key ];
+				}
+			} );
+		}
+
+		const block = createBlock( directInsertBlock.name, {
+			...directInsertBlock.attributes,
+			...copiedAttributes,
+		} );
+		return dispatch.insertBlock( block, blockIndex + 1, rootClientId );
 	};
 
 /**
@@ -1732,19 +1899,246 @@ export function setBlockVisibility( updates ) {
 }
 
 /**
- * Action that sets whether a block is being temporaritly edited as blocks.
+ * Action that sets whether a block is being temporarily edited as blocks.
  *
  * DO-NOT-USE in production.
  * This action is created for internal/experimental only usage and may be
  * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
  *
- * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporarily edited as blocks.
+ * @param {?string} focusModeToRevert          The focus mode to revert after temporarily edit as blocks finishes.
  */
 export function __unstableSetTemporarilyEditingAsBlocks(
-	temporarilyEditingAsBlocks
+	temporarilyEditingAsBlocks,
+	focusModeToRevert
 ) {
 	return {
 		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
 		temporarilyEditingAsBlocks,
+		focusModeToRevert,
+	};
+}
+
+/**
+ * Interface for inserter media requests.
+ *
+ * @typedef {Object} InserterMediaRequest
+ * @property {number} per_page How many items to fetch per page.
+ * @property {string} search   The search term to use for filtering the results.
+ */
+
+/**
+ * Interface for inserter media responses. Any media resource should
+ * map their response to this interface, in order to create the core
+ * WordPress media blocks (image, video, audio).
+ *
+ * @typedef {Object} InserterMediaItem
+ * @property {string}        title        The title of the media item.
+ * @property {string}        url          The source url of the media item.
+ * @property {string}        [previewUrl] The preview source url of the media item to display in the media list.
+ * @property {number}        [id]         The WordPress id of the media item.
+ * @property {number|string} [sourceId]   The id of the media item from external source.
+ * @property {string}        [alt]        The alt text of the media item.
+ * @property {string}        [caption]    The caption of the media item.
+ */
+
+/**
+ * Registers a new inserter media category. Once registered, the media category is
+ * available in the inserter's media tab.
+ *
+ * The following interfaces are used:
+ *
+ * _Type Definition_
+ *
+ * - _InserterMediaRequest_ `Object`: Interface for inserter media requests.
+ *
+ * _Properties_
+ *
+ * - _per_page_ `number`: How many items to fetch per page.
+ * - _search_ `string`: The search term to use for filtering the results.
+ *
+ * _Type Definition_
+ *
+ * - _InserterMediaItem_ `Object`: Interface for inserter media responses. Any media resource should
+ * map their response to this interface, in order to create the core
+ * WordPress media blocks (image, video, audio).
+ *
+ * _Properties_
+ *
+ * - _title_ `string`: The title of the media item.
+ * - _url_ `string: The source url of the media item.
+ * - _previewUrl_ `[string]`: The preview source url of the media item to display in the media list.
+ * - _id_ `[number]`: The WordPress id of the media item.
+ * - _sourceId_ `[number|string]`: The id of the media item from external source.
+ * - _alt_ `[string]`: The alt text of the media item.
+ * - _caption_ `[string]`: The caption of the media item.
+ *
+ * @param    {InserterMediaCategory}                                  category                       The inserter media category to register.
+ *
+ * @example
+ * ```js
+ *
+ * wp.data.dispatch('core/block-editor').registerInserterMediaCategory( {
+ * 	 name: 'openverse',
+ * 	 labels: {
+ * 	 	name: 'Openverse',
+ * 	 	search_items: 'Search Openverse',
+ * 	 },
+ * 	 mediaType: 'image',
+ * 	 async fetch( query = {} ) {
+ * 	 	const defaultArgs = {
+ * 	 		mature: false,
+ * 	 		excluded_source: 'flickr,inaturalist,wikimedia',
+ * 	 		license: 'pdm,cc0',
+ * 	 	};
+ * 	 	const finalQuery = { ...query, ...defaultArgs };
+ * 	 	// Sometimes you might need to map the supported request params according to `InserterMediaRequest`.
+ * 	 	// interface. In this example the `search` query param is named `q`.
+ * 	 	const mapFromInserterMediaRequest = {
+ * 	 		per_page: 'page_size',
+ * 	 		search: 'q',
+ * 	 	};
+ * 	 	const url = new URL( 'https://api.openverse.org/v1/images/' );
+ * 	 	Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+ * 	 		const queryKey = mapFromInserterMediaRequest[ key ] || key;
+ * 	 		url.searchParams.set( queryKey, value );
+ * 	 	} );
+ * 	 	const response = await window.fetch( url, {
+ * 	 		headers: {
+ * 	 			'User-Agent': 'WordPress/inserter-media-fetch',
+ * 	 		},
+ * 	 	} );
+ * 	 	const jsonResponse = await response.json();
+ * 	 	const results = jsonResponse.results;
+ * 	 	return results.map( ( result ) => ( {
+ * 	 		...result,
+ * 	 		// If your response result includes an `id` prop that you want to access later, it should
+ * 	 		// be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
+ * 	 		// a report URL getter.
+ * 	 		// Additionally you should always clear the `id` value of your response results because
+ * 	 		// it is used to identify WordPress media items.
+ * 	 		sourceId: result.id,
+ * 	 		id: undefined,
+ * 	 		caption: result.caption,
+ * 	 		previewUrl: result.thumbnail,
+ * 	 	} ) );
+ * 	 },
+ * 	 getReportUrl: ( { sourceId } ) =>
+ * 	 	`https://wordpress.org/openverse/image/${ sourceId }/report/`,
+ * 	 isExternalResource: true,
+ * } );
+ * ```
+ *
+ * @typedef {Object} InserterMediaCategory Interface for inserter media category.
+ * @property {string}                                                 name                           The name of the media category, that should be unique among all media categories.
+ * @property {Object}                                                 labels                         Labels for the media category.
+ * @property {string}                                                 labels.name                    General name of the media category. It's used in the inserter media items list.
+ * @property {string}                                                 [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+ * @property {('image'|'audio'|'video')}                              mediaType                      The media type of the media category.
+ * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                          The function to fetch media items for the category.
+ * @property {(InserterMediaItem) => string}                          [getReportUrl]                 If the media category supports reporting media items, this function should return
+ *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+ * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
+ *                                                                                                   This is used to avoid making a request to the external resource when the user
+ */
+export const registerInserterMediaCategory =
+	( category ) =>
+	( { select, dispatch } ) => {
+		if ( ! category || typeof category !== 'object' ) {
+			console.error(
+				'Category should be an `InserterMediaCategory` object.'
+			);
+			return;
+		}
+		if ( ! category.name ) {
+			console.error(
+				'Category should have a `name` that should be unique among all media categories.'
+			);
+			return;
+		}
+		if ( ! category.labels?.name ) {
+			console.error( 'Category should have a `labels.name`.' );
+			return;
+		}
+		if ( ! [ 'image', 'audio', 'video' ].includes( category.mediaType ) ) {
+			console.error(
+				'Category should have `mediaType` property that is one of `image|audio|video`.'
+			);
+			return;
+		}
+		if ( ! category.fetch || typeof category.fetch !== 'function' ) {
+			console.error(
+				'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+			);
+			return;
+		}
+		const registeredInserterMediaCategories =
+			select.getRegisteredInserterMediaCategories();
+		if (
+			registeredInserterMediaCategories.some(
+				( { name } ) => name === category.name
+			)
+		) {
+			console.error(
+				`A category is already registered with the same name: "${ category.name }".`
+			);
+			return;
+		}
+		if (
+			registeredInserterMediaCategories.some(
+				( { labels: { name } = {} } ) => name === category.labels?.name
+			)
+		) {
+			console.error(
+				`A category is already registered with the same labels.name: "${ category.labels.name }".`
+			);
+			return;
+		}
+		// `inserterMediaCategories` is a private block editor setting, which means it cannot
+		// be updated through the public `updateSettings` action. We preserve this setting as
+		// private, so extenders can only add new inserter media categories and don't have any
+		// control over the core media categories.
+		dispatch( {
+			type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+			category: { ...category, isExternalResource: true },
+		} );
+	};
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Sets the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string}           clientId The block client ID, or `''` for the root container.
+ * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
+ *                                    `'contentOnly'`, or `'default'`.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockEditingMode( clientId = '', mode ) {
+	return {
+		type: 'SET_BLOCK_EDITING_MODE',
+		clientId,
+		mode,
+	};
+}
+
+/**
+ * Clears the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {Object} Action object.
+ */
+export function unsetBlockEditingMode( clientId = '' ) {
+	return {
+		type: 'UNSET_BLOCK_EDITING_MODE',
+		clientId,
 	};
 }
diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
index 206905fe79fb08..8314ad872468b2 100644
--- a/packages/block-editor/src/store/defaults.js
+++ b/packages/block-editor/src/store/defaults.js
@@ -18,6 +18,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {number}        maxWidth                               Max width to constraint resizing
  * @property {boolean|Array} allowedBlockTypes                      Allowed block types
  * @property {boolean}       hasFixedToolbar                        Whether or not the editor toolbar is fixed
+ * @property {boolean}       distractionFree                        Whether or not the editor UI is distraction free
  * @property {boolean}       focusMode                              Whether the focus mode is enabled or not
  * @property {Array}         styles                                 Editor Styles
  * @property {boolean}       keepCaretInsideBlock                   Whether caret should move between blocks in edit mode
@@ -26,12 +27,12 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       canLockBlocks                          Whether the user can manage Block Lock state
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
  * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
+ * @property {boolean}       enableOpenverseMediaCategory           Enable/Disable the Openverse media category in the inserter.
+ * @property {boolean}       clearBlockSelection                    Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
- * @property {boolean}       __experimentalClearBlockSelection      Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
- * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -156,14 +157,38 @@ export const SETTINGS_DEFAULTS = {
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 
+	// Allows to disable Openverse media category in the inserter.
+	enableOpenverseMediaCategory: true,
+
+	clearBlockSelection: true,
+
 	__experimentalCanUserUseUnfilteredHTML: false,
-	__experimentalClearBlockSelection: true,
 	__experimentalBlockDirectory: false,
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
-	__unstableGalleryWithImageBlocks: false,
-	__unstableIsPreviewMode: false,
+
+	isPreviewMode: false,
+
+	// These settings will be completely revamped in the future.
+	// The goal is to evolve this into an API which will instruct
+	// the block inspector to animate transitions between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
+	blockInspectorAnimation: {
+		animationParent: 'core/navigation',
+		'core/navigation': { enterDirection: 'leftToRight' },
+		'core/navigation-submenu': { enterDirection: 'rightToLeft' },
+		'core/navigation-link': { enterDirection: 'rightToLeft' },
+		'core/search': { enterDirection: 'rightToLeft' },
+		'core/social-links': { enterDirection: 'rightToLeft' },
+		'core/page-list': { enterDirection: 'rightToLeft' },
+		'core/spacer': { enterDirection: 'rightToLeft' },
+		'core/home-link': { enterDirection: 'rightToLeft' },
+		'core/site-title': { enterDirection: 'rightToLeft' },
+		'core/site-logo': { enterDirection: 'rightToLeft' },
+	},
 
 	generateAnchors: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js
index fddf7cdb647b97..e951c39b3d1a41 100644
--- a/packages/block-editor/src/store/defaults.native.js
+++ b/packages/block-editor/src/store/defaults.native.js
@@ -10,9 +10,6 @@ const SETTINGS_DEFAULTS = {
 	...SETTINGS,
 	// Don't add the default font sizes for standard themes
 	fontSizes: undefined,
-	// FOR TESTING ONLY - Later, this will come from a REST API
-	// eslint-disable-next-line no-undef
-	__unstableGalleryWithImageBlocks: __DEV__,
 	alignWide: true,
 	supportsLayout: false,
 	__experimentalFeatures: {
diff --git a/packages/block-editor/src/store/get-block-settings.js b/packages/block-editor/src/store/get-block-settings.js
new file mode 100644
index 00000000000000..9ea8fab15f597a
--- /dev/null
+++ b/packages/block-editor/src/store/get-block-settings.js
@@ -0,0 +1,191 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__EXPERIMENTAL_PATHS_WITH_OVERRIDE as PATHS_WITH_OVERRIDE,
+	hasBlockSupport,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromObjectPath } from '../utils/object';
+import { getBlockName, getSettings, getBlockAttributes } from './selectors';
+
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
+
+const deprecatedFlags = {
+	'color.palette': ( settings ) => settings.colors,
+	'color.gradients': ( settings ) => settings.gradients,
+	'color.custom': ( settings ) =>
+		settings.disableCustomColors === undefined
+			? undefined
+			: ! settings.disableCustomColors,
+	'color.customGradient': ( settings ) =>
+		settings.disableCustomGradients === undefined
+			? undefined
+			: ! settings.disableCustomGradients,
+	'typography.fontSizes': ( settings ) => settings.fontSizes,
+	'typography.customFontSize': ( settings ) =>
+		settings.disableCustomFontSizes === undefined
+			? undefined
+			: ! settings.disableCustomFontSizes,
+	'typography.lineHeight': ( settings ) => settings.enableCustomLineHeight,
+	'spacing.units': ( settings ) => {
+		if ( settings.enableCustomUnits === undefined ) {
+			return;
+		}
+
+		if ( settings.enableCustomUnits === true ) {
+			return [ 'px', 'em', 'rem', 'vh', 'vw', '%' ];
+		}
+
+		return settings.enableCustomUnits;
+	},
+	'spacing.padding': ( settings ) => settings.enableCustomSpacing,
+};
+
+const prefixedFlags = {
+	/*
+	 * These were only available in the plugin
+	 * and can be removed when the minimum WordPress version
+	 * for the plugin is 5.9.
+	 */
+	'border.customColor': 'border.color',
+	'border.customStyle': 'border.style',
+	'border.customWidth': 'border.width',
+	'typography.customFontStyle': 'typography.fontStyle',
+	'typography.customFontWeight': 'typography.fontWeight',
+	'typography.customLetterSpacing': 'typography.letterSpacing',
+	'typography.customTextDecorations': 'typography.textDecoration',
+	'typography.customTextTransforms': 'typography.textTransform',
+	/*
+	 * These were part of WordPress 5.8 and we need to keep them.
+	 */
+	'border.customRadius': 'border.radius',
+	'spacing.customMargin': 'spacing.margin',
+	'spacing.customPadding': 'spacing.padding',
+	'typography.customLineHeight': 'typography.lineHeight',
+};
+
+/**
+ * Remove `custom` prefixes for flags that did not land in 5.8.
+ *
+ * This provides continued support for `custom` prefixed properties. It will
+ * be removed once third party devs have had sufficient time to update themes,
+ * plugins, etc.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/34485
+ *
+ * @param {string} path Path to desired value in settings.
+ * @return {string}     The value for defined setting.
+ */
+const removeCustomPrefixes = ( path ) => {
+	return prefixedFlags[ path ] || path;
+};
+
+export function getBlockSettings( state, clientId, ...paths ) {
+	const blockName = getBlockName( state, clientId );
+	const candidates = [];
+
+	if ( clientId ) {
+		let id = clientId;
+		do {
+			const name = getBlockName( state, id );
+			if ( hasBlockSupport( name, '__experimentalSettings', false ) ) {
+				candidates.push( id );
+			}
+		} while ( ( id = state.blocks.parents.get( id ) ) );
+	}
+
+	return paths.map( ( path ) => {
+		if ( blockedPaths.includes( path ) ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'Top level useSetting paths are disabled. Please use a subpath to query the information needed.'
+			);
+			return undefined;
+		}
+
+		// 0. Allow third parties to filter the block's settings at runtime.
+		let result = applyFilters(
+			'blockEditor.useSetting.before',
+			undefined,
+			path,
+			clientId,
+			blockName
+		);
+
+		if ( undefined !== result ) {
+			return result;
+		}
+
+		const normalizedPath = removeCustomPrefixes( path );
+
+		// 1. Take settings from the block instance or its ancestors.
+		// Start from the current block and work our way up the ancestors.
+		for ( const candidateClientId of candidates ) {
+			const candidateAtts = getBlockAttributes(
+				state,
+				candidateClientId
+			);
+			result =
+				getValueFromObjectPath(
+					candidateAtts.settings?.blocks?.[ blockName ],
+					normalizedPath
+				) ??
+				getValueFromObjectPath(
+					candidateAtts.settings,
+					normalizedPath
+				);
+			if ( result !== undefined ) {
+				// Stop the search for more distant ancestors and move on.
+				break;
+			}
+		}
+
+		// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
+		const settings = getSettings( state );
+		if ( result === undefined && blockName ) {
+			result = getValueFromObjectPath(
+				settings.__experimentalFeatures?.blocks?.[ blockName ],
+				normalizedPath
+			);
+		}
+
+		if ( result === undefined ) {
+			result = getValueFromObjectPath(
+				settings.__experimentalFeatures,
+				normalizedPath
+			);
+		}
+
+		// Return if the setting was found in either the block instance or the store.
+		if ( result !== undefined ) {
+			if ( PATHS_WITH_OVERRIDE[ normalizedPath ] ) {
+				return result.custom ?? result.theme ?? result.default;
+			}
+			return result;
+		}
+
+		// 3. Otherwise, use deprecated settings.
+		const deprecatedSettingsValue =
+			deprecatedFlags[ normalizedPath ]?.( settings );
+		if ( deprecatedSettingsValue !== undefined ) {
+			return deprecatedSettingsValue;
+		}
+
+		// 4. Fallback for typography.dropCap:
+		// This is only necessary to support typography.dropCap.
+		// when __experimentalFeatures are not present (core without plugin).
+		// To remove when __experimentalFeatures are ported to core.
+		return normalizedPath === 'typography.dropCap' ? true : undefined;
+	} );
+}
diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js
index a4fc9f5b99a06f..0bcc00cb5f6ae8 100644
--- a/packages/block-editor/src/store/index.js
+++ b/packages/block-editor/src/store/index.js
@@ -8,8 +8,11 @@ import { createReduxStore, registerStore } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
+import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.
@@ -32,8 +35,21 @@ export const store = createReduxStore( STORE_NAME, {
 	persist: [ 'preferences' ],
 } );
 
-// Ideally we'd use register instead of register stores.
-registerStore( STORE_NAME, {
+// We will be able to use the `register` function once we switch
+// the "preferences" persistence to use the new preferences package.
+const registeredStore = registerStore( STORE_NAME, {
 	...storeConfig,
 	persist: [ 'preferences' ],
 } );
+unlock( registeredStore ).registerPrivateActions( privateActions );
+unlock( registeredStore ).registerPrivateSelectors( privateSelectors );
+
+// TODO: Remove once we switch to the `register` function (see above).
+//
+// Until then, private functions also need to be attached to the original
+// `store` descriptor in order to avoid unit tests failing, which could happen
+// when tests create new registries in which they register stores.
+//
+// @see https://github.com/WordPress/gutenberg/pull/51145#discussion_r1239999590
+unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
new file mode 100644
index 00000000000000..e79833e0a73da7
--- /dev/null
+++ b/packages/block-editor/src/store/private-actions.js
@@ -0,0 +1,485 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from './index';
+import { unlock } from '../lock-unlock';
+
+const castArray = ( maybeArray ) =>
+	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
+
+/**
+ * A list of private/experimental block editor settings that
+ * should not become a part of the WordPress public API.
+ * BlockEditorProvider will remove these settings from the
+ * settings object it receives.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46131
+ */
+const privateSettings = [
+	'inserterMediaCategories',
+	'blockInspectorAnimation',
+];
+
+/**
+ * Action that updates the block editor settings and
+ * conditionally preserves the experimental ones.
+ *
+ * @param {Object}  settings                          Updated settings
+ * @param {Object}  options                           Options object.
+ * @param {boolean} options.stripExperimentalSettings Whether to strip experimental settings.
+ * @param {boolean} options.reset                     Whether to reset the settings.
+ * @return {Object} Action object
+ */
+export function __experimentalUpdateSettings(
+	settings,
+	{ stripExperimentalSettings = false, reset = false } = {}
+) {
+	let incomingSettings = settings;
+
+	if ( Object.hasOwn( incomingSettings, '__unstableIsPreviewMode' ) ) {
+		deprecated(
+			"__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings",
+			{
+				since: '6.8',
+				alternative: 'isPreviewMode',
+			}
+		);
+
+		incomingSettings = { ...incomingSettings };
+		incomingSettings.isPreviewMode =
+			incomingSettings.__unstableIsPreviewMode;
+		delete incomingSettings.__unstableIsPreviewMode;
+	}
+
+	let cleanSettings = incomingSettings;
+
+	// There are no plugins in the mobile apps, so there is no
+	// need to strip the experimental settings:
+	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+		cleanSettings = {};
+		for ( const key in incomingSettings ) {
+			if ( ! privateSettings.includes( key ) ) {
+				cleanSettings[ key ] = incomingSettings[ key ];
+			}
+		}
+	}
+	return {
+		type: 'UPDATE_SETTINGS',
+		settings: cleanSettings,
+		reset,
+	};
+}
+
+/**
+ * Hides the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function hideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Shows the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function showBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Yields action objects used in signalling that the blocks corresponding to
+ * the set of specified client IDs are to be removed.
+ *
+ * Compared to `removeBlocks`, this private interface exposes an additional
+ * parameter; see `forceRemove`.
+ *
+ * @param {string|string[]} clientIds      Client IDs of blocks to remove.
+ * @param {boolean}         selectPrevious True if the previous block
+ *                                         or the immediate parent
+ *                                         (if no previous block exists)
+ *                                         should be selected
+ *                                         when a block is removed.
+ * @param {boolean}         forceRemove    Whether to force the operation,
+ *                                         bypassing any checks for certain
+ *                                         block types.
+ */
+export const privateRemoveBlocks =
+	( clientIds, selectPrevious = true, forceRemove = false ) =>
+	( { select, dispatch, registry } ) => {
+		if ( ! clientIds || ! clientIds.length ) {
+			return;
+		}
+
+		clientIds = castArray( clientIds );
+		const canRemoveBlocks = select.canRemoveBlocks( clientIds );
+
+		if ( ! canRemoveBlocks ) {
+			return;
+		}
+
+		// In certain editing contexts, we'd like to prevent accidental removal
+		// of important blocks. For example, in the site editor, the Query Loop
+		// block is deemed important. In such cases, we'll ask the user for
+		// confirmation that they intended to remove such block(s). However,
+		// the editor instance is responsible for presenting those confirmation
+		// prompts to the user. Any instance opting into removal prompts must
+		// register using `setBlockRemovalRules()`.
+		//
+		// @see https://github.com/WordPress/gutenberg/pull/51145
+		const rules = ! forceRemove && select.getBlockRemovalRules();
+
+		if ( rules ) {
+			function flattenBlocks( blocks ) {
+				const result = [];
+				const stack = [ ...blocks ];
+				while ( stack.length ) {
+					const { innerBlocks, ...block } = stack.shift();
+					stack.push( ...innerBlocks );
+					result.push( block );
+				}
+				return result;
+			}
+
+			const blockList = clientIds.map( select.getBlock );
+			const flattenedBlocks = flattenBlocks( blockList );
+
+			// Find the first message and use it.
+			let message;
+			for ( const rule of rules ) {
+				message = rule.callback( flattenedBlocks );
+				if ( message ) {
+					dispatch(
+						displayBlockRemovalPrompt(
+							clientIds,
+							selectPrevious,
+							message
+						)
+					);
+					return;
+				}
+			}
+		}
+
+		if ( selectPrevious ) {
+			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
+		}
+
+		// We're batching these two actions because an extra `undo/redo` step can
+		// be created, based on whether we insert a default block or not.
+		registry.batch( () => {
+			dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
+			// To avoid a focus loss when removing the last block, assure there is
+			// always a default block if the last of the blocks have been removed.
+			dispatch( ensureDefaultBlock() );
+		} );
+	};
+
+/**
+ * Action which will insert a default block insert action if there
+ * are no other blocks at the root of the editor. This action should be used
+ * in actions which may result in no blocks remaining in the editor (removal,
+ * replacement, etc).
+ */
+export const ensureDefaultBlock =
+	() =>
+	( { select, dispatch } ) => {
+		// To avoid a focus loss when removing the last block, assure there is
+		// always a default block if the last of the blocks have been removed.
+		const count = select.getBlockCount();
+		if ( count > 0 ) {
+			return;
+		}
+
+		// If there's an custom appender, don't insert default block.
+		// We have to remember to manually move the focus elsewhere to
+		// prevent it from being lost though.
+		const { __unstableHasCustomAppender } = select.getSettings();
+		if ( __unstableHasCustomAppender ) {
+			return;
+		}
+
+		dispatch.insertDefaultBlock();
+	};
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be displayed.
+ *
+ * Contrast with `setBlockRemovalRules`.
+ *
+ * @param {string|string[]} clientIds      Client IDs of blocks to remove.
+ * @param {boolean}         selectPrevious True if the previous block or the
+ *                                         immediate parent (if no previous
+ *                                         block exists) should be selected
+ *                                         when a block is removed.
+ * @param {string}          message        Message to display in the prompt.
+ *
+ * @return {Object} Action object.
+ */
+function displayBlockRemovalPrompt( clientIds, selectPrevious, message ) {
+	return {
+		type: 'DISPLAY_BLOCK_REMOVAL_PROMPT',
+		clientIds,
+		selectPrevious,
+		message,
+	};
+}
+
+/**
+ * Returns an action object used in signalling that a block removal prompt must
+ * be cleared, either be cause the user has confirmed or canceled the request
+ * for removal.
+ *
+ * @return {Object} Action object.
+ */
+export function clearBlockRemovalPrompt() {
+	return {
+		type: 'CLEAR_BLOCK_REMOVAL_PROMPT',
+	};
+}
+
+/**
+ * Returns an action object used to set up any rules that a block editor may
+ * provide in order to prevent a user from accidentally removing certain
+ * blocks. These rules are then used to display a confirmation prompt to the
+ * user. For instance, in the Site Editor, the Query Loop block is important
+ * enough to warrant such confirmation.
+ *
+ * IMPORTANT: Registering rules implicitly signals to the `privateRemoveBlocks`
+ * action that the editor will be responsible for displaying block removal
+ * prompts and confirming deletions. This action is meant to be used by
+ * component `BlockRemovalWarningModal` only.
+ *
+ * The data is a record whose keys are block types (e.g. 'core/query') and
+ * whose values are the explanation to be shown to users (e.g. 'Query Loop
+ * displays a list of posts or pages.').
+ *
+ * Contrast with `displayBlockRemovalPrompt`.
+ *
+ * @param {Record<string,string>|false} rules Block removal rules.
+ * @return {Object} Action object.
+ */
+export function setBlockRemovalRules( rules = false ) {
+	return {
+		type: 'SET_BLOCK_REMOVAL_RULES',
+		rules,
+	};
+}
+
+/**
+ * Sets the client ID of the block settings menu that is currently open.
+ *
+ * @param {?string} clientId The block client ID.
+ * @return {Object} Action object.
+ */
+export function setOpenedBlockSettingsMenu( clientId ) {
+	return {
+		type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+		clientId,
+	};
+}
+
+export function setStyleOverride( id, style ) {
+	return {
+		type: 'SET_STYLE_OVERRIDE',
+		id,
+		style,
+	};
+}
+
+export function deleteStyleOverride( id ) {
+	return {
+		type: 'DELETE_STYLE_OVERRIDE',
+		id,
+	};
+}
+
+/**
+ * Action that sets the element that had focus when focus leaves the editor canvas.
+ *
+ * @param {Object} lastFocus The last focused element.
+ *
+ *
+ * @return {Object} Action object.
+ */
+export function setLastFocus( lastFocus = null ) {
+	return {
+		type: 'LAST_FOCUS',
+		lastFocus,
+	};
+}
+
+/**
+ * Action that stops temporarily editing as blocks.
+ *
+ * @param {string} clientId The block's clientId.
+ */
+export function stopEditingAsBlocks( clientId ) {
+	return ( { select, dispatch, registry } ) => {
+		const focusModeToRevert = unlock(
+			registry.select( blockEditorStore )
+		).getTemporarilyEditingFocusModeToRevert();
+		dispatch.__unstableMarkNextChangeAsNotPersistent();
+		dispatch.updateBlockAttributes( clientId, {
+			templateLock: 'contentOnly',
+		} );
+		dispatch.updateBlockListSettings( clientId, {
+			...select.getBlockListSettings( clientId ),
+			templateLock: 'contentOnly',
+		} );
+		dispatch.updateSettings( { focusMode: focusModeToRevert } );
+		dispatch.__unstableSetTemporarilyEditingAsBlocks();
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user has begun to drag.
+ *
+ * @return {Object} Action object.
+ */
+export function startDragging() {
+	return {
+		type: 'START_DRAGGING',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user has stopped dragging.
+ *
+ * @return {Object} Action object.
+ */
+export function stopDragging() {
+	return {
+		type: 'STOP_DRAGGING',
+	};
+}
+
+/**
+ * @param {string|null} clientId The block's clientId, or `null` to clear.
+ *
+ * @return  {Object} Action object.
+ */
+export function expandBlock( clientId ) {
+	return {
+		type: 'SET_BLOCK_EXPANDED_IN_LIST_VIEW',
+		clientId,
+	};
+}
+
+/**
+ * @param {Object} value
+ * @param {string} value.rootClientId The root client ID to insert at.
+ * @param {number} value.index        The index to insert at.
+ *
+ * @return {Object} Action object.
+ */
+export function setInsertionPoint( value ) {
+	return {
+		type: 'SET_INSERTION_POINT',
+		value,
+	};
+}
+
+/**
+ * Temporarily modify/unlock the content-only block for editions.
+ *
+ * @param {string} clientId The client id of the block.
+ */
+export const modifyContentLockBlock =
+	( clientId ) =>
+	( { select, dispatch } ) => {
+		dispatch.selectBlock( clientId );
+		dispatch.__unstableMarkNextChangeAsNotPersistent();
+		dispatch.updateBlockAttributes( clientId, {
+			templateLock: undefined,
+		} );
+		dispatch.updateBlockListSettings( clientId, {
+			...select.getBlockListSettings( clientId ),
+			templateLock: false,
+		} );
+		const focusModeToRevert = select.getSettings().focusMode;
+		dispatch.updateSettings( { focusMode: true } );
+		dispatch.__unstableSetTemporarilyEditingAsBlocks(
+			clientId,
+			focusModeToRevert
+		);
+	};
+
+/**
+ * Sets the zoom level.
+ *
+ * @param {number} zoom the new zoom level
+ * @return {Object} Action object.
+ */
+export const setZoomLevel =
+	( zoom = 100 ) =>
+	( { select, dispatch } ) => {
+		// When switching to zoom-out mode, we need to select the parent section
+		if ( zoom !== 100 ) {
+			const firstSelectedClientId = select.getBlockSelectionStart();
+			const sectionRootClientId = select.getSectionRootClientId();
+
+			if ( firstSelectedClientId ) {
+				let sectionClientId;
+
+				if ( sectionRootClientId ) {
+					const sectionClientIds =
+						select.getBlockOrder( sectionRootClientId );
+
+					// If the selected block is a section block, use it.
+					if ( sectionClientIds?.includes( firstSelectedClientId ) ) {
+						sectionClientId = firstSelectedClientId;
+					} else {
+						// If the selected block is not a section block, find
+						// the parent section that contains the selected block.
+						sectionClientId = select
+							.getBlockParents( firstSelectedClientId )
+							.find( ( parent ) =>
+								sectionClientIds.includes( parent )
+							);
+					}
+				} else {
+					sectionClientId = select.getBlockHierarchyRootClientId(
+						firstSelectedClientId
+					);
+				}
+
+				if ( sectionClientId ) {
+					dispatch.selectBlock( sectionClientId );
+				} else {
+					dispatch.clearSelectedBlock();
+				}
+
+				speak( __( 'You are currently in zoom-out mode.' ) );
+			}
+		}
+
+		dispatch( {
+			type: 'SET_ZOOM_LEVEL',
+			zoom,
+		} );
+	};
+
+/**
+ * Resets the Zoom state.
+ * @return {Object} Action object.
+ */
+export function resetZoomLevel() {
+	return {
+		type: 'RESET_ZOOM_LEVEL',
+	};
+}
diff --git a/packages/block-editor/src/store/private-keys.js b/packages/block-editor/src/store/private-keys.js
new file mode 100644
index 00000000000000..e24b4a6264e72f
--- /dev/null
+++ b/packages/block-editor/src/store/private-keys.js
@@ -0,0 +1,5 @@
+export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
+export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
+export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
+export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
+export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
new file mode 100644
index 00000000000000..c46778d889b3e0
--- /dev/null
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -0,0 +1,660 @@
+/**
+ * WordPress dependencies
+ */
+import { createSelector, createRegistrySelector } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockOrder,
+	getBlockParents,
+	getBlockEditingMode,
+	getSettings,
+	canInsertBlockType,
+	getBlockName,
+	getTemplateLock,
+	getClientIdsWithDescendants,
+	isNavigationMode,
+	getBlockRootClientId,
+} from './selectors';
+import {
+	checkAllowListRecursive,
+	getAllPatternsDependants,
+	getInsertBlockTypeDependants,
+	getGrammar,
+} from './utils';
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
+import {
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
+} from './private-keys';
+
+export { getBlockSettings } from './get-block-settings';
+
+/**
+ * Returns true if the block interface is hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function isBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}
+
+/**
+ * Gets the client ids of the last inserted blocks.
+ *
+ * @param {Object} state Global application state.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
+ */
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
+}
+
+export function getBlockWithoutAttributes( state, clientId ) {
+	return state.blocks.byClientId.get( clientId );
+}
+
+/**
+ * Returns true if all of the descendants of a block with the given client ID
+ * have an editing mode of 'disabled', or false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether the block descendants are disabled.
+ */
+export const isBlockSubtreeDisabled = ( state, clientId ) => {
+	const isChildSubtreeDisabled = ( childClientId ) => {
+		return (
+			getBlockEditingMode( state, childClientId ) === 'disabled' &&
+			getBlockOrder( state, childClientId ).every(
+				isChildSubtreeDisabled
+			)
+		);
+	};
+	return getBlockOrder( state, clientId ).every( isChildSubtreeDisabled );
+};
+
+function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+	const blockOrder = getBlockOrder( state, rootClientId );
+	const result = [];
+
+	for ( const clientId of blockOrder ) {
+		const innerBlocks = getEnabledClientIdsTreeUnmemoized(
+			state,
+			clientId
+		);
+		if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+			result.push( { clientId, innerBlocks } );
+		} else {
+			result.push( ...innerBlocks );
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Returns a tree of block objects with only clientID and innerBlocks set.
+ * Blocks with a 'disabled' editing mode are not included.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
+	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
+		state.blocks.order,
+		state.derivedBlockEditingModes,
+		state.derivedNavModeBlockEditingModes,
+		state.blockEditingModes,
+		state.settings.templateLock,
+		state.blockListSettings,
+		select( STORE_NAME ).__unstableGetEditorMode( state ),
+	] )
+);
+
+/**
+ * Returns a list of a given block's ancestors, from top to bottom. Blocks with
+ * a 'disabled' editing mode are excluded.
+ *
+ * @see getBlockParents
+ *
+ * @param {Object}  state     Global application state.
+ * @param {string}  clientId  The block client ID.
+ * @param {boolean} ascending Order results from bottom to top (true) or top
+ *                            to bottom (false).
+ */
+export const getEnabledBlockParents = createSelector(
+	( state, clientId, ascending = false ) => {
+		return getBlockParents( state, clientId, ascending ).filter(
+			( parent ) => getBlockEditingMode( state, parent ) !== 'disabled'
+		);
+	},
+	( state ) => [
+		state.blocks.parents,
+		state.blockEditingModes,
+		state.settings.templateLock,
+		state.blockListSettings,
+	]
+);
+
+/**
+ * Selector that returns the data needed to display a prompt when certain
+ * blocks are removed, or `false` if no such prompt is requested.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object|false} Data for removal prompt display, if any.
+ */
+export function getRemovalPromptData( state ) {
+	return state.removalPromptData;
+}
+
+/**
+ * Returns true if removal prompt exists, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether removal prompt exists.
+ */
+export function getBlockRemovalRules( state ) {
+	return state.blockRemovalRules;
+}
+
+/**
+ * Returns the client ID of the block settings menu that is currently open.
+ *
+ * @param {Object} state Global application state.
+ * @return {string|null} The client ID of the block menu that is currently open.
+ */
+export function getOpenedBlockSettingsMenu( state ) {
+	return state.openedBlockSettingsMenu;
+}
+
+/**
+ * Returns all style overrides, intended to be merged with global editor styles.
+ *
+ * Overrides are sorted to match the order of the blocks they relate to. This
+ * is useful to maintain correct CSS cascade order.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} An array of style ID to style override pairs.
+ */
+export const getStyleOverrides = createSelector(
+	( state ) => {
+		const clientIds = getClientIdsWithDescendants( state );
+		const clientIdMap = clientIds.reduce( ( acc, clientId, index ) => {
+			acc[ clientId ] = index;
+			return acc;
+		}, {} );
+
+		return [ ...state.styleOverrides ].sort( ( overrideA, overrideB ) => {
+			// Once the overrides Map is spread to an array, the first element
+			// is the key, while the second is the override itself including
+			// the clientId to sort by.
+			const [ , { clientId: clientIdA } ] = overrideA;
+			const [ , { clientId: clientIdB } ] = overrideB;
+
+			const aIndex = clientIdMap[ clientIdA ] ?? -1;
+			const bIndex = clientIdMap[ clientIdB ] ?? -1;
+
+			return aIndex - bIndex;
+		} );
+	},
+	( state ) => [ state.blocks.order, state.styleOverrides ]
+);
+
+/** @typedef {import('./actions').InserterMediaCategory} InserterMediaCategory */
+/**
+ * Returns the registered inserter media categories through the public API.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {InserterMediaCategory[]} Inserter media categories.
+ */
+export function getRegisteredInserterMediaCategories( state ) {
+	return state.registeredInserterMediaCategories;
+}
+
+/**
+ * Returns an array containing the allowed inserter media categories.
+ * It merges the registered media categories from extenders with the
+ * core ones. It also takes into account the allowed `mime_types`, which
+ * can be altered by `upload_mimes` filter and restrict some of them.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {InserterMediaCategory[]} Client IDs of descendants.
+ */
+export const getInserterMediaCategories = createSelector(
+	( state ) => {
+		const {
+			settings: {
+				inserterMediaCategories,
+				allowedMimeTypes,
+				enableOpenverseMediaCategory,
+			},
+			registeredInserterMediaCategories,
+		} = state;
+		// The allowed `mime_types` can be altered by `upload_mimes` filter and restrict
+		// some of them. In this case we shouldn't add the category to the available media
+		// categories list in the inserter.
+		if (
+			( ! inserterMediaCategories &&
+				! registeredInserterMediaCategories.length ) ||
+			! allowedMimeTypes
+		) {
+			return;
+		}
+		const coreInserterMediaCategoriesNames =
+			inserterMediaCategories?.map( ( { name } ) => name ) || [];
+		const mergedCategories = [
+			...( inserterMediaCategories || [] ),
+			...( registeredInserterMediaCategories || [] ).filter(
+				( { name } ) =>
+					! coreInserterMediaCategoriesNames.includes( name )
+			),
+		];
+		return mergedCategories.filter( ( category ) => {
+			// Check if Openverse category is enabled.
+			if (
+				! enableOpenverseMediaCategory &&
+				category.name === 'openverse'
+			) {
+				return false;
+			}
+			return Object.values( allowedMimeTypes ).some( ( mimeType ) =>
+				mimeType.startsWith( `${ category.mediaType }/` )
+			);
+		} );
+	},
+	( state ) => [
+		state.settings.inserterMediaCategories,
+		state.settings.allowedMimeTypes,
+		state.settings.enableOpenverseMediaCategory,
+		state.registeredInserterMediaCategories,
+	]
+);
+
+/**
+ * Returns whether there is at least one allowed pattern for inner blocks children.
+ * This is useful for deferring the parsing of all patterns until needed.
+ *
+ * @param {Object} state               Editor state.
+ * @param {string} [rootClientId=null] Target root client ID.
+ *
+ * @return {boolean} If there is at least one allowed pattern.
+ */
+export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null ) => {
+			const { getAllPatterns } = unlock( select( STORE_NAME ) );
+			const patterns = getAllPatterns();
+			const { allowedBlockTypes } = getSettings( state );
+			return patterns.some( ( pattern ) => {
+				const { inserter = true } = pattern;
+				if ( ! inserter ) {
+					return false;
+				}
+				const grammar = getGrammar( pattern );
+				return (
+					checkAllowListRecursive( grammar, allowedBlockTypes ) &&
+					grammar.every( ( { name: blockName } ) =>
+						canInsertBlockType( state, blockName, rootClientId )
+					)
+				);
+			} );
+		},
+		( state, rootClientId ) => [
+			...getAllPatternsDependants( select )( state ),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
+		]
+	)
+);
+
+function mapUserPattern(
+	userPattern,
+	__experimentalUserPatternCategories = []
+) {
+	return {
+		name: `core/block/${ userPattern.id }`,
+		id: userPattern.id,
+		type: INSERTER_PATTERN_TYPES.user,
+		title: userPattern.title.raw,
+		categories: userPattern.wp_pattern_category?.map( ( catId ) => {
+			const category = __experimentalUserPatternCategories.find(
+				( { id } ) => id === catId
+			);
+			return category ? category.slug : catId;
+		} ),
+		content: userPattern.content.raw,
+		syncStatus: userPattern.wp_pattern_sync_status,
+	};
+}
+
+export const getPatternBySlug = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, patternName ) => {
+			// Only fetch reusable blocks if we know we need them. To do: maybe
+			// use the entity record API to retrieve the block by slug.
+			if ( patternName?.startsWith( 'core/block/' ) ) {
+				const _id = parseInt(
+					patternName.slice( 'core/block/'.length ),
+					10
+				);
+				const block = unlock( select( STORE_NAME ) )
+					.getReusableBlocks()
+					.find( ( { id } ) => id === _id );
+
+				if ( ! block ) {
+					return null;
+				}
+
+				return mapUserPattern(
+					block,
+					state.settings.__experimentalUserPatternCategories
+				);
+			}
+
+			return [
+				// This setting is left for back compat.
+				...( state.settings.__experimentalBlockPatterns ?? [] ),
+				...( state.settings[ selectBlockPatternsKey ]?.( select ) ??
+					[] ),
+			].find( ( { name } ) => name === patternName );
+		},
+		( state, patternName ) =>
+			patternName?.startsWith( 'core/block/' )
+				? [
+						unlock( select( STORE_NAME ) ).getReusableBlocks(),
+						state.settings.__experimentalReusableBlocks,
+				  ]
+				: [
+						state.settings.__experimentalBlockPatterns,
+						state.settings[ selectBlockPatternsKey ]?.( select ),
+				  ]
+	)
+);
+
+export const getAllPatterns = createRegistrySelector( ( select ) =>
+	createSelector( ( state ) => {
+		return [
+			...unlock( select( STORE_NAME ) )
+				.getReusableBlocks()
+				.map( ( userPattern ) =>
+					mapUserPattern(
+						userPattern,
+						state.settings.__experimentalUserPatternCategories
+					)
+				),
+			// This setting is left for back compat.
+			...( state.settings.__experimentalBlockPatterns ?? [] ),
+			...( state.settings[ selectBlockPatternsKey ]?.( select ) ?? [] ),
+		].filter(
+			( x, index, arr ) =>
+				index === arr.findIndex( ( y ) => x.name === y.name )
+		);
+	}, getAllPatternsDependants( select ) )
+);
+
+const EMPTY_ARRAY = [];
+
+export const getReusableBlocks = createRegistrySelector(
+	( select ) => ( state ) => {
+		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
+		return (
+			( reusableBlocksSelect
+				? reusableBlocksSelect( select )
+				: state.settings.__experimentalReusableBlocks ) ?? EMPTY_ARRAY
+		);
+	}
+);
+
+/**
+ * Returns the element of the last element that had focus when focus left the editor canvas.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {Object} Element.
+ */
+export function getLastFocus( state ) {
+	return state.lastFocus;
+}
+
+/**
+ * Returns true if the user is dragging anything, or false otherwise. It is possible for a
+ * user to be dragging data from outside of the editor, so this selector is separate from
+ * the `isDraggingBlocks` selector which only returns true if the user is dragging blocks.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether user is dragging.
+ */
+export function isDragging( state ) {
+	return state.isDragging;
+}
+
+/**
+ * Retrieves the expanded block from the state.
+ *
+ * @param {Object} state Block editor state.
+ *
+ * @return {string|null} The client ID of the expanded block, if set.
+ */
+export function getExpandedBlock( state ) {
+	return state.expandedBlock;
+}
+
+/**
+ * Retrieves the client ID of the ancestor block that is content locking the block
+ * with the provided client ID.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getContentLockingParent = ( state, clientId ) => {
+	let current = clientId;
+	let result;
+	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+		if ( getTemplateLock( state, current ) === 'contentOnly' ) {
+			result = current;
+		}
+	}
+	return result;
+};
+
+/**
+ * Retrieves the client ID of the parent section block.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getParentSectionBlock = ( state, clientId ) => {
+	let current = clientId;
+	let result;
+	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+		if ( isSectionBlock( state, current ) ) {
+			result = current;
+		}
+	}
+	return result;
+};
+
+/**
+ * Retrieves the client ID is a content locking parent
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {boolean} Whether the block is a content locking parent.
+ */
+export function isSectionBlock( state, clientId ) {
+	const sectionRootClientId = getSectionRootClientId( state );
+	const sectionClientIds = getBlockOrder( state, sectionRootClientId );
+	return (
+		getBlockName( state, clientId ) === 'core/block' ||
+		getTemplateLock( state, clientId ) === 'contentOnly' ||
+		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
+	);
+}
+
+/**
+ * Retrieves the client ID of the block that is content locked but is
+ * currently being temporarily edited as a non-locked block.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The client ID of the block being temporarily edited as a non-locked block.
+ */
+export function getTemporarilyEditingAsBlocks( state ) {
+	return state.temporarilyEditingAsBlocks;
+}
+
+/**
+ * Returns the focus mode that should be reapplied when the user stops editing
+ * a content locked blocks as a block without locking.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The focus mode that should be re-set when temporarily editing as blocks stops.
+ */
+export function getTemporarilyEditingFocusModeToRevert( state ) {
+	return state.temporarilyEditingFocusModeRevert;
+}
+
+/**
+ * Returns the style attributes of multiple blocks.
+ *
+ * @param {Object}   state     Global application state.
+ * @param {string[]} clientIds An array of block client IDs.
+ *
+ * @return {Object} An object where keys are client IDs and values are the corresponding block styles or undefined.
+ */
+export const getBlockStyles = createSelector(
+	( state, clientIds ) =>
+		clientIds.reduce( ( styles, clientId ) => {
+			styles[ clientId ] = state.blocks.attributes.get( clientId )?.style;
+			return styles;
+		}, {} ),
+	( state, clientIds ) => [
+		...clientIds.map(
+			( clientId ) => state.blocks.attributes.get( clientId )?.style
+		),
+	]
+);
+
+/**
+ * Retrieves the client ID of the block which contains the blocks
+ * acting as "sections" in the editor. This is typically the "main content"
+ * of the template/post.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string|undefined} The section root client ID or undefined if not set.
+ */
+export function getSectionRootClientId( state ) {
+	return state.settings?.[ sectionRootClientIdKey ];
+}
+
+/**
+ * Returns whether the editor is considered zoomed out.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the editor is zoomed.
+ */
+export function isZoomOut( state ) {
+	return state.zoomLevel === 'auto-scaled' || state.zoomLevel < 100;
+}
+
+/**
+ * Returns whether the zoom level.
+ *
+ * @param {Object} state Global application state.
+ * @return {number|"auto-scaled"} Zoom level.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
+}
+
+/**
+ * Finds the closest block where the block is allowed to be inserted.
+ *
+ * @param {Object}            state    Editor state.
+ * @param {string[] | string} name     Block name or names.
+ * @param {string}            clientId Default insertion point.
+ *
+ * @return {string} clientID of the closest container when the block name can be inserted.
+ */
+export function getClosestAllowedInsertionPoint( state, name, clientId = '' ) {
+	const blockNames = Array.isArray( name ) ? name : [ name ];
+	const areBlockNamesAllowedInClientId = ( id ) =>
+		blockNames.every( ( currentName ) =>
+			canInsertBlockType( state, currentName, id )
+		);
+
+	// If we're trying to insert at the root level and it's not allowed
+	// Try the section root instead.
+	if ( ! clientId ) {
+		if ( areBlockNamesAllowedInClientId( clientId ) ) {
+			return clientId;
+		}
+
+		const sectionRootClientId = getSectionRootClientId( state );
+		if (
+			sectionRootClientId &&
+			areBlockNamesAllowedInClientId( sectionRootClientId )
+		) {
+			return sectionRootClientId;
+		}
+		return null;
+	}
+
+	// Traverse the block tree up until we find a place where we can insert.
+	let current = clientId;
+	while ( current !== null && ! areBlockNamesAllowedInClientId( current ) ) {
+		const parentClientId = getBlockRootClientId( state, current );
+		current = parentClientId;
+	}
+
+	return current;
+}
+
+export function getClosestAllowedInsertionPointForPattern(
+	state,
+	pattern,
+	clientId
+) {
+	const { allowedBlockTypes } = getSettings( state );
+	const isAllowed = checkAllowListRecursive(
+		getGrammar( pattern ),
+		allowedBlockTypes
+	);
+	if ( ! isAllowed ) {
+		return null;
+	}
+	const names = getGrammar( pattern ).map( ( { blockName: name } ) => name );
+	return getClosestAllowedInsertionPoint( state, names, clientId );
+}
+
+/**
+ * Where the point where the next block will be inserted into.
+ *
+ * @param {Object} state
+ * @return {Object} where the insertion point in the block editor is or null if none is set.
+ */
+export function getInsertionPoint( state ) {
+	return state.insertionPoint;
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 924b563f5710e2..edae9c392c37de 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1,19 +1,28 @@
 /**
  * External dependencies
  */
-import { omit, mapValues, isEqual, isEmpty } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
  */
 import { pipe } from '@wordpress/compose';
 import { combineReducers, select } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
+import {
+	store as blocksStore,
+	privateApis as blocksPrivateApis,
+} from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
+import { sectionRootClientIdKey } from './private-keys';
+import { unlock } from '../lock-unlock';
+
+const { isContentBlock } = unlock( blocksPrivateApis );
 
 const identity = ( x ) => x;
 
@@ -28,16 +37,18 @@ const identity = ( x ) => x;
  * @return {Object} Block order map object.
  */
 function mapBlockOrder( blocks, rootClientId = '' ) {
-	const result = { [ rootClientId ]: [] };
-
+	const result = new Map();
+	const current = [];
+	result.set( rootClientId, current );
 	blocks.forEach( ( block ) => {
 		const { clientId, innerBlocks } = block;
-
-		result[ rootClientId ].push( clientId );
-
-		Object.assign( result, mapBlockOrder( innerBlocks, clientId ) );
+		current.push( clientId );
+		mapBlockOrder( innerBlocks, clientId ).forEach(
+			( order, subClientId ) => {
+				result.set( subClientId, order );
+			}
+		);
 	} );
-
 	return result;
 }
 
@@ -51,15 +62,18 @@ function mapBlockOrder( blocks, rootClientId = '' ) {
  * @return {Object} Block order map object.
  */
 function mapBlockParents( blocks, rootClientId = '' ) {
-	return blocks.reduce(
-		( result, block ) =>
-			Object.assign(
-				result,
-				{ [ block.clientId ]: rootClientId },
-				mapBlockParents( block.innerBlocks, block.clientId )
-			),
-		{}
-	);
+	const result = [];
+	const stack = [ [ rootClientId, blocks ] ];
+	while ( stack.length ) {
+		const [ parent, currentBlocks ] = stack.shift();
+		currentBlocks.forEach( ( { innerBlocks, ...block } ) => {
+			result.push( [ block.clientId, parent ] );
+			if ( innerBlocks?.length ) {
+				stack.push( [ block.clientId, innerBlocks ] );
+			}
+		} );
+	}
+	return result;
 }
 
 /**
@@ -70,16 +84,28 @@ function mapBlockParents( blocks, rootClientId = '' ) {
  * @param {Array}    blocks    Blocks to flatten.
  * @param {Function} transform Transforming function to be applied to each block.
  *
- * @return {Object} Flattened object.
+ * @return {Array} Flattened object.
  */
 function flattenBlocks( blocks, transform = identity ) {
-	const result = {};
+	const result = [];
 
 	const stack = [ ...blocks ];
 	while ( stack.length ) {
 		const { innerBlocks, ...block } = stack.shift();
 		stack.push( ...innerBlocks );
-		result[ block.clientId ] = transform( block );
+		result.push( [ block.clientId, transform( block ) ] );
+	}
+
+	return result;
+}
+
+function getFlattenedClientIds( blocks ) {
+	const result = {};
+	const stack = [ ...blocks ];
+	while ( stack.length ) {
+		const { innerBlocks, ...block } = stack.shift();
+		stack.push( ...innerBlocks );
+		result[ block.clientId ] = true;
 	}
 
 	return result;
@@ -92,10 +118,13 @@ function flattenBlocks( blocks, transform = identity ) {
  *
  * @param {Array} blocks Blocks to flatten.
  *
- * @return {Object} Flattened block attributes object.
+ * @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;
+	} );
 }
 
 /**
@@ -105,29 +134,12 @@ function getFlattenedBlocksWithoutAttributes( blocks ) {
  *
  * @param {Array} blocks Blocks to flatten.
  *
- * @return {Object} Flattened block attributes object.
+ * @return {Array} Flattened block attributes object.
  */
 function getFlattenedBlockAttributes( blocks ) {
 	return flattenBlocks( blocks, ( block ) => block.attributes );
 }
 
-/**
- * Returns an object against which it is safe to perform mutating operations,
- * given the original object and its current working copy.
- *
- * @param {Object} original Original object.
- * @param {Object} working  Working object.
- *
- * @return {Object} Mutation-safe object.
- */
-function getMutateSafeObject( original, working ) {
-	if ( original === working ) {
-		return { ...original };
-	}
-
-	return working;
-}
-
 /**
  * Returns true if the two object arguments have the same keys, or false
  * otherwise.
@@ -138,7 +150,7 @@ function getMutateSafeObject( original, working ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( Object.keys( a ), Object.keys( b ) );
+	return fastDeepEqual( Object.keys( a ), Object.keys( b ) );
 }
 
 /**
@@ -156,13 +168,13 @@ export function isUpdatingSameBlockAttribute( action, lastAction ) {
 		action.type === 'UPDATE_BLOCK_ATTRIBUTES' &&
 		lastAction !== undefined &&
 		lastAction.type === 'UPDATE_BLOCK_ATTRIBUTES' &&
-		isEqual( action.clientIds, lastAction.clientIds ) &&
+		fastDeepEqual( action.clientIds, lastAction.clientIds ) &&
 		hasSameKeys( action.attributes, lastAction.attributes )
 	);
 }
 
-function buildBlockTree( state, blocks ) {
-	const result = {};
+function updateBlockTreeForBlocks( state, blocks ) {
+	const treeToUpdate = state.tree;
 	const stack = [ ...blocks ];
 	const flattenedBlocks = [ ...blocks ];
 	while ( stack.length ) {
@@ -172,33 +184,34 @@ function buildBlockTree( state, blocks ) {
 	}
 	// Create objects before mutating them, that way it's always defined.
 	for ( const block of flattenedBlocks ) {
-		result[ block.clientId ] = {};
+		treeToUpdate.set( block.clientId, {} );
 	}
 	for ( const block of flattenedBlocks ) {
-		result[ block.clientId ] = Object.assign( result[ block.clientId ], {
-			...state.byClientId[ block.clientId ],
-			attributes: state.attributes[ block.clientId ],
-			innerBlocks: block.innerBlocks.map(
-				( subBlock ) => result[ subBlock.clientId ]
-			),
-		} );
+		treeToUpdate.set(
+			block.clientId,
+			Object.assign( treeToUpdate.get( block.clientId ), {
+				...state.byClientId.get( block.clientId ),
+				attributes: state.attributes.get( block.clientId ),
+				innerBlocks: block.innerBlocks.map( ( subBlock ) =>
+					treeToUpdate.get( subBlock.clientId )
+				),
+			} )
+		);
 	}
-
-	return result;
 }
 
 function updateParentInnerBlocksInTree(
 	state,
-	tree,
 	updatedClientIds,
 	updateChildrenOfUpdatedClientIds = false
 ) {
+	const treeToUpdate = state.tree;
 	const uncontrolledParents = new Set( [] );
 	const controlledParents = new Set();
 	for ( const clientId of updatedClientIds ) {
 		let current = updateChildrenOfUpdatedClientIds
 			? clientId
-			: state.parents[ clientId ];
+			: state.parents.get( clientId );
 		do {
 			if ( state.controlledInnerBlocks[ current ] ) {
 				// Should stop on controlled blocks.
@@ -208,7 +221,7 @@ function updateParentInnerBlocksInTree(
 			} else {
 				// Else continue traversing up through parents.
 				uncontrolledParents.add( current );
-				current = state.parents[ current ];
+				current = state.parents.get( current );
 			}
 		} while ( current !== undefined );
 	}
@@ -216,27 +229,23 @@ function updateParentInnerBlocksInTree(
 	// To make sure the order of assignments doesn't matter,
 	// we first create empty objects and mutates the inner blocks later.
 	for ( const clientId of uncontrolledParents ) {
-		tree[ clientId ] = {
-			...tree[ clientId ],
-		};
+		treeToUpdate.set( clientId, { ...treeToUpdate.get( clientId ) } );
 	}
 	for ( const clientId of uncontrolledParents ) {
-		tree[ clientId ].innerBlocks = ( state.order[ clientId ] || [] ).map(
-			( subClientId ) => tree[ subClientId ]
-		);
+		treeToUpdate.get( clientId ).innerBlocks = (
+			state.order.get( clientId ) || []
+		).map( ( subClientId ) => treeToUpdate.get( subClientId ) );
 	}
 
 	// Controlled parent blocks, need a dedicated key for their inner blocks
 	// to be used when doing getBlocks( controlledBlockClientId ).
 	for ( const clientId of controlledParents ) {
-		tree[ 'controlled||' + clientId ] = {
-			innerBlocks: ( state.order[ clientId ] || [] ).map(
-				( subClientId ) => tree[ subClientId ]
+		treeToUpdate.set( 'controlled||' + clientId, {
+			innerBlocks: ( state.order.get( clientId ) || [] ).map(
+				( subClientId ) => treeToUpdate.get( subClientId )
 			),
-		};
+		} );
 	}
-
-	return tree;
 }
 
 /**
@@ -257,82 +266,66 @@ const withBlockTree =
 			return state;
 		}
 
-		newState.tree = state.tree ? state.tree : {};
+		newState.tree = state.tree ? state.tree : new Map();
 		switch ( action.type ) {
 			case 'RECEIVE_BLOCKS':
 			case 'INSERT_BLOCKS': {
-				const subTree = buildBlockTree( newState, action.blocks );
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				updateBlockTreeForBlocks( newState, action.blocks );
+				updateParentInnerBlocksInTree(
 					newState,
-					{
-						...newState.tree,
-						...subTree,
-					},
 					action.rootClientId ? [ action.rootClientId ] : [ '' ],
 					true
 				);
 				break;
 			}
 			case 'UPDATE_BLOCK':
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				newState.tree.set( action.clientId, {
+					...newState.tree.get( action.clientId ),
+					...newState.byClientId.get( action.clientId ),
+					attributes: newState.attributes.get( action.clientId ),
+				} );
+				updateParentInnerBlocksInTree(
 					newState,
-					{
-						...newState.tree,
-						[ action.clientId ]: {
-							...newState.tree[ action.clientId ],
-							...newState.byClientId[ action.clientId ],
-							attributes: newState.attributes[ action.clientId ],
-						},
-					},
 					[ action.clientId ],
 					false
 				);
 				break;
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
-				const newSubTree = action.clientIds.reduce(
-					( result, clientId ) => {
-						result[ clientId ] = {
-							...newState.tree[ clientId ],
-							attributes: newState.attributes[ clientId ],
-						};
-						return result;
-					},
-					{}
-				);
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				action.clientIds.forEach( ( clientId ) => {
+					newState.tree.set( clientId, {
+						...newState.tree.get( clientId ),
+						attributes: newState.attributes.get( clientId ),
+					} );
+				} );
+				updateParentInnerBlocksInTree(
 					newState,
-					{
-						...newState.tree,
-						...newSubTree,
-					},
 					action.clientIds,
 					false
 				);
 				break;
 			}
 			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
-				const subTree = buildBlockTree( newState, action.blocks );
-				newState.tree = updateParentInnerBlocksInTree(
+				const inserterClientIds = getFlattenedClientIds(
+					action.blocks
+				);
+				newState.tree = new Map( newState.tree );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.tree.delete( clientId );
+					// Controlled inner blocks are only removed
+					// if the block doesn't move to another position
+					// otherwise their content will be lost.
+					if ( ! inserterClientIds[ clientId ] ) {
+						newState.tree.delete( 'controlled||' + clientId );
+					}
+				} );
+
+				updateBlockTreeForBlocks( newState, action.blocks );
+				updateParentInnerBlocksInTree(
 					newState,
-					{
-						...omit(
-							newState.tree,
-							action.replacedClientIds.concat(
-								// Controlled inner blocks are only removed
-								// if the block doesn't move to another position
-								// otherwise their content will be lost.
-								action.replacedClientIds
-									.filter(
-										( clientId ) => ! subTree[ clientId ]
-									)
-									.map(
-										( clientId ) =>
-											'controlled||' + clientId
-									)
-							)
-						),
-						...subTree,
-					},
 					action.blocks.map( ( b ) => b.clientId ),
 					false
 				);
@@ -340,19 +333,17 @@ const withBlockTree =
 				// If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents[ clientId ] !== undefined &&
-						( state.parents[ clientId ] === '' ||
-							newState.byClientId[ state.parents[ clientId ] ] )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents[ clientId ]
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
-				newState.tree = updateParentInnerBlocksInTree(
+				updateParentInnerBlocksInTree(
 					newState,
-					newState.tree,
 					parentsOfRemovedBlocks,
 					true
 				);
@@ -361,26 +352,22 @@ const withBlockTree =
 			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents[ clientId ] !== undefined &&
-						( state.parents[ clientId ] === '' ||
-							newState.byClientId[ state.parents[ clientId ] ] )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents[ clientId ]
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.tree.delete( clientId );
+					newState.tree.delete( 'controlled||' + clientId );
+				} );
+				updateParentInnerBlocksInTree(
 					newState,
-					omit(
-						newState.tree,
-						action.removedClientIds.concat(
-							action.removedClientIds.map(
-								( clientId ) => 'controlled||' + clientId
-							)
-						)
-					),
 					parentsOfRemovedBlocks,
 					true
 				);
@@ -395,9 +382,9 @@ const withBlockTree =
 				if ( action.toRootClientId ) {
 					updatedBlockUids.push( action.toRootClientId );
 				}
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				updateParentInnerBlocksInTree(
 					newState,
-					newState.tree,
 					updatedBlockUids,
 					true
 				);
@@ -408,39 +395,35 @@ const withBlockTree =
 				const updatedBlockUids = [
 					action.rootClientId ? action.rootClientId : '',
 				];
-				newState.tree = updateParentInnerBlocksInTree(
+				newState.tree = new Map( newState.tree );
+				updateParentInnerBlocksInTree(
 					newState,
-					newState.tree,
 					updatedBlockUids,
 					true
 				);
 				break;
 			}
 			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-				const updatedBlockUids = Object.entries( newState.attributes )
-					.filter( ( [ clientId, attributes ] ) => {
-						return (
-							newState.byClientId[ clientId ].name ===
-								'core/block' &&
-							attributes.ref === action.updatedId
-						);
-					} )
-					.map( ( [ clientId ] ) => clientId );
-
-				newState.tree = updateParentInnerBlocksInTree(
+				const updatedBlockUids = [];
+				newState.attributes.forEach( ( attributes, clientId ) => {
+					if (
+						newState.byClientId.get( clientId ).name ===
+							'core/block' &&
+						attributes.ref === action.updatedId
+					) {
+						updatedBlockUids.push( clientId );
+					}
+				} );
+				newState.tree = new Map( newState.tree );
+				updatedBlockUids.forEach( ( clientId ) => {
+					newState.tree.set( clientId, {
+						...newState.byClientId.get( clientId ),
+						attributes: newState.attributes.get( clientId ),
+						innerBlocks: newState.tree.get( clientId ).innerBlocks,
+					} );
+				} );
+				updateParentInnerBlocksInTree(
 					newState,
-					{
-						...newState.tree,
-						...updatedBlockUids.reduce( ( result, clientId ) => {
-							result[ clientId ] = {
-								...newState.byClientId[ clientId ],
-								attributes: newState.attributes[ clientId ],
-								innerBlocks:
-									newState.tree[ clientId ].innerBlocks,
-							};
-							return result;
-						}, {} ),
-					},
 					updatedBlockUids,
 					false
 				);
@@ -463,10 +446,27 @@ const withBlockTree =
 function withPersistentBlockChange( reducer ) {
 	let lastAction;
 	let markNextChangeAsNotPersistent = false;
+	let explicitPersistent;
 
 	return ( state, action ) => {
 		let nextState = reducer( state, action );
 
+		let nextIsPersistentChange;
+		if ( action.type === 'SET_EXPLICIT_PERSISTENT' ) {
+			explicitPersistent = action.isPersistentChange;
+			nextIsPersistentChange = state.isPersistentChange ?? true;
+		}
+
+		if ( explicitPersistent !== undefined ) {
+			nextIsPersistentChange = explicitPersistent;
+			return nextIsPersistentChange === nextState.isPersistentChange
+				? nextState
+				: {
+						...nextState,
+						isPersistentChange: nextIsPersistentChange,
+				  };
+		}
+
 		const isExplicitPersistentChange =
 			action.type === 'MARK_LAST_CHANGE_AS_PERSISTENT' ||
 			markNextChangeAsNotPersistent;
@@ -477,7 +477,7 @@ function withPersistentBlockChange( reducer ) {
 			markNextChangeAsNotPersistent =
 				action.type === 'MARK_NEXT_CHANGE_AS_NOT_PERSISTENT';
 
-			const nextIsPersistentChange = state?.isPersistentChange ?? true;
+			nextIsPersistentChange = state?.isPersistentChange ?? true;
 			if ( state.isPersistentChange === nextIsPersistentChange ) {
 				return state;
 			}
@@ -549,7 +549,7 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
 		let result = clientIds;
 		for ( let i = 0; i < result.length; i++ ) {
 			if (
-				! state.order[ result[ i ] ] ||
+				! state.order.get( result[ i ] ) ||
 				( action.keepControlledInnerBlocks &&
 					action.keepControlledInnerBlocks[ result[ i ] ] )
 			) {
@@ -560,7 +560,7 @@ const withInnerBlocksRemoveCascade = ( reducer ) => ( state, action ) => {
 				result = [ ...result ];
 			}
 
-			result.push( ...state.order[ result[ i ] ] );
+			result.push( ...state.order.get( result[ i ] ) );
 		}
 		return result;
 	};
@@ -601,23 +601,22 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 	if ( action.type === 'RESET_BLOCKS' ) {
 		const newState = {
 			...state,
-			byClientId: getFlattenedBlocksWithoutAttributes( action.blocks ),
-			attributes: getFlattenedBlockAttributes( action.blocks ),
+			byClientId: new Map(
+				getFlattenedBlocksWithoutAttributes( action.blocks )
+			),
+			attributes: new Map( getFlattenedBlockAttributes( action.blocks ) ),
 			order: mapBlockOrder( action.blocks ),
-			parents: mapBlockParents( action.blocks ),
+			parents: new Map( mapBlockParents( action.blocks ) ),
 			controlledInnerBlocks: {},
 		};
 
-		const subTree = buildBlockTree( newState, action.blocks );
-		newState.tree = {
-			...subTree,
-			// Root.
-			'': {
-				innerBlocks: action.blocks.map(
-					( subBlock ) => subTree[ subBlock.clientId ]
-				),
-			},
-		};
+		newState.tree = new Map( state?.tree );
+		updateBlockTreeForBlocks( newState, action.blocks );
+		newState.tree.set( '', {
+			innerBlocks: action.blocks.map( ( subBlock ) =>
+				newState.tree.get( subBlock.clientId )
+			),
+		} );
 
 		return newState;
 	}
@@ -663,11 +662,11 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 	// marked block in the block state so that they can be reattached to the
 	// marked block when we re-insert everything a few lines below.
 	let stateAfterBlocksRemoval = state;
-	if ( state.order[ action.rootClientId ] ) {
+	if ( state.order.get( action.rootClientId ) ) {
 		stateAfterBlocksRemoval = reducer( stateAfterBlocksRemoval, {
 			type: 'REMOVE_BLOCKS',
 			keepControlledInnerBlocks: nestedControllers,
-			clientIds: state.order[ action.rootClientId ],
+			clientIds: state.order.get( action.rootClientId ),
 		} );
 	}
 	let stateAfterInsert = stateAfterBlocksRemoval;
@@ -681,25 +680,20 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 		// We need to re-attach the controlled inner blocks to the blocks tree and
 		// preserve their block order. Otherwise, an inner block controller's blocks
 		// will be deleted entirely from its entity.
-		stateAfterInsert.order = {
-			...stateAfterInsert.order,
-			...Object.keys( nestedControllers ).reduce( ( result, key ) => {
-				if ( state.order[ key ] ) {
-					result[ key ] = state.order[ key ];
-				}
-				return result;
-			}, {} ),
-		};
-		stateAfterInsert.tree = {
-			...stateAfterInsert.tree,
-			...Object.keys( nestedControllers ).reduce( ( result, _key ) => {
-				const key = `controlled||${ _key }`;
-				if ( state.tree[ key ] ) {
-					result[ key ] = state.tree[ key ];
-				}
-				return result;
-			}, {} ),
-		};
+		const stateAfterInsertOrder = new Map( stateAfterInsert.order );
+		Object.keys( nestedControllers ).forEach( ( key ) => {
+			if ( state.order.get( key ) ) {
+				stateAfterInsertOrder.set( key, state.order.get( key ) );
+			}
+		} );
+		stateAfterInsert.order = stateAfterInsertOrder;
+		stateAfterInsert.tree = new Map( stateAfterInsert.tree );
+		Object.keys( nestedControllers ).forEach( ( _key ) => {
+			const key = `controlled||${ _key }`;
+			if ( state.tree.has( key ) ) {
+				stateAfterInsert.tree.set( key, state.tree.get( key ) );
+			}
+		} );
 	}
 	return stateAfterInsert;
 };
@@ -724,21 +718,16 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
 		}
 
 		state = { ...state };
-
-		state.attributes = mapValues(
-			state.attributes,
-			( attributes, clientId ) => {
-				const { name } = state.byClientId[ clientId ];
-				if ( name === 'core/block' && attributes.ref === id ) {
-					return {
-						...attributes,
-						ref: updatedId,
-					};
-				}
-
-				return attributes;
+		state.attributes = new Map( state.attributes );
+		state.attributes.forEach( ( attributes, clientId ) => {
+			const { name } = state.byClientId.get( clientId );
+			if ( name === 'core/block' && attributes.ref === id ) {
+				state.attributes.set( clientId, {
+					...attributes,
+					ref: updatedId,
+				} );
 			}
-		);
+		} );
 	}
 
 	return reducer( state, action );
@@ -784,163 +773,212 @@ export const blocks = pipe(
 	withIgnoredBlockChange,
 	withResetControlledBlocks
 )( {
-	byClientId( state = {}, action ) {
+	// The state is using a Map instead of a plain object for performance reasons.
+	// You can run the "./test/performance.js" unit test to check the impact
+	// code changes can have on this reducer.
+	byClientId( state = new Map(), action ) {
 		switch ( action.type ) {
 			case 'RECEIVE_BLOCKS':
-			case 'INSERT_BLOCKS':
-				return {
-					...state,
-					...getFlattenedBlocksWithoutAttributes( action.blocks ),
-				};
-
-			case 'UPDATE_BLOCK':
+			case 'INSERT_BLOCKS': {
+				const newState = new Map( state );
+				getFlattenedBlocksWithoutAttributes( action.blocks ).forEach(
+					( [ key, value ] ) => {
+						newState.set( key, value );
+					}
+				);
+				return newState;
+			}
+			case 'UPDATE_BLOCK': {
 				// Ignore updates if block isn't known.
-				if ( ! state[ action.clientId ] ) {
+				if ( ! state.has( action.clientId ) ) {
 					return state;
 				}
 
 				// 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;
 				}
 
-				return {
-					...state,
-					[ action.clientId ]: {
-						...state[ action.clientId ],
-						...changes,
-					},
-				};
+				const newState = new Map( state );
+				newState.set( action.clientId, {
+					...state.get( action.clientId ),
+					...changes,
+				} );
+				return newState;
+			}
 
-			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
+			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
 				if ( ! action.blocks ) {
 					return state;
 				}
 
-				return {
-					...omit( state, action.replacedClientIds ),
-					...getFlattenedBlocksWithoutAttributes( action.blocks ),
-				};
+				const newState = new Map( state );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
 
-			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-				return omit( state, action.removedClientIds );
+				getFlattenedBlocksWithoutAttributes( action.blocks ).forEach(
+					( [ key, value ] ) => {
+						newState.set( key, value );
+					}
+				);
+				return newState;
+			}
+
+			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const newState = new Map( state );
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				return newState;
+			}
 		}
 
 		return state;
 	},
 
-	attributes( state = {}, action ) {
+	// The state is using a Map instead of a plain object for performance reasons.
+	// You can run the "./test/performance.js" unit test to check the impact
+	// code changes can have on this reducer.
+	attributes( state = new Map(), action ) {
 		switch ( action.type ) {
 			case 'RECEIVE_BLOCKS':
-			case 'INSERT_BLOCKS':
-				return {
-					...state,
-					...getFlattenedBlockAttributes( action.blocks ),
-				};
+			case 'INSERT_BLOCKS': {
+				const newState = new Map( state );
+				getFlattenedBlockAttributes( action.blocks ).forEach(
+					( [ key, value ] ) => {
+						newState.set( key, value );
+					}
+				);
+				return newState;
+			}
 
-			case 'UPDATE_BLOCK':
+			case 'UPDATE_BLOCK': {
 				// Ignore updates if block isn't known or there are no attribute changes.
 				if (
-					! state[ action.clientId ] ||
+					! state.get( action.clientId ) ||
 					! action.updates.attributes
 				) {
 					return state;
 				}
 
-				return {
-					...state,
-					[ action.clientId ]: {
-						...state[ action.clientId ],
-						...action.updates.attributes,
-					},
-				};
+				const newState = new Map( state );
+				newState.set( action.clientId, {
+					...state.get( action.clientId ),
+					...action.updates.attributes,
+				} );
+				return newState;
+			}
 
+			case 'SYNC_DERIVED_BLOCK_ATTRIBUTES':
 			case 'UPDATE_BLOCK_ATTRIBUTES': {
 				// Avoid a state change if none of the block IDs are known.
-				if ( action.clientIds.every( ( id ) => ! state[ id ] ) ) {
+				if ( action.clientIds.every( ( id ) => ! state.get( id ) ) ) {
 					return state;
 				}
 
-				const next = action.clientIds.reduce(
-					( accumulator, id ) => ( {
-						...accumulator,
-						[ id ]: Object.entries(
-							action.uniqueByBlock
-								? action.attributes[ id ]
-								: action.attributes ?? {}
-						).reduce( ( result, [ key, value ] ) => {
-							// Consider as updates only changed values.
-							if ( value !== result[ key ] ) {
-								result = getMutateSafeObject(
-									state[ id ],
-									result
-								);
-								result[ key ] = value;
-							}
-
-							return result;
-						}, state[ id ] ),
-					} ),
-					{}
-				);
-
-				if (
-					action.clientIds.every(
-						( id ) => next[ id ] === state[ id ]
-					)
-				) {
-					return state;
+				let hasChange = false;
+				const newState = new Map( state );
+				for ( const clientId of action.clientIds ) {
+					const updatedAttributeEntries = Object.entries(
+						action.uniqueByBlock
+							? action.attributes[ clientId ]
+							: action.attributes ?? {}
+					);
+					if ( updatedAttributeEntries.length === 0 ) {
+						continue;
+					}
+					let hasUpdatedAttributes = false;
+					const existingAttributes = state.get( clientId );
+					const newAttributes = {};
+					updatedAttributeEntries.forEach( ( [ key, value ] ) => {
+						if ( existingAttributes[ key ] !== value ) {
+							hasUpdatedAttributes = true;
+							newAttributes[ key ] = value;
+						}
+					} );
+					hasChange = hasChange || hasUpdatedAttributes;
+					if ( hasUpdatedAttributes ) {
+						newState.set( clientId, {
+							...existingAttributes,
+							...newAttributes,
+						} );
+					}
 				}
 
-				return { ...state, ...next };
+				return hasChange ? newState : state;
 			}
 
-			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
+			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
 				if ( ! action.blocks ) {
 					return state;
 				}
 
-				return {
-					...omit( state, action.replacedClientIds ),
-					...getFlattenedBlockAttributes( action.blocks ),
-				};
+				const newState = new Map( state );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				getFlattenedBlockAttributes( action.blocks ).forEach(
+					( [ key, value ] ) => {
+						newState.set( key, value );
+					}
+				);
+				return newState;
+			}
 
-			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-				return omit( state, action.removedClientIds );
+			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const newState = new Map( state );
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				return newState;
+			}
 		}
 
 		return state;
 	},
 
-	order( state = {}, action ) {
+	// The state is using a Map instead of a plain object for performance reasons.
+	// You can run the "./test/performance.js" unit test to check the impact
+	// code changes can have on this reducer.
+	order( state = new Map(), action ) {
 		switch ( action.type ) {
 			case 'RECEIVE_BLOCKS': {
 				const blockOrder = mapBlockOrder( action.blocks );
-				return {
-					...state,
-					...omit( blockOrder, '' ),
-					'': ( state?.[ '' ] || [] ).concat( blockOrder[ '' ] ),
-				};
+				const newState = new Map( state );
+				blockOrder.forEach( ( order, clientId ) => {
+					if ( clientId !== '' ) {
+						newState.set( clientId, order );
+					}
+				} );
+				newState.set(
+					'',
+					( state.get( '' ) ?? [] ).concat( blockOrder[ '' ] )
+				);
+				return newState;
 			}
 			case 'INSERT_BLOCKS': {
 				const { rootClientId = '' } = action;
-				const subState = state[ rootClientId ] || [];
+				const subState = state.get( rootClientId ) || [];
 				const mappedBlocks = mapBlockOrder(
 					action.blocks,
 					rootClientId
 				);
 				const { index = subState.length } = action;
-
-				return {
-					...state,
-					...mappedBlocks,
-					[ rootClientId ]: insertAt(
+				const newState = new Map( state );
+				mappedBlocks.forEach( ( order, clientId ) => {
+					newState.set( clientId, order );
+				} );
+				newState.set(
+					rootClientId,
+					insertAt(
 						subState,
-						mappedBlocks[ rootClientId ],
+						mappedBlocks.get( rootClientId ),
 						index
-					),
-				};
+					)
+				);
+				return newState;
 			}
 
 			case 'MOVE_BLOCKS_TO_POSITION': {
@@ -949,65 +987,68 @@ export const blocks = pipe(
 					toRootClientId = '',
 					clientIds,
 				} = action;
-				const { index = state[ toRootClientId ].length } = action;
+				const { index = state.get( toRootClientId ).length } = action;
 
 				// Moving inside the same parent block.
 				if ( fromRootClientId === toRootClientId ) {
-					const subState = state[ toRootClientId ];
+					const subState = state.get( toRootClientId );
 					const fromIndex = subState.indexOf( clientIds[ 0 ] );
-					return {
-						...state,
-						[ toRootClientId ]: moveTo(
-							state[ toRootClientId ],
+					const newState = new Map( state );
+					newState.set(
+						toRootClientId,
+						moveTo(
+							state.get( toRootClientId ),
 							fromIndex,
 							index,
 							clientIds.length
-						),
-					};
+						)
+					);
+					return newState;
 				}
 
 				// Moving from a parent block to another.
-				return {
-					...state,
-					[ fromRootClientId ]:
-						state[ fromRootClientId ]?.filter(
-							( id ) => ! clientIds.includes( id )
-						) ?? [],
-					[ toRootClientId ]: insertAt(
-						state[ toRootClientId ],
-						clientIds,
-						index
-					),
-				};
+				const newState = new Map( state );
+				newState.set(
+					fromRootClientId,
+					state
+						.get( fromRootClientId )
+						?.filter( ( id ) => ! clientIds.includes( id ) ) ?? []
+				);
+				newState.set(
+					toRootClientId,
+					insertAt( state.get( toRootClientId ), clientIds, index )
+				);
+				return newState;
 			}
 
 			case 'MOVE_BLOCKS_UP': {
 				const { clientIds, rootClientId = '' } = action;
 				const firstClientId = clientIds[ 0 ];
-				const subState = state[ rootClientId ];
+				const subState = state.get( rootClientId );
 
 				if ( ! subState.length || firstClientId === subState[ 0 ] ) {
 					return state;
 				}
 
 				const firstIndex = subState.indexOf( firstClientId );
-
-				return {
-					...state,
-					[ rootClientId ]: moveTo(
+				const newState = new Map( state );
+				newState.set(
+					rootClientId,
+					moveTo(
 						subState,
 						firstIndex,
 						firstIndex - 1,
 						clientIds.length
-					),
-				};
+					)
+				);
+				return newState;
 			}
 
 			case 'MOVE_BLOCKS_DOWN': {
 				const { clientIds, rootClientId = '' } = action;
 				const firstClientId = clientIds[ 0 ];
 				const lastClientId = clientIds[ clientIds.length - 1 ];
-				const subState = state[ rootClientId ];
+				const subState = state.get( rootClientId );
 
 				if (
 					! subState.length ||
@@ -1017,16 +1058,17 @@ export const blocks = pipe(
 				}
 
 				const firstIndex = subState.indexOf( firstClientId );
-
-				return {
-					...state,
-					[ rootClientId ]: moveTo(
+				const newState = new Map( state );
+				newState.set(
+					rootClientId,
+					moveTo(
 						subState,
 						firstIndex,
 						firstIndex + 1,
 						clientIds.length
-					),
-				};
+					)
+				);
+				return newState;
 			}
 
 			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
@@ -1036,55 +1078,52 @@ export const blocks = pipe(
 				}
 
 				const mappedBlocks = mapBlockOrder( action.blocks );
+				const newState = new Map( state );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				mappedBlocks.forEach( ( order, clientId ) => {
+					if ( clientId !== '' ) {
+						newState.set( clientId, order );
+					}
+				} );
+				newState.forEach( ( order, clientId ) => {
+					const newSubOrder = Object.values( order ).reduce(
+						( result, subClientId ) => {
+							if ( subClientId === clientIds[ 0 ] ) {
+								return [ ...result, ...mappedBlocks.get( '' ) ];
+							}
 
-				return pipe( [
-					( nextState ) =>
-						omit( nextState, action.replacedClientIds ),
-					( nextState ) => ( {
-						...nextState,
-						...omit( mappedBlocks, '' ),
-					} ),
-					( nextState ) =>
-						mapValues( nextState, ( subState ) =>
-							Object.values( subState ).reduce(
-								( result, clientId ) => {
-									if ( clientId === clientIds[ 0 ] ) {
-										return [
-											...result,
-											...mappedBlocks[ '' ],
-										];
-									}
-
-									if (
-										clientIds.indexOf( clientId ) === -1
-									) {
-										result.push( clientId );
-									}
-
-									return result;
-								},
-								[]
-							)
-						),
-				] )( state );
-			}
+							if ( clientIds.indexOf( subClientId ) === -1 ) {
+								result.push( subClientId );
+							}
 
-			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-				return pipe( [
-					// Remove inner block ordering for removed blocks.
-					( nextState ) => omit( nextState, action.removedClientIds ),
+							return result;
+						},
+						[]
+					);
+					newState.set( clientId, newSubOrder );
+				} );
+				return newState;
+			}
 
-					// Remove deleted blocks from other blocks' orderings.
-					( nextState ) =>
-						mapValues(
-							nextState,
-							( subState ) =>
-								subState?.filter(
-									( id ) =>
-										! action.removedClientIds.includes( id )
-								) ?? []
-						),
-				] )( state );
+			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const newState = new Map( state );
+				// Remove inner block ordering for removed blocks.
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				newState.forEach( ( order, clientId ) => {
+					const newSubOrder =
+						order?.filter(
+							( id ) => ! action.removedClientIds.includes( id )
+						) ?? [];
+					if ( newSubOrder.length !== order.length ) {
+						newState.set( clientId, newSubOrder );
+					}
+				} );
+				return newState;
+			}
 		}
 
 		return state;
@@ -1092,44 +1131,55 @@ export const blocks = pipe(
 
 	// While technically redundant data as the inverse of `order`, it serves as
 	// an optimization for the selectors which derive the ancestry of a block.
-	parents( state = {}, action ) {
+	parents( state = new Map(), action ) {
 		switch ( action.type ) {
-			case 'RECEIVE_BLOCKS':
-				return {
-					...state,
-					...mapBlockParents( action.blocks ),
-				};
-
-			case 'INSERT_BLOCKS':
-				return {
-					...state,
-					...mapBlockParents(
-						action.blocks,
-						action.rootClientId || ''
-					),
-				};
-
+			case 'RECEIVE_BLOCKS': {
+				const newState = new Map( state );
+				mapBlockParents( action.blocks ).forEach(
+					( [ key, value ] ) => {
+						newState.set( key, value );
+					}
+				);
+				return newState;
+			}
+			case 'INSERT_BLOCKS': {
+				const newState = new Map( state );
+				mapBlockParents(
+					action.blocks,
+					action.rootClientId || ''
+				).forEach( ( [ key, value ] ) => {
+					newState.set( key, value );
+				} );
+				return newState;
+			}
 			case 'MOVE_BLOCKS_TO_POSITION': {
-				return {
-					...state,
-					...action.clientIds.reduce( ( accumulator, id ) => {
-						accumulator[ id ] = action.toRootClientId || '';
-						return accumulator;
-					}, {} ),
-				};
+				const newState = new Map( state );
+				action.clientIds.forEach( ( id ) => {
+					newState.set( id, action.toRootClientId || '' );
+				} );
+				return newState;
 			}
 
-			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-				return {
-					...omit( state, action.replacedClientIds ),
-					...mapBlockParents(
-						action.blocks,
-						state[ action.clientIds[ 0 ] ]
-					),
-				};
-
-			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
-				return omit( state, action.removedClientIds );
+			case 'REPLACE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const newState = new Map( state );
+				action.replacedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				mapBlockParents(
+					action.blocks,
+					state.get( action.clientIds[ 0 ] )
+				).forEach( ( [ key, value ] ) => {
+					newState.set( key, value );
+				} );
+				return newState;
+			}
+			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN': {
+				const newState = new Map( state );
+				action.removedClientIds.forEach( ( clientId ) => {
+					newState.delete( clientId );
+				} );
+				return newState;
+			}
 		}
 
 		return state;
@@ -1189,6 +1239,27 @@ export function isTyping( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning dragging state. It is possible for a user to be dragging
+ * data from outside of the editor, so this state is separate from `draggedBlocks`.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isDragging( state = false, action ) {
+	switch ( action.type ) {
+		case 'START_DRAGGING':
+			return true;
+
+		case 'STOP_DRAGGING':
+			return false;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning dragged block client id.
  *
@@ -1378,9 +1449,19 @@ export function selection( state = {}, action ) {
 			}
 	}
 
+	const selectionStart = selectionHelper( state.selectionStart, action );
+	const selectionEnd = selectionHelper( state.selectionEnd, action );
+
+	if (
+		selectionStart === state.selectionStart &&
+		selectionEnd === state.selectionEnd
+	) {
+		return state;
+	}
+
 	return {
-		selectionStart: selectionHelper( state.selectionStart, action ),
-		selectionEnd: selectionHelper( state.selectionEnd, action ),
+		selectionStart,
+		selectionEnd,
 	};
 }
 
@@ -1422,24 +1503,74 @@ export function isSelectionEnabled( state = true, action ) {
 }
 
 /**
- * Reducer returning the initial block selection.
- *
- * Currently this in only used to restore the selection after block deletion and
- * pasting new content.This reducer should eventually be removed in favour of setting
- * selection directly.
+ * Reducer returning the data needed to display a prompt when certain blocks
+ * are removed, or `false` if no such prompt is requested.
  *
  * @param {boolean} state  Current state.
  * @param {Object}  action Dispatched action.
  *
- * @return {number|null} Initial position: 0, -1 or null.
+ * @return {Object|false} Data for removal prompt display, if any.
  */
-export function initialPosition( state = null, action ) {
-	if (
-		action.type === 'REPLACE_BLOCKS' &&
-		action.initialPosition !== undefined
-	) {
-		return action.initialPosition;
-	} else if (
+function removalPromptData( state = false, action ) {
+	switch ( action.type ) {
+		case 'DISPLAY_BLOCK_REMOVAL_PROMPT':
+			const { clientIds, selectPrevious, message } = action;
+			return {
+				clientIds,
+				selectPrevious,
+				message,
+			};
+		case 'CLEAR_BLOCK_REMOVAL_PROMPT':
+			return false;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning any rules that a block editor may provide in order to
+ * prevent a user from accidentally removing certain blocks. These rules are
+ * then used to display a confirmation prompt to the user. For instance, in the
+ * Site Editor, the Query Loop block is important enough to warrant such
+ * confirmation.
+ *
+ * The data is a record whose keys are block types (e.g. 'core/query') and
+ * whose values are the explanation to be shown to users (e.g. 'Query Loop
+ * displays a list of posts or pages.').
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {Record<string,string>} Updated state.
+ */
+function blockRemovalRules( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_REMOVAL_RULES':
+			return action.rules;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the initial block selection.
+ *
+ * Currently this in only used to restore the selection after block deletion and
+ * pasting new content.This reducer should eventually be removed in favour of setting
+ * selection directly.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {number|null} Initial position: 0, -1 or null.
+ */
+export function initialPosition( state = null, action ) {
+	if (
+		action.type === 'REPLACE_BLOCKS' &&
+		action.initialPosition !== undefined
+	) {
+		return action.initialPosition;
+	} else if (
 		[
 			'MULTI_SELECT',
 			'SELECT_BLOCK',
@@ -1479,20 +1610,26 @@ export function blocksMode( state = {}, action ) {
  *
  * @return {Object} Updated state.
  */
-export function insertionPoint( state = null, action ) {
+export function insertionCue( state = null, action ) {
 	switch ( action.type ) {
 		case 'SHOW_INSERTION_POINT': {
-			const { rootClientId, index, __unstableWithInserter, operation } =
-				action;
+			const {
+				rootClientId,
+				index,
+				__unstableWithInserter,
+				operation,
+				nearestSide,
+			} = action;
 			const nextState = {
 				rootClientId,
 				index,
 				__unstableWithInserter,
 				operation,
+				nearestSide,
 			};
 
 			// Bail out updates if the states are the same.
-			return isEqual( state, nextState ) ? state : nextState;
+			return fastDeepEqual( state, nextState ) ? state : nextState;
 		}
 
 		case 'HIDE_INSERTION_POINT':
@@ -1532,11 +1669,30 @@ export function template( state = { isValid: true }, action ) {
  */
 export function settings( state = SETTINGS_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'UPDATE_SETTINGS':
-			return {
-				...state,
-				...action.settings,
-			};
+		case 'UPDATE_SETTINGS': {
+			const updatedSettings = action.reset
+				? {
+						...SETTINGS_DEFAULTS,
+						...action.settings,
+				  }
+				: {
+						...state,
+						...action.settings,
+				  };
+
+			Object.defineProperty( updatedSettings, '__unstableIsPreviewMode', {
+				get() {
+					deprecated( '__unstableIsPreviewMode', {
+						since: '6.8',
+						alternative: 'isPreviewMode',
+					} );
+
+					return this.isPreviewMode;
+				},
+			} );
+
+			return updatedSettings;
+		}
 	}
 
 	return state;
@@ -1553,38 +1709,42 @@ export function settings( state = SETTINGS_DEFAULTS, action ) {
 export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
-		case 'REPLACE_BLOCKS':
-			return action.blocks.reduce( ( prevState, block ) => {
-				const { attributes, name: blockName } = block;
-				const match = select( blocksStore ).getActiveBlockVariation(
-					blockName,
-					attributes
-				);
-				// If a block variation match is found change the name to be the same with the
-				// one that is used for block variations in the Inserter (`getItemFromVariation`).
-				let id = match?.name
-					? `${ blockName }/${ match.name }`
-					: blockName;
-				const insert = { name: id };
-				if ( blockName === 'core/block' ) {
-					insert.ref = attributes.ref;
-					id += '/' + attributes.ref;
-				}
+		case 'REPLACE_BLOCKS': {
+			const nextInsertUsage = action.blocks.reduce(
+				( prevUsage, block ) => {
+					const { attributes, name: blockName } = block;
+					let id = blockName;
+					// If a block variation match is found change the name to be the same with the
+					// one that is used for block variations in the Inserter (`getItemFromVariation`).
+					const match = select( blocksStore ).getActiveBlockVariation(
+						blockName,
+						attributes
+					);
+					if ( match?.name ) {
+						id += '/' + match.name;
+					}
+					if ( blockName === 'core/block' ) {
+						id += '/' + attributes.ref;
+					}
 
-				return {
-					...prevState,
-					insertUsage: {
-						...prevState.insertUsage,
+					return {
+						...prevUsage,
 						[ id ]: {
 							time: action.time,
-							count: prevState.insertUsage[ id ]
-								? prevState.insertUsage[ id ].count + 1
+							count: prevUsage[ id ]
+								? prevUsage[ id ].count + 1
 								: 1,
-							insert,
 						},
-					},
-				};
-			}, state );
+					};
+				},
+				state.insertUsage
+			);
+
+			return {
+				...state,
+				insertUsage: nextInsertUsage,
+			};
+		}
 	}
 
 	return state;
@@ -1605,72 +1765,49 @@ 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 updates =
+				typeof action.clientId === 'string'
+					? { [ action.clientId ]: action.settings }
+					: action.clientId;
+
+			// Remove settings that are the same as the current state.
+			for ( const clientId in updates ) {
+				if ( ! updates[ clientId ] ) {
+					if ( ! state[ clientId ] ) {
+						delete updates[ clientId ];
+					}
+				} else if (
+					fastDeepEqual( state[ clientId ], updates[ clientId ] )
+				) {
+					delete updates[ clientId ];
 				}
+			}
 
+			if ( Object.keys( updates ).length === 0 ) {
 				return state;
 			}
 
-			if ( isEqual( state[ clientId ], action.settings ) ) {
-				return state;
+			const merged = { ...state, ...updates };
+
+			for ( const clientId in updates ) {
+				if ( ! updates[ clientId ] ) {
+					delete merged[ clientId ];
+				}
 			}
 
-			return {
-				...state,
-				[ clientId ]: action.settings,
-			};
+			return merged;
 		}
 	}
 	return state;
 };
 
-/**
- * Reducer returning which mode is enabled.
- *
- * @param {string} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function editorMode( state = 'edit', action ) {
-	// Let inserting block in navigation mode always trigger Edit mode.
-	if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
-		return 'edit';
-	}
-
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return action.mode;
-	}
-
-	return state;
-}
-
-/**
- * Reducer returning whether the block moving mode is enabled or not.
- *
- * @param {string|null} state  Current state.
- * @param {Object}      action Dispatched action.
- *
- * @return {string|null} Updated state.
- */
-export function hasBlockMovingClientId( state = null, action ) {
-	if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
-		return action.hasBlockMovingClientId;
-	}
-
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return null;
-	}
-
-	return state;
-}
-
 /**
  * Reducer return an updated state representing the most recent block attribute
  * update. The state is structured as an object where the keys represent the
@@ -1707,45 +1844,6 @@ export function lastBlockAttributesChange( state = null, action ) {
 	return state;
 }
 
-/**
- * Reducer returning automatic change state.
- *
- * @param {?string} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function automaticChangeStatus( state, action ) {
-	switch ( action.type ) {
-		case 'MARK_AUTOMATIC_CHANGE':
-			return 'pending';
-		case 'MARK_AUTOMATIC_CHANGE_FINAL':
-			if ( state === 'pending' ) {
-				return 'final';
-			}
-
-			return;
-		case 'SELECTION_CHANGE':
-			// As long as the state is not final, ignore any selection changes.
-			if ( state !== 'final' ) {
-				return state;
-			}
-
-			return;
-		// Undoing an automatic change should still be possible after mouse
-		// move or after visibility change.
-		case 'SET_BLOCK_VISIBILITY':
-		case 'START_TYPING':
-		case 'STOP_TYPING':
-		case 'UPDATE_BLOCK_LIST_SETTINGS':
-			return state;
-	}
-
-	// TODO: This is a source of bug, as each time there's a change in timing,
-	// or a new action is added, this could break.
-	// Reset the state by default (for any action not handled).
-}
-
 /**
  * Reducer returning current highlighted block.
  *
@@ -1775,6 +1873,27 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning current expanded block in the list view.
+ *
+ * @param {string|null} state  Current expanded block.
+ * @param {Object}      action Dispatched action.
+ *
+ * @return {string|null} Updated state.
+ */
+export function expandedBlock( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_EXPANDED_IN_LIST_VIEW':
+			return action.clientId;
+		case 'SELECT_BLOCK':
+			if ( action.clientId !== state ) {
+				return null;
+			}
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block insertion event list state.
  *
@@ -1786,14 +1905,18 @@ export function highlightedBlock( state, action ) {
 export function lastBlockInserted( state = {}, action ) {
 	switch ( action.type ) {
 		case 'INSERT_BLOCKS':
+		case 'REPLACE_BLOCKS':
 			if ( ! action.blocks.length ) {
 				return state;
 			}
 
-			const clientId = action.blocks[ 0 ].clientId;
+			const clientIds = action.blocks.map( ( block ) => {
+				return block.clientId;
+			} );
+
 			const source = action.meta?.source;
 
-			return { clientId, source };
+			return { clientIds, source };
 		case 'RESET_BLOCKS':
 			return {};
 	}
@@ -1815,8 +1938,175 @@ export function temporarilyEditingAsBlocks( state = '', action ) {
 	return state;
 }
 
-export default combineReducers( {
+/**
+ * Reducer returning the focus mode that should be used when temporarily edit as blocks finishes.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function temporarilyEditingFocusModeRevert( state = '', action ) {
+	if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
+		return action.focusModeToRevert;
+	}
+	return state;
+}
+
+/**
+ * Reducer returning a map of block client IDs to block editing modes.
+ *
+ * @param {Map}    state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Map} Updated state.
+ */
+export function blockEditingModes( state = new Map(), action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_EDITING_MODE':
+			return new Map( state ).set( action.clientId, action.mode );
+		case 'UNSET_BLOCK_EDITING_MODE': {
+			const newState = new Map( state );
+			newState.delete( action.clientId );
+			return newState;
+		}
+		case 'RESET_BLOCKS': {
+			return state.has( '' )
+				? new Map().set( '', state.get( '' ) )
+				: state;
+		}
+	}
+	return state;
+}
+
+/**
+ * Reducer returning the clientId of the block settings menu that is currently open.
+ *
+ * @param {string|null} state  Current state.
+ * @param {Object}      action Dispatched action.
+ *
+ * @return {string|null} Updated state.
+ */
+export function openedBlockSettingsMenu( state = null, action ) {
+	if ( 'SET_OPENED_BLOCK_SETTINGS_MENU' === action.type ) {
+		return action?.clientId ?? null;
+	}
+	return state;
+}
+
+/**
+ * Reducer returning a map of style IDs to style overrides.
+ *
+ * @param {Map}    state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Map} Updated state.
+ */
+export function styleOverrides( state = new Map(), action ) {
+	switch ( action.type ) {
+		case 'SET_STYLE_OVERRIDE':
+			return new Map( state ).set( action.id, action.style );
+		case 'DELETE_STYLE_OVERRIDE': {
+			const newState = new Map( state );
+			newState.delete( action.id );
+			return newState;
+		}
+	}
+	return state;
+}
+
+/**
+ * Reducer returning a map of the registered inserter media categories.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Array} Updated state.
+ */
+export function registeredInserterMediaCategories( state = [], action ) {
+	switch ( action.type ) {
+		case 'REGISTER_INSERTER_MEDIA_CATEGORY':
+			return [ ...state, action.category ];
+	}
+
+	return state;
+}
+
+/**
+ * Reducer setting last focused element
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function lastFocus( state = false, action ) {
+	switch ( action.type ) {
+		case 'LAST_FOCUS':
+			return action.lastFocus;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer setting currently hovered block.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function hoveredBlockClientId( state = false, action ) {
+	switch ( action.type ) {
+		case 'HOVER_BLOCK':
+			return action.clientId;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer setting zoom out state.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {number} Updated state.
+ */
+export function zoomLevel( state = 100, action ) {
+	switch ( action.type ) {
+		case 'SET_ZOOM_LEVEL':
+			return action.zoom;
+		case 'RESET_ZOOM_LEVEL':
+			return 100;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer setting the insertion point
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function insertionPoint( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_INSERTION_POINT':
+			return action.value;
+		case 'SELECT_BLOCK':
+			return null;
+	}
+
+	return state;
+}
+
+const combinedReducers = combineReducers( {
 	blocks,
+	isDragging,
 	isTyping,
 	isBlockInterfaceHidden,
 	draggedBlocks,
@@ -1827,15 +2117,708 @@ export default combineReducers( {
 	blocksMode,
 	blockListSettings,
 	insertionPoint,
+	insertionCue,
 	template,
 	settings,
 	preferences,
 	lastBlockAttributesChange,
-	editorMode,
-	hasBlockMovingClientId,
-	automaticChangeStatus,
+	lastFocus,
+	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,
+	temporarilyEditingFocusModeRevert,
 	blockVisibility,
+	blockEditingModes,
+	styleOverrides,
+	removalPromptData,
+	blockRemovalRules,
+	openedBlockSettingsMenu,
+	registeredInserterMediaCategories,
+	hoveredBlockClientId,
+	zoomLevel,
 } );
+
+/**
+ * Retrieves a block's tree structure, handling both controlled and uncontrolled inner blocks.
+ *
+ * @param {Object} state    The current state object.
+ * @param {string} clientId The client ID of the block to retrieve.
+ *
+ * @return {Object|undefined} The block tree object, or undefined if not found. For controlled blocks,
+ *                           returns a merged tree with controlled inner blocks.
+ */
+function getBlockTreeBlock( state, clientId ) {
+	if ( clientId === '' ) {
+		const rootBlock = state.blocks.tree.get( clientId );
+
+		if ( ! rootBlock ) {
+			return;
+		}
+
+		// Patch the root block to have a clientId property.
+		// TODO - consider updating the blocks reducer so that the root block has this property.
+		return {
+			clientId: '',
+			...rootBlock,
+		};
+	}
+
+	if ( ! state.blocks.controlledInnerBlocks[ clientId ] ) {
+		return state.blocks.tree.get( clientId );
+	}
+
+	const controlledTree = state.blocks.tree.get( `controlled||${ clientId }` );
+	const regularTree = state.blocks.tree.get( clientId );
+
+	return {
+		...regularTree,
+		innerBlocks: controlledTree?.innerBlocks,
+	};
+}
+
+/**
+ * Recursively traverses through a block tree of a given block and executes a callback for each block.
+ *
+ * @param {Object}   state    The store state.
+ * @param {string}   clientId The clientId of the block to start traversing from.
+ * @param {Function} callback Function to execute for each block encountered during traversal.
+ *                            The callback receives the current block as its argument.
+ */
+function traverseBlockTree( state, clientId, callback ) {
+	const parentTree = getBlockTreeBlock( state, clientId );
+	if ( ! parentTree ) {
+		return;
+	}
+
+	callback( parentTree );
+
+	if ( ! parentTree?.innerBlocks?.length ) {
+		return;
+	}
+
+	for ( const block of parentTree?.innerBlocks ) {
+		traverseBlockTree( state, block.clientId, callback );
+	}
+}
+
+/**
+ * Checks if a block has a parent in a list of client IDs, and if so returns the client ID of the parent.
+ *
+ * @param {Object} state     The current state object.
+ * @param {string} clientId  The client ID of the block to search the parents of.
+ * @param {Array}  clientIds The client IDs of the blocks to check.
+ *
+ * @return {string|undefined} The client ID of the parent block if found, undefined otherwise.
+ */
+function findParentInClientIdsList( state, clientId, clientIds ) {
+	let parent = state.blocks.parents.get( clientId );
+	while ( parent ) {
+		if ( clientIds.includes( parent ) ) {
+			return parent;
+		}
+		parent = state.blocks.parents.get( parent );
+	}
+}
+
+/**
+ * Checks if a block has any bindings in its metadata attributes.
+ *
+ * @param {Object} block The block object to check for bindings.
+ * @return {boolean}    True if the block has bindings, false otherwise.
+ */
+function hasBindings( block ) {
+	return (
+		block?.attributes?.metadata?.bindings &&
+		Object.keys( block?.attributes?.metadata?.bindings ).length
+	);
+}
+
+/**
+ * Computes and returns derived block editing modes for a given block tree.
+ *
+ * This function calculates the editing modes for each block in the tree, taking into account
+ * various factors such as zoom level, navigation mode, sections, and synced patterns.
+ *
+ * @param {Object}  state        The current state object.
+ * @param {boolean} isNavMode    Whether the navigation mode is active.
+ * @param {string}  treeClientId The client ID of the root block for the tree. Defaults to an empty string.
+ * @return {Map} A Map containing the derived block editing modes, keyed by block client ID.
+ */
+function getDerivedBlockEditingModesForTree(
+	state,
+	isNavMode = false,
+	treeClientId = ''
+) {
+	const isZoomedOut =
+		state?.zoomLevel < 100 || state?.zoomLevel === 'auto-scaled';
+	const derivedBlockEditingModes = new Map();
+
+	// When there are sections, the majority of blocks are disabled,
+	// so the default block editing mode is set to disabled.
+	const sectionRootClientId = state.settings?.[ sectionRootClientIdKey ];
+	const sectionClientIds = state.blocks.order.get( sectionRootClientId );
+	const syncedPatternClientIds = Object.keys(
+		state.blocks.controlledInnerBlocks
+	).filter(
+		( clientId ) =>
+			state.blocks.byClientId?.get( clientId )?.name === 'core/block'
+	);
+
+	traverseBlockTree( state, treeClientId, ( block ) => {
+		const { clientId, name: blockName } = block;
+		if ( isZoomedOut || isNavMode ) {
+			// If the root block is the section root set its editing mode to contentOnly.
+			if ( clientId === sectionRootClientId ) {
+				derivedBlockEditingModes.set( clientId, 'contentOnly' );
+				return;
+			}
+
+			// There are no sections, so everything else is disabled.
+			if ( ! sectionClientIds?.length ) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
+
+			if ( sectionClientIds.includes( clientId ) ) {
+				derivedBlockEditingModes.set( clientId, 'contentOnly' );
+				return;
+			}
+
+			// If zoomed out, all blocks that aren't sections or the section root are
+			// disabled.
+			// If the tree root is not in a section, set its editing mode to disabled.
+			if (
+				isZoomedOut ||
+				! findParentInClientIdsList( state, clientId, sectionClientIds )
+			) {
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+				return;
+			}
+
+			// Handle synced pattern content so the inner blocks of a synced pattern are
+			// properly disabled.
+			if ( syncedPatternClientIds.length ) {
+				const parentPatternClientId = findParentInClientIdsList(
+					state,
+					clientId,
+					syncedPatternClientIds
+				);
+
+				if ( parentPatternClientId ) {
+					// This is a pattern nested in another pattern, it should be disabled.
+					if (
+						findParentInClientIdsList(
+							state,
+							parentPatternClientId,
+							syncedPatternClientIds
+						)
+					) {
+						derivedBlockEditingModes.set( clientId, 'disabled' );
+						return;
+					}
+
+					if ( hasBindings( block ) ) {
+						derivedBlockEditingModes.set( clientId, 'contentOnly' );
+						return;
+					}
+
+					// Synced pattern content without a binding isn't editable
+					// from the instance, the user has to edit the pattern source,
+					// so return 'disabled'.
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+					return;
+				}
+			}
+
+			if ( blockName && isContentBlock( blockName ) ) {
+				derivedBlockEditingModes.set( clientId, 'contentOnly' );
+				return;
+			}
+
+			derivedBlockEditingModes.set( clientId, 'disabled' );
+			return;
+		}
+
+		if ( syncedPatternClientIds.length ) {
+			// Synced pattern blocks (core/block).
+			if ( syncedPatternClientIds.includes( clientId ) ) {
+				// This is a pattern nested in another pattern, it should be disabled.
+				if (
+					findParentInClientIdsList(
+						state,
+						clientId,
+						syncedPatternClientIds
+					)
+				) {
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+					return;
+				}
+
+				// Else do nothing, use the default block editing mode.
+				return;
+			}
+
+			// Inner blocks of synced patterns.
+			const parentPatternClientId = findParentInClientIdsList(
+				state,
+				clientId,
+				syncedPatternClientIds
+			);
+			if ( parentPatternClientId ) {
+				// This is a pattern nested in another pattern, it should be disabled.
+				if (
+					findParentInClientIdsList(
+						state,
+						parentPatternClientId,
+						syncedPatternClientIds
+					)
+				) {
+					derivedBlockEditingModes.set( clientId, 'disabled' );
+					return;
+				}
+
+				if ( hasBindings( block ) ) {
+					derivedBlockEditingModes.set( clientId, 'contentOnly' );
+					return;
+				}
+
+				// Synced pattern content without a binding isn't editable
+				// from the instance, the user has to edit the pattern source,
+				// so return 'disabled'.
+				derivedBlockEditingModes.set( clientId, 'disabled' );
+			}
+		}
+	} );
+
+	return derivedBlockEditingModes;
+}
+
+/**
+ * Updates the derived block editing modes based on added and removed blocks.
+ *
+ * This function handles the updating of block editing modes when blocks are added,
+ * removed, or moved within the editor.
+ *
+ * It only returns a value when modifications are made to the block editing modes.
+ *
+ * @param {Object}  options                    The options for updating derived block editing modes.
+ * @param {Object}  options.prevState          The previous state object.
+ * @param {Object}  options.nextState          The next state object.
+ * @param {Array}   [options.addedBlocks]      An array of blocks that were added.
+ * @param {Array}   [options.removedClientIds] An array of client IDs of blocks that were removed.
+ * @param {boolean} [options.isNavMode]        Whether the navigation mode is active.
+ * @return {Map|undefined} The updated derived block editing modes, or undefined if no changes were made.
+ */
+function getDerivedBlockEditingModesUpdates( {
+	prevState,
+	nextState,
+	addedBlocks,
+	removedClientIds,
+	isNavMode = false,
+} ) {
+	const prevDerivedBlockEditingModes = isNavMode
+		? prevState.derivedNavModeBlockEditingModes
+		: prevState.derivedBlockEditingModes;
+	let nextDerivedBlockEditingModes;
+
+	// Perform removals before additions to handle cases like the `MOVE_BLOCKS_TO_POSITION` action.
+	// That action removes a set of clientIds, but adds the same blocks back in a different location.
+	// If removals were performed after additions, those moved clientIds would be removed incorrectly.
+	removedClientIds?.forEach( ( clientId ) => {
+		// The actions only receive parent block IDs for removal.
+		// Recurse through the block tree to ensure all blocks are removed.
+		// Specifically use the previous state, before the blocks were removed.
+		traverseBlockTree( prevState, clientId, ( block ) => {
+			if ( prevDerivedBlockEditingModes.has( block.clientId ) ) {
+				if ( ! nextDerivedBlockEditingModes ) {
+					nextDerivedBlockEditingModes = new Map(
+						prevDerivedBlockEditingModes
+					);
+				}
+				nextDerivedBlockEditingModes.delete( block.clientId );
+			}
+		} );
+	} );
+
+	addedBlocks?.forEach( ( addedBlock ) => {
+		traverseBlockTree( nextState, addedBlock.clientId, ( block ) => {
+			const updates = getDerivedBlockEditingModesForTree(
+				nextState,
+				isNavMode,
+				block.clientId
+			);
+
+			if ( updates.size ) {
+				if ( ! nextDerivedBlockEditingModes ) {
+					nextDerivedBlockEditingModes = new Map( [
+						...( prevDerivedBlockEditingModes?.size
+							? prevDerivedBlockEditingModes
+							: [] ),
+						...updates,
+					] );
+				} else {
+					nextDerivedBlockEditingModes = new Map( [
+						...( nextDerivedBlockEditingModes?.size
+							? nextDerivedBlockEditingModes
+							: [] ),
+						...updates,
+					] );
+				}
+			}
+		} );
+	} );
+
+	return nextDerivedBlockEditingModes;
+}
+
+/**
+ * Higher-order reducer that adds derived block editing modes to the state.
+ *
+ * This function wraps a reducer and enhances it to handle actions that affect
+ * block editing modes. It updates the derivedBlockEditingModes in the state
+ * based on various actions such as adding, removing, or moving blocks, or changing
+ * the editor mode.
+ *
+ * @param {Function} reducer The original reducer function to be wrapped.
+ * @return {Function} A new reducer function that includes derived block editing modes handling.
+ */
+export function withDerivedBlockEditingModes( reducer ) {
+	return ( state, action ) => {
+		const nextState = reducer( state, action );
+
+		// An exception is needed here to still recompute the block editing modes when
+		// the editor mode changes since the editor mode isn't stored within the
+		// block editor state and changing it won't trigger an altered new state.
+		if ( action.type !== 'SET_EDITOR_MODE' && nextState === state ) {
+			return state;
+		}
+
+		switch ( action.type ) {
+			case 'REMOVE_BLOCKS': {
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						removedClientIds: action.clientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						removedClientIds: action.clientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'RECEIVE_BLOCKS':
+			case 'INSERT_BLOCKS': {
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'SET_HAS_CONTROLLED_INNER_BLOCKS': {
+				const updatedBlock = nextState.blocks.tree.get(
+					action.clientId
+				);
+				// The block might have been removed.
+				if ( ! updatedBlock ) {
+					break;
+				}
+
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: [ updatedBlock ],
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: [ updatedBlock ],
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'REPLACE_BLOCKS': {
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						removedClientIds: action.clientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						removedClientIds: action.clientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'REPLACE_INNER_BLOCKS': {
+				// Get the clientIds of the blocks that are being replaced
+				// from the old state, before they were removed.
+				const removedClientIds = state.blocks.order.get(
+					action.rootClientId
+				);
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						removedClientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks: action.blocks,
+						removedClientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'MOVE_BLOCKS_TO_POSITION': {
+				const addedBlocks = action.clientIds.map( ( clientId ) => {
+					return nextState.blocks.byClientId.get( clientId );
+				} );
+				const nextDerivedBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds: action.clientIds,
+						isNavMode: false,
+					} );
+				const nextDerivedNavModeBlockEditingModes =
+					getDerivedBlockEditingModesUpdates( {
+						prevState: state,
+						nextState,
+						addedBlocks,
+						removedClientIds: action.clientIds,
+						isNavMode: true,
+					} );
+
+				if (
+					nextDerivedBlockEditingModes ||
+					nextDerivedNavModeBlockEditingModes
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							nextDerivedBlockEditingModes ??
+							state.derivedBlockEditingModes,
+						derivedNavModeBlockEditingModes:
+							nextDerivedNavModeBlockEditingModes ??
+							state.derivedNavModeBlockEditingModes,
+					};
+				}
+				break;
+			}
+			case 'UPDATE_SETTINGS': {
+				// Recompute the entire tree if the section root changes.
+				if (
+					state?.settings?.[ sectionRootClientIdKey ] !==
+					nextState?.settings?.[ sectionRootClientIdKey ]
+				) {
+					return {
+						...nextState,
+						derivedBlockEditingModes:
+							getDerivedBlockEditingModesForTree(
+								nextState,
+								false /* Nav mode off */
+							),
+						derivedNavModeBlockEditingModes:
+							getDerivedBlockEditingModesForTree(
+								nextState,
+								true /* Nav mode on */
+							),
+					};
+				}
+				break;
+			}
+			case 'RESET_BLOCKS':
+			case 'SET_EDITOR_MODE':
+			case 'RESET_ZOOM_LEVEL':
+			case 'SET_ZOOM_LEVEL': {
+				// Recompute the entire tree if the editor mode or zoom level changes,
+				// or if all the blocks are reset.
+				return {
+					...nextState,
+					derivedBlockEditingModes:
+						getDerivedBlockEditingModesForTree(
+							nextState,
+							false /* Nav mode off */
+						),
+					derivedNavModeBlockEditingModes:
+						getDerivedBlockEditingModesForTree(
+							nextState,
+							true /* Nav mode on */
+						),
+				};
+			}
+		}
+
+		// If there's no change, the derivedBlockEditingModes from the previous
+		// state need to be preserved.
+		nextState.derivedBlockEditingModes =
+			state?.derivedBlockEditingModes ?? new Map();
+		nextState.derivedNavModeBlockEditingModes =
+			state?.derivedNavModeBlockEditingModes ?? new Map();
+
+		return nextState;
+	};
+}
+
+function withAutomaticChangeReset( reducer ) {
+	return ( state, action ) => {
+		const nextState = reducer( state, action );
+
+		if ( ! state ) {
+			return nextState;
+		}
+
+		// Take over the last value without creating a new reference.
+		nextState.automaticChangeStatus = state.automaticChangeStatus;
+
+		if ( action.type === 'MARK_AUTOMATIC_CHANGE' ) {
+			return {
+				...nextState,
+				automaticChangeStatus: 'pending',
+			};
+		}
+
+		if (
+			action.type === 'MARK_AUTOMATIC_CHANGE_FINAL' &&
+			state.automaticChangeStatus === 'pending'
+		) {
+			return {
+				...nextState,
+				automaticChangeStatus: 'final',
+			};
+		}
+
+		// If there's a change that doesn't affect blocks or selection, maintain
+		// the current status.
+		if (
+			nextState.blocks === state.blocks &&
+			nextState.selection === state.selection
+		) {
+			return nextState;
+		}
+
+		// As long as the state is not final, ignore any selection changes.
+		if (
+			nextState.automaticChangeStatus !== 'final' &&
+			nextState.selection !== state.selection
+		) {
+			return nextState;
+		}
+
+		// Reset the status if blocks change or selection changes (when status is final).
+		return {
+			...nextState,
+			automaticChangeStatus: undefined,
+		};
+	};
+}
+
+export default pipe(
+	withDerivedBlockEditingModes,
+	withAutomaticChangeReset
+)( combinedReducers );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 0345b29ff93323..dc90f351732524 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-import { map, find, filter, orderBy } from 'lodash';
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
@@ -13,20 +7,42 @@ import {
 	getBlockVariations,
 	hasBlockSupport,
 	getPossibleBlockTransformations,
-	parse,
 	switchToBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { symbol } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
 import { create, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { mapRichTextSettings } from './utils';
+import {
+	isFiltered,
+	checkAllowListRecursive,
+	checkAllowList,
+	getAllPatternsDependants,
+	getInsertBlockTypeDependants,
+	getParsedPattern,
+	getGrammar,
+} from './utils';
+import { orderBy } from '../utils/sorting';
+import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
+
+import {
+	getContentLockingParent,
+	getTemporarilyEditingAsBlocks,
+	getTemporarilyEditingFocusModeToRevert,
+	getSectionRootClientId,
+	isSectionBlock,
+	getParentSectionBlock,
+	isZoomOut,
+} from './private-selectors';
 
 /**
  * A block selection object.
@@ -55,6 +71,21 @@ const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
  */
 const EMPTY_ARRAY = [];
 
+/**
+ * Shared reference to an empty Set for cases where it is important to avoid
+ * returning a new Set reference on every invocation, as in a connected or
+ * other pure component which performs `shouldComponentUpdate` check on props.
+ * This should be used as a last resort, since the normalized data should be
+ * maintained by the reducer result in state.
+ *
+ * @type {Set}
+ */
+const EMPTY_SET = new Set();
+
+const DEFAULT_INSERTER_OPTIONS = {
+	[ isFiltered ]: true,
+};
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -65,12 +96,12 @@ const EMPTY_ARRAY = [];
  * @return {string} Block name.
  */
 export function getBlockName( state, clientId ) {
-	const block = state.blocks.byClientId[ clientId ];
+	const block = state.blocks.byClientId.get( clientId );
 	const socialLinkName = 'core/social-link';
 
 	if ( Platform.OS !== 'web' && block?.name === socialLinkName ) {
-		const attributes = state.blocks.attributes[ clientId ];
-		const { service } = attributes;
+		const attributes = state.blocks.attributes.get( clientId );
+		const { service } = attributes ?? {};
 
 		return service ? `${ socialLinkName }-${ service }` : socialLinkName;
 	}
@@ -86,7 +117,7 @@ export function getBlockName( state, clientId ) {
  * @return {boolean} Is Valid.
  */
 export function isBlockValid( state, clientId ) {
-	const block = state.blocks.byClientId[ clientId ];
+	const block = state.blocks.byClientId.get( clientId );
 	return !! block && block.isValid;
 }
 
@@ -100,12 +131,12 @@ export function isBlockValid( state, clientId ) {
  * @return {Object?} Block attributes.
  */
 export function getBlockAttributes( state, clientId ) {
-	const block = state.blocks.byClientId[ clientId ];
+	const block = state.blocks.byClientId.get( clientId );
 	if ( ! block ) {
 		return null;
 	}
 
-	return state.blocks.attributes[ clientId ];
+	return state.blocks.attributes.get( clientId );
 }
 
 /**
@@ -130,17 +161,16 @@ export function getBlockAttributes( state, clientId ) {
  * @return {Object} Parsed block object.
  */
 export function getBlock( state, clientId ) {
-	const block = state.blocks.byClientId[ clientId ];
-	if ( ! block ) {
+	if ( ! state.blocks.byClientId.has( clientId ) ) {
 		return null;
 	}
 
-	return state.blocks.tree[ clientId ];
+	return state.blocks.tree.get( clientId );
 }
 
 export const __unstableGetBlockWithoutInnerBlocks = createSelector(
 	( state, clientId ) => {
-		const block = state.blocks.byClientId[ clientId ];
+		const block = state.blocks.byClientId.get( clientId );
 		if ( ! block ) {
 			return null;
 		}
@@ -151,8 +181,8 @@ export const __unstableGetBlockWithoutInnerBlocks = createSelector(
 		};
 	},
 	( state, clientId ) => [
-		state.blocks.byClientId[ clientId ],
-		state.blocks.attributes[ clientId ],
+		state.blocks.byClientId.get( clientId ),
+		state.blocks.attributes.get( clientId ),
 	]
 );
 
@@ -171,23 +201,34 @@ export function getBlocks( state, rootClientId ) {
 		! rootClientId || ! areInnerBlocksControlled( state, rootClientId )
 			? rootClientId || ''
 			: 'controlled||' + rootClientId;
-	return state.blocks.tree[ treeKey ]?.innerBlocks || EMPTY_ARRAY;
+	return state.blocks.tree.get( treeKey )?.innerBlocks || EMPTY_ARRAY;
 }
 
 /**
  * Returns a stripped down block object containing only its client ID,
  * and its inner blocks' client IDs.
  *
+ * @deprecated
+ *
  * @param {Object} state    Editor state.
  * @param {string} clientId Client ID of the block to get.
  *
  * @return {Object} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdWithClientIdsTree = createSelector(
-	( state, clientId ) => ( {
-		clientId,
-		innerBlocks: __unstableGetClientIdsTree( state, clientId ),
-	} ),
+	( state, clientId ) => {
+		deprecated(
+			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdWithClientIdsTree",
+			{
+				since: '6.3',
+				version: '6.5',
+			}
+		);
+		return {
+			clientId,
+			innerBlocks: __unstableGetClientIdsTree( state, clientId ),
+		};
+	},
 	( state ) => [ state.blocks.order ]
 );
 
@@ -196,16 +237,26 @@ export const __unstableGetClientIdWithClientIdsTree = createSelector(
  * given root, consisting of stripped down block objects containing only
  * their client IDs, and their inner blocks' client IDs.
  *
+ * @deprecated
+ *
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {Object[]} Client IDs of the post blocks.
  */
 export const __unstableGetClientIdsTree = createSelector(
-	( state, rootClientId = '' ) =>
-		map( getBlockOrder( state, rootClientId ), ( clientId ) =>
+	( state, rootClientId = '' ) => {
+		deprecated(
+			"wp.data.select( 'core/block-editor' ).__unstableGetClientIdsTree",
+			{
+				since: '6.3',
+				version: '6.5',
+			}
+		);
+		return getBlockOrder( state, rootClientId ).map( ( clientId ) =>
 			__unstableGetClientIdWithClientIdsTree( state, clientId )
-		),
+		);
+	},
 	( state ) => [ state.blocks.order ]
 );
 
@@ -214,23 +265,37 @@ export const __unstableGetClientIdsTree = createSelector(
  * given. Returned ids are ordered first by the order of the ids given, then
  * by the order that they appear in the editor.
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of blocks to inspect.
+ * @param {Object}          state   Global application state.
+ * @param {string|string[]} rootIds Client ID(s) for which descendant blocks are to be returned.
  *
- * @return {Array} ids of descendants.
+ * @return {Array} Client IDs of descendants.
  */
 export const getClientIdsOfDescendants = createSelector(
-	( state, clientIds ) => {
-		const collectedIds = [];
-		for ( const givenId of clientIds ) {
-			for ( const descendantId of getBlockOrder( state, givenId ) ) {
-				collectedIds.push(
-					descendantId,
-					...getClientIdsOfDescendants( state, [ descendantId ] )
-				);
+	( state, rootIds ) => {
+		rootIds = Array.isArray( rootIds ) ? [ ...rootIds ] : [ rootIds ];
+		const ids = [];
+
+		// Add the descendants of the root blocks first.
+		for ( const rootId of rootIds ) {
+			const order = state.blocks.order.get( rootId );
+			if ( order ) {
+				ids.push( ...order );
 			}
 		}
-		return collectedIds;
+
+		let index = 0;
+
+		// Add the descendants of the descendants, recursively.
+		while ( index < ids.length ) {
+			const id = ids[ index ];
+			const order = state.blocks.order.get( id );
+			if ( order ) {
+				ids.splice( index + 1, 0, ...order );
+			}
+			index++;
+		}
+
+		return ids;
 	},
 	( state ) => [ state.blocks.order ]
 );
@@ -244,19 +309,8 @@ export const getClientIdsOfDescendants = createSelector(
  *
  * @return {Array} ids of top-level and descendant blocks.
  */
-export const getClientIdsWithDescendants = createSelector(
-	( state ) => {
-		const collectedIds = [];
-		for ( const topLevelId of getBlockOrder( state ) ) {
-			collectedIds.push(
-				topLevelId,
-				...getClientIdsOfDescendants( state, [ topLevelId ] )
-			);
-		}
-		return collectedIds;
-	},
-	( state ) => [ state.blocks.order ]
-);
+export const getClientIdsWithDescendants = ( state ) =>
+	getClientIdsOfDescendants( state, '' );
 
 /**
  * Returns the total number of blocks, or the total number of blocks with a specific name in a post.
@@ -273,37 +327,65 @@ export const getGlobalBlockCount = createSelector(
 		if ( ! blockName ) {
 			return clientIds.length;
 		}
-		return clientIds.reduce( ( accumulator, clientId ) => {
-			const block = state.blocks.byClientId[ clientId ];
-			return block.name === blockName ? accumulator + 1 : accumulator;
-		}, 0 );
+		let count = 0;
+		for ( const clientId of clientIds ) {
+			const block = state.blocks.byClientId.get( clientId );
+			if ( block.name === blockName ) {
+				count++;
+			}
+		}
+		return count;
 	},
 	( state ) => [ state.blocks.order, state.blocks.byClientId ]
 );
 
 /**
- * Returns all global blocks that match a blockName. Results include nested blocks.
+ * Returns all blocks that match a blockName. Results include nested blocks.
  *
- * @param {Object}  state     Global application state.
- * @param {?string} blockName Optional block name, if not specified, returns an empty array.
+ * @param {Object}   state     Global application state.
+ * @param {string[]} blockName Block name(s) for which clientIds are to be returned.
  *
  * @return {Array} Array of clientIds of blocks with name equal to blockName.
  */
-export const __experimentalGetGlobalBlocksByName = createSelector(
+export const getBlocksByName = createSelector(
 	( state, blockName ) => {
 		if ( ! blockName ) {
 			return EMPTY_ARRAY;
 		}
+		const blockNames = Array.isArray( blockName )
+			? blockName
+			: [ blockName ];
 		const clientIds = getClientIdsWithDescendants( state );
 		const foundBlocks = clientIds.filter( ( clientId ) => {
-			const block = state.blocks.byClientId[ clientId ];
-			return block.name === blockName;
+			const block = state.blocks.byClientId.get( clientId );
+			return blockNames.includes( block.name );
 		} );
 		return foundBlocks.length > 0 ? foundBlocks : EMPTY_ARRAY;
 	},
 	( state ) => [ state.blocks.order, state.blocks.byClientId ]
 );
 
+/**
+ * Returns all global blocks that match a blockName. Results include nested blocks.
+ *
+ * @deprecated
+ *
+ * @param {Object}   state     Global application state.
+ * @param {string[]} blockName Block name(s) for which clientIds are to be returned.
+ *
+ * @return {Array} Array of clientIds of blocks with name equal to blockName.
+ */
+export function __experimentalGetGlobalBlocksByName( state, blockName ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__experimentalGetGlobalBlocksByName",
+		{
+			since: '6.5',
+			alternative: `wp.data.select( 'core/block-editor' ).getBlocksByName`,
+		}
+	);
+	return getBlocksByName( state, blockName );
+}
+
 /**
  * Given an array of block client IDs, returns the corresponding array of block
  * objects.
@@ -315,17 +397,32 @@ export const __experimentalGetGlobalBlocksByName = createSelector(
  */
 export const getBlocksByClientId = createSelector(
 	( state, clientIds ) =>
-		map(
-			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
+		( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map(
 			( clientId ) => getBlock( state, clientId )
 		),
 	( state, clientIds ) =>
-		map(
-			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
-			( clientId ) => state.blocks.tree[ clientId ]
+		( Array.isArray( clientIds ) ? clientIds : [ clientIds ] ).map(
+			( clientId ) => state.blocks.tree.get( clientId )
 		)
 );
 
+/**
+ * Given an array of block client IDs, returns the corresponding array of block
+ * names.
+ *
+ * @param {Object}   state     Editor state.
+ * @param {string[]} clientIds Client IDs for which block names are to be returned.
+ *
+ * @return {string[]} Block names.
+ */
+export const getBlockNamesByClientId = createSelector(
+	( state, clientIds ) =>
+		getBlocksByClientId( state, clientIds )
+			.filter( Boolean )
+			.map( ( block ) => block.name ),
+	( state, clientIds ) => getBlocksByClientId( state, clientIds )
+);
+
 /**
  * Returns the number of blocks currently present in the post.
  *
@@ -445,6 +542,39 @@ export function getSelectedBlockClientId( state ) {
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ *
+ *```js
+ * import { select } from '@wordpress/data'
+ * import { store as blockEditorStore } from '@wordpress/block-editor'
+ *
+ * // Set initial active block client ID
+ * let activeBlockClientId = null
+ *
+ * const getActiveBlockData = () => {
+ * 	const activeBlock = select(blockEditorStore).getSelectedBlock()
+ *
+ * 	if (activeBlock && activeBlock.clientId !== activeBlockClientId) {
+ * 		activeBlockClientId = activeBlock.clientId
+ *
+ * 		// Get active block name and attributes
+ * 		const activeBlockName = activeBlock.name
+ * 		const activeBlockAttributes = activeBlock.attributes
+ *
+ * 		// Log active block name and attributes
+ * 		console.log(activeBlockName, activeBlockAttributes)
+ * 		}
+ * 	}
+ *
+ * 	// Subscribe to changes in the editor
+ * 	// wp.data.subscribe(() => {
+ * 		// getActiveBlockData()
+ * 	// })
+ *
+ * 	// Update active block data on click
+ * 	// onclick="getActiveBlockData()"
+ *```
+ *
  * @return {?Object} Selected block.
  */
 export function getSelectedBlock( state ) {
@@ -463,9 +593,7 @@ export function getSelectedBlock( state ) {
  * @return {?string} Root client ID, if exists
  */
 export function getBlockRootClientId( state, clientId ) {
-	return state.blocks.parents[ clientId ] !== undefined
-		? state.blocks.parents[ clientId ]
-		: null;
+	return state.blocks.parents.get( clientId ) ?? null;
 }
 
 /**
@@ -481,11 +609,14 @@ export const getBlockParents = createSelector(
 	( state, clientId, ascending = false ) => {
 		const parents = [];
 		let current = clientId;
-		while ( !! state.blocks.parents[ current ] ) {
-			current = state.blocks.parents[ current ];
+		while ( ( current = state.blocks.parents.get( current ) ) ) {
 			parents.push( current );
 		}
 
+		if ( ! parents.length ) {
+			return EMPTY_ARRAY;
+		}
+
 		return ascending ? parents : parents.reverse();
 	},
 	( state ) => [ state.blocks.parents ]
@@ -508,25 +639,13 @@ export const getBlockParents = createSelector(
 export const getBlockParentsByBlockName = createSelector(
 	( state, clientId, blockName, ascending = false ) => {
 		const parents = getBlockParents( state, clientId, ascending );
-		return map(
-			filter(
-				map( parents, ( id ) => ( {
-					id,
-					name: getBlockName( state, id ),
-				} ) ),
-				( { name } ) => {
-					if ( Array.isArray( blockName ) ) {
-						return blockName.includes( name );
-					}
-					return name === blockName;
-				}
-			),
-			( { id } ) => id
-		);
+		const hasName = Array.isArray( blockName )
+			? ( name ) => blockName.includes( name )
+			: ( name ) => blockName === name;
+		return parents.filter( ( id ) => hasName( getBlockName( state, id ) ) );
 	},
 	( state ) => [ state.blocks.parents ]
 );
-
 /**
  * Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks.
  *
@@ -540,7 +659,7 @@ export function getBlockHierarchyRootClientId( state, clientId ) {
 	let parent;
 	do {
 		parent = current;
-		current = state.blocks.parents[ current ];
+		current = state.blocks.parents.get( current );
 	} while ( current );
 	return parent;
 }
@@ -617,7 +736,7 @@ export function getAdjacentBlockClientId( state, startClientId, modifier = 1 ) {
 	}
 
 	const { order } = state.blocks;
-	const orderSet = order[ rootClientId ];
+	const orderSet = order.get( rootClientId );
 	const index = orderSet.indexOf( startClientId );
 	const nextIndex = index + 1 * modifier;
 
@@ -955,7 +1074,9 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 	const selectionFocus = getSelectionEnd( state );
 
 	// It's not mergeable if the start and end are within the same block.
-	if ( selectionAnchor.clientId === selectionFocus.clientId ) return false;
+	if ( selectionAnchor.clientId === selectionFocus.clientId ) {
+		return false;
+	}
 
 	// It's not mergeable if there's no rich text selection.
 	if (
@@ -963,8 +1084,9 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 		! selectionFocus.attributeKey ||
 		typeof selectionAnchor.offset === 'undefined' ||
 		typeof selectionFocus.offset === 'undefined'
-	)
+	) {
 		return false;
+	}
 
 	const anchorRootClientId = getBlockRootClientId(
 		state,
@@ -1006,12 +1128,16 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
 	const targetBlockName = getBlockName( state, targetBlockClientId );
 	const targetBlockType = getBlockType( targetBlockName );
 
-	if ( ! targetBlockType.merge ) return false;
+	if ( ! targetBlockType.merge ) {
+		return false;
+	}
 
 	const blockToMerge = getBlock( state, blockToMergeClientId );
 
 	// It's mergeable if the blocks are of the same type.
-	if ( blockToMerge.name === targetBlockName ) return true;
+	if ( blockToMerge.name === targetBlockName ) {
+		return true;
+	}
 
 	// If the blocks are of a different type, try to transform the block being
 	// merged into the same type of block.
@@ -1072,27 +1198,13 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
 			: [ selectionAnchor, selectionFocus ];
 
 	const blockA = getBlock( state, selectionStart.clientId );
-	const blockAType = getBlockType( blockA.name );
-
 	const blockB = getBlock( state, selectionEnd.clientId );
-	const blockBType = getBlockType( blockB.name );
 
 	const htmlA = blockA.attributes[ selectionStart.attributeKey ];
 	const htmlB = blockB.attributes[ selectionEnd.attributeKey ];
 
-	const attributeDefinitionA =
-		blockAType.attributes[ selectionStart.attributeKey ];
-	const attributeDefinitionB =
-		blockBType.attributes[ selectionEnd.attributeKey ];
-
-	let valueA = create( {
-		html: htmlA,
-		...mapRichTextSettings( attributeDefinitionA ),
-	} );
-	let valueB = create( {
-		html: htmlB,
-		...mapRichTextSettings( attributeDefinitionB ),
-	} );
+	let valueA = create( { html: htmlA } );
+	let valueB = create( { html: htmlB } );
 
 	valueA = remove( valueA, 0, selectionStart.offset );
 	valueB = remove( valueB, selectionEnd.offset, valueB.text.length );
@@ -1104,7 +1216,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
 				...blockA.attributes,
 				[ selectionStart.attributeKey ]: toHTMLString( {
 					value: valueA,
-					...mapRichTextSettings( attributeDefinitionA ),
 				} ),
 			},
 		},
@@ -1114,7 +1225,6 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
 				...blockB.attributes,
 				[ selectionEnd.attributeKey ]: toHTMLString( {
 					value: valueB,
-					...mapRichTextSettings( attributeDefinitionB ),
 				} ),
 			},
 		},
@@ -1132,7 +1242,7 @@ export const __unstableGetSelectedBlocksWithPartialSelection = ( state ) => {
  * @return {Array} Ordered client IDs of editor blocks.
  */
 export function getBlockOrder( state, rootClientId ) {
-	return state.blocks.order[ rootClientId || '' ] || EMPTY_ARRAY;
+	return state.blocks.order.get( rootClientId || '' ) || EMPTY_ARRAY;
 }
 
 /**
@@ -1175,14 +1285,42 @@ export function isBlockSelected( state, clientId ) {
  * @param {string}  clientId Block client ID.
  * @param {boolean} deep     Perform a deep check.
  *
- * @return {boolean} Whether the block as an inner block selected
+ * @return {boolean} Whether the block has an inner block selected
  */
 export function hasSelectedInnerBlock( state, clientId, deep = false ) {
+	const selectedBlockClientIds = getSelectedBlockClientIds( state );
+
+	if ( ! selectedBlockClientIds.length ) {
+		return false;
+	}
+
+	if ( deep ) {
+		return selectedBlockClientIds.some( ( id ) =>
+			// Pass true because we don't care about order and it's more
+			// performant.
+			getBlockParents( state, id, true ).includes( clientId )
+		);
+	}
+
+	return selectedBlockClientIds.some(
+		( id ) => getBlockRootClientId( state, id ) === clientId
+	);
+}
+
+/**
+ * Returns true if one of the block's inner blocks is dragged.
+ *
+ * @param {Object}  state    Editor state.
+ * @param {string}  clientId Block client ID.
+ * @param {boolean} deep     Perform a deep check.
+ *
+ * @return {boolean} Whether the block has an inner block dragged
+ */
+export function hasDraggedInnerBlock( state, clientId, deep = false ) {
 	return getBlockOrder( state, clientId ).some(
 		( innerClientId ) =>
-			isBlockSelected( state, innerClientId ) ||
-			isBlockMultiSelected( state, innerClientId ) ||
-			( deep && hasSelectedInnerBlock( state, innerClientId, deep ) )
+			isBlockBeingDragged( state, innerClientId ) ||
+			( deep && hasDraggedInnerBlock( state, innerClientId, deep ) )
 	);
 }
 
@@ -1270,17 +1408,6 @@ export function isTyping( state ) {
 	return state.isTyping;
 }
 
-/**
- * Returns true if the the block interface should be hidden, or false otherwise.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether the block toolbar is hidden.
- */
-export function __experimentalIsBlockInterfaceHidden( state ) {
-	return state.isBlockInterfaceHidden;
-}
-
 /**
  * Returns true if the user is dragging blocks, or false otherwise.
  *
@@ -1362,45 +1489,52 @@ export function isCaretWithinFormattedText() {
 }
 
 /**
- * Returns the insertion point, the index at which the new inserted block would
- * be placed. Defaults to the last index.
+ * Returns the location of the insertion cue. Defaults to the last index.
  *
  * @param {Object} state Editor state.
  *
  * @return {Object} Insertion point object with `rootClientId`, `index`.
  */
-export function getBlockInsertionPoint( state ) {
-	let rootClientId, index;
-
-	const {
-		insertionPoint,
-		selection: { selectionEnd },
-	} = state;
-	if ( insertionPoint !== null ) {
-		return insertionPoint;
-	}
+export const getBlockInsertionPoint = createSelector(
+	( state ) => {
+		let rootClientId, index;
+
+		const {
+			insertionCue,
+			selection: { selectionEnd },
+		} = state;
+		if ( insertionCue !== null ) {
+			return insertionCue;
+		}
 
-	const { clientId } = selectionEnd;
+		const { clientId } = selectionEnd;
 
-	if ( clientId ) {
-		rootClientId = getBlockRootClientId( state, clientId ) || undefined;
-		index = getBlockIndex( state, selectionEnd.clientId ) + 1;
-	} else {
-		index = getBlockOrder( state ).length;
-	}
+		if ( clientId ) {
+			rootClientId = getBlockRootClientId( state, clientId ) || undefined;
+			index = getBlockIndex( state, selectionEnd.clientId ) + 1;
+		} else {
+			index = getBlockOrder( state ).length;
+		}
 
-	return { rootClientId, index };
-}
+		return { rootClientId, index };
+	},
+	( state ) => [
+		state.insertionCue,
+		state.selection.selectionEnd.clientId,
+		state.blocks.parents,
+		state.blocks.order,
+	]
+);
 
 /**
- * Returns true if we should show the block insertion point.
+ * Returns true if the block insertion point is visible.
  *
  * @param {Object} state Global application state.
  *
  * @return {?boolean} Whether the insertion point is visible or not.
  */
 export function isBlockInsertionPointVisible( state ) {
-	return state.insertionPoint !== null;
+	return state.insertionCue !== null;
 }
 
 /**
@@ -1431,35 +1565,86 @@ export function getTemplate( state ) {
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional block root client ID.
  *
- * @return {?string} Block Template Lock
+ * @return {string|false} Block Template Lock
  */
 export function getTemplateLock( state, rootClientId ) {
 	if ( ! rootClientId ) {
-		return state.settings.templateLock;
+		return state.settings.templateLock ?? false;
+	}
+
+	return getBlockListSettings( state, rootClientId )?.templateLock ?? false;
+}
+
+/**
+ * Determines if the given block type is visible in the inserter.
+ * Note that this is different than whether a block is allowed to be inserted.
+ * In some cases, the block is not allowed in a given position but
+ * it should still be visible in the inserter to be able to add it
+ * to a different position.
+ *
+ * @param {Object}        state           Editor state.
+ * @param {string|Object} blockNameOrType The block type object, e.g., the response
+ *                                        from the block directory; or a string name of
+ *                                        an installed block type, e.g.' core/paragraph'.
+ * @param {Set}           checkedBlocks   Set of block names that have already been checked.
+ *
+ * @return {boolean} Whether the given block type is allowed to be inserted.
+ */
+const isBlockVisibleInTheInserter = (
+	state,
+	blockNameOrType,
+	checkedBlocks = new Set()
+) => {
+	let blockType;
+	let blockName;
+
+	if ( blockNameOrType && 'object' === typeof blockNameOrType ) {
+		blockType = blockNameOrType;
+		blockName = blockNameOrType.name;
+	} else {
+		blockType = getBlockType( blockNameOrType );
+		blockName = blockNameOrType;
 	}
 
-	const blockListSettings = getBlockListSettings( state, rootClientId );
-	if ( ! blockListSettings ) {
-		return undefined;
+	if ( ! blockType ) {
+		return false;
 	}
 
-	return blockListSettings.templateLock;
-}
+	const { allowedBlockTypes } = getSettings( state );
 
-const checkAllowList = ( list, item, defaultResult = null ) => {
-	if ( typeof list === 'boolean' ) {
-		return list;
+	const isBlockAllowedInEditor = checkAllowList(
+		allowedBlockTypes,
+		blockName,
+		true
+	);
+	if ( ! isBlockAllowedInEditor ) {
+		return false;
 	}
-	if ( Array.isArray( list ) ) {
-		// TODO: when there is a canonical way to detect that we are editing a post
-		// the following check should be changed to something like:
-		// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
-		if ( list.includes( 'core/post-content' ) && item === null ) {
-			return true;
-		}
-		return list.includes( item );
+
+	if ( checkedBlocks.has( blockName ) ) {
+		return false;
+	}
+
+	checkedBlocks.add( blockName );
+
+	// If parent blocks are not visible, child blocks should be hidden too.
+	if ( Array.isArray( blockType.parent ) ) {
+		return blockType.parent.some(
+			( name ) =>
+				( blockName !== name &&
+					isBlockVisibleInTheInserter(
+						state,
+						name,
+						checkedBlocks
+					) ) ||
+				// Exception for blocks with post-content parent,
+				// the root level is often consider as "core/post-content".
+				// This exception should only apply to the post editor ideally though.
+				name === 'core/post-content'
+		);
 	}
-	return defaultResult;
+
+	return true;
 };
 
 /**
@@ -1480,6 +1665,10 @@ const canInsertBlockTypeUnmemoized = (
 	blockName,
 	rootClientId = null
 ) => {
+	if ( ! isBlockVisibleInTheInserter( state, blockName ) ) {
+		return false;
+	}
+
 	let blockType;
 	if ( blockName && 'object' === typeof blockName ) {
 		blockType = blockName;
@@ -1487,23 +1676,18 @@ const canInsertBlockTypeUnmemoized = (
 	} else {
 		blockType = getBlockType( blockName );
 	}
-	if ( ! blockType ) {
+
+	const isLocked = !! getTemplateLock( state, rootClientId );
+	if ( isLocked ) {
 		return false;
 	}
 
-	const { allowedBlockTypes } = getSettings( state );
-
-	const isBlockAllowedInEditor = checkAllowList(
-		allowedBlockTypes,
-		blockName,
-		true
-	);
-	if ( ! isBlockAllowedInEditor ) {
+	const _isSectionBlock = !! isSectionBlock( state, rootClientId );
+	if ( _isSectionBlock ) {
 		return false;
 	}
 
-	const isLocked = !! getTemplateLock( state, rootClientId );
-	if ( isLocked ) {
+	if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
 		return false;
 	}
 
@@ -1515,14 +1699,30 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
-	const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks;
-	const hasParentAllowedBlock = checkAllowList(
-		parentAllowedBlocks,
+	const parentName = getBlockName( state, rootClientId );
+	const parentBlockType = getBlockType( parentName );
+
+	// Look at the `blockType.allowedBlocks` field to determine whether this is an allowed child block.
+	const parentAllowedChildBlocks = parentBlockType?.allowedBlocks;
+	let hasParentAllowedBlock = checkAllowList(
+		parentAllowedChildBlocks,
 		blockName
 	);
 
+	// The `allowedBlocks` block list setting can further limit which blocks are allowed children.
+	if ( hasParentAllowedBlock !== false ) {
+		const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks;
+		const hasParentListAllowedBlock = checkAllowList(
+			parentAllowedBlocks,
+			blockName
+		);
+		// Never downgrade the result from `true` to `null`
+		if ( hasParentListAllowedBlock !== null ) {
+			hasParentAllowedBlock = hasParentListAllowedBlock;
+		}
+	}
+
 	const blockAllowedParentBlocks = blockType.parent;
-	const parentName = getBlockName( state, rootClientId );
 	const hasBlockAllowedParent = checkAllowList(
 		blockAllowedParentBlocks,
 		parentName
@@ -1594,14 +1794,12 @@ const canInsertBlockTypeUnmemoized = (
  *
  * @return {boolean} Whether the given block type is allowed to be inserted.
  */
-export const canInsertBlockType = createSelector(
-	canInsertBlockTypeUnmemoized,
-	( state, blockName, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId[ rootClientId ],
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-	]
+export const canInsertBlockType = createRegistrySelector( ( select ) =>
+	createSelector(
+		canInsertBlockTypeUnmemoized,
+		( state, blockName, rootClientId ) =>
+			getInsertBlockTypeDependants( select )( state, rootClientId )
+	)
 );
 
 /**
@@ -1623,85 +1821,79 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
 /**
  * Determines if the given block is allowed to be deleted.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientId     The block client Id.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block client Id.
  *
  * @return {boolean} Whether the given block is allowed to be removed.
  */
-export function canRemoveBlock( state, clientId, rootClientId = null ) {
+export function canRemoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
-
-	// attributes can be null if the block is already deleted.
 	if ( attributes === null ) {
 		return true;
 	}
+	if ( attributes.lock?.remove !== undefined ) {
+		return ! attributes.lock.remove;
+	}
 
-	const { lock } = attributes;
-	const parentIsLocked = !! getTemplateLock( state, rootClientId );
-	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
-	if ( lock === undefined || lock?.remove === undefined ) {
-		return ! parentIsLocked;
+	const rootClientId = getBlockRootClientId( state, clientId );
+	if ( getTemplateLock( state, rootClientId ) ) {
+		return false;
+	}
+
+	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+	if ( isBlockWithinSection ) {
+		return false;
 	}
 
-	// When remove is true, it means we cannot remove it.
-	return ! lock?.remove;
+	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
 /**
  * Determines if the given blocks are allowed to be removed.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be removed.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state     Editor state.
+ * @param {string} clientIds The block client IDs to be removed.
  *
  * @return {boolean} Whether the given blocks are allowed to be removed.
  */
-export function canRemoveBlocks( state, clientIds, rootClientId = null ) {
-	return clientIds.every( ( clientId ) =>
-		canRemoveBlock( state, clientId, rootClientId )
-	);
+export function canRemoveBlocks( state, clientIds ) {
+	return clientIds.every( ( clientId ) => canRemoveBlock( state, clientId ) );
 }
 
 /**
  * Determines if the given block is allowed to be moved.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientId     The block client Id.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId The block client Id.
  *
  * @return {boolean} Whether the given block is allowed to be moved.
  */
-export function canMoveBlock( state, clientId, rootClientId = null ) {
+export function canMoveBlock( state, clientId ) {
 	const attributes = getBlockAttributes( state, clientId );
 	if ( attributes === null ) {
-		return;
+		return true;
 	}
-
-	const { lock } = attributes;
-	const parentIsLocked = getTemplateLock( state, rootClientId ) === 'all';
-	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
-	if ( lock === undefined || lock?.move === undefined ) {
-		return ! parentIsLocked;
+	if ( attributes.lock?.move !== undefined ) {
+		return ! attributes.lock.move;
 	}
 
-	// When move is true, it means we cannot move it.
-	return ! lock?.move;
+	const rootClientId = getBlockRootClientId( state, clientId );
+	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
+		return false;
+	}
+	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
 /**
  * Determines if the given blocks are allowed to be moved.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be moved.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object} state     Editor state.
+ * @param {string} clientIds The block client IDs to be moved.
  *
  * @return {boolean} Whether the given blocks are allowed to be moved.
  */
-export function canMoveBlocks( state, clientIds, rootClientId = null ) {
-	return clientIds.every( ( clientId ) =>
-		canMoveBlock( state, clientId, rootClientId )
-	);
+export function canMoveBlocks( state, clientIds ) {
+	return clientIds.every( ( clientId ) => canMoveBlock( state, clientId ) );
 }
 
 /**
@@ -1865,7 +2057,9 @@ const buildBlockTypeItem =
 			isDisabled,
 			frecency: calculateFrecency( time, count ),
 		};
-		if ( buildScope === 'transform' ) return blockItemBase;
+		if ( buildScope === 'transform' ) {
+			return blockItemBase;
+		}
 
 		const inserterVariations = getBlockVariations(
 			blockType.name,
@@ -1877,6 +2071,7 @@ const buildBlockTypeItem =
 			description: blockType.description,
 			category: blockType.category,
 			keywords: blockType.keywords,
+			parent: blockType.parent,
 			variations: inserterVariations,
 			example: blockType.example,
 			utility: 1, // Deprecated.
@@ -1912,132 +2107,129 @@ const buildBlockTypeItem =
  *                                        this item.
  * @property {number}   frecency          Heuristic that combines frequency and recency.
  */
-export const getInserterItems = createSelector(
-	( state, rootClientId = null ) => {
-		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
-			buildScope: 'inserter',
-		} );
+export const getInserterItems = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS ) => {
+			const buildReusableBlockInserterItem = ( reusableBlock ) => {
+				const icon = ! reusableBlock.wp_pattern_sync_status
+					? {
+							src: symbol,
+							foreground: 'var(--wp-block-synced-color)',
+					  }
+					: symbol;
+				const id = `core/block/${ reusableBlock.id }`;
+				const { time, count = 0 } = getInsertUsage( state, id ) || {};
+				const frecency = calculateFrecency( time, count );
+
+				return {
+					id,
+					name: 'core/block',
+					initialAttributes: { ref: reusableBlock.id },
+					title: reusableBlock.title?.raw,
+					icon,
+					category: 'reusable',
+					keywords: [ 'reusable' ],
+					isDisabled: false,
+					utility: 1, // Deprecated.
+					frecency,
+					content: reusableBlock.content?.raw,
+					syncStatus: reusableBlock.wp_pattern_sync_status,
+				};
+			};
 
-		/*
-		 * Matches block comment delimiters amid serialized content.
-		 *
-		 * @see `tokenizer` in `@wordpress/block-serialization-default-parser`
-		 * package
-		 *
-		 * blockParserTokenizer differs from the original tokenizer in the
-		 * following ways:
-		 *
-		 * - removed global flag (/g)
-		 * - prepended ^\s*
-		 *
-		 */
-		const blockParserTokenizer =
-			/^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
-
-		const buildReusableBlockInserterItem = ( reusableBlock ) => {
-			let icon = symbol;
-
-			/*
-			 * Instead of always displaying a generic "symbol" icon for every
-			 * reusable block, try to use an icon that represents the first
-			 * outermost block contained in the reusable block. This requires
-			 * scanning the serialized form of the reusable block to find its
-			 * first block delimiter, then looking up the corresponding block
-			 * type, if available.
-			 */
-			if ( Platform.OS === 'web' ) {
-				const content =
-					typeof reusableBlock.content.raw === 'string'
-						? reusableBlock.content.raw
-						: reusableBlock.content;
-				const rawBlockMatch = content.match( blockParserTokenizer );
-				if ( rawBlockMatch ) {
-					const [ , , namespace = 'core/', blockName ] =
-						rawBlockMatch;
-					const referencedBlockType = getBlockType(
-						namespace + blockName
-					);
-					if ( referencedBlockType ) {
-						icon = referencedBlockType.icon;
-					}
-				}
+			const syncedPatternInserterItems = canInsertBlockTypeUnmemoized(
+				state,
+				'core/block',
+				rootClientId
+			)
+				? unlock( select( STORE_NAME ) )
+						.getReusableBlocks()
+						.map( buildReusableBlockInserterItem )
+				: [];
+
+			const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
+				buildScope: 'inserter',
+			} );
+
+			let blockTypeInserterItems = getBlockTypes()
+				.filter( ( blockType ) =>
+					hasBlockSupport( blockType, 'inserter', true )
+				)
+				.map( buildBlockTypeInserterItem );
+
+			if ( options[ isFiltered ] !== false ) {
+				blockTypeInserterItems = blockTypeInserterItems.filter(
+					( blockType ) =>
+						canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						)
+				);
+			} else {
+				blockTypeInserterItems = blockTypeInserterItems
+					.filter( ( blockType ) =>
+						isBlockVisibleInTheInserter( state, blockType )
+					)
+					.map( ( blockType ) => ( {
+						...blockType,
+						isAllowedInCurrentRoot: canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						),
+					} ) );
 			}
 
-			const id = `core/block/${ reusableBlock.id }`;
-			const { time, count = 0 } = getInsertUsage( state, id ) || {};
-			const frecency = calculateFrecency( time, count );
+			const items = blockTypeInserterItems.reduce(
+				( accumulator, item ) => {
+					const { variations = [] } = item;
+					// Exclude any block type item that is to be replaced by a default variation.
+					if ( ! variations.some( ( { isDefault } ) => isDefault ) ) {
+						accumulator.push( item );
+					}
+					if ( variations.length ) {
+						const variationMapper = getItemFromVariation(
+							state,
+							item
+						);
+						accumulator.push(
+							...variations.map( variationMapper )
+						);
+					}
+					return accumulator;
+				},
+				[]
+			);
 
-			return {
-				id,
-				name: 'core/block',
-				initialAttributes: { ref: reusableBlock.id },
-				title: reusableBlock.title.raw,
-				icon,
-				category: 'reusable',
-				keywords: [],
-				isDisabled: false,
-				utility: 1, // Deprecated.
-				frecency,
+			// Ensure core blocks are prioritized in the returned results,
+			// because third party blocks can be registered earlier than
+			// the core blocks (usually by using the `init` action),
+			// thus affecting the display order.
+			// We don't sort reusable blocks as they are handled differently.
+			const groupByType = ( blocks, block ) => {
+				const { core, noncore } = blocks;
+				const type = block.name.startsWith( 'core/' ) ? core : noncore;
+
+				type.push( block );
+				return blocks;
 			};
-		};
-
-		const blockTypeInserterItems = getBlockTypes()
-			.filter( ( blockType ) =>
-				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-			)
-			.map( buildBlockTypeInserterItem );
-
-		const reusableBlockInserterItems = canInsertBlockTypeUnmemoized(
-			state,
-			'core/block',
-			rootClientId
-		)
-			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
-			: [];
-
-		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
-			const { variations = [] } = item;
-			// Exclude any block type item that is to be replaced by a default variation.
-			if ( ! variations.some( ( { isDefault } ) => isDefault ) ) {
-				accumulator.push( item );
-			}
-			if ( variations.length ) {
-				const variationMapper = getItemFromVariation( state, item );
-				accumulator.push( ...variations.map( variationMapper ) );
-			}
-			return accumulator;
-		}, [] );
-
-		// Ensure core blocks are prioritized in the returned results,
-		// because third party blocks can be registered earlier than
-		// the core blocks (usually by using the `init` action),
-		// thus affecting the display order.
-		// We don't sort reusable blocks as they are handled differently.
-		const groupByType = ( blocks, block ) => {
-			const { core, noncore } = blocks;
-			const type = block.name.startsWith( 'core/' ) ? core : noncore;
-
-			type.push( block );
-			return blocks;
-		};
-		const { core: coreItems, noncore: nonCoreItems } = items.reduce(
-			groupByType,
-			{ core: [], noncore: [] }
-		);
-		const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
-		return [ ...sortedBlockTypes, ...reusableBlockInserterItems ];
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId,
-		state.blocks.order,
-		state.preferences.insertUsage,
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		getReusableBlocks( state ),
-		getBlockTypes(),
-	]
-);
+			const { core: coreItems, noncore: nonCoreItems } = items.reduce(
+				groupByType,
+				{ core: [], noncore: [] }
+			);
+			const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
+			return [ ...sortedBlockTypes, ...syncedPatternInserterItems ];
+		},
+		( state, rootClientId ) => [
+			getBlockTypes(),
+			unlock( select( STORE_NAME ) ).getReusableBlocks(),
+			state.blocks.order,
+			state.preferences.insertUsage,
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
+		]
+	)
+);
 
 /**
  * Determines the items that appear in the available block transforms list.
@@ -2065,60 +2257,51 @@ export const getInserterItems = createSelector(
  *                                          this item.
  * @property {number}          frecency     Heuristic that combines frequency and recency.
  */
-export const getBlockTransformItems = createSelector(
-	( state, blocks, rootClientId = null ) => {
-		const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
-		const [ sourceBlock ] = normalizedBlocks;
-		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
-			buildScope: 'transform',
-		} );
-		const blockTypeTransformItems = getBlockTypes()
-			.filter( ( blockType ) =>
-				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-			)
-			.map( buildBlockTypeTransformItem );
-
-		const itemsByName = Object.fromEntries(
-			Object.entries( blockTypeTransformItems ).map( ( [ , value ] ) => [
-				value.name,
-				value,
-			] )
-		);
+export const getBlockTransformItems = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, blocks, rootClientId = null ) => {
+			const normalizedBlocks = Array.isArray( blocks )
+				? blocks
+				: [ blocks ];
+			const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
+				buildScope: 'transform',
+			} );
+			const blockTypeTransformItems = getBlockTypes()
+				.filter( ( blockType ) =>
+					canIncludeBlockTypeInInserter(
+						state,
+						blockType,
+						rootClientId
+					)
+				)
+				.map( buildBlockTypeTransformItem );
 
-		// Consider unwraping the highest priority.
-		itemsByName[ '*' ] = {
-			frecency: +Infinity,
-			id: '*',
-			isDisabled: false,
-			name: '*',
-			title: __( 'Unwrap' ),
-			icon: itemsByName[ sourceBlock?.name ]?.icon,
-		};
+			const itemsByName = Object.fromEntries(
+				Object.entries( blockTypeTransformItems ).map(
+					( [ , value ] ) => [ value.name, value ]
+				)
+			);
 
-		const possibleTransforms = getPossibleBlockTransformations(
-			normalizedBlocks
-		).reduce( ( accumulator, block ) => {
-			if ( block === '*' ) {
-				accumulator.push( itemsByName[ '*' ] );
-			} else if ( itemsByName[ block?.name ] ) {
-				accumulator.push( itemsByName[ block.name ] );
-			}
-			return accumulator;
-		}, [] );
-		return orderBy(
-			possibleTransforms,
-			( block ) => itemsByName[ block.name ].frecency,
-			'desc'
-		);
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId,
-		state.preferences.insertUsage,
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		getBlockTypes(),
-	]
+			const possibleTransforms = getPossibleBlockTransformations(
+				normalizedBlocks
+			).reduce( ( accumulator, block ) => {
+				if ( itemsByName[ block?.name ] ) {
+					accumulator.push( itemsByName[ block.name ] );
+				}
+				return accumulator;
+			}, [] );
+			return orderBy(
+				possibleTransforms,
+				( block ) => itemsByName[ block.name ].frecency,
+				'desc'
+			);
+		},
+		( state, blocks, rootClientId ) => [
+			getBlockTypes(),
+			state.preferences.insertUsage,
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
+		]
+	)
 );
 
 /**
@@ -2129,55 +2312,83 @@ export const getBlockTransformItems = createSelector(
  *
  * @return {boolean} Items that appear in inserter.
  */
-export const hasInserterItems = createSelector(
-	( state, rootClientId = null ) => {
-		const hasBlockType = getBlockTypes().some( ( blockType ) =>
-			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-		);
-		if ( hasBlockType ) {
-			return true;
+export const hasInserterItems = createRegistrySelector(
+	( select ) =>
+		( state, rootClientId = null ) => {
+			const hasBlockType = getBlockTypes().some( ( blockType ) =>
+				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+			);
+			if ( hasBlockType ) {
+				return true;
+			}
+			const hasReusableBlock =
+				canInsertBlockTypeUnmemoized(
+					state,
+					'core/block',
+					rootClientId
+				) &&
+				unlock( select( STORE_NAME ) ).getReusableBlocks().length > 0;
+
+			return hasReusableBlock;
 		}
-		const hasReusableBlock =
-			canInsertBlockTypeUnmemoized( state, 'core/block', rootClientId ) &&
-			getReusableBlocks( state ).length > 0;
-
-		return hasReusableBlock;
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId,
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		getReusableBlocks( state ),
-		getBlockTypes(),
-	]
 );
 
 /**
- * Returns the list of allowed inserter blocks for inner blocks children
+ * Returns the list of allowed inserter blocks for inner blocks children.
  *
  * @param {Object}  state        Editor state.
  * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {Array?} The list of allowed block types.
  */
+export const getAllowedBlocks = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null ) => {
+			if ( ! rootClientId ) {
+				return;
+			}
+
+			const blockTypes = getBlockTypes().filter( ( blockType ) =>
+				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+			);
+
+			const hasReusableBlock =
+				canInsertBlockTypeUnmemoized(
+					state,
+					'core/block',
+					rootClientId
+				) &&
+				unlock( select( STORE_NAME ) ).getReusableBlocks().length > 0;
+
+			if ( hasReusableBlock ) {
+				blockTypes.push( 'core/block' );
+			}
+
+			return blockTypes;
+		},
+		( state, rootClientId ) => [
+			getBlockTypes(),
+			unlock( select( STORE_NAME ) ).getReusableBlocks(),
+			...getInsertBlockTypeDependants( select )( state, rootClientId ),
+		]
+	)
+);
+
 export const __experimentalGetAllowedBlocks = createSelector(
 	( state, rootClientId = null ) => {
-		if ( ! rootClientId ) {
-			return;
-		}
-
-		return filter( getBlockTypes(), ( blockType ) =>
-			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetAllowedBlocks',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getAllowedBlocks',
+				since: '6.2',
+				version: '6.4',
+			}
 		);
+		return getAllowedBlocks( state, rootClientId );
 	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId,
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		getBlockTypes(),
-	]
+	( state, rootClientId ) =>
+		getAllowedBlocks.getDependants( state, rootClientId )
 );
 
 /**
@@ -2186,100 +2397,70 @@ export const __experimentalGetAllowedBlocks = createSelector(
  * @param    {Object}         state            Editor state.
  * @param    {?string}        rootClientId     Optional root client ID of block list.
  *
- * @return {?WPDirectInsertBlock}              The block type to be directly inserted.
+ * @return {WPDirectInsertBlock|undefined}              The block type to be directly inserted.
  *
  * @typedef {Object} WPDirectInsertBlock
  * @property {string}         name             The type of block.
  * @property {?Object}        attributes       Attributes to pass to the newly created block.
  * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
  */
-export const __experimentalGetDirectInsertBlock = createSelector(
-	( state, rootClientId = null ) => {
-		if ( ! rootClientId ) {
-			return;
-		}
-		const defaultBlock =
-			state.blockListSettings[ rootClientId ]?.__experimentalDefaultBlock;
-		const directInsert =
-			state.blockListSettings[ rootClientId ]?.__experimentalDirectInsert;
-		if ( ! defaultBlock || ! directInsert ) {
-			return;
-		}
-		if ( typeof directInsert === 'function' ) {
-			return directInsert( getBlock( state, rootClientId ) )
-				? defaultBlock
-				: null;
-		}
-		return defaultBlock;
-	},
-	( state, rootClientId ) => [
-		state.blockListSettings[ rootClientId ],
-		state.blocks.tree[ rootClientId ],
-	]
-);
-
-const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
-	if ( typeof allowedBlockTypes === 'boolean' ) {
-		return allowedBlockTypes;
+export function getDirectInsertBlock( state, rootClientId = null ) {
+	if ( ! rootClientId ) {
+		return;
+	}
+	const { defaultBlock, directInsert } =
+		state.blockListSettings[ rootClientId ] ?? {};
+	if ( ! defaultBlock || ! directInsert ) {
+		return;
 	}
 
-	const blocksQueue = [ ...blocks ];
-	while ( blocksQueue.length > 0 ) {
-		const block = blocksQueue.shift();
+	return defaultBlock;
+}
 
-		const isAllowed = checkAllowList(
-			allowedBlockTypes,
-			block.name || block.blockName,
-			true
-		);
-		if ( ! isAllowed ) {
-			return false;
+export function __experimentalGetDirectInsertBlock(
+	state,
+	rootClientId = null
+) {
+	deprecated(
+		'wp.data.select( "core/block-editor" ).__experimentalGetDirectInsertBlock',
+		{
+			alternative:
+				'wp.data.select( "core/block-editor" ).getDirectInsertBlock',
+			since: '6.3',
+			version: '6.4',
 		}
+	);
+	return getDirectInsertBlock( state, rootClientId );
+}
 
-		block.innerBlocks?.forEach( ( innerBlock ) => {
-			blocksQueue.push( innerBlock );
-		} );
+export const __experimentalGetParsedPattern = createRegistrySelector(
+	( select ) => ( state, patternName ) => {
+		const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug(
+			patternName
+		);
+		return pattern ? getParsedPattern( pattern ) : null;
 	}
+);
 
-	return true;
-};
+const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [
+	...getAllPatternsDependants( select )( state ),
+	...getInsertBlockTypeDependants( select )( state, rootClientId ),
+];
 
-export const __experimentalGetParsedPattern = createSelector(
-	( state, patternName ) => {
-		const patterns = state.settings.__experimentalBlockPatterns;
-		const pattern = patterns.find( ( { name } ) => name === patternName );
-		if ( ! pattern ) {
-			return null;
-		}
-		return {
+const patternsWithParsedBlocks = new WeakMap();
+function enhancePatternWithParsedBlocks( pattern ) {
+	let enhancedPattern = patternsWithParsedBlocks.get( pattern );
+	if ( ! enhancedPattern ) {
+		enhancedPattern = {
 			...pattern,
-			blocks: parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} ),
+			get blocks() {
+				return getParsedPattern( pattern ).blocks;
+			},
 		};
-	},
-	( state ) => [ state.settings.__experimentalBlockPatterns ]
-);
-
-const getAllAllowedPatterns = createSelector(
-	( state ) => {
-		const patterns = state.settings.__experimentalBlockPatterns;
-		const { allowedBlockTypes } = getSettings( state );
-		const parsedPatterns = patterns
-			.filter( ( { inserter = true } ) => !! inserter )
-			.map( ( { name } ) =>
-				__experimentalGetParsedPattern( state, name )
-			);
-		const allowedPatterns = parsedPatterns.filter( ( { blocks } ) =>
-			checkAllowListRecursive( blocks, allowedBlockTypes )
-		);
-		return allowedPatterns;
-	},
-	( state ) => [
-		state.settings.__experimentalBlockPatterns,
-		state.settings.allowedBlockTypes,
-	]
-);
+		patternsWithParsedBlocks.set( pattern, enhancedPattern );
+	}
+	return enhancedPattern;
+}
 
 /**
  * Returns the list of allowed patterns for inner blocks children.
@@ -2289,26 +2470,46 @@ const getAllAllowedPatterns = createSelector(
  *
  * @return {Array?} The list of allowed patterns.
  */
-export const __experimentalGetAllowedPatterns = createSelector(
-	( state, rootClientId = null ) => {
-		const availableParsedPatterns = getAllAllowedPatterns( state );
-		const patternsAllowed = filter(
-			availableParsedPatterns,
-			( { blocks } ) =>
-				blocks.every( ( { name } ) =>
-					canInsertBlockType( state, name, rootClientId )
-				)
-		);
+export const __experimentalGetAllowedPatterns = createRegistrySelector(
+	( select ) => {
+		return createSelector(
+			(
+				state,
+				rootClientId = null,
+				options = DEFAULT_INSERTER_OPTIONS
+			) => {
+				const { getAllPatterns } = unlock( select( STORE_NAME ) );
+				const patterns = getAllPatterns();
+				const { allowedBlockTypes } = getSettings( state );
+				const parsedPatterns = patterns
+					.filter( ( { inserter = true } ) => !! inserter )
+					.map( enhancePatternWithParsedBlocks );
+
+				const availableParsedPatterns = parsedPatterns.filter(
+					( pattern ) =>
+						checkAllowListRecursive(
+							getGrammar( pattern ),
+							allowedBlockTypes
+						)
+				);
+				const patternsAllowed = availableParsedPatterns.filter(
+					( pattern ) =>
+						getGrammar( pattern ).every( ( { blockName: name } ) =>
+							options[ isFiltered ] !== false
+								? canInsertBlockType(
+										state,
+										name,
+										rootClientId
+								  )
+								: isBlockVisibleInTheInserter( state, name )
+						)
+				);
 
-		return patternsAllowed;
-	},
-	( state, rootClientId ) => [
-		state.settings.__experimentalBlockPatterns,
-		state.settings.allowedBlockTypes,
-		state.settings.templateLock,
-		state.blockListSettings[ rootClientId ],
-		state.blocks.byClientId[ rootClientId ],
-	]
+				return patternsAllowed;
+			},
+			getAllowedPatternsDependants( select )
+		);
+	}
 );
 
 /**
@@ -2324,35 +2525,54 @@ export const __experimentalGetAllowedPatterns = createSelector(
  *
  * @return {Array} The list of matched block patterns based on declared `blockTypes` and block name.
  */
-export const __experimentalGetPatternsByBlockTypes = createSelector(
-	( state, blockNames, rootClientId = null ) => {
-		if ( ! blockNames ) return EMPTY_ARRAY;
-		const patterns = __experimentalGetAllowedPatterns(
-			state,
-			rootClientId
-		);
-		const normalizedBlockNames = Array.isArray( blockNames )
-			? blockNames
-			: [ blockNames ];
-		return patterns.filter( ( pattern ) =>
-			pattern?.blockTypes?.some?.( ( blockName ) =>
-				normalizedBlockNames.includes( blockName )
-			)
+export const getPatternsByBlockTypes = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, blockNames, rootClientId = null ) => {
+			if ( ! blockNames ) {
+				return EMPTY_ARRAY;
+			}
+			const patterns =
+				select( STORE_NAME ).__experimentalGetAllowedPatterns(
+					rootClientId
+				);
+			const normalizedBlockNames = Array.isArray( blockNames )
+				? blockNames
+				: [ blockNames ];
+			const filteredPatterns = patterns.filter( ( pattern ) =>
+				pattern?.blockTypes?.some?.( ( blockName ) =>
+					normalizedBlockNames.includes( blockName )
+				)
+			);
+			if ( filteredPatterns.length === 0 ) {
+				return EMPTY_ARRAY;
+			}
+			return filteredPatterns;
+		},
+		( state, blockNames, rootClientId ) =>
+			getAllowedPatternsDependants( select )( state, rootClientId )
+	)
+);
+
+export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
+	( select ) => {
+		deprecated(
+			'wp.data.select( "core/block-editor" ).__experimentalGetPatternsByBlockTypes',
+			{
+				alternative:
+					'wp.data.select( "core/block-editor" ).getPatternsByBlockTypes',
+				since: '6.2',
+				version: '6.4',
+			}
 		);
-	},
-	( state, rootClientId ) => [
-		...__experimentalGetAllowedPatterns.getDependants(
-			state,
-			rootClientId
-		),
-	]
+		return select( STORE_NAME ).getPatternsByBlockTypes;
+	}
 );
 
 /**
  * Determines the items that appear in the available pattern transforms list.
  *
  * For now we only handle blocks without InnerBlocks and take into account
- * the `__experimentalRole` property of blocks' attributes for the transformation.
+ * the `role` property of blocks' attributes for the transformation.
  *
  * We return the first set of possible eligible block patterns,
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2365,48 +2585,48 @@ export const __experimentalGetPatternsByBlockTypes = createSelector(
  *
  * @return {WPBlockPattern[]} Items that are eligible for a pattern transformation.
  */
-export const __experimentalGetPatternTransformItems = createSelector(
-	( state, blocks, rootClientId = null ) => {
-		if ( ! blocks ) return EMPTY_ARRAY;
-		/**
-		 * For now we only handle blocks without InnerBlocks and take into account
-		 * the `__experimentalRole` property of blocks' attributes for the transformation.
-		 * Note that the blocks have been retrieved through `getBlock`, which doesn't
-		 * return the inner blocks of an inner block controller, so we still need
-		 * to check for this case too.
-		 */
-		if (
-			blocks.some(
-				( { clientId, innerBlocks } ) =>
-					innerBlocks.length ||
-					areInnerBlocksControlled( state, clientId )
-			)
-		) {
-			return EMPTY_ARRAY;
-		}
+export const __experimentalGetPatternTransformItems = createRegistrySelector(
+	( select ) =>
+		createSelector(
+			( state, blocks, rootClientId = null ) => {
+				if ( ! blocks ) {
+					return EMPTY_ARRAY;
+				}
+				/**
+				 * For now we only handle blocks without InnerBlocks and take into account
+				 * the `role` property of blocks' attributes for the transformation.
+				 * Note that the blocks have been retrieved through `getBlock`, which doesn't
+				 * return the inner blocks of an inner block controller, so we still need
+				 * to check for this case too.
+				 */
+				if (
+					blocks.some(
+						( { clientId, innerBlocks } ) =>
+							innerBlocks.length ||
+							areInnerBlocksControlled( state, clientId )
+					)
+				) {
+					return EMPTY_ARRAY;
+				}
 
-		// Create a Set of the selected block names that is used in patterns filtering.
-		const selectedBlockNames = Array.from(
-			new Set( blocks.map( ( { name } ) => name ) )
-		);
-		/**
-		 * Here we will return first set of possible eligible block patterns,
-		 * by checking the `blockTypes` property. We still have to recurse through
-		 * block pattern's blocks and try to find matches from the selected blocks.
-		 * Now this happens in the consumer to avoid heavy operations in the selector.
-		 */
-		return __experimentalGetPatternsByBlockTypes(
-			state,
-			selectedBlockNames,
-			rootClientId
-		);
-	},
-	( state, rootClientId ) => [
-		...__experimentalGetPatternsByBlockTypes.getDependants(
-			state,
-			rootClientId
-		),
-	]
+				// Create a Set of the selected block names that is used in patterns filtering.
+				const selectedBlockNames = Array.from(
+					new Set( blocks.map( ( { name } ) => name ) )
+				);
+				/**
+				 * Here we will return first set of possible eligible block patterns,
+				 * by checking the `blockTypes` property. We still have to recurse through
+				 * block pattern's blocks and try to find matches from the selected blocks.
+				 * Now this happens in the consumer to avoid heavy operations in the selector.
+				 */
+				return select( STORE_NAME ).getPatternsByBlockTypes(
+					selectedBlockNames,
+					rootClientId
+				);
+			},
+			( state, blocks, rootClientId ) =>
+				getAllowedPatternsDependants( select )( state, rootClientId )
+		)
 );
 
 /**
@@ -2478,19 +2698,29 @@ export const __experimentalGetBlockListSettingsForBlocks = createSelector(
  *
  * @return {string} The reusable block saved title.
  */
-export const __experimentalGetReusableBlockTitle = createSelector(
-	( state, ref ) => {
-		const reusableBlock = find(
-			getReusableBlocks( state ),
-			( block ) => block.id === ref
-		);
-		if ( ! reusableBlock ) {
-			return null;
-		}
+export const __experimentalGetReusableBlockTitle = createRegistrySelector(
+	( select ) =>
+		createSelector(
+			( state, ref ) => {
+				deprecated(
+					"wp.data.select( 'core/block-editor' ).__experimentalGetReusableBlockTitle",
+					{
+						since: '6.6',
+						version: '6.8',
+					}
+				);
 
-		return reusableBlock.title?.raw;
-	},
-	( state ) => [ getReusableBlocks( state ) ]
+				const reusableBlock = unlock( select( STORE_NAME ) )
+					.getReusableBlocks()
+					.find( ( block ) => block.id === ref );
+				if ( ! reusableBlock ) {
+					return null;
+				}
+
+				return reusableBlock.title?.raw;
+			},
+			() => [ unlock( select( STORE_NAME ) ).getReusableBlocks() ]
+		)
 );
 
 /**
@@ -2524,17 +2754,6 @@ export function __experimentalGetLastBlockAttributeChanges( state ) {
 	return state.lastBlockAttributesChange;
 }
 
-/**
- * Returns the available reusable blocks
- *
- * @param {Object} state Global application state.
- *
- * @return {Array} Reusable blocks
- */
-function getReusableBlocks( state ) {
-	return state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-}
-
 /**
  * Returns whether the navigation mode is enabled.
  *
@@ -2543,7 +2762,7 @@ function getReusableBlocks( state ) {
  * @return {boolean} Is navigation mode enabled.
  */
 export function isNavigationMode( state ) {
-	return state.editorMode === 'navigation';
+	return __unstableGetEditorMode( state ) === 'navigation';
 }
 
 /**
@@ -2553,19 +2772,32 @@ export function isNavigationMode( state ) {
  *
  * @return {string} the editor mode.
  */
-export function __unstableGetEditorMode( state ) {
-	return state.editorMode;
-}
+export const __unstableGetEditorMode = createRegistrySelector(
+	( select ) => ( state ) => {
+		if ( ! window?.__experimentalEditorWriteMode ) {
+			return 'edit';
+		}
+		return (
+			state.settings.editorTool ??
+			select( preferencesStore ).get( 'core', 'editorTool' )
+		);
+	}
+);
 
 /**
  * Returns whether block moving mode is enabled.
  *
- * @param {Object} state Editor state.
- *
- * @return {string} Client Id of moving block.
+ * @deprecated
  */
-export function hasBlockMovingClientId( state ) {
-	return state.hasBlockMovingClientId;
+export function hasBlockMovingClientId() {
+	deprecated(
+		'wp.data.select( "core/block-editor" ).hasBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
+		}
+	);
+	return false;
 }
 
 /**
@@ -2659,7 +2891,7 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
 export function wasBlockJustInserted( state, clientId, source ) {
 	const { lastBlockInserted } = state;
 	return (
-		lastBlockInserted.clientId === clientId &&
+		lastBlockInserted.clientIds?.includes( clientId ) &&
 		lastBlockInserted.source === source
 	);
 }
@@ -2675,6 +2907,16 @@ export function isBlockVisible( state, clientId ) {
 	return state.blockVisibility?.[ clientId ] ?? true;
 }
 
+/**
+ * Returns the currently hovered block.
+ *
+ * @param {Object} state Global application state.
+ * @return {Object} Client Id of the hovered block.
+ */
+export function getHoveredBlockClientId( state ) {
+	return state.hoveredBlockClientId;
+}
+
 /**
  * Returns the list of all hidden blocks.
  *
@@ -2683,61 +2925,47 @@ export function isBlockVisible( state, clientId ) {
  */
 export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => {
-		return new Set(
+		const visibleBlocks = new Set(
 			Object.keys( state.blockVisibility ).filter(
 				( key ) => state.blockVisibility[ key ]
 			)
 		);
-	},
-	( state ) => [ state.blockVisibility ]
-);
-
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- */
-export const __unstableGetContentLockingParent = createSelector(
-	( state, clientId ) => {
-		let current = clientId;
-		let result;
-		while ( !! state.blocks.parents[ current ] ) {
-			current = state.blocks.parents[ current ];
-			if ( getTemplateLock( state, current ) === 'contentOnly' ) {
-				result = current;
-			}
+		if ( visibleBlocks.size === 0 ) {
+			return EMPTY_SET;
 		}
-		return result;
+		return visibleBlocks;
 	},
-	( state ) => [ state.blocks.parents, state.blockListSettings ]
+	( state ) => [ state.blockVisibility ]
 );
 
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- *
- * @param {Object} state Global application state.
- */
-export function __unstableGetTemporarilyEditingAsBlocks( state ) {
-	return state.temporarilyEditingAsBlocks;
-}
-
 export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+	// Prevent overlay on blocks with a non-default editing mode. If the mdoe is
+	// 'disabled' then the overlay is redundant since the block can't be
+	// selected. If the mode is 'contentOnly' then the overlay is redundant
+	// since there will be no controls to interact with once selected.
+	if ( getBlockEditingMode( state, clientId ) !== 'default' ) {
+		return false;
+	}
+
 	// If the block editing is locked, the block overlay is always active.
 	if ( ! canEditBlock( state, clientId ) ) {
 		return true;
 	}
 
-	const editorMode = __unstableGetEditorMode( state );
-
-	// In zoom-out mode, the block overlay is always active for top level blocks.
-	if (
-		editorMode === 'zoom-out' &&
-		clientId &&
-		! getBlockRootClientId( state, clientId )
-	) {
-		return true;
+	// In zoom-out mode, the block overlay is always active for section level blocks.
+	if ( isZoomOut( state ) ) {
+		const sectionRootClientId = getSectionRootClientId( state );
+		if ( sectionRootClientId ) {
+			const sectionClientIds = getBlockOrder(
+				state,
+				sectionRootClientId
+			);
+			if ( sectionClientIds?.includes( clientId ) ) {
+				return true;
+			}
+		} else if ( clientId && ! getBlockRootClientId( state, clientId ) ) {
+			return true;
+		}
 	}
 
 	// In navigation mode, the block overlay is active when the block is not
@@ -2750,11 +2978,9 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 		'__experimentalDisableBlockOverlay',
 		false
 	);
-	const shouldEnableIfUnselected =
-		editorMode === 'navigation' ||
-		( blockSupportDisable
-			? false
-			: areInnerBlocksControlled( state, clientId ) );
+	const shouldEnableIfUnselected = blockSupportDisable
+		? false
+		: areInnerBlocksControlled( state, clientId );
 
 	return (
 		shouldEnableIfUnselected &&
@@ -2764,12 +2990,228 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 }
 
 export function __unstableIsWithinBlockOverlay( state, clientId ) {
-	let parent = state.blocks.parents[ clientId ];
+	let parent = state.blocks.parents.get( clientId );
 	while ( !! parent ) {
 		if ( __unstableHasActiveBlockOverlayActive( state, parent ) ) {
 			return true;
 		}
-		parent = state.blocks.parents[ parent ];
+		parent = state.blocks.parents.get( parent );
 	}
 	return false;
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Returns the block editing mode for a given block.
+ *
+ * The mode can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * Blocks can set a mode using the `useBlockEditingMode` hook.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * A template lock can also set a mode. If the template lock is `'contentOnly'`,
+ * the block's mode is overridden to `'contentOnly'` if the block has a content
+ * role attribute, or `'disabled'` otherwise.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
+ *                            `'contentOnly'`, or `'default'`.
+ */
+export const getBlockEditingMode = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			// Some selectors that call this provide `null` as the default
+			// rootClientId, but the default rootClientId is actually `''`.
+			if ( clientId === null ) {
+				clientId = '';
+			}
+
+			const isNavMode = isNavigationMode( state );
+
+			// If the editor is currently not in navigation mode, check if the clientId
+			// has an editing mode set in the regular derived map.
+			// There may be an editing mode set here for synced patterns or in zoomed out
+			// mode.
+			if (
+				! isNavMode &&
+				state.derivedBlockEditingModes?.has( clientId )
+			) {
+				return state.derivedBlockEditingModes.get( clientId );
+			}
+
+			// If the editor *is* in navigation mode, the block editing mode states
+			// are stored in the derivedNavModeBlockEditingModes map.
+			if (
+				isNavMode &&
+				state.derivedNavModeBlockEditingModes?.has( clientId )
+			) {
+				return state.derivedNavModeBlockEditingModes.get( clientId );
+			}
+
+			// In normal mode, consider that an explicitely set editing mode takes over.
+			const blockEditingMode = state.blockEditingModes.get( clientId );
+			if ( blockEditingMode ) {
+				return blockEditingMode;
+			}
+
+			// In normal mode, top level is default mode.
+			if ( clientId === '' ) {
+				return 'default';
+			}
+
+			const rootClientId = getBlockRootClientId( state, clientId );
+			const templateLock = getTemplateLock( state, rootClientId );
+			// If the parent of the block is contentOnly locked, check whether it's a content block.
+			if ( templateLock === 'contentOnly' ) {
+				const name = getBlockName( state, clientId );
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
+				return isContent ? 'contentOnly' : 'disabled';
+			}
+			// Otherwise, check if there's an ancestor that is contentOnly
+			const parentMode = getBlockEditingMode( state, rootClientId );
+			return parentMode === 'contentOnly' ? 'default' : parentMode;
+		}
+);
+
+/**
+ * Indicates if a block is ungroupable.
+ * A block is ungroupable if it is a single grouping block with inner blocks.
+ * If a block has an `ungroup` transform, it is also ungroupable, without the
+ * requirement of being the default grouping block.
+ * Additionally a block can only be ungrouped if it has inner blocks and can
+ * be removed.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block. If not passed the selected block's client id will be used.
+ * @return {boolean} True if the block is ungroupable.
+ */
+export const isUngroupable = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			const _clientId = clientId || getSelectedBlockClientId( state );
+			if ( ! _clientId ) {
+				return false;
+			}
+			const { getGroupingBlockName } = select( blocksStore );
+			const block = getBlock( state, _clientId );
+			const groupingBlockName = getGroupingBlockName();
+			const _isUngroupable =
+				block &&
+				( block.name === groupingBlockName ||
+					getBlockType( block.name )?.transforms?.ungroup ) &&
+				!! block.innerBlocks.length;
+
+			return _isUngroupable && canRemoveBlock( state, _clientId );
+		}
+);
+
+/**
+ * Indicates if the provided blocks(by client ids) are groupable.
+ * We need to have at least one block, have a grouping block name set and
+ * be able to remove these blocks.
+ *
+ * @param {Object}   state     Global application state.
+ * @param {string[]} clientIds Block client ids. If not passed the selected blocks client ids will be used.
+ * @return {boolean} True if the blocks are groupable.
+ */
+export const isGroupable = createRegistrySelector(
+	( select ) =>
+		( state, clientIds = EMPTY_ARRAY ) => {
+			const { getGroupingBlockName } = select( blocksStore );
+			const groupingBlockName = getGroupingBlockName();
+			const _clientIds = clientIds?.length
+				? clientIds
+				: getSelectedBlockClientIds( state );
+			const rootClientId = _clientIds?.length
+				? getBlockRootClientId( state, _clientIds[ 0 ] )
+				: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				state,
+				groupingBlockName,
+				rootClientId
+			);
+			const _isGroupable = groupingBlockAvailable && _clientIds.length;
+			return _isGroupable && canRemoveBlocks( state, _clientIds );
+		}
+);
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const __unstableGetContentLockingParent = ( state, clientId ) => {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetContentLockingParent",
+		{
+			since: '6.1',
+			version: '6.7',
+		}
+	);
+	return getContentLockingParent( state, clientId );
+};
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state Global application state.
+ */
+export function __unstableGetTemporarilyEditingAsBlocks( state ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingAsBlocks",
+		{
+			since: '6.1',
+			version: '6.7',
+		}
+	);
+	return getTemporarilyEditingAsBlocks( state );
+}
+
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @deprecated
+ *
+ * @param {Object} state Global application state.
+ */
+export function __unstableGetTemporarilyEditingFocusModeToRevert( state ) {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).__unstableGetTemporarilyEditingFocusModeToRevert",
+		{
+			since: '6.5',
+			version: '6.7',
+		}
+	);
+	return getTemporarilyEditingFocusModeToRevert( state );
+}
diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
index 82cf9831f104a2..ce973e44f4523b 100644
--- a/packages/block-editor/src/store/test/actions.js
+++ b/packages/block-editor/src/store/test/actions.js
@@ -27,7 +27,6 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
-	__experimentalHideBlockInterface: hideBlockInterface,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -40,7 +39,6 @@ const {
 	replaceInnerBlocks,
 	resetBlocks,
 	selectBlock,
-	__experimentalShowBlockInterface: showBlockInterface,
 	showInsertionPoint,
 	startMultiSelect,
 	startTyping,
@@ -55,6 +53,9 @@ const {
 	updateBlockListSettings,
 	updateSettings,
 	validateBlocksToTemplate,
+	registerInserterMediaCategory,
+	setBlockEditingMode,
+	unsetBlockEditingMode,
 } = actions;
 
 describe( 'actions', () => {
@@ -217,8 +218,10 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
-			replaceBlock( 'chicken', block )( { select, dispatch } );
+			replaceBlock( 'chicken', block )( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -282,8 +285,13 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
-			replaceBlocks( [ 'chicken' ], blocks )( { select, dispatch } );
+			replaceBlocks(
+				[ 'chicken' ],
+				blocks
+			)( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -315,6 +323,8 @@ describe( 'actions', () => {
 				getBlockCount: () => 1,
 			};
 			const dispatch = jest.fn();
+			dispatch.ensureDefaultBlock = jest.fn();
+			const registry = createRegistry();
 
 			replaceBlocks(
 				[ 'chicken' ],
@@ -322,7 +332,7 @@ describe( 'actions', () => {
 				null,
 				null,
 				meta
-			)( { select, dispatch } );
+			)( { select, dispatch, registry } );
 
 			expect( dispatch ).toHaveBeenCalledWith( {
 				type: 'REPLACE_BLOCKS',
@@ -370,107 +380,6 @@ describe( 'actions', () => {
 	} );
 
 	describe( 'insertBlocks', () => {
-		it( 'should apply default styles to blocks if blocks do not contain a style', () => {
-			const ribsBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-			};
-			const chickenBlock = {
-				clientId: 'chicken',
-				name: 'core/test-chicken',
-			};
-			const chickenRibsBlock = {
-				clientId: 'chicken-ribs',
-				name: 'core/test-chicken-ribs',
-			};
-			const blocks = [ ribsBlock, chickenBlock, chickenRibsBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-							'core/test-chicken-ribs': 'colorful',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsBlock,
-						attributes: { className: 'is-style-squared' },
-					},
-					chickenBlock,
-					{
-						...chickenRibsBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
-		it( 'should keep styles explicitly set even if different from the default', () => {
-			const ribsWithStyleBlock = {
-				clientId: 'ribs',
-				name: 'core/test-ribs',
-				attributes: {
-					className: 'is-style-colorful',
-				},
-			};
-			const blocks = [ ribsWithStyleBlock ];
-
-			const select = {
-				getSettings: () => ( {
-					__experimentalPreferredStyleVariations: {
-						value: {
-							'core/test-ribs': 'squared',
-						},
-					},
-				} ),
-				canInsertBlockType: () => true,
-			};
-			const dispatch = jest.fn();
-
-			insertBlocks(
-				blocks,
-				5,
-				'testrootid',
-				false
-			)( { select, dispatch } );
-
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'INSERT_BLOCKS',
-				blocks: [
-					{
-						...ribsWithStyleBlock,
-						attributes: { className: 'is-style-colorful' },
-					},
-				],
-				index: 5,
-				rootClientId: 'testrootid',
-				time: expect.any( Number ),
-				updateSelection: false,
-				initialPosition: null,
-			} );
-		} );
-
 		it( 'should filter the allowed blocks in INSERT_BLOCKS action', () => {
 			const ribsBlock = {
 				clientId: 'ribs',
@@ -619,15 +528,18 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => undefined,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
 			} );
+			const registry = createRegistry();
 
-			removeBlocks( clientIds )( { select, dispatch } );
+			removeBlocks( clientIds )( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {
@@ -728,15 +640,17 @@ describe( 'actions', () => {
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
 			} );
-
-			removeBlock( clientId )( { select, dispatch } );
+			const registry = createRegistry();
+			removeBlock( clientId )( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {
@@ -745,18 +659,23 @@ describe( 'actions', () => {
 			} );
 		} );
 
-		it( 'should dispatch REMOVE_BLOCKS action, opting out of select previous', () => {
+		it( 'should dispatch REMOVE_BLOCKS action, opting out of select previous', async () => {
 			const clientId = 'myclientid';
 
 			const select = {
 				getBlockRootClientId: () => null,
 				canRemoveBlocks: () => true,
+				getBlockRemovalRules: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectPreviousBlock: jest.fn(),
 			} );
 
-			removeBlocks( [ clientId ], false )( { select, dispatch } );
+			const registry = createRegistry();
+			removeBlocks(
+				[ clientId ],
+				false
+			)( { select, dispatch, registry } );
 
 			expect( dispatch.selectPreviousBlock ).not.toHaveBeenCalled();
 
@@ -777,22 +696,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'hideBlockInterface', () => {
-		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
-			expect( hideBlockInterface() ).toEqual( {
-				type: 'HIDE_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
-	describe( 'showBlockInterface', () => {
-		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
-			expect( showBlockInterface() ).toEqual( {
-				type: 'SHOW_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
 	describe( 'startTyping', () => {
 		it( 'should return the START_TYPING action', () => {
 			expect( startTyping() ).toEqual( {
@@ -929,10 +832,6 @@ describe( 'actions', () => {
 				blockB.clientId
 			)( { select, dispatch } );
 
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'MERGE_BLOCKS',
-				blocks: [ blockA.clientId, blockB.clientId ],
-			} );
 			expect( dispatch.selectBlock ).toHaveBeenCalledWith( 'chicken' );
 		} );
 
@@ -1225,4 +1124,172 @@ describe( 'actions', () => {
 			expect( result ).toEqual( false );
 		} );
 	} );
+
+	describe( 'updateSettings', () => {
+		it( 'warns when setting the deprecated __unstableIsPreviewMode property and sets the stable property instead', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const store = createRegistry().registerStore(
+				blockEditorStoreName,
+				{
+					actions,
+					selectors,
+					reducer,
+				}
+			);
+
+			store.dispatch(
+				updateSettings( {
+					__unstableIsPreviewMode: true,
+				} )
+			);
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				"__unstableIsPreviewMode argument in wp.data.dispatch('core/block-editor').updateSettings is deprecated since version 6.8. Please use isPreviewMode instead."
+			);
+
+			consoleWarn.mockClear();
+
+			expect( store.getState().settings.__unstableIsPreviewMode ).toBe(
+				true
+			);
+
+			expect( store.getState().settings.isPreviewMode ).toBe( true );
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
+	describe( 'registerInserterMediaCategory', () => {
+		describe( 'should log errors when invalid', () => {
+			it( 'valid object', () => {
+				registerInserterMediaCategory()( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should be an `InserterMediaCategory` object.'
+				);
+			} );
+			it( 'has name', () => {
+				registerInserterMediaCategory( {} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `name` that should be unique among all media categories.'
+				);
+			} );
+			it( 'has labels.name', () => {
+				registerInserterMediaCategory( { name: 'a' } )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `labels.name`.'
+				);
+			} );
+			it( 'has proper media type', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'b',
+				} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have `mediaType` property that is one of `image|audio|video`.'
+				);
+			} );
+			it( 'has fetch function', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: 'c',
+				} )( {} );
+				expect( console ).toHaveErroredWith(
+					'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+				);
+			} );
+			it( 'has unique name', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: () => {},
+				} )( {
+					select: {
+						getRegisteredInserterMediaCategories: () => [
+							{ name: 'a' },
+						],
+					},
+				} );
+				expect( console ).toHaveErroredWith(
+					'A category is already registered with the same name: "a".'
+				);
+			} );
+			it( 'has unique labels.name', () => {
+				registerInserterMediaCategory( {
+					name: 'a',
+					labels: { name: 'a' },
+					mediaType: 'image',
+					fetch: () => {},
+				} )( {
+					select: {
+						getRegisteredInserterMediaCategories: () => [
+							{ labels: { name: 'a' } },
+						],
+					},
+				} );
+				expect( console ).toHaveErroredWith(
+					'A category is already registered with the same labels.name: "a".'
+				);
+			} );
+		} );
+		it( 'should register a media category', () => {
+			const category = {
+				name: 'new',
+				labels: { name: 'new' },
+				mediaType: 'image',
+				fetch: () => {},
+			};
+			const inserterMediaCategories = [
+				{ name: 'a', labels: { name: 'a' } },
+			];
+			const dispatch = jest.fn();
+			registerInserterMediaCategory( category )( {
+				select: {
+					getRegisteredInserterMediaCategories: () =>
+						inserterMediaCategories,
+				},
+				dispatch,
+			} );
+			expect( dispatch ).toHaveBeenLastCalledWith( {
+				type: 'REGISTER_INSERTER_MEDIA_CATEGORY',
+				category: { ...category, isExternalResource: true },
+			} );
+		} );
+	} );
+
+	describe( 'setBlockEditingMode', () => {
+		it( 'should return the SET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				setBlockEditingMode(
+					'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+					'default'
+				)
+			).toEqual( {
+				type: 'SET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				mode: 'default',
+			} );
+		} );
+	} );
+
+	describe( 'unsetBlockEditingMode', () => {
+		it( 'should return the UNSET_BLOCK_EDITING_MODE action', () => {
+			expect(
+				unsetBlockEditingMode( '14501cc2-90a6-4f52-aa36-ab6e896135d1' )
+			).toEqual( {
+				type: 'UNSET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/get-block-settings.js b/packages/block-editor/src/store/test/get-block-settings.js
new file mode 100644
index 00000000000000..7154b3edc1d73b
--- /dev/null
+++ b/packages/block-editor/src/store/test/get-block-settings.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockSettings } from '../get-block-settings';
+
+describe( 'getBlockSettings', () => {
+	it( 'uses block setting', () => {
+		const state = {
+			settings: {
+				__experimentalFeatures: {
+					blocks: {
+						'core/test-block': {
+							layout: {
+								contentSize: '840px',
+							},
+						},
+					},
+				},
+			},
+			blocks: {
+				byClientId: new Map( [
+					[
+						'block-1',
+						{
+							name: 'core/test-block',
+						},
+					],
+				] ),
+				parents: new Map( [ [ 'block-1', '' ] ] ),
+			},
+		};
+
+		expect(
+			getBlockSettings( state, 'block-1', 'layout.contentSize' )
+		).toEqual( [ '840px' ] );
+	} );
+
+	it( 'uses blockEditor.useSetting.before hook override', () => {
+		const state = {
+			settings: {
+				__experimentalFeatures: {
+					blocks: {
+						'core/test-block': {
+							layout: {
+								contentSize: '840px',
+							},
+						},
+					},
+				},
+			},
+			blocks: {
+				byClientId: new Map( [
+					[
+						'block-1',
+						{
+							name: 'core/test-block',
+						},
+					],
+				] ),
+				parents: new Map( [ [ 'block-1', '' ] ] ),
+			},
+		};
+
+		addFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before',
+			( result, path, clientId, blockName ) => {
+				if ( blockName === 'core/test-block' ) {
+					return '960px';
+				}
+
+				return result;
+			}
+		);
+
+		expect(
+			getBlockSettings( state, 'block-1', 'layout.contentSize' )
+		).toEqual( [ '960px' ] );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/store/test/performance.js b/packages/block-editor/src/store/test/performance.js
new file mode 100644
index 00000000000000..2da3c1a41db2a3
--- /dev/null
+++ b/packages/block-editor/src/store/test/performance.js
@@ -0,0 +1,71 @@
+/**
+ * Internal dependencies
+ */
+import reducer from '../reducer';
+
+describe( 'performance', () => {
+	const state = reducer( undefined, { type: '@@init' } );
+	const blocks = [];
+	for ( let i = 0; i < 100000; i++ ) {
+		blocks.push( {
+			clientId: `block-${ i }`,
+			attributes: { content: `paragraph ${ i }` },
+			innerBlocks: [],
+		} );
+	}
+
+	let preparedState;
+
+	it( 'should reset blocks', () => {
+		preparedState = reducer( state, {
+			type: 'RESET_BLOCKS',
+			blocks,
+		} );
+		expect( preparedState ).toBeDefined();
+	} );
+
+	it( 'should update blocks', () => {
+		const updatedState = reducer( preparedState, {
+			type: 'UPDATE_BLOCK_ATTRIBUTES',
+			clientIds: [ 'block-10' ],
+			attributes: {
+				content: 'updated paragraph 10',
+			},
+		} );
+
+		expect( updatedState ).toBeDefined();
+	} );
+
+	it( 'should replace blocks (Enter in paragraphs)', () => {
+		const updatedState = reducer( preparedState, {
+			type: 'REPLACE_BLOCKS',
+			clientIds: [ 'block-10' ],
+			blocks: [
+				{
+					clientId: `block-10`,
+					attributes: { content: `paragraph 10` },
+					innerBlocks: [],
+				},
+				{
+					clientId: `block-10-2`,
+					attributes: { content: '' },
+					innerBlocks: [],
+				},
+			],
+			indexToSelect: 10,
+			initialPosition: 0,
+		} );
+
+		expect( updatedState ).toBeDefined();
+	} );
+
+	it( 'should move blocks', () => {
+		const updatedState = reducer( preparedState, {
+			type: 'MOVE_BLOCKS_DOWN',
+			clientIds: [ 'block-10' ],
+			rootClientId: '',
+		} );
+
+		expect( updatedState ).toBeDefined();
+	} );
+} );
diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js
new file mode 100644
index 00000000000000..d54a519c9056b6
--- /dev/null
+++ b/packages/block-editor/src/store/test/private-actions.js
@@ -0,0 +1,141 @@
+/**
+ * Internal dependencies
+ */
+import {
+	hideBlockInterface,
+	showBlockInterface,
+	expandBlock,
+	__experimentalUpdateSettings,
+	setInsertionPoint,
+	setOpenedBlockSettingsMenu,
+	startDragging,
+	stopDragging,
+} from '../private-actions';
+
+describe( 'private actions', () => {
+	describe( 'hideBlockInterface', () => {
+		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
+			expect( hideBlockInterface() ).toEqual( {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( 'showBlockInterface', () => {
+		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
+			expect( showBlockInterface() ).toEqual( {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( '__experimentalUpdateSettings', () => {
+		const experimentalSettings = {
+			inserterMediaCategories: 'foo',
+			blockInspectorAnimation: 'bar',
+		};
+
+		const stableSettings = {
+			foo: 'foo',
+			bar: 'bar',
+			baz: 'baz',
+		};
+
+		const settings = {
+			...experimentalSettings,
+			...stableSettings,
+		};
+
+		it( 'should dispatch provided settings by default', () => {
+			expect( __experimentalUpdateSettings( settings ) ).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings,
+				reset: false,
+			} );
+		} );
+
+		it( 'should dispatch provided settings with reset flag when `reset` argument is truthy', () => {
+			expect(
+				__experimentalUpdateSettings( settings, {
+					stripExperimentalSettings: false,
+					reset: true,
+				} )
+			).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings,
+				reset: true,
+			} );
+		} );
+
+		it( 'should strip experimental settings from a given settings object when `stripExperimentalSettings` argument is truthy', () => {
+			expect(
+				__experimentalUpdateSettings( settings, {
+					stripExperimentalSettings: true,
+				} )
+			).toEqual( {
+				type: 'UPDATE_SETTINGS',
+				settings: {
+					foo: 'foo',
+					bar: 'bar',
+					baz: 'baz',
+				},
+				reset: false,
+			} );
+		} );
+	} );
+
+	describe( 'setOpenedBlockSettingsMenu', () => {
+		it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action', () => {
+			expect( setOpenedBlockSettingsMenu() ).toEqual( {
+				clientId: undefined,
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+			} );
+		} );
+
+		it( 'should return the SET_OPENED_BLOCK_SETTINGS_MENU action with client id if provided', () => {
+			expect( setOpenedBlockSettingsMenu( 'abcd' ) ).toEqual( {
+				clientId: 'abcd',
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+			} );
+		} );
+	} );
+
+	describe( 'startDragging', () => {
+		it( 'should return the START_DRAGGING action', () => {
+			expect( startDragging() ).toEqual( {
+				type: 'START_DRAGGING',
+			} );
+		} );
+	} );
+
+	describe( 'stopDragging', () => {
+		it( 'should return the STOP_DRAGGING action', () => {
+			expect( stopDragging() ).toEqual( {
+				type: 'STOP_DRAGGING',
+			} );
+		} );
+	} );
+
+	describe( 'expandBlock', () => {
+		it( 'should return the SET_BLOCK_EXPANDED_IN_LIST_VIEW action', () => {
+			expect( expandBlock( 'block-1' ) ).toEqual( {
+				type: 'SET_BLOCK_EXPANDED_IN_LIST_VIEW',
+				clientId: 'block-1',
+			} );
+		} );
+	} );
+
+	describe( 'setInsertionPoint', () => {
+		it( 'should return the SET_INSERTION_POINT action', () => {
+			expect(
+				setInsertionPoint( {
+					rootClientId: '',
+					index: '123',
+				} )
+			).toEqual( {
+				type: 'SET_INSERTION_POINT',
+				value: { rootClientId: '', index: '123' },
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
new file mode 100644
index 00000000000000..268d463f227d4d
--- /dev/null
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -0,0 +1,647 @@
+/**
+ * Internal dependencies
+ */
+import {
+	isBlockInterfaceHidden,
+	getLastInsertedBlocksClientIds,
+	isBlockSubtreeDisabled,
+	getEnabledClientIdsTree,
+	getEnabledBlockParents,
+	getExpandedBlock,
+	isDragging,
+	getBlockStyles,
+} from '../private-selectors';
+import { getBlockEditingMode, __unstableGetEditorMode } from '../selectors';
+
+describe( 'private selectors', () => {
+	describe( 'isBlockInterfaceHidden', () => {
+		it( 'should return the true if toggled true in state', () => {
+			const state = {
+				isBlockInterfaceHidden: true,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if toggled false in state', () => {
+			const state = {
+				isBlockInterfaceHidden: false,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'getLastInsertedBlocksClientIds', () => {
+		it( 'should return undefined if no blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual(
+				undefined
+			);
+		} );
+
+		it( 'should return clientIds if blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {
+					clientIds: [ '123456', '78910' ],
+				},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
+				'123456',
+				'78910',
+			] );
+		} );
+	} );
+
+	describe( 'isBlockSubtreeDisabled', () => {
+		const baseState = {
+			settings: {},
+			blocks: {
+				byClientId: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // |  Post Title
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // |  Post Content
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | |  Paragraph
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | |  Paragraph
+				] ),
+				order: new Map( [
+					[
+						'',
+						[
+							'6cf70164-9097-4460-bcbf-200560546988',
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						],
+					],
+					[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+					[
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						[
+							'b26fc763-417d-4f01-b81c-2ec61e14a972',
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						],
+					],
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', [] ],
+					[
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						[
+							'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						],
+					],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ],
+				] ),
+				parents: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+					[
+						'b26fc763-417d-4f01-b81c-2ec61e14a972',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+					[
+						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+				] ),
+			},
+			blockListSettings: {
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337': {},
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
+			},
+			blockEditingModes: new Map( [] ),
+		};
+
+		const hasContentRoleAttribute = jest.fn( () => false );
+		const get = jest.fn( () => 'edit' );
+		getBlockEditingMode.registry = {
+			select: jest.fn( () => ( {
+				hasContentRoleAttribute,
+				get,
+			} ) ),
+		};
+		__unstableGetEditorMode.registry = {
+			select: jest.fn( () => ( {
+				get,
+			} ) ),
+		};
+
+		it( 'should return false when top level block is not disabled', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( false );
+		} );
+
+		it( 'should return true when top level block is disabled and there are no editing modes within it', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+				] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( true );
+		} );
+
+		it( 'should return true when top level block is disabled via inheritence and there are no editing modes within it', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [ [ '', 'disabled' ] ] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( true );
+		} );
+
+		it( 'should return true when top level block is disabled and there are disabled editing modes within it', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+				] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( true );
+		} );
+
+		it( 'should return false when top level block is disabled and there are non-disabled editing modes within it', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ],
+				] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( false );
+		} );
+
+		it( 'should return false when top level block is disabled via inheritence and there are non-disabled editing modes within it', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [
+					[ '', 'disabled' ],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'default' ],
+				] ),
+			};
+			expect(
+				isBlockSubtreeDisabled(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'getEnabledClientIdsTree', () => {
+		const baseState = {
+			settings: {},
+			blocks: {
+				byClientId: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // |  Post Title
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // |  Post Content
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | |  Paragraph
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | |  Paragraph
+				] ),
+				order: new Map( [
+					[
+						'',
+						[
+							'6cf70164-9097-4460-bcbf-200560546988',
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						],
+					],
+					[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+					[
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						[
+							'b26fc763-417d-4f01-b81c-2ec61e14a972',
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						],
+					],
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', [] ],
+					[
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						[
+							'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						],
+					],
+					[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ],
+					[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ],
+				] ),
+				parents: new Map( [
+					[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
+					[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+					[
+						'b26fc763-417d-4f01-b81c-2ec61e14a972',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+					[
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+					[
+						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+				] ),
+			},
+			blockListSettings: {
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337': {},
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
+			},
+		};
+		getEnabledClientIdsTree.registry = {
+			select: jest.fn( () => ( {
+				__unstableGetEditorMode: () => 'edit',
+			} ) ),
+		};
+
+		it( 'should return tree containing only clientId and innerBlocks', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [] ),
+			};
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
+				{
+					clientId: '6cf70164-9097-4460-bcbf-200560546988',
+					innerBlocks: [],
+				},
+				{
+					clientId: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					innerBlocks: [
+						{
+							clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972',
+							innerBlocks: [],
+						},
+						{
+							clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							innerBlocks: [
+								{
+									clientId:
+										'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+									innerBlocks: [],
+								},
+								{
+									clientId:
+										'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+									innerBlocks: [],
+								},
+							],
+						},
+					],
+				},
+			] );
+		} );
+
+		it( 'should return a subtree when rootBlockClientId is given', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [] ),
+			};
+			expect(
+				getEnabledClientIdsTree(
+					state,
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+				)
+			).toEqual( [
+				{
+					clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					innerBlocks: [],
+				},
+				{
+					clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					innerBlocks: [
+						{
+							clientId: 'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+							innerBlocks: [],
+						},
+						{
+							clientId: 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							innerBlocks: [],
+						},
+					],
+				},
+			] );
+		} );
+
+		it( 'should filter out disabled blocks', () => {
+			const state = {
+				...baseState,
+				blockEditingModes: new Map( [
+					[ '', 'disabled' ],
+					[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', 'contentOnly' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ],
+				] ),
+			};
+			expect( getEnabledClientIdsTree( state ) ).toEqual( [
+				{
+					clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					innerBlocks: [],
+				},
+				{
+					clientId: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					innerBlocks: [
+						{
+							clientId: 'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+							innerBlocks: [],
+						},
+						{
+							clientId: 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							innerBlocks: [],
+						},
+					],
+				},
+			] );
+		} );
+	} );
+
+	describe( 'getEnabledBlockParents', () => {
+		it( 'should return an empty array if block is at the root', () => {
+			const state = {
+				settings: {},
+				blocks: {
+					parents: new Map( [
+						[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
+					] ),
+					order: new Map( [
+						[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+						[ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ],
+					] ),
+				},
+				blockEditingModes: new Map(),
+			};
+			expect(
+				getEnabledBlockParents(
+					state,
+					'6cf70164-9097-4460-bcbf-200560546988'
+				)
+			).toEqual( [] );
+		} );
+
+		it( 'should return non-disabled parents', () => {
+			const state = {
+				settings: {},
+				blocks: {
+					parents: new Map( [
+						[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+						[
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						],
+						[
+							'4c2b7140-fffd-44b4-b2a7-820c670a6514',
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						],
+					] ),
+
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[
+								'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+								'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
+				},
+				blockEditingModes: new Map( [
+					[ '', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ],
+				] ),
+				blockListSettings: {},
+			};
+			expect(
+				getEnabledBlockParents(
+					state,
+					'4c2b7140-fffd-44b4-b2a7-820c670a6514'
+				)
+			).toEqual( [
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+			] );
+		} );
+
+		it( 'should order from bottom to top if ascending is true', () => {
+			const state = {
+				settings: {},
+				blocks: {
+					parents: new Map( [
+						[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+						[
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+						],
+						[
+							'4c2b7140-fffd-44b4-b2a7-820c670a6514',
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						],
+					] ),
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ],
+						],
+						[
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
+				},
+				blockEditingModes: new Map( [
+					[ '', 'disabled' ],
+					[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'default' ],
+				] ),
+				blockListSettings: {},
+			};
+			expect(
+				getEnabledBlockParents(
+					state,
+					'4c2b7140-fffd-44b4-b2a7-820c670a6514',
+					true
+				)
+			).toEqual( [
+				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+			] );
+		} );
+	} );
+
+	describe( 'isDragging', () => {
+		it( 'should return true if the dragging state is true', () => {
+			const state = {
+				isDragging: true,
+			};
+
+			expect( isDragging( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if the dragging state is false', () => {
+			const state = {
+				isDragging: false,
+			};
+
+			expect( isDragging( state ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'getExpandedBlock', () => {
+		it( 'should return the expanded block', () => {
+			const state = {
+				expandedBlock: '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+			};
+
+			expect( getExpandedBlock( state ) ).toBe(
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+			);
+		} );
+	} );
+
+	describe( 'getBlockStyles', () => {
+		it( 'should return an empty object when no client IDs are provided', () => {
+			const state = {
+				blocks: {
+					attributes: new Map(),
+				},
+			};
+			const result = getBlockStyles( state, [] );
+			expect( result ).toEqual( {} );
+		} );
+
+		it( 'should return styles for a single block', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [ 'block-1' ] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+			} );
+		} );
+
+		it( 'should return styles for multiple blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', { style: { fontSize: '16px' } } ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': { fontSize: '16px' },
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for blocks without styles', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+						[ 'block-2', {} ],
+						[ 'block-3', { style: { margin: '10px' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'block-2',
+				'block-3',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'block-2': undefined,
+				'block-3': { margin: '10px' },
+			} );
+		} );
+
+		it( 'should return undefined for non-existent blocks', () => {
+			const state = {
+				blocks: {
+					attributes: new Map( [
+						[ 'block-1', { style: { color: 'red' } } ],
+					] ),
+				},
+			};
+			const result = getBlockStyles( state, [
+				'block-1',
+				'non-existent-block',
+			] );
+			expect( result ).toEqual( {
+				'block-1': { color: 'red' },
+				'non-existent-block': undefined,
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index 9f2e623c70111a..dd1665d6736ada 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -10,7 +10,10 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 	createBlock,
+	privateApis,
 } from '@wordpress/blocks';
+import { combineReducers, select } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -21,19 +24,47 @@ import {
 	blocks,
 	isBlockInterfaceHidden,
 	isTyping,
+	isDragging,
 	draggedBlocks,
 	selection,
 	initialPosition,
 	isMultiSelecting,
 	preferences,
 	blocksMode,
+	insertionCue,
 	insertionPoint,
 	template,
 	blockListSettings,
+	settings,
 	lastBlockAttributesChange,
 	lastBlockInserted,
+	blockEditingModes,
+	openedBlockSettingsMenu,
+	expandedBlock,
+	zoomLevel,
+	withDerivedBlockEditingModes,
 } from '../reducer';
 
+import { unlock } from '../../lock-unlock';
+import { sectionRootClientIdKey } from '.././private-keys';
+
+const { isContentBlock } = unlock( privateApis );
+
+jest.mock( '@wordpress/data/src/select', () => {
+	const actualSelect = jest.requireActual( '@wordpress/data/src/select' );
+
+	return {
+		select: jest.fn( ( ...args ) => actualSelect.select( ...args ) ),
+	};
+} );
+
+jest.mock( '@wordpress/blocks/src/api/utils', () => {
+	return {
+		...jest.requireActual( '@wordpress/blocks/src/api/utils' ),
+		isContentBlock: jest.fn(),
+	};
+} );
+
 const noop = () => {};
 
 describe( 'state', () => {
@@ -210,38 +241,48 @@ describe( 'state', () => {
 			} );
 			it( 'can replace a child block', () => {
 				const existingState = deepFreeze( {
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						'chicken-child': {
-							clientId: 'chicken-child',
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						'chicken-child': {
-							attr: true,
-						},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ 'chicken-child' ],
-						'chicken-child': [],
-					},
-					parents: {
-						chicken: '',
-						'chicken-child': 'chicken',
-					},
-					tree: {
-						'': {},
-						chicken: {},
-						'chicken-child': {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							'chicken-child': {
+								clientId: 'chicken-child',
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							'chicken-child': {
+								attr: true,
+							},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ 'chicken-child' ],
+							'chicken-child': [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+							'chicken-child': 'chicken',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							'': {},
+							chicken: {},
+							'chicken-child': {},
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
 
@@ -264,66 +305,84 @@ describe( 'state', () => {
 				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						[ newChildBlockId ]: {
-							clientId: newChildBlockId,
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						[ newChildBlockId ]: {
-							attr: false,
-							attr2: 'perfect',
-						},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ newChildBlockId ],
-						[ newChildBlockId ]: [],
-					},
-					parents: {
-						[ newChildBlockId ]: 'chicken',
-						chicken: '',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							[ newChildBlockId ]: {
+								clientId: newChildBlockId,
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							[ newChildBlockId ]: {
+								attr: false,
+								attr2: 'perfect',
+							},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ newChildBlockId ],
+							[ newChildBlockId ]: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							[ newChildBlockId ]: 'chicken',
+							chicken: '',
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
-				expect( state.tree.chicken ).not.toBe(
-					existingState.tree.chicken
+				expect( state.tree.get( 'chicken' ) ).not.toBe(
+					existingState.tree.get( 'chicken' )
 				);
 			} );
 
 			it( 'can insert a child block', () => {
 				const existingState = deepFreeze( {
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [],
-					},
-					parents: {
-						chicken: '',
-					},
-					tree: {
-						'': {
-							innerBlocks: [],
-						},
-						chicken: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							'': {
+								innerBlocks: [],
+							},
+							chicken: {},
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
 
@@ -346,46 +405,54 @@ describe( 'state', () => {
 				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						[ newChildBlockId ]: {
-							clientId: newChildBlockId,
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						[ newChildBlockId ]: {
-							attr: false,
-							attr2: 'perfect',
-						},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ newChildBlockId ],
-						[ newChildBlockId ]: [],
-					},
-					parents: {
-						[ newChildBlockId ]: 'chicken',
-						chicken: '',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							[ newChildBlockId ]: {
+								clientId: newChildBlockId,
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							[ newChildBlockId ]: {
+								attr: false,
+								attr2: 'perfect',
+							},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ newChildBlockId ],
+							[ newChildBlockId ]: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							[ newChildBlockId ]: 'chicken',
+							chicken: '',
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
-				expect( state.tree.chicken ).not.toBe(
-					existingState.tree.chicken
+				expect( state.tree.get( 'chicken' ) ).not.toBe(
+					existingState.tree.get( 'chicken' )
 				);
-				expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-					state.tree.chicken
+				expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+					state.tree.get( 'chicken' )
 				);
-				expect( state.tree.chicken.innerBlocks[ 0 ] ).toBe(
-					state.tree[ newChildBlockId ]
+				expect( state.tree.get( 'chicken' ).innerBlocks[ 0 ] ).toBe(
+					state.tree.get( newChildBlockId )
 				);
-				expect( state.tree[ newChildBlockId ] ).toEqual( {
+				expect( state.tree.get( newChildBlockId ) ).toEqual( {
 					clientId: newChildBlockId,
 					innerBlocks: [],
 					isValid: true,
@@ -399,44 +466,52 @@ describe( 'state', () => {
 
 			it( 'can replace multiple child blocks', () => {
 				const existingState = deepFreeze( {
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						'chicken-child': {
-							clientId: 'chicken-child',
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-						'chicken-child-2': {
-							clientId: 'chicken-child',
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						'chicken-child': {
-							attr: true,
-						},
-						'chicken-child-2': {
-							attr2: 'ok',
-						},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ 'chicken-child', 'chicken-child-2' ],
-						'chicken-child': [],
-						'chicken-child-2': [],
-					},
-					parents: {
-						chicken: '',
-						'chicken-child': 'chicken',
-						'chicken-child-2': 'chicken',
-					},
-					tree: {},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							'chicken-child': {
+								clientId: 'chicken-child',
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+							'chicken-child-2': {
+								clientId: 'chicken-child',
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							'chicken-child': {
+								attr: true,
+							},
+							'chicken-child-2': {
+								attr2: 'ok',
+							},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ 'chicken-child', 'chicken-child-2' ],
+							'chicken-child': [],
+							'chicken-child-2': [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+							'chicken-child': 'chicken',
+							'chicken-child-2': 'chicken',
+						} )
+					),
+					tree: new Map(),
 					controlledInnerBlocks: {},
 				} );
 
@@ -470,75 +545,83 @@ describe( 'state', () => {
 				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						[ newChildBlockId1 ]: {
-							clientId: newChildBlockId1,
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-						[ newChildBlockId2 ]: {
-							clientId: newChildBlockId2,
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-						[ newChildBlockId3 ]: {
-							clientId: newChildBlockId3,
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						[ newChildBlockId1 ]: {
-							attr: false,
-							attr2: 'perfect',
-						},
-						[ newChildBlockId2 ]: {
-							attr: true,
-							attr2: 'not-perfect',
-						},
-						[ newChildBlockId3 ]: {
-							attr2: 'hello',
-						},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [
-							newChildBlockId1,
-							newChildBlockId2,
-							newChildBlockId3,
-						],
-						[ newChildBlockId1 ]: [],
-						[ newChildBlockId2 ]: [],
-						[ newChildBlockId3 ]: [],
-					},
-					parents: {
-						chicken: '',
-						[ newChildBlockId1 ]: 'chicken',
-						[ newChildBlockId2 ]: 'chicken',
-						[ newChildBlockId3 ]: 'chicken',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							[ newChildBlockId1 ]: {
+								clientId: newChildBlockId1,
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+							[ newChildBlockId2 ]: {
+								clientId: newChildBlockId2,
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+							[ newChildBlockId3 ]: {
+								clientId: newChildBlockId3,
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							[ newChildBlockId1 ]: {
+								attr: false,
+								attr2: 'perfect',
+							},
+							[ newChildBlockId2 ]: {
+								attr: true,
+								attr2: 'not-perfect',
+							},
+							[ newChildBlockId3 ]: {
+								attr2: 'hello',
+							},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [
+								newChildBlockId1,
+								newChildBlockId2,
+								newChildBlockId3,
+							],
+							[ newChildBlockId1 ]: [],
+							[ newChildBlockId2 ]: [],
+							[ newChildBlockId3 ]: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+							[ newChildBlockId1 ]: 'chicken',
+							[ newChildBlockId2 ]: 'chicken',
+							[ newChildBlockId3 ]: 'chicken',
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
 
-				expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-					state.tree.chicken
+				expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+					state.tree.get( 'chicken' )
 				);
-				expect( state.tree.chicken.innerBlocks[ 0 ] ).toBe(
-					state.tree[ newChildBlockId1 ]
+				expect( state.tree.get( 'chicken' ).innerBlocks[ 0 ] ).toBe(
+					state.tree.get( newChildBlockId1 )
 				);
-				expect( state.tree.chicken.innerBlocks[ 1 ] ).toBe(
-					state.tree[ newChildBlockId2 ]
+				expect( state.tree.get( 'chicken' ).innerBlocks[ 1 ] ).toBe(
+					state.tree.get( newChildBlockId2 )
 				);
-				expect( state.tree.chicken.innerBlocks[ 2 ] ).toBe(
-					state.tree[ newChildBlockId3 ]
+				expect( state.tree.get( 'chicken' ).innerBlocks[ 2 ] ).toBe(
+					state.tree.get( newChildBlockId3 )
 				);
-				expect( state.tree[ newChildBlockId1 ] ).toEqual( {
+				expect( state.tree.get( newChildBlockId1 ) ).toEqual( {
 					innerBlocks: [],
 					clientId: newChildBlockId1,
 					name: 'core/test-child-block',
@@ -552,42 +635,52 @@ describe( 'state', () => {
 
 			it( 'can replace a child block that has other children', () => {
 				const existingState = deepFreeze( {
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						'chicken-child': {
-							clientId: 'chicken-child',
-							name: 'core/test-child-block',
-							isValid: true,
-						},
-						'chicken-grand-child': {
-							clientId: 'chicken-child',
-							name: 'core/test-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						'chicken-child': {},
-						'chicken-grand-child': {},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ 'chicken-child' ],
-						'chicken-child': [ 'chicken-grand-child' ],
-						'chicken-grand-child': [],
-					},
-					parents: {
-						chicken: '',
-						'chicken-child': 'chicken',
-						'chicken-grand-child': 'chicken-child',
-					},
-					tree: {
-						chicken: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							'chicken-child': {
+								clientId: 'chicken-child',
+								name: 'core/test-child-block',
+								isValid: true,
+							},
+							'chicken-grand-child': {
+								clientId: 'chicken-child',
+								name: 'core/test-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							'chicken-child': {},
+							'chicken-grand-child': {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ 'chicken-child' ],
+							'chicken-child': [ 'chicken-grand-child' ],
+							'chicken-grand-child': [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+							'chicken-child': 'chicken',
+							'chicken-grand-child': 'chicken-child',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							chicken: {},
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
 
@@ -607,37 +700,45 @@ describe( 'state', () => {
 				expect( restState ).toEqual( {
 					isPersistentChange: true,
 					isIgnoredChange: false,
-					byClientId: {
-						chicken: {
-							clientId: 'chicken',
-							name: 'core/test-parent-block',
-							isValid: true,
-						},
-						[ newChildBlockId ]: {
-							clientId: newChildBlockId,
-							name: 'core/test-block',
-							isValid: true,
-						},
-					},
-					attributes: {
-						chicken: {},
-						[ newChildBlockId ]: {},
-					},
-					order: {
-						'': [ 'chicken' ],
-						chicken: [ newChildBlockId ],
-						[ newChildBlockId ]: [],
-					},
-					parents: {
-						chicken: '',
-						[ newChildBlockId ]: 'chicken',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							chicken: {
+								clientId: 'chicken',
+								name: 'core/test-parent-block',
+								isValid: true,
+							},
+							[ newChildBlockId ]: {
+								clientId: newChildBlockId,
+								name: 'core/test-block',
+								isValid: true,
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							chicken: {},
+							[ newChildBlockId ]: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'chicken' ],
+							chicken: [ newChildBlockId ],
+							[ newChildBlockId ]: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							chicken: '',
+							[ newChildBlockId ]: 'chicken',
+						} )
+					),
 					controlledInnerBlocks: {},
 				} );
 
 				// The block object of the parent should be updated.
-				expect( state.tree.chicken ).not.toBe(
-					existingState.tree.chicken
+				expect( state.tree.get( 'chicken' ) ).not.toBe(
+					existingState.tree.get( 'chicken' )
 				);
 			} );
 		} );
@@ -646,13 +747,13 @@ describe( 'state', () => {
 			const state = blocks( undefined, {} );
 
 			expect( state ).toEqual( {
-				byClientId: {},
-				attributes: {},
-				order: {},
-				parents: {},
+				byClientId: new Map(),
+				attributes: new Map(),
+				order: new Map(),
+				parents: new Map(),
 				isPersistentChange: true,
 				isIgnoredChange: false,
-				tree: {},
+				tree: new Map(),
 				controlledInnerBlocks: {},
 			} );
 		} );
@@ -664,20 +765,20 @@ describe( 'state', () => {
 					blocks: [ { clientId: 'bananas', innerBlocks: [] } ],
 				} );
 
-				expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-				expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
+				expect( state.byClientId.size ).toBe( 1 );
+				expect( state.byClientId.get( 'bananas' ).clientId ).toBe(
 					'bananas'
 				);
-				expect( state.order ).toEqual( {
+				expect( Object.fromEntries( state.order ) ).toEqual( {
 					'': [ 'bananas' ],
 					bananas: [],
 				} );
-				expect( state.tree.bananas ).toEqual( {
+				expect( state.tree.get( 'bananas' ) ).toEqual( {
 					clientId: 'bananas',
 					innerBlocks: [],
 				} );
-				expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-					state.tree.bananas
+				expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+					state.tree.get( 'bananas' )
 				);
 			} );
 		} );
@@ -696,8 +797,8 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
-			expect( state.order ).toEqual( {
+			expect( state.byClientId.size ).toBe( 2 );
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ 'bananas' ],
 				apples: [],
 				bananas: [ 'apples' ],
@@ -727,21 +828,21 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 2 );
-			expect( Object.values( state.byClientId )[ 1 ].clientId ).toBe(
-				'ribs'
-			);
-			expect( state.order ).toEqual( {
+			expect( state.byClientId.size ).toBe( 2 );
+			expect( state.byClientId.get( 'ribs' ).clientId ).toBe( 'ribs' );
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ 'chicken', 'ribs' ],
 				chicken: [],
 				ribs: [],
 			} );
 
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-				state.tree.chicken
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'chicken' )
 			);
-			expect( state.tree[ '' ].innerBlocks[ 1 ] ).toBe( state.tree.ribs );
-			expect( state.tree.chicken ).toEqual( {
+			expect( state.tree.get( '' ).innerBlocks[ 1 ] ).toBe(
+				state.tree.get( 'ribs' )
+			);
+			expect( state.tree.get( 'chicken' ) ).toEqual( {
 				clientId: 'chicken',
 				name: 'core/test-block',
 				attributes: {},
@@ -773,24 +874,22 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-			expect( Object.values( state.byClientId )[ 0 ].name ).toBe(
+			expect( state.byClientId.size ).toBe( 1 );
+			expect( state.byClientId.get( 'wings' ).name ).toBe(
 				'core/freeform'
 			);
-			expect( Object.values( state.byClientId )[ 0 ].clientId ).toBe(
-				'wings'
-			);
-			expect( state.order ).toEqual( {
+			expect( state.byClientId.get( 'wings' ).clientId ).toBe( 'wings' );
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ 'wings' ],
 				wings: [],
 			} );
-			expect( state.parents ).toEqual( {
+			expect( Object.fromEntries( state.parents ) ).toEqual( {
 				wings: '',
 			} );
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-				state.tree.wings
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'wings' )
 			);
-			expect( state.tree.wings ).toEqual( {
+			expect( state.tree.get( 'wings' ) ).toEqual( {
 				clientId: 'wings',
 				name: 'core/freeform',
 				innerBlocks: [],
@@ -815,8 +914,8 @@ describe( 'state', () => {
 				blocks: [],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 0 );
-			expect( state.tree[ '' ].innerBlocks ).toHaveLength( 0 );
+			expect( state.byClientId.size ).toBe( 0 );
+			expect( state.tree.get( '' ).innerBlocks ).toHaveLength( 0 );
 		} );
 
 		it( 'should replace the block and remove references to its inner blocks', () => {
@@ -850,18 +949,18 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 1 );
-			expect( state.order ).toEqual( {
+			expect( state.byClientId.size ).toBe( 1 );
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ 'wings' ],
 				wings: [],
 			} );
-			expect( state.parents ).toEqual( {
+			expect( Object.fromEntries( state.parents ) ).toEqual( {
 				wings: '',
 			} );
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-				state.tree.wings
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'wings' )
 			);
-			expect( state.tree.wings ).toEqual( {
+			expect( state.tree.get( 'wings' ) ).toEqual( {
 				clientId: 'wings',
 				name: 'core/freeform',
 				innerBlocks: [],
@@ -885,21 +984,21 @@ describe( 'state', () => {
 				blocks: [ replacementBlock ],
 			} );
 
-			expect( state.order ).toEqual( {
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [ replacementBlock.clientId ],
 				[ replacementBlock.clientId ]: [],
 			} );
 
-			expect( state.parents ).toEqual( {
+			expect( Object.fromEntries( state.parents ) ).toEqual( {
 				[ wrapperBlock.clientId ]: '',
 				[ replacementBlock.clientId ]: wrapperBlock.clientId,
 			} );
 
-			expect( state.tree[ wrapperBlock.clientId ].innerBlocks[ 0 ] ).toBe(
-				state.tree[ replacementBlock.clientId ]
-			);
-			expect( state.tree[ replacementBlock.clientId ] ).toEqual( {
+			expect(
+				state.tree.get( wrapperBlock.clientId ).innerBlocks[ 0 ]
+			).toBe( state.tree.get( replacementBlock.clientId ) );
+			expect( state.tree.get( replacementBlock.clientId ) ).toEqual( {
 				clientId: replacementBlock.clientId,
 				name: 'core/test-block',
 				innerBlocks: [],
@@ -932,22 +1031,22 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( replacedState.byClientId ) ).toHaveLength( 1 );
-			expect( Object.values( originalState.byClientId )[ 0 ].name ).toBe(
+			expect( replacedState.byClientId.size ).toBe( 1 );
+			expect( originalState.byClientId.get( 'chicken' ).name ).toBe(
 				'core/test-block'
 			);
-			expect( Object.values( replacedState.byClientId )[ 0 ].name ).toBe(
+			expect( replacedState.byClientId.get( 'chicken' ).name ).toBe(
 				'core/freeform'
 			);
-			expect(
-				Object.values( replacedState.byClientId )[ 0 ].clientId
-			).toBe( 'chicken' );
-			expect( replacedState.order ).toEqual( {
+			expect( replacedState.byClientId.get( 'chicken' ).clientId ).toBe(
+				'chicken'
+			);
+			expect( Object.fromEntries( replacedState.order ) ).toEqual( {
 				'': [ 'chicken' ],
 				chicken: [],
 			} );
-			expect( originalState.tree.chicken ).not.toBe(
-				replacedState.tree.chicken
+			expect( originalState.tree.get( 'chicken' ) ).not.toBe(
+				replacedState.tree.get( 'chicken' )
 			);
 
 			const nestedBlock = {
@@ -977,16 +1076,16 @@ describe( 'state', () => {
 				blocks: [ replacementNestedBlock ],
 			} );
 
-			expect( replacedNestedState.order ).toEqual( {
+			expect( Object.fromEntries( replacedNestedState.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [ replacementNestedBlock.clientId ],
 				[ replacementNestedBlock.clientId ]: [],
 			} );
 
-			expect( originalNestedState.byClientId.chicken.name ).toBe(
+			expect( originalNestedState.byClientId.get( 'chicken' ).name ).toBe(
 				'core/test-block'
 			);
-			expect( replacedNestedState.byClientId.chicken.name ).toBe(
+			expect( replacedNestedState.byClientId.get( 'chicken' ).name ).toBe(
 				'core/freeform'
 			);
 		} );
@@ -1013,19 +1112,19 @@ describe( 'state', () => {
 				},
 			} );
 
-			expect( state.byClientId.chicken ).toEqual( {
+			expect( state.byClientId.get( 'chicken' ) ).toEqual( {
 				clientId: 'chicken',
 				name: 'core/test-block',
 				isValid: true,
 			} );
 
-			expect( state.attributes.chicken ).toEqual( {
+			expect( state.attributes.get( 'chicken' ) ).toEqual( {
 				content: 'ribs',
 			} );
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-				state.tree.chicken
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'chicken' )
 			);
-			expect( state.tree.chicken ).toEqual( {
+			expect( state.tree.get( 'chicken' ) ).toEqual( {
 				clientId: 'chicken',
 				name: 'core/test-block',
 				innerBlocks: [],
@@ -1058,20 +1157,20 @@ describe( 'state', () => {
 				updatedId: 3,
 			} );
 
-			expect( state.byClientId.chicken ).toEqual( {
+			expect( state.byClientId.get( 'chicken' ) ).toEqual( {
 				clientId: 'chicken',
 				name: 'core/block',
 				isValid: false,
 			} );
 
-			expect( state.attributes.chicken ).toEqual( {
+			expect( state.attributes.get( 'chicken' ) ).toEqual( {
 				ref: 3,
 			} );
 
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
-				state.tree.chicken
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'chicken' )
 			);
-			expect( state.tree.chicken ).toEqual( {
+			expect( state.tree.get( 'chicken' ) ).toEqual( {
 				clientId: 'chicken',
 				name: 'core/block',
 				isValid: false,
@@ -1105,12 +1204,16 @@ describe( 'state', () => {
 				clientIds: [ 'ribs' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [ 'ribs', 'chicken' ] );
-			expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe( state.tree.ribs );
-			expect( state.tree[ '' ].innerBlocks[ 1 ] ).toBe(
-				state.tree.chicken
+			expect( state.order.get( '' ) ).toEqual( [ 'ribs', 'chicken' ] );
+			expect( state.tree.get( '' ).innerBlocks[ 0 ] ).toBe(
+				state.tree.get( 'ribs' )
+			);
+			expect( state.tree.get( '' ).innerBlocks[ 1 ] ).toBe(
+				state.tree.get( 'chicken' )
+			);
+			expect( state.tree.get( 'chicken' ) ).toBe(
+				original.tree.get( 'chicken' )
 			);
-			expect( state.tree.chicken ).toBe( original.tree.chicken );
 		} );
 
 		it( 'should move the nested block up', () => {
@@ -1130,7 +1233,7 @@ describe( 'state', () => {
 				rootClientId: wrapperBlock.clientId,
 			} );
 
-			expect( state.order ).toEqual( {
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [
 					movedBlock.clientId,
@@ -1140,14 +1243,14 @@ describe( 'state', () => {
 				[ siblingBlock.clientId ]: [],
 			} );
 
-			expect( state.tree[ wrapperBlock.clientId ].innerBlocks[ 0 ] ).toBe(
-				state.tree[ movedBlock.clientId ]
-			);
-			expect( state.tree[ wrapperBlock.clientId ].innerBlocks[ 1 ] ).toBe(
-				state.tree[ siblingBlock.clientId ]
-			);
-			expect( state.tree[ movedBlock.clientId ] ).toBe(
-				original.tree[ movedBlock.clientId ]
+			expect(
+				state.tree.get( wrapperBlock.clientId ).innerBlocks[ 0 ]
+			).toBe( state.tree.get( movedBlock.clientId ) );
+			expect(
+				state.tree.get( wrapperBlock.clientId ).innerBlocks[ 1 ]
+			).toBe( state.tree.get( siblingBlock.clientId ) );
+			expect( state.tree.get( movedBlock.clientId ) ).toBe(
+				original.tree.get( movedBlock.clientId )
 			);
 		} );
 
@@ -1180,7 +1283,7 @@ describe( 'state', () => {
 				clientIds: [ 'ribs', 'veggies' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'ribs',
 				'veggies',
 				'chicken',
@@ -1206,7 +1309,7 @@ describe( 'state', () => {
 				rootClientId: wrapperBlock.clientId,
 			} );
 
-			expect( state.order ).toEqual( {
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [
 					movedBlockA.clientId,
@@ -1268,7 +1371,7 @@ describe( 'state', () => {
 				clientIds: [ 'chicken' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [ 'ribs', 'chicken' ] );
+			expect( state.order.get( '' ) ).toEqual( [ 'ribs', 'chicken' ] );
 		} );
 
 		it( 'should move the nested block down', () => {
@@ -1288,7 +1391,7 @@ describe( 'state', () => {
 				rootClientId: wrapperBlock.clientId,
 			} );
 
-			expect( state.order ).toEqual( {
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [
 					siblingBlock.clientId,
@@ -1328,7 +1431,7 @@ describe( 'state', () => {
 				clientIds: [ 'chicken', 'ribs' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'veggies',
 				'chicken',
 				'ribs',
@@ -1354,7 +1457,7 @@ describe( 'state', () => {
 				rootClientId: wrapperBlock.clientId,
 			} );
 
-			expect( state.order ).toEqual( {
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [ wrapperBlock.clientId ],
 				[ wrapperBlock.clientId ]: [
 					siblingBlock.clientId,
@@ -1416,21 +1519,23 @@ describe( 'state', () => {
 				clientIds: [ 'chicken' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [ 'ribs' ] );
-			expect( state.order ).not.toHaveProperty( 'chicken' );
-			expect( state.parents ).toEqual( {
+			expect( state.order.get( '' ) ).toEqual( [ 'ribs' ] );
+			expect( Object.fromEntries( state.order ) ).not.toHaveProperty(
+				'chicken'
+			);
+			expect( Object.fromEntries( state.parents ) ).toEqual( {
 				ribs: '',
 			} );
-			expect( state.byClientId ).toEqual( {
+			expect( Object.fromEntries( state.byClientId ) ).toEqual( {
 				ribs: {
 					clientId: 'ribs',
 					name: 'core/test-block',
 				},
 			} );
-			expect( state.attributes ).toEqual( {
+			expect( Object.fromEntries( state.attributes ) ).toEqual( {
 				ribs: {},
 			} );
-			expect( state.tree[ '' ].innerBlocks ).toHaveLength( 1 );
+			expect( state.tree.get( '' ).innerBlocks ).toHaveLength( 1 );
 		} );
 
 		it( 'should remove multiple blocks', () => {
@@ -1462,19 +1567,23 @@ describe( 'state', () => {
 				clientIds: [ 'chicken', 'veggies' ],
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [ 'ribs' ] );
-			expect( state.order ).not.toHaveProperty( 'chicken' );
-			expect( state.order ).not.toHaveProperty( 'veggies' );
-			expect( state.parents ).toEqual( {
+			expect( state.order.get( '' ) ).toEqual( [ 'ribs' ] );
+			expect( Object.fromEntries( state.order ) ).not.toHaveProperty(
+				'chicken'
+			);
+			expect( Object.fromEntries( state.order ) ).not.toHaveProperty(
+				'veggies'
+			);
+			expect( Object.fromEntries( state.parents ) ).toEqual( {
 				ribs: '',
 			} );
-			expect( state.byClientId ).toEqual( {
+			expect( Object.fromEntries( state.byClientId ) ).toEqual( {
 				ribs: {
 					clientId: 'ribs',
 					name: 'core/test-block',
 				},
 			} );
-			expect( state.attributes ).toEqual( {
+			expect( Object.fromEntries( state.attributes ) ).toEqual( {
 				ribs: {},
 			} );
 		} );
@@ -1496,11 +1605,11 @@ describe( 'state', () => {
 				clientIds: [ block.clientId ],
 			} );
 
-			expect( state.byClientId ).toEqual( {} );
-			expect( state.order ).toEqual( {
+			expect( state.byClientId ).toEqual( new Map() );
+			expect( Object.fromEntries( state.order ) ).toEqual( {
 				'': [],
 			} );
-			expect( state.parents ).toEqual( {} );
+			expect( Object.fromEntries( state.parents ) ).toEqual( {} );
 		} );
 
 		it( 'should insert at the specified index', () => {
@@ -1534,8 +1643,8 @@ describe( 'state', () => {
 				],
 			} );
 
-			expect( Object.keys( state.byClientId ) ).toHaveLength( 3 );
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.byClientId.size ).toBe( 3 );
+			expect( state.order.get( '' ) ).toEqual( [
 				'kumquat',
 				'persimmon',
 				'loquat',
@@ -1572,7 +1681,7 @@ describe( 'state', () => {
 				index: 0,
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'ribs',
 				'chicken',
 				'veggies',
@@ -1609,7 +1718,7 @@ describe( 'state', () => {
 				index: 2,
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'chicken',
 				'veggies',
 				'ribs',
@@ -1646,7 +1755,7 @@ describe( 'state', () => {
 				index: 1,
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'chicken',
 				'ribs',
 				'veggies',
@@ -1683,7 +1792,7 @@ describe( 'state', () => {
 				index: 0,
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [
+			expect( state.order.get( '' ) ).toEqual( [
 				'ribs',
 				'veggies',
 				'chicken',
@@ -1722,8 +1831,11 @@ describe( 'state', () => {
 				index: 0,
 			} );
 
-			expect( state.order[ '' ] ).toEqual( [ 'chicken' ] );
-			expect( state.order.chicken ).toEqual( [ 'ribs', 'veggies' ] );
+			expect( state.order.get( '' ) ).toEqual( [ 'chicken' ] );
+			expect( state.order.get( 'chicken' ) ).toEqual( [
+				'ribs',
+				'veggies',
+			] );
 		} );
 
 		describe( 'blocks', () => {
@@ -1795,7 +1907,42 @@ describe( 'state', () => {
 						},
 					} );
 
-					expect( state.attributes.kumquat.updated ).toBe( true );
+					expect( state.attributes.get( 'kumquat' ).updated ).toBe(
+						true
+					);
+				} );
+
+				it( 'should not updated equal attributes', () => {
+					const original = deepFreeze(
+						blocks( undefined, {
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									clientId: 'kumquat',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						} )
+					);
+					const state = blocks( original, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+						attributes: {
+							updated: true,
+						},
+					} );
+					const updatedState = blocks( state, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+						attributes: {
+							updated: true,
+						},
+					} );
+
+					expect( state.attributes.get( 'kumquat' ) ).toBe(
+						updatedState.attributes.get( 'kumquat' )
+					);
 				} );
 
 				it( 'should return with attribute block updates when attributes are unique by block', () => {
@@ -1820,7 +1967,9 @@ describe( 'state', () => {
 						uniqueByBlock: true,
 					} );
 
-					expect( state.attributes.kumquat.updated ).toBe( true );
+					expect( state.attributes.get( 'kumquat' ).updated ).toBe(
+						true
+					);
 				} );
 
 				it( 'should accumulate attribute block updates', () => {
@@ -1846,7 +1995,7 @@ describe( 'state', () => {
 						},
 					} );
 
-					expect( state.attributes.kumquat ).toEqual( {
+					expect( state.attributes.get( 'kumquat' ) ).toEqual( {
 						updated: true,
 						moreUpdated: true,
 					} );
@@ -1914,7 +2063,7 @@ describe( 'state', () => {
 						clientIds: [ 'kumquat' ],
 					} );
 
-					expect( state.attributes.kumquat ).toEqual( {} );
+					expect( state.attributes.get( 'kumquat' ) ).toEqual( {} );
 				} );
 			} );
 
@@ -2111,105 +2260,115 @@ describe( 'state', () => {
 					expect( state.controlledInnerBlocks.chicken ).toBe( true );
 					// The previous content of the block should be removed
 					expect( state.byClientId.child ).toBeUndefined();
-					expect( state.tree.child ).toBeUndefined();
-					expect( state.tree.chicken.innerBlocks ).toEqual( [] );
+					expect( state.tree.get( 'child' ) ).toBeUndefined();
+					expect( state.tree.get( 'chicken' ).innerBlocks ).toEqual(
+						[]
+					);
 				} );
 				it( 'should preserve the controlled blocks in state and re-attach them in other pieces of state(order, tree, etc..), when we replace inner blocks', () => {
 					const initialState = {
-						byClientId: {
-							'group-id': {
-								clientId: 'group-id',
-								name: 'core/group',
-								isValid: true,
-							},
-							'reusable-id': {
-								clientId: 'reusable-id',
-								name: 'core/block',
-								isValid: true,
-							},
-							'paragraph-id': {
-								clientId: 'paragraph-id',
-								name: 'core/paragraph',
-								isValid: true,
-							},
-						},
-						order: {
-							'': [ 'group-id' ],
-							'group-id': [ 'reusable-id' ],
-							'reusable-id': [ 'paragraph-id' ],
-							'paragraph-id': [],
-						},
+						byClientId: new Map(
+							Object.entries( {
+								'group-id': {
+									clientId: 'group-id',
+									name: 'core/group',
+									isValid: true,
+								},
+								'reusable-id': {
+									clientId: 'reusable-id',
+									name: 'core/block',
+									isValid: true,
+								},
+								'paragraph-id': {
+									clientId: 'paragraph-id',
+									name: 'core/paragraph',
+									isValid: true,
+								},
+							} )
+						),
+						order: new Map(
+							Object.entries( {
+								'': [ 'group-id' ],
+								'group-id': [ 'reusable-id' ],
+								'reusable-id': [ 'paragraph-id' ],
+								'paragraph-id': [],
+							} )
+						),
 						controlledInnerBlocks: {
 							'reusable-id': true,
 						},
-						parents: {
-							'group-id': '',
-							'reusable-id': 'group-id',
-							'paragraph-id': 'reusable-id',
-						},
-						tree: {
-							'group-id': {
-								clientId: 'group-id',
-								name: 'core/group',
-								isValid: true,
-								innerBlocks: [
-									{
-										clientId: 'reusable-id',
-										name: 'core/block',
-										isValid: true,
-										attributes: {
-											ref: 687,
+						parents: new Map(
+							Object.entries( {
+								'group-id': '',
+								'reusable-id': 'group-id',
+								'paragraph-id': 'reusable-id',
+							} )
+						),
+						tree: new Map(
+							Object.entries( {
+								'group-id': {
+									clientId: 'group-id',
+									name: 'core/group',
+									isValid: true,
+									innerBlocks: [
+										{
+											clientId: 'reusable-id',
+											name: 'core/block',
+											isValid: true,
+											attributes: {
+												ref: 687,
+											},
+											innerBlocks: [],
 										},
-										innerBlocks: [],
+									],
+								},
+								'reusable-id': {
+									clientId: 'reusable-id',
+									name: 'core/block',
+									isValid: true,
+									attributes: {
+										ref: 687,
 									},
-								],
-							},
-							'reusable-id': {
-								clientId: 'reusable-id',
-								name: 'core/block',
-								isValid: true,
-								attributes: {
-									ref: 687,
+									innerBlocks: [],
 								},
-								innerBlocks: [],
-							},
-							'': {
-								innerBlocks: [
-									{
-										clientId: 'group-id',
-										name: 'core/group',
-										isValid: true,
-										innerBlocks: [
-											{
-												clientId: 'reusable-id',
-												name: 'core/block',
-												isValid: true,
-												attributes: {
-													ref: 687,
+								'': {
+									innerBlocks: [
+										{
+											clientId: 'group-id',
+											name: 'core/group',
+											isValid: true,
+											innerBlocks: [
+												{
+													clientId: 'reusable-id',
+													name: 'core/block',
+													isValid: true,
+													attributes: {
+														ref: 687,
+													},
+													innerBlocks: [],
 												},
-												innerBlocks: [],
-											},
-										],
-									},
-								],
-							},
-							'paragraph-id': {
-								clientId: 'paragraph-id',
-								name: 'core/paragraph',
-								isValid: true,
-								innerBlocks: [],
-							},
-							'controlled||reusable-id': {
-								innerBlocks: [
-									{
-										clientId: 'paragraph-id',
-										name: 'core/paragraph',
-										isValid: true,
-										innerBlocks: [],
-									},
-								],
-							},
-						},
+											],
+										},
+									],
+								},
+								'paragraph-id': {
+									clientId: 'paragraph-id',
+									name: 'core/paragraph',
+									isValid: true,
+									innerBlocks: [],
+								},
+								'controlled||reusable-id': {
+									innerBlocks: [
+										{
+											clientId: 'paragraph-id',
+											name: 'core/paragraph',
+											isValid: true,
+											innerBlocks: [],
+										},
+									],
+								},
+							} )
+						),
 					};
 					// We will dispatch an action that replaces the inner
 					// blocks with the same inner blocks, which contain
@@ -2231,26 +2390,30 @@ describe( 'state', () => {
 						updateSelection: false,
 					};
 					const state = blocks( initialState, action );
-					expect( state.order ).toEqual(
-						expect.objectContaining( initialState.order )
+					expect( Object.fromEntries( state.order ) ).toEqual(
+						expect.objectContaining(
+							Object.fromEntries( initialState.order )
+						)
 					);
-					expect( state.tree ).toEqual(
-						expect.objectContaining( initialState.tree )
+					expect( Object.fromEntries( state.tree ) ).toEqual(
+						expect.objectContaining(
+							Object.fromEntries( initialState.tree )
+						)
 					);
 				} );
 			} );
 		} );
 	} );
 
-	describe( 'insertionPoint', () => {
+	describe( 'insertionCue', () => {
 		it( 'should default to null', () => {
-			const state = insertionPoint( undefined, {} );
+			const state = insertionCue( undefined, {} );
 
 			expect( state ).toBe( null );
 		} );
 
 		it( 'should set insertion point', () => {
-			const state = insertionPoint( null, {
+			const state = insertionCue( null, {
 				type: 'SHOW_INSERTION_POINT',
 				rootClientId: 'clientId1',
 				index: 0,
@@ -2267,7 +2430,7 @@ describe( 'state', () => {
 				rootClientId: 'clientId1',
 				index: 0,
 			} );
-			const state = insertionPoint( original, {
+			const state = insertionCue( original, {
 				type: 'HIDE_INSERTION_POINT',
 			} );
 
@@ -2311,6 +2474,24 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'isDragging', () => {
+		it( 'should set the dragging flag to true', () => {
+			const state = isDragging( false, {
+				type: 'START_DRAGGING',
+			} );
+
+			expect( state ).toBe( true );
+		} );
+
+		it( 'should set the dragging flag to false', () => {
+			const state = isDragging( true, {
+				type: 'STOP_DRAGGING',
+			} );
+
+			expect( state ).toBe( false );
+		} );
+	} );
+
 	describe( 'draggedBlocks', () => {
 		it( 'should store the dragged client ids when a user starts dragging blocks', () => {
 			const clientIds = [ 'block-1', 'block-2', 'block-3' ];
@@ -2756,7 +2937,6 @@ describe( 'state', () => {
 					'core/embed': {
 						time: 123456,
 						count: 1,
-						insert: { name: 'core/embed' },
 					},
 				},
 			} );
@@ -2767,7 +2947,6 @@ describe( 'state', () => {
 						'core/embed': {
 							time: 123456,
 							count: 1,
-							insert: { name: 'core/embed' },
 						},
 					},
 				} ),
@@ -2793,12 +2972,10 @@ describe( 'state', () => {
 					'core/embed': {
 						time: 123457,
 						count: 2,
-						insert: { name: 'core/embed' },
 					},
 					'core/block/123': {
 						time: 123457,
 						count: 1,
-						insert: { name: 'core/block', ref: 123 },
 					},
 				},
 			} );
@@ -2861,17 +3038,14 @@ describe( 'state', () => {
 						[ orangeVariationName ]: {
 							time: 123456,
 							count: 1,
-							insert: { name: orangeVariationName },
 						},
 						[ appleVariationName ]: {
 							time: 123456,
 							count: 1,
-							insert: { name: appleVariationName },
 						},
 						[ blockWithVariations ]: {
 							time: 123456,
 							count: 2,
-							insert: { name: blockWithVariations },
 						},
 					} ),
 				} );
@@ -2922,6 +3096,28 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'settings', () => {
+		it( 'should warn about __unstableIsPreviewMode deprecation', () => {
+			const consoleWarn = jest
+				.spyOn( global.console, 'warn' )
+				.mockImplementation();
+
+			const settingsObject = settings( undefined, {
+				type: 'UPDATE_SETTINGS',
+				reset: true,
+			} );
+
+			expect( settingsObject.__unstableIsPreviewMode ).toBeDefined();
+			expect( settingsObject.isPreviewMode ).toBeDefined();
+
+			expect( consoleWarn ).toHaveBeenCalledWith(
+				'__unstableIsPreviewMode is deprecated since version 6.8. Please use isPreviewMode instead.'
+			);
+
+			consoleWarn.mockRestore();
+		} );
+	} );
+
 	describe( 'blockListSettings', () => {
 		it( 'should add new settings', () => {
 			const original = deepFreeze( {} );
@@ -3123,7 +3319,7 @@ describe( 'state', () => {
 	} );
 
 	describe( 'lastBlockInserted', () => {
-		it( 'should return client id if last block inserted is called with action INSERT_BLOCKS', () => {
+		it( 'should contain client id if last block inserted is called with action INSERT_BLOCKS', () => {
 			const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
 
 			const action = {
@@ -3140,7 +3336,7 @@ describe( 'state', () => {
 
 			const state = lastBlockInserted( {}, action );
 
-			expect( state.clientId ).toBe( expectedClientId );
+			expect( state.clientIds ).toContain( expectedClientId );
 		} );
 
 		it( 'should return inserter_menu source if last block inserted is called with action INSERT_BLOCKS', () => {
@@ -3165,7 +3361,7 @@ describe( 'state', () => {
 
 		it( 'should return state if last block inserted is called with action INSERT_BLOCKS and block list is empty', () => {
 			const expectedState = {
-				clientId: '9db792c6-a25a-495d-adbd-97d56a4c4189',
+				clientIds: [ '9db792c6-a25a-495d-adbd-97d56a4c4189' ],
 			};
 
 			const action = {
@@ -3181,6 +3377,55 @@ describe( 'state', () => {
 			expect( state ).toEqual( expectedState );
 		} );
 
+		it( 'should return client ids of blocks when called with REPLACE_BLOCKS', () => {
+			const clientIdOne = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
+			const clientIdTwo = '9db792c6-a25a-495d-adbd-97d56a4c4189';
+
+			const action = {
+				blocks: [
+					{
+						clientId: clientIdOne,
+					},
+					{
+						clientId: clientIdTwo,
+					},
+				],
+				type: 'REPLACE_BLOCKS',
+			};
+
+			const state = lastBlockInserted( {}, action );
+
+			expect( state.clientIds ).toEqual( [ clientIdOne, clientIdTwo ] );
+		} );
+
+		it( 'should return client ids of the original blocks when inner blocks are replaced with REPLACE_INNER_BLOCKS', () => {
+			const initialBlocks = deepFreeze( [
+				'62bfef6e-d5e9-43ba-b7f9-c77cf354141f',
+				'9db792c6-a25a-495d-adbd-97d56a4c4189',
+			] );
+
+			const action = {
+				blocks: [
+					{
+						clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+					},
+					{
+						clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+					},
+				],
+				type: 'REPLACE_INNER_BLOCKS',
+			};
+
+			const state = lastBlockInserted(
+				{
+					clientIds: initialBlocks,
+				},
+				action
+			);
+
+			expect( state.clientIds ).toEqual( initialBlocks );
+		} );
+
 		it( 'should return empty state if last block inserted is called with action RESET_BLOCKS', () => {
 			const expectedState = {};
 
@@ -3193,4 +3438,959 @@ describe( 'state', () => {
 			expect( state ).toEqual( expectedState );
 		} );
 	} );
+
+	describe( 'blockEditingModes', () => {
+		it( 'should return an empty map by default', () => {
+			expect( blockEditingModes( undefined, {} ) ).toEqual( new Map() );
+		} );
+
+		it( 'should set the editing mode for a block', () => {
+			const state = new Map();
+			const newState = blockEditingModes( state, {
+				type: 'SET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				mode: 'default',
+			} );
+			expect( newState ).toEqual(
+				new Map( [
+					[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+				] )
+			);
+		} );
+
+		it( 'should clear the editing mode for a block', () => {
+			const state = new Map( [
+				[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+			] );
+			const newState = blockEditingModes( state, {
+				type: 'UNSET_BLOCK_EDITING_MODE',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+			expect( newState ).toEqual( new Map() );
+		} );
+
+		it( 'should clear editing modes when blocks are reset', () => {
+			const state = new Map( [
+				[ '', 'disabled' ],
+				[ '14501cc2-90a6-4f52-aa36-ab6e896135d1', 'default' ],
+			] );
+			const newState = blockEditingModes( state, {
+				type: 'RESET_BLOCKS',
+			} );
+			expect( newState ).toEqual(
+				new Map( [
+					// Root mode should be maintained.
+					[ '', 'disabled' ],
+				] )
+			);
+		} );
+	} );
+
+	describe( 'openedBlockSettingsMenu', () => {
+		it( 'should return null by default', () => {
+			expect( openedBlockSettingsMenu( undefined, {} ) ).toBe( null );
+		} );
+
+		it( 'should set client id for opened block settings menu', () => {
+			const state = openedBlockSettingsMenu( null, {
+				type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+			expect( state ).toBe( '14501cc2-90a6-4f52-aa36-ab6e896135d1' );
+		} );
+
+		it( 'should clear the state when no client id is passed', () => {
+			const state = openedBlockSettingsMenu(
+				'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				{
+					type: 'SET_OPENED_BLOCK_SETTINGS_MENU',
+				}
+			);
+			expect( state ).toBe( null );
+		} );
+	} );
+
+	describe( 'expandedBlock', () => {
+		it( 'should return null by default', () => {
+			expect( expandedBlock( undefined, {} ) ).toBe( null );
+		} );
+
+		it( 'should set client id for expanded block', () => {
+			const state = expandedBlock( null, {
+				type: 'SET_BLOCK_EXPANDED_IN_LIST_VIEW',
+				clientId: '14501cc2-90a6-4f52-aa36-ab6e896135d1',
+			} );
+			expect( state ).toBe( '14501cc2-90a6-4f52-aa36-ab6e896135d1' );
+		} );
+
+		it( 'should clear the state when a block is selected', () => {
+			const state = expandedBlock(
+				'14501cc2-90a6-4f52-aa36-ab6e896135d1',
+				{
+					type: 'SELECT_BLOCK',
+					clientId: 'a-different-block',
+				}
+			);
+			expect( state ).toBe( null );
+		} );
+	} );
+
+	describe( 'insertionPoint', () => {
+		it( 'should default to null', () => {
+			const state = insertionPoint( undefined, {} );
+
+			expect( state ).toBe( null );
+		} );
+
+		it( 'should set insertion point', () => {
+			const state = insertionPoint( null, {
+				type: 'SET_INSERTION_POINT',
+				value: {
+					rootClientId: 'clientId1',
+					index: 4,
+				},
+			} );
+
+			expect( state ).toEqual( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+		} );
+
+		it( 'should clear the insertion point on block selection', () => {
+			const original = deepFreeze( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+			const state = insertionPoint( original, {
+				type: 'SELECT_BLOCK',
+			} );
+
+			expect( state ).toBe( null );
+		} );
+	} );
+
+	describe( 'withDerivedBlockEditingModes', () => {
+		const testReducer = withDerivedBlockEditingModes(
+			combineReducers( {
+				blocks,
+				settings,
+				zoomLevel,
+			} )
+		);
+
+		function dispatchActions( actions, reducer, initialState = {} ) {
+			return actions.reduce( ( _state, action ) => {
+				return reducer( _state, action );
+			}, initialState );
+		}
+
+		beforeEach( () => {
+			isContentBlock.mockImplementation(
+				( blockName ) => blockName === 'core/paragraph'
+			);
+		} );
+
+		afterAll( () => {
+			isContentBlock.mockRestore();
+		} );
+
+		describe( 'edit mode', () => {
+			let initialState;
+			beforeAll( () => {
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'edit' ),
+						};
+					}
+					return select( storeName );
+				} );
+
+				initialState = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: '',
+							},
+						},
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-1',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-1',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-2',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													clientId: 'paragraph-2',
+													attributes: {},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer
+				);
+			} );
+
+			afterAll( () => {
+				select.mockRestore();
+			} );
+
+			it( 'returns no block editing modes when zoomed out / navigation mode are not active and there are no synced patterns', () => {
+				expect( initialState.derivedBlockEditingModes ).toEqual(
+					new Map()
+				);
+			} );
+		} );
+
+		describe( 'synced patterns', () => {
+			let initialState;
+			beforeAll( () => {
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'edit' ),
+						};
+					}
+					return select( storeName );
+				} );
+
+				// Simulates how the editor typically inserts controlled blocks,
+				// - first the pattern is inserted with no inner blocks.
+				// - next the pattern is marked as a controlled block.
+				// - finally, once the inner blocks of the pattern are received, they're inserted.
+				// This process is repeated for the two patterns in this test.
+				initialState = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: '',
+							},
+						},
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-1',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-1',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-2',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													clientId: 'paragraph-2',
+													attributes: {},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+						{
+							type: 'INSERT_BLOCKS',
+							rootClientId: '',
+							blocks: [
+								{
+									name: 'core/block',
+									clientId: 'root-pattern',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						},
+						{
+							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+							clientId: 'root-pattern',
+							hasControlledInnerBlocks: true,
+						},
+						{
+							type: 'REPLACE_INNER_BLOCKS',
+							rootClientId: 'root-pattern',
+							blocks: [
+								{
+									name: 'core/block',
+									clientId: 'nested-pattern',
+									attributes: {},
+									innerBlocks: [],
+								},
+								{
+									name: 'core/paragraph',
+									clientId: 'pattern-paragraph',
+									attributes: {},
+									innerBlocks: [],
+								},
+								{
+									name: 'core/group',
+									clientId: 'pattern-group',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId:
+												'pattern-paragraph-with-overrides',
+											attributes: {
+												metadata: {
+													bindings: {
+														__default:
+															'core/pattern-overrides',
+													},
+												},
+											},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+						{
+							type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+							clientId: 'nested-pattern',
+							hasControlledInnerBlocks: true,
+						},
+						{
+							type: 'REPLACE_INNER_BLOCKS',
+							rootClientId: 'nested-pattern',
+							blocks: [
+								{
+									name: 'core/paragraph',
+									clientId: 'nested-paragraph',
+									attributes: {},
+									innerBlocks: [],
+								},
+								{
+									name: 'core/group',
+									clientId: 'nested-group',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId:
+												'nested-paragraph-with-overrides',
+											attributes: {
+												metadata: {
+													bindings: {
+														__default:
+															'core/pattern-overrides',
+													},
+												},
+											},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer,
+					initialState
+				);
+			} );
+
+			afterAll( () => {
+				select.mockRestore();
+			} );
+
+			it( 'returns the expected block editing modes for synced patterns', () => {
+				// Only the parent pattern and its own children that have bindings
+				// are in contentOnly mode. All other blocks are disabled.
+				expect( initialState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'pattern-paragraph': 'disabled',
+							'pattern-group': 'disabled',
+							'pattern-paragraph-with-overrides': 'contentOnly',
+							'nested-pattern': 'disabled',
+							'nested-paragraph': 'disabled',
+							'nested-group': 'disabled',
+							'nested-paragraph-with-overrides': 'disabled',
+						} )
+					)
+				);
+			} );
+
+			it( 'removes block editing modes when synced patterns are removed', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'REMOVE_BLOCKS',
+							clientIds: [ 'root-pattern' ],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual( new Map() );
+			} );
+
+			it( 'returns the expected block editing modes for synced patterns when switching to navigation mode', () => {
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'navigation' ),
+						};
+					}
+					return select( storeName );
+				} );
+
+				const {
+					derivedBlockEditingModes,
+					derivedNavModeBlockEditingModes,
+				} = dispatchActions(
+					[
+						{
+							type: 'SET_EDITOR_MODE',
+							mode: 'navigation',
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'pattern-paragraph': 'disabled',
+							'pattern-group': 'disabled',
+							'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
+							'nested-pattern': 'disabled',
+							'nested-paragraph': 'disabled',
+							'nested-group': 'disabled',
+							'nested-paragraph-with-overrides': 'disabled',
+						} )
+					)
+				);
+
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section.
+							'paragraph-1': 'contentOnly', // Content block in section.
+							'group-2': 'disabled',
+							'paragraph-2': 'contentOnly', // Content block in section.
+							'root-pattern': 'contentOnly', // Section.
+							'pattern-paragraph': 'disabled',
+							'pattern-group': 'disabled',
+							'pattern-paragraph-with-overrides': 'contentOnly', // Pattern child with bindings.
+							'nested-pattern': 'disabled',
+							'nested-paragraph': 'disabled',
+							'nested-group': 'disabled',
+							'nested-paragraph-with-overrides': 'disabled',
+						} )
+					)
+				);
+
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'edit' ),
+						};
+					}
+					return select( storeName );
+				} );
+			} );
+
+			it( 'returns the expected block editing modes for synced patterns when switching to zoomed out mode', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'SET_ZOOM_LEVEL',
+							zoom: 'auto-scaled',
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section.
+							'paragraph-1': 'disabled',
+							'group-2': 'disabled',
+							'paragraph-2': 'disabled',
+							'root-pattern': 'contentOnly', // Pattern and section.
+							'pattern-paragraph': 'disabled',
+							'pattern-group': 'disabled',
+							'pattern-paragraph-with-overrides': 'disabled',
+							'nested-pattern': 'disabled',
+							'nested-paragraph': 'disabled',
+							'nested-group': 'disabled',
+							'nested-paragraph-with-overrides': 'disabled',
+						} )
+					)
+				);
+			} );
+		} );
+
+		describe( 'navigation mode', () => {
+			let initialState;
+
+			beforeAll( () => {
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'navigation' ),
+						};
+					}
+					return select( storeName );
+				} );
+
+				initialState = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: '',
+							},
+						},
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-1',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-1',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-2',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													clientId: 'paragraph-2',
+													attributes: {},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer
+				);
+			} );
+
+			afterAll( () => {
+				select.mockRestore();
+			} );
+
+			it( 'returns the expected block editing modes', () => {
+				expect( initialState.derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'contentOnly', // Content block in section.
+							'group-2': 'disabled', // Non-content block in section.
+							'paragraph-2': 'contentOnly', // Content block in section.
+						} )
+					)
+				);
+			} );
+
+			it( 'removes block editing modes when blocks are removed', () => {
+				const { derivedNavModeBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'REMOVE_BLOCKS',
+							clientIds: [ 'group-2' ],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly',
+							'group-1': 'contentOnly',
+							'paragraph-1': 'contentOnly',
+						} )
+					)
+				);
+			} );
+
+			it( 'updates block editing modes when new blocks are inserted', () => {
+				const { derivedNavModeBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'INSERT_BLOCKS',
+							rootClientId: '',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-3',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-3',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-4',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'contentOnly', // Content block in section.
+							'group-2': 'disabled', // Non-content block in section.
+							'paragraph-2': 'contentOnly', // Content block in section.
+							'group-3': 'contentOnly', // New section block.
+							'paragraph-3': 'contentOnly', // New content block in section.
+							'group-4': 'disabled', // Non-content block in section.
+						} )
+					)
+				);
+			} );
+
+			it( 'updates block editing modes when blocks are moved to a new position', () => {
+				const { derivedNavModeBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'MOVE_BLOCKS_TO_POSITION',
+							clientIds: [ 'group-2' ],
+							fromRootClientId: 'group-1',
+							toRootClientId: '',
+						},
+					],
+					testReducer,
+					initialState
+				);
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'contentOnly', // Content block in section.
+							'group-2': 'contentOnly', // New section block.
+							'paragraph-2': 'contentOnly', // Still a content block in a section.
+						} )
+					)
+				);
+			} );
+
+			it( 'handles changes to the section root', () => {
+				const { derivedNavModeBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: 'group-1',
+							},
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedNavModeBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'disabled',
+							'group-1': 'contentOnly',
+							'paragraph-1': 'contentOnly',
+							'group-2': 'contentOnly',
+							'paragraph-2': 'contentOnly',
+						} )
+					)
+				);
+			} );
+		} );
+
+		describe( 'zoom out mode', () => {
+			let initialState;
+
+			beforeAll( () => {
+				initialState = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: '',
+							},
+						},
+						{
+							type: 'SET_ZOOM_LEVEL',
+							zoom: 'auto-scaled',
+						},
+						{
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-1',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-1',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-2',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													clientId: 'paragraph-2',
+													attributes: {},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer
+				);
+			} );
+
+			it( 'returns the expected block editing modes', () => {
+				expect( initialState.derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'disabled',
+							'group-2': 'disabled',
+							'paragraph-2': 'disabled',
+						} )
+					)
+				);
+			} );
+
+			it( 'overrides navigation mode', () => {
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'navigation' ),
+						};
+					}
+					return select( storeName );
+				} );
+
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'SET_EDITOR_MODE',
+							mode: 'navigation',
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'disabled',
+							'group-2': 'disabled',
+							'paragraph-2': 'disabled',
+						} )
+					)
+				);
+
+				select.mockImplementation( ( storeName ) => {
+					if ( storeName === preferencesStore ) {
+						return {
+							get: jest.fn( () => 'edit' ),
+						};
+					}
+					return select( storeName );
+				} );
+			} );
+
+			it( 'removes block editing modes when blocks are removed', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'REMOVE_BLOCKS',
+							clientIds: [ 'group-2' ],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly',
+							'group-1': 'contentOnly',
+							'paragraph-1': 'disabled',
+						} )
+					)
+				);
+			} );
+
+			it( 'updates block editing modes when new blocks are inserted', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'INSERT_BLOCKS',
+							rootClientId: '',
+							blocks: [
+								{
+									name: 'core/group',
+									clientId: 'group-3',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/paragraph',
+											clientId: 'paragraph-3',
+											attributes: {},
+											innerBlocks: [],
+										},
+										{
+											name: 'core/group',
+											clientId: 'group-4',
+											attributes: {},
+											innerBlocks: [],
+										},
+									],
+								},
+							],
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'disabled',
+							'group-2': 'disabled',
+							'paragraph-2': 'disabled',
+							'group-3': 'contentOnly', // New section block.
+							'paragraph-3': 'disabled',
+							'group-4': 'disabled',
+						} )
+					)
+				);
+			} );
+
+			it( 'updates block editing modes when blocks are moved to a new position', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'MOVE_BLOCKS_TO_POSITION',
+							clientIds: [ 'group-2' ],
+							fromRootClientId: 'group-1',
+							toRootClientId: '',
+						},
+					],
+					testReducer,
+					initialState
+				);
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'contentOnly', // Section root.
+							'group-1': 'contentOnly', // Section block.
+							'paragraph-1': 'disabled',
+							'group-2': 'contentOnly', // New section block.
+							'paragraph-2': 'disabled',
+						} )
+					)
+				);
+			} );
+
+			it( 'handles changes to the section root', () => {
+				const { derivedBlockEditingModes } = dispatchActions(
+					[
+						{
+							type: 'UPDATE_SETTINGS',
+							settings: {
+								[ sectionRootClientIdKey ]: 'group-1',
+							},
+						},
+					],
+					testReducer,
+					initialState
+				);
+
+				expect( derivedBlockEditingModes ).toEqual(
+					new Map(
+						Object.entries( {
+							'': 'disabled',
+							'group-1': 'contentOnly', // New section root.
+							'paragraph-1': 'contentOnly', // Section block.
+							'group-2': 'contentOnly', // Section block.
+							'paragraph-2': 'disabled',
+						} )
+					)
+				);
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/registry-selectors.js b/packages/block-editor/src/store/test/registry-selectors.js
new file mode 100644
index 00000000000000..89115c75f05144
--- /dev/null
+++ b/packages/block-editor/src/store/test/registry-selectors.js
@@ -0,0 +1,431 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { select, dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store } from '../';
+
+describe( 'selectors', () => {
+	beforeEach( () => {
+		registerBlockType( 'core/test-block-a', {
+			save: ( props ) => props.attributes.text,
+			category: 'design',
+			title: 'Test Block A',
+			icon: 'test',
+			keywords: [ 'testing' ],
+		} );
+
+		registerBlockType( 'core/test-block-b', {
+			save: ( props ) => props.attributes.text,
+			category: 'text',
+			title: 'Test Block B',
+			icon: 'test',
+			keywords: [ 'testing' ],
+			supports: {
+				multiple: false,
+			},
+		} );
+	} );
+
+	afterEach( async () => {
+		unregisterBlockType( 'core/test-block-a' );
+		unregisterBlockType( 'core/test-block-b' );
+	} );
+
+	describe( '__experimentalGetAllowedPatterns', () => {
+		beforeAll( async () => {
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block1',
+					name: 'core/test-block-a',
+					innerBlocks: [],
+				},
+				{
+					clientId: 'block2',
+					name: 'core/test-block-b',
+					innerBlocks: [],
+				},
+			] );
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'pattern-a',
+						title: 'pattern with a',
+						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
+					},
+					{
+						name: 'pattern-b',
+						title: 'pattern with b',
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+					{
+						name: 'pattern-c',
+						title: 'pattern hidden from UI',
+						inserter: false,
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+					},
+				],
+			} );
+			await dispatch( store ).updateBlockListSettings( 'block1', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+		} );
+
+		afterAll( async () => {
+			await dispatch( store ).resetBlocks( [] );
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [],
+			} );
+			await dispatch( store ).updateBlockListSettings( 'block1', {} );
+		} );
+
+		it( 'should return all patterns for root level', () => {
+			expect(
+				select( store ).__experimentalGetAllowedPatterns( null )
+			).toHaveLength( 2 );
+		} );
+		it( 'should return patterns that consists of blocks allowed for the specified client ID', () => {
+			expect(
+				select( store ).__experimentalGetAllowedPatterns( 'block1' )
+			).toHaveLength( 1 );
+			expect(
+				select( store ).__experimentalGetAllowedPatterns( 'block2' )
+			).toHaveLength( 0 );
+		} );
+		it( 'should return empty array if only patterns hidden from UI exist', () => {
+			expect(
+				select( store ).__experimentalGetAllowedPatterns( {
+					blocks: { byClientId: new Map() },
+					blockListSettings: {},
+					settings: {
+						__experimentalBlockPatterns: [
+							{
+								name: 'pattern-c',
+								title: 'pattern hidden from UI',
+								inserter: false,
+								content:
+									'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+							},
+						],
+					},
+				} )
+			).toHaveLength( 0 );
+		} );
+	} );
+
+	describe( '__experimentalGetParsedPattern', () => {
+		beforeAll( async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'pattern-a',
+						title: 'pattern with a',
+						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
+					},
+					{
+						name: 'pattern-hidden-from-ui',
+						title: 'pattern hidden from UI',
+						inserter: false,
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a --><!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+				],
+			} );
+		} );
+
+		afterAll( async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [],
+			} );
+		} );
+
+		it( 'should return proper results when pattern does not exist', () => {
+			expect(
+				select( store ).__experimentalGetParsedPattern( 'not there' )
+			).toBeNull();
+		} );
+		it( 'should return existing pattern properly parsed', () => {
+			const { name, blocks } =
+				select( store ).__experimentalGetParsedPattern( 'pattern-a' );
+			expect( name ).toEqual( 'pattern-a' );
+			expect( blocks ).toHaveLength( 1 );
+			expect( blocks[ 0 ] ).toEqual(
+				expect.objectContaining( {
+					name: 'core/test-block-a',
+				} )
+			);
+		} );
+		it( 'should return hidden from UI pattern when requested', () => {
+			const { name, blocks, inserter } = select(
+				store
+			).__experimentalGetParsedPattern( 'pattern-hidden-from-ui' );
+			expect( name ).toEqual( 'pattern-hidden-from-ui' );
+			expect( inserter ).toBeFalsy();
+			expect( blocks ).toHaveLength( 2 );
+			expect( blocks[ 0 ] ).toEqual(
+				expect.objectContaining( {
+					name: 'core/test-block-a',
+				} )
+			);
+		} );
+	} );
+
+	describe( 'getPatternsByBlockTypes', () => {
+		beforeAll( async () => {
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block1',
+					name: 'core/test-block-a',
+					innerBlocks: [],
+				},
+			] );
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'pattern-a',
+						blockTypes: [ 'test/block-a' ],
+						title: 'pattern a',
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+					},
+					{
+						name: 'pattern-b',
+						blockTypes: [ 'test/block-b' ],
+						title: 'pattern b',
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+					{
+						title: 'pattern c',
+						blockTypes: [ 'test/block-a' ],
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+				],
+			} );
+			await dispatch( store ).updateBlockListSettings( 'block1', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+		} );
+
+		afterAll( async () => {
+			await dispatch( store ).resetBlocks( [] );
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [],
+			} );
+			await dispatch( store ).updateBlockListSettings( 'block1', {} );
+		} );
+
+		it( 'should return empty array if no block name is provided', () => {
+			expect( select( store ).getPatternsByBlockTypes() ).toEqual( [] );
+		} );
+		it( 'should return empty array if no match is found', () => {
+			const patterns = select( store ).getPatternsByBlockTypes(
+				'test/block-not-exists'
+			);
+			expect( patterns ).toEqual( [] );
+		} );
+		it( 'should return the same empty array in both empty array cases', () => {
+			const patterns1 = select( store ).getPatternsByBlockTypes();
+			const patterns2 = select( store ).getPatternsByBlockTypes(
+				'test/block-not-exists'
+			);
+			expect( patterns1 ).toBe( patterns2 );
+		} );
+		it( 'should return proper results when there are matched block patterns', () => {
+			const patterns =
+				select( store ).getPatternsByBlockTypes( 'test/block-a' );
+			expect( patterns ).toHaveLength( 2 );
+			expect( patterns ).toEqual(
+				expect.arrayContaining( [
+					expect.objectContaining( { title: 'pattern a' } ),
+					expect.objectContaining( { title: 'pattern c' } ),
+				] )
+			);
+		} );
+		it( 'should return proper result with matched patterns and allowed blocks from rootClientId', () => {
+			const patterns = select( store ).getPatternsByBlockTypes(
+				'test/block-a',
+				'block1'
+			);
+			expect( patterns ).toHaveLength( 1 );
+			expect( patterns[ 0 ] ).toEqual(
+				expect.objectContaining( { title: 'pattern c' } )
+			);
+		} );
+	} );
+
+	describe( '__experimentalGetPatternTransformItems', () => {
+		beforeAll( async () => {
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block1',
+					name: 'core/test-block-a',
+					innerBlocks: [],
+				},
+				{
+					clientId: 'block2',
+					name: 'core/test-block-b',
+					innerBlocks: [],
+				},
+			] );
+			await dispatch( store ).setHasControlledInnerBlocks(
+				'block2-clientId',
+				true
+			);
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'pattern-a',
+						blockTypes: [ 'test/block-a' ],
+						title: 'pattern a',
+						content:
+							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
+					},
+					{
+						name: 'pattern-b',
+						blockTypes: [ 'test/block-b' ],
+						title: 'pattern b',
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+					{
+						name: 'pattern-c',
+						title: 'pattern c',
+						blockTypes: [ 'test/block-a' ],
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+					{
+						name: 'pattern-mix',
+						title: 'pattern mix',
+						blockTypes: [
+							'core/test-block-a',
+							'core/test-block-b',
+						],
+						content:
+							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
+					},
+				],
+			} );
+		} );
+
+		afterAll( async () => {
+			await dispatch( store ).resetBlocks( [] );
+			await dispatch( store ).updateSettings( {
+				__experimentalBlockPatterns: [],
+			} );
+			await dispatch( store ).updateBlockListSettings( 'block1', {} );
+		} );
+
+		describe( 'should return empty array', () => {
+			it( 'when no blocks are selected', () => {
+				expect(
+					select( store ).__experimentalGetPatternTransformItems()
+				).toEqual( [] );
+			} );
+			it( 'when a selected block has inner blocks', () => {
+				const blocks = [
+					{ name: 'core/test-block-a', innerBlocks: [] },
+					{
+						name: 'core/test-block-b',
+						innerBlocks: [ { name: 'some inner block' } ],
+					},
+				];
+				expect(
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					)
+				).toEqual( [] );
+			} );
+			it( 'when a selected block has controlled inner blocks', () => {
+				const blocks = [
+					{ name: 'core/test-block-a', innerBlocks: [] },
+					{
+						name: 'core/test-block-b',
+						clientId: 'block2-clientId',
+						innerBlocks: [],
+					},
+				];
+				expect(
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					)
+				).toEqual( [] );
+			} );
+			it( 'when no patterns are available based on the selected blocks', () => {
+				const blocks = [
+					{ name: 'block-with-no-patterns', innerBlocks: [] },
+				];
+				expect(
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					)
+				).toEqual( [] );
+			} );
+		} );
+		describe( 'should return proper results', () => {
+			it( 'when a single block is selected', () => {
+				const blocks = [
+					{ name: 'core/test-block-b', innerBlocks: [] },
+				];
+				const patterns =
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					);
+				expect( patterns ).toHaveLength( 1 );
+				expect( patterns[ 0 ] ).toEqual(
+					expect.objectContaining( {
+						name: 'pattern-mix',
+					} )
+				);
+			} );
+			it( 'when different multiple blocks are selected', () => {
+				const blocks = [
+					{ name: 'core/test-block-b', innerBlocks: [] },
+					{ name: 'test/block-b', innerBlocks: [] },
+					{ name: 'some other block', innerBlocks: [] },
+				];
+				const patterns =
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					);
+				expect( patterns ).toHaveLength( 2 );
+				expect( patterns ).toEqual(
+					expect.arrayContaining( [
+						expect.objectContaining( {
+							name: 'pattern-mix',
+						} ),
+						expect.objectContaining( {
+							name: 'pattern-b',
+						} ),
+					] )
+				);
+			} );
+			it( 'when multiple blocks are selected containing multiple times the same block', () => {
+				const blocks = [
+					{ name: 'core/test-block-b', innerBlocks: [] },
+					{ name: 'some other block', innerBlocks: [] },
+					{ name: 'core/test-block-a', innerBlocks: [] },
+					{ name: 'core/test-block-b', innerBlocks: [] },
+				];
+				const patterns =
+					select( store ).__experimentalGetPatternTransformItems(
+						blocks
+					);
+				expect( patterns ).toHaveLength( 1 );
+				expect( patterns[ 0 ] ).toEqual(
+					expect.objectContaining( {
+						name: 'pattern-mix',
+					} )
+				);
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 95038fe2f58b8e..7692bd6bf2cbb6 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -7,11 +7,15 @@ import {
 	setFreeformContentHandlerName,
 } from '@wordpress/blocks';
 import { RawHTML } from '@wordpress/element';
+import { symbol } from '@wordpress/icons';
+import { select, dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import * as selectors from '../selectors';
+import { store } from '../';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -44,7 +48,6 @@ const {
 	isBlockMultiSelected,
 	isFirstMultiSelectedBlock,
 	getBlockMode,
-	__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 	isTyping,
 	isDraggingBlocks,
 	getDraggedBlockClientIds,
@@ -55,7 +58,6 @@ const {
 	isSelectionEnabled,
 	canInsertBlockType,
 	canInsertBlocks,
-	getInserterItems,
 	getBlockTransformItems,
 	isValidTemplate,
 	getTemplate,
@@ -65,14 +67,11 @@ const {
 	__experimentalGetLastBlockAttributeChanges,
 	getLowestCommonAncestorWithSelectedBlock,
 	__experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames,
-	__experimentalGetAllowedPatterns,
-	__experimentalGetParsedPattern,
-	__experimentalGetPatternsByBlockTypes,
 	__unstableGetClientIdWithClientIdsTree,
 	__unstableGetClientIdsTree,
-	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
-	__experimentalGetGlobalBlocksByName,
+	getBlocksByName,
+	getBlockEditingMode,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -122,7 +121,7 @@ describe( 'selectors', () => {
 			parent: [ 'core/test-block-b' ],
 		} );
 
-		registerBlockType( 'core/test-freeform', {
+		registerBlockType( 'core/freeform', {
 			save: ( props ) => <RawHTML>{ props.attributes.content }</RawHTML>,
 			category: 'text',
 			title: 'Test Freeform Content Handler',
@@ -178,7 +177,7 @@ describe( 'selectors', () => {
 			ancestor: [ 'core/test-block-ancestor' ],
 		} );
 
-		setFreeformContentHandlerName( 'core/test-freeform' );
+		setFreeformContentHandlerName( 'core/freeform' );
 
 		cachedSelectors.forEach( ( { clear } ) => clear() );
 	} );
@@ -188,7 +187,7 @@ describe( 'selectors', () => {
 		unregisterBlockType( 'core/test-block-a' );
 		unregisterBlockType( 'core/test-block-b' );
 		unregisterBlockType( 'core/test-block-c' );
-		unregisterBlockType( 'core/test-freeform' );
+		unregisterBlockType( 'core/freeform' );
 		unregisterBlockType( 'core/post-content-child' );
 		unregisterBlockType( 'core/test-block-ancestor' );
 		unregisterBlockType( 'core/test-block-parent' );
@@ -202,10 +201,10 @@ describe( 'selectors', () => {
 		it( 'returns null if no block by clientId', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
+					byClientId: new Map(),
 					attributes: {},
-					order: {},
-					parents: {},
+					order: new Map(),
+					parents: new Map(),
 				},
 			};
 
@@ -220,22 +219,31 @@ describe( 'selectors', () => {
 		it( 'returns block name', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
-							clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
-							name: 'core/paragraph',
-						},
-					},
-					attributes: {
-						'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {},
-					},
-					order: {
-						'': [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
-						'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': [],
-					},
-					parents: {
-						'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': '',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {
+								clientId:
+									'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1',
+								name: 'core/paragraph',
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': '',
+						} )
+					),
 				},
 			};
 
@@ -252,54 +260,68 @@ describe( 'selectors', () => {
 		it( 'should return the block', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						123: {},
-					},
-					order: {
-						'': [ 123 ],
-						123: [],
-					},
-					parents: {
-						123: '',
-					},
-					tree: {
-						123: {
-							clientId: 123,
-							name: 'core/paragraph',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '123' ],
+							123: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							123: {
+								clientId: '123',
+								name: 'core/paragraph',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 					controlledInnerBlocks: {},
 				},
 			};
 
-			expect( getBlock( state, 123 ) ).toBe( state.blocks.tree[ 123 ] );
+			expect( getBlock( state, '123' ) ).toBe(
+				state.blocks.tree.get( '123' )
+			);
 		} );
 
 		it( 'should return null if the block is not present in state', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
-					tree: {
-						123: {
-							clientId: 123,
-							name: 'core/paragraph',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
+					tree: new Map(
+						Object.entries( {
+							123: {
+								clientId: '123',
+								name: 'core/paragraph',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 					controlledInnerBlocks: {},
 				},
 			};
 
-			expect( getBlock( state, 123 ) ).toBe( null );
+			expect( getBlock( state, '123' ) ).toBe( null );
 		} );
 	} );
 
@@ -307,47 +329,57 @@ describe( 'selectors', () => {
 		it( 'should return the ordered blocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						23: {},
-						123: {},
-					},
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						123: '',
-						23: '',
-					},
-					tree: {
-						'': {
-							innerBlocks: [
-								{
-									clientId: 123,
-									name: 'core/paragraph',
-									attributes: {},
-									innerBlocks: [],
-								},
-								{
-									clientId: 23,
-									name: 'core/heading',
-									attributes: {},
-									innerBlocks: [],
-								},
-							],
-						},
-						123: {},
-						23: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: { clientId: '23', name: 'core/heading' },
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							23: {},
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							23: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							'': {
+								innerBlocks: [
+									{
+										clientId: '123',
+										name: 'core/paragraph',
+										attributes: {},
+										innerBlocks: [],
+									},
+									{
+										clientId: '23',
+										name: 'core/heading',
+										attributes: {},
+										innerBlocks: [],
+									},
+								],
+							},
+							123: {},
+							23: {},
+						} )
+					),
 					controlledInnerBlocks: {},
 				},
 			};
 
 			expect( getBlocks( state ) ).toBe(
-				state.blocks.tree[ '' ].innerBlocks
+				state.blocks.tree.get( '' ).innerBlocks
 			);
 		} );
 	} );
@@ -356,30 +388,34 @@ describe( 'selectors', () => {
 		it( 'should return parent blocks', () => {
 			const state = {
 				blocks: {
-					parents: {
-						'client-id-01': '',
-						'client-id-02': 'client-id-01',
-						'client-id-03': 'client-id-02',
-						'client-id-04': 'client-id-03',
-					},
-					byClientId: {
-						'client-id-01': {
-							clientId: 'client-id-01',
-							name: 'core/columns',
-						},
-						'client-id-02': {
-							clientId: 'client-id-02',
-							name: 'core/navigation',
-						},
-						'client-id-03': {
-							clientId: 'client-id-03',
-							name: 'core/navigation-link',
-						},
-						'client-id-04': {
-							clientId: 'client-id-04',
-							name: 'core/paragraph',
-						},
-					},
+					parents: new Map(
+						Object.entries( {
+							'client-id-01': '',
+							'client-id-02': 'client-id-01',
+							'client-id-03': 'client-id-02',
+							'client-id-04': 'client-id-03',
+						} )
+					),
+					byClientId: new Map(
+						Object.entries( {
+							'client-id-01': {
+								clientId: 'client-id-01',
+								name: 'core/columns',
+							},
+							'client-id-02': {
+								clientId: 'client-id-02',
+								name: 'core/navigation',
+							},
+							'client-id-03': {
+								clientId: 'client-id-03',
+								name: 'core/navigation-link',
+							},
+							'client-id-04': {
+								clientId: 'client-id-04',
+								name: 'core/paragraph',
+							},
+						} )
+					),
 					cache: {
 						'client-id-01': {},
 						'client-id-02': {},
@@ -403,35 +439,39 @@ describe( 'selectors', () => {
 	describe( 'getBlockParentsByBlockName', () => {
 		const state = {
 			blocks: {
-				parents: {
-					'client-id-01': '',
-					'client-id-02': 'client-id-01',
-					'client-id-03': 'client-id-02',
-					'client-id-04': 'client-id-03',
-					'client-id-05': 'client-id-04',
-				},
-				byClientId: {
-					'client-id-01': {
-						clientId: 'client-id-01',
-						name: 'core/navigation',
-					},
-					'client-id-02': {
-						clientId: 'client-id-02',
-						name: 'core/columns',
-					},
-					'client-id-03': {
-						clientId: 'client-id-03',
-						name: 'core/navigation',
-					},
-					'client-id-04': {
-						clientId: 'client-id-04',
-						name: 'core/navigation-link',
-					},
-					'client-id-05': {
-						clientId: 'client-id-05',
-						name: 'core/navigation-link',
-					},
-				},
+				parents: new Map(
+					Object.entries( {
+						'client-id-01': '',
+						'client-id-02': 'client-id-01',
+						'client-id-03': 'client-id-02',
+						'client-id-04': 'client-id-03',
+						'client-id-05': 'client-id-04',
+					} )
+				),
+				byClientId: new Map(
+					Object.entries( {
+						'client-id-01': {
+							clientId: 'client-id-01',
+							name: 'core/navigation',
+						},
+						'client-id-02': {
+							clientId: 'client-id-02',
+							name: 'core/columns',
+						},
+						'client-id-03': {
+							clientId: 'client-id-03',
+							name: 'core/navigation',
+						},
+						'client-id-04': {
+							clientId: 'client-id-04',
+							name: 'core/navigation-link',
+						},
+						'client-id-05': {
+							clientId: 'client-id-05',
+							name: 'core/navigation-link',
+						},
+					} )
+				),
 				cache: {
 					'client-id-01': {},
 					'client-id-02': {},
@@ -484,11 +524,14 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getClientIdsOfDescendants', () => {
-		it( 'should return the ids of any descendants in sequential order, given an array of clientIds', () => {
-			const state = {
-				blocks: {
-					byClientId: {
-						'uuid-2': { clientId: 'uuid-2', name: 'core/image' },
+		const state = {
+			blocks: {
+				byClientId: new Map(
+					Object.entries( {
+						'uuid-2': {
+							clientId: 'uuid-2',
+							name: 'core/image',
+						},
 						'uuid-4': {
 							clientId: 'uuid-4',
 							name: 'core/paragraph',
@@ -497,32 +540,58 @@ describe( 'selectors', () => {
 							clientId: 'uuid-6',
 							name: 'core/paragraph',
 						},
-						'uuid-8': { clientId: 'uuid-8', name: 'core/block' },
+						'uuid-8': {
+							clientId: 'uuid-8',
+							name: 'core/block',
+						},
 						'uuid-10': {
 							clientId: 'uuid-10',
 							name: 'core/columns',
 						},
-						'uuid-12': { clientId: 'uuid-12', name: 'core/column' },
-						'uuid-14': { clientId: 'uuid-14', name: 'core/column' },
-						'uuid-16': { clientId: 'uuid-16', name: 'core/quote' },
-						'uuid-18': { clientId: 'uuid-18', name: 'core/block' },
+						'uuid-12': {
+							clientId: 'uuid-12',
+							name: 'core/column',
+						},
+						'uuid-14': {
+							clientId: 'uuid-14',
+							name: 'core/column',
+						},
+						'uuid-16': {
+							clientId: 'uuid-16',
+							name: 'core/quote',
+						},
+						'uuid-18': {
+							clientId: 'uuid-18',
+							name: 'core/block',
+						},
 						'uuid-20': {
 							clientId: 'uuid-20',
 							name: 'core/gallery',
 						},
-						'uuid-22': { clientId: 'uuid-22', name: 'core/block' },
+						'uuid-22': {
+							clientId: 'uuid-22',
+							name: 'core/block',
+						},
 						'uuid-24': {
 							clientId: 'uuid-24',
 							name: 'core/columns',
 						},
-						'uuid-26': { clientId: 'uuid-26', name: 'core/column' },
-						'uuid-28': { clientId: 'uuid-28', name: 'core/column' },
+						'uuid-26': {
+							clientId: 'uuid-26',
+							name: 'core/column',
+						},
+						'uuid-28': {
+							clientId: 'uuid-28',
+							name: 'core/column',
+						},
 						'uuid-30': {
 							clientId: 'uuid-30',
 							name: 'core/paragraph',
 						},
-					},
-					attributes: {
+					} )
+				),
+				attributes: new Map(
+					Object.entries( {
 						'uuid-2': {},
 						'uuid-4': {},
 						'uuid-6': {},
@@ -538,8 +607,10 @@ describe( 'selectors', () => {
 						'uuid-26': {},
 						'uuid-28': {},
 						'uuid-30': {},
-					},
-					order: {
+					} )
+				),
+				order: new Map(
+					Object.entries( {
 						'': [ 'uuid-6', 'uuid-8', 'uuid-10', 'uuid-22' ],
 						'uuid-2': [],
 						'uuid-4': [],
@@ -555,8 +626,10 @@ describe( 'selectors', () => {
 						'uuid-24': [ 'uuid-26', 'uuid-28' ],
 						'uuid-26': [],
 						'uuid-28': [ 'uuid-30' ],
-					},
-					parents: {
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
 						'uuid-6': '',
 						'uuid-8': '',
 						'uuid-10': '',
@@ -569,10 +642,13 @@ describe( 'selectors', () => {
 						'uuid-26': 'uuid-24',
 						'uuid-28': 'uuid-24',
 						'uuid-30': 'uuid-28',
-					},
-					controlledInnerBlocks: {},
-				},
-			};
+					} )
+				),
+				controlledInnerBlocks: {},
+			},
+		};
+
+		it( 'should return the ids of any descendants in sequential order, given an array of clientIds', () => {
 			expect( getClientIdsOfDescendants( state, [ 'uuid-10' ] ) ).toEqual(
 				[
 					'uuid-12',
@@ -586,95 +662,136 @@ describe( 'selectors', () => {
 				]
 			);
 		} );
+
+		it( 'should return same value when called with same state and argument', () => {
+			expect( getClientIdsOfDescendants( state, 'uuid-10' ) ).toBe(
+				getClientIdsOfDescendants( state, 'uuid-10' )
+			);
+		} );
 	} );
 
 	describe( 'getClientIdsWithDescendants', () => {
 		it( 'should return the ids for top-level blocks and their descendants of any depth (for nested blocks) in sequential order.', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						'uuid-2': { clientId: 'uuid-2', name: 'core/image' },
-						'uuid-4': {
-							clientId: 'uuid-4',
-							name: 'core/paragraph',
-						},
-						'uuid-6': {
-							clientId: 'uuid-6',
-							name: 'core/paragraph',
-						},
-						'uuid-8': { clientId: 'uuid-8', name: 'core/block' },
-						'uuid-10': {
-							clientId: 'uuid-10',
-							name: 'core/columns',
-						},
-						'uuid-12': { clientId: 'uuid-12', name: 'core/column' },
-						'uuid-14': { clientId: 'uuid-14', name: 'core/column' },
-						'uuid-16': { clientId: 'uuid-16', name: 'core/quote' },
-						'uuid-18': { clientId: 'uuid-18', name: 'core/block' },
-						'uuid-20': {
-							clientId: 'uuid-20',
-							name: 'core/gallery',
-						},
-						'uuid-22': { clientId: 'uuid-22', name: 'core/block' },
-						'uuid-24': {
-							clientId: 'uuid-24',
-							name: 'core/columns',
-						},
-						'uuid-26': { clientId: 'uuid-26', name: 'core/column' },
-						'uuid-28': { clientId: 'uuid-28', name: 'core/column' },
-						'uuid-30': {
-							clientId: 'uuid-30',
-							name: 'core/paragraph',
-						},
-					},
-					attributes: {
-						'uuid-2': {},
-						'uuid-4': {},
-						'uuid-6': {},
-						'uuid-8': {},
-						'uuid-10': {},
-						'uuid-12': {},
-						'uuid-14': {},
-						'uuid-16': {},
-						'uuid-18': {},
-						'uuid-20': {},
-						'uuid-22': {},
-						'uuid-24': {},
-						'uuid-26': {},
-						'uuid-28': {},
-						'uuid-30': {},
-					},
-					order: {
-						'': [ 'uuid-6', 'uuid-8', 'uuid-10', 'uuid-22' ],
-						'uuid-2': [],
-						'uuid-4': [],
-						'uuid-6': [],
-						'uuid-8': [],
-						'uuid-10': [ 'uuid-12', 'uuid-14' ],
-						'uuid-12': [ 'uuid-16' ],
-						'uuid-14': [ 'uuid-18' ],
-						'uuid-16': [],
-						'uuid-18': [ 'uuid-24' ],
-						'uuid-20': [],
-						'uuid-22': [],
-						'uuid-24': [ 'uuid-26', 'uuid-28' ],
-						'uuid-26': [],
-						'uuid-28': [ 'uuid-30' ],
-					},
-					parents: {
-						'uuid-6': '',
-						'uuid-8': '',
-						'uuid-10': '',
-						'uuid-22': '',
-						'uuid-12': 'uuid-10',
-						'uuid-14': 'uuid-10',
-						'uuid-16': 'uuid-12',
-						'uuid-18': 'uuid-14',
-						'uuid-24': 'uuid-18',
-						'uuid-26': 'uuid-24',
-						'uuid-28': 'uuid-24',
-						'uuid-30': 'uuid-28',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							'uuid-2': {
+								clientId: 'uuid-2',
+								name: 'core/image',
+							},
+							'uuid-4': {
+								clientId: 'uuid-4',
+								name: 'core/paragraph',
+							},
+							'uuid-6': {
+								clientId: 'uuid-6',
+								name: 'core/paragraph',
+							},
+							'uuid-8': {
+								clientId: 'uuid-8',
+								name: 'core/block',
+							},
+							'uuid-10': {
+								clientId: 'uuid-10',
+								name: 'core/columns',
+							},
+							'uuid-12': {
+								clientId: 'uuid-12',
+								name: 'core/column',
+							},
+							'uuid-14': {
+								clientId: 'uuid-14',
+								name: 'core/column',
+							},
+							'uuid-16': {
+								clientId: 'uuid-16',
+								name: 'core/quote',
+							},
+							'uuid-18': {
+								clientId: 'uuid-18',
+								name: 'core/block',
+							},
+							'uuid-20': {
+								clientId: 'uuid-20',
+								name: 'core/gallery',
+							},
+							'uuid-22': {
+								clientId: 'uuid-22',
+								name: 'core/block',
+							},
+							'uuid-24': {
+								clientId: 'uuid-24',
+								name: 'core/columns',
+							},
+							'uuid-26': {
+								clientId: 'uuid-26',
+								name: 'core/column',
+							},
+							'uuid-28': {
+								clientId: 'uuid-28',
+								name: 'core/column',
+							},
+							'uuid-30': {
+								clientId: 'uuid-30',
+								name: 'core/paragraph',
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							'uuid-2': {},
+							'uuid-4': {},
+							'uuid-6': {},
+							'uuid-8': {},
+							'uuid-10': {},
+							'uuid-12': {},
+							'uuid-14': {},
+							'uuid-16': {},
+							'uuid-18': {},
+							'uuid-20': {},
+							'uuid-22': {},
+							'uuid-24': {},
+							'uuid-26': {},
+							'uuid-28': {},
+							'uuid-30': {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'uuid-6', 'uuid-8', 'uuid-10', 'uuid-22' ],
+							'uuid-2': [],
+							'uuid-4': [],
+							'uuid-6': [],
+							'uuid-8': [],
+							'uuid-10': [ 'uuid-12', 'uuid-14' ],
+							'uuid-12': [ 'uuid-16' ],
+							'uuid-14': [ 'uuid-18' ],
+							'uuid-16': [],
+							'uuid-18': [ 'uuid-24' ],
+							'uuid-20': [],
+							'uuid-22': [],
+							'uuid-24': [ 'uuid-26', 'uuid-28' ],
+							'uuid-26': [],
+							'uuid-28': [ 'uuid-30' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							'uuid-6': '',
+							'uuid-8': '',
+							'uuid-10': '',
+							'uuid-22': '',
+							'uuid-12': 'uuid-10',
+							'uuid-14': 'uuid-10',
+							'uuid-16': 'uuid-12',
+							'uuid-18': 'uuid-14',
+							'uuid-24': 'uuid-18',
+							'uuid-26': 'uuid-24',
+							'uuid-28': 'uuid-24',
+							'uuid-30': 'uuid-28',
+						} )
+					),
 				},
 			};
 			expect( getClientIdsWithDescendants( state ) ).toEqual( [
@@ -698,17 +815,23 @@ describe( 'selectors', () => {
 		it( 'should return the number of top-level blocks in the post', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						23: {},
-						123: {},
-					},
-					order: {
-						'': [ 123, 23 ],
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: { clientId: '23', name: 'core/heading' },
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							23: {},
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
 				},
 			};
 
@@ -718,25 +841,33 @@ describe( 'selectors', () => {
 		it( 'should return the number of blocks in a nested context', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						123: { clientId: 123, name: 'core/columns' },
-						456: { clientId: 456, name: 'core/paragraph' },
-						789: { clientId: 789, name: 'core/paragraph' },
-					},
-					attributes: {
-						123: {},
-						456: {},
-						789: {},
-					},
-					order: {
-						'': [ 123 ],
-						123: [ 456, 789 ],
-					},
-					parents: {
-						123: '',
-						456: 123,
-						789: 123,
-					},
+					byClientId: new Map(
+						Object.entries( {
+							123: { clientId: '123', name: 'core/columns' },
+							456: { clientId: '456', name: 'core/paragraph' },
+							789: { clientId: '789', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							123: {},
+							456: {},
+							789: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '123' ],
+							123: [ '456', '789' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							456: '123',
+							789: '123',
+						} )
+					),
 				},
 			};
 
@@ -790,23 +921,31 @@ describe( 'selectors', () => {
 	describe( 'getGlobalBlockCount', () => {
 		const state = {
 			blocks: {
-				byClientId: {
-					123: { clientId: 123, name: 'core/heading' },
-					456: { clientId: 456, name: 'core/paragraph' },
-					789: { clientId: 789, name: 'core/paragraph' },
-				},
-				attributes: {
-					123: {},
-					456: {},
-					789: {},
-				},
-				order: {
-					'': [ 123, 456 ],
-				},
-				parents: {
-					123: '',
-					456: '',
-				},
+				byClientId: new Map(
+					Object.entries( {
+						123: { clientId: '123', name: 'core/heading' },
+						456: { clientId: '456', name: 'core/paragraph' },
+						789: { clientId: '789', name: 'core/paragraph' },
+					} )
+				),
+				attributes: new Map(
+					Object.entries( {
+						123: {},
+						456: {},
+						789: {},
+					} )
+				),
+				order: new Map(
+					Object.entries( {
+						'': [ '123', '456' ],
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						123: '',
+						456: '',
+					} )
+				),
 			},
 		};
 
@@ -821,10 +960,10 @@ describe( 'selectors', () => {
 		it( 'should return 0 if no blocks exist', () => {
 			const emptyState = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
 				},
 			};
 			expect( getGlobalBlockCount( emptyState ) ).toBe( 0 );
@@ -834,65 +973,67 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '__experimentalGetGlobalBlocksByName', () => {
+	describe( 'getBlocksByName', () => {
 		const state = {
 			blocks: {
-				byClientId: {
-					123: { clientId: 123, name: 'core/heading' },
-					456: { clientId: 456, name: 'core/paragraph' },
-					789: { clientId: 789, name: 'core/paragraph' },
-					1011: { clientId: 1011, name: 'core/group' },
-					1213: { clientId: 1213, name: 'core/paragraph' },
-					1415: { clientId: 1213, name: 'core/paragraph' },
-				},
-				attributes: {
-					123: {},
-					456: {},
-					789: {},
-					1011: {},
-					1213: {},
-					1415: {},
-				},
-				order: {
-					'': [ 123, 456, 1011 ],
-					1011: [ 1415, 1213 ],
-				},
-				parents: {
-					123: '',
-					456: '',
-					1011: '',
-					1213: 1011,
-					1415: 1011,
-				},
+				byClientId: new Map(
+					Object.entries( {
+						123: { clientId: '123', name: 'core/heading' },
+						456: { clientId: '456', name: 'core/paragraph' },
+						789: { clientId: '789', name: 'core/paragraph' },
+						1011: { clientId: '1011', name: 'core/group' },
+						1213: { clientId: '1213', name: 'core/paragraph' },
+						1415: { clientId: '1213', name: 'core/paragraph' },
+					} )
+				),
+				attributes: new Map(
+					Object.entries( {
+						123: {},
+						456: {},
+						789: {},
+						1011: {},
+						1213: {},
+						1415: {},
+					} )
+				),
+				order: new Map(
+					Object.entries( {
+						'': [ '123', '456', '1011' ],
+						1011: [ '1415', '1213' ],
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						123: '',
+						456: '',
+						1011: '',
+						1213: '1011',
+						1415: '1011',
+					} )
+				),
 			},
 		};
 
 		it( 'should return the clientIds of blocks of a given type', () => {
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'core/heading' )
-			).toStrictEqual( [ 123 ] );
+			expect( getBlocksByName( state, 'core/heading' ) ).toStrictEqual( [
+				'123',
+			] );
 		} );
 
 		it( 'should return the clientIds of blocks of a given type even if blocks are nested', () => {
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'core/paragraph' )
-			).toStrictEqual( [ 456, 1415, 1213 ] );
+			expect( getBlocksByName( state, 'core/paragraph' ) ).toStrictEqual(
+				[ '456', '1415', '1213' ]
+			);
 		} );
 
 		it( 'Should return empty array if no blocks match. The empty array should be the same reference', () => {
-			const result = __experimentalGetGlobalBlocksByName(
-				state,
-				'test/missing'
+			const result = getBlocksByName( state, 'test/missing' );
+			expect( getBlocksByName( state, 'test/missing' ) ).toStrictEqual(
+				[]
+			);
+			expect( getBlocksByName( state, 'test/missing2' ) === result ).toBe(
+				true
 			);
-			expect(
-				__experimentalGetGlobalBlocksByName( state, 'test/missing' )
-			).toStrictEqual( [] );
-			expect(
-				__experimentalGetGlobalBlocksByName(
-					state,
-					'test/missing2'
-				) === result
-			).toBe( true );
 		} );
 	} );
 
@@ -911,8 +1052,8 @@ describe( 'selectors', () => {
 		it( 'should return null if there is multi selection', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 23 },
-					selectionEnd: { clientId: 123 },
+					selectionStart: { clientId: '23' },
+					selectionEnd: { clientId: '123' },
 				},
 			};
 
@@ -922,19 +1063,21 @@ describe( 'selectors', () => {
 		it( 'should return the selected block ClientId', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: {
-							name: 'fake block',
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: {
+								name: 'fake block',
+							},
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 23 },
-					selectionEnd: { clientId: 23 },
+					selectionStart: { clientId: '23' },
+					selectionEnd: { clientId: '23' },
 				},
 			};
 
-			expect( getSelectedBlockClientId( state ) ).toEqual( 23 );
+			expect( getSelectedBlockClientId( state ) ).toEqual( '23' );
 		} );
 	} );
 
@@ -942,31 +1085,41 @@ describe( 'selectors', () => {
 		it( 'should return null if no block is selected', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						23: {},
-						123: {},
-					},
-					order: {
-						'': [ 23, 123 ],
-						23: [],
-						123: [],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
-					tree: {
-						23: {
-							clientId: 23,
-							name: 'core/heading',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: { clientId: '23', name: 'core/heading' },
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							23: {},
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '23', '123' ],
+							23: [],
+							123: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							23: {
+								clientId: '23',
+								name: 'core/heading',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 				},
 				selection: {
 					selectionStart: {},
@@ -980,35 +1133,45 @@ describe( 'selectors', () => {
 		it( 'should return null if there is multi selection', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						23: {},
-						123: {},
-					},
-					order: {
-						'': [ 23, 123 ],
-						23: [],
-						123: [],
-					},
-					parents: {
-						123: '',
-						23: '',
-					},
-					tree: {
-						23: {
-							clientId: 23,
-							name: 'core/heading',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: { clientId: '23', name: 'core/heading' },
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							23: {},
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '23', '123' ],
+							23: [],
+							123: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							23: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							23: {
+								clientId: '23',
+								name: 'core/heading',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 23 },
-					selectionEnd: { clientId: 123 },
+					selectionStart: { clientId: '23' },
+					selectionEnd: { clientId: '123' },
 				},
 			};
 
@@ -1018,41 +1181,51 @@ describe( 'selectors', () => {
 		it( 'should return the selected block', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						23: { clientId: 23, name: 'core/heading' },
-						123: { clientId: 123, name: 'core/paragraph' },
-					},
-					attributes: {
-						23: {},
-						123: {},
-					},
-					order: {
-						'': [ 23, 123 ],
-						23: [],
-						123: [],
-					},
-					parents: {
-						123: '',
-						23: '',
-					},
-					tree: {
-						23: {
-							clientId: 23,
-							name: 'core/heading',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							23: { clientId: '23', name: 'core/heading' },
+							123: { clientId: '123', name: 'core/paragraph' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							23: {},
+							123: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ '23', '123' ],
+							23: [],
+							123: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							23: '',
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							23: {
+								clientId: '23',
+								name: 'core/heading',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 					controlledInnerBlocks: {},
 				},
 				selection: {
-					selectionStart: { clientId: 23 },
-					selectionEnd: { clientId: 23 },
+					selectionStart: { clientId: '23' },
+					selectionEnd: { clientId: '23' },
 				},
 			};
 
 			expect( getSelectedBlock( state ) ).toEqual(
-				getBlock( state, 23 )
+				getBlock( state, '23' )
 			);
 		} );
 	} );
@@ -1061,8 +1234,8 @@ describe( 'selectors', () => {
 		it( 'should return null if the block does not exist', () => {
 			const state = {
 				blocks: {
-					order: {},
-					parents: {},
+					order: new Map(),
+					parents: new Map(),
 				},
 			};
 
@@ -1072,20 +1245,24 @@ describe( 'selectors', () => {
 		it( 'should return root ClientId relative the block ClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						123: '',
-						23: '',
-						456: 123,
-						56: 123,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							23: '',
+							456: '123',
+							56: '123',
+						} )
+					),
 				},
 			};
 
-			expect( getBlockRootClientId( state, 56 ) ).toBe( 123 );
+			expect( getBlockRootClientId( state, '56' ) ).toBe( '123' );
 		} );
 	} );
 
@@ -1093,8 +1270,8 @@ describe( 'selectors', () => {
 		it( 'should return the given block if the block has no parents', () => {
 			const state = {
 				blocks: {
-					order: {},
-					parents: {},
+					order: new Map(),
+					parents: new Map(),
 				},
 			};
 
@@ -1104,16 +1281,20 @@ describe( 'selectors', () => {
 		it( 'should return root ClientId relative the block ClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 'a', 'b' ],
-						a: [ 'c', 'd' ],
-					},
-					parents: {
-						a: '',
-						b: '',
-						c: 'a',
-						d: 'a',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ 'a', 'b' ],
+							a: [ 'c', 'd' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							a: '',
+							b: '',
+							c: 'a',
+							d: 'a',
+						} )
+					),
 				},
 			};
 
@@ -1123,18 +1304,22 @@ describe( 'selectors', () => {
 		it( 'should return the top level root ClientId relative the block ClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 'a', 'b' ],
-						a: [ 'c', 'd' ],
-						d: [ 'e' ],
-					},
-					parents: {
-						a: '',
-						b: '',
-						c: 'a',
-						d: 'a',
-						e: 'd',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ 'a', 'b' ],
+							a: [ 'c', 'd' ],
+							d: [ 'e' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							a: '',
+							b: '',
+							c: 'a',
+							d: 'a',
+							e: 'd',
+						} )
+					),
 				},
 			};
 
@@ -1146,13 +1331,17 @@ describe( 'selectors', () => {
 		it( 'should return empty if there is no selection', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						123: '',
-						23: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							123: '',
+							23: '',
+						} )
+					),
 				},
 				selection: {
 					selectionStart: {},
@@ -1166,75 +1355,95 @@ describe( 'selectors', () => {
 		it( 'should return the selected block clientId if there is a selection', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 2 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '2' },
 				},
 			};
 
-			expect( getSelectedBlockClientIds( state ) ).toEqual( [ 2 ] );
+			expect( getSelectedBlockClientIds( state ) ).toEqual( [ '2' ] );
 		} );
 
 		it( 'should return selected block clientIds if there is multi selection', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
 
-			expect( getSelectedBlockClientIds( state ) ).toEqual( [ 4, 3, 2 ] );
+			expect( getSelectedBlockClientIds( state ) ).toEqual( [
+				'4',
+				'3',
+				'2',
+			] );
 		} );
 
 		it( 'should return selected block clientIds if there is multi selection (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-						4: [ 9, 8, 7, 6 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-						6: 4,
-						7: 4,
-						8: 4,
-						9: 4,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+							4: [ '9', '8', '7', '6' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+							6: '4',
+							7: '4',
+							8: '4',
+							9: '4',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 7 },
-					selectionEnd: { clientId: 9 },
+					selectionStart: { clientId: '7' },
+					selectionEnd: { clientId: '9' },
 				},
 			};
 
-			expect( getSelectedBlockClientIds( state ) ).toEqual( [ 9, 8, 7 ] );
+			expect( getSelectedBlockClientIds( state ) ).toEqual( [
+				'9',
+				'8',
+				'7',
+			] );
 		} );
 	} );
 
@@ -1242,13 +1451,17 @@ describe( 'selectors', () => {
 		it( 'should return empty if there is no multi selection', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 				selection: {
 					selectionStart: {},
@@ -1262,55 +1475,67 @@ describe( 'selectors', () => {
 		it( 'should return selected block clientIds if there is multi selection', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
 
 			expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [
-				4, 3, 2,
+				'4',
+				'3',
+				'2',
 			] );
 		} );
 
 		it( 'should return selected block clientIds if there is multi selection (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-						4: [ 9, 8, 7, 6 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-						6: 4,
-						7: 4,
-						8: 4,
-						9: 4,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+							4: [ '9', '8', '7', '6' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+							6: '4',
+							7: '4',
+							8: '4',
+							9: '4',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 7 },
-					selectionEnd: { clientId: 9 },
+					selectionStart: { clientId: '7' },
+					selectionEnd: { clientId: '9' },
 				},
 			};
 
 			expect( getMultiSelectedBlockClientIds( state ) ).toEqual( [
-				9, 8, 7,
+				'9',
+				'8',
+				'7',
 			] );
 		} );
 	} );
@@ -1319,10 +1544,10 @@ describe( 'selectors', () => {
 		it( 'should return the same reference on subsequent invocations of empty selection', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
 				},
 				selection: {
 					selectionStart: {},
@@ -1351,12 +1576,12 @@ describe( 'selectors', () => {
 		it( 'returns multi selection start', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
 
-			expect( getMultiSelectedBlocksStartClientId( state ) ).toBe( 2 );
+			expect( getMultiSelectedBlocksStartClientId( state ) ).toBe( '2' );
 		} );
 	} );
 
@@ -1375,12 +1600,12 @@ describe( 'selectors', () => {
 		it( 'returns multi selection end', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
 
-			expect( getMultiSelectedBlocksEndClientId( state ) ).toBe( 4 );
+			expect( getMultiSelectedBlocksEndClientId( state ) ).toBe( '4' );
 		} );
 	} );
 
@@ -1388,35 +1613,43 @@ describe( 'selectors', () => {
 		it( 'should return the ordered block ClientIds of top-level blocks by default', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getBlockOrder( state ) ).toEqual( [ 123, 23 ] );
+			expect( getBlockOrder( state ) ).toEqual( [ '123', '23' ] );
 		} );
 
 		it( 'should return the ordered block ClientIds at a specified rootClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						456: 123,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							456: '123',
+						} )
+					),
 				},
 			};
 
-			expect( getBlockOrder( state, '123' ) ).toEqual( [ 456 ] );
+			expect( getBlockOrder( state, '123' ) ).toEqual( [ '456' ] );
 		} );
 	} );
 
@@ -1424,36 +1657,44 @@ describe( 'selectors', () => {
 		it( 'should return the block order', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getBlockIndex( state, 23 ) ).toBe( 1 );
+			expect( getBlockIndex( state, '23' ) ).toBe( 1 );
 		} );
 
 		it( 'should return the block order (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						56: 123,
-						456: 123,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							56: '123',
+							456: '123',
+						} )
+					),
 				},
 			};
 
-			expect( getBlockIndex( state, 56 ) ).toBe( 1 );
+			expect( getBlockIndex( state, '56' ) ).toBe( 1 );
 		} );
 	} );
 
@@ -1461,73 +1702,91 @@ describe( 'selectors', () => {
 		it( 'should return the previous block', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getPreviousBlockClientId( state, 23 ) ).toEqual( 123 );
+			expect( getPreviousBlockClientId( state, '23' ) ).toEqual( '123' );
 		} );
 
 		it( 'should return the previous block (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						456: 123,
-						56: 123,
-					},
-				},
-			};
-
-			expect( getPreviousBlockClientId( state, 56, '123' ) ).toEqual(
-				456
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							456: '123',
+							56: '123',
+						} )
+					),
+				},
+			};
+
+			expect( getPreviousBlockClientId( state, '56', '123' ) ).toEqual(
+				'456'
 			);
 		} );
 
 		it( 'should return null for the first block', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getPreviousBlockClientId( state, 123 ) ).toBeNull();
+			expect( getPreviousBlockClientId( state, '123' ) ).toBeNull();
 		} );
 
 		it( 'should return null for the first block (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						456: 123,
-						56: 123,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							456: '123',
+							56: '123',
+						} )
+					),
 				},
 			};
 
-			expect( getPreviousBlockClientId( state, 456, '123' ) ).toBeNull();
+			expect(
+				getPreviousBlockClientId( state, '456', '123' )
+			).toBeNull();
 		} );
 	} );
 
@@ -1535,71 +1794,89 @@ describe( 'selectors', () => {
 		it( 'should return the following block', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getNextBlockClientId( state, 123 ) ).toEqual( 23 );
+			expect( getNextBlockClientId( state, '123' ) ).toEqual( '23' );
 		} );
 
 		it( 'should return the following block (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						456: 123,
-						56: 123,
-					},
-				},
-			};
-
-			expect( getNextBlockClientId( state, 456, '123' ) ).toEqual( 56 );
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							456: '123',
+							56: '123',
+						} )
+					),
+				},
+			};
+
+			expect( getNextBlockClientId( state, '456', '123' ) ).toEqual(
+				'56'
+			);
 		} );
 
 		it( 'should return null for the last block', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+						} )
+					),
 				},
 			};
 
-			expect( getNextBlockClientId( state, 23 ) ).toBeNull();
+			expect( getNextBlockClientId( state, '23' ) ).toBeNull();
 		} );
 
 		it( 'should return null for the last block (nested context)', () => {
 			const state = {
 				blocks: {
-					order: {
-						'': [ 123, 23 ],
-						123: [ 456, 56 ],
-					},
-					parents: {
-						23: '',
-						123: '',
-						456: 123,
-						56: 123,
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '123', '23' ],
+							123: [ '456', '56' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							23: '',
+							123: '',
+							456: '123',
+							56: '123',
+						} )
+					),
 				},
 			};
 
-			expect( getNextBlockClientId( state, 56, '123' ) ).toBeNull();
+			expect( getNextBlockClientId( state, '56', '123' ) ).toBeNull();
 		} );
 	} );
 
@@ -1607,23 +1884,23 @@ describe( 'selectors', () => {
 		it( 'should return true if the block is selected', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 123 },
-					selectionEnd: { clientId: 123 },
+					selectionStart: { clientId: '123' },
+					selectionEnd: { clientId: '123' },
 				},
 			};
 
-			expect( isBlockSelected( state, 123 ) ).toBe( true );
+			expect( isBlockSelected( state, '123' ) ).toBe( true );
 		} );
 
 		it( 'should return false if a multi-selection range exists', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 123 },
-					selectionEnd: { clientId: 124 },
+					selectionStart: { clientId: '123' },
+					selectionEnd: { clientId: '124' },
 				},
 			};
 
-			expect( isBlockSelected( state, 123 ) ).toBe( false );
+			expect( isBlockSelected( state, '123' ) ).toBe( false );
 		} );
 
 		it( 'should return false if the block is not selected', () => {
@@ -1634,7 +1911,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( isBlockSelected( state, 23 ) ).toBe( false );
+			expect( isBlockSelected( state, '23' ) ).toBe( false );
 		} );
 	} );
 
@@ -1642,87 +1919,103 @@ describe( 'selectors', () => {
 		it( 'should return false if the selected block is a child of the given ClientId', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 5 },
-					selectionEnd: { clientId: 5 },
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '5' },
 				},
 				blocks: {
-					order: {
-						4: [ 3, 2, 1 ],
-					},
-					parents: {
-						1: 4,
-						2: 4,
-						3: 4,
-					},
+					order: new Map(
+						Object.entries( {
+							4: [ '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '4',
+							2: '4',
+							3: '4',
+						} )
+					),
 				},
 			};
 
-			expect( hasSelectedInnerBlock( state, 4 ) ).toBe( false );
+			expect( hasSelectedInnerBlock( state, '4' ) ).toBe( false );
 		} );
 
 		it( 'should return true if the selected block is a child of the given ClientId', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 3 },
-					selectionEnd: { clientId: 3 },
+					selectionStart: { clientId: '3' },
+					selectionEnd: { clientId: '3' },
 				},
 				blocks: {
-					order: {
-						4: [ 3, 2, 1 ],
-					},
-					parents: {
-						1: 4,
-						2: 4,
-						3: 4,
-					},
+					order: new Map(
+						Object.entries( {
+							4: [ '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '4',
+							2: '4',
+							3: '4',
+						} )
+					),
 				},
 			};
 
-			expect( hasSelectedInnerBlock( state, 4 ) ).toBe( true );
+			expect( hasSelectedInnerBlock( state, '4' ) ).toBe( true );
 		} );
 
 		it( 'should return true if a multi selection exists that contains children of the block with the given ClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						6: [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: 6,
-						2: 6,
-						3: 6,
-						4: 6,
-						5: 6,
-					},
+					order: new Map(
+						Object.entries( {
+							6: [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '6',
+							2: '6',
+							3: '6',
+							4: '6',
+							5: '6',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 2 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '2' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
-			expect( hasSelectedInnerBlock( state, 6 ) ).toBe( true );
+			expect( hasSelectedInnerBlock( state, '6' ) ).toBe( true );
 		} );
 
 		it( 'should return false if a multi selection exists bot does not contains children of the block with the given ClientId', () => {
 			const state = {
 				blocks: {
-					order: {
-						3: [ 2, 1 ],
-						6: [ 5, 4 ],
-					},
-					parents: {
-						1: 3,
-						2: 3,
-						4: 6,
-						5: 6,
-					},
+					order: new Map(
+						Object.entries( {
+							3: [ '2', '1' ],
+							6: [ '5', '4' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '3',
+							2: '3',
+							4: '6',
+							5: '6',
+						} )
+					),
 				},
 				selection: {
-					selectionStart: { clientId: 5 },
-					selectionEnd: { clientId: 4 },
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '4' },
 				},
 			};
-			expect( hasSelectedInnerBlock( state, 3 ) ).toBe( false );
+			expect( hasSelectedInnerBlock( state, '3' ) ).toBe( false );
 		} );
 	} );
 
@@ -1730,70 +2023,82 @@ describe( 'selectors', () => {
 		it( 'should return true if the block is selected but not the last', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 5 },
-					selectionEnd: { clientId: 3 },
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '3' },
 				},
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 			};
 
-			expect( isBlockWithinSelection( state, 4 ) ).toBe( true );
+			expect( isBlockWithinSelection( state, '4' ) ).toBe( true );
 		} );
 
 		it( 'should return false if the block is the last selected', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 5 },
-					selectionEnd: { clientId: 3 },
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '3' },
 				},
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 			};
 
-			expect( isBlockWithinSelection( state, 3 ) ).toBe( false );
+			expect( isBlockWithinSelection( state, '3' ) ).toBe( false );
 		} );
 
 		it( 'should return false if the block is not selected', () => {
 			const state = {
 				selection: {
-					selectionStart: { clientId: 5 },
-					selectionEnd: { clientId: 3 },
+					selectionStart: { clientId: '5' },
+					selectionEnd: { clientId: '3' },
 				},
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 			};
 
-			expect( isBlockWithinSelection( state, 2 ) ).toBe( false );
+			expect( isBlockWithinSelection( state, '2' ) ).toBe( false );
 		} );
 
 		it( 'should return false if there is no selection', () => {
@@ -1803,20 +2108,24 @@ describe( 'selectors', () => {
 					selectionEnd: {},
 				},
 				blocks: {
-					order: {
-						'': [ 5, 4, 3, 2, 1 ],
-					},
-					parents: {
-						1: '',
-						2: '',
-						3: '',
-						4: '',
-						5: '',
-					},
+					order: new Map(
+						Object.entries( {
+							'': [ '5', '4', '3', '2', '1' ],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							1: '',
+							2: '',
+							3: '',
+							4: '',
+							5: '',
+						} )
+					),
 				},
 			};
 
-			expect( isBlockWithinSelection( state, 4 ) ).toBe( false );
+			expect( isBlockWithinSelection( state, '4' ) ).toBe( false );
 		} );
 	} );
 
@@ -1866,58 +2175,66 @@ describe( 'selectors', () => {
 	describe( 'isBlockMultiSelected', () => {
 		const state = {
 			blocks: {
-				order: {
-					'': [ 5, 4, 3, 2, 1 ],
-				},
-				parents: {
-					1: '',
-					2: '',
-					3: '',
-					4: '',
-					5: '',
-				},
+				order: new Map(
+					Object.entries( {
+						'': [ '5', '4', '3', '2', '1' ],
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						1: '',
+						2: '',
+						3: '',
+						4: '',
+						5: '',
+					} )
+				),
 			},
 			selection: {
-				selectionStart: { clientId: 2 },
-				selectionEnd: { clientId: 4 },
+				selectionStart: { clientId: '2' },
+				selectionEnd: { clientId: '4' },
 			},
 		};
 
 		it( 'should return true if the block is multi selected', () => {
-			expect( isBlockMultiSelected( state, 3 ) ).toBe( true );
+			expect( isBlockMultiSelected( state, '3' ) ).toBe( true );
 		} );
 
 		it( 'should return false if the block is not multi selected', () => {
-			expect( isBlockMultiSelected( state, 5 ) ).toBe( false );
+			expect( isBlockMultiSelected( state, '5' ) ).toBe( false );
 		} );
 	} );
 
 	describe( 'isFirstMultiSelectedBlock', () => {
 		const state = {
 			blocks: {
-				order: {
-					'': [ 5, 4, 3, 2, 1 ],
-				},
-				parents: {
-					1: '',
-					2: '',
-					3: '',
-					4: '',
-					5: '',
-				},
+				order: new Map(
+					Object.entries( {
+						'': [ '5', '4', '3', '2', '1' ],
+					} )
+				),
+				parents: new Map(
+					Object.entries( {
+						1: '',
+						2: '',
+						3: '',
+						4: '',
+						5: '',
+					} )
+				),
 			},
 			selection: {
-				selectionStart: { clientId: 2 },
-				selectionEnd: { clientId: 4 },
+				selectionStart: { clientId: '2' },
+				selectionEnd: { clientId: '4' },
 			},
 		};
 
 		it( 'should return true if the block is first in multi selection', () => {
-			expect( isFirstMultiSelectedBlock( state, 4 ) ).toBe( true );
+			expect( isFirstMultiSelectedBlock( state, '4' ) ).toBe( true );
 		} );
 
 		it( 'should return false if the block is not first in multi selection', () => {
-			expect( isFirstMultiSelectedBlock( state, 3 ) ).toBe( false );
+			expect( isFirstMultiSelectedBlock( state, '3' ) ).toBe( false );
 		} );
 	} );
 
@@ -1927,7 +2244,7 @@ describe( 'selectors', () => {
 				blocksMode: {},
 			};
 
-			expect( getBlockMode( state, 123 ) ).toEqual( 'visual' );
+			expect( getBlockMode( state, '123' ) ).toEqual( 'visual' );
 		} );
 
 		it( 'should return the block mode', () => {
@@ -1937,25 +2254,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getBlockMode( state, 123 ) ).toEqual( 'html' );
-		} );
-	} );
-
-	describe( 'isBlockInterfaceHidden', () => {
-		it( 'should return the true if toggled true in state', () => {
-			const state = {
-				isBlockInterfaceHidden: true,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if toggled false in state', () => {
-			const state = {
-				isBlockInterfaceHidden: false,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+			expect( getBlockMode( state, '123' ) ).toEqual( 'html' );
 		} );
 	} );
 
@@ -2031,10 +2330,12 @@ describe( 'selectors', () => {
 			const state = {
 				draggedBlocks: [ 'block-1_grandparent' ],
 				blocks: {
-					parents: {
-						'block-1': 'block-1_parent',
-						'block-1_parent': 'block-1_grandparent',
-					},
+					parents: new Map(
+						Object.entries( {
+							'block-1': 'block-1_parent',
+							'block-1_parent': 'block-1_grandparent',
+						} )
+					),
 				},
 			};
 			expect( isAncestorBeingDragged( state, 'block-1' ) ).toBe( true );
@@ -2044,10 +2345,12 @@ describe( 'selectors', () => {
 			const state = {
 				draggedBlocks: [ 'block-2_grandparent' ],
 				blocks: {
-					parents: {
-						'block-1': 'block-1_parent',
-						'block-1_parent': 'block-1_grandparent',
-					},
+					parents: new Map(
+						Object.entries( {
+							'block-1': 'block-1_parent',
+							'block-1_parent': 'block-1_grandparent',
+						} )
+					),
 				},
 			};
 			expect( isAncestorBeingDragged( state, 'block-1' ) ).toBe( false );
@@ -2057,10 +2360,12 @@ describe( 'selectors', () => {
 			const state = {
 				draggedBlocks: [],
 				blocks: {
-					parents: {
-						'block-1': 'block-1_parent',
-						'block-1_parent': 'block-1_grandparent',
-					},
+					parents: new Map(
+						Object.entries( {
+							'block-1': 'block-1_parent',
+							'block-1_parent': 'block-1_grandparent',
+						} )
+					),
 				},
 			};
 			expect( isAncestorBeingDragged( state, 'block-1' ) ).toBe( false );
@@ -2093,25 +2398,33 @@ describe( 'selectors', () => {
 					selectionEnd: { clientId: 'clientId2' },
 				},
 				blocks: {
-					byClientId: {
-						clientId1: { clientId: 'clientId1' },
-						clientId2: { clientId: 'clientId2' },
-					},
-					attributes: {
-						clientId1: {},
-						clientId2: {},
-					},
-					order: {
-						'': [ 'clientId1' ],
-						clientId1: [ 'clientId2' ],
-						clientId2: [],
-					},
-					parents: {
-						clientId1: '',
-						clientId2: 'clientId1',
-					},
-				},
-				insertionPoint: {
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+							clientId2: { clientId: 'clientId2' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+							clientId2: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1' ],
+							clientId1: [ 'clientId2' ],
+							clientId2: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+							clientId2: 'clientId1',
+						} )
+					),
+				},
+				insertionCue: {
 					rootClientId: undefined,
 					index: 0,
 				},
@@ -2130,21 +2443,29 @@ describe( 'selectors', () => {
 					selectionEnd: { clientId: 'clientId1' },
 				},
 				blocks: {
-					byClientId: {
-						clientId1: { clientId: 'clientId1' },
-					},
-					attributes: {
-						clientId1: {},
-					},
-					order: {
-						'': [ 'clientId1' ],
-						clientId1: [],
-					},
-					parents: {
-						clientId1: '',
-					},
-				},
-				insertionPoint: null,
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1' ],
+							clientId1: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+						} )
+					),
+				},
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2153,6 +2474,44 @@ describe( 'selectors', () => {
 			} );
 		} );
 
+		it( 'should cache and return the same object if state has not changed', () => {
+			const state = {
+				selection: {
+					selectionStart: { clientId: 'clientId1' },
+					selectionEnd: { clientId: 'clientId1' },
+				},
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1' ],
+							clientId1: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+						} )
+					),
+				},
+				insertionCue: null,
+			};
+
+			const insertionPoint1 = getBlockInsertionPoint( state );
+			const insertionPoint2 = getBlockInsertionPoint( state );
+
+			expect( insertionPoint1 ).toBe( insertionPoint2 );
+		} );
+
 		it( 'should return an object for the nested selected block', () => {
 			const state = {
 				selection: {
@@ -2160,25 +2519,33 @@ describe( 'selectors', () => {
 					selectionEnd: { clientId: 'clientId2' },
 				},
 				blocks: {
-					byClientId: {
-						clientId1: { clientId: 'clientId1' },
-						clientId2: { clientId: 'clientId2' },
-					},
-					attributes: {
-						clientId1: {},
-						clientId2: {},
-					},
-					order: {
-						'': [ 'clientId1' ],
-						clientId1: [ 'clientId2' ],
-						clientId2: [],
-					},
-					parents: {
-						clientId1: '',
-						clientId2: 'clientId1',
-					},
-				},
-				insertionPoint: null,
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+							clientId2: { clientId: 'clientId2' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+							clientId2: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1' ],
+							clientId1: [ 'clientId2' ],
+							clientId2: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+							clientId2: 'clientId1',
+						} )
+					),
+				},
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2194,25 +2561,33 @@ describe( 'selectors', () => {
 					selectionEnd: { clientId: 'clientId2' },
 				},
 				blocks: {
-					byClientId: {
-						clientId1: { clientId: 'clientId1' },
-						clientId2: { clientId: 'clientId2' },
-					},
-					attributes: {
-						clientId1: {},
-						clientId2: {},
-					},
-					order: {
-						'': [ 'clientId1', 'clientId2' ],
-						clientId1: [],
-						clientId2: [],
-					},
-					parents: {
-						clientId1: '',
-						clientId2: '',
-					},
-				},
-				insertionPoint: null,
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+							clientId2: { clientId: 'clientId2' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+							clientId2: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1', 'clientId2' ],
+							clientId1: [],
+							clientId2: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+							clientId2: '',
+						} )
+					),
+				},
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2228,25 +2603,33 @@ describe( 'selectors', () => {
 					selectionEnd: {},
 				},
 				blocks: {
-					byClientId: {
-						clientId1: { clientId: 'clientId1' },
-						clientId2: { clientId: 'clientId2' },
-					},
-					attributes: {
-						clientId1: {},
-						clientId2: {},
-					},
-					order: {
-						'': [ 'clientId1', 'clientId2' ],
-						clientId1: [],
-						clientId2: [],
-					},
-					parents: {
-						clientId1: '',
-						clientId2: '',
-					},
-				},
-				insertionPoint: null,
+					byClientId: new Map(
+						Object.entries( {
+							clientId1: { clientId: 'clientId1' },
+							clientId2: { clientId: 'clientId2' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							clientId1: {},
+							clientId2: {},
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'clientId1', 'clientId2' ],
+							clientId1: [],
+							clientId2: [],
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							clientId1: '',
+							clientId2: '',
+						} )
+					),
+				},
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2259,7 +2642,7 @@ describe( 'selectors', () => {
 	describe( 'isBlockInsertionPointVisible', () => {
 		it( 'should return false if no assigned insertion point', () => {
 			const state = {
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( isBlockInsertionPointVisible( state ) ).toBe( false );
@@ -2267,7 +2650,7 @@ describe( 'selectors', () => {
 
 		it( 'should return true if assigned insertion point', () => {
 			const state = {
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 5,
 				},
@@ -2281,8 +2664,8 @@ describe( 'selectors', () => {
 		it( 'should deny blocks that are not registered', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2293,8 +2676,8 @@ describe( 'selectors', () => {
 		it( 'should deny blocks that are not allowed by the editor', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2309,13 +2692,16 @@ describe( 'selectors', () => {
 		it( 'should allow blocks that are allowed by the editor', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
 					allowedBlockTypes: [ 'core/test-block-a' ],
 				},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
 				true
@@ -2325,8 +2711,9 @@ describe( 'selectors', () => {
 		it( 'should deny blocks when the editor has a template lock', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2338,14 +2725,38 @@ describe( 'selectors', () => {
 			);
 		} );
 
+		it( 'should deny blocks when the editor has a disabled editing mode', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(),
+					attributes: new Map(),
+					parents: new Map(),
+					order: new Map(),
+				},
+				blockListSettings: {},
+				settings: {},
+				blockEditingModes: new Map(
+					Object.entries( {
+						'': 'disabled',
+					} )
+				),
+			};
+			expect( canInsertBlockType( state, 'core/test-block-a' ) ).toBe(
+				false
+			);
+		} );
+
 		it( 'should deny blocks that restrict parent from being inserted into the root', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlockType( state, 'core/test-block-c' ) ).toBe(
 				false
@@ -2355,15 +2766,22 @@ describe( 'selectors', () => {
 		it( 'should deny blocks that restrict parent from being inserted into a restricted parent', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-a' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-a' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-c', 'block1' )
@@ -2373,17 +2791,24 @@ describe( 'selectors', () => {
 		it( 'should allow blocks to be inserted into an allowed parent', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-b' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-b' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-c', 'block1' )
@@ -2393,17 +2818,24 @@ describe( 'selectors', () => {
 		it( 'should deny blocks from being inserted into a block that does not allow inner blocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-b' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-b' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-c', 'block1' )
@@ -2413,12 +2845,18 @@ describe( 'selectors', () => {
 		it( 'should deny restricted blocks from being inserted into a block that restricts allowedBlocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-a' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-a' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2426,6 +2864,7 @@ describe( 'selectors', () => {
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-b', 'block1' )
@@ -2435,12 +2874,18 @@ describe( 'selectors', () => {
 		it( 'should allow allowed blocks to be inserted into a block that restricts allowedBlocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-a' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-a' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2448,28 +2893,65 @@ describe( 'selectors', () => {
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-b', 'block1' )
 			).toBe( true );
 		} );
 
-		it( 'should prioritise parent over allowedBlocks', () => {
+		it( 'should deny blocks from being inserted into a block that has a disabled editing mode', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-b' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-a' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
-				blockListSettings: {
+				blockListSettings: {},
+				settings: {},
+				blockEditingModes: new Map(
+					Object.entries( {
+						block1: 'disabled',
+					} )
+				),
+			};
+			expect(
+				canInsertBlockType( state, 'core/test-block-b', 'block1' )
+			).toBe( false );
+		} );
+
+		it( 'should prioritise parent over allowedBlocks', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-b' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
+				},
+				blockListSettings: {
 					block1: {
 						allowedBlocks: [],
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/test-block-c', 'block1' )
@@ -2479,15 +2961,22 @@ describe( 'selectors', () => {
 		it( 'should deny blocks that restrict parent to core/post-content when not in editor root', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-c' },
-					},
-					attributes: {
-						block1: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-c' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/post-content-child', 'block1' )
@@ -2497,11 +2986,14 @@ describe( 'selectors', () => {
 		it( 'should allow blocks that restrict parent to core/post-content when in editor root', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType( state, 'core/post-content-child' )
@@ -2511,23 +3003,34 @@ describe( 'selectors', () => {
 		it( 'should allow blocks to be inserted in a descendant of a required ancestor', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-					},
-					parents: {
-						block2: 'block1',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block1' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block2: 'block1',
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
 					block2: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2538,23 +3041,65 @@ describe( 'selectors', () => {
 			).toBe( true );
 		} );
 
+		it( 'should prevent blocks from being inserted within sections', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/block' }, // reusable blocks are always sections.
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block1: '',
+						} )
+					),
+					order: new Map( [ [ '', [ 'block1' ] ] ] ),
+				},
+				blockListSettings: {
+					block1: {},
+				},
+				settings: {},
+				blockEditingModes: new Map(),
+			};
+			expect(
+				canInsertBlockType( state, 'core/test-block-a', 'block1' )
+			).toBe( false );
+		} );
+
 		it( 'should allow blocks to be inserted if both parent and ancestor restrictions are met', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-						block3: { name: 'core/test-block-parent' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-						block3: {},
-					},
-					parents: {
-						block2: 'block1',
-						block3: 'block2',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block' },
+							block3: { name: 'core/test-block-parent' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+							block3: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block2: 'block1',
+							block3: 'block2',
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2562,6 +3107,7 @@ describe( 'selectors', () => {
 					block3: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2575,19 +3121,30 @@ describe( 'selectors', () => {
 		it( 'should deny blocks from being inserted outside a required ancestor', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-						block3: { name: 'core/block' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-						block3: {},
-					},
-					parents: {
-						block3: 'block2',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block' },
+							block3: { name: 'core/block' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+							block3: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block3: 'block2',
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2595,6 +3152,7 @@ describe( 'selectors', () => {
 					block3: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2608,19 +3166,30 @@ describe( 'selectors', () => {
 		it( 'should deny blocks from being inserted outside of a required ancestor, even if parent matches', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-						block3: { name: 'core/test-block-parent' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-						block3: {},
-					},
-					parents: {
-						block3: 'block2',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block' },
+							block3: { name: 'core/test-block-parent' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+							block3: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block3: 'block2',
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2628,6 +3197,7 @@ describe( 'selectors', () => {
 					block3: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2641,17 +3211,26 @@ describe( 'selectors', () => {
 		it( 'should deny blocks from being inserted inside ancestor if parent restricts allowedBlocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-					},
-					parents: {
-						block2: 'block1',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
+					parents: new Map( [
+						[ 'block2', 'block1' ],
+						[ 'block1', '' ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2660,6 +3239,7 @@ describe( 'selectors', () => {
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2673,23 +3253,34 @@ describe( 'selectors', () => {
 		it( 'should deny blocks from being inserted inside ancestor if parent restriction is not met', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/test-block-ancestor' },
-						block2: { name: 'core/block' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-					},
-					parents: {
-						block2: 'block1',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/test-block-ancestor' },
+							block2: { name: 'core/block' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block2: 'block1',
+						} )
+					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
 					block2: {},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect(
 				canInsertBlockType(
@@ -2705,16 +3296,22 @@ describe( 'selectors', () => {
 		it( 'should allow blocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						1: { name: 'core/test-block-a' },
-						2: { name: 'core/test-block-b' },
-						3: { name: 'core/test-block-c' },
-					},
-					attributes: {
-						1: {},
-						2: {},
-						3: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							1: { name: 'core/test-block-a' },
+							2: { name: 'core/test-block-b' },
+							3: { name: 'core/test-block-c' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							1: {},
+							2: {},
+							3: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -2725,6 +3322,7 @@ describe( 'selectors', () => {
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlocks( state, [ '2', '3' ], '1' ) ).toBe( true );
 		} );
@@ -2732,16 +3330,22 @@ describe( 'selectors', () => {
 		it( 'should deny blocks', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						1: { name: 'core/test-block-a' },
-						2: { name: 'core/test-block-b' },
-						3: { name: 'core/test-block-c' },
-					},
-					attributes: {
-						1: {},
-						2: {},
-						3: {},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							1: { name: 'core/test-block-a' },
+							2: { name: 'core/test-block-b' },
+							3: { name: 'core/test-block-c' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							1: {},
+							2: {},
+							3: {},
+						} )
+					),
+					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -2749,178 +3353,139 @@ describe( 'selectors', () => {
 					},
 				},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			expect( canInsertBlocks( state, [ '2', '3' ], '1' ) ).toBe( false );
 		} );
 	} );
 
 	describe( 'getInserterItems', () => {
-		it( 'should properly list block type and reusable block items', () => {
-			const state = {
-				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
-					tree: {
-						'': {
-							innerBlocks: [],
-						},
+		afterAll( async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [],
+			} );
+			await dispatch( store ).resetBlocks( [] );
+		} );
+
+		it( 'should properly list block type and reusable block items', async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [
+					{
+						id: 1,
+						isTemporary: false,
+						clientId: 'block1',
+						title: { raw: 'Reusable Block 1' },
+						content: { raw: '<!-- /wp:test-block-a -->' },
 					},
-				},
-				settings: {
-					__experimentalReusableBlocks: [
-						{
-							id: 1,
-							isTemporary: false,
-							clientId: 'block1',
-							title: { raw: 'Reusable Block 1' },
-							content: { raw: '<!-- /wp:test-block-a -->' },
-						},
-					],
-				},
-				// Intentionally include a test case which considers
-				// `insertUsage` as not present within preferences.
-				//
-				// See: https://github.com/WordPress/gutenberg/issues/14580
-				preferences: {},
-				blockListSettings: {},
-			};
-			const items = getInserterItems( state );
+				],
+			} );
+			const items = select( store ).getInserterItems();
 			const testBlockAItem = items.find(
 				( item ) => item.id === 'core/test-block-a'
 			);
 			expect( testBlockAItem ).toEqual( {
+				category: 'design',
+				description: undefined,
+				example: undefined,
+				frecency: 0,
+				icon: { src: 'test' },
 				id: 'core/test-block-a',
-				name: 'core/test-block-a',
 				initialAttributes: {},
-				title: 'Test Block A',
-				icon: {
-					src: 'test',
-				},
-				category: 'design',
-				keywords: [ 'testing' ],
-				variations: [],
 				isDisabled: false,
+				keywords: [ 'testing' ],
+				name: 'core/test-block-a',
+				title: 'Test Block A',
 				utility: 1,
-				frecency: 0,
+				variations: [],
 			} );
 			const reusableBlockItem = items.find(
 				( item ) => item.id === 'core/block/1'
 			);
 			expect( reusableBlockItem ).toEqual( {
-				id: 'core/block/1',
-				name: 'core/block',
-				initialAttributes: { ref: 1 },
-				title: 'Reusable Block 1',
+				category: 'reusable',
+				content: '<!-- /wp:test-block-a -->',
+				frecency: 0,
 				icon: {
-					src: 'test',
+					src: symbol,
+					foreground: 'var(--wp-block-synced-color)',
 				},
-				category: 'reusable',
-				keywords: [],
+				id: 'core/block/1',
+				initialAttributes: { ref: 1 },
 				isDisabled: false,
+				keywords: [ 'reusable' ],
+				name: 'core/block',
+				syncStatus: undefined,
+				title: 'Reusable Block 1',
 				utility: 1,
-				frecency: 0,
 			} );
 		} );
 
-		it( 'should correctly cache the return values', () => {
-			const state = {
-				blocks: {
-					byClientId: {
-						block3: { name: 'core/test-block-a' },
-						block4: { name: 'core/test-block-a' },
-					},
-					attributes: {
-						block3: {},
-						block4: {},
-					},
-					order: {
-						'': [ 'block3', 'block4' ],
-					},
-					parents: {
-						block3: '',
-						block4: '',
+		it( 'should correctly cache the return values', async () => {
+			await dispatch( store ).updateSettings( {
+				__experimentalReusableBlocks: [
+					{
+						id: 1,
+						isTemporary: false,
+						clientId: 'block1',
+						title: { raw: 'Reusable Block 1' },
+						content: { raw: '<!-- /wp:test-block-a -->' },
 					},
-					tree: {
-						block3: {
-							clientId: 'block3',
-							name: 'core/test-block-a',
-							attributes: {},
-							innerBlocks: [],
-						},
-						block4: {
-							clientId: 'block4',
-							name: 'core/test-block-a',
-							attributes: {},
-							innerBlocks: [],
-						},
+					{
+						id: 2,
+						isTemporary: false,
+						clientId: 'block2',
+						title: { raw: 'Reusable Block 2' },
+						content: { raw: '<!-- /wp:test-block-b -->' },
 					},
-					controlledInnerBlocks: {},
-				},
-				settings: {
-					__experimentalReusableBlocks: [
-						{
-							id: 1,
-							isTemporary: false,
-							clientId: 'block1',
-							title: { raw: 'Reusable Block 1' },
-							content: { raw: '<!-- /wp:test-block-a -->' },
-						},
-						{
-							id: 2,
-							isTemporary: false,
-							clientId: 'block2',
-							title: { raw: 'Reusable Block 2' },
-							content: { raw: '<!-- /wp:test-block-b -->' },
-						},
-					],
-				},
-				preferences: {
-					insertUsage: {},
-				},
-				blockListSettings: {
-					block3: {},
-					block4: {},
+				],
+			} );
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block3',
+					name: 'core/test-block-a',
+					innerBlocks: [],
 				},
-			};
-
-			const stateSecondBlockRestricted = {
-				...state,
-				blockListSettings: {
-					...state.blockListSettings,
-					block4: {
-						allowedBlocks: [ 'core/test-block-b' ],
-					},
+				{
+					clientId: 'block4',
+					name: 'core/test-block-a',
+					innerBlocks: [],
 				},
-			};
+			] );
+			await dispatch( store ).updateBlockListSettings( 'block3', {} );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 
-			const firstBlockFirstCall = getInserterItems( state, 'block3' );
-			const firstBlockSecondCall = getInserterItems(
-				stateSecondBlockRestricted,
-				'block3'
-			);
+			const firstBlockFirstCall =
+				select( store ).getInserterItems( 'block3' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+			const firstBlockSecondCall =
+				select( store ).getInserterItems( 'block3' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 			expect( firstBlockFirstCall ).toBe( firstBlockSecondCall );
 			expect( firstBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
 				'core/test-block-a',
 				'core/test-block-b',
-				'core/test-freeform',
+				'core/freeform',
 				'core/test-block-ancestor',
 				'core/test-block-parent',
 				'core/block/1',
 				'core/block/2',
 			] );
 
-			const secondBlockFirstCall = getInserterItems( state, 'block4' );
-			const secondBlockSecondCall = getInserterItems(
-				stateSecondBlockRestricted,
-				'block4'
-			);
+			const secondBlockFirstCall =
+				select( store ).getInserterItems( 'block4' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {
+				allowedBlocks: [ 'core/test-block-b' ],
+			} );
+			const secondBlockSecondCall =
+				select( store ).getInserterItems( 'block4' );
+			await dispatch( store ).updateBlockListSettings( 'block4', {} );
 			expect( secondBlockFirstCall ).not.toBe( secondBlockSecondCall );
 			expect( secondBlockFirstCall.map( ( item ) => item.id ) ).toEqual( [
 				'core/test-block-a',
 				'core/test-block-b',
-				'core/test-freeform',
+				'core/freeform',
 				'core/test-block-ancestor',
 				'core/test-block-parent',
 				'core/block/1',
@@ -2931,67 +3496,37 @@ describe( 'selectors', () => {
 			);
 		} );
 
-		it( 'should set isDisabled when a block with `multiple: false` has been used', () => {
-			const state = {
-				blocks: {
-					byClientId: {
-						block1: {
-							clientId: 'block1',
-							name: 'core/test-block-b',
-						},
-					},
-					attributes: {
-						block1: { attribute: {} },
-					},
-					order: {
-						'': [ 'block1' ],
-					},
-					tree: {
-						block1: {
-							clientId: 'block1',
-							name: 'core/test-block-b',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
-					controlledInnerBlocks: {},
-					parents: {},
-				},
-				preferences: {
-					insertUsage: {},
+		it( 'should set isDisabled when a block with `multiple: false` has been used', async () => {
+			await dispatch( store ).resetBlocks( [
+				{
+					clientId: 'block1',
+					name: 'core/test-block-b',
+					innerBlocks: [],
 				},
-				blockListSettings: {},
-				settings: {},
-			};
-			const items = getInserterItems( state );
+			] );
+			const items = select( store ).getInserterItems();
 			const testBlockBItem = items.find(
 				( item ) => item.id === 'core/test-block-b'
 			);
 			expect( testBlockBItem.isDisabled ).toBe( true );
 		} );
 
-		it( 'should set a frecency', () => {
-			const state = {
-				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
-					cache: {},
-				},
-				preferences: {
-					insertUsage: {
-						'core/test-block-b': { count: 10, time: 1000 },
+		it( 'should set a frecency', async () => {
+			for ( let i = 0; i < 10; i++ ) {
+				await dispatch( store ).insertBlocks( [
+					{
+						clientId: 'block1',
+						name: 'core/test-block-b',
+						innerBlocks: [],
 					},
-				},
-				blockListSettings: {},
-				settings: {},
-			};
-			const items = getInserterItems( state );
+				] );
+			}
+
+			const items = select( store ).getInserterItems();
 			const reusableBlock2Item = items.find(
 				( item ) => item.id === 'core/test-block-b'
 			);
-			expect( reusableBlock2Item.frecency ).toBe( 2.5 );
+			expect( reusableBlock2Item.frecency ).toBe( 40 );
 		} );
 	} );
 
@@ -3068,15 +3603,16 @@ describe( 'selectors', () => {
 		it( 'should properly return block type items', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
 					cache: {},
 				},
 				settings: {},
 				preferences: {},
 				blockListSettings: {},
+				blockEditingModes: new Map(),
 			};
 			const blocks = [ { name: 'core/with-tranforms-a' } ];
 			const items = getBlockTransformItems( state, blocks );
@@ -3108,15 +3644,16 @@ describe( 'selectors', () => {
 		it( 'should support single block object', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
 					cache: {},
 				},
 				settings: {},
 				preferences: {},
 				blockListSettings: {},
+				blockEditingModes: new Map(),
 			};
 			const block = { name: 'core/with-tranforms-a' };
 			const items = getBlockTransformItems( state, block );
@@ -3125,19 +3662,25 @@ describe( 'selectors', () => {
 		it( 'should return only eligible blocks for transformation - `allowedBlocks`', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: { name: 'core/with-tranforms-b' },
-						block2: { name: 'core/with-tranforms-a' },
-					},
-					attributes: {
-						block1: {},
-						block2: {},
-					},
-					order: {},
-					parents: {
-						block1: '',
-						block2: 'block1',
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/with-tranforms-b' },
+							block2: { name: 'core/with-tranforms-a' },
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+							block2: {},
+						} )
+					),
+					order: new Map(),
+					parents: new Map(
+						Object.entries( {
+							block1: '',
+							block2: 'block1',
+						} )
+					),
 					cache: {},
 					controlledInnerBlocks: {},
 				},
@@ -3149,6 +3692,7 @@ describe( 'selectors', () => {
 					},
 					block2: {},
 				},
+				blockEditingModes: new Map(),
 			};
 			const blocks = [
 				{ clientId: 'block2', name: 'core/with-tranforms-a' },
@@ -3160,34 +3704,43 @@ describe( 'selectors', () => {
 		it( 'should take into account the usage of blocks settings `multiple` - if multiple blocks of the same type are allowed', () => {
 			const state = {
 				blocks: {
-					byClientId: {
-						block1: {
-							clientId: 'block1',
-							name: 'core/with-tranforms-c',
-						},
-					},
-					attributes: {
-						block1: { attribute: {} },
-					},
-					order: {
-						'': [ 'block1' ],
-					},
-					tree: {
-						block1: {
-							clientId: 'block1',
-							name: 'core/with-tranforms-c',
-							attributes: {},
-							innerBlocks: [],
-						},
-					},
+					byClientId: new Map(
+						Object.entries( {
+							block1: {
+								clientId: 'block1',
+								name: 'core/with-tranforms-c',
+							},
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: { attribute: {} },
+						} )
+					),
+					order: new Map(
+						Object.entries( {
+							'': [ 'block1' ],
+						} )
+					),
+					tree: new Map(
+						Object.entries( {
+							block1: {
+								clientId: 'block1',
+								name: 'core/with-tranforms-c',
+								attributes: {},
+								innerBlocks: [],
+							},
+						} )
+					),
 					controlledInnerBlocks: {},
-					parents: {},
+					parents: new Map(),
 				},
 				preferences: {
 					insertUsage: {},
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			const blocks = [ { name: 'core/with-tranforms-a' } ];
 			const items = getBlockTransformItems( state, blocks );
@@ -3208,10 +3761,10 @@ describe( 'selectors', () => {
 		it( 'should set frecency', () => {
 			const state = {
 				blocks: {
-					byClientId: {},
-					attributes: {},
-					order: {},
-					parents: {},
+					byClientId: new Map(),
+					attributes: new Map(),
+					order: new Map(),
+					parents: new Map(),
 					cache: {},
 				},
 				preferences: {
@@ -3221,6 +3774,7 @@ describe( 'selectors', () => {
 				},
 				blockListSettings: {},
 				settings: {},
+				blockEditingModes: new Map(),
 			};
 			const blocks = [ { name: 'core/with-tranforms-c' } ];
 			const items = getBlockTransformItems( state, blocks );
@@ -3264,7 +3818,7 @@ describe( 'selectors', () => {
 	} );
 
 	describe( 'getTemplateLock', () => {
-		it( 'should return the general template lock if no clientId was set', () => {
+		it( 'should return the general template lock if no clientId was specified', () => {
 			const state = {
 				settings: { templateLock: 'all' },
 			};
@@ -3272,7 +3826,7 @@ describe( 'selectors', () => {
 			expect( getTemplateLock( state ) ).toBe( 'all' );
 		} );
 
-		it( 'should return undefined if the specified clientId was not found', () => {
+		it( 'should return false if the specified clientId was not found', () => {
 			const state = {
 				settings: { templateLock: 'all' },
 				blockListSettings: {
@@ -3282,10 +3836,10 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getTemplateLock( state, 'ribs' ) ).toBe( undefined );
+			expect( getTemplateLock( state, 'ribs' ) ).toBe( false );
 		} );
 
-		it( 'should return undefined if template lock was not set on the specified block', () => {
+		it( 'should return false if template lock was not set on the specified block', () => {
 			const state = {
 				settings: { templateLock: 'all' },
 				blockListSettings: {
@@ -3295,7 +3849,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getTemplateLock( state, 'ribs' ) ).toBe( undefined );
+			expect( getTemplateLock( state, 'chicken' ) ).toBe( false );
 		} );
 
 		it( 'should return the template lock for the specified clientId', () => {
@@ -3429,20 +3983,24 @@ describe( 'selectors', () => {
 
 	describe( 'getLowestCommonAncestorWithSelectedBlock', () => {
 		const blocks = {
-			order: {
-				'': [ 'a', 'b' ],
-				a: [ 'c', 'd' ],
-				d: [ 'e' ],
-				b: [ 'f' ],
-			},
-			parents: {
-				a: '',
-				b: '',
-				c: 'a',
-				d: 'a',
-				e: 'd',
-				f: 'b',
-			},
+			order: new Map(
+				Object.entries( {
+					'': [ 'a', 'b' ],
+					a: [ 'c', 'd' ],
+					d: [ 'e' ],
+					b: [ 'f' ],
+				} )
+			),
+			parents: new Map(
+				Object.entries( {
+					a: '',
+					b: '',
+					c: 'a',
+					d: 'a',
+					e: 'd',
+					f: 'b',
+				} )
+			),
 		};
 
 		it( 'should not be defined if there is no block selected', () => {
@@ -3541,35 +4099,39 @@ describe( 'selectors', () => {
 				},
 			},
 			blocks: {
-				parents: {
-					'client-id-01': '',
-					'client-id-02': 'client-id-01',
-					'client-id-03': 'client-id-02',
-					'client-id-04': 'client-id-03',
-					'client-id-05': 'client-id-03',
-				},
-				byClientId: {
-					'client-id-01': {
-						clientId: 'client-id-01',
-						name: 'core/columns',
-					},
-					'client-id-02': {
-						clientId: 'client-id-02',
-						name: 'core/navigation',
-					},
-					'client-id-03': {
-						clientId: 'client-id-03',
-						name: 'core/navigation-link',
-					},
-					'client-id-04': {
-						clientId: 'client-id-04',
-						name: 'core/navigation-link',
-					},
-					'client-id-05': {
-						clientId: 'client-id-05',
-						name: 'core/navigation-link',
-					},
-				},
+				parents: new Map(
+					Object.entries( {
+						'client-id-01': '',
+						'client-id-02': 'client-id-01',
+						'client-id-03': 'client-id-02',
+						'client-id-04': 'client-id-03',
+						'client-id-05': 'client-id-03',
+					} )
+				),
+				byClientId: new Map(
+					Object.entries( {
+						'client-id-01': {
+							clientId: 'client-id-01',
+							name: 'core/columns',
+						},
+						'client-id-02': {
+							clientId: 'client-id-02',
+							name: 'core/navigation',
+						},
+						'client-id-03': {
+							clientId: 'client-id-03',
+							name: 'core/navigation-link',
+						},
+						'client-id-04': {
+							clientId: 'client-id-04',
+							name: 'core/navigation-link',
+						},
+						'client-id-05': {
+							clientId: 'client-id-05',
+							name: 'core/navigation-link',
+						},
+					} )
+				),
 				cache: {
 					'client-id-01': {},
 					'client-id-02': {},
@@ -3577,9 +4139,11 @@ describe( 'selectors', () => {
 					'client-id-04': {},
 					'client-id-05': {},
 				},
-				order: {
-					'client-id-03': [ 'client-id-04', 'client-id-05' ],
-				},
+				order: new Map(
+					Object.entries( {
+						'client-id-03': [ 'client-id-04', 'client-id-05' ],
+					} )
+				),
 				controlledInnerBlocks: {},
 			},
 		};
@@ -3608,360 +4172,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '__experimentalGetAllowedPatterns', () => {
-		const state = {
-			blocks: {
-				byClientId: {
-					block1: { name: 'core/test-block-a' },
-					block2: { name: 'core/test-block-b' },
-				},
-				attributes: {
-					block1: {},
-					block2: {},
-				},
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-				block2: {
-					allowedBlocks: [],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						title: 'pattern with a',
-						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
-					},
-					{
-						name: 'pattern-b',
-						title: 'pattern with b',
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						name: 'pattern-c',
-						title: 'pattern hidden from UI',
-						inserter: false,
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-					},
-				],
-			},
-		};
-
-		it( 'should return all patterns for root level', () => {
-			expect(
-				__experimentalGetAllowedPatterns( state, null )
-			).toHaveLength( 2 );
-		} );
-
-		it( 'should return patterns that consists of blocks allowed for the specified client ID', () => {
-			expect(
-				__experimentalGetAllowedPatterns( state, 'block1' )
-			).toHaveLength( 1 );
-
-			expect(
-				__experimentalGetAllowedPatterns( state, 'block2' )
-			).toHaveLength( 0 );
-		} );
-		it( 'should return empty array if only patterns hidden from UI exist', () => {
-			expect(
-				__experimentalGetAllowedPatterns( {
-					blocks: { byClientId: {} },
-					blockListSettings: {},
-					settings: {
-						__experimentalBlockPatterns: [
-							{
-								name: 'pattern-c',
-								title: 'pattern hidden from UI',
-								inserter: false,
-								content:
-									'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-							},
-						],
-					},
-				} )
-			).toHaveLength( 0 );
-		} );
-	} );
-	describe( '__experimentalGetParsedPattern', () => {
-		const state = {
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						title: 'pattern with a',
-						content: `<!-- wp:test-block-a --><!-- /wp:test-block-a -->`,
-					},
-					{
-						name: 'pattern-hidden-from-ui',
-						title: 'pattern hidden from UI',
-						inserter: false,
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a --><!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-				],
-			},
-		};
-		it( 'should return proper results when pattern does not exist', () => {
-			expect(
-				__experimentalGetParsedPattern( state, 'not there' )
-			).toBeNull();
-		} );
-		it( 'should return existing pattern properly parsed', () => {
-			const { name, blocks } = __experimentalGetParsedPattern(
-				state,
-				'pattern-a'
-			);
-			expect( name ).toEqual( 'pattern-a' );
-			expect( blocks ).toHaveLength( 1 );
-			expect( blocks[ 0 ] ).toEqual(
-				expect.objectContaining( {
-					name: 'core/test-block-a',
-				} )
-			);
-		} );
-		it( 'should return hidden from UI pattern when requested', () => {
-			const { name, blocks, inserter } = __experimentalGetParsedPattern(
-				state,
-				'pattern-hidden-from-ui'
-			);
-			expect( name ).toEqual( 'pattern-hidden-from-ui' );
-			expect( inserter ).toBeFalsy();
-			expect( blocks ).toHaveLength( 2 );
-			expect( blocks[ 0 ] ).toEqual(
-				expect.objectContaining( {
-					name: 'core/test-block-a',
-				} )
-			);
-		} );
-	} );
-	describe( '__experimentalGetPatternsByBlockTypes', () => {
-		const state = {
-			blocks: {
-				byClientId: {
-					block1: { name: 'core/test-block-a' },
-				},
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						blockTypes: [ 'test/block-a' ],
-						title: 'pattern a',
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-					},
-					{
-						name: 'pattern-b',
-						blockTypes: [ 'test/block-b' ],
-						title: 'pattern b',
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						title: 'pattern c',
-						blockTypes: [ 'test/block-a' ],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-				],
-			},
-		};
-		it( 'should return empty array if no block name is provided', () => {
-			expect( __experimentalGetPatternsByBlockTypes( state ) ).toEqual(
-				[]
-			);
-		} );
-		it( 'shoud return empty array if no match is found', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
-				state,
-				'test/block-not-exists'
-			);
-			expect( patterns ).toEqual( [] );
-		} );
-		it( 'should return proper results when there are matched block patterns', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
-				state,
-				'test/block-a'
-			);
-			expect( patterns ).toHaveLength( 2 );
-			expect( patterns ).toEqual(
-				expect.arrayContaining( [
-					expect.objectContaining( { title: 'pattern a' } ),
-					expect.objectContaining( { title: 'pattern c' } ),
-				] )
-			);
-		} );
-		it( 'should return proper result with matched patterns and allowed blocks from rootClientId', () => {
-			const patterns = __experimentalGetPatternsByBlockTypes(
-				state,
-				'test/block-a',
-				'block1'
-			);
-			expect( patterns ).toHaveLength( 1 );
-			expect( patterns[ 0 ] ).toEqual(
-				expect.objectContaining( { title: 'pattern c' } )
-			);
-		} );
-	} );
-	describe( '__experimentalGetPatternTransformItems', () => {
-		const state = {
-			blocks: {
-				byClientId: {
-					block1: { name: 'core/test-block-a' },
-					block2: { name: 'core/test-block-b' },
-				},
-				controlledInnerBlocks: { 'block2-clientId': true },
-			},
-			blockListSettings: {
-				block1: {
-					allowedBlocks: [ 'core/test-block-b' ],
-				},
-			},
-			settings: {
-				__experimentalBlockPatterns: [
-					{
-						name: 'pattern-a',
-						blockTypes: [ 'test/block-a' ],
-						title: 'pattern a',
-						content:
-							'<!-- wp:test-block-a --><!-- /wp:test-block-a -->',
-					},
-					{
-						name: 'pattern-b',
-						blockTypes: [ 'test/block-b' ],
-						title: 'pattern b',
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						name: 'pattern-c',
-						title: 'pattern c',
-						blockTypes: [ 'test/block-a' ],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-					{
-						name: 'pattern-mix',
-						title: 'pattern mix',
-						blockTypes: [
-							'core/test-block-a',
-							'core/test-block-b',
-						],
-						content:
-							'<!-- wp:test-block-b --><!-- /wp:test-block-b -->',
-					},
-				],
-			},
-		};
-		describe( 'should return empty array', () => {
-			it( 'when no blocks are selected', () => {
-				expect(
-					__experimentalGetPatternTransformItems( state )
-				).toEqual( [] );
-			} );
-			it( 'when a selected block has inner blocks', () => {
-				const blocks = [
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{
-						name: 'core/test-block-b',
-						innerBlocks: [ { name: 'some inner block' } ],
-					},
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-			it( 'when a selected block has controlled inner blocks', () => {
-				const blocks = [
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{
-						name: 'core/test-block-b',
-						clientId: 'block2-clientId',
-						innerBlocks: [],
-					},
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-			it( 'when no patterns are available based on the selected blocks', () => {
-				const blocks = [
-					{ name: 'block-with-no-patterns', innerBlocks: [] },
-				];
-				expect(
-					__experimentalGetPatternTransformItems( state, blocks )
-				).toEqual( [] );
-			} );
-		} );
-		describe( 'should return proper results', () => {
-			it( 'when a single block is selected', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 1 );
-				expect( patterns[ 0 ] ).toEqual(
-					expect.objectContaining( {
-						name: 'pattern-mix',
-					} )
-				);
-			} );
-			it( 'when different multiple blocks are selected', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-					{ name: 'test/block-b', innerBlocks: [] },
-					{ name: 'some other block', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 2 );
-				expect( patterns ).toEqual(
-					expect.arrayContaining( [
-						expect.objectContaining( {
-							name: 'pattern-mix',
-						} ),
-						expect.objectContaining( {
-							name: 'pattern-b',
-						} ),
-					] )
-				);
-			} );
-			it( 'when multiple blocks are selected containing multiple times the same block', () => {
-				const blocks = [
-					{ name: 'core/test-block-b', innerBlocks: [] },
-					{ name: 'some other block', innerBlocks: [] },
-					{ name: 'core/test-block-a', innerBlocks: [] },
-					{ name: 'core/test-block-b', innerBlocks: [] },
-				];
-				const patterns = __experimentalGetPatternTransformItems(
-					state,
-					blocks
-				);
-				expect( patterns ).toHaveLength( 1 );
-				expect( patterns[ 0 ] ).toEqual(
-					expect.objectContaining( {
-						name: 'pattern-mix',
-					} )
-				);
-			} );
-		} );
-	} );
-
 	describe( 'wasBlockJustInserted', () => {
 		it( 'should return true if the client id passed to wasBlockJustInserted is found within the state', () => {
 			const expectedClientId = '62bfef6e-d5e9-43ba-b7f9-c77cf354141f';
@@ -3969,7 +4179,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: expectedClientId,
+					clientIds: [ expectedClientId ],
 					source,
 				},
 			};
@@ -3986,7 +4196,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId: unexpectedClientId,
+					clientIds: [ unexpectedClientId ],
 					source,
 				},
 			};
@@ -4002,7 +4212,7 @@ describe( 'selectors', () => {
 
 			const state = {
 				lastBlockInserted: {
-					clientId,
+					clientIds: [ clientId ],
 				},
 			};
 
@@ -4071,19 +4281,7 @@ describe( 'getInserterItems with core blocks prioritization', () => {
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should prioritize core blocks by sorting them at the top of the returned list', () => {
-		const state = {
-			blocks: {
-				byClientId: {},
-				attributes: {},
-				order: {},
-				parents: {},
-				cache: {},
-			},
-			settings: {},
-			preferences: {},
-			blockListSettings: {},
-		};
-		const items = getInserterItems( state );
+		const items = select( store ).getInserterItems();
 		const expectedResult = [
 			'core/block',
 			'core/test-block-a',
@@ -4104,11 +4302,13 @@ describe( '__unstableGetClientIdWithClientIdsTree', () => {
 	it( "should return a stripped down block object containing only its client ID and its inner blocks' client IDs", () => {
 		const state = {
 			blocks: {
-				order: {
-					'': [ 'foo' ],
-					foo: [ 'bar', 'baz' ],
-					bar: [ 'qux' ],
-				},
+				order: new Map(
+					Object.entries( {
+						'': [ 'foo' ],
+						foo: [ 'bar', 'baz' ],
+						bar: [ 'qux' ],
+					} )
+				),
 			},
 		};
 
@@ -4124,17 +4324,20 @@ describe( '__unstableGetClientIdWithClientIdsTree', () => {
 				{ clientId: 'baz', innerBlocks: [] },
 			],
 		} );
+		expect( console ).toHaveWarned();
 	} );
 } );
 describe( '__unstableGetClientIdsTree', () => {
 	it( "should return the full content tree starting from the given root, consisting of stripped down block object containing only its client ID and its inner blocks' client IDs", () => {
 		const state = {
 			blocks: {
-				order: {
-					'': [ 'foo' ],
-					foo: [ 'bar', 'baz' ],
-					bar: [ 'qux' ],
-				},
+				order: new Map(
+					Object.entries( {
+						'': [ 'foo' ],
+						foo: [ 'bar', 'baz' ],
+						bar: [ 'qux' ],
+					} )
+				),
 			},
 		};
 
@@ -4150,11 +4353,13 @@ describe( '__unstableGetClientIdsTree', () => {
 	it( "should return the full content tree starting from the root, consisting of stripped down block object containing only its client ID and its inner blocks' client IDs", () => {
 		const state = {
 			blocks: {
-				order: {
-					'': [ 'foo' ],
-					foo: [ 'bar', 'baz' ],
-					bar: [ 'qux' ],
-				},
+				order: new Map(
+					Object.entries( {
+						'': [ 'foo' ],
+						foo: [ 'bar', 'baz' ],
+						bar: [ 'qux' ],
+					} )
+				),
 			},
 		};
 
@@ -4172,3 +4377,229 @@ describe( '__unstableGetClientIdsTree', () => {
 		] );
 	} );
 } );
+
+describe( 'getBlockEditingMode', () => {
+	const baseState = {
+		settings: {},
+		blocks: {
+			byClientId: new Map( [
+				[
+					'6cf70164-9097-4460-bcbf-200560546988',
+					{ name: 'core/template-part' },
+				], // Header
+				[
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					{ name: 'core/group' },
+				], // Group
+				[
+					'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					{ name: 'core/post-title' },
+				], // |  Post Title
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					{ name: 'core/group' },
+				], // |  Group
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', { name: 'core/p' } ], // | |  Paragraph
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', { name: 'core/p' } ], // | |  Paragraph
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					{ name: 'core/group' },
+				], // | | Group
+			] ),
+			order: new Map( [
+				[
+					'',
+					[
+						'6cf70164-9097-4460-bcbf-200560546988',
+						'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					],
+				],
+				[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+				[
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					[
+						'b26fc763-417d-4f01-b81c-2ec61e14a972',
+						'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					],
+				],
+				[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', [] ],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					[
+						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					],
+				],
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ],
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', [] ],
+			] ),
+			parents: new Map( [
+				[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
+				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', '' ],
+				[
+					'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+				],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+				],
+				[
+					'b3247f75-fd94-4fef-97f9-5bfd162cc416',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
+				[
+					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
+			] ),
+		},
+		blockListSettings: {
+			'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337': {},
+			'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {},
+		},
+		blockEditingModes: new Map( [] ),
+	};
+
+	const hasContentRoleAttribute = jest.fn( () => false );
+	const get = jest.fn( () => 'edit' );
+
+	const mockedSelectors = { get };
+
+	lock( mockedSelectors, {
+		hasContentRoleAttribute,
+	} );
+
+	getBlockEditingMode.registry = {
+		select: jest.fn( () => mockedSelectors ),
+	};
+
+	it( 'should return default by default', () => {
+		expect(
+			getBlockEditingMode(
+				baseState,
+				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+			)
+		).toBe( 'default' );
+	} );
+
+	it( 'should return disabled if explicitly set', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'disabled' ],
+			] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'disabled' );
+	} );
+
+	it( 'should return contentOnly if explicitly set', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', 'contentOnly' ],
+			] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'should return disabled if explicitly set on a parent', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [
+				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'disabled' ],
+			] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'disabled' );
+	} );
+
+	it( 'should return default if parent is set to contentOnly', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [
+				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'contentOnly' ],
+			] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'default' );
+	} );
+
+	it( 'should return disabled if overridden by a parent', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [
+				[ '', 'disabled' ],
+				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', 'default' ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'disabled' ],
+			] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'disabled' );
+	} );
+
+	it( 'should return disabled if explicitly set on root', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [ [ '', 'disabled' ] ] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'disabled' );
+	} );
+
+	it( 'should return default if root is contentOnly', () => {
+		const state = {
+			...baseState,
+			blockEditingModes: new Map( [ [ '', 'contentOnly' ] ] ),
+		};
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'default' );
+	} );
+
+	it( 'should return disabled if parent is locked and the block has no content role', () => {
+		const state = {
+			...baseState,
+			blockListSettings: {
+				...baseState.blockListSettings,
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {
+					templateLock: 'contentOnly',
+				},
+			},
+		};
+		hasContentRoleAttribute.mockReturnValueOnce( false );
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'disabled' );
+	} );
+
+	it( 'should return contentOnly if parent is locked and the block has a content role', () => {
+		const state = {
+			...baseState,
+			blockListSettings: {
+				...baseState.blockListSettings,
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f': {
+					templateLock: 'contentOnly',
+				},
+			},
+		};
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
+		).toBe( 'contentOnly' );
+	} );
+} );
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index 66749753a9b802..bdf8e3675edff1 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -1,19 +1,124 @@
 /**
- * Helper function that maps attribute definition properties to the
- * ones used by RichText utils like `create, toHTMLString, etc..`.
- *
- * @param {Object} attributeDefinition A block's attribute definition object.
- * @return {Object} The mapped object.
+ * WordPress dependencies
  */
-export function mapRichTextSettings( attributeDefinition ) {
-	const {
-		multiline: multilineTag,
-		__unstableMultilineWrapperTags: multilineWrapperTags,
-		__unstablePreserveWhiteSpace: preserveWhiteSpace,
-	} = attributeDefinition;
+import { parse } from '@wordpress/blocks';
+import { parse as grammarParse } from '@wordpress/block-serialization-default-parser';
+
+/**
+ * Internal dependencies
+ */
+import { selectBlockPatternsKey } from './private-keys';
+import { unlock } from '../lock-unlock';
+import { STORE_NAME } from './constants';
+import { getSectionRootClientId } from './private-selectors';
+
+export const isFiltered = Symbol( 'isFiltered' );
+const parsedPatternCache = new WeakMap();
+const grammarMapCache = new WeakMap();
+
+function parsePattern( pattern ) {
+	const blocks = parse( pattern.content, {
+		__unstableSkipMigrationLogs: true,
+	} );
+	if ( blocks.length === 1 ) {
+		blocks[ 0 ].attributes = {
+			...blocks[ 0 ].attributes,
+			metadata: {
+				...( blocks[ 0 ].attributes.metadata || {} ),
+				categories: pattern.categories,
+				patternName: pattern.name,
+				name: blocks[ 0 ].attributes.metadata?.name || pattern.title,
+			},
+		};
+	}
 	return {
-		multilineTag,
-		multilineWrapperTags,
-		preserveWhiteSpace,
+		...pattern,
+		blocks,
 	};
 }
+
+export function getParsedPattern( pattern ) {
+	let parsedPattern = parsedPatternCache.get( pattern );
+	if ( ! parsedPattern ) {
+		parsedPattern = parsePattern( pattern );
+		parsedPatternCache.set( pattern, parsedPattern );
+	}
+	return parsedPattern;
+}
+
+export function getGrammar( pattern ) {
+	let grammarMap = grammarMapCache.get( pattern );
+	if ( ! grammarMap ) {
+		grammarMap = grammarParse( pattern.content );
+		// Block names are null only at the top level for whitespace.
+		grammarMap = grammarMap.filter( ( block ) => block.blockName !== null );
+		grammarMapCache.set( pattern, grammarMap );
+	}
+	return grammarMap;
+}
+
+export const checkAllowList = ( list, item, defaultResult = null ) => {
+	if ( typeof list === 'boolean' ) {
+		return list;
+	}
+	if ( Array.isArray( list ) ) {
+		// TODO: when there is a canonical way to detect that we are editing a post
+		// the following check should be changed to something like:
+		// if ( list.includes( 'core/post-content' ) && getEditorMode() === 'post-content' && item === null )
+		if ( list.includes( 'core/post-content' ) && item === null ) {
+			return true;
+		}
+		return list.includes( item );
+	}
+	return defaultResult;
+};
+
+export const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
+	if ( typeof allowedBlockTypes === 'boolean' ) {
+		return allowedBlockTypes;
+	}
+
+	const blocksQueue = [ ...blocks ];
+	while ( blocksQueue.length > 0 ) {
+		const block = blocksQueue.shift();
+
+		const isAllowed = checkAllowList(
+			allowedBlockTypes,
+			block.name || block.blockName,
+			true
+		);
+		if ( ! isAllowed ) {
+			return false;
+		}
+
+		block.innerBlocks?.forEach( ( innerBlock ) => {
+			blocksQueue.push( innerBlock );
+		} );
+	}
+
+	return true;
+};
+
+export const getAllPatternsDependants = ( select ) => ( state ) => {
+	return [
+		state.settings.__experimentalBlockPatterns,
+		state.settings.__experimentalUserPatternCategories,
+		state.settings.__experimentalReusableBlocks,
+		state.settings[ selectBlockPatternsKey ]?.( select ),
+		state.blockPatterns,
+		unlock( select( STORE_NAME ) ).getReusableBlocks(),
+	];
+};
+
+export const getInsertBlockTypeDependants =
+	( select ) => ( state, rootClientId ) => {
+		return [
+			state.blockListSettings[ rootClientId ],
+			state.blocks.byClientId.get( rootClientId ),
+			state.settings.allowedBlockTypes,
+			state.settings.templateLock,
+			state.blockEditingModes,
+			select( STORE_NAME ).__unstableGetEditorMode( state ),
+			getSectionRootClientId( state ),
+		];
+	};
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 00737423611582..6b2ebf5cd841fd 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -1,71 +1,65 @@
 @import "./autocompleters/style.scss";
+@import "./components/background-image-control/style.scss";
 @import "./components/block-alignment-control/style.scss";
+@import "./components/block-canvas/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
-@import "./components/block-list/style.scss";
 @import "./components/block-tools/style.scss";
-@import "./components/block-list-appender/style.scss";
 @import "./components/block-lock/style.scss";
 @import "./components/block-breadcrumb/style.scss";
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
-@import "./components/block-content-overlay/style.scss";
 @import "./components/block-draggable/style.scss";
+@import "./components/block-manager/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
-@import "./components/block-parent-selector/style.scss";
 @import "./components/block-patterns-list/style.scss";
+@import "./components/block-patterns-paging/style.scss";
 @import "./components/block-popover/style.scss";
 @import "./components/block-preview/style.scss";
-@import "./components/block-settings-menu/style.scss";
+@import "./components/block-rename/style.scss";
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
 @import "./components/block-types-list/style.scss";
-@import "./components/block-variation-picker/style.scss";
 @import "./components/block-pattern-setup/style.scss";
 @import "./components/block-variation-transforms/style.scss";
 @import "./components/border-radius-control/style.scss";
-@import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
-@import "./components/contrast-checker/style.scss";
-@import "./components/default-block-appender/style.scss";
 @import "./components/date-format-picker/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/font-family/style.scss";
+@import "./components/global-styles/style.scss";
+@import "./components/grid/style.scss";
+@import "./components/height-control/style.scss";
+@import "./components/iframe/style.scss";
 @import "./components/image-size-control/style.scss";
-@import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
+@import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
-@import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
-@import "./components/plain-text/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-decoration-control/style.scss";
-@import "./components/text-transform-control/style.scss";
+@import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
-@import "./components/warning/style.scss";
-@import "./hooks/anchor.scss";
-@import "./hooks/layout.scss";
+@import "./hooks/block-hooks.scss";
+@import "./hooks/block-bindings.scss";
 @import "./hooks/border.scss";
+@import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
+@import "./hooks/layout.scss";
+@import "./hooks/spacing.scss";
 @import "./hooks/typography.scss";
-@import "./hooks/color.scss";
-@import "./hooks/padding.scss";
 
 @import "./components/block-toolbar/style.scss";
 @import "./components/inserter/style.scss";
-@import "./components/preview-options/style.scss";
 @import "./components/spacing-sizes-control/style.scss";
 
-// Experiments.
-@import "./components/off-canvas-editor/style.scss";
-
 @include wordpress-admin-schemes();
diff --git a/packages/block-editor/src/utils/block-bindings.js b/packages/block-editor/src/utils/block-bindings.js
new file mode 100644
index 00000000000000..dcf80d985473b2
--- /dev/null
+++ b/packages/block-editor/src/utils/block-bindings.js
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit';
+
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+/**
+ * Contains utils to update the block `bindings` metadata.
+ *
+ * @typedef {Object} WPBlockBindingsUtils
+ *
+ * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.
+ * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
+ */
+
+/**
+ * Retrieves the existing utils needed to update the block `bindings` metadata.
+ * They can be used to create, modify, or remove connections from the existing block attributes.
+ *
+ * It contains the following utils:
+ * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+ * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
+ * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
+ *
+ * @example
+ * ```js
+ * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+ * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+ *
+ * // Update url and alt attributes.
+ * updateBlockBindings( {
+ *     url: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'url_custom_field',
+ *         },
+ *     },
+ *     alt: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'text_custom_field',
+ *         },
+ *     },
+ * } );
+ *
+ * // Remove binding from url attribute.
+ * updateBlockBindings( { url: undefined } );
+ *
+ * // Remove bindings from all attributes.
+ * removeAllBlockBindings();
+ * ```
+ */
+export function useBlockBindingsUtils( clientId ) {
+	const { clientId: contextClientId } = useBlockEditContext();
+	const blockClientId = clientId || contextClientId;
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
+
+	/**
+	 * Updates the value of the bindings connected to block attributes.
+	 * It removes the binding when the new value is `undefined`.
+	 *
+	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
+	 * @param {string} bindings.source The source name to connect to.
+	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { updateBlockBindings } = useBlockBindingsUtils();
+	 * updateBlockBindings( {
+	 *     url: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'url_custom_field',
+	 *         },
+	 * 	   },
+	 *     alt: {
+	 *         source: 'core/post-meta',
+	 *         args: {
+	 *             key: 'text_custom_field',
+	 *         },
+	 * 	   }
+	 * } );
+	 * ```
+	 */
+	const updateBlockBindings = ( bindings ) => {
+		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		const newBindings = { ...currentBindings };
+
+		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
+			if ( ! binding && newBindings[ attribute ] ) {
+				delete newBindings[ attribute ];
+				return;
+			}
+			newBindings[ attribute ] = binding;
+		} );
+
+		const newMetadata = {
+			...metadata,
+			bindings: newBindings,
+		};
+
+		if ( isObjectEmpty( newMetadata.bindings ) ) {
+			delete newMetadata.bindings;
+		}
+
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
+		} );
+	};
+
+	/**
+	 * Removes the bindings property of the `metadata` attribute.
+	 *
+	 * @example
+	 * ```js
+	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+	 *
+	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
+	 * removeAllBlockBindings();
+	 * ```
+	 */
+	const removeAllBlockBindings = () => {
+		const { metadata: { bindings, ...metadata } = {} } =
+			getBlockAttributes( blockClientId );
+		updateBlockAttributes( blockClientId, {
+			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
+		} );
+	};
+
+	return { updateBlockBindings, removeAllBlockBindings };
+}
diff --git a/packages/block-editor/src/utils/block-variation-transforms.js b/packages/block-editor/src/utils/block-variation-transforms.js
deleted file mode 100644
index 7b1dd2068f84a3..00000000000000
--- a/packages/block-editor/src/utils/block-variation-transforms.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
-
-function matchesAttributes( blockAttributes, variation ) {
-	return Object.entries( variation ).every( ( [ key, value ] ) => {
-		if (
-			typeof value === 'object' &&
-			typeof blockAttributes[ key ] === 'object'
-		) {
-			return matchesAttributes( blockAttributes[ key ], value );
-		}
-		return blockAttributes[ key ] === value;
-	} );
-}
-
-/**
- * Matches the provided block variations with a block's attributes. If no match
- * or more than one matches are found it returns `undefined`. If a single match is
- * found it returns it.
- *
- * This is a simple implementation for now as it takes into account only the attributes
- * of a block variation and not `InnerBlocks`.
- *
- * @param {Object}             blockAttributes - The block attributes to try to find a match.
- * @param {WPBlockVariation[]} variations      - A list of block variations to test for a match.
- * @return {?WPBlockVariation} - If a match is found returns it. If not or more than one matches are found returns `undefined`.
- */
-export const __experimentalGetMatchingVariation = (
-	blockAttributes,
-	variations
-) => {
-	if ( ! variations || ! blockAttributes ) return;
-	const matches = variations.filter( ( { attributes } ) => {
-		if ( ! attributes || ! Object.keys( attributes ).length ) return false;
-		return matchesAttributes( blockAttributes, attributes );
-	} );
-	if ( matches.length !== 1 ) return;
-	return matches[ 0 ];
-};
diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js
index 6af35aff730155..6d55f2468d24b6 100644
--- a/packages/block-editor/src/utils/dom.js
+++ b/packages/block-editor/src/utils/dom.js
@@ -57,3 +57,145 @@ export function getBlockClientId( node ) {
 
 	return blockNode.id.slice( 'block-'.length );
 }
+
+/**
+ * Calculates the union of two rectangles.
+ *
+ * @param {DOMRect} rect1 First rectangle.
+ * @param {DOMRect} rect2 Second rectangle.
+ * @return {DOMRect} Union of the two rectangles.
+ */
+export function rectUnion( rect1, rect2 ) {
+	const left = Math.min( rect1.left, rect2.left );
+	const right = Math.max( rect1.right, rect2.right );
+	const bottom = Math.max( rect1.bottom, rect2.bottom );
+	const top = Math.min( rect1.top, rect2.top );
+
+	return new window.DOMRectReadOnly( left, top, right - left, bottom - top );
+}
+
+/**
+ * Returns whether an element is visible.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} Whether the element is visible.
+ */
+function isElementVisible( element ) {
+	const viewport = element.ownerDocument.defaultView;
+	if ( ! viewport ) {
+		return false;
+	}
+
+	// Check for <VisuallyHidden> component.
+	if ( element.classList.contains( 'components-visually-hidden' ) ) {
+		return false;
+	}
+
+	const bounds = element.getBoundingClientRect();
+	if ( bounds.width === 0 || bounds.height === 0 ) {
+		return false;
+	}
+
+	// Older browsers, e.g. Safari < 17.4 may not support the `checkVisibility` method.
+	if ( element.checkVisibility ) {
+		return element.checkVisibility?.( {
+			opacityProperty: true,
+			contentVisibilityAuto: true,
+			visibilityProperty: true,
+		} );
+	}
+
+	const style = viewport.getComputedStyle( element );
+
+	if (
+		style.display === 'none' ||
+		style.visibility === 'hidden' ||
+		style.opacity === '0'
+	) {
+		return false;
+	}
+
+	return true;
+}
+
+/**
+ * Checks if the element is scrollable.
+ *
+ * @param {Element} element Element.
+ * @return {boolean} True if the element is scrollable.
+ */
+function isScrollable( element ) {
+	const style = window.getComputedStyle( element );
+	return (
+		style.overflowX === 'auto' ||
+		style.overflowX === 'scroll' ||
+		style.overflowY === 'auto' ||
+		style.overflowY === 'scroll'
+	);
+}
+
+export const WITH_OVERFLOW_ELEMENT_BLOCKS = [ 'core/navigation' ];
+/**
+ * Returns the bounding rectangle of an element, with special handling for blocks
+ * that have visible overflowing children (defined in WITH_OVERFLOW_ELEMENT_BLOCKS).
+ *
+ * For blocks like Navigation that can have overflowing elements (e.g. submenus),
+ * this function calculates the combined bounds of both the parent and its visible
+ * children. The returned rect may extend beyond the viewport.
+ * The returned rect represents the full extent of the element and its visible
+ * children, which may extend beyond the viewport.
+ *
+ * @param {Element} element Element.
+ * @return {DOMRect} Bounding client rect of the element and its visible children.
+ */
+export function getElementBounds( element ) {
+	const viewport = element.ownerDocument.defaultView;
+
+	if ( ! viewport ) {
+		return new window.DOMRectReadOnly();
+	}
+
+	let bounds = element.getBoundingClientRect();
+	const dataType = element.getAttribute( 'data-type' );
+
+	/*
+	 * For blocks with overflowing elements (like Navigation), include the bounds
+	 * of visible children that extend beyond the parent container.
+	 */
+	if ( dataType && WITH_OVERFLOW_ELEMENT_BLOCKS.includes( dataType ) ) {
+		const stack = [ element ];
+		let currentElement;
+
+		while ( ( currentElement = stack.pop() ) ) {
+			// Children won’t affect bounds unless the element is not scrollable.
+			if ( ! isScrollable( currentElement ) ) {
+				for ( const child of currentElement.children ) {
+					if ( isElementVisible( child ) ) {
+						const childBounds = child.getBoundingClientRect();
+						bounds = rectUnion( bounds, childBounds );
+						stack.push( child );
+					}
+				}
+			}
+		}
+	}
+
+	/*
+	 * Take into account the outer horizontal limits of the container in which
+	 * an element is supposed to be "visible". For example, if an element is
+	 * positioned -10px to the left of the window x value (0), this function
+	 * discounts the negative overhang because it's not visible and therefore
+	 * not to be counted in the visibility calculations. Top and bottom values
+	 * are not accounted for to accommodate vertical scroll.
+	 */
+	const left = Math.max( bounds.left, 0 );
+	const right = Math.min( bounds.right, viewport.innerWidth );
+	bounds = new window.DOMRectReadOnly(
+		left,
+		bounds.top,
+		right - left,
+		bounds.height
+	);
+
+	return bounds;
+}
diff --git a/packages/block-editor/src/utils/format-font-style.js b/packages/block-editor/src/utils/format-font-style.js
new file mode 100644
index 00000000000000..5db52f8a5808f5
--- /dev/null
+++ b/packages/block-editor/src/utils/format-font-style.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font styles to human readable names.
+ *
+ * @param {string} fontStyle font style string
+ * @return {Object} new object with formatted font style
+ */
+export function formatFontStyle( fontStyle ) {
+	if ( ! fontStyle ) {
+		return {};
+	}
+
+	if ( typeof fontStyle === 'object' ) {
+		return fontStyle;
+	}
+
+	let name;
+
+	switch ( fontStyle ) {
+		case 'normal':
+			name = _x( 'Regular', 'font style' );
+			break;
+		case 'italic':
+			name = _x( 'Italic', 'font style' );
+			break;
+		case 'oblique':
+			name = _x( 'Oblique', 'font style' );
+			break;
+
+		default:
+			name = fontStyle;
+			break;
+	}
+
+	return { name, value: fontStyle };
+}
diff --git a/packages/block-editor/src/utils/format-font-weight.js b/packages/block-editor/src/utils/format-font-weight.js
new file mode 100644
index 00000000000000..8fc1c9e479a23d
--- /dev/null
+++ b/packages/block-editor/src/utils/format-font-weight.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font weights to human readable names.
+ *
+ * @param {string} fontWeight font weight string
+ * @return {Object} new object with formatted font weight
+ */
+export function formatFontWeight( fontWeight ) {
+	if ( ! fontWeight ) {
+		return {};
+	}
+
+	if ( typeof fontWeight === 'object' ) {
+		return fontWeight;
+	}
+
+	let name;
+
+	switch ( fontWeight ) {
+		case 'normal':
+		case '400':
+			name = _x( 'Regular', 'font weight' );
+			break;
+		case 'bold':
+		case '700':
+			name = _x( 'Bold', 'font weight' );
+			break;
+		case '100':
+			name = _x( 'Thin', 'font weight' );
+			break;
+		case '200':
+			name = _x( 'Extra Light', 'font weight' );
+			break;
+		case '300':
+			name = _x( 'Light', 'font weight' );
+			break;
+		case '500':
+			name = _x( 'Medium', 'font weight' );
+			break;
+		case '600':
+			name = _x( 'Semi Bold', 'font weight' );
+			break;
+		case '800':
+			name = _x( 'Extra Bold', 'font weight' );
+			break;
+		case '900':
+			name = _x( 'Black', 'font weight' );
+			break;
+		case '1000':
+			name = _x( 'Extra Black', 'font weight' );
+			break;
+
+		default:
+			name = fontWeight;
+			break;
+	}
+
+	return { name, value: fontWeight };
+}
diff --git a/packages/block-editor/src/utils/get-editor-region.js b/packages/block-editor/src/utils/get-editor-region.js
new file mode 100644
index 00000000000000..16561b26b88aea
--- /dev/null
+++ b/packages/block-editor/src/utils/get-editor-region.js
@@ -0,0 +1,31 @@
+/**
+ * Gets the editor region for a given editor canvas element or
+ * returns the passed element if no region is found
+ *
+ * @param { Object } editor The editor canvas element.
+ * @return { Object } The editor region or given editor element
+ */
+export default function getEditorRegion( editor ) {
+	if ( ! editor ) {
+		return null;
+	}
+
+	// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure
+	// we're focusing the region that contains this editor.
+	const editorCanvas =
+		Array.from(
+			document.querySelectorAll( 'iframe[name="editor-canvas"]' ).values()
+		).find( ( iframe ) => {
+			// Find the iframe that contains our contentRef
+			const iframeDocument =
+				iframe.contentDocument || iframe.contentWindow.document;
+
+			return iframeDocument === editor.ownerDocument;
+		} ) ?? editor;
+
+	// The region is provided by the editor, not the block-editor.
+	// We should send focus to the region if one is available to reuse the
+	// same interface for navigating landmarks. If no region is available,
+	// use the canvas instead.
+	return editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas;
+}
diff --git a/packages/block-editor/src/utils/get-font-styles-and-weights.js b/packages/block-editor/src/utils/get-font-styles-and-weights.js
new file mode 100644
index 00000000000000..c832582fa524d5
--- /dev/null
+++ b/packages/block-editor/src/utils/get-font-styles-and-weights.js
@@ -0,0 +1,199 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { formatFontStyle } from './format-font-style';
+import { formatFontWeight } from './format-font-weight';
+
+const FONT_STYLES = [
+	{
+		name: _x( 'Regular', 'font style' ),
+		value: 'normal',
+	},
+	{
+		name: _x( 'Italic', 'font style' ),
+		value: 'italic',
+	},
+];
+
+const FONT_WEIGHTS = [
+	{
+		name: _x( 'Thin', 'font weight' ),
+		value: '100',
+	},
+	{
+		name: _x( 'Extra Light', 'font weight' ),
+		value: '200',
+	},
+	{
+		name: _x( 'Light', 'font weight' ),
+		value: '300',
+	},
+	{
+		name: _x( 'Regular', 'font weight' ),
+		value: '400',
+	},
+	{
+		name: _x( 'Medium', 'font weight' ),
+		value: '500',
+	},
+	{
+		name: _x( 'Semi Bold', 'font weight' ),
+		value: '600',
+	},
+	{
+		name: _x( 'Bold', 'font weight' ),
+		value: '700',
+	},
+	{
+		name: _x( 'Extra Bold', 'font weight' ),
+		value: '800',
+	},
+	{
+		name: _x( 'Black', 'font weight' ),
+		value: '900',
+	},
+	{
+		name: _x( 'Extra Black', 'font weight' ),
+		value: '1000',
+	},
+];
+
+/**
+ * Builds a list of font style and weight options based on font family faces.
+ * Defaults to the standard font styles and weights if no font family faces are provided.
+ *
+ * @param {Array} fontFamilyFaces font family faces array
+ * @return {Object} new object with combined and separated font style and weight properties
+ */
+export function getFontStylesAndWeights( fontFamilyFaces ) {
+	let fontStyles = [];
+	let fontWeights = [];
+	const combinedStyleAndWeightOptions = [];
+	const isSystemFont = ! fontFamilyFaces || fontFamilyFaces?.length === 0;
+	let isVariableFont = false;
+
+	fontFamilyFaces?.forEach( ( face ) => {
+		// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
+		if (
+			'string' === typeof face.fontWeight &&
+			/\s/.test( face.fontWeight.trim() )
+		) {
+			isVariableFont = true;
+
+			// Find font weight start and end values.
+			let [ startValue, endValue ] = face.fontWeight.split( ' ' );
+			startValue = parseInt( startValue.slice( 0, 1 ) );
+			if ( endValue === '1000' ) {
+				endValue = 10;
+			} else {
+				endValue = parseInt( endValue.slice( 0, 1 ) );
+			}
+
+			// Create font weight options for available variable weights.
+			for ( let i = startValue; i <= endValue; i++ ) {
+				const fontWeightValue = `${ i.toString() }00`;
+				if (
+					! fontWeights.some(
+						( weight ) => weight.value === fontWeightValue
+					)
+				) {
+					fontWeights.push( formatFontWeight( fontWeightValue ) );
+				}
+			}
+		}
+
+		// Format font style and weight values.
+		const fontWeight = formatFontWeight(
+			'number' === typeof face.fontWeight
+				? face.fontWeight.toString()
+				: face.fontWeight
+		);
+		const fontStyle = formatFontStyle( face.fontStyle );
+
+		// Create font style and font weight lists without duplicates.
+		if ( fontStyle && Object.keys( fontStyle ).length ) {
+			if (
+				! fontStyles.some(
+					( style ) => style.value === fontStyle.value
+				)
+			) {
+				fontStyles.push( fontStyle );
+			}
+		}
+
+		if ( fontWeight && Object.keys( fontWeight ).length ) {
+			if (
+				! fontWeights.some(
+					( weight ) => weight.value === fontWeight.value
+				)
+			) {
+				if ( ! isVariableFont ) {
+					fontWeights.push( fontWeight );
+				}
+			}
+		}
+	} );
+
+	// If there is no font weight of 600 or above, then include faux bold as an option.
+	if ( ! fontWeights.some( ( weight ) => weight.value >= '600' ) ) {
+		fontWeights.push( {
+			name: _x( 'Bold', 'font weight' ),
+			value: '700',
+		} );
+	}
+
+	// If there is no italic font style, then include faux italic as an option.
+	if ( ! fontStyles.some( ( style ) => style.value === 'italic' ) ) {
+		fontStyles.push( {
+			name: _x( 'Italic', 'font style' ),
+			value: 'italic',
+		} );
+	}
+
+	// Use default font styles and weights for system fonts.
+	if ( isSystemFont ) {
+		fontStyles = FONT_STYLES;
+		fontWeights = FONT_WEIGHTS;
+	}
+
+	// Use default styles and weights if there are no available styles or weights from the provided font faces.
+	fontStyles = fontStyles.length === 0 ? FONT_STYLES : fontStyles;
+	fontWeights = fontWeights.length === 0 ? FONT_WEIGHTS : fontWeights;
+
+	// Generate combined font style and weight options for available fonts.
+	fontStyles.forEach( ( { name: styleName, value: styleValue } ) => {
+		fontWeights.forEach( ( { name: weightName, value: weightValue } ) => {
+			const optionName =
+				styleValue === 'normal'
+					? weightName
+					: sprintf(
+							/* translators: 1: Font weight name. 2: Font style name. */
+							_x( '%1$s %2$s', 'font' ),
+							weightName,
+							styleName
+					  );
+
+			combinedStyleAndWeightOptions.push( {
+				key: `${ styleValue }-${ weightValue }`,
+				name: optionName,
+				style: {
+					fontStyle: styleValue,
+					fontWeight: weightValue,
+				},
+			} );
+		} );
+	} );
+
+	return {
+		fontStyles,
+		fontWeights,
+		combinedStyleAndWeightOptions,
+		isSystemFont,
+		isVariableFont,
+	};
+}
diff --git a/packages/block-editor/src/utils/get-px-from-css-unit.js b/packages/block-editor/src/utils/get-px-from-css-unit.js
new file mode 100644
index 00000000000000..57e5e9827def85
--- /dev/null
+++ b/packages/block-editor/src/utils/get-px-from-css-unit.js
@@ -0,0 +1,8 @@
+/**
+ * This function was accidentally exposed for mobile/native usage.
+ *
+ * @deprecated
+ *
+ * @return {string} Empty string.
+ */
+export default () => '';
diff --git a/packages/block-editor/src/utils/index.js b/packages/block-editor/src/utils/index.js
index af45111759699c..1b5aa769a13b28 100644
--- a/packages/block-editor/src/utils/index.js
+++ b/packages/block-editor/src/utils/index.js
@@ -1,3 +1,3 @@
 export { default as transformStyles } from './transform-styles';
-export * from './block-variation-transforms';
-export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
+export { default as getPxFromCssUnit } from './get-px-from-css-unit';
+export { useBlockBindingsUtils } from './block-bindings';
diff --git a/packages/block-editor/src/utils/math.js b/packages/block-editor/src/utils/math.js
index 128972e8a400e1..5d8ed97ffefb29 100644
--- a/packages/block-editor/src/utils/math.js
+++ b/packages/block-editor/src/utils/math.js
@@ -106,3 +106,15 @@ export function isPointContainedByRect( point, rect ) {
 		rect.bottom >= point.y
 	);
 }
+
+/**
+ * Is the point within the top and bottom boundaries of the rectangle.
+ *
+ * @param {WPPoint} point The point.
+ * @param {DOMRect} rect  The rectangle.
+ *
+ * @return {boolean} True if the point is within top and bottom of rectangle, false otherwise.
+ */
+export function isPointWithinTopAndBottomBoundariesOfRect( point, rect ) {
+	return rect.top <= point.y && rect.bottom >= point.y;
+}
diff --git a/packages/block-editor/src/utils/object.js b/packages/block-editor/src/utils/object.js
new file mode 100644
index 00000000000000..c78fe0e656dfef
--- /dev/null
+++ b/packages/block-editor/src/utils/object.js
@@ -0,0 +1,67 @@
+/**
+ * Immutably sets a value inside an object. Like `lodash#set`, but returning a
+ * new object. Treats nullish initial values as empty objects. Clones any
+ * nested objects. Supports arrays, too.
+ *
+ * @param {Object}              object Object to set a value in.
+ * @param {number|string|Array} path   Path in the object to modify.
+ * @param {*}                   value  New value to set.
+ * @return {Object} Cloned object with the new value set.
+ */
+export function setImmutably( object, path, value ) {
+	// Normalize path
+	path = Array.isArray( path ) ? [ ...path ] : [ path ];
+
+	// Shallowly clone the base of the object
+	object = Array.isArray( object ) ? [ ...object ] : { ...object };
+
+	const leaf = path.pop();
+
+	// Traverse object from root to leaf, shallowly cloning at each level
+	let prev = object;
+	for ( const key of path ) {
+		const lvl = prev[ key ];
+		prev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };
+	}
+
+	prev[ leaf ] = value;
+
+	return object;
+}
+
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ * You can also specify a default value in case the result is nullish.
+ *
+ * @param {Object}       object       Input object.
+ * @param {string|Array} path         Path to the object property.
+ * @param {*}            defaultValue Default value if the value at the specified path is nullish.
+ * @return {*} Value of the object property at the specified path.
+ */
+export const getValueFromObjectPath = ( object, path, defaultValue ) => {
+	const arrayPath = Array.isArray( path ) ? path : path.split( '.' );
+	let value = object;
+	arrayPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value ?? defaultValue;
+};
+
+/**
+ * Helper util to filter out objects with duplicate values for a given property.
+ *
+ * @param {Object[]} array    Array of objects to filter.
+ * @param {string}   property Property to filter unique values by.
+ *
+ * @return {Object[]} Array of objects with unique values for the specified property.
+ */
+export function uniqByProperty( array, property ) {
+	const seen = new Set();
+	return array.filter( ( item ) => {
+		const value = item[ property ];
+		return seen.has( value ) ? false : seen.add( value );
+	} );
+}
diff --git a/packages/block-editor/src/utils/order-inserter-block-items.js b/packages/block-editor/src/utils/order-inserter-block-items.js
new file mode 100644
index 00000000000000..aa2f1acd48c280
--- /dev/null
+++ b/packages/block-editor/src/utils/order-inserter-block-items.js
@@ -0,0 +1,30 @@
+/** @typedef {import('../store/selectors').WPEditorInserterItem} WPEditorInserterItem */
+
+/**
+ * Helper function to order inserter block items according to a provided array of prioritized blocks.
+ *
+ * @param {WPEditorInserterItem[]} items    The array of editor inserter block items to be sorted.
+ * @param {string[]}               priority The array of block names to be prioritized.
+ * @return {WPEditorInserterItem[]} The sorted array of editor inserter block items.
+ */
+export const orderInserterBlockItems = ( items, priority ) => {
+	if ( ! priority ) {
+		return items;
+	}
+
+	items.sort( ( { id: aName }, { id: bName } ) => {
+		// Sort block items according to `priority`.
+		let aIndex = priority.indexOf( aName );
+		let bIndex = priority.indexOf( bName );
+		// All other block items should come after that.
+		if ( aIndex < 0 ) {
+			aIndex = priority.length;
+		}
+		if ( bIndex < 0 ) {
+			bIndex = priority.length;
+		}
+		return aIndex - bIndex;
+	} );
+
+	return items;
+};
diff --git a/packages/block-editor/src/utils/parse-css-unit-to-px.js b/packages/block-editor/src/utils/parse-css-unit-to-px.js
deleted file mode 100644
index 134e19b06c839c..00000000000000
--- a/packages/block-editor/src/utils/parse-css-unit-to-px.js
+++ /dev/null
@@ -1,272 +0,0 @@
-/**
- * Converts string to object { value, unit }.
- *
- * @param {string} cssUnit
- * @return {Object} parsedUnit
- */
-function parseUnit( cssUnit ) {
-	const match = cssUnit
-		?.trim()
-		.match(
-			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
-		);
-	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
-		return { value: parseFloat( cssUnit ), unit: 'px' };
-	}
-	return match
-		? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }
-		: { value: cssUnit, unit: undefined };
-}
-/**
- * Evaluate a math expression.
- *
- * @param {string} expression
- * @return {number} evaluated expression.
- */
-function calculate( expression ) {
-	return Function( `'use strict'; return (${ expression })` )();
-}
-
-/**
- * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
- *
- * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
- * @param {Object} options
- * @return {string} unit containing the unit in PX.
- */
-function getFunctionUnitValue( functionUnitValue, options ) {
-	const functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );
-
-	const units = functionUnit
-		.slice( 1 )
-		.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )
-		.filter( Boolean );
-
-	switch ( functionUnit[ 0 ] ) {
-		case 'min':
-			return Math.min( ...units ) + 'px';
-		case 'max':
-			return Math.max( ...units ) + 'px';
-		case 'clamp':
-			if ( units.length !== 3 ) {
-				return null;
-			}
-			if ( units[ 1 ] < units[ 0 ] ) {
-				return units[ 0 ] + 'px';
-			}
-			if ( units[ 1 ] > units[ 2 ] ) {
-				return units[ 2 ] + 'px';
-			}
-			return units[ 1 ] + 'px';
-		case 'calc':
-			return units[ 0 ] + 'px';
-	}
-}
-
-/**
- * Take a css function such as min, max, calc, clamp and returns parsedUnit
- *
- * How this works for the nested function is that it first replaces the inner function call.
- * Then it tackles the outer onces.
- * So for example: min( max(25px, 35px), 40px )
- * in the first pass we would replace max(25px, 35px) with 35px.
- * then we would try to evaluate min( 35px, 40px )
- * and then finally return 35px.
- *
- * @param {string} cssUnit
- * @return {Object} parsedUnit object.
- */
-function parseUnitFunction( cssUnit ) {
-	while ( true ) {
-		const currentCssUnit = cssUnit;
-		const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
-		const matches = regExp.exec( cssUnit ) || [];
-		if ( matches[ 0 ] ) {
-			const functionUnitValue = getFunctionUnitValue( matches[ 0 ] );
-			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
-		}
-
-		// If the unit hasn't been modified or we have a single value break free.
-		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
-			break;
-		}
-	}
-
-	return parseUnit( cssUnit );
-}
-/**
- * Return true if we think this is a math expression.
- *
- * @param {string} cssUnit the cssUnit value being evaluted.
- * @return {boolean} Whether the cssUnit is a math expression.
- */
-function isMathExpression( cssUnit ) {
-	for ( let i = 0; i < cssUnit.length; i++ ) {
-		if ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {
-			return true;
-		}
-	}
-	return false;
-}
-/**
- * Evaluates the math expression and return a px value.
- *
- * @param {string} cssUnit the cssUnit value being evaluted.
- * @return {string} return a converfted value to px.
- */
-function evalMathExpression( cssUnit ) {
-	let errorFound = false;
-	// Convert every part of the expression to px values.
-	const cssUnitsBits = cssUnit.split( /[+-/*/]/g ).filter( Boolean );
-	for ( const unit of cssUnitsBits ) {
-		// Standardize the unit to px and extract the value.
-		const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
-		if ( ! parseFloat( parsedUnit.value ) ) {
-			errorFound = true;
-			// End early since we are dealing with a null value.
-			break;
-		}
-		cssUnit = cssUnit.replace( unit, parsedUnit.value );
-	}
-
-	return errorFound ? null : calculate( cssUnit ).toFixed( 0 ) + 'px';
-}
-
-/**
- * Convert a parsedUnit object to px value.
- *
- * @param {Object} parsedUnit
- * @param {Object} options
- * @return {string} or {null} returns the converted with in a px value format.
- */
-function convertParsedUnitToPx( parsedUnit, options ) {
-	const PIXELS_PER_INCH = 96;
-	const ONE_PERCENT = 0.01;
-
-	const defaultProperties = {
-		fontSize: 16,
-		lineHeight: 16,
-		width: 375,
-		height: 812,
-		type: 'font',
-	};
-
-	const setOptions = Object.assign( {}, defaultProperties, options );
-
-	const relativeUnits = {
-		em: setOptions.fontSize,
-		rem: setOptions.fontSize,
-		vh: setOptions.height * ONE_PERCENT,
-		vw: setOptions.width * ONE_PERCENT,
-		vmin:
-			( setOptions.width < setOptions.height
-				? setOptions.width
-				: setOptions.height ) * ONE_PERCENT,
-		vmax:
-			( setOptions.width > setOptions.height
-				? setOptions.width
-				: setOptions.height ) * ONE_PERCENT,
-		'%':
-			( setOptions.type === 'font'
-				? setOptions.fontSize
-				: setOptions.width ) * ONE_PERCENT,
-		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
-		ex: 7.15625, // X-height of the element's font. Approximate.
-		lh: setOptions.lineHeight,
-	};
-
-	const absoluteUnits = {
-		in: PIXELS_PER_INCH,
-		cm: PIXELS_PER_INCH / 2.54,
-		mm: PIXELS_PER_INCH / 25.4,
-		pt: PIXELS_PER_INCH / 72,
-		pc: PIXELS_PER_INCH / 6,
-		px: 1,
-		Q: PIXELS_PER_INCH / 2.54 / 40,
-	};
-
-	if ( relativeUnits[ parsedUnit.unit ] ) {
-		return (
-			( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
-				0
-			) + 'px'
-		);
-	}
-
-	if ( absoluteUnits[ parsedUnit.unit ] ) {
-		return (
-			( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
-				0
-			) + 'px'
-		);
-	}
-
-	return null;
-}
-
-/**
- * Returns the px value of a cssUnit.
- *
- * @param {string} cssUnit
- * @param {Object} options
- * @return {string} returns the cssUnit value in a simple px format.
- */
-export function getPxFromCssUnit( cssUnit, options = {} ) {
-	if ( Number.isFinite( cssUnit ) ) {
-		return cssUnit.toFixed( 0 ) + 'px';
-	}
-	if ( cssUnit === undefined ) {
-		return null;
-	}
-	let parsedUnit = parseUnit( cssUnit );
-
-	if ( ! parsedUnit.unit ) {
-		parsedUnit = parseUnitFunction( cssUnit );
-	}
-
-	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
-		return evalMathExpression( cssUnit );
-	}
-
-	return convertParsedUnitToPx( parsedUnit, options );
-}
-
-// Use simple cache.
-const cache = {};
-/**
- * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
- *
- * @param {string} cssUnit
- * @param {Object} options
- * @return {string} returns the cssUnit value in a simple px format.
- */
-function memoizedGetPxFromCssUnit( cssUnit, options = {} ) {
-	const hash = cssUnit + hashOptions( options );
-
-	if ( ! cache[ hash ] ) {
-		cache[ hash ] = getPxFromCssUnit( cssUnit, options );
-	}
-	return cache[ hash ];
-}
-
-function hashOptions( options ) {
-	let hash = '';
-	if ( options.hasOwnProperty( 'fontSize' ) ) {
-		hash = ':' + options.width;
-	}
-	if ( options.hasOwnProperty( 'lineHeight' ) ) {
-		hash = ':' + options.lineHeight;
-	}
-	if ( options.hasOwnProperty( 'width' ) ) {
-		hash = ':' + options.width;
-	}
-	if ( options.hasOwnProperty( 'height' ) ) {
-		hash = ':' + options.height;
-	}
-	if ( options.hasOwnProperty( 'type' ) ) {
-		hash = ':' + options.type;
-	}
-	return hash;
-}
-
-export default memoizedGetPxFromCssUnit;
diff --git a/packages/block-editor/src/utils/pasting.js b/packages/block-editor/src/utils/pasting.js
index 366b79a3294229..2e97849904c68b 100644
--- a/packages/block-editor/src/utils/pasting.js
+++ b/packages/block-editor/src/utils/pasting.js
@@ -1,45 +1,80 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
+/**
+ * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
+ * comments and any preceding and trailing content.
+ *
+ * @param {string} html the html to be normalized
+ * @return {string} the normalized html
+ */
+function removeWindowsFragments( html ) {
+	const startStr = '<!--StartFragment-->';
+	const startIdx = html.indexOf( startStr );
+	if ( startIdx > -1 ) {
+		html = html.substring( startIdx + startStr.length );
+	} else {
+		// No point looking for EndFragment
+		return html;
+	}
+
+	const endStr = '<!--EndFragment-->';
+	const endIdx = html.indexOf( endStr );
+	if ( endIdx > -1 ) {
+		html = html.substring( 0, endIdx );
+	}
+
+	return html;
+}
+
+/**
+ * Removes the charset meta tag inserted by Chromium.
+ * See:
+ * - https://github.com/WordPress/gutenberg/issues/33585
+ * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
+ *
+ * @param {string} html the html to be stripped of the meta tag.
+ * @return {string} the cleaned html
+ */
+function removeCharsetMetaTag( html ) {
+	const metaTag = `<meta charset='utf-8'>`;
+
+	if ( html.startsWith( metaTag ) ) {
+		return html.slice( metaTag.length );
+	}
+
+	return html;
+}
+
 export function getPasteEventData( { clipboardData } ) {
 	let plainText = '';
 	let html = '';
 
-	// IE11 only supports `Text` as an argument for `getData` and will
-	// otherwise throw an invalid argument error, so we try the standard
-	// arguments first, then fallback to `Text` if they fail.
 	try {
 		plainText = clipboardData.getData( 'text/plain' );
 		html = clipboardData.getData( 'text/html' );
-	} catch ( error1 ) {
-		try {
-			html = clipboardData.getData( 'Text' );
-		} catch ( error2 ) {
-			// Some browsers like UC Browser paste plain text by default and
-			// don't support clipboardData at all, so allow default
-			// behaviour.
-			return;
-		}
+	} catch ( error ) {
+		// Some browsers like UC Browser paste plain text by default and
+		// don't support clipboardData at all, so allow default
+		// behaviour.
+		return;
 	}
 
-	const files = getFilesFromDataTransfer( clipboardData ).filter(
-		( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type )
-	);
+	// Remove Windows-specific metadata appended within copied HTML text.
+	html = removeWindowsFragments( html );
 
-	if (
-		files.length &&
-		! shouldDismissPastedFiles( files, html, plainText )
-	) {
-		html = files
-			.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
-			.join( '' );
-		plainText = '';
+	// Strip meta tag.
+	html = removeCharsetMetaTag( html );
+
+	const files = getFilesFromDataTransfer( clipboardData );
+
+	if ( files.length && ! shouldDismissPastedFiles( files, html ) ) {
+		return { files };
 	}
 
-	return { html, plainText };
+	return { html, plainText, files: [] };
 }
 
 /**
@@ -70,7 +105,9 @@ export function shouldDismissPastedFiles( files, html /*, plainText */ ) {
 		// other elements found, like <figure>, but we assume that the user's
 		// intention is to paste the actual image file.
 		const IMAGE_TAG = /<\s*img\b/gi;
-		if ( html.match( IMAGE_TAG )?.length !== 1 ) return true;
+		if ( html.match( IMAGE_TAG )?.length !== 1 ) {
+			return true;
+		}
 
 		// Even when there is exactly one <img> tag in the HTML payload, we
 		// choose to weed out local images, i.e. those whose source starts with
@@ -79,7 +116,9 @@ export function shouldDismissPastedFiles( files, html /*, plainText */ ) {
 		// text and exactly one image, and pasting that content using Google
 		// Chrome.
 		const IMG_WITH_LOCAL_SRC = /<\s*img\b[^>]*\bsrc="file:\/\//i;
-		if ( html.match( IMG_WITH_LOCAL_SRC ) ) return true;
+		if ( html.match( IMG_WITH_LOCAL_SRC ) ) {
+			return true;
+		}
 	}
 
 	return false;
diff --git a/packages/block-editor/src/utils/pre-parse-patterns.js b/packages/block-editor/src/utils/pre-parse-patterns.js
deleted file mode 100644
index c18215ee8e63f9..00000000000000
--- a/packages/block-editor/src/utils/pre-parse-patterns.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, select } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-
-const requestIdleCallback = ( () => {
-	if ( typeof window === 'undefined' ) {
-		return ( callback ) => {
-			setTimeout( () => callback( Date.now() ), 0 );
-		};
-	}
-
-	return window.requestIdleCallback || window.requestAnimationFrame;
-} )();
-
-const cancelIdleCallback = ( () => {
-	if ( typeof window === 'undefined' ) {
-		return clearTimeout;
-	}
-
-	return window.cancelIdleCallback || window.cancelAnimationFrame;
-} )();
-
-export function usePreParsePatterns() {
-	const { patterns, isPreviewMode } = useSelect( ( _select ) => {
-		const { __experimentalBlockPatterns, __unstableIsPreviewMode } =
-			_select( blockEditorStore ).getSettings();
-		return {
-			patterns: __experimentalBlockPatterns,
-			isPreviewMode: __unstableIsPreviewMode,
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( isPreviewMode ) {
-			return;
-		}
-		if ( ! patterns?.length ) {
-			return;
-		}
-
-		let handle;
-		let index = -1;
-
-		const callback = () => {
-			index++;
-			if ( index >= patterns.length ) {
-				return;
-			}
-
-			select( blockEditorStore ).__experimentalGetParsedPattern(
-				patterns[ index ].name
-			);
-
-			handle = requestIdleCallback( callback );
-		};
-
-		handle = requestIdleCallback( callback );
-		return () => cancelIdleCallback( handle );
-	}, [ patterns, isPreviewMode ] );
-
-	return null;
-}
diff --git a/packages/block-editor/src/utils/selection.js b/packages/block-editor/src/utils/selection.js
index 68c634d591c5e9..57aab8cc0f55dd 100644
--- a/packages/block-editor/src/utils/selection.js
+++ b/packages/block-editor/src/utils/selection.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * A robust way to retain selection position through various
  * transforms is to insert a special character at the position and
@@ -19,8 +24,18 @@ export function retrieveSelectedAttribute( blockAttributes ) {
 	return Object.keys( blockAttributes ).find( ( name ) => {
 		const value = blockAttributes[ name ];
 		return (
-			typeof value === 'string' &&
-			value.indexOf( START_OF_SELECTED_AREA ) !== -1
+			( typeof value === 'string' || value instanceof RichTextData ) &&
+			// To do: refactor this to use rich text's selection instead, so we
+			// no longer have to use on this hack inserting a special character.
+			value.toString().indexOf( START_OF_SELECTED_AREA ) !== -1
 		);
 	} );
 }
+
+export function findRichTextAttributeKey( blockType ) {
+	for ( const [ key, value ] of Object.entries( blockType.attributes ) ) {
+		if ( value.source === 'rich-text' || value.source === 'html' ) {
+			return key;
+		}
+	}
+}
diff --git a/packages/block-editor/src/utils/sorting.js b/packages/block-editor/src/utils/sorting.js
new file mode 100644
index 00000000000000..84cf65a08e8274
--- /dev/null
+++ b/packages/block-editor/src/utils/sorting.js
@@ -0,0 +1,54 @@
+/**
+ * Recursive stable sorting comparator function.
+ *
+ * @param {string|Function} field Field to sort by.
+ * @param {Array}           items Items to sort.
+ * @param {string}          order Order, 'asc' or 'desc'.
+ * @return {Function} Comparison function to be used in a `.sort()`.
+ */
+const comparator = ( field, items, order ) => {
+	return ( a, b ) => {
+		let cmpA, cmpB;
+
+		if ( typeof field === 'function' ) {
+			cmpA = field( a );
+			cmpB = field( b );
+		} else {
+			cmpA = a[ field ];
+			cmpB = b[ field ];
+		}
+
+		if ( cmpA > cmpB ) {
+			return order === 'asc' ? 1 : -1;
+		} else if ( cmpB > cmpA ) {
+			return order === 'asc' ? -1 : 1;
+		}
+
+		const orderA = items.findIndex( ( item ) => item === a );
+		const orderB = items.findIndex( ( item ) => item === b );
+
+		// Stable sort: maintaining original array order
+		if ( orderA > orderB ) {
+			return 1;
+		} else if ( orderB > orderA ) {
+			return -1;
+		}
+
+		return 0;
+	};
+};
+
+/**
+ * Order items by a certain key.
+ * Supports decorator functions that allow complex picking of a comparison field.
+ * Sorts in ascending order by default, but supports descending as well.
+ * Stable sort - maintains original order of equal items.
+ *
+ * @param {Array}           items Items to order.
+ * @param {string|Function} field Field to order by.
+ * @param {string}          order Sorting order, `asc` or `desc`.
+ * @return {Array} Sorted items.
+ */
+export function orderBy( items, field, order = 'asc' ) {
+	return items.concat().sort( comparator( field, items, order ) );
+}
diff --git a/packages/block-editor/src/utils/test/block-variation-transforms.js b/packages/block-editor/src/utils/test/block-variation-transforms.js
deleted file mode 100644
index 47844ba0309426..00000000000000
--- a/packages/block-editor/src/utils/test/block-variation-transforms.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Internal dependencies
- */
-import { __experimentalGetMatchingVariation as getMatchingVariation } from '../block-variation-transforms';
-
-describe( 'getMatchingVariation', () => {
-	describe( 'should not find a match', () => {
-		it( 'when no variations or attributes passed', () => {
-			expect(
-				getMatchingVariation( null, { content: 'hi' } )
-			).toBeUndefined();
-			expect( getMatchingVariation( {} ) ).toBeUndefined();
-		} );
-		it( 'when no variation matched', () => {
-			const variations = [
-				{ name: 'one', attributes: { level: 1 } },
-				{ name: 'two', attributes: { level: 2 } },
-			];
-			expect(
-				getMatchingVariation( { level: 4 }, variations )
-			).toBeUndefined();
-		} );
-		it( 'when more than one match found', () => {
-			const variations = [
-				{ name: 'one', attributes: { level: 1 } },
-				{ name: 'two', attributes: { level: 1, content: 'hi' } },
-			];
-			expect(
-				getMatchingVariation(
-					{ level: 1, content: 'hi', other: 'prop' },
-					variations
-				)
-			).toBeUndefined();
-		} );
-		it( 'when variation is a superset of attributes', () => {
-			const variations = [
-				{ name: 'one', attributes: { level: 1, content: 'hi' } },
-			];
-			expect(
-				getMatchingVariation( { level: 1, other: 'prop' }, variations )
-			).toBeUndefined();
-		} );
-		it( 'when variation has a nested attribute', () => {
-			const variations = [
-				{ name: 'one', attributes: { query: { author: 'somebody' } } },
-				{ name: 'two', attributes: { query: { author: 'nobody' } } },
-			];
-			expect(
-				getMatchingVariation(
-					{ query: { author: 'foobar' }, other: 'prop' },
-					variations
-				)
-			).toBeUndefined();
-		} );
-	} );
-	describe( 'should find a match', () => {
-		it( 'when variation has one attribute', () => {
-			const variations = [
-				{ name: 'one', attributes: { level: 1 } },
-				{ name: 'two', attributes: { level: 2 } },
-			];
-			expect(
-				getMatchingVariation(
-					{ level: 2, content: 'hi', other: 'prop' },
-					variations
-				).name
-			).toEqual( 'two' );
-		} );
-		it( 'when variation has many attributes', () => {
-			const variations = [
-				{ name: 'one', attributes: { level: 1, content: 'hi' } },
-				{ name: 'two', attributes: { level: 2 } },
-			];
-			expect(
-				getMatchingVariation(
-					{ level: 1, content: 'hi', other: 'prop' },
-					variations
-				).name
-			).toEqual( 'one' );
-		} );
-		it( 'when variation has a nested attribute', () => {
-			const variations = [
-				{ name: 'one', attributes: { query: { author: 'somebody' } } },
-				{ name: 'two', attributes: { query: { author: 'nobody' } } },
-			];
-			expect(
-				getMatchingVariation(
-					{ query: { author: 'somebody' }, other: 'prop' },
-					variations
-				).name
-			).toEqual( 'one' );
-		} );
-	} );
-} );
diff --git a/packages/block-editor/src/utils/test/dom.js b/packages/block-editor/src/utils/test/dom.js
new file mode 100644
index 00000000000000..50a16a27cf9617
--- /dev/null
+++ b/packages/block-editor/src/utils/test/dom.js
@@ -0,0 +1,224 @@
+/**
+ * Internal dependencies
+ */
+import { getElementBounds, WITH_OVERFLOW_ELEMENT_BLOCKS } from '../dom';
+describe( 'dom', () => {
+	describe( 'getElementBounds', () => {
+		it( 'should return a DOMRectReadOnly object if the viewport is not available', () => {
+			const element = {
+				ownerDocument: {
+					defaultView: null,
+				},
+			};
+			expect( getElementBounds( element ) ).toEqual(
+				new window.DOMRectReadOnly()
+			);
+		} );
+		it( 'should return a DOMRectReadOnly object if the viewport is available', () => {
+			const element = {
+				ownerDocument: {
+					defaultView: {
+						getComputedStyle: () => ( {
+							display: 'block',
+							visibility: 'visible',
+							opacity: '1',
+						} ),
+					},
+				},
+				getBoundingClientRect: () => ( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+				} ),
+				getAttribute: ( x ) => x,
+			};
+			expect( getElementBounds( element ) ).toEqual(
+				new window.DOMRectReadOnly( 0, 0, 100, 100 )
+			);
+		} );
+		it( 'should clip left and right values when an element is larger than the viewport width', () => {
+			const element = window.document.createElement( 'div' );
+			element.getBoundingClientRect = jest.fn().mockReturnValue( {
+				left: -10,
+				top: 0,
+				right: window.innerWidth + 10,
+				bottom: 100,
+				width: window.innerWidth,
+				height: 100,
+			} );
+			expect( getElementBounds( element ).toJSON() ).toEqual( {
+				left: 0, // Reset to min left bound.
+				top: 0,
+				right: window.innerWidth, // Reset to max right bound.
+				bottom: 100,
+				width: window.innerWidth,
+				height: 100,
+				x: 0,
+				y: 0,
+			} );
+		} );
+		it( 'should return the parent DOMRectReadOnly object if the parent block type is not supported', () => {
+			const element = window.document.createElement( 'div' );
+			element.getBoundingClientRect = jest.fn().mockReturnValue( {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 100,
+				width: 100,
+				height: 100,
+			} );
+			element.setAttribute( 'data-type', 'test' );
+			const childElement = window.document.createElement( 'div' );
+			childElement.getBoundingClientRect = jest.fn().mockReturnValue( {
+				left: 0,
+				top: 0,
+				right: 333,
+				bottom: 333,
+				width: 333,
+				height: 333,
+				x: 0,
+				y: 0,
+			} );
+			element.appendChild( childElement );
+
+			expect( getElementBounds( element ).toJSON() ).toEqual( {
+				left: 0,
+				top: 0,
+				right: 100,
+				bottom: 100,
+				width: 100,
+				height: 100,
+				x: 0,
+				y: 0,
+			} );
+		} );
+		describe( 'With known block type', () => {
+			it( 'should return the child DOMRectReadOnly object if it is visible and a known block type', () => {
+				const element = window.document.createElement( 'div' );
+				element.getBoundingClientRect = jest.fn().mockReturnValue( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+				} );
+				element.setAttribute(
+					'data-type',
+					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
+				);
+				const childElement = window.document.createElement( 'div' );
+				childElement.getBoundingClientRect = jest
+					.fn()
+					.mockReturnValue( {
+						left: 0,
+						top: 0,
+						right: 333,
+						bottom: 333,
+						width: 333,
+						height: 333,
+						x: 0,
+						y: 0,
+					} );
+				element.appendChild( childElement );
+
+				expect( getElementBounds( element ).toJSON() ).toEqual( {
+					left: 0,
+					top: 0,
+					right: 333,
+					bottom: 333,
+					width: 333,
+					height: 333,
+					x: 0,
+					y: 0,
+				} );
+			} );
+			it( 'should return the parent DOMRectReadOnly if the child is scrollable', () => {
+				const element = window.document.createElement( 'div' );
+				element.setAttribute(
+					'data-type',
+					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
+				);
+				element.style.overflowX = 'auto';
+				element.style.overflowY = 'auto';
+				element.getBoundingClientRect = jest.fn().mockReturnValue( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+				} );
+				const childElement = window.document.createElement( 'div' );
+				childElement.getBoundingClientRect = jest
+					.fn()
+					.mockReturnValue( {
+						left: 0,
+						top: 0,
+						right: 333,
+						bottom: 333,
+						width: 333,
+						height: 333,
+						x: 0,
+						y: 0,
+					} );
+				element.appendChild( childElement );
+
+				expect( getElementBounds( element ).toJSON() ).toEqual( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+					x: 0,
+					y: 0,
+				} );
+			} );
+			it( 'should return the parent DOMRectReadOnly object if the child element is not visible', () => {
+				const element = window.document.createElement( 'div' );
+				element.getBoundingClientRect = jest.fn().mockReturnValue( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+				} );
+				element.setAttribute(
+					'data-type',
+					WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ]
+				);
+				const childElement = window.document.createElement( 'div' );
+				childElement.getBoundingClientRect = jest
+					.fn()
+					.mockReturnValue( {
+						left: 0,
+						top: 0,
+						right: 333,
+						bottom: 333,
+						width: 333,
+						height: 333,
+						x: 0,
+						y: 0,
+					} );
+				childElement.style.display = 'none';
+				element.appendChild( childElement );
+
+				expect( getElementBounds( element ).toJSON() ).toEqual( {
+					left: 0,
+					top: 0,
+					right: 100,
+					bottom: 100,
+					width: 100,
+					height: 100,
+					x: 0,
+					y: 0,
+				} );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/format-font-style.js b/packages/block-editor/src/utils/test/format-font-style.js
new file mode 100644
index 00000000000000..f8557143cb4e24
--- /dev/null
+++ b/packages/block-editor/src/utils/test/format-font-style.js
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { formatFontStyle } from '../format-font-style';
+
+describe( 'formatFontStyle', () => {
+	it( 'should return empty object if style is not available', () => {
+		expect( formatFontStyle() ).toEqual( {} );
+	} );
+
+	it( 'should return the same object if style is already an object', () => {
+		const fontStyle = { name: 'Italic', value: 'italic' };
+		expect( formatFontStyle( fontStyle ) ).toEqual( fontStyle );
+	} );
+
+	it( 'should return the formatted font style', () => {
+		expect( formatFontStyle( 'normal' ) ).toEqual( {
+			name: 'Regular',
+			value: 'normal',
+		} );
+		expect( formatFontStyle( 'italic' ) ).toEqual( {
+			name: 'Italic',
+			value: 'italic',
+		} );
+		expect( formatFontStyle( 'oblique' ) ).toEqual( {
+			name: 'Oblique',
+			value: 'oblique',
+		} );
+		expect( formatFontStyle( 'oblique 40deg' ) ).toEqual( {
+			name: 'oblique 40deg',
+			value: 'oblique 40deg',
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/format-font-weight.js b/packages/block-editor/src/utils/test/format-font-weight.js
new file mode 100644
index 00000000000000..8830e45532acfe
--- /dev/null
+++ b/packages/block-editor/src/utils/test/format-font-weight.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { formatFontWeight } from '../format-font-weight';
+
+describe( 'formatFontWeight', () => {
+	it( 'should return empty object if weight is not available', () => {
+		expect( formatFontWeight() ).toEqual( {} );
+	} );
+
+	it( 'should return the same object if weight is already an object', () => {
+		const fontWeight = { name: 'Thin', value: '100' };
+		expect( formatFontWeight( fontWeight ) ).toEqual( fontWeight );
+	} );
+
+	it( 'should return the formatted font weight', () => {
+		expect( formatFontWeight( '100' ) ).toEqual( {
+			name: 'Thin',
+			value: '100',
+		} );
+		expect( formatFontWeight( '200' ) ).toEqual( {
+			name: 'Extra Light',
+			value: '200',
+		} );
+		expect( formatFontWeight( '300' ) ).toEqual( {
+			name: 'Light',
+			value: '300',
+		} );
+		expect( formatFontWeight( '400' ) ).toEqual( {
+			name: 'Regular',
+			value: '400',
+		} );
+		expect( formatFontWeight( '500' ) ).toEqual( {
+			name: 'Medium',
+			value: '500',
+		} );
+		expect( formatFontWeight( '600' ) ).toEqual( {
+			name: 'Semi Bold',
+			value: '600',
+		} );
+		expect( formatFontWeight( '700' ) ).toEqual( {
+			name: 'Bold',
+			value: '700',
+		} );
+		expect( formatFontWeight( '800' ) ).toEqual( {
+			name: 'Extra Bold',
+			value: '800',
+		} );
+		expect( formatFontWeight( '900' ) ).toEqual( {
+			name: 'Black',
+			value: '900',
+		} );
+		expect( formatFontWeight( '1000' ) ).toEqual( {
+			name: 'Extra Black',
+			value: '1000',
+		} );
+		expect( formatFontWeight( 'normal' ) ).toEqual( {
+			name: 'Regular',
+			value: 'normal',
+		} );
+		expect( formatFontWeight( 'bold' ) ).toEqual( {
+			name: 'Bold',
+			value: 'bold',
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/get-font-styles-and-weights.js b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js
new file mode 100644
index 00000000000000..7c50409bae1acc
--- /dev/null
+++ b/packages/block-editor/src/utils/test/get-font-styles-and-weights.js
@@ -0,0 +1,661 @@
+/**
+ * Internal dependencies
+ */
+import { getFontStylesAndWeights } from '../get-font-styles-and-weights';
+
+describe( 'getFontStylesAndWeights', () => {
+	it( 'should return default styles and weights if fontFamilyFaces is not available', () => {
+		expect( getFontStylesAndWeights() ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Thin',
+					value: '100',
+				},
+				{
+					name: 'Extra Light',
+					value: '200',
+				},
+				{
+					name: 'Light',
+					value: '300',
+				},
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Medium',
+					value: '500',
+				},
+				{
+					name: 'Semi Bold',
+					value: '600',
+				},
+				{
+					name: 'Bold',
+					value: '700',
+				},
+				{
+					name: 'Extra Bold',
+					value: '800',
+				},
+				{
+					name: 'Black',
+					value: '900',
+				},
+				{
+					name: 'Extra Black',
+					value: '1000',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-100',
+					name: 'Thin',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '100',
+					},
+				},
+				{
+					key: 'normal-200',
+					name: 'Extra Light',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '200',
+					},
+				},
+				{
+					key: 'normal-300',
+					name: 'Light',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '300',
+					},
+				},
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-500',
+					name: 'Medium',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '500',
+					},
+				},
+				{
+					key: 'normal-600',
+					name: 'Semi Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'normal-800',
+					name: 'Extra Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '800',
+					},
+				},
+				{
+					key: 'normal-900',
+					name: 'Black',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '900',
+					},
+				},
+				{
+					key: 'normal-1000',
+					name: 'Extra Black',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '1000',
+					},
+				},
+				{
+					key: 'italic-100',
+					name: 'Thin Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '100',
+					},
+				},
+				{
+					key: 'italic-200',
+					name: 'Extra Light Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '200',
+					},
+				},
+				{
+					key: 'italic-300',
+					name: 'Light Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '300',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-500',
+					name: 'Medium Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '500',
+					},
+				},
+				{
+					key: 'italic-600',
+					name: 'Semi Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-800',
+					name: 'Extra Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '800',
+					},
+				},
+				{
+					key: 'italic-900',
+					name: 'Black Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '900',
+					},
+				},
+				{
+					key: 'italic-1000',
+					name: 'Extra Black Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '1000',
+					},
+				},
+			],
+			isSystemFont: true,
+			isVariableFont: false,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a variable font', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'AR One Sans',
+				fontStyle: 'normal',
+				fontWeight: '400 700',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf',
+			},
+		];
+
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Medium',
+					value: '500',
+				},
+				{
+					name: 'Semi Bold',
+					value: '600',
+				},
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-500',
+					name: 'Medium',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '500',
+					},
+				},
+				{
+					key: 'normal-600',
+					name: 'Semi Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-500',
+					name: 'Medium Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '500',
+					},
+				},
+				{
+					key: 'italic-600',
+					name: 'Semi Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: true,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a regular font', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				fontWeight: '400',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7LYxnL31AHfAAy5.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				fontWeight: 600,
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				fontWeight: '900',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7JxwXL31AHfAAy5.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'italic',
+				fontWeight: '300',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhcSx3gD9BRy5m5M.woff2',
+			},
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'italic',
+				fontWeight: '900',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b72SlTPu5rIkWIZjVgI-TckS03oGpPETyEJ88Rbvi0_TzOzKcQhTO23gD9BRy5m5M.woff2',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Semi Bold',
+					value: '600',
+				},
+				{
+					name: 'Black',
+					value: '900',
+				},
+				{
+					name: 'Light',
+					value: '300',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-600',
+					name: 'Semi Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'normal-900',
+					name: 'Black',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '900',
+					},
+				},
+				{
+					key: 'normal-300',
+					name: 'Light',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '300',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-600',
+					name: 'Semi Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '600',
+					},
+				},
+				{
+					key: 'italic-900',
+					name: 'Black Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '900',
+					},
+				},
+				{
+					key: 'italic-300',
+					name: 'Light Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '300',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a regular font with faux bold added', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'Piazzolla',
+				fontStyle: 'normal',
+				fontWeight: '400',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/N0b52SlTPu5rIkWIZjVKKtYtfxYqZ4RJBFzFfYUjkSDdlqZgy7LYxnL31AHfAAy5.woff2',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a font without fontWeight', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'AR One Sans',
+				fontStyle: 'normal',
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
+
+	it( 'should return available styles and weights for a font with numeric fontWeight', () => {
+		const fontFamilyFaces = [
+			{
+				fontFamily: 'AR One Sans',
+				fontStyle: 'normal',
+				fontWeight: 400,
+				src: 'http://www.wordpress.org/wp-content/uploads/fonts/AROneSans-VariableFont_ARRRwght.ttf',
+			},
+		];
+		expect( getFontStylesAndWeights( fontFamilyFaces ) ).toEqual( {
+			fontStyles: [
+				{
+					name: 'Regular',
+					value: 'normal',
+				},
+				{
+					name: 'Italic',
+					value: 'italic',
+				},
+			],
+			fontWeights: [
+				{
+					name: 'Regular',
+					value: '400',
+				},
+				{
+					name: 'Bold',
+					value: '700',
+				},
+			],
+			combinedStyleAndWeightOptions: [
+				{
+					key: 'normal-400',
+					name: 'Regular',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'normal-700',
+					name: 'Bold',
+					style: {
+						fontStyle: 'normal',
+						fontWeight: '700',
+					},
+				},
+				{
+					key: 'italic-400',
+					name: 'Regular Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '400',
+					},
+				},
+				{
+					key: 'italic-700',
+					name: 'Bold Italic',
+					style: {
+						fontStyle: 'italic',
+						fontWeight: '700',
+					},
+				},
+			],
+			isSystemFont: false,
+			isVariableFont: false,
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/object.js b/packages/block-editor/src/utils/test/object.js
new file mode 100644
index 00000000000000..28f2fc7381cd80
--- /dev/null
+++ b/packages/block-editor/src/utils/test/object.js
@@ -0,0 +1,181 @@
+/**
+ * Internal dependencies
+ */
+import { setImmutably } from '../object';
+
+describe( 'setImmutably', () => {
+	describe( 'handling falsy values properly', () => {
+		it( 'should create a new object if `undefined` is passed', () => {
+			const result = setImmutably( undefined, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `null` is passed', () => {
+			const result = setImmutably( null, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `false` is passed', () => {
+			const result = setImmutably( false, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if `0` is passed', () => {
+			const result = setImmutably( 0, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if an empty string is passed', () => {
+			const result = setImmutably( '', 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'should create a new object if a NaN is passed', () => {
+			const result = setImmutably( NaN, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+	} );
+
+	describe( 'manages data assignment properly', () => {
+		it( 'assigns value properly when it does not exist', () => {
+			const result = setImmutably( {}, 'test', 1 );
+
+			expect( result ).toEqual( { test: 1 } );
+		} );
+
+		it( 'overrides existing values', () => {
+			const result = setImmutably( { test: 1 }, 'test', 2 );
+
+			expect( result ).toEqual( { test: 2 } );
+		} );
+
+		it( 'handles first level arrays properly', () => {
+			const result = setImmutably( [ 5 ], 0, 6 );
+
+			expect( result ).toEqual( [ 6 ] );
+		} );
+
+		it( 'handles nested arrays properly', () => {
+			const result = setImmutably(
+				[ [ 'foo', [ 'bar' ] ] ],
+				[ 0, 1, 0 ],
+				'baz'
+			);
+
+			expect( result ).toEqual( [ [ 'foo', [ 'baz' ] ] ] );
+		} );
+
+		describe( 'with array notation access', () => {
+			it( 'assigns values at deeper levels', () => {
+				const result = setImmutably( {}, [ 'foo', 'bar', 'baz' ], 5 );
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'overrides existing values at deeper levels', () => {
+				const result = setImmutably(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'baz' ],
+					5
+				);
+
+				expect( result ).toEqual( { foo: { bar: { baz: 5 } } } );
+			} );
+
+			it( 'keeps other properties intact', () => {
+				const result = setImmutably(
+					{ foo: { bar: { baz: 1 } } },
+					[ 'foo', 'bar', 'test' ],
+					5
+				);
+
+				expect( result ).toEqual( {
+					foo: { bar: { baz: 1, test: 5 } },
+				} );
+			} );
+		} );
+
+		describe( 'for nested falsey values', () => {
+			it( 'overwrites undefined values', () => {
+				const result = setImmutably( { test: undefined }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites null values', () => {
+				const result = setImmutably( { test: null }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites false values', () => {
+				const result = setImmutably( { test: false }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites `0` values', () => {
+				const result = setImmutably( { test: 0 }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites empty string values', () => {
+				const result = setImmutably( { test: '' }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+
+			it( 'overwrites NaN values', () => {
+				const result = setImmutably( { test: NaN }, 'test', 1 );
+
+				expect( result ).toEqual( { test: 1 } );
+			} );
+		} );
+	} );
+
+	describe( 'does not mutate the original object', () => {
+		it( 'clones the object at the first level', () => {
+			const input = {};
+			const result = setImmutably( input, 'test', 1 );
+
+			expect( result ).not.toBe( input );
+		} );
+
+		it( 'clones the object at deeper levels', () => {
+			const input = { foo: { bar: { baz: 1 } } };
+			const result = setImmutably( input, [ 'foo', 'bar', 'baz' ], 2 );
+
+			expect( result ).not.toBe( input );
+			expect( result.foo ).not.toBe( input.foo );
+			expect( result.foo.bar ).not.toBe( input.foo.bar );
+			expect( result.foo.bar.baz ).not.toBe( input.foo.bar.baz );
+		} );
+
+		it( 'clones arrays at the first level', () => {
+			const input = [];
+			const result = setImmutably( input, 0, 1 );
+
+			expect( result ).not.toBe( input );
+		} );
+
+		it( 'clones arrays at deeper levels', () => {
+			const input = [ [ [ [ 'foo', [ 'bar' ] ] ] ] ];
+			const result = setImmutably( input, [ 0, 0, 0, 1, 0 ], 'baz' );
+
+			expect( result ).not.toBe( input );
+			expect( result[ 0 ] ).not.toBe( input[ 0 ] );
+			expect( result[ 0 ][ 0 ] ).not.toBe( input[ 0 ][ 0 ] );
+			expect( result[ 0 ][ 0 ][ 0 ] ).not.toBe( input[ 0 ][ 0 ][ 0 ] );
+			expect( result[ 0 ][ 0 ][ 0 ][ 1 ] ).not.toBe(
+				input[ 0 ][ 0 ][ 0 ][ 1 ]
+			);
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/parse-css-unit-to-px.js b/packages/block-editor/src/utils/test/parse-css-unit-to-px.js
deleted file mode 100644
index b8c2415f7208f5..00000000000000
--- a/packages/block-editor/src/utils/test/parse-css-unit-to-px.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	default as memoizedGetPxFromCssUnit,
-	getPxFromCssUnit,
-} from '../parse-css-unit-to-px';
-
-jest.useRealTimers();
-
-describe( 'getPxFromCssUnit', () => {
-	// Absolute units.
-	describe( 'absolute unites should return px values', () => {
-		const testData = [
-			[ '25px', '25px' ],
-			[ '25.5', '26px' ],
-			[ '1cm', '38px' ],
-			[ '10mm', '38px' ],
-			[ '1in', '96px' ],
-			[ '12pt', '16px' ],
-			[ '1pc', '16px' ],
-			[ '40Q', '38px' ], // 40 Q should be 1 cm.
-		];
-
-		test.each( testData )(
-			'test getPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( getPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'test memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'test cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
-			}
-		);
-	} );
-
-	describe( 'relative unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ '2em', '20px' ],
-			[ '2rem', '20px' ],
-			[ '1.125rem', '11px' ],
-			[ '20vw', '20px' ],
-			[ '20vh', '40px' ],
-			[ '20vmin', '20px' ],
-			[ '20vmax', '40px' ],
-			[ '20lh', '40px' ],
-			[ '120%', '12px' ],
-		];
-
-		test.each( testData )(
-			'test getPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'test memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'test cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-
-	// Function units.
-
-	describe( 'function unites should return px values', () => {
-		const settings = {
-			fontSize: 10,
-			width: 100,
-			height: 200,
-			lineHeight: 2,
-			type: 'font',
-		};
-
-		const testData = [
-			[ 'min(20px, 25px)', '20px' ],
-			[ 'min(20px, 9px, 12pt, 25px)', '9px' ],
-			[ 'max(20px, 25px)', '25px' ],
-			[ 'clamp(10px, 9px, 25px)', '10px' ],
-			[ 'clamp(10px, 35px, 25px)', '25px' ],
-			[ 'clamp(10px, 15px, 25px)', '15px' ],
-			[ 'min(max(20px,25px), 35px)', '25px' ],
-			[ 'max(min(20px,25px), 35px)', '35px' ],
-			[ '10px + 25px', '35px' ],
-			[ 'calc(10px + 25px)', '35px' ],
-			[ 'calc( 2 * 20px)', '40px' ],
-			[ 'calc(25px - 10px)', '15px' ],
-			[ 'min(10px + 25px, 55pt)', '35px' ],
-			[ 'calc(12vw * 10px)', '450px' ],
-			[ 'calc(45vw / 10px)', '17px' ],
-			[ '', null ],
-			[ undefined, null ],
-			[ 123, '123px' ],
-			[ 123.456, '123px' ],
-			[ 'abc', null ],
-			[ 'console.log("howdy"); + 10px', null ],
-			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
-		];
-
-		test.each( testData )(
-			'test getPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
-			}
-		);
-		test.each( testData )(
-			'test memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-		test.each( testData )(
-			'test cached memoizedGetPxFromCssUnit( %s )',
-			( unit, expected ) => {
-				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
-					expected
-				);
-			}
-		);
-	} );
-	// Skip this test it might be useful in dev.
-	it.skip( 'test performance of memoizedGetPxFromCssUnit function', () => {
-		const start = Date.now();
-		let i = 0;
-		const intervals = 1000;
-		while ( i < intervals ) {
-			getPxFromCssUnit( 'max(25px, 35px)', { width: 200 } );
-			i++;
-		}
-		const rawDuration = Date.now() - start;
-
-		const startM = Date.now();
-		i = 0;
-		// The memoized Version should be at 10X better then the non default one.
-		while ( i < intervals * 10 ) {
-			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
-			i++;
-		}
-		expect( rawDuration > Date.now() - startM ).toBe( true );
-	} );
-} );
diff --git a/packages/block-editor/src/utils/test/pasting.js b/packages/block-editor/src/utils/test/pasting.js
index 7cebac9be66923..2c9dc8654a8955 100644
--- a/packages/block-editor/src/utils/test/pasting.js
+++ b/packages/block-editor/src/utils/test/pasting.js
@@ -11,20 +11,19 @@ const mocks = {
 
 describe( 'shouldDismissPastedFiles', () => {
 	it( 'should return false when no HTML is present', () => {
-		expect(
-			shouldDismissPastedFiles( [ mocks.pngImageFile ], '', '' )
-		).toBe( false );
+		expect( shouldDismissPastedFiles( [ mocks.pngImageFile ], '' ) ).toBe(
+			false
+		);
 	} );
 	it( 'should return false when file is not an image', () => {
-		expect(
-			shouldDismissPastedFiles( [ mocks.documentFile ], '', '' )
-		).toBe( false );
+		expect( shouldDismissPastedFiles( [ mocks.documentFile ], '' ) ).toBe(
+			false
+		);
 	} );
 	it( 'should return false when multiple images are present', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile, mocks.jpgImageFile ],
-				'',
 				''
 			)
 		).toBe( false );
@@ -33,8 +32,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="path.png">',
-				''
+				'<img src="path.png">'
 			)
 		).toBe( false );
 	} );
@@ -42,8 +40,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="1.png"><br><img src="2.png">',
-				''
+				'<img src="1.png"><br><img src="2.png">'
 			)
 		).toBe( true );
 	} );
@@ -56,8 +53,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<img src="https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0">',
-				'https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0'
+				'<img src="https://lh3.googleusercontent.com/ab/SOMESTRING?authuser=0">'
 			)
 		).toBe( false );
 	} );
@@ -66,8 +62,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<figure><img src="blob:..."></figure>',
-				''
+				'<figure><img src="blob:..."></figure>'
 			)
 		).toBe( false );
 	} );
@@ -76,8 +71,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<meta charset="UTF-8"><table>Some table text</table>',
-				'Some table text'
+				'<meta charset="UTF-8"><table>Some table text</table>'
 			)
 		).toBe( true );
 	} );
@@ -86,8 +80,7 @@ describe( 'shouldDismissPastedFiles', () => {
 		expect(
 			shouldDismissPastedFiles(
 				[ mocks.pngImageFile ],
-				'<p>A</p><img src="file:////.../clip_image001.png" alt="..."><p>B</p>',
-				'A\nB'
+				'<p>A</p><img src="file:////.../clip_image001.png" alt="..."><p>B</p>'
 			)
 		).toBe( true );
 	} );
diff --git a/packages/block-editor/src/utils/test/sorting.js b/packages/block-editor/src/utils/test/sorting.js
new file mode 100644
index 00000000000000..f1038cda5809cc
--- /dev/null
+++ b/packages/block-editor/src/utils/test/sorting.js
@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { orderBy } from '../sorting';
+
+describe( 'orderBy', () => {
+	it( 'should not mutate original input', () => {
+		const input = [];
+		expect( orderBy( input, 'x' ) ).not.toBe( input );
+	} );
+
+	it( 'should sort items by a field when it is specified as a string', () => {
+		const input = [ { x: 2 }, { x: 1 }, { x: 3 } ];
+		const expected = [ { x: 1 }, { x: 2 }, { x: 3 } ];
+		expect( orderBy( input, 'x' ) ).toEqual( expected );
+	} );
+
+	it( 'should support functions for picking the field', () => {
+		const input = [ { x: 2 }, { x: 1 }, { x: 3 } ];
+		const expected = [ { x: 1 }, { x: 2 }, { x: 3 } ];
+		expect( orderBy( input, ( item ) => item.x ) ).toEqual( expected );
+	} );
+
+	it( 'should support sorting in a descending order', () => {
+		const input = [ { x: 2 }, { x: 1 }, { x: 3 } ];
+		const expected = [ { x: 3 }, { x: 2 }, { x: 1 } ];
+		expect( orderBy( input, 'x', 'desc' ) ).toEqual( expected );
+	} );
+
+	it( 'should maintain original order of equal items', () => {
+		const a = { x: 1, a: 1 };
+		const b = { x: 1, b: 2 };
+		const c = { x: 0 };
+		const d = { x: 1, b: 4 };
+		const input = [ a, b, c, d ];
+		const expected = [ c, a, b, d ];
+		expect( orderBy( input, 'x' ) ).toEqual( expected );
+	} );
+
+	it( 'should maintain original order of equal items in descencing order', () => {
+		const a = { x: 1, a: 1 };
+		const b = { x: 1, b: 2 };
+		const c = { x: 0 };
+		const d = { x: 1, b: 4 };
+		const input = [ a, b, c, d ];
+		const expected = [ a, b, d, c ];
+		expect( orderBy( input, 'x', 'desc' ) ).toEqual( expected );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
new file mode 100644
index 00000000000000..efe92cea63d0ff
--- /dev/null
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -0,0 +1,538 @@
+/**
+ * Internal dependencies
+ */
+import transformStyles from '../transform-styles';
+
+describe( 'transformStyles', () => {
+	describe( 'error handling', () => {
+		beforeEach( () => {
+			// Intentionally suppress the expected console errors and warnings to reduce
+			// noise in the test output.
+			jest.spyOn( console, 'warn' ).mockImplementation( jest.fn() );
+		} );
+
+		it( 'should not throw error in case of invalid css', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			expect( run ).not.toThrow();
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'should warn invalid css in the console', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red; }', // valid CSS
+						},
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			const [ validCSS, invalidCSS ] = run();
+
+			expect( validCSS ).toBe( '.my-namespace h1 { color: red; }' );
+			expect( invalidCSS ).toBe( null );
+
+			expect( console ).toHaveWarnedWith(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				'<css input>:1:1: Unclosed block\n> 1 | h1 { color: red;\n    | ^'
+				//                                                        ^^^^ In PostCSS, a tab is equal four spaces
+			);
+		} );
+
+		it( 'should handle multiple instances of `:root :where(body)`', () => {
+			const input = `:root :where(body) { color: pink; } :root :where(body) { color: orange; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				':root :where(body) .my-namespace { color: pink; } :root :where(body) .my-namespace { color: orange; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+	} );
+
+	describe( 'root selectors', () => {
+		it( 'should append prefix after `:root :where(body)` selectors', () => {
+			const input = ':root :where(body) { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = ':root :where(body) .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after `:where(body)` selectors', () => {
+			const input = ':where(body) { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = ':where(body) .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after body selectors', () => {
+			const input = `body { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = 'body .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after html selectors', () => {
+			const input = `html { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = 'html .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after html selectors, but before selectors that contain the word html', () => {
+			const input = `html [data-type="core/html"] .test { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'html .my-namespace [data-type="core/html"] .test { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after :root selectors', () => {
+			const input = ':root { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = ':root .my-namespace { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should append prefix after root selector when the selector contains a combinator without spaces around it', () => {
+			const input = `
+				body> .some-style { color: red; }
+				body>.some-style { color: blue; }
+				body >.some-style { color: yellow; }
+				html body > .some-style { color: purple; }
+				html body.with-class+.some-style { color: silver; }
+				html body.with-class~.some-style { color: goldenrod; }
+			`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = `
+				body .my-namespace>.some-style { color: red; }
+				body .my-namespace>.some-style { color: blue; }
+				body .my-namespace>.some-style { color: yellow; }
+				html body .my-namespace>.some-style { color: purple; }
+				html body.with-class .my-namespace+.some-style { color: silver; }
+				html body.with-class .my-namespace~.some-style { color: goldenrod; }
+			`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'appends after multiple root selectors', () => {
+			const input = `
+			    :root html[lang="th"] body { color: red; }
+			    :root html[lang="th"] { color: orange; }
+			    :root html[lang="th"] body .some-class { color: green; }
+			`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = `
+			    :root html[lang="th"] body .my-namespace { color: red; }
+			    :root html[lang="th"] .my-namespace { color: orange; }
+			    :root html[lang="th"] body .my-namespace .some-class { color: green; }
+			`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should not double prefix a root selector', () => {
+			const input = 'body .my-namespace h1  { color: goldenrod; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+
+			expect( output ).toEqual( [ input ] );
+		} );
+	} );
+
+	describe( 'selector wrap', () => {
+		it( 'should wrap regular selectors', () => {
+			const input = `h1 { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = '.my-namespace h1 { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should wrap multiple selectors', () => {
+			const input = `h1, h2 { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'.my-namespace h1, .my-namespace h2 { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should ignore ignored selectors', () => {
+			const input = `h1, body { color: red; }`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+						ignoredSelectors: [ 'body' ],
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = '.my-namespace h1, body { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( `should not try to replace 'body' in the middle of a classname`, () => {
+			const input = '.has-body-text { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = '.my-namespace .has-body-text { color: red; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should ignore keyframes', () => {
+			const input = `
+			@keyframes __wp-base-styles-fade-in {
+				from {
+					opacity: 0;
+				}
+			}`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+
+			expect( output ).toEqual( [ input ] );
+		} );
+
+		it( 'should wrap selectors inside container queries', () => {
+			const input = `
+			@container (width > 400px) {
+				  h1 { color: red; }
+			}`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = `
+			@container (width > 400px) {
+				  .my-namespace h1 { color: red; }
+			}`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should ignore font-face selectors', () => {
+			const input = `
+			@font-face {
+				font-family: myFirstFont;
+				src: url(sansation_light.woff);
+			}`;
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+
+			expect( output ).toEqual( [ input ] );
+		} );
+
+		it( 'should not double wrap selectors', () => {
+			const input = ' .my-namespace h1, .red { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected = ` .my-namespace h1, .my-namespace .red { color: red; }`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should not double wrap selectors when the prefix can be misinterpreted as a regular expression', () => {
+			const input =
+				' :where(.editor-styles-wrapper) h1, .red { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				':where(.editor-styles-wrapper)'
+			);
+			const expected = ` :where(.editor-styles-wrapper) h1, :where(.editor-styles-wrapper) .red { color: red; }`;
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should allow specification of ignoredSelectors per css input', () => {
+			const input = '.ignored { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+						ignoredSelectors: [ '.ignored' ],
+					},
+					{
+						css: input,
+						ignoredSelectors: [ /^\.ignored/ ],
+					},
+					{
+						css: input,
+					},
+				],
+				'.not'
+			);
+			const expected1 = input;
+			const expected2 = input;
+			const expected3 = '.not .ignored { color: red; }';
+
+			expect( output ).toEqual( [ expected1, expected2, expected3 ] );
+		} );
+
+		it( 'allows specification of ignoredSelectors globally via the transformOptions param', () => {
+			const input1 = '.ignored { color: red; }';
+			const input2 = '.modified { color: red; }';
+			const input3 = '.regexed { color: red; }';
+			const output = transformStyles(
+				[
+					{
+						css: input1,
+					},
+					{
+						css: input2,
+					},
+					{
+						css: input3,
+					},
+				],
+				'.prefix',
+				{ ignoredSelectors: [ '.ignored', /\.regexed/ ] }
+			);
+
+			expect( output ).toEqual( [
+				input1,
+				'.prefix .modified { color: red; }',
+				input3,
+			] );
+		} );
+
+		it( 'should not try to wrap items within `:where` selectors', () => {
+			const input =
+				':where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'.my-namespace :where(.wp-element-button:active, .wp-block-button__link:active) { color: blue; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should not try to prefix pseudo elements on `:where` selectors', () => {
+			const input =
+				':where(.wp-element-button, .wp-block-button__link)::before { color: blue; }';
+			const output = transformStyles(
+				[
+					{
+						css: input,
+					},
+				],
+				'.my-namespace'
+			);
+			const expected =
+				'.my-namespace :where(.wp-element-button, .wp-block-button__link)::before { color: blue; }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+	} );
+
+	it( 'should not break with data urls', () => {
+		const input = `.wp-block-group {
+			background-image: url("data:image/svg+xml,%3Csvg%3E.b%7Bclip-path:url(test);%7D%3C/svg%3E");
+			color: red !important;
+		  }`;
+
+		const output = transformStyles( [
+			{
+				css: input,
+				baseURL: 'http://wp-site.local/themes/gut/css/',
+			},
+		] );
+
+		expect( output ).toEqual( [ input ] );
+	} );
+
+	describe( 'URL rewrite', () => {
+		it( 'should rewrite relative paths', () => {
+			const input = `h1 { background: url(images/test.png); }`;
+			const output = transformStyles( [
+				{
+					css: input,
+					baseURL: 'http://wp-site.local/themes/gut/css/',
+				},
+			] );
+			const expected =
+				'h1 { background: url(http://wp-site.local/themes/gut/css/images/test.png); }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should replace complex relative paths', () => {
+			const input = `h1 { background: url(../images/test.png); }`;
+			const output = transformStyles( [
+				{
+					css: input,
+					baseURL: 'http://wp-site.local/themes/gut/css/',
+				},
+			] );
+			const expected =
+				'h1 { background: url(http://wp-site.local/themes/gut/images/test.png); }';
+
+			expect( output ).toEqual( [ expected ] );
+		} );
+
+		it( 'should not replace absolute paths', () => {
+			const input = `h1 { background: url(/images/test.png); }`;
+			const output = transformStyles( [
+				{
+					css: input,
+					baseURL: 'http://wp-site.local/themes/gut/css/',
+				},
+			] );
+			expect( output ).toEqual( [ input ] );
+		} );
+
+		it( 'should not replace remote paths', () => {
+			const input = `h1 { background: url(http://wp.org/images/test.png); }`;
+			const output = transformStyles( [
+				{
+					css: input,
+					baseURL: 'http://wp-site.local/themes/gut/css/',
+				},
+			] );
+
+			expect( output ).toEqual( [ input ] );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/test/use-block-bindings-utils.js b/packages/block-editor/src/utils/test/use-block-bindings-utils.js
new file mode 100644
index 00000000000000..e5e26bd24c20d1
--- /dev/null
+++ b/packages/block-editor/src/utils/test/use-block-bindings-utils.js
@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch, select } from '@wordpress/data';
+import {
+	createBlock,
+	getBlockTypes,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockBindingsUtils } from '../';
+
+describe( 'useBlockBindingsUtils', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	let clientId;
+	beforeEach( async () => {
+		const block = createBlock( 'core/paragraph', {
+			metadata: {
+				name: 'Block name',
+				bindings: {
+					prop1: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+					prop2: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+				},
+			},
+		} );
+		await dispatch( blockEditorStore ).resetBlocks( [ block ] );
+		clientId = block.clientId;
+	} );
+
+	afterAll( () => {
+		// Remove blocks after all tests.
+		dispatch( blockEditorStore ).resetBlocks( [] );
+
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should be possible to update just one connection', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to update multiple connections at once', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove connections', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop2: undefined,
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove all connections', async () => {
+		renderHook( () => {
+			const { removeAllBlockBindings } =
+				useBlockBindingsUtils( clientId );
+			removeAllBlockBindings();
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/utils/transform-styles/ast/index.js b/packages/block-editor/src/utils/transform-styles/ast/index.js
deleted file mode 100644
index b4dc1de499f474..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-export { default as parse } from './parse';
-export { default as stringify } from './stringify';
diff --git a/packages/block-editor/src/utils/transform-styles/ast/parse.js b/packages/block-editor/src/utils/transform-styles/ast/parse.js
deleted file mode 100644
index 3e7ba714bd4f1a..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/parse.js
+++ /dev/null
@@ -1,701 +0,0 @@
-/* eslint-disable @wordpress/no-unused-vars-before-return */
-
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-// http://www.w3.org/TR/CSS21/grammar.htm
-// https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
-const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
-
-export default function ( css, options ) {
-	options = options || {};
-
-	/**
-	 * Positional.
-	 */
-
-	let lineno = 1;
-	let column = 1;
-
-	/**
-	 * Update lineno and column based on `str`.
-	 */
-
-	function updatePosition( str ) {
-		const lines = str.match( /\n/g );
-		if ( lines ) {
-			lineno += lines.length;
-		}
-		const i = str.lastIndexOf( '\n' );
-		// eslint-disable-next-line no-bitwise
-		column = ~i ? str.length - i : column + str.length;
-	}
-
-	/**
-	 * Mark position and patch `node.position`.
-	 */
-
-	function position() {
-		const start = { line: lineno, column };
-		return function ( node ) {
-			node.position = new Position( start );
-			whitespace();
-			return node;
-		};
-	}
-
-	/**
-	 * Store position information for a node
-	 */
-
-	function Position( start ) {
-		this.start = start;
-		this.end = { line: lineno, column };
-		this.source = options.source;
-	}
-
-	/**
-	 * Non-enumerable source string
-	 */
-
-	Position.prototype.content = css;
-
-	/**
-	 * Error `msg`.
-	 */
-
-	const errorsList = [];
-
-	function error( msg ) {
-		const err = new Error(
-			options.source + ':' + lineno + ':' + column + ': ' + msg
-		);
-		err.reason = msg;
-		err.filename = options.source;
-		err.line = lineno;
-		err.column = column;
-		err.source = css;
-
-		if ( options.silent ) {
-			errorsList.push( err );
-		} else {
-			throw err;
-		}
-	}
-
-	/**
-	 * Parse stylesheet.
-	 */
-
-	function stylesheet() {
-		const rulesList = rules();
-
-		return {
-			type: 'stylesheet',
-			stylesheet: {
-				source: options.source,
-				rules: rulesList,
-				parsingErrors: errorsList,
-			},
-		};
-	}
-
-	/**
-	 * Opening brace.
-	 */
-
-	function open() {
-		return match( /^{\s*/ );
-	}
-
-	/**
-	 * Closing brace.
-	 */
-
-	function close() {
-		return match( /^}/ );
-	}
-
-	/**
-	 * Parse ruleset.
-	 */
-
-	function rules() {
-		let node;
-		const accumulator = [];
-		whitespace();
-		comments( accumulator );
-		while (
-			css.length &&
-			css.charAt( 0 ) !== '}' &&
-			( node = atrule() || rule() )
-		) {
-			if ( node !== false ) {
-				accumulator.push( node );
-				comments( accumulator );
-			}
-		}
-		return accumulator;
-	}
-
-	/**
-	 * Match `re` and return captures.
-	 */
-
-	function match( re ) {
-		const m = re.exec( css );
-		if ( ! m ) {
-			return;
-		}
-		const str = m[ 0 ];
-		updatePosition( str );
-		css = css.slice( str.length );
-		return m;
-	}
-
-	/**
-	 * Parse whitespace.
-	 */
-
-	function whitespace() {
-		match( /^\s*/ );
-	}
-
-	/**
-	 * Parse comments;
-	 */
-
-	function comments( accumulator ) {
-		let c;
-		accumulator = accumulator || [];
-		// eslint-disable-next-line no-cond-assign
-		while ( ( c = comment() ) ) {
-			if ( c !== false ) {
-				accumulator.push( c );
-			}
-		}
-		return accumulator;
-	}
-
-	/**
-	 * Parse comment.
-	 */
-
-	function comment() {
-		const pos = position();
-		if ( '/' !== css.charAt( 0 ) || '*' !== css.charAt( 1 ) ) {
-			return;
-		}
-
-		let i = 2;
-		while (
-			'' !== css.charAt( i ) &&
-			( '*' !== css.charAt( i ) || '/' !== css.charAt( i + 1 ) )
-		) {
-			++i;
-		}
-		i += 2;
-
-		if ( '' === css.charAt( i - 1 ) ) {
-			return error( 'End of comment missing' );
-		}
-
-		const str = css.slice( 2, i - 2 );
-		column += 2;
-		updatePosition( str );
-		css = css.slice( i );
-		column += 2;
-
-		return pos( {
-			type: 'comment',
-			comment: str,
-		} );
-	}
-
-	/**
-	 * Parse selector.
-	 */
-
-	function selector() {
-		const m = match( /^([^{]+)/ );
-		if ( ! m ) {
-			return;
-		}
-		// FIXME: Remove all comments from selectors http://ostermiller.org/findcomment.html
-		return trim( m[ 0 ] )
-			.replace( /\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '' )
-			.replace( /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function ( matched ) {
-				return matched.replace( /,/g, '\u200C' );
-			} )
-			.split( /\s*(?![^(]*\)),\s*/ )
-			.map( function ( s ) {
-				return s.replace( /\u200C/g, ',' );
-			} );
-	}
-
-	/**
-	 * Parse declaration.
-	 */
-
-	function declaration() {
-		const pos = position();
-
-		// prop.
-		let prop = match( /^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/ );
-		if ( ! prop ) {
-			return;
-		}
-		prop = trim( prop[ 0 ] );
-
-		// :
-		if ( ! match( /^:\s*/ ) ) {
-			return error( "property missing ':'" );
-		}
-
-		// val.
-		const val = match(
-			/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/
-		);
-
-		const ret = pos( {
-			type: 'declaration',
-			property: prop.replace( commentre, '' ),
-			value: val ? trim( val[ 0 ] ).replace( commentre, '' ) : '',
-		} );
-
-		// ;
-		match( /^[;\s]*/ );
-
-		return ret;
-	}
-
-	/**
-	 * Parse declarations.
-	 */
-
-	function declarations() {
-		const decls = [];
-
-		if ( ! open() ) {
-			return error( "missing '{'" );
-		}
-		comments( decls );
-
-		// declarations.
-		let decl;
-		// eslint-disable-next-line no-cond-assign
-		while ( ( decl = declaration() ) ) {
-			if ( decl !== false ) {
-				decls.push( decl );
-				comments( decls );
-			}
-		}
-
-		if ( ! close() ) {
-			return error( "missing '}'" );
-		}
-		return decls;
-	}
-
-	/**
-	 * Parse keyframe.
-	 */
-
-	function keyframe() {
-		let m;
-		const vals = [];
-		const pos = position();
-
-		// eslint-disable-next-line no-cond-assign
-		while ( ( m = match( /^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/ ) ) ) {
-			vals.push( m[ 1 ] );
-			match( /^,\s*/ );
-		}
-
-		if ( ! vals.length ) {
-			return;
-		}
-
-		return pos( {
-			type: 'keyframe',
-			values: vals,
-			declarations: declarations(),
-		} );
-	}
-
-	/**
-	 * Parse keyframes.
-	 */
-
-	function atkeyframes() {
-		const pos = position();
-		let m = match( /^@([-\w]+)?keyframes\s*/ );
-
-		if ( ! m ) {
-			return;
-		}
-		const vendor = m[ 1 ];
-
-		// identifier
-		m = match( /^([-\w]+)\s*/ );
-		if ( ! m ) {
-			return error( '@keyframes missing name' );
-		}
-		const name = m[ 1 ];
-
-		if ( ! open() ) {
-			return error( "@keyframes missing '{'" );
-		}
-
-		let frame;
-		let frames = comments();
-		// eslint-disable-next-line no-cond-assign
-		while ( ( frame = keyframe() ) ) {
-			frames.push( frame );
-			frames = frames.concat( comments() );
-		}
-
-		if ( ! close() ) {
-			return error( "@keyframes missing '}'" );
-		}
-
-		return pos( {
-			type: 'keyframes',
-			name,
-			vendor,
-			keyframes: frames,
-		} );
-	}
-
-	/**
-	 * Parse supports.
-	 */
-
-	function atsupports() {
-		const pos = position();
-		const m = match( /^@supports *([^{]+)/ );
-
-		if ( ! m ) {
-			return;
-		}
-		const supports = trim( m[ 1 ] );
-
-		if ( ! open() ) {
-			return error( "@supports missing '{'" );
-		}
-
-		const style = comments().concat( rules() );
-
-		if ( ! close() ) {
-			return error( "@supports missing '}'" );
-		}
-
-		return pos( {
-			type: 'supports',
-			supports,
-			rules: style,
-		} );
-	}
-
-	/**
-	 * Parse host.
-	 */
-
-	function athost() {
-		const pos = position();
-		const m = match( /^@host\s*/ );
-
-		if ( ! m ) {
-			return;
-		}
-
-		if ( ! open() ) {
-			return error( "@host missing '{'" );
-		}
-
-		const style = comments().concat( rules() );
-
-		if ( ! close() ) {
-			return error( "@host missing '}'" );
-		}
-
-		return pos( {
-			type: 'host',
-			rules: style,
-		} );
-	}
-
-	/**
-	 * Parse media.
-	 */
-
-	function atmedia() {
-		const pos = position();
-		const m = match( /^@media *([^{]+)/ );
-
-		if ( ! m ) {
-			return;
-		}
-		const media = trim( m[ 1 ] );
-
-		if ( ! open() ) {
-			return error( "@media missing '{'" );
-		}
-
-		const style = comments().concat( rules() );
-
-		if ( ! close() ) {
-			return error( "@media missing '}'" );
-		}
-
-		return pos( {
-			type: 'media',
-			media,
-			rules: style,
-		} );
-	}
-
-	/**
-	 * Parse custom-media.
-	 */
-
-	function atcustommedia() {
-		const pos = position();
-		const m = match( /^@custom-media\s+(--[^\s]+)\s*([^{;]+);/ );
-		if ( ! m ) {
-			return;
-		}
-
-		return pos( {
-			type: 'custom-media',
-			name: trim( m[ 1 ] ),
-			media: trim( m[ 2 ] ),
-		} );
-	}
-
-	/**
-	 * Parse paged media.
-	 */
-
-	function atpage() {
-		const pos = position();
-		const m = match( /^@page */ );
-		if ( ! m ) {
-			return;
-		}
-
-		const sel = selector() || [];
-
-		if ( ! open() ) {
-			return error( "@page missing '{'" );
-		}
-		let decls = comments();
-
-		// declarations.
-		let decl;
-		// eslint-disable-next-line no-cond-assign
-		while ( ( decl = declaration() ) ) {
-			decls.push( decl );
-			decls = decls.concat( comments() );
-		}
-
-		if ( ! close() ) {
-			return error( "@page missing '}'" );
-		}
-
-		return pos( {
-			type: 'page',
-			selectors: sel,
-			declarations: decls,
-		} );
-	}
-
-	/**
-	 * Parse document.
-	 */
-
-	function atdocument() {
-		const pos = position();
-		const m = match( /^@([-\w]+)?document *([^{]+)/ );
-		if ( ! m ) {
-			return;
-		}
-
-		const vendor = trim( m[ 1 ] );
-		const doc = trim( m[ 2 ] );
-
-		if ( ! open() ) {
-			return error( "@document missing '{'" );
-		}
-
-		const style = comments().concat( rules() );
-
-		if ( ! close() ) {
-			return error( "@document missing '}'" );
-		}
-
-		return pos( {
-			type: 'document',
-			document: doc,
-			vendor,
-			rules: style,
-		} );
-	}
-
-	/**
-	 * Parse font-face.
-	 */
-
-	function atfontface() {
-		const pos = position();
-		const m = match( /^@font-face\s*/ );
-		if ( ! m ) {
-			return;
-		}
-
-		if ( ! open() ) {
-			return error( "@font-face missing '{'" );
-		}
-		let decls = comments();
-
-		// declarations.
-		let decl;
-		// eslint-disable-next-line no-cond-assign
-		while ( ( decl = declaration() ) ) {
-			decls.push( decl );
-			decls = decls.concat( comments() );
-		}
-
-		if ( ! close() ) {
-			return error( "@font-face missing '}'" );
-		}
-
-		return pos( {
-			type: 'font-face',
-			declarations: decls,
-		} );
-	}
-
-	/**
-	 * Parse import
-	 */
-
-	const atimport = _compileAtrule( 'import' );
-
-	/**
-	 * Parse charset
-	 */
-
-	const atcharset = _compileAtrule( 'charset' );
-
-	/**
-	 * Parse namespace
-	 */
-
-	const atnamespace = _compileAtrule( 'namespace' );
-
-	/**
-	 * Parse non-block at-rules
-	 */
-
-	function _compileAtrule( name ) {
-		const re = new RegExp( '^@' + name + '\\s*([^;]+);' );
-		return function () {
-			const pos = position();
-			const m = match( re );
-			if ( ! m ) {
-				return;
-			}
-			const ret = { type: name };
-			ret[ name ] = m[ 1 ].trim();
-			return pos( ret );
-		};
-	}
-
-	/**
-	 * Parse at rule.
-	 */
-
-	function atrule() {
-		if ( css[ 0 ] !== '@' ) {
-			return;
-		}
-
-		return (
-			atkeyframes() ||
-			atmedia() ||
-			atcustommedia() ||
-			atsupports() ||
-			atimport() ||
-			atcharset() ||
-			atnamespace() ||
-			atdocument() ||
-			atpage() ||
-			athost() ||
-			atfontface()
-		);
-	}
-
-	/**
-	 * Parse rule.
-	 */
-
-	function rule() {
-		const pos = position();
-		const sel = selector();
-
-		if ( ! sel ) {
-			return error( 'selector missing' );
-		}
-		comments();
-
-		return pos( {
-			type: 'rule',
-			selectors: sel,
-			declarations: declarations(),
-		} );
-	}
-
-	return addParent( stylesheet() );
-}
-
-/**
- * Trim `str`.
- */
-
-function trim( str ) {
-	return str ? str.replace( /^\s+|\s+$/g, '' ) : '';
-}
-
-/**
- * Adds non-enumerable parent node reference to each node.
- */
-
-function addParent( obj, parent ) {
-	const isNode = obj && typeof obj.type === 'string';
-	const childParent = isNode ? obj : parent;
-
-	for ( const k in obj ) {
-		const value = obj[ k ];
-		if ( Array.isArray( value ) ) {
-			value.forEach( function ( v ) {
-				addParent( v, childParent );
-			} );
-		} else if ( value && typeof value === 'object' ) {
-			addParent( value, childParent );
-		}
-	}
-
-	if ( isNode ) {
-		Object.defineProperty( obj, 'parent', {
-			configurable: true,
-			writable: true,
-			enumerable: false,
-			value: parent || null,
-		} );
-	}
-
-	return obj;
-}
-
-/* eslint-enable @wordpress/no-unused-vars-before-return */
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/compiler.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/compiler.js
deleted file mode 100644
index d2500b730424f7..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/compiler.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-/**
- * Expose `Compiler`.
- */
-
-export default Compiler;
-
-/**
- * Initialize a compiler.
- */
-
-function Compiler( opts ) {
-	this.options = opts || {};
-}
-
-/**
- * Emit `str`
- */
-
-Compiler.prototype.emit = function ( str ) {
-	return str;
-};
-
-/**
- * Visit `node`.
- */
-
-Compiler.prototype.visit = function ( node ) {
-	return this[ node.type ]( node );
-};
-
-/**
- * Map visit over array of `nodes`, optionally using a `delim`
- */
-
-Compiler.prototype.mapVisit = function ( nodes, delim ) {
-	let buf = '';
-	delim = delim || '';
-
-	for ( let i = 0, length = nodes.length; i < length; i++ ) {
-		buf += this.visit( nodes[ i ] );
-		if ( delim && i < length - 1 ) {
-			buf += this.emit( delim );
-		}
-	}
-
-	return buf;
-};
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
deleted file mode 100644
index e7305659e1b259..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
+++ /dev/null
@@ -1,225 +0,0 @@
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-/**
- * External dependencies
- */
-import inherits from 'inherits';
-
-/**
- * Internal dependencies
- */
-import Base from './compiler';
-
-/**
- * Expose compiler.
- */
-
-export default Compiler;
-
-/**
- * Initialize a new `Compiler`.
- */
-
-function Compiler( options ) {
-	Base.call( this, options );
-}
-
-/**
- * Inherit from `Base.prototype`.
- */
-
-inherits( Compiler, Base );
-
-/**
- * Compile `node`.
- */
-
-Compiler.prototype.compile = function ( node ) {
-	return node.stylesheet.rules.map( this.visit, this ).join( '' );
-};
-
-/**
- * Visit comment node.
- */
-
-Compiler.prototype.comment = function ( node ) {
-	return this.emit( '', node.position );
-};
-
-/**
- * Visit import node.
- */
-
-Compiler.prototype.import = function ( node ) {
-	return this.emit( '@import ' + node.import + ';', node.position );
-};
-
-/**
- * Visit media node.
- */
-
-Compiler.prototype.media = function ( node ) {
-	return (
-		this.emit( '@media ' + node.media, node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.rules ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit document node.
- */
-
-Compiler.prototype.document = function ( node ) {
-	const doc = '@' + ( node.vendor || '' ) + 'document ' + node.document;
-
-	return (
-		this.emit( doc, node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.rules ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit charset node.
- */
-
-Compiler.prototype.charset = function ( node ) {
-	return this.emit( '@charset ' + node.charset + ';', node.position );
-};
-
-/**
- * Visit namespace node.
- */
-
-Compiler.prototype.namespace = function ( node ) {
-	return this.emit( '@namespace ' + node.namespace + ';', node.position );
-};
-
-/**
- * Visit supports node.
- */
-
-Compiler.prototype.supports = function ( node ) {
-	return (
-		this.emit( '@supports ' + node.supports, node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.rules ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit keyframes node.
- */
-
-Compiler.prototype.keyframes = function ( node ) {
-	return (
-		this.emit(
-			'@' + ( node.vendor || '' ) + 'keyframes ' + node.name,
-			node.position
-		) +
-		this.emit( '{' ) +
-		this.mapVisit( node.keyframes ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit keyframe node.
- */
-
-Compiler.prototype.keyframe = function ( node ) {
-	const decls = node.declarations;
-
-	return (
-		this.emit( node.values.join( ',' ), node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( decls ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit page node.
- */
-
-Compiler.prototype.page = function ( node ) {
-	const sel = node.selectors.length ? node.selectors.join( ', ' ) : '';
-
-	return (
-		this.emit( '@page ' + sel, node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.declarations ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit font-face node.
- */
-
-Compiler.prototype[ 'font-face' ] = function ( node ) {
-	return (
-		this.emit( '@font-face', node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.declarations ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit host node.
- */
-
-Compiler.prototype.host = function ( node ) {
-	return (
-		this.emit( '@host', node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( node.rules ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit custom-media node.
- */
-
-Compiler.prototype[ 'custom-media' ] = function ( node ) {
-	return this.emit(
-		'@custom-media ' + node.name + ' ' + node.media + ';',
-		node.position
-	);
-};
-
-/**
- * Visit rule node.
- */
-
-Compiler.prototype.rule = function ( node ) {
-	const decls = node.declarations;
-	if ( ! decls.length ) {
-		return '';
-	}
-
-	return (
-		this.emit( node.selectors.join( ',' ), node.position ) +
-		this.emit( '{' ) +
-		this.mapVisit( decls ) +
-		this.emit( '}' )
-	);
-};
-
-/**
- * Visit declaration node.
- */
-
-Compiler.prototype.declaration = function ( node ) {
-	return (
-		this.emit( node.property + ':' + node.value, node.position ) +
-		this.emit( ';' )
-	);
-};
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
deleted file mode 100644
index 41ba6e35b2eb5e..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
+++ /dev/null
@@ -1,273 +0,0 @@
-/* eslint-disable @wordpress/no-unused-vars-before-return */
-
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-/**
- * External dependencies
- */
-import inherits from 'inherits';
-
-/**
- * Internal dependencies
- */
-import Base from './compiler';
-
-/**
- * Expose compiler.
- */
-
-export default Compiler;
-
-/**
- * Initialize a new `Compiler`.
- */
-
-function Compiler( options ) {
-	options = options || {};
-	Base.call( this, options );
-	this.indentation = options.indent;
-}
-
-/**
- * Inherit from `Base.prototype`.
- */
-
-inherits( Compiler, Base );
-
-/**
- * Compile `node`.
- */
-
-Compiler.prototype.compile = function ( node ) {
-	return this.stylesheet( node );
-};
-
-/**
- * Visit stylesheet node.
- */
-
-Compiler.prototype.stylesheet = function ( node ) {
-	return this.mapVisit( node.stylesheet.rules, '\n\n' );
-};
-
-/**
- * Visit comment node.
- */
-
-Compiler.prototype.comment = function ( node ) {
-	return this.emit(
-		this.indent() + '/*' + node.comment + '*/',
-		node.position
-	);
-};
-
-/**
- * Visit import node.
- */
-
-Compiler.prototype.import = function ( node ) {
-	return this.emit( '@import ' + node.import + ';', node.position );
-};
-
-/**
- * Visit media node.
- */
-
-Compiler.prototype.media = function ( node ) {
-	return (
-		this.emit( '@media ' + node.media, node.position ) +
-		this.emit( ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( node.rules, '\n\n' ) +
-		this.emit( this.indent( -1 ) + '\n}' )
-	);
-};
-
-/**
- * Visit document node.
- */
-
-Compiler.prototype.document = function ( node ) {
-	const doc = '@' + ( node.vendor || '' ) + 'document ' + node.document;
-
-	return (
-		this.emit( doc, node.position ) +
-		this.emit( ' ' + ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( node.rules, '\n\n' ) +
-		this.emit( this.indent( -1 ) + '\n}' )
-	);
-};
-
-/**
- * Visit charset node.
- */
-
-Compiler.prototype.charset = function ( node ) {
-	return this.emit( '@charset ' + node.charset + ';', node.position );
-};
-
-/**
- * Visit namespace node.
- */
-
-Compiler.prototype.namespace = function ( node ) {
-	return this.emit( '@namespace ' + node.namespace + ';', node.position );
-};
-
-/**
- * Visit supports node.
- */
-
-Compiler.prototype.supports = function ( node ) {
-	return (
-		this.emit( '@supports ' + node.supports, node.position ) +
-		this.emit( ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( node.rules, '\n\n' ) +
-		this.emit( this.indent( -1 ) + '\n}' )
-	);
-};
-
-/**
- * Visit keyframes node.
- */
-
-Compiler.prototype.keyframes = function ( node ) {
-	return (
-		this.emit(
-			'@' + ( node.vendor || '' ) + 'keyframes ' + node.name,
-			node.position
-		) +
-		this.emit( ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( node.keyframes, '\n' ) +
-		this.emit( this.indent( -1 ) + '}' )
-	);
-};
-
-/**
- * Visit keyframe node.
- */
-
-Compiler.prototype.keyframe = function ( node ) {
-	const decls = node.declarations;
-
-	return (
-		this.emit( this.indent() ) +
-		this.emit( node.values.join( ', ' ), node.position ) +
-		this.emit( ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( decls, '\n' ) +
-		this.emit( this.indent( -1 ) + '\n' + this.indent() + '}\n' )
-	);
-};
-
-/**
- * Visit page node.
- */
-
-Compiler.prototype.page = function ( node ) {
-	const sel = node.selectors.length ? node.selectors.join( ', ' ) + ' ' : '';
-
-	return (
-		this.emit( '@page ' + sel, node.position ) +
-		this.emit( '{\n' ) +
-		this.emit( this.indent( 1 ) ) +
-		this.mapVisit( node.declarations, '\n' ) +
-		this.emit( this.indent( -1 ) ) +
-		this.emit( '\n}' )
-	);
-};
-
-/**
- * Visit font-face node.
- */
-
-Compiler.prototype[ 'font-face' ] = function ( node ) {
-	return (
-		this.emit( '@font-face ', node.position ) +
-		this.emit( '{\n' ) +
-		this.emit( this.indent( 1 ) ) +
-		this.mapVisit( node.declarations, '\n' ) +
-		this.emit( this.indent( -1 ) ) +
-		this.emit( '\n}' )
-	);
-};
-
-/**
- * Visit host node.
- */
-
-Compiler.prototype.host = function ( node ) {
-	return (
-		this.emit( '@host', node.position ) +
-		this.emit( ' {\n' + this.indent( 1 ) ) +
-		this.mapVisit( node.rules, '\n\n' ) +
-		this.emit( this.indent( -1 ) + '\n}' )
-	);
-};
-
-/**
- * Visit custom-media node.
- */
-
-Compiler.prototype[ 'custom-media' ] = function ( node ) {
-	return this.emit(
-		'@custom-media ' + node.name + ' ' + node.media + ';',
-		node.position
-	);
-};
-
-/**
- * Visit rule node.
- */
-
-Compiler.prototype.rule = function ( node ) {
-	const indent = this.indent();
-	const decls = node.declarations;
-	if ( ! decls.length ) {
-		return '';
-	}
-
-	return (
-		this.emit(
-			node.selectors
-				.map( function ( s ) {
-					return indent + s;
-				} )
-				.join( ',\n' ),
-			node.position
-		) +
-		this.emit( ' {\n' ) +
-		this.emit( this.indent( 1 ) ) +
-		this.mapVisit( decls, '\n' ) +
-		this.emit( this.indent( -1 ) ) +
-		this.emit( '\n' + this.indent() + '}' )
-	);
-};
-
-/**
- * Visit declaration node.
- */
-
-Compiler.prototype.declaration = function ( node ) {
-	return (
-		this.emit( this.indent() ) +
-		this.emit( node.property + ': ' + node.value, node.position ) +
-		this.emit( ';' )
-	);
-};
-
-/**
- * Increase, decrease or return current indentation.
- */
-
-Compiler.prototype.indent = function ( level ) {
-	this.level = this.level || 1;
-
-	if ( null !== level ) {
-		this.level += level;
-		return '';
-	}
-
-	return Array( this.level ).join( this.indentation || '  ' );
-};
-
-/* eslint-enable @wordpress/no-unused-vars-before-return */
diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js
deleted file mode 100644
index 2f332cdb52bec9..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/ast/stringify/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// Adapted from https://github.com/reworkcss/css
-// because we needed to remove source map support.
-
-/**
- * Internal dependencies
- */
-import Compressed from './compress';
-import Identity from './identity';
-
-/**
- * Stringfy the given AST `node`.
- *
- * Options:
- *
- *  - `compress` space-optimized output
- *  - `sourcemap` return an object with `.code` and `.map`
- *
- * @param {Object} node
- * @param {Object} [options]
- * @return {string}
- */
-
-export default function ( node, options ) {
-	options = options || {};
-
-	const compiler = options.compress
-		? new Compressed( options )
-		: new Identity( options );
-
-	const code = compiler.compile( node );
-	return code;
-}
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 854ffd11da2ce1..170f770d63d5d4 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -1,40 +1,194 @@
 /**
  * External dependencies
  */
-import { map } from 'lodash';
+import * as parsel from 'parsel-js';
+import Processor from 'postcss/lib/processor';
+import CssSyntaxError from 'postcss/lib/css-syntax-error';
+import prefixSelector from 'postcss-prefix-selector';
+import rebaseUrl from 'postcss-urlrebase';
+
+const cacheByWrapperSelector = new Map();
+
+const ROOT_SELECTOR_TOKENS = [
+	{ type: 'type', content: 'body' },
+	{ type: 'type', content: 'html' },
+	{ type: 'pseudo-class', content: ':root' },
+	{ type: 'pseudo-class', content: ':where(body)' },
+	{ type: 'pseudo-class', content: ':where(:root)' },
+	{ type: 'pseudo-class', content: ':where(html)' },
+];
 
 /**
- * WordPress dependencies
+ * Prefixes root selectors in a way that ensures consistent specificity.
+ * This requires special handling, since prefixing a classname before
+ * html, body, or :root will generally result in an invalid selector.
+ *
+ * Some libraries will simply replace the root selector with the prefix
+ * instead, but this results in inconsistent specificity.
+ *
+ * This function instead inserts the prefix after the root tags but before
+ * any other part of the selector. This results in consistent specificity:
+ * - If a `:where()` selector is used for the prefix, all selectors output
+ *   by `transformStyles` will have no specificity increase.
+ * - If a classname, id, or something else is used as the prefix, all selectors
+ *   will have the same specificity bump when transformed.
+ *
+ * @param {string} prefix   The prefix.
+ * @param {string} selector The selector.
+ *
+ * @return {string} The prefixed root selector.
  */
-import { compose } from '@wordpress/compose';
+function prefixRootSelector( prefix, selector ) {
+	// Use a tokenizer, since regular expressions are unreliable.
+	const tokenized = parsel.tokenize( selector );
+
+	// Find the last token that contains a root selector by walking back
+	// through the tokens.
+	const lastRootIndex = tokenized.findLastIndex( ( { content, type } ) => {
+		return ROOT_SELECTOR_TOKENS.some(
+			( rootSelector ) =>
+				content === rootSelector.content && type === rootSelector.type
+		);
+	} );
+
+	// Walk forwards to find the combinator after the last root.
+	// This is where the root ends and the rest of the selector begins,
+	// and the index to insert before.
+	// Doing it this way takes into account that a root selector like
+	// 'body' may have additional id/class/pseudo-class/attribute-selector
+	// parts chained to it, which is difficult to quantify using a regex.
+	let insertionPoint = -1;
+	for ( let i = lastRootIndex + 1; i < tokenized.length; i++ ) {
+		if ( tokenized[ i ].type === 'combinator' ) {
+			insertionPoint = i;
+			break;
+		}
+	}
+
+	// Tokenize and insert the prefix with a ' ' combinator before it.
+	const tokenizedPrefix = parsel.tokenize( prefix );
+	tokenized.splice(
+		// Insert at the insertion point, or the end.
+		insertionPoint === -1 ? tokenized.length : insertionPoint,
+		0,
+		{
+			type: 'combinator',
+			content: ' ',
+		},
+		...tokenizedPrefix
+	);
+
+	return parsel.stringify( tokenized );
+}
+
+function transformStyle(
+	{ css, ignoredSelectors = [], baseURL },
+	wrapperSelector = '',
+	transformOptions
+) {
+	// When there is no wrapper selector and no base URL, there is no need
+	// to transform the CSS. This is most cases because in the default
+	// iframed editor, no wrapping is needed, and not many styles
+	// provide a base URL.
+	if ( ! wrapperSelector && ! baseURL ) {
+		return css;
+	}
+
+	try {
+		const excludedSelectors = [
+			...ignoredSelectors,
+			...( transformOptions?.ignoredSelectors ?? [] ),
+			wrapperSelector,
+		];
+
+		return new Processor(
+			[
+				wrapperSelector &&
+					prefixSelector( {
+						prefix: wrapperSelector,
+						transform( prefix, selector, prefixedSelector ) {
+							// For backwards compatibility, don't use the `exclude` option
+							// of postcss-prefix-selector, instead handle it here to match
+							// the behavior of the old library (postcss-prefix-wrap) that
+							// `transformStyle` previously used.
+							if (
+								excludedSelectors.some( ( excludedSelector ) =>
+									excludedSelector instanceof RegExp
+										? selector.match( excludedSelector )
+										: selector.includes( excludedSelector )
+								)
+							) {
+								return selector;
+							}
+
+							const hasRootSelector = ROOT_SELECTOR_TOKENS.some(
+								( rootSelector ) =>
+									selector.startsWith( rootSelector.content )
+							);
+
+							// Reorganize root selectors such that the root part comes before the prefix,
+							// but the prefix still comes before the remaining part of the selector.
+							if ( hasRootSelector ) {
+								return prefixRootSelector( prefix, selector );
+							}
+
+							return prefixedSelector;
+						},
+					} ),
+				baseURL && rebaseUrl( { rootUrl: baseURL } ),
+			].filter( Boolean )
+		).process( css, {} ).css; // use sync PostCSS API
+	} catch ( error ) {
+		if ( error instanceof CssSyntaxError ) {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				error.message + '\n' + error.showSourceCode( false )
+			);
+		} else {
+			// eslint-disable-next-line no-console
+			console.warn(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				error
+			);
+		}
+
+		return null;
+	}
+}
 
 /**
- * Internal dependencies
+ * @typedef {Object} EditorStyle
+ * @property {string}    css              the CSS block(s), as a single string.
+ * @property {?string}   baseURL          the base URL to be used as the reference when rewritting urls.
+ * @property {?string[]} ignoredSelectors the selectors not to wrap.
+ */
+
+/**
+ * @typedef {Object} TransformOptions
+ * @property {?string[]} ignoredSelectors the selectors not to wrap.
  */
-import traverse from './traverse';
-import urlRewrite from './transforms/url-rewrite';
-import wrap from './transforms/wrap';
 
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
- * @param {Array}  styles           CSS rules.
- * @param {string} wrapperClassName Wrapper Class Name.
+ * @param {EditorStyle[]}    styles           CSS rules.
+ * @param {string}           wrapperSelector  Wrapper selector.
+ * @param {TransformOptions} transformOptions Additional options for style transformation.
  * @return {Array} converted rules.
  */
-const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map( styles, ( { css, baseURL } ) => {
-		const transforms = [];
-		if ( wrapperClassName ) {
-			transforms.push( wrap( wrapperClassName ) );
+const transformStyles = ( styles, wrapperSelector = '', transformOptions ) => {
+	let cache = cacheByWrapperSelector.get( wrapperSelector );
+	if ( ! cache ) {
+		cache = new WeakMap();
+		cacheByWrapperSelector.set( wrapperSelector, cache );
+	}
+	return styles.map( ( style ) => {
+		let css = cache.get( style );
+		if ( ! css ) {
+			css = transformStyle( style, wrapperSelector, transformOptions );
+			cache.set( style, css );
 		}
-		if ( baseURL ) {
-			transforms.push( urlRewrite( baseURL ) );
-		}
-		if ( transforms.length ) {
-			return traverse( css, compose( transforms ) );
-		}
-
 		return css;
 	} );
 };
diff --git a/packages/block-editor/src/utils/transform-styles/test/__snapshots__/traverse.js.snap b/packages/block-editor/src/utils/transform-styles/test/__snapshots__/traverse.js.snap
deleted file mode 100644
index 1ff3cab7d63365..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/test/__snapshots__/traverse.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSS traverse Should traverse the CSS 1`] = `
-"namespace h1 {
-color: red;
-}"
-`;
diff --git a/packages/block-editor/src/utils/transform-styles/test/traverse.js b/packages/block-editor/src/utils/transform-styles/test/traverse.js
deleted file mode 100644
index bb1be2635fe535..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/test/traverse.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import traverse from '../traverse';
-
-describe( 'CSS traverse', () => {
-	it( 'Should traverse the CSS', () => {
-		const input = `h1 { color: red; }`;
-		const output = traverse( input, ( node ) => {
-			if ( node.type === 'rule' ) {
-				return {
-					...node,
-					selectors: node.selectors.map(
-						( selector ) => 'namespace ' + selector
-					),
-				};
-			}
-
-			return node;
-		} );
-
-		expect( output ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/url-rewrite.js.snap b/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/url-rewrite.js.snap
deleted file mode 100644
index 48aaf43221e7d5..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/url-rewrite.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`URL rewrite should not replace absolute paths 1`] = `
-"h1 {
-background: url(/images/test.png);
-}"
-`;
-
-exports[`URL rewrite should not replace remote paths 1`] = `
-"h1 {
-background: url(http://wp.org/images/test.png);
-}"
-`;
-
-exports[`URL rewrite should replace complex relative paths 1`] = `
-"h1 {
-background: url(http://wp-site.local/themes/gut/images/test.png);
-}"
-`;
-
-exports[`URL rewrite should replace relative paths 1`] = `
-"h1 {
-background: url(http://wp-site.local/themes/gut/css/images/test.png);
-}"
-`;
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
deleted file mode 100644
index 9060dda7470295..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSS selector wrap should ignore font-face selectors 1`] = `
-"@font-face {
-font-family: myFirstFont;
-src: url(sansation_light.woff);
-}"
-`;
-
-exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes edit-post__fade-in-animation {
-from {
-opacity: 0;
-}
-}"
-`;
-
-exports[`CSS selector wrap should ignore selectors 1`] = `
-".my-namespace h1,
-body {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should replace root tags 1`] = `
-".my-namespace,
-.my-namespace h1 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should wrap multiple selectors 1`] = `
-".my-namespace h1,
-.my-namespace h2 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should wrap regular selectors 1`] = `
-".my-namespace h1 {
-color: red;
-}"
-`;
-
-exports[`CSS selector wrap should replace :root selectors 1`] = `
-".my-namespace {
---my-color: #ff0000;
-}"
-`;
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/url-rewrite.js b/packages/block-editor/src/utils/transform-styles/transforms/test/url-rewrite.js
deleted file mode 100644
index abbbf0754187e3..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/url-rewrite.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Internal dependencies
- */
-import traverse from '../../traverse';
-import rewrite from '../url-rewrite';
-
-describe( 'URL rewrite', () => {
-	it( 'should replace relative paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace complex relative paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(../images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should not replace absolute paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(/images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should not replace remote paths', () => {
-		const callback = rewrite( 'http://wp-site.local/themes/gut/css/' );
-		const input = `h1 { background: url(http://wp.org/images/test.png); }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
deleted file mode 100644
index 47035da70de2d8..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Internal dependencies
- */
-import traverse from '../../traverse';
-import wrap from '../wrap';
-
-describe( 'CSS selector wrap', () => {
-	it( 'should wrap regular selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `h1 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should wrap multiple selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `h1, h2 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore selectors', () => {
-		const callback = wrap( '.my-namespace', [ 'body' ] );
-		const input = `h1, body { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace root tags', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `body, h1 { color: red; }`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore keyframes', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		@keyframes edit-post__fade-in-animation {
-			from {
-				opacity: 0;
-			}
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should ignore font-face selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		@font-face {
-			font-family: myFirstFont;
-			src: url(sansation_light.woff);
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-
-	it( 'should replace :root selectors', () => {
-		const callback = wrap( '.my-namespace' );
-		const input = `
-		:root {
-			--my-color: #ff0000;
-		}`;
-		const output = traverse( input, callback );
-
-		expect( output ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js b/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
deleted file mode 100644
index e3461cb1088d78..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/url-rewrite.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * Return `true` if the given path is http/https.
- *
- * @param {string} filePath path
- *
- * @return {boolean} is remote path.
- */
-function isRemotePath( filePath ) {
-	return /^(?:https?:)?\/\//.test( filePath );
-}
-
-/**
- * Return `true` if the given filePath is an absolute url.
- *
- * @param {string} filePath path
- *
- * @return {boolean} is absolute path.
- */
-function isAbsolutePath( filePath ) {
-	return /^\/(?!\/)/.test( filePath );
-}
-
-/**
- * Whether or not the url should be inluded.
- *
- * @param {Object} meta url meta info
- *
- * @return {boolean} is valid.
- */
-function isValidURL( meta ) {
-	// Ignore hashes or data uris.
-	if (
-		meta.value.indexOf( 'data:' ) === 0 ||
-		meta.value.indexOf( '#' ) === 0
-	) {
-		return false;
-	}
-
-	if ( isAbsolutePath( meta.value ) ) {
-		return false;
-	}
-
-	// Do not handle the http/https urls if `includeRemote` is false.
-	if ( isRemotePath( meta.value ) ) {
-		return false;
-	}
-
-	return true;
-}
-
-/**
- * Get the absolute path of the url, relative to the basePath
- *
- * @param {string} str     the url
- * @param {string} baseURL base URL
- *
- * @return {string} the full path to the file
- */
-function getResourcePath( str, baseURL ) {
-	return new URL( str, baseURL ).toString();
-}
-
-/**
- * Process the single `url()` pattern
- *
- * @param {string} baseURL the base URL for relative URLs.
- *
- * @return {Promise} the Promise.
- */
-function processURL( baseURL ) {
-	return ( meta ) => ( {
-		...meta,
-		newUrl:
-			'url(' +
-			meta.before +
-			meta.quote +
-			getResourcePath( meta.value, baseURL ) +
-			meta.quote +
-			meta.after +
-			')',
-	} );
-}
-
-/**
- * Get all `url()`s, and return the meta info
- *
- * @param {string} value decl.value.
- *
- * @return {Array} the urls.
- */
-function getURLs( value ) {
-	const reg = /url\((\s*)(['"]?)(.+?)\2(\s*)\)/g;
-	let match;
-	const URLs = [];
-
-	while ( ( match = reg.exec( value ) ) !== null ) {
-		const meta = {
-			source: match[ 0 ],
-			before: match[ 1 ],
-			quote: match[ 2 ],
-			value: match[ 3 ],
-			after: match[ 4 ],
-		};
-		if ( isValidURL( meta ) ) {
-			URLs.push( meta );
-		}
-	}
-	return URLs;
-}
-
-/**
- * Replace the raw value's `url()` segment to the new value
- *
- * @param {string} raw  the raw value.
- * @param {Array}  URLs the URLs to replace.
- *
- * @return {string} the new value.
- */
-function replaceURLs( raw, URLs ) {
-	URLs.forEach( ( item ) => {
-		raw = raw.replace( item.source, item.newUrl );
-	} );
-
-	return raw;
-}
-
-const rewrite = ( rootURL ) => ( node ) => {
-	if ( node.type === 'declaration' ) {
-		const updatedURLs = getURLs( node.value ).map( processURL( rootURL ) );
-		return {
-			...node,
-			value: replaceURLs( node.value, updatedURLs ),
-		};
-	}
-
-	return node;
-};
-
-export default rewrite;
diff --git a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
deleted file mode 100644
index e61c78dc7e452f..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/transforms/wrap.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.
- */
-const IS_ROOT_TAG = /^(body|html|:root).*$/;
-
-/**
- * Creates a callback to modify selectors so they only apply within a certain
- * namespace.
- *
- * @param {string}   namespace Namespace to prefix selectors with.
- * @param {string[]} ignore    Selectors to not prefix.
- *
- * @return {(node: Object) => Object} Callback to wrap selectors.
- */
-const wrap =
-	( namespace, ignore = [] ) =>
-	( node ) => {
-		/**
-		 * Updates selector if necessary.
-		 *
-		 * @param {string} selector Selector to modify.
-		 *
-		 * @return {string} Updated selector.
-		 */
-		const updateSelector = ( selector ) => {
-			if ( ignore.includes( selector.trim() ) ) {
-				return selector;
-			}
-
-			// Anything other than a root tag is always prefixed.
-			{
-				if ( ! selector.match( IS_ROOT_TAG ) ) {
-					return namespace + ' ' + selector;
-				}
-			}
-
-			// HTML and Body elements cannot be contained within our container so lets extract their styles.
-			return selector.replace( /^(body|html|:root)/, namespace );
-		};
-
-		if ( node.type === 'rule' ) {
-			return {
-				...node,
-				selectors: node.selectors.map( updateSelector ),
-			};
-		}
-
-		return node;
-	};
-
-export default wrap;
diff --git a/packages/block-editor/src/utils/transform-styles/traverse.js b/packages/block-editor/src/utils/transform-styles/traverse.js
deleted file mode 100644
index 28ad59b4ea7996..00000000000000
--- a/packages/block-editor/src/utils/transform-styles/traverse.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import traverse from 'traverse';
-
-/**
- * Internal dependencies
- */
-import { parse, stringify } from './ast';
-
-function traverseCSS( css, callback ) {
-	try {
-		const parsed = parse( css );
-
-		const updated = traverse.map( parsed, function ( node ) {
-			if ( ! node ) {
-				return node;
-			}
-			const updatedNode = callback( node );
-			return this.update( updatedNode );
-		} );
-
-		return stringify( updated );
-	} catch ( err ) {
-		// eslint-disable-next-line no-console
-		console.warn( 'Error while traversing the CSS: ' + err );
-
-		return null;
-	}
-}
-
-export default traverseCSS;
diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js
new file mode 100644
index 00000000000000..0f98577f11bf65
--- /dev/null
+++ b/packages/block-editor/src/utils/use-notify-copy.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+export function useNotifyCopy() {
+	const { getBlockName } = useSelect( blockEditorStore );
+	const { getBlockType } = useSelect( blocksStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	return useCallback( ( eventType, selectedBlockClientIds ) => {
+		let notice = '';
+		if ( selectedBlockClientIds.length === 1 ) {
+			const clientId = selectedBlockClientIds[ 0 ];
+			const title = getBlockType( getBlockName( clientId ) )?.title;
+			notice =
+				eventType === 'copy'
+					? sprintf(
+							// Translators: Name of the block being copied, e.g. "Paragraph".
+							__( 'Copied "%s" to clipboard.' ),
+							title
+					  )
+					: sprintf(
+							// Translators: Name of the block being cut, e.g. "Paragraph".
+							__( 'Moved "%s" to clipboard.' ),
+							title
+					  );
+		} else {
+			notice =
+				eventType === 'copy'
+					? sprintf(
+							// Translators: %d: Number of blocks being copied.
+							_n(
+								'Copied %d block to clipboard.',
+								'Copied %d blocks to clipboard.',
+								selectedBlockClientIds.length
+							),
+							selectedBlockClientIds.length
+					  )
+					: sprintf(
+							// Translators: %d: Number of blocks being cut.
+							_n(
+								'Moved %d block to clipboard.',
+								'Moved %d blocks to clipboard.',
+								selectedBlockClientIds.length
+							),
+							selectedBlockClientIds.length
+					  );
+		}
+		createSuccessNotice( notice, {
+			type: 'snackbar',
+		} );
+	}, [] );
+}
diff --git a/packages/block-editor/tsconfig.json b/packages/block-editor/tsconfig.json
index c2dc4243328b06..a3c7d1ffd88077 100644
--- a/packages/block-editor/tsconfig.json
+++ b/packages/block-editor/tsconfig.json
@@ -1,14 +1,38 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types"
 	},
 	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../api-fetch" },
+		{ "path": "../block-serialization-default-parser" },
+		{ "path": "../blob" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../data" },
+		{ "path": "../date" },
 		{ "path": "../deprecated" },
+		{ "path": "../dom" },
 		{ "path": "../element" },
+		{ "path": "../escape-html" },
+		{ "path": "../priority-queue" },
+		{ "path": "../private-apis" },
 		{ "path": "../hooks" },
-		{ "path": "../data" }
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../is-shallow-equal" },
+		{ "path": "../keycodes" },
+		{ "path": "../notices" },
+		{ "path": "../rich-text" },
+		{ "path": "../style-engine" },
+		{ "path": "../token-list" },
+		{ "path": "../url" },
+		{ "path": "../warning" },
+		{ "path": "../wordcount" }
 	],
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in
diff --git a/packages/block-library/.npmrc b/packages/block-library/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/block-library/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 1dce136b8f867d..47986f12e0fb54 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,127 @@
 
 ## Unreleased
 
+## 9.13.0 (2024-11-27)
+
+## 9.12.0 (2024-11-16)
+
+## 9.11.0 (2024-10-30)
+
+## 9.10.0 (2024-10-16)
+
+## 9.9.0 (2024-10-03)
+
+## 9.8.0 (2024-09-19)
+
+## 9.7.0 (2024-09-05)
+
+## 9.6.0 (2024-08-21)
+
+## 9.5.0 (2024-08-07)
+
+### New Feature
+
+-   Query Loop Block: Moves per page, offset, and pages controls into Inspector Controls. ([#58207](https://github.com/WordPress/gutenberg/pull/58207))
+
+## 9.4.0 (2024-07-24)
+
+## 9.3.0 (2024-07-10)
+
+## 9.2.0 (2024-06-26)
+
+## 9.1.0 (2024-06-15)
+
+## 9.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 8.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 8.34.0 (2024-05-02)
+
+## 8.33.0 (2024-04-19)
+
+## 8.32.0 (2024-04-03)
+
+## 8.31.0 (2024-03-21)
+
+## 8.30.0 (2024-03-06)
+
+## 8.29.0 (2024-02-21)
+
+## 8.28.0 (2024-02-09)
+
+## 8.27.0 (2024-01-24)
+
+## 8.26.0 (2024-01-10)
+
+## 8.25.0 (2023-12-13)
+
+## 8.24.0 (2023-11-29)
+
+## 8.23.0 (2023-11-16)
+
+## 8.22.0 (2023-11-02)
+
+## 8.21.0 (2023-10-18)
+
+### Bug Fixes
+
+-   Fix Image block lightbox missing alt attribute and improve accessibility. ([#54608](https://github.com/WordPress/gutenberg/pull/55010))
+
+## 8.20.0 (2023-10-05)
+
+## 8.19.0 (2023-09-20)
+
+## 8.18.0 (2023-08-31)
+
+## 8.17.0 (2023-08-16)
+
+## 8.16.0 (2023-08-10)
+
+## 8.15.0 (2023-07-20)
+
+## 8.14.0 (2023-07-05)
+
+## 8.13.0 (2023-06-23)
+
+## 8.12.0 (2023-06-07)
+
+## 8.11.0 (2023-05-24)
+
+## 8.10.0 (2023-05-10)
+
+## 8.9.0 (2023-04-26)
+
+## 8.8.0 (2023-04-12)
+
+## 8.7.0 (2023-03-29)
+
+## 8.6.0 (2023-03-15)
+
+## 8.5.0 (2023-03-01)
+
+## 8.4.0 (2023-02-15)
+
+## 8.3.0 (2023-02-01)
+
+## 8.2.0 (2023-01-11)
+
+## 8.1.0 (2023-01-02)
+
+## 8.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([#45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 7.19.0 (2022-11-16)
 
 ## 7.18.0 (2022-11-02)
@@ -14,13 +135,13 @@
 
 ## 7.14.0 (2022-09-13)
 
-### New Feature
+### New Features
 
 -   Made it possible to import individual blocks ([#42258](https://github.com/WordPress/gutenberg/pull/42258)). Check [README](./README.md#loading-individual-blocks) for more information.
 
 ## 7.13.0 (2022-08-24)
 
-### Bug Fix
+### Bug Fixes
 
 -   Ensure all dependencies allow version ranges ([#43355](https://github.com/WordPress/gutenberg/pull/43355)).
 
@@ -38,7 +159,7 @@
 
 ## 7.6.0 (2022-05-18)
 
-### Enhancement
+### Enhancements
 
 -   Declare blocks as \_\_experimental in block.json to automate syncing Gutenberg packages to WordPress ([#40655](https://github.com/WordPress/gutenberg/pull/40655)).
 
@@ -50,11 +171,11 @@
 
 ## 7.2.0 (2022-03-23)
 
-### Bug Fix
+### Bug Fixes
 
 -   Table block: Fix deprecation eligibility to prevent loss of named (color palette) background color ([#39445](https://github.com/WordPress/gutenberg/pull/39445)).
 
-### Enhancement
+### Enhancements
 
 -   Social Icons: Avoid loss of previously selected background color when switching back from "Logos Only" style ([#39276](https://github.com/WordPress/gutenberg/pull/39276)).
 
@@ -62,11 +183,11 @@
 
 ## 7.0.0 (2022-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `GUTENBERG_PHASE` environment variable has been renamed to `IS_GUTENBERG_PLUGIN` and is now a boolean ([#38202](https://github.com/WordPress/gutenberg/pull/38202)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Gallery block: disable edit as html support ([#39318](https://github.com/WordPress/gutenberg/pull/39318)).
 -   Removed unused `@wordpress/escape-html` and `@wordpress/is-shallow-equal` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
@@ -77,13 +198,13 @@
 
 ## 6.0.0 (2021-09-09)
 
-### Breaking Change
+### Breaking Changes
 
 -   Remove the background-colors, foreground-colors, and gradient-colors mixins.
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -109,8 +230,8 @@
 
 ### 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/.
+-   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/>.
 
 ## 2.29.0 (2021-03-17)
 
@@ -130,7 +251,7 @@
 
 ## 2.27.0 (2020-12-17)
 
-### Enhancement
+### Enhancements
 
 -   File Block: Copy url button is moved to Block toolbar.
 -   Code and Preformatted Blocks: delete on backspace from an empty block.
@@ -142,13 +263,13 @@
     ([#26569](https://github.com/WordPress/gutenberg/pull/26569)).
 -   Fix Image Block, reset image dimensions when replace URL. bug mentioned in ([#26333](https://github.com/WordPress/gutenberg/issues/26333)).
 
-### Enhancement
+### Enhancements
 
 -   File Block: Copy url button is moved to Block toolbar.
 
 ## 2.23.0 (2020-09-03)
 
-### Enhancement
+### Enhancements
 
 -   Site title is now a link.
 
@@ -195,7 +316,7 @@
 
 ## 2.3.0 (2019-03-06)
 
-### New Feature
+### New Features
 
 -   Add background color controls for the table block.
 -   Add new `RSS` block ([#7966](https://github.com/WordPress/gutenberg/pull/7966)).
@@ -227,7 +348,7 @@
 
 ## 2.2.2 (2018-11-12)
 
-### Polish
+### Internal
 
 -   Columns Block: Improve usability while editing columns.
 
@@ -241,7 +362,7 @@
 
 ## 2.1.8 (2018-11-03)
 
-### Polish
+### Internal
 
 -   File Block: Create file blocks when dropping multiple files at once.
 
@@ -275,7 +396,7 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/block-library/README.md b/packages/block-library/README.md
index 96ec2d8963b3c3..a6d1984cda98cc 100644
--- a/packages/block-library/README.md
+++ b/packages/block-library/README.md
@@ -66,7 +66,7 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
 
 ⚠️ Adding new blocks to this package **requires** additional steps!
 
-1.  Do not forget to register a new core block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/index.js) file of this package. For example, if you were to add the new core block called `core/blinking-paragraph`, you would have to add something like:
+1.  Do not forget to register a new core block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/index.js) file of this package. For example, if you were to add the new core block called `core/blinking-paragraph`, you would have to add something like:
 
     ```js
     // packages/block-library/src/index.js
@@ -83,7 +83,7 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
     }
     ```
 
-2.  Register the block in the `gutenberg_reregister_core_block_types()` function of the [`lib/blocks.php`](https://github.com/WordPress/gutenberg/blob/trunk/lib/blocks.php) file. Add it to the `block_folders` array if it's a [static block](https://developer.wordpress.org/block-editor/explanations/glossary/#static-block) or to the `block_names` array if it's a [dynamic block](https://developer.wordpress.org/block-editor/explanations/glossary/#dynamic-block).
+2.  Register the block in the `gutenberg_reregister_core_block_types()` function of the [`lib/blocks.php`](https://github.com/WordPress/gutenberg/blob/trunk/lib/blocks.php) file. Add it to the `block_folders` array if it's a [static block](https://developer.wordpress.org/block-editor/getting-started/glossary/#static-block) or to the `block_names` array if it's a [dynamic block](https://developer.wordpress.org/block-editor/getting-started/glossary/#dynamic-block).
 
 3.  Add `init.js` file to the directory of the new block:
 
@@ -98,25 +98,61 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
 
     This file is used when using the option to register individual block from the `@wordpress/block-library` package.
 
-4.  If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser. You only need to reference a `view.min.js` (notice the different file extension) file in the `block.json` file as follows:
+4.  If the block exposes a script module on the front end, it must be included in the package's `package.json` file in the `wpScriptModules` object. This will include the script module when it's bundled for use in WordPress. See [the packages README for more details.](../README.md):
 
     ```json
     {
-    	"viewScript": "file:./view.min.js"
+    	"name": "@wordpress/block-library",
+    	"wpScriptModuleExports": {
+    		"./blinking-paragraph/view": "./build-module/blinking-paragraph/view.js",
+    		"./image/view": "./build-module/image/view.js"
+    		// Add any new script modules here.
+    	}
     }
     ```
 
-    This file will get automatically loaded when the static block is present on the front end. For dynamic block, you need to manually enqueue the view script in `render_callback` of the block, example:
+    For every dynamic block, you need to manually enqueue the view script module in `render_callback` of the block, example:
 
     ```php
     function render_block_core_blinking_paragraph( $attributes, $content ) {
-        $should_load_view_script = ! empty( $attributes['isInteractive'] ) && ! wp_script_is( 'wp-block-blinking-paragraph-view' );
+        $should_load_view_script = ! empty( $attributes['isInteractive'] );
         if ( $should_load_view_script ) {
-    	    wp_enqueue_script( 'wp-block-blinking-paragraph-view' );
+    	    wp_enqueue_script_module( '@wordpress/block-library/blinking-paragraph' );
         }
 
     	return $content;
     }
     ```
 
+### Naming convention for PHP functions
+
+All PHP function names declared within the subdirectories of the `packages/block-library/src/` directory should start with one of the following prefixes:
+
+-   `block_core_<directory_name>`
+-   `render_block_core_<directory_name>`
+-   `register_block_core_<directory_name>`
+
+In this context, `<directory_name>` represents the name of the directory where the corresponding `.php` file is located.
+The directory name is converted to lowercase, and any characters except for letters and digits are replaced with underscores.
+
+#### Example:
+
+For the PHP functions declared in the `packages/block-library/src/my-block/index.php` file, the correct prefixes would be:
+
+-   `block_core_my_block`
+-   `render_block_core_my_block`
+-   `register_block_core_my_block`
+
+#### Using plugin-specific prefixes/suffixes
+
+Unlike in [PHP code in the /lib directory](https://github.com/WordPress/gutenberg/blob/trunk/lib/README.md), you should generally avoid applying plugin-specific prefixes/suffixes such as `gutenberg_` to functions and other code in block PHP files.
+
+There are times, however, when blocks may need to use Gutenberg functions even when a Core-equivalent exists, for example, where a Gutenberg function relies on code that is only available in the plugin.
+
+In such cases, you can use the corresponding Core `wp_` function in the block PHP code, and add its name to [a list of prefixed functions in the Webpack configuration file](https://github.com/WordPress/gutenberg/blob/trunk/tools/webpack/blocks.js#L30).
+
+At build time, Webpack will search for `wp_` functions in that list and replace them with their `gutenberg_` equivalents. This process ensures that the plugin calls the `gutenberg_` functions, but the block will still call the Core `wp_` function when updates are back ported.
+
+Webpack assumes that, prefixes aside, the functions' names are identical: `wp_get_something_useful()` will be replaced with `gutenberg_get_something_useful()`.
+
 <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/block-library/babel-plugin.js b/packages/block-library/babel-plugin.js
index 1fba03a39a35a8..1f32af321cec98 100644
--- a/packages/block-library/babel-plugin.js
+++ b/packages/block-library/babel-plugin.js
@@ -82,7 +82,7 @@ function createBabelPlugin( shouldProcessImport, isGutenbergPlugin ) {
  * For details, check the implementation.
  *
  * @param {Object} path Babel.js AST path representing the import declaration,
- * @return {boolean} Whether the import represents an experimental block.
+ * @return {boolean | undefined} Whether the import represents an experimental block.
  */
 function isImportDeclarationAnExperimentalBlock( path ) {
 	// Only look for wildcard imports like import * as a from "source":
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index d5671a8d30064c..ab95896035c9f0 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.19.0",
+	"version": "9.13.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,57 +19,74 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"wpScriptModuleExports": {
+		"./file/view": "./build-module/file/view.js",
+		"./form/view": "./build-module/form/view.js",
+		"./image/view": "./build-module/image/view.js",
+		"./navigation/view": "./build-module/navigation/view.js",
+		"./query/view": "./build-module/query/view.js",
+		"./search/view": "./build-module/search/view.js"
+	},
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
 		"{src,build,build-module}/*/init.js"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/autop": "file:../autop",
-		"@wordpress/blob": "file:../blob",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/date": "file:../date",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/primitives": "file:../primitives",
-		"@wordpress/reusable-blocks": "file:../reusable-blocks",
-		"@wordpress/rich-text": "file:../rich-text",
-		"@wordpress/server-side-render": "file:../server-side-render",
-		"@wordpress/url": "file:../url",
-		"@wordpress/viewport": "file:../viewport",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/autop": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/interactivity": "*",
+		"@wordpress/interactivity-router": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/server-side-render": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
-		"micromodal": "^0.4.10",
-		"remove-accents": "^0.4.2"
+		"fast-deep-equal": "^3.1.3",
+		"memize": "^2.1.0",
+		"remove-accents": "^0.5.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
index 3e589af452fa97..7fe956a994ed5a 100644
--- a/packages/block-library/src/archives/block.json
+++ b/packages/block-library/src/archives/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/archives",
 	"title": "Archives",
 	"category": "widgets",
@@ -26,10 +26,20 @@
 	},
 	"supports": {
 		"align": true,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -43,6 +53,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-archives-editor"
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 118fa5cfa2d1ad..60b8715988ed94 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -19,6 +19,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ () =>
@@ -29,6 +30,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayAsDropdown && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show label' ) }
 							checked={ showLabel }
 							onChange={ () =>
@@ -39,6 +41,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ () =>
@@ -48,7 +51,9 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<SelectControl
-						label={ __( 'Group by:' ) }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Group by' ) }
 						options={ [
 							{ label: __( 'Year' ), value: 'yearly' },
 							{ label: __( 'Month' ), value: 'monthly' },
diff --git a/packages/block-library/src/archives/editor.scss b/packages/block-library/src/archives/editor.scss
index 6bb1d96431acf7..eb657b595f7141 100644
--- a/packages/block-library/src/archives/editor.scss
+++ b/packages/block-library/src/archives/editor.scss
@@ -1,3 +1,11 @@
 ul.wp-block-archives {
 	padding-left: 2.5em;
 }
+
+// The following styles are to prevent duplicate spacing and borders for the archives
+// block in the editor given it uses server side rendering.
+// See https://github.com/WordPress/gutenberg/pull/63400
+.wp-block-archives .wp-block-archives {
+	margin: 0;
+	border: 0;
+}
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 695affde760a8a..2846b6ca1a03e1 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/archives` block on server.
  *
+ * @since 5.0.0
+ *
  * @see WP_Widget_Archives
  *
  * @param array $attributes The block attributes.
@@ -106,6 +108,8 @@ function render_block_core_archives( $attributes ) {
 
 /**
  * Register archives block.
+ *
+ * @since 5.0.0
  */
 function register_block_core_archives() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
index 13aed788968fb4..9b77efee23cce2 100644
--- a/packages/block-library/src/audio/block.json
+++ b/packages/block-library/src/audio/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/audio",
 	"title": "Audio",
 	"category": "media",
@@ -8,22 +8,26 @@
 	"keywords": [ "music", "sound", "podcast", "recording" ],
 	"textdomain": "default",
 	"attributes": {
+		"blob": {
+			"type": "string",
+			"role": "local"
+		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "audio",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"autoplay": {
 			"type": "boolean",
@@ -49,7 +53,14 @@
 		"align": true,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-audio-editor",
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 47b2f36b2fb342..e3b4ca670f957d 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -1,19 +1,18 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
 	PanelBody,
 	SelectControl,
 	Spinner,
 	ToggleControl,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -21,23 +20,20 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
-	RichText,
 	useBlockProps,
-	store as blockEditorStore,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect, useState, useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon, caption as captionIcon } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { audio as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { usePrevious } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
+import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
@@ -46,56 +42,18 @@ function AudioEdit( {
 	className,
 	setAttributes,
 	onReplace,
-	isSelected,
+	isSelected: isSingleSelected,
 	insertBlocksAfter,
 } ) {
-	const { id, autoplay, caption, loop, preload, src } = attributes;
-	const prevCaption = usePrevious( caption );
-	const [ showCaption, setShowCaption ] = useState( !! caption );
-	const isTemporaryAudio = ! id && isBlobURL( src );
-	const mediaUpload = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().mediaUpload;
-	}, [] );
-
-	useEffect( () => {
-		if ( ! id && isBlobURL( src ) ) {
-			const file = getBlobByURL( src );
-
-			if ( file ) {
-				mediaUpload( {
-					filesList: [ file ],
-					onFileChange: ( [ media ] ) => onSelectAudio( media ),
-					onError: ( e ) => onUploadError( e ),
-					allowedTypes: ALLOWED_MEDIA_TYPES,
-				} );
-			}
-		}
-	}, [] );
-
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
-
-	useEffect( () => {
-		if ( ! isSelected && ! caption ) {
-			setShowCaption( false );
-		}
-	}, [ isSelected, caption ] );
+	const { id, autoplay, loop, preload, src } = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+
+	useUploadMediaFromBlobURL( {
+		url: temporaryURL,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectAudio,
+		onError: onUploadError,
+	} );
 
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
@@ -115,7 +73,8 @@ function AudioEdit( {
 				onReplace( embedBlock );
 				return;
 			}
-			setAttributes( { src: newSrc, id: undefined } );
+			setAttributes( { src: newSrc, id: undefined, blob: undefined } );
+			setTemporaryURL();
 		}
 	}
 
@@ -138,27 +97,37 @@ function AudioEdit( {
 				src: undefined,
 				id: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			setTemporaryURL( media.url );
 			return;
 		}
+
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
 		setAttributes( {
+			blob: undefined,
 			src: media.url,
 			id: media.id,
 			caption: media.caption,
 		} );
+		setTemporaryURL();
 	}
 
-	const classes = classnames( className, {
-		'is-transient': isTemporaryAudio,
+	const classes = clsx( className, {
+		'is-transient': !! temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
-	if ( ! src ) {
+	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -176,48 +145,38 @@ function AudioEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<ToolbarButton
-					onClick={ () => {
-						setShowCaption( ! showCaption );
-						if ( showCaption && caption ) {
-							setAttributes( { caption: undefined } );
-						}
-					} }
-					icon={ captionIcon }
-					isPressed={ showCaption }
-					label={
-						showCaption
-							? __( 'Remove caption' )
-							: __( 'Add caption' )
-					}
-				/>
-			</BlockControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="audio/*"
-					onSelect={ onSelectAudio }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-				/>
-			</BlockControls>
+			{ isSingleSelected && (
+				<BlockControls group="other">
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ src }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="audio/*"
+						onSelect={ onSelectAudio }
+						onSelectURL={ onSelectURL }
+						onError={ onUploadError }
+						onReset={ () => onSelectAudio( undefined ) }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Autoplay' ) }
 						onChange={ toggleAttribute( 'autoplay' ) }
 						checked={ autoplay }
 						help={ getAutoplayHelp }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Loop' ) }
 						onChange={ toggleAttribute( 'loop' ) }
 						checked={ loop }
 					/>
 					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ _x( 'Preload', 'noun; Audio block parameter' ) }
 						value={ preload || '' }
 						// `undefined` is required for the preload attribute to be unset.
@@ -240,36 +199,22 @@ function AudioEdit( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the audio tag if the block is not selected
-					so the user clicking on it won't play the
-					file or change the position slider when the controls are enabled.
+				Disable the audio tag if the block is not selected
+				so the user clicking on it won't play the
+				file or change the position slider when the controls are enabled.
 				*/ }
-				<Disabled isDisabled={ ! isSelected }>
-					<audio controls="controls" src={ src } />
+				<Disabled isDisabled={ ! isSingleSelected }>
+					<audio controls="controls" src={ src ?? temporaryURL } />
 				</Disabled>
-				{ isTemporaryAudio && <Spinner /> }
-				{ showCaption &&
-					( ! RichText.isEmpty( caption ) || isSelected ) && (
-						<RichText
-							tagName="figcaption"
-							className={ __experimentalGetElementClassName(
-								'caption'
-							) }
-							ref={ captionRef }
-							aria-label={ __( 'Audio caption text' ) }
-							placeholder={ __( 'Add caption' ) }
-							value={ caption }
-							onChange={ ( value ) =>
-								setAttributes( { caption: value } )
-							}
-							inlineToolbar
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-							}
-						/>
-					) }
+				{ !! temporaryURL && <Spinner /> }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Audio caption text' ) }
+					showToolbarButton={ isSingleSelected }
+				/>
 			</figure>
 		</>
 	);
diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
index fbc39ba190d3e2..ab2b1b28441286 100644
--- a/packages/block-library/src/audio/edit.native.js
+++ b/packages/block-library/src/audio/edit.native.js
@@ -13,9 +13,9 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
-	AudioPlayer,
 } from '@wordpress/components';
 import {
+	AudioPlayer,
 	BlockCaption,
 	BlockControls,
 	BlockIcon,
@@ -23,6 +23,7 @@ import {
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadProgress,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -30,7 +31,7 @@ import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-import { isURL } from '@wordpress/url';
+import { isURL, getProtocol } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -73,7 +74,7 @@ function AudioEdit( {
 
 	function onSelectURL( newSrc ) {
 		if ( newSrc !== src ) {
-			if ( isURL( newSrc ) ) {
+			if ( isURL( newSrc ) && /^https?:/.test( getProtocol( newSrc ) ) ) {
 				setAttributes( { src: newSrc, id: undefined } );
 			} else {
 				createErrorNotice( __( 'Invalid URL. Audio file not found.' ) );
@@ -211,13 +212,13 @@ function AudioEdit( {
 									label: _x( 'None', '"Preload" value' ),
 								},
 							] }
-							hideCancelButton={ true }
+							hideCancelButton
 						/>
 					</PanelBody>
 				</InspectorControls>
 				<MediaUpload
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ onSelectAudio }
 					onSelectURL={ onSelectURL }
 					render={ ( { open, getMediaOptions } ) => {
@@ -225,9 +226,9 @@ function AudioEdit( {
 					} }
 				/>
 				<BlockCaption
-					accessible={ true }
+					accessible
 					accessibilityLabelCreator={ ( caption ) =>
-						! caption
+						RichText.isEmpty( caption )
 							? /* translators: accessibility text. Empty Audio caption. */
 							  __( 'Audio caption. Empty' )
 							: sprintf(
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index 0d3d05936ef90f..aa1bba1c341d2f 100644
--- a/packages/block-library/src/audio/index.js
+++ b/packages/block-library/src/audio/index.js
@@ -23,6 +23,7 @@ export const settings = {
 		attributes: {
 			src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 		},
+		viewportWidth: 350,
 	},
 	transforms,
 	deprecated,
diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
index 1b3d705dda019a..340ff3ff65f3f2 100644
--- a/packages/block-library/src/audio/style.scss
+++ b/packages/block-library/src/audio/style.scss
@@ -4,7 +4,7 @@
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
index 4a72a64f314b4a..4cf28f7063ad31 100644
--- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -3,8 +3,12 @@
 exports[`Audio block renders audio block error state without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -20,7 +24,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -28,7 +32,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -37,8 +41,12 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
       accessible={true}
@@ -51,24 +59,44 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={
+            {
+              "fill": "gray",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
         </Text>
         <View>
-          Svg
+          <Svg
+            height={16}
+            style={{}}
+            viewBox="-2 -2 24 24"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
           <Text
-            style={Object {}}
+            style={{}}
           >
             Failed to insert audio file. Please tap for options.
           </Text>
@@ -78,8 +106,8 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -91,7 +119,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -99,17 +127,26 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -139,15 +176,16 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -156,7 +194,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -167,8 +205,12 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
 exports[`Audio block renders audio file without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
     }
   }
   accessible={true}
@@ -184,7 +226,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -192,7 +234,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -201,8 +243,12 @@ exports[`Audio block renders audio file without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
+          "busy": undefined,
+          "checked": undefined,
           "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
       accessible={true}
@@ -215,23 +261,35 @@ exports[`Audio block renders audio file without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={
+            {
+              "fill": "gray",
+            }
+          }
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
         </Text>
         <View>
           <Text
-            style={Object {}}
+            style={{}}
           >
             MP3 audio file
           </Text>
@@ -241,6 +299,15 @@ exports[`Audio block renders audio file without crashing 1`] = `
         accessibilityHint="Double tap to listen the audio file"
         accessibilityLabel="Audio Player"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
         focusable={true}
         onClick={[Function]}
@@ -253,7 +320,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       >
         <Text
           style={
-            Object {
+            {
               "color": "white",
             }
           }
@@ -265,8 +332,8 @@ exports[`Audio block renders audio file without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -278,7 +345,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -286,17 +353,26 @@ exports[`Audio block renders audio file without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -326,15 +402,16 @@ exports[`Audio block renders audio file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -343,7 +420,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -355,28 +432,19 @@ exports[`Audio block renders placeholder without crashing 1`] = `
 <View>
   <View
     style={
-      Object {
+      {
         "flex": 1,
       }
     }
   >
     <View
-      accessibilityHint="Double tap to select an audio file"
-      accessibilityLabel="Audio block. Empty"
-      accessibilityRole="button"
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Array [
-            undefined,
+        [
+          [
+            [
+              undefined,
+              undefined,
+            ],
             undefined,
             undefined,
           ],
@@ -384,26 +452,95 @@ exports[`Audio block renders placeholder without crashing 1`] = `
         ]
       }
     >
+      <View>
+        <View
+          style={
+            {
+              "fill": "black",
+            }
+          }
+        >
+          <View
+            style={{}}
+          >
+            <Svg
+              fill="black"
+              height={24}
+              style={{}}
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              Path
+            </Svg>
+          </View>
+        </View>
+        <Text>
+          Audio
+        </Text>
+      </View>
       <View
+        accessibilityHint="Double tap to select an audio file"
+        accessibilityLabel="Audio block. Empty"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 22,
+            "left": 22,
+            "right": 22,
+            "top": 22,
+          }
+        }
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "fill": "gray",
+          {
+            "opacity": 1,
           }
         }
       >
-        <View
-          style={Object {}}
-        >
-          Svg
-        </View>
+        <Text>
+          Add audio
+        </Text>
       </View>
-      <Text>
-        Audio
-      </Text>
-      <Text>
-        ADD AUDIO
-      </Text>
     </View>
   </View>
 </View>
 `;
+
+exports[`Audio block should enable autoplay setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" autoplay></audio></figure>
+<!-- /wp:audio -->"
+`;
+
+exports[`Audio block should enable loop setting 1`] = `
+"<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3" loop></audio></figure>
+<!-- /wp:audio -->"
+`;
diff --git a/packages/block-library/src/audio/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..fab0ae01a55f8c
--- /dev/null
+++ b/packages/block-library/src/audio/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Audio block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Audio block transformations to File block 1`] = `
+"<!-- wp:file {"id":5,"href":"https://cldup.com/59IrU0WJtq.mp3"} -->
+<div class="wp-block-file"><a href="https://cldup.com/59IrU0WJtq.mp3" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->"
+`;
+
+exports[`Audio block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/audio/test/edit.native.js b/packages/block-library/src/audio/test/edit.native.js
index b59c36db2f66e6..7296d595d7aaab 100644
--- a/packages/block-library/src/audio/test/edit.native.js
+++ b/packages/block-library/src/audio/test/edit.native.js
@@ -1,13 +1,23 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	dismissModal,
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	render,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
 import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import {
 	subscribeMediaUpload,
 	sendMediaUpload,
@@ -16,7 +26,7 @@ import {
 /**
  * Internal dependencies
  */
-import { metadata, settings, name } from '../index';
+import { name } from '../index';
 
 // react-native-aztec shouldn't be mocked because these tests are based on
 // snapshot testing where we want to keep the original component.
@@ -24,6 +34,10 @@ jest.unmock( '@wordpress/react-native-aztec' );
 
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 
+const AUDIO_BLOCK = `<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;
+
 let uploadCallBack;
 subscribeMediaUpload.mockImplementation( ( callback ) => {
 	uploadCallBack = callback;
@@ -42,18 +56,9 @@ const getTestComponentWithContent = ( attributes = {} ) => {
 	);
 };
 
-describe( 'Audio block', () => {
-	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( name );
-	} );
+setupCoreBlocks( [ 'core/audio' ] );
 
+describe( 'Audio block', () => {
 	it( 'renders placeholder without crashing', () => {
 		const component = getTestComponentWithContent();
 		const rendered = component.toJSON();
@@ -86,4 +91,42 @@ describe( 'Audio block', () => {
 		const rendered = component.toJSON();
 		expect( rendered ).toMatchSnapshot();
 	} );
+
+	it( 'should gracefully handle invalid URLs', async () => {
+		await initializeEditor();
+
+		await addBlock( screen, 'Audio' );
+		fireEvent.press( screen.getByText( 'Insert from URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Type a URL' ),
+			'h://wordpress.org/audio.mp3'
+		);
+		dismissModal( screen.getByTestId( 'bottom-sheet' ) );
+
+		expect(
+			screen.getByText( 'Invalid URL. Audio file not found.' )
+		).toBeVisible();
+	} );
+
+	it( 'should enable autoplay setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Autoplay' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should enable loop setting', async () => {
+		await initializeEditor( { initialHtml: AUDIO_BLOCK } );
+
+		const audioBlock = getBlock( screen, 'Audio' );
+		fireEvent.press( audioBlock );
+		await openBlockSettings( screen );
+
+		fireEvent.press( screen.getByText( 'Loop' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/block-library/src/audio/test/transforms.native.js b/packages/block-library/src/audio/test/transforms.native.js
new file mode 100644
index 00000000000000..0ed1a1f6306fbf
--- /dev/null
+++ b/packages/block-library/src/audio/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Audio';
+const initialHtml = `
+<!-- wp:audio {"id":5} -->
+<figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
+<!-- /wp:audio -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'File', ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: false,
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
index 2744d36e74ca62..0fc32a56592bdb 100644
--- a/packages/block-library/src/audio/theme.scss
+++ b/packages/block-library/src/audio/theme.scss
@@ -1,4 +1,4 @@
-.wp-block-audio figcaption {
+.wp-block-audio :where(figcaption) {
 	@include caption-style-theme();
 }
 
diff --git a/packages/block-library/src/audio/transforms.js b/packages/block-library/src/audio/transforms.js
index 66b6f57977507c..df6be2d2d52c75 100644
--- a/packages/block-library/src/audio/transforms.js
+++ b/packages/block-library/src/audio/transforms.js
@@ -20,7 +20,7 @@ const transforms = {
 				// It's already done as part of the `componentDidMount`
 				// in the audio block.
 				const block = createBlock( 'core/audio', {
-					src: createBlobURL( file ),
+					blob: createBlobURL( file ),
 				} );
 
 				return block;
diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
index 690ef358a0ca1e..f949e60e0ace15 100644
--- a/packages/block-library/src/avatar/block.json
+++ b/packages/block-library/src/avatar/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/avatar",
 	"title": "Avatar",
 	"category": "theme",
@@ -30,7 +30,11 @@
 		"alignWide": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__experimentalBorder": {
 			"__experimentalSkipSerialization": true,
@@ -46,8 +50,14 @@
 			"text": false,
 			"background": false,
 			"__experimentalDuotone": "img"
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
-	"editorStyle": "wp-block-avatar",
+	"selectors": {
+		"border": ".wp-block-avatar img"
+	},
+	"editorStyle": "wp-block-avatar-editor",
 	"style": "wp-block-avatar"
 }
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
index 7df772677ebb7d..8309bc5e878a0e 100644
--- a/packages/block-library/src/avatar/edit.js
+++ b/packages/block-library/src/avatar/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,6 +35,8 @@ const AvatarInspectorControls = ( {
 	<InspectorControls>
 		<PanelBody title={ __( 'Settings' ) }>
 			<RangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'Image size' ) }
 				onChange={ ( newSize ) =>
 					setAttributes( {
@@ -47,6 +49,7 @@ const AvatarInspectorControls = ( {
 				value={ attributes?.size }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link to user profile' ) }
 				onChange={ () =>
 					setAttributes( { isLink: ! attributes.isLink } )
@@ -55,6 +58,7 @@ const AvatarInspectorControls = ( {
 			/>
 			{ attributes.isLink && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {
@@ -121,17 +125,14 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					{ ...borderProps }
-					className={ classnames(
+					className={ clsx(
 						'avatar',
 						'avatar-' + attributes.size,
 						'photo',
 						'wp-block-avatar__image',
 						borderProps.className
 					) }
-					style={ {
-						...borderProps.style, // Border radius, width and style.
-					} }
+					style={ borderProps.style }
 				/>
 			</ResizableBox>
 		</div>
@@ -187,27 +188,17 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 	return (
 		<>
 			<AvatarInspectorControls
-				selectUser={ true }
+				selectUser
 				attributes={ attributes }
 				avatar={ avatar }
 				setAttributes={ setAttributes }
 			/>
-			<div>
-				{ attributes.isLink ? (
-					<a
-						href="#avatar-pseudo-link"
-						className="wp-block-avatar__link"
-						onClick={ ( event ) => event.preventDefault() }
-					>
-						<ResizableAvatar
-							attributes={ attributes }
-							avatar={ avatar }
-							blockProps={ blockProps }
-							isSelected={ isSelected }
-							setAttributes={ setAttributes }
-						/>
-					</a>
-				) : (
+			{ attributes.isLink ? (
+				<a
+					href="#avatar-pseudo-link"
+					className="wp-block-avatar__link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
 					<ResizableAvatar
 						attributes={ attributes }
 						avatar={ avatar }
@@ -215,8 +206,16 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 						isSelected={ isSelected }
 						setAttributes={ setAttributes }
 					/>
-				) }
-			</div>
+				</a>
+			) : (
+				<ResizableAvatar
+					attributes={ attributes }
+					avatar={ avatar }
+					blockProps={ blockProps }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</>
 	);
 };
diff --git a/packages/block-library/src/avatar/hooks.js b/packages/block-library/src/avatar/hooks.js
index 1f84b5c107682b..d73b604bdef22e 100644
--- a/packages/block-library/src/avatar/hooks.js
+++ b/packages/block-library/src/avatar/hooks.js
@@ -47,9 +47,8 @@ export function useCommentAvatar( { commentId } ) {
 		src: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : defaultAvatar,
 		minSize,
 		maxSize,
-		// translators: %s is the Author name.
 		alt: authorName
-			? // translators: %s is the Author name.
+			? // translators: %s: Author name.
 			  sprintf( __( '%s Avatar' ), authorName )
 			: __( 'Default Avatar' ),
 	};
@@ -89,7 +88,7 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		minSize,
 		maxSize,
 		alt: authorDetails
-			? // translators: %s is the Author name.
+			? // translators: %s: Author name.
 			  sprintf( __( '%s Avatar' ), authorDetails?.name )
 			: __( 'Default Avatar' ),
 	};
diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js
index d318450aec3903..0b3ad9c62c4e30 100644
--- a/packages/block-library/src/avatar/index.js
+++ b/packages/block-library/src/avatar/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/avatar/index.php b/packages/block-library/src/avatar/index.php
index 25f3ad88dcbab6..d4a01c1c3a1e77 100644
--- a/packages/block-library/src/avatar/index.php
+++ b/packages/block-library/src/avatar/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/avatar` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -16,72 +18,35 @@
 function render_block_core_avatar( $attributes, $content, $block ) {
 	$size               = isset( $attributes['size'] ) ? $attributes['size'] : 96;
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$border_attributes  = get_block_core_avatar_border_attributes( $attributes );
 
-	$image_styles = array();
-
-	// Add border width styles.
-	$has_border_width = ! empty( $attributes['style']['border']['width'] );
-
-	if ( $has_border_width ) {
-		$border_width   = $attributes['style']['border']['width'];
-		$image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-	}
-
-	// Add border radius styles.
-	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
+	// Class gets passed through `esc_attr` via `get_avatar`.
+	$image_classes = ! empty( $border_attributes['class'] )
+		? "wp-block-avatar__image {$border_attributes['class']}"
+		: 'wp-block-avatar__image';
 
-	if ( $has_border_radius ) {
-		$border_radius = $attributes['style']['border']['radius'];
+	// Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`.
+	// The style engine does pass the border styles through
+	// `safecss_filter_attr` however.
+	$image_styles = ! empty( $border_attributes['style'] )
+		? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) )
+		: '';
 
-		if ( is_array( $border_radius ) ) {
-			// Apply styles for individual corner border radii.
-			foreach ( $border_radius as $key => $value ) {
-				if ( null !== $value ) {
-					$name = _wp_to_kebab_case( $key );
-					// Add shared styles for individual border radii.
-					$border_style   = sprintf(
-						'border-%s-radius: %s;',
-						esc_attr( $name ),
-						esc_attr( $value )
-					);
-					$image_styles[] = $border_style;
-				}
-			}
+	if ( ! isset( $block->context['commentId'] ) ) {
+		if ( isset( $attributes['userId'] ) ) {
+			$author_id = $attributes['userId'];
+		} elseif ( isset( $block->context['postId'] ) ) {
+			$author_id = get_post_field( 'post_author', $block->context['postId'] );
 		} else {
-			$border_style   = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
-			$image_styles[] = $border_style;
+			$author_id = get_query_var( 'author' );
 		}
-	}
 
-	// Add border color styles.
-	$has_border_color = ! empty( $attributes['style']['border']['color'] );
-
-	if ( $has_border_color ) {
-		$border_color   = $attributes['style']['border']['color'];
-		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-	}
-
-	// Add border style (solid, dashed, dotted ).
-	$has_border_style = ! empty( $attributes['style']['border']['style'] );
-
-	if ( $has_border_style ) {
-		$border_style   = $attributes['style']['border']['style'];
-		$image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) );
-	}
-
-	// Add border classes to the avatar image for both custom colors and palette colors.
-	$image_classes = '';
-	if ( $has_border_color || isset( $attributes['borderColor'] ) ) {
-		$image_classes .= 'has-border-color';
-	}
-	if ( isset( $attributes['borderColor'] ) ) {
-		$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
-	}
+		if ( empty( $author_id ) ) {
+			return '';
+		}
 
-	if ( ! isset( $block->context['commentId'] ) ) {
-		$author_id   = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] );
 		$author_name = get_the_author_meta( 'display_name', $author_id );
-		// translators: %s is the Author name.
+		// translators: %s: Author name.
 		$alt          = sprintf( __( '%s Avatar' ), $author_name );
 		$avatar_block = get_avatar(
 			$author_id,
@@ -89,17 +54,17 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			'',
 			$alt,
 			array(
-				'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
-				'class'      => "wp-block-avatar__image $image_classes ",
+				'extra_attr' => $image_styles,
+				'class'      => $image_classes,
 			)
 		);
 		if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 			$label = '';
 			if ( '_blank' === $attributes['linkTarget'] ) {
 				// translators: %s is the Author name.
-				$label = 'aria-label="' . sprintf( esc_attr__( '(%s author archive, opens in a new tab)' ), $author_name ) . '"';
+				$label = 'aria-label="' . esc_attr( sprintf( __( '(%s author archive, opens in a new tab)' ), $author_name ) ) . '"';
 			}
-			// translators: %1$s: Author archive link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
+			// translators: 1: Author archive link. 2: Link target. %3$s Aria label. %4$s Avatar image.
 			$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( get_author_posts_url( $author_id ) ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 		}
 		return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
@@ -108,7 +73,7 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 	if ( ! $comment ) {
 		return '';
 	}
-	/* translators: %s is the Comment Author name */
+	/* translators: %s: Author name. */
 	$alt          = sprintf( __( '%s Avatar' ), $comment->comment_author );
 	$avatar_block = get_avatar(
 		$comment,
@@ -116,24 +81,79 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		'',
 		$alt,
 		array(
-			'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
-			'class'      => "wp-block-avatar__image $image_classes",
+			'extra_attr' => $image_styles,
+			'class'      => $image_classes,
 		)
 	);
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) {
 		$label = '';
 		if ( '_blank' === $attributes['linkTarget'] ) {
-			// translators: %s is the Comment Author name.
-			$label = 'aria-label="' . sprintf( esc_attr__( '(%s website link, opens in a new tab)' ), $comment->comment_author ) . '"';
+			// translators: %s: Comment author name.
+			$label = 'aria-label="' . esc_attr( sprintf( __( '(%s website link, opens in a new tab)' ), $comment->comment_author ) ) . '"';
 		}
-		// translators: %1$s: Comment Author website link. %2$s: Link target. %3$s Aria label. %4$s Avatar image.
 		$avatar_block = sprintf( '<a href="%1$s" target="%2$s" %3$s class="wp-block-avatar__link">%4$s</a>', esc_url( $comment->comment_author_url ), esc_attr( $attributes['linkTarget'] ), $label, $avatar_block );
 	}
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 }
 
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Avatar block.
+ *
+ * @since 6.3.0
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_avatar_border_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
 /**
  * Registers the `core/avatar` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_avatar() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/avatar/style.scss b/packages/block-library/src/avatar/style.scss
index 1939b86b52d166..ed6d846afad0ec 100644
--- a/packages/block-library/src/avatar/style.scss
+++ b/packages/block-library/src/avatar/style.scss
@@ -1,6 +1,10 @@
 .wp-block-avatar {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	line-height: 0;
+	img {
+		box-sizing: border-box;
+	}
 
 	&.aligncenter {
 		text-align: center;
diff --git a/packages/block-library/src/avatar/user-control.js b/packages/block-library/src/avatar/user-control.js
index 49370b39716eff..235202ffec90d7 100644
--- a/packages/block-library/src/avatar/user-control.js
+++ b/packages/block-library/src/avatar/user-control.js
@@ -33,6 +33,8 @@ function UserControl( { value, onChange } ) {
 
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'User' ) }
 			help={ __(
 				'Select the avatar user to display, if it is blank it will use the post/page author.'
diff --git a/packages/block-library/src/block-keyboard-shortcuts/index.js b/packages/block-library/src/block-keyboard-shortcuts/index.js
new file mode 100644
index 00000000000000..2ce106b8ed99dc
--- /dev/null
+++ b/packages/block-library/src/block-keyboard-shortcuts/index.js
@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function BlockKeyboardShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTransformHeadingAndParagraph = ( event, level ) => {
+		event.preventDefault();
+
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+
+		const blockName = getBlockName( currentClientId );
+		const isParagraph = blockName === 'core/paragraph';
+		const isHeading = blockName === 'core/heading';
+
+		if ( ! isParagraph && ! isHeading ) {
+			return;
+		}
+
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+
+		const attributes = getBlockAttributes( currentClientId );
+
+		// Avoid unnecessary block transform when attempting to transform to
+		// the same block type and/or same level.
+		if (
+			( isParagraph && level === 0 ) ||
+			( isHeading && attributes.level === level )
+		) {
+			return;
+		}
+
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/block-editor/transform-heading-to-paragraph',
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: '0',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: '7',
+				},
+			],
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
+	}, [ registerShortcut ] );
+
+	useShortcut(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTransformHeadingAndParagraph( event, 0 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-1',
+		( event ) => handleTransformHeadingAndParagraph( event, 1 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-2',
+		( event ) => handleTransformHeadingAndParagraph( event, 2 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-3',
+		( event ) => handleTransformHeadingAndParagraph( event, 3 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-4',
+		( event ) => handleTransformHeadingAndParagraph( event, 4 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-5',
+		( event ) => handleTransformHeadingAndParagraph( event, 5 )
+	);
+	useShortcut(
+		'core/block-editor/transform-paragraph-to-heading-6',
+		( event ) => handleTransformHeadingAndParagraph( event, 6 )
+	);
+
+	return null;
+}
+
+export default BlockKeyboardShortcuts;
diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json
index 8d850ef1c30ba3..fdce3bcc02e07b 100644
--- a/packages/block-library/src/block/block.json
+++ b/packages/block-library/src/block/block.json
@@ -1,20 +1,31 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/block",
-	"title": "Reusable block",
+	"title": "Pattern",
 	"category": "reusable",
-	"description": "Create and save content to reuse across your site. Update the block, and the changes apply everywhere it’s used.",
+	"description": "Reuse this design across your site.",
+	"keywords": [ "reusable" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
 			"type": "number"
+		},
+		"content": {
+			"type": "object",
+			"default": {}
 		}
 	},
+	"providesContext": {
+		"pattern/overrides": "content"
+	},
 	"supports": {
 		"customClassName": false,
 		"html": false,
-		"inserter": false
-	},
-	"editorStyle": "wp-block-editor"
+		"inserter": false,
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
+	}
 }
diff --git a/packages/block-library/src/block/deprecated.js b/packages/block-library/src/block/deprecated.js
new file mode 100644
index 00000000000000..f820867fff6271
--- /dev/null
+++ b/packages/block-library/src/block/deprecated.js
@@ -0,0 +1,122 @@
+const isObject = ( obj ) =>
+	typeof obj === 'object' && ! Array.isArray( obj ) && obj !== null;
+
+// v2: Migrate to a more condensed version of the 'content' attribute attribute.
+const v2 = {
+	attributes: {
+		ref: {
+			type: 'number',
+		},
+		content: {
+			type: 'object',
+		},
+	},
+	supports: {
+		customClassName: false,
+		html: false,
+		inserter: false,
+		renaming: false,
+	},
+	// Force this deprecation to run whenever there's a values sub-property that's an object.
+	//
+	// This could fail in the future if a block ever has binding to a `values` attribute.
+	// Some extra protection is added to ensure `values` is an object, but this only reduces
+	// the likelihood, it doesn't solve it completely.
+	isEligible( { content } ) {
+		return (
+			!! content &&
+			Object.keys( content ).every(
+				( contentKey ) =>
+					content[ contentKey ].values &&
+					isObject( content[ contentKey ].values )
+			)
+		);
+	},
+	/*
+	 * Old attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 * 	   		// The attribute values are now stored as a 'values' sub-property.
+	 *         values: { content: 'My content value' },
+	 * 	       // ... additional metadata, like the block name can be stored here.
+	 *     }
+	 * }
+	 *
+	 * New attribute format:
+	 * content: {
+	 *     "V98q_x": {
+	 *         content: 'My content value',
+	 *     }
+	 * }
+	 */
+	migrate( attributes ) {
+		const { content, ...retainedAttributes } = attributes;
+
+		if ( content && Object.keys( content ).length ) {
+			const updatedContent = { ...content };
+
+			for ( const contentKey in content ) {
+				updatedContent[ contentKey ] = content[ contentKey ].values;
+			}
+
+			return {
+				...retainedAttributes,
+				content: updatedContent,
+			};
+		}
+
+		return attributes;
+	},
+};
+
+// v1: Rename the `overrides` attribute to the `content` attribute.
+const v1 = {
+	attributes: {
+		ref: {
+			type: 'number',
+		},
+		overrides: {
+			type: 'object',
+		},
+	},
+	supports: {
+		customClassName: false,
+		html: false,
+		inserter: false,
+		renaming: false,
+	},
+	// Force this deprecation to run whenever there's an `overrides` object.
+	isEligible( { overrides } ) {
+		return !! overrides;
+	},
+	/*
+	 * Old attribute format:
+	 * overrides: {
+	 *     // An key is an id that represents a block.
+	 *     // The values are the attribute values of the block.
+	 *     "V98q_x": { content: 'My content value' }
+	 * }
+	 *
+	 * New attribute format:
+	 * content: {
+	 *     "V98q_x": { content: 'My content value' }
+	 * }
+	 *
+	 */
+	migrate( attributes ) {
+		const { overrides, ...retainedAttributes } = attributes;
+
+		const content = {};
+
+		Object.keys( overrides ).forEach( ( id ) => {
+			content[ id ] = overrides[ id ];
+		} );
+
+		return {
+			...retainedAttributes,
+			content,
+		};
+	},
+};
+
+export default [ v2, v1 ];
diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js
index 0a574f2f0cfa83..9c33fd7164cccb 100644
--- a/packages/block-library/src/block/edit-title.native.js
+++ b/packages/block-library/src/block/edit-title.native.js
@@ -7,6 +7,7 @@ import { Text, View } from 'react-native';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { useGlobalStyles } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';
@@ -17,18 +18,21 @@ import { help, lock } from '@wordpress/icons';
 import styles from './editor.scss';
 
 function EditTitle( { getStylesFromColorScheme, title } ) {
-	const lockIconStyle = getStylesFromColorScheme(
-		styles.lockIcon,
-		styles.lockIconDark
-	);
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const infoIconStyle = getStylesFromColorScheme(
-		styles.infoIcon,
-		styles.infoIconDark
-	);
+	const globalStyles = useGlobalStyles();
+	const baseColors = globalStyles?.baseColors?.color;
+
+	const lockIconStyle = [
+		getStylesFromColorScheme( styles.lockIcon, styles.lockIconDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const infoIconStyle = [
+		getStylesFromColorScheme( styles.infoIcon, styles.infoIconDark ),
+		baseColors && { color: baseColors.text },
+	];
 	const separatorStyle = getStylesFromColorScheme(
 		styles.separator,
 		styles.separatorDark
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 5ac0b96336727e..3d4d07e52b386a 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -1,131 +1,268 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRef, useMemo } from '@wordpress/element';
 import {
-	useEntityBlockEditor,
-	useEntityProp,
 	useEntityRecord,
+	store as coreStore,
+	useEntityBlockEditor,
 } from '@wordpress/core-data';
 import {
 	Placeholder,
 	Spinner,
-	ToolbarGroup,
 	ToolbarButton,
-	TextControl,
-	PanelBody,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
-	InnerBlocks,
-	BlockControls,
-	InspectorControls,
+	RecursionProvider,
+	useHasRecursion,
 	useBlockProps,
 	Warning,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	BlockControls,
+	InnerBlocks,
 } from '@wordpress/block-editor';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { ungroup } from '@wordpress/icons';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { getBlockBindingsSource } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+const { hasOverridableBlocks } = unlock( patternsPrivateApis );
+
+const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
+
+const useInferredLayout = ( blocks, parentLayout ) => {
+	const initialInferredAlignmentRef = useRef();
+
+	return useMemo( () => {
+		// Exit early if the pattern's blocks haven't loaded yet.
+		if ( ! blocks?.length ) {
+			return {};
+		}
+
+		let alignment = initialInferredAlignmentRef.current;
+
+		// Only track the initial alignment so that temporarily removed
+		// alignments can be reapplied.
+		if ( alignment === undefined ) {
+			const isConstrained = parentLayout?.type === 'constrained';
+			const hasFullAlignment = blocks.some( ( block ) =>
+				fullAlignments.includes( block.attributes.align )
+			);
 
-export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
+			alignment = isConstrained && hasFullAlignment ? 'full' : null;
+			initialInferredAlignmentRef.current = alignment;
+		}
+
+		const layout = alignment ? parentLayout : undefined;
+
+		return { alignment, layout };
+	}, [ blocks, parentLayout ] );
+};
+
+function RecursionWarning() {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		</div>
+	);
+}
+
+const NOOP = () => {};
+
+// Wrap the main Edit function for the pattern block with a recursion wrapper
+// that allows short-circuiting rendering as early as possible, before any
+// of the other effects in the block edit have run.
+export default function ReusableBlockEditRecursionWrapper( props ) {
+	const { ref } = props.attributes;
 	const hasAlreadyRendered = useHasRecursion( ref );
-	const { record, hasResolved } = useEntityRecord(
-		'postType',
-		'wp_block',
-		ref
+
+	if ( hasAlreadyRendered ) {
+		return <RecursionWarning />;
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			<ReusableBlockEdit { ...props } />
+		</RecursionProvider>
 	);
-	const isMissing = hasResolved && ! record;
+}
 
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
-		[ clientId ]
+function ReusableBlockControl( {
+	recordId,
+	canOverrideBlocks,
+	hasContent,
+	handleEditOriginal,
+	resetContent,
+} ) {
+	const canUserEdit = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: 'wp_block',
+				id: recordId,
+			} ),
+		[ recordId ]
 	);
 
-	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
-		useDispatch( reusableBlocksStore );
+	return (
+		<>
+			{ canUserEdit && !! handleEditOriginal && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton onClick={ handleEditOriginal }>
+							{ __( 'Edit original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_block',
-		{ id: ref }
+			{ canOverrideBlocks && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ resetContent }
+							disabled={ ! hasContent }
+						>
+							{ __( 'Reset' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+		</>
 	);
-	const [ title, setTitle ] = useEntityProp(
+}
+
+function ReusableBlockEdit( {
+	name,
+	attributes: { ref, content },
+	__unstableParentLayout: parentLayout,
+	setAttributes,
+} ) {
+	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
-		'title',
 		ref
 	);
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_block', {
+		id: ref,
+	} );
+	const isMissing = hasResolved && ! record;
+
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
+
+	const { onNavigateToEntityRecord, hasPatternOverridesSource } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			// For editing link to the site editor if the theme and user permissions support it.
+			return {
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
+			};
+		},
+		[]
+	);
+
+	const canOverrideBlocks = useMemo(
+		() => hasPatternOverridesSource && hasOverridableBlocks( blocks ),
+		[ hasPatternOverridesSource, blocks ]
+	);
+
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
-		className: 'block-library-block__reusable-block-container',
+		className: clsx(
+			'block-library-block__reusable-block-container',
+			layout && layoutClasses,
+			{ [ `align${ alignment }` ]: alignment }
+		),
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		layout,
 		value: blocks,
-		onInput,
-		onChange,
+		onInput: NOOP,
+		onChange: NOOP,
 		renderAppender: blocks?.length
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
 	} );
 
-	if ( hasAlreadyRendered ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Block cannot be rendered inside itself.' ) }
-				</Warning>
-			</div>
-		);
-	}
+	const handleEditOriginal = () => {
+		onNavigateToEntityRecord( {
+			postId: ref,
+			postType: 'wp_block',
+		} );
+	};
+
+	const resetContent = () => {
+		if ( content ) {
+			// Make sure any previous changes are persisted before resetting.
+			__unstableMarkLastChangeAsPersistent();
+			setAttributes( { content: undefined } );
+		}
+	};
+
+	let children = null;
 
 	if ( isMissing ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Block has been deleted or is unavailable.' ) }
-				</Warning>
-			</div>
+		children = (
+			<Warning>
+				{ __( 'Block has been deleted or is unavailable.' ) }
+			</Warning>
 		);
 	}
 
 	if ( ! hasResolved ) {
-		return (
-			<div { ...blockProps }>
-				<Placeholder>
-					<Spinner />
-				</Placeholder>
-			</div>
+		children = (
+			<Placeholder>
+				<Spinner />
+			</Placeholder>
 		);
 	}
 
 	return (
-		<RecursionProvider uniqueId={ ref }>
-			{ canRemove && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => convertBlockToStatic( clientId ) }
-							label={ __( 'Convert to regular blocks' ) }
-							icon={ ungroup }
-							showTooltip
-						/>
-					</ToolbarGroup>
-				</BlockControls>
+		<>
+			{ hasResolved && ! isMissing && (
+				<ReusableBlockControl
+					recordId={ ref }
+					canOverrideBlocks={ canOverrideBlocks }
+					hasContent={ !! content }
+					handleEditOriginal={
+						onNavigateToEntityRecord
+							? handleEditOriginal
+							: undefined
+					}
+					resetContent={ resetContent }
+				/>
 			) }
-			<InspectorControls>
-				<PanelBody>
-					<TextControl
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-					/>
-				</PanelBody>
-			</InspectorControls>
-			<div { ...innerBlocksProps } />
-		</RecursionProvider>
+
+			{ children === null ? (
+				<div { ...innerBlocksProps } />
+			) : (
+				<div { ...blockProps }>{ children }</div>
+			) }
+		</>
 	);
 }
diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
index ce2a3999e2b553..6578c12eefc4e0 100644
--- a/packages/block-library/src/block/edit.native.js
+++ b/packages/block-library/src/block/edit.native.js
@@ -27,8 +27,8 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	InnerBlocks,
 	Warning,
 	store as blockEditorStore,
@@ -36,6 +36,7 @@ import {
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { help } from '@wordpress/icons';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -88,6 +89,9 @@ export default function ReusableBlockEdit( {
 				'getEntityRecord',
 				[ 'postType', 'wp_block', ref ]
 			);
+
+			const { getBlockCount } = select( blockEditorStore );
+
 			return {
 				hasResolved: hasResolvedBlock,
 				isEditing:
@@ -95,10 +99,16 @@ export default function ReusableBlockEdit( {
 						reusableBlocksStore
 					).__experimentalIsEditingReusableBlock( clientId ),
 				isMissing: hasResolvedBlock && ! persistedBlock,
+				innerBlockCount: getBlockCount( clientId ),
 			};
 		},
 		[ ref, clientId ]
 	);
+	const hostAppNamespace = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().hostAppNamespace,
+		[]
+	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
@@ -122,13 +132,9 @@ export default function ReusableBlockEdit( {
 	}
 
 	const onConvertToRegularBlocks = useCallback( () => {
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: name of the reusable block */
-				__( '%s converted to regular blocks' ),
-				title
-			)
-		);
+		/* translators: %s: name of the synced block */
+		const successNotice = __( '%s detached' );
+		createSuccessNotice( sprintf( successNotice, title ) );
 
 		clearSelectedBlock();
 		// Convert action is executed at the end of the current JavaScript execution block
@@ -139,11 +145,19 @@ export default function ReusableBlockEdit( {
 	function renderSheet() {
 		const infoTitle =
 			Platform.OS === 'android'
-				? __(
-						'Editing reusable blocks is not yet supported on WordPress for Android'
+				? sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing synced patterns is not yet supported on %s for Android'
+						),
+						hostAppNamespace
 				  )
-				: __(
-						'Editing reusable blocks is not yet supported on WordPress for iOS'
+				: sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing synced patterns is not yet supported on %s for iOS'
+						),
+						hostAppNamespace
 				  );
 
 		return (
@@ -163,11 +177,11 @@ export default function ReusableBlockEdit( {
 					</Text>
 					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
 						{ __(
-							'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
+							'Alternatively, you can detach and edit this block separately by tapping “Detach”.'
 						) }
 					</Text>
 					<TextControl
-						label={ __( 'Convert to regular blocks' ) }
+						label={ __( 'Detach' ) }
 						separatorType="topFullWidth"
 						onPress={ onConvertToRegularBlocks }
 						labelStyle={ actionButtonStyle }
@@ -218,7 +232,7 @@ export default function ReusableBlockEdit( {
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ openSheet }
 			>
diff --git a/packages/block-library/src/block/editor.native.scss b/packages/block-library/src/block/editor.native.scss
index 3aa23e0ddd20ea..b56a50f676600d 100644
--- a/packages/block-library/src/block/editor.native.scss
+++ b/packages/block-library/src/block/editor.native.scss
@@ -19,8 +19,8 @@
 	background-color: $light-gray-400;
 	height: 1px;
 	position: absolute;
-	left: -$block-selected-to-content + $block-selected-border-width;
-	right: -$block-selected-to-content + $block-selected-border-width;
+	left: -$grid-unit-05;
+	right: -$grid-unit-05;
 	bottom: 16;
 }
 
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
deleted file mode 100644
index c49675392a525e..00000000000000
--- a/packages/block-library/src/block/editor.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.edit-post-visual-editor .block-library-block__reusable-block-container {
-	// Unset the padding that root containers get when they're actually root containers.
-	.is-root-container {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	// Allow vertical paddings to collapse to better fit the flow.
-	.block-editor-writing-flow {
-		display: block;
-	}
-
-	.components-disabled .block-list-appender {
-		display: none;
-	}
-}
-
-.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-	}
-
-	&.block-editor-block-list__block:not([contenteditable]):focus {
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-}
diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js
index 95e090f0afd6ad..7f1fa7bdab3494 100644
--- a/packages/block-library/src/block/index.js
+++ b/packages/block-library/src/block/index.js
@@ -2,6 +2,9 @@
  * WordPress dependencies
  */
 import { symbol as icon } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { select } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -9,14 +12,32 @@ import { symbol as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
+	deprecated,
 	edit,
 	icon,
+	__experimentalLabel: ( { ref } ) => {
+		if ( ! ref ) {
+			return;
+		}
+
+		const entity = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_block',
+			ref
+		);
+		if ( ! entity?.title ) {
+			return;
+		}
+
+		return decodeEntities( entity.title );
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/block/index.php b/packages/block-library/src/block/index.php
index 2cfd672aa3ada1..8beef975fad6f3 100644
--- a/packages/block-library/src/block/index.php
+++ b/packages/block-library/src/block/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the `core/block` block on server.
  *
+ * @since 5.0.0
+ *
+ * @global WP_Embed $wp_embed
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Rendered HTML of the referenced block.
@@ -27,8 +31,7 @@ function render_block_core_block( $attributes ) {
 	if ( isset( $seen_refs[ $attributes['ref'] ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.
@@ -47,13 +50,57 @@ function render_block_core_block( $attributes ) {
 	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
 	$content = $wp_embed->autoembed( $content );
 
+	// Back compat.
+	// For blocks that have not been migrated in the editor, add some back compat
+	// so that front-end rendering continues to work.
+
+	// This matches the `v2` deprecation. Removes the inner `values` property
+	// from every item.
+	if ( isset( $attributes['content'] ) ) {
+		foreach ( $attributes['content'] as &$content_data ) {
+			if ( isset( $content_data['values'] ) ) {
+				$is_assoc_array = is_array( $content_data['values'] ) && ! wp_is_numeric_array( $content_data['values'] );
+
+				if ( $is_assoc_array ) {
+					$content_data = $content_data['values'];
+				}
+			}
+		}
+	}
+
+	// This matches the `v1` deprecation. Rename `overrides` to `content`.
+	if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
+		$attributes['content'] = $attributes['overrides'];
+	}
+
+	/**
+	 * We set the `pattern/overrides` context through the `render_block_context`
+	 * filter so that it is available when a pattern's inner blocks are
+	 * rendering via do_blocks given it only receives the inner content.
+	 */
+	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
+	if ( $has_pattern_overrides ) {
+		$filter_block_context = static function ( $context ) use ( $attributes ) {
+			$context['pattern/overrides'] = $attributes['content'];
+			return $context;
+		};
+		add_filter( 'render_block_context', $filter_block_context, 1 );
+	}
+
 	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );
+
+	if ( $has_pattern_overrides ) {
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
+	}
+
 	return $content;
 }
 
 /**
  * Registers the `core/block` block.
+ *
+ * @since 5.3.0
  */
 function register_block_core_block() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/block/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/block/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..3c4d791eb9f755
--- /dev/null
+++ b/packages/block-library/src/block/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pattern block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:block {"ref":130} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Pattern block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:block {"ref":130} /--></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js
index a683426a751e20..46c6d39034f8b0 100644
--- a/packages/block-library/src/block/test/edit.native.js
+++ b/packages/block-library/src/block/test/edit.native.js
@@ -5,8 +5,9 @@ import {
 	getEditorHtml,
 	initializeEditor,
 	fireEvent,
-	waitFor,
 	within,
+	setupApiFetch,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
 /**
@@ -24,7 +25,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	content: {
 		raw: `
     <!-- wp:heading -->
-    <h2>First Reusable block</h2>
+    <h2 class="wp-block-heading">First Reusable block</h2>
     <!-- /wp:heading -->
 
     <!-- wp:paragraph -->
@@ -43,6 +44,8 @@ const getMockedReusableBlock = ( id ) => ( {
 	id,
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
+	meta: { footnotes: '' },
+	wp_pattern_category: [],
 } );
 
 beforeAll( () => {
@@ -57,8 +60,8 @@ afterAll( () => {
 	} );
 } );
 
-describe( 'Reusable block', () => {
-	it( 'inserts a reusable block', async () => {
+describe( 'Synced patterns', () => {
+	it( 'inserts a synced pattern', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const reusableBlockMock1 = getMockedReusableBlock( 1 );
 		const reusableBlockMock2 = getMockedReusableBlock( 2 );
@@ -78,17 +81,16 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml: '',
-				capabilities: { reusableBlock: true },
-			} );
+		const screen = await initializeEditor( {
+			initialHtml: '',
+			capabilities: { reusableBlock: true },
+		} );
 
 		// Open the inserter menu.
-		fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
+		fireEvent.press( await screen.findByLabelText( 'Add block' ) );
 
 		// Navigate to reusable tab.
-		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
+		const reusableSegment = await screen.findByText( 'Synced patterns' );
 		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -99,7 +101,9 @@ describe( 'Reusable block', () => {
 		} );
 		fireEvent.press( reusableSegment );
 
-		const reusableBlockList = getByTestId( 'InserterUI-ReusableBlocks' );
+		const reusableBlockList = screen.getByTestId(
+			'InserterUI-SyncedPatterns'
+		);
 		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {
 			nativeEvent: {
@@ -110,13 +114,11 @@ describe( 'Reusable block', () => {
 		} );
 
 		// Insert a reusable block.
-		fireEvent.press(
-			await waitFor( () => getByText( `Reusable block - 1` ) )
-		);
+		fireEvent.press( await screen.findByText( `Reusable block - 1` ) );
 
 		// Get the reusable block.
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Pattern Block\. Row 1/
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -128,27 +130,23 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const [ reusableBlock ] = await screen.findAllByLabelText(
+			/Pattern Block\. Row 1/
 		);
 
-		const blockDeleted = await waitFor( () =>
-			within( reusableBlock ).getByText(
-				'Block has been deleted or is unavailable.'
-			)
+		const blockDeleted = within( reusableBlock ).getByText(
+			'Block has been deleted or is unavailable.'
 		);
 
 		expect( reusableBlock ).toBeDefined();
 		expect( blockDeleted ).toBeDefined();
 	} );
 
-	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
-	it.skip( 'renders block content', async () => {
+	it( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
@@ -160,20 +158,21 @@ describe( 'Reusable block', () => {
 			if ( path.startsWith( endpoint ) ) {
 				response = getMockedReusableBlock( id );
 			}
-			return Promise.resolve( response );
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
 		} );
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const reusableBlock = await waitFor( () =>
-			getByLabelText( /Reusable block Block\. Row 1/ )
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
 		);
 
-		const innerBlockListWrapper = await waitFor( () =>
-			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
-		);
+		const innerBlockListWrapper =
+			await within( reusableBlock ).findByTestId( 'block-list-wrapper' );
 
 		// onLayout event has to be explicitly dispatched in BlockList component,
 		// otherwise the inner blocks are not rendered.
@@ -185,13 +184,79 @@ describe( 'Reusable block', () => {
 			},
 		} );
 
-		const headingInnerBlock = await waitFor( () =>
-			within( reusableBlock ).getByLabelText(
-				'Heading Block. Row 1. Level 2. First Reusable block'
-			)
+		const [ headingInnerBlock ] = await within(
+			reusableBlock
+		).findAllByLabelText(
+			'Heading Block. Row 1. Level 2. First Reusable block'
 		);
 
 		expect( reusableBlock ).toBeDefined();
 		expect( headingInnerBlock ).toBeDefined();
 	} );
+
+	it( 'renders block after content is updated due to a side effect', async () => {
+		// We have to use different ids because entities are cached in memory.
+		const id = 5;
+		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
+		const endpoint = `/wp/v2/blocks/${ id }`;
+		const fetchMedia = {
+			request: {
+				path: `/wp/v2/media/1?context=edit`,
+			},
+			response: {
+				source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+				id: 1,
+				// We need to include the sizes to trigger the side effect.
+				media_details: {
+					sizes: {
+						large: {
+							source_url:
+								'https://cldup.com/cXyG__fTLN.jpg?w=500',
+						},
+					},
+				},
+			},
+		};
+
+		// Return mocked response for the block endpoint.
+		fetchRequest.mockImplementation( ( { path } ) => {
+			let response = {};
+			if ( path.startsWith( endpoint ) ) {
+				response = getMockedReusableBlock( id );
+			}
+			// Replace content with an Image block to trigger a side effect.
+			// The side effect will be produced when the `source` attribute is replaced
+			// with an URL that includes the width query parameter:
+			// https://cldup.com/cXyG__fTLN.jpg => https://cldup.com/cXyG__fTLN.jpg?w=500
+			response.content.raw = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
+		} );
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
+		);
+
+		// Mock media fetch requests
+		setupApiFetch( [ fetchMedia ] );
+
+		await triggerBlockListLayout(
+			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
+		);
+
+		const imageBlock =
+			await within( reusableBlock ).getByLabelText(
+				'Image Block. Row 1'
+			);
+
+		expect( reusableBlock ).toBeDefined();
+		expect( imageBlock ).toBeDefined();
+	} );
 } );
diff --git a/packages/block-library/src/block/test/transforms.native.js b/packages/block-library/src/block/test/transforms.native.js
new file mode 100644
index 00000000000000..95104ac6133993
--- /dev/null
+++ b/packages/block-library/src/block/test/transforms.native.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Pattern';
+const initialHtml = `
+<!-- wp:block {"ref":130} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index f34437f74b573e..2c1c05baa20dd3 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/button",
 	"title": "Button",
 	"category": "design",
@@ -9,6 +9,15 @@
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"attributes": {
+		"tagName": {
+			"type": "string",
+			"enum": [ "a", "button" ],
+			"default": "a"
+		},
+		"type": {
+			"type": "string",
+			"default": "button"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -16,30 +25,35 @@
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "href"
+			"attribute": "href",
+			"role": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
-			"selector": "a",
-			"attribute": "title"
+			"selector": "a,button",
+			"attribute": "title",
+			"role": "content"
 		},
 		"text": {
-			"type": "string",
-			"source": "html",
-			"selector": "a"
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "a,button",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "target"
+			"attribute": "target",
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "rel"
+			"attribute": "rel",
+			"role": "content"
 		},
 		"placeholder": {
 			"type": "string"
@@ -59,6 +73,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"splitting": true,
 		"align": false,
 		"alignWide": false,
 		"color": {
@@ -78,11 +93,15 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
 		},
 		"reusable": false,
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"spacing": {
 			"__experimentalSkipSerialization": true,
 			"padding": [ "horizontal", "vertical" ],
@@ -91,13 +110,22 @@
 			}
 		},
 		"__experimentalBorder": {
+			"color": true,
 			"radius": true,
+			"style": true,
+			"width": true,
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
-				"radius": true
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button .wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button .wp-block-button__link",
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },
diff --git a/packages/block-library/src/button/constants.js b/packages/block-library/src/button/constants.js
new file mode 100644
index 00000000000000..66fdc66594b2a0
--- /dev/null
+++ b/packages/block-library/src/button/constants.js
@@ -0,0 +1,3 @@
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 1ec6fde3fe4a48..8ab83e1b09518f 100644
--- a/packages/block-library/src/button/deprecated.js
+++ b/packages/block-library/src/button/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ function migrateAlign( attributes ) {
 	const { align, ...otherAttributes } = attributes;
 	return {
 		...otherAttributes,
-		className: classnames(
+		className: clsx(
 			otherAttributes.className,
 			`align${ attributes.align }`
 		),
@@ -226,7 +226,7 @@ const v11 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -246,7 +246,7 @@ const v11 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -352,7 +352,7 @@ const v10 = {
 		const borderProps = getBorderClassesAndStyles( attributes );
 		const colorProps = getColorClassesAndStyles( attributes );
 		const spacingProps = getSpacingClassesAndStyles( attributes );
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-button__link',
 			colorProps.className,
 			borderProps.className,
@@ -372,7 +372,7 @@ const v10 = {
 		// if it had already been assigned, for the sake of backward-compatibility.
 		// A title will no longer be assigned for new or updated button block links.
 
-		const wrapperClasses = classnames( className, {
+		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		} );
@@ -468,7 +468,7 @@ const deprecated = [
 
 			const borderRadius = style?.border?.radius;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -484,7 +484,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 				[ `has-custom-font-size` ]:
 					fontSize || style?.typography?.fontSize,
@@ -558,7 +558,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -574,7 +574,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -646,7 +646,7 @@ const deprecated = [
 			const { borderRadius, linkTarget, rel, text, title, url, width } =
 				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
-			const buttonClasses = classnames(
+			const buttonClasses = clsx(
 				'wp-block-button__link',
 				colorProps.className,
 				{
@@ -662,7 +662,7 @@ const deprecated = [
 			// if it had already been assigned, for the sake of backward-compatibility.
 			// A title will no longer be assigned for new or updated button block links.
 
-			const wrapperClasses = classnames( className, {
+			const wrapperClasses = clsx( className, {
 				[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 			} );
 
@@ -725,7 +725,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { borderRadius, linkTarget, rel, text, title, url } =
 				attributes;
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );
 			const buttonStyle = {
@@ -823,7 +823,7 @@ const deprecated = [
 				getColorClassName( 'background-color', backgroundColor );
 			const gradientClass = __experimentalGetGradientClass( gradient );
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background':
@@ -941,7 +941,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
@@ -1009,7 +1009,7 @@ const deprecated = [
 				backgroundColor
 			);
 
-			const buttonClasses = classnames( 'wp-block-button__link', {
+			const buttonClasses = clsx( 'wp-block-button__link', {
 				'has-text-color': textColor || customTextColor,
 				[ textClass ]: textClass,
 				'has-background': backgroundColor || customBackgroundColor,
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index fd38379636faf3..3539fd54f4eece 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -1,13 +1,20 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
+import removeAnchorTag from '../utils/remove-anchor-tag';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	Button,
 	ButtonGroup,
@@ -25,15 +32,86 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
 	__experimentalLinkControl as LinkControl,
 	__experimentalGetElementClassName,
+	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
+import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import {
+	createBlock,
+	cloneBlock,
+	getDefaultBlockName,
+	getBlockBindingsSource,
+} from '@wordpress/blocks';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+const LINK_SETTINGS = [
+	...LinkControl.DEFAULT_LINK_SETTINGS,
+	{
+		id: 'nofollow',
+		title: __( 'Mark as nofollow' ),
+	},
+];
 
-const NEW_TAB_REL = 'noreferrer noopener';
+function useEnter( props ) {
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+				return;
+			}
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			event.preventDefault();
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			const after = topParentListBlock.innerBlocks.slice(
+				blockIndex + 1
+			);
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
 	function handleChange( newWidth ) {
@@ -45,13 +123,13 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Width settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ButtonGroup aria-label={ __( 'Button width' ) }>
 				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 					return (
 						<Button
 							key={ widthValue }
-							isSmall
+							size="small"
 							variant={
 								widthValue === selectedWidth
 									? 'primary'
@@ -76,30 +154,23 @@ function ButtonEdit( props ) {
 		isSelected,
 		onReplace,
 		mergeBlocks,
+		clientId,
+		context,
 	} = props;
-	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
-		attributes;
-
-	function onToggleOpenInNewTab( value ) {
-		const newLinkTarget = value ? '_blank' : undefined;
-
-		let updatedRel = rel;
-		if ( newLinkTarget && ! rel ) {
-			updatedRel = NEW_TAB_REL;
-		} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
-			updatedRel = undefined;
-		}
-
-		setAttributes( {
-			linkTarget: newLinkTarget,
-			rel: updatedRel,
-		} );
-	}
+	const {
+		tagName,
+		textAlign,
+		linkTarget,
+		placeholder,
+		rel,
+		style,
+		text,
+		url,
+		width,
+		metadata,
+	} = attributes;
 
-	function setButtonText( newText ) {
-		// Remove anchor tags from button text content.
-		setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } );
-	}
+	const TagName = tagName || 'a';
 
 	function onKeyDown( event ) {
 		if ( isKeyboardEvent.primary( event, 'k' ) ) {
@@ -117,16 +188,20 @@ function ButtonEdit( props ) {
 	const borderProps = useBorderProps( attributes );
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
 	const ref = useRef();
 	const richTextRef = useRef();
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
 		onKeyDown,
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
-	const opensInNewTab = linkTarget === '_blank';
+	const opensInNewTab = linkTarget === NEW_TAB_TARGET;
+	const nofollow = !! rel?.includes( NOFOLLOW_REL );
+	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
 		event.preventDefault();
@@ -148,24 +223,61 @@ function ButtonEdit( props ) {
 		}
 	}, [ isSelected ] );
 
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
+	const linkValue = useMemo(
+		() => ( { url, opensInNewTab, nofollow } ),
+		[ url, opensInNewTab, nofollow ]
+	);
+
+	const useEnterRef = useEnter( { content: text, clientId } );
+	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
+
+	const { lockUrlControls = false } = useSelect(
+		( select ) => {
+			if ( ! isSelected ) {
+				return {};
+			}
+
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
+
+			return {
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					! blockBindingsSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
+			};
+		},
+		[ context, isSelected, metadata?.bindings?.url ]
+	);
+
 	return (
 		<>
 			<div
 				{ ...blockProps }
-				className={ classnames( blockProps.className, {
+				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>
 				<RichText
-					ref={ richTextRef }
+					ref={ mergedRef }
 					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
-					onChange={ ( value ) => setButtonText( value ) }
+					onChange={ ( value ) =>
+						setAttributes( {
+							text: removeAnchorTag( value ),
+						} )
+					}
 					withoutInteractiveFormatting
-					className={ classnames(
+					className={ clsx(
 						className,
 						'wp-block-button__link',
 						colorProps.className,
@@ -182,26 +294,23 @@ function ButtonEdit( props ) {
 						...borderProps.style,
 						...colorProps.style,
 						...spacingProps.style,
+						...shadowProps.style,
 					} }
-					onSplit={ ( value ) =>
-						createBlock( 'core/button', {
-							...attributes,
-							text: value,
-						} )
-					}
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }
 					identifier="text"
 				/>
 			</div>
 			<BlockControls group="block">
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-				{ ! isURLSet && (
+				{ blockEditingMode === 'default' && (
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				) }
+				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -210,62 +319,75 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && (
+				{ isURLSet && isLinkTag && ! lockUrlControls && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
 						title={ __( 'Unlink' ) }
 						shortcut={ displayShortcut.primaryShift( 'k' ) }
 						onClick={ unlink }
-						isActive={ true }
+						isActive
 					/>
 				) }
 			</BlockControls>
-			{ isSelected && ( isEditingURL || isURLSet ) && (
-				<Popover
-					placement="bottom"
-					onClose={ () => {
-						setIsEditingURL( false );
-						richTextRef.current?.focus();
-					} }
-					anchor={ popoverAnchor }
-					focusOnMount={ isEditingURL ? 'firstElement' : false }
-					__unstableSlotName={ '__unstable-block-tools-after' }
-					shift
-				>
-					<LinkControl
-						className="wp-block-navigation-link__inline-link-input"
-						value={ { url, opensInNewTab } }
-						onChange={ ( {
-							url: newURL = '',
-							opensInNewTab: newOpensInNewTab,
-						} ) => {
-							setAttributes( { url: newURL } );
-
-							if ( opensInNewTab !== newOpensInNewTab ) {
-								onToggleOpenInNewTab( newOpensInNewTab );
-							}
-						} }
-						onRemove={ () => {
-							unlink();
+			{ isLinkTag &&
+				isSelected &&
+				( isEditingURL || isURLSet ) &&
+				! lockUrlControls && (
+					<Popover
+						placement="bottom"
+						onClose={ () => {
+							setIsEditingURL( false );
 							richTextRef.current?.focus();
 						} }
-						forceIsEditingLink={ isEditingURL }
-					/>
-				</Popover>
-			) }
+						anchor={ popoverAnchor }
+						focusOnMount={ isEditingURL ? 'firstElement' : false }
+						__unstableSlotName="__unstable-block-tools-after"
+						shift
+					>
+						<LinkControl
+							value={ linkValue }
+							onChange={ ( {
+								url: newURL,
+								opensInNewTab: newOpensInNewTab,
+								nofollow: newNofollow,
+							} ) =>
+								setAttributes(
+									getUpdatedLinkAttributes( {
+										rel,
+										url: newURL,
+										opensInNewTab: newOpensInNewTab,
+										nofollow: newNofollow,
+									} )
+								)
+							}
+							onRemove={ () => {
+								unlink();
+								richTextRef.current?.focus();
+							} }
+							forceIsEditingLink={ isEditingURL }
+							settings={ LINK_SETTINGS }
+						/>
+					</Popover>
+				) }
 			<InspectorControls>
 				<WidthPanel
 					selectedWidth={ width }
 					setAttributes={ setAttributes }
 				/>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
-				<TextControl
-					label={ __( 'Link rel' ) }
-					value={ rel || '' }
-					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
-				/>
+			<InspectorControls group="advanced">
+				{ isLinkTag && (
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ ( newRel ) =>
+							setAttributes( { rel: newRel } )
+						}
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index 39082488f1f654..26509a93de6864 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -17,6 +17,7 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -28,9 +29,9 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
@@ -493,7 +494,7 @@ function ButtonEdit( props ) {
 					<View pointerEvents="none" style={ outLineStyles } />
 				) }
 				<RichText
-					setRef={ onSetRef }
+					ref={ onSetRef }
 					placeholder={ placeholderText }
 					value={ text }
 					onChange={ onChangeText }
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index 05c404a5d295f0..8531f810e59e25 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -28,54 +28,7 @@
 	}
 }
 
-.wp-block-button__inline-link {
-	color: $gray-700;
-	height: 0;
-	overflow: hidden;
-	max-width: 290px;
-
-	&-input__suggestions {
-		max-width: 290px;
-	}
-
-	@include break-medium() {
-		max-width: 260px;
-
-		&-input__suggestions {
-			max-width: 260px;
-		}
-
-	}
-	@include break-large() {
-		max-width: 290px;
-
-		&-input__suggestions {
-			max-width: 290px;
-		}
-
-	}
-
-	.is-selected & {
-		height: auto;
-		overflow: visible;
-	}
-}
-
-.wp-button-label__width {
-	.components-button-group {
-		display: block;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 12px;
-	}
-}
-
 // Display "table" is used because the button container should only wrap the content and not takes the full width.
 div[data-type="core/button"] {
 	display: table;
 }
-
-.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
-	text-decoration: inherit;
-}
diff --git a/packages/block-library/src/button/get-updated-link-attributes.js b/packages/block-library/src/button/get-updated-link-attributes.js
new file mode 100644
index 00000000000000..0e39a1815a3188
--- /dev/null
+++ b/packages/block-library/src/button/get-updated-link-attributes.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { NEW_TAB_REL, NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
+
+/**
+ * WordPress dependencies
+ */
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}
diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
index 2b05b280028abd..32212afc2eb706 100644
--- a/packages/block-library/src/button/index.js
+++ b/packages/block-library/src/button/index.js
@@ -22,7 +22,7 @@ export const settings = {
 	example: {
 		attributes: {
 			className: 'is-style-fill',
-			text: __( 'Call to Action' ),
+			text: __( 'Call to action' ),
 		},
 	},
 	edit,
diff --git a/packages/block-library/src/button/index.php b/packages/block-library/src/button/index.php
new file mode 100644
index 00000000000000..f272fa9eb62b14
--- /dev/null
+++ b/packages/block-library/src/button/index.php
@@ -0,0 +1,80 @@
+<?php
+/**
+ * Server-side rendering of the `core/button` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/button` block on the server,
+ *
+ * @since 6.6.0
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content.
+ */
+function render_block_core_button( $attributes, $content ) {
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	/*
+	 * The button block can render an `<a>` or `<button>` and also has a
+	 * `<div>` wrapper. Find the a or button tag.
+	 */
+	$tag = null;
+	while ( $p->next_tag() ) {
+		$tag = $p->get_tag();
+		if ( 'A' === $tag || 'BUTTON' === $tag ) {
+			break;
+		}
+	}
+
+	/*
+	 * If this happens, the likelihood is there's no block content,
+	 * or the block has been modified by a plugin.
+	 */
+	if ( null === $tag ) {
+		return $content;
+	}
+
+	// If the next token is the closing tag, the button is empty.
+	$is_empty = true;
+	while ( $p->next_token() && $tag !== $p->get_token_name() && $is_empty ) {
+		if ( '#comment' !== $p->get_token_type() ) {
+			/**
+			 * Anything else implies this is not empty.
+			 * This might include any text content (including a space),
+			 * inline images or other HTML.
+			 */
+			$is_empty = false;
+		}
+	}
+
+	/*
+	 * When there's no text, render nothing for the block.
+	 * See https://github.com/WordPress/gutenberg/issues/17221 for the
+	 * reasoning behind this.
+	 */
+	if ( $is_empty ) {
+		return '';
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/button` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_button() {
+	register_block_type_from_metadata(
+		__DIR__ . '/button',
+		array(
+			'render_callback' => 'render_block_core_button',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_button' );
diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
index a09ae59059f780..8cb9da6fbfbc18 100644
--- a/packages/block-library/src/button/save.js
+++ b/packages/block-library/src/button/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,11 +12,14 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
 	const {
+		tagName,
+		type,
 		textAlign,
 		fontSize,
 		linkTarget,
@@ -28,14 +31,14 @@ export default function save( { attributes, className } ) {
 		width,
 	} = attributes;
 
-	if ( ! text ) {
-		return null;
-	}
-
+	const TagName = tagName || 'a';
+	const isButtonTag = 'button' === TagName;
+	const buttonType = type || 'button';
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
-	const buttonClasses = classnames(
+	const shadowProps = getShadowClassesAndStyles( attributes );
+	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
@@ -51,13 +54,14 @@ export default function save( { attributes, className } ) {
 		...borderProps.style,
 		...colorProps.style,
 		...spacingProps.style,
+		...shadowProps.style,
 	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
 
-	const wrapperClasses = classnames( className, {
+	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
@@ -65,14 +69,15 @@ export default function save( { attributes, className } ) {
 	return (
 		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
-				tagName="a"
+				tagName={ TagName }
+				type={ isButtonTag ? buttonType : null }
 				className={ buttonClasses }
-				href={ url }
+				href={ isButtonTag ? null : url }
 				title={ title }
 				style={ buttonStyle }
 				value={ text }
-				target={ linkTarget }
-				rel={ rel }
+				target={ isButtonTag ? null : linkTarget }
+				rel={ isButtonTag ? null : rel }
 			/>
 		</div>
 	);
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index b4fa27709696ea..a8f625b95c3923 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -9,6 +9,9 @@ $blocks-block__margin: 0.5em;
 	text-align: center;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
+	height: 100%;
+	width: 100%;
+	align-content: center;
 
 	&.aligncenter {
 		text-align: center;
@@ -86,33 +89,37 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// the first selector is required for old buttons markup
+// The follow block style selectors are required for old buttons markup
+// and do not use the `:root :where()` format to match specificity at
+// the time they were deprecated.
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
 	border-radius: 0;
 }
-
-
-// the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
 	border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link,
-.wp-block-button .wp-block-button__link.is-style-outline {
-	border: 2px solid currentColor;
-	padding: 0.667em 1.333em;
-}
+// Selectors here use the `:root :where()` format for maintaining compatibility
+// with global styles and nested block style variations.
+:root {
+	// Outline Block Style Variation.
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline) {
+		border: 2px solid currentColor;
+		padding: 0.667em 1.333em;
+	}
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
-	color: currentColor;
-}
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+		color: currentColor;
+	}
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
-	background-color: transparent;
-	// background-image is required to overwrite a gradient background
-	background-image: none;
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+		background-color: transparent;
+		// background-image is required to overwrite a gradient background
+		background-image: none;
+	}
 }
diff --git a/packages/block-library/src/button/test/get-updated-link-attributes.js b/packages/block-library/src/button/test/get-updated-link-attributes.js
new file mode 100644
index 00000000000000..7349303d178b41
--- /dev/null
+++ b/packages/block-library/src/button/test/get-updated-link-attributes.js
@@ -0,0 +1,128 @@
+/**
+ * Internal dependencies
+ */
+import { getUpdatedLinkAttributes } from '../get-updated-link-attributes';
+
+describe( 'getUpdatedLinkAttributes method', () => {
+	it( 'should correctly handle unassigned rel', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'noreferrer noopener' );
+	} );
+
+	it( 'should return empty rel value as undefined', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: false,
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( undefined );
+	} );
+
+	it( 'should correctly handle rel with existing values', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: true,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual(
+			'rel_value noreferrer noopener nofollow'
+		);
+	} );
+
+	it( 'should correctly update link attributes with opensInNewTab', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+	} );
+
+	it( 'should correctly update link attributes with nofollow', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: true,
+			rel: 'rel_value',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( 'rel_value nofollow' );
+	} );
+
+	it( 'should correctly update link attributes with nofollow without spacing', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: false,
+			nofollow: true,
+			rel: '',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( undefined );
+		expect( result.rel ).toEqual( 'nofollow' );
+	} );
+
+	it( 'should correctly handle rel with existing nofollow values and remove duplicates', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: true,
+			rel: 'rel_value nofollow',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual(
+			'rel_value nofollow noreferrer noopener'
+		);
+	} );
+
+	it( 'should correctly handle rel with existing new tab values and remove duplicates', () => {
+		const options = {
+			url: 'example.com',
+			opensInNewTab: true,
+			nofollow: false,
+			rel: 'rel_value noreferrer noopener',
+		};
+
+		const result = getUpdatedLinkAttributes( options );
+
+		expect( result.url ).toEqual( 'http://example.com' );
+		expect( result.linkTarget ).toEqual( '_blank' );
+		expect( result.rel ).toEqual( 'rel_value noreferrer noopener' );
+	} );
+} );
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index 266646d96bcee5..bb4c370158ad5b 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -1,18 +1,28 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/buttons",
 	"title": "Buttons",
 	"category": "design",
+	"allowedBlocks": [ "core/button" ],
 	"description": "Prompt visitors to take action with a group of button-style links.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
+			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
@@ -31,12 +41,27 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
 				"type": "flex"
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-buttons-editor",
diff --git a/packages/block-library/src/buttons/deprecated.js b/packages/block-library/src/buttons/deprecated.js
index 469cc14e76439b..da28a6617fb65b 100644
--- a/packages/block-library/src/buttons/deprecated.js
+++ b/packages/block-library/src/buttons/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -63,7 +63,7 @@ const deprecated = [
 			return (
 				<div
 					{ ...useBlockProps.save( {
-						className: classnames( {
+						className: clsx( {
 							[ `is-content-justification-${ contentJustification }` ]:
 								contentJustification,
 							'is-vertical': orientation === 'vertical',
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index f60f65b372214a..6fb718475c2cac 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,27 +1,17 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { name as buttonBlockName } from '../button';
-
-const ALLOWED_BLOCKS = [ buttonBlockName ];
+import { store as blocksStore } from '@wordpress/blocks';
 
 const DEFAULT_BLOCK = {
-	name: buttonBlockName,
+	name: 'core/button',
 	attributesToCopy: [
 		'backgroundColor',
 		'border',
@@ -36,31 +26,29 @@ const DEFAULT_BLOCK = {
 };
 
 function ButtonsEdit( { attributes, className } ) {
-	const { fontSize, layout = {}, style } = attributes;
+	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations =
-			select( blockEditorStore ).getSettings()
-				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
+	const { hasButtonVariations } = useSelect( ( select ) => {
+		const buttonVariations = select( blocksStore ).getBlockVariations(
+			'core/button',
+			'inserter'
+		);
+		return {
+			hasButtonVariations: buttonVariations.length > 0,
+		};
 	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
-		template: [
-			[
-				buttonBlockName,
-				{ className: preferredStyle && `is-style-${ preferredStyle }` },
-			],
-		],
-		__experimentalLayout: layout,
+		defaultBlock: DEFAULT_BLOCK,
+		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
+		directInsert: ! hasButtonVariations,
+		template: [ [ 'core/button' ] ],
 		templateInsertUpdatesSelection: true,
+		orientation: layout?.orientation ?? 'horizontal',
 	} );
 
 	return <div { ...innerBlocksProps } />;
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index 32e68fea98cb9a..5f741c1de6ee55 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -21,13 +21,14 @@ import { alignmentHelpers } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { name as buttonBlockName } from '../button/';
 import styles from './editor.scss';
 
-const ALLOWED_BLOCKS = [ buttonBlockName ];
-
 const layoutProp = { type: 'default', alignments: [] };
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 export default function ButtonsEdit( {
 	attributes: { layout, align },
 	clientId,
@@ -41,7 +42,7 @@ export default function ButtonsEdit( {
 	const { marginLeft: spacing } = styles.spacing;
 
 	// Extract attributes from block layout
-	const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' );
+	const layoutBlockSupport = getBlockSupport( name, 'layout' );
 	const defaultBlockLayout = layoutBlockSupport?.default;
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { justifyContent } = usedLayout;
@@ -68,13 +69,6 @@ export default function ButtonsEdit( {
 		[ clientId ]
 	);
 
-	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations =
-			select( blockEditorStore ).getSettings()
-				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
-	}, [] );
-
 	const { getBlockOrder } = useSelect( blockEditorStore );
 	const { insertBlock, removeBlock, selectBlock } =
 		useDispatch( blockEditorStore );
@@ -103,7 +97,7 @@ export default function ButtonsEdit( {
 
 			const insertedBlock = createBlock( 'core/button' );
 
-			insertBlock( insertedBlock, index, clientId );
+			insertBlock( insertedBlock, index, clientId, false );
 			selectBlock( insertedBlock.clientId );
 		}, 200 ),
 		[]
@@ -112,7 +106,7 @@ export default function ButtonsEdit( {
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
-				isFloating={ true }
+				isFloating
 				onAddBlock={ onAddNextButton }
 			/>
 		</View>
@@ -137,26 +131,13 @@ export default function ButtonsEdit( {
 								},
 							} )
 						}
-						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
-						} }
+						popoverProps={ POPOVER_PROPS }
 					/>
 				</BlockControls>
 			) }
 			{ resizeObserver }
 			<InnerBlocks
-				allowedBlocks={ ALLOWED_BLOCKS }
-				template={ [
-					[
-						buttonBlockName,
-						{
-							className:
-								preferredStyle &&
-								`is-style-${ preferredStyle }`,
-						},
-					],
-				] }
+				template={ [ [ 'core/button' ] ] }
 				renderFooterAppender={
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}
@@ -167,7 +148,7 @@ export default function ButtonsEdit( {
 				parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to.
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
-				__experimentalLayout={ layoutProp }
+				layout={ layoutProp }
 				templateInsertUpdatesSelection
 				blockWidth={ blockWidth }
 			/>
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 018ca3b7e2f8e8..f0a1e930d40bb8 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -33,16 +33,14 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
 		.is-content-justification-left,
 		.is-content-justification-center
 	) .wp-block[data-align="center"] {
-	/* stylelint-enable indentation */
+	/* stylelint-enable @stylistic/indentation */
 		margin-left: auto;
 		margin-right: auto;
 		margin-top: 0;
@@ -54,12 +52,6 @@ $blocks-block__margin: 0.5em;
 			margin-bottom: 0;
 		}
 	}
-
-	.editor-styles-wrapper &.has-custom-font-size {
-		.wp-block-button__link {
-			font-size: inherit;
-		}
-	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 810922fbcb839b..a39c6c6a2d6b7f 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			layout: {
+				type: 'flex',
+				justifyContent: 'center',
+			},
+		},
 		innerBlocks: [
 			{
 				name: 'core/button',
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 77431ef98829c6..43da258c8d7064 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 export default function save( { attributes, className } ) {
 	const { fontSize, style } = attributes;
 	const blockProps = useBlockProps.save( {
-		className: classnames( className, {
+		className: clsx( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 0f15bdab46fcfb..e563f3957f3746 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -2,6 +2,8 @@
 $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	&.is-vertical {
 		flex-direction: column;
@@ -55,16 +57,14 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	//
-	// Disable the stylelint rule, otherwise this selector is ugly!
-	/* stylelint-disable indentation */
+	/* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
 		.is-content-justification-left,
 		.is-content-justification-center
 	) .wp-block-button.aligncenter {
-	/* stylelint-enable indentation */
+	/* stylelint-enable @stylistic/indentation */
 		margin-left: auto;
 		margin-right: auto;
 		width: 100%;
diff --git a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap
index d65e9283cee049..a7eebbf97144fa 100644
--- a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap
@@ -1,28 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Buttons block color customization sets a background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-background-color has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a custom gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="" style="background:linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a text color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-pale-pink-color has-text-color wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block justify content sets Justify items center option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"center\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items left option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"left\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block justify content sets Justify items right option 1`] = `
-"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"right\\"}} -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
-<!-- wp:button /--></div>
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
 <!-- wp:paragraph -->
@@ -32,18 +74,20 @@ exports[`Buttons block when a button is shown adds another button using the inli
 
 exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
+<!-- /wp:button -->
 
 <!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Hello!</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="" style="border-radius:6px">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
diff --git a/packages/block-library/src/buttons/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/buttons/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..3854e64d16d361
--- /dev/null
+++ b/packages/block-library/src/buttons/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Buttons block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
index a6a25ee0590a90..fabee59bc5bc6b 100644
--- a/packages/block-library/src/buttons/test/edit.native.js
+++ b/packages/block-library/src/buttons/test/edit.native.js
@@ -2,13 +2,17 @@
  * External dependencies
  */
 import {
+	addBlock,
 	fireEvent,
-	waitFor,
 	getEditorHtml,
 	within,
 	getBlock,
 	initializeEditor,
-	changeTextOfRichText,
+	triggerBlockListLayout,
+	typeInRichText,
+	screen,
+	openBlockSettings,
+	waitFor,
 } from 'test/helpers';
 
 /**
@@ -17,17 +21,10 @@ import {
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
-// Mock debounce to prevent potentially belated state updates.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
-	debounce: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 const BUTTONS_HTML = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button /--></div>
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
+<!-- /wp:button --></div>
 <!-- /wp:buttons -->`;
 
 beforeAll( () => {
@@ -50,20 +47,21 @@ describe( 'Buttons block', () => {
 			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
-			const { getByLabelText } = await initializeEditor( {
+			const editor = await initializeEditor( {
 				initialHtml,
 			} );
 
-			const buttonsBlock = await waitFor( () =>
-				getByLabelText( /Buttons Block\. Row 1/ )
+			const [ buttonsBlock ] = await editor.findAllByLabelText(
+				/Buttons Block\. Row 1/
 			);
 			fireEvent.press( buttonsBlock );
 
 			// onLayout event has to be explicitly dispatched in BlockList component,
 			// otherwise the inner blocks are not rendered.
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -72,22 +70,22 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const buttonInnerBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 1/ )
-			);
+			const [ buttonInnerBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 1/
+				);
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await waitFor( () =>
-				getByLabelText( 'Open Settings' )
-			);
+			const settingsButton =
+				await editor.findByLabelText( 'Open Settings' );
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await waitFor( () =>
-				getByLabelText( /Border Radius/ )
-			);
+			const radiusStepper =
+				await editor.findByLabelText( /Border Radius/ );
 
-			const incrementButton = await waitFor( () =>
-				within( radiusStepper ).getByTestId( 'Increment' )
+			const incrementButton = await within( radiusStepper ).findByTestId(
+				'Increment',
+				{ hidden: true }
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -95,18 +93,18 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inline appender', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const { getByLabelText } = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -125,14 +123,15 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const secondButtonBlock = await waitFor( () =>
-				within( buttonsBlock ).getByLabelText( /Button Block\. Row 2/ )
-			);
+			const [ secondButtonBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 2/
+				);
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
-			const paragraphPlaceholder = await waitFor( () =>
-				getByLabelText( 'Add paragraph block' )
+			const paragraphPlaceholder = await screen.findByLabelText(
+				'Add paragraph block'
 			);
 			fireEvent.press( paragraphPlaceholder );
 
@@ -145,24 +144,19 @@ describe( 'Buttons block', () => {
 		} );
 
 		it( 'adds another button using the inserter', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: BUTTONS_HTML,
 			} );
-			const {
-				getByLabelText,
-				getByTestId,
-				queryAllByLabelText,
-				getByText,
-			} = screen;
 
 			// Get block
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await waitFor( () =>
-				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-			);
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -176,9 +170,9 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonBlock );
 
 			// Open the block inserter
-			fireEvent.press( getByLabelText( 'Add block' ) );
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-			const blockList = getByTestId( 'InserterUI-Blocks' );
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 			// onScroll event used to force the FlatList to render all items
 			fireEvent.scroll( blockList, {
 				nativeEvent: {
@@ -190,11 +184,11 @@ describe( 'Buttons block', () => {
 
 			// Check the Add block here placeholder is not visible
 			const addBlockHerePlaceholders =
-				queryAllByLabelText( 'ADD BLOCK HERE' );
+				screen.queryAllByLabelText( 'ADD BLOCK HERE' );
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await waitFor( () => getByText( 'Button' ) ) );
+			fireEvent.press( within( blockList ).getByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
@@ -204,25 +198,64 @@ describe( 'Buttons block', () => {
 				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
-			changeTextOfRichText( secondButtonInput, 'Hello!' );
+			typeInRichText( secondButtonInput, 'Hello!' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
+		it( 'shows only the button block when using the inserter', async () => {
+			await initializeEditor();
+
+			// Add block
+			await addBlock( screen, 'Buttons' );
+
+			// Get block
+			const buttonsBlock = await getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+			await triggerBlockListLayout( buttonsBlock );
+
+			// Get inner button block
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open the block inserter
+			fireEvent.press( screen.getByLabelText( 'Add block' ) );
+
+			const inserterList = screen.getByTestId( 'InserterUI-Blocks' );
+			// onScroll event used to force the FlatList to render all items
+			fireEvent.scroll( inserterList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+
+			// Check the Button block is in the list
+			const buttonInserterBlock =
+				await within( inserterList ).findByText( 'Button' );
+			expect( buttonInserterBlock ).toBeVisible();
+
+			// Check the Paragraph core block is not in the list
+			expect(
+				within( inserterList ).queryByLabelText( 'Paragraph block' )
+			).toBeNull();
+		} );
+
 		describe( 'removing button along with buttons block', () => {
 			it( 'removes the button and buttons block when deleting the block using the block delete action', async () => {
-				const screen = await initializeEditor( {
+				await initializeEditor( {
 					initialHtml: BUTTONS_HTML,
 				} );
-				const { getByLabelText } = screen;
 
 				// Get block
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await waitFor( () =>
-					within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-				);
+				const innerBlockListWrapper =
+					await within( buttonsBlock ).findByTestId(
+						'block-list-wrapper'
+					);
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {
@@ -236,13 +269,13 @@ describe( 'Buttons block', () => {
 				fireEvent.press( buttonBlock );
 
 				// Open block actions menu
-				const blockActionsButton = getByLabelText(
+				const blockActionsButton = screen.getByLabelText(
 					/Open Block Actions Menu/
 				);
 				fireEvent.press( blockActionsButton );
 
 				// Delete block
-				const deleteButton = getByLabelText( /Remove block/ );
+				const deleteButton = screen.getByLabelText( /Remove block/ );
 				fireEvent.press( deleteButton );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
@@ -257,29 +290,196 @@ describe( 'Buttons block', () => {
 			'Justify items right',
 		].forEach( ( justificationOption ) =>
 			it( `sets ${ justificationOption } option`, async () => {
-				const initialHtml = `<!-- wp:buttons -->
-				<div class="wp-block-buttons"><!-- wp:button /--></div>
-				<!-- /wp:buttons -->`;
-				const { getByLabelText, getByText } = await initializeEditor( {
-					initialHtml,
+				await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
 				} );
 
-				const block = await waitFor( () =>
-					getByLabelText( /Buttons Block\. Row 1/ )
+				const [ block ] = await screen.findAllByLabelText(
+					/Buttons Block\. Row 1/
 				);
 				fireEvent.press( block );
 
 				fireEvent.press(
-					getByLabelText( 'Change items justification' )
+					screen.getByLabelText( 'Change items justification' )
 				);
 
 				// Select alignment option.
 				fireEvent.press(
-					await waitFor( () => getByText( justificationOption ) )
+					await screen.findByText( justificationOption )
 				);
 
 				expect( getEditorHtml() ).toMatchSnapshot();
 			} )
 		);
 	} );
+
+	describe( 'color customization', () => {
+		it( 'sets a text color', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+			// Tap one color
+			fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+			// TODO(jest-console): Fix the warning and remove the expect below.
+			expect( console ).toHaveWarnedWith(
+				`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+			);
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a background color', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap one color
+			fireEvent.press( screen.getByLabelText( 'Luminous vivid amber' ) );
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a gradient background color', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+			// Wait for Block Settings to be visible.
+			const blockSettingsModal = screen.getByTestId(
+				'block-settings-modal'
+			);
+			await waitFor( () => blockSettingsModal.props.isVisible );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a custom gradient background color', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			await openBlockSettings( screen );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Tap on Customize Gradient
+			fireEvent.press( screen.getByLabelText( /Customize Gradient/ ) );
+
+			// Change the current angle
+			fireEvent.press( screen.getByText( '135', { hidden: true } ) );
+			const angleTextInput = screen.getByDisplayValue( '135', {
+				hidden: true,
+			} );
+			fireEvent.changeText( angleTextInput, '200' );
+
+			// Go back to the settings list.
+			fireEvent.press( await screen.findByLabelText( 'Go back' ) );
+
+			// Assert
+			const customButton = await screen.findByText( 'CUSTOM' );
+			expect( customButton ).toBeVisible();
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );
diff --git a/packages/block-library/src/buttons/test/transforms.native.js b/packages/block-library/src/buttons/test/transforms.native.js
new file mode 100644
index 00000000000000..4ae945e53660d0
--- /dev/null
+++ b/packages/block-library/src/buttons/test/transforms.native.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Buttons';
+const initialHtml = `
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solid Button</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"gradient":"luminous-vivid-amber-to-luminous-vivid-orange"} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button">Gradient Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/buttons/transforms.js b/packages/block-library/src/buttons/transforms.js
index 741de3c7717a64..9848299f3a99f9 100644
--- a/packages/block-library/src/buttons/transforms.js
+++ b/packages/block-library/src/buttons/transforms.js
@@ -7,7 +7,7 @@ import { __unstableCreateElement as createElement } from '@wordpress/rich-text';
 /**
  * Internal dependencies
  */
-import { name } from './block.json';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -18,7 +18,7 @@ const transforms = {
 			transform: ( buttons ) =>
 				// Creates the buttons block.
 				createBlock(
-					name,
+					'core/buttons',
 					{},
 					// Loop the selected buttons.
 					buttons.map( ( attributes ) =>
@@ -34,14 +34,12 @@ const transforms = {
 			transform: ( buttons ) =>
 				// Creates the buttons block.
 				createBlock(
-					name,
+					'core/buttons',
 					{},
 					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
-						const element = createElement(
-							document,
-							attributes.content
-						);
+						const { content, metadata } = attributes;
+						const element = createElement( document, content );
 						// Remove any HTML tags.
 						const text = element.innerText || '';
 						// Get first url.
@@ -51,6 +49,13 @@ const transforms = {
 						return createBlock( 'core/button', {
 							text,
 							url,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/button',
+								( { content: contentBinding } ) => ( {
+									text: contentBinding,
+								} )
+							),
 						} );
 					} )
 				),
diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
index 2accd7142c7cc9..6ba8f7d725e6e5 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/calendar",
 	"title": "Calendar",
 	"category": "widgets",
@@ -37,6 +37,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-calendar"
diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php
index 01d2b7eb8ad91b..44b56af25e4662 100644
--- a/packages/block-library/src/calendar/index.php
+++ b/packages/block-library/src/calendar/index.php
@@ -8,6 +8,11 @@
 /**
  * Renders the `core/calendar` block on server.
  *
+ * @since 5.2.0
+ *
+ * @global int $monthnum.
+ * @global int $year.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content.
@@ -33,10 +38,8 @@ function render_block_core_calendar( $attributes ) {
 			str_contains( $permalink_structure, '%monthnum%' ) &&
 			str_contains( $permalink_structure, '%year%' )
 		) {
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 			$monthnum = $attributes['month'];
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-			$year = $attributes['year'];
+			$year     = $attributes['year'];
 		}
 	}
 
@@ -44,19 +47,21 @@ function render_block_core_calendar( $attributes ) {
 
 	// Text color.
 	$preset_text_color          = array_key_exists( 'textColor', $attributes ) ? "var:preset|color|{$attributes['textColor']}" : null;
-	$custom_text_color          = _wp_array_get( $attributes, array( 'style', 'color', 'text' ), null );
+	$custom_text_color          = $attributes['style']['color']['text'] ?? null;
 	$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
 
 	// Background Color.
 	$preset_background_color          = array_key_exists( 'backgroundColor', $attributes ) ? "var:preset|color|{$attributes['backgroundColor']}" : null;
-	$custom_background_color          = _wp_array_get( $attributes, array( 'style', 'color', 'background' ), null );
+	$custom_background_color          = $attributes['style']['color']['background'] ?? null;
 	$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
 
 	// Generate color styles and classes.
-	$styles        = gutenberg_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
+	$styles        = wp_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
 	$inline_styles = empty( $styles['css'] ) ? '' : sprintf( ' style="%s"', esc_attr( $styles['css'] ) );
 	$classnames    = empty( $styles['classnames'] ) ? '' : ' ' . esc_attr( $styles['classnames'] );
-
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classnames .= ' has-link-color';
+	}
 	// Apply color classes and styles to the calendar.
 	$calendar = str_replace( '<table', '<table' . $inline_styles, get_calendar( true, false ) );
 	$calendar = str_replace( 'class="wp-calendar-table', 'class="wp-calendar-table' . $classnames, $calendar );
@@ -68,16 +73,16 @@ function render_block_core_calendar( $attributes ) {
 		$calendar
 	);
 
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 	$monthnum = $previous_monthnum;
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-	$year = $previous_year;
+	$year     = $previous_year;
 
 	return $output;
 }
 
 /**
  * Registers the `core/calendar` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_calendar() {
 	register_block_type_from_metadata(
@@ -96,6 +101,8 @@ function register_block_core_calendar() {
  * Used to hide the calendar block when there are no published posts.
  * This compensates for a known Core bug: https://core.trac.wordpress.org/ticket/12016
  *
+ * @since 5.9.0
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_has_published_posts() {
@@ -119,6 +126,10 @@ function block_core_calendar_has_published_posts() {
  * Queries the database for any published post and saves
  * a flag whether any published post exists or not.
  *
+ * @since 5.9.0
+ *
+ * @global wpdb $wpdb WordPress database abstraction object.
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_update_has_published_posts() {
@@ -134,6 +145,8 @@ function block_core_calendar_update_has_published_posts() {
 	/**
 	 * Handler for updating the has published posts flag when a post is deleted.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param int $post_id Deleted post ID.
 	 */
 	function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
@@ -149,6 +162,8 @@ function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
 	/**
 	 * Handler for updating the has published posts flag when a post status changes.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param string  $new_status The status the post is changing to.
 	 * @param string  $old_status The status the post is changing from.
 	 * @param WP_Post $post       Post object.
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index adf28dc42b4f03..3609bdf9ab97c0 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -1,12 +1,17 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/categories",
-	"title": "Categories List",
+	"title": "Terms List",
 	"category": "widgets",
-	"description": "Display a list of all categories.",
+	"description": "Display a list of all terms of a given taxonomy.",
+	"keywords": [ "categories" ],
 	"textdomain": "default",
 	"attributes": {
+		"taxonomy": {
+			"type": "string",
+			"default": "category"
+		},
 		"displayAsDropdown": {
 			"type": "boolean",
 			"default": false
@@ -26,14 +31,27 @@
 		"showEmpty": {
 			"type": "boolean",
 			"default": false
+		},
+		"label": {
+			"type": "string",
+			"role": "content"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
+	"usesContext": [ "enhancedPagination" ],
 	"supports": {
 		"align": true,
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -47,6 +65,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-categories-editor",
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index db014bac0fd150..8bd2769b0ec711 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { unescape } from 'lodash';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,13 +9,19 @@ import classnames from 'classnames';
 import {
 	PanelBody,
 	Placeholder,
+	SelectControl,
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
@@ -27,19 +32,35 @@ export default function CategoriesEdit( {
 		showPostCounts,
 		showOnlyTopLevel,
 		showEmpty,
+		label,
+		showLabel,
+		taxonomy: taxonomySlug,
 	},
 	setAttributes,
 	className,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
+
+	const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
+		'root',
+		'taxonomy'
+	);
+
+	const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public );
+
+	const taxonomy = taxonomies?.find( ( t ) => t.slug === taxonomySlug );
+
+	const isHierarchicalTaxonomy =
+		! isResolvingTaxonomies && taxonomy?.hierarchical;
+
 	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
-	if ( showOnlyTopLevel ) {
+	if ( isHierarchicalTaxonomy && showOnlyTopLevel ) {
 		query.parent = 0;
 	}
 
 	const { records: categories, isResolving } = useEntityRecords(
 		'taxonomy',
-		'category',
+		taxonomySlug,
 		query
 	);
 
@@ -57,13 +78,13 @@ export default function CategoriesEdit( {
 		setAttributes( { [ attributeName ]: newValue } );
 
 	const renderCategoryName = ( name ) =>
-		! name ? __( '(Untitled)' ) : unescape( name ).trim();
+		! name ? __( '(Untitled)' ) : decodeEntities( name ).trim();
 
 	const renderCategoryList = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return categoriesList.map( ( category ) =>
-			renderCategoryListItem( category, 0 )
+			renderCategoryListItem( category )
 		);
 	};
 
@@ -76,27 +97,48 @@ export default function CategoriesEdit( {
 					{ renderCategoryName( name ) }
 				</a>
 				{ showPostCounts && ` (${ count })` }
-				{ showHierarchy && !! childCategories.length && (
-					<ul className="children">
-						{ childCategories.map( ( childCategory ) =>
-							renderCategoryListItem( childCategory )
-						) }
-					</ul>
-				) }
+				{ isHierarchicalTaxonomy &&
+					showHierarchy &&
+					!! childCategories.length && (
+						<ul className="children">
+							{ childCategories.map( ( childCategory ) =>
+								renderCategoryListItem( childCategory )
+							) }
+						</ul>
+					) }
 			</li>
 		);
 	};
 
 	const renderCategoryDropdown = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
-				</VisuallyHidden>
+				{ showLabel ? (
+					<RichText
+						className="wp-block-categories__label"
+						aria-label={ __( 'Label text' ) }
+						placeholder={ taxonomy.name }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+					/>
+				) : (
+					<VisuallyHidden as="label" htmlFor={ selectId }>
+						{ label ? label : taxonomy.name }
+					</VisuallyHidden>
+				) }
 				<select id={ selectId }>
-					<option>{ __( 'Select Category' ) }</option>
+					<option>
+						{ sprintf(
+							/* translators: %s: taxonomy's singular name */
+							__( 'Select %s' ),
+							taxonomy.labels.singular_name
+						) }
+					</option>
 					{ categoriesList.map( ( category ) =>
 						renderCategoryDropdownItem( category, 0 )
 					) }
@@ -114,7 +156,8 @@ export default function CategoriesEdit( {
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
 			</option>,
-			showHierarchy &&
+			isHierarchicalTaxonomy &&
+				showHierarchy &&
 				!! childCategories.length &&
 				childCategories.map( ( childCategory ) =>
 					renderCategoryDropdownItem( childCategory, level + 1 )
@@ -127,7 +170,7 @@ export default function CategoriesEdit( {
 			? 'ul'
 			: 'div';
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'wp-block-categories-list':
 			!! categories?.length && ! displayAsDropdown && ! isResolving,
 		'wp-block-categories-dropdown':
@@ -142,28 +185,61 @@ export default function CategoriesEdit( {
 		<TagName { ...blockProps }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
+					{ Array.isArray( taxonomies ) && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ taxonomies.map( ( t ) => ( {
+								label: t.name,
+								value: t.slug,
+							} ) ) }
+							value={ taxonomySlug }
+							onChange={ ( selectedTaxonomy ) =>
+								setAttributes( {
+									taxonomy: selectedTaxonomy,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							className="wp-block-categories__indentation"
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ toggleAttribute( 'showLabel' ) }
+						/>
+					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					{ isHierarchicalTaxonomy && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show only top level terms' ) }
+							checked={ showOnlyTopLevel }
+							onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+						/>
+					) }
 					<ToggleControl
-						label={ __( 'Show only top level categories' ) }
-						checked={ showOnlyTopLevel }
-						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
-					/>
-					<ToggleControl
-						label={ __( 'Show empty categories' ) }
+						__nextHasNoMarginBottom
+						label={ __( 'Show empty terms' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
-					{ ! showOnlyTopLevel && (
+					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
 							checked={ showHierarchy }
 							onChange={ toggleAttribute( 'showHierarchy' ) }
@@ -172,16 +248,12 @@ export default function CategoriesEdit( {
 				</PanelBody>
 			</InspectorControls>
 			{ isResolving && (
-				<Placeholder icon={ pin } label={ __( 'Categories' ) }>
+				<Placeholder icon={ pin } label={ __( 'Terms' ) }>
 					<Spinner />
 				</Placeholder>
 			) }
 			{ ! isResolving && categories?.length === 0 && (
-				<p>
-					{ __(
-						'Your site does not have any posts, so there is nothing to display here at the moment.'
-					) }
-				</p>
+				<p>{ taxonomy.labels.no_terms }</p>
 			) }
 			{ ! isResolving &&
 				categories?.length > 0 &&
diff --git a/packages/block-library/src/categories/editor.scss b/packages/block-library/src/categories/editor.scss
index cf112b6fc5ff63..c39fbf69bb981b 100644
--- a/packages/block-library/src/categories/editor.scss
+++ b/packages/block-library/src/categories/editor.scss
@@ -5,3 +5,12 @@
 		margin-top: 6px;
 	}
 }
+
+/* Center alignment for classic themes. */
+[data-align="center"] .wp-block-categories {
+	text-align: center;
+}
+
+.wp-block-categories__indentation {
+	padding-left: 16px;
+}
diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js
index 8cdcad450862a2..d30c55667d106e 100644
--- a/packages/block-library/src/categories/index.js
+++ b/packages/block-library/src/categories/index.js
@@ -9,6 +9,7 @@ import { category as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index 7e3979b7aefe2e..60a29713b4660d 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -8,19 +8,27 @@
 /**
  * Renders the `core/categories` block on server.
  *
- * @param array $attributes The block attributes.
+ * @since 5.0.0
+ * @since 6.7.0 Enable client-side rendering if enhancedPagination context is true.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
  *
  * @return string Returns the categories list/dropdown markup.
  */
-function render_block_core_categories( $attributes ) {
+function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$taxonomy = get_taxonomy( $attributes['taxonomy'] );
+
 	$args = array(
 		'echo'         => false,
 		'hierarchical' => ! empty( $attributes['showHierarchy'] ),
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
+		'taxonomy'     => $attributes['taxonomy'],
 		'title_li'     => '',
 		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
@@ -31,10 +39,20 @@ function render_block_core_categories( $attributes ) {
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
-		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
-		$items_markup             = wp_dropdown_categories( $args );
-		$type                     = 'dropdown';
+		$args['name']             = $taxonomy->query_var;
+		$args['value_field']      = 'slug';
+		$args['show_option_none'] = sprintf(
+			/* translators: %s: taxonomy's singular name */
+			__( 'Select %s' ),
+			$taxonomy->labels->singular_name
+		);
+
+		$show_label     = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label  = $taxonomy->label;
+		$label_text     = ! empty( $attributes['label'] ) ? wp_kses_post( $attributes['label'] ) : $default_label;
+		$wrapper_markup = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
+		$items_markup   = wp_dropdown_categories( $args );
+		$type           = 'dropdown';
 
 		if ( ! is_admin() ) {
 			// Inject the dropdown script immediately after the select dropdown.
@@ -46,9 +64,19 @@ function render_block_core_categories( $attributes ) {
 			);
 		}
 	} else {
+		$args['show_option_none'] = $taxonomy->labels->no_terms;
+
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
+
+		if ( ! empty( $block->context['enhancedPagination'] ) ) {
+			$p = new WP_HTML_Tag_Processor( $items_markup );
+			while ( $p->next_tag( 'a' ) ) {
+				$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			}
+			$items_markup = $p->get_updated_html();
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => "wp-block-categories-{$type}" ) );
@@ -63,6 +91,8 @@ function render_block_core_categories( $attributes ) {
 /**
  * Generates the inline script for a categories dropdown field.
  *
+ * @since 5.0.0
+ *
  * @param string $dropdown_id ID of the dropdown field.
  *
  * @return string Returns the dropdown onChange redirection script.
@@ -70,25 +100,25 @@ function render_block_core_categories( $attributes ) {
 function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	ob_start();
 	?>
-	<script type='text/javascript'>
-	/* <![CDATA[ */
+	<script>
 	( function() {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
-			if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-				location.href = "<?php echo esc_url( home_url() ); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
+			if ( dropdown.options[ dropdown.selectedIndex ].value !== -1 ) {
+				location.href = "<?php echo esc_url( home_url() ); ?>/?" + dropdown.name + '=' + dropdown.options[ dropdown.selectedIndex ].value;
 			}
 		}
 		dropdown.onchange = onCatChange;
 	})();
-	/* ]]> */
 	</script>
 	<?php
-	return ob_get_clean();
+	return wp_get_inline_script_tag( str_replace( array( '<script>', '</script>' ), '', ob_get_clean() ) );
 }
 
 /**
  * Registers the `core/categories` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_categories() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/categories/style.scss b/packages/block-library/src/categories/style.scss
index 8cf1252800b438..319206c51a1f3f 100644
--- a/packages/block-library/src/categories/style.scss
+++ b/packages/block-library/src/categories/style.scss
@@ -10,4 +10,12 @@
 		/*rtl:ignore*/
 		margin-left: 2em;
 	}
+	/* Only apply the text align on dropdowns, not lists. */
+	&.wp-block-categories-dropdown.aligncenter {
+		text-align: center;
+	}
+	& .wp-block-categories__label {
+		width: 100%;
+		display: block;
+	}
 }
diff --git a/packages/block-library/src/categories/variations.js b/packages/block-library/src/categories/variations.js
new file mode 100644
index 00000000000000..94f3fb8efa6b9a
--- /dev/null
+++ b/packages/block-library/src/categories/variations.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { category as icon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'terms',
+		title: __( 'Terms List' ),
+		icon,
+		attributes: {
+			// We need to set an attribute here that will be set when inserting the block.
+			// We cannot leave this empty, as that would be interpreted as the default value,
+			// which is `category` -- for which we're defining a distinct variation below,
+			// for backwards compatibility reasons.
+			// The logical fallback is thus the only other built-in and public taxonomy: Tags.
+			taxonomy: 'post_tag',
+		},
+		isActive: ( blockAttributes ) =>
+			// This variation is used for any taxonomy other than `category`.
+			blockAttributes.taxonomy !== 'category',
+	},
+	{
+		name: 'categories',
+		title: __( 'Categories List' ),
+		description: __( 'Display a list of all categories.' ),
+		icon,
+		attributes: {
+			taxonomy: 'category',
+		},
+		isActive: [ 'taxonomy' ],
+		// The following is needed to prevent "Terms List" from showing up twice in the inserter
+		// (once for the block, once for the variation). Fortunately, it does not collide with
+		// `categories` being the default value of the `taxonomy` attribute.
+		isDefault: true,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/classic.scss b/packages/block-library/src/classic.scss
index c12983c7d9ad93..3156786cb2b2ed 100644
--- a/packages/block-library/src/classic.scss
+++ b/packages/block-library/src/classic.scss
@@ -13,3 +13,8 @@
 
 	font-size: 1.125em;
 }
+
+.wp-block-file__button {
+	background: #32373c;
+	color: $white;
+}
diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
index 69278002295695..4465c8554fc125 100644
--- a/packages/block-library/src/code/block.json
+++ b/packages/block-library/src/code/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/code",
 	"title": "Code",
 	"category": "text",
@@ -8,12 +8,14 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
-			"selector": "code"
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "code",
+			"__unstablePreserveWhiteSpace": true
 		}
 	},
 	"supports": {
+		"align": [ "wide" ],
 		"anchor": true,
 		"typography": {
 			"fontSize": true,
@@ -30,7 +32,11 @@
 		},
 		"spacing": {
 			"margin": [ "top", "bottom" ],
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__experimentalBorder": {
 			"radius": true,
@@ -50,6 +56,9 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-code"
diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
index 4153b14d753cdc..a3dbedeaf23352 100644
--- a/packages/block-library/src/code/edit.js
+++ b/packages/block-library/src/code/edit.js
@@ -3,20 +3,32 @@
  */
 import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-export default function CodeEdit( { attributes, setAttributes, onRemove } ) {
+export default function CodeEdit( {
+	attributes,
+	setAttributes,
+	onRemove,
+	insertBlocksAfter,
+	mergeBlocks,
+} ) {
 	const blockProps = useBlockProps();
 	return (
 		<pre { ...blockProps }>
 			<RichText
 				tagName="code"
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 				onRemove={ onRemove }
+				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				preserveWhiteSpace
 				__unstablePastePlainText
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</pre>
 	);
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
index 58188d0b2119f0..d348a6968b40da 100644
--- a/packages/block-library/src/code/edit.native.js
+++ b/packages/block-library/src/code/edit.native.js
@@ -6,9 +6,10 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { PlainText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -19,37 +20,48 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './theme.scss';
 
-// Note: styling is applied directly to the (nested) PlainText component. Web-side components
-// apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const {
+		attributes,
+		setAttributes,
+		onRemove,
+		style,
+		insertBlocksAfter,
+		mergeBlocks,
+	} = props;
 	const codeStyle = {
 		...usePreferredColorSchemeStyle(
 			styles.blockCode,
 			styles.blockCodeDark
 		),
-		...( style?.fontSize && { fontSize: style.fontSize } ),
 	};
 
+	const textStyle = style?.fontSize ? { fontSize: style.fontSize } : {};
+
 	const placeholderStyle = usePreferredColorSchemeStyle(
 		styles.placeholder,
 		styles.placeholderDark
 	);
 
 	return (
-		<View>
-			<PlainText
+		<View style={ codeStyle }>
+			<RichText
+				tagName="pre"
 				value={ attributes.content }
-				style={ codeStyle }
-				multiline={ true }
+				identifier="content"
+				style={ textStyle }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
+				onMerge={ mergeBlocks }
+				onRemove={ onRemove }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
-				isSelected={ props.isSelected }
-				onFocus={ onFocus }
-				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				preserveWhiteSpace
+				__unstablePastePlainText
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</View>
 	);
diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js
index 091c59ffbfca47..c602045256d6e9 100644
--- a/packages/block-library/src/code/index.js
+++ b/packages/block-library/src/code/index.js
@@ -29,6 +29,11 @@ export const settings = {
 			/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */
 		},
 	},
+	merge( attributes, attributesToMerge ) {
+		return {
+			content: attributes.content + '\n\n' + attributesToMerge.content,
+		};
+	},
 	transforms,
 	edit,
 	save,
diff --git a/packages/block-library/src/code/save.js b/packages/block-library/src/code/save.js
index 7dd355f3855a86..977fb074c2a53e 100644
--- a/packages/block-library/src/code/save.js
+++ b/packages/block-library/src/code/save.js
@@ -13,7 +13,16 @@ export default function save( { attributes } ) {
 		<pre { ...useBlockProps.save() }>
 			<RichText.Content
 				tagName="code"
-				value={ escape( attributes.content ) }
+				// To do: `escape` encodes characters in shortcodes and URLs to
+				// prevent embedding in PHP. Ideally checks for the code block,
+				// or pre/code tags, should be made on the PHP side?
+				value={ escape(
+					typeof attributes.content === 'string'
+						? attributes.content
+						: attributes.content.toHTMLString( {
+								preserveWhiteSpace: true,
+						  } )
+				) }
 			/>
 		</pre>
 	);
diff --git a/packages/block-library/src/code/style.scss b/packages/block-library/src/code/style.scss
index 670a4f7f1ef4c8..ccc950d19b552c 100644
--- a/packages/block-library/src/code/style.scss
+++ b/packages/block-library/src/code/style.scss
@@ -9,5 +9,10 @@
 		font-family: inherit;
 		overflow-wrap: break-word;
 		white-space: pre-wrap;
+		// Set direction and avoid inheriting alignment from a parent element.
+		/*!rtl:begin:ignore*/
+		direction: ltr;
+		text-align: initial;
+		/*!rtl:end:ignore*/
 	}
 }
diff --git a/packages/block-library/src/code/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/code/test/__snapshots__/edit.native.js.snap
index 9b2fc565f56895..41643516e30097 100644
--- a/packages/block-library/src/code/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/code/test/__snapshots__/edit.native.js.snap
@@ -2,12 +2,12 @@
 
 exports[`Code renders given text without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<pre class="wp-block-code"><code>Sample text</code></pre>
 <!-- /wp:code -->"
 `;
 
 exports[`Code renders without crashing 1`] = `
 "<!-- wp:code -->
-<pre class=\\"wp-block-code\\"><code></code></pre>
+<pre class="wp-block-code"><code></code></pre>
 <!-- /wp:code -->"
 `;
diff --git a/packages/block-library/src/code/test/edit.native.js b/packages/block-library/src/code/test/edit.native.js
index 0f693fa2136ce1..be43e398d03a37 100644
--- a/packages/block-library/src/code/test/edit.native.js
+++ b/packages/block-library/src/code/test/edit.native.js
@@ -49,7 +49,7 @@ describe( 'Code', () => {
 		const screen = await initializeEditor( {
 			initialHtml,
 		} );
-		const { getByDisplayValue } = screen;
+		const { findByPlaceholderText } = screen;
 
 		// Get block
 		const codeBlock = await getBlock( screen, 'Code' );
@@ -57,7 +57,7 @@ describe( 'Code', () => {
 		fireEvent.press( codeBlock );
 
 		// Get initial text
-		const codeBlockText = getByDisplayValue( 'Sample text' );
+		const codeBlockText = await findByPlaceholderText( 'Write code…' );
 		expect( codeBlockText ).toBeVisible();
 
 		expect( getEditorHtml() ).toMatchSnapshot();
diff --git a/packages/block-library/src/code/theme.native.scss b/packages/block-library/src/code/theme.native.scss
index ee432598dd1c22..44eb9707b86a4b 100644
--- a/packages/block-library/src/code/theme.native.scss
+++ b/packages/block-library/src/code/theme.native.scss
@@ -1,4 +1,4 @@
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable font-family-no-missing-generic-family-keyword -- iOS will use the Menlo typeface and Android will use monospace, no need for a generic family keyword. */
 
 .blockCode {
 	font-family: $default-monospace-font;
diff --git a/packages/block-library/src/code/transforms.js b/packages/block-library/src/code/transforms.js
index b19d584fb7b056..e537db342b8d5c 100644
--- a/packages/block-library/src/code/transforms.js
+++ b/packages/block-library/src/code/transforms.js
@@ -2,6 +2,12 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -12,10 +18,22 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/html', 'core/paragraph' ],
-			transform: ( { content } ) => {
-				return createBlock( 'core/code', {
+			blocks: [ 'core/paragraph' ],
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/code', {
 					content,
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
+				} ),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/html' ],
+			transform: ( { content: text, metadata } ) => {
+				return createBlock( 'core/code', {
+					// The HTML is plain text (with plain line breaks), so
+					// convert it to rich text.
+					content: toHTMLString( { value: create( { text } ) } ),
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
 				} );
 			},
 		},
@@ -42,9 +60,14 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) => {
-				return createBlock( 'core/paragraph', { content } );
-			},
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/paragraph', {
+					content,
+					metadata: getTransformedMetadata(
+						metadata,
+						'core/paragraph'
+					),
+				} ),
 		},
 	],
 };
diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
index f6f7bc8d1f5cc9..33bd528b356880 100644
--- a/packages/block-library/src/column/block.json
+++ b/packages/block-library/src/column/block.json
@@ -1,9 +1,9 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/column",
 	"title": "Column",
-	"category": "text",
+	"category": "design",
 	"parent": [ "core/columns" ],
 	"description": "A single column within a columns block.",
 	"textdomain": "default",
@@ -23,30 +23,37 @@
 		}
 	},
 	"supports": {
+		"__experimentalOnEnter": true,
 		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
+			"button": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"blockGap": true,
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalBorder": {
 			"color": true,
+			"radius": true,
 			"style": true,
 			"width": true,
 			"__experimentalDefaultControls": {
 				"color": true,
+				"radius": true,
 				"style": true,
 				"width": true
 			}
@@ -64,6 +71,9 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"layout": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }
diff --git a/packages/block-library/src/column/deprecated.js b/packages/block-library/src/column/deprecated.js
index eabefba86a7981..514ab41dd62a87 100644
--- a/packages/block-library/src/column/deprecated.js
+++ b/packages/block-library/src/column/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ const deprecated = [
 		save( { attributes } ) {
 			const { verticalAlignment, width } = attributes;
 
-			const wrapperClasses = classnames( {
+			const wrapperClasses = clsx( {
 				[ `is-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index 84a230ca6e79ac..a0f3cdcf65393d 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -24,25 +24,36 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
+function ColumnInspectorControls( { width, setAttributes } ) {
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
+	} );
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			<UnitControl
+				label={ __( 'Width' ) }
+				__unstableInputWidth="calc(50% - 8px)"
+				__next40pxDefaultSize
+				value={ width || '' }
+				onChange={ ( nextWidth ) => {
+					nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth;
+					setAttributes( { width: nextWidth } );
+				} }
+				units={ units }
+			/>
+		</PanelBody>
+	);
+}
+
 function ColumnEdit( {
 	attributes: { verticalAlignment, width, templateLock, allowedBlocks },
 	setAttributes,
 	clientId,
 } ) {
-	const classes = classnames( 'block-core-columns', {
+	const classes = clsx( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
-
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
 		( select ) => {
 			const { getBlockOrder, getBlockRootClientId } =
@@ -104,23 +115,14 @@ function ColumnEdit( {
 				<BlockVerticalAlignmentToolbar
 					onChange={ updateAlignment }
 					value={ verticalAlignment }
+					controls={ [ 'top', 'center', 'bottom', 'stretch' ] }
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Column settings' ) }>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="edge"
-						__unstableInputWidth="80px"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							nextWidth =
-								0 > parseFloat( nextWidth ) ? '0' : nextWidth;
-							setAttributes( { width: nextWidth } );
-						} }
-						units={ units }
-					/>
-				</PanelBody>
+				<ColumnInspectorControls
+					width={ width }
+					setAttributes={ setAttributes }
+				/>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
 		</>
diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
index b3fcb3f84d2cdc..0a88d36beaf960 100644
--- a/packages/block-library/src/column/edit.native.js
+++ b/packages/block-library/src/column/edit.native.js
@@ -15,7 +15,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	store as blockEditorStore,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -42,7 +42,6 @@ function ColumnEdit( {
 	hasChildren,
 	isSelected,
 	getStylesFromColorScheme,
-	isParentSelected,
 	contentStyle,
 	columns,
 	selectedColumnIndex,
@@ -61,14 +60,9 @@ function ColumnEdit( {
 
 	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	const updateAlignment = ( alignment ) => {
@@ -112,10 +106,10 @@ function ColumnEdit( {
 	};
 
 	const renderAppender = useCallback( () => {
-		const { width: columnWidth } = contentStyle[ clientId ];
-		const isFullWidth = columnWidth === screenWidth;
-
 		if ( isSelected ) {
+			const { width: columnWidth } = contentStyle[ clientId ] || {};
+			const isFullWidth = columnWidth === screenWidth;
+
 			return (
 				<View
 					style={ [
@@ -134,24 +128,27 @@ function ColumnEdit( {
 			);
 		}
 		return null;
-	}, [ contentStyle[ clientId ], screenWidth, isSelected, hasChildren ] );
+	}, [ contentStyle, clientId, screenWidth, isSelected, hasChildren ] );
 
 	if ( ! isSelected && ! hasChildren ) {
 		return (
 			<View
 				style={ [
-					! isParentSelected &&
-						getStylesFromColorScheme(
-							styles.columnPlaceholder,
-							styles.columnPlaceholderDark
-						),
-					styles.columnPlaceholderNotSelected,
+					getStylesFromColorScheme(
+						styles.columnPlaceholder,
+						styles.columnPlaceholderDark
+					),
 					contentStyle[ clientId ],
 				] }
 			/>
 		);
 	}
 
+	const parentWidth =
+		contentStyle &&
+		contentStyle[ clientId ] &&
+		contentStyle[ clientId ].width;
+
 	return (
 		<>
 			{ isSelected && (
@@ -163,7 +160,7 @@ function ColumnEdit( {
 						/>
 					</BlockControls>
 					<InspectorControls>
-						<PanelBody title={ __( 'Column settings' ) }>
+						<PanelBody title={ __( 'Settings' ) }>
 							<UnitControl
 								label={ __( 'Width' ) }
 								min={ 1 }
@@ -211,7 +208,7 @@ function ColumnEdit( {
 			>
 				<InnerBlocks
 					renderAppender={ renderAppender }
-					parentWidth={ contentStyle[ clientId ].width }
+					parentWidth={ parentWidth }
 					blockWidth={ blockWidth }
 				/>
 			</View>
@@ -223,7 +220,9 @@ function ColumnEditWrapper( props ) {
 	const { verticalAlignment } = props.attributes;
 
 	const getVerticalAlignmentRemap = ( alignment ) => {
-		if ( ! alignment ) return styles.flexBase;
+		if ( ! alignment ) {
+			return styles.flexBase;
+		}
 		return {
 			...styles.flexBase,
 			...styles[ `is-vertically-aligned-${ alignment }` ],
@@ -253,8 +252,6 @@ export default compose( [
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-		const isParentSelected =
-			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		const blockOrder = getBlockOrder( parentId );
 
@@ -266,7 +263,6 @@ export default compose( [
 
 		return {
 			hasChildren,
-			isParentSelected,
 			isSelected,
 			selectedColumnIndex,
 			columns,
diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss
index ef937134a43c3f..f76d85ff44b235 100644
--- a/packages/block-library/src/column/editor.native.scss
+++ b/packages/block-library/src/column/editor.native.scss
@@ -1,7 +1,3 @@
-.columnPlaceholderNotSelected {
-	padding-top: $block-selected-to-content;
-}
-
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;
diff --git a/packages/block-library/src/column/save.js b/packages/block-library/src/column/save.js
index 9d52ff19d08236..87806f70f25ff4 100644
--- a/packages/block-library/src/column/save.js
+++ b/packages/block-library/src/column/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
 
-	const wrapperClasses = classnames( {
+	const wrapperClasses = clsx( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index aaaa72263e309f..6d49a27e82eb03 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -1,9 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/columns",
 	"title": "Columns",
 	"category": "design",
+	"allowedBlocks": [ "core/column" ],
 	"description": "Display content in multiple columns, with blocks added to each column.",
 	"textdomain": "default",
 	"attributes": {
@@ -13,6 +14,10 @@
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ]
 		}
 	},
 	"supports": {
@@ -22,6 +27,8 @@
 		"color": {
 			"gradients": true,
 			"link": true,
+			"heading": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -35,10 +42,11 @@
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowEditing": false,
@@ -71,7 +79,11 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"shadow": true
 	},
 	"editorStyle": "wp-block-columns-editor",
 	"style": "wp-block-columns"
diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index c139a1df6a1f20..21be6d29118ee4 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
  *
  * @param {string} originalContent Deprecated Columns inner block HTML.
  *
- * @return {?number} Column to which inner block is to be assigned.
+ * @return {number | undefined} Column to which inner block is to be assigned.
  */
 function getDeprecatedLayoutColumn( originalContent ) {
 	let { doc } = getDeprecatedLayoutColumn;
@@ -95,7 +95,7 @@ export default [
 
 			const textClass = getColorClassName( 'color', textColor );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-text-color': textColor || customTextColor,
 				[ backgroundClass ]: backgroundClass,
@@ -210,7 +210,7 @@ export default [
 		save( { attributes } ) {
 			const { verticalAlignment, columns } = attributes;
 
-			const wrapperClasses = classnames( `has-${ columns }-columns`, {
+			const wrapperClasses = clsx( `has-${ columns }-columns`, {
 				[ `are-vertically-aligned-${ verticalAlignment }` ]:
 					verticalAlignment,
 			} );
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 8879f0e52f2e7a..f8cf0297302ccd 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { get } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -24,7 +23,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
@@ -41,36 +40,159 @@ import {
 	toWidthPrecision,
 } from './utils';
 
-/**
- * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
- * The contents of the array should never change.
- * The array should contain the name of each block that is allowed.
- * In columns block, the only block we allow is 'core/column'.
- *
- * @constant
- * @type {string[]}
- */
-const ALLOWED_BLOCKS = [ 'core/column' ];
+const DEFAULT_BLOCK = {
+	name: 'core/column',
+};
 
-function ColumnsEditContainer( {
-	attributes,
-	setAttributes,
-	updateAlignment,
-	updateColumns,
+function ColumnInspectorControls( {
 	clientId,
+	setAttributes,
+	isStackedOnMobile,
 } ) {
-	const { isStackedOnMobile, verticalAlignment } = attributes;
-
-	const { count } = useSelect(
+	const { count, canInsertColumnBlock, minCount } = useSelect(
 		( select ) => {
+			const {
+				canInsertBlockType,
+				canRemoveBlock,
+				getBlocks,
+				getBlockCount,
+			} = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+
+			// Get the indexes of columns for which removal is prevented.
+			// The highest index will be used to determine the minimum column count.
+			const preventRemovalBlockIndexes = innerBlocks.reduce(
+				( acc, block, index ) => {
+					if ( ! canRemoveBlock( block.clientId ) ) {
+						acc.push( index );
+					}
+					return acc;
+				},
+				[]
+			);
+
 			return {
-				count: select( blockEditorStore ).getBlockCount( clientId ),
+				count: getBlockCount( clientId ),
+				canInsertColumnBlock: canInsertBlockType(
+					'core/column',
+					clientId
+				),
+				minCount: Math.max( ...preventRemovalBlockIndexes ) + 1,
 			};
 		},
 		[ clientId ]
 	);
+	const { getBlocks } = useSelect( blockEditorStore );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	/**
+	 * Updates the column count, including necessary revisions to child Column
+	 * blocks to grant required or redistribute available space.
+	 *
+	 * @param {number} previousColumns Previous column count.
+	 * @param {number} newColumns      New column count.
+	 */
+	function updateColumns( previousColumns, newColumns ) {
+		let innerBlocks = getBlocks( clientId );
+		const hasExplicitWidths = hasExplicitPercentColumnWidths( innerBlocks );
+
+		// Redistribute available width for existing inner blocks.
+		const isAddingColumn = newColumns > previousColumns;
+
+		if ( isAddingColumn && hasExplicitWidths ) {
+			// If adding a new column, assign width to the new column equal to
+			// as if it were `1 / columns` of the total available space.
+			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			const newlyAddedColumns = newColumns - previousColumns;
+
+			// Redistribute in consideration of pending block insertion as
+			// constraining the available working width.
+			const widths = getRedistributedColumnWidths(
+				innerBlocks,
+				100 - newColumnWidth * newlyAddedColumns
+			);
+
+			innerBlocks = [
+				...getMappedColumnWidths( innerBlocks, widths ),
+				...Array.from( {
+					length: newlyAddedColumns,
+				} ).map( () => {
+					return createBlock( 'core/column', {
+						width: `${ newColumnWidth }%`,
+					} );
+				} ),
+			];
+		} else if ( isAddingColumn ) {
+			innerBlocks = [
+				...innerBlocks,
+				...Array.from( {
+					length: newColumns - previousColumns,
+				} ).map( () => {
+					return createBlock( 'core/column' );
+				} ),
+			];
+		} else if ( newColumns < previousColumns ) {
+			// The removed column will be the last of the inner blocks.
+			innerBlocks = innerBlocks.slice(
+				0,
+				-( previousColumns - newColumns )
+			);
+			if ( hasExplicitWidths ) {
+				// Redistribute as if block is already removed.
+				const widths = getRedistributedColumnWidths( innerBlocks, 100 );
+
+				innerBlocks = getMappedColumnWidths( innerBlocks, widths );
+			}
+		}
+
+		replaceInnerBlocks( clientId, innerBlocks );
+	}
+
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			{ canInsertColumnBlock && (
+				<>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Columns' ) }
+						value={ count }
+						onChange={ ( value ) =>
+							updateColumns( count, Math.max( minCount, value ) )
+						}
+						min={ Math.max( 1, minCount ) }
+						max={ Math.max( 6, count ) }
+					/>
+					{ count > 6 && (
+						<Notice status="warning" isDismissible={ false }>
+							{ __(
+								'This column count exceeds the recommended amount and may cause visual breakage.'
+							) }
+						</Notice>
+					) }
+				</>
+			) }
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Stack on mobile' ) }
+				checked={ isStackedOnMobile }
+				onChange={ () =>
+					setAttributes( {
+						isStackedOnMobile: ! isStackedOnMobile,
+					} )
+				}
+			/>
+		</PanelBody>
+	);
+}
+
+function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
+	const { isStackedOnMobile, verticalAlignment, templateLock } = attributes;
+	const registry = useRegistry();
+	const { getBlockOrder } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const classes = classnames( {
+	const classes = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
@@ -79,11 +201,33 @@ function ColumnsEditContainer( {
 		className: classes,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		orientation: 'horizontal',
 		renderAppender: false,
+		templateLock,
 	} );
 
+	/**
+	 * Update all child Column blocks with a new vertical alignment setting
+	 * based on whatever alignment is passed in. This allows change to parent
+	 * to overide anything set on a individual column basis.
+	 *
+	 * @param {string} newVerticalAlignment The vertical alignment setting.
+	 */
+	function updateAlignment( newVerticalAlignment ) {
+		const innerBlockClientIds = getBlockOrder( clientId );
+
+		// Update own and child Column block vertical alignments.
+		// This is a single action; the batching prevents creating multiple history records.
+		registry.batch( () => {
+			setAttributes( { verticalAlignment: newVerticalAlignment } );
+			updateBlockAttributes( innerBlockClientIds, {
+				verticalAlignment: newVerticalAlignment,
+			} );
+		} );
+	}
+
 	return (
 		<>
 			<BlockControls>
@@ -93,136 +237,17 @@ function ColumnsEditContainer( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody>
-					<RangeControl
-						label={ __( 'Columns' ) }
-						value={ count }
-						onChange={ ( value ) => updateColumns( count, value ) }
-						min={ 1 }
-						max={ Math.max( 6, count ) }
-					/>
-					{ count > 6 && (
-						<Notice status="warning" isDismissible={ false }>
-							{ __(
-								'This column count exceeds the recommended amount and may cause visual breakage.'
-							) }
-						</Notice>
-					) }
-					<ToggleControl
-						label={ __( 'Stack on mobile' ) }
-						checked={ isStackedOnMobile }
-						onChange={ () =>
-							setAttributes( {
-								isStackedOnMobile: ! isStackedOnMobile,
-							} )
-						}
-					/>
-				</PanelBody>
+				<ColumnInspectorControls
+					clientId={ clientId }
+					setAttributes={ setAttributes }
+					isStackedOnMobile={ isStackedOnMobile }
+				/>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
 		</>
 	);
 }
 
-const ColumnsEditContainerWrapper = withDispatch(
-	( dispatch, ownProps, registry ) => ( {
-		/**
-		 * Update all child Column blocks with a new vertical alignment setting
-		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
-		 *
-		 * @param {string} verticalAlignment the vertical alignment setting
-		 */
-		updateAlignment( verticalAlignment ) {
-			const { clientId, setAttributes } = ownProps;
-			const { updateBlockAttributes } = dispatch( blockEditorStore );
-			const { getBlockOrder } = registry.select( blockEditorStore );
-
-			// Update own alignment.
-			setAttributes( { verticalAlignment } );
-
-			// Update all child Column Blocks to match.
-			const innerBlockClientIds = getBlockOrder( clientId );
-			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
-				updateBlockAttributes( innerBlockClientId, {
-					verticalAlignment,
-				} );
-			} );
-		},
-
-		/**
-		 * Updates the column count, including necessary revisions to child Column
-		 * blocks to grant required or redistribute available space.
-		 *
-		 * @param {number} previousColumns Previous column count.
-		 * @param {number} newColumns      New column count.
-		 */
-		updateColumns( previousColumns, newColumns ) {
-			const { clientId } = ownProps;
-			const { replaceInnerBlocks } = dispatch( blockEditorStore );
-			const { getBlocks } = registry.select( blockEditorStore );
-
-			let innerBlocks = getBlocks( clientId );
-			const hasExplicitWidths =
-				hasExplicitPercentColumnWidths( innerBlocks );
-
-			// Redistribute available width for existing inner blocks.
-			const isAddingColumn = newColumns > previousColumns;
-
-			if ( isAddingColumn && hasExplicitWidths ) {
-				// If adding a new column, assign width to the new column equal to
-				// as if it were `1 / columns` of the total available space.
-				const newColumnWidth = toWidthPrecision( 100 / newColumns );
-
-				// Redistribute in consideration of pending block insertion as
-				// constraining the available working width.
-				const widths = getRedistributedColumnWidths(
-					innerBlocks,
-					100 - newColumnWidth
-				);
-
-				innerBlocks = [
-					...getMappedColumnWidths( innerBlocks, widths ),
-					...Array.from( {
-						length: newColumns - previousColumns,
-					} ).map( () => {
-						return createBlock( 'core/column', {
-							width: `${ newColumnWidth }%`,
-						} );
-					} ),
-				];
-			} else if ( isAddingColumn ) {
-				innerBlocks = [
-					...innerBlocks,
-					...Array.from( {
-						length: newColumns - previousColumns,
-					} ).map( () => {
-						return createBlock( 'core/column' );
-					} ),
-				];
-			} else {
-				// The removed column will be the last of the inner blocks.
-				innerBlocks = innerBlocks.slice(
-					0,
-					-( previousColumns - newColumns )
-				);
-
-				if ( hasExplicitWidths ) {
-					// Redistribute as if block is already removed.
-					const widths = getRedistributedColumnWidths(
-						innerBlocks,
-						100
-					);
-
-					innerBlocks = getMappedColumnWidths( innerBlocks, widths );
-				}
-			}
-
-			replaceInnerBlocks( clientId, innerBlocks );
-		},
-	} )
-)( ColumnsEditContainer );
-
 function Placeholder( { clientId, name, setAttributes } ) {
 	const { blockType, defaultVariation, variations } = useSelect(
 		( select ) => {
@@ -246,9 +271,10 @@ function Placeholder( { clientId, name, setAttributes } ) {
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
-				icon={ get( blockType, [ 'icon', 'src' ] ) }
-				label={ get( blockType, [ 'title' ] ) }
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
 				variations={ variations }
+				instructions={ __( 'Divide into columns. Select a layout:' ) }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( nextVariation.attributes );
@@ -276,9 +302,7 @@ const ColumnsEdit = ( props ) => {
 			select( blockEditorStore ).getBlocks( clientId ).length > 0,
 		[ clientId ]
 	);
-	const Component = hasInnerBlocks
-		? ColumnsEditContainerWrapper
-		: Placeholder;
+	const Component = hasInnerBlocks ? ColumnsEditContainer : Placeholder;
 
 	return <Component { ...props } />;
 };
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 96855e3da17e46..07655981edcada 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
  */
@@ -13,7 +13,6 @@ import {
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
-	GlobalStylesContext,
 	alignmentHelpers,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -23,14 +22,14 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	BlockVariationPicker,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
+	useGlobalStyles,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
-	useContext,
 	useMemo,
 	useCallback,
 	memo,
@@ -59,17 +58,6 @@ import {
 } from './columnCalculations.native';
 import ColumnsPreview from '../column/column-preview';
 
-/**
- * Allowed blocks constant is passed to InnerBlocks precisely as specified here.
- * The contents of the array should never change.
- * The array should contain the name of each block that is allowed.
- * In columns block, the only block we allow is 'core/column'.
- *
- * @constant
- * @type {string[]}
- */
-const ALLOWED_BLOCKS = [ 'core/column' ];
-
 /**
  * Number of columns to assume for template in case the user opts to skip
  * template option selection.
@@ -101,19 +89,14 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-	const globalStyles = useContext( GlobalStylesContext );
+	const globalStyles = useGlobalStyles();
 
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	useEffect( () => {
@@ -198,7 +181,7 @@ function ColumnsEditContainer( {
 			return (
 				<UnitControl
 					label={ label }
-					settingLabel="Width"
+					settingLabel={ __( 'Width' ) }
 					key={ `${ column.clientId }-${
 						getWidths( innerWidths ).length
 					}` }
@@ -280,7 +263,6 @@ function ColumnsEditContainer( {
 							columnsInRow > 1 ? 'horizontal' : undefined
 						}
 						horizontal={ columnsInRow > 1 }
-						allowedBlocks={ ALLOWED_BLOCKS }
 						contentResizeMode="stretch"
 						onAddBlock={ onAddBlock }
 						onDeleteBlock={
@@ -332,11 +314,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.
@@ -450,7 +427,7 @@ const ColumnsEdit = ( props ) => {
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerWidths = [],
+		innerBlocks,
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -463,24 +440,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(),
 			};
@@ -488,13 +461,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 );
 
@@ -514,7 +488,7 @@ const ColumnsEdit = ( props ) => {
 		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerWidths={ memoizedInnerWidths }
+				innerWidths={ innerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
index 45f7bd70e61ffd..12b0fa6e43b0be 100644
--- a/packages/block-library/src/columns/index.js
+++ b/packages/block-library/src/columns/index.js
@@ -23,7 +23,7 @@ export const settings = {
 	icon,
 	variations,
 	example: {
-		viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
+		viewportWidth: 782, // Columns collapse "@media (max-width: 781px)".
 		innerBlocks: [
 			{
 				name: 'core/column',
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index 0dde5595308536..cdd291f02c67aa 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index eb7e7d18072044..f7e73c81ea794c 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,5 @@
 .wp-block-columns {
 	display: flex;
-	margin-bottom: 1.75em;
 	box-sizing: border-box;
 
 	// Responsiveness: Allow wrapping on mobile.
@@ -73,6 +72,11 @@
 	}
 }
 
+// Lower specificity of margin styles so they don't override the Layout block support.
+:where(.wp-block-columns) {
+	margin-bottom: 1.75em;
+}
+
 // Add low specificity default padding to columns blocks with backgrounds.
 :where(.wp-block-columns.has-background) {
 	// Matches paragraph block padding.
@@ -105,6 +109,10 @@
 		align-self: flex-end;
 	}
 
+	&.is-vertically-aligned-stretch {
+		align-self: stretch;
+	}
+
 	&.is-vertically-aligned-top,
 	&.is-vertically-aligned-center,
 	&.is-vertically-aligned-bottom {
diff --git a/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap
index 331c9dbed29ee4..f7b47026a4ec46 100644
--- a/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/columns/test/__snapshots__/edit.native.js.snap
@@ -2,60 +2,60 @@
 
 exports[`Columns block adds a column block using the appender 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block changes the vertical alignment on individual Column 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"bottom\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-bottom\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"bottom"} -->
+<div class="wp-block-column is-vertically-aligned-bottom"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block changes vertical alignment on Columns 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block inserts block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block removes column with the remove button 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
@@ -67,153 +67,239 @@ exports[`Columns block removes the only one left Column with the remove button 1
 `;
 
 exports[`Columns block sets current vertical alignment on new Columns 1`] = `
-"<!-- wp:columns {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-columns are-vertically-aligned-top\\"><!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+"<!-- wp:columns {"verticalAlignment":"top"} -->
+<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"verticalAlignment\\":\\"top\\"} -->
-<div class=\\"wp-block-column is-vertically-aligned-top\\"></div>
+<!-- wp:column {"verticalAlignment":"top"} -->
+<div class="wp-block-column is-vertically-aligned-top"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
+exports[`Columns block transforms a nested Columns block into a Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->"
+`;
+
 exports[`Columns block when using columns percentage mechanism sets custom values correctly 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"90%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:90%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"90%"} -->
+<div class="wp-block-column" style="flex-basis:90%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"55.5%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:55.5%\\"></div>
+<!-- wp:column {"width":"55.5%"} -->
+<div class="wp-block-column" style="flex-basis:55.5%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using columns percentage mechanism updates the slider's input value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"55.6%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:55.6%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"55.6%"} -->
+<div class="wp-block-column" style="flex-basis:55.6%"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 25 / 50 / 25 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"25%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"50%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:50%\\"></div>
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"25%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:25%\\"></div>
+<!-- wp:column {"width":"25%"} -->
+<div class="wp-block-column" style="flex-basis:25%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 33 / 33 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 33 / 66 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"33.33%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"66.66%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 50 / 50 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 66 / 33 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column {\\"width\\":\\"66.66%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:66.66%\\"></div>
+<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
+<div class="wp-block-column" style="flex-basis:66.66%"></div>
 <!-- /wp:column -->
 
-<!-- wp:column {\\"width\\":\\"33.33%\\"} -->
-<div class=\\"wp-block-column\\" style=\\"flex-basis:33.33%\\"></div>
+<!-- wp:column {"width":"33.33%"} -->
+<div class="wp-block-column" style="flex-basis:33.33%"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the columns layout picker sets the predefined percentages for 100 block 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting adds a column block when incrementing the value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Columns block when using the number of columns setting adds at least 15 Column blocks without limitation 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column -->
 
 <!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting reaches the minimum limit of number of column blocks 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
 
 exports[`Columns block when using the number of columns setting removes a column block when decrementing the value 1`] = `
 "<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
diff --git a/packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..939638c4c579e1
--- /dev/null
+++ b/packages/block-library/src/columns/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Columns block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:columns {"className":"gutenberg-landing\\u002d\\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Columns block transforms ungroups block 1`] = `
+"<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
index 565b0e695cad29..20430704c8e1e2 100644
--- a/packages/block-library/src/columns/test/edit.native.js
+++ b/packages/block-library/src/columns/test/edit.native.js
@@ -2,15 +2,18 @@
  * External dependencies
  */
 import {
+	act,
 	addBlock,
+	dismissModal,
 	fireEvent,
+	getBlock,
 	getEditorHtml,
 	initializeEditor,
+	openBlockActionsMenu,
 	openBlockSettings,
+	screen,
+	waitForModalVisible,
 	within,
-	getBlock,
-	waitFor,
-	dismissModal,
 } from 'test/helpers';
 
 /**
@@ -42,7 +45,7 @@ afterAll( () => {
 
 describe( 'Columns block', () => {
 	it( 'inserts block', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Columns' );
@@ -54,7 +57,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'adds a column block using the appender', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 
@@ -72,7 +75,7 @@ describe( 'Columns block', () => {
 
 	describe( 'when using the number of columns setting', () => {
 		it( 'adds a column block when incrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -93,8 +96,33 @@ describe( 'Columns block', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
+		it( 'adds at least 15 Column blocks without limitation', async () => {
+			await initializeEditor( {
+				initialHtml: TWO_COLUMNS_BLOCK_HTML,
+			} );
+			const { getByLabelText } = screen;
+
+			// Get block
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Update the number of columns
+			const columnsControl = getByLabelText( /Number of columns/ );
+
+			for ( let x = 0; x < 15; x++ ) {
+				fireEvent( columnsControl, 'accessibilityAction', {
+					nativeEvent: { actionName: 'increment' },
+				} );
+			}
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
 		it( 'removes a column block when decrementing the value', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText } = screen;
@@ -116,20 +144,18 @@ describe( 'Columns block', () => {
 		} );
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
-			const screen = await initializeEditor();
-			const { getByLabelText, getByTestId } = screen;
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
 
 			// Wait for the variations modal to be visible
-			await waitFor(
-				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			const blockVariationModal = await screen.findByTestId(
+				'block-variation-modal'
 			);
+			await waitForModalVisible( blockVariationModal );
 
 			// Select a column variation
-			const blockVariationModal = getByTestId( 'block-variation-modal' );
-			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
 				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
@@ -144,7 +170,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByLabelText( /Number of columns/ );
+			const columnsControl = screen.getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -161,7 +187,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -186,7 +212,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'removes the only one left Column with the remove button', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -223,7 +249,7 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes vertical alignment on Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -246,41 +272,45 @@ describe( 'Columns block', () => {
 	} );
 
 	it( 'changes the vertical alignment on individual Column', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
+		const verticalAlignmentButton = screen.getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
+		const verticalTopAlignmentButton = screen.getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Get the first column
 		const firstColumnBlock = await getBlock( screen, 'Column' );
 		fireEvent.press( firstColumnBlock );
+		// Inner blocks batch store updates with microtasks.
+		// To avoid `act` warnings, we let queued microtasks to be executed.
+		// Reference: https://t.ly/b95nA
+		await act( async () => {} );
 
 		// Open vertical alignment menu
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align bottom button
-		const verticalBottomAlignmentButton = getByLabelText( /Align bottom/ );
+		const verticalBottomAlignmentButton =
+			screen.getByLabelText( /Align bottom/ );
 		fireEvent.press( verticalBottomAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'sets current vertical alignment on new Columns', async () => {
-		const screen = await initializeEditor( {
+		await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
 		const { getByLabelText } = screen;
@@ -309,20 +339,18 @@ describe( 'Columns block', () => {
 
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
-			const screen = await initializeEditor();
-			const { getByLabelText, getByTestId } = screen;
+			await initializeEditor();
 
 			// Add block
 			await addBlock( screen, 'Columns' );
 
 			// Wait for the variations modal to be visible
-			await waitFor(
-				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			const blockVariationModal = await screen.findByTestId(
+				'block-variation-modal'
 			);
+			await waitForModalVisible( blockVariationModal );
 
 			// Select a column variation
-			const blockVariationModal = getByTestId( 'block-variation-modal' );
-			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
 				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
@@ -337,17 +365,21 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Get width control
-			const widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '33.3' ) );
-			const widthTextInput =
-				within( widthControl ).getByDisplayValue( '33.3' );
+			const widthControl = screen.getByLabelText( /Width. Value is/ );
+			fireEvent.press(
+				within( widthControl ).getByText( '33.3', { hidden: true } )
+			);
+			const widthTextInput = within( widthControl ).getByDisplayValue(
+				'33.3',
+				{ hidden: true }
+			);
 			fireEvent.changeText( widthTextInput, '55.55555' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'sets custom values correctly', async () => {
-			const screen = await initializeEditor( {
+			await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
 			} );
 			const { getByLabelText, getByTestId } = screen;
@@ -365,9 +397,13 @@ describe( 'Columns block', () => {
 
 			// Set custom width value for the first column
 			let widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '50' ) );
-			let widthTextInput =
-				within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.press(
+				within( widthControl ).getByText( '50', { hidden: true } )
+			);
+			let widthTextInput = within( widthControl ).getByDisplayValue(
+				'50',
+				{ hidden: true }
+			);
 			fireEvent.changeText( widthTextInput, '90' );
 
 			// Dismiss settings
@@ -384,8 +420,12 @@ describe( 'Columns block', () => {
 
 			// Set custom width value for the second column
 			widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '50' ) );
-			widthTextInput = within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.press(
+				within( widthControl ).getByText( '50', { hidden: true } )
+			);
+			widthTextInput = within( widthControl ).getByDisplayValue( '50', {
+				hidden: true,
+			} );
 			fireEvent.changeText( widthTextInput, '55.5' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -405,22 +445,18 @@ describe( 'Columns block', () => {
 		test.each( testData )(
 			'sets the predefined percentages for %s',
 			async ( layout ) => {
-				const screen = await initializeEditor();
-				const { getByTestId } = screen;
+				await initializeEditor();
 
 				// Add block
 				await addBlock( screen, 'Columns' );
 
 				// Wait for the variations modal to be visible
-				await waitFor(
-					() => getByTestId( 'block-variation-modal' ).props.isVisible
+				const blockVariationModal = await screen.findByTestId(
+					'block-variation-modal'
 				);
+				await waitForModalVisible( blockVariationModal );
 
 				// Select a column variation
-				const blockVariationModal = getByTestId(
-					'block-variation-modal'
-				);
-				await waitFor( () => blockVariationModal.props.isVisible );
 				const columnLayout =
 					within( blockVariationModal ).getByLabelText( layout );
 				fireEvent.press( columnLayout );
@@ -429,4 +465,32 @@ describe( 'Columns block', () => {
 			}
 		);
 	} );
+
+	it( 'transforms a nested Columns block into a Group block', async () => {
+		await initializeEditor( {
+			initialHtml: `<!-- wp:group {"layout":{"type":"constrained"}} -->
+			<div class="wp-block-group"><!-- wp:columns -->
+			<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+			<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+			<p></p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:column --></div>
+			<!-- /wp:columns --></div>
+			<!-- /wp:group -->`,
+		} );
+
+		// Get Columns block
+		const columnsBlock = await getBlock( screen, 'Columns' );
+		fireEvent.press( columnsBlock );
+
+		// Open block actions menu
+		await openBlockActionsMenu( screen );
+
+		// Tap on the Transform block button
+		fireEvent.press( screen.getByLabelText( /Transform block…/ ) );
+
+		// Tap on the Group transform button
+		fireEvent.press( screen.getByLabelText( 'Group' ) );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/block-library/src/columns/test/transforms.native.js b/packages/block-library/src/columns/test/transforms.native.js
new file mode 100644
index 00000000000000..a2103bdb86aa00
--- /dev/null
+++ b/packages/block-library/src/columns/test/transforms.native.js
@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Columns';
+const initialHtml = `
+<!-- wp:columns {"className":"gutenberg-landing\u002d\u002ddevelopers-columns has-2-columns"} -->
+<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left"} -->
+<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
+<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;
+
+const transformsWithInnerBlocks = [ 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'ungroups block', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Ungroup' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js
index d99a7b3d4a6205..72d29c6d77f7df 100644
--- a/packages/block-library/src/columns/test/utils.js
+++ b/packages/block-library/src/columns/test/utils.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * Internal dependencies
  */
@@ -280,4 +285,53 @@ describe( 'getMappedColumnWidths', () => {
 			{ clientId: 'b', attributes: { width: '35%' } },
 		] );
 	} );
+
+	it( 'always returns new objects and does not mutate input blocks', () => {
+		const blocks = [
+			deepFreeze( { clientId: 'a', attributes: { width: 30 } } ),
+			deepFreeze( { clientId: 'b', attributes: { width: 40 } } ),
+		];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( blocks[ 0 ] ).not.toBe( result[ 0 ] );
+		expect( blocks[ 1 ] ).not.toBe( result[ 1 ] );
+	} );
+
+	it( 'merges to block attributes if original blocks do not have any attributes', () => {
+		const blocks = [ { clientId: 'a' }, { clientId: 'b' } ];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( result ).toEqual( [
+			{ clientId: 'a', attributes: { width: '25%' } },
+			{ clientId: 'b', attributes: { width: '35%' } },
+		] );
+	} );
+
+	it( 'merges to block attributes if original blocks do not have a width attribute', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { align: 'left' } },
+			{ clientId: 'b', attributes: { align: 'right' } },
+		];
+		const widths = {
+			a: 25,
+			b: 35,
+		};
+
+		const result = getMappedColumnWidths( blocks, widths );
+
+		expect( result ).toEqual( [
+			{ clientId: 'a', attributes: { align: 'left', width: '25%' } },
+			{ clientId: 'b', attributes: { align: 'right', width: '35%' } },
+		] );
+	} );
 } );
diff --git a/packages/block-library/src/columns/transforms.js b/packages/block-library/src/columns/transforms.js
index fda65df8659d8f..3a15892431f251 100644
--- a/packages/block-library/src/columns/transforms.js
+++ b/packages/block-library/src/columns/transforms.js
@@ -105,14 +105,8 @@ const transforms = {
 			},
 		},
 	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) =>
-				innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
-		},
-	],
+	ungroup: ( attributes, innerBlocks ) =>
+		innerBlocks.flatMap( ( innerBlock ) => innerBlock.innerBlocks ),
 };
 
 export default transforms;
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index b75a7ad77bba18..6134b6fa456ddb 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { merge, mapValues } from 'lodash';
-
 /**
  * Returns a column width attribute value rounded to standard precision.
  * Returns `undefined` if the value is not a valid finite number.
@@ -86,10 +81,14 @@ export function getRedistributedColumnWidths(
 ) {
 	const totalWidth = getTotalColumnsWidth( blocks, totalBlockCount );
 
-	return mapValues( getColumnWidths( blocks, totalBlockCount ), ( width ) => {
-		const newWidth = ( availableWidth * width ) / totalWidth;
-		return toWidthPrecision( newWidth );
-	} );
+	return Object.fromEntries(
+		Object.entries( getColumnWidths( blocks, totalBlockCount ) ).map(
+			( [ clientId, width ] ) => {
+				const newWidth = ( availableWidth * width ) / totalWidth;
+				return [ clientId, toWidthPrecision( newWidth ) ];
+			}
+		)
+	);
 }
 
 /**
@@ -121,13 +120,13 @@ export function hasExplicitPercentColumnWidths( blocks ) {
  * @return {WPBlock[]} blocks Mapped block objects.
  */
 export function getMappedColumnWidths( blocks, widths ) {
-	return blocks.map( ( block ) =>
-		merge( {}, block, {
-			attributes: {
-				width: `${ widths[ block.clientId ] }%`,
-			},
-		} )
-	);
+	return blocks.map( ( block ) => ( {
+		...block,
+		attributes: {
+			...block.attributes,
+			width: `${ widths[ block.clientId ] }%`,
+		},
+	} ) );
 }
 
 /**
diff --git a/packages/block-library/src/columns/variations.js b/packages/block-library/src/columns/variations.js
index 440175584fcdd5..044ba34b7b8fb1 100644
--- a/packages/block-library/src/columns/variations.js
+++ b/packages/block-library/src/columns/variations.js
@@ -18,16 +18,12 @@ const variations = [
 		description: __( 'One column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="m39.0625 14h-30.0625v20.0938h30.0625zm-30.0625-2c-1.10457 0-2 .8954-2 2v20.0938c0 1.1045.89543 2 2 2h30.0625c1.1046 0 2-.8955 2-2v-20.0938c0-1.1046-.8954-2-2-2z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [ [ 'core/column' ] ],
@@ -39,16 +35,12 @@ const variations = [
 		description: __( 'Two columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		isDefault: true,
@@ -61,16 +53,12 @@ const variations = [
 		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm17 0a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -85,16 +73,12 @@ const variations = [
 		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm33 0a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -109,15 +93,12 @@ const variations = [
 		description: __( 'Three columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h10.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm16.5 0c0-1.105.864-2 1.969-2H29.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H18.47c-1.105 0-1.969-.895-1.969-2V10Zm17 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35.469c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -133,15 +114,12 @@ const variations = [
 		description: __( 'Three columns; wide center column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h7.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm13.5 0c0-1.105.864-2 1.969-2H32.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H15.47c-1.105 0-1.969-.895-1.969-2V10Zm23 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-7.531c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json
index e0351e2453d998..c74b057db2ea3a 100644
--- a/packages/block-library/src/comment-author-avatar/block.json
+++ b/packages/block-library/src/comment-author-avatar/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/comment-author-avatar",
 	"title": "Comment Author Avatar (deprecated)",
@@ -39,6 +39,9 @@
 			"__experimentalSkipSerialization": true,
 			"margin": true,
 			"padding": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/comment-author-avatar/edit.js b/packages/block-library/src/comment-author-avatar/edit.js
index 6bc4651af4307d..3b25bf6916c8b8 100644
--- a/packages/block-library/src/comment-author-avatar/edit.js
+++ b/packages/block-library/src/comment-author-avatar/edit.js
@@ -48,8 +48,10 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Avatar Settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {
diff --git a/packages/block-library/src/comment-author-avatar/index.php b/packages/block-library/src/comment-author-avatar/index.php
index bbb7d787de8ec1..1568b6606669c4 100644
--- a/packages/block-library/src/comment-author-avatar/index.php
+++ b/packages/block-library/src/comment-author-avatar/index.php
@@ -23,7 +23,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 		return '';
 	}
 
-	// This is the only way to retreive style and classes on different instances.
+	// This is the only way to retrieve style and classes on different instances.
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
 
 	/**
@@ -46,7 +46,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 	$styles  = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
 	$classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
 
-	/* translators: %s is the Comment Author name */
+	/* translators: %s: Author name. */
 	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 
 	$avatar_block = get_avatar(
diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json
index 59300c317a6799..1889d054c940e7 100644
--- a/packages/block-library/src/comment-author-name/block.json
+++ b/packages/block-library/src/comment-author-name/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-author-name",
 	"title": "Comment Author Name",
 	"category": "theme",
@@ -48,6 +48,22 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-author-name"
 }
diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
index e71d26ccee361d..b20816d39b64f7 100644
--- a/packages/block-library/src/comment-author-name/edit.js
+++ b/packages/block-library/src/comment-author-name/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -70,14 +70,16 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to authors URL' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }
 				/>
 				{ isLink && (
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						onChange={ ( value ) =>
 							setAttributes( {
diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js
index 4d85bbebe047be..5bcb6896564807 100644
--- a/packages/block-library/src/comment-author-name/index.js
+++ b/packages/block-library/src/comment-author-name/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-author-name/index.php b/packages/block-library/src/comment-author-name/index.php
index 04d8e60c65e8ca..2f9227964ad448 100644
--- a/packages/block-library/src/comment-author-name/index.php
+++ b/packages/block-library/src/comment-author-name/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comment-author-name` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -25,12 +27,15 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 		return '';
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 	$comment_author     = get_comment_author( $comment );
 	$link               = get_comment_author_url( $comment );
 
@@ -50,6 +55,8 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 
 /**
  * Registers the `core/comment-author-name` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_author_name() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-author-name/style.scss b/packages/block-library/src/comment-author-name/style.scss
new file mode 100644
index 00000000000000..1e8c5eeb154b05
--- /dev/null
+++ b/packages/block-library/src/comment-author-name/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-author-name {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/comment-content/block.json b/packages/block-library/src/comment-content/block.json
index 0c28c25f330ca9..0e812299a45e89 100644
--- a/packages/block-library/src/comment-content/block.json
+++ b/packages/block-library/src/comment-content/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-content",
 	"title": "Comment Content",
 	"category": "theme",
@@ -35,6 +35,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"spacing": {
 			"padding": [ "horizontal", "vertical" ],
 			"__experimentalDefaultControls": {
@@ -42,5 +54,6 @@
 			}
 		},
 		"html": false
-	}
+	},
+	"style": "wp-block-comment-content"
 }
diff --git a/packages/block-library/src/comment-content/edit.js b/packages/block-library/src/comment-content/edit.js
index a22acd43612b2f..45c2324dfa3873 100644
--- a/packages/block-library/src/comment-content/edit.js
+++ b/packages/block-library/src/comment-content/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Edit( {
 	context: { commentId },
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js
index 130f1d30125559..aefcef75acf8ae 100644
--- a/packages/block-library/src/comment-content/index.js
+++ b/packages/block-library/src/comment-content/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-content/index.php b/packages/block-library/src/comment-content/index.php
index 90ba060b44dfa7..3f7f5e1f4083ba 100644
--- a/packages/block-library/src/comment-content/index.php
+++ b/packages/block-library/src/comment-content/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comment-content` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -49,12 +51,15 @@ function render_block_core_comment_content( $attributes, $content, $block ) {
 		}
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s>%2$s%3$s</div>',
@@ -66,6 +71,8 @@ function render_block_core_comment_content( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comment-content` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_content() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-content/style.scss b/packages/block-library/src/comment-content/style.scss
index dd9c4b22ae99c1..a94048de6014d3 100644
--- a/packages/block-library/src/comment-content/style.scss
+++ b/packages/block-library/src/comment-content/style.scss
@@ -3,3 +3,8 @@
 	font-size: 0.875em;
 	line-height: 1.5;
 }
+
+.wp-block-comment-content {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json
index e90cb0b0d8c4dc..1e8110f836d93b 100644
--- a/packages/block-library/src/comment-date/block.json
+++ b/packages/block-library/src/comment-date/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-date",
 	"title": "Comment Date",
 	"category": "theme",
@@ -44,6 +44,22 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-comment-date"
 }
diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js
index 4127f169c2db45..8ff940a78dd5eb 100644
--- a/packages/block-library/src/comment-date/edit.js
+++ b/packages/block-library/src/comment-date/edit.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	InspectorControls,
 	useBlockProps,
@@ -48,6 +52,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link to comment' ) }
 					onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					checked={ isLink }
@@ -63,7 +68,9 @@ export default function Edit( {
 	let commentDate =
 		date instanceof Date ? (
 			<time dateTime={ dateI18n( 'c', date ) }>
-				{ dateI18n( format || siteFormat, date ) }
+				{ format === 'human-diff'
+					? humanTimeDiff( date )
+					: dateI18n( format || siteFormat, date ) }
 			</time>
 		) : (
 			<time>{ date }</time>
diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js
index fddae539acfa34..d95c0a958f9ed8 100644
--- a/packages/block-library/src/comment-date/index.js
+++ b/packages/block-library/src/comment-date/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-date/index.php b/packages/block-library/src/comment-date/index.php
index 9bff9f2f6cbbfb..bdb6fd5ba42ae3 100644
--- a/packages/block-library/src/comment-date/index.php
+++ b/packages/block-library/src/comment-date/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comment-date` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -23,14 +25,16 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = '';
+	$classes = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
-	$formatted_date     = get_comment_date(
-		isset( $attributes['format'] ) ? $attributes['format'] : '',
-		$comment
-	);
-	$link               = get_comment_link( $comment );
+	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+		// translators: %s: human-readable time difference.
+		$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
+	} else {
+		$formatted_date = get_comment_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $comment );
+	}
+	$link = get_comment_link( $comment );
 
 	if ( ! empty( $attributes['isLink'] ) ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', esc_url( $link ), $formatted_date );
@@ -46,6 +50,8 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comment-date` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_date() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-date/style.scss b/packages/block-library/src/comment-date/style.scss
new file mode 100644
index 00000000000000..9b897defa655b7
--- /dev/null
+++ b/packages/block-library/src/comment-date/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-date {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/comment-edit-link/block.json b/packages/block-library/src/comment-edit-link/block.json
index 14795c83e1c53d..578b284715c2a0 100644
--- a/packages/block-library/src/comment-edit-link/block.json
+++ b/packages/block-library/src/comment-edit-link/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-edit-link",
 	"title": "Comment Edit Link",
 	"category": "theme",
@@ -30,7 +30,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -44,6 +48,16 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-comment-edit-link"
 }
diff --git a/packages/block-library/src/comment-edit-link/edit.js b/packages/block-library/src/comment-edit-link/edit.js
index 3f45948bc5c060..d3cde7f2abeaf0 100644
--- a/packages/block-library/src/comment-edit-link/edit.js
+++ b/packages/block-library/src/comment-edit-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -37,8 +37,9 @@ export default function Edit( {
 	);
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
 					onChange={ ( value ) =>
 						setAttributes( {
diff --git a/packages/block-library/src/comment-edit-link/index.js b/packages/block-library/src/comment-edit-link/index.js
index 6639dda86a7a40..ffe8c98a75dfd9 100644
--- a/packages/block-library/src/comment-edit-link/index.js
+++ b/packages/block-library/src/comment-edit-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-edit-link/index.php b/packages/block-library/src/comment-edit-link/index.php
index 39727ea5aed109..53eaf9a2cda6c6 100644
--- a/packages/block-library/src/comment-edit-link/index.php
+++ b/packages/block-library/src/comment-edit-link/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comment-edit-link` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -27,12 +29,15 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 		$link_atts .= sprintf( 'target="%s"', esc_attr( $attributes['linkTarget'] ) );
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s><a href="%2$s" %3$s>%4$s</a></div>',
@@ -45,6 +50,8 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comment-edit-link` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_edit_link() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-edit-link/style.scss b/packages/block-library/src/comment-edit-link/style.scss
new file mode 100644
index 00000000000000..1ae7daf55009e4
--- /dev/null
+++ b/packages/block-library/src/comment-edit-link/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-edit-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/comment-reply-link/block.json b/packages/block-library/src/comment-reply-link/block.json
index 9d4a1d8668acc9..68aa93c3c1526a 100644
--- a/packages/block-library/src/comment-reply-link/block.json
+++ b/packages/block-library/src/comment-reply-link/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-reply-link",
 	"title": "Comment Reply Link",
 	"category": "theme",
@@ -25,7 +25,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -40,6 +44,13 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"html": false
-	}
+	},
+	"style": "wp-block-comment-reply-link"
 }
diff --git a/packages/block-library/src/comment-reply-link/edit.js b/packages/block-library/src/comment-reply-link/edit.js
index 08a4d21de88c7b..a8ef53aaaa25c7 100644
--- a/packages/block-library/src/comment-reply-link/edit.js
+++ b/packages/block-library/src/comment-reply-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ import {
  */
 function Edit( { setAttributes, attributes: { textAlign } } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comment-reply-link/index.js b/packages/block-library/src/comment-reply-link/index.js
index c04f8ce7b1bba5..a8287f6b08ff35 100644
--- a/packages/block-library/src/comment-reply-link/index.js
+++ b/packages/block-library/src/comment-reply-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-reply-link/index.php b/packages/block-library/src/comment-reply-link/index.php
index 5b9bf1068fb21a..7121b6f25a195e 100644
--- a/packages/block-library/src/comment-reply-link/index.php
+++ b/packages/block-library/src/comment-reply-link/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comment-reply-link` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -51,12 +53,15 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 		return;
 	}
 
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',
@@ -67,6 +72,8 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comment-reply-link` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_reply_link() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-reply-link/style.scss b/packages/block-library/src/comment-reply-link/style.scss
new file mode 100644
index 00000000000000..7eca6cee1aa979
--- /dev/null
+++ b/packages/block-library/src/comment-reply-link/style.scss
@@ -0,0 +1,4 @@
+.wp-block-comment-reply-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 1c318a8c21311e..08fd591b42409b 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-template",
 	"title": "Comment Template",
 	"category": "design",
@@ -28,6 +28,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-comment-template"
diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js
index 3d33428f6f4585..50d83289e1ed92 100644
--- a/packages/block-library/src/comment-template/edit.js
+++ b/packages/block-library/src/comment-template/edit.js
@@ -105,7 +105,7 @@ const getCommentsPlaceholder = ( {
  * @param {Array}  [props.firstCommentId]     - ID of the first comment in the array.
  * @param {Array}  [props.blocks]             - Array of blocks returned from
  *                                            getBlocks() in parent .
- * @return {WPElement}                 		Inner blocks of the Comment Template
+ * @return {Element}                 		Inner blocks of the Comment Template
  */
 function CommentTemplateInnerBlocks( {
 	comment,
@@ -202,7 +202,7 @@ const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
  * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.
  * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of
  *                                            comment objects.
- * @return {WPElement}                 		List of comments.
+ * @return {Element}                 		List of comments.
  */
 const CommentsList = ( {
 	comments,
diff --git a/packages/block-library/src/comment-template/index.php b/packages/block-library/src/comment-template/index.php
index 08620a3ea695fd..ec462e6a050de2 100644
--- a/packages/block-library/src/comment-template/index.php
+++ b/packages/block-library/src/comment-template/index.php
@@ -8,6 +8,8 @@
 /**
  * Function that recursively renders a list of nested comments.
  *
+ * @since 6.3.0 Changed render_block_context priority to `1`.
+ *
  * @global int $comment_depth
  *
  * @param WP_Comment[] $comments        The array of comments.
@@ -25,13 +27,29 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 	$content = '';
 	foreach ( $comments as $comment ) {
+		$comment_id           = $comment->comment_ID;
+		$filter_block_context = static function ( $context ) use ( $comment_id ) {
+			$context['commentId'] = $comment_id;
+			return $context;
+		};
 
-		$block_content = ( new WP_Block(
-			$block->parsed_block,
-			array(
-				'commentId' => $comment->comment_ID,
-			)
-		) )->render( array( 'dynamic' => false ) );
+		/*
+		 * We set commentId context through the `render_block_context` filter so
+		 * that dynamically inserted blocks (at `render_block` filter stage)
+		 * will also receive that context.
+		 *
+		 * Use an early priority to so that other 'render_block_context' filters
+		 * have access to the values.
+		 */
+		add_filter( 'render_block_context', $filter_block_context, 1 );
+
+		/*
+		 * We construct a new WP_Block instance from the parsed block so that
+		 * it'll receive any changes made by the `render_block_data` filter.
+		 */
+		$block_content = ( new WP_Block( $block->parsed_block ) )->render( array( 'dynamic' => false ) );
+
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		$children = $comment->get_children();
 
@@ -58,11 +76,10 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 				$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
 				--$comment_depth;
 			} else {
-				$inner_content  = block_core_comment_template_render_comments(
+				$block_content .= block_core_comment_template_render_comments(
 					$children,
 					$block
 				);
-				$block_content .= sprintf( $inner_content );
 			}
 		}
 
@@ -75,6 +92,8 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 /**
  * Renders the `core/comment-template` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -119,6 +138,8 @@ function render_block_core_comment_template( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comment-template` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comment_template() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comment-template/util.js b/packages/block-library/src/comment-template/util.js
index 32aab0a568709a..88fc6662049221 100644
--- a/packages/block-library/src/comment-template/util.js
+++ b/packages/block-library/src/comment-template/util.js
@@ -30,7 +30,9 @@
 export const convertToTree = ( data ) => {
 	const table = {};
 
-	if ( ! data ) return [];
+	if ( ! data ) {
+		return [];
+	}
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}
 	data.forEach( ( item ) => {
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 48da9495bff624..3f7ebe677328d5 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-next",
 	"title": "Comments Next Page",
 	"category": "theme",
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Next Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
@@ -35,6 +40,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index a535b7c40d6c46..0fd9519a56d304 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-next` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -26,7 +28,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );
 
-	$filter_link_attributes = function() {
+	$filter_link_attributes = static function () {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'next_comments_link_attributes', $filter_link_attributes );
@@ -35,7 +37,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 		$label .= $pagination_arrow;
 	}
 
-	$next_comments_link = get_next_comments_link( $label, $max_page );
+	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 
@@ -48,6 +50,8 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 
 /**
  * Registers the `core/comments-pagination-next` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_next() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json
index 479872bccf1408..9e9017af631978 100644
--- a/packages/block-library/src/comments-pagination-numbers/block.json
+++ b/packages/block-library/src/comments-pagination-numbers/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-numbers",
 	"title": "Comments Page Numbers",
 	"category": "theme",
@@ -30,6 +30,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js
index 3fd903e2d9ef48..f769f54b4ac034 100644
--- a/packages/block-library/src/comments-pagination-numbers/index.js
+++ b/packages/block-library/src/comments-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-numbers/index.php b/packages/block-library/src/comments-pagination-numbers/index.php
index b172e0c8d43f86..093a6450930f12 100644
--- a/packages/block-library/src/comments-pagination-numbers/index.php
+++ b/packages/block-library/src/comments-pagination-numbers/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-numbers` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -50,6 +52,8 @@ function render_block_core_comments_pagination_numbers( $attributes, $content, $
 
 /**
  * Registers the `core/comments-pagination-numbers` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_numbers() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index a48782af297606..eb5203af33c866 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-previous",
 	"title": "Comments Previous Page",
 	"category": "theme",
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
@@ -35,6 +40,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/comments-pagination-previous/index.php b/packages/block-library/src/comments-pagination-previous/index.php
index 951dc8dd78a06e..ba9bef97ad34d9 100644
--- a/packages/block-library/src/comments-pagination-previous/index.php
+++ b/packages/block-library/src/comments-pagination-previous/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination-previous` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -22,12 +24,13 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 		$label = $pagination_arrow . $label;
 	}
 
-	$filter_link_attributes = function() {
+	$filter_link_attributes = static function () {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
-	$previous_comments_link = get_previous_comments_link( $label );
+	$comment_vars           = build_comment_query_vars_from_block( $block );
+	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
@@ -40,6 +43,8 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 
 /**
  * Registers the `core/comments-pagination-previous` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination_previous() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
index ffa2828912f26b..28f6c9fdfdb5d9 100644
--- a/packages/block-library/src/comments-pagination/block.json
+++ b/packages/block-library/src/comments-pagination/block.json
@@ -1,10 +1,15 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
 	"category": "theme",
 	"parent": [ "core/comments" ],
+	"allowedBlocks": [
+		"core/comments-pagination-previous",
+		"core/comments-pagination-numbers",
+		"core/comments-pagination-next"
+	],
 	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
 	"textdomain": "default",
 	"attributes": {
@@ -29,7 +34,7 @@
 				"link": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
@@ -48,6 +53,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-comments-pagination-editor",
diff --git a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
index 03b1b26cd80000..c3a2d1dae648a5 100644
--- a/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
+++ b/packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js
@@ -10,6 +10,8 @@ import {
 export function CommentsPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
index de07a678395b35..aba29233064978 100644
--- a/packages/block-library/src/comments-pagination/edit.js
+++ b/packages/block-library/src/comments-pagination/edit.js
@@ -10,7 +10,6 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
 
 /**
@@ -23,27 +22,12 @@ const TEMPLATE = [
 	[ 'core/comments-pagination-numbers' ],
 	[ 'core/comments-pagination-next' ],
 ];
-const ALLOWED_BLOCKS = [
-	'core/comments-pagination-previous',
-	'core/comments-pagination-numbers',
-	'core/comments-pagination-next',
-];
-
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
 
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
 	const hasNextPreviousBlocks = useSelect( ( select ) => {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
@@ -63,8 +47,6 @@ export default function QueryPaginationEdit( {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
 
 	// Get the Discussion settings
diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss
index dbf7e60ff65c06..3cd99c632ee833 100644
--- a/packages/block-library/src/comments-pagination/editor.scss
+++ b/packages/block-library/src/comments-pagination/editor.scss
@@ -5,7 +5,7 @@ $pagination-margin: 0.5em;
 	justify-content: center;
 }
 
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
 	.wp-block-comments-pagination {
 		max-width: 100%;
 		&.block-editor-block-list__layout {
@@ -26,6 +26,7 @@ $pagination-margin: 0.5em;
 		margin-right: $pagination-margin;
 		margin-bottom: $pagination-margin;
 
+		font-size: inherit;
 		&:last-child {
 			/*rtl:ignore*/
 			margin-right: 0;
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
index 5c041c237c64fb..1543fc04027eef 100644
--- a/packages/block-library/src/comments-pagination/index.php
+++ b/packages/block-library/src/comments-pagination/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-pagination` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array  $attributes Block attributes.
  * @param string $content    Block default content.
  *
@@ -22,15 +24,20 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 		return;
 	}
 
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		$wrapper_attributes,
 		$content
 	);
 }
 
 /**
  * Registers the `core/comments-pagination` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_pagination() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
index c6b5d9a0a29e91..2fb6e3dd2d48f4 100644
--- a/packages/block-library/src/comments-pagination/style.scss
+++ b/packages/block-library/src/comments-pagination/style.scss
@@ -8,6 +8,7 @@ $pagination-margin: 0.5em;
 		margin-right: $pagination-margin;
 		margin-bottom: $pagination-margin;
 
+		font-size: inherit;
 		&:last-child {
 			/*rtl:ignore*/
 			margin-right: 0;
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index 3c5db438a3fe68..b66b741e1916a0 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -1,11 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-title",
 	"title": "Comments Title",
 	"category": "theme",
 	"ancestor": [ "core/comments" ],
-	"description": "Displays a title with the number of comments",
+	"description": "Displays a title with the number of comments.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {
@@ -23,6 +23,9 @@
 		"level": {
 			"type": "number",
 			"default": 2
+		},
+		"levelOptions": {
+			"type": "array"
 		}
 	},
 	"supports": {
@@ -61,6 +64,9 @@
 				"__experimentalFontStyle": true,
 				"__experimentalFontWeight": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index 7f4660d5735b27..f2a9d23ddf6cae 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	InspectorControls,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
@@ -21,13 +22,14 @@ import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
-/**
- * Internal dependencies
- */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
-
 export default function Edit( {
-	attributes: { textAlign, showPostTitle, showCommentsCount, level },
+	attributes: {
+		textAlign,
+		showPostTitle,
+		showCommentsCount,
+		level,
+		levelOptions,
+	},
 	setAttributes,
 	context: { postType, postId },
 } ) {
@@ -36,7 +38,7 @@ export default function Edit( {
 	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
 	const isSiteEditor = typeof postId === 'undefined';
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -98,7 +100,8 @@ export default function Edit( {
 				}
 			/>
 			<HeadingLevelDropdown
-				selectedLevel={ level }
+				value={ level }
+				options={ levelOptions }
 				onChange={ ( newLevel ) =>
 					setAttributes( { level: newLevel } )
 				}
@@ -110,6 +113,7 @@ export default function Edit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show post title' ) }
 					checked={ showPostTitle }
 					onChange={ ( value ) =>
@@ -117,6 +121,7 @@ export default function Edit( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Show comments count' ) }
 					checked={ showCommentsCount }
 					onChange={ ( value ) =>
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 86bdab0dbccbff..69b8228eab892b 100644
--- a/packages/block-library/src/comments-title/index.js
+++ b/packages/block-library/src/comments-title/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-title/index.php b/packages/block-library/src/comments-title/index.php
index 62119fc0c2ca88..130132ec3fa527 100644
--- a/packages/block-library/src/comments-title/index.php
+++ b/packages/block-library/src/comments-title/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/comments-title` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Return the post comments title.
@@ -84,6 +86,8 @@ function render_block_core_comments_title( $attributes ) {
 
 /**
  * Registers the `core/comments-title` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_comments_title() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/comments/block.json b/packages/block-library/src/comments/block.json
index 399941891d01aa..ceb8f750c3472d 100644
--- a/packages/block-library/src/comments/block.json
+++ b/packages/block-library/src/comments/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments",
 	"title": "Comments",
 	"category": "theme",
@@ -18,8 +18,10 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
@@ -27,7 +29,6 @@
 				"link": true
 			}
 		},
-		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
@@ -44,6 +45,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-comments-editor",
diff --git a/packages/block-library/src/comments/deprecated.js b/packages/block-library/src/comments/deprecated.js
index bba13be11e754c..67a1640859289e 100644
--- a/packages/block-library/src/comments/deprecated.js
+++ b/packages/block-library/src/comments/deprecated.js
@@ -12,7 +12,7 @@ const v1 = {
 			default: 'div',
 		},
 	},
-	apiVersion: 2,
+	apiVersion: 3,
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index acc2bbce4e7c46..1a33cb68ea38a6 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -6,23 +6,34 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
 
 export default function CommentsInspectorControls( {
-	attributes: { TagName },
+	attributes: { tagName },
 	setAttributes,
 } ) {
+	const htmlElementMessages = {
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
 	return (
 		<InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ TagName }
+					value={ tagName }
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 		</InspectorControls>
diff --git a/packages/block-library/src/comments/edit/comments-legacy.js b/packages/block-library/src/comments/edit/comments-legacy.js
index 16ba4d8b1641e2..dbe89a4e3a83e1 100644
--- a/packages/block-library/src/comments/edit/comments-legacy.js
+++ b/packages/block-library/src/comments/edit/comments-legacy.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -29,6 +29,7 @@ export default function CommentsLegacy( {
 
 	const actions = [
 		<Button
+			__next40pxDefaultSize
 			key="convert"
 			onClick={ () => void setAttributes( { legacy: false } ) }
 			variant="primary"
@@ -38,7 +39,7 @@ export default function CommentsLegacy( {
 	];
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/comments/edit/placeholder.js b/packages/block-library/src/comments/edit/placeholder.js
index 1f0c44e8984611..7cbd1eaf19c7e2 100644
--- a/packages/block-library/src/comments/edit/placeholder.js
+++ b/packages/block-library/src/comments/edit/placeholder.js
@@ -5,6 +5,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,7 +46,7 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 						<footer className="comment-meta">
 							<div className="comment-author vcard">
 								<img
-									alt="Commenter Avatar"
+									alt={ __( 'Commenter Avatar' ) }
 									src={ avatarURL }
 									className="avatar avatar-32 photo"
 									height="32"
@@ -85,8 +86,17 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 									'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
 								) }
 								<br />
-								{ __( 'Commenter avatars come from' ) }{ ' ' }
-								<a href="https://gravatar.com/">Gravatar</a>.
+								{ createInterpolateElement(
+									__(
+										'Commenter avatars come from <a>Gravatar</a>.'
+									),
+									{
+										a: (
+											// eslint-disable-next-line jsx-a11y/anchor-has-content
+											<a href="https://gravatar.com/" />
+										),
+									}
+								) }
 							</p>
 						</div>
 
@@ -94,7 +104,9 @@ export default function PostCommentsPlaceholder( { postType, postId } ) {
 							<a
 								className="comment-reply-link"
 								href="#top"
-								aria-label="Reply to A WordPress Commenter"
+								aria-label={ __(
+									'Reply to A WordPress Commenter'
+								) }
 							>
 								{ __( 'Reply' ) }
 							</a>
diff --git a/packages/block-library/src/comments/index.php b/packages/block-library/src/comments/index.php
index 69044c081c74e0..f61490ab890d9a 100644
--- a/packages/block-library/src/comments/index.php
+++ b/packages/block-library/src/comments/index.php
@@ -16,6 +16,10 @@
  * the block is in legacy mode. If not, the HTML generated in the editor is
  * returned instead.
  *
+ * @since 6.1.0
+ *
+ * @global WP_Post $post Global post object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -29,13 +33,8 @@ function render_block_core_comments( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$comment_args = array(
-		'post_id' => $post_id,
-		'count'   => true,
-		'status'  => 'approve',
-	);
 	// Return early if there are no comments and comments are closed.
-	if ( ! comments_open( $post_id ) && get_comments( $comment_args ) === 0 ) {
+	if ( ! comments_open( $post_id ) && (int) get_comments_number( $post_id ) === 0 ) {
 		return '';
 	}
 
@@ -88,6 +87,8 @@ function render_block_core_comments( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/comments` block on the server.
+ *
+ * @since 6.1.0
  */
 function register_block_core_comments() {
 	register_block_type_from_metadata(
@@ -103,6 +104,8 @@ function register_block_core_comments() {
 /**
  * Use the button block classes for the form-submit button.
  *
+ * @since 6.1.0
+ *
  * @param array $fields The default comment form arguments.
  *
  * @return array Returns the modified fields.
@@ -121,6 +124,8 @@ function comments_block_form_defaults( $fields ) {
  * Enqueues styles from the legacy `core/post-comments` block. These styles are
  * required only by the block's fallback.
  *
+ * @since 6.1.0
+ *
  * @param string $block_name Name of the new block type.
  */
 function enqueue_legacy_post_comments_block_styles( $block_name ) {
@@ -146,6 +151,8 @@ function enqueue_legacy_post_comments_block_styles( $block_name ) {
  * The same approach was followed when core/query-loop was renamed to
  * core/post-template.
  *
+ * @since 6.1.0
+ *
  * @see https://github.com/WordPress/gutenberg/pull/41807
  * @see https://github.com/WordPress/gutenberg/pull/32514
  */
@@ -202,7 +209,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,
 	);
@@ -213,6 +219,7 @@ function register_legacy_post_comments_block() {
 	 * like `_wp_multiple_block_styles`, which is required in this case because
 	 * the block has multiple styles.
 	 */
+	/** This filter is documented in wp-includes/blocks.php */
 	$metadata = apply_filters( 'block_type_metadata', $metadata );
 
 	register_block_type( 'core/post-comments', $metadata );
diff --git a/packages/block-library/src/comments/style.scss b/packages/block-library/src/comments/style.scss
index be8cf1e597f49f..081783db098ab1 100644
--- a/packages/block-library/src/comments/style.scss
+++ b/packages/block-library/src/comments/style.scss
@@ -13,7 +13,6 @@
 	}
 
 	/* end utility classes */
-
 	.navigation {
 		&::after {
 			content: "";
@@ -146,3 +145,7 @@
 :where(.wp-block-post-comments input[type="submit"]) {
 	border: none;
 }
+
+.wp-block-comments {
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index d92f9173cb223c..15c2cd52b76aad 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -75,8 +75,6 @@
 
 .screen-reader-text {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	-webkit-clip-path: inset(50%);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;
@@ -89,7 +87,6 @@
 
 .screen-reader-text:focus {
 	background-color: $gray-300;
-	clip: auto !important;
 	clip-path: none;
 	color: #444;
 	display: block;
@@ -158,6 +155,25 @@ html :where(img[class*="wp-image-"]) {
 /**
  * Reset user agent styles for figure element margins.
  */
-figure {
+:where(figure) {
 	margin: 0 0 1em 0;
 }
+
+// Set the admin bar offset for sticky positioned blocks to the height of the admin bar.
+// This allows sticky positioned blocks to be positioned correctly when the admin bar is visible.
+html :where(.is-position-sticky) {
+	/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+	--wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
+	/* stylelint-enable length-zero-no-unit */
+}
+
+// To support sticky positioning, reset the admin bar offset to 0px on mobile devices,
+// within the scope of the position classname. This is required because the admin bar
+// is not fixed to the top on mobile devices, but is fixed on viewports larger than 600px.
+@media screen and (max-width: 600px) {
+	html :where(.is-position-sticky) {
+		/* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
+		--wp-admin--admin-bar--position-offset: 0px;
+		/* stylelint-enable length-zero-no-unit */
+	}
+}
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 1982ecc44853ea..733dfc12fc9bca 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/cover",
 	"title": "Cover",
 	"category": "media",
-	"description": "Add an image or video with a text overlay — great for headers.",
+	"description": "Add an image or video with a text overlay.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {
@@ -19,9 +19,6 @@
 		},
 		"alt": {
 			"type": "string",
-			"source": "attribute",
-			"selector": "img",
-			"attribute": "alt",
 			"default": ""
 		},
 		"hasParallax": {
@@ -42,6 +39,9 @@
 		"customOverlayColor": {
 			"type": "string"
 		},
+		"isUserOverlayColor": {
+			"type": "boolean"
+		},
 		"backgroundType": {
 			"type": "string",
 			"default": "image"
@@ -74,6 +74,13 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		},
+		"sizeSlug": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
@@ -81,17 +88,38 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],
+			"blockGap": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
 			}
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
-			"text": false,
-			"background": false
+			"heading": true,
+			"text": true,
+			"background": false,
+			"__experimentalSkipSerialization": [ "gradients" ],
+			"enableContrastChecker": false
+		},
+		"dimensions": {
+			"aspectRatio": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -105,6 +133,12 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"layout": {
+			"allowJustification": false
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",
diff --git a/packages/block-library/src/cover/constants.js b/packages/block-library/src/cover/constants.js
new file mode 100644
index 00000000000000..984193dbfb376a
--- /dev/null
+++ b/packages/block-library/src/cover/constants.js
@@ -0,0 +1 @@
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
diff --git a/packages/block-library/src/cover/controls.native.js b/packages/block-library/src/cover/controls.native.js
index 558db2ec87d61b..dfcf441f4b7ec9 100644
--- a/packages/block-library/src/cover/controls.native.js
+++ b/packages/block-library/src/cover/controls.native.js
@@ -22,7 +22,7 @@ import {
 import { plus } from '@wordpress/icons';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useSetting, MediaUpload } from '@wordpress/block-editor';
+import { useSettings, MediaUpload } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -68,14 +68,9 @@ function Controls( {
 		[ minHeight ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
@@ -218,7 +213,7 @@ function Controls( {
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }
-									resizeMode={ 'cover' }
+									resizeMode="cover"
 									source={ { uri: url } }
 									style={ videoPreviewStyles }
 								/>
@@ -286,7 +281,7 @@ function Controls( {
 						value={ dimRatio }
 						onChange={ onOpacityChange }
 						style={ styles.rangeCellContainer }
-						separatorType={ 'topFullWidth' }
+						separatorType="topFullWidth"
 					/>
 				</PanelBody>
 			) : null }
diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
index 328aeb9e7796a4..6dfad9735457f6 100644
--- a/packages/block-library/src/cover/deprecated.js
+++ b/packages/block-library/src/cover/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import {
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import {
 	getPositionClassName,
 	isContentPositionCenter,
 	dimRatioToClass,
+	mediaPosition,
 } from './shared';
 
 function backgroundImageStyles( url ) {
@@ -53,6 +55,18 @@ function migrateDimRatio( attributes ) {
 	};
 }
 
+function migrateTag( attributes ) {
+	if ( ! attributes.tagName ) {
+		attributes = {
+			...attributes,
+			tagName: 'div',
+		};
+	}
+	return {
+		...attributes,
+	};
+}
+
 const blockAttributes = {
 	url: {
 		type: 'string',
@@ -83,95 +97,798 @@ const blockAttributes = {
 	},
 };
 
-const v8ToV10BlockAttributes = {
-	url: {
-		type: 'string',
-	},
-	id: {
-		type: 'number',
-	},
-	alt: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'alt',
-		default: '',
-	},
-	hasParallax: {
-		type: 'boolean',
-		default: false,
-	},
-	isRepeated: {
-		type: 'boolean',
-		default: false,
-	},
-	dimRatio: {
-		type: 'number',
-		default: 100,
-	},
-	overlayColor: {
-		type: 'string',
-	},
-	customOverlayColor: {
-		type: 'string',
-	},
-	backgroundType: {
-		type: 'string',
-		default: 'image',
-	},
-	focalPoint: {
-		type: 'object',
-	},
-	minHeight: {
-		type: 'number',
-	},
-	minHeightUnit: {
-		type: 'string',
-	},
-	gradient: {
-		type: 'string',
-	},
-	customGradient: {
-		type: 'string',
-	},
-	contentPosition: {
-		type: 'string',
-	},
-	isDark: {
-		type: 'boolean',
-		default: true,
-	},
-	allowedBlocks: {
-		type: 'array',
-	},
-	templateLock: {
-		type: [ 'string', 'boolean' ],
-		enum: [ 'all', 'insert', false ],
+const v8ToV11BlockAttributes = {
+	url: {
+		type: 'string',
+	},
+	id: {
+		type: 'number',
+	},
+	alt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'img',
+		attribute: 'alt',
+		default: '',
+	},
+	hasParallax: {
+		type: 'boolean',
+		default: false,
+	},
+	isRepeated: {
+		type: 'boolean',
+		default: false,
+	},
+	dimRatio: {
+		type: 'number',
+		default: 100,
+	},
+	overlayColor: {
+		type: 'string',
+	},
+	customOverlayColor: {
+		type: 'string',
+	},
+	backgroundType: {
+		type: 'string',
+		default: 'image',
+	},
+	focalPoint: {
+		type: 'object',
+	},
+	minHeight: {
+		type: 'number',
+	},
+	minHeightUnit: {
+		type: 'string',
+	},
+	gradient: {
+		type: 'string',
+	},
+	customGradient: {
+		type: 'string',
+	},
+	contentPosition: {
+		type: 'string',
+	},
+	isDark: {
+		type: 'boolean',
+		default: true,
+	},
+	allowedBlocks: {
+		type: 'array',
+	},
+	templateLock: {
+		type: [ 'string', 'boolean' ],
+		enum: [ 'all', 'insert', false ],
+	},
+};
+
+const v12toV13BlockAttributes = {
+	...v8ToV11BlockAttributes,
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+	tagName: {
+		type: 'string',
+		default: 'div',
+	},
+};
+
+const v14BlockAttributes = {
+	...v12toV13BlockAttributes,
+	isUserOverlayColor: {
+		type: 'boolean',
+	},
+	sizeSlug: {
+		type: 'string',
+	},
+	alt: {
+		type: 'string',
+		default: '',
+	},
+};
+
+const v7toV11BlockSupports = {
+	anchor: true,
+	align: true,
+	html: false,
+	spacing: {
+		padding: true,
+		__experimentalDefaultControls: {
+			padding: true,
+		},
+	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		text: false,
+		background: false,
+	},
+};
+
+const v12BlockSupports = {
+	...v7toV11BlockSupports,
+	spacing: {
+		padding: true,
+		margin: [ 'top', 'bottom' ],
+		blockGap: true,
+		__experimentalDefaultControls: {
+			padding: true,
+			blockGap: true,
+		},
+	},
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		__experimentalDuotone:
+			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+		heading: true,
+		text: true,
+		background: false,
+		__experimentalSkipSerialization: [ 'gradients' ],
+		enableContrastChecker: false,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+	layout: {
+		allowJustification: false,
+	},
+};
+
+const v14BlockSupports = {
+	...v12BlockSupports,
+	shadow: true,
+	dimensions: {
+		aspectRatio: true,
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+// Deprecation for blocks that have z-index.
+const v14 = {
+	attributes: v14BlockAttributes,
+	supports: v14BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+			sizeSlug,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				  ? mediaPosition(focalPoint)
+				  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				[ `size-${ sizeSlug }` ]: sizeSlug,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
+// Deprecation for blocks that does not have the aria-label when the image background is fixed or repeated.
+const v13 = {
+	attributes: v12toV13BlockAttributes,
+	supports: v12BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+					  ? mediaPosition(focalPoint)
+					  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
+	},
+};
+
+// Deprecation for blocks to prevent auto overlay color from overriding previously set values.
+const v12 = {
+	attributes: v12toV13BlockAttributes,
+	supports: v12BlockSupports,
+	isEligible( attributes ) {
+		return (
+			( attributes.customOverlayColor !== undefined ||
+				attributes.overlayColor !== undefined ) &&
+			attributes.isUserOverlayColor === undefined
+		);
+	},
+	migrate( attributes ) {
+		return {
+			...attributes,
+			isUserOverlayColor: true,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+			tagName: Tag,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+			  ? mediaPosition(focalPoint)
+			  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<Tag { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</Tag>
+		);
 	},
 };
 
-const v7toV10BlockSupports = {
-	anchor: true,
-	align: true,
-	html: false,
-	spacing: {
-		padding: true,
-		__experimentalDefaultControls: {
-			padding: true,
-		},
-	},
-	color: {
-		__experimentalDuotone:
-			'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
-		text: false,
-		background: false,
+// Deprecation for blocks that does not have a HTML tag option.
+const v11 = {
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			useFeaturedImage,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight =
+			minHeightProp && minHeightUnit
+				? `${ minHeightProp }${ minHeightUnit }`
+				: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				  ? mediaPosition(focalPoint)
+				  : undefined;
+
+		const backgroundImage = url ? `url(${ url })` : undefined;
+
+		const backgroundPosition = mediaPosition( focalPoint );
+
+		const classes = clsx(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position':
+					! isContentPositionCenter( contentPosition ),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		const imgClasses = clsx(
+			'wp-block-cover__image-background',
+			id ? `wp-image-${ id }` : null,
+			{
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+			}
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ clsx(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
+							'has-background-gradient': gradientValue,
+							[ gradientClass ]: gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ ! useFeaturedImage &&
+					isImageBackground &&
+					url &&
+					( isImgElement ? (
+						<img
+							className={ imgClasses }
+							alt={ alt }
+							src={ url }
+							style={ { objectPosition } }
+							data-object-fit="cover"
+							data-object-position={ objectPosition }
+						/>
+					) : (
+						<div
+							role="img"
+							className={ imgClasses }
+							style={ { backgroundPosition, backgroundImage } }
+						/>
+					) ) }
+				{ isVideoBackground && url && (
+					<video
+						className={ clsx(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</div>
+		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
 const v10 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -227,7 +944,7 @@ const v10 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -244,7 +961,7 @@ const v10 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -267,7 +984,7 @@ const v10 = {
 					isImgElement &&
 					url && (
 						<img
-							className={ classnames(
+							className={ clsx(
 								'wp-block-cover__image-background',
 								id ? `wp-image-${ id }` : null
 							) }
@@ -280,7 +997,7 @@ const v10 = {
 					) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -302,12 +1019,13 @@ const v10 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
 const v9 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -361,7 +1079,7 @@ const v9 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -378,7 +1096,7 @@ const v9 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__background',
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
@@ -398,7 +1116,7 @@ const v9 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -411,7 +1129,7 @@ const v9 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -433,12 +1151,13 @@ const v9 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
-	attributes: v8ToV10BlockAttributes,
-	supports: v7toV10BlockSupports,
+	attributes: v8ToV11BlockAttributes,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -492,7 +1211,7 @@ const v8 = {
 				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 				 : undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			{
 				'is-light': ! isDark,
 				'has-parallax': hasParallax,
@@ -507,7 +1226,7 @@ const v8 = {
 			<div { ...useBlockProps.save( { className: classes, style } ) }>
 				<span
 					aria-hidden="true"
-					className={ classnames(
+					className={ clsx(
 						overlayColorClass,
 						dimRatioToClass( dimRatio ),
 						'wp-block-cover__gradient-background',
@@ -524,7 +1243,7 @@ const v8 = {
 
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -537,7 +1256,7 @@ const v8 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -559,6 +1278,7 @@ const v8 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 const v7 = {
@@ -591,7 +1311,7 @@ const v7 = {
 			default: '',
 		},
 	},
-	supports: v7toV10BlockSupports,
+	supports: v7toV11BlockSupports,
 	save( { attributes } ) {
 		const {
 			backgroundType,
@@ -641,7 +1361,7 @@ const v7 = {
 					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
 					: undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -661,7 +1381,7 @@ const v7 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -674,7 +1394,7 @@ const v7 = {
 				) }
 				{ isImageBackground && isImgElement && url && (
 					<img
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__image-background',
 							id ? `wp-image-${ id }` : null
 						) }
@@ -687,7 +1407,7 @@ const v7 = {
 				) }
 				{ isVideoBackground && url && (
 					<video
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__video-background',
 							'intrinsic-ignore'
 						) }
@@ -707,7 +1427,7 @@ const v7 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v6 = {
@@ -792,7 +1512,7 @@ const v6 = {
 			}
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -812,7 +1532,7 @@ const v6 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -840,7 +1560,7 @@ const v6 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v5 = {
@@ -895,7 +1615,7 @@ const v5 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -911,7 +1631,7 @@ const v5 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -937,7 +1657,7 @@ const v5 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v4 = {
@@ -992,7 +1712,7 @@ const v4 = {
 		}
 		style.minHeight = minHeight || undefined;
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1008,7 +1728,7 @@ const v4 = {
 				{ url && ( gradient || customGradient ) && dimRatio !== 0 && (
 					<span
 						aria-hidden="true"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-cover__gradient-background',
 							gradientClass
 						) }
@@ -1034,7 +1754,7 @@ const v4 = {
 			</div>
 		);
 	},
-	migrate: migrateDimRatio,
+	migrate: compose( migrateDimRatio, migrateTag ),
 };
 
 const v3 = {
@@ -1082,7 +1802,7 @@ const v3 = {
 			}%`;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
 			{
@@ -1117,6 +1837,7 @@ const v3 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, ...restAttributes } = newAttribs;
@@ -1174,7 +1895,7 @@ const v2 = {
 			style.backgroundColor = customOverlayColor;
 		}
 
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			overlayColorClass,
@@ -1202,6 +1923,7 @@ const v2 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
 
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
@@ -1242,7 +1964,7 @@ const v1 = {
 	save( { attributes } ) {
 		const { url, title, hasParallax, dimRatio, align } = attributes;
 		const style = backgroundImageStyles( url );
-		const classes = classnames(
+		const classes = clsx(
 			'wp-block-cover-image',
 			dimRatioToClassV1( dimRatio ),
 			{
@@ -1262,8 +1984,8 @@ const v1 = {
 		const newAttribs = {
 			...attributes,
 			dimRatio: ! attributes.url ? 100 : attributes.dimRatio,
+			tagName: ! attributes.tagName ? 'div' : attributes.tagName,
 		};
-
 		const { title, contentAlign, align, ...restAttributes } = newAttribs;
 
 		return [
@@ -1280,4 +2002,4 @@ const v1 = {
 	},
 };
 
-export default [ v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v14, v13, v12, v11, v10, v9, v8, v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 900298354ded24..99324545bf798e 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -6,10 +6,11 @@ import {
 	TouchableWithoutFeedback,
 	InteractionManager,
 	AccessibilityInfo,
+	Text,
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +33,6 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -46,6 +46,8 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	store as blockEditorStore,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
@@ -58,6 +60,7 @@ import {
 } from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
@@ -87,6 +90,36 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 const Cover = ( {
 	attributes,
 	getStylesFromColorScheme,
@@ -117,34 +150,18 @@ const Cover = ( {
 		overlayColor,
 		isDark,
 	} = attributes;
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	useEffect( () => {
-		let isCurrent = true;
-
 		// Sync with local media store.
 		mediaUploadSync();
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then( () => {
-			if ( isCurrent ) {
-				setIsScreenReaderEnabled();
-			}
-		} );
-
-		return () => {
-			isCurrent = false;
-			a11yInfoChangeSubscription.remove();
-		};
 	}, [] );
 
+	const globalStyles = useGlobalStyles();
 	const convertedMinHeight = useConvertUnitToMobile(
 		minHeight || COVER_DEFAULT_HEIGHT,
-		minHeightUnit
+		minHeightUnit,
+		globalStyles
 	);
 
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
@@ -193,10 +210,32 @@ const Cover = ( {
 
 	const onSelectMedia = ( media ) => {
 		setDidUploadFail( false );
-		const onSelect = attributesFromMedia( setAttributes, dimRatio );
-		onSelect( media );
+
+		const mediaAttributes = attributesFromMedia( media );
+		setAttributes( {
+			...mediaAttributes,
+			focalPoint: undefined,
+			useFeaturedImage: undefined,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			isDark: undefined,
+		} );
 	};
 
+	const onUpdateMediaProgress = useCallback(
+		( payload ) => {
+			const { mediaUrl, state } = payload;
+
+			setIsUploadInProgress( true );
+
+			if ( isUploadInProgress && isImage && mediaUrl && ! state ) {
+				setAttributes( {
+					url: mediaUrl,
+				} );
+			}
+		},
+		[ isImage, isUploadInProgress, setAttributes ]
+	);
+
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
@@ -227,6 +266,12 @@ const Cover = ( {
 		closeSettingsBottomSheet();
 	}, [ closeSettingsBottomSheet ] );
 
+	const onAddMediaButtonPress = useCallback( () => {
+		if ( openMediaOptionsRef?.current ) {
+			openMediaOptionsRef.current();
+		}
+	}, [] );
+
 	function setColor( color ) {
 		const colorValue = getColorObjectByColorValue( colorsDefault, color );
 
@@ -271,7 +316,7 @@ const Cover = ( {
 
 		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
 		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
-			const className = classnames( attributes.className, {
+			const className = clsx( attributes.className, {
 				'is-light': false,
 			} );
 			setAttributes( {
@@ -331,7 +376,7 @@ const Cover = ( {
 			accessibilityHint={ accessibilityHint }
 			accessibilityLabel={ __( 'Add image or video' ) }
 			accessibilityRole="button"
-			onPress={ openMediaOptionsRef.current }
+			onPress={ onAddMediaButtonPress }
 		>
 			<View style={ styles.selectImageContainer }>
 				<View style={ styles.selectImage }>
@@ -351,6 +396,19 @@ const Cover = ( {
 		} );
 	}, [] );
 
+	const selectedColorText = getStylesFromColorScheme(
+		styles.selectedColorText,
+		styles.selectedColorTextDark
+	);
+
+	const bottomLabelText = customOverlayColor ? (
+		<Text style={ selectedColorText }>
+			{ customOverlayColor.toUpperCase() }
+		</Text>
+	) : (
+		__( 'Select a color' )
+	);
+
 	const colorPickerControls = (
 		<InspectorControls>
 			<BottomSheetConsumer>
@@ -380,7 +438,7 @@ const Cover = ( {
 						isBottomSheetContentScrolling={
 							isBottomSheetContentScrolling
 						}
-						bottomLabelText={ __( 'Select a color' ) }
+						bottomLabelText={ bottomLabelText }
 					/>
 				) }
 			</BottomSheetConsumer>
@@ -407,9 +465,7 @@ const Cover = ( {
 					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
-					onUpdateMediaProgress={ () => {
-						setIsUploadInProgress( true );
-					} }
+					onUpdateMediaProgress={ onUpdateMediaProgress }
 					onFinishMediaUploadWithSuccess={ ( {
 						mediaServerId,
 						mediaUrl,
@@ -456,7 +512,7 @@ const Cover = ( {
 						muted
 						disableFocus
 						repeat
-						resizeMode={ 'cover' }
+						resizeMode="cover"
 						source={ { uri: url } }
 						onLoad={ onVideoLoad }
 						onLoadStart={ onVideoLoadStart }
@@ -504,6 +560,7 @@ const Cover = ( {
 						<BottomSheetConsumer>
 							{ ( { shouldEnableBottomSheetScroll } ) => (
 								<ColorPalette
+									enableCustomColor
 									customColorIndicatorStyles={
 										styles.paletteColorIndicator
 									}
@@ -623,12 +680,9 @@ export default compose( [
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 
-		const { getSettings } = select( blockEditorStore );
-
 		const hasInnerBlocks = getBlock( clientId )?.innerBlocks.length > 0;
 
 		return {
-			settings: getSettings(),
 			isParentSelected: selectedBlockClientId === clientId,
 			hasInnerBlocks,
 		};
diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js
index 59aaaaffe77d75..8a4db747990681 100644
--- a/packages/block-library/src/cover/edit/block-controls.js
+++ b/packages/block-library/src/cover/edit/block-controls.js
@@ -8,6 +8,7 @@ import {
 	MediaReplaceFlow,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,9 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { ALLOWED_MEDIA_TYPES } from '../shared';
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 export default function CoverBlockControls( {
 	attributes,
@@ -22,6 +26,7 @@ export default function CoverBlockControls( {
 	onSelectMedia,
 	currentSettings,
 	toggleUseFeaturedImage,
+	onClearMedia,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
 		attributes;
@@ -30,7 +35,10 @@ export default function CoverBlockControls( {
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
 	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
 		useState( minHeightUnit );
-	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const isMinFullHeight =
+		minHeightUnit === 'vh' &&
+		minHeight === 100 &&
+		! attributes?.style?.dimensions?.aspectRatio;
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
 			// If there aren't previous values, take the default ones.
@@ -51,10 +59,17 @@ export default function CoverBlockControls( {
 		setPrevMinHeightValue( minHeight );
 		setPrevMinHeightUnit( minHeightUnit );
 
-		// Set full height.
+		// Set full height, and clear any aspect ratio value.
 		return setAttributes( {
 			minHeight: 100,
 			minHeightUnit: 'vh',
+			style: cleanEmptyObject( {
+				...attributes?.style,
+				dimensions: {
+					...attributes?.style?.dimensions,
+					aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+				},
+			} ),
 		} );
 	};
 
@@ -86,7 +101,8 @@ export default function CoverBlockControls( {
 					onSelect={ onSelectMedia }
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
-					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					name={ ! url ? __( 'Add media' ) : __( 'Replace' ) }
+					onReset={ onClearMedia }
 				/>
 			</BlockControls>
 		</>
diff --git a/packages/block-library/src/cover/edit/color-utils.js b/packages/block-library/src/cover/edit/color-utils.js
new file mode 100644
index 00000000000000..de62b5dfbb014e
--- /dev/null
+++ b/packages/block-library/src/cover/edit/color-utils.js
@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import { FastAverageColor } from 'fast-average-color';
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * @typedef {import('colord').RgbaColor} RgbaColor
+ */
+
+extend( [ namesPlugin ] );
+
+/**
+ * Fallback color when the average color can't be computed. The image may be
+ * rendering as transparent, and most sites have a light color background.
+ */
+export const DEFAULT_BACKGROUND_COLOR = '#FFF';
+
+/**
+ * Default dim color specified in style.css.
+ */
+export const DEFAULT_OVERLAY_COLOR = '#000';
+
+/**
+ * Performs a Porter Duff composite source over operation on two rgba colors.
+ *
+ * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}
+ *
+ * @param {RgbaColor} source Source color.
+ * @param {RgbaColor} dest   Destination color.
+ *
+ * @return {RgbaColor} Composite color.
+ */
+export function compositeSourceOver( source, dest ) {
+	return {
+		r: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),
+		g: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),
+		b: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),
+		a: source.a + dest.a * ( 1 - source.a ),
+	};
+}
+
+/**
+ * Retrieves the FastAverageColor singleton.
+ *
+ * @return {FastAverageColor} The FastAverageColor singleton.
+ */
+export function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * Computes the average color of an image.
+ *
+ * @param {string} url The url of the image.
+ *
+ * @return {Promise<string>} Promise of an average color as a hex string.
+ */
+export const getMediaColor = memoize( async ( url ) => {
+	if ( ! url ) {
+		return DEFAULT_BACKGROUND_COLOR;
+	}
+
+	// making the default color rgb for compat with FAC
+	const { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();
+
+	try {
+		const imgCrossOrigin = applyFilters(
+			'media.crossOrigin',
+			undefined,
+			url
+		);
+		const color = await retrieveFastAverageColor().getColorAsync( url, {
+			// The default color is white, which is the color
+			// that is returned if there's an error.
+			// colord returns alpga 0-1, FAC needs 0-255
+			defaultColor: [ r, g, b, a * 255 ],
+			// Errors that come up don't reject the promise,
+			// so error logging has to be silenced
+			// with this option.
+			silent: process.env.NODE_ENV === 'production',
+			crossOrigin: imgCrossOrigin,
+		} );
+		return color.hex;
+	} catch ( error ) {
+		// If there's an error return the fallback color.
+		return DEFAULT_BACKGROUND_COLOR;
+	}
+} );
+
+/**
+ * Computes if the color combination of the overlay and background color is dark.
+ *
+ * @param {number} dimRatio        Opacity of the overlay between 0 and 100.
+ * @param {string} overlayColor    CSS color string for the overlay.
+ * @param {string} backgroundColor CSS color string for the background.
+ *
+ * @return {boolean} true if the color combination composite result is dark.
+ */
+export function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {
+	// Opacity doesn't matter if you're overlaying the same color on top of itself.
+	// And background doesn't matter when overlay is fully opaque.
+	if ( overlayColor === backgroundColor || dimRatio === 100 ) {
+		return colord( overlayColor ).isDark();
+	}
+	const overlay = colord( overlayColor )
+		.alpha( dimRatio / 100 )
+		.toRgb();
+	const background = colord( backgroundColor ).toRgb();
+	const composite = compositeSourceOver( overlay, background );
+	return colord( composite ).isDark();
+}
diff --git a/packages/block-library/src/cover/edit/cover-placeholder.js b/packages/block-library/src/cover/edit/cover-placeholder.js
index fc3502bd924299..57a1a7c495cd72 100644
--- a/packages/block-library/src/cover/edit/cover-placeholder.js
+++ b/packages/block-library/src/cover/edit/cover-placeholder.js
@@ -23,9 +23,6 @@ export default function CoverPlaceholder( {
 			icon={ <BlockIcon icon={ icon } /> }
 			labels={ {
 				title: __( 'Cover' ),
-				instructions: __(
-					'Drag and drop onto this block, upload, or select existing media from your library.'
-				),
 			} }
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 88f97297a5d93d..ced30973203292 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -1,25 +1,24 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { Placeholder, Spinner } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
+import { compose, useResizeObserver } from '@wordpress/compose';
 import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -38,13 +37,17 @@ import {
 	getPositionClassName,
 	mediaPosition,
 } from '../shared';
-import useCoverIsDark from './use-cover-is-dark';
 import CoverInspectorControls from './inspector-controls';
 import CoverBlockControls from './block-controls';
 import CoverPlaceholder from './cover-placeholder';
-import ResizableCover from './resizable-cover';
-
-extend( [ namesPlugin ] );
+import ResizableCoverPopover from './resizable-cover-popover';
+import {
+	getMediaColor,
+	compositeIsDark,
+	DEFAULT_BACKGROUND_COLOR,
+	DEFAULT_OVERLAY_COLOR,
+} from './color-utils';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
 
 function getInnerBlocksTemplate( attributes ) {
 	return [
@@ -83,6 +86,8 @@ function CoverEdit( {
 	const {
 		contentPosition,
 		id,
+		url: originalUrl,
+		backgroundType: originalBackgroundType,
 		useFeaturedImage,
 		dimRatio,
 		focalPoint,
@@ -94,6 +99,9 @@ function CoverEdit( {
 		alt,
 		allowedBlocks,
 		templateLock,
+		tagName: TagName = 'div',
+		isUserOverlayColor,
+		sizeSlug,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -102,46 +110,218 @@ function CoverEdit( {
 		'featured_media',
 		postId
 	);
+	const { getSettings } = useSelect( blockEditorStore );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const media = useSelect(
 		( select ) =>
 			featuredImage &&
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
-	const mediaUrl = media?.source_url;
+	const mediaUrl =
+		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ??
+		media?.source_url;
+
+	// User can change the featured image outside of the block, but we still
+	// need to update the block when that happens. This effect should only
+	// run when the featured image changes in that case. All other cases are
+	// handled in their respective callbacks.
+	useEffect( () => {
+		( async () => {
+			if ( ! useFeaturedImage ) {
+				return;
+			}
+
+			const averageBackgroundColor = await getMediaColor( mediaUrl );
+
+			let newOverlayColor = overlayColor.color;
+			if ( ! isUserOverlayColor ) {
+				newOverlayColor = averageBackgroundColor;
+				__unstableMarkNextChangeAsNotPersistent();
+				setOverlayColor( newOverlayColor );
+			}
+
+			const newIsDark = compositeIsDark(
+				dimRatio,
+				newOverlayColor,
+				averageBackgroundColor
+			);
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				isDark: newIsDark,
+				isUserOverlayColor: isUserOverlayColor || false,
+			} );
+		} )();
+		// Update the block only when the featured image changes.
+	}, [ mediaUrl ] );
 
 	// instead of destructuring the attributes
 	// we define the url and background type
 	// depending on the value of the useFeaturedImage flag
 	// to preview in edit the dynamic featured image
-	const url = useFeaturedImage ? mediaUrl : attributes.url;
+	const url = useFeaturedImage
+		? mediaUrl
+		: // Ensure the url is not malformed due to sanitization through `wp_kses`.
+		  originalUrl?.replaceAll( '&amp;', '&' );
 	const backgroundType = useFeaturedImage
 		? IMAGE_BACKGROUND_TYPE
-		: attributes.backgroundType;
+		: originalBackgroundType;
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
-	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
-	const isUploadingMedia = isTemporaryMedia( id, url );
 
-	const onUploadError = ( message ) => {
-		createErrorNotice( message, { type: 'snackbar' } );
+	const onSelectMedia = async ( newMedia ) => {
+		const mediaAttributes = attributesFromMedia( newMedia );
+		const isImage = [ newMedia?.type, newMedia?.media_type ].includes(
+			IMAGE_BACKGROUND_TYPE
+		);
+
+		const averageBackgroundColor = await getMediaColor(
+			isImage ? newMedia?.url : undefined
+		);
+
+		let newOverlayColor = overlayColor.color;
+		if ( ! isUserOverlayColor ) {
+			newOverlayColor = averageBackgroundColor;
+			setOverlayColor( newOverlayColor );
+
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		// Only set a new dimRatio if there was no previous media selected
+		// to avoid resetting to 50 if it has been explicitly set to 100.
+		// See issue #52835 for context.
+		const newDimRatio =
+			originalUrl === undefined && dimRatio === 100 ? 50 : dimRatio;
+
+		const newIsDark = compositeIsDark(
+			newDimRatio,
+			newOverlayColor,
+			averageBackgroundColor
+		);
+
+		if ( backgroundType === IMAGE_BACKGROUND_TYPE && mediaAttributes?.id ) {
+			const { imageDefaultSize } = getSettings();
+
+			// Try to use the previous selected image size if it's available
+			// otherwise try the default image size or fallback to full size.
+			if (
+				sizeSlug &&
+				( newMedia?.sizes?.[ sizeSlug ] ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ] )
+			) {
+				mediaAttributes.sizeSlug = sizeSlug;
+				mediaAttributes.url =
+					newMedia?.sizes?.[ sizeSlug ]?.url ||
+					newMedia?.media_details?.sizes?.[ sizeSlug ]?.source_url;
+			} else if (
+				newMedia?.sizes?.[ imageDefaultSize ] ||
+				newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+			) {
+				mediaAttributes.sizeSlug = imageDefaultSize;
+				mediaAttributes.url =
+					newMedia?.sizes?.[ imageDefaultSize ]?.url ||
+					newMedia?.media_details?.sizes?.[ imageDefaultSize ]
+						?.source_url;
+			} else {
+				mediaAttributes.sizeSlug = DEFAULT_MEDIA_SIZE_SLUG;
+			}
+		}
+
+		setAttributes( {
+			...mediaAttributes,
+			focalPoint: undefined,
+			useFeaturedImage: undefined,
+			dimRatio: newDimRatio,
+			isDark: newIsDark,
+			isUserOverlayColor: isUserOverlayColor || false,
+		} );
 	};
 
-	const isCoverDark = useCoverIsDark( url, dimRatio, overlayColor.color );
+	const onClearMedia = () => {
+		let newOverlayColor = overlayColor.color;
+		if ( ! isUserOverlayColor ) {
+			newOverlayColor = DEFAULT_OVERLAY_COLOR;
+			setOverlayColor( undefined );
 
-	useEffect( () => {
-		// This side-effect should not create an undo level.
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		const newIsDark = compositeIsDark(
+			dimRatio,
+			newOverlayColor,
+			DEFAULT_BACKGROUND_COLOR
+		);
+
+		setAttributes( {
+			url: undefined,
+			id: undefined,
+			backgroundType: undefined,
+			focalPoint: undefined,
+			hasParallax: undefined,
+			isRepeated: undefined,
+			useFeaturedImage: undefined,
+			isDark: newIsDark,
+		} );
+	};
+
+	const onSetOverlayColor = async ( newOverlayColor ) => {
+		const averageBackgroundColor = await getMediaColor( url );
+		const newIsDark = compositeIsDark(
+			dimRatio,
+			newOverlayColor,
+			averageBackgroundColor
+		);
+
+		setOverlayColor( newOverlayColor );
+
+		// Make undo revert the next setAttributes and the previous setOverlayColor.
 		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isDark: isCoverDark } );
-	}, [ isCoverDark ] );
+
+		setAttributes( {
+			isUserOverlayColor: true,
+			isDark: newIsDark,
+		} );
+	};
+
+	const onUpdateDimRatio = async ( newDimRatio ) => {
+		const averageBackgroundColor = await getMediaColor( url );
+		const newIsDark = compositeIsDark(
+			newDimRatio,
+			overlayColor.color,
+			averageBackgroundColor
+		);
+
+		setAttributes( {
+			dimRatio: newDimRatio,
+			isDark: newIsDark,
+		} );
+	};
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const isUploadingMedia = isTemporaryMedia( id, url );
 
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const blockEditingMode = useBlockEditingMode();
+	const hasNonContentControls = blockEditingMode === 'default';
+
+	const [ resizeListener, { height, width } ] = useResizeObserver();
+	const resizableBoxDimensions = useMemo( () => {
+		return {
+			height: minHeightUnit === 'px' ? minHeight : 'auto',
+			width: 'auto',
+		};
+	}, [ minHeight, minHeightUnit ] );
+
 	const minHeightWithUnit =
 		minHeight && minHeightUnit
 			? `${ minHeight }${ minHeightUnit }`
@@ -178,7 +358,8 @@ function CoverEdit( {
 	const blockProps = useBlockProps( { ref } );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+	const hasFontSizes = fontSizes?.length > 0;
 	const innerBlocksTemplate = getInnerBlocksTemplate( {
 		fontSize: hasFontSizes ? 'large' : undefined,
 	} );
@@ -194,6 +375,7 @@ function CoverEdit( {
 			templateInsertUpdatesSelection: true,
 			allowedBlocks,
 			templateLock,
+			dropZoneElement: ref.current,
 		}
 	);
 
@@ -208,15 +390,44 @@ function CoverEdit( {
 		overlayColor,
 	};
 
-	const toggleUseFeaturedImage = () => {
+	const toggleUseFeaturedImage = async () => {
+		const newUseFeaturedImage = ! useFeaturedImage;
+
+		const averageBackgroundColor = newUseFeaturedImage
+			? await getMediaColor( mediaUrl )
+			: DEFAULT_BACKGROUND_COLOR;
+
+		const newOverlayColor = ! isUserOverlayColor
+			? averageBackgroundColor
+			: overlayColor.color;
+
+		if ( ! isUserOverlayColor ) {
+			if ( newUseFeaturedImage ) {
+				setOverlayColor( newOverlayColor );
+			} else {
+				setOverlayColor( undefined );
+			}
+
+			// Make undo revert the next setAttributes and the previous setOverlayColor.
+			__unstableMarkNextChangeAsNotPersistent();
+		}
+
+		const newDimRatio = dimRatio === 100 ? 50 : dimRatio;
+		const newIsDark = compositeIsDark(
+			newDimRatio,
+			newOverlayColor,
+			averageBackgroundColor
+		);
+
 		setAttributes( {
 			id: undefined,
 			url: undefined,
-			useFeaturedImage: ! useFeaturedImage,
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			useFeaturedImage: newUseFeaturedImage,
+			dimRatio: newDimRatio,
 			backgroundType: useFeaturedImage
 				? IMAGE_BACKGROUND_TYPE
 				: undefined,
+			isDark: newIsDark,
 		} );
 	};
 
@@ -227,6 +438,7 @@ function CoverEdit( {
 			onSelectMedia={ onSelectMedia }
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
+			onClearMedia={ onClearMedia }
 		/>
 	);
 
@@ -235,63 +447,75 @@ function CoverEdit( {
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			clientId={ clientId }
-			setOverlayColor={ setOverlayColor }
+			setOverlayColor={ onSetOverlayColor }
 			coverRef={ ref }
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
+			updateDimRatio={ onUpdateDimRatio }
+			onClearMedia={ onClearMedia }
+			featuredImage={ media }
 		/>
 	);
 
+	const resizableCoverProps = {
+		className: 'block-library-cover__resize-container',
+		clientId,
+		height,
+		minHeight: minHeightWithUnit,
+		onResizeStart: () => {
+			setAttributes( { minHeightUnit: 'px' } );
+			toggleSelection( false );
+		},
+		onResize: ( value ) => {
+			setAttributes( { minHeight: value } );
+		},
+		onResizeStop: ( newMinHeight ) => {
+			toggleSelection( true );
+			setAttributes( { minHeight: newMinHeight } );
+		},
+		// Hide the resize handle if an aspect ratio is set, as the aspect ratio takes precedence.
+		showHandle: ! attributes.style?.dimensions?.aspectRatio,
+		size: resizableBoxDimensions,
+		width,
+	};
+
 	if ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				<div
+				{ hasNonContentControls && isSelected && (
+					<ResizableCoverPopover { ...resizableCoverProps } />
+				) }
+				<TagName
 					{ ...blockProps }
-					className={ classnames(
-						'is-placeholder',
-						blockProps.className
-					) }
+					className={ clsx( 'is-placeholder', blockProps.className ) }
+					style={ {
+						...blockProps.style,
+						minHeight: minHeightWithUnit || undefined,
+					} }
 				>
+					{ resizeListener }
 					<CoverPlaceholder
 						onSelectMedia={ onSelectMedia }
 						onError={ onUploadError }
-						style={ {
-							minHeight: minHeightWithUnit || undefined,
-						} }
 						toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
-								disableCustomColors={ true }
+								disableCustomColors
 								value={ overlayColor.color }
-								onChange={ setOverlayColor }
+								onChange={ onSetOverlayColor }
 								clearable={ false }
 							/>
 						</div>
 					</CoverPlaceholder>
-					<ResizableCover
-						className="block-library-cover__resize-container"
-						onResizeStart={ () => {
-							setAttributes( { minHeightUnit: 'px' } );
-							toggleSelection( false );
-						} }
-						onResize={ ( value ) => {
-							setAttributes( { minHeight: value } );
-						} }
-						onResizeStop={ ( newMinHeight ) => {
-							toggleSelection( true );
-							setAttributes( { minHeight: newMinHeight } );
-						} }
-						showHandle={ isSelected }
-					/>
-				</div>
+				</TagName>
 			</>
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-dark-theme': isDark,
 			'is-light': ! isDark,
@@ -304,58 +528,25 @@ function CoverEdit( {
 		getPositionClassName( contentPosition )
 	);
 
+	const showOverlay =
+		url || ! useFeaturedImage || ( useFeaturedImage && ! url );
+
 	return (
 		<>
 			{ blockControls }
 			{ inspectorControls }
-			<div
+			<TagName
 				{ ...blockProps }
-				className={ classnames( classes, blockProps.className ) }
+				className={ clsx( classes, blockProps.className ) }
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
-				<ResizableCover
-					className="block-library-cover__resize-container"
-					onResizeStart={ () => {
-						setAttributes( { minHeightUnit: 'px' } );
-						toggleSelection( false );
-					} }
-					onResize={ ( value ) => {
-						setAttributes( { minHeight: value } );
-					} }
-					onResizeStop={ ( newMinHeight ) => {
-						toggleSelection( true );
-						setAttributes( { minHeight: newMinHeight } );
-					} }
-					showHandle={ isSelected }
-				/>
-
-				{ ( ! useFeaturedImage || url ) && (
-					<span
-						aria-hidden="true"
-						className={ classnames(
-							'wp-block-cover__background',
-							dimRatioToClass( dimRatio ),
-							{
-								[ overlayColor.class ]: overlayColor.class,
-								'has-background-dim': dimRatio !== undefined,
-								// For backwards compatibility. Former versions of the Cover Block applied
-								// `.wp-block-cover__gradient-background` in the presence of
-								// media, a gradient and a dim.
-								'wp-block-cover__gradient-background':
-									url && gradientValue && dimRatio !== 0,
-								'has-background-gradient': gradientValue,
-								[ gradientClass ]: gradientClass,
-							}
-						) }
-						style={ { backgroundImage: gradientValue, ...bgStyle } }
-					/>
-				) }
+				{ resizeListener }
 
 				{ ! url && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-cover__image--placeholder-image"
-						withIllustration={ true }
+						withIllustration
 					/>
 				) }
 
@@ -372,8 +563,9 @@ function CoverEdit( {
 					) : (
 						<div
 							ref={ mediaElement }
-							role="img"
-							className={ classnames(
+							role={ alt ? 'img' : undefined }
+							aria-label={ alt ? alt : undefined }
+							className={ clsx(
 								classes,
 								'wp-block-cover__image-background'
 							) }
@@ -391,7 +583,31 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
+
+				{ showOverlay && (
+					<span
+						aria-hidden="true"
+						className={ clsx(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
+
 				{ isUploadingMedia && <Spinner /> }
+
 				<CoverPlaceholder
 					disableMediaButtons
 					onSelectMedia={ onSelectMedia }
@@ -399,7 +615,10 @@ function CoverEdit( {
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				<div { ...innerBlocksProps } />
-			</div>
+			</TagName>
+			{ hasNonContentControls && isSelected && (
+				<ResizableCoverPopover { ...resizableCoverProps } />
+			) }
 		</>
 	);
 }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index cfcf012badd62c..b0d4b435163b78 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -1,17 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { Fragment, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
-	Button,
 	ExternalLink,
 	FocalPointPicker,
-	PanelBody,
-	PanelRow,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
+	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
@@ -19,17 +18,26 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
+	store as blockEditorStore,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
+
+const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
 
 function CoverHeightInput( {
 	onChange,
@@ -41,14 +49,9 @@ function CoverHeightInput( {
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
@@ -73,13 +76,13 @@ function CoverHeightInput( {
 
 	return (
 		<UnitControl
-			label={ __( 'Minimum height of cover' ) }
+			__next40pxDefaultSize
+			label={ __( 'Minimum height' ) }
 			id={ inputId }
 			isResetValueOnUnitChange
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth={ '80px' }
 			units={ units }
 			value={ computedValue }
 		/>
@@ -92,9 +95,12 @@ export default function CoverInspectorControls( {
 	setOverlayColor,
 	coverRef,
 	currentSettings,
+	updateDimRatio,
+	featuredImage,
 } ) {
 	const {
 		useFeaturedImage,
+		id,
 		dimRatio,
 		focalPoint,
 		hasParallax,
@@ -102,17 +108,54 @@ export default function CoverInspectorControls( {
 		minHeight,
 		minHeightUnit,
 		alt,
+		tagName,
 	} = attributes;
 	const {
 		isVideoBackground,
 		isImageBackground,
 		mediaElement,
 		url,
-		isImgElement,
 		overlayColor,
 	} = currentSettings;
 
+	const sizeSlug = attributes.sizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+
 	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { getSettings } = useSelect( blockEditorStore );
+
+	const imageSizes = getSettings()?.imageSizes;
+
+	const image = useSelect(
+		( select ) =>
+			id && isImageBackground
+				? select( coreStore ).getMedia( id, { context: 'view' } )
+				: null,
+		[ id, isImageBackground ]
+	);
+
+	const currentBackgroundImage = useFeaturedImage ? featuredImage : image;
+
+	function updateImage( newSizeSlug ) {
+		const newUrl =
+			currentBackgroundImage?.media_details?.sizes?.[ newSizeSlug ]
+				?.source_url;
+		if ( ! newUrl ) {
+			return null;
+		}
+
+		setAttributes( {
+			url: newUrl,
+			sizeSlug: newSizeSlug,
+		} );
+	}
+
+	const imageSizeOptions = imageSizes
+		?.filter(
+			( { slug } ) =>
+				currentBackgroundImage?.media_details?.sizes?.[ slug ]
+					?.source_url
+		)
+		?.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	const toggleParallax = () => {
 		setAttributes( {
@@ -140,147 +183,221 @@ export default function CoverInspectorControls( {
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only.'
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
 				{ !! url && (
-					<PanelBody title={ __( 'Media settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								hasParallax: false,
+								focalPoint: undefined,
+								isRepeated: false,
+								alt: '',
+								sizeSlug: undefined,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isImageBackground && (
-							<Fragment>
-								<ToggleControl
+							<>
+								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
-									checked={ hasParallax }
-									onChange={ toggleParallax }
-								/>
+									isShownByDefault
+									hasValue={ () => hasParallax }
+									onDeselect={ () =>
+										setAttributes( {
+											hasParallax: false,
+											focalPoint: undefined,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Fixed background' ) }
+										checked={ hasParallax }
+										onChange={ toggleParallax }
+									/>
+								</ToolsPanelItem>
 
-								<ToggleControl
+								<ToolsPanelItem
 									label={ __( 'Repeated background' ) }
-									checked={ isRepeated }
-									onChange={ toggleIsRepeated }
-								/>
-							</Fragment>
+									isShownByDefault
+									hasValue={ () => isRepeated }
+									onDeselect={ () =>
+										setAttributes( {
+											isRepeated: false,
+										} )
+									}
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Repeated background' ) }
+										checked={ isRepeated }
+										onChange={ toggleIsRepeated }
+									/>
+								</ToolsPanelItem>
+							</>
 						) }
 						{ showFocalPointPicker && (
-							<FocalPointPicker
-								label={ __( 'Focal point picker' ) }
-								url={ url }
-								value={ focalPoint }
-								onDragStart={ imperativeFocalPointPreview }
-								onDrag={ imperativeFocalPointPreview }
-								onChange={ ( newFocalPoint ) =>
+							<ToolsPanelItem
+								label={ __( 'Focal point' ) }
+								isShownByDefault
+								hasValue={ () => !! focalPoint }
+								onDeselect={ () =>
 									setAttributes( {
-										focalPoint: newFocalPoint,
+										focalPoint: undefined,
 									} )
 								}
-							/>
+							>
+								<FocalPointPicker
+									__nextHasNoMarginBottom
+									label={ __( 'Focal point' ) }
+									url={ url }
+									value={ focalPoint }
+									onDragStart={ imperativeFocalPointPreview }
+									onDrag={ imperativeFocalPointPreview }
+									onChange={ ( newFocalPoint ) =>
+										setAttributes( {
+											focalPoint: newFocalPoint,
+										} )
+									}
+								/>
+							</ToolsPanelItem>
 						) }
-						{ ! useFeaturedImage &&
-							url &&
-							isImageBackground &&
-							isImgElement && (
+						{ ! useFeaturedImage && url && ! isVideoBackground && (
+							<ToolsPanelItem
+								label={ __( 'Alternative text' ) }
+								isShownByDefault
+								hasValue={ () => !! alt }
+								onDeselect={ () =>
+									setAttributes( { alt: '' } )
+								}
+							>
 								<TextareaControl
-									label={ __(
-										'Alt text (alternative text)'
-									) }
+									__nextHasNoMarginBottom
+									label={ __( 'Alternative text' ) }
 									value={ alt }
 									onChange={ ( newAlt ) =>
 										setAttributes( { alt: newAlt } )
 									}
 									help={
 										<>
-											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
 												{ __(
-													'Describe the purpose of the image'
+													'Describe the purpose of the image.'
 												) }
 											</ExternalLink>
+											<br />
 											{ __(
-												'Leave empty if the image is purely decorative.'
+												'Leave empty if decorative.'
 											) }
 										</>
 									}
 								/>
-							) }
-						<PanelRow>
-							<Button
-								variant="secondary"
-								isSmall
-								className="block-library-cover__reset-button"
-								onClick={ () =>
-									setAttributes( {
-										url: undefined,
-										id: undefined,
-										backgroundType: undefined,
-										focalPoint: undefined,
-										hasParallax: undefined,
-										isRepeated: undefined,
-										useFeaturedImage: false,
-									} )
-								}
-							>
-								{ __( 'Clear Media' ) }
-							</Button>
-						</PanelRow>
-					</PanelBody>
+							</ToolsPanelItem>
+						) }
+						{ !! imageSizeOptions?.length && (
+							<ResolutionTool
+								value={ sizeSlug }
+								onChange={ updateImage }
+								options={ imageSizeOptions }
+								defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+							/>
+						) }
+					</ToolsPanel>
 				) }
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
-				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => {
-						// If there's a media background the dimRatio will be
-						// defaulted to 50 whereas it will be 100 for colors.
-						return dimRatio === undefined
-							? false
-							: dimRatio !== ( url ? 50 : 100 );
-					} }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () =>
-						setAttributes( { dimRatio: url ? 50 : 100 } )
-					}
-					resetAllFilter={ () => ( {
-						dimRatio: url ? 50 : 100,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRation ) =>
-							setAttributes( {
-								dimRatio: newDimRation,
-							} )
-						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					<ColorGradientSettingsDropdown
+						__experimentalIsRenderedInSidebar
+						settings={ [
+							{
+								colorValue: overlayColor.color,
+								gradientValue,
+								label: __( 'Overlay' ),
+								onColorChange: setOverlayColor,
+								onGradientChange: setGradient,
+								isShownByDefault: true,
+								resetAllFilter: () => ( {
+									overlayColor: undefined,
+									customOverlayColor: undefined,
+									gradient: undefined,
+									customGradient: undefined,
+								} ),
+								clearable: true,
+							},
+						] }
+						panelId={ clientId }
+						{ ...colorGradientSettings }
 					/>
-				</ToolsPanelItem>
-			</InspectorControls>
-			<InspectorControls __experimentalGroup="dimensions">
+					<ToolsPanelItem
+						hasValue={ () => {
+							// If there's a media background the dimRatio will be
+							// defaulted to 50 whereas it will be 100 for colors.
+							return dimRatio === undefined
+								? false
+								: dimRatio !== ( url ? 50 : 100 );
+						} }
+						label={ __( 'Overlay opacity' ) }
+						onDeselect={ () => updateDimRatio( url ? 50 : 100 ) }
+						resetAllFilter={ () => ( {
+							dimRatio: url ? 50 : 100,
+						} ) }
+						isShownByDefault
+						panelId={ clientId }
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							label={ __( 'Overlay opacity' ) }
+							value={ dimRatio }
+							onChange={ ( newDimRatio ) =>
+								updateDimRatio( newDimRatio )
+							}
+							min={ 0 }
+							max={ 100 }
+							step={ 10 }
+							required
+							__next40pxDefaultSize
+						/>
+					</ToolsPanelItem>
+				</InspectorControls>
+			) }
+			<InspectorControls group="dimensions">
 				<ToolsPanelItem
+					className="single-column"
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
 					onDeselect={ () =>
@@ -293,14 +410,27 @@ export default function CoverInspectorControls( {
 						minHeight: undefined,
 						minHeightUnit: undefined,
 					} ) }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ clientId }
 				>
 					<CoverHeightInput
-						value={ minHeight }
+						value={
+							attributes?.style?.dimensions?.aspectRatio
+								? ''
+								: minHeight
+						}
 						unit={ minHeightUnit }
 						onChange={ ( newMinHeight ) =>
-							setAttributes( { minHeight: newMinHeight } )
+							setAttributes( {
+								minHeight: newMinHeight,
+								style: cleanEmptyObject( {
+									...attributes?.style,
+									dimensions: {
+										...attributes?.style?.dimensions,
+										aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+									},
+								} ),
+							} )
 						}
 						onUnitChange={ ( nextUnit ) =>
 							setAttributes( {
@@ -310,6 +440,27 @@ export default function CoverInspectorControls( {
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<SelectControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<header>', value: 'header' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<article>', value: 'article' },
+						{ label: '<aside>', value: 'aside' },
+						{ label: '<footer>', value: 'footer' },
+					] }
+					value={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					help={ htmlElementMessages[ tagName ] }
+				/>
+			</InspectorControls>
 		</>
 	);
 }
diff --git a/packages/block-library/src/cover/edit/resizable-cover-popover.js b/packages/block-library/src/cover/edit/resizable-cover-popover.js
new file mode 100644
index 00000000000000..a6447d0108c7f8
--- /dev/null
+++ b/packages/block-library/src/cover/edit/resizable-cover-popover.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+
+export default function ResizableCoverPopover( {
+	className,
+	height,
+	minHeight,
+	onResize,
+	onResizeStart,
+	onResizeStop,
+	showHandle,
+	size,
+	width,
+	...props
+} ) {
+	const [ isResizing, setIsResizing ] = useState( false );
+
+	const resizableBoxProps = {
+		className: clsx( className, { 'is-resizing': isResizing } ),
+		enable: RESIZABLE_BOX_ENABLE_OPTION,
+		onResizeStart: ( _event, _direction, elt ) => {
+			onResizeStart( elt.clientHeight );
+			onResize( elt.clientHeight );
+		},
+		onResize: ( _event, _direction, elt ) => {
+			onResize( elt.clientHeight );
+			if ( ! isResizing ) {
+				setIsResizing( true );
+			}
+		},
+		onResizeStop: ( _event, _direction, elt ) => {
+			onResizeStop( elt.clientHeight );
+			setIsResizing( false );
+		},
+		showHandle,
+		size,
+		__experimentalShowTooltip: true,
+		__experimentalTooltipProps: {
+			axis: 'y',
+			position: 'bottom',
+			isVisible: isResizing,
+		},
+	};
+
+	return (
+		<ResizableBoxPopover
+			className="block-library-cover__resizable-box-popover"
+			resizableBoxProps={ resizableBoxProps }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/block-library/src/cover/edit/resizable-cover.js b/packages/block-library/src/cover/edit/resizable-cover.js
deleted file mode 100644
index 7029e5c997e46c..00000000000000
--- a/packages/block-library/src/cover/edit/resizable-cover.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
-
-const RESIZABLE_BOX_ENABLE_OPTION = {
-	top: false,
-	right: false,
-	bottom: true,
-	left: false,
-	topRight: false,
-	bottomRight: false,
-	bottomLeft: false,
-	topLeft: false,
-};
-
-export default function ResizableCover( {
-	className,
-	onResizeStart,
-	onResize,
-	onResizeStop,
-	...props
-} ) {
-	const [ isResizing, setIsResizing ] = useState( false );
-
-	return (
-		<ResizableBox
-			className={ classnames( className, {
-				'is-resizing': isResizing,
-			} ) }
-			enable={ RESIZABLE_BOX_ENABLE_OPTION }
-			onResizeStart={ ( _event, _direction, elt ) => {
-				onResizeStart( elt.clientHeight );
-				onResize( elt.clientHeight );
-			} }
-			onResize={ ( _event, _direction, elt ) => {
-				onResize( elt.clientHeight );
-				if ( ! isResizing ) {
-					setIsResizing( true );
-				}
-			} }
-			onResizeStop={ ( _event, _direction, elt ) => {
-				onResizeStop( elt.clientHeight );
-				setIsResizing( false );
-			} }
-			__experimentalShowTooltip
-			__experimentalTooltipProps={ {
-				axis: 'y',
-				position: 'bottom',
-				isVisible: isResizing,
-			} }
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/block-library/src/cover/edit/use-cover-is-dark.js b/packages/block-library/src/cover/edit/use-cover-is-dark.js
deleted file mode 100644
index a0966f7c289183..00000000000000
--- a/packages/block-library/src/cover/edit/use-cover-is-dark.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { FastAverageColor } from 'fast-average-color';
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
-
-function retrieveFastAverageColor() {
-	if ( ! retrieveFastAverageColor.fastAverageColor ) {
-		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
-	}
-	return retrieveFastAverageColor.fastAverageColor;
-}
-
-/**
- * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
- * background is dark or not.
- *
- * @param {?string} url          Url of the media background.
- * @param {?number} dimRatio     Transparency of the overlay color. If an image and
- *                               color are set, dimRatio is used to decide what is used
- *                               for background darkness checking purposes.
- * @param {?string} overlayColor String containing the overlay color value if one exists.
- *
- * @return {boolean} True if the cover background is considered "dark" and false otherwise.
- */
-export default function useCoverIsDark( url, dimRatio = 50, overlayColor ) {
-	const [ isDark, setIsDark ] = useState( false );
-	useEffect( () => {
-		// If opacity is lower than 50 the dominant color is the image or video color,
-		// so use that color for the dark mode computation.
-		if ( url && dimRatio <= 50 ) {
-			const imgCrossOrigin = applyFilters(
-				'media.crossOrigin',
-				undefined,
-				url
-			);
-			retrieveFastAverageColor()
-				.getColorAsync( url, {
-					// Previously the default color was white, but that changed
-					// in v6.0.0 so it has to be manually set now.
-					defaultColor: [ 255, 255, 255, 255 ],
-					// Errors that come up don't reject the promise, so error
-					// logging has to be silenced with this option.
-					silent: process.env.NODE_ENV === 'production',
-					crossOrigin: imgCrossOrigin,
-				} )
-				.then( ( color ) => setIsDark( color.isDark ) );
-		}
-	}, [ url, url && dimRatio <= 50, setIsDark ] );
-	useEffect( () => {
-		// If opacity is greater than 50 the dominant color is the overlay color,
-		// so use that color for the dark mode computation.
-		if ( dimRatio > 50 || ! url ) {
-			if ( ! overlayColor ) {
-				// If no overlay color exists the overlay color is black (isDark )
-				setIsDark( true );
-				return;
-			}
-			setIsDark( colord( overlayColor ).isDark() );
-		}
-	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
-	useEffect( () => {
-		if ( ! url && ! overlayColor ) {
-			// Reset isDark.
-			setIsDark( false );
-		}
-	}, [ ! url && ! overlayColor, setIsDark ] );
-	return isDark;
-}
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 5e8300dcada72d..4dfc301a23114d 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -1,30 +1,23 @@
 .wp-block-cover {
-	/* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
-	.editor-styles-wrapper & {
-		box-sizing: border-box;
-	}
-
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
 	&.is-placeholder {
-		min-height: auto !important;
 		padding: 0 !important;
+		display: flex;
+		align-items: stretch;
+		min-height: 240px;
 
-		// Resizable placeholder for placeholder.
-		.block-library-cover__resize-container {
-			display: none;
-		}
 		.components-placeholder {
 			&.is-large {
-				min-height: 240px;
 				justify-content: flex-start;
 				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
-				+ .block-library-cover__resize-container {
-					min-height: 240px;
-					display: block;
-				}
 			}
 		}
+
+		// Allow focus outline/box-shadow to align with block's min height.
+		&:focus::after {
+			min-height: auto;
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -32,15 +25,27 @@
 	}
 
 	// Applied while media is being uploaded
-	&.is-transient::before {
-		background-color: #fff;
-		opacity: 0.3;
+	&.is-transient {
+		position: relative;
+
+		&::before {
+			background-color: #fff;
+			content: "";
+			height: 100%;
+			opacity: 0.3;
+			position: absolute;
+			width: 100%;
+			z-index: 1;
+		}
+
+		.wp-block-cover__inner-container {
+			z-index: 2;
+		}
 	}
 
 	// Shown while media is being uploaded
 	.components-spinner {
 		position: absolute;
-		z-index: z-index(".wp-block-cover__inner-container");
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%); // Account for spinner dimensions
@@ -88,15 +93,20 @@
 	min-height: 50px;
 }
 
-.block-library-cover__resize-container:not(.is-resizing) {
-	// Important is used to have higher specificity than the inline style set by re-resizable library.
-	height: auto !important;
+// Prevent resizable box popover form preventing inner block selection.
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover {
+	// Additional specificity is required to overcome default block popover
+	// pointer events only for the intended wrappers. The default pointer events
+	// are still needed for the inner resize handles of the resizable box.
+	.components-popover__content > div,
+	.block-library-cover__resize-container {
+		// The inner drag handle will still have `pointer-events: all` allowing
+		// it to continue to be interacted with.
+		pointer-events: none;
+		overflow: visible;
+	}
 }
 
-// When uploading background images, show a transparent overlay.
-.wp-block-cover > .components-drop-zone .components-drop-zone__content {
-	opacity: 0.8 !important;
-}
 
 // Remove the parallax fixed background when in the patterns preview panel as it
 // doesn't work with the transforms that are applied to resize the block in that context.
@@ -107,10 +117,3 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
-	min-height: auto;
-}
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index eb780571248be7..b5de174f708085 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -25,6 +26,14 @@ export const settings = {
 			customOverlayColor: '#065174',
 			dimRatio: 40,
 			url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
+			style: {
+				typography: {
+					fontSize: 48,
+				},
+				color: {
+					text: 'white',
+				},
+			},
 		},
 		innerBlocks: [
 			{
@@ -32,14 +41,6 @@ export const settings = {
 				attributes: {
 					content: __( '<strong>Snow Patrol</strong>' ),
 					align: 'center',
-					style: {
-						typography: {
-							fontSize: 48,
-						},
-						color: {
-							text: 'white',
-						},
-					},
 				},
 			},
 		],
@@ -48,6 +49,7 @@ export const settings = {
 	save,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php
index e5a497fd768890..630835a47947b3 100644
--- a/packages/block-library/src/cover/index.php
+++ b/packages/block-library/src/cover/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/cover` block on server.
  *
+ * @since 6.0.0
+ *
  * @param array  $attributes The block attributes.
  * @param string $content    The block rendered content.
  *
@@ -18,50 +20,66 @@ function render_block_core_cover( $attributes, $content ) {
 		return $content;
 	}
 
+	$object_position = isset( $attributes['focalPoint'] )
+		? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%'
+		: null;
+
 	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {
 		$attr = array(
 			'class'           => 'wp-block-cover__image-background',
 			'data-object-fit' => 'cover',
 		);
 
-		if ( isset( $attributes['focalPoint'] ) ) {
-			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+		if ( $object_position ) {
 			$attr['data-object-position'] = $object_position;
-			$attr['style']                = 'object-position: ' . $object_position;
+			$attr['style']                = 'object-position:' . $object_position . ';';
 		}
 
-		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
-
-		/*
-		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
-		 * and removes eventual withespace characters between the two (typically introduced at template level)
-		 */
-		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
-		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
-			$offset  = $matches[0][1];
-			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
-		}
+		$image = get_the_post_thumbnail( null, $attributes['sizeSlug'] ?? 'post-thumbnail', $attr );
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
 		}
-		$current_featured_image = get_the_post_thumbnail_url();
+		$current_featured_image = get_the_post_thumbnail_url( null, $attributes['sizeSlug'] ?? null );
+		if ( ! $current_featured_image ) {
+			return $content;
+		}
 
-		$styles = 'background-image:url(' . esc_url( $current_featured_image ) . '); ';
+		$current_thumbnail_id = get_post_thumbnail_id();
 
-		if ( isset( $attributes['minHeight'] ) ) {
-			$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
-			$height      = " min-height:{$attributes['minHeight']}{$height_unit}";
+		$processor = new WP_HTML_Tag_Processor( '<div></div>' );
+		$processor->next_tag();
 
-			$styles .= $height;
+		$current_alt = trim( strip_tags( get_post_meta( $current_thumbnail_id, '_wp_attachment_image_alt', true ) ) );
+		if ( $current_alt ) {
+			$processor->set_attribute( 'role', 'img' );
+			$processor->set_attribute( 'aria-label', $current_alt );
 		}
 
-		$content = preg_replace(
-			'/class=\".*?\"/',
-			'${0} style="' . $styles . '"',
-			$content,
-			1
-		);
+		$processor->add_class( 'wp-block-cover__image-background' );
+		$processor->add_class( 'wp-image-' . $current_thumbnail_id );
+		if ( $attributes['hasParallax'] ) {
+			$processor->add_class( 'has-parallax' );
+		}
+		if ( $attributes['isRepeated'] ) {
+			$processor->add_class( 'is-repeated' );
+		}
+
+		$styles  = 'background-position:' . ( $object_position ?? '50% 50%' ) . ';';
+		$styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+		$processor->set_attribute( 'style', $styles );
+
+		$image = $processor->get_updated_html();
+	}
+
+	/*
+	 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+	 * and removes eventual whitespace characters between the two (typically introduced at template level)
+	 */
+	$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+	if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+		$offset  = $matches[0][1];
+		$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
 	}
 
 	return $content;
@@ -69,6 +87,8 @@ function render_block_core_cover( $attributes, $content ) {
 
 /**
  * Registers the `core/cover` block renderer on server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_cover() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js
index 7a68e207ffb276..a8acf8bf11b102 100644
--- a/packages/block-library/src/cover/overlay-color-settings.native.js
+++ b/packages/block-library/src/cover/overlay-color-settings.native.js
@@ -12,9 +12,9 @@ import {
 	getGradientValueBySlug,
 	getGradientSlugByValue,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
-import { useMobileGlobalStylesColors } from '@wordpress/components';
 
 function OverlayColorSettings( {
 	overlayColor,
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 6dbf67a3684bd3..47fa8010384402 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,6 +44,8 @@ export default function save( { attributes } ) {
 		id,
 		minHeight: minHeightProp,
 		minHeightUnit,
+		tagName: Tag,
+		sizeSlug,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -79,7 +81,7 @@ export default function save( { attributes } ) {
 
 	const backgroundPosition = mediaPosition( focalPoint );
 
-	const classes = classnames(
+	const classes = clsx(
 		{
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
@@ -90,10 +92,11 @@ export default function save( { attributes } ) {
 		getPositionClassName( contentPosition )
 	);
 
-	const imgClasses = classnames(
+	const imgClasses = clsx(
 		'wp-block-cover__image-background',
 		id ? `wp-image-${ id }` : null,
 		{
+			[ `size-${ sizeSlug }` ]: sizeSlug,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
 		}
@@ -102,27 +105,7 @@ export default function save( { attributes } ) {
 	const gradientValue = gradient || customGradient;
 
 	return (
-		<div { ...useBlockProps.save( { className: classes, style } ) }>
-			<span
-				aria-hidden="true"
-				className={ classnames(
-					'wp-block-cover__background',
-					overlayColorClass,
-					dimRatioToClass( dimRatio ),
-					{
-						'has-background-dim': dimRatio !== undefined,
-						// For backwards compatibility. Former versions of the Cover Block applied
-						// `.wp-block-cover__gradient-background` in the presence of
-						// media, a gradient and a dim.
-						'wp-block-cover__gradient-background':
-							url && gradientValue && dimRatio !== 0,
-						'has-background-gradient': gradientValue,
-						[ gradientClass ]: gradientClass,
-					}
-				) }
-				style={ bgStyle }
-			/>
-
+		<Tag { ...useBlockProps.save( { className: classes, style } ) }>
 			{ ! useFeaturedImage &&
 				isImageBackground &&
 				url &&
@@ -137,14 +120,15 @@ export default function save( { attributes } ) {
 					/>
 				) : (
 					<div
-						role="img"
+						role={ alt ? 'img' : undefined }
+						aria-label={ alt ? alt : undefined }
 						className={ imgClasses }
 						style={ { backgroundPosition, backgroundImage } }
 					/>
 				) ) }
 			{ isVideoBackground && url && (
 				<video
-					className={ classnames(
+					className={ clsx(
 						'wp-block-cover__video-background',
 						'intrinsic-ignore'
 					) }
@@ -158,11 +142,38 @@ export default function save( { attributes } ) {
 					data-object-position={ objectPosition }
 				/>
 			) }
+
+			{ /* The `wp-block-cover__background` needs to be immediately before
+			the `wp-block-cover__inner-container`, so the exclusion CSS selector
+			`.wp-block-cover__background + .wp-block-cover__inner-container`
+			works properly. If it needs to be changed in the future, the
+			selector for the backward compatibility for v14 deprecation also
+			needs change. */ }
+			<span
+				aria-hidden="true"
+				className={ clsx(
+					'wp-block-cover__background',
+					overlayColorClass,
+					dimRatioToClass( dimRatio ),
+					{
+						'has-background-dim': dimRatio !== undefined,
+						// For backwards compatibility. Former versions of the Cover Block applied
+						// `.wp-block-cover__gradient-background` in the presence of
+						// media, a gradient and a dim.
+						'wp-block-cover__gradient-background':
+							url && gradientValue && dimRatio !== 0,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
+					}
+				) }
+				style={ bgStyle }
+			/>
+
 			<div
 				{ ...useInnerBlocksProps.save( {
 					className: 'wp-block-cover__inner-container',
 				} ) }
 			/>
-		</div>
+		</Tag>
 	);
 }
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 0e18d28372764e..7628300cbf8cff 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -29,54 +29,52 @@ export function mediaPosition( { x, y } = DEFAULT_FOCAL_POINT ) {
 }
 
 export function dimRatioToClass( ratio ) {
-	return ratio === 50 || ! ratio === undefined
+	return ratio === 50 || ratio === undefined
 		? null
 		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
 }
 
-export function attributesFromMedia( setAttributes, dimRatio ) {
-	return ( media ) => {
-		if ( ! media || ! media.url ) {
-			setAttributes( { url: undefined, id: undefined } );
-			return;
-		}
+export function attributesFromMedia( media ) {
+	if ( ! media || ( ! media.url && ! media.src ) ) {
+		return {
+			url: undefined,
+			id: undefined,
+		};
+	}
 
-		if ( isBlobURL( media.url ) ) {
-			media.type = getBlobTypeByURL( media.url );
-		}
+	if ( isBlobURL( media.url ) ) {
+		media.type = getBlobTypeByURL( media.url );
+	}
 
-		let mediaType;
-		// For media selections originated from a file upload.
-		if ( media.media_type ) {
-			if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
-				mediaType = IMAGE_BACKGROUND_TYPE;
-			} else {
-				// only images and videos are accepted so if the media_type is not an image we can assume it is a video.
-				// Videos contain the media type of 'file' in the object returned from the rest api.
-				mediaType = VIDEO_BACKGROUND_TYPE;
-			}
+	let mediaType;
+	// For media selections originated from a file upload.
+	if ( media.media_type ) {
+		if ( media.media_type === IMAGE_BACKGROUND_TYPE ) {
+			mediaType = IMAGE_BACKGROUND_TYPE;
 		} else {
-			// For media selections originated from existing files in the media library.
-			if (
-				media.type !== IMAGE_BACKGROUND_TYPE &&
-				media.type !== VIDEO_BACKGROUND_TYPE
-			) {
-				return;
-			}
-			mediaType = media.type;
+			// Only images and videos are accepted so if the media_type is not an image we can assume it is a video.
+			// Videos contain the media type of 'file' in the object returned from the rest api.
+			mediaType = VIDEO_BACKGROUND_TYPE;
 		}
+		// For media selections originated from existing files in the media library.
+	} else if (
+		media.type &&
+		( media.type === IMAGE_BACKGROUND_TYPE ||
+			media.type === VIDEO_BACKGROUND_TYPE )
+	) {
+		mediaType = media.type;
+	} else {
+		return;
+	}
 
-		setAttributes( {
-			dimRatio: dimRatio === 100 ? 50 : dimRatio,
-			url: media.url,
-			id: media.id,
-			alt: media?.alt,
-			backgroundType: mediaType,
-			focalPoint: undefined,
-			...( mediaType === VIDEO_BACKGROUND_TYPE
-				? { hasParallax: undefined }
-				: {} ),
-		} );
+	return {
+		url: media.url || media.src,
+		id: media.id,
+		alt: media?.alt,
+		backgroundType: mediaType,
+		...( mediaType === VIDEO_BACKGROUND_TYPE
+			? { hasParallax: undefined }
+			: {} ),
 	};
 }
 
@@ -105,7 +103,9 @@ export function getPositionClassName( contentPosition ) {
 	/*
 	 * Only render a className if the contentPosition is not center (the default).
 	 */
-	if ( isContentPositionCenter( contentPosition ) ) return '';
+	if ( isContentPositionCenter( contentPosition ) ) {
+		return '';
+	}
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }
diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss
index c121f9cb35bdeb..15ca9bcc5105ee 100644
--- a/packages/block-library/src/cover/style.native.scss
+++ b/packages/block-library/src/cover/style.native.scss
@@ -207,3 +207,14 @@
 .mediaPlaceholderEmptyStateContainer {
 	height: 300;
 }
+
+.selectedColorText {
+	font-family: $default-monospace-font;
+	color: $light-primary;
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.selectedColorTextDark {
+	color: $dark-primary;
+}
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 95fab91763886e..dd2dfa0578c66d 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,12 +1,17 @@
 .wp-block-cover-image,
 .wp-block-cover {
+	min-height: 430px;
+	padding: 1em;
 	position: relative;
 	background-position: center center;
-	min-height: 430px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 1em;
+	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
+	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
+	// Use clip instead of overflow: hidden so that sticky position works on child elements.
+	overflow: clip;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
@@ -49,7 +54,6 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		z-index: z-index(".wp-block-cover.has-background-dim::before");
 		opacity: 0.5;
 	}
 
@@ -82,20 +86,6 @@
 		width: 100%;
 	}
 
-	// Using flexbox without an assigned height property breaks vertical center alignment in IE11.
-	// Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
-	&::after {
-		display: block;
-		content: "";
-		font-size: 0;
-		min-height: inherit;
-
-		// IE doesn't support flex so omit that.
-		@supports (position: sticky) {
-			content: none;
-		}
-	}
-
 	// Aligned cover blocks should not use our global alignment rules
 	&.aligncenter,
 	&.alignleft,
@@ -104,31 +94,13 @@
 	}
 
 	.wp-block-cover__inner-container {
+		position: relative; // Needed for the inner container to be positioned above other elements with absolute positioning.
 		width: 100%;
-		z-index: z-index(".wp-block-cover__inner-container");
-		color: $white;
+		color: inherit;
 		// Reset the fixed LTR direction at the root of the block in RTL languages.
 		/*rtl:raw: direction: rtl; */
 	}
 
-	&.is-light {
-		.wp-block-cover__inner-container {
-			color: $black;
-		}
-	}
-
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		&:not(.has-text-color) {
-			color: inherit;
-		}
-	}
-
 	// Position: Top
 	&.is-position-top-left {
 		align-items: flex-start;
@@ -172,8 +144,19 @@
 	&.has-custom-content-position.has-custom-content-position {
 		.wp-block-cover__inner-container {
 			margin: 0;
-			width: auto;
 		}
+		&.is-position-top-left,
+		&.is-position-top-right,
+		&.is-position-center-left,
+		&.is-position-center-right,
+		&.is-position-bottom-left,
+		&.is-position-bottom-right {
+			.wp-block-cover__inner-container {
+				margin: 0;
+				width: auto;
+			}
+		}
+
 	}
 
 	// Extra specificity for in edit mode where other styles would override it otherwise.
@@ -209,7 +192,7 @@ video.wp-block-cover__video-background {
 		// Mobile Safari does not support fixed background attachment properly.
 		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
 		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-overflow-scrolling: touch) {
+		@supports (-webkit-touch-callout: inherit) {
 			background-attachment: scroll;
 		}
 
@@ -225,14 +208,6 @@ video.wp-block-cover__video-background {
 	}
 }
 
-.wp-block-cover__video-background {
-	z-index: z-index(".wp-block-cover__video-background");
-}
-
-.wp-block-cover__image-background {
-	z-index: z-index(".wp-block-cover__image-background");
-}
-
 // Styles below only exist to support older versions of the block.
 // Versions that not had inner blocks and used an h2 heading had a section (and not a div) with a class wp-block-cover-image (and not a wp-block-cover).
 // We are using the previous referred differences to target old versions.
@@ -285,3 +260,69 @@ section.wp-block-cover-image > h2,
 	padding: 0.44em;
 	text-align: center;
 }
+
+// If Cover block's text color has not been set adjust default color
+// based on if overlay is light or not. The following styles leverage
+// `:where` to allow for generic global styles that have a low specificity to
+// still take precedence.
+
+:where(.wp-block-cover:not(.has-text-color)),
+:where(.wp-block-cover-image:not(.has-text-color)) {
+	color: $white;
+}
+
+:where(.wp-block-cover.is-light:not(.has-text-color)),
+:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
+	color: $black;
+}
+
+:root {
+	:where(.wp-block-cover p:not(.has-text-color)),
+	:where(.wp-block-cover h1:not(.has-text-color)),
+	:where(.wp-block-cover h2:not(.has-text-color)),
+	:where(.wp-block-cover h3:not(.has-text-color)),
+	:where(.wp-block-cover h4:not(.has-text-color)),
+	:where(.wp-block-cover h5:not(.has-text-color)),
+	:where(.wp-block-cover h6:not(.has-text-color)) {
+		color: inherit;
+	}
+}
+
+// Backward compatibility for v14 deprecation. Only applied to the frontend.
+// Regarding the `.wp-block-cover__background + .wp-block-cover__inner-container`
+// selector: When the `.wp-block-cover__inner-container` comes right after the
+// `.wp-block-cover__background` , it means that it's using the new HTML
+// structure or that it's using the color background or gradient (even in
+// the deprecated version). In the color background or gradient option we don't
+// need the z-index because the elements are in the expected order.
+body:not(.editor-styles-wrapper) .wp-block-cover:not(
+.wp-block-cover:has(
+	.wp-block-cover__background + .wp-block-cover__inner-container
+)
+) {
+	.wp-block-cover__video-background {
+		z-index: z-index(".wp-block-cover__video-background");
+	}
+
+	.wp-block-cover__image-background {
+		z-index: z-index(".wp-block-cover__image-background");
+	}
+
+	// The first selector is required for old Cover markup/
+	// Keep .wp-block-cover__gradient-background for v8 deprecation.
+	&.has-background-dim:not(.has-background-gradient)::before,
+	.wp-block-cover__background,
+	.wp-block-cover__gradient-background {
+		z-index: z-index(".wp-block-cover.has-background-dim::before");
+	}
+
+	.wp-block-cover__inner-container {
+		z-index: z-index(".wp-block-cover__inner-container");
+
+		// Reset the z-index to auto when the body has a modal open. So when the
+		// modal is inside the cover, it doesn't create a stacking context.
+		@at-root .has-modal-open & {
+			z-index: auto;
+		}
+	}
+}
diff --git a/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
index 879e5f04bfb02b..6abcd0458752b0 100644
--- a/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/cover/test/__snapshots__/edit.native.js.snap
@@ -1,97 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover {\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"isUserOverlayColor":true,"isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a color for the overlay background when the placeholder is visible 1`] = `
-"<!-- wp:cover {\\"overlayColor\\":\\"vivid-red\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"overlayColor":"vivid-red"} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-vivid-red-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"isUserOverlayColor":true,"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
-<p class=\\"has-text-align-center\\"></p>
+"<!-- wp:cover {"gradient":"light-green-cyan-to-vivid-green-cyan","isDark":false} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings changes the height value between units 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings changes the height value to 20(vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":20,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:20vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Pixels (px) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":50,\\"minHeightUnit\\":\\"px\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:50px\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":50,"minHeightUnit":"px","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:50px"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to parent font size (em) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"em\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1em\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"em","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1em"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Relative to root font size (rem) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"rem\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1rem\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"rem","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1rem"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport height (vh) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vh\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vh\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vh","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vh"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`minimum height settings disables the decrease button when reaching the minimum value for Viewport width (vw) 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":50,\\"overlayColor\\":\\"foreground\\",\\"minHeight\\":1,\\"minHeightUnit\\":\\"vw\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\" style=\\"min-height:1vw\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":1,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:1vw"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`when an image is attached updates background opacity 1`] = `
-"<!-- wp:cover {\\"url\\":\\"https://cldup.com/cXyG__fTLN.jpg\\",\\"id\\":10710,\\"dimRatio\\":15,\\"overlayColor\\":\\"foreground\\",\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim\\"></span><img class=\\"wp-block-cover__image-background wp-image-10710\\" alt=\\"\\" src=\\"https://cldup.com/cXyG__fTLN.jpg\\" data-object-fit=\\"cover\\"/><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-text-align-center has-large-font-size\\"></p>
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":15,"overlayColor":"foreground","isUserOverlayColor":true,"isDark":false} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`when no media is attached and overlay color is set adds image 1`] = `
+"<!-- wp:cover {"url":"https://test.files.wordpress.com/local-image-1.mp4","id":2000,"dimRatio":50,"overlayColor":"cyan-bluish-gray","isUserOverlayColor":true} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-2000" src="https://test.files.wordpress.com/local-image-1.mp4" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
+<p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
diff --git a/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..680c863d6a52a7
--- /dev/null
+++ b/packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cover block transformations with Image to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Image to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Image to Image block 1`] = `
+"<!-- wp:image {"id":890,"style":{"color":{}}} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Cover block transformations with Image to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Cover block transformations with Video to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Cover block transformations with Video to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
+<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
+
+exports[`Cover block transformations with Video to Video block 1`] = `
+"<!-- wp:video {"id":891} -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
+<!-- /wp:video -->"
+`;
diff --git a/packages/block-library/src/cover/test/block-controls.js b/packages/block-library/src/cover/test/block-controls.js
deleted file mode 100644
index ea14dfb38d7b73..00000000000000
--- a/packages/block-library/src/cover/test/block-controls.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent } from '@testing-library/react';
-
-// Need to mock the BlockControls wrapper as this requires a slot to run
-// so can't be easily unit tested.
-jest.mock( '@wordpress/block-editor', () => ( {
-	...jest.requireActual( '@wordpress/block-editor' ),
-	BlockControls: ( { children } ) => <div>{ children }</div>,
-} ) );
-
-/**
- * Internal dependencies
- */
-import CoverBlockControls from '../edit/block-controls';
-
-const setAttributes = jest.fn();
-const onSelectMedia = jest.fn();
-
-const currentSettings = { hasInnerBlocks: true, url: undefined };
-const defaultAttributes = {
-	contentPosition: undefined,
-	id: 1,
-	useFeaturedImage: false,
-	dimRatio: 50,
-	minHeight: 300,
-	minHeightUnit: 'px',
-};
-const defaultProps = {
-	attributes: defaultAttributes,
-	currentSettings,
-	setAttributes,
-	onSelectMedia,
-};
-
-beforeEach( () => {
-	setAttributes.mockClear();
-	onSelectMedia.mockClear();
-} );
-
-describe( 'Cover block controls', () => {
-	describe( 'Full height toggle', () => {
-		test( 'displays toggle full height button toggled off if minHeight not 100vh', () => {
-			render( <CoverBlockControls { ...defaultProps } /> );
-			expect(
-				screen.getByRole( 'button', {
-					pressed: false,
-					name: 'Toggle full height',
-				} )
-			).toBeInTheDocument();
-		} );
-		test( 'sets minHeight attributes to 100vh when clicked', () => {
-			render( <CoverBlockControls { ...defaultProps } /> );
-			fireEvent.click( screen.getByLabelText( 'Toggle full height' ) );
-			expect( setAttributes ).toHaveBeenCalledWith( {
-				minHeight: 100,
-				minHeightUnit: 'vh',
-			} );
-		} );
-	} );
-} );
diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
new file mode 100644
index 00000000000000..f5d6a5301ef6d2
--- /dev/null
+++ b/packages/block-library/src/cover/test/edit.js
@@ -0,0 +1,440 @@
+/**
+ * External dependencies
+ */
+import { screen, fireEvent, act, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import {
+	initializeEditor,
+	selectBlock,
+} from 'test/integration/helpers/integration-test-editor';
+
+const defaultSettings = {
+	__experimentalFeatures: {
+		color: {
+			defaultPalette: true,
+			defaultGradients: true,
+			palette: {
+				default: [
+					{ name: 'Black', slug: 'black', color: '#000000' },
+					{ name: 'White', slug: 'white', color: '#ffffff' },
+				],
+			},
+		},
+	},
+	colors: [ { name: 'Black', slug: 'black', color: '#000000' } ],
+	disableCustomColors: false,
+	disableCustomGradients: false,
+};
+
+const disabledColorSettings = {
+	color: {
+		defaultPalette: false,
+		defaultGradients: false,
+	},
+	disableCustomColors: true,
+	disableCustomGradients: true,
+};
+
+async function setup( attributes, useCoreBlocks, customSettings ) {
+	const testBlock = { name: 'core/cover', attributes };
+	const settings = customSettings || defaultSettings;
+	return initializeEditor( testBlock, useCoreBlocks, settings );
+}
+
+async function createAndSelectBlock() {
+	await userEvent.click(
+		screen.getByRole( 'option', {
+			name: 'Color: Black',
+		} )
+	);
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'Select parent block: Cover',
+		} )
+	);
+}
+
+describe( 'Cover block', () => {
+	describe( 'Editor canvas', () => {
+		test( 'shows placeholder if background image and color not set', async () => {
+			await setup();
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByText(
+					'To edit this block, you need permission to upload media.'
+				)
+			).toBeInTheDocument();
+		} );
+
+		test( 'can set overlay color using color picker on block placeholder', async () => {
+			const { container } = await setup();
+			const colorPicker = screen.getByRole( 'option', {
+				name: 'Color: Black',
+			} );
+			await userEvent.click( colorPicker );
+			const color = colorPicker.style.backgroundColor;
+			expect(
+				screen.queryByRole( 'group', {
+					name: 'To edit this block, you need permission to upload media.',
+				} )
+			).not.toBeInTheDocument();
+
+			// eslint-disable-next-line testing-library/no-node-access
+			const overlay = container.getElementsByClassName(
+				'wp-block-cover__background'
+			);
+			expect( overlay[ 0 ] ).toHaveStyle(
+				`background-color: ${ color }`
+			);
+		} );
+
+		test( 'can have the title edited', async () => {
+			await setup();
+
+			await userEvent.click(
+				screen.getByRole( 'option', {
+					name: 'Color: Black',
+				} )
+			);
+
+			const title = screen.getByLabelText( 'Empty block;', {
+				exact: false,
+			} );
+			await userEvent.click( title );
+			await userEvent.keyboard( 'abc' );
+			expect( title ).toHaveTextContent( 'abc' );
+		} );
+	} );
+
+	describe( 'Block toolbar', () => {
+		test( 'full height toggle sets minHeight style attribute to 100vh when clicked', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveStyle(
+				'min-height: 100vh;'
+			);
+
+			await userEvent.click( screen.getByLabelText( 'Full height' ) );
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+				'min-height: 100vh;'
+			);
+		} );
+
+		test( 'content position button sets content position', async () => {
+			await setup();
+			await createAndSelectBlock();
+
+			await userEvent.click(
+				screen.getByLabelText( 'Change content position' )
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-custom-content-position'
+			);
+
+			await act( async () =>
+				within( screen.getByRole( 'grid' ) )
+					.getByRole( 'gridcell', {
+						name: 'top left',
+					} )
+					.focus()
+			);
+
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-custom-content-position'
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-position-top-left'
+			);
+		} );
+
+		test( 'clears media when clear media button clicked', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toBeInTheDocument();
+
+			await userEvent.click(
+				screen.getByRole( 'button', { name: 'Replace' } )
+			);
+			await userEvent.click(
+				screen.getByRole( 'menuitem', {
+					name: 'Reset',
+				} )
+			);
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
+					'img'
+				)
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Inspector controls', () => {
+		describe( 'Media settings', () => {
+			test( 'does not display media settings panel if url is not set', async () => {
+				await setup();
+				expect(
+					screen.queryByRole( 'heading', {
+						name: 'Settings',
+					} )
+				).not.toBeInTheDocument();
+			} );
+			test( 'displays media settings panel if url is set', async () => {
+				await setup( {
+					url: 'http://localhost/my-image.jpg',
+				} );
+
+				await selectBlock( 'Block: Cover' );
+				expect(
+					screen.getByRole( 'heading', {
+						name: 'Settings',
+					} )
+				).toBeInTheDocument();
+			} );
+		} );
+
+		test( 'sets hasParallax attribute to true if fixed background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'has-parallax'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Fixed background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'has-parallax'
+			);
+		} );
+
+		test( 'sets isRepeated attribute to true if repeated background toggled', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+			expect( screen.getByLabelText( 'Block: Cover' ) ).not.toHaveClass(
+				'is-repeated'
+			);
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByLabelText( 'Repeated background' )
+			);
+			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
+				'is-repeated'
+			);
+		} );
+
+		test( 'sets left focalPoint attribute when focal point values changed', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toHaveStyle( 'object-position: 100% 50%;' );
+		} );
+
+		test( 'sets alt attribute if text entered in alt text box', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.type(
+				screen.getByLabelText( 'Alternative text' ),
+				'Me'
+			);
+			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
+		} );
+
+		describe( 'Color panel', () => {
+			test( 'applies selected opacity to block when number control value changed', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+				// Need act here as the isDark method is async.
+				// eslint-disable-next-line testing-library/no-unnecessary-act
+				await act( async () => {
+					fireEvent.change(
+						screen.getByRole( 'spinbutton', {
+							name: 'Overlay opacity',
+						} ),
+						{
+							target: { value: '40' },
+						}
+					);
+				} );
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-40' );
+			} );
+
+			test( 'applies selected opacity to block when slider moved', async () => {
+				const { container } = await setup();
+
+				await createAndSelectBlock();
+
+				// eslint-disable-next-line testing-library/no-node-access
+				const overlay = container.getElementsByClassName(
+					'wp-block-cover__background'
+				);
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
+
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+
+				// Need act here as the isDark method is async.
+				// eslint-disable-next-line testing-library/no-unnecessary-act
+				await act( async () => {
+					fireEvent.change(
+						screen.getByRole( 'slider', {
+							name: 'Overlay opacity',
+						} ),
+						{ target: { value: 30 } }
+					);
+				} );
+
+				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
+			} );
+
+			describe( 'when colors are disabled', () => {
+				test( 'does not render overlay control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await selectBlock( 'Block: Cover' );
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const overlayControl = screen.queryByRole( 'button', {
+						name: 'Overlay',
+					} );
+
+					expect( overlayControl ).not.toBeInTheDocument();
+				} );
+				test( 'does not render opacity control', async () => {
+					await setup( undefined, true, disabledColorSettings );
+					await selectBlock( 'Block: Cover' );
+					await userEvent.click(
+						screen.getByRole( 'tab', { name: 'Styles' } )
+					);
+
+					const opacityControl = screen.queryByRole( 'slider', {
+						name: 'Overlay opacity',
+					} );
+
+					expect( opacityControl ).not.toBeInTheDocument();
+				} );
+			} );
+		} );
+
+		describe( 'Dimensions panel', () => {
+			test( 'sets minHeight attribute when number control value changed', async () => {
+				await setup();
+				await createAndSelectBlock();
+				await userEvent.click(
+					screen.getByRole( 'tab', {
+						name: 'Styles',
+					} )
+				);
+				await userEvent.clear(
+					screen.getByLabelText( 'Minimum height' )
+				);
+				await userEvent.type(
+					screen.getByLabelText( 'Minimum height' ),
+					'300'
+				);
+
+				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
+					'min-height: 300px;'
+				);
+			} );
+		} );
+	} );
+
+	describe( 'isDark settings', () => {
+		test( 'should toggle is-light class if background changed from light to dark', async () => {
+			await setup();
+			const colorPicker = screen.getByRole( 'option', {
+				name: 'Color: White',
+			} );
+			await userEvent.click( colorPicker );
+
+			const coverBlock = screen.getByLabelText( 'Block: Cover' );
+
+			expect( coverBlock ).toHaveClass( 'is-light' );
+
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByRole( 'tab', {
+					name: 'Styles',
+				} )
+			);
+			await userEvent.click( screen.getByText( 'Overlay' ) );
+			const popupColorPicker = screen.getByRole( 'option', {
+				name: 'Color: Black',
+			} );
+			await userEvent.click( popupColorPicker );
+			expect( coverBlock ).not.toHaveClass( 'is-light' );
+		} );
+		test( 'should remove is-light class if overlay color is removed', async () => {
+			await setup();
+			const colorPicker = screen.getByRole( 'option', {
+				name: 'Color: White',
+			} );
+			await userEvent.click( colorPicker );
+			const coverBlock = screen.getByLabelText( 'Block: Cover' );
+			expect( coverBlock ).toHaveClass( 'is-light' );
+			await selectBlock( 'Block: Cover' );
+			await userEvent.click(
+				screen.getByRole( 'tab', {
+					name: 'Styles',
+				} )
+			);
+			await userEvent.click( screen.getByText( 'Overlay' ) );
+			// The default color is black, so clicking the black color option will remove the background color,
+			// which should remove the isDark setting and assign the is-light class.
+			const popupColorPicker = screen.getByRole( 'option', {
+				name: 'Color: White',
+			} );
+			await userEvent.click( popupColorPicker );
+			expect( coverBlock ).not.toHaveClass( 'is-light' );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js
index 10dbff032160a9..1b8a7133926d9d 100644
--- a/packages/block-library/src/cover/test/edit.native.js
+++ b/packages/block-library/src/cover/test/edit.native.js
@@ -1,16 +1,18 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Image } from 'react-native';
+import { Image } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
 	render,
 	fireEvent,
-	waitFor,
+	waitForModalVisible,
 	within,
 	getBlock,
 	openBlockSettings,
+	setupMediaPicker,
+	setupPicker,
 } from 'test/helpers';
 
 /**
@@ -51,13 +53,13 @@ const COVER_BLOCK_SOLID_COLOR_HTML = `<!-- wp:cover {"overlayColor":"cyan-bluish
 <p class="has-text-align-center"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->`;
-const COVER_BLOCK_IMAGE_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isDark":false} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+const COVER_BLOCK_IMAGE_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"isDark":false} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->`;
-const COVER_BLOCK_CUSTOM_HEIGHT_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","minHeight":20,"minHeightUnit":"vw","isDark":false} -->
-<div class="wp-block-cover is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+const COVER_BLOCK_CUSTOM_HEIGHT_HTML = `<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":10710,"dimRatio":50,"overlayColor":"foreground","isUserOverlayColor":true,"minHeight":20,"minHeightUnit":"vw","isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:20vw"><img class="wp-block-cover__image-background wp-image-10710" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->`;
@@ -68,10 +70,23 @@ const COLOR_GRAY = '#abb8c3';
 const GRADIENT_GREEN =
 	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'Take a Video',
+	'WordPress Media Library',
+];
+
 // Simplified tree to render Cover edit within slot.
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
-		<BlockEdit isSelected name={ cover.name } clientId={ 0 } { ...props } />
+		<BlockEdit
+			isSelected
+			mayDisplayControls
+			name={ cover.name }
+			clientId={ 0 }
+			{ ...props }
+		/>
 		<BottomSheetSettings isVisible />
 	</SlotFillProvider>
 );
@@ -90,10 +105,6 @@ beforeAll( () => {
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
-	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
-		Promise.resolve( true )
-	);
-
 	// Register required blocks.
 	paragraph.init();
 	cover.init();
@@ -103,7 +114,6 @@ beforeAll( () => {
 afterAll( () => {
 	// Restore mocks.
 	Image.getSize.mockRestore();
-	AccessibilityInfo.isScreenReaderEnabled.mockReset();
 
 	// Clean up registered blocks.
 	unregisterBlockType( paragraph.name );
@@ -132,34 +142,63 @@ describe( 'when no media is attached', () => {
 	} );
 } );
 
+describe( 'when no media is attached and overlay color is set', () => {
+	it( 'adds image', async () => {
+		const media = {
+			type: 'image',
+			id: 2000,
+			url: 'https://test.files.wordpress.com/local-image-1.mp4',
+		};
+		const { mediaPickerCallback } = setupMediaPicker();
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+		const { getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		fireEvent.press( getByText( 'Add image or video' ) );
+		selectOption( 'WordPress Media Library' );
+		await mediaPickerCallback( media );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
+
 describe( 'when an image is attached', () => {
 	it( 'edits the image', async () => {
-		const { getByLabelText, getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
 
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const editButton = await waitFor( () => getByText( 'Edit' ) );
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const editButton = await screen.findByText( 'Edit' );
 		fireEvent.press( editButton );
 
 		expect( requestMediaEditor ).toHaveBeenCalled();
 	} );
 
 	it( 'replaces the image', async () => {
-		const { getByLabelText, getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const replaceButton = await waitFor( () => getByText( 'Replace' ) );
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const replaceButton = await screen.findByText( 'Replace' );
 		fireEvent.press( replaceButton );
-		const mediaLibraryButton = await waitFor( () =>
-			getByText( 'WordPress Media Library' )
+		const mediaLibraryButton = await screen.findByText(
+			'WordPress Media Library'
 		);
 		fireEvent.press( mediaLibraryButton );
 
@@ -167,17 +206,16 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'clears the image within image edit button', async () => {
-		const { getByLabelText, getAllByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Edit image' ) );
-		const clearMediaButton = await waitFor( () =>
-			getAllByText( 'Clear Media' )
-		);
-		fireEvent.press( clearMediaButton[ 0 ] );
+		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
+		const [ clearMediaButton ] =
+			await screen.findAllByText( 'Clear Media' );
+		fireEvent.press( clearMediaButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -190,15 +228,14 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'toggles a fixed background', async () => {
-		const { getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const fixedBackgroundButton = await waitFor( () =>
-			getByText( 'Fixed background' )
-		);
+		const fixedBackgroundButton =
+			await screen.findByText( 'Fixed background' );
 		fireEvent.press( fixedBackgroundButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
@@ -209,22 +246,25 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'edits the focal point with a slider', async () => {
-		const { getByText, getByLabelText, getByTestId } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent(
-			getByTestId( 'Slider Y-Axis Position' ),
+			screen.getByTestId( 'Slider Y-Axis Position', { hidden: true } ),
 			'valueChange',
 			'52'
 		);
-		fireEvent.press( getByLabelText( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nFocalPoint > params.onFocalPointChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -234,21 +274,25 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'edits the focal point with a text input', async () => {
-		const { getByText, getByLabelText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
+		);
+		fireEvent.changeText(
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
+			'99'
 		);
-		fireEvent.changeText( getByLabelText( 'X-Axis Position' ), '99' );
-		fireEvent.press( getByLabelText( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -258,21 +302,25 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'discards canceled focal point changes', async () => {
-		const { getByText, getByLabelText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
 		);
-		fireEvent.changeText( getByLabelText( 'X-Axis Position' ), '80' );
-		fireEvent.press( getByLabelText( 'Go back' ) );
+		fireEvent.changeText(
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
+			'80'
+		);
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
 
 		expect( setAttributes ).not.toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -282,15 +330,13 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'clears the media within cell button', async () => {
-		const { getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const clearMediaButton = await waitFor( () =>
-			getByText( 'Clear Media' )
-		);
+		const clearMediaButton = await screen.findByText( 'Clear Media' );
 		fireEvent.press( clearMediaButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
@@ -318,9 +364,13 @@ describe( 'when an image is attached', () => {
 
 		// Update Opacity attribute
 		const opacityControl = getByLabelText( /Opacity/ );
-		fireEvent.press( within( opacityControl ).getByText( '50' ) );
-		const heightTextInput =
-			within( opacityControl ).getByDisplayValue( '50' );
+		fireEvent.press(
+			within( opacityControl ).getByText( '50', { hidden: true } )
+		);
+		const heightTextInput = within( opacityControl ).getByDisplayValue(
+			'50',
+			{ hidden: true }
+		);
 		fireEvent.changeText( heightTextInput, '20' );
 
 		// The decreasing button should be disabled
@@ -334,97 +384,81 @@ describe( 'when an image is attached', () => {
 
 describe( 'color settings', () => {
 	it( 'sets a color for the overlay background when the placeholder is visible', async () => {
-		const { getByTestId, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
-		const block = await waitFor( () =>
-			getByLabelText( 'Cover block. Empty' )
-		);
+		const block = await screen.findByLabelText( 'Cover block. Empty' );
 		expect( block ).toBeDefined();
 
 		// Select a color from the placeholder palette.
-		const colorPalette = await waitFor( () =>
-			getByTestId( 'color-palette' )
-		);
+		const colorPalette = await screen.findByTestId( 'color-palette' );
 		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
 
 		expect( colorButton ).toBeDefined();
 		fireEvent.press( colorButton );
 
 		// Wait for the block to be created.
-		const coverBlockWithOverlay = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
-		);
+		const [ coverBlockWithOverlay ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		expect( colorOverlay ).toBeDefined();
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorPaletteButton = await waitFor( () =>
-			getByTestId( COLOR_PINK )
-		);
+		const colorPaletteButton = await screen.findByTestId( COLOR_PINK );
 		expect( colorPaletteButton ).toBeDefined();
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		// Select another color.
-		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		const newColorButton = await screen.findByTestId( COLOR_RED );
 		fireEvent.press( newColorButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'sets a gradient overlay background when a solid background was already selected', async () => {
-		const { getByTestId, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );
 
 		// Wait for the block to be created.
-		const coverBlock = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
-		);
-		expect( coverBlock ).toBeDefined();
+		const [ coverBlock ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		const colorButton = await screen.findByTestId( COLOR_GRAY );
 		expect( colorButton ).toBeDefined();
 
 		// Open the gradients.
-		const gradientsButton = await waitFor( () =>
-			getByLabelText( 'Gradient' )
-		);
+		const gradientsButton = await screen.findByLabelText( 'Gradient' );
 		expect( gradientsButton ).toBeDefined();
 
 		fireEvent( gradientsButton, 'layout', {
@@ -433,10 +467,7 @@ describe( 'color settings', () => {
 		fireEvent.press( gradientsButton );
 
 		// Find the gradient color.
-		const newGradientButton = await waitFor( () =>
-			getByTestId( GRADIENT_GREEN )
-		);
-		expect( newGradientButton ).toBeDefined();
+		const newGradientButton = await screen.findByTestId( GRADIENT_GREEN );
 		fireEvent.press( newGradientButton );
 
 		// Dismiss the Block Settings modal.
@@ -446,62 +477,47 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'toggles between solid colors and gradients', async () => {
-		const { getByTestId, getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
-		const block = await waitFor( () =>
-			getByLabelText( 'Cover block. Empty' )
-		);
+		const block = await screen.findByLabelText( 'Cover block. Empty' );
 		expect( block ).toBeDefined();
 
 		// Select a color from the placeholder palette.
-		const colorPalette = await waitFor( () =>
-			getByTestId( 'color-palette' )
-		);
+		const colorPalette = await screen.findByTestId( 'color-palette' );
 		const colorButton = within( colorPalette ).getByTestId( COLOR_PINK );
 
 		expect( colorButton ).toBeDefined();
 		fireEvent.press( colorButton );
 
 		// Wait for the block to be created.
-		const coverBlockWithOverlay = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
-		);
+		const [ coverBlockWithOverlay ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorPaletteButton = await waitFor( () =>
-			getByTestId( COLOR_PINK )
-		);
+		const colorPaletteButton = await screen.findByTestId( COLOR_PINK );
 		expect( colorPaletteButton ).toBeDefined();
 
 		// Select another color.
-		const newColorButton = await waitFor( () => getByTestId( COLOR_RED ) );
+		const newColorButton = await screen.findByTestId( COLOR_RED );
 		fireEvent.press( newColorButton );
 
 		// Open the gradients.
-		const gradientsButton = await waitFor( () =>
-			getByLabelText( 'Gradient' )
-		);
-		expect( gradientsButton ).toBeDefined();
+		const gradientsButton = await screen.findByLabelText( 'Gradient' );
 
 		fireEvent( gradientsButton, 'layout', {
 			nativeEvent: { layout: { width: 80, height: 26 } },
@@ -509,20 +525,14 @@ describe( 'color settings', () => {
 		fireEvent.press( gradientsButton );
 
 		// Find the gradient color.
-		const newGradientButton = await waitFor( () =>
-			getByTestId( GRADIENT_GREEN )
-		);
-		expect( newGradientButton ).toBeDefined();
+		const newGradientButton = await screen.findByTestId( GRADIENT_GREEN );
 		fireEvent.press( newGradientButton );
 
 		// Go back to the settings list.
-		fireEvent.press( await waitFor( () => getByLabelText( 'Go back' ) ) );
+		fireEvent.press( await screen.findByLabelText( 'Go back' ) );
 
 		// Find the color setting.
-		const colorSetting = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorSetting ).toBeDefined();
+		const colorSetting = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorSetting );
 
 		// Dismiss the Block Settings modal.
@@ -532,46 +542,67 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const { getByTestId, getByLabelText, getByText } =
-			await initializeEditor( {
-				initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
 
 		// Wait for the block to be created.
-		const coverBlock = await waitFor( () =>
-			getByLabelText( /Cover Block\. Row 1/ )
-		);
-		expect( coverBlock ).toBeDefined();
+		const [ coverBlock ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
-		const settingsButton = await waitFor( () =>
-			getByLabelText( 'Open Settings' )
-		);
+		const settingsButton = await screen.findByLabelText( 'Open Settings' );
 		fireEvent.press( settingsButton );
 
 		// Wait for Block Settings to be visible.
-		const blockSettingsModal = getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
-		const colorOverlay = await waitFor( () =>
-			getByLabelText( 'Color. Empty' )
-		);
-		expect( colorOverlay ).toBeDefined();
+		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
 		fireEvent.press( colorOverlay );
 
 		// Find the selected color.
-		const colorButton = await waitFor( () => getByTestId( COLOR_GRAY ) );
+		const colorButton = await screen.findByTestId( COLOR_GRAY );
 		expect( colorButton ).toBeDefined();
 
 		// Reset the selected color.
-		const resetButton = await waitFor( () => getByText( 'Reset' ) );
-		expect( resetButton ).toBeDefined();
+		const resetButton = await screen.findByText( 'Reset' );
 		fireEvent.press( resetButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'displays the hex color value in the custom color picker', async () => {
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		// Select a color from the placeholder palette.
+		const colorButton = screen.getByA11yHint(
+			'Navigates to custom color picker'
+		);
+		fireEvent.press( colorButton );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Assert label text before tapping color picker
+		expect( screen.getByText( 'Select a color' ) ).toBeVisible();
+
+		// Tap color picker
+		const colorPicker = screen.getByTestId( 'hsv-color-picker' );
+		fireEvent( colorPicker, 'onHuePickerPress', {
+			hue: 120,
+			saturation: 12,
+			value: 50,
+		} );
+
+		// Assert label hex value after tapping color picker
+		expect( screen.getByText( '#00FF00' ) ).toBeVisible();
+	} );
 } );
 
 describe( 'minimum height settings', () => {
@@ -589,12 +620,12 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set vw unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport width (vw)' ) );
+		fireEvent.press( getByText( 'px', { hidden: true } ) );
+		fireEvent.press( getByText( 'Viewport width (vw)', { hidden: true } ) );
 
 		// Update height attribute
-		fireEvent.press( getByText( '300' ) );
-		const heightTextInput = getByDisplayValue( '300' );
+		fireEvent.press( getByText( '300', { hidden: true } ) );
+		const heightTextInput = getByDisplayValue( '300', { hidden: true } );
 		fireEvent.changeText( heightTextInput, '20' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -614,8 +645,8 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set the pixel unit
-		fireEvent.press( getByText( 'vw' ) );
-		fireEvent.press( getByText( 'Pixels (px)' ) );
+		fireEvent.press( getByText( 'vw', { hidden: true } ) );
+		fireEvent.press( getByText( 'Pixels (px)', { hidden: true } ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
@@ -645,14 +676,17 @@ describe( 'minimum height settings', () => {
 				await openBlockSettings( screen );
 
 				// Set the unit name
-				fireEvent.press( getByText( 'vw' ) );
-				fireEvent.press( getByText( unitName ) );
+				fireEvent.press( getByText( 'vw', { hidden: true } ) );
+				fireEvent.press( getByText( unitName, { hidden: true } ) );
 
 				// Update height attribute
 				const heightControl = getByLabelText( /Minimum height/ );
-				fireEvent.press( within( heightControl ).getByText( value ) );
-				const heightTextInput =
-					within( heightControl ).getByDisplayValue( value );
+				fireEvent.press(
+					within( heightControl ).getByText( value, { hidden: true } )
+				);
+				const heightTextInput = within(
+					heightControl
+				).getByDisplayValue( value, { hidden: true } );
 				fireEvent.changeText( heightTextInput, minValue );
 
 				// The decreasing button should be disabled
diff --git a/packages/block-library/src/cover/test/transforms.native.js b/packages/block-library/src/cover/test/transforms.native.js
new file mode 100644
index 00000000000000..4232570eb0779f
--- /dev/null
+++ b/packages/block-library/src/cover/test/transforms.native.js
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Cover';
+const initialHtmlWithImage = `
+<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+const initialHtmlWithVideo = `
+<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":891,"dimRatio":20,"overlayColor":"luminous-vivid-orange","isUserOverlayColor":true,"backgroundType":"video","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219,"isDark":false} -->
+<div class="wp-block-cover is-light" style="min-height:219px"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"></video><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransformsWithImage = [
+	'Image',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+const blockTransformsWithVideo = [
+	'Video',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	describe( 'with Image', () => {
+		test.each( blockTransformsWithImage )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithImage,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithImage,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithImage.length
+			);
+		} );
+	} );
+
+	describe( 'with Video', () => {
+		test.each( blockTransformsWithVideo )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithVideo,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithVideo,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithVideo.length
+			);
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
index ce02e91518b4ec..c9526c025ba9ba 100644
--- a/packages/block-library/src/cover/transforms.js
+++ b/packages/block-library/src/cover/transforms.js
@@ -2,12 +2,15 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
-import cleanEmptyObject from '../utils/clean-empty-object';
+import { unlock } from '../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 const transforms = {
 	from: [
diff --git a/packages/block-library/src/cover/variations.js b/packages/block-library/src/cover/variations.js
new file mode 100644
index 00000000000000..3d580af4c0ce43
--- /dev/null
+++ b/packages/block-library/src/cover/variations.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cover } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'cover',
+		title: __( 'Cover' ),
+		description: __( 'Add an image or video with a text overlay.' ),
+		attributes: { layout: { type: 'constrained' } },
+		isDefault: true,
+		icon: cover,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
new file mode 100644
index 00000000000000..0cd0040cdde1b9
--- /dev/null
+++ b/packages/block-library/src/details/block.json
@@ -0,0 +1,70 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/details",
+	"title": "Details",
+	"category": "text",
+	"description": "Hide and show additional content.",
+	"keywords": [ "accordion", "summary", "toggle", "disclosure" ],
+	"textdomain": "default",
+	"attributes": {
+		"showContent": {
+			"type": "boolean",
+			"default": false
+		},
+		"summary": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "summary"
+		}
+	},
+	"supports": {
+		"__experimentalOnEnter": true,
+		"align": [ "wide", "full" ],
+		"anchor": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"layout": {
+			"allowEditing": false
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"editorStyle": "wp-block-details-editor",
+	"style": "wp-block-details"
+}
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
new file mode 100644
index 00000000000000..314556ba6d5919
--- /dev/null
+++ b/packages/block-library/src/details/edit.js
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __( 'Type / to add a hidden block' ),
+		},
+	],
+];
+
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
+	const { showContent, summary } = attributes;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		__experimentalCaptureToolbars: true,
+	} );
+
+	// Check if either the block or the inner blocks are selected.
+	const hasSelection = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			/* Sets deep to true to also find blocks inside the details content block. */
+			return (
+				hasSelectedInnerBlock( clientId, true ) ||
+				isBlockSelected( clientId )
+			);
+		},
+		[ clientId ]
+	);
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Open by default' ) }
+						checked={ showContent }
+						onChange={ () =>
+							setAttributes( {
+								showContent: ! showContent,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<details
+				{ ...innerBlocksProps }
+				open={ hasSelection || showContent }
+			>
+				<summary onClick={ ( event ) => event.preventDefault() }>
+					<RichText
+						identifier="summary"
+						aria-label={ __( 'Write summary' ) }
+						placeholder={ __( 'Write summary…' ) }
+						allowedFormats={ [] }
+						withoutInteractiveFormatting
+						value={ summary }
+						onChange={ ( newSummary ) =>
+							setAttributes( { summary: newSummary } )
+						}
+					/>
+				</summary>
+				{ innerBlocksProps.children }
+			</details>
+		</>
+	);
+}
+
+export default DetailsEdit;
diff --git a/packages/block-library/src/details/editor.scss b/packages/block-library/src/details/editor.scss
new file mode 100644
index 00000000000000..76c676974d4d03
--- /dev/null
+++ b/packages/block-library/src/details/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-details summary div {
+	display: inline;
+}
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
new file mode 100644
index 00000000000000..31ee2e0e00f139
--- /dev/null
+++ b/packages/block-library/src/details/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { details as icon } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+import transforms from './transforms';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	example: {
+		attributes: {
+			summary: 'La Mancha',
+			showContent: true,
+		},
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
+				},
+			},
+		],
+	},
+	__experimentalLabel( attributes, { context } ) {
+		const { summary } = attributes;
+
+		const customName = attributes?.metadata?.name;
+		const hasSummary = summary?.trim().length > 0;
+
+		// In the list view, use the block's summary as the label.
+		// If the summary is empty, fall back to the default label.
+		if ( context === 'list-view' && ( customName || hasSummary ) ) {
+			return customName || summary;
+		}
+
+		if ( context === 'accessibility' ) {
+			return ! hasSummary
+				? __( 'Details. Empty.' )
+				: sprintf(
+						/* translators: accessibility text; summary title. */
+						__( 'Details. %s' ),
+						summary
+				  );
+		}
+	},
+	save,
+	edit,
+	transforms,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details/init.js b/packages/block-library/src/details/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/details/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
new file mode 100644
index 00000000000000..0df5f63ce9410d
--- /dev/null
+++ b/packages/block-library/src/details/save.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { showContent } = attributes;
+	const summary = attributes.summary ? attributes.summary : 'Details';
+	const blockProps = useBlockProps.save();
+
+	return (
+		<details { ...blockProps } open={ showContent }>
+			<summary>
+				<RichText.Content value={ summary } />
+			</summary>
+			<InnerBlocks.Content />
+		</details>
+	);
+}
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
new file mode 100644
index 00000000000000..94b7043952c78a
--- /dev/null
+++ b/packages/block-library/src/details/style.scss
@@ -0,0 +1,7 @@
+.wp-block-details {
+	box-sizing: border-box;
+}
+
+.wp-block-details summary {
+	cursor: pointer;
+}
diff --git a/packages/block-library/src/details/transforms.js b/packages/block-library/src/details/transforms.js
new file mode 100644
index 00000000000000..e8a30dbe34759c
--- /dev/null
+++ b/packages/block-library/src/details/transforms.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, cloneBlock } from '@wordpress/blocks';
+
+export default {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			isMatch( {}, blocks ) {
+				return ! (
+					blocks.length === 1 && blocks[ 0 ].name === 'core/details'
+				);
+			},
+			__experimentalConvert( blocks ) {
+				return createBlock(
+					'core/details',
+					{},
+					blocks.map( ( block ) => cloneBlock( block ) )
+				);
+			},
+		},
+	],
+};
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index edb66416af88c5..a16d5a6c2c69c7 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,7 +1,6 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./avatar/editor.scss";
-@import "./block/editor.scss";
 @import "./button/editor.scss";
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
@@ -13,8 +12,11 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
+@import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
+@import "./form-input/editor.scss";
+@import "./form-submission-notification/editor.scss";
 @import "./freeform/editor.scss";
 @import "./gallery/editor.scss";
 @import "./group/editor.scss";
@@ -29,6 +31,7 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
+@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
@@ -42,6 +45,7 @@
 @import "./social-links/editor.scss";
 @import "./spacer/editor.scss";
 @import "./table/editor.scss";
+@import "./tag-cloud/editor.scss";
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
@@ -51,7 +55,6 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
-
 @import "./editor-elements.scss";
 
 :root .editor-styles-wrapper {
@@ -60,36 +63,26 @@
 	@include gradient-colors-deprecated();
 }
 
-// This CSS Custom Properties aren't used anymore as defaults,
-// but we still need to keep them for backward compatibility.
-.editor-styles-wrapper {
-	--wp--preset--font-size--normal: 16px;
-	--wp--preset--font-size--huge: 42px;
-}
-
 // Font sizes (not used now, kept because of backward compatibility).
 //
 // The reason we add the editor class wrapper here is
 // to avoid enqueing the classes twice: here and in ./editor.scss
-.editor-styles-wrapper .has-regular-font-size {
+:where(.editor-styles-wrapper) .has-regular-font-size {
 	font-size: 16px;
 }
 
-.editor-styles-wrapper .has-larger-font-size {
+:where(.editor-styles-wrapper) .has-larger-font-size {
 	font-size: 42px;
 }
 
-.editor-styles-wrapper .has-normal-font-size {
-	font-size: var(--wp--preset--font-size--normal);
-}
-
-.editor-styles-wrapper .has-huge-font-size {
-	font-size: var(--wp--preset--font-size--huge);
-}
-
 /**
  * Editor Normalization Styles
  *
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
+
+// Remove the browser default border for iframe in Custom HTML block, Embed block, etc.
+:where(.editor-styles-wrapper) iframe:not([frameborder]) {
+	border: 0;
+}
diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
index e36768cd727807..5bfb63b0fa9e94 100644
--- a/packages/block-library/src/embed/block.json
+++ b/packages/block-library/src/embed/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/embed",
 	"title": "Embed",
 	"category": "embed",
@@ -9,21 +9,21 @@
 	"attributes": {
 		"url": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"providerNameSlug": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"allowResponsive": {
 			"type": "boolean",
@@ -32,16 +32,22 @@
 		"responsive": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"previewable": {
 			"type": "boolean",
 			"default": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"
diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js
index afa691ecb64e2c..2b55a87a0015b5 100644
--- a/packages/block-library/src/embed/deprecated.js
+++ b/packages/block-library/src/embed/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -26,7 +26,7 @@ const v2 = {
 			return null;
 		}
 
-		const className = classnames( 'wp-block-embed', {
+		const className = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
@@ -52,7 +52,7 @@ const v1 = {
 			return null;
 		}
 
-		const embedClassName = classnames( 'wp-block-embed', {
+		const embedClassName = clsx( 'wp-block-embed', {
 			[ `is-type-${ type }` ]: type,
 			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		} );
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index c3e664385809c1..c0a10a20e31fc4 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -17,7 +18,7 @@ import EmbedPreview from './embed-preview';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,6 +29,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
+import { Caption } from '../utils/caption';
 
 const EmbedEdit = ( props ) => {
 	const {
@@ -56,59 +59,63 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
-		useSelect(
-			( select ) => {
-				const {
-					getEmbedPreview,
-					isPreviewEmbedFallback,
-					isRequestingEmbedPreview,
-					getThemeSupports,
-				} = select( coreStore );
-				if ( ! attributesUrl ) {
-					return { fetching: false, cannotEmbed: false };
-				}
+	const {
+		preview,
+		fetching,
+		themeSupportsResponsive,
+		cannotEmbed,
+		hasResolved,
+	} = useSelect(
+		( select ) => {
+			const {
+				getEmbedPreview,
+				isPreviewEmbedFallback,
+				isRequestingEmbedPreview,
+				getThemeSupports,
+				hasFinishedResolution,
+			} = select( coreStore );
+			if ( ! attributesUrl ) {
+				return { fetching: false, cannotEmbed: false };
+			}
 
-				const embedPreview = getEmbedPreview( attributesUrl );
-				const previewIsFallback =
-					isPreviewEmbedFallback( attributesUrl );
-
-				// The external oEmbed provider does not exist. We got no type info and no html.
-				const badEmbedProvider =
-					embedPreview?.html === false &&
-					embedPreview?.type === undefined;
-				// Some WordPress URLs that can't be embedded will cause the API to return
-				// a valid JSON response with no HTML and `data.status` set to 404, rather
-				// than generating a fallback response as other embeds do.
-				const wordpressCantEmbed = embedPreview?.data?.status === 404;
-				const validPreview =
-					!! embedPreview &&
-					! badEmbedProvider &&
-					! wordpressCantEmbed;
-				return {
-					preview: validPreview ? embedPreview : undefined,
-					fetching: isRequestingEmbedPreview( attributesUrl ),
-					themeSupportsResponsive:
-						getThemeSupports()[ 'responsive-embeds' ],
-					cannotEmbed: ! validPreview || previewIsFallback,
-				};
-			},
-			[ attributesUrl ]
-		);
+			const embedPreview = getEmbedPreview( attributesUrl );
+			const previewIsFallback = isPreviewEmbedFallback( attributesUrl );
+
+			// The external oEmbed provider does not exist. We got no type info and no html.
+			const badEmbedProvider =
+				embedPreview?.html === false &&
+				embedPreview?.type === undefined;
+			// Some WordPress URLs that can't be embedded will cause the API to return
+			// a valid JSON response with no HTML and `data.status` set to 404, rather
+			// than generating a fallback response as other embeds do.
+			const wordpressCantEmbed = embedPreview?.data?.status === 404;
+			const validPreview =
+				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
+			return {
+				preview: validPreview ? embedPreview : undefined,
+				fetching: isRequestingEmbedPreview( attributesUrl ),
+				themeSupportsResponsive:
+					getThemeSupports()[ 'responsive-embeds' ],
+				cannotEmbed: ! validPreview || previewIsFallback,
+				hasResolved: hasFinishedResolution( 'getEmbedPreview', [
+					attributesUrl,
+				] ),
+			};
+		},
+		[ attributesUrl ]
+	);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -127,30 +134,50 @@ const EmbedEdit = ( props ) => {
 	};
 
 	useEffect( () => {
-		if ( ! preview?.html || ! cannotEmbed || fetching ) {
+		if ( preview?.html || ! cannotEmbed || ! hasResolved ) {
 			return;
 		}
+
 		// At this stage, we're not fetching the preview and know it can't be embedded,
 		// so try removing any trailing slash, and resubmit.
 		const newURL = attributesUrl.replace( /\/$/, '' );
 		setURL( newURL );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, attributesUrl ] );
+	}, [
+		preview?.html,
+		attributesUrl,
+		cannotEmbed,
+		hasResolved,
+		setAttributes,
+	] );
+
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,12 +215,18 @@ const EmbedEdit = ( props ) => {
 							event.preventDefault();
 						}
 
+						// If the embed URL was changed, we need to reset the aspect ratio class.
+						// To do this we have to remove the existing ratio class so it can be recalculated.
+						const blockClass = removeAspectRatioClasses(
+							attributes.className
+						);
+
 						setIsEditingURL( false );
-						setAttributes( { url } );
+						setAttributes( { url, className: blockClass } );
 					} }
 					value={ url }
 					cannotEmbed={ cannotEmbed }
-					onChange={ ( event ) => setURL( event.target.value ) }
+					onChange={ ( value ) => setURL( value ) }
 					fallback={ () => fallback( url, onReplace ) }
 					tryAgain={ () => {
 						invalidateResolution( 'getEmbedPreview', [ url ] );
@@ -217,7 +250,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	return (
 		<>
@@ -229,7 +262,15 @@ const EmbedEdit = ( props ) => {
 				toggleResponsive={ toggleResponsive }
 				switchBackToURLInput={ () => setIsEditingURL( true ) }
 			/>
-			<View { ...blockProps }>
+			<figure
+				{ ...blockProps }
+				className={ clsx( blockProps.className, className, {
+					[ `is-type-${ type }` ]: type,
+					[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+					[ `wp-block-embed-${ providerNameSlug }` ]:
+						providerNameSlug,
+				} ) }
+			>
 				<EmbedPreview
 					preview={ preview }
 					previewable={ previewable }
@@ -244,8 +285,18 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
 				/>
-			</View>
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
+			</figure>
 		</>
 	);
 };
diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js
index 109478461c0b3e..2144d2f2eba729 100644
--- a/packages/block-library/src/embed/edit.native.js
+++ b/packages/block-library/src/embed/edit.native.js
@@ -4,6 +4,7 @@
 import {
 	createUpgradedEmbedBlock,
 	getClassNames,
+	removeAspectRatioClasses,
 	fallback,
 	getEmbedInfoByProvider,
 	getMergedAttributesWithPreview,
@@ -18,7 +19,7 @@ import EmbedLinkSettings from './embed-link-settings';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,6 +33,7 @@ import {
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { View } from '@wordpress/primitives';
+import { getAuthority } from '@wordpress/url';
 
 // The inline preview feature will be released progressible, for this reason
 // the embed will only be considered previewable for the following providers list.
@@ -123,16 +125,14 @@ const EmbedEdit = ( props ) => {
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.
 	 *
-	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+	const getMergedAttributes = () =>
 		getMergedAttributesWithPreview(
 			attributes,
 			preview,
 			title,
-			responsive,
-			ignorePreviousClassName
+			responsive
 		);
 
 	const toggleResponsive = () => {
@@ -159,21 +159,34 @@ const EmbedEdit = ( props ) => {
 		const newURL = url.replace( /\/$/, '' );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, url ] );
+	}, [ preview?.html, url, cannotEmbed, fetching ] );
+
+	// Try a different provider in case the embed url is not supported.
+	useEffect( () => {
+		if ( ! cannotEmbed || fetching || ! url ) {
+			return;
+		}
+
+		// Until X provider is supported in WordPress, as a workaround we use Twitter provider.
+		if ( getAuthority( url ) === 'x.com' ) {
+			const newURL = new URL( url );
+			newURL.host = 'twitter.com';
+			setAttributes( { url: newURL.toString() } );
+		}
+	}, [ url, cannotEmbed, fetching, setAttributes ] );
 
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// When obtaining an incoming preview, we set the attributes derived from
-			// the preview data. In this case when getting the merged attributes,
-			// we ignore the previous classname because it might not match the expected
-			// classes by the new preview.
-			setAttributes( getMergedAttributes( true ) );
+			// When obtaining an incoming preview,
+			// we set the attributes derived from the preview data.
+			const mergedAttributes = getMergedAttributes();
+			setAttributes( mergedAttributes );
 
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,
-					getMergedAttributes()
+					mergedAttributes
 				);
 
 				if ( upgradedBlock ) {
@@ -188,13 +201,25 @@ const EmbedEdit = ( props ) => {
 		[ isEditingURL ]
 	);
 
-	const onEditURL = useCallback( ( value ) => {
-		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-		// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-		// for creating the new block.
-		setAttributes( { url: value } );
-		setIsEditingURL( false );
-	}, [] );
+	const onEditURL = useCallback(
+		( value ) => {
+			// If the embed URL was changed, we need to reset the aspect ratio class.
+			// To do this we have to remove the existing ratio class so it can be recalculated.
+			if ( attributes.url !== value ) {
+				const blockClass = removeAspectRatioClasses(
+					attributes.className
+				);
+				setAttributes( { className: blockClass } );
+			}
+
+			// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+			// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+			// for creating the new block.
+			setAttributes( { url: value } );
+			setIsEditingURL( false );
+		},
+		[ attributes, setAttributes ]
+	);
 
 	const blockProps = useBlockProps();
 
@@ -221,7 +246,7 @@ const EmbedEdit = ( props ) => {
 		allowResponsive,
 		className: classFromPreview,
 	} = getMergedAttributes();
-	const className = classnames( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className );
 
 	const isProviderPreviewable =
 		PREVIEWABLE_PROVIDERS.includes( providerNameSlug ) ||
diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index 368784c22f38ab..eda859eee9040c 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/packages/block-library/src/embed/editor.scss
@@ -12,13 +12,21 @@
 		justify-content: center;
 	}
 
+	.wp-block-embed__placeholder-input {
+		flex: 1 1 auto;
+	}
+
 	// Stops long URLs from breaking out of the no preview available screen
 	.components-placeholder__error {
 		word-break: break-word;
 	}
+}
 
-	.components-placeholder__learn-more {
-		margin-top: 1em;
+.wp-block-embed__learn-more {
+	@at-root .wp-block-post-content & {
+		a {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 }
 
diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
index 0a5744be52b9ea..c17178a96a96a1 100644
--- a/packages/block-library/src/embed/embed-controls.js
+++ b/packages/block-library/src/embed/embed-controls.js
@@ -49,6 +49,7 @@ const EmbedControls = ( {
 					className="blocks-responsive"
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Resize for smaller devices' ) }
 						checked={ allowResponsive }
 						help={ getResponsiveHelp }
diff --git a/packages/block-library/src/embed/embed-controls.native.js b/packages/block-library/src/embed/embed-controls.native.js
index b1249308ebdf54..524f2da619bcb6 100644
--- a/packages/block-library/src/embed/embed-controls.native.js
+++ b/packages/block-library/src/embed/embed-controls.native.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
+// eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
 
 function getResponsiveHelp( checked ) {
diff --git a/packages/block-library/src/embed/embed-link-settings.native.js b/packages/block-library/src/embed/embed-link-settings.native.js
index dcacde56aa05ea..9c3fbffc8a196b 100644
--- a/packages/block-library/src/embed/embed-link-settings.native.js
+++ b/packages/block-library/src/embed/embed-link-settings.native.js
@@ -39,7 +39,7 @@ const EmbedLinkSettings = ( {
 			label: (
 				<FooterMessageLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 					value={ __( 'Learn more about embeds' ) }
 				/>
@@ -90,7 +90,6 @@ const EmbedLinkSettings = ( {
 			onDismiss={ onDismiss }
 			setAttributes={ onSetAttributes }
 			options={ linkSettingsOptions }
-			testID="embed-edit-url-modal"
 			withBottomSheet={ withBottomSheet }
 			showIcon
 		/>
diff --git a/packages/block-library/src/embed/embed-no-preview.native.js b/packages/block-library/src/embed/embed-no-preview.native.js
index cac8c5d1a4c10d..de97ca73a1618a 100644
--- a/packages/block-library/src/embed/embed-no-preview.native.js
+++ b/packages/block-library/src/embed/embed-no-preview.native.js
@@ -124,7 +124,7 @@ const EmbedNoPreview = ( {
 	const embedNoProviderPreview = (
 		<>
 			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ previewButtonA11yHint }
 				disabled={ ! isSelected }
 				onPress={ onPressContainer }
@@ -145,7 +145,7 @@ const EmbedNoPreview = ( {
 					<TouchableOpacity
 						accessibilityHint={ __( 'Tap here to show help' ) }
 						accessibilityLabel={ __( 'Help button' ) }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						disabled={ ! isSelected }
 						onPress={ onPressHelp }
 						style={ helpIconStyle }
diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
index e3ffb5ac02845c..1626aca5c9c9cb 100644
--- a/packages/block-library/src/embed/embed-placeholder.js
+++ b/packages/block-library/src/embed/embed-placeholder.js
@@ -2,7 +2,14 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Button, Placeholder, ExternalLink } from '@wordpress/components';
+import {
+	Button,
+	Placeholder,
+	ExternalLink,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( {
@@ -25,39 +32,55 @@ const EmbedPlaceholder = ( {
 			) }
 		>
 			<form onSubmit={ onSubmit }>
-				<input
+				<InputControl
+					__next40pxDefaultSize
 					type="url"
 					value={ value || '' }
-					className="components-placeholder__input"
-					aria-label={ label }
+					className="wp-block-embed__placeholder-input"
+					label={ label }
+					hideLabelFromVision
 					placeholder={ __( 'Enter URL to embed here…' ) }
 					onChange={ onChange }
 				/>
-				<Button variant="primary" type="submit">
+				<Button __next40pxDefaultSize variant="primary" type="submit">
 					{ _x( 'Embed', 'button label' ) }
 				</Button>
 			</form>
-			<div className="components-placeholder__learn-more">
+			<div className="wp-block-embed__learn-more">
 				<ExternalLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 				>
 					{ __( 'Learn more about embeds' ) }
 				</ExternalLink>
 			</div>
 			{ cannotEmbed && (
-				<div className="components-placeholder__error">
+				<VStack spacing={ 3 } className="components-placeholder__error">
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<Button variant="secondary" onClick={ tryAgain }>
-						{ _x( 'Try again', 'button label' ) }
-					</Button>{ ' ' }
-					<Button variant="secondary" onClick={ fallback }>
-						{ _x( 'Convert to link', 'button label' ) }
-					</Button>
-				</div>
+					<HStack
+						expanded={ false }
+						spacing={ 3 }
+						justify="flex-start"
+					>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ tryAgain }
+						>
+							{ _x( 'Try again', 'button label' ) }
+						</Button>{ ' ' }
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ fallback }
+						>
+							{ _x( 'Convert to link', 'button label' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			) }
 		</Placeholder>
 	);
diff --git a/packages/block-library/src/embed/embed-placeholder.native.js b/packages/block-library/src/embed/embed-placeholder.native.js
index 966b96c939217c..9d0dfff3cf2840 100644
--- a/packages/block-library/src/embed/embed-placeholder.native.js
+++ b/packages/block-library/src/embed/embed-placeholder.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import { useRef } from '@wordpress/element';
 import styles from './styles.scss';
 import { noticeOutline } from '../../../components/src/mobile/gridicons';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 const EmbedPlaceholder = ( {
 	icon,
 	isSelected,
@@ -28,10 +30,17 @@ const EmbedPlaceholder = ( {
 	tryAgain,
 	openEmbedLinkSettings,
 } ) => {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.embed__container,
-		styles[ 'embed__container--dark' ]
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'embed__container-selected' ],
+		styles[ 'embed__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles.embed__container,
+			styles[ 'embed__container--dark' ]
+		),
+		isSelected && containerSelectedStyle,
+	];
 	const labelStyle = usePreferredColorSchemeStyle(
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
@@ -44,6 +53,15 @@ const EmbedPlaceholder = ( {
 	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles.embed__button,
+		styles[ 'embed__button--dark' ]
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles.embed__icon,
+		styles[ 'embed__icon--dark' ]
+	);
+
 	const cannotEmbedMenuPickerRef = useRef();
 
 	const errorPickerOptions = {
@@ -89,55 +107,70 @@ const EmbedPlaceholder = ( {
 
 	return (
 		<>
-			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
-				accessibilityHint={
-					cannotEmbed
-						? __( 'Double tap to view embed options.' )
-						: __( 'Double tap to add a link.' )
-				}
-				onPress={ resolveOnPressEvent }
-				disabled={ ! isSelected }
-			>
-				<View style={ containerStyle }>
-					{ cannotEmbed ? (
-						<>
-							<Icon
-								icon={ noticeOutline }
-								fill={ embedIconErrorStyle.fill }
-								style={ embedIconErrorStyle }
-							/>
-							<Text
-								style={ [
-									descriptionStyle,
-									descriptionErrorStyle,
-								] }
-							>
-								{ __( 'Unable to embed media' ) }
-							</Text>
+			<View style={ containerStyle }>
+				{ cannotEmbed ? (
+					<>
+						<Icon
+							icon={ noticeOutline }
+							fill={ embedIconErrorStyle.fill }
+							style={ embedIconErrorStyle }
+						/>
+						<Text
+							style={ [
+								descriptionStyle,
+								descriptionErrorStyle,
+							] }
+						>
+							{ __( 'Unable to embed media' ) }
+						</Text>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole="button"
+							accessibilityHint={ __(
+								'Double tap to view embed options.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
 								{ __( 'More options' ) }
 							</Text>
-							<Picker
-								title={ __( 'Embed options' ) }
-								ref={ cannotEmbedMenuPickerRef }
-								options={ options }
-								onChange={ onPickerSelect }
-								hideCancelButton
-								leftAlign
-							/>
-						</>
-					) : (
-						<>
-							<BlockIcon icon={ icon } />
+						</TouchableOpacity>
+						<Picker
+							title={ __( 'Embed options' ) }
+							ref={ cannotEmbedMenuPickerRef }
+							options={ options }
+							onChange={ onPickerSelect }
+							hideCancelButton
+							leftAlign
+						/>
+					</>
+				) : (
+					<>
+						<View style={ styles[ 'embed__placeholder-header' ] }>
+							<BlockIcon icon={ icon } fill={ iconStyles.fill } />
 							<Text style={ labelStyle }>{ label }</Text>
+						</View>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole="button"
+							accessibilityHint={ __(
+								'Double tap to add a link.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
-								{ __( 'ADD LINK' ) }
+								{ __( 'Add link' ) }
 							</Text>
-						</>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
+						</TouchableOpacity>
+					</>
+				) }
+			</View>
 		</>
 	);
 };
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index 5fa959375245bf..c0c7d5942d1d78 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -6,161 +6,114 @@ import { getPhotoHtml } from './util';
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import {
-	RichText,
-	BlockIcon,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { BlockIcon } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { getAuthority } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import WpEmbedPreview from './wp-embed-preview';
 
-class EmbedPreview extends Component {
-	constructor() {
-		super( ...arguments );
-		this.hideOverlay = this.hideOverlay.bind( this );
-		this.state = {
-			interactive: false,
-		};
-	}
-
-	static getDerivedStateFromProps( nextProps, state ) {
-		if ( ! nextProps.isSelected && state.interactive ) {
-			// We only want to change this when the block is not selected, because changing it when
-			// the block becomes selected makes the overlap disappear too early. Hiding the overlay
-			// happens on mouseup when the overlay is clicked.
-			return { interactive: false };
-		}
+export default function EmbedPreview( {
+	preview,
+	previewable,
+	url,
+	type,
+	isSelected,
+	className,
+	icon,
+	label,
+} ) {
+	const [ interactive, setInteractive ] = useState( false );
 
-		return null;
+	if ( ! isSelected && interactive ) {
+		// We only want to change this when the block is not selected, because changing it when
+		// the block becomes selected makes the overlap disappear too early. Hiding the overlay
+		// happens on mouseup when the overlay is clicked.
+		setInteractive( false );
 	}
 
-	hideOverlay() {
+	const hideOverlay = () => {
 		// This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
 		// changing, because that happens on mouse down, and the overlay immediately disappears,
 		// and the mouse event can end up in the preview content. We can't use onClick on
 		// the overlay to hide it either, because then the editor misses the mouseup event, and
 		// thinks we're multi-selecting blocks.
-		this.setState( { interactive: true } );
-	}
+		setInteractive( true );
+	};
 
-	render() {
-		const {
-			preview,
-			previewable,
-			url,
-			type,
-			caption,
-			onCaptionChange,
-			isSelected,
-			className,
-			icon,
-			label,
-			insertBlocksAfter,
-		} = this.props;
-		const { scripts } = preview;
-		const { interactive } = this.state;
+	const { scripts } = preview;
 
-		const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-		const parsedHost = new URL( url ).host.split( '.' );
-		const parsedHostBaseUrl = parsedHost
-			.splice( parsedHost.length - 2, parsedHost.length - 1 )
-			.join( '.' );
-		const iframeTitle = sprintf(
-			// translators: %s: host providing embed content e.g: www.youtube.com
-			__( 'Embedded content from %s' ),
-			parsedHostBaseUrl
-		);
-		const sandboxClassnames = classnames(
-			type,
-			className,
-			'wp-block-embed__wrapper'
-		);
+	const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
+	const embedSourceUrl = getAuthority( url );
+	const iframeTitle = sprintf(
+		// translators: %s: host providing embed content e.g: www.youtube.com
+		__( 'Embedded content from %s' ),
+		embedSourceUrl
+	);
+	const sandboxClassnames = clsx(
+		type,
+		className,
+		'wp-block-embed__wrapper'
+	);
 
-		// Disabled because the overlay div doesn't actually have a role or functionality
-		// as far as the user is concerned. We're just catching the first click so that
-		// the block can be selected without interacting with the embed preview that the overlay covers.
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		const embedWrapper =
-			'wp-embed' === type ? (
-				<WpEmbedPreview html={ html } />
-			) : (
-				<div className="wp-block-embed__wrapper">
-					<SandBox
-						html={ html }
-						scripts={ scripts }
-						title={ iframeTitle }
-						type={ sandboxClassnames }
-						onFocus={ this.hideOverlay }
+	// Disabled because the overlay div doesn't actually have a role or functionality
+	// as far as the user is concerned. We're just catching the first click so that
+	// the block can be selected without interacting with the embed preview that the overlay covers.
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	const embedWrapper =
+		'wp-embed' === type ? (
+			<WpEmbedPreview html={ html } />
+		) : (
+			<div className="wp-block-embed__wrapper">
+				<SandBox
+					html={ html }
+					scripts={ scripts }
+					title={ iframeTitle }
+					type={ sandboxClassnames }
+					onFocus={ hideOverlay }
+				/>
+				{ ! interactive && (
+					<div
+						className="block-library-embed__interactive-overlay"
+						onMouseUp={ hideOverlay }
 					/>
-					{ ! interactive && (
-						<div
-							className="block-library-embed__interactive-overlay"
-							onMouseUp={ this.hideOverlay }
-						/>
-					) }
-				</div>
-			);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
-
-		return (
-			<figure
-				className={ classnames( className, 'wp-block-embed', {
-					'is-type-video': 'video' === type,
-				} ) }
-			>
-				{ previewable ? (
-					embedWrapper
-				) : (
-					<Placeholder
-						icon={ <BlockIcon icon={ icon } showColors /> }
-						label={ label }
-					>
-						<p className="components-placeholder__error">
-							<a href={ url }>{ url }</a>
-						</p>
-						<p className="components-placeholder__error">
-							{ sprintf(
-								/* translators: %s: host providing embed content e.g: www.youtube.com */
-								__(
-									"Embedded content from %s can't be previewed in the editor."
-								),
-								parsedHostBaseUrl
-							) }
-						</p>
-					</Placeholder>
 				) }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ onCaptionChange }
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
-			</figure>
+			</div>
 		);
-	}
-}
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
-export default EmbedPreview;
+	return (
+		<>
+			{ previewable ? (
+				embedWrapper
+			) : (
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } showColors /> }
+					label={ label }
+				>
+					<p className="components-placeholder__error">
+						<a href={ url }>{ url }</a>
+					</p>
+					<p className="components-placeholder__error">
+						{ sprintf(
+							/* translators: %s: host providing embed content e.g: www.youtube.com */
+							__(
+								"Embedded content from %s can't be previewed in the editor."
+							),
+							embedSourceUrl
+						) }
+					</p>
+				</Placeholder>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
index 87abc38348d56a..d692b6cd58563a 100644
--- a/packages/block-library/src/embed/embed-preview.native.js
+++ b/packages/block-library/src/embed/embed-preview.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback } from 'react-native';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import classnames from 'classnames/dedupe';
 import { View } from '@wordpress/primitives';
 import {
 	BlockCaption,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
@@ -51,7 +52,7 @@ const EmbedPreview = ( {
 		styles[ `embed-preview__sandbox--align-${ align }` ];
 
 	function accessibilityLabelCreator( caption ) {
-		return ! caption
+		return RichText.isEmpty( caption )
 			? /* translators: accessibility text. Empty Embed caption. */
 			  __( 'Embed caption. Empty' )
 			: sprintf(
@@ -85,7 +86,7 @@ const EmbedPreview = ( {
 		__( 'Embedded content from %s' ),
 		parsedHostBaseUrl
 	);
-	const sandboxClassnames = classnames(
+	const sandboxClassnames = clsx(
 		type,
 		className,
 		'wp-block-embed__wrapper'
diff --git a/packages/block-library/src/embed/icons.js b/packages/block-library/src/embed/icons.js
index c65bcd69bb60c0..2e9386373f083a 100644
--- a/packages/block-library/src/embed/icons.js
+++ b/packages/block-library/src/embed/icons.js
@@ -137,7 +137,7 @@ export const embedAnimotoIcon = (
 export const embedDailymotionIcon = (
 	<SVG viewBox="0 0 24 24">
 		<Path
-			d="m12.1479 18.5957c-2.4949 0-4.28131-1.7558-4.28131-4.0658 0-2.2176 1.78641-4.0965 4.09651-4.0965 2.2793 0 4.0349 1.7864 4.0349 4.1581 0 2.2794-1.7556 4.0042-3.8501 4.0042zm8.3521-18.5957-4.5329 1v7c-1.1088-1.41691-2.8028-1.8787-4.8049-1.8787-2.09443 0-3.97329.76993-5.5133 2.27917-1.72483 1.66323-2.6489 3.78863-2.6489 6.16033 0 2.5873.98562 4.8049 2.89526 6.499 1.44763 1.2936 3.17251 1.9402 5.17454 1.9402 1.9713 0 3.4498-.5236 4.8973-1.9402v1.9402h4.5329c0-7.6359 0-15.3641 0-23z"
+			d="M11.903 16.568c-1.82 0-3.124-1.281-3.124-2.967a2.987 2.987 0 0 1 2.989-2.989c1.663 0 2.944 1.304 2.944 3.034 0 1.663-1.281 2.922-2.81 2.922ZM17.997 3l-3.308.73v5.107c-.809-1.034-2.045-1.37-3.505-1.37-1.529 0-2.9.561-4.023 1.662-1.259 1.214-1.933 2.764-1.933 4.495 0 1.888.72 3.506 2.113 4.742 1.056.944 2.314 1.415 3.775 1.415 1.438 0 2.517-.382 3.573-1.415v1.415h3.308V3Z"
 			fill="#333436"
 		/>
 	</SVG>
@@ -178,3 +178,12 @@ export const embedPocketCastsIcon = {
 		</SVG>
 	),
 };
+
+export const embedBlueskyIcon = (
+	<SVG viewBox="0 0 24 24">
+		<Path
+			fill="#0a7aff"
+			d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"
+		/>
+	</SVG>
+);
diff --git a/packages/block-library/src/embed/save.js b/packages/block-library/src/embed/save.js
index cb52b22b9b7448..8f825d5cabc040 100644
--- a/packages/block-library/src/embed/save.js
+++ b/packages/block-library/src/embed/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ export default function save( { attributes } ) {
 		return null;
 	}
 
-	const className = classnames( 'wp-block-embed', {
+	const className = clsx( 'wp-block-embed', {
 		[ `is-type-${ type }` ]: type,
 		[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
 		[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
index 31e248ec006dc8..2776b404b853e1 100644
--- a/packages/block-library/src/embed/style.scss
+++ b/packages/block-library/src/embed/style.scss
@@ -25,7 +25,7 @@
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 
diff --git a/packages/block-library/src/embed/styles.native.scss b/packages/block-library/src/embed/styles.native.scss
index fade4204a975bf..d7f07bc259361f 100644
--- a/packages/block-library/src/embed/styles.native.scss
+++ b/packages/block-library/src/embed/styles.native.scss
@@ -4,19 +4,28 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
 .embed__container--dark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.embed__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
+}
+
+.embed__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .embed__icon--error {
@@ -24,23 +33,38 @@
 	fill: $alert-red;
 }
 
+.embed__placeholder-header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.embed__icon {
+	fill: $light-secondary;
+}
+
+.embed__icon--dark {
+	fill: $dark-tertiary;
+}
+
 .embed__label {
 	text-align: center;
-	margin-top: 4;
-	margin-bottom: 4;
-	font-size: 14;
-	font-weight: 500;
-	color: $gray-90;
+	margin-left: $grid-unit;
+	font-size: 16;
+	font-weight: 400;
+	color: $light-secondary;
 }
 
 .embed__label--dark {
-	color: $gray-10;
+	color: $dark-tertiary;
 }
 
 .embed__description {
 	font-size: $default-font-size;
 	text-align: center;
-	margin-bottom: 4;
+	margin-top: 4;
+	margin-bottom: 16;
 	color: $light-secondary;
 }
 
@@ -53,12 +77,14 @@
 }
 
 .embed__action {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
-	margin-top: 4;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.embed__action--dark {
+	color: $black;
 }
 
 .embed-preview__loading {
@@ -158,3 +184,13 @@
 .embed-no-preview__sheet-button--dark {
 	color: $blue-30;
 }
+
+.embed__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.embed__button--dark {
+	background-color: $dark-primary;
+}
diff --git a/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap
index c3d1da4e4813b5..2979ef0324592f 100644
--- a/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap
+++ b/packages/block-library/src/embed/test/__snapshots__/index.native.js.snap
@@ -1,56 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Embed block alignment options sets Align center option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"center\\"} -->
-<figure class=\\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"center"} -->
+<figure class="wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align left option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"left\\"} -->
-<figure class=\\"wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"left"} -->
+<figure class="wp-block-embed alignleft is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Align right option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"right\\"} -->
-<figure class=\\"wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"right"} -->
+<figure class="wp-block-embed alignright is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Full width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"full\\"} -->
-<figure class=\\"wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"full"} -->
+<figure class="wp-block-embed alignfull is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block alignment options sets Wide width option 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true,\\"align\\":\\"wide\\"} -->
-<figure class=\\"wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"wide"} -->
+<figure class="wp-block-embed alignwide is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block block settings toggles resize for smaller devices media settings 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"allowResponsive\\":false,\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","allowResponsive":false,"responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block create by pasting URL creates embed block when pasting URL in paragraph block 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
@@ -58,75 +58,75 @@ https://www.youtube.com/watch?v=lXMskKTw3Bc
 
 exports[`Embed block create by pasting URL creates link when pasting URL in paragraph block 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
+<p><a href="https://www.youtube.com/watch?v=lXMskKTw3Bc">https://www.youtube.com/watch?v=lXMskKTw3Bc</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block displays cannot embed on the placeholder if preview data is null 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/testing\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/testing","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/testing
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL edits URL when edited after setting a bad URL of a provider 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if an invalid URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL keeps the previous URL if no URL is set 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block edit URL replaces URL 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://www.youtube.com/watch?v=lXMskKTw3Bc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
+<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
 https://www.youtube.com/watch?v=lXMskKTw3Bc
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {\\"url\\":\\"\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `"<!-- wp:embed {"url":"","type":"rich","providerNameSlug":"twitter","responsive":true} /-->"`;
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"vimeo\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"wordpress\\"} /-->"`;
+exports[`Embed block insertion inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true} /-->"`;
+exports[`Embed block insertion inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
 exports[`Embed block retry allows editing link if request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\"} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter"} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
@@ -134,58 +134,58 @@ https://twitter.com/notnownikki
 
 exports[`Embed block retry converts to link if preview request failed 1`] = `
 "<!-- wp:paragraph -->
-<p><a href=\\"https://twitter.com/notnownikki\\">https://twitter.com/notnownikki</a></p>
+<p><a href="https://twitter.com/notnownikki">https://twitter.com/notnownikki</a></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Embed block retry retries loading the preview if initial request failed 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL upon block insertion sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL upon block insertion sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block set URL when empty block auto-pastes the URL from clipboard 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
 exports[`Embed block set URL when empty block sets a valid URL when dismissing edit URL modal 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
 </div></figure>
 <!-- /wp:embed -->"
 `;
 
-exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {\\"url\\":\\"\\"} /-->"`;
+exports[`Embed block set URL when empty block sets empty URL when dismissing edit URL modal 1`] = `"<!-- wp:embed {"url":""} /-->"`;
 
 exports[`Embed block sets block caption 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
+"<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
 https://twitter.com/notnownikki
-</div><figcaption class=\\"wp-element-caption\\">Caption</figcaption></figure>
+</div><figcaption class="wp-element-caption">Caption</figcaption></figure>
 <!-- /wp:embed -->"
 `;
diff --git a/packages/block-library/src/embed/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/embed/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..0ac5b2566aa647
--- /dev/null
+++ b/packages/block-library/src/embed/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Embed block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Embed block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/embed/test/index.js b/packages/block-library/src/embed/test/index.js
index 9ef7082f913570..7cc3645611ea78 100644
--- a/packages/block-library/src/embed/test/index.js
+++ b/packages/block-library/src/embed/test/index.js
@@ -17,6 +17,7 @@ import {
 	createUpgradedEmbedBlock,
 	getEmbedInfoByProvider,
 	removeAspectRatioClasses,
+	hasAspectRatioClass,
 } from '../util';
 import { embedInstagramIcon } from '../icons';
 import variations from '../variations';
@@ -101,6 +102,17 @@ describe( 'utils', () => {
 			).toEqual( expected );
 		} );
 	} );
+	describe( 'hasAspectRatioClass', () => {
+		it( 'should return false if an aspect ratio class does not exist', () => {
+			const existingClassNames = 'wp-block-embed is-type-video';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( false );
+		} );
+		it( 'should return true if an aspect ratio class exists', () => {
+			const existingClassNames =
+				'wp-block-embed is-type-video wp-embed-aspect-16-9 wp-has-aspect-ratio';
+			expect( hasAspectRatioClass( existingClassNames ) ).toBe( true );
+		} );
+	} );
 	describe( 'removeAspectRatioClasses', () => {
 		it( 'should return the same falsy value as received', () => {
 			const existingClassNames = undefined;
@@ -188,7 +200,7 @@ describe( 'utils', () => {
 			expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual(
 				expect.objectContaining( {
 					icon: embedInstagramIcon,
-					title: 'Instagram',
+					title: 'Instagram Embed',
 				} )
 			);
 		} );
diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
index 60bc6604b8cffb..59e4cfe51fccec 100644
--- a/packages/block-library/src/embed/test/index.native.js
+++ b/packages/block-library/src/embed/test/index.native.js
@@ -6,6 +6,7 @@ import {
 	initializeEditor,
 	fireEvent,
 	waitFor,
+	waitForModalVisible,
 	within,
 } from 'test/helpers';
 import { Platform } from 'react-native';
@@ -29,6 +30,7 @@ import { requestPreview } from '@wordpress/react-native-bridge';
  */
 import * as paragraph from '../../paragraph';
 import * as embed from '..';
+import { WebView } from 'react-native-webview';
 
 // Override modal mock to prevent unmounting it when is not visible.
 // This is required to be able to trigger onClose and onDismiss events when
@@ -121,55 +123,59 @@ const MOST_USED_PROVIDERS = embed.settings.variations.filter( ( { name } ) =>
 
 // Return specified mocked responses for the oembed endpoint.
 const mockEmbedResponses = ( mockedResponses ) => {
-	fetchRequest.mockImplementation( ( { path } ) => {
-		if ( path.startsWith( '/wp/v2/themes' ) ) {
-			return Promise.resolve( [
-				{ theme_supports: { 'responsive-embeds': true } },
-			] );
-		}
-
-		if ( path.startsWith( '/wp/v2/block-patterns/categories' ) ) {
-			return Promise.resolve( [] );
-		}
-
+	fetchRequest.mockImplementation( async ( req ) => {
 		const matchedEmbedResponse = mockedResponses.find(
 			( mockedResponse ) =>
-				path ===
+				req.path ===
 				`/oembed/1.0/proxy?url=${ encodeURIComponent(
 					mockedResponse.url
 				) }`
 		);
-		return Promise.resolve( matchedEmbedResponse || {} );
+
+		return matchedEmbedResponse || mockOtherResponses( req );
 	} );
 };
 
+async function mockOtherResponses( { path } ) {
+	if ( path.startsWith( '/wp/v2/themes' ) ) {
+		return [
+			{
+				stylesheet: 'test-theme',
+				theme_supports: { 'responsive-embeds': true },
+			},
+		];
+	}
+
+	if ( path.startsWith( '/wp/v2/block-patterns/patterns' ) ) {
+		return [];
+	}
+
+	if ( path.startsWith( '/wp/v2/block-patterns/categories' ) ) {
+		return [];
+	}
+
+	return {};
+}
+
 const insertEmbedBlock = async ( blockTitle = 'Embed' ) => {
-	const editor = await initializeEditor( {
-		initialHtml: '',
-	} );
-	const { getByLabelText, getByText } = editor;
+	const editor = await initializeEditor( { initialHtml: '' } );
 
 	// Open inserter menu.
-	fireEvent.press( await waitFor( () => getByLabelText( 'Add block' ) ) );
+	fireEvent.press( await editor.findByLabelText( 'Add block' ) );
 
 	// Insert embed block.
-	fireEvent.press( await waitFor( () => getByText( blockTitle ) ) );
+	fireEvent.press( await editor.findByText( blockTitle ) );
 
 	// Return the embed block.
-	const block = await waitFor( () =>
-		getByLabelText( /Embed Block\. Row 1/ )
-	);
+	const [ block ] = await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 	return { ...editor, block };
 };
 
 const initializeWithEmbedBlock = async ( initialHtml, selectBlock = true ) => {
 	const editor = await initializeEditor( { initialHtml } );
-	const { getByLabelText } = editor;
 
-	const block = await waitFor( () =>
-		getByLabelText( /Embed Block\. Row 1/ )
-	);
+	const [ block ] = await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 	if ( selectBlock ) {
 		// Select block.
@@ -199,6 +205,10 @@ beforeEach( () => {
 		MOCK_EMBED_PHOTO_SUCCESS_RESPONSE,
 		MOCK_BAD_EMBED_PROVIDER_RESPONSE,
 	] );
+
+	// Intentionally suppress the expected console logs to reduce noise in the
+	// test output.
+	jest.spyOn( console, 'log' ).mockImplementation( () => {} );
 } );
 
 afterAll( () => {
@@ -220,7 +230,7 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
+			it( `inserts ${ title } block`, async () => {
 				const { block } = await insertEmbedBlock( title );
 				const blockName = within( block ).getByText( title );
 
@@ -232,11 +242,13 @@ describe( 'Embed block', () => {
 
 	describe( 'set URL upon block insertion', () => {
 		it( 'sets empty URL when dismissing edit URL modal', async () => {
-			const { getByTestId } = await insertEmbedBlock();
+			const editor = await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -248,15 +260,16 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const { getByPlaceholderText, getByTestId } =
-				await insertEmbedBlock();
+			const editor = await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an URL.
-			const linkTextInput = getByPlaceholderText( 'Add link' );
+			const linkTextInput = editor.getByPlaceholderText( 'Add link' );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, expectedURL );
 
@@ -264,13 +277,18 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			// Wait until the WebView with the rich preview appears
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			// Wait until responsiveness settings appear, driven by `theme_supports.responsive-embeds`
+			await editor.findByText( 'Media settings' );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -282,28 +300,31 @@ describe( 'Embed block', () => {
 			// Mock clipboard.
 			Clipboard.getString.mockResolvedValue( clipboardURL );
 
-			const { getByTestId, getByText } = await insertEmbedBlock();
+			const editor = await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Get embed link with auto-pasted URL.
-			const autopastedLinkField = await waitFor( () =>
-				getByText( clipboardURL )
-			);
+			const autopastedLinkField = await editor.findByText( clipboardURL );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( autopastedLinkField ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -315,16 +336,16 @@ describe( 'Embed block', () => {
 
 	describe( 'set URL when empty block', () => {
 		it( 'sets empty URL when dismissing edit URL modal', async () => {
-			const { getByTestId, getByText } = await initializeWithEmbedBlock(
-				EMPTY_EMBED_HTML
-			);
+			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( await waitFor( () => getByText( 'ADD LINK' ) ) );
+			fireEvent.press( await editor.findByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -336,18 +357,19 @@ describe( 'Embed block', () => {
 		it( 'sets a valid URL when dismissing edit URL modal', async () => {
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const { getByPlaceholderText, getByTestId, getByText } =
-				await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
+			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an URL.
-			const linkTextInput = getByPlaceholderText( 'Add link' );
+			const linkTextInput = editor.getByPlaceholderText( 'Add link' );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, expectedURL );
 
@@ -355,13 +377,16 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -373,31 +398,34 @@ describe( 'Embed block', () => {
 			// Mock clipboard.
 			Clipboard.getString.mockResolvedValue( clipboardURL );
 
-			const { getByTestId, getByText } = await initializeWithEmbedBlock(
-				EMPTY_EMBED_HTML
-			);
+			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Get embed link.
-			const embedLink = await waitFor( () => getByText( clipboardURL ) );
+			const embedLink = await editor.findByText( clipboardURL );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( embedLink ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -409,17 +437,17 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const { getByLabelText, getByTestId } =
+			const editor =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
 
 			// Wait for Block Settings to be visible.
-			const blockSettingsModal = getByTestId( 'block-settings-modal' );
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			const blockSettingsModal = editor.getByTestId(
+				'block-settings-modal'
+			);
+			await waitForModalVisible( blockSettingsModal );
 
 			// Dismiss the Block Settings modal.
 			fireEvent( blockSettingsModal, 'backdropPress' );
@@ -432,27 +460,27 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const { getByLabelText, getByDisplayValue, getByTestId } =
+			const editor =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
 
 			// Wait for Block Settings to be visible.
-			const blockSettingsModal = getByTestId( 'block-settings-modal' );
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			const blockSettingsModal = editor.getByTestId(
+				'block-settings-modal'
+			);
+			await waitForModalVisible( blockSettingsModal );
 
-			// Start editing link.
+			// Start editing Embed link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ initialURL }`
+					`Twitter Embed link, ${ initialURL }`
 				)
 			);
 
 			// Replace URL.
-			const linkTextInput = getByDisplayValue( initialURL );
+			const linkTextInput = editor.getByDisplayValue( initialURL );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, expectedURL );
 
@@ -460,12 +488,13 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, 'backdropPress' );
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
-			// Get YouTube link field.
-			const youtubeLinkField = await waitFor( () =>
-				within( blockSettingsModal ).getByLabelText(
-					`YouTube link, ${ expectedURL }`
-				)
-			);
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
+			// Get YouTube Embed link field.
+			const youtubeLinkField = await within(
+				blockSettingsModal
+			).findByLabelText( `YouTube Embed link, ${ expectedURL }` );
 
 			expect( youtubeLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -475,31 +504,27 @@ describe( 'Embed block', () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 			const invalidURL = 'http://';
 
-			const {
-				getByLabelText,
-				getByDisplayValue,
-				getByTestId,
-				getByText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
 
 			// Wait for Block Settings to be visible.
-			const blockSettingsModal = getByTestId( 'block-settings-modal' );
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			const blockSettingsModal = editor.getByTestId(
+				'block-settings-modal'
+			);
+			await waitForModalVisible( blockSettingsModal );
 
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
 			// Replace URL.
-			const linkTextInput = getByDisplayValue( previousURL );
+			const linkTextInput = editor.getByDisplayValue( previousURL );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, invalidURL );
 
@@ -507,8 +532,8 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, 'backdropPress' );
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
-			const errorNotice = await waitFor( () =>
-				getByText( 'Invalid URL. Please enter a valid URL.' )
+			const errorNotice = await editor.findByText(
+				'Invalid URL. Please enter a valid URL.'
 			);
 
 			expect( errorNotice ).toBeDefined();
@@ -518,30 +543,26 @@ describe( 'Embed block', () => {
 		it( 'sets empty state when setting an empty URL', async () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByLabelText,
-				getByDisplayValue,
-				getByTestId,
-				getByPlaceholderText,
-			} = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
 
 			// Get Block Settings modal.
-			const blockSettingsModal = getByTestId( 'block-settings-modal' );
+			const blockSettingsModal = editor.getByTestId(
+				'block-settings-modal'
+			);
 
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
 			// Replace URL with empty value.
-			const linkTextInput = getByDisplayValue( previousURL );
+			const linkTextInput = editor.getByDisplayValue( previousURL );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, '' );
 
@@ -550,9 +571,8 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
 			// Get empty embed link.
-			const emptyLinkTextInput = await waitFor( () =>
-				getByPlaceholderText( 'Add link' )
-			);
+			const emptyLinkTextInput =
+				await editor.findByPlaceholderText( 'Add link' );
 
 			expect( emptyLinkTextInput ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -560,38 +580,38 @@ describe( 'Embed block', () => {
 
 		// This test case covers the bug fixed in PR #35460.
 		it( 'edits URL after dismissing two times the edit URL bottom sheet with empty value', async () => {
-			const { block, getByTestId, getByText } = await insertEmbedBlock();
+			const editor = await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Select block.
-			fireEvent.press( block );
+			fireEvent.press( editor.block );
 
 			// Edit URL.
-			fireEvent.press( getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Edit URL.
-			fireEvent.press( getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
-			const isVisibleThirdTime = await waitFor(
-				() => embedEditURLModal.props.isVisible
-			);
+			await waitForModalVisible( embedEditURLModal );
 
-			expect( isVisibleThirdTime ).toBeTruthy();
+			expect( embedEditURLModal.props.isVisible ).toBe( true );
 		} );
 
 		// This test case covers the bug fixed in PR #35013.
@@ -599,19 +619,16 @@ describe( 'Embed block', () => {
 			const badURL = 'https://youtu.be/BAD_URL';
 			const expectedURL = 'https://twitter.com/notnownikki';
 
-			const {
-				getByLabelText,
-				getByDisplayValue,
-				getByPlaceholderText,
-				getByTestId,
-			} = await insertEmbedBlock();
+			const editor = await insertEmbedBlock();
 
 			// Wait for edit URL modal to be visible.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an bad URL.
-			let linkTextInput = getByPlaceholderText( 'Add link' );
+			let linkTextInput = editor.getByPlaceholderText( 'Add link' );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, badURL );
 
@@ -620,13 +637,13 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
 
 			// Wait for Block Settings to be visible.
-			const blockSettingsModal = getByTestId( 'block-settings-modal' );
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			const blockSettingsModal = editor.getByTestId(
+				'block-settings-modal'
+			);
+			await waitForModalVisible( blockSettingsModal );
 
 			// Start editing link.
 			fireEvent.press(
@@ -636,7 +653,7 @@ describe( 'Embed block', () => {
 			);
 
 			// Replace URL.
-			linkTextInput = getByDisplayValue( badURL );
+			linkTextInput = editor.getByDisplayValue( badURL );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, expectedURL );
 
@@ -644,12 +661,10 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, 'backdropPress' );
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
-			// Get Twitter link field.
-			const twitterLinkField = await waitFor( () =>
-				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ expectedURL }`
-				)
-			);
+			// Get Twitter Embed link field.
+			const twitterLinkField = await within(
+				blockSettingsModal
+			).findByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -665,18 +680,14 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const { getByLabelText, getByText } =
+				const editor =
 					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
-				fireEvent.press(
-					await waitFor( () => getByLabelText( 'Align' ) )
-				);
+				fireEvent.press( await editor.findByLabelText( 'Align' ) );
 
 				// Select alignment option.
-				fireEvent.press(
-					await waitFor( () => getByText( alignmentOption ) )
-				);
+				fireEvent.press( await editor.findByText( alignmentOption ) );
 
 				expect( getEditorHtml() ).toMatchSnapshot();
 			} )
@@ -690,38 +701,37 @@ describe( 'Embed block', () => {
 			// Return bad response for the first request to oembed endpoint
 			// and success response for the rest of requests.
 			let isFirstEmbedRequest = true;
-			fetchRequest.mockImplementation( ( { path } ) => {
-				let response = {};
-				const isEmbedRequest = path.startsWith( '/oembed/1.0/proxy' );
-				if ( isEmbedRequest ) {
+			fetchRequest.mockImplementation( async ( req ) => {
+				if ( req.path.startsWith( '/oembed/1.0/proxy' ) ) {
 					if ( isFirstEmbedRequest ) {
 						isFirstEmbedRequest = false;
-						response = MOCK_BAD_WORDPRESS_RESPONSE;
-					} else {
-						response = RICH_TEXT_EMBED_SUCCESS_RESPONSE;
+						return MOCK_BAD_WORDPRESS_RESPONSE;
 					}
+					return RICH_TEXT_EMBED_SUCCESS_RESPONSE;
 				}
-				if ( path.startsWith( '/wp/v2/block-patterns/categories' ) ) {
-					response = [];
-				}
-				return Promise.resolve( response );
+
+				return mockOtherResponses( req );
 			} );
 
-			const { getByTestId, getByText } = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+
+			await editor.findByText( 'Unable to embed media' );
 
 			// Retry request.
-			fireEvent.press( getByText( 'More options' ) );
-			fireEvent.press( getByText( 'Retry' ) );
+			fireEvent.press( editor.getByText( 'More options' ) );
+			fireEvent.press( editor.getByText( 'Retry' ) );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -729,26 +739,24 @@ describe( 'Embed block', () => {
 
 		it( 'converts to link if preview request failed', async () => {
 			// Return bad response for requests to oembed endpoint.
-			fetchRequest.mockImplementation( ( { path } ) => {
-				if ( path.startsWith( '/wp/v2/block-patterns/categories' ) ) {
-					return Promise.resolve( [] );
+			fetchRequest.mockImplementation( async ( req ) => {
+				if ( req.path.startsWith( '/oembed/1.0/proxy' ) ) {
+					return MOCK_BAD_WORDPRESS_RESPONSE;
 				}
-				const isEmbedRequest = path.startsWith( '/oembed/1.0/proxy' );
-				return Promise.resolve(
-					isEmbedRequest ? MOCK_BAD_WORDPRESS_RESPONSE : {}
-				);
+
+				return mockOtherResponses( req );
 			} );
 
-			const { getByLabelText, getByText } =
+			const editor =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
-			fireEvent.press( getByText( 'More options' ) );
-			fireEvent.press( getByText( 'Convert to link' ) );
+			fireEvent.press( editor.getByText( 'More options' ) );
+			fireEvent.press( editor.getByText( 'Convert to link' ) );
 
 			// Get paragraph block where the link is created.
-			const paragraphBlock = await waitFor( () =>
-				getByLabelText( /Paragraph Block\. Row 1/ )
+			const [ paragraphBlock ] = await editor.findAllByLabelText(
+				/Paragraph Block\. Row 1/
 			);
 
 			expect( paragraphBlock ).toBeDefined();
@@ -760,55 +768,53 @@ describe( 'Embed block', () => {
 			const successURL = 'https://twitter.com/notnownikki';
 
 			// Return bad response for WordPress URL and success for Twitter URL.
-			fetchRequest.mockImplementation( ( { path } ) => {
+			fetchRequest.mockImplementation( async ( req ) => {
 				const matchesPath = ( url ) =>
-					path ===
+					req.path ===
 					`/oembed/1.0/proxy?url=${ encodeURIComponent( url ) }`;
 
-				let response = {};
 				if ( matchesPath( failURL ) ) {
-					response = MOCK_BAD_WORDPRESS_RESPONSE;
-				} else if ( matchesPath( successURL ) ) {
-					response = RICH_TEXT_EMBED_SUCCESS_RESPONSE;
-				} else if (
-					path.startsWith( '/wp/v2/block-patterns/categories' )
-				) {
-					response = [];
+					return MOCK_BAD_WORDPRESS_RESPONSE;
+				}
+
+				if ( matchesPath( successURL ) ) {
+					return RICH_TEXT_EMBED_SUCCESS_RESPONSE;
 				}
 
-				return Promise.resolve( response );
+				return mockOtherResponses( req );
 			} );
 
-			const {
-				getByLabelText,
-				getByText,
-				getByTestId,
-				getByDisplayValue,
-			} = await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const editor = await initializeWithEmbedBlock( WP_EMBED_HTML );
 
-			fireEvent.press( getByText( 'More options' ) );
-			fireEvent.press( getByText( 'Edit link' ) );
+			fireEvent.press( editor.getByText( 'More options' ) );
+			fireEvent.press( editor.getByText( 'Edit link' ) );
 
 			// Start editing link.
-			fireEvent.press( getByLabelText( `WordPress link, ${ failURL }` ) );
+			fireEvent.press(
+				editor.getByLabelText( `WordPress link, ${ failURL }` )
+			);
 
 			// Set an URL.
-			const linkTextInput = getByDisplayValue( failURL );
+			const linkTextInput = editor.getByDisplayValue( failURL );
 			fireEvent( linkTextInput, 'focus' );
 			fireEvent.changeText( linkTextInput, successURL );
 
 			// Dismiss the edit URL modal.
-			const embedEditURLModal = getByTestId( 'embed-edit-url-modal' );
+			const embedEditURLModal = editor.getByTestId(
+				'link-settings-navigation'
+			);
 			fireEvent( embedEditURLModal, 'backdropPress' );
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
-			const blockSettingsModal = await waitFor( () =>
-				getByTestId( 'block-settings-modal' )
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+
+			const blockSettingsModal = await editor.findByTestId(
+				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ successURL }` );
+			).getByLabelText( `Twitter Embed link, ${ successURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -817,16 +823,15 @@ describe( 'Embed block', () => {
 
 	describe( 'preview coming soon', () => {
 		it( 'previews post for providers which embed preview is not available yet', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
 
 			// Wait for no preview modal to be visible.
 			const noPreviewModal = getByTestId( 'embed-no-preview-modal' );
-			await waitFor( () => noPreviewModal.props.isVisible );
+			await waitForModalVisible( noPreviewModal );
 
 			// Preview post.
 			fireEvent.press( getByText( 'Preview post' ) );
@@ -839,22 +844,23 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'dismisses no preview modal', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
 
 			// Wait for no preview modal to be visible.
 			const noPreviewModal = getByTestId( 'embed-no-preview-modal' );
-			await waitFor( () => noPreviewModal.props.isVisible );
+			await waitForModalVisible( noPreviewModal );
 
 			// Dismiss modal.
 			fireEvent.press( getByText( 'Dismiss' ) );
 
 			// Wait for no preview modal to be not visible.
-			await waitFor( () => ! noPreviewModal.props.isVisible );
+			await waitFor( () =>
+				expect( noPreviewModal.props.isVisible ).toBe( false )
+			);
 
 			expect( requestPreview ).not.toHaveBeenCalled();
 		} );
@@ -864,17 +870,13 @@ describe( 'Embed block', () => {
 		it( 'creates embed block when pasting URL in paragraph block', async () => {
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const {
-				getByLabelText,
-				getByPlaceholderText,
-				getByTestId,
-				getByText,
-			} = await initializeEditor( {
+			const editor = await initializeEditor( {
 				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
 			// Paste URL in paragraph block.
-			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			const paragraphText =
+				editor.getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
 			fireEvent( paragraphText, 'paste', {
 				preventDefault: jest.fn(),
@@ -888,36 +890,40 @@ describe( 'Embed block', () => {
 			} );
 
 			// Wait for embed handler picker to be visible.
-			await waitFor(
-				() => getByTestId( 'embed-handler-picker' ).props.isVisible
+			const embedHandlerPicker = editor.getByTestId(
+				'embed-handler-picker'
 			);
+			await waitForModalVisible( embedHandlerPicker );
 
 			// Select create embed option.
-			fireEvent.press( getByText( 'Create embed' ) );
+			fireEvent.press( editor.getByText( 'Create embed' ) );
+			expect( console ).toHaveLoggedWith(
+				'Processed HTML piece:\n\n',
+				`<p>${ expectedURL }</p>`
+			);
 
 			// Get the created embed block.
-			const embedBlock = await waitFor( () =>
-				getByLabelText( /Embed Block\. Row 1/ )
-			);
+			const [ embedBlock ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			expect( embedBlock ).toBeDefined();
+
+			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
+			await editor.findByText( 'Media settings' );
+
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'creates link when pasting URL in paragraph block', async () => {
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const {
-				getByDisplayValue,
-				getByPlaceholderText,
-				getByTestId,
-				getByText,
-			} = await initializeEditor( {
+			const editor = await initializeEditor( {
 				initialHtml: EMPTY_PARAGRAPH_HTML,
 			} );
 
 			// Paste URL in paragraph block.
-			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			const paragraphText =
+				editor.getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
 			fireEvent( paragraphText, 'paste', {
 				preventDefault: jest.fn(),
@@ -931,18 +937,21 @@ describe( 'Embed block', () => {
 			} );
 
 			// Wait for embed handler picker to be visible.
-			await waitFor(
-				() => getByTestId( 'embed-handler-picker' ).props.isVisible
+			const embedHandlerPicker = editor.getByTestId(
+				'embed-handler-picker'
 			);
+			await waitForModalVisible( embedHandlerPicker );
 
 			// Select create link option.
-			fireEvent.press( getByText( 'Create link' ) );
+			fireEvent.press( editor.getByText( 'Create link' ) );
+			expect( console ).toHaveLoggedWith(
+				'Processed HTML piece:\n\n',
+				`<p>${ expectedURL }</p>`
+			);
 
 			// Get the link text.
-			const linkText = await waitFor( () =>
-				getByDisplayValue(
-					`<p><a href="${ expectedURL }">${ expectedURL }</a></p>`
-				)
+			const linkText = await editor.findByDisplayValue(
+				`<p><a href="${ expectedURL }">${ expectedURL }</a></p>`
 			);
 
 			expect( linkText ).toBeDefined();
@@ -953,10 +962,12 @@ describe( 'Embed block', () => {
 	describe( 'insert via slash inserter', () => {
 		it( 'insert generic embed block', async () => {
 			const embedBlockSlashInserter = '/Embed';
-			const { getByPlaceholderText, getByLabelText, getByText } =
-				await initializeEditor( { initialHtml: EMPTY_PARAGRAPH_HTML } );
+			const editor = await initializeEditor( {
+				initialHtml: EMPTY_PARAGRAPH_HTML,
+			} );
 
-			const paragraphText = getByPlaceholderText( 'Start writing…' );
+			const paragraphText =
+				editor.getByPlaceholderText( 'Start writing…' );
 			fireEvent( paragraphText, 'focus' );
 			// Trigger onSelectionChange to update both the current text and text selection.
 			// This event is required by the autocompleter, as it only displays the slash inserter
@@ -977,11 +988,10 @@ describe( 'Embed block', () => {
 				}
 			);
 
-			fireEvent.press( await waitFor( () => getByText( 'Embed' ) ) );
+			fireEvent.press( await editor.findByText( 'Embed' ) );
 
-			const block = await waitFor( () =>
-				getByLabelText( /Embed Block\. Row 1/ )
-			);
+			const [ block ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			const blockName = within( block ).getByText( 'Embed' );
 
@@ -990,14 +1000,15 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
-				const embedBlockSlashInserter = `/${ title }`;
-				const { getByPlaceholderText, getByLabelText, getByText } =
-					await initializeEditor( {
-						initialHtml: EMPTY_PARAGRAPH_HTML,
-					} );
-
-				const paragraphText = getByPlaceholderText( 'Start writing…' );
+			it( `inserts ${ title } block`, async () => {
+				// Get just the first word of the title ("Twitter") as the full title ("Twitter Embed") breaks the test.
+				const embedBlockSlashInserter = `/${ title.split( ' ' )[ 0 ] }`;
+				const editor = await initializeEditor( {
+					initialHtml: EMPTY_PARAGRAPH_HTML,
+				} );
+
+				const paragraphText =
+					editor.getByPlaceholderText( 'Start writing…' );
 				fireEvent( paragraphText, 'focus' );
 				// Trigger onSelectionChange to update both the current text and text selection.
 				// This event is required by the autocompleter, as it only displays the slash inserter
@@ -1018,11 +1029,10 @@ describe( 'Embed block', () => {
 					}
 				);
 
-				fireEvent.press( await waitFor( () => getByText( title ) ) );
+				fireEvent.press( await editor.findByText( title ) );
 
-				const block = await waitFor( () =>
-					getByLabelText( /Embed Block\. Row 1/ )
-				);
+				const [ block ] =
+					await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 				const blockName = within( block ).getByText( title );
 
@@ -1035,11 +1045,10 @@ describe( 'Embed block', () => {
 	it( 'sets block caption', async () => {
 		const expectedCaption = 'Caption';
 
-		const { getByPlaceholderText, getByDisplayValue } =
-			await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+		const screen = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 		// Set a caption.
-		const captionField = getByPlaceholderText( 'Add caption' );
+		const captionField = screen.getByPlaceholderText( 'Add caption' );
 		fireEvent( captionField, 'focus' );
 		fireEvent( captionField, 'onChange', {
 			nativeEvent: {
@@ -1050,8 +1059,8 @@ describe( 'Embed block', () => {
 		} );
 
 		// Get current caption.
-		const caption = await waitFor( () =>
-			getByDisplayValue( `<p>${ expectedCaption }</p>` )
+		const caption = await screen.findByDisplayValue(
+			`<p>${ expectedCaption }</p>`
 		);
 
 		expect( caption ).toBeDefined();
@@ -1060,12 +1069,12 @@ describe( 'Embed block', () => {
 
 	it( 'displays cannot embed on the placeholder if preview data is null', async () => {
 		// Return null response for requests to oembed endpoint.
-		fetchRequest.mockImplementation( ( { path } ) => {
-			if ( path.startsWith( '/wp/v2/block-patterns/categories' ) ) {
-				return Promise.resolve( [] );
+		fetchRequest.mockImplementation( async ( req ) => {
+			if ( req.path.startsWith( '/oembed/1.0/proxy' ) ) {
+				return EMBED_NULL_RESPONSE;
 			}
-			const isEmbedRequest = path.startsWith( '/oembed/1.0/proxy' );
-			return Promise.resolve( isEmbedRequest ? EMBED_NULL_RESPONSE : {} );
+
+			return mockOtherResponses( req );
 		} );
 
 		const { getByText } = await initializeWithEmbedBlock(
@@ -1080,37 +1089,31 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const { getByLabelText, getByText } =
+			const screen =
 				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
 
 			// Untoggle resize for smaller devices.
 			fireEvent.press(
-				await waitFor( () => getByText( /Resize for smaller devices/ ) )
+				await screen.findByText( /Resize for smaller devices/ )
 			);
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const { getByLabelText, getByText } =
-				await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const screen = await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
 
 			// Wait for media settings panel.
 			let mediaSettingsPanel;
 			try {
-				mediaSettingsPanel = await waitFor( () =>
-					getByText( 'Media settings' )
-				);
+				mediaSettingsPanel =
+					await screen.findByText( 'Media settings' );
 			} catch ( e ) {
 				// NOOP.
 			}
diff --git a/packages/block-library/src/embed/test/transforms.native.js b/packages/block-library/src/embed/test/transforms.native.js
new file mode 100644
index 00000000000000..ea1f797494e8dc
--- /dev/null
+++ b/packages/block-library/src/embed/test/transforms.native.js
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Embed';
+const initialHtml = `
+<!-- wp:embed {"url":"https://twitter.com/notnownikki","type":"rich","providerNameSlug":"twitter","responsive":true} -->
+<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
+https://twitter.com/notnownikki
+</div></figure>
+<!-- /wp:embed -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
index e809a783b9c810..81bcb9972f3c38 100644
--- a/packages/block-library/src/embed/theme.scss
+++ b/packages/block-library/src/embed/theme.scss
@@ -1,4 +1,4 @@
-.wp-block-embed figcaption {
+.wp-block-embed :where(figcaption) {
 	@include caption-style-theme();
 }
 
diff --git a/packages/block-library/src/embed/util.js b/packages/block-library/src/embed/util.js
index 35bf4c5d2966e2..eae45cc397e7b7 100644
--- a/packages/block-library/src/embed/util.js
+++ b/packages/block-library/src/embed/util.js
@@ -1,18 +1,13 @@
-/**
- * Internal dependencies
- */
-import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
-
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
-import classnames from 'classnames/dedupe';
+import clsx from 'clsx';
 import memoize from 'memize';
 
 /**
  * WordPress dependencies
  */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { renderToString } from '@wordpress/element';
 import {
 	createBlock,
@@ -24,8 +19,11 @@ import {
  * Internal dependencies
  */
 import metadata from './block.json';
+import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
+import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( componentsPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -100,7 +98,9 @@ export const createUpgradedEmbedBlock = (
 	const { preview, attributes = {} } = props;
 	const { url, providerNameSlug, type, ...restAttributes } = attributes;
 
-	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) return;
+	if ( ! url || ! getBlockType( DEFAULT_EMBED_BLOCK ) ) {
+		return;
+	}
 
 	const matchedBlock = findMoreSuitableBlock( url );
 
@@ -152,6 +152,21 @@ export const createUpgradedEmbedBlock = (
 	} );
 };
 
+/**
+ * Determine if the block already has an aspect ratio class applied.
+ *
+ * @param {string} existingClassNames Existing block classes.
+ * @return {boolean} True or false if the classnames contain an aspect ratio class.
+ */
+export const hasAspectRatioClass = ( existingClassNames ) => {
+	if ( ! existingClassNames ) {
+		return false;
+	}
+	return ASPECT_RATIOS.some( ( { className } ) =>
+		existingClassNames.includes( className )
+	);
+};
+
 /**
  * Removes all previously set aspect ratio related classes and return the rest
  * existing class names.
@@ -163,17 +178,21 @@ export const removeAspectRatioClasses = ( existingClassNames ) => {
 	if ( ! existingClassNames ) {
 		// Avoids extraneous work and also, by returning the same value as
 		// received, ensures the post is not dirtied by a change of the block
-		// attribute from `undefined` to an emtpy string.
+		// attribute from `undefined` to an empty string.
 		return existingClassNames;
 	}
 	const aspectRatioClassNames = ASPECT_RATIOS.reduce(
 		( accumulator, { className } ) => {
-			accumulator[ className ] = false;
+			accumulator.push( className );
 			return accumulator;
 		},
-		{ 'wp-has-aspect-ratio': false }
+		[ 'wp-has-aspect-ratio' ]
 	);
-	return classnames( existingClassNames, aspectRatioClassNames );
+	let outputClassNames = existingClassNames;
+	for ( const className of aspectRatioClassNames ) {
+		outputClassNames = outputClassNames.replace( className, '' );
+	}
+	return outputClassNames.trim();
 };
 
 /**
@@ -216,7 +235,7 @@ export function getClassNames(
 					return removeAspectRatioClasses( existingClassNames );
 				}
 				// Close aspect ratio match found.
-				return classnames(
+				return clsx(
 					removeAspectRatioClasses( existingClassNames ),
 					potentialRatio.className,
 					'wp-has-aspect-ratio'
@@ -283,6 +302,13 @@ export const getAttributesFromPreview = memoize(
 			attributes.providerNameSlug = providerNameSlug;
 		}
 
+		// Aspect ratio classes are removed when the embed URL is updated.
+		// If the embed already has an aspect ratio class, that means the URL has not changed.
+		// Which also means no need to regenerate it with getClassNames.
+		if ( hasAspectRatioClass( currentClassNames ) ) {
+			return attributes;
+		}
+
 		attributes.className = getClassNames(
 			html,
 			currentClassNames,
@@ -296,27 +322,26 @@ export const getAttributesFromPreview = memoize(
 /**
  * Returns the attributes derived from the preview, merged with the current attributes.
  *
- * @param {Object}  currentAttributes       The current attributes of the block.
- * @param {Object}  preview                 The preview data.
- * @param {string}  title                   The block's title, e.g. Twitter.
- * @param {boolean} isResponsive            Boolean indicating if the block supports responsive content.
- * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+ * @param {Object}  currentAttributes The current attributes of the block.
+ * @param {Object}  preview           The preview data.
+ * @param {string}  title             The block's title, e.g. Twitter.
+ * @param {boolean} isResponsive      Boolean indicating if the block supports responsive content.
  * @return {Object} Merged attributes.
  */
 export const getMergedAttributesWithPreview = (
 	currentAttributes,
 	preview,
 	title,
-	isResponsive,
-	ignorePreviousClassName = false
+	isResponsive
 ) => {
 	const { allowResponsive, className } = currentAttributes;
+
 	return {
 		...currentAttributes,
 		...getAttributesFromPreview(
 			preview,
 			title,
-			ignorePreviousClassName ? undefined : className,
+			className,
 			isResponsive,
 			allowResponsive
 		),
diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js
index 536690f74e5a9b..82a4159e13b327 100644
--- a/packages/block-library/src/embed/variations.js
+++ b/packages/block-library/src/embed/variations.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,10 +27,19 @@ import {
 	embedPinterestIcon,
 	embedWolframIcon,
 	embedPocketCastsIcon,
+	embedBlueskyIcon,
 } from './icons';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
+function getTitle( providerName ) {
+	return sprintf(
+		/* translators: %s: provider name */
+		__( '%s Embed' ),
+		providerName
+	);
+}
+
 /**
  * The embed provider services.
  *
@@ -39,7 +48,7 @@ import {
 const variations = [
 	{
 		name: 'twitter',
-		title: 'Twitter',
+		title: getTitle( 'Twitter' ),
 		icon: embedTwitterIcon,
 		keywords: [ 'tweet', __( 'social' ) ],
 		description: __( 'Embed a tweet.' ),
@@ -48,7 +57,7 @@ const variations = [
 	},
 	{
 		name: 'youtube',
-		title: 'YouTube',
+		title: getTitle( 'YouTube' ),
 		icon: embedYouTubeIcon,
 		keywords: [ __( 'music' ), __( 'video' ) ],
 		description: __( 'Embed a YouTube video.' ),
@@ -62,7 +71,7 @@ const variations = [
 		// Deprecate Facebook Embed per FB policy
 		// See: https://developers.facebook.com/docs/plugins/oembed-legacy
 		name: 'facebook',
-		title: 'Facebook',
+		title: getTitle( 'Facebook' ),
 		icon: embedFacebookIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Facebook post.' ),
@@ -78,7 +87,7 @@ const variations = [
 		// Deprecate Instagram per FB policy
 		// See: https://developers.facebook.com/docs/instagram/oembed-legacy
 		name: 'instagram',
-		title: 'Instagram',
+		title: getTitle( 'Instagram' ),
 		icon: embedInstagramIcon,
 		keywords: [ __( 'image' ), __( 'social' ) ],
 		description: __( 'Embed an Instagram post.' ),
@@ -88,7 +97,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress',
-		title: 'WordPress',
+		title: getTitle( 'WordPress' ),
 		icon: embedWordPressIcon,
 		keywords: [ __( 'post' ), __( 'blog' ) ],
 		description: __( 'Embed a WordPress post.' ),
@@ -98,7 +107,7 @@ const variations = [
 	},
 	{
 		name: 'soundcloud',
-		title: 'SoundCloud',
+		title: getTitle( 'SoundCloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed SoundCloud content.' ),
@@ -107,7 +116,7 @@ const variations = [
 	},
 	{
 		name: 'spotify',
-		title: 'Spotify',
+		title: getTitle( 'Spotify' ),
 		icon: embedSpotifyIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Spotify content.' ),
@@ -116,7 +125,7 @@ const variations = [
 	},
 	{
 		name: 'flickr',
-		title: 'Flickr',
+		title: getTitle( 'Flickr' ),
 		icon: embedFlickrIcon,
 		keywords: [ __( 'image' ) ],
 		description: __( 'Embed Flickr content.' ),
@@ -128,7 +137,7 @@ const variations = [
 	},
 	{
 		name: 'vimeo',
-		title: 'Vimeo',
+		title: getTitle( 'Vimeo' ),
 		icon: embedVimeoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Vimeo video.' ),
@@ -137,7 +146,7 @@ const variations = [
 	},
 	{
 		name: 'animoto',
-		title: 'Animoto',
+		title: getTitle( 'Animoto' ),
 		icon: embedAnimotoIcon,
 		description: __( 'Embed an Animoto video.' ),
 		patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ],
@@ -145,7 +154,7 @@ const variations = [
 	},
 	{
 		name: 'cloudup',
-		title: 'Cloudup',
+		title: getTitle( 'Cloudup' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Cloudup content.' ),
 		patterns: [ /^https?:\/\/cloudup\.com\/.+/i ],
@@ -154,7 +163,7 @@ const variations = [
 	{
 		// Deprecated since CollegeHumor content is now powered by YouTube.
 		name: 'collegehumor',
-		title: 'CollegeHumor',
+		title: getTitle( 'CollegeHumor' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed CollegeHumor content.' ),
 		scope: [ 'block' ],
@@ -163,18 +172,18 @@ const variations = [
 	},
 	{
 		name: 'crowdsignal',
-		title: 'Crowdsignal',
+		title: getTitle( 'Crowdsignal' ),
 		icon: embedContentIcon,
 		keywords: [ 'polldaddy', __( 'survey' ) ],
 		description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ),
 		patterns: [
-			/^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.survey\.fm)\/.+/i,
+			/^https?:\/\/((.+\.)?polldaddy\.com|poll\.fm|.+\.crowdsignal\.net|.+\.survey\.fm)\/.+/i,
 		],
 		attributes: { providerNameSlug: 'crowdsignal', responsive: true },
 	},
 	{
 		name: 'dailymotion',
-		title: 'Dailymotion',
+		title: getTitle( 'Dailymotion' ),
 		icon: embedDailymotionIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Dailymotion video.' ),
@@ -183,7 +192,7 @@ const variations = [
 	},
 	{
 		name: 'imgur',
-		title: 'Imgur',
+		title: getTitle( 'Imgur' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed Imgur content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ],
@@ -191,7 +200,7 @@ const variations = [
 	},
 	{
 		name: 'issuu',
-		title: 'Issuu',
+		title: getTitle( 'Issuu' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Issuu content.' ),
 		patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ],
@@ -199,7 +208,7 @@ const variations = [
 	},
 	{
 		name: 'kickstarter',
-		title: 'Kickstarter',
+		title: getTitle( 'Kickstarter' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Kickstarter content.' ),
 		patterns: [
@@ -210,7 +219,7 @@ const variations = [
 	},
 	{
 		name: 'mixcloud',
-		title: 'Mixcloud',
+		title: getTitle( 'Mixcloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Mixcloud content.' ),
@@ -218,17 +227,17 @@ const variations = [
 		attributes: { providerNameSlug: 'mixcloud', responsive: true },
 	},
 	{
-		name: 'pocketcasts',
-		title: 'Pocket Casts',
+		name: 'pocket-casts',
+		title: getTitle( 'Pocket Casts' ),
 		icon: embedPocketCastsIcon,
 		keywords: [ __( 'podcast' ), __( 'audio' ) ],
 		description: __( 'Embed a podcast player from Pocket Casts.' ),
 		patterns: [ /^https:\/\/pca.st\/\w+/i ],
-		attributes: { providerNameSlug: 'pocketcasts', responsive: true },
+		attributes: { providerNameSlug: 'pocket-casts', responsive: true },
 	},
 	{
 		name: 'reddit',
-		title: 'Reddit',
+		title: getTitle( 'Reddit' ),
 		icon: embedRedditIcon,
 		description: __( 'Embed a Reddit thread.' ),
 		patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ],
@@ -236,7 +245,7 @@ const variations = [
 	},
 	{
 		name: 'reverbnation',
-		title: 'ReverbNation',
+		title: getTitle( 'ReverbNation' ),
 		icon: embedAudioIcon,
 		description: __( 'Embed ReverbNation content.' ),
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
@@ -244,7 +253,7 @@ const variations = [
 	},
 	{
 		name: 'screencast',
-		title: 'Screencast',
+		title: getTitle( 'Screencast' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed Screencast content.' ),
 		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
@@ -252,23 +261,15 @@ const variations = [
 	},
 	{
 		name: 'scribd',
-		title: 'Scribd',
+		title: getTitle( 'Scribd' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Scribd content.' ),
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
 		attributes: { providerNameSlug: 'scribd', responsive: true },
 	},
-	{
-		name: 'slideshare',
-		title: 'Slideshare',
-		icon: embedContentIcon,
-		description: __( 'Embed Slideshare content.' ),
-		patterns: [ /^https?:\/\/(.+?\.)?slideshare\.net\/.+/i ],
-		attributes: { providerNameSlug: 'slideshare', responsive: true },
-	},
 	{
 		name: 'smugmug',
-		title: 'SmugMug',
+		title: getTitle( 'SmugMug' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed SmugMug content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ],
@@ -280,7 +281,7 @@ const variations = [
 	},
 	{
 		name: 'speaker-deck',
-		title: 'Speaker Deck',
+		title: getTitle( 'Speaker Deck' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Speaker Deck content.' ),
 		patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ],
@@ -288,7 +289,7 @@ const variations = [
 	},
 	{
 		name: 'tiktok',
-		title: 'TikTok',
+		title: getTitle( 'TikTok' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a TikTok video.' ),
@@ -297,7 +298,7 @@ const variations = [
 	},
 	{
 		name: 'ted',
-		title: 'TED',
+		title: getTitle( 'TED' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a TED video.' ),
 		patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ],
@@ -305,7 +306,7 @@ const variations = [
 	},
 	{
 		name: 'tumblr',
-		title: 'Tumblr',
+		title: getTitle( 'Tumblr' ),
 		icon: embedTumblrIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Tumblr post.' ),
@@ -314,7 +315,7 @@ const variations = [
 	},
 	{
 		name: 'videopress',
-		title: 'VideoPress',
+		title: getTitle( 'VideoPress' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a VideoPress video.' ),
@@ -323,7 +324,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress-tv',
-		title: 'WordPress.tv',
+		title: getTitle( 'WordPress.tv' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a WordPress.tv video.' ),
 		patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ],
@@ -331,7 +332,7 @@ const variations = [
 	},
 	{
 		name: 'amazon-kindle',
-		title: 'Amazon Kindle',
+		title: getTitle( 'Amazon Kindle' ),
 		icon: embedAmazonIcon,
 		keywords: [ __( 'ebook' ) ],
 		description: __( 'Embed Amazon Kindle content.' ),
@@ -343,7 +344,7 @@ const variations = [
 	},
 	{
 		name: 'pinterest',
-		title: 'Pinterest',
+		title: getTitle( 'Pinterest' ),
 		icon: embedPinterestIcon,
 		keywords: [ __( 'social' ), __( 'bookmark' ) ],
 		description: __( 'Embed Pinterest pins, boards, and profiles.' ),
@@ -354,12 +355,20 @@ const variations = [
 	},
 	{
 		name: 'wolfram-cloud',
-		title: 'Wolfram',
+		title: getTitle( 'Wolfram' ),
 		icon: embedWolframIcon,
 		description: __( 'Embed Wolfram notebook content.' ),
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
 		attributes: { providerNameSlug: 'wolfram-cloud', responsive: true },
 	},
+	{
+		name: 'bluesky',
+		title: getTitle( 'Bluesky' ),
+		icon: embedBlueskyIcon,
+		description: __( 'Embed a Bluesky post.' ),
+		patterns: [ /^https?:\/\/bsky\.app\/profile\/.+\/post\/.+/i ],
+		attributes: { providerNameSlug: 'bluesky' },
+	},
 ];
 
 /**
@@ -368,7 +377,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.providerNameSlug ===
 		variationAttributes.providerNameSlug;
diff --git a/packages/block-library/src/embed/wp-embed-preview.js b/packages/block-library/src/embed/wp-embed-preview.js
index 0e812ffa647e3e..ad68bc3f7aadd6 100644
--- a/packages/block-library/src/embed/wp-embed-preview.js
+++ b/packages/block-library/src/embed/wp-embed-preview.js
@@ -4,7 +4,7 @@
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import { useRef, useEffect, useMemo } from '@wordpress/element';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
 
 const attributeMap = {
 	class: 'className',
@@ -20,10 +20,14 @@ export default function WpEmbedPreview( { html } ) {
 		const iframe = doc.querySelector( 'iframe' );
 		const iframeProps = {};
 
-		if ( ! iframe ) return iframeProps;
+		if ( ! iframe ) {
+			return iframeProps;
+		}
 
 		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
-			if ( name === 'style' ) return;
+			if ( name === 'style' ) {
+				return;
+			}
 			iframeProps[ attributeMap[ name ] || name ] = value;
 		} );
 
diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index 8e90825a64dfd4..2c5e888c2aff64 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/file",
 	"title": "File",
 	"category": "media",
@@ -11,8 +11,13 @@
 		"id": {
 			"type": "number"
 		},
+		"blob": {
+			"type": "string",
+			"role": "local"
+		},
 		"href": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"fileId": {
 			"type": "string",
@@ -21,15 +26,17 @@
 			"attribute": "id"
 		},
 		"fileName": {
-			"type": "string",
-			"source": "html",
-			"selector": "a:not([download])"
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "a:not([download])",
+			"role": "content"
 		},
 		"textLinkHref": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a:not([download])",
-			"attribute": "href"
+			"attribute": "href",
+			"role": "content"
 		},
 		"textLinkTarget": {
 			"type": "string",
@@ -42,9 +49,10 @@
 			"default": true
 		},
 		"downloadButtonText": {
-			"type": "string",
-			"source": "html",
-			"selector": "a[download]"
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "a[download]",
+			"role": "content"
 		},
 		"displayPreview": {
 			"type": "boolean"
@@ -56,9 +64,34 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
+		"interactivity": true
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }
diff --git a/packages/block-library/src/file/deprecated.js b/packages/block-library/src/file/deprecated.js
index ba053cb05019dd..51b3704205b38a 100644
--- a/packages/block-library/src/file/deprecated.js
+++ b/packages/block-library/src/file/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -127,11 +127,11 @@ const v3 = {
 					{ showDownloadButton && (
 						<a
 							href={ href }
-							className={ classnames(
+							className={ clsx(
 								'wp-block-file__button',
 								__experimentalGetElementClassName( 'button' )
 							) }
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -259,7 +259,7 @@ const v2 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -372,7 +372,7 @@ const v1 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 						>
 							<RichText.Content value={ downloadButtonText } />
 						</a>
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index 733cdf9a9351fc..838b807507d314 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	ResizableBox,
@@ -23,7 +23,7 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
@@ -35,6 +35,8 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
+import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -62,7 +64,6 @@ function ClipboardToolbarButton( { text, disabled } ) {
 function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		id,
-		fileId,
 		fileName,
 		href,
 		textLinkHref,
@@ -72,13 +73,13 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const { media, mediaUpload } = useSelect(
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+	const { media } = useSelect(
 		( select ) => ( {
 			media:
 				id === undefined
 					? undefined
 					: select( coreStore ).getMedia( id ),
-			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
 		} ),
 		[ id ]
 	);
@@ -87,45 +88,63 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	useEffect( () => {
-		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
-
-			mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
-			} );
-
-			revokeBlobURL( href );
-		}
-
-		if ( downloadButtonText === undefined ) {
-			changeDownloadButtonText( _x( 'Download', 'button label' ) );
-		}
-	}, [] );
+	useUploadMediaFromBlobURL( {
+		url: temporaryURL,
+		onChange: onSelectFile,
+		onError: onUploadError,
+	} );
 
+	// Note: Handle setting a default value for `downloadButtonText` via HTML API
+	// when it supports replacing text content for HTML tags.
 	useEffect( () => {
-		if ( ! fileId && href ) {
-			// Add a unique fileId to each file block.
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { fileId: `wp-block-file--media-${ clientId }` } );
+			setAttributes( {
+				downloadButtonText: _x( 'Download', 'button label' ),
+			} );
 		}
-	}, [ href, fileId, clientId ] );
+		// This effect should only run on mount.
+	}, [] );
 
 	function onSelectFile( newMedia ) {
-		if ( newMedia && newMedia.url ) {
-			const isPdf = newMedia.url.endsWith( '.pdf' );
+		if ( ! newMedia || ! newMedia.url ) {
+			// Reset attributes.
 			setAttributes( {
-				href: newMedia.url,
-				fileName: newMedia.title,
-				textLinkHref: newMedia.url,
-				id: newMedia.id,
-				displayPreview: isPdf ? true : undefined,
-				previewHeight: isPdf ? 600 : undefined,
+				href: undefined,
+				fileName: undefined,
+				textLinkHref: undefined,
+				id: undefined,
+				fileId: undefined,
+				displayPreview: undefined,
+				previewHeight: undefined,
 			} );
+			setTemporaryURL();
+			return;
 		}
+
+		if ( isBlobURL( newMedia.url ) ) {
+			setTemporaryURL( newMedia.url );
+			return;
+		}
+
+		const isPdf = newMedia.url.endsWith( '.pdf' );
+		const pdfAttributes = {
+			displayPreview: isPdf
+				? attributes.displayPreview ?? true
+				: undefined,
+			previewHeight: isPdf ? attributes.previewHeight ?? 600 : undefined,
+		};
+
+		setAttributes( {
+			href: newMedia.url,
+			fileName: newMedia.title,
+			textLinkHref: newMedia.url,
+			id: newMedia.id,
+			fileId: `wp-block-file--media-${ clientId }`,
+			blob: undefined,
+			...pdfAttributes,
+		} );
+		setTemporaryURL();
 	}
 
 	function onUploadError( message ) {
@@ -148,13 +167,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( { showDownloadButton: newValue } );
 	}
 
-	function changeDownloadButtonText( newValue ) {
-		// Remove anchor tags from button text content.
-		setAttributes( {
-			downloadButtonText: newValue.replace( /<\/?a[^>]*>/g, '' ),
-		} );
-	}
-
 	function changeDisplayPreview( newValue ) {
 		setAttributes( { displayPreview: newValue } );
 	}
@@ -177,17 +189,17 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const attachmentPage = media && media.link;
 
 	const blockProps = useBlockProps( {
-		className: classnames(
-			isBlobURL( href ) && getAnimateClassName( { type: 'loading' } ),
+		className: clsx(
+			!! temporaryURL && getAnimateClassName( { type: 'loading' } ),
 			{
-				'is-transient': isBlobURL( href ),
+				'is-transient': !! temporaryURL,
 			}
 		),
 	} );
 
 	const displayPreviewInEditor = browserSupportsPdfs() && displayPreview;
 
-	if ( ! href ) {
+	if ( ! href && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -195,7 +207,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					labels={ {
 						title: __( 'File' ),
 						instructions: __(
-							'Upload a file or pick one from your media library.'
+							'Drag and drop a file, upload, or choose from your library.'
 						),
 					} }
 					onSelect={ onSelectFile }
@@ -209,7 +221,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	return (
 		<>
 			<FileBlockInspector
-				hrefs={ { href, textLinkHref, attachmentPage } }
+				hrefs={ {
+					href: href || temporaryURL,
+					textLinkHref,
+					attachmentPage,
+				} }
 				{ ...{
 					openInNewWindow: !! textLinkTarget,
 					showDownloadButton,
@@ -229,6 +245,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					accept="*"
 					onSelect={ onSelectFile }
 					onError={ onUploadError }
+					onReset={ () => onSelectFile( undefined ) }
 				/>
 				<ClipboardToolbarButton
 					text={ href }
@@ -270,28 +287,28 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						) }
 					</ResizableBox>
 				) }
-				<div className={ 'wp-block-file__content-wrapper' }>
+				<div className="wp-block-file__content-wrapper">
 					<RichText
+						identifier="fileName"
 						tagName="a"
 						value={ fileName }
 						placeholder={ __( 'Write file name…' ) }
 						withoutInteractiveFormatting
 						onChange={ ( text ) =>
-							setAttributes( { fileName: text } )
+							setAttributes( {
+								fileName: removeAnchorTag( text ),
+							} )
 						}
 						href={ textLinkHref }
 					/>
 					{ showDownloadButton && (
-						<div
-							className={
-								'wp-block-file__button-richtext-wrapper'
-							}
-						>
+						<div className="wp-block-file__button-richtext-wrapper">
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
 							<RichText
+								identifier="downloadButtonText"
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ classnames(
+								className={ clsx(
 									'wp-block-file__button',
 									__experimentalGetElementClassName(
 										'button'
@@ -301,7 +318,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }
 								onChange={ ( text ) =>
-									changeDownloadButtonText( text )
+									setAttributes( {
+										downloadButtonText:
+											removeAnchorTag( text ),
+									} )
 								}
 							/>
 						</div>
diff --git a/packages/block-library/src/file/edit.native.js b/packages/block-library/src/file/edit.native.js
index 3b38f9e78d6eef..a531ba93c40327 100644
--- a/packages/block-library/src/file/edit.native.js
+++ b/packages/block-library/src/file/edit.native.js
@@ -97,7 +97,7 @@ export class FileEdit extends Component {
 		const { attributes, setAttributes } = this.props;
 		const { downloadButtonText } = attributes;
 
-		if ( downloadButtonText === undefined || downloadButtonText === '' ) {
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );
@@ -282,7 +282,7 @@ export class FileEdit extends Component {
 						value={ textLinkHref }
 						onChange={ this.onChangeLinkDestinationOption }
 						options={ linkDestinationOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 					<ToggleControl
 						icon={ external }
@@ -466,11 +466,10 @@ export class FileEdit extends Component {
 										__unstableMobileNoFocusOnMount
 										onChange={ this.onChangeFileName }
 										placeholder={ __( 'File name' ) }
-										rootTagsToEliminate={ [ 'p' ] }
 										tagName="p"
 										underlineColorAndroid="transparent"
 										value={ fileName }
-										deleteEnter={ true }
+										deleteEnter
 										textAlign={ this.getTextAlignmentForAlignment(
 											align
 										) }
@@ -502,12 +501,11 @@ export class FileEdit extends Component {
 											<RichText
 												withoutInteractiveFormatting
 												__unstableMobileNoFocusOnMount
-												rootTagsToEliminate={ [ 'p' ] }
 												tagName="p"
 												textAlign="center"
 												minWidth={ minWidth }
 												maxWidth={ this.state.maxWidth }
-												deleteEnter={ true }
+												deleteEnter
 												style={ styles.buttonText }
 												value={ downloadButtonText }
 												placeholder={ placeholderText }
@@ -554,7 +552,7 @@ export class FileEdit extends Component {
 					icon={ <BlockIcon icon={ icon } /> }
 					labels={ {
 						title: __( 'File' ),
-						instructions: __( 'CHOOSE A FILE' ),
+						instructions: __( 'Choose a file' ),
 					} }
 					onSelect={ this.onSelectFile }
 					onFocus={ this.props.onFocus }
@@ -567,7 +565,7 @@ export class FileEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_ANY ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectFile }
 				render={ ( { open, getMediaOptions } ) => {
 					return this.getFileComponent( open, getMediaOptions );
diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
index f9d1f544ada07c..1a38662381447e 100644
--- a/packages/block-library/src/file/editor.scss
+++ b/packages/block-library/src/file/editor.scss
@@ -4,6 +4,9 @@
 		// Stop file block from collapsing when floated.
 		height: auto;
 	}
+	.wp-block[data-align="center"] > & {
+		text-align: center;
+	}
 
 	display: flex;
 	flex-wrap: wrap;
@@ -35,6 +38,10 @@
 
 	a {
 		min-width: 1em;
+
+		&:not(.wp-block-file__button) {
+			display: inline-block;
+		}
 	}
 
 	.wp-block-file__button-richtext-wrapper {
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 9081b63a5e76b4..8ea668d56d8545 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -6,46 +6,50 @@
  */
 
 /**
- * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
+ * When the `core/file` block is rendering, check if we need to enqueue the `wp-block-file-view` script.
  *
- * @param array  $attributes The block attributes.
- * @param string $content    The block content.
+ * @since 5.8.0
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content ) {
-	$should_load_view_script = ! empty( $attributes['displayPreview'] ) && ! wp_script_is( 'wp-block-file-view' );
-	if ( $should_load_view_script ) {
-		wp_enqueue_script( 'wp-block-file-view' );
-	}
+	// If it's interactive, enqueue the script module and add the directives.
+	if ( ! empty( $attributes['displayPreview'] ) ) {
+		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
-	// Update object's aria-label attribute if present in block HTML.
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'data-wp-interactive', 'core/file' );
+		$processor->next_tag( 'object' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
 
-	// Match an aria-label attribute from an object tag.
-	$pattern = '@<object.+(?<attribute>aria-label="(?<filename>[^"]+)?")@i';
-	$content = preg_replace_callback(
-		$pattern,
-		function ( $matches ) {
-			$filename     = ! empty( $matches['filename'] ) ? $matches['filename'] : '';
-			$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
-			$label        = $has_filename ?
-				sprintf(
-					/* translators: %s: filename. */
-					__( 'Embed of %s.' ),
-					$filename
-				)
-				: __( 'PDF embed' );
+		$filename     = $processor->get_attribute( 'aria-label' );
+		$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
+		$label        = $has_filename ? sprintf(
+			/* translators: %s: filename. */
+			__( 'Embed of %s.' ),
+			$filename
+		) : __( 'PDF embed' );
 
-			return str_replace( $matches['attribute'], sprintf( 'aria-label="%s"', $label ), $matches[0] );
-		},
-		$content
-	);
+		// Update object's aria-label attribute if present in block HTML.
+		// Match an aria-label attribute from an object tag.
+		$processor->set_attribute( 'aria-label', $label );
+
+		return $processor->get_updated_html();
+	}
 
 	return $content;
 }
 
 /**
  * Registers the `core/file` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_file() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index 121f5e0473e767..c29f84f60ebace 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -43,6 +43,7 @@ export default function FileBlockInspector( {
 				{ href.endsWith( '.pdf' ) && (
 					<PanelBody title={ __( 'PDF settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show inline embed' ) }
 							help={
 								displayPreview
@@ -56,6 +57,8 @@ export default function FileBlockInspector( {
 						/>
 						{ displayPreview && (
 							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Height in pixels' ) }
 								min={ MIN_PREVIEW_HEIGHT }
 								max={ Math.max(
@@ -70,17 +73,21 @@ export default function FileBlockInspector( {
 				) }
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
 						options={ linkDestinationOptions }
 						onChange={ changeLinkDestinationOption }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }
 						onChange={ changeShowDownloadButton }
diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js
index 6d0684ac76b8ef..34b1046d6d2bbf 100644
--- a/packages/block-library/src/file/save.js
+++ b/packages/block-library/src/file/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,11 @@ export default function save( { attributes } ) {
 		previewHeight,
 	} = attributes;
 
-	const pdfEmbedLabel = RichText.isEmpty( fileName ) ? 'PDF embed' : fileName;
+	const pdfEmbedLabel = RichText.isEmpty( fileName )
+		? 'PDF embed'
+		: // To do: use toPlainText, but we need ensure it's RichTextData. See
+		  // https://github.com/WordPress/gutenberg/pull/56710.
+		  fileName.toString();
 
 	const hasFilename = ! RichText.isEmpty( fileName );
 
@@ -65,11 +69,11 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className={ classnames(
+						className={ clsx(
 							'wp-block-file__button',
 							__experimentalGetElementClassName( 'button' )
 						) }
-						download={ true }
+						download
 						aria-describedby={ describedById }
 					>
 						<RichText.Content value={ downloadButtonText } />
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index 3d3dc9b8ced481..31c76ff2641fb4 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -1,5 +1,6 @@
 .wp-block-file {
-	margin-bottom: 1.5em;
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	&:not(.wp-element-button) {
 		font-size: 0.8em;
@@ -19,6 +20,11 @@
 	}
 }
 
+// Lowest specificity to avoid overriding layout styles.
+:where(.wp-block-file) {
+	margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
 	margin-bottom: 1em;
 }
@@ -27,9 +33,9 @@
 :where(.wp-block-file__button) {
 	border-radius: 2em;
 	padding: 0.5em 1em;
+	display: inline-block;
 
 	&:is(a) {
-
 		&:hover,
 		&:visited,
 		&:focus,
diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
index 080c6fa338f8b2..5ce876137ade00 100644
--- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -4,7 +4,7 @@ exports[`File block renders file error state without crashing 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
+    [
       undefined,
       undefined,
     ]
@@ -12,7 +12,7 @@ exports[`File block renders file error state without crashing 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         undefined,
@@ -21,8 +21,12 @@ exports[`File block renders file error state without crashing 1`] = `
   />
   <View
     accessibilityState={
-      Object {
+      {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
     accessible={false}
@@ -40,33 +44,40 @@ exports[`File block renders file error state without crashing 1`] = `
     <Text
       onTextLayout={[Function]}
       style={
-        Object {
+        {
           "color": "gray",
         }
       }
-    >
-      
-    </Text>
+    />
     <View
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -96,15 +107,16 @@ exports[`File block renders file error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -113,19 +125,27 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           textAlign="left"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
       <View>
-        Svg
+        <Svg
+          height={24}
+          style={{}}
+          viewBox="-2 -2 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          Path
+        </Svg>
         <TextInput
           editable={false}
           fontFamily="serif"
           onChange={[Function]}
           scrollEnabled={false}
           style={
-            Array [
-              Object {
+            [
+              {
                 "fontFamily": "serif",
               },
               undefined,
@@ -137,15 +157,15 @@ exports[`File block renders file error state without crashing 1`] = `
     </View>
     <View
       style={
-        Array [
-          Array [
-            Object {
+        [
+          [
+            {
               "paddingLeft": 10,
               "paddingRight": 10,
             },
             undefined,
           ],
-          Object {
+          {
             "alignSelf": "flex-start",
           },
         ]
@@ -153,17 +173,26 @@ exports[`File block renders file error state without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -197,7 +226,7 @@ exports[`File block renders file error state without crashing 1`] = `
           placeholderTextColor="white"
           selectionColor="white"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "color": "white",
               "maxWidth": 80,
@@ -205,7 +234,7 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -214,7 +243,7 @@ exports[`File block renders file error state without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -226,7 +255,7 @@ exports[`File block renders file without crashing 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
+    [
       undefined,
       undefined,
     ]
@@ -234,7 +263,7 @@ exports[`File block renders file without crashing 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         undefined,
@@ -243,8 +272,12 @@ exports[`File block renders file without crashing 1`] = `
   />
   <View
     accessibilityState={
-      Object {
+      {
+        "busy": undefined,
+        "checked": undefined,
         "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
       }
     }
     accessible={false}
@@ -262,33 +295,40 @@ exports[`File block renders file without crashing 1`] = `
     <Text
       onTextLayout={[Function]}
       style={
-        Object {
+        {
           "color": "gray",
         }
       }
-    >
-      
-    </Text>
+    />
     <View
       style={
-        Object {
+        {
           "height": 44,
         }
       }
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -318,15 +358,16 @@ exports[`File block renders file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -335,21 +376,21 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           textAlign="left"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
     <View
       style={
-        Array [
-          Array [
-            Object {
+        [
+          [
+            {
               "paddingLeft": 10,
               "paddingRight": 10,
             },
             false,
           ],
-          Object {
+          {
             "alignSelf": "flex-start",
           },
         ]
@@ -357,17 +398,26 @@ exports[`File block renders file without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
         }
       >
         <RCTAztecView
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -401,7 +451,7 @@ exports[`File block renders file without crashing 1`] = `
           placeholderTextColor="white"
           selectionColor="white"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "color": "white",
               "maxWidth": 80,
@@ -409,7 +459,7 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -418,7 +468,7 @@ exports[`File block renders file without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -429,28 +479,19 @@ exports[`File block renders file without crashing 1`] = `
 exports[`File block renders placeholder without crashing 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
     }
   }
 >
   <View
-    accessibilityHint="Double tap to select"
-    accessibilityLabel="File block. Empty"
-    accessibilityRole="button"
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
-      Array [
-        Array [
-          undefined,
+      [
+        [
+          [
+            undefined,
+            false,
+          ],
           undefined,
           undefined,
         ],
@@ -458,25 +499,82 @@ exports[`File block renders placeholder without crashing 1`] = `
       ]
     }
   >
+    <View>
+      <View
+        style={
+          {
+            "fill": "black",
+          }
+        }
+      >
+        <View
+          style={{}}
+        >
+          <Svg
+            fill="black"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
+        </View>
+      </View>
+      <Text>
+        File
+      </Text>
+    </View>
     <View
+      accessibilityHint="Double tap to select"
+      accessibilityLabel="File block. Empty"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 22,
+          "left": 22,
+          "right": 22,
+          "top": 22,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Object {
-          "fill": "gray",
+        {
+          "opacity": 1,
         }
       }
     >
-      <View
-        style={Object {}}
-      >
-        Svg
-      </View>
+      <Text>
+        Choose a file
+      </Text>
     </View>
-    <Text>
-      File
-    </Text>
-    <Text>
-      CHOOSE A FILE
-    </Text>
   </View>
 </View>
 `;
diff --git a/packages/block-library/src/file/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/file/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..a9b6d4d57037d3
--- /dev/null
+++ b/packages/block-library/src/file/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`File block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`File block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/file/test/transforms.native.js b/packages/block-library/src/file/test/transforms.native.js
new file mode 100644
index 00000000000000..efaa507348c1cb
--- /dev/null
+++ b/packages/block-library/src/file/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'File';
+const initialHtml = `
+<!-- wp:file {"id":3,"href":"https://wordpress.org/latest.zip"} -->
+<div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: false,
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js
index 35dd9807daddd7..c381a62f783866 100644
--- a/packages/block-library/src/file/transforms.js
+++ b/packages/block-library/src/file/transforms.js
@@ -24,13 +24,32 @@ const transforms = {
 					const blobURL = createBlobURL( file );
 
 					// File will be uploaded in componentDidMount()
-					blocks.push(
-						createBlock( 'core/file', {
-							href: blobURL,
-							fileName: file.name,
-							textLinkHref: blobURL,
-						} )
-					);
+					if ( file.type.startsWith( 'video/' ) ) {
+						blocks.push(
+							createBlock( 'core/video', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else if ( file.type.startsWith( 'image/' ) ) {
+						blocks.push(
+							createBlock( 'core/image', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else if ( file.type.startsWith( 'audio/' ) ) {
+						blocks.push(
+							createBlock( 'core/audio', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else {
+						blocks.push(
+							createBlock( 'core/file', {
+								blob: blobURL,
+								fileName: file.name,
+							} )
+						);
+					}
 				} );
 
 				return blocks;
diff --git a/packages/block-library/src/file/utils.js b/packages/block-library/src/file/utils.js
deleted file mode 100644
index e1eed7a2d2808e..00000000000000
--- a/packages/block-library/src/file/utils.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Uses a combination of user agent matching and feature detection to determine whether
- * the current browser supports rendering PDFs inline.
- *
- * @return {boolean} Whether or not the browser supports inline PDFs.
- */
-export const browserSupportsPdfs = () => {
-	// Most mobile devices include "Mobi" in their UA.
-	if ( window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ) {
-		return false;
-	}
-
-	// Android tablets are the noteable exception.
-	if ( window.navigator.userAgent.indexOf( 'Android' ) > -1 ) {
-		return false;
-	}
-
-	// iPad pretends to be a Mac.
-	if (
-		window.navigator.userAgent.indexOf( 'Macintosh' ) > -1 &&
-		window.navigator.maxTouchPoints &&
-		window.navigator.maxTouchPoints > 2
-	) {
-		return false;
-	}
-
-	// IE only supports PDFs when there's an ActiveX object available for it.
-	if (
-		!! ( window.ActiveXObject || 'ActiveXObject' in window ) &&
-		! (
-			createActiveXObject( 'AcroPDF.PDF' ) ||
-			createActiveXObject( 'PDF.PdfCtrl' )
-		)
-	) {
-		return false;
-	}
-
-	return true;
-};
-
-/**
- * Helper function for creating ActiveX objects, catching any errors that are thrown
- * when it's generated.
- *
- * @param {string} type The name of the ActiveX object to create.
- * @return {window.ActiveXObject|undefined} The generated ActiveXObject, or null if it failed.
- */
-const createActiveXObject = ( type ) => {
-	let ax;
-	try {
-		ax = new window.ActiveXObject( type );
-	} catch ( e ) {
-		ax = undefined;
-	}
-	return ax;
-};
-
-/**
- * Hides all .wp-block-file__embed elements on the document. This function is only intended
- * to be run on the front-end, it may have weird side effects running in the block editor.
- */
-export const hidePdfEmbedsOnUnsupportedBrowsers = () => {
-	if ( ! browserSupportsPdfs() ) {
-		const embeds = document.getElementsByClassName(
-			'wp-block-file__embed'
-		);
-		Array.from( embeds ).forEach( ( embed ) => {
-			embed.style.display = 'none';
-		} );
-	}
-};
diff --git a/packages/block-library/src/file/utils/index.js b/packages/block-library/src/file/utils/index.js
new file mode 100644
index 00000000000000..a60e9e131c4e45
--- /dev/null
+++ b/packages/block-library/src/file/utils/index.js
@@ -0,0 +1,56 @@
+/**
+ * Uses a combination of user agent matching and feature detection to determine whether
+ * the current browser supports rendering PDFs inline.
+ *
+ * @return {boolean} Whether or not the browser supports inline PDFs.
+ */
+export const browserSupportsPdfs = () => {
+	// Most mobile devices include "Mobi" in their UA.
+	if ( window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ) {
+		return false;
+	}
+
+	// Android tablets are the noteable exception.
+	if ( window.navigator.userAgent.indexOf( 'Android' ) > -1 ) {
+		return false;
+	}
+
+	// iPad pretends to be a Mac.
+	if (
+		window.navigator.userAgent.indexOf( 'Macintosh' ) > -1 &&
+		window.navigator.maxTouchPoints &&
+		window.navigator.maxTouchPoints > 2
+	) {
+		return false;
+	}
+
+	// IE only supports PDFs when there's an ActiveX object available for it.
+	if (
+		!! ( window.ActiveXObject || 'ActiveXObject' in window ) &&
+		! (
+			createActiveXObject( 'AcroPDF.PDF' ) ||
+			createActiveXObject( 'PDF.PdfCtrl' )
+		)
+	) {
+		return false;
+	}
+
+	return true;
+};
+
+/**
+ * Helper function for creating ActiveX objects, catching any errors that are thrown
+ * when it's generated.
+ *
+ * @param {string} type The name of the ActiveX object to create.
+ * @return {window.ActiveXObject|undefined} The generated ActiveXObject, or null if it failed.
+ */
+const createActiveXObject = ( type ) => {
+	let ax;
+	try {
+		ax = new window.ActiveXObject( type );
+	} catch ( e ) {
+		ax = undefined;
+	}
+	return ax;
+};
diff --git a/packages/block-library/src/file/view.js b/packages/block-library/src/file/view.js
index 820fdb507ad8e7..62c31b7b365ff2 100644
--- a/packages/block-library/src/file/view.js
+++ b/packages/block-library/src/file/view.js
@@ -1,6 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
+import { browserSupportsPdfs } from './utils';
 
-hidePdfEmbedsOnUnsupportedBrowsers();
+store(
+	'core/file',
+	{
+		state: {
+			get hasPdfPreview() {
+				return browserSupportsPdfs();
+			},
+		},
+	},
+	{ lock: true }
+);
diff --git a/packages/block-library/src/footnotes/block.json b/packages/block-library/src/footnotes/block.json
new file mode 100644
index 00000000000000..1fe74abb471ee5
--- /dev/null
+++ b/packages/block-library/src/footnotes/block.json
@@ -0,0 +1,64 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/footnotes",
+	"title": "Footnotes",
+	"category": "text",
+	"description": "Display footnotes added to the page.",
+	"keywords": [ "references" ],
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"supports": {
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": false,
+				"color": false,
+				"width": false,
+				"style": false
+			}
+		},
+		"color": {
+			"background": true,
+			"link": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"link": true,
+				"text": true
+			}
+		},
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"style": "wp-block-footnotes"
+}
diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js
new file mode 100644
index 00000000000000..88254657ced3c4
--- /dev/null
+++ b/packages/block-library/src/footnotes/edit.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon, RichText, useBlockProps } from '@wordpress/block-editor';
+import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+import { formatListNumbered as icon } from '@wordpress/icons';
+
+export default function FootnotesEdit( { context: { postType, postId } } ) {
+	const [ meta, updateMeta ] = useEntityProp(
+		'postType',
+		postType,
+		'meta',
+		postId
+	);
+	const footnotesSupported = 'string' === typeof meta?.footnotes;
+	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+	const blockProps = useBlockProps();
+
+	if ( ! footnotesSupported ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					instructions={ __(
+						'Footnotes are not supported here. Add this block to post or page content.'
+					) }
+				/>
+			</div>
+		);
+	}
+
+	if ( ! footnotes.length ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					instructions={ __(
+						'Footnotes found in blocks within this document will be displayed here.'
+					) }
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<ol { ...blockProps }>
+			{ footnotes.map( ( { id, content } ) => (
+				/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+				<li
+					key={ id }
+					onMouseDown={ ( event ) => {
+						// When clicking on the list item (not on descendants),
+						// focus the rich text element since it's only 1px wide when
+						// empty.
+						if ( event.target === event.currentTarget ) {
+							event.target.firstElementChild.focus();
+							event.preventDefault();
+						}
+					} }
+				>
+					<RichText
+						id={ id }
+						tagName="span"
+						value={ content }
+						identifier={ id }
+						// To do: figure out why the browser is not scrolling
+						// into view when it receives focus.
+						onFocus={ ( event ) => {
+							if ( ! event.target.textContent.trim() ) {
+								event.target.scrollIntoView();
+							}
+						} }
+						onChange={ ( nextFootnote ) => {
+							updateMeta( {
+								...meta,
+								footnotes: JSON.stringify(
+									footnotes.map( ( footnote ) => {
+										return footnote.id === id
+											? {
+													content: nextFootnote,
+													id,
+											  }
+											: footnote;
+									} )
+								),
+							} );
+						} }
+					/>{ ' ' }
+					<a href={ `#${ id }-link` }>↩︎</a>
+				</li>
+			) ) }
+		</ol>
+	);
+}
diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js
new file mode 100644
index 00000000000000..d160552e294349
--- /dev/null
+++ b/packages/block-library/src/footnotes/format.js
@@ -0,0 +1,192 @@
+/**
+ * External dependencies
+ */
+import { v4 as createId } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { formatListNumbered as icon } from '@wordpress/icons';
+import { insertObject } from '@wordpress/rich-text';
+import {
+	RichTextToolbarButton,
+	store as blockEditorStore,
+	privateApis,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { usesContextKey } = unlock( privateApis );
+
+export const formatName = 'core/footnote';
+
+const POST_CONTENT_BLOCK_NAME = 'core/post-content';
+const SYNCED_PATTERN_BLOCK_NAME = 'core/block';
+
+export const format = {
+	title: __( 'Footnote' ),
+	tagName: 'sup',
+	className: 'fn',
+	attributes: {
+		'data-fn': 'data-fn',
+	},
+	interactive: true,
+	contentEditable: false,
+	[ usesContextKey ]: [ 'postType', 'postId' ],
+	edit: function Edit( {
+		value,
+		onChange,
+		isObjectActive,
+		context: { postType, postId },
+	} ) {
+		const registry = useRegistry();
+		const {
+			getSelectedBlockClientId,
+			getBlocks,
+			getBlockRootClientId,
+			getBlockName,
+			getBlockParentsByBlockName,
+		} = registry.select( blockEditorStore );
+		const isFootnotesSupported = useSelect(
+			( select ) => {
+				if (
+					! select( blocksStore ).getBlockType( 'core/footnotes' )
+				) {
+					return false;
+				}
+
+				const allowedBlocks =
+					select( blockEditorStore ).getSettings().allowedBlockTypes;
+				if (
+					allowedBlocks === false ||
+					( Array.isArray( allowedBlocks ) &&
+						! allowedBlocks.includes( 'core/footnotes' ) )
+				) {
+					return false;
+				}
+
+				const entityRecord = select( coreDataStore ).getEntityRecord(
+					'postType',
+					postType,
+					postId
+				);
+
+				if ( 'string' !== typeof entityRecord?.meta?.footnotes ) {
+					return false;
+				}
+
+				// Checks if the selected block lives within a pattern.
+				const {
+					getBlockParentsByBlockName: _getBlockParentsByBlockName,
+					getSelectedBlockClientId: _getSelectedBlockClientId,
+				} = select( blockEditorStore );
+				const parentCoreBlocks = _getBlockParentsByBlockName(
+					_getSelectedBlockClientId(),
+					SYNCED_PATTERN_BLOCK_NAME
+				);
+				return ! parentCoreBlocks || parentCoreBlocks.length === 0;
+			},
+			[ postType, postId ]
+		);
+
+		const { selectionChange, insertBlock } =
+			useDispatch( blockEditorStore );
+
+		if ( ! isFootnotesSupported ) {
+			return null;
+		}
+
+		function onClick() {
+			registry.batch( () => {
+				let id;
+				if ( isObjectActive ) {
+					const object = value.replacements[ value.start ];
+					id = object?.attributes?.[ 'data-fn' ];
+				} else {
+					id = createId();
+					const newValue = insertObject(
+						value,
+						{
+							type: formatName,
+							attributes: {
+								'data-fn': id,
+							},
+							innerHTML: `<a href="#${ id }" id="${ id }-link">*</a>`,
+						},
+						value.end,
+						value.end
+					);
+					newValue.start = newValue.end - 1;
+					onChange( newValue );
+				}
+
+				const selectedClientId = getSelectedBlockClientId();
+
+				/*
+				 * Attempts to find a common parent post content block.
+				 * This allows for locating blocks within a page edited in the site editor.
+				 */
+				const parentPostContent = getBlockParentsByBlockName(
+					selectedClientId,
+					POST_CONTENT_BLOCK_NAME
+				);
+
+				// When called with a post content block, getBlocks will return
+				// the block with controlled inner blocks included.
+				const blocks = parentPostContent.length
+					? getBlocks( parentPostContent[ 0 ] )
+					: getBlocks();
+
+				// BFS search to find the first footnote block.
+				let fnBlock = null;
+				{
+					const queue = [ ...blocks ];
+					while ( queue.length ) {
+						const block = queue.shift();
+						if ( block.name === 'core/footnotes' ) {
+							fnBlock = block;
+							break;
+						}
+						queue.push( ...block.innerBlocks );
+					}
+				}
+
+				// Maybe this should all also be moved to the entity provider.
+				// When there is no footnotes block in the post, create one and
+				// insert it at the bottom.
+				if ( ! fnBlock ) {
+					let rootClientId = getBlockRootClientId( selectedClientId );
+
+					while (
+						rootClientId &&
+						getBlockName( rootClientId ) !== POST_CONTENT_BLOCK_NAME
+					) {
+						rootClientId = getBlockRootClientId( rootClientId );
+					}
+
+					fnBlock = createBlock( 'core/footnotes' );
+
+					insertBlock( fnBlock, undefined, rootClientId );
+				}
+
+				selectionChange( fnBlock.clientId, id, 0, 0 );
+			} );
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ icon }
+				title={ __( 'Footnote' ) }
+				onClick={ onClick }
+				isActive={ isObjectActive }
+			/>
+		);
+	},
+};
diff --git a/packages/block-library/src/footnotes/index.js b/packages/block-library/src/footnotes/index.js
new file mode 100644
index 00000000000000..ba5da984fd71ef
--- /dev/null
+++ b/packages/block-library/src/footnotes/index.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { formatListNumbered as icon } from '@wordpress/icons';
+import { registerFormatType } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import { formatName, format } from './format';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => {
+	registerFormatType( formatName, format );
+	initBlock( { name, metadata, settings } );
+};
diff --git a/packages/block-library/src/footnotes/index.php b/packages/block-library/src/footnotes/index.php
new file mode 100644
index 00000000000000..380c093c8117ed
--- /dev/null
+++ b/packages/block-library/src/footnotes/index.php
@@ -0,0 +1,142 @@
+<?php
+/**
+ * Server-side rendering of the `core/footnotes` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/footnotes` block on the server.
+ *
+ * @since 6.3.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the HTML representing the footnotes.
+ */
+function render_block_core_footnotes( $attributes, $content, $block ) {
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	if ( post_password_required( $block->context['postId'] ) ) {
+		return;
+	}
+
+	$footnotes = get_post_meta( $block->context['postId'], 'footnotes', true );
+
+	if ( ! $footnotes ) {
+		return;
+	}
+
+	$footnotes = json_decode( $footnotes, true );
+
+	if ( ! is_array( $footnotes ) || count( $footnotes ) === 0 ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	$footnote_index     = 1;
+
+	$block_content = '';
+
+	foreach ( $footnotes as $footnote ) {
+		// Translators: %d: Integer representing the number of return links on the page.
+		$aria_label     = sprintf( __( 'Jump to footnote reference %1$d' ), $footnote_index );
+		$block_content .= sprintf(
+			'<li id="%1$s">%2$s <a href="#%1$s-link" aria-label="%3$s">↩︎</a></li>',
+			$footnote['id'],
+			$footnote['content'],
+			$aria_label
+		);
+		++$footnote_index;
+	}
+
+	return sprintf(
+		'<ol %1$s>%2$s</ol>',
+		$wrapper_attributes,
+		$block_content
+	);
+}
+
+/**
+ * Registers the `core/footnotes` block on the server.
+ *
+ * @since 6.3.0
+ */
+function register_block_core_footnotes() {
+	register_block_type_from_metadata(
+		__DIR__ . '/footnotes',
+		array(
+			'render_callback' => 'render_block_core_footnotes',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_footnotes' );
+
+
+/**
+ * Registers the footnotes meta field required for footnotes to work.
+ *
+ * @since 6.5.0
+ */
+function register_block_core_footnotes_post_meta() {
+	$post_types = get_post_types( array( 'show_in_rest' => true ) );
+	foreach ( $post_types as $post_type ) {
+		// Only register the meta field if the post type supports the editor, custom fields, and revisions.
+		if (
+			post_type_supports( $post_type, 'editor' ) &&
+			post_type_supports( $post_type, 'custom-fields' ) &&
+			post_type_supports( $post_type, 'revisions' )
+		) {
+			register_post_meta(
+				$post_type,
+				'footnotes',
+				array(
+					'show_in_rest'      => true,
+					'single'            => true,
+					'type'              => 'string',
+					'revisions_enabled' => true,
+				)
+			);
+		}
+	}
+}
+/*
+ * Most post types are registered at priority 10, so use priority 20 here in
+ * order to catch them.
+*/
+add_action( 'init', 'register_block_core_footnotes_post_meta', 20 );
+
+/**
+ * Adds the footnotes field to the revisions display.
+ *
+ * @since 6.3.0
+ *
+ * @param array $fields The revision fields.
+ * @return array The revision fields.
+ */
+function wp_add_footnotes_to_revision( $fields ) {
+	$fields['footnotes'] = __( 'Footnotes' );
+	return $fields;
+}
+add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
+
+/**
+ * Gets the footnotes field from the revision for the revisions screen.
+ *
+ * @since 6.3.0
+ *
+ * @param string $revision_field The field value, but $revision->$field
+ *                               (footnotes) does not exist.
+ * @param string $field          The field name, in this case "footnotes".
+ * @param object $revision       The revision object to compare against.
+ * @return string The field value.
+ */
+function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
+	return get_metadata( 'post', $revision->ID, $field, true );
+}
+add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
diff --git a/packages/block-library/src/footnotes/init.js b/packages/block-library/src/footnotes/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/footnotes/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/footnotes/style.scss b/packages/block-library/src/footnotes/style.scss
new file mode 100644
index 00000000000000..aa7ab8b6951dd3
--- /dev/null
+++ b/packages/block-library/src/footnotes/style.scss
@@ -0,0 +1,21 @@
+// These styles are for backwards compatibility with the old footnotes anchors.
+// Can be removed in the future.
+.editor-styles-wrapper,
+.entry-content {
+	counter-reset: footnotes;
+}
+
+a[data-fn].fn {
+	vertical-align: super;
+	font-size: smaller;
+	counter-increment: footnotes;
+	display: inline-flex;
+	text-decoration: none;
+	text-indent: -9999999px;
+}
+
+a[data-fn].fn::after {
+	content: "[" counter(footnotes) "]";
+	text-indent: 0;
+	float: left;
+}
diff --git a/packages/block-library/src/form-input/block.json b/packages/block-library/src/form-input/block.json
new file mode 100644
index 00000000000000..386c90ac207ad4
--- /dev/null
+++ b/packages/block-library/src/form-input/block.json
@@ -0,0 +1,73 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-input",
+	"title": "Input Field",
+	"category": "common",
+	"ancestor": [ "core/form" ],
+	"description": "The basic building block for forms.",
+	"keywords": [ "input", "form" ],
+	"textdomain": "default",
+	"icon": "forms",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "text"
+		},
+		"name": {
+			"type": "string"
+		},
+		"label": {
+			"type": "rich-text",
+			"default": "Label",
+			"selector": ".wp-block-form-input__label-content",
+			"source": "rich-text",
+			"role": "content"
+		},
+		"inlineLabel": {
+			"type": "boolean",
+			"default": false
+		},
+		"required": {
+			"type": "boolean",
+			"default": false,
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "required"
+		},
+		"placeholder": {
+			"type": "string",
+			"selector": ".wp-block-form-input__input",
+			"source": "attribute",
+			"attribute": "placeholder",
+			"role": "content"
+		},
+		"value": {
+			"type": "string",
+			"default": "",
+			"selector": "input",
+			"source": "attribute",
+			"attribute": "value"
+		},
+		"visibilityPermissions": {
+			"type": "string",
+			"default": "all"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"reusable": false,
+		"spacing": {
+			"margin": [ "top", "bottom" ]
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
+		}
+	},
+	"style": [ "wp-block-form-input" ]
+}
diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
new file mode 100644
index 00000000000000..d974cca387a188
--- /dev/null
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+const getNameFromLabelV1 = ( content ) => {
+	return (
+		removeAccents( stripHTML( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'text',
+		},
+		name: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+			default: 'Label',
+			selector: '.wp-block-form-input__label-content',
+			source: 'html',
+			role: 'content',
+		},
+		inlineLabel: {
+			type: 'boolean',
+			default: false,
+		},
+		required: {
+			type: 'boolean',
+			default: false,
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'required',
+		},
+		placeholder: {
+			type: 'string',
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'placeholder',
+			role: 'content',
+		},
+		value: {
+			type: 'string',
+			default: '',
+			selector: 'input',
+			source: 'attribute',
+			attribute: 'value',
+		},
+		visibilityPermissions: {
+			type: 'string',
+			default: 'all',
+		},
+	},
+	supports: {
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		const blockProps = useBlockProps.save();
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		return (
+			<div { ...blockProps }>
+				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+				<label
+					className={ clsx( 'wp-block-form-input__label', {
+						'is-label-inline': inlineLabel,
+					} ) }
+				>
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+					<TagName
+						className={ inputClasses }
+						type={ 'textarea' === type ? undefined : type }
+						name={ name || getNameFromLabelV1( label ) }
+						required={ required }
+						aria-required={ required }
+						placeholder={ placeholder || undefined }
+						style={ inputStyle }
+					/>
+				</label>
+				{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+			</div>
+		);
+	},
+};
+
+// Version without wrapper div in saved markup
+// See: https://github.com/WordPress/gutenberg/pull/56507
+const v1 = {
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'text',
+		},
+		name: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+			default: 'Label',
+			selector: '.wp-block-form-input__label-content',
+			source: 'html',
+			role: 'content',
+		},
+		inlineLabel: {
+			type: 'boolean',
+			default: false,
+		},
+		required: {
+			type: 'boolean',
+			default: false,
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'required',
+		},
+		placeholder: {
+			type: 'string',
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'placeholder',
+			role: 'content',
+		},
+		value: {
+			type: 'string',
+			default: '',
+			selector: 'input',
+			source: 'attribute',
+			attribute: 'value',
+		},
+		visibilityPermissions: {
+			type: 'string',
+			default: 'all',
+		},
+	},
+	supports: {
+		className: false,
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		/* eslint-disable jsx-a11y/label-has-associated-control */
+		return (
+			<label
+				className={ clsx( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel,
+				} ) }
+			>
+				<span className="wp-block-form-input__label-content">
+					<RichText.Content value={ label } />
+				</span>
+				<TagName
+					className={ inputClasses }
+					type={ 'textarea' === type ? undefined : type }
+					name={ name || getNameFromLabelV1( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+			</label>
+		);
+		/* eslint-enable jsx-a11y/label-has-associated-control */
+	},
+};
+
+const deprecated = [ v2, v1 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
new file mode 100644
index 00000000000000..5f3713e83975f1
--- /dev/null
+++ b/packages/block-library/src/form-input/edit.js
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
+
+import { useRef } from '@wordpress/element';
+
+function InputFieldBlock( { attributes, setAttributes, className } ) {
+	const { type, name, label, inlineLabel, required, placeholder, value } =
+		attributes;
+	const blockProps = useBlockProps();
+	const ref = useRef();
+	const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	if ( ref.current ) {
+		ref.current.focus();
+	}
+
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
+	const controls = (
+		<>
+			{ 'hidden' !== type && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						{ 'checkbox' !== type && (
+							<CheckboxControl
+								__nextHasNoMarginBottom
+								label={ __( 'Inline label' ) }
+								checked={ inlineLabel }
+								onChange={ ( newVal ) => {
+									setAttributes( {
+										inlineLabel: newVal,
+									} );
+								} }
+							/>
+						) }
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Required' ) }
+							checked={ required }
+							onChange={ ( newVal ) => {
+								setAttributes( {
+									required: newVal,
+								} );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					autoComplete="off"
+					label={ __( 'Name' ) }
+					value={ name }
+					onChange={ ( newVal ) => {
+						setAttributes( {
+							name: newVal,
+						} );
+					} }
+					help={ __(
+						'Affects the "name" atribute of the input element, and is used as a name for the form submission results.'
+					) }
+				/>
+			</InspectorControls>
+		</>
+	);
+
+	const content = (
+		<RichText
+			tagName="span"
+			className="wp-block-form-input__label-content"
+			value={ label }
+			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+			aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+			data-empty={ ! label }
+			placeholder={ __( 'Type the label for this input' ) }
+		/>
+	);
+
+	if ( 'hidden' === type ) {
+		return (
+			<>
+				{ controls }
+				<input
+					type="hidden"
+					className={ clsx(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Value' ) }
+					value={ value }
+					onChange={ ( event ) =>
+						setAttributes( { value: event.target.value } )
+					}
+				/>
+			</>
+		);
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ controls }
+			<span
+				className={ clsx( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel || 'checkbox' === type,
+				} ) }
+			>
+				{ ! isCheckboxOrRadio && content }
+				<TagName
+					type={ 'textarea' === type ? undefined : type }
+					className={ clsx(
+						className,
+						'wp-block-form-input__input',
+						colorProps.className,
+						borderProps.className
+					) }
+					aria-label={ __( 'Optional placeholder text' ) }
+					// We hide the placeholder field's placeholder when there is a value. This
+					// stops screen readers from reading the placeholder field's placeholder
+					// which is confusing.
+					placeholder={
+						placeholder ? undefined : __( 'Optional placeholder…' )
+					}
+					value={ placeholder }
+					onChange={ ( event ) =>
+						setAttributes( { placeholder: event.target.value } )
+					}
+					aria-required={ required }
+					style={ {
+						...borderProps.style,
+						...colorProps.style,
+					} }
+				/>
+				{ isCheckboxOrRadio && content }
+			</span>
+		</div>
+	);
+}
+
+export default InputFieldBlock;
diff --git a/packages/block-library/src/form-input/editor.scss b/packages/block-library/src/form-input/editor.scss
new file mode 100644
index 00000000000000..2ac67e6615ed4a
--- /dev/null
+++ b/packages/block-library/src/form-input/editor.scss
@@ -0,0 +1,24 @@
+.wp-block-form-input {
+	.is-input-hidden {
+		font-size: 0.85em;
+		opacity: 0.3;
+		border: 1px dashed;
+		padding: 0.5em;
+		box-sizing: border-box;
+		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+
+		input[type="text"] {
+			background: transparent;
+		}
+	}
+	&.is-selected {
+		.is-input-hidden {
+			opacity: 1;
+			background: none;
+
+			input[type="text"] {
+				background: unset;
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/form-input/index.js b/packages/block-library/src/form-input/index.js
new file mode 100644
index 00000000000000..8e0548a6b24dbf
--- /dev/null
+++ b/packages/block-library/src/form-input/index.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+import variations from './variations';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	deprecated,
+	edit,
+	save,
+	variations,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form-input/index.php b/packages/block-library/src/form-input/index.php
new file mode 100644
index 00000000000000..f905c2bc6e19ff
--- /dev/null
+++ b/packages/block-library/src/form-input/index.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/form-input` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form-input` block on server.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ *
+ * @return string The content of the block being rendered.
+ */
+function render_block_core_form_input( $attributes, $content ) {
+	$visibility_permissions = 'all';
+	if ( isset( $attributes['visibilityPermissions'] ) ) {
+		$visibility_permissions = $attributes['visibilityPermissions'];
+	}
+
+	if ( 'logged-in' === $visibility_permissions && ! is_user_logged_in() ) {
+		return '';
+	}
+	if ( 'logged-out' === $visibility_permissions && is_user_logged_in() ) {
+		return '';
+	}
+	return $content;
+}
+
+/**
+ * Registers the `core/form-input` block on server.
+ */
+function register_block_core_form_input() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form-input',
+		array(
+			'render_callback' => 'render_block_core_form_input',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form_input' );
diff --git a/packages/block-library/src/form-input/init.js b/packages/block-library/src/form-input/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/form-input/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/form-input/save.js b/packages/block-library/src/form-input/save.js
new file mode 100644
index 00000000000000..941c23dc2014d1
--- /dev/null
+++ b/packages/block-library/src/form-input/save.js
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+/**
+ * Get the name attribute from a content string.
+ *
+ * @param {string} content The block content.
+ *
+ * @return {string} Returns the slug.
+ */
+const getNameFromLabel = ( content ) => {
+	return (
+		removeAccents( stripHTML( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+export default function save( { attributes } ) {
+	const { type, name, label, inlineLabel, required, placeholder, value } =
+		attributes;
+
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+
+	const inputStyle = {
+		...borderProps.style,
+		...colorProps.style,
+	};
+
+	const inputClasses = clsx(
+		'wp-block-form-input__input',
+		colorProps.className,
+		borderProps.className
+	);
+	const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+	const blockProps = useBlockProps.save();
+
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
+	if ( 'hidden' === type ) {
+		return <input type={ type } name={ name } value={ value } />;
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+			<label
+				className={ clsx( 'wp-block-form-input__label', {
+					'is-label-inline': inlineLabel,
+				} ) }
+			>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
+				<TagName
+					className={ inputClasses }
+					type={ 'textarea' === type ? undefined : type }
+					name={ name || getNameFromLabel( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+				{ isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
+			</label>
+			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+		</div>
+	);
+}
diff --git a/packages/block-library/src/form-input/style.scss b/packages/block-library/src/form-input/style.scss
new file mode 100644
index 00000000000000..7b1ac53cc89c01
--- /dev/null
+++ b/packages/block-library/src/form-input/style.scss
@@ -0,0 +1,63 @@
+.wp-block-form-input__label {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25em;
+	margin-bottom: 0.5em;
+
+	&.is-label-inline {
+		flex-direction: row;
+		gap: 0.5em;
+		align-items: center;
+
+		.wp-block-form-input__label-content {
+			margin-bottom: 0.5em;
+		}
+	}
+
+	&:has(input[type="checkbox"]) {
+		flex-direction: row;
+		width: fit-content;
+
+		.wp-block-form-input__label-content {
+			margin: 0;
+		}
+	}
+
+	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
+		flex-direction: row-reverse;
+	}
+}
+
+.wp-block-form-input__label-content {
+	width: fit-content;
+}
+
+.wp-block-form-input__input {
+	padding: 0 0.5em;
+	font-size: 1em;
+	margin-bottom: 0.5em;
+
+	&[type="text"],
+	&[type="password"],
+	&[type="date"],
+	&[type="datetime"],
+	&[type="datetime-local"],
+	&[type="email"],
+	&[type="month"],
+	&[type="number"],
+	&[type="search"],
+	&[type="tel"],
+	&[type="time"],
+	&[type="url"],
+	&[type="week"] {
+		min-height: 2em;
+		line-height: 2;
+		border: 1px solid;
+	}
+}
+
+textarea.wp-block-form-input__input {
+	min-height: 10em;
+}
diff --git a/packages/block-library/src/form-input/variations.js b/packages/block-library/src/form-input/variations.js
new file mode 100644
index 00000000000000..322043d5e27012
--- /dev/null
+++ b/packages/block-library/src/form-input/variations.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'text',
+		title: __( 'Text Input' ),
+		icon: 'edit-page',
+		description: __( 'A generic text input.' ),
+		attributes: { type: 'text' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+	{
+		name: 'textarea',
+		title: __( 'Textarea Input' ),
+		icon: 'testimonial',
+		description: __(
+			'A textarea input to allow entering multiple lines of text.'
+		),
+		attributes: { type: 'textarea' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'textarea',
+	},
+	{
+		name: 'checkbox',
+		title: __( 'Checkbox Input' ),
+		description: __( 'A simple checkbox input.' ),
+		icon: 'forms',
+		attributes: { type: 'checkbox', inlineLabel: true },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'checkbox',
+	},
+	{
+		name: 'email',
+		title: __( 'Email Input' ),
+		icon: 'email',
+		description: __( 'Used for email addresses.' ),
+		attributes: { type: 'email' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'email',
+	},
+	{
+		name: 'url',
+		title: __( 'URL Input' ),
+		icon: 'admin-site',
+		description: __( 'Used for URLs.' ),
+		attributes: { type: 'url' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'url',
+	},
+	{
+		name: 'tel',
+		title: __( 'Telephone Input' ),
+		icon: 'phone',
+		description: __( 'Used for phone numbers.' ),
+		attributes: { type: 'tel' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'tel',
+	},
+	{
+		name: 'number',
+		title: __( 'Number Input' ),
+		icon: 'edit-page',
+		description: __( 'A numeric input.' ),
+		attributes: { type: 'number' },
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes?.type === 'number',
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/form-submission-notification/block.json b/packages/block-library/src/form-submission-notification/block.json
new file mode 100644
index 00000000000000..5315658d2b0083
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/block.json
@@ -0,0 +1,19 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-submission-notification",
+	"title": "Form Submission Notification",
+	"category": "common",
+	"ancestor": [ "core/form" ],
+	"description": "Provide a notification message after the form has been submitted.",
+	"keywords": [ "form", "feedback", "notification", "message" ],
+	"textdomain": "default",
+	"icon": "feedback",
+	"attributes": {
+		"type": {
+			"type": "string",
+			"default": "success"
+		}
+	}
+}
diff --git a/packages/block-library/src/form-submission-notification/edit.js b/packages/block-library/src/form-submission-notification/edit.js
new file mode 100644
index 00000000000000..01a0c589584dd5
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/edit.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			content: __(
+				"Enter the message you wish displayed for form submission error/success, and select the type of the message (success/error) from the block's options."
+			),
+		},
+	],
+];
+
+const Edit = ( { attributes, clientId } ) => {
+	const { type } = attributes;
+	const blockProps = useBlockProps( {
+		className: clsx( 'wp-block-form-submission-notification', {
+			[ `form-notification-type-${ type }` ]: type,
+		} ),
+	} );
+
+	const { hasInnerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<div
+			{ ...innerBlocksProps }
+			data-message-success={ __( 'Submission success notification' ) }
+			data-message-error={ __( 'Submission error notification' ) }
+		/>
+	);
+};
+export default Edit;
diff --git a/packages/block-library/src/form-submission-notification/editor.scss b/packages/block-library/src/form-submission-notification/editor.scss
new file mode 100644
index 00000000000000..a8d3f4e3d92630
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/editor.scss
@@ -0,0 +1,45 @@
+.wp-block-form-submission-notification {
+	> * {
+		opacity: 0.25;
+		border: 1px dashed;
+		box-sizing: border-box;
+		background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
+	}
+
+	&.is-selected,
+	&:has(.is-selected) {
+		> * {
+			opacity: 1;
+			background: none;
+		}
+
+		&::after {
+			display: none !important;
+		}
+	}
+
+	&::after {
+		display: flex;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+		font-size: 1.1em;
+		// font-weight: bold;
+	}
+
+	&.form-notification-type-success {
+		&::after {
+			content: attr(data-message-success);
+		}
+	}
+
+	&.form-notification-type-error {
+		&::after {
+			content: attr(data-message-error);
+		}
+	}
+}
diff --git a/packages/block-library/src/form-submission-notification/index.js b/packages/block-library/src/form-submission-notification/index.js
new file mode 100644
index 00000000000000..67c359374eec1c
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/index.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { group as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+import variations from './variations';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+	variations,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form-submission-notification/index.php b/packages/block-library/src/form-submission-notification/index.php
new file mode 100644
index 00000000000000..0a57866f37edfc
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/index.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Server-side rendering of the `core/form-submission-notification` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form-submission-notification` block on server.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ *
+ * @return string The content of the block being rendered.
+ */
+function render_block_core_form_submission_notification( $attributes, $content ) {
+	$show = isset( $_GET['wp-form-result'] ) && sanitize_text_field( wp_unslash( $_GET['wp-form-result'] ) ) === $attributes['type'];
+	/**
+	 * Filters whether to show the form submission notification block.
+	 *
+	 * @param bool   $show       Whether to show the form submission notification block.
+	 * @param array  $attributes The block attributes.
+	 * @param string $content    The saved content.
+	 *
+	 * @return bool Whether to show the form submission notification block.
+	 */
+	$show = apply_filters( 'show_form_submission_notification_block', $show, $attributes, $content );
+	if ( ! $show ) {
+		return '';
+	}
+	return $content;
+}
+
+/**
+ * Registers the `core/form-submission-notification` block on server.
+ */
+function register_block_core_form_submission_notification() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form-submission-notification',
+		array(
+			'render_callback' => 'render_block_core_form_submission_notification',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form_submission_notification' );
diff --git a/packages/block-library/src/form-submission-notification/init.js b/packages/block-library/src/form-submission-notification/init.js
new file mode 100644
index 00000000000000..a7f22ef02d640f
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from '.';
+
+export default init();
diff --git a/packages/block-library/src/form-submission-notification/save.js b/packages/block-library/src/form-submission-notification/save.js
new file mode 100644
index 00000000000000..d2578b85f7eb6c
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/save.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export default function save( { attributes } ) {
+	const { type } = attributes;
+
+	return (
+		<div
+			{ ...useInnerBlocksProps.save(
+				useBlockProps.save( {
+					className: clsx( 'wp-block-form-submission-notification', {
+						[ `form-notification-type-${ type }` ]: type,
+					} ),
+				} )
+			) }
+		/>
+	);
+}
diff --git a/packages/block-library/src/form-submission-notification/variations.js b/packages/block-library/src/form-submission-notification/variations.js
new file mode 100644
index 00000000000000..f01fccbaa93cf9
--- /dev/null
+++ b/packages/block-library/src/form-submission-notification/variations.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'form-submission-success',
+		title: __( 'Form Submission Success' ),
+		description: __( 'Success message for form submissions.' ),
+		attributes: {
+			type: 'success',
+		},
+		isDefault: true,
+		innerBlocks: [
+			[
+				'core/paragraph',
+				{
+					content: __( 'Your form has been submitted successfully.' ),
+					backgroundColor: '#00D084',
+					textColor: '#000000',
+					style: {
+						elements: { link: { color: { text: '#000000' } } },
+					},
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'success',
+	},
+	{
+		name: 'form-submission-error',
+		title: __( 'Form Submission Error' ),
+		description: __( 'Error/failure message for form submissions.' ),
+		attributes: {
+			type: 'error',
+		},
+		isDefault: false,
+		innerBlocks: [
+			[
+				'core/paragraph',
+				{
+					content: __( 'There was an error submitting your form.' ),
+					backgroundColor: '#CF2E2E',
+					textColor: '#FFFFFF',
+					style: {
+						elements: { link: { color: { text: '#FFFFFF' } } },
+					},
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'error',
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/form-submit-button/block.json b/packages/block-library/src/form-submit-button/block.json
new file mode 100644
index 00000000000000..97ced49e70b22a
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form-submit-button",
+	"title": "Form Submit Button",
+	"category": "common",
+	"icon": "button",
+	"ancestor": [ "core/form" ],
+	"allowedBlocks": [ "core/buttons", "core/button" ],
+	"description": "A submission button for forms.",
+	"keywords": [ "submit", "button", "form" ],
+	"textdomain": "default",
+	"style": [ "wp-block-form-submit-button" ]
+}
diff --git a/packages/block-library/src/form-submit-button/edit.js b/packages/block-library/src/form-submit-button/edit.js
new file mode 100644
index 00000000000000..e2bcbe067c70ca
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/edit.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+const TEMPLATE = [
+	[
+		'core/buttons',
+		{},
+		[
+			[
+				'core/button',
+				{
+					text: __( 'Submit' ),
+					tagName: 'button',
+					type: 'submit',
+				},
+			],
+		],
+	],
+];
+const Edit = () => {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateLock: 'all',
+	} );
+	return (
+		<div className="wp-block-form-submit-wrapper" { ...innerBlocksProps } />
+	);
+};
+export default Edit;
diff --git a/packages/block-library/src/form-submit-button/index.js b/packages/block-library/src/form-submit-button/index.js
new file mode 100644
index 00000000000000..4c60b5f5c20639
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form-submit-button/init.js b/packages/block-library/src/form-submit-button/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/form-submit-button/save.js b/packages/block-library/src/form-submit-button/save.js
new file mode 100644
index 00000000000000..eb703c4a0a4c54
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/save.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	return (
+		<div className="wp-block-form-submit-wrapper" { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/form-submit-button/style.scss b/packages/block-library/src/form-submit-button/style.scss
new file mode 100644
index 00000000000000..400016b1618d47
--- /dev/null
+++ b/packages/block-library/src/form-submit-button/style.scss
@@ -0,0 +1,3 @@
+.wp-block-form-submit-wrapper {
+	margin-bottom: 0.5em;
+}
diff --git a/packages/block-library/src/form/block.json b/packages/block-library/src/form/block.json
new file mode 100644
index 00000000000000..20f3b89dc62b0c
--- /dev/null
+++ b/packages/block-library/src/form/block.json
@@ -0,0 +1,68 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/form",
+	"title": "Form",
+	"category": "common",
+	"allowedBlocks": [
+		"core/paragraph",
+		"core/heading",
+		"core/form-input",
+		"core/form-submit-button",
+		"core/form-submission-notification",
+		"core/group",
+		"core/columns"
+	],
+	"description": "A form.",
+	"keywords": [ "container", "wrapper", "row", "section" ],
+	"textdomain": "default",
+	"icon": "feedback",
+	"attributes": {
+		"submissionMethod": {
+			"type": "string",
+			"default": "email"
+		},
+		"method": {
+			"type": "string",
+			"default": "post"
+		},
+		"action": {
+			"type": "string"
+		},
+		"email": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"anchor": true,
+		"className": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"__experimentalSelector": "form"
+	}
+}
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
new file mode 100644
index 00000000000000..a7260afabedf39
--- /dev/null
+++ b/packages/block-library/src/form/edit.js
@@ -0,0 +1,173 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+} from './utils.js';
+
+const TEMPLATE = [
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+	[
+		'core/form-input',
+		{
+			type: 'text',
+			label: __( 'Name' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'email',
+			label: __( 'Email' ),
+			required: true,
+		},
+	],
+	[
+		'core/form-input',
+		{
+			type: 'textarea',
+			label: __( 'Comment' ),
+			required: true,
+		},
+	],
+	[ 'core/form-submit-button', {} ],
+];
+
+const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const { action, method, email, submissionMethod } = attributes;
+	const blockProps = useBlockProps();
+
+	const { hasInnerBlocks } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		renderAppender: hasInnerBlocks
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Submissions method' ) }
+						options={ [
+							// TODO: Allow plugins to add their own submission methods.
+							{
+								label: __( 'Send email' ),
+								value: 'email',
+							},
+							{
+								label: __( '- Custom -' ),
+								value: 'custom',
+							},
+						] }
+						value={ submissionMethod }
+						onChange={ ( value ) =>
+							setAttributes( { submissionMethod: value } )
+						}
+						help={
+							submissionMethod === 'custom'
+								? __(
+										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
+								  )
+								: __(
+										'Select the method to use for form submissions.'
+								  )
+						}
+					/>
+					{ submissionMethod === 'email' && (
+						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							autoComplete="off"
+							label={ __( 'Email for form submissions' ) }
+							value={ email }
+							required
+							onChange={ ( value ) => {
+								setAttributes( { email: value } );
+								setAttributes( {
+									action: `mailto:${ value }`,
+								} );
+								setAttributes( { method: 'post' } );
+							} }
+							help={ __(
+								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+							) }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ submissionMethod !== 'email' && (
+				<InspectorControls group="advanced">
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Method' ) }
+						options={ [
+							{ label: 'Get', value: 'get' },
+							{ label: 'Post', value: 'post' },
+						] }
+						value={ method }
+						onChange={ ( value ) =>
+							setAttributes( { method: value } )
+						}
+						help={ __(
+							'Select the method to use for form submissions.'
+						) }
+					/>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						autoComplete="off"
+						label={ __( 'Form action' ) }
+						value={ action }
+						onChange={ ( newVal ) => {
+							setAttributes( {
+								action: newVal,
+							} );
+						} }
+						help={ __(
+							'The URL where the form should be submitted.'
+						) }
+					/>
+				</InspectorControls>
+			) }
+			<form
+				{ ...innerBlocksProps }
+				className="wp-block-form"
+				encType={ submissionMethod === 'email' ? 'text/plain' : null }
+			/>
+		</>
+	);
+};
+export default Edit;
diff --git a/packages/block-library/src/form/index.js b/packages/block-library/src/form/index.js
new file mode 100644
index 00000000000000..1e45c642b6d48e
--- /dev/null
+++ b/packages/block-library/src/form/index.js
@@ -0,0 +1,57 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+import variations from './variations';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	edit,
+	save,
+	variations,
+};
+
+export const init = () => {
+	// Prevent adding forms inside forms.
+	const DISALLOWED_PARENTS = [ 'core/form' ];
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'core/block-library/preventInsertingFormIntoAnotherForm',
+		(
+			canInsert,
+			blockType,
+			rootClientId,
+			{ getBlock, getBlockParentsByBlockName }
+		) => {
+			if ( blockType.name !== 'core/form' ) {
+				return canInsert;
+			}
+
+			for ( const disallowedParentType of DISALLOWED_PARENTS ) {
+				const hasDisallowedParent =
+					getBlock( rootClientId )?.name === disallowedParentType ||
+					getBlockParentsByBlockName(
+						rootClientId,
+						disallowedParentType
+					).length;
+				if ( hasDisallowedParent ) {
+					return false;
+				}
+			}
+			return true;
+		}
+	);
+
+	return initBlock( { name, metadata, settings } );
+};
diff --git a/packages/block-library/src/form/index.php b/packages/block-library/src/form/index.php
new file mode 100644
index 00000000000000..d2b4942d6a50b3
--- /dev/null
+++ b/packages/block-library/src/form/index.php
@@ -0,0 +1,195 @@
+<?php
+/**
+ * Server-side rendering of the `core/form` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/form` block on server.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content The saved content.
+ *
+ * @return string The content of the block being rendered.
+ */
+function render_block_core_form( $attributes, $content ) {
+	wp_enqueue_script_module( '@wordpress/block-library/form/view' );
+
+	$processed_content = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag( 'form' );
+
+	// Get the action for this form.
+	$action = '';
+	if ( isset( $attributes['action'] ) ) {
+		$action = str_replace(
+			array( '{SITE_URL}', '{ADMIN_URL}' ),
+			array( site_url(), admin_url() ),
+			$attributes['action']
+		);
+	}
+	$processed_content->set_attribute( 'action', esc_attr( $action ) );
+
+	// Add the method attribute. If it is not set, default to `post`.
+	$method = empty( $attributes['method'] ) ? 'post' : $attributes['method'];
+	$processed_content->set_attribute( 'method', $method );
+
+	$extra_fields = apply_filters( 'render_block_core_form_extra_fields', '', $attributes );
+
+	return str_replace(
+		'</form>',
+		$extra_fields . '</form>',
+		$processed_content->get_updated_html()
+	);
+}
+
+/**
+ * Adds extra fields to the form.
+ *
+ * If the form is a comment form, adds the post ID as a hidden field,
+ * to allow the comment to be associated with the post.
+ *
+ * @param string $extra_fields The extra fields.
+ * @param array  $attributes   The block attributes.
+ *
+ * @return string The extra fields.
+ */
+function block_core_form_extra_fields_comment_form( $extra_fields, $attributes ) {
+	if ( ! empty( $attributes['action'] ) && str_ends_with( $attributes['action'], '/wp-comments-post.php' ) ) {
+		$extra_fields .= '<input type="hidden" name="comment_post_ID" value="' . get_the_ID() . '" id="comment_post_ID">';
+	}
+	return $extra_fields;
+}
+add_filter( 'render_block_core_form_extra_fields', 'block_core_form_extra_fields_comment_form', 10, 2 );
+
+/**
+ * Sends an email if the form is a contact form.
+ */
+function block_core_form_send_email() {
+	check_ajax_referer( 'wp-block-form' );
+
+	// Get the POST data.
+	$params = wp_unslash( $_POST );
+	// Start building the email content.
+	$content = sprintf(
+		/* translators: %s: The request URI. */
+		__( 'Form submission from %1$s' ) . '</br>',
+		'<a href="' . esc_url( get_site_url( null, $params['_wp_http_referer'] ) ) . '">' . get_bloginfo( 'name' ) . '</a>'
+	);
+
+	$skip_fields = array( 'formAction', '_ajax_nonce', 'action', '_wp_http_referer' );
+	foreach ( $params as $key => $value ) {
+		if ( in_array( $key, $skip_fields, true ) ) {
+			continue;
+		}
+		$content .= sanitize_key( $key ) . ': ' . wp_kses_post( $value ) . '</br>';
+	}
+
+	// Filter the email content.
+	$content = apply_filters( 'render_block_core_form_email_content', $content, $params );
+
+	// Send the email.
+	$result = wp_mail(
+		str_replace( 'mailto:', '', $params['formAction'] ),
+		__( 'Form submission' ),
+		$content
+	);
+
+	if ( ! $result ) {
+		wp_send_json_error( $result );
+	}
+	wp_send_json_success( $result );
+}
+add_action( 'wp_ajax_wp_block_form_email_submit', 'block_core_form_send_email' );
+add_action( 'wp_ajax_nopriv_wp_block_form_email_submit', 'block_core_form_send_email' );
+
+/**
+ * Send the data export/remove request if the form is a privacy-request form.
+ */
+function block_core_form_privacy_form() {
+	// Get the POST data.
+	$params = wp_unslash( $_POST );
+
+	// Bail early if not a form submission, or if the nonce is not valid.
+	if ( empty( $params['wp-action'] )
+		|| 'wp_privacy_send_request' !== $params['wp-action']
+		|| empty( $params['wp-privacy-request'] )
+		|| '1' !== $params['wp-privacy-request']
+		|| empty( $params['email'] )
+	) {
+		return;
+	}
+
+	// Get the request types.
+	$request_types  = _wp_privacy_action_request_types();
+	$requests_found = array();
+	foreach ( $request_types as $request_type ) {
+		if ( ! empty( $params[ $request_type ] ) ) {
+			$requests_found[] = $request_type;
+		}
+	}
+
+	// Bail early if no requests were found.
+	if ( empty( $requests_found ) ) {
+		return;
+	}
+
+	// Process the requests.
+	$actions_errored   = array();
+	$actions_performed = array();
+	foreach ( $requests_found as $action_name ) {
+		// Get the request ID.
+		$request_id = wp_create_user_request( $params['email'], $action_name );
+
+		// Bail early if the request ID is invalid.
+		if ( is_wp_error( $request_id ) ) {
+			$actions_errored[] = $action_name;
+			continue;
+		}
+
+		// Send the request email.
+		wp_send_user_request( $request_id );
+		$actions_performed[] = $action_name;
+	}
+
+	/**
+	 * Determine whether the core/form-submission-notification block should be shown.
+	 *
+	 * @param bool   $show       Whether to show the core/form-submission-notification block.
+	 * @param array  $attributes The block attributes.
+	 *
+	 * @return bool Whether to show the core/form-submission-notification block.
+	 */
+	$show_notification = static function ( $show, $attributes ) use ( $actions_performed, $actions_errored ) {
+		switch ( $attributes['type'] ) {
+			case 'success':
+				return ! empty( $actions_performed ) && empty( $actions_errored );
+
+			case 'error':
+				return ! empty( $actions_errored );
+
+			default:
+				return $show;
+		}
+	};
+
+	// Add filter to show the core/form-submission-notification block.
+	add_filter( 'show_form_submission_notification_block', $show_notification, 10, 2 );
+}
+add_action( 'wp', 'block_core_form_privacy_form' );
+
+/**
+ * Registers the `core/form` block on server.
+ */
+function register_block_core_form() {
+	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
+		return;
+	}
+	register_block_type_from_metadata(
+		__DIR__ . '/form',
+		array(
+			'render_callback' => 'render_block_core_form',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_form' );
diff --git a/packages/block-library/src/form/init.js b/packages/block-library/src/form/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/form/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/form/save.js b/packages/block-library/src/form/save.js
new file mode 100644
index 00000000000000..daeedd3ef67e8c
--- /dev/null
+++ b/packages/block-library/src/form/save.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const { submissionMethod } = attributes;
+
+	return (
+		<form
+			{ ...blockProps }
+			className="wp-block-form"
+			encType={ submissionMethod === 'email' ? 'text/plain' : null }
+		>
+			<InnerBlocks.Content />
+		</form>
+	);
+}
diff --git a/packages/block-library/src/form/utils.js b/packages/block-library/src/form/utils.js
new file mode 100644
index 00000000000000..e541f34bbc887f
--- /dev/null
+++ b/packages/block-library/src/form/utils.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const formSubmissionNotificationSuccess = [
+	'core/form-submission-notification',
+	{
+		type: 'success',
+	},
+	[
+		[
+			'core/paragraph',
+			{
+				content:
+					'<mark style="background-color:rgba(0, 0, 0, 0);color:#345C00" class="has-inline-color">' +
+					__( 'Your form has been submitted successfully' ) +
+					'</mark>',
+			},
+		],
+	],
+];
+export const formSubmissionNotificationError = [
+	'core/form-submission-notification',
+	{
+		type: 'error',
+	},
+	[
+		[
+			'core/paragraph',
+			{
+				content:
+					'<mark style="background-color:rgba(0, 0, 0, 0);color:#CF2E2E" class="has-inline-color">' +
+					__( 'There was an error submitting your form.' ) +
+					'</mark>',
+			},
+		],
+	],
+];
diff --git a/packages/block-library/src/form/variations.js b/packages/block-library/src/form/variations.js
new file mode 100644
index 00000000000000..cf12cef2ea38f2
--- /dev/null
+++ b/packages/block-library/src/form/variations.js
@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import {
+	formSubmissionNotificationSuccess,
+	formSubmissionNotificationError,
+} from './utils.js';
+
+const variations = [
+	{
+		name: 'comment-form',
+		title: __( 'Experimental Comment form' ),
+		description: __( 'A comment form for posts and pages.' ),
+		attributes: {
+			submissionMethod: 'custom',
+			action: '{SITE_URL}/wp-comments-post.php',
+			method: 'post',
+			anchor: 'comment-form',
+		},
+		isDefault: false,
+		innerBlocks: [
+			[
+				'core/form-input',
+				{
+					type: 'text',
+					name: 'author',
+					label: __( 'Name' ),
+					required: true,
+					visibilityPermissions: 'logged-out',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'email',
+					name: 'email',
+					label: __( 'Email' ),
+					required: true,
+					visibilityPermissions: 'logged-out',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'textarea',
+					name: 'comment',
+					label: __( 'Comment' ),
+					required: true,
+					visibilityPermissions: 'all',
+				},
+			],
+			[ 'core/form-submit-button', {} ],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+	{
+		name: 'wp-privacy-form',
+		title: __( 'Experimental privacy request form' ),
+		keywords: [ 'GDPR' ],
+		description: __( 'A form to request data exports and/or deletion.' ),
+		attributes: {
+			submissionMethod: 'custom',
+			action: '',
+			method: 'post',
+			anchor: 'gdpr-form',
+		},
+		isDefault: false,
+		innerBlocks: [
+			formSubmissionNotificationSuccess,
+			formSubmissionNotificationError,
+			[
+				'core/paragraph',
+				{
+					content: __(
+						'To request an export or deletion of your personal data on this site, please fill-in the form below. You can define the type of request you wish to perform, and your email address. Once the form is submitted, you will receive a confirmation email with instructions on the next steps.'
+					),
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'email',
+					name: 'email',
+					label: __( 'Enter your email address.' ),
+					required: true,
+					visibilityPermissions: 'all',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'checkbox',
+					name: 'export_personal_data',
+					label: __( 'Request data export' ),
+					required: false,
+					visibilityPermissions: 'all',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'checkbox',
+					name: 'remove_personal_data',
+					label: __( 'Request data deletion' ),
+					required: false,
+					visibilityPermissions: 'all',
+				},
+			],
+			[ 'core/form-submit-button', {} ],
+			[
+				'core/form-input',
+				{
+					type: 'hidden',
+					name: 'wp-action',
+					value: 'wp_privacy_send_request',
+				},
+			],
+			[
+				'core/form-input',
+				{
+					type: 'hidden',
+					name: 'wp-privacy-request',
+					value: '1',
+				},
+			],
+		],
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			! blockAttributes?.type || blockAttributes?.type === 'text',
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/form/view.js b/packages/block-library/src/form/view.js
new file mode 100644
index 00000000000000..43e5af99e21286
--- /dev/null
+++ b/packages/block-library/src/form/view.js
@@ -0,0 +1,56 @@
+let formSettings;
+try {
+	formSettings = JSON.parse(
+		document.getElementById(
+			'wp-script-module-data-@wordpress/block-library/form/view'
+		)?.textContent
+	);
+} catch {}
+
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable no-undef */
+document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
+	// Bail If the form settings not provided or the form is not using the mailto: action.
+	if (
+		! formSettings ||
+		! form.action ||
+		! form.action.startsWith( 'mailto:' )
+	) {
+		return;
+	}
+
+	const redirectNotification = ( status ) => {
+		const urlParams = new URLSearchParams( window.location.search );
+		urlParams.append( 'wp-form-result', status );
+		window.location.search = urlParams.toString();
+	};
+
+	// Add an event listener for the form submission.
+	form.addEventListener( 'submit', async function ( event ) {
+		event.preventDefault();
+		// Get the form data and merge it with the form action and nonce.
+		const formData = Object.fromEntries( new FormData( form ).entries() );
+		formData.formAction = form.action;
+		formData._ajax_nonce = formSettings.nonce;
+		formData.action = formSettings.action;
+		formData._wp_http_referer = window.location.href;
+		formData.formAction = form.action;
+
+		try {
+			const response = await fetch( formSettings.ajaxUrl, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+				body: new URLSearchParams( formData ).toString(),
+			} );
+			if ( response.ok ) {
+				redirectNotification( 'success' );
+			} else {
+				redirectNotification( 'error' );
+			}
+		} catch ( error ) {
+			redirectNotification( 'error' );
+		}
+	} );
+} );
diff --git a/packages/block-library/src/freeform/block.json b/packages/block-library/src/freeform/block.json
index 84b57b75326c0a..d40e8ea13dc117 100644
--- a/packages/block-library/src/freeform/block.json
+++ b/packages/block-library/src/freeform/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/freeform",
 	"title": "Classic",
 	"category": "text",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/freeform/edit.js b/packages/block-library/src/freeform/edit.js
index ab9a2257f87e4e..b0ba245a6e7021 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,36 +37,66 @@ 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 );
+	const didMountRef = useRef( false );
 
 	useEffect( () => {
-		if ( ! didMount.current ) {
+		if ( ! didMountRef.current ) {
 			return;
 		}
 
 		const editor = window.tinymce.get( `editor-${ clientId }` );
-		const currentContent = editor?.getContent();
+		if ( ! editor ) {
+			return;
+		}
 
+		const currentContent = editor.getContent();
 		if ( currentContent !== content ) {
 			editor.setContent( content || '' );
 		}
-	}, [ content ] );
+	}, [ clientId, content ] );
 
 	useEffect( () => {
 		const { baseURL, suffix } = window.wpEditorL10n.tinymce;
 
-		didMount.current = true;
+		didMountRef.current = true;
 
 		window.tinymce.EditorManager.overrideDefaults( {
 			base_url: baseURL,
@@ -199,6 +230,7 @@ export default function ClassicEdit( {
 				onReadyStateChange
 			);
 			wp.oldEditor.remove( `editor-${ clientId }` );
+			didMountRef.current = false;
 		};
 	}, [] );
 
@@ -225,28 +257,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/editor.scss b/packages/block-library/src/freeform/editor.scss
index cf721def6dfcfa..c2256ecd7a795f 100644
--- a/packages/block-library/src/freeform/editor.scss
+++ b/packages/block-library/src/freeform/editor.scss
@@ -299,7 +299,7 @@ div[data-type="core/freeform"] {
 	top: 0;
 	border: $border-width solid $gray-300;
 	border-bottom: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-bottom: $grid-unit-10;
 
 	// On mobile, toolbars go edge to edge.
@@ -374,3 +374,55 @@ div[data-type="core/freeform"] {
 		display: block;
 	}
 }
+
+.block-editor-freeform-modal {
+	.block-editor-freeform-modal__content {
+		.mce-edit-area iframe {
+			height: 50vh !important;
+		}
+		// On large screens, make the TinyMCE edit area grow to take all the
+		// available height so that the Cancel/Save buttons are always into the
+		// view. On smaller screens, the modal content is scrollable.
+		@include break-large() {
+
+			// On medium and large screens, the modal component sets a max-height.
+			// We want the modal to be as tall as possible also when the content is short.
+			&:not(.is-full-screen) {
+				height: 9999rem;
+			}
+
+			.components-modal__header + div {
+				height: 100%;
+			}
+
+			.mce-tinymce {
+				height: calc(100% - #{$button-size} - #{$grid-unit-20});
+			}
+
+			.mce-container-body {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				min-width: 50vw;
+			}
+
+			.mce-edit-area {
+				flex-grow: 1;
+				display: flex;
+				flex-direction: column;
+
+				iframe {
+					flex-grow: 1;
+					// Override the height TinyMCE sets via JavaScript so that it
+					// can shrink to a smaller height. The actual height is
+					// determined by Flexbox.
+					height: 10px !important;
+				}
+			}
+		}
+	}
+
+	&__actions {
+		margin-top: $grid-unit-20;
+	}
+}
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
new file mode 100644
index 00000000000000..35652eb29948a3
--- /dev/null
+++ b/packages/block-library/src/freeform/modal.js
@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockControls, store } from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarButton,
+	Modal,
+	Button,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { fullscreen } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
+
+function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
+	// 'small' to match the rules in editor.scss.
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	if ( isMobileViewport ) {
+		return null;
+	}
+
+	return (
+		<Button
+			size="compact"
+			onClick={ onClick }
+			icon={ fullscreen }
+			isPressed={ isModalFullScreen }
+			label={
+				isModalFullScreen
+					? __( 'Exit fullscreen' )
+					: __( 'Enter fullscreen' )
+			}
+		/>
+	);
+}
+
+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,
+				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 [ isModalFullScreen, setIsModalFullScreen ] = useState( false );
+	const id = `editor-${ clientId }`;
+
+	const onClose = () => ( content ? setOpen( false ) : onReplace( [] ) );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton onClick={ () => setOpen( true ) }>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			</BlockControls>
+			{ content && <RawHTML>{ content }</RawHTML> }
+			{ ( isOpen || ! content ) && (
+				<Modal
+					title={ __( 'Classic Editor' ) }
+					onRequestClose={ onClose }
+					shouldCloseOnClickOutside={ false }
+					overlayClassName="block-editor-freeform-modal"
+					isFullScreen={ isModalFullScreen }
+					className="block-editor-freeform-modal__content"
+					headerActions={
+						<ModalAuxiliaryActions
+							onClick={ () =>
+								setIsModalFullScreen( ! isModalFullScreen )
+							}
+							isModalFullScreen={ isModalFullScreen }
+						/>
+					}
+				>
+					<ClassicEdit id={ id } defaultValue={ content } />
+					<Flex
+						className="block-editor-freeform-modal__actions"
+						justify="flex-end"
+						expanded={ false }
+					>
+						<FlexItem>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ onClose }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ () => {
+									setAttributes( {
+										content:
+											window.wp.oldEditor.getContent(
+												id
+											),
+									} );
+									setOpen( false );
+								} }
+							>
+								{ __( 'Save' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/block-library/src/freeform/test/__snapshots__/index.native.js.snap b/packages/block-library/src/freeform/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..aad87487b93bec
--- /dev/null
+++ b/packages/block-library/src/freeform/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic block converts content into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>I'm classic!</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/freeform/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/freeform/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..a4064729c8db07
--- /dev/null
+++ b/packages/block-library/src/freeform/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:freeform -->
+<p>Classic block</p>
+<!-- /wp:freeform --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Classic block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:freeform -->
+<p>Classic block</p>
+<!-- /wp:freeform --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/freeform/test/index.native.js b/packages/block-library/src/freeform/test/index.native.js
new file mode 100644
index 00000000000000..08ba635d4cd777
--- /dev/null
+++ b/packages/block-library/src/freeform/test/index.native.js
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+const CLASSIC_BLOCK_HTML = `<p>I'm classic!</p>`;
+const DEFAULT_EDITOR_CAPABILITIES = {
+	unsupportedBlockEditor: true,
+	canEnableUnsupportedBlockEditor: true,
+};
+
+setupCoreBlocks();
+
+describe( 'Classic block', () => {
+	it( 'displays option to edit using web editor', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
+	} );
+
+	it( 'converts content into blocks', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Convert to blocks' );
+		expect( actionButton ).toBeVisible();
+
+		fireEvent.press( actionButton );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/freeform/test/transforms.native.js b/packages/block-library/src/freeform/test/transforms.native.js
new file mode 100644
index 00000000000000..d8579dfc41a4af
--- /dev/null
+++ b/packages/block-library/src/freeform/test/transforms.native.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Classic';
+const initialHtml = `Classic block`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
index 0400430b95ee64..6a2129ec1e056f 100644
--- a/packages/block-library/src/gallery/block.json
+++ b/packages/block-library/src/gallery/block.json
@@ -1,9 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
+	"allowedBlocks": [ "core/image" ],
 	"description": "Display multiple images in a rich gallery.",
 	"keywords": [ "images", "photos" ],
 	"textdomain": "default",
@@ -46,8 +47,8 @@
 					"attribute": "data-id"
 				},
 				"caption": {
-					"type": "string",
-					"source": "html",
+					"type": "rich-text",
+					"source": "rich-text",
 					"selector": ".blocks-gallery-item__caption"
 				}
 			}
@@ -61,10 +62,10 @@
 		},
 		"shortCodeTransforms": {
 			"type": "array",
-			"default": [],
 			"items": {
 				"type": "object"
-			}
+			},
+			"default": []
 		},
 		"columns": {
 			"type": "number",
@@ -72,14 +73,18 @@
 			"maximum": 8
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": ".blocks-gallery-caption"
 		},
 		"imageCrop": {
 			"type": "boolean",
 			"default": true
 		},
+		"randomOrder": {
+			"type": "boolean",
+			"default": false
+		},
 		"fixedHeight": {
 			"type": "boolean",
 			"default": true
@@ -107,6 +112,16 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true
+			}
+		},
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
@@ -115,7 +130,9 @@
 			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"blockGap": true,
+				"margin": false,
+				"padding": false
 			}
 		},
 		"color": {
@@ -123,13 +140,16 @@
 			"background": true,
 			"gradients": true
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowEditing": false,
 			"default": {
 				"type": "flex"
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-gallery-editor",
diff --git a/packages/block-library/src/gallery/constants.js b/packages/block-library/src/gallery/constants.js
index f4a06914393132..19fc61cac84583 100644
--- a/packages/block-library/src/gallery/constants.js
+++ b/packages/block-library/src/gallery/constants.js
@@ -1,5 +1,6 @@
 export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';
diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js
index 313b700d6b3683..c2d3778d463f8a 100644
--- a/packages/block-library/src/gallery/deprecated.js
+++ b/packages/block-library/src/gallery/deprecated.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { map } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,7 +22,6 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 } from './constants';
-import { isGalleryV2Enabled } from './shared';
 
 const DEPRECATED_LINK_DESTINATION_MEDIA = 'file';
 const DEPRECATED_LINK_DESTINATION_ATTACHMENT = 'post';
@@ -229,7 +227,7 @@ const v7 = {
 	save( { attributes } ) {
 		const { caption, columns, imageCrop } = attributes;
 
-		const className = classnames( 'has-nested-images', {
+		const className = clsx( 'has-nested-images', {
 			[ `columns-${ columns }` ]: columns !== undefined,
 			[ `columns-default` ]: columns === undefined,
 			'is-cropped': imageCrop,
@@ -409,11 +407,7 @@ const v6 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 const v5 = {
@@ -499,23 +493,7 @@ const v5 = {
 		return ! linkTo || linkTo === 'attachment' || linkTo === 'media';
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		let linkTo = attributes.linkTo;
-
-		if ( ! attributes.linkTo ) {
-			linkTo = 'none';
-		} else if ( attributes.linkTo === 'attachment' ) {
-			linkTo = 'post';
-		} else if ( attributes.linkTo === 'media' ) {
-			linkTo = 'file';
-		}
-		return {
-			...attributes,
-			linkTo,
-		};
+		return runV2Migration( attributes );
 	},
 	save( { attributes } ) {
 		const {
@@ -662,17 +640,7 @@ const v4 = {
 		return ids && ids.some( ( id ) => typeof id === 'string' );
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return {
-			...attributes,
-			ids: map( attributes.ids, ( id ) => {
-				const parsedId = parseInt( id, 10 );
-				return Number.isInteger( parsedId ) ? parsedId : null;
-			} ),
-		};
+		return runV2Migration( attributes );
 	},
 	save( { attributes } ) {
 		const {
@@ -868,10 +836,7 @@ const v3 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 const v2 = {
@@ -937,18 +902,7 @@ const v2 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-		return {
-			...attributes,
-			ids: map( attributes.images, ( { id } ) => {
-				if ( ! id ) {
-					return null;
-				}
-				return parseInt( id, 10 );
-			} ),
-		};
+		return runV2Migration( attributes );
 	},
 	supports: {
 		align: true,
@@ -1062,7 +1016,7 @@ const v1 = {
 			imageCrop,
 			linkTo,
 		} = attributes;
-		const className = classnames( `columns-${ columns }`, {
+		const className = clsx( `columns-${ columns }`, {
 			alignnone: align === 'none',
 			'is-cropped': imageCrop,
 		} );
@@ -1101,11 +1055,7 @@ const v1 = {
 		);
 	},
 	migrate( attributes ) {
-		if ( isGalleryV2Enabled() ) {
-			return runV2Migration( attributes );
-		}
-
-		return attributes;
+		return runV2Migration( attributes );
 	},
 };
 
diff --git a/packages/block-library/src/gallery/edit-wrapper.js b/packages/block-library/src/gallery/edit-wrapper.js
deleted file mode 100644
index 2c81271902d312..00000000000000
--- a/packages/block-library/src/gallery/edit-wrapper.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withNotices } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import EditWithInnerBlocks from './edit';
-import EditWithoutInnerBlocks from './v1/edit';
-import { isGalleryV2Enabled } from './shared';
-
-/*
- * Using a wrapper around the logic to load the edit for v1 of Gallery block
- * or the refactored version with InnerBlocks. This is to prevent conditional
- * use of hooks lint errors if adding this logic to the top of the edit component.
- */
-function GalleryEditWrapper( props ) {
-	if ( ! isGalleryV2Enabled() ) {
-		return <EditWithoutInnerBlocks { ...props } />;
-	}
-
-	return <EditWithInnerBlocks { ...props } />;
-}
-
-export default compose( [ withNotices ] )( GalleryEditWrapper );
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 6d1a4ac5fc404a..01e725cc16cde6 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { find } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -15,23 +13,34 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
+	MenuGroup,
+	MenuItem,
+	ToolbarDropdownMenu,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	BlockControls,
 	MediaReplaceFlow,
+	useSettings,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
 import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import {
+	link as linkIcon,
+	customLink,
+	image as imageIcon,
+	linkOff,
+	fullscreen,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -48,6 +57,7 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
@@ -55,25 +65,47 @@ import useGetMedia from './use-get-media';
 import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
-const linkOptions = [
-	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
-	{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
+const LINK_OPTIONS = [
 	{
-		value: LINK_DESTINATION_NONE,
+		icon: customLink,
+		label: __( 'Link images to attachment pages' ),
+		value: LINK_DESTINATION_ATTACHMENT,
+		noticeText: __( 'Attachment Pages' ),
+	},
+	{
+		icon: imageIcon,
+		label: __( 'Link images to media files' ),
+		value: LINK_DESTINATION_MEDIA,
+		noticeText: __( 'Media Files' ),
+	},
+	{
+		icon: fullscreen,
+		label: __( 'Expand on click' ),
+		value: LINK_DESTINATION_LIGHTBOX,
+		noticeText: __( 'Lightbox effect' ),
+		infoText: __( 'Scale images with a lightbox effect' ),
+	},
+	{
+		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
+		value: LINK_DESTINATION_NONE,
+		noticeText: __( 'None' ),
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const PLACEHOLDER_TEXT = Platform.isNative
-	? __( 'ADD MEDIA' )
-	: __( 'Drag images, upload new ones or select files from your library.' );
+	? __( 'Add media' )
+	: __( 'Drag and drop images, upload, or choose from your library.' );
 
 const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }
 	: {};
 
-function GalleryEdit( props ) {
+const DEFAULT_BLOCK = { name: 'core/image' };
+const EMPTY_ARRAY = [];
+
+export default function GalleryEdit( props ) {
 	const {
 		setAttributes,
 		attributes,
@@ -81,44 +113,63 @@ function GalleryEdit( props ) {
 		clientId,
 		isSelected,
 		insertBlocksAfter,
+		isContentLocked,
+		onFocus,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
+	const [ lightboxSetting ] = useSettings( 'blocks.core/image.lightbox' );
+
+	const linkOptions = ! lightboxSetting?.allowEditing
+		? LINK_OPTIONS.filter(
+				( option ) => option.value !== LINK_DESTINATION_LIGHTBOX
+		  )
+		: LINK_OPTIONS;
+
+	const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } =
+		attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
 		updateBlockAttributes,
 		selectBlock,
-		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const { getBlock, getSettings, preferredStyle } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		const preferredStyleVariations =
-			settings.__experimentalPreferredStyleVariations;
-		return {
-			getBlock: select( blockEditorStore ).getBlock,
-			getSettings: select( blockEditorStore ).getSettings,
-			preferredStyle: preferredStyleVariations?.value?.[ 'core/image' ],
-		};
-	}, [] );
-
-	const innerBlockImages = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
-		},
-		[ clientId ]
-	);
-
-	const wasBlockJustInserted = useSelect(
+	const {
+		getBlock,
+		getSettings,
+		innerBlockImages,
+		blockWasJustInserted,
+		multiGallerySelection,
+	} = useSelect(
 		( select ) => {
-			return select( blockEditorStore ).wasBlockJustInserted(
-				clientId,
-				'inserter_menu'
-			);
+			const {
+				getBlockName,
+				getMultiSelectedBlockClientIds,
+				getSettings: _getSettings,
+				getBlock: _getBlock,
+				wasBlockJustInserted,
+			} = select( blockEditorStore );
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+			return {
+				getBlock: _getBlock,
+				getSettings: _getSettings,
+				innerBlockImages:
+					_getBlock( clientId )?.innerBlocks ?? EMPTY_ARRAY,
+				blockWasJustInserted: wasBlockJustInserted(
+					clientId,
+					'inserter_menu'
+				),
+				multiGallerySelection:
+					multiSelectedClientIds.length &&
+					multiSelectedClientIds.every(
+						( _clientId ) =>
+							getBlockName( _clientId ) === 'core/gallery'
+					),
+			};
 		},
 		[ clientId ]
 	);
@@ -149,9 +200,6 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
-		if ( newImages?.length > 0 ) {
-			clearSelectedBlock();
-		}
 	}, [ newImages ] );
 
 	const imageSizeOptions = useImageSizes(
@@ -174,16 +222,12 @@ function GalleryEdit( props ) {
 	 */
 	function buildImageAttributes( imageAttributes ) {
 		const image = imageAttributes.id
-			? find( imageData, { id: imageAttributes.id } )
+			? imageData.find( ( { id } ) => id === imageAttributes.id )
 			: null;
 
 		let newClassName;
 		if ( imageAttributes.className && imageAttributes.className !== '' ) {
 			newClassName = imageAttributes.className;
-		} else {
-			newClassName = preferredStyle
-				? `is-style-${ preferredStyle }`
-				: undefined;
 		}
 
 		let newLinkTarget;
@@ -217,10 +261,20 @@ function GalleryEdit( props ) {
 	}
 
 	function isValidFileType( file ) {
+		// 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
+				? imageData.find( ( { id } ) => id === file.id )
+				: null;
+
+		const mediaTypeSelector = nativeFileData
+			? nativeFileData?.media_type
+			: file.type;
+
 		return (
 			ALLOWED_MEDIA_TYPES.some(
-				( mediaType ) => file.type?.indexOf( mediaType ) === 0
-			) || file.url?.indexOf( 'blob:' ) === 0
+				( mediaType ) => mediaTypeSelector?.indexOf( mediaType ) === 0
+			) || file.blob
 		);
 	}
 
@@ -232,9 +286,9 @@ function GalleryEdit( props ) {
 		const imageArray = newFileUploads
 			? Array.from( selectedImages ).map( ( file ) => {
 					if ( ! file.url ) {
-						return pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} );
+						return {
+							blob: createBlobURL( file ),
+						};
 					}
 
 					return file;
@@ -254,9 +308,9 @@ function GalleryEdit( props ) {
 			.filter( ( file ) => file.url || isValidFileType( file ) )
 			.map( ( file ) => {
 				if ( ! file.url ) {
-					return pickRelevantMediaFiles( {
-						url: createBlobURL( file ),
-					} );
+					return {
+						blob: file.blob || createBlobURL( file ),
+					};
 				}
 
 				return file;
@@ -290,16 +344,13 @@ function GalleryEdit( props ) {
 		const newBlocks = newImageList.map( ( image ) => {
 			return createBlock( 'core/image', {
 				id: image.id,
+				blob: image.blob,
 				url: image.url,
 				caption: image.caption,
 				alt: image.alt,
 			} );
 		} );
 
-		if ( newBlocks?.length > 0 ) {
-			selectBlock( newBlocks[ 0 ].clientId );
-		}
-
 		replaceInnerBlocks(
 			clientId,
 			existingImageBlocks
@@ -310,6 +361,11 @@ function GalleryEdit( props ) {
 						newOrderMap[ b.attributes.id ]
 				)
 		);
+
+		// Select the first block to scroll into view when new blocks are added.
+		if ( newBlocks?.length > 0 ) {
+			selectBlock( newBlocks[ 0 ].clientId );
+		}
 	}
 
 	function onUploadError( message ) {
@@ -323,11 +379,15 @@ 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,
-				value
+				value,
+				false,
+				block.attributes,
+				lightboxSetting
 			);
 		} );
 		updateBlockAttributes( blocks, changedAttributes, true );
@@ -339,7 +399,7 @@ function GalleryEdit( props ) {
 			sprintf(
 				/* translators: %s: image size settings */
 				__( 'All gallery image links updated to: %s' ),
-				linkToText.label
+				linkToText.noticeText
 			),
 			{
 				id: 'gallery-attributes-linkTo',
@@ -356,10 +416,8 @@ function GalleryEdit( props ) {
 		setAttributes( { imageCrop: ! imageCrop } );
 	}
 
-	function getImageCropHelp( checked ) {
-		return checked
-			? __( 'Thumbnails are cropped to align.' )
-			: __( 'Thumbnails are not cropped.' );
+	function toggleRandomOrder() {
+		setAttributes( { randomOrder: ! randomOrder } );
 	}
 
 	function toggleOpenInNewTab( openInNewTab ) {
@@ -391,7 +449,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,
@@ -450,7 +508,8 @@ function GalleryEdit( props ) {
 				( hasImages && ! isSelected ) || imagesUploading,
 			value: hasImageIds ? images : {},
 			autoOpenMediaUpload:
-				! hasImages && isSelected && wasBlockJustInserted,
+				! hasImages && isSelected && blockWasJustInserted,
+			onFocus,
 		},
 	} );
 	const mediaPlaceholder = (
@@ -471,11 +530,29 @@ function GalleryEdit( props ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( className, 'has-nested-images' ),
+		className: clsx( className, 'has-nested-images' ),
+	} );
+
+	const nativeInnerBlockProps = Platform.isNative && {
+		marginHorizontal: 0,
+		marginVertical: 0,
+	};
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
+		orientation: 'horizontal',
+		renderAppender: false,
+		...nativeInnerBlockProps,
 	} );
 
 	if ( ! hasImages ) {
-		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
+		return (
+			<View { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ mediaPlaceholder }
+			</View>
+		);
 	}
 
 	const hasLinkTo = linkTo && linkTo !== 'none';
@@ -486,6 +563,7 @@ function GalleryEdit( props ) {
 				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Columns' ) }
 							value={
 								columns
@@ -497,43 +575,63 @@ function GalleryEdit( props ) {
 							max={ Math.min( MAX_COLUMNS, images.length ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
+							__next40pxDefaultSize
+						/>
+					) }
+					{ imageSizeOptions?.length > 0 && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Resolution' ) }
+							help={ __(
+								'Select the size of the source images.'
+							) }
+							value={ sizeSlug }
+							options={ imageSizeOptions }
+							onChange={ updateImagesSize }
+							hideCancelButton
+							size="__unstable-large"
 						/>
 					) }
+					{ Platform.isNative ? (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link' ) }
+							value={ linkTo }
+							onChange={ setLinkTo }
+							options={ linkOptions }
+							hideCancelButton
+							size="__unstable-large"
+						/>
+					) : null }
 					<ToggleControl
-						label={ __( 'Crop images' ) }
+						__nextHasNoMarginBottom
+						label={ __( 'Crop images to fit' ) }
 						checked={ !! imageCrop }
 						onChange={ toggleImageCrop }
-						help={ getImageCropHelp }
 					/>
-					<SelectControl
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton={ true }
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Randomize order' ) }
+						checked={ !! randomOrder }
+						onChange={ toggleRandomOrder }
 					/>
 					{ hasLinkTo && (
 						<ToggleControl
-							label={ __( 'Open in new tab' ) }
+							__nextHasNoMarginBottom
+							label={ __( 'Open images in new tab' ) }
 							checked={ linkTarget === '_blank' }
 							onChange={ toggleOpenInNewTab }
 						/>
 					) }
-					{ imageSizeOptions?.length > 0 && (
-						<SelectControl
-							label={ __( 'Image size' ) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton={ true }
-						/>
-					) }
 					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl className={ 'gallery-image-sizes' }>
+						<BaseControl
+							className="gallery-image-sizes"
+							__nextHasNoMarginBottom
+						>
 							<BaseControl.VisualLabel>
-								{ __( 'Image size' ) }
+								{ __( 'Resolution' ) }
 							</BaseControl.VisualLabel>
-							<View className={ 'gallery-image-sizes__loading' }>
+							<View className="gallery-image-sizes__loading">
 								<Spinner />
 								{ __( 'Loading options…' ) }
 							</View>
@@ -541,40 +639,83 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
-					handleUpload={ false }
-					onSelect={ updateImages }
-					name={ __( 'Add' ) }
-					multiple={ true }
-					mediaIds={ images
-						.filter( ( image ) => image.id )
-						.map( ( image ) => image.id ) }
-					addToGallery={ hasImageIds }
-				/>
-			</BlockControls>
+			{ Platform.isWeb ? (
+				<BlockControls group="block">
+					<ToolbarDropdownMenu
+						icon={ linkIcon }
+						label={ __( 'Link' ) }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								{ linkOptions.map( ( linkItem ) => {
+									const isOptionSelected =
+										linkTo === linkItem.value;
+									return (
+										<MenuItem
+											key={ linkItem.value }
+											isSelected={ isOptionSelected }
+											className={ clsx(
+												'components-dropdown-menu__menu-item',
+												{
+													'is-active':
+														isOptionSelected,
+												}
+											) }
+											iconPosition="left"
+											icon={ linkItem.icon }
+											onClick={ () => {
+												setLinkTo( linkItem.value );
+												onClose();
+											} }
+											role="menuitemradio"
+											info={ linkItem.infoText }
+										>
+											{ linkItem.label }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</BlockControls>
+			) : null }
 			{ Platform.isWeb && (
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
-					clientId={ clientId }
-				/>
+				<>
+					{ ! multiGallerySelection && (
+						<BlockControls group="other">
+							<MediaReplaceFlow
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								accept="image/*"
+								handleUpload={ false }
+								onSelect={ updateImages }
+								name={ __( 'Add' ) }
+								multiple
+								mediaIds={ images
+									.filter( ( image ) => image.id )
+									.map( ( image ) => image.id ) }
+								addToGallery={ hasImageIds }
+							/>
+						</BlockControls>
+					) }
+					<GapStyles
+						blockGap={ attributes.style?.spacing?.blockGap }
+						clientId={ clientId }
+					/>
+				</>
 			) }
 			<Gallery
 				{ ...props }
+				isContentLocked={ isContentLocked }
 				images={ images }
 				mediaPlaceholder={
 					! hasImages || Platform.isNative
 						? mediaPlaceholder
 						: undefined
 				}
-				blockProps={ blockProps }
+				blockProps={ innerBlocksProps }
 				insertBlocksAfter={ insertBlocksAfter }
+				multiGallerySelection={ multiGallerySelection }
 			/>
 		</>
 	);
 }
-export default compose( [ withViewportMatch( { isNarrow: '< small' } ) ] )(
-	GalleryEdit
-);
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 2fdde40f4c19af..61121f3dd866dc 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -1,15 +1,12 @@
-figure.wp-block-gallery {
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
+:root :where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
 	display: block;
-	&.has-nested-images {
-		.components-drop-zone {
-			display: none;
-			pointer-events: none;
-		}
-	}
 
 	> .blocks-gallery-caption {
 		flex: 0 0 100%;
@@ -33,7 +30,7 @@ figure.wp-block-gallery {
 		}
 	}
 
-	// @todo: this deserves a refactor, by being moved to the toolbar.
+	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {
 			display: none;
@@ -73,7 +70,6 @@ figure.wp-block-gallery {
 
 .gallery-image-sizes {
 	.components-base-control__label {
-		display: block;
 		margin-bottom: 4px;
 	}
 
@@ -143,12 +139,12 @@ figure.wp-block-gallery {
 	z-index: z-index(".block-library-gallery-item__inline-menu");
 	transition: box-shadow 0.2s ease-out;
 	@include reduce-motion("transition");
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background: $white;
 	border: $border-width solid $gray-900;
 
 	&:hover {
-		box-shadow: $shadow-popover;
+		box-shadow: $elevation-x-small;
 	}
 
 	@include break-small() {
diff --git a/packages/block-library/src/gallery/gallery-styles.native.scss b/packages/block-library/src/gallery/gallery-styles.native.scss
index a3073592291b93..f9b4d63c55b815 100644
--- a/packages/block-library/src/gallery/gallery-styles.native.scss
+++ b/packages/block-library/src/gallery/gallery-styles.native.scss
@@ -1,5 +1,3 @@
-@import "./v1/gallery-styles.native.scss";
-
 .galleryAppender {
 	padding-top: $grid-unit-20;
 }
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index e6176cc8a7256c..96b70cb87a70cc 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -1,24 +1,20 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useInnerBlocksProps,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
-const allowedBlocks = [ 'core/image' ];
+/**
+ * Internal dependencies
+ */
+import { Caption } from '../utils/caption';
 
-export const Gallery = ( props ) => {
+export default function Gallery( props ) {
 	const {
 		attributes,
 		isSelected,
@@ -27,21 +23,16 @@ export const Gallery = ( props ) => {
 		insertBlocksAfter,
 		blockProps,
 		__unstableLayoutClassNames: layoutClassNames,
+		isContentLocked,
+		multiGallerySelection,
 	} = props;
 
-	const { align, columns, caption, imageCrop } = attributes;
-
-	const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
-		allowedBlocks,
-		orientation: 'horizontal',
-		renderAppender: false,
-		__experimentalLayout: { type: 'default', alignments: [] },
-	} );
+	const { align, columns, imageCrop } = attributes;
 
 	return (
 		<figure
-			{ ...innerBlocksProps }
-			className={ classnames(
+			{ ...blockProps }
+			className={ clsx(
 				blockProps.className,
 				layoutClassNames,
 				'blocks-gallery-grid',
@@ -53,55 +44,24 @@ export const Gallery = ( props ) => {
 				}
 			) }
 		>
-			{ children }
-			{ isSelected && ! children && (
+			{ blockProps.children }
+			{ isSelected && ! blockProps.children && (
 				<View className="blocks-gallery-media-placeholder-wrapper">
 					{ mediaPlaceholder }
 				</View>
 			) }
-			<RichTextVisibilityHelper
-				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				tagName="figcaption"
-				className={ classnames(
-					'blocks-gallery-caption',
-					__experimentalGetElementClassName( 'caption' )
-				) }
-				aria-label={ __( 'Gallery caption text' ) }
-				placeholder={ __( 'Write gallery caption…' ) }
-				value={ caption }
-				onChange={ ( value ) => setAttributes( { caption: value } ) }
-				inlineToolbar
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				showToolbarButton={
+					! multiGallerySelection && ! isContentLocked
 				}
+				className="blocks-gallery-caption"
+				label={ __( 'Gallery caption text' ) }
+				placeholder={ __( 'Add gallery caption' ) }
 			/>
 		</figure>
 	);
-};
-
-function RichTextVisibilityHelper( {
-	isHidden,
-	className,
-	value,
-	placeholder,
-	tagName,
-	captionRef,
-	...richTextProps
-} ) {
-	if ( isHidden ) {
-		return <VisuallyHidden as={ RichText } { ...richTextProps } />;
-	}
-
-	return (
-		<RichText
-			ref={ captionRef }
-			value={ value }
-			placeholder={ placeholder }
-			className={ className }
-			tagName={ tagName }
-			{ ...richTextProps }
-		/>
-	);
 }
-
-export default Gallery;
diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js
index a5174d0215c424..a5fa2db4fcf029 100644
--- a/packages/block-library/src/gallery/gallery.native.js
+++ b/packages/block-library/src/gallery/gallery.native.js
@@ -13,11 +13,16 @@ import styles from './gallery-styles.scss';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { BlockCaption, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	BlockCaption,
+	RichText,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import { mediaUploadSync } from '@wordpress/react-native-bridge';
 import { WIDE_ALIGNMENTS } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
+import { withViewportMatch } from '@wordpress/viewport';
 
 const TILE_SPACING = 8;
 
@@ -60,13 +65,12 @@ export const Gallery = ( props ) => {
 		{},
 		{
 			contentResizeMode: 'stretch',
-			allowedBlocks: [ 'core/image' ],
 			orientation: 'horizontal',
 			renderAppender: false,
 			numColumns: displayedColumns,
 			marginHorizontal: TILE_SPACING,
 			marginVertical: TILE_SPACING,
-			__experimentalLayout: { type: 'default', alignments: [] },
+			layout: { type: 'default', alignments: [] },
 			gridProperties: {
 				numColumns: displayedColumns,
 			},
@@ -97,9 +101,9 @@ export const Gallery = ( props ) => {
 			<BlockCaption
 				clientId={ clientId }
 				isSelected={ isCaptionSelected }
-				accessible={ true }
+				accessible
 				accessibilityLabelCreator={ ( caption ) =>
-					! caption
+					RichText.isEmpty( caption )
 						? /* translators: accessibility text. Empty gallery caption. */
 
 						  'Gallery caption. Empty'
@@ -117,4 +121,4 @@ export const Gallery = ( props ) => {
 	);
 };
 
-export default Gallery;
+export default withViewportMatch( { isNarrow: '< small' } )( Gallery );
diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index 7bd0932d62f5b8..a1ad61f02b9955 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -2,13 +2,11 @@
  * WordPress dependencies
  */
 import {
-	BlockList,
 	__experimentalGetGapCSSValue as getGapCSSValue,
+	useStyleOverride,
 } from '@wordpress/block-editor';
-import { useContext, createPortal } from '@wordpress/element';
 
 export default function GapStyles( { blockGap, clientId } ) {
-	const styleElement = useContext( BlockList.__unstableElementContext );
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
 	const fallbackValue = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
@@ -35,11 +33,7 @@ export default function GapStyles( { blockGap, clientId } ) {
 		gap: ${ gapValue }
 	}`;
 
-	const GapStyle = () => {
-		return <style>{ gap }</style>;
-	};
+	useStyleOverride( { css: gap } );
 
-	return gap && styleElement
-		? createPortal( <GapStyle />, styleElement )
-		: null;
+	return null;
 }
diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
index f865072526098b..65a2cee3c5fec2 100644
--- a/packages/block-library/src/gallery/index.js
+++ b/packages/block-library/src/gallery/index.js
@@ -8,7 +8,7 @@ import { gallery as icon } from '@wordpress/icons';
  */
 import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
-import edit from './edit-wrapper';
+import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index ff1fb8ef42d89c..5af6be16d39a2b 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -13,6 +13,8 @@
  * we add a custom `data-id` attribute before rendering the gallery
  * so that the Image Block can pick it up in its render_callback.
  *
+ * @since 5.9.0
+ *
  * @param array $parsed_block The block being rendered.
  * @return array The migrated block object.
  */
@@ -33,18 +35,21 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
 /**
- * Adds a style tag for the --wp--style--unstable-gallery-gap var.
+ * Renders the `core/gallery` block on the server.
  *
- * The Gallery block needs to recalculate Image block width based on
- * the current gap setting in order to maintain the number of flex columns
- * so a css var is added to allow this.
+ * @since 6.0.0
  *
  * @param array  $attributes Attributes of the block being rendered.
  * @param string $content Content of the block being rendered.
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content ) {
-	$gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
+	// Adds a style tag for the --wp--style--unstable-gallery-gap var.
+	// The Gallery block needs to recalculate Image block width based on
+	// the current gap setting in order to maintain the number of flex columns
+	// so a css var is added to allow this.
+
+	$gap = $attributes['style']['spacing']['blockGap'] ?? null;
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
@@ -99,25 +104,72 @@ function block_core_gallery_render( $attributes, $content ) {
 	}
 
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
-	$gallery_styles   = array();
-	$gallery_styles[] = array(
-		'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
-		'declarations' => array(
-			'--wp--style--unstable-gallery-gap' => $gap_column,
-			'gap'                               => $gap_value,
+	$gallery_styles = array(
+		array(
+			'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+			'declarations' => array(
+				'--wp--style--unstable-gallery-gap' => $gap_column,
+				'gap'                               => $gap_value,
+			),
 		),
 	);
 
-	gutenberg_style_engine_get_stylesheet_from_css_rules(
+	wp_style_engine_get_stylesheet_from_css_rules(
 		$gallery_styles,
 		array(
 			'context' => 'block-supports',
 		)
 	);
-	return (string) $processed_content;
+
+	// The WP_HTML_Tag_Processor class calls get_updated_html() internally
+	// when the instance is treated as a string, but here we explicitly
+	// convert it to a string.
+	$updated_content = $processed_content->get_updated_html();
+
+	/*
+	 * Randomize the order of image blocks. Ideally we should shuffle
+	 * the `$parsed_block['innerBlocks']` via the `render_block_data` hook.
+	 * However, this hook doesn't apply inner block updates when blocks are
+	 * nested.
+	 * @todo In the future, if this hook supports updating innerBlocks in
+	 * nested blocks, it should be refactored.
+	 *
+	 * @see: https://github.com/WordPress/gutenberg/pull/58733
+	 */
+	if ( empty( $attributes['randomOrder'] ) ) {
+		return $updated_content;
+	}
+
+	// This pattern matches figure elements with the `wp-block-image` class to
+	// avoid the gallery's wrapping `figure` element and extract images only.
+	$pattern = '/<figure[^>]*\bwp-block-image\b[^>]*>.*?<\/figure>/';
+
+	// Find all Image blocks.
+	preg_match_all( $pattern, $updated_content, $matches );
+	if ( ! $matches ) {
+		return $updated_content;
+	}
+	$image_blocks = $matches[0];
+
+	// Randomize the order of Image blocks.
+	shuffle( $image_blocks );
+	$i       = 0;
+	$content = preg_replace_callback(
+		$pattern,
+		static function () use ( $image_blocks, &$i ) {
+			$new_image_block = $image_blocks[ $i ];
+			++$i;
+			return $new_image_block;
+		},
+		$updated_content
+	);
+
+	return $content;
 }
 /**
  * Registers the `core/gallery` block on server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_gallery() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
index 66253001e64182..cd8d35444285c9 100644
--- a/packages/block-library/src/gallery/save.js
+++ b/packages/block-library/src/gallery/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,20 +13,10 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import saveWithoutInnerBlocks from './v1/save';
-import { isGalleryV2Enabled } from './shared';
-
 export default function saveWithInnerBlocks( { attributes } ) {
-	if ( ! isGalleryV2Enabled() ) {
-		return saveWithoutInnerBlocks( { attributes } );
-	}
-
 	const { caption, columns, imageCrop } = attributes;
 
-	const className = classnames( 'has-nested-images', {
+	const className = clsx( 'has-nested-images', {
 		[ `columns-${ columns }` ]: columns !== undefined,
 		[ `columns-default` ]: columns === undefined,
 		'is-cropped': imageCrop,
@@ -40,7 +30,7 @@ export default function saveWithInnerBlocks( { attributes } ) {
 			{ ! RichText.isEmpty( caption ) && (
 				<RichText.Content
 					tagName="figcaption"
-					className={ classnames(
+					className={ clsx(
 						'blocks-gallery-caption',
 						__experimentalGetElementClassName( 'caption' )
 					) }
diff --git a/packages/block-library/src/gallery/shared-icon.native.js b/packages/block-library/src/gallery/shared-icon.native.js
deleted file mode 100644
index 16e89f5a95ac43..00000000000000
--- a/packages/block-library/src/gallery/shared-icon.native.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { gallery as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-const IconWithColorScheme = withPreferredColorScheme(
-	( { getStylesFromColorScheme } ) => {
-		const colorSchemeStyles = getStylesFromColorScheme(
-			styles.icon,
-			styles.iconDark
-		);
-		return <Icon icon={ icon } { ...colorSchemeStyles } />;
-	}
-);
-
-export const sharedIcon = <IconWithColorScheme />;
diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js
index f3142bbbaf9da6..f904a9e13d0d5e 100644
--- a/packages/block-library/src/gallery/shared.js
+++ b/packages/block-library/src/gallery/shared.js
@@ -1,13 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Platform } from '@wordpress/element';
-
 export function defaultColumnsNumber( imageCount ) {
 	return imageCount ? Math.min( 3, imageCount ) : 3;
 }
@@ -20,47 +10,15 @@ export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
 	);
 
 	imageProps.url =
-		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url ||
-		image.source_url;
+		image?.sizes?.[ sizeSlug ]?.url ||
+		image?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		image?.url ||
+		image?.source_url;
 	const fullUrl =
-		get( image, [ 'sizes', 'full', 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
+		image?.sizes?.full?.url ||
+		image?.media_details?.sizes?.full?.source_url;
 	if ( fullUrl ) {
 		imageProps.fullUrl = fullUrl;
 	}
 	return imageProps;
 };
-
-function getGalleryBlockV2Enabled() {
-	// We want to fail early here, at least during beta testing phase, to ensure
-	// there aren't instances where undefined values cause false negatives.
-	if ( ! window.wp || typeof window.wp.galleryBlockV2Enabled !== 'boolean' ) {
-		throw 'window.wp.galleryBlockV2Enabled is not defined';
-	}
-	return window.wp.galleryBlockV2Enabled;
-}
-
-/**
- * The new gallery block format is not compatible with the use_BalanceTags option
- * in WP versions <= 5.8 https://core.trac.wordpress.org/ticket/54130. The
- * window.wp.galleryBlockV2Enabled flag is set in lib/compat.php. This method
- * can be removed when minimum supported WP version >=5.9.
- */
-export function isGalleryV2Enabled() {
-	// The logic for the native version is located in a different if statement
-	// due to a lint rule that prohibits a single conditional combining
-	// `process.env.IS_GUTENBERG_PLUGIN` with a native platform check.
-	if ( Platform.isNative ) {
-		return getGalleryBlockV2Enabled();
-	}
-
-	// Only run the Gallery version compat check if the plugin is running, otherwise
-	// assume we are in 5.9 core and enable by default.
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		return getGalleryBlockV2Enabled();
-	}
-
-	return true;
-}
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 3f5a462e3206c0..1c4d5549339e1f 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -43,20 +43,43 @@ figure.wp-block-gallery.has-nested-images {
 			width: auto;
 		}
 
+		// Position caption and scrim at the bottom.
+		&:has(figcaption)::before,
 		figcaption {
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			position: absolute;
 			bottom: 0;
+			right: 0;
+			left: 0;
+			max-height: 100%;
+		}
+
+		// Create a background blur layer.
+		&:has(figcaption)::before {
+			content: "";
+			height: 100%;
+			max-height: 40%;
+
+			// Blur the background under the gradient scrim.
+			backdrop-filter: blur(3px);
+
+			// Crop the caption so the blur is only on the edge.
+			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
+		}
+
+		// Place the caption at the bottom.
+		figcaption {
 			color: $white;
+			text-shadow: 0 0 1.5px $black;
 			font-size: $default-font-size;
-			left: 0;
-			margin-bottom: 0;
-			max-height: 60%;
+			margin: 0;
 			overflow: auto;
-			padding: 0 8px 8px;
-			position: absolute;
+			padding: 1em;
 			text-align: center;
-			width: 100%;
 			box-sizing: border-box;
+			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
+
+			// Dark gradient scrim.
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
 
 			img {
 				display: inline;
@@ -84,6 +107,10 @@ figure.wp-block-gallery.has-nested-images {
 				margin: 0;
 				padding: 10px 10px 9px;
 				position: relative;
+				text-shadow: none;
+			}
+			&::before {
+				content: none;
 			}
 		}
 	}
diff --git a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
index 0a9cb246594e90..088a7d25282451 100644
--- a/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
+++ b/packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap
@@ -1,171 +1,177 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Gallery block Columns setting decrements columns 1`] = `
-"<!-- wp:gallery {\\"columns\\":2,\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-2 is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"columns":2,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-2 is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block Columns setting does not increment due to maximum value 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+<!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block cancels uploads 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":null} -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":null} -->
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":null} -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- wp:image {"id":null} -->
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block disables crop images setting 1`] = `
-"<!-- wp:gallery {\\"imageCrop\\":false,\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"imageCrop":false,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block finishes pending uploads upon opening the editor 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block handles failed uploads 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- wp:image {"id":2} -->
+<figure class="wp-block-image"><img src="file:///local-image-2.jpeg" alt="" class="wp-image-2"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block inserts block 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
 <!-- /wp:gallery -->"
 `;
 
-exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"media\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":1,\\"linkDestination\\":\\"media\\"} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+exports[`Gallery block overrides "Link" setting of gallery items 1`] = `
+"<!-- wp:gallery {"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1,"linkDestination":"media"} -->
+<figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2,\\"linkDestination\\":\\"media\\"} -->
-<figure class=\\"wp-block-image\\"><img src=\\"file:///local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2\\"/></figure>
+<!-- wp:image {"id":2,"linkDestination":"media"} -->
+<figure class="wp-block-image"><img src="file:///local-image-2.jpeg" alt="" class="wp-image-2"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block rearranges gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2002} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-3.jpeg\\" alt=\\"\\" class=\\"wp-image-2002\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2002} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt="" class="wp-image-2002"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+<!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
+exports[`Gallery block renders gallery block placeholder correctly if the block doesn't have inner blocks 1`] = `
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;
+
 exports[`Gallery block sets caption to gallery 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
-<!-- /wp:image --><figcaption class=\\"blocks-gallery-caption wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
+<!-- /wp:image --><figcaption class="blocks-gallery-caption wp-element-caption"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption</figcaption></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block sets caption to gallery items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/><figcaption class="wp-element-caption"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block successfully uploads items 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block takes a photo 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block uploads from free photo library 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
 
 exports[`Gallery block uploads from other apps 1`] = `
-"<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/></figure>
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-2000"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {\\"id\\":2001} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-2.jpeg\\" alt=\\"\\" class=\\"wp-image-2001\\"/></figure>
+<!-- wp:image {"id":2001} -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-2.jpeg" alt="" class="wp-image-2001"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;
diff --git a/packages/block-library/src/gallery/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/gallery/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..5c9c04e137dea4
--- /dev/null
+++ b/packages/block-library/src/gallery/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gallery block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Gallery block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Gallery block transformations to Image block 1`] = `
+"<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image -->"
+`;
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index 53bedb03190f48..f294555e41f2c1 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -3,7 +3,7 @@
  */
 import {
 	act,
-	changeTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getBlock,
 	getEditorHtml,
@@ -14,7 +14,9 @@ import {
 	setupMediaUpload,
 	triggerBlockListLayout,
 	within,
+	setupPicker,
 } from 'test/helpers';
+import { ActionSheetIOS } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -25,6 +27,8 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from '@wordpress/react-native-bridge';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -36,6 +40,12 @@ import {
 	generateGalleryBlock,
 } from './helpers';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'WordPress Media Library',
+];
+
 const media = [
 	{
 		localId: 1,
@@ -67,6 +77,24 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( "renders gallery block placeholder correctly if the block doesn't have inner blocks", async () => {
+		const getBlockSpy = jest
+			.spyOn( select( blockEditorStore ), 'getBlock' )
+			.mockReturnValue( {
+				innerBlocks: undefined,
+				attributes: {
+					content: '',
+				},
+			} );
+
+		const screen = await addGalleryBlock();
+
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+
+		getBlockSpy.mockRestore();
+	} );
+
 	it( 'selects a gallery item', async () => {
 		const { galleryBlock } = await initializeWithGalleryBlock( {
 			numberOfItems: 1,
@@ -96,9 +124,42 @@ describe( 'Gallery block', () => {
 		expect( getByText( 'WordPress Media Library' ) ).toBeVisible();
 	} );
 
-	// This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444)
-	// is addressed.
-	it.skip( 'displays media options picker when selecting the block', async () => {
+	it( 'displays correct media options picker', async () => {
+		// Initialize with an empty gallery
+		const screen = await initializeEditor( {
+			initialHtml: generateGalleryBlock( 0 ),
+		} );
+		const { getByText } = screen;
+
+		// Tap on Gallery block
+		const block = await getBlock( screen, 'Gallery' );
+		fireEvent.press( block );
+		fireEvent.press( within( block ).getByText( 'Add media' ) );
+
+		// Observe that media options picker is displayed
+		/* eslint-disable jest/no-conditional-expect */
+		if ( Platform.isIOS ) {
+			// On iOS the picker is rendered natively, so we have
+			// to check the arguments passed to `ActionSheetIOS`.
+			expect(
+				ActionSheetIOS.showActionSheetWithOptions
+			).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: 'Choose images',
+					options: [ 'Cancel', ...MEDIA_OPTIONS ],
+				} ),
+				expect.any( Function )
+			);
+		} else {
+			expect( getByText( 'Choose images' ) ).toBeVisible();
+			MEDIA_OPTIONS.forEach( ( option ) =>
+				expect( getByText( option ) ).toBeVisible()
+			);
+		}
+		/* eslint-enable jest/no-conditional-expect */
+	} );
+
+	it( 'block remains selected after dismissing the media options picker', async () => {
 		// Initialize with an empty gallery
 		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
@@ -106,13 +167,13 @@ describe( 'Gallery block', () => {
 			} );
 
 		// Tap on Gallery block
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 
 		// Observe that media options picker is displayed
 		expect( getByText( 'Choose images' ) ).toBeVisible();
 		expect( getByText( 'WordPress Media Library' ) ).toBeVisible();
 
-		// Dimiss the picker
+		// Dismiss the picker
 		if ( Platform.isIOS ) {
 			fireEvent.press( getByText( 'Cancel' ) );
 		} else {
@@ -166,14 +227,16 @@ describe( 'Gallery block', () => {
 		} );
 
 		// Check gallery item caption is not visible
-		const galleryItemCaption = getByLabelText( /Image caption. Empty/ );
+		const galleryItemCaption = getByLabelText( /Image caption. Empty/, {
+			hidden: true,
+		} );
 		expect( galleryItemCaption ).not.toBeVisible();
 
 		// Set gallery caption
 		const captionField = within(
 			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -197,7 +260,7 @@ describe( 'Gallery block', () => {
 		// Set gallery item caption
 		const captionField =
 			within( galleryItem ).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -213,11 +276,13 @@ describe( 'Gallery block', () => {
 			setupMediaPicker();
 
 		// Initialize with an empty gallery
-		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
+		const screen = await initializeWithGalleryBlock();
+		const { galleryBlock, getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
-		fireEvent.press( getByText( 'Choose from device' ) );
+		fireEvent.press( getByText( 'Add media' ) );
+		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
 		// Return media items picked
@@ -254,7 +319,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Choose from device' ) );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
@@ -308,7 +373,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Take a photo
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Take a Photo' ) );
 		expectMediaPickerCall( 'DEVICE_CAMERA', [ 'image' ], true );
 
@@ -362,7 +427,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Upload images from free photo library
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Free Photo Library' ) );
 		expectMediaPickerCall( 'stock-photo-library', [ 'image' ], true );
 
@@ -402,7 +467,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Choose from device' ) );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
@@ -444,10 +509,11 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc010
 	it( 'rearranges gallery items', async () => {
 		// Initialize with a gallery that contains three items
-		const { galleryBlock } = await initializeWithGalleryBlock( {
-			numberOfItems: 3,
-			media,
-		} );
+		const { getByLabelText, galleryBlock } =
+			await initializeWithGalleryBlock( {
+				numberOfItems: 3,
+				media,
+			} );
 
 		// Rearrange items (final disposition will be: Image 3 - Image 1 - Image 2)
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
@@ -456,7 +522,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem3 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem3 ).getByLabelText(
+				getByLabelText(
 					/Move block left from position 3 to position 2/
 				)
 			)
@@ -465,7 +531,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem1 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem1 ).getByLabelText(
+				getByLabelText(
 					/Move block right from position 1 to position 2/
 				)
 			)
@@ -501,7 +567,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Upload images from other apps
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Other Apps' ) );
 		expectMediaPickerCall( 'other-files', [ 'image' ], true );
 
@@ -528,16 +594,16 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	// Test case related to TC012 - Settings - Link to
+	// Test case related to TC012 - Settings - Link
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012
-	it( 'overrides "Link to" setting of gallery items', async () => {
+	it( 'overrides "Link" setting of gallery items', async () => {
 		// Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute
 		const screen = await initializeWithGalleryBlock( {
 			html: `<!-- wp:gallery {"linkTo":"none"} -->
 		<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":${ media[ 0 ].localId }} -->
 		<figure class="wp-block-image"><img src="${ media[ 0 ].localUrl }" alt="" class="wp-image-${ media[ 0 ].localId }"/></figure>
 		<!-- /wp:image -->
-		
+
 		<!-- wp:image {"id":${ media[ 1 ].localId },"linkDestination":"attachment"} -->
 		<figure class="wp-block-image"><img src="${ media[ 1 ].localUrl }" alt="" class="wp-image-${ media[ 1 ].localId }"/></figure>
 		<!-- /wp:image --></figure>
@@ -546,14 +612,28 @@ describe( 'Gallery block', () => {
 		} );
 		const { getByText } = screen;
 
-		// Set "Link to" setting via Gallery block settings
+		// Set "Link" setting via Gallery block settings
 		await openBlockSettings( screen );
-		fireEvent.press( getByText( 'Link to' ) );
-		fireEvent.press( getByText( 'Media File' ) );
+		fireEvent.press( getByText( 'Link' ) );
+		fireEvent.press( getByText( 'Link images to media files' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'does not display MediaReplaceFlow component within the block toolbar', async () => {
+		const screen = await initializeWithGalleryBlock( {
+			numberOfItems: 3,
+			media,
+		} );
+		const { queryByTestId } = screen;
+
+		fireEvent.press( getBlock( screen, 'Gallery' ) );
+
+		// Expect the native MediaReplaceFlow component to not be present in the block toolbar
+		const mediaReplaceFlow = queryByTestId( 'media-replace-flow' );
+		expect( mediaReplaceFlow ).toBeNull();
+	} );
+
 	// Test cases related to TC013 - Settings - Columns
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013
 	describe( 'Columns setting', () => {
@@ -614,7 +694,7 @@ describe( 'Gallery block', () => {
 		await openBlockSettings( screen );
 
 		// Disable crop images setting
-		fireEvent.press( getByText( 'Crop images' ) );
+		fireEvent.press( getByText( 'Crop images to fit' ) );
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/block-library/src/gallery/test/transforms.native.js b/packages/block-library/src/gallery/test/transforms.native.js
new file mode 100644
index 00000000000000..d155c1bc01064d
--- /dev/null
+++ b/packages/block-library/src/gallery/test/transforms.native.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Gallery';
+const initialHtml = `
+<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Heading.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://wordpress.org/gutenberg/files/2018/07/Block-Icon-Subheading.png" alt=""/><figcaption class="wp-element-caption">Subheading</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Image', ...tranformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: true,
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/gallery/test/use-get-media.native.js b/packages/block-library/src/gallery/test/use-get-media.native.js
new file mode 100644
index 00000000000000..67c7a8d0b5df2f
--- /dev/null
+++ b/packages/block-library/src/gallery/test/use-get-media.native.js
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { render } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useGetMedia from '../use-get-media';
+
+describe( 'useGetMedia', () => {
+	// TODO: Explore why a Gallery block would ever be without inner blocks.
+	// This test and the associated default function parameter might be unnecessary.
+	it( 'should not error when receiving zero images', () => {
+		// Arrange
+		const TestSubject = () => {
+			useGetMedia( undefined );
+			return null;
+		};
+
+		// Assert
+		expect( () => render( <TestSubject /> ) ).not.toThrow();
+	} );
+} );
diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js
index 3c49c32330144e..f040fdb12fb235 100644
--- a/packages/block-library/src/gallery/transforms.js
+++ b/packages/block-library/src/gallery/transforms.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -18,11 +13,6 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA,
 } from './constants';
-import {
-	LINK_DESTINATION_ATTACHMENT as DEPRECATED_LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA as DEPRECATED_LINK_DESTINATION_MEDIA,
-} from './v1/constants';
-import { pickRelevantMediaFiles, isGalleryV2Enabled } from './shared';
 
 const parseShortcodeIds = ( ids ) => {
 	if ( ! ids ) {
@@ -48,7 +38,6 @@ const parseShortcodeIds = ( ids ) => {
  */
 function updateThirdPartyTransformToGallery( block ) {
 	if (
-		isGalleryV2Enabled() &&
 		block.name === 'core/gallery' &&
 		block.attributes?.images.length > 0
 	) {
@@ -144,95 +133,29 @@ const transforms = {
 					? sizeSlug
 					: undefined;
 
-				const validImages = filter( attributes, ( { url } ) => url );
-
-				if ( isGalleryV2Enabled() ) {
-					const innerBlocks = validImages.map( ( image ) => {
-						// Gallery images can't currently be resized so make sure height and width are undefined.
-						image.width = undefined;
-						image.height = undefined;
-						return createBlock( 'core/image', image );
-					} );
-
-					return createBlock(
-						'core/gallery',
-						{
-							align,
-							sizeSlug,
-						},
-						innerBlocks
-					);
-				}
+				const validImages = attributes.filter( ( { url } ) => url );
 
-				return createBlock( 'core/gallery', {
-					images: validImages.map(
-						( { id, url, alt, caption } ) => ( {
-							id: id.toString(),
-							url,
-							alt,
-							caption,
-						} )
-					),
-					ids: validImages.map( ( { id } ) => parseInt( id, 10 ) ),
-					align,
-					sizeSlug,
+				const innerBlocks = validImages.map( ( image ) => {
+					// Gallery images can't currently be resized so make sure height and width are undefined.
+					image.width = undefined;
+					image.height = undefined;
+					return createBlock( 'core/image', image );
 				} );
+
+				return createBlock(
+					'core/gallery',
+					{
+						align,
+						sizeSlug,
+					},
+					innerBlocks
+				);
 			},
 		},
 		{
 			type: 'shortcode',
 			tag: 'gallery',
-
-			attributes: {
-				images: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id: id.toString(),
-							} ) );
-						}
-					},
-				},
-				ids: {
-					type: 'array',
-					shortcode: ( { named: { ids } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							return parseShortcodeIds( ids );
-						}
-					},
-				},
-				columns: {
-					type: 'number',
-					shortcode: ( { named: { columns = '3' } } ) => {
-						return parseInt( columns, 10 );
-					},
-				},
-				linkTo: {
-					type: 'string',
-					shortcode: ( { named: { link } } ) => {
-						if ( ! isGalleryV2Enabled() ) {
-							switch ( link ) {
-								case 'post':
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-								case 'file':
-									return DEPRECATED_LINK_DESTINATION_MEDIA;
-								default:
-									return DEPRECATED_LINK_DESTINATION_ATTACHMENT;
-							}
-						}
-						switch ( link ) {
-							case 'post':
-								return LINK_DESTINATION_ATTACHMENT;
-							case 'file':
-								return LINK_DESTINATION_MEDIA;
-							default:
-								return LINK_DESTINATION_NONE;
-						}
-					},
-				},
-			},
-			transform( { named: { ids, columns = 3, link } } ) {
+			transform( { named: { ids, columns = 3, link, orderby } } ) {
 				const imageIds = parseShortcodeIds( ids ).map( ( id ) =>
 					parseInt( id, 10 )
 				);
@@ -249,6 +172,7 @@ const transforms = {
 					{
 						columns: parseInt( columns, 10 ),
 						linkTo,
+						randomOrder: orderby === 'rand',
 					},
 					imageIds.map( ( imageId ) =>
 						createBlock( 'core/image', { id: imageId } )
@@ -278,23 +202,13 @@ const transforms = {
 				);
 			},
 			transform( files ) {
-				if ( isGalleryV2Enabled() ) {
-					const innerBlocks = files.map( ( file ) =>
-						createBlock( 'core/image', {
-							url: createBlobURL( file ),
-						} )
-					);
+				const innerBlocks = files.map( ( file ) =>
+					createBlock( 'core/image', {
+						blob: createBlobURL( file ),
+					} )
+				);
 
-					return createBlock( 'core/gallery', {}, innerBlocks );
-				}
-				const block = createBlock( 'core/gallery', {
-					images: files.map( ( file ) =>
-						pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} )
-					),
-				} );
-				return block;
+				return createBlock( 'core/gallery', {}, innerBlocks );
 			},
 		},
 	],
@@ -302,57 +216,42 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/image' ],
-			transform: ( { align, images, ids, sizeSlug }, innerBlocks ) => {
-				if ( isGalleryV2Enabled() ) {
-					if ( innerBlocks.length > 0 ) {
-						return innerBlocks.map(
-							( {
-								attributes: {
-									url,
-									alt,
-									caption,
-									title,
-									href,
-									rel,
-									linkClass,
-									id,
-									sizeSlug: imageSizeSlug,
-									linkDestination,
-									linkTarget,
-									anchor,
-									className,
-								},
-							} ) =>
-								createBlock( 'core/image', {
-									align,
-									url,
-									alt,
-									caption,
-									title,
-									href,
-									rel,
-									linkClass,
-									id,
-									sizeSlug: imageSizeSlug,
-									linkDestination,
-									linkTarget,
-									anchor,
-									className,
-								} )
-						);
-					}
-					return createBlock( 'core/image', { align } );
-				}
-				if ( images.length > 0 ) {
-					return images.map( ( { url, alt, caption }, index ) =>
-						createBlock( 'core/image', {
-							id: ids[ index ],
-							url,
-							alt,
-							caption,
-							align,
-							sizeSlug,
-						} )
+			transform: ( { align }, innerBlocks ) => {
+				if ( innerBlocks.length > 0 ) {
+					return innerBlocks.map(
+						( {
+							attributes: {
+								url,
+								alt,
+								caption,
+								title,
+								href,
+								rel,
+								linkClass,
+								id,
+								sizeSlug: imageSizeSlug,
+								linkDestination,
+								linkTarget,
+								anchor,
+								className,
+							},
+						} ) =>
+							createBlock( 'core/image', {
+								align,
+								url,
+								alt,
+								caption,
+								title,
+								href,
+								rel,
+								linkClass,
+								id,
+								sizeSlug: imageSizeSlug,
+								linkDestination,
+								linkTarget,
+								anchor,
+								className,
+							} )
 					);
 				}
 				return createBlock( 'core/image', { align } );
diff --git a/packages/block-library/src/gallery/use-get-media.js b/packages/block-library/src/gallery/use-get-media.js
index 36559447ae291f..a6dbe9faabf0b9 100644
--- a/packages/block-library/src/gallery/use-get-media.js
+++ b/packages/block-library/src/gallery/use-get-media.js
@@ -28,7 +28,7 @@ export default function useGetMedia( innerBlockImages ) {
 			return (
 				select( coreStore ).getMediaItems( {
 					include: imageIds.join( ',' ),
-					per_page: imageIds.length,
+					per_page: -1,
 					orderby: 'include',
 				} ) ?? EMPTY_IMAGE_MEDIA
 			);
diff --git a/packages/block-library/src/gallery/use-get-media.native.js b/packages/block-library/src/gallery/use-get-media.native.js
index 994a2152f756c2..6adb9d0c63ffd0 100644
--- a/packages/block-library/src/gallery/use-get-media.native.js
+++ b/packages/block-library/src/gallery/use-get-media.native.js
@@ -14,7 +14,7 @@ const EMPTY_IMAGE_MEDIA = [];
  *
  * @return {Array} An array of media info options for each gallery image.
  */
-export default function useGetMedia( innerBlockImages ) {
+export default function useGetMedia( innerBlockImages = [] ) {
 	return useSelect(
 		( select ) => {
 			const imagesUploading = innerBlockImages.some(
@@ -34,7 +34,8 @@ export default function useGetMedia( innerBlockImages ) {
 			return (
 				select( coreStore ).getMediaItems( {
 					include: imageIds.join( ',' ),
-					per_page: imageIds.length,
+					per_page:
+						imageIds.length /* 'hard' limit necessary as unbounded queries aren't supported on native */,
 					orderby: 'include',
 				} ) ?? EMPTY_IMAGE_MEDIA
 			);
diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
index 84c7ab59749d9a..8dcc3eca61115f 100644
--- a/packages/block-library/src/gallery/use-image-sizes.js
+++ b/packages/block-library/src/gallery/use-image-sizes.js
@@ -1,18 +1,13 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
 
 /**
- * Calculates the image sizes that are avaible for the current gallery images in order to
- * populate the 'Image size' selector.
+ * Calculates the image sizes that are available for the current gallery images in order to
+ * populate the 'Resolution' selector.
  *
- * @param {Array}    images      Basic image block data taken from current gallery innerBlock
+ * @param {Array}    images      Basic image block data taken from current gallery innerBlock.
  * @param {boolean}  isSelected  Is the block currently selected in the editor.
  * @param {Function} getSettings Block editor store selector.
  *
@@ -35,17 +30,9 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 				}
 
 				const sizes = imageSizes.reduce( ( currentSizes, size ) => {
-					const defaultUrl = get( img, [
-						'sizes',
-						size.slug,
-						'url',
-					] );
-					const mediaDetailsUrl = get( img, [
-						'media_details',
-						'sizes',
-						size.slug,
-						'source_url',
-					] );
+					const defaultUrl = img.sizes?.[ size.slug ]?.url;
+					const mediaDetailsUrl =
+						img.media_details?.sizes?.[ size.slug ]?.source_url;
 					return {
 						...currentSizes,
 						[ size.slug ]: defaultUrl || mediaDetailsUrl,
diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js
index 15f2062ea943da..4b2aca81f6ffb3 100644
--- a/packages/block-library/src/gallery/utils.js
+++ b/packages/block-library/src/gallery/utils.js
@@ -7,6 +7,7 @@ import {
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_MEDIA_WP_CORE,
 	LINK_DESTINATION_ATTACHMENT_WP_CORE,
+	LINK_DESTINATION_LIGHTBOX,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -20,13 +21,18 @@ import {
  *
  * @param {Object} image              Gallery image.
  * @param {string} galleryDestination Gallery's selected link destination.
- * @param {Object} imageDestination   Image blocks attributes.
+ * @param {Object} imageDestination   Image block link destination attribute.
+ * @param {Object} attributes         Block attributes.
+ * @param {Object} lightboxSetting    Lightbox setting.
+ *
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination(
 	image,
 	galleryDestination,
-	imageDestination
+	imageDestination,
+	attributes,
+	lightboxSetting
 ) {
 	// Gutenberg and WordPress use different constants so if image_default_link_type
 	// option is set we need to map from the WP Core values.
@@ -36,17 +42,32 @@ export function getHrefAndDestination(
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
 			};
 		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,
 				linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT,
+				lightbox: lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: false }
+					: undefined,
+			};
+		case LINK_DESTINATION_LIGHTBOX:
+			return {
+				href: undefined,
+				lightbox: ! lightboxSetting?.enabled
+					? { ...attributes?.lightbox, enabled: true }
+					: undefined,
+				linkDestination: IMAGE_LINK_DESTINATION_NONE,
 			};
 		case LINK_DESTINATION_NONE:
 			return {
 				href: undefined,
 				linkDestination: IMAGE_LINK_DESTINATION_NONE,
+				lightbox: undefined,
 			};
 	}
 
diff --git a/packages/block-library/src/gallery/v1/constants.js b/packages/block-library/src/gallery/v1/constants.js
deleted file mode 100644
index f4b6e7af56d473..00000000000000
--- a/packages/block-library/src/gallery/v1/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const LINK_DESTINATION_NONE = 'none';
-export const LINK_DESTINATION_MEDIA = 'file';
-export const LINK_DESTINATION_ATTACHMENT = 'post';
diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
deleted file mode 100644
index 2ac1df11c72797..00000000000000
--- a/packages/block-library/src/gallery/v1/edit.js
+++ /dev/null
@@ -1,461 +0,0 @@
-/**
- * External dependencies
- */
-import { filter, find, get, isEmpty, map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import {
-	PanelBody,
-	SelectControl,
-	ToggleControl,
-	withNotices,
-	RangeControl,
-} from '@wordpress/components';
-import {
-	MediaPlaceholder,
-	InspectorControls,
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { Platform, useEffect, useState, useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { withViewportMatch } from '@wordpress/viewport';
-import { View } from '@wordpress/primitives';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { sharedIcon } from '../shared-icon';
-import { pickRelevantMediaFiles } from './shared';
-import { defaultColumnsNumberV1 } from '../deprecated';
-import Gallery from './gallery';
-import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-	LINK_DESTINATION_NONE,
-} from './constants';
-
-const MAX_COLUMNS = 8;
-const linkOptions = [
-	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
-	{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
-	{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
-];
-const ALLOWED_MEDIA_TYPES = [ 'image' ];
-
-const PLACEHOLDER_TEXT = Platform.select( {
-	web: __(
-		'Drag images, upload new ones or select files from your library.'
-	),
-	native: __( 'ADD MEDIA' ),
-} );
-
-const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
-	web: {},
-	native: { type: 'stepper' },
-} );
-
-function GalleryEdit( props ) {
-	const {
-		attributes,
-		clientId,
-		isSelected,
-		noticeUI,
-		noticeOperations,
-		onFocus,
-	} = props;
-	const {
-		columns = defaultColumnsNumberV1( attributes ),
-		imageCrop,
-		images,
-		linkTo,
-		sizeSlug,
-	} = attributes;
-	const [ selectedImage, setSelectedImage ] = useState();
-	const [ attachmentCaptions, setAttachmentCaptions ] = useState();
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { imageSizes, mediaUpload, getMedia, wasBlockJustInserted } =
-		useSelect( ( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-
-			return {
-				imageSizes: settings.imageSizes,
-				mediaUpload: settings.mediaUpload,
-				getMedia: select( coreStore ).getMedia,
-				wasBlockJustInserted: select(
-					blockEditorStore
-				).wasBlockJustInserted( clientId, 'inserter_menu' ),
-			};
-		} );
-
-	const resizedImages = useMemo( () => {
-		if ( isSelected ) {
-			return ( attributes.ids ?? [] ).reduce(
-				( currentResizedImages, id ) => {
-					if ( ! id ) {
-						return currentResizedImages;
-					}
-					const image = getMedia( id );
-					const sizes = imageSizes.reduce( ( currentSizes, size ) => {
-						const defaultUrl = get( image, [
-							'sizes',
-							size.slug,
-							'url',
-						] );
-						const mediaDetailsUrl = get( image, [
-							'media_details',
-							'sizes',
-							size.slug,
-							'source_url',
-						] );
-						return {
-							...currentSizes,
-							[ size.slug ]: defaultUrl || mediaDetailsUrl,
-						};
-					}, {} );
-					return {
-						...currentResizedImages,
-						[ parseInt( id, 10 ) ]: sizes,
-					};
-				},
-				{}
-			);
-		}
-		return {};
-	}, [ isSelected, attributes.ids, imageSizes ] );
-
-	function onFocusGalleryCaption() {
-		setSelectedImage();
-	}
-
-	function setAttributes( newAttrs ) {
-		if ( newAttrs.ids ) {
-			throw new Error(
-				'The "ids" attribute should not be changed directly. It is managed automatically when "images" attribute changes'
-			);
-		}
-
-		if ( newAttrs.images ) {
-			newAttrs = {
-				...newAttrs,
-				// Unlike images[ n ].id which is a string, always ensure the
-				// ids array contains numbers as per its attribute type.
-				ids: map( newAttrs.images, ( { id } ) => parseInt( id, 10 ) ),
-			};
-		}
-
-		props.setAttributes( newAttrs );
-	}
-
-	function onSelectImage( index ) {
-		return () => {
-			setSelectedImage( index );
-		};
-	}
-
-	function onDeselectImage() {
-		return () => {
-			setSelectedImage();
-		};
-	}
-
-	function onMove( oldIndex, newIndex ) {
-		const newImages = [ ...images ];
-		newImages.splice( newIndex, 1, images[ oldIndex ] );
-		newImages.splice( oldIndex, 1, images[ newIndex ] );
-		setSelectedImage( newIndex );
-		setAttributes( { images: newImages } );
-	}
-
-	function onMoveForward( oldIndex ) {
-		return () => {
-			if ( oldIndex === images.length - 1 ) {
-				return;
-			}
-			onMove( oldIndex, oldIndex + 1 );
-		};
-	}
-
-	function onMoveBackward( oldIndex ) {
-		return () => {
-			if ( oldIndex === 0 ) {
-				return;
-			}
-			onMove( oldIndex, oldIndex - 1 );
-		};
-	}
-
-	function onRemoveImage( index ) {
-		return () => {
-			const newImages = filter( images, ( img, i ) => index !== i );
-			setSelectedImage();
-			setAttributes( {
-				images: newImages,
-				columns: attributes.columns
-					? Math.min( newImages.length, attributes.columns )
-					: attributes.columns,
-			} );
-		};
-	}
-
-	function selectCaption( newImage ) {
-		// The image id in both the images and attachmentCaptions arrays is a
-		// 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 currentImageCaption = currentImage
-			? currentImage.caption
-			: newImage.caption;
-
-		if ( ! attachmentCaptions ) {
-			return currentImageCaption;
-		}
-
-		const attachment = find( attachmentCaptions, {
-			id: newImageId,
-		} );
-
-		// If the attachment caption is updated.
-		if ( attachment && attachment.caption !== newImage.caption ) {
-			return newImage.caption;
-		}
-
-		return currentImageCaption;
-	}
-
-	function onSelectImages( newImages ) {
-		setAttachmentCaptions(
-			newImages.map( ( newImage ) => ( {
-				// Store the attachmentCaption id as a string for consistency
-				// with the type of the id in the images attribute.
-				id: newImage.id.toString(),
-				caption: newImage.caption,
-			} ) )
-		);
-		setAttributes( {
-			images: newImages.map( ( newImage ) => ( {
-				...pickRelevantMediaFiles( newImage, sizeSlug ),
-				caption: selectCaption( newImage, images, attachmentCaptions ),
-				// The id value is stored in a data attribute, so when the
-				// block is parsed it's converted to a string. Converting
-				// to a string here ensures it's type is consistent.
-				id: newImage.id.toString(),
-			} ) ),
-			columns: attributes.columns
-				? Math.min( newImages.length, attributes.columns )
-				: attributes.columns,
-		} );
-	}
-
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
-
-	function setLinkTo( value ) {
-		setAttributes( { linkTo: value } );
-	}
-
-	function setColumnsNumber( value ) {
-		setAttributes( { columns: value } );
-	}
-
-	function toggleImageCrop() {
-		setAttributes( { imageCrop: ! imageCrop } );
-	}
-
-	function getImageCropHelp( checked ) {
-		return checked
-			? __( 'Thumbnails are cropped to align.' )
-			: __( 'Thumbnails are not cropped.' );
-	}
-
-	function setImageAttributes( index, newAttributes ) {
-		if ( ! images[ index ] ) {
-			return;
-		}
-
-		setAttributes( {
-			images: [
-				...images.slice( 0, index ),
-				{
-					...images[ index ],
-					...newAttributes,
-				},
-				...images.slice( index + 1 ),
-			],
-		} );
-	}
-
-	function getImagesSizeOptions() {
-		const resizedImageSizes = Object.values( resizedImages );
-		return map(
-			filter( imageSizes, ( { slug } ) =>
-				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
-			),
-			( { name, slug } ) => ( { value: slug, label: name } )
-		);
-	}
-
-	function updateImagesSize( newSizeSlug ) {
-		const updatedImages = map( images, ( image ) => {
-			if ( ! image.id ) {
-				return image;
-			}
-			const url = get( resizedImages, [
-				parseInt( image.id, 10 ),
-				newSizeSlug,
-			] );
-			return {
-				...image,
-				...( url && { url } ),
-			};
-		} );
-
-		setAttributes( { images: updatedImages, sizeSlug: newSizeSlug } );
-	}
-
-	useEffect( () => {
-		if (
-			Platform.OS === 'web' &&
-			images &&
-			images.length > 0 &&
-			images.every( ( { url } ) => isBlobURL( url ) )
-		) {
-			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
-			images.forEach( ( { url } ) => revokeBlobURL( url ) );
-			mediaUpload( {
-				filesList,
-				onFileChange: onSelectImages,
-				allowedTypes: [ 'image' ],
-			} );
-		}
-	}, [] );
-
-	useEffect( () => {
-		// Deselect images when deselecting the block.
-		if ( ! isSelected ) {
-			setSelectedImage();
-		}
-	}, [ isSelected ] );
-
-	useEffect( () => {
-		// linkTo attribute must be saved so blocks don't break when changing
-		// image_default_link_type in options.php.
-		if ( ! linkTo ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				linkTo:
-					window?.wp?.media?.view?.settings?.defaultProps?.link ||
-					LINK_DESTINATION_NONE,
-			} );
-		}
-	}, [ linkTo ] );
-
-	const hasImages = !! images.length;
-	const hasImageIds = hasImages && images.some( ( image ) => !! image.id );
-
-	const mediaPlaceholder = (
-		<MediaPlaceholder
-			addToGallery={ hasImageIds }
-			isAppender={ hasImages }
-			disableMediaButtons={ hasImages && ! isSelected }
-			icon={ ! hasImages && sharedIcon }
-			labels={ {
-				title: ! hasImages && __( 'Gallery' ),
-				instructions: ! hasImages && PLACEHOLDER_TEXT,
-			} }
-			onSelect={ onSelectImages }
-			accept="image/*"
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			multiple
-			value={ hasImageIds ? images : {} }
-			onError={ onUploadError }
-			notices={ hasImages ? undefined : noticeUI }
-			onFocus={ onFocus }
-			autoOpenMediaUpload={
-				! hasImages && isSelected && wasBlockJustInserted
-			}
-		/>
-	);
-
-	const blockProps = useBlockProps();
-
-	if ( ! hasImages ) {
-		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
-	}
-
-	const imageSizeOptions = getImagesSizeOptions();
-	const shouldShowSizeOptions = hasImages && ! isEmpty( imageSizeOptions );
-
-	return (
-		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					{ images.length > 1 && (
-						<RangeControl
-							label={ __( 'Columns' ) }
-							value={ columns }
-							onChange={ setColumnsNumber }
-							min={ 1 }
-							max={ Math.min( MAX_COLUMNS, images.length ) }
-							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
-							required
-						/>
-					) }
-					<ToggleControl
-						label={ __( 'Crop images' ) }
-						checked={ !! imageCrop }
-						onChange={ toggleImageCrop }
-						help={ getImageCropHelp }
-					/>
-					<SelectControl
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton={ true }
-					/>
-					{ shouldShowSizeOptions && (
-						<SelectControl
-							label={ __( 'Image size' ) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton={ true }
-						/>
-					) }
-				</PanelBody>
-			</InspectorControls>
-			{ noticeUI }
-			<Gallery
-				{ ...props }
-				selectedImage={ selectedImage }
-				mediaPlaceholder={ mediaPlaceholder }
-				onMoveBackward={ onMoveBackward }
-				onMoveForward={ onMoveForward }
-				onRemoveImage={ onRemoveImage }
-				onSelectImage={ onSelectImage }
-				onDeselectImage={ onDeselectImage }
-				onSetImageAttributes={ setImageAttributes }
-				blockProps={ blockProps }
-				// This prop is used by gallery.native.js.
-				onFocusGalleryCaption={ onFocusGalleryCaption }
-			/>
-		</>
-	);
-}
-
-export default compose( [
-	withNotices,
-	withViewportMatch( { isNarrow: '< small' } ),
-] )( GalleryEdit );
diff --git a/packages/block-library/src/gallery/v1/gallery-button.native.js b/packages/block-library/src/gallery/v1/gallery-button.native.js
deleted file mode 100644
index 8804e99cf2e7e6..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery-button.native.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import style from './gallery-image-style.scss';
-
-export function Button( props ) {
-	const {
-		icon,
-		iconSize = 24,
-		onClick,
-		disabled,
-		'aria-disabled': ariaDisabled,
-		accessibilityLabel = 'button',
-		style: customStyle,
-	} = props;
-
-	const buttonStyle = StyleSheet.compose( style.buttonActive, customStyle );
-
-	const isDisabled = disabled || ariaDisabled;
-
-	const { fill } = isDisabled ? style.buttonDisabled : style.button;
-
-	return (
-		<TouchableOpacity
-			style={ buttonStyle }
-			activeOpacity={ 0.7 }
-			accessibilityLabel={ accessibilityLabel }
-			accessibilityRole={ 'button' }
-			onPress={ onClick }
-			disabled={ isDisabled }
-		>
-			<Icon icon={ icon } fill={ fill } size={ iconSize } />
-		</TouchableOpacity>
-	);
-}
-
-export default Button;
diff --git a/packages/block-library/src/gallery/v1/gallery-image-style.native.scss b/packages/block-library/src/gallery/v1/gallery-image-style.native.scss
deleted file mode 100644
index 9b221a56981f6d..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery-image-style.native.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-$gallery-image-container-height: 150px;
-$overlay-border-width: 2px;
-$caption-background-color: rgba(0, 0, 0, 0.4);
-
-.galleryImageContainer {
-	flex: 1;
-	height: $gallery-image-container-height;
-	overflow: hidden;
-	background-color: $gray-lighten-30;
-}
-
-.galleryImageContainerDark {
-	background-color: $gray-90;
-}
-
-.image {
-	height: 100%;
-}
-
-.button {
-	fill: $gray-0;
-	width: 30px;
-}
-
-.buttonDisabled {
-	fill: $gray-30;
-}
-
-.buttonActive {
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	border-radius: 6px;
-	border-color: $gray-70;
-	background-color: $gray-70;
-}
-
-.moverButtonContainer {
-	flex-direction: row;
-	align-items: center;
-	border-radius: 3px;
-	background-color: $gray-70;
-}
-
-.separator {
-	border-right-color: $gray-30;
-	border-right-width: 1px;
-	height: 20px;
-}
-
-.toolbarContainer {
-	position: absolute;
-}
-
-.toolbar {
-	padding: 5px;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.captionContainer {
-	flex: 1;
-	flex-direction: row;
-	align-items: flex-end;
-	position: absolute;
-	bottom: $overlay-border-width;
-	left: $overlay-border-width;
-	right: $overlay-border-width;
-	top: 45;
-}
-
-@mixin caption-shared {
-	font-size: 12px;
-	background-color: #0000;
-	color: #fff;
-	font-family: $default-regular-font;
-	text-align: center;
-}
-
-.caption {
-	@include caption-shared;
-	background-color: $caption-background-color;
-	padding-top: $grid-unit;
-	padding-bottom: $grid-unit;
-}
-
-.captionPlaceholder {
-	color: #ccc;
-}
-
-// expand caption container to compensate for overlay border
-.captionExpandedContainer {
-	// constrain height to gallery image height for caption scroll
-	max-height: $gallery-image-container-height;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	padding-top: $grid-unit;
-	padding-bottom: $overlay-border-width + $grid-unit;
-	padding-left: $overlay-border-width;
-	padding-right: $overlay-border-width;
-	// use caption background color on container when expanded
-	background-color: $caption-background-color;
-}
-
-.captionExpanded {
-	@include caption-shared;
-}
diff --git a/packages/block-library/src/gallery/v1/gallery-image.js b/packages/block-library/src/gallery/v1/gallery-image.js
deleted file mode 100644
index 8883ddc092358f..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery-image.js
+++ /dev/null
@@ -1,286 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Button, Spinner, ButtonGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-import { withSelect, withDispatch } from '@wordpress/data';
-import {
-	RichText,
-	MediaPlaceholder,
-	store as blockEditorStore,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { isBlobURL } from '@wordpress/blob';
-import { compose } from '@wordpress/compose';
-import {
-	closeSmall,
-	chevronLeft,
-	chevronRight,
-	edit,
-	image as imageIcon,
-} from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { pickRelevantMediaFiles } from './shared';
-import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-} from './constants';
-
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
-class GalleryImage extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSelectImage = this.onSelectImage.bind( this );
-		this.onRemoveImage = this.onRemoveImage.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
-		this.onEdit = this.onEdit.bind( this );
-		this.onSelectImageFromLibrary =
-			this.onSelectImageFromLibrary.bind( this );
-		this.onSelectCustomURL = this.onSelectCustomURL.bind( this );
-		this.state = {
-			isEditing: false,
-		};
-	}
-
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
-	onSelectImage() {
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-	}
-
-	onRemoveImage( event ) {
-		if (
-			this.container === this.container.ownerDocument.activeElement &&
-			this.props.isSelected &&
-			[ BACKSPACE, DELETE ].indexOf( event.keyCode ) !== -1
-		) {
-			event.preventDefault();
-			this.props.onRemove();
-		}
-	}
-
-	onEdit() {
-		this.setState( {
-			isEditing: true,
-		} );
-	}
-
-	componentDidUpdate() {
-		const { image, url, __unstableMarkNextChangeAsNotPersistent } =
-			this.props;
-		if ( image && ! url ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			this.props.setAttributes( {
-				url: image.source_url,
-				alt: image.alt_text,
-			} );
-		}
-	}
-
-	deselectOnBlur() {
-		this.props.onDeselect();
-	}
-
-	onSelectImageFromLibrary( media ) {
-		const { setAttributes, id, url, alt, caption, sizeSlug } = this.props;
-		if ( ! media || ! media.url ) {
-			return;
-		}
-
-		let mediaAttributes = pickRelevantMediaFiles( media, sizeSlug );
-
-		// If the current image is temporary but an alt text was meanwhile
-		// written by the user, make sure the text is not overwritten.
-		if ( isTemporaryImage( id, url ) ) {
-			if ( alt ) {
-				const { alt: omittedAlt, ...restMediaAttributes } =
-					mediaAttributes;
-				mediaAttributes = restMediaAttributes;
-			}
-		}
-
-		// If a caption text was meanwhile written by the user,
-		// make sure the text is not overwritten by empty captions.
-		if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
-			const { caption: omittedCaption, ...restMediaAttributes } =
-				mediaAttributes;
-			mediaAttributes = restMediaAttributes;
-		}
-
-		setAttributes( mediaAttributes );
-		this.setState( {
-			isEditing: false,
-		} );
-	}
-
-	onSelectCustomURL( newURL ) {
-		const { setAttributes, url } = this.props;
-		if ( newURL !== url ) {
-			setAttributes( {
-				url: newURL,
-				id: undefined,
-			} );
-			this.setState( {
-				isEditing: false,
-			} );
-		}
-	}
-
-	render() {
-		const {
-			url,
-			alt,
-			id,
-			linkTo,
-			link,
-			isFirstItem,
-			isLastItem,
-			isSelected,
-			caption,
-			onRemove,
-			onMoveForward,
-			onMoveBackward,
-			setAttributes,
-			'aria-label': ariaLabel,
-		} = this.props;
-		const { isEditing } = this.state;
-
-		let href;
-
-		switch ( linkTo ) {
-			case LINK_DESTINATION_MEDIA:
-				href = url;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				href = link;
-				break;
-		}
-
-		const img = (
-			// Disable reason: Image itself is not meant to be interactive, but should
-			// direct image selection and unfocus caption fields.
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-			<>
-				<img
-					src={ url }
-					alt={ alt }
-					data-id={ id }
-					onKeyDown={ this.onRemoveImage }
-					tabIndex="0"
-					aria-label={ ariaLabel }
-					ref={ this.bindContainer }
-				/>
-				{ isBlobURL( url ) && <Spinner /> }
-			</>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
-		);
-
-		const className = classnames( {
-			'is-selected': isSelected,
-			'is-transient': isBlobURL( url ),
-		} );
-
-		return (
-			// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-			<figure
-				className={ className }
-				onClick={ this.onSelectImage }
-				onFocus={ this.onSelectImage }
-			>
-				{ ! isEditing && ( href ? <a href={ href }>{ img }</a> : img ) }
-				{ isEditing && (
-					<MediaPlaceholder
-						labels={ { title: __( 'Edit gallery image' ) } }
-						icon={ imageIcon }
-						onSelect={ this.onSelectImageFromLibrary }
-						onSelectURL={ this.onSelectCustomURL }
-						accept="image/*"
-						allowedTypes={ [ 'image' ] }
-						value={ { id, src: url } }
-					/>
-				) }
-				<ButtonGroup className="block-library-gallery-item__inline-menu is-left">
-					<Button
-						icon={ chevronLeft }
-						onClick={ isFirstItem ? undefined : onMoveBackward }
-						label={ __( 'Move image backward' ) }
-						aria-disabled={ isFirstItem }
-						disabled={ ! isSelected }
-					/>
-					<Button
-						icon={ chevronRight }
-						onClick={ isLastItem ? undefined : onMoveForward }
-						label={ __( 'Move image forward' ) }
-						aria-disabled={ isLastItem }
-						disabled={ ! isSelected }
-					/>
-				</ButtonGroup>
-				<ButtonGroup className="block-library-gallery-item__inline-menu is-right">
-					<Button
-						icon={ edit }
-						onClick={ this.onEdit }
-						label={ __( 'Replace image' ) }
-						disabled={ ! isSelected }
-					/>
-					<Button
-						icon={ closeSmall }
-						onClick={ onRemove }
-						label={ __( 'Remove image' ) }
-						disabled={ ! isSelected }
-					/>
-				</ButtonGroup>
-				{ ! isEditing && ( isSelected || caption ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Image caption text' ) }
-						placeholder={ isSelected ? __( 'Add caption' ) : null }
-						value={ caption }
-						onChange={ ( newCaption ) =>
-							setAttributes( { caption: newCaption } )
-						}
-						inlineToolbar
-					/>
-				) }
-			</figure>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select, ownProps ) => {
-		const { getMedia } = select( coreStore );
-		const { id } = ownProps;
-
-		return {
-			image: id ? getMedia( parseInt( id, 10 ) ) : null,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { __unstableMarkNextChangeAsNotPersistent } =
-			dispatch( blockEditorStore );
-		return {
-			__unstableMarkNextChangeAsNotPersistent,
-		};
-	} ),
-] )( GalleryImage );
diff --git a/packages/block-library/src/gallery/v1/gallery-image.native.js b/packages/block-library/src/gallery/v1/gallery-image.native.js
deleted file mode 100644
index 7fa6ab4ab7ea75..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery-image.native.js
+++ /dev/null
@@ -1,349 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	StyleSheet,
-	View,
-	ScrollView,
-	TouchableWithoutFeedback,
-} from 'react-native';
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-	requestImageFullscreenPreview,
-} from '@wordpress/react-native-bridge';
-import { Component } from '@wordpress/element';
-import { Image } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
-import { getProtocol } from '@wordpress/url';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { arrowLeft, arrowRight, warning } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from './gallery-button';
-import style from './gallery-image-style.scss';
-
-const { compose } = StyleSheet;
-
-const separatorStyle = compose( style.separator, {
-	borderRightWidth: StyleSheet.hairlineWidth,
-} );
-const buttonStyle = compose( style.button, { aspectRatio: 1 } );
-const ICON_SIZE_ARROW = 15;
-
-class GalleryImage extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onSelectImage = this.onSelectImage.bind( this );
-		this.onSelectCaption = this.onSelectCaption.bind( this );
-		this.onMediaPressed = this.onMediaPressed.bind( this );
-		this.onCaptionChange = this.onCaptionChange.bind( this );
-		this.onSelectMedia = this.onSelectMedia.bind( this );
-
-		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess =
-			this.finishMediaUploadWithSuccess.bind( this );
-		this.finishMediaUploadWithFailure =
-			this.finishMediaUploadWithFailure.bind( this );
-		this.renderContent = this.renderContent.bind( this );
-
-		this.state = {
-			captionSelected: false,
-			isUploadInProgress: false,
-			didUploadFail: false,
-		};
-	}
-
-	onSelectCaption() {
-		if ( ! this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: true,
-			} );
-		}
-
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-	}
-
-	onMediaPressed() {
-		const { id, url, isSelected } = this.props;
-		const { captionSelected, isUploadInProgress, didUploadFail } =
-			this.state;
-
-		this.onSelectImage();
-
-		if ( isUploadInProgress ) {
-			requestImageUploadCancelDialog( id );
-		} else if (
-			didUploadFail ||
-			( id && getProtocol( url ) === 'file:' )
-		) {
-			requestImageFailedRetryDialog( id );
-		} else if ( isSelected && ! captionSelected ) {
-			requestImageFullscreenPreview( url );
-		}
-	}
-
-	onSelectImage() {
-		if ( ! this.props.isBlockSelected ) {
-			this.props.onSelectBlock();
-		}
-
-		if ( ! this.props.isSelected ) {
-			this.props.onSelect();
-		}
-
-		if ( this.state.captionSelected ) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
-	}
-
-	onSelectMedia( media ) {
-		const { setAttributes } = this.props;
-		setAttributes( media );
-	}
-
-	onCaptionChange( caption ) {
-		const { setAttributes } = this.props;
-		setAttributes( { caption } );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { isSelected, image, url } = this.props;
-		if ( image && ! url ) {
-			this.props.setAttributes( {
-				url: image.source_url,
-				alt: image.alt_text,
-			} );
-		}
-
-		// Unselect the caption so when the user selects other image and comeback
-		// the caption is not immediately selected.
-		if (
-			this.state.captionSelected &&
-			! isSelected &&
-			prevProps.isSelected
-		) {
-			this.setState( {
-				captionSelected: false,
-			} );
-		}
-	}
-
-	updateMediaProgress() {
-		if ( ! this.state.isUploadInProgress ) {
-			this.setState( { isUploadInProgress: true } );
-		}
-	}
-
-	finishMediaUploadWithSuccess( payload ) {
-		this.setState( {
-			isUploadInProgress: false,
-			didUploadFail: false,
-		} );
-
-		this.props.setAttributes( {
-			id: payload.mediaServerId,
-			url: payload.mediaUrl,
-		} );
-	}
-
-	finishMediaUploadWithFailure() {
-		this.setState( {
-			isUploadInProgress: false,
-			didUploadFail: true,
-		} );
-	}
-
-	renderContent( params ) {
-		const {
-			url,
-			isFirstItem,
-			isLastItem,
-			isSelected,
-			caption,
-			onRemove,
-			onMoveForward,
-			onMoveBackward,
-			'aria-label': ariaLabel,
-			isCropped,
-			getStylesFromColorScheme,
-			isRTL,
-		} = this.props;
-
-		const { isUploadInProgress, captionSelected } = this.state;
-		const { isUploadFailed, retryMessage } = params;
-		const resizeMode = isCropped ? 'cover' : 'contain';
-
-		const captionPlaceholderStyle = getStylesFromColorScheme(
-			style.captionPlaceholder,
-			style.captionPlaceholderDark
-		);
-
-		const shouldShowCaptionEditable = ! isUploadFailed && isSelected;
-		const shouldShowCaptionExpanded =
-			! isUploadFailed && ! isSelected && !! caption;
-
-		const captionContainerStyle = shouldShowCaptionExpanded
-			? style.captionExpandedContainer
-			: style.captionContainer;
-
-		const captionStyle = shouldShowCaptionExpanded
-			? style.captionExpanded
-			: style.caption;
-
-		const mediaPickerOptions = [
-			{
-				destructiveButton: true,
-				id: 'removeImage',
-				label: __( 'Remove' ),
-				onPress: onRemove,
-				separated: true,
-				value: 'removeImage',
-			},
-		];
-
-		return (
-			<>
-				<Image
-					alt={ ariaLabel }
-					height={ style.image.height }
-					isSelected={ isSelected }
-					isUploadFailed={ isUploadFailed }
-					isUploadInProgress={ isUploadInProgress }
-					mediaPickerOptions={ mediaPickerOptions }
-					onSelectMediaUploadOption={ this.onSelectMedia }
-					resizeMode={ resizeMode }
-					url={ url }
-					retryMessage={ retryMessage }
-					retryIcon={ warning }
-				/>
-
-				{ ! isUploadInProgress && isSelected && (
-					<View style={ style.toolbarContainer }>
-						<View style={ style.toolbar }>
-							<View style={ style.moverButtonContainer }>
-								<Button
-									style={ buttonStyle }
-									icon={ isRTL ? arrowRight : arrowLeft }
-									iconSize={ ICON_SIZE_ARROW }
-									onClick={
-										isFirstItem ? undefined : onMoveBackward
-									}
-									accessibilityLabel={ __(
-										'Move Image Backward'
-									) }
-									aria-disabled={ isFirstItem }
-									disabled={ ! isSelected }
-								/>
-								<View style={ separatorStyle } />
-								<Button
-									style={ buttonStyle }
-									icon={ isRTL ? arrowLeft : arrowRight }
-									iconSize={ ICON_SIZE_ARROW }
-									onClick={
-										isLastItem ? undefined : onMoveForward
-									}
-									accessibilityLabel={ __(
-										'Move Image Forward'
-									) }
-									aria-disabled={ isLastItem }
-									disabled={ ! isSelected }
-								/>
-							</View>
-						</View>
-					</View>
-				) }
-
-				{ ! isUploadInProgress &&
-					( shouldShowCaptionEditable ||
-						shouldShowCaptionExpanded ) && (
-						<View style={ captionContainerStyle }>
-							<ScrollView
-								nestedScrollEnabled
-								keyboardShouldPersistTaps="handled"
-								bounces={ false }
-							>
-								<Caption
-									inlineToolbar
-									isSelected={ isSelected && captionSelected }
-									onChange={ this.onCaptionChange }
-									onFocus={ this.onSelectCaption }
-									placeholder={
-										isSelected ? __( 'Add caption' ) : null
-									}
-									placeholderTextColor={
-										captionPlaceholderStyle.color
-									}
-									style={ captionStyle }
-									value={ caption }
-								/>
-							</ScrollView>
-						</View>
-					) }
-			</>
-		);
-	}
-
-	render() {
-		const { id, onRemove, getStylesFromColorScheme, isSelected } =
-			this.props;
-
-		const containerStyle = getStylesFromColorScheme(
-			style.galleryImageContainer,
-			style.galleryImageContainerDark
-		);
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ this.onMediaPressed }
-				accessible={ ! isSelected } // We need only child views to be accessible after the selection.
-				accessibilityLabel={ this.accessibilityLabelImageContainer() } // if we don't set this explicitly it reads system provided accessibilityLabels of all child components and those include pretty technical words which don't make sense
-				accessibilityRole={ 'imagebutton' } // this makes VoiceOver to read a description of image provided by system on iOS and lets user know this is a button which conveys the message of tappablity
-			>
-				<View style={ containerStyle }>
-					<MediaUploadProgress
-						mediaId={ id }
-						onUpdateMediaProgress={ this.updateMediaProgress }
-						onFinishMediaUploadWithSuccess={
-							this.finishMediaUploadWithSuccess
-						}
-						onFinishMediaUploadWithFailure={
-							this.finishMediaUploadWithFailure
-						}
-						onMediaUploadStateReset={ onRemove }
-						renderContent={ this.renderContent }
-					/>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-
-	accessibilityLabelImageContainer() {
-		const { caption, 'aria-label': ariaLabel } = this.props;
-
-		return isEmpty( caption )
-			? ariaLabel
-			: ariaLabel +
-					'. ' +
-					sprintf(
-						/* translators: accessibility text. %s: image caption. */
-						__( 'Image caption. %s' ),
-						caption
-					);
-	}
-}
-
-export default withPreferredColorScheme( GalleryImage );
diff --git a/packages/block-library/src/gallery/v1/gallery-styles.native.scss b/packages/block-library/src/gallery/v1/gallery-styles.native.scss
deleted file mode 100644
index 9b3169da048b22..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery-styles.native.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.galleryTilesContainerSelected {
-	margin-bottom: 16px;
-}
-
-.fullWidth {
-	margin-left: $block-edge-to-content;
-	margin-right: $block-edge-to-content;
-}
diff --git a/packages/block-library/src/gallery/v1/gallery.js b/packages/block-library/src/gallery/v1/gallery.js
deleted file mode 100644
index 7fc587f27911a6..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	RichText,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import GalleryImage from './gallery-image';
-import { defaultColumnsNumberV1 } from '../deprecated';
-
-export const Gallery = ( props ) => {
-	const {
-		attributes,
-		isSelected,
-		setAttributes,
-		selectedImage,
-		mediaPlaceholder,
-		onMoveBackward,
-		onMoveForward,
-		onRemoveImage,
-		onSelectImage,
-		onDeselectImage,
-		onSetImageAttributes,
-		insertBlocksAfter,
-		blockProps,
-	} = props;
-
-	const {
-		align,
-		columns = defaultColumnsNumberV1( attributes ),
-		caption,
-		imageCrop,
-		images,
-	} = attributes;
-
-	return (
-		<figure
-			{ ...blockProps }
-			className={ classnames( blockProps.className, {
-				[ `align${ align }` ]: align,
-				[ `columns-${ columns }` ]: columns,
-				'is-cropped': imageCrop,
-			} ) }
-		>
-			<ul className="blocks-gallery-grid">
-				{ images.map( ( img, index ) => {
-					const ariaLabel = sprintf(
-						/* translators: 1: the order number of the image. 2: the total number of images. */
-						__( 'image %1$d of %2$d in gallery' ),
-						index + 1,
-						images.length
-					);
-
-					return (
-						<li
-							className="blocks-gallery-item"
-							key={ img.id ? `${ img.id }-${ index }` : img.url }
-						>
-							<GalleryImage
-								url={ img.url }
-								alt={ img.alt }
-								id={ img.id }
-								isFirstItem={ index === 0 }
-								isLastItem={ index + 1 === images.length }
-								isSelected={
-									isSelected && selectedImage === index
-								}
-								onMoveBackward={ onMoveBackward( index ) }
-								onMoveForward={ onMoveForward( index ) }
-								onRemove={ onRemoveImage( index ) }
-								onSelect={ onSelectImage( index ) }
-								onDeselect={ onDeselectImage( index ) }
-								setAttributes={ ( attrs ) =>
-									onSetImageAttributes( index, attrs )
-								}
-								caption={ img.caption }
-								aria-label={ ariaLabel }
-								sizeSlug={ attributes.sizeSlug }
-							/>
-						</li>
-					);
-				} ) }
-			</ul>
-			{ mediaPlaceholder }
-			<RichTextVisibilityHelper
-				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
-				tagName="figcaption"
-				className={ classnames(
-					'blocks-gallery-caption',
-					__experimentalGetElementClassName( 'caption' )
-				) }
-				aria-label={ __( 'Gallery caption text' ) }
-				placeholder={ __( 'Write gallery caption…' ) }
-				value={ caption }
-				onChange={ ( value ) => setAttributes( { caption: value } ) }
-				inlineToolbar
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
-		</figure>
-	);
-};
-
-function RichTextVisibilityHelper( { isHidden, ...richTextProps } ) {
-	return isHidden ? (
-		<VisuallyHidden as={ RichText } { ...richTextProps } />
-	) : (
-		<RichText { ...richTextProps } />
-	);
-}
-
-export default Gallery;
diff --git a/packages/block-library/src/gallery/v1/gallery.native.js b/packages/block-library/src/gallery/v1/gallery.native.js
deleted file mode 100644
index c1d13cb6313e06..00000000000000
--- a/packages/block-library/src/gallery/v1/gallery.native.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import GalleryImage from './gallery-image';
-import { defaultColumnsNumberV1 } from '../deprecated';
-import styles from './gallery-styles.scss';
-import Tiles from './tiles';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	BlockCaption,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useState, useEffect } from '@wordpress/element';
-import { mediaUploadSync } from '@wordpress/react-native-bridge';
-import { useSelect } from '@wordpress/data';
-import { alignmentHelpers } from '@wordpress/components';
-
-const TILE_SPACING = 15;
-
-// we must limit displayed columns since readable content max-width is 580px
-const MAX_DISPLAYED_COLUMNS = 4;
-const MAX_DISPLAYED_COLUMNS_NARROW = 2;
-
-const { isFullWidth } = alignmentHelpers;
-
-export const Gallery = ( props ) => {
-	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
-	useEffect( mediaUploadSync, [] );
-
-	const isRTL = useSelect( ( select ) => {
-		return !! select( blockEditorStore ).getSettings().isRTL;
-	}, [] );
-
-	const {
-		clientId,
-		selectedImage,
-		mediaPlaceholder,
-		onBlur,
-		onMoveBackward,
-		onMoveForward,
-		onRemoveImage,
-		onSelectImage,
-		onSetImageAttributes,
-		onFocusGalleryCaption,
-		attributes,
-		isSelected,
-		isNarrow,
-		onFocus,
-		insertBlocksAfter,
-	} = props;
-
-	const {
-		align,
-		columns = defaultColumnsNumberV1( attributes ),
-		imageCrop,
-		images,
-	} = attributes;
-
-	// limit displayed columns when isNarrow is true (i.e. when viewport width is
-	// less than "small", where small = 600)
-	const displayedColumns = isNarrow
-		? Math.min( columns, MAX_DISPLAYED_COLUMNS_NARROW )
-		: Math.min( columns, MAX_DISPLAYED_COLUMNS );
-
-	const selectImage = ( index ) => {
-		return () => {
-			if ( isCaptionSelected ) {
-				setIsCaptionSelected( false );
-			}
-			// We need to fully invoke the curried function here.
-			onSelectImage( index )();
-		};
-	};
-
-	const focusGalleryCaption = () => {
-		if ( ! isCaptionSelected ) {
-			setIsCaptionSelected( true );
-		}
-		onFocusGalleryCaption();
-	};
-
-	return (
-		<View style={ { flex: 1 } }>
-			<Tiles
-				columns={ displayedColumns }
-				spacing={ TILE_SPACING }
-				style={
-					isSelected
-						? styles.galleryTilesContainerSelected
-						: undefined
-				}
-			>
-				{ images.map( ( img, index ) => {
-					const ariaLabel = sprintf(
-						/* translators: 1: the order number of the image. 2: the total number of images. */
-						__( 'image %1$d of %2$d in gallery' ),
-						index + 1,
-						images.length
-					);
-
-					return (
-						<GalleryImage
-							key={ img.id ? `${ img.id }-${ index }` : img.url }
-							url={ img.url }
-							alt={ img.alt }
-							id={ parseInt( img.id, 10 ) } // make id an integer explicitly
-							isCropped={ imageCrop }
-							isFirstItem={ index === 0 }
-							isLastItem={ index + 1 === images.length }
-							isSelected={ isSelected && selectedImage === index }
-							isBlockSelected={ isSelected }
-							onMoveBackward={ onMoveBackward( index ) }
-							onMoveForward={ onMoveForward( index ) }
-							onRemove={ onRemoveImage( index ) }
-							onSelect={ selectImage( index ) }
-							onSelectBlock={ onFocus }
-							setAttributes={ ( attrs ) =>
-								onSetImageAttributes( index, attrs )
-							}
-							caption={ img.caption }
-							aria-label={ ariaLabel }
-							isRTL={ isRTL }
-						/>
-					);
-				} ) }
-			</Tiles>
-			<View style={ isFullWidth( align ) && styles.fullWidth }>
-				{ mediaPlaceholder }
-			</View>
-			<BlockCaption
-				clientId={ clientId }
-				isSelected={ isCaptionSelected }
-				accessible={ true }
-				accessibilityLabelCreator={ ( caption ) =>
-					! caption
-						? /* translators: accessibility text. Empty gallery caption. */
-						  'Gallery caption. Empty'
-						: sprintf(
-								/* translators: accessibility text. %s: gallery caption. */
-								__( 'Gallery caption. %s' ),
-								caption
-						  )
-				}
-				onFocus={ focusGalleryCaption }
-				onBlur={ onBlur } // Always assign onBlur as props.
-				insertBlocksAfter={ insertBlocksAfter }
-			/>
-		</View>
-	);
-};
-
-export default Gallery;
diff --git a/packages/block-library/src/gallery/v1/save.js b/packages/block-library/src/gallery/v1/save.js
deleted file mode 100644
index bf8be9ba413b4f..00000000000000
--- a/packages/block-library/src/gallery/v1/save.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	RichText,
-	useBlockProps,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { defaultColumnsNumberV1 } from '../deprecated';
-import {
-	LINK_DESTINATION_ATTACHMENT,
-	LINK_DESTINATION_MEDIA,
-} from './constants';
-
-export default function saveV1( { attributes } ) {
-	const {
-		images,
-		columns = defaultColumnsNumberV1( attributes ),
-		imageCrop,
-		caption,
-		linkTo,
-	} = attributes;
-	const className = `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }`;
-
-	return (
-		<figure { ...useBlockProps.save( { className } ) }>
-			<ul className="blocks-gallery-grid">
-				{ images.map( ( image ) => {
-					let href;
-
-					switch ( linkTo ) {
-						case LINK_DESTINATION_MEDIA:
-							href = image.fullUrl || image.url;
-							break;
-						case LINK_DESTINATION_ATTACHMENT:
-							href = image.link;
-							break;
-					}
-
-					const img = (
-						<img
-							src={ image.url }
-							alt={ image.alt }
-							data-id={ image.id }
-							data-full-url={ image.fullUrl }
-							data-link={ image.link }
-							className={
-								image.id ? `wp-image-${ image.id }` : null
-							}
-						/>
-					);
-
-					return (
-						<li
-							key={ image.id || image.url }
-							className="blocks-gallery-item"
-						>
-							<figure>
-								{ href ? <a href={ href }>{ img }</a> : img }
-								{ ! RichText.isEmpty( image.caption ) && (
-									<RichText.Content
-										tagName="figcaption"
-										className={ classnames(
-											'blocks-gallery-item',
-											__experimentalGetElementClassName(
-												'caption'
-											)
-										) }
-										value={ image.caption }
-									/>
-								) }
-							</figure>
-						</li>
-					);
-				} ) }
-			</ul>
-			{ ! RichText.isEmpty( caption ) && (
-				<RichText.Content
-					tagName="figcaption"
-					className={ classnames(
-						'blocks-gallery-caption',
-						__experimentalGetElementClassName( 'caption' )
-					) }
-					value={ caption }
-				/>
-			) }
-		</figure>
-	);
-}
diff --git a/packages/block-library/src/gallery/v1/shared.js b/packages/block-library/src/gallery/v1/shared.js
deleted file mode 100644
index 9a0957cc7a120d..00000000000000
--- a/packages/block-library/src/gallery/v1/shared.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = Object.fromEntries(
-		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
-			[ 'alt', 'id', 'link', 'caption' ].includes( key )
-		)
-	);
-
-	imageProps.url =
-		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url;
-	const fullUrl =
-		get( image, [ 'sizes', 'full', 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );
-	if ( fullUrl ) {
-		imageProps.fullUrl = fullUrl;
-	}
-	return imageProps;
-};
diff --git a/packages/block-library/src/gallery/v1/tiles-styles.native.scss b/packages/block-library/src/gallery/v1/tiles-styles.native.scss
deleted file mode 100644
index c2e3d4bad79790..00000000000000
--- a/packages/block-library/src/gallery/v1/tiles-styles.native.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.containerStyle {
-	flex-direction: row;
-	flex-wrap: wrap;
-}
-
-.tileStyle {
-	overflow: hidden;
-	flex-direction: row;
-	align-items: center;
-	border-color: transparent;
-}
diff --git a/packages/block-library/src/gallery/v1/tiles.native.js b/packages/block-library/src/gallery/v1/tiles.native.js
deleted file mode 100644
index 30126ce872593e..00000000000000
--- a/packages/block-library/src/gallery/v1/tiles.native.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * External dependencies
- */
-import { View, StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './tiles-styles.scss';
-
-function Tiles( props ) {
-	const { columns, children, spacing = 10, style } = props;
-
-	const { compose } = StyleSheet;
-
-	const tileCount = Children.count( children );
-	const lastTile = tileCount - 1;
-	const lastRow = Math.floor( lastTile / columns );
-
-	const wrappedChildren = Children.map( children, ( child, index ) => {
-		/**
-		 * Since we don't have `calc()`, we must calculate our spacings here in
-		 * order to preserve even spacing between tiles and equal width for tiles
-		 * in a given row.
-		 *
-		 * In order to ensure equal sizing of tile contents, we distribute the
-		 * spacing such that each tile has an equal "share" of the fixed spacing. To
-		 * keep the tiles properly aligned within their rows, we calculate the left
-		 * and right paddings based on the tile's relative position within the row.
-		 *
-		 * Note: we use padding instead of margins so that the fixed spacing is
-		 * included within the relative spacing (i.e. width percentage), and
-		 * wrapping behavior is preserved.
-		 *
-		 *  - The left most tile in a row must have left padding of zero.
-		 *  - The right most tile in a row must have a right padding of zero.
-		 *
-		 * The values of these left and right paddings are interpolated for tiles in
-		 * between. The right padding is complementary with the left padding of the
-		 * next tile (i.e. the right padding of [tile n] + the left padding of
-		 * [tile n + 1] will be equal for all tiles except the last one in a given
-		 * row).
-		 */
-
-		const row = Math.floor( index / columns );
-		const rowLength =
-			row === lastRow ? ( lastTile % columns ) + 1 : columns;
-		const indexInRow = index % columns;
-
-		return (
-			<View
-				style={ [
-					styles.tileStyle,
-					{
-						width: `${ 100 / rowLength }%`,
-						paddingLeft: spacing * ( indexInRow / rowLength ),
-						paddingRight:
-							spacing * ( 1 - ( indexInRow + 1 ) / rowLength ),
-						paddingTop: row === 0 ? 0 : spacing / 2,
-						paddingBottom: row === lastRow ? 0 : spacing / 2,
-					},
-				] }
-			>
-				{ child }
-			</View>
-		);
-	} );
-
-	const containerStyle = compose( styles.containerStyle, style );
-
-	return <View style={ containerStyle }>{ wrappedChildren }</View>;
-}
-
-export default Tiles;
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 3f409ba052c95d..3c7d8d3ce1310a 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",
@@ -15,23 +15,37 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"allowedBlocks": {
+			"type": "array"
 		}
 	},
 	"supports": {
 		"__experimentalOnEnter": true,
+		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"ariaLabel": true,
 		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
+			"heading": true,
+			"button": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
 		},
+		"shadow": true,
 		"spacing": {
 			"margin": [ "top", "bottom" ],
 			"padding": true,
@@ -56,6 +70,9 @@
 				"width": true
 			}
 		},
+		"position": {
+			"sticky": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -69,7 +86,12 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"layout": {
+			"allowSizingOnChildren": true
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index 2a3ec02c5ed962..ff7ed7e42d093b 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -50,7 +50,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
@@ -100,7 +101,7 @@ const deprecated = [
 					fontSize: true,
 				},
 			},
-			__experimentalLayout: true,
+			layout: true,
 		},
 		save( { attributes: { tagName: Tag } } ) {
 			return (
@@ -108,13 +109,11 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout || layout.inherit || layout.contentSize,
+			layout?.inherit ||
+			( layout?.contentSize && layout?.type !== 'constrained' ),
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
-			if ( ! layout ) {
-				return attributes;
-			}
-			if ( layout.inherit || layout.contentSize ) {
+			if ( layout?.inherit || layout?.contentSize ) {
 				return {
 					...attributes,
 					layout: {
@@ -133,7 +132,8 @@ const deprecated = [
 				default: 'div',
 			},
 			templateLock: {
-				type: 'string',
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
 			},
 		},
 		supports: {
@@ -197,7 +197,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, textClass, {
+			const className = clsx( backgroundClass, textClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -253,7 +253,7 @@ const deprecated = [
 				backgroundColor
 			);
 			const textClass = getColorClassName( 'color', textColor );
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
@@ -297,7 +297,7 @@ const deprecated = [
 				'background-color',
 				backgroundColor
 			);
-			const className = classnames( backgroundClass, {
+			const className = clsx( backgroundClass, {
 				'has-background': backgroundColor || customBackgroundColor,
 			} );
 
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 7c324d76c587d3..352a6fbc77819e 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -7,12 +7,12 @@ import {
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -34,7 +34,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
 		),
 		main: __(
-			'The <main> element should be used for the primary content of your document only. '
+			'The <main> element should be used for the primary content of your document only.'
 		),
 		section: __(
 			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
@@ -50,8 +50,10 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		),
 	};
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<InspectorControls group="advanced">
 			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },
@@ -70,13 +72,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	);
 }
 
-function GroupEdit( {
-	attributes,
-	name,
-	setAttributes,
-	clientId,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -89,47 +85,59 @@ function GroupEdit( {
 		[ clientId ]
 	);
 
-	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+	const {
+		tagName: TagName = 'div',
+		templateLock,
+		allowedBlocks,
+		layout = {},
+	} = attributes;
 
 	// Layout settings.
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
-	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
+	const { type = 'default' } = layout;
+	const layoutSupportEnabled =
+		themeSupportsLayout || type === 'flex' || type === 'grid';
 
 	// Hooks.
-	const blockProps = useBlockProps( {
-		className: ! layoutSupportEnabled ? layoutClassNames : null,
-	} );
+	const ref = useRef();
+	const blockProps = useBlockProps( { ref } );
+
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
-		usedLayoutType: usedLayout?.type,
+		usedLayoutType: type,
 		hasInnerBlocks,
 	} );
+
+	// Default to the regular appender being rendered.
+	let renderAppender;
+	if ( showPlaceholder ) {
+		// In the placeholder state, ensure the appender is not rendered.
+		// This is needed because `...innerBlocksProps` is used in the placeholder
+		// state so that blocks can dragged onto the placeholder area
+		// from both the list view and in the editor canvas.
+		renderAppender = false;
+	} else if ( ! hasInnerBlocks ) {
+		// When there is no placeholder, but the block is also empty,
+		// use the larger button appender.
+		renderAppender = InnerBlocks.ButtonBlockAppender;
+	}
+
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
+			dropZoneElement: ref.current,
 			templateLock,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
-			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
+			allowedBlocks,
+			renderAppender,
 		}
 	);
 
 	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 );
 	};
 
@@ -142,11 +150,13 @@ function GroupEdit( {
 				}
 			/>
 			{ showPlaceholder && (
-				<GroupPlaceHolder
-					clientId={ clientId }
-					name={ name }
-					onSelect={ selectVariation }
-				/>
+				<View>
+					{ innerBlocksProps.children }
+					<GroupPlaceHolder
+						name={ name }
+						onSelect={ selectVariation }
+					/>
+				</View>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 297658713f4591..739a9cd0cf852e 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -39,64 +39,17 @@
 	&::after {
 		content: "";
 		display: flex;
-		flex: 1 0 $grid-unit-60;
+		flex: 1 0 $button-size-next-default-40px;
 		pointer-events: none;
-		min-height: $grid-unit-60 - $border-width - $border-width;
+		min-height: $button-size-next-default-40px - $border-width - $border-width;
 		border: $border-width dashed currentColor;
-		@include placeholder-style();
 	}
 
 	// Let the parent be selectable in the placeholder area.
 	pointer-events: none;
-	.block-editor-inserter {
+	.block-editor-inserter,
+	.block-editor-button-block-appender {
 		pointer-events: all;
 	}
 }
 
-.wp-block-group__placeholder {
-	.wp-block-group-placeholder__variations {
-		list-style: none;
-		display: flex;
-		justify-content: center;
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-	}
-	.components-placeholder__instructions {
-		text-align: center;
-		margin-bottom: 18px;
-	}
-	.wp-block-group-placeholder__variations svg {
-		fill: $gray-400 !important;
-	}
-	.wp-block-group-placeholder__variations svg:hover {
-		fill: var(--wp-admin-theme-color) !important;
-	}
-	.wp-block-group-placeholder__variations > li {
-		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
-		width: auto;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-		width: 44px;
-		height: 32px;
-		padding: 0;
-		&:hover {
-			box-shadow: none;
-		}
-	}
-	.components-placeholder {
-		min-height: auto;
-		padding: $grid-unit-30;
-	}
-	.is-small,
-	.is-medium {
-		.wp-block-group-placeholder__variations > li {
-			margin: $grid-unit-15;
-		}
-	}
-}
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 2d06f1a965c521..06ed4aa1001edf 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -23,63 +23,52 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
+			layout: {
+				type: 'constrained',
+				justifyContent: 'center',
+			},
 			style: {
-				color: {
-					text: '#000000',
-					background: '#ffffff',
+				spacing: {
+					padding: {
+						top: '4em',
+						right: '3em',
+						bottom: '4em',
+						left: '3em',
+					},
 				},
 			},
 		},
 		innerBlocks: [
 			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#cf2e2e',
-					fontSize: 'large',
-					content: __( 'One.' ),
-				},
-			},
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#ff6900',
-					fontSize: 'large',
-					content: __( 'Two.' ),
-				},
-			},
-			{
-				name: 'core/paragraph',
+				name: 'core/heading',
 				attributes: {
-					customTextColor: '#fcb900',
-					fontSize: 'large',
-					content: __( 'Three.' ),
+					content: __( 'La Mancha' ),
+					textAlign: 'center',
 				},
 			},
 			{
 				name: 'core/paragraph',
 				attributes: {
-					customTextColor: '#00d084',
-					fontSize: 'large',
-					content: __( 'Four.' ),
+					align: 'center',
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/spacer',
 				attributes: {
-					customTextColor: '#0693e3',
-					fontSize: 'large',
-					content: __( 'Five.' ),
+					height: '10px',
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/button',
 				attributes: {
-					customTextColor: '#9b51e0',
-					fontSize: 'large',
-					content: __( 'Six.' ),
+					text: __( 'Read more' ),
 				},
 			},
 		],
+		viewportWidth: 600,
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index 0f8fbc253c8986..c7c4c6956e7d6a 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -20,40 +20,41 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 		group: (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<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="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-row': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<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="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-stack': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<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="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z" />
+			</SVG>
+		),
+		'group-grid': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
+			>
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 	};
@@ -94,7 +95,8 @@ export function useShouldShowPlaceHolder( {
 			! fontSize &&
 			! textColor &&
 			! style &&
-			usedLayoutType !== 'flex'
+			usedLayoutType !== 'flex' &&
+			usedLayoutType !== 'grid'
 	);
 
 	useEffect( () => {
@@ -130,22 +132,19 @@ 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 );
+
+	useEffect( () => {
+		if ( variations && variations.length === 1 ) {
+			onSelect( variations[ 0 ] );
+		}
+	}, [ onSelect, variations ] );
 
 	return (
 		<div { ...blockProps }>
@@ -166,12 +165,13 @@ function GroupPlaceHolder( { name, onSelect } ) {
 					{ variations.map( ( variation ) => (
 						<li key={ variation.name }>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								icon={ getGroupPlaceholderIcons(
 									variation.name
 								) }
-								iconSize={ 44 }
-								onClick={ () => selectVariation( variation ) }
+								iconSize={ 48 }
+								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }
 							/>
diff --git a/packages/block-library/src/group/style.scss b/packages/block-library/src/group/style.scss
index 3457a12adb6221..018091ffd45644 100644
--- a/packages/block-library/src/group/style.scss
+++ b/packages/block-library/src/group/style.scss
@@ -2,3 +2,8 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+// We need this so groups with negative margins overlap as expected.
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+	position: relative;
+}
diff --git a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
index ee8488edf88642..14084d3662285c 100644
--- a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2></h2>
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:heading -->
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading --></div>
 <!-- /wp:group -->"
 `;
 
 exports[`Group block ungroups inner blocks 1`] = `
 "<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
diff --git a/packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..ca0bd5b36ee0c4
--- /dev/null
+++ b/packages/block-library/src/group/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Group block transforms ungroups block 1`] = `
+"<!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/group/test/edit.native.js b/packages/block-library/src/group/test/edit.native.js
index 5716d3380dc5bd..1d02da768facf9 100644
--- a/packages/block-library/src/group/test/edit.native.js
+++ b/packages/block-library/src/group/test/edit.native.js
@@ -8,7 +8,6 @@ import {
 	initializeEditor,
 	within,
 	getBlock,
-	waitFor,
 } from 'test/helpers';
 
 /**
@@ -43,7 +42,6 @@ afterAll( () => {
 describe( 'Group block', () => {
 	it( 'inserts block and adds a Heading block as an inner block', async () => {
 		const screen = await initializeEditor();
-		const { getByTestId, getByText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Group' );
@@ -58,7 +56,7 @@ describe( 'Group block', () => {
 		fireEvent.press( appenderButton );
 
 		// Look for a block in the inserter
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
@@ -70,7 +68,7 @@ describe( 'Group block', () => {
 		} );
 
 		// Add a block
-		fireEvent.press( await waitFor( () => getByText( 'Heading' ) ) );
+		fireEvent.press( await screen.findByText( 'Heading' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
diff --git a/packages/block-library/src/group/test/transforms.native.js b/packages/block-library/src/group/test/transforms.native.js
new file mode 100644
index 00000000000000..9293482f119055
--- /dev/null
+++ b/packages/block-library/src/group/test/transforms.native.js
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Group';
+const initialHtml = `
+<!-- wp:group -->
+<div id="this-is-another-anchor" class="wp-block-group"><!-- wp:paragraph -->
+<p>One.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Two</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Three.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->`;
+
+const transformsWithInnerBlocks = [ 'Columns' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'ungroups block', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Ungroup' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js
index 5649529c6501d2..851dfcdb7530bb 100644
--- a/packages/block-library/src/group/transforms.js
+++ b/packages/block-library/src/group/transforms.js
@@ -48,13 +48,6 @@ const transforms = {
 			},
 		},
 	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) => innerBlocks,
-		},
-	],
 };
 
 export default transforms;
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 2b64d794dd4cc2..5ded2c724bfa9b 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -2,7 +2,60 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
+
+const example = {
+	innerBlocks: [
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#cf2e2e',
+				fontSize: 'large',
+				content: __( 'One.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#ff6900',
+				fontSize: 'large',
+				content: __( 'Two.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#fcb900',
+				fontSize: 'large',
+				content: __( 'Three.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#00d084',
+				fontSize: 'large',
+				content: __( 'Four.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#0693e3',
+				fontSize: 'large',
+				content: __( 'Five.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#9b51e0',
+				fontSize: 'large',
+				content: __( 'Six.' ),
+			},
+		},
+	],
+};
 
 const variations = [
 	{
@@ -30,6 +83,7 @@ const variations = [
 			( ! blockAttributes.layout?.orientation ||
 				blockAttributes.layout?.orientation === 'horizontal' ),
 		icon: row,
+		example,
 	},
 	{
 		name: 'group-stack',
@@ -41,6 +95,18 @@ const variations = [
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
+		example,
+	},
+	{
+		name: 'group-grid',
+		title: __( 'Grid' ),
+		description: __( 'Arrange blocks in a grid.' ),
+		attributes: { layout: { type: 'grid' } },
+		scope: [ 'block', 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'grid',
+		icon: grid,
+		example,
 	},
 ];
 
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 89c1514808911e..2869ee85c55206 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/heading",
 	"title": "Heading",
 	"category": "text",
@@ -12,16 +12,18 @@
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"level": {
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"placeholder": {
 			"type": "string"
 		}
@@ -29,7 +31,14 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"className": false,
+		"className": true,
+		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -40,7 +49,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -51,15 +64,16 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
 			}
 		},
-		"__experimentalSelector": "h1,h2,h3,h4,h5,h6",
 		"__unstablePasteTextInline": true,
-		"__experimentalSlashInserter": true
+		"__experimentalSlashInserter": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-heading-editor",
 	"style": "wp-block-heading"
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index 9eaee486622777..76b175ac44fc40 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -63,155 +63,228 @@ const migrateTextAlign = ( attributes ) => {
 		: attributes;
 };
 
-const deprecated = [
-	{
-		supports: {
-			align: [ 'wide', 'full' ],
-			anchor: true,
-			className: false,
-			color: { link: true },
-			fontSize: true,
-			lineHeight: true,
-			__experimentalSelector: {
-				'core/heading/h1': 'h1',
-				'core/heading/h2': 'h2',
-				'core/heading/h3': 'h3',
-				'core/heading/h4': 'h4',
-				'core/heading/h5': 'h5',
-				'core/heading/h6': 'h6',
-			},
-			__unstablePasteTextInline: true,
+const v1 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		attributes: blockAttributes,
-		isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
-		migrate: migrateTextAlign,
-		save( { attributes } ) {
-			const { align, content, level } = attributes;
-			const TagName = 'h' + level;
-
-			const className = classnames( {
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<TagName { ...useBlockProps.save( { className } ) }>
-					<RichText.Content value={ content } />
-				</TagName>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, level, content, textColor, customTextColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = clsx( {
+			[ textClass ]: textClass,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					textAlign: align,
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v2 = {
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				'has-text-color': textColor || customTextColor,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = clsx( {
+			[ textClass ]: textClass,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+	supports: blockSupports,
+};
+const v3 = {
+	supports: blockSupports,
+	attributes: {
+		...blockAttributes,
+		customTextColor: {
+			type: 'string',
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, content, customTextColor, level, textColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-				[ `has-text-align-${ align }` ]: align,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		textColor: {
+			type: 'string',
 		},
-		supports: blockSupports,
 	},
-	{
-		supports: blockSupports,
-		attributes: {
-			...blockAttributes,
-			customTextColor: {
-				type: 'string',
+	migrate: ( attributes ) =>
+		migrateCustomColors( migrateTextAlign( attributes ) ),
+	save( { attributes } ) {
+		const { align, content, customTextColor, level, textColor } =
+			attributes;
+		const tagName = 'h' + level;
+
+		const textClass = getColorClassName( 'color', textColor );
+
+		const className = clsx( {
+			[ textClass ]: textClass,
+			'has-text-color': textColor || customTextColor,
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<RichText.Content
+				className={ className ? className : undefined }
+				tagName={ tagName }
+				style={ {
+					color: textClass ? undefined : customTextColor,
+				} }
+				value={ content }
+			/>
+		);
+	},
+};
+const v4 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: { link: true },
+		fontSize: true,
+		lineHeight: true,
+		__experimentalSelector: {
+			'core/heading/h1': 'h1',
+			'core/heading/h2': 'h2',
+			'core/heading/h3': 'h3',
+			'core/heading/h4': 'h4',
+			'core/heading/h5': 'h5',
+			'core/heading/h6': 'h6',
+		},
+		__unstablePasteTextInline: true,
+	},
+	attributes: blockAttributes,
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	migrate: migrateTextAlign,
+	save( { attributes } ) {
+		const { align, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = clsx( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+// This deprecation covers the serialization of the `wp-block-heading` class
+// into the block's markup after className support was enabled.
+const v5 = {
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		className: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
 			},
-			textColor: {
-				type: 'string',
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+				textTransform: true,
 			},
 		},
-		migrate: ( attributes ) =>
-			migrateCustomColors( migrateTextAlign( attributes ) ),
-		save( { attributes } ) {
-			const { align, level, content, textColor, customTextColor } =
-				attributes;
-			const tagName = 'h' + level;
-
-			const textClass = getColorClassName( 'color', textColor );
-
-			const className = classnames( {
-				[ textClass ]: textClass,
-			} );
-
-			return (
-				<RichText.Content
-					className={ className ? className : undefined }
-					tagName={ tagName }
-					style={ {
-						textAlign: align,
-						color: textClass ? undefined : customTextColor,
-					} }
-					value={ content }
-				/>
-			);
+		__experimentalSelector: 'h1,h2,h3,h4,h5,h6',
+		__unstablePasteTextInline: true,
+		__experimentalSlashInserter: true,
+	},
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'h1,h2,h3,h4,h5,h6',
+			default: '',
+			role: 'content',
+		},
+		level: {
+			type: 'number',
+			default: 2,
+		},
+		placeholder: {
+			type: 'string',
 		},
 	},
-];
+	save( { attributes } ) {
+		const { textAlign, content, level } = attributes;
+		const TagName = 'h' + level;
+
+		const className = clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} );
+
+		return (
+			<TagName { ...useBlockProps.save( { className } ) }>
+				<RichText.Content value={ content } />
+			</TagName>
+		);
+	},
+};
+
+const deprecated = [ v5, v4, v3, v2, v1 ];
 
 export default deprecated;
diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 3f8fd39ee9caa9..ea58a75d51cda5 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,19 +9,19 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useEffect, Platform } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
 	BlockControls,
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from './heading-level-dropdown';
 import { generateAnchor, setAnchor } from './autogenerate-anchors';
 
 function HeadingEdit( {
@@ -32,14 +32,16 @@ function HeadingEdit( {
 	style,
 	clientId,
 } ) {
-	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const { textAlign, content, level, levelOptions, placeholder, anchor } =
+		attributes;
 	const tagName = 'h' + level;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
 		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
@@ -90,49 +92,31 @@ function HeadingEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<HeadingLevelDropdown
+						value={ level }
+						options={ levelOptions }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+					<AlignmentControl
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<RichText
 				identifier="content"
 				tagName={ tagName }
 				value={ content }
 				onChange={ onContentChange }
 				onMerge={ mergeBlocks }
-				onSplit={ ( value, isOriginal ) => {
-					let block;
-
-					if ( isOriginal || value ) {
-						block = createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} else {
-						block = createBlock(
-							getDefaultBlockName() ?? 'core/heading'
-						);
-					}
-
-					if ( isOriginal ) {
-						block.clientId = clientId;
-					}
-
-					return block;
-				} }
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
-				aria-label={ __( 'Heading text' ) }
 				placeholder={ placeholder || __( 'Heading' ) }
 				textAlign={ textAlign }
 				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
new file mode 100644
index 00000000000000..0946fe5a5ad66b
--- /dev/null
+++ b/packages/block-library/src/heading/edit.native.js
@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, Platform } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+	HeadingLevelDropdown,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { generateAnchor, setAnchor } from './autogenerate-anchors';
+
+function HeadingEdit( {
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	onReplace,
+	style,
+	clientId,
+} ) {
+	const { textAlign, content, level, placeholder, anchor } = attributes;
+	const tagName = 'h' + level;
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+		style,
+	} );
+
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+
+		return {
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
+		};
+	}, [] );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Initially set anchor for headings that have content but no anchor set.
+	// This is used when transforming a block to heading, or for legacy anchors.
+	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
+		if ( ! anchor && content ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				anchor: generateAnchor( clientId, content ),
+			} );
+		}
+		setAnchor( clientId, anchor );
+
+		// Remove anchor map when block unmounts.
+		return () => setAnchor( clientId, null );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
+
+	const onContentChange = ( value ) => {
+		const newAttrs = { content: value };
+		if (
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
+		) {
+			newAttrs.anchor = generateAnchor( clientId, value );
+		}
+		setAttributes( newAttrs );
+	};
+
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<RichText
+				identifier="content"
+				tagName={ tagName }
+				value={ content }
+				onChange={ onContentChange }
+				onMerge={ mergeBlocks }
+				onSplit={ ( value, isOriginal ) => {
+					let block;
+
+					if ( isOriginal || value ) {
+						block = createBlock( 'core/heading', {
+							...attributes,
+							content: value,
+						} );
+					} else {
+						block = createBlock(
+							getDefaultBlockName() ?? 'core/heading'
+						);
+					}
+
+					if ( isOriginal ) {
+						block.clientId = clientId;
+					}
+
+					return block;
+				} }
+				onReplace={ onReplace }
+				onRemove={ () => onReplace( [] ) }
+				placeholder={ placeholder || __( 'Heading' ) }
+				textAlign={ textAlign }
+				{ ...( Platform.isNative && { deleteEnter: true } ) } // setup RichText on native mobile to delete the "Enter" key as it's handled by the JS/RN side
+				{ ...blockProps }
+			/>
+		</>
+	);
+}
+
+export default HeadingEdit;
diff --git a/packages/block-library/src/heading/heading-level-dropdown.js b/packages/block-library/src/heading/heading-level-dropdown.js
deleted file mode 100644
index d8a4eae0ab34db..00000000000000
--- a/packages/block-library/src/heading/heading-level-dropdown.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarDropdownMenu } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import HeadingLevelIcon from './heading-level-icon';
-
-const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
-
-const POPOVER_PROPS = {
-	className: 'block-library-heading-level-dropdown',
-};
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * HeadingLevelDropdown props.
- *
- * @typedef WPHeadingLevelDropdownProps
- *
- * @property {number}                 selectedLevel The chosen heading level.
- * @property {(newValue:number)=>any} onChange      Callback to run when
- *                                                  toolbar value is changed.
- */
-
-/**
- * Dropdown for selecting a heading level (1 through 6).
- *
- * @param {WPHeadingLevelDropdownProps} props Component props.
- *
- * @return {WPComponent} The toolbar.
- */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
-	return (
-		<ToolbarDropdownMenu
-			popoverProps={ POPOVER_PROPS }
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			label={ __( 'Change heading level' ) }
-			controls={ HEADING_LEVELS.map( ( targetLevel ) => {
-				{
-					const isActive = targetLevel === selectedLevel;
-
-					return {
-						icon: (
-							<HeadingLevelIcon
-								level={ targetLevel }
-								isPressed={ isActive }
-							/>
-						),
-						label: sprintf(
-							// translators: %s: heading level e.g: "1", "2", "3"
-							__( 'Heading %d' ),
-							targetLevel
-						),
-						isActive,
-						onClick() {
-							onChange( targetLevel );
-						},
-						role: 'menuitemradio',
-					};
-				}
-			} ) }
-		/>
-	);
-}
diff --git a/packages/block-library/src/heading/heading-level-dropdown.native.js b/packages/block-library/src/heading/heading-level-dropdown.native.js
deleted file mode 100644
index e24374c86b995c..00000000000000
--- a/packages/block-library/src/heading/heading-level-dropdown.native.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { DropdownMenu } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import HeadingLevelIcon from './heading-level-icon';
-
-const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * HeadingLevelDropdown props.
- *
- * @typedef WPHeadingLevelDropdownProps
- *
- * @property {number}                 selectedLevel The chosen heading level.
- * @property {(newValue:number)=>any} onChange      Callback to run when
- *                                                  toolbar value is changed.
- */
-
-/**
- * Dropdown for selecting a heading level (1 through 6).
- *
- * @param {WPHeadingLevelDropdownProps} props Component props.
- *
- * @return {WPComponent} The toolbar.
- */
-export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
-	const createLevelControl = (
-		targetLevel,
-		currentLevel,
-		onChangeCallback
-	) => {
-		const isActive = targetLevel === currentLevel;
-		return {
-			icon: (
-				<HeadingLevelIcon
-					level={ targetLevel }
-					isPressed={ isActive }
-				/>
-			),
-			// translators: %s: heading level e.g: "1", "2", "3"
-			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive,
-			onClick: () => onChangeCallback( targetLevel ),
-		};
-	};
-
-	return (
-		<DropdownMenu
-			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-			controls={ HEADING_LEVELS.map( ( index ) =>
-				createLevelControl( index, selectedLevel, onChange )
-			) }
-			label={ __( 'Change heading level' ) }
-		/>
-	);
-}
diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js
deleted file mode 100644
index b3288d02761612..00000000000000
--- a/packages/block-library/src/heading/heading-level-icon.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * HeadingLevelIcon props.
- *
- * @typedef WPHeadingLevelIconProps
- *
- * @property {number}   level     The heading level to show an icon for.
- * @property {?boolean} isPressed Whether or not the icon should appear pressed; default: false.
- */
-
-/**
- * Heading level icon.
- *
- * @param {WPHeadingLevelIconProps} props Component props.
- *
- * @return {?WPComponent} The icon.
- */
-export default function HeadingLevelIcon( { level, isPressed = false } ) {
-	const levelToPath = {
-		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
-		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
-		3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
-		4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
-		5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
-		6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
-	};
-	if ( ! levelToPath.hasOwnProperty( level ) ) {
-		return null;
-	}
-
-	return (
-		<SVG
-			width="24"
-			height="24"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			isPressed={ isPressed }
-		>
-			<Path d={ levelToPath[ level ] } />
-		</SVG>
-	);
-}
diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
index 56bf1f670e92db..d591dc94ed97d9 100644
--- a/packages/block-library/src/heading/index.js
+++ b/packages/block-library/src/heading/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -29,19 +24,23 @@ export const settings = {
 		attributes: {
 			content: __( 'Code is Poetry' ),
 			level: 2,
+			textAlign: 'center',
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
 		const { content, level } = attributes;
 
+		const customName = attributes?.metadata?.name;
+		const hasContent = content?.trim().length > 0;
+
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && content ) {
-			return content;
+		if ( context === 'list-view' && ( customName || hasContent ) ) {
+			return customName || content;
 		}
 
 		if ( context === 'accessibility' ) {
-			return isEmpty( content )
+			return ! hasContent
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */
 						__( 'Level %s. Empty.' ),
diff --git a/packages/block-library/src/heading/index.php b/packages/block-library/src/heading/index.php
new file mode 100644
index 00000000000000..471e31f19f2ee9
--- /dev/null
+++ b/packages/block-library/src/heading/index.php
@@ -0,0 +1,56 @@
+<?php
+/**
+ * Appending the wp-block-heading to before rendering the stored `core/heading` block contents.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds a wp-block-heading class to the heading block content.
+ *
+ * For example, the following block content:
+ *  <h2 class="align-left">Hello World</h2>
+ *
+ * Would be transformed to:
+ *  <h2 class="align-left wp-block-heading">Hello World</h2>
+ *
+ * @since 6.2.0
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_heading_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	$header_tags = array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' );
+	while ( $p->next_tag() ) {
+		if ( in_array( $p->get_tag(), $header_tags, true ) ) {
+			$p->add_class( 'wp-block-heading' );
+			break;
+		}
+	}
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Registers the `core/heading` block on server.
+ *
+ * @since 6.2.0
+ */
+function register_block_core_heading() {
+	register_block_type_from_metadata(
+		__DIR__ . '/heading',
+		array(
+			'render_callback' => 'block_core_heading_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_heading' );
diff --git a/packages/block-library/src/heading/save.js b/packages/block-library/src/heading/save.js
index 181f40234444e7..8ae4fa6afd9f6f 100644
--- a/packages/block-library/src/heading/save.js
+++ b/packages/block-library/src/heading/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ export default function save( { attributes } ) {
 	const { textAlign, content, level } = attributes;
 	const TagName = 'h' + level;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss
index 31a6989c39c817..9d3aa1c6ff59c7 100644
--- a/packages/block-library/src/heading/style.scss
+++ b/packages/block-library/src/heading/style.scss
@@ -7,4 +7,8 @@ h6 {
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}
+	&.has-text-align-right[style*="writing-mode"]:where([style*="vertical-rl"]),
+	&.has-text-align-left[style*="writing-mode"]:where([style*="vertical-lr"]) {
+		rotate: 180deg;
+	}
 }
diff --git a/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..ceb77e2c8c7f06
--- /dev/null
+++ b/packages/block-library/src/heading/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading block changes heading level 1`] = `
+"<!-- wp:heading {"level":6} -->
+<h6 class="wp-block-heading"></h6>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block inserts block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading"></h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should keep the heading when there is an empty paragraph block before and backspace is pressed at the start 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should merge with an empty Paragraph block and keep being the Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should set a background color 1`] = `
+"<!-- wp:heading {"backgroundColor":"luminous-vivid-orange"} -->
+<h2 class="wp-block-heading has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should set a text color 1`] = `
+"<!-- wp:heading {"textColor":"pale-pink"} -->
+<h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should transform to a paragraph block when pressing backspace at the beginning of the first heading block 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..c773f863077715
--- /dev/null
+++ b/packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heading block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Heading block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Heading block transforms to List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Example text</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Heading block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Heading block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Heading block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading --></blockquote>
+<!-- /wp:quote -->"
+`;
diff --git a/packages/block-library/src/heading/test/index.native.js b/packages/block-library/src/heading/test/index.native.js
new file mode 100644
index 00000000000000..b8d93c32f5b4f6
--- /dev/null
+++ b/packages/block-library/src/heading/test/index.native.js
@@ -0,0 +1,257 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	screen,
+	typeInRichText,
+	waitFor,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Heading block', () => {
+	it( 'inserts block', async () => {
+		await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Heading' );
+
+		// Get block
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		expect( headingBlock ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a text color', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a background color', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'change level dropdown displays active selection', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( headingBlock );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+
+		// Assert
+		expect(
+			within( screen.getByLabelText( 'Heading 2' ) ).getByTestId(
+				'bottom-sheet-cell-selected-icon'
+			)
+		).toBeVisible();
+	} );
+
+	it( 'changes heading level', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( getBlock( screen, 'Heading' ) );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+		fireEvent.press( screen.getByLabelText( 'Heading 6' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should merge with an empty Paragraph block and keep being the Heading block', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async () => {
+		// Arrange
+		await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		await addBlock( screen, 'Heading' );
+		const headingBlock = getBlock( screen, 'Heading', { rowIndex: 2 } );
+		fireEvent.press( headingBlock );
+
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( headingTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/block-library/src/heading/test/transforms.native.js b/packages/block-library/src/heading/test/transforms.native.js
new file mode 100644
index 00000000000000..39aaaa53cf9785
--- /dev/null
+++ b/packages/block-library/src/heading/test/transforms.native.js
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Heading';
+const initialHtml = `
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading -->`;
+
+const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Pullquote',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/heading/transforms.js b/packages/block-library/src/heading/transforms.js
index a7e5861c15c020..f040ff06e37e86 100644
--- a/packages/block-library/src/heading/transforms.js
+++ b/packages/block-library/src/heading/transforms.js
@@ -7,7 +7,7 @@ import { createBlock, getBlockAttributes } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { getLevelFromHeadingNodeName } from './shared';
-import { name } from './block.json';
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
 
 const transforms = {
 	from: [
@@ -16,12 +16,20 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, anchor, align: textAlign } ) =>
-					createBlock( name, {
-						content,
-						anchor,
-						textAlign,
-					} )
+				attributes.map(
+					( { content, anchor, align: textAlign, metadata } ) =>
+						createBlock( 'core/heading', {
+							content,
+							anchor,
+							textAlign,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/heading',
+								( { content: contentBinding } ) => ( {
+									content: contentBinding,
+								} )
+							),
+						} )
 				),
 		},
 		{
@@ -42,7 +50,10 @@ const transforms = {
 				};
 			},
 			transform( node ) {
-				const attributes = getBlockAttributes( name, node.outerHTML );
+				const attributes = getBlockAttributes(
+					'core/heading',
+					node.outerHTML
+				);
 				const { textAlign } = node.style || {};
 
 				attributes.level = getLevelFromHeadingNodeName( node.nodeName );
@@ -55,14 +66,14 @@ const transforms = {
 					attributes.align = textAlign;
 				}
 
-				return createBlock( name, attributes );
+				return createBlock( 'core/heading', attributes );
 			},
 		},
 		...[ 1, 2, 3, 4, 5, 6 ].map( ( level ) => ( {
 			type: 'prefix',
 			prefix: Array( level + 1 ).join( '#' ),
 			transform( content ) {
-				return createBlock( name, {
+				return createBlock( 'core/heading', {
 					level,
 					content,
 				} );
@@ -71,12 +82,7 @@ const transforms = {
 		...[ 1, 2, 3, 4, 5, 6 ].map( ( level ) => ( {
 			type: 'enter',
 			regExp: new RegExp( `^/(h|H)${ level }$` ),
-			transform( content ) {
-				return createBlock( name, {
-					level,
-					content,
-				} );
-			},
+			transform: () => createBlock( 'core/heading', { level } ),
 		} ) ),
 	],
 	to: [
@@ -85,8 +91,18 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				attributes.map( ( { content, textAlign: align } ) =>
-					createBlock( 'core/paragraph', { content, align } )
+				attributes.map( ( { content, textAlign: align, metadata } ) =>
+					createBlock( 'core/paragraph', {
+						content,
+						align,
+						metadata: getTransformedMetadata(
+							metadata,
+							'core/paragraph',
+							( { content: contentBinding } ) => ( {
+								content: contentBinding,
+							} )
+						),
+					} )
 				),
 		},
 	],
diff --git a/packages/block-library/src/home-link/block.json b/packages/block-library/src/home-link/block.json
index 567bdf8c27ba7b..b19fcf43ce6880 100644
--- a/packages/block-library/src/home-link/block.json
+++ b/packages/block-library/src/home-link/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/home-link",
 	"category": "design",
 	"parent": [ "core/navigation" ],
@@ -36,6 +36,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-home-link-editor",
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index 4d13dd1939e4c5..793e13515411db 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -1,38 +1,28 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 
 const preventDefault = ( event ) => event.preventDefault();
 
 export default function HomeEdit( { attributes, setAttributes, context } ) {
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-		return {
-			homeUrl: getUnstableBase()?.home,
-		};
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
 	}, [] );
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
 			'has-background': !! backgroundColor || !! style?.color?.background,
@@ -44,42 +34,31 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 		},
 	} );
 
-	const { label } = attributes;
-
-	useEffect( () => {
-		if ( label === undefined ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { label: __( 'Home' ) } );
-		}
-	}, [ label ] );
-
 	return (
-		<>
-			<div { ...blockProps }>
-				<a
-					className="wp-block-home-link__content wp-block-navigation-item__content"
-					href={ homeUrl }
-					onClick={ preventDefault }
-				>
-					<RichText
-						identifier="label"
-						className="wp-block-home-link__label"
-						value={ label }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						aria-label={ __( 'Home link text' ) }
-						placeholder={ __( 'Add home link' ) }
-						withoutInteractiveFormatting
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
-					/>
-				</a>
-			</div>
-		</>
+		<div { ...blockProps }>
+			<a
+				className="wp-block-home-link__content wp-block-navigation-item__content"
+				href={ homeUrl }
+				onClick={ preventDefault }
+			>
+				<RichText
+					identifier="label"
+					className="wp-block-home-link__label"
+					value={ attributes.label ?? __( 'Home' ) }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					aria-label={ __( 'Home link text' ) }
+					placeholder={ __( 'Add home link' ) }
+					withoutInteractiveFormatting
+					allowedFormats={ [
+						'core/bold',
+						'core/italic',
+						'core/image',
+						'core/strikethrough',
+					] }
+				/>
+			</a>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php
index 5bf7aeda5505df..d61aa0bc235e22 100644
--- a/packages/block-library/src/home-link/index.php
+++ b/packages/block-library/src/home-link/index.php
@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the home link markup in the front-end.
  *
+ * @since 6.0.0
+ *
  * @param  array $context home link block context.
  * @return array Colors CSS classes and inline styles.
  */
@@ -61,6 +63,8 @@ function block_core_home_link_build_css_colors( $context ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the home link markup in the front-end.
  *
+ * @since 6.0.0
+ *
  * @param  array $context Home link block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -88,6 +92,8 @@ function block_core_home_link_build_css_font_sizes( $context ) {
 /**
  * Builds an array with classes and style for the li wrapper
  *
+ * @since 6.0.0
+ *
  * @param  array $context    Home link block context.
  * @return string The li wrapper attributes.
  */
@@ -99,11 +105,18 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$font_sizes['css_classes']
 	);
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
+	$classes[]       = 'wp-block-navigation-item';
+
+	if ( is_front_page() ) {
+		$classes[] = 'current-menu-item';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$classes[] = 'current-menu-item';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes,
+			'class' => implode( ' ', $classes ),
 			'style' => $style_attribute,
 		)
 	);
@@ -114,6 +127,8 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 /**
  * Renders the `core/home-link` block.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -122,13 +137,19 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
  */
 function render_block_core_home_link( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
-		return '';
+		$attributes['label'] = __( 'Home' );
 	}
+	$aria_current = '';
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+	if ( is_front_page() ) {
+		$aria_current = ' aria-current="page"';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$aria_current = ' aria-current="page"';
+	}
 
 	return sprintf(
-		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a></li>',
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" rel="home"%3$s>%4$s</a></li>',
 		block_core_home_link_build_li_wrapper_attributes( $block->context ),
 		esc_url( home_url() ),
 		$aria_current,
@@ -139,6 +160,8 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 /**
  * Register the home block
  *
+ * @since 6.0.0
+ *
  * @uses render_block_core_home_link()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */
diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json
index e72a674373e144..08587f69bbd460 100644
--- a/packages/block-library/src/html/block.json
+++ b/packages/block-library/src/html/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/html",
 	"title": "Custom HTML",
 	"category": "widgets",
@@ -10,13 +10,16 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {
 		"customClassName": false,
 		"className": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-html-editor"
 }
diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 5cb2b457633b13..9a1972d54b7e65 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -7,8 +7,16 @@ import {
 	BlockControls,
 	PlainText,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Disabled,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,6 +27,12 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
+	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
+
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -27,19 +41,22 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 		setIsPreview( false );
 	}
 
+	const blockProps = useBlockProps( {
+		className: 'block-library-html__edit',
+		'aria-describedby': isPreview ? instanceId : undefined,
+	} );
+
 	return (
-		<div { ...useBlockProps( { className: 'block-library-html__edit' } ) }>
+		<div { ...blockProps }>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
-						className="components-tab-button"
 						isPressed={ ! isPreview }
 						onClick={ switchToHTML }
 					>
 						HTML
 					</ToolbarButton>
 					<ToolbarButton
-						className="components-tab-button"
 						isPressed={ isPreview }
 						onClick={ switchToPreview }
 					>
@@ -47,11 +64,18 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isDisabled ? (
-				<Preview
-					content={ attributes.content }
-					isSelected={ isSelected }
-				/>
+			{ isPreview || isPreviewMode || isDisabled ? (
+				<>
+					<Preview
+						content={ attributes.content }
+						isSelected={ isSelected }
+					/>
+					<VisuallyHidden id={ instanceId }>
+						{ __(
+							'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
+						) }
+					</VisuallyHidden>
+				</>
 			) : (
 				<PlainText
 					value={ attributes.content }
diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
index fc1c8240808ae6..d3feef0381f729 100644
--- a/packages/block-library/src/html/editor.scss
+++ b/packages/block-library/src/html/editor.scss
@@ -10,27 +10,11 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
-		font-family: $editor-html-font !important;
-		color: $gray-900 !important;
-		background: $white !important;
-		padding: $grid-unit-15 !important;
-		border: $border-width solid $gray-900 !important;
-		box-shadow: none !important;
-		border-radius: $radius-block-ui !important;
+		box-sizing: border-box;
 		max-height: 250px;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size !important;
-		@include break-small {
-			font-size: $default-font-size !important;
-		}
-
-		&:focus {
-			border-color: var(--wp-admin-theme-color) !important;
-			box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
-
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent !important;
-		}
+		@include editor-input-reset();
+		// HTML input is always LTR regardless of language.
+		/*rtl:ignore*/
+		direction: ltr;
 	}
 }
diff --git a/packages/block-library/src/html/preview.js b/packages/block-library/src/html/preview.js
index 262f6ef626e0a0..eb24b00bc2352b 100644
--- a/packages/block-library/src/html/preview.js
+++ b/packages/block-library/src/html/preview.js
@@ -8,6 +8,7 @@ import {
 } from '@wordpress/block-editor';
 import { SandBox } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 // Default styles used to unset some of the styles
 // that might be inherited from the editor style.
@@ -21,18 +22,29 @@ const DEFAULT_STYLES = `
 `;
 
 export default function HTMLEditPreview( { content, isSelected } ) {
-	const settingStyles = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()?.styles;
-	}, [] );
+	const settingStyles = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().styles,
+		[]
+	);
 
 	const styles = useMemo(
-		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		() => [
+			DEFAULT_STYLES,
+			...transformStyles(
+				( settingStyles ?? [] ).filter( ( style ) => style.css )
+			),
+		],
 		[ settingStyles ]
 	);
 
 	return (
 		<>
-			<SandBox html={ content } styles={ styles } />
+			<SandBox
+				html={ content }
+				styles={ styles }
+				title={ __( 'Custom HTML Preview' ) }
+				tabIndex={ -1 }
+			/>
 			{ /*
 				An overlay is added when the block is not selected in order to register click events.
 				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
diff --git a/packages/block-library/src/html/transforms.js b/packages/block-library/src/html/transforms.js
index 6265acefc8f80f..af1a16288fe9fc 100644
--- a/packages/block-library/src/html/transforms.js
+++ b/packages/block-library/src/html/transforms.js
@@ -2,15 +2,18 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { create } from '@wordpress/rich-text';
 
 const transforms = {
 	from: [
 		{
 			type: 'block',
 			blocks: [ 'core/code' ],
-			transform: ( { content } ) => {
+			transform: ( { content: html } ) => {
 				return createBlock( 'core/html', {
-					content,
+					// The code block may output HTML formatting, so convert it
+					// to plain text.
+					content: create( { html } ).text,
 				} );
 			},
 		},
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 62edb882be0c93..16e31217476026 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -1,23 +1,24 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
+	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
+		"blob": {
+			"type": "string",
+			"role": "local"
 		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"alt": {
 			"type": "string",
@@ -25,27 +26,33 @@
 			"selector": "img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
+		},
+		"lightbox": {
+			"type": "object",
+			"enabled": {
+				"type": "boolean"
+			}
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"href": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -61,13 +68,19 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
-			"type": "number"
+			"type": "string"
 		},
 		"height": {
-			"type": "number"
+			"type": "string"
+		},
+		"aspectRatio": {
+			"type": "string"
+		},
+		"scale": {
+			"type": "string"
 		},
 		"sizeSlug": {
 			"type": "string"
@@ -83,23 +96,39 @@
 		}
 	},
 	"supports": {
+		"interactivity": true,
+		"align": [ "left", "center", "right", "wide", "full" ],
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder",
 			"text": false,
 			"background": false
 		},
+		"filter": {
+			"duotone": true
+		},
+		"spacing": {
+			"margin": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .wp-block-image__crop-area",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
 				"radius": true,
 				"width": true
 			}
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		}
+	},
+	"selectors": {
+		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
+		"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}
 	},
 	"styles": [
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 9f5aaee4f7d21a..6c1db75c5e2aa5 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -1,361 +1,1169 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+} from '@wordpress/block-editor';
 
-const blockAttributes = {
-	align: {
-		type: 'string',
-	},
-	url: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'src',
-	},
-	alt: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'alt',
-		default: '',
+/**
+ * Deprecation for adding the `wp-image-${id}` class to the image block for
+ * responsive images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/4898
+ */
+const v1 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
 	},
-	caption: {
-		type: 'string',
-		source: 'html',
-		selector: 'figcaption',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height } = attributes;
+		const extraImageProps = width || height ? { width, height } : {};
+		const image = <img src={ url } alt={ alt } { ...extraImageProps } />;
+
+		let figureStyle = {};
+
+		if ( width ) {
+			figureStyle = { width };
+		} else if ( align === 'left' || align === 'right' ) {
+			figureStyle = { maxWidth: '50%' };
+		}
+
+		return (
+			<figure
+				className={ align ? `align${ align }` : null }
+				style={ figureStyle }
+			>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-	title: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'img',
-		attribute: 'title',
+};
+
+/**
+ * Deprecation for adding the `is-resized` class to the image block to fix
+ * captions on resized images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/6496
+ */
+const v2 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
 	},
-	href: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'href',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height, id } =
+			attributes;
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+			/>
+		);
+
+		return (
+			<figure className={ align ? `align${ align }` : null }>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-	rel: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'rel',
+};
+
+/**
+ * Deprecation for image floats including a wrapping div.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/7721
+ */
+const v3 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'array',
+			source: 'children',
+			selector: 'figcaption',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		id: {
+			type: 'number',
+		},
+		align: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		linkDestination: {
+			type: 'string',
+			default: 'none',
+		},
 	},
-	linkClass: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'class',
+	save( { attributes } ) {
+		const { url, alt, caption, align, href, width, height, id } =
+			attributes;
+
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			'is-resized': width || height,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+			/>
+		);
+
+		return (
+			<figure className={ classes }>
+				{ href ? <a href={ href }>{ image }</a> : image }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-	id: {
-		type: 'number',
+};
+
+/**
+ * Deprecation for removing the outer div wrapper around aligned images.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/38657
+ */
+const v4 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
 	},
-	width: {
-		type: 'number',
+	supports: {
+		anchor: true,
 	},
-	height: {
-		type: 'number',
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
+
+		const newRel = ! rel ? undefined : rel;
+
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</>
+		);
+
+		if ( 'left' === align || 'right' === align || 'center' === align ) {
+			return (
+				<div { ...useBlockProps.save() }>
+					<figure className={ classes }>{ figure }</figure>
+				</div>
+			);
+		}
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
-	sizeSlug: {
-		type: 'string',
+};
+
+/**
+ * Deprecation for moving existing border radius styles onto the inner img
+ * element where new border block support styles must be applied.
+ * It will also add a new `.has-custom-border` class for existing blocks
+ * with border radii set. This class is required to improve caption position
+ * and styling when an image within a gallery has a custom border or
+ * rounded corners.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+const v5 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
 	},
-	linkDestination: {
-		type: 'string',
+	supports: {
+		anchor: true,
+		color: {
+			__experimentalDuotone: 'img',
+			text: false,
+			background: false,
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+		__experimentalStyle: {
+			spacing: {
+				margin: '0 0 1em 0',
+			},
+		},
 	},
-	linkTarget: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'figure > a',
-		attribute: 'target',
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
+
+		const newRel = ! rel ? undefined : rel;
+
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ id ? `wp-image-${ id }` : null }
+				width={ width }
+				height={ height }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
 };
 
-const blockSupports = {
-	anchor: true,
-	color: {
-		__experimentalDuotone: 'img',
-		text: false,
-		background: false,
+/**
+ * Deprecation for adding width and height as style rules on the inner img.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31366
+ */
+const v6 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			role: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			role: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			role: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			role: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			role: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
 	},
-	__experimentalBorder: {
-		radius: true,
-		__experimentalDefaultControls: {
+	supports: {
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
 			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
 		},
 	},
-};
+	migrate( attributes ) {
+		const { height, width } = attributes;
+		return {
+			...attributes,
+			width: typeof width === 'number' ? `${ width }px` : width,
+			height: typeof height === 'number' ? `${ height }px` : height,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-const deprecated = [
-	// The following deprecation moves existing border radius styles onto the
-	// inner img element where new border block support styles must be applied.
-	// It will also add a new `.has-custom-border` class for existing blocks
-	// with border radii set. This class is required to improve caption position
-	// and styling when an image within a gallery has a custom border or
-	// rounded corners.
-	//
-	// See: https://github.com/WordPress/gutenberg/pull/31366/
-	{
-		attributes: blockAttributes,
-		supports: blockSupports,
-		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				rel,
-				linkClass,
-				width,
-				height,
-				id,
-				linkTarget,
-				sizeSlug,
-				title,
-			} = attributes;
-
-			const newRel = isEmpty( rel ) ? undefined : rel;
-
-			const classes = classnames( {
-				[ `align${ align }` ]: align,
-				[ `size-${ sizeSlug }` ]: sizeSlug,
-				'is-resized': width || height,
-			} );
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-					title={ title }
-				/>
-			);
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			const figure = (
-				<>
-					{ href ? (
-						<a
-							className={ linkClass }
-							href={ href }
-							target={ linkTarget }
-							rel={ newRel }
-						>
-							{ image }
-						</a>
-					) : (
-						image
-					) }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</>
-			);
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
 
-			return (
-				<figure { ...useBlockProps.save( { className: classes } ) }>
-					{ figure }
-				</figure>
-			);
+		const imageClasses = clsx( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					aspectRatio,
+					objectFit: scale,
+				} }
+				width={ width }
+				height={ height }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
+	},
+};
+
+/**
+ * Deprecation for converting to string width and height block attributes and
+ * removing the width and height img element attributes which are not needed
+ * as they get added by the TODO hook.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/53274
+ */
+const v7 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			role: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			role: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			role: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			role: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			role: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
 		},
 	},
-	{
-		attributes: {
-			...blockAttributes,
-			title: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'img',
-				attribute: 'title',
-			},
-			sizeSlug: {
-				type: 'string',
+	supports: {
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
 			},
 		},
-		supports: blockSupports,
-		save( { attributes } ) {
-			const {
-				url,
-				alt,
-				caption,
-				align,
-				href,
-				rel,
-				linkClass,
-				width,
-				height,
-				id,
-				linkTarget,
-				sizeSlug,
-				title,
-			} = attributes;
-
-			const newRel = isEmpty( rel ) ? undefined : rel;
-
-			const classes = classnames( {
-				[ `align${ align }` ]: align,
-				[ `size-${ sizeSlug }` ]: sizeSlug,
-				'is-resized': width || height,
-			} );
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-					title={ title }
-				/>
-			);
+	},
+	migrate( { width, height, ...attributes } ) {
+		return {
+			...attributes,
+			width: `${ width }px`,
+			height: `${ height }px`,
+		};
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-			const figure = (
-				<>
-					{ href ? (
-						<a
-							className={ linkClass }
-							href={ href }
-							target={ linkTarget }
-							rel={ newRel }
-						>
-							{ image }
-						</a>
-					) : (
-						image
-					) }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</>
-			);
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			if ( 'left' === align || 'right' === align || 'center' === align ) {
-				return (
-					<div { ...useBlockProps.save() }>
-						<figure className={ classes }>{ figure }</figure>
-					</div>
-				);
-			}
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
 
-			return (
-				<figure { ...useBlockProps.save( { className: classes } ) }>
-					{ figure }
-				</figure>
-			);
-		},
+		const imageClasses = clsx( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					aspectRatio,
+					objectFit: scale,
+					width,
+					height,
+				} }
+				width={ width }
+				height={ height }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height, id } =
-				attributes;
-
-			const classes = classnames( {
-				[ `align${ align }` ]: align,
-				'is-resized': width || height,
-			} );
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-				/>
-			);
+};
 
-			return (
-				<figure className={ classes }>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
+const v8 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		behaviors: {
+			type: 'object',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			role: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			role: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			role: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			role: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			role: 'content',
+		},
+		width: {
+			type: 'string',
+		},
+		height: {
+			type: 'string',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
 		},
 	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height, id } =
-				attributes;
-
-			const image = (
-				<img
-					src={ url }
-					alt={ alt }
-					className={ id ? `wp-image-${ id }` : null }
-					width={ width }
-					height={ height }
-				/>
-			);
-
-			return (
-				<figure className={ align ? `align${ align }` : null }>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
+	supports: {
+		anchor: true,
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
 		},
 	},
-	{
-		attributes: blockAttributes,
-		save( { attributes } ) {
-			const { url, alt, caption, align, href, width, height } =
-				attributes;
-			const extraImageProps = width || height ? { width, height } : {};
-			const image = (
-				<img src={ url } alt={ alt } { ...extraImageProps } />
-			);
+	migrate( { width, height, ...attributes } ) {
+		// We need to perform a check here because in cases
+		// where attributes are added dynamically to blocks,
+		// block invalidation overrides the isEligible() method
+		// and forces the migration to run, so it's not guaranteed
+		// that `behaviors` or `behaviors.lightbox` will be defined.
+		if ( ! attributes.behaviors?.lightbox ) {
+			return attributes;
+		}
+		const {
+			behaviors: {
+				lightbox: { enabled },
+			},
+		} = attributes;
+		const newAttributes = {
+			...attributes,
+			lightbox: {
+				enabled,
+			},
+		};
+		delete newAttributes.behaviors;
+		return newAttributes;
+	},
+	isEligible( attributes ) {
+		return !! attributes.behaviors;
+	},
+	save( { attributes } ) {
+		const {
+			url,
+			alt,
+			caption,
+			align,
+			href,
+			rel,
+			linkClass,
+			width,
+			height,
+			aspectRatio,
+			scale,
+			id,
+			linkTarget,
+			sizeSlug,
+			title,
+		} = attributes;
 
-			let figureStyle = {};
+		const newRel = ! rel ? undefined : rel;
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			if ( width ) {
-				figureStyle = { width };
-			} else if ( align === 'left' || align === 'right' ) {
-				figureStyle = { maxWidth: '50%' };
-			}
+		const classes = clsx( {
+			[ `align${ align }` ]: align,
+			[ `size-${ sizeSlug }` ]: sizeSlug,
+			'is-resized': width || height,
+			'has-custom-border':
+				!! borderProps.className ||
+				( borderProps.style &&
+					Object.keys( borderProps.style ).length > 0 ),
+		} );
 
-			return (
-				<figure
-					className={ align ? `align${ align }` : null }
-					style={ figureStyle }
-				>
-					{ href ? <a href={ href }>{ image }</a> : image }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+		const imageClasses = clsx( borderProps.className, {
+			[ `wp-image-${ id }` ]: !! id,
+		} );
+
+		const image = (
+			<img
+				src={ url }
+				alt={ alt }
+				className={ imageClasses || undefined }
+				style={ {
+					...borderProps.style,
+					aspectRatio,
+					objectFit: scale,
+					width,
+					height,
+				} }
+				title={ title }
+			/>
+		);
+
+		const figure = (
+			<>
+				{ href ? (
+					<a
+						className={ linkClass }
+						href={ href }
+						target={ linkTarget }
+						rel={ newRel }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+						tagName="figcaption"
+						value={ caption }
+					/>
+				) }
+			</>
+		);
+
+		return (
+			<figure { ...useBlockProps.save( { className: classes } ) }>
+				{ figure }
+			</figure>
+		);
 	},
-];
+};
 
-export default deprecated;
+export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 4e504896b47094..e08d0baff0503d 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -1,50 +1,37 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { get, isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL, createBlobURL } from '@wordpress/blob';
+import { createBlock, getBlockBindingsSource } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentControl,
-	BlockControls,
 	BlockIcon,
-	MediaPlaceholder,
 	useBlockProps,
+	MediaPlaceholder,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { image as icon } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { image as icon, plugins as pluginsIcon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
-
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration={ true }
-			icon={ icon }
-			label={ __( 'Image' ) }
-			instructions={ __(
-				'Upload an image file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
+import { isValidFileType } from './utils';
+import { useMaxWidthObserver } from './use-max-width-observer';
 
 /**
  * Module constants
@@ -65,23 +52,12 @@ export const pickRelevantMediaFiles = ( image, size ) => {
 	);
 
 	imageProps.url =
-		get( image, [ 'sizes', size, 'url' ] ) ||
-		get( image, [ 'media_details', 'sizes', size, 'source_url' ] ) ||
+		image?.sizes?.[ size ]?.url ||
+		image?.media_details?.sizes?.[ size ]?.source_url ||
 		image.url;
 	return imageProps;
 };
 
-/**
- * Is the URL a temporary blob URL? A blob URL is one that is used temporarily
- * while the image is being uploaded and will not have an id yet allocated.
- *
- * @param {number=} id  The id of the image.
- * @param {string=} url The url of the image.
- *
- * @return {boolean} Is the URL a Blob URL
- */
-const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
-
 /**
  * Is the url for the image hosted externally. An externally hosted image has no
  * id and is not a blob url.
@@ -94,42 +70,61 @@ const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
 export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
 
 /**
- * Checks if WP generated default image size. Size generation is skipped
+ * Checks if WP generated the specified image size. Size generation is skipped
  * when the image is smaller than the said size.
  *
  * @param {Object} image
- * @param {string} defaultSize
+ * @param {string} size
  *
  * @return {boolean} Whether or not it has default image size.
  */
-function hasDefaultSize( image, defaultSize ) {
+function hasSize( image, size ) {
 	return (
-		'url' in ( image?.sizes?.[ defaultSize ] ?? {} ) ||
-		'source_url' in ( image?.media_details?.sizes?.[ defaultSize ] ?? {} )
+		'url' in ( image?.sizes?.[ size ] ?? {} ) ||
+		'source_url' in ( image?.media_details?.sizes?.[ size ] ?? {} )
 	);
 }
 
 export function ImageEdit( {
 	attributes,
 	setAttributes,
-	isSelected,
+	isSelected: isSingleSelected,
 	className,
 	insertBlocksAfter,
 	onReplace,
 	context,
 	clientId,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const {
 		url = '',
 		alt,
 		caption,
-		align,
 		id,
 		width,
 		height,
 		sizeSlug,
+		aspectRatio,
+		scale,
+		align,
+		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState();
+
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+
+	const containerRef = useRef();
+	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
+	// This won't work for them because the container width changes with the image.
+	// TODO: Find a way to observe the container width for flex and grid layouts.
+	const isMaxWidthContainerWidth =
+		! parentLayout ||
+		( parentLayout.type !== 'flex' && parentLayout.type !== 'grid' );
+	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver();
+
+	const [ placeholderResizeListener, { width: placeholderWidth } ] =
+		useResizeObserver();
+
+	const isSmallContainer = placeholderWidth && placeholderWidth < 160;
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -141,21 +136,28 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
-	const ref = useRef();
-	const { imageDefaultSize, mediaUpload, isContentLocked } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetContentLockingParent } =
-				select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				imageDefaultSize: settings.imageDefaultSize,
-				mediaUpload: settings.mediaUpload,
-				isContentLocked:
-					!! __unstableGetContentLockingParent( clientId ),
-			};
-		},
-		[]
-	);
+	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
+	}, [ __unstableMarkNextChangeAsNotPersistent, align, setAttributes ] );
+
+	const {
+		getSettings,
+		getBlockRootClientId,
+		getBlockName,
+		canInsertBlockType,
+	} = useSelect( blockEditorStore );
+	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
@@ -164,11 +166,56 @@ export function ImageEdit( {
 			src: undefined,
 			id: undefined,
 			url: undefined,
+			blob: undefined,
 		} );
-		setTemporaryURL( undefined );
+	}
+
+	function onSelectImagesList( images ) {
+		const win = containerRef.current?.ownerDocument.defaultView;
+
+		if ( images.every( ( file ) => file instanceof win.File ) ) {
+			/** @type {File[]} */
+			const files = images;
+			const rootClientId = getBlockRootClientId( clientId );
+
+			if ( files.some( ( file ) => ! isValidFileType( file ) ) ) {
+				// Copied from the same notice in the gallery block.
+				createErrorNotice(
+					__(
+						'If uploading to a gallery all files need to be image formats'
+					),
+					{ id: 'gallery-upload-invalid-file', type: 'snackbar' }
+				);
+			}
+
+			const imageBlocks = files
+				.filter( ( file ) => isValidFileType( file ) )
+				.map( ( file ) =>
+					createBlock( 'core/image', {
+						blob: createBlobURL( file ),
+					} )
+				);
+
+			if ( getBlockName( rootClientId ) === 'core/gallery' ) {
+				replaceBlock( clientId, imageBlocks );
+			} else if ( canInsertBlockType( 'core/gallery', rootClientId ) ) {
+				const galleryBlock = createBlock(
+					'core/gallery',
+					{},
+					imageBlocks
+				);
+
+				replaceBlock( clientId, galleryBlock );
+			}
+		}
 	}
 
 	function onSelectImage( media ) {
+		if ( Array.isArray( media ) ) {
+			onSelectImagesList( media );
+			return;
+		}
+
 		if ( ! media || ! media.url ) {
 			setAttributes( {
 				url: undefined,
@@ -176,7 +223,9 @@ export function ImageEdit( {
 				id: undefined,
 				title: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
 
 			return;
 		}
@@ -186,13 +235,22 @@ export function ImageEdit( {
 			return;
 		}
 
-		setTemporaryURL();
+		const { imageDefaultSize } = getSettings();
+
+		// Try to use the previous selected image size if its available
+		// otherwise try the default image size or fallback to "full"
+		let newSize = 'full';
+		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
+			newSize = sizeSlug;
+		} else if ( hasSize( media, imageDefaultSize ) ) {
+			newSize = imageDefaultSize;
+		}
 
-		let mediaAttributes = pickRelevantMediaFiles( media, imageDefaultSize );
+		let mediaAttributes = pickRelevantMediaFiles( media, newSize );
 
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
-		if ( captionRef.current && ! get( mediaAttributes, [ 'caption' ] ) ) {
+		if ( captionRef.current && ! mediaAttributes.caption ) {
 			const { caption: omittedCaption, ...restMediaAttributes } =
 				mediaAttributes;
 			mediaAttributes = restMediaAttributes;
@@ -202,16 +260,10 @@ export function ImageEdit( {
 		// Reset the dimension attributes if changing to a different image.
 		if ( ! media.id || media.id !== id ) {
 			additionalAttributes = {
-				width: undefined,
-				height: undefined,
-				// Fallback to size "full" if there's no default image size.
-				// It means the image is smaller, and the block will use a full-size URL.
-				sizeSlug: hasDefaultSize( media, imageDefaultSize )
-					? imageDefaultSize
-					: 'full',
+				sizeSlug: newSize,
 			};
 		} else {
-			// Keep the same url when selecting the same file, so "Image Size"
+			// Keep the same url when selecting the same file, so "Resolution"
 			// option is not changed.
 			additionalAttributes = { url };
 		}
@@ -256,68 +308,32 @@ export function ImageEdit( {
 		mediaAttributes.href = href;
 
 		setAttributes( {
+			blob: undefined,
 			...mediaAttributes,
 			...additionalAttributes,
 			linkDestination,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newURL ) {
 		if ( newURL !== url ) {
 			setAttributes( {
+				blob: undefined,
 				url: newURL,
 				id: undefined,
-				width: undefined,
-				height: undefined,
-				sizeSlug: imageDefaultSize,
+				sizeSlug: getSettings().imageDefaultSize,
 			} );
+			setTemporaryURL();
 		}
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
-	let isTemp = isTemporaryImage( id, url );
-
-	// Upload a temporary image on mount.
-	useEffect( () => {
-		if ( ! isTemp ) {
-			return;
-		}
-
-		const file = getBlobByURL( url );
-
-		if ( file ) {
-			mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ img ] ) => {
-					onSelectImage( img );
-				},
-				allowedTypes: ALLOWED_MEDIA_TYPES,
-				onError: ( message ) => {
-					isTemp = false;
-					onUploadError( message );
-				},
-			} );
-		}
-	}, [] );
-
-	// If an image is temporary, revoke the Blob url when it is uploaded (and is
-	// no longer temporary).
-	useEffect( () => {
-		if ( isTemp ) {
-			setTemporaryURL( url );
-			return;
-		}
-		revokeBlobURL( temporaryURL );
-	}, [ isTemp, url ] );
+	useUploadMediaFromBlobURL( {
+		url: temporaryURL,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectImage,
+		onError: onUploadError,
+	} );
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
@@ -325,66 +341,140 @@ export function ImageEdit( {
 		<img
 			alt={ __( 'Edit image' ) }
 			title={ __( 'Edit image' ) }
-			className={ 'edit-image-preview' }
+			className="edit-image-preview"
 			src={ url }
 		/>
 	);
 
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( className, {
-		'is-transient': temporaryURL,
+	const classes = clsx( className, {
+		'is-transient': !! temporaryURL,
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':
-			!! borderProps.className || ! isEmpty( borderProps.style ),
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
 	const blockProps = useBlockProps( {
-		ref,
+		ref: containerRef,
 		className: classes,
 	} );
 
+	// Much of this description is duplicated from MediaPlaceholder.
+	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
+		( select ) => {
+			if ( ! isSingleSelected ) {
+				return {};
+			}
+
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
+
+			return {
+				lockUrlControls:
+					!! metadata?.bindings?.url &&
+					! blockBindingsSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
+				lockUrlControlsMessage: blockBindingsSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							blockBindingsSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
+			};
+		},
+		[ context, isSingleSelected, metadata?.bindings?.url ]
+	);
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className={ clsx( 'block-editor-media-placeholder', {
+					[ borderProps.className ]:
+						!! borderProps.className && ! isSingleSelected,
+				} ) }
+				icon={
+					! isSmallContainer &&
+					( lockUrlControls ? pluginsIcon : icon )
+				}
+				withIllustration={ ! isSingleSelected || isSmallContainer }
+				label={ ! isSmallContainer && __( 'Image' ) }
+				instructions={
+					! lockUrlControls &&
+					! isSmallContainer &&
+					__(
+						'Drag and drop an image, upload, or choose from your library.'
+					)
+				}
+				style={ {
+					aspectRatio:
+						! ( width && height ) && aspectRatio
+							? aspectRatio
+							: undefined,
+					width: height && aspectRatio ? '100%' : width,
+					height: width && aspectRatio ? '100%' : height,
+					objectFit: scale,
+					...borderProps.style,
+					...shadowProps.style,
+				} }
+			>
+				{ lockUrlControls &&
+					! isSmallContainer &&
+					lockUrlControlsMessage }
+
+				{ ! lockUrlControls && ! isSmallContainer && content }
+				{ placeholderResizeListener }
+			</Placeholder>
+		);
+	};
+
 	return (
-		<figure { ...blockProps }>
-			{ ( temporaryURL || url ) && (
+		<>
+			<figure { ...blockProps }>
 				<Image
 					temporaryURL={ temporaryURL }
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
+					isSingleSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					onReplace={ onReplace }
 					onSelectImage={ onSelectImage }
 					onSelectURL={ onSelectURL }
 					onUploadError={ onUploadError }
-					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
-					isContentLocked={ isContentLocked }
+					blockEditingMode={ blockEditingMode }
+					parentLayoutType={ parentLayout?.type }
+					maxContentWidth={ maxContentWidth }
+				/>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					placeholder={ placeholder }
+					accept="image/*"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					handleUpload={ ( files ) => files.length === 1 }
+					value={ { id, src } }
+					mediaPreview={ mediaPreview }
+					disableMediaButtons={ temporaryURL || url }
 				/>
-			) }
-			{ ! url && ! isContentLocked && (
-				<BlockControls group="block">
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				</BlockControls>
-			) }
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				onSelect={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onError={ onUploadError }
-				placeholder={ placeholder }
-				accept="image/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				value={ { id, src } }
-				mediaPreview={ mediaPreview }
-				disableMediaButtons={ temporaryURL || url }
-			/>
-		</figure>
+			</figure>
+			{
+				// The listener cannot be placed as the first element as it will break the in-between inserter.
+				// See https://github.com/WordPress/gutenberg/blob/71134165868298fc15e22896d0c28b41b3755ff7/packages/block-editor/src/components/block-list/use-in-between-inserter.js#L120
+				isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver
+			}
+		</>
 	);
 }
 
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 8a9881fa95c719..efa526ec0afd5d 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -44,10 +44,10 @@ import {
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
 	blockSettingsScreens,
+	RichText,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg, isURL } from '@wordpress/url';
@@ -61,8 +61,9 @@ import {
 	textColor,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editPostStore } from '@wordpress/edit-post';
 import { store as noticesStore } from '@wordpress/notices';
+// eslint-disable-next-line no-restricted-imports
+import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
@@ -211,7 +212,6 @@ export class ImageEdit extends Component {
 		this.onSetFeatured = this.onSetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
-		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator =
 			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
@@ -304,6 +304,20 @@ export class ImageEdit extends Component {
 			this.replacedFeaturedImage = false;
 			setFeaturedImage( id );
 		}
+
+		const { align } = attributes;
+		const { __unstableMarkNextChangeAsNotPersistent } = this.props;
+
+		// Update the attributes if the align is wide or full
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -316,9 +330,7 @@ export class ImageEdit extends Component {
 
 	accessibilityLabelCreator( caption ) {
 		// Checks if caption is empty.
-		return ( typeof caption === 'string' && caption.trim().length === 0 ) ||
-			caption === undefined ||
-			caption === null
+		return RichText.isEmpty( caption )
 			? /* translators: accessibility text. Empty image caption. */
 			  'Image caption. Empty'
 			: sprintf(
@@ -390,18 +402,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = Object.values(
-			WIDE_ALIGNMENTS.alignments
-		).includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		this.props.setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -577,11 +577,14 @@ export class ImageEdit extends Component {
 				footerNote={
 					<>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
+							'Describe the purpose of the image. Leave empty if decorative.'
 						) }{ ' ' }
 						<FooterMessageLink
 							href={
-								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+								__(
+									'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+								)
 							}
 							value={ __( 'What is alt text?' ) }
 						/>
@@ -617,7 +620,7 @@ export class ImageEdit extends Component {
 					styles.removeFeaturedButton,
 				] }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () =>
 					this.onSetFeatured( MEDIA_ID_NO_FEATURED_IMAGE_SET )
 				}
@@ -629,7 +632,7 @@ export class ImageEdit extends Component {
 				label={ __( 'Set as Featured Image' ) }
 				labelStyle={ setFeaturedButtonStyle }
 				cellContainerStyle={ styles.setFeaturedButtonCellContainer }
-				separatorType={ 'none' }
+				separatorType="none"
 				onPress={ () => this.onSetFeatured( attributes.id ) }
 			/>
 		);
@@ -710,10 +713,6 @@ export class ImageEdit extends Component {
 						onClick={ open }
 					/>
 				</ToolbarGroup>
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ this.updateAlignment }
-				/>
 			</BlockControls>
 		);
 
@@ -816,6 +815,7 @@ export class ImageEdit extends Component {
 						{ ! this.state.isCaptionSelected &&
 							getToolbarEditButton( openMediaOptions ) }
 						<MediaUploadProgress
+							enablePausedUploads
 							coverUrl={ url }
 							mediaId={ id }
 							onUpdateMediaProgress={ this.updateMediaProgress }
@@ -829,6 +829,7 @@ export class ImageEdit extends Component {
 								this.mediaUploadStateReset
 							}
 							renderContent={ ( {
+								isUploadPaused,
 								isUploadInProgress,
 								isUploadFailed,
 								retryMessage,
@@ -847,6 +848,7 @@ export class ImageEdit extends Component {
 												! isCaptionSelected
 											}
 											isUploadFailed={ isUploadFailed }
+											isUploadPaused={ isUploadPaused }
 											isUploadInProgress={
 												isUploadInProgress
 											}
@@ -890,7 +892,7 @@ export class ImageEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_IMAGE ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectMediaUploadOption }
 				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {
@@ -912,8 +914,7 @@ export default compose( [
 			isSelected,
 			clientId,
 		} = props;
-		const { imageSizes, imageDefaultSize, shouldUseFastImage } =
-			getSettings();
+		const { imageSizes, imageDefaultSize, capabilities } = getSettings();
 		const isNotFileUrl = id && getProtocol( url ) !== 'file:';
 		const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -931,7 +932,7 @@ export default compose( [
 			image,
 			imageSizes,
 			imageDefaultSize,
-			shouldUseFastImage,
+			shouldUseFastImage: capabilities?.shouldUseFastImage === true,
 			featuredImageId,
 			wasBlockJustInserted: wasBlockJustInserted(
 				clientId,
@@ -941,8 +942,11 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { createErrorNotice } = dispatch( noticesStore );
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 
 		return {
+			__unstableMarkNextChangeAsNotPersistent,
 			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 3e4bb7dd6392f0..35b05a063c2997 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,44 +1,11 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// Disable any duotone filter applied in the selected state.
-		filter: none;
-
-		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-
-	// Remove the transition while we still have a legacy placeholder style.
-	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
+	.block-editor-media-placeholder.is-small {
+		min-height: 60px;
 	}
 }
 
-
 figure.wp-block-image:not(.wp-block) {
 	margin: 0;
 }
@@ -61,6 +28,23 @@ figure.wp-block-image:not(.wp-block) {
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		margin: 0;
+	}
+}
+
+// Shown while image is being uploded but cannot be previewed.
+.wp-block-image__placeholder {
+	aspect-ratio: 4 / 3;
+
+	// Make placeholder background white so that you can see the spinner on top of it.
+	&.has-illustration::before {
+		background: $white;
+		opacity: 0.8;
+	}
+
+	// Reduce opacity of diagonal stroke so that it doesn't obscure the spinner.
+	.components-placeholder__illustration {
+		opacity: 0.1;
 	}
 }
 
@@ -129,18 +113,30 @@ figure.wp-block-image:not(.wp-block) {
 	text-align: center;
 }
 
+// Relatively position the alignment container to support the content resizer.
+.wp-block[data-align]:has(> .wp-block-image) {
+	position: relative;
+}
+
 .wp-block-image__crop-area {
 	position: relative;
 	max-width: 100%;
 	width: 100%;
 	overflow: hidden;
 
-	// This removes the border from the img within the image cropper so it
-	// can be applied to the cropper itself. This then allows the image to be
-	// cropped within the visual border providing more accurate editing and
-	// smoother UX.
-	.reactEasyCrop_Container .reactEasyCrop_Image {
-		border: none;
+	.reactEasyCrop_Container {
+		// The linked Image block has `pointer-events: none` applied. Override it
+		// here to enable the crop action.
+		pointer-events: auto;
+
+		// This removes the border from the img within the image cropper so it
+		// can be applied to the cropper itself. This then allows the image to be
+		// cropped within the visual border providing more accurate editing and
+		// smoother UX.
+		.reactEasyCrop_Image {
+			border: none;
+			border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
+		}
 	}
 }
 
@@ -161,28 +157,13 @@ figure.wp-block-image:not(.wp-block) {
 		min-width: 260px;
 		overflow: visible !important;
 	}
-
-	.components-range-control {
-		flex: 1;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		margin-bottom: 0;
-		flex-direction: column;
-		align-items: flex-start;
-	}
 }
 
-.wp-block-image__aspect-ratio {
-	height: $grid-unit-60 - $border-width - $border-width;
-	margin-bottom: -$grid-unit-10;
-	display: flex;
-	align-items: center;
+.wp-block-image__toolbar_content_textarea__container {
+	padding: $grid-unit;
+}
 
-	.components-button {
-		width: $button-size;
-		padding-left: 0;
-		padding-right: 0;
-	}
+.wp-block-image__toolbar_content_textarea {
+	// Corresponds to the size of the textarea in the block inspector.
+	width: 250px;
 }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1e4881181701b4..b4d269f9678221 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -1,91 +1,269 @@
-/**
- * External dependencies
- */
-import { get, filter, isEmpty, map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
 	ExternalLink,
-	PanelBody,
 	ResizableBox,
 	Spinner,
 	TextareaControl,
 	TextControl,
 	ToolbarButton,
+	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUseCustomUnits as useCustomUnits,
+	Placeholder,
+	MenuItem,
+	ToolbarItem,
+	DropdownMenu,
+	Popover,
 } from '@wordpress/components';
-import { useViewportMatch, usePrevious } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
-	RichText,
-	__experimentalImageSizeControl as ImageSizeControl,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
-	BlockAlignmentControl,
+	useSettings,
 	__experimentalImageEditor as ImageEditor,
-	__experimentalImageEditingProvider as ImageEditingProvider,
-	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	privateApis as blockEditorPrivateApis,
+	BlockSettingsMenuControls,
 } from '@wordpress/block-editor';
-import {
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-	useCallback,
-} from '@wordpress/element';
-import { __, sprintf, isRTL } from '@wordpress/i18n';
+import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
-import {
-	createBlock,
-	getDefaultBlockName,
-	switchToBlockType,
-} from '@wordpress/blocks';
-import {
-	crop,
-	overlayText,
-	upload,
-	caption as captionIcon,
-} from '@wordpress/icons';
+import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
+import { crop, overlayText, upload, chevronDown } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
-import useClientWidth from './use-client-width';
 import { isExternalImage } from './edit';
+import { Caption } from '../utils/caption';
 
 /**
  * Module constants
  */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
+import { evalAspectRatio } from './utils';
+
+const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
+
+const scaleOptions = [
+	{
+		value: 'cover',
+		label: _x( 'Cover', 'Scale option for dimensions control' ),
+		help: __( 'Image covers the space evenly.' ),
+	},
+	{
+		value: 'contain',
+		label: _x( 'Contain', 'Scale option for dimensions control' ),
+		help: __( 'Image is contained without distortion.' ),
+	},
+];
+
+const WRITEMODE_POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+// If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles.
+const ImageWrapper = ( { href, children } ) => {
+	if ( ! href ) {
+		return children;
+	}
+	return (
+		<a
+			href={ href }
+			onClick={ ( event ) => event.preventDefault() }
+			aria-disabled
+			style={ {
+				// When the Image block is linked,
+				// it's wrapped with a disabled <a /> tag.
+				// Restore cursor style so it doesn't appear 'clickable'
+				// and remove pointer events. Safari needs the display property.
+				pointerEvents: 'none',
+				cursor: 'default',
+				display: 'inline',
+			} }
+		>
+			{ children }
+		</a>
+	);
+};
+
+function ContentOnlyControls( {
+	attributes,
+	setAttributes,
+	lockAltControls,
+	lockAltControlsMessage,
+	lockTitleControls,
+	lockTitleControlsMessage,
+} ) {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const [ isAltDialogOpen, setIsAltDialogOpen ] = useState( false );
+	const [ isTitleDialogOpen, setIsTitleDialogOpen ] = useState( false );
+	return (
+		<>
+			<ToolbarItem ref={ setPopoverAnchor }>
+				{ ( toggleProps ) => (
+					<DropdownMenu
+						icon={ chevronDown }
+						/* translators: button label text should, if possible, be under 16 characters. */
+						label={ __( 'More' ) }
+						toggleProps={ {
+							...toggleProps,
+							description: __( 'Displays more controls.' ),
+						} }
+						popoverProps={ WRITEMODE_POPOVER_PROPS }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuItem
+									onClick={ () => {
+										setIsAltDialogOpen( true );
+										onClose();
+									} }
+									aria-haspopup="dialog"
+								>
+									{ _x(
+										'Alternative text',
+										'Alternative text for an image. Block toolbar label, a low character count is preferred.'
+									) }
+								</MenuItem>
+								<MenuItem
+									onClick={ () => {
+										setIsTitleDialogOpen( true );
+										onClose();
+									} }
+									aria-haspopup="dialog"
+								>
+									{ __( 'Title text' ) }
+								</MenuItem>
+							</>
+						) }
+					</DropdownMenu>
+				) }
+			</ToolbarItem>
+			{ isAltDialogOpen && (
+				<Popover
+					placement="bottom-start"
+					anchor={ popoverAnchor }
+					onClose={ () => setIsAltDialogOpen( false ) }
+					offset={ 13 }
+					variant="toolbar"
+				>
+					<div className="wp-block-image__toolbar_content_textarea__container">
+						<TextareaControl
+							className="wp-block-image__toolbar_content_textarea"
+							label={ __( 'Alternative text' ) }
+							value={ attributes.alt || '' }
+							onChange={ ( value ) =>
+								setAttributes( { alt: value } )
+							}
+							disabled={ lockAltControls }
+							help={
+								lockAltControls ? (
+									<>{ lockAltControlsMessage }</>
+								) : (
+									<>
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
+											{ __(
+												'Describe the purpose of the image.'
+											) }
+										</ExternalLink>
+										<br />
+										{ __( 'Leave empty if decorative.' ) }
+									</>
+								)
+							}
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				</Popover>
+			) }
+			{ isTitleDialogOpen && (
+				<Popover
+					placement="bottom-start"
+					anchor={ popoverAnchor }
+					onClose={ () => setIsTitleDialogOpen( false ) }
+					offset={ 13 }
+					variant="toolbar"
+				>
+					<div className="wp-block-image__toolbar_content_textarea__container">
+						<TextControl
+							__next40pxDefaultSize
+							className="wp-block-image__toolbar_content_textarea"
+							__nextHasNoMarginBottom
+							label={ __( 'Title attribute' ) }
+							value={ attributes.title || '' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									title: value,
+								} )
+							}
+							disabled={ lockTitleControls }
+							help={
+								lockTitleControls ? (
+									<>{ lockTitleControlsMessage }</>
+								) : (
+									<>
+										{ __(
+											'Describe the role of this image on the page.'
+										) }
+										<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+											{ __(
+												'(Note: many devices and browsers do not display this text.)'
+											) }
+										</ExternalLink>
+									</>
+								)
+							}
+						/>
+					</div>
+				</Popover>
+			) }
+		</>
+	);
+}
 
 export default function Image( {
 	temporaryURL,
 	attributes,
 	setAttributes,
-	isSelected,
+	isSingleSelected,
 	insertBlocksAfter,
 	onReplace,
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
-	containerRef,
 	context,
 	clientId,
-	isContentLocked,
+	blockEditingMode,
+	parentLayoutType,
+	maxContentWidth,
 } ) {
 	const {
 		url = '',
 		alt,
-		caption,
 		align,
 		id,
 		href,
@@ -95,67 +273,51 @@ export default function Image( {
 		title,
 		width,
 		height,
+		aspectRatio,
+		scale,
 		linkTarget,
 		sizeSlug,
+		lightbox,
+		metadata,
 	} = attributes;
+
+	// The only supported unit is px, so we can parseInt to strip the px here.
+	const numericWidth = width ? parseInt( width, 10 ) : undefined;
+	const numericHeight = height ? parseInt( height, 10 ) : undefined;
+
 	const imageRef = useRef();
-	const prevCaption = usePrevious( caption );
-	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
-	const { getBlock } = useSelect( blockEditorStore );
+	const { getBlock, getSettings } = useSelect( blockEditorStore );
 
-	const { image, multiImageSelection } = useSelect(
+	const image = useSelect(
+		( select ) =>
+			id && isSingleSelected
+				? select( coreStore ).getMedia( id, { context: 'view' } )
+				: null,
+		[ id, isSingleSelected ]
+	);
+
+	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
 		( select ) => {
-			const { getMedia } = select( coreStore );
-			const { getMultiSelectedBlockClientIds, getBlockName } =
+			const { getBlockRootClientId, canInsertBlockType } =
 				select( blockEditorStore );
-			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+
+			const rootClientId = getBlockRootClientId( clientId );
+			const settings = getSettings();
+
 			return {
-				image:
-					id && isSelected
-						? getMedia( id, { context: 'view' } )
-						: null,
-				multiImageSelection:
-					multiSelectedClientIds.length &&
-					multiSelectedClientIds.every(
-						( _clientId ) =>
-							getBlockName( _clientId ) === 'core/image'
-					),
+				imageEditing: settings.imageEditing,
+				imageSizes: settings.imageSizes,
+				maxWidth: settings.maxWidth,
+				canInsertCover: canInsertBlockType(
+					'core/cover',
+					rootClientId
+				),
 			};
 		},
-		[ id, isSelected, clientId ]
+		[ clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockRootClientId,
-					getSettings,
-					canInsertBlockType,
-				} = select( blockEditorStore );
-
-				const rootClientId = getBlockRootClientId( clientId );
-				const settings = Object.fromEntries(
-					Object.entries( getSettings() ).filter( ( [ key ] ) =>
-						[
-							'imageEditing',
-							'imageSizes',
-							'maxWidth',
-							'mediaUpload',
-						].includes( key )
-					)
-				);
-
-				return {
-					...settings,
-					canInsertCover: canInsertBlockType(
-						'core/cover',
-						rootClientId
-					),
-				};
-			},
-			[ clientId ]
-		);
+
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -167,51 +329,45 @@ export default function Image( {
 	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
-	const clientWidth = useClientWidth( containerRef, [ align ] );
+	const [ hasImageErrored, setHasImageErrored ] = useState( false );
+	const hasNonContentControls = blockEditingMode === 'default';
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
 		allowResize &&
-		! isContentLocked &&
-		! ( isWideAligned && isLargeViewport );
-	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
-			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
-		),
-		( { name, slug } ) => ( { value: slug, label: name } )
-	);
+		hasNonContentControls &&
+		! isWideAligned &&
+		isLargeViewport;
+	const imageSizeOptions = imageSizes
+		.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,
 	// we can enable a button in the toolbar to upload the image.
 	useEffect( () => {
-		if ( ! isExternalImage( id, url ) || ! isSelected || externalBlob ) {
+		if (
+			! isExternalImage( id, url ) ||
+			! isSingleSelected ||
+			! getSettings().mediaUpload
+		) {
+			setExternalBlob();
+			return;
+		}
+
+		if ( externalBlob ) {
 			return;
 		}
 
 		window
-			.fetch( url )
+			// Avoid cache, which seems to help avoid CORS problems.
+			.fetch( url.includes( '?' ) ? url : url + '?' )
 			.then( ( response ) => response.blob() )
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
 			.catch( () => {} );
-	}, [ id, url, isSelected, externalBlob ] );
-
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
+	}, [ id, url, isSingleSelected, externalBlob ] );
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -243,19 +399,60 @@ export default function Image( {
 	}
 
 	function onImageError() {
+		setHasImageErrored( true );
+
 		// Check if there's an embed block that handles this URL, e.g., instagram URL.
 		// See: https://github.com/WordPress/gutenberg/pull/11472
 		const embedBlock = createUpgradedEmbedBlock( { attributes: { url } } );
-
 		if ( undefined !== embedBlock ) {
 			onReplace( embedBlock );
 		}
 	}
 
+	function onImageLoad( event ) {
+		setHasImageErrored( false );
+		setLoadedNaturalSize( {
+			loadedNaturalWidth: event.target?.naturalWidth,
+			loadedNaturalHeight: event.target?.naturalHeight,
+		} );
+	}
+
 	function onSetHref( props ) {
 		setAttributes( props );
 	}
 
+	function onSetLightbox( enable ) {
+		if ( enable && ! lightboxSetting?.enabled ) {
+			setAttributes( {
+				lightbox: { enabled: true },
+			} );
+		} else if ( ! enable && lightboxSetting?.enabled ) {
+			setAttributes( {
+				lightbox: { enabled: false },
+			} );
+		} else {
+			setAttributes( {
+				lightbox: undefined,
+			} );
+		}
+	}
+
+	function resetLightbox() {
+		// When deleting a link from an image while lightbox settings
+		// are enabled by default, we should disable the lightbox,
+		// otherwise the resulting UX looks like a mistake.
+		// See https://github.com/WordPress/gutenberg/pull/59890/files#r1532286123.
+		if ( lightboxSetting?.enabled && lightboxSetting?.allowEditing ) {
+			setAttributes( {
+				lightbox: { enabled: false },
+			} );
+		} else {
+			setAttributes( {
+				lightbox: undefined,
+			} );
+		}
+	}
+
 	function onSetTitle( value ) {
 		// This is the HTML title attribute, separate from the media object
 		// title.
@@ -267,25 +464,22 @@ export default function Image( {
 	}
 
 	function updateImage( newSizeSlug ) {
-		const newUrl = get( image, [
-			'media_details',
-			'sizes',
-			newSizeSlug,
-			'source_url',
-		] );
+		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
 		if ( ! newUrl ) {
 			return null;
 		}
 
 		setAttributes( {
 			url: newUrl,
-			width: undefined,
-			height: undefined,
 			sizeSlug: newSizeSlug,
 		} );
 	}
 
 	function uploadExternal() {
+		const { mediaUpload } = getSettings();
+		if ( ! mediaUpload ) {
+			return;
+		}
 		mediaUpload( {
 			filesList: [ externalBlob ],
 			onFileChange( [ img ] ) {
@@ -307,27 +501,18 @@ export default function Image( {
 		} );
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	useEffect( () => {
-		if ( ! isSelected ) {
+		if ( ! isSingleSelected ) {
 			setIsEditingImage( false );
-			if ( ! caption ) {
-				setShowCaption( false );
-			}
 		}
-	}, [ isSelected, caption ] );
+	}, [ isSingleSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
-	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
+	const allowCrop =
+		isSingleSelected &&
+		canEditImage &&
+		! isEditingImage &&
+		! isContentOnlyMode;
 
 	function switchToCover() {
 		replaceBlocks(
@@ -336,129 +521,356 @@ export default function Image( {
 		);
 	}
 
+	// TODO: Can allow more units after figuring out how they should interact
+	// with the ResizableBox and ImageEditor components. Calculations later on
+	// for those components are currently assuming px units.
+	const dimensionsUnitsOptions = useCustomUnits( {
+		availableUnits: [ 'px' ],
+	} );
+
+	const [ lightboxSetting ] = useSettings( 'lightbox' );
+
+	const showLightboxSetting =
+		// If a block-level override is set, we should give users the option to
+		// remove that override, even if the lightbox UI is disabled in the settings.
+		( !! lightbox && lightbox?.enabled !== lightboxSetting?.enabled ) ||
+		lightboxSetting?.allowEditing;
+
+	const lightboxChecked =
+		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
+
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const dimensionsControl = (
+		<DimensionsTool
+			value={ { width, height, scale, aspectRatio } }
+			onChange={ ( {
+				width: newWidth,
+				height: newHeight,
+				scale: newScale,
+				aspectRatio: newAspectRatio,
+			} ) => {
+				// Rebuilding the object forces setting `undefined`
+				// for values that are removed since setAttributes
+				// doesn't do anything with keys that aren't set.
+				setAttributes( {
+					// CSS includes `height: auto`, but we need
+					// `width: auto` to fix the aspect ratio when
+					// only height is set due to the width and
+					// height attributes set via the server.
+					width: ! newWidth && newHeight ? 'auto' : newWidth,
+					height: newHeight,
+					scale: newScale,
+					aspectRatio: newAspectRatio,
+				} );
+			} }
+			defaultScale="cover"
+			defaultAspectRatio="auto"
+			scaleOptions={ scaleOptions }
+			unitsOptions={ dimensionsUnitsOptions }
+		/>
+	);
+
+	const aspectRatioControl = (
+		<DimensionsTool
+			value={ { aspectRatio } }
+			onChange={ ( { aspectRatio: newAspectRatio } ) => {
+				setAttributes( {
+					aspectRatio: newAspectRatio,
+					scale: 'cover',
+				} );
+			} }
+			defaultAspectRatio="auto"
+			tools={ [ 'aspectRatio' ] }
+		/>
+	);
+
+	const resetAll = () => {
+		setAttributes( {
+			alt: undefined,
+			width: undefined,
+			height: undefined,
+			scale: undefined,
+			aspectRatio: undefined,
+			lightbox: undefined,
+		} );
+	};
+
+	const sizeControls = (
+		<InspectorControls>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ resetAll }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				{ isResizable &&
+					( parentLayoutType === 'grid'
+						? aspectRatioControl
+						: dimensionsControl ) }
+			</ToolsPanel>
+		</InspectorControls>
+	);
+
+	const arePatternOverridesEnabled =
+		metadata?.bindings?.__default?.source === 'core/pattern-overrides';
+
+	const {
+		lockUrlControls = false,
+		lockHrefControls = false,
+		lockAltControls = false,
+		lockAltControlsMessage,
+		lockTitleControls = false,
+		lockTitleControlsMessage,
+		lockCaption = false,
+	} = useSelect(
+		( select ) => {
+			if ( ! isSingleSelected ) {
+				return {};
+			}
+			const {
+				url: urlBinding,
+				alt: altBinding,
+				title: titleBinding,
+			} = metadata?.bindings || {};
+			const hasParentPattern = !! context[ 'pattern/overrides' ];
+			const urlBindingSource = getBlockBindingsSource(
+				urlBinding?.source
+			);
+			const altBindingSource = getBlockBindingsSource(
+				altBinding?.source
+			);
+			const titleBindingSource = getBlockBindingsSource(
+				titleBinding?.source
+			);
+			return {
+				lockUrlControls:
+					!! urlBinding &&
+					! urlBindingSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: urlBinding?.args,
+					} ),
+				lockHrefControls:
+					// Disable editing the link of the URL if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the link on the frontend.
+					hasParentPattern || arePatternOverridesEnabled,
+				lockCaption:
+					// Disable editing the caption if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the caption on the frontend.
+					hasParentPattern,
+				lockAltControls:
+					!! altBinding &&
+					! altBindingSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: altBinding?.args,
+					} ),
+				lockAltControlsMessage: altBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							altBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
+				lockTitleControls:
+					!! titleBinding &&
+					! titleBindingSource?.canUserEditValue?.( {
+						select,
+						context,
+						args: titleBinding?.args,
+					} ),
+				lockTitleControlsMessage: titleBindingSource?.label
+					? sprintf(
+							/* translators: %s: Label of the bindings source. */
+							__( 'Connected to %s' ),
+							titleBindingSource.label
+					  )
+					: __( 'Connected to dynamic data' ),
+			};
+		},
+		[
+			arePatternOverridesEnabled,
+			context,
+			isSingleSelected,
+			metadata?.bindings,
+		]
+	);
+
+	const showUrlInput =
+		isSingleSelected &&
+		! isEditingImage &&
+		! lockHrefControls &&
+		! lockUrlControls;
+
+	const showCoverControls = isSingleSelected && canInsertCover;
+
+	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+
+	const mediaReplaceFlow = isSingleSelected &&
+		! isEditingImage &&
+		! lockUrlControls && (
+			// For contentOnly mode, put this button in its own area so it has borders around it.
+			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*"
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
+					onReset={ () => onSelectImage( undefined ) }
+				/>
+			</BlockControls>
+		);
+
 	const controls = (
 		<>
-			<BlockControls group="block">
-				{ ! isContentLocked && (
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				) }
-				{ ! isContentLocked && (
-					<ToolbarButton
-						onClick={ () => {
-							setShowCaption( ! showCaption );
-							if ( showCaption && caption ) {
-								setAttributes( { caption: undefined } );
-							}
-						} }
-						icon={ captionIcon }
-						isPressed={ showCaption }
-						label={
-							showCaption
-								? __( 'Remove caption' )
-								: __( 'Add caption' )
-						}
-					/>
-				) }
-				{ ! multiImageSelection && ! isEditingImage && (
-					<ImageURLInputUI
-						url={ href || '' }
-						onChangeUrl={ onSetHref }
-						linkDestination={ linkDestination }
-						mediaUrl={ ( image && image.source_url ) || url }
-						mediaLink={ image && image.link }
-						linkTarget={ linkTarget }
-						linkClass={ linkClass }
-						rel={ rel }
-					/>
-				) }
-				{ allowCrop && (
-					<ToolbarButton
-						onClick={ () => setIsEditingImage( true ) }
-						icon={ crop }
-						label={ __( 'Crop' ) }
-					/>
-				) }
-				{ externalBlob && (
-					<ToolbarButton
-						onClick={ uploadExternal }
-						icon={ upload }
-						label={ __( 'Upload external image' ) }
-					/>
-				) }
-				{ ! multiImageSelection && canInsertCover && (
-					<ToolbarButton
-						icon={ overlayText }
-						label={ __( 'Add text over image' ) }
-						onClick={ switchToCover }
-					/>
-				) }
-			</BlockControls>
-			{ ! multiImageSelection && ! isEditingImage && (
-				<BlockControls group="other">
-					<MediaReplaceFlow
-						mediaId={ id }
-						mediaURL={ url }
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						accept="image/*"
-						onSelect={ onSelectImage }
-						onSelectURL={ onSelectURL }
-						onError={ onUploadError }
+			{ showBlockControls && (
+				<BlockControls group="block">
+					{ showUrlInput && (
+						<ImageURLInputUI
+							url={ href || '' }
+							onChangeUrl={ onSetHref }
+							linkDestination={ linkDestination }
+							mediaUrl={ ( image && image.source_url ) || url }
+							mediaLink={ image && image.link }
+							linkTarget={ linkTarget }
+							linkClass={ linkClass }
+							rel={ rel }
+							showLightboxSetting={ showLightboxSetting }
+							lightboxEnabled={ lightboxChecked }
+							onSetLightbox={ onSetLightbox }
+							resetLightbox={ resetLightbox }
+						/>
+					) }
+					{ allowCrop && (
+						<ToolbarButton
+							onClick={ () => setIsEditingImage( true ) }
+							icon={ crop }
+							label={ __( 'Crop' ) }
+						/>
+					) }
+					{ showCoverControls && (
+						<ToolbarButton
+							icon={ overlayText }
+							label={ __( 'Add text over image' ) }
+							onClick={ switchToCover }
+						/>
+					) }
+				</BlockControls>
+			) }
+			{ isSingleSelected && externalBlob && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ uploadExternal }
+							icon={ upload }
+							label={ __( 'Upload to Media Library' ) }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			{ isContentOnlyMode && (
+				// Add some extra controls for content attributes when content only mode is active.
+				// With content only mode active, the inspector is hidden, so users need another way
+				// to edit these attributes.
+				<BlockControls group="block">
+					<ContentOnlyControls
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						lockAltControls={ lockAltControls }
+						lockAltControlsMessage={ lockAltControlsMessage }
+						lockTitleControls={ lockTitleControls }
+						lockTitleControlsMessage={ lockTitleControlsMessage }
 					/>
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					{ ! multiImageSelection && (
-						<TextareaControl
-							label={ __( 'Alt text (alternative text)' ) }
-							value={ alt }
-							onChange={ updateAlt }
-							help={
-								<>
-									<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-										{ __(
-											'Describe the purpose of the image'
-										) }
-									</ExternalLink>
-									{ __(
-										'Leave empty if the image is purely decorative.'
-									) }
-								</>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ resetAll }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ isSingleSelected && (
+						<ToolsPanelItem
+							label={ __( 'Alternative text' ) }
+							isShownByDefault
+							hasValue={ () => !! alt }
+							onDeselect={ () =>
+								setAttributes( { alt: undefined } )
 							}
+						>
+							<TextareaControl
+								label={ __( 'Alternative text' ) }
+								value={ alt || '' }
+								onChange={ updateAlt }
+								readOnly={ lockAltControls }
+								help={
+									lockAltControls ? (
+										<>{ lockAltControlsMessage }</>
+									) : (
+										<>
+											<ExternalLink
+												href={
+													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+													__(
+														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+													)
+												}
+											>
+												{ __(
+													'Describe the purpose of the image.'
+												) }
+											</ExternalLink>
+											<br />
+											{ __(
+												'Leave empty if decorative.'
+											) }
+										</>
+									)
+								}
+								__nextHasNoMarginBottom
+							/>
+						</ToolsPanelItem>
+					) }
+					{ isResizable &&
+						( parentLayoutType === 'grid'
+							? aspectRatioControl
+							: dimensionsControl ) }
+					{ !! imageSizeOptions.length && (
+						<ResolutionTool
+							value={ sizeSlug }
+							onChange={ updateImage }
+							options={ imageSizeOptions }
 						/>
 					) }
-					<ImageSizeControl
-						onChangeImage={ updateImage }
-						onChange={ ( value ) => setAttributes( value ) }
-						slug={ sizeSlug }
-						width={ width }
-						height={ height }
-						imageSizeOptions={ imageSizeOptions }
-						isResizable={ isResizable }
-						imageWidth={ naturalWidth }
-						imageHeight={ naturalHeight }
-					/>
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
+					readOnly={ lockTitleControls }
 					help={
-						<>
-							{ __(
-								'Describe the role of this image on the page.'
-							) }
-							<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+						lockTitleControls ? (
+							<>{ lockTitleControlsMessage }</>
+						) : (
+							<>
 								{ __(
-									'(Note: many devices and browsers do not display this text.)'
+									'Describe the role of this image on the page.'
 								) }
-							</ExternalLink>
-						</>
+								<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+									{ __(
+										'(Note: many devices and browsers do not display this text.)'
+									) }
+								</ExternalLink>
+							</>
+						)
 					}
 				/>
 			</InspectorControls>
@@ -481,65 +893,100 @@ export default function Image( {
 	}
 
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
-	const hasCustomBorder =
-		!! borderProps.className || ! isEmpty( borderProps.style );
 
-	let img = (
-		// Disable reason: Image itself is not meant to be interactive, but
-		// should direct focus to block.
-		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-		<>
-			<img
-				src={ temporaryURL || url }
-				alt={ defaultedAlt }
-				onError={ () => onImageError() }
-				onLoad={ ( event ) => {
-					setLoadedNaturalSize( {
-						loadedNaturalWidth: event.target?.naturalWidth,
-						loadedNaturalHeight: event.target?.naturalHeight,
-					} );
-				} }
-				ref={ imageRef }
-				className={ borderProps.className }
-				style={ borderProps.style }
-			/>
-			{ temporaryURL && <Spinner /> }
-		</>
-		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-	);
+	const { postType, postId, queryId } = context;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 
-	let imageWidthWithinContainer;
-	let imageHeightWithinContainer;
+	const [ , setFeaturedImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
 
-	if ( clientWidth && naturalWidth && naturalHeight ) {
-		const exceedMaxWidth = naturalWidth > clientWidth;
-		const ratio = naturalHeight / naturalWidth;
-		imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth;
-		imageHeightWithinContainer = exceedMaxWidth
-			? clientWidth * ratio
-			: naturalHeight;
-	}
+	let img =
+		temporaryURL && hasImageErrored ? (
+			// Show a placeholder during upload when the blob URL can't be loaded. This can
+			// happen when the user uploads a HEIC image in a browser that doesn't support them.
+			<Placeholder
+				className="wp-block-image__placeholder"
+				withIllustration
+			>
+				<Spinner />
+			</Placeholder>
+		) : (
+			// Disable reason: Image itself is not meant to be interactive, but
+			// should direct focus to block.
+			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+			<>
+				<img
+					src={ temporaryURL || url }
+					alt={ defaultedAlt }
+					onError={ onImageError }
+					onLoad={ onImageLoad }
+					ref={ imageRef }
+					className={ borderProps.className }
+					style={ {
+						width:
+							( width && height ) || aspectRatio
+								? '100%'
+								: undefined,
+						height:
+							( width && height ) || aspectRatio
+								? '100%'
+								: undefined,
+						objectFit: scale,
+						...borderProps.style,
+						...shadowProps.style,
+					} }
+				/>
+				{ temporaryURL && <Spinner /> }
+			</>
+			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+		);
 
 	if ( canEditImage && isEditingImage ) {
 		img = (
-			<ImageEditor
-				borderProps={ isRounded ? undefined : borderProps }
-				url={ url }
-				width={ width }
-				height={ height }
-				clientWidth={ clientWidth }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-			/>
+			<ImageWrapper href={ href }>
+				<ImageEditor
+					id={ id }
+					url={ url }
+					width={ numericWidth }
+					height={ numericHeight }
+					naturalHeight={ naturalHeight }
+					naturalWidth={ naturalWidth }
+					onSaveImage={ ( imageAttributes ) =>
+						setAttributes( imageAttributes )
+					}
+					onFinishEditing={ () => {
+						setIsEditingImage( false );
+					} }
+					borderProps={ isRounded ? undefined : borderProps }
+				/>
+			</ImageWrapper>
+		);
+	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
+		img = (
+			<div style={ { width, height, aspectRatio } }>
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
+			</div>
 		);
-	} else if ( ! isResizable || ! imageWidthWithinContainer ) {
-		img = <div style={ { width, height } }>{ img }</div>;
 	} else {
-		const currentWidth = width || imageWidthWithinContainer;
-		const currentHeight = height || imageHeightWithinContainer;
+		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );
+		const customRatio = numericWidth / numericHeight;
+		const naturalRatio = naturalWidth / naturalHeight;
+		const ratio = numericRatio || customRatio || naturalRatio || 1;
+		const currentWidth =
+			! numericWidth && numericHeight
+				? numericHeight * ratio
+				: numericWidth;
+		const currentHeight =
+			! numericHeight && numericWidth
+				? numericWidth / ratio
+				: numericHeight;
 
-		const ratio = naturalWidth / naturalHeight;
 		const minWidth =
 			naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
 		const minHeight =
@@ -555,6 +1002,7 @@ export default function Image( {
 		// @todo It would be good to revisit this once a content-width variable
 		// becomes available.
 		const maxWidthBuffer = maxWidth * 2.5;
+		const maxResizeWidth = maxContentWidth || maxWidthBuffer;
 
 		let showRightHandle = false;
 		let showLeftHandle = false;
@@ -584,19 +1032,26 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-
 		img = (
 			<ResizableBox
+				style={ {
+					display: 'block',
+					objectFit: scale,
+					aspectRatio:
+						! width && ! height && aspectRatio
+							? aspectRatio
+							: undefined,
+				} }
 				size={ {
-					width: width ?? 'auto',
-					height: height && ! hasCustomBorder ? height : 'auto',
+					width: currentWidth ?? 'auto',
+					height: currentHeight ?? 'auto',
 				} }
-				showHandle={ isSelected }
+				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
+				maxWidth={ maxResizeWidth }
 				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
+				maxHeight={ maxResizeWidth / ratio }
+				lockAspectRatio={ ratio }
 				enable={ {
 					top: false,
 					right: showRightHandle,
@@ -604,58 +1059,100 @@ export default function Image( {
 					left: showLeftHandle,
 				} }
 				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop={ ( event, direction, elt ) => {
 					onResizeStop();
+
+					// Clear hardcoded width if the resized width is close to the max-content width.
+					if (
+						maxContentWidth &&
+						// Only do this if the image is bigger than the container to prevent it from being squished.
+						// TODO: Remove this check if the image support setting 100% width.
+						naturalWidth >= maxContentWidth &&
+						Math.abs( elt.offsetWidth - maxContentWidth ) < 10
+					) {
+						setAttributes( {
+							width: undefined,
+							height: undefined,
+						} );
+						return;
+					}
+
+					// Since the aspect ratio is locked when resizing, we can
+					// use the width of the resized element to calculate the
+					// height in CSS to prevent stretching when the max-width
+					// is reached.
 					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
+						width: `${ elt.offsetWidth }px`,
+						height: 'auto',
+						aspectRatio:
+							ratio === naturalRatio
+								? undefined
+								: String( ratio ),
 					} );
 				} }
+				resizeRatio={ align === 'center' ? 2 : 1 }
 			>
-				{ img }
+				<ImageWrapper href={ href }>{ img }</ImageWrapper>
 			</ResizableBox>
 		);
 	}
 
-	return (
-		<ImageEditingProvider
-			id={ id }
-			url={ url }
-			naturalWidth={ naturalWidth }
-			naturalHeight={ naturalHeight }
-			clientWidth={ clientWidth }
-			onSaveImage={ ( imageAttributes ) =>
-				setAttributes( imageAttributes )
+	if ( ! url && ! temporaryURL ) {
+		return (
+			<>
+				{ mediaReplaceFlow }
+				{ /* Add all controls if the image attributes are connected. */ }
+				{ metadata?.bindings ? controls : sizeControls }
+			</>
+		);
+	}
+
+	/**
+	 * Set the post's featured image with the current image.
+	 */
+	const setPostFeatureImage = () => {
+		setFeaturedImage( id );
+		createSuccessNotice( __( 'Post featured image updated.' ), {
+			type: 'snackbar',
+		} );
+	};
+
+	const featuredImageControl = (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds } ) =>
+				selectedClientIds.length === 1 &&
+				! isDescendentOfQueryLoop &&
+				postId &&
+				id &&
+				clientId === selectedClientIds[ 0 ] && (
+					<MenuItem onClick={ setPostFeatureImage }>
+						{ __( 'Set featured image' ) }
+					</MenuItem>
+				)
 			}
-			isEditing={ isEditingImage }
-			onFinishEditing={ () => setIsEditingImage( false ) }
-		>
-			{ /* Hide controls during upload to avoid component remount,
-				which causes duplicated image upload. */ }
-			{ ! temporaryURL && controls }
+		</BlockSettingsMenuControls>
+	);
+
+	return (
+		<>
+			{ mediaReplaceFlow }
+			{ controls }
+			{ featuredImageControl }
 			{ img }
-			{ showCaption &&
-				( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						ref={ captionRef }
-						tagName="figcaption"
-						aria-label={ __( 'Image caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
-		</ImageEditingProvider>
+
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSingleSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				label={ __( 'Image caption text' ) }
+				showToolbarButton={
+					isSingleSelected &&
+					hasNonContentControls &&
+					! arePatternOverridesEnabled
+				}
+				readOnly={ lockCaption }
+			/>
+		</>
 	);
 }
diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
index 1477fa99c702c5..68625bd77cc873 100644
--- a/packages/block-library/src/image/index.js
+++ b/packages/block-library/src/image/index.js
@@ -29,6 +29,12 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			const { caption, alt, url } = attributes;
 
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 9a9f175556e814..1a5fae7ce9cbb7 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -9,27 +9,312 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array  $attributes The block attributes.
- * @param  string $content    The block content.
- * @return string Returns the block content with the data-id attribute added.
+ * @since 5.9.0
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The block object.
+ *
+ * @return string The block content with the data-id attribute added.
  */
-function render_block_core_image( $attributes, $content ) {
+function render_block_core_image( $attributes, $content, $block ) {
+	if ( false === stripos( $content, '<img' ) ) {
+		return '';
+	}
+
+	$p = new WP_HTML_Tag_Processor( $content );
+
+	if ( ! $p->next_tag( 'img' ) || ! $p->get_attribute( 'src' ) ) {
+		return '';
+	}
+
+	$has_id_binding = isset( $attributes['metadata']['bindings']['id'] ) && isset( $attributes['id'] );
+
+	// Ensure the `wp-image-id` classname on the image block supports block bindings.
+	if ( $has_id_binding ) {
+		// If there's a mismatch with the 'wp-image-' class and the actual id, the id was
+		// probably overridden by block bindings. Update it to the correct value.
+		// See https://github.com/WordPress/gutenberg/issues/62886 for why this is needed.
+		$id                       = $attributes['id'];
+		$image_classnames         = $p->get_attribute( 'class' );
+		$class_with_binding_value = "wp-image-$id";
+		if ( is_string( $image_classnames ) && ! str_contains( $image_classnames, $class_with_binding_value ) ) {
+			$image_classnames = preg_replace( '/wp-image-(\d+)/', $class_with_binding_value, $image_classnames );
+			$p->set_attribute( 'class', $image_classnames );
+		}
+	}
+
+	// For backwards compatibility, the data-id html attribute is only set for
+	// image blocks nested in a gallery. Detect if the image is in a gallery by
+	// checking the data-id attribute.
+	// See the `block_core_gallery_data_id_backcompatibility` function.
 	if ( isset( $attributes['data-id'] ) ) {
-		// Add the data-id="$id" attribute to the img element
-		// to provide backwards compatibility for the Gallery Block,
-		// which now wraps Image Blocks within innerBlocks.
-		// The data-id attribute is added in a core/gallery `render_block_data` hook.
-		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
-		if ( ! str_contains( $content, $data_id_attribute ) ) {
-			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
+		// If there's a binding for the `id`, the `id` attribute is used for the
+		// value, since `data-id` does not support block bindings.
+		// Else the `data-id` is used for backwards compatibility, since
+		// third parties may be filtering its value.
+		$data_id = $has_id_binding ? $attributes['id'] : $attributes['data-id'];
+		$p->set_attribute( 'data-id', $data_id );
+	}
+
+	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
+
+	/*
+	 * If the lightbox is enabled and the image is not linked, adds the filter and
+	 * the JavaScript view file.
+	 */
+	if (
+		isset( $lightbox_settings ) &&
+		'none' === $link_destination &&
+		isset( $lightbox_settings['enabled'] ) &&
+		true === $lightbox_settings['enabled']
+	) {
+		wp_enqueue_script_module( '@wordpress/block-library/image/view' );
+
+		/*
+		 * This render needs to happen in a filter with priority 15 to ensure that
+		 * it runs after the duotone filter and that duotone styles are applied to
+		 * the image in the lightbox. Lightbox has to work with any plugins that
+		 * might use filters as well. Removing this can be considered in the future
+		 * if the way the blocks are rendered changes, or if a new kind of filter is
+		 * introduced.
+		 */
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
+	} else {
+		/*
+		 * Remove the filter if previously added by other Image blocks.
+		 */
+		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
+	}
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Adds the lightboxEnabled flag to the block data.
+ *
+ * This is used to determine whether the lightbox should be rendered or not.
+ *
+ * @since 6.4.0
+ *
+ * @param array $block Block data.
+ *
+ * @return array Filtered block data.
+ */
+function block_core_image_get_lightbox_settings( $block ) {
+	// Gets the lightbox setting from the block attributes.
+	if ( isset( $block['attrs']['lightbox'] ) ) {
+		$lightbox_settings = $block['attrs']['lightbox'];
+	}
+
+	if ( ! isset( $lightbox_settings ) ) {
+		$lightbox_settings = wp_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) );
+
+		// If not present in global settings, check the top-level global settings.
+		//
+		// NOTE: If no block-level settings are found, the previous call to
+		// `wp_get_global_settings` will return the whole `theme.json` structure in
+		// which case we can check if the "lightbox" key is present at the top-level
+		// of the global settings and use its value.
+		if ( isset( $lightbox_settings['lightbox'] ) ) {
+			$lightbox_settings = wp_get_global_settings( array( 'lightbox' ) );
 		}
 	}
-	return $content;
+
+	return $lightbox_settings ?? null;
+}
+
+/**
+ * Adds the directives and layout needed for the lightbox behavior.
+ *
+ * @since 6.4.0
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
+ *
+ * @return string Filtered block content.
+ */
+function block_core_image_render_lightbox( $block_content, $block ) {
+	/*
+	 * If there's no IMG tag in the block then return the given block content
+	 * as-is. There's nothing that this code can knowingly modify to add the
+	 * lightbox behavior.
+	 */
+	$p = new WP_HTML_Tag_Processor( $block_content );
+	if ( $p->next_tag( 'figure' ) ) {
+		$p->set_bookmark( 'figure' );
+	}
+	if ( ! $p->next_tag( 'img' ) ) {
+		return $block_content;
+	}
+
+	$alt              = $p->get_attribute( 'alt' );
+	$img_uploaded_src = $p->get_attribute( 'src' );
+	$img_class_names  = $p->get_attribute( 'class' );
+	$img_styles       = $p->get_attribute( 'style' );
+	$img_width        = 'none';
+	$img_height       = 'none';
+	$aria_label       = __( 'Enlarge image' );
+
+	if ( $alt ) {
+		/* translators: %s: Image alt text. */
+		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
+	}
+
+	if ( isset( $block['attrs']['id'] ) ) {
+		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
+		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
+		$img_width        = $img_metadata['width'] ?? 'none';
+		$img_height       = $img_metadata['height'] ?? 'none';
+	}
+
+	// Figure.
+	$p->seek( 'figure' );
+	$figure_class_names = $p->get_attribute( 'class' );
+	$figure_styles      = $p->get_attribute( 'style' );
+
+	// Create unique id and set the image metadata in the state.
+	$unique_image_id = uniqid();
+
+	wp_interactivity_state(
+		'core/image',
+		array(
+			'metadata' => array(
+				$unique_image_id => array(
+					'uploadedSrc'      => $img_uploaded_src,
+					'figureClassNames' => $figure_class_names,
+					'figureStyles'     => $figure_styles,
+					'imgClassNames'    => $img_class_names,
+					'imgStyles'        => $img_styles,
+					'targetWidth'      => $img_width,
+					'targetHeight'     => $img_height,
+					'scaleAttr'        => $block['attrs']['scale'] ?? false,
+					'ariaLabel'        => $aria_label,
+					'alt'              => $alt,
+				),
+			),
+		)
+	);
+
+	$p->add_class( 'wp-lightbox-container' );
+	$p->set_attribute( 'data-wp-interactive', 'core/image' );
+	$p->set_attribute(
+		'data-wp-context',
+		wp_json_encode(
+			array(
+				'imageId' => $unique_image_id,
+			),
+			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
+		)
+	);
+
+	// Image.
+	$p->next_tag( 'img' );
+	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
+	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
+	// Sets an event callback on the `img` because the `figure` element can also
+	// contain a caption, and we don't want to trigger the lightbox when the
+	// caption is clicked.
+	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
+	$p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );
+
+	$body_content = $p->get_updated_html();
+
+	// Adds a button alongside image in the body content.
+	$img = null;
+	preg_match( '/<img[^>]+>/', $body_content, $img );
+
+	$button =
+		$img[0]
+		. '<button
+			class="lightbox-trigger"
+			type="button"
+			aria-haspopup="dialog"
+			aria-label="' . esc_attr( $aria_label ) . '"
+			data-wp-init="callbacks.initTriggerButton"
+			data-wp-on-async--click="actions.showLightbox"
+			data-wp-style--right="state.imageButtonRight"
+			data-wp-style--top="state.imageButtonTop"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
+			</svg>
+		</button>';
+
+	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
+
+	add_action( 'wp_footer', 'block_core_image_print_lightbox_overlay' );
+
+	return $body_content;
 }
 
+/**
+ * @since 6.5.0
+ */
+function block_core_image_print_lightbox_overlay() {
+	$close_button_label = esc_attr__( 'Close' );
+
+	// If the current theme does NOT have a `theme.json`, or the colors are not
+	// defined, it needs to set the background color & close button color to some
+	// default values because it can't get them from the Global Styles.
+	$background_color   = '#fff';
+	$close_button_color = '#000';
+	if ( wp_theme_has_theme_json() ) {
+		$global_styles_color = wp_get_global_styles( array( 'color' ) );
+		if ( ! empty( $global_styles_color['background'] ) ) {
+			$background_color = esc_attr( $global_styles_color['background'] );
+		}
+		if ( ! empty( $global_styles_color['text'] ) ) {
+			$close_button_color = esc_attr( $global_styles_color['text'] );
+		}
+	}
+
+	echo <<<HTML
+		<div
+			class="wp-lightbox-overlay zoom"
+			data-wp-interactive="core/image"
+			data-wp-context='{}'
+			data-wp-bind--role="state.roleAttribute"
+			data-wp-bind--aria-label="state.currentImage.ariaLabel"
+			data-wp-bind--aria-modal="state.ariaModal"
+			data-wp-class--active="state.overlayEnabled"
+			data-wp-class--show-closing-animation="state.showClosingAnimation"
+			data-wp-watch="callbacks.setOverlayFocus"
+			data-wp-on--keydown="actions.handleKeydown"
+			data-wp-on-async--touchstart="actions.handleTouchStart"
+			data-wp-on--touchmove="actions.handleTouchMove"
+			data-wp-on-async--touchend="actions.handleTouchEnd"
+			data-wp-on-async--click="actions.hideLightbox"
+			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
+			data-wp-on-async-window--scroll="actions.handleScroll"
+			tabindex="-1"
+			>
+				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>
+				</button>
+				<div class="lightbox-image-container">
+					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
+						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
+					</figure>
+				</div>
+				<div class="lightbox-image-container">
+					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
+						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
+					</figure>
+				</div>
+				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
+				<style data-wp-text="state.overlayStyles"></style>
+		</div>
+HTML;
+}
 
 /**
  * Registers the `core/image` block on server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_image() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
index 872ea980d8cf84..69c26cde52a9cd 100644
--- a/packages/block-library/src/image/save.js
+++ b/packages/block-library/src/image/save.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetElementClassName,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -25,24 +25,31 @@ export default function save( { attributes } ) {
 		linkClass,
 		width,
 		height,
+		aspectRatio,
+		scale,
 		id,
 		linkTarget,
 		sizeSlug,
 		title,
 	} = attributes;
 
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 	const borderProps = getBorderClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
 
-	const classes = classnames( {
-		[ `align${ align }` ]: align,
+	const classes = clsx( {
+		// All other align classes are handled by block supports.
+		// `{ align: 'none' }` is unique to transforms for the image block.
+		alignnone: 'none' === align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
 		'has-custom-border':
-			!! borderProps.className || ! isEmpty( borderProps.style ),
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const imageClasses = classnames( borderProps.className, {
+	const imageClasses = clsx( borderProps.className, {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 
@@ -51,9 +58,14 @@ export default function save( { attributes } ) {
 			src={ url }
 			alt={ alt }
 			className={ imageClasses || undefined }
-			style={ borderProps.style }
-			width={ width }
-			height={ height }
+			style={ {
+				...borderProps.style,
+				...shadowProps.style,
+				aspectRatio,
+				objectFit: scale,
+				width,
+				height,
+			} }
 			title={ title }
 		/>
 	);
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 72ff28b93b67c2..8ca5795cfd911a 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -1,9 +1,36 @@
 .wp-block-image {
+
+	> a,
+	> figure > a {
+		display: inline-block;
+	}
+
 	img {
 		height: auto;
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+
+		@media (prefers-reduced-motion: no-preference) {
+			&.hide {
+				visibility: hidden;
+			}
+
+			&.show {
+				animation: show-content-image 0.4s;
+			}
+		}
+	}
+
+	// The following style maintains border radius application for deprecated
+	// image blocks that applied border radius to the outer `figure` element.
+	//
+	// See: https://github.com/WordPress/gutenberg/issues/47422
+	&[style*="border-radius"] {
+		> a,
+		img {
+			border-radius: inherit;
+		}
 	}
 
 	&.has-custom-border {
@@ -16,6 +43,11 @@
 		text-align: center;
 	}
 
+	&.alignfull > a,
+	&.alignwide > a {
+		width: 100%;
+	}
+
 	&.alignfull img,
 	&.alignwide img {
 		height: auto;
@@ -41,6 +73,7 @@
 		float: left;
 		/*rtl:ignore*/
 		margin-left: 0;
+		/*rtl:ignore*/
 		margin-right: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
@@ -51,6 +84,7 @@
 		float: right;
 		/*rtl:ignore*/
 		margin-right: 0;
+		/*rtl:ignore*/
 		margin-left: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
@@ -65,31 +99,23 @@
 	// Supply caption styles to images, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 
-	// Variations
-	&.is-style-rounded img,
-	.is-style-rounded img {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
-
 	// The following variation is deprecated.
 	// The CSS is kept here for the time being, to support blocks using the old variation.
+	// The selector is not scoped with `:root :where()` like global styles are to keep its
+	// specificity the same as it was when it was deprecated.
 	&.is-style-circle-mask img {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;
 
 		// If a browser supports it, we will switch to using a circular SVG mask.
-		// The stylelint override is necessary to use the SVG inline here.
 		@supports (mask-image: none) or (-webkit-mask-image: none) {
-			/* stylelint-disable */
+			/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 			mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
-			/* stylelint-enable */
 			mask-mode: alpha;
 			mask-repeat: no-repeat;
 			mask-size: contain;
@@ -97,44 +123,268 @@
 			border-radius: 0;
 		}
 	}
+}
+
+// Variations
+:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
+}
+
+.wp-block-image figure {
+	margin: 0;
+}
+
+.wp-lightbox-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	img {
+		cursor: zoom-in;
+	}
+
+	img:hover + button {
+		opacity: 1;
+	}
+
+	button {
+		opacity: 0;
+		border: none;
+		background-color: rgb(90 90 90 / 25%);
+		backdrop-filter: blur($grid-unit-20) saturate(180%);
+		cursor: zoom-in;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 20px;
+		height: 20px;
+		position: absolute;
+		z-index: 100;
+		top: 16px;
+		right: 16px;
+		text-align: center;
+		padding: 0;
+		border-radius: 4px;
+		transition: opacity 0.2s ease;
+
+		&:focus-visible {
+			outline: 3px auto rgb(90 90 90 / 25%);
+			outline: 3px auto -webkit-focus-ring-color;
+			outline-offset: 3px;
+		}
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		&:focus {
+			opacity: 1;
+		}
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background-color: rgb(90 90 90 / 25%);
+			border: none;
+		}
+	}
+}
+
+.wp-lightbox-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 100000;
+	overflow: hidden;
+	width: 100%;
+	height: 100vh;
+	box-sizing: border-box;
+	visibility: hidden;
+	cursor: zoom-out;
 
-	// The following is required to overcome WP Core applying styles that clear
-	// img borders with a higher specificity than those added by the border
-	// block support to provide a default border-style of solid when a border
-	// color or width has been set.
-	:where(.has-border-color) {
-		border-style: solid;
+	.close-button {
+		position: absolute;
+		top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20
+		right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20
+		padding: 0;
+		cursor: pointer;
+		z-index: 5000000;
+		min-width: 40px; // equivalent to $button-size-next-default-40px
+		min-height: 40px; // equivalent to $button-size-next-default-40px
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&:hover,
+		&:focus,
+		&:not(:hover):not(:active):not(.has-background) {
+			background: none;
+			border: none;
+		}
 	}
-	:where([style*="border-top-color"]) {
-		border-top-style: solid;
+
+	.lightbox-image-container {
+		position: absolute;
+		overflow: hidden;
+		top: 50%;
+		left: 50%;
+		transform-origin: top left;
+		transform: translate(-50%, -50%);
+		width: var(--wp--lightbox-container-width);
+		height: var(--wp--lightbox-container-height);
+		z-index: 9999999999;
 	}
-	:where([style*="border-right-color"]) {
-		border-right-style: solid;
+
+	.wp-block-image {
+		position: relative;
+		transform-origin: 0 0;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		justify-content: center;
+		align-items: center;
+		box-sizing: border-box;
+		z-index: 3000000;
+		margin: 0;
+
+		img {
+			min-width: var(--wp--lightbox-image-width);
+			min-height: var(--wp--lightbox-image-height);
+			width: var(--wp--lightbox-image-width);
+			height: var(--wp--lightbox-image-height);
+		}
+
+		figcaption {
+			display: none;
+		}
 	}
-	:where([style*="border-bottom-color"]) {
-		border-bottom-style: solid;
+
+	button {
+		border: none;
+		background: none;
 	}
-	:where([style*="border-left-color"]) {
-		border-left-style: solid;
+
+	.scrim {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 2000000;
+		background-color: rgb(255, 255, 255);
+		opacity: 0.9;
 	}
 
-	:where([style*="border-width"]) {
-		border-style: solid;
+	// When fading, make the image come in slightly slower
+	// or faster than the scrim to give a sense of depth.
+	&.active {
+		visibility: visible;
+		animation: both turn-on-visibility 0.25s;
+		img {
+			animation: both turn-on-visibility 0.35s;
+		}
 	}
-	:where([style*="border-top-width"]) {
-		border-top-style: solid;
+	&.show-closing-animation {
+		&:not(.active) {
+			animation: both turn-off-visibility 0.35s;
+			img {
+				animation: both turn-off-visibility 0.25s;
+			}
+		}
 	}
-	:where([style*="border-right-width"]) {
-		border-right-style: solid;
+
+	@media (prefers-reduced-motion: no-preference) {
+		&.zoom {
+			&.active {
+				opacity: 1;
+				visibility: visible;
+				animation: none;
+				.lightbox-image-container {
+					animation: lightbox-zoom-in 0.4s;
+					// Override fade animation for image
+					img {
+						animation: none;
+					}
+				}
+				.scrim {
+					animation: turn-on-visibility 0.4s forwards;
+				}
+			}
+			&.show-closing-animation {
+				&:not(.active) {
+					animation: none;
+					.lightbox-image-container {
+						animation: lightbox-zoom-out 0.4s;
+						// Override fade animation for image
+						img {
+							animation: none;
+						}
+					}
+					.scrim {
+						animation: turn-off-visibility 0.4s forwards;
+					}
+				}
+			}
+		}
 	}
-	:where([style*="border-bottom-width"]) {
-		border-bottom-style: solid;
+}
+
+@keyframes show-content-image {
+	0% {
+		visibility: hidden;
+	}
+	99% {
+		visibility: hidden;
 	}
-	:where([style*="border-left-width"]) {
-		border-left-style: solid;
+	100% {
+		visibility: visible;
 	}
 }
 
-.wp-block-image figure {
-	margin: 0;
+@keyframes turn-on-visibility {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes turn-off-visibility {
+	0% {
+		opacity: 1;
+		visibility: visible;
+	}
+	99% {
+		opacity: 0;
+		visibility: visible;
+	}
+	100% {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+@keyframes lightbox-zoom-in {
+	0% {
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+	}
+	100% {
+		transform: translate(-50%, -50%) scale(1, 1);
+	}
+}
+
+@keyframes lightbox-zoom-out {
+	0% {
+		visibility: visible;
+		transform: translate(-50%, -50%) scale(1, 1);
+	}
+	99% {
+		visibility: visible;
+	}
+	100% {
+		visibility: hidden;
+		transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
+	}
 }
diff --git a/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..338848fcae1c68
--- /dev/null
+++ b/packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image block transformations to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Image block transformations to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":1,"dimRatio":50,"style":{"color":{}}} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background wp-image-1" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Image block transformations to File block 1`] = `
+"<!-- wp:file {"id":1,"href":"https://cldup.com/cXyG__fTLN.jpg"} -->
+<div class="wp-block-file"><a href="https://cldup.com/cXyG__fTLN.jpg">Mountain</a><a href="https://cldup.com/cXyG__fTLN.jpg" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->"
+`;
+
+exports[`Image block transformations to Gallery block 1`] = `
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->"
+`;
+
+exports[`Image block transformations to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- /wp:image --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Image block transformations to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaId":1,"mediaType":"image"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js
index 2f8aa703ee2b62..5cf653321b2be0 100644
--- a/packages/block-library/src/image/test/edit.native.js
+++ b/packages/block-library/src/image/test/edit.native.js
@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	getEditorHtml,
 	render,
-	waitFor,
+	setupApiFetch,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -22,10 +22,10 @@ import {
 	sendMediaUpload,
 	subscribeMediaUpload,
 } from '@wordpress/react-native-bridge';
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
-import '@wordpress/jest-console';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -45,7 +45,16 @@ function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
 
-const apiFetchPromise = Promise.resolve( {} );
+const FETCH_MEDIA = {
+	request: {
+		path: `/wp/v2/media/1?context=edit`,
+		parse: false,
+	},
+	response: {
+		source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+		id: 1,
+	},
+};
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );
@@ -58,6 +67,18 @@ beforeAll( () => {
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 } );
 
+beforeEach( () => {
+	// Mock media fetch requests
+	setupApiFetch( [ FETCH_MEDIA ] );
+
+	// Invalidate `getMedia` resolutions to allow requesting to the API the same media id
+	dispatch( coreStore ).invalidateResolutionForStoreSelector( 'getMedia' );
+} );
+
+afterEach( () => {
+	apiFetch.mockReset();
+} );
+
 afterAll( () => {
 	getBlockTypes().forEach( ( { name } ) => {
 		unregisterBlockType( name );
@@ -78,10 +99,11 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -104,10 +126,11 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -130,10 +153,11 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -148,7 +172,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		await waitFor(
+		await act(
 			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
 		);
 
@@ -166,30 +190,21 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
+
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
-		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://github.com/react-navigation/react-navigation/issues/9701
-		await act( () =>
-			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
-		);
 		fireEvent.press( screen.getByText( 'None' ) );
-		fireEvent.press( screen.getByText( 'Media File' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
-		// Await asynchronous fetch of clipboard
-		await act( () => clipboardPromise );
 		fireEvent.changeText(
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
-		await waitFor( () => screen.getByText( 'Custom URL' ) );
-		fireEvent.press( screen.getByText( 'Custom URL' ) );
-		// Await asynchronous fetch of clipboard
-		await act( () => clipboardPromise );
+		fireEvent.press( await screen.findByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
@@ -208,10 +223,11 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is not fetched via `getMedia` due to the presence of query parameters in the URL.
+		expect( apiFetch ).not.toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
+		fireEvent.press( imageBlock );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
@@ -232,10 +248,10 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		const imageBlock = screen.getByLabelText( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
 		const settingsButton = screen.getByLabelText( 'Open Settings' );
@@ -263,10 +279,10 @@ describe( 'Image Block', () => {
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
-		const imageBlock = screen.getByLabelText( /Image Block/ );
+		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
 		const settingsButton = screen.getByLabelText( 'Open Settings' );
@@ -426,7 +442,7 @@ describe( 'Image Block', () => {
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 
-		fireEvent.press( screen.getByText( 'ADD IMAGE' ) );
+		fireEvent.press( screen.getByText( 'Add image' ) );
 		fireEvent.press( screen.getByText( 'WordPress Media Library' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":${ IMAGE.id },"sizeSlug":"large","linkDestination":"none"} -->
diff --git a/packages/block-library/src/image/test/transforms.native.js b/packages/block-library/src/image/test/transforms.native.js
new file mode 100644
index 00000000000000..f5b7bcdab97587
--- /dev/null
+++ b/packages/block-library/src/image/test/transforms.native.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Image';
+const initialHtml = `
+<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+
+const tranformsWithInnerBlocks = [ 'Gallery', 'Columns', 'Group' ];
+const nonMediaTransforms = [ 'File' ];
+const blockTransforms = [
+	'Cover',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+	...nonMediaTransforms,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: ! nonMediaTransforms.includes( blockTransform ),
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss
index d5b2cfb0e83e94..c89dd3334dd09a 100644
--- a/packages/block-library/src/image/theme.scss
+++ b/packages/block-library/src/image/theme.scss
@@ -1,4 +1,4 @@
-.wp-block-image figcaption {
+:root :where(.wp-block-image figcaption) {
 	@include caption-style-theme();
 }
 
diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js
index a96a93640292b5..347d2408280170 100644
--- a/packages/block-library/src/image/transforms.js
+++ b/packages/block-library/src/image/transforms.js
@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
-import { dispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
 
 export function stripFirstImage( attributes, { shortcode } ) {
 	const { body } = document.implementation.createHTMLDocument( '' );
@@ -123,6 +120,12 @@ const transforms = {
 						anchor,
 					}
 				);
+
+				if ( isBlobURL( attributes.url ) ) {
+					attributes.blob = attributes.url;
+					delete attributes.url;
+				}
+
 				return createBlock( 'core/image', attributes );
 			},
 		},
@@ -132,26 +135,6 @@ const transforms = {
 			// creating a new gallery.
 			type: 'files',
 			isMatch( files ) {
-				// The following check is intended to catch non-image files when dropped together with images.
-				if (
-					files.some(
-						( file ) => file.type.indexOf( 'image/' ) === 0
-					) &&
-					files.some(
-						( file ) => file.type.indexOf( 'image/' ) !== 0
-					)
-				) {
-					const { createErrorNotice } = dispatch( noticesStore );
-					createErrorNotice(
-						__(
-							'If uploading to a gallery all files need to be image formats'
-						),
-						{
-							id: 'gallery-transform-invalid-file',
-							type: 'snackbar',
-						}
-					);
-				}
 				return files.every(
 					( file ) => file.type.indexOf( 'image/' ) === 0
 				);
@@ -159,7 +142,7 @@ const transforms = {
 			transform( files ) {
 				const blocks = files.map( ( file ) => {
 					return createBlock( 'core/image', {
-						url: createBlobURL( file ),
+						blob: createBlobURL( file ),
 					} );
 				} );
 				return blocks;
diff --git a/packages/block-library/src/image/use-client-width.js b/packages/block-library/src/image/use-client-width.js
deleted file mode 100644
index ddbc53536bbffa..00000000000000
--- a/packages/block-library/src/image/use-client-width.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-export default function useClientWidth( ref, dependencies ) {
-	const [ clientWidth, setClientWidth ] = useState();
-
-	function calculateClientWidth() {
-		setClientWidth( ref.current?.clientWidth );
-	}
-
-	useEffect( calculateClientWidth, dependencies );
-	useEffect( () => {
-		const { defaultView } = ref.current.ownerDocument;
-
-		defaultView.addEventListener( 'resize', calculateClientWidth );
-
-		return () => {
-			defaultView.removeEventListener( 'resize', calculateClientWidth );
-		};
-	}, [] );
-
-	return clientWidth;
-}
diff --git a/packages/block-library/src/image/use-max-width-observer.js b/packages/block-library/src/image/use-max-width-observer.js
new file mode 100644
index 00000000000000..684392537fac7a
--- /dev/null
+++ b/packages/block-library/src/image/use-max-width-observer.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
+
+function useMaxWidthObserver() {
+	const [ contentResizeListener, { width } ] = useResizeObserver();
+	const observerRef = useRef();
+
+	const maxWidthObserver = (
+		<div
+			// Some themes set max-width on blocks.
+			className="wp-block"
+			aria-hidden="true"
+			style={ {
+				position: 'absolute',
+				inset: 0,
+				width: '100%',
+				height: 0,
+				margin: 0,
+			} }
+			ref={ observerRef }
+		>
+			{ contentResizeListener }
+		</div>
+	);
+
+	return [ maxWidthObserver, width ];
+}
+
+export { useMaxWidthObserver };
diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js
index 7d9cc53f3d051a..1541c3daac3aab 100644
--- a/packages/block-library/src/image/utils.js
+++ b/packages/block-library/src/image/utils.js
@@ -1,31 +1,40 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { isEmpty, get } from 'lodash';
+import { NEW_TAB_REL, ALLOWED_MEDIA_TYPES } from './constants';
 
 /**
- * Internal dependencies
+ * Evaluates a CSS aspect-ratio property value as a number.
+ *
+ * Degenerate or invalid ratios behave as 'auto'. And 'auto' ratios return NaN.
+ *
+ * @see https://drafts.csswg.org/css-sizing-4/#aspect-ratio
+ *
+ * @param {string} value CSS aspect-ratio property value.
+ * @return {number} Numerical aspect ratio or NaN if invalid.
  */
-import { NEW_TAB_REL } from './constants';
+export function evalAspectRatio( value ) {
+	const [ width, height = 1 ] = value.split( '/' ).map( Number );
+	const aspectRatio = width / height;
+	return aspectRatio === Infinity || aspectRatio === 0 ? NaN : aspectRatio;
+}
 
 export function removeNewTabRel( currentRel ) {
 	let newRel = currentRel;
 
-	if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
-		if ( ! isEmpty( newRel ) ) {
-			NEW_TAB_REL.forEach( ( relVal ) => {
-				const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
-				newRel = newRel.replace( regExp, '' );
-			} );
+	if ( currentRel !== undefined && newRel ) {
+		NEW_TAB_REL.forEach( ( relVal ) => {
+			const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
+			newRel = newRel.replace( regExp, '' );
+		} );
 
-			// Only trim if NEW_TAB_REL values was replaced.
-			if ( newRel !== currentRel ) {
-				newRel = newRel.trim();
-			}
+		// Only trim if NEW_TAB_REL values was replaced.
+		if ( newRel !== currentRel ) {
+			newRel = newRel.trim();
+		}
 
-			if ( isEmpty( newRel ) ) {
-				newRel = undefined;
-			}
+		if ( ! newRel ) {
+			newRel = undefined;
 		}
 	}
 
@@ -64,7 +73,7 @@ export function getUpdatedLinkTargetSettings( value, { rel } ) {
  * @param {string} size  Selected size slug to apply.
  */
 export function getImageSizeAttributes( image, size ) {
-	const url = get( image, [ 'media_details', 'sizes', size, 'source_url' ] );
+	const url = image?.media_details?.sizes?.[ size ]?.source_url;
 
 	if ( url ) {
 		return { url, width: undefined, height: undefined, sizeSlug: size };
@@ -72,3 +81,15 @@ export function getImageSizeAttributes( image, size ) {
 
 	return {};
 }
+
+/**
+ * Checks if the file has a valid file type.
+ *
+ * @param {File} file - The file to check.
+ * @return {boolean} - Returns true if the file has a valid file type, otherwise false.
+ */
+export function isValidFileType( file ) {
+	return ALLOWED_MEDIA_TYPES.some(
+		( mediaType ) => file.type.indexOf( mediaType ) === 0
+	);
+}
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
new file mode 100644
index 00000000000000..0bc0dfaacea1a2
--- /dev/null
+++ b/packages/block-library/src/image/view.js
@@ -0,0 +1,457 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+/**
+ * Tracks whether user is touching screen; used to differentiate behavior for
+ * touch and mouse input.
+ *
+ * @type {boolean}
+ */
+let isTouching = false;
+
+/**
+ * Tracks the last time the screen was touched; used to differentiate behavior
+ * for touch and mouse input.
+ *
+ * @type {number}
+ */
+let lastTouchTime = 0;
+
+const { state, actions, callbacks } = store(
+	'core/image',
+	{
+		state: {
+			currentImageId: null,
+			get currentImage() {
+				return state.metadata[ state.currentImageId ];
+			},
+			get overlayOpened() {
+				return state.currentImageId !== null;
+			},
+			get roleAttribute() {
+				return state.overlayOpened ? 'dialog' : null;
+			},
+			get ariaModal() {
+				return state.overlayOpened ? 'true' : null;
+			},
+			get enlargedSrc() {
+				return (
+					state.currentImage.uploadedSrc ||
+					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+				);
+			},
+			get figureStyles() {
+				return (
+					state.overlayOpened &&
+					`${ state.currentImage.figureStyles?.replace(
+						/margin[^;]*;?/g,
+						''
+					) };`
+				);
+			},
+			get imgStyles() {
+				return (
+					state.overlayOpened &&
+					`${ state.currentImage.imgStyles?.replace(
+						/;$/,
+						''
+					) }; object-fit:cover;`
+				);
+			},
+			get imageButtonRight() {
+				const { imageId } = getContext();
+				return state.metadata[ imageId ].imageButtonRight;
+			},
+			get imageButtonTop() {
+				const { imageId } = getContext();
+				return state.metadata[ imageId ].imageButtonTop;
+			},
+			get isContentHidden() {
+				const ctx = getContext();
+				return (
+					state.overlayEnabled && state.currentImageId === ctx.imageId
+				);
+			},
+			get isContentVisible() {
+				const ctx = getContext();
+				return (
+					! state.overlayEnabled &&
+					state.currentImageId === ctx.imageId
+				);
+			},
+		},
+		actions: {
+			showLightbox() {
+				const { imageId } = getContext();
+
+				// Bails out if the image has not loaded yet.
+				if ( ! state.metadata[ imageId ].imageRef?.complete ) {
+					return;
+				}
+
+				// Stores the positions of the scroll to fix it until the overlay is
+				// closed.
+				state.scrollTopReset = document.documentElement.scrollTop;
+				state.scrollLeftReset = document.documentElement.scrollLeft;
+
+				// Sets the current expanded image in the state and enables the overlay.
+				state.overlayEnabled = true;
+				state.currentImageId = imageId;
+
+				// Computes the styles of the overlay for the animation.
+				callbacks.setOverlayStyles();
+			},
+			hideLightbox() {
+				if ( state.overlayEnabled ) {
+					// Starts the overlay closing animation. The showClosingAnimation
+					// class is used to avoid showing it on page load.
+					state.showClosingAnimation = true;
+					state.overlayEnabled = false;
+
+					// Waits until the close animation has completed before allowing a
+					// user to scroll again. The duration of this animation is defined in
+					// the `styles.scss` file, but in any case we should wait a few
+					// milliseconds longer than the duration, otherwise a user may scroll
+					// too soon and cause the animation to look sloppy.
+					setTimeout( function () {
+						// Delays before changing the focus. Otherwise the focus ring will
+						// appear on Firefox before the image has finished animating, which
+						// looks broken.
+						state.currentImage.buttonRef.focus( {
+							preventScroll: true,
+						} );
+
+						// Resets the current image id to mark the overlay as closed.
+						state.currentImageId = null;
+					}, 450 );
+				}
+			},
+			handleKeydown( event ) {
+				if ( state.overlayEnabled ) {
+					// Focuses the close button when the user presses the tab key.
+					if ( event.key === 'Tab' ) {
+						event.preventDefault();
+						const { ref } = getElement();
+						ref.querySelector( 'button' ).focus();
+					}
+					// Closes the lightbox when the user presses the escape key.
+					if ( event.key === 'Escape' ) {
+						actions.hideLightbox();
+					}
+				}
+			},
+			handleTouchMove( event ) {
+				// On mobile devices, prevents triggering the scroll event because
+				// otherwise the page jumps around when it resets the scroll position.
+				// This also means that closing the lightbox requires that a user
+				// perform a simple tap. This may be changed in the future if there is a
+				// better alternative to override or reset the scroll position during
+				// swipe actions.
+				if ( state.overlayEnabled ) {
+					event.preventDefault();
+				}
+			},
+			handleTouchStart() {
+				isTouching = true;
+			},
+			handleTouchEnd() {
+				// Waits a few milliseconds before resetting to ensure that pinch to
+				// zoom works consistently on mobile devices when the lightbox is open.
+				lastTouchTime = Date.now();
+				isTouching = false;
+			},
+			handleScroll() {
+				// Prevents scrolling behaviors that trigger content shift while the
+				// lightbox is open. It would be better to accomplish through CSS alone,
+				// but using overflow: hidden is currently the only way to do so and
+				// that causes a layout to shift and prevents the zoom animation from
+				// working in some cases because it's not possible to account for the
+				// layout shift when doing the animation calculations. Instead, it uses
+				// JavaScript to prevent and reset the scrolling behavior.
+				if ( state.overlayOpened ) {
+					// Avoids overriding the scroll behavior on mobile devices because
+					// doing so breaks the pinch to zoom functionality, and users should
+					// be able to zoom in further on the high-res image.
+					if ( ! isTouching && Date.now() - lastTouchTime > 450 ) {
+						// It doesn't rely on `event.preventDefault()` to prevent scrolling
+						// because the scroll event can't be canceled, so it resets the
+						// position instead.
+						window.scrollTo(
+							state.scrollLeftReset,
+							state.scrollTopReset
+						);
+					}
+				}
+			},
+		},
+		callbacks: {
+			setOverlayStyles() {
+				if ( ! state.overlayEnabled ) {
+					return;
+				}
+
+				let {
+					naturalWidth,
+					naturalHeight,
+					offsetWidth: originalWidth,
+					offsetHeight: originalHeight,
+				} = state.currentImage.imageRef;
+				let { x: screenPosX, y: screenPosY } =
+					state.currentImage.imageRef.getBoundingClientRect();
+
+				// Natural ratio of the image clicked to open the lightbox.
+				const naturalRatio = naturalWidth / naturalHeight;
+				// Original ratio of the image clicked to open the lightbox.
+				let originalRatio = originalWidth / originalHeight;
+
+				// If it has object-fit: contain, recalculates the original sizes
+				// and the screen position without the blank spaces.
+				if ( state.currentImage.scaleAttr === 'contain' ) {
+					if ( naturalRatio > originalRatio ) {
+						const heightWithoutSpace = originalWidth / naturalRatio;
+						// Recalculates screen position without the top space.
+						screenPosY +=
+							( originalHeight - heightWithoutSpace ) / 2;
+						originalHeight = heightWithoutSpace;
+					} else {
+						const widthWithoutSpace = originalHeight * naturalRatio;
+						// Recalculates screen position without the left space.
+						screenPosX += ( originalWidth - widthWithoutSpace ) / 2;
+						originalWidth = widthWithoutSpace;
+					}
+				}
+				originalRatio = originalWidth / originalHeight;
+
+				// Typically, it uses the image's full-sized dimensions. If those
+				// dimensions have not been set (i.e. an external image with only one
+				// size), the image's dimensions in the lightbox are the same
+				// as those of the image in the content.
+				let imgMaxWidth = parseFloat(
+					state.currentImage.targetWidth !== 'none'
+						? state.currentImage.targetWidth
+						: naturalWidth
+				);
+				let imgMaxHeight = parseFloat(
+					state.currentImage.targetHeight !== 'none'
+						? state.currentImage.targetHeight
+						: naturalHeight
+				);
+
+				// Ratio of the biggest image stored in the database.
+				let imgRatio = imgMaxWidth / imgMaxHeight;
+				let containerMaxWidth = imgMaxWidth;
+				let containerMaxHeight = imgMaxHeight;
+				let containerWidth = imgMaxWidth;
+				let containerHeight = imgMaxHeight;
+
+				// Checks if the target image has a different ratio than the original
+				// one (thumbnail). Recalculates the width and height.
+				if ( naturalRatio.toFixed( 2 ) !== imgRatio.toFixed( 2 ) ) {
+					if ( naturalRatio > imgRatio ) {
+						// If the width is reached before the height, it keeps the maxWidth
+						// and recalculates the height unless the difference between the
+						// maxHeight and the reducedHeight is higher than the maxWidth,
+						// where it keeps the reducedHeight and recalculate the width.
+						const reducedHeight = imgMaxWidth / naturalRatio;
+						if ( imgMaxHeight - reducedHeight > imgMaxWidth ) {
+							imgMaxHeight = reducedHeight;
+							imgMaxWidth = reducedHeight * naturalRatio;
+						} else {
+							imgMaxHeight = imgMaxWidth / naturalRatio;
+						}
+					} else {
+						// If the height is reached before the width, it keeps the maxHeight
+						// and recalculate the width unlesss the difference between the
+						// maxWidth and the reducedWidth is higher than the maxHeight, where
+						// it keeps the reducedWidth and recalculate the height.
+						const reducedWidth = imgMaxHeight * naturalRatio;
+						if ( imgMaxWidth - reducedWidth > imgMaxHeight ) {
+							imgMaxWidth = reducedWidth;
+							imgMaxHeight = reducedWidth / naturalRatio;
+						} else {
+							imgMaxWidth = imgMaxHeight * naturalRatio;
+						}
+					}
+					containerWidth = imgMaxWidth;
+					containerHeight = imgMaxHeight;
+					imgRatio = imgMaxWidth / imgMaxHeight;
+
+					// Calculates the max size of the container.
+					if ( originalRatio > imgRatio ) {
+						containerMaxWidth = imgMaxWidth;
+						containerMaxHeight = containerMaxWidth / originalRatio;
+					} else {
+						containerMaxHeight = imgMaxHeight;
+						containerMaxWidth = containerMaxHeight * originalRatio;
+					}
+				}
+
+				// If the image has been pixelated on purpose, it keeps that size.
+				if (
+					originalWidth > containerWidth ||
+					originalHeight > containerHeight
+				) {
+					containerWidth = originalWidth;
+					containerHeight = originalHeight;
+				}
+
+				// Calculates the final lightbox image size and the scale factor.
+				// MaxWidth is either the window container (accounting for padding) or
+				// the image resolution.
+				let horizontalPadding = 0;
+				if ( window.innerWidth > 480 ) {
+					horizontalPadding = 80;
+				} else if ( window.innerWidth > 1920 ) {
+					horizontalPadding = 160;
+				}
+				const verticalPadding = 80;
+
+				const targetMaxWidth = Math.min(
+					window.innerWidth - horizontalPadding,
+					containerWidth
+				);
+				const targetMaxHeight = Math.min(
+					window.innerHeight - verticalPadding,
+					containerHeight
+				);
+				const targetContainerRatio = targetMaxWidth / targetMaxHeight;
+
+				if ( originalRatio > targetContainerRatio ) {
+					// If targetMaxWidth is reached before targetMaxHeight.
+					containerWidth = targetMaxWidth;
+					containerHeight = containerWidth / originalRatio;
+				} else {
+					// If targetMaxHeight is reached before targetMaxWidth.
+					containerHeight = targetMaxHeight;
+					containerWidth = containerHeight * originalRatio;
+				}
+
+				const containerScale = originalWidth / containerWidth;
+				const lightboxImgWidth =
+					imgMaxWidth * ( containerWidth / containerMaxWidth );
+				const lightboxImgHeight =
+					imgMaxHeight * ( containerHeight / containerMaxHeight );
+
+				// As of this writing, using the calculations above will render the
+				// lightbox with a small, erroneous whitespace on the left side of the
+				// image in iOS Safari, perhaps due to an inconsistency in how browsers
+				// handle absolute positioning and CSS transformation. In any case,
+				// adding 1 pixel to the container width and height solves the problem,
+				// though this can be removed if the issue is fixed in the future.
+				state.overlayStyles = `
+				:root {
+					--wp--lightbox-initial-top-position: ${ screenPosY }px;
+					--wp--lightbox-initial-left-position: ${ screenPosX }px;
+					--wp--lightbox-container-width: ${ containerWidth + 1 }px;
+					--wp--lightbox-container-height: ${ containerHeight + 1 }px;
+					--wp--lightbox-image-width: ${ lightboxImgWidth }px;
+					--wp--lightbox-image-height: ${ lightboxImgHeight }px;
+					--wp--lightbox-scale: ${ containerScale };
+					--wp--lightbox-scrollbar-width: ${
+						window.innerWidth - document.documentElement.clientWidth
+					}px;
+				}
+			`;
+			},
+			setButtonStyles() {
+				const { imageId } = getContext();
+				const { ref } = getElement();
+
+				state.metadata[ imageId ].imageRef = ref;
+				state.metadata[ imageId ].currentSrc = ref.currentSrc;
+
+				const {
+					naturalWidth,
+					naturalHeight,
+					offsetWidth,
+					offsetHeight,
+				} = ref;
+
+				// If the image isn't loaded yet, it can't calculate where the button
+				// should be.
+				if ( naturalWidth === 0 || naturalHeight === 0 ) {
+					return;
+				}
+
+				const figure = ref.parentElement;
+				const figureWidth = ref.parentElement.clientWidth;
+
+				// It needs special handling for the height because a caption will cause
+				// the figure to be taller than the image, which means it needs to
+				// account for that when calculating the placement of the button in the
+				// top right corner of the image.
+				let figureHeight = ref.parentElement.clientHeight;
+				const caption = figure.querySelector( 'figcaption' );
+				if ( caption ) {
+					const captionComputedStyle =
+						window.getComputedStyle( caption );
+					if (
+						! [ 'absolute', 'fixed' ].includes(
+							captionComputedStyle.position
+						)
+					) {
+						figureHeight =
+							figureHeight -
+							caption.offsetHeight -
+							parseFloat( captionComputedStyle.marginTop ) -
+							parseFloat( captionComputedStyle.marginBottom );
+					}
+				}
+
+				const buttonOffsetTop = figureHeight - offsetHeight;
+				const buttonOffsetRight = figureWidth - offsetWidth;
+
+				let imageButtonTop = buttonOffsetTop + 16;
+				let imageButtonRight = buttonOffsetRight + 16;
+
+				// In the case of an image with object-fit: contain, the size of the
+				// <img> element can be larger than the image itself, so it needs to
+				// calculate where to place the button.
+				if ( state.metadata[ imageId ].scaleAttr === 'contain' ) {
+					// Natural ratio of the image.
+					const naturalRatio = naturalWidth / naturalHeight;
+					// Offset ratio of the image.
+					const offsetRatio = offsetWidth / offsetHeight;
+
+					if ( naturalRatio >= offsetRatio ) {
+						// If it reaches the width first, it keeps the width and compute the
+						// height.
+						const referenceHeight = offsetWidth / naturalRatio;
+						imageButtonTop =
+							( offsetHeight - referenceHeight ) / 2 +
+							buttonOffsetTop +
+							16;
+						imageButtonRight = buttonOffsetRight + 16;
+					} else {
+						// If it reaches the height first, it keeps the height and compute
+						// the width.
+						const referenceWidth = offsetHeight * naturalRatio;
+						imageButtonTop = buttonOffsetTop + 16;
+						imageButtonRight =
+							( offsetWidth - referenceWidth ) / 2 +
+							buttonOffsetRight +
+							16;
+					}
+				}
+
+				state.metadata[ imageId ].imageButtonTop = imageButtonTop;
+				state.metadata[ imageId ].imageButtonRight = imageButtonRight;
+			},
+			setOverlayFocus() {
+				if ( state.overlayEnabled ) {
+					// Moves the focus to the dialog when it opens.
+					const { ref } = getElement();
+					ref.focus();
+				}
+			},
+			initTriggerButton() {
+				const { imageId } = getContext();
+				const { ref } = getElement();
+				state.metadata[ imageId ].buttonRef = ref;
+			},
+		},
+	},
+	{ lock: true }
+);
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 88d2c26f02403a..56365c87a268fd 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -45,8 +45,13 @@ import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
+import * as details from './details';
 import * as embed from './embed';
 import * as file from './file';
+import * as form from './form';
+import * as formInput from './form-input';
+import * as formSubmitButton from './form-submit-button';
+import * as formSubmissionNotification from './form-submission-notification';
 import * as gallery from './gallery';
 import * as group from './group';
 import * as heading from './heading';
@@ -67,6 +72,7 @@ import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
+import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
@@ -82,6 +88,7 @@ import * as postFeaturedImage from './post-featured-image';
 import * as postNavigationLink from './post-navigation-link';
 import * as postTemplate from './post-template';
 import * as postTerms from './post-terms';
+import * as postTimeToRead from './post-time-to-read';
 import * as postTitle from './post-title';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
@@ -113,14 +120,15 @@ import * as termDescription from './term-description';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
+import * as footnotes from './footnotes';
 
 import isBlockMetadataExperimental from './utils/is-block-metadata-experimental';
 
 /**
  * Function to get all the block-library blocks in an array
  */
-const getAllBlocks = () =>
-	[
+const getAllBlocks = () => {
+	const blocks = [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -138,12 +146,12 @@ const getAllBlocks = () =>
 		buttons,
 		calendar,
 		categories,
-		...( window.wp && window.wp.oldEditor ? [ classic ] : [] ), // Only add the classic block in WP Context.
 		code,
 		column,
 		columns,
 		commentAuthorAvatar,
 		cover,
+		details,
 		embed,
 		file,
 		group,
@@ -155,6 +163,7 @@ const getAllBlocks = () =>
 		more,
 		nextpage,
 		pageList,
+		pageListItem,
 		pattern,
 		preformatted,
 		pullquote,
@@ -171,6 +180,7 @@ const getAllBlocks = () =>
 		textColumns,
 		verse,
 		video,
+		footnotes,
 
 		// theme blocks
 		navigation,
@@ -195,6 +205,7 @@ const getAllBlocks = () =>
 		postTerms,
 		postNavigationLink,
 		postTemplate,
+		postTimeToRead,
 		queryPagination,
 		queryPaginationNext,
 		queryPaginationNumbers,
@@ -220,7 +231,33 @@ const getAllBlocks = () =>
 		termDescription,
 		queryTitle,
 		postAuthorBiography,
-	].filter( Boolean );
+	];
+	if ( window?.__experimentalEnableFormBlocks ) {
+		blocks.push( form );
+		blocks.push( formInput );
+		blocks.push( formSubmitButton );
+		blocks.push( formSubmissionNotification );
+	}
+
+	// When in a WordPress context, conditionally
+	// add the classic block and TinyMCE editor
+	// under any of the following conditions:
+	//   - the current post contains a classic block
+	//   - the experiment to disable TinyMCE isn't active.
+	//   - a query argument specifies that TinyMCE should be loaded
+	if (
+		window?.wp?.oldEditor &&
+		( window?.wp?.needsClassicBlock ||
+			! window?.__experimentalDisableTinymce ||
+			!! new URLSearchParams( window?.location?.search ).get(
+				'requiresTinymce'
+			) )
+	) {
+		blocks.push( classic );
+	}
+
+	return blocks.filter( Boolean );
+};
 
 /**
  * Function to get all the core blocks in an array.
@@ -255,7 +292,11 @@ export const registerCoreBlocks = (
 	blocks.forEach( ( { init } ) => init() );
 
 	setDefaultBlockName( paragraph.name );
-	if ( window.wp && window.wp.oldEditor ) {
+	if (
+		window.wp &&
+		window.wp.oldEditor &&
+		blocks.some( ( { name } ) => name === classic.name )
+	) {
 		setFreeformContentHandlerName( classic.name );
 	}
 	setUnregisteredTypeHandlerName( missing.name );
@@ -273,19 +314,21 @@ export const registerCoreBlocks = (
  * __experimentalRegisterExperimentalCoreBlocks( settings );
  * ```
  */
-export const __experimentalRegisterExperimentalCoreBlocks = process.env
-	.IS_GUTENBERG_PLUGIN
-	? ( { enableFSEBlocks } = {} ) => {
-			const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
-			getAllBlocks()
-				.filter( ( { metadata } ) =>
-					isBlockMetadataExperimental( metadata )
-				)
-				.filter(
-					( { metadata: { __experimental } } ) =>
-						__experimental === true ||
-						enabledExperiments.includes( __experimental )
-				)
-				.forEach( ( { init } ) => init() );
-	  }
-	: undefined;
+export const __experimentalRegisterExperimentalCoreBlocks =
+	globalThis.IS_GUTENBERG_PLUGIN
+		? ( { enableFSEBlocks } = {} ) => {
+				const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
+				getAllBlocks()
+					.filter( ( { metadata } ) =>
+						isBlockMetadataExperimental( metadata )
+					)
+					.filter(
+						( { metadata: { __experimental } } ) =>
+							__experimental === true ||
+							enabledExperiments.includes( __experimental )
+					)
+					.forEach( ( { init } ) => init() );
+		  }
+		: undefined;
+
+export { privateApis } from './private-apis';
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
index 1a0f0c017024ed..dcaf1fd16098f3 100644
--- a/packages/block-library/src/index.native.js
+++ b/packages/block-library/src/index.native.js
@@ -88,6 +88,7 @@ export const coreBlocks = [
 	column,
 	cover,
 	embed,
+	group,
 	file,
 	html,
 	mediaText,
@@ -121,7 +122,6 @@ export const coreBlocks = [
  * Function to register a block variations e.g. social icons different types.
  *
  * @param {Object} block The block which variations will be registered.
- *
  */
 const registerBlockVariations = ( block ) => {
 	const { metadata, settings, name } = block;
@@ -261,10 +261,14 @@ export const registerCoreBlocks = () => {
  * than 0, a "new" badge is displayed on the block type within the block
  * inserter.
  *
+ * With the below example, the Audio block will be displayed as "new" until its
+ * impression count reaches 0, which occurs by various actions decrementing
+ * the impression count.
+ *
+ * {
+ * 	[ audio.name ]: 40
+ * }
+ *
  * @constant {{ string, number }}
  */
-export const NEW_BLOCK_TYPES = {
-	[ embed.name ]: 40,
-	[ search.name ]: 40,
-	[ audio.name ]: 40,
-};
+export const NEW_BLOCK_TYPES = {};
diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json
index 0b1ae021b52bc2..543512ddf3ce7c 100644
--- a/packages/block-library/src/latest-comments/block.json
+++ b/packages/block-library/src/latest-comments/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/latest-comments",
 	"title": "Latest Comments",
 	"category": "widgets",
@@ -29,10 +29,35 @@
 	},
 	"supports": {
 		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",
diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js
index a376ebb94b6de2..85e66cf2e9dc60 100644
--- a/packages/block-library/src/latest-comments/edit.js
+++ b/packages/block-library/src/latest-comments/edit.js
@@ -28,11 +28,20 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
 		attributes;
 
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			spacing: undefined,
+		},
+	};
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }
 						onChange={ () =>
@@ -40,6 +49,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ () =>
@@ -47,6 +57,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ () =>
@@ -56,6 +67,8 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>
@@ -70,8 +83,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 			<Disabled>
 				<ServerSideRender
 					block="core/latest-comments"
-					attributes={ attributes }
-					skipBlockSupportAttributes
+					attributes={ serverSideAttributes }
 					// The preview uses the site's locale to make it more true to how
 					// the block appears on the frontend. Setting the locale
 					// explicitly prevents any middleware from setting it to 'user'.
diff --git a/packages/block-library/src/latest-comments/index.php b/packages/block-library/src/latest-comments/index.php
index 830e22ac339c07..5b6023cc46e58f 100644
--- a/packages/block-library/src/latest-comments/index.php
+++ b/packages/block-library/src/latest-comments/index.php
@@ -36,6 +36,8 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
 /**
  * Renders the `core/latest-comments` block on server.
  *
+ * @since 5.1.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest comments added.
@@ -145,6 +147,8 @@ function render_block_core_latest_comments( $attributes = array() ) {
 
 /**
  * Registers the `core/latest-comments` block.
+ *
+ * @since 5.3.0
  */
 function register_block_core_latest_comments() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
index ba088731ee4126..8759da8c73d94d 100644
--- a/packages/block-library/src/latest-comments/style.scss
+++ b/packages/block-library/src/latest-comments/style.scss
@@ -1,7 +1,7 @@
 // Lower specificity - target list element.
 ol.wp-block-latest-comments {
 	// Removes left spacing in Customizer Widgets screen.
-	// Due to low specificity this will be safely overriden
+	// Due to low specificity this will be safely overridden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
 
@@ -9,6 +9,23 @@ ol.wp-block-latest-comments {
 	box-sizing: border-box;
 }
 
+// Following styles leverage :where so that typography block support styles and
+// global styles apply when necessary.
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment)) {
+	line-height: 1.1;
+}
+
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment-excerpt p)) {
+	line-height: 1.8;
+}
+
+.has-dates,
+.has-excerpts {
+	:where(.wp-block-latest-comments:not([style*="line-height"])) {
+		line-height: 1.5;
+	}
+}
+
 // Higher specificity - target list via wrapper.
 .wp-block-latest-comments .wp-block-latest-comments {
 	// Remove left spacing. Higher specificity required to
@@ -17,7 +34,6 @@ ol.wp-block-latest-comments {
 }
 
 .wp-block-latest-comments__comment {
-	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
@@ -30,16 +46,10 @@ ol.wp-block-latest-comments {
 			margin-left: 3.25em;
 		}
 	}
-
-	.has-dates &,
-	.has-excerpts & {
-		line-height: 1.5;
-	}
 }
 
 .wp-block-latest-comments__comment-excerpt p {
 	font-size: 0.875em;
-	line-height: 1.8;
 	margin: 0.36em 0 1.4em;
 }
 
@@ -57,3 +67,11 @@ ol.wp-block-latest-comments {
 	margin-right: 0.75em;
 	width: 2.5em;
 }
+
+// Enforce font size when user has made selection at the individual block level.
+.wp-block-latest-comments[style*="font-size"],
+.wp-block-latest-comments[class*="-font-size"] {
+	a {
+		font-size: inherit;
+	}
+}
diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json
index 13a01280c4d1d2..bb8c2d24962f3f 100644
--- a/packages/block-library/src/latest-posts/block.json
+++ b/packages/block-library/src/latest-posts/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/latest-posts",
 	"title": "Latest Posts",
 	"category": "widgets",
@@ -110,6 +110,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-latest-posts-editor",
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 3671ec555e600c..82f0661d04e40f 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import { get, pickBy } from 'lodash';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	BaseControl,
 	PanelBody,
 	Placeholder,
 	QueryControls,
@@ -17,22 +15,32 @@ import {
 	Spinner,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { dateI18n, format, getSettings } from '@wordpress/date';
 import {
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockControls,
 	__experimentalImageSizeControl as ImageSizeControl,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { pin, list, grid } from '@wordpress/icons';
+import {
+	pin,
+	list,
+	grid,
+	alignNone,
+	positionLeft,
+	positionCenter,
+	positionRight,
+} from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticeStore } from '@wordpress/notices';
 import { useInstanceId } from '@wordpress/compose';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -57,7 +65,7 @@ const USERS_LIST_QUERY = {
 };
 
 function getFeaturedImageDetails( post, size ) {
-	const image = get( post, [ '_embedded', 'wp:featuredmedia', '0' ] );
+	const image = post._embedded?.[ 'wp:featuredmedia' ]?.[ '0' ];
 
 	return {
 		url:
@@ -104,29 +112,24 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				categories && categories.length > 0
 					? categories.map( ( cat ) => cat.id )
 					: [];
-			const latestPostsQuery = pickBy(
-				{
+			const latestPostsQuery = Object.fromEntries(
+				Object.entries( {
 					categories: catIds,
 					author: selectedAuthor,
 					order,
 					orderby: orderBy,
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
-				},
-				( value ) => typeof value !== 'undefined'
+				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
 			);
 
 			return {
-				defaultImageWidth: get(
-					settings.imageDimensions,
-					[ featuredImageSizeSlug, 'width' ],
-					0
-				),
-				defaultImageHeight: get(
-					settings.imageDimensions,
-					[ featuredImageSizeSlug, 'height' ],
-					0
-				),
+				defaultImageWidth:
+					settings.imageDimensions?.[ featuredImageSizeSlug ]
+						?.width ?? 0,
+				defaultImageHeight:
+					settings.imageDimensions?.[ featuredImageSizeSlug ]
+						?.height ?? 0,
 				imageSizes: settings.imageSizes,
 				latestPosts: getEntityRecords(
 					'postType',
@@ -152,15 +155,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	// If a user clicks to a link prevent redirection and show a warning.
-	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
-	let noticeId;
+	const { createWarningNotice } = useDispatch( noticeStore );
 	const showRedirectionPreventedNotice = ( event ) => {
 		event.preventDefault();
-		// Remove previous warning if any, to show one at a time per block.
-		removeNotice( noticeId );
-		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
 		createWarningNotice( __( 'Links are disabled in the editor.' ), {
-			id: noticeId,
+			id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
 			type: 'snackbar',
 		} );
 	};
@@ -202,11 +201,35 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		setAttributes( { categories: allCategories } );
 	};
 
+	const imageAlignmentOptions = [
+		{
+			value: 'none',
+			icon: alignNone,
+			label: __( 'None' ),
+		},
+		{
+			value: 'left',
+			icon: positionLeft,
+			label: __( 'Left' ),
+		},
+		{
+			value: 'center',
+			icon: positionCenter,
+			label: __( 'Center' ),
+		},
+		{
+			value: 'right',
+			icon: positionRight,
+			label: __( 'Right' ),
+		},
+	];
+
 	const hasPosts = !! latestPosts?.length;
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Post content settings' ) }>
+			<PanelBody title={ __( 'Post content' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post content' ) }
 					checked={ displayPostContent }
 					onChange={ ( value ) =>
@@ -215,7 +238,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				/>
 				{ displayPostContent && (
 					<RadioControl
-						label={ __( 'Show:' ) }
+						label={ __( 'Show' ) }
 						selected={ displayPostContentRadio }
 						options={ [
 							{ label: __( 'Excerpt' ), value: 'excerpt' },
@@ -234,7 +257,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
-							label={ __( 'Max number of words in excerpt' ) }
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
 								setAttributes( { excerptLength: value } )
@@ -245,8 +270,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					) }
 			</PanelBody>
 
-			<PanelBody title={ __( 'Post meta settings' ) }>
+			<PanelBody title={ __( 'Post meta' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display author name' ) }
 					checked={ displayAuthor }
 					onChange={ ( value ) =>
@@ -254,6 +280,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display post date' ) }
 					checked={ displayPostDate }
 					onChange={ ( value ) =>
@@ -262,8 +289,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				/>
 			</PanelBody>
 
-			<PanelBody title={ __( 'Featured image settings' ) }>
+			<PanelBody title={ __( 'Featured image' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display featured image' ) }
 					checked={ displayFeaturedImage }
 					onChange={ ( value ) =>
@@ -291,6 +319,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							imageWidth={ defaultImageWidth }
 							imageHeight={ defaultImageHeight }
 							imageSizeOptions={ imageSizeOptions }
+							imageSizeHelp={ __(
+								'Select the size of the source image.'
+							) }
 							onChangeImage={ ( value ) =>
 								setAttributes( {
 									featuredImageSizeSlug: value,
@@ -299,22 +330,34 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								} )
 							}
 						/>
-						<BaseControl className="editor-latest-posts-image-alignment-control">
-							<BaseControl.VisualLabel>
-								{ __( 'Image alignment' ) }
-							</BaseControl.VisualLabel>
-							<BlockAlignmentToolbar
-								value={ featuredImageAlign }
-								onChange={ ( value ) =>
-									setAttributes( {
-										featuredImageAlign: value,
-									} )
+						<ToggleGroupControl
+							className="editor-latest-posts-image-alignment-control"
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image alignment' ) }
+							value={ featuredImageAlign || 'none' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									featuredImageAlign:
+										value !== 'none' ? value : undefined,
+								} )
+							}
+						>
+							{ imageAlignmentOptions.map(
+								( { value, icon, label } ) => {
+									return (
+										<ToggleGroupControlOptionIcon
+											key={ value }
+											value={ value }
+											icon={ icon }
+											label={ label }
+										/>
+									);
 								}
-								controls={ [ 'left', 'center', 'right' ] }
-								isCollapsed={ false }
-							/>
-						</BaseControl>
+							) }
+						</ToggleGroupControl>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
 							checked={ addLinkToFeaturedImage }
 							onChange={ ( value ) =>
@@ -355,6 +398,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 				{ postLayout === 'grid' && (
 					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>
@@ -377,7 +422,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'wp-block-latest-posts__list': true,
 			'is-grid': postLayout === 'grid',
 			'has-dates': displayPostDate,
@@ -410,13 +455,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const layoutControls = [
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'list' } ),
 			isActive: postLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'Latest posts block display setting' ),
 			onClick: () => setAttributes( { postLayout: 'grid' } ),
 			isActive: postLayout === 'grid',
 		},
@@ -425,13 +470,13 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const dateFormat = getSettings().formats.date;
 
 	return (
-		<div>
+		<>
 			{ inspectorControls }
 			<BlockControls>
 				<ToolbarGroup controls={ layoutControls } />
 			</BlockControls>
 			<ul { ...blockProps }>
-				{ displayPosts.map( ( post, i ) => {
+				{ displayPosts.map( ( post ) => {
 					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
 					const currentAuthor = authorList?.find(
@@ -448,7 +493,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 					const { url: imageSourceUrl, alt: featuredImageAlt } =
 						getFeaturedImageDetails( post, featuredImageSizeSlug );
-					const imageClasses = classnames( {
+					const imageClasses = clsx( {
 						'wp-block-latest-posts__featured-image': true,
 						[ `align${ featuredImageAlign }` ]:
 							!! featuredImageAlign,
@@ -476,27 +521,42 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.trim()
 								.split( ' ', excerptLength )
 								.join( ' ' ) }
-							{ /* translators: excerpt truncation character, default …  */ }
-							{ __( ' … ' ) }
-							<a
-								href={ post.link }
-								rel="noopener noreferrer"
-								onClick={ showRedirectionPreventedNotice }
-							>
-								{ __( 'Read more' ) }
-							</a>
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: 1: Hidden accessibility text: Post title */
+									__(
+										'… <a>Read more<span>: %1$s</span></a>'
+									),
+									titleTrimmed || __( '(no title)' )
+								),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											className="wp-block-latest-posts__read-more"
+											href={ post.link }
+											rel="noopener noreferrer"
+											onClick={
+												showRedirectionPreventedNotice
+											}
+										/>
+									),
+									span: (
+										<span className="screen-reader-text" />
+									),
+								}
+							) }
 						</>
 					) : (
 						excerpt
 					);
 
 					return (
-						<li key={ i }>
+						<li key={ post.id }>
 							{ renderFeaturedImage && (
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
 										<a
-											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
 											onClick={
@@ -511,6 +571,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								</div>
 							) }
 							<a
+								className="wp-block-latest-posts__post-title"
 								href={ post.link }
 								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
@@ -527,7 +588,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							{ displayAuthor && currentAuthor && (
 								<div className="wp-block-latest-posts__post-author">
 									{ sprintf(
-										/* translators: byline. %s: current author. */
+										/* translators: byline. %s: author. */
 										__( 'by %s' ),
 										currentAuthor.name
 									) }
@@ -560,6 +621,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 				} ) }
 			</ul>
-		</div>
+		</>
 	);
 }
diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js
index a47a10aa8505cc..632efa149313f6 100644
--- a/packages/block-library/src/latest-posts/edit.native.js
+++ b/packages/block-library/src/latest-posts/edit.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { TouchableWithoutFeedback, View, Text } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -63,9 +62,7 @@ class LatestPostsEdit extends Component {
 			.then( ( categoriesList ) => {
 				if ( this.isStillMounted ) {
 					this.setState( {
-						categoriesList: isEmpty( categoriesList )
-							? []
-							: categoriesList,
+						categoriesList,
 					} );
 				}
 			} )
@@ -160,7 +157,7 @@ class LatestPostsEdit extends Component {
 
 		return (
 			<InspectorControls>
-				<PanelBody title={ __( 'Post content settings' ) }>
+				<PanelBody title={ __( 'Post content' ) }>
 					<ToggleControl
 						label={ __( 'Show post content' ) }
 						checked={ displayPostContent }
@@ -184,7 +181,7 @@ class LatestPostsEdit extends Component {
 					) }
 				</PanelBody>
 
-				<PanelBody title={ __( 'Post meta settings' ) }>
+				<PanelBody title={ __( 'Post meta' ) }>
 					<ToggleControl
 						label={ __( 'Display post date' ) }
 						checked={ displayPostDate }
@@ -192,7 +189,7 @@ class LatestPostsEdit extends Component {
 					/>
 				</PanelBody>
 
-				<PanelBody title={ __( 'Featured image settings' ) }>
+				<PanelBody title={ __( 'Featured image' ) }>
 					<ToggleControl
 						label={ __( 'Display featured image' ) }
 						checked={ displayFeaturedImage }
@@ -204,13 +201,13 @@ class LatestPostsEdit extends Component {
 								value={ featuredImageAlign }
 								onChange={ this.onSetFeaturedImageAlign }
 								controls={ [ 'left', 'center', 'right' ] }
-								isBottomSheetControl={ true }
+								isBottomSheetControl
 							/>
 							<ToggleControl
 								label={ __( 'Add link to featured image' ) }
 								checked={ addLinkToFeaturedImage }
 								onChange={ this.onSetAddLinkToFeaturedImage }
-								separatorType={ 'topFullWidth' }
+								separatorType="topFullWidth"
 							/>
 						</>
 					) }
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 3c2d6a30f1c077..fe901480974461 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -1,9 +1,4 @@
 .wp-block-latest-posts {
-	padding-left: 2.5em;
-	&.is-grid {
-		padding-left: 0;
-	}
-
 	// Apply overflow for post items, so any floated featured images won't crop the focus style.
 	> li {
 		overflow: hidden;
@@ -14,16 +9,12 @@
 	display: inline;
 }
 
-.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
-	margin-bottom: 20px;
+:root :where(.wp-block-latest-posts) {
+	padding-left: 2.5em;
 }
-
-.editor-latest-posts-image-alignment-control {
-	.components-base-control__label {
-		display: block;
-	}
-
-	.components-toolbar {
-		border-radius: $radius-block-ui;
+:root {
+	:where(.wp-block-latest-posts.is-grid),
+	:where(.wp-block-latest-posts__list) {
+		padding-left: 0;
 	}
 }
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
index 18168ba37bce84..f8fd8ea27bc453 100644
--- a/packages/block-library/src/latest-posts/index.php
+++ b/packages/block-library/src/latest-posts/index.php
@@ -18,6 +18,8 @@
  * Callback for the excerpt_length filter used by
  * the Latest Posts block at render time.
  *
+ * @since 5.4.0
+ *
  * @return int Returns the global $block_core_latest_posts_excerpt_length variable
  *             to allow the excerpt_length filter respect the Latest Block setting.
  */
@@ -29,6 +31,8 @@ function block_core_latest_posts_get_excerpt_length() {
 /**
  * Renders the `core/latest-posts` block on server.
  *
+ * @since 5.0.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest posts added.
@@ -48,7 +52,7 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	if ( isset( $attributes['categories'] ) ) {
+	if ( ! empty( $attributes['categories'] ) ) {
 		$args['category__in'] = array_column( $attributes['categories'], 'id' );
 	}
 	if ( isset( $attributes['selectedAuthor'] ) ) {
@@ -119,7 +123,7 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
 			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
 
-			/* translators: byline. %s: current author. */
+			/* translators: byline. %s: author. */
 			$byline = sprintf( __( 'by %s' ), $author_display_name );
 
 			if ( ! empty( $author_display_name ) ) {
@@ -143,6 +147,24 @@ function render_block_core_latest_posts( $attributes ) {
 
 			$trimmed_excerpt = get_the_excerpt( $post );
 
+			/*
+			 * Adds a "Read more" link with screen reader text.
+			 * [&hellip;] is the default excerpt ending from wp_trim_excerpt() in Core.
+			 */
+			if ( str_ends_with( $trimmed_excerpt, ' [&hellip;]' ) ) {
+				/** This filter is documented in wp-includes/formatting.php */
+				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
+				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
+					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
+					$trimmed_excerpt .= sprintf(
+						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
+						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
+						esc_url( $post_link ),
+						esc_html( $title )
+					);
+				}
+			}
+
 			if ( post_password_required( $post ) ) {
 				$trimmed_excerpt = __( 'This content is password protected.' );
 			}
@@ -173,25 +195,24 @@ function render_block_core_latest_posts( $attributes ) {
 
 	remove_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	$class = 'wp-block-latest-posts__list';
-
+	$classes = array( 'wp-block-latest-posts__list' );
 	if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) {
-		$class .= ' is-grid';
+		$classes[] = 'is-grid';
 	}
-
 	if ( isset( $attributes['columns'] ) && 'grid' === $attributes['postLayout'] ) {
-		$class .= ' columns-' . $attributes['columns'];
+		$classes[] = 'columns-' . $attributes['columns'];
 	}
-
 	if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
-		$class .= ' has-dates';
+		$classes[] = 'has-dates';
 	}
-
 	if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
-		$class .= ' has-author';
+		$classes[] = 'has-author';
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<ul %1$s>%2$s</ul>',
@@ -202,6 +223,8 @@ function render_block_core_latest_posts( $attributes ) {
 
 /**
  * Registers the `core/latest-posts` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_latest_posts() {
 	register_block_type_from_metadata(
@@ -225,6 +248,8 @@ function register_block_core_latest_posts() {
  * TODO: Remove when and if the bottom client-side deprecation for this block
  * is removed.
  *
+ * @since 5.5.0
+ *
  * @param array $block A single parsed block object.
  *
  * @return array The migrated block object.
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index 17d92a4ad91b92..69a4746b5e751c 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -12,17 +12,16 @@
 	}
 	&.wp-block-latest-posts__list {
 		list-style: none;
-		padding-left: 0;
 
 		li {
 			clear: both;
+			overflow-wrap: break-word;
 		}
 	}
 
 	&.is-grid {
 		display: flex;
 		flex-wrap: wrap;
-		padding: 0;
 
 		li {
 			margin: 0 1.25em 1.25em 0;
@@ -33,9 +32,9 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+				width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i}));
 
-				&:nth-child( #{ $i }n ) {
+				&:nth-child(#{ $i }n) {
 					margin-right: 0;
 				}
 			}
@@ -43,13 +42,23 @@
 	}
 }
 
+:root {
+	:where(.wp-block-latest-posts.is-grid) {
+		padding: 0;
+	}
+	:where(.wp-block-latest-posts.wp-block-latest-posts__list) {
+		padding-left: 0;
+	}
+}
+
 .wp-block-latest-posts__post-date,
 .wp-block-latest-posts__post-author {
 	display: block;
 	font-size: 0.8125em;
 }
 
-.wp-block-latest-posts__post-excerpt {
+.wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts__post-full-content {
 	margin-top: 0.5em;
 	margin-bottom: 1em;
 }
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/__snapshots__/transforms.native.js.snap b/packages/block-library/src/latest-posts/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..8aa09fa2ca2d6b
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latest Posts block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Latest Posts block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /--></div>
+<!-- /wp:group -->"
+`;
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/latest-posts/test/transforms.native.js b/packages/block-library/src/latest-posts/test/transforms.native.js
new file mode 100644
index 00000000000000..33b74e32ca7e40
--- /dev/null
+++ b/packages/block-library/src/latest-posts/test/transforms.native.js
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+const block = 'Latest Posts';
+const initialHtml = `
+<!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	beforeAll( () => {
+		// Mock response of the request made from Latest Posts block to path "/wp/v2/categories".
+		apiFetch.mockResolvedValue( [
+			{
+				slug: 'uncategorized',
+				parent: 0,
+				id: 1,
+				count: 6,
+				link: '',
+				meta: [],
+				description: '',
+				name: 'Uncategorized',
+				taxonomy: 'category',
+			},
+		] );
+	} );
+
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 745d6e30b4dd66..6eb30cfe6d0af0 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -1,27 +1,50 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",
 	"parent": [ "core/list" ],
-	"description": "Create a list item.",
+	"allowedBlocks": [ "core/list" ],
+	"description": "An individual item within a list.",
 	"textdomain": "default",
 	"attributes": {
 		"placeholder": {
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "li",
-			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": false,
-		"__experimentalSelector": "li",
+		"splitting": true,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"background": true,
+			"__experimentalDefaultControls": {
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -34,6 +57,13 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
+	},
+	"selectors": {
+		"root": ".wp-block-list > li",
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
 	}
 }
diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
index 738a8ab397adf3..8c5fa7bdc7bf6a 100644
--- a/packages/block-library/src/list-item/edit.js
+++ b/packages/block-library/src/list-item/edit.js
@@ -6,6 +6,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	BlockControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { isRTL, __ } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
@@ -16,6 +17,7 @@ import {
 	formatIndent,
 } from '@wordpress/icons';
 import { useMergeRefs } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -25,30 +27,41 @@ import {
 	useSpace,
 	useIndentListItem,
 	useOutdentListItem,
-	useSplit,
 	useMerge,
-	useCopy,
 } from './hooks';
-import { convertToListItems } from './utils';
 
 export function IndentUI( { clientId } ) {
-	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
-	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
+	const indentListItem = useIndentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
+	const { canIndent, canOutdent } = useSelect(
+		( select ) => {
+			const { getBlockIndex, getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
+			return {
+				canIndent: getBlockIndex( clientId ) > 0,
+				canOutdent:
+					getBlockName(
+						getBlockRootClientId( getBlockRootClientId( clientId ) )
+					) === 'core/list-item',
+			};
+		},
+		[ clientId ]
+	);
 
 	return (
 		<>
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
-				describedBy={ __( 'Outdent list item' ) }
+				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ () => outdentListItem() }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
-				describedBy={ __( 'Indent list item' ) }
-				isDisabled={ ! canIndent }
+				description={ __( 'Indent list item' ) }
+				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }
 			/>
 		</>
@@ -58,20 +71,17 @@ export function IndentUI( { clientId } ) {
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	onReplace,
 	clientId,
 	mergeBlocks,
 } ) {
 	const { placeholder, content } = attributes;
-	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
+	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );
-	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (
 		<>
@@ -86,11 +96,7 @@ export default function ListItemEdit( {
 					value={ content }
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
-					onSplit={ onSplit }
 					onMerge={ onMerge }
-					onReplace={ ( blocks, ...args ) => {
-						onReplace( convertToListItems( blocks ), ...args );
-					} }
 				/>
 				{ innerBlocksProps.children }
 			</li>
diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js
index 5f365dd9a5816b..2367529242ded1 100644
--- a/packages/block-library/src/list-item/edit.native.js
+++ b/packages/block-library/src/list-item/edit.native.js
@@ -21,8 +21,7 @@ import { useState, useCallback, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge, useEnter } from './hooks';
-import { convertToListItems } from './utils';
+import { useMerge, useEnter } from './hooks';
 import { IndentUI } from './edit.js';
 import styles from './style.scss';
 import ListStyleType from './list-style-type';
@@ -32,7 +31,6 @@ const OPACITY = '9e';
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
-	onReplace,
 	clientId,
 	style,
 	mergeBlocks,
@@ -90,8 +88,7 @@ export default function ListItemEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list' ],
-		useCompactList: true,
+		renderAppender: false,
 	} );
 
 	// Set default placeholder text color from light/dark scheme or base colors
@@ -119,24 +116,7 @@ export default function ListItemEdit( {
 
 	const preventDefault = useRef( false );
 	const { onEnter } = useEnter( { content, clientId }, preventDefault );
-	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
-	const onSplitList = useCallback(
-		( value ) => {
-			if ( ! preventDefault.current ) {
-				return onSplit( value );
-			}
-		},
-		[ clientId, onSplit ]
-	);
-	const onReplaceList = useCallback(
-		( blocks, ...args ) => {
-			if ( ! preventDefault.current ) {
-				onReplace( convertToListItems( blocks ), ...args );
-			}
-		},
-		[ clientId, onReplace, convertToListItems ]
-	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {
 			const { width } = nativeEvent.layout;
@@ -167,6 +147,7 @@ export default function ListItemEdit( {
 					onLayout={ onLayout }
 				>
 					<RichText
+						__unstableUseSplitSelection
 						identifier="content"
 						tagName="p"
 						onChange={ ( nextContent ) =>
@@ -177,12 +158,10 @@ export default function ListItemEdit( {
 						placeholderTextColor={
 							defaultPlaceholderTextColorWithOpacity
 						}
-						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ onReplaceList }
 						onEnter={ onEnter }
 						style={ styleWithPlaceholderOpacity }
-						deleteEnter={ true }
+						deleteEnter
 						containerWidth={ contentWidth }
 					/>
 				</View>
diff --git a/packages/block-library/src/list-item/hooks/index.js b/packages/block-library/src/list-item/hooks/index.js
index 3bbc3167abed32..6220f92851a327 100644
--- a/packages/block-library/src/list-item/hooks/index.js
+++ b/packages/block-library/src/list-item/hooks/index.js
@@ -2,6 +2,4 @@ export { default as useOutdentListItem } from './use-outdent-list-item';
 export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
-export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';
-export { default as useCopy } from './use-copy';
diff --git a/packages/block-library/src/list-item/hooks/use-copy.js b/packages/block-library/src/list-item/hooks/use-copy.js
deleted file mode 100644
index 7a76019ad11a4b..00000000000000
--- a/packages/block-library/src/list-item/hooks/use-copy.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-export default function useCopy( clientId ) {
-	const { getBlockRootClientId, getBlockName, getBlockAttributes } =
-		useSelect( blockEditorStore );
-
-	return useRefEffect( ( node ) => {
-		function onCopy( event ) {
-			// The event propagates through all nested lists, so don't override
-			// when copying nested list items.
-			if ( event.clipboardData.getData( '__unstableWrapperBlockName' ) ) {
-				return;
-			}
-
-			const rootClientId = getBlockRootClientId( clientId );
-			event.clipboardData.setData(
-				'__unstableWrapperBlockName',
-				getBlockName( rootClientId )
-			);
-			event.clipboardData.setData(
-				'__unstableWrapperBlockAttributes',
-				JSON.stringify( getBlockAttributes( rootClientId ) )
-			);
-		}
-
-		node.addEventListener( 'copy', onCopy );
-		node.addEventListener( 'cut', onCopy );
-		return () => {
-			node.removeEventListener( 'copy', onCopy );
-			node.removeEventListener( 'cut', onCopy );
-		};
-	}, [] );
-}
diff --git a/packages/block-library/src/list-item/hooks/use-enter.js b/packages/block-library/src/list-item/hooks/use-enter.js
index 46fdc65cecdd7b..ffe5c55fbbed2e 100644
--- a/packages/block-library/src/list-item/hooks/use-enter.js
+++ b/packages/block-library/src/list-item/hooks/use-enter.js
@@ -19,71 +19,72 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
+	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canOutdent, outdentListItem ] = useOutdentListItem(
-		propsRef.current.clientId
-	);
-	return useRefEffect(
-		( element ) => {
-			function onKeyDown( event ) {
-				if ( event.defaultPrevented || event.keyCode !== ENTER ) {
-					return;
-				}
-				const { content, clientId } = propsRef.current;
-				if ( content.length ) {
-					return;
-				}
-				event.preventDefault();
-				if ( canOutdent ) {
-					outdentListItem();
-					return;
-				}
-				// Here we are in top level list so we need to split.
-				const topParentListBlock = getBlock(
-					getBlockRootClientId( clientId )
-				);
-				const blockIndex = getBlockIndex( clientId );
-				const head = cloneBlock( {
-					...topParentListBlock,
-					innerBlocks: topParentListBlock.innerBlocks.slice(
-						0,
-						blockIndex
-					),
-				} );
-				const middle = createBlock( getDefaultBlockName() );
-				// Last list item might contain a `list` block innerBlock
-				// In that case append remaining innerBlocks blocks.
-				const after = [
-					...( topParentListBlock.innerBlocks[ blockIndex ]
-						.innerBlocks[ 0 ]?.innerBlocks || [] ),
-					...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
-				];
-				const tail = after.length
-					? [
-							cloneBlock( {
-								...topParentListBlock,
-								innerBlocks: after,
-							} ),
-					  ]
-					: [];
-				replaceBlocks(
-					topParentListBlock.clientId,
-					[ head, middle, ...tail ],
-					1
-				);
-				// We manually change the selection here because we are replacing
-				// a different block than the selected one.
-				selectionChange( middle.clientId );
+	const outdentListItem = useOutdentListItem();
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
+				return;
 			}
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			event.preventDefault();
+			const canOutdent =
+				getBlockName(
+					getBlockRootClientId(
+						getBlockRootClientId( propsRef.current.clientId )
+					)
+				) === 'core/list-item';
+			if ( canOutdent ) {
+				outdentListItem();
+				return;
+			}
+			// Here we are in top level list so we need to split.
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			// Last list item might contain a `list` block innerBlock
+			// In that case append remaining innerBlocks blocks.
+			const after = [
+				...( topParentListBlock.innerBlocks[ blockIndex ]
+					.innerBlocks[ 0 ]?.innerBlocks || [] ),
+				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+			];
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		}
 
-			element.addEventListener( 'keydown', onKeyDown );
-			return () => {
-				element.removeEventListener( 'keydown', onKeyDown );
-			};
-		},
-		[ canOutdent ]
-	);
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
 }
diff --git a/packages/block-library/src/list-item/hooks/use-enter.native.js b/packages/block-library/src/list-item/hooks/use-enter.native.js
index d3be5f1ea0e1bb..596dd469d31326 100644
--- a/packages/block-library/src/list-item/hooks/use-enter.native.js
+++ b/packages/block-library/src/list-item/hooks/use-enter.native.js
@@ -17,13 +17,11 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props, preventDefault ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
+	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canOutdent, outdentListItem ] = useOutdentListItem(
-		propsRef.current.clientId
-	);
+	const outdentListItem = useOutdentListItem();
 
 	return {
 		onEnter() {
@@ -32,7 +30,13 @@ export default function useEnter( props, preventDefault ) {
 				return;
 			}
 			preventDefault.current = true;
-			if ( canOutdent ) {
+			if (
+				getBlockName(
+					getBlockRootClientId(
+						getBlockRootClientId( propsRef.current.clientId )
+					)
+				) === 'core/list-item'
+			) {
 				outdentListItem();
 				return;
 			}
diff --git a/packages/block-library/src/list-item/hooks/use-indent-list-item.js b/packages/block-library/src/list-item/hooks/use-indent-list-item.js
index b1fd8394be43ce..2cd62d201d61f1 100644
--- a/packages/block-library/src/list-item/hooks/use-indent-list-item.js
+++ b/packages/block-library/src/list-item/hooks/use-indent-list-item.js
@@ -7,10 +7,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock, cloneBlock } from '@wordpress/blocks';
 
 export default function useIndentListItem( clientId ) {
-	const canIndent = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0,
-		[ clientId ]
-	);
 	const { replaceBlocks, selectionChange, multiSelect } =
 		useDispatch( blockEditorStore );
 	const {
@@ -21,55 +17,51 @@ export default function useIndentListItem( clientId ) {
 		hasMultiSelection,
 		getMultiSelectedBlockClientIds,
 	} = useSelect( blockEditorStore );
-	return [
-		canIndent,
-		useCallback( () => {
-			const _hasMultiSelection = hasMultiSelection();
-			const clientIds = _hasMultiSelection
-				? getMultiSelectedBlockClientIds()
-				: [ clientId ];
-			const clonedBlocks = clientIds.map( ( _clientId ) =>
-				cloneBlock( getBlock( _clientId ) )
-			);
-			const previousSiblingId = getPreviousBlockClientId( clientId );
-			const newListItem = cloneBlock( getBlock( previousSiblingId ) );
-			// If the sibling has no innerBlocks, create a new `list` block.
-			if ( ! newListItem.innerBlocks?.length ) {
-				newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
-			}
-			// A list item usually has one `list`, but it's possible to have
-			// more. So we need to preserve the previous `list` blocks and
-			// merge the new blocks to the last `list`.
-			newListItem.innerBlocks[
-				newListItem.innerBlocks.length - 1
-			].innerBlocks.push( ...clonedBlocks );
+	return useCallback( () => {
+		const _hasMultiSelection = hasMultiSelection();
+		const clientIds = _hasMultiSelection
+			? getMultiSelectedBlockClientIds()
+			: [ clientId ];
+		const clonedBlocks = clientIds.map( ( _clientId ) =>
+			cloneBlock( getBlock( _clientId ) )
+		);
+		const previousSiblingId = getPreviousBlockClientId( clientId );
+		const newListItem = cloneBlock( getBlock( previousSiblingId ) );
+		// If the sibling has no innerBlocks, create a new `list` block.
+		if ( ! newListItem.innerBlocks?.length ) {
+			newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
+		}
+		// A list item usually has one `list`, but it's possible to have
+		// more. So we need to preserve the previous `list` blocks and
+		// merge the new blocks to the last `list`.
+		newListItem.innerBlocks[
+			newListItem.innerBlocks.length - 1
+		].innerBlocks.push( ...clonedBlocks );
 
-			// We get the selection start/end here, because when
-			// we replace blocks, the selection is updated too.
-			const selectionStart = getSelectionStart();
-			const selectionEnd = getSelectionEnd();
-			// Replace the previous sibling of the block being indented and the indented blocks,
-			// with a new block whose attributes are equal to the ones of the previous sibling and
-			// whose descendants are the children of the previous sibling, followed by the indented blocks.
-			replaceBlocks(
-				[ previousSiblingId, ...clientIds ],
-				[ newListItem ]
+		// We get the selection start/end here, because when
+		// we replace blocks, the selection is updated too.
+		const selectionStart = getSelectionStart();
+		const selectionEnd = getSelectionEnd();
+		// Replace the previous sibling of the block being indented and the indented blocks,
+		// with a new block whose attributes are equal to the ones of the previous sibling and
+		// whose descendants are the children of the previous sibling, followed by the indented blocks.
+		replaceBlocks( [ previousSiblingId, ...clientIds ], [ newListItem ] );
+		if ( ! _hasMultiSelection ) {
+			selectionChange(
+				clonedBlocks[ 0 ].clientId,
+				selectionEnd.attributeKey,
+				selectionEnd.clientId === selectionStart.clientId
+					? selectionStart.offset
+					: selectionEnd.offset,
+				selectionEnd.offset
+			);
+		} else {
+			multiSelect(
+				clonedBlocks[ 0 ].clientId,
+				clonedBlocks[ clonedBlocks.length - 1 ].clientId
 			);
-			if ( ! _hasMultiSelection ) {
-				selectionChange(
-					clonedBlocks[ 0 ].clientId,
-					selectionEnd.attributeKey,
-					selectionEnd.clientId === selectionStart.clientId
-						? selectionStart.offset
-						: selectionEnd.offset,
-					selectionEnd.offset
-				);
-			} else {
-				multiSelect(
-					clonedBlocks[ 0 ].clientId,
-					clonedBlocks[ clonedBlocks.length - 1 ].clientId
-				);
-			}
-		}, [ clientId ] ),
-	];
+		}
+
+		return true;
+	}, [ clientId ] );
 }
diff --git a/packages/block-library/src/list-item/hooks/use-merge.js b/packages/block-library/src/list-item/hooks/use-merge.js
index 8c186b27f6dc9a..3fe755868df37d 100644
--- a/packages/block-library/src/list-item/hooks/use-merge.js
+++ b/packages/block-library/src/list-item/hooks/use-merge.js
@@ -9,8 +9,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import useOutdentListItem from './use-outdent-list-item';
 
-import { name as listItemName } from '../block.json';
-
 export default function useMerge( clientId, onMerge ) {
 	const registry = useRegistry();
 	const {
@@ -22,7 +20,7 @@ export default function useMerge( clientId, onMerge ) {
 	} = useSelect( blockEditorStore );
 	const { mergeBlocks, moveBlocksToPosition } =
 		useDispatch( blockEditorStore );
-	const [ , outdentListItem ] = useOutdentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
 
 	function getTrailingId( id ) {
 		const order = getBlockOrder( id );
@@ -37,8 +35,12 @@ export default function useMerge( clientId, onMerge ) {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
@@ -47,13 +49,17 @@ export default function useMerge( clientId, onMerge ) {
 	 * return the next list item of the parent list item if it exists.
 	 *
 	 * @param {string} id A list item client ID.
-	 * @return {string?} The client ID of the next list item.
+	 * @return {?string} The client ID of the next list item.
 	 */
 	function _getNextId( id ) {
 		const next = getNextBlockClientId( id );
-		if ( next ) return next;
+		if ( next ) {
+			return next;
+		}
 		const parentListItemId = getParentListItemId( id );
-		if ( ! parentListItemId ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
 		return _getNextId( parentListItemId );
 	}
 
@@ -62,7 +68,7 @@ export default function useMerge( clientId, onMerge ) {
 	 * line, regardless of indentation level.
 	 *
 	 * @param {string} id The client ID of the current list item.
-	 * @return {string?} The client ID of the next list item.
+	 * @return {?string} The client ID of the next list item.
 	 */
 	function getNextId( id ) {
 		const order = getBlockOrder( id );
@@ -78,6 +84,38 @@ export default function useMerge( clientId, onMerge ) {
 	}
 
 	return ( forward ) => {
+		function mergeWithNested( clientIdA, clientIdB ) {
+			registry.batch( () => {
+				// When merging a sub list item with a higher next list item, we
+				// also need to move any nested list items. Check if there's a
+				// listed list, and append its nested list items to the current
+				// list.
+				const [ nestedListClientId ] = getBlockOrder( clientIdB );
+				if ( nestedListClientId ) {
+					// If we are merging with the previous list item, and the
+					// previous list item does not have nested list, move the
+					// nested list to the previous list item.
+					if (
+						getPreviousBlockClientId( clientIdB ) === clientIdA &&
+						! getBlockOrder( clientIdA ).length
+					) {
+						moveBlocksToPosition(
+							[ nestedListClientId ],
+							clientIdB,
+							clientIdA
+						);
+					} else {
+						moveBlocksToPosition(
+							getBlockOrder( nestedListClientId ),
+							nestedListClientId,
+							getBlockRootClientId( clientIdA )
+						);
+					}
+				}
+				mergeBlocks( clientIdA, clientIdB );
+			} );
+		}
+
 		if ( forward ) {
 			const nextBlockClientId = getNextId( clientId );
 
@@ -89,14 +127,7 @@ export default function useMerge( clientId, onMerge ) {
 			if ( getParentListItemId( nextBlockClientId ) ) {
 				outdentListItem( nextBlockClientId );
 			} else {
-				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( nextBlockClientId ),
-						nextBlockClientId,
-						getPreviousBlockClientId( nextBlockClientId )
-					);
-					mergeBlocks( clientId, nextBlockClientId );
-				} );
+				mergeWithNested( clientId, nextBlockClientId );
 			}
 		} else {
 			// Merging is only done from the top level. For lowel levels, the
@@ -106,14 +137,7 @@ export default function useMerge( clientId, onMerge ) {
 				outdentListItem( clientId );
 			} else if ( previousBlockClientId ) {
 				const trailingId = getTrailingId( previousBlockClientId );
-				registry.batch( () => {
-					moveBlocksToPosition(
-						getBlockOrder( clientId ),
-						clientId,
-						previousBlockClientId
-					);
-					mergeBlocks( trailingId, clientId );
-				} );
+				mergeWithNested( trailingId, clientId );
 			} else {
 				onMerge( forward );
 			}
diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
index 870aeb5088f805..48bccc8f2cd4c1 100644
--- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
+++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
@@ -6,29 +6,8 @@ import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { cloneBlock } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { name as listItemName } from '../block.json';
-
-export default function useOutdentListItem( clientId ) {
+export default function useOutdentListItem() {
 	const registry = useRegistry();
-	const { canOutdent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockRootClientId, getBlockName } =
-				innerSelect( blockEditorStore );
-			const grandParentId = getBlockRootClientId(
-				getBlockRootClientId( clientId )
-			);
-			const grandParentName = getBlockName( grandParentId );
-			const isListItem = grandParentName === listItemName;
-
-			return {
-				canOutdent: isListItem,
-			};
-		},
-		[ clientId ]
-	);
 	const {
 		moveBlocksToPosition,
 		removeBlock,
@@ -48,73 +27,83 @@ export default function useOutdentListItem( clientId ) {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== listItemName ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
-	return [
-		canOutdent,
-		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			if ( ! Array.isArray( clientIds ) ) {
-				clientIds = [ clientIds ];
-			}
-
-			if ( ! clientIds.length ) return;
+	return useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
+		if ( ! Array.isArray( clientIds ) ) {
+			clientIds = [ clientIds ];
+		}
 
-			const firstClientId = clientIds[ 0 ];
+		if ( ! clientIds.length ) {
+			return;
+		}
 
-			// Can't outdent if it's not a list item.
-			if ( getBlockName( firstClientId ) !== listItemName ) return;
+		const firstClientId = clientIds[ 0 ];
 
-			const parentListItemId = getParentListItemId( firstClientId );
+		// Can't outdent if it's not a list item.
+		if ( getBlockName( firstClientId ) !== 'core/list-item' ) {
+			return;
+		}
 
-			// Can't outdent if it's at the top level.
-			if ( ! parentListItemId ) return;
+		const parentListItemId = getParentListItemId( firstClientId );
 
-			const parentListId = getBlockRootClientId( firstClientId );
-			const lastClientId = clientIds[ clientIds.length - 1 ];
-			const order = getBlockOrder( parentListId );
-			const followingListItems = order.slice(
-				getBlockIndex( lastClientId ) + 1
-			);
+		// Can't outdent if it's at the top level.
+		if ( ! parentListItemId ) {
+			return;
+		}
 
-			registry.batch( () => {
-				if ( followingListItems.length ) {
-					let nestedListId = getBlockOrder( firstClientId )[ 0 ];
+		const parentListId = getBlockRootClientId( firstClientId );
+		const lastClientId = clientIds[ clientIds.length - 1 ];
+		const order = getBlockOrder( parentListId );
+		const followingListItems = order.slice(
+			getBlockIndex( lastClientId ) + 1
+		);
 
-					if ( ! nestedListId ) {
-						const nestedListBlock = cloneBlock(
-							getBlock( parentListId ),
-							{},
-							[]
-						);
-						nestedListId = nestedListBlock.clientId;
-						insertBlock( nestedListBlock, 0, firstClientId, false );
-						// Immediately update the block list settings, otherwise
-						// blocks can't be moved here due to canInsert checks.
-						updateBlockListSettings(
-							nestedListId,
-							getBlockListSettings( parentListId )
-						);
-					}
+		registry.batch( () => {
+			if ( followingListItems.length ) {
+				let nestedListId = getBlockOrder( firstClientId )[ 0 ];
 
-					moveBlocksToPosition(
-						followingListItems,
-						parentListId,
-						nestedListId
+				if ( ! nestedListId ) {
+					const nestedListBlock = cloneBlock(
+						getBlock( parentListId ),
+						{},
+						[]
+					);
+					nestedListId = nestedListBlock.clientId;
+					insertBlock( nestedListBlock, 0, firstClientId, false );
+					// Immediately update the block list settings, otherwise
+					// blocks can't be moved here due to canInsert checks.
+					updateBlockListSettings(
+						nestedListId,
+						getBlockListSettings( parentListId )
 					);
 				}
+
 				moveBlocksToPosition(
-					clientIds,
+					followingListItems,
 					parentListId,
-					getBlockRootClientId( parentListItemId ),
-					getBlockIndex( parentListItemId ) + 1
+					nestedListId
 				);
-				if ( ! getBlockOrder( parentListId ).length ) {
-					removeBlock( parentListId );
-				}
-			} );
-		}, [] ),
-	];
+			}
+			moveBlocksToPosition(
+				clientIds,
+				parentListId,
+				getBlockRootClientId( parentListItemId ),
+				getBlockIndex( parentListItemId ) + 1
+			);
+			if ( ! getBlockOrder( parentListId ).length ) {
+				const shouldSelectParent = false;
+				removeBlock( parentListId, shouldSelectParent );
+			}
+		} );
+
+		return true;
+	}, [] );
 }
diff --git a/packages/block-library/src/list-item/hooks/use-space.js b/packages/block-library/src/list-item/hooks/use-space.js
index 6079b2c5edb281..ee4d8bdbf8786e 100644
--- a/packages/block-library/src/list-item/hooks/use-space.js
+++ b/packages/block-library/src/list-item/hooks/use-space.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
-import { SPACE } from '@wordpress/keycodes';
+import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
@@ -10,11 +10,13 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
 
 export default function useSpace( clientId ) {
-	const { getSelectionStart, getSelectionEnd } =
+	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+	const indentListItem = useIndentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
 
 	return useRefEffect(
 		( element ) => {
@@ -23,10 +25,8 @@ export default function useSpace( clientId ) {
 
 				if (
 					event.defaultPrevented ||
-					! canIndent ||
-					keyCode !== SPACE ||
+					( keyCode !== SPACE && keyCode !== TAB ) ||
 					// Only override when no modifiers are pressed.
-					shiftKey ||
 					altKey ||
 					metaKey ||
 					ctrlKey
@@ -40,8 +40,18 @@ export default function useSpace( clientId ) {
 					selectionStart.offset === 0 &&
 					selectionEnd.offset === 0
 				) {
-					event.preventDefault();
-					indentListItem();
+					if ( shiftKey ) {
+						// Note that backspace behaviour in defined in onMerge.
+						if ( keyCode === TAB ) {
+							if ( outdentListItem() ) {
+								event.preventDefault();
+							}
+						}
+					} else if ( getBlockIndex( clientId ) !== 0 ) {
+						if ( indentListItem() ) {
+							event.preventDefault();
+						}
+					}
 				}
 			}
 
@@ -50,6 +60,6 @@ export default function useSpace( clientId ) {
 				element.removeEventListener( 'keydown', onKeyDown );
 			};
 		},
-		[ canIndent, indentListItem ]
+		[ clientId, indentListItem ]
 	);
 }
diff --git a/packages/block-library/src/list-item/hooks/use-split.js b/packages/block-library/src/list-item/hooks/use-split.js
deleted file mode 100644
index 51ede7de45c453..00000000000000
--- a/packages/block-library/src/list-item/hooks/use-split.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { cloneBlock, createBlock } from '@wordpress/blocks';
-
-export default function useSplit( clientId ) {
-	// We can not rely on the isAfterOriginal parameter of the callback,
-	// because if the value after the split is empty isAfterOriginal is false
-	// while the value is in fact after the original. So to avoid that issue we use
-	// a flag where the first execution of the callback is false (it is the before value)
-	// and the second execution is true, it is the after value.
-	const isAfter = useRef( false );
-	const { getBlock } = useSelect( blockEditorStore );
-	return useCallback(
-		( value ) => {
-			const block = getBlock( clientId );
-			if ( isAfter.current ) {
-				return cloneBlock( block, {
-					content: value,
-				} );
-			}
-			isAfter.current = true;
-			return createBlock( block.name, {
-				...block.attributes,
-				content: value,
-			} );
-		},
-		[ clientId, getBlock ]
-	);
-}
diff --git a/packages/block-library/src/list-item/index.js b/packages/block-library/src/list-item/index.js
index 61756019baf920..07c5bb7fda9015 100644
--- a/packages/block-library/src/list-item/index.js
+++ b/packages/block-library/src/list-item/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { listItem as icon } from '@wordpress/icons';
+import { privateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -10,6 +11,8 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
+import { unlock } from '../lock-unlock';
 
 const { name } = metadata;
 
@@ -25,6 +28,8 @@ export const settings = {
 			content: attributes.content + attributesToMerge.content,
 		};
 	},
+	transforms,
+	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/list-item/transforms.js b/packages/block-library/src/list-item/transforms.js
new file mode 100644
index 00000000000000..7918b45a6b0279
--- /dev/null
+++ b/packages/block-library/src/list-item/transforms.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, cloneBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes, innerBlocks = [] ) => [
+				createBlock( 'core/paragraph', attributes ),
+				...innerBlocks.map( ( block ) => cloneBlock( block ) ),
+			],
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/list-item/utils.js b/packages/block-library/src/list-item/utils.js
index 41f242c84e0555..5e5b51a8af680c 100644
--- a/packages/block-library/src/list-item/utils.js
+++ b/packages/block-library/src/list-item/utils.js
@@ -1,33 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import { switchToBlockType } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { name as listItemName } from './block.json';
-import { name as listName } from '../list/block.json';
-
-export function createListItem( listItemAttributes, listAttributes, children ) {
-	return createBlock(
-		listItemName,
-		listItemAttributes,
-		! children?.length
-			? []
-			: [ createBlock( listName, listAttributes, children ) ]
-	);
+function convertBlockToList( block ) {
+	const list = switchToBlockType( block, 'core/list' );
+	if ( list ) {
+		return list;
+	}
+	const paragraph = switchToBlockType( block, 'core/paragraph' );
+	if ( ! paragraph ) {
+		return null;
+	}
+	return switchToBlockType( paragraph, 'core/list' );
 }
 
 export function convertToListItems( blocks ) {
 	const listItems = [];
 
 	for ( let block of blocks ) {
-		if ( block.name === listItemName ) {
+		if ( block.name === 'core/list-item' ) {
 			listItems.push( block );
-		} else if ( block.name === listName ) {
+		} else if ( block.name === 'core/list' ) {
 			listItems.push( ...block.innerBlocks );
-		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+		} else if ( ( block = convertBlockToList( block ) ) ) {
 			for ( const { innerBlocks } of block ) {
 				listItems.push( ...innerBlocks );
 			}
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index 4e1089b0887380..4a86def8d687b4 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -1,17 +1,18 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list",
 	"title": "List",
 	"category": "text",
-	"description": "Create a bulleted or numbered list.",
+	"allowedBlocks": [ "core/list-item" ],
+	"description": "An organized collection of items displayed in a specific order.",
 	"keywords": [ "bullet list", "ordered list", "numbered list" ],
 	"textdomain": "default",
 	"attributes": {
 		"ordered": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"values": {
 			"type": "string",
@@ -20,7 +21,7 @@
 			"multiline": "li",
 			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string"
@@ -37,7 +38,13 @@
 	},
 	"supports": {
 		"anchor": true,
-		"className": false,
+		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -61,11 +68,21 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__unstablePasteTextInline": true,
-		"__experimentalSelector": "ol,ul",
-		"__experimentalSlashInserter": true
+		"__experimentalOnMerge": true,
+		"__experimentalSlashInserter": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"selectors": {
+		"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
 	},
 	"editorStyle": "wp-block-list-editor",
 	"style": "wp-block-list"
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index cfd7e3039cee87..13804b7040ed46 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -1,20 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
-import { migrateToListV2 } from './utils';
+import { migrateToListV2, migrateTypeToInlineStyle } from './utils';
 
 const v0 = {
 	attributes: {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -23,7 +23,7 @@ const v0 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -74,7 +74,7 @@ const v1 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -83,7 +83,7 @@ const v1 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -138,6 +138,174 @@ const v1 = {
 	migrate: migrateToListV2,
 };
 
+// In #53301 changed to use the inline style instead of type attribute.
+const v2 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			role: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalSlashInserter: true,
+	},
+	isEligible( { type } ) {
+		return !! type;
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+	migrate: migrateTypeToInlineStyle,
+};
+
+// Version without block support 'className: true'.
+const v3 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			role: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalOnMerge: 'true',
+		__experimentalSlashInserter: true,
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName
+				{ ...useBlockProps.save( {
+					reversed,
+					start,
+					style: {
+						listStyleType:
+							ordered && type !== 'decimal' ? type : undefined,
+					},
+				} ) }
+			>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -146,4 +314,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1, v0 ];
+export default [ v3, v2, v1, v0 ];
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index 2d68aaf909f45e..73551cd9cdee80 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -29,6 +29,9 @@ import OrderedListSettings from './ordered-list-settings';
 import { migrateToListV2 } from './utils';
 import TagName from './tag-name';
 
+const DEFAULT_BLOCK = {
+	name: 'core/list-item',
+};
 const TEMPLATE = [ [ 'core/list-item' ] ];
 const NATIVE_MARGIN_SPACING = 8;
 
@@ -68,54 +71,46 @@ function useMigrateOnLoad( attributes, clientId ) {
 }
 
 function useOutdentList( clientId ) {
-	const { canOutdent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockRootClientId, getBlock } =
-				innerSelect( blockEditorStore );
-			const parentId = getBlockRootClientId( clientId );
-			return {
-				canOutdent:
-					!! parentId &&
-					getBlock( parentId ).name === 'core/list-item',
-			};
-		},
-		[ clientId ]
-	);
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
 	const { getBlockRootClientId, getBlockAttributes, getBlock } =
 		useSelect( blockEditorStore );
 
-	return [
-		canOutdent,
-		useCallback( () => {
-			const parentBlockId = getBlockRootClientId( clientId );
-			const parentBlockAttributes = getBlockAttributes( parentBlockId );
-			// Create a new parent block without the inner blocks.
-			const newParentBlock = createBlock(
-				'core/list-item',
-				parentBlockAttributes
-			);
-			const { innerBlocks } = getBlock( clientId );
-			// Replace the parent block with a new parent block without inner blocks,
-			// and make the inner blocks siblings of the parent.
-			replaceBlocks(
-				[ parentBlockId ],
-				[ newParentBlock, ...innerBlocks ]
-			);
-			// Select the last child of the list being outdent.
-			selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId );
-		}, [ clientId ] ),
-	];
+	return useCallback( () => {
+		const parentBlockId = getBlockRootClientId( clientId );
+		const parentBlockAttributes = getBlockAttributes( parentBlockId );
+		// Create a new parent block without the inner blocks.
+		const newParentBlock = createBlock(
+			'core/list-item',
+			parentBlockAttributes
+		);
+		const { innerBlocks } = getBlock( clientId );
+		// Replace the parent block with a new parent block without inner blocks,
+		// and make the inner blocks siblings of the parent.
+		replaceBlocks( [ parentBlockId ], [ newParentBlock, ...innerBlocks ] );
+		// Select the last child of the list being outdent.
+		selectionChange( innerBlocks[ innerBlocks.length - 1 ].clientId );
+	}, [ clientId ] );
 }
 
 function IndentUI( { clientId } ) {
-	const [ canOutdent, outdentList ] = useOutdentList( clientId );
+	const outdentList = useOutdentList( clientId );
+	const canOutdent = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
+			return (
+				getBlockName( getBlockRootClientId( clientId ) ) ===
+				'core/list-item'
+			);
+		},
+		[ clientId ]
+	);
 	return (
 		<>
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
-				describedBy={ __( 'Outdent list item' ) }
+				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ outdentList }
 			/>
@@ -124,29 +119,35 @@ function IndentUI( { clientId } ) {
 }
 
 export default function Edit( { attributes, setAttributes, clientId, style } ) {
+	const { ordered, type, reversed, start } = attributes;
 	const blockProps = useBlockProps( {
-		...( Platform.isNative && { style } ),
+		style: {
+			...( Platform.isNative && style ),
+			listStyleType: ordered && type !== 'decimal' ? type : undefined,
+		},
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list-item' ],
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: TEMPLATE,
 		templateLock: false,
 		templateInsertUpdatesSelection: true,
 		...( Platform.isNative && {
 			marginVertical: NATIVE_MARGIN_SPACING,
 			marginHorizontal: NATIVE_MARGIN_SPACING,
-			useCompactList: true,
+			renderAppender: false,
 		} ),
+		__experimentalCaptureToolbars: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );
-	const { ordered, type, reversed, start } = attributes;
 
 	const controls = (
 		<BlockControls group="block">
 			<ToolbarButton
 				icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
 				title={ __( 'Unordered' ) }
-				describedBy={ __( 'Convert to unordered list' ) }
+				description={ __( 'Convert to unordered list' ) }
 				isActive={ ordered === false }
 				onClick={ () => {
 					setAttributes( { ordered: false } );
@@ -155,7 +156,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
 				title={ __( 'Ordered' ) }
-				describedBy={ __( 'Convert to ordered list' ) }
+				description={ __( 'Convert to ordered list' ) }
 				isActive={ ordered === true }
 				onClick={ () => {
 					setAttributes( { ordered: true } );
@@ -171,16 +172,17 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 				ordered={ ordered }
 				reversed={ reversed }
 				start={ start }
-				type={ type }
 				{ ...innerBlocksProps }
 			/>
 			{ controls }
 			{ ordered && (
 				<OrderedListSettings
-					setAttributes={ setAttributes }
-					ordered={ ordered }
-					reversed={ reversed }
-					start={ start }
+					{ ...{
+						setAttributes,
+						reversed,
+						start,
+						type,
+					} }
 				/>
 			) }
 		</>
diff --git a/packages/block-library/src/list/index.php b/packages/block-library/src/list/index.php
new file mode 100644
index 00000000000000..1bffd813248575
--- /dev/null
+++ b/packages/block-library/src/list/index.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Adds the wp-block-list class to the rendered list block.
+ * Ensures that pre-existing list blocks use the class name on the front.
+ * For example, <ol> is transformed to <ol class="wp-block-list">.
+ *
+ * @since 6.6.0
+ *
+ * @see https://github.com/WordPress/gutenberg/issues/12420
+ *
+ * @param array  $attributes Attributes of the block being rendered.
+ * @param string $content Content of the block being rendered.
+ *
+ * @return string The content of the block being rendered.
+ */
+function block_core_list_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+
+	$list_tags = array( 'OL', 'UL' );
+	while ( $processor->next_tag() ) {
+		if ( in_array( $processor->get_tag(), $list_tags, true ) ) {
+			$processor->add_class( 'wp-block-list' );
+			break;
+		}
+	}
+
+	return $processor->get_updated_html();
+}
+
+/**
+ * Registers the `core/list` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_list() {
+	register_block_type_from_metadata(
+		__DIR__ . '/list',
+		array(
+			'render_callback' => 'block_core_list_render',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_list' );
diff --git a/packages/block-library/src/list/ordered-list-settings.js b/packages/block-library/src/list/ordered-list-settings.js
index 134f022ae643f1..66817669806233 100644
--- a/packages/block-library/src/list/ordered-list-settings.js
+++ b/packages/block-library/src/list/ordered-list-settings.js
@@ -3,12 +3,48 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { TextControl, PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	TextControl,
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+} from '@wordpress/components';
 
-const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
-		<PanelBody title={ __( 'Ordered list settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
+			<SelectControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'List style' ) }
+				options={ [
+					{
+						label: __( 'Numbers' ),
+						value: 'decimal',
+					},
+					{
+						label: __( 'Uppercase letters' ),
+						value: 'upper-alpha',
+					},
+					{
+						label: __( 'Lowercase letters' ),
+						value: 'lower-alpha',
+					},
+					{
+						label: __( 'Uppercase Roman numerals' ),
+						value: 'upper-roman',
+					},
+					{
+						label: __( 'Lowercase Roman numerals' ),
+						value: 'lower-roman',
+					},
+				] }
+				value={ type }
+				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
+			/>
 			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Start value' ) }
 				type="number"
 				onChange={ ( value ) => {
@@ -24,7 +60,8 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				step="1"
 			/>
 			<ToggleControl
-				label={ __( 'Reverse list numbering' ) }
+				__nextHasNoMarginBottom
+				label={ __( 'Reverse order' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {
 					setAttributes( {
diff --git a/packages/block-library/src/list/save.js b/packages/block-library/src/list/save.js
index c74893f38b67b2..d090f0faf4e883 100644
--- a/packages/block-library/src/list/save.js
+++ b/packages/block-library/src/list/save.js
@@ -7,7 +7,16 @@ export default function save( { attributes } ) {
 	const { ordered, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 	return (
-		<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+		<TagName
+			{ ...useBlockProps.save( {
+				reversed,
+				start,
+				style: {
+					listStyleType:
+						ordered && type !== 'decimal' ? type : undefined,
+				},
+			} ) }
+		>
 			<InnerBlocks.Content />
 		</TagName>
 	);
diff --git a/packages/block-library/src/list/style.scss b/packages/block-library/src/list/style.scss
index badf1b9e560ebd..c78b0bf1c74c0e 100644
--- a/packages/block-library/src/list/style.scss
+++ b/packages/block-library/src/list/style.scss
@@ -1,8 +1,8 @@
 ol,
 ul {
 	box-sizing: border-box;
+}
 
-	&.has-background {
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+:root :where(.wp-block-list.has-background) {
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }
diff --git a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
index 8bfe114fedf3f2..058ccc6b9ca635 100644
--- a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
@@ -2,7 +2,7 @@
 
 exports[`List block adds one item to the list 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First list item</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -10,9 +10,9 @@ exports[`List block adds one item to the list 1`] = `
 
 exports[`List block changes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 2</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -21,8 +21,8 @@ exports[`List block changes the indentation level 1`] = `
 `;
 
 exports[`List block changes to ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true} -->
-<ol><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -37,8 +37,8 @@ exports[`List block changes to ordered list 1`] = `
 `;
 
 exports[`List block changes to reverse ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
-<ol reversed><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"reversed":true} -->
+<ol reversed class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -54,7 +54,7 @@ exports[`List block changes to reverse ordered list 1`] = `
 
 exports[`List block inserts block 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->"
@@ -62,7 +62,7 @@ exports[`List block inserts block 1`] = `
 
 exports[`List block removes the indentation level 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -73,8 +73,8 @@ exports[`List block removes the indentation level 1`] = `
 `;
 
 exports[`List block sets a start value to an ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
-<ol start=\\"25\\"><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"start":25} -->
+<ol start="25" class="wp-block-list"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 
@@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `
 
 exports[`List block shows different indentation levels 1`] = `
 "<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>List item nested 1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>List item nested 2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Extra item 1</li>
 <!-- /wp:list-item -->
 
diff --git a/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..9e28f1c77de943
--- /dev/null
+++ b/packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>First Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Third Item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`List block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>First Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Third Item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`List block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">First Item</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Second Item</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Third Item</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`List block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>First Item</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second Item</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Third Item</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`List block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>First Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Third Item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></blockquote>
+<!-- /wp:quote -->"
+`;
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index 9defa338782dbe..2393f2820cfc2e 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -2,8 +2,9 @@
  * External dependencies
  */
 import {
-	changeTextOfRichText,
-	changeAndSelectTextOfRichText,
+	act,
+	selectRangeInRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -19,7 +20,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
-import { BACKSPACE } from '@wordpress/keycodes';
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 describe( 'List block', () => {
 	beforeAll( () => {
@@ -59,42 +60,45 @@ describe( 'List block', () => {
 
 	it( 'adds one item to the list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 1/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
 		fireEvent.press( listItemBlock );
 
 		const listItemField =
 			within( listBlock ).getByPlaceholderText( 'List' );
-		changeTextOfRichText( listItemField, 'First list item' );
+		typeInRichText( listItemField, 'First list item' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'shows different indentation levels', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>List item nested 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
 		<li>List item nested 2<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Extra item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -109,25 +113,26 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
-
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select second level list
-		const secondNestedLevelBlock = within(
+		const [ secondNestedLevelBlock ] = within(
 			firstNestedLevelBlock
-		).getByLabelText( /List Block\. Row 1/ );
+		).getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -135,7 +140,7 @@ describe( 'List block', () => {
 
 	it( 'changes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -143,63 +148,81 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select Secont List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 2/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 2/
+		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const indentButton = getByLabelText( 'Indent' );
+		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
+		// Await recently indented list item layout
+		const [ listItemBlock1 ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
+		await triggerBlockListLayout( listItemBlock1 );
+
+		// wait until inserter on the newly created indented block is enabled
+		// this is slightly delayed (by updating block list settings) and would
+		// trigger an "update not wrapped in act()" warning if not explicitly awaited.
+		screen.findByRole( 'button', { name: 'Add block', disabled: false } );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'removes the indentation level', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 2</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list --></li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select Inner block List
-		const innerBlockList = within( firstNestedLevelBlock ).getByLabelText(
-			/List Block\. Row 1/
-		);
+		const [ innerBlockList ] = within(
+			firstNestedLevelBlock
+		).getAllByLabelText( /List Block\. Row 1/ );
+		fireEvent.press( innerBlockList );
+		await triggerBlockListLayout( innerBlockList );
 
 		// Select nested List Item block
-		const listItemBlock = within( innerBlockList ).getByLabelText(
+		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const outdentButton = getByLabelText( 'Outdent' );
+		const outdentButton = screen.getByLabelText( 'Outdent' );
 		fireEvent.press( outdentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -207,7 +230,7 @@ describe( 'List block', () => {
 
 	it( 'changes to ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -218,16 +241,16 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -235,7 +258,7 @@ describe( 'List block', () => {
 
 	it( 'changes to reverse ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -246,27 +269,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = getByLabelText( /Reverse list numbering\. Off/ );
+		const reverseButton = screen.getByLabelText( /Reverse order\. Off/ );
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -274,7 +297,7 @@ describe( 'List block', () => {
 
 	it( 'sets a start value to an ordered list', async () => {
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>Item 1</li>
 		<!-- /wp:list-item -->
 		<!-- wp:list-item -->
@@ -285,27 +308,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const startValueButton = getByLabelText( /Start value\. Empty/ );
+		const startValueButton = screen.getByLabelText( /Start value\. Empty/ );
 		fireEvent.press( startValueButton );
 		const startValueInput =
 			within( startValueButton ).getByDisplayValue( '' );
@@ -314,12 +337,155 @@ describe( 'List block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'merges with other lists', async () => {
+	it( 'splits empty list items into paragraphs', async () => {
+		// Arrange
 		const initialHtml = `<!-- wp:list -->
-		<ul><!-- wp:list-item -->
-		<li>One</li><!-- /wp:list-item --></ul>
-		<!-- /wp:list --><!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Two</li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 1/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 3 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		const listItemField2 = screen.getByLabelText( /Text input. Empty/ );
+		fireEvent( listItemField2, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
+	} );
+
+	it( 'merges paragraphs into list items', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:paragraph -->
+		<p>Two</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const paragraphField = screen.getByLabelText( /Text input. .*Two.*/ );
+		selectRangeInRichText( paragraphField, 0 );
+		fireEvent( paragraphField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul class="wp-block-list"><!-- 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 -->"
+	` );
+	} );
+
+	it( 'merges lists into lists', async () => {
+		// Arrange
+		const initialHtml = `<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->
+
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+		const screen = await initializeEditor( { initialHtml } );
+
+		// Act
+		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
+		const listItemField = screen.getByLabelText( /Text input\..*Three/ );
+		selectRangeInRichText( listItemField, 0 );
+		fireEvent( listItemField, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:list -->
+		<ul class="wp-block-list"><!-- 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 -->"
+	` );
+	} );
+
+	it( 'unwraps first item when attempting to merge with non-list block', async () => {
+		const initialHtml = `<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
 		<li>Two</li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
@@ -328,11 +494,12 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -340,8 +507,8 @@ describe( 'List block', () => {
 		// With cursor positioned at the beginning of the first List Item, press
 		// backward delete
 		const listItemField =
-			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'Two' );
+			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -349,26 +516,37 @@ describe( 'List block', () => {
 		} );
 
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
-			"<!-- wp:list -->
-			<ul><!-- wp:list-item -->
-			<li>One</li>
-			<!-- /wp:list-item -->
-
-			<!-- wp:list-item -->
-			<li>Two</li>
-			<!-- /wp:list-item --></ul>
-			<!-- /wp:list -->"
-		` );
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>One</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
+	` );
 	} );
 
-	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+	it( 'merges first item into its own paragraph block and keeps its nested items', async () => {
 		const initialHtml = `<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
 		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
-		<li>One</li><!-- /wp:list-item --><!-- wp:list-item -->
-		<li>Two</li><!-- /wp:list-item --></ul>
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>One<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
 		const screen = await initializeEditor( {
@@ -376,11 +554,12 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -389,12 +568,16 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'One' );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
 			keyCode: BACKSPACE,
 		} );
+		// Inner blocks batch store updates with microtasks.
+		// To avoid `act` warnings, we let queued microtasks to be executed.
+		// Reference: https://t.ly/b95nA
+		await act( async () => {} );
 
 		expect( getEditorHtml() ).toMatchInlineSnapshot( `
 		"<!-- wp:paragraph -->
@@ -405,9 +588,15 @@ describe( 'List block', () => {
 		<p>One</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:paragraph -->
-		<p>Two</p>
-		<!-- /wp:paragraph -->"
+		<!-- wp:list -->
+		<ul class="wp-block-list"><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>Three</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
 	` );
 	} );
 } );
diff --git a/packages/block-library/src/list/test/transforms.native.js b/packages/block-library/src/list/test/transforms.native.js
new file mode 100644
index 00000000000000..538d5b7ed0193e
--- /dev/null
+++ b/packages/block-library/src/list/test/transforms.native.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'List';
+const initialHtml = `
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>First Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Second Item</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Third Item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/list/transforms.js b/packages/block-library/src/list/transforms.js
index 2f11119768ef89..a6263d7ad639c7 100644
--- a/packages/block-library/src/list/transforms.js
+++ b/packages/block-library/src/list/transforms.js
@@ -114,17 +114,6 @@ const transforms = {
 				);
 			},
 		} ) ),
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( _attributes, childBlocks ) => {
-				return getListContentFlat( childBlocks ).map( ( content ) =>
-					createBlock( 'core/paragraph', {
-						content,
-					} )
-				);
-			},
-		},
 	],
 };
 
diff --git a/packages/block-library/src/list/utils.js b/packages/block-library/src/list/utils.js
index a80ce456e29ab0..60f3354cea426f 100644
--- a/packages/block-library/src/list/utils.js
+++ b/packages/block-library/src/list/utils.js
@@ -3,7 +3,15 @@
  */
 import { createBlock, rawHandler } from '@wordpress/blocks';
 
+const LIST_STYLES = {
+	A: 'upper-alpha',
+	a: 'lower-alpha',
+	I: 'upper-roman',
+	i: 'lower-roman',
+};
+
 export function createListBlockFromDOMElement( listElement ) {
+	const type = listElement.getAttribute( 'type' );
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
 		anchor: listElement.id === '' ? undefined : listElement.id,
@@ -11,7 +19,7 @@ export function createListBlockFromDOMElement( listElement ) {
 			? parseInt( listElement.getAttribute( 'start' ), 10 )
 			: undefined,
 		reversed: listElement.hasAttribute( 'reversed' ) ? true : undefined,
-		type: listElement.getAttribute( 'type' ) ?? undefined,
+		type: type && LIST_STYLES[ type ] ? LIST_STYLES[ type ] : undefined,
 	};
 
 	const innerBlocks = Array.from( listElement.children ).map(
@@ -56,7 +64,8 @@ export function createListBlockFromDOMElement( listElement ) {
 }
 
 export function migrateToListV2( attributes ) {
-	const { values, start, reversed, ordered, type } = attributes;
+	const { values, start, reversed, ordered, type, ...otherAttributes } =
+		attributes;
 
 	const list = document.createElement( ordered ? 'ol' : 'ul' );
 	list.innerHTML = values;
@@ -72,5 +81,21 @@ export function migrateToListV2( attributes ) {
 
 	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	return [ listBlock.attributes, listBlock.innerBlocks ];
+	return [
+		{ ...otherAttributes, ...listBlock.attributes },
+		listBlock.innerBlocks,
+	];
+}
+
+export function migrateTypeToInlineStyle( attributes ) {
+	const { type } = attributes;
+
+	if ( type && LIST_STYLES[ type ] ) {
+		return {
+			...attributes,
+			type: LIST_STYLES[ type ],
+		};
+	}
+
+	return attributes;
 }
diff --git a/packages/block-library/src/lock-unlock.ts b/packages/block-library/src/lock-unlock.ts
new file mode 100644
index 00000000000000..cc8ef7a811fff8
--- /dev/null
+++ b/packages/block-library/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/block-library'
+	);
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index 3db9d0040ce5fa..f2aaafd60fde05 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/loginout",
 	"title": "Login/out",
 	"category": "theme",
@@ -17,10 +17,47 @@
 			"default": true
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"className": true,
+		"color": {
+			"background": true,
+			"text": false,
+			"gradients": true,
+			"link": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
 		"typography": {
-			"fontSize": false
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
-	}
+	},
+	"style": "wp-block-loginout"
 }
diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js
index 64292a167e6a90..b6c2e9cf013041 100644
--- a/packages/block-library/src/loginout/edit.js
+++ b/packages/block-library/src/loginout/edit.js
@@ -13,6 +13,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }
 						onChange={ () =>
@@ -22,6 +23,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Redirect to current URL' ) }
 						checked={ redirectToCurrent }
 						onChange={ () =>
diff --git a/packages/block-library/src/loginout/index.php b/packages/block-library/src/loginout/index.php
index ac10ced20f3d1b..de90ebc12e379a 100644
--- a/packages/block-library/src/loginout/index.php
+++ b/packages/block-library/src/loginout/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/loginout` block on server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the login-out link or form.
@@ -39,6 +41,8 @@ function render_block_core_loginout( $attributes ) {
 
 /**
  * Registers the `core/loginout` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_loginout() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/loginout/style.scss b/packages/block-library/src/loginout/style.scss
new file mode 100644
index 00000000000000..f13bb5ded552dd
--- /dev/null
+++ b/packages/block-library/src/loginout/style.scss
@@ -0,0 +1,4 @@
+.wp-block-loginout {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 1c9fc0b6820f1e..0c2cfc4a14995a 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/media-text",
 	"title": "Media & Text",
 	"category": "media",
@@ -10,7 +10,7 @@
 	"attributes": {
 		"align": {
 			"type": "string",
-			"default": "wide"
+			"default": "none"
 		},
 		"mediaAlt": {
 			"type": "string",
@@ -18,7 +18,7 @@
 			"selector": "figure img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaPosition": {
 			"type": "string",
@@ -26,14 +26,14 @@
 		},
 		"mediaId": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaUrl": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure video,figure img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaLink": {
 			"type": "string"
@@ -52,7 +52,7 @@
 			"source": "attribute",
 			"selector": "figure a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -68,7 +68,7 @@
 		},
 		"mediaType": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaWidth": {
 			"type": "number",
@@ -89,14 +89,35 @@
 		},
 		"focalPoint": {
 			"type": "object"
+		},
+		"allowedBlocks": {
+			"type": "array"
+		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
@@ -119,6 +140,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",
diff --git a/packages/block-library/src/media-text/constants.js b/packages/block-library/src/media-text/constants.js
index 984193dbfb376a..db681870a90c08 100644
--- a/packages/block-library/src/media-text/constants.js
+++ b/packages/block-library/src/media-text/constants.js
@@ -1 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+export const WIDTH_CONSTRAINT_PERCENTAGE = 15;
+export const LINK_DESTINATION_MEDIA = 'media';
+export const LINK_DESTINATION_ATTACHMENT = 'attachment';
+export const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: _x( 'Content…', 'content placeholder' ),
+		},
+	],
+];
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 95595f8da6424b..24f239a41ed295 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,6 +12,7 @@ import {
 	useInnerBlocksProps,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +30,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
 		: {};
 };
 
+const v6ToV7ImageFillStyles = ( url, focalPoint ) => {
+	return url
+		? {
+				backgroundImage: `url(${ url })`,
+				backgroundPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+};
+
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
 
@@ -49,7 +62,21 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
-const baseAttributes = {
+// After align attribute's default was updated this function explicitly sets
+// the align value for deprecated blocks to the `wide` value which was default
+// for their versions of this block.
+const migrateDefaultAlign = ( attributes ) => {
+	if ( attributes.align ) {
+		return attributes;
+	}
+
+	return {
+		...attributes,
+		align: 'wide',
+	};
+};
+
+const v0Attributes = {
 	align: {
 		type: 'string',
 		default: 'wide',
@@ -77,12 +104,16 @@ const baseAttributes = {
 	},
 	isStackedOnMobile: {
 		type: 'boolean',
-		default: true,
+		default: false,
 	},
 };
 
 const v4ToV5BlockAttributes = {
-	...baseAttributes,
+	...v0Attributes,
+	isStackedOnMobile: {
+		type: 'boolean',
+		default: true,
+	},
 	mediaUrl: {
 		type: 'string',
 		source: 'attribute',
@@ -133,6 +164,54 @@ const v4ToV5BlockAttributes = {
 	},
 };
 
+const v6Attributes = {
+	...v4ToV5BlockAttributes,
+	mediaAlt: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure img',
+		attribute: 'alt',
+		default: '',
+		role: 'content',
+	},
+	mediaId: {
+		type: 'number',
+		role: 'content',
+	},
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+		role: 'content',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'href',
+		role: 'content',
+	},
+	mediaType: {
+		type: 'string',
+		role: 'content',
+	},
+};
+
+const v7Attributes = {
+	...v6Attributes,
+	align: {
+		type: 'string',
+		// v7 changed the default for the `align` attribute.
+		default: 'none',
+	},
+	// New attribute.
+	useFeaturedImage: {
+		type: 'boolean',
+		default: false,
+	},
+};
+
 const v4ToV5Supports = {
 	anchor: true,
 	align: [ 'wide', 'full' ],
@@ -143,6 +222,308 @@ const v4ToV5Supports = {
 	},
 };
 
+const v6Supports = {
+	...v4ToV5Supports,
+	color: {
+		gradients: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	spacing: {
+		margin: true,
+		padding: true,
+	},
+	typography: {
+		fontSize: true,
+		lineHeight: true,
+		__experimentalFontFamily: true,
+		__experimentalFontWeight: true,
+		__experimentalFontStyle: true,
+		__experimentalTextTransform: true,
+		__experimentalTextDecoration: true,
+		__experimentalLetterSpacing: true,
+		__experimentalDefaultControls: {
+			fontSize: true,
+		},
+	},
+};
+
+const v7Supports = {
+	...v6Supports,
+	__experimentalBorder: {
+		color: true,
+		radius: true,
+		style: true,
+		width: true,
+		__experimentalDefaultControls: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+	},
+	color: {
+		gradients: true,
+		heading: true,
+		link: true,
+		__experimentalDefaultControls: {
+			background: true,
+			text: true,
+		},
+	},
+	interactivity: {
+		clientNavigation: true,
+	},
+};
+
+// Version with 'none' as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/64981
+const v7 = {
+	attributes: v7Attributes,
+	supports: v7Supports,
+	usesContext: [ 'postId', 'postType' ],
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = ! rel ? undefined : rel;
+
+		const imageClasses = clsx( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = mediaUrl ? (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		) : null;
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = clsx( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
+// Version with wide as the default alignment.
+// See: https://github.com/WordPress/gutenberg/pull/48404
+const v6 = {
+	attributes: v6Attributes,
+	supports: v6Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = ! rel ? undefined : rel;
+
+		const imageClasses = clsx( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = clsx( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v6ToV7ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
+			return (
+				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
+					<figure
+						className="wp-block-media-text__media"
+						style={ backgroundStyles }
+					>
+						{ ( mediaTypeRenders[ mediaType ] || noop )() }
+					</figure>
+				</div>
+			);
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+	migrate: migrateDefaultAlign,
+	isEligible( attributes, innerBlocks, { block } ) {
+		const { attributes: finalizedAttributes } = block;
+		// When the align attribute defaults to none, valid block markup should
+		// not contain any alignment CSS class. Unfortunately, this
+		// deprecation's version of the block won't be invalidated due to the
+		// alignwide class still being in the markup. That is because the custom
+		// CSS classname support picks it up and adds it to the className
+		// attribute. At the time of parsing, the className attribute won't
+		// contain the alignwide class, hence the need to check the finalized
+		// block attributes.
+		return (
+			attributes.align === undefined &&
+			!! finalizedAttributes.className?.includes( 'alignwide' )
+		);
+	},
+};
+
+// Version with non-rounded background position attribute for focal point.
+// See: https://github.com/WordPress/gutenberg/pull/33915
 const v5 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -165,9 +546,9 @@ const v5 = {
 		} = attributes;
 		const mediaSizeSlug =
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -197,7 +578,7 @@ const v5 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -252,9 +633,11 @@ const v5 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
 // Version with CSS grid
+// See: https://github.com/WordPress/gutenberg/pull/40806
 const v4 = {
 	attributes: v4ToV5BlockAttributes,
 	supports: v4ToV5Supports,
@@ -277,9 +660,9 @@ const v4 = {
 		} = attributes;
 		const mediaSizeSlug =
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -310,7 +693,7 @@ const v4 = {
 			video: () => <video controls src={ mediaUrl } />,
 		};
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -348,11 +731,18 @@ const v4 = {
 			</div>
 		);
 	},
+	migrate: migrateDefaultAlign,
 };
 
+// Version with ad-hoc color attributes
+// See: https://github.com/WordPress/gutenberg/pull/21169
 const v3 = {
 	attributes: {
-		...baseAttributes,
+		...v0Attributes,
+		isStackedOnMobile: {
+			type: 'boolean',
+			default: true,
+		},
 		backgroundColor: {
 			type: 'string',
 		},
@@ -399,7 +789,7 @@ const v3 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -419,7 +809,7 @@ const v3 = {
 			linkTarget,
 			rel,
 		} = attributes;
-		const newRel = isEmpty( rel ) ? undefined : rel;
+		const newRel = ! rel ? undefined : rel;
 
 		let image = (
 			<img
@@ -454,7 +844,7 @@ const v3 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'has-background': backgroundClass || customBackgroundColor,
 			[ backgroundClass ]: backgroundClass,
@@ -496,9 +886,11 @@ const v3 = {
 	},
 };
 
+// Version with stack on mobile off by default
+// See: https://github.com/WordPress/gutenberg/pull/14364
 const v2 = {
 	attributes: {
-		...baseAttributes,
+		...v0Attributes,
 		backgroundColor: {
 			type: 'string',
 		},
@@ -521,7 +913,7 @@ const v2 = {
 			type: 'object',
 		},
 	},
-	migrate: migrateCustomColors,
+	migrate: compose( migrateCustomColors, migrateDefaultAlign ),
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -555,7 +947,7 @@ const v2 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
@@ -596,9 +988,11 @@ const v2 = {
 	},
 };
 
+// Version without the wp-image-#### class on image
+// See: https://github.com/WordPress/gutenberg/pull/11922
 const v1 = {
 	attributes: {
-		...baseAttributes,
+		...v0Attributes,
 		backgroundColor: {
 			type: 'string',
 		},
@@ -612,6 +1006,7 @@ const v1 = {
 			attribute: 'src',
 		},
 	},
+	migrate: migrateDefaultAlign,
 	save( { attributes } ) {
 		const {
 			backgroundColor,
@@ -631,7 +1026,7 @@ const v1 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
@@ -663,4 +1058,4 @@ const v1 = {
 	},
 };
 
-export default [ v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5a88830d385d18..a946a499b26f21 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { map, filter } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useState, useRef } from '@wordpress/element';
 import {
@@ -17,51 +16,47 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalImageURLInputUI as ImageURLInputUI,
-	__experimentalImageSizeControl as ImageSizeControl,
 	store as blockEditorStore,
+	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
 	ToolbarButton,
 	ExternalLink,
 	FocalPointPicker,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import MediaContainer from './media-container';
-import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
+import {
+	DEFAULT_MEDIA_SIZE_SLUG,
+	WIDTH_CONSTRAINT_PERCENTAGE,
+	LINK_DESTINATION_MEDIA,
+	LINK_DESTINATION_ATTACHMENT,
+	TEMPLATE,
+} from './constants';
+import { unlock } from '../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-/**
- * Constants
- */
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: _x( 'Content…', 'content placeholder' ),
-		},
-	],
-];
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
 // this limits the resize to a safe zone to avoid making broken layouts
-const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const applyWidthConstraints = ( width ) =>
 	Math.max(
 		WIDTH_CONSTRAINT_PERCENTAGE,
 		Math.min( width, 100 - WIDTH_CONSTRAINT_PERCENTAGE )
 	);
 
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-
 function getImageSourceUrlBySizeSlug( image, slug ) {
 	// eslint-disable-next-line camelcase
 	return image?.media_details?.sizes?.[ slug ]?.source_url;
@@ -137,7 +132,12 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
+function MediaTextEdit( {
+	attributes,
+	isSelected,
+	setAttributes,
+	context: { postId, postType },
+} ) {
 	const {
 		focalPoint,
 		href,
@@ -154,16 +154,53 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		mediaWidth,
 		rel,
 		verticalAlignment,
+		allowedBlocks,
+		useFeaturedImage,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
-	const { imageSizes, image, isContentLocked } = useSelect(
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const featuredImageMedia = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+
+	const featuredImageURL = useFeaturedImage
+		? featuredImageMedia?.source_url
+		: '';
+	const featuredImageAlt = useFeaturedImage
+		? featuredImageMedia?.alt_text
+		: '';
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			imageFill: false,
+			mediaType: 'image',
+			mediaId: undefined,
+			mediaUrl: undefined,
+			mediaAlt: undefined,
+			mediaLink: undefined,
+			linkDestination: undefined,
+			linkTarget: undefined,
+			linkClass: undefined,
+			rel: undefined,
+			href: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+		} );
+	};
+
+	const { imageSizes, image } = useSelect(
 		( select ) => {
-			const { __unstableGetContentLockingParent, getSettings } =
-				select( blockEditorStore );
+			const { getSettings } = select( blockEditorStore );
 			return {
-				isContentLocked:
-					!! __unstableGetContentLockingParent( clientId ),
 				image:
 					mediaId && isSelected
 						? select( coreStore ).getMedia( mediaId, {
@@ -173,15 +210,14 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				imageSizes: getSettings()?.imageSizes,
 			};
 		},
-
-		[ isSelected, mediaId, clientId ]
+		[ isSelected, mediaId ]
 	);
 
-	const refMediaContainer = useRef();
+	const refMedia = useRef();
 	const imperativeFocalPointPreview = ( value ) => {
-		const { style } = refMediaContainer.current.resizable;
+		const { style } = refMedia.current;
 		const { x, y } = value;
-		style.backgroundPosition = `${ x * 100 }% ${ y * 100 }%`;
+		style.objectPosition = `${ x * 100 }% ${ y * 100 }%`;
 	};
 
 	const [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );
@@ -199,15 +235,15 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( {
 			mediaWidth: applyWidthConstraints( width ),
 		} );
-		setTemporaryMediaWidth( applyWidthConstraints( width ) );
+		setTemporaryMediaWidth( null );
 	};
 
-	const classNames = classnames( {
+	const classNames = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		'is-image-fill': imageFill,
+		'is-image-fill-element': imageFill,
 	} );
 	const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 	const gridTemplateColumns =
@@ -225,12 +261,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
-	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
-			getImageSourceUrlBySizeSlug( image, slug )
-		),
-		( { name, slug } ) => ( { value: slug, label: name } )
-	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) )
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	const updateImage = ( newMediaSizeSlug ) => {
 		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
 
@@ -243,77 +276,146 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			mediaSizeSlug: newMediaSizeSlug,
 		} );
 	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const mediaTextGeneralSettings = (
-		<PanelBody title={ __( 'Settings' ) }>
-			<ToggleControl
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				setAttributes( {
+					isStackedOnMobile: true,
+					imageFill: false,
+					mediaAlt: '',
+					focalPoint: undefined,
+					mediaWidth: 50,
+					mediaSizeSlug: undefined,
+				} );
+			} }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			<ToolsPanelItem
+				label={ __( 'Media width' ) }
+				isShownByDefault
+				hasValue={ () => mediaWidth !== 50 }
+				onDeselect={ () => setAttributes( { mediaWidth: 50 } ) }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Media width' ) }
+					value={ temporaryMediaWidth || mediaWidth }
+					onChange={ commitWidthChange }
+					min={ WIDTH_CONSTRAINT_PERCENTAGE }
+					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }
-				checked={ isStackedOnMobile }
-				onChange={ () =>
-					setAttributes( {
-						isStackedOnMobile: ! isStackedOnMobile,
-					} )
+				isShownByDefault
+				hasValue={ () => ! isStackedOnMobile }
+				onDeselect={ () =>
+					setAttributes( { isStackedOnMobile: true } )
 				}
-			/>
-			{ mediaType === 'image' && (
+			>
 				<ToggleControl
-					label={ __( 'Crop image to fill entire column' ) }
-					checked={ imageFill }
+					__nextHasNoMarginBottom
+					label={ __( 'Stack on mobile' ) }
+					checked={ isStackedOnMobile }
 					onChange={ () =>
 						setAttributes( {
-							imageFill: ! imageFill,
+							isStackedOnMobile: ! isStackedOnMobile,
 						} )
 					}
 				/>
-			) }
-			{ imageFill && mediaUrl && mediaType === 'image' && (
-				<FocalPointPicker
-					label={ __( 'Focal point picker' ) }
-					url={ mediaUrl }
-					value={ focalPoint }
-					onChange={ ( value ) =>
-						setAttributes( { focalPoint: value } )
-					}
-					onDragStart={ imperativeFocalPointPreview }
-					onDrag={ imperativeFocalPointPreview }
-				/>
-			) }
+			</ToolsPanelItem>
 			{ mediaType === 'image' && (
-				<TextareaControl
-					label={ __( 'Alt text (alternative text)' ) }
-					value={ mediaAlt }
-					onChange={ onMediaAltChange }
-					help={
-						<>
-							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
-								{ __( 'Describe the purpose of the image' ) }
-							</ExternalLink>
-							{ __(
-								'Leave empty if the image is purely decorative.'
-							) }
-						</>
-					}
-				/>
+				<ToolsPanelItem
+					label={ __( 'Crop image to fill' ) }
+					isShownByDefault
+					hasValue={ () => !! imageFill }
+					onDeselect={ () => setAttributes( { imageFill: false } ) }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Crop image to fill' ) }
+						checked={ !! imageFill }
+						onChange={ () =>
+							setAttributes( {
+								imageFill: ! imageFill,
+							} )
+						}
+					/>
+				</ToolsPanelItem>
 			) }
-			{ mediaType === 'image' && (
-				<ImageSizeControl
-					onChangeImage={ updateImage }
-					slug={ mediaSizeSlug }
-					imageSizeOptions={ imageSizeOptions }
-					isResizable={ false }
-					imageSizeHelp={ __( 'Select which image size to load.' ) }
-				/>
+			{ imageFill &&
+				( mediaUrl || featuredImageURL ) &&
+				mediaType === 'image' && (
+					<ToolsPanelItem
+						label={ __( 'Focal point' ) }
+						isShownByDefault
+						hasValue={ () => !! focalPoint }
+						onDeselect={ () =>
+							setAttributes( { focalPoint: undefined } )
+						}
+					>
+						<FocalPointPicker
+							__nextHasNoMarginBottom
+							label={ __( 'Focal point' ) }
+							url={
+								useFeaturedImage && featuredImageURL
+									? featuredImageURL
+									: mediaUrl
+							}
+							value={ focalPoint }
+							onChange={ ( value ) =>
+								setAttributes( { focalPoint: value } )
+							}
+							onDragStart={ imperativeFocalPointPreview }
+							onDrag={ imperativeFocalPointPreview }
+						/>
+					</ToolsPanelItem>
+				) }
+			{ mediaType === 'image' && mediaUrl && ! useFeaturedImage && (
+				<ToolsPanelItem
+					label={ __( 'Alternative text' ) }
+					isShownByDefault
+					hasValue={ () => !! mediaAlt }
+					onDeselect={ () => setAttributes( { mediaAlt: '' } ) }
+				>
+					<TextareaControl
+						__nextHasNoMarginBottom
+						label={ __( 'Alternative text' ) }
+						value={ mediaAlt }
+						onChange={ onMediaAltChange }
+						help={
+							<>
+								<ExternalLink
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</ExternalLink>
+								<br />
+								{ __( 'Leave empty if decorative.' ) }
+							</>
+						}
+					/>
+				</ToolsPanelItem>
 			) }
-			{ mediaUrl && (
-				<RangeControl
-					label={ __( 'Media width' ) }
-					value={ temporaryMediaWidth || mediaWidth }
-					onChange={ commitWidthChange }
-					min={ WIDTH_CONSTRAINT_PERCENTAGE }
-					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+			{ mediaType === 'image' && ! useFeaturedImage && (
+				<ResolutionTool
+					value={ mediaSizeSlug }
+					options={ imageSizeOptions }
+					onChange={ updateImage }
 				/>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 
 	const blockProps = useBlockProps( {
@@ -323,14 +425,16 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: 'wp-block-media-text__content' },
-		{ template: TEMPLATE }
+		{ template: TEMPLATE, allowedBlocks }
 	);
 
+	const blockEditingMode = useBlockEditingMode();
+
 	return (
 		<>
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
-				{ ! isContentLocked && (
+				{ blockEditingMode === 'default' && (
 					<>
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
@@ -355,7 +459,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					</>
 				) }
 
-				{ mediaType === 'image' && (
+				{ mediaType === 'image' && ! useFeaturedImage && (
 					<ImageURLInputUI
 						url={ href || '' }
 						onChangeUrl={ onSetHref }
@@ -376,7 +480,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					onSelectMedia={ onSelectMedia }
 					onWidthChange={ onWidthChange }
 					commitWidthChange={ commitWidthChange }
-					ref={ refMediaContainer }
+					refMedia={ refMedia }
+					enableResize={ blockEditingMode === 'default' }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -388,7 +494,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
-						isContentLocked,
+						useFeaturedImage,
+						featuredImageURL,
+						featuredImageAlt,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }
diff --git a/packages/block-library/src/media-text/edit.native.js b/packages/block-library/src/media-text/edit.native.js
index 7c294912073b78..a5ccb007bdf5c2 100644
--- a/packages/block-library/src/media-text/edit.native.js
+++ b/packages/block-library/src/media-text/edit.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { View } from 'react-native';
 
 /**
@@ -32,12 +31,12 @@ import { pullLeft, pullRight, replace } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { WIDTH_CONSTRAINT_PERCENTAGE } from './constants';
 import MediaContainer from './media-container';
 import styles from './style.scss';
 
 const TEMPLATE = [ [ 'core/paragraph' ] ];
 // this limits the resize to a safe zone to avoid making broken layouts
-const WIDTH_CONSTRAINT_PERCENTAGE = 15;
 const BREAKPOINTS = {
 	mobile: 480,
 };
@@ -53,6 +52,7 @@ class MediaTextEdit extends Component {
 
 		this.onSelectMedia = this.onSelectMedia.bind( this );
 		this.onMediaUpdate = this.onMediaUpdate.bind( this );
+		this.onMediaThumbnailUpdate = this.onMediaThumbnailUpdate.bind( this );
 		this.onWidthChange = this.onWidthChange.bind( this );
 		this.commitWidthChange = this.commitWidthChange.bind( this );
 		this.onLayoutChange = this.onLayoutChange.bind( this );
@@ -99,13 +99,8 @@ class MediaTextEdit extends Component {
 		if ( mediaType === 'image' && media.sizes ) {
 			// Try the "large" size URL, falling back to the "full" size URL below.
 			src =
-				get( media, [ 'sizes', 'large', 'url' ] ) ||
-				get( media, [
-					'media_details',
-					'sizes',
-					'large',
-					'source_url',
-				] );
+				media.sizes.large?.url ||
+				media?.media_details?.sizes?.large?.source_url;
 		}
 
 		setAttributes( {
@@ -127,6 +122,14 @@ class MediaTextEdit extends Component {
 		} );
 	}
 
+	onMediaThumbnailUpdate( mediaUrl ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( {
+			mediaUrl,
+		} );
+	}
+
 	onWidthChange( width ) {
 		this.setState( {
 			mediaWidth: applyWidthConstraints( width ),
@@ -188,7 +191,7 @@ class MediaTextEdit extends Component {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
-						label={ __( 'Crop image to fill entire column' ) }
+						label={ __( 'Crop image to fill' ) }
 						checked={ imageFill }
 						onChange={ this.onSetImageFill }
 					/>
@@ -227,6 +230,7 @@ class MediaTextEdit extends Component {
 				onFocus={ this.props.onFocus }
 				onMediaSelected={ this.onMediaSelected }
 				onMediaUpdate={ this.onMediaUpdate }
+				onMediaThumbnailUpdate={ this.onMediaThumbnailUpdate }
 				onSelectMedia={ this.onSelectMedia }
 				onSetOpenPickerRef={ this.onSetOpenPickerRef }
 				onWidthChange={ this.onWidthChange }
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 895de65511c131..639ceaed8ea99c 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -26,7 +26,10 @@
 	width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
 	// The resizer sets an inline height but for the image fill we set it to full height.
 	height: 100% !important;
 }
@@ -34,3 +37,8 @@
 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+	min-height: 205px;
+}
diff --git a/packages/block-library/src/media-text/icon-retry.native.js b/packages/block-library/src/media-text/icon-retry.native.js
index 580cd1fff188f5..d9b3d82e796cb0 100644
--- a/packages/block-library/src/media-text/icon-retry.native.js
+++ b/packages/block-library/src/media-text/icon-retry.native.js
@@ -6,6 +6,6 @@ import { Path, SVG } from '@wordpress/components';
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill={ 'none' } />
+		<Path d="M0 0h24v24H0z" fill="none" />
 	</SVG>
 );
diff --git a/packages/block-library/src/media-text/image-fill.js b/packages/block-library/src/media-text/image-fill.js
new file mode 100644
index 00000000000000..c277c49b5c310b
--- /dev/null
+++ b/packages/block-library/src/media-text/image-fill.js
@@ -0,0 +1,11 @@
+export function imageFillStyles( url, focalPoint ) {
+	return url
+		? {
+				objectPosition: focalPoint
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
+					: `50% 50%`,
+		  }
+		: {};
+}
diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php
new file mode 100644
index 00000000000000..b65137b150ba53
--- /dev/null
+++ b/packages/block-library/src/media-text/index.php
@@ -0,0 +1,131 @@
+<?php
+/**
+ * Server-side rendering of the `core/media-text` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/media-text` block on server.
+ *
+ * @since 6.6.0
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block rendered content.
+ *
+ * @return string Returns the Media & Text block markup, if useFeaturedImage is true.
+ */
+function render_block_core_media_text( $attributes, $content ) {
+	if ( false === $attributes['useFeaturedImage'] ) {
+		return $content;
+	}
+
+	if ( in_the_loop() ) {
+		update_post_thumbnail_cache();
+	}
+
+	$current_featured_image = get_the_post_thumbnail_url();
+	if ( ! $current_featured_image ) {
+		return $content;
+	}
+
+	$has_media_on_right = isset( $attributes['mediaPosition'] ) && 'right' === $attributes['mediaPosition'];
+	$image_fill         = isset( $attributes['imageFill'] ) && $attributes['imageFill'];
+	$focal_point        = isset( $attributes['focalPoint'] ) ? round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%' : '50% 50%';
+	$unique_id          = 'wp-block-media-text__media-' . wp_unique_id();
+
+	$block_tag_processor = new WP_HTML_Tag_Processor( $content );
+	$block_query         = array(
+		'tag_name'   => 'div',
+		'class_name' => 'wp-block-media-text',
+	);
+
+	while ( $block_tag_processor->next_tag( $block_query ) ) {
+		if ( $image_fill ) {
+			// The markup below does not work with the deprecated `is-image-fill` class.
+			$block_tag_processor->remove_class( 'is-image-fill' );
+			$block_tag_processor->add_class( 'is-image-fill-element' );
+		}
+	}
+
+	$content = $block_tag_processor->get_updated_html();
+
+	$media_tag_processor   = new WP_HTML_Tag_Processor( $content );
+	$wrapping_figure_query = array(
+		'tag_name'   => 'figure',
+		'class_name' => 'wp-block-media-text__media',
+	);
+
+	if ( $has_media_on_right ) {
+		// Loop through all the figure tags and set a bookmark on the last figure tag.
+		while ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			$media_tag_processor->set_bookmark( 'last_figure' );
+		}
+		if ( $media_tag_processor->has_bookmark( 'last_figure' ) ) {
+			$media_tag_processor->seek( 'last_figure' );
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
+		}
+	} else {
+		if ( $media_tag_processor->next_tag( $wrapping_figure_query ) ) {
+			// Insert a unique ID to identify the figure tag.
+			$media_tag_processor->set_attribute( 'id', $unique_id );
+		}
+	}
+
+	$content = $media_tag_processor->get_updated_html();
+
+	// Add the image tag inside the figure tag, and update the image attributes
+	// in order to display the featured image.
+	$media_size_slug = isset( $attributes['mediaSizeSlug'] ) ? $attributes['mediaSizeSlug'] : 'full';
+	$image_tag       = '<img class="wp-block-media-text__featured_image">';
+	$content         = preg_replace(
+		'/(<figure\s+id="' . preg_quote( $unique_id, '/' ) . '"\s+class="wp-block-media-text__media"\s*>)/',
+		'$1' . $image_tag,
+		$content
+	);
+
+	$image_tag_processor = new WP_HTML_Tag_Processor( $content );
+	if ( $image_tag_processor->next_tag(
+		array(
+			'tag_name' => 'figure',
+			'id'       => $unique_id,
+		)
+	) ) {
+		// The ID is only used to ensure that the correct figure tag is selected,
+		// and can now be removed.
+		$image_tag_processor->remove_attribute( 'id' );
+		if ( $image_tag_processor->next_tag(
+			array(
+				'tag_name'   => 'img',
+				'class_name' => 'wp-block-media-text__featured_image',
+			)
+		) ) {
+			$image_tag_processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+			$image_tag_processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+			$image_tag_processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
+			if ( $image_fill ) {
+				$image_tag_processor->set_attribute( 'style', 'object-position:' . $focal_point . ';' );
+			}
+
+			$content = $image_tag_processor->get_updated_html();
+		}
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/media-text` block renderer on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_media_text() {
+	register_block_type_from_metadata(
+		__DIR__ . '/media-text',
+		array(
+			'render_callback' => 'render_block_core_media_text',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_media_text' );
diff --git a/packages/block-library/src/media-text/media-container-icon.js b/packages/block-library/src/media-text/media-container-icon.js
deleted file mode 100644
index e5eb65d261dc58..00000000000000
--- a/packages/block-library/src/media-text/media-container-icon.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/components';
-
-export default (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18 2l2 4h-2l-2-4h-3l2 4h-2l-2-4h-1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2zm2 12H10V4.4L11.8 8H20z" />
-		<Path d="M14 20H4V10h3V8H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3h-2z" />
-		<Path d="M5 19h8l-1.59-2H9.24l-.84 1.1L7 16.3 5 19z" />
-	</SVG>
-);
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index f2bdb475bae345..735aaf73b88aae 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { ResizableBox, Spinner } from '@wordpress/components';
+import { ResizableBox, Spinner, Placeholder } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
@@ -20,11 +20,12 @@ import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import icon from './media-container-icon';
+import { imageFillStyles } from './image-fill';
 
 /**
  * Constants
@@ -32,19 +33,6 @@ import icon from './media-container-icon';
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const noop = () => {};
 
-export function imageFillStyles( url, focalPoint ) {
-	return url
-		? {
-				backgroundImage: `url(${ url })`,
-				backgroundPosition: focalPoint
-					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
-							focalPoint.y * 100
-					  ) }%`
-					: `50% 50%`,
-		  }
-		: {};
-}
-
 const ResizableBoxContainer = forwardRef(
 	( { isSelected, isStackedOnMobile, ...props }, ref ) => {
 		const isMobile = useViewportMatch( 'small', '<' );
@@ -60,7 +48,13 @@ const ResizableBoxContainer = forwardRef(
 	}
 );
 
-function ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) {
+function ToolbarEditButton( {
+	mediaId,
+	mediaUrl,
+	onSelectMedia,
+	toggleUseFeaturedImage,
+	useFeaturedImage,
+} ) {
 	return (
 		<BlockControls group="other">
 			<MediaReplaceFlow
@@ -69,12 +63,20 @@ function ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) {
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
+				onToggleFeaturedImage={ toggleUseFeaturedImage }
+				useFeaturedImage={ useFeaturedImage }
+				onReset={ () => onSelectMedia( undefined ) }
 			/>
 		</BlockControls>
 	);
 }
 
-function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) {
+function PlaceholderContainer( {
+	className,
+	mediaUrl,
+	onSelectMedia,
+	toggleUseFeaturedImage,
+} ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const onUploadError = ( message ) => {
@@ -90,6 +92,7 @@ function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) {
 			className={ className }
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"
+			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			onError={ onUploadError }
 			disableMediaButtons={ mediaUrl }
@@ -113,14 +116,19 @@ function MediaContainer( props, ref ) {
 		mediaWidth,
 		onSelectMedia,
 		onWidthChange,
-		isContentLocked,
+		enableResize,
+		toggleUseFeaturedImage,
+		useFeaturedImage,
+		featuredImageURL,
+		featuredImageAlt,
+		refMedia,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
 
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
-	if ( mediaUrl ) {
+	if ( mediaUrl || featuredImageURL || useFeaturedImage ) {
 		const onResizeStart = () => {
 			toggleSelection( false );
 		};
@@ -132,29 +140,45 @@ function MediaContainer( props, ref ) {
 			commitWidthChange( parseInt( elt.style.width ) );
 		};
 		const enablePositions = {
-			right: ! isContentLocked && mediaPosition === 'left',
-			left: ! isContentLocked && mediaPosition === 'right',
+			right: enableResize && mediaPosition === 'left',
+			left: enableResize && mediaPosition === 'right',
 		};
 
-		const backgroundStyles =
+		const positionStyles =
 			mediaType === 'image' && imageFill
-				? imageFillStyles( mediaUrl, focalPoint )
+				? imageFillStyles( mediaUrl || featuredImageURL, focalPoint )
 				: {};
 
 		const mediaTypeRenderers = {
-			image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
-			video: () => <video controls src={ mediaUrl } />,
+			image: () =>
+				useFeaturedImage && featuredImageURL ? (
+					<img
+						ref={ refMedia }
+						src={ featuredImageURL }
+						alt={ featuredImageAlt }
+						style={ positionStyles }
+					/>
+				) : (
+					mediaUrl && (
+						<img
+							ref={ refMedia }
+							src={ mediaUrl }
+							alt={ mediaAlt }
+							style={ positionStyles }
+						/>
+					)
+				),
+			video: () => <video controls ref={ refMedia } src={ mediaUrl } />,
 		};
 
 		return (
 			<ResizableBoxContainer
 				as="figure"
-				className={ classnames(
+				className={ clsx(
 					className,
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }
 				) }
-				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
 				minWidth="10%"
 				maxWidth="100%"
@@ -169,12 +193,24 @@ function MediaContainer( props, ref ) {
 			>
 				<ToolbarEditButton
 					onSelectMedia={ onSelectMedia }
-					mediaUrl={ mediaUrl }
+					mediaUrl={
+						useFeaturedImage && featuredImageURL
+							? featuredImageURL
+							: mediaUrl
+					}
 					mediaId={ mediaId }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }
-				<PlaceholderContainer { ...props } />
+				{ ! useFeaturedImage && <PlaceholderContainer { ...props } /> }
+				{ ! featuredImageURL && useFeaturedImage && (
+					<Placeholder
+						className="wp-block-media-text--placeholder-image"
+						style={ positionStyles }
+						withIllustration
+					/>
+				) }
 			</ResizableBoxContainer>
 		);
 	}
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
index a131abc9deba6c..3bf4fbf25d8f2a 100644
--- a/packages/block-library/src/media-text/media-container.native.js
+++ b/packages/block-library/src/media-text/media-container.native.js
@@ -26,12 +26,12 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import icon from './media-container-icon';
 import SvgIconRetry from './icon-retry';
 
 /**
@@ -44,8 +44,6 @@ const ICON_TYPE = {
 	RETRY: 'retry',
 };
 
-export { imageFillStyles } from './media-container.js';
-
 class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
@@ -130,10 +128,23 @@ class MediaContainer extends Component {
 		return <Icon icon={ icon } { ...iconStyle } />;
 	}
 
-	updateMediaProgress() {
-		if ( ! this.state.isUploadInProgress ) {
+	updateMediaProgress( payload ) {
+		const { isUploadInProgress } = this.state;
+		const { mediaUrl, state } = payload;
+		const { mediaType, onMediaThumbnailUpdate } = this.props;
+
+		if ( ! isUploadInProgress ) {
 			this.setState( { isUploadInProgress: true } );
 		}
+
+		if (
+			isUploadInProgress &&
+			mediaType === MEDIA_TYPE_IMAGE &&
+			mediaUrl &&
+			! state
+		) {
+			onMediaThumbnailUpdate( mediaUrl );
+		}
 	}
 
 	finishMediaUploadWithSuccess( payload ) {
@@ -170,7 +181,7 @@ class MediaContainer extends Component {
 			mediaWidth,
 			shouldStack,
 		} = this.props;
-		const { isUploadFailed, retryMessage } = params;
+		const { isUploadFailed, isUploadPaused, retryMessage } = params;
 		const focalPointValues = ! focalPoint
 			? IMAGE_DEFAULT_FOCAL_POINT
 			: focalPoint;
@@ -203,6 +214,7 @@ class MediaContainer extends Component {
 							focalPoint={ imageFill && focalPointValues }
 							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
+							isUploadPaused={ isUploadPaused }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={
 								this.onSelectMediaUploadOption
@@ -264,7 +276,7 @@ class MediaContainer extends Component {
 										isSelected={ isSelected }
 										style={ styles.video }
 										source={ { uri: mediaUrl } }
-										paused={ true }
+										paused
 									/>
 								</View>
 							) }
@@ -316,6 +328,7 @@ class MediaContainer extends Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ this.props.onFocus }
+				className="no-block-outline"
 			/>
 		);
 	}
@@ -327,7 +340,7 @@ class MediaContainer extends Component {
 		if ( mediaUrl ) {
 			return (
 				<MediaUpload
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ this.onSelectMediaUploadOption }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ mediaId }
@@ -339,6 +352,9 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
+									enablePausedUploads={
+										mediaType === MEDIA_TYPE_IMAGE
+									}
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 9c8607278cbe9b..3e660d94e789ee 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +11,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { imageFillStyles } from './media-container';
+import { imageFillStyles } from './image-fill';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
@@ -36,20 +35,25 @@ export default function save( { attributes } ) {
 		rel,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 
-	const imageClasses = classnames( {
+	const imageClasses = clsx( {
 		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
 
-	let image = (
+	const positionStyles = imageFill
+		? imageFillStyles( mediaUrl, focalPoint )
+		: {};
+
+	let image = mediaUrl ? (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
 			className={ imageClasses || null }
+			style={ positionStyles }
 		/>
-	);
+	) : null;
 
 	if ( href ) {
 		image = (
@@ -68,15 +72,12 @@ export default function save( { attributes } ) {
 		image: () => image,
 		video: () => <video controls src={ mediaUrl } />,
 	};
-	const className = classnames( {
+	const className = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-		'is-image-fill': imageFill,
+		'is-image-fill-element': imageFill,
 	} );
-	const backgroundStyles = imageFill
-		? imageFillStyles( mediaUrl, focalPoint )
-		: {};
 
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
@@ -97,10 +98,7 @@ export default function save( { attributes } ) {
 						className: 'wp-block-media-text__content',
 					} ) }
 				/>
-				<figure
-					className="wp-block-media-text__media"
-					style={ backgroundStyles }
-				>
+				<figure className="wp-block-media-text__media">
 					{ ( mediaTypeRenders[ mediaType ] || noop )() }
 				</figure>
 			</div>
@@ -108,10 +106,7 @@ export default function save( { attributes } ) {
 	}
 	return (
 		<div { ...useBlockProps.save( { className, style } ) }>
-			<figure
-				className="wp-block-media-text__media"
-				style={ backgroundStyles }
-			>
+			<figure className="wp-block-media-text__media">
 				{ ( mediaTypeRenders[ mediaType ] || noop )() }
 			</figure>
 			<div
diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
index 07b584059203ed..4c0f80a5008a8d 100644
--- a/packages/block-library/src/media-text/style.native.scss
+++ b/packages/block-library/src/media-text/style.native.scss
@@ -7,6 +7,7 @@ $media-to-text: 12px;
 }
 
 .has-media-on-the-right {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 	flex-direction: row-reverse;
 }
 
@@ -14,6 +15,7 @@ $media-to-text: 12px;
 	flex-direction: column;
 
 	&.has-media-on-the-right {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 		flex-direction: column-reverse;
 	}
 }
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index e43961ac890973..727380a3759c6e 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -15,27 +15,28 @@
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: start;
 	}
 }
+
 .wp-block-media-text,
 .wp-block-media-text.is-vertically-aligned-center {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: center;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	.wp-block-media-text__content,
-	.wp-block-media-text__media {
+	> .wp-block-media-text__content,
+	> .wp-block-media-text__media {
 		align-self: end;
 	}
 }
 
-.wp-block-media-text .wp-block-media-text__media {
+.wp-block-media-text > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
@@ -43,7 +44,7 @@
 	margin: 0;
 }
 
-.wp-block-media-text .wp-block-media-text__content {
+.wp-block-media-text > .wp-block-media-text__content {
 	direction: ltr;
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
@@ -53,20 +54,24 @@
 	word-break: break-word;
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
 	/*!rtl:begin:ignore*/
 	grid-column: 2;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
-.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
 	/*!rtl:begin:ignore*/
 	grid-column: 1;
 	grid-row: 1;
 	/*!rtl:end:ignore*/
 }
 
+.wp-block-media-text__media a {
+	display: block;
+}
+
 .wp-block-media-text__media img,
 .wp-block-media-text__media video {
 	height: auto;
@@ -75,18 +80,19 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media {
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media > a {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media > a {
 	display: block;
 	height: 100%;
 }
 
-.wp-block-media-text.is-image-fill .wp-block-media-text__media img {
+.wp-block-media-text.is-image-fill > .wp-block-media-text__media img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;
@@ -97,6 +103,26 @@
 	clip: rect(0, 0, 0, 0);
 	border: 0;
 }
+
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+	position: relative;
+	height: 100%;
+	min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+	display: block;
+	height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,
@@ -107,11 +133,11 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		.wp-block-media-text__media {
+		> .wp-block-media-text__media {
 			grid-column: 1;
 			grid-row: 1;
 		}
-		.wp-block-media-text__content {
+		> .wp-block-media-text__content {
 			grid-column: 1;
 			grid-row: 2;
 		}
diff --git a/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..b479b281be720f
--- /dev/null
+++ b/packages/block-library/src/media-text/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media & Text block transformations with Image to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Media & Text block transformations with Image to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":4674,"dimRatio":50,"align":"wide"} -->
+<div class="wp-block-cover alignwide"><img class="wp-block-cover__image-background wp-image-4674" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Media & Text block transformations with Image to Group block 1`] = `
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Media & Text block transformations with Image to Image block 1`] = `
+"<!-- wp:image {"id":4674} -->
+<figure class="wp-block-image"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-4674"/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Media & Text block transformations with Video to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Media & Text block transformations with Video to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":4675,"dimRatio":50,"backgroundType":"video","align":"wide"} -->
+<div class="wp-block-cover alignwide"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Media & Text block transformations with Video to Group block 1`] = `
+"<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide"><!-- wp:media-text {"align":"wide","mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Media & Text block transformations with Video to Video block 1`] = `
+"<!-- wp:video {"id":4675} -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure>
+<!-- /wp:video -->"
+`;
diff --git a/packages/block-library/src/media-text/test/edit.native.js b/packages/block-library/src/media-text/test/edit.native.js
new file mode 100644
index 00000000000000..230005adf8768f
--- /dev/null
+++ b/packages/block-library/src/media-text/test/edit.native.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestMediaPicker,
+	sendMediaUpload,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
+import { MEDIA_UPLOAD_STATE_PAUSED } from '@wordpress/block-editor';
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
+setupCoreBlocks( [ 'core/media-text' ] );
+
+describe( 'Media & Text block edit', () => {
+	it( 'should display an error message for failed video uploads', async () => {
+		requestMediaPicker.mockImplementation(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: 1,
+					url: 'file://video.mp4',
+					type: 'video',
+				} );
+			}
+		);
+		await initializeEditor();
+		await addBlock( screen, 'Media & Text' );
+		fireEvent.press( screen.getByText( 'Add image or video' ) );
+		fireEvent.press( screen.getByText( 'Choose from device' ) );
+
+		sendMediaUpload( {
+			mediaId: 1,
+			state: MEDIA_UPLOAD_STATE_PAUSED,
+			progress: 0,
+		} );
+
+		expect(
+			screen.getByText( 'Failed to insert media.\nTap for more info.' )
+		).toBeVisible();
+	} );
+} );
diff --git a/packages/block-library/src/media-text/test/image-fill.js b/packages/block-library/src/media-text/test/image-fill.js
new file mode 100644
index 00000000000000..4862fcbfb02453
--- /dev/null
+++ b/packages/block-library/src/media-text/test/image-fill.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from '../image-fill';
+
+describe( 'imageFillStyles()', () => {
+	it( 'should return centered object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg' );
+		expect( objectPosition ).toBe( '50% 50%' );
+	} );
+
+	it( 'should return custom object position', () => {
+		const { objectPosition } = imageFillStyles( 'image.jpg', {
+			x: 0.56,
+			y: 0.57,
+		} );
+		expect( objectPosition ).toBe( '56% 57%' );
+	} );
+} );
diff --git a/packages/block-library/src/media-text/test/media-container.js b/packages/block-library/src/media-text/test/media-container.js
deleted file mode 100644
index 582ec2be8d5ad8..00000000000000
--- a/packages/block-library/src/media-text/test/media-container.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Internal dependencies
- */
-import { imageFillStyles } from '../media-container';
-
-describe( 'imageFillStyles()', () => {
-	it( 'should return image url', () => {
-		const { backgroundImage } = imageFillStyles( 'image.jpg' );
-		expect( backgroundImage ).toBe( 'url(image.jpg)' );
-	} );
-
-	it( 'should return centered background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg' );
-		expect( backgroundPosition ).toBe( '50% 50%' );
-	} );
-
-	it( 'should return custom background position', () => {
-		const { backgroundPosition } = imageFillStyles( 'image.jpg', {
-			x: 0.56,
-			y: 0.57,
-		} );
-		expect( backgroundPosition ).toBe( '56% 57%' );
-	} );
-} );
diff --git a/packages/block-library/src/media-text/test/transforms.native.js b/packages/block-library/src/media-text/test/transforms.native.js
new file mode 100644
index 00000000000000..10e3f08410d6e9
--- /dev/null
+++ b/packages/block-library/src/media-text/test/transforms.native.js
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Media & Text';
+const initialHtmlWithImage = `
+<!-- wp:media-text {"mediaId":4674,"mediaType":"image","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" class="wp-image-4674 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Mountain</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->`;
+const initialHtmlWithVideo = `
+<!-- wp:media-text {"mediaId":4675,"mediaType":"video","isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size">Cloudup</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransformsWithImage = [
+	'Image',
+	'Cover',
+	...tranformsWithInnerBlocks,
+];
+const blockTransformsWithVideo = [
+	'Video',
+	'Cover',
+	...tranformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transformations`, () => {
+	describe( 'with Image', () => {
+		test.each( blockTransformsWithImage )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithImage,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithImage,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithImage.length
+			);
+		} );
+	} );
+
+	describe( 'with Video', () => {
+		test.each( blockTransformsWithVideo )(
+			'to %s block',
+			async ( blockTransform ) => {
+				const screen = await initializeEditor( {
+					initialHtml: initialHtmlWithVideo,
+				} );
+				const newBlock = await transformBlock(
+					screen,
+					block,
+					blockTransform,
+					{
+						isMediaBlock: true,
+						hasInnerBlocks:
+							tranformsWithInnerBlocks.includes( blockTransform ),
+					}
+				);
+				expect( newBlock ).toBeVisible();
+				expect( getEditorHtml() ).toMatchSnapshot();
+			}
+		);
+
+		it( 'matches expected transformation options', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: initialHtmlWithVideo,
+			} );
+			const transformOptions = await getBlockTransformOptions(
+				screen,
+				block
+			);
+			expect( transformOptions ).toHaveLength(
+				blockTransformsWithVideo.length
+			);
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js
index b80f94485ed09b..b4a3328d4508bf 100644
--- a/packages/block-library/src/media-text/transforms.js
+++ b/packages/block-library/src/media-text/transforms.js
@@ -42,6 +42,8 @@ const transforms = {
 					gradient,
 					id,
 					overlayColor,
+					style,
+					textColor,
 					url,
 				},
 				innerBlocks
@@ -66,6 +68,16 @@ const transforms = {
 					};
 				}
 
+				// Maintain custom text color block support value.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: {
+							...additionalAttributes.style?.color,
+							text: style.color.text,
+						},
+					};
+				}
+
 				return createBlock(
 					'core/media-text',
 					{
@@ -77,6 +89,7 @@ const transforms = {
 						mediaId: id,
 						mediaType: backgroundType,
 						mediaUrl: url,
+						textColor,
 						...additionalAttributes,
 					},
 					innerBlocks
@@ -135,6 +148,8 @@ const transforms = {
 			) => {
 				const additionalAttributes = {};
 
+				// Migrate the background styles or gradient to Cover's custom
+				// gradient and overlay properties.
 				if ( style?.color?.gradient ) {
 					additionalAttributes.customGradient = style.color.gradient;
 				} else if ( style?.color?.background ) {
@@ -142,6 +157,13 @@ const transforms = {
 						style.color.background;
 				}
 
+				// Maintain custom text color support style.
+				if ( style?.color?.text ) {
+					additionalAttributes.style = {
+						color: { text: style.color.text },
+					};
+				}
+
 				const coverAttributes = {
 					align,
 					alt: mediaAlt,
@@ -152,64 +174,15 @@ const transforms = {
 					gradient,
 					id: mediaId,
 					overlayColor: backgroundColor,
+					textColor,
 					url: mediaUrl,
 					...additionalAttributes,
 				};
-				const customTextColor = style?.color?.text;
-
-				// Attempt to maintain any text color selection.
-				// Cover block's do not opt into color block support so we
-				// cannot directly copy the color attributes across.
-				if ( ! textColor && ! customTextColor ) {
-					return createBlock(
-						'core/cover',
-						coverAttributes,
-						innerBlocks
-					);
-				}
-
-				const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {
-					const {
-						attributes: { style: innerStyle },
-					} = innerBlock;
-
-					// Only apply the media and text color if the inner block
-					// doesn't set its own color block support selection.
-					if (
-						innerBlock.attributes.textColor ||
-						innerStyle?.color?.text
-					) {
-						return innerBlock;
-					}
-
-					const newAttributes = { textColor };
-
-					// Only add or extend inner block's style object if we have
-					// a custom text color from the media & text block.
-					if ( customTextColor ) {
-						newAttributes.style = {
-							...innerStyle,
-							color: {
-								...innerStyle?.color,
-								text: customTextColor,
-							},
-						};
-					}
-
-					return createBlock(
-						innerBlock.name,
-						{
-							...innerBlock.attributes,
-							...newAttributes,
-						},
-						innerBlock.innerBlocks
-					);
-				} );
 
 				return createBlock(
 					'core/cover',
 					coverAttributes,
-					coloredInnerBlocks
+					innerBlocks
 				);
 			},
 		},
diff --git a/packages/block-library/src/missing/block.json b/packages/block-library/src/missing/block.json
index 9a44caa2485095..f9b3efe594753e 100644
--- a/packages/block-library/src/missing/block.json
+++ b/packages/block-library/src/missing/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/missing",
 	"title": "Unsupported",
 	"category": "text",
@@ -15,7 +15,7 @@
 		},
 		"originalContent": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {
@@ -23,6 +23,9 @@
 		"customClassName": false,
 		"inserter": false,
 		"html": false,
-		"reusable": false
+		"reusable": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }
diff --git a/packages/block-library/src/missing/edit.js b/packages/block-library/src/missing/edit.js
index 1ef143a639ed06..e7744839b08889 100644
--- a/packages/block-library/src/missing/edit.js
+++ b/packages/block-library/src/missing/edit.js
@@ -5,7 +5,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	Warning,
 	useBlockProps,
@@ -13,42 +13,77 @@ import {
 } from '@wordpress/block-editor';
 import { safeHTML } from '@wordpress/dom';
 
-function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
+export default function MissingEdit( { attributes, clientId } ) {
 	const { originalName, originalUndelimitedContent } = attributes;
 	const hasContent = !! originalUndelimitedContent;
-	const hasHTMLBlock = useSelect(
+	const { hasFreeformBlock, hasHTMLBlock } = useSelect(
 		( select ) => {
 			const { canInsertBlockType, getBlockRootClientId } =
 				select( blockEditorStore );
 
-			return canInsertBlockType(
-				'core/html',
-				getBlockRootClientId( clientId )
-			);
+			return {
+				hasFreeformBlock: canInsertBlockType(
+					'core/freeform',
+					getBlockRootClientId( clientId )
+				),
+				hasHTMLBlock: canInsertBlockType(
+					'core/html',
+					getBlockRootClientId( clientId )
+				),
+			};
 		},
 		[ clientId ]
 	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	function convertToHTML() {
+		replaceBlock(
+			clientId,
+			createBlock( 'core/html', {
+				content: originalUndelimitedContent,
+			} )
+		);
+	}
 
 	const actions = [];
 	let messageHTML;
-	if ( hasContent && hasHTMLBlock ) {
+
+	const convertToHtmlButton = (
+		<Button
+			__next40pxDefaultSize
+			key="convert"
+			onClick={ convertToHTML }
+			variant="primary"
+		>
+			{ __( 'Keep as HTML' ) }
+		</Button>
+	);
+
+	if ( hasContent && ! hasFreeformBlock && ! originalName ) {
+		if ( hasHTMLBlock ) {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+			actions.push( convertToHtmlButton );
+		} else {
+			messageHTML = __(
+				'It appears you are trying to use the deprecated Classic block. You can leave this block intact, or remove it entirely. Alternatively, you can refresh the page to use the Classic block.'
+			);
+		}
+	} else if ( hasContent && hasHTMLBlock ) {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
-				'Your site doesn’t include support for the "%s" block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.'
+				'Your site doesn’t include support for the "%s" block. You can leave it as-is, convert it to custom HTML, or remove it.'
 			),
 			originalName
 		);
-		actions.push(
-			<Button key="convert" onClick={ convertToHTML } variant="primary">
-				{ __( 'Keep as HTML' ) }
-			</Button>
-		);
+		actions.push( convertToHtmlButton );
 	} else {
 		messageHTML = sprintf(
 			/* translators: %s: block name */
 			__(
-				'Your site doesn’t include support for the "%s" block. You can leave this block intact or remove it entirely.'
+				'Your site doesn’t include support for the "%s" block. You can leave it as-is or remove it.'
 			),
 			originalName
 		);
@@ -61,19 +96,3 @@ function MissingBlockWarning( { attributes, convertToHTML, clientId } ) {
 		</div>
 	);
 }
-
-const MissingEdit = withDispatch( ( dispatch, { clientId, attributes } ) => {
-	const { replaceBlock } = dispatch( blockEditorStore );
-	return {
-		convertToHTML() {
-			replaceBlock(
-				clientId,
-				createBlock( 'core/html', {
-					content: attributes.originalUndelimitedContent,
-				} )
-			);
-		},
-	};
-} )( MissingBlockWarning );
-
-export default MissingEdit;
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
index 1baa57e76c9cd8..641224cac4e77b 100644
--- a/packages/block-library/src/missing/edit.native.js
+++ b/packages/block-library/src/missing/edit.native.js
@@ -1,31 +1,26 @@
 /**
  * External dependencies
  */
-import {
-	View,
-	Text,
-	TouchableWithoutFeedback,
-	TouchableHighlight,
-} from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import {
-	requestUnsupportedBlockFallback,
-	sendActionButtonPressedAction,
-	actionButtons,
-} from '@wordpress/react-native-bridge';
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { coreBlocks } from '@wordpress/block-library';
-import { normalizeIconObject } from '@wordpress/blocks';
+import { normalizeIconObject, rawHandler, serialize } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { help, plugins } from '@wordpress/icons';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	UnsupportedBlockDetails,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -36,6 +31,8 @@ import styles from './style.scss';
 const UBE_INCOMPATIBLE_BLOCKS = [ 'core/block' ];
 const I18N_BLOCK_SCHEMA_TITLE = 'block title';
 
+const EMPTY_ARRAY = [];
+
 export class UnsupportedBlockEdit extends Component {
 	constructor( props ) {
 		super( props );
@@ -47,11 +44,40 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	toggleSheet() {
+		const { attributes, block, clientId } = this.props;
+		const { originalName } = attributes;
+		const title = this.getTitle();
+		const blockContent = serialize( block ? [ block ] : [] );
+
+		if ( this.canEditUnsupportedBlock() ) {
+			requestUnsupportedBlockFallback(
+				blockContent,
+				clientId,
+				originalName,
+				title
+			);
+			return;
+		}
+
 		this.setState( {
 			showHelp: ! this.state.showHelp,
 		} );
 	}
 
+	canEditUnsupportedBlock() {
+		const {
+			canEnableUnsupportedBlockEditor,
+			isEditableInUnsupportedBlockEditor,
+			isUnsupportedBlockEditorSupported,
+		} = this.props;
+
+		return (
+			! canEnableUnsupportedBlockEditor &&
+			isUnsupportedBlockEditorSupported &&
+			isEditableInUnsupportedBlockEditor
+		);
+	}
+
 	closeSheet() {
 		this.setState( {
 			showHelp: false,
@@ -83,20 +109,20 @@ export class UnsupportedBlockEdit extends Component {
 		);
 
 		return (
-			<TouchableHighlight
+			<TouchableOpacity
 				onPress={ this.onHelpButtonPressed }
 				style={ styles.helpIconContainer }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 			>
 				<Icon
 					className="unsupported-icon-help"
 					label={ __( 'Help icon' ) }
 					icon={ help }
-					color={ infoIconStyle.color }
+					fill={ infoIconStyle.color }
 				/>
-			</TouchableHighlight>
+			</TouchableOpacity>
 		);
 	}
 
@@ -121,121 +147,57 @@ export class UnsupportedBlockEdit extends Component {
 	}
 
 	renderSheet( blockTitle, blockName ) {
-		const {
-			getStylesFromColorScheme,
-			attributes,
-			clientId,
-			isUnsupportedBlockEditorSupported,
-			canEnableUnsupportedBlockEditor,
-			isEditableInUnsupportedBlockEditor,
-		} = this.props;
-		const infoTextStyle = getStylesFromColorScheme(
-			styles.infoText,
-			styles.infoTextDark
-		);
-		const infoTitleStyle = getStylesFromColorScheme(
-			styles.infoTitle,
-			styles.infoTitleDark
-		);
-		const infoDescriptionStyle = getStylesFromColorScheme(
-			styles.infoDescription,
-			styles.infoDescriptionDark
-		);
-		const infoSheetIconStyle = getStylesFromColorScheme(
-			styles.infoSheetIcon,
-			styles.infoSheetIconDark
-		);
+		const { block, clientId, createSuccessNotice, replaceBlocks } =
+			this.props;
+		const { showHelp } = this.state;
 
 		/* translators: Missing block alert title. %s: The localized block name */
 		const titleFormat = __( "'%s' is not fully-supported" );
-		const infoTitle = sprintf( titleFormat, blockTitle );
-		const missingBlockDetail = applyFilters(
+		const title = sprintf( titleFormat, blockTitle );
+		let description = applyFilters(
 			'native.missing_block_detail',
-			__( 'We are working hard to add more blocks with each release.' )
-		);
-		const missingBlockActionButton = applyFilters(
-			'native.missing_block_action_button',
-			__( 'Edit using web editor' )
+			__( 'We are working hard to add more blocks with each release.' ),
+			blockName
 		);
+		let customActions = EMPTY_ARRAY;
 
-		const actionButtonStyle = getStylesFromColorScheme(
-			styles.actionButton,
-			styles.actionButtonDark
-		);
+		// For Classic blocks, we offer the alternative to convert the content to blocks.
+		if ( blockName === 'core/freeform' ) {
+			description +=
+				' ' +
+				__( 'Alternatively, you can convert the content to blocks.' );
+			/* translators: displayed right after the classic block is converted to blocks. %s: The localized classic block name */
+			const successNotice = __( "'%s' block converted to blocks" );
+			customActions = [
+				{
+					label: __( 'Convert to blocks' ),
+					onPress: () => {
+						createSuccessNotice(
+							sprintf( successNotice, blockTitle )
+						);
+						replaceBlocks( block );
+					},
+				},
+			];
+		}
 
 		return (
-			<BottomSheet
-				isVisible={ this.state.showHelp }
-				hideHeader
-				onClose={ this.closeSheet }
-				onModalHide={ () => {
-					if ( this.state.sendFallbackMessage ) {
-						// On iOS, onModalHide is called when the controller is still part of the hierarchy.
-						// A small delay will ensure that the controller has already been removed.
-						this.timeout = setTimeout( () => {
-							// For the Classic block, the content is kept in the `content` attribute.
-							const content =
-								blockName === 'core/freeform'
-									? attributes.content
-									: attributes.originalContent;
-							requestUnsupportedBlockFallback(
-								content,
-								clientId,
-								blockName,
-								blockTitle
-							);
-						}, 100 );
-						this.setState( { sendFallbackMessage: false } );
-					} else if ( this.state.sendButtonPressMessage ) {
-						this.timeout = setTimeout( () => {
-							sendActionButtonPressedAction(
-								actionButtons.missingBlockAlertActionButton
-							);
-						}, 100 );
-						this.setState( { sendButtonPressMessage: false } );
-					}
-				} }
-			>
-				<View style={ styles.infoContainer }>
-					<Icon
-						icon={ help }
-						color={ infoSheetIconStyle.color }
-						size={ styles.infoSheetIcon.size }
-					/>
-					<Text style={ [ infoTextStyle, infoTitleStyle ] }>
-						{ infoTitle }
-					</Text>
-					{ isEditableInUnsupportedBlockEditor && (
-						<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
-							{ missingBlockDetail }
-						</Text>
-					) }
-				</View>
-				{ ( isUnsupportedBlockEditorSupported ||
-					canEnableUnsupportedBlockEditor ) &&
-					isEditableInUnsupportedBlockEditor && (
-						<>
-							<TextControl
-								label={ missingBlockActionButton }
-								separatorType="topFullWidth"
-								onPress={ this.requestFallback }
-								labelStyle={ actionButtonStyle }
-							/>
-							<TextControl
-								label={ __( 'Dismiss' ) }
-								separatorType="topFullWidth"
-								onPress={ this.toggleSheet }
-								labelStyle={ actionButtonStyle }
-							/>
-						</>
-					) }
-			</BottomSheet>
+			<UnsupportedBlockDetails
+				clientId={ clientId }
+				showSheet={ showHelp }
+				onCloseSheet={ this.closeSheet }
+				customBlockTitle={ blockTitle }
+				title={ title }
+				description={ description }
+				customActions={ customActions }
+			/>
 		);
 	}
 
 	render() {
 		const { originalName } = this.props.attributes;
-		const { getStylesFromColorScheme, preferredColorScheme } = this.props;
+		const { isSelected, getStylesFromColorScheme, preferredColorScheme } =
+			this.props;
 		const blockType = coreBlocks[ originalName ];
 
 		const title = this.getTitle();
@@ -248,8 +210,13 @@ export class UnsupportedBlockEdit extends Component {
 			styles.unsupportedBlockSubtitle,
 			styles.unsupportedBlockSubtitleDark
 		);
+
 		const subtitle = (
-			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
+			<Text style={ subTitleStyle }>
+				{ this.canEditUnsupportedBlock()
+					? __( 'Tap to edit' )
+					: __( 'Unsupported' ) }
+			</Text>
 		);
 
 		const icon = blockType
@@ -261,10 +228,11 @@ export class UnsupportedBlockEdit extends Component {
 		);
 		const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
 		return (
-			<TouchableWithoutFeedback
-				disabled={ ! this.props.isSelected }
+			<TouchableOpacity
+				disabled={ ! isSelected }
+				activeOpacity={ 0.5 }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ this.toggleSheet }
 			>
@@ -274,40 +242,52 @@ export class UnsupportedBlockEdit extends Component {
 						styles.unsupportedBlockDark
 					) }
 				>
-					{ this.renderHelpIcon() }
-					<Icon
-						className={ iconClassName }
-						icon={ icon && icon.src ? icon.src : icon }
-						color={ iconStyle.color }
-					/>
-					<Text style={ titleStyle }>{ title }</Text>
+					{ ! this.canEditUnsupportedBlock() &&
+						this.renderHelpIcon() }
+					<View style={ styles.unsupportedBlockHeader }>
+						<Icon
+							className={ iconClassName }
+							icon={ icon && icon.src ? icon.src : icon }
+							fill={ iconStyle.color }
+						/>
+						<Text style={ titleStyle }>{ title }</Text>
+					</View>
 					{ subtitle }
 					{ this.renderSheet( title, originalName ) }
 				</View>
-			</TouchableWithoutFeedback>
+			</TouchableOpacity>
 		);
 	}
 }
 
 export default compose( [
-	withSelect( ( select, { attributes } ) => {
-		const { getSettings } = select( blockEditorStore );
+	withSelect( ( select, { attributes, clientId } ) => {
+		const { getBlock, getSettings } = select( blockEditorStore );
+		const { capabilities } = getSettings();
 		return {
 			isUnsupportedBlockEditorSupported:
-				getSettings( 'capabilities' ).unsupportedBlockEditor === true,
+				capabilities?.unsupportedBlockEditor === true,
 			canEnableUnsupportedBlockEditor:
-				getSettings( 'capabilities' )
-					.canEnableUnsupportedBlockEditor === true,
+				capabilities?.canEnableUnsupportedBlockEditor === true,
 			isEditableInUnsupportedBlockEditor:
 				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
+			block: getBlock( clientId ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { selectBlock } = dispatch( blockEditorStore );
+		const { selectBlock, replaceBlocks } = dispatch( blockEditorStore );
+		const { createSuccessNotice } = dispatch( noticesStore );
 		return {
 			selectBlock() {
 				selectBlock( ownProps.clientId );
 			},
+			replaceBlocks( block ) {
+				replaceBlocks(
+					ownProps.clientId,
+					rawHandler( { HTML: serialize( block ) } )
+				);
+			},
+			createSuccessNotice,
 		};
 	} ),
 	withPreferredColorScheme,
diff --git a/packages/block-library/src/missing/style.native.scss b/packages/block-library/src/missing/style.native.scss
index 6718713f320198..5d83c67f78b818 100644
--- a/packages/block-library/src/missing/style.native.scss
+++ b/packages/block-library/src/missing/style.native.scss
@@ -1,13 +1,3 @@
-/** @format */
-.content {
-	padding-top: 8;
-	padding-bottom: 0;
-	padding-left: 24;
-	padding-right: 24;
-	align-items: center;
-	justify-content: space-evenly;
-}
-
 .helpIconContainer {
 	position: absolute;
 	top: 0;
@@ -20,69 +10,21 @@
 	align-items: flex-end;
 }
 
-.infoContainer {
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-}
-
 .infoIcon {
 	size: 36;
 	height: 36;
 	padding-top: 8;
 	padding-bottom: 8;
-	color: $gray-darken-20;
+	color: $light-secondary;
 }
 
 .infoIconDark {
-	color: $gray-20;
-}
-
-.infoSheetIcon {
-	size: 36;
-	height: 36;
-	padding-top: 8;
-	padding-bottom: 8;
-	color: $gray;
-}
-
-.infoSheetIconDark {
-	color: $gray-20;
-}
-
-.infoText {
-	text-align: center;
-	color: $gray-dark;
-}
-
-.infoTextDark {
-	color: $white;
-}
-
-.infoTitle {
-	padding-top: 8;
-	padding-bottom: 12;
-	font-size: 20;
-	font-weight: bold;
-	color: $gray-dark;
-}
-
-.infoTitleDark {
-	color: $white;
-}
-
-.infoDescription {
-	padding-bottom: 24;
-	font-size: 16;
-	color: $gray-darken-20;
-}
-
-.infoDescriptionDark {
-	color: $gray-20;
+	color: $dark-tertiary;
 }
 
 .unsupportedBlock {
-	background-color: $gray-lighten-30;
+	height: 142;
+	background-color: #e0e0e0; // $light-dim
 	padding-top: 24;
 	padding-bottom: 24;
 	padding-left: 8;
@@ -96,31 +38,37 @@
 }
 
 .unsupportedBlockDark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.unsupportedBlockHeader {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 8;
 }
 
 .unsupportedBlockIcon {
-	color: $gray-dark;
+	color: $light-secondary;
 }
 
 .unsupportedBlockIconDark {
-	color: $white;
+	color: $dark-tertiary;
 }
 
 .unsupportedBlockMessage {
-	margin-top: 4;
 	text-align: center;
-	color: $gray-dark;
-	font-size: 14;
-	font-weight: 600;
+	color: $light-secondary;
+	font-size: 16;
+	font-weight: 400;
+	margin-left: 6;
 }
 
 .unsupportedBlockMessageDark {
-	color: $white;
+	color: $dark-tertiary;
 }
 
 .unsupportedBlockSubtitle {
-	margin-top: 2;
 	text-align: center;
 	color: $gray-darken-20;
 	font-size: 12;
@@ -129,11 +77,3 @@
 .unsupportedBlockSubtitleDark {
 	color: $gray-20;
 }
-
-.actionButton {
-	color: $blue-50;
-}
-
-.actionButtonDark {
-	color: $blue-30;
-}
diff --git a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
index e5c741430bded9..be91af9e58cc77 100644
--- a/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap
@@ -6,11 +6,24 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityLabel="Help button"
   accessibilityRole="button"
   accessibilityState={
-    Object {
+    {
+      "busy": undefined,
+      "checked": undefined,
       "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
     }
   }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -19,29 +32,79 @@ exports[`Missing block renders without crashing 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "opacity": 1,
+    }
+  }
 >
-  <View
-    accessibilityHint="Tap here to show help"
-    accessibilityLabel="Help button"
-    accessibilityRole="button"
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-  >
-    Svg
+  <View>
+    <View
+      accessibilityHint="Tap here to show help"
+      accessibilityLabel="Help button"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "opacity": 1,
+        }
+      }
+    >
+      <Svg
+        height={24}
+        label="Help icon"
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+    </View>
+    <View>
+      <Svg
+        fill="white"
+        height={24}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
+      <Text>
+        missing/block/title
+      </Text>
+    </View>
+    <Text>
+      Unsupported
+    </Text>
   </View>
-  Svg
-  <Text>
-    missing/block/title
-  </Text>
-  <Text>
-    Unsupported
-  </Text>
 </View>
 `;
diff --git a/packages/block-library/src/missing/test/edit-integration.native.js b/packages/block-library/src/missing/test/edit-integration.native.js
index 15f197734fdbde..68f5a8606124d4 100644
--- a/packages/block-library/src/missing/test/edit-integration.native.js
+++ b/packages/block-library/src/missing/test/edit-integration.native.js
@@ -1,83 +1,168 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent, waitFor, within } from 'test/helpers';
+import {
+	act,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	withFakeTimers,
+	within,
+} from 'test/helpers';
+import { Platform } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { unregisterBlockType } from '@wordpress/blocks';
 import { setLocaleData } from '@wordpress/i18n';
+import { requestUnsupportedBlockFallback } from '@wordpress/react-native-bridge';
+
+// Override modal mock to prevent unmounting it when is not visible.
+// This is required to be able to trigger onClose and onDismiss events when
+// the modal is dismissed.
+jest.mock( 'react-native-modal', () => {
+	const mockComponent = require( 'react-native/jest/mockComponent' );
+	return mockComponent( 'react-native-modal' );
+} );
 
-/**
- * Internal dependencies
- */
-import { registerCoreBlocks } from '../..';
+const TABLE_BLOCK_HTML = `<!-- wp:table -->
+<figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
+<!-- /wp:table -->`;
+const MODAL_DISMISS_EVENT = Platform.OS === 'ios' ? 'onDismiss' : 'onModalHide';
 
-beforeAll( () => {
-	// Mock translations.
-	setLocaleData( {
-		'block title\u0004Table': [ 'Tabla' ],
-		"'%s' is not fully-supported": [ '«%s» no es totalmente compatible' ],
-	} );
+setupCoreBlocks();
 
-	// Register all core blocks.
-	registerCoreBlocks();
+beforeAll( () => {
+	// For the purpose of this test suite we consider Reusable blocks/Patterns as unsupported.
+	// For this reason we unregister it to force it to be rendered as an unsupported block.
+	unregisterBlockType( 'core/block' );
 } );
 
-afterAll( () => {
-	// Clean up translations.
-	setLocaleData( {} );
+describe( 'Unsupported block', () => {
+	describe( 'localized elements', () => {
+		beforeEach( () => {
+			// Mock translations.
+			setLocaleData( {
+				'block title\u0004Table': [ 'Tabla' ],
+				"'%s' is not fully-supported": [
+					'«%s» no es totalmente compatible',
+				],
+			} );
+		} );
 
-	// Clean up registered blocks.
-	getBlockTypes().forEach( ( block ) => {
-		unregisterBlockType( block.name );
-	} );
-} );
+		afterEach( () => {
+			// Clean up translations.
+			setLocaleData( {} );
+		} );
 
-describe( 'Unsupported block', () => {
-	it( 'requests translated block title in block placeholder', async () => {
-		const initialHtml = `<!-- wp:table -->
-			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
-			 <!-- /wp:table -->`;
-		const { getByLabelText } = await initializeEditor( {
-			initialHtml,
+		it( 'requests translated block title in block placeholder', async () => {
+			await initializeEditor( {
+				initialHtml: TABLE_BLOCK_HTML,
+			} );
+
+			const missingBlock = getBlock( screen, 'Unsupported' );
+
+			const translatedTableTitle =
+				within( missingBlock ).getByText( 'Tabla' );
+
+			expect( translatedTableTitle ).toBeDefined();
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByLabelText( /Unsupported Block\. Row 1/ )
-		);
+		it( 'requests translated block title in bottom sheet', async () => {
+			await initializeEditor( {
+				initialHtml: TABLE_BLOCK_HTML,
+			} );
+
+			const missingBlock = getBlock( screen, 'Unsupported' );
+
+			fireEvent.press( missingBlock );
+
+			const [ helpButton ] =
+				await screen.findAllByLabelText( 'Help button' );
 
-		const translatedTableTitle =
-			within( missingBlock ).getByText( 'Tabla' );
+			fireEvent.press( helpButton );
 
-		expect( translatedTableTitle ).toBeDefined();
+			const bottomSheetTitle = await screen.findByText(
+				'«Tabla» no es totalmente compatible'
+			);
+
+			expect( bottomSheetTitle ).toBeDefined();
+		} );
 	} );
 
-	it( 'requests translated block title in bottom sheet', async () => {
-		const initialHtml = `<!-- wp:table -->
-		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
-		 <!-- /wp:table -->`;
-		const { getByLabelText, getByText } = await initializeEditor( {
-			initialHtml,
+	it( 'requests web editor when UBE is available', async () => {
+		await initializeEditor( {
+			initialHtml: TABLE_BLOCK_HTML,
+			capabilities: {
+				unsupportedBlockEditor: true,
+				canEnableUnsupportedBlockEditor: true,
+			},
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByLabelText( /Unsupported Block\. Row 1/ )
-		);
+		const missingBlock = getBlock( screen, 'Unsupported' );
+		fireEvent.press( missingBlock );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
+
+		// UBE is requested after the modal hides and running a timeout
+		await withFakeTimers( async () => {
+			fireEvent.press( actionButton );
+			fireEvent(
+				screen.getByTestId( 'bottom-sheet' ),
+				MODAL_DISMISS_EVENT
+			);
+			act( () => jest.runOnlyPendingTimers() );
+		} );
+		expect( requestUnsupportedBlockFallback ).toHaveBeenCalled();
+	} );
 
+	it( 'does not show web editor option when UBE is not available', async () => {
+		await initializeEditor( {
+			initialHtml: TABLE_BLOCK_HTML,
+			capabilities: {
+				unsupportedBlockEditor: false,
+				canEnableUnsupportedBlockEditor: false,
+			},
+		} );
+
+		const missingBlock = getBlock( screen, 'Unsupported' );
 		fireEvent.press( missingBlock );
 
-		const helpButton = await waitFor( () =>
-			getByLabelText( 'Help button' )
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
+
+		const actionButton = await screen.queryByText(
+			'Edit using web editor'
 		);
+		expect( actionButton ).toBeNull();
+	} );
 
-		fireEvent.press( helpButton );
+	it( 'does not show web editor option when block is incompatible with UBE', async () => {
+		await initializeEditor( {
+			// Reusable blocks/Patterns is a block type unsupported by UBE
+			initialHtml: '<!-- wp:block {"ref":7387} /-->',
+			capabilities: {
+				unsupportedBlockEditor: true,
+				canEnableUnsupportedBlockEditor: true,
+			},
+		} );
 
-		const bottomSheetTitle = await waitFor( () =>
-			getByText( '«Tabla» no es totalmente compatible' )
-		);
+		const missingBlock = getBlock( screen, 'Unsupported' );
+		fireEvent.press( missingBlock );
 
-		expect( bottomSheetTitle ).toBeDefined();
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( missingBlock ).getByText( 'Unsupported' ) );
+
+		const actionButton = await screen.queryByText(
+			'Edit using web editor'
+		);
+		expect( actionButton ).toBeNull();
 	} );
 } );
diff --git a/packages/block-library/src/missing/test/edit.native.js b/packages/block-library/src/missing/test/edit.native.js
index 8472828a2bd0d8..eba1169ae643b7 100644
--- a/packages/block-library/src/missing/test/edit.native.js
+++ b/packages/block-library/src/missing/test/edit.native.js
@@ -10,7 +10,6 @@ import { Text } from 'react-native';
 import { BottomSheet, Icon } from '@wordpress/components';
 import { help, plugins } from '@wordpress/icons';
 import { storeConfig } from '@wordpress/block-editor';
-jest.mock( '@wordpress/blocks' );
 jest.mock( '@wordpress/block-editor/src/store/selectors' );
 
 /**
@@ -63,47 +62,6 @@ describe( 'Missing block', () => {
 					"' is not fully-supported"
 			);
 		} );
-
-		describe( 'Unsupported block editor (UBE)', () => {
-			beforeEach( () => {
-				// By default we set the web editor as available.
-				storeConfig.selectors.getSettings.mockReturnValue( {
-					unsupportedBlockEditor: true,
-				} );
-			} );
-
-			it( 'renders edit action if UBE is available', () => {
-				const testInstance = getTestComponentWithContent();
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				const bottomSheetCells = bottomSheet.props.children[ 1 ];
-				expect( bottomSheetCells ).toBeTruthy();
-				expect( bottomSheetCells.props.children.length ).toBe( 2 );
-				expect( bottomSheetCells.props.children[ 0 ].props.label ).toBe(
-					'Edit using web editor'
-				);
-			} );
-
-			it( 'does not render edit action if UBE is not available', () => {
-				storeConfig.selectors.getSettings.mockReturnValue( {
-					unsupportedBlockEditor: false,
-				} );
-
-				const testInstance = getTestComponentWithContent();
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
-			} );
-
-			it( 'does not render edit action if the block is incompatible with UBE', () => {
-				const testInstance = getTestComponentWithContent( {
-					originalName: 'core/block',
-				} );
-				const bottomSheet =
-					testInstance.UNSAFE_getByType( BottomSheet );
-				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
-			} );
-		} );
 	} );
 
 	it( 'renders admin plugins icon', () => {
diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json
index 25f1df23771f35..d1153ca4f1689d 100644
--- a/packages/block-library/src/more/block.json
+++ b/packages/block-library/src/more/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/more",
 	"title": "More",
 	"category": "design",
@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"customText": {
-			"type": "string"
+			"type": "string",
+			"default": ""
 		},
 		"noTeaser": {
 			"type": "boolean",
@@ -20,7 +21,10 @@
 		"customClassName": false,
 		"className": false,
 		"html": false,
-		"multiple": false
+		"multiple": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-more-editor"
 }
diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js
index f0ed625e458d70..bcad7ec1b83662 100644
--- a/packages/block-library/src/more/edit.js
+++ b/packages/block-library/src/more/edit.js
@@ -16,8 +16,7 @@ export default function MoreEdit( {
 } ) {
 	const onChangeInput = ( event ) => {
 		setAttributes( {
-			customText:
-				event.target.value !== '' ? event.target.value : undefined,
+			customText: event.target.value,
 		} );
 	};
 
@@ -43,6 +42,7 @@ export default function MoreEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Hide the excerpt on the full content page'
 						) }
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
index c140bcdc483674..d05e9920ae4571 100644
--- a/packages/block-library/src/more/edit.native.js
+++ b/packages/block-library/src/more/edit.native.js
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-import Hr from 'react-native-hr';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,15 +36,13 @@ export class MoreEdit extends Component {
 		);
 
 		return (
-			<View>
-				<Hr
-					text={ content }
-					marginLeft={ 0 }
-					marginRight={ 0 }
-					textStyle={ textStyle }
-					lineStyle={ lineStyle }
-				/>
-			</View>
+			<HorizontalRule
+				text={ content }
+				marginLeft={ 0 }
+				marginRight={ 0 }
+				textStyle={ textStyle }
+				lineStyle={ lineStyle }
+			/>
 		);
 	}
 }
diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js
index 4c1fad3cb67f48..b40bb2123bc727 100644
--- a/packages/block-library/src/more/index.js
+++ b/packages/block-library/src/more/index.js
@@ -20,6 +20,12 @@ export const settings = {
 	icon,
 	example: {},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
 			return attributes.customText;
 		}
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/__snapshots__/transforms.native.js.snap b/packages/block-library/src/more/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..132a98271f1dfb
--- /dev/null
+++ b/packages/block-library/src/more/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`More block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:more -->
+<!--more-->
+<!-- /wp:more --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`More block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:more -->
+<!--more-->
+<!-- /wp:more --></div>
+<!-- /wp:group -->"
+`;
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/more/test/transforms.native.js b/packages/block-library/src/more/test/transforms.native.js
new file mode 100644
index 00000000000000..e916b9f967f284
--- /dev/null
+++ b/packages/block-library/src/more/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'More';
+const initialHtml = `
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
index ae151a279e5aca..2762bd24e446a6 100644
--- a/packages/block-library/src/navigation-link/block.json
+++ b/packages/block-library/src/navigation-link/block.json
@@ -1,10 +1,15 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation-link",
 	"title": "Custom Link",
 	"category": "design",
 	"parent": [ "core/navigation" ],
+	"allowedBlocks": [
+		"core/navigation-link",
+		"core/navigation-submenu",
+		"core/page-list"
+	],
 	"description": "Add a page, link, or another item to your navigation.",
 	"textdomain": "default",
 	"attributes": {
@@ -71,6 +76,10 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-navigation-link-editor",
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 0c08209130ba4c..39073b848d3ca8 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -1,60 +1,48 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import escapeHtml from 'escape-html';
-import { unescape } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	Button,
 	PanelBody,
-	Popover,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
 	Tooltip,
 	ToolbarGroup,
-	KeyboardShortcuts,
 } from '@wordpress/components';
-import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
+import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
-	BlockIcon,
 	InspectorControls,
 	RichText,
-	__experimentalLinkControl as LinkControl,
 	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import {
-	Fragment,
-	useState,
-	useEffect,
-	useRef,
-	createInterpolateElement,
-} from '@wordpress/element';
-import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
-import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import {
-	store as coreStore,
-	useResourcePermissions,
-} from '@wordpress/core-data';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useMergeRefs } from '@wordpress/compose';
+import { link as linkIcon, addSubmenu } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMergeRefs, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { name } from './block.json';
+import { LinkUI } from './link-ui';
+import { updateAttributes } from './update-attributes';
+import { getColors } from '../navigation/edit/utils';
+
+const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -102,192 +90,11 @@ const useIsDraggingWithin = ( elementRef ) => {
 			ownerDocument.removeEventListener( 'dragend', handleDragEnd );
 			ownerDocument.removeEventListener( 'dragenter', handleDragEnter );
 		};
-	}, [] );
+	}, [ elementRef ] );
 
 	return isDraggingWithin;
 };
 
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-function getSuggestionsQuery( type, kind ) {
-	switch ( type ) {
-		case 'post':
-		case 'page':
-			return { type: 'post', subtype: type };
-		case 'category':
-			return { type: 'term', subtype: 'category' };
-		case 'tag':
-			return { type: 'term', subtype: 'post_tag' };
-		case 'post_format':
-			return { type: 'post-format' };
-		default:
-			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type };
-			}
-			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type };
-			}
-			return {};
-	}
-}
-
-/**
- * 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
- */
-
-/**
- * Navigation Link Block Attributes
- *
- * @typedef {Object} WPNavigationLinkBlockAttributes
- *
- * @property {string}               [label]         Link text.
- * @property {WPNavigationLinkKind} [kind]          Kind is used to differentiate between term and post ids to check post draft status.
- * @property {string}               [type]          The type such as post, page, tag, category and other custom types.
- * @property {string}               [rel]           The relationship of the linked URL.
- * @property {number}               [id]            A post or term id.
- * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
- * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
- */
-
-/**
- * Link Control onChange handler that updates block attributes when a setting is changed.
- *
- * @param {Object}                          updatedValue    New block attributes to update.
- * @param {Function}                        setAttributes   Block attribute update function.
- * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
- *
- */
-export const updateNavigationLinkBlockAttributes = (
-	updatedValue = {},
-	setAttributes,
-	blockAttributes = {}
-) => {
-	const {
-		label: originalLabel = '',
-		kind: originalKind = '',
-		type: originalType = '',
-	} = blockAttributes;
-
-	const {
-		title: newLabel = '', // the title of any provided Post.
-		url: newUrl = '',
-
-		opensInNewTab,
-		id,
-		kind: newKind = originalKind,
-		type: newType = originalType,
-	} = updatedValue;
-
-	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
-	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
-
-	const useNewLabel =
-		newLabel &&
-		newLabel !== originalLabel &&
-		// LinkControl without the title field relies
-		// on the check below. Specifically, it assumes that
-		// the URL is the same as a title.
-		// This logic a) looks suspicious and b) should really
-		// live in the LinkControl and not here. It's a great
-		// candidate for future refactoring.
-		newLabelWithoutHttp !== newUrlWithoutHttp;
-
-	// Unfortunately this causes the escaping model to be inverted.
-	// The escaped content is stored in the block attributes (and ultimately in the database),
-	// and then the raw data is "recovered" when outputting into the DOM.
-	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
-	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
-	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
-	// See also:
-	// - https://github.com/WordPress/gutenberg/pull/41063
-	// - https://github.com/WordPress/gutenberg/pull/18617.
-	const label = useNewLabel
-		? escapeHtml( newLabel )
-		: originalLabel || escapeHtml( newUrlWithoutHttp );
-
-	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
-	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
-
-	const isBuiltInType =
-		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
-
-	const isCustomLink =
-		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
-	const kind = isCustomLink ? 'custom' : newKind;
-
-	setAttributes( {
-		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
-		...( label && { label } ),
-		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
-		...( kind && { kind } ),
-		...( type && type !== 'URL' && { type } ),
-	} );
-};
-
 const useIsInvalidLink = ( kind, type, id ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
@@ -346,87 +153,79 @@ function getMissingText( type ) {
 	return missingText;
 }
 
-/**
- * Removes HTML from a given string.
- * Note the does not provide XSS protection or otherwise attempt
- * to filter strings with malicious intent.
- *
- * See also: https://github.com/WordPress/gutenberg/pull/35539
- *
- * @param {string} html the string from which HTML should be removed.
- * @return {string} the "cleaned" string.
+/*
+ * Warning, this duplicated in
+ * packages/block-library/src/navigation-submenu/edit.js
+ * Consider reuseing this components for both blocks.
  */
-function navStripHTML( html ) {
-	const doc = document.implementation.createHTMLDocument( '' );
-	doc.body.innerHTML = html;
-	return doc.body.textContent || '';
-}
-
-/**
- * Add transforms to Link Control
- */
-
-function LinkControlTransforms( { clientId, replace } ) {
-	const { getBlock, blockTransforms } = useSelect(
-		( select ) => {
-			const {
-				getBlock: _getBlock,
-				getBlockRootClientId,
-				getBlockTransformItems,
-			} = select( blockEditorStore );
-
-			return {
-				getBlock: _getBlock,
-				blockTransforms: getBlockTransformItems(
-					_getBlock( clientId ),
-					getBlockRootClientId( clientId )
-				),
-			};
-		},
-		[ clientId ]
-	);
-
-	const featuredBlocks = [
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-	const transforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
-	if ( ! transforms?.length ) {
-		return null;
-	}
-
+function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
+	const { label, url, description, title, rel } = attributes;
 	return (
-		<div className="link-control-transform">
-			<h3 className="link-control-transform__subheading">
-				{ __( 'Transform' ) }
-			</h3>
-			<div className="link-control-transform__items">
-				{ transforms.map( ( item, index ) => {
-					return (
-						<Button
-							key={ `transform-${ index }` }
-							onClick={ () =>
-								replace(
-									clientId,
-									switchToBlockType(
-										getBlock( clientId ),
-										item.name
-									)
-								)
-							}
-							className="link-control-transform__item"
-						>
-							<BlockIcon icon={ item.icon } />
-							{ item.title }
-						</Button>
+		<PanelBody title={ __( 'Settings' ) }>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ label ? stripHTML( label ) : '' }
+				onChange={ ( labelValue ) => {
+					setAttributes( { label: labelValue } );
+				} }
+				label={ __( 'Text' ) }
+				autoComplete="off"
+				onFocus={ () => setIsLabelFieldFocused( true ) }
+				onBlur={ () => setIsLabelFieldFocused( false ) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ url ? safeDecodeURI( url ) : '' }
+				onChange={ ( urlValue ) => {
+					updateAttributes(
+						{ url: urlValue },
+						setAttributes,
+						attributes
 					);
-				} ) }
-			</div>
-		</div>
+				} }
+				label={ __( 'Link' ) }
+				autoComplete="off"
+			/>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				value={ description || '' }
+				onChange={ ( descriptionValue ) => {
+					setAttributes( { description: descriptionValue } );
+				} }
+				label={ __( 'Description' ) }
+				help={ __(
+					'The description will be displayed in the menu if the current theme supports it.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ title || '' }
+				onChange={ ( titleValue ) => {
+					setAttributes( { title: titleValue } );
+				} }
+				label={ __( 'Title attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'Additional information to help clarify the purpose of the link.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ rel || '' }
+				onChange={ ( relValue ) => {
+					setAttributes( { rel: relValue } );
+				} }
+				label={ __( 'Rel attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'The relationship of the linked URL as space-separated link types.'
+				) }
+			/>
+		</PanelBody>
 	);
 }
 
@@ -440,30 +239,21 @@ export default function NavigationLinkEdit( {
 	context,
 	clientId,
 } ) {
-	const {
-		id,
-		label,
-		type,
-		opensInNewTab,
-		url,
-		description,
-		rel,
-		title,
-		kind,
-	} = attributes;
+	const { id, label, type, url, description, kind } = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
 
-	const link = {
-		url,
-		opensInNewTab,
-		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
-	};
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	const {
+		replaceBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+		selectBlock,
+		selectPreviousBlock,
+	} = useDispatch( blockEditorStore );
+	// Have the link editing ui open on mount when lacking a url and selected.
+	const [ isLinkOpen, setIsLinkOpen ] = useState( isSelected && ! url );
+	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
+	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -471,12 +261,14 @@ export default function NavigationLinkEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add label…' );
 	const ref = useRef();
+	const linkUIref = useRef();
+	const prevUrl = usePrevious( url );
 
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
+	// Change the label using inspector causes rich text to change focus on firefox.
+	// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
+	const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
 
 	const {
-		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
@@ -484,7 +276,6 @@ export default function NavigationLinkEdit( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlocks,
 				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
@@ -493,10 +284,9 @@ export default function NavigationLinkEdit( {
 			} = select( blockEditorStore );
 
 			return {
-				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, [
-						name,
+						'core/navigation-link',
 						'core/navigation-submenu',
 					] ).length >= maxNestingLevel,
 				isTopLevelLink:
@@ -509,75 +299,51 @@ export default function NavigationLinkEdit( {
 				hasChildren: !! getBlockCount( clientId ),
 			};
 		},
-		[ clientId ]
+		[ clientId, maxNestingLevel ]
 	);
-
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelLink } );
-	}, [ isTopLevelLink ] );
+	const { getBlocks } = useSelect( blockEditorStore );
 
 	/**
 	 * Transform to submenu block.
 	 */
-	function transformToSubmenu() {
+	const transformToSubmenu = () => {
+		let innerBlocks = getBlocks( clientId );
+		if ( innerBlocks.length === 0 ) {
+			innerBlocks = [ createBlock( 'core/navigation-link' ) ];
+			selectBlock( innerBlocks[ 0 ].clientId );
+		}
 		const newSubmenu = createBlock(
 			'core/navigation-submenu',
 			attributes,
-			innerBlocks.length > 0
-				? innerBlocks
-				: [ createBlock( 'core/navigation-link' ) ]
+			innerBlocks
 		);
 		replaceBlock( clientId, newSubmenu );
-	}
-
-	useEffect( () => {
-		// Show the LinkControl on mount if the URL is empty
-		// ( When adding a new menu item)
-		// This can't be done in the useState call because it conflicts
-		// with the autofocus behavior of the BlockListBlock component.
-		if ( ! url ) {
-			setIsLinkOpen( true );
-		}
-	}, [ url ] );
+	};
 
 	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
 		if ( hasChildren ) {
+			// This side-effect should not create an undo level as those should
+			// only be created via user interactions.
+			__unstableMarkNextChangeAsNotPersistent();
 			transformToSubmenu();
 		}
 	}, [ hasChildren ] );
 
-	/**
-	 * The hook shouldn't be necessary but due to a focus loss happening
-	 * when selecting a suggestion in the link popover, we force close on block unselection.
-	 */
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setIsLinkOpen( false );
-		}
-	}, [ isSelected ] );
-
 	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
 	useEffect( () => {
-		if ( isLinkOpen && url ) {
-			// Does this look like a URL and have something TLD-ish?
-			if (
-				isURL( prependHTTP( label ) ) &&
-				/^.+\.[a-z]+/.test( label )
-			) {
-				// Focus and select the label text.
-				selectLabelText();
-			} else {
-				// Focus it (but do not select).
-				placeCaretAtHorizontalEdge( ref.current, true );
-			}
+		// We only want to do this when the URL has gone from nothing to a new URL AND the label looks like a URL
+		if (
+			! prevUrl &&
+			url &&
+			isLinkOpen &&
+			isURL( prependHTTP( label ) ) &&
+			/^.+\.[a-z]+/.test( label )
+		) {
+			// Focus and select the label text.
+			selectLabelText();
 		}
-	}, [ url ] );
+	}, [ prevUrl, url, isLinkOpen, label ] );
 
 	/**
 	 * Focus the Link label text and select it.
@@ -599,52 +365,23 @@ export default function NavigationLinkEdit( {
 	 */
 	function removeLink() {
 		// Reset all attributes that comprise the link.
+		// It is critical that all attributes are reset
+		// to their default values otherwise this may
+		// in advertently trigger side effects because
+		// the values will have "changed".
 		setAttributes( {
-			url: '',
-			label: '',
-			id: '',
-			kind: '',
-			type: '',
+			url: undefined,
+			label: undefined,
+			id: undefined,
+			kind: undefined,
+			type: undefined,
+			opensInNewTab: false,
 		} );
 
 		// Close the link editing UI.
 		setIsLinkOpen( false );
 	}
 
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
-	async function handleCreate( pageTitle ) {
-		const postType = type || 'page';
-
-		const page = await saveEntityRecord( 'postType', postType, {
-			title: pageTitle,
-			status: 'draft',
-		} );
-
-		return {
-			id: page.id,
-			type: postType,
-			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
-			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
-			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
-			// e.g.
-			// - title.raw = "Yes & No"
-			// - title.rendered = "Yes &#038; No"
-			// - decodeEntities( title.rendered ) = "Yes & No"
-			// See:
-			// - https://github.com/WordPress/gutenberg/pull/41063
-			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
-			title: decodeEntities( page.title.rendered ),
-			url: page.link,
-			kind: 'post-type',
-		};
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -653,17 +390,21 @@ export default function NavigationLinkEdit( {
 	} = getColors( context, ! isTopLevelLink );
 
 	function onKeyDown( event ) {
-		if (
-			isKeyboardEvent.primary( event, 'k' ) ||
-			( ! url && event.keyCode === ENTER )
-		) {
+		if ( isKeyboardEvent.primary( event, 'k' ) ) {
+			// Required to prevent the command center from opening,
+			// as it shares the CMD+K shortcut.
+			// See https://github.com/WordPress/gutenberg/pull/59845.
+			event.preventDefault();
+			// If this link is a child of a parent submenu item, the parent submenu item event will also open, closing this popover
+			event.stopPropagation();
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		}
 	}
 
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -681,25 +422,26 @@ export default function NavigationLinkEdit( {
 		onKeyDown,
 	} );
 
-	const ALLOWED_BLOCKS = [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	];
-	const DEFAULT_BLOCK = {
-		name: 'core/navigation-link',
-	};
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
-		renderAppender: false,
-	} );
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			...blockProps,
+			className: 'remove-outline', // Remove the outline from the inner blocks container.
+		},
+		{
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: true,
+			renderAppender: false,
+		}
+	);
 
 	if ( ! url || isInvalid || isDraft ) {
-		blockProps.onClick = () => setIsLinkOpen( true );
+		blockProps.onClick = () => {
+			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
+		};
 	}
 
-	const classes = classnames( 'wp-block-navigation-item__content', {
+	const classes = clsx( 'wp-block-navigation-item__content', {
 		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
@@ -714,7 +456,7 @@ export default function NavigationLinkEdit( {
 			: __( 'This item is missing a link' );
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -722,7 +464,10 @@ export default function NavigationLinkEdit( {
 						icon={ linkIcon }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ () => setIsLinkOpen( true ) }
+						onClick={ ( event ) => {
+							setIsLinkOpen( true );
+							setOpenedBy( event.currentTarget );
+						} }
 					/>
 					{ ! isAtMaxNesting && (
 						<ToolbarButton
@@ -736,50 +481,11 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
-					<TextControl
-						value={ label || '' }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						label={ __( 'Label' ) }
-						autoComplete="off"
-					/>
-					<TextControl
-						value={ url || '' }
-						onChange={ ( urlValue ) => {
-							setAttributes( { url: urlValue } );
-						} }
-						label={ __( 'URL' ) }
-						autoComplete="off"
-					/>
-					<TextareaControl
-						value={ description || '' }
-						onChange={ ( descriptionValue ) => {
-							setAttributes( { description: descriptionValue } );
-						} }
-						label={ __( 'Description' ) }
-						help={ __(
-							'The description will be displayed in the menu if the current theme supports it.'
-						) }
-					/>
-					<TextControl
-						value={ title || '' }
-						onChange={ ( titleValue ) => {
-							setAttributes( { title: titleValue } );
-						} }
-						label={ __( 'Link title' ) }
-						autoComplete="off"
-					/>
-					<TextControl
-						value={ rel || '' }
-						onChange={ ( relValue ) => {
-							setAttributes( { rel: relValue } );
-						} }
-						label={ __( 'Link rel' ) }
-						autoComplete="off"
-					/>
-				</PanelBody>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					setIsLabelFieldFocused={ setIsLabelFieldFocused }
+				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
@@ -787,164 +493,130 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<Tooltip position="top center" text={ tooltipText }>
-								<>
-									<span>{ missingText }</span>
-									<span className="wp-block-navigation-link__missing_text-tooltip">
-										{ tooltipText }
-									</span>
-								</>
+							<Tooltip text={ tooltipText }>
+								<span>{ missingText }</span>
 							</Tooltip>
 						</div>
 					) : (
 						<>
-							{ ! isInvalid && ! isDraft && (
-								<>
-									<RichText
-										ref={ ref }
-										identifier="label"
-										className="wp-block-navigation-item__label"
-										value={ label }
-										onChange={ ( labelValue ) =>
-											setAttributes( {
-												label: labelValue,
-											} )
-										}
-										onMerge={ mergeBlocks }
-										onReplace={ onReplace }
-										__unstableOnSplitAtEnd={ () =>
-											insertBlocksAfter(
-												createBlock(
-													'core/navigation-link'
+							{ ! isInvalid &&
+								! isDraft &&
+								! isLabelFieldFocused && (
+									<>
+										<RichText
+											ref={ ref }
+											identifier="label"
+											className="wp-block-navigation-item__label"
+											value={ label }
+											onChange={ ( labelValue ) =>
+												setAttributes( {
+													label: labelValue,
+												} )
+											}
+											onMerge={ mergeBlocks }
+											onReplace={ onReplace }
+											__unstableOnSplitAtEnd={ () =>
+												insertBlocksAfter(
+													createBlock(
+														'core/navigation-link'
+													)
 												)
-											)
-										}
-										aria-label={ __(
-											'Navigation link text'
+											}
+											aria-label={ __(
+												'Navigation link text'
+											) }
+											placeholder={ itemLabelPlaceholder }
+											withoutInteractiveFormatting
+										/>
+										{ description && (
+											<span className="wp-block-navigation-item__description">
+												{ description }
+											</span>
 										) }
-										placeholder={ itemLabelPlaceholder }
-										withoutInteractiveFormatting
-										allowedFormats={ [
-											'core/bold',
-											'core/italic',
-											'core/image',
-											'core/strikethrough',
-										] }
-										onClick={ () => {
-											if ( ! url ) {
-												setIsLinkOpen( true );
+									</>
+								) }
+							{ ( isInvalid ||
+								isDraft ||
+								isLabelFieldFocused ) && (
+								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
+									<Tooltip text={ tooltipText }>
+										<span
+											aria-label={ __(
+												'Navigation link text'
+											) }
+										>
+											{
+												// Some attributes are stored in an escaped form. It's a legacy issue.
+												// Ideally they would be stored in a raw, unescaped form.
+												// Unescape is used here to "recover" the escaped characters
+												// so they display without encoding.
+												// See `updateAttributes` for more details.
+												`${ decodeEntities( label ) } ${
+													isInvalid || isDraft
+														? placeholderText
+														: ''
+												}`.trim()
 											}
-										} }
-									/>
-									{ description && (
-										<span className="wp-block-navigation-item__description">
-											{ description }
 										</span>
-									) }
-								</>
-							) }
-							{ ( isInvalid || isDraft ) && (
-								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
-									<KeyboardShortcuts
-										shortcuts={ {
-											enter: () =>
-												isSelected &&
-												setIsLinkOpen( true ),
-										} }
-									/>
-									<Tooltip
-										position="top center"
-										text={ tooltipText }
-									>
-										<>
-											<span
-												aria-label={ __(
-													'Navigation link text'
-												) }
-											>
-												{
-													// Some attributes are stored in an escaped form. It's a legacy issue.
-													// Ideally they would be stored in a raw, unescaped form.
-													// Unescape is used here to "recover" the escaped characters
-													// so they display without encoding.
-													// See `updateNavigationLinkBlockAttributes` for more details.
-													`${ unescape(
-														label
-													) } ${ placeholderText }`.trim()
-												}
-											</span>
-											<span className="wp-block-navigation-link__missing_text-tooltip">
-												{ tooltipText }
-											</span>
-										</>
 									</Tooltip>
 								</div>
 							) }
 						</>
 					) }
 					{ isLinkOpen && (
-						<Popover
-							placement="bottom"
-							onClose={ () => setIsLinkOpen( false ) }
-							anchor={ popoverAnchor }
-							shift
-						>
-							<LinkControl
-								hasTextControl
-								hasRichPreviews
-								className="wp-block-navigation-link__inline-link-input"
-								value={ link }
-								showInitialSuggestions={ true }
-								withCreateSuggestion={ userCanCreate }
-								createSuggestion={ handleCreate }
-								createSuggestionButtonText={ ( searchTerm ) => {
-									let format;
-									if ( type === 'post' ) {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft post: <mark>%s</mark>'
-										);
-									} else {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft page: <mark>%s</mark>'
-										);
+						<LinkUI
+							ref={ linkUIref }
+							clientId={ clientId }
+							link={ attributes }
+							onClose={ () => {
+								// If there is no link then remove the auto-inserted block.
+								// This avoids empty blocks which can provided a poor UX.
+								if ( ! url ) {
+									// Fixes https://github.com/WordPress/gutenberg/issues/61361
+									// There's a chance we're closing due to the user selecting the browse all button.
+									// Only move focus if the focus is still within the popover ui. If it's not within
+									// the popover, it's because something has taken the focus from the popover, and
+									// we don't want to steal it back.
+									if (
+										linkUIref.current.contains(
+											window.document.activeElement
+										)
+									) {
+										// Select the previous block to keep focus nearby
+										selectPreviousBlock( clientId, true );
 									}
-									return createInterpolateElement(
-										sprintf( format, searchTerm ),
-										{ mark: <mark /> }
-									);
-								} }
-								noDirectEntry={ !! type }
-								noURLSuggestion={ !! type }
-								suggestionsQuery={ getSuggestionsQuery(
-									type,
-									kind
-								) }
-								onChange={ ( updatedValue ) =>
-									updateNavigationLinkBlockAttributes(
-										updatedValue,
-										setAttributes,
-										attributes
-									)
+
+									// Remove the link.
+									onReplace( [] );
+									return;
 								}
-								onRemove={ removeLink }
-								renderControlBottom={
-									! url
-										? () => (
-												<LinkControlTransforms
-													clientId={ clientId }
-													replace={ replaceBlock }
-												/>
-										  )
-										: null
+
+								setIsLinkOpen( false );
+								if ( openedBy ) {
+									openedBy.focus();
+									setOpenedBy( null );
+								} else if ( ref.current ) {
+									// select the ref when adding a new link
+									ref.current.focus();
+								} else {
+									// Fallback
+									selectPreviousBlock( clientId, true );
 								}
-							/>
-						</Popover>
+							} }
+							anchor={ popoverAnchor }
+							onRemove={ removeLink }
+							onChange={ ( updatedValue ) => {
+								updateAttributes(
+									updatedValue,
+									setAttributes,
+									attributes
+								);
+							} }
+						/>
 					) }
 				</a>
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 327f89c58ae3ab..84cd6f6d4ee363 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -67,14 +67,6 @@
 	color: #000;
 }
 
-.wp-block-navigation-link__missing_text-tooltip {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-}
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */
@@ -95,9 +87,6 @@
 		$stop2: 64%;
 
 		--wp-underline-color: var(--wp-admin-theme-color);
-		.is-dark-theme & {
-			--wp-underline-color: #{ $dark-theme-focus };
-		}
 
 		background-image:
 			linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
diff --git a/packages/block-library/src/navigation-link/hooks.js b/packages/block-library/src/navigation-link/hooks.js
index 57a942199e114a..585e4b160df798 100644
--- a/packages/block-library/src/navigation-link/hooks.js
+++ b/packages/block-library/src/navigation-link/hooks.js
@@ -4,7 +4,7 @@
 import {
 	category,
 	page,
-	postContent,
+	postList,
 	tag,
 	customPostType,
 } from '@wordpress/icons';
@@ -12,7 +12,7 @@ import {
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
-			return postContent;
+			return postList;
 		case 'page':
 			return page;
 		case 'tag':
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index f32437b41a3f84..5653e04fca88a3 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * Server-side rendering of the `core/navigation-link` block.
+ * Server-side registering and rendering of the `core/navigation-link` block.
  *
  * @package WordPress
  */
@@ -9,18 +9,19 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @since 5.9.0
+ *
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_link_build_css_colors( $context, $attributes ) {
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -80,6 +81,8 @@ function block_core_navigation_link_build_css_colors( $context, $attributes ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -114,15 +117,52 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
+ * @since 5.9.0
+ *
  * @return string
  */
 function block_core_navigation_link_render_submenu_icon() {
 	return '<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>';
 }
 
+/**
+ * Decodes a url if it's encoded, returning the same url if not.
+ *
+ * @since 6.2.0
+ *
+ * @param string $url The url to decode.
+ *
+ * @return string $url Returns the decoded url.
+ */
+function block_core_navigation_link_maybe_urldecode( $url ) {
+	$is_url_encoded = false;
+	$query          = parse_url( $url, PHP_URL_QUERY );
+	$query_params   = wp_parse_args( $query );
+
+	foreach ( $query_params as $query_param ) {
+		$can_query_param_be_encoded = is_string( $query_param ) && ! empty( $query_param );
+		if ( ! $can_query_param_be_encoded ) {
+			continue;
+		}
+		if ( rawurldecode( $query_param ) !== $query_param ) {
+			$is_url_encoded = true;
+			break;
+		}
+	}
+
+	if ( $is_url_encoded ) {
+		return rawurldecode( $url );
+	}
+
+	return $url;
+}
+
+
 /**
  * Renders the `core/navigation-link` block.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -147,17 +187,23 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_link_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
-		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
+
+	if ( is_post_type_archive() ) {
+		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
+		if ( $attributes['url'] === $queried_archive_link ) {
+			$is_active = true;
+		}
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -171,7 +217,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( $attributes['url'] ) . '"';
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
 	}
 
 	if ( $is_active ) {
@@ -240,6 +286,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 /**
  * Returns a navigation link variation
  *
+ * @since 5.9.0
+ *
  * @param WP_Taxonomy|WP_Post_Type $entity post type or taxonomy entity.
  * @param string                   $kind string of value 'taxonomy' or 'post-type'.
  *
@@ -298,19 +346,40 @@ function build_variation_for_navigation_link( $entity, $kind ) {
 }
 
 /**
- * Register the navigation link block.
+ * Filters the registered variations for a block type.
+ * Returns the dynamically built variations for all post-types and taxonomies.
  *
- * @uses render_block_core_navigation()
- * @throws WP_Error An WP_Error exception parsing the block definition.
+ * @since 6.5.0
+ *
+ * @param array         $variations Array of registered variations for a block type.
+ * @param WP_Block_Type $block_type The full block type object.
  */
-function register_block_core_navigation_link() {
+function block_core_navigation_link_filter_variations( $variations, $block_type ) {
+	if ( 'core/navigation-link' !== $block_type->name ) {
+		return $variations;
+	}
+
+	$generated_variations = block_core_navigation_link_build_variations();
+	return array_merge( $variations, $generated_variations );
+}
+
+/**
+ * Returns an array of variations for the navigation link block.
+ *
+ * @since 6.5.0
+ *
+ * @return array
+ */
+function block_core_navigation_link_build_variations() {
 	$post_types = get_post_types( array( 'show_in_nav_menus' => true ), 'objects' );
 	$taxonomies = get_taxonomies( array( 'show_in_nav_menus' => true ), 'objects' );
 
-	// Use two separate arrays as a way to order the variations in the UI.
-	// Known variations (like Post Link and Page Link) are added to the
-	// `built_ins` array. Variations for custom post types and taxonomies are
-	// added to the `variations` array and will always appear after `built-ins.
+	/*
+	 * Use two separate arrays as a way to order the variations in the UI.
+	 * Known variations (like Post Link and Page Link) are added to the
+	 * `built_ins` array. Variations for custom post types and taxonomies are
+	 * added to the `variations` array and will always appear after `built-ins.
+	 */
 	$built_ins  = array();
 	$variations = array();
 
@@ -335,12 +404,28 @@ function register_block_core_navigation_link() {
 		}
 	}
 
+	return array_merge( $built_ins, $variations );
+}
+
+/**
+ * Registers the navigation link block.
+ *
+ * @since 5.9.0
+ *
+ * @uses render_block_core_navigation_link()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
+ */
+function register_block_core_navigation_link() {
 	register_block_type_from_metadata(
 		__DIR__ . '/navigation-link',
 		array(
 			'render_callback' => 'render_block_core_navigation_link',
-			'variations'      => array_merge( $built_ins, $variations ),
 		)
 	);
 }
 add_action( 'init', 'register_block_core_navigation_link' );
+/**
+ * Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
+ * Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
+ */
+add_action( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );
diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
new file mode 100644
index 00000000000000..ee238c71ed28e0
--- /dev/null
+++ b/packages/block-library/src/navigation-link/link-ui.js
@@ -0,0 +1,328 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import {
+	Popover,
+	Button,
+	VisuallyHidden,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalLinkControl as LinkControl,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import {
+	createInterpolateElement,
+	useMemo,
+	useState,
+	useRef,
+	useEffect,
+	forwardRef,
+} from '@wordpress/element';
+import {
+	store as coreStore,
+	useResourcePermissions,
+} from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
+import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { PrivateQuickInserter: QuickInserter } = unlock(
+	blockEditorPrivateApis
+);
+
+/**
+ * Given the Link block's type attribute, return the query params to give to
+ * /wp/v2/search.
+ *
+ * @param {string} type Link block's type attribute.
+ * @param {string} kind Link block's entity of kind (post-type|taxonomy)
+ * @return {{ type?: string, subtype?: string }} Search query params.
+ */
+export function getSuggestionsQuery( type, kind ) {
+	switch ( type ) {
+		case 'post':
+		case 'page':
+			return { type: 'post', subtype: type };
+		case 'category':
+			return { type: 'term', subtype: 'category' };
+		case 'tag':
+			return { type: 'term', subtype: 'post_tag' };
+		case 'post_format':
+			return { type: 'post-format' };
+		default:
+			if ( kind === 'taxonomy' ) {
+				return { type: 'term', subtype: type };
+			}
+			if ( kind === 'post-type' ) {
+				return { type: 'post', subtype: type };
+			}
+			return {
+				// for custom link which has no type
+				// always show pages as initial suggestions
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+				},
+			};
+	}
+}
+
+function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
+	const { rootBlockClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return {
+				rootBlockClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+
+	const dialogTitleId = useInstanceId(
+		LinkControl,
+		`link-ui-block-inserter__title`
+	);
+	const dialogDescritionId = useInstanceId(
+		LinkControl,
+		`link-ui-block-inserter__description`
+	);
+
+	if ( ! clientId ) {
+		return null;
+	}
+
+	return (
+		<div
+			className="link-ui-block-inserter"
+			role="dialog"
+			aria-labelledby={ dialogTitleId }
+			aria-describedby={ dialogDescritionId }
+			ref={ focusOnMountRef }
+		>
+			<VisuallyHidden>
+				<h2 id={ dialogTitleId }>{ __( 'Add block' ) }</h2>
+
+				<p id={ dialogDescritionId }>
+					{ __( 'Choose a block to add to your Navigation.' ) }
+				</p>
+			</VisuallyHidden>
+
+			<Button
+				className="link-ui-block-inserter__back"
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+				onClick={ ( e ) => {
+					e.preventDefault();
+					onBack();
+				} }
+				size="small"
+			>
+				{ __( 'Back' ) }
+			</Button>
+
+			<QuickInserter
+				rootClientId={ rootBlockClientId }
+				clientId={ clientId }
+				isAppender={ false }
+				prioritizePatterns={ false }
+				selectBlockOnInsert
+				hasSearch={ false }
+				onSelect={ onSelectBlock }
+			/>
+		</div>
+	);
+}
+
+function UnforwardedLinkUI( props, ref ) {
+	const { label, url, opensInNewTab, type, kind } = props.link;
+	const postType = type || 'page';
+
+	const [ addingBlock, setAddingBlock ] = useState( false );
+	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: postType,
+	} );
+
+	async function handleCreate( pageTitle ) {
+		const page = await saveEntityRecord( 'postType', postType, {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: postType,
+			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
+			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
+			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
+			// e.g.
+			// - title.raw = "Yes & No"
+			// - title.rendered = "Yes &#038; No"
+			// - decodeEntities( title.rendered ) = "Yes & No"
+			// See:
+			// - https://github.com/WordPress/gutenberg/pull/41063
+			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
+			title: decodeEntities( page.title.rendered ),
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
+	const link = useMemo(
+		() => ( {
+			url,
+			opensInNewTab,
+			title: label && stripHTML( label ),
+		} ),
+		[ label, opensInNewTab, url ]
+	);
+
+	const dialogTitleId = useInstanceId(
+		LinkUI,
+		`link-ui-link-control__title`
+	);
+	const dialogDescritionId = useInstanceId(
+		LinkUI,
+		`link-ui-link-control__description`
+	);
+
+	// Selecting a block should close the popover and also remove the (previously) automatically inserted
+	// link block so that the newly selected block can be inserted in its place.
+	const { onClose: onSelectBlock } = props;
+
+	return (
+		<Popover
+			ref={ ref }
+			placement="bottom"
+			onClose={ props.onClose }
+			anchor={ props.anchor }
+			shift
+		>
+			{ ! addingBlock && (
+				<div
+					role="dialog"
+					aria-labelledby={ dialogTitleId }
+					aria-describedby={ dialogDescritionId }
+				>
+					<VisuallyHidden>
+						<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
+
+						<p id={ dialogDescritionId }>
+							{ __(
+								'Search for and add a link to your Navigation.'
+							) }
+						</p>
+					</VisuallyHidden>
+					<LinkControl
+						hasTextControl
+						hasRichPreviews
+						value={ link }
+						showInitialSuggestions
+						withCreateSuggestion={ permissions.canCreate }
+						createSuggestion={ handleCreate }
+						createSuggestionButtonText={ ( searchTerm ) => {
+							let format;
+
+							if ( type === 'post' ) {
+								/* translators: %s: search term. */
+								format = __(
+									'Create draft post: <mark>%s</mark>'
+								);
+							} else {
+								/* translators: %s: search term. */
+								format = __(
+									'Create draft page: <mark>%s</mark>'
+								);
+							}
+
+							return createInterpolateElement(
+								sprintf( format, searchTerm ),
+								{
+									mark: <mark />,
+								}
+							);
+						} }
+						noDirectEntry={ !! type }
+						noURLSuggestion={ !! type }
+						suggestionsQuery={ getSuggestionsQuery( type, kind ) }
+						onChange={ props.onChange }
+						onRemove={ props.onRemove }
+						onCancel={ props.onCancel }
+						renderControlBottom={ () =>
+							! link?.url?.length && (
+								<LinkUITools
+									focusAddBlockButton={ focusAddBlockButton }
+									setAddingBlock={ () => {
+										setAddingBlock( true );
+										setFocusAddBlockButton( false );
+									} }
+								/>
+							)
+						}
+					/>
+				</div>
+			) }
+
+			{ addingBlock && (
+				<LinkUIBlockInserter
+					clientId={ props.clientId }
+					onBack={ () => {
+						setAddingBlock( false );
+						setFocusAddBlockButton( true );
+					} }
+					onSelectBlock={ onSelectBlock }
+				/>
+			) }
+		</Popover>
+	);
+}
+
+export const LinkUI = forwardRef( UnforwardedLinkUI );
+
+const LinkUITools = ( { setAddingBlock, focusAddBlockButton } ) => {
+	const blockInserterAriaRole = 'listbox';
+	const addBlockButtonRef = useRef();
+
+	// Focus the add block button when the popover is opened.
+	useEffect( () => {
+		if ( focusAddBlockButton ) {
+			addBlockButtonRef.current?.focus();
+		}
+	}, [ focusAddBlockButton ] );
+
+	return (
+		<VStack className="link-ui-tools">
+			<Button
+				__next40pxDefaultSize
+				ref={ addBlockButtonRef }
+				icon={ plus }
+				onClick={ ( e ) => {
+					e.preventDefault();
+					setAddingBlock( true );
+				} }
+				aria-haspopup={ blockInserterAriaRole }
+			>
+				{ __( 'Add block' ) }
+			</Button>
+		</VStack>
+	);
+};
+
+export default LinkUITools;
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 19080c8d384823..f2f7d14f93fce3 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -5,7 +5,6 @@
 .wp-block-navigation {
 	// This wraps just the innermost text for custom menu items.
 	.wp-block-navigation-item__label {
-		word-break: normal;
 		overflow-wrap: break-word;
 	}
 
@@ -15,3 +14,17 @@
 		display: none;
 	}
 }
+
+.link-ui-tools {
+	border-top: 1px solid $gray-100;
+	padding: $grid-unit-10;
+}
+
+.link-ui-block-inserter {
+	padding-top: $grid-unit-10;
+}
+
+.link-ui-block-inserter__back {
+	margin-left: $grid-unit-10;
+	text-transform: uppercase;
+}
diff --git a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap
index 7d3d3335851933..5c9aeb8284b453 100644
--- a/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap
+++ b/packages/block-library/src/navigation-link/test/__snapshots__/hooks.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
-Object {
+{
   "extraProp": "extraProp",
   "name": "core/navigation-link",
-  "variations": Array [
-    Object {
-      "attributes": Object {},
+  "variations": [
+    {
+      "attributes": {},
       "description": "A link to a custom URL.",
       "icon": <SVG
         viewBox="0 0 24 24"
@@ -20,25 +20,25 @@ Object {
       "name": "link",
       "title": "Custom Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "post",
       },
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="https://www.w3.org/2000/svg"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
+          d="M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z"
         />
       </SVG>,
       "isActive": [Function],
       "name": "post",
       "title": "Post Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "page",
       },
       "description": "A link to a page.",
@@ -47,15 +47,18 @@ Object {
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M7 5.5h10a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H7a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2zm-1 3.75H8v1.5h8v-1.5zM8 11h8v1.5H8V11zm6 3.25H8v1.5h6v-1.5z"
+          d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
+        />
+        <Path
+          d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
         />
       </SVG>,
       "isActive": [Function],
       "name": "page",
       "title": "Page Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "category",
       },
       "description": "A link to a category.",
@@ -73,8 +76,8 @@ Object {
       "name": "category",
       "title": "Category Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "tag",
       },
       "description": "A link to a tag.",
@@ -83,7 +86,7 @@ Object {
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M20.1 11.2l-6.7-6.7c-.1-.1-.3-.2-.5-.2H5c-.4-.1-.8.3-.8.7v7.8c0 .2.1.4.2.5l6.7 6.7c.2.2.5.4.7.5s.6.2.9.2c.3 0 .6-.1.9-.2.3-.1.5-.3.8-.5l5.6-5.6c.4-.4.7-1 .7-1.6.1-.6-.2-1.2-.6-1.6zM19 13.4L13.4 19c-.1.1-.2.1-.3.2-.2.1-.4.1-.6 0-.1 0-.2-.1-.3-.2l-6.5-6.5V5.8h6.8l6.5 6.5c.2.2.2.4.2.6 0 .1 0 .3-.2.5zM9 8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z"
+          d="M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
         />
       </SVG>,
       "isActive": [Function],
diff --git a/packages/block-library/src/navigation-link/test/edit.js b/packages/block-library/src/navigation-link/test/edit.js
index 8d052a5e3f133a..ec396a64b20586 100644
--- a/packages/block-library/src/navigation-link/test/edit.js
+++ b/packages/block-library/src/navigation-link/test/edit.js
@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import { updateNavigationLinkBlockAttributes } from '../edit';
+import { updateAttributes } from '../update-attributes';
 
 describe( 'edit', () => {
-	describe( 'updateNavigationLinkBlockAttributes', () => {
+	describe( 'updateAttributes', () => {
 		// Data shapes are linked to fetchLinkSuggestions from
 		// core-data/src/fetch/__experimental-fetch-link-suggestions.js.
 		it( 'can update a post link', () => {
@@ -18,10 +18,7 @@ describe( 'edit', () => {
 				type: 'post',
 			};
 
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 1337,
 				label: 'Menu Test',
@@ -42,10 +39,7 @@ describe( 'edit', () => {
 				type: 'page',
 				url: 'http://wordpress.local/sample-page/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 2,
 				kind: 'post-type',
@@ -66,10 +60,7 @@ describe( 'edit', () => {
 				type: 'post_tag',
 				url: 'http://wordpress.local/tag/bar/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 15,
 				kind: 'taxonomy',
@@ -90,10 +81,7 @@ describe( 'edit', () => {
 				type: 'category',
 				url: 'http://wordpress.local/category/cats/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 9,
 				kind: 'taxonomy',
@@ -114,10 +102,7 @@ describe( 'edit', () => {
 				type: 'portfolio',
 				url: 'http://wordpress.local/portfolio/fall/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 131,
 				kind: 'post-type',
@@ -138,10 +123,7 @@ describe( 'edit', () => {
 				type: 'portfolio_tag',
 				url: 'http://wordpress.local/portfolio_tag/PortfolioTag/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 4,
 				kind: 'taxonomy',
@@ -162,10 +144,7 @@ describe( 'edit', () => {
 				type: 'portfolio_category',
 				url: 'http://wordpress.local/portfolio_category/Portfolio-category/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 2,
 				kind: 'taxonomy',
@@ -186,10 +165,7 @@ describe( 'edit', () => {
 				type: 'post-format',
 				url: 'http://wordpress.local/type/video/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			// post_format returns a slug ID value from the Search API
 			// we do not persist this ID since we expect this value to be a post or term ID.
 			expect( setAttributes ).toHaveBeenCalledWith( {
@@ -208,10 +184,7 @@ describe( 'edit', () => {
 					opensInNewTab: false,
 					url: 'www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					url: 'www.wordpress.org',
@@ -229,10 +202,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'http://www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'www.wordpress.org',
@@ -250,10 +220,7 @@ describe( 'edit', () => {
 					type: 'mailto',
 					url: 'mailto:foo@example.com',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'mailto:foo@example.com',
@@ -272,10 +239,7 @@ describe( 'edit', () => {
 					type: 'internal',
 					url: '#foo',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: '#foo',
@@ -294,10 +258,7 @@ describe( 'edit', () => {
 					type: 'tel',
 					url: 'tel:5555555',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'tel:5555555',
@@ -319,10 +280,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'https://www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'www.wordpress.org',
@@ -339,10 +297,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -359,10 +314,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'https://wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -380,10 +332,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'http://wordpress.org/?s=<>',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -408,11 +357,7 @@ describe( 'edit', () => {
 					type: 'post',
 				};
 
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes,
-					mockState
-				);
+				updateAttributes( linkSuggestion, setAttributes, mockState );
 				expect( mockState ).toEqual( {
 					id: 1337,
 					label: 'Menu Test',
@@ -422,7 +367,7 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 				// Click on the existing link control, and toggle opens new tab.
-				updateNavigationLinkBlockAttributes(
+				updateAttributes(
 					{
 						url: 'https://wordpress.local/menu-test/',
 						opensInNewTab: true,
@@ -453,11 +398,7 @@ describe( 'edit', () => {
 					type: 'post',
 				};
 
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes,
-					mockState
-				);
+				updateAttributes( linkSuggestion, setAttributes, mockState );
 				expect( mockState ).toEqual( {
 					id: 1337,
 					label: 'Menu Test',
@@ -467,7 +408,7 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 				// Click on the existing link control, and toggle opens new tab.
-				updateNavigationLinkBlockAttributes(
+				updateAttributes(
 					{
 						url: 'https://wordpress.local/foo/',
 						opensInNewTab: false,
diff --git a/packages/block-library/src/navigation-link/transforms.js b/packages/block-library/src/navigation-link/transforms.js
index 7b213a48051065..ff38589b926877 100644
--- a/packages/block-library/src/navigation-link/transforms.js
+++ b/packages/block-library/src/navigation-link/transforms.js
@@ -40,6 +40,20 @@ const transforms = {
 				return createBlock( 'core/navigation-link' );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/buttons' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
 	],
 	to: [
 		{
@@ -91,6 +105,28 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/page-list' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/buttons' ],
+			transform: ( { label, url, rel, title, opensInNewTab } ) => {
+				return createBlock( 'core/buttons', {}, [
+					createBlock( 'core/button', {
+						text: label,
+						url,
+						rel,
+						title,
+						linkTarget: opensInNewTab ? '_blank' : undefined,
+					} ),
+				] );
+			},
+		},
 	],
 };
 
diff --git a/packages/block-library/src/navigation-link/update-attributes.js b/packages/block-library/src/navigation-link/update-attributes.js
new file mode 100644
index 00000000000000..6aa28d1818d3cc
--- /dev/null
+++ b/packages/block-library/src/navigation-link/update-attributes.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { escapeHTML } from '@wordpress/escape-html';
+import { safeDecodeURI } from '@wordpress/url';
+
+/**
+ * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
+ */
+/**
+ * Navigation Link Block Attributes
+ *
+ * @typedef {Object} WPNavigationLinkBlockAttributes
+ *
+ * @property {string}               [label]         Link text.
+ * @property {WPNavigationLinkKind} [kind]          Kind is used to differentiate between term and post ids to check post draft status.
+ * @property {string}               [type]          The type such as post, page, tag, category and other custom types.
+ * @property {string}               [rel]           The relationship of the linked URL.
+ * @property {number}               [id]            A post or term id.
+ * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
+ * @property {string}               [url]           Link href.
+ * @property {string}               [title]         Link title attribute.
+ */
+/**
+ * Link Control onChange handler that updates block attributes when a setting is changed.
+ *
+ * @param {Object}                          updatedValue    New block attributes to update.
+ * @param {Function}                        setAttributes   Block attribute update function.
+ * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
+ */
+
+export const updateAttributes = (
+	updatedValue = {},
+	setAttributes,
+	blockAttributes = {}
+) => {
+	const {
+		label: originalLabel = '',
+		kind: originalKind = '',
+		type: originalType = '',
+	} = blockAttributes;
+
+	const {
+		title: newLabel = '', // the title of any provided Post.
+		url: newUrl = '',
+		opensInNewTab,
+		id,
+		kind: newKind = originalKind,
+		type: newType = originalType,
+	} = updatedValue;
+
+	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+
+	const useNewLabel =
+		newLabel &&
+		newLabel !== originalLabel &&
+		// LinkControl without the title field relies
+		// on the check below. Specifically, it assumes that
+		// the URL is the same as a title.
+		// This logic a) looks suspicious and b) should really
+		// live in the LinkControl and not here. It's a great
+		// candidate for future refactoring.
+		newLabelWithoutHttp !== newUrlWithoutHttp;
+
+	// Unfortunately this causes the escaping model to be inverted.
+	// The escaped content is stored in the block attributes (and ultimately in the database),
+	// and then the raw data is "recovered" when outputting into the DOM.
+	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
+	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
+	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
+	// See also:
+	// - https://github.com/WordPress/gutenberg/pull/41063
+	// - https://github.com/WordPress/gutenberg/pull/18617.
+	const label = useNewLabel
+		? escapeHTML( newLabel )
+		: originalLabel || escapeHTML( newUrlWithoutHttp );
+
+	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
+	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
+
+	const isBuiltInType =
+		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
+
+	const isCustomLink =
+		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
+	const kind = isCustomLink ? 'custom' : newKind;
+
+	setAttributes( {
+		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...( label && { label } ),
+		...( undefined !== opensInNewTab && { opensInNewTab } ),
+		...( id && Number.isInteger( id ) && { id } ),
+		...( kind && { kind } ),
+		...( type && type !== 'URL' && { type } ),
+	} );
+};
diff --git a/packages/block-library/src/navigation-submenu/block.json b/packages/block-library/src/navigation-submenu/block.json
index f311a9f36e41a7..e767b60aec3a6c 100644
--- a/packages/block-library/src/navigation-submenu/block.json
+++ b/packages/block-library/src/navigation-submenu/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation-submenu",
 	"title": "Submenu",
 	"category": "design",
@@ -58,7 +58,23 @@
 	],
 	"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
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-navigation-submenu-editor",
 	"style": "wp-block-navigation-submenu"
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index aa508e63a62262..c89eadf1cb589e 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import escapeHtml from 'escape-html';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,50 +9,46 @@ import escapeHtml from 'escape-html';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	PanelBody,
-	Popover,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
 	InnerBlocks,
 	useInnerBlocksProps,
 	InspectorControls,
 	RichText,
-	__experimentalLinkControl as LinkControl,
 	useBlockProps,
 	store as blockEditorStore,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import {
-	Fragment,
-	useState,
-	useEffect,
-	useRef,
-	createInterpolateElement,
-} from '@wordpress/element';
-import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import { isURL, prependHTTP } from '@wordpress/url';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
-import {
-	useResourcePermissions,
-	store as coreStore,
-} from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 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', 'core/navigation-submenu' ];
+const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+	'core/page-list',
+];
 
 const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
@@ -110,91 +105,6 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-function getSuggestionsQuery( type, kind ) {
-	switch ( type ) {
-		case 'post':
-		case 'page':
-			return { type: 'post', subtype: type };
-		case 'category':
-			return { type: 'term', subtype: 'category' };
-		case 'tag':
-			return { type: 'term', subtype: 'post_tag' };
-		case 'post_format':
-			return { type: 'post-format' };
-		default:
-			if ( kind === 'taxonomy' ) {
-				return { type: 'term', subtype: type };
-			}
-			if ( kind === 'post-type' ) {
-				return { type: 'post', subtype: type };
-			}
-			return {};
-	}
-}
-
-/**
- * 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
  */
@@ -214,64 +124,6 @@ function getColors( context, isSubMenu ) {
  * @property {string}               [title]         Link title attribute.
  */
 
-/**
- * Link Control onChange handler that updates block attributes when a setting is changed.
- *
- * @param {Object}                          updatedValue    New block attributes to update.
- * @param {Function}                        setAttributes   Block attribute update function.
- * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
- *
- */
-export const updateNavigationLinkBlockAttributes = (
-	updatedValue = {},
-	setAttributes,
-	blockAttributes = {}
-) => {
-	const {
-		label: originalLabel = '',
-		kind: originalKind = '',
-		type: originalType = '',
-	} = blockAttributes;
-	const {
-		title = '',
-		url = '',
-		opensInNewTab,
-		id,
-		kind: newKind = originalKind,
-		type: newType = originalType,
-	} = updatedValue;
-
-	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
-	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
-	const escapeTitle =
-		title !== '' &&
-		normalizedTitle !== normalizedURL &&
-		originalLabel !== title;
-	const label = escapeTitle
-		? escapeHtml( title )
-		: originalLabel || escapeHtml( normalizedURL );
-
-	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
-	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
-
-	const isBuiltInType =
-		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
-
-	const isCustomLink =
-		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
-	const kind = isCustomLink ? 'custom' : newKind;
-
-	setAttributes( {
-		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
-		...( label && { label } ),
-		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
-		...( kind && { kind } ),
-		...( type && type !== 'URL' && { type } ),
-	} );
-};
-
 export default function NavigationSubmenuEdit( {
 	attributes,
 	isSelected,
@@ -281,18 +133,18 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, type, opensInNewTab, url, description, rel, title, kind } =
-		attributes;
-	const link = {
-		url,
-		opensInNewTab,
-	};
+	const { label, url, description, rel, title } = attributes;
+
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
-	const { saveEntityRecord } = useDispatch( coreStore );
 
-	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
-		useDispatch( blockEditorStore );
+	const {
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlock,
+		selectBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
+	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -301,12 +153,8 @@ export default function NavigationSubmenuEdit( {
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
 
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
-
 	const {
-		isAtMaxNesting,
-		isTopLevelItem,
+		parentCount,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
 		hasChildren,
@@ -341,11 +189,10 @@ export default function NavigationSubmenuEdit( {
 			}
 
 			return {
-				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, name ).length >=
-					maxNestingLevel,
-				isTopLevelItem:
-					getBlockParentsByBlockName( clientId, name ).length === 0,
+				parentCount: getBlockParentsByBlockName(
+					clientId,
+					'core/navigation-submenu'
+				).length,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
 					clientId,
 					true
@@ -362,6 +209,8 @@ export default function NavigationSubmenuEdit( {
 		[ clientId ]
 	);
 
+	const prevHasChildren = usePrevious( hasChildren );
+
 	// Show the LinkControl on mount if the URL is empty
 	// ( When adding a new menu item)
 	// This can't be done in the useState call because it conflicts
@@ -372,16 +221,6 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering.
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelItem } );
-	}, [ isTopLevelItem ] );
-
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
 	 * when selecting a suggestion in the link popover, we force close on block unselection.
@@ -402,9 +241,6 @@ export default function NavigationSubmenuEdit( {
 			) {
 				// Focus and select the label text.
 				selectLabelText();
-			} else {
-				// Focus it (but do not select).
-				placeCaretAtHorizontalEdge( ref.current, true );
 			}
 		}
 	}, [ url ] );
@@ -424,46 +260,29 @@ export default function NavigationSubmenuEdit( {
 		selection.addRange( range );
 	}
 
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
-	async function handleCreate( pageTitle ) {
-		const postType = type || 'page';
-
-		const page = await saveEntityRecord( 'postType', postType, {
-			title: pageTitle,
-			status: 'draft',
-		} );
-
-		return {
-			id: page.id,
-			type: postType,
-			title: page.title.rendered,
-			url: page.link,
-			kind: 'post-type',
-		};
-	}
-
 	const {
 		textColor,
 		customTextColor,
 		backgroundColor,
 		customBackgroundColor,
-	} = getColors( context, ! isTopLevelItem );
+	} = getColors( context, parentCount > 0 );
 
 	function onKeyDown( event ) {
 		if ( isKeyboardEvent.primary( event, 'k' ) ) {
+			// Required to prevent the command center from opening,
+			// as it shares the CMD+K shortcut.
+			// See https://github.com/WordPress/gutenberg/pull/59845.
+			event.preventDefault();
+			// If we don't stop propogation, this event bubbles up to the parent submenu item
+			event.stopPropagation();
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		}
 	}
 
 	const blockProps = useBlockProps( {
 		ref: useMergeRefs( [ setPopoverAnchor, listItemRef ] ),
-		className: classnames( 'wp-block-navigation-item', {
+		className: clsx( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -485,54 +304,34 @@ export default function NavigationSubmenuEdit( {
 	// Always use overlay colors for submenus.
 	const innerBlocksColors = getColors( context, true );
 
-	const allowedBlocks = isAtMaxNesting
-		? ALLOWED_BLOCKS.filter(
-				( blockName ) => blockName !== 'core/navigation-submenu'
-		  )
-		: 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 allowedBlocks =
+		parentCount >= maxNestingLevel
+			? ALLOWED_BLOCKS.filter(
+					( blockName ) => blockName !== 'core/navigation-submenu'
+			  )
+			: ALLOWED_BLOCKS;
+
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const innerBlocksProps = useInnerBlocksProps( navigationChildBlockProps, {
+		allowedBlocks,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: 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';
 
@@ -542,17 +341,20 @@ export default function NavigationSubmenuEdit( {
 	}
 
 	useEffect( () => {
-		// If block is empty, transform to Navigation Link.
-		if ( ! hasChildren ) {
+		// If block becomes empty, transform to Navigation Link.
+		if ( ! hasChildren && prevHasChildren ) {
+			// This side-effect should not create an undo level as those should
+			// only be created via user interactions.
+			__unstableMarkNextChangeAsNotPersistent();
 			transformToLink();
 		}
-	}, [ hasChildren ] );
+	}, [ hasChildren, prevHasChildren ] );
 
 	const canConvertToLink =
 		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
-		<Fragment>
+		<>
 			<BlockControls>
 				<ToolbarGroup>
 					{ ! openSubmenusOnClick && (
@@ -561,7 +363,10 @@ export default function NavigationSubmenuEdit( {
 							icon={ linkIcon }
 							title={ __( 'Link' ) }
 							shortcut={ displayShortcut.primary( 'k' ) }
-							onClick={ () => setIsLinkOpen( true ) }
+							onClick={ ( event ) => {
+								setIsLinkOpen( true );
+								setOpenedBy( event.currentTarget );
+							} }
 						/>
 					) }
 
@@ -571,30 +376,35 @@ export default function NavigationSubmenuEdit( {
 						title={ __( 'Convert to Link' ) }
 						onClick={ transformToLink }
 						className="wp-block-navigation__submenu__revert"
-						isDisabled={ ! canConvertToLink }
+						disabled={ ! canConvertToLink }
 					/>
 				</ToolbarGroup>
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ label || '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
 						} }
-						label={ __( 'Label' ) }
+						label={ __( 'Text' ) }
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							setAttributes( { url: urlValue } );
 						} }
-						label={ __( 'URL' ) }
+						label={ __( 'Link' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
+						__nextHasNoMarginBottom
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
 							setAttributes( {
@@ -607,20 +417,30 @@ export default function NavigationSubmenuEdit( {
 						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
 						} }
-						label={ __( 'Link title' ) }
+						label={ __( 'Title attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'Additional information to help clarify the purpose of the link.'
+						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
 						} }
-						label={ __( 'Link rel' ) }
+						label={ __( 'Rel attribute' ) }
 						autoComplete="off"
+						help={ __(
+							'The relationship of the linked URL as space-separated link types.'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>
@@ -628,83 +448,57 @@ export default function NavigationSubmenuEdit( {
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<ParentElement className="wp-block-navigation-item__content">
 					{ /* eslint-enable */ }
-					{
-						<RichText
-							ref={ ref }
-							identifier="label"
-							className="wp-block-navigation-item__label"
-							value={ label }
-							onChange={ ( labelValue ) =>
-								setAttributes( { label: labelValue } )
+					<RichText
+						ref={ ref }
+						identifier="label"
+						className="wp-block-navigation-item__label"
+						value={ label }
+						onChange={ ( labelValue ) =>
+							setAttributes( { label: labelValue } )
+						}
+						onMerge={ mergeBlocks }
+						onReplace={ onReplace }
+						aria-label={ __( 'Navigation link text' ) }
+						placeholder={ itemLabelPlaceholder }
+						withoutInteractiveFormatting
+						onClick={ () => {
+							if ( ! openSubmenusOnClick && ! url ) {
+								setIsLinkOpen( true );
+								setOpenedBy( ref.current );
 							}
-							onMerge={ mergeBlocks }
-							onReplace={ onReplace }
-							aria-label={ __( 'Navigation link text' ) }
-							placeholder={ itemLabelPlaceholder }
-							withoutInteractiveFormatting
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/image',
-								'core/strikethrough',
-							] }
-							onClick={ () => {
-								if ( ! openSubmenusOnClick && ! url ) {
-									setIsLinkOpen( true );
+						} }
+					/>
+					{ description && (
+						<span className="wp-block-navigation-item__description">
+							{ description }
+						</span>
+					) }
+					{ ! openSubmenusOnClick && isLinkOpen && (
+						<LinkUI
+							clientId={ clientId }
+							link={ attributes }
+							onClose={ () => {
+								setIsLinkOpen( false );
+								if ( openedBy ) {
+									openedBy.focus();
+									setOpenedBy( null );
+								} else {
+									selectBlock( clientId );
 								}
 							} }
-						/>
-					}
-					{ ! openSubmenusOnClick && isLinkOpen && (
-						<Popover
-							placement="bottom"
-							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
-							shift
-						>
-							<LinkControl
-								className="wp-block-navigation-link__inline-link-input"
-								value={ link }
-								showInitialSuggestions={ true }
-								withCreateSuggestion={ userCanCreate }
-								createSuggestion={ handleCreate }
-								createSuggestionButtonText={ ( searchTerm ) => {
-									let format;
-									if ( type === 'post' ) {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft post: <mark>%s</mark>'
-										);
-									} else {
-										/* translators: %s: search term. */
-										format = __(
-											'Create draft page: <mark>%s</mark>'
-										);
-									}
-									return createInterpolateElement(
-										sprintf( format, searchTerm ),
-										{ mark: <mark /> }
-									);
-								} }
-								noDirectEntry={ !! type }
-								noURLSuggestion={ !! type }
-								suggestionsQuery={ getSuggestionsQuery(
-									type,
-									kind
-								) }
-								onChange={ ( updatedValue ) =>
-									updateNavigationLinkBlockAttributes(
-										updatedValue,
-										setAttributes,
-										attributes
-									)
-								}
-								onRemove={ () => {
-									setAttributes( { url: '' } );
-									speak( __( 'Link removed.' ), 'assertive' );
-								} }
-							/>
-						</Popover>
+							onRemove={ () => {
+								setAttributes( { url: '' } );
+								speak( __( 'Link removed.' ), 'assertive' );
+							} }
+							onChange={ ( updatedValue ) => {
+								updateAttributes(
+									updatedValue,
+									setAttributes,
+									attributes
+								);
+							} }
+						/>
 					) }
 				</ParentElement>
 				{ ( showSubmenuIcon || openSubmenusOnClick ) && (
@@ -714,6 +508,6 @@ export default function NavigationSubmenuEdit( {
 				) }
 				<div { ...innerBlocksProps } />
 			</div>
-		</Fragment>
+		</>
 	);
 }
diff --git a/packages/block-library/src/navigation-submenu/index.js b/packages/block-library/src/navigation-submenu/index.js
index c14ae6096fc9f8..69e97fb85325a5 100644
--- a/packages/block-library/src/navigation-submenu/index.js
+++ b/packages/block-library/src/navigation-submenu/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { addSubmenu } from '@wordpress/icons';
+import { page, addSubmenu } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,14 +17,27 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: addSubmenu,
-
-	__experimentalLabel: ( { label } ) => label,
-
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return page;
+		}
+		return addSubmenu;
+	},
+	__experimentalLabel( attributes, { context } ) {
+		const { label } = attributes;
+
+		const customName = attributes?.metadata?.name;
+
+		// In the list view, use the block's menu label as the label.
+		// If the menu label is empty, fall back to the default label.
+		if ( context === 'list-view' && ( customName || label ) ) {
+			return attributes?.metadata?.name || label;
+		}
+
+		return label;
+	},
 	edit,
-
 	save,
-
 	transforms,
 };
 
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index 87c7c91481cddb..0f560e2849fac2 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -5,81 +5,12 @@
  * @package WordPress
  */
 
-/**
- * Build an array with CSS classes and inline styles defining the colors
- * which will be applied to the navigation markup in the front-end.
- *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
- * @return array Colors CSS classes and inline styles.
- */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
-
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -114,6 +45,8 @@ function block_core_navigation_submenu_build_css_font_sizes( $context ) {
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
+ * @since 5.9.0
+ *
  * @return string
  */
 function block_core_navigation_submenu_render_submenu_icon() {
@@ -123,6 +56,8 @@ function block_core_navigation_submenu_render_submenu_icon() {
 /**
  * Renders the `core/navigation-submenu` block.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -130,7 +65,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -145,17 +79,20 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
+
+	if ( is_post_type_archive() ) {
+		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
+		if ( $attributes['url'] === $queried_archive_link ) {
+			$is_active = true;
+		}
+	}
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -222,7 +159,16 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		$html .= '>';
 		// End appending HTML attributes to anchor tag.
 
+		$html .= '<span class="wp-block-navigation-item__label">';
 		$html .= $label;
+		$html .= '</span>';
+
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
 
 		$html .= '</a>';
 		// End anchor tag content.
@@ -243,6 +189,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
+		// Add description if available.
+		if ( ! empty( $attributes['description'] ) ) {
+			$html .= '<span class="wp-block-navigation-item__description">';
+			$html .= wp_kses_post( $attributes['description'] );
+			$html .= '</span>';
+		}
+
 		$html .= '</button>';
 
 		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
@@ -250,15 +203,60 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
+
+		// This allows us to be able to get a response from wp_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = wp_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
+
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
 			$inner_blocks_html .= $inner_block->render();
 		}
 
+		if ( strpos( $inner_blocks_html, 'current-menu-item' ) ) {
+			$tag_processor = new WP_HTML_Tag_Processor( $html );
+			while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-navigation-item' ) ) ) {
+				$tag_processor->add_class( 'current-menu-ancestor' );
+			}
+			$html = $tag_processor->get_updated_html();
+		}
+
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $css_classes,
+				'style' => $style_attribute,
+			)
+		);
+
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
+			'<ul %s>%s</ul>',
+			$wrapper_attributes,
 			$inner_blocks_html
 		);
+
 	}
 
 	$html .= '</li>';
@@ -269,6 +267,8 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 /**
  * Register the navigation submenu block.
  *
+ * @since 5.9.0
+ *
  * @uses render_block_core_navigation_submenu()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */
diff --git a/packages/block-library/src/navigation/README.md b/packages/block-library/src/navigation/README.md
index b59c4b40d85e73..cbd52a8f21f0ed 100644
--- a/packages/block-library/src/navigation/README.md
+++ b/packages/block-library/src/navigation/README.md
@@ -10,4 +10,5 @@ The structural CSS for the navigation block targets generic classnames across me
 -   `.wp-block-navigation-item` is applied to every menu item.
 -   `.wp-block-navigation-item__content` is applied to the link inside a menu item.
 -   `.wp-block-navigation-item__label` is applied to the innermost container around the menu item text label.
+-   `.wp-block-navigation-item__description` is applied to the innermost container around the menu item description.
 -   `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
index b54da128bd86e4..c65e0c6224616e 100644
--- a/packages/block-library/src/navigation/block.json
+++ b/packages/block-library/src/navigation/block.json
@@ -1,9 +1,22 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
+	"allowedBlocks": [
+		"core/navigation-link",
+		"core/search",
+		"core/social-links",
+		"core/page-list",
+		"core/spacer",
+		"core/home-link",
+		"core/site-title",
+		"core/site-logo",
+		"core/navigation-submenu",
+		"core/loginout",
+		"core/buttons"
+	],
 	"description": "A collection of blocks that allow visitors to get around your site.",
 	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
@@ -87,11 +100,11 @@
 		"showSubmenuIcon": "showSubmenuIcon",
 		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
-		"orientation": "orientation",
 		"maxNestingLevel": "maxNestingLevel"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"ariaLabel": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -115,25 +128,18 @@
 				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,
+			"allowSizingOnChildren": true,
 			"default": {
 				"type": "flex"
 			}
 		},
-		"__experimentalStyle": {
-			"elements": {
-				"link": {
-					"color": {
-						"text": "inherit"
-					}
-				}
-			}
-		}
+		"interactivity": true,
+		"renaming": false
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }
diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js
new file mode 100644
index 00000000000000..154c490e83839b
--- /dev/null
+++ b/packages/block-library/src/navigation/constants.js
@@ -0,0 +1,25 @@
+export const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
+
+export const PRIORITIZED_INSERTER_BLOCKS = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
+
+// These parameters must be kept aligned with those in
+// lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: [ 'publish', 'draft' ],
+	order: 'desc',
+	orderby: 'date',
+};
+
+export const SELECT_NAVIGATION_MENUS_ARGS = [
+	'postType',
+	'wp_navigation',
+	PRELOADED_NAVIGATION_MENUS_QUERY,
+];
diff --git a/packages/block-library/src/navigation/deprecated.js b/packages/block-library/src/navigation/deprecated.js
index 95802a77f2256e..6f29ab224a4405 100644
--- a/packages/block-library/src/navigation/deprecated.js
+++ b/packages/block-library/src/navigation/deprecated.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -126,7 +121,7 @@ const v6 = {
 				blockGap: true,
 			},
 		},
-		__experimentalLayout: {
+		layout: {
 			allowSwitching: false,
 			allowInheriting: false,
 			default: {
@@ -331,22 +326,23 @@ const migrateTypographyPresets = function ( attributes ) {
 		...attributes,
 		style: {
 			...attributes.style,
-			typography: mapValues(
-				attributes.style.typography,
-				( value, key ) => {
-					const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
-					if ( prefix && value.startsWith( prefix ) ) {
-						const newValue = value.slice( prefix.length );
-						if (
-							'textDecoration' === key &&
-							'strikethrough' === newValue
-						) {
-							return 'line-through';
+			typography: Object.fromEntries(
+				Object.entries( attributes.style.typography ?? {} ).map(
+					( [ key, value ] ) => {
+						const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
+						if ( prefix && value.startsWith( prefix ) ) {
+							const newValue = value.slice( prefix.length );
+							if (
+								'textDecoration' === key &&
+								'strikethrough' === newValue
+							) {
+								return [ key, 'line-through' ];
+							}
+							return [ key, newValue ];
 						}
-						return newValue;
+						return [ key, value ];
 					}
-					return value;
-				}
+				)
 			),
 		},
 	};
diff --git a/packages/block-library/src/navigation/edit/accessible-description.js b/packages/block-library/src/navigation/edit/accessible-description.js
new file mode 100644
index 00000000000000..c93ecfa9ceb604
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/accessible-description.js
@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { VisuallyHidden } from '@wordpress/components';
+
+export default function AccessibleDescription( { id, children } ) {
+	return (
+		<VisuallyHidden>
+			<div id={ id } className="wp-block-navigation__description">
+				{ children }
+			</div>
+		</VisuallyHidden>
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/accessible-menu-description.js b/packages/block-library/src/navigation/edit/accessible-menu-description.js
new file mode 100644
index 00000000000000..d2912cc151eef2
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/accessible-menu-description.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AccessibleDescription from './accessible-description';
+
+export default function AccessibleMenuDescription( { id } ) {
+	const [ menuTitle ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
+	/* translators: %s: Title of a Navigation Menu post. */
+	const description = sprintf( __( `Navigation Menu: "%s"` ), menuTitle );
+
+	return (
+		<AccessibleDescription id={ id }>{ description }</AccessibleDescription>
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/are-blocks-dirty.js b/packages/block-library/src/navigation/edit/are-blocks-dirty.js
new file mode 100644
index 00000000000000..c4d1a8f76456a4
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/are-blocks-dirty.js
@@ -0,0 +1,56 @@
+export function areBlocksDirty( originalBlocks, blocks ) {
+	return ! isDeepEqual( originalBlocks, blocks, ( prop, x ) => {
+		// Skip inner blocks of page list during comparison as they
+		// are **always** controlled and may be updated async due to
+		// syncing with entity records. Left unchecked this would
+		// inadvertently trigger the dirty state.
+		if ( x?.name === 'core/page-list' && prop === 'innerBlocks' ) {
+			return true;
+		}
+	} );
+}
+
+/**
+ * Conditionally compares two candidates for deep equality.
+ * Provides an option to skip a given property of an object during comparison.
+ *
+ * @param {*}                  x          1st candidate for comparison
+ * @param {*}                  y          2nd candidate for comparison
+ * @param {Function|undefined} shouldSkip a function which can be used to skip a given property of an object.
+ * @return {boolean}                      whether the two candidates are deeply equal.
+ */
+const isDeepEqual = ( x, y, shouldSkip ) => {
+	if ( x === y ) {
+		return true;
+	} else if (
+		typeof x === 'object' &&
+		x !== null &&
+		x !== undefined &&
+		typeof y === 'object' &&
+		y !== null &&
+		y !== undefined
+	) {
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) {
+			return false;
+		}
+
+		for ( const prop in x ) {
+			if ( y.hasOwnProperty( prop ) ) {
+				// Afford skipping a given property of an object.
+				if ( shouldSkip && shouldSkip( prop, x ) ) {
+					return true;
+				}
+
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) ) {
+					return false;
+				}
+			} else {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	return false;
+};
diff --git a/packages/block-library/src/navigation/edit/deleted-navigation-warning.js b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
new file mode 100644
index 00000000000000..3d40f4d031ed34
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/deleted-navigation-warning.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { Warning } from '@wordpress/block-editor';
+import { Button, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, createInterpolateElement } from '@wordpress/element';
+
+function DeletedNavigationWarning( { onCreateNew, isNotice = false } ) {
+	const [ isButtonDisabled, setIsButtonDisabled ] = useState( false );
+
+	const handleButtonClick = () => {
+		setIsButtonDisabled( true );
+		onCreateNew();
+	};
+
+	const message = createInterpolateElement(
+		__(
+			'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
+		),
+		{
+			button: (
+				<Button
+					__next40pxDefaultSize
+					onClick={ handleButtonClick }
+					variant="link"
+					disabled={ isButtonDisabled }
+					accessibleWhenDisabled
+				/>
+			),
+		}
+	);
+
+	return isNotice ? (
+		<Notice status="warning" isDismissible={ false }>
+			{ message }
+		</Notice>
+	) : (
+		<Warning>{ message }</Warning>
+	);
+}
+
+export default DeletedNavigationWarning;
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 588f4397274bd9..ae7dd60bd0c5ba 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -1,34 +1,35 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
+	useCallback,
 	useState,
 	useEffect,
 	useRef,
 	Platform,
-	useMemo,
 } from '@wordpress/element';
 import {
 	InspectorControls,
 	useBlockProps,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	store as blockEditorStore,
 	withColors,
-	PanelColorSettings,
 	ContrastChecker,
 	getColorClassName,
 	Warning,
-	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
@@ -36,11 +37,12 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	Spinner,
+	Notice,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { createBlock } from '@wordpress/blocks';
 import { close, Icon } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,6 +68,120 @@ import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
+import DeletedNavigationWarning from './deleted-navigation-warning';
+import AccessibleDescription from './accessible-description';
+import AccessibleMenuDescription from './accessible-menu-description';
+import { unlock } from '../../lock-unlock';
+
+function ColorTools( {
+	textColor,
+	setTextColor,
+	backgroundColor,
+	setBackgroundColor,
+	overlayTextColor,
+	setOverlayTextColor,
+	overlayBackgroundColor,
+	setOverlayBackgroundColor,
+	clientId,
+	navRef,
+} ) {
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedColor, setDetectedColor ] = useState();
+	const [
+		detectedOverlayBackgroundColor,
+		setDetectedOverlayBackgroundColor,
+	] = useState();
+	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
+	// Turn on contrast checker for web only since it's not supported on mobile yet.
+	const enableContrastChecking = Platform.OS === 'web';
+	useEffect( () => {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		detectColors(
+			navRef.current,
+			setDetectedColor,
+			setDetectedBackgroundColor
+		);
+
+		const subMenuElement = navRef.current?.querySelector(
+			'[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
+		);
+
+		if ( ! subMenuElement ) {
+			return;
+		}
+
+		// Only detect submenu overlay colors if they have previously been explicitly set.
+		// This avoids the contrast checker from reporting on inherited submenu colors and
+		// showing the contrast warning twice.
+		if ( overlayTextColor.color || overlayBackgroundColor.color ) {
+			detectColors(
+				subMenuElement,
+				setDetectedOverlayColor,
+				setDetectedOverlayBackgroundColor
+			);
+		}
+	}, [
+		enableContrastChecking,
+		overlayTextColor.color,
+		overlayBackgroundColor.color,
+		navRef,
+	] );
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+	return (
+		<>
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: textColor.color,
+						label: __( 'Text' ),
+						onColorChange: setTextColor,
+						resetAllFilter: () => setTextColor(),
+					},
+					{
+						colorValue: backgroundColor.color,
+						label: __( 'Background' ),
+						onColorChange: setBackgroundColor,
+						resetAllFilter: () => setBackgroundColor(),
+					},
+					{
+						colorValue: overlayTextColor.color,
+						label: __( 'Submenu & overlay text' ),
+						onColorChange: setOverlayTextColor,
+						resetAllFilter: () => setOverlayTextColor(),
+					},
+					{
+						colorValue: overlayBackgroundColor.color,
+						label: __( 'Submenu & overlay background' ),
+						onColorChange: setOverlayBackgroundColor,
+						resetAllFilter: () => setOverlayBackgroundColor(),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+				gradients={ [] }
+				disableCustomGradients
+			/>
+			{ enableContrastChecking && (
+				<>
+					<ContrastChecker
+						backgroundColor={ detectedBackgroundColor }
+						textColor={ detectedColor }
+					/>
+					<ContrastChecker
+						backgroundColor={ detectedOverlayBackgroundColor }
+						textColor={ detectedOverlayColor }
+					/>
+				</>
+			) }
+		</>
+	);
+}
 
 function Navigation( {
 	attributes,
@@ -85,12 +201,9 @@ function Navigation( {
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
-	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
+	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -107,13 +220,17 @@ function Navigation( {
 
 	const ref = attributes.ref;
 
-	const setRef = ( postId ) => {
-		setAttributes( { ref: postId } );
-	};
+	const setRef = useCallback(
+		( postId ) => {
+			setAttributes( { ref: postId } );
+		},
+		[ setAttributes ]
+	);
 
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
-	const { editEntityRecord } = useDispatch( coreStore );
+
+	const blockEditingMode = useBlockEditingMode();
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
@@ -129,11 +246,6 @@ function Navigation( {
 			name: 'block-library/core/navigation/classic-menu-conversion',
 		} );
 
-	const [ showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice ] =
-		useNavigationNotice( {
-			name: 'block-library/core/navigation/auto-publish-draft',
-		} );
-
 	const [
 		showNavigationMenuPermissionsNotice,
 		hideNavigationMenuPermissionsNotice,
@@ -151,38 +263,10 @@ function Navigation( {
 		isError: createNavigationMenuIsError,
 	} = useCreateNavigationMenu( clientId );
 
-	const createUntitledEmptyNavigationMenu = () => {
-		createNavigationMenu( '' );
+	const createUntitledEmptyNavigationMenu = async () => {
+		await createNavigationMenu( '' );
 	};
 
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
-
-			showNavigationMenuStatusNotice(
-				__( `Navigation Menu successfully created.` )
-			);
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-	] );
-
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -209,15 +293,13 @@ function Navigation( {
 		hasResolvedNavigationMenus,
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
-		navigationMenus,
-		navigationMenu,
 		canUserUpdateNavigationMenu,
 		hasResolvedCanUserUpdateNavigationMenu,
 		canUserDeleteNavigationMenu,
 		hasResolvedCanUserDeleteNavigationMenu,
-		canUserCreateNavigationMenu,
-		isResolvingCanUserCreateNavigationMenu,
-		hasResolvedCanUserCreateNavigationMenu,
+		canUserCreateNavigationMenus,
+		isResolvingCanUserCreateNavigationMenus,
+		hasResolvedCanUserCreateNavigationMenus,
 	} = useNavigationMenu( ref );
 
 	const navMenuResolvedButMissing =
@@ -227,76 +309,64 @@ function Navigation( {
 		convert: convertClassicMenu,
 		status: classicMenuConversionStatus,
 		error: classicMenuConversionError,
-	} = useConvertClassicToBlockMenu( clientId );
+	} = useConvertClassicToBlockMenu( createNavigationMenu );
 
 	const isConvertingClassicMenu =
 		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
 
-	// Only autofallback to published menus.
-	const fallbackNavigationMenus = useMemo(
-		() =>
-			navigationMenus
-				?.filter( ( menu ) => menu.status === 'publish' )
-				?.sort( ( menuA, menuB ) => {
-					const menuADate = new Date( menuA.date );
-					const menuBDate = new Date( menuB.date );
-					return menuADate.getTime() < menuBDate.getTime();
-				} ),
-		[ navigationMenus ]
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
+			}
+		},
+		[ selectBlock, clientId, setRef ]
 	);
 
-	// Attempt to retrieve and prioritize any existing navigation menu unless:
-	// - the are uncontrolled inner blocks already present in the block.
-	// - the user is creating a new menu.
-	// - there are no menus to choose from.
-	// This attempts to pick the first menu if there is a single Navigation Post. If more
-	// than 1 exists then use the most recent.
-	// The aim is for the block to "just work" from a user perspective using existing data.
+	const isEntityAvailable =
+		! isNavigationMenuMissing && isNavigationMenuResolved;
+
+	// If the block has inner blocks, but no menu id, then these blocks are either:
+	// - inserted via a pattern.
+	// - inserted directly via Code View (or otherwise).
+	// - from an older version of navigation block added before the block used a wp_navigation entity.
+	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu as an entity when changes are made to the inner blocks.
+	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+
+	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
+
+	const navigationFallbackId = ! ( ref || hasUnsavedBlocks )
+		? getNavigationFallbackId()
+		: null;
+
 	useEffect( () => {
-		if (
-			hasUncontrolledInnerBlocks ||
-			isCreatingNavigationMenu ||
-			ref ||
-			! fallbackNavigationMenus?.length
-		) {
+		// If:
+		// - there is an existing menu, OR
+		// - there are existing (uncontrolled) inner blocks
+		// ...then don't request a fallback menu.
+		if ( ref || hasUnsavedBlocks || ! navigationFallbackId ) {
 			return;
 		}
 
 		/**
 		 *  This fallback displays (both in editor and on front)
-		 *  a list of pages only if no menu (user assigned or
-		 *  automatically picked) is available.
 		 *  The fallback should not request a save (entity dirty state)
 		 *  nor to be undoable, hence why it is marked as non persistent
 		 */
+
 		__unstableMarkNextChangeAsNotPersistent();
-		setRef( fallbackNavigationMenus[ 0 ].id );
+		setRef( navigationFallbackId );
 	}, [
 		ref,
-		isCreatingNavigationMenu,
-		fallbackNavigationMenus,
-		hasUncontrolledInnerBlocks,
+		setRef,
+		hasUnsavedBlocks,
+		navigationFallbackId,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	useEffect( () => {
-		if (
-			! hasResolvedNavigationMenus ||
-			isConvertingClassicMenu ||
-			fallbackNavigationMenus?.length > 0 ||
-			classicMenus?.length !== 1
-		) {
-			return;
-		}
-
-		// If there's non fallback navigation menus and
-		// only one classic menu then create a new navigation menu based on it.
-		convertClassicMenu(
-			classicMenus[ 0 ].id,
-			classicMenus[ 0 ].name,
-			'publish'
-		);
-	}, [ hasResolvedNavigationMenus ] );
-
 	const navRef = useRef();
 
 	// The standard HTML5 tag for the block wrapper.
@@ -315,22 +385,6 @@ function Navigation( {
 		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
-	useEffect( () => {
-		if ( isPlaceholder ) {
-			/**
-			 *  this fallback only displays (both in editor and on front)
-			 *  the list of pages block if no menu is available as a fallback.
-			 *  We don't want the fallback to request a save,
-			 *  nor to be undoable, hence we mark it non persistent.
-			 */
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-		}
-	}, [ clientId, isPlaceholder, ref ] );
-
-	const isEntityAvailable =
-		! isNavigationMenuMissing && isNavigationMenuResolved;
-
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
@@ -345,53 +399,88 @@ function Navigation( {
 
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
-	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const hasBlockOverlay = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableHasActiveBlockOverlayActive(
+				clientId
+			),
+		[ clientId ]
+	);
+	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames( className, {
-			'items-justified-right': justifyContent === 'right',
-			'items-justified-space-between': justifyContent === 'space-between',
-			'items-justified-left': justifyContent === 'left',
-			'items-justified-center': justifyContent === 'center',
-			'is-vertical': orientation === 'vertical',
-			'no-wrap': flexWrap === 'nowrap',
-			'is-responsive': 'never' !== overlayMenu,
-			'has-text-color': !! textColor.color || !! textColor?.class,
-			[ getColorClassName( 'color', textColor?.slug ) ]:
-				!! textColor?.slug,
-			'has-background': !! backgroundColor.color || backgroundColor.class,
-			[ getColorClassName( 'background-color', backgroundColor?.slug ) ]:
-				!! backgroundColor?.slug,
-			[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
-			'block-editor-block-content-overlay': hasBlockOverlay,
-		} ),
+		className: clsx(
+			className,
+			{
+				'items-justified-right': justifyContent === 'right',
+				'items-justified-space-between':
+					justifyContent === 'space-between',
+				'items-justified-left': justifyContent === 'left',
+				'items-justified-center': justifyContent === 'center',
+				'is-vertical': orientation === 'vertical',
+				'no-wrap': flexWrap === 'nowrap',
+				'is-responsive': isResponsive,
+				'has-text-color': !! textColor.color || !! textColor?.class,
+				[ getColorClassName( 'color', textColor?.slug ) ]:
+					!! textColor?.slug,
+				'has-background':
+					!! backgroundColor.color || backgroundColor.class,
+				[ getColorClassName(
+					'background-color',
+					backgroundColor?.slug
+				) ]: !! backgroundColor?.slug,
+				[ `has-text-decoration-${ textDecoration }` ]: textDecoration,
+				'block-editor-block-content-overlay': hasBlockOverlay,
+			},
+			layoutClassNames
+		),
 		style: {
 			color: ! textColor?.slug && textColor?.color,
 			backgroundColor: ! backgroundColor?.slug && backgroundColor?.color,
 		},
 	} );
 
-	// Turn on contrast checker for web only since it's not supported on mobile yet.
-	const enableContrastChecking = Platform.OS === 'web';
+	const onSelectClassicMenu = async ( classicMenu ) => {
+		return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' );
+	};
 
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-	const [
-		detectedOverlayBackgroundColor,
-		setDetectedOverlayBackgroundColor,
-	] = useState();
-	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
+	const onSelectNavigationMenu = ( menuId ) => {
+		handleUpdateMenu( menuId );
+	};
 
-	const handleUpdateMenu = (
-		menuId,
-		options = { focusNavigationBlock: false }
-	) => {
-		const { focusNavigationBlock } = options;
-		setRef( menuId );
-		if ( focusNavigationBlock ) {
-			selectBlock( clientId );
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
 		}
-	};
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost?.id, {
+				focusNavigationBlock: true,
+			} );
+
+			showNavigationMenuStatusNotice(
+				__( `Navigation Menu successfully created.` )
+			);
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost?.id,
+		createNavigationMenuIsError,
+		createNavigationMenuIsSuccess,
+		isCreatingNavigationMenu,
+		handleUpdateMenu,
+		hideNavigationMenuStatusNotice,
+		showNavigationMenuStatusNotice,
+	] );
 
 	useEffect( () => {
 		hideClassicMenuConversionNotice();
@@ -403,6 +492,9 @@ function Navigation( {
 			showClassicMenuConversionNotice(
 				__( 'Classic menu imported successfully.' )
 			);
+			handleUpdateMenu( createNavigationMenuPost?.id, {
+				focusNavigationBlock: true,
+			} );
 		}
 
 		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) {
@@ -410,37 +502,14 @@ function Navigation( {
 				__( 'Classic menu import failed.' )
 			);
 		}
-	}, [ classicMenuConversionStatus, classicMenuConversionError ] );
-
-	// Spacer block needs orientation from context. This is a patch until
-	// https://github.com/WordPress/gutenberg/issues/36197 is addressed.
-	useEffect( () => {
-		if ( orientation ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { orientation } );
-		}
-	}, [ orientation ] );
-
-	useEffect( () => {
-		if ( ! enableContrastChecking ) {
-			return;
-		}
-		detectColors(
-			navRef.current,
-			setDetectedColor,
-			setDetectedBackgroundColor
-		);
-		const subMenuElement = navRef.current?.querySelector(
-			'[data-type="core/navigation-link"] [data-type="core/navigation-link"]'
-		);
-		if ( subMenuElement ) {
-			detectColors(
-				subMenuElement,
-				setDetectedOverlayColor,
-				setDetectedOverlayBackgroundColor
-			);
-		}
-	} );
+	}, [
+		classicMenuConversionStatus,
+		classicMenuConversionError,
+		hideClassicMenuConversionNotice,
+		showClassicMenuConversionNotice,
+		createNavigationMenuPost?.id,
+		handleUpdateMenu,
+	] );
 
 	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
@@ -463,8 +532,8 @@ function Navigation( {
 
 			if (
 				! ref &&
-				hasResolvedCanUserCreateNavigationMenu &&
-				! canUserCreateNavigationMenu
+				hasResolvedCanUserCreateNavigationMenus &&
+				! canUserCreateNavigationMenus
 			) {
 				showNavigationMenuPermissionsNotice(
 					__(
@@ -478,225 +547,227 @@ function Navigation( {
 		isInnerBlockSelected,
 		canUserUpdateNavigationMenu,
 		hasResolvedCanUserUpdateNavigationMenu,
-		canUserCreateNavigationMenu,
-		hasResolvedCanUserCreateNavigationMenu,
+		canUserCreateNavigationMenus,
+		hasResolvedCanUserCreateNavigationMenus,
 		ref,
+		hideNavigationMenuPermissionsNotice,
+		showNavigationMenuPermissionsNotice,
+		navMenuResolvedButMissing,
 	] );
 
 	const hasManagePermissions =
-		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
-	const isResponsive = 'never' !== overlayMenu;
+		canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
 
-	const overlayMenuPreviewClasses = classnames(
+	const overlayMenuPreviewClasses = clsx(
 		'wp-block-navigation__overlay-menu-preview',
 		{ open: overlayMenuPreview }
 	);
 
-	// Prompt the user to publish the menu they have set as a draft
-	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
+	const submenuAccessibilityNotice =
+		! showSubmenuIcon && ! openSubmenusOnClick
+			? __(
+					'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
+			  )
+			: '';
+
+	const isFirstRender = useRef( true ); // Don't speak on first render.
 	useEffect( () => {
-		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) {
-			return;
+		if ( ! isFirstRender.current && submenuAccessibilityNotice ) {
+			speak( submenuAccessibilityNotice );
 		}
-		editEntityRecord(
-			'postType',
-			'wp_navigation',
-			navigationMenu?.id,
-			{ status: 'publish' },
-			{ throwOnError: true }
-		).catch( () => {
-			showMenuAutoPublishDraftNotice(
-				__( 'Error occurred while publishing the navigation menu.' )
-			);
-		} );
-	}, [ isDraftNavigationMenu, navigationMenu ] );
+		isFirstRender.current = false;
+	}, [ submenuAccessibilityNotice ] );
+
+	const overlayMenuPreviewId = useInstanceId(
+		OverlayMenuPreview,
+		`overlay-menu-preview`
+	);
 
 	const stylingInspectorControls = (
-		<InspectorControls>
-			{ hasSubmenuIndicatorSetting && (
-				<PanelBody title={ __( 'Display' ) }>
-					{ isResponsive && (
-						<>
-							<Button
-								className={ overlayMenuPreviewClasses }
-								onClick={ () => {
-									setOverlayMenuPreview(
-										! overlayMenuPreview
-									);
-								} }
-							>
-								{ hasIcon && (
-									<>
-										<OverlayMenuIcon icon={ icon } />
-										<Icon icon={ close } />
-									</>
-								) }
-								{ ! hasIcon && (
-									<>
-										<span>{ __( 'Menu' ) }</span>
-										<span>{ __( 'Close' ) }</span>
-									</>
-								) }
-							</Button>
-							{ overlayMenuPreview && (
-								<OverlayMenuPreview
-									setAttributes={ setAttributes }
-									hasIcon={ hasIcon }
-									icon={ icon }
-								/>
-							) }
-						</>
-					) }
-					<h3>{ __( 'Overlay Menu' ) }</h3>
-					<ToggleGroupControl
-						label={ __( 'Configure overlay menu' ) }
-						value={ overlayMenu }
-						help={ __(
-							'Collapses the navigation options in a menu icon opening an overlay.'
+		<>
+			<InspectorControls>
+				{ hasSubmenuIndicatorSetting && (
+					<PanelBody title={ __( 'Display' ) }>
+						{ isResponsive && (
+							<>
+								<Button
+									__next40pxDefaultSize
+									className={ overlayMenuPreviewClasses }
+									onClick={ () => {
+										setOverlayMenuPreview(
+											! overlayMenuPreview
+										);
+									} }
+									aria-label={ __( 'Overlay menu controls' ) }
+									aria-controls={ overlayMenuPreviewId }
+									aria-expanded={ overlayMenuPreview }
+								>
+									{ hasIcon && (
+										<>
+											<OverlayMenuIcon icon={ icon } />
+											<Icon icon={ close } />
+										</>
+									) }
+									{ ! hasIcon && (
+										<>
+											<span>{ __( 'Menu' ) }</span>
+											<span>{ __( 'Close' ) }</span>
+										</>
+									) }
+								</Button>
+								<div id={ overlayMenuPreviewId }>
+									{ overlayMenuPreview && (
+										<OverlayMenuPreview
+											setAttributes={ setAttributes }
+											hasIcon={ hasIcon }
+											icon={ icon }
+											hidden={ ! overlayMenuPreview }
+										/>
+									) }
+								</div>
+							</>
 						) }
-						onChange={ ( value ) =>
-							setAttributes( { overlayMenu: value } )
-						}
-						isBlock
-						hideLabelFromVision
-					>
-						<ToggleGroupControlOption
-							value="never"
-							label={ __( 'Off' ) }
-						/>
-						<ToggleGroupControlOption
-							value="mobile"
-							label={ __( 'Mobile' ) }
-						/>
-						<ToggleGroupControlOption
-							value="always"
-							label={ __( 'Always' ) }
-						/>
-					</ToggleGroupControl>
-					{ hasSubmenus && (
-						<>
-							<h3>{ __( 'Submenus' ) }</h3>
-							<ToggleControl
-								checked={ openSubmenusOnClick }
-								onChange={ ( value ) => {
-									setAttributes( {
-										openSubmenusOnClick: value,
-										...( value && {
-											showSubmenuIcon: true,
-										} ), // Make sure arrows are shown when we toggle this on.
-									} );
-								} }
-								label={ __( 'Open on click' ) }
+						<ToggleGroupControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Overlay Menu' ) }
+							aria-label={ __( 'Configure overlay menu' ) }
+							value={ overlayMenu }
+							help={ __(
+								'Collapses the navigation options in a menu icon opening an overlay.'
+							) }
+							onChange={ ( value ) =>
+								setAttributes( { overlayMenu: value } )
+							}
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="never"
+								label={ __( 'Off' ) }
 							/>
-
-							<ToggleControl
-								checked={ showSubmenuIcon }
-								onChange={ ( value ) => {
-									setAttributes( {
-										showSubmenuIcon: value,
-									} );
-								} }
-								disabled={ attributes.openSubmenusOnClick }
-								label={ __( 'Show arrow' ) }
+							<ToggleGroupControlOption
+								value="mobile"
+								label={ __( 'Mobile' ) }
 							/>
-						</>
-					) }
-				</PanelBody>
-			) }
-			{ hasColorSettings && (
-				<PanelColorSettings
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					title={ __( 'Color' ) }
-					initialOpen={ false }
-					colorSettings={ [
-						{
-							value: textColor.color,
-							onChange: setTextColor,
-							label: __( 'Text' ),
-						},
-						{
-							value: backgroundColor.color,
-							onChange: setBackgroundColor,
-							label: __( 'Background' ),
-						},
-						{
-							value: overlayTextColor.color,
-							onChange: setOverlayTextColor,
-							label: __( 'Submenu & overlay text' ),
-						},
-						{
-							value: overlayBackgroundColor.color,
-							onChange: setOverlayBackgroundColor,
-							label: __( 'Submenu & overlay background' ),
-						},
-					] }
-				>
-					{ enableContrastChecking && (
-						<>
-							<ContrastChecker
-								backgroundColor={ detectedBackgroundColor }
-								textColor={ detectedColor }
+							<ToggleGroupControlOption
+								value="always"
+								label={ __( 'Always' ) }
 							/>
-							<ContrastChecker
-								backgroundColor={
-									detectedOverlayBackgroundColor
-								}
-								textColor={ detectedOverlayColor }
-							/>
-						</>
-					) }
-				</PanelColorSettings>
-			) }
-		</InspectorControls>
-	);
+						</ToggleGroupControl>
+						{ hasSubmenus && (
+							<>
+								<h3>{ __( 'Submenus' ) }</h3>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									checked={ openSubmenusOnClick }
+									onChange={ ( value ) => {
+										setAttributes( {
+											openSubmenusOnClick: value,
+											...( value && {
+												showSubmenuIcon: true,
+											} ), // Make sure arrows are shown when we toggle this on.
+										} );
+									} }
+									label={ __( 'Open on click' ) }
+								/>
 
-	// If the block has inner blocks, but no menu id, then these blocks are either:
-	// - inserted via a pattern.
-	// - inserted directly via Code View (or otherwise).
-	// - from an older version of navigation block added before the block used a wp_navigation entity.
-	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-	// that automatically saves the menu as an entity when changes are made to the inner blocks.
-	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+								<ToggleControl
+									__nextHasNoMarginBottom
+									checked={ showSubmenuIcon }
+									onChange={ ( value ) => {
+										setAttributes( {
+											showSubmenuIcon: value,
+										} );
+									} }
+									disabled={ attributes.openSubmenusOnClick }
+									label={ __( 'Show arrow' ) }
+								/>
+
+								{ submenuAccessibilityNotice && (
+									<div>
+										<Notice
+											spokenMessage={ null }
+											status="warning"
+											isDismissible={ false }
+										>
+											{ submenuAccessibilityNotice }
+										</Notice>
+									</div>
+								) }
+							</>
+						) }
+					</PanelBody>
+				) }
+			</InspectorControls>
+			<InspectorControls group="color">
+				{ /*
+				 * Avoid useMultipleOriginColorsAndGradients and detectColors
+				 * on block mount. InspectorControls only mounts this component
+				 * when the block is selected.
+				 * */ }
+				<ColorTools
+					textColor={ textColor }
+					setTextColor={ setTextColor }
+					backgroundColor={ backgroundColor }
+					setBackgroundColor={ setBackgroundColor }
+					overlayTextColor={ overlayTextColor }
+					setOverlayTextColor={ setOverlayTextColor }
+					overlayBackgroundColor={ overlayBackgroundColor }
+					setOverlayBackgroundColor={ setOverlayBackgroundColor }
+					clientId={ clientId }
+					navRef={ navRef }
+				/>
+			</InspectorControls>
+		</>
+	);
 
+	const accessibleDescriptionId = `${ clientId }-desc`;
+	const isHiddenByDefault = 'always' === overlayMenu;
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
-			<TagName { ...blockProps }>
+			<TagName
+				{ ...blockProps }
+				aria-describedby={
+					! isPlaceholder ? accessibleDescriptionId : undefined
+				}
+			>
+				<AccessibleDescription id={ accessibleDescriptionId }>
+					{ __( 'Unsaved Navigation Menu.' ) }
+				</AccessibleDescription>
+
 				<MenuInspectorControls
 					clientId={ clientId }
-					convertClassicMenu={ convertClassicMenu }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
-					handleUpdateMenu={ handleUpdateMenu }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
+				{ blockEditingMode === 'default' && stylingInspectorControls }
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
 					isOpen={ isResponsiveMenuOpen }
 					hasIcon={ hasIcon }
 					icon={ icon }
-					isResponsive={ 'never' !== overlayMenu }
-					isHiddenByDefault={ 'always' === overlayMenu }
+					isResponsive={ isResponsive }
+					isHiddenByDefault={ isHiddenByDefault }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
 				>
 					<UnsavedInnerBlocks
 						createNavigationMenu={ createNavigationMenu }
 						blocks={ uncontrolledInnerBlocks }
-						templateLock={ templateLock }
-						navigationMenus={ navigationMenus }
 						hasSelection={ isSelected || isInnerBlockSelected }
 					/>
 				</ResponsiveWrapper>
@@ -711,28 +782,22 @@ function Navigation( {
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
 					clientId={ clientId }
-					convertClassicMenu={ convertClassicMenu }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
-					handleUpdateMenu={ handleUpdateMenu }
+					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
+				/>
+				<DeletedNavigationWarning
+					onCreateNew={ createUntitledEmptyNavigationMenu }
 				/>
-				<Warning>
-					{ __(
-						'Navigation menu has been deleted or is unavailable. '
-					) }
-					<Button
-						onClick={ createUntitledEmptyNavigationMenu }
-						variant="link"
-					>
-						{ __( 'Create a new menu?' ) }
-					</Button>
-				</Warning>
 			</TagName>
 		);
 	}
@@ -768,25 +833,14 @@ function Navigation( {
 					isSelected={ isSelected }
 					currentMenuId={ ref }
 					clientId={ clientId }
-					canUserCreateNavigationMenu={ canUserCreateNavigationMenu }
-					isResolvingCanUserCreateNavigationMenu={
-						isResolvingCanUserCreateNavigationMenu
+					canUserCreateNavigationMenus={
+						canUserCreateNavigationMenus
+					}
+					isResolvingCanUserCreateNavigationMenus={
+						isResolvingCanUserCreateNavigationMenus
 					}
-					onSelectNavigationMenu={ ( menuId ) => {
-						handleUpdateMenu( menuId );
-					} }
-					onSelectClassicMenu={ async ( classicMenu ) => {
-						const navMenu = await convertClassicMenu(
-							classicMenu.id,
-							classicMenu.name,
-							'draft'
-						);
-						if ( navMenu ) {
-							handleUpdateMenu( navMenu.id, {
-								focusNavigationBlock: true,
-							} );
-						}
-					} }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					onSelectClassicMenu={ onSelectClassicMenu }
 					onCreateEmpty={ createUntitledEmptyNavigationMenu }
 				/>
 			</TagName>
@@ -798,21 +852,22 @@ function Navigation( {
 			<RecursionProvider uniqueId={ recursionId }>
 				<MenuInspectorControls
 					clientId={ clientId }
-					convertClassicMenu={ convertClassicMenu }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
-					handleUpdateMenu={ handleUpdateMenu }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
+					onSelectClassicMenu={ onSelectClassicMenu }
+					onSelectNavigationMenu={ onSelectNavigationMenu }
+					isLoading={ isLoading }
+					blockEditingMode={ blockEditingMode }
 				/>
-				{ stylingInspectorControls }
-				{ isEntityAvailable && (
-					<InspectorControls __experimentalGroup="advanced">
+				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'default' && isEntityAvailable && (
+					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&
 							canUserUpdateNavigationMenu && (
 								<NavigationMenuNameControl />
@@ -820,62 +875,69 @@ function Navigation( {
 						{ hasResolvedCanUserDeleteNavigationMenu &&
 							canUserDeleteNavigationMenu && (
 								<NavigationMenuDeleteControl
-									onDelete={ ( deletedMenuTitle = '' ) => {
+									onDelete={ () => {
 										replaceInnerBlocks( clientId, [] );
 										showNavigationMenuStatusNotice(
-											sprintf(
-												// translators: %s: the name of a menu (e.g. Header navigation).
-												__(
-													'Navigation menu %s successfully deleted.'
-												),
-												deletedMenuTitle
+											__(
+												'Navigation Menu successfully deleted.'
 											)
 										);
 									} }
 								/>
 							) }
-						{ isOffCanvasNavigationEditorEnabled && (
-							<ManageMenusButton
-								disabled={ isManageMenusButtonDisabled }
-								className="wp-block-navigation-manage-menus-button"
-							/>
-						) }
+						<ManageMenusButton
+							disabled={ isManageMenusButtonDisabled }
+							className="wp-block-navigation-manage-menus-button"
+						/>
 					</InspectorControls>
 				) }
 
-				{ isLoading && (
-					<TagName { ...blockProps }>
-						<Spinner className="wp-block-navigation__loading-indicator" />
-					</TagName>
-				) }
+				<TagName
+					{ ...blockProps }
+					aria-describedby={
+						! isPlaceholder && ! isLoading
+							? accessibleDescriptionId
+							: undefined
+					}
+				>
+					{ isLoading && ! isHiddenByDefault && (
+						<div className="wp-block-navigation__loading-indicator-container">
+							<Spinner className="wp-block-navigation__loading-indicator" />
+						</div>
+					) }
 
-				{ ! isLoading && (
-					<TagName { ...blockProps }>
-						<ResponsiveWrapper
-							id={ clientId }
-							onToggle={ setResponsiveMenuVisibility }
-							label={ __( 'Menu' ) }
-							hasIcon={ hasIcon }
-							icon={ icon }
-							isOpen={ isResponsiveMenuOpen }
-							isResponsive={ isResponsive }
-							isHiddenByDefault={ 'always' === overlayMenu }
-							overlayBackgroundColor={ overlayBackgroundColor }
-							overlayTextColor={ overlayTextColor }
-						>
-							{ isEntityAvailable && (
-								<NavigationInnerBlocks
-									clientId={ clientId }
-									hasCustomPlaceholder={
-										!! CustomPlaceholder
-									}
-									templateLock={ templateLock }
-									orientation={ orientation }
-								/>
-							) }
-						</ResponsiveWrapper>
-					</TagName>
-				) }
+					{ ( ! isLoading || isHiddenByDefault ) && (
+						<>
+							<AccessibleMenuDescription
+								id={ accessibleDescriptionId }
+							/>
+							<ResponsiveWrapper
+								id={ clientId }
+								onToggle={ setResponsiveMenuVisibility }
+								hasIcon={ hasIcon }
+								icon={ icon }
+								isOpen={ isResponsiveMenuOpen }
+								isResponsive={ isResponsive }
+								isHiddenByDefault={ isHiddenByDefault }
+								overlayBackgroundColor={
+									overlayBackgroundColor
+								}
+								overlayTextColor={ overlayTextColor }
+							>
+								{ isEntityAvailable && (
+									<NavigationInnerBlocks
+										clientId={ clientId }
+										hasCustomPlaceholder={
+											!! CustomPlaceholder
+										}
+										templateLock={ templateLock }
+										orientation={ orientation }
+									/>
+								) }
+							</ResponsiveWrapper>
+						</>
+					) }
+				</TagName>
 			</RecursionProvider>
 		</EntityProvider>
 	);
diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
index cb7f9a171f72ad..6fe3dd8347a33e 100644
--- a/packages/block-library/src/navigation/edit/inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -14,27 +14,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import PlaceholderPreview from './placeholder/placeholder-preview';
-
-const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-];
-
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
-
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
+import { DEFAULT_BLOCK, PRIORITIZED_INSERTER_BLOCKS } from '../constants';
 
 export default function NavigationInnerBlocks( {
 	clientId,
@@ -75,17 +55,6 @@ export default function NavigationInnerBlocks( {
 		'wp_navigation'
 	);
 
-	const shouldDirectInsert = useMemo(
-		() =>
-			blocks.every(
-				( { name } ) =>
-					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu' ||
-					name === 'core/page-list'
-			),
-		[ blocks ]
-	);
-
 	// When the block is selected itself or has a top level item selected that
 	// doesn't itself have children, show the standard appender. Else show no
 	// appender.
@@ -112,9 +81,9 @@ export default function NavigationInnerBlocks( {
 			value: blocks,
 			onInput,
 			onChange,
-			allowedBlocks: ALLOWED_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: shouldDirectInsert,
+			prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS,
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: true,
 			orientation,
 			templateLock,
 
@@ -131,8 +100,9 @@ export default function NavigationInnerBlocks( {
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender
 					: false,
-			__experimentalLayout: LAYOUT,
 			placeholder: showPlaceholder ? placeholder : undefined,
+			__experimentalCaptureToolbars: true,
+			__unstableDisableLayoutClassNames: true,
 		}
 	);
 
diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js
new file mode 100644
index 00000000000000..2d35754779ab94
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js
@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+	addSubmenu,
+	chevronUp,
+	chevronDown,
+	moreVertical,
+} from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	placement: 'bottom-start',
+};
+
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( {
+	block,
+	onClose,
+	expandedState,
+	expand,
+	setInsertedBlock,
+} ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					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
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+
+				// This call sets the local List View state for the "last inserted block".
+				// This is required for the Nav Block to determine whether or not to display
+				// the Link UI for this new block.
+				setInsertedBlock( newLink );
+
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
+export default function LeafMoreMenu( props ) {
+	const { block } = props;
+	const { clientId } = block;
+
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						<AddSubmenuItem
+							block={ block }
+							onClose={ onClose }
+							expanded
+							expandedState={ props.expandedState }
+							expand={ props.expand }
+							setInsertedBlock={ props.setInsertedBlock }
+						/>
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/block-library/src/navigation/edit/manage-menus-button.js b/packages/block-library/src/navigation/edit/manage-menus-button.js
index 2bf72a76ed3364..94bdf2c82c6ab9 100644
--- a/packages/block-library/src/navigation/edit/manage-menus-button.js
+++ b/packages/block-library/src/navigation/edit/manage-menus-button.js
@@ -2,20 +2,31 @@
  * WordPress dependencies
  */
 import { addQueryArgs } from '@wordpress/url';
-import { Button } from '@wordpress/components';
+import { Button, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const ManageMenusButton = ( { className = '', disabled } ) => (
-	<Button
-		variant="link"
-		disabled={ disabled }
-		className={ className }
-		href={ addQueryArgs( 'edit.php', {
-			post_type: 'wp_navigation',
-		} ) }
-	>
-		{ __( 'Manage menus' ) }
-	</Button>
-);
+const ManageMenusButton = ( {
+	className = '',
+	disabled,
+	isMenuItem = false,
+} ) => {
+	let ComponentName = Button;
+	if ( isMenuItem ) {
+		ComponentName = MenuItem;
+	}
+
+	return (
+		<ComponentName
+			variant="link"
+			disabled={ disabled }
+			className={ className }
+			href={ addQueryArgs( 'edit.php', {
+				post_type: 'wp_navigation',
+			} ) }
+		>
+			{ __( 'Manage menus' ) }
+		</ComponentName>
+	);
+};
 
 export default ManageMenusButton;
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 330812ef3e981c..a2c6078d9fabe2 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -2,121 +2,163 @@
  * WordPress dependencies
  */
 import {
-	__experimentalOffCanvasEditor as OffCanvasEditor,
+	privateApis as blockEditorPrivateApis,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
+	Spinner,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
+import { unlock } from '../../lock-unlock';
+import DeletedNavigationWarning from './deleted-navigation-warning';
+import useNavigationMenu from '../use-navigation-menu';
+import LeafMoreMenu from './leaf-more-menu';
+import { updateAttributes } from '../../navigation-link/update-attributes';
+import { LinkUI } from '../../navigation-link/link-ui';
 
-const WrappedNavigationMenuSelector = ( {
-	clientId,
-	currentMenuId,
-	handleUpdateMenu,
-	convertClassicMenu,
-	onCreateNew,
-	createNavigationMenuIsSuccess,
-	createNavigationMenuIsError,
-} ) => (
-	<NavigationMenuSelector
-		currentMenuId={ currentMenuId }
-		clientId={ clientId }
-		onSelectNavigationMenu={ ( menuId ) => {
-			handleUpdateMenu( menuId );
-		} }
-		onSelectClassicMenu={ async ( classicMenu ) => {
-			const navMenu = await convertClassicMenu(
-				classicMenu.id,
-				classicMenu.name,
-				'draft'
-			);
-			if ( navMenu ) {
-				handleUpdateMenu( navMenu.id, {
-					focusNavigationBlock: true,
-				} );
+const actionLabel =
+	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
+function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
+		insertedBlock?.name
+	);
+	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
+	const showLinkControls = supportsLinkControls && blockWasJustInserted;
+
+	if ( ! showLinkControls ) {
+		return null;
+	}
+
+	const setInsertedBlockAttributes =
+		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
+			if ( ! _insertedBlockClientId ) {
+				return;
 			}
-		} }
-		onCreateNew={ onCreateNew }
-		createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
-		createNavigationMenuIsError={ createNavigationMenuIsError }
-		/* translators: %s: The name of a menu. */
-		actionLabel={ __( "Switch to '%s'" ) }
-	/>
-);
-const MenuInspectorControls = ( {
+			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
+		};
+
+	return (
+		<LinkUI
+			clientId={ insertedBlock?.clientId }
+			link={ insertedBlock?.attributes }
+			onClose={ () => {
+				setInsertedBlock( null );
+			} }
+			onChange={ ( updatedValue ) => {
+				updateAttributes(
+					updatedValue,
+					setInsertedBlockAttributes( insertedBlock?.clientId ),
+					insertedBlock?.attributes
+				);
+				setInsertedBlock( null );
+			} }
+			onCancel={ () => {
+				setInsertedBlock( null );
+			} }
+		/>
+	);
+}
+
+const MainContent = ( {
 	clientId,
-	convertClassicMenu,
-	createNavigationMenuIsSuccess,
-	createNavigationMenuIsError,
-	currentMenuId = null,
-	handleUpdateMenu,
+	currentMenuId,
+	isLoading,
 	isNavigationMenuMissing,
-	innerBlocks,
-	isManageMenusButtonDisabled,
 	onCreateNew,
 } ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = window?.__experimentalEnableBlockInspectorTabs
-		? 'list'
-		: undefined;
+	const hasChildren = useSelect(
+		( select ) => {
+			return !! select( blockEditorStore ).getBlockCount( clientId );
+		},
+		[ clientId ]
+	);
+
+	const { navigationMenu } = useNavigationMenu( currentMenuId );
+
+	if ( currentMenuId && isNavigationMenuMissing ) {
+		return (
+			<DeletedNavigationWarning onCreateNew={ onCreateNew } isNotice />
+		);
+	}
+
+	if ( isLoading ) {
+		return <Spinner />;
+	}
+
+	const description = navigationMenu
+		? sprintf(
+				/* translators: %s: The name of a menu. */
+				__( 'Structure for Navigation Menu: %s' ),
+				navigationMenu?.title || __( 'Untitled menu' )
+		  )
+		: __(
+				'You have not yet created any menus. Displaying a list of your Pages'
+		  );
+
+	return (
+		<div className="wp-block-navigation__menu-inspector-controls">
+			{ ! hasChildren && (
+				<p className="wp-block-navigation__menu-inspector-controls__empty-message">
+					{ __( 'This Navigation Menu is empty.' ) }
+				</p>
+			) }
+			<PrivateListView
+				rootClientId={ clientId }
+				isExpanded
+				description={ description }
+				showAppender
+				blockSettingsMenu={ LeafMoreMenu }
+				additionalBlockContent={ AdditionalBlockContent }
+			/>
+		</div>
+	);
+};
+
+const MenuInspectorControls = ( props ) => {
+	const {
+		createNavigationMenuIsSuccess,
+		createNavigationMenuIsError,
+		currentMenuId = null,
+		onCreateNew,
+		onSelectClassicMenu,
+		onSelectNavigationMenu,
+		isManageMenusButtonDisabled,
+		blockEditingMode,
+	} = props;
 
 	return (
-		<InspectorControls __experimentalGroup={ menuControlsSlot }>
-			<PanelBody
-				title={
-					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
-				}
-			>
-				{ isOffCanvasNavigationEditorEnabled ? (
-					<>
-						<HStack className="wp-block-navigation-off-canvas-editor__header">
-							<Heading
-								className="wp-block-navigation-off-canvas-editor__title"
-								level={ 2 }
-							>
-								{ __( 'Menu' ) }
-							</Heading>
-							<WrappedNavigationMenuSelector
-								clientId={ clientId }
-								currentMenuId={ currentMenuId }
-								handleUpdateMenu={ handleUpdateMenu }
-								convertClassicMenu={ convertClassicMenu }
-								onCreateNew={ onCreateNew }
-								createNavigationMenuIsSuccess={
-									createNavigationMenuIsSuccess
-								}
-								createNavigationMenuIsError={
-									createNavigationMenuIsError
-								}
-							/>
-						</HStack>
-						{ currentMenuId && isNavigationMenuMissing ? (
-							<p>{ __( 'Select or create a menu' ) }</p>
-						) : (
-							<OffCanvasEditor
-								blocks={ innerBlocks }
-								isExpanded={ true }
-								selectBlockInCanvas={ false }
-							/>
-						) }
-					</>
-				) : (
-					<>
-						<WrappedNavigationMenuSelector
-							clientId={ clientId }
+		<InspectorControls group="list">
+			<PanelBody title={ null }>
+				<HStack className="wp-block-navigation-off-canvas-editor__header">
+					<Heading
+						className="wp-block-navigation-off-canvas-editor__title"
+						level={ 2 }
+					>
+						{ __( 'Menu' ) }
+					</Heading>
+					{ blockEditingMode === 'default' && (
+						<NavigationMenuSelector
 							currentMenuId={ currentMenuId }
-							handleUpdateMenu={ handleUpdateMenu }
-							convertClassicMenu={ convertClassicMenu }
+							onSelectClassicMenu={ onSelectClassicMenu }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
 							onCreateNew={ onCreateNew }
 							createNavigationMenuIsSuccess={
 								createNavigationMenuIsSuccess
@@ -124,12 +166,14 @@ const MenuInspectorControls = ( {
 							createNavigationMenuIsError={
 								createNavigationMenuIsError
 							}
+							actionLabel={ actionLabel }
+							isManageMenusButtonDisabled={
+								isManageMenusButtonDisabled
+							}
 						/>
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-						/>
-					</>
-				) }
+					) }
+				</HStack>
+				<MainContent { ...props } />
 			</PanelBody>
 		</InspectorControls>
 	);
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
index bc33650def1830..e95e07ab778c2f 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js
@@ -1,79 +1,53 @@
 /**
  * WordPress dependencies
  */
-import { Button, Flex, FlexItem, Modal } from '@wordpress/components';
 import {
-	store as coreStore,
-	useEntityId,
-	useEntityProp,
-} from '@wordpress/core-data';
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as coreStore, useEntityId } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 export default function NavigationMenuDeleteControl( { onDelete } ) {
-	const [ isConfirmModalVisible, setIsConfirmModalVisible ] =
+	const [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =
 		useState( false );
 	const id = useEntityId( 'postType', 'wp_navigation' );
-	const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	const { deleteEntityRecord } = useDispatch( coreStore );
 
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="wp-block-navigation-delete-menu-button"
 				variant="secondary"
 				isDestructive
 				onClick={ () => {
-					setIsConfirmModalVisible( true );
+					setIsConfirmDialogVisible( true );
 				} }
 			>
 				{ __( 'Delete menu' ) }
 			</Button>
-			{ isConfirmModalVisible && (
-				<Modal
-					title={ sprintf(
-						/* translators: %s: the name of a menu to delete */
-						__( 'Delete %s' ),
-						title
-					) }
-					closeLabel={ __( 'Cancel' ) }
-					onRequestClose={ () => setIsConfirmModalVisible( false ) }
+			{ isConfirmDialogVisible && (
+				<ConfirmDialog
+					isOpen
+					onConfirm={ () => {
+						deleteEntityRecord( 'postType', 'wp_navigation', id, {
+							force: true,
+						} );
+						onDelete();
+					} }
+					onCancel={ () => {
+						setIsConfirmDialogVisible( false );
+					} }
+					confirmButtonText={ __( 'Delete' ) }
+					size="medium"
 				>
-					<p>
-						{ __(
-							'Are you sure you want to delete this navigation menu?'
-						) }
-					</p>
-					<Flex justify="flex-end">
-						<FlexItem>
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									setIsConfirmModalVisible( false );
-								} }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="primary"
-								onClick={ () => {
-									deleteEntityRecord(
-										'postType',
-										'wp_navigation',
-										id,
-										{ force: true }
-									);
-									onDelete( title );
-								} }
-							>
-								{ __( 'Confirm' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
-				</Modal>
+					{ __(
+						'Are you sure you want to delete this Navigation Menu?'
+					) }
+				</ConfirmDialog>
 			) }
 		</>
 	);
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
index fc32da79dc0912..db895b0b644aac 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
@@ -14,6 +14,8 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
 			onChange={ updateTitle }
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 9817934c3a2b16..dceabf063b26e8 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -6,14 +6,12 @@ import {
 	MenuItem,
 	MenuItemsChoice,
 	DropdownMenu,
-	Button,
-	VisuallyHidden,
 } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -21,6 +19,24 @@ import { useEffect, useMemo, useState } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
+function buildMenuLabel( title, id, status ) {
+	if ( ! title ) {
+		/* translators: %s: the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title );
+	}
+
+	return sprintf(
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		__( '%1$s (%2$s)' ),
+		decodeEntities( title ),
+		status
+	);
+}
+
 function NavigationMenuSelector( {
 	currentMenuId,
 	onSelectNavigationMenu,
@@ -29,18 +45,11 @@ function NavigationMenuSelector( {
 	actionLabel,
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
-	toggleProps = {},
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
-	const [ selectorLabel, setSelectorLabel ] = useState( '' );
-	const [ isPressed, setIsPressed ] = useState( false );
-	const [ enableOptions, setEnableOptions ] = useState( false );
-	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
+	const [ isUpdatingMenuRef, setIsUpdatingMenuRef ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
 
@@ -48,9 +57,9 @@ function NavigationMenuSelector( {
 
 	const {
 		navigationMenus,
+		isResolvingNavigationMenus,
 		hasResolvedNavigationMenus,
-		isNavigationMenuResolved,
-		canUserCreateNavigationMenu,
+		canUserCreateNavigationMenus,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
@@ -60,127 +69,79 @@ function NavigationMenuSelector( {
 		'title'
 	);
 
-	const shouldEnableMenuSelector =
-		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-		hasResolvedNavigationMenus &&
-		! isCreatingMenu;
-
 	const menuChoices = useMemo( () => {
 		return (
-			navigationMenus?.map( ( { id, title } ) => {
-				const label = decodeEntities( title.rendered );
-				if ( id === currentMenuId && ! isCreatingMenu ) {
-					setSelectorLabel( currentTitle );
-					setEnableOptions( shouldEnableMenuSelector );
-				}
+			navigationMenus?.map( ( { id, title, status }, index ) => {
+				const label = buildMenuLabel(
+					title?.rendered,
+					index + 1,
+					status
+				);
+
 				return {
 					value: id,
 					label,
 					ariaLabel: sprintf( actionLabel, label ),
+					disabled:
+						isUpdatingMenuRef ||
+						isResolvingNavigationMenus ||
+						! hasResolvedNavigationMenus,
 				};
 			} ) || []
 		);
 	}, [
-		currentTitle,
-		currentMenuId,
 		navigationMenus,
-		createNavigationMenuIsSuccess,
-		isNavigationMenuResolved,
+		actionLabel,
+		isResolvingNavigationMenus,
 		hasResolvedNavigationMenus,
+		isUpdatingMenuRef,
 	] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
 	const showNavigationMenus = !! canSwitchNavigationMenu;
-	const showClassicMenus = !! canUserCreateNavigationMenu;
+	const showClassicMenus = !! canUserCreateNavigationMenus;
 
 	const noMenuSelected = hasNavigationMenus && ! currentMenuId;
 	const noBlockMenus = ! hasNavigationMenus && hasResolvedNavigationMenus;
 	const menuUnavailable =
 		hasResolvedNavigationMenus && currentMenuId === null;
 
-	useEffect( () => {
-		if ( ! hasResolvedNavigationMenus ) {
-			setSelectorLabel( __( 'Loading …' ) );
-		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
-			setSelectorLabel( __( 'Select menu' ) );
-			setEnableOptions( shouldEnableMenuSelector );
-		}
+	let selectorLabel = '';
 
+	if ( isResolvingNavigationMenus ) {
+		selectorLabel = __( 'Loading…' );
+	} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
+		// Note: classic Menus may be available.
+		selectorLabel = __( 'Choose or create a Navigation Menu' );
+	} else {
+		// Current Menu's title.
+		selectorLabel = currentTitle;
+	}
+
+	useEffect( () => {
 		if (
-			isCreatingMenu &&
+			isUpdatingMenuRef &&
 			( createNavigationMenuIsSuccess || createNavigationMenuIsError )
 		) {
-			setIsCreatingMenu( false );
+			setIsUpdatingMenuRef( false );
 		}
 	}, [
-		currentMenuId,
-		hasNavigationMenus,
 		hasResolvedNavigationMenus,
 		createNavigationMenuIsSuccess,
-		isNavigationMenuResolved,
+		canUserCreateNavigationMenus,
+		createNavigationMenuIsError,
+		isUpdatingMenuRef,
+		menuUnavailable,
+		noBlockMenus,
+		noMenuSelected,
 	] );
 
-	toggleProps = {
-		...toggleProps,
-		className: 'wp-block-navigation__navigation-selector-button',
-		children: (
-			<>
-				<VisuallyHidden as="span">
-					{ __( 'Select Menu' ) }
-				</VisuallyHidden>
-				<Icon
-					icon={ isPressed ? chevronUp : chevronDown }
-					className="wp-block-navigation__navigation-selector-button__icon"
-				/>
-			</>
-		),
-		isBusy: ! enableOptions,
-		disabled: ! enableOptions,
-		__experimentalIsFocusable: true,
-		onClick: () => {
-			setIsPressed( ! isPressed );
-		},
-	};
-
-	if ( ! hasNavigationMenus && ! hasClassicMenus ) {
-		return (
-			<Button
-				className="wp-block-navigation__navigation-selector-button--createnew"
-				isBusy={ ! enableOptions }
-				disabled={ ! enableOptions }
-				__experimentalIsFocusable
-				onClick={ () => {
-					onCreateNew();
-					setIsCreatingMenu( true );
-					setSelectorLabel( __( 'Loading …' ) );
-					setEnableOptions( false );
-				} }
-			>
-				{ __( 'Create new menu' ) }
-			</Button>
-		);
-	}
-
-	return (
+	const NavigationMenuSelectorDropdown = (
 		<DropdownMenu
-			className={
-				isOffCanvasNavigationEditorEnabled
-					? ''
-					: 'wp-block-navigation__navigation-selector'
-			}
 			label={ selectorLabel }
-			text={
-				<span className="wp-block-navigation__navigation-selector-button__label">
-					{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
-				</span>
-			}
-			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
-			toggleProps={
-				isOffCanvasNavigationEditorEnabled
-					? { isSmall: true }
-					: toggleProps
-			}
+			icon={ moreVertical }
+			toggleProps={ { size: 'small' } }
 		>
 			{ ( { onClose } ) => (
 				<>
@@ -190,6 +151,7 @@ function NavigationMenuSelector( {
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
 									onSelectNavigationMenu( menuId );
+									onClose();
 								} }
 								choices={ menuChoices }
 							/>
@@ -201,12 +163,10 @@ function NavigationMenuSelector( {
 								const label = decodeEntities( menu.name );
 								return (
 									<MenuItem
-										onClick={ () => {
-											setSelectorLabel(
-												__( 'Loading …' )
-											);
-											setEnableOptions( false );
-											onSelectClassicMenu( menu );
+										onClick={ async () => {
+											setIsUpdatingMenuRef( true );
+											await onSelectClassicMenu( menu );
+											setIsUpdatingMenuRef( false );
 											onClose();
 										} }
 										key={ menu.id }
@@ -214,6 +174,11 @@ function NavigationMenuSelector( {
 											createActionLabel,
 											label
 										) }
+										disabled={
+											isUpdatingMenuRef ||
+											isResolvingNavigationMenus ||
+											! hasResolvedNavigationMenus
+										}
 									>
 										{ label }
 									</MenuItem>
@@ -222,18 +187,22 @@ function NavigationMenuSelector( {
 						</MenuGroup>
 					) }
 
-					{ canUserCreateNavigationMenu && (
+					{ canUserCreateNavigationMenus && (
 						<MenuGroup label={ __( 'Tools' ) }>
 							<MenuItem
-								onClick={ () => {
+								onClick={ async () => {
+									setIsUpdatingMenuRef( true );
+									await onCreateNew();
+									setIsUpdatingMenuRef( false );
 									onClose();
-									onCreateNew();
-									setIsCreatingMenu( true );
-									setSelectorLabel( __( 'Loading …' ) );
-									setEnableOptions( false );
 								} }
+								disabled={
+									isUpdatingMenuRef ||
+									isResolvingNavigationMenus ||
+									! hasResolvedNavigationMenus
+								}
 							>
-								{ __( 'Create new menu' ) }
+								{ __( 'Create new Menu' ) }
 							</MenuItem>
 						</MenuGroup>
 					) }
@@ -241,6 +210,8 @@ function NavigationMenuSelector( {
 			) }
 		</DropdownMenu>
 	);
+
+	return NavigationMenuSelectorDropdown;
 }
 
 export default NavigationMenuSelector;
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
index c13309c40af367..cdd4d6e3263c98 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -17,15 +17,19 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Show icon button' ) }
 				help={ __(
-					'Configure the visual appearance of the button opening the overlay menu.'
+					'Configure the visual appearance of the button that toggles the overlay menu.'
 				) }
 				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
 				checked={ hasIcon }
 			/>
 
 			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				className="wp-block-navigation__overlay-menu-icon-toggle-group"
 				label={ __( 'Icon' ) }
 				value={ icon }
 				onChange={ ( value ) => setAttributes( { icon: value } ) }
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index 101cd1308f461e..7b989de1490afb 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -18,8 +18,8 @@ export default function NavigationPlaceholder( {
 	isSelected,
 	currentMenuId,
 	clientId,
-	canUserCreateNavigationMenu = false,
-	isResolvingCanUserCreateNavigationMenu,
+	canUserCreateNavigationMenus = false,
+	isResolvingCanUserCreateNavigationMenus,
 	onSelectNavigationMenu,
 	onSelectClassicMenu,
 	onCreateEmpty,
@@ -32,16 +32,16 @@ export default function NavigationPlaceholder( {
 		}
 
 		if ( isResolvingMenus ) {
-			speak( __( 'Loading Navigation block setup options.' ) );
+			speak( __( 'Loading navigation block setup options…' ) );
 		}
 
 		if ( hasResolvedMenus ) {
 			speak( __( 'Navigation block setup options ready.' ) );
 		}
-	}, [ isResolvingMenus, isSelected ] );
+	}, [ hasResolvedMenus, isResolvingMenus, isSelected ] );
 
 	const isResolvingActions =
-		isResolvingMenus && isResolvingCanUserCreateNavigationMenu;
+		isResolvingMenus && isResolvingCanUserCreateNavigationMenus;
 
 	return (
 		<>
@@ -70,18 +70,13 @@ export default function NavigationPlaceholder( {
 							clientId={ clientId }
 							onSelectNavigationMenu={ onSelectNavigationMenu }
 							onSelectClassicMenu={ onSelectClassicMenu }
-							toggleProps={ {
-								variant: 'tertiary',
-								iconPosition: 'right',
-								className:
-									'wp-block-navigation-placeholder__actions__dropdown',
-							} }
 						/>
 
 						<hr />
 
-						{ canUserCreateNavigationMenu && (
+						{ canUserCreateNavigationMenus && (
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								onClick={ onCreateEmpty }
 							>
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index ff66be85b5cde0..886e808965ce4b 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function ResponsiveWrapper( {
 		return children;
 	}
 
-	const responsiveContainerClasses = classnames(
+	const responsiveContainerClasses = clsx(
 		'wp-block-navigation__responsive-container',
 		{
 			'has-text-color':
@@ -59,7 +59,7 @@ export default function ResponsiveWrapper( {
 			overlayBackgroundColor.color,
 	};
 
-	const openButtonClasses = classnames(
+	const openButtonClasses = clsx(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }
 	);
@@ -79,6 +79,7 @@ export default function ResponsiveWrapper( {
 		<>
 			{ ! isOpen && (
 				<Button
+					__next40pxDefaultSize
 					aria-haspopup="true"
 					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
@@ -100,6 +101,7 @@ export default function ResponsiveWrapper( {
 				>
 					<div { ...dialogProps }>
 						<Button
+							__next40pxDefaultSize
 							className="wp-block-navigation__responsive-container-close"
 							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
diff --git a/packages/block-library/src/navigation/edit/test/are-blocks-dirty.js b/packages/block-library/src/navigation/edit/test/are-blocks-dirty.js
new file mode 100644
index 00000000000000..dc2b9a3f31f29b
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/test/are-blocks-dirty.js
@@ -0,0 +1,121 @@
+/**
+ * Internal dependencies
+ */
+import { areBlocksDirty } from '../are-blocks-dirty';
+
+describe( 'areBlocksDirty', () => {
+	it( 'should be clean if the blocks are the same', () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ],
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ]
+			)
+		).toBe( false );
+	} );
+
+	it( `should be dirty if the blocks' attributes are different`, () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph', content: 'I am not dirty.' } ],
+				[ { name: 'core/paragraph', content: 'I am actually dirty.' } ]
+			)
+		).toBe( true );
+	} );
+
+	it( `should be dirty if the blocks' attributes don't match`, () => {
+		expect(
+			areBlocksDirty(
+				[ { name: 'core/paragraph' }, { dropCap: false } ],
+				[
+					{ name: 'core/paragraph' },
+					{ content: 'I am actually dirty.' },
+				]
+			)
+		).toBe( true );
+	} );
+
+	it( `should be dirty if the blocks' inner blocks are dirty`, () => {
+		expect(
+			areBlocksDirty(
+				[
+					{
+						name: 'core/social-links',
+						innerBlocks: [
+							{
+								name: 'core/social-link',
+								url: 'www.wordpress.org',
+							},
+						],
+					},
+				],
+				[
+					{
+						name: 'core/social-links',
+						innerBlocks: [
+							{
+								name: 'core/social-link',
+								service: 'wordpress',
+								url: 'www.wordpress.org',
+							},
+							{
+								name: 'core/social-link',
+								service: 'wordpress',
+								url: 'make.wordpress.org',
+							},
+						],
+					},
+				]
+			)
+		).toBe( true );
+	} );
+
+	describe( 'Controlled Page List block specific exceptions', () => {
+		it( 'should be clean if only page list inner blocks have changed', () => {
+			expect(
+				areBlocksDirty(
+					[
+						{ name: 'core/paragraph' },
+						{
+							name: 'core/page-list',
+							innerBlocks: [],
+						},
+					],
+					[
+						{ name: 'core/paragraph' },
+						{
+							name: 'core/page-list',
+							innerBlocks: [ { name: 'core/page-list-item' } ],
+						},
+					]
+				)
+			).toBe( false );
+		} );
+
+		it( 'should be dirty if other blocks have changed alongside page list inner blocks', () => {
+			expect(
+				areBlocksDirty(
+					[
+						{
+							name: 'core/paragraph',
+							content: 'This is some text',
+						},
+						{
+							name: 'core/page-list',
+							innerBlocks: [],
+						},
+					],
+					[
+						{
+							name: 'core/paragraph',
+							content: 'This is some text that has changed',
+						},
+						{
+							name: 'core/page-list',
+							innerBlocks: [ { name: 'core/page-list-item' } ],
+						},
+					]
+				)
+			).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/navigation/edit/test/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/test/navigation-menu-selector.js
new file mode 100644
index 00000000000000..eee9be647cb19c
--- /dev/null
+++ b/packages/block-library/src/navigation/edit/test/navigation-menu-selector.js
@@ -0,0 +1,660 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import NavigationMenuSelector from '../navigation-menu-selector';
+import useNavigationMenu from '../../use-navigation-menu';
+import useNavigationEntities from '../../use-navigation-entities';
+
+jest.mock( '../../use-navigation-menu', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '../../use-navigation-entities', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+useNavigationEntities.mockReturnValue( {
+	menus: [],
+} );
+
+const navigationMenu1 = {
+	id: 1,
+	title: {
+		rendered: 'Menu 1',
+	},
+	status: 'publish',
+};
+const navigationMenu2 = {
+	id: 2,
+	title: {
+		rendered: 'Menu 2',
+	},
+	status: 'publish',
+};
+const navigationMenu3 = {
+	id: 3,
+	title: {
+		rendered: 'Menu 3',
+	},
+	status: 'publish',
+};
+
+const navigationMenusFixture = [
+	navigationMenu1,
+	navigationMenu2,
+	navigationMenu3,
+];
+
+const classicMenusFixture = [
+	{
+		id: 1,
+		name: 'Classic Menu 1',
+	},
+	{
+		id: 2,
+		name: 'Classic Menu 2',
+	},
+	{
+		id: 3,
+		name: 'Classic Menu 3',
+	},
+];
+
+describe( 'NavigationMenuSelector', () => {
+	describe( 'Toggle', () => {
+		it( 'should show dropdown toggle with loading message when menus have not resolved', async () => {
+			useNavigationMenu.mockReturnValue( {
+				navigationMenus: [],
+				isResolvingNavigationMenus: true,
+				hasResolvedNavigationMenus: false,
+				canSwitchNavigationMenu: true,
+			} );
+
+			render( <NavigationMenuSelector /> );
+
+			expect(
+				screen.getByRole( 'button', {
+					name: /Loading/,
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should show correct dropdown toggle prompt to choose a menu when Navigation Menus have resolved', async () => {
+			useNavigationMenu.mockReturnValue( {
+				navigationMenus: [],
+				hasResolvedNavigationMenus: true,
+				canUserCreateNavigationMenus: true,
+				canSwitchNavigationMenu: true,
+			} );
+
+			render( <NavigationMenuSelector /> );
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Choose or create a Navigation Menu',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Dropdown', () => {
+		it( 'should show in loading state with no options when menus have not resolved and user cannot create menus', async () => {
+			const user = userEvent.setup();
+
+			useNavigationMenu.mockReturnValue( {
+				navigationMenus: [],
+				isResolvingNavigationMenus: true,
+				hasResolvedNavigationMenus: false,
+				canUserCreateNavigationMenus: false,
+				canSwitchNavigationMenu: true,
+			} );
+
+			render( <NavigationMenuSelector /> );
+
+			const toggleButton = screen.getByRole( 'button' );
+			await user.click( toggleButton );
+
+			expect(
+				screen.getByRole( 'menu', {
+					name: /Loading/,
+				} )
+			).toBeInTheDocument();
+
+			// Check that all the option groups are *not* present.
+			const menusGroup = screen.queryByRole( 'group', { name: 'Menus' } );
+			expect( menusGroup ).not.toBeInTheDocument();
+
+			const classicMenusGroup = screen.queryByRole( 'group', {
+				name: 'Import Classic Menus',
+			} );
+			expect( classicMenusGroup ).not.toBeInTheDocument();
+
+			const toolsGroup = screen.queryByRole( 'group', {
+				name: 'Tools',
+			} );
+			expect( toolsGroup ).not.toBeInTheDocument();
+		} );
+
+		describe( 'Creating new menus', () => {
+			it( 'should show option to create a menu when no menus exist but user can create menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button', {
+					name: 'Choose or create a Navigation Menu',
+				} );
+
+				await user.click( toggleButton );
+
+				const menuPopover = screen.getByRole( 'menu' );
+
+				expect( menuPopover ).toHaveAttribute(
+					'aria-label',
+					expect.stringContaining(
+						'Choose or create a Navigation Menu'
+					)
+				);
+
+				// Check that all the option groups are *not* present.
+				const menusGroup = screen.queryByRole( 'group', {
+					name: 'Menus',
+				} );
+				expect( menusGroup ).not.toBeInTheDocument();
+
+				const classicMenusGroup = screen.queryByRole( 'group', {
+					name: 'Import Classic Menus',
+				} );
+				expect( classicMenusGroup ).not.toBeInTheDocument();
+
+				// Check the Tools Group and Create Menu Button are present.
+				const toolsGroup = screen.queryByRole( 'group', {
+					name: 'Tools',
+				} );
+				expect( toolsGroup ).toBeInTheDocument();
+
+				const createMenuButton = screen.getByRole( 'menuitem', {
+					name: 'Create new Menu',
+				} );
+
+				expect( createMenuButton ).toBeInTheDocument();
+			} );
+
+			it( 'should not show option to create a menu when user does not have permission to create menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: false,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				// Check the Tools Group and Create Menu Button are present.
+				const toolsGroup = screen.queryByRole( 'group', {
+					name: 'Tools',
+				} );
+				expect( toolsGroup ).not.toBeInTheDocument();
+			} );
+
+			it( 'should call handler callback and close popover when create menu button is clicked', async () => {
+				const user = userEvent.setup();
+				const handler = jest.fn();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render( <NavigationMenuSelector onCreateNew={ handler } /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const createMenuButton = screen.getByRole( 'menuitem', {
+					name: 'Create new Menu',
+				} );
+
+				await user.click( createMenuButton );
+
+				expect( handler ).toHaveBeenCalled();
+
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			} );
+
+			it( 'should handle disabled state of the create menu button during the creation process', async () => {
+				const user = userEvent.setup();
+				const handler = jest.fn();
+
+				// at the start we have the menus and we're not waiting on network
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				const { rerender } = render(
+					<NavigationMenuSelector onCreateNew={ handler } />
+				);
+
+				const toggleButton = screen.getByRole( 'button' );
+
+				await user.click( toggleButton );
+
+				await user.click(
+					screen.getByRole( 'menuitem', {
+						name: 'Create new Menu',
+					} )
+				);
+
+				// creating a menu is a network activity
+				// so we have to wait on it
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: false,
+					isResolvingNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				rerender( <NavigationMenuSelector onCreateNew={ handler } /> );
+
+				// Re-open the dropdown (it's closed when the "Create menu" button is clicked).
+				await user.click( toggleButton );
+
+				// Check the dropdown is open again.
+				expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+				// Check the "Create menu" button is disabled.
+				expect(
+					screen.queryByRole( 'menuitem', {
+						name: 'Create new Menu',
+					} )
+				).toBeDisabled();
+
+				// once the menu is created
+				// no more network activity to wait on
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					hasResolvedNavigationMenus: true,
+					isResolvingNavigationMenus: false,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				// Simulate the menu being created and component being re-rendered.
+				rerender(
+					<NavigationMenuSelector
+						onCreateNew={ handler }
+						createNavigationMenuIsSuccess
+					/>
+				);
+
+				// Check the button is enabled again.
+				expect(
+					screen.queryByRole( 'menuitem', {
+						name: 'Create new Menu',
+					} )
+				).toBeEnabled();
+			} );
+		} );
+
+		describe( 'Navigation Menus', () => {
+			it( 'should not show a list of menus when menus exist but user does not have permission to switch menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: navigationMenusFixture,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: false,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const menusGroup = screen.queryByRole( 'group', {
+					name: 'Menus',
+				} );
+				expect( menusGroup ).not.toBeInTheDocument();
+			} );
+
+			it( 'should show a list of menus when menus exist', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: navigationMenusFixture,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: false,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const menusGroup = screen.queryByRole( 'group', {
+					name: 'Menus',
+				} );
+				expect( menusGroup ).toBeInTheDocument();
+
+				navigationMenusFixture.forEach( ( item ) => {
+					const menuItem = screen.queryByRole( 'menuitemradio', {
+						name: item?.title?.rendered,
+					} );
+					expect( menuItem ).toBeInTheDocument();
+				} );
+			} );
+
+			it( 'should render fallback title when menu has no title', async () => {
+				const user = userEvent.setup();
+
+				const menusWithNoTitle = [
+					{
+						id: 1,
+						status: 'publish',
+					},
+					{
+						id: 2,
+						status: 'publish',
+					},
+				];
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: menusWithNoTitle,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const menusGroup = screen.queryByRole( 'group', {
+					name: 'Menus',
+				} );
+				expect( menusGroup ).toBeInTheDocument();
+
+				// Check for sequentially named fallback titles.
+				expect(
+					screen.getByRole( 'menuitemradio', {
+						name: '(no title 1)',
+					} )
+				).toBeInTheDocument();
+
+				expect(
+					screen.getByRole( 'menuitemradio', {
+						name: '(no title 2)',
+					} )
+				).toBeInTheDocument();
+			} );
+
+			it( 'should pre-select the correct menu in the menu list if a menu ID is passed', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: navigationMenusFixture,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render(
+					<NavigationMenuSelector
+						currentMenuId={ navigationMenusFixture[ 0 ].id }
+					/>
+				);
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const menuItem = screen.getByRole( 'menuitemradio', {
+					name: navigationMenusFixture[ 0 ].title.rendered,
+				} );
+
+				expect( menuItem ).toBeChecked();
+			} );
+
+			it( 'should call the handler when the Navigation Menu is selected', async () => {
+				const user = userEvent.setup();
+
+				const handler = jest.fn();
+
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: navigationMenusFixture,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+				} );
+
+				render(
+					<NavigationMenuSelector
+						onSelectNavigationMenu={ handler }
+					/>
+				);
+				const toggleButton = screen.getByRole( 'button' );
+
+				await user.click( toggleButton );
+
+				await user.click(
+					screen.getByRole( 'menuitemradio', {
+						name: navigationMenusFixture[ 0 ].title.rendered,
+					} )
+				);
+
+				expect( handler ).toHaveBeenCalledWith(
+					navigationMenusFixture[ 0 ].id
+				);
+
+				//  Check the dropdown has been closed.
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'Classic menus', () => {
+			it( 'should not show classic menus if there are no classic menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationEntities.mockReturnValue( {
+					menus: [],
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const classicMenusGroup = screen.queryByRole( 'group', {
+					name: 'Import Classic Menus',
+				} );
+				expect( classicMenusGroup ).not.toBeInTheDocument();
+			} );
+
+			it( 'should not show classic menus if there are classic menus but the user does not have permission to create menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					canUserCreateNavigationMenus: false,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const classicMenusGroup = screen.queryByRole( 'group', {
+					name: 'Import Classic Menus',
+				} );
+				expect( classicMenusGroup ).not.toBeInTheDocument();
+			} );
+
+			it( 'should show classic menus if there are classic menus and the user has permission to create menus', async () => {
+				const user = userEvent.setup();
+
+				useNavigationMenu.mockReturnValue( {
+					canUserCreateNavigationMenus: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				render( <NavigationMenuSelector /> );
+
+				const toggleButton = screen.getByRole( 'button' );
+				await user.click( toggleButton );
+
+				const classicMenusGroup = screen.queryByRole( 'group', {
+					name: 'Import Classic Menus',
+				} );
+
+				expect( classicMenusGroup ).toBeInTheDocument();
+
+				// Check for classic menuitems
+				classicMenusFixture.forEach( ( item ) => {
+					const menuItem = screen.getByRole( 'menuitem', {
+						name: `Create from '${ item.name }'`,
+					} );
+					expect( menuItem ).toBeInTheDocument();
+				} );
+			} );
+
+			it( 'should call the handler when the classic menu item is selected and disable all options during the import/creation process', async () => {
+				const user = userEvent.setup();
+				const handler = jest.fn( async () => {} );
+
+				// initially we have the menus, and we're not waiting on network
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+					canSwitchNavigationMenu: true,
+					canUserCreateNavigationMenus: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				const { rerender } = render(
+					<NavigationMenuSelector onSelectClassicMenu={ handler } />
+				);
+
+				const toggleButton = screen.getByRole( 'button' );
+
+				await user.click( toggleButton );
+
+				await user.click(
+					screen.getByRole( 'menuitem', {
+						name: `Create from '${ classicMenusFixture[ 0 ].name }'`,
+					} )
+				);
+
+				expect( handler ).toHaveBeenCalled();
+
+				// Check the dropdown has been closed.
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+
+				// since we're importing we are doing network activity
+				// so we have to wait on it
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: true,
+					hasResolvedNavigationMenus: false,
+					canUserCreateNavigationMenus: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				rerender(
+					<NavigationMenuSelector onSelectClassicMenu={ handler } />
+				);
+
+				// // Re-open the dropdown (it's closed when the "Create menu" button is clicked).
+				await user.click( screen.getByRole( 'button' ) );
+
+				// Check the dropdown is open and is in the "loading" state.
+				expect(
+					screen.getByRole( 'menu', {
+						name: /Loading/,
+					} )
+				).toBeInTheDocument();
+
+				// Check all menu items are present but disabled.
+				screen.getAllByRole( 'menuitem' ).forEach( ( item ) => {
+					// // Check all menu items are present but disabled.
+					expect( item ).toBeDisabled();
+				} );
+
+				// once the menu is imported
+				// no more network activity to wait on
+				useNavigationMenu.mockReturnValue( {
+					navigationMenus: [],
+					isResolvingNavigationMenus: false,
+					hasResolvedNavigationMenus: true,
+					canUserCreateNavigationMenus: true,
+				} );
+
+				useNavigationEntities.mockReturnValue( {
+					menus: classicMenusFixture,
+				} );
+
+				// Simulate the menu being created and component being re-rendered.
+				rerender(
+					<NavigationMenuSelector
+						createNavigationMenuIsSuccess // classic menu import creates a Navigation menu.
+					/>
+				);
+
+				// Todo: fix bug where aria label is not updated.
+				// expect(
+				// 	screen.getByRole( 'menu', {
+				// 		name: `You are currently editing ${ classicMenusFixture[ 0 ].name }`,
+				// 	} )
+				// ).toBeInTheDocument();
+
+				// Check all menu items are re-enabled.
+				screen.getAllByRole( 'menuitem' ).forEach( ( item ) => {
+					// // Check all menu items are present but disabled.
+					expect( item ).toBeEnabled();
+				} );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
index 0fa2a119446f36..6cdcaa46f2bac3 100644
--- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
@@ -5,69 +5,41 @@ import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import useNavigationMenu from '../use-navigation-menu';
+import { areBlocksDirty } from './are-blocks-dirty';
+import { DEFAULT_BLOCK, SELECT_NAVIGATION_MENUS_ARGS } from '../constants';
 
 const EMPTY_OBJECT = {};
-const DRAFT_MENU_PARAMS = [
-	'postType',
-	'wp_navigation',
-	{ status: 'draft', per_page: -1 },
-];
-
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
-
-const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-];
 
 export default function UnsavedInnerBlocks( {
 	blocks,
 	createNavigationMenu,
-
 	hasSelection,
 } ) {
-	const originalBlocks = useRef();
+	const originalBlocksRef = useRef();
 
 	useEffect( () => {
 		// Initially store the uncontrolled inner blocks for
 		// dirty state comparison.
-		if ( ! originalBlocks?.current ) {
-			originalBlocks.current = blocks;
+		if ( ! originalBlocksRef?.current ) {
+			originalBlocksRef.current = blocks;
 		}
 	}, [ blocks ] );
 
-	// If the current inner blocks object is different in any way
-	// from the original inner blocks from the post content then the
-	// user has made changes to the inner blocks. At this point the inner
-	// blocks can be considered "dirty".
-	// We also make sure the current innerBlocks had a chance to be set.
-	const innerBlocksAreDirty =
-		!! originalBlocks.current && blocks !== originalBlocks.current;
-
-	const shouldDirectInsert = useMemo(
-		() =>
-			blocks.every(
-				( { name } ) =>
-					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu' ||
-					name === 'core/page-list'
-			),
-		[ blocks ]
+	// If the current inner blocks are different from the original inner blocks
+	// from the post content then the user has made changes to the inner blocks.
+	// At this point the inner blocks can be considered "dirty".
+	// Note: referential equality is not sufficient for comparison as the inner blocks
+	// of the page list are controlled and may be updated async due to syncing with
+	// entity records. As a result we need to perform a deep equality check skipping
+	// the page list's inner blocks.
+	const innerBlocksAreDirty = areBlocksDirty(
+		originalBlocksRef?.current,
+		blocks
 	);
 
 	// The block will be disabled in a block preview, use this as a way of
@@ -80,43 +52,30 @@ export default function UnsavedInnerBlocks( {
 		},
 		{
 			renderAppender: hasSelection ? undefined : false,
-			allowedBlocks: ALLOWED_BLOCKS,
-			__experimentalDefaultBlock: DEFAULT_BLOCK,
-			__experimentalDirectInsert: shouldDirectInsert,
+			defaultBlock: DEFAULT_BLOCK,
+			directInsert: true,
 		}
 	);
 
-	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
-		useSelect(
-			( select ) => {
-				if ( isDisabled ) {
-					return EMPTY_OBJECT;
-				}
-
-				const {
-					getEntityRecords,
-					hasFinishedResolution,
-					isSavingEntityRecord,
-				} = select( coreStore );
-
-				return {
-					isSaving: isSavingEntityRecord(
-						'postType',
-						'wp_navigation'
-					),
-					draftNavigationMenus: getEntityRecords(
-						...DRAFT_MENU_PARAMS
-					),
-					hasResolvedDraftNavigationMenus: hasFinishedResolution(
-						'getEntityRecords',
-						DRAFT_MENU_PARAMS
-					),
-				};
-			},
-			[ isDisabled ]
-		);
-
-	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
+	const { isSaving, hasResolvedAllNavigationMenus } = useSelect(
+		( select ) => {
+			if ( isDisabled ) {
+				return EMPTY_OBJECT;
+			}
+
+			const { hasFinishedResolution, isSavingEntityRecord } =
+				select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
+				hasResolvedAllNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					SELECT_NAVIGATION_MENUS_ARGS
+				),
+			};
+		},
+		[ isDisabled ]
+	);
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
@@ -135,8 +94,7 @@ export default function UnsavedInnerBlocks( {
 		if (
 			isDisabled ||
 			isSaving ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus ||
+			! hasResolvedAllNavigationMenus ||
 			! hasSelection ||
 			! innerBlocksAreDirty
 		) {
@@ -145,15 +103,13 @@ export default function UnsavedInnerBlocks( {
 
 		createNavigationMenu( null, blocks );
 	}, [
+		blocks,
+		createNavigationMenu,
 		isDisabled,
 		isSaving,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
-		draftNavigationMenus,
-		navigationMenus,
+		hasResolvedAllNavigationMenus,
+		innerBlocksAreDirty,
 		hasSelection,
-		createNavigationMenu,
-		blocks,
 	] );
 
 	const Wrapper = isSaving ? Disabled : 'div';
diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
index 01eea8d0261aa7..300672fa91e8ad 100644
--- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
+++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
@@ -9,7 +9,6 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useCreateNavigationMenu from './use-create-navigation-menu';
 import menuItemsToBlocks from '../menu-items-to-blocks';
 
 export const CLASSIC_MENU_CONVERSION_SUCCESS = 'success';
@@ -21,143 +20,82 @@ export const CLASSIC_MENU_CONVERSION_IDLE = 'idle';
 // do not import the same classic menu twice.
 let classicMenuBeingConvertedId = null;
 
-function useConvertClassicToBlockMenu( clientId ) {
-	/*
-	 * The wp_navigation post is created as a draft so the changes on the frontend and
-	 * the site editor are not permanent without a save interaction done by the user.
-	 */
-	const { create: createNavigationMenu } = useCreateNavigationMenu(
-		clientId,
-		'draft'
-	);
+function useConvertClassicToBlockMenu(
+	createNavigationMenu,
+	{ throwOnError = false } = {}
+) {
 	const registry = useRegistry();
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	const [ status, setStatus ] = useState( CLASSIC_MENU_CONVERSION_IDLE );
 	const [ error, setError ] = useState( null );
 
-	async function convertClassicMenuToBlockMenu(
-		menuId,
-		menuName,
-		postStatus = 'publish'
-	) {
-		let navigationMenu;
-		let classicMenuItems;
-
-		// 1. Fetch the classic Menu items.
-		try {
-			classicMenuItems = await registry
-				.resolveSelect( coreStore )
-				.getMenuItems( {
-					menus: menuId,
-					per_page: -1,
-					context: 'view',
-				} );
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		// Handle offline response which resolves to `null`.
-		if ( classicMenuItems === null ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to fetch classic menu "%s" from API.` ),
-					menuName
-				)
-			);
-		}
-
-		// 2. Convert the classic items into blocks.
-		const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
-
-		// 3. Create the `wp_navigation` Post with the blocks.
-		try {
-			navigationMenu = await createNavigationMenu(
-				menuName,
-				innerBlocks,
-				postStatus
-			);
-
-			/**
-			 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
-			 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
-			 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
-			 * without user interaction.
-			 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
-			 */
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu.id,
-				{
-					status: postStatus,
-				},
-				{ throwOnError: true }
-			);
-		} catch ( err ) {
-			throw new Error(
-				sprintf(
-					// translators: %s: the name of a menu (e.g. Header navigation).
-					__( `Unable to create Navigation Menu "%s".` ),
-					menuName
-				),
-				{
-					cause: err,
-				}
-			);
-		}
-
-		return navigationMenu;
-	}
-
-	const convert = useCallback( async ( menuId, menuName, postStatus ) => {
-		// Check whether this classic menu is being imported already.
-		if ( classicMenuBeingConvertedId === menuId ) {
-			return;
-		}
-
-		// Set the ID for the currently importing classic menu.
-		classicMenuBeingConvertedId = menuId;
-
-		if ( ! menuId || ! menuName ) {
-			setError( 'Unable to convert menu. Missing menu details.' );
-			setStatus( CLASSIC_MENU_CONVERSION_ERROR );
-			return;
-		}
-
-		setStatus( CLASSIC_MENU_CONVERSION_PENDING );
-		setError( null );
-
-		return await convertClassicMenuToBlockMenu(
-			menuId,
-			menuName,
-			postStatus
-		)
-			.then( ( navigationMenu ) => {
-				setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
-				return navigationMenu;
-			} )
-			.catch( ( err ) => {
-				setError( err?.message );
-				// Reset the ID for the currently importing classic menu.
-				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+	const convertClassicMenuToBlockMenu = useCallback(
+		async ( menuId, menuName, postStatus = 'publish' ) => {
+			let navigationMenu;
+			let classicMenuItems;
+
+			// 1. Fetch the classic Menu items.
+			try {
+				classicMenuItems = await registry
+					.resolveSelect( coreStore )
+					.getMenuItems( {
+						menus: menuId,
+						per_page: -1,
+						context: 'view',
+					} );
+			} catch ( err ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					),
+					{
+						cause: err,
+					}
+				);
+			}
 
-				// Reset the ID for the currently importing classic menu.
-				classicMenuBeingConvertedId = null;
+			// Handle offline response which resolves to `null`.
+			if ( classicMenuItems === null ) {
+				throw new Error(
+					sprintf(
+						// translators: %s: the name of a menu (e.g. Header navigation).
+						__( `Unable to fetch classic menu "%s" from API.` ),
+						menuName
+					)
+				);
+			}
 
-				// Rethrow error for debugging.
+			// 2. Convert the classic items into blocks.
+			const { innerBlocks } = menuItemsToBlocks( classicMenuItems );
+
+			// 3. Create the `wp_navigation` Post with the blocks.
+			try {
+				navigationMenu = await createNavigationMenu(
+					menuName,
+					innerBlocks,
+					postStatus
+				);
+
+				/**
+				 * Immediately trigger editEntityRecord to change the wp_navigation post status to 'publish'.
+				 * This status change causes the menu to be displayed on the front of the site and sets the post state to be "dirty".
+				 * The problem being solved is if saveEditedEntityRecord was used here, the menu would be updated on the frontend and the editor _automatically_,
+				 * without user interaction.
+				 * If the user abandons the site editor without saving, there would still be a wp_navigation post created as draft.
+				 */
+				await editEntityRecord(
+					'postType',
+					'wp_navigation',
+					navigationMenu.id,
+					{
+						status: 'publish',
+					},
+					{ throwOnError: true }
+				);
+			} catch ( err ) {
 				throw new Error(
 					sprintf(
 						// translators: %s: the name of a menu (e.g. Header navigation).
@@ -168,8 +106,68 @@ function useConvertClassicToBlockMenu( clientId ) {
 						cause: err,
 					}
 				);
-			} );
-	}, [] );
+			}
+
+			return navigationMenu;
+		},
+		[ createNavigationMenu, editEntityRecord, registry ]
+	);
+
+	const convert = useCallback(
+		async ( menuId, menuName, postStatus ) => {
+			// Check whether this classic menu is being imported already.
+			if ( classicMenuBeingConvertedId === menuId ) {
+				return;
+			}
+
+			// Set the ID for the currently importing classic menu.
+			classicMenuBeingConvertedId = menuId;
+
+			if ( ! menuId || ! menuName ) {
+				setError( 'Unable to convert menu. Missing menu details.' );
+				setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+				return;
+			}
+
+			setStatus( CLASSIC_MENU_CONVERSION_PENDING );
+			setError( null );
+
+			return await convertClassicMenuToBlockMenu(
+				menuId,
+				menuName,
+				postStatus
+			)
+				.then( ( navigationMenu ) => {
+					setStatus( CLASSIC_MENU_CONVERSION_SUCCESS );
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+					return navigationMenu;
+				} )
+				.catch( ( err ) => {
+					setError( err?.message );
+					// Reset the ID for the currently importing classic menu.
+					setStatus( CLASSIC_MENU_CONVERSION_ERROR );
+
+					// Reset the ID for the currently importing classic menu.
+					classicMenuBeingConvertedId = null;
+
+					// Rethrow error for debugging.
+					if ( throwOnError ) {
+						throw new Error(
+							sprintf(
+								// translators: %s: the name of a menu (e.g. Header navigation).
+								__( `Unable to create Navigation Menu "%s".` ),
+								menuName
+							),
+							{
+								cause: err,
+							}
+						);
+					}
+				} );
+		},
+		[ convertClassicMenuToBlockMenu, throwOnError ]
+	);
 
 	return {
 		convert,
diff --git a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
index 2a2249842b9557..b4e7372f03cbc5 100644
--- a/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
+++ b/packages/block-library/src/navigation/edit/use-create-navigation-menu.js
@@ -21,7 +21,7 @@ export default function useCreateNavigationMenu( clientId ) {
 	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
 
-	const { saveEntityRecord } = useDispatch( coreStore );
+	const { saveEntityRecord, editEntityRecord } = useDispatch( coreStore );
 	const generateDefaultTitle = useGenerateDefaultNavigationTitle( clientId );
 
 	// This callback uses data from the two placeholder steps and only creates
@@ -68,6 +68,18 @@ export default function useCreateNavigationMenu( clientId ) {
 				.then( ( response ) => {
 					setValue( response );
 					setStatus( CREATE_NAVIGATION_MENU_SUCCESS );
+
+					// Set the status to publish so that the Navigation block
+					// shows up in the multi entity save flow.
+					if ( postStatus !== 'publish' ) {
+						editEntityRecord(
+							'postType',
+							'wp_navigation',
+							response.id,
+							{ status: 'publish' }
+						);
+					}
+
 					return response;
 				} )
 				.catch( ( err ) => {
@@ -78,7 +90,7 @@ export default function useCreateNavigationMenu( clientId ) {
 					} );
 				} );
 		},
-		[ serialize, saveEntityRecord ]
+		[ saveEntityRecord, editEntityRecord, generateDefaultTitle ]
 	);
 
 	return {
diff --git a/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js b/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
index e268ed288f1547..0a134a256e6646 100644
--- a/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
+++ b/packages/block-library/src/navigation/edit/use-generate-default-navigation-title.js
@@ -75,5 +75,5 @@ export default function useGenerateDefaultNavigationTitle( clientId ) {
 				: title;
 
 		return titleWithCount || '';
-	}, [ isDisabled, area ] );
+	}, [ isDisabled, area, registry ] );
 }
diff --git a/packages/block-library/src/navigation/edit/use-navigation-notice.js b/packages/block-library/src/navigation/edit/use-navigation-notice.js
index ad0c6d33587c92..6d25f041775af9 100644
--- a/packages/block-library/src/navigation/edit/use-navigation-notice.js
+++ b/packages/block-library/src/navigation/edit/use-navigation-notice.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticeStore } from '@wordpress/notices';
 
@@ -10,26 +10,29 @@ function useNavigationNotice( { name, message = '' } = {} ) {
 
 	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
 
-	const showNotice = ( customMsg ) => {
-		if ( noticeRef.current ) {
-			return;
-		}
+	const showNotice = useCallback(
+		( customMsg ) => {
+			if ( noticeRef.current ) {
+				return;
+			}
 
-		noticeRef.current = name;
+			noticeRef.current = name;
 
-		createWarningNotice( customMsg || message, {
-			id: noticeRef.current,
-			type: 'snackbar',
-		} );
-	};
+			createWarningNotice( customMsg || message, {
+				id: noticeRef.current,
+				type: 'snackbar',
+			} );
+		},
+		[ noticeRef, createWarningNotice, message, name ]
+	);
 
-	const hideNotice = () => {
+	const hideNotice = useCallback( () => {
 		if ( ! noticeRef.current ) {
 			return;
 		}
 		removeNotice( noticeRef.current );
 		noticeRef.current = null;
-	};
+	}, [ noticeRef, removeNotice ] );
 
 	return [ showNotice, hideNotice ];
 }
diff --git a/packages/block-library/src/navigation/edit/utils.js b/packages/block-library/src/navigation/edit/utils.js
index b152d9874e8e97..943fc3b4cb4c11 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 clsx from 'clsx';
+
 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: clsx( '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..2f61a19be2b799 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -5,6 +5,10 @@
 // Undo default editor styles.
 // These need extra specificity.
 .editor-styles-wrapper .wp-block-navigation {
+	// Extra specificity is applied to do two things in classic themes:
+	// 1. Override the auto margin from alignment styles. This is needed as the `ul` element
+	//    has a `wp-block` class applied to it, even though it's not a block.
+	// 2. Override list indentation that targets `ul,ol` elements.
 	ul {
 		margin-top: 0;
 		margin-bottom: 0;
@@ -32,13 +36,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 {
@@ -46,8 +43,7 @@
 }
 
 // Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected)
-.has-child:hover {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
 	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
@@ -56,6 +52,7 @@
 
 // Styles for submenu flyout.
 .has-child {
+
 	&.is-selected,
 	&.has-child-selected {
 		> .wp-block-navigation__submenu-container {
@@ -83,8 +80,7 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable
-.wp-block-navigation-link > .wp-block-navigation__container {
+.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
 	visibility: hidden;
@@ -108,7 +104,6 @@
 		background: $gray-900;
 		padding: 0;
 		width: $button-size-small;
-		border-radius: $radius-block-ui;
 		margin-right: 0;
 		margin-left: auto;
 	}
@@ -124,6 +119,7 @@
  */
 
 $colors-selector-size: 22px;
+
 .block-library-colors-selector {
 	width: auto;
 
@@ -158,7 +154,7 @@ $colors-selector-size: 22px;
 		min-width: $colors-selector-size;
 		height: $colors-selector-size;
 		min-height: $colors-selector-size;
-		line-height: ( $colors-selector-size - 2 );
+		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
 		> svg {
@@ -168,6 +164,7 @@ $colors-selector-size: 22px;
 
 		// Styling icon color.
 		&.has-text-color {
+
 			> svg,
 			> svg path {
 				color: inherit;
@@ -178,6 +175,7 @@ $colors-selector-size: 22px;
 
 // Colors Selector Popover.
 $color-control-label-height: 20px;
+
 .block-library-colors-selector__popover {
 	.color-palette-controller-container {
 		padding: 16px;
@@ -205,6 +203,7 @@ $color-control-label-height: 20px;
 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
 	background-color: $gray-900;
 	color: $white;
+	height: $button-size-small;
 
 	// This needs specificity to override an inherited padding.
 	// That source padding in turn has high specificity to protect
@@ -229,13 +228,16 @@ $color-control-label-height: 20px;
 	0% {
 		opacity: 1;
 	}
+
 	50% {
 		opacity: 0.5;
 	}
+
 	100% {
 		opacity: 1;
 	}
 }
+
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -278,6 +280,7 @@ $color-control-label-height: 20px;
 	// against any background color.
 	color: currentColor;
 	background: transparent;
+
 	&::before {
 		content: "";
 		display: block;
@@ -288,7 +291,6 @@ $color-control-label-height: 20px;
 		left: 0;
 		pointer-events: none;
 		border: $border-width dashed currentColor;
-		@include placeholder-style();
 
 		// Inherit border radius from style variations.
 		border-radius: inherit;
@@ -324,7 +326,7 @@ $color-control-label-height: 20px;
 }
 
 .wp-block-navigation-placeholder__controls {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	display: none;
@@ -345,6 +347,7 @@ $color-control-label-height: 20px;
 	// Hide the navigation indicator when in small contexts.
 	.is-small &,
 	.is-medium & {
+
 		.wp-block-navigation-placeholder__actions__indicator,
 		.wp-block-navigation-placeholder__actions__indicator + hr {
 			display: none;
@@ -434,15 +437,14 @@ $color-control-label-height: 20px;
 		}
 	}
 }
+
 // Emulate the fullscreen editing inside the editor.
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	top:
-		$admin-bar-height-big + $header-height + $block-toolbar-height +
-		$border-width;
+	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 	@include break-medium() {
 		top: $admin-bar-height + $header-height + $border-width;
@@ -452,86 +454,42 @@ $color-control-label-height: 20px;
 	@include break-medium() {
 		left: $admin-sidebar-width-collapsed;
 	}
+
 	@include break-large() {
 		left: $admin-sidebar-width;
 	}
 }
 
-.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-	@include break-medium() {
-		top:
-			$admin-bar-height + $header-height + $block-toolbar-height +
-			$border-width;
-	}
-}
-
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
-	top:
-		$admin-bar-height + $header-height + $block-toolbar-height +
-		$border-width;
-}
-
-.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
-	right: $sidebar-width;
+	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
 }
 
 // When fullscreen.
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
-		top:
-			$admin-bar-height-big + $header-height + $block-toolbar-height +
-			$border-width;
+		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
 		}
 	}
 
-	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
-		@include break-medium() {
-			top: $header-height + $block-toolbar-height + $border-width;
-		}
-	}
-
 	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 		top: $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
-// The iframe makes these rules a lot simpler.
-body.editor-styles-wrapper
-.wp-block-navigation__responsive-container.is-menu-open {
+// `body.editor-styles-wrapper` ensures this only applies to the iframed editor.
+body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
 }
 
-// Without this, the block cannot be selected, nor does the right container get focus.
-// @todo: this is disruptive. Ideally we can retire a few of the containers,
-// so focus is applied naturally on the block container.
-// It's important the right container has focus, otherwise you can't press
-// "Delete" to remove the block.
-.wp-block-navigation__responsive-container,
-.wp-block-navigation__responsive-close {
-	@include break-small() {
-		pointer-events: none;
-
-		.wp-block-navigation__responsive-container-close,
-		.block-editor-block-list__layout * {
-			pointer-events: all;
-		}
-	}
-
-	// Page List items should remain inert.
-	.wp-block-pages-list__item__link {
-		pointer-events: none;
-	}
-}
-
 // The menu and close buttons need higher specificity in the editor.
 .components-button.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
 .components-button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
@@ -543,6 +501,7 @@ body.editor-styles-wrapper
 .components-heading.wp-block-navigation-off-canvas-editor__title {
 	margin: 0;
 }
+
 .wp-block-navigation-off-canvas-editor__header {
 	margin-bottom: $grid-unit-10;
 }
@@ -559,6 +518,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 0;
 	}
+
 	100% {
 		opacity: 1;
 	}
@@ -566,7 +526,7 @@ body.editor-styles-wrapper
 
 // Space spinner to give it breathing
 // room when block is selected and has focus outline.
-.wp-block-navigation .components-spinner {
+.wp-block-navigation__loading-indicator-container {
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
@@ -578,6 +538,7 @@ body.editor-styles-wrapper
 	0% {
 		opacity: 1;
 	}
+
 	100% {
 		opacity: 0.5;
 	}
@@ -603,7 +564,11 @@ body.editor-styles-wrapper
 	width: 100%;
 	background-color: $gray-100;
 	padding: 0 $grid-unit-30;
-	height: $grid-unit-40 * 2;
+
+	// Adding !important to override default 40px size.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
+	height: $grid-unit-40 * 2 !important;
+
 	margin-bottom: $grid-unit-15;
 
 	&.open {
@@ -661,3 +626,18 @@ body.editor-styles-wrapper
 .wp-block-navigation__responsive-container-open.components-button {
 	opacity: 1;
 }
+
+.wp-block-navigation__menu-inspector-controls {
+	overflow-x: auto;
+
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+}
+
+.wp-block-navigation__menu-inspector-controls__empty-message {
+	margin-left: 24px;
+}
+
+.wp-block-navigation__overlay-menu-icon-toggle-group {
+	// Counteract the margin added by the block inspector.
+	margin-bottom: $grid-unit-20;
+}
diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
index c581d5d0bd03a0..d0405be794ffe8 100644
--- a/packages/block-library/src/navigation/index.js
+++ b/packages/block-library/src/navigation/index.js
@@ -20,6 +20,9 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			overlayMenu: 'never',
+		},
 		innerBlocks: [
 			{
 				name: 'core/navigation-link',
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 87ea817270a391..9a56e399fcfecb 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -5,12 +5,722 @@
  * @package WordPress
  */
 
+/**
+ * Helper functions used to render the navigation block.
+ *
+ * @since 6.5.0
+ */
+class WP_Navigation_Block_Renderer {
+
+	/**
+	 * Used to determine whether or not a navigation has submenus.
+	 *
+	 * @since 6.5.0
+	 */
+	private static $has_submenus = false;
+
+	/**
+	 * Used to determine which blocks need an <li> wrapper.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var array
+	 */
+	private static $needs_list_item_wrapper = array(
+		'core/site-title',
+		'core/site-logo',
+		'core/social-links',
+	);
+
+	/**
+	 * Keeps track of all the navigation names that have been seen.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @var array
+	 */
+	private static $seen_menu_names = array();
+
+	/**
+	 * Returns whether or not this is responsive navigation.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return bool Returns whether or not this is responsive navigation.
+	 */
+	private static function is_responsive( $attributes ) {
+		/**
+		 * This is for backwards compatibility after the `isResponsive` attribute was been removed.
+		 */
+
+		$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
+		return isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
+	}
+
+	/**
+	 * Returns whether or not a navigation has a submenu.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 * @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
+	 */
+	private static function has_submenus( $inner_blocks ) {
+		if ( true === static::$has_submenus ) {
+			return static::$has_submenus;
+		}
+
+		foreach ( $inner_blocks as $inner_block ) {
+			// If this is a page list then work out if any of the pages have children.
+			if ( 'core/page-list' === $inner_block->name ) {
+				$all_pages = get_pages(
+					array(
+						'sort_column' => 'menu_order,post_title',
+						'order'       => 'asc',
+					)
+				);
+				foreach ( (array) $all_pages as $page ) {
+					if ( $page->post_parent ) {
+						static::$has_submenus = true;
+						break;
+					}
+				}
+			}
+			// If this is a navigation submenu then we know we have submenus.
+			if ( 'core/navigation-submenu' === $inner_block->name ) {
+				static::$has_submenus = true;
+				break;
+			}
+		}
+
+		return static::$has_submenus;
+	}
+
+	/**
+	 * Determine whether the navigation blocks is interactive.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes   The block attributes.
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 * @return bool Returns whether or not to load the view script.
+	 */
+	private static function is_interactive( $attributes, $inner_blocks ) {
+		$has_submenus       = static::has_submenus( $inner_blocks );
+		$is_responsive_menu = static::is_responsive( $attributes );
+		return ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu;
+	}
+
+	/**
+	 * Returns whether or not a block needs a list item wrapper.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param WP_Block $block The block.
+	 * @return bool Returns whether or not a block needs a list item wrapper.
+	 */
+	private static function does_block_need_a_list_item_wrapper( $block ) {
+
+		/**
+		 * Filter the list of blocks that need a list item wrapper.
+		 *
+		 * Affords the ability to customize which blocks need a list item wrapper when rendered
+		 * within a core/navigation block.
+		 * This is useful for blocks that are not list items but should be wrapped in a list
+		 * item when used as a child of a navigation block.
+		 *
+		 * @since 6.5.0
+		 *
+		 * @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
+		 * @return array The list of blocks that need a list item wrapper.
+		 */
+		$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
+
+		return in_array( $block->name, $needs_list_item_wrapper, true );
+	}
+
+	/**
+	 * Returns the markup for a single inner block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param WP_Block $inner_block The inner block.
+	 * @return string Returns the markup for a single inner block.
+	 */
+	private static function get_markup_for_inner_block( $inner_block ) {
+		$inner_block_content = $inner_block->render();
+		if ( ! empty( $inner_block_content ) ) {
+			if ( static::does_block_need_a_list_item_wrapper( $inner_block ) ) {
+				return '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
+			}
+		}
+
+		return $inner_block_content;
+	}
+
+	/**
+	 * Returns the html for the inner blocks of the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes   The block attributes.
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 * @return string Returns the html for the inner blocks of the navigation block.
+	 */
+	private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
+		$has_submenus   = static::has_submenus( $inner_blocks );
+		$is_interactive = static::is_interactive( $attributes, $inner_blocks );
+
+		$style                = static::get_styles( $attributes );
+		$class                = static::get_classes( $attributes );
+		$container_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => 'wp-block-navigation__container ' . $class,
+				'style' => $style,
+			)
+		);
+
+		$inner_blocks_html = '';
+		$is_list_open      = false;
+
+		foreach ( $inner_blocks as $inner_block ) {
+			$inner_block_markup = static::get_markup_for_inner_block( $inner_block );
+			$p                  = new WP_HTML_Tag_Processor( $inner_block_markup );
+			$is_list_item       = $p->next_tag( 'LI' );
+
+			if ( $is_list_item && ! $is_list_open ) {
+				$is_list_open       = true;
+				$inner_blocks_html .= sprintf(
+					'<ul %1$s>',
+					$container_attributes
+				);
+			}
+
+			if ( ! $is_list_item && $is_list_open ) {
+				$is_list_open       = false;
+				$inner_blocks_html .= '</ul>';
+			}
+
+			$inner_blocks_html .= $inner_block_markup;
+		}
+
+		if ( $is_list_open ) {
+			$inner_blocks_html .= '</ul>';
+		}
+
+		// Add directives to the submenu if needed.
+		if ( $has_submenus && $is_interactive ) {
+			$tags              = new WP_HTML_Tag_Processor( $inner_blocks_html );
+			$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $tags, $attributes );
+		}
+
+		return $inner_blocks_html;
+	}
+
+	/**
+	 * Gets the inner blocks for the navigation block from the navigation post.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return WP_Block_List Returns the inner blocks for the navigation block.
+	 */
+	private static function get_inner_blocks_from_navigation_post( $attributes ) {
+		$navigation_post = get_post( $attributes['ref'] );
+		if ( ! isset( $navigation_post ) ) {
+			return new WP_Block_List( array(), $attributes );
+		}
+
+		// Only published posts are valid. If this is changed then a corresponding change
+		// must also be implemented in `use-navigation-menu.js`.
+		if ( 'publish' === $navigation_post->post_status ) {
+			$parsed_blocks = parse_blocks( $navigation_post->post_content );
+
+			// 'parse_blocks' includes a null block with '\n\n' as the content when
+			// it encounters whitespace. This code strips it.
+			$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
+
+			// Run Block Hooks algorithm to inject hooked blocks.
+			$markup         = block_core_navigation_insert_hooked_blocks( $blocks, $navigation_post );
+			$root_nav_block = parse_blocks( $markup )[0];
+
+			$blocks = isset( $root_nav_block['innerBlocks'] ) ? $root_nav_block['innerBlocks'] : $blocks;
+
+			// TODO - this uses the full navigation block attributes for the
+			// context which could be refined.
+			return new WP_Block_List( $blocks, $attributes );
+		}
+	}
+
+	/**
+	 * Gets the inner blocks for the navigation block from the fallback.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return WP_Block_List Returns the inner blocks for the navigation block.
+	 */
+	private static function get_inner_blocks_from_fallback( $attributes ) {
+		$fallback_blocks = block_core_navigation_get_fallback_blocks();
+
+		// Fallback my have been filtered so do basic test for validity.
+		if ( empty( $fallback_blocks ) || ! is_array( $fallback_blocks ) ) {
+			return new WP_Block_List( array(), $attributes );
+		}
+
+		return new WP_Block_List( $fallback_blocks, $attributes );
+	}
+
+	/**
+	 * Gets the inner blocks for the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array    $attributes The block attributes.
+	 * @param WP_Block $block The parsed block.
+	 * @return WP_Block_List Returns the inner blocks for the navigation block.
+	 */
+	private static function get_inner_blocks( $attributes, $block ) {
+		$inner_blocks = $block->inner_blocks;
+
+		// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.
+		if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
+			$attributes['ref'] = $attributes['navigationMenuId'];
+		}
+
+		// If:
+		// - the gutenberg plugin is active
+		// - `__unstableLocation` is defined
+		// - we have menu items at the defined location
+		// - we don't have a relationship to a `wp_navigation` Post (via `ref`).
+		// ...then create inner blocks from the classic menu assigned to that location.
+		if (
+			defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&
+			array_key_exists( '__unstableLocation', $attributes ) &&
+			! array_key_exists( 'ref', $attributes ) &&
+			! empty( block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] ) )
+		) {
+			$inner_blocks = block_core_navigation_get_inner_blocks_from_unstable_location( $attributes );
+		}
+
+		// Load inner blocks from the navigation post.
+		if ( array_key_exists( 'ref', $attributes ) ) {
+			$inner_blocks = static::get_inner_blocks_from_navigation_post( $attributes );
+		}
+
+		// If there are no inner blocks then fallback to rendering an appropriate fallback.
+		if ( empty( $inner_blocks ) ) {
+			$inner_blocks = static::get_inner_blocks_from_fallback( $attributes );
+		}
+
+		/**
+		 * Filter navigation block $inner_blocks.
+		 * Allows modification of a navigation block menu items.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param \WP_Block_List $inner_blocks
+		 */
+		$inner_blocks = apply_filters( 'block_core_navigation_render_inner_blocks', $inner_blocks );
+
+		$post_ids = block_core_navigation_get_post_ids( $inner_blocks );
+		if ( $post_ids ) {
+			_prime_post_caches( $post_ids, false, false );
+		}
+
+		return $inner_blocks;
+	}
+
+	/**
+	 * Gets the name of the current navigation, if it has one.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return string Returns the name of the navigation.
+	 */
+	private static function get_navigation_name( $attributes ) {
+
+		$navigation_name = $attributes['ariaLabel'] ?? '';
+
+		if ( ! empty( $navigation_name ) ) {
+			return $navigation_name;
+		}
+
+		// Load the navigation post.
+		if ( array_key_exists( 'ref', $attributes ) ) {
+			$navigation_post = get_post( $attributes['ref'] );
+			if ( ! isset( $navigation_post ) ) {
+				return $navigation_name;
+			}
+
+			// Only published posts are valid. If this is changed then a corresponding change
+			// must also be implemented in `use-navigation-menu.js`.
+			if ( 'publish' === $navigation_post->post_status ) {
+				$navigation_name = $navigation_post->post_title;
+
+				// This is used to count the number of times a navigation name has been seen,
+				// so that we can ensure every navigation has a unique id.
+				if ( isset( static::$seen_menu_names[ $navigation_name ] ) ) {
+					++static::$seen_menu_names[ $navigation_name ];
+				} else {
+					static::$seen_menu_names[ $navigation_name ] = 1;
+				}
+			}
+		}
+
+		return $navigation_name;
+	}
+
+	/**
+	 * Returns the layout class for the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return string Returns the layout class for the navigation block.
+	 */
+	private static function get_layout_class( $attributes ) {
+		$layout_justification = array(
+			'left'          => 'items-justified-left',
+			'right'         => 'items-justified-right',
+			'center'        => 'items-justified-center',
+			'space-between' => 'items-justified-space-between',
+		);
+
+		$layout_class = '';
+		if (
+			isset( $attributes['layout']['justifyContent'] ) &&
+			isset( $layout_justification[ $attributes['layout']['justifyContent'] ] )
+		) {
+			$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
+		}
+		if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
+			$layout_class .= ' is-vertical';
+		}
+
+		if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
+			$layout_class .= ' no-wrap';
+		}
+		return $layout_class;
+	}
+
+	/**
+	 * Return classes for the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return string Returns the classes for the navigation block.
+	 */
+	private static function get_classes( $attributes ) {
+		// Restore legacy classnames for submenu positioning.
+		$layout_class       = static::get_layout_class( $attributes );
+		$colors             = block_core_navigation_build_css_colors( $attributes );
+		$font_sizes         = block_core_navigation_build_css_font_sizes( $attributes );
+		$is_responsive_menu = static::is_responsive( $attributes );
+
+		// Manually add block support text decoration as CSS class.
+		$text_decoration       = $attributes['style']['typography']['textDecoration'] ?? null;
+		$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
+
+		$classes = array_merge(
+			$colors['css_classes'],
+			$font_sizes['css_classes'],
+			$is_responsive_menu ? array( 'is-responsive' ) : array(),
+			$layout_class ? array( $layout_class ) : array(),
+			$text_decoration ? array( $text_decoration_class ) : array()
+		);
+		return implode( ' ', $classes );
+	}
+
+	/**
+	 * Get styles for the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return string Returns the styles for the navigation block.
+	 */
+	private static function get_styles( $attributes ) {
+		$colors       = block_core_navigation_build_css_colors( $attributes );
+		$font_sizes   = block_core_navigation_build_css_font_sizes( $attributes );
+		$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
+		return $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
+	}
+
+	/**
+	 * Get the responsive container markup
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes The block attributes.
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 * @param string        $inner_blocks_html The markup for the inner blocks.
+	 * @return string Returns the container markup.
+	 */
+	private static function get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html ) {
+		$is_interactive  = static::is_interactive( $attributes, $inner_blocks );
+		$colors          = block_core_navigation_build_css_colors( $attributes );
+		$modal_unique_id = wp_unique_id( 'modal-' );
+
+		$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+
+		$responsive_container_classes = array(
+			'wp-block-navigation__responsive-container',
+			$is_hidden_by_default ? 'hidden-by-default' : '',
+			implode( ' ', $colors['overlay_css_classes'] ),
+		);
+		$open_button_classes          = array(
+			'wp-block-navigation__responsive-container-open',
+			$is_hidden_by_default ? 'always-shown' : '',
+		);
+
+		$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
+		$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+		if ( isset( $attributes['icon'] ) ) {
+			if ( 'menu' === $attributes['icon'] ) {
+				$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
+			}
+		}
+		$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
+		$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
+		$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
+		$toggle_aria_label_open      = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
+		$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
+
+		// Add Interactivity API directives to the markup if needed.
+		$open_button_directives          = '';
+		$responsive_container_directives = '';
+		$responsive_dialog_directives    = '';
+		$close_button_directives         = '';
+		if ( $is_interactive ) {
+			$open_button_directives                  = '
+				data-wp-on-async--click="actions.openMenuOnClick"
+				data-wp-on--keydown="actions.handleMenuKeydown"
+			';
+			$responsive_container_directives         = '
+				data-wp-class--has-modal-open="state.isMenuOpen"
+				data-wp-class--is-menu-open="state.isMenuOpen"
+				data-wp-watch="callbacks.initMenu"
+				data-wp-on--keydown="actions.handleMenuKeydown"
+				data-wp-on-async--focusout="actions.handleMenuFocusout"
+				tabindex="-1"
+			';
+			$responsive_dialog_directives            = '
+				data-wp-bind--aria-modal="state.ariaModal"
+				data-wp-bind--aria-label="state.ariaLabel"
+				data-wp-bind--role="state.roleAttribute"
+			';
+			$close_button_directives                 = '
+				data-wp-on-async--click="actions.closeMenuOnClick"
+			';
+			$responsive_container_content_directives = '
+				data-wp-watch="callbacks.focusFirstElement"
+			';
+		}
+
+		$overlay_inline_styles = esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) );
+
+		return sprintf(
+			'<button aria-haspopup="dialog" %3$s class="%6$s" %10$s>%8$s</button>
+				<div class="%5$s" %7$s id="%1$s" %11$s>
+					<div class="wp-block-navigation__responsive-close" tabindex="-1">
+						<div class="wp-block-navigation__responsive-dialog" %12$s>
+							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
+							<div class="wp-block-navigation__responsive-container-content" %14$s id="%1$s-content">
+								%2$s
+							</div>
+						</div>
+					</div>
+				</div>',
+			esc_attr( $modal_unique_id ),
+			$inner_blocks_html,
+			$toggle_aria_label_open,
+			$toggle_aria_label_close,
+			esc_attr( implode( ' ', $responsive_container_classes ) ),
+			esc_attr( implode( ' ', $open_button_classes ) ),
+			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
+			$toggle_button_content,
+			$toggle_close_button_content,
+			$open_button_directives,
+			$responsive_container_directives,
+			$responsive_dialog_directives,
+			$close_button_directives,
+			$responsive_container_content_directives
+		);
+	}
+
+	/**
+	 * Get the wrapper attributes
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes    The block attributes.
+	 * @param WP_Block_List $inner_blocks  A list of inner blocks.
+	 * @return string Returns the navigation block markup.
+	 */
+	private static function get_nav_wrapper_attributes( $attributes, $inner_blocks ) {
+		$nav_menu_name      = static::get_unique_navigation_name( $attributes );
+		$is_interactive     = static::is_interactive( $attributes, $inner_blocks );
+		$is_responsive_menu = static::is_responsive( $attributes );
+		$style              = static::get_styles( $attributes );
+		$class              = static::get_classes( $attributes );
+		$extra_attributes   = array(
+			'class' => $class,
+			'style' => $style,
+		);
+		if ( ! empty( $nav_menu_name ) ) {
+			$extra_attributes['aria-label'] = $nav_menu_name;
+		}
+		$wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
+
+		if ( $is_responsive_menu ) {
+			$nav_element_directives = static::get_nav_element_directives( $is_interactive );
+			$wrapper_attributes    .= ' ' . $nav_element_directives;
+		}
+
+		return $wrapper_attributes;
+	}
+
+	/**
+	 * Gets the nav element directives.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param bool $is_interactive Whether the block is interactive.
+	 * @return string the directives for the navigation element.
+	 */
+	private static function get_nav_element_directives( $is_interactive ) {
+		if ( ! $is_interactive ) {
+			return '';
+		}
+		// When adding to this array be mindful of security concerns.
+		$nav_element_context    = wp_interactivity_data_wp_context(
+			array(
+				'overlayOpenedBy' => array(
+					'click' => false,
+					'hover' => false,
+					'focus' => false,
+				),
+				'type'            => 'overlay',
+				'roleAttribute'   => '',
+				'ariaLabel'       => __( 'Menu' ),
+			)
+		);
+		$nav_element_directives = '
+		 data-wp-interactive="core/navigation" '
+		. $nav_element_context;
+
+		return $nav_element_directives;
+	}
+
+	/**
+	 * Handle view script module loading.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes   The block attributes.
+	 * @param WP_Block      $block        The parsed block.
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 */
+	private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
+		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
+			wp_enqueue_script_module( '@wordpress/block-library/navigation/view' );
+		}
+	}
+
+	/**
+	 * Returns the markup for the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array         $attributes The block attributes.
+	 * @param WP_Block_List $inner_blocks The list of inner blocks.
+	 * @return string Returns the navigation wrapper markup.
+	 */
+	private static function get_wrapper_markup( $attributes, $inner_blocks ) {
+		$inner_blocks_html = static::get_inner_blocks_html( $attributes, $inner_blocks );
+		if ( static::is_responsive( $attributes ) ) {
+			return static::get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html );
+		}
+		return $inner_blocks_html;
+	}
+
+	/**
+	 * Returns a unique name for the navigation.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return string Returns a unique name for the navigation.
+	 */
+	private static function get_unique_navigation_name( $attributes ) {
+		$nav_menu_name = static::get_navigation_name( $attributes );
+
+		// If the menu name has been used previously then append an ID
+		// to the name to ensure uniqueness across a given post.
+		if ( isset( static::$seen_menu_names[ $nav_menu_name ] ) && static::$seen_menu_names[ $nav_menu_name ] > 1 ) {
+			$count         = static::$seen_menu_names[ $nav_menu_name ];
+			$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+		}
+
+		return $nav_menu_name;
+	}
+
+	/**
+	 * Renders the navigation block.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array    $attributes The block attributes.
+	 * @param string   $content    The saved content.
+	 * @param WP_Block $block      The parsed block.
+	 * @return string Returns the navigation block markup.
+	 */
+	public static function render( $attributes, $content, $block ) {
+		/**
+		 * Deprecated:
+		 * The rgbTextColor and rgbBackgroundColor attributes
+		 * have been deprecated in favor of
+		 * customTextColor and customBackgroundColor ones.
+		 * Move the values from old attrs to the new ones.
+		 */
+		if ( isset( $attributes['rgbTextColor'] ) && empty( $attributes['textColor'] ) ) {
+			$attributes['customTextColor'] = $attributes['rgbTextColor'];
+		}
+
+		if ( isset( $attributes['rgbBackgroundColor'] ) && empty( $attributes['backgroundColor'] ) ) {
+			$attributes['customBackgroundColor'] = $attributes['rgbBackgroundColor'];
+		}
+
+		unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
+
+		$inner_blocks = static::get_inner_blocks( $attributes, $block );
+		// Prevent navigation blocks referencing themselves from rendering.
+		if ( block_core_navigation_block_contains_core_navigation( $inner_blocks ) ) {
+			return '';
+		}
+
+		static::handle_view_script_module_loading( $attributes, $block, $inner_blocks );
+
+		return sprintf(
+			'<nav %1$s>%2$s</nav>',
+			static::get_nav_wrapper_attributes( $attributes, $inner_blocks ),
+			static::get_wrapper_markup( $attributes, $inner_blocks )
+		);
+	}
+}
+
 // These functions are used for the __unstableLocation feature and only active
 // when the gutenberg plugin is active.
 if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	/**
 	 * Returns the menu items for a WordPress menu location.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param string $location The menu location.
 	 * @return array Menu items for the location.
 	 */
@@ -47,6 +757,8 @@ function block_core_navigation_get_menu_items_at_location( $location ) {
 	 * Sorts a standard array of menu items into a nested structure keyed by the
 	 * id of the parent menu.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param array $menu_items Menu items to sort.
 	 * @return array An array keyed by the id of the parent menu where each element
 	 *               is an array of menu items that belong to that parent.
@@ -67,62 +779,94 @@ function block_core_navigation_sort_menu_items_by_parent_id( $menu_items ) {
 	}
 
 	/**
-	 * Turns menu item data into a nested array of parsed blocks
-	 *
-	 * @param array $menu_items               An array of menu items that represent
-	 *                                        an individual level of a menu.
-	 * @param array $menu_items_by_parent_id  An array keyed by the id of the
-	 *                                        parent menu where each element is an
-	 *                                        array of menu items that belong to
-	 *                                        that parent.
-	 * @return array An array of parsed block data.
+	 * Gets the inner blocks for the navigation block from the unstable location attribute.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param array $attributes The block attributes.
+	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
-	function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
+	function block_core_navigation_get_inner_blocks_from_unstable_location( $attributes ) {
+		$menu_items = block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] );
 		if ( empty( $menu_items ) ) {
-			return array();
-		}
-
-		$blocks = array();
-
-		foreach ( $menu_items as $menu_item ) {
-			$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
-			$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
-			$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
-			$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
-			$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
-
-			$block = array(
-				'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
-				'attrs'     => array(
-					'className'     => $class_name,
-					'description'   => $menu_item->description,
-					'id'            => $id,
-					'kind'          => $kind,
-					'label'         => $menu_item->title,
-					'opensInNewTab' => $opens_in_new_tab,
-					'rel'           => $rel,
-					'title'         => $menu_item->attr_title,
-					'type'          => $menu_item->object,
-					'url'           => $menu_item->url,
-				),
-			);
+			return new WP_Block_List( array(), $attributes );
+		}
 
-			$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-				? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
-				: array();
-			$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
+		$menu_items_by_parent_id = block_core_navigation_sort_menu_items_by_parent_id( $menu_items );
+		$parsed_blocks           = block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
+		return new WP_Block_List( $parsed_blocks, $attributes );
+	}
+}
 
-			$blocks[] = $block;
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list
+ * blocks markup using the Tag Processor.
+ *
+ * @since 6.3.0
+ *
+ * @param WP_HTML_Tag_Processor $tags             Markup of the navigation block.
+ * @param array                 $block_attributes Block attributes.
+ *
+ * @return string Submenu markup with the directives injected.
+ */
+function block_core_navigation_add_directives_to_submenu( $tags, $block_attributes ) {
+	while ( $tags->next_tag(
+		array(
+			'tag_name'   => 'LI',
+			'class_name' => 'has-child',
+		)
+	) ) {
+		// Add directives to the parent `<li>`.
+		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
+		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null }' );
+		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
+		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
+		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
+
+		// This is a fix for Safari. Without it, Safari doesn't change the active
+		// element when the user clicks on a button. It can be removed once we add
+		// an overlay to capture the clicks, instead of relying on the focusout
+		// event.
+		$tags->set_attribute( 'tabindex', '-1' );
+
+		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
+			$tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
+		}
+
+		// Add directives to the toggle submenu button.
+		if ( $tags->next_tag(
+			array(
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
+			)
+		) ) {
+			$tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
+			// The `aria-expanded` attribute for SSR is already added in the submenu block.
+		}
+		// Add directives to the submenu.
+		if ( $tags->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		) ) {
+			$tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' );
 		}
 
-		return $blocks;
+		// Iterate through subitems if exist.
+		block_core_navigation_add_directives_to_submenu( $tags, $block_attributes );
 	}
+	return $tags->get_updated_html();
 }
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes Navigation block attributes.
  *
  * @return array Colors CSS classes and inline styles.
@@ -214,6 +958,8 @@ function block_core_navigation_build_css_colors( $attributes ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the navigation markup in the front-end.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes Navigation block attributes.
  *
  * @return array Font size CSS classes and inline styles.
@@ -242,144 +988,29 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
+ * @since 5.9.0
+ *
  * @return string
  */
 function block_core_navigation_render_submenu_icon() {
 	return '<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>';
 }
 
-/**
- * Get the classic navigation menu to use as a fallback.
- *
- * @return object WP_Term The classic navigation.
- */
-function block_core_navigation_get_classic_menu_fallback() {
-	$classic_nav_menus = wp_get_nav_menus();
-
-	// If menus exist.
-	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) && count( $classic_nav_menus ) === 1 ) {
-		// Use the first classic menu only. Handles simple use case where user has a single
-		// classic menu and switches to a block theme. In future this maybe expanded to
-		// determine the most appropriate classic menu to be used based on location.
-		return $classic_nav_menus[0];
-	}
-}
-
-/**
- * Converts a classic navigation to blocks.
- *
- * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
-	// BEGIN: Code that already exists in wp_nav_menu().
-	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
-
-	// Set up the $menu_item variables.
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-
-	unset( $menu_items, $menu_item );
-
-	// END: Code that already exists in wp_nav_menu().
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
-		isset( $menu_items_by_parent_id[0] )
-			? $menu_items_by_parent_id[0]
-			: array(),
-		$menu_items_by_parent_id
-	);
-
-	return serialize_blocks( $inner_blocks );
-}
-
-/**
- * If there's a the classic menu then use it as a fallback.
- *
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_maybe_use_classic_menu_fallback() {
-	// See if we have a classic menu.
-	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
-
-	if ( ! $classic_nav_menu ) {
-		return;
-	}
-
-	// If we have a classic menu then convert it to blocks.
-	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
-
-	if ( empty( $classic_nav_menu_blocks ) ) {
-		return;
-	}
-
-	// Create a new navigation menu from the classic menu.
-	$wp_insert_post_result = wp_insert_post(
-		array(
-			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->slug,
-			'post_name'    => $classic_nav_menu->slug,
-			'post_status'  => 'publish',
-			'post_type'    => 'wp_navigation',
-		),
-		true // So that we can check whether the result is an error.
-	);
-
-	if ( is_wp_error( $wp_insert_post_result ) ) {
-		return;
-	}
-
-	// Fetch the most recently published navigation which will be the classic one created above.
-	return block_core_navigation_get_most_recently_published_navigation();
-}
-
-/**
- * Finds the most recently published `wp_navigation` Post.
- *
- * @return WP_Post|null the first non-empty Navigation or null.
- */
-function block_core_navigation_get_most_recently_published_navigation() {
-
-	// Default to the most recently created menu.
-	$parsed_args = array(
-		'post_type'      => 'wp_navigation',
-		'no_found_rows'  => true,
-		'order'          => 'DESC',
-		'orderby'        => 'date',
-		'post_status'    => 'publish',
-		'posts_per_page' => 1, // get only the most recent.
-	);
-
-	$navigation_post = new WP_Query( $parsed_args );
-	if ( count( $navigation_post->posts ) > 0 ) {
-		return $navigation_post->posts[0];
-	}
-
-	return null;
-}
-
 /**
  * Filter out empty "null" blocks from the block list.
  * 'parse_blocks' includes a null block with '\n\n' as the content when
  * it encounters whitespace. This is not a bug but rather how the parser
  * is designed.
  *
+ * @since 5.9.0
+ *
  * @param array $parsed_blocks the parsed blocks to be normalized.
  * @return array the normalized parsed blocks.
  */
 function block_core_navigation_filter_out_empty_blocks( $parsed_blocks ) {
 	$filtered = array_filter(
 		$parsed_blocks,
-		function( $block ) {
+		static function ( $block ) {
 			return isset( $block['blockName'] );
 		}
 	);
@@ -388,6 +1019,27 @@ function( $block ) {
 	return array_values( $filtered );
 }
 
+/**
+ * Returns true if the navigation block contains a nested navigation block.
+ *
+ * @since 6.2.0
+ *
+ * @param WP_Block_List $inner_blocks Inner block instance to be normalized.
+ * @return bool true if the navigation block contains a nested navigation block.
+ */
+function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
+	foreach ( $inner_blocks as $block ) {
+		if ( 'core/navigation' === $block->name ) {
+			return true;
+		}
+		if ( $block->inner_blocks && block_core_navigation_block_contains_core_navigation( $block->inner_blocks ) ) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -395,12 +1047,16 @@ function( $block ) {
  * This aims to mirror how the fallback mechanic for wp_nav_menu works.
  * See https://developer.wordpress.org/reference/functions/wp_nav_menu/#more-information.
  *
+ * @since 5.9.0
+ *
  * @return array the array of blocks to be used as a fallback.
  */
 function block_core_navigation_get_fallback_blocks() {
 	$page_list_fallback = array(
 		array(
-			'blockName' => 'core/page-list',
+			'blockName'    => 'core/page-list',
+			'innerContent' => array(),
+			'attrs'        => array(),
 		),
 	);
 
@@ -408,24 +1064,25 @@ function block_core_navigation_get_fallback_blocks() {
 
 	// If `core/page-list` is not registered then return empty blocks.
 	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
-
-	// Default to a list of Pages.
-
-	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
-
-	// If there are no navigation posts then try to find a classic menu
-	// and convert it into a block based navigation menu.
-	if ( ! $navigation_post ) {
-		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
-	}
+	$navigation_post = WP_Navigation_Fallback::get_fallback();
 
 	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
-		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( parse_blocks( $navigation_post->post_content ) );
+		$parsed_blocks  = parse_blocks( $navigation_post->post_content );
+		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
 
 		// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
 		// In this case default to the (Page List) fallback.
 		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
+
+		// Run Block Hooks algorithm to inject hooked blocks.
+		// We have to run it here because we need the post ID of the Navigation block to track ignored hooked blocks.
+		$markup = block_core_navigation_insert_hooked_blocks( $fallback_blocks, $navigation_post );
+		$blocks = parse_blocks( $markup );
+
+		if ( isset( $blocks[0]['innerBlocks'] ) ) {
+			$fallback_blocks = $blocks[0]['innerBlocks'];
+		}
 	}
 
 	/**
@@ -437,7 +1094,7 @@ function block_core_navigation_get_fallback_blocks() {
 	 *
 	 * @since 5.9.0
 	 *
-	 * @param array[] default fallback blocks provided by the default block mechanic.
+	 * @param array[] $fallback_blocks default fallback blocks provided by the default block mechanic.
 	 */
 	return apply_filters( 'block_core_navigation_render_fallback', $fallback_blocks );
 }
@@ -445,6 +1102,8 @@ function block_core_navigation_get_fallback_blocks() {
 /**
  * Iterate through all inner blocks recursively and get navigation link block's post IDs.
  *
+ * @since 6.0.0
+ *
  * @param WP_Block_List $inner_blocks Block list class instance.
  *
  * @return array Array of post IDs.
@@ -455,357 +1114,383 @@ function block_core_navigation_get_post_ids( $inner_blocks ) {
 }
 
 /**
- * Get post IDs from a navigation link block instance.
+ * Get post IDs from a navigation link block instance.
+ *
+ * @since 6.0.0
+ *
+ * @param WP_Block $block Instance of a block.
+ *
+ * @return array Array of post IDs.
+ */
+function block_core_navigation_from_block_get_post_ids( $block ) {
+	$post_ids = array();
+
+	if ( $block->inner_blocks ) {
+		$post_ids = block_core_navigation_get_post_ids( $block->inner_blocks );
+	}
+
+	if ( 'core/navigation-link' === $block->name || 'core/navigation-submenu' === $block->name ) {
+		if ( $block->attributes && isset( $block->attributes['kind'] ) && 'post-type' === $block->attributes['kind'] && isset( $block->attributes['id'] ) ) {
+			$post_ids[] = $block->attributes['id'];
+		}
+	}
+
+	return $post_ids;
+}
+
+/**
+ * Renders the `core/navigation` block on server.
+ *
+ * @since 5.9.0
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
+ *
+ * @return string Returns the navigation block markup.
+ */
+function render_block_core_navigation( $attributes, $content, $block ) {
+	return WP_Navigation_Block_Renderer::render( $attributes, $content, $block );
+}
+
+/**
+ * Register the navigation block.
+ *
+ * @since 5.9.0
+ *
+ * @uses render_block_core_navigation()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
+ */
+function register_block_core_navigation() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation',
+		array(
+			'render_callback' => 'render_block_core_navigation',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_navigation' );
+
+/**
+ * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.
  *
- * @param WP_Block $block Instance of a block.
+ * @since 5.9.0
  *
- * @return array Array of post IDs.
+ * @param array $parsed_block The block being rendered.
+ *
+ * @return array The block being rendered without typographic presets.
  */
-function block_core_navigation_from_block_get_post_ids( $block ) {
-	$post_ids = array();
-
-	if ( $block->inner_blocks ) {
-		$post_ids = block_core_navigation_get_post_ids( $block->inner_blocks );
-	}
-
-	if ( 'core/navigation-link' === $block->name || 'core/navigation-submenu' === $block->name ) {
-		if ( $block->attributes && isset( $block->attributes['kind'] ) && 'post-type' === $block->attributes['kind'] && isset( $block->attributes['id'] ) ) {
-			$post_ids[] = $block->attributes['id'];
+function block_core_navigation_typographic_presets_backcompatibility( $parsed_block ) {
+	if ( 'core/navigation' === $parsed_block['blockName'] ) {
+		$attribute_to_prefix_map = array(
+			'fontStyle'      => 'var:preset|font-style|',
+			'fontWeight'     => 'var:preset|font-weight|',
+			'textDecoration' => 'var:preset|text-decoration|',
+			'textTransform'  => 'var:preset|text-transform|',
+		);
+		foreach ( $attribute_to_prefix_map as $style_attribute => $prefix ) {
+			if ( ! empty( $parsed_block['attrs']['style']['typography'][ $style_attribute ] ) ) {
+				$prefix_len      = strlen( $prefix );
+				$attribute_value = &$parsed_block['attrs']['style']['typography'][ $style_attribute ];
+				if ( 0 === strncmp( $attribute_value, $prefix, $prefix_len ) ) {
+					$attribute_value = substr( $attribute_value, $prefix_len );
+				}
+				if ( 'textDecoration' === $style_attribute && 'strikethrough' === $attribute_value ) {
+					$attribute_value = 'line-through';
+				}
+			}
 		}
 	}
 
-	return $post_ids;
+	return $parsed_block;
 }
 
+add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
 /**
- * Renders the `core/navigation` block on server.
+ * Turns menu item data into a nested array of parsed blocks
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The saved content.
- * @param WP_Block $block      The parsed block.
+ * @since 5.9.0
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::parse_blocks_from_menu_items() instead.
  *
- * @return string Returns the post content with the legacy widget added.
+ * @param array $menu_items               An array of menu items that represent
+ *                                        an individual level of a menu.
+ * @param array $menu_items_by_parent_id  An array keyed by the id of the
+ *                                        parent menu where each element is an
+ *                                        array of menu items that belong to
+ *                                        that parent.
+ * @return array An array of parsed block data.
  */
-function render_block_core_navigation( $attributes, $content, $block ) {
-
-	static $seen_menu_names = array();
+function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
 
-	// Flag used to indicate whether the rendered output is considered to be
-	// a fallback (i.e. the block has no menu associated with it).
-	$is_fallback = false;
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::parse_blocks_from_menu_items' );
 
-	$nav_menu_name = '';
-
-	/**
-	 * Deprecated:
-	 * The rgbTextColor and rgbBackgroundColor attributes
-	 * have been deprecated in favor of
-	 * customTextColor and customBackgroundColor ones.
-	 * Move the values from old attrs to the new ones.
-	 */
-	if ( isset( $attributes['rgbTextColor'] ) && empty( $attributes['textColor'] ) ) {
-		$attributes['customTextColor'] = $attributes['rgbTextColor'];
+	if ( empty( $menu_items ) ) {
+		return array();
 	}
 
-	if ( isset( $attributes['rgbBackgroundColor'] ) && empty( $attributes['backgroundColor'] ) ) {
-		$attributes['customBackgroundColor'] = $attributes['rgbBackgroundColor'];
-	}
+	$blocks = array();
+
+	foreach ( $menu_items as $menu_item ) {
+		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
+		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
+		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
+		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
+		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
+
+		$block = array(
+			'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
+			'attrs'     => array(
+				'className'     => $class_name,
+				'description'   => $menu_item->description,
+				'id'            => $id,
+				'kind'          => $kind,
+				'label'         => $menu_item->title,
+				'opensInNewTab' => $opens_in_new_tab,
+				'rel'           => $rel,
+				'title'         => $menu_item->attr_title,
+				'type'          => $menu_item->object,
+				'url'           => $menu_item->url,
+			),
+		);
 
-	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
+		$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
+			? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
+			: array();
+		$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
 
-	/**
-	 * This is for backwards compatibility after `isResponsive` attribute has been removed.
-	 */
-	$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
-	$is_responsive_menu           = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
-	$should_load_view_script      = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
-	if ( $should_load_view_script ) {
-		wp_enqueue_script( 'wp-block-navigation-view' );
+		$blocks[] = $block;
 	}
 
-	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
-	if ( $should_load_modal_view_script ) {
-		wp_enqueue_script( 'wp-block-navigation-view-modal' );
-	}
+	return $blocks;
+}
 
-	$inner_blocks = $block->inner_blocks;
+/**
+ * Get the classic navigation menu to use as a fallback.
+ *
+ * @since 6.2.0
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_classic_menu_fallback() instead.
+ *
+ * @return object WP_Term The classic navigation.
+ */
+function block_core_navigation_get_classic_menu_fallback() {
 
-	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.
-	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
-		$attributes['ref'] = $attributes['navigationMenuId'];
-	}
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_classic_menu_fallback' );
 
-	// If:
-	// - the gutenberg plugin is active
-	// - `__unstableLocation` is defined
-	// - we have menu items at the defined location
-	// - we don't have a relationship to a `wp_navigation` Post (via `ref`).
-	// ...then create inner blocks from the classic menu assigned to that location.
-	if (
-		defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&
-		array_key_exists( '__unstableLocation', $attributes ) &&
-		! array_key_exists( 'ref', $attributes ) &&
-		! empty( block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] ) )
-	) {
-		$menu_items = block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] );
-		if ( empty( $menu_items ) ) {
-			return '';
-		}
+	$classic_nav_menus = wp_get_nav_menus();
 
-		$menu_items_by_parent_id = block_core_navigation_sort_menu_items_by_parent_id( $menu_items );
-		$parsed_blocks           = block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
-		$inner_blocks            = new WP_Block_List( $parsed_blocks, $attributes );
-	}
+	// If menus exist.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
+		// Handles simple use case where user has a classic menu and switches to a block theme.
 
-	// Load inner blocks from the navigation post.
-	if ( array_key_exists( 'ref', $attributes ) ) {
-		$navigation_post = get_post( $attributes['ref'] );
-		if ( ! isset( $navigation_post ) ) {
-			return '';
+		// Returns the menu assigned to location `primary`.
+		$locations = get_nav_menu_locations();
+		if ( isset( $locations['primary'] ) ) {
+			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
+			if ( $primary_menu ) {
+				return $primary_menu;
+			}
 		}
 
-		// Only published posts are valid. If this is changed then a corresponding change
-		// must also be implemented in `use-navigation-menu.js`.
-		if ( 'publish' === $navigation_post->post_status ) {
-			$nav_menu_name = $navigation_post->post_title;
-
-			if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
-				++$seen_menu_names[ $nav_menu_name ];
-			} else {
-				$seen_menu_names[ $nav_menu_name ] = 1;
+		// Returns a menu if `primary` is its slug.
+		foreach ( $classic_nav_menus as $classic_nav_menu ) {
+			if ( 'primary' === $classic_nav_menu->slug ) {
+				return $classic_nav_menu;
 			}
-
-			$parsed_blocks = parse_blocks( $navigation_post->post_content );
-
-			// 'parse_blocks' includes a null block with '\n\n' as the content when
-			// it encounters whitespace. This code strips it.
-			$compacted_blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
-
-			// TODO - this uses the full navigation block attributes for the
-			// context which could be refined.
-			$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 		}
+
+		// Otherwise return the most recently created classic menu.
+		usort(
+			$classic_nav_menus,
+			static function ( $a, $b ) {
+				return $b->term_id - $a->term_id;
+			}
+		);
+		return $classic_nav_menus[0];
 	}
+}
+
+/**
+ * Converts a classic navigation to blocks.
+ *
+ * @since 6.2.0
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_classic_menu_fallback_blocks() instead.
+ *
+ * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
 
-	// If there are no inner blocks then fallback to rendering an appropriate fallback.
-	if ( empty( $inner_blocks ) ) {
-		$is_fallback = true; // indicate we are rendering the fallback.
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_classic_menu_fallback_blocks' );
 
-		$fallback_blocks = block_core_navigation_get_fallback_blocks();
+	// BEGIN: Code that already exists in wp_nav_menu().
+	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
 
-		// Fallback my have been filtered so do basic test for validity.
-		if ( empty( $fallback_blocks ) || ! is_array( $fallback_blocks ) ) {
-			return '';
-		}
+	// Set up the $menu_item variables.
+	_wp_menu_item_classes_by_context( $menu_items );
 
-		$inner_blocks = new WP_Block_List( $fallback_blocks, $attributes );
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
 	}
 
-	/**
-	 * Filter navigation block $inner_blocks.
-	 * Allows modification of a navigation block menu items.
-	 *
-	 * @since 6.1.0
-	 *
-	 * @param \WP_Block_List $inner_blocks
-	 */
-	$inner_blocks = apply_filters( 'block_core_navigation_render_inner_blocks', $inner_blocks );
+	unset( $menu_items, $menu_item );
 
-	$layout_justification = array(
-		'left'          => 'items-justified-left',
-		'right'         => 'items-justified-right',
-		'center'        => 'items-justified-center',
-		'space-between' => 'items-justified-space-between',
-	);
+	// END: Code that already exists in wp_nav_menu().
 
-	// Restore legacy classnames for submenu positioning.
-	$layout_class = '';
-	if ( isset( $attributes['layout']['justifyContent'] ) ) {
-		$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
-	}
-	if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
-		$layout_class .= ' is-vertical';
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
 	}
 
-	if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
-		$layout_class .= ' no-wrap';
-	}
+	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
+		isset( $menu_items_by_parent_id[0] )
+			? $menu_items_by_parent_id[0]
+			: array(),
+		$menu_items_by_parent_id
+	);
 
-	// Manually add block support text decoration as CSS class.
-	$text_decoration       = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );
-	$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
+	return serialize_blocks( $inner_blocks );
+}
 
-	$colors     = block_core_navigation_build_css_colors( $attributes );
-	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
-	$classes    = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes'],
-		$is_responsive_menu ? array( 'is-responsive' ) : array(),
-		$layout_class ? array( $layout_class ) : array(),
-		$is_fallback ? array( 'is-fallback' ) : array(),
-		$text_decoration ? array( $text_decoration_class ) : array()
-	);
+/**
+ * If there's a classic menu then use it as a fallback.
+ *
+ * @since 6.2.0
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::create_classic_menu_fallback() instead.
+ *
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_maybe_use_classic_menu_fallback() {
 
-	$post_ids = block_core_navigation_get_post_ids( $inner_blocks );
-	if ( $post_ids ) {
-		_prime_post_caches( $post_ids, false, false );
-	}
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::create_classic_menu_fallback' );
 
-	$inner_blocks_html = '';
-	$is_list_open      = false;
-	foreach ( $inner_blocks as $inner_block ) {
-		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) {
-			$is_list_open       = true;
-			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
-		}
-		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && 'core/site-title' !== $inner_block->name && 'core/site-logo' !== $inner_block->name && 'core/navigation-submenu' !== $inner_block->name && $is_list_open ) {
-			$is_list_open       = false;
-			$inner_blocks_html .= '</ul>';
-		}
-		$inner_block_content = $inner_block->render();
-		if ( 'core/site-title' === $inner_block->name || ( 'core/site-logo' === $inner_block->name && $inner_block_content ) ) {
-			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
-		} else {
-			$inner_blocks_html .= $inner_block_content;
-		}
-	}
+	// See if we have a classic menu.
+	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
 
-	if ( $is_list_open ) {
-		$inner_blocks_html .= '</ul>';
+	if ( ! $classic_nav_menu ) {
+		return;
 	}
 
-	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
+	// If we have a classic menu then convert it to blocks.
+	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
 
-	// If the menu name has been used previously then append an ID
-	// to the name to ensure uniqueness across a given post.
-	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
-		$count         = $seen_menu_names[ $nav_menu_name ];
-		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+	if ( empty( $classic_nav_menu_blocks ) ) {
+		return;
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes(
+	// Create a new navigation menu from the classic menu.
+	$wp_insert_post_result = wp_insert_post(
 		array(
-			'class'      => implode( ' ', $classes ),
-			'style'      => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
-			'aria-label' => $nav_menu_name,
-		)
+			'post_content' => $classic_nav_menu_blocks,
+			'post_title'   => $classic_nav_menu->name,
+			'post_name'    => $classic_nav_menu->slug,
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
 	);
 
-	$modal_unique_id = wp_unique_id( 'modal-' );
-
-	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
-	// return early if they don't.
-	if ( ! $is_responsive_menu ) {
-		return sprintf(
-			'<nav %1$s>%2$s</nav>',
-			$wrapper_attributes,
-			$inner_blocks_html
-		);
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
 	}
 
-	$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
+	// Fetch the most recently published navigation which will be the classic one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
 
-	$responsive_container_classes = array(
-		'wp-block-navigation__responsive-container',
-		$is_hidden_by_default ? 'hidden-by-default' : '',
-		implode( ' ', $colors['overlay_css_classes'] ),
-	);
-	$open_button_classes          = array(
-		'wp-block-navigation__responsive-container-open',
-		$is_hidden_by_default ? 'always-shown' : '',
-	);
+/**
+ * Finds the most recently published `wp_navigation` Post.
+ *
+ * @since 6.1.0
+ *
+ * @deprecated 6.3.0 Use WP_Navigation_Fallback::get_most_recently_published_navigation() instead.
+ *
+ * @return WP_Post|null the first non-empty Navigation or null.
+ */
+function block_core_navigation_get_most_recently_published_navigation() {
 
-	$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
-	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
-	if ( isset( $attributes['icon'] ) ) {
-		if ( 'menu' === $attributes['icon'] ) {
-			$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
-		}
-	}
-	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
-	$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><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"></path></svg>';
-	$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
-	$toggle_aria_label_open      = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
-	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
-
-	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="%1$s">
-				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
-					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
-							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
-						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
-							%2$s
-						</div>
-					</div>
-				</div>
-			</div>',
-		esc_attr( $modal_unique_id ),
-		$inner_blocks_html,
-		$toggle_aria_label_open,
-		$toggle_aria_label_close,
-		esc_attr( implode( ' ', $responsive_container_classes ) ),
-		esc_attr( implode( ' ', $open_button_classes ) ),
-		esc_attr( safecss_filter_attr( $colors['overlay_inline_styles'] ) ),
-		__( 'Menu' ),
-		$toggle_button_content,
-		$toggle_close_button_content
-	);
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback::get_most_recently_published_navigation' );
 
-	return sprintf(
-		'<nav %1$s>%2$s</nav>',
-		$wrapper_attributes,
-		$responsive_container_markup
+	// Default to the most recently created menu.
+	$parsed_args = array(
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
 	);
+
+	$navigation_post = new WP_Query( $parsed_args );
+	if ( count( $navigation_post->posts ) > 0 ) {
+		return $navigation_post->posts[0];
+	}
+
+	return null;
 }
 
 /**
- * Register the navigation block.
+ * Mock a parsed block for the Navigation block given its inner blocks and the `wp_navigation` post object.
+ * The `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is queried to add the `metadata.ignoredHookedBlocks` attribute.
  *
- * @uses render_block_core_navigation()
- * @throws WP_Error An WP_Error exception parsing the block definition.
+ * @since 6.5.0
+ *
+ * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
+ * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
+ *
+ * @return array the normalized parsed blocks.
  */
-function register_block_core_navigation() {
-	register_block_type_from_metadata(
-		__DIR__ . '/navigation',
-		array(
-			'render_callback' => 'render_block_core_navigation',
-		)
+function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) {
+	$attributes = array();
+
+	if ( isset( $post->ID ) ) {
+		$ignored_hooked_blocks = get_post_meta( $post->ID, '_wp_ignored_hooked_blocks', true );
+		if ( ! empty( $ignored_hooked_blocks ) ) {
+			$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
+			$attributes['metadata'] = array(
+				'ignoredHookedBlocks' => $ignored_hooked_blocks,
+			);
+		}
+	}
+
+	$mock_anchor_parent_block = array(
+		'blockName'    => 'core/navigation',
+		'attrs'        => $attributes,
+		'innerBlocks'  => $inner_blocks,
+		'innerContent' => array_fill( 0, count( $inner_blocks ), null ),
 	);
-}
 
-add_action( 'init', 'register_block_core_navigation' );
+	return $mock_anchor_parent_block;
+}
 
 /**
- * Filter that changes the parsed attribute values of navigation blocks contain typographic presets to contain the values directly.
+ * Insert hooked blocks into a Navigation block.
  *
- * @param array $parsed_block The block being rendered.
+ * Given a Navigation block's inner blocks and its corresponding `wp_navigation` post object,
+ * this function inserts hooked blocks into it, and returns the serialized inner blocks in a
+ * mock Navigation block wrapper.
  *
- * @return array The block being rendered without typographic presets.
+ * If there are any hooked blocks that need to be inserted as the Navigation block's first or last
+ * children, the `wp_navigation` post's `_wp_ignored_hooked_blocks` meta is checked to see if any
+ * of those hooked blocks should be exempted from insertion.
+ *
+ * @since 6.5.0
+ *
+ * @param array   $inner_blocks Parsed inner blocks of a Navigation block.
+ * @param WP_Post $post         `wp_navigation` post object corresponding to the block.
+ * @return string Serialized inner blocks in mock Navigation block wrapper, with hooked blocks inserted, if any.
  */
-function block_core_navigation_typographic_presets_backcompatibility( $parsed_block ) {
-	if ( 'core/navigation' === $parsed_block['blockName'] ) {
-		$attribute_to_prefix_map = array(
-			'fontStyle'      => 'var:preset|font-style|',
-			'fontWeight'     => 'var:preset|font-weight|',
-			'textDecoration' => 'var:preset|text-decoration|',
-			'textTransform'  => 'var:preset|text-transform|',
-		);
-		foreach ( $attribute_to_prefix_map as $style_attribute => $prefix ) {
-			if ( ! empty( $parsed_block['attrs']['style']['typography'][ $style_attribute ] ) ) {
-				$prefix_len      = strlen( $prefix );
-				$attribute_value = &$parsed_block['attrs']['style']['typography'][ $style_attribute ];
-				if ( 0 === strncmp( $attribute_value, $prefix, $prefix_len ) ) {
-					$attribute_value = substr( $attribute_value, $prefix_len );
-				}
-				if ( 'textDecoration' === $style_attribute && 'strikethrough' === $attribute_value ) {
-					$attribute_value = 'line-through';
-				}
-			}
-		}
-	}
+function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
+	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
 
-	return $parsed_block;
+	$mock_navigation_block_markup = serialize_block( $mock_navigation_block );
+	return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' );
 }
-
-add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
diff --git a/packages/block-library/src/navigation/menu-items-to-blocks.js b/packages/block-library/src/navigation/menu-items-to-blocks.js
index 2ffc374978157d..00bd4dbbe2a98a 100644
--- a/packages/block-library/src/navigation/menu-items-to-blocks.js
+++ b/packages/block-library/src/navigation/menu-items-to-blocks.js
@@ -97,8 +97,6 @@ function mapMenuItemsToBlocks( menuItems, level = 0 ) {
  * For more documentation on the individual fields present on a menu item please see:
  * https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L789
  *
- * Changes made here should also be mirrored in packages/edit-navigation/src/store/utils.js.
- *
  * @typedef WPNavMenuItem
  *
  * @property {Object} title       stores the raw and rendered versions of the title/label for this menu item.
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 59622a7039f491..5f49eba466a5fd 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -31,6 +31,7 @@ $navigation-icon-size: 24px;
 
 	// Menu item container.
 	.wp-block-navigation-item {
+		background-color: inherit;
 		display: flex;
 		align-items: center;
 		position: relative;
@@ -75,15 +76,10 @@ $navigation-icon-size: 24px;
 		}
 	}
 
-	&:where(:not([class*="has-text-decoration"])) {
-		a {
-			text-decoration: none;
-
-			&:focus,
-			&:active {
-				text-decoration: none;
-			}
-		}
+	& :where(a),
+	& :where(a:focus),
+	& :where(a:active) {
+		text-decoration: none;
 	}
 
 	// Submenu indicator.
@@ -299,6 +295,7 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	letter-spacing: inherit;
 	line-height: inherit;
 	font-style: inherit;
 	font-weight: inherit;
@@ -316,7 +313,9 @@ button.wp-block-navigation-item__content {
 // When set to open on click, a button element is used.
 // We pad it to include the arrow icon in the clickable area.
 // The padding can be blanket for click, since you can't set click and hide the icon.
+// This is only applied to the submenu in the page list block.
 .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+	padding-left: 0; // Remove the browser default padding.
 	padding-right: 0.6em + 0.25em; // Same size as icon plus margin.
 
 	+ .wp-block-navigation__submenu-icon {
@@ -324,7 +323,10 @@ button.wp-block-navigation-item__content {
 		pointer-events: none; // Make the icon inert to allow click on the button.
 	}
 }
-
+// Remove the browser default padding on the button element used in the navigation link submenu.
+.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
+	padding: 0;
+}
 
 /**
  * Margins
@@ -398,15 +400,26 @@ button.wp-block-navigation-item__content {
 }
 
 // Default background and font color.
-.wp-block-navigation:not(.has-background) {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
+	// Set a background color for submenus so that they're not transparent.
+	// NOTE TO DEVS - if refactoring this code, please double-check that
+	// submenus have a default background color, this feature has regressed
+	// several times, so care needs to be taken.
+	background-color: #fff;
+	border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+// If we do have a background color selected, inherit it from the navigation block
+.wp-block-navigation.has-background {
 	.wp-block-navigation__submenu-container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: #fff;
+		background-color: inherit;
+	}
+}
+
+.wp-block-navigation:not(.has-text-color) {
+	.wp-block-navigation__submenu-container {
+		// Set a default color for submenu text if none is selected
 		color: #000;
-		border: 1px solid rgba(0, 0, 0, 0.15);
 	}
 }
 
@@ -458,7 +471,8 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
-	.wp-block-navigation-link a {
+	// Low specificity so that themes can override.
+	& :where(.wp-block-navigation-item a) {
 		color: inherit;
 	}
 
@@ -493,10 +507,10 @@ button.wp-block-navigation-item__content {
 		@include reduce-motion("animation");
 
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
-		padding-top: var(--wp--style--root--padding-top, 2rem);
-		padding-right: var(--wp--style--root--padding-right, 2rem);
-		padding-bottom: var(--wp--style--root--padding-bottom, 2rem);
-		padding-left: var(--wp--style--root--padding-left, 2rem);
+		padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+		padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+		padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+		padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 
 		// Allow modal to scroll.
 		overflow: auto;
@@ -533,7 +547,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;
@@ -580,6 +593,7 @@ button.wp-block-navigation-item__content {
 		// Remove background colors for items inside the overlay menu.
 		// Has to be !important to override global styles.
 		.wp-block-navigation-item .wp-block-navigation__submenu-container,
+		.wp-block-navigation__container,
 		.wp-block-navigation-item,
 		.wp-block-page-list {
 			color: inherit !important;
@@ -621,9 +635,14 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: #fff;
+}
+
+.wp-block-navigation:not(.has-text-color)
+.wp-block-navigation__responsive-container.is-menu-open {
 	color: #000;
 }
 
+
 // Overlay menu toggle button label
 .wp-block-navigation__toggle_button_label {
 	font-size: 1rem;
@@ -690,10 +709,12 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-close {
 	width: 100%;
 
-	// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
-	max-width: var(--wp--style--global--wide-size, 100%);
-	margin-left: auto;
-	margin-right: auto;
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
 
 	// This element is not keyboard accessible, and is focusable only using the mouse.
 	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,
diff --git a/packages/block-library/src/navigation/test/use-navigation-menu.js b/packages/block-library/src/navigation/test/use-navigation-menu.js
index b03776b663eaf8..7eaf648fab936e 100644
--- a/packages/block-library/src/navigation/test/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/test/use-navigation-menu.js
@@ -9,6 +9,12 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useNavigationMenu from '../use-navigation-menu';
 
+const BASE_ENTITY = {
+	kind: 'postType',
+	name: 'wp_navigation',
+	id: undefined,
+};
+
 function createRegistryWithStores() {
 	// Create a registry and register used stores.
 	const registry = createRegistry();
@@ -36,52 +42,97 @@ function resolveRecords( registry, menus ) {
 	dispatch.startResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.finishResolution( 'getEntityRecords', [
 		'postType',
 		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
+		{
+			per_page: 100,
+			status: [ 'publish', 'draft' ],
+			order: 'desc',
+			orderby: 'date',
+		},
 	] );
 	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
-		per_page: -1,
+		per_page: 100,
 		status: [ 'publish', 'draft' ],
+		order: 'desc',
+		orderby: 'date',
 	} );
 }
 
 function resolveReadPermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'read', 'navigation' ] );
-	dispatch.finishResolution( 'canUser', [ 'read', 'navigation' ] );
+	dispatch.receiveUserPermission( 'read/postType/wp_navigation', allowed );
+	dispatch.startResolution( 'canUser', [ 'read', BASE_ENTITY ] );
+	dispatch.finishResolution( 'canUser', [ 'read', BASE_ENTITY ] );
 }
 
 function resolveReadRecordPermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'read', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'read', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`read/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'read',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'read',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 function resolveCreatePermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'create', 'navigation' ] );
-	dispatch.finishResolution( 'canUser', [ 'create', 'navigation' ] );
+	dispatch.receiveUserPermission( 'create/postType/wp_navigation', allowed );
+	dispatch.startResolution( 'canUser', [
+		'create',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'create',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
 }
 
 function resolveUpdatePermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( `update/navigation/${ ref }`, allowed );
-	dispatch.startResolution( 'canUser', [ 'update', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'update', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`update/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'update',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'update',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 function resolveDeletePermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( `delete/navigation/${ ref }`, allowed );
-	dispatch.startResolution( 'canUser', [ 'delete', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`delete/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'delete',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'delete',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 describe( 'useNavigationMenus', () => {
@@ -105,16 +156,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenus: null,
 			navigationMenu: undefined,
 			canSwitchNavigationMenu: false,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: undefined,
 			canUserUpdateNavigationMenu: undefined,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: undefined,
 			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: false,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -127,16 +178,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenus,
 			navigationMenu: undefined,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: true,
+			canUserCreateNavigationMenus: true,
 			canUserDeleteNavigationMenu: undefined,
 			canUserUpdateNavigationMenu: undefined,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: undefined,
 			hasResolvedCanUserUpdateNavigationMenu: undefined,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: true,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -147,16 +198,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -169,16 +220,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenuDraft,
 			navigationMenus: testMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -193,16 +244,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: true,
+			canUserCreateNavigationMenus: true,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: true,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -217,16 +268,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: navigationMenu1,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: true,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenus: true,
 			hasResolvedCanUserDeleteNavigationMenu: true,
 			hasResolvedCanUserUpdateNavigationMenu: true,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
@@ -242,16 +293,16 @@ describe( 'useNavigationMenus', () => {
 			navigationMenu: requestedMenu,
 			navigationMenus,
 			canSwitchNavigationMenu: true,
-			canUserCreateNavigationMenu: false,
+			canUserCreateNavigationMenus: false,
 			canUserDeleteNavigationMenu: false,
 			canUserUpdateNavigationMenu: false,
-			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenus: false,
 			hasResolvedCanUserDeleteNavigationMenu: false,
 			hasResolvedCanUserUpdateNavigationMenu: false,
 			hasResolvedNavigationMenus: true,
 			isNavigationMenuMissing: false,
 			isNavigationMenuResolved: false,
-			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingCanUserCreateNavigationMenus: false,
 			isResolvingNavigationMenus: false,
 		} );
 	} );
diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
index 7ce66683300a3a..5fd942c485bf84 100644
--- a/packages/block-library/src/navigation/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -4,82 +4,79 @@
 import {
 	store as coreStore,
 	useResourcePermissions,
+	useEntityRecords,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-export default function useNavigationMenu( ref ) {
-	const permissions = useResourcePermissions( 'navigation', ref );
+/**
+ * Internal dependencies
+ */
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
-	return useSelect(
+export default function useNavigationMenu( ref ) {
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: 'wp_navigation',
+		id: ref,
+	} );
+
+	const {
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+	} = useSelect(
 		( select ) => {
-			const {
-				canCreate,
-				canUpdate,
-				canDelete,
-				isResolving,
-				hasResolved,
-			} = permissions;
-
-			const {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-			} = selectNavigationMenus( select, ref );
-
-			const {
-				navigationMenu,
-				isNavigationMenuResolved,
-				isNavigationMenuMissing,
-			} = selectExistingMenu( select, ref );
-
-			return {
-				navigationMenus,
-				isResolvingNavigationMenus,
-				hasResolvedNavigationMenus,
-
-				navigationMenu,
-				isNavigationMenuResolved,
-				isNavigationMenuMissing,
+			return selectExistingMenu( select, ref );
+		},
+		[ ref ]
+	);
 
-				canSwitchNavigationMenu: ref
-					? navigationMenus?.length > 1
-					: navigationMenus?.length > 0,
+	const {
+		// Can the user create navigation menus?
+		canCreate: canCreateNavigationMenus,
 
-				canUserCreateNavigationMenu: canCreate,
-				isResolvingCanUserCreateNavigationMenu: isResolving,
-				hasResolvedCanUserCreateNavigationMenu: hasResolved,
+		// Can the user update the specific navigation menu with the given post ID?
+		canUpdate: canUpdateNavigationMenu,
 
-				canUserUpdateNavigationMenu: canUpdate,
-				hasResolvedCanUserUpdateNavigationMenu: ref
-					? hasResolved
-					: undefined,
+		// Can the user delete the specific navigation menu with the given post ID?
+		canDelete: canDeleteNavigationMenu,
+		isResolving: isResolvingPermissions,
+		hasResolved: hasResolvedPermissions,
+	} = permissions;
 
-				canUserDeleteNavigationMenu: canDelete,
-				hasResolvedCanUserDeleteNavigationMenu: ref
-					? hasResolved
-					: undefined,
-			};
-		},
-		[ ref, permissions ]
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
 	);
-}
 
-function selectNavigationMenus( select ) {
-	const { getEntityRecords, hasFinishedResolution, isResolving } =
-		select( coreStore );
+	const canSwitchNavigationMenu = ref
+		? navigationMenus?.length > 1
+		: navigationMenus?.length > 0;
 
-	const args = [
-		'postType',
-		'wp_navigation',
-		{ per_page: -1, status: [ 'publish', 'draft' ] },
-	];
 	return {
-		navigationMenus: getEntityRecords( ...args ),
-		isResolvingNavigationMenus: isResolving( 'getEntityRecords', args ),
-		hasResolvedNavigationMenus: hasFinishedResolution(
-			'getEntityRecords',
-			args
-		),
+		navigationMenu,
+		isNavigationMenuResolved,
+		isNavigationMenuMissing,
+		navigationMenus,
+		isResolvingNavigationMenus,
+		hasResolvedNavigationMenus,
+		canSwitchNavigationMenu,
+		canUserCreateNavigationMenus: canCreateNavigationMenus,
+		isResolvingCanUserCreateNavigationMenus: isResolvingPermissions,
+		hasResolvedCanUserCreateNavigationMenus: hasResolvedPermissions,
+		canUserUpdateNavigationMenu: canUpdateNavigationMenu,
+		hasResolvedCanUserUpdateNavigationMenu: ref
+			? hasResolvedPermissions
+			: undefined,
+		canUserDeleteNavigationMenu: canDeleteNavigationMenu,
+		hasResolvedCanUserDeleteNavigationMenu: ref
+			? hasResolvedPermissions
+			: undefined,
 	};
 }
 
diff --git a/packages/block-library/src/navigation/use-template-part-area-label.js b/packages/block-library/src/navigation/use-template-part-area-label.js
index 91838b268b47d6..7b4d514975e113 100644
--- a/packages/block-library/src/navigation/use-template-part-area-label.js
+++ b/packages/block-library/src/navigation/use-template-part-area-label.js
@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
 
 // TODO: this util should perhaps be refactored somewhere like core-data.
 import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id';
+import { getTemplatePartIcon } from '../template-part/edit/utils/get-template-part-icon';
 
 export default function useTemplatePartAreaLabel( clientId ) {
 	return useSelect(
@@ -35,24 +36,25 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			// This code is lifted from this file:
-			// packages/block-library/src/template-part/edit/advanced-controls.js
-			/* eslint-disable @wordpress/data-no-store-string-literals */
-			const definedAreas =
-				select(
-					'core/editor'
-				).__experimentalGetDefaultTemplatePartAreas();
-			/* eslint-enable @wordpress/data-no-store-string-literals */
-			const { getEditedEntityRecord } = select( coreStore );
+			const defaultTemplatePartAreas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( {
+				...item,
+				icon: getTemplatePartIcon( item.icon ),
+			} ) );
+
+			const { getCurrentTheme, getEditedEntityRecord } =
+				select( coreStore );
 
 			for ( const templatePartClientId of parentTemplatePartClientIds ) {
 				const templatePartBlock = getBlock( templatePartClientId );
 
 				// The 'area' usually isn't stored on the block, but instead
 				// on the entity.
-				const { theme, slug } = templatePartBlock.attributes;
+				const { theme = getCurrentTheme()?.stylesheet, slug } =
+					templatePartBlock.attributes;
 				const templatePartEntityId = createTemplatePartId(
 					theme,
 					slug
diff --git a/packages/block-library/src/navigation/view-modal.js b/packages/block-library/src/navigation/view-modal.js
deleted file mode 100644
index 9477d262816d93..00000000000000
--- a/packages/block-library/src/navigation/view-modal.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
-
-	if ( isHidden ) {
-		dialogContainer.removeAttribute( 'role' );
-		dialogContainer.removeAttribute( 'aria-modal' );
-	} else {
-		dialogContainer.setAttribute( 'role', 'dialog' );
-		dialogContainer.setAttribute( 'aria-modal', 'true' );
-	}
-
-	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
-function isLinkToAnchorOnCurrentPage( node ) {
-	return (
-		node.hash &&
-		node.protocol === window.location.protocol &&
-		node.host === window.location.host &&
-		node.pathname === window.location.pathname &&
-		node.search === window.location.search
-	);
-}
-
-window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
-	// Close modal automatically on clicking anchor links inside modal.
-	const navigationLinks = document.querySelectorAll(
-		'.wp-block-navigation-item__content'
-	);
-
-	navigationLinks.forEach( function ( link ) {
-		// Ignore non-anchor links and anchor links which open on a new tab.
-		if (
-			! isLinkToAnchorOnCurrentPage( link ) ||
-			link.attributes?.target === '_blank'
-		) {
-			return;
-		}
-
-		// Find the specific parent modal for this link
-		// since .close() won't work without an ID if there are
-		// multiple navigation menus in a post/page.
-		const modal = link.closest(
-			'.wp-block-navigation__responsive-container'
-		);
-		const modalId = modal?.getAttribute( 'id' );
-
-		link.addEventListener( 'click', () => {
-			// check if modal exists and is open before trying to close it
-			// otherwise Micromodal will toggle the `has-modal-open` class
-			// on the html tag which prevents scrolling
-			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
-				MicroModal.close( modalId );
-			}
-		} );
-	} );
-} );
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index 19805a44ae4ae2..9da7ab70d84f33 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -1,74 +1,214 @@
-// Open on click functionality.
-function closeSubmenus( element ) {
-	element
-		.querySelectorAll( '[aria-expanded="true"]' )
-		.forEach( function ( toggle ) {
-			toggle.setAttribute( 'aria-expanded', 'false' );
-		} );
-}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
-function toggleSubmenuOnClick( event ) {
-	const buttonToggle = event.target.closest( '[aria-expanded]' );
-	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+const focusableSelectors = [
+	'a[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
 
-	if ( isSubmenuOpen === 'true' ) {
-		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
-	} else {
-		// Close all sibling submenus.
-		const parentElement = buttonToggle.closest(
-			'.wp-block-navigation-item'
-		);
-		const navigationParent = buttonToggle.closest(
-			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
-		);
-		navigationParent
-			.querySelectorAll( '.wp-block-navigation-item' )
-			.forEach( function ( child ) {
-				if ( child !== parentElement ) {
-					closeSubmenus( child );
+// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
+// when the user taps in the body. It can be removed once we add an overlay to
+// capture the clicks, instead of relying on the focusout event.
+document.addEventListener( 'click', () => {} );
+
+const { state, actions } = store(
+	'core/navigation',
+	{
+		state: {
+			get roleAttribute() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? 'dialog'
+					: null;
+			},
+			get ariaModal() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? 'true'
+					: null;
+			},
+			get ariaLabel() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? ctx.ariaLabel
+					: null;
+			},
+			get isMenuOpen() {
+				// The menu is opened if either `click`, `hover` or `focus` is true.
+				return (
+					Object.values( state.menuOpenedBy ).filter( Boolean )
+						.length > 0
+				);
+			},
+			get menuOpenedBy() {
+				const ctx = getContext();
+				return ctx.type === 'overlay'
+					? ctx.overlayOpenedBy
+					: ctx.submenuOpenedBy;
+			},
+		},
+		actions: {
+			openMenuOnHover() {
+				const { type, overlayOpenedBy } = getContext();
+				if (
+					type === 'submenu' &&
+					// Only open on hover if the overlay is closed.
+					Object.values( overlayOpenedBy || {} ).filter( Boolean )
+						.length === 0
+				) {
+					actions.openMenu( 'hover' );
+				}
+			},
+			closeMenuOnHover() {
+				const { type, overlayOpenedBy } = getContext();
+				if (
+					type === 'submenu' &&
+					// Only close on hover if the overlay is closed.
+					Object.values( overlayOpenedBy || {} ).filter( Boolean )
+						.length === 0
+				) {
+					actions.closeMenu( 'hover' );
+				}
+			},
+			openMenuOnClick() {
+				const ctx = getContext();
+				const { ref } = getElement();
+				ctx.previousFocus = ref;
+				actions.openMenu( 'click' );
+			},
+			closeMenuOnClick() {
+				actions.closeMenu( 'click' );
+				actions.closeMenu( 'focus' );
+			},
+			openMenuOnFocus() {
+				actions.openMenu( 'focus' );
+			},
+			toggleMenuOnClick() {
+				const ctx = getContext();
+				const { ref } = getElement();
+				// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
+				if ( window.document.activeElement !== ref ) {
+					ref.focus();
 				}
-			} );
-		// Open submenu.
-		buttonToggle.setAttribute( 'aria-expanded', 'true' );
-	}
-}
+				const { menuOpenedBy } = state;
+				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
+					actions.closeMenu( 'click' );
+					actions.closeMenu( 'focus' );
+				} else {
+					ctx.previousFocus = ref;
+					actions.openMenu( 'click' );
+				}
+			},
+			handleMenuKeydown( event ) {
+				const { type, firstFocusableElement, lastFocusableElement } =
+					getContext();
+				if ( state.menuOpenedBy.click ) {
+					// If Escape close the menu.
+					if ( event?.key === 'Escape' ) {
+						actions.closeMenu( 'click' );
+						actions.closeMenu( 'focus' );
+						return;
+					}
 
-// Necessary for some themes such as TT1 Blocks, where
-// scripts could be loaded before the body.
-window.addEventListener( 'load', () => {
-	const submenuButtons = document.querySelectorAll(
-		'.wp-block-navigation-submenu__toggle'
-	);
+					// Trap focus if it is an overlay (main menu).
+					if ( type === 'overlay' && event.key === 'Tab' ) {
+						// If shift + tab it change the direction.
+						if (
+							event.shiftKey &&
+							window.document.activeElement ===
+								firstFocusableElement
+						) {
+							event.preventDefault();
+							lastFocusableElement.focus();
+						} else if (
+							! event.shiftKey &&
+							window.document.activeElement ===
+								lastFocusableElement
+						) {
+							event.preventDefault();
+							firstFocusableElement.focus();
+						}
+					}
+				}
+			},
+			handleMenuFocusout( event ) {
+				const { modal, type } = getContext();
+				// If focus is outside modal, and in the document, close menu
+				// event.target === The element losing focus
+				// event.relatedTarget === The element receiving focus (if any)
+				// When focusout is outside the document,
+				// `window.document.activeElement` doesn't change.
 
-	submenuButtons.forEach( function ( button ) {
-		button.addEventListener( 'click', toggleSubmenuOnClick );
-	} );
+				// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
+				if (
+					event.relatedTarget === null ||
+					( ! modal?.contains( event.relatedTarget ) &&
+						event.target !== window.document.activeElement &&
+						type === 'submenu' )
+				) {
+					actions.closeMenu( 'click' );
+					actions.closeMenu( 'focus' );
+				}
+			},
 
-	// Close on click outside.
-	document.addEventListener( 'click', function ( event ) {
-		const navigationBlocks = document.querySelectorAll(
-			'.wp-block-navigation'
-		);
-		navigationBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
-				closeSubmenus( block );
-			}
-		} );
-	} );
-	// Close on focus outside or escape key.
-	document.addEventListener( 'keyup', function ( event ) {
-		const submenuBlocks = document.querySelectorAll(
-			'.wp-block-navigation-item.has-child'
-		);
-		submenuBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
-				closeSubmenus( block );
-			} else if ( event.key === 'Escape' ) {
-				const toggle = block.querySelector( '[aria-expanded="true"]' );
-				closeSubmenus( block );
-				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
-				toggle?.focus();
-			}
-		} );
-	} );
-} );
+			openMenu( menuOpenedOn = 'click' ) {
+				const { type } = getContext();
+				state.menuOpenedBy[ menuOpenedOn ] = true;
+				if ( type === 'overlay' ) {
+					// Add a `has-modal-open` class to the <html> root.
+					document.documentElement.classList.add( 'has-modal-open' );
+				}
+			},
+
+			closeMenu( menuClosedOn = 'click' ) {
+				const ctx = getContext();
+				state.menuOpenedBy[ menuClosedOn ] = false;
+				// Check if the menu is still open or not.
+				if ( ! state.isMenuOpen ) {
+					if (
+						ctx.modal?.contains( window.document.activeElement )
+					) {
+						ctx.previousFocus?.focus();
+					}
+					ctx.modal = null;
+					ctx.previousFocus = null;
+					if ( ctx.type === 'overlay' ) {
+						document.documentElement.classList.remove(
+							'has-modal-open'
+						);
+					}
+				}
+			},
+		},
+		callbacks: {
+			initMenu() {
+				const ctx = getContext();
+				const { ref } = getElement();
+				if ( state.isMenuOpen ) {
+					const focusableElements =
+						ref.querySelectorAll( focusableSelectors );
+					ctx.modal = ref;
+					ctx.firstFocusableElement = focusableElements[ 0 ];
+					ctx.lastFocusableElement =
+						focusableElements[ focusableElements.length - 1 ];
+				}
+			},
+			focusFirstElement() {
+				const { ref } = getElement();
+				if ( state.isMenuOpen ) {
+					const focusableElements =
+						ref.querySelectorAll( focusableSelectors );
+					focusableElements?.[ 0 ]?.focus();
+				}
+			},
+		},
+	},
+	{ lock: true }
+);
diff --git a/packages/block-library/src/nextpage/block.json b/packages/block-library/src/nextpage/block.json
index 6a133264d6747c..3dd1a24d36e59d 100644
--- a/packages/block-library/src/nextpage/block.json
+++ b/packages/block-library/src/nextpage/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/nextpage",
 	"title": "Page Break",
 	"category": "design",
@@ -11,7 +11,10 @@
 	"supports": {
 		"customClassName": false,
 		"className": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-nextpage-editor"
 }
diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
index 8570b942fd60a6..508ca7e10553a3 100644
--- a/packages/block-library/src/nextpage/edit.native.js
+++ b/packages/block-library/src/nextpage/edit.native.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import Hr from 'react-native-hr';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
+import { HorizontalRule } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -44,7 +44,7 @@ export function NextPageEdit( {
 			accessibilityStates={ accessibilityState }
 			onAccessibilityTap={ onFocus }
 		>
-			<Hr
+			<HorizontalRule
 				text={ customText }
 				marginLeft={ 0 }
 				marginRight={ 0 }
diff --git a/packages/block-library/src/nextpage/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/nextpage/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..ff0a208b38f427
--- /dev/null
+++ b/packages/block-library/src/nextpage/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Break block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Page Break block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/nextpage/test/transforms.native.js b/packages/block-library/src/nextpage/test/transforms.native.js
new file mode 100644
index 00000000000000..54cd6a6ac0edb5
--- /dev/null
+++ b/packages/block-library/src/nextpage/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Page Break';
+const initialHtml = `
+<!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
new file mode 100644
index 00000000000000..7890771f639219
--- /dev/null
+++ b/packages/block-library/src/page-list-item/block.json
@@ -0,0 +1,55 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/page-list-item",
+	"title": "Page List Item",
+	"category": "widgets",
+	"parent": [ "core/page-list" ],
+	"description": "Displays a page inside a list of all pages.",
+	"keywords": [ "page", "menu", "navigation" ],
+	"textdomain": "default",
+	"attributes": {
+		"id": {
+			"type": "number"
+		},
+		"label": {
+			"type": "string"
+		},
+		"title": {
+			"type": "string"
+		},
+		"link": {
+			"type": "string"
+		},
+		"hasChildren": {
+			"type": "boolean"
+		}
+	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor",
+		"overlayTextColor",
+		"customOverlayTextColor",
+		"overlayBackgroundColor",
+		"customOverlayBackgroundColor",
+		"fontSize",
+		"customFontSize",
+		"showSubmenuIcon",
+		"style",
+		"openSubmenusOnClick"
+	],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"lock": false,
+		"inserter": false,
+		"__experimentalToolbar": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"editorStyle": "wp-block-page-list-editor",
+	"style": "wp-block-page-list"
+}
diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js
new file mode 100644
index 00000000000000..456225b7419198
--- /dev/null
+++ b/packages/block-library/src/page-list-item/edit.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { ItemSubmenuIcon } from '../navigation-link/icons';
+import {
+	getColors,
+	getNavigationChildBlockProps,
+} from '../navigation/edit/utils';
+
+function useFrontPageId() {
+	return useSelect( ( select ) => {
+		const canReadSettings = select( coreStore ).canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} );
+		if ( ! canReadSettings ) {
+			return undefined;
+		}
+
+		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
+		return site?.show_on_front === 'page' && site?.page_on_front;
+	}, [] );
+}
+
+export default function PageListItemEdit( { context, attributes } ) {
+	const { id, label, link, hasChildren, title } = attributes;
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const frontPageId = useFrontPageId();
+
+	const innerBlocksColors = getColors( context, true );
+
+	const navigationChildBlockProps =
+		getNavigationChildBlockProps( innerBlocksColors );
+	const blockProps = useBlockProps( navigationChildBlockProps, {
+		className: 'wp-block-pages-list__item',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps );
+
+	return (
+		<li
+			key={ id }
+			className={ clsx( 'wp-block-pages-list__item', {
+				'has-child': hasChildren,
+				'wp-block-navigation-item': isNavigationChild,
+				'open-on-click': context.openSubmenusOnClick,
+				'open-on-hover-click':
+					! context.openSubmenusOnClick && context.showSubmenuIcon,
+				'menu-item-home': id === frontPageId,
+			} ) }
+		>
+			{ hasChildren && context.openSubmenusOnClick ? (
+				<>
+					<button
+						type="button"
+						className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+						aria-expanded="false"
+					>
+						{ decodeEntities( label ) }
+					</button>
+					<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+						<ItemSubmenuIcon />
+					</span>
+				</>
+			) : (
+				<a
+					className={ clsx( 'wp-block-pages-list__item__link', {
+						'wp-block-navigation-item__content': isNavigationChild,
+					} ) }
+					href={ link }
+				>
+					{ decodeEntities( title ) }
+				</a>
+			) }
+			{ hasChildren && (
+				<>
+					{ ! context.openSubmenusOnClick &&
+						context.showSubmenuIcon && (
+							<button
+								className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
+								aria-expanded="false"
+								type="button"
+							>
+								<ItemSubmenuIcon />
+							</button>
+						) }
+					<ul { ...innerBlocksProps }></ul>
+				</>
+			) }
+		</li>
+	);
+}
diff --git a/packages/block-library/src/page-list-item/index.js b/packages/block-library/src/page-list-item/index.js
new file mode 100644
index 00000000000000..6d1db7282af898
--- /dev/null
+++ b/packages/block-library/src/page-list-item/index.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { page as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit.js';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	__experimentalLabel: ( { label } ) => label,
+	icon,
+	example: {},
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/page-list-item/index.php b/packages/block-library/src/page-list-item/index.php
new file mode 100644
index 00000000000000..121d2dbbb97051
--- /dev/null
+++ b/packages/block-library/src/page-list-item/index.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Server-side rendering of the `core/page-list-item` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Registers the `core/page-list-item` block on server.
+ *
+ * @since 6.3.0
+ */
+function register_block_core_page_list_item() {
+	register_block_type_from_metadata( __DIR__ . '/page-list-item' );
+}
+add_action( 'init', 'register_block_core_page_list_item' );
diff --git a/packages/block-library/src/page-list-item/init.js b/packages/block-library/src/page-list-item/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/page-list-item/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index 2fc6993849d6f7..16a620dc177d7c 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -1,9 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/page-list",
 	"title": "Page List",
 	"category": "widgets",
+	"allowedBlocks": [ "core/page-list-item" ],
 	"description": "Display a list of all pages.",
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
@@ -11,6 +12,10 @@
 		"parentPageID": {
 			"type": "integer",
 			"default": 0
+		},
+		"isNested": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [
@@ -30,7 +35,37 @@
 	],
 	"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
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
+		}
 	},
 	"editorStyle": "wp-block-page-list-editor",
 	"style": "wp-block-page-list"
diff --git a/packages/block-library/src/page-list/convert-to-links-modal.js b/packages/block-library/src/page-list/convert-to-links-modal.js
index 826539ec378348..f2ab425a1ef10a 100644
--- a/packages/block-library/src/page-list/convert-to-links-modal.js
+++ b/packages/block-library/src/page-list/convert-to-links-modal.js
@@ -2,119 +2,50 @@
  * WordPress dependencies
  */
 import { Button, Modal } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useEntityRecords } from '@wordpress/core-data';
-import { createBlock as create } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
-const PAGE_FIELDS = [ 'id', 'title', 'link', 'type', 'parent' ];
-const MAX_PAGE_COUNT = 100;
-
-export const convertSelectedBlockToNavigationLinks =
-	( { pages, clientId, replaceBlock, createBlock } ) =>
-	() => {
-		if ( ! pages ) {
-			return;
-		}
-
-		const linkMap = {};
-		const navigationLinks = [];
-		pages.forEach( ( { id, title, link: url, type, parent } ) => {
-			// See if a placeholder exists. This is created if children appear before parents in list.
-			const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
-			linkMap[ id ] = createBlock(
-				'core/navigation-link',
-				{
-					id,
-					label: title.rendered,
-					url,
-					type,
-					kind: 'post-type',
-				},
-				innerBlocks
-			);
-
-			if ( ! parent ) {
-				navigationLinks.push( linkMap[ id ] );
-			} else {
-				if ( ! linkMap[ parent ] ) {
-					// Use a placeholder if the child appears before parent in list.
-					linkMap[ parent ] = { innerBlocks: [] };
-				}
-				const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
-				parentLinkInnerBlocks.push( linkMap[ id ] );
-			}
-		} );
-
-		// Transform all links with innerBlocks into Submenus. This can't be done
-		// sooner because page objects have no information on their children.
-
-		const transformSubmenus = ( listOfLinks ) => {
-			listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
-				const { attributes, innerBlocks } = block;
-				if ( innerBlocks.length !== 0 ) {
-					transformSubmenus( innerBlocks );
-					const transformedBlock = createBlock(
-						'core/navigation-submenu',
-						attributes,
-						innerBlocks
-					);
-					listOfLinksArray[ index ] = transformedBlock;
-				}
-			} );
-		};
-
-		transformSubmenus( navigationLinks );
-
-		replaceBlock( clientId, navigationLinks );
-	};
-
-export default function ConvertToLinksModal( { onClose, clientId } ) {
-	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(
-		'postType',
-		'page',
-		{
-			per_page: MAX_PAGE_COUNT,
-			_fields: PAGE_FIELDS,
-			// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
-			// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
-			// sort.
-			orderby: 'menu_order',
-			order: 'asc',
-		}
-	);
-
-	const { replaceBlock } = useDispatch( blockEditorStore );
+export const convertDescription = __(
+	"This Navigation Menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
+);
 
+export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 	return (
 		<Modal
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
-			title={ __( 'Customize this menu' ) }
-			className={ 'wp-block-page-list-modal' }
-			aria={ { describedby: 'wp-block-page-list-modal__description' } }
+			title={ __( 'Edit Page List' ) }
+			className="wp-block-page-list-modal"
+			aria={ {
+				describedby: useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
+				),
+			} }
 		>
-			<p id={ 'wp-block-page-list-modal__description' }>
-				{ __(
-					'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking customize below.'
+			<p
+				id={ useInstanceId(
+					ConvertToLinksModal,
+					'wp-block-page-list-modal__description'
 				) }
+			>
+				{ convertDescription }
 			</p>
 			<div className="wp-block-page-list-modal-buttons">
-				<Button variant="tertiary" onClick={ onClose }>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onClose }
+				>
 					{ __( 'Cancel' ) }
 				</Button>
 				<Button
+					__next40pxDefaultSize
 					variant="primary"
-					disabled={ ! pagesFinished }
-					onClick={ convertSelectedBlockToNavigationLinks( {
-						pages,
-						replaceBlock,
-						clientId,
-						createBlock: create,
-					} ) }
+					accessibleWhenDisabled
+					disabled={ disabled }
+					onClick={ onClick }
 				>
-					{ __( 'Customize' ) }
+					{ __( 'Edit' ) }
 				</Button>
 			</div>
 		</Modal>
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index ac7ed6162cf975..31e400b8676717 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -1,16 +1,20 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
+	useInnerBlocksProps,
 	getColorClassName,
+	store as blockEditorStore,
+	Warning,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -18,193 +22,143 @@ import {
 	Spinner,
 	Notice,
 	ComboboxControl,
+	Button,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMemo, useState, memo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useState, useEffect, useCallback } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import ConvertToLinksModal from './convert-to-links-modal';
-import { ItemSubmenuIcon } from '../navigation-link/icons';
+import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
+import {
+	convertDescription,
+	ConvertToLinksModal,
+} from './convert-to-links-modal';
 
 // 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;
-
-export default function PageListEdit( {
-	context,
-	clientId,
-	attributes,
-	setAttributes,
+const NOOP = () => {};
+function BlockContent( {
+	blockProps,
+	innerBlocksProps,
+	hasResolvedPages,
+	blockList,
+	pages,
+	parentPageID,
 } ) {
-	const { parentPageID } = attributes;
-	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
-
-	const isNavigationChild = 'showSubmenuIcon' in context;
-	const allowConvertToLinks =
-		isNavigationChild && totalPages <= MAX_PAGE_COUNT;
-
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
+	if ( ! hasResolvedPages ) {
+		return (
+			<div { ...blockProps }>
+				<div className="wp-block-page-list__loading-indicator-container">
+					<Spinner className="wp-block-page-list__loading-indicator" />
+				</div>
+			</div>
+		);
+	}
 
-	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-page-list', {
-			'has-text-color': !! context.textColor,
-			[ getColorClassName( 'color', context.textColor ) ]:
-				!! context.textColor,
-			'has-background': !! context.backgroundColor,
-			[ getColorClassName(
-				'background-color',
-				context.backgroundColor
-			) ]: !! context.backgroundColor,
-		} ),
-		style: { ...context.style?.color },
-	} );
+	if ( pages === null ) {
+		return (
+			<div { ...blockProps }>
+				<Notice status="warning" isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
+		);
+	}
 
-	const getBlockContent = () => {
-		if ( ! hasResolvedPages ) {
-			return (
-				<div { ...blockProps }>
-					<Spinner />
-				</div>
-			);
-		}
+	if ( pages.length === 0 ) {
+		return (
+			<div { ...blockProps }>
+				<Notice status="info" isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
+		);
+	}
 
-		if ( totalPages === null ) {
-			return (
-				<div { ...blockProps }>
-					<Notice status={ 'warning' } isDismissible={ false }>
-						{ __( 'Page List: Cannot retrieve Pages.' ) }
-					</Notice>
-				</div>
-			);
-		}
+	if ( blockList.length === 0 ) {
+		const parentPageDetails = pages.find(
+			( page ) => page.id === parentPageID
+		);
 
-		if ( totalPages === 0 ) {
+		if ( parentPageDetails?.title?.rendered ) {
 			return (
 				<div { ...blockProps }>
-					<Notice status={ 'info' } isDismissible={ false }>
-						{ __( 'Page List: Cannot retrieve Pages.' ) }
-					</Notice>
+					<Warning>
+						{ sprintf(
+							// translators: %s: Page title.
+							__( 'Page List: "%s" page has no children.' ),
+							parentPageDetails.title.rendered
+						) }
+					</Warning>
 				</div>
 			);
 		}
 
-		if ( totalPages > 0 ) {
-			return (
-				<ul { ...blockProps }>
-					<PageItems
-						context={ context }
-						parentId={ parentPageID }
-						pagesByParentId={ pagesByParentId }
-					/>
-				</ul>
-			);
-		}
-	};
-
-	const useParentOptions = () => {
-		const [ pages ] = useGetPages();
-		return pages?.reduce( ( accumulator, page ) => {
-			accumulator.push( {
-				value: page.id,
-				label: page.title.rendered,
-			} );
-			return accumulator;
-		}, [] );
-	};
-
-	return (
-		<>
-			<InspectorControls>
-				<PanelBody>
-					<ComboboxControl
-						className="editor-page-attributes__parent"
-						label={ __( 'Parent page' ) }
-						value={ parentPageID }
-						options={ useParentOptions() }
-						onChange={ ( value ) =>
-							setAttributes( { parentPageID: value ?? 0 } )
-						}
-						help={ __(
-							'Choose a page to show only its subpages.'
-						) }
-					/>
-				</PanelBody>
-			</InspectorControls>
-			{ allowConvertToLinks && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
-				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
-				/>
-			) }
-
-			{ getBlockContent() }
-		</>
-	);
-}
-
-function useFrontPageId() {
-	return useSelect( ( select ) => {
-		const canReadSettings = select( coreStore ).canUser(
-			'read',
-			'settings'
+		return (
+			<div { ...blockProps }>
+				<Notice status="warning" isDismissible={ false }>
+					{ __( 'Page List: Cannot retrieve Pages.' ) }
+				</Notice>
+			</div>
 		);
-		if ( ! canReadSettings ) {
-			return undefined;
-		}
+	}
 
-		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
-		return site?.show_on_front === 'page' && site?.page_on_front;
-	}, [] );
+	if ( pages.length > 0 ) {
+		return <ul { ...innerBlocksProps }></ul>;
+	}
 }
 
-function useGetPages() {
+export default function PageListEdit( {
+	context,
+	clientId,
+	attributes,
+	setAttributes,
+} ) {
+	const { parentPageID } = attributes;
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = useCallback( () => setOpen( true ), [] );
+	const closeModal = () => setOpen( false );
+
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
 		'page',
 		{
+			per_page: MAX_PAGE_COUNT,
+			_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],
+			// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+			// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+			// sort.
 			orderby: 'menu_order',
 			order: 'asc',
-			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-			per_page: -1,
-			context: 'view',
 		}
 	);
 
-	return [ pages, hasResolvedPages ];
-}
+	const allowConvertToLinks =
+		'showSubmenuIcon' in context &&
+		pages?.length > 0 &&
+		pages?.length <= MAX_PAGE_COUNT;
 
-function usePageData( pageId = 0 ) {
-	const [ pages, hasResolvedPages ] = useGetPages();
+	const pagesByParentId = useMemo( () => {
+		if ( pages === null ) {
+			return new Map();
+		}
 
-	return useMemo( () => {
 		// TODO: Once the REST API supports passing multiple values to
 		// 'orderby', this can be removed.
 		// https://core.trac.wordpress.org/ticket/39037
-
-		if ( pageId !== 0 ) {
-			return pages.find( ( page ) => page.id === pageId );
-		}
-
-		const sortedPages = [ ...( pages ?? [] ) ].sort( ( a, b ) => {
+		const sortedPages = pages.sort( ( a, b ) => {
 			if ( a.menu_order === b.menu_order ) {
 				return a.title.rendered.localeCompare( b.title.rendered );
 			}
 			return a.menu_order - b.menu_order;
 		} );
-		const pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {
+
+		return sortedPages.reduce( ( accumulator, page ) => {
 			const { parent } = page;
 			if ( accumulator.has( parent ) ) {
 				accumulator.get( parent ).push( page );
@@ -213,100 +167,219 @@ function usePageData( pageId = 0 ) {
 			}
 			return accumulator;
 		}, new Map() );
+	}, [ pages ] );
 
-		return {
-			pagesByParentId,
-			hasResolvedPages,
-			totalPages: pages?.length ?? null,
-		};
-	}, [ pageId, pages, hasResolvedPages ] );
-}
+	const blockProps = useBlockProps( {
+		className: clsx( 'wp-block-page-list', {
+			'has-text-color': !! context.textColor,
+			[ getColorClassName( 'color', context.textColor ) ]:
+				!! context.textColor,
+			'has-background': !! context.backgroundColor,
+			[ getColorClassName(
+				'background-color',
+				context.backgroundColor
+			) ]: !! context.backgroundColor,
+		} ),
+		style: { ...context.style?.color },
+	} );
 
-const PageItems = memo( function PageItems( {
-	context,
-	pagesByParentId,
-	parentId = 0,
-	depth = 0,
-} ) {
-	const parentPage = usePageData( parentId );
-	const pages = pagesByParentId.get( parentId )
-		? pagesByParentId.get( parentId )
-		: [ parentPage ];
-	const frontPageId = useFrontPageId();
+	const pagesTree = useMemo(
+		function makePagesTree( parentId = 0, level = 0 ) {
+			const childPages = pagesByParentId.get( parentId );
 
-	if ( ! pages?.length ) {
-		return [];
-	}
+			if ( ! childPages?.length ) {
+				return [];
+			}
 
-	return pages.map( ( page ) => {
-		const hasChildren = pagesByParentId.has( page.id );
-		const isNavigationChild = 'showSubmenuIcon' in context;
-		return (
-			<li
-				key={ page.id }
-				className={ classnames( 'wp-block-pages-list__item', {
-					'has-child': hasChildren,
-					'wp-block-navigation-item': isNavigationChild,
-					'open-on-click': context.openSubmenusOnClick,
-					'open-on-hover-click':
-						! context.openSubmenusOnClick &&
-						context.showSubmenuIcon,
-					'menu-item-home': page.id === frontPageId,
-				} ) }
-			>
-				{ hasChildren && context.openSubmenusOnClick ? (
-					<>
-						<button
-							className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
-							aria-expanded="false"
-						>
-							{ page.title?.rendered }
-						</button>
-						<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					</>
-				) : (
-					<a
-						className={ classnames(
-							'wp-block-pages-list__item__link',
-							{
-								'wp-block-navigation-item__content':
-									isNavigationChild,
+			return childPages.reduce( ( tree, page ) => {
+				const hasChildren = pagesByParentId.has( page.id );
+				const item = {
+					value: page.id,
+					label: '— '.repeat( level ) + page.title.rendered,
+					rawName: page.title.rendered,
+				};
+				tree.push( item );
+				if ( hasChildren ) {
+					tree.push( ...makePagesTree( page.id, level + 1 ) );
+				}
+				return tree;
+			}, [] );
+		},
+		[ pagesByParentId ]
+	);
+
+	const blockList = useMemo(
+		function getBlockList( parentId = parentPageID ) {
+			const childPages = pagesByParentId.get( parentId );
+
+			if ( ! childPages?.length ) {
+				return [];
+			}
+
+			return childPages.reduce( ( template, page ) => {
+				const hasChildren = pagesByParentId.has( page.id );
+				const pageProps = {
+					id: page.id,
+					label:
+						// translators: displayed when a page has an empty title.
+						page.title?.rendered?.trim() !== ''
+							? page.title?.rendered
+							: __( '(no title)' ),
+					title:
+						// translators: displayed when a page has an empty title.
+						page.title?.rendered?.trim() !== ''
+							? page.title?.rendered
+							: __( '(no title)' ),
+					link: page.url,
+					hasChildren,
+				};
+				let item = null;
+				const children = getBlockList( page.id );
+				item = createBlock(
+					'core/page-list-item',
+					pageProps,
+					children
+				);
+				template.push( item );
+
+				return template;
+			}, [] );
+		},
+		[ pagesByParentId, parentPageID ]
+	);
+
+	const {
+		isNested,
+		hasSelectedChild,
+		parentClientId,
+		hasDraggedChild,
+		isChildOfNavigation,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockParentsByBlockName,
+				hasSelectedInnerBlock,
+				hasDraggedInnerBlock,
+			} = select( blockEditorStore );
+			const blockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation-submenu',
+				true
+			);
+			const navigationBlockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation',
+				true
+			);
+			return {
+				isNested: blockParents.length > 0,
+				isChildOfNavigation: navigationBlockParents.length > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
+				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
+				parentClientId: navigationBlockParents[ 0 ],
+			};
+		},
+		[ clientId ]
+	);
+
+	const convertToNavigationLinks = useConvertToNavigationLinks( {
+		clientId,
+		pages,
+		parentClientId,
+		parentPageID,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: false,
+		__unstableDisableDropZone: true,
+		templateLock: isChildOfNavigation ? false : 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
+	} );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( hasSelectedChild || hasDraggedChild ) {
+			openModal();
+			selectBlock( parentClientId );
+		}
+	}, [
+		hasSelectedChild,
+		hasDraggedChild,
+		parentClientId,
+		selectBlock,
+		openModal,
+	] );
+
+	useEffect( () => {
+		setAttributes( { isNested } );
+	}, [ isNested, setAttributes ] );
+
+	return (
+		<>
+			<InspectorControls>
+				{ pagesTree.length > 0 && (
+					<PanelBody>
+						<ComboboxControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							className="editor-page-attributes__parent"
+							label={ __( 'Parent' ) }
+							value={ parentPageID }
+							options={ pagesTree }
+							onChange={ ( value ) =>
+								setAttributes( { parentPageID: value ?? 0 } )
 							}
-						) }
-						href={ page.link }
-					>
-						{ page.title?.rendered }
-					</a>
-				) }
-				{ hasChildren && (
-					<>
-						{ ! context.openSubmenusOnClick &&
-							context.showSubmenuIcon && (
-								<button
-									className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
-									aria-expanded="false"
-								>
-									<ItemSubmenuIcon />
-								</button>
+							help={ __(
+								'Choose a page to show only its subpages.'
 							) }
-						<ul
-							className={ classnames( 'submenu-container', {
-								'wp-block-navigation__submenu-container':
-									isNavigationChild,
-							} ) }
+						/>
+					</PanelBody>
+				) }
+				{ allowConvertToLinks && (
+					<PanelBody title={ __( 'Edit this menu' ) }>
+						<p>{ convertDescription }</p>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							accessibleWhenDisabled
+							disabled={ ! hasResolvedPages }
+							onClick={ convertToNavigationLinks }
 						>
-							<PageItems
-								context={ context }
-								pagesByParentId={ pagesByParentId }
-								parentId={ page.id }
-								depth={ depth + 1 }
-							/>
-						</ul>
-					</>
+							{ __( 'Edit' ) }
+						</Button>
+					</PanelBody>
 				) }
-			</li>
-		);
-	} );
-} );
+			</InspectorControls>
+			{ allowConvertToLinks && (
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							title={ __( 'Edit' ) }
+							onClick={ openModal }
+						>
+							{ __( 'Edit' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isOpen && (
+						<ConvertToLinksModal
+							onClick={ convertToNavigationLinks }
+							onClose={ closeModal }
+							disabled={ ! hasResolvedPages }
+						/>
+					) }
+				</>
+			) }
+			<BlockContent
+				blockProps={ blockProps }
+				innerBlocksProps={ innerBlocksProps }
+				hasResolvedPages={ hasResolvedPages }
+				blockList={ blockList }
+				pages={ pages }
+				parentPageID={ parentPageID }
+			/>
+		</>
+	);
+}
diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
index 83a70bafd94853..b3f70746acd57f 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;
@@ -54,6 +58,8 @@
 	}
 }
 
-.wp-block-page-list .components-notice {
-	margin-left: 0;
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-page-list__loading-indicator-container {
+	padding: $grid-unit-10 $grid-unit-15;
 }
diff --git a/packages/block-library/src/page-list/index.js b/packages/block-library/src/page-list/index.js
index 7e13c23f229f2e..4a128e7da58a8d 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 } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon,
+	icon: pages,
 	example: {},
 	edit,
 };
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
index 7944f6f3a84ad6..a574633d4ddf47 100644
--- a/packages/block-library/src/page-list/index.php
+++ b/packages/block-library/src/page-list/index.php
@@ -9,6 +9,8 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
  *
+ * @since 5.8.0
+ *
  * @param  array $attributes Block attributes.
  * @param  array $context    Navigation block context.
  * @return array Colors CSS classes and inline styles.
@@ -101,6 +103,8 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
  * Build an array with CSS classes and inline styles defining the font sizes
  * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
  *
+ * @since 5.8.0
+ *
  * @param  array $context Navigation block context.
  * @return array Font size CSS classes and inline styles.
  */
@@ -135,21 +139,25 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @since 5.8.0
+ *
  * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
  * @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;
 	}
-	$markup = '';
+	$front_page_id = (int) get_option( 'page_on_front' );
+	$markup        = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class       = $page['is_active'] ? ' current-menu-item' : '';
 		$aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
@@ -173,19 +181,20 @@ 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'] ) );
 			}
 		}
 
-		$front_page_id = (int) get_option( 'page_on_front' );
 		if ( (int) $page['page_id'] === $front_page_id ) {
 			$css_class .= ' menu-item-home';
 		}
 
-		$title      = wp_kses_post( $page['title'] );
+		$title = wp_kses_post( $page['title'] );
+		$title = $title ? $title : __( '(no title)' );
+
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
 			__( '%s submenu' ),
@@ -207,12 +216,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'], $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>';
 	}
@@ -222,6 +228,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 /**
  * Outputs nested array of pages
  *
+ * @since 5.8.0
+ *
  * @param array $current_level The level being iterated through.
  * @param array $children The children grouped by parent post ID.
  *
@@ -242,6 +250,8 @@ function block_core_page_list_nest_pages( $current_level, $children ) {
 /**
  * Renders the `core/page-list` block on server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The saved content.
  * @param WP_Block $block      The parsed block.
@@ -253,6 +263,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(
@@ -283,14 +294,14 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 			$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);
 		} else {
 			$top_level_pages[ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);
 
@@ -309,6 +320,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
 	if ( 0 !== $parent_page_id ) {
+		// If the parent page has no child pages, there is nothing to show.
+		if ( ! array_key_exists( $parent_page_id, $pages_with_children ) ) {
+			return;
+		}
+
 		$nested_pages = block_core_page_list_nest_pages(
 			$pages_with_children[ $parent_page_id ],
 			$pages_with_children
@@ -321,9 +337,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(
@@ -341,6 +357,8 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/pages` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_page_list() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
index d06a6142573bec..ab04d57e61b965 100644
--- a/packages/block-library/src/page-list/style.scss
+++ b/packages/block-library/src/page-list/style.scss
@@ -15,3 +15,7 @@
 		background-color: inherit;
 	}
 }
+.wp-block-page-list {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/page-list/test/convert-to-links-modal.js b/packages/block-library/src/page-list/test/convert-to-links-modal.js
index e9908d2b014362..985bed8381cfaf 100644
--- a/packages/block-library/src/page-list/test/convert-to-links-modal.js
+++ b/packages/block-library/src/page-list/test/convert-to-links-modal.js
@@ -1,10 +1,28 @@
 /**
  * Internal dependencies
  */
-import { convertSelectedBlockToNavigationLinks } from '../convert-to-links-modal';
+
+import { convertToNavigationLinks } from '../use-convert-to-navigation-links';
+
+// Mock createBlock to avoid creating the blocks in test environment
+// as convertToNavigationLinks calls this method internally.
+jest.mock( '@wordpress/blocks', () => {
+	const blocks = jest.requireActual( '@wordpress/blocks' );
+
+	return {
+		...blocks,
+		createBlock( name, attributes, innerBlocks ) {
+			return {
+				name,
+				attributes,
+				innerBlocks,
+			};
+		},
+	};
+} );
 
 describe( 'page list convert to links', () => {
-	describe( 'convertSelectedBlockToNavigationLinks', () => {
+	describe( 'convertToNavigationLinks', () => {
 		it( 'Can create submenus', () => {
 			const pages = [
 				{
@@ -88,22 +106,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,
@@ -280,22 +286,10 @@ describe( 'page list convert to links', () => {
 					type: 'page',
 				},
 			];
-			const replaceBlock = jest.fn();
-			const createBlock = jest.fn(
-				( name, attributes, innerBlocks ) => ( {
-					name,
-					attributes,
-					innerBlocks,
-				} )
-			);
-			const convertLinks = convertSelectedBlockToNavigationLinks( {
-				pages,
-				clientId: 'testId',
-				replaceBlock,
-				createBlock,
-			} );
-			convertLinks();
-			expect( replaceBlock.mock.calls?.[ 0 ]?.[ 1 ] ).toEqual( [
+
+			const convertLinks = convertToNavigationLinks( pages );
+
+			expect( convertLinks ).toEqual( [
 				{
 					attributes: {
 						id: 2,
@@ -389,5 +383,139 @@ describe( 'page list convert to links', () => {
 				},
 			] );
 		} );
+
+		it( 'Can use a different parent page', () => {
+			const pages = [
+				{
+					title: {
+						raw: 'Sample Page',
+						rendered: 'Sample Page',
+					},
+					id: 2,
+					parent: 0,
+					link: 'http://wordpress.local/sample-page/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About',
+						rendered: 'About',
+					},
+					id: 34,
+					parent: 0,
+					link: 'http://wordpress.local/about/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Contact Page',
+						rendered: 'Contact Page',
+					},
+					id: 37,
+					parent: 0,
+					link: 'http://wordpress.local/contact-page/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test',
+						rendered: 'Test',
+					},
+					id: 229,
+					parent: 0,
+					link: 'http://wordpress.local/test/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About Sub 1',
+						rendered: 'About Sub 1',
+					},
+					id: 738,
+					parent: 34,
+					link: 'http://wordpress.local/about/about-sub-1/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About Sub 2',
+						rendered: 'About Sub 2',
+					},
+					id: 740,
+					parent: 34,
+					link: 'http://wordpress.local/about/about-sub-2/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test Sub',
+						rendered: 'Test Sub',
+					},
+					id: 742,
+					parent: 229,
+					link: 'http://wordpress.local/test/test-sub/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test Sub Sub',
+						rendered: 'Test Sub Sub',
+					},
+					id: 744,
+					parent: 742,
+					link: 'http://wordpress.local/test/test-sub/test-sub-sub/',
+					type: 'page',
+				},
+			];
+
+			const convertLinksWithParentOneLevel = convertToNavigationLinks(
+				pages,
+				34
+			);
+
+			expect( convertLinksWithParentOneLevel ).toEqual( [
+				{
+					attributes: {
+						id: 738,
+						kind: 'post-type',
+						label: 'About Sub 1',
+						type: 'page',
+						url: 'http://wordpress.local/about/about-sub-1/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+				{
+					attributes: {
+						id: 740,
+						kind: 'post-type',
+						label: 'About Sub 2',
+						type: 'page',
+						url: 'http://wordpress.local/about/about-sub-2/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+			] );
+
+			const convertLinksWithParentTwoLevels = convertToNavigationLinks(
+				pages,
+				742
+			);
+
+			expect( convertLinksWithParentTwoLevels ).toEqual( [
+				{
+					attributes: {
+						id: 744,
+						kind: 'post-type',
+						label: 'Test Sub Sub',
+						type: 'page',
+						url: 'http://wordpress.local/test/test-sub/test-sub-sub/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+			] );
+		} );
 	} );
 } );
diff --git a/packages/block-library/src/page-list/use-convert-to-navigation-links.js b/packages/block-library/src/page-list/use-convert-to-navigation-links.js
new file mode 100644
index 00000000000000..4cbc69d6e6de66
--- /dev/null
+++ b/packages/block-library/src/page-list/use-convert-to-navigation-links.js
@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Converts an array of pages into a nested array of navigation link blocks.
+ *
+ * @param {Array} pages An array of pages.
+ *
+ * @return {Array} A nested array of navigation link blocks.
+ */
+function createNavigationLinks( pages = [] ) {
+	const linkMap = {};
+	const navigationLinks = [];
+	pages.forEach( ( { id, title, link: url, type, parent } ) => {
+		// See if a placeholder exists. This is created if children appear before parents in list.
+		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
+		linkMap[ id ] = createBlock(
+			'core/navigation-link',
+			{
+				id,
+				label: title.rendered,
+				url,
+				type,
+				kind: 'post-type',
+			},
+			innerBlocks
+		);
+
+		if ( ! parent ) {
+			navigationLinks.push( linkMap[ id ] );
+		} else {
+			if ( ! linkMap[ parent ] ) {
+				// Use a placeholder if the child appears before parent in list.
+				linkMap[ parent ] = { innerBlocks: [] };
+			}
+			// Although these variables are not referenced, they are needed to store the innerBlocks in memory.
+			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
+			parentLinkInnerBlocks.push( linkMap[ id ] );
+		}
+	} );
+
+	return navigationLinks;
+}
+
+/**
+ * Finds a navigation link block by id, recursively.
+ * It might be possible to make this a more generic helper function.
+ *
+ * @param {Array}  navigationLinks An array of navigation link blocks.
+ * @param {number} id              The id of the navigation link to find.
+ *
+ * @return {Object|null} The navigation link block with the given id.
+ */
+function findNavigationLinkById( navigationLinks, id ) {
+	for ( const navigationLink of navigationLinks ) {
+		// Is this the link we're looking for?
+		if ( navigationLink.attributes.id === id ) {
+			return navigationLink;
+		}
+
+		// If not does it have innerBlocks?
+		if ( navigationLink.innerBlocks && navigationLink.innerBlocks.length ) {
+			const foundNavigationLink = findNavigationLinkById(
+				navigationLink.innerBlocks,
+				id
+			);
+
+			if ( foundNavigationLink ) {
+				return foundNavigationLink;
+			}
+		}
+	}
+
+	return null;
+}
+
+export function convertToNavigationLinks( pages = [], parentPageID = null ) {
+	let navigationLinks = createNavigationLinks( pages );
+
+	// If a parent page ID is provided, only return the children of that page.
+	if ( parentPageID ) {
+		const parentPage = findNavigationLinkById(
+			navigationLinks,
+			parentPageID
+		);
+		if ( parentPage && parentPage.innerBlocks ) {
+			navigationLinks = parentPage.innerBlocks;
+		}
+	}
+
+	// Transform all links with innerBlocks into Submenus. This can't be done
+	// sooner because page objects have no information on their children.
+	const transformSubmenus = ( listOfLinks ) => {
+		listOfLinks.forEach( ( block, index, listOfLinksArray ) => {
+			const { attributes, innerBlocks } = block;
+			if ( innerBlocks.length !== 0 ) {
+				transformSubmenus( innerBlocks );
+				const transformedBlock = createBlock(
+					'core/navigation-submenu',
+					attributes,
+					innerBlocks
+				);
+				listOfLinksArray[ index ] = transformedBlock;
+			}
+		} );
+	};
+
+	transformSubmenus( navigationLinks );
+	return navigationLinks;
+}
+
+export function useConvertToNavigationLinks( {
+	clientId,
+	pages,
+	parentClientId,
+	parentPageID,
+} ) {
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+
+	return () => {
+		const navigationLinks = convertToNavigationLinks( pages, parentPageID );
+
+		// Replace the Page List block with the Navigation Links.
+		replaceBlock( clientId, navigationLinks );
+
+		// Select the Navigation block to reveal the changes.
+		selectBlock( parentClientId );
+	};
+}
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 497a6b2c29a66b..7e004019cbf282 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/paragraph",
 	"title": "Paragraph",
 	"category": "text",
@@ -12,11 +12,10 @@
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "p",
-			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"dropCap": {
 			"type": "boolean",
@@ -31,8 +30,15 @@
 		}
 	},
 	"supports": {
+		"splitting": true,
 		"anchor": true,
 		"className": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -43,7 +49,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -54,12 +64,16 @@
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
 		},
 		"__experimentalSelector": "p",
-		"__unstablePasteTextInline": true
+		"__unstablePasteTextInline": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-paragraph-editor",
 	"style": "wp-block-paragraph"
diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
index b5b62992aab769..855b23f4aed29c 100644
--- a/packages/block-library/src/paragraph/deprecated.js
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -110,7 +110,7 @@ const deprecated = [
 		},
 		save( { attributes } ) {
 			const { align, content, dropCap, direction } = attributes;
-			const className = classnames( {
+			const className = clsx( {
 				'has-drop-cap':
 					align === ( isRTL() ? 'left' : 'right' ) ||
 					align === 'center'
@@ -162,7 +162,7 @@ const deprecated = [
 			);
 			const fontSizeClass = getFontSizeClass( fontSize );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -227,7 +227,7 @@ const deprecated = [
 			);
 			const fontSizeClass = getFontSizeClass( fontSize );
 
-			const className = classnames( {
+			const className = clsx( {
 				'has-text-color': textColor || customTextColor,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -295,7 +295,7 @@ const deprecated = [
 			);
 			const fontSizeClass = fontSize && `is-${ fontSize }-text`;
 
-			const className = classnames( {
+			const className = clsx( {
 				[ `align${ width }` ]: width,
 				'has-background': backgroundColor || customBackgroundColor,
 				'has-drop-cap': dropCap,
@@ -341,7 +341,7 @@ const deprecated = [
 				textColor,
 				fontSize,
 			} = attributes;
-			const className = classnames( {
+			const className = clsx( {
 				[ `align${ width }` ]: width,
 				'has-background': backgroundColor,
 				'has-drop-cap': dropCap,
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 948eb5f41677eb..b98d4cc87f3418 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,9 +18,10 @@ import {
 	InspectorControls,
 	RichText,
 	useBlockProps,
-	useSetting,
+	useSettings,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { createBlock, getBlockSupport } from '@wordpress/blocks';
+import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
 /**
@@ -28,8 +29,6 @@ import { formatLtr } from '@wordpress/icons';
  */
 import { useOnEnter } from './use-enter';
 
-const name = 'core/paragraph';
-
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
@@ -49,6 +48,56 @@ function hasDropCapDisabled( align ) {
 	return align === ( isRTL() ? 'left' : 'right' ) || align === 'center';
 }
 
+function DropCapControl( { clientId, attributes, setAttributes } ) {
+	// Please do not add a useSelect call to the paragraph block unconditionally.
+	// Every useSelect added to a (frequently used) block will degrade load
+	// and type performance. By moving it within InspectorControls, the subscription is
+	// now only added for the selected block(s).
+	const [ isDropCapFeatureEnabled ] = useSettings( 'typography.dropCap' );
+
+	if ( ! isDropCapFeatureEnabled ) {
+		return null;
+	}
+
+	const { align, dropCap } = attributes;
+
+	let helpText;
+	if ( hasDropCapDisabled( align ) ) {
+		helpText = __( 'Not available for aligned text.' );
+	} else if ( dropCap ) {
+		helpText = __( 'Showing large initial letter.' );
+	} else {
+		helpText = __( 'Show a large initial letter.' );
+	}
+
+	const defaultTypographyControls = getBlockSupport( name, [
+		'typography',
+		'__experimentalDefaultControls',
+	] );
+
+	return (
+		<InspectorControls group="typography">
+			<ToolsPanelItem
+				hasValue={ () => !! dropCap }
+				label={ __( 'Drop cap' ) }
+				isShownByDefault={ defaultTypographyControls?.dropCap }
+				onDeselect={ () => setAttributes( { dropCap: undefined } ) }
+				resetAllFilter={ () => ( { dropCap: undefined } ) }
+				panelId={ clientId }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Drop cap' ) }
+					checked={ !! dropCap }
+					onChange={ () => setAttributes( { dropCap: ! dropCap } ) }
+					help={ helpText }
+					disabled={ hasDropCapDisabled( align ) }
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
+	);
+}
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -56,78 +105,48 @@ function ParagraphBlock( {
 	onRemove,
 	setAttributes,
 	clientId,
+	isSelected: isSingleSelected,
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
-	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
-		className: classnames( {
+		className: clsx( {
 			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
 			[ `has-text-align-${ align }` ]: align,
 		} ),
 		style: { direction },
 	} );
-
-	let helpText;
-	if ( hasDropCapDisabled( align ) ) {
-		helpText = __( 'Not available for aligned text.' );
-	} else if ( dropCap ) {
-		helpText = __( 'Showing large initial letter.' );
-	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
-	}
-
-	const defaultTypographyControls = getBlockSupport( name, [
-		'typography',
-		'__experimentalDefaultControls',
-	] );
+	const blockEditingMode = useBlockEditingMode();
 
 	return (
 		<>
-			<BlockControls group="block">
-				<AlignmentControl
-					value={ align }
-					onChange={ ( newAlign ) =>
-						setAttributes( {
-							align: newAlign,
-							dropCap: hasDropCapDisabled( newAlign )
-								? false
-								: dropCap,
-						} )
-					}
-				/>
-				<ParagraphRTLControl
-					direction={ direction }
-					setDirection={ ( newDirection ) =>
-						setAttributes( { direction: newDirection } )
-					}
-				/>
-			</BlockControls>
-			{ isDropCapFeatureEnabled && (
-				<InspectorControls __experimentalGroup="typography">
-					<ToolsPanelItem
-						hasValue={ () => !! dropCap }
-						label={ __( 'Drop cap' ) }
-						onDeselect={ () =>
-							setAttributes( { dropCap: undefined } )
+			{ blockEditingMode === 'default' && (
+				<BlockControls group="block">
+					<AlignmentControl
+						value={ align }
+						onChange={ ( newAlign ) =>
+							setAttributes( {
+								align: newAlign,
+								dropCap: hasDropCapDisabled( newAlign )
+									? false
+									: dropCap,
+							} )
 						}
-						isShownByDefault={ defaultTypographyControls?.dropCap }
-						resetAllFilter={ () => ( { dropCap: undefined } ) }
-						panelId={ clientId }
-					>
-						<ToggleControl
-							label={ __( 'Drop cap' ) }
-							checked={ !! dropCap }
-							onChange={ () =>
-								setAttributes( { dropCap: ! dropCap } )
-							}
-							help={ helpText }
-							disabled={
-								hasDropCapDisabled( align ) ? true : false
-							}
-						/>
-					</ToolsPanelItem>
-				</InspectorControls>
+					/>
+					<ParagraphRTLControl
+						direction={ direction }
+						setDirection={ ( newDirection ) =>
+							setAttributes( { direction: newDirection } )
+						}
+					/>
+				</BlockControls>
+			) }
+			{ isSingleSelected && (
+				<DropCapControl
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
 			) }
 			<RichText
 				identifier="content"
@@ -137,35 +156,17 @@ function ParagraphBlock( {
 				onChange={ ( newContent ) =>
 					setAttributes( { content: newContent } )
 				}
-				onSplit={ ( value, isOriginal ) => {
-					let newAttributes;
-
-					if ( isOriginal || value ) {
-						newAttributes = {
-							...attributes,
-							content: value,
-						};
-					}
-
-					const block = createBlock( name, newAttributes );
-
-					if ( isOriginal ) {
-						block.clientId = clientId;
-					}
-
-					return block;
-				} }
 				onMerge={ mergeBlocks }
 				onReplace={ onReplace }
 				onRemove={ onRemove }
 				aria-label={
-					content
-						? __( 'Paragraph block' )
-						: __(
+					RichText.isEmpty( content )
+						? __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
+						: __( 'Block: Paragraph' )
 				}
-				data-empty={ content ? false : true }
+				data-empty={ RichText.isEmpty( content ) }
 				placeholder={ placeholder || __( 'Type / to choose a block' ) }
 				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste
diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index 98662ba21c8841..e7f05dab0547ce 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -65,7 +65,7 @@ function ParagraphBlock( {
 				identifier="content"
 				tagName="p"
 				value={ content }
-				deleteEnter={ true }
+				deleteEnter
 				style={ styles }
 				onChange={ ( nextContent ) => {
 					setAttributes( {
diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
index 61dfe13ed9bbaa..369cc5cb1d63a9 100644
--- a/packages/block-library/src/paragraph/editor.scss
+++ b/packages/block-library/src/paragraph/editor.scss
@@ -17,3 +17,8 @@
 		}
 	}
 }
+
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
+	rotate: 180deg;
+}
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 70ae87ccf5f36c..715fb35ec05ab1 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,18 +25,22 @@ export const settings = {
 			content: __(
 				'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
 			),
-			style: {
-				typography: {
-					fontSize: 28,
-				},
-			},
-			dropCap: true,
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
+			if ( customName ) {
+				return customName;
+			}
+
 			const { content } = attributes;
-			return isEmpty( content ) ? __( 'Empty' ) : content;
+			return ! content || content.length === 0 ? __( 'Empty' ) : content;
 		}
 	},
 	transforms,
diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
index 5f451225ff2237..c503b5f2b4322b 100644
--- a/packages/block-library/src/paragraph/save.js
+++ b/packages/block-library/src/paragraph/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
 	const { align, content, dropCap, direction } = attributes;
-	const className = classnames( {
+	const className = clsx( {
 		'has-drop-cap':
 			align === ( isRTL() ? 'left' : 'right' ) || align === 'center'
 				? false
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index f3bb9f8c5aee86..7bd8c77e85de83 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -38,7 +38,8 @@ p.has-drop-cap.has-background {
 	overflow: hidden;
 }
 
-p.has-background {
+// Specificity is reduced to 0-1-0 so global styles can override this.
+:root :where(p.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
@@ -49,3 +50,8 @@ p.has-background {
 :where(p.has-text-color:not(.has-link-color)) a {
 	color: inherit;
 }
+
+p.has-text-align-right[style*="writing-mode:vertical-rl"],
+p.has-text-align-left[style*="writing-mode:vertical-lr"] {
+	rotate: 180deg;
+}
diff --git a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..82b6a608814a72
--- /dev/null
+++ b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph block should be able to use a prefix to create a Heading block 1`] = `
+"<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading"></h1>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block should be able to use a prefix to create a numbered List block 1`] = `
+"<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block should prevent deleting the first Paragraph block when pressing backspace at the start 1`] = `
+"<!-- wp:paragraph -->
+<p>A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Paragraph block should render without crashing and match snapshot 1`] = `
+<View
+  style={
+    [
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={[]}
+    blockType={
+      {
+        "tag": "p",
+      }
+    }
+    deleteEnter={true}
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={16}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholder="Start writing…"
+    placeholderTextColor="gray"
+    selectionColor="black"
+    triggerKeyCodes={[]}
+    value=""
+  />
+</View>
+`;
+
+exports[`Paragraph block should set a font size value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"fontSize":"30px"}}} -->
+<p style="font-size:30px">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Paragraph block should set a line height value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.8}}} -->
+<p style="line-height:1.8">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..3a2a928b81f5e8
--- /dev/null
+++ b/packages/block-library/src/paragraph/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Example text</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Paragraph block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Paragraph block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Paragraph block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block transforms to List block 1`] = `
+"<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Example text</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block transforms to Preformatted block 1`] = `
+"<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Example text</pre>
+<!-- /wp:preformatted -->"
+`;
+
+exports[`Paragraph block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Paragraph block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Example text</pre>
+<!-- /wp:verse -->"
+`;
diff --git a/packages/block-library/src/paragraph/test/edit.native.js b/packages/block-library/src/paragraph/test/edit.native.js
index 5a3f4120d47236..c3c7e7ca49d720 100644
--- a/packages/block-library/src/paragraph/test/edit.native.js
+++ b/packages/block-library/src/paragraph/test/edit.native.js
@@ -1,13 +1,52 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	act,
+	addBlock,
+	dismissModal,
+	getBlock,
+	typeInRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+	triggerBlockListLayout,
+	waitFor,
+	within,
+	withFakeTimers,
+	waitForElementToBeRemoved,
+	waitForModalVisible,
+} from 'test/helpers';
+import Clipboard from '@react-native-clipboard/clipboard';
+import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
+
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import Paragraph from '../edit';
 
+// Mock debounce to prevent potentially belated state updates.
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
+// Mock link suggestions that are fetched by the link picker
+// when typing a search query.
+jest.mock( '@wordpress/core-data/src/fetch', () => ( {
+	__experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
+} ) );
+
+setupCoreBlocks();
+
 const getTestComponentWithContent = ( content ) => {
 	return render(
 		<Paragraph
@@ -20,8 +59,941 @@ const getTestComponentWithContent = ( content ) => {
 };
 
 describe( 'Paragraph block', () => {
-	it( 'renders without crashing', () => {
+	it( 'should render without crashing and match snapshot', () => {
 		const screen = getTestComponentWithContent( '' );
-		expect( screen.container ).toBeTruthy();
+		expect( screen.toJSON() ).toMatchSnapshot();
+	} );
+
+	it( 'should prevent deleting the first Paragraph block when pressing backspace at the start', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 0, finalSelectionEnd: 0 }
+		);
+
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a Heading block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '# ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+
+		const headingBlock = getBlock( screen, 'Heading' );
+		expect( headingBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a Quote block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '> ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		await triggerBlockListLayout( quoteBlock );
+
+		expect( quoteBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '- ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 1,
+			finalSelectionEnd: 1,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should be able to use a prefix to create a numbered List block', async () => {
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+		const text = '1. ';
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, text, {
+			finalSelectionStart: 2,
+			finalSelectionEnd: 2,
+		} );
+
+		fireEvent( paragraphTextInput, 'onChange', {
+			nativeEvent: { text },
+			preventDefault() {},
+		} );
+		const listBlock = getBlock( screen, 'List' );
+		await triggerBlockListLayout( listBlock );
+
+		expect( listBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should bold text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Bold' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <strong>quick</strong> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should italicize text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <em>quick</em> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should strikethrough text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Strikethrough' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <s>quick</s> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should left align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text left' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"left"} -->
+		<p class="has-text-align-left">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should center align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text center' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should right align text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text right' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"right"} -->
+		<p class="has-text-align-right">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should inherit parent alignment', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Quote' );
+		await triggerBlockListLayout( getBlock( screen, 'Quote' ) );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text right' ) );
+
+		// Assert
+		// This not an ideal assertion, as it relies implementation details of the
+		// component: prop names. However, the only aspect we can assert is the prop
+		// passed to Aztec, the native module controlling visual alignment. A less
+		// brittle alternative might be snapshotting, but RNTL does not yet support
+		// focused snapshots, which means the snapshot would be huge.
+		// https://github.com/facebook/react/pull/25329
+		expect(
+			screen.UNSAFE_queryAllByProps( {
+				value: '<p>A quick brown fox jumps over the lazy dog.</p>',
+				placeholder: 'Start writing…',
+				textAlign: 'right',
+			} ).length
+		).toBe( 2 ); // One for Aztec mock, one for the TextInput.
+	} );
+
+	it( 'should preserve alignment when split', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		fireEvent.press( screen.getByLabelText( 'Align text' ) );
+		fireEvent.press( screen.getByLabelText( 'Align text center' ) );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		const string = 'A quick brown fox jumps over the lazy dog.';
+		typeInRichText( paragraphTextInput, string, {
+			finalSelectionStart: string.length / 2,
+			finalSelectionEnd: string.length / 2,
+		} );
+		fireEvent( paragraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">A quick brown fox jum</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph {"align":"center"} -->
+		<p class="has-text-align-center">ps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should link text without selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Add link text' ),
+			'WordPress'
+		);
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
+		);
+		const typeURLInput = await waitFor( () =>
+			screen.getByPlaceholderText( 'Search or type URL' )
+		);
+		fireEvent.changeText( typeURLInput, 'wordpress.org' );
+		await waitForElementToBeRemoved( () =>
+			screen.getByTestId( 'link-picker-loading' )
+		);
+		// Back navigation from link picker uses `setTimeout`
+		await withFakeTimers( () => {
+			fireEvent.press( screen.getByLabelText( 'Apply' ) );
+			act( () => jest.runOnlyPendingTimers() );
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p><a href="http://wordpress.org">WordPress</a></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should link text with selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
+			}
+		);
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
+		);
+		const typeURLInput = await waitFor( () =>
+			screen.getByPlaceholderText( 'Search or type URL' )
+		);
+		fireEvent.changeText( typeURLInput, 'wordpress.org' );
+		await waitForElementToBeRemoved( () =>
+			screen.getByTestId( 'link-picker-loading' )
+		);
+		// Back navigation from link picker uses `setTimeout`
+		await withFakeTimers( () => {
+			fireEvent.press( screen.getByLabelText( 'Apply' ) );
+			act( () => jest.runOnlyPendingTimers() );
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should link text with clipboard contents', async () => {
+		// Arrange
+		Clipboard.getString.mockResolvedValue( 'https://wordpress.org' );
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{
+				finalSelectionStart: 2,
+				finalSelectionEnd: 7,
+			}
+		);
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () => fireEvent.press( screen.getByLabelText( 'Link' ) ) );
+		// Await React Navigation: https://github.com/WordPress/gutenberg/issues/35685#issuecomment-961919931
+		await act( () =>
+			fireEvent.press(
+				screen.getByLabelText( 'Link to, Search or type URL' )
+			)
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="https://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		Clipboard.getString.mockReset();
+	} );
+
+	it( 'should not remove leading or trailing whitespace when formatting', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, '     some text      ', {
+			finalSelectionStart: 5,
+			finalSelectionEnd: 14,
+		} );
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>     <em>some text</em>      </p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should set a text color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"pale-pink"} -->
+		<p class="has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a background color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange"} -->
+		<p class="has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should set a text and background color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'White' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+		<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should remove text and background colors', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange","textColor":"white"} -->
+			<p class="has-white-color has-luminous-vivid-orange-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Go back to the settings menu
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background. Empty' ) );
+
+		// Reset color
+		fireEvent.press( await screen.findByText( 'Reset' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should not have a gradient background color option', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Assert
+		const colorButton = screen.getByLabelText( 'Luminous vivid orange' );
+		expect( colorButton ).toBeDefined();
+
+		const gradientButton = screen.queryByLabelText( 'Gradient' );
+		expect( gradientButton ).toBeNull();
+	} );
+
+	it( 'should set a theme text color', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Tertiary' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph {"textColor":"tertiary"} -->
+		<p class="has-tertiary-color has-text-color">A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+		` );
+	} );
+
+	it( 'should show the contrast check warning', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:paragraph {"backgroundColor":"white","textColor":"white"} -->
+			<p class="has-white-color has-white-background-color has-text-color has-background">A quick brown fox jumps over the lazy dog.</p>
+			<!-- /wp:paragraph -->`,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Assert
+		const contrastCheckElement = screen.getByText(
+			/This color combination/
+		);
+		expect( contrastCheckElement ).toBeDefined();
+	} );
+
+	it( 'should highlight text with selection', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		fireEvent.press( screen.getByLabelText( 'Text color' ) );
+		fireEvent.press( await screen.findByLabelText( 'Tertiary' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <mark style="background-color:rgba(0, 0, 0, 0);color:#2411a4" class="has-inline-color has-tertiary-color">quick</mark> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should show the expected font sizes values', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+		await waitFor( () => screen.getByLabelText( 'Selected: Default' ) );
+
+		// Assert
+		const modalContent = within( blockSettingsModal );
+		expect( modalContent.getByLabelText( 'Small' ) ).toBeVisible();
+		expect( modalContent.getByText( '14px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Medium' ) ).toBeVisible();
+		expect( modalContent.getByText( '17px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '30px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Extra Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '40px' ) ).toBeVisible();
+		expect(
+			modalContent.getByLabelText( 'Extra Extra Large' )
+		).toBeVisible();
+		expect( modalContent.getByText( '52px' ) ).toBeVisible();
+	} );
+
+	it( 'should set a font size value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+
+		// Tap one font size
+		fireEvent.press( screen.getByLabelText( 'Large' ) );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a line height value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		const lineHeightControl = screen.getByLabelText( /Line Height/ );
+		fireEvent.press(
+			within( lineHeightControl ).getByText( '1.5', { hidden: true } )
+		);
+		const lineHeightTextInput = within(
+			lineHeightControl
+		).getByDisplayValue( '1.5', { hidden: true } );
+		fireEvent.changeText( lineHeightTextInput, '1.8' );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should focus on the previous Paragraph block when backspacing in an empty Paragraph block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, 'A quick brown fox jumps' );
+
+		await addBlock( screen, 'Paragraph' );
+		const secondParagraphBlock = getBlock( screen, 'Paragraph', {
+			rowIndex: 2,
+		} );
+		fireEvent.press( secondParagraphBlock );
+
+		// Clear mock history
+		TextInputState.focusTextInput.mockClear();
+
+		const secondParagraphTextInput =
+			within( secondParagraphBlock ).getByPlaceholderText(
+				'Start writing…'
+			);
+		fireEvent( secondParagraphTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: BACKSPACE,
+		} );
+
+		// Assert
+		expect( TextInputState.focusTextInput ).toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/block-library/src/paragraph/test/transforms.native.js b/packages/block-library/src/paragraph/test/transforms.native.js
new file mode 100644
index 00000000000000..bb2d14a9966252
--- /dev/null
+++ b/packages/block-library/src/paragraph/test/transforms.native.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Paragraph';
+const initialHtml = `
+<!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph -->`;
+
+// NOTE: Paragraph block can be transformed to Buttons block in web,
+// however this transform is not supported in the native version.
+const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Heading',
+	'Preformatted',
+	'Pullquote',
+	'Verse',
+	'Code',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/paragraph/use-enter.js b/packages/block-library/src/paragraph/use-enter.js
index 22bef120ef17c9..04c0ba957af91a 100644
--- a/packages/block-library/src/paragraph/use-enter.js
+++ b/packages/block-library/src/paragraph/use-enter.js
@@ -6,7 +6,11 @@ import { useRefEffect } from '@wordpress/compose';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { hasBlockSupport, createBlock } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	createBlock,
+	getDefaultBlockName,
+} from '@wordpress/blocks';
 
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
@@ -23,6 +27,7 @@ export function useOnEnter( props ) {
 		getBlockName,
 		getBlock,
 		getNextBlockClientId,
+		canInsertBlockType,
 	} = useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -56,22 +61,47 @@ export function useOnEnter( props ) {
 			}
 
 			const order = getBlockOrder( wrapperClientId );
-
-			event.preventDefault();
-
 			const position = order.indexOf( clientId );
 
 			// If it is the last block, exit.
 			if ( position === order.length - 1 ) {
-				moveBlocksToPosition(
-					[ clientId ],
-					wrapperClientId,
-					getBlockRootClientId( wrapperClientId ),
-					getBlockIndex( wrapperClientId ) + 1
-				);
+				let newWrapperClientId = wrapperClientId;
+
+				while (
+					! canInsertBlockType(
+						getBlockName( clientId ),
+						getBlockRootClientId( newWrapperClientId )
+					)
+				) {
+					newWrapperClientId =
+						getBlockRootClientId( newWrapperClientId );
+				}
+
+				if ( typeof newWrapperClientId === 'string' ) {
+					event.preventDefault();
+					moveBlocksToPosition(
+						[ clientId ],
+						wrapperClientId,
+						getBlockRootClientId( newWrapperClientId ),
+						getBlockIndex( newWrapperClientId ) + 1
+					);
+				}
 				return;
 			}
 
+			const defaultBlockName = getDefaultBlockName();
+
+			if (
+				! canInsertBlockType(
+					defaultBlockName,
+					getBlockRootClientId( wrapperClientId )
+				)
+			) {
+				return;
+			}
+
+			event.preventDefault();
+
 			// If it is in the middle, split the block in two.
 			const wrapperBlock = getBlock( wrapperClientId );
 			batch( () => {
@@ -87,7 +117,7 @@ export function useOnEnter( props ) {
 					wrapperBlock.innerBlocks.slice( position + 1 )
 				);
 				insertBlock(
-					createBlock( 'core/paragraph' ),
+					createBlock( defaultBlockName ),
 					blockIndex + 1,
 					getBlockRootClientId( wrapperClientId ),
 					true
diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json
index da023142403c87..13fc9d154b15a4 100644
--- a/packages/block-library/src/pattern/block.json
+++ b/packages/block-library/src/pattern/block.json
@@ -1,13 +1,17 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/pattern",
-	"title": "Pattern",
+	"title": "Pattern placeholder",
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"textdomain": "default",
 	"attributes": {
diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
index be0b778eb4ae19..f496132f6e2b1d 100644
--- a/packages/block-library/src/pattern/edit.js
+++ b/packages/block-library/src/pattern/edit.js
@@ -1,14 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useState, useEffect } from '@wordpress/element';
 import {
+	Warning,
 	store as blockEditorStore,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useParsePatternDependencies } from './recursion-detector';
 
 const PatternEdit = ( { attributes, clientId } ) => {
+	const registry = useRegistry();
 	const selectedPattern = useSelect(
 		( select ) =>
 			select( blockEditorStore ).__experimentalGetParsedPattern(
@@ -17,29 +27,135 @@ const PatternEdit = ( { attributes, clientId } ) => {
 		[ attributes.slug ]
 	);
 
-	const { replaceBlocks, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const currentThemeStylesheet = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+
+	const {
+		replaceBlocks,
+		setBlockEditingMode,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+	const { getBlockRootClientId, getBlockEditingMode } =
+		useSelect( blockEditorStore );
+
+	const [ hasRecursionError, setHasRecursionError ] = useState( false );
+	const parsePatternDependencies = useParsePatternDependencies();
+
+	// Duplicated in packages/editor/src/components/start-template-options/index.js.
+	function injectThemeAttributeInBlockTemplateContent( block ) {
+		if (
+			block.innerBlocks.find(
+				( innerBlock ) => innerBlock.name === 'core/template-part'
+			)
+		) {
+			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+				if (
+					innerBlock.name === 'core/template-part' &&
+					innerBlock.attributes.theme === undefined
+				) {
+					innerBlock.attributes.theme = currentThemeStylesheet;
+				}
+				return innerBlock;
+			} );
+		}
+
+		if (
+			block.name === 'core/template-part' &&
+			block.attributes.theme === undefined
+		) {
+			block.attributes.theme = currentThemeStylesheet;
+		}
+		return block;
+	}
 
 	// Run this effect when the component loads.
 	// This adds the Pattern's contents to the post.
 	// This change won't be saved.
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
-		if ( selectedPattern?.blocks ) {
+		if ( ! hasRecursionError && selectedPattern?.blocks ) {
+			try {
+				parsePatternDependencies( selectedPattern );
+			} catch ( error ) {
+				setHasRecursionError( true );
+				return;
+			}
+
 			// We batch updates to block list settings to avoid triggering cascading renders
 			// for each container block included in a tree and optimize initial render.
 			// Since the above uses microtasks, we need to use a microtask here as well,
 			// because nested pattern blocks cannot be inserted if the parent block supports
 			// inner blocks but doesn't have blockSettings in the state.
 			window.queueMicrotask( () => {
-				__unstableMarkNextChangeAsNotPersistent();
-				replaceBlocks( clientId, selectedPattern.blocks );
+				const rootClientId = getBlockRootClientId( clientId );
+				// Clone blocks from the pattern before insertion to ensure they receive
+				// distinct client ids. See https://github.com/WordPress/gutenberg/issues/50628.
+				const clonedBlocks = selectedPattern.blocks.map( ( block ) =>
+					cloneBlock(
+						injectThemeAttributeInBlockTemplateContent( block )
+					)
+				);
+				// If the pattern has a single block and categories, we should add the
+				// categories of the pattern to the block's metadata.
+				if (
+					clonedBlocks.length === 1 &&
+					selectedPattern.categories?.length > 0
+				) {
+					clonedBlocks[ 0 ].attributes = {
+						...clonedBlocks[ 0 ].attributes,
+						metadata: {
+							...clonedBlocks[ 0 ].attributes.metadata,
+							categories: selectedPattern.categories,
+							patternName: selectedPattern.name,
+							name:
+								clonedBlocks[ 0 ].attributes.metadata.name ||
+								selectedPattern.title,
+						},
+					};
+				}
+				const rootEditingMode = getBlockEditingMode( rootClientId );
+				registry.batch( () => {
+					// Temporarily set the root block to default mode to allow replacing the pattern.
+					// This could happen when the page is disabling edits of non-content blocks.
+					__unstableMarkNextChangeAsNotPersistent();
+					setBlockEditingMode( rootClientId, 'default' );
+					__unstableMarkNextChangeAsNotPersistent();
+					replaceBlocks( clientId, clonedBlocks );
+					// Restore the root block's original mode.
+					__unstableMarkNextChangeAsNotPersistent();
+					setBlockEditingMode( rootClientId, rootEditingMode );
+				} );
 			} );
 		}
-	}, [ clientId, selectedPattern?.blocks ] );
+	}, [
+		clientId,
+		hasRecursionError,
+		selectedPattern,
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlocks,
+		getBlockEditingMode,
+		setBlockEditingMode,
+		getBlockRootClientId,
+	] );
 
 	const props = useBlockProps();
 
+	if ( hasRecursionError ) {
+		return (
+			<div { ...props }>
+				<Warning>
+					{ sprintf(
+						// translators: A warning in which %s is the name of a pattern.
+						__( 'Pattern "%s" cannot be rendered inside itself.' ),
+						selectedPattern?.name
+					) }
+				</Warning>
+			</div>
+		);
+	}
+
 	return <div { ...props } />;
 };
 
diff --git a/packages/block-library/src/pattern/index.php b/packages/block-library/src/pattern/index.php
index 32a08601ca8089..870313eb5e86d8 100644
--- a/packages/block-library/src/pattern/index.php
+++ b/packages/block-library/src/pattern/index.php
@@ -8,7 +8,7 @@
 /**
  *  Registers the `core/pattern` block on the server.
  *
- * @return void
+ * @since 5.9.0
  */
 function register_block_core_pattern() {
 	register_block_type_from_metadata(
@@ -22,23 +22,51 @@ function register_block_core_pattern() {
 /**
  * Renders the `core/pattern` block on the server.
  *
+ * @since 6.3.0 Backwards compatibility: blocks with no `syncStatus` attribute do not receive block wrapper.
+ *
+ * @global WP_Embed $wp_embed Used to process embedded content within patterns
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Returns the output of the pattern.
  */
 function render_block_core_pattern( $attributes ) {
+	static $seen_refs = array();
+
 	if ( empty( $attributes['slug'] ) ) {
 		return '';
 	}
 
 	$slug     = $attributes['slug'];
 	$registry = WP_Block_Patterns_Registry::get_instance();
+
 	if ( ! $registry->is_registered( $slug ) ) {
 		return '';
 	}
 
+	if ( isset( $seen_refs[ $attributes['slug'] ] ) ) {
+		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
+		// is set in `wp_debug_mode()`.
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
+
+		return $is_debug ?
+			// translators: Visible only in the front end, this warning takes the place of a faulty block. %s represents a pattern's slug.
+			sprintf( __( '[block rendering halted for pattern "%s"]' ), $slug ) :
+			'';
+	}
+
 	$pattern = $registry->get_registered( $slug );
-	return do_blocks( $pattern['content'] );
+	$content = $pattern['content'];
+
+	$seen_refs[ $attributes['slug'] ] = true;
+
+	$content = do_blocks( $content );
+
+	global $wp_embed;
+	$content = $wp_embed->autoembed( $content );
+
+	unset( $seen_refs[ $attributes['slug'] ] );
+	return $content;
 }
 
 add_action( 'init', 'register_block_core_pattern' );
diff --git a/packages/block-library/src/pattern/recursion-detector.js b/packages/block-library/src/pattern/recursion-detector.js
new file mode 100644
index 00000000000000..f2e80087dd4b07
--- /dev/null
+++ b/packages/block-library/src/pattern/recursion-detector.js
@@ -0,0 +1,145 @@
+/**
+ * THIS MODULE IS INTENTIONALLY KEPT WITHIN THE PATTERN BLOCK'S SOURCE.
+ *
+ * This is because this approach for preventing infinite loops due to
+ * recursively rendering blocks is specific to the way that the `core/pattern`
+ * block behaves in the editor. Any other block types that deal with recursion
+ * SHOULD USE THE STANDARD METHOD for avoiding loops:
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/31455
+ * @see packages/block-editor/src/components/recursion-provider/README.md
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Naming is hard.
+ *
+ * @see useParsePatternDependencies
+ *
+ * @type {WeakMap<Object, Function>}
+ */
+const cachedParsers = new WeakMap();
+
+/**
+ * Hook used by PatternEdit to parse block patterns. It returns a function that
+ * takes a pattern and returns nothing but throws an error if the pattern is
+ * recursive.
+ *
+ * @example
+ * ```js
+ * const parsePatternDependencies = useParsePatternDependencies();
+ * parsePatternDependencies( selectedPattern );
+ * ```
+ *
+ * @see parsePatternDependencies
+ *
+ * @return {Function} A function to parse block patterns.
+ */
+export function useParsePatternDependencies() {
+	const registry = useRegistry();
+
+	// Instead of caching maps, go straight to the point and cache bound
+	// functions. Each of those functions is bound to a different Map that will
+	// keep track of patterns in the context of the given registry.
+	if ( ! cachedParsers.has( registry ) ) {
+		const deps = new Map();
+		cachedParsers.set(
+			registry,
+			parsePatternDependencies.bind( null, deps )
+		);
+	}
+	return cachedParsers.get( registry );
+}
+
+/**
+ * Parse a given pattern and traverse its contents to detect any subsequent
+ * patterns on which it may depend. Such occurrences will be added to an
+ * internal dependency graph. If a circular dependency is detected, an
+ * error will be thrown.
+ *
+ * EXPORTED FOR TESTING PURPOSES ONLY.
+ *
+ * @param {Map<string, Set<string>>} deps           Map of pattern dependencies.
+ * @param {Object}                   pattern        Pattern.
+ * @param {string}                   pattern.name   Pattern name.
+ * @param {Array}                    pattern.blocks Pattern's block list.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function parsePatternDependencies( deps, { name, blocks } ) {
+	const queue = [ ...blocks ];
+	while ( queue.length ) {
+		const block = queue.shift();
+		for ( const innerBlock of block.innerBlocks ?? [] ) {
+			queue.unshift( innerBlock );
+		}
+		if ( block.name === 'core/pattern' ) {
+			registerDependency( deps, name, block.attributes.slug );
+		}
+	}
+}
+
+/**
+ * Declare that pattern `a` depends on pattern `b`. If a circular
+ * dependency is detected, an error will be thrown.
+ *
+ * EXPORTED FOR TESTING PURPOSES ONLY.
+ *
+ * @param {Map<string, Set<string>>} deps Map of pattern dependencies.
+ * @param {string}                   a    Slug for pattern A.
+ * @param {string}                   b    Slug for pattern B.
+ *
+ * @throws {Error} If a circular dependency is detected.
+ */
+export function registerDependency( deps, a, b ) {
+	if ( ! deps.has( a ) ) {
+		deps.set( a, new Set() );
+	}
+	deps.get( a ).add( b );
+	if ( hasCycle( deps, a ) ) {
+		throw new TypeError(
+			`Pattern ${ a } has a circular dependency and cannot be rendered.`
+		);
+	}
+}
+
+/**
+ * Determine if a given pattern has circular dependencies on other patterns.
+ * This will be determined by running a depth-first search on the current state
+ * of the graph represented by `patternDependencies`.
+ *
+ * @param {Map<string, Set<string>>} deps           Map of pattern dependencies.
+ * @param {string}                   slug           Pattern slug.
+ * @param {Set<string>}              [visitedNodes] Set to track visited nodes in the graph.
+ * @param {Set<string>}              [currentPath]  Set to track and backtrack graph paths.
+ * @return {boolean} Whether any cycle was found.
+ */
+function hasCycle(
+	deps,
+	slug,
+	visitedNodes = new Set(),
+	currentPath = new Set()
+) {
+	visitedNodes.add( slug );
+	currentPath.add( slug );
+
+	const dependencies = deps.get( slug ) ?? new Set();
+
+	for ( const dependency of dependencies ) {
+		if ( ! visitedNodes.has( dependency ) ) {
+			if ( hasCycle( deps, dependency, visitedNodes, currentPath ) ) {
+				return true;
+			}
+		} else if ( currentPath.has( dependency ) ) {
+			return true;
+		}
+	}
+
+	// Remove the current node from the current path when backtracking
+	currentPath.delete( slug );
+	return false;
+}
diff --git a/packages/block-library/src/pattern/test/index.js b/packages/block-library/src/pattern/test/index.js
new file mode 100644
index 00000000000000..0f682f6cce67b9
--- /dev/null
+++ b/packages/block-library/src/pattern/test/index.js
@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import {
+	parsePatternDependencies,
+	registerDependency,
+} from '../recursion-detector';
+
+describe( 'core/pattern', () => {
+	const deps = new Map();
+
+	beforeEach( () => {
+		deps.clear();
+	} );
+
+	describe( 'parsePatternDependencies', () => {
+		it( "is silent for patterns that don't require other patterns", () => {
+			const pattern = {
+				name: 'test/benign-pattern',
+				blocks: [ { name: 'core/paragraph' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( deps, pattern );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			const pattern = {
+				name: 'test/evil-pattern',
+				blocks: [ { name: 'core/pattern', slug: 'test/evil-pattern' } ],
+			};
+			expect( () => {
+				parsePatternDependencies( deps, pattern );
+			} ).toThrow();
+		} );
+	} );
+
+	describe( 'registerDependency', () => {
+		it( 'is silent for patterns with no circular dependencies', () => {
+			expect( () => {
+				registerDependency( deps, 'a', 'b' );
+			} ).not.toThrow();
+		} );
+		it( 'catches self-referencing patterns', () => {
+			expect( () => {
+				registerDependency( deps, 'a', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches mutually-referencing patterns', () => {
+			registerDependency( deps, 'a', 'b' );
+			expect( () => {
+				registerDependency( deps, 'b', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches longer cycles', () => {
+			registerDependency( deps, 'a', 'b' );
+			registerDependency( deps, 'b', 'c' );
+			registerDependency( deps, 'b', 'd' );
+			expect( () => {
+				registerDependency( deps, 'd', 'a' );
+			} ).toThrow();
+		} );
+		it( 'catches any pattern depending on a tainted one', () => {
+			registerDependency( deps, 'a', 'b' );
+			registerDependency( deps, 'b', 'c' );
+			registerDependency( deps, 'b', 'd' );
+			expect( () => {
+				registerDependency( deps, 'd', 'a' );
+			} ).toThrow();
+			expect( () => {
+				registerDependency( deps, 'e', 'd' );
+			} ).toThrow();
+		} );
+	} );
+} );
diff --git a/packages/block-library/src/post-author-biography/block.json b/packages/block-library/src/post-author-biography/block.json
index 434b6b0965880c..c6e27bc484dfd0 100644
--- a/packages/block-library/src/post-author-biography/block.json
+++ b/packages/block-library/src/post-author-biography/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-author-biography",
-	"title": "Post Author Biography",
+	"title": "Author Biography",
 	"category": "theme",
 	"description": "The author biography.",
 	"textdomain": "default",
@@ -12,6 +12,9 @@
 		}
 	},
 	"usesContext": [ "postType", "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"spacing": {
 			"margin": true,
@@ -37,6 +40,22 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-biography"
 }
diff --git a/packages/block-library/src/post-author-biography/edit.js b/packages/block-library/src/post-author-biography/edit.js
index 6bd733f32fd466..20f9e94302e4b1 100644
--- a/packages/block-library/src/post-author-biography/edit.js
+++ b/packages/block-library/src/post-author-biography/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ function PostAuthorBiographyEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-author-biography/index.php b/packages/block-library/src/post-author-biography/index.php
index 3ea6ecbd9b46a1..bd983f79e76092 100644
--- a/packages/block-library/src/post-author-biography/index.php
+++ b/packages/block-library/src/post-author-biography/index.php
@@ -8,17 +8,20 @@
 /**
  * Renders the `core/post-author-biography` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
  * @return string Returns the rendered post author biography block.
  */
 function render_block_core_post_author_biography( $attributes, $content, $block ) {
-	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+	if ( isset( $block->context['postId'] ) ) {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	} else {
+		$author_id = get_query_var( 'author' );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}
@@ -36,6 +39,8 @@ function render_block_core_post_author_biography( $attributes, $content, $block
 
 /**
  * Registers the `core/post-author-biography` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_post_author_biography() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-author-biography/style.scss b/packages/block-library/src/post-author-biography/style.scss
new file mode 100644
index 00000000000000..9a69fac9ba95b8
--- /dev/null
+++ b/packages/block-library/src/post-author-biography/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-author-biography {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json
index 34cf8886e9f032..68d2c49bd91056 100644
--- a/packages/block-library/src/post-author-name/block.json
+++ b/packages/block-library/src/post-author-name/block.json
@@ -1,9 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"__experimental": true,
+	"apiVersion": 3,
 	"name": "core/post-author-name",
-	"title": "Post Author Name",
+	"title": "Author Name",
 	"category": "theme",
 	"description": "The author name.",
 	"textdomain": "default",
@@ -21,6 +20,9 @@
 		}
 	},
 	"usesContext": [ "postType", "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"spacing": {
@@ -48,6 +50,22 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	}
+	},
+	"style": "wp-block-post-author-name"
 }
diff --git a/packages/block-library/src/post-author-name/edit.js b/packages/block-library/src/post-author-name/edit.js
index 8eda3bf92d193c..b4afb9a9799498 100644
--- a/packages/block-library/src/post-author-name/edit.js
+++ b/packages/block-library/src/post-author-name/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -39,7 +39,7 @@ function PostAuthorNameEdit( {
 	);
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -69,14 +69,16 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {
diff --git a/packages/block-library/src/post-author-name/index.php b/packages/block-library/src/post-author-name/index.php
index 08496d3e963bff..effc83962a3547 100644
--- a/packages/block-library/src/post-author-name/index.php
+++ b/packages/block-library/src/post-author-name/index.php
@@ -8,35 +8,45 @@
 /**
  * Renders the `core/post-author-name` block on the server.
  *
+ * @since 6.2.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
  * @return string Returns the rendered post author name block.
  */
 function render_block_core_post_author_name( $attributes, $content, $block ) {
-	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+	if ( isset( $block->context['postId'] ) ) {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
+	} else {
+		$author_id = get_query_var( 'author' );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}
 
-	$author_name      = get_the_author_meta( 'display_name', $author_id );
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-
+	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $author_name );
 }
 
 /**
  * Registers the `core/post-author-name` block on the server.
+ *
+ * @since 6.2.0
  */
 function register_block_core_post_author_name() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-author-name/style.scss b/packages/block-library/src/post-author-name/style.scss
new file mode 100644
index 00000000000000..0f57b30490fa68
--- /dev/null
+++ b/packages/block-library/src/post-author-name/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-author-name {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index 7d7cd28225bc8c..d66498c8ee3df9 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-author",
-	"title": "Post Author",
+	"title": "Author",
 	"category": "theme",
 	"description": "Display post author details such as name, avatar, and bio.",
 	"textdomain": "default",
@@ -61,6 +61,21 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-author-editor",
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index 1fc13ea42add9f..6186b0d052e8aa 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,7 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -62,7 +63,7 @@ function PostAuthorEdit( {
 		attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
-	if ( authorDetails ) {
+	if ( authorDetails?.avatar_urls ) {
 		Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
 			avatarSizes.push( {
 				value: size,
@@ -72,7 +73,7 @@ function PostAuthorEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -93,72 +94,89 @@ function PostAuthorEdit( {
 	};
 
 	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
+	const showAuthorControl =
+		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ !! postId &&
-						! isDescendentOfQueryLoop &&
-						authorOptions.length &&
-						( ( showCombobox && (
-							<ComboboxControl
-								label={ __( 'Author' ) }
-								options={ authorOptions }
-								value={ authorId }
-								onChange={ handleSelect }
-								allowReset={ false }
-							/>
-						) ) || (
+					<VStack
+						spacing={ 4 }
+						className="wp-block-post-author__inspector-settings"
+					>
+						{ showAuthorControl &&
+							( ( showCombobox && (
+								<ComboboxControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									options={ authorOptions }
+									value={ authorId }
+									onChange={ handleSelect }
+									allowReset={ false }
+								/>
+							) ) || (
+								<SelectControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Author' ) }
+									value={ authorId }
+									options={ authorOptions }
+									onChange={ handleSelect }
+								/>
+							) ) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show avatar' ) }
+							checked={ showAvatar }
+							onChange={ () =>
+								setAttributes( { showAvatar: ! showAvatar } )
+							}
+						/>
+						{ showAvatar && (
 							<SelectControl
-								label={ __( 'Author' ) }
-								value={ authorId }
-								options={ authorOptions }
-								onChange={ handleSelect }
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Avatar size' ) }
+								value={ attributes.avatarSize }
+								options={ avatarSizes }
+								onChange={ ( size ) => {
+									setAttributes( {
+										avatarSize: Number( size ),
+									} );
+								} }
 							/>
-						) ) }
-					<ToggleControl
-						label={ __( 'Show avatar' ) }
-						checked={ showAvatar }
-						onChange={ () =>
-							setAttributes( { showAvatar: ! showAvatar } )
-						}
-					/>
-					{ showAvatar && (
-						<SelectControl
-							label={ __( 'Avatar size' ) }
-							value={ attributes.avatarSize }
-							options={ avatarSizes }
-							onChange={ ( size ) => {
-								setAttributes( {
-									avatarSize: Number( size ),
-								} );
-							} }
+						) }
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show bio' ) }
+							checked={ showBio }
+							onChange={ () =>
+								setAttributes( { showBio: ! showBio } )
+							}
 						/>
-					) }
-					<ToggleControl
-						label={ __( 'Show bio' ) }
-						checked={ showBio }
-						onChange={ () =>
-							setAttributes( { showBio: ! showBio } )
-						}
-					/>
-					<ToggleControl
-						label={ __( 'Link author name to author page' ) }
-						checked={ isLink }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					/>
-					{ isLink && (
 						<ToggleControl
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							__nextHasNoMarginBottom
+							label={ __( 'Link author name to author page' ) }
+							checked={ isLink }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
 						/>
-					) }
+						{ isLink && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						) }
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 
@@ -172,7 +190,7 @@ function PostAuthorEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				{ showAvatar && authorDetails && (
+				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
 							width={ attributes.avatarSize }
@@ -188,8 +206,8 @@ function PostAuthorEdit( {
 				<div className="wp-block-post-author__content">
 					{ ( ! RichText.isEmpty( byline ) || isSelected ) && (
 						<RichText
+							identifier="byline"
 							className="wp-block-post-author__byline"
-							multiline={ false }
 							aria-label={ __( 'Post author byline text' ) }
 							placeholder={ __( 'Write byline…' ) }
 							value={ byline }
diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
new file mode 100644
index 00000000000000..f6464893138cff
--- /dev/null
+++ b/packages/block-library/src/post-author/editor.scss
@@ -0,0 +1,7 @@
+.wp-block-post-author__inspector-settings {
+	// Counteract the margin added by the block inspector.
+	.components-base-control,
+	.components-base-control:last-child {
+		margin-bottom: 0;
+	}
+}
diff --git a/packages/block-library/src/post-author/index.js b/packages/block-library/src/post-author/index.js
index 8c91b99f7f6f59..b9b17c0899fc4f 100644
--- a/packages/block-library/src/post-author/index.js
+++ b/packages/block-library/src/post-author/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { postAuthor as icon } from '@wordpress/icons';
 
 /**
@@ -15,6 +16,13 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			showBio: true,
+			byline: __( 'Posted by' ),
+		},
+	},
 	edit,
 };
 
diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index 49890067c0eb99..faf894d997d732 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-author` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -32,14 +34,20 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	$link        = get_author_posts_url( $author_id );
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( ! empty( $attributes['isLink'] && ! empty( $attributes['linkTarget'] ) ) ) {
-		$author_name = sprintf( '<a href="%1s" target="%2s">%2s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s">%3$s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$byline  = ! empty( $attributes['byline'] ) ? $attributes['byline'] : false;
-	$classes = array_merge(
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		isset( $attributes['textAlign'] ) ? array( 'has-text-align-' . $attributes['textAlign'] ) : array()
-	);
+	$classes = array();
+	if ( isset( $attributes['itemsJustification'] ) ) {
+		$classes[] = 'items-justified-' . $attributes['itemsJustification'];
+	}
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
@@ -55,6 +63,8 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-author` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_post_author() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
index 0b2d63aab44f60..28fd4fad3cf5a7 100644
--- a/packages/block-library/src/post-author/style.scss
+++ b/packages/block-library/src/post-author/style.scss
@@ -1,6 +1,7 @@
 .wp-block-post-author {
 	display: flex;
 	flex-wrap: wrap;
+	box-sizing: border-box;
 
 	&__byline {
 		width: 100%;
diff --git a/packages/block-library/src/post-comment/block.json b/packages/block-library/src/post-comment/block.json
index 42b434d52cca01..071ef550deb9bc 100644
--- a/packages/block-library/src/post-comment/block.json
+++ b/packages/block-library/src/post-comment/block.json
@@ -1,10 +1,18 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comment",
-	"title": "Post Comment (deprecated)",
+	"title": "Comment (deprecated)",
 	"category": "theme",
+	"allowedBlocks": [
+		"core/avatar",
+		"core/comment-author-name",
+		"core/comment-content",
+		"core/comment-date",
+		"core/comment-edit-link",
+		"core/comment-reply-link"
+	],
 	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
@@ -17,6 +25,9 @@
 	},
 	"supports": {
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }
diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
index 7a012042dcfab9..a5193e427fa981 100644
--- a/packages/block-library/src/post-comment/edit.js
+++ b/packages/block-library/src/post-comment/edit.js
@@ -7,14 +7,6 @@ import { useState } from '@wordpress/element';
 import { blockDefault } from '@wordpress/icons';
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-const ALLOWED_BLOCKS = [
-	'core/avatar',
-	'core/comment-author-name',
-	'core/comment-content',
-	'core/comment-date',
-	'core/comment-edit-link',
-	'core/comment-reply-link',
-];
 const TEMPLATE = [
 	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
@@ -29,7 +21,6 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: ALLOWED_BLOCKS,
 	} );
 
 	if ( ! commentId ) {
@@ -43,6 +34,8 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
 							setCommentIdInput( parseInt( val ) )
@@ -50,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					/>
 
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
 							setAttributes( { commentId: commentIdInput } );
diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
index a30920fbbee3ee..796e6e3830236c 100644
--- a/packages/block-library/src/post-comments-count/block.json
+++ b/packages/block-library/src/post-comments-count/block.json
@@ -1,9 +1,9 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comments-count",
-	"title": "Post Comments Count",
+	"title": "Comments Count",
 	"category": "theme",
 	"description": "Display a post's comments count.",
 	"textdomain": "default",
@@ -38,6 +38,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/post-comments-count/edit.js b/packages/block-library/src/post-comments-count/edit.js
index e5d0ec9352edaf..9e148a1c33b03b 100644
--- a/packages/block-library/src/post-comments-count/edit.js
+++ b/packages/block-library/src/post-comments-count/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export default function PostCommentsCountEdit( {
 	const { postId } = context;
 	const [ commentsCount, setCommentsCount ] = useState();
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index 5ed4122d1147b2..af893ccb67a082 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-comments-form",
-	"title": "Post Comments Form",
+	"title": "Comments Form",
 	"category": "theme",
 	"description": "Display a post's comments form.",
 	"textdomain": "default",
@@ -16,6 +16,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
@@ -36,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",
diff --git a/packages/block-library/src/post-comments-form/edit.js b/packages/block-library/src/post-comments-form/edit.js
index 56eab195b4a29e..11089cbe627ffa 100644
--- a/packages/block-library/src/post-comments-form/edit.js
+++ b/packages/block-library/src/post-comments-form/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,6 +11,9 @@ import {
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,10 +28,14 @@ export default function PostCommentsFormEdit( {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
 
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
+
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
+		'aria-describedby': instanceIdDesc,
 	} );
 
 	return (
@@ -43,6 +50,9 @@ export default function PostCommentsFormEdit( {
 			</BlockControls>
 			<div { ...blockProps }>
 				<CommentsForm postId={ postId } postType={ postType } />
+				<VisuallyHidden id={ instanceIdDesc }>
+					{ __( 'Comments form disabled in editor.' ) }
+				</VisuallyHidden>
 			</div>
 		</>
 	);
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
index 0fc858c178a6e8..20f0ebca61ead6 100644
--- a/packages/block-library/src/post-comments-form/form.js
+++ b/packages/block-library/src/post-comments-form/form.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,7 +23,11 @@ const CommentsFormPlaceholder = () => {
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" inert="true">
+			<form
+				noValidate
+				className="comment-form"
+				onSubmit={ ( event ) => event.preventDefault() }
+			>
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }
@@ -33,18 +37,20 @@ const CommentsFormPlaceholder = () => {
 						name="comment"
 						cols="45"
 						rows="8"
+						readOnly
 					/>
 				</p>
 				<p className="form-submit wp-block-button">
 					<input
 						name="submit"
 						type="submit"
-						className={ classnames(
+						className={ clsx(
 							'wp-block-button__link',
 							__experimentalGetElementClassName( 'button' )
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
+						aria-disabled="true"
 					/>
 				</p>
 			</form>
@@ -78,6 +84,7 @@ const CommentsForm = ( { postId, postType } ) => {
 		if ( 'closed' === commentStatus ) {
 			const actions = [
 				<Button
+					__next40pxDefaultSize
 					key="enableComments"
 					onClick={ () => setCommentStatus( 'open' ) }
 					variant="primary"
diff --git a/packages/block-library/src/post-comments-form/index.php b/packages/block-library/src/post-comments-form/index.php
index 53a6f8b5242a90..dfbf4c59f264ad 100644
--- a/packages/block-library/src/post-comments-form/index.php
+++ b/packages/block-library/src/post-comments-form/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-form` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -22,12 +24,14 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return;
 	}
 
-	$classes = 'comment-respond'; // See comment further below.
+	$classes = array( 'comment-respond' ); // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= ' has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
-
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
 
@@ -52,6 +56,8 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-comments-form` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_post_comments_form() {
 	register_block_type_from_metadata(
@@ -66,6 +72,8 @@ function register_block_core_post_comments_form() {
 /**
  * Use the button block classes for the form-submit button.
  *
+ * @since 6.0.0
+ *
  * @param array $fields The default comment form arguments.
  *
  * @return array Returns the modified fields.
diff --git a/packages/block-library/src/post-comments-form/style.scss b/packages/block-library/src/post-comments-form/style.scss
index 807bcff416fb09..b400849ba83bdb 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -1,3 +1,18 @@
+// Allow these default styles to be overridden by global styles.
+:where(.wp-block-post-comments-form) {
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:where(:not([type="submit"]):not([type="checkbox"])) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+}
+
 .wp-block-post-comments-form {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
@@ -23,7 +38,7 @@
 	}
 
 	// Styles copied from button block styles.
-	input[type="submit"] {
+	:where(input[type="submit"]) {
 		box-shadow: none;
 		cursor: pointer;
 		display: inline-block;
@@ -31,21 +46,11 @@
 		overflow-wrap: break-word;
 	}
 
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
-
-	textarea,
-	input:not([type="submit"]):not([type="checkbox"]) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
-
 	.comment-form {
 		textarea,
-		input:not([type="submit"]):not([type="checkbox"]) {
+		// Make sure to not set display block on hidden input fields, to prevent
+		// the Safari bug experienced in https://github.com/WordPress/gutenberg/issues/50830
+		input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]) {
 			display: block;
 			box-sizing: border-box;
 			width: 100%;
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
index 29b4a2f8f54453..67831b1d15c5d5 100644
--- a/packages/block-library/src/post-comments-link/block.json
+++ b/packages/block-library/src/post-comments-link/block.json
@@ -1,9 +1,9 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/post-comments-link",
-	"title": "Post Comments Link",
+	"title": "Comments Link",
 	"category": "theme",
 	"description": "Displays the link to the current post comments.",
 	"textdomain": "default",
@@ -39,6 +39,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/post-comments-link/edit.js b/packages/block-library/src/post-comments-link/edit.js
index 36e617c55a3e7d..e90734e9740bb3 100644
--- a/packages/block-library/src/post-comments-link/edit.js
+++ b/packages/block-library/src/post-comments-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ function PostCommentsLinkEdit( { context, attributes, setAttributes } ) {
 	const [ commentsCount, setCommentsCount ] = useState();
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/post-comments-link/index.php b/packages/block-library/src/post-comments-link/index.php
index d2460497e74404..a8092190086a76 100644
--- a/packages/block-library/src/post-comments-link/index.php
+++ b/packages/block-library/src/post-comments-link/index.php
@@ -22,8 +22,14 @@ function render_block_core_post_comments_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 	$comments_number    = (int) get_comments_number( $block->context['postId'] );
 	$comments_link      = get_comments_link( $block->context['postId'] );
 	$post_title         = get_the_title( $block->context['postId'] );
diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json
index c6041e036d132d..ed9c47154b2f8e 100644
--- a/packages/block-library/src/post-content/block.json
+++ b/packages/block-library/src/post-content/block.json
@@ -1,19 +1,46 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-content",
-	"title": "Post Content",
+	"title": "Content",
 	"category": "theme",
 	"description": "Displays the contents of a post or page.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"__experimentalLayout": true,
+		"layout": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"dimensions": {
 			"minHeight": true
 		},
+		"spacing": {
+			"blockGap": true,
+			"padding": true,
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": false,
+				"text": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -26,7 +53,20 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
+	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
-}
+}
\ No newline at end of file
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index e190101aa05155..582165303c0d05 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -2,32 +2,64 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	useSetting,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
-	store as blockEditorStore,
+	RecursionProvider,
+	useHasRecursion,
 	Warning,
+	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
-import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import {
+	useEntityProp,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
-function ReadOnlyContent( { userCanEdit, postType, postId } ) {
+function ReadOnlyContent( {
+	parentLayout,
+	layoutClassNames,
+	userCanEdit,
+	postType,
+	postId,
+} ) {
 	const [ , , content ] = useEntityProp(
 		'postType',
 		postType,
 		'content',
 		postId
 	);
-	const blockProps = useBlockProps();
-	return content?.protected && ! userCanEdit ? (
+	const blockProps = useBlockProps( { className: layoutClassNames } );
+	const blocks = useMemo( () => {
+		return content?.raw ? parse( content.raw ) : [];
+	}, [ content?.raw ] );
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+		props: blockProps,
+		layout: parentLayout,
+	} );
+
+	if ( userCanEdit ) {
+		/*
+		 * Rendering the block preview using the raw content blocks allows for
+		 * block support styles to be generated and applied by the editor.
+		 *
+		 * The preview using the raw blocks can only be presented to users with
+		 * edit permissions for the post to prevent potential exposure of private
+		 * block content.
+		 */
+		return <div { ...blockPreviewProps }></div>;
+	}
+
+	return content?.protected ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
 		</div>
@@ -39,44 +71,59 @@ function ReadOnlyContent( { userCanEdit, postType, postId } ) {
 	);
 }
 
-function EditableContent( { layout, context = {} } ) {
+function EditableContent( { context = {} } ) {
 	const { postType, postId } = context;
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings()?.supportsLayout;
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		postType,
 		{ id: postId }
 	);
 
+	const entityRecord = useSelect(
+		( select ) => {
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+		},
+		[ postType, postId ]
+	);
+
+	const hasInnerBlocks = !! entityRecord?.content?.raw || blocks?.length;
+
+	const initialInnerBlocks = [ [ 'core/paragraph' ] ];
+
 	const props = useInnerBlocksProps(
 		useBlockProps( { className: 'entry-content' } ),
 		{
 			value: blocks,
 			onInput,
 			onChange,
-			__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+			template: ! hasInnerBlocks ? initialInnerBlocks : undefined,
 		}
 	);
 	return <div { ...props } />;
 }
 
 function Content( props ) {
-	const { context: { queryId, postType, postId } = {} } = props;
-	const isDescendentOfQueryLoop = Number.isFinite( queryId );
+	const { context: { queryId, postType, postId } = {}, layoutClassNames } =
+		props;
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
+	if ( userCanEdit === undefined ) {
+		return null;
+	}
+
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 
 	return isEditable ? (
 		<EditableContent { ...props } />
 	) : (
 		<ReadOnlyContent
+			parentLayout={ props.parentLayout }
+			layoutClassNames={ layoutClassNames }
 			userCanEdit={ userCanEdit }
 			postType={ postType }
 			postId={ postId }
@@ -90,7 +137,7 @@ function Placeholder( { layoutClassNames } ) {
 		<div { ...blockProps }>
 			<p>
 				{ __(
-					'This is the Post Content block, it will display all the blocks in any single post or page.'
+					'This is the Content block, it will display all the blocks in any single post or page.'
 				) }
 			</p>
 			<p>
@@ -100,7 +147,7 @@ function Placeholder( { layoutClassNames } ) {
 			</p>
 			<p>
 				{ __(
-					'If there are any Custom Post Types registered at your site, the Post Content block can display the contents of those entries as well.'
+					'If there are any Custom Post Types registered at your site, the Content block can display the contents of those entries as well.'
 				) }
 			</p>
 		</div>
@@ -120,11 +167,10 @@ function RecursionError() {
 
 export default function PostContentEdit( {
 	context,
-	attributes,
 	__unstableLayoutClassNames: layoutClassNames,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
-	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
@@ -134,7 +180,11 @@ export default function PostContentEdit( {
 	return (
 		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
-				<Content context={ context } layout={ layout } />
+				<Content
+					context={ context }
+					parentLayout={ parentLayout }
+					layoutClassNames={ layoutClassNames }
+				/>
 			) : (
 				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }
diff --git a/packages/block-library/src/post-content/index.php b/packages/block-library/src/post-content/index.php
index 228a0d52f40699..25be880cc47887 100644
--- a/packages/block-library/src/post-content/index.php
+++ b/packages/block-library/src/post-content/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-content` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -25,8 +27,7 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 	if ( isset( $seen_ids[ $post_id ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.
@@ -36,12 +37,6 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 
 	$seen_ids[ $post_id ] = true;
 
-	// Check is needed for backward compatibility with third-party plugins
-	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
-	if ( ! in_the_loop() && have_posts() ) {
-		the_post();
-	}
-
 	// When inside the main loop, we want to use queried object
 	// so that `the_preview` for the current post can apply.
 	// We force this behavior by omitting the third argument (post ID) from the `get_the_content`.
@@ -70,6 +65,8 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-content` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_content() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-content/style.scss b/packages/block-library/src/post-content/style.scss
new file mode 100644
index 00000000000000..1d3e210e1210d7
--- /dev/null
+++ b/packages/block-library/src/post-content/style.scss
@@ -0,0 +1,3 @@
+.wp-block-post-content {
+	display: flow-root;
+}
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index b469dbe87d7e07..470bddae53bdfc 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-date",
-	"title": "Post Date",
+	"title": "Date",
 	"category": "theme",
-	"description": "Add the date of this post.",
+	"description": "Display the publish date for an entry such as a post or page.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {
@@ -23,6 +23,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {
@@ -50,6 +53,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	}
 }
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index 810eea2ebc9051..5057466c6af453 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -1,14 +1,18 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
-import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import {
+	dateI18n,
+	humanTimeDiff,
+	getSettings as getDateSettings,
+} from '@wordpress/date';
 import {
 	AlignmentControl,
 	BlockControls,
@@ -24,7 +28,7 @@ import {
 	ToggleControl,
 	PanelBody,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
@@ -35,8 +39,9 @@ export default function PostDateEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
+			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
 
@@ -76,12 +81,17 @@ export default function PostDateEdit( {
 		[ postTypeSlug ]
 	);
 
+	const dateLabel =
+		displayType === 'date' ? __( 'Post Date' ) : __( 'Post Modified Date' );
+
 	let postDate = date ? (
 		<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>
-			{ dateI18n( format || siteFormat, date ) }
+			{ format === 'human-diff'
+				? humanTimeDiff( date )
+				: dateI18n( format || siteFormat, date ) }
 		</time>
 	) : (
-		__( 'Post Date' )
+		dateLabel
 	);
 
 	if ( isLink && date ) {
@@ -104,40 +114,49 @@ export default function PostDateEdit( {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ date && ! isDescendentOfQueryLoop && (
-					<ToolbarGroup>
-						<Dropdown
-							popoverProps={ popoverProps }
-							renderContent={ ( { onClose } ) => (
-								<PublishDateTimePicker
-									currentDate={ date }
-									onChange={ setDate }
-									is12Hour={ is12HourFormat(
-										siteTimeFormat
-									) }
-									onClose={ onClose }
-								/>
-							) }
-							renderToggle={ ( { isOpen, onToggle } ) => {
-								const openOnArrowDown = ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								};
-								return (
-									<ToolbarButton
-										aria-expanded={ isOpen }
-										icon={ edit }
-										title={ __( 'Change Date' ) }
-										onClick={ onToggle }
-										onKeyDown={ openOnArrowDown }
+				{ date &&
+					displayType === 'date' &&
+					! isDescendentOfQueryLoop && (
+						<ToolbarGroup>
+							<Dropdown
+								popoverProps={ popoverProps }
+								renderContent={ ( { onClose } ) => (
+									<PublishDateTimePicker
+										currentDate={ date }
+										onChange={ setDate }
+										is12Hour={ is12HourFormat(
+											siteTimeFormat
+										) }
+										onClose={ onClose }
+										dateOrder={
+											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+											_x( 'dmy', 'date order' )
+										}
 									/>
-								);
-							} }
-						/>
-					</ToolbarGroup>
-				) }
+								) }
+								renderToggle={ ( { isOpen, onToggle } ) => {
+									const openOnArrowDown = ( event ) => {
+										if (
+											! isOpen &&
+											event.keyCode === DOWN
+										) {
+											event.preventDefault();
+											onToggle();
+										}
+									};
+									return (
+										<ToolbarButton
+											aria-expanded={ isOpen }
+											icon={ edit }
+											title={ __( 'Change Date' ) }
+											onClick={ onToggle }
+											onKeyDown={ openOnArrowDown }
+										/>
+									);
+								} }
+							/>
+						</ToolbarGroup>
+					) }
 			</BlockControls>
 
 			<InspectorControls>
@@ -150,6 +169,7 @@ export default function PostDateEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -163,6 +183,7 @@ export default function PostDateEdit( {
 						checked={ isLink }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display last modified date' ) }
 						onChange={ ( value ) =>
 							setAttributes( {
@@ -170,6 +191,9 @@ export default function PostDateEdit( {
 							} )
 						}
 						checked={ displayType === 'modified' }
+						help={ __(
+							'Only shows if the post has been modified'
+						) }
 					/>
 				</PanelBody>
 			</InspectorControls>
diff --git a/packages/block-library/src/post-date/index.js b/packages/block-library/src/post-date/index.js
index fddae539acfa34..232b715c3795b6 100644
--- a/packages/block-library/src/post-date/index.js
+++ b/packages/block-library/src/post-date/index.js
@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php
index fc1537d1566896..79aa81e7f9c11a 100644
--- a/packages/block-library/src/post-date/index.php
+++ b/packages/block-library/src/post-date/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-date` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -18,18 +20,51 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID            = $block->context['postId'];
-	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$post_ID = $block->context['postId'];
 
-	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
-		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-		$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+		$post_timestamp = get_post_timestamp( $post_ID );
+		if ( $post_timestamp > time() ) {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s from now' ), human_time_diff( $post_timestamp ) );
+		} else {
+			// translators: %s: human-readable time difference.
+			$formatted_date = sprintf( __( '%s ago' ), human_time_diff( $post_timestamp ) );
+		}
 	} else {
-		$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
-		$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+	}
+	$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	$classes          = array();
+
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
+	/*
+	 * If the "Display last modified date" setting is enabled,
+	 * only display the modified date if it is later than the publishing date.
+	 */
+	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
+			if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
+				// translators: %s: human-readable time difference.
+				$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
+			} else {
+				$formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+			}
+			$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+			$classes[]        = 'wp-block-post-date__modified-date';
+		} else {
+			return '';
+		}
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}
@@ -44,6 +79,8 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-date` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_date() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-date/variations.js b/packages/block-library/src/post-date/variations.js
new file mode 100644
index 00000000000000..caeed79f93eab4
--- /dev/null
+++ b/packages/block-library/src/post-date/variations.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { postDate } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'post-date-modified',
+		title: __( 'Modified Date' ),
+		description: __( "Display a post's last updated date." ),
+		attributes: { displayType: 'modified' },
+		scope: [ 'block', 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.displayType === 'modified',
+		icon: postDate,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index 03107ff900e068..61888ced43e67d 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-excerpt",
-	"title": "Post Excerpt",
+	"title": "Excerpt",
 	"category": "theme",
-	"description": "Display a post's excerpt.",
+	"description": "Display the excerpt.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {
@@ -16,9 +16,16 @@
 		"showMoreOnNewLine": {
 			"type": "boolean",
 			"default": true
+		},
+		"excerptLength": {
+			"type": "number",
+			"default": 55
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {
@@ -46,6 +53,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 2db315645c86c1..05aaf543b59196 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
@@ -16,60 +16,104 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
+const ELLIPSIS = '…';
+
 export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine },
+	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
-	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 	const [
 		rawExcerpt,
 		setExcerpt,
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
+
+	/**
+	 * Check if the post type supports excerpts.
+	 * Add an exception and return early for the "page" post type,
+	 * which is registered without support for the excerpt UI,
+	 * but supports saving the excerpt to the database.
+	 * See: https://core.trac.wordpress.org/browser/branches/6.1/src/wp-includes/post.php#L65
+	 * Without this exception, users that have excerpts saved to the database will
+	 * not be able to edit the excerpts.
+	 */
+	const postTypeSupportsExcerpts = useSelect(
+		( select ) => {
+			if ( postType === 'page' ) {
+				return true;
+			}
+			return !! select( coreStore ).getPostType( postType )?.supports
+				?.excerpt;
+		},
+		[ postType ]
+	);
+
+	/**
+	 * The excerpt is editable if:
+	 * - The user can edit the post
+	 * - It is not a descendent of a Query Loop block
+	 * - The post type supports excerpts
+	 */
+	const isEditable =
+		userCanEdit && ! isDescendentOfQueryLoop && postTypeSupportsExcerpts;
+
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+
+	/**
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+
 	/**
 	 * When excerpt is editable, strip the html tags from
 	 * rendered excerpt. This will be used if the entity's
 	 * excerpt has been produced from the content.
 	 */
 	const strippedRenderedExcerpt = useMemo( () => {
-		if ( ! renderedExcerpt ) return '';
+		if ( ! renderedExcerpt ) {
+			return '';
+		}
 		const document = new window.DOMParser().parseFromString(
 			renderedExcerpt,
 			'text/html'
 		);
 		return document.body.textContent || document.body.innerText || '';
 	}, [ renderedExcerpt ] );
+
 	if ( ! postType || ! postId ) {
 		return (
-			<div { ...blockProps }>
-				<p>
-					{ __(
-						'This is the Post Excerpt block, it will display the excerpt from single posts.'
-					) }
-				</p>
-				<p>
-					{ __(
-						'If there are any Custom Post Types with support for excerpts, the Post Excerpt block can display the excerpts of those entries as well.'
-					) }
-				</p>
-			</div>
+			<>
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+				<div { ...blockProps }>
+					<p>{ __( 'This block will display the excerpt.' ) }</p>
+				</div>
+			</>
 		);
 	}
 	if ( isProtected && ! userCanEdit ) {
@@ -77,7 +121,7 @@ export default function PostExcerptEditor( {
 			<div { ...blockProps }>
 				<Warning>
 					{ __(
-						'There is no excerpt because this is a protected post.'
+						'The content is currently protected and does not have the available excerpt.'
 					) }
 				</Warning>
 			</div>
@@ -85,6 +129,7 @@ export default function PostExcerptEditor( {
 	}
 	const readMoreLink = (
 		<RichText
+			identifier="moreText"
 			className="wp-block-post-excerpt__more-link"
 			tagName="a"
 			aria-label={ __( '“Read more” link text' ) }
@@ -93,27 +138,74 @@ export default function PostExcerptEditor( {
 			onChange={ ( newMoreText ) =>
 				setAttributes( { moreText: newMoreText } )
 			}
-			withoutInteractiveFormatting={ true }
+			withoutInteractiveFormatting
 		/>
 	);
-	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
+	const excerptClassName = clsx( 'wp-block-post-excerpt__excerpt', {
 		'is-inline': ! showMoreOnNewLine,
 	} );
+
+	/**
+	 * The excerpt length setting needs to be applied to both
+	 * the raw and the rendered excerpt depending on which is being used.
+	 */
+	const rawOrRenderedExcerpt = (
+		rawExcerpt || strippedRenderedExcerpt
+	).trim();
+
+	let trimmedExcerpt = '';
+	if ( wordCountType === 'words' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( ' ', excerptLength )
+			.join( ' ' );
+	} else if ( wordCountType === 'characters_excluding_spaces' ) {
+		/*
+		 * 1. Split the excerpt at the character limit,
+		 * then join the substrings back into one string.
+		 * 2. Count the number of spaces in the excerpt
+		 * by comparing the lengths of the string with and without spaces.
+		 * 3. Add the number to the length of the visible excerpt,
+		 * so that the spaces are excluded from the word count.
+		 */
+		const excerptWithSpaces = rawOrRenderedExcerpt
+			.split( '', excerptLength )
+			.join( '' );
+
+		const numberOfSpaces =
+			excerptWithSpaces.length -
+			excerptWithSpaces.replaceAll( ' ', '' ).length;
+
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( '', excerptLength + numberOfSpaces )
+			.join( '' );
+	} else if ( wordCountType === 'characters_including_spaces' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.split( '', excerptLength )
+			.join( '' );
+	}
+
+	const isTrimmed = trimmedExcerpt !== rawOrRenderedExcerpt;
+
 	const excerptContent = isEditable ? (
 		<RichText
 			className={ excerptClassName }
-			aria-label={ __( 'Post excerpt text' ) }
+			aria-label={ __( 'Excerpt text' ) }
 			value={
-				rawExcerpt ||
-				strippedRenderedExcerpt ||
-				( isSelected ? '' : __( 'No post excerpt found' ) )
+				isSelected
+					? rawOrRenderedExcerpt
+					: ( ! isTrimmed
+							? rawOrRenderedExcerpt
+							: trimmedExcerpt + ELLIPSIS ) ||
+					  __( 'No excerpt found' )
 			}
 			onChange={ setExcerpt }
 			tagName="p"
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ strippedRenderedExcerpt || __( 'No post excerpt found' ) }
+			{ ! isTrimmed
+				? rawOrRenderedExcerpt || __( 'No excerpt found' )
+				: trimmedExcerpt + ELLIPSIS }
 		</p>
 	);
 	return (
@@ -129,6 +221,7 @@ export default function PostExcerptEditor( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }
 						onChange={ ( newShowMoreOnNewLine ) =>
@@ -137,6 +230,17 @@ export default function PostExcerptEditor( {
 							} )
 						}
 					/>
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Max number of words' ) }
+						value={ excerptLength }
+						onChange={ ( value ) => {
+							setAttributes( { excerptLength: value } );
+						} }
+						min="10"
+						max="100"
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...blockProps }>
diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss
index 36e7d7b16592a0..e75d5abac07efb 100644
--- a/packages/block-library/src/post-excerpt/editor.scss
+++ b/packages/block-library/src/post-excerpt/editor.scss
@@ -1,5 +1,5 @@
 .wp-block-post-excerpt {
 	.wp-block-post-excerpt__excerpt.is-inline {
-		display: inline-block;
+		display: inline;
 	}
 }
diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php
index 79cc959cd86d7e..c8882b4062ac00 100644
--- a/packages/block-library/src/post-excerpt/index.php
+++ b/packages/block-library/src/post-excerpt/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-excerpt` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -18,14 +20,20 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$excerpt = get_the_excerpt();
-
-	if ( empty( $excerpt ) ) {
-		return '';
+	/*
+	* The purpose of the excerpt length setting is to limit the length of both
+	* automatically generated and user-created excerpts.
+	* Because the excerpt_length filter only applies to auto generated excerpts,
+	* wp_trim_words is used instead.
+	*/
+	$excerpt_length = $attributes['excerptLength'];
+	$excerpt        = get_the_excerpt( $block->context['postId'] );
+	if ( isset( $excerpt_length ) ) {
+		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
 	}
 
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
-	$filter_excerpt_more = function( $more ) use ( $more_text ) {
+	$filter_excerpt_more = static function ( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
 	};
 	/**
@@ -38,11 +46,14 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	 * result in showing only one `read more` link at a time.
 	 */
 	add_filter( 'excerpt_more', $filter_excerpt_more );
-	$classes = '';
+	$classes = array();
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= "has-text-align-{$attributes['textAlign']}";
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	$content               = '<p class="wp-block-post-excerpt__excerpt">' . $excerpt;
 	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
@@ -57,6 +68,8 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-excerpt` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_excerpt() {
 	register_block_type_from_metadata(
@@ -67,3 +80,20 @@ function register_block_core_post_excerpt() {
 	);
 }
 add_action( 'init', 'register_block_core_post_excerpt' );
+
+/**
+ * If themes or plugins filter the excerpt_length, we need to
+ * override the filter in the editor, otherwise
+ * the excerpt length block setting has no effect.
+ * Returns 100 because 100 is the max length in the setting.
+ */
+if ( is_admin() ||
+	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
+	add_filter(
+		'excerpt_length',
+		static function () {
+			return 100;
+		},
+		PHP_INT_MAX
+	);
+}
diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss
index e7b3e18491177e..b44108f67b5dd5 100644
--- a/packages/block-library/src/post-excerpt/style.scss
+++ b/packages/block-library/src/post-excerpt/style.scss
@@ -1,3 +1,25 @@
+// Lowest specificity on wrapper margins to avoid overriding layout styles.
+:where(.wp-block-post-excerpt) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: var(--wp--style--block-gap);
+}
+
+// Zero out the margin on the excerpt paragraph, to match the body paragraphs.
+.wp-block-post-excerpt__excerpt {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+// Matches block gap.
+.wp-block-post-excerpt__more-text {
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: 0;
+}
+
 .wp-block-post-excerpt__more-link {
 	display: inline-block;
 }
+
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index 40f51cffa06e75..8b431ffc625790 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-featured-image",
-	"title": "Post Featured Image",
+	"title": "Featured Image",
 	"category": "theme",
 	"description": "Display a post's featured image.",
 	"textdomain": "default",
@@ -11,6 +11,9 @@
 			"type": "boolean",
 			"default": false
 		},
+		"aspectRatio": {
+			"type": "string"
+		},
 		"width": {
 			"type": "string"
 		},
@@ -48,13 +51,19 @@
 		},
 		"customGradient": {
 			"type": "string"
+		},
+		"useFirstImageFromPost": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -62,7 +71,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -70,10 +78,26 @@
 				"width": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
+		"shadow": {
+			"__experimentalSkipSerialization": true
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"interactivity": {
+			"clientNavigation": true
+		}
+	},
+	"selectors": {
+		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
 		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 9d0b11a6318d26..5a3e40a126bf8d 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -10,7 +10,11 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	useSettings,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 const SCALE_OPTIONS = (
 	<>
@@ -49,14 +53,33 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
-	imageSizeOptions = [],
+	media,
 } ) => {
-	const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];
+	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
+		useSettings(
+			'spacing.units',
+			'dimensions.aspectRatios.default',
+			'dimensions.aspectRatios.theme',
+			'dimensions.defaultAspectRatios'
+		);
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || defaultUnits,
+		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
+
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
 		/**
@@ -64,14 +87,63 @@ const DimensionControls = ( {
 		 * we don't want to set the attribute, as it would
 		 * end up having the unit as value without any number.
 		 */
-		if ( isNaN( parsedValue ) && nextValue ) return;
+		if ( isNaN( parsedValue ) && nextValue ) {
+			return;
+		}
 		setAttributes( {
 			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
 		} );
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
+
+	const showScaleControl =
+		height || ( aspectRatio && aspectRatio !== 'auto' );
+
+	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
+		label: name,
+		value: ratio,
+	} ) );
+
+	const aspectRatioOptions = [
+		{
+			label: _x(
+				'Original',
+				'Aspect ratio option for dimensions control'
+			),
+			value: 'auto',
+		},
+		...( showDefaultRatios ? defaultOptions : [] ),
+		...( themeOptions ? themeOptions : [] ),
+	];
+
 	return (
-		<InspectorControls __experimentalGroup="dimensions">
+		<>
+			<ToolsPanelItem
+				hasValue={ () => !! aspectRatio }
+				label={ __( 'Aspect ratio' ) }
+				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
+				resetAllFilter={ () => ( {
+					aspectRatio: undefined,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Aspect ratio' ) }
+					value={ aspectRatio }
+					options={ aspectRatioOptions }
+					onChange={ ( nextAspectRatio ) =>
+						setAttributes( { aspectRatio: nextAspectRatio } )
+					}
+				/>
+			</ToolsPanelItem>
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
@@ -80,10 +152,11 @@ const DimensionControls = ( {
 				resetAllFilter={ () => ( {
 					height: undefined,
 				} ) }
-				isShownByDefault={ true }
+				isShownByDefault
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					labelPosition="top"
 					value={ height || '' }
@@ -102,10 +175,11 @@ const DimensionControls = ( {
 				resetAllFilter={ () => ( {
 					width: undefined,
 				} ) }
-				isShownByDefault={ true }
+				isShownByDefault
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					labelPosition="top"
 					value={ width || '' }
@@ -116,7 +190,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ !! height && (
+			{ showScaleControl && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
@@ -128,10 +202,12 @@ const DimensionControls = ( {
 					resetAllFilter={ () => ( {
 						scale: DEFAULT_SCALE,
 					} ) }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ clientId }
 				>
 					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ scaleLabel }
 						value={ scale }
 						help={ scaleHelp[ scale ] }
@@ -149,7 +225,7 @@ const DimensionControls = ( {
 			{ !! imageSizeOptions.length && (
 				<ToolsPanelItem
 					hasValue={ () => !! sizeSlug }
-					label={ __( 'Image size' ) }
+					label={ __( 'Resolution' ) }
 					onDeselect={ () =>
 						setAttributes( { sizeSlug: undefined } )
 					}
@@ -160,7 +236,9 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
-						label={ __( 'Image size' ) }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }
 						options={ imageSizeOptions }
 						onChange={ ( nextSizeSlug ) =>
@@ -170,7 +248,7 @@ const DimensionControls = ( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</InspectorControls>
+		</>
 	);
 };
 
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 1cdc0d0fd32ebe..95441a5a55cfd0 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -1,19 +1,20 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	MenuItem,
 	ToggleControl,
 	PanelBody,
 	Placeholder,
 	Button,
+	Spinner,
 	TextControl,
 } from '@wordpress/components';
 import {
@@ -22,9 +23,11 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -33,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -43,25 +47,70 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
-function PostFeaturedImageDisplay( {
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
+export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
-		attributes;
-	const [ featuredImage, setFeaturedImage ] = useEntityProp(
+	const {
+		isLink,
+		aspectRatio,
+		height,
+		width,
+		scale,
+		sizeSlug,
+		rel,
+		linkTarget,
+		useFirstImageFromPost,
+	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState();
+
+	const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
 		'featured_media',
 		postId
 	);
 
-	const { media, postType } = useSelect(
+	// Fallback to post content if no featured image is set.
+	// This is needed for the "Use first image from post" option.
+	const [ postContent ] = useEntityProp(
+		'postType',
+		postTypeSlug,
+		'content',
+		postId
+	);
+
+	const featuredImage = useMemo( () => {
+		if ( storedFeaturedImage ) {
+			return storedFeaturedImage;
+		}
+
+		if ( ! useFirstImageFromPost ) {
+			return;
+		}
+
+		const imageOpener =
+			/<!--\s+wp:(?:core\/)?image\s+(?<attrs>{(?:(?:[^}]+|}+(?=})|(?!}\s+\/?-->).)*)?}\s+)?-->/.exec(
+				postContent
+			);
+		const imageId =
+			imageOpener?.groups?.attrs &&
+			JSON.parse( imageOpener.groups.attrs )?.id;
+		return imageId;
+	}, [ storedFeaturedImage, useFirstImageFromPost, postContent ] );
+
+	const { media, postType, postPermalink } = useSelect(
 		( select ) => {
-			const { getMedia, getPostType } = select( coreStore );
+			const { getMedia, getPostType, getEditedEntityRecord } =
+				select( coreStore );
 			return {
 				media:
 					featuredImage &&
@@ -69,39 +118,42 @@ function PostFeaturedImageDisplay( {
 						context: 'view',
 					} ),
 				postType: postTypeSlug && getPostType( postTypeSlug ),
+				postPermalink: getEditedEntityRecord(
+					'postType',
+					postTypeSlug,
+					postId
+				)?.link,
 			};
 		},
-		[ featuredImage, postTypeSlug ]
+		[ featuredImage, postTypeSlug, postId ]
 	);
-	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
+	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
 	const blockProps = useBlockProps( {
-		style: { width, height },
+		style: { width, height, aspectRatio },
+		className: clsx( {
+			'is-transient': temporaryURL,
+		} ),
 	} );
 	const borderProps = useBorderProps( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
+	const blockEditingMode = useBlockEditingMode();
 
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
-				className={ classnames(
+				className={ clsx(
 					'block-editor-media-placeholder',
 					borderProps.className
 				) }
-				withIllustration={ true }
-				style={ borderProps.style }
+				withIllustration
+				style={ {
+					height: !! aspectRatio && '100%',
+					width: !! aspectRatio && '100%',
+					...borderProps.style,
+					...shadowProps.style,
+				} }
 			>
 				{ content }
 			</Placeholder>
@@ -112,30 +164,52 @@ function PostFeaturedImageDisplay( {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
+
+		if ( value?.url && isBlobURL( value.url ) ) {
+			setTemporaryURL( value.url );
+		}
 	};
 
+	// Reset temporary url when media is available.
+	useEffect( () => {
+		if ( mediaUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ mediaUrl, temporaryURL ] );
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
-	const controls = (
+	const controls = blockEditingMode === 'default' && (
 		<>
-			<DimensionControls
-				clientId={ clientId }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				imageSizeOptions={ imageSizeOptions }
-			/>
+			<InspectorControls group="color">
+				<OverlayControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
+			<InspectorControls group="dimensions">
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+				/>
+			</InspectorControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
 										// translators: %s: Name of the post type e.g: "post".
 										__( 'Link to %s' ),
-										postType.labels.singular_name.toLowerCase()
+										postType.labels.singular_name
 								  )
 								: __( 'Link to post' )
 						}
@@ -145,6 +219,7 @@ function PostFeaturedImageDisplay( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {
@@ -154,6 +229,8 @@ function PostFeaturedImageDisplay( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
 								onChange={ ( newRel ) =>
@@ -166,13 +243,34 @@ function PostFeaturedImageDisplay( {
 			</InspectorControls>
 		</>
 	);
+
 	let image;
-	if ( ! featuredImage && isDescendentOfQueryLoop ) {
+
+	/**
+	 * A Post Featured Image block should not have image replacement
+	 * or upload options in the following cases:
+	 * - Is placed in a Query Loop. This is a conscious decision to
+	 * prevent content editing of different posts in Query Loop, and
+	 * this could change in the future.
+	 * - Is in a context where it does not have a postId (for example
+	 * in a template or template part).
+	 */
+	if ( ! featuredImage && ( isDescendentOfQueryLoop || ! postId ) ) {
 		return (
 			<>
 				{ controls }
 				<div { ...blockProps }>
-					{ placeholder() }
+					{ !! isLink ? (
+						<a
+							href={ postPermalink }
+							target={ linkTarget }
+							{ ...disabledClickProps }
+						>
+							{ placeholder() }
+						</a>
+					) : (
+						placeholder()
+					) }
 					<Overlay
 						attributes={ attributes }
 						setAttributes={ setAttributes }
@@ -186,11 +284,20 @@ function PostFeaturedImageDisplay( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
-		height,
-		objectFit: height && scale,
+		...shadowProps.style,
+		height: aspectRatio ? '100%' : height,
+		width: !! aspectRatio && '100%',
+		objectFit: !! ( height || aspectRatio ) && scale,
 	};
 
-	if ( ! featuredImage ) {
+	/**
+	 * When the post featured image block is placed in a context where:
+	 * - It has a postId (for example in a single post)
+	 * - It is not inside a query loop
+	 * - It has no image assigned yet
+	 * Then display the placeholder with the image upload option.
+	 */
+	if ( ! featuredImage && ! temporaryURL ) {
 		image = (
 			<MediaPlaceholder
 				onSelect={ onSelectImage }
@@ -201,6 +308,7 @@ function PostFeaturedImageDisplay( {
 				mediaLibraryButton={ ( { open } ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							icon={ upload }
 							variant="primary"
 							label={ label }
@@ -216,29 +324,39 @@ function PostFeaturedImageDisplay( {
 		);
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
-		image = ! media ? (
-			placeholder()
-		) : (
-			<img
-				className={ borderProps.className }
-				src={ mediaUrl }
-				alt={
-					media.alt_text
-						? sprintf(
-								// translators: %s: The image's alt text.
-								__( 'Featured image: %s' ),
-								media.alt_text
-						  )
-						: __( 'Featured image' )
-				}
-				style={ imageStyles }
-			/>
-		);
+		image =
+			! media && ! temporaryURL ? (
+				placeholder()
+			) : (
+				<>
+					<img
+						className={ borderProps.className }
+						src={ temporaryURL || mediaUrl }
+						alt={
+							media && media?.alt_text
+								? sprintf(
+										// translators: %s: The image's alt text.
+										__( 'Featured image: %s' ),
+										media.alt_text
+								  )
+								: __( 'Featured image' )
+						}
+						style={ imageStyles }
+					/>
+					{ temporaryURL && <Spinner /> }
+				</>
+			);
 	}
 
+	/**
+	 * When the post featured image block:
+	 * - Has an image assigned
+	 * - Is not inside a query loop
+	 * Then display the image and the image replacement option.
+	 */
 	return (
 		<>
-			{ controls }
+			{ ! temporaryURL && controls }
 			{ !! media && ! isDescendentOfQueryLoop && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
@@ -248,15 +366,23 @@ function PostFeaturedImageDisplay( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
+						onReset={ () => setFeaturedImage( 0 ) }
+					/>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>
-				{ image }
+				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
+				{ !! isLink ? (
+					<a
+						href={ postPermalink }
+						target={ linkTarget }
+						{ ...disabledClickProps }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
 				<Overlay
 					attributes={ attributes }
 					setAttributes={ setAttributes }
@@ -266,29 +392,3 @@ function PostFeaturedImageDisplay( {
 		</>
 	);
 }
-
-export default function PostFeaturedImageEdit( props ) {
-	const blockProps = useBlockProps();
-	const borderProps = useBorderProps( props.attributes );
-
-	if ( ! props.context?.postId ) {
-		return (
-			<div { ...blockProps }>
-				<Placeholder
-					className={ classnames(
-						'block-editor-media-placeholder',
-						borderProps.className
-					) }
-					withIllustration={ true }
-					style={ borderProps.style }
-				/>
-				<Overlay
-					attributes={ props.attributes }
-					setAttributes={ props.setAttributes }
-					clientId={ props.clientId }
-				/>
-			</div>
-		);
-	}
-	return <PostFeaturedImageDisplay { ...props } />;
-}
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index 1af6e63e1be4a2..5fab62c571b1cf 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-post-featured-image {
 	.block-editor-media-placeholder {
 		z-index: 1; // Need to put it above the overlay so the upload button works.
@@ -12,6 +12,7 @@
 		justify-content: center;
 		align-items: center;
 		padding: 0;
+		display: flex;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
@@ -20,6 +21,7 @@
 
 		// Style the upload button.
 		.components-button {
+			margin: auto;
 			padding: 0;
 			display: flex;
 			justify-content: center;
@@ -95,6 +97,42 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	// When the Post Featured Image block is linked,
+	// it's wrapped with a disabled <a /> tag.
+	// Restore cursor style so it doesn't appear 'clickable'.
+	> a {
+		cursor: default;
+	}
+
+	// When the Post Featured Image block is linked,
+	// and wrapped with a disabled <a /> tag
+	// ensure that the placeholder items are visible when selected.
+	&.is-selected .components-placeholder.has-illustration {
+		.components-button,
+		.components-placeholder__instructions,
+		.components-placeholder__label {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	// When image being uploaded.
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Show spinner while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index dfb03c5a89065c..815da4ee63fe19 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-featured-image` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -19,41 +21,92 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	// Check is needed for backward compatibility with third-party plugins
-	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
-	if ( ! in_the_loop() && have_posts() ) {
-		the_post();
-	}
-
 	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		if ( get_the_title( $post_ID ) ) {
+			$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		} else {
+			$attr['alt'] = sprintf(
+				// translators: %d is the post ID.
+				__( 'Untitled post %d' ),
+				$post_ID
+			);
+		}
+	}
+
+	$extra_styles = '';
+
+	// Aspect ratio with a height set needs to override the default width/height.
+	if ( ! empty( $attributes['aspectRatio'] ) ) {
+		$extra_styles .= 'width:100%;height:100%;';
+	} elseif ( ! empty( $attributes['height'] ) ) {
+		$extra_styles .= "height:{$attributes['height']};";
+	}
+
+	if ( ! empty( $attributes['scale'] ) ) {
+		$extra_styles .= "object-fit:{$attributes['scale']};";
 	}
+	if ( ! empty( $attributes['style']['shadow'] ) ) {
+		$shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
 
-	if ( ! empty( $attributes['height'] ) ) {
-		$extra_styles = "height:{$attributes['height']};";
-		if ( ! empty( $attributes['scale'] ) ) {
-			$extra_styles .= "object-fit:{$attributes['scale']};";
+		if ( ! empty( $shadow_styles['css'] ) ) {
+			$extra_styles .= $shadow_styles['css'];
 		}
+	}
+
+	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
+
+	// Get the first image from the post.
+	if ( $attributes['useFirstImageFromPost'] && ! $featured_image ) {
+		$content_post = get_post( $post_ID );
+		$content      = $content_post->post_content;
+		$processor    = new WP_HTML_Tag_Processor( $content );
+
+		/*
+		 * Transfer the image tag from the post into a new text snippet.
+		 * Because the HTML API doesn't currently expose a way to extract
+		 * HTML substrings this is necessary as a workaround. Of note, this
+		 * is different than directly extracting the IMG tag:
+		 * - If there are duplicate attributes in the source there will only be one in the output.
+		 * - If there are single-quoted or unquoted attributes they will be double-quoted in the output.
+		 * - If there are named character references in the attribute values they may be replaced with their direct code points. E.g. `&hellip;` becomes `…`.
+		 * In the future there will likely be a mechanism to copy snippets of HTML from
+		 * one document into another, via the HTML Processor's `get_outer_html()` or
+		 * equivalent. When that happens it would be appropriate to replace this custom
+		 * code with that canonical code.
+		 */
+		if ( $processor->next_tag( 'img' ) ) {
+			$tag_html = new WP_HTML_Tag_Processor( '<img>' );
+			$tag_html->next_tag();
+			foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) {
+				$tag_html->set_attribute( $name, $processor->get_attribute( $name ) );
+			}
+			$featured_image = $tag_html->get_updated_html();
+		}
+	}
+
 	if ( ! $featured_image ) {
 		return '';
 	}
+
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$height         = ! empty( $attributes['height'] ) ? 'style="' . esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . '"' : '';
 		$featured_image = sprintf(
-			'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
+			'<a href="%1$s" target="%2$s" %3$s %4$s>%5$s%6$s</a>',
 			get_the_permalink( $post_ID ),
 			esc_attr( $link_target ),
 			$rel,
+			$height,
 			$featured_image,
 			$overlay_markup
 		);
@@ -61,16 +114,28 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$wrapper_attributes = empty( $attributes['width'] )
-		? get_block_wrapper_attributes()
-		: get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
-
+	$aspect_ratio = ! empty( $attributes['aspectRatio'] )
+		? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
+		: '';
+	$width        = ! empty( $attributes['width'] )
+		? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
+		: '';
+	$height       = ! empty( $attributes['height'] )
+		? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
+		: '';
+	if ( ! $height && ! $width && ! $aspect_ratio ) {
+		$wrapper_attributes = get_block_wrapper_attributes();
+	} else {
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
+	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
 
 /**
  * Generate markup for the HTML element that will be used for the overlay.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string HTML markup in string format.
@@ -137,6 +202,8 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
  * Generates class names and styles to apply the border support styles for
  * the Post Featured Image block.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes The block attributes.
  * @return array The border-related classnames and styles for the block.
  */
@@ -161,12 +228,12 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 
 	// Border color.
 	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
-	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
 	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
 
 	// Individual border styles e.g. top, left etc.
 	foreach ( $sides as $side ) {
-		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
 		$border_styles[ $side ] = array(
 			'color' => isset( $border['color'] ) ? $border['color'] : null,
 			'style' => isset( $border['style'] ) ? $border['style'] : null,
@@ -187,6 +254,8 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 
 /**
  * Registers the `core/post-featured-image` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_featured_image() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-featured-image/overlay-controls.js b/packages/block-library/src/post-featured-image/overlay-controls.js
new file mode 100644
index 00000000000000..3dabb60f77fb18
--- /dev/null
+++ b/packages/block-library/src/post-featured-image/overlay-controls.js
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient as useGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientValue, setGradient } = useGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: overlayColor.color,
+						gradientValue,
+						label: __( 'Overlay' ),
+						onColorChange: setOverlayColor,
+						onGradientChange: setGradient,
+						isShownByDefault: true,
+						resetAllFilter: () => ( {
+							overlayColor: undefined,
+							customOverlayColor: undefined,
+							gradient: undefined,
+							customGradient: undefined,
+						} ),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+			/>
+			<ToolsPanelItem
+				hasValue={ () => dimRatio !== undefined }
+				label={ __( 'Overlay opacity' ) }
+				onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+				resetAllFilter={ () => ( {
+					dimRatio: 0,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					label={ __( 'Overlay opacity' ) }
+					value={ dimRatio }
+					onChange={ ( newDimRatio ) =>
+						setAttributes( {
+							dimRatio: newDimRatio,
+						} )
+					}
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
+					required
+					__next40pxDefaultSize
+				/>
+			</ToolsPanelItem>
+		</>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index f577978b9a3c93..2ddebd5d9de901 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -1,41 +1,27 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import {
-	RangeControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	InspectorControls,
 	withColors,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { dimRatioToClass } from './utils';
 
-const Overlay = ( {
-	clientId,
-	attributes,
-	setAttributes,
-	overlayColor,
-	setOverlayColor,
-} ) => {
+const Overlay = ( { attributes, overlayColor } ) => {
 	const { dimRatio } = attributes;
-	const { gradientClass, gradientValue, setGradient } =
-		__experimentalUseGradient();
+	const { gradientClass, gradientValue } = __experimentalUseGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	const borderProps = useBorderProps( attributes );
@@ -45,74 +31,26 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
+	if ( ! colorGradientSettings.hasColorsOrGradients || ! dimRatio ) {
+		return null;
+	}
+
 	return (
-		<>
-			{ !! dimRatio && (
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-post-featured-image__overlay',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						},
-						borderProps.className
-					) }
-					style={ overlayStyles }
-				/>
+		<span
+			aria-hidden="true"
+			className={ clsx(
+				'wp-block-post-featured-image__overlay',
+				dimRatioToClass( dimRatio ),
+				{
+					[ overlayColor.class ]: overlayColor.class,
+					'has-background-dim': dimRatio !== undefined,
+					'has-background-gradient': gradientValue,
+					[ gradientClass ]: gradientClass,
+				},
+				borderProps.className
 			) }
-			<InspectorControls __experimentalGroup="color">
-				<ColorGradientSettingsDropdown
-					__experimentalHasMultipleOrigins
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => dimRatio !== undefined }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
-					resetAllFilter={ () => ( {
-						dimRatio: 0,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRatio ) =>
-							setAttributes( {
-								dimRatio: newDimRatio,
-							} )
-						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
-		</>
+			style={ overlayStyles }
+		/>
 	);
 };
 
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index d4cfbc7273638f..70022d82902f84 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -3,8 +3,9 @@
 	margin-right: 0;
 	a {
 		display: block;
+		height: 100%;
 	}
-	img {
+	:where(img) {
 		max-width: 100%;
 		width: 100%;
 		height: auto;
@@ -38,4 +39,8 @@
 			}
 		}
 	}
+
+	&:where(.alignleft, .alignright) {
+		width: 100%;
+	}
 }
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index 7b8d87fe26ad7a..5f1b295119822a 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-navigation-link",
 	"title": "Post Navigation Link",
 	"category": "theme",
@@ -28,8 +28,19 @@
 		"arrow": {
 			"type": "string",
 			"default": "none"
+		},
+		"taxonomy": {
+			"type": "string",
+			"default": ""
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Next post",
+			"arrow": "arrow"
+		}
+	},
+	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -45,9 +56,13 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-post-navigation-link"
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index 7d4eb2187cc973..e27d094feb79ab 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
+	SelectControl,
 	PanelBody,
 } from '@wordpress/components';
 import {
@@ -20,9 +21,20 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 export default function PostNavigationLinkEdit( {
-	attributes: { type, label, showTitle, textAlign, linkLabel, arrow },
+	context: { postType },
+	attributes: {
+		type,
+		label,
+		showTitle,
+		textAlign,
+		linkLabel,
+		arrow,
+		taxonomy,
+	},
 	setAttributes,
 } ) {
 	const isNext = type === 'next';
@@ -37,21 +49,54 @@ export default function PostNavigationLinkEdit( {
 	const displayArrow = arrowMap[ arrow ];
 
 	if ( showTitle ) {
-		/* translators: Label before for next and previous post. There is a space after the colon. */
-		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
+		placeholder = isNext
+			? /* translators: Label before for next and previous post. There is a space after the colon. */
+			  __( 'Next: ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
+			: /* translators: Label before for next and previous post. There is a space after the colon. */
+			  __( 'Previous: ' ); // eslint-disable-line @wordpress/i18n-no-flanking-whitespace
 	}
 
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+
+	const taxonomies = useSelect(
+		( select ) => {
+			const { getTaxonomies } = select( coreStore );
+			const filteredTaxonomies = getTaxonomies( {
+				type: postType,
+				per_page: -1,
+			} );
+			return filteredTaxonomies;
+		},
+		[ postType ]
+	);
+	const getTaxonomyOptions = () => {
+		const selectOption = {
+			label: __( 'Unfiltered' ),
+			value: '',
+		};
+		const taxonomyOptions = ( taxonomies ?? [] )
+			.filter( ( { visibility } ) => !! visibility?.publicly_queryable )
+			.map( ( item ) => {
+				return {
+					value: item.slug,
+					label: item.name,
+				};
+			} );
+
+		return [ selectOption, ...taxonomyOptions ];
+	};
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display the title as a link' ) }
 						help={ __(
 							'If you have entered a custom label, it will be prepended before the title.'
@@ -65,6 +110,7 @@ export default function PostNavigationLinkEdit( {
 					/>
 					{ showTitle && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __(
 								'Include the label as part of the link'
 							) }
@@ -77,6 +123,8 @@ export default function PostNavigationLinkEdit( {
 						/>
 					) }
 					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Arrow' ) }
 						value={ arrow }
 						onChange={ ( value ) => {
@@ -111,6 +159,23 @@ export default function PostNavigationLinkEdit( {
 					</ToggleGroupControl>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Filter by taxonomy' ) }
+					value={ taxonomy }
+					options={ getTaxonomyOptions() }
+					onChange={ ( value ) =>
+						setAttributes( {
+							taxonomy: value,
+						} )
+					}
+					help={ __(
+						'Only link to posts that have the same taxonomy terms as the current post. For example the same tags or categories.'
+					) }
+				/>
+			</InspectorControls>
 			<BlockControls>
 				<AlignmentToolbar
 					value={ textAlign }
@@ -129,6 +194,7 @@ export default function PostNavigationLinkEdit( {
 				) }
 				<RichText
 					tagName="a"
+					identifier="label"
 					aria-label={ ariaLabel }
 					placeholder={ placeholder }
 					value={ label }
@@ -148,7 +214,7 @@ export default function PostNavigationLinkEdit( {
 				{ isNext && displayArrow && (
 					<span
 						className={ `wp-block-post-navigation-link__arrow-next is-arrow-${ arrow }` }
-						aria-hidden={ true }
+						aria-hidden
 					>
 						{ displayArrow }
 					</span>
diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php
index cb1fe568bdf0e7..8162b74d8af17f 100644
--- a/packages/block-library/src/post-navigation-link/index.php
+++ b/packages/block-library/src/post-navigation-link/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-navigation-link` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param array  $attributes Block attributes.
  * @param string $content    Block default content.
  *
@@ -28,12 +30,17 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= " has-text-align-{$attributes['textAlign']}";
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
 	// Set default values.
 	$format = '%link';
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
 
+	// Only use hardcoded values here, otherwise we need to add escaping where these values are used.
 	$arrow_map = array(
 		'none'    => '',
 		'arrow'   => array(
@@ -84,20 +91,31 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	}
 
 	// Display arrows.
-	if ( isset( $attributes['arrow'] ) && ! empty( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] ) {
+	if ( isset( $attributes['arrow'] ) && 'none' !== $attributes['arrow'] && isset( $arrow_map[ $attributes['arrow'] ] ) ) {
 		$arrow = $arrow_map[ $attributes['arrow'] ][ $navigation_type ];
 
 		if ( 'next' === $navigation_type ) {
-			$format = '%link <span class="wp-block-post-navigation-link__arrow-next is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span>';
+			$format = '%link<span class="wp-block-post-navigation-link__arrow-next is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span>';
 		} else {
-			$format = '<span class="wp-block-post-navigation-link__arrow-previous is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span> %link';
+			$format = '<span class="wp-block-post-navigation-link__arrow-previous is-arrow-' . $attributes['arrow'] . '" aria-hidden="true">' . $arrow . '</span>%link';
 		}
 	}
 
-	// The dynamic portion of the function name, `$navigation_type`,
-	// refers to the type of adjacency, 'next' or 'previous'.
+	/*
+	 * The dynamic portion of the function name, `$navigation_type`,
+	 * Refers to the type of adjacency, 'next' or 'previous'.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/get_previous_post_link/
+	 * @see https://developer.wordpress.org/reference/functions/get_next_post_link/
+	 */
 	$get_link_function = "get_{$navigation_type}_post_link";
-	$content           = $get_link_function( $format, $link );
+
+	if ( ! empty( $attributes['taxonomy'] ) ) {
+		$content = $get_link_function( $format, $link, true, '', $attributes['taxonomy'] );
+	} else {
+		$content = $get_link_function( $format, $link );
+	}
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
@@ -107,6 +125,8 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 
 /**
  * Registers the `core/post-navigation-link` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_post_navigation_link() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-navigation-link/style.scss b/packages/block-library/src/post-navigation-link/style.scss
index 7af462c3808193..0f6a9fd3062b81 100644
--- a/packages/block-library/src/post-navigation-link/style.scss
+++ b/packages/block-library/src/post-navigation-link/style.scss
@@ -20,4 +20,8 @@
 		}
 	}
 
+	&.has-text-align-right[style*="writing-mode: vertical-rl"],
+	&.has-text-align-left[style*="writing-mode: vertical-lr"] {
+		rotate: 180deg;
+	}
 }
diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js
index 6d3e7f76cd7fa5..4f52b21338af1e 100644
--- a/packages/block-library/src/post-navigation-link/variations.js
+++ b/packages/block-library/src/post-navigation-link/variations.js
@@ -15,6 +15,12 @@ const variations = [
 		icon: next,
 		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Next post',
+				arrow: 'arrow',
+			},
+		},
 	},
 	{
 		name: 'post-previous',
@@ -25,6 +31,12 @@ const variations = [
 		icon: previous,
 		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Previous post',
+				arrow: 'arrow',
+			},
+		},
 	},
 ];
 
@@ -34,7 +46,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.type === variationAttributes.type;
 } );
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index 380b6d55f71fad..da576a83312a45 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-template",
 	"title": "Post Template",
 	"category": "theme",
@@ -10,17 +10,24 @@
 	"usesContext": [
 		"queryId",
 		"query",
-		"queryContext",
 		"displayLayout",
 		"templateSlug",
-		"previewPostType"
+		"previewPostType",
+		"enhancedPagination",
+		"postType"
 	],
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true,
-		"__experimentalLayout": {
-			"allowEditing": false
+		"align": [ "wide", "full" ],
+		"layout": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -34,6 +41,17 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"spacing": {
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-post-template",
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index e5d0a7d2ff8224..c58990233f3615 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -1,23 +1,25 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
+	BlockControls,
 	BlockContextProvider,
 	__experimentalUseBlockPreview as useBlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Spinner } from '@wordpress/components';
+import { Spinner, ToolbarGroup } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { list, grid } from '@wordpress/icons';
 
 const TEMPLATE = [
 	[ 'core/post-title' ],
@@ -25,10 +27,10 @@ const TEMPLATE = [
 	[ 'core/post-excerpt' ],
 ];
 
-function PostTemplateInnerBlocks() {
+function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: 'wp-block-post' },
-		{ template: TEMPLATE }
+		{ className: clsx( 'wp-block-post', classList ) },
+		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
 }
@@ -36,13 +38,14 @@ function PostTemplateInnerBlocks() {
 function PostTemplateBlockPreview( {
 	blocks,
 	blockContextId,
+	classList,
 	isHidden,
 	setActiveBlockContextId,
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: 'wp-block-post',
+			className: clsx( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -70,11 +73,12 @@ function PostTemplateBlockPreview( {
 const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
 
 export default function PostTemplateEdit( {
+	setAttributes,
 	clientId,
 	context: {
 		query: {
 			perPage,
-			offset,
+			offset = 0,
 			postType,
 			order,
 			orderBy,
@@ -86,6 +90,7 @@ export default function PostTemplateEdit( {
 			taxQuery,
 			parents,
 			pages,
+			format,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -93,23 +98,18 @@ export default function PostTemplateEdit( {
 			// REST API or be handled by custom REST filters like `rest_{$this->post_type}_query`.
 			...restQueryArgs
 		} = {},
-		queryContext = [ { page: 1 } ],
 		templateSlug,
-		displayLayout: { type: layoutType = 'flex', columns = 1 } = {},
 		previewPostType,
 	},
+	attributes: { layout },
+	__unstableLayoutClassNames,
 } ) {
-	const [ { page } ] = queryContext;
+	const { type: layoutType, columnCount = 3 } = layout || {};
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords, getTaxonomies } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
-			const taxonomies = getTaxonomies( {
-				type: postType,
-				per_page: -1,
-				context: 'view',
-			} );
 			const templateCategory =
 				inherit &&
 				templateSlug?.startsWith( 'category-' ) &&
@@ -119,13 +119,27 @@ export default function PostTemplateEdit( {
 					_fields: [ 'id' ],
 					slug: templateSlug.replace( 'category-', '' ),
 				} );
+			const templateTag =
+				inherit &&
+				templateSlug?.startsWith( 'tag-' ) &&
+				getEntityRecords( 'taxonomy', 'post_tag', {
+					context: 'view',
+					per_page: 1,
+					_fields: [ 'id' ],
+					slug: templateSlug.replace( 'tag-', '' ),
+				} );
 			const query = {
-				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
+				offset: offset || 0,
 				order,
 				orderby: orderBy,
 			};
 			// There is no need to build the taxQuery if we inherit.
 			if ( taxQuery && ! inherit ) {
+				const taxonomies = getTaxonomies( {
+					type: postType,
+					per_page: -1,
+					context: 'view',
+				} );
 				// We have to build the tax query for the REST API and use as
 				// keys the taxonomies `rest_base` with the `term ids` as values.
 				const builtTaxQuery = Object.entries( taxQuery ).reduce(
@@ -159,6 +173,10 @@ export default function PostTemplateEdit( {
 			if ( parents?.length ) {
 				query.parent = parents;
 			}
+			if ( format?.length ) {
+				query.format = format;
+			}
+
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -173,6 +191,16 @@ export default function PostTemplateEdit( {
 					postType = query.postType;
 				} else if ( templateCategory ) {
 					query.categories = templateCategory[ 0 ]?.id;
+				} else if ( templateTag ) {
+					query.tags = templateTag[ 0 ]?.id;
+				} else if (
+					templateSlug?.startsWith( 'taxonomy-post_format' )
+				) {
+					// Get the post format slug from the template slug by removing the prefix.
+					query.format = templateSlug.replace(
+						'taxonomy-post_format-post-format-',
+						''
+					);
 				}
 			}
 			// When we preview Query Loop blocks we should prefer the current
@@ -188,7 +216,6 @@ export default function PostTemplateEdit( {
 		},
 		[
 			perPage,
-			page,
 			offset,
 			order,
 			orderBy,
@@ -202,6 +229,7 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			format,
 			restQueryArgs,
 			previewPostType,
 		]
@@ -211,14 +239,15 @@ export default function PostTemplateEdit( {
 			posts?.map( ( post ) => ( {
 				postType: post.type,
 				postId: post.id,
+				classList: post.class_list ?? '',
 			} ) ),
 		[ posts ]
 	);
-	const hasLayoutFlex = layoutType === 'flex' && columns > 1;
+
 	const blockProps = useBlockProps( {
-		className: classnames( {
-			'is-flex-container': hasLayoutFlex,
-			[ `columns-${ columns }` ]: hasLayoutFlex,
+		className: clsx( __unstableLayoutClassNames, {
+			[ `columns-${ columnCount }` ]:
+				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
 		} ),
 	} );
 
@@ -234,35 +263,70 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	const setDisplayLayout = ( newDisplayLayout ) =>
+		setAttributes( {
+			layout: { ...layout, ...newDisplayLayout },
+		} );
+
+	const displayLayoutControls = [
+		{
+			icon: list,
+			title: _x( 'List view', 'Post template block display setting' ),
+			onClick: () => setDisplayLayout( { type: 'default' } ),
+			isActive: layoutType === 'default' || layoutType === 'constrained',
+		},
+		{
+			icon: grid,
+			title: _x( 'Grid view', 'Post template block display setting' ),
+			onClick: () =>
+				setDisplayLayout( {
+					type: 'grid',
+					columnCount,
+				} ),
+			isActive: layoutType === 'grid',
+		},
+	];
+
 	// To avoid flicker when switching active block contexts, a preview is rendered
 	// for each block context, but the preview for the active block context is hidden.
 	// This ensures that when it is displayed again, the cached rendering of the
 	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
-		<ul { ...blockProps }>
-			{ blockContexts &&
-				blockContexts.map( ( blockContext ) => (
-					<BlockContextProvider
-						key={ blockContext.postId }
-						value={ blockContext }
-					>
-						{ blockContext.postId ===
-						( activeBlockContextId ||
-							blockContexts[ 0 ]?.postId ) ? (
-							<PostTemplateInnerBlocks />
-						) : null }
-						<MemoizedPostTemplateBlockPreview
-							blocks={ blocks }
-							blockContextId={ blockContext.postId }
-							setActiveBlockContextId={ setActiveBlockContextId }
-							isHidden={
-								blockContext.postId ===
-								( activeBlockContextId ||
-									blockContexts[ 0 ]?.postId )
-							}
-						/>
-					</BlockContextProvider>
-				) ) }
-		</ul>
+		<>
+			<BlockControls>
+				<ToolbarGroup controls={ displayLayoutControls } />
+			</BlockControls>
+
+			<ul { ...blockProps }>
+				{ blockContexts &&
+					blockContexts.map( ( blockContext ) => (
+						<BlockContextProvider
+							key={ blockContext.postId }
+							value={ blockContext }
+						>
+							{ blockContext.postId ===
+							( activeBlockContextId ||
+								blockContexts[ 0 ]?.postId ) ? (
+								<PostTemplateInnerBlocks
+									classList={ blockContext.classList }
+								/>
+							) : null }
+							<MemoizedPostTemplateBlockPreview
+								blocks={ blocks }
+								blockContextId={ blockContext.postId }
+								classList={ blockContext.classList }
+								setActiveBlockContextId={
+									setActiveBlockContextId
+								}
+								isHidden={
+									blockContext.postId ===
+									( activeBlockContextId ||
+										blockContexts[ 0 ]?.postId )
+								}
+							/>
+						</BlockContextProvider>
+					) ) }
+			</ul>
+		</>
 	);
 }
diff --git a/packages/block-library/src/post-template/index.php b/packages/block-library/src/post-template/index.php
index c12a0e68b8e248..9126355c096a57 100644
--- a/packages/block-library/src/post-template/index.php
+++ b/packages/block-library/src/post-template/index.php
@@ -8,6 +8,8 @@
 /**
  * Determines whether a block list contains a block that uses the featured image.
  *
+ * @since 6.0.0
+ *
  * @param WP_Block_List $inner_blocks Inner block instance.
  *
  * @return bool Whether the block list contains a block that uses the featured image.
@@ -34,6 +36,10 @@ function block_core_post_template_uses_featured_image( $inner_blocks ) {
 /**
  * Renders the `core/post-template` block on the server.
  *
+ * @since 6.3.0 Changed render_block_context priority to `1`.
+ *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -41,14 +47,26 @@ function block_core_post_template_uses_featured_image( $inner_blocks ) {
  * @return string Returns the output of the query, structured using the layout defined by the block's inner blocks.
  */
 function render_block_core_post_template( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	// Use global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
 	if ( $use_global_query ) {
 		global $wp_query;
-		$query = clone $wp_query;
+
+		/*
+		 * If already in the main query loop, duplicate the query instance to not tamper with the main instance.
+		 * Since this is a nested query, it should start at the beginning, therefore rewind posts.
+		 * Otherwise, the main query loop has not started yet and this block is responsible for doing so.
+		 */
+		if ( in_the_loop() ) {
+			$query = clone $wp_query;
+			$query->rewind_posts();
+		} else {
+			$query = $wp_query;
+		}
 	} else {
 		$query_args = build_query_vars_from_query_block( $block, $page );
 		$query      = new WP_Query( $query_args );
@@ -68,8 +86,16 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 			$classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}";
 		}
 	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classnames .= ' has-link-color';
+	}
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	// Ensure backwards compatibility by flagging the number of columns via classname when using grid layout.
+	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
+		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 
 	$content = '';
 	while ( $query->have_posts() ) {
@@ -82,21 +108,27 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
 		$block_instance['blockName'] = 'core/null';
 
+		$post_id              = get_the_ID();
+		$post_type            = get_post_type();
+		$filter_block_context = static function ( $context ) use ( $post_id, $post_type ) {
+			$context['postType'] = $post_type;
+			$context['postId']   = $post_id;
+			return $context;
+		};
+
+		// Use an early priority to so that other 'render_block_context' filters have access to the values.
+		add_filter( 'render_block_context', $filter_block_context, 1 );
 		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
 		// `render_callback` and ensure that no wrapper markup is included.
-		$block_content = (
-			new WP_Block(
-				$block_instance,
-				array(
-					'postType' => get_post_type(),
-					'postId'   => get_the_ID(),
-				)
-			)
-		)->render( array( 'dynamic' => false ) );
+		$block_content = ( new WP_Block( $block_instance ) )->render( array( 'dynamic' => false ) );
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
 		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
-		$content     .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
+
+		$inner_block_directives = $enhanced_pagination ? ' data-wp-key="post-template-item-' . $post_id . '"' : '';
+
+		$content .= '<li' . $inner_block_directives . ' class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	/*
@@ -115,6 +147,8 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-template` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_template() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-template/style.scss b/packages/block-library/src/post-template/style.scss
index 9db5c808db1a79..806aadc77470eb 100644
--- a/packages/block-library/src/post-template/style.scss
+++ b/packages/block-library/src/post-template/style.scss
@@ -5,18 +5,14 @@
 	list-style: none;
 	padding: 0;
 
-	// Unset background colors that can be inherited from Global Styles with extra specificity.
-	&.wp-block-post-template {
-		background: none;
-	}
-
+	// These rules no longer apply but should be kept for backwards compatibility.
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;
 		flex-wrap: wrap;
 		gap: 1.25em;
 
-		li {
+		> li {
 			margin: 0;
 			width: 100%;
 		}
@@ -30,3 +26,30 @@
 		}
 	}
 }
+
+@media ( max-width: $break-small ) {
+	// Temporary specificity bump until "wp-container" layout specificity is revisited.
+	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignright,
+.wp-block-post-template-is-layout-flow > li > .alignright {
+	float: right;
+	margin-inline-start: 2em;
+	margin-inline-end: 0;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .alignleft,
+.wp-block-post-template-is-layout-flow > li > .alignleft {
+	float: left;
+	margin-inline-start: 0;
+	margin-inline-end: 2em;
+}
+
+.wp-block-post-template-is-layout-constrained > li > .aligncenter,
+.wp-block-post-template-is-layout-flow > li > .aligncenter {
+	margin-inline-start: auto;
+	margin-inline-end: auto;
+}
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index e14f96170ca88c..165f50109616e7 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-terms",
 	"title": "Post Terms",
 	"category": "theme",
@@ -27,6 +27,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {
@@ -54,6 +57,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index a85e32ff4a9df6..13d5b61ad13d6b 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { unescape } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,7 @@ import {
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -49,7 +49,9 @@ export default function PostTermsEdit( {
 
 	const selectedTerm = useSelect(
 		( select ) => {
-			if ( ! term ) return {};
+			if ( ! term ) {
+				return {};
+			}
 			const { getTaxonomy } = select( coreStore );
 			const taxonomy = getTaxonomy( term );
 			return taxonomy?.visibility?.publicly_queryable ? taxonomy : {};
@@ -63,16 +65,12 @@ export default function PostTermsEdit( {
 	const hasPost = postId && postType;
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			[ `taxonomy-${ term }` ]: term,
 		} ),
 	} );
 
-	if ( ! hasPost || ! term ) {
-		return <div { ...blockProps }>{ blockInformation.title }</div>;
-	}
-
 	return (
 		<>
 			<BlockControls>
@@ -83,8 +81,10 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
 					value={ separator || '' }
@@ -95,12 +95,12 @@ export default function PostTermsEdit( {
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
-				{ isLoading && <Spinner /> }
-				{ ! isLoading && hasPostTerms && ( isSelected || prefix ) && (
+				{ isLoading && hasPost && <Spinner /> }
+				{ ! isLoading && ( isSelected || prefix ) && (
 					<RichText
+						identifier="prefix"
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__prefix"
-						multiline={ false }
 						aria-label={ __( 'Prefix' ) }
 						placeholder={ __( 'Prefix' ) + ' ' }
 						value={ prefix }
@@ -110,7 +110,11 @@ export default function PostTermsEdit( {
 						tagName="span"
 					/>
 				) }
-				{ ! isLoading &&
+				{ ( ! hasPost || ! term ) && (
+					<span>{ blockInformation.title }</span>
+				) }
+				{ hasPost &&
+					! isLoading &&
 					hasPostTerms &&
 					postTerms
 						.map( ( postTerm ) => (
@@ -119,7 +123,7 @@ export default function PostTermsEdit( {
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
 							>
-								{ unescape( postTerm.name ) }
+								{ decodeEntities( postTerm.name ) }
 							</a>
 						) )
 						.reduce( ( prev, curr ) => (
@@ -131,15 +135,16 @@ export default function PostTermsEdit( {
 								{ curr }
 							</>
 						) ) }
-				{ ! isLoading &&
+				{ hasPost &&
+					! isLoading &&
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }
-				{ ! isLoading && hasPostTerms && ( isSelected || suffix ) && (
+				{ ! isLoading && ( isSelected || suffix ) && (
 					<RichText
+						identifier="suffix"
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__suffix"
-						multiline={ false }
 						aria-label={ __( 'Suffix' ) }
 						placeholder={ ' ' + __( 'Suffix' ) }
 						value={ suffix }
diff --git a/packages/block-library/src/post-terms/hooks.js b/packages/block-library/src/post-terms/hooks.js
index 539ea837a30b8d..2851cd145e9a33 100644
--- a/packages/block-library/src/post-terms/hooks.js
+++ b/packages/block-library/src/post-terms/hooks.js
@@ -16,9 +16,9 @@ export default function enhanceVariations( settings, name ) {
 	}
 	const variations = settings.variations.map( ( variation ) => ( {
 		...variation,
-		...( variationIconMap[ variation.name ] && {
-			icon: variationIconMap[ variation.name ],
-		} ),
+		...{
+			icon: variationIconMap[ variation.name ] ?? postCategories,
+		},
 	} ) );
 	return {
 		...settings,
diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
index f98baba65ec639..3e7a05f10117e4 100644
--- a/packages/block-library/src/post-terms/index.php
+++ b/packages/block-library/src/post-terms/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-terms` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -22,19 +24,17 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
-	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
-		return '';
-	}
-
-	$classes = 'taxonomy-' . $attributes['term'];
+	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= ' has-text-align-' . $attributes['textAlign'];
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
 
 	$separator = empty( $attributes['separator'] ) ? ' ' : $attributes['separator'];
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	$prefix = "<div $wrapper_attributes>";
 	if ( isset( $attributes['prefix'] ) && $attributes['prefix'] ) {
@@ -46,23 +46,33 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
 	}
 
-	return get_the_term_list(
+	$post_terms = get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
 		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		wp_kses_post( $suffix )
 	);
+
+	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
+		return '';
+	}
+
+	return $post_terms;
 }
 
 /**
- * Registers the `core/post-terms` block on the server.
+ * Returns the available variations for the `core/post-terms` block.
+ *
+ * @since 6.5.0
+ *
+ * @return array The available variations for the block.
  */
-function register_block_core_post_terms() {
+function block_core_post_terms_build_variations() {
 	$taxonomies = get_taxonomies(
 		array(
-			'public'       => true,
-			'show_in_rest' => true,
+			'publicly_queryable' => true,
+			'show_in_rest'       => true,
 		),
 		'objects'
 	);
@@ -78,12 +88,16 @@ function register_block_core_post_terms() {
 		$variation = array(
 			'name'        => $taxonomy->name,
 			'title'       => $taxonomy->label,
-			/* translators: %s: taxonomy's label */
-			'description' => sprintf( __( 'Display the assigned taxonomy: %s' ), $taxonomy->label ),
+			'description' => sprintf(
+				/* translators: %s: taxonomy's label */
+				__( 'Display a list of assigned terms from the taxonomy: %s' ),
+				$taxonomy->label
+			),
 			'attributes'  => array(
 				'term' => $taxonomy->name,
 			),
 			'isActive'    => array( 'term' ),
+			'scope'       => array( 'inserter', 'transform' ),
 		);
 		// Set the category variation as the default one.
 		if ( 'category' === $taxonomy->name ) {
@@ -96,11 +110,20 @@ function register_block_core_post_terms() {
 		}
 	}
 
+	return array_merge( $built_ins, $custom_variations );
+}
+
+/**
+ * Registers the `core/post-terms` block on the server.
+ *
+ * @since 5.8.0
+ */
+function register_block_core_post_terms() {
 	register_block_type_from_metadata(
 		__DIR__ . '/post-terms',
 		array(
-			'render_callback' => 'render_block_core_post_terms',
-			'variations'      => array_merge( $built_ins, $custom_variations ),
+			'render_callback'    => 'render_block_core_post_terms',
+			'variation_callback' => 'block_core_post_terms_build_variations',
 		)
 	);
 }
diff --git a/packages/block-library/src/post-terms/use-post-terms.js b/packages/block-library/src/post-terms/use-post-terms.js
index 99c9ddcfbfb463..ed22df9a9728b0 100644
--- a/packages/block-library/src/post-terms/use-post-terms.js
+++ b/packages/block-library/src/post-terms/use-post-terms.js
@@ -4,6 +4,8 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+const EMPTY_ARRAY = [];
+
 export default function usePostTerms( { postId, term } ) {
 	const { slug } = term;
 
@@ -12,8 +14,8 @@ export default function usePostTerms( { postId, term } ) {
 			const visible = term?.visibility?.publicly_queryable;
 			if ( ! visible ) {
 				return {
-					postTerms: [],
-					_isLoading: false,
+					postTerms: EMPTY_ARRAY,
+					isLoading: false,
 					hasPostTerms: false,
 				};
 			}
@@ -36,6 +38,6 @@ export default function usePostTerms( { postId, term } ) {
 				hasPostTerms: !! terms?.length,
 			};
 		},
-		[ postId, term?.visibility?.publicly_queryable ]
+		[ postId, term?.visibility?.publicly_queryable, slug ]
 	);
 }
diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json
new file mode 100644
index 00000000000000..ce0ab2be6c02f3
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/block.json
@@ -0,0 +1,56 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/post-time-to-read",
+	"title": "Time To Read",
+	"category": "theme",
+	"description": "Show minutes required to finish reading the post.",
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	}
+}
diff --git a/packages/block-library/src/post-time-to-read/edit.js b/packages/block-library/src/post-time-to-read/edit.js
new file mode 100644
index 00000000000000..0533b99d3fd9d7
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/edit.js
@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { _x, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
+import { count as wordCount } from '@wordpress/wordcount';
+
+/**
+ * Average reading rate - based on average taken from
+ * https://irisreading.com/average-reading-speed-in-various-languages/
+ * (Characters/minute used for Chinese rather than words).
+ */
+const AVERAGE_READING_RATE = 189;
+
+function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
+	const { textAlign } = attributes;
+	const { postId, postType } = context;
+
+	const [ contentStructure ] = useEntityProp(
+		'postType',
+		postType,
+		'content',
+		postId
+	);
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	const minutesToReadString = useMemo( () => {
+		// Replicates the logic found in getEditedPostContent().
+		let content;
+		if ( contentStructure instanceof Function ) {
+			content = contentStructure( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			content = __unstableSerializeAndClean( blocks );
+		} else {
+			content = contentStructure;
+		}
+
+		/*
+		 * translators: If your word count is based on single characters (e.g. East Asian characters),
+		 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+		 * Do not translate into your own language.
+		 */
+		const wordCountType = _x(
+			'words',
+			'Word count type. Do not translate!'
+		);
+
+		const minutesToRead = Math.max(
+			1,
+			Math.round(
+				wordCount( content || '', wordCountType ) / AVERAGE_READING_RATE
+			)
+		);
+
+		return sprintf(
+			/* translators: %s: the number of minutes to read the post. */
+			_n( '%s minute', '%s minutes', minutesToRead ),
+			minutesToRead
+		);
+	}, [ contentStructure, blocks ] );
+
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<div { ...blockProps }>{ minutesToReadString }</div>
+		</>
+	);
+}
+
+export default PostTimeToReadEdit;
diff --git a/packages/block-library/src/post-time-to-read/icon.js b/packages/block-library/src/post-time-to-read/icon.js
new file mode 100644
index 00000000000000..56b6b2b182fc26
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/icon.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M12 3c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16.5c-4.1 0-7.5-3.4-7.5-7.5S7.9 4.5 12 4.5s7.5 3.4 7.5 7.5-3.4 7.5-7.5 7.5zM12 7l-1 5c0 .3.2.6.4.8l4.2 2.8-2.7-4.1L12 7z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/post-time-to-read/index.js b/packages/block-library/src/post-time-to-read/index.js
new file mode 100644
index 00000000000000..039923161ca81d
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import icon from './icon';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	example: {},
+};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-time-to-read/index.php b/packages/block-library/src/post-time-to-read/index.php
new file mode 100644
index 00000000000000..eac79d11450b7d
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/index.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-time-to-read` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-time-to-read` block on the server.
+ *
+ * @param  array    $attributes Block attributes.
+ * @param  string   $content    Block default content.
+ * @param  WP_Block $block      Block instance.
+ * @return string Returns the rendered post author name block.
+ */
+function render_block_core_post_time_to_read( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$content = get_the_content();
+
+	/*
+	 * Average reading rate - based on average taken from
+	 * https://irisreading.com/average-reading-speed-in-various-languages/
+	 * (Characters/minute used for Chinese rather than words).
+	 */
+	$average_reading_rate = 189;
+
+	$word_count_type = wp_get_word_count_type();
+
+	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
+
+	$minutes_to_read_string = sprintf(
+		/* translators: %s: the number of minutes to read the post. */
+		_n( '%s minute', '%s minutes', $minutes_to_read ),
+		$minutes_to_read
+	);
+
+	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$minutes_to_read_string
+	);
+}
+
+/**
+ * Registers the `core/post-time-to-read` block on the server.
+ */
+function register_block_core_post_time_to_read() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-time-to-read',
+		array(
+			'render_callback' => 'render_block_core_post_time_to_read',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_time_to_read' );
diff --git a/packages/block-library/src/post-time-to-read/init.js b/packages/block-library/src/post-time-to-read/init.js
new file mode 100644
index 00000000000000..79f0492c2cb2f8
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/post-time-to-read/style.scss b/packages/block-library/src/post-time-to-read/style.scss
new file mode 100644
index 00000000000000..9d10408a599ed2
--- /dev/null
+++ b/packages/block-library/src/post-time-to-read/style.scss
@@ -0,0 +1,4 @@
+.wp-block-post-time-to-read {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 015896ff1bad01..ecb5053d6cd39e 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -1,8 +1,8 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/post-title",
-	"title": "Post Title",
+	"title": "Title",
 	"category": "theme",
 	"description": "Displays the title of a post, page, or any other content-type.",
 	"textdomain": "default",
@@ -15,6 +15,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false
@@ -29,6 +32,9 @@
 			"default": "_self"
 		}
 	},
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
@@ -55,9 +61,22 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
 			}
 		}
 	},
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index 4f01b17fc7ac4e..fdfb8e7c2c6cd2 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,25 +12,44 @@ import {
 	InspectorControls,
 	useBlockProps,
 	PlainText,
+	HeadingLevelDropdown,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
-import { useCanEditEntity } from '../utils/hooks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
-	attributes: { level, textAlign, isLink, rel, linkTarget },
+	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
+	insertBlocksAfter,
 } ) {
-	const TagName = 0 === level ? 'p' : 'h' + level;
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
+	const userCanEdit = useSelect(
+		( select ) => {
+			/**
+			 * useCanEditEntity may trigger an OPTIONS request to the REST API
+			 * via the canUser resolver. However, when the Post Title is a
+			 * descendant of a Query Loop block, the title cannot be edited. In
+			 * order to avoid these unnecessary requests, we call the hook
+			 * without the proper data, resulting in returning early without
+			 * making them.
+			 */
+			if ( isDescendentOfQueryLoop ) {
+				return false;
+			}
+			return select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: postType,
+				id: postId,
+			} );
+		},
+		[ isDescendentOfQueryLoop, postType, postId ]
+	);
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
 		'postType',
 		postType,
@@ -38,112 +57,125 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
+	const onSplitAtEnd = () => {
+		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+	};
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+	const blockEditingMode = useBlockEditingMode();
 
-	let titleElement = (
-		<TagName { ...blockProps }>{ __( 'Post Title' ) }</TagName>
-	);
+	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
 
 	if ( postType && postId ) {
-		titleElement =
-			userCanEdit && ! isDescendentOfQueryLoop ? (
+		titleElement = userCanEdit ? (
+			<PlainText
+				tagName={ TagName }
+				placeholder={ __( 'No title' ) }
+				value={ rawTitle }
+				onChange={ setTitle }
+				__experimentalVersion={ 2 }
+				__unstableOnSplitAtEnd={ onSplitAtEnd }
+				{ ...blockProps }
+			/>
+		) : (
+			<TagName
+				{ ...blockProps }
+				dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+			/>
+		);
+	}
+
+	if ( isLink && postType && postId ) {
+		titleElement = userCanEdit ? (
+			<TagName { ...blockProps }>
 				<PlainText
-					tagName={ TagName }
-					placeholder={ __( 'No Title' ) }
+					tagName="a"
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
-					{ ...blockProps }
+					__unstableOnSplitAtEnd={ onSplitAtEnd }
 				/>
-			) : (
-				<TagName
-					{ ...blockProps }
-					dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
+			</TagName>
+		) : (
+			<TagName { ...blockProps }>
+				<a
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					onClick={ ( event ) => event.preventDefault() }
+					dangerouslySetInnerHTML={ {
+						__html: fullTitle?.rendered,
+					} }
 				/>
-			);
-	}
-
-	if ( isLink && postType && postId ) {
-		titleElement =
-			userCanEdit && ! isDescendentOfQueryLoop ? (
-				<TagName { ...blockProps }>
-					<PlainText
-						tagName="a"
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						placeholder={
-							! rawTitle.length ? __( 'No Title' ) : null
-						}
-						value={ rawTitle }
-						onChange={ setTitle }
-						__experimentalVersion={ 2 }
-					/>
-				</TagName>
-			) : (
-				<TagName { ...blockProps }>
-					<a
-						href={ link }
-						target={ linkTarget }
-						rel={ rel }
-						onClick={ ( event ) => event.preventDefault() }
-						dangerouslySetInnerHTML={ {
-							__html: fullTitle?.rendered,
-						} }
-					/>
-				</TagName>
-			);
+			</TagName>
+		);
 	}
 
 	return (
 		<>
-			<BlockControls group="block">
-				<HeadingLevelDropdown
-					selectedLevel={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
-					<ToggleControl
-						label={ __( 'Make title a link' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					{ isLink && (
-						<>
+			{ blockEditingMode === 'default' && (
+				<>
+					<BlockControls group="block">
+						<HeadingLevelDropdown
+							value={ level }
+							options={ levelOptions }
+							onChange={ ( newLevel ) =>
+								setAttributes( { level: newLevel } )
+							}
+						/>
+						<AlignmentControl
+							value={ textAlign }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { textAlign: nextAlign } );
+							} }
+						/>
+					</BlockControls>
+					<InspectorControls>
+						<PanelBody title={ __( 'Settings' ) }>
 							<ToggleControl
-								label={ __( 'Open in new tab' ) }
-								onChange={ ( value ) =>
-									setAttributes( {
-										linkTarget: value ? '_blank' : '_self',
-									} )
-								}
-								checked={ linkTarget === '_blank' }
-							/>
-							<TextControl
-								label={ __( 'Link rel' ) }
-								value={ rel }
-								onChange={ ( newRel ) =>
-									setAttributes( { rel: newRel } )
+								__nextHasNoMarginBottom
+								label={ __( 'Make title a link' ) }
+								onChange={ () =>
+									setAttributes( { isLink: ! isLink } )
 								}
+								checked={ isLink }
 							/>
-						</>
-					) }
-				</PanelBody>
-			</InspectorControls>
+							{ isLink && (
+								<>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										label={ __( 'Open in new tab' ) }
+										onChange={ ( value ) =>
+											setAttributes( {
+												linkTarget: value
+													? '_blank'
+													: '_self',
+											} )
+										}
+										checked={ linkTarget === '_blank' }
+									/>
+									<TextControl
+										__next40pxDefaultSize
+										__nextHasNoMarginBottom
+										label={ __( 'Link rel' ) }
+										value={ rel }
+										onChange={ ( newRel ) =>
+											setAttributes( { rel: newRel } )
+										}
+									/>
+								</>
+							) }
+						</PanelBody>
+					</InspectorControls>
+				</>
+			) }
 			{ titleElement }
 		</>
 	);
diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php
index 125a2d81ddcbe3..ed27f2e4158eb4 100644
--- a/packages/block-library/src/post-title/index.php
+++ b/packages/block-library/src/post-title/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-title` block on the server.
  *
+ * @since 6.3.0 Omitting the $post argument from the `get_the_title`.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -19,25 +21,34 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID = $block->context['postId'];
-	$title   = get_the_title();
+	/**
+	 * The `$post` argument is intentionally omitted so that changes are reflected when previewing a post.
+	 * See: https://github.com/WordPress/gutenberg/pull/37622#issuecomment-1000932816.
+	 */
+	$title = get_the_title();
 
 	if ( ! $title ) {
 		return '';
 	}
 
-	$tag_name         = 'h2';
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
-
+	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
-		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', esc_url( get_the_permalink( $block->context['postId'] ) ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
+	}
+
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',
@@ -49,6 +60,8 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-title` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_post_title() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-title/style.scss b/packages/block-library/src/post-title/style.scss
index abeb4454bcb2c5..8dfd25b1a0786b 100644
--- a/packages/block-library/src/post-title/style.scss
+++ b/packages/block-library/src/post-title/style.scss
@@ -3,7 +3,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	a {
+	:where(a) {
 		display: inline-block;
+		font-family: inherit;
+		font-size: inherit;
+		font-style: inherit;
+		font-weight: inherit;
+		letter-spacing: inherit;
+		line-height: inherit;
+		text-decoration: inherit;
 	}
 }
diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index bab40b94a7ec46..c25b8ce37093a5 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/preformatted",
 	"title": "Preformatted",
 	"category": "text",
@@ -8,12 +8,11 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "pre",
-			"default": "",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
@@ -25,6 +24,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -37,6 +40,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-preformatted"
diff --git a/packages/block-library/src/preformatted/edit.js b/packages/block-library/src/preformatted/edit.js
index 7117d0617905f9..072475ff072c9d 100644
--- a/packages/block-library/src/preformatted/edit.js
+++ b/packages/block-library/src/preformatted/edit.js
@@ -3,12 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 export default function PreformattedEdit( {
 	attributes,
 	mergeBlocks,
 	setAttributes,
 	onRemove,
+	insertBlocksAfter,
 	style,
 } ) {
 	const { content } = attributes;
@@ -31,6 +33,9 @@ export default function PreformattedEdit( {
 			onMerge={ mergeBlocks }
 			{ ...blockProps }
 			__unstablePastePlainText
+			__unstableOnSplitAtDoubleLineEnd={ () =>
+				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			}
 		/>
 	);
 }
diff --git a/packages/block-library/src/preformatted/edit.native.js b/packages/block-library/src/preformatted/edit.native.js
index 325e99e2a15839..1f29cddc88d9cf 100644
--- a/packages/block-library/src/preformatted/edit.native.js
+++ b/packages/block-library/src/preformatted/edit.native.js
@@ -28,12 +28,10 @@ export default function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
-	const hasBaseColors =
-		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		hasBaseColors &&
+		style?.baseColors?.color &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];
diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
index 491acd02bab1db..a2e1fecc185528 100644
--- a/packages/block-library/src/preformatted/index.js
+++ b/packages/block-library/src/preformatted/index.js
@@ -34,7 +34,7 @@ export const settings = {
 	save,
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: attributes.content + attributesToMerge.content,
+			content: attributes.content + '\n\n' + attributesToMerge.content,
 		};
 	},
 };
diff --git a/packages/block-library/src/preformatted/style.scss b/packages/block-library/src/preformatted/style.scss
index 71e60ffe4ea529..783fee74d4f4fa 100644
--- a/packages/block-library/src/preformatted/style.scss
+++ b/packages/block-library/src/preformatted/style.scss
@@ -1,7 +1,10 @@
 .wp-block-preformatted {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	white-space: pre-wrap;
 }
 
-.wp-block-preformatted.has-background {
+// Add low specificity default padding when a background is used.
+:where(.wp-block-preformatted.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }
diff --git a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
index 08bbbd42e7dc75..db1c80c514206b 100644
--- a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
+exports[`Preformatted should match snapshot when content is empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -12,7 +12,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -20,15 +20,14 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
   >
     <TextInput
       accessibilityLabel="Text input. Empty"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}
@@ -40,17 +39,18 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      selectionColor="black"
+      triggerKeyCodes={[]}
       value=""
     />
   </View>
 </View>
 `;
 
-exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
+exports[`Preformatted should match snapshot when content is not empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -59,7 +59,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -67,15 +67,14 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
   >
     <TextInput
       accessibilityLabel="Text input. <pre>Hello World!</pre>"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
       disableEditingMenu={false}
       fontFamily="serif"
-      fontSize={16}
       isMultiline={false}
       maxImagesWidth={200}
       onBlur={[Function]}
@@ -87,7 +86,8 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      selectionColor="black"
+      triggerKeyCodes={[]}
       value="<pre>Hello World!</pre>"
     />
   </View>
diff --git a/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..81adef5b228388
--- /dev/null
+++ b/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preformatted block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Some <em>preformatted</em> text...<br />And more!</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Preformatted block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Preformatted block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Preformatted block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Some <em>preformatted</em> text...<br />And more!</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/preformatted/test/edit.native.js b/packages/block-library/src/preformatted/test/edit.native.js
index ec6b8276e210e8..153b1b9e9b0ab5 100644
--- a/packages/block-library/src/preformatted/test/edit.native.js
+++ b/packages/block-library/src/preformatted/test/edit.native.js
@@ -1,32 +1,35 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	addBlock,
+	typeInRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	render,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import PreformattedEdit from '../edit';
 
-describe( 'core/more/edit/native', () => {
-	it( 'renders without crashing', () => {
-		const screen = render(
-			<PreformattedEdit
-				attributes={ {} }
-				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ jest.fn() }
-			/>
-		);
-
-		expect( screen.container ).toBeDefined();
-	} );
+setupCoreBlocks();
 
+describe( 'Preformatted', () => {
 	it( 'should match snapshot when content is empty', () => {
 		const screen = render(
 			<PreformattedEdit
 				attributes={ {} }
 				setAttributes={ jest.fn() }
-				getStylesFromColorScheme={ ( styles1 ) => styles1 }
+				getStylesFromColorScheme={ jest.fn() }
 			/>
 		);
 		expect( screen.toJSON() ).toMatchSnapshot();
@@ -42,4 +45,67 @@ describe( 'core/more/edit/native', () => {
 		);
 		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
+
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Preformatted' );
+		const preformattedTextInput = await screen.findByPlaceholderText(
+			'Write preformatted text…'
+		);
+		typeInRichText( preformattedTextInput, 'A great statement.' );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		typeInRichText( preformattedTextInput, 'Again' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:preformatted -->
+		<pre class="wp-block-preformatted">A great statement.<br>Again</pre>
+		<!-- /wp:preformatted -->"
+	` );
+	} );
+
+	it( 'should split on triple Enter', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Preformatted' );
+		const preformattedTextInput = await screen.findByPlaceholderText(
+			'Write preformatted text…'
+		);
+		typeInRichText( preformattedTextInput, 'Hello' );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( preformattedTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:preformatted -->
+		<pre class="wp-block-preformatted">Hello</pre>
+		<!-- /wp:preformatted -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );
diff --git a/packages/block-library/src/preformatted/test/transforms.native.js b/packages/block-library/src/preformatted/test/transforms.native.js
new file mode 100644
index 00000000000000..86a7d6134b1135
--- /dev/null
+++ b/packages/block-library/src/preformatted/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Preformatted';
+const initialHtml = `
+<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>
+<!-- /wp:preformatted -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/private-apis.js b/packages/block-library/src/private-apis.js
new file mode 100644
index 00000000000000..3cee106895d6d7
--- /dev/null
+++ b/packages/block-library/src/private-apis.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
+import { lock } from './lock-unlock';
+
+/**
+ * @private
+ */
+export const privateApis = {};
+lock( privateApis, {
+	BlockKeyboardShortcuts,
+} );
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 0732bb52f66bfb..271bba74d0252a 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/pullquote",
 	"title": "Pullquote",
 	"category": "text",
@@ -8,17 +8,16 @@
 	"textdomain": "default",
 	"attributes": {
 		"value": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "cite",
-			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
@@ -27,6 +26,13 @@
 	"supports": {
 		"anchor": true,
 		"align": [ "left", "right", "wide", "full" ],
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"background": true,
@@ -36,6 +42,16 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -46,8 +62,7 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true
+				"fontSize": true
 			}
 		},
 		"__experimentalBorder": {
@@ -67,6 +82,9 @@
 				"fontSize": "1.5em",
 				"lineHeight": "1.6"
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-pullquote-editor",
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 1f3ac876e4d45c..18e47997550782 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { get } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,12 +14,6 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
-import {
-	create,
-	replace,
-	toHTMLString,
-	__UNSTABLE_LINE_SEPARATOR,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -65,13 +58,14 @@ function parseBorderColor( styleString ) {
 }
 
 function multilineToInline( value ) {
-	return toHTMLString( {
-		value: replace(
-			create( { html: value, multilineTag: 'p' } ),
-			new RegExp( __UNSTABLE_LINE_SEPARATOR, 'g' ),
-			'\n'
-		),
-	} );
+	value = value || `<p></p>`;
+	const padded = `</p>${ value }<p>`;
+	const values = padded.split( `</p><p>` );
+
+	values.shift();
+	values.pop();
+
+	return values.join( '<br>' );
 }
 
 const v5 = {
@@ -81,14 +75,14 @@ const v5 = {
 			source: 'html',
 			selector: 'blockquote',
 			multiline: 'p',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
@@ -101,7 +95,7 @@ const v5 = {
 		return (
 			<figure
 				{ ...useBlockProps.save( {
-					className: classnames( {
+					className: clsx( {
 						[ `has-text-align-${ textAlign }` ]: textAlign,
 					} ),
 				} ) }
@@ -151,7 +145,7 @@ const v4 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -170,7 +164,7 @@ const v4 = {
 			'color',
 			textColor
 		);
-		const blockquoteClasses = classnames( {
+		const blockquoteClasses = clsx( {
 			'has-text-color': textColor || customTextColor,
 			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 		} );
@@ -281,7 +275,7 @@ const v3 = {
 				mainColor
 			);
 
-			figureClasses = classnames( {
+			figureClasses = clsx( {
 				'has-background': backgroundClass || customMainColor,
 				[ backgroundClass ]: backgroundClass,
 			} );
@@ -314,7 +308,7 @@ const v3 = {
 		);
 		const blockquoteClasses =
 			( textColor || customTextColor ) &&
-			classnames( 'has-text-color', {
+			clsx( 'has-text-color', {
 				[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 			} );
 
@@ -435,11 +429,8 @@ const v2 = {
 			// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
 			// as there is no expectation that themes create classes that set border colors.
 		} else if ( mainColor ) {
-			const colors = get(
-				select( blockEditorStore ).getSettings(),
-				[ 'colors' ],
-				[]
-			);
+			const colors =
+				select( blockEditorStore ).getSettings().colors ?? [];
 			const colorObject = getColorObjectByAttributeValues(
 				colors,
 				mainColor
@@ -455,7 +446,7 @@ const v2 = {
 		);
 		const blockquoteClasses =
 			textColor || customTextColor
-				? classnames( 'has-text-color', {
+				? clsx( 'has-text-color', {
 						[ blockquoteTextColorClass ]: blockquoteTextColorClass,
 				  } )
 				: undefined;
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 637d83d5b42897..3b0831a26352d0 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ function PullQuoteEdit( {
 } ) {
 	const { textAlign, citation, value } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index 7b985d8020c9fe..deb325849ebebf 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -1,4 +1,6 @@
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	& blockquote p {
 		font-size: 32px;
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
index 26f6adc3eef05b..19fa49a3fa8345 100644
--- a/packages/block-library/src/pullquote/save.js
+++ b/packages/block-library/src/pullquote/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ export default function save( { attributes } ) {
 	return (
 		<figure
 			{ ...useBlockProps.save( {
-				className: classnames( {
+				className: clsx( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ),
 			} ) }
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 79591d82f157cd..ff5fe6068dfac3 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -1,9 +1,9 @@
 .wp-block-pullquote {
-	margin: 0 0 1em 0;
-	padding: 3em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
+	margin: 0 0 1em 0;
+	padding: 4em 0;
 
 	p,
 	blockquote,
@@ -11,6 +11,18 @@
 		color: inherit;
 	}
 
+	blockquote {
+		margin: 0;
+	}
+
+	p {
+		margin-top: 0;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
 	&.alignleft,
 	&.alignright {
 		max-width: $content-width * 0.5;
@@ -36,6 +48,8 @@
 }
 
 // .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;
 	blockquote {
@@ -58,4 +72,5 @@
 
 .wp-block-pullquote cite {
 	color: inherit;
+	display: block;
 }
diff --git a/packages/block-library/src/pullquote/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/pullquote/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..6840d561dda0cc
--- /dev/null
+++ b/packages/block-library/src/pullquote/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pullquote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Pullquote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Pullquote block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">One of the hardest things to do in technology is disrupt yourself.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Matt Mullenweg</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Pullquote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Matt Mullenweg</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Pullquote block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph --><cite>Matt Mullenweg</cite></blockquote>
+<!-- /wp:quote -->"
+`;
diff --git a/packages/block-library/src/pullquote/test/edit.native.js b/packages/block-library/src/pullquote/test/edit.native.js
new file mode 100644
index 00000000000000..c53ad24a33f028
--- /dev/null
+++ b/packages/block-library/src/pullquote/test/edit.native.js
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	selectRangeInRichText,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	waitFor,
+	typeInRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+setupCoreBlocks();
+
+describe( 'Pullquote', () => {
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Pullquote' );
+		// Await inner blocks to be rendered
+		const citationBlock = await waitFor( () =>
+			screen.getByPlaceholderText( 'Add citation' )
+		);
+
+		// Act
+		const pullquoteBlock = getBlock( screen, 'Pullquote' );
+		fireEvent.press( pullquoteBlock );
+		const pullquoteTextInput =
+			within( pullquoteBlock ).getByPlaceholderText( 'Add quote' );
+		typeInRichText( pullquoteTextInput, 'A great statement.' );
+		fireEvent( pullquoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		typeInRichText( pullquoteTextInput, 'Again' );
+
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		typeInRichText( citationTextInput, 'A person' );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		selectRangeInRichText( citationTextInput, 2 );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:pullquote -->
+		<figure class="wp-block-pullquote"><blockquote><p>A great statement.<br>Again</p><cite>A <br>person</cite></blockquote></figure>
+		<!-- /wp:pullquote -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+} );
diff --git a/packages/block-library/src/pullquote/test/transforms.native.js b/packages/block-library/src/pullquote/test/transforms.native.js
new file mode 100644
index 00000000000000..c0360f82b6e87a
--- /dev/null
+++ b/packages/block-library/src/pullquote/test/transforms.native.js
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Pullquote';
+const initialHtml = `
+<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json
index f042223f36aeca..2f656594afa306 100644
--- a/packages/block-library/src/query-no-results/block.json
+++ b/packages/block-library/src/query-no-results/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-no-results",
 	"title": "No results",
 	"category": "theme",
@@ -8,6 +8,16 @@
 	"parent": [ "core/query" ],
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"attributes": {
+					"content": "No posts were found."
+				}
+			}
+		]
+	},
 	"supports": {
 		"align": true,
 		"reusable": false,
@@ -28,6 +38,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/query-no-results/index.php b/packages/block-library/src/query-no-results/index.php
index 6d4dad48f49e00..34d6b321cbd6ba 100644
--- a/packages/block-library/src/query-no-results/index.php
+++ b/packages/block-library/src/query-no-results/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the `core/query-no-results` block on the server.
  *
+ * @since 6.0.0
+ *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -32,23 +36,23 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		$query      = new WP_Query( $query_args );
 	}
 
-	if ( $query->have_posts() ) {
+	if ( $query->post_count > 0 ) {
 		return '';
 	}
 
-	if ( ! $use_global_query ) {
-		wp_reset_postdata();
-	}
-
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		$wrapper_attributes,
 		$content
 	);
 }
 
 /**
  * Registers the `core/query-no-results` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_query_no_results() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-no-results/save.js b/packages/block-library/src/query-no-results/save.js
index 70161d85c27b16..17571d8f30d2de 100644
--- a/packages/block-library/src/query-no-results/save.js
+++ b/packages/block-library/src/query-no-results/save.js
@@ -3,6 +3,6 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function QueryNoResultsSave() {
+export default function save() {
 	return <InnerBlocks.Content />;
 }
diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json
index ad87d05b5ed997..ec56125ee3b766 100644
--- a/packages/block-library/src/query-pagination-next/block.json
+++ b/packages/block-library/src/query-pagination-next/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",
 	"category": "theme",
@@ -12,7 +12,13 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [
+		"queryId",
+		"query",
+		"paginationArrow",
+		"showLabel",
+		"enhancedPagination"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -35,6 +41,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js
index c0b4916abccb3d..2bd38277a4b6c0 100644
--- a/packages/block-library/src/query-pagination-next/edit.js
+++ b/packages/block-library/src/query-pagination-next/edit.js
@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -22,20 +22,22 @@ export default function QueryPaginationNextEdit( {
 			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
 		>
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Next page link' ) }
-				placeholder={ __( 'Next Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Next page link' ) }
+					placeholder={ __( 'Next Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
-					aria-hidden={ true }
+					aria-hidden
 				>
 					{ displayArrow }
 				</span>
diff --git a/packages/block-library/src/query-pagination-next/index.php b/packages/block-library/src/query-pagination-next/index.php
index e92b58938d53b8..3b5be47fbed371 100644
--- a/packages/block-library/src/query-pagination-next/index.php
+++ b/packages/block-library/src/query-pagination-next/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the `core/query-pagination-next` block on the server.
  *
+ * @since 5.8.0
+ *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -15,15 +19,21 @@
  * @return string Returns the next posts link for the query pagination.
  */
 function render_block_core_query_pagination_next( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
 
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
@@ -31,7 +41,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function () use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 		add_filter( 'next_posts_link_attributes', $filter_link_attributes );
@@ -56,11 +66,30 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		}
 		wp_reset_postdata(); // Restore original Post Data.
 	}
+
+	if ( $enhanced_pagination && isset( $content ) ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag(
+			array(
+				'tag_name'   => 'a',
+				'class_name' => 'wp-block-query-pagination-next',
+			)
+		) ) {
+			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
+			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
+			$content = $p->get_updated_html();
+		}
+	}
+
 	return $content;
 }
 
 /**
  * Registers the `core/query-pagination-next` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query_pagination_next() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json
index fd285965819616..8a9f0ee69f14e4 100644
--- a/packages/block-library/src/query-pagination-numbers/block.json
+++ b/packages/block-library/src/query-pagination-numbers/block.json
@@ -1,13 +1,19 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",
 	"category": "theme",
 	"parent": [ "core/query-pagination" ],
-	"description": "Displays a list of page numbers for pagination",
+	"description": "Displays a list of page numbers for pagination.",
 	"textdomain": "default",
-	"usesContext": [ "queryId", "query" ],
+	"attributes": {
+		"midSize": {
+			"type": "number",
+			"default": 2
+		}
+	},
+	"usesContext": [ "queryId", "query", "enhancedPagination" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -30,7 +36,10 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
-	"editorStyle": "query-pagination-numbers-editor"
+	"editorStyle": "wp-block-query-pagination-numbers-editor"
 }
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
index 3832f673ea1248..b8d8c160cc874d 100644
--- a/packages/block-library/src/query-pagination-numbers/edit.js
+++ b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -1,25 +1,75 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, RangeControl } from '@wordpress/components';
 
 const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
-	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+	<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
+		{ content }
+	</Tag>
 );
 
-const previewPaginationNumbers = () => (
-	<>
-		{ createPaginationItem( 1 ) }
-		{ createPaginationItem( 2 ) }
-		{ createPaginationItem( 3, 'span', 'current' ) }
-		{ createPaginationItem( 4 ) }
-		{ createPaginationItem( 5 ) }
-		{ createPaginationItem( '...', 'span', 'dots' ) }
-		{ createPaginationItem( 8 ) }
-	</>
-);
+const previewPaginationNumbers = ( midSize ) => {
+	const paginationItems = [];
+
+	// First set of pagination items.
+	for ( let i = 1; i <= midSize; i++ ) {
+		paginationItems.push( createPaginationItem( i ) );
+	}
+
+	// Current pagination item.
+	paginationItems.push(
+		createPaginationItem( midSize + 1, 'span', 'current' )
+	);
+
+	// Second set of pagination items.
+	for ( let i = 1; i <= midSize; i++ ) {
+		paginationItems.push( createPaginationItem( midSize + 1 + i ) );
+	}
+
+	// Dots.
+	paginationItems.push( createPaginationItem( '...', 'span', 'dots' ) );
+
+	// Last pagination item.
+	paginationItems.push( createPaginationItem( midSize * 2 + 3 ) );
+
+	return <>{ paginationItems }</>;
+};
 
-export default function QueryPaginationNumbersEdit() {
-	const paginationNumbers = previewPaginationNumbers();
-	return <div { ...useBlockProps() }>{ paginationNumbers }</div>;
+export default function QueryPaginationNumbersEdit( {
+	attributes,
+	setAttributes,
+} ) {
+	const { midSize } = attributes;
+	const paginationNumbers = previewPaginationNumbers(
+		parseInt( midSize, 10 )
+	);
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<RangeControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Number of links' ) }
+						help={ __(
+							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
+						) }
+						value={ midSize }
+						onChange={ ( value ) => {
+							setAttributes( {
+								midSize: parseInt( value, 10 ),
+							} );
+						} }
+						min={ 0 }
+						max={ 5 }
+						withInputField={ false }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...useBlockProps() }>{ paginationNumbers }</div>
+		</>
+	);
 }
diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js
index 3fd903e2d9ef48..f769f54b4ac034 100644
--- a/packages/block-library/src/query-pagination-numbers/index.js
+++ b/packages/block-library/src/query-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/query-pagination-numbers/index.php b/packages/block-library/src/query-pagination-numbers/index.php
index 60fe85efa1f8dc..fddf28660fe4f8 100644
--- a/packages/block-library/src/query-pagination-numbers/index.php
+++ b/packages/block-library/src/query-pagination-numbers/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the `core/query-pagination-numbers` block on the server.
  *
+ * @since 5.8.0
+ *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -15,13 +19,15 @@
  * @return string Returns the pagination numbers for the Query.
  */
 function render_block_core_query_pagination_numbers( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$content            = '';
 	global $wp_query;
+	$mid_size = isset( $block->attributes['midSize'] ) ? (int) $block->attributes['midSize'] : null;
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
 		// Take into account if we have set a bigger `max page`
 		// than what the query has.
@@ -30,7 +36,10 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 			'prev_next' => false,
 			'total'     => $total,
 		);
-		$content       = paginate_links( $paginate_args );
+		if ( null !== $mid_size ) {
+			$paginate_args['mid_size'] = $mid_size;
+		}
+		$content = paginate_links( $paginate_args );
 	} else {
 		$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
 		// `paginate_links` works with the global $wp_query, so we have to
@@ -45,6 +54,9 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 			'total'     => $total,
 			'prev_next' => false,
 		);
+		if ( null !== $mid_size ) {
+			$paginate_args['mid_size'] = $mid_size;
+		}
 		if ( 1 !== $page ) {
 			/**
 			 * `paginate_links` doesn't use the provided `format` when the page is `1`.
@@ -77,9 +89,27 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 		wp_reset_postdata(); // Restore original Post Data.
 		$wp_query = $prev_wp_query;
 	}
+
 	if ( empty( $content ) ) {
 		return '';
 	}
+
+	if ( $enhanced_pagination ) {
+		$p         = new WP_HTML_Tag_Processor( $content );
+		$tag_index = 0;
+		while ( $p->next_tag(
+			array( 'class_name' => 'page-numbers' )
+		) ) {
+			if ( null === $p->get_attribute( 'data-wp-key' ) ) {
+				$p->set_attribute( 'data-wp-key', 'index-' . $tag_index++ );
+			}
+			if ( 'A' === $p->get_tag() ) {
+				$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			}
+		}
+		$content = $p->get_updated_html();
+	}
+
 	return sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
@@ -89,6 +119,8 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
 
 /**
  * Registers the `core/query-pagination-numbers` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query_pagination_numbers() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json
index 484cefe6bbd824..d1e34c8630250d 100644
--- a/packages/block-library/src/query-pagination-previous/block.json
+++ b/packages/block-library/src/query-pagination-previous/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",
 	"category": "theme",
@@ -12,7 +12,13 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [
+		"queryId",
+		"query",
+		"paginationArrow",
+		"showLabel",
+		"enhancedPagination"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,
@@ -35,6 +41,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }
diff --git a/packages/block-library/src/query-pagination-previous/edit.js b/packages/block-library/src/query-pagination-previous/edit.js
index c863d637f7fb51..b32f15052f2e64 100644
--- a/packages/block-library/src/query-pagination-previous/edit.js
+++ b/packages/block-library/src/query-pagination-previous/edit.js
@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -25,21 +25,23 @@ export default function QueryPaginationPreviousEdit( {
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-previous-arrow is-arrow-${ paginationArrow }` }
-					aria-hidden={ true }
+					aria-hidden
 				>
 					{ displayArrow }
 				</span>
 			) }
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Previous page link' ) }
-				placeholder={ __( 'Previous Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Previous page link' ) }
+					placeholder={ __( 'Previous Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 		</a>
 	);
 }
diff --git a/packages/block-library/src/query-pagination-previous/index.php b/packages/block-library/src/query-pagination-previous/index.php
index 9bb9f0d1f2bfbf..1592f0a10cbff5 100644
--- a/packages/block-library/src/query-pagination-previous/index.php
+++ b/packages/block-library/src/query-pagination-previous/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/query-pagination-previous` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -15,13 +17,19 @@
  * @return string Returns the previous posts link for the query.
  */
 function render_block_core_query_pagination_previous( $attributes, $content, $block ) {
-	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Previous Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label = $pagination_arrow . $label;
 	}
@@ -29,7 +37,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function () use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 
@@ -44,11 +52,30 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 			$label
 		);
 	}
+
+	if ( $enhanced_pagination && isset( $content ) ) {
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag(
+			array(
+				'tag_name'   => 'a',
+				'class_name' => 'wp-block-query-pagination-previous',
+			)
+		) ) {
+			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
+			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
+			$content = $p->get_updated_html();
+		}
+	}
+
 	return $content;
 }
 
 /**
  * Registers the `core/query-pagination-previous` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query_pagination_previous() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json
index f75f4077d4e13d..355b188e442d8d 100644
--- a/packages/block-library/src/query-pagination/block.json
+++ b/packages/block-library/src/query-pagination/block.json
@@ -1,21 +1,31 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination",
 	"title": "Pagination",
 	"category": "theme",
-	"parent": [ "core/query" ],
+	"ancestor": [ "core/query" ],
+	"allowedBlocks": [
+		"core/query-pagination-previous",
+		"core/query-pagination-numbers",
+		"core/query-pagination-next"
+	],
 	"description": "Displays a paginated navigation to next/previous set of posts, when applicable.",
 	"textdomain": "default",
 	"attributes": {
 		"paginationArrow": {
 			"type": "string",
 			"default": "none"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"usesContext": [ "queryId", "query" ],
 	"providesContext": {
-		"paginationArrow": "paginationArrow"
+		"paginationArrow": "paginationArrow",
+		"showLabel": "showLabel"
 	},
 	"supports": {
 		"align": true,
@@ -30,7 +40,7 @@
 				"link": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
@@ -49,6 +59,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-query-pagination-editor",
diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js
index 287dc83d99b4b0..e051c2e67e7e5a 100644
--- a/packages/block-library/src/query-pagination/edit.js
+++ b/packages/block-library/src/query-pagination/edit.js
@@ -9,60 +9,53 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { getBlockSupport } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
+import { QueryPaginationLabelControl } from './query-pagination-label-control';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
 	[ 'core/query-pagination-numbers' ],
 	[ 'core/query-pagination-next' ],
 ];
-const ALLOWED_BLOCKS = [
-	'core/query-pagination-previous',
-	'core/query-pagination-numbers',
-	'core/query-pagination-next',
-];
-
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
 
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow, layout },
+	attributes: { paginationArrow, showLabel },
 	setAttributes,
 	clientId,
-	name,
 } ) {
-	const usedLayout = layout || getDefaultBlockLayout( name );
-	const hasNextPreviousBlocks = useSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
-		const innerBlocks = getBlocks( clientId );
-		/**
-		 * Show the `paginationArrow` control only if a
-		 * `QueryPaginationNext/Previous` block exists.
-		 */
-		return innerBlocks?.find( ( innerBlock ) => {
-			return [
-				'core/query-pagination-next',
-				'core/query-pagination-previous',
-			].includes( innerBlock.name );
-		} );
-	}, [] );
+	const hasNextPreviousBlocks = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+			/**
+			 * Show the `paginationArrow` and `showLabel` controls only if a
+			 * `QueryPaginationNext/Previous` block exists.
+			 */
+			return innerBlocks?.find( ( innerBlock ) => {
+				return [
+					'core/query-pagination-next',
+					'core/query-pagination-previous',
+				].includes( innerBlock.name );
+			} );
+		},
+		[ clientId ]
+	);
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalLayout: usedLayout,
 	} );
+	// Always show label text if paginationArrow is set to 'none'.
+	useEffect( () => {
+		if ( paginationArrow === 'none' && ! showLabel ) {
+			setAttributes( { showLabel: true } );
+		}
+	}, [ paginationArrow, setAttributes, showLabel ] );
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
@@ -74,6 +67,14 @@ export default function QueryPaginationEdit( {
 								setAttributes( { paginationArrow: value } );
 							} }
 						/>
+						{ paginationArrow !== 'none' && (
+							<QueryPaginationLabelControl
+								value={ showLabel }
+								onChange={ ( value ) => {
+									setAttributes( { showLabel: value } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			) }
diff --git a/packages/block-library/src/query-pagination/editor.scss b/packages/block-library/src/query-pagination/editor.scss
index 169f2b5ca72afb..ed8a2cc47a30f7 100644
--- a/packages/block-library/src/query-pagination/editor.scss
+++ b/packages/block-library/src/query-pagination/editor.scss
@@ -1,11 +1,9 @@
-$pagination-margin: 0.5em;
-
 // Center flex items. This has an equivalent in style.scss.
 .wp-block[data-align="center"] > .wp-block-query-pagination {
 	justify-content: center;
 }
 
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
 	.wp-block-query-pagination {
 		max-width: 100%;
 		&.block-editor-block-list__layout {
@@ -14,21 +12,3 @@ $pagination-margin: 0.5em;
 	}
 }
 
-.wp-block-query-pagination {
-	> .wp-block-query-pagination-next,
-	> .wp-block-query-pagination-previous,
-	> .wp-block-query-pagination-numbers {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $pagination-margin;
-
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-}
diff --git a/packages/block-library/src/query-pagination/index.php b/packages/block-library/src/query-pagination/index.php
index eaa784be08e7d6..acafe968c0bec2 100644
--- a/packages/block-library/src/query-pagination/index.php
+++ b/packages/block-library/src/query-pagination/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/query-pagination` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param array  $attributes Block attributes.
  * @param string $content    Block default content.
  *
@@ -18,9 +20,11 @@ function render_block_core_query_pagination( $attributes, $content ) {
 		return '';
 	}
 
+	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'aria-label' => __( 'Pagination' ),
+			'class'      => $classes,
 		)
 	);
 
@@ -33,6 +37,8 @@ function render_block_core_query_pagination( $attributes, $content ) {
 
 /**
  * Registers the `core/query-pagination` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query_pagination() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
index 28ae36ed415726..0f2e9c1788bf7b 100644
--- a/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
+++ b/packages/block-library/src/query-pagination/query-pagination-arrow-controls.js
@@ -10,6 +10,8 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }
diff --git a/packages/block-library/src/query-pagination/query-pagination-label-control.js b/packages/block-library/src/query-pagination/query-pagination-label-control.js
new file mode 100644
index 00000000000000..9ff80a663adeb5
--- /dev/null
+++ b/packages/block-library/src/query-pagination/query-pagination-label-control.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '@wordpress/components';
+
+export function QueryPaginationLabelControl( { value, onChange } ) {
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Show label text' ) }
+			help={ __(
+				'Toggle off to hide the label text, e.g. "Next Page".'
+			) }
+			onChange={ onChange }
+			checked={ value === true }
+		/>
+	);
+}
diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss
index a7f2832af48c7a..e949c766e56511 100644
--- a/packages/block-library/src/query-pagination/style.scss
+++ b/packages/block-library/src/query-pagination/style.scss
@@ -1,19 +1,4 @@
-$pagination-margin: 0.5em;
 .wp-block-query-pagination {
-	// Increased specificity to override blocks default margin.
-	> .wp-block-query-pagination-next,
-	> .wp-block-query-pagination-previous,
-	> .wp-block-query-pagination-numbers {
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-
 	// This moves the next link to the right side of the container,
 	// which is important when it's the only block displayed
 	// and the block has a "space-between" justification.
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index 33df75866bce0a..5d5c9113bda084 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-title",
 	"title": "Query Title",
 	"category": "theme",
@@ -17,6 +17,9 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"showPrefix": {
 			"type": "boolean",
 			"default": true
@@ -26,6 +29,11 @@
 			"default": true
 		}
 	},
+	"example": {
+		"attributes": {
+			"type": "search"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
@@ -50,9 +58,22 @@
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true,
-				"textTransform": true
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
 			}
 		}
 	},
diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
index 7c9689f3367408..21d23081837cdf 100644
--- a/packages/block-library/src/query-title/edit.js
+++ b/packages/block-library/src/query-title/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,24 +12,34 @@ import {
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+import { useArchiveLabel } from './use-archive-label';
 
 const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign, showPrefix, showSearchTerm },
+	attributes: {
+		type,
+		level,
+		levelOptions,
+		textAlign,
+		showPrefix,
+		showSearchTerm,
+	},
 	setAttributes,
 } ) {
+	const { archiveTypeLabel, archiveNameLabel } = useArchiveLabel();
+
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-query-title__placeholder', {
+		className: clsx( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
@@ -44,11 +54,44 @@ export default function QueryTitleEdit( {
 
 	let titleElement;
 	if ( type === 'archive' ) {
+		let title;
+		if ( archiveTypeLabel ) {
+			if ( showPrefix ) {
+				if ( archiveNameLabel ) {
+					title = sprintf(
+						/* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
+						_x( '%1$s: %2$s', 'archive label' ),
+						archiveTypeLabel,
+						archiveNameLabel
+					);
+				} else {
+					title = sprintf(
+						/* translators: %s: Archive type title e.g: "Category", "Tag"... */
+						__( '%s: Name' ),
+						archiveTypeLabel
+					);
+				}
+			} else if ( archiveNameLabel ) {
+				title = archiveNameLabel;
+			} else {
+				title = sprintf(
+					/* translators: %s: Archive type title e.g: "Category", "Tag"... */
+					__( '%s name' ),
+					archiveTypeLabel
+				);
+			}
+		} else {
+			title = showPrefix
+				? __( 'Archive type: Name' )
+				: __( 'Archive title' );
+		}
+
 		titleElement = (
 			<>
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show archive type in title' ) }
 							onChange={ () =>
 								setAttributes( { showPrefix: ! showPrefix } )
@@ -57,11 +100,7 @@ export default function QueryTitleEdit( {
 						/>
 					</PanelBody>
 				</InspectorControls>
-				<TagName { ...blockProps }>
-					{ showPrefix
-						? __( 'Archive type: Name' )
-						: __( 'Archive title' ) }
-				</TagName>
+				<TagName { ...blockProps }>{ title }</TagName>
 			</>
 		);
 	}
@@ -72,6 +111,7 @@ export default function QueryTitleEdit( {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Show search term in title' ) }
 							onChange={ () =>
 								setAttributes( {
@@ -96,7 +136,8 @@ export default function QueryTitleEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					selectedLevel={ level }
+					value={ level }
+					options={ levelOptions }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}
diff --git a/packages/block-library/src/query-title/index.php b/packages/block-library/src/query-title/index.php
index d781de3826b1dc..88a945535a22d9 100644
--- a/packages/block-library/src/query-title/index.php
+++ b/packages/block-library/src/query-title/index.php
@@ -10,6 +10,8 @@
  * For now it only supports Archive title,
  * using queried object information
  *
+ * @since 5.8.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Returns the query title based on the queried object.
@@ -28,12 +30,9 @@ function render_block_core_query_title( $attributes ) {
 	if ( $is_archive ) {
 		$show_prefix = isset( $attributes['showPrefix'] ) ? $attributes['showPrefix'] : true;
 		if ( ! $show_prefix ) {
-			$filter_title = function( $title, $original_title ) {
-				return $original_title;
-			};
-			add_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			add_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 			$title = get_the_archive_title();
-			remove_filter( 'get_the_archive_title', $filter_title, 10, 2 );
+			remove_filter( 'get_the_archive_title_prefix', '__return_empty_string', 1 );
 		} else {
 			$title = get_the_archive_title();
 		}
@@ -63,6 +62,8 @@ function render_block_core_query_title( $attributes ) {
 
 /**
  * Registers the `core/query-title` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query_title() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/query-title/use-archive-label.js b/packages/block-library/src/query-title/use-archive-label.js
new file mode 100644
index 00000000000000..28b7a6f1afb87c
--- /dev/null
+++ b/packages/block-library/src/query-title/use-archive-label.js
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export function useArchiveLabel() {
+	const templateSlug = useSelect( ( select ) => {
+		// @wordpress/block-library should not depend on @wordpress/editor.
+		// Blocks can be loaded into a *non-post* block editor, so to avoid
+		// declaring @wordpress/editor as a dependency, we must access its
+		// store by string.
+		// The solution here is to split WP specific blocks from generic blocks.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const { getCurrentPostId, getCurrentPostType, getCurrentTemplateId } =
+			select( 'core/editor' );
+		const currentPostType = getCurrentPostType();
+		const templateId =
+			getCurrentTemplateId() ||
+			( currentPostType === 'wp_template' ? getCurrentPostId() : null );
+
+		return templateId
+			? select( coreStore ).getEditedEntityRecord(
+					'postType',
+					'wp_template',
+					templateId
+			  )?.slug
+			: null;
+	}, [] );
+	const taxonomyMatches = templateSlug?.match(
+		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
+	);
+	let taxonomy;
+	let term;
+	let isAuthor = false;
+	let authorSlug;
+	if ( taxonomyMatches ) {
+		// If is for a all taxonomies of a type
+		if ( taxonomyMatches[ 1 ] ) {
+			taxonomy = taxonomyMatches[ 2 ]
+				? taxonomyMatches[ 2 ]
+				: taxonomyMatches[ 1 ];
+		}
+		// If is for a all taxonomies of a type
+		else if ( taxonomyMatches[ 3 ] ) {
+			taxonomy = taxonomyMatches[ 6 ]
+				? taxonomyMatches[ 6 ]
+				: taxonomyMatches[ 4 ];
+			term = taxonomyMatches[ 7 ];
+		}
+		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
+
+		//getTaxonomy( 'category' );
+		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
+	} else {
+		const authorMatches = templateSlug?.match( /^(author)$|^author-(.+)$/ );
+		if ( authorMatches ) {
+			isAuthor = true;
+			if ( authorMatches[ 2 ] ) {
+				authorSlug = authorMatches[ 2 ];
+			}
+		}
+	}
+	return useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy, getAuthors } =
+				select( coreStore );
+			let archiveTypeLabel;
+			let archiveNameLabel;
+			if ( taxonomy ) {
+				archiveTypeLabel =
+					getTaxonomy( taxonomy )?.labels?.singular_name;
+			}
+			if ( term ) {
+				const records = getEntityRecords( 'taxonomy', taxonomy, {
+					slug: term,
+					per_page: 1,
+				} );
+				if ( records && records[ 0 ] ) {
+					archiveNameLabel = records[ 0 ].name;
+				}
+			}
+			if ( isAuthor ) {
+				archiveTypeLabel = 'Author';
+				if ( authorSlug ) {
+					const authorRecords = getAuthors( { slug: authorSlug } );
+					if ( authorRecords && authorRecords[ 0 ] ) {
+						archiveNameLabel = authorRecords[ 0 ].name;
+					}
+				}
+			}
+			return {
+				archiveTypeLabel,
+				archiveNameLabel,
+			};
+		},
+		[ authorSlug, isAuthor, taxonomy, term ]
+	);
+}
diff --git a/packages/block-library/src/query-title/variations.js b/packages/block-library/src/query-title/variations.js
index 741f74c8b82ceb..6ee004259e2ff9 100644
--- a/packages/block-library/src/query-title/variations.js
+++ b/packages/block-library/src/query-title/variations.js
@@ -38,7 +38,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.type === variationAttributes.type;
 } );
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index cd09e22ee57f75..6ccafc50c82017 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -1,10 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query",
 	"title": "Query Loop",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.",
+	"keywords": [ "posts", "list", "blog", "blogs", "custom post types" ],
 	"textdomain": "default",
 	"attributes": {
 		"queryId": {
@@ -25,40 +26,34 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"format": []
 			}
 		},
 		"tagName": {
 			"type": "string",
 			"default": "div"
 		},
-		"displayLayout": {
-			"type": "object",
-			"default": {
-				"type": "list"
-			}
-		},
 		"namespace": {
 			"type": "string"
+		},
+		"enhancedPagination": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"usesContext": [ "templateSlug" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
-		"displayLayout": "displayLayout"
+		"displayLayout": "displayLayout",
+		"enhancedPagination": "enhancedPagination"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
-		"__experimentalLayout": true
+		"layout": true,
+		"interactivity": true
 	},
 	"editorStyle": "wp-block-query-editor"
 }
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/deprecated.js b/packages/block-library/src/query/deprecated.js
index 42ac3dc4f1c49d..6ec50198973ca6 100644
--- a/packages/block-library/src/query/deprecated.js
+++ b/packages/block-library/src/query/deprecated.js
@@ -1,12 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useBlockProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
+
 const migrateToTaxQuery = ( attributes ) => {
 	const { query } = attributes;
 	const { categoryIds, tagIds, ...newQuery } = query;
@@ -25,106 +34,494 @@ 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,
-				},
-			},
-			tagName: {
-				type: 'string',
-				default: 'div',
-			},
-			displayLayout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
-			},
-		},
-		supports: {
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
-			},
-			__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 } />;
-		},
-	},
-	// 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,
-				},
+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';
+
+const migrateToConstrainedLayout = ( attributes ) => {
+	const { layout = null } = attributes;
+	if ( ! layout ) {
+		return attributes;
+	}
+	const { inherit = null, contentSize = null, ...newLayout } = layout;
+
+	if ( inherit || contentSize ) {
+		return {
+			...attributes,
+			layout: {
+				...newLayout,
+				contentSize,
+				type: 'constrained',
+			},
+		};
+	}
+
+	return attributes;
+};
+
+const findPostTemplateBlock = ( innerBlocks = [] ) => {
+	let foundBlock = null;
+	for ( const block of innerBlocks ) {
+		if ( block.name === 'core/post-template' ) {
+			foundBlock = block;
+			break;
+		} else if ( block.innerBlocks.length ) {
+			foundBlock = findPostTemplateBlock( block.innerBlocks );
+		}
+	}
+	return foundBlock;
+};
+
+const replacePostTemplateBlock = ( innerBlocks = [], replacementBlock ) => {
+	innerBlocks.forEach( ( block, index ) => {
+		if ( block.name === 'core/post-template' ) {
+			innerBlocks.splice( index, 1, replacementBlock );
+		} else if ( block.innerBlocks.length ) {
+			block.innerBlocks = replacePostTemplateBlock(
+				block.innerBlocks,
+				replacementBlock
+			);
+		}
+	} );
+	return innerBlocks;
+};
+
+const migrateDisplayLayout = ( attributes, innerBlocks ) => {
+	const { displayLayout = null, ...newAttributes } = attributes;
+	if ( ! displayLayout ) {
+		return [ attributes, innerBlocks ];
+	}
+	const postTemplateBlock = findPostTemplateBlock( innerBlocks );
+	if ( ! postTemplateBlock ) {
+		return [ attributes, innerBlocks ];
+	}
+
+	const { type, columns } = displayLayout;
+
+	// Convert custom displayLayout values to canonical layout types.
+	const updatedLayoutType = type === 'flex' ? 'grid' : 'default';
+
+	const newPostTemplateBlock = createBlock(
+		'core/post-template',
+		{
+			...postTemplateBlock.attributes,
 			layout: {
-				type: 'object',
-				default: {
-					type: 'list',
-				},
+				type: updatedLayoutType,
+				...( columns && { columnCount: columns } ),
+			},
+		},
+		postTemplateBlock.innerBlocks
+	);
+	return [
+		newAttributes,
+		replacePostTemplateBlock( innerBlocks, newPostTemplateBlock ),
+	];
+};
+
+// 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,
+			},
+		},
+		layout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+	},
+	supports: {
+		html: false,
+	},
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const { layout, ...restWithTaxQuery } = withTaxQuery;
+		const newAttributes = {
+			...restWithTaxQuery,
+			displayLayout: withTaxQuery.layout,
+		};
+		return migrateDisplayLayout( newAttributes, innerBlocks );
+	},
+	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,
+			},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		layout: true,
+	},
+	isEligible: ( { query: { categoryIds, tagIds } = {} } ) =>
+		categoryIds || tagIds,
+	migrate( attributes, innerBlocks ) {
+		const withTaxQuery = migrateToTaxQuery( attributes );
+		const [ withColorAttributes, withColorInnerBlocks ] = migrateColors(
+			withTaxQuery,
+			innerBlocks
+		);
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( withColorAttributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			withColorInnerBlocks
+		);
+	},
+	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: [],
+			},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		layout: true,
+	},
+	isEligible( attributes ) {
+		const { style, backgroundColor, gradient, textColor } = attributes;
+		return (
+			backgroundColor ||
+			gradient ||
+			textColor ||
+			style?.color ||
+			style?.elements?.link
+		);
+	},
+	migrate( attributes, innerBlocks ) {
+		const [ withColorAttributes, withColorInnerBlocks ] = migrateColors(
+			attributes,
+			innerBlocks
+		);
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( withColorAttributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			withColorInnerBlocks
+		);
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+};
+
+const v4 = {
+	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',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
 		},
-		migrate( attributes ) {
-			const withTaxQuery = migrateToTaxQuery( attributes );
-			const { layout, ...restWithTaxQuery } = withTaxQuery;
-			return {
-				...restWithTaxQuery,
-				displayLayout: withTaxQuery.layout,
-			};
+		namespace: {
+			type: 'string',
 		},
-		save() {
-			return <InnerBlocks.Content />;
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
+		layout: true,
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
 	},
-];
+	isEligible: ( { layout } ) =>
+		layout?.inherit ||
+		( layout?.contentSize && layout?.type !== 'constrained' ),
+	migrate( attributes, innerBlocks ) {
+		const withConstrainedLayoutAttributes =
+			migrateToConstrainedLayout( attributes );
+		return migrateDisplayLayout(
+			withConstrainedLayoutAttributes,
+			innerBlocks
+		);
+	},
+};
+
+const v5 = {
+	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: [],
+			},
+		},
+		tagName: {
+			type: 'string',
+			default: 'div',
+		},
+		displayLayout: {
+			type: 'object',
+			default: {
+				type: 'list',
+			},
+		},
+		namespace: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		layout: true,
+	},
+	save( { attributes: { tagName: Tag = 'div' } } ) {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+		return <Tag { ...innerBlocksProps } />;
+	},
+	isEligible: ( { displayLayout } ) => {
+		return !! displayLayout;
+	},
+	migrate: migrateDisplayLayout,
+};
+
+const deprecated = [ v5, v4, v3, v2, v1 ];
 
 export default deprecated;
diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
new file mode 100644
index 00000000000000..332cc337bb0f67
--- /dev/null
+++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useUnsupportedBlocks } from '../utils';
+
+const modalDescriptionId =
+	'wp-block-query-enhanced-pagination-modal__description';
+
+export default function EnhancedPaginationModal( {
+	clientId,
+	attributes: { enhancedPagination },
+	setAttributes,
+} ) {
+	const [ isOpen, setOpen ] = useState( false );
+	const { hasBlocksFromPlugins, hasPostContentBlock, hasUnsupportedBlocks } =
+		useUnsupportedBlocks( clientId );
+
+	useEffect( () => {
+		if (
+			enhancedPagination &&
+			hasUnsupportedBlocks &&
+			! window.__experimentalFullPageClientSideNavigation
+		) {
+			setAttributes( { enhancedPagination: false } );
+			setOpen( true );
+		}
+	}, [ enhancedPagination, hasUnsupportedBlocks, setAttributes ] );
+
+	const closeModal = () => {
+		setOpen( false );
+	};
+
+	let notice = __(
+		'If you still want to prevent full page reloads, remove that block, then disable "Reload full page" again in the Query Block settings.'
+	);
+	if ( hasBlocksFromPlugins ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when non-interactive or non-client Navigation compatible blocks from plugins are present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	} else if ( hasPostContentBlock ) {
+		notice =
+			__(
+				'Currently, avoiding full page reloads is not possible when a Content block is present inside the Query block.'
+			) +
+			' ' +
+			notice;
+	}
+
+	return (
+		isOpen && (
+			<Modal
+				title={ __( 'Query block: Reload full page enabled' ) }
+				className="wp-block-query__enhanced-pagination-modal"
+				aria={ {
+					describedby: modalDescriptionId,
+				} }
+				role="alertdialog"
+				focusOnMount="firstElement"
+				isDismissible={ false }
+				onRequestClose={ closeModal }
+			>
+				<VStack alignment="right" spacing={ 5 }>
+					<span id={ modalDescriptionId }>{ notice }</span>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ closeModal }
+					>
+						{ __( 'OK' ) }
+					</Button>
+				</VStack>
+			</Modal>
+		)
+	);
+}
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index 07c841e607c216..60fc2ebd6170b3 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -1,25 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	BlockContextProvider,
-	store as blockEditorStore,
-	__experimentalBlockPatternSetup as BlockPatternSetup,
-} from '@wordpress/block-editor';
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import QueryContent from './query-content';
 import QueryPlaceholder from './query-placeholder';
-import {
-	useBlockNameForPatterns,
-	getTransformedBlocksFromPattern,
-} from '../utils';
+import { PatternSelectionModal } from './pattern-selection';
 
 const QueryEdit = ( props ) => {
 	const { clientId, attributes } = props;
@@ -52,50 +43,4 @@ const QueryEdit = ( props ) => {
 	);
 };
 
-function PatternSelectionModal( {
-	clientId,
-	attributes,
-	setIsPatternSelectionModalOpen,
-} ) {
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( blocks ) => {
-		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
-			blocks,
-			attributes
-		);
-		replaceBlock( clientId, newBlocks );
-		if ( queryClientIds[ 0 ] ) {
-			selectBlock( queryClientIds[ 0 ] );
-		}
-	};
-	// When we preview Query Loop blocks we should prefer the current
-	// block's postType, which is passed through block context.
-	const blockPreviewContext = useMemo(
-		() => ( {
-			previewPostType: attributes.query.postType,
-		} ),
-		[ attributes.query.postType ]
-	);
-	const blockNameForPatterns = useBlockNameForPatterns(
-		clientId,
-		attributes
-	);
-	return (
-		<Modal
-			className="block-editor-query-pattern__selection-modal"
-			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
-			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
-		>
-			<BlockContextProvider value={ blockPreviewContext }>
-				<BlockPatternSetup
-					blockName={ blockNameForPatterns }
-					clientId={ clientId }
-					onBlockPatternSelect={ onBlockPatternSelect }
-				/>
-			</BlockContextProvider>
-		</Modal>
-	);
-}
-
 export default QueryEdit;
diff --git a/packages/block-library/src/query/edit/inspector-controls/author-control.js b/packages/block-library/src/query/edit/inspector-controls/author-control.js
index 68f4f32093c9e1..b27322837e4b9e 100644
--- a/packages/block-library/src/query/edit/inspector-controls/author-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/author-control.js
@@ -52,14 +52,18 @@ function AuthorControl( { value, onChange } ) {
 
 	const getIdByValue = ( entitiesMappedByName, authorValue ) => {
 		const id = authorValue?.id || entitiesMappedByName[ authorValue ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onAuthorChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, author ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( authorsInfo.mapByName, author );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);
@@ -72,6 +76,8 @@ function AuthorControl( { value, onChange } ) {
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
 			__experimentalShowHowTo={ false }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		/>
 	);
 }
diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
new file mode 100644
index 00000000000000..4d0b1a9fd9da37
--- /dev/null
+++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useUnsupportedBlocks } from '../../utils';
+
+export default function EnhancedPaginationControl( {
+	enhancedPagination,
+	setAttributes,
+	clientId,
+} ) {
+	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+	const fullPageClientSideNavigation =
+		window.__experimentalFullPageClientSideNavigation;
+
+	let help = __(
+		'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
+	);
+	if ( fullPageClientSideNavigation ) {
+		help = __(
+			'Experimental full-page client-side navigation setting enabled.'
+		);
+	} else if ( hasUnsupportedBlocks ) {
+		help = __(
+			'Enhancement disabled because there are non-compatible blocks inside the Query block.'
+		);
+	}
+
+	return (
+		<>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Reload full page' ) }
+				help={ help }
+				checked={
+					! enhancedPagination && ! fullPageClientSideNavigation
+				}
+				disabled={
+					hasUnsupportedBlocks || fullPageClientSideNavigation
+				}
+				onChange={ ( value ) => {
+					setAttributes( {
+						enhancedPagination: ! value,
+					} );
+				} }
+			/>
+		</>
+	);
+}
diff --git a/packages/block-library/src/query/edit/inspector-controls/format-controls.js b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
new file mode 100644
index 00000000000000..15c95f3bbba2e2
--- /dev/null
+++ b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+// All WP post formats, sorted alphabetically by translated name.
+// Value is the post format slug. Label is the name.
+const POST_FORMATS = [
+	{ value: 'aside', label: __( 'Aside' ) },
+	{ value: 'audio', label: __( 'Audio' ) },
+	{ value: 'chat', label: __( 'Chat' ) },
+	{ value: 'gallery', label: __( 'Gallery' ) },
+	{ value: 'image', label: __( 'Image' ) },
+	{ value: 'link', label: __( 'Link' ) },
+	{ value: 'quote', label: __( 'Quote' ) },
+	{ value: 'standard', label: __( 'Standard' ) },
+	{ value: 'status', label: __( 'Status' ) },
+	{ value: 'video', label: __( 'Video' ) },
+].sort( ( a, b ) => {
+	const normalizedA = a.label.toUpperCase();
+	const normalizedB = b.label.toUpperCase();
+
+	if ( normalizedA < normalizedB ) {
+		return -1;
+	}
+	if ( normalizedA > normalizedB ) {
+		return 1;
+	}
+	return 0;
+} );
+
+// A helper function to convert translatable post format names into their static values.
+function formatNamesToValues( names, formats ) {
+	return names
+		.map( ( name ) => {
+			return formats.find(
+				( item ) =>
+					item.label.toLocaleLowerCase() === name.toLocaleLowerCase()
+			)?.value;
+		} )
+		.filter( Boolean );
+}
+
+export default function FormatControls( { onChange, query: { format } } ) {
+	// 'format' is expected to be an array. If it is not an array, for example
+	// if a user has manually entered an invalid value in the block markup,
+	// convert it to an array to prevent JavaScript errors.
+	const normalizedFormats = Array.isArray( format ) ? format : [ format ];
+
+	const { supportedFormats } = useSelect( ( select ) => {
+		const themeSupports = select( coreStore ).getThemeSupports();
+		return {
+			supportedFormats: themeSupports.formats,
+		};
+	}, [] );
+
+	const formats = POST_FORMATS.filter( ( item ) =>
+		supportedFormats.includes( item.value )
+	);
+
+	const values = normalizedFormats
+		.map(
+			( name ) => formats.find( ( item ) => item.value === name )?.label
+		)
+		.filter( Boolean );
+
+	const suggestions = formats
+		.filter( ( item ) => ! normalizedFormats.includes( item.value ) )
+		.map( ( item ) => item.label );
+
+	return (
+		<FormTokenField
+			label={ __( 'Formats' ) }
+			value={ values }
+			suggestions={ suggestions }
+			onChange={ ( newValues ) => {
+				onChange( {
+					format: formatNamesToValues( newValues, formats ),
+				} );
+			} }
+			__experimentalShowHowTo={ false }
+			__experimentalExpandOnFocus
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
+}
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 ffe19060682d3f..0ae4b052b57873 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -6,13 +6,15 @@ import {
 	TextControl,
 	SelectControl,
 	RangeControl,
-	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
 import { useEffect, useState, useCallback } from '@wordpress/element';
 
@@ -23,7 +25,11 @@ import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
+import FormatControls from './format-controls';
 import StickyControl from './sticky-control';
+import PerPageControl from './per-page-control';
+import OffsetControl from './offset-controls';
+import PagesControl from './pages-control';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
@@ -31,31 +37,34 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
+import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
-export default function QueryInspectorControls( {
-	attributes,
-	setQuery,
-	setDisplayLayout,
-} ) {
+export default function QueryInspectorControls( props ) {
+	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
 		orderBy,
 		author: authorIds,
+		pages,
 		postType,
+		perPage,
+		offset,
 		sticky,
 		inherit,
 		taxQuery,
 		parents,
+		format,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
-	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
-	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const showSticky = postType === 'post';
+	const {
+		postTypesTaxonomiesMap,
+		postTypesSelectOptions,
+		postTypeFormatSupportMap,
+	} = usePostTypes();
 	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
-	useEffect( () => {
-		setShowSticky( postType === 'post' );
-	}, [ postType ] );
 	const onPostTypeChange = ( newValue ) => {
 		const updateQuery = { postType: newValue };
 		// We need to dynamically update the `taxQuery` property,
@@ -79,6 +88,14 @@ export default function QueryInspectorControls( {
 		}
 		// We need to reset `parents` because they are tied to each post type.
 		updateQuery.parents = [];
+		// Post types can register post format support with `add_post_type_support`.
+		// But we need to reset the `format` property when switching to post types
+		// that do not support post formats.
+		const hasFormatSupport = postTypeFormatSupportMap[ newValue ];
+		if ( ! hasFormatSupport ) {
+			updateQuery.format = [];
+		}
+
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -94,10 +111,16 @@ export default function QueryInspectorControls( {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
-	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+
+	const showInheritControl =
+		! isSingular && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const showColumnsControl = displayLayout?.type === 'flex';
+	const postTypeControlLabel = __( 'Post type' );
+	const postTypeControlHelp = __(
+		'Select the type of content to display: posts, pages, or custom post types.'
+	);
+	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
@@ -110,151 +133,291 @@ 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 postTypeHasFormatSupport = postTypeFormatSupportMap[ postType ];
+	const showFormatControl = useSelect(
+		( select ) => {
+			// Check if the post type supports post formats and if the control is allowed.
+			if (
+				! postTypeHasFormatSupport ||
+				! isControlAllowed( allowedControls, 'format' )
+			) {
+				return false;
+			}
+
+			const themeSupports = select( coreStore ).getThemeSupports();
+
+			// If there are no supported formats, getThemeSupports still includes the default 'standard' format,
+			// and in this case the control should not be shown since the user has no other formats to choose from.
+			return (
+				themeSupports.formats &&
+				themeSupports.formats.length > 0 &&
+				themeSupports.formats.some( ( type ) => type !== 'standard' )
+			);
+		},
+		[ allowedControls, postTypeHasFormatSupport ]
+	);
+
+	const showFiltersPanel =
+		showTaxControl ||
+		showAuthorControl ||
+		showSearchControl ||
+		showParentControl ||
+		showFormatControl;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const showPostCountControl = isControlAllowed(
+		allowedControls,
+		'postCount'
+	);
+	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
+	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
+
+	const showDisplayPanel =
+		showPostCountControl || showOffSetControl || showPagesControl;
+
 	return (
 		<>
 			{ showSettingsPanel && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						{ showInheritControl && (
-							<ToggleControl
-								label={ __( 'Inherit query from template' ) }
-								help={ __(
-									'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-								) }
-								checked={ !! inherit }
-								onChange={ ( value ) =>
-									setQuery( { inherit: !! value } )
-								}
+				<PanelBody title={ __( 'Settings' ) }>
+					{ showInheritControl && (
+						<ToggleGroupControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Query type' ) }
+							isBlock
+							onChange={ ( value ) => {
+								setQuery( { inherit: value === 'default' } );
+							} }
+							help={
+								inherit
+									? __(
+											'Display a list of posts or custom post types based on the current template.'
+									  )
+									: __(
+											'Display a list of posts or custom post types based on specific criteria.'
+									  )
+							}
+							value={ !! inherit ? 'default' : 'custom' }
+						>
+							<ToggleGroupControlOption
+								value="default"
+								label={ __( 'Default' ) }
 							/>
-						) }
-						{ showPostTypeControl && (
+							<ToggleGroupControlOption
+								value="custom"
+								label={ __( 'Custom' ) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ showPostTypeControl &&
+						( postTypesSelectOptions.length > 2 ? (
 							<SelectControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								options={ postTypesSelectOptions }
 								value={ postType }
-								label={ __( 'Post type' ) }
+								label={ postTypeControlLabel }
 								onChange={ onPostTypeChange }
-								help={ __(
-									'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
-								) }
-							/>
-						) }
-						{ showColumnsControl && (
-							<>
-								<RangeControl
-									label={ __( 'Columns' ) }
-									value={ displayLayout.columns }
-									onChange={ ( value ) =>
-										setDisplayLayout( { columns: value } )
-									}
-									min={ 2 }
-									max={ Math.max( 6, displayLayout.columns ) }
-								/>
-								{ displayLayout.columns > 6 && (
-									<Notice
-										status="warning"
-										isDismissible={ false }
-									>
-										{ __(
-											'This column count exceeds the recommended amount and may cause visual breakage.'
-										) }
-									</Notice>
-								) }
-							</>
-						) }
-						{ showOrderControl && (
-							<OrderControl
-								{ ...{ order, orderBy } }
-								onChange={ setQuery }
+								help={ postTypeControlHelp }
 							/>
-						) }
-						{ showStickyControl && (
-							<StickyControl
-								value={ sticky }
+						) : (
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								isBlock
+								value={ postType }
+								label={ postTypeControlLabel }
+								onChange={ onPostTypeChange }
+								help={ postTypeControlHelp }
+							>
+								{ postTypesSelectOptions.map( ( option ) => (
+									<ToggleGroupControlOption
+										key={ option.value }
+										value={ option.value }
+										label={ option.label }
+									/>
+								) ) }
+							</ToggleGroupControl>
+						) ) }
+
+					{ showColumnsControl && (
+						<>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Columns' ) }
+								value={ displayLayout.columns }
 								onChange={ ( value ) =>
-									setQuery( { sticky: value } )
+									setDisplayLayout( {
+										columns: value,
+									} )
 								}
+								min={ 2 }
+								max={ Math.max( 6, displayLayout.columns ) }
 							/>
-						) }
-					</PanelBody>
-				</InspectorControls>
-			) }
-			{ ! inherit && (
-				<InspectorControls>
-					<ToolsPanel
-						className="block-library-query-toolspanel__filters"
-						label={ __( 'Filters' ) }
-						resetAll={ () => {
-							setQuery( {
-								author: '',
-								parents: [],
-								search: '',
-								taxQuery: null,
-							} );
-							setQuerySearch( '' );
-						} }
-					>
-						{ !! taxonomies?.length &&
-							isControlAllowed( allowedControls, 'taxQuery' ) && (
-								<ToolsPanelItem
-									label={ __( 'Taxonomies' ) }
-									hasValue={ () =>
-										Object.values( taxQuery || {} ).some(
-											( terms ) => !! terms.length
-										)
-									}
-									onDeselect={ () =>
-										setQuery( { taxQuery: null } )
-									}
+							{ displayLayout.columns > 6 && (
+								<Notice
+									status="warning"
+									isDismissible={ false }
 								>
-									<TaxonomyControls
-										onChange={ setQuery }
-										query={ query }
-									/>
-								</ToolsPanelItem>
+									{ __(
+										'This column count exceeds the recommended amount and may cause visual breakage.'
+									) }
+								</Notice>
 							) }
-						{ isControlAllowed( allowedControls, 'author' ) && (
-							<ToolsPanelItem
-								hasValue={ () => !! authorIds }
-								label={ __( 'Authors' ) }
-								onDeselect={ () => setQuery( { author: '' } ) }
-							>
-								<AuthorControl
-									value={ authorIds }
-									onChange={ setQuery }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ isControlAllowed( allowedControls, 'search' ) && (
-							<ToolsPanelItem
-								hasValue={ () => !! querySearch }
+						</>
+					) }
+					{ showOrderControl && (
+						<OrderControl
+							{ ...{ order, orderBy } }
+							onChange={ setQuery }
+						/>
+					) }
+					{ showStickyControl && (
+						<StickyControl
+							value={ sticky }
+							onChange={ ( value ) =>
+								setQuery( { sticky: value } )
+							}
+						/>
+					) }
+				</PanelBody>
+			) }
+			{ ! inherit && showDisplayPanel && (
+				<ToolsPanel
+					className="block-library-query-toolspanel__display"
+					label={ __( 'Display' ) }
+					resetAll={ () => {
+						setQuery( {
+							offset: 0,
+							pages: 0,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Items per page' ) }
+						hasValue={ () => perPage > 0 }
+					>
+						<PerPageControl
+							perPage={ perPage }
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Offset' ) }
+						hasValue={ () => offset > 0 }
+						onDeselect={ () => setQuery( { offset: 0 } ) }
+					>
+						<OffsetControl
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Max pages to show' ) }
+						hasValue={ () => pages > 0 }
+						onDeselect={ () => setQuery( { pages: 0 } ) }
+					>
+						<PagesControl pages={ pages } onChange={ setQuery } />
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
+			{ ! inherit && showFiltersPanel && (
+				<ToolsPanel
+					className="block-library-query-toolspanel__filters" // unused but kept for backward compatibility
+					label={ __( 'Filters' ) }
+					resetAll={ () => {
+						setQuery( {
+							author: '',
+							parents: [],
+							search: '',
+							taxQuery: null,
+							format: [],
+						} );
+						setQuerySearch( '' );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ 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' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showSearchControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
-								onDeselect={ () => setQuerySearch( '' ) }
-							>
-								<TextControl
-									label={ __( 'Keyword' ) }
-									value={ querySearch }
-									onChange={ setQuerySearch }
-								/>
-							</ToolsPanelItem>
-						) }
-						{ isPostTypeHierarchical &&
-							isControlAllowed( allowedControls, 'parents' ) && (
-								<ToolsPanelItem
-									hasValue={ () => !! parents?.length }
-									label={ __( 'Parents' ) }
-									onDeselect={ () =>
-										setQuery( { parents: [] } )
-									}
-								>
-									<ParentControl
-										parents={ parents }
-										postType={ postType }
-										onChange={ setQuery }
-									/>
-								</ToolsPanelItem>
-							) }
-					</ToolsPanel>
-				</InspectorControls>
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showParentControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! parents?.length }
+							label={ __( 'Parents' ) }
+							onDeselect={ () => setQuery( { parents: [] } ) }
+						>
+							<ParentControl
+								parents={ parents }
+								postType={ postType }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+					) }
+					{ showFormatControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! format?.length }
+							label={ __( 'Formats' ) }
+							onDeselect={ () => setQuery( { format: [] } ) }
+						>
+							<FormatControls
+								onChange={ setQuery }
+								query={ query }
+							/>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			) }
 		</>
 	);
diff --git a/packages/block-library/src/query/edit/inspector-controls/offset-controls.js b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js
new file mode 100644
index 00000000000000..ff755c95f8b0a9
--- /dev/null
+++ b/packages/block-library/src/query/edit/inspector-controls/offset-controls.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_OFFSET = 0;
+const MAX_OFFSET = 100;
+
+export const OffsetControl = ( { offset = 0, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Offset' ) }
+			value={ offset }
+			min={ MIN_OFFSET }
+			onChange={ ( newOffset ) => {
+				if (
+					isNaN( newOffset ) ||
+					newOffset < MIN_OFFSET ||
+					newOffset > MAX_OFFSET
+				) {
+					return;
+				}
+				onChange( { offset: newOffset } );
+			} }
+		/>
+	);
+};
+
+export default OffsetControl;
diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js
index 143e4c5f8dd8b0..23802f844359d7 100644
--- a/packages/block-library/src/query/edit/inspector-controls/order-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js
@@ -14,12 +14,12 @@ const orderOptions = [
 		value: 'date/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in ascending order */
+		/* translators: Label for ordering posts by title in ascending order. */
 		label: __( 'A → Z' ),
 		value: 'title/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in descending order */
+		/* translators: Label for ordering posts by title in descending order. */
 		label: __( 'Z → A' ),
 		value: 'title/desc',
 	},
@@ -27,6 +27,8 @@ const orderOptions = [
 function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }
diff --git a/packages/block-library/src/query/edit/inspector-controls/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
new file mode 100644
index 00000000000000..06c6e32b66ad2a
--- /dev/null
+++ b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const PagesControl = ( { pages, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Max pages to show' ) }
+			value={ pages }
+			min={ 0 }
+			onChange={ ( newPages ) => {
+				if ( isNaN( newPages ) || newPages < 0 ) {
+					return;
+				}
+				onChange( { pages: newPages } );
+			} }
+			help={ __(
+				'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+			) }
+		/>
+	);
+};
+
+export default PagesControl;
diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
index 830600e47481dd..5fb9ffaad20e88 100644
--- a/packages/block-library/src/query/edit/inspector-controls/parent-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -55,7 +55,9 @@ function ParentControl( { parents, postType, onChange } ) {
 	);
 	const currentParents = useSelect(
 		( select ) => {
-			if ( ! parents?.length ) return EMPTY_ARRAY;
+			if ( ! parents?.length ) {
+				return EMPTY_ARRAY;
+			}
 			const { getEntityRecords } = select( coreStore );
 			return getEntityRecords( 'postType', postType, {
 				...BASE_QUERY,
@@ -71,7 +73,9 @@ function ParentControl( { parents, postType, onChange } ) {
 		if ( ! parents?.length ) {
 			setValue( EMPTY_ARRAY );
 		}
-		if ( ! currentParents?.length ) return;
+		if ( ! currentParents?.length ) {
+			return;
+		}
 		const currentParentsInfo = getEntitiesInfo(
 			mapToIHasNameAndId( currentParents, 'title.rendered' )
 		);
@@ -91,27 +95,35 @@ function ParentControl( { parents, postType, onChange } ) {
 	}, [ parents, currentParents ] );
 
 	const entitiesInfo = useMemo( () => {
-		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		if ( ! searchResults?.length ) {
+			return EMPTY_ARRAY;
+		}
 		return getEntitiesInfo(
 			mapToIHasNameAndId( searchResults, 'title.rendered' )
 		);
 	}, [ searchResults ] );
 	// Update suggestions only when the query has resolved.
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		setSuggestions( entitiesInfo.names );
 	}, [ entitiesInfo.names, searchHasResolved ] );
 
 	const getIdByValue = ( entitiesMappedByName, entity ) => {
 		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onParentChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, entity ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( entitiesInfo.mapByName, entity );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);
@@ -120,12 +132,14 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
 			__experimentalShowHowTo={ false }
+			__nextHasNoMarginBottom
 		/>
 	);
 }
diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
new file mode 100644
index 00000000000000..933bb0851e6257
--- /dev/null
+++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_POSTS_PER_PAGE = 1;
+const MAX_POSTS_PER_PAGE = 100;
+
+const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
+	return (
+		<RangeControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Items per page' ) }
+			min={ MIN_POSTS_PER_PAGE }
+			max={ MAX_POSTS_PER_PAGE }
+			onChange={ ( newPerPage ) => {
+				if (
+					isNaN( newPerPage ) ||
+					newPerPage < MIN_POSTS_PER_PAGE ||
+					newPerPage > MAX_POSTS_PER_PAGE
+				) {
+					return;
+				}
+				onChange( { perPage: newPerPage, offset } );
+			} }
+			value={ parseInt( perPage, 10 ) }
+		/>
+	);
+};
+
+export default PerPageControl;
diff --git a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
index 8c0c95e19d56db..ee7ee31ba977a9 100644
--- a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
@@ -13,12 +13,14 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }
 			onChange={ onChange }
 			help={ __(
-				'Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+				'Sticky posts always appear first, regardless of their publish date.'
 			) }
 		/>
 	);
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..447b667cdacb56 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
@@ -1,21 +1,33 @@
 /**
  * WordPress dependencies
  */
-import { FormTokenField } from '@wordpress/components';
+import {
+	FormTokenField,
+	__experimentalVStack as VStack,
+} 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';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * 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 ) => {
 	// First we check for exact match by `term.id` or case sensitive `term.name` match.
 	const termId =
-		termValue?.id || terms.find( ( term ) => term.name === termValue )?.id;
+		termValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;
 	if ( termId ) {
 		return termId;
 	}
@@ -30,25 +42,11 @@ const getTermIdByTermValue = ( terms, termValue ) => {
 	 * In this edge case we always apply the first match from the terms list.
 	 */
 	const termValueLower = termValue.toLocaleLowerCase();
-	return terms.find(
+	return terms?.find(
 		( term ) => term.name.toLocaleLowerCase() === termValueLower
 	)?.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;
 
@@ -58,9 +56,9 @@ export function TaxonomyControls( { onChange, query } ) {
 	}
 
 	return (
-		<>
+		<VStack spacing={ 4 }>
 			{ taxonomies.map( ( taxonomy ) => {
-				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds ) =>
 					onChange( {
 						taxQuery: {
@@ -73,48 +71,127 @@ export function TaxonomyControls( { onChange, query } ) {
 					<TaxonomyItem
 						key={ taxonomy.slug }
 						taxonomy={ taxonomy }
-						value={ value }
+						termIds={ termIds }
 						onChange={ handleChange }
 					/>
 				);
 			} ) }
-		</>
+		</VStack>
 	);
 }
-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 }
+				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 			/>
 		</div>
 	);
diff --git a/packages/block-library/src/query/edit/pattern-selection.js b/packages/block-library/src/query/edit/pattern-selection.js
new file mode 100644
index 00000000000000..0c5d95d15206f2
--- /dev/null
+++ b/packages/block-library/src/query/edit/pattern-selection.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { Modal, SearchControl } from '@wordpress/components';
+import {
+	BlockContextProvider,
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useBlockNameForPatterns,
+	getTransformedBlocksFromPattern,
+	usePatterns,
+} from '../utils';
+import { searchPatterns } from '../../utils/search-patterns';
+
+export function PatternSelectionModal( {
+	clientId,
+	attributes,
+	setIsPatternSelectionModalOpen,
+} ) {
+	return (
+		<Modal
+			overlayClassName="block-library-query-pattern__selection-modal"
+			title={ __( 'Choose a pattern' ) }
+			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+			isFullScreen
+		>
+			<PatternSelection clientId={ clientId } attributes={ attributes } />
+		</Modal>
+	);
+}
+
+export function useBlockPatterns( clientId, attributes ) {
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
+	return usePatterns( clientId, blockNameForPatterns );
+}
+
+export default function PatternSelection( {
+	clientId,
+	attributes,
+	showTitlesAsTooltip = false,
+	showSearch = true,
+} ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+	const blockPatterns = useBlockPatterns( clientId, attributes );
+	/*
+	 * When we preview Query Loop blocks we should prefer the current
+	 * block's postType, which is passed through block context.
+	 */
+	const blockPreviewContext = useMemo(
+		() => ( {
+			previewPostType: attributes.query.postType,
+		} ),
+		[ attributes.query.postType ]
+	);
+	const filteredBlockPatterns = useMemo( () => {
+		return searchPatterns( blockPatterns, searchValue );
+	}, [ blockPatterns, searchValue ] );
+
+	const onBlockPatternSelect = ( pattern, blocks ) => {
+		const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
+			blocks,
+			attributes
+		);
+		replaceBlock( clientId, newBlocks );
+		if ( queryClientIds[ 0 ] ) {
+			selectBlock( queryClientIds[ 0 ] );
+		}
+	};
+	return (
+		<div className="block-library-query-pattern__selection-content">
+			{ showSearch && (
+				<div className="block-library-query-pattern__selection-search">
+					<SearchControl
+						__nextHasNoMarginBottom
+						onChange={ setSearchValue }
+						value={ searchValue }
+						label={ __( 'Search' ) }
+						placeholder={ __( 'Search' ) }
+					/>
+				</div>
+			) }
+			<BlockContextProvider value={ blockPreviewContext }>
+				<BlockPatternsList
+					blockPatterns={ filteredBlockPatterns }
+					onClickPattern={ onBlockPatternSelect }
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+				/>
+			</BlockContextProvider>
+		</div>
+	);
+}
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index bdb4dc3e734337..a608f20bbeb001 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -3,61 +3,76 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
-	useSetting,
 	store as blockEditorStore,
 	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import QueryToolbar from './query-toolbar';
+import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
 import QueryInspectorControls from './inspector-controls';
-import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
+import EnhancedPaginationModal from './enhanced-pagination-modal';
+import { getQueryContextFromTemplate } from '../utils';
+import QueryToolbar from './query-toolbar';
+
+const DEFAULTS_POSTS_PER_PAGE = 3;
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export default function QueryContent( {
 	attributes,
 	setAttributes,
-	openPatternSelectionModal,
-	name,
 	clientId,
+	context,
+	name,
 } ) {
 	const {
 		queryId,
 		query,
 		displayLayout,
+		enhancedPagination,
 		tagName: TagName = 'div',
-		layout = {},
+		query: { inherit } = {},
 	} = attributes;
+	const { templateSlug } = context;
+	const { isSingular } = getQueryContextFromTemplate( templateSlug );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
-	const { themeSupportsLayout } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return { themeSupportsLayout: getSettings()?.supportsLayout };
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
-		__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
 	} );
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
+		const { getEntityRecord, getEntityRecordEdits, canUser } =
+			select( coreStore );
+		const settingPerPage = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? +getEntityRecord( 'root', 'site' )?.posts_per_page
+			: +getSettings().postsPerPage;
+
+		// Gets changes made via the template area posts per page setting. These won't be saved
+		// until the page is saved, but we should reflect this setting within the query loops
+		// that inherit it.
+		const editedSettingPerPage = +getEntityRecordEdits( 'root', 'site' )
+			?.posts_per_page;
+
 		return {
 			postsPerPage:
-				+getSettings().postsPerPage || DEFAULTS_POSTS_PER_PAGE,
+				editedSettingPerPage ||
+				settingPerPage ||
+				DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
 	// There are some effects running where some initialization logic is
@@ -69,16 +84,37 @@ export default function QueryContent( {
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
+	const updateQuery = useCallback(
+		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
+		[ query, setAttributes ]
+	);
 	useEffect( () => {
 		const newQuery = {};
-		if ( ! query.perPage && postsPerPage ) {
+		// When we inherit from global query always need to set the `perPage`
+		// based on the reading settings.
+		if ( inherit && query.perPage !== postsPerPage ) {
+			newQuery.perPage = postsPerPage;
+		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
+		// We need to reset the `inherit` value if in a singular template, as queries
+		// are not inherited when in singular content (e.g. post, page, 404, blank).
+		if ( isSingular && query.inherit ) {
+			newQuery.inherit = false;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage ] );
+	}, [
+		query.perPage,
+		query.inherit,
+		postsPerPage,
+		inherit,
+		isSingular,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateQuery,
+	] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -86,32 +122,53 @@ export default function QueryContent( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { queryId: instanceId } );
 		}
-	}, [ queryId, instanceId ] );
-	const updateQuery = ( newQuery ) =>
-		setAttributes( { query: { ...query, ...newQuery } } );
+	}, [
+		queryId,
+		instanceId,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 	const updateDisplayLayout = ( newDisplayLayout ) =>
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
+	const htmlElementMessages = {
+		main: __(
+			'The <main> element should be used for the primary content of your document only.'
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+	};
+
 	return (
 		<>
-			<QueryInspectorControls
+			<EnhancedPaginationModal
 				attributes={ attributes }
-				setQuery={ updateQuery }
-				setDisplayLayout={ updateDisplayLayout }
+				setAttributes={ setAttributes }
+				clientId={ clientId }
 			/>
-			<BlockControls>
-				<QueryToolbar
+			<InspectorControls>
+				<QueryInspectorControls
 					name={ name }
-					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
-					openPatternSelectionModal={ openPatternSelectionModal }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+					isSingular={ isSingular }
 				/>
+			</InspectorControls>
+			<BlockControls>
+				<QueryToolbar attributes={ attributes } clientId={ clientId } />
 			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<SelectControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
@@ -123,6 +180,12 @@ export default function QueryContent( {
 					onChange={ ( value ) =>
 						setAttributes( { tagName: value } )
 					}
+					help={ htmlElementMessages[ TagName ] }
+				/>
+				<EnhancedPaginationControl
+					enhancedPagination={ enhancedPagination }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
 				/>
 			</InspectorControls>
 			<TagName { ...innerBlocksProps } />
diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js
index 8e1debe5341a61..c3a01a0447f55e 100644
--- a/packages/block-library/src/query/edit/query-placeholder.js
+++ b/packages/block-library/src/query/edit/query-placeholder.js
@@ -11,55 +11,49 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useScopedBlockVariations } from '../utils';
+import { useBlockPatterns } from './pattern-selection';
+
 export default function QueryPlaceholder( {
 	attributes,
 	clientId,
 	name,
 	openPatternSelectionModal,
-	setAttributes,
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
-
-	const { blockType, allVariations, hasPatterns } = useSelect(
+	const { blockType, activeBlockVariation } = useSelect(
 		( select ) => {
-			const { getBlockVariations, getBlockType } = select( blocksStore );
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-
+			const { getActiveBlockVariation, getBlockType } =
+				select( blocksStore );
 			return {
 				blockType: getBlockType( name ),
-				allVariations: getBlockVariations( name ),
-				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
+				activeBlockVariation: getActiveBlockVariation(
 					name,
-					rootClientId
-				).length,
+					attributes
+				),
 			};
 		},
-		[ name, clientId ]
+		[ name, attributes ]
 	);
-
-	const matchingVariation = getMatchingVariation( attributes, allVariations );
+	const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
 	const icon =
-		matchingVariation?.icon?.src ||
-		matchingVariation?.icon ||
+		activeBlockVariation?.icon?.src ||
+		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
-	const label = matchingVariation?.title || blockType?.title;
+	const label = activeBlockVariation?.title || blockType?.title;
 	if ( isStartingBlank ) {
 		return (
 			<QueryVariationPicker
 				clientId={ clientId }
-				name={ name }
 				attributes={ attributes }
-				setAttributes={ setAttributes }
 				icon={ icon }
 				label={ label }
 			/>
@@ -76,6 +70,7 @@ export default function QueryPlaceholder( {
 			>
 				{ !! hasPatterns && (
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ openPatternSelectionModal }
 					>
@@ -84,6 +79,7 @@ export default function QueryPlaceholder( {
 				) }
 
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setIsStartingBlank( true );
@@ -96,30 +92,8 @@ export default function QueryPlaceholder( {
 	);
 }
 
-function QueryVariationPicker( {
-	clientId,
-	name,
-	attributes,
-	setAttributes,
-	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' ),
-			};
-		},
-		[ name ]
-	);
+function QueryVariationPicker( { clientId, attributes, icon, label } ) {
+	const scopeVariations = useScopedBlockVariations( attributes );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
 	return (
@@ -128,23 +102,12 @@ function QueryVariationPicker( {
 				icon={ icon }
 				label={ label }
 				variations={ scopeVariations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
-					if ( nextVariation.attributes ) {
-						setAttributes( {
-							...nextVariation.attributes,
-							query: {
-								...nextVariation.attributes.query,
-								postType:
-									attributes.query.postType ||
-									nextVariation.attributes.query.postType,
-							},
-						} );
-					}
-					if ( nextVariation.innerBlocks ) {
+				onSelect={ ( variation ) => {
+					if ( variation.innerBlocks ) {
 						replaceInnerBlocks(
 							clientId,
 							createBlocksFromInnerBlocksTemplate(
-								nextVariation.innerBlocks
+								variation.innerBlocks
 							),
 							false
 						);
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 84deb8d0ed91d0..25e087ebe1559c 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -3,158 +3,49 @@
  */
 import {
 	ToolbarGroup,
-	Dropdown,
 	ToolbarButton,
-	BaseControl,
-	__experimentalNumberControl as NumberControl,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { settings, list, grid } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
-export default function QueryToolbar( {
-	attributes: { query, displayLayout },
-	setQuery,
-	setDisplayLayout,
-	openPatternSelectionModal,
-	name,
-	clientId,
-} ) {
-	const hasPatterns = useSelect(
-		( select ) => {
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId( clientId );
-			return !! __experimentalGetPatternsByBlockTypes(
-				name,
-				rootClientId
-			).length;
-		},
-		[ name, clientId ]
-	);
-	const maxPageInputId = useInstanceId(
-		QueryToolbar,
-		'blocks-query-pagination-max-page-input'
-	);
-	const displayLayoutControls = [
-		{
-			icon: list,
-			title: __( 'List view' ),
-			onClick: () => setDisplayLayout( { type: 'list' } ),
-			isActive: displayLayout?.type === 'list',
-		},
-		{
-			icon: grid,
-			title: __( 'Grid view' ),
-			onClick: () =>
-				setDisplayLayout( {
-					type: 'flex',
-					columns: displayLayout?.columns || 3,
-				} ),
-			isActive: displayLayout?.type === 'flex',
-		},
-	];
+/**
+ * Internal dependencies
+ */
+import PatternSelection, { useBlockPatterns } from './pattern-selection';
+
+export default function QueryToolbar( { clientId, attributes } ) {
+	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
+	if ( ! hasPatterns ) {
+		return null;
+	}
+
 	return (
-		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Items per Page' ) }
-										labelPosition="edge"
-										min={ 1 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 1 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( {
-												perPage: value,
-											} );
-										} }
-										step="1"
-										value={ query.perPage }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Offset' ) }
-										labelPosition="edge"
-										min={ 0 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 0 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( { offset: value } );
-										} }
-										step="1"
-										value={ query.offset }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl
-									id={ maxPageInputId }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								>
-									<NumberControl
-										id={ maxPageInputId }
-										__unstableInputWidth="60px"
-										label={ __( 'Max page to show' ) }
-										labelPosition="edge"
-										min={ 0 }
-										onChange={ ( value ) => {
-											if ( isNaN( value ) || value < 0 ) {
-												return;
-											}
-											setQuery( { pages: value } );
-										} }
-										step="1"
-										value={ query.pages }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
-			{ hasPatterns && (
-				<ToolbarGroup className="wp-block-template-part__block-control-group">
-					<ToolbarButton onClick={ openPatternSelectionModal }>
-						{ __( 'Replace' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			) }
-			<ToolbarGroup controls={ displayLayoutControls } />
-		</>
+		<ToolbarGroup className="wp-block-template-part__block-control-group">
+			<DropdownContentWrapper>
+				<Dropdown
+					contentClassName="block-editor-block-settings-menu__popover"
+					focusOnMount="firstElement"
+					expandOnMobile
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<ToolbarButton
+							aria-haspopup="true"
+							aria-expanded={ isOpen }
+							onClick={ onToggle }
+						>
+							{ __( 'Change design' ) }
+						</ToolbarButton>
+					) }
+					renderContent={ () => (
+						<PatternSelection
+							clientId={ clientId }
+							attributes={ attributes }
+							showSearch={ false }
+							showTitlesAsTooltip
+						/>
+					) }
+				/>
+			</DropdownContentWrapper>
+		</ToolbarGroup>
 	);
 }
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index f6de35bc04f69b..5bf0db81870403 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -1,9 +1,9 @@
 .block-library-query-toolbar__popover .components-popover__content {
 	min-width: 230px;
-}
 
-.wp-block-query__create-new-link {
-	padding: 0 $grid-unit-20 $grid-unit-20 52px;
+	.block-library-query-toolbar__popover-number-control {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {
@@ -19,36 +19,68 @@
 	}
 }
 
-.block-editor-query-pattern__selection-modal .components-modal__content {
-	padding: 0;
-	margin-bottom: $header-height; // $header-height to accommodate bottom toolbar
-	&::before {
-		margin-bottom: 0;
+.block-library-query-pattern__selection-modal {
+
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
+		}
+
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
+		}
 	}
-}
 
-.block-editor-query-pattern__selection-modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
+	.block-library-query-pattern__selection-search {
+		background: $white;
+		position: sticky;
+		top: 0;
+		padding: $grid-unit-20 0;
+		transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container
+		margin-bottom: - $grid-unit-05;
+		z-index: z-index(".block-library-query-pattern__selection-search");
 	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
+}
+
+.block-library-query-toolspanel__design {
+	.block-library-query-pattern__selection-content {
+		margin-top: $grid-unit-10;
 	}
-	@include break-large() {
-		height: 80%;
-		width: 80%;
-		max-height: none;
+}
+
+.wp-block-query__enhanced-pagination-modal {
+	@include break-small() {
+		max-width: $break-mobile;
 	}
 }
 
-.block-library-query-toolspanel__filters {
-	.components-form-token-field__help {
-		margin-bottom: 0;
+.wp-block-query__enhanced-pagination-notice {
+	margin: 0;
+}
+
+.block-editor-block-settings-menu__popover {
+	&.is-expanded {
+		overflow-y: scroll;
 	}
-	.block-library-query-inspector__taxonomy-control:not(:last-child) {
-		margin-bottom: $grid-unit-30;
+	.block-library-query-pattern__selection-content {
+		height: 100%;
+	}
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-template-columns: 1fr;
+		@include break-small() {
+			grid-template-columns: 1fr 1fr;
+		}
+		grid-gap: $grid-unit-15;
+		min-width: $break-zoomed-in;
+		@include break-small() {
+			min-width: $break-mobile;
+		}
+	}
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-library/src/query/hooks.js b/packages/block-library/src/query/hooks.js
deleted file mode 100644
index b2bb32a7be7b4e..00000000000000
--- a/packages/block-library/src/query/hooks.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
-import { addQueryArgs } from '@wordpress/url';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { InspectorControls } from '@wordpress/block-editor';
-
-const CreateNewPostLink = ( {
-	attributes: { query: { postType } = {} } = {},
-} ) => {
-	if ( ! postType ) return null;
-	const newPostUrl = addQueryArgs( 'post-new.php', {
-		post_type: postType,
-	} );
-	return (
-		<div className="wp-block-query__create-new-link">
-			{ createInterpolateElement(
-				__( '<a>Create a new post</a> for this feed.' ),
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
-				{ a: <a href={ newPostUrl } /> }
-			) }
-		</div>
-	);
-};
-
-/**
- * Override the default edit UI to include layout controls
- *
- * @param {Function} BlockEdit Original component
- * @return {Function}           Wrapped component
- */
-const queryTopInspectorControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name, isSelected } = props;
-		if ( name !== 'core/query' || ! isSelected ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-
-		return (
-			<>
-				<InspectorControls>
-					<CreateNewPostLink { ...props } />
-				</InspectorControls>
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
-	},
-	'withInspectorControls'
-);
-
-export default queryTopInspectorControls;
diff --git a/packages/block-library/src/query/index.js b/packages/block-library/src/query/index.js
index baf58470b76ac0..0a757b8ee11e92 100644
--- a/packages/block-library/src/query/index.js
+++ b/packages/block-library/src/query/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { loop as icon } from '@wordpress/icons';
-import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -13,7 +12,6 @@ import edit from './edit';
 import save from './save';
 import variations from './variations';
 import deprecated from './deprecated';
-import queryInspectorControls from './hooks';
 
 const { name } = metadata;
 export { metadata, name };
@@ -21,13 +19,49 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		viewportWidth: 650,
+		attributes: {
+			namespace: 'core/posts-list',
+			query: {
+				perPage: 4,
+				pages: 1,
+				offset: 0,
+				postType: 'post',
+				order: 'desc',
+				orderBy: 'date',
+				author: '',
+				search: '',
+				sticky: 'exclude',
+				inherit: false,
+			},
+		},
+		innerBlocks: [
+			{
+				name: 'core/post-template',
+				attributes: {
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+					},
+				},
+				innerBlocks: [
+					{
+						name: 'core/post-title',
+					},
+					{
+						name: 'core/post-date',
+					},
+					{
+						name: 'core/post-excerpt',
+					},
+				],
+			},
+		],
+	},
 	save,
 	variations,
 	deprecated,
 };
 
-export const init = () => {
-	addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );
-
-	return initBlock( { name, metadata, settings } );
-};
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index 2d22338a97df3e..6b544cd99ae8c7 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -5,12 +5,148 @@
  * @package WordPress
  */
 
+/**
+ * Modifies the static `core/query` block on the server.
+ *
+ * @since 6.4.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      The block instance.
+ *
+ * @return string Returns the modified output of the query block.
+ */
+function render_block_core_query( $attributes, $content, $block ) {
+	$is_interactive = isset( $attributes['enhancedPagination'] )
+		&& true === $attributes['enhancedPagination']
+		&& isset( $attributes['queryId'] );
+
+	// Enqueue the script module and add the necessary directives if the block is
+	// interactive.
+	if ( $is_interactive ) {
+		wp_enqueue_script_module( '@wordpress/block-library/query/view' );
+
+		$p = new WP_HTML_Tag_Processor( $content );
+		if ( $p->next_tag() ) {
+			// Add the necessary directives.
+			$p->set_attribute( 'data-wp-interactive', 'core/query' );
+			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
+			$p->set_attribute( 'data-wp-context', '{}' );
+			$p->set_attribute( 'data-wp-key', $attributes['queryId'] );
+			$content = $p->get_updated_html();
+		}
+	}
+
+	// Add the styles to the block type if the block is interactive and remove
+	// them if it's not.
+	$style_asset = 'wp-block-query';
+	if ( ! wp_style_is( $style_asset ) ) {
+		$style_handles = $block->block_type->style_handles;
+		// If the styles are not needed, and they are still in the `style_handles`, remove them.
+		if ( ! $is_interactive && in_array( $style_asset, $style_handles, true ) ) {
+			$block->block_type->style_handles = array_diff( $style_handles, array( $style_asset ) );
+		}
+		// If the styles are needed, but they were previously removed, add them again.
+		if ( $is_interactive && ! in_array( $style_asset, $style_handles, true ) ) {
+			$block->block_type->style_handles = array_merge( $style_handles, array( $style_asset ) );
+		}
+	}
+
+	return $content;
+}
+
 /**
  * Registers the `core/query` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_query() {
 	register_block_type_from_metadata(
-		__DIR__ . '/query'
+		__DIR__ . '/query',
+		array(
+			'render_callback' => 'render_block_core_query',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_query' );
+
+/**
+ * Traverse the tree of blocks looking for any plugin block (i.e., a block from
+ * an installed plugin) inside a Query block with the enhanced pagination
+ * enabled. If at least one is found, the enhanced pagination is effectively
+ * disabled to prevent any potential incompatibilities.
+ *
+ * @since 6.4.0
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return array Returns the parsed block, unmodified.
+ */
+function block_core_query_disable_enhanced_pagination( $parsed_block ) {
+	static $enhanced_query_stack   = array();
+	static $dirty_enhanced_queries = array();
+	static $render_query_callback  = null;
+
+	$block_name              = $parsed_block['blockName'];
+	$block_type              = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+	$has_enhanced_pagination = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
+	/*
+	 * Client side navigation can be true in two states:
+	 *  - supports.interactivity = true;
+	 *  - supports.interactivity.clientNavigation = true;
+	 */
+	$supports_client_navigation = ( isset( $block_type->supports['interactivity']['clientNavigation'] ) && true === $block_type->supports['interactivity']['clientNavigation'] )
+		|| ( isset( $block_type->supports['interactivity'] ) && true === $block_type->supports['interactivity'] );
+
+	if ( 'core/query' === $block_name && $has_enhanced_pagination ) {
+		$enhanced_query_stack[] = $parsed_block['attrs']['queryId'];
+
+		if ( ! isset( $render_query_callback ) ) {
+			/**
+			 * Filter that disables the enhanced pagination feature during block
+			 * rendering when a plugin block has been found inside. It does so
+			 * by adding an attribute called `data-wp-navigation-disabled` which
+			 * is later handled by the front-end logic.
+			 *
+			 * @param string   $content  The block content.
+			 * @param array    $block    The full block, including name and attributes.
+			 * @return string Returns the modified output of the query block.
+			 */
+			$render_query_callback = static function ( $content, $block ) use ( &$enhanced_query_stack, &$dirty_enhanced_queries, &$render_query_callback ) {
+				$has_enhanced_pagination = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
+
+				if ( ! $has_enhanced_pagination ) {
+					return $content;
+				}
+
+				if ( isset( $dirty_enhanced_queries[ $block['attrs']['queryId'] ] ) ) {
+					// Disable navigation in the router store config.
+					wp_interactivity_config( 'core/router', array( 'clientNavigationDisabled' => true ) );
+					$dirty_enhanced_queries[ $block['attrs']['queryId'] ] = null;
+				}
+
+				array_pop( $enhanced_query_stack );
+
+				if ( empty( $enhanced_query_stack ) ) {
+					remove_filter( 'render_block_core/query', $render_query_callback );
+					$render_query_callback = null;
+				}
+
+				return $content;
+			};
+
+			add_filter( 'render_block_core/query', $render_query_callback, 10, 2 );
+		}
+	} elseif (
+		! empty( $enhanced_query_stack ) &&
+		isset( $block_name ) &&
+		( ! $supports_client_navigation )
+	) {
+		foreach ( $enhanced_query_stack as $query_id ) {
+			$dirty_enhanced_queries[ $query_id ] = true;
+		}
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_query_disable_enhanced_pagination', 10, 1 );
diff --git a/packages/block-library/src/query/save.js b/packages/block-library/src/query/save.js
index d8ae9942ed6f1b..0f8be90273bef1 100644
--- a/packages/block-library/src/query/save.js
+++ b/packages/block-library/src/query/save.js
@@ -3,7 +3,7 @@
  */
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
-export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
+export default function save( { attributes: { tagName: Tag = 'div' } } ) {
 	const blockProps = useBlockProps.save();
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <Tag { ...innerBlocksProps } />;
diff --git a/packages/block-library/src/query/test/utils.js b/packages/block-library/src/query/test/utils.js
index 649bff802ff52d..8c2d88ade80518 100644
--- a/packages/block-library/src/query/test/utils.js
+++ b/packages/block-library/src/query/test/utils.js
@@ -2,7 +2,11 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo } from '../utils';
+import {
+	getEntitiesInfo,
+	getValueFromObjectPath,
+	getQueryContextFromTemplate,
+} from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -29,4 +33,90 @@ describe( 'Query block utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getValueFromObjectPath', () => {
+		it( 'should return undefined when path is empty', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, '' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when path does not exist', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'baz' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when a deeper path does not exist', () => {
+			const object = { foo: { bar: 'baz' } };
+			const result = getValueFromObjectPath( object, 'foo.test' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return the corresponding value of a single level path', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'foo' );
+			expect( result ).toBe( 'bar' );
+		} );
+
+		it( 'should return the value of a deeper path', () => {
+			const object = { foo: { bar: { baz: 'test' } } };
+			const result = getValueFromObjectPath( object, 'foo.bar.baz' );
+			expect( result ).toBe( 'test' );
+		} );
+	} );
+
+	describe( 'getQueryContextFromTemplate', () => {
+		it( 'should return the correct query context based on template slug', () => {
+			expect( getQueryContextFromTemplate() ).toStrictEqual( {
+				isSingular: true,
+			} );
+			expect( getQueryContextFromTemplate( '404' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: '404',
+			} );
+			expect( getQueryContextFromTemplate( 'blank' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'blank',
+			} );
+			expect( getQueryContextFromTemplate( 'single' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'single-film' )
+			).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect( getQueryContextFromTemplate( 'page' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'page',
+			} );
+			expect( getQueryContextFromTemplate( 'wp' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'custom',
+			} );
+			expect( getQueryContextFromTemplate( 'category' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'category-dog' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect( getQueryContextFromTemplate( 'archive' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'archive-film' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
index 276d7b21638173..e12fdc8d8a7e89 100644
--- a/packages/block-library/src/query/utils.js
+++ b/packages/block-library/src/query/utils.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,12 +6,13 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
+import {
+	cloneBlock,
+	getBlockSupport,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import { name as queryLoopName } from './block.json';
+/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
 /**
  * @typedef IHasNameAndId
@@ -60,6 +56,24 @@ export const getEntitiesInfo = ( entities ) => {
 	};
 };
 
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as a string of properties, separated by dots,
+ * for example: "parent.child".
+ *
+ * @param {Object} object Input object.
+ * @param {string} path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+export const getValueFromObjectPath = ( object, path ) => {
+	const normalizedPath = path.split( '.' );
+	let value = object;
+	normalizedPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 /**
  * Helper util to map records to add a `name` prop from a
  * provided path, in order to handle all entities in the same
@@ -72,7 +86,7 @@ export const getEntitiesInfo = ( entities ) => {
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {
 		...entity,
-		name: decodeEntities( get( entity, path ) ),
+		name: decodeEntities( getValueFromObjectPath( entity, path ) ),
 	} ) );
 };
 
@@ -80,6 +94,7 @@ export const mapToIHasNameAndId = ( entities, path ) => {
  * Returns a helper object that contains:
  * 1. An `options` object from the available post types, to be passed to a `SelectControl`.
  * 2. A helper map with available taxonomies per post type.
+ * 3. A helper map with post format support per post type.
  *
  * @return {Object} The helper object related to post types.
  */
@@ -94,7 +109,9 @@ export const usePostTypes = () => {
 		return filteredPostTypes;
 	}, [] );
 	const postTypesTaxonomiesMap = useMemo( () => {
-		if ( ! postTypes?.length ) return;
+		if ( ! postTypes?.length ) {
+			return;
+		}
 		return postTypes.reduce( ( accumulator, type ) => {
 			accumulator[ type.slug ] = type.taxonomies;
 			return accumulator;
@@ -108,7 +125,21 @@ export const usePostTypes = () => {
 			} ) ),
 		[ postTypes ]
 	);
-	return { postTypesTaxonomiesMap, postTypesSelectOptions };
+	const postTypeFormatSupportMap = useMemo( () => {
+		if ( ! postTypes?.length ) {
+			return {};
+		}
+		return postTypes.reduce( ( accumulator, type ) => {
+			accumulator[ type.slug ] =
+				type.supports?.[ 'post-formats' ] || false;
+			return accumulator;
+		}, {} );
+	}, [ postTypes ] );
+	return {
+		postTypesTaxonomiesMap,
+		postTypesSelectOptions,
+		postTypeFormatSupportMap,
+	};
 };
 
 /**
@@ -120,17 +151,23 @@ export const usePostTypes = () => {
 export const useTaxonomies = ( postType ) => {
 	const taxonomies = useSelect(
 		( select ) => {
-			const { getTaxonomies } = select( coreStore );
-			const filteredTaxonomies = getTaxonomies( {
-				type: postType,
-				per_page: -1,
-				context: 'view',
-			} );
-			return filteredTaxonomies;
+			const { getTaxonomies, getPostType } = select( coreStore );
+			// Does the post type have taxonomies?
+			if ( getPostType( postType )?.taxonomies?.length > 0 ) {
+				return getTaxonomies( {
+					type: postType,
+					per_page: -1,
+				} );
+			}
+			return [];
 		},
 		[ postType ]
 	);
-	return taxonomies;
+	return useMemo( () => {
+		return taxonomies?.filter(
+			( { visibility } ) => !! visibility?.publicly_queryable
+		);
+	}, [ taxonomies ] );
 };
 
 /**
@@ -160,7 +197,7 @@ export function useAllowedControls( attributes ) {
 	return useSelect(
 		( select ) =>
 			select( blocksStore ).getActiveBlockVariation(
-				queryLoopName,
+				'core/query',
 				attributes
 			)?.allowedControls,
 
@@ -195,6 +232,7 @@ export const getTransformedBlocksFromPattern = (
 ) => {
 	const {
 		query: { postType, inherit },
+		namespace,
 	} = queryBlockAttributes;
 	const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
 	const queryClientIds = [];
@@ -207,6 +245,9 @@ export const getTransformedBlocksFromPattern = (
 				postType,
 				inherit,
 			};
+			if ( namespace ) {
+				block.attributes.namespace = namespace;
+			}
 			queryClientIds.push( block.clientId );
 		}
 		block.innerBlocks?.forEach( ( innerBlock ) => {
@@ -231,32 +272,194 @@ export const getTransformedBlocksFromPattern = (
  * @return {string} The block name to be used in the patterns suggestions.
  */
 export function useBlockNameForPatterns( clientId, attributes ) {
-	const activeVariationName = useSelect(
-		( select ) =>
-			select( blocksStore ).getActiveBlockVariation(
-				queryLoopName,
-				attributes
-			)?.name,
-
-		[ attributes ]
-	);
-	const blockName = `${ queryLoopName }/${ activeVariationName }`;
-	const activeVariationPatterns = useSelect(
+	return useSelect(
 		( select ) => {
+			const activeVariationName = select(
+				blocksStore
+			).getActiveBlockVariation( 'core/query', attributes )?.name;
+
 			if ( ! activeVariationName ) {
-				return;
+				return 'core/query';
 			}
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
+
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
+
 			const rootClientId = getBlockRootClientId( clientId );
-			return __experimentalGetPatternsByBlockTypes(
-				blockName,
+			const activePatterns = getPatternsByBlockTypes(
+				`core/query/${ activeVariationName }`,
 				rootClientId
 			);
+
+			return activePatterns.length > 0
+				? `core/query/${ activeVariationName }`
+				: 'core/query';
+		},
+		[ clientId, attributes ]
+	);
+}
+
+/**
+ * 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(
+					'core/query',
+					attributes
+				)?.name,
+				blockVariations: getBlockVariations( 'core/query', '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;
+}
+
+/**
+ * Hook that returns the block patterns for a specific block type.
+ *
+ * @param {string} clientId The block's client ID.
+ * @param {string} name     The block type name.
+ * @return {Object[]} An array of valid block patterns.
+ */
+export const usePatterns = ( clientId, name ) => {
+	return useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return getPatternsByBlockTypes( name, rootClientId );
+		},
+		[ name, clientId ]
+	);
+};
+
+/**
+ * The object returned by useUnsupportedBlocks with info about the type of
+ * unsupported blocks present inside the Query block.
+ *
+ * @typedef  {Object}  UnsupportedBlocksInfo
+ * @property {boolean} hasBlocksFromPlugins True if blocks from plugins are present.
+ * @property {boolean} hasPostContentBlock  True if a 'core/post-content' block is present.
+ * @property {boolean} hasUnsupportedBlocks True if there are any unsupported blocks.
+ */
+
+/**
+ * Hook that returns an object with information about the unsupported blocks
+ * present inside a Query Loop with the given `clientId`. The returned object
+ * contains props that are true when a certain type of unsupported block is
+ * present.
+ *
+ * @param {string} clientId The block's client ID.
+ * @return {UnsupportedBlocksInfo} The object containing the information.
+ */
+export const useUnsupportedBlocks = ( clientId ) => {
+	return useSelect(
+		( select ) => {
+			const { getClientIdsOfDescendants, getBlockName } =
+				select( blockEditorStore );
+			const blocks = {};
+			getClientIdsOfDescendants( clientId ).forEach(
+				( descendantClientId ) => {
+					const blockName = getBlockName( descendantClientId );
+					/*
+					 * Client side navigation can be true in two states:
+					 *  - supports.interactivity = true;
+					 *  - supports.interactivity.clientNavigation = true;
+					 */
+					const blockSupportsInteractivity = Object.is(
+						getBlockSupport( blockName, 'interactivity' ),
+						true
+					);
+					const blockSupportsInteractivityClientNavigation =
+						getBlockSupport(
+							blockName,
+							'interactivity.clientNavigation'
+						);
+					const blockInteractivity =
+						blockSupportsInteractivity ||
+						blockSupportsInteractivityClientNavigation;
+					if ( ! blockInteractivity ) {
+						blocks.hasBlocksFromPlugins = true;
+					} else if ( blockName === 'core/post-content' ) {
+						blocks.hasPostContentBlock = true;
+					}
+				}
+			);
+			blocks.hasUnsupportedBlocks =
+				blocks.hasBlocksFromPlugins || blocks.hasPostContentBlock;
+			return blocks;
 		},
-		[ clientId, activeVariationName ]
+		[ clientId ]
 	);
-	return activeVariationPatterns?.length ? blockName : queryLoopName;
+};
+
+/**
+ * Helper function that returns the query context from the editor based on the
+ * available template slug.
+ *
+ * @param {string} templateSlug Current template slug based on context.
+ * @return {Object} An object with isSingular and templateType properties.
+ */
+export function getQueryContextFromTemplate( templateSlug ) {
+	// In the Post Editor, the template slug is not available.
+	if ( ! templateSlug ) {
+		return { isSingular: true };
+	}
+	let isSingular = false;
+	let templateType = templateSlug === 'wp' ? 'custom' : templateSlug;
+	const singularTemplates = [ '404', 'blank', 'single', 'page', 'custom' ];
+	const templateTypeFromSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-', 1 )[ 0 ]
+		: templateSlug;
+	const queryFromTemplateSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-' ).slice( 1 ).join( '-' )
+		: '';
+	if ( queryFromTemplateSlug ) {
+		templateType = templateTypeFromSlug;
+	}
+	isSingular = singularTemplates.includes( templateType );
+
+	return { isSingular, templateType };
 }
diff --git a/packages/block-library/src/query/variations.js b/packages/block-library/src/query/variations.js
index fb15645760f293..56a2ba720f55b9 100644
--- a/packages/block-library/src/query/variations.js
+++ b/packages/block-library/src/query/variations.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postList } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,51 +13,12 @@ import {
 	imageDateTitle,
 } from './icons';
 
-const QUERY_DEFAULT_ATTRIBUTES = {
-	query: {
-		perPage: 3,
-		pages: 0,
-		offset: 0,
-		postType: 'post',
-		order: 'desc',
-		orderBy: 'date',
-		author: '',
-		search: '',
-		exclude: [],
-		sticky: '',
-		inherit: false,
-	},
-};
-
 const variations = [
-	{
-		name: 'posts-list',
-		title: __( 'Posts List' ),
-		description: __(
-			'Display a list of your most recent posts, excluding sticky posts.'
-		),
-		icon: postList,
-		attributes: {
-			query: {
-				perPage: 4,
-				pages: 1,
-				offset: 0,
-				postType: 'post',
-				order: 'desc',
-				orderBy: 'date',
-				author: '',
-				search: '',
-				sticky: 'exclude',
-				inherit: false,
-			},
-		},
-		scope: [ 'inserter' ],
-	},
 	{
 		name: 'title-date',
 		title: __( 'Title & Date' ),
 		icon: titleDate,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -74,7 +34,7 @@ const variations = [
 		name: 'title-excerpt',
 		title: __( 'Title & Excerpt' ),
 		icon: titleExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -90,7 +50,7 @@ const variations = [
 		name: 'title-date-excerpt',
 		title: __( 'Title, Date, & Excerpt' ),
 		icon: titleDateExcerpt,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
@@ -110,7 +70,7 @@ const variations = [
 		name: 'image-date-title',
 		title: __( 'Image, Date, & Title' ),
 		icon: imageDateTitle,
-		attributes: { ...QUERY_DEFAULT_ATTRIBUTES },
+		attributes: {},
 		innerBlocks: [
 			[
 				'core/post-template',
diff --git a/packages/block-library/src/query/view.js b/packages/block-library/src/query/view.js
new file mode 100644
index 00000000000000..e23294a24e02e3
--- /dev/null
+++ b/packages/block-library/src/query/view.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+const isValidLink = ( ref ) =>
+	ref &&
+	ref instanceof window.HTMLAnchorElement &&
+	ref.href &&
+	( ! ref.target || ref.target === '_self' ) &&
+	ref.origin === window.location.origin;
+
+const isValidEvent = ( event ) =>
+	event.button === 0 && // Left clicks only.
+	! event.metaKey && // Open in new tab (Mac).
+	! event.ctrlKey && // Open in new tab (Windows).
+	! event.altKey && // Download.
+	! event.shiftKey &&
+	! event.defaultPrevented;
+
+store(
+	'core/query',
+	{
+		actions: {
+			*navigate( event ) {
+				const ctx = getContext();
+				const { ref } = getElement();
+				const queryRef = ref.closest(
+					'.wp-block-query[data-wp-router-region]'
+				);
+
+				if ( isValidLink( ref ) && isValidEvent( event ) ) {
+					event.preventDefault();
+
+					const { actions } = yield import(
+						'@wordpress/interactivity-router'
+					);
+					yield actions.navigate( ref.href );
+					ctx.url = ref.href;
+
+					// Focus the first anchor of the Query block.
+					const firstAnchor = `.wp-block-post-template a[href]`;
+					queryRef.querySelector( firstAnchor )?.focus();
+				}
+			},
+			*prefetch() {
+				const { ref } = getElement();
+				if ( isValidLink( ref ) ) {
+					const { actions } = yield import(
+						'@wordpress/interactivity-router'
+					);
+					yield actions.prefetch( ref.href );
+				}
+			},
+		},
+		callbacks: {
+			*prefetch() {
+				const { url } = getContext();
+				const { ref } = getElement();
+				if ( url && isValidLink( ref ) ) {
+					const { actions } = yield import(
+						'@wordpress/interactivity-router'
+					);
+					yield actions.prefetch( ref.href );
+				}
+			},
+		},
+	},
+	{ lock: true }
+);
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index adb9fddca78731..2ae37f9f36f766 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/quote",
 	"title": "Quote",
 	"category": "text",
@@ -14,22 +14,49 @@
 			"selector": "blockquote",
 			"multiline": "p",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "cite",
-			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
-		"align": {
+		"textAlign": {
 			"type": "string"
 		}
 	},
 	"supports": {
 		"anchor": true,
+		"align": [ "left", "right", "wide", "full" ],
+		"html": false,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"__experimentalOnEnter": true,
+		"__experimentalOnMerge": true,
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -40,17 +67,28 @@
 			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true
+				"fontSize": true
 			}
 		},
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
+		},
+		"layout": {
+			"allowEditing": false
+		},
+		"spacing": {
+			"blockGap": true,
+			"padding": true,
+			"margin": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 052ac5b5c9c372..4d3efd28e3a22c 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export const migrateToQuoteV2 = ( attributes ) => {
 	const { value, ...restAttributes } = attributes;
@@ -34,6 +34,102 @@ export const migrateToQuoteV2 = ( attributes ) => {
 	];
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+// Migrate existing text alignment settings to the renamed attribute.
+const migrateTextAlign = ( attributes, innerBlocks ) => {
+	const { align, ...rest } = attributes;
+	// Check if there are valid alignments stored in the old attribute
+	// and assign them to the new attribute name.
+	const migratedAttributes = TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+
+	return [ migratedAttributes, innerBlocks ];
+};
+
+// Migrate the v2 blocks with style === `2`;
+const migrateLargeStyle = ( attributes, innerBlocks ) => {
+	return [
+		{
+			...attributes,
+			className: attributes.className
+				? attributes.className + ' is-style-large'
+				: 'is-style-large',
+		},
+		innerBlocks,
+	];
+};
+
+// Version before the 'align' attribute was replaced with 'textAlign'.
+const v4 = {
+	attributes: {
+		value: {
+			type: 'string',
+			source: 'html',
+			selector: 'blockquote',
+			multiline: 'p',
+			default: '',
+			role: 'content',
+		},
+		citation: {
+			type: 'string',
+			source: 'html',
+			selector: 'cite',
+			default: '',
+			role: 'content',
+		},
+		align: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		__experimentalOnEnter: true,
+		__experimentalOnMerge: true,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+				fontAppearance: true,
+			},
+		},
+		color: {
+			gradients: true,
+			heading: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+	},
+	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+	save( { attributes } ) {
+		const { align, citation } = attributes;
+		const className = clsx( {
+			[ `has-text-align-${ align }` ]: align,
+		} );
+		return (
+			<blockquote { ...useBlockProps.save( { className } ) }>
+				<InnerBlocks.Content />
+				{ ! RichText.isEmpty( citation ) && (
+					<RichText.Content tagName="cite" value={ citation } />
+				) }
+			</blockquote>
+		);
+	},
+	migrate: migrateTextAlign,
+};
+
 const v3 = {
 	attributes: {
 		value: {
@@ -42,14 +138,14 @@ const v3 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
@@ -74,7 +170,7 @@ const v3 = {
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 
@@ -87,7 +183,9 @@ const v3 = {
 			</blockquote>
 		);
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 };
 
 const v2 = {
@@ -109,7 +207,9 @@ const v2 = {
 			type: 'string',
 		},
 	},
-	migrate: migrateToQuoteV2,
+	migrate( attributes ) {
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
+	},
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
@@ -151,15 +251,12 @@ const v1 = {
 	migrate( attributes ) {
 		if ( attributes.style === 2 ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-				className: attributes.className
-					? attributes.className + ' is-style-large'
-					: 'is-style-large',
-			} );
+			return migrateTextAlign(
+				...migrateLargeStyle( ...migrateToQuoteV2( restAttributes ) )
+			);
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -206,12 +303,10 @@ const v0 = {
 	migrate( attributes ) {
 		if ( ! isNaN( parseInt( attributes.style ) ) ) {
 			const { style, ...restAttributes } = attributes;
-			return migrateToQuoteV2( {
-				...restAttributes,
-			} );
+			return migrateTextAlign( ...migrateToQuoteV2( restAttributes ) );
 		}
 
-		return migrateToQuoteV2( attributes );
+		return migrateTextAlign( ...migrateToQuoteV2( attributes ) );
 	},
 
 	save( { attributes } ) {
@@ -239,4 +334,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1, v0 ];
+export default [ v4, v3, v2, v1, v0 ];
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index e6c560078e5010..66f8f9d66c85ae 100644
--- a/packages/block-library/src/quote/edit.js
+++ b/packages/block-library/src/quote/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,21 +10,21 @@ import { __ } from '@wordpress/i18n';
 import {
 	AlignmentControl,
 	BlockControls,
-	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
+import { verse } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { migrateToQuoteV2 } from './deprecated';
+import { Caption } from '../utils/caption';
 
 const isWebPlatform = Platform.OS === 'web';
 
@@ -73,67 +73,59 @@ export default function QuoteEdit( {
 	clientId,
 	className,
 	style,
+	isSelected,
 } ) {
-	const { align, citation } = attributes;
+	const { textAlign } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
-	const hasSelection = useSelect( ( select ) => {
-		const { isBlockSelected, hasSelectedInnerBlock } =
-			select( blockEditorStore );
-		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
-	}, [] );
-
 	const blockProps = useBlockProps( {
-		className: classNames( className, {
-			[ `has-text-align-${ align }` ]: align,
+		className: clsx( className, {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		...( ! isWebPlatform && { style } ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		templateInsertUpdatesSelection: true,
+		__experimentalCaptureToolbars: true,
+		renderAppender: false,
 	} );
 
 	return (
 		<>
 			<BlockControls group="block">
 				<AlignmentControl
-					value={ align }
+					value={ textAlign }
 					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
+						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
 			<BlockQuotation { ...innerBlocksProps }>
 				{ innerBlocksProps.children }
-				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
-					<RichText
-						identifier="citation"
-						tagName={ isWebPlatform ? 'cite' : undefined }
-						style={ { display: 'block' } }
-						value={ citation }
-						onChange={ ( nextCitation ) => {
-							setAttributes( {
-								citation: nextCitation,
-							} );
-						} }
-						__unstableMobileNoFocusOnMount
-						aria-label={ __( 'Quote citation' ) }
-						placeholder={
-							// translators: placeholder text used for the
-							// citation
-							__( 'Add citation' )
-						}
-						className="wp-block-quote__citation"
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
-					/>
-				) }
+				<Caption
+					attributeKey="citation"
+					tagName={ isWebPlatform ? 'cite' : 'p' }
+					style={ isWebPlatform && { display: 'block' } }
+					isSelected={ isSelected }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					__unstableMobileNoFocusOnMount
+					icon={ verse }
+					label={ __( 'Quote citation' ) }
+					placeholder={
+						// translators: placeholder text used for the
+						// citation
+						__( 'Add citation' )
+					}
+					addLabel={ __( 'Add citation' ) }
+					removeLabel={ __( 'Remove citation' ) }
+					excludeElementClassName
+					className="wp-block-quote__citation"
+					insertBlocksAfter={ insertBlocksAfter }
+					{ ...( ! isWebPlatform ? { textAlign } : {} ) }
+				/>
 			</BlockQuotation>
 		</>
 	);
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
index 7b6ecab8762eb5..521d78def3ef3b 100644
--- a/packages/block-library/src/quote/save.js
+++ b/packages/block-library/src/quote/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,10 +9,10 @@ import classNames from 'classnames';
 import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { align, citation } = attributes;
+	const { textAlign, citation } = attributes;
 
-	const className = classNames( {
-		[ `has-text-align-${ align }` ]: align,
+	const className = clsx( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
 	return (
diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss
index 835dc56afaf5e6..8688294bc5594e 100644
--- a/packages/block-library/src/quote/style.scss
+++ b/packages/block-library/src/quote/style.scss
@@ -2,8 +2,8 @@
 	box-sizing: border-box;
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
-	&.is-style-large:not(.is-style-plain),
-	&.is-large:not(.is-style-plain) {
+	&.is-style-large:where(:not(.is-style-plain)),
+	&.is-large:where(:not(.is-style-plain)) {
 		margin-bottom: 1em;
 		padding: 0 1em;
 
@@ -18,5 +18,9 @@
 			font-size: 1.125em;
 			text-align: right;
 		}
+
+	}
+	> cite {
+		display: block;
 	}
 }
diff --git a/packages/block-library/src/quote/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/quote/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..edd5c40ae916ba
--- /dev/null
+++ b/packages/block-library/src/quote/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Quote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Quote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Quote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Quote block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>"This will make running your own blog a viable alternative again."</p><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Quote block transforms ungroups block 1`] = `
+"<!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/quote/test/edit.native.js b/packages/block-library/src/quote/test/edit.native.js
new file mode 100644
index 00000000000000..c7479f611fa8b8
--- /dev/null
+++ b/packages/block-library/src/quote/test/edit.native.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	selectRangeInRichText,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	typeInRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+setupCoreBlocks();
+
+describe( 'Quote', () => {
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Quote' );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		// A layout event must be explicitly dispatched in BlockList component,
+		// otherwise the inner blocks are not rendered.
+		fireEvent(
+			within( quoteBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 320,
+					},
+				},
+			}
+		);
+
+		// Act
+		fireEvent.press( quoteBlock );
+		let quoteTextInput =
+			within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( quoteTextInput, 'A great statement.' );
+		fireEvent( quoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		quoteTextInput =
+			within( quoteBlock ).getAllByPlaceholderText(
+				'Start writing…'
+			)[ 1 ];
+		typeInRichText( quoteTextInput, 'Again.' );
+		fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+		fireEvent.press( screen.getByLabelText( 'Add citation' ) );
+		const citationBlock =
+			await screen.findByPlaceholderText( 'Add citation' );
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		typeInRichText( citationTextInput, 'A person' );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		selectRangeInRichText( citationTextInput, 2 );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:quote -->
+		<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+		<p>A great statement.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Again.</p>
+		<!-- /wp:paragraph --><cite>A <br>person</cite></blockquote>
+		<!-- /wp:quote -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+} );
diff --git a/packages/block-library/src/quote/test/transforms.native.js b/packages/block-library/src/quote/test/transforms.native.js
new file mode 100644
index 00000000000000..3d2bc8ae609182
--- /dev/null
+++ b/packages/block-library/src/quote/test/transforms.native.js
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlock,
+	openBlockActionsMenu,
+	fireEvent,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Quote';
+const initialHtml = `
+<!-- wp:quote {"textAlign":"left","className":"is-style-large"} -->
+<blockquote class="wp-block-quote has-text-align-left is-style-large"><!-- wp:paragraph -->
+<p>"This will make running your own blog a viable alternative again."</p>
+<!-- /wp:paragraph --><cite>— <a href="https://twitter.com/azumbrunnen_/status/1019347243084800005">Adrian Zumbrunnen</a></cite></blockquote>
+<!-- /wp:quote -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [
+	'Pullquote',
+	'Paragraph',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'ungroups block', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const { getByText } = screen;
+		fireEvent.press( getBlock( screen, block ) );
+
+		await openBlockActionsMenu( screen );
+		fireEvent.press( getByText( 'Ungroup' ) );
+
+		// The first block created is the content of the Paragraph block.
+		const paragraph = getBlock( screen, 'Paragraph', 0 );
+		expect( paragraph ).toBeVisible();
+		// The second block created is the content of the citation element.
+		const citation = getBlock( screen, 'Paragraph', 1 );
+		expect( citation ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index 085d4e91924a8a..2c5983003986a1 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -2,7 +2,6 @@
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;
-
 	cite,
 	footer {
 		color: currentColor;
@@ -11,19 +10,21 @@
 		font-style: normal;
 	}
 
-	&.has-text-align-right {
+	&:where(.has-text-align-right) {
 		border-left: none;
 		border-right: 0.25em solid currentColor;
 		padding-left: 0;
 		padding-right: 1em;
 	}
 
-	&.has-text-align-center {
+	&:where(.has-text-align-center) {
 		border: none;
 		padding-left: 0;
 	}
 	// .is-style-large and .is-large are kept for backwards compatibility.
-	&.is-style-plain,
+	// They are not wrapped in `:where()` to keep specificity as it was before
+	// they were deprecated.
+	&:where(.is-style-plain),
 	&.is-style-large,
 	&.is-large {
 		border: none;
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
index f8977bd9974928..c960759691bf16 100644
--- a/packages/block-library/src/quote/transforms.js
+++ b/packages/block-library/src/quote/transforms.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { RichText } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
@@ -8,10 +9,18 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/pullquote' ],
-			transform: ( { value, citation, anchor, fontSize, style } ) => {
+			transform: ( {
+				value,
+				align,
+				citation,
+				anchor,
+				fontSize,
+				style,
+			} ) => {
 				return createBlock(
 					'core/quote',
 					{
+						align,
 						citation,
 						anchor,
 						fontSize,
@@ -21,12 +30,6 @@ const transforms = {
 				);
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/group' ],
-			transform: ( { anchor }, innerBlocks ) =>
-				createBlock( 'core/quote', { anchor }, innerBlocks ),
-		},
 		{
 			type: 'prefix',
 			prefix: '>',
@@ -100,7 +103,7 @@ const transforms = {
 				);
 			},
 			transform: (
-				{ citation, anchor, fontSize, style },
+				{ align, citation, anchor, fontSize, style },
 				innerBlocks
 			) => {
 				const value = innerBlocks
@@ -108,6 +111,7 @@ const transforms = {
 					.join( '<br>' );
 				return createBlock( 'core/pullquote', {
 					value,
+					align,
 					citation,
 					anchor,
 					fontSize,
@@ -115,6 +119,19 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( { citation }, innerBlocks ) =>
+				RichText.isEmpty( citation )
+					? innerBlocks
+					: [
+							...innerBlocks,
+							createBlock( 'core/paragraph', {
+								content: citation,
+							} ),
+					  ],
+		},
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],
@@ -122,30 +139,26 @@ const transforms = {
 				createBlock(
 					'core/group',
 					{ anchor },
-					citation
-						? [
+					RichText.isEmpty( citation )
+						? innerBlocks
+						: [
 								...innerBlocks,
 								createBlock( 'core/paragraph', {
 									content: citation,
 								} ),
 						  ]
-						: innerBlocks
 				),
 		},
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( { citation }, innerBlocks ) =>
-				citation
-					? [
-							...innerBlocks,
-							createBlock( 'core/paragraph', {
-								content: citation,
-							} ),
-					  ]
-					: innerBlocks,
-		},
 	],
+	ungroup: ( { citation }, innerBlocks ) =>
+		RichText.isEmpty( citation )
+			? innerBlocks
+			: [
+					...innerBlocks,
+					createBlock( 'core/paragraph', {
+						content: citation,
+					} ),
+			  ],
 };
 
 export default transforms;
diff --git a/packages/block-library/src/read-more/block.json b/packages/block-library/src/read-more/block.json
index 61b0452c7c80e6..9e4fc84d193f71 100644
--- a/packages/block-library/src/read-more/block.json
+++ b/packages/block-library/src/read-more/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/read-more",
 	"title": "Read More",
 	"category": "theme",
@@ -50,6 +50,9 @@
 			"__experimentalDefaultControls": {
 				"width": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-read-more"
diff --git a/packages/block-library/src/read-more/edit.js b/packages/block-library/src/read-more/edit.js
index 007aa357149964..8486dd6e50141a 100644
--- a/packages/block-library/src/read-more/edit.js
+++ b/packages/block-library/src/read-more/edit.js
@@ -19,8 +19,9 @@ export default function ReadMore( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
 						onChange={ ( value ) =>
 							setAttributes( {
@@ -32,6 +33,7 @@ export default function ReadMore( {
 				</PanelBody>
 			</InspectorControls>
 			<RichText
+				identifier="content"
 				tagName="a"
 				aria-label={ __( '“Read more” link text' ) }
 				placeholder={ __( 'Read more' ) }
@@ -42,7 +44,7 @@ export default function ReadMore( {
 				__unstableOnSplitAtEnd={ () =>
 					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
-				withoutInteractiveFormatting={ true }
+				withoutInteractiveFormatting
 				{ ...blockProps }
 			/>
 		</>
diff --git a/packages/block-library/src/read-more/index.php b/packages/block-library/src/read-more/index.php
index 7bfd22e6d4c4df..c01a0a377fc938 100644
--- a/packages/block-library/src/read-more/index.php
+++ b/packages/block-library/src/read-more/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/read-more` block on the server.
  *
+ * @since 6.0.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -18,12 +20,19 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_ID            = $block->context['postId'];
-	$post_title         = get_the_title( $post_ID );
+	$post_ID    = $block->context['postId'];
+	$post_title = get_the_title( $post_ID );
+	if ( '' === $post_title ) {
+		$post_title = sprintf(
+			/* translators: %s is post ID to describe the link for screen readers. */
+			__( 'untitled post %s' ),
+			$post_ID
+		);
+	}
 	$screen_reader_text = sprintf(
 		/* translators: %s is either the post title or post ID to describe the link for screen readers. */
 		__( ': %s' ),
-		'' !== $post_title ? $post_title : __( 'untitled post ' ) . $post_ID
+		$post_title
 	);
 	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
@@ -40,6 +49,8 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/read-more` block on the server.
+ *
+ * @since 6.0.0
  */
 function register_block_core_read_more() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/read-more/style.scss b/packages/block-library/src/read-more/style.scss
index f0e0291eb6ffcc..3a15de37adf685 100644
--- a/packages/block-library/src/read-more/style.scss
+++ b/packages/block-library/src/read-more/style.scss
@@ -1,7 +1,7 @@
 .wp-block-read-more {
 	display: block;
 	width: fit-content;
-	&:not([style*="text-decoration"]) {
+	&:where(:not([style*="text-decoration"])) {
 		text-decoration: none;
 
 		&:focus,
diff --git a/packages/block-library/src/reset.scss b/packages/block-library/src/reset.scss
index 6c3cc7b1d45be8..df25b2c96e387f 100644
--- a/packages/block-library/src/reset.scss
+++ b/packages/block-library/src/reset.scss
@@ -7,20 +7,19 @@
 
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
-html :where(.editor-styles-wrapper) {
-	/**
-	* The following styles revert to the browser defaults overriding the WPAdmin styles.
-	* This is only needed while the block editor is not being loaded in an iframe.
-	*/
-	font-family: serif; // unfortunately initial doesn't work for font-family.
-	font-size: initial;
-	line-height: initial;
-	color: initial;
+:where(.editor-styles-wrapper) {
+	// The following styles revert to the browser defaults overriding the WPAdmin styles.
+	html & {
+		font-family: serif; // unfortunately initial doesn't work for font-family.
+		font-size: initial;
+		line-height: initial;
+		color: initial;
 
-	// Many themes with white backgrounds load editor styles but fail to also provide
-	// an explicit white background color, assuming a white editing canvas.
-	// So to match browser defaults, we provide a white default here as well.
-	background: #fff;
+		// Many themes with white backgrounds load editor styles but fail to also provide
+		// an explicit white background color, assuming a white editing canvas.
+		// So to match browser defaults, we provide a white default here as well.
+		background: #fff;
+	}
 
 	.wp-align-wrapper {
 		max-width: $content-width;
diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json
index 8a351d877a751d..36d70e7b7ccb98 100644
--- a/packages/block-library/src/rss/block.json
+++ b/packages/block-library/src/rss/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/rss",
 	"title": "RSS",
 	"category": "widgets",
@@ -43,7 +43,10 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-rss-editor",
 	"style": "wp-block-rss"
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
index f72bf1c77e6741..b67cb4f9193df1 100644
--- a/packages/block-library/src/rss/edit.js
+++ b/packages/block-library/src/rss/edit.js
@@ -12,13 +12,13 @@ import {
 	PanelBody,
 	Placeholder,
 	RangeControl,
-	TextControl,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
@@ -58,15 +58,26 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 
 	const blockProps = useBlockProps();
 
+	const label = __( 'RSS URL' );
+
 	if ( isEditing ) {
 		return (
 			<div { ...blockProps }>
-				<Placeholder icon={ rss } label="RSS">
+				<Placeholder
+					icon={ rss }
+					label={ label }
+					instructions={ __(
+						'Display entries from any RSS or Atom feed.'
+					) }
+				>
 					<form
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<TextControl
+						<InputControl
+							__next40pxDefaultSize
+							label={ label }
+							hideLabelFromVision
 							placeholder={ __( 'Enter URL here…' ) }
 							value={ feedURL }
 							onChange={ ( value ) =>
@@ -74,8 +85,12 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 							}
 							className="wp-block-rss__placeholder-input"
 						/>
-						<Button variant="primary" type="submit">
-							{ __( 'Use URL' ) }
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Apply' ) }
 						</Button>
 					</form>
 				</Placeholder>
@@ -91,13 +106,13 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		},
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'list' } ),
 			isActive: blockLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'grid' } ),
 			isActive: blockLayout === 'grid',
 		},
@@ -111,6 +126,8 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }
 						onChange={ ( value ) =>
@@ -121,22 +138,27 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						required
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display author' ) }
 						checked={ displayAuthor }
 						onChange={ toggleAttribute( 'displayAuthor' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ toggleAttribute( 'displayDate' ) }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ toggleAttribute( 'displayExcerpt' ) }
 					/>
 					{ displayExcerpt && (
 						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -149,6 +171,8 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 					) }
 					{ blockLayout === 'grid' && (
 						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Columns' ) }
 							value={ columns }
 							onChange={ ( value ) =>
diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss
index aa6288897aea4b..c5e79d6254460b 100644
--- a/packages/block-library/src/rss/editor.scss
+++ b/packages/block-library/src/rss/editor.scss
@@ -2,31 +2,6 @@
 	display: inline;
 }
 
-.wp-block-rss__placeholder-form {
-	display: flex;
-	align-items: stretch;
-
-	> * {
-		margin-bottom: $grid-unit-10;
-	}
-
-	@include break-medium() {
-		> * {
-			margin-bottom: 0;
-		}
-	}
-}
-
-.wp-block-rss__placeholder-input {
-	display: flex;
-	align-items: stretch;
-	flex-grow: 1;
-
-	.components-base-control__field {
-		margin: 0;
-		display: flex;
-		align-items: stretch;
-		flex-grow: 1;
-		margin-right: $grid-unit-10;
-	}
+.wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
+	flex: 1 1 auto;
 }
diff --git a/packages/block-library/src/rss/index.php b/packages/block-library/src/rss/index.php
index e32155195af1db..85e4e63c9dbf7a 100644
--- a/packages/block-library/src/rss/index.php
+++ b/packages/block-library/src/rss/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/rss` block on server.
  *
+ * @since 5.2.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content with received rss items.
@@ -48,7 +50,7 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( 'c', $date ) ),
 					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}
@@ -59,17 +61,20 @@ function render_block_core_rss( $attributes ) {
 			$author = $item->get_author();
 			if ( is_object( $author ) ) {
 				$author = $author->get_name();
-				$author = '<span class="wp-block-rss__item-author">' . sprintf(
-					/* translators: %s: the author. */
-					__( 'by %s' ),
-					esc_html( strip_tags( $author ) )
-				) . '</span>';
+				if ( ! empty( $author ) ) {
+					$author = '<span class="wp-block-rss__item-author">' . sprintf(
+						/* translators: byline. %s: author. */
+						__( 'by %s' ),
+						esc_html( strip_tags( $author ) )
+					) . '</span>';
+				}
 			}
 		}
 
-		$excerpt = '';
-		if ( $attributes['displayExcerpt'] ) {
-			$excerpt = html_entity_decode( $item->get_description(), ENT_QUOTES, get_option( 'blog_charset' ) );
+		$excerpt     = '';
+		$description = $item->get_description();
+		if ( $attributes['displayExcerpt'] && ! empty( $description ) ) {
+			$excerpt = html_entity_decode( $description, ENT_QUOTES, get_option( 'blog_charset' ) );
 			$excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' [&hellip;]' ) );
 
 			// Change existing [...] to [&hellip;].
@@ -107,6 +112,8 @@ function render_block_core_rss( $attributes ) {
 
 /**
  * Registers the `core/rss` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_rss() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index fbd0fa874c4087..c5af5a29d21beb 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/search",
 	"title": "Search",
 	"category": "widgets",
@@ -10,7 +10,7 @@
 	"attributes": {
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
@@ -19,7 +19,7 @@
 		"placeholder": {
 			"type": "string",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "number"
@@ -29,7 +29,7 @@
 		},
 		"buttonText": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"buttonPosition": {
 			"type": "string",
@@ -42,6 +42,10 @@
 		"query": {
 			"type": "object",
 			"default": {}
+		},
+		"isSearchFieldHidden": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {
@@ -54,6 +58,7 @@
 				"text": true
 			}
 		},
+		"interactivity": true,
 		"typography": {
 			"__experimentalSkipSerialization": true,
 			"__experimentalSelector": ".wp-block-search__label, .wp-block-search__input, .wp-block-search__button",
@@ -80,6 +85,9 @@
 				"width": true
 			}
 		},
+		"spacing": {
+			"margin": true
+		},
 		"html": false
 	},
 	"editorStyle": "wp-block-search-editor",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index a3db69287f8f73..f193c04e2493aa 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,21 +16,21 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
-	Button,
-	ButtonGroup,
 	ToolbarButton,
 	ResizableBox,
 	PanelBody,
-	BaseControl,
+	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
@@ -52,12 +52,13 @@ import {
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
 	MIN_WIDTH,
-	MIN_WIDTH_UNIT,
+	isPercentageUnit,
 } from './utils.js';
 
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
+const PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];
 
 export default function SearchEdit( {
 	className,
@@ -77,10 +78,11 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		isSearchFieldHidden,
 		style,
 	} = attributes;
 
-	const insertedInNavigationBlock = useSelect(
+	const wasJustInsertedIntoNavigationBlock = useSelect(
 		( select ) => {
 			const { getBlockParentsByBlockName, wasBlockJustInserted } =
 				select( blockEditorStore );
@@ -93,46 +95,87 @@ export default function SearchEdit( {
 	);
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
+
 	useEffect( () => {
-		if ( ! insertedInNavigationBlock ) return;
-		// This side-effect should not create an undo level.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( {
-			showLabel: false,
-			buttonUseIcon: true,
-			buttonPosition: 'button-inside',
-		} );
-	}, [ insertedInNavigationBlock ] );
+		if ( wasJustInsertedIntoNavigationBlock ) {
+			// This side-effect should not create an undo level.
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				showLabel: false,
+				buttonUseIcon: true,
+				buttonPosition: 'button-inside',
+			} );
+		}
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		wasJustInsertedIntoNavigationBlock,
+		setAttributes,
+	] );
+
 	const borderRadius = style?.border?.radius;
-	const borderProps = useBorderProps( attributes );
+	let borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
 	// check so that a borderRadius style won't overwrite the longhand
 	// per-corner styles.
 	if ( typeof borderRadius === 'number' ) {
-		borderProps.style.borderRadius = `${ borderRadius }px`;
+		borderProps = {
+			...borderProps,
+			style: {
+				...borderProps.style,
+				borderRadius: `${ borderRadius }px`,
+			},
+		};
 	}
 
 	const colorProps = useColorProps( attributes );
-	const fluidTypographyEnabled = useSetting( 'typography.fluid' );
-	const typographyProps = useTypographyProps(
-		attributes,
-		fluidTypographyEnabled
+	const [ fluidTypographySettings, layout ] = useSettings(
+		'typography.fluid',
+		'layout'
 	);
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
 	const isButtonPositionOutside = 'button-outside' === buttonPosition;
 	const hasNoButton = 'no-button' === buttonPosition;
 	const hasOnlyButton = 'button-only' === buttonPosition;
+	const searchFieldRef = useRef();
+	const buttonRef = useRef();
 
 	const units = useCustomUnits( {
 		availableUnits: [ '%', 'px' ],
 		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
 	} );
 
+	useEffect( () => {
+		if ( hasOnlyButton && ! isSelected ) {
+			setAttributes( {
+				isSearchFieldHidden: true,
+			} );
+		}
+	}, [ hasOnlyButton, isSelected, setAttributes ] );
+
+	// Show the search field when width changes.
+	useEffect( () => {
+		if ( ! hasOnlyButton || ! isSelected ) {
+			return;
+		}
+
+		setAttributes( {
+			isSearchFieldHidden: false,
+		} );
+	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
+
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
@@ -147,6 +190,9 @@ export default function SearchEdit( {
 				: undefined,
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
+				: undefined,
+			hasOnlyButton && isSearchFieldHidden
+				? 'wp-block-search__searchfield-hidden'
 				: undefined
 		);
 	};
@@ -160,6 +206,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-outside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -171,6 +218,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-inside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -182,6 +230,19 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'no-button',
+					isSearchFieldHidden: false,
+				} );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Button only' ),
+			isActive: buttonPosition === 'button-only',
+			icon: buttonOnly,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'button-only',
+					isSearchFieldHidden: true,
 				} );
 			},
 		},
@@ -213,7 +274,7 @@ export default function SearchEdit( {
 
 	const renderTextField = () => {
 		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
-		const textFieldClasses = classnames(
+		const textFieldClasses = clsx(
 			'wp-block-search__input',
 			isButtonPositionInside ? undefined : borderProps.className,
 			typographyProps.className
@@ -242,13 +303,14 @@ export default function SearchEdit( {
 				onChange={ ( event ) =>
 					setAttributes( { placeholder: event.target.value } )
 				}
+				ref={ searchFieldRef }
 			/>
 		);
 	};
 
 	const renderButton = () => {
 		// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-search__button',
 			colorProps.className,
 			typographyProps.className,
@@ -263,6 +325,13 @@ export default function SearchEdit( {
 				? { borderRadius }
 				: borderProps.style ),
 		};
+		const handleButtonClick = () => {
+			if ( hasOnlyButton ) {
+				setAttributes( {
+					isSearchFieldHidden: ! isSearchFieldHidden,
+				} );
+			}
+		};
 
 		return (
 			<>
@@ -276,6 +345,8 @@ export default function SearchEdit( {
 								? stripHTML( buttonText )
 								: __( 'Search' )
 						}
+						onClick={ handleButtonClick }
+						ref={ buttonRef }
 					>
 						<Icon icon={ search } />
 					</button>
@@ -283,6 +354,7 @@ export default function SearchEdit( {
 
 				{ ! buttonUseIcon && (
 					<RichText
+						identifier="buttonText"
 						className={ buttonClasses }
 						style={ buttonStyles }
 						aria-label={ __( 'Button text' ) }
@@ -292,6 +364,7 @@ export default function SearchEdit( {
 						onChange={ ( html ) =>
 							setAttributes( { buttonText: html } )
 						}
+						onClick={ handleButtonClick }
 					/>
 				) }
 			</>
@@ -303,7 +376,7 @@ export default function SearchEdit( {
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
-						title={ __( 'Toggle search label' ) }
+						title={ __( 'Show search label' ) }
 						icon={ toggleLabel }
 						onClick={ () => {
 							setAttributes( {
@@ -335,23 +408,29 @@ export default function SearchEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Display Settings' ) }>
-					<BaseControl
-						label={ __( 'Width' ) }
-						id={ unitControlInputId }
+				<PanelBody title={ __( 'Settings' ) }>
+					<VStack
+						className="wp-block-search__inspector-controls"
+						spacing={ 4 }
 					>
 						<UnitControl
-							id={ unitControlInputId }
-							min={ `${ MIN_WIDTH }${ MIN_WIDTH_UNIT }` }
+							__next40pxDefaultSize
+							label={ __( 'Width' ) }
+							id={ unitControlInputId } // unused, kept for backwards compatibility
+							min={
+								isPercentageUnit( widthUnit ) ? 0 : MIN_WIDTH
+							}
+							max={
+								isPercentageUnit( widthUnit ) ? 100 : undefined
+							}
+							step={ 1 }
 							onChange={ ( newWidth ) => {
-								const filteredWidth =
-									widthUnit === '%' &&
-									parseInt( newWidth, 10 ) > 100
-										? 100
-										: newWidth;
-
+								const parsedNewWidth =
+									newWidth === ''
+										? undefined
+										: parseInt( newWidth, 10 );
 								setAttributes( {
-									width: parseInt( filteredWidth, 10 ),
+									width: parsedNewWidth,
 								} );
 							} }
 							onUnitChange={ ( newUnit ) => {
@@ -363,39 +442,40 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							__unstableInputWidth={ '80px' }
+							__unstableInputWidth="80px"
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
-
-						<ButtonGroup
-							className="wp-block-search__components-button-group"
-							aria-label={ __( 'Percentage Width' ) }
+						<ToggleGroupControl
+							label={ __( 'Percentage Width' ) }
+							value={
+								PERCENTAGE_WIDTHS.includes( width ) &&
+								widthUnit === '%'
+									? width
+									: undefined
+							}
+							hideLabelFromVision
+							onChange={ ( newWidth ) => {
+								setAttributes( {
+									width: newWidth,
+									widthUnit: '%',
+								} );
+							} }
+							isBlock
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 						>
-							{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+							{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
 								return (
-									<Button
+									<ToggleGroupControlOption
 										key={ widthValue }
-										isSmall
-										variant={
-											`${ widthValue }%` ===
-											`${ width }${ widthUnit }`
-												? 'primary'
-												: undefined
-										}
-										onClick={ () =>
-											setAttributes( {
-												width: widthValue,
-												widthUnit: '%',
-											} )
-										}
-									>
-										{ widthValue }%
-									</Button>
+										value={ widthValue }
+										label={ `${ widthValue }%` }
+									/>
 								);
 							} ) }
-						</ButtonGroup>
-					</BaseControl>
+						</ToggleGroupControl>
+					</VStack>
 				</PanelBody>
 			</InspectorControls>
 		</>
@@ -464,7 +544,7 @@ export default function SearchEdit( {
 		},
 	} );
 
-	const labelClassnames = classnames(
+	const labelClassnames = clsx(
 		'wp-block-search__label',
 		typographyProps.className
 	);
@@ -475,6 +555,7 @@ export default function SearchEdit( {
 
 			{ showLabel && (
 				<RichText
+					identifier="label"
 					className={ labelClassnames }
 					aria-label={ __( 'Label text' ) }
 					placeholder={ __( 'Add label…' ) }
@@ -487,9 +568,13 @@ export default function SearchEdit( {
 
 			<ResizableBox
 				size={ {
-					width: `${ width }${ widthUnit }`,
+					width:
+						width === undefined
+							? 'auto'
+							: `${ width }${ widthUnit }`,
+					height: 'auto',
 				} }
-				className={ classnames(
+				className={ clsx(
 					'wp-block-search__inside-wrapper',
 					isButtonPositionInside ? borderProps.className : undefined
 				) }
@@ -511,14 +596,15 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside || isButtonPositionOutside ) && (
+				{ ( isButtonPositionInside ||
+					isButtonPositionOutside ||
+					hasOnlyButton ) && (
 					<>
 						{ renderTextField() }
 						{ renderButton() }
 					</>
 				) }
 
-				{ hasOnlyButton && renderButton() }
 				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>
diff --git a/packages/block-library/src/search/edit.native.js b/packages/block-library/src/search/edit.native.js
index 8b315bb21f4a9f..47a7eb98ded60b 100644
--- a/packages/block-library/src/search/edit.native.js
+++ b/packages/block-library/src/search/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, AccessibilityInfo } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -42,6 +42,36 @@ const BUTTON_OPTIONS = [
 	{ value: 'no-button', label: __( 'No button' ) },
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 export default function SearchEdit( {
 	onFocus,
 	isSelected,
@@ -57,8 +87,7 @@ export default function SearchEdit( {
 		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const textInputRef = useRef( null );
 
@@ -71,31 +100,6 @@ export default function SearchEdit( {
 		buttonText,
 	} = attributes;
 
-	/*
-	 * Check if screenreader is enabled and save to state. This is important for
-	 * properly creating accessibilityLabel text.
-	 */
-	useEffect( () => {
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			handleScreenReaderToggled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				setIsScreenReaderEnabled( screenReaderEnabled );
-			}
-		);
-
-		return () => {
-			a11yInfoChangeSubscription.remove();
-		};
-	}, [] );
-
-	const handleScreenReaderToggled = ( screenReaderEnabled ) => {
-		setIsScreenReaderEnabled( screenReaderEnabled );
-	};
-
 	/*
 	 * Called when the value of isSelected changes. Blurs the PlainText component
 	 * used by the placeholder when this block loses focus.
@@ -129,7 +133,7 @@ export default function SearchEdit( {
 	};
 
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			'button-inside' === buttonPosition
 				? 'wp-block-search__button-inside'
@@ -188,7 +192,7 @@ export default function SearchEdit( {
 						} );
 					} }
 					options={ BUTTON_OPTIONS }
-					hideCancelButton={ true }
+					hideCancelButton
 				/>
 				{ buttonPosition !== 'no-button' && (
 					<ToggleControl
@@ -290,7 +294,7 @@ export default function SearchEdit( {
 		return (
 			<View
 				style={ styles.searchInputContainer }
-				accessible={ true }
+				accessible
 				accessibilityRole="none"
 				accessibilityHint={
 					isScreenReaderEnabled
@@ -379,7 +383,7 @@ export default function SearchEdit( {
 
 				{ ! buttonUseIcon && (
 					<View
-						accessible={ true }
+						accessible
 						accessibilityRole="none"
 						accessibilityHint={
 							isScreenReaderEnabled
@@ -391,7 +395,7 @@ export default function SearchEdit( {
 					>
 						<RichText
 							className="wp-block-search__button"
-							identifier="text"
+							identifier="buttonText"
 							tagName="p"
 							style={ richTextButtonStyle }
 							placeholder={ buttonPlaceholderText }
@@ -434,7 +438,7 @@ export default function SearchEdit( {
 
 			{ showLabel && (
 				<View
-					accessible={ true }
+					accessible
 					accessibilityRole="none"
 					accessibilityHint={
 						isScreenReaderEnabled
@@ -445,7 +449,7 @@ export default function SearchEdit( {
 				>
 					<RichText
 						className="wp-block-search__label"
-						identifier="text"
+						identifier="label"
 						tagName="p"
 						style={ styles.richTextLabel }
 						placeholder={ __( 'Add label…' ) }
diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
index 70a9b96d7c12c5..ecc244d3341e1e 100644
--- a/packages/block-library/src/search/editor.scss
+++ b/packages/block-library/src/search/editor.scss
@@ -7,14 +7,19 @@
 }
 
 .wp-block-search {
-	.wp-block-search__button {
+	:where(.wp-block-search__button) {
 		height: auto;
 		border-radius: initial;
 		display: flex;
 		align-items: center;
+		justify-content: center;
+		text-align: center;
 	}
+}
 
-	&__components-button-group {
-		margin-top: 10px;
+.wp-block-search__inspector-controls {
+	.components-base-control {
+		// Counteract the margin added by the block inspector.
+		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 441336316415b9..85770a23268cba 100644
--- a/packages/block-library/src/search/index.js
+++ b/packages/block-library/src/search/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { search as icon } from '@wordpress/icons';
 
 /**
@@ -17,7 +18,10 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		attributes: { buttonText: __( 'Search' ), label: __( 'Search' ) },
+		viewportWidth: 400,
+	},
 	variations,
 	edit,
 };
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 26b6a7585ccc7f..87e12f5d33d079 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -8,7 +8,11 @@
 /**
  * Dynamically renders the `core/search` block.
  *
- * @param array $attributes The block attributes.
+ * @since 6.3.0 Using block.json `viewScript` to register script, and update `view_script_handles()` only when needed.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string The search block markup.
  */
@@ -27,13 +31,12 @@ function render_block_core_search( $attributes ) {
 
 	$input_id            = wp_unique_id( 'wp-block-search__input-' );
 	$classnames          = classnames_for_block_core_search( $attributes );
-	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
-	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
-	$show_input          = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
+	$show_label          = ! empty( $attributes['showLabel'] );
+	$use_icon_button     = ! empty( $attributes['buttonUseIcon'] );
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
+	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();
-	$input_markup        = '';
-	$button_markup       = '';
+	$button              = '';
 	$query_params_markup = '';
 	$inline_styles       = styles_for_block_core_search( $attributes );
 	$color_classes       = get_color_classes_for_block_core_search( $attributes );
@@ -42,44 +45,51 @@ function render_block_core_search( $attributes ) {
 		'button-inside' === $attributes['buttonPosition'];
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
+	// This variable is a constant and its value is always false at this moment.
+	// It is defined this way because some values depend on it, in case it changes in the future.
+	$open_by_default = false;
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
-
-	$label_markup = sprintf(
-		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		esc_attr( $input_id ),
-		$label_inner_html
-	);
-	if ( $show_label && ! empty( $attributes['label'] ) ) {
-		$label_classes = array( 'wp-block-search__label' );
-		if ( ! empty( $typography_classes ) ) {
-			$label_classes[] = $typography_classes;
+	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
+	if ( $label->next_tag() ) {
+		$label->set_attribute( 'for', $input_id );
+		$label->add_class( 'wp-block-search__label' );
+		if ( $show_label && ! empty( $attributes['label'] ) ) {
+			if ( ! empty( $typography_classes ) ) {
+				$label->add_class( $typography_classes );
+			}
+		} else {
+			$label->add_class( 'screen-reader-text' );
 		}
-		$label_markup = sprintf(
-			'<label for="%1$s" class="%2$s" %3$s>%4$s</label>',
-			esc_attr( $input_id ),
-			esc_attr( implode( ' ', $label_classes ) ),
-			$inline_styles['label'],
-			$label_inner_html
-		);
 	}
 
-	if ( $show_input ) {
-		$input_classes = array( 'wp-block-search__input' );
-		if ( $is_button_inside ) {
-			$input_classes[] = $border_color_classes;
-		}
-		if ( ! empty( $typography_classes ) ) {
-			$input_classes[] = $typography_classes;
+	$input         = new WP_HTML_Tag_Processor( sprintf( '<input type="search" name="s" required %s/>', $inline_styles['input'] ) );
+	$input_classes = array( 'wp-block-search__input' );
+	if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+		$input_classes[] = $border_color_classes;
+	}
+	if ( ! empty( $typography_classes ) ) {
+		$input_classes[] = $typography_classes;
+	}
+	if ( $input->next_tag() ) {
+		$input->add_class( implode( ' ', $input_classes ) );
+		$input->set_attribute( 'id', $input_id );
+		$input->set_attribute( 'value', get_search_query() );
+		$input->set_attribute( 'placeholder', $attributes['placeholder'] );
+
+		// If it's interactive, enqueue the script module and add the directives.
+		$is_expandable_searchfield = 'button-only' === $button_position;
+		if ( $is_expandable_searchfield ) {
+			wp_enqueue_script_module( '@wordpress/block-library/search/view' );
+
+			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
+			$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
+
+			// Adding these attributes manually is needed until the Interactivity API
+			// SSR logic is added to core.
+			$input->set_attribute( 'aria-hidden', 'true' );
+			$input->set_attribute( 'tabindex', '-1' );
 		}
-		$input_markup = sprintf(
-			'<input type="search" id="%s" class="wp-block-search__input %s" name="s" value="%s" placeholder="%s" %s required />',
-			$input_id,
-			esc_attr( implode( ' ', $input_classes ) ),
-			get_search_query(),
-			esc_attr( $attributes['placeholder'] ),
-			$inline_styles['input']
-		);
 	}
 
 	if ( count( $query_params ) > 0 ) {
@@ -101,7 +111,6 @@ function render_block_core_search( $attributes ) {
 		if ( ! empty( $typography_classes ) ) {
 			$button_classes[] = $typography_classes;
 		}
-		$aria_label = '';
 
 		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
 			$button_classes[] = $border_color_classes;
@@ -111,24 +120,36 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes[] = 'has-icon';
-
+			$button_classes[]       = 'has-icon';
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+					<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
 				</svg>';
 		}
 
 		// Include the button element class.
 		$button_classes[] = wp_theme_get_element_class_name( 'button' );
-		$button_markup    = sprintf(
-			'<button type="submit" class="%s" %s %s>%s</button>',
-			esc_attr( implode( ' ', $button_classes ) ),
-			$inline_styles['button'],
-			$aria_label,
-			$button_internal_markup
-		);
+		$button           = new WP_HTML_Tag_Processor( sprintf( '<button type="submit" %s>%s</button>', $inline_styles['button'], $button_internal_markup ) );
+
+		if ( $button->next_tag() ) {
+			$button->add_class( implode( ' ', $button_classes ) );
+			if ( 'button-only' === $attributes['buttonPosition'] ) {
+				$button->set_attribute( 'data-wp-bind--aria-label', 'state.ariaLabel' );
+				$button->set_attribute( 'data-wp-bind--aria-controls', 'state.ariaControls' );
+				$button->set_attribute( 'data-wp-bind--aria-expanded', 'context.isSearchInputVisible' );
+				$button->set_attribute( 'data-wp-bind--type', 'state.type' );
+				$button->set_attribute( 'data-wp-on--click', 'actions.openSearchInput' );
+
+				// Adding these attributes manually is needed until the Interactivity
+				// API SSR logic is added to core.
+				$button->set_attribute( 'aria-label', __( 'Expand search field' ) );
+				$button->set_attribute( 'aria-controls', 'wp-block-search__input-' . $input_id );
+				$button->set_attribute( 'aria-expanded', 'false' );
+				$button->set_attribute( 'type', 'button' );
+			} else {
+				$button->set_attribute( 'aria-label', wp_strip_all_tags( $attributes['buttonText'] ) );
+			}
+		}
 	}
 
 	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
@@ -136,22 +157,47 @@ function render_block_core_search( $attributes ) {
 		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
 		esc_attr( $field_markup_classes ),
 		$inline_styles['wrapper'],
-		$input_markup . $query_params_markup . $button_markup
+		$input . $query_params_markup . $button
 	);
 	$wrapper_attributes   = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
+	$form_directives      = '';
+
+	// If it's interactive, add the directives.
+	if ( $is_expandable_searchfield ) {
+		$aria_label_expanded  = __( 'Submit Search' );
+		$aria_label_collapsed = __( 'Expand search field' );
+		$form_context         = wp_interactivity_data_wp_context(
+			array(
+				'isSearchInputVisible' => $open_by_default,
+				'inputId'              => $input_id,
+				'ariaLabelExpanded'    => $aria_label_expanded,
+				'ariaLabelCollapsed'   => $aria_label_collapsed,
+			)
+		);
+		$form_directives      = '
+		 data-wp-interactive="core/search"
+		 ' . $form_context . '
+		 data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
+		 data-wp-on-async--keydown="actions.handleSearchKeydown"
+		 data-wp-on-async--focusout="actions.handleSearchFocusout"
+		';
+	}
 
 	return sprintf(
-		'<form role="search" method="get" action="%s" %s>%s</form>',
+		'<form role="search" method="get" action="%1s" %2s %3s>%4s</form>',
 		esc_url( home_url( '/' ) ),
 		$wrapper_attributes,
-		$label_markup . $field_markup
+		$form_directives,
+		$label . $field_markup
 	);
 }
 
 /**
  * Registers the `core/search` block on the server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_search() {
 	register_block_type_from_metadata(
@@ -166,6 +212,8 @@ function register_block_core_search() {
 /**
  * Builds the correct top level classnames for the 'core/search' block.
  *
+ * @since 5.6.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The classnames used in the block.
@@ -187,7 +235,7 @@ function classnames_for_block_core_search( $attributes ) {
 		}
 
 		if ( 'button-only' === $attributes['buttonPosition'] ) {
-			$classnames[] = 'wp-block-search__button-only';
+			$classnames[] = 'wp-block-search__button-only wp-block-search__searchfield-hidden';
 		}
 	}
 
@@ -210,17 +258,17 @@ function classnames_for_block_core_search( $attributes ) {
  * or not, the generated rule is injected into the appropriate collection of
  * styles for later application in the block's markup.
  *
+ * @since 6.1.0
+ *
  * @param array  $attributes     The block attributes.
  * @param string $property       Border property to generate rule for e.g. width or color.
  * @param string $side           Optional side border. The dictates the value retrieved and final CSS property.
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
- *
- * @return void
  */
 function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
-	$is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false );
+	$is_button_inside = isset( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition'];
 
 	$path = array( 'style', 'border', $property );
 
@@ -257,13 +305,13 @@ function apply_block_core_search_border_style( $attributes, $property, $side, &$
  * injects rules into the provided wrapper, button and input style arrays for
  * uniform "flat" borders or those with individual sides configured.
  *
+ * @since 6.1.0
+ *
  * @param array  $attributes     The block attributes.
  * @param string $property       Border property to generate rule for e.g. width or color.
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
- *
- * @return void
  */
 function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
 	apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );
@@ -280,6 +328,8 @@ function apply_block_core_search_border_styles( $attributes, $property, &$wrappe
  * inner input or button and a second for the inner wrapper should the block
  * be positioning the button "inside".
  *
+ * @since 5.8.0
+ *
  * @param  array $attributes The block attributes.
  *
  * @return array Style HTML attribute.
@@ -294,10 +344,9 @@ function styles_for_block_core_search( $attributes ) {
 	$show_label       = ( isset( $attributes['showLabel'] ) ) && false !== $attributes['showLabel'];
 
 	// Add width styles.
-	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
-	$button_only = ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'];
+	$has_width = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
 
-	if ( $has_width && ! $button_only ) {
+	if ( $has_width ) {
 		$wrapper_styles[] = sprintf(
 			'width: %d%s;',
 			esc_attr( $attributes['width'] ),
@@ -407,7 +456,9 @@ function styles_for_block_core_search( $attributes ) {
 }
 
 /**
- * Returns typography classnames depending on whether there are named font sizes/families .
+ * Returns typography classnames depending on whether there are named font sizes/families.
+ *
+ * @since 6.1.0
  *
  * @param array $attributes The block attributes.
  *
@@ -433,6 +484,8 @@ function get_typography_classes_for_block_core_search( $attributes ) {
  * Returns typography styles to be included in an HTML style tag.
  * This excludes text-decoration, which is applied only to the label and button elements of the search block.
  *
+ * @since 6.1.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string A string of typography CSS declarations.
@@ -483,6 +536,8 @@ function get_typography_styles_for_block_core_search( $attributes ) {
 /**
  * Returns border color classnames depending on whether there are named or custom border colors.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The border color classnames to be applied to the block elements.
@@ -506,6 +561,8 @@ function get_border_color_classes_for_block_core_search( $attributes ) {
 /**
  * Returns color classnames depending on whether there are named or custom text and background colors.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The color classnames to be applied to the block elements.
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 9a713804603ba3..e61fdaea0e6434 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -1,5 +1,8 @@
+$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
+$button-spacing-y: math.div($grid-unit-15, 2); // 6px
+
 .wp-block-search__button {
-	margin-left: 0.625em;
+	margin-left: $button-spacing-x;
 	word-break: normal;
 
 	&.has-icon {
@@ -7,8 +10,10 @@
 	}
 
 	svg {
-		min-width: 1.5em;
-		min-height: 1.5em;
+		min-width: $grid-unit-30;
+		min-height: $grid-unit-30;
+		width: 1.25em;
+		height: 1.25em;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}
@@ -17,8 +22,8 @@
 // These rules are set to zero specificity to keep the default styles for search buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-search__button) {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
+	border: 1px solid $gray-400;
+	padding: $button-spacing-y $button-spacing-x;
 }
 
 .wp-block-search__inside-wrapper {
@@ -33,32 +38,84 @@
 }
 
 .wp-block-search__input {
-	padding: 8px;
+	padding: $grid-unit-10;
 	flex-grow: 1;
 	margin-left: 0;
 	margin-right: 0;
-	min-width: 3em;
-	border: 1px solid #949494;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
+
+	// Hides a redundant extra search icon on Mobile Safari.
+	appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only {
 	.wp-block-search__button {
 		margin-left: 0;
+		// Prevent unintended text wrapping.
+		flex-shrink: 0;
+		max-width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+	}
+
+	.wp-block-search__inside-wrapper {
+		transition-property: width;
+		min-width: 0 !important;
+	}
+
+	.wp-block-search__input {
+		transition-duration: 300ms;
+		flex-basis: 100%;
+	}
+
+	// !important here to override inline styles on button only deselected view.
+	&.wp-block-search__searchfield-hidden {
+		overflow: hidden;
+
+		.wp-block-search__inside-wrapper {
+			overflow: hidden;
+		}
+
+		.wp-block-search__input {
+			width: 0 !important;
+			min-width: 0 !important;
+			padding-left: 0 !important;
+			padding-right: 0 !important;
+			border-left-width: 0 !important;
+			border-right-width: 0 !important;
+			flex-grow: 0;
+			margin: 0;
+			flex-basis: 0;
+		}
 	}
 }
 
+// We are lowering the specificity so that the input element can override the rule for the input element inside the search block.
+:where(.wp-block-search__input) {
+	font-family: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	font-style: inherit;
+}
+
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: 4px;
-	border: 1px solid #949494;
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;
 		border: none;
-		padding: 0 0 0 0.25em;
+		padding: 0 $grid-unit-05;
 
 		&:focus {
 			outline: none;
@@ -67,10 +124,16 @@
 
 	// For lower specificity.
 	:where(.wp-block-search__button) {
-		padding: 0.125em 0.5em;
+		padding: $grid-unit-05 $grid-unit-10;
 	}
 }
 
 .wp-block-search.aligncenter .wp-block-search__inside-wrapper {
 	margin: auto;
 }
+
+.wp-block[data-align="right"] .wp-block-search.wp-block-search__button-only {
+	.wp-block-search__inside-wrapper {
+		float: right;
+	}
+}
diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
index 7d25db45210371..e40797aea57757 100644
--- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
@@ -13,17 +13,26 @@ exports[`Search Block renders block with button inside option 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
       }
     >
       <RCTAztecView
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -52,15 +61,16 @@ exports[`Search Block renders block with button inside option 1`] = `
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -68,13 +78,13 @@ exports[`Search Block renders block with button inside option 1`] = `
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
         false,
@@ -99,8 +109,8 @@ exports[`Search Block renders block with button inside option 1`] = `
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               false,
               undefined,
               undefined,
@@ -112,7 +122,7 @@ exports[`Search Block renders block with button inside option 1`] = `
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -128,17 +138,26 @@ exports[`Search Block renders block with button inside option 1`] = `
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
           }
         >
           <RCTAztecView
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -168,15 +187,16 @@ exports[`Search Block renders block with button inside option 1`] = `
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -185,7 +205,7 @@ exports[`Search Block renders block with button inside option 1`] = `
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -207,17 +227,26 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
       }
     >
       <RCTAztecView
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -246,15 +275,16 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -262,13 +292,13 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -293,8 +323,8 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -306,7 +336,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -314,7 +344,17 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         ]
       }
     >
-      Svg
+      <Svg
+        fill="gray"
+        height={24}
+        onLayout={[Function]}
+        style={{}}
+        viewBox="0 0 24 24"
+        width={24}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        Path
+      </Svg>
     </View>
   </View>
 </View>
@@ -328,7 +368,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
 >
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -353,8 +393,8 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -366,7 +406,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -382,17 +422,26 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
           }
         >
           <RCTAztecView
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -422,15 +471,16 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -439,7 +489,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -461,17 +511,26 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
       }
     >
       <RCTAztecView
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -500,15 +559,16 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -516,13 +576,13 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
   <View
     style={
-      Array [
+      [
         undefined,
         false,
         false,
@@ -547,8 +607,8 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         placeholder="Optional placeholder…"
         scrollEnabled={false}
         style={
-          Array [
-            Array [
+          [
+            [
               undefined,
               undefined,
               undefined,
@@ -560,7 +620,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     </View>
     <View
       style={
-        Array [
+        [
           undefined,
           false,
           undefined,
@@ -576,17 +636,26 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
       >
         <View
           style={
-            Array [
+            [
               undefined,
               undefined,
             ]
           }
         >
           <RCTAztecView
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
             accessible={true}
-            activeFormats={Array []}
+            activeFormats={[]}
             blockType={
-              Object {
+              {
                 "tag": "p",
               }
             }
@@ -616,15 +685,16 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
-              Object {
+              {
                 "backgroundColor": undefined,
                 "maxWidth": NaN,
                 "minHeight": 0,
               }
             }
             text={
-              Object {
+              {
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
@@ -633,7 +703,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
               }
             }
             textAlign="center"
-            triggerKeyCodes={Array []}
+            triggerKeyCodes={[]}
           />
         </View>
       </View>
@@ -655,17 +725,26 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
         ]
       }
     >
       <RCTAztecView
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessible={true}
-        activeFormats={Array []}
+        activeFormats={[]}
         blockType={
-          Object {
+          {
             "tag": "p",
           }
         }
@@ -694,15 +773,16 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
-          Object {
+          {
             "backgroundColor": undefined,
             "maxWidth": undefined,
             "minHeight": 0,
           }
         }
         text={
-          Object {
+          {
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
@@ -710,7 +790,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
             "text": "<p>Search</p>",
           }
         }
-        triggerKeyCodes={Array []}
+        triggerKeyCodes={[]}
       />
     </View>
   </View>
@@ -732,8 +812,8 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
       placeholder="Optional placeholder…"
       scrollEnabled={false}
       style={
-        Array [
-          Array [
+        [
+          [
             undefined,
             undefined,
             undefined,
diff --git a/packages/block-library/src/search/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/search/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..fd5c0ad11e064d
--- /dev/null
+++ b/packages/block-library/src/search/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Search block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:search {"label":"Search","buttonText":"Search"} /--></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/search/test/transforms.native.js b/packages/block-library/src/search/test/transforms.native.js
new file mode 100644
index 00000000000000..09348d9a794b59
--- /dev/null
+++ b/packages/block-library/src/search/test/transforms.native.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Search';
+const initialHtml = `
+<!-- wp:search {"label":"Search","buttonText":"Search"} /-->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js
index b54048b609eb33..8438dd7148a013 100644
--- a/packages/block-library/src/search/utils.js
+++ b/packages/block-library/src/search/utils.js
@@ -4,7 +4,6 @@
 export const PC_WIDTH_DEFAULT = 50;
 export const PX_WIDTH_DEFAULT = 350;
 export const MIN_WIDTH = 220;
-export const MIN_WIDTH_UNIT = 'px';
 
 /**
  * Returns a boolean whether passed unit is percentage
diff --git a/packages/block-library/src/search/view.js b/packages/block-library/src/search/view.js
new file mode 100644
index 00000000000000..0e4c462a2e3213
--- /dev/null
+++ b/packages/block-library/src/search/view.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+const { actions } = store(
+	'core/search',
+	{
+		state: {
+			get ariaLabel() {
+				const {
+					isSearchInputVisible,
+					ariaLabelCollapsed,
+					ariaLabelExpanded,
+				} = getContext();
+				return isSearchInputVisible
+					? ariaLabelExpanded
+					: ariaLabelCollapsed;
+			},
+			get ariaControls() {
+				const { isSearchInputVisible, inputId } = getContext();
+				return isSearchInputVisible ? null : inputId;
+			},
+			get type() {
+				const { isSearchInputVisible } = getContext();
+				return isSearchInputVisible ? 'submit' : 'button';
+			},
+			get tabindex() {
+				const { isSearchInputVisible } = getContext();
+				return isSearchInputVisible ? '0' : '-1';
+			},
+		},
+		actions: {
+			openSearchInput( event ) {
+				const ctx = getContext();
+				const { ref } = getElement();
+				if ( ! ctx.isSearchInputVisible ) {
+					event.preventDefault();
+					ctx.isSearchInputVisible = true;
+					ref.parentElement.querySelector( 'input' ).focus();
+				}
+			},
+			closeSearchInput() {
+				const ctx = getContext();
+				ctx.isSearchInputVisible = false;
+			},
+			handleSearchKeydown( event ) {
+				const { ref } = getElement();
+				// If Escape close the menu.
+				if ( event?.key === 'Escape' ) {
+					actions.closeSearchInput();
+					ref.querySelector( 'button' ).focus();
+				}
+			},
+			handleSearchFocusout( event ) {
+				const { ref } = getElement();
+				// If focus is outside search form, and in the document, close menu
+				// event.target === The element losing focus
+				// event.relatedTarget === The element receiving focus (if any)
+				// When focusout is outside the document,
+				// `window.document.activeElement` doesn't change.
+				if (
+					! ref.contains( event.relatedTarget ) &&
+					event.target !== window.document.activeElement
+				) {
+					actions.closeSearchInput();
+				}
+			},
+		},
+	},
+	{ lock: true }
+);
diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index bee358d208516d..926d978b7e4d59 100644
--- a/packages/block-library/src/separator/block.json
+++ b/packages/block-library/src/separator/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/separator",
 	"title": "Separator",
 	"category": "design",
@@ -11,6 +11,11 @@
 		"opacity": {
 			"type": "string",
 			"default": "alpha-channel"
+		},
+		"tagName": {
+			"type": "string",
+			"enum": [ "hr", "div" ],
+			"default": "hr"
 		}
 	},
 	"supports": {
@@ -28,6 +33,9 @@
 		},
 		"spacing": {
 			"margin": [ "top", "bottom" ]
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [
diff --git a/packages/block-library/src/separator/deprecated.js b/packages/block-library/src/separator/deprecated.js
index 43cad97fd9ee9b..7ce442813e2f78 100644
--- a/packages/block-library/src/separator/deprecated.js
+++ b/packages/block-library/src/separator/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const v1 = {
 		// using color, not backgroundColor
 		const colorClass = getColorClassName( 'color', color );
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-text-color has-background': color || customColor,
 			[ backgroundClass ]: backgroundClass,
 			[ colorClass ]: colorClass,
@@ -49,6 +49,7 @@ const v1 = {
 			style: customColor
 				? { color: { background: customColor } }
 				: undefined,
+			tagName: 'hr',
 		};
 	},
 };
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index 5ce522737f4508..c4b832c66158d0 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -1,25 +1,33 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
 import {
 	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
+	InspectorControls,
 } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
 
+const htmlElementMessages = {
+	div: __(
+		'The <div> element should only be used if the separator is a design element that should not be announced.'
+	),
+};
+
 export default function SeparatorEdit( { attributes, setAttributes } ) {
-	const { backgroundColor, opacity, style } = attributes;
+	const { backgroundColor, opacity, style, tagName } = attributes;
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
 	const hasCustomColor = !! style?.color?.background;
@@ -30,7 +38,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || currentColor,
 			[ colorClass ]: colorClass,
@@ -44,10 +52,27 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 		color: currentColor,
 		backgroundColor: currentColor,
 	};
+	const Wrapper = tagName === 'hr' ? HorizontalRule : tagName;
 
 	return (
 		<>
-			<HorizontalRule
+			<InspectorControls group="advanced">
+				<SelectControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<hr>)' ), value: 'hr' },
+						{ label: '<div>', value: 'div' },
+					] }
+					value={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					help={ htmlElementMessages[ tagName ] }
+				/>
+			</InspectorControls>
+			<Wrapper
 				{ ...useBlockProps( {
 					className,
 					style: hasCustomColor ? styles : undefined,
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
index 220c6bd9d80e38..24e940684279e8 100644
--- a/packages/block-library/src/separator/editor.scss
+++ b/packages/block-library/src/separator/editor.scss
@@ -2,11 +2,4 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
-
-	// This is also set in style.scss, but needs a higher specificity in editor
-	// due to the way that color block supports adds additional background color styles.
-	&.wp-block-separator.is-style-dots {
-		background: none !important;
-		border: none;
-	}
 }
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
index 55a67c980c24fc..06a54b7519ac17 100644
--- a/packages/block-library/src/separator/save.js
+++ b/packages/block-library/src/separator/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import {
 } from '@wordpress/block-editor';
 
 export default function separatorSave( { attributes } ) {
-	const { backgroundColor, style, opacity } = attributes;
+	const { backgroundColor, style, opacity, tagName: Tag } = attributes;
 	const customColor = style?.color?.background;
 	const colorProps = getColorClassesAndStyles( attributes );
 	// The hr support changing color using border-color, since border-color
@@ -23,7 +23,7 @@ export default function separatorSave( { attributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || customColor,
 			[ colorClass ]: colorClass,
@@ -37,5 +37,5 @@ export default function separatorSave( { attributes } ) {
 		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
+	return <Tag { ...useBlockProps.save( { className, style: styles } ) } />;
 }
diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index e7965c8efe4daf..65e463bc513f48 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/packages/block-library/src/separator/style.scss
@@ -1,30 +1,37 @@
 .wp-block-separator {
-	border-top: 1px solid currentColor;
-	border-bottom: 1px solid currentColor;
+	border-top: 2px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
-	// Unset the left and right borders by default, otherwise some browsers will render them as "inset".
+	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
 	border-left: none;
 	border-right: none;
+	border-bottom: none;
+}
 
-	// Dots style
-	&.is-style-dots {
-		// Override any background themes often set on the hr tag for this style.
-		// also override the color set in the editor since it's intented for normal HR
-		background: none !important;
-		border: none;
-		text-align: center;
-		line-height: 1;
-		height: auto;
+// Dots block style variation
+:root :where(.wp-block-separator.is-style-dots) {
+	text-align: center;
+	line-height: 1;
+	height: auto;
 
-		&::before {
-			content: "\00b7 \00b7 \00b7";
-			color: currentColor;
-			font-size: 1.5em;
-			letter-spacing: 2em;
-			/*rtl:ignore*/
-			padding-left: 2em;
-			font-family: serif;
-		}
+	&::before {
+		content: "\00b7 \00b7 \00b7";
+		color: currentColor;
+		font-size: 1.5em;
+		letter-spacing: 2em;
+		/*rtl:ignore*/
+		padding-left: 2em;
+		font-family: serif;
 	}
 }
+
+// The following overrides should be enforced regardless of global styles.
+// The dots block style uses a pseudo element to render the dots. Background
+// color and borders would break this aesthetic.
+.wp-block-separator.is-style-dots {
+	// Override any background themes often set on the hr tag for this style.
+	// also override the color set in the editor since it's intended for normal HR
+	background: none !important;
+	// Important required to ensure dots does not get a border.
+	border: none !important;
+}
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..8c72b31fb5086e
--- /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/__snapshots__/transforms.native.js.snap b/packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..6ffb73467852d9
--- /dev/null
+++ b/packages/block-library/src/separator/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Separator block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Separator block transforms to Spacer block 1`] = `
+"<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;
diff --git a/packages/block-library/src/separator/test/edit.js b/packages/block-library/src/separator/test/edit.js
index a37a0ebbe6dd67..33719b24925cd8 100644
--- a/packages/block-library/src/separator/test/edit.js
+++ b/packages/block-library/src/separator/test/edit.js
@@ -23,6 +23,7 @@ const defaultAttributes = {
 	opacity: 'alpha-channel',
 	style: {},
 	className: '',
+	tagName: 'hr',
 };
 const defaultProps = {
 	attributes: defaultAttributes,
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/separator/test/transforms.native.js b/packages/block-library/src/separator/test/transforms.native.js
new file mode 100644
index 00000000000000..a5250025398d0e
--- /dev/null
+++ b/packages/block-library/src/separator/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Separator';
+const initialHtml = `
+<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Spacer', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/separator/transforms.js b/packages/block-library/src/separator/transforms.js
index 06d9d667caf63d..1f40cb5dba8b5e 100644
--- a/packages/block-library/src/separator/transforms.js
+++ b/packages/block-library/src/separator/transforms.js
@@ -18,6 +18,17 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ], // Transform to Spacer.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/spacer', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
 };
 
 export default transforms;
diff --git a/packages/block-library/src/shortcode/block.json b/packages/block-library/src/shortcode/block.json
index 5b36d141dd93eb..22d838a7198e1e 100644
--- a/packages/block-library/src/shortcode/block.json
+++ b/packages/block-library/src/shortcode/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/shortcode",
 	"title": "Shortcode",
 	"category": "widgets",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"text": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js
index aecebd115a983f..b3063077fe3085 100644
--- a/packages/block-library/src/shortcode/edit.js
+++ b/packages/block-library/src/shortcode/edit.js
@@ -4,29 +4,25 @@
 import { __ } from '@wordpress/i18n';
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, shortcode } from '@wordpress/icons';
+import { Placeholder } from '@wordpress/components';
+import { shortcode } from '@wordpress/icons';
 
 export default function ShortcodeEdit( { attributes, setAttributes } ) {
 	const instanceId = useInstanceId( ShortcodeEdit );
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
-		<div { ...useBlockProps( { className: 'components-placeholder' } ) }>
-			<label
-				htmlFor={ inputId }
-				className="components-placeholder__label"
-			>
-				<Icon icon={ shortcode } />
-				{ __( 'Shortcode' ) }
-			</label>
-			<PlainText
-				className="blocks-shortcode__textarea"
-				id={ inputId }
-				value={ attributes.text }
-				aria-label={ __( 'Shortcode text' ) }
-				placeholder={ __( 'Write shortcode here…' ) }
-				onChange={ ( text ) => setAttributes( { text } ) }
-			/>
+		<div { ...useBlockProps() }>
+			<Placeholder icon={ shortcode } label={ __( 'Shortcode' ) }>
+				<PlainText
+					className="blocks-shortcode__textarea"
+					id={ inputId }
+					value={ attributes.text }
+					aria-label={ __( 'Shortcode text' ) }
+					placeholder={ __( 'Write shortcode here…' ) }
+					onChange={ ( text ) => setAttributes( { text } ) }
+				/>
+			</Placeholder>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
index da4a806374e678..6e7f482ad19f4f 100644
--- a/packages/block-library/src/shortcode/editor.scss
+++ b/packages/block-library/src/shortcode/editor.scss
@@ -1,13 +1,8 @@
-[data-type="core/shortcode"] {
-	.block-editor-plain-text {
-		max-height: 250px;
-	}
-
-	&.components-placeholder {
-		min-height: 0;
-	}
-}
-
+// The editing view for the Shortcode block is equivalent to block UI.
+// Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {
-	@include input-control;
+	box-sizing: border-box;
+	max-height: 250px;
+	resize: none;
+	@include editor-input-reset();
 }
diff --git a/packages/block-library/src/shortcode/index.php b/packages/block-library/src/shortcode/index.php
index 97a40b386d9c92..d96acfc55fa64d 100644
--- a/packages/block-library/src/shortcode/index.php
+++ b/packages/block-library/src/shortcode/index.php
@@ -8,6 +8,8 @@
 /**
  * Performs wpautop() on the shortcode block content.
  *
+ * @since 5.0.0
+ *
  * @param array  $attributes The block attributes.
  * @param string $content    The block content.
  *
@@ -19,6 +21,8 @@ function render_block_core_shortcode( $attributes, $content ) {
 
 /**
  * Registers the `core/shortcode` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_shortcode() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/shortcode/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/shortcode/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..a9fcc98410d45a
--- /dev/null
+++ b/packages/block-library/src/shortcode/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shortcode block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Shortcode block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/shortcode/test/edit.native.js b/packages/block-library/src/shortcode/test/edit.native.js
index 46c7dbddef2c97..372956a2242a0d 100644
--- a/packages/block-library/src/shortcode/test/edit.native.js
+++ b/packages/block-library/src/shortcode/test/edit.native.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	getEditorHtml,
-	initializeEditor,
-	fireEvent,
-	waitFor,
-} from 'test/helpers';
+import { getEditorHtml, initializeEditor, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -28,12 +23,11 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByLabelText( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,22 +37,25 @@ describe( 'Shortcode block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
+		fireEvent.press( await screen.findByText( 'Shortcode' ) );
 
-		expect( getByLabelText( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
+		);
+		expect( shortcodeBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'edits content', async () => {
-		const { getByLabelText, getByPlaceholderText } = await initializeEditor(
-			{
-				initialHtml: '<!-- wp:shortcode /-->',
-			}
+		const screen = await initializeEditor( {
+			initialHtml: '<!-- wp:shortcode /-->',
+		} );
+		const [ shortcodeBlock ] = screen.getAllByLabelText(
+			/Shortcode Block\. Row 1/
 		);
-		const shortcodeBlock = getByLabelText( /Shortcode Block\. Row 1/ );
 		fireEvent.press( shortcodeBlock );
 
-		const textField = getByPlaceholderText( 'Add a shortcode…' );
+		const textField = screen.getByPlaceholderText( 'Add a shortcode…' );
 		fireEvent( textField, 'focus' );
 		fireEvent( textField, 'onChange', {
 			nativeEvent: {
diff --git a/packages/block-library/src/shortcode/test/transforms.native.js b/packages/block-library/src/shortcode/test/transforms.native.js
new file mode 100644
index 00000000000000..7a4d05c684cfaa
--- /dev/null
+++ b/packages/block-library/src/shortcode/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Shortcode';
+const initialHtml = `
+<!-- wp:shortcode -->
+[youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]
+<!-- /wp:shortcode -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index f7efcb72159ff0..3bdbdc1b809ab1 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-logo",
 	"title": "Site Logo",
 	"category": "theme",
-	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
+	"description": "Display an image to represent this site. Update this block and the changes apply everywhere.",
 	"textdomain": "default",
 	"attributes": {
 		"width": {
@@ -40,7 +40,14 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 0d752a5dbae31f..36c217c1bf0c79 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,11 +11,9 @@ import {
 	createInterpolateElement,
 	useEffect,
 	useState,
-	useRef,
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	MenuItem,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
@@ -24,17 +22,23 @@ import {
 	ToolbarButton,
 	Placeholder,
 	Button,
+	DropZone,
+	FlexItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	BlockControls,
 	InspectorControls,
 	MediaPlaceholder,
+	MediaUpload,
+	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
-	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -44,11 +48,6 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import useClientWidth from '../image/use-client-width';
-
-/**
- * Module constants
- */
 import { MIN_SIZE } from '../image/constants';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -57,7 +56,6 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 const SiteLogo = ( {
 	alt,
 	attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
-	containerRef,
 	isSelected,
 	setAttributes,
 	setLogo,
@@ -68,29 +66,22 @@ const SiteLogo = ( {
 	setIcon,
 	canUserEdit,
 } ) => {
-	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( 'custom-logo-link', {
-		'is-transient': isBlobURL( logoUrl ),
-	} );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
+		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
 			'root',
 			'__unstableBase'
 		);
 		return {
 			title: siteEntities?.name,
-			...Object.fromEntries(
-				Object.entries( getSettings() ).filter( ( [ key ] ) =>
-					[ 'imageEditing', 'maxWidth' ].includes( key )
-				)
-			),
+			imageEditing: settings.imageEditing,
+			maxWidth: settings.maxWidth,
 		};
 	}, [] );
 
@@ -118,20 +109,20 @@ const SiteLogo = ( {
 	}
 
 	const img = (
-		<img
-			className="custom-logo"
-			src={ logoUrl }
-			alt={ alt }
-			onLoad={ ( event ) => {
-				setNaturalSize(
-					Object.fromEntries(
-						Object.entries( event.target ).filter( ( [ key ] ) =>
-							[ 'naturalWidth', 'naturalHeight' ].includes( key )
-						)
-					)
-				);
-			} }
-		/>
+		<>
+			<img
+				className="custom-logo"
+				src={ logoUrl }
+				alt={ alt }
+				onLoad={ ( event ) => {
+					setNaturalSize( {
+						naturalWidth: event.target.naturalWidth,
+						naturalHeight: event.target.naturalHeight,
+					} );
+				} }
+			/>
+			{ isBlobURL( logoUrl ) && <Spinner /> }
+		</>
 	);
 
 	let imgWrapper = img;
@@ -143,7 +134,7 @@ const SiteLogo = ( {
 			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
-				className={ classes }
+				className="custom-logo-link"
 				rel="home"
 				title={ title }
 				onClick={ ( event ) => event.preventDefault() }
@@ -154,14 +145,7 @@ const SiteLogo = ( {
 		);
 	}
 
-	let imageWidthWithinContainer;
-
-	if ( clientWidth && naturalWidth && naturalHeight ) {
-		const exceedMaxWidth = naturalWidth > clientWidth;
-		imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth;
-	}
-
-	if ( ! isResizable || ! imageWidthWithinContainer ) {
+	if ( ! isResizable || ! naturalWidth || ! naturalHeight ) {
 		return <div style={ { width, height } }>{ imgWrapper }</div>;
 	}
 
@@ -222,27 +206,20 @@ const SiteLogo = ( {
 
 	const imgEdit =
 		canEditImage && isEditingImage ? (
-			<ImageEditingProvider
+			<ImageEditor
 				id={ logoId }
 				url={ logoUrl }
-				naturalWidth={ naturalWidth }
+				width={ currentWidth }
+				height={ currentHeight }
 				naturalHeight={ naturalHeight }
-				clientWidth={ clientWidth }
+				naturalWidth={ naturalWidth }
 				onSaveImage={ ( imageAttributes ) => {
 					setLogo( imageAttributes.id );
 				} }
-				isEditing={ isEditingImage }
-				onFinishEditing={ () => setIsEditingImage( false ) }
-			>
-				<ImageEditor
-					url={ logoUrl }
-					width={ currentWidth }
-					height={ currentHeight }
-					clientWidth={ clientWidth }
-					naturalHeight={ naturalHeight }
-					naturalWidth={ naturalWidth }
-				/>
-			</ImageEditingProvider>
+				onFinishEditing={ () => {
+					setIsEditingImage( false );
+				} }
+			/>
 		) : (
 			<ResizableBox
 				size={ {
@@ -274,6 +251,14 @@ const SiteLogo = ( {
 			</ResizableBox>
 		);
 
+	// Support the previous location for the Site Icon settings. To be removed
+	// when the required WP core version for Gutenberg is >= 6.5.0.
+	const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
+
+	const siteIconSettingsUrl = shouldUseNewUrl
+		? siteUrl + '/wp-admin/options-general.php'
+		: siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';
+
 	const syncSiteIconHelpText = createInterpolateElement(
 		__(
 			'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'
@@ -282,10 +267,7 @@ const SiteLogo = ( {
 			a: (
 				// eslint-disable-next-line jsx-a11y/anchor-has-content
 				<a
-					href={
-						siteUrl +
-						'/wp-admin/customize.php?autofocus[section]=title_tagline'
-					}
+					href={ siteIconSettingsUrl }
 					target="_blank"
 					rel="noopener noreferrer"
 				/>
@@ -298,6 +280,8 @@ const SiteLogo = ( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Image width' ) }
 						onChange={ ( newWidth ) =>
 							setAttributes( { width: newWidth } )
@@ -312,6 +296,7 @@ const SiteLogo = ( {
 						disabled={ ! isResizable }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link image to home' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
@@ -319,6 +304,7 @@ const SiteLogo = ( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {
@@ -332,7 +318,8 @@ const SiteLogo = ( {
 					{ canUserEdit && (
 						<>
 							<ToggleControl
-								label={ __( 'Use as site icon' ) }
+								__nextHasNoMarginBottom
+								label={ __( 'Use as Site Icon' ) }
 								onChange={ ( value ) => {
 									setAttributes( { shouldSyncIcon: value } );
 									setIcon( value ? logoId : undefined );
@@ -358,6 +345,49 @@ const SiteLogo = ( {
 	);
 };
 
+// This is a light wrapper around MediaReplaceFlow because the block has two
+// different MediaReplaceFlows, one for the inspector and one for the toolbar.
+function SiteLogoReplaceFlow( {
+	mediaURL,
+	onRemoveLogo,
+	...mediaReplaceProps
+} ) {
+	return (
+		<MediaReplaceFlow
+			{ ...mediaReplaceProps }
+			mediaURL={ mediaURL }
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			accept={ ACCEPT_MEDIA_STRING }
+			onReset={ onRemoveLogo }
+		/>
+	);
+}
+
+const InspectorLogoPreview = ( { mediaItemData = {}, itemGroupProps } ) => {
+	const {
+		alt_text: alt,
+		source_url: logoUrl,
+		slug: logoSlug,
+		media_details: logoMediaDetails,
+	} = mediaItemData;
+	const logoLabel = logoMediaDetails?.sizes?.full?.file || logoSlug;
+	return (
+		<ItemGroup { ...itemGroupProps } as="span">
+			<HStack justify="flex-start" as="span">
+				<img src={ logoUrl } alt={ alt } />
+				<FlexItem as="span">
+					<Truncate
+						numberOfLines={ 1 }
+						className="block-library-site-logo__inspector-media-replace-title"
+					>
+						{ logoLabel }
+					</Truncate>
+				</FlexItem>
+			</HStack>
+		</ItemGroup>
+	);
+};
+
 export default function LogoEdit( {
 	attributes,
 	className,
@@ -365,8 +395,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const ref = useRef();
-
 	const {
 		siteLogoId,
 		canUserEdit,
@@ -377,7 +405,10 @@ export default function LogoEdit( {
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const _canUserEdit = canUser( 'update', 'settings' );
+		const _canUserEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const siteSettings = _canUserEdit
 			? getEditedEntityRecord( 'root', 'site' )
 			: undefined;
@@ -392,7 +423,7 @@ export default function LogoEdit( {
 				context: 'view',
 			} );
 		const _isRequestingMediaItem =
-			_siteLogoId &&
+			!! _siteLogoId &&
 			! select( coreStore ).hasFinishedResolution( 'getMedia', [
 				_siteLogoId,
 				{ context: 'view' },
@@ -407,6 +438,8 @@ export default function LogoEdit( {
 			siteIconId: _siteIconId,
 		};
 	}, [] );
+	const { getSettings } = useSelect( blockEditorStore );
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -453,6 +486,7 @@ export default function LogoEdit( {
 
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
+			setTemporaryURL( media.url );
 			setLogo( undefined );
 			return;
 		}
@@ -468,19 +502,35 @@ export default function LogoEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
-	const controls = canUserEdit && logoUrl && (
+	const onFilesDrop = ( filesList ) => {
+		getSettings().mediaUpload( {
+			allowedTypes: ALLOWED_MEDIA_TYPES,
+			filesList,
+			onFileChange( [ image ] ) {
+				if ( isBlobURL( image?.url ) ) {
+					setTemporaryURL( image.url );
+					return;
+				}
+				onInitialSelectLogo( image );
+			},
+			onError: onUploadError,
+			onRemoveLogo,
+		} );
+	};
+
+	const mediaReplaceFlowProps = {
+		mediaURL: logoUrl,
+		name: ! logoUrl ? __( 'Choose logo' ) : __( 'Replace' ),
+		onSelect: onSelectLogo,
+		onError: onUploadError,
+		onRemoveLogo,
+	};
+	const controls = canUserEdit && (
 		<BlockControls group="other">
-			<MediaReplaceFlow
-				mediaURL={ logoUrl }
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				accept={ ACCEPT_MEDIA_STRING }
-				onSelect={ onSelectLogo }
-				onError={ onUploadError }
-			>
-				<MenuItem onClick={ onRemoveLogo }>{ __( 'Reset' ) }</MenuItem>
-			</MediaReplaceFlow>
+			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
 	);
 
@@ -489,27 +539,37 @@ export default function LogoEdit( {
 	if ( isLoading ) {
 		logoImage = <Spinner />;
 	}
-	if ( !! logoUrl ) {
+
+	// Reset temporary url when logoUrl is available.
+	useEffect( () => {
+		if ( logoUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ logoUrl, temporaryURL ] );
+
+	if ( !! logoUrl || !! temporaryURL ) {
 		logoImage = (
-			<SiteLogo
-				alt={ alt }
-				attributes={ attributes }
-				className={ className }
-				containerRef={ ref }
-				isSelected={ isSelected }
-				setAttributes={ setAttributes }
-				logoUrl={ logoUrl }
-				setLogo={ setLogo }
-				logoId={ mediaItemData?.id || siteLogoId }
-				siteUrl={ url }
-				setIcon={ setIcon }
-				iconId={ siteIconId }
-				canUserEdit={ canUserEdit }
-			/>
+			<>
+				<SiteLogo
+					alt={ alt }
+					attributes={ attributes }
+					className={ className }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+					logoUrl={ temporaryURL || logoUrl }
+					setLogo={ setLogo }
+					logoId={ mediaItemData?.id || siteLogoId }
+					siteUrl={ url }
+					setIcon={ setIcon }
+					iconId={ siteIconId }
+					canUserEdit={ canUserEdit }
+				/>
+				{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }
+			</>
 		);
 	}
 	const placeholder = ( content ) => {
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className
 		);
@@ -518,7 +578,7 @@ export default function LogoEdit( {
 			<Placeholder
 				className={ placeholderClassName }
 				preview={ logoImage }
-				withIllustration={ true }
+				withIllustration
 				style={ {
 					width,
 				} }
@@ -528,31 +588,83 @@ export default function LogoEdit( {
 		);
 	};
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-default-size': ! width,
+		'is-transient': temporaryURL,
 	} );
 
-	const blockProps = useBlockProps( {
-		ref,
-		className: classes,
-	} );
-
-	const label = __( 'Add a site logo' );
+	const blockProps = useBlockProps( { className: classes } );
+
+	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
+		<InspectorControls>
+			<PanelBody title={ __( 'Media' ) }>
+				<div className="block-library-site-logo__inspector-media-replace-container">
+					{ ! canUserEdit && !! logoUrl && (
+						<InspectorLogoPreview
+							mediaItemData={ mediaItemData }
+							itemGroupProps={ {
+								isBordered: true,
+								className:
+									'block-library-site-logo__inspector-readonly-logo-preview',
+							} }
+						/>
+					) }
+					{ canUserEdit && !! logoUrl && (
+						<SiteLogoReplaceFlow
+							{ ...mediaReplaceFlowProps }
+							name={
+								<InspectorLogoPreview
+									mediaItemData={ mediaItemData }
+								/>
+							}
+							popoverProps={ {} }
+						/>
+					) }
+					{ canUserEdit && ! logoUrl && (
+						<MediaUploadCheck>
+							<MediaUpload
+								onSelect={ onInitialSelectLogo }
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								render={ ( { open } ) => (
+									<div className="block-library-site-logo__inspector-upload-container">
+										<Button
+											__next40pxDefaultSize
+											onClick={ open }
+											variant="secondary"
+										>
+											{ isLoading ? (
+												<Spinner />
+											) : (
+												__( 'Choose logo' )
+											) }
+										</Button>
+										<DropZone onFilesDrop={ onFilesDrop } />
+									</div>
+								) }
+							/>
+						</MediaUploadCheck>
+					) }
+				</div>
+			</PanelBody>
+		</InspectorControls>
+	);
 
 	return (
 		<div { ...blockProps }>
 			{ controls }
-			{ !! logoUrl && logoImage }
-			{ ! logoUrl && ! canUserEdit && (
-				<Placeholder className="site-logo_placeholder">
-					{ !! isLoading && (
+			{ mediaInspectorPanel }
+			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
+			{ ( isLoading ||
+				( ! temporaryURL && ! logoUrl && ! canUserEdit ) ) && (
+				<Placeholder className="site-logo_placeholder" withIllustration>
+					{ isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>
 					) }
 				</Placeholder>
 			) }
-			{ ! logoUrl && canUserEdit && (
+			{ ! isLoading && ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
@@ -562,11 +674,12 @@ export default function LogoEdit( {
 					mediaLibraryButton={ ( { open } ) => {
 						return (
 							<Button
+								__next40pxDefaultSize
 								icon={ upload }
 								variant="primary"
-								label={ label }
+								label={ __( 'Choose logo' ) }
 								showTooltip
-								tooltipPosition="top center"
+								tooltipPosition="middle right"
 								onClick={ () => {
 									open();
 								} }
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index e13fc68abc4c3e..2f9d1917079bec 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -17,10 +17,6 @@
 		&:focus {
 			box-shadow: none;
 		}
-
-		&.is-transient img {
-			opacity: 0.3;
-		}
 	}
 
 	img {
@@ -28,15 +24,32 @@
 		height: auto;
 		max-width: 100%;
 	}
+
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Shown while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			margin: 0;
+		}
+	}
 }
 
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
-	// Match the default logo size.
+
 	&.is-default-size .components-placeholder {
-		height: 120px;
-		width: 120px;
+		height: 60px;
+		width: 60px;
 	}
 
 	// Inherit radius.
@@ -54,7 +67,7 @@
 		border-radius: inherit;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
-		// @todo: resizing is currently only possible by adding an image, resizing,
+		// @todo resizing is currently only possible by adding an image, resizing,
 		// and then removing the image again. We might want to enable resizing on the
 		// placeholder itself.
 		min-height: $grid-unit-60;
@@ -75,6 +88,7 @@
 		// Style the upload button.
 		.components-button.components-button {
 			padding: 0;
+			margin: auto;
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -93,3 +107,61 @@
 		}
 	}
 }
+
+.block-library-site-logo__inspector-upload-container {
+	position: relative;
+	// Since there is no option to skip rendering the drag'n'drop icon in drop
+	// zone, we hide it for now.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+}
+
+.block-library-site-logo__inspector-upload-container,
+.block-library-site-logo__inspector-media-replace-container {
+	button.components-button {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 1px $gray-400;
+		width: 100%;
+		display: block;
+		height: $grid-unit-50;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-library-site-logo__inspector-media-replace-title {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
+}
+
+.block-library-site-logo__inspector-media-replace-container {
+	.components-dropdown {
+		display: block;
+	}
+
+	img {
+		width: 20px;
+		min-width: 20px;
+		aspect-ratio: 1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+		border-radius: 50% !important;
+	}
+
+	.block-library-site-logo__inspector-readonly-logo-preview {
+		padding: 6px 12px;
+		display: flex;
+		height: $grid-unit-50;
+	}
+}
diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js
index 68d8eb6f8b9300..fc10df08e17dee 100644
--- a/packages/block-library/src/site-logo/index.js
+++ b/packages/block-library/src/site-logo/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {},
 	edit,
 	transforms,
 };
diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php
index 35e199d59ded0d..915563461e30ce 100644
--- a/packages/block-library/src/site-logo/index.php
+++ b/packages/block-library/src/site-logo/index.php
@@ -8,12 +8,14 @@
 /**
  * Renders the `core/site-logo` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
  */
 function render_block_core_site_logo( $attributes ) {
-	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
+	$adjust_width_height_filter = static function ( $image ) use ( $attributes ) {
 		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}
@@ -39,8 +41,13 @@ function render_block_core_site_logo( $attributes ) {
 	if ( $attributes['isLink'] && '_blank' === $attributes['linkTarget'] ) {
 		// Add the link target after the rel="home".
 		// Add an aria-label for informing that the page opens in a new tab.
-		$aria_label  = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"';
-		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . esc_attr( $attributes['linkTarget'] ) . '"' . $aria_label, $custom_logo );
+		$processor = new WP_HTML_Tag_Processor( $custom_logo );
+		$processor->next_tag( 'a' );
+		if ( 'home' === $processor->get_attribute( 'rel' ) ) {
+			$processor->set_attribute( 'aria-label', __( '(Home link, opens in a new tab)' ) );
+			$processor->set_attribute( 'target', $attributes['linkTarget'] );
+		}
+		$custom_logo = $processor->get_updated_html();
 	}
 
 	$classnames = array();
@@ -55,6 +62,8 @@ function render_block_core_site_logo( $attributes ) {
 
 /**
  * Register a core site setting for a site logo
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_logo_setting() {
 	register_setting(
@@ -65,6 +74,7 @@ function register_block_core_site_logo_setting() {
 				'name' => 'site_logo',
 			),
 			'type'         => 'integer',
+			'label'        => __( 'Logo' ),
 			'description'  => __( 'Site logo.' ),
 		)
 	);
@@ -74,6 +84,8 @@ function register_block_core_site_logo_setting() {
 
 /**
  * Register a core site setting for a site icon
+ *
+ * @since 5.9.0
  */
 function register_block_core_site_icon_setting() {
 	register_setting(
@@ -82,6 +94,7 @@ function register_block_core_site_icon_setting() {
 		array(
 			'show_in_rest' => true,
 			'type'         => 'integer',
+			'label'        => __( 'Icon' ),
 			'description'  => __( 'Site icon.' ),
 		)
 	);
@@ -91,6 +104,8 @@ function register_block_core_site_icon_setting() {
 
 /**
  * Registers the `core/site-logo` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_logo() {
 	register_block_type_from_metadata(
@@ -106,6 +121,8 @@ function register_block_core_site_logo() {
 /**
  * Overrides the custom logo with a site logo, if the option is set.
  *
+ * @since 5.8.0
+ *
  * @param string $custom_logo The custom logo set by a theme.
  *
  * @return string The site logo if set.
@@ -120,6 +137,8 @@ function _override_custom_logo_theme_mod( $custom_logo ) {
 /**
  * Updates the site_logo option when the custom_logo theme-mod gets updated.
  *
+ * @since 5.8.0
+ *
  * @param  mixed $value Attachment ID of the custom logo or an empty value.
  * @return mixed
  */
@@ -138,6 +157,10 @@ function _sync_custom_logo_to_site_logo( $value ) {
 /**
  * Deletes the site_logo when the custom_logo theme mod is removed.
  *
+ * @since 5.8.0
+ *
+ * @global array $_ignore_site_logo_changes
+ *
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
@@ -156,6 +179,10 @@ function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
 
 /**
  * Deletes the site logo when all theme mods are being removed.
+ *
+ * @since 5.8.0
+ *
+ * @global array $_ignore_site_logo_changes
  */
 function _delete_site_logo_on_remove_theme_mods() {
 	global $_ignore_site_logo_changes;
@@ -174,6 +201,8 @@ function _delete_site_logo_on_remove_theme_mods() {
  * Hooks `_delete_site_logo_on_remove_theme_mods` in `delete_option_theme_mods_$theme`.
  *
  * Runs on `setup_theme` to account for dynamically-switched themes in the Customizer.
+ *
+ * @since 5.8.0
  */
 function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
 	$theme = get_option( 'stylesheet' );
@@ -184,6 +213,10 @@ function _delete_site_logo_on_remove_custom_logo_on_setup_theme() {
 
 /**
  * Removes the custom_logo theme-mod when the site_logo option gets deleted.
+ *
+ * @since 5.9.0
+ *
+ * @global array $_ignore_site_logo_changes
  */
 function _delete_custom_logo_on_remove_site_logo() {
 	global $_ignore_site_logo_changes;
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index 2fae735f369b57..020b7aab5370b3 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -5,6 +5,7 @@
 
 	a {
 		display: inline-block;
+		line-height: 0;
 	}
 
 	// Provide a sane starting point for the size.
@@ -30,11 +31,11 @@
 		margin-right: auto;
 		text-align: center;
 	}
+}
 
-	// Style variations
-	&.is-style-rounded {
-		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
-		// to rectangular images. A pill-shape is better than otherwise.
-		border-radius: 9999px;
-	}
+// Style variations
+:root :where(.wp-block-site-logo.is-style-rounded) {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
 }
diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
index ba477290a53df9..d42b7bcd4bed64 100644
--- a/packages/block-library/src/site-tagline/block.json
+++ b/packages/block-library/src/site-tagline/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
@@ -10,6 +10,20 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 0
+		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		}
+	},
+	"example": {
+		"viewportWidth": 350,
+		"attributes": {
+			"textAlign": "center"
 		}
 	},
 	"supports": {
@@ -24,7 +38,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -35,10 +53,21 @@
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
-	"editorStyle": "wp-block-site-tagline-editor"
+	"editorStyle": "wp-block-site-tagline-editor",
+	"style": "wp-block-site-tagline"
 }
diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
index 1ce13c6eb43c49..52b9c761ba4f54 100644
--- a/packages/block-library/src/site-tagline/edit.js
+++ b/packages/block-library/src/site-tagline/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import {
 	AlignmentControl,
 	useBlockProps,
 	BlockControls,
+	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
@@ -22,22 +23,26 @@ export default function SiteTaglineEdit( {
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, level, levelOptions } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
 		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
 		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
 
 		return {
-			canUserEdit: canUser( 'update', 'settings' ),
+			canUserEdit: canEdit,
 			tagline: canEdit
 				? settings?.description
 				: readOnlySettings?.description,
 		};
 	}, [] );
 
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	function setTagline( newTagline ) {
@@ -47,7 +52,7 @@ export default function SiteTaglineEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
 		} ),
@@ -58,7 +63,7 @@ export default function SiteTaglineEdit( {
 			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
-			tagName="p"
+			tagName={ TagName }
 			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
@@ -67,11 +72,20 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
+		<TagName { ...blockProps }>
+			{ tagline || __( 'Site Tagline placeholder' ) }
+		</TagName>
 	);
 	return (
 		<>
 			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					options={ levelOptions }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
 				<AlignmentControl
 					onChange={ ( newAlign ) =>
 						setAttributes( { textAlign: newAlign } )
diff --git a/packages/block-library/src/site-tagline/icon.js b/packages/block-library/src/site-tagline/icon.js
index 9e708e94fafd79..908d7149aa112a 100644
--- a/packages/block-library/src/site-tagline/icon.js
+++ b/packages/block-library/src/site-tagline/icon.js
@@ -5,7 +5,6 @@ import { SVG, Path } from '@wordpress/components';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-		<Path fill="none" d="M0 0h24v24H0z" />
-		<Path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" />
+		<Path d="M4 10.5h16V9H4v1.5ZM4 15h9v-1.5H4V15Z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/site-tagline/index.php b/packages/block-library/src/site-tagline/index.php
index 75375e5bb1e792..b59e1e556c320c 100644
--- a/packages/block-library/src/site-tagline/index.php
+++ b/packages/block-library/src/site-tagline/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/site-tagline` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -17,11 +19,18 @@ function render_block_core_site_tagline( $attributes ) {
 	if ( ! $site_tagline ) {
 		return;
 	}
+
+	$tag_name           = 'p';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
+	if ( isset( $attributes['level'] ) && 0 !== $attributes['level'] ) {
+		$tag_name = 'h' . (int) $attributes['level'];
+	}
+
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
 		$wrapper_attributes,
 		$site_tagline
 	);
@@ -29,6 +38,8 @@ function render_block_core_site_tagline( $attributes ) {
 
 /**
  * Registers the `core/site-tagline` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_tagline() {
 	register_block_type_from_metadata(
@@ -38,4 +49,5 @@ function register_block_core_site_tagline() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_site_tagline' );
diff --git a/packages/block-library/src/site-tagline/style.scss b/packages/block-library/src/site-tagline/style.scss
new file mode 100644
index 00000000000000..a22eeebb6e2777
--- /dev/null
+++ b/packages/block-library/src/site-tagline/style.scss
@@ -0,0 +1,4 @@
+.wp-block-site-tagline {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
index aeac5ee57462f3..c75b1bc229beb9 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-title",
 	"title": "Site Title",
 	"category": "theme",
@@ -11,6 +11,10 @@
 			"type": "number",
 			"default": 1
 		},
+		"levelOptions": {
+			"type": "array",
+			"default": [ 0, 1, 2, 3, 4, 5, 6 ]
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -40,7 +44,11 @@
 		},
 		"spacing": {
 			"padding": true,
-			"margin": true
+			"margin": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -51,13 +59,19 @@
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"lineHeight": true,
-				"fontAppearance": true,
-				"letterSpacing": true,
-				"textTransform": true
+				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js
new file mode 100644
index 00000000000000..82e3c1d7f7bb40
--- /dev/null
+++ b/packages/block-library/src/site-title/edit.js
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import {
+	RichText,
+	AlignmentControl,
+	InspectorControls,
+	BlockControls,
+	useBlockProps,
+	HeadingLevelDropdown,
+} from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+export default function SiteTitleEdit( {
+	attributes,
+	setAttributes,
+	insertBlocksAfter,
+} ) {
+	const { level, levelOptions, textAlign, isLink, linkTarget } = attributes;
+	const { canUserEdit, title } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
+		const canEdit = canUser( 'update', {
+			kind: 'root',
+			name: 'site',
+		} );
+		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
+		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			canUserEdit: canEdit,
+			title: canEdit ? settings?.title : readOnlySettings?.name,
+		};
+	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	function setTitle( newTitle ) {
+		editEntityRecord( 'root', 'site', undefined, {
+			title: newTitle,
+		} );
+	}
+
+	const TagName = level === 0 ? 'p' : `h${ level }`;
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
+		} ),
+	} );
+	const siteTitleContent = canUserEdit ? (
+		<TagName { ...blockProps }>
+			<RichText
+				tagName={ isLink ? 'a' : 'span' }
+				href={ isLink ? '#site-title-pseudo-link' : undefined }
+				aria-label={ __( 'Site title text' ) }
+				placeholder={ __( 'Write site title…' ) }
+				value={ title }
+				onChange={ setTitle }
+				allowedFormats={ [] }
+				disableLineBreaks
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+			/>
+		</TagName>
+	) : (
+		<TagName { ...blockProps }>
+			{ isLink ? (
+				<a
+					href="#site-title-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
+				</a>
+			) : (
+				<span>
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
+				</span>
+			) }
+		</TagName>
+	);
+	return (
+		<>
+			<BlockControls group="block">
+				<HeadingLevelDropdown
+					value={ level }
+					options={ levelOptions }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Make title link to home' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ siteTitleContent }
+		</>
+	);
+}
diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js
deleted file mode 100644
index 5980dff6d88193..00000000000000
--- a/packages/block-library/src/site-title/edit/index.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import {
-	RichText,
-	AlignmentControl,
-	InspectorControls,
-	BlockControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import LevelControl from './level-toolbar';
-
-export default function SiteTitleEdit( {
-	attributes,
-	setAttributes,
-	insertBlocksAfter,
-} ) {
-	const { level, textAlign, isLink, linkTarget } = attributes;
-	const { canUserEdit, title } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEditedEntityRecord } =
-			select( coreStore );
-		const canEdit = canUser( 'update', 'settings' );
-		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
-		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			canUserEdit: canEdit,
-			title: canEdit ? settings?.title : readOnlySettings?.name,
-		};
-	}, [] );
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	function setTitle( newTitle ) {
-		editEntityRecord( 'root', 'site', undefined, {
-			title: newTitle,
-		} );
-	}
-
-	const TagName = level === 0 ? 'p' : `h${ level }`;
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
-		} ),
-	} );
-	const siteTitleContent = canUserEdit ? (
-		<TagName { ...blockProps }>
-			<RichText
-				tagName={ isLink ? 'a' : 'span' }
-				href={ isLink ? '#site-title-pseudo-link' : undefined }
-				aria-label={ __( 'Site title text' ) }
-				placeholder={ __( 'Write site title…' ) }
-				value={ title }
-				onChange={ setTitle }
-				allowedFormats={ [] }
-				disableLineBreaks
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
-				}
-			/>
-		</TagName>
-	) : (
-		<TagName { ...blockProps }>
-			{ isLink ? (
-				<a
-					href="#site-title-pseudo-link"
-					onClick={ ( event ) => event.preventDefault() }
-				>
-					{ decodeEntities( title ) ||
-						__( 'Site Title placeholder' ) }
-				</a>
-			) : (
-				<span>
-					{ decodeEntities( title ) ||
-						__( 'Site Title placeholder' ) }
-				</span>
-			) }
-		</TagName>
-	);
-	return (
-		<>
-			<BlockControls group="block">
-				<LevelControl
-					level={ level }
-					onChange={ ( newLevel ) =>
-						setAttributes( { level: newLevel } )
-					}
-				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
-					<ToggleControl
-						label={ __( 'Make title link to home' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					{ isLink && (
-						<ToggleControl
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
-							}
-							checked={ linkTarget === '_blank' }
-						/>
-					) }
-				</PanelBody>
-			</InspectorControls>
-			{ siteTitleContent }
-		</>
-	);
-}
diff --git a/packages/block-library/src/site-title/edit/level-icon.js b/packages/block-library/src/site-title/edit/level-icon.js
deleted file mode 100644
index 95295208b6e599..00000000000000
--- a/packages/block-library/src/site-title/edit/level-icon.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-import { paragraph } from '@wordpress/icons';
-
-export default function LevelIcon( { level, isPressed = false } ) {
-	if ( level === 0 ) return paragraph;
-	const levelToPath = {
-		1: 'M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z',
-		2: 'M7 5h2v10H7v-4H3v4H1V5h2v4h4V5zm8 8c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6V15h8v-2H15z',
-		3: 'M12.1 12.2c.4.3.8.5 1.2.7.4.2.9.3 1.4.3.5 0 1-.1 1.4-.3.3-.1.5-.5.5-.8 0-.2 0-.4-.1-.6-.1-.2-.3-.3-.5-.4-.3-.1-.7-.2-1-.3-.5-.1-1-.1-1.5-.1V9.1c.7.1 1.5-.1 2.2-.4.4-.2.6-.5.6-.9 0-.3-.1-.6-.4-.8-.3-.2-.7-.3-1.1-.3-.4 0-.8.1-1.1.3-.4.2-.7.4-1.1.6l-1.2-1.4c.5-.4 1.1-.7 1.6-.9.5-.2 1.2-.3 1.8-.3.5 0 1 .1 1.6.2.4.1.8.3 1.2.5.3.2.6.5.8.8.2.3.3.7.3 1.1 0 .5-.2.9-.5 1.3-.4.4-.9.7-1.5.9v.1c.6.1 1.2.4 1.6.8.4.4.7.9.7 1.5 0 .4-.1.8-.3 1.2-.2.4-.5.7-.9.9-.4.3-.9.4-1.3.5-.5.1-1 .2-1.6.2-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1l1.1-1.4zM7 9H3V5H1v10h2v-4h4v4h2V5H7v4z',
-		4: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm10-2h-1v2h-2v-2h-5v-2l4-6h3v6h1v2zm-3-2V7l-2.8 4H16z',
-		5: 'M12.1 12.2c.4.3.7.5 1.1.7.4.2.9.3 1.3.3.5 0 1-.1 1.4-.4.4-.3.6-.7.6-1.1 0-.4-.2-.9-.6-1.1-.4-.3-.9-.4-1.4-.4H14c-.1 0-.3 0-.4.1l-.4.1-.5.2-1-.6.3-5h6.4v1.9h-4.3L14 8.8c.2-.1.5-.1.7-.2.2 0 .5-.1.7-.1.5 0 .9.1 1.4.2.4.1.8.3 1.1.6.3.2.6.6.8.9.2.4.3.9.3 1.4 0 .5-.1 1-.3 1.4-.2.4-.5.8-.9 1.1-.4.3-.8.5-1.3.7-.5.2-1 .3-1.5.3-.8 0-1.6-.1-2.3-.4-.6-.2-1.1-.6-1.6-1-.1-.1 1-1.5 1-1.5zM9 15H7v-4H3v4H1V5h2v4h4V5h2v10z',
-		6: 'M9 15H7v-4H3v4H1V5h2v4h4V5h2v10zm8.6-7.5c-.2-.2-.5-.4-.8-.5-.6-.2-1.3-.2-1.9 0-.3.1-.6.3-.8.5l-.6.9c-.2.5-.2.9-.2 1.4.4-.3.8-.6 1.2-.8.4-.2.8-.3 1.3-.3.4 0 .8 0 1.2.2.4.1.7.3 1 .6.3.3.5.6.7.9.2.4.3.8.3 1.3s-.1.9-.3 1.4c-.2.4-.5.7-.8 1-.4.3-.8.5-1.2.6-1 .3-2 .3-3 0-.5-.2-1-.5-1.4-.9-.4-.4-.8-.9-1-1.5-.2-.6-.3-1.3-.3-2.1s.1-1.6.4-2.3c.2-.6.6-1.2 1-1.6.4-.4.9-.7 1.4-.9.6-.3 1.1-.4 1.7-.4.7 0 1.4.1 2 .3.5.2 1 .5 1.4.8 0 .1-1.3 1.4-1.3 1.4zm-2.4 5.8c.2 0 .4 0 .6-.1.2 0 .4-.1.5-.2.1-.1.3-.3.4-.5.1-.2.1-.5.1-.7 0-.4-.1-.8-.4-1.1-.3-.2-.7-.3-1.1-.3-.3 0-.7.1-1 .2-.4.2-.7.4-1 .7 0 .3.1.7.3 1 .1.2.3.4.4.6.2.1.3.3.5.3.2.1.5.2.7.1z',
-	};
-	return (
-		<SVG
-			width="20"
-			height="20"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			isPressed={ isPressed }
-		>
-			<Path d={ levelToPath[ level ] } />
-		</SVG>
-	);
-}
diff --git a/packages/block-library/src/site-title/edit/level-toolbar.js b/packages/block-library/src/site-title/edit/level-toolbar.js
deleted file mode 100644
index 704c948d336731..00000000000000
--- a/packages/block-library/src/site-title/edit/level-toolbar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToolbarDropdownMenu } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import LevelIcon from './level-icon';
-
-export default function LevelControl( { level, onChange } ) {
-	const allControls = [ 1, 2, 3, 4, 5, 6, 0 ].map( ( currentLevel ) => {
-		const isActive = currentLevel === level;
-		return {
-			icon: <LevelIcon level={ currentLevel } isPressed={ isActive } />,
-			title:
-				currentLevel === 0
-					? __( 'Paragraph' )
-					: // translators: %s: heading level e.g: "1", "2", "3"
-					  sprintf( __( 'Heading %d' ), currentLevel ),
-			isActive,
-			onClick: () => onChange( currentLevel ),
-			role: 'menuitemradio',
-		};
-	} );
-	return (
-		<ToolbarDropdownMenu
-			label={ __( 'Change heading level' ) }
-			icon={ <LevelIcon level={ level } /> }
-			controls={ allControls }
-		/>
-	);
-}
diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss
index 173e4570929a51..372a85db2f4b13 100644
--- a/packages/block-library/src/site-title/editor.scss
+++ b/packages/block-library/src/site-title/editor.scss
@@ -2,9 +2,3 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
-
-.editor-styles-wrapper .wp-block-site-title {
-	a {
-		color: inherit;
-	}
-}
diff --git a/packages/block-library/src/site-title/index.js b/packages/block-library/src/site-title/index.js
index 01fe15598d6f1b..b49e1561448c7e 100644
--- a/packages/block-library/src/site-title/index.js
+++ b/packages/block-library/src/site-title/index.js
@@ -17,6 +17,12 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			textAlign: 'center',
+		},
+	},
 	edit,
 	transforms,
 	deprecated,
diff --git a/packages/block-library/src/site-title/index.php b/packages/block-library/src/site-title/index.php
index 3c3e4d86692387..f90c3a6ac3a6a0 100644
--- a/packages/block-library/src/site-title/index.php
+++ b/packages/block-library/src/site-title/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/site-title` block on the server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -18,8 +20,11 @@ function render_block_core_site_title( $attributes ) {
 		return;
 	}
 
-	$tag_name         = 'h1';
-	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$tag_name = 'h1';
+	$classes  = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes .= ' has-link-color';
+	}
 
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
@@ -37,7 +42,7 @@ function render_block_core_site_title( $attributes ) {
 			esc_html( $site_title )
 		);
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classes ) ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',
@@ -50,6 +55,8 @@ function render_block_core_site_title( $attributes ) {
 
 /**
  * Registers the `core/site-title` block on the server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_site_title() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
index afc6f449f4025b..3b332e35c65237 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -1,5 +1,15 @@
 .wp-block-site-title {
-	a {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
+	:where(a) {
 		color: inherit;
+		font-family: inherit;
+		font-size: inherit;
+		font-style: inherit;
+		font-weight: inherit;
+		letter-spacing: inherit;
+		line-height: inherit;
+		text-decoration: inherit;
 	}
 }
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 5f64b7dcf777c5..667fd74b208f29 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -1,21 +1,23 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-link",
 	"title": "Social Icon",
 	"category": "widgets",
 	"parent": [ "core/social-links" ],
-	"description": "Display an icon linking to a social media profile or site.",
+	"description": "Display an icon linking to a social profile or site.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"service": {
 			"type": "string"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"rel": {
 			"type": "string"
@@ -24,12 +26,17 @@
 	"usesContext": [
 		"openInNewTab",
 		"showLabels",
+		"iconColor",
 		"iconColorValue",
+		"iconBackgroundColor",
 		"iconBackgroundColorValue"
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-social-link-editor"
 }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index fab49838afa2e4..91f1e4170b33dd 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -1,25 +1,35 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { useDispatch } from '@wordpress/data';
+
 import {
+	BlockControls,
 	InspectorControls,
 	URLPopover,
 	URLInput,
+	useBlockEditingMode,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Fragment, useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
+	Dropdown,
 	PanelBody,
 	PanelRow,
 	TextControl,
+	ToolbarButton,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -32,119 +42,228 @@ const SocialLinkURLPopover = ( {
 	setAttributes,
 	setPopover,
 	popoverAnchor,
-} ) => (
-	<URLPopover anchor={ popoverAnchor } onClose={ () => setPopover( false ) }>
-		<form
-			className="block-editor-url-popover__link-editor"
-			onSubmit={ ( event ) => {
-				event.preventDefault();
+	clientId,
+} ) => {
+	const { removeBlock } = useDispatch( blockEditorStore );
+	return (
+		<URLPopover
+			anchor={ popoverAnchor }
+			aria-label={ __( 'Edit social link' ) }
+			onClose={ () => {
 				setPopover( false );
+				popoverAnchor?.focus();
 			} }
 		>
-			<div className="block-editor-url-input">
-				<URLInput
-					value={ url }
-					onChange={ ( nextURL ) =>
-						setAttributes( { url: nextURL } )
-					}
-					placeholder={ __( 'Enter address' ) }
-					disableSuggestions={ true }
-				/>
-			</div>
-			<Button
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
-			/>
-		</form>
-	</URLPopover>
-);
+			<form
+				className="block-editor-url-popover__link-editor"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					setPopover( false );
+					popoverAnchor?.focus();
+				} }
+			>
+				<div className="block-editor-url-input">
+					<URLInput
+						value={ url }
+						onChange={ ( nextURL ) =>
+							setAttributes( { url: nextURL } )
+						}
+						placeholder={ __( 'Enter social link' ) }
+						label={ __( 'Enter social link' ) }
+						hideLabelFromVision
+						disableSuggestions
+						onKeyDown={ ( event ) => {
+							if (
+								!! url ||
+								event.defaultPrevented ||
+								! [ BACKSPACE, DELETE ].includes(
+									event.keyCode
+								)
+							) {
+								return;
+							}
+							removeBlock( clientId );
+						} }
+						suffix={
+							<InputControlSuffixWrapper variant="control">
+								<Button
+									icon={ keyboardReturn }
+									label={ __( 'Apply' ) }
+									type="submit"
+									size="small"
+								/>
+							</InputControlSuffixWrapper>
+						}
+					/>
+				</div>
+			</form>
+		</URLPopover>
+	);
+};
 
 const SocialLinkEdit = ( {
 	attributes,
 	context,
 	isSelected,
 	setAttributes,
+	clientId,
 } ) => {
-	const { url, service, label, rel } = attributes;
-	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
+	const { url, service, label = '', rel } = attributes;
+	const {
+		showLabels,
+		iconColor,
+		iconColorValue,
+		iconBackgroundColor,
+		iconBackgroundColorValue,
+	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
-		'wp-social-link__is-incomplete': ! url,
-	} );
+	const wrapperClasses = clsx(
+		'wp-social-link',
+		// Manually adding this class for backwards compatibility of CSS when moving the
+		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
+		'wp-block-social-link',
+		'wp-social-link-' + service,
+		{
+			'wp-social-link__is-incomplete': ! url,
+			[ `has-${ iconColor }-color` ]: iconColor,
+			[ `has-${ iconBackgroundColor }-background-color` ]:
+				iconBackgroundColor,
+		}
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
-	const socialLinkLabel = label ?? socialLinkName;
+	// The initial label (ie. the link text) is an empty string.
+	// We want to prevent empty links so that the link text always fallbacks to
+	// the social name, even when users enter and save an empty string or only
+	// spaces. The PHP render callback fallbacks to the social name as well.
+	const socialLinkText = label.trim() === '' ? socialLinkName : label;
+
+	const ref = useRef();
 	const blockProps = useBlockProps( {
-		className: classes,
-		style: {
-			color: iconColorValue,
-			backgroundColor: iconBackgroundColorValue,
+		className: 'wp-block-social-link-anchor',
+		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
+		onClick: () => setPopover( true ),
+		onKeyDown: ( event ) => {
+			if ( event.keyCode === ENTER ) {
+				event.preventDefault();
+				setPopover( true );
+			}
 		},
 	} );
 
 	return (
-		<Fragment>
+		<>
+			{ isContentOnlyMode && showLabels && (
+				// Add an extra control to modify the label attribute when content only mode is active.
+				// With content only mode active, the inspector is hidden, so users need another way
+				// to edit this attribute.
+				<BlockControls group="other">
+					<Dropdown
+						popoverProps={ { position: 'bottom right' } }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								onClick={ onToggle }
+								aria-haspopup="true"
+								aria-expanded={ isOpen }
+							>
+								{ __( 'Text' ) }
+							</ToolbarButton>
+						) }
+						renderContent={ () => (
+							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								className="wp-block-social-link__toolbar_content_text"
+								label={ __( 'Text' ) }
+								help={ __(
+									'Provide a text label or use the default.'
+								) }
+								value={ label }
+								onChange={ ( value ) =>
+									setAttributes( { label: value } )
+								}
+								placeholder={ socialLinkName }
+							/>
+						) }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
-				<PanelBody
-					title={ sprintf(
-						/* translators: %s: name of the social service. */
-						__( '%s label' ),
-						socialLinkName
-					) }
-					initialOpen={ false }
-				>
+				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
-							label={ __( 'Link label' ) }
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Text' ) }
 							help={ __(
-								'Briefly describe the link to help screen reader users.'
+								'The text is visible when enabled from the parent Social Icons block.'
 							) }
 							value={ label }
 							onChange={ ( value ) =>
 								setAttributes( { label: value } )
 							}
+							placeholder={ socialLinkName }
 						/>
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
-				<Button
-					className="wp-block-social-link-anchor"
-					ref={ setPopoverAnchor }
-					onClick={ () => setPopover( true ) }
-				>
+			{ /*
+			 * Because the `<ul>` element has a role=document, the `<li>` is
+			 * not semantically correct, so adding role=presentation is cleaner.
+			 * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551
+			 */ }
+			<li
+				role="presentation"
+				className={ wrapperClasses }
+				style={ {
+					color: iconColorValue,
+					backgroundColor: iconBackgroundColorValue,
+				} }
+			>
+				{ /*
+				 * Disable reason: The `button` ARIA role is redundant but
+				 * blockProps has a role of `document` automatically applied
+				 * which breaks the semantics of this button since it removes
+				 * the information about the popover.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<button aria-haspopup="dialog" { ...blockProps } role="button">
 					<IconComponent />
 					<span
-						className={ classNames( 'wp-block-social-link-label', {
+						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>
-						{ socialLinkLabel }
+						{ socialLinkText }
 					</span>
-					{ isSelected && showURLPopover && (
-						<SocialLinkURLPopover
-							url={ url }
-							setAttributes={ setAttributes }
-							setPopover={ setPopover }
-							popoverAnchor={ popoverAnchor }
-						/>
-					) }
-				</Button>
+				</button>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+				{ isSelected && showURLPopover && (
+					<SocialLinkURLPopover
+						url={ url }
+						setAttributes={ setAttributes }
+						setPopover={ setPopover }
+						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
+					/>
+				) }
 			</li>
-		</Fragment>
+		</>
 	);
 };
 
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index bc3d2e47db9619..0b4b6b0ac7d4bd 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -16,7 +16,7 @@ import {
 	ToolbarButton,
 	LinkSettingsNavigation,
 } from '@wordpress/components';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
@@ -30,10 +30,6 @@ const DEFAULT_ACTIVE_ICON_STYLES = {
 	backgroundColor: '#f0f0f0',
 	color: '#444',
 };
-const DEFAULT_INACTIVE_ICON_STYLES = {
-	backgroundColor: '#0000003f',
-	color: '#fff',
-};
 const ANIMATION_DELAY = 300;
 const ANIMATION_DURATION = 400;
 
@@ -66,12 +62,6 @@ const SocialLinkEdit = ( {
 		styles[ `wp-social-link-${ service }` ] ||
 		styles[ `wp-social-link` ] ||
 		DEFAULT_ACTIVE_ICON_STYLES;
-	const inactiveIcon =
-		usePreferredColorSchemeStyle(
-			styles.inactiveIcon,
-			styles.inactiveIconDark
-		) || DEFAULT_INACTIVE_ICON_STYLES;
-
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
@@ -94,23 +84,13 @@ const SocialLinkEdit = ( {
 	}, [ url ] );
 
 	const interpolationColors = {
-		backgroundColor: animatedValue.interpolate( {
-			inputRange: [ 0, 1 ],
-			outputRange: [
-				inactiveIcon.backgroundColor,
-				activeIcon.backgroundColor,
-			],
-		} ),
-		color: animatedValue.interpolate( {
+		opacity: animatedValue.interpolate( {
 			inputRange: [ 0, 1 ],
-			outputRange: [ inactiveIcon.color, activeIcon.color ],
+			outputRange: [ 0.3, 1 ],
 		} ),
-		stroke: '',
 	};
 
-	const { backgroundColor, color, stroke } = hasUrl
-		? activeIcon
-		: interpolationColors;
+	const { opacity } = hasUrl ? activeIcon : interpolationColors;
 
 	function animateColors() {
 		Animated.sequence( [
@@ -119,6 +99,7 @@ const SocialLinkEdit = ( {
 				toValue: 1,
 				duration: ANIMATION_DURATION,
 				easing: Easing.circle,
+				useNativeDriver: false,
 			} ),
 		] ).start( () => setHasUrl( true ) );
 	}
@@ -157,7 +138,7 @@ const SocialLinkEdit = ( {
 		  );
 
 	return (
-		<View>
+		<View style={ styles.container }>
 			{ isSelected && (
 				<>
 					<BlockControls>
@@ -190,7 +171,7 @@ const SocialLinkEdit = ( {
 
 			<TouchableWithoutFeedback
 				onPress={ onIconPress }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityLabel={ sprintf(
 					// translators: %s: social link name e.g: "Instagram".
 					__( '%s social icon' ),
@@ -199,12 +180,18 @@ const SocialLinkEdit = ( {
 				accessibilityHint={ accessibilityHint }
 			>
 				<Animated.View
-					style={ [ styles.iconContainer, { backgroundColor } ] }
+					style={ [
+						styles.iconContainer,
+						{
+							backgroundColor: activeIcon.backgroundColor,
+							opacity,
+						},
+					] }
 				>
 					<Icon
 						animated
 						icon={ IconComponent }
-						style={ { stroke, color } }
+						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
 			</TouchableWithoutFeedback>
diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss
index be0919d2c33fb6..fbbc8eb09e6a8c 100644
--- a/packages/block-library/src/social-link/editor.native.scss
+++ b/packages/block-library/src/social-link/editor.native.scss
@@ -13,11 +13,6 @@
 	justify-content: center;
 }
 
-.inactiveIcon {
-	background-color: $light-quaternary;
-	color: $white;
-}
-
-.inactiveIconDark {
-	background-color: $dark-quaternary;
+.container {
+	margin: $block-selected-margin;
 }
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index 343f903ca4ce8e..d61cf7c1a7cf56 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -1,27 +1,45 @@
-// The editor uses the button component, the frontend uses a link.
-// Therefore we unstyle the button component to make it more like the frontend.
 .wp-block-social-links .wp-social-link {
 	line-height: 0;
+}
+
+// The editor uses the button element, the frontend uses a link.
+// Therefore we unstyle the button element to make it more like the frontend.
+.wp-block-social-link-anchor {
+	align-items: center;
+	background: none;
+	border: 0;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: inline-flex;
+	font-size: inherit;
+	color: currentColor;
+	height: auto;
+	font-weight: inherit;
+	font-family: inherit;
 
-	button {
-		font-size: inherit;
-		color: currentColor;
-		height: auto;
-		line-height: 0;
+	// This rule ensures social link buttons display correctly in template parts.
+	opacity: 1;
 
-		// This rule ensures social link buttons display correctly in template parts.
-		opacity: 1;
+	// This rule is duplicated from the style.scss and needs to be the same as there.
+	padding: 0.25em;
 
-		// This rule is duplicated from the style.scss and needs to be the same as there.
-		padding: 0.25em;
+	// Override the shared `.wp-block-social-link` class used on both the li and button
+	// due to backwards compatibility from moving the blockProps from the li to the button.
+	&:hover {
+		transform: none;
 	}
 }
 
-.wp-block-social-links.is-style-pill-shape .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
 	padding-left: calc((2/3) * 1em);
 	padding-right: calc((2/3) * 1em);
 }
 
-.wp-block-social-links.is-style-logos-only .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }
+
+.wp-block-social-link__toolbar_content_text {
+	// Corresponds to the size of the text control input in the block inspector.
+	width: 250px;
+}
diff --git a/packages/block-library/src/social-link/icons/bluesky.js b/packages/block-library/src/social-link/icons/bluesky.js
new file mode 100644
index 00000000000000..0295d318efe81f
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/bluesky.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const BlueskyIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/icons/chain.js b/packages/block-library/src/social-link/icons/chain.js
index a1285ba053c710..0a761b80e79562 100644
--- a/packages/block-library/src/social-link/icons/chain.js
+++ b/packages/block-library/src/social-link/icons/chain.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const ChainIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M19.647,16.706a1.134,1.134,0,0,0-.343-.833l-2.549-2.549a1.134,1.134,0,0,0-.833-.343,1.168,1.168,0,0,0-.883.392l.233.226q.2.189.264.264a2.922,2.922,0,0,1,.184.233.986.986,0,0,1,.159.312,1.242,1.242,0,0,1,.043.337,1.172,1.172,0,0,1-1.176,1.176,1.237,1.237,0,0,1-.337-.043,1,1,0,0,1-.312-.159,2.76,2.76,0,0,1-.233-.184q-.073-.068-.264-.264l-.226-.233a1.19,1.19,0,0,0-.4.895,1.134,1.134,0,0,0,.343.833L15.837,19.3a1.13,1.13,0,0,0,.833.331,1.18,1.18,0,0,0,.833-.318l1.8-1.789a1.12,1.12,0,0,0,.343-.821Zm-8.615-8.64a1.134,1.134,0,0,0-.343-.833L8.163,4.7a1.134,1.134,0,0,0-.833-.343,1.184,1.184,0,0,0-.833.331L4.7,6.473a1.12,1.12,0,0,0-.343.821,1.134,1.134,0,0,0,.343.833l2.549,2.549a1.13,1.13,0,0,0,.833.331,1.184,1.184,0,0,0,.883-.38L8.728,10.4q-.2-.189-.264-.264A2.922,2.922,0,0,1,8.28,9.9a.986.986,0,0,1-.159-.312,1.242,1.242,0,0,1-.043-.337A1.172,1.172,0,0,1,9.254,8.079a1.237,1.237,0,0,1,.337.043,1,1,0,0,1,.312.159,2.761,2.761,0,0,1,.233.184q.073.068.264.264l.226.233a1.19,1.19,0,0,0,.4-.895ZM22,16.706a3.343,3.343,0,0,1-1.042,2.488l-1.8,1.789a3.536,3.536,0,0,1-4.988-.025l-2.525-2.537a3.384,3.384,0,0,1-1.017-2.488,3.448,3.448,0,0,1,1.078-2.561l-1.078-1.078a3.434,3.434,0,0,1-2.549,1.078,3.4,3.4,0,0,1-2.5-1.029L3.029,9.794A3.4,3.4,0,0,1,2,7.294,3.343,3.343,0,0,1,3.042,4.806l1.8-1.789A3.384,3.384,0,0,1,7.331,2a3.357,3.357,0,0,1,2.5,1.042l2.525,2.537a3.384,3.384,0,0,1,1.017,2.488,3.448,3.448,0,0,1-1.078,2.561l1.078,1.078a3.551,3.551,0,0,1,5.049-.049l2.549,2.549A3.4,3.4,0,0,1,22,16.706Z" />
+		<Path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/gravatar.js b/packages/block-library/src/social-link/icons/gravatar.js
new file mode 100644
index 00000000000000..dad5ccb96a6f72
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/gravatar.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const GravatarIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/icons/index.js b/packages/block-library/src/social-link/icons/index.js
index 80b547c2d1710e..422ff6f02dd20e 100644
--- a/packages/block-library/src/social-link/icons/index.js
+++ b/packages/block-library/src/social-link/icons/index.js
@@ -1,6 +1,7 @@
 export * from './amazon';
 export * from './bandcamp';
 export * from './behance';
+export * from './bluesky';
 export * from './chain';
 export * from './codepen';
 export * from './deviantart';
@@ -15,6 +16,7 @@ export * from './foursquare';
 export * from './goodreads';
 export * from './google';
 export * from './github';
+export * from './gravatar';
 export * from './instagram';
 export * from './lastfm';
 export * from './linkedin';
@@ -31,6 +33,7 @@ export * from './snapchat';
 export * from './soundcloud';
 export * from './spotify';
 export * from './telegram';
+export * from './threads';
 export * from './tiktok';
 export * from './tumblr';
 export * from './twitch';
@@ -39,5 +42,6 @@ export * from './vimeo';
 export * from './vk';
 export * from './whatsapp';
 export * from './wordpress';
+export * from './x';
 export * from './yelp';
 export * from './youtube';
diff --git a/packages/block-library/src/social-link/icons/mail.js b/packages/block-library/src/social-link/icons/mail.js
index 7752dc1f60079e..ca65a59f5f20f7 100644
--- a/packages/block-library/src/social-link/icons/mail.js
+++ b/packages/block-library/src/social-link/icons/mail.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const MailIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M20,4H4C2.895,4,2,4.895,2,6v12c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V6C22,4.895,21.105,4,20,4z M20,8.236l-8,4.882 L4,8.236V6h16V8.236z" />
+		<Path d="M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm.5 12c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V9.8l7.5 5.6 7.5-5.6V17zm0-9.1L12 13.6 4.5 7.9V7c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v.9z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/medium.js b/packages/block-library/src/social-link/icons/medium.js
index 88de49e65be046..a3979a3ada81b8 100644
--- a/packages/block-library/src/social-link/icons/medium.js
+++ b/packages/block-library/src/social-link/icons/medium.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const MediumIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z" />
+		<Path d="M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/patreon.js b/packages/block-library/src/social-link/icons/patreon.js
index 9970d49eb4e0f6..04ef99a14706ec 100644
--- a/packages/block-library/src/social-link/icons/patreon.js
+++ b/packages/block-library/src/social-link/icons/patreon.js
@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Circle, Rect, SVG } from '@wordpress/primitives';
+import { Path, SVG } from '@wordpress/primitives';
 
 export const PatreonIcon = () => (
-	<SVG width="24" height="24" viewBox="0 0 569 546" version="1.1">
-		<Circle cx="363" cy="205" r="205" />
-		<Rect width="100" height="546" x="0" y="0" />
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M20 8.40755C19.9969 6.10922 18.2543 4.22555 16.2097 3.54588C13.6708 2.70188 10.3222 2.82421 7.89775 3.99921C4.95932 5.42355 4.03626 8.54355 4.00186 11.6552C3.97363 14.2136 4.2222 20.9517 7.92225 20.9997C10.6715 21.0356 11.0809 17.3967 12.3529 15.6442C13.258 14.3974 14.4233 14.0452 15.8578 13.6806C18.3233 13.0537 20.0036 11.0551 20 8.40755Z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/reddit.js b/packages/block-library/src/social-link/icons/reddit.js
index 05c43e42f56b9f..7bb8ff1464b854 100644
--- a/packages/block-library/src/social-link/icons/reddit.js
+++ b/packages/block-library/src/social-link/icons/reddit.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const RedditIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z" />
+		<Path d="M5.27 9.221A2.775 2.775 0 0 0 2.498 11.993a2.785 2.785 0 0 0 1.6 2.511 5.337 5.337 0 0 0 2.374 4.11 9.386 9.386 0 0 0 5.539 1.7 9.386 9.386 0 0 0 5.541-1.7 5.331 5.331 0 0 0 2.372-4.114 2.787 2.787 0 0 0 1.583-2.5 2.775 2.775 0 0 0-2.772-2.772 2.742 2.742 0 0 0-1.688.574 9.482 9.482 0 0 0-4.637-1.348v-.008a2.349 2.349 0 0 1 2.011-2.316 1.97 1.97 0 0 0 1.926 1.521 1.98 1.98 0 0 0 1.978-1.978 1.98 1.98 0 0 0-1.978-1.978 1.985 1.985 0 0 0-1.938 1.578 3.183 3.183 0 0 0-2.849 3.172v.011a9.463 9.463 0 0 0-4.59 1.35 2.741 2.741 0 0 0-1.688-.574Zm6.736 9.1a3.162 3.162 0 0 1-2.921-1.944.215.215 0 0 1 .014-.2.219.219 0 0 1 .168-.106 27.327 27.327 0 0 1 2.74-.133 27.357 27.357 0 0 1 2.74.133.219.219 0 0 1 .168.106.215.215 0 0 1 .014.2 3.158 3.158 0 0 1-2.921 1.944Zm3.743-3.157a1.265 1.265 0 0 1-1.4-1.371 1.954 1.954 0 0 1 .482-1.442 1.15 1.15 0 0 1 .842-.379 1.7 1.7 0 0 1 1.49 1.777 1.323 1.323 0 0 1-.325 1.015 1.476 1.476 0 0 1-1.089.4Zm-7.485 0a1.476 1.476 0 0 1-1.086-.4 1.323 1.323 0 0 1-.325-1.016 1.7 1.7 0 0 1 1.49-1.777 1.151 1.151 0 0 1 .843.379 1.951 1.951 0 0 1 .481 1.441 1.276 1.276 0 0 1-1.403 1.373Z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/soundcloud.js b/packages/block-library/src/social-link/icons/soundcloud.js
index ffc740aae1a077..8e4a66353fc8ea 100644
--- a/packages/block-library/src/social-link/icons/soundcloud.js
+++ b/packages/block-library/src/social-link/icons/soundcloud.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const SoundCloudIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z" />
+		<Path d="M23.994 14.552a3.36 3.36 0 01-3.401 3.171h-8.176a.685.685 0 01-.679-.681V8.238a.749.749 0 01.452-.716S12.942 7 14.526 7a5.357 5.357 0 012.748.755 5.44 5.44 0 012.56 3.546c.282-.08.574-.12.868-.119a3.273 3.273 0 013.292 3.37zM10.718 8.795a.266.266 0 10-.528 0c-.224 2.96-.397 5.735 0 8.685a.265.265 0 00.528 0c.425-2.976.246-5.7 0-8.685zM9.066 9.82a.278.278 0 00-.553 0 33.183 33.183 0 000 7.663.278.278 0 00.55 0c.33-2.544.332-5.12.003-7.664zM7.406 9.56a.269.269 0 00-.535 0c-.253 2.7-.38 5.222 0 7.917a.266.266 0 10.531 0c.394-2.73.272-5.181.004-7.917zM5.754 10.331a.275.275 0 10-.55 0 28.035 28.035 0 000 7.155.272.272 0 00.54 0c.332-2.373.335-4.78.01-7.155zM4.087 12.12a.272.272 0 00-.544 0c-.393 1.843-.208 3.52.016 5.386a.26.26 0 00.512 0c.247-1.892.435-3.53.016-5.386zM2.433 11.838a.282.282 0 00-.56 0c-.349 1.882-.234 3.54.01 5.418.025.285.508.282.54 0 .269-1.907.394-3.517.01-5.418zM.762 12.76a.282.282 0 00-.56 0c-.32 1.264-.22 2.31.023 3.578a.262.262 0 00.521 0c.282-1.293.42-2.317.016-3.578z" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/icons/threads.js b/packages/block-library/src/social-link/icons/threads.js
new file mode 100644
index 00000000000000..12859743cb7032
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/threads.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const ThreadsIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M16.3 11.3c-.1 0-.2-.1-.2-.1-.1-2.6-1.5-4-3.9-4-1.4 0-2.6.6-3.3 1.7l1.3.9c.5-.8 1.4-1 2-1 .8 0 1.4.2 1.7.7.3.3.5.8.5 1.3-.7-.1-1.4-.2-2.2-.1-2.2.1-3.7 1.4-3.6 3.2 0 .9.5 1.7 1.3 2.2.7.4 1.5.6 2.4.6 1.2-.1 2.1-.5 2.7-1.3.5-.6.8-1.4.9-2.4.6.3 1 .8 1.2 1.3.4.9.4 2.4-.8 3.6-1.1 1.1-2.3 1.5-4.3 1.5-2.1 0-3.8-.7-4.8-2S5.7 14.3 5.7 12c0-2.3.5-4.1 1.5-5.4 1.1-1.3 2.7-2 4.8-2 2.2 0 3.8.7 4.9 2 .5.7.9 1.5 1.2 2.5l1.5-.4c-.3-1.2-.8-2.2-1.5-3.1-1.3-1.7-3.3-2.6-6-2.6-2.6 0-4.7.9-6 2.6C4.9 7.2 4.3 9.3 4.3 12s.6 4.8 1.9 6.4c1.4 1.7 3.4 2.6 6 2.6 2.3 0 4-.6 5.3-2 1.8-1.8 1.7-4 1.1-5.4-.4-.9-1.2-1.7-2.3-2.3zm-4 3.8c-1 .1-2-.4-2-1.3 0-.7.5-1.5 2.1-1.6h.5c.6 0 1.1.1 1.6.2-.2 2.3-1.3 2.7-2.2 2.7z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/icons/x.js b/packages/block-library/src/social-link/icons/x.js
new file mode 100644
index 00000000000000..cd70775ad7cb89
--- /dev/null
+++ b/packages/block-library/src/social-link/icons/x.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const XIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 7e669bf56d6dad..da28034f5a55d2 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/social-link` block on server.
  *
+ * @since 5.4.0
+ *
  * @param Array    $attributes The block attributes.
  * @param String   $content    InnerBlocks content of the Block.
  * @param WP_Block $block      Block object.
@@ -17,10 +19,12 @@
 function render_block_core_social_link( $attributes, $content, $block ) {
 	$open_in_new_tab = isset( $block->context['openInNewTab'] ) ? $block->context['openInNewTab'] : false;
 
-	$service     = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
-	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
-	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
-	$rel         = ( isset( $attributes['rel'] ) ) ? $attributes['rel'] : '';
+	$text = ! empty( $attributes['label'] ) ? trim( $attributes['label'] ) : '';
+
+	$service     = isset( $attributes['service'] ) ? $attributes['service'] : 'Icon';
+	$url         = isset( $attributes['url'] ) ? $attributes['url'] : false;
+	$text        = $text ? $text : block_core_social_link_get_name( $service );
+	$rel         = isset( $attributes['rel'] ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
 	// Don't render a link if there is no URL set.
@@ -33,7 +37,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	 * The `is_email` returns false for emails with schema.
 	 */
 	if ( is_email( $url ) ) {
-		$url = 'mailto:' . $url;
+		$url = 'mailto:' . antispambot( $url );
 	}
 
 	/**
@@ -47,7 +51,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service,
+			'class' => 'wp-social-link wp-social-link-' . $service . block_core_social_link_get_color_classes( $block->context ),
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);
@@ -55,23 +59,24 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link  = '<li ' . $wrapper_attributes . '>';
 	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
-	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">';
-	$link .= esc_html( $label );
-	$link .= '</span></a></li>';
+	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $text ) . '</span>';
+	$link .= '</a></li>';
 
-	$w = new WP_HTML_Tag_Processor( $link );
-	$w->next_tag( 'a' );
+	$processor = new WP_HTML_Tag_Processor( $link );
+	$processor->next_tag( 'a' );
 	if ( $open_in_new_tab ) {
-		$w->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
-		$w->set_attribute( 'target', '_blank' );
+		$processor->set_attribute( 'rel', trim( $rel . ' noopener nofollow' ) );
+		$processor->set_attribute( 'target', '_blank' );
 	} elseif ( '' !== $rel ) {
-		$w->set_attribute( 'rel', esc_attr( $rel ) );
+		$processor->set_attribute( 'rel', trim( $rel ) );
 	}
-	return $w;
+	return $processor->get_updated_html();
 }
 
 /**
  * Registers the `core/social-link` blocks.
+ *
+ * @since 5.4.0
  */
 function register_block_core_social_link() {
 	register_block_type_from_metadata(
@@ -87,6 +92,8 @@ function register_block_core_social_link() {
 /**
  * Returns the SVG for social link.
  *
+ * @since 5.4.0
+ *
  * @param string $service The service icon.
  *
  * @return string SVG Element for service icon.
@@ -103,6 +110,8 @@ function block_core_social_link_get_icon( $service ) {
 /**
  * Returns the brand name for social link.
  *
+ * @since 5.4.0
+ *
  * @param string $service The service icon.
  *
  * @return string Brand label.
@@ -119,6 +128,8 @@ function block_core_social_link_get_name( $service ) {
 /**
  * Returns the SVG for social link.
  *
+ * @since 5.4.0
+ *
  * @param string $service The service slug to extract data from.
  * @param string $field The field ('name', 'icon', etc) to extract for a service.
  *
@@ -142,9 +153,13 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Behance',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>',
 		),
+		'bluesky'       => array(
+			'name' => 'Bluesky',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"></path></svg>',
+		),
 		'chain'         => array(
 			'name' => 'Link',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.647,16.706a1.134,1.134,0,0,0-.343-.833l-2.549-2.549a1.134,1.134,0,0,0-.833-.343,1.168,1.168,0,0,0-.883.392l.233.226q.2.189.264.264a2.922,2.922,0,0,1,.184.233.986.986,0,0,1,.159.312,1.242,1.242,0,0,1,.043.337,1.172,1.172,0,0,1-1.176,1.176,1.237,1.237,0,0,1-.337-.043,1,1,0,0,1-.312-.159,2.76,2.76,0,0,1-.233-.184q-.073-.068-.264-.264l-.226-.233a1.19,1.19,0,0,0-.4.895,1.134,1.134,0,0,0,.343.833L15.837,19.3a1.13,1.13,0,0,0,.833.331,1.18,1.18,0,0,0,.833-.318l1.8-1.789a1.12,1.12,0,0,0,.343-.821Zm-8.615-8.64a1.134,1.134,0,0,0-.343-.833L8.163,4.7a1.134,1.134,0,0,0-.833-.343,1.184,1.184,0,0,0-.833.331L4.7,6.473a1.12,1.12,0,0,0-.343.821,1.134,1.134,0,0,0,.343.833l2.549,2.549a1.13,1.13,0,0,0,.833.331,1.184,1.184,0,0,0,.883-.38L8.728,10.4q-.2-.189-.264-.264A2.922,2.922,0,0,1,8.28,9.9a.986.986,0,0,1-.159-.312,1.242,1.242,0,0,1-.043-.337A1.172,1.172,0,0,1,9.254,8.079a1.237,1.237,0,0,1,.337.043,1,1,0,0,1,.312.159,2.761,2.761,0,0,1,.233.184q.073.068.264.264l.226.233a1.19,1.19,0,0,0,.4-.895ZM22,16.706a3.343,3.343,0,0,1-1.042,2.488l-1.8,1.789a3.536,3.536,0,0,1-4.988-.025l-2.525-2.537a3.384,3.384,0,0,1-1.017-2.488,3.448,3.448,0,0,1,1.078-2.561l-1.078-1.078a3.434,3.434,0,0,1-2.549,1.078,3.4,3.4,0,0,1-2.5-1.029L3.029,9.794A3.4,3.4,0,0,1,2,7.294,3.343,3.343,0,0,1,3.042,4.806l1.8-1.789A3.384,3.384,0,0,1,7.331,2a3.357,3.357,0,0,1,2.5,1.042l2.525,2.537a3.384,3.384,0,0,1,1.017,2.488,3.448,3.448,0,0,1-1.078,2.561l1.078,1.078a3.551,3.551,0,0,1,5.049-.049l2.549,2.549A3.4,3.4,0,0,1,22,16.706Z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z"></path></svg>',
 		),
 		'codepen'       => array(
 			'name' => 'CodePen',
@@ -194,6 +209,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'GitHub',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg>',
 		),
+		'gravatar'      => array(
+			'name' => 'Gravatar',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z" /></svg>',
+		),
 		'instagram'     => array(
 			'name' => 'Instagram',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg>',
@@ -208,7 +227,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'mail'          => array(
 			'name' => 'Mail',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20,4H4C2.895,4,2,4.895,2,6v12c0,1.105,0.895,2,2,2h16c1.105,0,2-0.895,2-2V6C22,4.895,21.105,4,20,4z M20,8.236l-8,4.882 L4,8.236V6h16V8.236z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19,5H5c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm.5,12c0,.3-.2.5-.5.5H5c-.3,0-.5-.2-.5-.5V9.8l7.5,5.6,7.5-5.6V17zm0-9.1L12,13.6,4.5,7.9V7c0-.3.2-.5.5-.5h14c.3,0,.5.2.5.5v.9z"></path></svg>',
 		),
 		'mastodon'      => array(
 			'name' => 'Mastodon',
@@ -220,11 +239,11 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'medium'        => array(
 			'name' => 'Medium',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12"></path></svg>',
 		),
 		'patreon'       => array(
 			'name' => 'Patreon',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 569 546" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><circle cx="363" cy="205" r="205" /><rect width="100" height="546" x="0" y="0" /></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20 8.40755C19.9969 6.10922 18.2543 4.22555 16.2097 3.54588C13.6708 2.70188 10.3222 2.82421 7.89775 3.99921C4.95932 5.42355 4.03626 8.54355 4.00186 11.6552C3.97363 14.2136 4.2222 20.9517 7.92225 20.9997C10.6715 21.0356 11.0809 17.3967 12.3529 15.6442C13.258 14.3974 14.4233 14.0452 15.8578 13.6806C18.3233 13.0537 20.0036 11.0551 20 8.40755Z" /></svg>',
 		),
 		'pinterest'     => array(
 			'name' => 'Pinterest',
@@ -236,7 +255,11 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'reddit'        => array(
 			'name' => 'Reddit',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M5.27 9.221A2.775 2.775 0 0 0 2.498 11.993a2.785 2.785 0 0 0 1.6 2.511 5.337 5.337 0 0 0 2.374 4.11 9.386 9.386 0 0 0 5.539 1.7 9.386 9.386 0 0 0 5.541-1.7 5.331 5.331 0 0 0 2.372-4.114 2.787 2.787 0 0 0 1.583-2.5 2.775 2.775 0 0 0-2.772-2.772 2.742 2.742 0 0 0-1.688.574 9.482 9.482 0 0 0-4.637-1.348v-.008a2.349 2.349 0 0 1 2.011-2.316 1.97 1.97 0 0 0 1.926 1.521 1.98 1.98 0 0 0 1.978-1.978 1.98 1.98 0 0 0-1.978-1.978 1.985 1.985 0 0 0-1.938 1.578 3.183 3.183 0 0 0-2.849 3.172v.011a9.463 9.463 0 0 0-4.59 1.35 2.741 2.741 0 0 0-1.688-.574Zm6.736 9.1a3.162 3.162 0 0 1-2.921-1.944.215.215 0 0 1 .014-.2.219.219 0 0 1 .168-.106 27.327 27.327 0 0 1 2.74-.133 27.357 27.357 0 0 1 2.74.133.219.219 0 0 1 .168.106.215.215 0 0 1 .014.2 3.158 3.158 0 0 1-2.921 1.944Zm3.743-3.157a1.265 1.265 0 0 1-1.4-1.371 1.954 1.954 0 0 1 .482-1.442 1.15 1.15 0 0 1 .842-.379 1.7 1.7 0 0 1 1.49 1.777 1.323 1.323 0 0 1-.325 1.015 1.476 1.476 0 0 1-1.089.4Zm-7.485 0a1.476 1.476 0 0 1-1.086-.4 1.323 1.323 0 0 1-.325-1.016 1.7 1.7 0 0 1 1.49-1.777 1.151 1.151 0 0 1 .843.379 1.951 1.951 0 0 1 .481 1.441 1.276 1.276 0 0 1-1.403 1.373Z"></path></svg>',
+		),
+		'share'         => array(
+			'name' => 'Share Icon',
+			'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
 		),
 		'skype'         => array(
 			'name' => 'Skype',
@@ -258,6 +281,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Telegram',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M28.9700376,63.3244248 C47.6273373,55.1957357 60.0684594,49.8368063 66.2934036,47.2476366 C84.0668845,39.855031 87.7600616,38.5708563 90.1672227,38.528 C90.6966555,38.5191258 91.8804274,38.6503351 92.6472251,39.2725385 C93.294694,39.7979149 93.4728387,40.5076237 93.5580865,41.0057381 C93.6433345,41.5038525 93.7494885,42.63857 93.6651041,43.5252052 C92.7019529,53.6451182 88.5344133,78.2034783 86.4142057,89.5379542 C85.5170662,94.3339958 83.750571,95.9420841 82.0403991,96.0994568 C78.3237996,96.4414641 75.5015827,93.6432685 71.9018743,91.2836143 C66.2690414,87.5912212 63.0868492,85.2926952 57.6192095,81.6896017 C51.3004058,77.5256038 55.3966232,75.2369981 58.9976911,71.4967761 C59.9401076,70.5179421 76.3155302,55.6232293 76.6324771,54.2720454 C76.6721165,54.1030573 76.7089039,53.4731496 76.3346867,53.1405352 C75.9604695,52.8079208 75.4081573,52.921662 75.0095933,53.0121213 C74.444641,53.1403447 65.4461175,59.0880351 48.0140228,70.8551922 C45.4598218,72.6091037 43.1463059,73.4636682 41.0734751,73.4188859 C38.7883453,73.3695169 34.3926725,72.1268388 31.1249416,71.0646282 C27.1169366,69.7617838 23.931454,69.0729605 24.208838,66.8603276 C24.3533167,65.7078514 25.9403832,64.5292172 28.9700376,63.3244248 Z" /></svg>',
 		),
+		'threads'       => array(
+			'name' => 'Threads',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.3 11.3c-.1 0-.2-.1-.2-.1-.1-2.6-1.5-4-3.9-4-1.4 0-2.6.6-3.3 1.7l1.3.9c.5-.8 1.4-1 2-1 .8 0 1.4.2 1.7.7.3.3.5.8.5 1.3-.7-.1-1.4-.2-2.2-.1-2.2.1-3.7 1.4-3.6 3.2 0 .9.5 1.7 1.3 2.2.7.4 1.5.6 2.4.6 1.2-.1 2.1-.5 2.7-1.3.5-.6.8-1.4.9-2.4.6.3 1 .8 1.2 1.3.4.9.4 2.4-.8 3.6-1.1 1.1-2.3 1.5-4.3 1.5-2.1 0-3.8-.7-4.8-2S5.7 14.3 5.7 12c0-2.3.5-4.1 1.5-5.4 1.1-1.3 2.7-2 4.8-2 2.2 0 3.8.7 4.9 2 .5.7.9 1.5 1.2 2.5l1.5-.4c-.3-1.2-.8-2.2-1.5-3.1-1.3-1.7-3.3-2.6-6-2.6-2.6 0-4.7.9-6 2.6C4.9 7.2 4.3 9.3 4.3 12s.6 4.8 1.9 6.4c1.4 1.7 3.4 2.6 6 2.6 2.3 0 4-.6 5.3-2 1.8-1.8 1.7-4 1.1-5.4-.4-.9-1.2-1.7-2.3-2.3zm-4 3.8c-1 .1-2-.4-2-1.3 0-.7.5-1.5 2.1-1.6h.5c.6 0 1.1.1 1.6.2-.2 2.3-1.3 2.7-2.2 2.7z"/></svg>',
+		),
 		'tiktok'        => array(
 			'name' => 'TikTok',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" /></svg>',
@@ -290,6 +317,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'WhatsApp',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path></svg>',
 		),
+		'x'             => array(
+			'name' => 'X',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg>',
+		),
 		'yelp'          => array(
 			'name' => 'Yelp',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',
@@ -298,10 +329,6 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'YouTube',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg>',
 		),
-		'share'         => array(
-			'name' => 'Share Icon',
-			'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
-		),
 	);
 
 	if ( ! empty( $service )
@@ -320,6 +347,8 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 /**
  * Returns CSS styles for icon and icon background colors.
  *
+ * @since 5.7.0
+ *
  * @param array $context Block context passed to Social Link.
  *
  * @return string Inline CSS styles for link's icon and background colors.
@@ -337,3 +366,26 @@ function block_core_social_link_get_color_styles( $context ) {
 
 	return implode( '', $styles );
 }
+
+/**
+ * Returns CSS classes for icon and icon background colors.
+ *
+ * @since 6.3.0
+ *
+ * @param array $context Block context passed to Social Sharing Link.
+ *
+ * @return string CSS classes for link's icon and background colors.
+ */
+function block_core_social_link_get_color_classes( $context ) {
+	$classes = array();
+
+	if ( array_key_exists( 'iconColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconColor'] . '-color';
+	}
+
+	if ( array_key_exists( 'iconBackgroundColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconBackgroundColor'] . '-background-color';
+	}
+
+	return ' ' . implode( ' ', $classes );
+}
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 9ac527dccd0d39..909e9b90a54c5c 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
  */
@@ -19,10 +14,10 @@ import { ChainIcon } from './icons';
  *
  * @param {string} name key for a social service (lowercase slug)
  *
- * @return {WPComponent} Icon component for social service.
+ * @return {Component} 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/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
index 65542dafd95413..35420fc624c0e6 100644
--- a/packages/block-library/src/social-link/socials-with-bg.scss
+++ b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -18,6 +18,11 @@
 	color: #fff;
 }
 
+.wp-social-link-bluesky {
+	background-color: #0a7aff;
+	color: #fff;
+}
+
 .wp-social-link-codepen {
 	background-color: #1e1f26;
 	color: #fff;
@@ -44,7 +49,7 @@
 }
 
 .wp-social-link-facebook {
-	background-color: #1778f2;
+	background-color: #0866ff;
 	color: #fff;
 }
 
@@ -78,6 +83,11 @@
 	color: #fff;
 }
 
+.wp-social-link-gravatar {
+	background-color: #1d4fc4;
+	color: #fff;
+}
+
 .wp-social-link-instagram {
 	background-color: #f00075;
 	color: #fff;
@@ -99,7 +109,7 @@
 }
 
 .wp-social-link-medium {
-	background-color: #02ab6c;
+	background-color: #000;
 	color: #fff;
 }
 
@@ -109,7 +119,7 @@
 }
 
 .wp-social-link-patreon {
-	background-color: #ff424d;
+	background-color: #000;
 	color: #fff;
 }
 
@@ -154,6 +164,11 @@
 	color: #fff;
 }
 
+.wp-social-link-threads {
+	background-color: #000;
+	color: #fff;
+}
+
 .wp-social-link-tiktok {
 	background-color: #000;
 	color: #fff;
@@ -194,6 +209,11 @@
 	color: #fff;
 }
 
+.wp-social-link-x {
+	background-color: #000;
+	color: #fff;
+}
+
 .wp-social-link-yelp {
 	background-color: #d32422;
 	color: #fff;
diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss
index 82af8d42ef1b8a..24538b29824b17 100644
--- a/packages/block-library/src/social-link/socials-without-bg.scss
+++ b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -10,6 +10,10 @@
 	color: #0757fe;
 }
 
+.wp-social-link-bluesky {
+	color: #0a7aff;
+}
+
 .wp-social-link-codepen {
 	color: #1e1f26;
 }
@@ -31,7 +35,7 @@
 }
 
 .wp-social-link-facebook {
-	color: #1778f2;
+	color: #0866ff;
 }
 
 .wp-social-link-fivehundredpx {
@@ -58,6 +62,10 @@
 	color: #ea4434;
 }
 
+.wp-social-link-gravatar {
+	color: #1d4fc4;
+}
+
 .wp-social-link-instagram {
 	color: #f00075;
 }
@@ -75,7 +83,7 @@
 }
 
 .wp-social-link-medium {
-	color: #02ab6c;
+	color: #000;
 }
 
 .wp-social-link-meetup {
@@ -83,7 +91,7 @@
 }
 
 .wp-social-link-patreon {
-	color: #ff424d;
+	color: #000;
 }
 
 .wp-social-link-pinterest {
@@ -119,6 +127,10 @@
 	color: #2aabee;
 }
 
+.wp-social-link-threads {
+	color: #000;
+}
+
 .wp-social-link-tiktok {
 	color: #000;
 }
@@ -151,6 +163,10 @@
 	color: #3499cd;
 }
 
+.wp-social-link-x {
+	color: #000;
+}
+
 .wp-social-link-yelp {
 	color: #d32422;
 }
diff --git a/packages/block-library/src/social-link/test/index.native.js b/packages/block-library/src/social-link/test/index.native.js
deleted file mode 100644
index 603776e939998f..00000000000000
--- a/packages/block-library/src/social-link/test/index.native.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, initializeEditor, waitFor, within } from 'test/helpers';
-/**
- * WordPress dependencies
- */
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-
-const unregisterBlocks = () => {
-	const blocks = getBlockTypes();
-
-	blocks.forEach( ( { name } ) => unregisterBlockType( name ) );
-};
-
-describe( '<SocialLinkEdit/>', () => {
-	beforeAll( () => {
-		registerCoreBlocks();
-	} );
-
-	afterAll( () => {
-		unregisterBlocks();
-	} );
-
-	/**
-	 * GIVEN an EDITOR is displayed;
-	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
-	 */
-	it( 'should display WORDPRESS, FACEBOOK, TWITTER, INSTAGRAM by default.', async () => {
-		// Arrange
-		const subject = await initializeEditor( {} );
-
-		// Act
-		fireEvent.press(
-			await waitFor( () => subject.getByLabelText( 'Add block' ) )
-		);
-		fireEvent.changeText(
-			await waitFor( () =>
-				subject.getByPlaceholderText( 'Search blocks' )
-			),
-			'social icons'
-		);
-		fireEvent.press(
-			await waitFor( () =>
-				subject.getByLabelText( 'Social Icons block' )
-			)
-		);
-		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByLabelText( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
-			'layout',
-			{ nativeEvent: { layout: { width: 100 } } }
-		);
-
-		// Assert
-		expect(
-			await waitFor( () =>
-				subject.getByLabelText( /WordPress social icon/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByLabelText( /Facebook social icon/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByLabelText( /Twitter social icon/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByLabelText( /Instagram social icon/ )
-			)
-		).toBeDefined();
-	} );
-
-	/**
-	 * GIVEN an EDITOR is displayed;
-	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
-	 */
-	it( `should display WORDPRESS with a URL set by default
-	     AND should display FACEBOOK, TWITTER, INSTAGRAM with NO URL set by default.`, async () => {
-		// Arrange
-		const subject = await initializeEditor( {} );
-
-		// Act
-		fireEvent.press(
-			await waitFor( () => subject.getByLabelText( 'Add block' ) )
-		);
-		fireEvent.changeText(
-			await waitFor( () =>
-				subject.getByPlaceholderText( 'Search blocks' )
-			),
-			'social icons'
-		);
-		fireEvent.press(
-			await waitFor( () =>
-				subject.getByLabelText( 'Social Icons block' )
-			)
-		);
-		fireEvent(
-			await waitFor( () =>
-				within(
-					subject.getByLabelText( /Social Icons Block. Row 1/ )
-				).getByTestId( 'block-list-wrapper' )
-			),
-			'layout',
-			{ nativeEvent: { layout: { width: 100 } } }
-		);
-
-		// Assert
-		expect(
-			await waitFor( () =>
-				subject.getByA11yHint( /WordPress has URL set/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByA11yHint( /Facebook has no URL set/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByA11yHint( /Twitter has no URL set/ )
-			)
-		).toBeDefined();
-		expect(
-			await waitFor( () =>
-				subject.getByA11yHint( /Instagram has no URL set/ )
-			)
-		).toBeDefined();
-	} );
-} );
diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
index 40aaf3cc9d0f1b..a97a396882d761 100644
--- a/packages/block-library/src/social-link/variations.js
+++ b/packages/block-library/src/social-link/variations.js
@@ -5,6 +5,7 @@ import {
 	AmazonIcon,
 	BandcampIcon,
 	BehanceIcon,
+	BlueskyIcon,
 	ChainIcon,
 	CodepenIcon,
 	DeviantArtIcon,
@@ -19,6 +20,7 @@ import {
 	GoodreadsIcon,
 	GoogleIcon,
 	GitHubIcon,
+	GravatarIcon,
 	InstagramIcon,
 	LastfmIcon,
 	LinkedInIcon,
@@ -35,6 +37,7 @@ import {
 	SoundCloudIcon,
 	SpotifyIcon,
 	TelegramIcon,
+	ThreadsIcon,
 	TiktokIcon,
 	TumblrIcon,
 	TwitchIcon,
@@ -43,6 +46,7 @@ import {
 	VkIcon,
 	WhatsAppIcon,
 	WordPressIcon,
+	XIcon,
 	YelpIcon,
 	YouTubeIcon,
 } from './icons';
@@ -80,6 +84,12 @@ const variations = [
 		title: 'Behance',
 		icon: BehanceIcon,
 	},
+	{
+		name: 'bluesky',
+		attributes: { service: 'bluesky' },
+		title: 'Bluesky',
+		icon: BlueskyIcon,
+	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
@@ -158,6 +168,12 @@ const variations = [
 		title: 'GitHub',
 		icon: GitHubIcon,
 	},
+	{
+		name: 'gravatar',
+		attributes: { service: 'gravatar' },
+		title: 'Gravatar',
+		icon: GravatarIcon,
+	},
 	{
 		name: 'instagram',
 		attributes: { service: 'instagram' },
@@ -255,6 +271,12 @@ const variations = [
 		title: 'Telegram',
 		icon: TelegramIcon,
 	},
+	{
+		name: 'threads',
+		attributes: { service: 'threads' },
+		title: 'Threads',
+		icon: ThreadsIcon,
+	},
 	{
 		name: 'tiktok',
 		attributes: { service: 'tiktok' },
@@ -297,6 +319,13 @@ const variations = [
 		title: 'WhatsApp',
 		icon: WhatsAppIcon,
 	},
+	{
+		name: 'x',
+		attributes: { service: 'x' },
+		keywords: [ 'twitter' ],
+		title: 'X',
+		icon: XIcon,
+	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },
@@ -317,7 +346,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.service === variationAttributes.service;
 } );
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
index a7707cf1951345..bd750f26b3960c 100644
--- a/packages/block-library/src/social-links/block.json
+++ b/packages/block-library/src/social-links/block.json
@@ -1,10 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-links",
 	"title": "Social Icons",
 	"category": "widgets",
-	"description": "Display icons linking to your social media profiles or sites.",
+	"allowedBlocks": [ "core/social-link" ],
+	"description": "Display icons linking to your social profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
 	"attributes": {
@@ -41,14 +42,16 @@
 	"providesContext": {
 		"openInNewTab": "openInNewTab",
 		"showLabels": "showLabels",
+		"iconColor": "iconColor",
 		"iconColorValue": "iconColorValue",
+		"iconBackgroundColor": "iconBackgroundColor",
 		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"anchor": true,
 		"__experimentalExposeControlsToChildren": true,
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,
@@ -71,7 +74,24 @@
 			"padding": true,
 			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"blockGap": true,
+				"margin": true,
+				"padding": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
 			}
 		}
 	},
diff --git a/packages/block-library/src/social-links/deprecated.js b/packages/block-library/src/social-links/deprecated.js
index b5a56db3e102cb..e13cdaba6a43ce 100644
--- a/packages/block-library/src/social-links/deprecated.js
+++ b/packages/block-library/src/social-links/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ const deprecated = [
 				},
 			} = props;
 
-			const className = classNames( size, {
+			const className = clsx( size, {
 				'has-icon-color': iconColorValue,
 				'has-icon-background-color': iconBackgroundColorValue,
 				[ `items-justified-${ itemsJustification }` ]:
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index eb1f83180e6e7f..068b34a3a70a4e 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
 import { useEffect, useRef } from '@wordpress/element';
 import {
 	BlockControls,
@@ -15,8 +14,10 @@ import {
 	InspectorControls,
 	ContrastChecker,
 	withColors,
+	InnerBlocks,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	MenuGroup,
@@ -27,8 +28,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
-
-const ALLOWED_BLOCKS = [ 'core/social-link' ];
+import { useSelect } from '@wordpress/data';
 
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
@@ -37,18 +37,9 @@ const sizeOptions = [
 	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
-const getDefaultBlockLayout = ( blockTypeOrName ) => {
-	const layoutBlockSupportConfig = getBlockSupport(
-		blockTypeOrName,
-		'__experimentalLayout'
-	);
-	return layoutBlockSupportConfig?.default;
-};
-
 export function SocialLinksEdit( props ) {
 	const {
 		clientId,
-		name,
 		attributes,
 		iconBackgroundColor,
 		iconColor,
@@ -65,18 +56,24 @@ export function SocialLinksEdit( props ) {
 		openInNewTab,
 		showLabels,
 		size,
-		layout,
 	} = attributes;
-	const usedLayout = layout || getDefaultBlockLayout( name );
+
+	const hasSelectedChild = useSelect(
+		( select ) =>
+			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+		[ clientId ]
+	);
+
+	const hasAnySelected = isSelected || hasSelectedChild;
 
 	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
 
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
-	const backgroundBackup = useRef( {} );
+	const backgroundBackupRef = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
-			backgroundBackup.current = {
+			backgroundBackupRef.current = {
 				iconBackgroundColor,
 				iconBackgroundColorValue,
 				customIconBackgroundColor,
@@ -87,7 +84,7 @@ export function SocialLinksEdit( props ) {
 				iconBackgroundColorValue: undefined,
 			} );
 		} else {
-			setAttributes( { ...backgroundBackup.current } );
+			setAttributes( { ...backgroundBackupRef.current } );
 		}
 	}, [ logosOnly ] );
 
@@ -101,15 +98,9 @@ export function SocialLinksEdit( props ) {
 		</li>
 	);
 
-	const SelectedSocialPlaceholder = (
-		<li className="wp-block-social-links__social-prompt">
-			{ __( 'Click plus to add' ) }
-		</li>
-	);
-
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
@@ -118,11 +109,11 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
-		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
+		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
+		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
-		__experimentalLayout: usedLayout,
+		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
 	} );
 
 	const POPOVER_PROPS = {
@@ -207,8 +198,9 @@ export function SocialLinksEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open links in new tab' ) }
 						checked={ openInNewTab }
 						onChange={ () =>
@@ -216,7 +208,8 @@ export function SocialLinksEdit( props ) {
 						}
 					/>
 					<ToggleControl
-						label={ __( 'Show labels' ) }
+						__nextHasNoMarginBottom
+						label={ __( 'Show text' ) }
 						checked={ showLabels }
 						onChange={ () =>
 							setAttributes( { showLabels: ! showLabels } )
@@ -224,38 +217,39 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls __experimentalGroup="color">
-				{ colorSettings.map(
-					( { onChange, label, value, resetAllFilter } ) => (
-						<ColorGradientSettingsDropdown
-							key={ `social-links-color-${ label }` }
-							__experimentalHasMultipleOrigins
-							__experimentalIsRenderedInSidebar
-							settings={ [
-								{
-									colorValue: value,
-									label,
-									onColorChange: onChange,
-									isShownByDefault: true,
-									resetAllFilter,
-									enableAlpha: true,
-								},
-							] }
-							panelId={ clientId }
-							{ ...colorGradientSettings }
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					{ colorSettings.map(
+						( { onChange, label, value, resetAllFilter } ) => (
+							<ColorGradientSettingsDropdown
+								key={ `social-links-color-${ label }` }
+								__experimentalIsRenderedInSidebar
+								settings={ [
+									{
+										colorValue: value,
+										label,
+										onColorChange: onChange,
+										isShownByDefault: true,
+										resetAllFilter,
+										enableAlpha: true,
+									},
+								] }
+								panelId={ clientId }
+								{ ...colorGradientSettings }
+							/>
+						)
+					) }
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
 						/>
-					)
-				) }
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
-			</InspectorControls>
+					) }
+				</InspectorControls>
+			) }
 			<ul { ...innerBlocksProps } />
 		</>
 	);
diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
index 9a3b1bdc8694ba..c250465302227a 100644
--- a/packages/block-library/src/social-links/edit.native.js
+++ b/packages/block-library/src/social-links/edit.native.js
@@ -17,11 +17,6 @@ import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './editor.scss';
-import variations from '../social-link/variations';
-
-const ALLOWED_BLOCKS = variations.map(
-	( v ) => `core/social-link-${ v.name }`
-);
 
 // Template contains the links that show when start.
 const TEMPLATE = [
@@ -57,8 +52,8 @@ function SocialLinksEdit( {
 	}, [ shouldRenderFooterAppender ] );
 
 	const renderFooterAppender = useRef( () => (
-		<View>
-			<InnerBlocks.ButtonBlockAppender isFloating={ true } />
+		<View style={ styles.footerAppenderContainer }>
+			<InnerBlocks.ButtonBlockAppender isFloating />
 		</View>
 	) );
 
@@ -95,13 +90,12 @@ function SocialLinksEdit( {
 
 	return (
 		<InnerBlocks
-			allowedBlocks={ ALLOWED_BLOCKS }
 			templateLock={ false }
 			template={ initialCreation && TEMPLATE }
 			renderFooterAppender={
 				shouldRenderFooterAppender && renderFooterAppender.current
 			}
-			orientation={ 'horizontal' }
+			orientation="horizontal"
 			onDeleteBlock={ shouldDelete ? onDelete : undefined }
 			marginVertical={ spacing }
 			marginHorizontal={ spacing }
diff --git a/packages/block-library/src/social-links/editor.native.scss b/packages/block-library/src/social-links/editor.native.scss
index cfba35769c7190..23030419f8891d 100644
--- a/packages/block-library/src/social-links/editor.native.scss
+++ b/packages/block-library/src/social-links/editor.native.scss
@@ -19,3 +19,7 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 }
+
+.footerAppenderContainer {
+	margin: $block-selected-margin 0;
+}
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index c6e0d97a858b3c..11f1ed86d11220 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -1,26 +1,28 @@
 // Editor specific styles for Social Links.
-.wp-block-social-links {
-	div.block-editor-url-input {
-		display: inline-block;
-		margin-left: $grid-unit-10;
-	}
-
-	// Unset background colors that can be inherited from Global Styles.
-	// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
-	// The rule can be removed if editor styles get lowered in specificity.
-	&.wp-block-social-links {
-		background: none;
-	}
+.wp-block-social-links div.block-editor-url-input {
+	display: inline-block;
+	margin-left: $grid-unit-10;
 }
 
+
 // Prevent toolbar from jumping when selecting / hovering a link.
 .wp-social-link:hover {
 	transform: none;
 }
 
-.editor-styles-wrapper .wp-block-social-links {
+// Specificity for the following styles are fixed at 0-1-0 to match and be
+// overridable by global styles.
+:root :where(.wp-block-social-links),
+:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
 	padding: 0;
 }
+:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
+}
 
 // Placeholder/setup state.
 .wp-block-social-links__social-placeholder {
@@ -44,19 +46,6 @@
 		display: flex;
 	}
 
-	.wp-social-link {
-		padding: 0.25em;
-
-		.is-style-pill-shape & {
-			padding-left: calc((2/3) * 1em);
-			padding-right: calc((2/3) * 1em);
-		}
-
-		.is-style-logos-only & {
-			padding: 0;
-		}
-	}
-
 	.wp-social-link::before {
 		content: "";
 		display: block;
@@ -74,7 +63,6 @@
 .wp-block-social-links .wp-block-social-links__social-prompt {
 	min-height: $button-size-small;
 	list-style: none;
-	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
 	// Show as block UI.
 	font-family: $default-font;
@@ -87,12 +75,13 @@
 }
 
 // Center flex items. This has an equivalent in style.scss.
-.wp-block[data-align="center"] > .wp-block-social-links {
+.wp-block[data-align="center"] > .wp-block-social-links,
+.wp-block.wp-block-social-links.aligncenter {
 	justify-content: center;
 }
 
 // Improve the preview, ensure buttons are fully opaque despite being disabled.
-// @todo: Look at improving the preview component to make this unnecessary.
+// @todo Look at improving the preview component to make this unnecessary.
 .block-editor-block-preview__content .components-button:disabled {
 	opacity: 1;
 }
@@ -108,3 +97,14 @@
 .wp-social-link.wp-social-link__is-incomplete:focus {
 	opacity: 1;
 }
+
+.wp-block-social-links .block-list-appender {
+	position: static; // display inline.
+
+	.block-editor-button-block-appender {
+		height: 1.5em;
+		width: 1.5em;
+		font-size: inherit;
+		padding: 0;
+	}
+}
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
index 07a91424166241..53d22430850487 100644
--- a/packages/block-library/src/social-links/save.js
+++ b/packages/block-library/src/social-links/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default function save( props ) {
 		},
 	} = props;
 
-	const className = classNames( size, {
+	const className = clsx( size, {
 		'has-visible-labels': showLabels,
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 582edd4f22bac6..955c0434feea22 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -21,12 +21,6 @@
 	}
 
 	.wp-social-link {
-		// By setting the font size, we can scale icons and paddings consistently based on that.
-		// This also allows themes to override this, if need be.
-		a {
-			padding: 0.25em;
-		}
-
 		svg {
 			width: 1em;
 			height: 1em;
@@ -95,32 +89,37 @@
 }
 
 // This needs specificity because themes usually override it with things like .widget-area a.
-.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor {
-	&,
-	&:hover,
-	&:active,
-	&:visited,
-	svg {
-		color: currentColor;
-		fill: currentColor;
+.wp-block-social-links .wp-block-social-link.wp-social-link {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+
+	.wp-block-social-link-anchor {
+		&,
+		&:hover,
+		&:active,
+		&:visited,
+		svg {
+			color: currentColor;
+			fill: currentColor;
+		}
 	}
 }
 
 // Provide colors for a range of icons.
-.wp-block-social-links:not(.is-style-logos-only) {
+:where(.wp-block-social-links:not(.is-style-logos-only)) {
 	// Generic items such as mail, feed, etc.
 	@import "../social-link/socials-with-bg.scss";
 }
 
 // Treatment for logos only style.
-.wp-block-social-links.is-style-logos-only {
+// The specificity for this selector has not been reduced to 0-1-0 as per
+// global styles variation selectors as the lack of background should be
+// enforced for this block style.
+:where(.wp-block-social-links.is-style-logos-only) {
 	.wp-social-link {
 		background: none;
 
-		a {
-			padding: 0;
-		}
-
 		// Make these bigger.
 		svg {
 			width: 1.25em;
@@ -136,9 +135,27 @@
 	.wp-social-link {
 		width: auto;
 	}
+}
+
+// The following rules have their selector specificity set to 0-1-0 to
+// facilitate theme.json styling of the inner social-link block padding.
+:root :where(.wp-block-social-links .wp-social-link a) {
+	padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
+	padding: 0;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
+	padding-left: calc((2/3) * 1em);
+	padding-right: calc((2/3) * 1em);
+}
 
-	.wp-social-link a {
-		padding-left: calc((2/3) * 1em);
-		padding-right: calc((2/3) * 1em);
+// Ensure the Snapchat label is visible when no custom
+// icon color or background color is set.
+.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) {
+	.wp-social-link-snapchat {
+		.wp-block-social-link-label {
+			color: #000;
+		}
 	}
 }
diff --git a/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap
index e1b9854d5f3e12..797a63c47530f1 100644
--- a/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/social-links/test/__snapshots__/edit.native.js.snap
@@ -2,25 +2,25 @@
 
 exports[`Social links block inserts block with the default icons and the WordPress link set as active 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->"
 `;
 
 exports[`Social links block shows active links correctly when not selected 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->
 
 <!-- wp:paragraph -->
@@ -30,11 +30,11 @@ exports[`Social links block shows active links correctly when not selected 1`] =
 
 exports[`Social links block shows the ghost placeholder when no icon is active 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /--></ul>
+<!-- wp:social-link {"service":"instagram"} /--></ul>
 <!-- /wp:social-links -->
 
 <!-- wp:paragraph -->
@@ -44,14 +44,14 @@ exports[`Social links block shows the ghost placeholder when no icon is active 1
 
 exports[`Social links block shows the social links bottom sheet when tapping on the inline appender 1`] = `
 "<!-- wp:social-links -->
-<ul class=\\"wp-block-social-links\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"facebook\\"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"twitter\\"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
 
-<!-- wp:social-link {\\"service\\":\\"instagram\\"} /-->
+<!-- wp:social-link {"service":"instagram"} /-->
 
-<!-- wp:social-link-amazon {\\"url\\":\\"\\"} /--></ul>
+<!-- wp:social-link-amazon {"url":""} /--></ul>
 <!-- /wp:social-links -->"
 `;
diff --git a/packages/block-library/src/social-links/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/social-links/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..3235a0fc9cfd52
--- /dev/null
+++ b/packages/block-library/src/social-links/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Social Icons block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Social Icons block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"service":"facebook"} /-->
+
+<!-- wp:social-link {"service":"twitter"} /-->
+
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:group -->"
+`;
diff --git a/packages/block-library/src/social-links/test/edit.native.js b/packages/block-library/src/social-links/test/edit.native.js
index ade94321278e95..1ff2c89768b03a 100644
--- a/packages/block-library/src/social-links/test/edit.native.js
+++ b/packages/block-library/src/social-links/test/edit.native.js
@@ -3,12 +3,16 @@
  */
 import {
 	addBlock,
+	dismissModal,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
 	within,
 	getBlock,
+	screen,
+	triggerBlockListLayout,
 	waitFor,
+	waitForModalVisible,
 } from 'test/helpers';
 
 /**
@@ -31,7 +35,7 @@ afterAll( () => {
 
 describe( 'Social links block', () => {
 	it( 'inserts block with the default icons and the WordPress link set as active', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -63,7 +67,7 @@ describe( 'Social links block', () => {
 	} );
 
 	it( 'shows active links correctly when not selected', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 
 		// Add Social Icons block
 		await addBlock( screen, 'Social Icons' );
@@ -103,8 +107,7 @@ describe( 'Social links block', () => {
 	} );
 
 	it( 'shows the social links bottom sheet when tapping on the inline appender', async () => {
-		const screen = await initializeEditor();
-		const { getByTestId, getByText } = screen;
+		await initializeEditor();
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -131,7 +134,7 @@ describe( 'Social links block', () => {
 		fireEvent.press( appenderButton );
 
 		// Find a social link in the inserter
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
@@ -143,16 +146,52 @@ describe( 'Social links block', () => {
 		} );
 
 		// Add the Amazon link
-		const amazonBlock = await waitFor( () => getByText( 'Amazon' ) );
+		const amazonBlock = await screen.findByText( 'Amazon' );
 		expect( amazonBlock ).toBeVisible();
 
 		fireEvent.press( amazonBlock );
 
+		await screen.findByTestId( 'navigation-screen-LinkSettingsScreen' );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'shows only the social link blocks when tapping on the inline appender', async () => {
+		await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Social Icons' );
+
+		// Get block
+		const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+		fireEvent.press( socialLinksBlock );
+		await triggerBlockListLayout( socialLinksBlock );
+
+		// Open the links bottom sheet
+		const appenderButton =
+			within( socialLinksBlock ).getByTestId( 'appender-button' );
+		fireEvent.press( appenderButton );
+
+		// Find a social link in the inserter
+		const inserterList = screen.getByTestId( 'InserterUI-Blocks' );
+
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( inserterList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		// Check the Paragraph core block is not in the list
+		expect(
+			within( inserterList ).queryByLabelText( 'Paragraph block' )
+		).toBeNull();
+	} );
+
 	it( 'shows the ghost placeholder when no icon is active', async () => {
-		const screen = await initializeEditor();
+		await initializeEditor();
 		const { getByLabelText } = screen;
 
 		// Add block
@@ -196,4 +235,32 @@ describe( 'Social links block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( "should set a icon's URL", async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Social Icons' );
+		fireEvent.press( screen.getByLabelText( 'Facebook social icon' ) );
+		fireEvent.press( screen.getByLabelText( 'Add link to Facebook' ) );
+
+		await waitForModalVisible(
+			screen.getByTestId( 'link-settings-navigation' )
+		);
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Add URL' ),
+			'https://facebook.com'
+		);
+		dismissModal( screen.getByTestId( 'link-settings-navigation' ) );
+
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:social-links -->
+		<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+		<!-- wp:social-link {"url":"https://facebook.com","service":"facebook","label":"","rel":""} /-->
+
+		<!-- wp:social-link {"service":"twitter"} /-->
+
+		<!-- wp:social-link {"service":"instagram"} /--></ul>
+		<!-- /wp:social-links -->"
+	` );
+	} );
 } );
diff --git a/packages/block-library/src/social-links/test/transforms.native.js b/packages/block-library/src/social-links/test/transforms.native.js
new file mode 100644
index 00000000000000..ce8bff9808f7cc
--- /dev/null
+++ b/packages/block-library/src/social-links/test/transforms.native.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+import { Animated } from 'react-native';
+
+const block = 'Social Icons';
+const initialHtml = `
+<!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+<!-- wp:social-link {"service":"facebook"} /-->
+<!-- wp:social-link {"service":"twitter"} /-->
+<!-- wp:social-link {"service":"instagram"} /--></ul>
+<!-- /wp:social-links -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	beforeAll( () => {
+		// Mock call to Animated.sequence for animating colors.
+		jest.spyOn( Animated, 'sequence' ).mockImplementation( () => ( {
+			start: ( cb ) => cb(),
+		} ) );
+	} );
+
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json
index 021ff9f4a2de33..447ea99cc0b677 100644
--- a/packages/block-library/src/spacer/block.json
+++ b/packages/block-library/src/spacer/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/spacer",
 	"title": "Spacer",
 	"category": "design",
@@ -23,6 +23,9 @@
 			"__experimentalDefaultControls": {
 				"margin": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-spacer-editor",
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
index 9571d07fab87f6..1e899e15aff0de 100644
--- a/packages/block-library/src/spacer/controls.js
+++ b/packages/block-library/src/spacer/controls.js
@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useSettings,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+	isValueSpacingPreset,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import {
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -10,56 +16,72 @@ import {
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-
+	const spacingSizes = useSpacingSizes();
+	const [ spacingUnits ] = useSettings( 'spacing.units' );
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
-	const availableUnitSettings = (
-		useSetting( 'spacing.units' ) || undefined
-	)?.filter( ( availableUnit ) => availableUnit !== '%' );
+	const availableUnits = spacingUnits
+		? spacingUnits.filter( ( unit ) => unit !== '%' )
+		: [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 	const units = useCustomUnits( {
-		availableUnits: availableUnitSettings || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits,
 		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
-		onChange( unprocessedValue );
+		onChange( unprocessedValue.all );
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
-	const computedValue = [
-		parsedQuantity,
-		isResizing ? 'px' : parsedUnit,
-	].join( '' );
+	const computedValue = isValueSpacingPreset( value )
+		? value
+		: [ parsedQuantity, isResizing ? 'px' : parsedUnit ].join( '' );
 
 	return (
-		<UnitControl
-			label={ label }
-			id={ inputId }
-			isResetValueOnUnitChange
-			min={ MIN_SPACER_SIZE }
-			onChange={ handleOnChange }
-			__unstableInputWidth={ '80px' }
-			value={ computedValue }
-			units={ units }
-		/>
+		<>
+			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+				<UnitControl
+					id={ inputId }
+					isResetValueOnUnitChange
+					min={ MIN_SPACER_SIZE }
+					onChange={ handleOnChange }
+					value={ computedValue }
+					units={ units }
+					label={ label }
+					__next40pxDefaultSize
+				/>
+			) }
+			{ spacingSizes?.length > 0 && (
+				<View className="tools-panel-item-spacing">
+					<SpacingSizesControl
+						values={ { all: computedValue } }
+						onChange={ handleOnChange }
+						label={ label }
+						sides={ [ 'all' ] }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ false }
+						showSideInLabel={ false }
+					/>
+				</View>
+			) }
+		</>
 	);
 }
 
diff --git a/packages/block-library/src/spacer/controls.native.js b/packages/block-library/src/spacer/controls.native.js
index 49cfd92a3029e1..6aacfae19fa82a 100644
--- a/packages/block-library/src/spacer/controls.native.js
+++ b/packages/block-library/src/spacer/controls.native.js
@@ -8,7 +8,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { useSetting } from '@wordpress/block-editor';
+import { useSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,16 +17,24 @@ import { __ } from '@wordpress/i18n';
 import { MIN_SPACER_SIZE } from './constants';
 import styles from './style.scss';
 
-const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
+export const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
 
-function Controls( { attributes, context, setAttributes } ) {
+function Controls( {
+	attributes,
+	context,
+	setAttributes,
+	presetWidth,
+	presetHeight,
+} ) {
 	const { orientation } = context;
 	const label = orientation !== 'horizontal' ? __( 'Height' ) : __( 'Width' );
 
-	const { height, width } = attributes;
+	const width = presetWidth || attributes.width;
+	const height = presetHeight || attributes.height;
 	const { valueToConvert, valueUnit: unit } =
 		getValueAndUnit( orientation !== 'horizontal' ? height : width ) || {};
 	const value = Number( valueToConvert );
+	const currentUnit = unit || 'px';
 
 	const setNewDimensions = ( nextValue, nextUnit ) => {
 		const valueWithUnit = `${ nextValue }${ nextUnit }`;
@@ -39,7 +47,7 @@ function Controls( { attributes, context, setAttributes } ) {
 
 	const handleChange = useCallback(
 		( nextValue ) => {
-			setNewDimensions( nextValue, unit );
+			setNewDimensions( nextValue, currentUnit );
 		},
 		[ height, width ]
 	);
@@ -51,14 +59,9 @@ function Controls( { attributes, context, setAttributes } ) {
 		[ height, width ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: DEFAULT_VALUES,
 	} );
 
@@ -72,7 +75,7 @@ function Controls( { attributes, context, setAttributes } ) {
 					onChange={ handleChange }
 					onUnitChange={ handleUnitChange }
 					units={ units }
-					unit={ unit }
+					unit={ currentUnit }
 					style={ styles.rangeCellContainer }
 				/>
 			</PanelBody>
diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
index bdda226fdf9277..1e0ffb9700d685 100644
--- a/packages/block-library/src/spacer/edit.js
+++ b/packages/block-library/src/spacer/edit.js
@@ -1,22 +1,32 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getCustomValueFromPreset,
+	getSpacingPresetCssVar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import SpacerControls from './controls';
 import { MIN_SPACER_SIZE } from './constants';
 
+const { useSpacingSizes } = unlock( blockEditorPrivateApis );
+
 const ResizableSpacer = ( {
 	orientation,
 	onResizeStart,
@@ -39,7 +49,7 @@ const ResizableSpacer = ( {
 
 	return (
 		<ResizableBox
-			className={ classnames( 'block-library-spacer__resize-container', {
+			className={ clsx( 'block-library-spacer__resize-container', {
 				'resize-horizontal': orientation === 'horizontal',
 				'is-resizing': isResizing,
 				'is-selected': isSelected,
@@ -60,7 +70,7 @@ const ResizableSpacer = ( {
 				onResizeStop( `${ nextVal }px` );
 				setIsResizing( false );
 			} }
-			__experimentalShowTooltip={ true }
+			__experimentalShowTooltip
 			__experimentalTooltipProps={ {
 				axis: orientation === 'horizontal' ? 'x' : 'y',
 				position: 'corner',
@@ -78,9 +88,34 @@ const SpacerEdit = ( {
 	setAttributes,
 	toggleSelection,
 	context,
+	__unstableParentLayout: parentLayout,
+	className,
 } ) => {
+	const disableCustomSpacingSizes = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+		return editorSettings?.disableCustomSpacingSizes;
+	} );
 	const { orientation } = context;
-	const { height, width } = attributes;
+	const {
+		orientation: parentOrientation,
+		type,
+		default: { type: defaultType } = {},
+	} = parentLayout || {};
+	// Check if the spacer is inside a flex container.
+	const isFlexLayout =
+		type === 'flex' || ( ! type && defaultType === 'flex' );
+	// If the spacer is inside a flex container, it should either inherit the orientation
+	// of the parent or use the flex default orientation.
+	const inheritedOrientation =
+		! parentOrientation && isFlexLayout
+			? 'horizontal'
+			: parentOrientation || orientation;
+	const { height, width, style: blockStyle = {} } = attributes;
+
+	const { layout = {} } = blockStyle;
+	const { selfStretch, flexSize } = layout;
+
+	const spacingSizes = useSpacingSizes();
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
@@ -92,25 +127,80 @@ const SpacerEdit = ( {
 	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
 
+		if ( isFlexLayout ) {
+			setAttributes( {
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: newHeight,
+						selfStretch: 'fixed',
+					},
+				},
+			} );
+		}
+
 		setAttributes( { height: newHeight } );
 		setTemporaryHeight( null );
 	};
 
 	const handleOnHorizontalResizeStop = ( newWidth ) => {
 		onResizeStop();
+
+		if ( isFlexLayout ) {
+			setAttributes( {
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: newWidth,
+						selfStretch: 'fixed',
+					},
+				},
+			} );
+		}
+
 		setAttributes( { width: newWidth } );
 		setTemporaryWidth( null );
 	};
 
+	const getHeightForVerticalBlocks = () => {
+		if ( isFlexLayout ) {
+			return undefined;
+		}
+		return temporaryHeight || getSpacingPresetCssVar( height ) || undefined;
+	};
+
+	const getWidthForHorizontalBlocks = () => {
+		if ( isFlexLayout ) {
+			return undefined;
+		}
+		return temporaryWidth || getSpacingPresetCssVar( width ) || undefined;
+	};
+
+	const sizeConditionalOnOrientation =
+		inheritedOrientation === 'horizontal'
+			? temporaryWidth || flexSize
+			: temporaryHeight || flexSize;
+
 	const style = {
 		height:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? 24
-				: temporaryHeight || height || undefined,
+				: getHeightForVerticalBlocks(),
 		width:
-			orientation === 'horizontal'
-				? temporaryWidth || width || undefined
+			inheritedOrientation === 'horizontal'
+				? getWidthForHorizontalBlocks()
+				: undefined,
+		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
+		minWidth:
+			inheritedOrientation === 'vertical' && isFlexLayout
+				? 48
 				: undefined,
+		// Add flex-basis so temporary sizes are respected.
+		flexBasis: isFlexLayout ? sizeConditionalOnOrientation : undefined,
+		// Remove flex-grow when resizing.
+		flexGrow: isFlexLayout && isResizing ? 0 : undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
@@ -166,26 +256,115 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
-		if ( orientation === 'horizontal' && ! width ) {
+		if (
+			isFlexLayout &&
+			selfStretch !== 'fill' &&
+			selfStretch !== 'fit' &&
+			! flexSize
+		) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				// If spacer is moving from a vertical container to a horizontal container,
+				// it might not have width but have height instead.
+				const newSize =
+					getCustomValueFromPreset( width, spacingSizes ) ||
+					getCustomValueFromPreset( height, spacingSizes ) ||
+					'100px';
+				setAttributes( {
+					width: '0px',
+					style: {
+						...blockStyle,
+						layout: {
+							...layout,
+							flexSize: newSize,
+							selfStretch: 'fixed',
+						},
+					},
+				} );
+			} else {
+				const newSize =
+					getCustomValueFromPreset( height, spacingSizes ) ||
+					getCustomValueFromPreset( width, spacingSizes ) ||
+					'100px';
+				setAttributes( {
+					height: '0px',
+					style: {
+						...blockStyle,
+						layout: {
+							...layout,
+							flexSize: newSize,
+							selfStretch: 'fixed',
+						},
+					},
+				} );
+			}
+		} else if (
+			isFlexLayout &&
+			( selfStretch === 'fill' || selfStretch === 'fit' )
+		) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				setAttributes( {
+					width: undefined,
+				} );
+			} else {
+				setAttributes( {
+					height: undefined,
+				} );
+			}
+		} else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) {
+			if ( inheritedOrientation === 'horizontal' ) {
+				setAttributes( {
+					width: flexSize,
+				} );
+			} else {
+				setAttributes( {
+					height: flexSize,
+				} );
+			}
 			setAttributes( {
-				height: '0px',
-				width: '72px',
+				style: {
+					...blockStyle,
+					layout: {
+						...layout,
+						flexSize: undefined,
+						selfStretch: undefined,
+					},
+				},
 			} );
 		}
-	}, [] );
+	}, [
+		blockStyle,
+		flexSize,
+		height,
+		inheritedOrientation,
+		isFlexLayout,
+		layout,
+		selfStretch,
+		setAttributes,
+		spacingSizes,
+		width,
+	] );
 
 	return (
 		<>
-			<View { ...useBlockProps( { style } ) }>
-				{ resizableBoxWithOrientation( orientation ) }
+			<View
+				{ ...useBlockProps( {
+					style,
+					className: clsx( className, {
+						'custom-sizes-disabled': disableCustomSpacingSizes,
+					} ),
+				} ) }
+			>
+				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
-			<SpacerControls
-				setAttributes={ setAttributes }
-				height={ temporaryHeight || height }
-				width={ temporaryWidth || width }
-				orientation={ orientation }
-				isResizing={ isResizing }
-			/>
+			{ ! isFlexLayout && (
+				<SpacerControls
+					setAttributes={ setAttributes }
+					height={ temporaryHeight || height }
+					width={ temporaryWidth || width }
+					orientation={ inheritedOrientation }
+					isResizing={ isResizing }
+				/>
+			) }
 		</>
 	);
 };
diff --git a/packages/block-library/src/spacer/edit.native.js b/packages/block-library/src/spacer/edit.native.js
index 07e650dbc0de78..c6ef3095e26acc 100644
--- a/packages/block-library/src/spacer/edit.native.js
+++ b/packages/block-library/src/spacer/edit.native.js
@@ -1,22 +1,32 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useConvertUnitToMobile } from '@wordpress/components';
+import {
+	useConvertUnitToMobile,
+	getPxFromCssUnit,
+} from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	isValueSpacingPreset,
+	useSettings,
+	getCustomValueFromPreset,
+} from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Controls from './controls';
+import Controls, { DEFAULT_VALUES } from './controls';
 import styles from './editor.native.scss';
 
+const DEFAULT_FONT_SIZE = 16;
+
 const Spacer = ( {
 	attributes,
 	context,
@@ -24,8 +34,18 @@ const Spacer = ( {
 	isSelected,
 	getStylesFromColorScheme,
 } ) => {
+	const { height: screenHeight, width: screenWidth } = useWindowDimensions();
+	const cssUnitOptions = {
+		height: screenHeight,
+		width: screenWidth,
+		fontSize: DEFAULT_FONT_SIZE,
+	};
 	const { height, width } = attributes;
-
+	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
+	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
+	if ( settingsSizes ) {
+		spacingSizes.push( ...settingsSizes );
+	}
 	const { orientation } = context;
 	const defaultStyle = getStylesFromColorScheme(
 		styles.staticSpacer,
@@ -41,8 +61,29 @@ const Spacer = ( {
 		}
 	}, [] );
 
-	const convertedHeight = useConvertUnitToMobile( height );
-	const convertedWidth = useConvertUnitToMobile( width );
+	let convertedHeight = useConvertUnitToMobile( height );
+	let convertedWidth = useConvertUnitToMobile( width );
+	const presetValues = {};
+
+	if ( isValueSpacingPreset( height ) ) {
+		const heightValue = getCustomValueFromPreset( height, spacingSizes );
+		const parsedPresetHeightValue = parseFloat(
+			getPxFromCssUnit( heightValue, cssUnitOptions )
+		);
+
+		convertedHeight = parsedPresetHeightValue || DEFAULT_VALUES.px;
+		presetValues.presetHeight = convertedHeight;
+	}
+
+	if ( isValueSpacingPreset( width ) ) {
+		const widthValue = getCustomValueFromPreset( width, spacingSizes );
+		const parsedPresetWidthValue = parseFloat(
+			getPxFromCssUnit( widthValue, cssUnitOptions )
+		);
+
+		convertedWidth = parsedPresetWidthValue || DEFAULT_VALUES.px;
+		presetValues.presetWidth = convertedWidth;
+	}
 
 	return (
 		<View
@@ -58,6 +99,7 @@ const Spacer = ( {
 						attributes={ attributes }
 						context={ context }
 						setAttributes={ setAttributes }
+						{ ...presetValues }
 					/>
 				</InspectorControls>
 			) }
diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
index a3cb2fe887e8e6..e0c700795c0870 100644
--- a/packages/block-library/src/spacer/editor.scss
+++ b/packages/block-library/src/spacer/editor.scss
@@ -17,7 +17,8 @@
 }
 
 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.block-library-spacer__resize-container.has-show-handle {
+.block-library-spacer__resize-container.has-show-handle,
+.wp-block-spacer.is-selected.custom-sizes-disabled {
 	background: rgba($black, 0.1);
 
 	.is-dark-theme & {
@@ -41,5 +42,7 @@
 
 	&.resize-horizontal {
 		margin-bottom: 0;
+		// Important is used to have higher specificity than the inline style set by re-resizable library.
+		height: 100% !important;
 	}
 }
diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js
index d77c51bc96cea2..d2a60e0cdc1602 100644
--- a/packages/block-library/src/spacer/index.js
+++ b/packages/block-library/src/spacer/index.js
@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
+import transforms from './transforms';
 import save from './save';
 
 const { name } = metadata;
@@ -18,6 +19,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 	save,
 	deprecated,
diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js
index fe55553c1b9d52..dd3a595a808f27 100644
--- a/packages/block-library/src/spacer/save.js
+++ b/packages/block-library/src/spacer/save.js
@@ -1,15 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
 
-export default function save( { attributes: { height, width } } ) {
+export default function save( { attributes } ) {
+	const { height, width, style } = attributes;
+	const { layout: { selfStretch } = {} } = style || {};
+	// If selfStretch is set to 'fill' or 'fit', don't set default height.
+	const finalHeight =
+		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				style: {
-					height,
-					width,
+					height: getSpacingPresetCssVar( finalHeight ),
+					width: getSpacingPresetCssVar( width ),
 				},
 				'aria-hidden': true,
 			} ) }
diff --git a/packages/block-library/src/spacer/save.native.js b/packages/block-library/src/spacer/save.native.js
new file mode 100644
index 00000000000000..96d72bca7ac335
--- /dev/null
+++ b/packages/block-library/src/spacer/save.native.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
+
+export default function save( { attributes: { height, width } } ) {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				style: {
+					height: getSpacingPresetCssVar( height ),
+					width: getSpacingPresetCssVar( width ),
+				},
+				'aria-hidden': true,
+			} ) }
+		/>
+	);
+}
diff --git a/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap b/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap
index 61e51af766f8c7..b0d6a2a96be510 100644
--- a/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap
+++ b/packages/block-library/src/spacer/test/__snapshots__/index.native.js.snap
@@ -1,31 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spacer block decrements height 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"99px\\"} -->
-<div style=\\"height:99px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"99px"} -->
+<div style="height:99px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block increments height 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"101px\\"} -->
-<div style=\\"height:101px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"101px"} -->
+<div style="height:101px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block inserts block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block with spacingSizes preset 1`] = `
+"<!-- wp:spacer {"height":"70px"} -->
+<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block with spacingSizes preset without matching global styles values 1`] = `
+"<!-- wp:spacer {"height":"120px"} -->
+<div style="height:120px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block updates height to 25vh 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"25vh\\"} -->
-<div style=\\"height:25vh\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"25vh"} -->
+<div style="height:25vh" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
 
 exports[`Spacer block updates height to 50px 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"50px\\"} -->
-<div style=\\"height:50px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+"<!-- wp:spacer {"height":"50px"} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->"
 `;
diff --git a/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..2427b0fb0f8559
--- /dev/null
+++ b/packages/block-library/src/spacer/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spacer block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Spacer block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Spacer block transforms to Separator block 1`] = `
+"<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->"
+`;
diff --git a/packages/block-library/src/spacer/test/index.native.js b/packages/block-library/src/spacer/test/index.native.js
index 7b6ed2ba3f371c..235b8bab78ee03 100644
--- a/packages/block-library/src/spacer/test/index.native.js
+++ b/packages/block-library/src/spacer/test/index.native.js
@@ -5,7 +5,7 @@ import {
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
-	waitFor,
+	waitForModalVisible,
 } from 'test/helpers';
 
 /**
@@ -28,12 +28,11 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const { getByLabelText, getByTestId, getByText } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
-		fireEvent.press( getByLabelText( 'Add block' ) );
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
 			nativeEvent: {
@@ -43,9 +42,11 @@ describe( 'Spacer block', () => {
 			},
 		} );
 
-		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+		fireEvent.press( screen.getByText( 'Spacer' ) );
 
-		expect( getByLabelText( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		expect( spacerBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -53,24 +54,25 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '50' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -80,28 +82,31 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
-			await initializeEditor( {
-				initialHtml,
-			} );
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Set vh unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+		fireEvent.press( screen.getByText( 'px', { hidden: true } ) );
+		fireEvent.press(
+			screen.getByText( 'Viewport height (vh)', { hidden: true } )
+		);
 
 		// Update height attribute
-		fireEvent.press( getByText( '100' ) );
-		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '25' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -111,23 +116,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Increment height
 		fireEvent(
-			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'increment' },
@@ -141,23 +146,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Increment height
 		fireEvent(
-			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
+			screen.getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'decrement' },
@@ -166,4 +171,87 @@ describe( 'Spacer block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'inserts block with spacingSizes preset', async () => {
+		// Mock spacingSizes presets
+		const RAW_STYLES = {
+			typography: {
+				fontSize: 16,
+			},
+		};
+		const RAW_FEATURES = {
+			spacing: {
+				spacingSizes: {
+					theme: [
+						{
+							size: '3.125rem',
+							slug: '100',
+							name: '100',
+						},
+						{
+							size: '3.75rem',
+							slug: '110',
+							name: '110',
+						},
+					],
+				},
+			},
+		};
+
+		const initialHtml = `<!-- wp:spacer {"height":"var:preset|spacing|110"} -->
+		<div style="height:var(--wp--preset--spacing--110)" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+			rawStyles: JSON.stringify( RAW_STYLES ),
+			rawFeatures: JSON.stringify( RAW_FEATURES ),
+		} );
+
+		// Select Spacer block
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Update height attribute
+		fireEvent.press( screen.getByText( '60', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '60', {
+			hidden: true,
+		} );
+		fireEvent.changeText( heightTextInput, '70' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'inserts block with spacingSizes preset without matching global styles values', async () => {
+		const initialHtml = `<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
+		<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const [ spacerBlock ] =
+			screen.getAllByLabelText( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Update height attribute
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
+		fireEvent.changeText( heightTextInput, '120' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/block-library/src/spacer/test/transforms.native.js b/packages/block-library/src/spacer/test/transforms.native.js
new file mode 100644
index 00000000000000..df8ff3bf237245
--- /dev/null
+++ b/packages/block-library/src/spacer/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Spacer';
+const initialHtml = `
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Separator', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/spacer/transforms.js b/packages/block-library/src/spacer/transforms.js
new file mode 100644
index 00000000000000..ddd8afb2ef98d9
--- /dev/null
+++ b/packages/block-library/src/spacer/transforms.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/separator' ], // Transform to Separator.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/separator', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index a7f12e74ea2f58..a8819c2084dc2e 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -10,9 +10,16 @@
 @import "./comments/style.scss";
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
+@import "./comment-date/style.scss";
+@import "./comment-content/style.scss";
+@import "./comment-author-name/style.scss";
+@import "./comment-edit-link/style.scss";
+@import "./comment-reply-link/style.scss";
 @import "./cover/style.scss";
+@import "./details/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
+@import "./form-input/style.scss";
 @import "./gallery/style.scss";
 @import "./group/style.scss";
 @import "./heading/style.scss";
@@ -20,19 +27,24 @@
 @import "./latest-comments/style.scss";
 @import "./latest-posts/style.scss";
 @import "./list/style.scss";
+@import "./loginout/style.scss";
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
+@import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-content/style.scss";
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
 @import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
+@import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
+@import "./post-author-name/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./post-template/style.scss";
@@ -44,13 +56,17 @@
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
+@import "./site-tagline/style.scss";
 @import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
+@import "./table-of-contents/style.scss";
+@import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";
+@import "./footnotes/style.scss";
 
 @import "common.scss";
diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json
index f095a2e2e5cdbb..5eb6e729d3f03e 100644
--- a/packages/block-library/src/table-of-contents/block.json
+++ b/packages/block-library/src/table-of-contents/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",
-	"category": "layout",
+	"category": "design",
 	"description": "Summarize your post with a list of headings. Add HTML anchors to Heading blocks to link them here.",
 	"keywords": [ "document outline", "summary" ],
 	"textdomain": "default",
@@ -13,7 +13,8 @@
 			"type": "array",
 			"items": {
 				"type": "object"
-			}
+			},
+			"default": []
 		},
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",
@@ -44,7 +45,74 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		}
+	},
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			}
+		],
+		"attributes": {
+			"headings": [
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				},
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				}
+			]
 		}
 	},
-	"example": {}
+	"style": "wp-block-table-of-contents"
 }
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
index 92f2d39dd98cf5..c95b89200cb88c 100644
--- a/packages/block-library/src/table-of-contents/edit.js
+++ b/packages/block-library/src/table-of-contents/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEqual } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -22,17 +17,18 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { renderToString, useEffect } from '@wordpress/element';
+import { renderToString } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { useInstanceId } from '@wordpress/compose';
+import { store as noticeStore } from '@wordpress/notices';
+import { tableOfContents as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import icon from './icon';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
+import { useObserveHeadings } from './hooks';
 
 /** @typedef {import('./utils').HeadingData} HeadingData */
 
@@ -46,14 +42,30 @@ import { linearToNestedHeadingList } from './utils';
  * @param {string}                       props.clientId
  * @param {(attributes: Object) => void} props.setAttributes
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
 	attributes: { headings = [], onlyIncludeCurrentPage },
 	clientId,
 	setAttributes,
 } ) {
+	useObserveHeadings( clientId );
+
 	const blockProps = useBlockProps();
+	const instanceId = useInstanceId(
+		TableOfContentsEdit,
+		'table-of-contents'
+	);
+
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice } = useDispatch( noticeStore );
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`,
+			type: 'snackbar',
+		} );
+	};
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -66,160 +78,7 @@ export default function TableOfContentsEdit( {
 		[ clientId ]
 	);
 
-	const { __unstableMarkNextChangeAsNotPersistent, replaceBlocks } =
-		useDispatch( blockEditorStore );
-
-	/**
-	 * The latest heading data, or null if the new data deeply equals the saved
-	 * headings attribute.
-	 *
-	 * Since useSelect forces a re-render when its return value is shallowly
-	 * inequal to its prior call, we would be re-rendering this block every time
-	 * the stores change, even if the latest headings were deeply equal to the
-	 * ones saved in the block attributes.
-	 *
-	 * By returning null when they're equal, we reduce that to 2 renders: one
-	 * when there are new latest headings (and so it returns them), and one when
-	 * they haven't changed (so it returns null). As long as the latest heading
-	 * data remains the same, further calls of the useSelect callback will
-	 * continue to return null, thus preventing any forced re-renders.
-	 */
-	const latestHeadings = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getBlockName,
-				getClientIdsWithDescendants,
-				__experimentalGetGlobalBlocksByName: getGlobalBlocksByName,
-			} = select( blockEditorStore );
-
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor, so to avoid
-			// declaring @wordpress/editor as a dependency, we must access its
-			// store by string. When the store is not available, editorSelectors
-			// will be null, and the block's saved markup will lack permalinks.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const editorSelectors = select( 'core/editor' );
-
-			const pageBreakClientIds = getGlobalBlocksByName( 'core/nextpage' );
-
-			const isPaginated = pageBreakClientIds.length !== 0;
-
-			// Get the client ids of all blocks in the editor.
-			const allBlockClientIds = getClientIdsWithDescendants();
-
-			// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
-			let tocPage = 1;
-
-			if ( isPaginated && onlyIncludeCurrentPage ) {
-				// We can't use getBlockIndex because it only returns the index
-				// relative to sibling blocks.
-				const tocIndex = allBlockClientIds.indexOf( clientId );
-
-				for ( const [
-					blockIndex,
-					blockClientId,
-				] of allBlockClientIds.entries() ) {
-					// If we've reached blocks after the Table of Contents, we've
-					// finished calculating which page the block is on.
-					if ( blockIndex >= tocIndex ) {
-						break;
-					}
-					if ( getBlockName( blockClientId ) === 'core/nextpage' ) {
-						tocPage++;
-					}
-				}
-			}
-
-			const _latestHeadings = [];
-
-			/** The page (of a paginated post) a heading will be part of. */
-			let headingPage = 1;
-
-			/**
-			 * A permalink to the current post. If the core/editor store is
-			 * unavailable, this variable will be null.
-			 */
-			const permalink = editorSelectors?.getPermalink() ?? null;
-
-			let headingPageLink = null;
-
-			// If the core/editor store is available, we can add permalinks to the
-			// generated table of contents.
-			if ( typeof permalink === 'string' ) {
-				headingPageLink = isPaginated
-					? addQueryArgs( permalink, { page: headingPage } )
-					: permalink;
-			}
-
-			for ( const blockClientId of allBlockClientIds ) {
-				const blockName = getBlockName( blockClientId );
-				if ( blockName === 'core/nextpage' ) {
-					headingPage++;
-
-					// If we're only including headings from the current page (of
-					// a paginated post), then exit the loop if we've reached the
-					// pages after the one with the Table of Contents block.
-					if ( onlyIncludeCurrentPage && headingPage > tocPage ) {
-						break;
-					}
-
-					if ( typeof permalink === 'string' ) {
-						headingPageLink = addQueryArgs(
-							removeQueryArgs( permalink, [ 'page' ] ),
-							{ page: headingPage }
-						);
-					}
-				}
-				// If we're including all headings or we've reached headings on
-				// the same page as the Table of Contents block, add them to the
-				// list.
-				else if (
-					! onlyIncludeCurrentPage ||
-					headingPage === tocPage
-				) {
-					if ( blockName === 'core/heading' ) {
-						const headingAttributes =
-							getBlockAttributes( blockClientId );
-
-						const canBeLinked =
-							typeof headingPageLink === 'string' &&
-							typeof headingAttributes.anchor === 'string' &&
-							headingAttributes.anchor !== '';
-
-						_latestHeadings.push( {
-							// Convert line breaks to spaces, and get rid of HTML tags in the headings.
-							content: stripHTML(
-								headingAttributes.content.replace(
-									/(<br *\/?>)+/g,
-									' '
-								)
-							),
-							level: headingAttributes.level,
-							link: canBeLinked
-								? `${ headingPageLink }#${ headingAttributes.anchor }`
-								: null,
-						} );
-					}
-				}
-			}
-
-			if ( isEqual( headings, _latestHeadings ) ) {
-				return null;
-			}
-			return _latestHeadings;
-		},
-		[ clientId, onlyIncludeCurrentPage, headings ]
-	);
-
-	useEffect( () => {
-		if ( latestHeadings !== null ) {
-			// This is required to keep undo working and not create 2 undo steps
-			// for each heading change.
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { headings: latestHeadings } );
-		}
-	}, [ latestHeadings ] );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
 
 	const headingTree = linearToNestedHeadingList( headings );
 
@@ -251,6 +110,7 @@ export default function TableOfContentsEdit( {
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Only include current page' ) }
 					checked={ onlyIncludeCurrentPage }
 					onChange={ ( value ) =>
@@ -279,7 +139,7 @@ export default function TableOfContentsEdit( {
 				<div { ...blockProps }>
 					<Placeholder
 						icon={ <BlockIcon icon={ icon } /> }
-						label="Table of Contents"
+						label={ __( 'Table of Contents' ) }
 						instructions={ __(
 							'Start adding Heading blocks to create a table of contents. Headings with HTML anchors will be linked here.'
 						) }
@@ -293,8 +153,12 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol inert="true">
-					<TableOfContentsList nestedHeadingList={ headingTree } />
+				<ol>
+					<TableOfContentsList
+						nestedHeadingList={ headingTree }
+						disableLinkActivation
+						onClick={ showRedirectionPreventedNotice }
+					/>
 				</ol>
 			</nav>
 			{ toolbarControls }
diff --git a/packages/block-library/src/table-of-contents/hooks.js b/packages/block-library/src/table-of-contents/hooks.js
new file mode 100644
index 00000000000000..ef24d8167381ad
--- /dev/null
+++ b/packages/block-library/src/table-of-contents/hooks.js
@@ -0,0 +1,156 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useEffect } from '@wordpress/element';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function getLatestHeadings( select, clientId ) {
+	const {
+		getBlockAttributes,
+		getBlockName,
+		getClientIdsWithDescendants,
+		getBlocksByName,
+	} = select( blockEditorStore );
+
+	// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+	// Blocks can be loaded into a *non-post* block editor, so to avoid
+	// declaring @wordpress/editor as a dependency, we must access its
+	// store by string. When the store is not available, editorSelectors
+	// will be null, and the block's saved markup will lack permalinks.
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const permalink = select( 'core/editor' ).getPermalink() ?? null;
+
+	const isPaginated = getBlocksByName( 'core/nextpage' ).length !== 0;
+	const { onlyIncludeCurrentPage } = getBlockAttributes( clientId ) ?? {};
+
+	// Get the client ids of all blocks in the editor.
+	const allBlockClientIds = getClientIdsWithDescendants();
+
+	// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
+	let tocPage = 1;
+
+	if ( isPaginated && onlyIncludeCurrentPage ) {
+		// We can't use getBlockIndex because it only returns the index
+		// relative to sibling blocks.
+		const tocIndex = allBlockClientIds.indexOf( clientId );
+
+		for ( const [
+			blockIndex,
+			blockClientId,
+		] of allBlockClientIds.entries() ) {
+			// If we've reached blocks after the Table of Contents, we've
+			// finished calculating which page the block is on.
+			if ( blockIndex >= tocIndex ) {
+				break;
+			}
+			if ( getBlockName( blockClientId ) === 'core/nextpage' ) {
+				tocPage++;
+			}
+		}
+	}
+
+	const latestHeadings = [];
+
+	/** The page (of a paginated post) a heading will be part of. */
+	let headingPage = 1;
+	let headingPageLink = null;
+
+	// If the core/editor store is available, we can add permalinks to the
+	// generated table of contents.
+	if ( typeof permalink === 'string' ) {
+		headingPageLink = isPaginated
+			? addQueryArgs( permalink, { page: headingPage } )
+			: permalink;
+	}
+
+	for ( const blockClientId of allBlockClientIds ) {
+		const blockName = getBlockName( blockClientId );
+		if ( blockName === 'core/nextpage' ) {
+			headingPage++;
+
+			// If we're only including headings from the current page (of
+			// a paginated post), then exit the loop if we've reached the
+			// pages after the one with the Table of Contents block.
+			if ( onlyIncludeCurrentPage && headingPage > tocPage ) {
+				break;
+			}
+
+			if ( typeof permalink === 'string' ) {
+				headingPageLink = addQueryArgs(
+					removeQueryArgs( permalink, [ 'page' ] ),
+					{ page: headingPage }
+				);
+			}
+		}
+		// If we're including all headings or we've reached headings on
+		// the same page as the Table of Contents block, add them to the
+		// list.
+		else if ( ! onlyIncludeCurrentPage || headingPage === tocPage ) {
+			if ( blockName === 'core/heading' ) {
+				const headingAttributes = getBlockAttributes( blockClientId );
+
+				const canBeLinked =
+					typeof headingPageLink === 'string' &&
+					typeof headingAttributes.anchor === 'string' &&
+					headingAttributes.anchor !== '';
+
+				latestHeadings.push( {
+					// Convert line breaks to spaces, and get rid of HTML tags in the headings.
+					content: stripHTML(
+						headingAttributes.content.replace(
+							/(<br *\/?>)+/g,
+							' '
+						)
+					),
+					level: headingAttributes.level,
+					link: canBeLinked
+						? `${ headingPageLink }#${ headingAttributes.anchor }`
+						: null,
+				} );
+			}
+		}
+	}
+
+	return latestHeadings;
+}
+
+function observeCallback( select, dispatch, clientId ) {
+	const { getBlockAttributes } = select( blockEditorStore );
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		dispatch( blockEditorStore );
+
+	/**
+	 * If the block no longer exists in the store, skip the update.
+	 * The "undo" action recreates the block and provides a new `clientId`.
+	 * The hook still might be observing the changes while the old block unmounts.
+	 */
+	const attributes = getBlockAttributes( clientId );
+	if ( attributes === null ) {
+		return;
+	}
+
+	const headings = getLatestHeadings( select, clientId );
+	if ( ! fastDeepEqual( headings, attributes.headings ) ) {
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( clientId, { headings } );
+	}
+}
+
+export function useObserveHeadings( clientId ) {
+	const registry = useRegistry();
+	useEffect( () => {
+		// Todo: Limit subscription to block editor store when data no longer depends on `getPermalink`.
+		// See: https://github.com/WordPress/gutenberg/pull/45513
+		return registry.subscribe( () =>
+			observeCallback( registry.select, registry.dispatch, clientId )
+		);
+	}, [ registry, clientId ] );
+}
diff --git a/packages/block-library/src/table-of-contents/icon.js b/packages/block-library/src/table-of-contents/icon.js
deleted file mode 100644
index 02b642ea5e9239..00000000000000
--- a/packages/block-library/src/table-of-contents/icon.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-
-export default (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-	>
-		<Path
-			d="M15.1 15.8H20v-1.5h-4.9v1.5zm-4-8.6v1.5H20V7.2h-8.9zM6 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm5-3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-			fill="#1e1e1e"
-		/>
-	</SVG>
-);
diff --git a/packages/block-library/src/table-of-contents/index.js b/packages/block-library/src/table-of-contents/index.js
index 8952f0ff381bb4..408538a7dcadbd 100644
--- a/packages/block-library/src/table-of-contents/index.js
+++ b/packages/block-library/src/table-of-contents/index.js
@@ -1,10 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { tableOfContents as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
-import icon from './icon';
 import save from './save';
 
 const { name } = metadata;
diff --git a/packages/block-library/src/table-of-contents/list.tsx b/packages/block-library/src/table-of-contents/list.tsx
index e327f8dfe2e86b..fcb4736bab091d 100644
--- a/packages/block-library/src/table-of-contents/list.tsx
+++ b/packages/block-library/src/table-of-contents/list.tsx
@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import type { WPElement } from '@wordpress/element';
+import type { MouseEvent, ReactElement } from 'react';
 
 /**
  * Internal dependencies
@@ -12,16 +12,30 @@ const ENTRY_CLASS_NAME = 'wp-block-table-of-contents__entry';
 
 export default function TableOfContentsList( {
 	nestedHeadingList,
+	disableLinkActivation,
+	onClick,
 }: {
 	nestedHeadingList: NestedHeadingData[];
-} ): WPElement {
+	disableLinkActivation?: boolean;
+	onClick?: ( event: MouseEvent< HTMLAnchorElement > ) => void;
+} ): ReactElement {
 	return (
 		<>
 			{ nestedHeadingList.map( ( node, index ) => {
 				const { content, link } = node.heading;
 
 				const entry = link ? (
-					<a className={ ENTRY_CLASS_NAME } href={ link }>
+					<a
+						className={ ENTRY_CLASS_NAME }
+						href={ link }
+						aria-disabled={ disableLinkActivation || undefined }
+						onClick={
+							disableLinkActivation &&
+							'function' === typeof onClick
+								? onClick
+								: undefined
+						}
+					>
 						{ content }
 					</a>
 				) : (
@@ -35,6 +49,15 @@ export default function TableOfContentsList( {
 							<ol>
 								<TableOfContentsList
 									nestedHeadingList={ node.children }
+									disableLinkActivation={
+										disableLinkActivation
+									}
+									onClick={
+										disableLinkActivation &&
+										'function' === typeof onClick
+											? onClick
+											: undefined
+									}
 								/>
 							</ol>
 						) : null }
diff --git a/packages/block-library/src/table-of-contents/style.scss b/packages/block-library/src/table-of-contents/style.scss
new file mode 100644
index 00000000000000..4a3fbb6108bee5
--- /dev/null
+++ b/packages/block-library/src/table-of-contents/style.scss
@@ -0,0 +1,4 @@
+:root :where(.wp-block-table-of-contents) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}
diff --git a/packages/block-library/src/table-of-contents/utils.ts b/packages/block-library/src/table-of-contents/utils.ts
index 37050b43ce0ab2..3e2d115bbfbd67 100644
--- a/packages/block-library/src/table-of-contents/utils.ts
+++ b/packages/block-library/src/table-of-contents/utils.ts
@@ -18,7 +18,7 @@ export interface NestedHeadingData {
  * Takes a flat list of heading parameters and nests them based on each header's
  * immediate parent's level.
  *
- * @param  headingList The flat list of headings to nest.
+ * @param headingList The flat list of headings to nest.
  *
  * @return The nested list of headings.
  */
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
index 3de088e0879b79..11dd5b5f323e3b 100644
--- a/packages/block-library/src/table/block.json
+++ b/packages/block-library/src/table/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/table",
 	"title": "Table",
 	"category": "text",
@@ -9,13 +9,12 @@
 	"attributes": {
 		"hasFixedLayout": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
-			"selector": "figcaption",
-			"default": ""
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "figcaption"
 		},
 		"head": {
 			"type": "array",
@@ -30,8 +29,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",
@@ -47,6 +46,16 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -65,8 +74,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",
@@ -82,6 +91,16 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -100,8 +119,8 @@
 					"selector": "td,th",
 					"query": {
 						"content": {
-							"type": "string",
-							"source": "html"
+							"type": "rich-text",
+							"source": "rich-text"
 						},
 						"tag": {
 							"type": "string",
@@ -117,6 +136,16 @@
 							"type": "string",
 							"source": "attribute",
 							"attribute": "data-align"
+						},
+						"colspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "colspan"
+						},
+						"rowspan": {
+							"type": "string",
+							"source": "attribute",
+							"attribute": "rowspan"
 						}
 					}
 				}
@@ -136,7 +165,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -162,7 +195,10 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"styles": [
 		{
diff --git a/packages/block-library/src/table/deprecated.js b/packages/block-library/src/table/deprecated.js
index ed138c4518aa31..5f8ab6d5a7e3fa 100644
--- a/packages/block-library/src/table/deprecated.js
+++ b/packages/block-library/src/table/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 // As the previous arbitrary colors won't match theme color palettes, the hex
@@ -24,8 +25,262 @@ const oldColors = {
 	'subtle-pale-pink': '#fcf0ef',
 };
 
+// Fixed width table cells on by default.
+const v4Query = {
+	content: {
+		type: 'rich-text',
+		source: 'rich-text',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+	colspan: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'colspan',
+	},
+	rowspan: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'rowspan',
+	},
+};
+
+const v4 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		caption: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'figcaption',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: v4Query,
+				},
+			},
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalBorder: {
+			__experimentalSkipSerialization: true,
+			color: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-table > table',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, caption } = attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const colorProps = getColorClassesAndStyles( attributes );
+		const borderProps = getBorderClassesAndStyles( attributes );
+
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
+
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{
+										content,
+										tag,
+										scope,
+										align,
+										colspan,
+										rowspan,
+									},
+									cellIndex
+								) => {
+									const cellClasses = clsx( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
+										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
+											tagName={ tag }
+											value={ content }
+											key={ cellIndex }
+											scope={
+												tag === 'th' ? scope : undefined
+											}
+											colSpan={ colspan }
+											rowSpan={ rowspan }
+										/>
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
+
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table
+					className={ classes === '' ? undefined : classes }
+					style={ { ...colorProps.style, ...borderProps.style } }
+				>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+				{ hasCaption && (
+					<RichText.Content
+						tagName="figcaption"
+						value={ caption }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 // In #41140 support was added to global styles for caption elements which
 // added a `wp-element-caption` classname to the embed figcaption element.
+const v3Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+};
+
 const v3 = {
 	attributes: {
 		hasFixedLayout: {
@@ -49,27 +304,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -84,27 +319,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -119,27 +334,7 @@ const v3 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v3Query,
 				},
 			},
 		},
@@ -196,13 +391,9 @@ const v3 = {
 		const colorProps = getColorClassesAndStyles( attributes );
 		const borderProps = getBorderClassesAndStyles( attributes );
 
-		const classes = classnames(
-			colorProps.className,
-			borderProps.className,
-			{
-				'has-fixed-layout': hasFixedLayout,
-			}
-		);
+		const classes = clsx( colorProps.className, borderProps.className, {
+			'has-fixed-layout': hasFixedLayout,
+		} );
 
 		const hasCaption = ! RichText.isEmpty( caption );
 
@@ -222,7 +413,7 @@ const v3 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -269,6 +460,28 @@ const v3 = {
 };
 
 // Deprecation migrating table block to use colors block support feature.
+const v2Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+	align: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'data-align',
+	},
+};
+
 const v2 = {
 	attributes: {
 		hasFixedLayout: {
@@ -295,27 +508,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -330,27 +523,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -365,27 +538,7 @@ const v2 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-						align: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'data-align',
-						},
-					},
+					query: v2Query,
 				},
 			},
 		},
@@ -409,7 +562,7 @@ const v2 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );
@@ -432,7 +585,7 @@ const v2 = {
 									{ content, tag, scope, align },
 									cellIndex
 								) => {
-									const cellClasses = classnames( {
+									const cellClasses = clsx( {
 										[ `has-text-align-${ align }` ]: align,
 									} );
 
@@ -496,6 +649,23 @@ const v2 = {
 	},
 };
 
+const v1Query = {
+	content: {
+		type: 'string',
+		source: 'html',
+	},
+	tag: {
+		type: 'string',
+		default: 'td',
+		source: 'tag',
+	},
+	scope: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'scope',
+	},
+};
+
 const v1 = {
 	attributes: {
 		hasFixedLayout: {
@@ -516,22 +686,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -546,22 +701,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -576,22 +716,7 @@ const v1 = {
 					default: [],
 					source: 'query',
 					selector: 'td,th',
-					query: {
-						content: {
-							type: 'string',
-							source: 'html',
-						},
-						tag: {
-							type: 'string',
-							default: 'td',
-							source: 'tag',
-						},
-						scope: {
-							type: 'string',
-							source: 'attribute',
-							attribute: 'scope',
-						},
-					},
+					query: v1Query,
 				},
 			},
 		},
@@ -613,7 +738,7 @@ const v1 = {
 			backgroundColor
 		);
 
-		const classes = classnames( backgroundClass, {
+		const classes = clsx( backgroundClass, {
 			'has-fixed-layout': hasFixedLayout,
 			'has-background': !! backgroundClass,
 		} );
@@ -665,4 +790,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1 ];
+export default [ v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index abb6438cb56785..f1cb3fa5d8b8ae 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,6 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -41,7 +40,6 @@ import {
 	tableRowDelete,
 	table,
 } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -57,6 +55,7 @@ import {
 	toggleSection,
 	isEmptyTableSection,
 } from './state';
+import { Caption } from '../utils/caption';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -96,9 +95,9 @@ function TableEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
-	isSelected,
+	isSelected: isSingleSelected,
 } ) {
-	const { hasFixedLayout, caption, head, foot } = attributes;
+	const { hasFixedLayout, head, foot } = attributes;
 	const [ initialRowCount, setInitialRowCount ] = useState( 2 );
 	const [ initialColumnCount, setInitialColumnCount ] = useState( 2 );
 	const [ selectedCell, setSelectedCell ] = useState();
@@ -204,7 +203,7 @@ function TableEdit( {
 	/**
 	 * Get the alignment of the currently selected cell.
 	 *
-	 * @return {string} The new alignment to apply to the column.
+	 * @return {string | undefined} The new alignment to apply to the column.
 	 */
 	function getCellAlignment() {
 		if ( ! selectedCell ) {
@@ -341,15 +340,15 @@ function TableEdit( {
 	}
 
 	useEffect( () => {
-		if ( ! isSelected ) {
+		if ( ! isSingleSelected ) {
 			setSelectedCell();
 		}
-	}, [ isSelected ] );
+	}, [ isSingleSelected ] );
 
 	useEffect( () => {
 		if ( hasTableCreated ) {
 			tableRef?.current
-				?.querySelector( 'td[contentEditable="true"]' )
+				?.querySelector( 'td div[contentEditable="true"]' )
 				?.focus();
 			setHasTableCreated( false );
 		}
@@ -398,38 +397,49 @@ function TableEdit( {
 		},
 	];
 
-	const renderedSections = [ 'head', 'body', 'foot' ].map( ( name ) => (
+	const renderedSections = sections.map( ( name ) => (
 		<TSection name={ name } key={ name }>
 			{ attributes[ name ].map( ( { cells }, rowIndex ) => (
 				<tr key={ rowIndex }>
 					{ cells.map(
 						(
-							{ content, tag: CellTag, scope, align },
+							{
+								content,
+								tag: CellTag,
+								scope,
+								align,
+								colspan,
+								rowspan,
+							},
 							columnIndex
 						) => (
-							<RichText
-								tagName={ CellTag }
+							<CellTag
 								key={ columnIndex }
-								className={ classnames(
+								scope={ CellTag === 'th' ? scope : undefined }
+								colSpan={ colspan }
+								rowSpan={ rowspan }
+								className={ clsx(
 									{
 										[ `has-text-align-${ align }` ]: align,
 									},
 									'wp-block-table__cell-content'
 								) }
-								scope={ CellTag === 'th' ? scope : undefined }
-								value={ content }
-								onChange={ onChange }
-								unstableOnFocus={ () => {
-									setSelectedCell( {
-										sectionName: name,
-										rowIndex,
-										columnIndex,
-										type: 'cell',
-									} );
-								} }
-								aria-label={ cellAriaLabel[ name ] }
-								placeholder={ placeholder[ name ] }
-							/>
+							>
+								<RichText
+									value={ content }
+									onChange={ onChange }
+									onFocus={ () => {
+										setSelectedCell( {
+											sectionName: name,
+											rowIndex,
+											columnIndex,
+											type: 'cell',
+										} );
+									} }
+									aria-label={ cellAriaLabel[ name ] }
+									placeholder={ placeholder[ name ] }
+								/>
+							</CellTag>
 						)
 					) }
 				</tr>
@@ -455,7 +465,6 @@ function TableEdit( {
 					</BlockControls>
 					<BlockControls group="other">
 						<ToolbarDropdownMenu
-							hasArrowIndicator
 							icon={ table }
 							label={ __( 'Edit table' ) }
 							controls={ tableControls }
@@ -463,33 +472,38 @@ function TableEdit( {
 					</BlockControls>
 				</>
 			) }
-			{ ! isEmpty && (
-				<InspectorControls>
-					<PanelBody
-						title={ __( 'Settings' ) }
-						className="blocks-table-settings"
-					>
-						<ToggleControl
-							label={ __( 'Fixed width table cells' ) }
-							checked={ !! hasFixedLayout }
-							onChange={ onChangeFixedLayout }
-						/>
-						<ToggleControl
-							label={ __( 'Header section' ) }
-							checked={ !! ( head && head.length ) }
-							onChange={ onToggleHeaderSection }
-						/>
-						<ToggleControl
-							label={ __( 'Footer section' ) }
-							checked={ !! ( foot && foot.length ) }
-							onChange={ onToggleFooterSection }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			) }
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Settings' ) }
+					className="blocks-table-settings"
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Fixed width table cells' ) }
+						checked={ !! hasFixedLayout }
+						onChange={ onChangeFixedLayout }
+					/>
+					{ ! isEmpty && (
+						<>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Header section' ) }
+								checked={ !! ( head && head.length ) }
+								onChange={ onToggleHeaderSection }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Footer section' ) }
+								checked={ !! ( foot && foot.length ) }
+								onChange={ onToggleFooterSection }
+							/>
+						</>
+					) }
+				</PanelBody>
+			</InspectorControls>
 			{ ! isEmpty && (
 				<table
-					className={ classnames(
+					className={ clsx(
 						colorProps.className,
 						borderProps.className,
 						{
@@ -507,26 +521,7 @@ function TableEdit( {
 					{ renderedSections }
 				</table>
 			) }
-			{ ! isEmpty && (
-				<RichText
-					tagName="figcaption"
-					className={ __experimentalGetElementClassName( 'caption' ) }
-					aria-label={ __( 'Table caption text' ) }
-					placeholder={ __( 'Add caption' ) }
-					value={ caption }
-					onChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
-					// Deselect the selected table cell when the caption is focused.
-					unstableOnFocus={ () => setSelectedCell() }
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			) }
-			{ isEmpty && (
+			{ isEmpty ? (
 				<Placeholder
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
@@ -537,6 +532,8 @@ function TableEdit( {
 						onSubmit={ onCreateTable }
 					>
 						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Column count' ) }
 							value={ initialColumnCount }
@@ -545,6 +542,8 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<TextControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							type="number"
 							label={ __( 'Row count' ) }
 							value={ initialRowCount }
@@ -553,7 +552,7 @@ function TableEdit( {
 							className="blocks-table__placeholder-input"
 						/>
 						<Button
-							className="blocks-table__placeholder-button"
+							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
 						>
@@ -561,6 +560,15 @@ function TableEdit( {
 						</Button>
 					</form>
 				</Placeholder>
+			) : (
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Table caption text' ) }
+					showToolbarButton={ isSingleSelected }
+				/>
 			) }
 		</figure>
 	);
diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
index f1fbae335748c6..55652742a5ae9d 100644
--- a/packages/block-library/src/table/editor.scss
+++ b/packages/block-library/src/table/editor.scss
@@ -1,8 +1,4 @@
 .wp-block-table {
-
-	// Remove default <figure> style.
-	margin: 0;
-
 	.wp-block[data-align="left"] > &,
 	.wp-block[data-align="right"] > &,
 	.wp-block[data-align="center"] > & {
@@ -41,10 +37,6 @@
 		border-style: double;
 	}
 
-	figcaption {
-		@include caption-style-theme();
-	}
-
 	// This is only required in the editor to overcome the fact the editor
 	// rewrites border width styles into shorthand.
 	table.has-individual-borders {
@@ -63,32 +55,14 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
-
-	> * {
-		margin-bottom: $grid-unit-10;
-	}
+	gap: $grid-unit-10;
 
 	@include break-medium() {
 		flex-direction: row;
 		align-items: flex-end;
-
-		> * {
-			margin-bottom: 0;
-		}
 	}
 }
 
 .blocks-table__placeholder-input {
 	width: $grid-unit-10 * 14;
-	margin-right: $grid-unit-10;
-	margin-bottom: 0;
-
-	input {
-		height: $button-size;
-	}
-
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index 5839abc4c19f25..dea09dd7c98298 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -91,6 +91,7 @@ export const settings = {
 				},
 			],
 		},
+		viewportWidth: 450,
 	},
 	transforms,
 	edit,
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
index 4e0c4f1956cc19..abf0c3ce900dc1 100644
--- a/packages/block-library/src/table/save.js
+++ b/packages/block-library/src/table/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,7 +25,7 @@ export default function save( { attributes } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const borderProps = getBorderClassesAndStyles( attributes );
 
-	const classes = classnames( colorProps.className, borderProps.className, {
+	const classes = clsx( colorProps.className, borderProps.className, {
 		'has-fixed-layout': hasFixedLayout,
 	} );
 
@@ -43,8 +43,18 @@ export default function save( { attributes } ) {
 				{ rows.map( ( { cells }, rowIndex ) => (
 					<tr key={ rowIndex }>
 						{ cells.map(
-							( { content, tag, scope, align }, cellIndex ) => {
-								const cellClasses = classnames( {
+							(
+								{
+									content,
+									tag,
+									scope,
+									align,
+									colspan,
+									rowspan,
+								},
+								cellIndex
+							) => {
+								const cellClasses = clsx( {
 									[ `has-text-align-${ align }` ]: align,
 								} );
 
@@ -62,6 +72,8 @@ export default function save( { attributes } ) {
 										scope={
 											tag === 'th' ? scope : undefined
 										}
+										colSpan={ colspan }
+										rowSpan={ rowspan }
 									/>
 								);
 							}
diff --git a/packages/block-library/src/table/state.js b/packages/block-library/src/table/state.js
index a1aafc31459365..961e0bd8415a46 100644
--- a/packages/block-library/src/table/state.js
+++ b/packages/block-library/src/table/state.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, mapValues } from 'lodash';
-
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
 /**
@@ -30,7 +25,7 @@ export function createTable( { rowCount, columnCount } ) {
  *
  * @param {Object} state Current table state.
  *
- * @return {Object} The first table row.
+ * @return {Object | undefined} The first table row.
  */
 export function getFirstRow( state ) {
 	if ( ! isEmptyTableSection( state.head ) ) {
@@ -55,13 +50,9 @@ export function getFirstRow( state ) {
  */
 export function getCellAttribute( state, cellLocation, attributeName ) {
 	const { sectionName, rowIndex, columnIndex } = cellLocation;
-	return get( state, [
-		sectionName,
-		rowIndex,
-		'cells',
-		columnIndex,
-		attributeName,
-	] );
+	return state[ sectionName ]?.[ rowIndex ]?.cells?.[ columnIndex ]?.[
+		attributeName
+	];
 }
 
 /**
@@ -86,33 +77,45 @@ export function updateSelectedCell( state, selection, updateCell ) {
 	const { sectionName: selectionSectionName, rowIndex: selectionRowIndex } =
 		selection;
 
-	return mapValues( tableSections, ( section, sectionName ) => {
-		if ( selectionSectionName && selectionSectionName !== sectionName ) {
-			return section;
-		}
-
-		return section.map( ( row, rowIndex ) => {
-			if ( selectionRowIndex && selectionRowIndex !== rowIndex ) {
-				return row;
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			if (
+				selectionSectionName &&
+				selectionSectionName !== sectionName
+			) {
+				return [ sectionName, section ];
 			}
 
-			return {
-				cells: row.cells.map( ( cellAttributes, columnIndex ) => {
-					const cellLocation = {
-						sectionName,
-						columnIndex,
-						rowIndex,
-					};
-
-					if ( ! isCellSelected( cellLocation, selection ) ) {
-						return cellAttributes;
+			return [
+				sectionName,
+				section.map( ( row, rowIndex ) => {
+					if ( selectionRowIndex && selectionRowIndex !== rowIndex ) {
+						return row;
 					}
 
-					return updateCell( cellAttributes );
+					return {
+						cells: row.cells.map(
+							( cellAttributes, columnIndex ) => {
+								const cellLocation = {
+									sectionName,
+									columnIndex,
+									rowIndex,
+								};
+
+								if (
+									! isCellSelected( cellLocation, selection )
+								) {
+									return cellAttributes;
+								}
+
+								return updateCell( cellAttributes );
+							}
+						),
+					};
 				} ),
-			};
-		} );
-	} );
+			];
+		} )
+	);
 }
 
 /**
@@ -158,9 +161,7 @@ export function isCellSelected( cellLocation, selection ) {
 export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 	const firstRow = getFirstRow( state );
 	const cellCount =
-		columnCount === undefined
-			? get( firstRow, [ 'cells', 'length' ] )
-			: columnCount;
+		columnCount === undefined ? firstRow?.cells?.length : columnCount;
 
 	// Bail early if the function cannot determine how many cells to add.
 	if ( ! cellCount ) {
@@ -173,11 +174,8 @@ export function insertRow( state, { sectionName, rowIndex, columnCount } ) {
 			{
 				cells: Array.from( { length: cellCount } ).map(
 					( _, index ) => {
-						const firstCellInColumn = get(
-							firstRow,
-							[ 'cells', index ],
-							{}
-						);
+						const firstCellInColumn =
+							firstRow?.cells?.[ index ] ?? {};
 
 						const inheritedAttributes = Object.fromEntries(
 							Object.entries( firstCellInColumn ).filter(
@@ -233,31 +231,36 @@ export function insertColumn( state, { columnIndex } ) {
 		)
 	);
 
-	return mapValues( tableSections, ( section, sectionName ) => {
-		// Bail early if the table section is empty.
-		if ( isEmptyTableSection( section ) ) {
-			return section;
-		}
-
-		return section.map( ( row ) => {
-			// Bail early if the row is empty or it's an attempt to insert past
-			// the last possible index of the array.
-			if ( isEmptyRow( row ) || row.cells.length < columnIndex ) {
-				return row;
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			// Bail early if the table section is empty.
+			if ( isEmptyTableSection( section ) ) {
+				return [ sectionName, section ];
 			}
 
-			return {
-				cells: [
-					...row.cells.slice( 0, columnIndex ),
-					{
-						content: '',
-						tag: sectionName === 'head' ? 'th' : 'td',
-					},
-					...row.cells.slice( columnIndex ),
-				],
-			};
-		} );
-	} );
+			return [
+				sectionName,
+				section.map( ( row ) => {
+					// Bail early if the row is empty or it's an attempt to insert past
+					// the last possible index of the array.
+					if ( isEmptyRow( row ) || row.cells.length < columnIndex ) {
+						return row;
+					}
+
+					return {
+						cells: [
+							...row.cells.slice( 0, columnIndex ),
+							{
+								content: '',
+								tag: sectionName === 'head' ? 'th' : 'td',
+							},
+							...row.cells.slice( columnIndex ),
+						],
+					};
+				} ),
+			];
+		} )
+	);
 }
 
 /**
@@ -276,23 +279,28 @@ export function deleteColumn( state, { columnIndex } ) {
 		)
 	);
 
-	return mapValues( tableSections, ( section ) => {
-		// Bail early if the table section is empty.
-		if ( isEmptyTableSection( section ) ) {
-			return section;
-		}
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			// Bail early if the table section is empty.
+			if ( isEmptyTableSection( section ) ) {
+				return [ sectionName, section ];
+			}
 
-		return section
-			.map( ( row ) => ( {
-				cells:
-					row.cells.length >= columnIndex
-						? row.cells.filter(
-								( cell, index ) => index !== columnIndex
-						  )
-						: row.cells,
-			} ) )
-			.filter( ( row ) => row.cells.length );
-	} );
+			return [
+				sectionName,
+				section
+					.map( ( row ) => ( {
+						cells:
+							row.cells.length >= columnIndex
+								? row.cells.filter(
+										( cell, index ) => index !== columnIndex
+								  )
+								: row.cells,
+					} ) )
+					.filter( ( row ) => row.cells.length ),
+			];
+		} )
+	);
 }
 
 /**
@@ -310,7 +318,7 @@ export function toggleSection( state, sectionName ) {
 	}
 
 	// Get the length of the first row of the body to use when creating the header.
-	const columnCount = get( state, [ 'body', 0, 'cells', 'length' ], 1 );
+	const columnCount = state.body?.[ 0 ]?.cells?.length ?? 1;
 
 	// Section doesn't exist, insert an empty row to create the section.
 	return insertRow( state, { sectionName, rowIndex: 0, columnCount } );
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 9721513a53eee0..69cd2666e13e20 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 {
@@ -63,6 +71,9 @@
 	}
 
 	// "Stripes" style variation.
+	// This block style selector does not have 0-1-0 specificity, as per those
+	// generated via global styles, to maintain current styling. Global styles
+	// support for table borders also only applies to the outer `table` element.
 	&.is-style-stripes {
 		border-spacing: 0;
 		border-collapse: inherit;
diff --git a/packages/block-library/src/table/test/utils.js b/packages/block-library/src/table/test/utils.js
new file mode 100644
index 00000000000000..4dc9d8121dd126
--- /dev/null
+++ b/packages/block-library/src/table/test/utils.js
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeRowColSpan } from '../utils';
+
+describe( 'normalizeRowColSpan', () => {
+	it( 'should convert a value to a string', () => {
+		expect( normalizeRowColSpan( 2 ) ).toBe( '2' );
+		expect( normalizeRowColSpan( '2' ) ).toBe( '2' );
+		expect( normalizeRowColSpan( 2.55 ) ).toBe( '2' );
+		expect( normalizeRowColSpan( '2.55' ) ).toBe( '2' );
+	} );
+
+	it( 'should return undefined for values not allowed as the rowspan/colspan attributes', () => {
+		expect( normalizeRowColSpan( -2 ) ).toBe( undefined );
+		expect( normalizeRowColSpan( '-2' ) ).toBe( undefined );
+		expect( normalizeRowColSpan( 1 ) ).toBe( undefined );
+		expect( normalizeRowColSpan( '1' ) ).toBe( undefined );
+	} );
+} );
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 3adc4d3e452ba7..c86da9c7f731f8 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,20 +1,12 @@
 .wp-block-table {
 	margin: 0 0 1em 0;
 
-	thead {
-		border-bottom: 3px solid;
-	}
-
-	tfoot {
-		border-top: 3px solid;
-	}
-
 	td,
 	th {
 		word-break: normal;
 	}
 
-	figcaption {
+	:where(figcaption) {
 		@include caption-style-theme();
 	}
 }
diff --git a/packages/block-library/src/table/transforms.js b/packages/block-library/src/table/transforms.js
index 15ee7dff1178f4..bce2f56158d150 100644
--- a/packages/block-library/src/table/transforms.js
+++ b/packages/block-library/src/table/transforms.js
@@ -1,3 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { normalizeRowColSpan } from './utils';
+
 const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 	tr: {
 		allowEmpty: true,
@@ -5,11 +15,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope' ],
+				attributes: [ 'scope', 'colspan', 'rowspan' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
+				attributes: [ 'colspan', 'rowspan' ],
 			},
 		},
 	},
@@ -40,6 +51,59 @@ const transforms = {
 			type: 'raw',
 			selector: 'table',
 			schema: tablePasteSchema,
+			transform: ( node ) => {
+				const attributes = Array.from( node.children ).reduce(
+					( sectionAcc, section ) => {
+						if ( ! section.children.length ) {
+							return sectionAcc;
+						}
+
+						const sectionName = section.nodeName
+							.toLowerCase()
+							.slice( 1 );
+
+						const sectionAttributes = Array.from(
+							section.children
+						).reduce( ( rowAcc, row ) => {
+							if ( ! row.children.length ) {
+								return rowAcc;
+							}
+
+							const rowAttributes = Array.from(
+								row.children
+							).reduce( ( colAcc, col ) => {
+								const rowspan = normalizeRowColSpan(
+									col.getAttribute( 'rowspan' )
+								);
+								const colspan = normalizeRowColSpan(
+									col.getAttribute( 'colspan' )
+								);
+
+								colAcc.push( {
+									tag: col.nodeName.toLowerCase(),
+									content: col.innerHTML,
+									rowspan,
+									colspan,
+								} );
+
+								return colAcc;
+							}, [] );
+
+							rowAcc.push( {
+								cells: rowAttributes,
+							} );
+
+							return rowAcc;
+						}, [] );
+
+						sectionAcc[ sectionName ] = sectionAttributes;
+						return sectionAcc;
+					},
+					{}
+				);
+
+				return createBlock( 'core/table', attributes );
+			},
 		},
 	],
 };
diff --git a/packages/block-library/src/table/utils.js b/packages/block-library/src/table/utils.js
new file mode 100644
index 00000000000000..a445c7f5547a7a
--- /dev/null
+++ b/packages/block-library/src/table/utils.js
@@ -0,0 +1,18 @@
+/**
+ * Normalize the rowspan/colspan value.
+ * Returns undefined if the parameter is not a positive number
+ * or the default value (1) for rowspan/colspan.
+ *
+ * @param {number|undefined} rowColSpan rowspan/colspan value.
+ *
+ * @return {string|undefined} normalized rowspan/colspan value.
+ */
+export function normalizeRowColSpan( rowColSpan ) {
+	const parsedValue = parseInt( rowColSpan, 10 );
+	if ( ! Number.isInteger( parsedValue ) ) {
+		return undefined;
+	}
+	return parsedValue < 0 || parsedValue === 1
+		? undefined
+		: parsedValue.toString();
+}
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index c722227398603f..044bc0c5333768 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/packages/block-library/src/tag-cloud/block.json
@@ -1,10 +1,10 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/tag-cloud",
 	"title": "Tag Cloud",
 	"category": "widgets",
-	"description": "A cloud of your most used tags.",
+	"description": "A cloud of popular keywords, each sized by how often it appears.",
 	"textdomain": "default",
 	"attributes": {
 		"numberOfTags": {
@@ -48,6 +48,21 @@
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
 			"__experimentalLetterSpacing": true
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index 8cb286630d8eb7..eeb568e7a89ef1 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map, filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,13 +11,15 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalVStack as VStack,
+	Disabled,
 } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
@@ -44,7 +41,7 @@ const MAX_TAGS = 100;
 const MIN_FONT_SIZE = 0.1;
 const MAX_FONT_SIZE = 100;
 
-function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
+function TagCloudEdit( { attributes, setAttributes } ) {
 	const {
 		taxonomy,
 		showTagCounts,
@@ -53,30 +50,35 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		largestFontSize,
 	} = attributes;
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+
+	// The `pt` unit is used as the default value and is therefore
+	// always considered an available unit.
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-		],
+		availableUnits: availableUnits
+			? [ ...availableUnits, 'pt' ]
+			: [ '%', 'px', 'em', 'rem', 'pt' ],
 	} );
 
+	const taxonomies = useSelect(
+		( select ) => select( coreStore ).getTaxonomies( { per_page: -1 } ),
+		[]
+	);
+
 	const getTaxonomyOptions = () => {
 		const selectOption = {
 			label: __( '- Select -' ),
 			value: '',
 			disabled: true,
 		};
-		const taxonomyOptions = map(
-			filter( taxonomies, 'show_cloud' ),
-			( item ) => {
+		const taxonomyOptions = ( taxonomies ?? [] )
+			.filter( ( tax ) => !! tax.show_cloud )
+			.map( ( item ) => {
 				return {
 					value: item.slug,
 					label: item.name,
 				};
-			}
-		);
+			} );
 
 		return [ selectOption, ...taxonomyOptions ];
 	};
@@ -105,60 +107,87 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		setAttributes( updateObj );
 	};
 
+	// Remove border styles from the server-side attributes to prevent duplicate border.
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+		},
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Settings' ) }>
-				<SelectControl
-					label={ __( 'Taxonomy' ) }
-					options={ getTaxonomyOptions() }
-					value={ taxonomy }
-					onChange={ ( selectedTaxonomy ) =>
-						setAttributes( { taxonomy: selectedTaxonomy } )
-					}
-				/>
-				<ToggleControl
-					label={ __( 'Show post counts' ) }
-					checked={ showTagCounts }
-					onChange={ () =>
-						setAttributes( { showTagCounts: ! showTagCounts } )
-					}
-				/>
-				<RangeControl
-					label={ __( 'Number of tags' ) }
-					value={ numberOfTags }
-					onChange={ ( value ) =>
-						setAttributes( { numberOfTags: value } )
-					}
-					min={ MIN_TAGS }
-					max={ MAX_TAGS }
-					required
-				/>
-				<Flex>
-					<FlexItem isBlock>
-						<UnitControl
-							label={ __( 'Smallest size' ) }
-							value={ smallestFontSize }
-							onChange={ ( value ) => {
-								onFontSizeChange( 'smallestFontSize', value );
-							} }
-							units={ units }
-							min={ MIN_FONT_SIZE }
-							max={ MAX_FONT_SIZE }
-						/>
-					</FlexItem>
-					<FlexItem isBlock>
-						<UnitControl
-							label={ __( 'Largest size' ) }
-							value={ largestFontSize }
-							onChange={ ( value ) => {
-								onFontSizeChange( 'largestFontSize', value );
-							} }
-							units={ units }
-							min={ MIN_FONT_SIZE }
-							max={ MAX_FONT_SIZE }
-						/>
-					</FlexItem>
-				</Flex>
+				<VStack
+					spacing={ 4 }
+					className="wp-block-tag-cloud__inspector-settings"
+				>
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Taxonomy' ) }
+						options={ getTaxonomyOptions() }
+						value={ taxonomy }
+						onChange={ ( selectedTaxonomy ) =>
+							setAttributes( { taxonomy: selectedTaxonomy } )
+						}
+					/>
+					<Flex gap={ 4 }>
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Smallest size' ) }
+								value={ smallestFontSize }
+								onChange={ ( value ) => {
+									onFontSizeChange(
+										'smallestFontSize',
+										value
+									);
+								} }
+								units={ units }
+								min={ MIN_FONT_SIZE }
+								max={ MAX_FONT_SIZE }
+								size="__unstable-large"
+							/>
+						</FlexItem>
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Largest size' ) }
+								value={ largestFontSize }
+								onChange={ ( value ) => {
+									onFontSizeChange(
+										'largestFontSize',
+										value
+									);
+								} }
+								units={ units }
+								min={ MIN_FONT_SIZE }
+								max={ MAX_FONT_SIZE }
+								size="__unstable-large"
+							/>
+						</FlexItem>
+					</Flex>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Number of tags' ) }
+						value={ numberOfTags }
+						onChange={ ( value ) =>
+							setAttributes( { numberOfTags: value } )
+						}
+						min={ MIN_TAGS }
+						max={ MAX_TAGS }
+						required
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show tag counts' ) }
+						checked={ showTagCounts }
+						onChange={ () =>
+							setAttributes( { showTagCounts: ! showTagCounts } )
+						}
+					/>
+				</VStack>
 			</PanelBody>
 		</InspectorControls>
 	);
@@ -167,18 +196,16 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		<>
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
-				<ServerSideRender
-					skipBlockSupportAttributes
-					block="core/tag-cloud"
-					attributes={ attributes }
-				/>
+				<Disabled>
+					<ServerSideRender
+						skipBlockSupportAttributes
+						block="core/tag-cloud"
+						attributes={ serverSideAttributes }
+					/>
+				</Disabled>
 			</div>
 		</>
 	);
 }
 
-export default withSelect( ( select ) => {
-	return {
-		taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-	};
-} )( TagCloudEdit );
+export default TagCloudEdit;
diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
new file mode 100644
index 00000000000000..e85129e22f1aca
--- /dev/null
+++ b/packages/block-library/src/tag-cloud/editor.scss
@@ -0,0 +1,19 @@
+// The following styles are to prevent duplicate spacing and border for the tag cloud
+// block in the editor given it uses server side rendering. The specificity
+// must be higher than `0-1-0` to override global styles. Targeting the
+// inner use of the .wp-block-tag-cloud class should minimize impact on
+// other 3rd party styles targeting the block.
+.wp-block-tag-cloud .wp-block-tag-cloud {
+	margin: 0;
+	padding: 0;
+	border: none;
+	border-radius: inherit;
+}
+
+.wp-block-tag-cloud__inspector-settings {
+	.components-base-control,
+	.components-base-control:last-child {
+		// Cancel out extra margins added by block inspector
+		margin-bottom: 0;
+	}
+}
diff --git a/packages/block-library/src/tag-cloud/index.php b/packages/block-library/src/tag-cloud/index.php
index 7ff5f78400db64..8949dd8e5b11fb 100644
--- a/packages/block-library/src/tag-cloud/index.php
+++ b/packages/block-library/src/tag-cloud/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/tag-cloud` block on server.
  *
+ * @since 5.2.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the tag cloud for selected taxonomy.
@@ -27,8 +29,13 @@ function render_block_core_tag_cloud( $attributes ) {
 	);
 	$tag_cloud = wp_tag_cloud( $args );
 
-	if ( ! $tag_cloud ) {
-		$tag_cloud = __( 'There&#8217;s no content to show here yet.' );
+	if ( empty( $tag_cloud ) ) {
+		// Display placeholder content when there are no tags only in editor.
+		if ( wp_is_serving_rest_request() ) {
+			$tag_cloud = __( 'There&#8217;s no content to show here yet.' );
+		} else {
+			return '';
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();
@@ -42,6 +49,8 @@ function render_block_core_tag_cloud( $attributes ) {
 
 /**
  * Registers the `core/tag-cloud` block on server.
+ *
+ * @since 5.2.0
  */
 function register_block_core_tag_cloud() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/tag-cloud/style.scss b/packages/block-library/src/tag-cloud/style.scss
index 5fb04840de1517..dedb5e73ab1a1f 100644
--- a/packages/block-library/src/tag-cloud/style.scss
+++ b/packages/block-library/src/tag-cloud/style.scss
@@ -22,18 +22,20 @@
 		margin-left: 5px;
 		text-decoration: none;
 	}
+}
 
-	&.is-style-outline {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 1ch;
-
-		a {
-			border: 1px solid currentColor;
-			font-size: unset !important; // !important Needed to override the inline styles.
-			margin-right: 0;
-			padding: 1ch 2ch;
-			text-decoration: none !important; // !important needed to override generic post content link decoration.
-		}
-	}
+// Specificity is set to 0-1-0 to match global styles selectors.
+:root :where(.wp-block-tag-cloud.is-style-outline) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1ch;
+}
+// The block support related styles below haven't been replicated in the base theme.json
+// as the block doesn't yet adopt them for its inner links.
+:root :where(.wp-block-tag-cloud.is-style-outline a) {
+	border: 1px solid currentColor;
+	font-size: unset !important; // !important Needed to override the inline styles.
+	margin-right: 0;
+	padding: 1ch 2ch;
+	text-decoration: none !important; // !important needed to override generic post content link decoration.
 }
diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
index 3801eee941bc99..9710bdeee2e535 100644
--- a/packages/block-library/src/template-part/block.json
+++ b/packages/block-library/src/template-part/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/template-part",
 	"title": "Template Part",
 	"category": "theme",
@@ -23,7 +23,11 @@
 	"supports": {
 		"align": true,
 		"html": false,
-		"reusable": false
+		"reusable": false,
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }
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..04c6d3387346ac 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -1,18 +1,44 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { TemplatePartImportControls } from './import-controls';
+
+const htmlElementMessages = {
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+	article: __(
+		'The <article> element should represent a self-contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+};
+
 export function TemplatePartAdvancedControls( {
 	tagName,
 	setAttributes,
 	isEntityAvailable,
 	templatePartId,
 	defaultWrapper,
+	hasInnerBlocks,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -28,26 +54,27 @@ export function TemplatePartAdvancedControls( {
 		templatePartId
 	);
 
-	const { areaOptions } = useSelect( ( select ) => {
-		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-		// Blocks can be loaded into a *non-post* block editor.
-		/* eslint-disable @wordpress/data-no-store-string-literals */
-		const definedAreas =
-			select( 'core/editor' ).__experimentalGetDefaultTemplatePartAreas();
-		/* eslint-enable @wordpress/data-no-store-string-literals */
-		return {
-			areaOptions: definedAreas.map( ( { label, area: _area } ) => ( {
-				label,
-				value: _area,
-			} ) ),
-		};
-	}, [] );
+	const defaultTemplatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
+		[]
+	);
+
+	const areaOptions = defaultTemplatePartAreas.map(
+		( { label, area: _area } ) => ( {
+			label,
+			value: _area,
+		} )
+	);
 
 	return (
-		<InspectorControls __experimentalGroup="advanced">
+		<>
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
 						onChange={ ( value ) => {
@@ -55,8 +82,9 @@ export function TemplatePartAdvancedControls( {
 						} }
 						onFocus={ ( event ) => event.target.select() }
 					/>
-
 					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }
@@ -66,6 +94,8 @@ export function TemplatePartAdvancedControls( {
 				</>
 			) }
 			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ [
 					{
@@ -86,7 +116,14 @@ export function TemplatePartAdvancedControls( {
 				] }
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				help={ htmlElementMessages[ tagName ] }
 			/>
-		</InspectorControls>
+			{ ! hasInnerBlocks && (
+				<TemplatePartImportControls
+					area={ area }
+					setAttributes={ setAttributes }
+				/>
+			) }
+		</>
 	);
 }
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..ca9708f65764b4
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/import-controls.js
@@ -0,0 +1,173 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, 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 { 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';
+
+const SIDEBARS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,description,status,widgets',
+};
+
+export function TemplatePartImportControls( { area, setAttributes } ) {
+	const [ selectedSidebar, setSelectedSidebar ] = useState( '' );
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const registry = useRegistry();
+	const { sidebars, hasResolved } = useSelect( ( select ) => {
+		const { getSidebars, hasFinishedResolution } = select( coreStore );
+
+		return {
+			sidebars: getSidebars( SIDEBARS_QUERY ),
+			hasResolved: hasFinishedResolution( 'getSidebars', [
+				SIDEBARS_QUERY,
+			] ),
+		};
+	}, [] );
+	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 ] );
+
+	// Render an empty node while data is loading to avoid SlotFill re-positioning bug.
+	// See: https://github.com/WordPress/gutenberg/issues/15641.
+	if ( ! hasResolved ) {
+		return <Spacer marginBottom="0" />;
+	}
+
+	if ( hasResolved && ! options.length ) {
+		return null;
+	}
+
+	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 );
+
+			// Skip the block if we have no matching transformations.
+			if ( ! block ) {
+				skippedWidgets.add( widget.id_base );
+				return [];
+			}
+
+			return block;
+		} );
+
+		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 }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+				<FlexItem
+					style={ {
+						marginBottom: '8px',
+						marginTop: 'auto',
+					} }
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy || ! selectedSidebar }
+					>
+						{ _x( 'Import', 'button label' ) }
+					</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..ba66ffa673ff87 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -1,25 +1,30 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
-	BlockTitle,
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
+	InspectorControls,
+	__experimentalBlockPatternsList as BlockPatternsList,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { Spinner, Modal, MenuItem } from '@wordpress/components';
+import {
+	PanelBody,
+	Spinner,
+	Modal,
+	MenuItem,
+	ToolbarButton,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState, createInterpolateElement } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -35,26 +40,97 @@ import {
 	useTemplatePartArea,
 } from './utils/hooks';
 
+function ReplaceButton( {
+	isEntityAvailable,
+	area,
+	templatePartId,
+	isTemplatePartSelectionOpen,
+	setIsTemplatePartSelectionOpen,
+} ) {
+	// This hook fetches patterns, so don't run it unconditionally in the main
+	// edit function!
+	const { templateParts } = useAlternativeTemplateParts(
+		area,
+		templatePartId
+	);
+	const hasReplacements = !! templateParts.length;
+	const canReplace =
+		isEntityAvailable &&
+		hasReplacements &&
+		( area === 'header' || area === 'footer' );
+
+	if ( ! canReplace ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				setIsTemplatePartSelectionOpen( true );
+			} }
+			aria-expanded={ isTemplatePartSelectionOpen }
+			aria-haspopup="dialog"
+		>
+			{ __( 'Replace' ) }
+		</MenuItem>
+	);
+}
+
+function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
+	// This hook fetches patterns, so don't run it unconditionally in the main
+	// edit function!
+	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+	const canReplace =
+		isEntityAvailable &&
+		!! blockPatterns.length &&
+		( area === 'header' || area === 'footer' );
+
+	if ( ! canReplace ) {
+		return null;
+	}
+
+	return (
+		<PanelBody title={ __( 'Design' ) }>
+			<BlockPatternsList
+				label={ __( 'Templates' ) }
+				blockPatterns={ blockPatterns }
+				onClickPattern={ onSelect }
+				showTitlesAsTooltip
+			/>
+		</PanelBody>
+	);
+}
+
 export default function TemplatePartEdit( {
 	attributes,
 	setAttributes,
 	clientId,
-	isSelected,
 } ) {
-	const { slug, theme, tagName, layout = {} } = attributes;
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+	const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
 	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
-	// Set the postId block attribute if it did not exist,
-	// but wait until the inner blocks have loaded to allow
-	// new edits to trigger this.
-	const { isResolved, innerBlocks, isMissing, area } = useSelect(
+	const {
+		isResolved,
+		hasInnerBlocks,
+		isMissing,
+		area,
+		onNavigateToEntityRecord,
+		title,
+		canUserEdit,
+	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { getBlocks } = select( blockEditorStore );
+			const { getBlockCount, getSettings } = select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -72,46 +148,70 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
+			const _canUserEdit = hasResolvedEntity
+				? select( coreStore ).canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_template_part',
+						id: templatePartId,
+				  } )
+				: false;
+
 			return {
-				innerBlocks: getBlocks( clientId ),
+				hasInnerBlocks: getBlockCount( clientId ) > 0,
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
+				isMissing:
+					hasResolvedEntity &&
+					( ! entityRecord ||
+						Object.keys( entityRecord ).length === 0 ),
 				area: _area,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+				title: entityRecord?.title,
+				canUserEdit: !! _canUserEdit,
 			};
 		},
-		[ templatePartId, clientId ]
-	);
-	const { templateParts } = useAlternativeTemplateParts(
-		area,
-		templatePartId
+		[ templatePartId, attributes.area, clientId ]
 	);
-	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const hasReplacements = !! templateParts.length || !! blockPatterns.length;
+
 	const areaObject = useTemplatePartArea( area );
 	const blockProps = useBlockProps();
 	const isPlaceholder = ! slug;
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
 
-	// The `isSelected` check ensures the `BlockSettingsMenuControls` fill
-	// doesn't render multiple times. The block controls has similar internal check.
-	const canReplace =
-		isSelected &&
-		isEntityAvailable &&
-		hasReplacements &&
-		( area === 'header' || area === 'footer' );
+	const onPatternSelect = async ( pattern ) => {
+		await editEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId,
+			{
+				blocks: pattern.blocks,
+				content: serialize( pattern.blocks ),
+			}
+		);
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: template part title. */
+				__( 'Template Part "%s" updated.' ),
+				title || slug
+			),
+			{
+				type: 'snackbar',
+			}
+		);
+	};
 
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
 	if (
-		innerBlocks.length === 0 &&
+		! hasInnerBlocks &&
 		( ( slug && ! theme ) || ( slug && isMissing ) )
 	) {
 		return (
 			<TagName { ...blockProps }>
 				<Warning>
 					{ sprintf(
-						/* translators: %s: Template part slug */
+						/* translators: %s: Template part slug. */
 						__(
 							'Template part has been deleted or is unavailable: %s'
 						),
@@ -135,13 +235,34 @@ export default function TemplatePartEdit( {
 	return (
 		<>
 			<RecursionProvider uniqueId={ templatePartId }>
-				<TemplatePartAdvancedControls
-					tagName={ tagName }
-					setAttributes={ setAttributes }
-					isEntityAvailable={ isEntityAvailable }
-					templatePartId={ templatePartId }
-					defaultWrapper={ areaObject.tagName }
-				/>
+				{ isEntityAvailable &&
+					onNavigateToEntityRecord &&
+					canUserEdit && (
+						<BlockControls group="other">
+							<ToolbarButton
+								onClick={ () =>
+									onNavigateToEntityRecord( {
+										postId: templatePartId,
+										postType: 'wp_template_part',
+									} )
+								}
+							>
+								{ __( 'Edit' ) }
+							</ToolbarButton>
+						</BlockControls>
+					) }
+				{ canUserEdit && (
+					<InspectorControls group="advanced">
+						<TemplatePartAdvancedControls
+							tagName={ tagName }
+							setAttributes={ setAttributes }
+							isEntityAvailable={ isEntityAvailable }
+							templatePartId={ templatePartId }
+							defaultWrapper={ areaObject.tagName }
+							hasInnerBlocks={ hasInnerBlocks }
+						/>
+					</InspectorControls>
+				) }
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
 						<TemplatePartPlaceholder
@@ -155,35 +276,49 @@ export default function TemplatePartEdit( {
 						/>
 					</TagName>
 				) }
-				{ canReplace && (
-					<BlockSettingsMenuControls>
-						{ () => (
-							<MenuItem
-								onClick={ () => {
-									setIsTemplatePartSelectionOpen( true );
+				<BlockSettingsMenuControls>
+					{ ( { selectedClientIds } ) => {
+						// Only enable for single selection that matches the current block.
+						// Ensures menu item doesn't render multiple times.
+						if (
+							! (
+								selectedClientIds.length === 1 &&
+								clientId === selectedClientIds[ 0 ]
+							)
+						) {
+							return null;
+						}
+
+						return (
+							<ReplaceButton
+								{ ...{
+									isEntityAvailable,
+									area,
+									clientId,
+									templatePartId,
+									isTemplatePartSelectionOpen,
+									setIsTemplatePartSelectionOpen,
 								} }
-							>
-								{ createInterpolateElement(
-									__( 'Replace <BlockTitle />' ),
-									{
-										BlockTitle: (
-											<BlockTitle
-												clientId={ clientId }
-												maximumLength={ 25 }
-											/>
-										),
-									}
-								) }
-							</MenuItem>
-						) }
-					</BlockSettingsMenuControls>
-				) }
+							/>
+						);
+					} }
+				</BlockSettingsMenuControls>
+
+				<InspectorControls>
+					<TemplatesList
+						area={ area }
+						clientId={ clientId }
+						isEntityAvailable={ isEntityAvailable }
+						onSelect={ ( pattern ) => onPatternSelect( pattern ) }
+					/>
+				</InspectorControls>
+
 				{ isEntityAvailable && (
 					<TemplatePartInnerBlocks
 						tagName={ TagName }
 						blockProps={ blockProps }
 						postId={ templatePartId }
-						hasInnerBlocks={ innerBlocks.length > 0 }
+						hasInnerBlocks={ hasInnerBlocks }
 						layout={ layout }
 					/>
 				) }
@@ -201,10 +336,10 @@ export default function TemplatePartEdit( {
 						__( 'Choose a %s' ),
 						areaObject.label.toLowerCase()
 					) }
-					closeLabel={ __( 'Cancel' ) }
 					onRequestClose={ () =>
 						setIsTemplatePartSelectionOpen( false )
 					}
+					isFullScreen
 				>
 					<TemplatePartSelectionModal
 						templatePartId={ templatePartId }
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 19e79dca27e5ca..8582caba4cde47 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -1,28 +1,110 @@
 /**
  * WordPress dependencies
  */
-import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
 
-export default function TemplatePartInnerBlocks( {
+function useRenderAppender( hasInnerBlocks ) {
+	const blockEditingMode = useBlockEditingMode();
+	// Disable appending when the editing mode is 'contentOnly'. This is so that the user can't
+	// append into a template part when editing a page in the site editor. See
+	// DisableNonPageContentBlocks. Ideally instead of (mis)using editing mode there would be a
+	// block editor API for achieving this.
+	if ( blockEditingMode === 'contentOnly' ) {
+		return false;
+	}
+	if ( ! hasInnerBlocks ) {
+		return InnerBlocks.ButtonBlockAppender;
+	}
+}
+
+function useLayout( layout ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings()?.supportsLayout;
+	}, [] );
+	const [ defaultLayout ] = useSettings( 'layout' );
+	if ( themeSupportsLayout ) {
+		return layout?.inherit ? defaultLayout || {} : layout;
+	}
+}
+
+function NonEditableTemplatePartPreview( {
+	postId: id,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
+	useBlockEditingMode( 'disabled' );
+
+	const { content, editedBlocks } = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return {};
+			}
+			const { getEditedEntityRecord } = select( coreStore );
+			const editedRecord = getEditedEntityRecord(
+				'postType',
+				'wp_template_part',
+				id,
+				{ context: 'view' }
+			);
+			return {
+				editedBlocks: editedRecord.blocks,
+				content: editedRecord.content,
+			};
+		},
+		[ id ]
+	);
+
+	const blocks = useMemo( () => {
+		if ( ! id ) {
+			return undefined;
+		}
+
+		if ( editedBlocks ) {
+			return editedBlocks;
+		}
+
+		if ( ! content || typeof content !== 'string' ) {
+			return [];
+		}
+
+		return parse( content );
+	}, [ id, editedBlocks, content ] );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput: () => {},
+		onChange: () => {},
+		renderAppender: false,
+		layout: useLayout( layout ),
+	} );
+
+	return <TagName { ...innerBlocksProps } />;
+}
+
+function EditableTemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
 	layout,
 	tagName: TagName,
 	blockProps,
 } ) {
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings()?.supportsLayout;
-	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const onNavigateToEntityRecord = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().onNavigateToEntityRecord,
+		[]
+	);
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
@@ -34,11 +116,66 @@ export default function TemplatePartInnerBlocks( {
 		value: blocks,
 		onInput,
 		onChange,
-		renderAppender: hasInnerBlocks
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
-		__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+		renderAppender: useRenderAppender( hasInnerBlocks ),
+		layout: useLayout( layout ),
 	} );
 
-	return <TagName { ...innerBlocksProps } />;
+	const blockEditingMode = useBlockEditingMode();
+
+	const customProps =
+		blockEditingMode === 'contentOnly' && onNavigateToEntityRecord
+			? {
+					onDoubleClick: () =>
+						onNavigateToEntityRecord( {
+							postId: id,
+							postType: 'wp_template_part',
+						} ),
+			  }
+			: {};
+
+	return <TagName { ...innerBlocksProps } { ...customProps } />;
+}
+
+export default function TemplatePartInnerBlocks( {
+	postId: id,
+	hasInnerBlocks,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
+	const { canViewTemplatePart, canEditTemplatePart } = useSelect(
+		( select ) => {
+			return {
+				canViewTemplatePart: !! select( coreStore ).canUser( 'read', {
+					kind: 'postType',
+					name: 'wp_template_part',
+					id,
+				} ),
+				canEditTemplatePart: !! select( coreStore ).canUser( 'update', {
+					kind: 'postType',
+					name: 'wp_template_part',
+					id,
+				} ),
+			};
+		},
+		[ id ]
+	);
+
+	if ( ! canViewTemplatePart ) {
+		return null;
+	}
+
+	const TemplatePartInnerBlocksComponent = canEditTemplatePart
+		? EditableTemplatePartInnerBlocks
+		: NonEditableTemplatePartPreview;
+
+	return (
+		<TemplatePartInnerBlocksComponent
+			postId={ id }
+			hasInnerBlocks={ hasInnerBlocks }
+			layout={ layout }
+			tagName={ TagName }
+			blockProps={ blockProps }
+		/>
+	);
 }
diff --git a/packages/block-library/src/template-part/edit/placeholder.js b/packages/block-library/src/template-part/edit/placeholder.js
index ff43ee5644ad7c..0b8a980b8b7e3a 100644
--- a/packages/block-library/src/template-part/edit/placeholder.js
+++ b/packages/block-library/src/template-part/edit/placeholder.js
@@ -4,6 +4,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, Button, Spinner } from '@wordpress/components';
 import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -28,6 +30,21 @@ export default function TemplatePartPlaceholder( {
 		templatePartId
 	);
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+
+	const { isBlockBasedTheme, canCreateTemplatePart } = useSelect(
+		( select ) => {
+			const { getCurrentTheme, canUser } = select( coreStore );
+			return {
+				isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+				canCreateTemplatePart: canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template_part',
+				} ),
+			};
+		},
+		[]
+	);
+
 	const [ showTitleModal, setShowTitleModal ] = useState( false );
 	const areaObject = useTemplatePartArea( area );
 	const createFromBlocks = useCreateTemplatePartFromBlocks(
@@ -39,23 +56,36 @@ export default function TemplatePartPlaceholder( {
 		<Placeholder
 			icon={ areaObject.icon }
 			label={ areaObject.label }
-			instructions={ sprintf(
-				// Translators: %s as template part area title ("Header", "Footer", etc.).
-				__( 'Choose an existing %s or create a new one.' ),
-				areaObject.label.toLowerCase()
-			) }
+			instructions={
+				isBlockBasedTheme
+					? sprintf(
+							// Translators: %s as template part area title ("Header", "Footer", etc.).
+							__( 'Choose an existing %s or create a new one.' ),
+							areaObject.label.toLowerCase()
+					  )
+					: sprintf(
+							// Translators: %s as template part area title ("Header", "Footer", etc.).
+							__( 'Choose an existing %s.' ),
+							areaObject.label.toLowerCase()
+					  )
+			}
 		>
 			{ isResolving && <Spinner /> }
 
 			{ ! isResolving &&
 				!! ( templateParts.length || blockPatterns.length ) && (
-					<Button variant="primary" onClick={ onOpenSelectionModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ onOpenSelectionModal }
+					>
 						{ __( 'Choose' ) }
 					</Button>
 				) }
 
-			{ ! isResolving && (
+			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setShowTitleModal( true );
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 f979df799c6be6..71093306b93b2f 100644
--- a/packages/block-library/src/template-part/edit/selection-modal.js
+++ b/packages/block-library/src/template-part/edit/selection-modal.js
@@ -1,12 +1,10 @@
 /**
  * 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';
-import { parse } from '@wordpress/blocks';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
 	SearchControl,
@@ -19,10 +17,9 @@ import {
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
-	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
-import { createTemplatePartId } from './utils/create-template-part-id';
-import { searchPatterns } from './utils/search';
+import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
+import { searchPatterns } from '../../utils/search-patterns';
 
 export default function TemplatePartSelectionModal( {
 	setAttributes,
@@ -32,32 +29,27 @@ export default function TemplatePartSelectionModal( {
 	clientId,
 } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-
 	const { templateParts } = useAlternativeTemplateParts(
 		area,
 		templatePartId
 	);
+
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
 	const filteredTemplateParts = useMemo( () => {
-		const partsAsPatterns = templateParts.map( ( templatePart ) => ( {
-			name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-			title: templatePart.title.rendered,
-			blocks: parse( templatePart.content.raw ),
-			templatePart,
-		} ) );
+		const partsAsPatterns = templateParts.map( ( templatePart ) =>
+			mapTemplatePartToBlockPattern( templatePart )
+		);
 
 		return searchPatterns( partsAsPatterns, searchValue );
 	}, [ templateParts, searchValue ] );
-	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
-	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const onTemplatePartSelect = useCallback( ( templatePart ) => {
+	const onTemplatePartSelect = ( templatePart ) => {
 		setAttributes( {
 			slug: templatePart.slug,
 			theme: templatePart.theme,
@@ -74,12 +66,7 @@ export default function TemplatePartSelectionModal( {
 			}
 		);
 		onClose();
-	}, [] );
-
-	const createFromBlocks = useCreateTemplatePartFromBlocks(
-		area,
-		setAttributes
-	);
+	};
 
 	const hasTemplateParts = !! filteredTemplateParts.length;
 	const hasBlockPatterns = !! filteredBlockPatterns.length;
@@ -88,9 +75,10 @@ export default function TemplatePartSelectionModal( {
 		<div className="block-library-template-part__selection-content">
 			<div className="block-library-template-part__selection-search">
 				<SearchControl
+					__nextHasNoMarginBottom
 					onChange={ setSearchValue }
 					value={ searchValue }
-					label={ __( 'Search for replacements' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 			</div>
@@ -99,7 +87,6 @@ export default function TemplatePartSelectionModal( {
 					<h2>{ __( 'Existing template parts' ) }</h2>
 					<BlockPatternsList
 						blockPatterns={ filteredTemplateParts }
-						shownPatterns={ shownTemplateParts }
 						onClickPattern={ ( pattern ) => {
 							onTemplatePartSelect( pattern.templatePart );
 						} }
@@ -107,20 +94,6 @@ export default function TemplatePartSelectionModal( {
 				</div>
 			) }
 
-			{ hasBlockPatterns && (
-				<div>
-					<h2>{ __( 'Patterns' ) }</h2>
-					<BlockPatternsList
-						blockPatterns={ filteredBlockPatterns }
-						shownPatterns={ shownBlockPatterns }
-						onClickPattern={ ( pattern, blocks ) => {
-							createFromBlocks( blocks, pattern.title );
-							onClose();
-						} }
-					/>
-				</div>
-			) }
-
 			{ ! hasTemplateParts && ! hasBlockPatterns && (
 				<HStack alignment="center">
 					<p>{ __( 'No results found.' ) }</p>
diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js
index f5336e718e57ae..e1f10c91a67da8 100644
--- a/packages/block-library/src/template-part/edit/title-modal.js
+++ b/packages/block-library/src/template-part/edit/title-modal.js
@@ -5,16 +5,16 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	TextControl,
-	Flex,
-	FlexItem,
 	Button,
 	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 	// Restructure onCreate to set the blocks on local state.
 	// Add modal to confirm title and trigger onCreate.
-	const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) );
+	const [ title, setTitle ] = useState( '' );
 
 	const submitForCreation = ( event ) => {
 		event.preventDefault();
@@ -25,34 +25,45 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 		<Modal
 			title={ sprintf(
 				// Translators: %s as template part area title ("Header", "Footer", etc.).
-				__( 'Name and create your new %s' ),
+				__( 'Create new %s' ),
 				areaLabel.toLowerCase()
 			) }
-			closeLabel={ __( 'Cancel' ) }
-			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
 			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
 		>
 			<form onSubmit={ submitForCreation }>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-				/>
-				<Flex
-					className="wp-block-template-part__placeholder-create-new__title-form-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
+				<VStack spacing="5">
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ __( 'Custom Template Part' ) }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+								setTitle( '' );
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
 						<Button
 							variant="primary"
 							type="submit"
+							accessibleWhenDisabled
 							disabled={ ! title.length }
-							aria-disabled={ ! title.length }
+							__next40pxDefaultSize
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);
diff --git a/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js b/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js
new file mode 100644
index 00000000000000..bb13a8840c9458
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/utils/get-template-part-icon.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	header as headerIcon,
+	footer as footerIcon,
+	sidebar as sidebarIcon,
+	symbolFilled as symbolFilledIcon,
+} from '@wordpress/icons';
+
+export const getTemplatePartIcon = ( iconName ) => {
+	if ( 'header' === iconName ) {
+		return headerIcon;
+	} else if ( 'footer' === iconName ) {
+		return footerIcon;
+	} else if ( 'sidebar' === iconName ) {
+		return sidebarIcon;
+	}
+	return symbolFilledIcon;
+};
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..c71327db0290c4 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 { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export function useAlternativeTemplateParts( area, excludedId ) {
 				'wp_template_part',
 				query
 			),
-			isLoading: _isResolving( 'getEntityRecords', [
+			isResolving: _isResolving( 'getEntityRecords', [
 				'postType',
 				'wp_template_part',
 				query,
@@ -61,7 +61,7 @@ export function useAlternativeTemplateParts( area, excludedId ) {
 						templatePart.area === area )
 			) || []
 		);
-	}, [ templateParts, area ] );
+	}, [ templateParts, area, excludedId ] );
 
 	return {
 		templateParts: filteredTemplateParts,
@@ -83,15 +83,10 @@ export function useAlternativeBlockPatterns( area, clientId ) {
 			const blockNameWithArea = area
 				? `core/template-part/${ area }`
 				: 'core/template-part';
-			const {
-				getBlockRootClientId,
-				__experimentalGetPatternsByBlockTypes,
-			} = select( blockEditorStore );
+			const { getBlockRootClientId, getPatternsByBlockTypes } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-			return __experimentalGetPatternsByBlockTypes(
-				blockNameWithArea,
-				rootClientId
-			);
+			return getPatternsByBlockTypes( blockNameWithArea, rootClientId );
 		},
 		[ area, clientId ]
 	);
@@ -141,17 +136,16 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 export function useTemplatePartArea( area ) {
 	return useSelect(
 		( select ) => {
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			/* eslint-disable @wordpress/data-no-store-string-literals */
 			const definedAreas =
-				select(
-					'core/editor'
-				).__experimentalGetDefaultTemplatePartAreas();
-			/* eslint-enable @wordpress/data-no-store-string-literals */
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
 
-			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,
diff --git a/packages/block-library/src/template-part/edit/utils/map-template-part-to-block-pattern.js b/packages/block-library/src/template-part/edit/utils/map-template-part-to-block-pattern.js
new file mode 100644
index 00000000000000..5a053350d750f8
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/utils/map-template-part-to-block-pattern.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { createTemplatePartId } from './create-template-part-id';
+
+/**
+ * This maps the properties of a template part to those of a block pattern.
+ * @param {Object} templatePart
+ * @return {Object} The template part in the shape of block pattern.
+ */
+export function mapTemplatePartToBlockPattern( templatePart ) {
+	return {
+		name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+		title: templatePart.title.rendered,
+		blocks: parse( templatePart.content.raw ),
+		templatePart,
+	};
+}
diff --git a/packages/block-library/src/template-part/edit/utils/search.js b/packages/block-library/src/template-part/edit/utils/search.js
deleted file mode 100644
index 46db0a5ad14a72..00000000000000
--- a/packages/block-library/src/template-part/edit/utils/search.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
-/**
- * Sanitizes the search input string.
- *
- * @param {string} input The search input to normalize.
- *
- * @return {string} The normalized search input.
- */
-function normalizeSearchInput( input = '' ) {
-	// Disregard diacritics.
-	input = removeAccents( input );
-
-	// Trim & Lowercase.
-	input = input.trim().toLowerCase();
-
-	return input;
-}
-
-/**
- * Get the search rank for a given pattern and a specific search term.
- *
- * @param {Object} pattern     Pattern to rank
- * @param {string} searchValue Search term
- * @return {number} A pattern search rank
- */
-function getPatternSearchRank( pattern, searchValue ) {
-	const normalizedSearchValue = normalizeSearchInput( searchValue );
-	const normalizedTitle = normalizeSearchInput( pattern.title );
-
-	let rank = 0;
-
-	if ( normalizedSearchValue === normalizedTitle ) {
-		rank += 30;
-	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
-		rank += 20;
-	} else {
-		const searchTerms = normalizedSearchValue.split( ' ' );
-		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
-			normalizedTitle.includes( searchTerm )
-		);
-
-		// Prefer pattern with every search word in the title.
-		if ( hasMatchedTerms ) {
-			rank += 10;
-		}
-	}
-
-	return rank;
-}
-
-/**
- * Filters an pattern list given a search term.
- *
- * @param {Array}  patterns    Item list
- * @param {string} searchValue Search input.
- *
- * @return {Array} Filtered pattern list.
- */
-export function searchPatterns( patterns = [], searchValue = '' ) {
-	if ( ! searchValue ) {
-		return patterns;
-	}
-
-	const rankedPatterns = patterns
-		.map( ( pattern ) => {
-			return [ pattern, getPatternSearchRank( pattern, searchValue ) ];
-		} )
-		.filter( ( [ , rank ] ) => rank > 0 );
-
-	rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
-	return rankedPatterns.map( ( [ pattern ] ) => pattern );
-}
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..7932a005729414
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/utils/transformers.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	parse,
+	cloneBlock,
+	createBlock,
+	getGroupingBlockName,
+	getPossibleBlockTransformations,
+	switchToBlockType,
+} 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' ) {
+		let attributes;
+		if ( widget._embedded.about[ 0 ].is_multi ) {
+			attributes = {
+				idBase: widget.id_base,
+				instance: widget.instance,
+			};
+		} else {
+			attributes = {
+				id: widget.id,
+			};
+		}
+
+		return switchLegacyWidgetType(
+			createBlock( 'core/legacy-widget', attributes )
+		);
+	}
+
+	const parsedBlocks = parse( widget.instance.raw.content, {
+		__unstableSkipAutop: true,
+	} );
+
+	if ( ! parsedBlocks.length ) {
+		return undefined;
+	}
+
+	const block = parsedBlocks[ 0 ];
+
+	if ( block.name === 'core/widget-group' ) {
+		return createBlock(
+			getGroupingBlockName(),
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	if ( block.innerBlocks.length > 0 ) {
+		return cloneBlock(
+			block,
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	return block;
+}
+
+/**
+ * Switch Legacy Widget to the first matching transformation block.
+ *
+ * @param {Object} block Legacy Widget block object
+ * @return {Object|undefined} a block
+ */
+function switchLegacyWidgetType( 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( '*' )
+			);
+
+			// Skip wildcard transformations.
+			return ! hasWildCardFrom && ! hasWildCardTo;
+		}
+	);
+
+	if ( ! transforms.length ) {
+		return undefined;
+	}
+
+	return switchToBlockType( block, transforms[ 0 ].name );
+}
+
+function transformInnerBlocks( innerBlocks = [] ) {
+	return innerBlocks
+		.flatMap( ( block ) => {
+			if ( block.name === 'core/legacy-widget' ) {
+				return switchLegacyWidgetType( block );
+			}
+
+			return createBlock(
+				block.name,
+				block.attributes,
+				transformInnerBlocks( block.innerBlocks )
+			);
+		} )
+		.filter( ( block ) => !! block );
+}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index a847ecec01f94d..735c9370099d91 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -1,18 +1,16 @@
 .block-editor-template-part__selection-modal {
 	z-index: z-index(".block-editor-template-part__selection-modal");
 
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	.components-modal__frame {
-		@include break-small() {
-			width: calc(100% - #{$grid-unit-20 * 2});
-			height: calc(100% - #{$header-height * 2});
-		}
-		@include break-medium() {
-			width: $break-medium - $grid-unit-20 * 2;
+	.block-editor-block-patterns-list {
+		column-count: 2;
+		column-gap: $grid-unit-30;
+
+		@include break-wide() {
+			column-count: 3;
 		}
-		@include break-large() {
-			height: 70%;
+
+		.block-editor-block-patterns-list__list-item {
+			break-inside: avoid-column;
 		}
 	}
 }
@@ -25,20 +23,22 @@
 	z-index: z-index(".block-library-template-part__selection-search");
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+// We don't use .is-outline-mode in this case so colors take effect properly in the block editor.
+.block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.block-editor-block-list__block:not(.remove-outline).is-reusable {
+
+	&.is-highlighted::after,
+	&.is-selected::after {
+		outline-color: var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
 		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
+			outline-color: var(--wp-block-synced-color);
 		}
 	}
 }
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
+	border: none;
+}
diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js
index c64f093427f95f..20976e231d811c 100644
--- a/packages/block-library/src/template-part/index.js
+++ b/packages/block-library/src/template-part/index.js
@@ -32,18 +32,19 @@ export const settings = {
 			return;
 		}
 
-		const entity = select( coreDataStore ).getEntityRecord(
+		const { getCurrentTheme, getEditedEntityRecord } =
+			select( coreDataStore );
+		const entity = getEditedEntityRecord(
 			'postType',
 			'wp_template_part',
-			theme + '//' + slug
+			( theme || getCurrentTheme()?.stylesheet ) + '//' + slug
 		);
 		if ( ! entity ) {
 			return;
 		}
 
 		return (
-			decodeEntities( entity.title?.rendered ) ||
-			capitalCase( entity.slug )
+			decodeEntities( entity.title ) || capitalCase( entity.slug || '' )
 		);
 	},
 	edit,
@@ -60,7 +61,7 @@ export const init = () => {
 	const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromPostTemplates',
+		'core/block-library/removeTemplatePartsFromPostTemplates',
 		(
 			canInsert,
 			blockType,
diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php
index bef49341d7bb56..be867c4ced1660 100644
--- a/packages/block-library/src/template-part/index.php
+++ b/packages/block-library/src/template-part/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the `core/template-part` block on the server.
  *
+ * @since 5.9.0
+ *
+ * @global WP_Embed $wp_embed WordPress Embed object.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.
@@ -18,37 +22,35 @@ function render_block_core_template_part( $attributes ) {
 	$template_part_id = null;
 	$content          = null;
 	$area             = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
+	$theme            = isset( $attributes['theme'] ) ? $attributes['theme'] : get_stylesheet();
 
-	if (
-		isset( $attributes['slug'] ) &&
-		isset( $attributes['theme'] ) &&
-		wp_get_theme()->get_stylesheet() === $attributes['theme']
-	) {
-		$template_part_id    = $attributes['theme'] . '//' . $attributes['slug'];
+	if ( isset( $attributes['slug'] ) && get_stylesheet() === $theme ) {
+		$template_part_id    = $theme . '//' . $attributes['slug'];
 		$template_part_query = new WP_Query(
 			array(
-				'post_type'      => 'wp_template_part',
-				'post_status'    => 'publish',
-				'post_name__in'  => array( $attributes['slug'] ),
-				'tax_query'      => array(
+				'post_type'           => 'wp_template_part',
+				'post_status'         => 'publish',
+				'post_name__in'       => array( $attributes['slug'] ),
+				'tax_query'           => array(
 					array(
 						'taxonomy' => 'wp_theme',
 						'field'    => 'name',
-						'terms'    => $attributes['theme'],
+						'terms'    => $theme,
 					),
 				),
-				'posts_per_page' => 1,
-				'no_found_rows'  => true,
+				'posts_per_page'      => 1,
+				'no_found_rows'       => true,
+				'lazy_load_term_meta' => false, // Do not lazy load term meta, as template parts only have one term.
 			)
 		);
 		$template_part_post  = $template_part_query->have_posts() ? $template_part_query->next_post() : null;
 		if ( $template_part_post ) {
 			// A published post might already exist if this template part was customized elsewhere
 			// or if it's part of a customized template.
-			$content    = $template_part_post->post_content;
-			$area_terms = get_the_terms( $template_part_post, 'wp_template_part_area' );
-			if ( ! is_wp_error( $area_terms ) && false !== $area_terms ) {
-				$area = $area_terms[0]->name;
+			$block_template = _build_block_template_result_from_post( $template_part_post );
+			$content        = $block_template->content;
+			if ( isset( $block_template->area ) ) {
+				$area = $block_template->area;
 			}
 			/**
 			 * Fires when a block template part is loaded from a template post stored in the database.
@@ -62,18 +64,22 @@ function render_block_core_template_part( $attributes ) {
 			 */
 			do_action( 'render_block_core_template_part_post', $template_part_id, $attributes, $template_part_post, $content );
 		} else {
+			$template_part_file_path = '';
 			// Else, if the template part was provided by the active theme,
 			// render the corresponding file content.
-			$parent_theme_folders        = get_block_theme_folders( get_template() );
-			$child_theme_folders         = get_block_theme_folders( get_stylesheet() );
-			$child_theme_part_file_path  = get_theme_file_path( '/' . $child_theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
-			$parent_theme_part_file_path = get_theme_file_path( '/' . $parent_theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
-			$template_part_file_path     = 0 === validate_file( $attributes['slug'] ) && file_exists( $child_theme_part_file_path ) ? $child_theme_part_file_path : $parent_theme_part_file_path;
-			if ( 0 === validate_file( $attributes['slug'] ) && file_exists( $template_part_file_path ) ) {
-				$content = file_get_contents( $template_part_file_path );
-				$content = is_string( $content ) && '' !== $content
-						? _inject_theme_attribute_in_block_template_content( $content )
-						: '';
+			if ( 0 === validate_file( $attributes['slug'] ) ) {
+				$block_template = get_block_file_template( $template_part_id, 'wp_template_part' );
+
+				$content = $block_template->content;
+				if ( isset( $block_template->area ) ) {
+					$area = $block_template->area;
+				}
+
+				// Needed for the `render_block_core_template_part_file` and `render_block_core_template_part_none` actions below.
+				$block_template_file = _get_block_template_file( 'wp_template_part', $attributes['slug'] );
+				if ( $block_template_file ) {
+					$template_part_file_path = $block_template_file['path'];
+				}
 			}
 
 			if ( '' !== $content && null !== $content ) {
@@ -105,19 +111,18 @@ function render_block_core_template_part( $attributes ) {
 
 	// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 	// is set in `wp_debug_mode()`.
-	$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-		defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+	$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
-	if ( is_null( $content ) && $is_debug ) {
-		if ( ! isset( $attributes['slug'] ) ) {
-			// If there is no slug this is a placeholder and we dont want to return any message.
-			return;
+	if ( is_null( $content ) ) {
+		if ( $is_debug && isset( $attributes['slug'] ) ) {
+			return sprintf(
+				/* translators: %s: Template part slug. */
+				__( 'Template part has been deleted or is unavailable: %s' ),
+				$attributes['slug']
+			);
 		}
-		return sprintf(
-			/* translators: %s: Template part slug. */
-			__( 'Template part has been deleted or is unavailable: %s' ),
-			$attributes['slug']
-		);
+
+		return '';
 	}
 
 	if ( isset( $seen_ids[ $template_part_id ] ) ) {
@@ -127,27 +132,39 @@ function render_block_core_template_part( $attributes ) {
 			'';
 	}
 
+	// Look up area definition.
+	$area_definition = null;
+	$defined_areas   = get_allowed_block_template_part_areas();
+	foreach ( $defined_areas as $defined_area ) {
+		if ( $defined_area['area'] === $area ) {
+			$area_definition = $defined_area;
+			break;
+		}
+	}
+
+	// If $area is not allowed, set it back to the uncategorized default.
+	if ( ! $area_definition ) {
+		$area = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
+	}
+
 	// Run through the actions that are typically taken on the_content.
+	$content                       = shortcode_unautop( $content );
+	$content                       = do_shortcode( $content );
 	$seen_ids[ $template_part_id ] = true;
 	$content                       = do_blocks( $content );
 	unset( $seen_ids[ $template_part_id ] );
 	$content = wptexturize( $content );
 	$content = convert_smilies( $content );
-	$content = shortcode_unautop( $content );
-	$content = wp_filter_content_tags( $content );
-	$content = do_shortcode( $content );
+	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
 
 	// Handle embeds for block template parts.
 	global $wp_embed;
 	$content = $wp_embed->autoembed( $content );
 
-	if ( empty( $attributes['tagName'] ) ) {
-		$defined_areas = get_allowed_block_template_part_areas();
-		$area_tag      = 'div';
-		foreach ( $defined_areas as $defined_area ) {
-			if ( $defined_area['area'] === $area && isset( $defined_area['area_tag'] ) ) {
-				$area_tag = $defined_area['area_tag'];
-			}
+	if ( empty( $attributes['tagName'] ) || tag_escape( $attributes['tagName'] ) !== $attributes['tagName'] ) {
+		$area_tag = 'div';
+		if ( $area_definition && isset( $area_definition['area_tag'] ) ) {
+			$area_tag = $area_definition['area_tag'];
 		}
 		$html_tag = $area_tag;
 	} else {
@@ -161,21 +178,36 @@ function render_block_core_template_part( $attributes ) {
 /**
  * Returns an array of area variation objects for the template part block.
  *
+ * @since 6.1.0
+ *
+ * @param array $instance_variations The variations for instances.
+ *
  * @return array Array containing the block variation objects.
  */
-function build_template_part_block_area_variations() {
+function build_template_part_block_area_variations( $instance_variations ) {
 	$variations    = array();
 	$defined_areas = get_allowed_block_template_part_areas();
+
 	foreach ( $defined_areas as $area ) {
 		if ( 'uncategorized' !== $area['area'] ) {
+			$has_instance_for_area = false;
+			foreach ( $instance_variations as $variation ) {
+				if ( $variation['attributes']['area'] === $area['area'] ) {
+					$has_instance_for_area = true;
+					break;
+				}
+			}
+
+			$scope = $has_instance_for_area ? array() : array( 'inserter' );
+
 			$variations[] = array(
-				'name'        => $area['area'],
+				'name'        => 'area_' . $area['area'],
 				'title'       => $area['label'],
 				'description' => $area['description'],
 				'attributes'  => array(
 					'area' => $area['area'],
 				),
-				'scope'       => array( 'inserter' ),
+				'scope'       => $scope,
 				'icon'        => $area['icon'],
 			);
 		}
@@ -186,6 +218,8 @@ function build_template_part_block_area_variations() {
 /**
  * Returns an array of instance variation objects for the template part block
  *
+ * @since 6.1.0
+ *
  * @return array Array containing the block variation objects.
  */
 function build_template_part_block_instance_variations() {
@@ -211,7 +245,7 @@ function build_template_part_block_instance_variations() {
 
 	foreach ( $template_parts as $template_part ) {
 		$variations[] = array(
-			'name'        => sanitize_title( $template_part->slug ),
+			'name'        => 'instance_' . sanitize_title( $template_part->slug ),
 			'title'       => $template_part->title,
 			// If there's no description for the template part don't show the
 			// block description. This is a bit hacky, but prevent the fallback
@@ -224,7 +258,7 @@ function build_template_part_block_instance_variations() {
 				'area'  => $template_part->area,
 			),
 			'scope'       => array( 'inserter' ),
-			'icon'        => $icon_by_area[ $template_part->area ],
+			'icon'        => isset( $icon_by_area[ $template_part->area ] ) ? $icon_by_area[ $template_part->area ] : null,
 			'example'     => array(
 				'attributes' => array(
 					'slug'  => $template_part->slug,
@@ -240,21 +274,27 @@ function build_template_part_block_instance_variations() {
 /**
  * Returns an array of all template part block variations.
  *
+ * @since 5.9.0
+ *
  * @return array Array containing the block variation objects.
  */
 function build_template_part_block_variations() {
-	return array_merge( build_template_part_block_area_variations(), build_template_part_block_instance_variations() );
+	$instance_variations = build_template_part_block_instance_variations();
+	$area_variations     = build_template_part_block_area_variations( $instance_variations );
+	return array_merge( $area_variations, $instance_variations );
 }
 
 /**
  * Registers the `core/template-part` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_template_part() {
 	register_block_type_from_metadata(
 		__DIR__ . '/template-part',
 		array(
-			'render_callback' => 'render_block_core_template_part',
-			'variations'      => build_template_part_block_variations(),
+			'render_callback'    => 'render_block_core_template_part',
+			'variation_callback' => 'build_template_part_block_variations',
 		)
 	);
 }
diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss
index 58e7b1fdf2d9ff..179873b9448b82 100644
--- a/packages/block-library/src/template-part/theme.scss
+++ b/packages/block-library/src/template-part/theme.scss
@@ -1,9 +1,7 @@
 // Same as the group block styles.
-.wp-block-template-part {
-	&.has-background {
-		// Matches paragraph Block padding
-		padding: $block-bg-padding--v $block-bg-padding--h;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
+:root :where(.wp-block-template-part.has-background) {
+	// Matches paragraph Block padding
+	padding: $block-bg-padding--v $block-bg-padding--h;
+	margin-top: 0;
+	margin-bottom: 0;
 }
diff --git a/packages/block-library/src/template-part/variations.js b/packages/block-library/src/template-part/variations.js
index 866cf15d56c125..6f62057bec33dd 100644
--- a/packages/block-library/src/template-part/variations.js
+++ b/packages/block-library/src/template-part/variations.js
@@ -3,23 +3,11 @@
  */
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
-import {
-	header as headerIcon,
-	footer as footerIcon,
-	sidebar as sidebarIcon,
-	symbolFilled as symbolFilledIcon,
-} from '@wordpress/icons';
 
-function getTemplatePartIcon( iconName ) {
-	if ( 'header' === iconName ) {
-		return headerIcon;
-	} else if ( 'footer' === iconName ) {
-		return footerIcon;
-	} else if ( 'sidebar' === iconName ) {
-		return sidebarIcon;
-	}
-	return symbolFilledIcon;
-}
+/**
+ * Internal dependencies
+ */
+import { getTemplatePartIcon } from './edit/utils/get-template-part-icon';
 
 export function enhanceTemplatePartVariations( settings, name ) {
 	if ( name !== 'core/template-part' ) {
@@ -31,14 +19,20 @@ export function enhanceTemplatePartVariations( settings, name ) {
 			const { area, theme, slug } = blockAttributes;
 			// We first check the `area` block attribute which is set during insertion.
 			// This property is removed on the creation of a template part.
-			if ( area ) return area === variationAttributes.area;
+			if ( area ) {
+				return area === variationAttributes.area;
+			}
 			// Find a matching variation from the created template part
 			// by checking the entity's `area` property.
-			if ( ! slug ) return false;
-			const entity = select( coreDataStore ).getEntityRecord(
+			if ( ! slug ) {
+				return false;
+			}
+			const { getCurrentTheme, getEntityRecord } =
+				select( coreDataStore );
+			const entity = getEntityRecord(
 				'postType',
 				'wp_template_part',
-				`${ theme }//${ slug }`
+				`${ theme || getCurrentTheme()?.stylesheet }//${ slug }`
 			);
 
 			if ( entity?.slug ) {
diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json
index 66eb9348a47093..dc27fc17df7890 100644
--- a/packages/block-library/src/term-description/block.json
+++ b/packages/block-library/src/term-description/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/term-description",
 	"title": "Term Description",
 	"category": "theme",
@@ -37,7 +37,21 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
-	},
-	"editorStyle": "wp-block-term-description-editor"
+	}
 }
diff --git a/packages/block-library/src/term-description/edit.js b/packages/block-library/src/term-description/edit.js
index cd728ec051b603..c19d38abde5136 100644
--- a/packages/block-library/src/term-description/edit.js
+++ b/packages/block-library/src/term-description/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ export default function TermDescriptionEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style: mergedStyle,
diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js
index 0ff710a91f5d50..330ca05bd174e1 100644
--- a/packages/block-library/src/term-description/index.js
+++ b/packages/block-library/src/term-description/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php
index 4f1cd7e518d110..925b37f34f98a8 100644
--- a/packages/block-library/src/term-description/index.php
+++ b/packages/block-library/src/term-description/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/term-description` block on the server.
  *
+ * @since 5.9.0
+ *
  * @param array $attributes Block attributes.
  *
  * @return string Returns the description of the current taxonomy term, if available
@@ -23,16 +25,22 @@ function render_block_core_term_description( $attributes ) {
 		return '';
 	}
 
-	$extra_attributes   = ( isset( $attributes['textAlign'] ) )
-		? array( 'class' => 'has-text-align-' . $attributes['textAlign'] )
-		: array();
-	$wrapper_attributes = get_block_wrapper_attributes( $extra_attributes );
+	$classes = array();
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes[] = 'has-text-align-' . $attributes['textAlign'];
+	}
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classes[] = 'has-link-color';
+	}
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ) ) );
 
 	return '<div ' . $wrapper_attributes . '>' . $term_description . '</div>';
 }
 
 /**
  * Registers the `core/term-description` block on the server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_term_description() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/term-description/style.scss b/packages/block-library/src/term-description/style.scss
new file mode 100644
index 00000000000000..1649a8d80c8f12
--- /dev/null
+++ b/packages/block-library/src/term-description/style.scss
@@ -0,0 +1,13 @@
+// Lowest specificity on wrapper margins to avoid overriding layout styles.
+:where(.wp-block-term-description) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: var(--wp--style--block-gap);
+}
+
+// Zero out the margin on the description paragraph.
+.wp-block-term-description p {
+	margin-top: 0;
+	margin-bottom: 0;
+}
diff --git a/packages/block-library/src/text-columns/block.json b/packages/block-library/src/text-columns/block.json
index 84d5ccece038ab..2599df111d34bd 100644
--- a/packages/block-library/src/text-columns/block.json
+++ b/packages/block-library/src/text-columns/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/text-columns",
 	"title": "Text Columns (deprecated)",
 	"icon": "columns",
@@ -29,7 +29,10 @@
 		}
 	},
 	"supports": {
-		"inserter": false
+		"inserter": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-text-columns-editor",
 	"style": "wp-block-text-columns"
diff --git a/packages/block-library/src/text-columns/edit.js b/packages/block-library/src/text-columns/edit.js
index 180c786226c803..761d047e90b1c9 100644
--- a/packages/block-library/src/text-columns/edit.js
+++ b/packages/block-library/src/text-columns/edit.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,6 +34,8 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody>
 					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>
@@ -63,7 +60,7 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 						>
 							<RichText
 								tagName="p"
-								value={ get( content, [ index, 'children' ] ) }
+								value={ content?.[ index ]?.children }
 								onChange={ ( nextContent ) => {
 									setAttributes( {
 										content: [
diff --git a/packages/block-library/src/text-columns/save.js b/packages/block-library/src/text-columns/save.js
index 4f91841b2dca9b..80ea877382b72b 100644
--- a/packages/block-library/src/text-columns/save.js
+++ b/packages/block-library/src/text-columns/save.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,7 +15,7 @@ export default function save( { attributes } ) {
 				<div className="wp-block-column" key={ `column-${ index }` }>
 					<RichText.Content
 						tagName="p"
-						value={ get( content, [ index, 'children' ] ) }
+						value={ content?.[ index ]?.children }
 					/>
 				</div>
 			) ) }
diff --git a/packages/block-library/src/utils/caption.js b/packages/block-library/src/utils/caption.js
new file mode 100644
index 00000000000000..82e951d4813eb1
--- /dev/null
+++ b/packages/block-library/src/utils/caption.js
@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useCallback } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockControls,
+	__experimentalGetElementClassName,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { caption as captionIcon } from '@wordpress/icons';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+export function Caption( {
+	attributeKey = 'caption',
+	attributes,
+	setAttributes,
+	isSelected,
+	insertBlocksAfter,
+	placeholder = __( 'Add caption' ),
+	label = __( 'Caption text' ),
+	showToolbarButton = true,
+	excludeElementClassName,
+	className,
+	readOnly,
+	tagName = 'figcaption',
+	addLabel = __( 'Add caption' ),
+	removeLabel = __( 'Remove caption' ),
+	icon = captionIcon,
+	...props
+} ) {
+	const caption = attributes[ attributeKey ];
+	const prevCaption = usePrevious( caption );
+	const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
+	const isCaptionEmpty = RichText.isEmpty( caption );
+	const isPrevCaptionEmpty = RichText.isEmpty( prevCaption );
+	const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty );
+
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( ! isCaptionEmpty && isPrevCaptionEmpty ) {
+			setShowCaption( true );
+		}
+	}, [ isCaptionEmpty, isPrevCaptionEmpty ] );
+
+	useEffect( () => {
+		if ( ! isSelected && isCaptionEmpty ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, isCaptionEmpty ] );
+
+	// Focus the caption when we click to add one.
+	const ref = useCallback(
+		( node ) => {
+			if ( node && isCaptionEmpty ) {
+				node.focus();
+			}
+		},
+		[ isCaptionEmpty ]
+	);
+
+	return (
+		<>
+			{ showToolbarButton && (
+				<BlockControls group="block">
+					<ToolbarButton
+						onClick={ () => {
+							setShowCaption( ! showCaption );
+							if ( showCaption && caption ) {
+								setAttributes( {
+									[ attributeKey ]: undefined,
+								} );
+							}
+						} }
+						icon={ icon }
+						isPressed={ showCaption }
+						label={ showCaption ? removeLabel : addLabel }
+					/>
+				</BlockControls>
+			) }
+			{ showCaption &&
+				( ! RichText.isEmpty( caption ) || isSelected ) && (
+					<RichText
+						identifier={ attributeKey }
+						tagName={ tagName }
+						className={ clsx(
+							className,
+							excludeElementClassName
+								? ''
+								: __experimentalGetElementClassName( 'caption' )
+						) }
+						ref={ ref }
+						aria-label={ label }
+						placeholder={ placeholder }
+						value={ caption }
+						onChange={ ( value ) =>
+							setAttributes( { [ attributeKey ]: value } )
+						}
+						inlineToolbar
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+						readOnly={ readOnly }
+						{ ...props }
+					/>
+				) }
+		</>
+	);
+}
diff --git a/packages/block-library/src/utils/clean-empty-object.js b/packages/block-library/src/utils/clean-empty-object.js
deleted file mode 100644
index adc78556a657e4..00000000000000
--- a/packages/block-library/src/utils/clean-empty-object.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty, mapValues } from 'lodash';
-
-/**
- * Removed empty nodes from nested objects.
- *
- * @param {Object} object
- * @return {Object} Object cleaned from empty nodes.
- */
-const cleanEmptyObject = ( object ) => {
-	if (
-		object === null ||
-		typeof object !== 'object' ||
-		Array.isArray( object )
-	) {
-		return object;
-	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
-
-export default cleanEmptyObject;
diff --git a/packages/block-library/src/utils/get-transformed-metadata.js b/packages/block-library/src/utils/get-transformed-metadata.js
new file mode 100644
index 00000000000000..53d79d3c1e42ac
--- /dev/null
+++ b/packages/block-library/src/utils/get-transformed-metadata.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+
+/**
+ * Transform the metadata attribute with only the values and bindings specified by each transform.
+ * Returns `undefined` if the input metadata is falsy.
+ *
+ * @param {Object}   metadata         Original metadata attribute from the block that is being transformed.
+ * @param {Object}   newBlockName     Name of the final block after the transformation.
+ * @param {Function} bindingsCallback Optional callback to transform the `bindings` property object.
+ * @return {Object|undefined} New metadata object only with the relevant properties.
+ */
+export function getTransformedMetadata(
+	metadata,
+	newBlockName,
+	bindingsCallback
+) {
+	if ( ! metadata ) {
+		return;
+	}
+	const { supports } = getBlockType( newBlockName );
+	// Fixed until an opt-in mechanism is implemented.
+	const BLOCK_BINDINGS_SUPPORTED_BLOCKS = [
+		'core/paragraph',
+		'core/heading',
+		'core/image',
+		'core/button',
+	];
+	// The metadata properties that should be preserved after the transform.
+	const transformSupportedProps = [];
+	// If it support bindings, and there is a transform bindings callback, add the `id` and `bindings` properties.
+	if (
+		BLOCK_BINDINGS_SUPPORTED_BLOCKS.includes( newBlockName ) &&
+		bindingsCallback
+	) {
+		transformSupportedProps.push( 'id', 'bindings' );
+	}
+	// If it support block naming (true by default), add the `name` property.
+	if ( supports.renaming !== false ) {
+		transformSupportedProps.push( 'name' );
+	}
+
+	// Return early if no supported properties.
+	if ( ! transformSupportedProps.length ) {
+		return;
+	}
+
+	const newMetadata = Object.entries( metadata ).reduce(
+		( obj, [ prop, value ] ) => {
+			// If prop is not supported, don't add it to the new metadata object.
+			if ( ! transformSupportedProps.includes( prop ) ) {
+				return obj;
+			}
+			obj[ prop ] =
+				prop === 'bindings' ? bindingsCallback( value ) : value;
+			return obj;
+		},
+		{}
+	);
+
+	// Return undefined if object is empty.
+	return Object.keys( newMetadata ).length ? newMetadata : undefined;
+}
diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
index 4b64c529299467..61515306e8bfd1 100644
--- a/packages/block-library/src/utils/hooks.js
+++ b/packages/block-library/src/utils/hooks.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useEffect, useRef } from '@wordpress/element';
+import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Returns whether the current user can edit the given entity.
@@ -14,11 +18,86 @@ import { store as coreStore } from '@wordpress/core-data';
 export function useCanEditEntity( kind, name, recordId ) {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).canUserEditEntityRecord( kind, name, recordId ),
+			select( coreStore ).canUser( 'update', {
+				kind,
+				name,
+				id: recordId,
+			} ),
 		[ kind, name, recordId ]
 	);
 }
 
-export default {
-	useCanEditEntity,
-};
+/**
+ * Handles uploading a media file from a blob URL on mount.
+ *
+ * @param {Object}   args              Upload media arguments.
+ * @param {string}   args.url          Blob URL.
+ * @param {?Array}   args.allowedTypes Array of allowed media types.
+ * @param {Function} args.onChange     Function called when the media is uploaded.
+ * @param {Function} args.onError      Function called when an error happens.
+ */
+export function useUploadMediaFromBlobURL( args = {} ) {
+	const latestArgsRef = useRef( args );
+	const hasUploadStartedRef = useRef( false );
+	const { getSettings } = useSelect( blockEditorStore );
+
+	useLayoutEffect( () => {
+		latestArgsRef.current = args;
+	} );
+
+	useEffect( () => {
+		// Uploading is a special effect that can't be canceled via the cleanup method.
+		// The extra check avoids duplicate uploads in development mode (React.StrictMode).
+		if ( hasUploadStartedRef.current ) {
+			return;
+		}
+		if (
+			! latestArgsRef.current.url ||
+			! isBlobURL( latestArgsRef.current.url )
+		) {
+			return;
+		}
+
+		const file = getBlobByURL( latestArgsRef.current.url );
+		if ( ! file ) {
+			return;
+		}
+
+		const { url, allowedTypes, onChange, onError } = latestArgsRef.current;
+		const { mediaUpload } = getSettings();
+
+		hasUploadStartedRef.current = true;
+
+		mediaUpload( {
+			filesList: [ file ],
+			allowedTypes,
+			onFileChange: ( [ media ] ) => {
+				if ( isBlobURL( media?.url ) ) {
+					return;
+				}
+
+				revokeBlobURL( url );
+				onChange( media );
+				hasUploadStartedRef.current = false;
+			},
+			onError: ( message ) => {
+				revokeBlobURL( url );
+				onError( message );
+				hasUploadStartedRef.current = false;
+			},
+		} );
+	}, [ getSettings ] );
+}
+
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}
diff --git a/packages/block-library/src/utils/init-block.js b/packages/block-library/src/utils/init-block.js
index fb48f422a07cfc..86cc1880e2d0e4 100644
--- a/packages/block-library/src/utils/init-block.js
+++ b/packages/block-library/src/utils/init-block.js
@@ -8,7 +8,7 @@ import { registerBlockType } from '@wordpress/blocks';
  *
  * @param {Object} block The block to be registered.
  *
- * @return {?WPBlockType} The block, if it has been successfully registered;
+ * @return {WPBlockType | undefined} The block, if it has been successfully registered;
  *                        otherwise `undefined`.
  */
 export default function initBlock( block ) {
diff --git a/packages/block-library/src/utils/init-block.native.js b/packages/block-library/src/utils/init-block.native.js
index 699473e0ea5a21..530427050dbe0c 100644
--- a/packages/block-library/src/utils/init-block.native.js
+++ b/packages/block-library/src/utils/init-block.native.js
@@ -10,7 +10,7 @@ const ALLOWED_BLOCKS_GRADIENT_SUPPORT = [ 'core/button' ];
  *
  * @param {Object} block The block to be registered.
  *
- * @return {?WPBlockType} The block, if it has been successfully registered;
+ * @return {WPBlockType | undefined} The block, if it has been successfully registered;
  *                        otherwise `undefined`.
  */
 export default function initBlock( block ) {
diff --git a/packages/block-library/src/utils/migrate-font-family.js b/packages/block-library/src/utils/migrate-font-family.js
index cd15c74802ad02..8cf90eba81e580 100644
--- a/packages/block-library/src/utils/migrate-font-family.js
+++ b/packages/block-library/src/utils/migrate-font-family.js
@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import cleanEmptyObject from './clean-empty-object';
+import { unlock } from '../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 /**
  * Migrates the current style.typography.fontFamily attribute,
diff --git a/packages/block-library/src/utils/remove-anchor-tag.js b/packages/block-library/src/utils/remove-anchor-tag.js
new file mode 100644
index 00000000000000..82e7b03423648d
--- /dev/null
+++ b/packages/block-library/src/utils/remove-anchor-tag.js
@@ -0,0 +1,11 @@
+/**
+ * Removes anchor tags from a string.
+ *
+ * @param {string} value The value to remove anchor tags from.
+ *
+ * @return {string} The value with anchor tags removed.
+ */
+export default function removeAnchorTag( value ) {
+	// To do: Refactor this to use rich text's removeFormat instead.
+	return value.toString().replace( /<\/?a[^>]*>/g, '' );
+}
diff --git a/packages/block-library/src/utils/search-patterns.js b/packages/block-library/src/utils/search-patterns.js
new file mode 100644
index 00000000000000..8b63d31fb378d6
--- /dev/null
+++ b/packages/block-library/src/utils/search-patterns.js
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+export function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
+
+/**
+ * Get the search rank for a given pattern and a specific search term.
+ *
+ * @param {Object} pattern     Pattern to rank
+ * @param {string} searchValue Search term
+ * @return {number} A pattern search rank
+ */
+export function getPatternSearchRank( pattern, searchValue ) {
+	const normalizedSearchValue = normalizeSearchInput( searchValue );
+	const normalizedTitle = normalizeSearchInput( pattern.title );
+
+	let rank = 0;
+
+	if ( normalizedSearchValue === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
+		rank += 20;
+	} else {
+		const searchTerms = normalizedSearchValue.split( ' ' );
+		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
+			normalizedTitle.includes( searchTerm )
+		);
+
+		// Prefer pattern with every search word in the title.
+		if ( hasMatchedTerms ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
+
+/**
+ * Filters an pattern list given a search term.
+ *
+ * @param {Array}  patterns    Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered pattern list.
+ */
+export function searchPatterns( patterns = [], searchValue = '' ) {
+	if ( ! searchValue ) {
+		return patterns;
+	}
+
+	const rankedPatterns = patterns
+		.map( ( pattern ) => {
+			return [ pattern, getPatternSearchRank( pattern, searchValue ) ];
+		} )
+		.filter( ( [ , rank ] ) => rank > 0 );
+
+	rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedPatterns.map( ( [ pattern ] ) => pattern );
+}
diff --git a/packages/block-library/src/utils/test/search-patterns.js b/packages/block-library/src/utils/test/search-patterns.js
new file mode 100644
index 00000000000000..5ba4dd35e302ca
--- /dev/null
+++ b/packages/block-library/src/utils/test/search-patterns.js
@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeSearchInput,
+	getPatternSearchRank,
+	searchPatterns,
+} from '../search-patterns';
+
+describe( 'normalizeSearchInput', () => {
+	it( 'should remove accents', () => {
+		expect( normalizeSearchInput( 'café' ) ).toBe( 'cafe' );
+	} );
+
+	it( 'should trim and lowercase', () => {
+		expect( normalizeSearchInput( '  Foo  ' ) ).toBe( 'foo' );
+	} );
+} );
+
+describe( 'getPatternSearchRank', () => {
+	it( 'should give a high rank to exact matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Foo' ) ).toBe( 30 );
+	} );
+
+	it( 'should give a high rank to prefix matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Fo' ) ).toBe( 20 );
+	} );
+
+	it( 'should give a low rank to no matches', () => {
+		const pattern = { title: 'Foo' };
+		expect( getPatternSearchRank( pattern, 'Bar' ) ).toBe( 0 );
+	} );
+} );
+
+describe( 'searchPatterns', () => {
+	it( 'should return all patterns if no search term is provided', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, '' ) ).toEqual( patterns );
+	} );
+
+	it( 'should return an empty array if no patterns are provided', () => {
+		expect( searchPatterns( [], 'Foo' ) ).toEqual( [] );
+	} );
+
+	it( 'should return an empty array if no patterns match', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, 'Baz' ) ).toEqual( [] );
+	} );
+
+	it( 'should return the matching patterns', () => {
+		const patterns = [ { title: 'Foo' }, { title: 'Bar' } ];
+		expect( searchPatterns( patterns, 'Foo' ) ).toEqual( [
+			patterns[ 0 ],
+		] );
+	} );
+} );
diff --git a/packages/block-library/src/utils/transformation-categories.native.js b/packages/block-library/src/utils/transformation-categories.native.js
index 3ddf60d2a4c227..e001f9b67c785d 100644
--- a/packages/block-library/src/utils/transformation-categories.native.js
+++ b/packages/block-library/src/utils/transformation-categories.native.js
@@ -3,6 +3,7 @@ const transformationCategories = {
 		'core/paragraph',
 		'core/heading',
 		'core/list',
+		'core/list-item',
 		'core/quote',
 		'core/pullquote',
 		'core/preformatted',
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index dc0772cc9aa526..81cccd72965b1a 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/verse",
 	"title": "Verse",
 	"category": "text",
@@ -9,12 +9,11 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "pre",
-			"default": "",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
@@ -22,6 +21,13 @@
 	},
 	"supports": {
 		"anchor": true,
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"link": true,
@@ -30,6 +36,12 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"__experimentalDefaultControls": {
+				"minHeight": false
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
@@ -39,14 +51,27 @@
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
+			"__experimentalWritingMode": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"fontAppearance": true
+				"fontSize": true
 			}
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"width": true,
+			"color": true,
+			"style": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-verse",
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
index d986e2df75e5b2..bd4edc46738c5c 100644
--- a/packages/block-library/src/verse/deprecated.js
+++ b/packages/block-library/src/verse/deprecated.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,7 @@ const v2 = {
 			selector: 'pre',
 			default: '',
 			__unstablePreserveWhiteSpace: true,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
@@ -69,7 +69,7 @@ const v2 = {
 	save( { attributes } ) {
 		const { textAlign, content } = attributes;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} );
 
diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
index 1ca846fb848b53..ea7a2037303a88 100644
--- a/packages/block-library/src/verse/edit.js
+++ b/packages/block-library/src/verse/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,17 +13,19 @@ import {
 	AlignmentToolbar,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 export default function VerseEdit( {
 	attributes,
 	setAttributes,
 	mergeBlocks,
 	onRemove,
+	insertBlocksAfter,
 	style,
 } ) {
 	const { textAlign, content } = attributes;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		style,
@@ -56,6 +58,9 @@ export default function VerseEdit( {
 				textAlign={ textAlign }
 				{ ...blockProps }
 				__unstablePastePlainText
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</>
 	);
diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js
index 6cf8b9b9fb9e4d..5d80b63a4ca84c 100644
--- a/packages/block-library/src/verse/index.js
+++ b/packages/block-library/src/verse/index.js
@@ -34,7 +34,7 @@ export const settings = {
 	deprecated,
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: attributes.content + attributesToMerge.content,
+			content: attributes.content + '\n\n' + attributesToMerge.content,
 		};
 	},
 	edit,
diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
index 9a535f7b19c686..42f10533cac17f 100644
--- a/packages/block-library/src/verse/save.js
+++ b/packages/block-library/src/verse/save.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { textAlign, content } = attributes;
 
-	const className = classnames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 
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;
+}
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..3412f621850bb9
--- /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/__snapshots__/transforms.native.js.snap b/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..5570a6cf5d67d9
--- /dev/null
+++ b/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verse block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:verse {"textAlign":"center"} -->
+<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
+<!-- /wp:verse --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Verse block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:verse {"textAlign":"center"} -->
+<pre class="wp-block-verse has-text-align-center">Come<br />Home.</pre>
+<!-- /wp:verse --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Verse block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Come<br />Home.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/block-library/src/verse/test/edit.native.js b/packages/block-library/src/verse/test/edit.native.js
index 99cc10bc44abec..8794419775d325 100644
--- a/packages/block-library/src/verse/test/edit.native.js
+++ b/packages/block-library/src/verse/test/edit.native.js
@@ -1,47 +1,118 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
+import {
+	addBlock,
+	getEditorHtml,
+	initializeEditor,
+	getBlock,
+	typeInRichText,
+	fireEvent,
+} 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';
+import { ENTER } from '@wordpress/keycodes';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
 	} );
+} );
+
+describe( 'Verse block', () => {
+	it( 'inserts block', async () => {
+		const screen = await initializeEditor();
 
-	afterAll( () => {
-		unregisterBlockType( name );
+		// Add block
+		await addBlock( screen, 'Verse' );
+
+		// Get block
+		const verseBlock = await getBlock( screen, 'Verse' );
+		expect( verseBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders without crashing', () => {
-		const component = render( <Verse attributes={ { content: '' } } /> );
-		const rendered = component.toJSON();
-		expect( rendered ).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();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = render(
-			<Verse attributes={ { content: 'sample text' } } />
-		);
-		expect(
-			component.getByDisplayValue( '<pre>sample text</pre>' )
-		).toBeTruthy();
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Verse' );
+
+		// Act
+		const verseTextInput =
+			await screen.findByPlaceholderText( 'Write verse…' );
+		typeInRichText( verseTextInput, 'A great statement.' );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		typeInRichText( verseTextInput, 'Again' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:verse -->
+		<pre class="wp-block-verse">A great statement.<br>Again</pre>
+		<!-- /wp:verse -->"
+	` );
+	} );
+
+	it( 'should split on triple Enter', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Verse' );
+
+		// Act
+		const verseTextInput =
+			await screen.findByPlaceholderText( 'Write verse…' );
+		typeInRichText( verseTextInput, 'Hello' );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:verse -->
+		<pre class="wp-block-verse">Hello</pre>
+		<!-- /wp:verse -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
 	} );
 } );
diff --git a/packages/block-library/src/verse/test/transforms.native.js b/packages/block-library/src/verse/test/transforms.native.js
new file mode 100644
index 00000000000000..bab71da95fbc16
--- /dev/null
+++ b/packages/block-library/src/verse/test/transforms.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Verse';
+const initialHtml = `
+<!-- wp:verse {"textAlign":"center"} -->
+<pre class="wp-block-verse has-text-align-center">Come<br>Home.</pre>
+<!-- /wp:verse -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Paragraph', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 6f53246cc88010..d2dcd95365c3b5 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/video",
 	"title": "Video",
 	"category": "media",
@@ -15,10 +15,10 @@
 			"attribute": "autoplay"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"controls": {
 			"type": "boolean",
@@ -29,7 +29,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"loop": {
 			"type": "boolean",
@@ -56,12 +56,16 @@
 			"attribute": "preload",
 			"default": "metadata"
 		},
+		"blob": {
+			"type": "string",
+			"role": "local"
+		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"playsInline": {
 			"type": "boolean",
@@ -70,7 +74,7 @@
 			"attribute": "playsinline"
 		},
 		"tracks": {
-			"__experimentalRole": "content",
+			"role": "content",
 			"type": "array",
 			"items": {
 				"type": "object"
@@ -83,7 +87,14 @@
 		"align": true,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-video-editor",
diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
index dbd8ab49c226eb..9394bfaf5c6145 100644
--- a/packages/block-library/src/video/edit-common-settings.js
+++ b/packages/block-library/src/video/edit-common-settings.js
@@ -48,37 +48,48 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Autoplay' ) }
 				onChange={ toggleFactory.autoplay }
-				checked={ autoplay }
+				checked={ !! autoplay }
 				help={ getAutoplayHelp }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Loop' ) }
 				onChange={ toggleFactory.loop }
-				checked={ loop }
+				checked={ !! loop }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Muted' ) }
 				onChange={ toggleFactory.muted }
-				checked={ muted }
+				checked={ !! muted }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Playback controls' ) }
 				onChange={ toggleFactory.controls }
-				checked={ controls }
+				checked={ !! controls }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
+				/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
 				label={ __( 'Play inline' ) }
 				onChange={ toggleFactory.playsInline }
-				checked={ playsInline }
+				checked={ !! playsInline }
+				help={ __(
+					'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
+				) }
 			/>
 			<SelectControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 				label={ __( 'Preload' ) }
 				value={ preload }
 				onChange={ onChangePreload }
 				options={ options }
-				hideCancelButton={ true }
+				hideCancelButton
 			/>
 		</>
 	);
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index e79f8a9774482c..32221919c7ea20 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	BaseControl,
 	Button,
@@ -14,7 +14,6 @@ import {
 	PanelBody,
 	Spinner,
 	Placeholder,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -24,49 +23,30 @@ import {
 	MediaUpload,
 	MediaUploadCheck,
 	MediaReplaceFlow,
-	RichText,
 	useBlockProps,
-	store as blockEditorStore,
-	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useRef, useEffect, useState, useCallback } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { useInstanceId, usePrevious } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { video as icon, caption as captionIcon } from '@wordpress/icons';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { video as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
-
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration={ true }
-			icon={ icon }
-			label={ __( 'Video' ) }
-			instructions={ __(
-				'Upload a video file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
+import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 function VideoEdit( {
-	isSelected,
+	isSelected: isSingleSelected,
 	attributes,
 	className,
 	setAttributes,
@@ -76,28 +56,15 @@ function VideoEdit( {
 	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
-	const { id, caption, controls, poster, src, tracks } = attributes;
-	const prevCaption = usePrevious( caption );
-	const [ showCaption, setShowCaption ] = useState( !! caption );
-	const isTemporaryVideo = ! id && isBlobURL( src );
-	const mediaUpload = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
-		[]
-	);
+	const { id, controls, poster, src, tracks } = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
-	useEffect( () => {
-		if ( ! id && isBlobURL( src ) ) {
-			const file = getBlobByURL( src );
-			if ( file ) {
-				mediaUpload( {
-					filesList: [ file ],
-					onFileChange: ( [ media ] ) => onSelectVideo( media ),
-					onError: onUploadError,
-					allowedTypes: ALLOWED_MEDIA_TYPES,
-				} );
-			}
-		}
-	}, [] );
+	useUploadMediaFromBlobURL( {
+		url: temporaryURL,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectVideo,
+		onError: onUploadError,
+	} );
 
 	useEffect( () => {
 		// Placeholder may be rendered.
@@ -106,30 +73,6 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
-
-	useEffect( () => {
-		if ( ! isSelected && ! caption ) {
-			setShowCaption( false );
-		}
-	}, [ isSelected, caption ] );
-
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -140,19 +83,28 @@ function VideoEdit( {
 				id: undefined,
 				poster: undefined,
 				caption: undefined,
+				blob: undefined,
 			} );
+			setTemporaryURL();
+			return;
+		}
+
+		if ( isBlobURL( media.url ) ) {
+			setTemporaryURL( media.url );
 			return;
 		}
 
 		// Sets the block's attribute and updates the edit component from the
 		// selected media.
 		setAttributes( {
+			blob: undefined,
 			src: media.url,
 			id: media.id,
 			poster:
 				media.image?.src !== media.icon ? media.image?.src : undefined,
 			caption: media.caption,
 		} );
+		setTemporaryURL();
 	}
 
 	function onSelectURL( newSrc ) {
@@ -161,11 +113,17 @@ function VideoEdit( {
 			const embedBlock = createUpgradedEmbedBlock( {
 				attributes: { url: newSrc },
 			} );
-			if ( undefined !== embedBlock ) {
+			if ( undefined !== embedBlock && onReplace ) {
 				onReplace( embedBlock );
 				return;
 			}
-			setAttributes( { src: newSrc, id: undefined, poster: undefined } );
+			setAttributes( {
+				blob: undefined,
+				src: newSrc,
+				id: undefined,
+				poster: undefined,
+			} );
+			setTemporaryURL();
 		}
 	}
 
@@ -174,15 +132,32 @@ function VideoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
-	const classes = classnames( className, {
-		'is-transient': isTemporaryVideo,
+	// Much of this description is duplicated from MediaPlaceholder.
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className="block-editor-media-placeholder"
+				withIllustration={ ! isSingleSelected }
+				icon={ icon }
+				label={ __( 'Video' ) }
+				instructions={ __(
+					'Drag and drop a video, upload, or choose from your library.'
+				) }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
+	const classes = clsx( className, {
+		'is-transient': !! temporaryURL,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
 	} );
 
-	if ( ! src ) {
+	if ( ! src && ! temporaryURL ) {
 		return (
 			<div { ...blockProps }>
 				<MediaPlaceholder
@@ -214,42 +189,30 @@ function VideoEdit( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<ToolbarButton
-					onClick={ () => {
-						setShowCaption( ! showCaption );
-						if ( showCaption && caption ) {
-							setAttributes( { caption: undefined } );
-						}
-					} }
-					icon={ captionIcon }
-					isPressed={ showCaption }
-					label={
-						showCaption
-							? __( 'Remove caption' )
-							: __( 'Add caption' )
-					}
-				/>
-			</BlockControls>
-			<BlockControls>
-				<TracksEditor
-					tracks={ tracks }
-					onChange={ ( newTracks ) => {
-						setAttributes( { tracks: newTracks } );
-					} }
-				/>
-			</BlockControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ src }
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="video/*"
-					onSelect={ onSelectVideo }
-					onSelectURL={ onSelectURL }
-					onError={ onUploadError }
-				/>
-			</BlockControls>
+			{ isSingleSelected && (
+				<>
+					<BlockControls>
+						<TracksEditor
+							tracks={ tracks }
+							onChange={ ( newTracks ) => {
+								setAttributes( { tracks: newTracks } );
+							} }
+						/>
+					</BlockControls>
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							mediaId={ id }
+							mediaURL={ src }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="video/*"
+							onSelect={ onSelectVideo }
+							onSelectURL={ onSelectURL }
+							onError={ onUploadError }
+							onReset={ () => onSelectVideo( undefined ) }
+						/>
+					</BlockControls>
+				</>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<VideoCommonSettings
@@ -257,7 +220,7 @@ function VideoEdit( {
 						attributes={ attributes }
 					/>
 					<MediaUploadCheck>
-						<BaseControl className="editor-video-poster-control">
+						<div className="editor-video-poster-control">
 							<BaseControl.VisualLabel>
 								{ __( 'Poster image' ) }
 							</BaseControl.VisualLabel>
@@ -269,6 +232,7 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
+										__next40pxDefaultSize
 										variant="primary"
 										onClick={ open }
 										ref={ posterImageButton }
@@ -297,55 +261,42 @@ function VideoEdit( {
 							</p>
 							{ !! poster && (
 								<Button
+									__next40pxDefaultSize
 									onClick={ onRemovePoster }
 									variant="tertiary"
 								>
 									{ __( 'Remove' ) }
 								</Button>
 							) }
-						</BaseControl>
+						</div>
 					</MediaUploadCheck>
 				</PanelBody>
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the video tag if the block is not selected
-					so the user clicking on it won't play the
-					video when the controls are enabled.
-				*/ }
-				<Disabled isDisabled={ ! isSelected }>
+                Disable the video tag if the block is not selected
+                so the user clicking on it won't play the
+                video when the controls are enabled.
+            */ }
+				<Disabled isDisabled={ ! isSingleSelected }>
 					<video
 						controls={ controls }
 						poster={ poster }
-						src={ src }
+						src={ src || temporaryURL }
 						ref={ videoPlayer }
 					>
 						<Tracks tracks={ tracks } />
 					</video>
 				</Disabled>
-				{ isTemporaryVideo && <Spinner /> }
-				{ showCaption &&
-					( ! RichText.isEmpty( caption ) || isSelected ) && (
-						<RichText
-							tagName="figcaption"
-							className={ __experimentalGetElementClassName(
-								'caption'
-							) }
-							aria-label={ __( 'Video caption text' ) }
-							ref={ captionRef }
-							placeholder={ __( 'Add caption' ) }
-							value={ caption }
-							onChange={ ( value ) =>
-								setAttributes( { caption: value } )
-							}
-							inlineToolbar
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( getDefaultBlockName() )
-								)
-							}
-						/>
-					) }
+				{ !! temporaryURL && <Spinner /> }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSingleSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Video caption text' ) }
+					showToolbarButton={ isSingleSelected }
+				/>
 			</figure>
 		</>
 	);
diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js
index 99225ba5d5c569..f6960f0888617d 100644
--- a/packages/block-library/src/video/edit.native.js
+++ b/packages/block-library/src/video/edit.native.js
@@ -29,6 +29,7 @@ import {
 	VIDEO_ASPECT_RATIO,
 	VideoPlayer,
 	InspectorControls,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
@@ -162,7 +163,7 @@ class VideoEdit extends Component {
 	onSelectURL( url ) {
 		const { createErrorNotice, onReplace, setAttributes } = this.props;
 
-		if ( isURL( url ) ) {
+		if ( isURL( url ) && /^https?:/.test( getProtocol( url ) ) ) {
 			// Check if there's an embed block that handles this URL.
 			const embedBlock = createUpgradedEmbedBlock( {
 				attributes: { url },
@@ -172,7 +173,7 @@ class VideoEdit extends Component {
 				return;
 			}
 
-			setAttributes( { id: url, src: url } );
+			setAttributes( { src: url, id: undefined, poster: undefined } );
 		} else {
 			createErrorNotice( __( 'Invalid URL.' ) );
 		}
@@ -217,7 +218,7 @@ class VideoEdit extends Component {
 		const toolbarEditButton = (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectMediaUploadOption }
 				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {
@@ -235,7 +236,7 @@ class VideoEdit extends Component {
 			></MediaUpload>
 		);
 
-		if ( ! id ) {
+		if ( ! src ) {
 			return (
 				<View style={ { flex: 1 } }>
 					<MediaPlaceholder
@@ -289,8 +290,10 @@ class VideoEdit extends Component {
 						} ) => {
 							const showVideo =
 								isURL( src ) &&
+								getProtocol( attributes.src ) !== 'file:' &&
 								! isUploadInProgress &&
 								! isUploadFailed;
+
 							const icon = this.getIcon(
 								isUploadFailed
 									? ICON_TYPE.RETRY
@@ -331,7 +334,7 @@ class VideoEdit extends Component {
 												}
 												style={ videoStyle }
 												source={ { uri: src } }
-												paused={ true }
+												paused
 											/>
 										</View>
 									) }
@@ -364,9 +367,9 @@ class VideoEdit extends Component {
 						} }
 					/>
 					<BlockCaption
-						accessible={ true }
+						accessible
 						accessibilityLabelCreator={ ( caption ) =>
-							! caption
+							RichText.isEmpty( caption )
 								? /* translators: accessibility text. Empty video caption. */
 								  __( 'Video caption. Empty' )
 								: sprintf(
diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index 60c68fb74d1be9..03e1c116cccb78 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/packages/block-library/src/video/editor.scss
@@ -1,40 +1,3 @@
-// Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
-.wp-block-video.wp-block-video {
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-
-	// Remove the transition while we still have a legacy placeholder style.
-	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
-	}
-}
-
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }
@@ -57,10 +20,6 @@
 }
 
 .editor-video-poster-control {
-	.components-base-control__label {
-		display: block;
-	}
-
 	.components-button {
 		margin-right: $grid-unit-10;
 	}
@@ -71,36 +30,16 @@
 }
 
 .block-library-video-tracks-editor__track-list-track {
-	display: flex;
-	place-content: space-between;
-	align-items: baseline;
 	padding-left: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor-label-language {
-	display: flex;
-	margin-top: $grid-unit-15;
-	& > .components-base-control {
-		width: 50%;
-	}
-	& > .components-base-control:first-child {
-		margin-right: $grid-unit-20;
-	}
-}
-
 .block-library-video-tracks-editor__single-track-editor-kind-select {
 	max-width: 240px;
 }
 
-.block-library-video-tracks-editor__single-track-editor-buttons-container {
-	display: flex;
-	place-content: space-between;
-	margin-top: $grid-unit-40;
-}
-
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
@@ -110,7 +49,6 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
 	width: 360px;
-	padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list,
@@ -120,23 +58,10 @@
 	}
 }
 
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-	padding: $grid-unit-15;
-}
+.block-library-video-tracks-editor__tracks-informative-message {
+	padding: $grid-unit-10;
 
-.block-library-video-tracks-editor__single-track-editor .components-base-control {
-	.components-base-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-	.components-base-control__field {
-		margin-bottom: $grid-unit-15;
-	}
-	.components-text-control__input {
-		margin-left: 0;
-	}
-	.components-input-control__label {
-		margin-bottom: $grid-unit-05;
+	&-description {
+		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index e6b3a1b3493d71..06c0dfd9cdd469 100644
--- a/packages/block-library/src/video/style.scss
+++ b/packages/block-library/src/video/style.scss
@@ -3,6 +3,7 @@
 	box-sizing: border-box;
 	video {
 		width: 100%;
+		vertical-align: middle;
 	}
 
 	@supports (position: sticky) {
@@ -18,7 +19,7 @@
 	// Supply caption styles to videos, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.
-	figcaption {
+	:where(figcaption) {
 		@include caption-style();
 	}
 }
diff --git a/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap
new file mode 100644
index 00000000000000..999f5083226f8c
--- /dev/null
+++ b/packages/block-library/src/video/test/__snapshots__/transforms.native.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:video -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
+<!-- /wp:video --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Video block transforms to Cover block 1`] = `
+"<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","dimRatio":50,"backgroundType":"video"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">Cloudup video</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->"
+`;
+
+exports[`Video block transforms to File block 1`] = `
+"<!-- wp:file {"href":"https://i.cloudup.com/YtZFJbuQCE.mov"} -->
+<div class="wp-block-file"><a href="https://i.cloudup.com/YtZFJbuQCE.mov">Cloudup video</a><a href="https://i.cloudup.com/YtZFJbuQCE.mov" class="wp-block-file__button wp-element-button" download>Download</a></div>
+<!-- /wp:file -->"
+`;
+
+exports[`Video block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:video -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
+<!-- /wp:video --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Video block transforms to Media & Text block 1`] = `
+"<!-- wp:media-text {"mediaType":"video"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->"
+`;
diff --git a/packages/block-library/src/video/test/edit.native.js b/packages/block-library/src/video/test/edit.native.js
new file mode 100644
index 00000000000000..c82273e102dd4d
--- /dev/null
+++ b/packages/block-library/src/video/test/edit.native.js
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	dismissModal,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/video' ] );
+
+describe( 'Video block', () => {
+	it( 'should gracefully handle invalid URLs', async () => {
+		await initializeEditor();
+
+		await addBlock( screen, 'Video' );
+		fireEvent.press( screen.getByText( 'Insert from URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Type a URL' ),
+			'h://wordpress.org/video.mp4'
+		);
+		dismissModal( screen.getByTestId( 'bottom-sheet' ) );
+
+		expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
+	} );
+
+	it( 'should render empty state when source is not present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video -->
+<figure class="wp-block-video"></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeVisible();
+	} );
+
+	it( 'should not render empty state when video source is present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video {"id":1234} -->
+<figure class="wp-block-video"><video controls src="https://VIDEO_URL.mp4"></video></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeNull();
+	} );
+} );
diff --git a/packages/block-library/src/video/test/transforms.native.js b/packages/block-library/src/video/test/transforms.native.js
new file mode 100644
index 00000000000000..1655c04e2eb219
--- /dev/null
+++ b/packages/block-library/src/video/test/transforms.native.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Video';
+const initialHtml = `
+<!-- wp:video -->
+<figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
+<!-- /wp:video -->`;
+
+const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const nonMediaTransforms = [ 'File' ];
+const blockTransforms = [
+	'Cover',
+	'Media & Text',
+	...tranformsWithInnerBlocks,
+	...nonMediaTransforms,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			isMediaBlock: ! nonMediaTransforms.includes( blockTransform ),
+			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );
diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss
index cdc95af0b02c29..99af5d557bfa5a 100644
--- a/packages/block-library/src/video/theme.scss
+++ b/packages/block-library/src/video/theme.scss
@@ -1,4 +1,4 @@
-.wp-block-video figcaption {
+.wp-block-video :where(figcaption) {
 	@include caption-style-theme();
 }
 
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 4f8ebbdba3f243..33036a14f1fec7 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	NavigableMenu,
 	MenuItem,
@@ -13,6 +13,9 @@ import {
 	Button,
 	TextControl,
 	SelectControl,
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
 	MediaUpload,
@@ -21,7 +24,7 @@ import {
 } from '@wordpress/block-editor';
 import { upload, media } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
 const ALLOWED_TYPES = [ 'text/vtt' ];
@@ -37,38 +40,29 @@ const KIND_OPTIONS = [
 ];
 
 function TrackList( { tracks, onEditPress } ) {
-	let content;
-	if ( tracks.length === 0 ) {
-		content = (
-			<p className="block-library-video-tracks-editor__tracks-informative-message">
-				{ __(
-					'Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.'
-				) }
-			</p>
-		);
-	} else {
-		content = tracks.map( ( track, index ) => {
-			return (
-				<div
-					key={ index }
-					className="block-library-video-tracks-editor__track-list-track"
+	const content = tracks.map( ( track, index ) => {
+		return (
+			<HStack
+				key={ index }
+				className="block-library-video-tracks-editor__track-list-track"
+			>
+				<span>{ track.label }</span>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ () => onEditPress( index ) }
+					aria-label={ sprintf(
+						/* translators: %s: Label of the video text track e.g: "French subtitles". */
+						_x( 'Edit %s', 'text tracks' ),
+						track.label
+					) }
 				>
-					<span>{ track.label } </span>
-					<Button
-						variant="tertiary"
-						onClick={ () => onEditPress( index ) }
-						aria-label={ sprintf(
-							/* translators: %s: Label of the video text track e.g: "French subtitles" */
-							__( 'Edit %s' ),
-							track.label
-						) }
-					>
-						{ __( 'Edit' ) }
-					</Button>
-				</div>
-			);
-		} );
-	}
+					{ __( 'Edit' ) }
+				</Button>
+			</HStack>
+		);
+	} );
+
 	return (
 		<MenuGroup
 			label={ __( 'Text tracks' ) }
@@ -83,42 +77,48 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 	const { src = '', label = '', srcLang = '', kind = DEFAULT_KIND } = track;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
-		<NavigableMenu>
-			<div className="block-library-video-tracks-editor__single-track-editor">
-				<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
-					{ __( 'Edit track' ) }
-				</span>
-				<span>
-					{ __( 'File' ) }: <b>{ fileName }</b>
-				</span>
-				<div className="block-library-video-tracks-editor__single-track-editor-label-language">
-					<TextControl
-						/* eslint-disable jsx-a11y/no-autofocus */
-						autoFocus
-						/* eslint-enable jsx-a11y/no-autofocus */
-						onChange={ ( newLabel ) =>
-							onChange( {
-								...track,
-								label: newLabel,
-							} )
-						}
-						label={ __( 'Label' ) }
-						value={ label }
-						help={ __( 'Title of track' ) }
-					/>
-					<TextControl
-						onChange={ ( newSrcLang ) =>
-							onChange( {
-								...track,
-								srcLang: newSrcLang,
-							} )
-						}
-						label={ __( 'Source language' ) }
-						value={ srcLang }
-						help={ __( 'Language tag (en, fr, etc.)' ) }
-					/>
-				</div>
+		<VStack
+			className="block-library-video-tracks-editor__single-track-editor"
+			spacing="4"
+		>
+			<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
+				{ __( 'Edit track' ) }
+			</span>
+			<span>
+				{ __( 'File' ) }: <b>{ fileName }</b>
+			</span>
+			<Grid columns={ 2 } gap={ 4 }>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					onChange={ ( newLabel ) =>
+						onChange( {
+							...track,
+							label: newLabel,
+						} )
+					}
+					label={ __( 'Label' ) }
+					value={ label }
+					help={ __( 'Title of track' ) }
+				/>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					onChange={ ( newSrcLang ) =>
+						onChange( {
+							...track,
+							srcLang: newSrcLang,
+						} )
+					}
+					label={ __( 'Source language' ) }
+					value={ srcLang }
+					help={ __( 'Language tag (en, fr, etc.)' ) }
+				/>
+			</Grid>
+			<VStack spacing="8">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
 					options={ KIND_OPTIONS }
 					value={ kind }
@@ -130,9 +130,18 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						} );
 					} }
 				/>
-				<div className="block-library-video-tracks-editor__single-track-editor-buttons-container">
+				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
-						variant="secondary"
+						__next40pxDefaultSize
+						isDestructive
+						variant="link"
+						onClick={ onRemove }
+					>
+						{ __( 'Remove track' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
 						onClick={ () => {
 							const changes = {};
 							let hasChanges = false;
@@ -157,14 +166,11 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 							onClose();
 						} }
 					>
-						{ __( 'Close' ) }
-					</Button>
-					<Button isDestructive variant="link" onClick={ onRemove }>
-						{ __( 'Remove track' ) }
+						{ __( 'Apply' ) }
 					</Button>
-				</div>
-			</div>
-		</NavigableMenu>
+				</HStack>
+			</VStack>
+		</VStack>
 	);
 }
 
@@ -173,6 +179,11 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
+	const dropdownPopoverRef = useRef();
+
+	useEffect( () => {
+		dropdownPopoverRef.current?.focus();
+	}, [ trackBeingEdited ] );
 
 	if ( ! mediaUpload ) {
 		return null;
@@ -180,19 +191,32 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 	return (
 		<Dropdown
 			contentClassName="block-library-video-tracks-editor"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarGroup>
-					<ToolbarButton
-						label={ __( 'Text tracks' ) }
-						showTooltip
-						aria-expanded={ isOpen }
-						aria-haspopup="true"
-						onClick={ onToggle }
-					>
-						{ __( 'Text tracks' ) }
-					</ToolbarButton>
-				</ToolbarGroup>
-			) }
+			focusOnMount
+			popoverProps={ {
+				ref: dropdownPopoverRef,
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const handleOnToggle = () => {
+					if ( ! isOpen ) {
+						// When the Popover opens make sure the initial view is
+						// always the track list rather than the edit track UI.
+						setTrackBeingEdited( null );
+					}
+					onToggle();
+				};
+
+				return (
+					<ToolbarGroup>
+						<ToolbarButton
+							aria-expanded={ isOpen }
+							aria-haspopup="true"
+							onClick={ handleOnToggle }
+						>
+							{ __( 'Text tracks' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				);
+			} }
 			renderContent={ () => {
 				if ( trackBeingEdited !== null ) {
 					return (
@@ -216,8 +240,21 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 						/>
 					);
 				}
+
 				return (
 					<>
+						{ tracks.length === 0 && (
+							<div className="block-library-video-tracks-editor__tracks-informative-message">
+								<h2 className="block-library-video-tracks-editor__tracks-informative-message-title">
+									{ __( 'Text tracks' ) }
+								</h2>
+								<p className="block-library-video-tracks-editor__tracks-informative-message-description">
+									{ __(
+										'Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.'
+									) }
+								</p>
+							</div>
+						) }
 						<NavigableMenu>
 							<TrackList
 								tracks={ tracks }
diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js
index 246032422d643d..4325cd1e7e7e9d 100644
--- a/packages/block-library/src/video/transforms.js
+++ b/packages/block-library/src/video/transforms.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
+import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 
 const transforms = {
@@ -20,7 +20,7 @@ const transforms = {
 				// It's already done as part of the `componentDidMount`
 				// in the video block
 				const block = createBlock( 'core/video', {
-					src: createBlobURL( file ),
+					blob: createBlobURL( file ),
 				} );
 				return block;
 			},
@@ -63,6 +63,42 @@ const transforms = {
 				},
 			},
 		},
+		{
+			type: 'raw',
+			isMatch: ( node ) =>
+				node.nodeName === 'P' &&
+				node.children.length === 1 &&
+				node.firstChild.nodeName === 'VIDEO',
+			transform: ( node ) => {
+				const videoElement = node.firstChild;
+				const attributes = {
+					autoplay: videoElement.hasAttribute( 'autoplay' )
+						? true
+						: undefined,
+					controls: videoElement.hasAttribute( 'controls' )
+						? undefined
+						: false,
+					loop: videoElement.hasAttribute( 'loop' )
+						? true
+						: undefined,
+					muted: videoElement.hasAttribute( 'muted' )
+						? true
+						: undefined,
+					preload:
+						videoElement.getAttribute( 'preload' ) || undefined,
+					playsInline: videoElement.hasAttribute( 'playsinline' )
+						? true
+						: undefined,
+					poster: videoElement.getAttribute( 'poster' ) || undefined,
+					src: videoElement.getAttribute( 'src' ) || undefined,
+				};
+				if ( isBlobURL( attributes.src ) ) {
+					attributes.blob = attributes.src;
+					delete attributes.src;
+				}
+				return createBlock( 'core/video', attributes );
+			},
+		},
 	],
 };
 
diff --git a/packages/block-library/test/babel-plugin.js b/packages/block-library/test/babel-plugin.js
index bb79d12f60f22c..7c26b0f7d117ce 100644
--- a/packages/block-library/test/babel-plugin.js
+++ b/packages/block-library/test/babel-plugin.js
@@ -12,56 +12,56 @@ function join( ...strings ) {
 	return strings.join( '\n' );
 }
 
-function compare( input, output, isExperimental, options = {} ) {
+function transformCode( input, isExperimental, options = {} ) {
 	const blockLibraryPlugin = createBabelPlugin( isExperimental, false );
 	const { code } = transform( input, {
 		configFile: false,
 		plugins: [ [ blockLibraryPlugin, options ] ],
 	} );
-	expect( code ).toEqual( output );
+	return code;
 }
 
 describe( 'babel-plugin', () => {
 	it( 'should ignore stable blocks', () => {
-		compare(
-			join(
-				'import * as experimentalBlock from "./experimental-block";',
-				'const blocks = [ experimentalBlock ];'
-			),
-			join(
-				'import * as experimentalBlock from "./experimental-block";',
-				'const blocks = [experimentalBlock];'
-			),
-			() => false
+		const input = join(
+			'import * as experimentalBlock from "./experimental-block";',
+			'const blocks = [ experimentalBlock ];'
 		);
+		const expected = join(
+			'import * as experimentalBlock from "./experimental-block";',
+			'const blocks = [experimentalBlock];'
+		);
+
+		expect( transformCode( input, () => false ) ).toEqual( expected );
 	} );
+
 	it( 'should transform experimental blocks', () => {
-		compare(
-			join(
-				'import * as experimentalBlock from "./experimental-block";',
-				'const blocks = [ experimentalBlock ];'
-			),
-			join(
-				'const experimentalBlock = null;',
-				'const blocks = [experimentalBlock];'
-			),
-			() => true
+		const input = join(
+			'import * as experimentalBlock from "./experimental-block";',
+			'const blocks = [ experimentalBlock ];'
+		);
+		const expected = join(
+			'const experimentalBlock = null;',
+			'const blocks = [experimentalBlock];'
 		);
+
+		expect( transformCode( input, () => true ) ).toEqual( expected );
 	} );
+
 	it( 'should work with mixed imports blocks', () => {
-		compare(
-			join(
-				'import * as stableBlock from "./stable-block";',
-				'import * as experimentalBlock from "./experimental-block";',
-				'const blocks = [ stableBlock, experimentalBlock ];'
-			),
-			join(
-				'import * as stableBlock from "./stable-block";',
-				'const experimentalBlock = null;',
-				'const blocks = [stableBlock, experimentalBlock];'
-			),
-			( path ) =>
-				path.node.specifiers[ 0 ].local.name === 'experimentalBlock'
+		const input = join(
+			'import * as stableBlock from "./stable-block";',
+			'import * as experimentalBlock from "./experimental-block";',
+			'const blocks = [ stableBlock, experimentalBlock ];'
 		);
+		const expected = join(
+			'import * as stableBlock from "./stable-block";',
+			'const experimentalBlock = null;',
+			'const blocks = [stableBlock, experimentalBlock];'
+		);
+		const isExperimental = ( path ) =>
+			path.node.specifiers[ 0 ].local.name === 'experimentalBlock';
+
+		expect( transformCode( input, isExperimental ) ).toEqual( expected );
 	} );
 } );
diff --git a/packages/block-library/tsconfig.json b/packages/block-library/tsconfig.json
index a63ae328408191..2a2cb1653d4285 100644
--- a/packages/block-library/tsconfig.json
+++ b/packages/block-library/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
@@ -6,6 +7,34 @@
 		"types": [ "gutenberg-env" ],
 		"strictNullChecks": true
 	},
-	"references": [ { "path": "../element" } ],
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../api-fetch" },
+		{ "path": "../autop" },
+		{ "path": "../blob" },
+		{ "path": "../block-editor" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../core-data" },
+		{ "path": "../data" },
+		{ "path": "../date" },
+		{ "path": "../deprecated" },
+		{ "path": "../dom" },
+		{ "path": "../element" },
+		{ "path": "../escape-html" },
+		{ "path": "../private-apis" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../interactivity" },
+		{ "path": "../interactivity-router" },
+		{ "path": "../notices" },
+		{ "path": "../keycodes" },
+		{ "path": "../primitives" },
+		{ "path": "../rich-text" },
+		{ "path": "../url" },
+		{ "path": "../wordcount" }
+	],
 	"include": [ "src/**/*.ts", "src/**/*.tsx" ]
 }
diff --git a/packages/block-serialization-default-parser/.npmrc b/packages/block-serialization-default-parser/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/block-serialization-default-parser/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 25c36ac55e95fa..c7b27f7760d14d 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 4.17.0 (2022-09-13)
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#43722](https://github.com/WordPress/gutenberg/pull/43722)).
 
diff --git a/packages/block-serialization-default-parser/README.md b/packages/block-serialization-default-parser/README.md
index d8aae625f1c223..7fef607a29d8f6 100644
--- a/packages/block-serialization-default-parser/README.md
+++ b/packages/block-serialization-default-parser/README.md
@@ -1,6 +1,6 @@
 # Block Serialization Default Parser
 
-This library contains the default block serialization parser implementations for WordPress documents. It provides native PHP and JavaScript parsers that implement the [specification](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/grammar.md) from [`@wordpress/block-serialization-spec-parser`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-serialization-spec-parser/README.md) and which normally operates on the document stored in `post_content`.
+This library contains the default block serialization parser implementations for WordPress documents. It provides native PHP and JavaScript parsers that implement the specification from [`@wordpress/block-serialization-spec-parser`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-serialization-spec-parser/README.md) and which normally operates on the document stored in `post_content`.
 
 ## Installation
 
diff --git a/packages/block-serialization-default-parser/class-wp-block-parser-block.php b/packages/block-serialization-default-parser/class-wp-block-parser-block.php
new file mode 100644
index 00000000000000..28377d3ede32b8
--- /dev/null
+++ b/packages/block-serialization-default-parser/class-wp-block-parser-block.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Block Serialization Parser
+ *
+ * @package WordPress
+ */
+
+/**
+ * Class WP_Block_Parser_Block
+ *
+ * Holds the block structure in memory
+ *
+ * @since 5.0.0
+ */
+class WP_Block_Parser_Block {
+	/**
+	 * Name of block
+	 *
+	 * @example "core/paragraph"
+	 *
+	 * @since 5.0.0
+	 * @var string
+	 */
+	public $blockName; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+
+	/**
+	 * Optional set of attributes from block comment delimiters
+	 *
+	 * @example null
+	 * @example array( 'columns' => 3 )
+	 *
+	 * @since 5.0.0
+	 * @var array|null
+	 */
+	public $attrs;
+
+	/**
+	 * List of inner blocks (of this same class)
+	 *
+	 * @since 5.0.0
+	 * @var WP_Block_Parser_Block[]
+	 */
+	public $innerBlocks; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+
+	/**
+	 * Resultant HTML from inside block comment delimiters
+	 * after removing inner blocks
+	 *
+	 * @example "...Just <!-- wp:test /--> testing..." -> "Just testing..."
+	 *
+	 * @since 5.0.0
+	 * @var string
+	 */
+	public $innerHTML; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+
+	/**
+	 * List of string fragments and null markers where inner blocks were found
+	 *
+	 * @example array(
+	 *   'innerHTML'    => 'BeforeInnerAfter',
+	 *   'innerBlocks'  => array( block, block ),
+	 *   'innerContent' => array( 'Before', null, 'Inner', null, 'After' ),
+	 * )
+	 *
+	 * @since 4.2.0
+	 * @var array
+	 */
+	public $innerContent; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+
+	/**
+	 * Constructor.
+	 *
+	 * Will populate object properties from the provided arguments.
+	 *
+	 * @since 5.0.0
+	 *
+	 * @param string $name          Name of block.
+	 * @param array  $attrs         Optional set of attributes from block comment delimiters.
+	 * @param array  $inner_blocks  List of inner blocks (of this same class).
+	 * @param string $inner_html    Resultant HTML from inside block comment delimiters after removing inner blocks.
+	 * @param array  $inner_content List of string fragments and null markers where inner blocks were found.
+	 */
+	public function __construct( $name, $attrs, $inner_blocks, $inner_html, $inner_content ) {
+		$this->blockName    = $name;          // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+		$this->attrs        = $attrs;
+		$this->innerBlocks  = $inner_blocks;  // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+		$this->innerHTML    = $inner_html;    // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+		$this->innerContent = $inner_content; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
+	}
+}
diff --git a/packages/block-serialization-default-parser/class-wp-block-parser-frame.php b/packages/block-serialization-default-parser/class-wp-block-parser-frame.php
new file mode 100644
index 00000000000000..6ab5dd3087dfb6
--- /dev/null
+++ b/packages/block-serialization-default-parser/class-wp-block-parser-frame.php
@@ -0,0 +1,79 @@
+<?php
+/**
+ * Block Serialization Parser
+ *
+ * @package WordPress
+ */
+
+/**
+ * Class WP_Block_Parser_Frame
+ *
+ * Holds partial blocks in memory while parsing
+ *
+ * @internal
+ * @since 5.0.0
+ */
+class WP_Block_Parser_Frame {
+	/**
+	 * Full or partial block
+	 *
+	 * @since 5.0.0
+	 * @var WP_Block_Parser_Block
+	 */
+	public $block;
+
+	/**
+	 * Byte offset into document for start of parse token
+	 *
+	 * @since 5.0.0
+	 * @var int
+	 */
+	public $token_start;
+
+	/**
+	 * Byte length of entire parse token string
+	 *
+	 * @since 5.0.0
+	 * @var int
+	 */
+	public $token_length;
+
+	/**
+	 * Byte offset into document for after parse token ends
+	 * (used during reconstruction of stack into parse production)
+	 *
+	 * @since 5.0.0
+	 * @var int
+	 */
+	public $prev_offset;
+
+	/**
+	 * Byte offset into document where leading HTML before token starts
+	 *
+	 * @since 5.0.0
+	 * @var int
+	 */
+	public $leading_html_start;
+
+	/**
+	 * Constructor
+	 *
+	 * Will populate object properties from the provided arguments.
+	 *
+	 * @since 5.0.0
+	 *
+	 * @param WP_Block_Parser_Block $block              Full or partial block.
+	 * @param int                   $token_start        Byte offset into document for start of parse token.
+	 * @param int                   $token_length       Byte length of entire parse token string.
+	 * @param int|null              $prev_offset        Optional. Byte offset into document for after parse token ends. Default null.
+	 * @param int|null              $leading_html_start Optional. Byte offset into document where leading HTML before token starts.
+	 *                                                  Default null.
+	 */
+	public function __construct( $block, $token_start, $token_length, $prev_offset = null, $leading_html_start = null ) {
+		$this->block              = $block;
+		$this->token_start        = $token_start;
+		$this->token_length       = $token_length;
+		$this->prev_offset        = isset( $prev_offset ) ? $prev_offset : $token_start + $token_length;
+		$this->leading_html_start = $leading_html_start;
+	}
+}
diff --git a/packages/block-serialization-default-parser/class-wp-block-parser.php b/packages/block-serialization-default-parser/class-wp-block-parser.php
new file mode 100644
index 00000000000000..543f53691ccb17
--- /dev/null
+++ b/packages/block-serialization-default-parser/class-wp-block-parser.php
@@ -0,0 +1,404 @@
+<?php
+/**
+ * Block Serialization Parser
+ *
+ * @package WordPress
+ */
+
+/**
+ * Class WP_Block_Parser
+ *
+ * Parses a document and constructs a list of parsed block objects
+ *
+ * @since 5.0.0
+ * @since 4.0.0 returns arrays not objects, all attributes are arrays
+ */
+class WP_Block_Parser {
+	/**
+	 * Input document being parsed
+	 *
+	 * @example "Pre-text\n<!-- wp:paragraph -->This is inside a block!<!-- /wp:paragraph -->"
+	 *
+	 * @since 5.0.0
+	 * @var string
+	 */
+	public $document;
+
+	/**
+	 * Tracks parsing progress through document
+	 *
+	 * @since 5.0.0
+	 * @var int
+	 */
+	public $offset;
+
+	/**
+	 * List of parsed blocks
+	 *
+	 * @since 5.0.0
+	 * @var WP_Block_Parser_Block[]
+	 */
+	public $output;
+
+	/**
+	 * Stack of partially-parsed structures in memory during parse
+	 *
+	 * @since 5.0.0
+	 * @var WP_Block_Parser_Frame[]
+	 */
+	public $stack;
+
+	/**
+	 * Parses a document and returns a list of block structures
+	 *
+	 * When encountering an invalid parse will return a best-effort
+	 * parse. In contrast to the specification parser this does not
+	 * return an error on invalid inputs.
+	 *
+	 * @since 5.0.0
+	 *
+	 * @param string $document Input document being parsed.
+	 * @return array[]
+	 */
+	public function parse( $document ) {
+		$this->document = $document;
+		$this->offset   = 0;
+		$this->output   = array();
+		$this->stack    = array();
+
+		while ( $this->proceed() ) {
+			continue;
+		}
+
+		return $this->output;
+	}
+
+	/**
+	 * Processes the next token from the input document
+	 * and returns whether to proceed eating more tokens
+	 *
+	 * This is the "next step" function that essentially
+	 * takes a token as its input and decides what to do
+	 * with that token before descending deeper into a
+	 * nested block tree or continuing along the document
+	 * or breaking out of a level of nesting.
+	 *
+	 * @internal
+	 * @since 5.0.0
+	 * @return bool
+	 */
+	public function proceed() {
+		$next_token = $this->next_token();
+		list( $token_type, $block_name, $attrs, $start_offset, $token_length ) = $next_token;
+		$stack_depth = count( $this->stack );
+
+		// we may have some HTML soup before the next block.
+		$leading_html_start = $start_offset > $this->offset ? $this->offset : null;
+
+		switch ( $token_type ) {
+			case 'no-more-tokens':
+				// if not in a block then flush output.
+				if ( 0 === $stack_depth ) {
+					$this->add_freeform();
+					return false;
+				}
+
+				/*
+				 * Otherwise we have a problem
+				 * This is an error
+				 *
+				 * we have options
+				 * - treat it all as freeform text
+				 * - assume an implicit closer (easiest when not nesting)
+				 */
+
+				// for the easy case we'll assume an implicit closer.
+				if ( 1 === $stack_depth ) {
+					$this->add_block_from_stack();
+					return false;
+				}
+
+				/*
+				 * for the nested case where it's more difficult we'll
+				 * have to assume that multiple closers are missing
+				 * and so we'll collapse the whole stack piecewise
+				 */
+				while ( 0 < count( $this->stack ) ) {
+					$this->add_block_from_stack();
+				}
+				return false;
+
+			case 'void-block':
+				/*
+				 * easy case is if we stumbled upon a void block
+				 * in the top-level of the document
+				 */
+				if ( 0 === $stack_depth ) {
+					if ( isset( $leading_html_start ) ) {
+						$this->output[] = (array) $this->freeform(
+							substr(
+								$this->document,
+								$leading_html_start,
+								$start_offset - $leading_html_start
+							)
+						);
+					}
+
+					$this->output[] = (array) new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() );
+					$this->offset   = $start_offset + $token_length;
+					return true;
+				}
+
+				// otherwise we found an inner block.
+				$this->add_inner_block(
+					new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
+					$start_offset,
+					$token_length
+				);
+				$this->offset = $start_offset + $token_length;
+				return true;
+
+			case 'block-opener':
+				// track all newly-opened blocks on the stack.
+				array_push(
+					$this->stack,
+					new WP_Block_Parser_Frame(
+						new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
+						$start_offset,
+						$token_length,
+						$start_offset + $token_length,
+						$leading_html_start
+					)
+				);
+				$this->offset = $start_offset + $token_length;
+				return true;
+
+			case 'block-closer':
+				/*
+				 * if we're missing an opener we're in trouble
+				 * This is an error
+				 */
+				if ( 0 === $stack_depth ) {
+					/*
+					 * we have options
+					 * - assume an implicit opener
+					 * - assume _this_ is the opener
+					 * - give up and close out the document
+					 */
+					$this->add_freeform();
+					return false;
+				}
+
+				// if we're not nesting then this is easy - close the block.
+				if ( 1 === $stack_depth ) {
+					$this->add_block_from_stack( $start_offset );
+					$this->offset = $start_offset + $token_length;
+					return true;
+				}
+
+				/*
+				 * otherwise we're nested and we have to close out the current
+				 * block and add it as a new innerBlock to the parent
+				 */
+				$stack_top                        = array_pop( $this->stack );
+				$html                             = substr( $this->document, $stack_top->prev_offset, $start_offset - $stack_top->prev_offset );
+				$stack_top->block->innerHTML     .= $html;
+				$stack_top->block->innerContent[] = $html;
+				$stack_top->prev_offset           = $start_offset + $token_length;
+
+				$this->add_inner_block(
+					$stack_top->block,
+					$stack_top->token_start,
+					$stack_top->token_length,
+					$start_offset + $token_length
+				);
+				$this->offset = $start_offset + $token_length;
+				return true;
+
+			default:
+				// This is an error.
+				$this->add_freeform();
+				return false;
+		}
+	}
+
+	/**
+	 * Scans the document from where we last left off
+	 * and finds the next valid token to parse if it exists
+	 *
+	 * Returns the type of the find: kind of find, block information, attributes
+	 *
+	 * @internal
+	 * @since 5.0.0
+	 * @since 4.6.1 fixed a bug in attribute parsing which caused catastrophic backtracking on invalid block comments
+	 * @return array
+	 */
+	public function next_token() {
+		$matches = null;
+
+		/*
+		 * aye the magic
+		 * we're using a single RegExp to tokenize the block comment delimiters
+		 * we're also using a trick here because the only difference between a
+		 * block opener and a block closer is the leading `/` before `wp:` (and
+		 * a closer has no attributes). we can trap them both and process the
+		 * match back in PHP to see which one it was.
+		 */
+		$has_match = preg_match(
+			'/<!--\s+(?P<closer>\/)?wp:(?P<namespace>[a-z][a-z0-9_-]*\/)?(?P<name>[a-z][a-z0-9_-]*)\s+(?P<attrs>{(?:(?:[^}]+|}+(?=})|(?!}\s+\/?-->).)*+)?}\s+)?(?P<void>\/)?-->/s',
+			$this->document,
+			$matches,
+			PREG_OFFSET_CAPTURE,
+			$this->offset
+		);
+
+		// if we get here we probably have catastrophic backtracking or out-of-memory in the PCRE.
+		if ( false === $has_match ) {
+			return array( 'no-more-tokens', null, null, null, null );
+		}
+
+		// we have no more tokens.
+		if ( 0 === $has_match ) {
+			return array( 'no-more-tokens', null, null, null, null );
+		}
+
+		list( $match, $started_at ) = $matches[0];
+
+		$length    = strlen( $match );
+		$is_closer = isset( $matches['closer'] ) && -1 !== $matches['closer'][1];
+		$is_void   = isset( $matches['void'] ) && -1 !== $matches['void'][1];
+		$namespace = $matches['namespace'];
+		$namespace = ( isset( $namespace ) && -1 !== $namespace[1] ) ? $namespace[0] : 'core/';
+		$name      = $namespace . $matches['name'][0];
+		$has_attrs = isset( $matches['attrs'] ) && -1 !== $matches['attrs'][1];
+
+		/*
+		 * Fun fact! It's not trivial in PHP to create "an empty associative array" since all arrays
+		 * are associative arrays. If we use `array()` we get a JSON `[]`
+		 */
+		$attrs = $has_attrs
+			? json_decode( $matches['attrs'][0], /* as-associative */ true )
+			: array();
+
+		/*
+		 * This state isn't allowed
+		 * This is an error
+		 */
+		if ( $is_closer && ( $is_void || $has_attrs ) ) {
+			// we can ignore them since they don't hurt anything.
+		}
+
+		if ( $is_void ) {
+			return array( 'void-block', $name, $attrs, $started_at, $length );
+		}
+
+		if ( $is_closer ) {
+			return array( 'block-closer', $name, null, $started_at, $length );
+		}
+
+		return array( 'block-opener', $name, $attrs, $started_at, $length );
+	}
+
+	/**
+	 * Returns a new block object for freeform HTML
+	 *
+	 * @internal
+	 * @since 3.9.0
+	 *
+	 * @param string $inner_html HTML content of block.
+	 * @return WP_Block_Parser_Block freeform block object.
+	 */
+	public function freeform( $inner_html ) {
+		return new WP_Block_Parser_Block( null, array(), array(), $inner_html, array( $inner_html ) );
+	}
+
+	/**
+	 * Pushes a length of text from the input document
+	 * to the output list as a freeform block.
+	 *
+	 * @internal
+	 * @since 5.0.0
+	 * @param null $length how many bytes of document text to output.
+	 */
+	public function add_freeform( $length = null ) {
+		$length = $length ? $length : strlen( $this->document ) - $this->offset;
+
+		if ( 0 === $length ) {
+			return;
+		}
+
+		$this->output[] = (array) $this->freeform( substr( $this->document, $this->offset, $length ) );
+	}
+
+	/**
+	 * Given a block structure from memory pushes
+	 * a new block to the output list.
+	 *
+	 * @internal
+	 * @since 5.0.0
+	 * @param WP_Block_Parser_Block $block        The block to add to the output.
+	 * @param int                   $token_start  Byte offset into the document where the first token for the block starts.
+	 * @param int                   $token_length Byte length of entire block from start of opening token to end of closing token.
+	 * @param int|null              $last_offset  Last byte offset into document if continuing form earlier output.
+	 */
+	public function add_inner_block( WP_Block_Parser_Block $block, $token_start, $token_length, $last_offset = null ) {
+		$parent                       = $this->stack[ count( $this->stack ) - 1 ];
+		$parent->block->innerBlocks[] = (array) $block;
+		$html                         = substr( $this->document, $parent->prev_offset, $token_start - $parent->prev_offset );
+
+		if ( ! empty( $html ) ) {
+			$parent->block->innerHTML     .= $html;
+			$parent->block->innerContent[] = $html;
+		}
+
+		$parent->block->innerContent[] = null;
+		$parent->prev_offset           = $last_offset ? $last_offset : $token_start + $token_length;
+	}
+
+	/**
+	 * Pushes the top block from the parsing stack to the output list.
+	 *
+	 * @internal
+	 * @since 5.0.0
+	 * @param int|null $end_offset byte offset into document for where we should stop sending text output as HTML.
+	 */
+	public function add_block_from_stack( $end_offset = null ) {
+		$stack_top   = array_pop( $this->stack );
+		$prev_offset = $stack_top->prev_offset;
+
+		$html = isset( $end_offset )
+			? substr( $this->document, $prev_offset, $end_offset - $prev_offset )
+			: substr( $this->document, $prev_offset );
+
+		if ( ! empty( $html ) ) {
+			$stack_top->block->innerHTML     .= $html;
+			$stack_top->block->innerContent[] = $html;
+		}
+
+		if ( isset( $stack_top->leading_html_start ) ) {
+			$this->output[] = (array) $this->freeform(
+				substr(
+					$this->document,
+					$stack_top->leading_html_start,
+					$stack_top->token_start - $stack_top->leading_html_start
+				)
+			);
+		}
+
+		$this->output[] = (array) $stack_top->block;
+	}
+}
+
+/**
+ * WP_Block_Parser_Block class.
+ *
+ * Required for backward compatibility in WordPress Core.
+ */
+require_once __DIR__ . '/class-wp-block-parser-block.php';
+
+/**
+ * WP_Block_Parser_Frame class.
+ *
+ * Required for backward compatibility in WordPress Core.
+ */
+require_once __DIR__ . '/class-wp-block-parser-frame.php';
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index 24817de104d94d..2ea349e5f94d23 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,15 +20,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/block-serialization-default-parser/parser.php b/packages/block-serialization-default-parser/parser.php
index 50337b588a37b9..5395650960a2d3 100644
--- a/packages/block-serialization-default-parser/parser.php
+++ b/packages/block-serialization-default-parser/parser.php
@@ -5,551 +5,7 @@
  * @package WordPress
  */
 
-/**
- * Class WP_Block_Parser_Block
- *
- * Holds the block structure in memory
- *
- * @since 5.0.0
- */
-class WP_Block_Parser_Block {
-	/**
-	 * Name of block
-	 *
-	 * @example "core/paragraph"
-	 *
-	 * @since 5.0.0
-	 * @var string
-	 */
-	public $blockName;
-
-	/**
-	 * Optional set of attributes from block comment delimiters
-	 *
-	 * @example null
-	 * @example array( 'columns' => 3 )
-	 *
-	 * @since 5.0.0
-	 * @var array|null
-	 */
-	public $attrs;
-
-	/**
-	 * List of inner blocks (of this same class)
-	 *
-	 * @since 5.0.0
-	 * @var WP_Block_Parser_Block[]
-	 */
-	public $innerBlocks;
-
-	/**
-	 * Resultant HTML from inside block comment delimiters
-	 * after removing inner blocks
-	 *
-	 * @example "...Just <!-- wp:test /--> testing..." -> "Just testing..."
-	 *
-	 * @since 5.0.0
-	 * @var string
-	 */
-	public $innerHTML;
-
-	/**
-	 * List of string fragments and null markers where inner blocks were found
-	 *
-	 * @example array(
-	 *   'innerHTML'    => 'BeforeInnerAfter',
-	 *   'innerBlocks'  => array( block, block ),
-	 *   'innerContent' => array( 'Before', null, 'Inner', null, 'After' ),
-	 * )
-	 *
-	 * @since 4.2.0
-	 * @var array
-	 */
-	public $innerContent;
-
-	/**
-	 * Constructor.
-	 *
-	 * Will populate object properties from the provided arguments.
-	 *
-	 * @since 5.0.0
-	 *
-	 * @param string $name         Name of block.
-	 * @param array  $attrs        Optional set of attributes from block comment delimiters.
-	 * @param array  $innerBlocks  List of inner blocks (of this same class).
-	 * @param string $innerHTML    Resultant HTML from inside block comment delimiters after removing inner blocks.
-	 * @param array  $innerContent List of string fragments and null markers where inner blocks were found.
-	 */
-	public function __construct( $name, $attrs, $innerBlocks, $innerHTML, $innerContent ) {
-		$this->blockName    = $name;
-		$this->attrs        = $attrs;
-		$this->innerBlocks  = $innerBlocks;
-		$this->innerHTML    = $innerHTML;
-		$this->innerContent = $innerContent;
-	}
-}
-
-/**
- * Class WP_Block_Parser_Frame
- *
- * Holds partial blocks in memory while parsing
- *
- * @internal
- * @since 5.0.0
- */
-class WP_Block_Parser_Frame {
-	/**
-	 * Full or partial block
-	 *
-	 * @since 5.0.0
-	 * @var WP_Block_Parser_Block
-	 */
-	public $block;
-
-	/**
-	 * Byte offset into document for start of parse token
-	 *
-	 * @since 5.0.0
-	 * @var int
-	 */
-	public $token_start;
-
-	/**
-	 * Byte length of entire parse token string
-	 *
-	 * @since 5.0.0
-	 * @var int
-	 */
-	public $token_length;
-
-	/**
-	 * Byte offset into document for after parse token ends
-	 * (used during reconstruction of stack into parse production)
-	 *
-	 * @since 5.0.0
-	 * @var int
-	 */
-	public $prev_offset;
-
-	/**
-	 * Byte offset into document where leading HTML before token starts
-	 *
-	 * @since 5.0.0
-	 * @var int
-	 */
-	public $leading_html_start;
-
-	/**
-	 * Constructor
-	 *
-	 * Will populate object properties from the provided arguments.
-	 *
-	 * @since 5.0.0
-	 *
-	 * @param WP_Block_Parser_Block $block              Full or partial block.
-	 * @param int                   $token_start        Byte offset into document for start of parse token.
-	 * @param int                   $token_length       Byte length of entire parse token string.
-	 * @param int                   $prev_offset        Byte offset into document for after parse token ends.
-	 * @param int                   $leading_html_start Byte offset into document where leading HTML before token starts.
-	 */
-	public function __construct( $block, $token_start, $token_length, $prev_offset = null, $leading_html_start = null ) {
-		$this->block              = $block;
-		$this->token_start        = $token_start;
-		$this->token_length       = $token_length;
-		$this->prev_offset        = isset( $prev_offset ) ? $prev_offset : $token_start + $token_length;
-		$this->leading_html_start = $leading_html_start;
-	}
-}
-
-/**
- * Class WP_Block_Parser
- *
- * Parses a document and constructs a list of parsed block objects
- *
- * @since 5.0.0
- * @since 4.0.0 returns arrays not objects, all attributes are arrays
- */
-class WP_Block_Parser {
-	/**
-	 * Input document being parsed
-	 *
-	 * @example "Pre-text\n<!-- wp:paragraph -->This is inside a block!<!-- /wp:paragraph -->"
-	 *
-	 * @since 5.0.0
-	 * @var string
-	 */
-	public $document;
-
-	/**
-	 * Tracks parsing progress through document
-	 *
-	 * @since 5.0.0
-	 * @var int
-	 */
-	public $offset;
-
-	/**
-	 * List of parsed blocks
-	 *
-	 * @since 5.0.0
-	 * @var WP_Block_Parser_Block[]
-	 */
-	public $output;
-
-	/**
-	 * Stack of partially-parsed structures in memory during parse
-	 *
-	 * @since 5.0.0
-	 * @var WP_Block_Parser_Frame[]
-	 */
-	public $stack;
-
-	/**
-	 * Empty associative array, here due to PHP quirks
-	 *
-	 * @since 4.4.0
-	 * @var array empty associative array
-	 */
-	public $empty_attrs;
-
-	/**
-	 * Parses a document and returns a list of block structures
-	 *
-	 * When encountering an invalid parse will return a best-effort
-	 * parse. In contrast to the specification parser this does not
-	 * return an error on invalid inputs.
-	 *
-	 * @since 5.0.0
-	 *
-	 * @param string $document Input document being parsed.
-	 * @return array[]
-	 */
-	public function parse( $document ) {
-		$this->document    = $document;
-		$this->offset      = 0;
-		$this->output      = array();
-		$this->stack       = array();
-		$this->empty_attrs = json_decode( '{}', true );
-
-		while ( $this->proceed() ) {
-			continue;
-		}
-
-		return $this->output;
-	}
-
-	/**
-	 * Processes the next token from the input document
-	 * and returns whether to proceed eating more tokens
-	 *
-	 * This is the "next step" function that essentially
-	 * takes a token as its input and decides what to do
-	 * with that token before descending deeper into a
-	 * nested block tree or continuing along the document
-	 * or breaking out of a level of nesting.
-	 *
-	 * @internal
-	 * @since 5.0.0
-	 * @return bool
-	 */
-	public function proceed() {
-		$next_token = $this->next_token();
-		list( $token_type, $block_name, $attrs, $start_offset, $token_length ) = $next_token;
-		$stack_depth = count( $this->stack );
-
-		// we may have some HTML soup before the next block.
-		$leading_html_start = $start_offset > $this->offset ? $this->offset : null;
-
-		switch ( $token_type ) {
-			case 'no-more-tokens':
-				// if not in a block then flush output.
-				if ( 0 === $stack_depth ) {
-					$this->add_freeform();
-					return false;
-				}
-
-				/*
-				 * Otherwise we have a problem
-				 * This is an error
-				 *
-				 * we have options
-				 * - treat it all as freeform text
-				 * - assume an implicit closer (easiest when not nesting)
-				 */
-
-				// for the easy case we'll assume an implicit closer.
-				if ( 1 === $stack_depth ) {
-					$this->add_block_from_stack();
-					return false;
-				}
-
-				/*
-				 * for the nested case where it's more difficult we'll
-				 * have to assume that multiple closers are missing
-				 * and so we'll collapse the whole stack piecewise
-				 */
-				while ( 0 < count( $this->stack ) ) {
-					$this->add_block_from_stack();
-				}
-				return false;
-
-			case 'void-block':
-				/*
-				 * easy case is if we stumbled upon a void block
-				 * in the top-level of the document
-				 */
-				if ( 0 === $stack_depth ) {
-					if ( isset( $leading_html_start ) ) {
-						$this->output[] = (array) $this->freeform(
-							substr(
-								$this->document,
-								$leading_html_start,
-								$start_offset - $leading_html_start
-							)
-						);
-					}
-
-					$this->output[] = (array) new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() );
-					$this->offset   = $start_offset + $token_length;
-					return true;
-				}
-
-				// otherwise we found an inner block.
-				$this->add_inner_block(
-					new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
-					$start_offset,
-					$token_length
-				);
-				$this->offset = $start_offset + $token_length;
-				return true;
-
-			case 'block-opener':
-				// track all newly-opened blocks on the stack.
-				array_push(
-					$this->stack,
-					new WP_Block_Parser_Frame(
-						new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
-						$start_offset,
-						$token_length,
-						$start_offset + $token_length,
-						$leading_html_start
-					)
-				);
-				$this->offset = $start_offset + $token_length;
-				return true;
-
-			case 'block-closer':
-				/*
-				 * if we're missing an opener we're in trouble
-				 * This is an error
-				 */
-				if ( 0 === $stack_depth ) {
-					/*
-					 * we have options
-					 * - assume an implicit opener
-					 * - assume _this_ is the opener
-					 * - give up and close out the document
-					 */
-					$this->add_freeform();
-					return false;
-				}
-
-				// if we're not nesting then this is easy - close the block.
-				if ( 1 === $stack_depth ) {
-					$this->add_block_from_stack( $start_offset );
-					$this->offset = $start_offset + $token_length;
-					return true;
-				}
-
-				/*
-				 * otherwise we're nested and we have to close out the current
-				 * block and add it as a new innerBlock to the parent
-				 */
-				$stack_top                        = array_pop( $this->stack );
-				$html                             = substr( $this->document, $stack_top->prev_offset, $start_offset - $stack_top->prev_offset );
-				$stack_top->block->innerHTML     .= $html;
-				$stack_top->block->innerContent[] = $html;
-				$stack_top->prev_offset           = $start_offset + $token_length;
-
-				$this->add_inner_block(
-					$stack_top->block,
-					$stack_top->token_start,
-					$stack_top->token_length,
-					$start_offset + $token_length
-				);
-				$this->offset = $start_offset + $token_length;
-				return true;
-
-			default:
-				// This is an error.
-				$this->add_freeform();
-				return false;
-		}
-	}
-
-	/**
-	 * Scans the document from where we last left off
-	 * and finds the next valid token to parse if it exists
-	 *
-	 * Returns the type of the find: kind of find, block information, attributes
-	 *
-	 * @internal
-	 * @since 5.0.0
-	 * @since 4.6.1 fixed a bug in attribute parsing which caused catastrophic backtracking on invalid block comments
-	 * @return array
-	 */
-	public function next_token() {
-		$matches = null;
-
-		/*
-		 * aye the magic
-		 * we're using a single RegExp to tokenize the block comment delimiters
-		 * we're also using a trick here because the only difference between a
-		 * block opener and a block closer is the leading `/` before `wp:` (and
-		 * a closer has no attributes). we can trap them both and process the
-		 * match back in PHP to see which one it was.
-		 */
-		$has_match = preg_match(
-			'/<!--\s+(?P<closer>\/)?wp:(?P<namespace>[a-z][a-z0-9_-]*\/)?(?P<name>[a-z][a-z0-9_-]*)\s+(?P<attrs>{(?:(?:[^}]+|}+(?=})|(?!}\s+\/?-->).)*+)?}\s+)?(?P<void>\/)?-->/s',
-			$this->document,
-			$matches,
-			PREG_OFFSET_CAPTURE,
-			$this->offset
-		);
-
-		// if we get here we probably have catastrophic backtracking or out-of-memory in the PCRE.
-		if ( false === $has_match ) {
-			return array( 'no-more-tokens', null, null, null, null );
-		}
-
-		// we have no more tokens.
-		if ( 0 === $has_match ) {
-			return array( 'no-more-tokens', null, null, null, null );
-		}
-
-		list( $match, $started_at ) = $matches[0];
-
-		$length    = strlen( $match );
-		$is_closer = isset( $matches['closer'] ) && -1 !== $matches['closer'][1];
-		$is_void   = isset( $matches['void'] ) && -1 !== $matches['void'][1];
-		$namespace = $matches['namespace'];
-		$namespace = ( isset( $namespace ) && -1 !== $namespace[1] ) ? $namespace[0] : 'core/';
-		$name      = $namespace . $matches['name'][0];
-		$has_attrs = isset( $matches['attrs'] ) && -1 !== $matches['attrs'][1];
-
-		/*
-		 * Fun fact! It's not trivial in PHP to create "an empty associative array" since all arrays
-		 * are associative arrays. If we use `array()` we get a JSON `[]`
-		 */
-		$attrs = $has_attrs
-			? json_decode( $matches['attrs'][0], /* as-associative */ true )
-			: $this->empty_attrs;
-
-		/*
-		 * This state isn't allowed
-		 * This is an error
-		 */
-		if ( $is_closer && ( $is_void || $has_attrs ) ) {
-			// we can ignore them since they don't hurt anything.
-		}
-
-		if ( $is_void ) {
-			return array( 'void-block', $name, $attrs, $started_at, $length );
-		}
-
-		if ( $is_closer ) {
-			return array( 'block-closer', $name, null, $started_at, $length );
-		}
-
-		return array( 'block-opener', $name, $attrs, $started_at, $length );
-	}
-
-	/**
-	 * Returns a new block object for freeform HTML
-	 *
-	 * @internal
-	 * @since 3.9.0
-	 *
-	 * @param string $innerHTML HTML content of block.
-	 * @return WP_Block_Parser_Block freeform block object.
-	 */
-	public function freeform( $innerHTML ) {
-		return new WP_Block_Parser_Block( null, $this->empty_attrs, array(), $innerHTML, array( $innerHTML ) );
-	}
-
-	/**
-	 * Pushes a length of text from the input document
-	 * to the output list as a freeform block.
-	 *
-	 * @internal
-	 * @since 5.0.0
-	 * @param null $length how many bytes of document text to output.
-	 */
-	public function add_freeform( $length = null ) {
-		$length = $length ? $length : strlen( $this->document ) - $this->offset;
-
-		if ( 0 === $length ) {
-			return;
-		}
-
-		$this->output[] = (array) $this->freeform( substr( $this->document, $this->offset, $length ) );
-	}
-
-	/**
-	 * Given a block structure from memory pushes
-	 * a new block to the output list.
-	 *
-	 * @internal
-	 * @since 5.0.0
-	 * @param WP_Block_Parser_Block $block        The block to add to the output.
-	 * @param int                   $token_start  Byte offset into the document where the first token for the block starts.
-	 * @param int                   $token_length Byte length of entire block from start of opening token to end of closing token.
-	 * @param int|null              $last_offset  Last byte offset into document if continuing form earlier output.
-	 */
-	public function add_inner_block( WP_Block_Parser_Block $block, $token_start, $token_length, $last_offset = null ) {
-		$parent                       = $this->stack[ count( $this->stack ) - 1 ];
-		$parent->block->innerBlocks[] = (array) $block;
-		$html                         = substr( $this->document, $parent->prev_offset, $token_start - $parent->prev_offset );
-
-		if ( ! empty( $html ) ) {
-			$parent->block->innerHTML     .= $html;
-			$parent->block->innerContent[] = $html;
-		}
-
-		$parent->block->innerContent[] = null;
-		$parent->prev_offset           = $last_offset ? $last_offset : $token_start + $token_length;
-	}
-
-	/**
-	 * Pushes the top block from the parsing stack to the output list.
-	 *
-	 * @internal
-	 * @since 5.0.0
-	 * @param int|null $end_offset byte offset into document for where we should stop sending text output as HTML.
-	 */
-	public function add_block_from_stack( $end_offset = null ) {
-		$stack_top   = array_pop( $this->stack );
-		$prev_offset = $stack_top->prev_offset;
-
-		$html = isset( $end_offset )
-			? substr( $this->document, $prev_offset, $end_offset - $prev_offset )
-			: substr( $this->document, $prev_offset );
-
-		if ( ! empty( $html ) ) {
-			$stack_top->block->innerHTML     .= $html;
-			$stack_top->block->innerContent[] = $html;
-		}
-
-		if ( isset( $stack_top->leading_html_start ) ) {
-			$this->output[] = (array) $this->freeform(
-				substr(
-					$this->document,
-					$stack_top->leading_html_start,
-					$stack_top->token_start - $stack_top->leading_html_start
-				)
-			);
-		}
-
-		$this->output[] = (array) $stack_top->block;
-	}
-}
+// Require files.
+require_once __DIR__ . '/class-wp-block-parser-block.php';
+require_once __DIR__ . '/class-wp-block-parser-frame.php';
+require_once __DIR__ . '/class-wp-block-parser.php';
diff --git a/packages/block-serialization-default-parser/tsconfig.json b/packages/block-serialization-default-parser/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/block-serialization-default-parser/tsconfig.json
+++ b/packages/block-serialization-default-parser/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/block-serialization-spec-parser/.npmrc b/packages/block-serialization-spec-parser/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/block-serialization-spec-parser/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index f2068947b88a4b..b23ec04a39a21e 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -57,11 +161,11 @@
 
 ## 3.0.0 (2019-03-06)
 
-## Breaking Change
+### Breaking Changes
 
 -   A `parser.js` file generated from the PEGJS grammar is now outputted in commonjs format.
 
-## New Feature
+### New Features
 
 -   A `parser.php` file generated from the PEGJS grammar is now added upon installation.
 
@@ -71,7 +175,7 @@
 
 ## 2.0.0 (2018-11-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   JS and PHP parsers now behave consistently when parsing empty attributes.
 
diff --git a/packages/block-serialization-spec-parser/README.md b/packages/block-serialization-spec-parser/README.md
index 5c4dc865821219..50b0aae46f0874 100644
--- a/packages/block-serialization-spec-parser/README.md
+++ b/packages/block-serialization-spec-parser/README.md
@@ -1,6 +1,6 @@
 # Block Serialization Spec Parser
 
-This library contains the grammar file (`grammar.pegjs`) for WordPress posts which is a block serialization [_specification_](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/grammar.md) which is used to generate the actual _parser_ which is also bundled in this package.
+This library contains the grammar file (`grammar.pegjs`) for WordPress posts which is a block serialization _specification_ which is used to generate the actual _parser_ which is also bundled in this package.
 
 PEG parser generators are available in many languages, though different libraries may require some translation of this grammar into their syntax. For more information see:
 
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 8393d69b60cf13..0e4c251a8e5f18 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,9 +21,11 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "parser.js",
+	"wpScript": true,
 	"sideEffects": false,
 	"dependencies": {
 		"pegjs": "^0.10.0",
diff --git a/packages/blocks/.npmrc b/packages/blocks/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/blocks/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index f1c2317d7791b0..0fd1b8af928abd 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,119 @@
 
 ## Unreleased
 
+## 14.2.0 (2024-11-27)
+
+## 14.1.0 (2024-11-16)
+
+## 14.0.0 (2024-10-30)
+
+### Breaking changes
+
+- Normalize `blockType.parent` to be an array. While string values were never supported, they appeared to work with some unintended side-effects that have been fixed by [#66250](https://github.com/WordPress/gutenberg/pull/66250). For that reason, we've added some code that automatically migrates strings to arrays — though it still raises a warning.
+
+## 13.10.0 (2024-10-16)
+
+## 13.9.0 (2024-10-03)
+
+## 13.8.0 (2024-09-19)
+
+## 13.7.0 (2024-09-05)
+
+## 13.6.0 (2024-08-21)
+
+## 13.5.0 (2024-08-07)
+
+## 13.4.0 (2024-07-24)
+
+## 13.3.0 (2024-07-10)
+
+## 13.2.0 (2024-06-26)
+
+## 13.1.0 (2024-06-15)
+
+## 13.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 12.35.0 (2024-05-16)
+
+## 12.34.0 (2024-05-02)
+
+## 12.33.0 (2024-04-19)
+
+## 12.32.0 (2024-04-03)
+
+## 12.31.0 (2024-03-21)
+
+## 12.30.0 (2024-03-06)
+
+## 12.29.0 (2024-02-21)
+
+## 12.28.0 (2024-02-09)
+
+## 12.27.0 (2024-01-24)
+
+## 12.26.0 (2024-01-10)
+
+## 12.25.0 (2023-12-13)
+
+## 12.24.0 (2023-11-29)
+
+## 12.23.0 (2023-11-16)
+
+## 12.22.0 (2023-11-02)
+
+## 12.21.0 (2023-10-18)
+
+## 12.20.0 (2023-10-05)
+
+## 12.19.0 (2023-09-20)
+
+## 12.18.0 (2023-08-31)
+
+## 12.17.0 (2023-08-16)
+
+## 12.16.0 (2023-08-10)
+
+## 12.15.0 (2023-07-20)
+
+## 12.14.0 (2023-07-05)
+
+## 12.13.0 (2023-06-23)
+
+## 12.12.0 (2023-06-07)
+
+## 12.11.0 (2023-05-24)
+
+## 12.10.0 (2023-05-10)
+
+## 12.9.0 (2023-04-26)
+
+## 12.8.0 (2023-04-12)
+
+## 12.7.0 (2023-03-29)
+
+## 12.6.0 (2023-03-15)
+
+## 12.5.0 (2023-03-01)
+
+## 12.4.0 (2023-02-15)
+
+## 12.3.0 (2023-02-01)
+
+## 12.2.0 (2023-01-11)
+
+## 12.1.0 (2023-01-02)
+
+## 12.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 11.21.0 (2022-11-16)
 
 ## 11.20.0 (2022-11-02)
@@ -16,12 +129,13 @@
 
 ## 11.17.0 (2022-09-21)
 
-- The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples.
+-   The block attribute sources `children` and `node` have been deprecated. Please use the `html` source instead. See https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/ and the core blocks for examples.
+
 ## 11.16.0 (2022-09-13)
 
 ## 11.15.0 (2022-08-24)
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
@@ -33,9 +147,9 @@
 
 ### 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
+### New Features
 
 -   The shortcode transformer now accepts a `transform` method to allow advanced controls over the transformed result. For instance, it's now possible to define custom `innerBlocks` for the transformed block. ([#42001](https://github.com/WordPress/gutenberg/pull/42001))
 
@@ -61,17 +175,17 @@
 
 ## 11.1.0 (2021-09-09)
 
-### Backward Compatibility
+### Bug Fixes
 
 -   Register a block even when an invalid value provided for the icon setting ([#34350](https://github.com/WordPress/gutenberg/pull/34350)).
 
-### New API
+### New Features
 
 -   The `isMatch` callback on block transforms now receives the block object (or block objects if `isMulti` is `true`) as its second argument.
 
 ## 11.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -83,7 +197,7 @@
 
 ## 9.1.0 (2021-05-20)
 
-### New API
+### New Features
 
 -   `registerBlockType` method can be used to register a block type using the metadata loaded from `block.json` file ([#32030](https://github.com/WordPress/gutenberg/pull/32030)).
 
@@ -98,37 +212,37 @@
 -   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/.
 
-### New API
+### New Features
 
 -   `registerBlockTypeFromMetadata` method can be used to register a block type using the metadata loaded from `block.json` file ([#30293](https://github.com/WordPress/gutenberg/pull/30293)).
 
 ## 8.0.0 (2021-03-17)
 
-### Breaking Change
+### Breaking Changes
 
 -   Reverted `cloneBlock` back to its original logic that doesn't sanitize block's attributes. [#28379](https://github.com/WordPress/gutenberg/pull/29111)
 
 ## 7.0.0 (2021-02-01)
 
-### Breaking Change
+### Breaking Changes
 
 -   `cloneBlock` now sanitizes the attributes to match the same logic `createBlock` has. [#28379](https://github.com/WordPress/gutenberg/pull/28379)
 
 ## 6.25.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the blocks namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
 ## 6.13.0 (2020-04-01)
 
-### New Feature
+### New Features
 
 -   Blocks can now be registered with an `defaultStylePicker` flag in the `supports` setting, allowing the default style picker to be removed.
 
 ## 6.4.0 (2019-08-05)
 
-### Improvements
+### Enhancements
 
 -   Omitting `attributes` or `keywords` settings will now stub default values (an empty object or empty array, respectively).
 
@@ -138,14 +252,14 @@
 
 ## 6.3.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Added a default implementation for `save` setting in `registerBlockType` which saves no markup in the post content.
 -   Added wildcard block transforms which allows for transforming all/any blocks in another block.
 
 ## 6.1.0 (2019-03-06)
 
-### New Feature
+### New Features
 
 -   Blocks' `transforms` will receive `innerBlocks` as the second argument (or an array of each block's respective `innerBlocks` for a multi-transform).
 
@@ -169,7 +283,7 @@
 
 -   `isValidBlock` has been removed. Please use `isValidBlockContent` instead but keep in mind that the order of params has changed.
 
-### Bug Fix
+### Bug Fixes
 
 -   The block validator is more lenient toward equivalent encoding forms.
 
@@ -177,7 +291,7 @@
 
 ## 5.3.0 (2018-11-09)
 
-### New feature
+### New Features
 
 -   `getBlockAttributes`, `getBlockTransforms`, `getSaveContent`, `getSaveElement` and `isValidBlockContent` methods can now take also block's name as the first param ([#11490](https://github.com/WordPress/gutenberg/pull/11490)). Passing a block's type object continues to work as before.
 -   `registerBlockStyles` and `unregisterBlockStyles` can be triggered at any moment (before or after block registration).
@@ -194,11 +308,11 @@
 
 ## 5.1.0 (2018-10-30)
 
-### New features
+### New Features
 
 -   `isValidBlockContent` function has been added ([#10891](https://github.com/WordPress/gutenberg/pull/10891)).
 
-### Deprecation
+### Deprecations
 
 -   `isValidBlock` function has been deprecated ([#10891](https://github.com/WordPress/gutenberg/pull/10891)). Use `isValidBlockContent` instead.
 
@@ -210,7 +324,7 @@
 -   `setUnknownTypeHandlerName` has been removed. Please use `setFreeformContentHandlerName` and `setUnregisteredTypeHandlerName` instead.
 -   `getUnknownTypeHandlerName` has been removed. Please use `getFreeformContentHandlerName` and `getUnregisteredTypeHandlerName` instead.
 
-### New Feature
+### New Features
 
 -   Added a `unregisterBlockStyle()` function to remove a block style variation.
 
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index f78783f7283392..f4805e1c60b381 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -4,7 +4,9 @@
 
 For more context, refer to [_What Are Little Blocks Made Of?_](https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of/) from the [Make WordPress Design](https://make.wordpress.org/design/) blog.
 
-The following documentation outlines steps you as a developer will need to follow to add your own custom blocks to WordPress's editor interfaces.
+<div class="callout callout-alert">
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">Learn how to create your first block</a> for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
+</div>
 
 ## Installation
 
@@ -16,177 +18,13 @@ npm install @wordpress/blocks --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._
 
-## Getting Started
-
-If you're not already accustomed to working with JavaScript in your WordPress plugins, you may first want to reference the guide on [_Including CSS & JavaScript_](https://developer.wordpress.org/themes/basics/including-css-javascript/) in the Theme Handbook.
-
-At a minimum, you will need to enqueue scripts for your block as part of a `enqueue_block_editor_assets` action callback, with a dependency on the `wp-blocks` and `wp-element` script handles:
-
-```php
-<?php
-// myplugin.php
-
-function myplugin_enqueue_block_editor_assets() {
-	wp_enqueue_script(
-		'myplugin-block',
-		plugins_url( 'block.js', __FILE__ ),
-		array( 'wp-blocks', 'wp-element' )
-	);
-}
-add_action( 'enqueue_block_editor_assets', 'myplugin_enqueue_block_editor_assets' );
-```
-
-The `enqueue_block_editor_assets` hook is only run in the Gutenberg editor context when the editor is ready to receive additional scripts and stylesheets. There is also an `enqueue_block_assets` hook which is run under **both** the editor and front-end contexts. This should be used to enqueue stylesheets common to the front-end and the editor. (The rules can be overridden in the editor-specific stylesheet if necessary.)
-
-The following sections will describe what you'll need to include in `block.js` to describe the behavior of your custom block.
-
-Note that all JavaScript code samples in this document are enclosed in a function that is evaluated immediately afterwards. We recommend using either ES6 modules [as used in this project](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/coding-guidelines.md#imports) (documentation on setting up a plugin with Webpack + ES6 modules coming soon) or these ["immediately-invoked function expressions"](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) as used in this document. Both of these methods ensure that your plugin's variables will not pollute the global `window` object, which could cause incompatibilities with WordPress core or with other plugins.
-
-## Example
-
-Let's imagine you wanted to define a block to show a randomly generated image in a post's content using [lorempixel.com](http://lorempixel.com/). The service provides a choice of category and you'd like to offer this as an option when editing the post.
-
-Take a step back and consider the ideal workflow for adding a new random image:
-
--   Insert the block. It should be shown in some empty state, with an option to choose a category in a select dropdown.
--   Upon confirming my selection, a preview of the image should be shown next to the dropdown.
-
-At this point, you might realize that while you'd want some controls to be shown when editing content, the markup included in the published post might not appear the same (your visitors should not see a dropdown field when reading your content).
-
-This leads to the first requirement of describing a block:
-
-**You will need to provide implementations both for what's to be shown in an editor and what's to be saved with the published content**.
-
-To eliminate redundant effort here, share common behaviors by splitting your code up into [components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/element/README.md).
-
-Now that we've considered user interaction, you should think about the underlying values that determine the markup generated by your block. In our example, the output is affected only when the category changes. Put another way: **the output of a block is a function of its attributes**.
-
-The category, a simple string, is the only thing we require to be able to generate the image we want to include in the published content. We call these underlying values of a block instance its **attributes**.
-
-With these concepts in mind, let's explore an implementation of our random image block:
-
-```php
-<?php
-// random-image.php
-
-function random_image_enqueue_block_editor_assets() {
-	wp_enqueue_script(
-		'random-image-block',
-		plugins_url( 'block.js', __FILE__ ),
-		array( 'wp-blocks', 'wp-element', 'wp-block-editor', )
-	);
-}
-add_action( 'enqueue_block_editor_assets', 'random_image_enqueue_block_editor_assets' );
-```
-
-```js
-// block.js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement,
-		source = blocks.source,
-		useBlockProps = blockEditor.useBlockProps;
-
-	function RandomImage( props ) {
-		var src = 'http://lorempixel.com/400/200/' + props.category;
-
-		return el( 'img', {
-			src: src,
-			alt: props.category,
-		} );
-	}
-
-	blocks.registerBlockType( 'myplugin/random-image', {
-		apiVersion: 2,
-
-		title: 'Random Image',
-
-		icon: 'format-image',
-
-		category: 'text',
-
-		attributes: {
-			category: {
-				type: 'string',
-				source: 'attribute',
-				attribute: 'alt',
-				selector: 'img',
-			},
-		},
-
-		edit: function ( props ) {
-			var blockProps = useBlockProps();
-			var category = props.attributes.category,
-				children;
-
-			function setCategory( event ) {
-				var selected = event.target.querySelector( 'option:checked' );
-				props.setAttributes( { category: selected.value } );
-				event.preventDefault();
-			}
-
-			children = [];
-			if ( category ) {
-				children.push( RandomImage( { category: category } ) );
-			}
-
-			children.push(
-				el(
-					'select',
-					{ value: category, onChange: setCategory },
-					el( 'option', null, '- Select -' ),
-					el( 'option', { value: 'sports' }, 'Sports' ),
-					el( 'option', { value: 'animals' }, 'Animals' ),
-					el( 'option', { value: 'nature' }, 'Nature' )
-				)
-			);
-
-			return el(
-				'form',
-				Object.assign( blockProps, { onSubmit: setCategory } ),
-				children
-			);
-		},
-
-		save: function ( props ) {
-			return RandomImage( { category: props.attributes.category } );
-		},
-	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
-```
-
-_[(Example in ES2015+, JSX)](https://gist.github.com/aduth/fb1cc9a2296110a62b96383e4b2e8a7c)_
-
-Let's briefly review a few items you might observe in the implementation:
-
--   When registering a new block, you must prefix its name with a namespace for
-    your plugin. This helps prevent conflicts when more than one plugin registers
-    a block with the same name.
--   You will use `createElement` to describe the structure of your block's
-    markup. See the [Element documentation](https://github.com/WordPress/gutenberg/tree/HEAD/packages/element/README.md) for more
-    information.
--   Extracting `RandomImage` to a separate function allows us to reuse it in both
-    the editor-specific interface and the published content.
--   The `edit` function should handle any case where an attribute is unset, as in
-    the case of the block being newly inserted.
--   We only change the attributes of a block by calling the `setAttributes`
-    helper. Never assign a value on the attributes object directly.
--   React provides conveniences for working with `select` element with
-    [`value` and `onChange` props](https://facebook.github.io/react/docs/forms.html#the-select-tag).
-
-By concerning yourself only with describing the markup of a block given its attributes, you need not worry about maintaining the state of the page, or how your block interacts in the context of the surrounding editor.
-
-But how does the markup become an object of attributes? We need a pattern for encoding the values into the published post's markup, and then retrieving them the next time the post is edited. This is the motivation for the block's `attributes` property. The shape of this object matches that of the attributes object we'd like to receive, where each value is a [**source**](http://github.com/aduth/hpq) which tries to find the desired value from the markup of the block.
-
-In the random image block above, we've given the `alt` attribute of the image a secondary responsibility of tracking the selected category. There are a few other ways we could have achieved this, but the category value happens to work well as an `alt` descriptor. In the `attributes` property, we define an object with a key of `category` whose value tries to find this `alt` attribute of the markup. If it's successful, the category's value in our `edit` and `save` functions will be assigned. In the case of a new block or invalid markup, this value would be `undefined`, so we adjust our return value accordingly.
-
 ## API
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
 ### cloneBlock
 
-Given a block object, returns a copy of the block object,
-optionally merging new attributes and/or replacing its inner blocks.
+Given a block object, returns a copy of the block object, optionally merging new attributes and/or replacing its inner blocks.
 
 _Parameters_
 
@@ -214,10 +52,7 @@ _Returns_
 
 ### createBlocksFromInnerBlocksTemplate
 
-Given an array of InnerBlocks templates or Block Objects,
-returns an array of created Blocks from them.
-It handles the case of having InnerBlocks as Blocks by
-converting them to the proper format to continue recursively.
+Given an array of InnerBlocks templates or Block Objects, returns an array of created Blocks from them. It handles the case of having InnerBlocks as Blocks by converting them to the proper format to continue recursively.
 
 _Parameters_
 
@@ -242,11 +77,7 @@ _Returns_
 
 ### findTransform
 
-Given an array of transforms, returns the highest-priority transform where
-the predicate function returns a truthy value. A higher-priority transform
-is one with a lower priority value (i.e. first in priority order). Returns
-null if the transforms set is empty or the predicate function returns a
-falsey value for all entries.
+Given an array of transforms, returns the highest-priority transform where the predicate function returns a truthy value. A higher-priority transform is one with a lower priority value (i.e. first in priority order). Returns null if the transforms set is empty or the predicate function returns a falsey value for all entries.
 
 _Parameters_
 
@@ -271,6 +102,47 @@ _Returns_
 
 -   `Object`: All block attributes.
 
+### getBlockAttributesNamesByRole
+
+Filter block attributes by `role` and return their names.
+
+_Parameters_
+
+-   _name_ `string`: Block attribute's name.
+-   _role_ `string`: The role of a block attribute.
+
+_Returns_
+
+-   `string[]`: The attribute names that have the provided role.
+
+### getBlockBindingsSource
+
+Returns a registered block bindings source by its name.
+
+_Parameters_
+
+-   _name_ `string`: Block bindings source name.
+
+_Returns_
+
+-   `?Object`: Block bindings source.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
+### getBlockBindingsSources
+
+Returns all registered block bindings sources.
+
+_Returns_
+
+-   `Array`: Block bindings sources.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
 ### getBlockContent
 
 Given a block object, returns the Block's Inner HTML markup.
@@ -336,10 +208,7 @@ _Returns_
 
 ### getBlockTransforms
 
-Returns normal block transforms for a given transform direction, optionally
-for a specific block by name, or an empty array if there are no transforms.
-If no block name is provided, returns transforms for all blocks. A normal
-transform object includes `blockName` as a property.
+Returns normal block transforms for a given transform direction, optionally for a specific block by name, or an empty array if there are no transforms. If no block name is provided, returns transforms for all blocks. A normal transform object includes `blockName` as a property.
 
 _Parameters_
 
@@ -392,8 +261,7 @@ _Returns_
 
 ### getFreeformContentHandlerName
 
-Retrieves name of block handling non-block content, or undefined if no
-handler has been defined.
+Retrieves name of block handling non-block content, or undefined if no handler has been defined.
 
 _Returns_
 
@@ -413,8 +281,7 @@ Undocumented declaration.
 
 ### getPossibleBlockTransformations
 
-Returns an array of block types that the set of blocks received as argument
-can be transformed into.
+Returns an array of block types that the set of blocks received as argument can be transformed into.
 
 _Parameters_
 
@@ -426,8 +293,7 @@ _Returns_
 
 ### getSaveContent
 
-Given a block type containing a save render implementation and attributes, returns the
-static markup to be saved.
+Given a block type containing a save render implementation and attributes, returns the static markup to be saved.
 
 _Parameters_
 
@@ -441,8 +307,7 @@ _Returns_
 
 ### getSaveElement
 
-Given a block type containing a save render implementation and attributes, returns the
-enhanced element to be saved or string when raw HTML expected.
+Given a block type containing a save render implementation and attributes, returns the enhanced element to be saved or string when raw HTML expected.
 
 _Parameters_
 
@@ -456,8 +321,7 @@ _Returns_
 
 ### getUnregisteredTypeHandlerName
 
-Retrieves name of block handling unregistered block types, or undefined if no
-handler has been defined.
+Retrieves name of block handling unregistered block types, or undefined if no handler has been defined.
 
 _Returns_
 
@@ -503,9 +367,7 @@ _Returns_
 
 ### isReusableBlock
 
-Determines whether or not the given block is a reusable block. This is a
-special block type that is used to point to a global block stored via the
-API.
+Determines whether or not the given block is a reusable block. This is a special block type that is used to point to a global block stored via the API.
 
 _Parameters_
 
@@ -517,9 +379,7 @@ _Returns_
 
 ### isTemplatePart
 
-Determines whether or not the given block is a template part. This is a
-special block type that allows composing a page template out of reusable
-design elements.
+Determines whether or not the given block is a template part. This is a special block type that allows composing a page template out of reusable design elements.
 
 _Parameters_
 
@@ -529,11 +389,21 @@ _Returns_
 
 -   `boolean`: Whether the given block is a template part.
 
+### isUnmodifiedBlock
+
+Determines whether the block's attributes are equal to the default attributes which means the block is unmodified.
+
+_Parameters_
+
+-   _block_ `WPBlock`: Block Object
+
+_Returns_
+
+-   `boolean`: Whether the block is an unmodified block.
+
 ### isUnmodifiedDefaultBlock
 
-Determines whether the block is a default block
-and its attributes are equal to the default attributes
-which means the block is unmodified.
+Determines whether the block is a default block and its attributes are equal to the default attributes which means the block is unmodified.
 
 _Parameters_
 
@@ -541,15 +411,13 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: Whether the block is an unmodified default block
+-   `boolean`: Whether the block is an unmodified default block.
 
 ### isValidBlockContent
 
 > **Deprecated** Use validateBlock instead to avoid data loss.
 
-Returns true if the parsed block is valid given the input content. A block
-is considered valid if, when serialized with assumed attributes, the content
-matches the original value.
+Returns true if the parsed block is valid given the input content. A block is considered valid if, when serialized with assumed attributes, the content matches the original value.
 
 Logs to console in development environments when invalid.
 
@@ -577,9 +445,7 @@ _Returns_
 
 ### normalizeIconObject
 
-Function that receives an icon as set by the blocks during the registration
-and returns a new icon object that is normalized so we can rely on just on possible icon structure
-in the codebase.
+Function that receives an icon as set by the blocks during the registration and returns a new icon object that is normalized so we can rely on just on possible icon structure in the codebase.
 
 _Parameters_
 
@@ -591,17 +457,9 @@ _Returns_
 
 ### parse
 
-Utilizes an optimized token-driven parser based on the Gutenberg grammar spec
-defined through a parsing expression grammar to take advantage of the regular
-cadence provided by block delimiters -- composed syntactically through HTML
-comments -- which, given a general HTML document as an input, returns a block
-list array representation.
+Utilizes an optimized token-driven parser based on the Gutenberg grammar spec defined through a parsing expression grammar to take advantage of the regular cadence provided by block delimiters -- composed syntactically through HTML comments -- which, given a general HTML document as an input, returns a block list array representation.
 
-This is a recursive-descent parser that scans linearly once through the input
-document. Instead of directly recursing it utilizes a trampoline mechanism to
-prevent stack overflow. This initial pass is mainly interested in separating
-and isolating the blocks serialized in the document and manifestly not in the
-content within the blocks.
+This is a recursive-descent parser that scans linearly once through the input document. Instead of directly recursing it utilizes a trampoline mechanism to prevent stack overflow. This initial pass is mainly interested in separating and isolating the blocks serialized in the document and manifestly not in the content within the blocks.
 
 _Related_
 
@@ -618,8 +476,7 @@ _Returns_
 
 ### parseWithAttributeSchema
 
-Given a block's raw content and an attribute's schema returns the attribute's
-value depending on its source.
+Given a block's raw content and an attribute's schema returns the attribute's value depending on its source.
 
 _Parameters_
 
@@ -641,12 +498,15 @@ _Parameters_
 -   _options.plainText_ `[string]`: Plain text version.
 -   _options.mode_ `[string]`: Handle content as blocks or inline content. _ 'AUTO': Decide based on the content passed. _ 'INLINE': Always handle as inline content, and return string. \* 'BLOCKS': Always handle as blocks, and return array of blocks.
 -   _options.tagName_ `[Array]`: The tag into which content will be inserted.
--   _options.preserveWhiteSpace_ `[boolean]`: Whether or not to preserve consequent white space.
 
 _Returns_
 
 -   `Array|string`: A list of blocks or a string, depending on `handlerMode`.
 
+### privateApis
+
+Undocumented declaration.
+
 ### rawHandler
 
 Converts an HTML string to known blocks.
@@ -660,6 +520,40 @@ _Returns_
 
 -   `Array`: A list of blocks.
 
+### registerBlockBindingsSource
+
+Registers a new block bindings source with an object defining its behavior. Once registered, the source is available to be connected to the supported block attributes.
+
+_Usage_
+
+```js
+import { _x } from '@wordpress/i18n';
+import { registerBlockBindingsSource } from '@wordpress/blocks';
+
+registerBlockBindingsSource( {
+	name: 'plugin/my-custom-source',
+	label: _x( 'My Custom Source', 'block bindings source' ),
+	usesContext: [ 'postType' ],
+	getValues: getSourceValues,
+	setValues: updateMyCustomValuesInBatch,
+	canUserEditValue: () => true,
+} );
+```
+
+_Parameters_
+
+-   _source_ `Object`: Properties of the source to be registered.
+-   _source.name_ `string`: The unique and machine-readable name.
+-   _source.label_ `[string]`: Human-readable label. Optional when it is defined in the server.
+-   _source.usesContext_ `[Array]`: Optional array of context needed by the source only in the editor.
+-   _source.getValues_ `[Function]`: Optional function to get the values from the source.
+-   _source.setValues_ `[Function]`: Optional function to update multiple values connected to the source.
+-   _source.canUserEditValue_ `[Function]`: Optional function to determine if the user can edit the value.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
 ### registerBlockCollection
 
 Registers a new block collection to group blocks in the same namespace in the inserter.
@@ -692,9 +586,9 @@ _Parameters_
 
 ### registerBlockStyle
 
-Registers a new block style for the given block.
+Registers a new block style for the given block types.
 
-For more information on connecting the styles with CSS [the official documentation](/docs/reference-guides/block-api/block-styles.md#styles)
+For more information on connecting the styles with CSS [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
 
 _Usage_
 
@@ -721,16 +615,14 @@ const ExampleComponent = () => {
 
 _Parameters_
 
--   _blockName_ `string`: Name of block (example: “core/latest-posts”).
+-   _blockNames_ `string|Array`: Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
 -   _styleVariation_ `Object`: Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
 
 ### registerBlockType
 
-Registers a new block provided a unique name and an object defining its
-behavior. Once registered, the block is made available as an option to any
-editor interface where blocks are implemented.
+Registers a new block provided a unique name and an object defining its behavior. Once registered, the block is made available as an option to any editor interface where blocks are implemented.
 
-For more in-depth information on registering a custom block see the [Create a block tutorial](docs/how-to-guides/block-tutorial/README.md)
+For more in-depth information on registering a custom block see the [Create a block tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/).
 
 _Usage_
 
@@ -752,13 +644,13 @@ _Parameters_
 
 _Returns_
 
--   `?WPBlockType`: The block, if it has been successfully registered; otherwise `undefined`.
+-   `WPBlockType | undefined`: The block, if it has been successfully registered; otherwise `undefined`.
 
 ### registerBlockVariation
 
 Registers a new block variation for the given block type.
 
-For more information on block variations see [the official documentation ](/docs/reference-guides/block-api/block-variations.md)
+For more information on block variations see [the official documentation ](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/).
 
 _Usage_
 
@@ -804,11 +696,7 @@ _Returns_
 
 ### serializeRawBlock
 
-Serializes a block node into the native HTML-comment-powered block format.
-CAVEAT: This function is intended for re-serializing blocks as parsed by
-valid parsers and skips any validation steps. This is NOT a generic
-serialization function for in-memory blocks. For most purposes, see the
-following functions available in the `@wordpress/blocks` package:
+Serializes a block node into the native HTML-comment-powered block format. CAVEAT: This function is intended for re-serializing blocks as parsed by valid parsers and skips any validation steps. This is NOT a generic serialization function for in-memory blocks. For most purposes, see the following functions available in the `@wordpress/blocks` package:
 
 _Related_
 
@@ -899,6 +787,8 @@ _Parameters_
 
 Assigns name of block for handling block grouping interactions.
 
+This function lets you select a different block to group other blocks in instead of the default `core/group` block. This function must be used in a component or when the DOM is fully loaded. See <https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dom-ready/>
+
 _Usage_
 
 ```js
@@ -907,7 +797,7 @@ import { setGroupingBlockName } from '@wordpress/blocks';
 const ExampleComponent = () => {
 	return (
 		<Button onClick={ () => setGroupingBlockName( 'core/columns' ) }>
-			{ __( 'Set the default block to Heading' ) }
+			{ __( 'Wrap in columns' ) }
 		</Button>
 	);
 };
@@ -954,10 +844,7 @@ _Returns_
 
 Synchronize a block list with a block template.
 
-Synchronizing a block list with a block template means that we loop over the blocks
-keep the block as is if it matches the block at the same position in the template
-(If it has the same name) and if doesn't match, we create a new block based on the template.
-Extra blocks not present in the template are removed.
+Synchronizing a block list with a block template means that we loop over the blocks keep the block as is if it matches the block at the same position in the template (If it has the same name) and if doesn't match, we create a new block based on the template. Extra blocks not present in the template are removed.
 
 _Parameters_
 
@@ -968,6 +855,26 @@ _Returns_
 
 -   `Array`: Updated Block list.
 
+### unregisterBlockBindingsSource
+
+Unregisters a block bindings source by providing its name.
+
+_Usage_
+
+```js
+import { unregisterBlockBindingsSource } from '@wordpress/blocks';
+
+unregisterBlockBindingsSource( 'plugin/my-custom-source' );
+```
+
+_Parameters_
+
+-   _name_ `string`: The name of the block bindings source to unregister.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
 ### unregisterBlockStyle
 
 Unregisters a block style for the given block.
@@ -1024,7 +931,7 @@ _Parameters_
 
 _Returns_
 
--   `?WPBlockType`: The previous block value, if it has been successfully unregistered; otherwise `undefined`.
+-   `WPBlockType | undefined`: The previous block value, if it has been successfully unregistered; otherwise `undefined`.
 
 ### unregisterBlockVariation
 
@@ -1086,10 +993,7 @@ _Parameters_
 
 ### validateBlock
 
-Returns an object with `isValid` property set to `true` if the parsed block
-is valid given the input content. A block is considered valid if, when serialized
-with assumed attributes, the content matches the original value. If block is
-invalid, this function returns all validations issues as well.
+Returns an object with `isValid` property set to `true` if the parsed block is valid given the input content. A block is considered valid if, when serialized with assumed attributes, the content matches the original value. If block is invalid, this function returns all validations issues as well.
 
 _Parameters_
 
@@ -1104,16 +1008,15 @@ _Returns_
 
 > **Deprecated**
 
-A Higher Order Component used to inject BlockContent using context to the
-wrapped component.
+A Higher Order Component used to inject BlockContent using context to the wrapped component.
 
 _Parameters_
 
--   _OriginalComponent_ `WPComponent`: The component to enhance.
+-   _OriginalComponent_ `Component`: The component to enhance.
 
 _Returns_
 
--   `WPComponent`: The same component.
+-   `Component`: The same component.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index b67f0e6266e056..02f7784ac15aa6 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "11.21.0",
+	"version": "14.2.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,43 +19,47 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/autop": "file:../autop",
-		"@wordpress/blob": "file:../blob",
-		"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/shortcode": "file:../shortcode",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/autop": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-serialization-default-parser": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/shortcode": "*",
+		"@wordpress/warning": "*",
 		"change-case": "^4.1.2",
 		"colord": "^2.7.0",
+		"fast-deep-equal": "^3.1.3",
 		"hpq": "^1.3.0",
 		"is-plain-object": "^5.0.0",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
-		"rememo": "^4.0.0",
-		"remove-accents": "^0.4.2",
+		"memize": "^2.1.0",
+		"react-is": "^18.3.0",
+		"remove-accents": "^0.5.0",
 		"showdown": "^1.9.1",
 		"simple-html-tokenizer": "^0.5.7",
-		"uuid": "^8.3.0"
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/blocks/src/api/children.js b/packages/blocks/src/api/children.js
index 8d0b3488017d5d..fe46a30870af97 100644
--- a/packages/blocks/src/api/children.js
+++ b/packages/blocks/src/api/children.js
@@ -20,7 +20,7 @@ import * as node from './node';
  *
  * @param {WPBlockChildren} children Block children object to convert.
  *
- * @return {WPElement} A serialize-capable element.
+ * @return {Element} A serialize-capable element.
  */
 export function getSerializeCapableElement( children ) {
 	// The fact that block children are compatible with the element serializer is
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index 28801b3cf4882e..aaf6558c47bada 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -20,6 +20,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'color', 'link' ],
 		support: [ 'color', 'link' ],
 	},
+	aspectRatio: {
+		value: [ 'dimensions', 'aspectRatio' ],
+		support: [ 'dimensions', 'aspectRatio' ],
+		useEngine: true,
+	},
 	background: {
 		value: [ 'color', 'gradient' ],
 		support: [ 'color', 'gradients' ],
@@ -31,14 +36,34 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		requiresOptOut: true,
 		useEngine: true,
 	},
+	backgroundImage: {
+		value: [ 'background', 'backgroundImage' ],
+		support: [ 'background', 'backgroundImage' ],
+		useEngine: true,
+	},
+	backgroundRepeat: {
+		value: [ 'background', 'backgroundRepeat' ],
+		support: [ 'background', 'backgroundRepeat' ],
+		useEngine: true,
+	},
+	backgroundSize: {
+		value: [ 'background', 'backgroundSize' ],
+		support: [ 'background', 'backgroundSize' ],
+		useEngine: true,
+	},
+	backgroundPosition: {
+		value: [ 'background', 'backgroundPosition' ],
+		support: [ 'background', 'backgroundPosition' ],
+		useEngine: true,
+	},
 	borderColor: {
 		value: [ 'border', 'color' ],
-		support: [ '__experimentalBorder', 'color' ],
+		support: [ 'border', 'color' ],
 		useEngine: true,
 	},
 	borderRadius: {
 		value: [ 'border', 'radius' ],
-		support: [ '__experimentalBorder', 'radius' ],
+		support: [ 'border', 'radius' ],
 		properties: {
 			borderTopLeftRadius: 'topLeft',
 			borderTopRightRadius: 'topRight',
@@ -49,72 +74,72 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	borderStyle: {
 		value: [ 'border', 'style' ],
-		support: [ '__experimentalBorder', 'style' ],
+		support: [ 'border', 'style' ],
 		useEngine: true,
 	},
 	borderWidth: {
 		value: [ 'border', 'width' ],
-		support: [ '__experimentalBorder', 'width' ],
+		support: [ 'border', 'width' ],
 		useEngine: true,
 	},
 	borderTopColor: {
 		value: [ 'border', 'top', 'color' ],
-		support: [ '__experimentalBorder', 'color' ],
+		support: [ 'border', 'color' ],
 		useEngine: true,
 	},
 	borderTopStyle: {
 		value: [ 'border', 'top', 'style' ],
-		support: [ '__experimentalBorder', 'style' ],
+		support: [ 'border', 'style' ],
 		useEngine: true,
 	},
 	borderTopWidth: {
 		value: [ 'border', 'top', 'width' ],
-		support: [ '__experimentalBorder', 'width' ],
+		support: [ 'border', 'width' ],
 		useEngine: true,
 	},
 	borderRightColor: {
 		value: [ 'border', 'right', 'color' ],
-		support: [ '__experimentalBorder', 'color' ],
+		support: [ 'border', 'color' ],
 		useEngine: true,
 	},
 	borderRightStyle: {
 		value: [ 'border', 'right', 'style' ],
-		support: [ '__experimentalBorder', 'style' ],
+		support: [ 'border', 'style' ],
 		useEngine: true,
 	},
 	borderRightWidth: {
 		value: [ 'border', 'right', 'width' ],
-		support: [ '__experimentalBorder', 'width' ],
+		support: [ 'border', 'width' ],
 		useEngine: true,
 	},
 	borderBottomColor: {
 		value: [ 'border', 'bottom', 'color' ],
-		support: [ '__experimentalBorder', 'color' ],
+		support: [ 'border', 'color' ],
 		useEngine: true,
 	},
 	borderBottomStyle: {
 		value: [ 'border', 'bottom', 'style' ],
-		support: [ '__experimentalBorder', 'style' ],
+		support: [ 'border', 'style' ],
 		useEngine: true,
 	},
 	borderBottomWidth: {
 		value: [ 'border', 'bottom', 'width' ],
-		support: [ '__experimentalBorder', 'width' ],
+		support: [ 'border', 'width' ],
 		useEngine: true,
 	},
 	borderLeftColor: {
 		value: [ 'border', 'left', 'color' ],
-		support: [ '__experimentalBorder', 'color' ],
+		support: [ 'border', 'color' ],
 		useEngine: true,
 	},
 	borderLeftStyle: {
 		value: [ 'border', 'left', 'style' ],
-		support: [ '__experimentalBorder', 'style' ],
+		support: [ 'border', 'style' ],
 		useEngine: true,
 	},
 	borderLeftWidth: {
 		value: [ 'border', 'left', 'width' ],
-		support: [ '__experimentalBorder', 'width' ],
+		support: [ 'border', 'width' ],
 		useEngine: true,
 	},
 	color: {
@@ -123,14 +148,23 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		requiresOptOut: true,
 		useEngine: true,
 	},
+	columnCount: {
+		value: [ 'typography', 'textColumns' ],
+		support: [ 'typography', 'textColumns' ],
+		useEngine: true,
+	},
 	filter: {
 		value: [ 'filter', 'duotone' ],
-		support: [ 'color', '__experimentalDuotone' ],
+		support: [ 'filter', 'duotone' ],
 	},
 	linkColor: {
 		value: [ 'elements', 'link', 'color', 'text' ],
 		support: [ 'color', 'link' ],
 	},
+	captionColor: {
+		value: [ 'elements', 'caption', 'color', 'text' ],
+		support: [ 'color', 'caption' ],
+	},
 	buttonColor: {
 		value: [ 'elements', 'button', 'color', 'text' ],
 		support: [ 'color', 'button' ],
@@ -139,9 +173,17 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		value: [ 'elements', 'button', 'color', 'background' ],
 		support: [ 'color', 'button' ],
 	},
+	headingColor: {
+		value: [ 'elements', 'heading', 'color', 'text' ],
+		support: [ 'color', 'heading' ],
+	},
+	headingBackgroundColor: {
+		value: [ 'elements', 'heading', 'color', 'background' ],
+		support: [ 'color', 'heading' ],
+	},
 	fontFamily: {
 		value: [ 'typography', 'fontFamily' ],
-		support: [ 'typography', '__experimentalFontFamily' ],
+		support: [ 'typography', 'fontFamily' ],
 		useEngine: true,
 	},
 	fontSize: {
@@ -151,12 +193,12 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	fontStyle: {
 		value: [ 'typography', 'fontStyle' ],
-		support: [ 'typography', '__experimentalFontStyle' ],
+		support: [ 'typography', 'fontStyle' ],
 		useEngine: true,
 	},
 	fontWeight: {
 		value: [ 'typography', 'fontWeight' ],
-		support: [ 'typography', '__experimentalFontWeight' ],
+		support: [ 'typography', 'fontWeight' ],
 		useEngine: true,
 	},
 	lineHeight: {
@@ -191,19 +233,29 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 		},
 		useEngine: true,
 	},
+	textAlign: {
+		value: [ 'typography', 'textAlign' ],
+		support: [ 'typography', 'textAlign' ],
+		useEngine: false,
+	},
 	textDecoration: {
 		value: [ 'typography', 'textDecoration' ],
-		support: [ 'typography', '__experimentalTextDecoration' ],
+		support: [ 'typography', 'textDecoration' ],
 		useEngine: true,
 	},
 	textTransform: {
 		value: [ 'typography', 'textTransform' ],
-		support: [ 'typography', '__experimentalTextTransform' ],
+		support: [ 'typography', 'textTransform' ],
 		useEngine: true,
 	},
 	letterSpacing: {
 		value: [ 'typography', 'letterSpacing' ],
-		support: [ 'typography', '__experimentalLetterSpacing' ],
+		support: [ 'typography', 'letterSpacing' ],
+		useEngine: true,
+	},
+	writingMode: {
+		value: [ 'typography', 'writingMode' ],
+		support: [ 'typography', '__experimentalWritingMode' ],
 		useEngine: true,
 	},
 	'--wp--style--root--padding': {
@@ -220,7 +272,7 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 };
 
 export const __EXPERIMENTAL_ELEMENTS = {
-	link: 'a',
+	link: 'a:where(:not(.wp-element-button))',
 	heading: 'h1, h2, h3, h4, h5, h6',
 	h1: 'h1',
 	h2: 'h2',
@@ -234,11 +286,34 @@ export const __EXPERIMENTAL_ELEMENTS = {
 	cite: 'cite',
 };
 
-export const __EXPERIMENTAL_PATHS_WITH_MERGE = {
+// These paths may have three origins, custom, theme, and default,
+// and are expected to override other origins with custom, theme,
+// and default priority.
+export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = {
 	'color.duotone': true,
 	'color.gradients': true,
 	'color.palette': true,
-	'typography.fontFamilies': true,
+	'dimensions.aspectRatios': true,
 	'typography.fontSizes': true,
 	'spacing.spacingSizes': true,
 };
+
+export const EXPERIMENTAL_SUPPORTS_MAP = {
+	__experimentalBorder: 'border',
+};
+
+export const COMMON_EXPERIMENTAL_PROPERTIES = {
+	__experimentalDefaultControls: 'defaultControls',
+	__experimentalSkipSerialization: 'skipSerialization',
+};
+
+export const EXPERIMENTAL_SUPPORT_PROPERTIES = {
+	typography: {
+		__experimentalFontFamily: 'fontFamily',
+		__experimentalFontStyle: 'fontStyle',
+		__experimentalFontWeight: 'fontWeight',
+		__experimentalLetterSpacing: 'letterSpacing',
+		__experimentalTextDecoration: 'textDecoration',
+		__experimentalTextTransform: 'textTransform',
+	},
+};
diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
index fed5071e47bd2e..25bf64ca65dc90 100644
--- a/packages/blocks/src/api/factory.js
+++ b/packages/blocks/src/api/factory.js
@@ -211,14 +211,6 @@ const isPossibleTransformForSource = ( transform, direction, blocks ) => {
 		return false;
 	}
 
-	if (
-		transform.usingMobileTransformations &&
-		isWildcardBlockTransform( transform ) &&
-		! isContainerGroupBlock( sourceBlock.name )
-	) {
-		return false;
-	}
-
 	return true;
 };
 
@@ -286,9 +278,7 @@ const getBlockTypesForPossibleToTransforms = ( blocks ) => {
 		.flat();
 
 	// Map block names to block types.
-	return blockNames.map( ( name ) =>
-		name === '*' ? name : getBlockType( name )
-	);
+	return blockNames.map( getBlockType );
 };
 
 /**
@@ -412,6 +402,10 @@ export function getBlockTransforms( direction, blockTypeOrName ) {
 					return true;
 				}
 
+				if ( t.type === 'prefix' ) {
+					return true;
+				}
+
 				if ( ! t.blocks || ! t.blocks.length ) {
 					return false;
 				}
@@ -481,7 +475,8 @@ export function switchToBlockType( blocks, name ) {
 			transformationsTo,
 			( t ) =>
 				t.type === 'block' &&
-				t.blocks.indexOf( name ) !== -1 &&
+				( isWildcardBlockTransform( t ) ||
+					t.blocks.indexOf( name ) !== -1 ) &&
 				( ! isMultiBlock || t.isMultiBlock ) &&
 				maybeCheckTransformIsMatch( t, blocksArray )
 		) ||
@@ -547,12 +542,6 @@ export function switchToBlockType( blocks, name ) {
 		return null;
 	}
 
-	// When unwrapping blocks (`switchToBlockType( wrapperblocks, '*' )`), do
-	// not run filters on the unwrapped blocks. They shoud remain as they are.
-	if ( name === '*' ) {
-		return transformationResults;
-	}
-
 	const hasSwitchedBlock = transformationResults.some(
 		( result ) => result.name === name
 	);
@@ -595,11 +584,19 @@ export function switchToBlockType( blocks, name ) {
  * @return {Object} block.
  */
 export const getBlockFromExample = ( name, example ) => {
-	return createBlock(
-		name,
-		example.attributes,
-		( example.innerBlocks ?? [] ).map( ( innerBlock ) =>
-			getBlockFromExample( innerBlock.name, innerBlock )
-		)
-	);
+	try {
+		return createBlock(
+			name,
+			example.attributes,
+			( example.innerBlocks ?? [] ).map( ( innerBlock ) =>
+				getBlockFromExample( innerBlock.name, innerBlock )
+			)
+		);
+	} catch {
+		return createBlock( 'core/missing', {
+			originalName: name,
+			originalContent: '',
+			originalUndelimitedContent: '',
+		} );
+	}
 };
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index afa11f82c6b6ba..a03a58d8f9b21c 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -1,3 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { lock } from '../lock-unlock';
+import { isContentBlock } from './utils';
+
 // The blocktype is the most important concept within the block API. It defines
 // all aspects of the block configuration and its interfaces, including `edit`
 // and `save`. The transforms specification allows converting one blocktype to
@@ -135,14 +141,20 @@ export {
 	unregisterBlockStyle,
 	registerBlockVariation,
 	unregisterBlockVariation,
+	registerBlockBindingsSource,
+	unregisterBlockBindingsSource,
+	getBlockBindingsSource,
+	getBlockBindingsSources,
 } from './registration';
 export {
+	isUnmodifiedBlock,
 	isUnmodifiedDefaultBlock,
 	normalizeIconObject,
 	isValidIcon,
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
 	__experimentalSanitizeBlockAttributes,
+	getBlockAttributesNamesByRole,
 	__experimentalGetBlockAttributesNamesByRole,
 } from './utils';
 
@@ -161,5 +173,8 @@ export { default as node } from './node';
 export {
 	__EXPERIMENTAL_STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS,
-	__EXPERIMENTAL_PATHS_WITH_MERGE,
+	__EXPERIMENTAL_PATHS_WITH_OVERRIDE,
 } from './constants';
+
+export const privateApis = {};
+lock( privateApis, { isContentBlock } );
diff --git a/packages/blocks/src/api/matchers.js b/packages/blocks/src/api/matchers.js
index 7a6ac84891658a..950f1539440a0b 100644
--- a/packages/blocks/src/api/matchers.js
+++ b/packages/blocks/src/api/matchers.js
@@ -3,6 +3,11 @@
  */
 export { attr, prop, text, query } from 'hpq';
 
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
@@ -41,3 +46,10 @@ export function html( selector, multilineTag ) {
 		return match.innerHTML;
 	};
 }
+
+export const richText = ( selector, preserveWhiteSpace ) => ( el ) => {
+	const target = selector ? el.querySelector( selector ) : el;
+	return target
+		? RichTextData.fromHTMLElement( target, { preserveWhiteSpace } )
+		: RichTextData.empty();
+};
diff --git a/packages/blocks/src/api/parser/apply-block-deprecated-versions.js b/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
index 2a3e880a3f7460..6c9d81d47b0316 100644
--- a/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
+++ b/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
@@ -50,7 +50,10 @@ export function applyBlockDeprecatedVersions( block, rawBlock, blockType ) {
 		const { isEligible = stubFalse } = deprecatedDefinitions[ i ];
 		if (
 			block.isValid &&
-			! isEligible( parsedAttributes, block.innerBlocks )
+			! isEligible( parsedAttributes, block.innerBlocks, {
+				blockNode: rawBlock,
+				block,
+			} )
 		) {
 			continue;
 		}
diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js
index c993d450099912..1ddec1d8b3448d 100644
--- a/packages/blocks/src/api/parser/convert-legacy-block.js
+++ b/packages/blocks/src/api/parser/convert-legacy-block.js
@@ -77,5 +77,91 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) {
 		newAttributes.legacy = true;
 	}
 
+	// Column count was stored as a string from WP 6.3-6.6. Convert it to a number.
+	if (
+		attributes.layout?.type === 'grid' &&
+		typeof attributes.layout?.columnCount === 'string'
+	) {
+		newAttributes.layout = {
+			...newAttributes.layout,
+			columnCount: parseInt( attributes.layout.columnCount, 10 ),
+		};
+	}
+
+	// Column span and row span were stored as strings in WP 6.6. Convert them to numbers.
+	if ( typeof attributes.style?.layout?.columnSpan === 'string' ) {
+		const columnSpanNumber = parseInt(
+			attributes.style.layout.columnSpan,
+			10
+		);
+		newAttributes.style = {
+			...newAttributes.style,
+			layout: {
+				...newAttributes.style.layout,
+				columnSpan: isNaN( columnSpanNumber )
+					? undefined
+					: columnSpanNumber,
+			},
+		};
+	}
+	if ( typeof attributes.style?.layout?.rowSpan === 'string' ) {
+		const rowSpanNumber = parseInt( attributes.style.layout.rowSpan, 10 );
+		newAttributes.style = {
+			...newAttributes.style,
+			layout: {
+				...newAttributes.style.layout,
+				rowSpan: isNaN( rowSpanNumber ) ? undefined : rowSpanNumber,
+			},
+		};
+	}
+
+	// The following code is only relevant for the Gutenberg plugin.
+	// It's a stand-alone if statement for dead-code elimination.
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		// Convert pattern overrides added during experimental phase.
+		// Only four blocks were supported initially.
+		// These checks can be removed in WordPress 6.6.
+		if (
+			newAttributes.metadata?.bindings &&
+			( name === 'core/paragraph' ||
+				name === 'core/heading' ||
+				name === 'core/image' ||
+				name === 'core/button' ) &&
+			newAttributes.metadata.bindings.__default?.source !==
+				'core/pattern-overrides'
+		) {
+			const bindings = [
+				'content',
+				'url',
+				'title',
+				'id',
+				'alt',
+				'text',
+				'linkTarget',
+			];
+			// Delete any existing individual bindings and add a default binding.
+			// It was only possible to add all the default attributes through the UI,
+			// So as soon as we find an attribute, we can assume all default attributes are overridable.
+			let hasPatternOverrides = false;
+			bindings.forEach( ( binding ) => {
+				if (
+					newAttributes.metadata.bindings[ binding ]?.source ===
+					'core/pattern-overrides'
+				) {
+					hasPatternOverrides = true;
+					newAttributes.metadata = {
+						...newAttributes.metadata,
+						bindings: { ...newAttributes.metadata.bindings },
+					};
+					delete newAttributes.metadata.bindings[ binding ];
+				}
+			} );
+			if ( hasPatternOverrides ) {
+				newAttributes.metadata.bindings.__default = {
+					source: 'core/pattern-overrides',
+				};
+			}
+		}
+	}
 	return [ name, newAttributes ];
 }
diff --git a/packages/blocks/src/api/parser/fix-custom-classname.js b/packages/blocks/src/api/parser/fix-custom-classname.js
index d72065cd59222b..78f04ea4a00fa5 100644
--- a/packages/blocks/src/api/parser/fix-custom-classname.js
+++ b/packages/blocks/src/api/parser/fix-custom-classname.js
@@ -42,27 +42,30 @@ export function getHTMLRootElementClasses( innerHTML ) {
  * @return {Object} Filtered block attributes.
  */
 export function fixCustomClassname( blockAttributes, blockType, innerHTML ) {
-	if ( hasBlockSupport( blockType, 'customClassName', true ) ) {
-		// To determine difference, serialize block given the known set of
-		// attributes, with the exception of `className`. This will determine
-		// the default set of classes. From there, any difference in innerHTML
-		// can be considered as custom classes.
-		const { className: omittedClassName, ...attributesSansClassName } =
-			blockAttributes;
-		const serialized = getSaveContent( blockType, attributesSansClassName );
-		const defaultClasses = getHTMLRootElementClasses( serialized );
-		const actualClasses = getHTMLRootElementClasses( innerHTML );
+	if ( ! hasBlockSupport( blockType, 'customClassName', true ) ) {
+		return blockAttributes;
+	}
+
+	const modifiedBlockAttributes = { ...blockAttributes };
+	// To determine difference, serialize block given the known set of
+	// attributes, with the exception of `className`. This will determine
+	// the default set of classes. From there, any difference in innerHTML
+	// can be considered as custom classes.
+	const { className: omittedClassName, ...attributesSansClassName } =
+		modifiedBlockAttributes;
+	const serialized = getSaveContent( blockType, attributesSansClassName );
+	const defaultClasses = getHTMLRootElementClasses( serialized );
+	const actualClasses = getHTMLRootElementClasses( innerHTML );
 
-		const customClasses = actualClasses.filter(
-			( className ) => ! defaultClasses.includes( className )
-		);
+	const customClasses = actualClasses.filter(
+		( className ) => ! defaultClasses.includes( className )
+	);
 
-		if ( customClasses.length ) {
-			blockAttributes.className = customClasses.join( ' ' );
-		} else if ( serialized ) {
-			delete blockAttributes.className;
-		}
+	if ( customClasses.length ) {
+		modifiedBlockAttributes.className = customClasses.join( ' ' );
+	} else if ( serialized ) {
+		delete modifiedBlockAttributes.className;
 	}
 
-	return blockAttributes;
+	return modifiedBlockAttributes;
 }
diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
index b9fd3dcf675082..36ea86399329e1 100644
--- a/packages/blocks/src/api/parser/get-block-attributes.js
+++ b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -2,20 +2,28 @@
  * External dependencies
  */
 import { parse as hpqParse } from 'hpq';
-import { mapValues } from 'lodash';
 import memoize from 'memize';
 
 /**
  * WordPress dependencies
  */
-import { pipe } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
+import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
-import { attr, html, text, query, node, children, prop } from '../matchers';
-import { normalizeBlockType } from '../utils';
+import {
+	attr,
+	html,
+	text,
+	query,
+	node,
+	children,
+	prop,
+	richText,
+} from '../matchers';
+import { normalizeBlockType, getDefault } from '../utils';
 
 /**
  * Higher-order hpq matcher which enhances an attribute matcher to return true
@@ -28,24 +36,8 @@ import { normalizeBlockType } from '../utils';
  *
  * @return {Function} Enhanced hpq matcher.
  */
-export const toBooleanAttributeMatcher = ( matcher ) =>
-	pipe( [
-		matcher,
-		// Expected values from `attr( 'disabled' )`:
-		//
-		// <input>
-		// - Value:       `undefined`
-		// - Transformed: `false`
-		//
-		// <input disabled>
-		// - Value:       `''`
-		// - Transformed: `true`
-		//
-		// <input disabled="disabled">
-		// - Value:       `'disabled'`
-		// - Transformed: `true`
-		( value ) => value !== undefined,
-	] );
+export const toBooleanAttributeMatcher = ( matcher ) => ( value ) =>
+	matcher( value ) !== undefined;
 
 /**
  * Returns true if value is of the given JSON schema type, or false otherwise.
@@ -59,6 +51,9 @@ export const toBooleanAttributeMatcher = ( matcher ) =>
  */
 export function isOfType( value, type ) {
 	switch ( type ) {
+		case 'rich-text':
+			return value instanceof RichTextData;
+
 		case 'string':
 			return typeof value === 'string';
 
@@ -102,18 +97,20 @@ 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 {string|Node} innerHTML         Block's raw content.
- * @param {Object}      commentAttributes Block's comment attributes.
+ * @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.
  */
 export function getBlockAttribute(
 	attributeKey,
 	attributeSchema,
-	innerHTML,
-	commentAttributes
+	innerDOM,
+	commentAttributes,
+	innerHTML
 ) {
 	let value;
 
@@ -125,15 +122,20 @@ export function getBlockAttribute(
 				? commentAttributes[ attributeKey ]
 				: undefined;
 			break;
+		// raw source means that it's the original raw block content.
+		case 'raw':
+			value = innerHTML;
+			break;
 		case 'attribute':
 		case 'property':
 		case 'html':
 		case 'text':
+		case 'rich-text':
 		case 'children':
 		case 'node':
 		case 'query':
 		case 'tag':
-			value = parseWithAttributeSchema( innerHTML, attributeSchema );
+			value = parseWithAttributeSchema( innerDOM, attributeSchema );
 			break;
 	}
 
@@ -147,7 +149,7 @@ export function getBlockAttribute(
 	}
 
 	if ( value === undefined ) {
-		value = attributeSchema.default;
+		value = getDefault( attributeSchema );
 	}
 
 	return value;
@@ -195,33 +197,40 @@ export function isValidByEnum( value, enumSet ) {
  */
 export const matcherFromSource = memoize( ( sourceConfig ) => {
 	switch ( sourceConfig.source ) {
-		case 'attribute':
+		case 'attribute': {
 			let matcher = attr( sourceConfig.selector, sourceConfig.attribute );
 			if ( sourceConfig.type === 'boolean' ) {
 				matcher = toBooleanAttributeMatcher( matcher );
 			}
-
 			return matcher;
+		}
 		case 'html':
 			return html( sourceConfig.selector, sourceConfig.multiline );
 		case 'text':
 			return text( sourceConfig.selector );
+		case 'rich-text':
+			return richText(
+				sourceConfig.selector,
+				sourceConfig.__unstablePreserveWhiteSpace
+			);
 		case 'children':
 			return children( sourceConfig.selector );
 		case 'node':
 			return node( sourceConfig.selector );
 		case 'query':
-			const subMatchers = mapValues(
-				sourceConfig.query,
-				matcherFromSource
+			const subMatchers = Object.fromEntries(
+				Object.entries( sourceConfig.query ).map(
+					( [ key, subSourceConfig ] ) => [
+						key,
+						matcherFromSource( subSourceConfig ),
+					]
+				)
 			);
 			return query( sourceConfig.selector, subMatchers );
-		case 'tag':
-			return pipe( [
-				prop( sourceConfig.selector, 'nodeName' ),
-				( nodeName ) =>
-					nodeName ? nodeName.toLowerCase() : undefined,
-			] );
+		case 'tag': {
+			const matcher = prop( sourceConfig.selector, 'nodeName' );
+			return ( domNode ) => matcher( domNode )?.toLowerCase();
+		}
 		default:
 			// eslint-disable-next-line no-console
 			console.error( `Unknown source type "${ sourceConfig.source }"` );
@@ -269,8 +278,13 @@ export function getBlockAttributes(
 	const doc = parseHtml( innerHTML );
 	const blockType = normalizeBlockType( blockTypeOrName );
 
-	const blockAttributes = mapValues( blockType.attributes, ( schema, key ) =>
-		getBlockAttribute( key, schema, doc, attributes )
+	const blockAttributes = Object.fromEntries(
+		Object.entries( blockType.attributes ?? {} ).map(
+			( [ key, schema ] ) => [
+				key,
+				getBlockAttribute( key, schema, doc, attributes, innerHTML ),
+			]
+		)
 	);
 
 	return applyFilters(
diff --git a/packages/blocks/src/api/parser/index.js b/packages/blocks/src/api/parser/index.js
index 85721d5ecac92b..14a88f602987ab 100644
--- a/packages/blocks/src/api/parser/index.js
+++ b/packages/blocks/src/api/parser/index.js
@@ -101,6 +101,7 @@ export function normalizeRawBlock( rawBlock, options ) {
 	// meaning there are no negative consequences to repeated autop calls.
 	if (
 		rawBlockName === fallbackBlockName &&
+		rawBlockName === 'core/freeform' &&
 		! options?.__unstableSkipAutop
 	) {
 		rawInnerHTML = autop( rawInnerHTML ).trim();
@@ -177,7 +178,7 @@ function applyBlockValidation( unvalidatedBlock, blockType ) {
 	);
 	// Attempt to validate the block once again after the built-in fixes.
 	const [ isFixedValid, validationIssues ] = validateBlock(
-		unvalidatedBlock,
+		fixedBlock,
 		blockType
 	);
 
@@ -190,7 +191,7 @@ function applyBlockValidation( unvalidatedBlock, blockType ) {
  * @param {WPRawBlock}   rawBlock The raw block object.
  * @param {ParseOptions} options  Extra options for handling block parsing.
  *
- * @return {WPBlock} Fully parsed block.
+ * @return {WPBlock | undefined} Fully parsed block.
  */
 export function parseRawBlock( rawBlock, options ) {
 	let normalizedBlock = normalizeRawBlock( rawBlock, options );
diff --git a/packages/blocks/src/api/parser/test/index.js b/packages/blocks/src/api/parser/test/index.js
index 589d6b81be5536..42923a7d3eeb35 100644
--- a/packages/blocks/src/api/parser/test/index.js
+++ b/packages/blocks/src/api/parser/test/index.js
@@ -50,6 +50,38 @@ describe( 'block parser', () => {
 	} );
 
 	describe( 'parseRawBlock', () => {
+		it( 'should apply className block validation fixes', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				attributes: {
+					fruit: {
+						type: 'string',
+						source: 'text',
+						selector: 'div',
+					},
+				},
+				save: ( { attributes } ) => (
+					// eslint-disable-next-line react/no-unknown-property
+					<div class={ attributes.className }>
+						{ attributes.fruit }
+					</div>
+				),
+			} );
+
+			const block = parseRawBlock( {
+				blockName: 'core/test-block',
+				innerHTML:
+					'<div class="custom-class another-custom-class">Bananas</div>',
+				attrs: { fruit: 'Bananas' },
+			} );
+
+			expect( block.name ).toEqual( 'core/test-block' );
+			expect( block.attributes ).toEqual( {
+				fruit: 'Bananas',
+				className: 'custom-class another-custom-class',
+			} );
+		} );
+
 		it( 'should create the requested block if it exists', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );
 
@@ -90,19 +122,30 @@ describe( 'block parser', () => {
 		} );
 
 		it( 'should fall back to the freeform content handler if block type not specified', () => {
-			registerBlockType( 'core/freeform-block', unknownBlockSettings );
-			setFreeformContentHandlerName( 'core/freeform-block' );
+			registerBlockType( 'core/freeform', unknownBlockSettings );
+			setFreeformContentHandlerName( 'core/freeform' );
 
 			const block = parseRawBlock( {
 				innerHTML: 'content',
 			} );
-			expect( block.name ).toEqual( 'core/freeform-block' );
+			expect( block.name ).toEqual( 'core/freeform' );
 			expect( block.attributes ).toEqual( { content: '<p>content</p>' } );
 		} );
 
+		it( 'skips adding paragraph tags if freeform block is set to core/html', () => {
+			registerBlockType( 'core/html', unknownBlockSettings );
+			setFreeformContentHandlerName( 'core/html' );
+
+			const block = parseRawBlock( {
+				innerHTML: 'content',
+			} );
+			expect( block.name ).toEqual( 'core/html' );
+			expect( block.attributes ).toEqual( { content: 'content' } );
+		} );
+
 		it( 'skips adding paragraph tags if __unstableSkipAutop is passed as an option', () => {
-			registerBlockType( 'core/freeform-block', unknownBlockSettings );
-			setFreeformContentHandlerName( 'core/freeform-block' );
+			registerBlockType( 'core/freeform', unknownBlockSettings );
+			setFreeformContentHandlerName( 'core/freeform' );
 
 			const block = parseRawBlock(
 				{
@@ -112,7 +155,7 @@ describe( 'block parser', () => {
 					__unstableSkipAutop: true,
 				}
 			);
-			expect( block.name ).toEqual( 'core/freeform-block' );
+			expect( block.name ).toEqual( 'core/freeform' );
 			expect( block.attributes ).toEqual( { content: 'content' } );
 		} );
 
diff --git a/packages/blocks/src/api/raw-handling/blockquote-normaliser.js b/packages/blocks/src/api/raw-handling/blockquote-normaliser.js
index 2b4f65009f31ea..e8967a79c73f89 100644
--- a/packages/blocks/src/api/raw-handling/blockquote-normaliser.js
+++ b/packages/blocks/src/api/raw-handling/blockquote-normaliser.js
@@ -3,10 +3,12 @@
  */
 import normaliseBlocks from './normalise-blocks';
 
-export default function blockquoteNormaliser( node ) {
-	if ( node.nodeName !== 'BLOCKQUOTE' ) {
-		return;
-	}
+export default function blockquoteNormaliser( options ) {
+	return ( node ) => {
+		if ( node.nodeName !== 'BLOCKQUOTE' ) {
+			return;
+		}
 
-	node.innerHTML = normaliseBlocks( node.innerHTML );
+		node.innerHTML = normaliseBlocks( node.innerHTML, options );
+	};
 }
diff --git a/packages/blocks/src/api/raw-handling/figure-content-reducer.js b/packages/blocks/src/api/raw-handling/figure-content-reducer.js
index 4dfb24f2c97816..4c8c1a8dd736bb 100644
--- a/packages/blocks/src/api/raw-handling/figure-content-reducer.js
+++ b/packages/blocks/src/api/raw-handling/figure-content-reducer.js
@@ -95,7 +95,7 @@ export default function figureContentReducer( node, doc, schema ) {
 		) {
 			wrapFigureContent( nodeToInsert, wrapper );
 		}
-	} else if ( nodeToInsert.parentNode.nodeName === 'BODY' ) {
+	} else {
 		wrapFigureContent( nodeToInsert );
 	}
 }
diff --git a/packages/blocks/src/api/raw-handling/html-to-blocks.js b/packages/blocks/src/api/raw-handling/html-to-blocks.js
index 18630a9abdce45..4944c54d6bf83d 100644
--- a/packages/blocks/src/api/raw-handling/html-to-blocks.js
+++ b/packages/blocks/src/api/raw-handling/html-to-blocks.js
@@ -1,7 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { createBlock, findTransform } from '../factory';
+import parse from '../parser';
 import { getBlockAttributes } from '../parser/get-block-attributes';
 import { getRawTransforms } from './get-raw-transforms';
 
@@ -28,6 +34,13 @@ export function htmlToBlocks( html, handler ) {
 		);
 
 		if ( ! rawTransform ) {
+			// Until the HTML block is supported in the native version, we'll parse it
+			// instead of creating the block to generate it as an unsupported block.
+			if ( Platform.isNative ) {
+				return parse(
+					`<!-- wp:html -->${ node.outerHTML }<!-- /wp:html -->`
+				);
+			}
 			return createBlock(
 				// Should not be hardcoded.
 				'core/html',
@@ -38,7 +51,11 @@ export function htmlToBlocks( html, handler ) {
 		const { transform, blockName } = rawTransform;
 
 		if ( transform ) {
-			return transform( node, handler );
+			const block = transform( node, handler );
+			if ( node.hasAttribute( 'class' ) ) {
+				block.attributes.className = node.getAttribute( 'class' );
+			}
+			return block;
 		}
 
 		return createBlock(
diff --git a/packages/blocks/src/api/raw-handling/image-corrector.js b/packages/blocks/src/api/raw-handling/image-corrector.js
index d8de5e3a2ff50d..d3cf2ffb17486f 100644
--- a/packages/blocks/src/api/raw-handling/image-corrector.js
+++ b/packages/blocks/src/api/raw-handling/image-corrector.js
@@ -3,11 +3,6 @@
  */
 import { createBlobURL } from '@wordpress/blob';
 
-/**
- * Browser dependencies
- */
-const { atob, File } = window;
-
 export default function imageCorrector( node ) {
 	if ( node.nodeName !== 'IMG' ) {
 		return;
@@ -44,7 +39,7 @@ export default function imageCorrector( node ) {
 		}
 
 		const name = type.replace( '/', '.' );
-		const file = new File( [ uint8Array ], name, { type } );
+		const file = new window.File( [ uint8Array ], name, { type } );
 
 		node.src = createBlobURL( file );
 	}
diff --git a/packages/blocks/src/api/raw-handling/image-corrector.native.js b/packages/blocks/src/api/raw-handling/image-corrector.native.js
index 10974e5dc10bdc..550c2e0e6e1537 100644
--- a/packages/blocks/src/api/raw-handling/image-corrector.native.js
+++ b/packages/blocks/src/api/raw-handling/image-corrector.native.js
@@ -10,6 +10,13 @@ export default function imageCorrector( node ) {
 		return;
 	}
 
+	// For local files makes sure the path doesn't end with an invalid extension.
+	// This scenario often happens with content from MS Word and similar text apps.
+	// We still need to support local files pasted from the users Media library.
+	if ( node.src.startsWith( 'file:' ) && node.src.slice( -1 ) === '/' ) {
+		node.setAttribute( 'src', '' );
+	}
+
 	// Remove trackers and hardly visible images.
 	if ( node.height === 1 || node.width === 1 ) {
 		node.parentNode.removeChild( node );
diff --git a/packages/blocks/src/api/raw-handling/index.js b/packages/blocks/src/api/raw-handling/index.js
index afd68a4a9e1e7b..2d1094023ada1d 100644
--- a/packages/blocks/src/api/raw-handling/index.js
+++ b/packages/blocks/src/api/raw-handling/index.js
@@ -38,7 +38,13 @@ export function deprecatedGetPhrasingContentSchema( context ) {
 export function rawHandler( { HTML = '' } ) {
 	// If we detect block delimiters, parse entirely as blocks.
 	if ( HTML.indexOf( '<!-- wp:' ) !== -1 ) {
-		return parse( HTML );
+		const parseResult = parse( HTML );
+		const isSingleFreeFormBlock =
+			parseResult.length === 1 &&
+			parseResult[ 0 ].name === 'core/freeform';
+		if ( ! isSingleFreeFormBlock ) {
+			return parseResult;
+		}
 	}
 
 	// An array of HTML strings and block objects. The blocks replace matched
@@ -65,11 +71,11 @@ export function rawHandler( { HTML = '' } ) {
 				figureContentReducer,
 				// Needed to create the quote block, which cannot handle text
 				// without wrapper paragraphs.
-				blockquoteNormaliser,
+				blockquoteNormaliser( { raw: true } ),
 			];
 
 			piece = deepFilterHTML( piece, filters, blockContentSchema );
-			piece = normaliseBlocks( piece );
+			piece = normaliseBlocks( piece, { raw: true } );
 
 			return htmlToBlocks( piece, rawHandler );
 		} )
diff --git a/packages/blocks/src/api/raw-handling/list-reducer.js b/packages/blocks/src/api/raw-handling/list-reducer.js
index b7fce3d805b83e..f771a8215636bd 100644
--- a/packages/blocks/src/api/raw-handling/list-reducer.js
+++ b/packages/blocks/src/api/raw-handling/list-reducer.js
@@ -53,9 +53,6 @@ export default function listReducer( node ) {
 		if ( prevListItem ) {
 			prevListItem.appendChild( list );
 			parentList.removeChild( parentListItem );
-		} else {
-			parentList.parentNode.insertBefore( list, parentList );
-			parentList.parentNode.removeChild( parentList );
 		}
 	}
 
diff --git a/packages/blocks/src/api/raw-handling/ms-list-converter.js b/packages/blocks/src/api/raw-handling/ms-list-converter.js
index 8b45a5ab53fdb7..03db53edc772ac 100644
--- a/packages/blocks/src/api/raw-handling/ms-list-converter.js
+++ b/packages/blocks/src/api/raw-handling/ms-list-converter.js
@@ -1,7 +1,8 @@
 /**
- * Browser dependencies
+ * Internal dependencies
  */
-const { parseInt } = window;
+import { deepFilterHTML } from './utils';
+import msListIgnore from './ms-list-ignore';
 
 function isList( node ) {
 	return node.nodeName === 'OL' || node.nodeName === 'UL';
@@ -14,23 +15,10 @@ export default function msListConverter( node, doc ) {
 
 	const style = node.getAttribute( 'style' );
 
-	if ( ! style ) {
+	if ( ! style || ! style.includes( 'mso-list' ) ) {
 		return;
 	}
 
-	// Quick check.
-	if ( style.indexOf( 'mso-list' ) === -1 ) {
-		return;
-	}
-
-	const matches = /mso-list\s*:[^;]+level([0-9]+)/i.exec( style );
-
-	if ( ! matches ) {
-		return;
-	}
-
-	let level = parseInt( matches[ 1 ], 10 ) - 1 || 0;
-
 	const prevNode = node.previousElementSibling;
 
 	// Add new list if no previous.
@@ -53,13 +41,11 @@ export default function msListConverter( node, doc ) {
 
 	let receivingNode = listNode;
 
-	// Remove the first span with list info.
-	node.removeChild( node.firstChild );
-
 	// Add content.
-	while ( node.firstChild ) {
-		listItem.appendChild( node.firstChild );
-	}
+	listItem.innerHTML = deepFilterHTML( node.innerHTML, [ msListIgnore ] );
+
+	const matches = /mso-list\s*:[^;]+level([0-9]+)/i.exec( style );
+	let level = matches ? parseInt( matches[ 1 ], 10 ) - 1 || 0 : 0;
 
 	// Change pointer depending on indentation level.
 	while ( level-- ) {
diff --git a/packages/blocks/src/api/raw-handling/ms-list-ignore.js b/packages/blocks/src/api/raw-handling/ms-list-ignore.js
new file mode 100644
index 00000000000000..88a940337130ba
--- /dev/null
+++ b/packages/blocks/src/api/raw-handling/ms-list-ignore.js
@@ -0,0 +1,30 @@
+/**
+ * Looks for comments, and removes them.
+ *
+ * @param {Node} node The node to be processed.
+ * @return {void}
+ */
+export default function msListIgnore( node ) {
+	if ( node.nodeType !== node.ELEMENT_NODE ) {
+		return;
+	}
+
+	const style = node.getAttribute( 'style' );
+
+	if ( ! style || ! style.includes( 'mso-list' ) ) {
+		return;
+	}
+
+	const rules = style.split( ';' ).reduce( ( acc, rule ) => {
+		const [ key, value ] = rule.split( ':' );
+
+		if ( key && value ) {
+			acc[ key.trim().toLowerCase() ] = value.trim().toLowerCase();
+		}
+		return acc;
+	}, {} );
+
+	if ( rules[ 'mso-list' ] === 'ignore' ) {
+		node.remove();
+	}
+}
diff --git a/packages/blocks/src/api/raw-handling/normalise-blocks.js b/packages/blocks/src/api/raw-handling/normalise-blocks.js
index f469b7000aa7f9..a0e8a76fed737c 100644
--- a/packages/blocks/src/api/raw-handling/normalise-blocks.js
+++ b/packages/blocks/src/api/raw-handling/normalise-blocks.js
@@ -3,7 +3,7 @@
  */
 import { isEmpty, isPhrasingContent } from '@wordpress/dom';
 
-export default function normaliseBlocks( HTML ) {
+export default function normaliseBlocks( HTML, options = {} ) {
 	const decuDoc = document.implementation.createHTMLDocument( '' );
 	const accuDoc = document.implementation.createHTMLDocument( '' );
 
@@ -47,7 +47,7 @@ export default function normaliseBlocks( HTML ) {
 				}
 			} else if ( node.nodeName === 'P' ) {
 				// Only append non-empty paragraph nodes.
-				if ( isEmpty( node ) ) {
+				if ( isEmpty( node ) && ! options.raw ) {
 					decu.removeChild( node );
 				} else {
 					accu.appendChild( node );
diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
index d0193bc87eb74c..002ed7aec0c188 100644
--- a/packages/blocks/src/api/raw-handling/paste-handler.js
+++ b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -17,6 +17,7 @@ import isInlineContent from './is-inline-content';
 import phrasingContentReducer from './phrasing-content-reducer';
 import headRemover from './head-remover';
 import msListConverter from './ms-list-converter';
+import msListIgnore from './ms-list-ignore';
 import listReducer from './list-reducer';
 import imageCorrector from './image-corrector';
 import blockquoteNormaliser from './blockquote-normaliser';
@@ -32,22 +33,20 @@ import { deepFilterHTML, isPlain, getBlockContentSchema } from './utils';
 import emptyParagraphRemover from './empty-paragraph-remover';
 import slackParagraphCorrector from './slack-paragraph-corrector';
 
-/**
- * Browser dependencies
- */
-const { console } = window;
+const log = ( ...args ) => window?.console?.log?.( ...args );
 
 /**
  * Filters HTML to only contain phrasing content.
  *
- * @param {string}  HTML               The HTML to filter.
- * @param {boolean} preserveWhiteSpace Whether or not to preserve consequent white space.
+ * @param {string} HTML The HTML to filter.
  *
  * @return {string} HTML only containing phrasing content.
  */
-function filterInlineHTML( HTML, preserveWhiteSpace ) {
+function filterInlineHTML( HTML ) {
 	HTML = deepFilterHTML( HTML, [
+		headRemover,
 		googleDocsUIDRemover,
+		msListIgnore,
 		phrasingContentReducer,
 		commentRemover,
 	] );
@@ -55,12 +54,10 @@ function filterInlineHTML( HTML, preserveWhiteSpace ) {
 		inline: true,
 	} );
 
-	if ( ! preserveWhiteSpace ) {
-		HTML = deepFilterHTML( HTML, [ htmlFormattingRemover, brRemover ] );
-	}
+	HTML = deepFilterHTML( HTML, [ htmlFormattingRemover, brRemover ] );
 
 	// Allows us to ask for this information when we get a report.
-	console.log( 'Processed inline HTML:\n\n', HTML );
+	log( 'Processed inline HTML:\n\n', HTML );
 
 	return HTML;
 }
@@ -68,15 +65,14 @@ function filterInlineHTML( HTML, preserveWhiteSpace ) {
 /**
  * Converts an HTML string to known blocks. Strips everything else.
  *
- * @param {Object}  options
- * @param {string}  [options.HTML]               The HTML to convert.
- * @param {string}  [options.plainText]          Plain text version.
- * @param {string}  [options.mode]               Handle content as blocks or inline content.
- *                                               * 'AUTO': Decide based on the content passed.
- *                                               * 'INLINE': Always handle as inline content, and return string.
- *                                               * 'BLOCKS': Always handle as blocks, and return array of blocks.
- * @param {Array}   [options.tagName]            The tag into which content will be inserted.
- * @param {boolean} [options.preserveWhiteSpace] Whether or not to preserve consequent white space.
+ * @param {Object} options
+ * @param {string} [options.HTML]      The HTML to convert.
+ * @param {string} [options.plainText] Plain text version.
+ * @param {string} [options.mode]      Handle content as blocks or inline content.
+ *                                     * 'AUTO': Decide based on the content passed.
+ *                                     * 'INLINE': Always handle as inline content, and return string.
+ *                                     * 'BLOCKS': Always handle as blocks, and return array of blocks.
+ * @param {Array}  [options.tagName]   The tag into which content will be inserted.
  *
  * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
  */
@@ -85,7 +81,6 @@ export function pasteHandler( {
 	plainText = '',
 	mode = 'AUTO',
 	tagName,
-	preserveWhiteSpace,
 } ) {
 	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/g, '' );
@@ -105,12 +100,17 @@ export function pasteHandler( {
 		const content = HTML ? HTML : plainText;
 
 		if ( content.indexOf( '<!-- wp:' ) !== -1 ) {
-			return parse( content );
+			const parseResult = parse( content );
+			const isSingleFreeFormBlock =
+				parseResult.length === 1 &&
+				parseResult[ 0 ].name === 'core/freeform';
+			if ( ! isSingleFreeFormBlock ) {
+				return parseResult;
+			}
 		}
 	}
 
 	// Normalize unicode to use composed characters.
-	// This is unsupported in IE 11 but it's a nice-to-have feature, not mandatory.
 	// Not normalizing the content will only affect older browsers and won't
 	// entirely break the app.
 	// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
@@ -120,17 +120,34 @@ export function pasteHandler( {
 		HTML = HTML.normalize();
 	}
 
-	// Parse Markdown (and encoded HTML) if:
+	// Must be run before checking if it's inline content.
+	HTML = deepFilterHTML( HTML, [ slackParagraphCorrector ] );
+
+	// Consider plain text if:
 	// * There is a plain text version.
 	// * There is no HTML version, or it has no formatting.
-	if ( plainText && ( ! HTML || isPlain( HTML ) ) ) {
+	const isPlainText = plainText && ( ! HTML || isPlain( HTML ) );
+
+	// Parse Markdown (and encoded HTML) if it's considered plain text.
+	if ( isPlainText ) {
 		HTML = plainText;
 
 		// The markdown converter (Showdown) trims whitespace.
 		if ( ! /^\s+$/.test( plainText ) ) {
 			HTML = markdownConverter( HTML );
 		}
+	}
+
+	// An array of HTML strings and block objects. The blocks replace matched
+	// shortcodes.
+	const pieces = shortcodeConverter( HTML );
+
+	// The call to shortcodeConverter will always return more than one element
+	// if shortcodes are matched. The reason is when shortcodes are matched
+	// empty HTML strings are included.
+	const hasShortcodes = pieces.length > 1;
 
+	if ( isPlainText && ! hasShortcodes ) {
 		// Switch to inline mode if:
 		// * The current mode is AUTO.
 		// * The original plain text had no line breaks.
@@ -147,27 +164,15 @@ export function pasteHandler( {
 	}
 
 	if ( mode === 'INLINE' ) {
-		return filterInlineHTML( HTML, preserveWhiteSpace );
+		return filterInlineHTML( HTML );
 	}
 
-	// Must be run before checking if it's inline content.
-	HTML = deepFilterHTML( HTML, [ slackParagraphCorrector ] );
-
-	// An array of HTML strings and block objects. The blocks replace matched
-	// shortcodes.
-	const pieces = shortcodeConverter( HTML );
-
-	// The call to shortcodeConverter will always return more than one element
-	// if shortcodes are matched. The reason is when shortcodes are matched
-	// empty HTML strings are included.
-	const hasShortcodes = pieces.length > 1;
-
 	if (
 		mode === 'AUTO' &&
 		! hasShortcodes &&
 		isInlineContent( HTML, tagName )
 	) {
-		return filterInlineHTML( HTML, preserveWhiteSpace );
+		return filterInlineHTML( HTML );
 	}
 
 	const phrasingContentSchema = getPhrasingContentSchema( 'paste' );
@@ -191,7 +196,7 @@ export function pasteHandler( {
 				commentRemover,
 				iframeRemover,
 				figureContentReducer,
-				blockquoteNormaliser,
+				blockquoteNormaliser(),
 				divNormaliser,
 			];
 
@@ -211,7 +216,7 @@ export function pasteHandler( {
 			);
 
 			// Allows us to ask for this information when we get a report.
-			console.log( 'Processed HTML piece:\n\n', piece );
+			log( 'Processed HTML piece:\n\n', piece );
 
 			return htmlToBlocks( piece, pasteHandler );
 		} )
diff --git a/packages/blocks/src/api/raw-handling/shortcode-converter.js b/packages/blocks/src/api/raw-handling/shortcode-converter.js
index 3434717553a985..ed81dfabb43091 100644
--- a/packages/blocks/src/api/raw-handling/shortcode-converter.js
+++ b/packages/blocks/src/api/raw-handling/shortcode-converter.js
@@ -14,6 +14,9 @@ import { applyBuiltInValidationFixes } from '../parser/apply-built-in-validation
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
+const beforeLineRegexp = /(\n|<p>)\s*$/;
+const afterLineRegexp = /^\s*(\n|<\/p>)/;
+
 function segmentHTMLToShortcodeBlock(
 	HTML,
 	lastIndex = 0,
@@ -56,8 +59,8 @@ function segmentHTMLToShortcodeBlock(
 		if (
 			! match.shortcode.content?.includes( '<' ) &&
 			! (
-				/(\n|<p>)\s*$/.test( beforeHTML ) &&
-				/^\s*(\n|<\/p>)/.test( afterHTML )
+				beforeLineRegexp.test( beforeHTML ) &&
+				afterLineRegexp.test( afterHTML )
 			)
 		) {
 			return segmentHTMLToShortcodeBlock( HTML, lastIndex );
@@ -143,9 +146,13 @@ function segmentHTMLToShortcodeBlock(
 		}
 
 		return [
-			...segmentHTMLToShortcodeBlock( beforeHTML ),
+			...segmentHTMLToShortcodeBlock(
+				beforeHTML.replace( beforeLineRegexp, '' )
+			),
 			...blocks,
-			...segmentHTMLToShortcodeBlock( afterHTML ),
+			...segmentHTMLToShortcodeBlock(
+				afterHTML.replace( afterLineRegexp, '' )
+			),
 		];
 	}
 
diff --git a/packages/blocks/src/api/raw-handling/special-comment-converter.js b/packages/blocks/src/api/raw-handling/special-comment-converter.js
index 5561a974cb2f20..e0f845d300d6c7 100644
--- a/packages/blocks/src/api/raw-handling/special-comment-converter.js
+++ b/packages/blocks/src/api/raw-handling/special-comment-converter.js
@@ -23,58 +23,22 @@ export default function specialCommentConverter( node, doc ) {
 		return;
 	}
 
-	if ( node.nodeValue === 'nextpage' ) {
-		replace( node, createNextpage( doc ) );
+	if (
+		node.nodeValue !== 'nextpage' &&
+		node.nodeValue.indexOf( 'more' ) !== 0
+	) {
 		return;
 	}
 
-	if ( node.nodeValue.indexOf( 'more' ) === 0 ) {
-		moreCommentConverter( node, doc );
-	}
-}
-
-/**
- * Convert `<!--more-->` as well as the `<!--more Some text-->` variant
- * and its `<!--noteaser-->` companion into the custom element
- * described in `specialCommentConverter()`.
- *
- * @param {Node}     node The node to be processed.
- * @param {Document} doc  The document of the node.
- * @return {void}
- */
-function moreCommentConverter( node, doc ) {
-	// Grab any custom text in the comment.
-	const customText = node.nodeValue.slice( 4 ).trim();
-
-	/*
-	 * When a `<!--more-->` comment is found, we need to look for any
-	 * `<!--noteaser-->` sibling, but it may not be a direct sibling
-	 * (whitespace typically lies in between)
-	 */
-	let sibling = node;
-	let noTeaser = false;
-	while ( ( sibling = sibling.nextSibling ) ) {
-		if (
-			sibling.nodeType === sibling.COMMENT_NODE &&
-			sibling.nodeValue === 'noteaser'
-		) {
-			noTeaser = true;
-			remove( sibling );
-			break;
-		}
-	}
-
-	const moreBlock = createMore( customText, noTeaser, doc );
+	const block = createBlock( node, doc );
 
 	// If our `<!--more-->` comment is in the middle of a paragraph, we should
-	// split the paragraph in two and insert the more block in between. If not,
-	// the more block will eventually end up being inserted after the paragraph.
-	if (
-		! node.parentNode ||
-		node.parentNode.nodeName !== 'P' ||
-		node.parentNode.childNodes.length === 1
-	) {
-		replace( node, moreBlock );
+	// split the paragraph in two and insert the more block in between. If it's
+	// inside an empty paragraph, we should still move it out of the paragraph
+	// and remove the paragraph. If there's no paragraph, fall back to simply
+	// replacing the comment.
+	if ( ! node.parentNode || node.parentNode.nodeName !== 'P' ) {
+		replace( node, block );
 	} else {
 		const childNodes = Array.from( node.parentNode.childNodes );
 		const nodeIndex = childNodes.indexOf( node );
@@ -93,7 +57,7 @@ function moreCommentConverter( node, doc ) {
 		// Split the original parent node and insert our more block
 		[
 			childNodes.slice( 0, nodeIndex ).reduce( paragraphBuilder, null ),
-			moreBlock,
+			block,
 			childNodes.slice( nodeIndex + 1 ).reduce( paragraphBuilder, null ),
 		].forEach(
 			( element ) =>
@@ -105,6 +69,35 @@ function moreCommentConverter( node, doc ) {
 	}
 }
 
+function createBlock( commentNode, doc ) {
+	if ( commentNode.nodeValue === 'nextpage' ) {
+		return createNextpage( doc );
+	}
+
+	// Grab any custom text in the comment.
+	const customText = commentNode.nodeValue.slice( 4 ).trim();
+
+	/*
+	 * When a `<!--more-->` comment is found, we need to look for any
+	 * `<!--noteaser-->` sibling, but it may not be a direct sibling
+	 * (whitespace typically lies in between)
+	 */
+	let sibling = commentNode;
+	let noTeaser = false;
+	while ( ( sibling = sibling.nextSibling ) ) {
+		if (
+			sibling.nodeType === sibling.COMMENT_NODE &&
+			sibling.nodeValue === 'noteaser'
+		) {
+			noTeaser = true;
+			remove( sibling );
+			break;
+		}
+	}
+
+	return createMore( customText, noTeaser, doc );
+}
+
 function createMore( customText, noTeaser, doc ) {
 	const node = doc.createElement( 'wp-block' );
 	node.dataset.block = 'core/more';
diff --git a/packages/blocks/src/api/raw-handling/test/blockquote-normaliser.js b/packages/blocks/src/api/raw-handling/test/blockquote-normaliser.js
index f7ac96a95b94f6..c44164e890d8ca 100644
--- a/packages/blocks/src/api/raw-handling/test/blockquote-normaliser.js
+++ b/packages/blocks/src/api/raw-handling/test/blockquote-normaliser.js
@@ -8,7 +8,7 @@ describe( 'blockquoteNormaliser', () => {
 	it( 'should normalise blockquote', () => {
 		const input = '<blockquote>test</blockquote>';
 		const output = '<blockquote><p>test</p></blockquote>';
-		expect( deepFilterHTML( input, [ blockquoteNormaliser ] ) ).toEqual(
+		expect( deepFilterHTML( input, [ blockquoteNormaliser() ] ) ).toEqual(
 			output
 		);
 	} );
diff --git a/packages/blocks/src/api/raw-handling/test/list-reducer.js b/packages/blocks/src/api/raw-handling/test/list-reducer.js
index cb89e5c45e6a48..5c1692dd5ebf33 100644
--- a/packages/blocks/src/api/raw-handling/test/list-reducer.js
+++ b/packages/blocks/src/api/raw-handling/test/list-reducer.js
@@ -41,12 +41,6 @@ describe( 'listReducer', () => {
 		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output );
 	} );
 
-	it( 'should remove empty list wrappers', () => {
-		const input = '<ul><li>\n<ul><li>test</li></ul>\n</li></ul>';
-		const output = '<ul><li>test</li></ul>';
-		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( output );
-	} );
-
 	it( 'should not remove filled list wrappers', () => {
 		const input = '<ul><li>\ntest\n<ul><li>test</li></ul>\n</li></ul>';
 		expect( deepFilterHTML( input, [ listReducer ] ) ).toEqual( input );
diff --git a/packages/blocks/src/api/raw-handling/test/ms-list-converter.js b/packages/blocks/src/api/raw-handling/test/ms-list-converter.js
index a7c58dfa03010a..5ae7da68f16a92 100644
--- a/packages/blocks/src/api/raw-handling/test/ms-list-converter.js
+++ b/packages/blocks/src/api/raw-handling/test/ms-list-converter.js
@@ -7,7 +7,7 @@ import { deepFilterHTML } from '../utils';
 describe( 'msListConverter', () => {
 	it( 'should convert unordered list', () => {
 		const input =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output = '<ul><li>test</li></ul>';
 		expect( deepFilterHTML( input, [ msListConverter ] ) ).toEqual(
 			output
@@ -16,7 +16,7 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert ordered list', () => {
 		const input =
-			'<p style="mso-list:l0 level1 lfo1"><span>1 </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">1 </span>test</p>';
 		const output = '<ol type="1"><li>test</li></ol>';
 		expect( deepFilterHTML( input, [ msListConverter ] ) ).toEqual(
 			output
@@ -25,11 +25,11 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert indented list', () => {
 		const input1 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input2 =
-			'<p style="mso-list:l0 level2 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level2 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input3 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output =
 			'<ul><li>test<ul><li>test</li></ul></li><li>test</li></ul>';
 		expect(
@@ -39,13 +39,13 @@ describe( 'msListConverter', () => {
 
 	it( 'should convert deep indented list', () => {
 		const input1 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input2 =
-			'<p style="mso-list:l0 level2 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level2 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input3 =
-			'<p style="mso-list:l0 level3 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level3 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const input4 =
-			'<p style="mso-list:l0 level1 lfo1"><span>* </span>test</p>';
+			'<p style="mso-list:l0 level1 lfo1"><span style="mso-list:Ignore">* </span>test</p>';
 		const output =
 			'<ul><li>test<ul><li>test<ul><li>test</li></ul></li></ul></li><li>test</li></ul>';
 		expect(
diff --git a/packages/blocks/src/api/raw-handling/test/paste-handler.js b/packages/blocks/src/api/raw-handling/test/paste-handler.js
new file mode 100644
index 00000000000000..40a28f3c35a33f
--- /dev/null
+++ b/packages/blocks/src/api/raw-handling/test/paste-handler.js
@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies
+ */
+import { pasteHandler } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { init as initAndRegisterTableBlock } from '../../../../../block-library/src/table';
+import { init as initAndRegisterVideoBlock } from '../../../../../block-library/src/video';
+
+const tableWithHeaderFooterAndBodyUsingColspan = `
+<table>
+	<thead>
+		<tr>
+			<th colspan="2">Colspan 2</th>
+			<th>Header Cell</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td colspan="2">Colspan 2</td>
+			<td>Cell Data</td>
+		</tr>
+	</tbody>
+	<tfoot>
+		<tr>
+			<th colspan="2">Colspan 2</th>
+			<th>Footer Cell</th>
+		</tr>
+	</tfoot>
+</table>`;
+
+const tableWithHeaderFooterAndBodyUsingRowspan = `
+<table>
+	<thead>
+		<tr>
+			<th rowspan="2">Rowspan 2</th>
+			<th>Header Cell</th>
+		</tr>
+		<tr>
+			<th>Header Cell</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td rowspan="2">Rowspan 2</td>
+			<td>Cell Data</td>
+		</tr>
+		<tr>
+			<td>Cell Data</td>
+		</tr>
+	</tbody>
+	<tfoot>
+		<tr>
+			<td rowspan="2">Rowspan 2</td>
+			<td>Footer Cell</td>
+		</tr>
+		<tr>
+			<td>Footer Cell</td>
+		</tr>
+	</tfoot>
+</table>`;
+
+describe( 'pasteHandler', () => {
+	beforeAll( () => {
+		initAndRegisterTableBlock();
+		initAndRegisterVideoBlock();
+	} );
+
+	it( 'can handle a table with thead, tbody and tfoot using colspan', () => {
+		const [ result ] = pasteHandler( {
+			HTML: tableWithHeaderFooterAndBodyUsingColspan,
+			tagName: 'p',
+		} );
+
+		expect( console ).toHaveLogged();
+
+		delete result.attributes.caption;
+		expect( result.attributes ).toEqual( {
+			hasFixedLayout: true,
+			head: [
+				{
+					cells: [
+						{ content: 'Colspan 2', tag: 'th', colspan: '2' },
+						{ content: 'Header Cell', tag: 'th' },
+					],
+				},
+			],
+			body: [
+				{
+					cells: [
+						{ content: 'Colspan 2', tag: 'td', colspan: '2' },
+						{ content: 'Cell Data', tag: 'td' },
+					],
+				},
+			],
+			foot: [
+				{
+					cells: [
+						{ content: 'Colspan 2', tag: 'th', colspan: '2' },
+						{ content: 'Footer Cell', tag: 'th' },
+					],
+				},
+			],
+		} );
+		expect( result.name ).toEqual( 'core/table' );
+		expect( result.isValid ).toBeTruthy();
+	} );
+
+	it( 'can handle a table with thead, tbody and tfoot using rowspan', () => {
+		const [ result ] = pasteHandler( {
+			HTML: tableWithHeaderFooterAndBodyUsingRowspan,
+			tagName: 'p',
+		} );
+
+		expect( console ).toHaveLogged();
+
+		delete result.attributes.caption;
+		expect( result.attributes ).toEqual( {
+			hasFixedLayout: true,
+			head: [
+				{
+					cells: [
+						{ content: 'Rowspan 2', tag: 'th', rowspan: '2' },
+						{ content: 'Header Cell', tag: 'th' },
+					],
+				},
+				{
+					cells: [ { content: 'Header Cell', tag: 'th' } ],
+				},
+			],
+			body: [
+				{
+					cells: [
+						{ content: 'Rowspan 2', tag: 'td', rowspan: '2' },
+						{ content: 'Cell Data', tag: 'td' },
+					],
+				},
+				{
+					cells: [ { content: 'Cell Data', tag: 'td' } ],
+				},
+			],
+			foot: [
+				{
+					cells: [
+						{ content: 'Rowspan 2', tag: 'td', rowspan: '2' },
+						{ content: 'Footer Cell', tag: 'td' },
+					],
+				},
+				{
+					cells: [ { content: 'Footer Cell', tag: 'td' } ],
+				},
+			],
+		} );
+		expect( result.name ).toEqual( 'core/table' );
+		expect( result.isValid ).toBeTruthy();
+	} );
+
+	it( 'can handle a video', () => {
+		const [ result ] = pasteHandler( {
+			HTML: '<video controls src="https://example.com/media.mp4" autoplay loop muted controls playsinline preload="auto" poster="https://example.com/media.jpg"></video>',
+			tagName: 'p',
+			preserveWhiteSpace: false,
+		} );
+
+		expect( console ).toHaveLogged();
+
+		delete result.attributes.caption;
+		expect( result.attributes ).toEqual( {
+			autoplay: true,
+			loop: true,
+			muted: true,
+			controls: true,
+			playsInline: true,
+			preload: 'auto',
+			poster: 'https://example.com/media.jpg',
+			src: 'https://example.com/media.mp4',
+			tracks: [],
+		} );
+		expect( result.name ).toEqual( 'core/video' );
+		expect( result.isValid ).toBeTruthy();
+	} );
+} );
diff --git a/packages/blocks/src/api/raw-handling/test/special-comment-converter.js b/packages/blocks/src/api/raw-handling/test/special-comment-converter.js
index 602990788cab02..22c9a5815fb44c 100644
--- a/packages/blocks/src/api/raw-handling/test/special-comment-converter.js
+++ b/packages/blocks/src/api/raw-handling/test/special-comment-converter.js
@@ -8,14 +8,14 @@ describe( 'specialCommentConverter', () => {
 	it( 'should convert a single "more" comment into a basic block', () => {
 		expect(
 			deepFilterHTML( '<p><!--more--></p>', [ specialCommentConverter ] )
-		).toEqual( '<p></p><wp-block data-block="core/more"></wp-block>' );
+		).toEqual( '<wp-block data-block="core/more"></wp-block>' );
 	} );
 	it( 'should convert a single "nextpage" comment into a basic block', () => {
 		expect(
 			deepFilterHTML( '<p><!--nextpage--></p>', [
 				specialCommentConverter,
 			] )
-		).toEqual( '<p></p><wp-block data-block="core/nextpage"></wp-block>' );
+		).toEqual( '<wp-block data-block="core/nextpage"></wp-block>' );
 	} );
 	it( 'should convert two comments into a block', () => {
 		expect(
@@ -23,7 +23,7 @@ describe( 'specialCommentConverter', () => {
 				specialCommentConverter,
 			] )
 		).toEqual(
-			'<p></p><wp-block data-block="core/more" data-no-teaser=""></wp-block>'
+			'<wp-block data-block="core/more" data-no-teaser=""></wp-block>'
 		);
 	} );
 	it( 'should pass custom text to the block', () => {
@@ -33,7 +33,7 @@ describe( 'specialCommentConverter', () => {
 				[ specialCommentConverter ]
 			)
 		).toEqual(
-			'<p></p><wp-block data-block="core/more" data-custom-text="Read all about it!" data-no-teaser=""></wp-block>'
+			'<wp-block data-block="core/more" data-custom-text="Read all about it!" data-no-teaser=""></wp-block>'
 		);
 	} );
 	it( 'should not break content order', () => {
@@ -95,7 +95,7 @@ describe( 'specialCommentConverter', () => {
 				[ specialCommentConverter ]
 			);
 			expect( output ).toEqual(
-				'<p></p><wp-block data-block="core/more" data-no-teaser=""></wp-block>'
+				'<wp-block data-block="core/more" data-no-teaser=""></wp-block>'
 			);
 		} );
 		it( 'should not break content order', () => {
@@ -108,7 +108,7 @@ describe( 'specialCommentConverter', () => {
 			);
 			expect( output ).toEqual(
 				`<p>First paragraph.</p>
-				<p></p><wp-block data-block=\"core/more\"></wp-block>
+				<wp-block data-block=\"core/more\"></wp-block>
 				<p>Second paragraph</p>
 				<p>Third paragraph</p>`
 			);
@@ -124,9 +124,9 @@ describe( 'specialCommentConverter', () => {
 			);
 			expect( output ).toEqual(
 				`<p>First page.</p>
-				<p></p><wp-block data-block=\"core/nextpage\"></wp-block>
+				<wp-block data-block=\"core/nextpage\"></wp-block>
 				<p>Second page</p>
-				<p></p><wp-block data-block=\"core/nextpage\"></wp-block>
+				<wp-block data-block=\"core/nextpage\"></wp-block>
 				<p>Third page</p>`
 			);
 		} );
diff --git a/packages/blocks/src/api/raw-handling/test/utils.js b/packages/blocks/src/api/raw-handling/test/utils.js
index 56c38bbb38c965..d02d8e7d0602be 100644
--- a/packages/blocks/src/api/raw-handling/test/utils.js
+++ b/packages/blocks/src/api/raw-handling/test/utils.js
@@ -3,47 +3,15 @@
  */
 import deepFreeze from 'deep-freeze';
 
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
 import { getBlockContentSchemaFromTransforms, isPlain } from '../utils';
-import { store as mockStore } from '../../../store';
-import { STORE_NAME as mockStoreName } from '../../../store/constants';
-
-jest.mock( '@wordpress/data', () => {
-	return {
-		select: jest.fn( ( store ) => {
-			switch ( store ) {
-				case [ mockStoreName ]:
-				case mockStore: {
-					return {
-						hasBlockSupport: ( blockName, supports ) => {
-							return (
-								blockName === 'core/paragraph' &&
-								supports === 'anchor'
-							);
-						},
-					};
-				}
-			}
-		} ),
-		combineReducers: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		createReduxStore: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		register: () => {
-			const mock = jest.fn();
-			return mock;
-		},
-		createRegistryControl() {
-			return jest.fn();
-		},
-	};
-} );
 
 describe( 'isPlain', () => {
 	it( 'should return true for plain text', () => {
@@ -65,6 +33,19 @@ describe( 'isPlain', () => {
 } );
 
 describe( 'getBlockContentSchema', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/paragraph', {
+			title: 'Paragraph',
+			supports: {
+				anchor: true,
+			},
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/paragraph' );
+	} );
+
 	const myContentSchema = {
 		strong: {},
 		em: {},
diff --git a/packages/blocks/src/api/raw-handling/utils.js b/packages/blocks/src/api/raw-handling/utils.js
index f637a9516c7f8b..3f4fe32a1af248 100644
--- a/packages/blocks/src/api/raw-handling/utils.js
+++ b/packages/blocks/src/api/raw-handling/utils.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues, mergeWith } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,21 +23,30 @@ export function getBlockContentSchemaFromTransforms( transforms, context ) {
 			return schema;
 		}
 
-		return mapValues( schema, ( value ) => {
-			let attributes = value.attributes || [];
-			// If the block supports the "anchor" functionality, it needs to keep its ID attribute.
-			if ( hasAnchorSupport ) {
-				attributes = [ ...attributes, 'id' ];
-			}
-			return {
-				...value,
-				attributes,
-				isMatch: isMatch ? isMatch : undefined,
-			};
-		} );
+		if ( ! schema ) {
+			return {};
+		}
+
+		return Object.fromEntries(
+			Object.entries( schema ).map( ( [ key, value ] ) => {
+				let attributes = value.attributes || [];
+				// If the block supports the "anchor" functionality, it needs to keep its ID attribute.
+				if ( hasAnchorSupport ) {
+					attributes = [ ...attributes, 'id' ];
+				}
+				return [
+					key,
+					{
+						...value,
+						attributes,
+						isMatch: isMatch ? isMatch : undefined,
+					},
+				];
+			} )
+		);
 	} );
 
-	return mergeWith( {}, ...schemas, ( objValue, srcValue, key ) => {
+	function mergeTagNameSchemaProperties( objValue, srcValue, key ) {
 		switch ( key ) {
 			case 'children': {
 				if ( objValue === '*' || srcValue === '*' ) {
@@ -68,7 +72,30 @@ export function getBlockContentSchemaFromTransforms( transforms, context ) {
 				};
 			}
 		}
-	} );
+	}
+
+	// A tagName schema is an object with children, attributes, require, and
+	// isMatch properties.
+	function mergeTagNameSchemas( a, b ) {
+		for ( const key in b ) {
+			a[ key ] = a[ key ]
+				? mergeTagNameSchemaProperties( a[ key ], b[ key ], key )
+				: { ...b[ key ] };
+		}
+		return a;
+	}
+
+	// A schema is an object with tagName schemas by tag name.
+	function mergeSchemas( a, b ) {
+		for ( const key in b ) {
+			a[ key ] = a[ key ]
+				? mergeTagNameSchemas( a[ key ], b[ key ] )
+				: { ...b[ key ] };
+		}
+		return a;
+	}
+
+	return schemas.reduce( mergeSchemas, {} );
 }
 
 /**
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 6c34fea8d95a8d..2f4bab2b5f2589 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -1,28 +1,22 @@
-/* eslint no-console: [ 'error', { allow: [ 'error', 'warn' ] } ] */
-
-/**
- * External dependencies
- */
-import { camelCase } from 'change-case';
-
 /**
  * WordPress dependencies
  */
 import { select, dispatch } from '@wordpress/data';
 import { _x } from '@wordpress/i18n';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
 import i18nBlockSchema from './i18n-block.json';
-import { BLOCK_ICON_DEFAULT } from './constants';
 import { store as blocksStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 /**
  * An icon type definition. One of a Dashicon slug, an element,
  * or a component.
  *
- * @typedef {(string|WPElement|WPComponent)} WPIcon
+ * @typedef {(string|Element|Component)} WPIcon
  *
  * @see https://developer.wordpress.org/resource/dashicons/
  */
@@ -117,10 +111,10 @@ import { store as blocksStore } from '../store';
  * @property {string[]}           [keywords]    Additional keywords to produce block
  *                                              type as result in search interfaces.
  * @property {Object}             [attributes]  Block type attributes.
- * @property {WPComponent}        [save]        Optional component describing
+ * @property {Component}          [save]        Optional component describing
  *                                              serialized markup structure of a
  *                                              block type.
- * @property {WPComponent}        edit          Component rendering an element to
+ * @property {Component}          edit          Component rendering an element to
  *                                              manipulate the attributes of a block
  *                                              in the context of an editor.
  * @property {WPBlockVariation[]} [variations]  The list of block variations.
@@ -129,8 +123,6 @@ import { store as blocksStore } from '../store';
  *                                              then no preview is shown.
  */
 
-export const serverSideBlockDefinitions = {};
-
 function isObject( object ) {
 	return object !== null && typeof object === 'object';
 }
@@ -138,52 +130,22 @@ function isObject( object ) {
 /**
  * Sets the server side block definition of blocks.
  *
+ * Ignored from documentation due to being marked as unstable.
+ *
+ * @ignore
+ *
  * @param {Object} definitions Server-side block definitions
  */
 // eslint-disable-next-line camelcase
 export function unstable__bootstrapServerSideBlockDefinitions( definitions ) {
-	for ( const blockName of Object.keys( definitions ) ) {
-		// Don't overwrite if already set. It covers the case when metadata
-		// was initialized from the server.
-		if ( serverSideBlockDefinitions[ blockName ] ) {
-			// We still need to polyfill `apiVersion` for WordPress version
-			// lower than 5.7. If it isn't present in the definition shared
-			// from the server, we try to fallback to the definition passed.
-			// @see https://github.com/WordPress/gutenberg/pull/29279
-			if (
-				serverSideBlockDefinitions[ blockName ].apiVersion ===
-					undefined &&
-				definitions[ blockName ].apiVersion
-			) {
-				serverSideBlockDefinitions[ blockName ].apiVersion =
-					definitions[ blockName ].apiVersion;
-			}
-			// The `ancestor` prop is not included in the definitions shared
-			// from the server yet, so it needs to be polyfilled as well.
-			// @see https://github.com/WordPress/gutenberg/pull/39894
-			if (
-				serverSideBlockDefinitions[ blockName ].ancestor ===
-					undefined &&
-				definitions[ blockName ].ancestor
-			) {
-				serverSideBlockDefinitions[ blockName ].ancestor =
-					definitions[ blockName ].ancestor;
-			}
-			continue;
-		}
-
-		serverSideBlockDefinitions[ blockName ] = Object.fromEntries(
-			Object.entries( definitions[ blockName ] )
-				.filter(
-					( [ , value ] ) => value !== null && value !== undefined
-				)
-				.map( ( [ key, value ] ) => [ camelCase( key ), value ] )
-		);
+	const { addBootstrappedBlockType } = unlock( dispatch( blocksStore ) );
+	for ( const [ name, blockType ] of Object.entries( definitions ) ) {
+		addBootstrappedBlockType( name, blockType );
 	}
 }
 
 /**
- * Gets block settings from metadata loaded from `block.json` file.
+ * Gets block settings from metadata loaded from `block.json` file
  *
  * @param {Object} metadata            Block metadata loaded from `block.json`.
  * @param {string} metadata.textdomain Textdomain to use with translations.
@@ -203,10 +165,13 @@ function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
 		'attributes',
 		'providesContext',
 		'usesContext',
+		'selectors',
 		'supports',
 		'styles',
 		'example',
 		'variations',
+		'blockHooks',
+		'allowedBlocks',
 	];
 
 	const settings = Object.fromEntries(
@@ -236,7 +201,8 @@ function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
  * behavior. Once registered, the block is made available as an option to any
  * editor interface where blocks are implemented.
  *
- * For more in-depth information on registering a custom block see the [Create a block tutorial](docs/how-to-guides/block-tutorial/README.md)
+ * For more in-depth information on registering a custom block see the
+ * [Create a block tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/).
  *
  * @param {string|Object} blockNameOrMetadata Block type name or its metadata.
  * @param {Object}        settings            Block settings.
@@ -253,7 +219,7 @@ function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
  * } );
  * ```
  *
- * @return {?WPBlockType} The block, if it has been successfully registered;
+ * @return {WPBlockType | undefined} The block, if it has been successfully registered;
  *                    otherwise `undefined`.
  */
 export function registerBlockType( blockNameOrMetadata, settings ) {
@@ -262,43 +228,31 @@ export function registerBlockType( blockNameOrMetadata, settings ) {
 		: blockNameOrMetadata;
 
 	if ( typeof name !== 'string' ) {
-		console.error( 'Block names must be strings.' );
+		warning( 'Block names must be strings.' );
 		return;
 	}
 
 	if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) {
-		console.error(
+		warning(
 			'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 		);
 		return;
 	}
 	if ( select( blocksStore ).getBlockType( name ) ) {
-		console.error( 'Block "' + name + '" is already registered.' );
+		warning( 'Block "' + name + '" is already registered.' );
 		return;
 	}
 
+	const { addBootstrappedBlockType, addUnprocessedBlockType } = unlock(
+		dispatch( blocksStore )
+	);
+
 	if ( isObject( blockNameOrMetadata ) ) {
-		unstable__bootstrapServerSideBlockDefinitions( {
-			[ name ]: getBlockSettingsFromMetadata( blockNameOrMetadata ),
-		} );
+		const metadata = getBlockSettingsFromMetadata( blockNameOrMetadata );
+		addBootstrappedBlockType( name, metadata );
 	}
 
-	const blockType = {
-		name,
-		icon: BLOCK_ICON_DEFAULT,
-		keywords: [],
-		attributes: {},
-		providesContext: {},
-		usesContext: [],
-		supports: {},
-		styles: [],
-		variations: [],
-		save: () => null,
-		...serverSideBlockDefinitions?.[ name ],
-		...settings,
-	};
-
-	dispatch( blocksStore ).__experimentalRegisterBlockType( blockType );
+	addUnprocessedBlockType( name, settings );
 
 	return select( blocksStore ).getBlockType( name );
 }
@@ -424,13 +378,13 @@ export function unregisterBlockCollection( namespace ) {
  * };
  * ```
  *
- * @return {?WPBlockType} The previous block value, if it has been successfully
+ * @return {WPBlockType | undefined} The previous block value, if it has been successfully
  *                    unregistered; otherwise `undefined`.
  */
 export function unregisterBlockType( name ) {
 	const oldBlock = select( blocksStore ).getBlockType( name );
 	if ( ! oldBlock ) {
-		console.error( 'Block "' + name + '" is not registered.' );
+		warning( 'Block "' + name + '" is not registered.' );
 		return;
 	}
 	dispatch( blocksStore ).removeBlockTypes( name );
@@ -510,6 +464,10 @@ export function setDefaultBlockName( name ) {
 /**
  * Assigns name of block for handling block grouping interactions.
  *
+ * This function lets you select a different block to group other blocks in instead of the
+ * default `core/group` block. This function must be used in a component or when the DOM is fully
+ * loaded. See https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dom-ready/
+ *
  * @param {string} name Block name.
  *
  * @example
@@ -520,7 +478,7 @@ export function setDefaultBlockName( name ) {
  *
  *     return (
  *         <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }>
- *             { __( 'Set the default block to Heading' ) }
+ *             { __( 'Wrap in columns' ) }
  *         </Button>
  *     );
  * };
@@ -656,12 +614,13 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
 };
 
 /**
- * Registers a new block style for the given block.
+ * Registers a new block style for the given block types.
  *
- * For more information on connecting the styles with CSS [the official documentation](/docs/reference-guides/block-api/block-styles.md#styles)
+ * For more information on connecting the styles with CSS
+ * [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
  *
- * @param {string} blockName      Name of block (example: “core/latest-posts”).
- * @param {Object} styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
+ * @param {string|Array} blockNames     Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
+ * @param {Object}       styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
  *
  * @example
  * ```js
@@ -686,8 +645,8 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
  * };
  * ```
  */
-export const registerBlockStyle = ( blockName, styleVariation ) => {
-	dispatch( blocksStore ).addBlockStyles( blockName, styleVariation );
+export const registerBlockStyle = ( blockNames, styleVariation ) => {
+	dispatch( blocksStore ).addBlockStyles( blockNames, styleVariation );
 };
 
 /**
@@ -737,7 +696,8 @@ export const getBlockVariations = ( blockName, scope ) => {
 /**
  * Registers a new block variation for the given block type.
  *
- * For more information on block variations see [the official documentation ](/docs/reference-guides/block-api/block-variations.md)
+ * For more information on block variations see
+ * [the official documentation ](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/).
  *
  * @param {string}           blockName Name of the block (example: “core/columns”).
  * @param {WPBlockVariation} variation Object describing a block variation.
@@ -766,6 +726,10 @@ export const getBlockVariations = ( blockName, scope ) => {
  * ```
  */
 export const registerBlockVariation = ( blockName, variation ) => {
+	if ( typeof variation.name !== 'string' ) {
+		warning( 'Variation names must be unique strings.' );
+	}
+
 	dispatch( blocksStore ).addBlockVariations( blockName, variation );
 };
 
@@ -797,3 +761,191 @@ export const registerBlockVariation = ( blockName, variation ) => {
 export const unregisterBlockVariation = ( blockName, variationName ) => {
 	dispatch( blocksStore ).removeBlockVariations( blockName, variationName );
 };
+
+/**
+ * Registers a new block bindings source with an object defining its
+ * behavior. Once registered, the source is available to be connected
+ * to the supported block attributes.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {Object}   source                    Properties of the source to be registered.
+ * @param {string}   source.name               The unique and machine-readable name.
+ * @param {string}   [source.label]            Human-readable label. Optional when it is defined in the server.
+ * @param {Array}    [source.usesContext]      Optional array of context needed by the source only in the editor.
+ * @param {Function} [source.getValues]        Optional function to get the values from the source.
+ * @param {Function} [source.setValues]        Optional function to update multiple values connected to the source.
+ * @param {Function} [source.canUserEditValue] Optional function to determine if the user can edit the value.
+ *
+ * @example
+ * ```js
+ * import { _x } from '@wordpress/i18n';
+ * import { registerBlockBindingsSource } from '@wordpress/blocks'
+ *
+ * registerBlockBindingsSource( {
+ *     name: 'plugin/my-custom-source',
+ *     label: _x( 'My Custom Source', 'block bindings source' ),
+ *     usesContext: [ 'postType' ],
+ *     getValues: getSourceValues,
+ *     setValues: updateMyCustomValuesInBatch,
+ *     canUserEditValue: () => true,
+ * } );
+ * ```
+ */
+export const registerBlockBindingsSource = ( source ) => {
+	const {
+		name,
+		label,
+		usesContext,
+		getValues,
+		setValues,
+		canUserEditValue,
+		getFieldsList,
+	} = source;
+
+	const existingSource = unlock(
+		select( blocksStore )
+	).getBlockBindingsSource( name );
+
+	/*
+	 * Check if the source has been already registered on the client.
+	 * If any property expected to be "client-only" is defined, return a warning.
+	 */
+	const serverProps = [ 'label', 'usesContext' ];
+	for ( const prop in existingSource ) {
+		if ( ! serverProps.includes( prop ) && existingSource[ prop ] ) {
+			warning(
+				'Block bindings source "' + name + '" is already registered.'
+			);
+			return;
+		}
+	}
+
+	// Check the `name` property is correct.
+	if ( ! name ) {
+		warning( 'Block bindings source must contain a name.' );
+		return;
+	}
+
+	if ( typeof name !== 'string' ) {
+		warning( 'Block bindings source name must be a string.' );
+		return;
+	}
+
+	if ( /[A-Z]+/.test( name ) ) {
+		warning(
+			'Block bindings source name must not contain uppercase characters.'
+		);
+		return;
+	}
+
+	if ( ! /^[a-z0-9/-]+$/.test( name ) ) {
+		warning(
+			'Block bindings source name must contain only valid characters: lowercase characters, hyphens, or digits. Example: my-plugin/my-custom-source.'
+		);
+		return;
+	}
+
+	if ( ! /^[a-z0-9-]+\/[a-z0-9-]+$/.test( name ) ) {
+		warning(
+			'Block bindings source name must contain a namespace and valid characters. Example: my-plugin/my-custom-source.'
+		);
+		return;
+	}
+
+	// Check the `label` property is correct.
+
+	if ( ! label && ! existingSource?.label ) {
+		warning( 'Block bindings source must contain a label.' );
+		return;
+	}
+
+	if ( label && typeof label !== 'string' ) {
+		warning( 'Block bindings source label must be a string.' );
+		return;
+	}
+
+	if ( label && existingSource?.label && label !== existingSource?.label ) {
+		warning( 'Block bindings "' + name + '" source label was overriden.' );
+	}
+
+	// Check the `usesContext` property is correct.
+	if ( usesContext && ! Array.isArray( usesContext ) ) {
+		warning( 'Block bindings source usesContext must be an array.' );
+		return;
+	}
+
+	// Check the `getValues` property is correct.
+	if ( getValues && typeof getValues !== 'function' ) {
+		warning( 'Block bindings source getValues must be a function.' );
+		return;
+	}
+
+	// Check the `setValues` property is correct.
+	if ( setValues && typeof setValues !== 'function' ) {
+		warning( 'Block bindings source setValues must be a function.' );
+		return;
+	}
+
+	// Check the `canUserEditValue` property is correct.
+	if ( canUserEditValue && typeof canUserEditValue !== 'function' ) {
+		warning( 'Block bindings source canUserEditValue must be a function.' );
+		return;
+	}
+
+	// Check the `getFieldsList` property is correct.
+	if ( getFieldsList && typeof getFieldsList !== 'function' ) {
+		// eslint-disable-next-line no-console
+		warning( 'Block bindings source getFieldsList must be a function.' );
+		return;
+	}
+
+	return unlock( dispatch( blocksStore ) ).addBlockBindingsSource( source );
+};
+
+/**
+ * Unregisters a block bindings source by providing its name.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {string} name The name of the block bindings source to unregister.
+ *
+ * @example
+ * ```js
+ * import { unregisterBlockBindingsSource } from '@wordpress/blocks';
+ *
+ * unregisterBlockBindingsSource( 'plugin/my-custom-source' );
+ * ```
+ */
+export function unregisterBlockBindingsSource( name ) {
+	const oldSource = getBlockBindingsSource( name );
+	if ( ! oldSource ) {
+		warning( 'Block bindings source "' + name + '" is not registered.' );
+		return;
+	}
+	unlock( dispatch( blocksStore ) ).removeBlockBindingsSource( name );
+}
+
+/**
+ * Returns a registered block bindings source by its name.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @param {string} name Block bindings source name.
+ *
+ * @return {?Object} Block bindings source.
+ */
+export function getBlockBindingsSource( name ) {
+	return unlock( select( blocksStore ) ).getBlockBindingsSource( name );
+}
+
+/**
+ * Returns all registered block bindings sources.
+ *
+ * @since 6.7.0 Introduced in WordPress core.
+ *
+ * @return {Array} Block bindings sources.
+ */
+export function getBlockBindingsSources() {
+	return unlock( select( blocksStore ) ).getAllBlockBindingsSources();
+}
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 3300e0893d2459..f1fb28e9d9a361 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -10,6 +10,7 @@ import {
 import { hasFilter, applyFilters } from '@wordpress/hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { removep } from '@wordpress/autop';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -81,12 +82,14 @@ const innerBlocksPropsProvider = {};
  */
 export function getBlockProps( props = {} ) {
 	const { blockType, attributes } = blockPropsProvider;
-	return applyFilters(
-		'blocks.getSaveContent.extraProps',
-		{ ...props },
-		blockType,
-		attributes
-	);
+	return getBlockProps.skipFilters
+		? props
+		: applyFilters(
+				'blocks.getSaveContent.extraProps',
+				{ ...props },
+				blockType,
+				attributes
+		  );
 }
 
 /**
@@ -96,6 +99,11 @@ export function getBlockProps( props = {} ) {
  */
 export function getInnerBlocksProps( props = {} ) {
 	const { innerBlocks } = innerBlocksPropsProvider;
+	// Allow a different component to be passed to getSaveElement to handle
+	// inner blocks, bypassing the default serialisation.
+	if ( ! Array.isArray( innerBlocks ) ) {
+		return { ...props, children: innerBlocks };
+	}
 	// Value is an array of blocks, so defer to block serializer.
 	const html = serialize( innerBlocks, { isInnerBlocks: true } );
 	// Use special-cased raw HTML tag to avoid default escaping.
@@ -120,6 +128,11 @@ export function getSaveElement(
 	innerBlocks = []
 ) {
 	const blockType = normalizeBlockType( blockTypeOrName );
+
+	if ( ! blockType?.save ) {
+		return null;
+	}
+
 	let { save } = blockType;
 
 	// Component classes are unsupported for save since serialization must
@@ -164,9 +177,9 @@ export function getSaveElement(
 	/**
 	 * Filters the save result of a block during serialization.
 	 *
-	 * @param {WPElement} element    Block save result.
-	 * @param {WPBlock}   blockType  Block type definition.
-	 * @param {Object}    attributes Block attributes.
+	 * @param {Element} element    Block save result.
+	 * @param {WPBlock} blockType  Block type definition.
+	 * @param {Object}  attributes Block attributes.
 	 */
 	return applyFilters(
 		'blocks.getSaveElement',
@@ -225,10 +238,26 @@ export function getCommentAttributes( blockType, attributes ) {
 				return accumulator;
 			}
 
+			// Ignore all local attributes
+			if ( attributeSchema.role === 'local' ) {
+				return accumulator;
+			}
+
+			if ( attributeSchema.__experimentalRole === 'local' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockType?.name } block.`,
+				} );
+				return accumulator;
+			}
+
 			// Ignore default value.
 			if (
 				'default' in attributeSchema &&
-				attributeSchema.default === value
+				JSON.stringify( attributeSchema.default ) ===
+					JSON.stringify( value )
 			) {
 				return accumulator;
 			}
@@ -379,7 +408,8 @@ export function __unstableSerializeAndClean( blocks ) {
 	// pre-block-editor removep'd content formatting.
 	if (
 		blocks.length === 1 &&
-		blocks[ 0 ].name === getFreeformContentHandlerName()
+		blocks[ 0 ].name === getFreeformContentHandlerName() &&
+		blocks[ 0 ].name === 'core/freeform'
 	) {
 		content = removep( content );
 	}
diff --git a/packages/blocks/src/api/templates.js b/packages/blocks/src/api/templates.js
index bc76218892688a..71231121362a49 100644
--- a/packages/blocks/src/api/templates.js
+++ b/packages/blocks/src/api/templates.js
@@ -31,6 +31,42 @@ export function doBlocksMatchTemplate( blocks = [], template = [] ) {
 	);
 }
 
+const isHTMLAttribute = ( attributeDefinition ) =>
+	attributeDefinition?.source === 'html';
+
+const isQueryAttribute = ( attributeDefinition ) =>
+	attributeDefinition?.source === 'query';
+
+function normalizeAttributes( schema, values ) {
+	if ( ! values ) {
+		return {};
+	}
+
+	return Object.fromEntries(
+		Object.entries( values ).map( ( [ key, value ] ) => [
+			key,
+			normalizeAttribute( schema[ key ], value ),
+		] )
+	);
+}
+
+function normalizeAttribute( definition, value ) {
+	if ( isHTMLAttribute( definition ) && Array.isArray( value ) ) {
+		// Introduce a deprecated call at this point
+		// When we're confident that "children" format should be removed from the templates.
+
+		return renderToString( value );
+	}
+
+	if ( isQueryAttribute( definition ) && value ) {
+		return value.map( ( subValues ) => {
+			return normalizeAttributes( definition.query, subValues );
+		} );
+	}
+
+	return value;
+}
+
 /**
  * Synchronize a block list with a block template.
  *
@@ -67,42 +103,6 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) {
 			// before creating the blocks.
 
 			const blockType = getBlockType( name );
-			const isHTMLAttribute = ( attributeDefinition ) =>
-				attributeDefinition?.source === 'html';
-			const isQueryAttribute = ( attributeDefinition ) =>
-				attributeDefinition?.source === 'query';
-
-			const normalizeAttributes = ( schema, values ) => {
-				if ( ! values ) {
-					return {};
-				}
-
-				return Object.fromEntries(
-					Object.entries( values ).map( ( [ key, value ] ) => [
-						key,
-						normalizeAttribute( schema[ key ], value ),
-					] )
-				);
-			};
-			const normalizeAttribute = ( definition, value ) => {
-				if ( isHTMLAttribute( definition ) && Array.isArray( value ) ) {
-					// Introduce a deprecated call at this point
-					// When we're confident that "children" format should be removed from the templates.
-
-					return renderToString( value );
-				}
-
-				if ( isQueryAttribute( definition ) && value ) {
-					return value.map( ( subValues ) => {
-						return normalizeAttributes(
-							definition.query,
-							subValues
-						);
-					} );
-				}
-
-				return value;
-			};
 
 			const normalizedAttributes = normalizeAttributes(
 				blockType?.attributes ?? {},
diff --git a/packages/blocks/src/api/test/factory.js b/packages/blocks/src/api/test/factory.js
index 84d7161659928a..22d069205113bf 100644
--- a/packages/blocks/src/api/test/factory.js
+++ b/packages/blocks/src/api/test/factory.js
@@ -17,6 +17,7 @@ import {
 	findTransform,
 	isWildcardBlockTransform,
 	isContainerGroupBlock,
+	getBlockFromExample,
 } from '../factory';
 import {
 	getBlockType,
@@ -2276,4 +2277,33 @@ describe( 'block factory', () => {
 			expect( isContainerGroupBlock( 'core/group' ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'getBlockFromExample', () => {
+		it( 'should replace unregistered block with core/missing block', () => {
+			registerBlockType( 'core/missing', {
+				title: 'Unsupported',
+			} );
+			registerBlockType( 'core/paragraph', {
+				title: 'Paragraph',
+			} );
+			registerBlockType( 'core/group', {
+				title: 'A block that groups other blocks.',
+			} );
+			const example = {
+				innerBlocks: [
+					{ name: 'core/paragraph' },
+					{ name: 'core/image' },
+				],
+			};
+			expect(
+				getBlockFromExample( 'core/group', example )
+			).toMatchObject( {
+				name: 'core/group',
+				innerBlocks: [
+					{ name: 'core/paragraph' },
+					{ name: 'core/missing' },
+				],
+			} );
+		} );
+	} );
 } );
diff --git a/packages/blocks/src/api/test/matchers.js b/packages/blocks/src/api/test/matchers.js
index 2068ae18c6e066..894c18abe3a01a 100644
--- a/packages/blocks/src/api/test/matchers.js
+++ b/packages/blocks/src/api/test/matchers.js
@@ -22,9 +22,9 @@ describe( 'matchers', () => {
 			expect( typeof source ).toBe( 'function' );
 		} );
 
-		it( 'should return HTML equivalent WPElement of matched element', () => {
+		it( 'should return HTML equivalent React Element of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
-			// between a string and WPElement representation.
+			// between a string and React Element representation.
 			const html =
 				'<blockquote><p>A delicious sundae dessert</p></blockquote>';
 			const match = parse( html, sources.children() );
@@ -42,9 +42,9 @@ describe( 'matchers', () => {
 			expect( typeof source ).toBe( 'function' );
 		} );
 
-		it( 'should return HTML equivalent WPElement of matched element', () => {
+		it( 'should return HTML equivalent React Element of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
-			// between a string and WPElement representation.
+			// between a string and React Element representation.
 			const html =
 				'<blockquote><p>A delicious sundae dessert</p></blockquote>';
 			const match = parse( html, sources.node() );
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
index 58bf57726a3b9b..5941415e61fe55 100644
--- a/packages/blocks/src/api/test/registration.js
+++ b/packages/blocks/src/api/test/registration.js
@@ -5,7 +5,7 @@
  */
 import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
 import { logged } from '@wordpress/deprecated';
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -13,8 +13,11 @@ import { select } from '@wordpress/data';
 import {
 	registerBlockType,
 	registerBlockCollection,
+	registerBlockVariation,
+	registerBlockBindingsSource,
 	unregisterBlockCollection,
 	unregisterBlockType,
+	unregisterBlockBindingsSource,
 	setFreeformContentHandlerName,
 	getFreeformContentHandlerName,
 	setUnregisteredTypeHandlerName,
@@ -26,14 +29,17 @@ import {
 	getBlockType,
 	getBlockTypes,
 	getBlockSupport,
+	getBlockVariations,
+	getBlockBindingsSource,
 	hasBlockSupport,
 	isReusableBlock,
-	serverSideBlockDefinitions,
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
 } from '../registration';
 import { BLOCK_ICON_DEFAULT, DEPRECATED_ENTRY_KEYS } from '../constants';
 import { omit } from '../utils';
 import { store as blocksStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { logged as warningLoggedSet } from '../../../../warning/src/utils';
 
 const noop = () => {};
 
@@ -49,30 +55,26 @@ describe( 'blocks', () => {
 		title: 'block title',
 	};
 
-	beforeAll( () => {
-		// Initialize the block store.
-		require( '../../store' );
-	} );
-
 	afterEach( () => {
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
+		const registeredNames = Object.keys(
+			unlock( select( blocksStore ) ).getUnprocessedBlockTypes()
+		);
+		dispatch( blocksStore ).removeBlockTypes( registeredNames );
 		setFreeformContentHandlerName( undefined );
 		setUnregisteredTypeHandlerName( undefined );
 		setDefaultBlockName( undefined );
-		unstable__bootstrapServerSideBlockDefinitions( {} );
 
 		// Reset deprecation logging to ensure we properly track warnings.
 		for ( const key in logged ) {
 			delete logged[ key ];
 		}
+		warningLoggedSet.clear();
 	} );
 
 	describe( 'registerBlockType()', () => {
 		it( 'should reject numbers', () => {
 			const block = registerBlockType( 999 );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must be strings.'
 			);
 			expect( block ).toBeUndefined();
@@ -80,7 +82,7 @@ describe( 'blocks', () => {
 
 		it( 'should reject blocks without a namespace', () => {
 			const block = registerBlockType( 'doing-it-wrong' );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 			);
 			expect( block ).toBeUndefined();
@@ -88,7 +90,7 @@ describe( 'blocks', () => {
 
 		it( 'should reject blocks with too many namespaces', () => {
 			const block = registerBlockType( 'doing/it/wrong' );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 			);
 			expect( block ).toBeUndefined();
@@ -96,15 +98,26 @@ describe( 'blocks', () => {
 
 		it( 'should reject blocks with invalid characters', () => {
 			const block = registerBlockType( 'still/_doing_it_wrong' );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 			);
 			expect( block ).toBeUndefined();
 		} );
 
+		it( 'Should reject blocks with the block name itself as the only parent attribute value', () => {
+			const block = registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				parent: [ 'core/test-block' ],
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block "core/test-block" cannot be a parent of itself. Please remove the block name from the parent list.'
+			);
+			expect( block ).toBeUndefined();
+		} );
+
 		it( 'should reject blocks with uppercase characters', () => {
 			const block = registerBlockType( 'Core/Paragraph' );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 			);
 			expect( block ).toBeUndefined();
@@ -115,7 +128,7 @@ describe( 'blocks', () => {
 				'my-plugin/4-fancy-block',
 				defaultBlockSettings
 			);
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block'
 			);
 			expect( block ).toBeUndefined();
@@ -126,7 +139,7 @@ describe( 'blocks', () => {
 				'my-plugin/fancy-block-4',
 				defaultBlockSettings
 			);
-			expect( console ).not.toHaveErrored();
+			expect( console ).not.toHaveWarned();
 			expect( block ).toEqual( {
 				name: 'my-plugin/fancy-block-4',
 				icon: { src: BLOCK_ICON_DEFAULT },
@@ -134,9 +147,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 				save: noop,
 				category: 'text',
 				title: 'block title',
@@ -149,7 +164,7 @@ describe( 'blocks', () => {
 				'core/test-block',
 				defaultBlockSettings
 			);
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block "core/test-block" is already registered.'
 			);
 			expect( block ).toBeUndefined();
@@ -162,7 +177,7 @@ describe( 'blocks', () => {
 				keywords: [],
 				save: 'invalid',
 			} );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'The "save" property must be a valid function.'
 			);
 			expect( block ).toBeUndefined();
@@ -171,7 +186,7 @@ describe( 'blocks', () => {
 		it( 'should reject blocks with an invalid edit function', () => {
 			const blockType = {
 					save: noop,
-					edit: 'not-a-function',
+					edit: {},
 					category: 'text',
 					title: 'block title',
 				},
@@ -179,8 +194,8 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-6',
 					blockType
 				);
-			expect( console ).toHaveErroredWith(
-				'The "edit" property must be a valid function.'
+			expect( console ).toHaveWarnedWith(
+				'The "edit" property must be a valid component.'
 			);
 			expect( block ).toBeUndefined();
 		} );
@@ -225,7 +240,7 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-9',
 					blockType
 				);
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'The block "my-plugin/fancy-block-9" must have a title.'
 			);
 			expect( block ).toBeUndefined();
@@ -242,7 +257,7 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-10',
 					blockType
 				);
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'The block "my-plugin/fancy-block-10" must have a title.'
 			);
 			expect( block ).toBeUndefined();
@@ -259,7 +274,7 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-11',
 					blockType
 				);
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block titles must be strings.'
 			);
 			expect( block ).toBeUndefined();
@@ -280,9 +295,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 				save: expect.any( Function ),
 			} );
 		} );
@@ -316,9 +333,11 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
+					blockHooks: {},
 				}
 			);
 		} );
@@ -348,9 +367,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -358,11 +379,14 @@ describe( 'blocks', () => {
 			const blockName = 'core/test-block-with-incompatible-keys';
 			unstable__bootstrapServerSideBlockDefinitions( {
 				[ blockName ]: {
-					api_version: 2,
+					api_version: 3,
 					provides_context: {
 						fontSize: 'fontSize',
 					},
 					uses_context: [ 'textColor' ],
+					block_hooks: {
+						'tests/my-block': 'after',
+					},
 				},
 			} );
 
@@ -371,7 +395,7 @@ describe( 'blocks', () => {
 			};
 			registerBlockType( blockName, blockType );
 			expect( getBlockType( blockName ) ).toEqual( {
-				apiVersion: 2,
+				apiVersion: 3,
 				name: blockName,
 				save: expect.any( Function ),
 				title: 'block title',
@@ -382,69 +406,84 @@ describe( 'blocks', () => {
 				},
 				usesContext: [ 'textColor' ],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {
+					'tests/my-block': 'after',
+				},
 			} );
 		} );
 
-		// This test can be removed once the polyfill for apiVersion gets removed.
-		it( 'should apply apiVersion on the client when not set on the server', () => {
-			const blockName = 'core/test-block-back-compat';
-			unstable__bootstrapServerSideBlockDefinitions( {
-				[ blockName ]: {
-					category: 'widgets',
-				},
-			} );
+		it( 'should merge settings provided by server and client', () => {
+			const blockName = 'core/test-block-with-merged-settings';
 			unstable__bootstrapServerSideBlockDefinitions( {
 				[ blockName ]: {
-					apiVersion: 2,
-					category: 'ignored',
+					variations: [
+						{ name: 'foo', label: 'Foo' },
+						{ name: 'baz', label: 'Baz', description: 'Testing' },
+					],
 				},
 			} );
 
 			const blockType = {
-				title: 'block title',
+				title: 'block settings merge',
+				variations: [
+					{ name: 'bar', label: 'Bar' },
+					{ name: 'baz', label: 'Baz', icon: 'layout' },
+				],
 			};
 			registerBlockType( blockName, blockType );
 			expect( getBlockType( blockName ) ).toEqual( {
-				apiVersion: 2,
 				name: blockName,
 				save: expect.any( Function ),
-				title: 'block title',
-				category: 'widgets',
+				title: 'block settings merge',
 				icon: { src: BLOCK_ICON_DEFAULT },
 				attributes: {},
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
-				variations: [],
+				variations: [
+					{ name: 'foo', label: 'Foo' },
+					{
+						description: 'Testing',
+						name: 'baz',
+						label: 'Baz',
+						icon: 'layout',
+					},
+					{ name: 'bar', label: 'Bar' },
+				],
+				blockHooks: {},
 			} );
 		} );
 
-		// This test can be removed once the polyfill for ancestor gets removed.
-		it( 'should apply ancestor on the client when not set on the server', () => {
-			const blockName = 'core/test-block-with-ancestor';
+		// This test can be removed once the polyfill for blockHooks gets removed.
+		it( 'should polyfill blockHooks using metadata on the client when not set on the server', () => {
+			const blockName = 'tests/hooked-block';
 			unstable__bootstrapServerSideBlockDefinitions( {
 				[ blockName ]: {
 					category: 'widgets',
 				},
 			} );
-			unstable__bootstrapServerSideBlockDefinitions( {
-				[ blockName ]: {
-					ancestor: 'core/test-block-ancestor',
-					category: 'ignored',
-				},
-			} );
 
 			const blockType = {
 				title: 'block title',
 			};
-			registerBlockType( blockName, blockType );
+			registerBlockType(
+				{
+					name: blockName,
+					blockHooks: {
+						'tests/block': 'firstChild',
+					},
+					category: 'ignored',
+				},
+				blockType
+			);
 			expect( getBlockType( blockName ) ).toEqual( {
-				ancestor: 'core/test-block-ancestor',
 				name: blockName,
 				save: expect.any( Function ),
 				title: 'block title',
@@ -454,9 +493,13 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {
+					'tests/block': 'firstChild',
+				},
 			} );
 		} );
 
@@ -471,7 +514,7 @@ describe( 'blocks', () => {
 				'core/test-block-icon-normalize-element',
 				blockType
 			);
-			expect( console ).toHaveErrored();
+			expect( console ).toHaveWarned();
 			expect( block ).toBeUndefined();
 		} );
 
@@ -522,9 +565,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -553,9 +598,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -598,9 +645,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -657,9 +706,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -683,9 +734,44 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
+				supports: {},
+				styles: [],
+				variations: [],
+				blockHooks: {},
+			} );
+		} );
+
+		it( 'should transform parent string to array', () => {
+			const blockType = {
+				save: noop,
+				category: 'text',
+				title: 'block title',
+				parent: 'core/paragraph',
+			};
+			const block = registerBlockType(
+				'core/test-block-parent-string',
+				blockType
+			);
+			expect( console ).toHaveWarnedWith(
+				'Parent must be undefined or an array of strings (block types), but it is a string.'
+			);
+			expect( block ).toEqual( {
+				name: 'core/test-block-parent-string',
+				save: noop,
+				category: 'text',
+				title: 'block title',
+				icon: { src: BLOCK_ICON_DEFAULT },
+				attributes: {},
+				providesContext: {},
+				usesContext: [],
+				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
+				parent: [ 'core/paragraph' ],
 			} );
 		} );
 
@@ -709,7 +795,7 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-12',
 					defaultBlockSettings
 				);
-				expect( console ).toHaveErroredWith(
+				expect( console ).toHaveWarnedWith(
 					'The block "my-plugin/fancy-block-12" must have a title.'
 				);
 				expect( block ).toBeUndefined();
@@ -727,7 +813,7 @@ describe( 'blocks', () => {
 					'my-plugin/fancy-block-13',
 					defaultBlockSettings
 				);
-				expect( console ).toHaveErroredWith(
+				expect( console ).toHaveWarnedWith(
 					'Block settings must be a valid object.'
 				);
 				expect( block ).toBeUndefined();
@@ -769,11 +855,12 @@ describe( 'blocks', () => {
 										providesContext: {},
 										usesContext: [],
 										keywords: [],
+										selectors: {},
 										supports: {},
 										styles: [],
 										variations: [],
+										blockHooks: {},
 										save: () => null,
-										...serverSideBlockDefinitions[ name ],
 										...blockSettingsWithDeprecations,
 									},
 									DEPRECATED_ENTRY_KEYS
@@ -873,6 +960,34 @@ describe( 'blocks', () => {
 					'Declaring non-string block descriptions is deprecated since version 6.2.'
 				);
 			} );
+
+			it( 're-applies block filters', () => {
+				// register block
+				registerBlockType( 'test/block', defaultBlockSettings );
+
+				// register a filter after registering a block
+				addFilter(
+					'blocks.registerBlockType',
+					'core/blocks/reapply',
+					( settings ) => ( {
+						...settings,
+						title: settings.title + ' filtered',
+					} )
+				);
+
+				// check that block type has unfiltered values
+				expect( getBlockType( 'test/block' ).title ).toBe(
+					'block title'
+				);
+
+				// reapply the block filters
+				dispatch( blocksStore ).reapplyBlockTypeFilters();
+
+				// check that block type has filtered values
+				expect( getBlockType( 'test/block' ).title ).toBe(
+					'block title filtered'
+				);
+			} );
 		} );
 
 		test( 'registers block from metadata', () => {
@@ -908,6 +1023,7 @@ describe( 'blocks', () => {
 				attributes: {},
 				providesContext: {},
 				usesContext: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [
@@ -918,6 +1034,7 @@ describe( 'blocks', () => {
 						keywords: [ 'variation' ],
 					},
 				],
+				blockHooks: {},
 				edit: Edit,
 				save: noop,
 			} );
@@ -974,6 +1091,7 @@ describe( 'blocks', () => {
 				attributes: {},
 				providesContext: {},
 				usesContext: [],
+				selectors: {},
 				supports: {},
 				styles: [
 					{
@@ -989,6 +1107,7 @@ describe( 'blocks', () => {
 						keywords: [ 'variation (translated)' ],
 					},
 				],
+				blockHooks: {},
 				edit: Edit,
 				save: noop,
 			} );
@@ -1020,7 +1139,7 @@ describe( 'blocks', () => {
 	describe( 'unregisterBlockType()', () => {
 		it( 'should fail if a block is not registered', () => {
 			const oldBlock = unregisterBlockType( 'core/test-block' );
-			expect( console ).toHaveErroredWith(
+			expect( console ).toHaveWarnedWith(
 				'Block "core/test-block" is not registered.'
 			);
 			expect( oldBlock ).toBeUndefined();
@@ -1039,13 +1158,15 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
+					blockHooks: {},
 				},
 			] );
 			const oldBlock = unregisterBlockType( 'core/test-block' );
-			expect( console ).not.toHaveErrored();
+			expect( console ).not.toHaveWarned();
 			expect( oldBlock ).toEqual( {
 				name: 'core/test-block',
 				save: noop,
@@ -1056,9 +1177,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 			expect( getBlockTypes() ).toEqual( [] );
 		} );
@@ -1135,9 +1258,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 
@@ -1160,9 +1285,11 @@ describe( 'blocks', () => {
 				providesContext: {},
 				usesContext: [],
 				keywords: [],
+				selectors: {},
 				supports: {},
 				styles: [],
 				variations: [],
+				blockHooks: {},
 			} );
 		} );
 	} );
@@ -1192,9 +1319,11 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
+					blockHooks: {},
 				},
 				{
 					name: 'core/test-block-with-settings',
@@ -1207,9 +1336,11 @@ describe( 'blocks', () => {
 					providesContext: {},
 					usesContext: [],
 					keywords: [],
+					selectors: {},
 					supports: {},
 					styles: [],
 					variations: [],
+					blockHooks: {},
 				},
 			] );
 		} );
@@ -1330,6 +1461,325 @@ describe( 'blocks', () => {
 			expect( isReusableBlock( block ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'registerBlockVariation', () => {
+		it( 'should warn when registering block variation without a name', () => {
+			registerBlockType( 'core/variation-block', defaultBlockSettings );
+			registerBlockVariation( 'core/variation-block', {
+				title: 'Variation Title',
+				description: 'Variation description',
+			} );
+
+			expect( console ).toHaveWarnedWith(
+				'Variation names must be unique strings.'
+			);
+			expect( getBlockVariations( 'core/variation-block' ) ).toEqual( [
+				{
+					title: 'Variation Title',
+					description: 'Variation description',
+				},
+			] );
+		} );
+	} );
+
+	describe( 'registerBlockBindingsSource', () => {
+		// Check the name is correct.
+		it( 'should contain name property', () => {
+			const source = registerBlockBindingsSource( {} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source must contain a name.'
+			);
+			expect( source ).toBeUndefined();
+		} );
+
+		it( 'should reject numbers', () => {
+			const source = registerBlockBindingsSource( { name: 1 } );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source name must be a string.'
+			);
+			expect( source ).toBeUndefined();
+		} );
+
+		it( 'should reject names with uppercase characters', () => {
+			registerBlockBindingsSource( {
+				name: 'Core/WrongName',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source name must not contain uppercase characters.'
+			);
+			expect(
+				getBlockBindingsSource( 'Core/WrongName' )
+			).toBeUndefined();
+		} );
+
+		it( 'should reject names with invalid characters', () => {
+			registerBlockBindingsSource( {
+				name: 'core/_wrong_name',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source name must contain only valid characters: lowercase characters, hyphens, or digits. Example: my-plugin/my-custom-source.'
+			);
+			expect(
+				getBlockBindingsSource( 'core/_wrong_name' )
+			).toBeUndefined();
+		} );
+
+		it( 'should reject invalid names without namespace', () => {
+			registerBlockBindingsSource( {
+				name: 'wrong-name',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source name must contain a namespace and valid characters. Example: my-plugin/my-custom-source.'
+			);
+			expect( getBlockBindingsSource( 'wrong-name' ) ).toBeUndefined();
+		} );
+
+		// Check the label is correct.
+		it( 'should contain label property', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source must contain a label.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		it( 'should reject invalid label', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 1,
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source label must be a string.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		it( 'should override label from the server', () => {
+			// Simulate bootstrap source from the server.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'Server label',
+			} );
+			// Override the source with a different label in the client.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'Client label',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings "core/testing" source label was overriden.'
+			);
+			const source = getBlockBindingsSource( 'core/testing' );
+			unregisterBlockBindingsSource( 'core/testing' );
+			expect( source.label ).toEqual( 'Client label' );
+		} );
+
+		it( 'should keep label from the server when not defined in the client', () => {
+			// Simulate bootstrap source from the server.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'Server label',
+			} );
+			// Override the source with a different label in the client.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+			} );
+			const source = getBlockBindingsSource( 'core/testing' );
+			unregisterBlockBindingsSource( 'core/testing' );
+			expect( source.label ).toEqual( 'Server label' );
+		} );
+
+		// Check the `usesContext` array is correct.
+		it( 'should reject invalid usesContext property', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				usesContext: 'should be an array',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source usesContext must be an array.'
+			);
+		} );
+
+		it( 'should add usesContext when only defined in the server', () => {
+			// Simulate bootstrap source from the server.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				usesContext: [ 'postId', 'postType' ],
+			} );
+			// Register source in the client without usesContext.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				getValue: () => 'value',
+			} );
+			const source = getBlockBindingsSource( 'core/testing' );
+			unregisterBlockBindingsSource( 'core/testing' );
+			expect( source.usesContext ).toEqual( [ 'postId', 'postType' ] );
+		} );
+
+		it( 'should add usesContext when only defined in the client', () => {
+			// Simulate bootstrap source from the server.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+			} );
+			// Register source in the client with usesContext.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				usesContext: [ 'postId', 'postType' ],
+				getValue: () => 'value',
+			} );
+			const source = getBlockBindingsSource( 'core/testing' );
+			unregisterBlockBindingsSource( 'core/testing' );
+			expect( source.usesContext ).toEqual( [ 'postId', 'postType' ] );
+		} );
+
+		it( 'should merge usesContext from server and client without duplicates', () => {
+			// Simulate bootstrap source from the server.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				usesContext: [ 'postId', 'postType' ],
+			} );
+			// Register source in the client with usesContext.
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				usesContext: [ 'postType', 'clientContext' ],
+				getValue: () => 'value',
+			} );
+			const source = getBlockBindingsSource( 'core/testing' );
+			unregisterBlockBindingsSource( 'core/testing' );
+			expect( source.usesContext ).toEqual( [
+				'postId',
+				'postType',
+				'clientContext',
+			] );
+		} );
+
+		// Check the `getValues` callback is correct.
+		it( 'should reject invalid getValues callback', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				getValues: 'should be a function',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source getValues must be a function.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		// Check the `setValues` callback is correct.
+		it( 'should reject invalid setValues callback', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				setValues: 'should be a function',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source setValues must be a function.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		// Check the `canUserEditValue` callback is correct.
+		it( 'should reject invalid canUserEditValue callback', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				canUserEditValue: 'should be a function',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source canUserEditValue must be a function.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		// Check the `getFieldsList` callback is correct.
+		it( 'should reject invalid getFieldsList callback', () => {
+			registerBlockBindingsSource( {
+				name: 'core/testing',
+				label: 'testing',
+				getFieldsList: 'should be a function',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source getFieldsList must be a function.'
+			);
+			expect( getBlockBindingsSource( 'core/testing' ) ).toBeUndefined();
+		} );
+
+		// Check correct sources are registered as expected.
+		it( 'should register a valid source', () => {
+			const sourceProperties = {
+				label: 'Valid Source',
+				usesContext: [ 'postId' ],
+				getValues: () => 'value',
+				setValues: () => 'new values',
+				canUserEditValue: () => true,
+				getFieldsList: () => {
+					return { field: 'value' };
+				},
+			};
+			registerBlockBindingsSource( {
+				name: 'core/valid-source',
+				...sourceProperties,
+			} );
+			expect( getBlockBindingsSource( 'core/valid-source' ) ).toEqual(
+				sourceProperties
+			);
+			unregisterBlockBindingsSource( 'core/valid-source' );
+		} );
+
+		it( 'should register a source with default values', () => {
+			registerBlockBindingsSource( {
+				name: 'core/valid-source',
+				label: 'Valid Source',
+			} );
+			const source = getBlockBindingsSource( 'core/valid-source' );
+			expect( source.usesContext ).toBeUndefined();
+			expect( source.getValues ).toBeUndefined();
+			expect( source.setValues ).toBeUndefined();
+			expect( source.canUserEditValue ).toBeUndefined();
+			expect( source.getFieldsList ).toBeUndefined();
+			unregisterBlockBindingsSource( 'core/valid-source' );
+		} );
+
+		it( 'should reject registering the same source twice', () => {
+			const source = {
+				name: 'core/test-source',
+				label: 'Test Source',
+				getValues: () => 'value',
+			};
+			registerBlockBindingsSource( source );
+			registerBlockBindingsSource( source );
+			unregisterBlockBindingsSource( 'core/test-source' );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source "core/test-source" is already registered.'
+			);
+		} );
+	} );
+
+	describe( 'unregisterBlockBindingsSource', () => {
+		it( 'should remove an existing block bindings source', () => {
+			registerBlockBindingsSource( {
+				name: 'core/test-source',
+				label: 'Test Source',
+			} );
+			unregisterBlockBindingsSource( 'core/test-source' );
+			expect(
+				getBlockBindingsSource( 'core/test-source' )
+			).toBeUndefined();
+		} );
+
+		it( 'should reject removing a source that does not exist', () => {
+			unregisterBlockBindingsSource( 'core/non-existing-source' );
+			expect( console ).toHaveWarnedWith(
+				'Block bindings source "core/non-existing-source" is not registered.'
+			);
+		} );
+	} );
 } );
 
 /* eslint-enable react/forbid-elements */
diff --git a/packages/blocks/src/api/test/serializer.js b/packages/blocks/src/api/test/serializer.js
index 22fa5bc7b6dc6a..3c1cbd6d1e74ff 100644
--- a/packages/blocks/src/api/test/serializer.js
+++ b/packages/blocks/src/api/test/serializer.js
@@ -148,6 +148,30 @@ describe( 'block serializer', () => {
 
 			expect( attributes ).toEqual( { fruit: 'bananas' } );
 		} );
+
+		it( 'should ingore local attributes', () => {
+			const attributes = getCommentAttributes(
+				{
+					attributes: {
+						blob: {
+							type: 'string',
+							role: 'local',
+						},
+						url: {
+							type: 'string',
+						},
+					},
+				},
+				{
+					blob: 'blob://false-url.com',
+					url: 'http://real-url.com',
+				}
+			);
+
+			expect( attributes ).toEqual( {
+				url: 'http://real-url.com',
+			} );
+		} );
 	} );
 
 	describe( 'serializeAttributes()', () => {
@@ -244,7 +268,7 @@ describe( 'block serializer', () => {
 
 	describe( 'serializeBlock()', () => {
 		it( 'serializes the freeform content fallback block without comment delimiters', () => {
-			registerBlockType( 'core/freeform-block', {
+			registerBlockType( 'core/freeform', {
 				category: 'text',
 				title: 'freeform block',
 				attributes: {
@@ -254,8 +278,8 @@ describe( 'block serializer', () => {
 				},
 				save: ( { attributes } ) => attributes.fruit,
 			} );
-			setFreeformContentHandlerName( 'core/freeform-block' );
-			const block = createBlock( 'core/freeform-block', {
+			setFreeformContentHandlerName( 'core/freeform' );
+			const block = createBlock( 'core/freeform', {
 				fruit: 'Bananas',
 			} );
 
@@ -264,7 +288,7 @@ describe( 'block serializer', () => {
 			expect( content ).toBe( 'Bananas' );
 		} );
 		it( 'serializes the freeform content fallback block with comment delimiters in nested context', () => {
-			registerBlockType( 'core/freeform-block', {
+			registerBlockType( 'core/freeform', {
 				category: 'text',
 				title: 'freeform block',
 				attributes: {
@@ -274,17 +298,17 @@ describe( 'block serializer', () => {
 				},
 				save: ( { attributes } ) => attributes.fruit,
 			} );
-			setFreeformContentHandlerName( 'core/freeform-block' );
-			const block = createBlock( 'core/freeform-block', {
+			setFreeformContentHandlerName( 'core/freeform' );
+			const block = createBlock( 'core/freeform', {
 				fruit: 'Bananas',
 			} );
 
 			const content = serializeBlock( block, { isInnerBlocks: true } );
 
 			expect( content ).toBe(
-				'<!-- wp:freeform-block {"fruit":"Bananas"} -->\n' +
+				'<!-- wp:freeform {"fruit":"Bananas"} -->\n' +
 					'Bananas\n' +
-					'<!-- /wp:freeform-block -->'
+					'<!-- /wp:freeform -->'
 			);
 		} );
 		it( 'serializes the unregistered fallback block without comment delimiters', () => {
diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
index 9bfef69c4c1428..548bbb27da3889 100644
--- a/packages/blocks/src/api/test/utils.js
+++ b/packages/blocks/src/api/test/utils.js
@@ -13,7 +13,8 @@ import {
 	getAccessibleBlockLabel,
 	getBlockLabel,
 	__experimentalSanitizeBlockAttributes,
-	__experimentalGetBlockAttributesNamesByRole,
+	getBlockAttributesNamesByRole,
+	isContentBlock,
 } from '../utils';
 
 const noop = () => {};
@@ -309,7 +310,7 @@ describe( 'sanitizeBlockAttributes', () => {
 	} );
 } );
 
-describe( '__experimentalGetBlockAttributesNamesByRole', () => {
+describe( 'getBlockAttributesNamesByRole', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
 			attributes: {
@@ -318,15 +319,15 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save: noop,
@@ -357,42 +358,65 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should return empty array if block has no attributes', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-3' )
-		).toEqual( [] );
+		expect( getBlockAttributesNamesByRole( 'core/test-block-3' ) ).toEqual(
+			[]
+		);
 	} );
 	it( 'should return all attribute names if no role is provided', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-1' )
-		).toEqual(
+		expect( getBlockAttributesNamesByRole( 'core/test-block-1' ) ).toEqual(
 			expect.arrayContaining( [ 'align', 'content', 'level', 'color' ] )
 		);
 	} );
 	it( 'should return proper results with existing attributes and provided role', () => {
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'content' )
 		).toEqual( expect.arrayContaining( [ 'content', 'level' ] ) );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'other'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'other' )
 		).toEqual( [ 'color' ] );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'not-exists'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'not-exists' )
 		).toEqual( [] );
 		// A block with no `role` in any attributes.
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-2',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-2', 'content' )
 		).toEqual( [] );
 	} );
 } );
+
+describe( 'isContentBlock', () => {
+	it( 'returns true if the block has a content role attribute', () => {
+		registerBlockType( 'core/test-content-block', {
+			attributes: {
+				content: {
+					type: 'string',
+					role: 'content',
+				},
+				align: {
+					type: 'string',
+				},
+			},
+			save: noop,
+			category: 'text',
+			title: 'test content block',
+		} );
+		expect( isContentBlock( 'core/test-content-block' ) ).toBe( true );
+	} );
+
+	it( 'returns false if the block does not have a content role attribute', () => {
+		registerBlockType( 'core/test-non-content-block', {
+			attributes: {
+				content: {
+					type: 'string',
+				},
+				align: {
+					type: 'string',
+				},
+			},
+			save: noop,
+			category: 'text',
+			title: 'test non-content block',
+		} );
+		expect( isContentBlock( 'core/test-non-content-block' ) ).toBe( false );
+	} );
+} );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index bc68ccd189537d..1a215036496559 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -11,13 +11,14 @@ import a11yPlugin from 'colord/plugins/a11y';
 import { Component, isValidElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { BLOCK_ICON_DEFAULT } from './constants';
 import { getBlockType, getDefaultBlockName } from './registration';
-import { createBlock } from './factory';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -30,37 +31,48 @@ extend( [ namesPlugin, a11yPlugin ] );
 const ICON_COLORS = [ '#191e23', '#f8f9f9' ];
 
 /**
- * Determines whether the block is a default block
- * and its attributes are equal to the default attributes
+ * Determines whether the block's attributes are equal to the default attributes
  * which means the block is unmodified.
  *
  * @param {WPBlock} block Block Object
  *
- * @return {boolean} Whether the block is an unmodified default block
+ * @return {boolean} Whether the block is an unmodified block.
  */
-export function isUnmodifiedDefaultBlock( block ) {
-	const defaultBlockName = getDefaultBlockName();
-	if ( block.name !== defaultBlockName ) {
-		return false;
-	}
-
-	// Cache a created default block if no cache exists or the default block
-	// name changed.
-	if (
-		! isUnmodifiedDefaultBlock.block ||
-		isUnmodifiedDefaultBlock.block.name !== defaultBlockName
-	) {
-		isUnmodifiedDefaultBlock.block = createBlock( defaultBlockName );
-	}
+export function isUnmodifiedBlock( block ) {
+	return Object.entries( getBlockType( block.name )?.attributes ?? {} ).every(
+		( [ key, definition ] ) => {
+			const value = block.attributes[ key ];
+
+			// Every attribute that has a default must match the default.
+			if ( definition.hasOwnProperty( 'default' ) ) {
+				return value === definition.default;
+			}
 
-	const newDefaultBlock = isUnmodifiedDefaultBlock.block;
-	const blockType = getBlockType( defaultBlockName );
+			// The rich text type is a bit different from the rest because it
+			// has an implicit default value of an empty RichTextData instance,
+			// so check the length of the value.
+			if ( definition.type === 'rich-text' ) {
+				return ! value?.length;
+			}
 
-	return Object.keys( blockType?.attributes ?? {} ).every(
-		( key ) => newDefaultBlock.attributes[ key ] === block.attributes[ key ]
+			// Every attribute that doesn't have a default should be undefined.
+			return value === undefined;
+		}
 	);
 }
 
+/**
+ * Determines whether the block is a default block and its attributes are equal
+ * to the default attributes which means the block is unmodified.
+ *
+ * @param {WPBlock} block Block Object
+ *
+ * @return {boolean} Whether the block is an unmodified default block.
+ */
+export function isUnmodifiedDefaultBlock( block ) {
+	return block.name === getDefaultBlockName() && isUnmodifiedBlock( block );
+}
+
 /**
  * Function that checks if the parameter is a valid icon.
  *
@@ -153,6 +165,10 @@ export function getBlockLabel( blockType, attributes, context = 'visual' ) {
 		return title;
 	}
 
+	if ( label.toPlainText ) {
+		return label.toPlainText();
+	}
+
 	// Strip any HTML (i.e. RichText formatting) before returning.
 	return stripHTML( label );
 }
@@ -240,6 +256,16 @@ export function getAccessibleBlockLabel(
 	);
 }
 
+export function getDefault( attributeSchema ) {
+	if ( attributeSchema.default !== undefined ) {
+		return attributeSchema.default;
+	}
+
+	if ( attributeSchema.type === 'rich-text' ) {
+		return new RichTextData();
+	}
+}
+
 /**
  * Ensure attributes contains only values defined by block type, and merge
  * default values for missing attributes.
@@ -261,9 +287,26 @@ export function __experimentalSanitizeBlockAttributes( name, attributes ) {
 			const value = attributes[ key ];
 
 			if ( undefined !== value ) {
-				accumulator[ key ] = value;
-			} else if ( schema.hasOwnProperty( 'default' ) ) {
-				accumulator[ key ] = schema.default;
+				if ( schema.type === 'rich-text' ) {
+					if ( value instanceof RichTextData ) {
+						accumulator[ key ] = value;
+					} else if ( typeof value === 'string' ) {
+						accumulator[ key ] =
+							RichTextData.fromHTMLString( value );
+					}
+				} else if (
+					schema.type === 'string' &&
+					value instanceof RichTextData
+				) {
+					accumulator[ key ] = value.toHTMLString();
+				} else {
+					accumulator[ key ] = value;
+				}
+			} else {
+				const _default = getDefault( schema );
+				if ( undefined !== _default ) {
+					accumulator[ key ] = _default;
+				}
 			}
 
 			if ( [ 'node', 'children' ].indexOf( schema.source ) !== -1 ) {
@@ -290,15 +333,53 @@ export function __experimentalSanitizeBlockAttributes( name, attributes ) {
  *
  * @return {string[]} The attribute names that have the provided role.
  */
-export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
+export function getBlockAttributesNamesByRole( name, role ) {
 	const attributes = getBlockType( name )?.attributes;
-	if ( ! attributes ) return [];
+	if ( ! attributes ) {
+		return [];
+	}
 	const attributesNames = Object.keys( attributes );
-	if ( ! role ) return attributesNames;
-	return attributesNames.filter(
-		( attributeName ) =>
-			attributes[ attributeName ]?.__experimentalRole === role
-	);
+	if ( ! role ) {
+		return attributesNames;
+	}
+
+	return attributesNames.filter( ( attributeName ) => {
+		const attribute = attributes[ attributeName ];
+		if ( attribute?.role === role ) {
+			return true;
+		}
+		if ( attribute?.__experimentalRole === role ) {
+			deprecated( '__experimentalRole attribute', {
+				since: '6.7',
+				version: '6.8',
+				alternative: 'role attribute',
+				hint: `Check the block.json of the ${ name } block.`,
+			} );
+			return true;
+		}
+		return false;
+	} );
+}
+
+export const __experimentalGetBlockAttributesNamesByRole = ( ...args ) => {
+	deprecated( '__experimentalGetBlockAttributesNamesByRole', {
+		since: '6.7',
+		version: '6.8',
+		alternative: 'getBlockAttributesNamesByRole',
+	} );
+	return getBlockAttributesNamesByRole( ...args );
+};
+
+export function isContentBlock( name ) {
+	const attributes = getBlockType( name )?.attributes;
+
+	return !! Object.keys( attributes )?.some( ( attributeKey ) => {
+		const attribute = attributes[ attributeKey ];
+		return (
+			attribute?.role === 'content' ||
+			attribute?.__experimentalRole === 'content'
+		);
+	} );
 }
 
 /**
diff --git a/packages/blocks/src/api/validation/index.js b/packages/blocks/src/api/validation/index.js
index 6f64c5f3923abe..29b8a087718334 100644
--- a/packages/blocks/src/api/validation/index.js
+++ b/packages/blocks/src/api/validation/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Tokenizer } from 'simple-html-tokenizer';
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -235,7 +235,7 @@ export class DecodeEntityParser {
 	 *
 	 * @param {string} entity Entity fragment discovered in HTML.
 	 *
-	 * @return {?string} Entity substitute value.
+	 * @return {string | undefined} Entity substitute value.
 	 */
 	parse( entity ) {
 		if ( isValidCharacterReference( entity ) ) {
@@ -423,7 +423,9 @@ export const isEqualAttributesOfName = {
 		return actualDiff.length === 0 && expectedDiff.length === 0;
 	},
 	style: ( actual, expected ) => {
-		return isEqual( ...[ actual, expected ].map( getStyleProperties ) );
+		return fastDeepEqual(
+			...[ actual, expected ].map( getStyleProperties )
+		);
 	},
 	// For each boolean attribute, mere presence of attribute in both is enough
 	// to assume equivalence.
@@ -546,7 +548,7 @@ export const isEqualTokensOfType = {
  *
  * @param {Object[]} tokens Set of tokens to search.
  *
- * @return {Object} Next non-whitespace token.
+ * @return {Object | undefined} Next non-whitespace token.
  */
 export function getNextNonWhitespaceToken( tokens ) {
 	let token;
diff --git a/packages/blocks/src/deprecated.js b/packages/blocks/src/deprecated.js
index ec8a5b7bddb3c8..b3d01d1167bf51 100644
--- a/packages/blocks/src/deprecated.js
+++ b/packages/blocks/src/deprecated.js
@@ -9,8 +9,8 @@ import deprecated from '@wordpress/deprecated';
  *
  * @deprecated
  *
- * @param {WPComponent} OriginalComponent The component to enhance.
- * @return {WPComponent} The same component.
+ * @param {Component} OriginalComponent The component to enhance.
+ * @return {Component} The same component.
  */
 export function withBlockContentContext( OriginalComponent ) {
 	deprecated( 'wp.blocks.withBlockContentContext', {
diff --git a/packages/blocks/src/lock-unlock.js b/packages/blocks/src/lock-unlock.js
new file mode 100644
index 00000000000000..2ed55b6ba6adb5
--- /dev/null
+++ b/packages/blocks/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/blocks'
+	);
diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js
index 76cf631e81448c..34216e05808ad7 100644
--- a/packages/blocks/src/store/actions.js
+++ b/packages/blocks/src/store/actions.js
@@ -1,154 +1,17 @@
-/**
- * External dependencies
- */
-import { isPlainObject } from 'is-plain-object';
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import { isValidIcon, normalizeIconObject, omit } from '../api/utils';
-import { DEPRECATED_ENTRY_KEYS } from '../api/constants';
+import { processBlockType } from './process-block-type';
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockType} WPBlockType */
 /** @typedef {import('./reducer').WPBlockCategory} WPBlockCategory */
 
-const { error, warn } = window.console;
-
-/**
- * Mapping of legacy category slugs to their latest normal values, used to
- * accommodate updates of the default set of block categories.
- *
- * @type {Record<string,string>}
- */
-const LEGACY_CATEGORY_MAPPING = {
-	common: 'text',
-	formatting: 'text',
-	layout: 'design',
-};
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-function isFunction( maybeFunc ) {
-	return typeof maybeFunc === 'function';
-}
-
-/**
- * Takes the unprocessed block type data and applies all the existing filters for the registered block type.
- * Next, it validates all the settings and performs additional processing to the block type definition.
- *
- * @param {WPBlockType} blockType        Unprocessed block type settings.
- * @param {Object}      thunkArgs        Argument object for the thunk middleware.
- * @param {Function}    thunkArgs.select Function to select from the store.
- *
- * @return {?WPBlockType} The block, if it has been successfully registered; otherwise `undefined`.
- */
-const processBlockType = ( blockType, { select } ) => {
-	const { name } = blockType;
-
-	const settings = applyFilters(
-		'blocks.registerBlockType',
-		{ ...blockType },
-		name,
-		null
-	);
-
-	if ( settings.description && typeof settings.description !== 'string' ) {
-		deprecated( 'Declaring non-string block descriptions', {
-			since: '6.2',
-		} );
-	}
-
-	if ( settings.deprecated ) {
-		settings.deprecated = settings.deprecated.map( ( deprecation ) =>
-			pick(
-				// Only keep valid deprecation keys.
-				applyFilters(
-					'blocks.registerBlockType',
-					// Merge deprecation keys with pre-filter settings
-					// so that filters that depend on specific keys being
-					// present don't fail.
-					{
-						// Omit deprecation keys here so that deprecations
-						// can opt out of specific keys like "supports".
-						...omit( blockType, DEPRECATED_ENTRY_KEYS ),
-						...deprecation,
-					},
-					name,
-					deprecation
-				),
-				DEPRECATED_ENTRY_KEYS
-			)
-		);
-	}
-
-	if ( ! isPlainObject( settings ) ) {
-		error( 'Block settings must be a valid object.' );
-		return;
-	}
-
-	if ( ! isFunction( settings.save ) ) {
-		error( 'The "save" property must be a valid function.' );
-		return;
-	}
-	if ( 'edit' in settings && ! isFunction( settings.edit ) ) {
-		error( 'The "edit" property must be a valid function.' );
-		return;
-	}
-
-	// Canonicalize legacy categories to equivalent fallback.
-	if ( LEGACY_CATEGORY_MAPPING.hasOwnProperty( settings.category ) ) {
-		settings.category = LEGACY_CATEGORY_MAPPING[ settings.category ];
-	}
-
-	if (
-		'category' in settings &&
-		! select
-			.getCategories()
-			.some( ( { slug } ) => slug === settings.category )
-	) {
-		warn(
-			'The block "' +
-				name +
-				'" is registered with an invalid category "' +
-				settings.category +
-				'".'
-		);
-		delete settings.category;
-	}
-
-	if ( ! ( 'title' in settings ) || settings.title === '' ) {
-		error( 'The block "' + name + '" must have a title.' );
-		return;
-	}
-	if ( typeof settings.title !== 'string' ) {
-		error( 'Block titles must be strings.' );
-		return;
-	}
-
-	settings.icon = normalizeIconObject( settings.icon );
-	if ( ! isValidIcon( settings.icon.src ) ) {
-		error(
-			'The icon passed is invalid. ' +
-				'The icon should be a string, an element, a function, or an object following the specifications documented in https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#icon-optional'
-		);
-		return;
-	}
-
-	return settings;
-};
-
 /**
  * Returns an action object used in signalling that block types have been added.
  * Ignored from documentation as the recommended usage for this action through registerBlockType from @wordpress/blocks.
@@ -167,26 +30,6 @@ export function addBlockTypes( blockTypes ) {
 	};
 }
 
-/**
- * Signals that the passed block type's settings should be stored in the state.
- *
- * @param {WPBlockType} blockType Unprocessed block type settings.
- */
-export const __experimentalRegisterBlockType =
-	( blockType ) =>
-	( { dispatch, select } ) => {
-		dispatch( {
-			type: 'ADD_UNPROCESSED_BLOCK_TYPE',
-			blockType,
-		} );
-
-		const processedBlockType = processBlockType( blockType, { select } );
-		if ( ! processedBlockType ) {
-			return;
-		}
-		dispatch.addBlockTypes( processedBlockType );
-	};
-
 /**
  * Signals that all block types should be computed again.
  * It uses stored unprocessed block types and all the most recent list of registered filters.
@@ -201,25 +44,17 @@ export const __experimentalRegisterBlockType =
  *   7. Filter G.
  * In this scenario some filters would not get applied for all blocks because they are registered too late.
  */
-export const __experimentalReapplyBlockTypeFilters =
-	() =>
-	( { dispatch, select } ) => {
-		const unprocessedBlockTypes =
-			select.__experimentalGetUnprocessedBlockTypes();
-
-		const processedBlockTypes = Object.keys( unprocessedBlockTypes ).reduce(
-			( accumulator, blockName ) => {
-				const result = processBlockType(
-					unprocessedBlockTypes[ blockName ],
-					{ select }
-				);
-				if ( result ) {
-					accumulator.push( result );
-				}
-				return accumulator;
-			},
-			[]
-		);
+export function reapplyBlockTypeFilters() {
+	return ( { dispatch, select } ) => {
+		const processedBlockTypes = [];
+		for ( const [ name, settings ] of Object.entries(
+			select.getUnprocessedBlockTypes()
+		) ) {
+			const result = dispatch( processBlockType( name, settings ) );
+			if ( result ) {
+				processedBlockTypes.push( result );
+			}
+		}
 
 		if ( ! processedBlockTypes.length ) {
 			return;
@@ -227,6 +62,19 @@ export const __experimentalReapplyBlockTypeFilters =
 
 		dispatch.addBlockTypes( processedBlockTypes );
 	};
+}
+
+export function __experimentalReapplyBlockFilters() {
+	deprecated(
+		'wp.data.dispatch( "core/blocks" ).__experimentalReapplyBlockFilters',
+		{
+			since: '6.4',
+			alternative: 'reapplyBlockFilters',
+		}
+	);
+
+	return reapplyBlockTypeFilters();
+}
 
 /**
  * Returns an action object used to remove a registered block type.
@@ -250,18 +98,18 @@ export function removeBlockTypes( names ) {
  * Returns an action object used in signalling that new block styles have been added.
  * Ignored from documentation as the recommended usage for this action through registerBlockStyle from @wordpress/blocks.
  *
- * @param {string}       blockName Block name.
- * @param {Array|Object} styles    Block style object or array of block style objects.
+ * @param {string|Array} blockNames Block names to register new styles for.
+ * @param {Array|Object} styles     Block style object or array of block style objects.
  *
  * @ignore
  *
  * @return {Object} Action object.
  */
-export function addBlockStyles( blockName, styles ) {
+export function addBlockStyles( blockNames, styles ) {
 	return {
 		type: 'ADD_BLOCK_STYLES',
 		styles: Array.isArray( styles ) ? styles : [ styles ],
-		blockName,
+		blockNames: Array.isArray( blockNames ) ? blockNames : [ blockNames ],
 	};
 }
 
diff --git a/packages/blocks/src/store/index.js b/packages/blocks/src/store/index.js
index 6d2dc7c822dbde..ffda3ffe000261 100644
--- a/packages/blocks/src/store/index.js
+++ b/packages/blocks/src/store/index.js
@@ -8,8 +8,11 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Store definition for the blocks namespace.
@@ -25,3 +28,5 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );
diff --git a/packages/blocks/src/store/private-actions.js b/packages/blocks/src/store/private-actions.js
new file mode 100644
index 00000000000000..bfefe56773d77a
--- /dev/null
+++ b/packages/blocks/src/store/private-actions.js
@@ -0,0 +1,72 @@
+/**
+ * Internal dependencies
+ */
+import { processBlockType } from './process-block-type';
+
+/** @typedef {import('../api/registration').WPBlockType} WPBlockType */
+
+/**
+ * Add bootstrapped block type metadata to the store. These metadata usually come from
+ * the `block.json` file and are either statically boostrapped from the server, or
+ * passed as the `metadata` parameter to the `registerBlockType` function.
+ *
+ * @param {string}      name      Block name.
+ * @param {WPBlockType} blockType Block type metadata.
+ */
+export function addBootstrappedBlockType( name, blockType ) {
+	return {
+		type: 'ADD_BOOTSTRAPPED_BLOCK_TYPE',
+		name,
+		blockType,
+	};
+}
+
+/**
+ * Add unprocessed block type settings to the store. These data are passed as the
+ * `settings` parameter to the client-side `registerBlockType` function.
+ *
+ * @param {string}      name      Block name.
+ * @param {WPBlockType} blockType Unprocessed block type settings.
+ */
+export function addUnprocessedBlockType( name, blockType ) {
+	return ( { dispatch } ) => {
+		dispatch( { type: 'ADD_UNPROCESSED_BLOCK_TYPE', name, blockType } );
+		const processedBlockType = dispatch(
+			processBlockType( name, blockType )
+		);
+		if ( ! processedBlockType ) {
+			return;
+		}
+		dispatch.addBlockTypes( processedBlockType );
+	};
+}
+
+/**
+ * Adds new block bindings source.
+ *
+ * @param {string} source Name of the source to register.
+ */
+export function addBlockBindingsSource( source ) {
+	return {
+		type: 'ADD_BLOCK_BINDINGS_SOURCE',
+		name: source.name,
+		label: source.label,
+		usesContext: source.usesContext,
+		getValues: source.getValues,
+		setValues: source.setValues,
+		canUserEditValue: source.canUserEditValue,
+		getFieldsList: source.getFieldsList,
+	};
+}
+
+/**
+ * Removes existing block bindings source.
+ *
+ * @param {string} name Name of the source to remove.
+ */
+export function removeBlockBindingsSource( name ) {
+	return {
+		type: 'REMOVE_BLOCK_BINDINGS_SOURCE',
+		name,
+	};
+}
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
new file mode 100644
index 00000000000000..d5665323859e40
--- /dev/null
+++ b/packages/blocks/src/store/private-selectors.js
@@ -0,0 +1,245 @@
+/**
+ * WordPress dependencies
+ */
+import { createSelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockType } from './selectors';
+import { getValueFromObjectPath } from './utils';
+import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '../api/constants';
+
+const ROOT_BLOCK_SUPPORTS = [
+	'background',
+	'backgroundColor',
+	'color',
+	'linkColor',
+	'captionColor',
+	'buttonColor',
+	'headingColor',
+	'fontFamily',
+	'fontSize',
+	'fontStyle',
+	'fontWeight',
+	'lineHeight',
+	'padding',
+	'contentSize',
+	'wideSize',
+	'blockGap',
+	'textDecoration',
+	'textTransform',
+	'letterSpacing',
+];
+
+/**
+ * Filters the list of supported styles for a given element.
+ *
+ * @param {string[]}         blockSupports list of supported styles.
+ * @param {string|undefined} name          block name.
+ * @param {string|undefined} element       element name.
+ *
+ * @return {string[]} filtered list of supported styles.
+ */
+function filterElementBlockSupports( blockSupports, name, element ) {
+	return blockSupports.filter( ( support ) => {
+		if ( support === 'fontSize' && element === 'heading' ) {
+			return false;
+		}
+
+		// This is only available for links
+		if ( support === 'textDecoration' && ! name && element !== 'link' ) {
+			return false;
+		}
+
+		// This is only available for heading, button, caption and text
+		if (
+			support === 'textTransform' &&
+			! name &&
+			! (
+				[ 'heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(
+					element
+				) ||
+				element === 'button' ||
+				element === 'caption' ||
+				element === 'text'
+			)
+		) {
+			return false;
+		}
+
+		// This is only available for heading, button, caption and text
+		if (
+			support === 'letterSpacing' &&
+			! name &&
+			! (
+				[ 'heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(
+					element
+				) ||
+				element === 'button' ||
+				element === 'caption' ||
+				element === 'text'
+			)
+		) {
+			return false;
+		}
+
+		// Text columns is only available for blocks.
+		if ( support === 'textColumns' && ! name ) {
+			return false;
+		}
+
+		return true;
+	} );
+}
+
+/**
+ * Returns the list of supported styles for a given block name and element.
+ */
+export const getSupportedStyles = createSelector(
+	( state, name, element ) => {
+		if ( ! name ) {
+			return filterElementBlockSupports(
+				ROOT_BLOCK_SUPPORTS,
+				name,
+				element
+			);
+		}
+
+		const blockType = getBlockType( state, name );
+
+		if ( ! blockType ) {
+			return [];
+		}
+
+		const supportKeys = [];
+
+		// Check for blockGap support.
+		// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
+		if ( blockType?.supports?.spacing?.blockGap ) {
+			supportKeys.push( 'blockGap' );
+		}
+
+		// check for shadow support
+		if ( blockType?.supports?.shadow ) {
+			supportKeys.push( 'shadow' );
+		}
+
+		Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
+			if ( ! STYLE_PROPERTY[ styleName ].support ) {
+				return;
+			}
+
+			// Opting out means that, for certain support keys like background color,
+			// blocks have to explicitly set the support value false. If the key is
+			// unset, we still enable it.
+			if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
+				if (
+					STYLE_PROPERTY[ styleName ].support[ 0 ] in
+						blockType.supports &&
+					getValueFromObjectPath(
+						blockType.supports,
+						STYLE_PROPERTY[ styleName ].support
+					) !== false
+				) {
+					supportKeys.push( styleName );
+					return;
+				}
+			}
+
+			if (
+				getValueFromObjectPath(
+					blockType.supports,
+					STYLE_PROPERTY[ styleName ].support,
+					false
+				)
+			) {
+				supportKeys.push( styleName );
+			}
+		} );
+
+		return filterElementBlockSupports( supportKeys, name, element );
+	},
+	( state, name ) => [ state.blockTypes[ name ] ]
+);
+
+/**
+ * Returns the bootstrapped block type metadata for a give block name.
+ *
+ * @param {Object} state Data state.
+ * @param {string} name  Block name.
+ *
+ * @return {Object} Bootstrapped block type metadata for a block.
+ */
+export function getBootstrappedBlockType( state, name ) {
+	return state.bootstrappedBlockTypes[ name ];
+}
+
+/**
+ * Returns all the unprocessed (before applying the `registerBlockType` filter)
+ * block type settings as passed during block registration.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {Array} Unprocessed block type settings for all blocks.
+ */
+export function getUnprocessedBlockTypes( state ) {
+	return state.unprocessedBlockTypes;
+}
+
+/**
+ * Returns all the block bindings sources registered.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {Object} All the registered sources and their properties.
+ */
+export function getAllBlockBindingsSources( state ) {
+	return state.blockBindingsSources;
+}
+
+/**
+ * Returns a specific block bindings source.
+ *
+ * @param {Object} state      Data state.
+ * @param {string} sourceName Name of the source to get.
+ *
+ * @return {Object} The specific block binding source and its properties.
+ */
+export function getBlockBindingsSource( state, sourceName ) {
+	return state.blockBindingsSources[ sourceName ];
+}
+
+/**
+ * Determines if any of the block type's attributes have
+ * the content role attribute.
+ *
+ * @param {Object} state         Data state.
+ * @param {string} blockTypeName Block type name.
+ * @return {boolean} Whether block type has content role attribute.
+ */
+export const hasContentRoleAttribute = ( state, blockTypeName ) => {
+	const blockType = getBlockType( state, blockTypeName );
+	if ( ! blockType ) {
+		return false;
+	}
+
+	return Object.values( blockType.attributes ).some(
+		( { role, __experimentalRole } ) => {
+			if ( role === 'content' ) {
+				return true;
+			}
+			if ( __experimentalRole === 'content' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockTypeName } block.`,
+				} );
+				return true;
+			}
+			return false;
+		}
+	);
+};
diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js
new file mode 100644
index 00000000000000..0ca28a3c3e2070
--- /dev/null
+++ b/packages/blocks/src/store/process-block-type.js
@@ -0,0 +1,410 @@
+/**
+ * External dependencies
+ */
+import { isPlainObject } from 'is-plain-object';
+import { isValidElementType } from 'react-is';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { applyFilters } from '@wordpress/hooks';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import { isValidIcon, normalizeIconObject, omit } from '../api/utils';
+import {
+	BLOCK_ICON_DEFAULT,
+	DEPRECATED_ENTRY_KEYS,
+	EXPERIMENTAL_SUPPORTS_MAP,
+	COMMON_EXPERIMENTAL_PROPERTIES,
+	EXPERIMENTAL_SUPPORT_PROPERTIES,
+} from '../api/constants';
+
+/** @typedef {import('../api/registration').WPBlockType} WPBlockType */
+
+/**
+ * Mapping of legacy category slugs to their latest normal values, used to
+ * accommodate updates of the default set of block categories.
+ *
+ * @type {Record<string,string>}
+ */
+const LEGACY_CATEGORY_MAPPING = {
+	common: 'text',
+	formatting: 'text',
+	layout: 'design',
+};
+
+/**
+ * Merge block variations bootstrapped from the server and client.
+ *
+ * When a variation is registered in both places, its properties are merged.
+ *
+ * @param {Array} bootstrappedVariations - A block type variations from the server.
+ * @param {Array} clientVariations       - A block type variations from the client.
+ * @return {Array} The merged array of block variations.
+ */
+function mergeBlockVariations(
+	bootstrappedVariations = [],
+	clientVariations = []
+) {
+	const result = [ ...bootstrappedVariations ];
+
+	clientVariations.forEach( ( clientVariation ) => {
+		const index = result.findIndex(
+			( bootstrappedVariation ) =>
+				bootstrappedVariation.name === clientVariation.name
+		);
+
+		if ( index !== -1 ) {
+			result[ index ] = { ...result[ index ], ...clientVariation };
+		} else {
+			result.push( clientVariation );
+		}
+	} );
+
+	return result;
+}
+
+/**
+ * Stabilizes a block support configuration by converting experimental properties
+ * to their stable equivalents.
+ *
+ * @param {Object} unstableConfig   The support configuration to stabilize.
+ * @param {string} stableSupportKey The stable support key for looking up properties.
+ * @return {Object} The stabilized support configuration.
+ */
+function stabilizeSupportConfig( unstableConfig, stableSupportKey ) {
+	const stableConfig = {};
+	for ( const [ key, value ] of Object.entries( unstableConfig ) ) {
+		// Get stable key from support-specific map, common properties map, or keep original.
+		const stableKey =
+			EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ]?.[ key ] ??
+			COMMON_EXPERIMENTAL_PROPERTIES[ key ] ??
+			key;
+
+		stableConfig[ stableKey ] = value;
+
+		/*
+		 * The `__experimentalSkipSerialization` key needs to be kept until
+		 * WP 6.8 becomes the minimum supported version. This is due to the
+		 * core `wp_should_skip_block_supports_serialization` function only
+		 * checking for `__experimentalSkipSerialization` in earlier versions.
+		 */
+		if (
+			key === '__experimentalSkipSerialization' ||
+			key === 'skipSerialization'
+		) {
+			stableConfig.__experimentalSkipSerialization = value;
+		}
+	}
+	return stableConfig;
+}
+
+/**
+ * Stabilizes experimental block supports by converting experimental keys and properties
+ * to their stable equivalents.
+ *
+ * @param {Object|undefined} rawSupports The block supports configuration to stabilize.
+ * @return {Object|undefined} The stabilized block supports configuration.
+ */
+function stabilizeSupports( rawSupports ) {
+	if ( ! rawSupports ) {
+		return rawSupports;
+	}
+
+	/*
+	 * Create a new object to avoid mutating the original. This ensures that
+	 * custom block plugins that rely on immutable supports are not affected.
+	 * See: https://github.com/WordPress/gutenberg/pull/66849#issuecomment-2463614281
+	 */
+	const newSupports = {};
+	const done = {};
+
+	for ( const [ support, config ] of Object.entries( rawSupports ) ) {
+		/*
+		 * If this support config has already been stabilized, skip it.
+		 * A stable support key occurring after an experimental key, gets
+		 * stabilized then so that the two configs can be merged effectively.
+		 */
+		if ( done[ support ] ) {
+			continue;
+		}
+
+		const stableSupportKey =
+			EXPERIMENTAL_SUPPORTS_MAP[ support ] ?? support;
+
+		/*
+		 * Use the support's config as is when it's not in need of stabilization.
+		 * A support does not need stabilization if:
+		 * - The support key doesn't need stabilization AND
+		 * - Either:
+		 *     - The config isn't an object, so can't have experimental properties OR
+		 *     - The config is an object but has no experimental properties to stabilize.
+		 */
+		if (
+			support === stableSupportKey &&
+			( ! isPlainObject( config ) ||
+				( ! EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ] &&
+					Object.keys( config ).every(
+						( key ) => ! COMMON_EXPERIMENTAL_PROPERTIES[ key ]
+					) ) )
+		) {
+			newSupports[ support ] = config;
+			continue;
+		}
+
+		// Stabilize the config value.
+		const stableConfig = isPlainObject( config )
+			? stabilizeSupportConfig( config, stableSupportKey )
+			: config;
+
+		/*
+		 * If a plugin overrides the support config with the `blocks.registerBlockType`
+		 * filter, both experimental and stable configs may be present. In that case,
+		 * use the order keys are defined in to determine the final value.
+		 *    - If config is an array, merge the arrays in their order of definition.
+		 *    - If config is not an array, use the value defined last.
+		 *
+		 * The reason for preferring the last defined key is that after filters
+		 * are applied, the last inserted key is likely the most up-to-date value.
+		 * We cannot determine with certainty which value was "last modified" so
+		 * the insertion order is the best guess. The extreme edge case of multiple
+		 * filters tweaking the same support property will become less over time as
+		 * extenders migrate existing blocks and plugins to stable keys.
+		 */
+		if (
+			support !== stableSupportKey &&
+			Object.hasOwn( rawSupports, stableSupportKey )
+		) {
+			const keyPositions = Object.keys( rawSupports ).reduce(
+				( acc, key, index ) => {
+					acc[ key ] = index;
+					return acc;
+				},
+				{}
+			);
+			const experimentalFirst =
+				( keyPositions[ support ] ?? Number.MAX_VALUE ) <
+				( keyPositions[ stableSupportKey ] ?? Number.MAX_VALUE );
+
+			if ( isPlainObject( rawSupports[ stableSupportKey ] ) ) {
+				/*
+				 * To merge the alternative support config effectively, it also needs to be
+				 * stabilized before merging to keep stabilized and experimental flags in sync.
+				 */
+				rawSupports[ stableSupportKey ] = stabilizeSupportConfig(
+					rawSupports[ stableSupportKey ],
+					stableSupportKey
+				);
+				newSupports[ stableSupportKey ] = experimentalFirst
+					? { ...stableConfig, ...rawSupports[ stableSupportKey ] }
+					: { ...rawSupports[ stableSupportKey ], ...stableConfig };
+				// Prevents reprocessing this support as it was merged above.
+				done[ stableSupportKey ] = true;
+			} else {
+				newSupports[ stableSupportKey ] = experimentalFirst
+					? rawSupports[ stableSupportKey ]
+					: stableConfig;
+			}
+		} else {
+			newSupports[ stableSupportKey ] = stableConfig;
+		}
+	}
+
+	return newSupports;
+}
+
+/**
+ * Takes the unprocessed block type settings, merges them with block type metadata
+ * and applies all the existing filters for the registered block type.
+ * Next, it validates all the settings and performs additional processing to the block type definition.
+ *
+ * @param {string}      name          Block name.
+ * @param {WPBlockType} blockSettings Unprocessed block type settings.
+ *
+ * @return {WPBlockType | undefined} The block, if it has been processed and can be registered; otherwise `undefined`.
+ */
+export const processBlockType =
+	( name, blockSettings ) =>
+	( { select } ) => {
+		const bootstrappedBlockType = select.getBootstrappedBlockType( name );
+
+		const blockType = {
+			name,
+			icon: BLOCK_ICON_DEFAULT,
+			keywords: [],
+			attributes: {},
+			providesContext: {},
+			usesContext: [],
+			selectors: {},
+			supports: {},
+			styles: [],
+			blockHooks: {},
+			save: () => null,
+			...bootstrappedBlockType,
+			...blockSettings,
+			// blockType.variations can be defined as a filePath.
+			variations: mergeBlockVariations(
+				Array.isArray( bootstrappedBlockType?.variations )
+					? bootstrappedBlockType.variations
+					: [],
+				Array.isArray( blockSettings?.variations )
+					? blockSettings.variations
+					: []
+			),
+		};
+
+		// Stabilize any experimental supports before applying filters.
+		blockType.supports = stabilizeSupports( blockType.supports );
+
+		const settings = applyFilters(
+			'blocks.registerBlockType',
+			blockType,
+			name,
+			null
+		);
+
+		// Re-stabilize any experimental supports after applying filters.
+		// This ensures that any supports updated by filters are also stabilized.
+		blockType.supports = stabilizeSupports( blockType.supports );
+
+		if (
+			settings.description &&
+			typeof settings.description !== 'string'
+		) {
+			deprecated( 'Declaring non-string block descriptions', {
+				since: '6.2',
+			} );
+		}
+
+		if ( settings.deprecated ) {
+			settings.deprecated = settings.deprecated.map( ( deprecation ) => {
+				// Stabilize any experimental supports before applying filters.
+				let filteredDeprecation = {
+					...deprecation,
+					supports: stabilizeSupports( deprecation.supports ),
+				};
+
+				filteredDeprecation = // Only keep valid deprecation keys.
+					applyFilters(
+						'blocks.registerBlockType',
+						// Merge deprecation keys with pre-filter settings
+						// so that filters that depend on specific keys being
+						// present don't fail.
+						{
+							// Omit deprecation keys here so that deprecations
+							// can opt out of specific keys like "supports".
+							...omit( blockType, DEPRECATED_ENTRY_KEYS ),
+							...filteredDeprecation,
+						},
+						blockType.name,
+						filteredDeprecation
+					);
+				// Re-stabilize any experimental supports after applying filters.
+				// This ensures that any supports updated by filters are also stabilized.
+				filteredDeprecation.supports = stabilizeSupports(
+					filteredDeprecation.supports
+				);
+
+				return Object.fromEntries(
+					Object.entries( filteredDeprecation ).filter( ( [ key ] ) =>
+						DEPRECATED_ENTRY_KEYS.includes( key )
+					)
+				);
+			} );
+		}
+
+		if ( ! isPlainObject( settings ) ) {
+			warning( 'Block settings must be a valid object.' );
+			return;
+		}
+
+		if ( typeof settings.save !== 'function' ) {
+			warning( 'The "save" property must be a valid function.' );
+			return;
+		}
+		if ( 'edit' in settings && ! isValidElementType( settings.edit ) ) {
+			warning( 'The "edit" property must be a valid component.' );
+			return;
+		}
+
+		// Canonicalize legacy categories to equivalent fallback.
+		if ( LEGACY_CATEGORY_MAPPING.hasOwnProperty( settings.category ) ) {
+			settings.category = LEGACY_CATEGORY_MAPPING[ settings.category ];
+		}
+
+		if (
+			'category' in settings &&
+			! select
+				.getCategories()
+				.some( ( { slug } ) => slug === settings.category )
+		) {
+			warning(
+				'The block "' +
+					name +
+					'" is registered with an invalid category "' +
+					settings.category +
+					'".'
+			);
+			delete settings.category;
+		}
+
+		if ( ! ( 'title' in settings ) || settings.title === '' ) {
+			warning( 'The block "' + name + '" must have a title.' );
+			return;
+		}
+		if ( typeof settings.title !== 'string' ) {
+			warning( 'Block titles must be strings.' );
+			return;
+		}
+
+		settings.icon = normalizeIconObject( settings.icon );
+		if ( ! isValidIcon( settings.icon.src ) ) {
+			warning(
+				'The icon passed is invalid. ' +
+					'The icon should be a string, an element, a function, or an object following the specifications documented in https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#icon-optional'
+			);
+			return;
+		}
+
+		if (
+			typeof settings?.parent === 'string' ||
+			settings?.parent instanceof String
+		) {
+			settings.parent = [ settings.parent ];
+			warning(
+				'Parent must be undefined or an array of strings (block types), but it is a string.'
+			);
+			// Intentionally continue:
+			//
+			// While string values were never supported, they appeared to work with some unintended side-effects
+			// that have been fixed by [#66250](https://github.com/WordPress/gutenberg/pull/66250).
+			//
+			// To be backwards-compatible, this code that automatically migrates strings to arrays.
+		}
+
+		if (
+			! Array.isArray( settings?.parent ) &&
+			settings?.parent !== undefined
+		) {
+			warning(
+				'Parent must be undefined or an array of block types, but it is ',
+				settings.parent
+			);
+			return;
+		}
+
+		if ( 1 === settings?.parent?.length && name === settings.parent[ 0 ] ) {
+			warning(
+				'Block "' +
+					name +
+					'" cannot be a parent of itself. Please remove the block name from the parent list.'
+			);
+			return;
+		}
+
+		return settings;
+	};
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 6770dd6b67f26b..ac652b91890319 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, mapValues } from 'lodash';
+import { camelCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -57,6 +57,72 @@ function getUniqueItemsByName( items ) {
 	}, [] );
 }
 
+function bootstrappedBlockTypes( state = {}, action ) {
+	switch ( action.type ) {
+		case 'ADD_BOOTSTRAPPED_BLOCK_TYPE':
+			const { name, blockType } = action;
+			const serverDefinition = state[ name ];
+			let newDefinition;
+			// Don't overwrite if already set. It covers the case when metadata
+			// was initialized from the server.
+			if ( serverDefinition ) {
+				// The `blockHooks` prop is not yet included in the server provided
+				// definitions and needs to be polyfilled. This can be removed when the
+				// minimum supported WordPress is >= 6.4.
+				if (
+					serverDefinition.blockHooks === undefined &&
+					blockType.blockHooks
+				) {
+					newDefinition = {
+						...serverDefinition,
+						...newDefinition,
+						blockHooks: blockType.blockHooks,
+					};
+				}
+
+				// The `allowedBlocks` prop is not yet included in the server provided
+				// definitions and needs to be polyfilled. This can be removed when the
+				// minimum supported WordPress is >= 6.5.
+				if (
+					serverDefinition.allowedBlocks === undefined &&
+					blockType.allowedBlocks
+				) {
+					newDefinition = {
+						...serverDefinition,
+						...newDefinition,
+						allowedBlocks: blockType.allowedBlocks,
+					};
+				}
+			} else {
+				newDefinition = Object.fromEntries(
+					Object.entries( blockType )
+						.filter(
+							( [ , value ] ) =>
+								value !== null && value !== undefined
+						)
+						.map( ( [ key, value ] ) => [
+							camelCase( key ),
+							value,
+						] )
+				);
+				newDefinition.name = name;
+			}
+
+			if ( newDefinition ) {
+				return {
+					...state,
+					[ name ]: newDefinition,
+				};
+			}
+
+			return state;
+		case 'REMOVE_BLOCK_TYPES':
+			return omit( state, action.names );
+	}
+
+	return state;
+}
+
 /**
  * Reducer managing the unprocessed block types in a form passed when registering the by block.
  * It's for internal use only. It allows recomputing the processed block types on-demand after block type filters
@@ -72,7 +138,7 @@ export function unprocessedBlockTypes( state = {}, action ) {
 		case 'ADD_UNPROCESSED_BLOCK_TYPE':
 			return {
 				...state,
-				[ action.blockType.name ]: action.blockType,
+				[ action.name ]: action.blockType,
 			};
 		case 'REMOVE_BLOCK_TYPES':
 			return omit( state, action.names );
@@ -117,35 +183,38 @@ export function blockStyles( state = {}, action ) {
 		case 'ADD_BLOCK_TYPES':
 			return {
 				...state,
-				...mapValues(
-					keyBlockTypesByName( action.blockTypes ),
-					( blockType ) =>
+				...Object.fromEntries(
+					Object.entries(
+						keyBlockTypesByName( action.blockTypes )
+					).map( ( [ name, blockType ] ) => [
+						name,
 						getUniqueItemsByName( [
-							...get( blockType, [ 'styles' ], [] ).map(
-								( style ) => ( {
-									...style,
-									source: 'block',
-								} )
-							),
-							...get( state, [ blockType.name ], [] ).filter(
+							...( blockType.styles ?? [] ).map( ( style ) => ( {
+								...style,
+								source: 'block',
+							} ) ),
+							...( state[ blockType.name ] ?? [] ).filter(
 								( { source } ) => 'block' !== source
 							),
-						] )
+						] ),
+					] )
 				),
 			};
 		case 'ADD_BLOCK_STYLES':
-			return {
-				...state,
-				[ action.blockName ]: getUniqueItemsByName( [
-					...get( state, [ action.blockName ], [] ),
+			const updatedStyles = {};
+			action.blockNames.forEach( ( blockName ) => {
+				updatedStyles[ blockName ] = getUniqueItemsByName( [
+					...( state[ blockName ] ?? [] ),
 					...action.styles,
-				] ),
-			};
+				] );
+			} );
+			return { ...state, ...updatedStyles };
 		case 'REMOVE_BLOCK_STYLES':
 			return {
 				...state,
-				[ action.blockName ]: filter(
-					get( state, [ action.blockName ], [] ),
+				[ action.blockName ]: (
+					state[ action.blockName ] ?? []
+				).filter(
 					( style ) => action.styleNames.indexOf( style.name ) === -1
 				),
 			};
@@ -167,36 +236,41 @@ export function blockVariations( state = {}, action ) {
 		case 'ADD_BLOCK_TYPES':
 			return {
 				...state,
-				...mapValues(
-					keyBlockTypesByName( action.blockTypes ),
-					( blockType ) => {
-						return getUniqueItemsByName( [
-							...get( blockType, [ 'variations' ], [] ).map(
-								( variation ) => ( {
-									...variation,
-									source: 'block',
-								} )
-							),
-							...get( state, [ blockType.name ], [] ).filter(
-								( { source } ) => 'block' !== source
-							),
-						] );
-					}
+				...Object.fromEntries(
+					Object.entries(
+						keyBlockTypesByName( action.blockTypes )
+					).map( ( [ name, blockType ] ) => {
+						return [
+							name,
+							getUniqueItemsByName( [
+								...( blockType.variations ?? [] ).map(
+									( variation ) => ( {
+										...variation,
+										source: 'block',
+									} )
+								),
+								...( state[ blockType.name ] ?? [] ).filter(
+									( { source } ) => 'block' !== source
+								),
+							] ),
+						];
+					} )
 				),
 			};
 		case 'ADD_BLOCK_VARIATIONS':
 			return {
 				...state,
 				[ action.blockName ]: getUniqueItemsByName( [
-					...get( state, [ action.blockName ], [] ),
+					...( state[ action.blockName ] ?? [] ),
 					...action.variations,
 				] ),
 			};
 		case 'REMOVE_BLOCK_VARIATIONS':
 			return {
 				...state,
-				[ action.blockName ]: filter(
-					get( state, [ action.blockName ], [] ),
+				[ action.blockName ]: (
+					state[ action.blockName ] ?? []
+				).filter(
 					( variation ) =>
 						action.variationNames.indexOf( variation.name ) === -1
 				),
@@ -254,14 +328,24 @@ export const groupingBlockName = createBlockNameSetterReducer(
 export function categories( state = DEFAULT_CATEGORIES, action ) {
 	switch ( action.type ) {
 		case 'SET_CATEGORIES':
-			return action.categories || [];
+			// Ensure, that categories are unique by slug.
+			const uniqueCategories = new Map();
+			( action.categories || [] ).forEach( ( category ) => {
+				uniqueCategories.set( category.slug, category );
+			} );
+			return [ ...uniqueCategories.values() ];
 		case 'UPDATE_CATEGORY': {
-			if ( ! action.category || isEmpty( action.category ) ) {
+			if (
+				! action.category ||
+				! Object.keys( action.category ).length
+			) {
 				return state;
 			}
-			const categoryToChange = find( state, [ 'slug', action.slug ] );
+			const categoryToChange = state.find(
+				( { slug } ) => slug === action.slug
+			);
 			if ( categoryToChange ) {
-				return map( state, ( category ) => {
+				return state.map( ( category ) => {
 					if ( category.slug === action.slug ) {
 						return {
 							...category,
@@ -292,7 +376,54 @@ export function collections( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Merges usesContext with existing values, potentially defined in the server registration.
+ *
+ * @param {string[]} existingUsesContext Existing `usesContext`.
+ * @param {string[]} newUsesContext      Newly added `usesContext`.
+ * @return {string[]|undefined} Merged `usesContext`.
+ */
+function getMergedUsesContext( existingUsesContext = [], newUsesContext = [] ) {
+	const mergedArrays = Array.from(
+		new Set( existingUsesContext.concat( newUsesContext ) )
+	);
+	return mergedArrays.length > 0 ? mergedArrays : undefined;
+}
+
+export function blockBindingsSources( state = {}, action ) {
+	switch ( action.type ) {
+		case 'ADD_BLOCK_BINDINGS_SOURCE':
+			// Only open this API in Gutenberg and for `core/post-meta` for the moment.
+			let getFieldsList;
+			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+				getFieldsList = action.getFieldsList;
+			} else if ( action.name === 'core/post-meta' ) {
+				getFieldsList = action.getFieldsList;
+			}
+			return {
+				...state,
+				[ action.name ]: {
+					label: action.label || state[ action.name ]?.label,
+					usesContext: getMergedUsesContext(
+						state[ action.name ]?.usesContext,
+						action.usesContext
+					),
+					getValues: action.getValues,
+					setValues: action.setValues,
+					// Only set `canUserEditValue` if `setValues` is also defined.
+					canUserEditValue:
+						action.setValues && action.canUserEditValue,
+					getFieldsList,
+				},
+			};
+		case 'REMOVE_BLOCK_BINDINGS_SOURCE':
+			return omit( state, action.name );
+	}
+	return state;
+}
+
 export default combineReducers( {
+	bootstrappedBlockTypes,
 	unprocessedBlockTypes,
 	blockTypes,
 	blockStyles,
@@ -303,4 +434,5 @@ export default combineReducers( {
 	groupingBlockName,
 	categories,
 	collections,
+	blockBindingsSources,
 } );
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index 298d7fc12141aa..c4589ce8232f66 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -1,14 +1,20 @@
 /**
  * External dependencies
  */
-import createSelector from 'rememo';
 import removeAccents from 'remove-accents';
-import { filter, get, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { pipe } from '@wordpress/compose';
+import { createSelector } from '@wordpress/data';
+import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromObjectPath, matchesAttributes } from './utils';
+import { hasContentRoleAttribute as privateHasContentRoleAttribute } from './private-selectors';
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */
@@ -28,17 +34,6 @@ const getNormalizedBlockType = ( state, nameOrType ) =>
 		? getBlockType( state, nameOrType )
 		: nameOrType;
 
-/**
- * Returns all the unprocessed block types as passed during the registration.
- *
- * @param {Object} state Data state.
- *
- * @return {Array} Unprocessed block types.
- */
-export function __experimentalGetUnprocessedBlockTypes( state ) {
-	return state.unprocessedBlockTypes;
-}
-
 /**
  * Returns all the available block types.
  *
@@ -245,26 +240,61 @@ export const getBlockVariations = createSelector(
 export function getActiveBlockVariation( state, blockName, attributes, scope ) {
 	const variations = getBlockVariations( state, blockName, scope );
 
-	const match = variations?.find( ( variation ) => {
+	if ( ! variations ) {
+		return variations;
+	}
+
+	const blockType = getBlockType( state, blockName );
+	const attributeKeys = Object.keys( blockType?.attributes || {} );
+	let match;
+	let maxMatchedAttributes = 0;
+
+	for ( const variation of variations ) {
 		if ( Array.isArray( variation.isActive ) ) {
-			const blockType = getBlockType( state, blockName );
-			const attributeKeys = Object.keys( blockType?.attributes || {} );
 			const definedAttributes = variation.isActive.filter(
-				( attribute ) => attributeKeys.includes( attribute )
+				( attribute ) => {
+					// We support nested attribute paths, e.g. `layout.type`.
+					// In this case, we need to check if the part before the
+					// first dot is a known attribute.
+					const topLevelAttribute = attribute.split( '.' )[ 0 ];
+					return attributeKeys.includes( topLevelAttribute );
+				}
 			);
-			if ( definedAttributes.length === 0 ) {
-				return false;
+			const definedAttributesLength = definedAttributes.length;
+			if ( definedAttributesLength === 0 ) {
+				continue;
 			}
-			return definedAttributes.every(
-				( attribute ) =>
-					attributes[ attribute ] ===
-					variation.attributes[ attribute ]
-			);
+			const isMatch = definedAttributes.every( ( attribute ) => {
+				const variationAttributeValue = getValueFromObjectPath(
+					variation.attributes,
+					attribute
+				);
+				if ( variationAttributeValue === undefined ) {
+					return false;
+				}
+				let blockAttributeValue = getValueFromObjectPath(
+					attributes,
+					attribute
+				);
+				if ( blockAttributeValue instanceof RichTextData ) {
+					blockAttributeValue = blockAttributeValue.toHTMLString();
+				}
+				return matchesAttributes(
+					blockAttributeValue,
+					variationAttributeValue
+				);
+			} );
+			if ( isMatch && definedAttributesLength > maxMatchedAttributes ) {
+				match = variation;
+				maxMatchedAttributes = definedAttributesLength;
+			}
+		} else if ( variation.isActive?.( attributes, variation.attributes ) ) {
+			// If isActive is a function, we cannot know how many attributes it matches.
+			// This means that we cannot compare the specificity of our matches,
+			// and simply return the best match we have found.
+			return match || variation;
 		}
-
-		return variation.isActive?.( attributes, variation.attributes );
-	} );
-
+	}
 	return match;
 }
 
@@ -407,7 +437,7 @@ export function getCollections( state ) {
  * };
  * ```
  *
- * @return {string?} Default block name.
+ * @return {?string} Default block name.
  */
 export function getDefaultBlockName( state ) {
 	return state.defaultBlockName;
@@ -443,7 +473,7 @@ export function getDefaultBlockName( state ) {
  * };
  * ```
  *
- * @return {string?} Name of the block for handling non-block content.
+ * @return {?string} Name of the block for handling non-block content.
  */
 export function getFreeformFallbackBlockName( state ) {
 	return state.freeformFallbackBlockName;
@@ -479,7 +509,7 @@ export function getFreeformFallbackBlockName( state ) {
  * };
  * ```
  *
- * @return {string?} Name of the block for handling unregistered blocks.
+ * @return {?string} Name of the block for handling unregistered blocks.
  */
 export function getUnregisteredFallbackBlockName( state ) {
 	return state.unregisteredFallbackBlockName;
@@ -515,7 +545,7 @@ export function getUnregisteredFallbackBlockName( state ) {
  * };
  * ```
  *
- * @return {string?} Name of the block for handling the grouping of blocks.
+ * @return {?string} Name of the block for handling the grouping of blocks.
  */
 export function getGroupingBlockName( state ) {
 	return state.groupingBlockName;
@@ -553,12 +583,11 @@ export function getGroupingBlockName( state ) {
  */
 export const getChildBlockNames = createSelector(
 	( state, blockName ) => {
-		return map(
-			filter( state.blockTypes, ( blockType ) => {
+		return getBlockTypes( state )
+			.filter( ( blockType ) => {
 				return blockType.parent?.includes( blockName );
-			} ),
-			( { name } ) => name
-		);
+			} )
+			.map( ( { name } ) => name );
 	},
 	( state ) => [ state.blockTypes ]
 );
@@ -608,7 +637,11 @@ export const getBlockSupport = (
 		return defaultSupports;
 	}
 
-	return get( blockType.supports, feature, defaultSupports );
+	return getValueFromObjectPath(
+		blockType.supports,
+		feature,
+		defaultSupports
+	);
 };
 
 /**
@@ -649,6 +682,18 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) {
 	return !! getBlockSupport( state, nameOrType, feature, defaultSupports );
 }
 
+/**
+ * Normalizes a search term string: removes accents, converts to lowercase, removes extra whitespace.
+ *
+ * @param {string|null|undefined} term Search term to normalize.
+ * @return {string} Normalized search term.
+ */
+function getNormalizedSearchTerm( term ) {
+	return removeAccents( term ?? '' )
+		.toLowerCase()
+		.trim();
+}
+
 /**
  * Returns true if the block type by the given name or object value matches a
  * search term, or false otherwise.
@@ -688,30 +733,12 @@ export function hasBlockSupport( state, nameOrType, feature, defaultSupports ) {
  *
  * @return {Object[]} Whether block type matches search term.
  */
-export function isMatchingSearchTerm( state, nameOrType, searchTerm ) {
+export function isMatchingSearchTerm( state, nameOrType, searchTerm = '' ) {
 	const blockType = getNormalizedBlockType( state, nameOrType );
-
-	const getNormalizedSearchTerm = pipe( [
-		// Disregard diacritics.
-		//  Input: "média"
-		( term ) => removeAccents( term ?? '' ),
-
-		// Lowercase.
-		//  Input: "MEDIA"
-		( term ) => term.toLowerCase(),
-
-		// Strip leading and trailing whitespace.
-		//  Input: " media "
-		( term ) => term.trim(),
-	] );
-
 	const normalizedSearchTerm = getNormalizedSearchTerm( searchTerm );
 
-	const isSearchMatch = pipe( [
-		getNormalizedSearchTerm,
-		( normalizedCandidate ) =>
-			normalizedCandidate.includes( normalizedSearchTerm ),
-	] );
+	const isSearchMatch = ( candidate ) =>
+		getNormalizedSearchTerm( candidate ).includes( normalizedSearchTerm );
 
 	return (
 		isSearchMatch( blockType.title ) ||
@@ -797,23 +824,11 @@ export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
 	} );
 };
 
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- */
-export const __experimentalHasContentRoleAttribute = createSelector(
-	( state, blockTypeName ) => {
-		const blockType = getBlockType( state, blockTypeName );
-		if ( ! blockType ) {
-			return false;
-		}
-
-		return Object.entries( blockType.attributes ).some(
-			( [ , { __experimentalRole } ] ) => __experimentalRole === 'content'
-		);
-	},
-	( state, blockTypeName ) => [
-		state.blockTypes[ blockTypeName ]?.attributes,
-	]
-);
+export const __experimentalHasContentRoleAttribute = ( ...args ) => {
+	deprecated( '__experimentalHasContentRoleAttribute', {
+		since: '6.7',
+		version: '6.8',
+		hint: 'This is a private selector.',
+	} );
+	return privateHasContentRoleAttribute( ...args );
+};
diff --git a/packages/blocks/src/store/test/private-selectors.js b/packages/blocks/src/store/test/private-selectors.js
new file mode 100644
index 00000000000000..2c173b96b0bcb1
--- /dev/null
+++ b/packages/blocks/src/store/test/private-selectors.js
@@ -0,0 +1,157 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedStyles } from '../private-selectors';
+
+const keyBlocksByName = ( blocks ) =>
+	blocks.reduce(
+		( result, block ) => ( { ...result, [ block.name ]: block } ),
+		{}
+	);
+
+describe( 'private selectors', () => {
+	describe( 'getSupportedStyles', () => {
+		const getState = ( blocks ) => {
+			return deepFreeze( {
+				blockTypes: keyBlocksByName( blocks ),
+			} );
+		};
+
+		it( 'return the list of globally supported panels (no block name)', () => {
+			const supports = getSupportedStyles( getState( [] ) );
+
+			expect( supports ).toEqual( [
+				'background',
+				'backgroundColor',
+				'color',
+				'linkColor',
+				'captionColor',
+				'buttonColor',
+				'headingColor',
+				'fontFamily',
+				'fontSize',
+				'fontStyle',
+				'fontWeight',
+				'lineHeight',
+				'padding',
+				'contentSize',
+				'wideSize',
+				'blockGap',
+			] );
+		} );
+
+		it( 'return the list of globally supported panels including link specific styles', () => {
+			const supports = getSupportedStyles( getState( [] ), null, 'link' );
+
+			expect( supports ).toEqual( [
+				'background',
+				'backgroundColor',
+				'color',
+				'linkColor',
+				'captionColor',
+				'buttonColor',
+				'headingColor',
+				'fontFamily',
+				'fontSize',
+				'fontStyle',
+				'fontWeight',
+				'lineHeight',
+				'padding',
+				'contentSize',
+				'wideSize',
+				'blockGap',
+				'textDecoration',
+			] );
+		} );
+
+		it( 'return the list of globally supported panels including heading specific styles', () => {
+			const supports = getSupportedStyles(
+				getState( [] ),
+				null,
+				'heading'
+			);
+
+			expect( supports ).toEqual( [
+				'background',
+				'backgroundColor',
+				'color',
+				'linkColor',
+				'captionColor',
+				'buttonColor',
+				'headingColor',
+				'fontFamily',
+				'fontStyle',
+				'fontWeight',
+				'lineHeight',
+				'padding',
+				'contentSize',
+				'wideSize',
+				'blockGap',
+				'textTransform',
+				'letterSpacing',
+			] );
+		} );
+
+		it( 'return an empty list for unknown blocks', () => {
+			const supports = getSupportedStyles(
+				getState( [] ),
+				'unkown/block'
+			);
+
+			expect( supports ).toEqual( [] );
+		} );
+
+		it( 'return empty by default for blocks without support keys', () => {
+			const supports = getSupportedStyles(
+				getState( [
+					{
+						name: 'core/example-block',
+						supports: {},
+					},
+				] ),
+				'core/example-block'
+			);
+
+			expect( supports ).toEqual( [] );
+		} );
+
+		it( 'return the allowed styles according to the blocks support keys', () => {
+			const supports = getSupportedStyles(
+				getState( [
+					{
+						name: 'core/example-block',
+						supports: {
+							typography: {
+								fontFamily: true,
+								fontStyle: true,
+								fontWeight: true,
+								textDecoration: true,
+								textTransform: true,
+								letterSpacing: true,
+								fontSize: true,
+								lineHeight: true,
+							},
+						},
+					},
+				] ),
+				'core/example-block'
+			);
+
+			expect( supports ).toEqual( [
+				'fontFamily',
+				'fontSize',
+				'fontStyle',
+				'fontWeight',
+				'lineHeight',
+				'textDecoration',
+				'textTransform',
+				'letterSpacing',
+			] );
+		} );
+	} );
+} );
diff --git a/packages/blocks/src/store/test/process-block-type.js b/packages/blocks/src/store/test/process-block-type.js
new file mode 100644
index 00000000000000..82b2c1ad3080d7
--- /dev/null
+++ b/packages/blocks/src/store/test/process-block-type.js
@@ -0,0 +1,490 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { processBlockType } from '../process-block-type';
+
+describe( 'processBlockType', () => {
+	const baseBlockSettings = {
+		apiVersion: 3,
+		attributes: {},
+		edit: () => null,
+		name: 'test/block',
+		save: () => null,
+		title: 'Test Block',
+	};
+
+	const select = {
+		getBootstrappedBlockType: () => null,
+	};
+
+	afterEach( () => {
+		removeFilter( 'blocks.registerBlockType', 'test/filterSupports' );
+	} );
+
+	it( 'should stabilize experimental block supports', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				typography: {
+					fontSize: true,
+					lineHeight: true,
+					__experimentalFontFamily: true,
+					__experimentalFontStyle: true,
+					__experimentalFontWeight: true,
+					__experimentalLetterSpacing: true,
+					__experimentalTextTransform: true,
+					__experimentalTextDecoration: true,
+					__experimentalWritingMode: true,
+					__experimentalDefaultControls: {
+						fontSize: true,
+						fontAppearance: true,
+						textTransform: true,
+					},
+				},
+				__experimentalBorder: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+					__experimentalDefaultControls: {
+						color: true,
+						radius: true,
+						style: true,
+						width: true,
+					},
+				},
+			},
+		};
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				fontFamily: true,
+				fontStyle: true,
+				fontWeight: true,
+				letterSpacing: true,
+				textTransform: true,
+				textDecoration: true,
+				__experimentalWritingMode: true,
+				defaultControls: {
+					fontSize: true,
+					fontAppearance: true,
+					textTransform: true,
+				},
+			},
+			border: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+				defaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+		} );
+	} );
+
+	it( 'should reapply transformations after supports are filtered', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				typography: {
+					fontSize: true,
+					lineHeight: true,
+					__experimentalFontFamily: true,
+					__experimentalFontStyle: true,
+					__experimentalFontWeight: true,
+					__experimentalLetterSpacing: true,
+					__experimentalTextTransform: true,
+					__experimentalTextDecoration: true,
+					__experimentalWritingMode: true,
+					__experimentalDefaultControls: {
+						fontSize: true,
+						fontAppearance: true,
+						textTransform: true,
+					},
+				},
+				__experimentalBorder: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+					__experimentalDefaultControls: {
+						color: true,
+						radius: true,
+						style: true,
+						width: true,
+					},
+				},
+			},
+		};
+
+		addFilter(
+			'blocks.registerBlockType',
+			'test/filterSupports',
+			( settings, name ) => {
+				if ( name === 'test/block' && settings.supports.typography ) {
+					settings.supports.typography.__experimentalFontFamily = false;
+					settings.supports.typography.__experimentalFontStyle = false;
+					settings.supports.typography.__experimentalFontWeight = false;
+					if ( ! settings.supports.__experimentalBorder ) {
+						settings.supports.__experimentalBorder = {};
+					}
+					settings.supports.__experimentalBorder.radius = false;
+				}
+				return settings;
+			}
+		);
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				fontFamily: false,
+				fontStyle: false,
+				fontWeight: false,
+				letterSpacing: true,
+				textTransform: true,
+				textDecoration: true,
+				__experimentalWritingMode: true,
+				defaultControls: {
+					fontSize: true,
+					fontAppearance: true,
+					textTransform: true,
+				},
+			},
+			border: {
+				color: true,
+				radius: false,
+				style: true,
+				width: true,
+				defaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+		} );
+	} );
+
+	describe( 'block deprecations', () => {
+		const deprecatedBlockSettings = {
+			...baseBlockSettings,
+			supports: {
+				typography: {
+					fontSize: true,
+					lineHeight: true,
+					fontFamily: true,
+					fontStyle: true,
+					fontWeight: true,
+					letterSpacing: true,
+					textTransform: true,
+					textDecoration: true,
+					__experimentalWritingMode: true,
+					__experimentalDefaultControls: {
+						fontSize: true,
+						fontAppearance: true,
+						textTransform: true,
+					},
+				},
+				border: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+					__experimentalDefaultControls: {
+						color: true,
+						radius: true,
+						style: true,
+						width: true,
+					},
+				},
+			},
+			deprecated: [
+				{
+					supports: {
+						typography: {
+							__experimentalFontFamily: true,
+							__experimentalFontStyle: true,
+							__experimentalFontWeight: true,
+							__experimentalLetterSpacing: true,
+							__experimentalTextTransform: true,
+							__experimentalTextDecoration: true,
+							__experimentalWritingMode: true,
+						},
+						__experimentalBorder: {
+							color: true,
+							radius: true,
+							style: true,
+							width: true,
+							__experimentalDefaultControls: {
+								color: true,
+								radius: true,
+								style: true,
+								width: true,
+							},
+						},
+					},
+				},
+			],
+		};
+
+		beforeEach( () => {
+			// Freeze the deprecated block object and its supports so that the original is not mutated.
+			Object.freeze( deprecatedBlockSettings.deprecated[ 0 ] );
+			Object.freeze( deprecatedBlockSettings.deprecated[ 0 ].supports );
+		} );
+
+		it( 'should stabilize experimental supports', () => {
+			const processedBlockType = processBlockType(
+				'test/block',
+				deprecatedBlockSettings
+			)( { select } );
+
+			expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject(
+				{
+					typography: {
+						fontFamily: true,
+						fontStyle: true,
+						fontWeight: true,
+						letterSpacing: true,
+						textTransform: true,
+						textDecoration: true,
+						__experimentalWritingMode: true,
+					},
+					border: {
+						color: true,
+						radius: true,
+						style: true,
+						width: true,
+						defaultControls: {
+							color: true,
+							radius: true,
+							style: true,
+							width: true,
+						},
+					},
+				}
+			);
+		} );
+
+		it( 'should reapply transformations after supports are filtered', () => {
+			addFilter(
+				'blocks.registerBlockType',
+				'test/filterSupports',
+				( settings, name ) => {
+					if (
+						name === 'test/block' &&
+						settings.supports.typography
+					) {
+						settings.supports.typography.__experimentalFontFamily = false;
+						settings.supports.typography.__experimentalFontStyle = false;
+						settings.supports.typography.__experimentalFontWeight = false;
+						settings.supports.__experimentalBorder = {
+							radius: false,
+						};
+					}
+					return settings;
+				}
+			);
+
+			const processedBlockType = processBlockType(
+				'test/block',
+				deprecatedBlockSettings
+			)( { select } );
+
+			expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject(
+				{
+					typography: {
+						fontFamily: false,
+						fontStyle: false,
+						fontWeight: false,
+						letterSpacing: true,
+						textTransform: true,
+						textDecoration: true,
+						__experimentalWritingMode: true,
+					},
+					border: {
+						color: true,
+						radius: false,
+						style: true,
+						width: true,
+						defaultControls: {
+							color: true,
+							radius: true,
+							style: true,
+							width: true,
+						},
+					},
+				}
+			);
+		} );
+	} );
+
+	it( 'should stabilize common experimental properties across all supports', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				typography: {
+					fontSize: true,
+					__experimentalDefaultControls: {
+						fontSize: true,
+					},
+					__experimentalSkipSerialization: true,
+				},
+				spacing: {
+					padding: true,
+					__experimentalDefaultControls: {
+						padding: true,
+					},
+					__experimentalSkipSerialization: true,
+				},
+			},
+		};
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			typography: {
+				fontSize: true,
+				defaultControls: {
+					fontSize: true,
+				},
+				skipSerialization: true,
+				__experimentalSkipSerialization: true,
+			},
+			spacing: {
+				padding: true,
+				defaultControls: {
+					padding: true,
+				},
+				skipSerialization: true,
+				__experimentalSkipSerialization: true,
+			},
+		} );
+	} );
+
+	it( 'should merge experimental and stable keys in order of definition', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				__experimentalBorder: {
+					color: true,
+					radius: false,
+				},
+				border: {
+					color: false,
+					style: true,
+				},
+			},
+		};
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			border: {
+				color: false,
+				radius: false,
+				style: true,
+			},
+		} );
+
+		const reversedSettings = {
+			...baseBlockSettings,
+			supports: {
+				border: {
+					color: false,
+					style: true,
+				},
+				__experimentalBorder: {
+					color: true,
+					radius: false,
+				},
+			},
+		};
+
+		const reversedProcessedType = processBlockType(
+			'test/block',
+			reversedSettings
+		)( { select } );
+
+		expect( reversedProcessedType.supports ).toMatchObject( {
+			border: {
+				color: true,
+				radius: false,
+				style: true,
+			},
+		} );
+	} );
+
+	it( 'should handle non-object config values', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				__experimentalBorder: true,
+				border: false,
+			},
+		};
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			border: false,
+		} );
+	} );
+
+	it( 'should not modify supports that do not need stabilization', () => {
+		const blockSettings = {
+			...baseBlockSettings,
+			supports: {
+				align: true,
+				spacing: {
+					padding: true,
+					margin: true,
+				},
+			},
+		};
+
+		const processedBlockType = processBlockType(
+			'test/block',
+			blockSettings
+		)( { select } );
+
+		expect( processedBlockType.supports ).toMatchObject( {
+			align: true,
+			spacing: {
+				padding: true,
+				margin: true,
+			},
+		} );
+	} );
+} );
diff --git a/packages/blocks/src/store/test/reducer.js b/packages/blocks/src/store/test/reducer.js
index b4312d0fd7df22..1a295f1efc30d7 100644
--- a/packages/blocks/src/store/test/reducer.js
+++ b/packages/blocks/src/store/test/reducer.js
@@ -10,6 +10,7 @@ import {
 	addBlockVariations,
 	addBlockTypes,
 	removeBlockVariations,
+	addBlockStyles,
 } from '../actions';
 import {
 	unprocessedBlockTypes,
@@ -31,24 +32,25 @@ describe( 'unprocessedBlockTypes', () => {
 
 	it( 'should add a new block type', () => {
 		const original = deepFreeze( {
-			'core/paragraph': { name: 'core/paragraph' },
+			'core/paragraph': { title: 'Paragraph' },
 		} );
 
 		const state = unprocessedBlockTypes( original, {
 			type: 'ADD_UNPROCESSED_BLOCK_TYPE',
-			blockType: { name: 'core/code' },
+			name: 'core/code',
+			blockType: { title: 'Code' },
 		} );
 
 		expect( state ).toEqual( {
-			'core/paragraph': { name: 'core/paragraph' },
-			'core/code': { name: 'core/code' },
+			'core/paragraph': { title: 'Paragraph' },
+			'core/code': { title: 'Code' },
 		} );
 	} );
 
 	it( 'should remove unprocessed block types', () => {
 		const original = deepFreeze( {
-			'core/paragraph': { name: 'core/paragraph' },
-			'core/code': { name: 'core/code' },
+			'core/paragraph': { title: 'Paragraph' },
+			'core/code': { title: 'Code' },
 		} );
 
 		const state = blockTypes( original, {
@@ -57,7 +59,7 @@ describe( 'unprocessedBlockTypes', () => {
 		} );
 
 		expect( state ).toEqual( {
-			'core/paragraph': { name: 'core/paragraph' },
+			'core/paragraph': { title: 'Paragraph' },
 		} );
 	} );
 } );
@@ -107,30 +109,55 @@ describe( 'blockStyles', () => {
 		expect( blockStyles( undefined, {} ) ).toEqual( {} );
 	} );
 
-	it( 'should add a new block styles', () => {
+	it( 'should add new block styles for a single block type', () => {
 		const original = deepFreeze( {} );
 
-		let state = blockStyles( original, {
-			type: 'ADD_BLOCK_STYLES',
-			blockName,
-			styles: [ { name: 'fancy' } ],
-		} );
+		let state = blockStyles(
+			original,
+			addBlockStyles( blockName, [ { name: 'fancy' } ] )
+		);
 
 		expect( state ).toEqual( {
 			[ blockName ]: [ { name: 'fancy' } ],
 		} );
 
-		state = blockStyles( state, {
-			type: 'ADD_BLOCK_STYLES',
-			blockName,
-			styles: [ { name: 'lightbox' } ],
-		} );
+		state = blockStyles(
+			state,
+			addBlockStyles( blockName, [ { name: 'lightbox' } ] )
+		);
 
 		expect( state ).toEqual( {
 			[ blockName ]: [ { name: 'fancy' }, { name: 'lightbox' } ],
 		} );
 	} );
 
+	it( 'should add block styles for array of block types', () => {
+		const original = deepFreeze( {} );
+
+		let state = blockStyles(
+			original,
+			addBlockStyles(
+				[ 'core/group', 'core/columns' ],
+				[ { name: 'dark' } ]
+			)
+		);
+
+		expect( state ).toEqual( {
+			'core/group': [ { name: 'dark' } ],
+			'core/columns': [ { name: 'dark' } ],
+		} );
+
+		state = blockStyles(
+			state,
+			addBlockStyles( [ 'core/group' ], [ { name: 'light' } ] )
+		);
+
+		expect( state ).toEqual( {
+			'core/group': [ { name: 'dark' }, { name: 'light' } ],
+			'core/columns': [ { name: 'dark' } ],
+		} );
+	} );
+
 	it( 'should prepend block styles when adding a block', () => {
 		const original = deepFreeze( {
 			[ blockName ]: [ { name: 'fancy' } ],
@@ -393,6 +420,22 @@ describe( 'categories', () => {
 		expect( state ).toEqual( [ { slug: 'wings', title: 'Wings' } ] );
 	} );
 
+	it( 'should ensure, that categories are unique by slug', () => {
+		const original = deepFreeze( [
+			{ slug: 'chicken', title: 'Chicken' },
+		] );
+
+		const state = categories( original, {
+			type: 'SET_CATEGORIES',
+			categories: [ { slug: 'chicken', title: 'Another chicken' } ],
+		} );
+
+		expect( state ).toEqual( [
+			{ slug: 'chicken', title: 'Another chicken' },
+		] );
+		expect( state.length ).toBe( 1 );
+	} );
+
 	it( 'should add the category icon', () => {
 		const original = deepFreeze( [
 			{
diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js
index 8793e1e354e44f..1f95809c9674b0 100644
--- a/packages/blocks/src/store/test/selectors.js
+++ b/packages/blocks/src/store/test/selectors.js
@@ -17,6 +17,11 @@ import {
 	getActiveBlockVariation,
 } from '../selectors';
 
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 const keyBlocksByName = ( blocks ) =>
 	blocks.reduce(
 		( result, block ) => ( { ...result, [ block.name ]: block } ),
@@ -86,26 +91,28 @@ describe( 'selectors', () => {
 
 	describe( 'getChildBlockNames', () => {
 		it( 'should return an empty array if state is empty', () => {
-			const state = {};
+			const state = {
+				blockTypes: {},
+			};
 
 			expect( getChildBlockNames( state, 'parent1' ) ).toHaveLength( 0 );
 		} );
 
 		it( 'should return an empty array if no children exist', () => {
 			const state = {
-				blockTypes: [
-					{
+				blockTypes: {
+					child1: {
 						name: 'child1',
 						parent: [ 'parent1' ],
 					},
-					{
+					child2: {
 						name: 'child2',
 						parent: [ 'parent2' ],
 					},
-					{
+					parent3: {
 						name: 'parent3',
 					},
-				],
+				},
 			};
 
 			expect( getChildBlockNames( state, 'parent3' ) ).toHaveLength( 0 );
@@ -113,15 +120,15 @@ describe( 'selectors', () => {
 
 		it( 'should return an empty array if the parent block is not found', () => {
 			const state = {
-				blockTypes: [
-					{
+				blockTypes: {
+					child1: {
 						name: 'child1',
 						parent: [ 'parent1' ],
 					},
-					{
+					parent1: {
 						name: 'parent1',
 					},
-				],
+				},
 			};
 
 			expect( getChildBlockNames( state, 'parent3' ) ).toHaveLength( 0 );
@@ -129,29 +136,29 @@ describe( 'selectors', () => {
 
 		it( 'should return an array with the child block names', () => {
 			const state = {
-				blockTypes: [
-					{
+				blockTypes: {
+					child1: {
 						name: 'child1',
 						parent: [ 'parent1' ],
 					},
-					{
+					child2: {
 						name: 'child2',
 						parent: [ 'parent2' ],
 					},
-					{
+					child3: {
 						name: 'child3',
 						parent: [ 'parent1' ],
 					},
-					{
+					child4: {
 						name: 'child4',
 					},
-					{
+					parent1: {
 						name: 'parent1',
 					},
-					{
+					parent2: {
 						name: 'parent2',
 					},
-				],
+				},
 			};
 
 			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [
@@ -162,25 +169,25 @@ describe( 'selectors', () => {
 
 		it( 'should return an array with the child block names even if only one child exists', () => {
 			const state = {
-				blockTypes: [
-					{
+				blockTypes: {
+					child1: {
 						name: 'child1',
 						parent: [ 'parent1' ],
 					},
-					{
+					child2: {
 						name: 'child2',
 						parent: [ 'parent2' ],
 					},
-					{
+					child4: {
 						name: 'child4',
 					},
-					{
+					parent1: {
 						name: 'parent1',
 					},
-					{
+					parent2: {
 						name: 'parent2',
 					},
-				],
+				},
 			};
 
 			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [
@@ -190,29 +197,29 @@ describe( 'selectors', () => {
 
 		it( 'should return an array with the child block names even if children have multiple parents', () => {
 			const state = {
-				blockTypes: [
-					{
+				blockTypes: {
+					child1: {
 						name: 'child1',
 						parent: [ 'parent1' ],
 					},
-					{
+					child2: {
 						name: 'child2',
 						parent: [ 'parent1', 'parent2' ],
 					},
-					{
+					child3: {
 						name: 'child3',
 						parent: [ 'parent1' ],
 					},
-					{
+					child4: {
 						name: 'child4',
 					},
-					{
+					parent1: {
 						name: 'parent1',
 					},
-					{
+					parent2: {
 						name: 'parent2',
 					},
-				],
+				},
 			};
 
 			expect( getChildBlockNames( state, 'parent1' ) ).toEqual( [
@@ -289,6 +296,7 @@ describe( 'selectors', () => {
 					testAttribute: {},
 					firstTestAttribute: {},
 					secondTestAttribute: {},
+					thirdTestAttribute: {},
 				},
 			};
 			const FIRST_VARIATION_TEST_ATTRIBUTE_VALUE = 1;
@@ -408,6 +416,161 @@ describe( 'selectors', () => {
 					expect( result ).toEqual( variation );
 				} );
 			} );
+			it( 'should support nested attribute paths in the isActive array', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 1,
+								otherNestedProperty: 5555,
+							},
+						},
+						isActive: [ 'firstTestAttribute.nestedProperty' ],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 2,
+								otherNestedProperty: 5555,
+							},
+						},
+						isActive: [ 'firstTestAttribute.nestedProperty' ],
+					},
+				];
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 1,
+						},
+					} )
+				).toEqual( variations[ 0 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 2,
+						},
+					} )
+				).toEqual( variations[ 1 ] );
+			} );
+			it( 'should support RichText attributes in the isActive array', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute:
+								'This is a <strong>RichText</strong> attribute.',
+						},
+						isActive: [ 'firstTestAttribute' ],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute:
+								'This is a <em>RichText</em> attribute.',
+						},
+						isActive: [ 'firstTestAttribute' ],
+					},
+				];
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: RichTextData.fromHTMLString(
+							'This is a <strong>RichText</strong> attribute.'
+						),
+					} )
+				).toEqual( variations[ 0 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: RichTextData.fromHTMLString(
+							'This is a <em>RichText</em> attribute.'
+						),
+					} )
+				).toEqual( variations[ 1 ] );
+			} );
+			it( 'should compare object attributes in the isActive array based on given properties', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 1,
+								secondNestedProperty: 10,
+							},
+							secondTestAttribute: {
+								nestedProperty: {
+									firstDeeplyNestedProperty: 'a1',
+									secondDeeplyNestedProperty: 'a2',
+								},
+							},
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute.nestedProperty',
+						],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: {
+								nestedProperty: 2,
+								secondNestedProperty: 20,
+							},
+							secondTestAttribute: {
+								nestedProperty: {
+									firstDeeplyNestedProperty: 'b1',
+									secondDeeplyNestedProperty: 'b2',
+								},
+							},
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute.nestedProperty',
+						],
+					},
+				];
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 1,
+							secondNestedProperty: 10,
+							otherNestedProperty: 5555,
+						},
+						secondTestAttribute: {
+							nestedProperty: {
+								firstDeeplyNestedProperty: 'a1',
+								secondDeeplyNestedProperty: 'a2',
+								otherDeeplyNestedProperty: 'ffff',
+							},
+						},
+					} )
+				).toEqual( variations[ 0 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: {
+							nestedProperty: 2,
+							secondNestedProperty: 20,
+							otherNestedProperty: 5555,
+						},
+						secondTestAttribute: {
+							nestedProperty: {
+								firstDeeplyNestedProperty: 'b1',
+								secondDeeplyNestedProperty: 'b2',
+								otherDeeplyNestedProperty: 'ffff',
+							},
+						},
+					} )
+				).toEqual( variations[ 1 ] );
+			} );
 			it( 'should return the active variation based on the given isActive array (multiple values)', () => {
 				const variations = [
 					{
@@ -467,6 +630,136 @@ describe( 'selectors', () => {
 					} )
 				).toEqual( variations[ 2 ] );
 			} );
+			it( 'should return the active variation using the match with the highest specificity for the given isActive array (multiple values)', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+						],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+					{
+						name: 'variation-3',
+						attributes: {
+							firstTestAttribute: 1,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+				];
+
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+					} )
+				).toEqual( variations[ 0 ] );
+				// All variations match the following attributes. Since all matches have an array for their isActive
+				// fields, we can compare the specificity of each match and return the most specific match.
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 1 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 2 ] );
+			} );
+			it( 'should return the active variation using the first match given the isActive array (multiple values) and function', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+						],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute: 1,
+							secondTestAttribute: 2,
+							thirdTestAttribute: 3,
+						},
+						isActive: [
+							'firstTestAttribute',
+							'secondTestAttribute',
+							'thirdTestAttribute',
+						],
+					},
+					{
+						name: 'variation-3',
+						attributes: {
+							firstTestAttribute: 1,
+							thirdTestAttribute: 3,
+						},
+						isActive: ( blockAttributes, variationAttributes ) =>
+							blockAttributes.firstTestAttribute ===
+								variationAttributes.firstTestAttribute &&
+							blockAttributes.thirdTestAttribute ===
+								variationAttributes.thirdTestAttribute,
+					},
+				];
+
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+					} )
+				).toEqual( variations[ 0 ] );
+				// All variations match the following attributes. However, since the third variation has a function
+				// for its isActive field, we cannot compare the specificity of each match, so instead we return the
+				// best match we've found.
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						secondTestAttribute: 2,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 1 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: 1,
+						thirdTestAttribute: 3,
+					} )
+				).toEqual( variations[ 2 ] );
+			} );
 			it( 'should ignore attributes that are not defined in the block type', () => {
 				const variations = [
 					{
diff --git a/packages/blocks/src/store/utils.js b/packages/blocks/src/store/utils.js
new file mode 100644
index 00000000000000..ce9b9f9ab3be94
--- /dev/null
+++ b/packages/blocks/src/store/utils.js
@@ -0,0 +1,50 @@
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ * You can also specify a default value in case the result is nullish.
+ *
+ * @param {Object}       object       Input object.
+ * @param {string|Array} path         Path to the object property.
+ * @param {*}            defaultValue Default value if the value at the specified path is nullish.
+ * @return {*} Value of the object property at the specified path.
+ */
+export const getValueFromObjectPath = ( object, path, defaultValue ) => {
+	const normalizedPath = Array.isArray( path ) ? path : path.split( '.' );
+	let value = object;
+	normalizedPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value ?? defaultValue;
+};
+
+function isObject( candidate ) {
+	return (
+		typeof candidate === 'object' &&
+		candidate.constructor === Object &&
+		candidate !== null
+	);
+}
+
+/**
+ * Determine whether a set of object properties matches a given object.
+ *
+ * Given an object of block attributes and an object of variation attributes,
+ * this function checks recursively whether all the variation attributes are
+ * present in the block attributes object.
+ *
+ * @param {Object} blockAttributes     The object to inspect.
+ * @param {Object} variationAttributes The object of property values to match.
+ * @return {boolean} Whether the block attributes match the variation attributes.
+ */
+export function matchesAttributes( blockAttributes, variationAttributes ) {
+	if ( isObject( blockAttributes ) && isObject( variationAttributes ) ) {
+		return Object.entries( variationAttributes ).every(
+			( [ key, value ] ) =>
+				matchesAttributes( blockAttributes?.[ key ], value )
+		);
+	}
+
+	return blockAttributes === variationAttributes;
+}
diff --git a/packages/browserslist-config/.npmrc b/packages/browserslist-config/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/browserslist-config/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index 40fff67e411d43..aa13654936f3dc 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.41.0 (2024-05-16)
+
+## 5.40.0 (2024-05-02)
+
+## 5.39.0 (2024-04-19)
+
+## 5.38.0 (2024-04-03)
+
+## 5.37.0 (2024-03-21)
+
+## 5.36.0 (2024-03-06)
+
+## 5.35.0 (2024-02-21)
+
+## 5.34.0 (2024-02-09)
+
+## 5.33.0 (2024-01-24)
+
+## 5.32.0 (2024-01-10)
+
+## 5.31.0 (2023-12-13)
+
+## 5.30.0 (2023-11-29)
+
+## 5.29.0 (2023-11-16)
+
+## 5.28.0 (2023-11-02)
+
+## 5.27.0 (2023-10-18)
+
+## 5.26.0 (2023-10-05)
+
+## 5.25.0 (2023-09-20)
+
+## 5.24.0 (2023-08-31)
+
+## 5.23.0 (2023-08-16)
+
+## 5.22.0 (2023-08-10)
+
+## 5.21.0 (2023-07-20)
+
+## 5.20.0 (2023-07-05)
+
+## 5.19.0 (2023-06-23)
+
+## 5.18.0 (2023-06-07)
+
+## 5.17.0 (2023-05-24)
+
+## 5.16.0 (2023-05-10)
+
+## 5.15.0 (2023-04-26)
+
+## 5.14.0 (2023-04-12)
+
+## 5.13.0 (2023-03-29)
+
+## 5.12.0 (2023-03-15)
+
+## 5.11.0 (2023-03-01)
+
+## 5.10.0 (2023-02-15)
+
+## 5.9.0 (2023-02-01)
+
+## 5.8.0 (2023-01-11)
+
+## 5.7.0 (2023-01-02)
+
+## 5.6.0 (2022-12-14)
+
 ## 5.5.0 (2022-11-16)
 
 ## 5.4.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 5.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -39,56 +143,56 @@
 
 ## 2.1.4 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
 
 ## 2.1.3 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Docs update of the Browserslist example repo URL ([#98](https://github.com/WordPress/packages/pull/98))
 
 ## 2.1.2 (2018-02-28)
 
-### Polish
+### Internal
 
 -   Removed `package-lock.json` file, lockfiles for apps, not packages ([#88](https://github.com/WordPress/packages/pull/88))
 
 ## 2.1.1 (2018-02-21)
 
-### Polish
+### Internal
 
 -   Added "Code is Poetry" footer to README.md ([#82](https://github.com/WordPress/packages/pull/82))
 
 ## 2.1.0 (2018-02-15)
 
-### New Feature
+### New Features
 
 -   Updated Browserslist to v3.1.0 ([#81](https://github.com/WordPress/packages/pull/81))
 
 ## 2.0.0
 
-### Breaking Change
+### Breaking Changes
 
 -   Transfer to @wordpress npm organization.
 -   Published as @wordpress/browserslist-config.
 
 ## 1.1.0
 
-### New Feature
+### New Features
 
 -   Add browserslist tests.
 -   Refactor per coding standards.
 
 ## 1.0.1
 
-### Polish
+### Internal
 
 -   Update installation documentation.
 
 ## 1.0.0
 
-### New Feature
+### New Features
 
 -   Initial release.
diff --git a/packages/browserslist-config/README.md b/packages/browserslist-config/README.md
index 0ab8e724947d7a..2376c8332a2b81 100644
--- a/packages/browserslist-config/README.md
+++ b/packages/browserslist-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install browserslist @wordpress/browserslist-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index 1eed733f6a6158..1c3a527226dfaf 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "5.5.0",
+	"version": "6.13.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
new file mode 100644
index 00000000000000..40ce6d4fc65cfa
--- /dev/null
+++ b/packages/commands/CHANGELOG.md
@@ -0,0 +1,101 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.29.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 0.28.0 (2024-05-02)
+
+## 0.27.0 (2024-04-19)
+
+## 0.26.0 (2024-04-03)
+
+## 0.25.0 (2024-03-21)
+
+## 0.24.0 (2024-03-06)
+
+## 0.23.0 (2024-02-21)
+
+## 0.22.0 (2024-02-09)
+
+## 0.21.0 (2024-01-24)
+
+## 0.20.0 (2024-01-10)
+
+### Enhancements
+
+-   Support conditional commands and commands loaders using the "disabled" config.
+
+## 0.19.0 (2023-12-13)
+
+## 0.18.0 (2023-11-29)
+
+## 0.17.0 (2023-11-16)
+
+## 0.16.0 (2023-11-02)
+
+## 0.15.0 (2023-10-18)
+
+## 0.14.0 (2023-10-05)
+
+## 0.13.0 (2023-09-20)
+
+## 0.12.0 (2023-08-31)
+
+## 0.11.0 (2023-08-16)
+
+## 0.10.0 (2023-08-10)
+
+## 0.9.0 (2023-07-20)
+
+## 0.8.0 (2023-07-05)
+
+## 0.7.0 (2023-06-23)
+
+## 0.6.0 (2023-06-07)
+
+## 0.5.0 (2023-05-24)
+
+## 0.4.0 (2023-05-10)
+
+## 0.3.0 (2023-04-26)
+
+## 0.2.0 (2023-04-12)
+
+Initial release.
diff --git a/packages/commands/README.md b/packages/commands/README.md
new file mode 100644
index 00000000000000..b7382f98a8c848
--- /dev/null
+++ b/packages/commands/README.md
@@ -0,0 +1,190 @@
+# Commands
+
+Commands is a generic package that allows registering and modifying commands to be displayed using the commands menu, also called the Command Palette. The Command Palette can be accessed in the Editor using `cmd+k`.
+
+## Types of commands
+
+There are two ways to register commands: static or dynamic. Both methods receive a command object as an argument, which provides:
+
+-   `name`: A unique machine-readable name for the command
+-   `label`: A human-readable label
+-   `icon`: An SVG icon
+-   `callback`: A callback function that is called when the command is selected
+-   `context`: (Optional) The context of the command
+
+### Static commands
+
+Static commands can be registered using the `wp.data.dispatch( wp.commands.store ).registerCommand` action or using the `wp.commands.useCommand` React hook. Static commands are commonly used to perform a specific action. These could include adding a new page or opening a section of the Editor interface, such as opening the Editor Preferences modal. See the `useCommand` [code example](#usecommand) below.
+
+### Dynamic commands
+
+Dynamic commands, on the other hand, are registered using “command loaders", `wp.commands.useCommandLoader`. These loaders are needed when the command list depends on a search term entered by the user in the Command Palette input or when some commands are only available when some conditions are met.
+
+For example, when a user types "contact", the Command Palette needs to filter the available pages using that input to try and find the Contact page. See the `useCommandLoader` [code example](#usecommandloader) below.
+
+## Contextual commands
+
+Static and dynamic commands can be contextual. This means that in a given context (for example, when navigating the Site Editor or editing a template), some specific commands are given more priority and are visible as soon as you open the Command Palette. Also, when typing the Command Palette, these contextual commands are shown above the rest of the commands.
+
+At the moment, three contexts have been implemented:
+
+-   `site-editor`: This is the context that is set when you are navigating in the site editor (sidebar visible).
+-   `entity-edit`: This is the context that is set when you are editing a document (template, template part or page).
+-   `block-selection-edit`: This is the context that is set when a block is selected.
+
+As the usage of the Command Palette expands, more contexts will be added.
+
+Attaching a command or command loader to a given context is as simple as adding the `context` property (with the right context value from the available contexts above) to the `useCommand` or `useCommandLoader` calls.
+
+## WordPress Data API
+
+The Command Palette also offers a number of [selectors and actions](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-commands/) to manipulate its state, which include:
+
+-   Retrieving the registered commands and command loaders using the following selectors `getCommands` and `getCommandLoader`
+-   Checking if the Command Palette is open using the `isOpen` selector.
+-   Programmatically open or close the Command Palette using the `open` and `close` actions.
+
+See the [Commands Data](https://developer.wordpress.org/block-editor/reference-guides/data/data-core-commands/) documentation for more information.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/commands --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._
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### store
+
+Store definition for the commands namespace.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore>
+
+_Usage_
+
+```js
+import { store as commandsStore } from '@wordpress/commands';
+import { useDispatch } from '@wordpress/data';
+...
+const { open: openCommandCenter } = useDispatch( commandsStore );
+```
+
+_Type_
+
+-   `Object`
+
+### useCommand
+
+Attach a command to the command palette. Used for static commands.
+
+_Usage_
+
+```js
+import { useCommand } from '@wordpress/commands';
+import { plus } from '@wordpress/icons';
+
+useCommand( {
+	name: 'myplugin/my-command-name',
+	label: __( 'Add new post' ),
+	icon: plus,
+	callback: ( { close } ) => {
+		document.location.href = 'post-new.php';
+		close();
+	},
+} );
+```
+
+_Parameters_
+
+-   _command_ `import('../store/actions').WPCommandConfig`: command config.
+
+### useCommandLoader
+
+Attach a command loader to the command palette. Used for dynamic commands.
+
+_Usage_
+
+```js
+import { useCommandLoader } from '@wordpress/commands';
+import { post, page, layout, symbolFilled } from '@wordpress/icons';
+
+const icons = {
+    post,
+    page,
+    wp_template: layout,
+    wp_template_part: symbolFilled,
+};
+
+function usePageSearchCommandLoader( { search } ) {
+    // Retrieve the pages for the "search" term.
+    const { records, isLoading } = useSelect( ( select ) => {
+        const { getEntityRecords } = select( coreStore );
+        const query = {
+            search: !! search ? search : undefined,
+            per_page: 10,
+            orderby: search ? 'relevance' : 'date',
+        };
+        return {
+            records: getEntityRecords( 'postType', 'page', query ),
+            isLoading: ! select( coreStore ).hasFinishedResolution(
+                'getEntityRecords',
+                'postType', 'page', query ]
+            ),
+        };
+    }, [ search ] );
+
+    // Create the commands.
+    const commands = useMemo( () => {
+        return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+            return {
+                name: record.title?.rendered + ' ' + record.id,
+                label: record.title?.rendered
+                    ? record.title?.rendered
+                    : __( '(no title)' ),
+                icon: icons[ postType ],
+                callback: ( { close } ) => {
+                    const args = {
+                        postType,
+                        postId: record.id,
+                        ...extraArgs,
+                    };
+                    document.location = addQueryArgs( 'site-editor.php', args );
+                    close();
+                },
+            };
+        } );
+    }, [ records, history ] );
+
+    return {
+        commands,
+        isLoading,
+    };
+}
+
+useCommandLoader( {
+    name: 'myplugin/page-search',
+    hook: usePageSearchCommandLoader,
+} );
+```
+
+_Parameters_
+
+-   _loader_ `import('../store/actions').WPCommandLoaderConfig`: command loader config.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/commands/package.json b/packages/commands/package.json
new file mode 100644
index 00000000000000..b28a7f89e6c3d2
--- /dev/null
+++ b/packages/commands/package.json
@@ -0,0 +1,49 @@
+{
+	"name": "@wordpress/commands",
+	"version": "1.13.0",
+	"description": "Handles the commands menu.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"commands",
+		"k"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/commands/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/commands"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/private-apis": "*",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.0.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
new file mode 100644
index 00000000000000..55f78ac02c655b
--- /dev/null
+++ b/packages/commands/src/components/command-menu.js
@@ -0,0 +1,303 @@
+/**
+ * External dependencies
+ */
+import { Command, useCommandState } from 'cmdk';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Modal,
+	TextHighlight,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import {
+	store as keyboardShortcutsStore,
+	useShortcut,
+} from '@wordpress/keyboard-shortcuts';
+import { Icon, search as inputIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+
+const inputLabel = __( 'Search commands and settings' );
+
+function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
+	const { isLoading, commands = [] } = hook( { search } ) ?? {};
+	useEffect( () => {
+		setLoader( name, isLoading );
+	}, [ setLoader, name, isLoading ] );
+
+	if ( ! commands.length ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ commands.map( ( command ) => (
+				<Command.Item
+					key={ command.name }
+					value={ command.searchLabel ?? command.label }
+					onSelect={ () => command.callback( { close } ) }
+					id={ command.name }
+				>
+					<HStack
+						alignment="left"
+						className={ clsx( 'commands-command-menu__item', {
+							'has-icon': command.icon,
+						} ) }
+					>
+						{ command.icon && <Icon icon={ command.icon } /> }
+						<span>
+							<TextHighlight
+								text={ command.label }
+								highlight={ search }
+							/>
+						</span>
+					</HStack>
+				</Command.Item>
+			) ) }
+		</>
+	);
+}
+
+export function CommandMenuLoaderWrapper( { hook, search, setLoader, close } ) {
+	// The "hook" prop is actually a custom React hook
+	// so to avoid breaking the rules of hooks
+	// the CommandMenuLoaderWrapper component need to be
+	// remounted on each hook prop change
+	// We use the key state to make sure we do that properly.
+	const currentLoaderRef = useRef( hook );
+	const [ key, setKey ] = useState( 0 );
+	useEffect( () => {
+		if ( currentLoaderRef.current !== hook ) {
+			currentLoaderRef.current = hook;
+			setKey( ( prevKey ) => prevKey + 1 );
+		}
+	}, [ hook ] );
+
+	return (
+		<CommandMenuLoader
+			key={ key }
+			hook={ currentLoaderRef.current }
+			search={ search }
+			setLoader={ setLoader }
+			close={ close }
+		/>
+	);
+}
+
+export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
+	const { commands, loaders } = useSelect(
+		( select ) => {
+			const { getCommands, getCommandLoaders } = select( commandsStore );
+			return {
+				commands: getCommands( isContextual ),
+				loaders: getCommandLoaders( isContextual ),
+			};
+		},
+		[ isContextual ]
+	);
+
+	if ( ! commands.length && ! loaders.length ) {
+		return null;
+	}
+
+	return (
+		<Command.Group>
+			{ commands.map( ( command ) => (
+				<Command.Item
+					key={ command.name }
+					value={ command.searchLabel ?? command.label }
+					onSelect={ () => command.callback( { close } ) }
+					id={ command.name }
+				>
+					<HStack
+						alignment="left"
+						className={ clsx( 'commands-command-menu__item', {
+							'has-icon': command.icon,
+						} ) }
+					>
+						{ command.icon && <Icon icon={ command.icon } /> }
+						<span>
+							<TextHighlight
+								text={ command.label }
+								highlight={ search }
+							/>
+						</span>
+					</HStack>
+				</Command.Item>
+			) ) }
+			{ loaders.map( ( loader ) => (
+				<CommandMenuLoaderWrapper
+					key={ loader.name }
+					hook={ loader.hook }
+					search={ search }
+					setLoader={ setLoader }
+					close={ close }
+				/>
+			) ) }
+		</Command.Group>
+	);
+}
+
+function CommandInput( { isOpen, search, setSearch } ) {
+	const commandMenuInput = useRef();
+	const _value = useCommandState( ( state ) => state.value );
+	const selectedItemId = useMemo( () => {
+		const item = document.querySelector(
+			`[cmdk-item=""][data-value="${ _value }"]`
+		);
+		return item?.getAttribute( 'id' );
+	}, [ _value ] );
+	useEffect( () => {
+		// Focus the command palette input when mounting the modal.
+		if ( isOpen ) {
+			commandMenuInput.current.focus();
+		}
+	}, [ isOpen ] );
+	return (
+		<Command.Input
+			ref={ commandMenuInput }
+			value={ search }
+			onValueChange={ setSearch }
+			placeholder={ inputLabel }
+			aria-activedescendant={ selectedItemId }
+			icon={ search }
+		/>
+	);
+}
+
+/**
+ * @ignore
+ */
+export function CommandMenu() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const [ search, setSearch ] = useState( '' );
+	const isOpen = useSelect(
+		( select ) => select( commandsStore ).isOpen(),
+		[]
+	);
+	const { open, close } = useDispatch( commandsStore );
+	const [ loaders, setLoaders ] = useState( {} );
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/commands',
+			category: 'global',
+			description: __( 'Open the command palette.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'k',
+			},
+		} );
+	}, [ registerShortcut ] );
+
+	useShortcut(
+		'core/commands',
+		/** @type {import('react').KeyboardEventHandler} */
+		( event ) => {
+			// Bails to avoid obscuring the effect of the preceding handler(s).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			event.preventDefault();
+			if ( isOpen ) {
+				close();
+			} else {
+				open();
+			}
+		},
+		{
+			bindGlobal: true,
+		}
+	);
+
+	const setLoader = useCallback(
+		( name, value ) =>
+			setLoaders( ( current ) => ( {
+				...current,
+				[ name ]: value,
+			} ) ),
+		[]
+	);
+	const closeAndReset = () => {
+		setSearch( '' );
+		close();
+	};
+
+	if ( ! isOpen ) {
+		return false;
+	}
+
+	const onKeyDown = ( event ) => {
+		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
+		) {
+			event.preventDefault();
+		}
+	};
+
+	const isLoading = Object.values( loaders ).some( Boolean );
+
+	return (
+		<Modal
+			className="commands-command-menu"
+			overlayClassName="commands-command-menu__overlay"
+			onRequestClose={ closeAndReset }
+			__experimentalHideHeader
+			contentLabel={ __( 'Command palette' ) }
+		>
+			<div className="commands-command-menu__container">
+				<Command label={ inputLabel } onKeyDown={ onKeyDown }>
+					<div className="commands-command-menu__header">
+						<CommandInput
+							search={ search }
+							setSearch={ setSearch }
+							isOpen={ isOpen }
+						/>
+						<Icon icon={ inputIcon } />
+					</div>
+					<Command.List label={ __( 'Command suggestions' ) }>
+						{ search && ! isLoading && (
+							<Command.Empty>
+								{ __( 'No results found.' ) }
+							</Command.Empty>
+						) }
+						<CommandMenuGroup
+							search={ search }
+							setLoader={ setLoader }
+							close={ closeAndReset }
+							isContextual
+						/>
+						{ search && (
+							<CommandMenuGroup
+								search={ search }
+								setLoader={ setLoader }
+								close={ closeAndReset }
+							/>
+						) }
+					</Command.List>
+				</Command>
+			</div>
+		</Modal>
+	);
+}
diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
new file mode 100644
index 00000000000000..bcf3d17d7baa6c
--- /dev/null
+++ b/packages/commands/src/components/style.scss
@@ -0,0 +1,152 @@
+// dirty hack to clean up modal
+.commands-command-menu {
+	border-radius: $grid-unit-05;
+	width: calc(100% - #{$grid-unit-40});
+	margin: auto;
+	max-width: 400px;
+	position: relative;
+	top: calc(5% + #{$header-height});
+
+	@include break-small() {
+		top: calc(10% + #{$header-height});
+	}
+
+	.components-modal__content {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.commands-command-menu__overlay {
+	display: block;
+	align-items: start;
+}
+
+.commands-command-menu__header {
+	display: flex;
+	align-items: center;
+	padding: 0 $grid-unit-20;
+
+	.components-button {
+		height: $grid-unit-70;
+		width: $grid-unit-70;
+		border: $border-width solid $gray-600;
+		border-right: 0;
+		justify-content: center;
+		border-radius: $radius-small 0 0 $radius-small;
+
+		& + [cmdk-input] {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+	}
+}
+
+.commands-command-menu__container {
+	// the style here is a hack to force safari to repaint to avoid a style glitch
+	will-change: transform;
+
+	[cmdk-input] {
+		border: none;
+		width: 100%;
+		padding: $grid-unit-20 $grid-unit-05;
+		outline: none;
+		color: $gray-900;
+		margin: 0;
+		font-size: 15px;
+		line-height: 28px;
+		border-radius: 0;
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+	}
+
+	[cmdk-item] {
+		border-radius: $radius-small;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		color: $gray-900;
+		font-size: $default-font-size;
+
+		&[aria-selected="true"],
+		&:active {
+			background: var(--wp-admin-theme-color);
+			color: $white;
+
+			svg {
+				fill: $white;
+			}
+		}
+
+		&[aria-disabled="true"] {
+			color: $gray-600;
+			cursor: not-allowed;
+		}
+
+		svg {
+			fill: $gray-900;
+		}
+
+		> div {
+			min-height: $button-size-next-default-40px;
+			padding: $grid-unit-05;
+			padding-left: $grid-unit-50; // Account for commands without icons.
+		}
+
+		> .has-icon {
+			padding-left: $grid-unit;
+		}
+	}
+
+	[cmdk-root] > [cmdk-list] {
+		max-height: 368px; // Specific to not have commands overflow oddly.
+		overflow: auto;
+
+		// Ensures there is always padding bottom on the last group, when there are commands.
+		& [cmdk-list-sizer] > [cmdk-group]:last-child [cmdk-group-items]:not(:empty) {
+			padding-bottom: $grid-unit-10;
+		}
+
+		& [cmdk-list-sizer] > [cmdk-group] > [cmdk-group-items]:not(:empty) {
+			padding: 0 $grid-unit-10;
+		}
+	}
+
+	[cmdk-empty] {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		white-space: pre-wrap;
+		color: $gray-900;
+		padding: $grid-unit-10 0 $grid-unit-40;
+	}
+
+	[cmdk-loading] {
+		padding: $grid-unit-20;
+	}
+
+	[cmdk-list-sizer] {
+		position: relative;
+	}
+}
+
+.commands-command-menu__item span {
+	// Ensure commands do not run off the edge (great for post titles).
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.commands-command-menu__item mark {
+	color: inherit;
+	background: unset;
+	font-weight: 600;
+}
diff --git a/packages/commands/src/hooks/use-command-context.js b/packages/commands/src/hooks/use-command-context.js
new file mode 100644
index 00000000000000..ac41118241fccd
--- /dev/null
+++ b/packages/commands/src/hooks/use-command-context.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Sets the active context of the command palette
+ *
+ * @param {string} context Context to set.
+ */
+export default function useCommandContext( context ) {
+	const { getContext } = useSelect( commandsStore );
+	const initialContext = useRef( getContext() );
+	const { setContext } = unlock( useDispatch( commandsStore ) );
+
+	useEffect( () => {
+		setContext( context );
+	}, [ context, setContext ] );
+
+	// This effects ensures that on unmount, we restore the context
+	// that was set before the component actually mounts.
+	useEffect( () => {
+		const initialContextRef = initialContext.current;
+		return () => setContext( initialContextRef );
+	}, [ setContext ] );
+}
diff --git a/packages/commands/src/hooks/use-command-loader.js b/packages/commands/src/hooks/use-command-loader.js
new file mode 100644
index 00000000000000..5143cbb0d5ef20
--- /dev/null
+++ b/packages/commands/src/hooks/use-command-loader.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+
+/**
+ * Attach a command loader to the command palette. Used for dynamic commands.
+ *
+ * @param {import('../store/actions').WPCommandLoaderConfig} loader command loader config.
+ *
+ * @example
+ * ```js
+ * import { useCommandLoader } from '@wordpress/commands';
+ * import { post, page, layout, symbolFilled } from '@wordpress/icons';
+ *
+ * const icons = {
+ *     post,
+ *     page,
+ *     wp_template: layout,
+ *     wp_template_part: symbolFilled,
+ * };
+ *
+ * function usePageSearchCommandLoader( { search } ) {
+ *     // Retrieve the pages for the "search" term.
+ *     const { records, isLoading } = useSelect( ( select ) => {
+ *         const { getEntityRecords } = select( coreStore );
+ *         const query = {
+ *             search: !! search ? search : undefined,
+ *             per_page: 10,
+ *             orderby: search ? 'relevance' : 'date',
+ *         };
+ *         return {
+ *             records: getEntityRecords( 'postType', 'page', query ),
+ *             isLoading: ! select( coreStore ).hasFinishedResolution(
+ *                 'getEntityRecords',
+ *                 'postType', 'page', query ]
+ *             ),
+ *         };
+ *     }, [ search ] );
+ *
+ *     // Create the commands.
+ *     const commands = useMemo( () => {
+ *         return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
+ *             return {
+ *                 name: record.title?.rendered + ' ' + record.id,
+ *                 label: record.title?.rendered
+ *                     ? record.title?.rendered
+ *                     : __( '(no title)' ),
+ *                 icon: icons[ postType ],
+ *                 callback: ( { close } ) => {
+ *                     const args = {
+ *                         postType,
+ *                         postId: record.id,
+ *                         ...extraArgs,
+ *                     };
+ *                     document.location = addQueryArgs( 'site-editor.php', args );
+ *                     close();
+ *                 },
+ *             };
+ *         } );
+ *     }, [ records, history ] );
+ *
+ *     return {
+ *         commands,
+ *         isLoading,
+ *     };
+ * }
+ *
+ * useCommandLoader( {
+ *     name: 'myplugin/page-search',
+ *     hook: usePageSearchCommandLoader,
+ * } );
+ * ```
+ */
+export default function useCommandLoader( loader ) {
+	const { registerCommandLoader, unregisterCommandLoader } =
+		useDispatch( commandsStore );
+	useEffect( () => {
+		if ( loader.disabled ) {
+			return;
+		}
+		registerCommandLoader( {
+			name: loader.name,
+			hook: loader.hook,
+			context: loader.context,
+		} );
+		return () => {
+			unregisterCommandLoader( loader.name );
+		};
+	}, [
+		loader.name,
+		loader.hook,
+		loader.context,
+		loader.disabled,
+		registerCommandLoader,
+		unregisterCommandLoader,
+	] );
+}
diff --git a/packages/commands/src/hooks/use-command.js b/packages/commands/src/hooks/use-command.js
new file mode 100644
index 00000000000000..32ff6336a7d467
--- /dev/null
+++ b/packages/commands/src/hooks/use-command.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+
+/**
+ * Attach a command to the command palette. Used for static commands.
+ *
+ * @param {import('../store/actions').WPCommandConfig} command command config.
+ *
+ * @example
+ * ```js
+ * import { useCommand } from '@wordpress/commands';
+ * import { plus } from '@wordpress/icons';
+ *
+ * useCommand( {
+ *     name: 'myplugin/my-command-name',
+ *     label: __( 'Add new post' ),
+ *	   icon: plus,
+ *     callback: ({ close }) => {
+ *         document.location.href = 'post-new.php';
+ *         close();
+ *     },
+ * } );
+ * ```
+ */
+export default function useCommand( command ) {
+	const { registerCommand, unregisterCommand } = useDispatch( commandsStore );
+	const currentCallbackRef = useRef( command.callback );
+	useEffect( () => {
+		currentCallbackRef.current = command.callback;
+	}, [ command.callback ] );
+
+	useEffect( () => {
+		if ( command.disabled ) {
+			return;
+		}
+		registerCommand( {
+			name: command.name,
+			context: command.context,
+			label: command.label,
+			searchLabel: command.searchLabel,
+			icon: command.icon,
+			callback: ( ...args ) => currentCallbackRef.current( ...args ),
+		} );
+		return () => {
+			unregisterCommand( command.name );
+		};
+	}, [
+		command.name,
+		command.label,
+		command.searchLabel,
+		command.icon,
+		command.context,
+		command.disabled,
+		registerCommand,
+		unregisterCommand,
+	] );
+}
diff --git a/packages/commands/src/index.js b/packages/commands/src/index.js
new file mode 100644
index 00000000000000..b62166f6afc44c
--- /dev/null
+++ b/packages/commands/src/index.js
@@ -0,0 +1,5 @@
+export { CommandMenu } from './components/command-menu';
+export { privateApis } from './private-apis';
+export { default as useCommand } from './hooks/use-command';
+export { default as useCommandLoader } from './hooks/use-command-loader';
+export { store } from './store';
diff --git a/packages/commands/src/lock-unlock.js b/packages/commands/src/lock-unlock.js
new file mode 100644
index 00000000000000..ffff128cdb91b7
--- /dev/null
+++ b/packages/commands/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/commands'
+	);
diff --git a/packages/commands/src/private-apis.js b/packages/commands/src/private-apis.js
new file mode 100644
index 00000000000000..7bc1af9570d04a
--- /dev/null
+++ b/packages/commands/src/private-apis.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { default as useCommandContext } from './hooks/use-command-context';
+import { lock } from './lock-unlock';
+
+/**
+ * @private
+ */
+export const privateApis = {};
+lock( privateApis, {
+	useCommandContext,
+} );
diff --git a/packages/commands/src/store/actions.js b/packages/commands/src/store/actions.js
new file mode 100644
index 00000000000000..2926bb84ab6079
--- /dev/null
+++ b/packages/commands/src/store/actions.js
@@ -0,0 +1,108 @@
+/** @typedef {import('@wordpress/keycodes').WPKeycodeModifier} WPKeycodeModifier */
+
+/**
+ * Configuration of a registered keyboard shortcut.
+ *
+ * @typedef {Object} WPCommandConfig
+ *
+ * @property {string}      name        Command name.
+ * @property {string}      label       Command label.
+ * @property {string=}     searchLabel Command search label.
+ * @property {string=}     context     Command context.
+ * @property {JSX.Element} icon        Command icon.
+ * @property {Function}    callback    Command callback.
+ * @property {boolean}     disabled    Whether to disable the command.
+ */
+
+/**
+ * @typedef {(search: string) => WPCommandConfig[]} WPCommandLoaderHook hoo
+ */
+
+/**
+ * Command loader config.
+ *
+ * @typedef {Object} WPCommandLoaderConfig
+ *
+ * @property {string}              name     Command loader name.
+ * @property {string=}             context  Command loader context.
+ * @property {WPCommandLoaderHook} hook     Command loader hook.
+ * @property {boolean}             disabled Whether to disable the command loader.
+ */
+
+/**
+ * Returns an action object used to register a new command.
+ *
+ * @param {WPCommandConfig} config Command config.
+ *
+ * @return {Object} action.
+ */
+export function registerCommand( config ) {
+	return {
+		type: 'REGISTER_COMMAND',
+		...config,
+	};
+}
+
+/**
+ * Returns an action object used to unregister a command.
+ *
+ * @param {string} name Command name.
+ *
+ * @return {Object} action.
+ */
+export function unregisterCommand( name ) {
+	return {
+		type: 'UNREGISTER_COMMAND',
+		name,
+	};
+}
+
+/**
+ * Register command loader.
+ *
+ * @param {WPCommandLoaderConfig} config Command loader config.
+ *
+ * @return {Object} action.
+ */
+export function registerCommandLoader( config ) {
+	return {
+		type: 'REGISTER_COMMAND_LOADER',
+		...config,
+	};
+}
+
+/**
+ * Unregister command loader hook.
+ *
+ * @param {string} name Command loader name.
+ *
+ * @return {Object} action.
+ */
+export function unregisterCommandLoader( name ) {
+	return {
+		type: 'UNREGISTER_COMMAND_LOADER',
+		name,
+	};
+}
+
+/**
+ * Opens the command palette.
+ *
+ * @return {Object} action.
+ */
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+/**
+ * Closes the command palette.
+ *
+ * @return {Object} action.
+ */
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}
diff --git a/packages/commands/src/store/index.js b/packages/commands/src/store/index.js
new file mode 100644
index 00000000000000..f3aa6f85f28b86
--- /dev/null
+++ b/packages/commands/src/store/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as actions from './actions';
+import * as selectors from './selectors';
+import * as privateActions from './private-actions';
+import { unlock } from '../lock-unlock';
+
+const STORE_NAME = 'core/commands';
+
+/**
+ * Store definition for the commands namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ *
+ * @example
+ * ```js
+ * import { store as commandsStore } from '@wordpress/commands';
+ * import { useDispatch } from '@wordpress/data';
+ * ...
+ * const { open: openCommandCenter } = useDispatch( commandsStore );
+ * ```
+ */
+export const store = createReduxStore( STORE_NAME, {
+	reducer,
+	actions,
+	selectors,
+} );
+
+register( store );
+unlock( store ).registerPrivateActions( privateActions );
diff --git a/packages/commands/src/store/private-actions.js b/packages/commands/src/store/private-actions.js
new file mode 100644
index 00000000000000..57dba53451e658
--- /dev/null
+++ b/packages/commands/src/store/private-actions.js
@@ -0,0 +1,13 @@
+/**
+ * Sets the active context.
+ *
+ * @param {string} context Context.
+ *
+ * @return {Object} action.
+ */
+export function setContext( context ) {
+	return {
+		type: 'SET_CONTEXT',
+		context,
+	};
+}
diff --git a/packages/commands/src/store/reducer.js b/packages/commands/src/store/reducer.js
new file mode 100644
index 00000000000000..eba6346f3f2c4c
--- /dev/null
+++ b/packages/commands/src/store/reducer.js
@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+
+/**
+ * Reducer returning the registered commands
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+function commands( state = {}, action ) {
+	switch ( action.type ) {
+		case 'REGISTER_COMMAND':
+			return {
+				...state,
+				[ action.name ]: {
+					name: action.name,
+					label: action.label,
+					searchLabel: action.searchLabel,
+					context: action.context,
+					callback: action.callback,
+					icon: action.icon,
+				},
+			};
+		case 'UNREGISTER_COMMAND': {
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
+		}
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the command loaders
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+function commandLoaders( state = {}, action ) {
+	switch ( action.type ) {
+		case 'REGISTER_COMMAND_LOADER':
+			return {
+				...state,
+				[ action.name ]: {
+					name: action.name,
+					context: action.context,
+					hook: action.hook,
+				},
+			};
+		case 'UNREGISTER_COMMAND_LOADER': {
+			const { [ action.name ]: _, ...remainingState } = state;
+			return remainingState;
+		}
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the command palette open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isOpen( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN':
+			return true;
+		case 'CLOSE':
+			return false;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning the command palette's active context.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function context( state = 'root', action ) {
+	switch ( action.type ) {
+		case 'SET_CONTEXT':
+			return action.context;
+	}
+
+	return state;
+}
+
+const reducer = combineReducers( {
+	commands,
+	commandLoaders,
+	isOpen,
+	context,
+} );
+
+export default reducer;
diff --git a/packages/commands/src/store/selectors.js b/packages/commands/src/store/selectors.js
new file mode 100644
index 00000000000000..69646c479d5067
--- /dev/null
+++ b/packages/commands/src/store/selectors.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { createSelector } from '@wordpress/data';
+
+/**
+ * Returns the registered static commands.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual commands.
+ *
+ * @return {import('./actions').WPCommandConfig[]} The list of registered commands.
+ */
+export const getCommands = createSelector(
+	( state, contextual = false ) =>
+		Object.values( state.commands ).filter( ( command ) => {
+			const isContextual =
+				command.context && command.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commands, state.context ]
+);
+
+/**
+ * Returns the registered command loaders.
+ *
+ * @param {Object}  state      State tree.
+ * @param {boolean} contextual Whether to return only contextual command loaders.
+ *
+ * @return {import('./actions').WPCommandLoaderConfig[]} The list of registered command loaders.
+ */
+export const getCommandLoaders = createSelector(
+	( state, contextual = false ) =>
+		Object.values( state.commandLoaders ).filter( ( loader ) => {
+			const isContextual =
+				loader.context && loader.context === state.context;
+			return contextual ? isContextual : ! isContextual;
+		} ),
+	( state ) => [ state.commandLoaders, state.context ]
+);
+
+/**
+ * Returns whether the command palette is open.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {boolean} Returns whether the command palette is open.
+ */
+export function isOpen( state ) {
+	return state.isOpen;
+}
+
+/**
+ * Returns whether the active context.
+ *
+ * @param {Object} state State tree.
+ *
+ * @return {string} Context.
+ */
+export function getContext( state ) {
+	return state.context;
+}
diff --git a/packages/commands/src/style.scss b/packages/commands/src/style.scss
new file mode 100644
index 00000000000000..e8cce79ec9f956
--- /dev/null
+++ b/packages/commands/src/style.scss
@@ -0,0 +1 @@
+@import "./components/style.scss";
diff --git a/packages/components/.npmrc b/packages/components/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/components/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/components/.stylelintrc.js b/packages/components/.stylelintrc.js
new file mode 100644
index 00000000000000..2a583a09c16059
--- /dev/null
+++ b/packages/components/.stylelintrc.js
@@ -0,0 +1,23 @@
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: '../../.stylelintrc.json',
+	rules: {
+		'declaration-property-value-disallowed-list': [
+			{
+				'/.*/': [ '/--wp-admin-theme-/', '/--wp-components-color-/' ],
+			},
+			{
+				message:
+					'To support component theming and ensure proper fallbacks, use Sass variables from packages/components/src/utils/theme-variables.scss instead.',
+			},
+		],
+	},
+	overrides: [
+		{
+			files: [ './src/utils/theme-variables.scss' ],
+			rules: {
+				'declaration-property-value-disallowed-list': null,
+			},
+		},
+	],
+};
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c57f3b01d58256..1fd87cc958352f 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,9 +2,1592 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Removed the unused `__unstableMotionContext` export ([#67623](https://github.com/WordPress/gutenberg/pull/67623)).
+
+### Enhancements
+
+-   `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
+-   `CustomGradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
+
+### Deprecations
+
+-   `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)).
+-   `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)).
+-   `CustomSelectControl`: Deprecate 36px default size ([#67441](https://github.com/WordPress/gutenberg/pull/67441)).
+-   `NumberControl`: Deprecate 36px default size ([#66730](https://github.com/WordPress/gutenberg/pull/66730)).
+-   `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)).
+-   `FormFileUpload`: Deprecate 36px default size ([#67438](https://github.com/WordPress/gutenberg/pull/67438)).
+-   `FormTokenField`: Deprecate 36px default size ([#67454](https://github.com/WordPress/gutenberg/pull/67454)).
+
+
+### Enhancements
+
+-   `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)).
+-   `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
+-   `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
+-   `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
+
+### Experimental
+
+-   `Menu`: throw when subcomponents are not rendered inside top level `Menu` ([#67411](https://github.com/WordPress/gutenberg/pull/67411)).
+
+### Internal
+
+-   Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).
+-   Upgraded `@ariakit/react` (v0.4.15) and `@ariakit/test` (v0.4.7) ([#67404](https://github.com/WordPress/gutenberg/pull/67404)).
+-   `ToolbarButton`: Set size to "compact" ([#67440](https://github.com/WordPress/gutenberg/pull/67440)).
+-   `SlotFill`: remove manual rerenders from the portal `Fill` component ([#67471](https://github.com/WordPress/gutenberg/pull/67471)).
+
+### Bug Fixes
+
+-   `ResizableBox`: Make drag handles focusable ([#67305](https://github.com/WordPress/gutenberg/pull/67305)).
+
+## 28.13.0 (2024-11-27)
+
+### Deprecations
+
+-   `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)).
+-   `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745).
+-   `FontSizePicker`: Deprecate 36px default size ([#66920](https://github.com/WordPress/gutenberg/pull/66920)).
+-   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
+-   `ToggleGroupControl`: Deprecate 36px default size ([#66747](https://github.com/WordPress/gutenberg/pull/66747)).
+-   `RangeControl`: Deprecate 36px default size ([#66721](https://github.com/WordPress/gutenberg/pull/66721)).
+
+### Bug Fixes
+
+-   `Modal`: Modal: Increase size of the Close button ([#66792](https://github.com/WordPress/gutenberg/pull/66792)).
+-   `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)).
+-   `SlotFill`: Fix a bug where a stale value of `fillProps` could be used ([#67000](https://github.com/WordPress/gutenberg/pull/67000)).
+-   `ColorPalette`: Disable `Clear` button if there's no color value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `GradientPicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `DuotonePicker`: Disable `Clear` button if there's no value. ([#67108](https://github.com/WordPress/gutenberg/pull/67108)).
+-   `ColorPicker`: Add accessible label for copy button ([#67094](https://github.com/WordPress/gutenberg/pull/67094)).
+-   `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)).
+-   `Composite.Hover`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
+-   `Composite.Typeahead`: Restore functionality ([#67212](https://github.com/WordPress/gutenberg/pull/67212)).
+-   `Dashicons`: Remove non-existent icons from type ([#67235](https://github.com/WordPress/gutenberg/pull/67235)).
+
+### Enhancements
+
+-   `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)).
+-   `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)).
+-   `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)).
+-   `DropZone`: Add `isEligible` prop to allow customizing whether the drop zone should activate ([#67317](https://github.com/WordPress/gutenberg/pull/67317)).
+-   `CircularOptionPicker`: Update `Button` sizes to be ready for 40px default size ([#67285](https://github.com/WordPress/gutenberg/pull/67285)).
+-   `DuotonePicker`: Simplify Button styles ([#66641](https://github.com/WordPress/gutenberg/pull/66641)).
+
+### Experimental
+
+-   `SlotFill`: Remove registration API methods from return value of `__experimentalUseSlot` ([#67070](https://github.com/WordPress/gutenberg/pull/67070)).
+-   `SlotFill`: Remove the `createPrivateSlotFill` private API ([#67238](https://github.com/WordPress/gutenberg/pull/67238)).
+
+### Internal
+
+-   `SlotFill`: fix dependencies of `Fill` registration effects ([#67071](https://github.com/WordPress/gutenberg/pull/67071)).
+-   `SlotFill`: rewrite the `Slot` component from class component to functional ([#67153](https://github.com/WordPress/gutenberg/pull/67153)).
+-   `Menu.ItemHelpText`: Fix text wrapping to prevent unintended word breaks ([#67011](https://github.com/WordPress/gutenberg/pull/67011)).
+-   `BorderBoxControl`: Suppress redundant warnings for deprecated 36px size ([#67213](https://github.com/WordPress/gutenberg/pull/67213)).
+-   `CustomGradientPicker`: Prepare `Button`s for 40px default size ([#67286](https://github.com/WordPress/gutenberg/pull/67286)).
+
+## 28.12.0 (2024-11-16)
+
+### Deprecations
+
+-   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
+
+### Bug Fixes
+
+-   `Popover`: Fix missing label of the headerTitle Close button ([#66813](https://github.com/WordPress/gutenberg/pull/66813)).
+
+### Enhancements
+
+-   `MenuItem`: Add 40px size prop on Button ([#66596](https://github.com/WordPress/gutenberg/pull/66596)).
+-   `Guide`: Use small size button for page controls ([#66607](https://github.com/WordPress/gutenberg/pull/66607)).
+-   `PaletteEdit`: Add appropriate size props to Buttons ([#66590](https://github.com/WordPress/gutenberg/pull/66590)).
+-   `Notice`: Add appropriate size props to Buttons ([#66593](https://github.com/WordPress/gutenberg/pull/66593)).
+-   `FormTokenField`: Fix token styles ([#66640](https://github.com/WordPress/gutenberg/pull/66640)).
+
+### Internal
+
+-   `Snackbar`: Use link variant for action Button ([#66560](https://github.com/WordPress/gutenberg/pull/66560)).
+-   `BorderControl`: Remove unnecessary boolean assignments ([#66857](https://github.com/WordPress/gutenberg/pull/66857)).
+
+## 28.11.0 (2024-10-30)
+
+### Deprecations
+
+-   `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)).
+-   `BorderControl`: Deprecate 36px default size ([#65755](https://github.com/WordPress/gutenberg/pull/65755)).
+
+### Bug Fixes
+
+-   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).
+-   `RadioGroup`: Fix arrow key navigation in RTL ([#66202](https://github.com/WordPress/gutenberg/pull/66202)).
+-   `Tabs` and `ToggleGroupControl`: round indicator size ([#66426](https://github.com/WordPress/gutenberg/pull/66426)).
+
+### Enhancements
+
+-   `PaletteEdit`: use `Item` internally instead of custom styles ([#66164](https://github.com/WordPress/gutenberg/pull/66164)).
+-   `Popover`: Use small size variant for close button when `expandOnMobile` prop is enabled ([#66587](https://github.com/WordPress/gutenberg/pull/66587)).
+
+### Experimental
+
+-   `Tabs`: remove internal custom logic ([#66097](https://github.com/WordPress/gutenberg/pull/66097)).
+-   `Tabs`: add props to control active tab item ([#66223](https://github.com/WordPress/gutenberg/pull/66223)).
+-   `Tabs`: restore vertical alignent for tabs content ([#66215](https://github.com/WordPress/gutenberg/pull/66215)).
+-   `Tabs`: fix indicator animation ([#66198](https://github.com/WordPress/gutenberg/pull/66198)).
+-   `Tabs`: update indicator more reactively ([#66207](https://github.com/WordPress/gutenberg/pull/66207)).
+-   `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)).
+-   `Tabs`: override tablist's tabindex only when necessary ([#66209](https://github.com/WordPress/gutenberg/pull/66209)).
+-   `DropdownMenuV2`: rename to `Menu` ([#66289](https://github.com/WordPress/gutenberg/pull/66289)).
+
+### Internal
+
+-   ESLint: Stop disabling `react-hooks/exhaustive-deps` rule ([#66324](https://github.com/WordPress/gutenberg/pull/66324)).
+-   `TabPanel`: Add 40px size prop to tab Button ([#66557](https://github.com/WordPress/gutenberg/pull/66557)).
+-   `Panel`: Add 40px size prop to Button ([#66589](https://github.com/WordPress/gutenberg/pull/66589)).
+
+## 28.10.0 (2024-10-16)
+
+### Bug Fixes
+
+-   `Tooltip`: add `aria-describedby` to the anchor only if not redundant ([#65989](https://github.com/WordPress/gutenberg/pull/65989)).
+-   `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
+-   `RangeControl`: do not tooltip contents to the DOM when not shown ([#65875](https://github.com/WordPress/gutenberg/pull/65875)).
+-   `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)).
+-   `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)).
+-   `Button`: fix `box-shadow` transition for secondary variation ([#66045](https://github.com/WordPress/gutenberg/pull/66045)).
+-   `ToggleGroupControl`: Don't set value on focus after a reset ([#66151](https://github.com/WordPress/gutenberg/pull/66151)).
+
+### Deprecations
+
+-   `SearchControl`: Soft deprecate `onClose` prop ([#65988](https://github.com/WordPress/gutenberg/pull/65988)).
+
+### Enhancements
+
+-   `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)).
+-   `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
+-   `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
+-   `FormTokenField`: display `No items found` when there are no matches found. This occurs when the `__experimentalExpandOnFocus` prop is enabled ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
+
+## 28.9.0 (2024-10-03)
+
+### Bug Fixes
+
+-   `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
+-   `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
+-   `ToggleGroupControl`: Fix arrow key navigation in RTL ([#65735](https://github.com/WordPress/gutenberg/pull/65735)).
+-   `ToggleGroupControl`: indicator doesn't jump around when the layout around it changes ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).
+-   `Composite`: fix legacy support for the store prop ([#65821](https://github.com/WordPress/gutenberg/pull/65821)).
+-   `Composite`: make items tabbable if active element gets removed ([#65720](https://github.com/WordPress/gutenberg/pull/65720)).
+-   `DropZone`: fix class names on drop ([#65798](https://github.com/WordPress/gutenberg/pull/65798)).
+
+### Deprecations
+
+-   `__experimentalBorderControl` can now be imported as a stable `BorderControl` ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
+-   `__experimentalBorderBoxControl` can now be imported as a stable `BorderBoxControl` ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
+-   `__experimentalNavigator*` components can now be imported as a stable `Navigator`. Similarly, the `__experimentalUseNavigator` hook can be imported as a stable `useNavigator` ([#65802](https://github.com/WordPress/gutenberg/pull/65802)).
+
+### Enhancements
+
+-   `Tabs`: handle horizontal overflow and large tab lists gracefully ([#64371](https://github.com/WordPress/gutenberg/pull/64371)).
+-   `BorderControl`: promote to stable ([#65475](https://github.com/WordPress/gutenberg/pull/65475)).
+-   `BorderBoxControl`: promote to stable ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
+-   `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)).
+-   `DatePicker`: Use compact button size. ([#65653](https://github.com/WordPress/gutenberg/pull/65653)).
+-   `Navigator`: add support for exit animation ([#64777](https://github.com/WordPress/gutenberg/pull/64777)).
+-   `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
+-   `BorderControl`: Use `__next40pxDefaultSize` prop for Reset button ([#65682](https://github.com/WordPress/gutenberg/pull/65682)).
+-   `Navigator`: stabilize APIs ([#64613](https://github.com/WordPress/gutenberg/pull/64613)).
+-   `ToggleGroupControl`: indicator animation is now more lightweight and performant ([#65175](https://github.com/WordPress/gutenberg/pull/65175)).
+
+## 28.8.0 (2024-09-19)
+
+### Bug Fixes
+
+-   `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)).
+-   `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
+-   `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)).
+-   `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)).
+-   `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)).
+
+### Deprecations
+
+-   Deprecate `__unstableComposite`, `__unstableCompositeGroup`, `__unstableCompositeItem` and `__unstableUseCompositeState`. Consumers of the package should use the stable `Composite` component instead ([#63572](https://github.com/WordPress/gutenberg/pull/63572)).
+-   `__experimentalBoxControl` can now be imported as a stable `BoxControl` ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
+
+### New Features
+
+-   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)).
+
+### Enhancements
+
+-   `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
+-   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+-   `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Modal`: add exit animation for internally triggered events ([#65203](https://github.com/WordPress/gutenberg/pull/65203)).
+-   `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)).
+-   `BoxControl`: promote to stable ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
+
+### Bug Fixes
+
+-   `DatePicker`: better hover/focus styles ([#65117](https://github.com/WordPress/gutenberg/pull/65117)).
+
+### Internal
+
+-   `Tabs`: improved performance of the indicator animation ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
+-   `Composite`: Remove from private APIs ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   use local copy of `use-lilius` instead of `npm` dependency ([#65097](https://github.com/WordPress/gutenberg/pull/65097)).
+-   `BoxControl`: Fix critical error when null value is passed ([#65287](https://github.com/WordPress/gutenberg/pull/65287)).
+
+## 28.7.0 (2024-09-05)
+
+### Deprecations
+
+-   Deprecate `replace` from the options accepted by `useNavigator().goTo()` ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
+-   Soft deprecate `size` prop on `AlignmentMatrixControl.Icon` ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
+-   `__experimentalAlignmentMatrixControl` can now be imported as a stable `AlignmentMatrixControl` ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
+-   Deprecate `DimensionControl`, scheduled to be removed in WordPress 7.0 ([#64951](https://github.com/WordPress/gutenberg/pull/64951)).
+
+### Enhancements
+
+-   `ColorPicker`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `CustomSelectControl V2`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `AlignmentMatrixControl.Icon`: rewrite entirely using SVG markup ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
+-   `DateTime`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `FormToggle`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `FormTokenField`: Remove unused border-radius ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `InputControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `Navigation`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `RangeControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `ResizeableBox`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `TabPanel`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `Tabs`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
+-   `InputControl`: Add variants to prefix/suffix wrappers ([#64824](https://github.com/WordPress/gutenberg/pull/64824)).
+-   `Navigator`: remove location history, simplify internal logic ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
+-   `AlignmentMatrixControl`: Promote to stable ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
+-   Tighten gap between the main control and the prefix/suffix slot for the following components ([#64908](https://github.com/WordPress/gutenberg/pull/64908)).
+    -   `InputControl`
+    -   `NumberControl`
+    -   `SelectControl`
+    -   `TreeSelect`
+    -   `UnitControl`
+    -   Contains internal visual changes from this PR:
+        -   `AnglePickerControl`
+        -   `ColorPicker`
+-   Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
+    -   `AnglePickerControl`
+    -   `ColorPicker` (on the inputs)
+    -   `CustomSelectControl`
+    -   `CustomSelectControlV2`
+    -   `DateTimePicker` (on the selects and inputs)
+    -   `DimensionControl`
+    -   `FocalPointPicker` (on the inputs)
+    -   `FontSizePicker` (on the custom inputs)
+    -   `GradientPicker` (on the selects and inputs)
+    -   `InputControl`
+    -   `NumberControl`
+    -   `QueryControls` (on the selects and inputs)
+    -   `RangeControl` (on the inputs)
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TimePicker` (on the inputs)
+    -   `TreeSelect`
+    -   `UnitControl`
+-   `Modal`: Update animation effect ([#64580](https://github.com/WordPress/gutenberg/pull/64580)).
+-   `AlignmentMatrixControl`: do not use composite store directly ([#64850](https://github.com/WordPress/gutenberg/pull/64850)).
+-   `CircularOptionPicker`: do not use composite store directly ([#64833](https://github.com/WordPress/gutenberg/pull/64833)).
+
+### Bug Fixes
+
+-   `TimePicker`: use ToggleGroupControl for AM/PM toggle ([#64800](https://github.com/WordPress/gutenberg/pull/64800)).
+-   `ColorPalette` utils: do not normalize undefined color values ([#64969](https://github.com/WordPress/gutenberg/pull/64969)).
+-   `DatePicker` restore round radius for event dot ([#65031](https://github.com/WordPress/gutenberg/pull/65031)).
+
+### Internal
+
+-   `DropdownMenu` v2: expose CompositeTypeaheadV2 and CompositeHoverV2 via private APIs ([#64985](https://github.com/WordPress/gutenberg/pull/64985)).
+-   `DropdownMenu` v2: fix flashing menu item styles when using keyboard ([#64873](https://github.com/WordPress/gutenberg/pull/64873), [#64942](https://github.com/WordPress/gutenberg/pull/64942)).
+-   `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)).
+-   `DropdownMenu` v2: add `GroupLabel` subcomponent ([#64854](https://github.com/WordPress/gutenberg/pull/64854)).
+-   `DropdownMenuV2`: update animation ([#64868](https://github.com/WordPress/gutenberg/pull/64868)).
+-   `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)).
+-   `Composite` V2: add "With Slot Fill" example ([#65051](https://github.com/WordPress/gutenberg/pull/65051)).
+-   `Composite` V2: accept store props on top-level component ([#64832](https://github.com/WordPress/gutenberg/pull/64832)).
+-   `Composite` V2: remove `store` prop and `useCompositeStore` hook ([#64723](https://github.com/WordPress/gutenberg/pull/64723)).
+
+## 28.6.0 (2024-08-21)
+
+### Deprecations
+
+-   Deprecate bottom margin on the following `BaseControl`-based components. Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version ([#64408](https://github.com/WordPress/gutenberg/pull/64408)).
+    -   `BaseControl`
+    -   `CheckboxControl`
+    -   `ComboboxControl`
+    -   `DimensionControl`
+    -   `FocalPointPicker`
+    -   `RangeControl`
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TextareaControl`
+    -   `ToggleControl`
+    -   `ToggleGroupControl`
+    -   `TreeSelect`
+-   Deprecate `NavigatorToParentButton` and `useNavigator().goToParent()` in favor of `NavigatorBackButton` and `useNavigator().goBack()` ([#63317](https://github.com/WordPress/gutenberg/pull/63317)).
+
+### Enhancements
+
+-   `Placeholder`: Temporarily rewind radius scale ([#64672](https://github.com/WordPress/gutenberg/pull/64672)).
+-   `Composite`: improve Storybook examples and add interactive controls ([#64397](https://github.com/WordPress/gutenberg/pull/64397)).
+-   `Composite`: use internal context to forward the composite store to sub-components ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
+-   `QueryControls`: Default to new 40px size ([#64457](https://github.com/WordPress/gutenberg/pull/64457)).
+-   `TimePicker`: add `hideLabelFromVision` prop ([#64267](https://github.com/WordPress/gutenberg/pull/64267)).
+-   `FocalPointPicker`: Default to new 40px size ([#64456](https://github.com/WordPress/gutenberg/pull/64456)).
+-   `DropdownMenuV2`: adopt elevation scale ([#64432](https://github.com/WordPress/gutenberg/pull/64432)).
+-   `AlignmentMatrixControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `AnglePickerControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `BorderControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ButtonGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Button`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `CircularOptionPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ColorIndicator`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ColorPalette`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `CustomGradientPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `DropZone`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `DropdownMenuV2`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `FocalPointPicker`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Guide`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Modal`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Placeholder`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Popover`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ProgressBar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `RadioControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Snackbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `TabPanel`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Text`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ToggleGroupControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `ToolbarGroup`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Toolbar`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Tooltip`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
+-   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
+-   `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)).
+-   `Modal`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
+-   `Popover`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
+-   `Snackbar`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
+-   `TextareaControl`: Update styles ([#64586](https://github.com/WordPress/gutenberg/pull/64586)).
+-   `CircularOptionPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).
+-   `CustomGradientPicker`: Update hard-coded border-width value ([#64680](https://github.com/WordPress/gutenberg/pull/64680)).
+
+### Bug Fixes
+
+-   `RangeControl`: disable reset button when the current value is equal to the reset value ([#64579](https://github.com/WordPress/gutenberg/pull/64579)).
+-   `RangeControl`: tweak mark and label absolute positioning ([#64487](https://github.com/WordPress/gutenberg/pull/64487)).
+-   `RadioGroup`: use fieldset and legend to group radio inputs ([#64582](https://github.com/WordPress/gutenberg/pull/64582)).
+
+### Internal
+
+-   `Composite` v2: add `Hover` and `Typeahead` subcomponents ([#64399](https://github.com/WordPress/gutenberg/pull/64399)).
+-   `Composite` v2: add focus-related props to `Composite`and`Composite.Item` subcomponents ([#64450](https://github.com/WordPress/gutenberg/pull/64450)).
+-   `Composite` v2: add `Context` subcomponent ([#64493](https://github.com/WordPress/gutenberg/pull/64493)).
+-   `DropdownMenu` v2: use themed color variables ([#64647](https://github.com/WordPress/gutenberg/pull/64647)).
+-   `CustomSelectControl`: Improve type inferring ([#64412](https://github.com/WordPress/gutenberg/pull/64412)).
+-   Update `ariakit` to version `0.4.10` ([#64637](https://github.com/WordPress/gutenberg/pull/64637)).
+-   Ariakit: Use `useStoreState()` instead of `store.useState()` ([#64648](https://github.com/WordPress/gutenberg/pull/64648)).
+
+## 28.5.0 (2024-08-07)
+
+### Bug Fixes
+
+-   `ColorPalette`: Remove extra bottom margin when `CircularOptionPicker` is unneeded ([#63961](https://github.com/WordPress/gutenberg/pull/63961)).
+-   `CustomSelectControl`: Restore `describedBy` functionality ([#63957](https://github.com/WordPress/gutenberg/pull/63957)).
+-   `Button`: Improve the aria-disabled focus style ([#62480](https://github.com/WordPress/gutenberg/pull/62480)).
+-   `Modal`: Fix the dismissal logic for React development mode ([#64132](https://github.com/WordPress/gutenberg/pull/64132)).
+-   `Button`: Fix tertiary destructive hover style ([#64152](https://github.com/WordPress/gutenberg/pull/64152)).
+-   `Autocompleter UI`: Fix text color when hovering selected item ([#64294](https://github.com/WordPress/gutenberg/pull/64294)).
+-   `Heading`: Add the missing `size` prop to the component's props type ([#64299](https://github.com/WordPress/gutenberg/pull/64299)).
+-   `TextControl`: Fix the padding of the component to be consistent with the rest of the controls. ([#64326](https://github.com/WordPress/gutenberg/pull/64326)).
+
+### Enhancements
+
+-   `ColorPalette`: partial support of `color-mix()` CSS colors ([#64224](https://github.com/WordPress/gutenberg/pull/64224)).
+-   `TimeInput`: Expose as subcomponent of `TimePicker` ([#63145](https://github.com/WordPress/gutenberg/pull/63145)).
+-   `RadioControl`: add support for option help text ([#63751](https://github.com/WordPress/gutenberg/pull/63751)).
+-   `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)).
+-   `Guide`: Add `__next40pxDefaultSize` to buttons ([#64181](https://github.com/WordPress/gutenberg/pull/64181)).
+-   `SelectControl`: Pass through `options` props ([#64211](https://github.com/WordPress/gutenberg/pull/64211)).
+-   `DimensionControl`: Add `__nextHasNoMarginBottom` prop to remove bottom margin ([#64346](https://github.com/WordPress/gutenberg/pull/64346)).
+
+### Internal
+
+-   Upgraded `@ariakit/react` (v0.4.7) and `@ariakit/test` (v0.4.0) ([#64066](https://github.com/WordPress/gutenberg/pull/64066)).
+-   `DropdownMenuV2`: break menu item help text on multiple lines for better truncation. ([#63916](https://github.com/WordPress/gutenberg/pull/63916)).
+-   `CustomSelectControl`: Support generic props type ([#63985](https://github.com/WordPress/gutenberg/pull/63985)).
+
+## 28.4.0 (2024-07-24)
+
+### Deprecations
+
+-   `FormTokenField`: Deprecate bottom margin. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0 ([#63491](https://github.com/WordPress/gutenberg/pull/63491)).
+
+### Bug Fixes
+
+-   `BaseControl`: change label's `display` to `block`. ([#63911](https://github.com/WordPress/gutenberg/pull/63911))
+-   `ComboboxControl`: Fix ComboboxControl reset button when using the keyboard. ([#63410](https://github.com/WordPress/gutenberg/pull/63410))
+-   `Button`: Never apply `aria-disabled` to anchor ([#63376](https://github.com/WordPress/gutenberg/pull/63376)).
+-   `SelectControl`: Fix hover/focus color in wp-admin ([#63855](https://github.com/WordPress/gutenberg/pull/63855)).
+-   `ToggleControl`: Fix indentation ([#63903](https://github.com/WordPress/gutenberg/pull/63903)).
+
+### Enhancements
+
+-   `Button`: Rename Button describedBy prop to description and deprecate old name. ([#63486](https://github.com/WordPress/gutenberg/pull/63486))
+-   `ToggleGroupControl`: support disabled options ([#63450](https://github.com/WordPress/gutenberg/pull/63450)).
+-   `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)).
+-   `SelectControl`: Add `"minimal"` variant ([#63265](https://github.com/WordPress/gutenberg/pull/63265)).
+-   `FontSizePicker`: tidy up internal logic ([#63553](https://github.com/WordPress/gutenberg/pull/63553)).
+-   `ToggleControl`: Update spacing and appearance to adhere to 4px baseline, slightly reducing footprint. Make label treatment and focus styles consistent with `RadioControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
+-   `CheckboxControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `RadioControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
+-   `RadioControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
+-   `FormToggle`: Update spacing and appearance to adhere to 4px baseline, slightly reducing footprint. Make label treatment and focus styles consistent with `RadioControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
+
+### Internal
+
+-   `CustomSelectControl`: switch to ariakit-based implementation ([#63258](https://github.com/WordPress/gutenberg/pull/63258)).
+-   `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343))
+-   `CustomSelectControlV2`: do not flip popover if legacy adapter. ([#63357](https://github.com/WordPress/gutenberg/pull/63357)).
+-   `DropdownMenuV2`: invert animation direction. ([#63443](https://github.com/WordPress/gutenberg/pull/63443)).
+-   `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)).
+-   `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)).
+-   `Tabs`: keep full opacity of focus ring and remove hover styles on disabled tabs ([#63754](https://github.com/WordPress/gutenberg/pull/63754)).
+-   `Placeholder`: Remove unnecssary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)).
+
+### Documentation
+
+-   `BaseControl`: Improve the base control help prop documentation. ([#63693](https://github.com/WordPress/gutenberg/pull/63693)).
+
+## 28.3.0 (2024-07-10)
+
+### Enhancements
+
+-   `Tabs`: hyphenate tab labels ([#63337](https://github.com/WordPress/gutenberg/pull/63337)).
+-   `Tooltip`: Add support for `className` prop ([#63157](https://github.com/WordPress/gutenberg/pull/63157)).
+-   `Toolbar`: Add support for `vertical` orientation ([#60123](https://github.com/WordPress/gutenberg/pull/60123)).
+-   `BaseControl`: forward ref on `VisualLabel` ([#63169](https://github.com/WordPress/gutenberg/pull/63169)).
+-   `ToolbarButton`: Deprecate `isDisabled` prop and merge with `disabled` ([#63101](https://github.com/WordPress/gutenberg/pull/63101)).
+-   `Button`: Stabilize `__experimentalIsFocusable` prop as `accessibleWhenDisabled` ([#62282](https://github.com/WordPress/gutenberg/pull/62282)).
+-   `ToolbarButton`: Always keep focusable when disabled ([#63102](https://github.com/WordPress/gutenberg/pull/63102)).
+-   `ProgressBar`: Fix indeterminate RTL support. ([#63129](https://github.com/WordPress/gutenberg/pull/63129)).
+-   `RangeControl`: Fix RTL support for custom marks ([#63198](https://github.com/WordPress/gutenberg/pull/63198)).
+-   `TimePicker`: Add `dateOrder` prop ([#62481](https://github.com/WordPress/gutenberg/pull/62481)).
+
+### Bug Fixes
+
+-   `Tabs`: Make Tabs have a fluid height ([#62027](https://github.com/WordPress/gutenberg/pull/62027)).
+-   `UnitControl`: Fix colors when disabled. ([#62970](https://github.com/WordPress/gutenberg/pull/62970))
+-   `useUpdateEffect`: Correctly track mounted state in strict mode. ([#62974](https://github.com/WordPress/gutenberg/pull/62974))
+-   `UnitControl`: Fix an issue where keyboard shortcuts unintentionally shift focus on Windows OS. ([#62988](https://github.com/WordPress/gutenberg/pull/62988))
+-   Fix inaccessibly disabled `Button`s ([#62306](https://github.com/WordPress/gutenberg/pull/62306)).
+-   `TimePicker`: Fix time zone overflow ([#63209](https://github.com/WordPress/gutenberg/pull/63209)).
+-   `SelectControl`: Fix disabled styles ([#63266](https://github.com/WordPress/gutenberg/pull/63266)).
+-   `Tabs`: Fix text-align when text wraps in vertical mode ([#63272](https://github.com/WordPress/gutenberg/pull/63272)).
+-   `Tabs`: Fix "With tab icons" Storybook example ([#63297](https://github.com/WordPress/gutenberg/pull/63297)).
+
+### Internal
+
+-   Allow ariakit and framer motion imports in the components package. ([#63123](https://github.com/WordPress/gutenberg/pull/63123))
+-   `CustomSelectControlV2`: prevent keyboard event propagation in legacy wrapper. ([#62907](https://github.com/WordPress/gutenberg/pull/62907))
+-   `CustomSelectControlV2`: expose legacy wrapper through private APIs. ([#62936](https://github.com/WordPress/gutenberg/pull/62936))
+-   `CustomSelectControlV2`: fix item styles ([#62825](https://github.com/WordPress/gutenberg/pull/62825))
+-   `CustomSelectControlV2`: add root element wrapper. ([#62803](https://github.com/WordPress/gutenberg/pull/62803))
+-   `CustomSelectControlV2`: tweak item inline padding based on size ([#62850](https://github.com/WordPress/gutenberg/pull/62850)).
+-   `CustomSelectControlV2`: fix popover styles. ([#62821](https://github.com/WordPress/gutenberg/pull/62821))
+-   `CustomSelectControlV2`: fix trigger text alignment in RTL languages ([#62869](https://github.com/WordPress/gutenberg/pull/62869)).
+-   `CustomSelectControlV2`: allow wrapping item hint to new line ([#62848](https://github.com/WordPress/gutenberg/pull/62848)).
+-   `CustomSelectControlV2`: fix select popover content overflow. ([#62844](https://github.com/WordPress/gutenberg/pull/62844))
+-   `CustomSelectControlV2`: keep item checkmark top aligned. ([#63230](https://github.com/WordPress/gutenberg/pull/63230))
+-   `CustomSelectControlV2`: keep legacy arrow down behavior only for legacy wrapper. ([#62919](https://github.com/WordPress/gutenberg/pull/62919))
+-   `CustomSelectControlV2`: fix trigger button font size. ([#63131](https://github.com/WordPress/gutenberg/pull/63131))
+-   `CustomSelectControlV2`: fix labelling with a visually hidden label. ([#63137](https://github.com/WordPress/gutenberg/pull/63137))
+-   `CustomSelectControlV2`: allow checkmark wrapper to collapse when not shown. ([#63229](https://github.com/WordPress/gutenberg/pull/63229))
+-   Extract `TimeInput` component from `TimePicker` ([#60613](https://github.com/WordPress/gutenberg/pull/60613)).
+-   `TimeInput`: Add `label` prop ([#63106](https://github.com/WordPress/gutenberg/pull/63106)).
+-   Method style type signatures have been changed to function style ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+-   `FontSizePicker`: use CustomSelectControl V2 legacy adapter ([#63134](https://github.com/WordPress/gutenberg/pull/63134)).
+
+## 28.2.0 (2024-06-26)
+
+### Enhancements
+
+-   `DropZone`: rewrite animation without depending on framer-motion. ([#62044](https://github.com/WordPress/gutenberg/pull/62044))
+-   `__experimentalPaletteEdit`: improve the accessibility. ([#62753](https://github.com/WordPress/gutenberg/pull/62753))
+
+### Internal
+
+-   `CustomSelectControl`: align unit tests for v1 and legacy v2 versions. ([#62706](https://github.com/WordPress/gutenberg/pull/62706))
+-   `CustomSelectControlV2`: fix handling of extra option attributes in the `onChange` callbacks and when forwarding them to the option DOM elements. ([#62255](https://github.com/WordPress/gutenberg/pull/62255))
+-   `CustomSelectControlV2`: fix setting initial value and reacting to external controlled updates. ([#62733](https://github.com/WordPress/gutenberg/pull/62733))
+-   `CustomSelectControlV2`: Handle long strings in selected value ([#62198](https://github.com/WordPress/gutenberg/pull/62198)).
+
+## 28.1.0 (2024-06-15)
+
+### Enhancements
+
+-   Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
+-   Updates the space between input + label to `8px` in CheckboxControl and RadioControl. Also increased the space between RadioControl components to `12px` to make it consistent with CheckboxControl. ([#61696](https://github.com/WordPress/gutenberg/pull/61696))
+
+### Bug Fixes
+
+-   `Tabs`: Prevent accidental overflow in indicator ([#61979](https://github.com/WordPress/gutenberg/pull/61979)).
+
+## 28.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Enhancements
+
+-   `Tabs`: Animate indicator ([#60560](https://github.com/WordPress/gutenberg/pull/60560)).
+-   `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)).
+-   `ProgressBar`: Expose as public API ([#61062](https://github.com/WordPress/gutenberg/pull/61062)).
+-   `ProgressBar`: Simplify default width implementation and make it more easily overridable ([#61976](https://github.com/WordPress/gutenberg/pull/61976)).
+
+### Bug Fixes
+
+-   `Autocomplete`: Stabilize rendering of autocomplete items ([#61877](https://github.com/WordPress/gutenberg/pull/61877)).
+-   `TabPanel`: Make the the focus styles consistent with `Tabs`. ([#61317](https://github.com/WordPress/gutenberg/pull/61317)).
+-   `InputControl`: Fixed z-index issue where slider dots appeared in front of the Appearance dropdown. ([#61937](https://github.com/WordPress/gutenberg/pull/61937))
+
+### Internal
+
+-   Remove `reduceMotion` util ([#61963](https://github.com/WordPress/gutenberg/pull/61963)).
+-   Add type support for CSS Custom Properties ([#61872](https://github.com/WordPress/gutenberg/pull/61872)).
+-   Remove usage of deprecated spreading of `key` prop in JSX in CustomSelectControl and FormTokenField components ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   `Tooltip`: Fix Ariakit tooltip store usage ([#61858](https://github.com/WordPress/gutenberg/pull/61858)).
+-   `CustomSelectControlV2`: Use `InputBase` for styling ([#60261](https://github.com/WordPress/gutenberg/pull/60261)).
+
+## 27.6.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+-   Upgrade `@use-gesture/react` package to `^10.3.1` ([#61503](https://github.com/WordPress/gutenberg/pull/61503)).
+-   Upgrade `framer-motion` package to version `^11.1.9` ([#61572](https://github.com/WordPress/gutenberg/pull/61572)).
+
+### Enhancements
+
+-   `FontSizePicker`: Add `vw` and `vh` units to the default units in the font size picker ([#60507](<(https://github.com/WordPress/gutenberg/pull/60607)>).
+-   `PaletteEdit`: Use consistent spacing and metrics. ([#61368](https://github.com/WordPress/gutenberg/pull/61368)).
+-   `FormTokenField`: Hide label when not defined ([#61336](https://github.com/WordPress/gutenberg/pull/61336)).
+-   `ComboboxControl`: supports disabled items ([#61294](https://github.com/WordPress/gutenberg/pull/61294)).
+-   Upgraded the @types/react and @types/react-dom packages ([#60796](https://github.com/WordPress/gutenberg/pull/60796)).
+-   `Placeholder`: Tweak placeholder style ([#61590](https://github.com/WordPress/gutenberg/pull/61590)).
+
+### Bug Fixes
+
+-   `ToolsPanel`: Fix sticking “Reset” option ([#60621](https://github.com/WordPress/gutenberg/pull/60621)).
+-   Fix an issue where types used a synthetic default import ([#61679](https://github.com/WordPress/gutenberg/pull/61679)).
+
+## 27.5.0 (2024-05-02)
+
+### Enhancements
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+-   `InputControl`: Add a password visibility toggle story ([#60898](https://github.com/WordPress/gutenberg/pull/60898)).
+-   `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)).
+-   `Placeholder`: Unify appearance across. ([#59275](https://github.com/WordPress/gutenberg/pull/59275)).
+-   `Toolbar`: Adjust top toolbar to use same metrics as block toolbar ([#61126](https://github.com/WordPress/gutenberg/pull/61126)).
+-   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
+-   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
+
+### Bug Fixes
+
+-   `BaseControl`, `InputControl`: Remove usage of aria-details from InputControl and BaseControl ([#61203](https://github.com/WordPress/gutenberg/pull/61203)).
+-   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).
+-   `Panel`: Fix issue with collapsing panel header ([#61319](https://github.com/WordPress/gutenberg/pull/61319)).
+
+### Internal
+
+-   `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)).
+
+## 27.4.0 (2024-04-19)
+
+### Deprecations
+
+-   `Navigation`: Soft deprecate component ([#59182](https://github.com/WordPress/gutenberg/pull/59182)).
+
+### Enhancements
+
+-   `Tooltip`: Make tests faster ([#60897](https://github.com/WordPress/gutenberg/pull/60897)).
+-   `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
+-   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
+-   `Text`: Add `text-wrap: pretty;` to improve wrapping ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
+-   `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561)).
+-   `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+-   `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+-   `CheckboxControl`: Update help text alignment ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
+
+### Bug Fixes
+
+-   `Truncate`: Fix link control link preview when it displays long URLs ([#60890](https://github.com/WordPress/gutenberg/pull/60890)).
+
+-   `ProgressBar`: Fix CSS variable with invalid value ([#60576](https://github.com/WordPress/gutenberg/pull/60576)).
+-   `CheckboxControl`: Fix label text wrap ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
+
+### Experimental
+
+-   `Tabs`: Fallback to first enabled tab if no active tab id ([#60681](https://github.com/WordPress/gutenberg/pull/60681)).
+
+### Internal
+
+-   Remove CSS hack for Internet Explorer 11 ([#60727](https://github.com/WordPress/gutenberg/pull/60727)).
+-   `CheckboxControl`: Streamline size styles ([#60475](https://github.com/WordPress/gutenberg/pull/60475)).
+-   Deprecate `reduceMotion` util ([#60839](https://github.com/WordPress/gutenberg/pull/60839)).
+-   `InputBase`: Simplify management of focus styles. Affects all components based on `InputControl` (e.g. `SearchControl`, `NumberControl`, `UnitControl`), as well as `SelectControl`, `CustomSelectControl`, and `TreeSelect` ([#60226](https://github.com/WordPress/gutenberg/pull/60226)).
+-   Removed dependency on `valtio`, replaced its usage in `SlotFill` with a custom object [#60879](https://github.com/WordPress/gutenberg/pull/60879)).
+-   `CustomSelectControlV2`: Support disabled in item types ([#60896](https://github.com/WordPress/gutenberg/pull/60896)).
+
+## 27.3.0 (2024-04-03)
+
+### Bug Fixes
+
+-   `Dropdown`: Fix bug with separator styling. ([#60336](https://github.com/WordPress/gutenberg/pull/60336)).
+-   `InputControl`: Ignore IME events when `isPressEnterToChange` is enabled ([#60090](https://github.com/WordPress/gutenberg/pull/60090)).
+-   `TextControl`: Apply zero margin to input element ([#60282](https://github.com/WordPress/gutenberg/pull/60282)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Rename for consistency ([#60178](https://github.com/WordPress/gutenberg/pull/60178)).
+
+### Internal
+
+-   `Popover`, `ColorPicker`: Obviate pointer event trap #59449 ([#59449](https://github.com/WordPress/gutenberg/pull/59449)).
+-   `Popover`, `ToggleGroupControl`: Use `useReducedMotion()` ([#60168](https://github.com/WordPress/gutenberg/pull/60168)).
+-   `NavigatorProvider`: Simplify the router state logic ([#60190](https://github.com/WordPress/gutenberg/pull/60190)).
+-   Update `date-fns` to version `3.6.0` ([#60163](https://github.com/WordPress/gutenberg/pull/60163)).
+-   Update `use-lilius` to version `2.0.5` ([#60163](https://github.com/WordPress/gutenberg/pull/60163)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Fix hint behavior in legacy ([#60183](https://github.com/WordPress/gutenberg/pull/60183)).
+
+## 27.2.0 (2024-03-21)
+
+-   `Dropdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
+-   `Placeholder` : Allow overflow but only when placeholder is selected, to fix a layout shift. ([#59857](https://github.com/WordPress/gutenberg/pull/59857)).
+
+### Enhancements
+
+-   `TextControl`: Add typings for `date`, `time` and `datetime-local` ([#59666](https://github.com/WordPress/gutenberg/pull/59666)).
+-   `Text`, `Heading`, `ItemGroup` : Update the line height from 1.2 to 1.4 ([#60041](https://github.com/WordPress/gutenberg/pull/60041)).
+-   `Autocomplete` : match the autocomplete styling to that of List View and Command Palette([#60131](https://github.com/WordPress/gutenberg/pull/60131)).
+
+### Deprecations
+
+-   `isSmall` prop in `Button` component has been deprecated. Use `size="small"` prop instead ([#59734](https://github.com/WordPress/gutenberg/pull/59734)).
+
+### Internal
+
+-   `Button`: Keep deprecated props in type definitions ([#59913](https://github.com/WordPress/gutenberg/pull/59913)).
+
+### Bug Fixes
+
+-   `PaletteEdit`: Fix number incrementing of default names for new colors added in non-en-US locales ([#52212](https://github.com/WordPress/gutenberg/pull/52212)).
+-   `DateTimePicker`: Change day button size back from 32px to 28px ([#59990](https://github.com/WordPress/gutenberg/pull/59990)).
+
+## 27.1.0 (2024-03-06)
+
+### Bug Fixes
+
+-   `InputControl`: Fix sample code on InputControl docs [#59517](https://github.com/WordPress/gutenberg/pull/59517)
+-   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
+-   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
+-   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
+-   `Button`: Place `children` before the icon when `iconPosition` is `right` ([#59489](https://github.com/WordPress/gutenberg/pull/59489)).
+-   `ToggleGroupControl`: Fix unwanted backdrop vertical animation ([#59642](https://github.com/WordPress/gutenberg/pull/59642)).
+
+### Internal
+
+-   `SnackbarList`, `Snackbar`: add unit tests ([#59157](https://github.com/WordPress/gutenberg/pull/59157)).
+-   Remove unused `useLatestRef()` hook ([#59471](https://github.com/WordPress/gutenberg/pull/59471)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Remove legacy adapter layer ([#59420](https://github.com/WordPress/gutenberg/pull/59420)).
+
+## 27.0.0 (2024-02-21)
+
+### Breaking Changes
+
+-   `CustomSelectControl`: Remove deprecated `__nextUnconstrainedWidth` prop and promote to default behavior ([#58974](https://github.com/WordPress/gutenberg/pull/58974)).
+
+### Bug Fixes
+
+-   `ToolbarButton`: Center text for short labels ([#59117](https://github.com/WordPress/gutenberg/pull/59117)).
+
+### Internal
+
+-   `ColorPicker`: Style without accessing internal `InputControl` classes ([#59069](https://github.com/WordPress/gutenberg/pull/59069)).
+-   Add lint rules for theme color CSS var usage ([#59022](https://github.com/WordPress/gutenberg/pull/59022)).
+-   `FormTokenField`: Use `Element.scrollIntoView()` instead of `dom-scroll-into-view` ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
+-   Removing `dom-scroll-into-view` as a dependency of the components package ([#59085](https://github.com/WordPress/gutenberg/pull/59085)).
+-   Add higher-order function to ignore IME keydowns ([#59081](https://github.com/WordPress/gutenberg/pull/59081)).
+
+### Experimental
+
+-   `Tabs`: rename `initialTabId` prop to `defaultTabId` ([#59035](https://github.com/WordPress/gutenberg/pull/59035)).
+
+## 26.0.1 (2024-02-13)
+
+### Bug Fixes
+
+-   `Modal`: Add `box-sizing` reset style ([#58905](https://github.com/WordPress/gutenberg/pull/58905)).
+-   `Popover`: Fix positioning in nested iframes by upgrading Floating UI packages to their latest versions ([#58932](https://github.com/WordPress/gutenberg/pull/58932)).
+
+### Experimental
+
+-   `CustomSelectControlV2`: Adapt component for legacy usage ([#57902](https://github.com/WordPress/gutenberg/pull/57902)).
+
+## 26.0.0 (2024-02-09)
+
+### Breaking Changes
+
+-   `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)).
+-   `GradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58701](https://github.com/WordPress/gutenberg/pull/58701)).
+-   `CustomGradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58699](https://github.com/WordPress/gutenberg/pull/58699)).
+-   `AnglePickerControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58700](https://github.com/WordPress/gutenberg/pull/58700)).
+
+### Enhancements
+
+-   `Button`: Update secondary variant to show the border even in a disabled state. ([#58606](https://github.com/WordPress/gutenberg/pull/58606)).
+-   `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
+-   `Snackbar`: Update the warning message ([#58591](https://github.com/WordPress/gutenberg/pull/58591)).
+-   `Composite`: Implementing `useCompositeState` with Ariakit ([#57304](https://github.com/WordPress/gutenberg/pull/57304)).
+-   Remove deprecation warnings for `__next36pxDefaultSize` prop ([#58703](https://github.com/WordPress/gutenberg/pull/58703)).
+-   `CheckboxControl`: Remove ability for label prop to be false ([#58339](https://github.com/WordPress/gutenberg/pull/58339)).
+-   `FocalPointPicker`: Apply modern styling ([#58459](https://github.com/WordPress/gutenberg/pull/58459)).
+
+### Bug Fixes
+
+-   `FocalPointPicker`: Allow `PointerCircle` to render in a default centered position when x and y coordinates are undefined ([#58592](https://github.com/WordPress/gutenberg/pull/58592)).
+-   `DateTime`: Add a timezone offset value for display purposes. ([#56682](https://github.com/WordPress/gutenberg/pull/56682)).
+-   `Placeholder`: Fix Placeholder component padding when body text font size is changed ([#58323](https://github.com/WordPress/gutenberg/pull/58323)).
+-   `Placeholder`: Fix Global Styles typography settings bleeding into placeholder component ([#58303](https://github.com/WordPress/gutenberg/pull/58303)).
+-   `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)).
+-   `Snackbar`: Fix the auto-dismissal timers ([#58604](https://github.com/WordPress/gutenberg/pull/58604)).
+-   `Tabs`: Fix infinite loop in `useEffect` ([#58861](https://github.com/WordPress/gutenberg/pull/58861)).
+-   `Popover`: Add `box-sizing` reset style ([#58871](https://github.com/WordPress/gutenberg/pull/58871)).
+
+### Experimental
+
+-   `Guide`, `Modal`: Restore accent color themability ([#58098](https://github.com/WordPress/gutenberg/pull/58098)).
+-   `DropdownMenuV2`: Restore accent color themability ([#58130](https://github.com/WordPress/gutenberg/pull/58130)).
+-   `Tabs`: improve controlled mode focus handling and keyboard navigation ([#57696](https://github.com/WordPress/gutenberg/pull/57696)).
+-   `Tabs`: prevent internal focus from updating too early ([#58625](https://github.com/WordPress/gutenberg/pull/58625)).
+-   Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)).
+-   `CustomSelect`: disable `virtualFocus` to fix issue for screenreaders ([#58585](https://github.com/WordPress/gutenberg/pull/58585)).
+
+### Internal
+
+-   `Composite`: Removing Reakit `Composite` implementation ([#58620](https://github.com/WordPress/gutenberg/pull/58620)).
+-   Removing Reakit as a dependency of the components package ([#58631](https://github.com/WordPress/gutenberg/pull/58631)).
+-   `CustomSelect`: add unit tests ([#58583](https://github.com/WordPress/gutenberg/pull/58583)).
+-   `InputBase`: Add `isBorderless` prop ([#58750](https://github.com/WordPress/gutenberg/pull/58750)).
+-   `SearchControl`: Replace internal implementation to use `InputControl` ([#56524](https://github.com/WordPress/gutenberg/pull/56524)).
+
+## 25.16.0 (2024-01-24)
+
+### Enhancements
+
+-   `ColorPicker`: improve the UX around HSL sliders ([#57555](https://github.com/WordPress/gutenberg/pull/57555)).
+-   `BoxControl`, `BorderControl`, `BorderBoxControl`: Add opt-in prop for 40px default size ([#56185](https://github.com/WordPress/gutenberg/pull/56185)).
+-   `PaletteEdit`: improve unit tests ([#57645](https://github.com/WordPress/gutenberg/pull/57645)).
+-   `PaletteEdit` and `CircularOptionPicker`: improve unit tests ([#57809](https://github.com/WordPress/gutenberg/pull/57809)).
+-   `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)).
+-   `Tooltip` and `Button`: tidy up unit tests ([#57975](https://github.com/WordPress/gutenberg/pull/57975)).
+-   `BorderControl`, `BorderBoxControl`: Replace style picker with ToggleGroupControl ([#57562](https://github.com/WordPress/gutenberg/pull/57562)).
+-   `SlotFill`: fix typo in use-slot-fills return docs ([#57654](https://github.com/WordPress/gutenberg/pull/57654))
+-   `Popover`: Adding `constrainTabbing` prop to `useDialog` hook ([#57962](https://github.com/WordPress/gutenberg/pull/57962))
+
+### Bug Fixes
+
+-   `ToggleGroupControl`: Improve controlled value detection ([#57770](https://github.com/WordPress/gutenberg/pull/57770)).
+-   `Tooltip`: Improve props forwarding to children of nested `Tooltip` components ([#57878](https://github.com/WordPress/gutenberg/pull/57878)).
+-   `Tooltip`: revert prop types to only accept component-specific props ([#58125](https://github.com/WordPress/gutenberg/pull/58125)).
+-   `Button`: prevent the component from trashing and re-creating the HTML element ([#56490](https://github.com/WordPress/gutenberg/pull/56490)).
+
+### Experimental
+
+-   `BoxControl`: Update design ([#56665](https://github.com/WordPress/gutenberg/pull/56665)).
+-   `CustomSelect`: adjust `renderSelectedValue` to fix sizing ([#57865](https://github.com/WordPress/gutenberg/pull/57865)).
+-   `Theme`: Set `color` on wrapper div ([#58095](https://github.com/WordPress/gutenberg/pull/58095)).
+
+## 25.15.0 (2024-01-10)
+
+### Bug Fixes
+
+-   `NumberControl`: Make increment and decrement buttons keyboard accessible. ([#57402](https://github.com/WordPress/gutenberg/pull/57402)).
+-   `DropdownMenu V2`: better fallback on browsers that don't support CSS subgrid([#57327](https://github.com/WordPress/gutenberg/pull/57327)).
+-   `FontSizePicker`: Use Button API for keeping focus on reset ([#57221](https://github.com/WordPress/gutenberg/pull/57221)).
+-   `FontSizePicker`: Fix Reset button focus loss ([#57196](https://github.com/WordPress/gutenberg/pull/57196)).
+-   `PaletteEdit`: Consider digits when generating kebab-cased slug ([#56713](https://github.com/WordPress/gutenberg/pull/56713)).
+-   `FormTokenField`: Prevent focus being passed to internal buttons when component is disabled ([#57187](https://github.com/WordPress/gutenberg/pull/57187)).
+-   `Button`: Fix logic of `has-text` class addition ([#56949](https://github.com/WordPress/gutenberg/pull/56949)).
+-   `FormTokenField`: Fix a regression where the suggestion list would re-open after clicking away from the input ([#57002](https://github.com/WordPress/gutenberg/pull/57002)).
+-   `Snackbar`: Remove erroneous `__unstableHTML` prop from TypeScript definitions ([#57218](https://github.com/WordPress/gutenberg/pull/57218)).
+-   `Truncate`: improve handling of non-string `children` ([#57261](https://github.com/WordPress/gutenberg/pull/57261)).
+-   `PaletteEdit`: Don't discard colors with default name and slug ([#54332](https://github.com/WordPress/gutenberg/pull/54332)).
+-   `RadioControl`: Fully encapsulate styles ([#57347](https://github.com/WordPress/gutenberg/pull/57347)).
+-   `DuotonePicker`: Remove top margin when no duotone options ([#57489](https://github.com/WordPress/gutenberg/pull/57489)).
+-   `Snackbar`: Fix icon positioning ([#57377](https://github.com/WordPress/gutenberg/pull/57377)).
+-   `GradientPicker`: Use slug while iterating over gradient entries to avoid React "duplicated key" warning ([#57361](https://github.com/WordPress/gutenberg/pull/57361)).
+-   `NavigatorProvider`: Exclude `size` value from `contain` CSS rule ([#57498](https://github.com/WordPress/gutenberg/pull/57498)).
+
+### Enhancements
+
+-   Update `ariakit` to version `0.3.10` ([#57325](https://github.com/WordPress/gutenberg/pull/57325)).
+-   Update `@ariakit/react` to version `0.3.12` and @ariakit/test to version `0.3.7` ([#57547](https://github.com/WordPress/gutenberg/pull/57547)).
+-   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
+-   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
+-   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `BaseControl`: Connect to context system ([#57408](https://github.com/WordPress/gutenberg/pull/57408)).
+-   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `TreeSelect`: Add `compact` size variant ([#57398](https://github.com/WordPress/gutenberg/pull/57398)).
+-   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
+-   `Tooltip`: improve unit tests ([#57345](https://github.com/WordPress/gutenberg/pull/57345)).
+
+### Experimental
+
+-   `DropdownMenuV2`: remove temporary radix UI based implementation ([#55626](https://github.com/WordPress/gutenberg/pull/55626)).
+-   `Tabs`: do not render hidden content ([#57046](https://github.com/WordPress/gutenberg/pull/57046)).
+-   `Tabs`: improve hover and text alignment styles ([#57275](https://github.com/WordPress/gutenberg/pull/57275)).
+-   `Tabs`: make sure `Tab`s are associated to the right `TabPanel`s, regardless of the order they're rendered in ([#57033](https://github.com/WordPress/gutenberg/pull/57033)).
+
+## 25.14.0 (2023-12-13)
+
+### Enhancements
+
+-   `Navigator`: use vanilla CSS animations instead of `framer-motion` ([#56909](https://github.com/WordPress/gutenberg/pull/56909)).
+-   `FormToggle`: fix sass deprecation warning ([#56672](https://github.com/WordPress/gutenberg/pull/56672)).
+-   `QueryControls`: Add opt-in prop for 40px default size ([#56576](https://github.com/WordPress/gutenberg/pull/56576)).
+-   `CheckboxControl`: Add option to not render label ([#56158](https://github.com/WordPress/gutenberg/pull/56158)).
+-   `PaletteEdit`: Gradient pickers to use same width as color pickers ([#56801](https://github.com/WordPress/gutenberg/pull/56801)).
+-   `FocalPointPicker`: Add opt-in prop for 40px default size ([#56021](https://github.com/WordPress/gutenberg/pull/56021)).
+-   `DimensionControl`: Add opt-in prop for 40px default size ([#56805](https://github.com/WordPress/gutenberg/pull/56805)).
+-   `FontSizePicker`: Add opt-in prop for 40px default size ([#56804](https://github.com/WordPress/gutenberg/pull/56804)).
+-   `ToolsPanel`/`ToolsPanelHeader`: Added `dropdownMenuProps` to allow customization of the panel's dropdown menu. Also merged default and optional control menu groups ([#55785](https://github.com/WordPress/gutenberg/pull/55785)).
+
+### Bug Fixes
+
+-   `PaletteEdit`: temporary custom gradient not saving ([#56896](https://github.com/WordPress/gutenberg/pull/56896)).
+-   `ToggleGroupControl`: react correctly to external controlled updates ([#56678](https://github.com/WordPress/gutenberg/pull/56678)).
+-   `ToolsPanel`: fix a performance issue ([#56770](https://github.com/WordPress/gutenberg/pull/56770)).
+-   `BorderControl`: adjust `BorderControlDropdown` Button size to fix misaligned border ([#56730](https://github.com/WordPress/gutenberg/pull/56730)).
+-   `SlotFillProvider`: Restore contextual Slot/Fills within SlotFillProvider ([#56779](https://github.com/WordPress/gutenberg/pull/56779)).
+
+### Internal
+
+-   `DropdownMenuV2Ariakit`: prevent prefix collapsing if all radios or checkboxes are unselected ([#56720](https://github.com/WordPress/gutenberg/pull/56720)).
+-   Move `kebabCase()` function from `block-editor` package and mark it as private API ([#56758](https://github.com/WordPress/gutenberg/pull/56758)).
+
+### Experimental
+
+-   `Tabs`: implement new `tabId` prop ([#56883](https://github.com/WordPress/gutenberg/pull/56883)).
+-   `CustomSelect`: add `WordPressComponentsProps` for more flexibility ([#56998](https://github.com/WordPress/gutenberg/pull/56998))
+
+### Experimental
+
+-   `Tabs`: improve focus handling in controlled mode ([#56658](https://github.com/WordPress/gutenberg/pull/56658)).
+
+### Documentation
+
+-   `Search`: Added links to storybook for more information on usage. ([#56815](https://github.com/WordPress/gutenberg/pull/56815)).
+-   `Spinner`: Added links to storybook for more information on usage. ([#56953](https://github.com/WordPress/gutenberg/pull/56953)).
+
+## 25.13.0 (2023-11-29)
+
+### Enhancements
+
+-   `FormToggle`: refine animation and improve high contrast styles ([#56515](https://github.com/WordPress/gutenberg/pull/56515)).
+-   `Button`: Add focus rings to focusable disabled buttons ([#56383](https://github.com/WordPress/gutenberg/pull/56383)).
+-   `InserterButton`: Move mobile InserterButton from components package to block-editor package ([#56494](https://github.com/WordPress/gutenberg/pull/56494))
+
+### Bug Fixes
+
+-   `DateTime`: Make the Timezone indication render a tooltip only when necessary. ([#56214](https://github.com/WordPress/gutenberg/pull/56214)).
+-   `ToolsPanelItem`: Use useLayoutEffect to prevent rendering glitch for last panel item styling. ([#56536](https://github.com/WordPress/gutenberg/pull/56536)).
+-   `FormTokenField`: Fix broken suggestions scrollbar when the `__experimentalExpandOnFocus` prop is defined ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).
+-   `FormTokenField`: `onFocus` prop is now typed as a React `FocusEvent` ([#56426](https://github.com/WordPress/gutenberg/pull/56426)).
+
+### Experimental
+
+-   `Tabs`: Memoize and expose the component context ([#56224](https://github.com/WordPress/gutenberg/pull/56224)).
+-   `DropdownMenuV2`: Design tweaks ([#56041](https://github.com/WordPress/gutenberg/pull/56041))
+
+### Documentation
+
+-   `Text` and `Heading`: improve docs around default values and truncation logic ([#56518](https://github.com/WordPress/gutenberg/pull/56518))
+
+### Internal
+
+-   `Slot`: add `style` prop to `bubblesVirtually` version ([#56428](https://github.com/WordPress/gutenberg/pull/56428))
+-   Introduce experimental new version of `CustomSelectControl` based on `ariakit` ([#55790](https://github.com/WordPress/gutenberg/pull/55790))
+-   `Composite`: add unit tests for `useCompositeState` ([#56645](https://github.com/WordPress/gutenberg/pull/56645)).
+
+## 25.12.0 (2023-11-16)
+
+### Bug Fixes
+
+-   `Toolbar`: Remove CSS rule that prevented focus outline to be visible for toolbar buttons in the `:active` state. ([#56123](https://github.com/WordPress/gutenberg/pull/56123)).
+
+### Internal
+
+-   Migrate `Divider` from `reakit` to `ariakit` ([#55622](https://github.com/WordPress/gutenberg/pull/55622))
+-   Migrate `DisclosureContent` from `reakit` to `ariakit` and TypeScript ([#55639](https://github.com/WordPress/gutenberg/pull/55639))
+-   Migrate `RadioGroup` from `reakit` to `ariakit` and TypeScript ([#55580](https://github.com/WordPress/gutenberg/pull/55580))
+
+### Experimental
+
+-   `Tabs`: Add `focusable` prop to the `Tabs.TabPanel` sub-component ([#55287](https://github.com/WordPress/gutenberg/pull/55287))
+-   `Tabs`: Update sub-components to accept relevant HTML element props ([#55860](https://github.com/WordPress/gutenberg/pull/55860))
+-   `DropdownMenuV2`: Fix radio menu item check icon not rendering correctly in some browsers ([#55964](https://github.com/WordPress/gutenberg/pull/55964))
+-   `DropdownMenuV2`: prevent default when pressing Escape key to close menu ([#55962](https://github.com/WordPress/gutenberg/pull/55962))
+
+### Enhancements
+
+-   `ToggleGroupControl`: Add opt-in prop for 40px default size ([#55789](https://github.com/WordPress/gutenberg/pull/55789)).
+-   `TextControl`: Add opt-in prop for 40px default size ([#55471](https://github.com/WordPress/gutenberg/pull/55471)).
+
+### Bug Fixes
+
+-   `DropdownMenu`: remove extra vertical space around the toggle button ([#56136](https://github.com/WordPress/gutenberg/pull/56136)).
+-   Package should not depend on `@ariakit/test`, that package is only needed for testing ([#56091](https://github.com/WordPress/gutenberg/pull/56091)).
+
+## 25.11.0 (2023-11-02)
+
+### Enhancements
+
+-   `InputControl`/`SelectControl`: update `height`/`min-height` to `32px` instead of `30px` to align with modern sizing scale ([#55490](https://github.com/WordPress/gutenberg/pull/55490)).
+
+### Bug Fixes
+
+-   `Autocomplete`: Add `aria-live` announcements for Mac and IOS Voiceover to fix lack of support for `aria-owns` ([#54902](https://github.com/WordPress/gutenberg/pull/54902)).
+-   Improve Button saving state accessibility. ([#55547](https://github.com/WordPress/gutenberg/pull/55547))
+
+### Internal
+
+-   Introduce experimental new version of `DropdownMenu` based on `ariakit` ([#54939](https://github.com/WordPress/gutenberg/pull/54939))
+
+## 25.10.0 (2023-10-18)
+
+### Enhancements
+
+-   `ProgressBar`: use text color to ensure enough contrast against background ([#55285](https://github.com/WordPress/gutenberg/pull/55285)).
+-   `Notice`: Remove margins from `Notice` component ([#54800](https://github.com/WordPress/gutenberg/pull/54800)).
+-   Allow using CSS level 4 viewport-relative units ([54415](https://github.com/WordPress/gutenberg/pull/54415))
+-   `ToolsPanel`: do not apply the `className` to prop to `ToolsPanelItem` components when rendered as placeholders ([#55207](https://github.com/WordPress/gutenberg/pull/55207)).
+-   `GradientPicker`: remove overflow styles and padding from `ColorPicker` popovers ([#55265](https://github.com/WordPress/gutenberg/pull/55265)).
+-   `Tabs`: Expose via private APIs ([#55327](https://github.com/WordPress/gutenberg/pull/55327)).
+-   `ColorPalette`/`ToggleGroupControl/ToggleGroupControlOptionBase`: add `type="button"` attribute to native `<button>`s ([#55125](https://github.com/WordPress/gutenberg/pull/55125)).
+
+### Bug Fixes
+
+-   Render a "mouse event trap" when using a `ColorPicker` inside a `Popover` to prevent issues when rendering on top of `iframes` ([#55149](https://github.com/WordPress/gutenberg/pull/55149)).
+-   `Modal`: fix closing when contained iframe is focused ([#51602](https://github.com/WordPress/gutenberg/pull/51602)).
+-   `Autocomplete`: Fix disappearing results issue when using multiple triggers inline ([#55301](https://github.com/WordPress/gutenberg/pull/55301))
+
+### Internal
+
+-   Update `@ariakit/react` to version `0.3.5` ([#55365](https://github.com/WordPress/gutenberg/pull/55365))
+-   `ConfirmDialog`: Migrate to TypeScript. ([#54954](https://github.com/WordPress/gutenberg/pull/54954)).
+
+### New Features
+
+-   `Toolbar`: add new `variant` prop for 'unstyled' option ([#55139](https://github.com/WordPress/gutenberg/pull/55139)).
+
+## 25.9.0 (2023-10-05)
+
+### Enhancements
+
+-   `SearchControl`: polish metrics for `compact` size variant ([#54663](https://github.com/WordPress/gutenberg/pull/54663)).
+-   `Button`: deprecating `isPressed` prop in favour of `aria-pressed` ([#54740](https://github.com/WordPress/gutenberg/pull/54740)).
+-   `DuotonePicker/ColorListPicker`: Adds appropriate label and description to 'Duotone Filter' picker ([#54473](https://github.com/WordPress/gutenberg/pull/54473)).
+-   `Modal`: Accessibly hide/show outer modal when nested ([#54743](https://github.com/WordPress/gutenberg/pull/54743)).
+-   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `CustomSelectControl`, `TreeSelect`: Add opt-in prop for next 40px default size, superseding the `__next36pxDefaultSize` prop ([#53819](https://github.com/WordPress/gutenberg/pull/53819)).
+-   `Modal`: add a new `size` prop to support preset widths, including a `fill` option to eventually replace the `isFullScreen` prop ([#54471](https://github.com/WordPress/gutenberg/pull/54471)).
+-   Wrapped `TextareaControl` in a `forwardRef` call ([#54975](https://github.com/WordPress/gutenberg/pull/54975)).
+-   `Composite`/`AlignmentMatrixControl`/`CircularOptionPicker`: Starts the `Composite` migration from `reakit` to `ariakit` ([#54225](https://github.com/WordPress/gutenberg/pull/54225)).
+
+### Bug Fixes
+
+-   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
+-   `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
+-   `FormTokenField`: Add `box-sizing` reset style and reset default padding ([#54734](https://github.com/WordPress/gutenberg/pull/54734)).
+-   `SlotFill`: Pass `Component` instance to unregisterSlot ([#54765](https://github.com/WordPress/gutenberg/pull/54765)).
+-   `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
+-   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
+-   `Button`: Remove hover styles when `aria-disabled` is set to `true` for the secondary variant. ([#54978](https://github.com/WordPress/gutenberg/pull/54978))
+-   `Button`: Revert toggled style selector to use a class instead of attributes ([#55065](https://github.com/WordPress/gutenberg/pull/55065)).
+
+### Internal
+
+-   Update `@ariakit/react` to version `0.3.3` ([#54818](https://github.com/WordPress/gutenberg/pull/54818))
+-   `Tooltip`, `Shortcut`: Remove unused `ui/` components from the codebase ([#54573](https://github.com/WordPress/gutenberg/pull/54573))
+-   Refactor ariakit usages to use the `render` prop instead of `as` and to use the namespace import ([#54696](https://github.com/WordPress/gutenberg/pull/54696)).
+-   Update `uuid` package to 9.0.1 ([#54725](https://github.com/WordPress/gutenberg/pull/54725)).
+-   `ContextSystemProvider`: Move out of `ui/` ([#54847](https://github.com/WordPress/gutenberg/pull/54847)).
+-   `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
+-   `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
+-   Ensure `@types/` dependencies used by final type files are included in the main dependency field ([#50231](https://github.com/WordPress/gutenberg/pull/50231)).
+-   `Text`: Migrate to TypeScript. ([#54953](https://github.com/WordPress/gutenberg/pull/54953)).
+
+### Experimental
+
+-   Introduce `Tabs`, an experimental v2 of `TabPanel`: ([#53960](https://github.com/WordPress/gutenberg/pull/53960)).
+
+## 25.8.0 (2023-09-20)
+
+### Enhancements
+
+-   Add new option `firstContentElement` to Modal's `focusOnMount` prop to allow consumers to focus the first element within the Modal's **contents** ([#54590](https://github.com/WordPress/gutenberg/pull/54590)).
+-   `Notice`: Improve accessibility by adding visually hidden text to clarify what a notice text is about and the notice type (success, error, warning, info) ([#54498](https://github.com/WordPress/gutenberg/pull/54498)).
+-   Making Circular Option Picker a `listbox`. Note that while this changes some public API, new props are optional, and currently have default values; this will change in another patch ([#52255](https://github.com/WordPress/gutenberg/pull/52255)).
+-   `ToggleGroupControl`: Rewrite backdrop animation using framer motion shared layout animations, add better support for controlled and uncontrolled modes ([#50278](https://github.com/WordPress/gutenberg/pull/50278)).
+-   `Popover`: Add the `is-positioned` CSS class only after the popover has finished animating ([#54178](https://github.com/WordPress/gutenberg/pull/54178)).
+-   `Tooltip`: Replace the existing tooltip to simplify the implementation and improve accessibility while maintaining the same behaviors and API ([#48440](https://github.com/WordPress/gutenberg/pull/48440)).
+-   `Dropdown` and `DropdownMenu`: support controlled mode for the dropdown's open/closed state ([#54257](https://github.com/WordPress/gutenberg/pull/54257)).
+-   `BorderControl`: Apply proper metrics and simpler text ([#53998](https://github.com/WordPress/gutenberg/pull/53998)).
+-   `FormTokenField`: Update styling for consistency and increased visibility ([#54402](https://github.com/WordPress/gutenberg/pull/54402)).
+-   `CircularOptionPicker`: Add option to use previous non-listbox behaviour, for contexts where buttons are more appropriate than a list of options ([#54290](https://github.com/WordPress/gutenberg/pull/54290)).
+-   `DuotonePicker/ColorListPicker`: Adds appropriate labels to 'Duotone Filter' color pickers ([#54468](https://github.com/WordPress/gutenberg/pull/54468)).
+-   `SearchControl`: support new `40px` and `32px` sizes ([#54548](https://github.com/WordPress/gutenberg/pull/54548)).
+-   `FormTokenField`: Add `tokenizeOnBlur` prop to add any incompleteTokenValue as a new token when field loses focus ([#54445](https://github.com/WordPress/gutenberg/pull/54445)).
+-   `Sandbox`: Add `tabIndex` prop ([#54408](https://github.com/WordPress/gutenberg/pull/54408)).
+
+### Bug Fixes
+
+-   `Notice`: Make the Close button render a tooltip to visually expose its accessible name. All icon buttons must always show a tooltip ([#54498](https://github.com/WordPress/gutenberg/pull/54498)).
+-   `Tooltip`: dynamically render in the DOM only when visible ([#54312](https://github.com/WordPress/gutenberg/pull/54312)).
+-   `PaletteEdit`: Fix padding in RTL languages ([#54034](https://github.com/WordPress/gutenberg/pull/54034)).
+-   `ToolbarItem`: Fix children not showing in rendered components ([#53314](https://github.com/WordPress/gutenberg/pull/53314)).
+-   `CircularOptionPicker`: make focus styles resilient to button size changes ([#54196](https://github.com/WordPress/gutenberg/pull/54196)).
+-   `InputControl`: Fix focus style size ([#54394](https://github.com/WordPress/gutenberg/pull/54394)).
+-   `BorderControl`: Use standard focus style on BorderControl ([#54429](https://github.com/WordPress/gutenberg/pull/54429)).
+-   `Color values`: Update borderFocus to ADMIN.theme ([#54425](https://github.com/WordPress/gutenberg/pull/54425)).
+
+### Internal
+
+-   `Toolbar/ToolbarDropdownMenu `: Convert to TypeScript ([#54321](https://github.com/WordPress/gutenberg/pull/54321)).
+-   `Composite`: Convert to TypeScript ([#54028](https://github.com/WordPress/gutenberg/pull/54028)).
+-   `BorderControl`: Refactor unit tests to use `userEvent` ([#54155](https://github.com/WordPress/gutenberg/pull/54155))
+-   `FocusableIframe`: Convert to TypeScript ([#53979](https://github.com/WordPress/gutenberg/pull/53979)).
+-   `Popover`: Remove unused `overlay` type from `positionToPlacement` utility function ([#54101](https://github.com/WordPress/gutenberg/pull/54101)).
+-   `Higher Order` -- `with-focus-outside`: Convert to TypeScript ([#53980](https://github.com/WordPress/gutenberg/pull/53980)).
+-   `IsolatedEventContainer`: Convert unit test to TypeScript ([#54316](https://github.com/WordPress/gutenberg/pull/54316)).
+-   `Popover`: Remove `scroll` and `resize` listeners for iframe overflow parents and rely on recently added native Floating UI support ([#54286](https://github.com/WordPress/gutenberg/pull/54286)).
+-   `Button`: Update documentation to remove the button `focus` prop ([#54397](https://github.com/WordPress/gutenberg/pull/54397)).
+-   `Toolbar/ToolbarGroup`: Convert component to TypeScript ([#54317](https://github.com/WordPress/gutenberg/pull/54317)).
+-   `Modal`: add more unit tests ([#54569](https://github.com/WordPress/gutenberg/pull/54569)).
+
+### Experimental
+
+-   `DropdownMenu` v2: Fix submenu chevron direction in RTL languages ([#54036](https://github.com/WordPress/gutenberg/pull/54036).
+
+### New Features
+
+-   `Tooltip`: Add new `hideOnClick` prop ([#54406](https://github.com/WordPress/gutenberg/pull/54406)).
+-   `Tooltip`: Add `placement` prop to replace deprecated `position`([#54264](https://github.com/WordPress/gutenberg/pull/54264)).
+
+## 25.7.0 (2023-08-31)
+
+### Breaking Changes
+
+-   Make the `Popover.Slot` optional and render popovers at the bottom of the document's body by default. ([#53889](https://github.com/WordPress/gutenberg/pull/53889), [#53982](https://github.com/WordPress/gutenberg/pull/53982)).
+
+### Enhancements
+
+-   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+-   Prevent nested `SlotFillProvider` from rendering ([#53940](https://github.com/WordPress/gutenberg/pull/53940)).
+
+### Bug Fixes
+
+-   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).
+-   `PaletteEdit`: Fix the height of the `PaletteItems`. Don't rely on styles only present in the block editor ([#54000](https://github.com/WordPress/gutenberg/pull/54000)).
+
+### Internal
+
+-   `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)).
+-   `SlotFill`: Do not render children when using `<Slot bubblesVirtually />`. ([#53272](https://github.com/WordPress/gutenberg/pull/53272))
+-   Update `@floating-ui/react-dom` to the latest version ([#46845](https://github.com/WordPress/gutenberg/pull/46845)).
+
+## 25.6.0 (2023-08-16)
+
+### Enhancements
+
+-   `Theme`: Expose via private APIs ([#53262](https://github.com/WordPress/gutenberg/pull/53262)).
+-   `ProgressBar`: Use the theme system accent for indicator color ([#53347](https://github.com/WordPress/gutenberg/pull/53347)).
+-   `ProgressBar`: Use gray 300 for track color ([#53349](https://github.com/WordPress/gutenberg/pull/53349)).
+-   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
+-   `Snackbar`: Snackbar design and motion improvements ([#53248](https://github.com/WordPress/gutenberg/pull/53248))
+-   `NumberControl`: Add `spinFactor` prop for adjusting the amount by which the spin controls change the value ([#52902](https://github.com/WordPress/gutenberg/pull/52902)).
+-   `Modal:`: Nuance outside interactions ([#52994](https://github.com/WordPress/gutenberg/pull/52994)).
+-   `Button`: Remove default border from the destructive button ([#53607](https://github.com/WordPress/gutenberg/pull/53607)).
+-   Components: Move accent colors to theme context ([#53631](https://github.com/WordPress/gutenberg/pull/53631)).
+-   `ProgressBar`: Use the new theme system accent for indicator color ([#53632](https://github.com/WordPress/gutenberg/pull/53632)).
+
+### Bug Fixes
+
+-   `Button`: add `:disabled` selector to reset hover color for disabled buttons ([#53411](https://github.com/WordPress/gutenberg/pull/53411)).
+
+### Internal
+
+-   `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)).
+-   `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)).
+-   `MenuItem`: Add Storybook stories ([#53613](https://github.com/WordPress/gutenberg/pull/53613)).
+-   `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)).
+-   Components: Remove unnecessary utils ([#53679](https://github.com/WordPress/gutenberg/pull/53679)).
+
+## 25.5.0 (2023-08-10)
+
+### New Features
+
+-   Add a new `ProgressBar` component. ([#53030](https://github.com/WordPress/gutenberg/pull/53030)).
+
+### Enhancements
+
+-   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
+-   `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
+-   `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
+
+### Bug Fixes
+
+-   `Modal`: Fix loss of focus when clicking outside ([#52653](https://github.com/WordPress/gutenberg/pull/52653)).
+
+## 25.4.0 (2023-07-20)
+
+### Enhancements
+
+-   `TextControl`: Add `id` prop to allow for custom IDs in `TextControl`s ([#52028](https://github.com/WordPress/gutenberg/pull/52028)).
+-   `Navigator`: Add `replace` option to `navigator.goTo()` and `navigator.goToParent()` ([#52456](https://github.com/WordPress/gutenberg/pull/52456)).
+
+### Bug Fixes
+
+-   `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([#52356](https://github.com/WordPress/gutenberg/pull/52356)).
+-   `Item`: Unify focus style and add default font styles. ([#52495](https://github.com/WordPress/gutenberg/pull/52495)).
+-   `Toolbar`: Fix toolbar items not being tabbable on the first render. ([#52613](https://github.com/WordPress/gutenberg/pull/52613))
+-   `FormTokenField`: Fix token overflow when moving cursor left or right. ([#52662](https://github.com/WordPress/gutenberg/pull/52662))
+
+## 25.3.0 (2023-07-05)
+
+### Enhancements
+
+-   `SelectControl`: Added option to set hidden options. ([#51545](https://github.com/WordPress/gutenberg/pull/51545))
+-   `RangeControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#49105](https://github.com/WordPress/gutenberg/pull/49105)).
+-   `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)).
+-   `ItemGroup`: Update button focus state styles to target `:focus-visible` rather than `:focus`. ([#51787](https://github.com/WordPress/gutenberg/pull/51787)).
+-   `Guide`: Don't show Close button when there is only one page, and use default button and accent/theme styling ([#52014](https://github.com/WordPress/gutenberg/pull/52014)).
+
+### Bug Fixes
+
+-   `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
+-   `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)).
+-   `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).
+-   `DropdownMenu`: fix icon style when dashicon is used ([#43574](https://github.com/WordPress/gutenberg/pull/43574)).
+-   `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)).
+-   `Guide`: Place focus on the guide's container instead of its first tabbable ([#52300](https://github.com/WordPress/gutenberg/pull/52300)).
+
+## 25.2.0 (2023-06-23)
+
+### Enhancements
+
+-   `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)).
+-   `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)).
+-   `ItemGroup`: Update button focus state styles to be inline with other button focus states in the editor. ([#51576](https://github.com/WordPress/gutenberg/pull/51576)).
+-   `ItemGroup`: Update button focus state styles to target `:focus-visible` rather than `:focus`. ([#51787](https://github.com/WordPress/gutenberg/pull/51787)).
+
+### Bug Fixes
+
+-   `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
+-   `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
+-   `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
+
+### Internal
+
+-   `ClipboardButton`: Convert to TypeScript ([#51334](https://github.com/WordPress/gutenberg/pull/51334)).
+-   `Toolbar`: Replace `reakit` dependency with `@ariakit/react` ([#51623](https://github.com/WordPress/gutenberg/pull/51623)).
+
+### Documentation
+
+-   `SearchControl`: Improve documentation around usage of `label` prop ([#51781](https://github.com/WordPress/gutenberg/pull/51781)).
+
+## 25.1.0 (2023-06-07)
+
+### Enhancements
+
+-   `BorderControl`: Improve color code readability in aria-label ([#51197](https://github.com/WordPress/gutenberg/pull/51197)).
+-   `Dropdown` and `DropdownMenu`: use internal context system to automatically pick the toolbar popover variant when rendered inside the `Toolbar` component ([#51154](https://github.com/WordPress/gutenberg/pull/51154)).
+
+### Bug Fixes
+
+-   `FocalPointUnitControl`: Add aria-labels ([#50993](https://github.com/WordPress/gutenberg/pull/50993)).
+
+### Enhancements
+
+-   Wrapped `TabPanel` in a `forwardRef` call ([#50199](https://github.com/WordPress/gutenberg/pull/50199)).
+-   `ColorPalette`: Improve readability of color name and value, and improve rendering of partially transparent colors ([#50450](https://github.com/WordPress/gutenberg/pull/50450)).
+-   `Button`: Add `__next32pxSmallSize` prop to opt into the new 32px size when the `isSmall` prop is enabled ([#51012](https://github.com/WordPress/gutenberg/pull/51012)).
+-   `ItemGroup`: Update styles so all SVGs inherit color from their parent element ([#50819](https://github.com/WordPress/gutenberg/pull/50819)).
+
+### Experimental
+
+-   `DropdownMenu` v2: Tweak styles ([#50967](https://github.com/WordPress/gutenberg/pull/50967), [#51097](https://github.com/WordPress/gutenberg/pull/51097)).
+-   `DropdownMenu` v2: change default placement to match the legacy `DropdownMenu` component ([#51133](https://github.com/WordPress/gutenberg/pull/51133)).
+-   `DropdownMenu` v2: Render in the default `Popover.Slot` ([#51046](https://github.com/WordPress/gutenberg/pull/51046)).
+
+## 25.0.0 (2023-05-24)
+
+### Breaking Changes
+
+-   `DateTime`: Remove previously deprecated props, `__nextRemoveHelpButton` and `__nextRemoveResetButton` ([#50724](https://github.com/WordPress/gutenberg/pull/50724)).
+
+### Internal
+
+-   `Modal`: Remove children container's unused class name ([#50655](https://github.com/WordPress/gutenberg/pull/50655)).
+-   `DropdownMenu`: Convert to TypeScript ([#50187](https://github.com/WordPress/gutenberg/pull/50187)).
+-   Added experimental v2 of `DropdownMenu` ([#49473](https://github.com/WordPress/gutenberg/pull/49473)).
+-   `ColorPicker`: its private `SelectControl` component no longer hides BackdropUI, thus making its focus state visible for keyboard users ([#50703](https://github.com/WordPress/gutenberg/pull/50703)).
+
+### Bug Fixes
+
+-   `ColorPicker`: Add an outline when the color picker select box is focused([#50609](https://github.com/WordPress/gutenberg/pull/50609)).
+-   `InputControl`: Fix focus style to support Windows High Contrast mode ([#50772](https://github.com/WordPress/gutenberg/pull/50772)).
+-   `ToggleGroupControl`: Fix focus and selected style to support Windows High Contrast mode ([#50785](https://github.com/WordPress/gutenberg/pull/50785)).
+-   `SearchControl`: Adjust icon styles to fix alignment issues in the block inserter ([#50439](https://github.com/WordPress/gutenberg/pull/50439)).
+
+### Enhancements
+
+-   `Tooltip`: Update background color so tooltip boundaries are more visible in the site editor ([#50792](https://github.com/WordPress/gutenberg/pull/50792)).
+-   `FontSizePicker`: Tweak the header spacing to be more consistent with other design tools ([#50855](https://github.com/WordPress/gutenberg/pull/50855)).
+
+## 24.0.0 (2023-05-10)
+
+### Breaking Changes
+
+-   `onDragStart` in `<Draggable>` is now a synchronous function to allow setting additional data for `event.dataTransfer` ([#49673](https://github.com/WordPress/gutenberg/pull/49673)).
+
+### Bug Fixes
+
+-   `NavigableContainer`: do not trap focus in `TabbableContainer` ([#49846](https://github.com/WordPress/gutenberg/pull/49846)).
+-   Update `<Button>` component to have a transparent background for its tertiary disabled state, to match its enabled state. ([#50496](https://github.com/WordPress/gutenberg/pull/50496)).
+
+### Internal
+
+-   `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)).
+-   `ToolbarItem`: Convert to TypeScript ([#49190](https://github.com/WordPress/gutenberg/pull/49190)).
+-   Move rich-text related types to the rich-text package ([#49651](https://github.com/WordPress/gutenberg/pull/49651)).
+-   `SlotFill`: simplified the implementation and removed unused code ([#50098](https://github.com/WordPress/gutenberg/pull/50098) and [#50133](https://github.com/WordPress/gutenberg/pull/50133)).
+
+### Documentation
+
+-   `TreeGrid`: Update docs with `data-expanded` attribute usage ([#50026](https://github.com/WordPress/gutenberg/pull/50026)).
+-   Consolidate multiple versions of `README` and `CONTRIBUTING` docs, and add them to Storybook ([#50226](https://github.com/WordPress/gutenberg/pull/50226)).
+-   `DimensionControl`: Use WordPress package instead of react in code example ([#50435](https://github.com/WordPress/gutenberg/pull/50435)).
+
+### Enhancements
+
+-   `FormTokenField`, `ComboboxControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size, superseding the `__next36pxDefaultSize` prop ([#50261](https://github.com/WordPress/gutenberg/pull/50261)).
+-   `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)).
+-   `Button`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#50254](https://github.com/WordPress/gutenberg/pull/50254)).
+-   `PaletteEdit`: Allow custom popover configuration ([#49975](https://github.com/WordPress/gutenberg/pull/49975)).
+-   Change the default color scheme to use the new WP Blueberry color. See PR description for instructions on how to restore the previous color scheme when using in a non-WordPress context ([#50193](https://github.com/WordPress/gutenberg/pull/50193)).
+-   `CheckboxControl`, `CustomGradientPicker`, `FormToggle`, : Refactor and correct the focus style for consistency ([#50127](https://github.com/WordPress/gutenberg/pull/50127)).
+-   `Button`, update spacing values in `has-text has-icon` buttons. ([#50277](https://github.com/WordPress/gutenberg/pull/50277)).
+-   `Button`, remove custom padding applied to `tertiary` variant. ([#50276](https://github.com/WordPress/gutenberg/pull/50276)).
+-   `Modal`: Correct padding for title less confirm variant. ([#50283](https://github.com/WordPress/gutenberg/pull/50283)).
+
+## 23.9.0 (2023-04-26)
+
+### Internal
+
+-   `BottomSheetCell`: Refactor away from Lodash (mobile) ([#49794](https://github.com/WordPress/gutenberg/pull/49794)).
+-   `parseStylesVariables()`: Refactor away from Lodash (mobile) ([#49794](https://github.com/WordPress/gutenberg/pull/49794)).
+-   Remove Lodash dependency from components package ([#49794](https://github.com/WordPress/gutenberg/pull/49794)).
+-   Tweak `WordPressComponent` type so `selector` property is optional ([#49960](https://github.com/WordPress/gutenberg/pull/49960)).
+-   Update `Modal` appearance on small screens ([#50039](https://github.com/WordPress/gutenberg/pull/50039)).
+-   Update the framer motion dependency to the latest version `10.11.6` ([#49822](https://github.com/WordPress/gutenberg/pull/49822)).
+
+### Enhancements
+
+-   `Draggable`: Add `appendToOwnerDocument` prop to allow elementId based elements to be attached to the ownerDocument body ([#49911](https://github.com/WordPress/gutenberg/pull/49911)).
+-   `TreeGrid`: Modify keyboard navigation code to use a data-expanded attribute if aria-expanded is to be controlled outside of the TreeGrid component ([#48461](https://github.com/WordPress/gutenberg/pull/48461)).
+-   `Modal`: Equalize internal spacing ([#49890](https://github.com/WordPress/gutenberg/pull/49890)).
+-   `Modal`: Increased border radius ([#49870](https://github.com/WordPress/gutenberg/pull/49870)).
+-   `Modal`: Updated spacing / dimensions of `isFullScreen` ([#49894](https://github.com/WordPress/gutenberg/pull/49894)).
+-   `SlotFill`: Added util for creating private SlotFills and supporting Symbol keys ([#49819](https://github.com/WordPress/gutenberg/pull/49819)).
+-   `IconType`: Export for external use ([#49649](https://github.com/WordPress/gutenberg/pull/49649)).
+
+### Bug Fixes
+
+-   `CheckboxControl`: Add support custom IDs ([#49977](https://github.com/WordPress/gutenberg/pull/49977)).
+
+### Documentation
+
+-   `Autocomplete`: Add heading and fix type for `onReplace` in README. ([#49798](https://github.com/WordPress/gutenberg/pull/49798)).
+-   `Autocomplete`: Update `Usage` section in README. ([#49965](https://github.com/WordPress/gutenberg/pull/49965)).
+
+## 23.8.0 (2023-04-12)
+
+### Internal
+
+-   `Mobile` Refactor of the KeyboardAwareFlatList component.
+-   Update `reakit` dependency to 1.3.11 ([#49763](https://github.com/WordPress/gutenberg/pull/49763)).
+
+### Enhancements
+
+-   `DropZone`: Smooth animation ([#49517](https://github.com/WordPress/gutenberg/pull/49517)).
+-   `Navigator`: Add `skipFocus` property in `NavigateOptions`. ([#49350](https://github.com/WordPress/gutenberg/pull/49350)).
+-   `Spinner`: add explicit opacity and background styles ([#49695](https://github.com/WordPress/gutenberg/pull/49695)).
+-   Make TypeScript types available for consumers ([#49229](https://github.com/WordPress/gutenberg/pull/49229)).
+
+### Bug Fixes
+
+-   `Snackbar`: Fix insufficient color contrast on hover ([#49682](https://github.com/WordPress/gutenberg/pull/49682)).
+
+## 23.7.0 (2023-03-29)
+
+### Internal
+
+-   `Animate`: Convert to TypeScript ([#49243](https://github.com/WordPress/gutenberg/pull/49243)).
+-   `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)).
+-   `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)).
+-   `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)).
+-   `FormTokenField`: Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles ([48609](https://github.com/WordPress/gutenberg/pull/48609)).
+-   `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom`([47515](https://github.com/WordPress/gutenberg/pull/47515)).
+
+### Enhancements
+
+-   `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)).
+-   `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)).
+-   `ImageSizeControl`: Use large 40px sizes ([#49113](https://github.com/WordPress/gutenberg/pull/49113)).
+
+### Bug Fixes
+
+-   `CircularOptionPicker`: force swatches to visually render on top of the rest of the component's content ([#49245](https://github.com/WordPress/gutenberg/pull/49245)).
+-   `InputControl`: Fix misaligned textarea input control ([#49116](https://github.com/WordPress/gutenberg/pull/49116)).
+-   `ToolsPanel`: Ensure consistency in menu item order ([#49222](https://github.com/WordPress/gutenberg/pull/49222)).
+-   `TabPanel`: fix initial tab selection & focus management ([#49368](https://github.com/WordPress/gutenberg/pull/49368)).
+
+### Internal
+
+-   `DuotonePicker`, `DuotoneSwatch`: Convert to TypeScript ([#49060](https://github.com/WordPress/gutenberg/pull/49060)).
+
+## 23.6.0 (2023-03-15)
+
+### Enhancements
+
+-   `FontSizePicker`: Allow custom units for custom font size control ([#48468](https://github.com/WordPress/gutenberg/pull/48468)).
+-   `Navigator`: Disable initial screen animation ([#49062](https://github.com/WordPress/gutenberg/pull/49062)).
+-   `FormTokenField`: Hide suggestions list on blur event if the input value is invalid ([#48785](https://github.com/WordPress/gutenberg/pull/48785)).
+
+### Bug Fixes
+
+-   `ResponsiveWrapper`: use `aspect-ratio` CSS prop, add support for `SVG` elements ([#48573](https://github.com/WordPress/gutenberg/pull/48573).
+-   `ResizeTooltip`: Use `default.fontFamily` on tooltip ([#48805](https://github.com/WordPress/gutenberg/pull/48805).
+
+### Internal
+
+-   `Guide`: Convert to TypeScript ([#47493](https://github.com/WordPress/gutenberg/pull/47493)).
+-   `SelectControl`: improve prop types for single vs multiple selection ([#47390](https://github.com/WordPress/gutenberg/pull/47390)).
+-   `Navigation`: Convert to TypeScript ([#48742](https://github.com/WordPress/gutenberg/pull/48742)).
+-   `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)).
+-   `withFilters` HOC: Convert to TypeScript ([#48721](https://github.com/WordPress/gutenberg/pull/48721)).
+-   `withFallbackStyles` HOC: Convert to TypeScript ([#48720](https://github.com/WordPress/gutenberg/pull/48720)).
+-   `withFocusReturn` HOC: Convert to TypeScript ([#48748](https://github.com/WordPress/gutenberg/pull/48748)).
+-   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
+-   `withSpokenMessages`: HOC: Convert to TypeScript ([#48163](https://github.com/WordPress/gutenberg/pull/48163)).
+-   `withNotices`: HOC: Convert to TypeScript ([#49088](https://github.com/WordPress/gutenberg/pull/49088)).
+-   `ToolbarButton`: Convert to TypeScript ([#47750](https://github.com/WordPress/gutenberg/pull/47750)).
+-   `DimensionControl(Experimental)`: Convert to TypeScript ([#47351](https://github.com/WordPress/gutenberg/pull/47351)).
+-   `PaletteEdit`: Convert to TypeScript ([#47764](https://github.com/WordPress/gutenberg/pull/47764)).
+-   `QueryControls`: Refactor away from Lodash (`.groupBy`) ([#48779](https://github.com/WordPress/gutenberg/pull/48779)).
+-   `ToolbarContext`: Convert to TypeScript ([#49002](https://github.com/WordPress/gutenberg/pull/49002)).
+
+## 23.5.0 (2023-03-01)
+
+### Enhancements
+
+-   `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123)).
+
+### Internal
+
+-   `CircularOptionPicker`: Convert to TypeScript ([#47937](https://github.com/WordPress/gutenberg/pull/47937)).
+-   `TabPanel`: Improve unit test in preparation for controlled component updates ([#48086](https://github.com/WordPress/gutenberg/pull/48086)).
+-   `Autocomplete`: performance: avoid setting state on every value change ([#48485](https://github.com/WordPress/gutenberg/pull/48485)).
+-   `Higher Order` -- `with-constrained-tabbing`: Convert to TypeScript ([#48162](https://github.com/WordPress/gutenberg/pull/48162)).
+-   `Autocomplete`: Convert to TypeScript ([#47751](https://github.com/WordPress/gutenberg/pull/47751)).
+-   `Autocomplete`: avoid calling setState on input ([#48565](https://github.com/WordPress/gutenberg/pull/48565)).
+
+## 23.4.0 (2023-02-15)
+
+### Bug Fixes
+
+-   `ToolsPanel`: fix type inconsistencies between types, docs and normal component usage ([47944](https://github.com/WordPress/gutenberg/pull/47944)).
+-   `SelectControl`: Fix styling when `multiple` prop is enabled ([#47893](https://github.com/WordPress/gutenberg/pull/43213)).
+-   `useAutocompleteProps`, `Autocomplete`: Make accessible when rendered in an iframe ([#47907](https://github.com/WordPress/gutenberg/pull/47907)).
+
+### Enhancements
+
+-   `ColorPalette`, `GradientPicker`, `PaletteEdit`, `ToolsPanel`: add new props to set a custom heading level ([43848](https://github.com/WordPress/gutenberg/pull/43848) and [#47788](https://github.com/WordPress/gutenberg/pull/47788)).
+-   `ColorPalette`: ensure text label contrast checking works with CSS variables ([#47373](https://github.com/WordPress/gutenberg/pull/47373)).
+-   `Navigator`: Support dynamic paths with parameters ([#47827](https://github.com/WordPress/gutenberg/pull/47827)).
+-   `Navigator`: Support hierarchical paths navigation and add `NavigatorToParentButton` component ([#47883](https://github.com/WordPress/gutenberg/pull/47883)).
+
+### Internal
+
+-   `NavigatorButton`: Reuse `Button` types ([47754](https://github.com/WordPress/gutenberg/pull/47754)).
+-   `CustomSelectControl`: lock the `__experimentalShowSelectedHint` prop ([#47229](https://github.com/WordPress/gutenberg/pull/47229)).
+-   Lock the `__experimentalPopoverPositionToPlacement` function and rename it to `__experimentalPopoverLegacyPositionToPlacement` ([#47505](https://github.com/WordPress/gutenberg/pull/47505)).
+-   `ComboboxControl`: Convert to TypeScript ([#47581](https://github.com/WordPress/gutenberg/pull/47581)).
+-   `Panel`, `PanelHeader`, `PanelRow`: Convert to TypeScript ([#47259](https://github.com/WordPress/gutenberg/pull/47259)).
+-   `BoxControl`: Convert to TypeScript ([#47622](https://github.com/WordPress/gutenberg/pull/47622)).
+-   `AnglePickerControl`: Convert to TypeScript ([#45820](https://github.com/WordPress/gutenberg/pull/45820)).
+-   `ResizableBox`: refactor styles to TypeScript ([47756](https://github.com/WordPress/gutenberg/pull/47756)).
+-   `BorderBoxControl`: migrate tests to TypeScript, remove act() call ([47755](https://github.com/WordPress/gutenberg/pull/47755)).
+-   `Toolbar`: Convert to TypeScript ([#47087](https://github.com/WordPress/gutenberg/pull/47087)).
+-   `MenuItemsChoice`: Convert to TypeScript ([#47180](https://github.com/WordPress/gutenberg/pull/47180)).
+-   `ToolsPanel`: Allow display of optional items when values are updated externally to item controls ([47727](https://github.com/WordPress/gutenberg/pull/47727)).
+-   `ToolsPanel`: Ensure display of optional items when values are updated externally and multiple blocks selected ([47864](https://github.com/WordPress/gutenberg/pull/47864)).
+-   `Navigator`: add more pattern matching tests, refine existing tests ([47910](https://github.com/WordPress/gutenberg/pull/47910)).
+-   `ToolsPanel`: Refactor Storybook examples to TypeScript ([47944](https://github.com/WordPress/gutenberg/pull/47944)).
+-   `ToolsPanel`: Refactor unit tests to TypeScript ([48275](https://github.com/WordPress/gutenberg/pull/48275)).
+
+## 23.3.0 (2023-02-01)
+
+### Deprecations
+
+-   `NumberControl`: Clarify deprecation message about `hideHTMLArrows` prop ([#47370](https://github.com/WordPress/gutenberg/pull/47370)).
+
+### Enhancements
+
+-   `Dropdown`: deprecate `position` prop, use `popoverProps` instead ([46865](https://github.com/WordPress/gutenberg/pull/46865)).
+-   `Button`: improve padding for buttons with icon and text. ([46764](https://github.com/WordPress/gutenberg/pull/46764)).
+-   `ColorPalette`: Use computed color when css variable is passed to `ColorPicker` ([47181](https://github.com/WordPress/gutenberg/pull/47181)).
+-   `Popover`: add `overlay` option to the `placement` prop ([47004](https://github.com/WordPress/gutenberg/pull/47004)).
+
+### Internal
+
+-   `Toolbar`: unify Storybook examples under one file, migrate from knobs to controls ([47117](https://github.com/WordPress/gutenberg/pull/47117)).
+-   `DropdownMenu`: migrate Storybook to controls ([47149](https://github.com/WordPress/gutenberg/pull/47149)).
+-   Removed deprecated `@storybook/addon-knobs` dependency from the package ([47152](https://github.com/WordPress/gutenberg/pull/47152)).
+-   `ColorListPicker`: Convert to TypeScript ([#46358](https://github.com/WordPress/gutenberg/pull/46358)).
+-   `KeyboardShortcuts`: Convert to TypeScript ([#47429](https://github.com/WordPress/gutenberg/pull/47429)).
+-   `ColorPalette`, `BorderControl`, `GradientPicker`: refine types and logic around single vs multiple palettes ([#47384](https://github.com/WordPress/gutenberg/pull/47384)).
+-   `Button`: Convert to TypeScript ([#46997](https://github.com/WordPress/gutenberg/pull/46997)).
+-   `QueryControls`: Convert to TypeScript ([#46721](https://github.com/WordPress/gutenberg/pull/46721)).
+-   `TreeGrid`: Convert to TypeScript ([#47516](https://github.com/WordPress/gutenberg/pull/47516)).
+-   `Notice`: refactor to TypeScript ([47118](https://github.com/WordPress/gutenberg/pull/47118)).
+-   `Popover`: Take iframe element scaling into account ([47004](https://github.com/WordPress/gutenberg/pull/47004)).
+
+### Bug Fixes
+
+-   `TabPanel`: Fix initial tab selection when the tab declaration is lazily added to the `tabs` array ([47100](https://github.com/WordPress/gutenberg/pull/47100)).
+-   `InputControl`: Avoid the "controlled to uncontrolled" warning by forcing the internal `<input />` element to be always in controlled mode ([47250](https://github.com/WordPress/gutenberg/pull/47250)).
+
+## 23.2.0 (2023-01-11)
+
+### Internal
+
+-   `AlignmentMatrixControl`: Update center cell label to 'Center' instead of 'Center Center' ([#46852](https://github.com/WordPress/gutenberg/pull/46852)).
+-   `Toolbar`: move all subcomponents under the same folder ([46951](https://github.com/WordPress/gutenberg/pull/46951)).
+-   `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
+-   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
+-   `SandBox`: Convert to TypeScript ([#46478](https://github.com/WordPress/gutenberg/pull/46478)).
+-   `ResponsiveWrapper`: Convert to TypeScript ([#46480](https://github.com/WordPress/gutenberg/pull/46480)).
+-   `ItemGroup`: migrate Storybook to controls, refactor to TypeScript ([46945](https://github.com/WordPress/gutenberg/pull/46945)).
+
+### Bug Fixes
+
+-   `Placeholder`: set fixed right margin for label's icon ([46918](https://github.com/WordPress/gutenberg/pull/46918)).
+-   `TreeGrid`: Fix right-arrow keyboard navigation when a row contains more than two focusable elements ([46998](https://github.com/WordPress/gutenberg/pull/46998)).
+
+## 23.1.0 (2023-01-02)
+
+### Breaking Changes
+
+-   `ColorPalette`: The experimental `__experimentalHasMultipleOrigins` prop has been removed ([#46315](https://github.com/WordPress/gutenberg/pull/46315)).
+
+## 23.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+### New Features
+
+-   `TabPanel`: support manual tab activation ([#46004](https://github.com/WordPress/gutenberg/pull/46004)).
+-   `TabPanel`: support disabled prop for tab buttons ([#46471](https://github.com/WordPress/gutenberg/pull/46471)).
+-   `BaseControl`: Add `useBaseControlProps` hook to help generate id-releated props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
+
+### Bug Fixes
+
+-   `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)).
+-   `Toolbar`: Fix duplicate focus style on anchor link button ([#46759](https://github.com/WordPress/gutenberg/pull/46759)).
+-   `useNavigateRegions`: Ensure region navigation picks the next region based on where the current user focus is located instead of starting at the beginning ([#44883](https://github.com/WordPress/gutenberg/pull/44883)).
+-   `ComboboxControl`: Fix unexpected behaviour in IME Composition ([#46827](https://github.com/WordPress/gutenberg/pull/46827)).
+
 ### Enhancements
 
+-   `TabPanel`: Simplify tab-focus style. ([#46276](https://github.com/WordPress/gutenberg/pull/46276)).
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
+-   `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)).
+-   `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)).
+-   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
+-   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196)).
+-   `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
+
+-   `TextControl`: Restrict `type` prop to `email`, `number`, `password`, `tel`, `text`, `search` or `url` ([#45433](https://github.com/WordPress/gutenberg/pull/45433/)).
+
+### Internal
+
+-   `useControlledValue`: let TypeScript infer the return type ([#46164](https://github.com/WordPress/gutenberg/pull/46164)).
+-   `LinkedButton`: remove unnecessary `span` tag ([#46063](https://github.com/WordPress/gutenberg/pull/46063)).
+-   NumberControl: refactor styles/tests/stories to TypeScript, replace fireEvent with user-event ([#45990](https://github.com/WordPress/gutenberg/pull/45990)).
+-   `useBaseField`: Convert to TypeScript ([#45712](https://github.com/WordPress/gutenberg/pull/45712)).
+-   `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)).
+-   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
+
+-   `Tooltip`: Add readme and unit tests for `shortcut` prop ([#46092](https://github.com/WordPress/gutenberg/pull/46092)).
 
 ## 22.1.0 (2022-11-16)
 
@@ -14,9 +1597,10 @@
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 
 ### Internal
+
 -   `AnglePickerControl`: remove `:focus-visible' outline on `CircleOutlineWrapper` ([#45758](https://github.com/WordPress/gutenberg/pull/45758))
 
-### Bug Fix
+### Bug Fixes
 
 -   `FormTokenField`: Fix duplicate input in IME composition ([#45607](https://github.com/WordPress/gutenberg/pull/45607)).
 -   `Autocomplete`: Check key events more strictly in IME composition ([#45626](https://github.com/WordPress/gutenberg/pull/45626)).
@@ -24,6 +1608,7 @@
 -   `Icon`: Making size prop work for icon components using dash icon strings ([#45593](https://github.com/WordPress/gutenberg/pull/45593))
 -   `ToolsPanelItem`: Prevent unintended calls to onDeselect when parent panel is remounted and item is rendered via SlotFill ([#45673](https://github.com/WordPress/gutenberg/pull/45673))
 -   `ColorPicker`: Prevent all number fields from becoming "0" when one of them is an empty string ([#45649](https://github.com/WordPress/gutenberg/pull/45649)).
+-   `ToggleControl`: Fix toggle control label text overflow ([#45962](https://github.com/WordPress/gutenberg/pull/45962)).
 
 ### Internal
 
@@ -44,6 +1629,7 @@
 ### Experimental
 
 -   `ToggleGroupControl`: Only show enclosing border when `isBlock` and not `isDeselectable` ([#45492](https://github.com/WordPress/gutenberg/pull/45492)).
+-   `Theme`: Add support for custom `background` color ([#45466](https://github.com/WordPress/gutenberg/pull/45466)).
 
 ## 22.0.0 (2022-11-02)
 
@@ -58,7 +1644,7 @@
 -   `Popover`: the deprecation messages for anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`) have been updated. ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
 -   `Popover`: The `isAlternate` prop has been replaced with a `variant` prop that can be called with the `'toolbar'` string ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
 
-### New Feature
+### New Features
 
 -   `BoxControl` & `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent components ([#44955](https://github.com/WordPress/gutenberg/pull/44955))
 -   `Popover`: A `variant` prop has been added to style popovers, with `'unstyled'` and `'toolbar'` possible values ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
@@ -74,7 +1660,7 @@
 -   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
 -   `FontSizePicker`: Improve hint text shown next to 'Font size' label ([#44966](https://github.com/WordPress/gutenberg/pull/44966)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `useNavigateRegions`: Add new keyboard shortcut alias to cover backtick and tilde keys inconsistencies across browsers ([#45019](https://github.com/WordPress/gutenberg/pull/45019)).
 -   `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
@@ -117,7 +1703,7 @@
 
 ## 21.3.0 (2022-10-19)
 
-### Bug Fix
+### Bug Fixes
 
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791)).
 -   `ToggleGroupControl`: Remove unsupported `disabled` prop from types, and correctly mark `label` prop as required ([#45114](https://github.com/WordPress/gutenberg/pull/45114)).
@@ -143,11 +1729,11 @@
 
 ### Enhancements
 
--   `FontSizePicker`: Updated to take up full width of its parent and have a 40px Reset button when `size` is `__unstable-large` ((44559)[https://github.com/WordPress/gutenberg/pull/44559]).
+-   `FontSizePicker`: Updated to take up full width of its parent and have a 40px Reset button when `size` is `__unstable-large` ([44559](https://github.com/WordPress/gutenberg/pull/44559)).
 -   `BorderBoxControl`: Omit unit select when width values are mixed ([#44592](https://github.com/WordPress/gutenberg/pull/44592))
 -   `BorderControl`: Add ability to disable unit selection ([#44592](https://github.com/WordPress/gutenberg/pull/44592))
 
-### Bug Fix
+### Bug Fixes
 
 -   `Popover`: fix limitShift logic by adding iframe offset correctly ([#42950](https://github.com/WordPress/gutenberg/pull/42950)).
 -   `Popover`: refine position-to-placement conversion logic, add tests ([#44377](https://github.com/WordPress/gutenberg/pull/44377)).
@@ -180,7 +1766,7 @@
 
 -   `Popover`: added new `anchor` prop, supposed to supersede all previous anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`). These older anchor-related props are now marked as deprecated and are scheduled to be removed in WordPress 6.3 ([#43691](https://github.com/WordPress/gutenberg/pull/43691)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `Button`: Remove unexpected `has-text` class when empty children are passed ([#44198](https://github.com/WordPress/gutenberg/pull/44198)).
 -   The `LinkedButton` to unlink sides in `BoxControl`, `BorderBoxControl` and `BorderRadiusControl` have changed from a rectangular primary button to an icon-only button, with a sentence case tooltip, and default-size icon for better legibility. The `Button` component has been fixed so when `isSmall` and `icon` props are set, and no text is present, the button shape is square rather than rectangular.
@@ -206,7 +1792,7 @@
 -   `Popover`: deprecate `__unstableShift` prop in favour of new `shift` prop. The `__unstableShift` is currently scheduled for removal in WordPress 6.3 ([#43845](https://github.com/WordPress/gutenberg/pull/43845)).
 -   `Popover`: removed the `__unstableObserveElement` prop, which is not necessary anymore. The functionality is now supported directly by the component without the need of an external prop ([#43617](https://github.com/WordPress/gutenberg/pull/43617)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `Button`, `Icon`: Fix `iconSize` prop doesn't work with some icons ([#43821](https://github.com/WordPress/gutenberg/pull/43821)).
 -   `InputControl`, `NumberControl`, `UnitControl`: Fix margin when `labelPosition` is `bottom` ([#43995](https://github.com/WordPress/gutenberg/pull/43995)).
@@ -271,7 +1857,7 @@
 -   `CustomSelectControl`: Deprecate constrained width style. Add a `__nextUnconstrainedWidth` prop to start opting into the unconstrained width that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43230](https://github.com/WordPress/gutenberg/pull/43230)).
 -   `Popover`: deprecate `__unstableForcePosition` prop in favour of new `flip` and `resize` props. The `__unstableForcePosition` is currently scheduled for removal in WordPress 6.3 ([#43546](https://github.com/WordPress/gutenberg/pull/43546)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `AlignmentMatrixControl`: keep the physical direction in RTL languages ([#43126](https://github.com/WordPress/gutenberg/pull/43126)).
 -   `AlignmentMatrixControl`: Fix the `width` prop so it works as intended ([#43482](https://github.com/WordPress/gutenberg/pull/43482)).
@@ -342,7 +1928,7 @@
 
 ## 19.17.0 (2022-08-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   `Popover`: make sure that `ownerDocument` is always defined ([#42886](https://github.com/WordPress/gutenberg/pull/42886)).
 -   `ExternalLink`: Check if the link is an internal anchor link and prevent anchor links from being opened. ([#42259](https://github.com/WordPress/gutenberg/pull/42259)).
@@ -388,7 +1974,7 @@
 
 ## 19.16.0 (2022-07-27)
 
-### Bug Fix
+### Bug Fixes
 
 -   Context System: Stop explicitly setting `undefined` to the `children` prop. This fixes a bug where `Icon` could not be correctly rendered via the `as` prop of a context-connected component ([#42686](https://github.com/WordPress/gutenberg/pull/42686)).
 -   `Popover`, `Dropdown`: Fix width when `expandOnMobile` is enabled ([#42635](https://github.com/WordPress/gutenberg/pull/42635/)).
@@ -434,7 +2020,7 @@
 
 ## 19.15.0 (2022-07-13)
 
-### Bug Fix
+### Bug Fixes
 
 -   `BoxControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#42094](https://github.com/WordPress/gutenberg/pull/42094)).
 -   `FocalPointPicker`, `FormTokenField`, `ResizableBox`: Fixed SSR breakage ([#42248](https://github.com/WordPress/gutenberg/pull/42248)).
@@ -476,7 +2062,7 @@
 
 ## 19.14.0 (2022-06-29)
 
-### Bug Fix
+### Bug Fixes
 
 -   `ColorPicker`: Remove horizontal scrollbar when using HSL or RGB color input types. ([#41646](https://github.com/WordPress/gutenberg/pull/41646))
 -   `ColorPicker`: Widen hex input field for mobile. ([#42004](https://github.com/WordPress/gutenberg/pull/42004))
@@ -516,7 +2102,7 @@
 
 ## 19.13.0 (2022-06-15)
 
-### Bug Fix
+### Bug Fixes
 
 -   `Tooltip`: Opt in to `__unstableShift` to ensure that the Tooltip is always within the viewport. ([#41524](https://github.com/WordPress/gutenberg/pull/41524))
 -   `FormTokenField`: Do not suggest the selected one even if `{ value: string }` is passed ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
@@ -550,7 +2136,7 @@
 
 ## 19.12.0 (2022-06-01)
 
-### Bug Fix
+### Bug Fixes
 
 -   `Popover`, `Dropdown`, `CustomGradientPicker`: Fix dropdown positioning by always targeting the rendered toggle, and switch off width in the Popover size middleware to stop reducing the width of the popover. ([#41361](https://github.com/WordPress/gutenberg/pull/41361))
 -   Fix `InputControl` blocking undo/redo while focused. ([#40518](https://github.com/WordPress/gutenberg/pull/40518))
@@ -620,7 +2206,7 @@
 -   `ToggleControlGroup`: Switch to internal `Icon` component for dashicon support ([40717](https://github.com/WordPress/gutenberg/pull/40717)).
 -   Improve `ToolsPanel` accessibility. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
 
-### Bug Fix
+### Bug Fixes
 
 -   The `Button` component now displays the label as the tooltip for icon only buttons. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
 -   Use fake timers and fix usage of async methods from `@testing-library/user-event`. ([#40790](https://github.com/WordPress/gutenberg/pull/40790))
@@ -634,7 +2220,7 @@
 
 ## 19.9.0 (2022-04-21)
 
-### Bug Fix
+### Bug Fixes
 
 -   Consolidate the main black colors to gray-900. Affects `AlignmentMatrixControl`, `InputControl`, `Heading`, `SelectControl`, `Spinner (Experimental)`, and `Text` ([#40391](https://github.com/WordPress/gutenberg/pull/40391)).
 
@@ -642,7 +2228,7 @@
 
 -   Remove individual color object exports from the `utils/colors-values.js` file. Colors should now be used from the main `COLORS` export([#40387](https://github.com/WordPress/gutenberg/pull/40387)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `InputControl`: allow user to input a value interactively in Storybook, by removing default value argument ([#40410](https://github.com/WordPress/gutenberg/pull/40410)).
 
@@ -665,10 +2251,10 @@
 -   Add `BorderBoxControl` component ([#38876](https://github.com/WordPress/gutenberg/pull/38876)).
 -   Add `ToggleGroupControlOptionIcon` component ([#39760](https://github.com/WordPress/gutenberg/pull/39760)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Use `Object.assign` instead of `{ ...spread }` syntax to avoid errors in the code generated by TypeScript ([#39932](https://github.com/WordPress/gutenberg/pull/39932)).
--   `ItemGroup`: Ensure that the Item's text color is not overriden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
+-   `ItemGroup`: Ensure that the Item's text color is not overridden by the user agent's button color ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
 -   `Surface`: Use updated UI text color `#1e1e1e` instead of `#000` ([#40055](https://github.com/WordPress/gutenberg/pull/40055)).
 -   `CustomSelectControl`: Make chevron consistent with `SelectControl` ([#40049](https://github.com/WordPress/gutenberg/pull/40049)).
 
@@ -691,13 +2277,13 @@
 -   Delete the `composeStateReducers` utility function ([#39262](https://github.com/WordPress/gutenberg/pull/39262)).
 -   `BoxControl`: stop using `UnitControl`'s deprecated `unit` prop ([#39511](https://github.com/WordPress/gutenberg/pull/39511)).
 
-### Bug Fix
+### Bug Fixes
 
 -   `NumberControl`: commit (and constrain) value on `blur` event ([#39186](https://github.com/WordPress/gutenberg/pull/39186)).
 -   Fix `UnitControl`'s reset of unit when the quantity value is cleared. ([#39531](https://github.com/WordPress/gutenberg/pull/39531/)).
 -   `ResizableBox`: Ensure tooltip text remains on a single line. ([#39623](https://github.com/WordPress/gutenberg/pull/39623)).
 
-### Deprecation
+### Deprecations
 
 -   `unit` prop in `UnitControl` marked as deprecated ([#39503](https://github.com/WordPress/gutenberg/pull/39503)).
 
@@ -710,7 +2296,7 @@
 -   `TreeGrid`: Add tests for Home/End keyboard navigation. Add `onFocusRow` callback for Home/End keyboard navigation, this was missed in the implementation PR. Modify test for expanding/collapsing a row as row 1 implements this now. Update README with latest changes. ([#39302](https://github.com/WordPress/gutenberg/pull/39302))
 -   `ToggleGroupControlOption`: Calculate width from button content and remove `LabelPlaceholderView` ([#39345](https://github.com/WordPress/gutenberg/pull/39345))
 
-### Bug Fix
+### Bug Fixes
 
 -   Normalize `font-family` on `Button`, `ColorPalette`, `ComoboboxControl`, `DateTimePicker`, `FormTokenField`, `InputControl`, `SelectControl`, and `ToggleGroupControl` ([#38969](https://github.com/WordPress/gutenberg/pull/38969)).
 -   Fix input value selection of `InputControl`-based controls in Firefox and Safari with axial constraint of drag gesture ([#38968](https://github.com/WordPress/gutenberg/pull/38968)).
@@ -718,7 +2304,7 @@
 
 ## 19.5.0 (2022-02-23)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix spin buttons of number inputs in Safari ([#38840](https://github.com/WordPress/gutenberg/pull/38840))
 -   Show tooltip on toggle custom size button in FontSizePicker ([#38985](https://github.com/WordPress/gutenberg/pull/38985))
@@ -730,7 +2316,7 @@
 
 ## 19.4.0 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Components: Fix `Slot`/`Fill` Emotion `StyleProvider` ([#38237](https://github.com/WordPress/gutenberg/pull/38237))
 -   Reduce height and min-width of the reset button on `ComboBoxControl` for consistency. ([#38020](https://github.com/WordPress/gutenberg/pull/38020))
@@ -764,7 +2350,7 @@
 -   Updated `ToolsPanel` header icon to only show "plus" icon when all items are optional and all are currently hidden ([#38262](https://github.com/WordPress/gutenberg/pull/38262))
 -   `TreeGrid`: Fix keyboard navigation for expand/collapse table rows in Firefox ([#37983](https://github.com/WordPress/gutenberg/pull/37983))
 
-### Bug Fix
+### Bug Fixes
 
 -   Update the `HexInput` component to accept a pasted value that contains a starting #
 -   Update `ToggleGroupControl` background active state to use a simple background color instead of animated backdrop ([38008](https://github.com/WordPress/gutenberg/pull/38008))
@@ -798,7 +2384,7 @@
 -   Add `__experimentalIsRenderedInSidebar` property to the `GradientPicker`and `CustomGradientPicker`. The property changes the color popover behavior to have a special placement behavior appropriate for sidebar UI's.
 -   Add `first` and `last` classes to displayed `ToolsPanelItem` group within a `ToolsPanel` ([#37546](https://github.com/WordPress/gutenberg/pull/37546))
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed spacing between `BaseControl` fields and help text within the `ToolsPanel` ([#36334](https://github.com/WordPress/gutenberg/pull/36334))
 -   Replaced hardcoded blue in `ColorPicker` with UI theme color ([#36153](https://github.com/WordPress/gutenberg/pull/36153)).
@@ -821,7 +2407,7 @@
 
 ## 19.1.4 (2021-12-13)
 
-### Bug Fix
+### Bug Fixes
 
 -   Improve accessibility and visibility in `ColorPallete` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
 
@@ -831,7 +2417,7 @@
 
 ## 19.1.2 (2021-12-06)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed `GradientPicker` not displaying `CustomGradientPicker` when no gradients are provided ([#36900](https://github.com/WordPress/gutenberg/pull/36900)).
 -   Fixed error thrown in `ColorPicker` when used in controlled state in color gradients ([#36941](https://github.com/WordPress/gutenberg/pull/36941)).
@@ -844,7 +2430,7 @@
 
 -   Added a `showTooltip` prop to `ToggleGroupControlOption` in order to display tooltip text (using `<Tooltip />`). ([#36726](https://github.com/WordPress/gutenberg/pull/36726)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed a bug which prevented setting `PM` hours correctly in the `DateTimePicker` ([#36878](https://github.com/WordPress/gutenberg/pull/36878)).
 
@@ -899,7 +2485,7 @@
 -   Add an experimental `Navigator` components ([#34904](https://github.com/WordPress/gutenberg/pull/34904)) as a replacement for the previous `Navigation` related components.
 -   Update the `ColorPicker` component to the latest design ([#35220](https://github.com/WordPress/gutenberg/pull/35220))
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed rounding of value in `RangeControl` component when it loses focus while the `SHIFT` key is held. ([#35020](https://github.com/WordPress/gutenberg/pull/35020)).
 
@@ -910,11 +2496,11 @@
 
 ## 17.0.0 (2021-09-09)
 
-### Breaking Change
+### Breaking Changes
 
 -   Removed a min-width from the `DropdownMenu` component, allowing the menu to accommodate thin contents like vertical tools menus ([#33995](https://github.com/WordPress/gutenberg/pull/33995)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed RTL styles in `Flex` component ([#33729](https://github.com/WordPress/gutenberg/pull/33729)).
 -   Fixed unit test errors caused by `CSS.supports` being called in a non-browser environment ([#34572](https://github.com/WordPress/gutenberg/pull/34572)).
@@ -926,39 +2512,39 @@
 
 ## 16.0.0 (2021-08-23)
 
-### Breaking Change
+### Breaking Changes
 
 -   Updated the visual styles of the RangeControl component ([#33824](https://github.com/WordPress/gutenberg/pull/33824)).
 
-### New Feature
+### New Features
 
 -   Add `hideLabelFromVision` prop to `RangeControl` ([#33714](https://github.com/WordPress/gutenberg/pull/33714)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Listen to `resize` events correctly in `useBreakpointIndex`. This hook is used in `useResponsiveValue` and consequently in the `Flex` and `Grid` components ([#33902](https://github.com/WordPress/gutenberg/pull/33902))
 
 ## 15.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
-### Deprecation
+### Deprecations
 
 -   `isScrollable` prop in `CardBody` default value changed from `true` to `false` ([#33490](https://github.com/WordPress/gutenberg/pull/33490))
 
-### Bug Fix
+### Bug Fixes
 
 -   Added back `box-sizing: border-box` rule to `CardBody`, `CardHeader` and `CardFooter` components [#33511](https://github.com/WordPress/gutenberg/pull/33511).
 
 ## 14.2.0 (2021-07-21)
 
-### New Feature
+### New Features
 
 -   Update the border color used in `CardBody`, `CardHeader`, `CardFooter`, and `CardDivider` to a different shade of gray, in order to match the color used in other components ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
 
-### Deprecation
+### Deprecations
 
 -   `isPrimary`, `isSecondary`, `isTertiary` and `isLink` props in `Button` have been deprecated. Use `variant` instead ([#31713](https://github.com/WordPress/gutenberg/pull/31713)).
 -   `isElevated` prop in `Card` has been deprecated. Use `elevation` instead ([#32566](https://github.com/WordPress/gutenberg/pull/32566)).
@@ -973,11 +2559,11 @@
 
 ### 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/.
+-   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/>.
 -   The experimental `Text` component has been completely re-written and enhanced with truncation support and separate variant, size, and weight props to allow for greater control. The previous `variant` prop has been completely removed.
 
-### Deprecation
+### Deprecations
 
 -   `isReversed` prop in `Flex` component has been deprecated. Use `direction` instead ([#31297](https://github.com/WordPress/gutenberg/pull/31297)).
 
@@ -987,16 +2573,16 @@
 
 ## 13.0.0 (2021-03-17)
 
-### Breaking Change
+### Breaking Changes
 
 -   `onChange` prop of `FocalPointPicker` is called at the end of drag operations. Previously, it was called repetitively while dragging.
 
-### New Feature
+### New Features
 
 -   Supports ref forwarding in `withNotices` and `ResizableBox`.
 -   Adds `onDrag` prop of `FocalPointPicker`.
 
-### Bug Fix
+### Bug Fixes
 
 -   Allows focus of the `FocalPointPicker` draggable area and adjustment with arrow keys. This was added in [#22531](https://github.com/WordPress/gutenberg/pull/22264) but was no longer working.
 
@@ -1006,13 +2592,13 @@
 
 -   ComboboxControl: Deburr option labels before filter
 
-### Breaking Change
+### Breaking Changes
 
 -   Introduce support for other units and advanced CSS properties on `FontSizePicker`. Provided the value passed to the `FontSizePicker` is a string or one of the size options passed is a string, onChange will start to be called with a string value instead of a number. On WordPress usage, font size options are now automatically converted to strings with the default "px" unit added.
 
 ## 10.1.0 (2020-09-03)
 
-### New Feature
+### New Features
 
 -   Add `ToolbarItem` component.
 -   Support `label` prop on the `Toolbar` component.
@@ -1023,14 +2609,14 @@
 
 ## 10.0.0 (2020-07-07)
 
-### Breaking Change
+### Breaking Changes
 
 -   `NumberControl` no longer automatically transforms values when rendering `value` into a `<input />` HTML element.
 -   `Dashicon` component no longer renders SVGs. If you rely on this component, make sure to load the dashicon font.
 
 ## 9.6.0 (2020-05-14)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix and issue that would cause the `Popover` component to throw an error under certain
     circumstances ([#22264](https://github.com/WordPress/gutenberg/pull/22264)).
@@ -1111,7 +2697,7 @@
 
 ## 8.0.0 (2019-06-12)
 
-### New Feature
+### New Features
 
 -   Add new `BlockQuotation` block to the primitives folder to support blockquote in a multiplatform way. [#15482](https://github.com/WordPress/gutenberg/pull/15482).
 -   `DropdownMenu` now supports passing a [render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render) as children for more advanced customization.
@@ -1124,22 +2710,22 @@
 
 -   Added missing documentation for `DropdownMenu` props `menuLabel`, `position`, `className`.
 
-### Breaking Change
+### Breaking Changes
 
 -   `ServerSideRender` is no longer part of components. It was extracted to an independent package `@wordpress/server-side-render`.
 
-### Bug Fix
+### Bug Fixes
 
 -   Although `DateTimePicker` does not allow picking the seconds, passed the current seconds as the selected value for seconds when calling `onChange`. Now it passes zero.
 
 ## 7.4.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Added a new `HorizontalRule` component.
 -   Added a new `Snackbar` component.
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed display of reset button when using RangeControl `allowReset` prop.
 -   Fixed minutes field of `DateTimePicker` missed '0' before single digit values.
@@ -1153,17 +2739,17 @@
 -   Added a new `preview` prop to the `Placeholder` component which allows to display a preview, for example a media preview when the Placeholder is used in media editing contexts.
 -   Added a new `anchorRect` prop to `Popover` which enables a developer to provide a custom `DOMRect` object at which to position the popover.
 
-### Improvements
+### Enhancements
 
 -   Limit `Base Control Label` to the width of its content.
 
-### Bug fixes
+### Bug Fixes
 
 -   Fix `instanceId` prop passed through to `Button` component via `MenuItems` producing React console error. Fixed by removing the unnecessary use of `withInstanceId` on the `MenuItems` component [#14599](https://github.com/WordPress/gutenberg/pull/14599)
 
 ## 7.2.0 (2019-03-20)
 
-### Improvements
+### Enhancements
 
 -   Make `RangeControl` validation rely on the `checkValidity` provided by the browsers instead of using our own validation.
 
@@ -1177,7 +2763,7 @@
 
 -   Added a new `Animate` component.
 
-### Improvements
+### Enhancements
 
 -   `withFilters` has been optimized to avoid binding hook handlers for each mounted instance of the component, instead using a single centralized hook delegator.
 -   `withFilters` has been optimized to reuse a single shared component definition for all filtered instances of the component.
@@ -1188,7 +2774,7 @@
 -   Resolves a conflict where two instance of Slot would produce an inconsistent or duplicated rendering output.
 -   Allow years between 0 and 1970 in DateTime component.
 
-### New Feature
+### New Features
 
 -   `Dropdown` now has a `focusOnMount` prop which is passed directly to the contained `Popover`.
 -   `DatePicker` has new prop `isInvalidDate` exposing react-dates' `isOutsideRange`.
@@ -1206,7 +2792,7 @@
 
 ## 7.0.0 (2018-11-20)
 
-### Breaking Change
+### Breaking Changes
 
 -   `Dropdown.refresh()` has been removed. The contained `Popover` is now automatically refreshed.
 
@@ -1218,13 +2804,13 @@
 
 -   Avoid constantly recomputing the popover position.
 
-### Polish
+### Internal
 
 -   Remove `<DateTimePicker />` obsolete `locale` prop (and pass-through to child components) and obsolete `is12Hour` prop pass through to `<DateTime />` [#11649](https://github.com/WordPress/gutenberg/pull/11649)
 
 ## 6.0.0 (2018-11-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `PanelColor` component has been removed.
 
@@ -1232,18 +2818,18 @@
 
 ## 5.1.0 (2018-11-09)
 
-### New Feature
+### New Features
 
 -   Adjust a11y roles for MenuItem component, so that aria-checked is used properly, related change in Editor/Components/BlockNavigationList ([#11431](https://github.com/WordPress/gutenberg/issues/11431)).
 -   `Popover` components are now automatically refreshed every 0.5s in order to recalculate their size or position.
 
-### Deprecation
+### Deprecations
 
 -   `Dropdown.refresh()` has been deprecated as the contained `Popover` is now automatically refreshed.
 
 ## 5.0.2 (2018-11-03)
 
-### Polish
+### Internal
 
 -   Forward `ref` in the `PanelBody` component.
 -   Tooltip are no longer removed when Button becomes disabled, it's left to the component rendering the Tooltip.
@@ -1253,32 +2839,32 @@
 
 ## 5.0.0 (2018-10-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   `AccessibleSVG` component has been removed. Please use `SVG` instead.
 
-### New Feature
+### New Features
 
 -   The `Notice` component accepts an array of action objects via the `actions` prop. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
 
 ## 4.2.1 (2018-10-22)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix importing `react-dates` stylesheet in production.
 
 ## 4.2.0 (2018-10-19)
 
-### New Feature
+### New Features
 
 -   Added a new `ColorPicker` component ([#10564](https://github.com/WordPress/gutenberg/pull/10564)).
 -   `MenuItem` now accepts an `info` prop for including an extended description.
 
-### Bug Fix
+### Bug Fixes
 
 -   `IconButton` correctly respects a passed `aria-label` prop.
 
-### Deprecation
+### Deprecations
 
 -   `PanelColor` has been deprecated in favor of `wp.editor.PanelColorSettings`.
 
@@ -1286,29 +2872,29 @@
 
 ## 4.1.0 (2018-10-10)
 
-### New Feature
+### New Features
 
 -   Added a new `ResizableBox` component.
 
 ## 4.0.0 (2018-09-30)
 
-### Breaking Change
+### Breaking Changes
 
 -   `Draggable` as a DOM node drag handler has been removed. Please, use `Draggable` as a wrap component for your DOM node drag handler.
 
-### Deprecation
+### Deprecations
 
 -   Renamed `AccessibleSVG` component to `SVG`.
 
 ## 3.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   `withAPIData` has been removed. Please use the Core Data module or `@wordpress/api-fetch` directly instead.
 -   `Draggable` as a DOM node drag handler has been deprecated. Please, use `Draggable` as a wrap component for your DOM node drag handler.
 -   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.
--   `withContext` has been removed. Please use `wp.element.createContext` instead. See: https://reactjs.org/docs/context.html.
+-   `withContext` has been removed. Please use `wp.element.createContext` instead. See: <https://reactjs.org/docs/context.html>.
 
-### New Feature
+### New Features
 
 -   Added a new `AccessibleSVG` component.
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 1b96d604738cfa..fd97fe912b2be8 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -2,24 +2,88 @@
 
 Thank you for taking the time to contribute.
 
-The following is a set of guidelines for contributing to the `@wordpress/components` package to be considered in addition to the general ones described in our [Contributing Policy](/CONTRIBUTING.md).
+The following is a set of guidelines for contributing to the `@wordpress/components` package to be considered in addition to the general ones described in our [Contributing Policy](https://github.com/WordPress/gutenberg/blob/HEAD/CONTRIBUTING.md).
 
 This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
-For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
-
-- [Compatibility](#compatibility)
-- [Compound components](#compound-components)
-- [Components & Hooks](#components--hooks)
-- [TypeScript](#typescript)
-- [Styling](#styling)
-- [Context system](#context-system)
-- [Unit tests](#unit-tests)
-- [Storybook](#storybook)
-- [Documentation](#documentation)
-- [README example](#README-example)
-- [Folder structure](#folder-structure)
-- [TypeScript migration guide](#refactoring-a-component-to-typescript)
+-   [Introducing new components](#introducing-new-components)
+-   [Compatibility](#compatibility)
+-   [Compound components](#compound-components)
+-   [Components & Hooks](#components--hooks)
+-   [Naming Conventions](#naming-conventions)
+-   [TypeScript](#typescript)
+-   [Styling](#styling)
+-   [Context system](#context-system)
+-   [Unit tests](#unit-tests)
+-   [Storybook](#storybook)
+-   [Documentation](#documentation)
+-   [README example](#README-example)
+-   [Folder structure](#folder-structure)
+-   [Component versioning](#component-versioning)
+
+## Introducing new components
+
+### Does it belong in the component library?
+
+A component library should include components that are generic and flexible enough to work across a variety of products. It should include what’s shared across many products and omit what’s not.
+
+To determine if a component should be added, ask yourself:
+
+-   Could this component be used by other products/plugins?
+-   Does the new component overlap (in functionality or visual design) with any existing components?
+-   How much effort will be required to make and maintain?
+-   Is there a clear purpose for the component?
+
+Here’s a flowchart that can help determine if a new component is necessary:
+
+![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)
+
+### First steps
+
+If you have a component you'd like added or changed, start by opening a GitHub issue. Include a detailed description in which you:
+
+-   Explain the rationale
+-   Detail the intended behavior
+-   Clarify whether it’s a variation of an existing component, or a new asset
+-   Include mockups of any fidelity (optional)
+-   Include any inspirations from other products (optional)
+
+This issue will be used to discuss the proposed changes and track progress. Reviewers start by discussing the proposal to determine if it's appropriate for WordPress Components, or if there's overlap with an existing component.
+
+It’s encouraged to surface works-in-progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to pick up where you left off.
+
+### Next steps
+
+Once the team has discussed and approved the change, it's time to start implementing it.
+
+1. **Provide a rationale**: Explain how your component will add value to the system and the greater product ecosystem. Be sure to include any user experience and interaction descriptions.
+2. **Draft documentation**: New components need development, design, and accessibility guidelines. Additionally, if your change adds additional behavior or expands a component’s features, those changes will need to be fully documented as well. Read through existing component documentation for examples. Start with a rough draft, and reviewers will help polish documentation.
+3. **Provide working code**: The component or enhancement must be built in React. See the [developer contribution guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/README.md).
+4. **Create a design spec**: Create sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. [Figma automatically does this for you](https://help.figma.com/article/32-developer-handoff).
+
+Remember, it’s unlikely that all parts will be done by one person. Contribute where you can, and others will help.
+
+### Component refinement
+
+Before a component is published it will need to be fine-tuned:
+
+1. **Expand** the features of the component to a minimum. Agree on what features should be included.
+2. **Reduce** scope and leave off features lacking consensus.
+3. **Quality assurance**: each contribution must adhere to system standards.
+
+#### Quality assurance
+
+To ensure quality, each component should be tested. The testing process should be done during the development of the component and before the component is published.
+
+-   **Accessibility**: Has the design and implementation accounted for accessibility? Please use the [WordPress accessibility guidelines](https://make.wordpress.org/accessibility/handbook/best-practices/). You must use the "Needs Accessibility Feedback" label and get a review from the accessibility team. It's best to request a review early (at the documentation stage) in order to ensure the component is designed inclusively from the outset.
+-   **Visual quality**: Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variables, and does it follow [visual guidelines](https://make.wordpress.org/design/handbook/design-guide/)? You must use the "Needs Design Feedback" label and get a review from the design team.
+-   **Documentation**: Ensure that the component has proper documentation for development, design, and accessibility.
+-   **Sufficient states & variations**: Does it cover all the necessary variations (primary, secondary, dense, etc.) and states (default, hover, active, disabled, loading, etc.), within the intended scope?
+-   **Functionality**: Do all behaviors function as expected?
+-   **Responsiveness**: Does it incorporate responsive behaviors as needed? Is the component designed from a mobile-first perspective? Do all touch interactions work as expected?
+-   **Content resilience**: Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? How long can labels be, and what happens when you run out of space?
+-   **Composability**: Does it fit well when placed next to or layered with other components to form a larger composition?
+-   **Browser support**: Has the component visual quality and accuracy been checked across Safari, Chrome, Firefox, IE, etc? Please adhere to our [browser support requirements](https://github.com/WordPress/gutenberg/blob/HEAD/packages/browserslist-config/index.js).
 
 ## Compatibility
 
@@ -31,13 +95,13 @@ In these situations, one possible approach is to "soft-deprecate" a given legacy
 2. Updating all places in Gutenberg that use that API.
 3. Adding deprecation warnings (only after the previous point is completed, otherwise the Browser Console will be polluted by all those warnings and some e2e tests may fail).
 
-When adding new components or new props to existing components, it's recommended to prefix them with `__unstable` or `__experimental` until they're stable enough to be exposed as part of the public API.
+When adding new components or new props to existing components, it's recommended to create a [private version](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/) of the component until the changes are stable enough to be exposed as part of the public API.
 
 ### Learn more
 
-- [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
-- [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis)
-- [Deprecating styles](#deprecating-styles)
+-   [How to preserve backward compatibility for a React Component](https://developer.wordpress.org/block-editor/contributors/code/backward-compatibility/#how-to-preserve-backward-compatibility-for-a-react-component)
+-   [Experimental and Unstable APIs](https://developer.wordpress.org/block-editor/contributors/code/coding-guidelines/#legacy-experimental-apis-plugin-only-apis-and-private-apis)
+-   [Deprecating styles](#deprecating-styles)
 
 <!-- ## Polymorphic Components (i.e. the `as` prop)
 
@@ -57,20 +121,16 @@ When creating components that render a list of subcomponents, prefer to expose t
 ```jsx
 // ❌ Don't:
 <List
-	items={ [
-		{ value: 'Item 1' },
-		{ value: 'Item 2' },
-		{ value: 'Item 3' },
-	] }
+	items={ [ { value: 'Item 1' }, { value: 'Item 2' }, { value: 'Item 3' } ] }
 />
 ```
 
 ```jsx
 // ✅ Do:
 <List>
-	<ListItem value="Item 1" />
-	<ListItem value="Item 2" />
-	<ListItem value="Item 3" />
+	<List.Item value="Item 1" />
+	<List.Item value="Item 2" />
+	<List.Item value="Item 3" />
 </List>
 ```
 
@@ -121,25 +181,25 @@ One way to enable reusability and composition is to extract a component's underl
 
 ```tsx
 // in `hook.ts`
-function useExampleComponent( props: PolymorphicComponentProps< ExampleProps, 'div' > ) {
+function useExampleComponent(
+	props: PolymorphicComponentProps< ExampleProps, 'div' >
+) {
 	// Merge received props with the context system.
-	const { isVisible, className, ...otherProps } = useContextSystem( props, 'Example' );
+	const { isVisible, className, ...otherProps } = useContextSystem(
+		props,
+		'Example'
+	);
 
 	// Any other reusable rendering logic (e.g. computing className, state, event listeners...)
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.example,
-				isVisible && styles.visible,
-				className
-			),
+		() => cx( styles.example, isVisible && styles.visible, className ),
 		[ className, isVisible ]
 	);
 
 	return {
 		...otherProps,
-		className: classes
+		className: classes,
 	};
 }
 
@@ -156,8 +216,8 @@ function Example(
 
 A couple of good examples of how hooks are used for composition are:
 
-- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.ts);
-- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.tsx).
+-   the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/card/card/hook.ts);
+-   the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/h-stack/hook.tsx).
 
 <!-- ## API Consinstency
 
@@ -172,40 +232,194 @@ A couple of good examples of how hooks are used for composition are:
 
 TDB -->
 
-## TypeScript
+## Naming Conventions
 
-We strongly encourage using TypeScript for all new components. Components should be typed using the `WordPressComponent` type.
+It is recommended that compound components use dot notation to separate the namespace from the individual component names. The top-level compound component should be called the namespace (no dot notation).
 
-<!-- TODO: add to the previous paragraph once the composision section gets added to this document.
-(more details about polymorphism can be found above in the "Components composition" section). -->
+Dedicated React context should also use dot notation, while hooks should not.
 
-## Styling
+When exporting compound components and preparing them to be consumed, it is important that:
 
-All new component should be styled using [Emotion](https://emotion.sh/docs/introduction).
+-   the JSDocs appear correctly in IntelliSense;
+-   the top-level component's JSDoc appears in the Storybook docs page;
+-   the top-level and subcomponent's prop types appear correctly in the Storybook props table.
 
-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.
+To meet the above requirements, we recommend:
 
-### Themeing
+-   using `Object.assign()` to add subcomponents as properties of the top-level component;
+-   using named functions for all components;
+-   using a separate file for each component, context and hook;
+-   setting explicitly the `displayName` on all subcomponents;
+-   adding the top-level JSDoc to the result of the `Object.assign` call;
+-   adding inline subcomponent JSDocs inside the `Object.assign` call.
 
-_Note: Themeing is an experimental feature and still being actively developed. Its APIs are an early implementation subject to drastic and breaking changes_
+The following example implements all of the above recommendations.
 
-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.
+```tsx
+//=======================
+// subcomponent.tsx
+//=======================
+import { forwardRef } from '@wordpress/element';
+
+export const ComponentSubcomponent = forwardRef(
+	function UnforwardedComponentSubcomponent( props, ref ) {
+		/* ... */
+	}
+);
 
-```jsx
-import { __experimentalTheme as Theme } from '@wordpress/components';
+//=======================
+// context.ts
+//=======================
+import { createContext } from '@wordpress/element';
+
+export const ComponentContext = createContext();
+
+//=======================
+// hook.ts
+//=======================
+
+/** The hook's JSDoc. */
+export function useComponent() {
+	/* ... */
+}
+
+//=======================
+// component.tsx
+//=======================
+import { forwardRef } from '@wordpress/element';
+import { ComponentSubcomponent } from './subcomponent';
+import { ComponentContext } from './context';
+
+/** The top-level component's JSDoc. */
+export const Component = Object.assign(
+	forwardRef( function UnforwardedTopLevelComponent( props, ref ) {
+		/* ... */
+	} ),
+	{
+		/** The subcomponent's JSDoc. */
+		Subcomponent: Object.assign(ComponentSubcomponent, {
+			displayName: 'Component.SubComponent';,
+		}),
+		/** The context's JSDoc. */
+		Context: Object.assign(ComponentContext, {
+			displayName: 'Component.Context'
+		}),
+	}
+);
 
-const Example = () => {
+export default Component;
+
+//=======================
+// App.tsx
+//=======================
+import { Component, useComponent } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+function CompoundComponentExample() {
 	return (
-		<Theme accent="red">
-			<Button variant="primary">I'm red</Button>
-			<Theme accent="blue">
-				<Button variant="primary">I'm blue</Button>
-			</Theme>
-		</Theme>
+		<Component>
+			<Component.SubComponent />
+		</Component>
 	);
+}
+
+function ContextProviderExample() {
+	return (
+		<Component.Context.Provider value={ /* ... */ }>
+			{ /* React tree */ }
+		</Component.Context.Provider>
+	);
+}
+
+function ContextConsumerExample() {
+	const componentContext = useContext( Component.Context );
+
+	// etc
+}
+
+function HookExample() {
+	const hookReturnValue = useComponent();
+
+	// etc.
+}
+```
+
+## TypeScript
+
+We strongly encourage using TypeScript for all new components.
+
+Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package:
+
+```ts
+type NumberControlProps = Omit<
+	InputControlProps,
+	'isDragEnabled' | 'min' | 'max'
+> & {
+	/* Additional props specific to NumberControl */
 };
 ```
 
+Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate:
+
+```ts
+/**
+ * Renders with elevation styles (box shadow).
+ *
+ * @default false
+ * @deprecated
+ */
+isElevated?: boolean;
+```
+
+Prefer `unknown` to `any`, and in general avoid it when possible.
+
+If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
+
+```ts
+import type { WordPressComponentProps } from '../context';
+import type { ComponentOwnProps } from './types';
+
+function UnconnectedMyComponent(
+	// The resulting type will include:
+	// - all props defined in `ComponentOwnProps`
+	// - all HTML props/attributes from the component specified as the second
+	//   parameter (`div` in this example)
+	// - the special `as` prop (which marks the component as polymorphic),
+	//   unless the third parameter is `false`
+	props: WordPressComponentProps< ComponentOwnProps, 'div', true >
+) {
+	/* ... */
+}
+```
+
+### Considerations for the docgen
+
+Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
+
+```js
+function UnconnectedMyComponent() {
+	/* ... */
+}
+
+// 👇 Without this named export, the docgen will not work!
+export const MyComponent = contextConnect(
+	UnconnectedMyComponent,
+	'MyComponent'
+);
+export default MyComponent;
+```
+
+On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
+
+<!-- TODO: add to the previous paragraph once the composision section gets added to this document.
+(more details about polymorphism can be found above in the "Components composition" section). -->
+
+## Styling
+
+All new component should be styled using [Emotion](https://emotion.sh/docs/introduction).
+
+Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
+
 ### 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.
@@ -215,16 +429,15 @@ Changing the styles of a non-experimental component must be done with care. To p
 import deprecated from '@wordpress/deprecated';
 import { Wrapper } from './styles.ts';
 
-function MyComponent({ __nextHasNoOuterMargins = false }) {
+function MyComponent( { __nextHasNoOuterMargins = false } ) {
 	if ( ! __nextHasNoOuterMargins ) {
 		deprecated( 'Outer margin styles for wp.components.MyComponent', {
 			since: '6.0',
 			version: '6.2', // Set a reasonable grace period depending on impact
-			hint:
-				'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
+			hint: 'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
 		} );
 	}
-	return <Wrapper __nextHasNoOuterMargins={__nextHasNoOuterMargins} />
+	return <Wrapper __nextHasNoOuterMargins={ __nextHasNoOuterMargins } />;
 }
 ```
 
@@ -232,7 +445,7 @@ Styles should be structured so the deprecated styles are cleanly encapsulated, a
 
 ```js
 // styles.ts
-const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
+const deprecatedMargins = ( { __nextHasNoOuterMargins } ) => {
 	if ( ! __nextHasNoOuterMargins ) {
 		return css`
 			margin: 8px;
@@ -243,13 +456,13 @@ const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
 export const Wrapper = styled.div`
 	margin: 0;
 
-	${deprecatedMargins}
+	${ deprecatedMargins }
 `;
 ```
 
 Once deprecated, code examples in docs/stories should include the opt-in prop set to `true` so that new consumers are encouraged to adopt it from the start.
 
-Remember to [add a **Needs Dev Note** label](/docs/contributors/code/backward-compatibility.md##dev-notes) to the pull request so third-party developers can be informed of the deprecation.
+Remember to [add a **Needs Dev Note** label](https://developer.wordpress.org/block-editor/contributors/code/backward-compatibility/#dev-notes) to the pull request so third-party developers can be informed of the deprecation.
 
 When the grace period is over and the deprecation version arrives, the `__next*` prop, deprecation notice, and deprecated styles should all be completely removed from the codebase.
 
@@ -259,32 +472,32 @@ Not all style changes justify a formal deprecation process. The main thing to lo
 
 ##### DOES need formal deprecation
 
-- Removing an outer margin.
-- Substantial changes to width/height, such as adding or removing a size restriction.
+-   Removing an outer margin.
+-   Substantial changes to width/height, such as adding or removing a size restriction.
 
 ##### DOES NOT need formal deprecation
 
-- Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
-- Minor layout shifts of a few pixels.
-- Internal layout changes of a higher-level component.
+-   Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
+-   Minor layout shifts of a few pixels.
+-   Internal layout changes of a higher-level component.
 
 ## Context system
 
-The `@wordpress/components` context system is based on [React's `Context` API](https://reactjs.org/docs/context.html), and is a way for components to adapt to the "context" they're being rendered in.
+The `@wordpress/components` context system is based on [React's `Context` API](https://react.dev/reference/react/createContext), and is a way for components to adapt to the "context" they're being rendered in.
 
 Components can use this system via a couple of functions:
 
-- they can provide values using a shared `ContextSystemProvider` component
-- they can connect to the Context via `contextConnect`
-- they can read the "computed" values from the context via `useContextSystem`
+-   they can provide values using a shared `ContextSystemProvider` component
+-   they can connect to the Context via `contextConnect`
+-   they can read the "computed" values from the context via `useContextSystem`
 
-An example of how this is used can be found in the [`Card` component family](/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
+An example of how this is used can be found in the [`Card` component family](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
 
 ```jsx
 //=========================================================================
 // Simplified snippet from `packages/components/src/card/card/hook.ts`
 //=========================================================================
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem } from '../../context';
 
 export function useCard( props ) {
 	// Read any derived registered prop from the Context System in the `Card` namespace
@@ -298,14 +511,10 @@ export function useCard( props ) {
 //=========================================================================
 // Simplified snippet from `packages/components/src/card/card/component.ts`
 //=========================================================================
-import { contextConnect, ContextSystemProvider } from '../../ui/context';
+import { contextConnect, ContextSystemProvider } from '../../context';
 
 function Card( props, forwardedRef ) {
-	const {
-		size,
-		isBorderless,
-		...otherComputedHookProps
-	} = useCard( props );
+	const { size, isBorderless, ...otherComputedHookProps } = useCard( props );
 
 	// [...]
 
@@ -335,14 +544,17 @@ export default ConnectedCard;
 //=========================================================================
 // Simplified snippet from `packages/components/src/card/card-body/hook.ts`
 //=========================================================================
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem } from '../../context';
 
 export function useCardBody( props ) {
 	// Read any derived registered prop from the Context System in the `CardBody` namespace.
 	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
 	// the `size` prop will be the one set by the parent `Card` component via the Context
 	// System (unless the prop gets explicitely set on the `CardBody` component).
-	const { size = 'medium', ...otherDerivedProps } = useContextSystem( props, 'CardBody' );
+	const { size = 'medium', ...otherDerivedProps } = useContextSystem(
+		props,
+		'CardBody'
+	);
 
 	// [...]
 
@@ -352,13 +564,13 @@ export function useCardBody( props ) {
 
 ## Unit tests
 
-Please refer to the [JavaScript Testing Overview docs](/docs/contributors/code/testing-overview.md#snapshot-testing).
+Please refer to the [JavaScript Testing Overview docs](https://developer.wordpress.org/block-editor/contributors/code/testing-overview/#snapshot-testing).
 
 ## Storybook
 
 All new components should add stories to the project's [Storybook](https://storybook.js.org/). Each [story](https://storybook.js.org/docs/react/get-started/whats-a-story) captures the rendered state of a UI component in isolation. This greatly simplifies working on a given component, while also serving as an interactive form of documentation.
 
-A component's story should be showcasing its different states — for example, the different variants of a  `Button`:
+A component's story should be showcasing its different states — for example, the different variants of a `Button`:
 
 ```jsx
 import Button from '../';
@@ -382,15 +594,15 @@ Primary.args = {
 };
 ```
 
-A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
+A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Historically, we used [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs), but it was deprecated and later removed in [#47152](https://github.com/WordPress/gutenberg/pull/47152).
 
-The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.tsx)).
+The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/card/stories/index.story.tsx)).
 
 Storybook can be started on a local machine by running `npm run storybook:dev`. Alternatively, the components' catalogue (up to date with the latest code on `trunk`) can be found at [wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/).
 
 ## Documentation
 
-All components, in addition to being typed, should be using JSDoc when necessary — as explained in the [Coding Guidelines](/docs/contributors/code/coding-guidelines.md#javascript-documentation-using-jsdoc).
+All components, in addition to being typed, should be using JSDoc when necessary — as explained in the [Coding Guidelines](https://developer.wordpress.org/block-editor/contributors/code/coding-guidelines/#javascript-documentation-using-jsdoc).
 
 Each component that is exported from the `@wordpress/components` package should include a `README.md` file, explaining how to use the component, showing examples, and documenting all the props.
 
@@ -413,7 +625,7 @@ Description of the component.
 
 ## Usage
 
-Code example using correct markdown syntax and formatted using project's formatting rules. See [ItemGroup](/packages/components/src/item-group/item-group/README.md#usage) for a real-world example.
+Code example using correct markdown syntax and formatted using project's formatting rules. See [ItemGroup](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/item-group/item-group/README.md) for a real-world example.
 
 ```jsx
 import { ExampleComponent } from '@wordpress/components';
@@ -441,12 +653,13 @@ Prop description. With a new line before and after the description and before an
 
 ### Inherited props
 
-Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](/packages/components/src/clipboard-button/README.md) for an example.
+Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/clipboard-button/README.md) for an example.
 
 <!-- Only add the next section if the component relies on the [Context System](#context-system) -->
+
 ## Context
 
-See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
+See examples for this section for the [ItemGroup](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/item-group/item-group/README.md#context) and [`Card`](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/card/card#context) components.
 ````
 
 ## Folder structure
@@ -494,105 +707,73 @@ component-family-name/
 └── utils.ts
 ```
 
-## Refactoring a component to TypeScript
-
-*Note: This section assumes that the local developer environment is set up correctly, including TypeScript linting. We also strongly recommend using an IDE that supports TypeScript.*
-
-Given a component folder (e.g. `packages/components/src/unit-control`):
-
-1. Remove the folder from the exclude list in `tsconfig.json`, if it isn’t already.
-2. Remove any `// @ts-nocheck` comments in the folder, if any.
-3. Rename `*.js{x}` files to `*.ts{x}` (except stories and unit tests).
-4. Run `npm run dev` and take note of all the errors (your IDE should also flag them).
-5. Since we want to focus on one component’s folder at the time, if any errors are coming from files outside of the folder that is being refactored, there are two potential approaches:
-	1. Following those same guidelines, refactor those dependencies first.
-		1. Ideally, start from the “leaf” of the dependency tree and slowly work your way up the chain.
-		2. Resume work on this component once all dependencies have been refactored.
-	2. Alternatively:
-		1. For each of those files, add `// @ts-nocheck` at the start of the file.
-		2. If the components in the ignored files are destructuring props directly from the function's arguments, move the props destructuring to the function's body (this is to avoid TypeScript errors from trying to infer the props type):
-
-			```jsx
-			// Before:
-			function MyComponent( { myProp1, myProp2, ...restProps } ) { /* ... */ }
-
-			// After:
-			function MyComponent( props ) {
-				const {  myProp1, myProp2, ...restProps } = props;
-
-				/* ... */
-			}
-			```
-
-		3. Remove the folders from the exclude list in the `tsconfig.json` file.
-		4. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
-		5. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
-6. Create a new `types.ts` file.
-7. Slowly work your way through fixing the TypeScript errors in the folder:
-	1. Try to avoid introducing any runtime changes, if possible. The aim of this refactor is to simply rewrite the component to TypeScript.
-	2. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
-	3. Use existing HTML types when possible? (e.g. `required` for an input field?)
-	4. Use the `CSSProperties` type where it makes sense.
-	5. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
-	6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
-
-		```tsx
-		import type { WordPressComponentProps } from '../ui/context';
-		import type { ComponentOwnProps } from './types';
-
-		function UnconnectedMyComponent(
-			// The resulting type will include:
-			// - all props defined in `ComponentOwnProps`
-			// - all HTML props/attributes from the component specified as the second
-			//   parameter (`div` in this example)
-			// - the special `as` prop (which marks the component as polymorphic),
-			//   unless the third parameter is `false`
-			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
-		) { /* ... */ }
-		```
-
-	7. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
-
-		```jsx
-		function UnconnectedMyComponent() { /* ... */ }
-
-		// 👇 Without this named export, the docgen will not work!
-		export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
-		export default MyComponent;
-		```
-
-	8. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
-	9. Prefer `unknown` to `any`, and in general avoid it when possible.
-8. On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
-9. Make sure that:
-	1. tests still pass;
-	2. storybook examples work as expected.
-	3. the component still works as expected in its usage in Gutenberg;
-	4. the JSDocs comments on `types.ts` and README docs are aligned.
-10. Convert Storybook examples to TypeScript (and from knobs to controls, if necessary) ([example](https://github.com/WordPress/gutenberg/pull/39320)).
-	1. Update all consumers of the component to potentially extend the newly added types (e.g. make `UnitControl` props extend `NumberControl` props after `NumberControl` types are made available).
-	2. Rename Story extension from `.js` to `.tsx`.
-	3. Rewrite the `meta` story object, and export it as default. In particular, make sure you add the following settings under the `parameters` key:
-
-		```tsx
-		const meta: ComponentMeta< typeof MyComponent > = {
-			parameters: {
-				controls: { expanded: true },
-				docs: { source: { state: 'open' } },
-			},
-		};
-		```
-
-		These options will display prop descriptions in the `Canvas ▸ Controls` tab, and expand code snippets in the `Docs` tab.
-
-	4. Go to the component in Storybook and check the props table in the Docs tab. If there are props that shouldn't be there, check that your types are correct, or consider `Omit`-ing props that shouldn't be exposed.
-		1. Use the `parameters.controls.exclude` property on the `meta` object to hide props from the docs.
-		2. Use the `argTypes` prop on the `meta` object to customize how each prop in the docs can be interactively controlled by the user (tip: use `control: { type: null }` to remove the interactive controls from a prop, without hiding the prop from the docs).
-		3. See the [official docs](https://storybook.js.org/docs/react/essentials/controls) for more details.
-	5. Comment out all existing stories.
-	6. Create a default template, where the component is being used in the most “vanilla” way possible.
-	7. Use the template for the `Default` story, which will serve as an interactive doc playground.
-	8. Add more focused stories as you see fit. These non-default stories should illustrate specific scenarios and usages of the component. A developer looking at the Docs tab should be able to understand what each story is demonstrating. Add JSDoc comments to stories when necessary.
-11. Convert unit tests.
-	1. Rename test file extensions from `.js` to `.tsx`.
-	2. Fix all TypeScript errors.
+## Component versioning
+
+As the needs of the package evolve with time, sometimes we may opt to fully rewrite an existing component — either to introduce substantial changes, support new features, or swap the implementation details.
+
+### Glossary
+
+Here is some terminology that will be used in the upcoming sections:
+
+-   "Legacy" component: the version(s) of the component that existsted on `trunk` before the rewrite;
+-   API surface: the component's public APIs. It includes the list of components (and subcomponents) exported from the package, their props, any associated React context. It does not include internal classnames and internal DOM structure of the components.
+
+### Approaches
+
+We identified two approaches to the task.
+
+#### Swap the implementation, keep the same API surface
+
+One possible approach is to keep the existing API surface and only swap the internal implementation of the component.
+
+This is by far the simplest approach, since it doesn't involve making changes to the API surface.
+
+If the existing API surface is not a good fit for the new implementation, or if it is not possible (or simply not desirable) to preserve backward compatibility with the existing implementation, there is another approach that can be used.
+
+#### Create a new component (or component family)
+
+This second approach involves creating a new, separate version (ie. export) of the component. Having two separate exports will help to keep the package tree-shakeable, and it will make it easier to potentially deprecated and remove the legacy component.
+
+If possible, the legacy version of the component should be rewritten so that it uses the same underlying implementation of the new version, with an extra API "translation" layer to adapt the legacy API surface to the new API surface, e.g:
+
+```
+// legacy-component/index.tsx
+
+function LegacyComponent( props ) {
+	const newProps = useTranslateLegacyPropsToNewProps( props );
+
+	return ( <NewComponentImplementation { ...newProps } /> );
+}
+
+// new-component/index.tsx
+function NewComponent( props ) {
+	return ( <NewComponentImplementation { ...props } /> );
+}
+
+// new-component/implementation.tsx
+function NewComponentImplementation( props ) {
+	// implementation
+}
+
+```
+
+In case that is not possible (eg. too difficult to reconciliate new and legacy implementations, or impossible to preserve backward compatibility), then the legacy implementation can stay as-is.
+
+In any case, extra attention should be payed to legacy component families made of two or more subcomponents. It is possible, in fact, that the a legacy subcomponent is used as a parent / child of a subcomponent from the new version (this can happen, for example, when Gutenberg allows third party developers to inject React components via Slot/Fill). To avoid incompatibility issues and unexpected behavior, there should be some code in the components warning when the above scenario happens — or even better, aliasing to the correct version of the component.
+
+##### Naming
+
+When it comes to naming the newly added component, there are two options.
+
+If there is a good reason for it, pick a new name for the component. For example, some legacy components have names that don't correspond to the corrent name of UI widget that they implement (for example, `TabPanel` should be called `Tabs`, and `Modal` should be called `Dialog`).
+
+Alternatively, version the component name. For example, the new version of `Component` could be called `ComponentV2`. This also applies for namespaced subcomponents (ie. `ComponentV2.SubComponent`).
+
+### Methodology
+
+Regardless of the chosen approach, we recommend adopting the following methodology:
+
+1. First, make sure that the legacy component is well covered by automated tests. Using those tests against the new implementation will serve as a great first layer to make sure that we don't break backward compatibility where necessary, and that we are otherwise aware of any differences in behavior;
+2. Create a new temporary folder, so that all the work can be done without affecting publicly exported APIs; make it explicit in the README, JSDocs and Storybook (by using badges) that the components are WIP and shouldn't be used outside of the components package;
+3. Once the first iteration of the new component(s) is complete, start testing it by exporting it via private APIs, and replacing usages of the legacy component across the Gutenberg repository. This process is great to gather more feedback, spot bugs and missing features;
+4. Once all usages are migrated, you can replace the legacy component with the new implementation, and delete the temporary folder and private exports. Don't forget to write a dev note when necessary.
diff --git a/packages/components/README.md b/packages/components/README.md
index 58df3ed8736795..df92e8db57be42 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -4,8 +4,6 @@ This package includes a library of generic WordPress components to be used for c
 
 ## Installation
 
-Install the module
-
 ```bash
 npm install @wordpress/components --save
 ```
@@ -27,25 +25,15 @@ export default function MyButton() {
 }
 ```
 
-Many components include CSS to add style, you will need to add in order to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
+Many components include CSS to add styles, which you will need to load in order for them to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
 
 In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
 
-### Popovers and Tooltips
-
-_If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._
-
-By default, the `Popover` component will render inline i.e. within its
-parent to which it should anchor. Depending upon the context in which the
-`Popover` is being consumed, this might lead to incorrect positioning. For
-example, when being nested within another popover.
+### Popovers
 
-This issue can be solved by rendering popovers to a specific location in the DOM via the
-`Popover.Slot`. For this to work, you will need your use of the `Popover`
-component and its `Slot` to be wrapped in a [`SlotFill`](/packages/components/src/slot-fill/README.md) provider.
+By default, the `Popover` component will render within an extra element appended to the body of the document.
 
-A `Popover` is also used as the underlying mechanism to display `Tooltip` components.
-So the same considerations should be applied to them.
+If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
 
 The following example illustrates how you can wrap a component using a
 `Popover` and have those popovers render to a single location in the DOM.
@@ -64,11 +52,24 @@ import { MyComponentWithPopover } from './my-component';
 const Example = () => {
 	<SlotFillProvider>
 		<MyComponentWithPopover />
-		<Popover.Slot>
-	</SlotFillProvider>
+		<Popover.Slot />
+	</SlotFillProvider>;
 };
 ```
 
+### TypeScript
+
+This package exposes its own types for the components it exports, however it doesn't export its own types for component props. If you need to extract the props type, please use `React.ComponentProps` to get the types from the element.
+
+```tsx
+import type { ComponentProps } from 'react';
+import { Button } from '@wordpress/components';
+
+export default function MyButton( props: ComponentProps< typeof Button > ) {
+	return <Button { ...props }>Click Me!</Button>;
+}
+```
+
 ## Docs & examples
 
 You can browse the components docs and examples at [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)
diff --git a/packages/components/package.json b/packages/components/package.json
index 5afcbf72040c8d..a2acf8e2c203d4 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "22.1.0",
+	"version": "28.13.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,62 +19,68 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@ariakit/react": "^0.4.15",
+		"@babel/runtime": "7.25.7",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
-		"@floating-ui/react-dom": "^1.0.0",
-		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/date": "file:../date",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/escape-html": "file:../escape-html",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/primitives": "file:../primitives",
-		"@wordpress/rich-text": "file:../rich-text",
-		"@wordpress/warning": "file:../warning",
+		"@floating-ui/react-dom": "^2.0.8",
+		"@types/gradient-parser": "0.1.3",
+		"@types/highlight-words-core": "1.2.1",
+		"@use-gesture/react": "^10.3.1",
+		"@wordpress/a11y": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/warning": "*",
 		"change-case": "^4.1.2",
-		"classnames": "^2.3.1",
+		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
-		"date-fns": "^2.28.0",
-		"dom-scroll-into-view": "^1.2.1",
-		"downshift": "^6.0.15",
-		"framer-motion": "^6.2.8",
+		"date-fns": "^3.6.0",
+		"deepmerge": "^4.3.0",
+		"fast-deep-equal": "^3.1.3",
+		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",
 		"highlight-words-core": "^1.2.2",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
+		"is-plain-object": "^5.0.0",
+		"memize": "^2.1.0",
+		"path-to-regexp": "^6.2.1",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
-		"reakit": "^1.3.8",
-		"remove-accents": "^0.4.2",
-		"use-lilius": "^2.0.1",
-		"uuid": "^8.3.0",
-		"valtio": "^1.7.0"
+		"remove-accents": "^0.5.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/components/schemas/docs-manifest.json b/packages/components/schemas/docs-manifest.json
new file mode 100644
index 00000000000000..7d1e40f4f696d7
--- /dev/null
+++ b/packages/components/schemas/docs-manifest.json
@@ -0,0 +1,38 @@
+{
+	"title": "JSON schema for @wordpress/components README manifests",
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"type": "object",
+	"properties": {
+		"displayName": {
+			"type": "string",
+			"description": "The `displayName` of the component, as determined in code. Used to identify the component in the specified source file."
+		},
+		"filePath": {
+			"type": "string",
+			"description": "The file path where the component is located."
+		},
+		"subcomponents": {
+			"type": "array",
+			"description": "List of subcomponents related to the component.",
+			"items": {
+				"type": "object",
+				"properties": {
+					"displayName": {
+						"type": "string",
+						"description": "The `displayName` of the subcomponent, as determined in code. Used to identify the component in the specified source file."
+					},
+					"preferredDisplayName": {
+						"type": "string",
+						"description": "The display name to use in the README, if it is different from the `displayName` as determined in code."
+					},
+					"filePath": {
+						"type": "string",
+						"description": "The file path where the subcomponent is located."
+					}
+				},
+				"required": [ "displayName", "filePath" ]
+			}
+		}
+	},
+	"required": [ "displayName", "filePath" ]
+}
diff --git a/packages/components/src/CONTRIBUTING.md b/packages/components/src/CONTRIBUTING.md
deleted file mode 100644
index 2bbc78a44fe5ef..00000000000000
--- a/packages/components/src/CONTRIBUTING.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Contributing components
-
-You can contribute by adding, modifying, or deprecating components, as well as helping with design, development, and documentation.
-
-## Does it belong in the component library?
-
-A component library should include components that are generic and flexible enough to work across a variety of products. It should include what’s shared across many products and omit what’s not.
-
-To determine if a component should be added, ask yourself:
-
--   Could this component be used by other products/plugins?
--   Does the new component overlap (in functionality or visual design) with any existing components?
--   How much effort will be required to make and maintain?
--   Is there a clear purpose for the component?
-
-Here’s a flowchart that can help determine if a new component is necessary:
-
-[![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)](https://coggle.it/diagram/WtUSrld3uAYZHsn-/t/new-ui-component/992b38cbe685d897b4aec6d0dd93cc4b47c06e0d4484eeb0d7d9a47fb2c48d94)
-
-## First steps
-
-If you have a component you'd like added or changed, start by opening a GitHub issue. Include a detailed description in which you:
-
--   Explain the rationale
--   Detail the intended behavior
--   Clarify whether it’s a variation of an existing component, or a new asset
--   Include mockups of any fidelity (optional)
--   Include any inspirations from other products (optional)
-
-This issue will be used to discuss the proposed changes and track progress. Reviewers start by discussing the proposal to determine if it's appropriate for WordPress Components, or if there's overlap with an existing component.
-
-It’s encouraged to surface works-in-progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to pick up where you left off.
-
-## Next steps
-
-Once the team has discussed and approved the change, it's time to start implementing it.
-
-1. **Provide a rationale**: Explain how your component will add value to the system and the greater product ecosystem. Be sure to include any user experience and interaction descriptions.
-2. **Draft documentation**: New components need development, design, and accessibility guidelines. Additionally, if your change adds additional behavior or expands a component’s features, those changes will need to be fully documented as well. Read through existing component documentation for examples. Start with a rough draft, and reviewers will help polish documentation.
-3. **Provide working code**: The component or enhancement must be built in React. See the [developer contribution guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/README.md).
-4. **Create a design spec**: Create sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. [Figma automatically does this for you](https://help.figma.com/article/32-developer-handoff).
-5. **Create a Figma component**: Any new components or changes to existing components will be mirrored in the [WordPress Components Figma library](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=735%3A0), so we’ll need to update the Figma library and publish the changes. Please follow the [guidelines](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=746%3A38) for contributing to the Figma libraries.
-
-Remember, it’s unlikely that all parts will be done by one person. Contribute where you can, and others will help.
-
-## Component refinement
-
-Before a component is published it will need to be fine-tuned:
-
-1. **Expand** the features of the component to a minimum. Agree on what features should be included.
-2. **Reduce** scope and leave off features lacking consensus.
-3. **Quality assurance**: each contribution must adhere to system standards.
-
-### Quality assurance
-
-To ensure quality, each component should be tested. The testing process should be done during the development of the component and before the component is published.
-
--   **Accessibility**: Has the design and implementation accounted for accessibility? Please use the [WordPress accessibility guidelines](https://make.wordpress.org/accessibility/handbook/best-practices/). You must use the "Needs Accessibility Feedback" label and get a review from the accessibility team. It's best to request a review early (at the documentation stage) in order to ensure the component is designed inclusively from the outset.
--   **Visual quality**: Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variables, and does it follow [visual guidelines](https://make.wordpress.org/design/handbook/design-guide/)? You must use the "Needs Design Feedback" label and get a review from the design team.
--   **Documentation**: Ensure that the component has proper documentation for development, design, and accessibility.
--   **Sufficient states & variations**: Does it cover all the necessary variations (primary, secondary, dense, etc.) and states (default, hover, active, disabled, loading, etc.), within the intended scope?
--   **Functionality**: Do all behaviors function as expected?
--   **Responsiveness**: Does it incorporate responsive behaviors as needed? Is the component designed from a mobile-first perspective? Do all touch interactions work as expected?
--   **Content resilience**: Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? How long can labels be, and what happens when you run out of space?
--   **Composability**: Does it fit well when placed next to or layered with other components to form a larger composition?
--   **Browser support**: Has the component visual quality and accuracy been checked across Safari, Chrome, Firefox, IE, etc? Please adhere to our [browser support requirements](https://github.com/WordPress/gutenberg/blob/HEAD/packages/browserslist-config/index.js).
-
-## Deprecation
-
-A component or prop may need deprecation if it's renamed or removed.
-
-At no point does the deprecated component/prop become unavailable. Instead, the commitment to support it stops. The following steps are needed to deprecate a component:
-
-1. Communicate intent via regular channels.
-    1. Describe reasoning for deprecation.
-    2. Decide on a timeline.
-2. Ensure backwards compatibility to keep it available.
-3. Clearly mark the component as deprecated in documentation and other channels.
diff --git a/packages/components/src/README.md b/packages/components/src/README.md
deleted file mode 100644
index af17e9b3cafa82..00000000000000
--- a/packages/components/src/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Components
-
-This directory includes a library of generic React components to be used for creating common UI elements shared between screens and features of the WordPress dashboard.
-
-## Usage
-
-Within Gutenberg, these components can be accessed by importing from the `components` root directory:
-
-```jsx
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-
-const MyButton = () => {
-	return <Button>Click Me!</Button>;
-};
-```
-
-Many components also include styles which will need to be output in order to appear correctly. Within WordPress, you can [add the `wp-components` stylesheet as a dependency of your plugin's stylesheet](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters). In other projects, you can link to the `build-style/style.css` file directly.
diff --git a/packages/components/src/alignment-matrix-control/README.md b/packages/components/src/alignment-matrix-control/README.md
index 16b7333c09db74..af97e3ae0607cd 100644
--- a/packages/components/src/alignment-matrix-control/README.md
+++ b/packages/components/src/alignment-matrix-control/README.md
@@ -1,15 +1,13 @@
 # AlignmentMatrixControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-alignmentmatrixcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-## Usage
+AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
 
 ```jsx
-import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+import { AlignmentMatrixControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const Example = () => {
@@ -18,63 +16,70 @@ const Example = () => {
 	return (
 		<AlignmentMatrixControl
 			value={ alignment }
-			onChange={ ( newAlignment ) => setAlignment( newAlignment ) }
+			onChange={ setAlignment }
 		/>
 	);
 };
 ```
-
 ## Props
 
-The component accepts the following props:
+### `defaultValue`
 
-### className
+If provided, sets the default alignment value.
 
-The class that will be added to the classes of the wrapper <Composite/> component.
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `'center center'`
 
--   Type: `string`
--   Required: No
+### `label`
 
-### id
+Accessible label. If provided, sets the `aria-label` attribute of the
+underlying `grid` widget.
 
-Unique ID for the component.
+ - Type: `string`
+ - Required: No
+ - Default: `'Alignment Matrix Control'`
 
--  Type: `string`
--  Required: No
+### `onChange`
 
-### label
+A function that receives the updated alignment value.
 
-Accessible label. If provided, sets the `aria-label` attribute of the underlying <Composite/> component.
+ - Type: `(newValue: AlignmentMatrixControlValue) => void`
+ - Required: No
 
--   Type: `string`
--   Required: No
--   Default: `Alignment Matrix Control`
+### `value`
 
-### defaultValue
+The current alignment value.
 
-If provided, sets the default alignment value.
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
 
-- Type: `string`
-- Required: No
-- Default: `center center`
+### `width`
 
-### value
+If provided, sets the width of the control.
 
-The current alignment value.
-- Type: `string`
-- Required: No
+ - Type: `number`
+ - Required: No
+ - Default: `92`
 
-### onChange
+## Subcomponents
 
-A function that receives the updated alignment value.
+### AlignmentMatrixControl.Icon
 
--   Type: `( nextValue: string ) => void`
--   Required: No
+#### Props
 
-### width
+##### `disablePointerEvents`
 
-If provided, sets the width of the wrapper <Composite/> component.
+If `true`, disables pointer events on the icon.
 
- - Type: `number`
+ - Type: `boolean`
  - Required: No
- - Default: `92`
+ - Default: `true`
+
+##### `value`
+
+The current alignment value.
+
+ - Type: `"center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"`
+ - Required: No
+ - Default: `center`
diff --git a/packages/components/src/alignment-matrix-control/cell.js b/packages/components/src/alignment-matrix-control/cell.js
deleted file mode 100644
index 2aeb839831c0c0..00000000000000
--- a/packages/components/src/alignment-matrix-control/cell.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import { CompositeItem } from '../composite';
-import Tooltip from '../tooltip';
-import { VisuallyHidden } from '../visually-hidden';
-
-/**
- * Internal dependencies
- */
-import { ALIGNMENT_LABEL } from './utils';
-import {
-	Cell as CellView,
-	Point,
-} from './styles/alignment-matrix-control-styles';
-
-export default function Cell( { isActive = false, value, ...props } ) {
-	const tooltipText = ALIGNMENT_LABEL[ value ];
-
-	return (
-		<Tooltip text={ tooltipText }>
-			<CompositeItem as={ CellView } role="gridcell" { ...props }>
-				{ /* VoiceOver needs a text content to be rendered within grid cell,
-			otherwise it'll announce the content as "blank". So we use a visually
-			hidden element instead of aria-label. */ }
-				<VisuallyHidden>{ value }</VisuallyHidden>
-				<Point isActive={ isActive } role="presentation" />
-			</CompositeItem>
-		</Tooltip>
-	);
-}
diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/packages/components/src/alignment-matrix-control/cell.tsx
new file mode 100644
index 00000000000000..8a3d1735b5ecfa
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/cell.tsx
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import { Composite } from '../composite';
+import Tooltip from '../tooltip';
+import { VisuallyHidden } from '../visually-hidden';
+
+/**
+ * Internal dependencies
+ */
+import { ALIGNMENT_LABEL } from './utils';
+import { Cell as CellView, Point } from './styles';
+import type { AlignmentMatrixControlCellProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+export default function Cell( {
+	id,
+	value,
+	...props
+}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {
+	return (
+		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
+			<Composite.Item
+				id={ id }
+				render={ <CellView { ...props } role="gridcell" /> }
+			>
+				{ /* VoiceOver needs a text content to be rendered within grid cell,
+			otherwise it'll announce the content as "blank". So we use a visually
+			hidden element instead of aria-label. */ }
+				<VisuallyHidden>{ value }</VisuallyHidden>
+				<Point role="presentation" />
+			</Composite.Item>
+		</Tooltip>
+	);
+}
diff --git a/packages/components/src/alignment-matrix-control/docs-manifest.json b/packages/components/src/alignment-matrix-control/docs-manifest.json
new file mode 100644
index 00000000000000..82ee28f4840c49
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/docs-manifest.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "AlignmentMatrixControl",
+	"filePath": "./index.tsx",
+	"subcomponents": [
+		{
+			"displayName": "AlignmentMatrixControlIcon",
+			"preferredDisplayName": "AlignmentMatrixControl.Icon",
+			"filePath": "./icon.tsx"
+		}
+	]
+}
diff --git a/packages/components/src/alignment-matrix-control/icon.js b/packages/components/src/alignment-matrix-control/icon.js
deleted file mode 100644
index e712b7471ff237..00000000000000
--- a/packages/components/src/alignment-matrix-control/icon.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import { ALIGNMENTS, getAlignmentIndex } from './utils';
-import {
-	Root,
-	Cell,
-	Point,
-} from './styles/alignment-matrix-control-icon-styles';
-
-const BASE_SIZE = 24;
-
-export default function AlignmentMatrixControlIcon( {
-	className,
-	disablePointerEvents = true,
-	size = BASE_SIZE,
-	style = {},
-	value = 'center',
-	...props
-} ) {
-	const alignIndex = getAlignmentIndex( value );
-	const scale = ( size / BASE_SIZE ).toFixed( 2 );
-
-	const classes = classnames(
-		'component-alignment-matrix-control-icon',
-		className
-	);
-
-	const styles = {
-		...style,
-		transform: `scale(${ scale })`,
-	};
-
-	return (
-		<Root
-			{ ...props }
-			className={ classes }
-			disablePointerEvents={ disablePointerEvents }
-			role="presentation"
-			size={ size }
-			style={ styles }
-		>
-			{ ALIGNMENTS.map( ( align, index ) => {
-				const isActive = alignIndex === index;
-
-				return (
-					<Cell key={ align }>
-						<Point isActive={ isActive } />
-					</Cell>
-				);
-			} ) }
-		</Root>
-	);
-}
diff --git a/packages/components/src/alignment-matrix-control/icon.tsx b/packages/components/src/alignment-matrix-control/icon.tsx
new file mode 100644
index 00000000000000..24cf54c0214937
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/icon.tsx
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Rect, SVG } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import { ALIGNMENTS, getAlignmentIndex } from './utils';
+import type { AlignmentMatrixControlIconProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+const BASE_SIZE = 24;
+const GRID_CELL_SIZE = 7;
+const GRID_PADDING = ( BASE_SIZE - 3 * GRID_CELL_SIZE ) / 2;
+const DOT_SIZE = 2;
+const DOT_SIZE_SELECTED = 4;
+
+function AlignmentMatrixControlIcon( {
+	className,
+	disablePointerEvents = true,
+	size,
+	width,
+	height,
+	style = {},
+	value = 'center',
+	...props
+}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {
+	return (
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox={ `0 0 ${ BASE_SIZE } ${ BASE_SIZE }` }
+			width={ size ?? width ?? BASE_SIZE }
+			height={ size ?? height ?? BASE_SIZE }
+			role="presentation"
+			className={ clsx(
+				'component-alignment-matrix-control-icon',
+				className
+			) }
+			style={ {
+				pointerEvents: disablePointerEvents ? 'none' : undefined,
+				...style,
+			} }
+			{ ...props }
+		>
+			{ ALIGNMENTS.map( ( align, index ) => {
+				const dotSize =
+					getAlignmentIndex( value ) === index
+						? DOT_SIZE_SELECTED
+						: DOT_SIZE;
+
+				return (
+					<Rect
+						key={ align }
+						x={
+							GRID_PADDING +
+							( index % 3 ) * GRID_CELL_SIZE +
+							( GRID_CELL_SIZE - dotSize ) / 2
+						}
+						y={
+							GRID_PADDING +
+							Math.floor( index / 3 ) * GRID_CELL_SIZE +
+							( GRID_CELL_SIZE - dotSize ) / 2
+						}
+						width={ dotSize }
+						height={ dotSize }
+						fill="currentColor"
+					/>
+				);
+			} ) }
+		</SVG>
+	);
+}
+
+export default AlignmentMatrixControlIcon;
diff --git a/packages/components/src/alignment-matrix-control/index.js b/packages/components/src/alignment-matrix-control/index.js
deleted file mode 100644
index 44dbe33d95a94d..00000000000000
--- a/packages/components/src/alignment-matrix-control/index.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import { Composite, CompositeGroup, useCompositeState } from '../composite';
-import { Root, Row } from './styles/alignment-matrix-control-styles';
-import AlignmentMatrixControlIcon from './icon';
-import { GRID, getItemId } from './utils';
-
-const noop = () => {};
-
-function useBaseId( id ) {
-	const instanceId = useInstanceId(
-		AlignmentMatrixControl,
-		'alignment-matrix-control'
-	);
-
-	return id || instanceId;
-}
-
-export default function AlignmentMatrixControl( {
-	className,
-	id,
-	label = __( 'Alignment Matrix Control' ),
-	defaultValue = 'center center',
-	value,
-	onChange = noop,
-	width = 92,
-	...props
-} ) {
-	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
-	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
-
-	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
-		rtl: isRTL(),
-	} );
-
-	const handleOnChange = ( nextValue ) => {
-		onChange( nextValue );
-	};
-
-	const { setCurrentId } = composite;
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, setCurrentId, baseId ] );
-
-	const classes = classnames(
-		'component-alignment-matrix-control',
-		className
-	);
-
-	return (
-		<Composite
-			{ ...props }
-			{ ...composite }
-			aria-label={ label }
-			as={ Root }
-			className={ classes }
-			role="grid"
-			size={ width }
-		>
-			{ GRID.map( ( cells, index ) => (
-				<CompositeGroup
-					{ ...composite }
-					as={ Row }
-					role="row"
-					key={ index }
-				>
-					{ cells.map( ( cell ) => {
-						const cellId = getItemId( baseId, cell );
-						const isActive = composite.currentId === cellId;
-
-						return (
-							<Cell
-								{ ...composite }
-								id={ cellId }
-								isActive={ isActive }
-								key={ cell }
-								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
-								tabIndex={ isActive ? 0 : -1 }
-							/>
-						);
-					} ) }
-				</CompositeGroup>
-			) ) }
-		</Composite>
-	);
-}
-
-AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
new file mode 100644
index 00000000000000..0e3c23623883fc
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Cell from './cell';
+import { Composite } from '../composite';
+import { GridContainer, GridRow } from './styles';
+import AlignmentMatrixControlIcon from './icon';
+import { GRID, getItemId, getItemValue } from './utils';
+import type { WordPressComponentProps } from '../context';
+import type { AlignmentMatrixControlProps } from './types';
+
+function UnforwardedAlignmentMatrixControl( {
+	className,
+	id,
+	label = __( 'Alignment Matrix Control' ),
+	defaultValue = 'center center',
+	value,
+	onChange,
+	width = 92,
+	...props
+}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
+	const baseId = useInstanceId(
+		UnforwardedAlignmentMatrixControl,
+		'alignment-matrix-control',
+		id
+	);
+
+	const setActiveId = useCallback<
+		NonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >
+	>(
+		( nextActiveId ) => {
+			const nextValue = getItemValue( baseId, nextActiveId );
+			if ( nextValue ) {
+				onChange?.( nextValue );
+			}
+		},
+		[ baseId, onChange ]
+	);
+
+	const classes = clsx( 'component-alignment-matrix-control', className );
+
+	return (
+		<Composite
+			defaultActiveId={ getItemId( baseId, defaultValue ) }
+			activeId={ getItemId( baseId, value ) }
+			setActiveId={ setActiveId }
+			rtl={ isRTL() }
+			render={
+				<GridContainer
+					{ ...props }
+					aria-label={ label }
+					className={ classes }
+					id={ baseId }
+					role="grid"
+					size={ width }
+				/>
+			}
+		>
+			{ GRID.map( ( cells, index ) => (
+				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+					{ cells.map( ( cell ) => (
+						<Cell
+							id={ getItemId( baseId, cell ) }
+							key={ cell }
+							value={ cell }
+						/>
+					) ) }
+				</Composite.Row>
+			) ) }
+		</Composite>
+	);
+}
+
+/**
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const AlignmentMatrixControl = Object.assign(
+	UnforwardedAlignmentMatrixControl,
+	{
+		/**
+		 * Render an alignment matrix as an icon.
+		 *
+		 * ```jsx
+		 * import { AlignmentMatrixControl } from '@wordpress/components';
+		 *
+		 * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+		 * ```
+		 */
+		Icon: Object.assign( AlignmentMatrixControlIcon, {
+			displayName: 'AlignmentMatrixControl.Icon',
+		} ),
+	}
+);
+
+export default AlignmentMatrixControl;
diff --git a/packages/components/src/alignment-matrix-control/stories/index.js b/packages/components/src/alignment-matrix-control/stories/index.js
deleted file mode 100644
index babdd47c1e95f4..00000000000000
--- a/packages/components/src/alignment-matrix-control/stories/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { Icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import AlignmentMatrixControl from '../';
-import { ALIGNMENTS } from '../utils';
-import { HStack } from '../../h-stack';
-
-export default {
-	title: 'Components (Experimental)/AlignmentMatrixControl',
-	component: AlignmentMatrixControl,
-	subcomponents: {
-		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
-	},
-	argTypes: {
-		defaultValue: { options: ALIGNMENTS },
-		onChange: { action: 'onChange', control: { type: null } },
-		label: { control: { type: 'text' } },
-		width: { control: { type: 'number' } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const Template = ( { defaultValue, onChange, ...props } ) => {
-	const [ value, setValue ] = useState();
-
-	// Convenience handler for Canvas view so changes are reflected
-	useEffect( () => {
-		setValue( defaultValue );
-	}, [ defaultValue ] );
-
-	return (
-		<AlignmentMatrixControl
-			{ ...props }
-			onChange={ ( ...changeArgs ) => {
-				setValue( ...changeArgs );
-				onChange( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
-export const Default = Template.bind( {} );
-
-export const IconSubcomponent = () => {
-	return (
-		<HStack justify="flex-start">
-			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon size={ 24 } value="top left" />
-				}
-			/>
-			<Icon
-				icon={
-					<AlignmentMatrixControl.Icon
-						size={ 24 }
-						value="center center"
-					/>
-				}
-			/>
-		</HStack>
-	);
-};
diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..e04d8b6690fe8c
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import AlignmentMatrixControl from '..';
+import { HStack } from '../../h-stack';
+import type { AlignmentMatrixControlProps } from '../types';
+
+const meta: Meta< typeof AlignmentMatrixControl > = {
+	title: 'Components/AlignmentMatrixControl',
+	component: AlignmentMatrixControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
+	argTypes: {
+		onChange: { control: false },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
+	defaultValue,
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] =
+		useState< AlignmentMatrixControlProps[ 'value' ] >();
+
+	return (
+		<AlignmentMatrixControl
+			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+export const Default = Template.bind( {} );
+
+export const IconSubcomponent = () => {
+	return (
+		<HStack justify="flex-start">
+			<Icon icon={ <AlignmentMatrixControl.Icon value="top left" /> } />
+			<Icon
+				icon={ <AlignmentMatrixControl.Icon value="center center" /> }
+			/>
+		</HStack>
+	);
+};
diff --git a/packages/components/src/alignment-matrix-control/styles.ts b/packages/components/src/alignment-matrix-control/styles.ts
new file mode 100644
index 00000000000000..73a20c2a37564b
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/styles.ts
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+import type {
+	AlignmentMatrixControlProps,
+	AlignmentMatrixControlIconProps,
+} from './types';
+
+// Grid structure
+
+const rootBase = ( { size = 92 } ) => css`
+	direction: ltr;
+
+	display: grid;
+	grid-template-columns: repeat( 3, 1fr );
+	grid-template-rows: repeat( 3, 1fr );
+
+	box-sizing: border-box;
+	width: ${ size }px;
+	aspect-ratio: 1;
+
+	border-radius: ${ CONFIG.radiusMedium };
+	outline: none;
+`;
+
+export const GridContainer = styled.div< {
+	size?: AlignmentMatrixControlProps[ 'width' ];
+	disablePointerEvents?: AlignmentMatrixControlIconProps[ 'disablePointerEvents' ];
+} >`
+	${ rootBase }
+
+	border: 1px solid transparent;
+
+	${ ( props ) =>
+		props.disablePointerEvents
+			? css``
+			: css`
+					cursor: pointer;
+			  ` }
+`;
+
+export const GridRow = styled.div`
+	grid-column: 1 / -1;
+
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat( 3, 1fr );
+`;
+
+// Cell
+export const Cell = styled.span`
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	appearance: none;
+	border: none;
+	outline: none;
+`;
+
+const POINT_SIZE = 6;
+export const Point = styled.span`
+	display: block;
+	contain: strict;
+
+	box-sizing: border-box;
+	width: ${ POINT_SIZE }px;
+	aspect-ratio: 1;
+
+	margin: auto;
+
+	color: ${ COLORS.theme.gray[ 400 ] };
+
+	/* Use border instead of background color so that the point shows
+	in Windows High Contrast Mode */
+	border: ${ POINT_SIZE / 2 }px solid currentColor;
+
+	/* Highlight active item */
+	${ Cell }[data-active-item] & {
+		color: ${ COLORS.gray[ 900 ] };
+		transform: scale( calc( 5 / 3 ) );
+	}
+
+	/* Hover styles for non-active items */
+	${ Cell }:not([data-active-item]):hover & {
+		color: ${ COLORS.theme.accent };
+	}
+
+	/* Show an outline only when interacting with keyboard */
+	${ Cell }[data-focus-visible] & {
+		outline: 1px solid ${ COLORS.theme.accent };
+		outline-offset: 1px;
+	}
+
+	@media not ( prefers-reduced-motion ) {
+		transition-property: color, transform;
+		transition-duration: 120ms;
+		transition-timing-function: linear;
+	}
+`;
diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
deleted file mode 100644
index 5333e9b775625b..00000000000000
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import {
-	rootBase,
-	pointBase,
-	Cell as CellBase,
-} from './alignment-matrix-control-styles';
-
-const rootSize = () => {
-	const padding = 1.5;
-	const size = 24;
-
-	return css( {
-		gridTemplateRows: `repeat( 3, calc( ${ size - padding * 2 }px / 3))`,
-		padding,
-		maxHeight: size,
-		maxWidth: size,
-	} );
-};
-
-const rootPointerEvents = ( { disablePointerEvents } ) => {
-	return css( {
-		pointerEvents: disablePointerEvents ? 'none' : null,
-	} );
-};
-
-export const Wrapper = styled.div`
-	box-sizing: border-box;
-	padding: 2px;
-`;
-
-export const Root = styled.div`
-	transform-origin: top left;
-	height: 100%;
-	width: 100%;
-
-	${ rootBase };
-	${ rootSize };
-	${ rootPointerEvents };
-`;
-
-const pointActive = ( { isActive } ) => {
-	const boxShadow = isActive ? `0 0 0 1px currentColor` : null;
-
-	return css`
-		box-shadow: ${ boxShadow };
-		color: currentColor;
-
-		*:hover > & {
-			color: currentColor;
-		}
-	`;
-};
-
-export const Point = styled.span`
-	height: 2px;
-	width: 2px;
-	${ pointBase };
-	${ pointActive };
-`;
-
-export const Cell = CellBase;
diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
deleted file mode 100644
index f16ec53827403f..00000000000000
--- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS, reduceMotion } from '../../utils';
-
-export const rootBase = () => {
-	return css`
-		border-radius: 2px;
-		box-sizing: border-box;
-		direction: ltr;
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		outline: none;
-	`;
-};
-
-const rootSize = ( { size = 92 } ) => {
-	return css`
-		grid-template-rows: repeat( 3, calc( ${ size }px / 3 ) );
-		width: ${ size }px;
-	`;
-};
-
-export const Root = styled.div`
-	${ rootBase };
-
-	border: 1px solid transparent;
-	cursor: pointer;
-	grid-template-columns: auto;
-
-	${ rootSize };
-`;
-
-export const Row = styled.div`
-	box-sizing: border-box;
-	display: grid;
-	grid-template-columns: repeat( 3, 1fr );
-`;
-
-const pointActive = ( { isActive } ) => {
-	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
-	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ];
-	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
-
-	return css`
-		box-shadow: ${ boxShadow };
-		color: ${ pointColor };
-
-		*:hover > & {
-			color: ${ pointColorHover };
-		}
-	`;
-};
-
-export const pointBase = ( props ) => {
-	return css`
-		background: currentColor;
-		box-sizing: border-box;
-		display: grid;
-		margin: auto;
-		transition: all 120ms linear;
-
-		${ reduceMotion( 'transition' ) }
-		${ pointActive( props ) }
-	`;
-};
-
-export const Point = styled.span`
-	height: 6px;
-	width: 6px;
-	${ pointBase }
-`;
-
-export const Cell = styled.span`
-	appearance: none;
-	border: none;
-	box-sizing: border-box;
-	margin: 0;
-	display: flex;
-	position: relative;
-	outline: none;
-	align-items: center;
-	justify-content: center;
-	padding: 0;
-`;
diff --git a/packages/components/src/alignment-matrix-control/test/index.js b/packages/components/src/alignment-matrix-control/test/index.js
deleted file mode 100644
index 638d8acb96ad58..00000000000000
--- a/packages/components/src/alignment-matrix-control/test/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, within } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import AlignmentMatrixControl from '../';
-
-const getControl = () => {
-	return screen.getByRole( 'grid' );
-};
-
-const getCell = ( name ) => {
-	return within( getControl() ).getByRole( 'gridcell', { name } );
-};
-
-describe( 'AlignmentMatrixControl', () => {
-	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <AlignmentMatrixControl /> );
-
-			expect( getControl() ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Change value', () => {
-		const alignments = [ 'center left', 'center center', 'bottom center' ];
-
-		it.each( alignments )(
-			'should change value on %s cell click',
-			( alignment ) => {
-				const spy = jest.fn();
-
-				render(
-					<AlignmentMatrixControl value="center" onChange={ spy } />
-				);
-
-				getCell( alignment ).focus();
-
-				expect( spy ).toHaveBeenCalledWith( alignment );
-			}
-		);
-	} );
-} );
diff --git a/packages/components/src/alignment-matrix-control/test/index.tsx b/packages/components/src/alignment-matrix-control/test/index.tsx
new file mode 100644
index 00000000000000..a820b69b26c8ff
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/test/index.tsx
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { press, click } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import AlignmentMatrixControl from '..';
+
+const getControl = () => {
+	return screen.getByRole( 'grid' );
+};
+
+const getCell = ( name: string ) => {
+	return within( getControl() ).getByRole( 'gridcell', { name } );
+};
+
+const renderAndInitCompositeStore = async (
+	jsx: JSX.Element,
+	focusedCell = 'center center'
+) => {
+	const view = render( jsx );
+	await waitFor( () => {
+		expect( getCell( focusedCell ) ).toHaveAttribute( 'tabindex', '0' );
+	} );
+	return view;
+};
+
+describe( 'AlignmentMatrixControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', async () => {
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
+
+			expect( getControl() ).toBeInTheDocument();
+		} );
+
+		it( 'should be centered by default', async () => {
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
+
+			await press.Tab();
+
+			expect( getCell( 'center center' ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'Should change value', () => {
+		describe( 'with Mouse', () => {
+			describe( 'on cell click', () => {
+				it.each( [
+					'top left',
+					'top center',
+					'top right',
+					'center left',
+					'center right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				] )( '%s', async ( alignment ) => {
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
+
+					const cell = getCell( alignment );
+
+					await click( cell );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( alignment );
+				} );
+
+				it( 'unless already focused', async () => {
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
+
+					const cell = getCell( 'center center' );
+
+					await click( cell );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).not.toHaveBeenCalled();
+				} );
+			} );
+		} );
+
+		describe( 'with Keyboard', () => {
+			describe( 'on arrow press', () => {
+				it.each( [
+					[ 'ArrowUp', 'top center' ],
+					[ 'ArrowLeft', 'center left' ],
+					[ 'ArrowDown', 'bottom center' ],
+					[ 'ArrowRight', 'center right' ],
+				] as const )( '%s', async ( keyRef, cellRef ) => {
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					await press.Tab();
+					await press[ keyRef ]();
+
+					expect( getCell( cellRef ) ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+
+			describe( 'but not at at edge', () => {
+				it.each( [
+					[ 'ArrowUp', 'top left' ],
+					[ 'ArrowLeft', 'top left' ],
+					[ 'ArrowDown', 'bottom right' ],
+					[ 'ArrowRight', 'bottom right' ],
+				] as const )( '%s', async ( keyRef, cellRef ) => {
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					const cell = getCell( cellRef );
+					await click( cell );
+					await press[ keyRef ]();
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/alignment-matrix-control/types.ts b/packages/components/src/alignment-matrix-control/types.ts
new file mode 100644
index 00000000000000..e93f412c1f4721
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/types.ts
@@ -0,0 +1,67 @@
+export type AlignmentMatrixControlValue =
+	| 'top left'
+	| 'top center'
+	| 'top right'
+	| 'center left'
+	| 'center'
+	| 'center center'
+	| 'center right'
+	| 'bottom left'
+	| 'bottom center'
+	| 'bottom right';
+
+export type AlignmentMatrixControlProps = {
+	/**
+	 * Accessible label. If provided, sets the `aria-label` attribute of the
+	 * underlying `grid` widget.
+	 *
+	 * @default 'Alignment Matrix Control'
+	 */
+	label?: string;
+	/**
+	 * If provided, sets the default alignment value.
+	 *
+	 * @default 'center center'
+	 */
+	defaultValue?: AlignmentMatrixControlValue;
+	/**
+	 * The current alignment value.
+	 */
+	value?: AlignmentMatrixControlValue;
+	/**
+	 * A function that receives the updated alignment value.
+	 */
+	onChange?: ( newValue: AlignmentMatrixControlValue ) => void;
+	/**
+	 * If provided, sets the width of the control.
+	 *
+	 * @default 92
+	 */
+	width?: number;
+};
+
+export type AlignmentMatrixControlIconProps = Pick<
+	AlignmentMatrixControlProps,
+	'value'
+> & {
+	/**
+	 * If `true`, disables pointer events on the icon.
+	 * @default true
+	 */
+	disablePointerEvents?: boolean;
+	/**
+	 * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`
+	 * component instead_
+	 *
+	 * The size of the icon.
+	 *
+	 * @deprecated
+	 * @ignore
+	 * @default 24
+	 */
+	size?: number;
+};
+
+export type AlignmentMatrixControlCellProps = {
+	value: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;
+};
diff --git a/packages/components/src/alignment-matrix-control/utils.js b/packages/components/src/alignment-matrix-control/utils.js
deleted file mode 100644
index 4934e422d196cb..00000000000000
--- a/packages/components/src/alignment-matrix-control/utils.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const GRID = [
-	[ 'top left', 'top center', 'top right' ],
-	[ 'center left', 'center center', 'center right' ],
-	[ 'bottom left', 'bottom center', 'bottom right' ],
-];
-
-// Stored as map as i18n __() only accepts strings (not variables)
-export const ALIGNMENT_LABEL = {
-	'top left': __( 'Top Left' ),
-	'top center': __( 'Top Center' ),
-	'top right': __( 'Top Right' ),
-	'center left': __( 'Center Left' ),
-	'center center': __( 'Center Center' ),
-	'center right': __( 'Center Right' ),
-	'bottom left': __( 'Bottom Left' ),
-	'bottom center': __( 'Bottom Center' ),
-	'bottom right': __( 'Bottom Right' ),
-};
-
-// Transforms GRID into a flat Array of values.
-export const ALIGNMENTS = GRID.flat();
-
-/**
- * Parses and transforms an incoming value to better match the alignment values
- *
- * @param {string} value An alignment value to parse.
- *
- * @return {string} The parsed value.
- */
-export function transformValue( value ) {
-	const nextValue = value === 'center' ? 'center center' : value;
-
-	return nextValue.replace( '-', ' ' );
-}
-
-/**
- * Creates an item ID based on a prefix ID and an alignment value.
- *
- * @param {string} prefixId An ID to prefix.
- * @param {string} value    An alignment value.
- *
- * @return {string} The item id.
- */
-export function getItemId( prefixId, value ) {
-	const valueId = transformValue( value ).replace( ' ', '-' );
-
-	return `${ prefixId }-${ valueId }`;
-}
-
-/**
- * Retrieves the alignment index from a value.
- *
- * @param {string} alignment Value to check.
- *
- * @return {number} The index of a matching alignment.
- */
-export function getAlignmentIndex( alignment = 'center' ) {
-	const item = transformValue( alignment ).replace( '-', ' ' );
-	const index = ALIGNMENTS.indexOf( item );
-
-	return index > -1 ? index : undefined;
-}
diff --git a/packages/components/src/alignment-matrix-control/utils.tsx b/packages/components/src/alignment-matrix-control/utils.tsx
new file mode 100644
index 00000000000000..e206e197c25558
--- /dev/null
+++ b/packages/components/src/alignment-matrix-control/utils.tsx
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { AlignmentMatrixControlValue } from './types';
+
+export const GRID: AlignmentMatrixControlValue[][] = [
+	[ 'top left', 'top center', 'top right' ],
+	[ 'center left', 'center center', 'center right' ],
+	[ 'bottom left', 'bottom center', 'bottom right' ],
+];
+
+// Stored as map as i18n __() only accepts strings (not variables)
+export const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {
+	'top left': __( 'Top Left' ),
+	'top center': __( 'Top Center' ),
+	'top right': __( 'Top Right' ),
+	'center left': __( 'Center Left' ),
+	'center center': __( 'Center' ),
+	center: __( 'Center' ),
+	'center right': __( 'Center Right' ),
+	'bottom left': __( 'Bottom Left' ),
+	'bottom center': __( 'Bottom Center' ),
+	'bottom right': __( 'Bottom Right' ),
+};
+
+// Transforms GRID into a flat Array of values.
+export const ALIGNMENTS = GRID.flat();
+
+/**
+ * Normalizes and transforms an incoming value to better match the alignment values
+ *
+ * @param value An alignment value to parse.
+ *
+ * @return The parsed value.
+ */
+function normalize( value?: string | null ) {
+	const normalized = value === 'center' ? 'center center' : value;
+
+	// Strictly speaking, this could be `string | null | undefined`,
+	// but will be validated shortly, so we're typecasting to an
+	// `AlignmentMatrixControlValue` to keep TypeScript happy.
+	const transformed = normalized?.replace(
+		'-',
+		' '
+	) as AlignmentMatrixControlValue;
+
+	return ALIGNMENTS.includes( transformed ) ? transformed : undefined;
+}
+
+/**
+ * Creates an item ID based on a prefix ID and an alignment value.
+ *
+ * @param prefixId An ID to prefix.
+ * @param value    An alignment value.
+ *
+ * @return The item id.
+ */
+export function getItemId(
+	prefixId: string,
+	value?: AlignmentMatrixControlValue
+) {
+	const normalized = normalize( value );
+	if ( ! normalized ) {
+		return;
+	}
+
+	const id = normalized.replace( ' ', '-' );
+	return `${ prefixId }-${ id }`;
+}
+
+/**
+ * Extracts an item value from its ID
+ *
+ * @param prefixId An ID prefix to remove
+ * @param id       An item ID
+ * @return         The item value
+ */
+export function getItemValue( prefixId: string, id?: string | null ) {
+	const value = id?.replace( prefixId + '-', '' );
+	return normalize( value );
+}
+
+/**
+ * Retrieves the alignment index from a value.
+ *
+ * @param alignment Value to check.
+ *
+ * @return The index of a matching alignment.
+ */
+export function getAlignmentIndex(
+	alignment: AlignmentMatrixControlValue = 'center'
+) {
+	const normalized = normalize( alignment );
+	if ( ! normalized ) {
+		return undefined;
+	}
+
+	const index = ALIGNMENTS.indexOf( normalized );
+	return index > -1 ? index : undefined;
+}
diff --git a/packages/components/src/angle-picker-control/README.md b/packages/components/src/angle-picker-control/README.md
index c4b63e56ed044a..d9389c6564338f 100644
--- a/packages/components/src/angle-picker-control/README.md
+++ b/packages/components/src/angle-picker-control/README.md
@@ -1,49 +1,56 @@
 # AnglePickerControl
 
-AnglePickerControl is a React component to render a UI that allows users to pick an angle.
-Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-anglepickercontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+`AnglePickerControl` is a React component to render a UI that allows users to
+pick an angle. Users can choose an angle in a visual UI with the mouse by
+dragging an angle indicator inside a circle or by directly inserting the
+desired angle in a text field.
 
 ```jsx
 import { useState } from '@wordpress/element';
 import { AnglePickerControl } from '@wordpress/components';
 
-const MyAnglePicker = () => {
-	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } __nextHasNoMarginBottom />;
-};
+function Example() {
+  const [ angle, setAngle ] = useState( 0 );
+  return (
+    <AnglePickerControl
+      value={ angle }
+      onChange={ setAngle }
+    </>
+  );
+}
 ```
-
 ## Props
 
-The component accepts the following props.
-
-### label
+### `as`
 
-Label to use for the angle picker. If not set the a translated label "Angle" is used.
+The HTML element or React component to render the component as.
 
--   Type: `String`
--   Required: No
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | ...`
+ - Required: No
 
-### value
+### `label`
 
-The current value of the input. The value represents an angle in degrees and should be a value between 0 and 360.
+Label to use for the angle picker.
 
--   Type: `Number`
--   Required: Yes
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Angle' )`
 
-### onChange
+### `onChange`
 
 A function that receives the new value of the input.
 
--   Type: `function`
--   Required: Yes
+ - Type: `(value: number) => void`
+ - Required: Yes
 
-### __nextHasNoMarginBottom
+### `value`
 
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+The current value of the input. The value represents an angle in degrees
+and should be a value between 0 and 360.
 
--   Type: `boolean`
--   Required: No
--   Default: `false`
\ No newline at end of file
+ - Type: `string | number`
+ - Required: Yes
diff --git a/packages/components/src/angle-picker-control/angle-circle.js b/packages/components/src/angle-picker-control/angle-circle.js
deleted file mode 100644
index 750530c046d071..00000000000000
--- a/packages/components/src/angle-picker-control/angle-circle.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import {
-	CircleRoot,
-	CircleIndicatorWrapper,
-	CircleIndicator,
-} from './styles/angle-picker-control-styles';
-
-function AngleCircle( { value, onChange, ...props } ) {
-	const angleCircleRef = useRef();
-	const angleCircleCenter = useRef();
-	const previousCursorValue = useRef();
-
-	const setAngleCircleCenter = () => {
-		const rect = angleCircleRef.current.getBoundingClientRect();
-		angleCircleCenter.current = {
-			x: rect.x + rect.width / 2,
-			y: rect.y + rect.height / 2,
-		};
-	};
-
-	const changeAngleToPosition = ( event ) => {
-		const { x: centerX, y: centerY } = angleCircleCenter.current;
-		// Prevent (drag) mouse events from selecting and accidentally
-		// triggering actions from other elements.
-		event.preventDefault();
-		// Input control needs to lose focus and by preventDefault above, it doesn't.
-		event.target.focus();
-		onChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );
-	};
-
-	const { startDrag, isDragging } = useDragging( {
-		onDragStart: ( event ) => {
-			setAngleCircleCenter();
-			changeAngleToPosition( event );
-		},
-		onDragMove: changeAngleToPosition,
-		onDragEnd: changeAngleToPosition,
-	} );
-
-	useEffect( () => {
-		if ( isDragging ) {
-			if ( previousCursorValue.current === undefined ) {
-				previousCursorValue.current = document.body.style.cursor;
-			}
-			document.body.style.cursor = 'grabbing';
-		} else {
-			document.body.style.cursor = previousCursorValue.current || null;
-			previousCursorValue.current = undefined;
-		}
-	}, [ isDragging ] );
-
-	return (
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		<CircleRoot
-			ref={ angleCircleRef }
-			onMouseDown={ startDrag }
-			className="components-angle-picker-control__angle-circle"
-			style={ isDragging ? { cursor: 'grabbing' } : undefined }
-			{ ...props }
-		>
-			<CircleIndicatorWrapper
-				style={
-					value ? { transform: `rotate(${ value }deg)` } : undefined
-				}
-				className="components-angle-picker-control__angle-circle-indicator-wrapper"
-				tabIndex={ -1 }
-			>
-				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
-			</CircleIndicatorWrapper>
-		</CircleRoot>
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
-	);
-}
-
-function getAngle( centerX, centerY, pointX, pointY ) {
-	const y = pointY - centerY;
-	const x = pointX - centerX;
-
-	const angleInRadians = Math.atan2( y, x );
-	const angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;
-	if ( angleInDeg < 0 ) {
-		return 360 + angleInDeg;
-	}
-	return angleInDeg;
-}
-
-export default AngleCircle;
diff --git a/packages/components/src/angle-picker-control/angle-circle.tsx b/packages/components/src/angle-picker-control/angle-circle.tsx
new file mode 100644
index 00000000000000..52a2d2838a1f26
--- /dev/null
+++ b/packages/components/src/angle-picker-control/angle-circle.tsx
@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CircleRoot,
+	CircleIndicatorWrapper,
+	CircleIndicator,
+} from './styles/angle-picker-control-styles';
+
+import type { WordPressComponentProps } from '../context';
+import type { AngleCircleProps } from './types';
+
+type UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];
+type UseDraggingCallbackEvent =
+	| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]
+	| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]
+	| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];
+
+function AngleCircle( {
+	value,
+	onChange,
+	...props
+}: WordPressComponentProps< AngleCircleProps, 'div' > ) {
+	const angleCircleRef = useRef< HTMLDivElement | null >( null );
+	const angleCircleCenterRef = useRef<
+		{ x: number; y: number } | undefined
+	>();
+	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+
+	const setAngleCircleCenter = () => {
+		if ( angleCircleRef.current === null ) {
+			return;
+		}
+
+		const rect = angleCircleRef.current.getBoundingClientRect();
+		angleCircleCenterRef.current = {
+			x: rect.x + rect.width / 2,
+			y: rect.y + rect.height / 2,
+		};
+	};
+
+	const changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {
+		if ( event === undefined ) {
+			return;
+		}
+
+		// Prevent (drag) mouse events from selecting and accidentally
+		// triggering actions from other elements.
+		event.preventDefault();
+		// Input control needs to lose focus and by preventDefault above, it doesn't.
+		( event.target as HTMLDivElement | null )?.focus();
+
+		if (
+			angleCircleCenterRef.current !== undefined &&
+			onChange !== undefined
+		) {
+			const { x: centerX, y: centerY } = angleCircleCenterRef.current;
+			onChange(
+				getAngle( centerX, centerY, event.clientX, event.clientY )
+			);
+		}
+	};
+
+	const { startDrag, isDragging } = useDragging( {
+		onDragStart: ( event ) => {
+			setAngleCircleCenter();
+			changeAngleToPosition( event );
+		},
+		onDragMove: changeAngleToPosition,
+		onDragEnd: changeAngleToPosition,
+	} );
+
+	useEffect( () => {
+		if ( isDragging ) {
+			if ( previousCursorValueRef.current === undefined ) {
+				previousCursorValueRef.current = document.body.style.cursor;
+			}
+			document.body.style.cursor = 'grabbing';
+		} else {
+			document.body.style.cursor = previousCursorValueRef.current || '';
+			previousCursorValueRef.current = undefined;
+		}
+	}, [ isDragging ] );
+
+	return (
+		<CircleRoot
+			ref={ angleCircleRef }
+			onMouseDown={ startDrag }
+			className="components-angle-picker-control__angle-circle"
+			{ ...props }
+		>
+			<CircleIndicatorWrapper
+				style={
+					value ? { transform: `rotate(${ value }deg)` } : undefined
+				}
+				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				tabIndex={ -1 }
+			>
+				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
+			</CircleIndicatorWrapper>
+		</CircleRoot>
+	);
+}
+
+function getAngle(
+	centerX: number,
+	centerY: number,
+	pointX: number,
+	pointY: number
+) {
+	const y = pointY - centerY;
+	const x = pointX - centerX;
+
+	const angleInRadians = Math.atan2( y, x );
+	const angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;
+	if ( angleInDeg < 0 ) {
+		return 360 + angleInDeg;
+	}
+	return angleInDeg;
+}
+
+export default AngleCircle;
diff --git a/packages/components/src/angle-picker-control/docs-manifest.json b/packages/components/src/angle-picker-control/docs-manifest.json
new file mode 100644
index 00000000000000..bcbfb353ac9e32
--- /dev/null
+++ b/packages/components/src/angle-picker-control/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "AnglePickerControl",
+	"filePath": "./index.tsx"
+}
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
deleted file mode 100644
index 654b58b943756c..00000000000000
--- a/packages/components/src/angle-picker-control/index.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { FlexBlock, FlexItem } from '../flex';
-import NumberControl from '../number-control';
-import AngleCircle from './angle-circle';
-import { Root } from './styles/angle-picker-control-styles';
-import { space } from '../ui/utils/space';
-import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { COLORS } from '../utils/colors-values';
-
-export default function AnglePickerControl( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
-	className,
-	label = __( 'Angle' ),
-	onChange,
-	value,
-} ) {
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			'Bottom margin styles for wp.components.AnglePickerControl',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-			}
-		);
-	}
-
-	const handleOnNumberChange = ( unprocessedValue ) => {
-		const inputValue =
-			unprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;
-		onChange( inputValue );
-	};
-
-	const classes = classnames( 'components-angle-picker-control', className );
-
-	return (
-		<Root
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			className={ classes }
-			gap={ 4 }
-		>
-			<FlexBlock>
-				<NumberControl
-					label={ label }
-					className="components-angle-picker-control__input-field"
-					max={ 360 }
-					min={ 0 }
-					onChange={ handleOnNumberChange }
-					size="__unstable-large"
-					step="1"
-					value={ value }
-					spinControls="none"
-					suffix={
-						<Spacer
-							as={ Text }
-							marginBottom={ 0 }
-							marginRight={ space( 3 ) }
-							style={ {
-								color: COLORS.ui.theme,
-							} }
-						>
-							°
-						</Spacer>
-					}
-				/>
-			</FlexBlock>
-			<FlexItem
-				style={ {
-					marginBottom: space( 1 ),
-					marginTop: 'auto',
-				} }
-			>
-				<AngleCircle
-					aria-hidden="true"
-					value={ value }
-					onChange={ onChange }
-				/>
-			</FlexItem>
-		</Root>
-	);
-}
diff --git a/packages/components/src/angle-picker-control/index.tsx b/packages/components/src/angle-picker-control/index.tsx
new file mode 100644
index 00000000000000..9c436c36caf660
--- /dev/null
+++ b/packages/components/src/angle-picker-control/index.tsx
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Flex, FlexBlock } from '../flex';
+import { Spacer } from '../spacer';
+import NumberControl from '../number-control';
+import AngleCircle from './angle-circle';
+import { UnitText } from './styles/angle-picker-control-styles';
+
+import type { WordPressComponentProps } from '../context';
+import type { AnglePickerControlProps } from './types';
+
+function UnforwardedAnglePickerControl(
+	props: WordPressComponentProps< AnglePickerControlProps, 'div' >,
+	ref: ForwardedRef< any >
+) {
+	const {
+		className,
+		label = __( 'Angle' ),
+		onChange,
+		value,
+		...restProps
+	} = props;
+
+	const handleOnNumberChange = ( unprocessedValue: string | undefined ) => {
+		if ( onChange === undefined ) {
+			return;
+		}
+
+		const inputValue =
+			unprocessedValue !== undefined && unprocessedValue !== ''
+				? parseInt( unprocessedValue, 10 )
+				: 0;
+		onChange( inputValue );
+	};
+
+	const classes = clsx( 'components-angle-picker-control', className );
+
+	const unitText = <UnitText>°</UnitText>;
+	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
+		? [ unitText, null ]
+		: [ null, unitText ];
+
+	return (
+		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
+			<FlexBlock>
+				<NumberControl
+					__next40pxDefaultSize
+					label={ label }
+					className="components-angle-picker-control__input-field"
+					max={ 360 }
+					min={ 0 }
+					onChange={ handleOnNumberChange }
+					step="1"
+					value={ value }
+					spinControls="none"
+					prefix={ prefixedUnitText }
+					suffix={ suffixedUnitText }
+				/>
+			</FlexBlock>
+			<Spacer marginBottom="1" marginTop="auto">
+				<AngleCircle
+					aria-hidden="true"
+					value={ value }
+					onChange={ onChange }
+				/>
+			</Spacer>
+		</Flex>
+	);
+}
+
+/**
+ * `AnglePickerControl` is a React component to render a UI that allows users to
+ * pick an angle. Users can choose an angle in a visual UI with the mouse by
+ * dragging an angle indicator inside a circle or by directly inserting the
+ * desired angle in a text field.
+ *
+ * ```jsx
+ * import { useState } from '@wordpress/element';
+ * import { AnglePickerControl } from '@wordpress/components';
+ *
+ * function Example() {
+ *   const [ angle, setAngle ] = useState( 0 );
+ *   return (
+ *     <AnglePickerControl
+ *       value={ angle }
+ *       onChange={ setAngle }
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );
+
+export default AnglePickerControl;
diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
deleted file mode 100644
index 9418b1bcd60d0c..00000000000000
--- a/packages/components/src/angle-picker-control/stories/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import AnglePickerControl from '../';
-
-export default {
-	title: 'Components/AnglePickerControl',
-	component: AnglePickerControl,
-	argTypes: {
-		label: { control: { type: 'text' } },
-	},
-};
-
-const AnglePickerWithState = ( args ) => {
-	const [ angle, setAngle ] = useState();
-	return (
-		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
-	);
-};
-
-export const Default = AnglePickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-};
diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..d909f1ed3d205a
--- /dev/null
+++ b/packages/components/src/angle-picker-control/stories/index.story.tsx
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AnglePickerControl } from '..';
+
+const meta: Meta< typeof AnglePickerControl > = {
+	title: 'Components/AnglePickerControl',
+	component: AnglePickerControl,
+	argTypes: {
+		as: { control: false },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ angle, setAngle ] = useState< number >( 0 );
+
+	const handleChange = ( newValue: number ) => {
+		setAngle( newValue );
+		onChange( newValue );
+	};
+
+	return (
+		<AnglePickerControl
+			{ ...args }
+			value={ angle }
+			onChange={ handleChange }
+		/>
+	);
+};
+
+export const Default = AnglePickerWithState.bind( {} );
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
deleted file mode 100644
index 29b38850c055f4..00000000000000
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Flex } from '../../flex';
-import { COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
-import CONFIG from '../../utils/config-values';
-
-const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 3;
-
-const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
-	return ! __nextHasNoMarginBottom
-		? css`
-				margin-bottom: ${ space( 2 ) };
-		  `
-		: '';
-};
-
-export const Root = styled( Flex )`
-	${ deprecatedBottomMargin }
-`;
-
-export const CircleRoot = styled.div`
-	border-radius: 50%;
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
-	box-sizing: border-box;
-	cursor: grab;
-	height: ${ CIRCLE_SIZE }px;
-	overflow: hidden;
-	width: ${ CIRCLE_SIZE }px;
-`;
-
-export const CircleIndicatorWrapper = styled.div`
-	box-sizing: border-box;
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	:focus-visible {
-		outline: none;
-	}
-`;
-
-export const CircleIndicator = styled.div`
-	background: ${ COLORS.ui.theme };
-	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
-	bottom: 0;
-	box-sizing: border-box;
-	display: block;
-	height: 0px;
-	left: 0;
-	margin: auto;
-	position: absolute;
-	right: 0;
-	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 0px;
-`;
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
new file mode 100644
index 00000000000000..f57d60db0744b1
--- /dev/null
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../../utils';
+import { space } from '../../utils/space';
+import { Text } from '../../text';
+import CONFIG from '../../utils/config-values';
+
+const CIRCLE_SIZE = 32;
+const INNER_CIRCLE_SIZE = 6;
+
+export const CircleRoot = styled.div`
+	border-radius: ${ CONFIG.radiusRound };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+	box-sizing: border-box;
+	cursor: grab;
+	height: ${ CIRCLE_SIZE }px;
+	overflow: hidden;
+	width: ${ CIRCLE_SIZE }px;
+
+	:active {
+		cursor: grabbing;
+	}
+`;
+
+export const CircleIndicatorWrapper = styled.div`
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	:focus-visible {
+		outline: none;
+	}
+`;
+
+export const CircleIndicator = styled.div`
+	background: ${ COLORS.theme.accent };
+	border-radius: ${ CONFIG.radiusRound };
+	box-sizing: border-box;
+	display: block;
+	left: 50%;
+	top: 4px;
+	transform: translateX( -50% );
+	position: absolute;
+	width: ${ INNER_CIRCLE_SIZE }px;
+	height: ${ INNER_CIRCLE_SIZE }px;
+`;
+
+export const UnitText = styled( Text )`
+	color: ${ COLORS.theme.accent };
+	margin-right: ${ space( 3 ) };
+`;
diff --git a/packages/components/src/angle-picker-control/types.ts b/packages/components/src/angle-picker-control/types.ts
new file mode 100644
index 00000000000000..d453be1d6023bd
--- /dev/null
+++ b/packages/components/src/angle-picker-control/types.ts
@@ -0,0 +1,31 @@
+export type AnglePickerControlProps = {
+	/**
+	 * Start opting into the new margin-free styles that will become the default
+	 * in a future version.
+	 *
+	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Label to use for the angle picker.
+	 *
+	 * @default __( 'Angle' )
+	 */
+	label?: string;
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange: ( value: number ) => void;
+	/**
+	 * The current value of the input. The value represents an angle in degrees
+	 * and should be a value between 0 and 360.
+	 */
+	value: number | string;
+};
+
+export type AngleCircleProps = Pick<
+	AnglePickerControlProps,
+	'value' | 'onChange'
+>;
diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js
deleted file mode 100644
index 1ef1e272dbb453..00000000000000
--- a/packages/components/src/animate/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin
- * @typedef {'left' | 'right'} SlideInOrigin
- * @typedef {{ type: 'appear'; origin?: AppearOrigin }} AppearOptions
- * @typedef {{ type: 'slide-in'; origin?: SlideInOrigin }} SlideInOptions
- * @typedef {{ type: 'loading' }} LoadingOptions
- * @typedef {AppearOptions | SlideInOptions | LoadingOptions} GetAnimateOptions
- */
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param {GetAnimateOptions['type']} type The animation type
- * @return {'top' | 'left'} Default origin
- */
-function getDefaultOrigin( type ) {
-	return type === 'appear' ? 'top' : 'left';
-}
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @param {GetAnimateOptions} options
- *
- * @return {string | void} ClassName that applies the animations
- */
-export function getAnimateClassName( options ) {
-	if ( options.type === 'loading' ) {
-		return classnames( 'components-animate__loading' );
-	}
-
-	const { type, origin = getDefaultOrigin( type ) } = options;
-
-	if ( type === 'appear' ) {
-		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
-		return classnames( 'components-animate__appear', {
-			[ 'is-from-' + xAxis ]: xAxis !== 'center',
-			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
-		} );
-	}
-
-	if ( type === 'slide-in' ) {
-		return classnames(
-			'components-animate__slide-in',
-			'is-from-' + origin
-		);
-	}
-}
-
-// @ts-ignore Reason: Planned for deprecation
-export default function Animate( { type, options = {}, children } ) {
-	return children( {
-		className: getAnimateClassName( { type, ...options } ),
-	} );
-}
diff --git a/packages/components/src/animate/index.tsx b/packages/components/src/animate/index.tsx
new file mode 100644
index 00000000000000..e819020447bc9e
--- /dev/null
+++ b/packages/components/src/animate/index.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import type { AnimateProps, GetAnimateOptions } from './types';
+
+/**
+ * @param type The animation type
+ * @return Default origin
+ */
+function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
+	return type === 'appear' ? 'top' : 'left';
+}
+
+/**
+ * @param options
+ *
+ * @return ClassName that applies the animations
+ */
+export function getAnimateClassName( options: GetAnimateOptions ) {
+	if ( options.type === 'loading' ) {
+		return 'components-animate__loading';
+	}
+
+	const { type, origin = getDefaultOrigin( type ) } = options;
+
+	if ( type === 'appear' ) {
+		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
+		return clsx( 'components-animate__appear', {
+			[ 'is-from-' + xAxis ]: xAxis !== 'center',
+			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
+		} );
+	}
+
+	if ( type === 'slide-in' ) {
+		return clsx( 'components-animate__slide-in', 'is-from-' + origin );
+	}
+
+	return undefined;
+}
+
+/**
+ * Simple interface to introduce animations to components.
+ *
+ * ```jsx
+ * import { Animate, Notice } from '@wordpress/components';
+ *
+ * const MyAnimatedNotice = () => (
+ * 	<Animate type="slide-in" options={ { origin: 'top' } }>
+ * 		{ ( { className } ) => (
+ * 			<Notice className={ className } status="success">
+ * 				<p>Animation finished.</p>
+ * 			</Notice>
+ * 		) }
+ * 	</Animate>
+ * );
+ * ```
+ */
+export function Animate( { type, options = {}, children }: AnimateProps ) {
+	return children( {
+		className: getAnimateClassName( {
+			type,
+			...options,
+		} as GetAnimateOptions ),
+	} );
+}
+
+export default Animate;
diff --git a/packages/components/src/animate/stories/index.js b/packages/components/src/animate/stories/index.js
deleted file mode 100644
index 0f0e83b8cbcec8..00000000000000
--- a/packages/components/src/animate/stories/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import Animate from '../';
-import Notice from '../../notice';
-
-export default { title: 'Components/Animate', component: Animate };
-
-export const _default = () => (
-	<Animate>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-// Unexported helper for different origins.
-const Appear = ( { origin } ) => (
-	<Animate type="appear" options={ { origin } }>
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Appear animation. Origin: { origin }.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const appearTopLeft = () => <Appear origin="top left" />;
-export const appearTopRight = () => <Appear origin="top right" />;
-export const appearBottomLeft = () => <Appear origin="bottom left" />;
-export const appearBottomRight = () => <Appear origin="bottom right" />;
-
-export const loading = () => (
-	<Animate type="loading">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Loading animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);
-
-export const slideIn = () => (
-	<Animate type="slide-in">
-		{ ( { className } ) => (
-			<Notice className={ className } status="success">
-				<p>Slide-in animation.</p>
-			</Notice>
-		) }
-	</Animate>
-);
diff --git a/packages/components/src/animate/stories/index.story.tsx b/packages/components/src/animate/stories/index.story.tsx
new file mode 100644
index 00000000000000..c1798b503faa83
--- /dev/null
+++ b/packages/components/src/animate/stories/index.story.tsx
@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Animate } from '..';
+import Notice from '../../notice';
+
+const meta: Meta< typeof Animate > = {
+	title: 'Components/Utilities/Animate',
+	id: 'components-animate',
+	component: Animate,
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				No default animation. Use one of type = "appear", "slide-in", or
+				"loading".
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</p>
+		</Notice>
+	),
+};
+
+export const AppearTopLeft = Template.bind( {} );
+AppearTopLeft.args = {
+	type: 'appear',
+	options: { origin: 'top left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top left.</p>
+		</Notice>
+	),
+};
+export const AppearTopRight = Template.bind( {} );
+AppearTopRight.args = {
+	type: 'appear',
+	options: { origin: 'top right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top right.</p>
+		</Notice>
+	),
+};
+export const AppearBottomLeft = Template.bind( {} );
+AppearBottomLeft.args = {
+	type: 'appear',
+	options: { origin: 'bottom left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom left.</p>
+		</Notice>
+	),
+};
+export const AppearBottomRight = Template.bind( {} );
+AppearBottomRight.args = {
+	type: 'appear',
+	options: { origin: 'bottom right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom right.</p>
+		</Notice>
+	),
+};
+
+export const Loading = Template.bind( {} );
+Loading.args = {
+	type: 'loading',
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Loading animation.</p>
+		</Notice>
+	),
+};
+
+export const SlideIn = Template.bind( {} );
+SlideIn.args = {
+	type: 'slide-in',
+	options: { origin: 'left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Slide-in animation.</p>
+		</Notice>
+	),
+};
diff --git a/packages/components/src/animate/types.ts b/packages/components/src/animate/types.ts
new file mode 100644
index 00000000000000..aedebf34be70fe
--- /dev/null
+++ b/packages/components/src/animate/types.ts
@@ -0,0 +1,32 @@
+export type AppearOptions = {
+	type: 'appear';
+	origin?:
+		| 'top'
+		| 'top left'
+		| 'top right'
+		| 'middle'
+		| 'middle left'
+		| 'middle right'
+		| 'bottom'
+		| 'bottom left'
+		| 'bottom right';
+};
+type SlideInOptions = { type: 'slide-in'; origin?: 'left' | 'right' };
+type LoadingOptions = { type: 'loading'; origin?: never };
+type NoAnimationOptions = { type?: never; origin?: never };
+
+export type GetAnimateOptions =
+	| AppearOptions
+	| SlideInOptions
+	| LoadingOptions
+	| NoAnimationOptions;
+
+// Create a new type that and distributes the `Pick` operator separately to
+// every individual type of a union, thus preserving that same union.
+type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
+	? Pick< T, 'type' > & { options?: Omit< T, 'type' > }
+	: never;
+
+export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
+	children: ( props: { className?: string } ) => JSX.Element;
+};
diff --git a/packages/components/src/animation/index.js b/packages/components/src/animation/index.js
deleted file mode 100644
index ceeb89da7f3297..00000000000000
--- a/packages/components/src/animation/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so
- * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility
- * in trying animation options, we avoid making this public API.
- *
- * @see https://www.framer.com/docs/animation/
- */
-
-// eslint-disable-next-line no-restricted-imports
-export {
-	motion as __unstableMotion,
-	AnimatePresence as __unstableAnimatePresence,
-} from 'framer-motion';
diff --git a/packages/components/src/animation/index.tsx b/packages/components/src/animation/index.tsx
new file mode 100644
index 00000000000000..1b6796cd61ee9b
--- /dev/null
+++ b/packages/components/src/animation/index.tsx
@@ -0,0 +1,12 @@
+/**
+ * Framer Motion is used to create animated, interactive interfaces. The package is roughly ~30kb so
+ * this should ideally be loaded once across all Gutenberg packages. To give ourselves more flexibility
+ * in trying animation options, we avoid making this public API.
+ *
+ * @see https://www.framer.com/docs/animation/
+ */
+
+export {
+	motion as __unstableMotion,
+	AnimatePresence as __unstableAnimatePresence,
+} from 'framer-motion';
diff --git a/packages/components/src/autocomplete/README.md b/packages/components/src/autocomplete/README.md
index fb0cca339efca8..e2bc93fc476e00 100644
--- a/packages/components/src/autocomplete/README.md
+++ b/packages/components/src/autocomplete/README.md
@@ -2,6 +2,59 @@
 
 This component is used to provide autocompletion support for a child input component.
 
+## Props
+
+The following props are used to control the behavior of the component.
+
+### record
+
+The rich text value object the autocompleter is being applied to.
+
+-   Required: Yes
+-   Type: `RichTextValue`
+
+### onChange
+
+A function to be called when an option is selected to insert into the existing text.
+
+-   Required: Yes
+-   Type: `( value: string ) => void`
+
+### onReplace
+
+A function to be called when an option is selected to replace the existing text.
+
+-   Required: Yes
+-   Type: `( values: RichTextValue[] ) => void`
+
+### completers
+
+An array of all of the completers to apply to the current element.
+
+-   Required: Yes
+-   Type: `Array< WPCompleter >`
+
+### contentRef
+
+A ref containing the editable element that will serve as the anchor for `Autocomplete`'s `Popover`.
+
+-   Required: Yes
+-   `MutableRefObject< HTMLElement | undefined >`
+
+### children
+
+A function that returns nodes to be rendered within the Autocomplete.
+
+-   Required: Yes
+-   Type: `Function`
+
+### isSelected
+
+Whether or not the Autocomplete component is selected, and if its `Popover` should be displayed.
+
+- Required: Yes
+- Type: `Boolean`
+
 ## Autocompleters
 
 Autocompleters enable us to offer users options for completing text input. For example, Gutenberg includes a user autocompleter that provides a list of user names and completes a selection with a user mention like `@mary`.
@@ -99,57 +152,83 @@ Whether to apply debouncing for the autocompleter. Set to true to enable debounc
 
 ## Usage
 
-The following is a contrived completer for fresh fruit.
-
-```jsx
-import { Autocomplete } from '@wordpress/components';
-
-const MyAutocomplete = () => {
-	const autocompleters = [
-		{
-			name: 'fruit',
-			// The prefix that triggers this completer
-			triggerPrefix: '~',
-			// The option data
-			options: [
-				{ visual: '🍎', name: 'Apple', id: 1 },
-				{ visual: '🍊', name: 'Orange', id: 2 },
-				{ visual: '🍇', name: 'Grapes', id: 3 },
-			],
-			// Returns a label for an option like "🍊 Orange"
-			getOptionLabel: ( option ) => (
-				<span>
-					<span className="icon">{ option.visual }</span>
-					{ option.name }
-				</span>
-			),
-			// Declares that options should be matched by their name
-			getOptionKeywords: ( option ) => [ option.name ],
-			// Declares that the Grapes option is disabled
-			isOptionDisabled: ( option ) => option.name === 'Grapes',
-			// Declares completions should be inserted as abbreviations
-			getOptionCompletion: ( option ) => (
-				<abbr title={ option.name }>{ option.visual }</abbr>
-			),
-		},
-	];
-
-	return (
-		<div>
-			<Autocomplete completers={ autocompleters }>
-				{ ( { isExpanded, listBoxId, activeId } ) => (
-					<div
-						contentEditable
-						suppressContentEditableWarning
-						aria-autocomplete="list"
-						aria-expanded={ isExpanded }
-						aria-owns={ listBoxId }
-						aria-activedescendant={ activeId }
-					></div>
-				) }
-			</Autocomplete>
-			<p>Type ~ for triggering the autocomplete.</p>
-		</div>
+The `Autocomplete` component is not currently intended to be used as a standalone component. It is used by other packages to provide autocompletion support for the block editor.
+
+The block editor provides a separate, wrapped version of `Autocomplete` that supports the addition of custom completers via a filter.
+
+To implement your own completer in the block editor you will:
+1. Define the completer
+2. Write a callback that will add your completer to the list of existing completers
+3. Add a filter to the `editor.Autocomplete.completers` hook that will call your callback
+
+The following example will add a contrived "fruits" autocompleter to the block editor. Note that in the callback it's possible to limit this new completer to a specific block type. In this case, our "fruits" completer will only be available from the "core/paragraph" block type.
+
+```js
+( function () {
+	// Define the completer
+	const fruits = {
+		name: 'fruit',
+		// The prefix that triggers this completer
+		triggerPrefix: '~',
+		// The option data
+		options: [
+			{ visual: '🍎', name: 'Apple', id: 1 },
+			{ visual: '🍊', name: 'Orange', id: 2 },
+			{ visual: '🍇', name: 'Grapes', id: 3 },
+			{ visual: '🥭', name: 'Mango', id: 4 },
+			{ visual: '🍓', name: 'Strawberry', id: 5 },
+			{ visual: '🫐', name: 'Blueberry', id: 6 },
+			{ visual: '🍒', name: 'Cherry', id: 7 },
+		],
+		// Returns a label for an option like "🍊 Orange"
+		getOptionLabel: ( option ) => `${ option.visual } ${ option.name }`,
+		// Declares that options should be matched by their name
+		getOptionKeywords: ( option ) => [ option.name ],
+		// Declares that the Grapes option is disabled
+		isOptionDisabled: ( option ) => option.name === 'Grapes',
+		// Declares completions should be inserted as abbreviations
+		getOptionCompletion: ( option ) => option.visual,
+	};
+
+	// Define a callback that will add the custom completer to the list of completers
+	function appendTestCompleters( completers, blockName ) {
+		return blockName === 'core/paragraph'
+			? [ ...completers, fruits ]
+			: completers;
+	}
+
+	// Trigger our callback on the `editor.Autocomplete.completers` hook
+	wp.hooks.addFilter(
+		'editor.Autocomplete.completers',
+		'fruit-test/fruits',
+		appendTestCompleters,
+		11
 	);
-};
+} )();
+```
+
+Finally, enqueue your JavaScript file as you would any other, as in the following plugin example:
+
+```php
+<?php
+/**
+ * Plugin Name: Fruit Autocompleter
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_fruit_autocompleter_plugin_script() {
+	wp_enqueue_script(
+		'fruit-autocompleter',
+		plugins_url( '/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+		),
+	);
+}
+
+add_action( 'init', 'enqueue_fruit_autocompleter_plugin_script' );
 ```
diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
deleted file mode 100644
index 4ec217925e65c2..00000000000000
--- a/packages/components/src/autocomplete/autocompleter-ui.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useLayoutEffect, useRef, useEffect } from '@wordpress/element';
-import { useAnchor } from '@wordpress/rich-text';
-
-/**
- * Internal dependencies
- */
-import getDefaultUseItems from './get-default-use-items';
-import Button from '../button';
-import Popover from '../popover';
-
-export function getAutoCompleterUI( autocompleter ) {
-	const useItems = autocompleter.useItems
-		? autocompleter.useItems
-		: getDefaultUseItems( autocompleter );
-
-	function AutocompleterUI( {
-		filterValue,
-		instanceId,
-		listBoxId,
-		className,
-		selectedIndex,
-		onChangeOptions,
-		onSelect,
-		onReset,
-		reset,
-		value,
-		contentRef,
-	} ) {
-		const [ items ] = useItems( filterValue );
-		const popoverAnchor = useAnchor( {
-			editableContentElement: contentRef.current,
-			value,
-		} );
-
-		const popoverRef = useRef();
-
-		useOnClickOutside( popoverRef, reset );
-
-		useLayoutEffect( () => {
-			onChangeOptions( items );
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
-			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ items ] );
-
-		if ( ! items.length > 0 ) {
-			return null;
-		}
-
-		return (
-			<Popover
-				focusOnMount={ false }
-				onClose={ onReset }
-				placement="top-start"
-				className="components-autocomplete__popover"
-				anchor={ popoverAnchor }
-				ref={ popoverRef }
-			>
-				<div
-					id={ listBoxId }
-					role="listbox"
-					className="components-autocomplete__results"
-				>
-					{ map( items, ( option, index ) => (
-						<Button
-							key={ option.key }
-							id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
-							role="option"
-							aria-selected={ index === selectedIndex }
-							disabled={ option.isDisabled }
-							className={ classnames(
-								'components-autocomplete__result',
-								className,
-								{
-									'is-selected': index === selectedIndex,
-								}
-							) }
-							onClick={ () => onSelect( option ) }
-						>
-							{ option.label }
-						</Button>
-					) ) }
-				</div>
-			</Popover>
-		);
-	}
-
-	return AutocompleterUI;
-}
-
-function useOnClickOutside( ref, handler ) {
-	useEffect( () => {
-		const listener = ( event ) => {
-			// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
-			if ( ! ref.current || ref.current.contains( event.target ) ) {
-				return;
-			}
-			handler( event );
-		};
-		document.addEventListener( 'mousedown', listener );
-		document.addEventListener( 'touchstart', listener );
-		return () => {
-			document.removeEventListener( 'mousedown', listener );
-			document.removeEventListener( 'touchstart', listener );
-		};
-		// Disable reason: `ref` is a ref object and should not be included in a
-		// hook's dependency list.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ handler ] );
-}
diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js
index a8f0efa447c4fe..daf4fe301abf77 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.native.js
+++ b/packages/components/src/autocomplete/autocompleter-ui.native.js
@@ -21,10 +21,6 @@ import {
 	useCallback,
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	Icon,
-	__unstableAutocompletionItemsFill as AutocompletionItemsFill,
-} from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -33,6 +29,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import BackgroundView from './background-view';
 import getDefaultUseItems from './get-default-use-items';
 import styles from './style.scss';
+import Icon from '../icon';
+import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items';
 
 const { compose: stylesCompose } = StyleSheet;
 
@@ -71,9 +69,8 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// We want to avoid introducing unexpected side effects.
 			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [ items, isVisible, text ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
@@ -114,9 +111,8 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// We want to avoid introducing unexpected side effects.
 			// See https://github.com/WordPress/gutenberg/pull/41820
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 			[ isVisible ]
 		);
 
@@ -144,6 +140,7 @@ export function getAutoCompleterUI( autocompleter ) {
 					<Animated.View style={ contentStyles }>
 						<BackgroundView>
 							<ScrollView
+								testID="autocompleter"
 								ref={ scrollViewRef }
 								horizontal
 								contentContainerStyle={
diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
new file mode 100644
index 00000000000000..dbbbe724113d7c
--- /dev/null
+++ b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -0,0 +1,239 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useLayoutEffect,
+	useRef,
+	useEffect,
+	useState,
+} from '@wordpress/element';
+import { useAnchor } from '@wordpress/rich-text';
+import { useDebounce, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import getDefaultUseItems from './get-default-use-items';
+import Button from '../button';
+import Popover from '../popover';
+import { VisuallyHidden } from '../visually-hidden';
+import { createPortal } from 'react-dom';
+import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
+
+type ListBoxProps = {
+	items: KeyedOption[];
+	onSelect: ( option: KeyedOption ) => void;
+	selectedIndex: number;
+	instanceId: number;
+	listBoxId: string | undefined;
+	className?: string;
+	Component?: React.ElementType;
+};
+
+function ListBox( {
+	items,
+	onSelect,
+	selectedIndex,
+	instanceId,
+	listBoxId,
+	className,
+	Component = 'div',
+}: ListBoxProps ) {
+	return (
+		<Component
+			id={ listBoxId }
+			role="listbox"
+			className="components-autocomplete__results"
+		>
+			{ items.map( ( option, index ) => (
+				<Button
+					key={ option.key }
+					id={ `components-autocomplete-item-${ instanceId }-${ option.key }` }
+					role="option"
+					__next40pxDefaultSize
+					aria-selected={ index === selectedIndex }
+					accessibleWhenDisabled
+					disabled={ option.isDisabled }
+					className={ clsx(
+						'components-autocomplete__result',
+						className,
+						{
+							// Unused, for backwards compatibility.
+							'is-selected': index === selectedIndex,
+						}
+					) }
+					variant={ index === selectedIndex ? 'primary' : undefined }
+					onClick={ () => onSelect( option ) }
+				>
+					{ option.label }
+				</Button>
+			) ) }
+		</Component>
+	);
+}
+
+export function getAutoCompleterUI( autocompleter: WPCompleter ) {
+	const useItems =
+		autocompleter.useItems ?? getDefaultUseItems( autocompleter );
+
+	function AutocompleterUI( {
+		filterValue,
+		instanceId,
+		listBoxId,
+		className,
+		selectedIndex,
+		onChangeOptions,
+		onSelect,
+		onReset,
+		reset,
+		contentRef,
+	}: AutocompleterUIProps ) {
+		const [ items ] = useItems( filterValue );
+		const popoverAnchor = useAnchor( {
+			editableContentElement: contentRef.current,
+		} );
+
+		const [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );
+		const popoverRef = useRef< HTMLElement >( null );
+		const popoverRefs = useMergeRefs( [
+			popoverRef,
+			useRefEffect(
+				( node ) => {
+					if ( ! contentRef.current ) {
+						return;
+					}
+
+					// If the popover is rendered in a different document than
+					// the content, we need to duplicate the options list in the
+					// content document so that it's available to the screen
+					// readers, which check the DOM ID based aria-* attributes.
+					setNeedsA11yCompat(
+						node.ownerDocument !== contentRef.current.ownerDocument
+					);
+				},
+				[ contentRef ]
+			),
+		] );
+
+		useOnClickOutside( popoverRef, reset );
+
+		const debouncedSpeak = useDebounce( speak, 500 );
+
+		function announce( options: Array< KeyedOption > ) {
+			if ( ! debouncedSpeak ) {
+				return;
+			}
+			if ( !! options.length ) {
+				if ( filterValue ) {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'%d result found, use up and down arrow keys to navigate.',
+								'%d results found, use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				} else {
+					debouncedSpeak(
+						sprintf(
+							/* translators: %d: number of results. */
+							_n(
+								'Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.',
+								options.length
+							),
+							options.length
+						),
+						'assertive'
+					);
+				}
+			} else {
+				debouncedSpeak( __( 'No results.' ), 'assertive' );
+			}
+		}
+
+		useLayoutEffect( () => {
+			onChangeOptions( items );
+			announce( items );
+			// We want to avoid introducing unexpected side effects.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+		}, [ items ] );
+
+		if ( items.length === 0 ) {
+			return null;
+		}
+
+		return (
+			<>
+				<Popover
+					focusOnMount={ false }
+					onClose={ onReset }
+					placement="top-start"
+					className="components-autocomplete__popover"
+					anchor={ popoverAnchor }
+					ref={ popoverRefs }
+				>
+					<ListBox
+						items={ items }
+						onSelect={ onSelect }
+						selectedIndex={ selectedIndex }
+						instanceId={ instanceId }
+						listBoxId={ listBoxId }
+						className={ className }
+					/>
+				</Popover>
+				{ contentRef.current &&
+					needsA11yCompat &&
+					createPortal(
+						<ListBox
+							items={ items }
+							onSelect={ onSelect }
+							selectedIndex={ selectedIndex }
+							instanceId={ instanceId }
+							listBoxId={ listBoxId }
+							className={ className }
+							Component={ VisuallyHidden }
+						/>,
+						contentRef.current.ownerDocument.body
+					) }
+			</>
+		);
+	}
+
+	return AutocompleterUI;
+}
+
+function useOnClickOutside(
+	ref: React.RefObject< HTMLElement >,
+	handler: AutocompleterUIProps[ 'reset' ]
+) {
+	useEffect( () => {
+		const listener = ( event: MouseEvent | TouchEvent ) => {
+			// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
+			if (
+				! ref.current ||
+				ref.current.contains( event.target as Node )
+			) {
+				return;
+			}
+			handler( event );
+		};
+		document.addEventListener( 'mousedown', listener );
+		document.addEventListener( 'touchstart', listener );
+		return () => {
+			document.removeEventListener( 'mousedown', listener );
+			document.removeEventListener( 'touchstart', listener );
+		};
+	}, [ handler, ref ] );
+}
diff --git a/packages/components/src/autocomplete/get-default-use-items.js b/packages/components/src/autocomplete/get-default-use-items.js
deleted file mode 100644
index 510c07f971dc45..00000000000000
--- a/packages/components/src/autocomplete/get-default-use-items.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
-/**
- * WordPress dependencies
- */
-import { debounce } from '@wordpress/compose';
-import { useLayoutEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { escapeRegExp } from '../utils/strings';
-
-function filterOptions( search, options = [], maxResults = 10 ) {
-	const filtered = [];
-	for ( let i = 0; i < options.length; i++ ) {
-		const option = options[ i ];
-
-		// Merge label into keywords.
-		let { keywords = [] } = option;
-		if ( 'string' === typeof option.label ) {
-			keywords = [ ...keywords, option.label ];
-		}
-
-		const isMatch = keywords.some( ( keyword ) =>
-			search.test( removeAccents( keyword ) )
-		);
-		if ( ! isMatch ) {
-			continue;
-		}
-
-		filtered.push( option );
-
-		// Abort early if max reached.
-		if ( filtered.length === maxResults ) {
-			break;
-		}
-	}
-
-	return filtered;
-}
-
-export default function getDefaultUseItems( autocompleter ) {
-	return ( filterValue ) => {
-		const [ items, setItems ] = useState( [] );
-		/*
-		 * We support both synchronous and asynchronous retrieval of completer options
-		 * but internally treat all as async so we maintain a single, consistent code path.
-		 *
-		 * Because networks can be slow, and the internet is wonderfully unpredictable,
-		 * we don't want two promises updating the state at once. This ensures that only
-		 * the most recent promise will act on `optionsData`. This doesn't use the state
-		 * because `setState` is batched, and so there's no guarantee that setting
-		 * `activePromise` in the state would result in it actually being in `this.state`
-		 * before the promise resolves and we check to see if this is the active promise or not.
-		 */
-		useLayoutEffect( () => {
-			const { options, isDebounced } = autocompleter;
-			const loadOptions = debounce(
-				() => {
-					const promise = Promise.resolve(
-						typeof options === 'function'
-							? options( filterValue )
-							: options
-					).then( ( optionsData ) => {
-						if ( promise.canceled ) {
-							return;
-						}
-						const keyedOptions = optionsData.map(
-							( optionData, optionIndex ) => ( {
-								key: `${ autocompleter.name }-${ optionIndex }`,
-								value: optionData,
-								label: autocompleter.getOptionLabel(
-									optionData
-								),
-								keywords: autocompleter.getOptionKeywords
-									? autocompleter.getOptionKeywords(
-											optionData
-									  )
-									: [],
-								isDisabled: autocompleter.isOptionDisabled
-									? autocompleter.isOptionDisabled(
-											optionData
-									  )
-									: false,
-							} )
-						);
-
-						// Create a regular expression to filter the options.
-						const search = new RegExp(
-							'(?:\\b|\\s|^)' + escapeRegExp( filterValue ),
-							'i'
-						);
-						setItems( filterOptions( search, keyedOptions ) );
-					} );
-
-					return promise;
-				},
-				isDebounced ? 250 : 0
-			);
-
-			const promise = loadOptions();
-
-			return () => {
-				loadOptions.cancel();
-				if ( promise ) {
-					promise.canceled = true;
-				}
-			};
-		}, [ filterValue ] );
-
-		return [ items ];
-	};
-}
diff --git a/packages/components/src/autocomplete/get-default-use-items.tsx b/packages/components/src/autocomplete/get-default-use-items.tsx
new file mode 100644
index 00000000000000..e0be57c8c19cc4
--- /dev/null
+++ b/packages/components/src/autocomplete/get-default-use-items.tsx
@@ -0,0 +1,122 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import { debounce } from '@wordpress/compose';
+import { useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { escapeRegExp } from '../utils/strings';
+import type { CancelablePromise, KeyedOption, WPCompleter } from './types';
+
+function filterOptions(
+	search: RegExp,
+	options: Array< KeyedOption > = [],
+	maxResults = 10
+) {
+	const filtered = [];
+	for ( let i = 0; i < options.length; i++ ) {
+		const option = options[ i ];
+
+		// Merge label into keywords.
+		let { keywords = [] } = option;
+		if ( 'string' === typeof option.label ) {
+			keywords = [ ...keywords, option.label ];
+		}
+
+		const isMatch = keywords.some( ( keyword ) =>
+			search.test( removeAccents( keyword ) )
+		);
+		if ( ! isMatch ) {
+			continue;
+		}
+
+		filtered.push( option );
+
+		// Abort early if max reached.
+		if ( filtered.length === maxResults ) {
+			break;
+		}
+	}
+
+	return filtered;
+}
+
+export default function getDefaultUseItems( autocompleter: WPCompleter ) {
+	return ( filterValue: string ) => {
+		const [ items, setItems ] = useState< Array< KeyedOption > >( [] );
+		/*
+		 * We support both synchronous and asynchronous retrieval of completer options
+		 * but internally treat all as async so we maintain a single, consistent code path.
+		 *
+		 * Because networks can be slow, and the internet is wonderfully unpredictable,
+		 * we don't want two promises updating the state at once. This ensures that only
+		 * the most recent promise will act on `optionsData`. This doesn't use the state
+		 * because `setState` is batched, and so there's no guarantee that setting
+		 * `activePromise` in the state would result in it actually being in `this.state`
+		 * before the promise resolves and we check to see if this is the active promise or not.
+		 */
+		useLayoutEffect( () => {
+			const { options, isDebounced } = autocompleter;
+			const loadOptions = debounce(
+				() => {
+					const promise: CancelablePromise = Promise.resolve(
+						typeof options === 'function'
+							? options( filterValue )
+							: options
+					).then( ( optionsData ) => {
+						if ( promise.canceled ) {
+							return;
+						}
+						const keyedOptions = optionsData.map(
+							( optionData, optionIndex ) => ( {
+								key: `${ autocompleter.name }-${ optionIndex }`,
+								value: optionData,
+								label: autocompleter.getOptionLabel(
+									optionData
+								),
+								keywords: autocompleter.getOptionKeywords
+									? autocompleter.getOptionKeywords(
+											optionData
+									  )
+									: [],
+								isDisabled: autocompleter.isOptionDisabled
+									? autocompleter.isOptionDisabled(
+											optionData
+									  )
+									: false,
+							} )
+						);
+
+						// Create a regular expression to filter the options.
+						const search = new RegExp(
+							'(?:\\b|\\s|^)' + escapeRegExp( filterValue ),
+							'i'
+						);
+						setItems( filterOptions( search, keyedOptions ) );
+					} );
+
+					return promise;
+				},
+				isDebounced ? 250 : 0
+			);
+
+			const promise = loadOptions();
+
+			return () => {
+				loadOptions.cancel();
+				if ( promise ) {
+					promise.canceled = true;
+				}
+			};
+		}, [ filterValue ] );
+
+		return [ items ] as const;
+	};
+}
diff --git a/packages/components/src/autocomplete/index.js b/packages/components/src/autocomplete/index.js
deleted file mode 100644
index f96bd01750c01d..00000000000000
--- a/packages/components/src/autocomplete/index.js
+++ /dev/null
@@ -1,453 +0,0 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-import removeAccents from 'remove-accents';
-
-/**
- * WordPress dependencies
- */
-import {
-	renderToString,
-	useEffect,
-	useState,
-	useRef,
-	useMemo,
-} from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	useInstanceId,
-	useDebounce,
-	useMergeRefs,
-	useRefEffect,
-} from '@wordpress/compose';
-import {
-	create,
-	slice,
-	insert,
-	isCollapsed,
-	getTextContent,
-} from '@wordpress/rich-text';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import { getAutoCompleterUI } from './autocompleter-ui';
-import { escapeRegExp } from '../utils/strings';
-
-/**
- * A raw completer option.
- *
- * @typedef {*} CompleterOption
- */
-
-/**
- * @callback FnGetOptions
- *
- * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.
- */
-
-/**
- * @callback FnGetOptionKeywords
- * @param {CompleterOption} option a completer option.
- *
- * @return {string[]} list of key words to search.
- */
-
-/**
- * @callback FnIsOptionDisabled
- * @param {CompleterOption} option a completer option.
- *
- * @return {string[]} whether or not the given option is disabled.
- */
-
-/**
- * @callback FnGetOptionLabel
- * @param {CompleterOption} option a completer option.
- *
- * @return {(string|Array.<(string|WPElement)>)} list of react components to render.
- */
-
-/**
- * @callback FnAllowContext
- * @param {string} before the string before the auto complete trigger and query.
- * @param {string} after  the string after the autocomplete trigger and query.
- *
- * @return {boolean} true if the completer can handle.
- */
-
-/**
- * @typedef {Object} OptionCompletion
- * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.
- * @property {OptionCompletionValue}       value  the completion value.
- */
-
-/**
- * A completion value.
- *
- * @typedef {(string|WPElement|Object)} OptionCompletionValue
- */
-
-/**
- * @callback FnGetOptionCompletion
- * @param {CompleterOption} value the value of the completer option.
- * @param {string}          query the text value of the autocomplete query.
- *
- * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an
- * 													   OptionCompletionValue is returned, the
- * 													   completion action defaults to `insert-at-caret`.
- */
-
-/**
- * @typedef {Object} WPCompleter
- * @property {string}                           name                a way to identify a completer, useful for selective overriding.
- * @property {?string}                          className           A class to apply to the popup menu.
- * @property {string}                           triggerPrefix       the prefix that will display the menu.
- * @property {(CompleterOption[]|FnGetOptions)} options             the completer options or a function to get them.
- * @property {?FnGetOptionKeywords}             getOptionKeywords   get the keywords for a given option.
- * @property {?FnIsOptionDisabled}              isOptionDisabled    get whether or not the given option is disabled.
- * @property {FnGetOptionLabel}                 getOptionLabel      get the label for a given option.
- * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.
- * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.
- */
-
-function useAutocomplete( {
-	record,
-	onChange,
-	onReplace,
-	completers,
-	contentRef,
-} ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
-	const instanceId = useInstanceId( useAutocomplete );
-	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
-	const [ filteredOptions, setFilteredOptions ] = useState( [] );
-	const [ filterValue, setFilterValue ] = useState( '' );
-	const [ autocompleter, setAutocompleter ] = useState( null );
-	const [ AutocompleterUI, setAutocompleterUI ] = useState( null );
-	const backspacing = useRef( false );
-
-	function insertCompletion( replacement ) {
-		const end = record.start;
-		const start =
-			end - autocompleter.triggerPrefix.length - filterValue.length;
-		const toInsert = create( { html: renderToString( replacement ) } );
-
-		onChange( insert( record, toInsert, start, end ) );
-	}
-
-	function select( option ) {
-		const { getOptionCompletion } = autocompleter || {};
-
-		if ( option.isDisabled ) {
-			return;
-		}
-
-		if ( getOptionCompletion ) {
-			const completion = getOptionCompletion( option.value, filterValue );
-
-			const { action, value } =
-				undefined === completion.action ||
-				undefined === completion.value
-					? { action: 'insert-at-caret', value: completion }
-					: completion;
-
-			if ( 'replace' === action ) {
-				onReplace( [ value ] );
-				// When replacing, the component will unmount, so don't reset
-				// state (below) on an unmounted component.
-				return;
-			} else if ( 'insert-at-caret' === action ) {
-				insertCompletion( value );
-			}
-		}
-
-		// Reset autocomplete state after insertion rather than before
-		// so insertion events don't cause the completion menu to redisplay.
-		reset();
-	}
-
-	function reset() {
-		setSelectedIndex( 0 );
-		setFilteredOptions( [] );
-		setFilterValue( '' );
-		setAutocompleter( null );
-		setAutocompleterUI( null );
-	}
-
-	function announce( options ) {
-		if ( ! debouncedSpeak ) {
-			return;
-		}
-		if ( !! options.length ) {
-			debouncedSpeak(
-				sprintf(
-					/* translators: %d: number of results. */
-					_n(
-						'%d result found, use up and down arrow keys to navigate.',
-						'%d results found, use up and down arrow keys to navigate.',
-						options.length
-					),
-					options.length
-				),
-				'assertive'
-			);
-		} else {
-			debouncedSpeak( __( 'No results.' ), 'assertive' );
-		}
-	}
-
-	/**
-	 * Load options for an autocompleter.
-	 *
-	 * @param {Array} options
-	 */
-	function onChangeOptions( options ) {
-		setSelectedIndex(
-			options.length === filteredOptions.length ? selectedIndex : 0
-		);
-		setFilteredOptions( options );
-		announce( options );
-	}
-
-	function handleKeyDown( event ) {
-		backspacing.current = event.key === 'Backspace';
-
-		if ( ! autocompleter ) {
-			return;
-		}
-		if ( filteredOptions.length === 0 ) {
-			return;
-		}
-
-		if (
-			event.defaultPrevented ||
-			// Ignore keydowns from IMEs
-			event.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;
-		}
-		switch ( event.key ) {
-			case 'ArrowUp':
-				setSelectedIndex(
-					( selectedIndex === 0
-						? filteredOptions.length
-						: selectedIndex ) - 1
-				);
-				break;
-
-			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
-				break;
-
-			case 'Escape':
-				setAutocompleter( null );
-				setAutocompleterUI( null );
-				event.preventDefault();
-				break;
-
-			case 'Enter':
-				select( filteredOptions[ selectedIndex ] );
-				break;
-
-			case 'ArrowLeft':
-			case 'ArrowRight':
-				reset();
-				return;
-
-			default:
-				return;
-		}
-
-		// Any handled key should prevent original behavior. This relies on
-		// the early return in the default case.
-		event.preventDefault();
-	}
-
-	// textContent is a primitive (string), memoizing is not strictly necessary
-	// but this is a preemptive performance improvement, since the autocompleter
-	// is a potential bottleneck for the editor type metric.
-	const textContent = useMemo( () => {
-		if ( isCollapsed( record ) ) {
-			return getTextContent( slice( record, 0 ) );
-		}
-	}, [ record ] );
-
-	useEffect( () => {
-		if ( ! textContent ) {
-			reset();
-			return;
-		}
-
-		const text = removeAccents( textContent );
-		const textAfterSelection = getTextContent(
-			slice( record, undefined, getTextContent( record ).length )
-		);
-		const completer = find(
-			completers,
-			( { triggerPrefix, allowContext } ) => {
-				const index = text.lastIndexOf( triggerPrefix );
-
-				if ( index === -1 ) {
-					return false;
-				}
-
-				const textWithoutTrigger = text.slice(
-					index + triggerPrefix.length
-				);
-
-				const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
-				// This is a final barrier to prevent the effect from completing with
-				// an extremely long string, which causes the editor to slow-down
-				// significantly. This could happen, for example, if `matchingWhileBackspacing`
-				// is true and one of the "words" end up being too long. If that's the case,
-				// it will be caught by this guard.
-				if ( tooDistantFromTrigger ) return false;
-
-				const mismatch = filteredOptions.length === 0;
-				const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
-				// We need to allow the effect to run when not backspacing and if there
-				// was a mismatch. i.e when typing a trigger + the match string or when
-				// clicking in an existing trigger word on the page. We do that if we
-				// detect that we have one word from trigger in the current textual context.
-				//
-				// Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
-				// allow the effect to run. It will run until there's a mismatch.
-				const hasOneTriggerWord = wordsFromTrigger.length === 1;
-				// This is used to allow the effect to run when backspacing and if
-				// "touching" a word that "belongs" to a trigger. We consider a "trigger
-				// word" any word up to the limit of 3 from the trigger character.
-				// Anything beyond that is ignored if there's a mismatch. This allows
-				// us to "escape" a mismatch when backspacing, but still imposing some
-				// sane limits.
-				//
-				// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
-				// if the user presses backspace here, it will show the completion popup again.
-				const matchingWhileBackspacing =
-					backspacing.current &&
-					textWithoutTrigger.split( /\s/ ).length <= 3;
-
-				if (
-					mismatch &&
-					! ( matchingWhileBackspacing || hasOneTriggerWord )
-				) {
-					return false;
-				}
-
-				if (
-					allowContext &&
-					! allowContext( text.slice( 0, index ), textAfterSelection )
-				) {
-					return false;
-				}
-
-				if (
-					/^\s/.test( textWithoutTrigger ) ||
-					/\s\s+$/.test( textWithoutTrigger )
-				) {
-					return false;
-				}
-
-				return /[\u0000-\uFFFF]*$/.test( textWithoutTrigger );
-			}
-		);
-
-		if ( ! completer ) {
-			reset();
-			return;
-		}
-
-		const safeTrigger = escapeRegExp( completer.triggerPrefix );
-		const match = text
-			.slice( text.lastIndexOf( completer.triggerPrefix ) )
-			.match( new RegExp( `${ safeTrigger }([\u0000-\uFFFF]*)$` ) );
-		const query = match && match[ 1 ];
-
-		setAutocompleter( completer );
-		setAutocompleterUI( () =>
-			completer !== autocompleter
-				? getAutoCompleterUI( completer )
-				: AutocompleterUI
-		);
-		setFilterValue( query );
-		// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
-		// See https://github.com/WordPress/gutenberg/pull/41820
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ textContent ] );
-
-	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
-	const { className } = autocompleter || {};
-	const isExpanded = !! autocompleter && filteredOptions.length > 0;
-	const listBoxId = isExpanded
-		? `components-autocomplete-listbox-${ instanceId }`
-		: null;
-	const activeId = isExpanded
-		? `components-autocomplete-item-${ instanceId }-${ selectedKey }`
-		: null;
-	const hasSelection = record.start !== undefined;
-
-	return {
-		listBoxId,
-		activeId,
-		onKeyDown: handleKeyDown,
-		popover: hasSelection && AutocompleterUI && (
-			<AutocompleterUI
-				className={ className }
-				filterValue={ filterValue }
-				instanceId={ instanceId }
-				listBoxId={ listBoxId }
-				selectedIndex={ selectedIndex }
-				onChangeOptions={ onChangeOptions }
-				onSelect={ select }
-				value={ record }
-				contentRef={ contentRef }
-				reset={ reset }
-			/>
-		),
-	};
-}
-
-export function useAutocompleteProps( options ) {
-	const ref = useRef();
-	const onKeyDownRef = useRef();
-	const { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {
-		...options,
-		contentRef: ref,
-	} );
-	onKeyDownRef.current = onKeyDown;
-	return {
-		ref: useMergeRefs( [
-			ref,
-			useRefEffect( ( element ) => {
-				function _onKeyDown( event ) {
-					onKeyDownRef.current( event );
-				}
-				element.addEventListener( 'keydown', _onKeyDown );
-				return () => {
-					element.removeEventListener( 'keydown', _onKeyDown );
-				};
-			}, [] ),
-		] ),
-		children: popover,
-		'aria-autocomplete': listBoxId ? 'list' : undefined,
-		'aria-owns': listBoxId,
-		'aria-activedescendant': activeId,
-	};
-}
-
-export default function Autocomplete( { children, isSelected, ...options } ) {
-	const { popover, ...props } = useAutocomplete( options );
-	return (
-		<>
-			{ children( props ) }
-			{ isSelected && popover }
-		</>
-	);
-}
diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
new file mode 100644
index 00000000000000..7a75be8eca5c84
--- /dev/null
+++ b/packages/components/src/autocomplete/index.tsx
@@ -0,0 +1,484 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	renderToString,
+	useEffect,
+	useState,
+	useRef,
+	useMemo,
+} from '@wordpress/element';
+import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+	create,
+	slice,
+	insert,
+	isCollapsed,
+	getTextContent,
+} from '@wordpress/rich-text';
+import { speak } from '@wordpress/a11y';
+import { isAppleOS } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { getAutoCompleterUI } from './autocompleter-ui';
+import { escapeRegExp } from '../utils/strings';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import type {
+	AutocompleteProps,
+	AutocompleterUIProps,
+	InsertOption,
+	KeyedOption,
+	OptionCompletion,
+	ReplaceOption,
+	UseAutocompleteProps,
+	WPCompleter,
+} from './types';
+
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+			break;
+		case 'boolean':
+			return '';
+			break;
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			break;
+		}
+		default:
+			return '';
+	}
+
+	return '';
+};
+
+const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
+
+// Used for generating the instance ID
+const AUTOCOMPLETE_HOOK_REFERENCE = {};
+
+export function useAutocomplete( {
+	record,
+	onChange,
+	onReplace,
+	completers,
+	contentRef,
+}: UseAutocompleteProps ) {
+	const instanceId = useInstanceId( AUTOCOMPLETE_HOOK_REFERENCE );
+	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
+
+	const [ filteredOptions, setFilteredOptions ] = useState<
+		Array< KeyedOption >
+	>( EMPTY_FILTERED_OPTIONS );
+	const [ filterValue, setFilterValue ] =
+		useState< AutocompleterUIProps[ 'filterValue' ] >( '' );
+	const [ autocompleter, setAutocompleter ] = useState< WPCompleter | null >(
+		null
+	);
+	const [ AutocompleterUI, setAutocompleterUI ] = useState<
+		( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null
+	>( null );
+
+	const backspacingRef = useRef( false );
+
+	function insertCompletion( replacement: React.ReactNode ) {
+		if ( autocompleter === null ) {
+			return;
+		}
+		const end = record.start;
+		const start =
+			end - autocompleter.triggerPrefix.length - filterValue.length;
+		const toInsert = create( { html: renderToString( replacement ) } );
+
+		onChange( insert( record, toInsert, start, end ) );
+	}
+
+	function select( option: KeyedOption ) {
+		const { getOptionCompletion } = autocompleter || {};
+
+		if ( option.isDisabled ) {
+			return;
+		}
+
+		if ( getOptionCompletion ) {
+			const completion = getOptionCompletion( option.value, filterValue );
+
+			const isCompletionObject = (
+				obj: OptionCompletion
+			): obj is InsertOption | ReplaceOption => {
+				return (
+					obj !== null &&
+					typeof obj === 'object' &&
+					'action' in obj &&
+					obj.action !== undefined &&
+					'value' in obj &&
+					obj.value !== undefined
+				);
+			};
+
+			const completionObject = isCompletionObject( completion )
+				? completion
+				: ( {
+						action: 'insert-at-caret',
+						value: completion,
+				  } as InsertOption );
+
+			if ( 'replace' === completionObject.action ) {
+				onReplace( [ completionObject.value ] );
+				// When replacing, the component will unmount, so don't reset
+				// state (below) on an unmounted component.
+				return;
+			} else if ( 'insert-at-caret' === completionObject.action ) {
+				insertCompletion( completionObject.value );
+			}
+		}
+
+		// Reset autocomplete state after insertion rather than before
+		// so insertion events don't cause the completion menu to redisplay.
+		reset();
+	}
+
+	function reset() {
+		setSelectedIndex( 0 );
+		setFilteredOptions( EMPTY_FILTERED_OPTIONS );
+		setFilterValue( '' );
+		setAutocompleter( null );
+		setAutocompleterUI( null );
+	}
+
+	/**
+	 * Load options for an autocompleter.
+	 *
+	 * @param {Array} options
+	 */
+	function onChangeOptions( options: Array< KeyedOption > ) {
+		setSelectedIndex(
+			options.length === filteredOptions.length ? selectedIndex : 0
+		);
+		setFilteredOptions( options );
+	}
+
+	function handleKeyDown( event: KeyboardEvent ) {
+		backspacingRef.current = event.key === 'Backspace';
+
+		if ( ! autocompleter ) {
+			return;
+		}
+		if ( filteredOptions.length === 0 ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		switch ( event.key ) {
+			case 'ArrowUp': {
+				const newIndex =
+					( selectedIndex === 0
+						? filteredOptions.length
+						: selectedIndex ) - 1;
+				setSelectedIndex( newIndex );
+				// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
+				break;
+			}
+
+			case 'ArrowDown': {
+				const newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
+				break;
+			}
+
+			case 'Escape':
+				setAutocompleter( null );
+				setAutocompleterUI( null );
+				event.preventDefault();
+				break;
+
+			case 'Enter':
+				select( filteredOptions[ selectedIndex ] );
+				break;
+
+			case 'ArrowLeft':
+			case 'ArrowRight':
+				reset();
+				return;
+
+			default:
+				return;
+		}
+
+		// Any handled key should prevent original behavior. This relies on
+		// the early return in the default case.
+		event.preventDefault();
+	}
+
+	// textContent is a primitive (string), memoizing is not strictly necessary
+	// but this is a preemptive performance improvement, since the autocompleter
+	// is a potential bottleneck for the editor type metric.
+	const textContent = useMemo( () => {
+		if ( isCollapsed( record ) ) {
+			return getTextContent( slice( record, 0 ) );
+		}
+		return '';
+	}, [ record ] );
+
+	useEffect( () => {
+		if ( ! textContent ) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		// Find the completer with the highest triggerPrefix index in the
+		// textContent.
+		const completer = completers.reduce< WPCompleter | null >(
+			( lastTrigger, currentCompleter ) => {
+				const triggerIndex = textContent.lastIndexOf(
+					currentCompleter.triggerPrefix
+				);
+				const lastTriggerIndex =
+					lastTrigger !== null
+						? textContent.lastIndexOf( lastTrigger.triggerPrefix )
+						: -1;
+
+				return triggerIndex > lastTriggerIndex
+					? currentCompleter
+					: lastTrigger;
+			},
+			null
+		);
+
+		if ( ! completer ) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		const { allowContext, triggerPrefix } = completer;
+		const triggerIndex = textContent.lastIndexOf( triggerPrefix );
+		const textWithoutTrigger = textContent.slice(
+			triggerIndex + triggerPrefix.length
+		);
+
+		const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
+		// This is a final barrier to prevent the effect from completing with
+		// an extremely long string, which causes the editor to slow-down
+		// significantly. This could happen, for example, if `matchingWhileBackspacing`
+		// is true and one of the "words" end up being too long. If that's the case,
+		// it will be caught by this guard.
+		if ( tooDistantFromTrigger ) {
+			return;
+		}
+
+		const mismatch = filteredOptions.length === 0;
+		const wordsFromTrigger = textWithoutTrigger.split( /\s/ );
+		// We need to allow the effect to run when not backspacing and if there
+		// was a mismatch. i.e when typing a trigger + the match string or when
+		// clicking in an existing trigger word on the page. We do that if we
+		// detect that we have one word from trigger in the current textual context.
+		//
+		// Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and
+		// allow the effect to run. It will run until there's a mismatch.
+		const hasOneTriggerWord = wordsFromTrigger.length === 1;
+		// This is used to allow the effect to run when backspacing and if
+		// "touching" a word that "belongs" to a trigger. We consider a "trigger
+		// word" any word up to the limit of 3 from the trigger character.
+		// Anything beyond that is ignored if there's a mismatch. This allows
+		// us to "escape" a mismatch when backspacing, but still imposing some
+		// sane limits.
+		//
+		// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
+		// if the user presses backspace here, it will show the completion popup again.
+		const matchingWhileBackspacing =
+			backspacingRef.current && wordsFromTrigger.length <= 3;
+
+		if ( mismatch && ! ( matchingWhileBackspacing || hasOneTriggerWord ) ) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		const textAfterSelection = getTextContent(
+			slice( record, undefined, getTextContent( record ).length )
+		);
+
+		if (
+			allowContext &&
+			! allowContext(
+				textContent.slice( 0, triggerIndex ),
+				textAfterSelection
+			)
+		) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		if (
+			/^\s/.test( textWithoutTrigger ) ||
+			/\s\s+$/.test( textWithoutTrigger )
+		) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		if ( ! /[\u0000-\uFFFF]*$/.test( textWithoutTrigger ) ) {
+			if ( autocompleter ) {
+				reset();
+			}
+			return;
+		}
+
+		const safeTrigger = escapeRegExp( completer.triggerPrefix );
+		const text = removeAccents( textContent );
+		const match = text
+			.slice( text.lastIndexOf( completer.triggerPrefix ) )
+			.match( new RegExp( `${ safeTrigger }([\u0000-\uFFFF]*)$` ) );
+		const query = match && match[ 1 ];
+
+		setAutocompleter( completer );
+		setAutocompleterUI( () =>
+			completer !== autocompleter
+				? getAutoCompleterUI( completer )
+				: AutocompleterUI
+		);
+		setFilterValue( query === null ? '' : query );
+		// We want to avoid introducing unexpected side effects.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+	}, [ textContent ] );
+
+	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
+	const { className } = autocompleter || {};
+	const isExpanded = !! autocompleter && filteredOptions.length > 0;
+	const listBoxId = isExpanded
+		? `components-autocomplete-listbox-${ instanceId }`
+		: undefined;
+	const activeId = isExpanded
+		? `components-autocomplete-item-${ instanceId }-${ selectedKey }`
+		: null;
+	const hasSelection = record.start !== undefined;
+
+	return {
+		listBoxId,
+		activeId,
+		onKeyDown: withIgnoreIMEEvents( handleKeyDown ),
+		popover: hasSelection && AutocompleterUI && (
+			<AutocompleterUI
+				className={ className }
+				filterValue={ filterValue }
+				instanceId={ instanceId }
+				listBoxId={ listBoxId }
+				selectedIndex={ selectedIndex }
+				onChangeOptions={ onChangeOptions }
+				onSelect={ select }
+				value={ record }
+				contentRef={ contentRef }
+				reset={ reset }
+			/>
+		),
+	};
+}
+
+function useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {
+	const history = useRef< Set< typeof value > >( new Set() );
+
+	history.current.add( value );
+
+	// Keep the history size to 2.
+	if ( history.current.size > 2 ) {
+		history.current.delete( Array.from( history.current )[ 0 ] );
+	}
+
+	return Array.from( history.current )[ 0 ];
+}
+
+export function useAutocompleteProps( options: UseAutocompleteProps ) {
+	const ref = useRef< HTMLElement >( null );
+	const onKeyDownRef = useRef< ( event: KeyboardEvent ) => void >();
+	const { record } = options;
+	const previousRecord = useLastDifferentValue( record );
+	const { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {
+		...options,
+		contentRef: ref,
+	} );
+	onKeyDownRef.current = onKeyDown;
+
+	const mergedRefs = useMergeRefs( [
+		ref,
+		useRefEffect( ( element: HTMLElement ) => {
+			function _onKeyDown( event: KeyboardEvent ) {
+				onKeyDownRef.current?.( event );
+			}
+			element.addEventListener( 'keydown', _onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', _onKeyDown );
+			};
+		}, [] ),
+	] );
+
+	// We only want to show the popover if the user has typed something.
+	const didUserInput = record.text !== previousRecord?.text;
+
+	if ( ! didUserInput ) {
+		return { ref: mergedRefs };
+	}
+
+	return {
+		ref: mergedRefs,
+		children: popover,
+		'aria-autocomplete': listBoxId ? 'list' : undefined,
+		'aria-owns': listBoxId,
+		'aria-activedescendant': activeId,
+	};
+}
+
+export default function Autocomplete( {
+	children,
+	isSelected,
+	...options
+}: AutocompleteProps ) {
+	const { popover, ...props } = useAutocomplete( options );
+	return (
+		<>
+			{ children( props ) }
+			{ isSelected && popover }
+		</>
+	);
+}
diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss
index 4d04b3b8b52cf2..75b219210f42e2 100644
--- a/packages/components/src/autocomplete/style.scss
+++ b/packages/components/src/autocomplete/style.scss
@@ -1,6 +1,6 @@
 .components-autocomplete__popover .components-popover__content {
-	padding: $grid-unit-20;
-	min-width: 220px;
+	padding: $grid-unit-10;
+	min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -10,7 +10,7 @@
 	text-align: left;
 	width: 100%;
 
-	&.is-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	&:focus:not(:disabled) {
+		@include block-toolbar-button-style__focus();
 	}
 }
diff --git a/packages/components/src/autocomplete/test/index.js b/packages/components/src/autocomplete/test/index.js
deleted file mode 100644
index b33f585ea9d5f6..00000000000000
--- a/packages/components/src/autocomplete/test/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { getAutoCompleterUI } from '../autocompleter-ui';
-
-describe( 'AutocompleterUI', () => {
-	describe( 'click outside behavior', () => {
-		it( 'should call reset function when a click on another element occurs', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const resetSpy = jest.fn();
-
-			const autocompleter = {
-				name: 'fruit',
-				// The prefix that triggers this completer
-				triggerPrefix: '~',
-				// Mock useItems function to return a autocomplete item.
-				useItems: () => {
-					return [
-						[
-							{
-								isDisabled: false,
-								key: 'Apple',
-								value: 'Apple',
-								label: (
-									<span>
-										<span className="icon">🍎</span>
-										{ 'Apple' }
-									</span>
-								),
-							},
-						],
-					];
-				},
-			};
-
-			const AutocompleterUI = getAutoCompleterUI( autocompleter );
-
-			const OtherElement = <div>Other Element</div>;
-
-			const Container = () => {
-				const contentRef = useRef();
-
-				return (
-					<div>
-						<AutocompleterUI
-							className={ 'test' }
-							filterValue={ '~' }
-							instanceId={ '1' }
-							listBoxId={ '1' }
-							selectedIndex={ 0 }
-							onChangeOptions={ () => {} }
-							onSelect={ () => {} }
-							value={ { visual: '🍎', name: 'Apple', id: 1 } }
-							contentRef={ contentRef }
-							reset={ resetSpy }
-						/>
-						{ OtherElement }
-					</div>
-				);
-			};
-
-			render( <Container /> );
-
-			// Click on autocompleter.
-			await user.click( screen.getByText( 'Apple' ) );
-
-			expect( resetSpy ).toHaveBeenCalledTimes( 0 );
-
-			// Click on other element out side of the tree.
-			await user.click( screen.getByText( 'Other Element' ) );
-
-			expect( resetSpy ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-} );
diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx
new file mode 100644
index 00000000000000..0df784f8367cdd
--- /dev/null
+++ b/packages/components/src/autocomplete/test/index.tsx
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getAutoCompleterUI } from '../autocompleter-ui';
+
+type FruitOption = { visual: string; name: string; id: number };
+
+describe( 'AutocompleterUI', () => {
+	describe( 'click outside behavior', () => {
+		it( 'should call reset function when a click on another element occurs', async () => {
+			const user = userEvent.setup();
+
+			const resetSpy = jest.fn();
+
+			const autocompleter = {
+				name: 'fruit',
+				options: [
+					{ visual: '🍎', name: 'Apple', id: 1 },
+					{ visual: '🍊', name: 'Orange', id: 2 },
+					{ visual: '🍇', name: 'Grapes', id: 3 },
+				],
+				// The prefix that triggers this completer
+				triggerPrefix: '~',
+				getOptionLabel: ( option: FruitOption ) => (
+					<span>
+						<span className="icon">{ option.visual }</span>
+						{ option.name }
+					</span>
+				),
+				// Mock useItems function to return a autocomplete item.
+				useItems: ( filterValue: string ) => {
+					const options = autocompleter.options;
+					const keyedOptions = options.map(
+						( optionData, optionIndex ) => ( {
+							key: `${ autocompleter.name }-${ optionIndex }`,
+							value: optionData,
+							label: autocompleter.getOptionLabel( optionData ),
+							keywords: [],
+							isDisabled: false,
+						} )
+					);
+					const filteredOptions = keyedOptions.filter( ( option ) =>
+						option.value.name.includes( filterValue )
+					);
+					return [ filteredOptions ] as const;
+				},
+			};
+
+			const AutocompleterUI = getAutoCompleterUI( autocompleter );
+
+			const OtherElement = <div>Other Element</div>;
+
+			const Container = () => {
+				const contentRef = useRef< HTMLElement >( null );
+
+				return (
+					<div>
+						<AutocompleterUI
+							className="test"
+							filterValue="Apple"
+							instanceId={ 1 }
+							listBoxId="1"
+							selectedIndex={ 0 }
+							onChangeOptions={ () => {} }
+							onSelect={ () => {} }
+							contentRef={ contentRef }
+							reset={ resetSpy }
+						/>
+						{ OtherElement }
+					</div>
+				);
+			};
+
+			render( <Container /> );
+
+			// Click on autocompleter.
+			await user.click( screen.getByText( 'Apple' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 0 );
+
+			// Click on other element out side of the tree.
+			await user.click( screen.getByText( 'Other Element' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/autocomplete/types.ts b/packages/components/src/autocomplete/types.ts
new file mode 100644
index 00000000000000..46f4a33d1401d3
--- /dev/null
+++ b/packages/components/src/autocomplete/types.ts
@@ -0,0 +1,207 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import type { RichTextValue } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import type { useAutocomplete } from '.';
+
+// Insert the `value` into the text.
+export type InsertOption = {
+	action: 'insert-at-caret';
+	value: React.ReactNode;
+};
+
+// Replace the current block with the block specified in the `value` property
+export type ReplaceOption = { action: 'replace'; value: RichTextValue };
+
+export type OptionCompletion = React.ReactNode | InsertOption | ReplaceOption;
+
+type OptionLabel = string | ReactElement | Array< string | ReactElement >;
+export type KeyedOption = {
+	key: string;
+	value: any;
+	label: OptionLabel;
+	keywords: Array< string >;
+	isDisabled: boolean;
+};
+
+export type WPCompleter< TCompleterOption = any > = {
+	/**
+	 * The name of the completer. Useful for identifying a specific completer to
+	 * be overridden via extensibility hooks.
+	 */
+	name: string;
+	/**
+	 * The string prefix that should trigger the completer. For example,
+	 * Gutenberg's block completer is triggered when the '/' character is
+	 * entered.
+	 */
+	triggerPrefix: string;
+	/**
+	 * The raw options for completion. May be an array, a function that returns
+	 * an array, or a function that returns a promise for an array.
+	 * Options may be of any type or shape. The completer declares how those
+	 * options are rendered and what their completions should be when selected.
+	 */
+	options:
+		| ( (
+				query: string
+		  ) =>
+				| PromiseLike< readonly TCompleterOption[] >
+				| readonly TCompleterOption[] )
+		| readonly TCompleterOption[];
+	/**
+	 * A function that returns the keywords for the specified option.
+	 */
+	getOptionKeywords?: ( option: TCompleterOption ) => Array< string >;
+	/**
+	 * A function that returns whether or not the specified option is disabled.
+	 * Disabled options cannot be selected.
+	 */
+	isOptionDisabled?: ( option: TCompleterOption ) => boolean;
+	/**
+	 * A function that returns the label for a given option. A label may be a
+	 * string or a mixed array of strings, elements, and components.
+	 */
+	getOptionLabel: ( option: TCompleterOption ) => OptionLabel;
+	/**
+	 * A function that takes a Range before and a Range after the autocomplete
+	 * trigger and query text and returns a boolean indicating whether the
+	 * completer should be considered for that context.
+	 */
+	allowContext?: ( before: string, after: string ) => boolean;
+	/**
+	 * A function that takes an option and returns how the option should
+	 * be completed. By default, the result is a value to be inserted in the
+	 * text.
+	 * However, a completer may explicitly declare how a completion should be
+	 * treated by returning an object with `action` and `value` properties. The
+	 * `action` declares what should be done with the `value`.
+	 */
+	getOptionCompletion?: (
+		option: TCompleterOption,
+		query: string
+	) => OptionCompletion;
+	/**
+	 * A function that returns an array of items to be displayed in the
+	 * Autocomplete UI. These items have uniform shape and have been filtered by
+	 * `AutocompleterUIProps.filterValue`.
+	 */
+	useItems?: ( filterValue: string ) => readonly [ Array< KeyedOption > ];
+	/**
+	 * Whether or not changes to the `filterValue` should be debounced.
+	 */
+	isDebounced?: boolean;
+	/**
+	 * A CSS class name to be applied to the completion menu.
+	 */
+	className?: string;
+};
+
+type ContentRef = React.RefObject< HTMLElement >;
+
+export type AutocompleterUIProps = {
+	/**
+	 * The value to filter the options by.
+	 */
+	filterValue: string;
+	/**
+	 * An id unique to each instance of the component, used in the IDs of the
+	 * buttons generated for individual options.
+	 */
+	instanceId: number;
+	/**
+	 * The id of to be applied to the listbox of options.
+	 */
+	listBoxId: string | undefined;
+	/**
+	 * The class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The index of the currently selected option.
+	 */
+	selectedIndex: number;
+	/**
+	 * A function to be called when the filterValue changes.
+	 */
+	onChangeOptions: ( items: Array< KeyedOption > ) => void;
+	/**
+	 * A function to be called when an option is selected.
+	 */
+	onSelect: ( option: KeyedOption ) => void;
+	/**
+	 * A function to be called when the completer is reset
+	 * (e.g. when the user hits the escape key).
+	 */
+	onReset?: () => void;
+	/**
+	 * A function that defines the behavior of the completer when it is reset
+	 */
+	reset: ( event: Event ) => void;
+	// This is optional because it's still needed for mobile/native.
+	/**
+	 * The rich text value object the autocompleter is being applied to.
+	 */
+	value?: RichTextValue;
+	/**
+	 * A ref containing the editable element that will serve as the anchor for
+	 * `Autocomplete`'s `Popover`.
+	 */
+	contentRef: ContentRef;
+};
+
+export type CancelablePromise< T = void > = Promise< T > & {
+	canceled?: boolean;
+};
+
+export type UseAutocompleteProps = {
+	/**
+	 * The rich text value object the autocompleter is being applied to.
+	 */
+	record: RichTextValue & {
+		start: NonNullable< RichTextValue[ 'start' ] >;
+		end: NonNullable< RichTextValue[ 'end' ] >;
+	};
+	/**
+	 * A function to be called when an option is selected to insert into the
+	 * existing text.
+	 */
+	onChange: ( value: RichTextValue ) => void;
+	/**
+	 * A function to be called when an option is selected to replace the
+	 * existing text.
+	 */
+	onReplace: ( values: RichTextValue[] ) => void;
+	/**
+	 * An array of all of the completers to apply to the current element.
+	 */
+	completers: Array< WPCompleter >;
+	/**
+	 * A ref containing the editable element that will serve as the anchor for
+	 * `Autocomplete`'s `Popover`.
+	 */
+	contentRef: ContentRef;
+};
+
+export type AutocompleteProps = UseAutocompleteProps & {
+	/**
+	 * A function that returns nodes to be rendered within the Autocomplete.
+	 */
+	children: (
+		props: Omit< ReturnType< typeof useAutocomplete >, 'popover' >
+	) => React.ReactNode;
+	/**
+	 * Whether or not the Autocomplete component is selected, and if its
+	 * `Popover` should be displayed.
+	 */
+	isSelected: boolean;
+};
diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index d940a7bc2fdc24..839464b41260b5 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -1,107 +1,130 @@
 # BaseControl
 
-`BaseControl` is a component used to generate labels and help text for components handling user inputs.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-basecontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-Render a `BaseControl` for a textarea input:
+`BaseControl` is a component used to generate labels and help text for components handling user inputs.
 
 ```jsx
-import { BaseControl } from '@wordpress/components';
-
-// The `id` prop is necessary to accessibly associate the label with the textarea
-const MyBaseControl = () => (
-	<BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
-		<textarea id="textarea-1" />
-	</BaseControl>
+import { BaseControl, useBaseControlProps } from '@wordpress/components';
+
+// Render a `BaseControl` for a textarea input
+const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+	// and the inner control itself. Namely, it takes care of generating a unique `id`,
+	// properly associating it with the `label` and `help` elements.
+	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+
+	return (
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+			<textarea { ...controlProps }>
+			  { children }
+			</textarea>
+		</BaseControl>
+	);
 );
 ```
-
 ## Props
 
-The component accepts the following props:
+### `__nextHasNoMarginBottom`
 
-### id
+Start opting into the new margin-free styles that will become the default in a future version.
 
-The HTML `id` of the element (passed in as a child to `BaseControl`) to which labels and help text are being generated. This is necessary to accessibly associate the label with that element.
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
--   Type: `String`
--   Required: No
+### `as`
 
-### label
+The HTML element or React component to render the component as.
 
-If this property is added, a label will be generated using label property as the content.
+ - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Required: No
 
--   Type: `String`
--   Required: No
+### `className`
 
-### hideLabelFromVision
 
-If true, the label will only be visible to screen readers.
+ - Type: `string`
+ - Required: No
 
--   Type: `Boolean`
--   Required: No
+### `children`
 
-### help
+The content to be displayed within the `BaseControl`.
 
-If this property is added, a help text will be generated using help property as the content.
+ - Type: `ReactNode`
+ - Required: Yes
 
--   Type: `String|WPElement`
--   Required: No
+### `help`
 
-### className
+Additional description for the control.
 
-Any other classes to add to the wrapper div.
+Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
--   Type: `String`
--   Required: No
+ - Type: `ReactNode`
+ - Required: No
 
-### children
+### `hideLabelFromVision`
 
-The content to be displayed within the BaseControl.
+If true, the label will only be visible to screen readers.
 
--   Type: `Element`
--   Required: Yes
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### __nextHasNoMarginBottom
+### `id`
 
-Start opting into the new margin-free styles that will become the default in a future version.
+The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
+This is necessary to accessibly associate the label with that element.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.
+Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
 
-## BaseControl.VisualLabel
+ - Type: `string`
+ - Required: No
 
-`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+### `label`
+
+If this property is added, a label will be generated using label property as the content.
 
-It should only be used in cases where the children being rendered inside BaseControl are already accessibly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would otherwise use if the `label` prop was passed.
+ - Type: `ReactNode`
+ - Required: No
 
-## Usage
+## Subcomponents
+
+### BaseControl.VisualLabel
+
+`BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+
+It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+otherwise use if the `label` prop was passed.
 
 ```jsx
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl help="This button is already accessibly labeled.">
+	<BaseControl
+		__nextHasNoMarginBottom
+		help="This button is already accessibly labeled."
+	>
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>
 );
 ```
+#### Props
 
-### Props
-
-#### className
+##### `as`
 
-Any other classes to add to the wrapper div.
+The HTML element or React component to render the component as.
 
--   Type: `String`
--   Required: No
+ - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ...`
+ - Required: No
 
-#### children
+##### `children`
 
 The content to be displayed within the `BaseControl.VisualLabel`.
 
--   Type: `Element`
--   Required: Yes
+ - Type: `ReactNode`
+ - Required: Yes
diff --git a/packages/components/src/base-control/docs-manifest.json b/packages/components/src/base-control/docs-manifest.json
new file mode 100644
index 00000000000000..fe4cad660a6dc1
--- /dev/null
+++ b/packages/components/src/base-control/docs-manifest.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "BaseControl",
+	"filePath": "./index.tsx",
+	"subcomponents": [
+		{
+			"displayName": "VisualLabel",
+			"preferredDisplayName": "BaseControl.VisualLabel",
+			"filePath": "./index.tsx"
+		}
+	]
+}
diff --git a/packages/components/src/base-control/hooks.ts b/packages/components/src/base-control/hooks.ts
new file mode 100644
index 00000000000000..7aa7c242575220
--- /dev/null
+++ b/packages/components/src/base-control/hooks.ts
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '.';
+import type { BaseControlProps } from './types';
+
+/**
+ * Generate props for the `BaseControl` and the inner control itself.
+ *
+ * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements.
+ *
+ * @param props
+ */
+export function useBaseControlProps(
+	props: Omit< BaseControlProps, 'children' >
+) {
+	const { help, id: preferredId, ...restProps } = props;
+
+	const uniqueId = useInstanceId(
+		BaseControl,
+		'wp-components-base-control',
+		preferredId
+	);
+
+	return {
+		baseControlProps: {
+			id: uniqueId,
+			help,
+			...restProps,
+		},
+		controlProps: {
+			id: uniqueId,
+			...( !! help ? { 'aria-describedby': `${ uniqueId }__help` } : {} ),
+		},
+	};
+}
diff --git a/packages/components/src/base-control/index.native.js b/packages/components/src/base-control/index.native.js
index 1bf653768e7532..8ae2c35ea0595c 100644
--- a/packages/components/src/base-control/index.native.js
+++ b/packages/components/src/base-control/index.native.js
@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 
 export default function BaseControl( { label, help, children } ) {
 	return (
-		<View accessible={ true } accessibilityLabel={ label }>
+		<View accessible accessibilityLabel={ label }>
 			{ label && <Text>{ label }</Text> }
 			{ children }
 			{ help && <Text>{ help }</Text> }
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index 122577fdeba62c..423636a92cd5f0 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,35 +22,38 @@ import {
 	StyledHelp,
 	StyledVisualLabel,
 } from './styles/base-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
+
+export { useBaseControlProps } from './hooks';
+
+const UnconnectedBaseControl = (
+	props: WordPressComponentProps< BaseControlProps, null >
+) => {
+	const {
+		__nextHasNoMarginBottom = false,
+		__associatedWPComponentName = 'BaseControl',
+		id,
+		label,
+		hideLabelFromVision = false,
+		help,
+		className,
+		children,
+	} = useContextSystem( props, 'BaseControl' );
+
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			`Bottom margin styles for wp.components.${ __associatedWPComponentName }`,
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
 
-/**
- * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
- *
- * @example
- * // Render a `BaseControl` for a textarea input
- * import { BaseControl } from '@wordpress/components';
- *
- * // The `id` prop is necessary to accessibly associate the label with the textarea
- * const MyBaseControl = () => (
- *   <BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
- *     <textarea id="textarea-1" />
- *   </BaseControl>
- * );
- */
-export const BaseControl = ( {
-	__nextHasNoMarginBottom = false,
-	id,
-	label,
-	hideLabelFromVision = false,
-	help,
-	className,
-	children,
-}: BaseControlProps ) => {
 	return (
-		<Wrapper
-			className={ classnames( 'components-base-control', className ) }
-		>
+		<Wrapper className={ className }>
 			<StyledField
 				className="components-base-control__field"
 				// TODO: Official deprecation for this should start after all internal usages have been migrated
@@ -68,9 +78,7 @@ export const BaseControl = ( {
 					( hideLabelFromVision ? (
 						<VisuallyHidden as="label">{ label }</VisuallyHidden>
 					) : (
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
+						<VisualLabel>{ label }</VisualLabel>
 					) ) }
 				{ children }
 			</StyledField>
@@ -87,40 +95,75 @@ export const BaseControl = ( {
 	);
 };
 
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- *
- * @example
- * import { BaseControl } from '@wordpress/components';
- *
- * const MyBaseControl = () => (
- * 	<BaseControl help="This button is already accessibly labeled.">
- * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
- * 		<Button>Select an author</Button>
- * 	</BaseControl>
- * );
- */
-export const VisualLabel = ( {
-	className,
-	children,
-	...props
-}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {
+const UnforwardedVisualLabel = (
+	props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >,
+	ref: ForwardedRef< any >
+) => {
+	const { className, children, ...restProps } = props;
+
 	return (
 		<StyledVisualLabel
-			{ ...props }
-			className={ classnames(
-				'components-base-control__label',
-				className
-			) }
+			ref={ ref }
+			{ ...restProps }
+			className={ clsx( 'components-base-control__label', className ) }
 		>
 			{ children }
 		</StyledVisualLabel>
 	);
 };
-BaseControl.VisualLabel = VisualLabel;
+
+export const VisualLabel = forwardRef( UnforwardedVisualLabel );
+
+/**
+ * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
+ *
+ * ```jsx
+ * import { BaseControl, useBaseControlProps } from '@wordpress/components';
+ *
+ * // Render a `BaseControl` for a textarea input
+ * const MyCustomTextareaControl = ({ children, ...baseProps }) => (
+ * 	// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`
+ * 	// and the inner control itself. Namely, it takes care of generating a unique `id`,
+ * 	// properly associating it with the `label` and `help` elements.
+ * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
+ *
+ * 	return (
+ * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * 			<textarea { ...controlProps }>
+ * 			  { children }
+ * 			</textarea>
+ * 		</BaseControl>
+ * 	);
+ * );
+ * ```
+ */
+export const BaseControl = Object.assign(
+	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
+
+	{
+		/**
+		 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+		 *
+		 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+		 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+		 * otherwise use if the `label` prop was passed.
+		 *
+		 * ```jsx
+		 * import { BaseControl } from '@wordpress/components';
+		 *
+		 * const MyBaseControl = () => (
+		 * 	<BaseControl
+		 * 		__nextHasNoMarginBottom
+		 * 		help="This button is already accessibly labeled."
+		 * 	>
+		 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
+		 * 		<Button>Select an author</Button>
+		 * 	</BaseControl>
+		 * );
+		 * ```
+		 */
+		VisualLabel,
+	}
+);
 
 export default BaseControl;
diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..69188f869656da
--- /dev/null
+++ b/packages/components/src/base-control/stories/index.story.tsx
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl, { useBaseControlProps } from '..';
+import Button from '../../button';
+
+const meta: Meta< typeof BaseControl > = {
+	title: 'Components/Selection & Input/Common/BaseControl',
+	id: 'components-basecontrol',
+	component: BaseControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'BaseControl.VisualLabel': BaseControl.VisualLabel,
+	},
+	argTypes: {
+		children: { control: false },
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
+	const { baseControlProps, controlProps } = useBaseControlProps( props );
+
+	return (
+		<BaseControl { ...baseControlProps }>
+			<textarea style={ { display: 'block' } } { ...controlProps } />
+		</BaseControl>
+	);
+};
+
+export const Default: StoryFn< typeof BaseControl > =
+	BaseControlWithTextarea.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Label text',
+};
+
+export const WithHelpText = BaseControlWithTextarea.bind( {} );
+WithHelpText.args = {
+	...Default.args,
+	help: 'Help text adds more explanation.',
+};
+
+/**
+ * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
+ *
+ * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
+ * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
+ * otherwise use if the `label` prop was passed.
+ */
+export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
+	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
+
+	return (
+		<BaseControl { ...props }>
+			<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>
+			<div>
+				<Button variant="secondary">Select an author</Button>
+			</div>
+		</BaseControl>
+	);
+};
+WithVisualLabel.args = {
+	...Default.args,
+	help: 'This button is already accessibly labeled.',
+	label: undefined,
+};
diff --git a/packages/components/src/base-control/stories/index.tsx b/packages/components/src/base-control/stories/index.tsx
deleted file mode 100644
index edc850f760745f..00000000000000
--- a/packages/components/src/base-control/stories/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '..';
-import Button from '../../button';
-
-const meta: ComponentMeta< typeof BaseControl > = {
-	title: 'Components/BaseControl',
-	component: BaseControl,
-	argTypes: {
-		children: { control: { type: null } },
-		help: { control: { type: 'text' } },
-		label: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = ( {
-	id,
-	...props
-} ) => {
-	return (
-		<BaseControl id={ id } { ...props }>
-			<textarea style={ { display: 'block' } } id={ id } />
-		</BaseControl>
-	);
-};
-
-export const Default: ComponentStory< typeof BaseControl > =
-	BaseControlWithTextarea.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-	id: 'textarea-default-1',
-	label: 'Label text',
-};
-
-export const WithHelpText = BaseControlWithTextarea.bind( {} );
-WithHelpText.args = {
-	...Default.args,
-	id: 'textarea-with-help-text-1',
-	help: 'Help text adds more explanation.',
-};
-
-/**
- * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.
- *
- * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,
- * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
- * otherwise use if the `label` prop was passed.
- */
-export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
-	props
-) => {
-	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
-	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
-
-	return (
-		<BaseControl { ...props }>
-			<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>
-			<div>
-				<Button variant="secondary">Select an author</Button>
-			</div>
-		</BaseControl>
-	);
-};
-WithVisualLabel.args = {
-	...Default.args,
-	help: 'This button is already accessibly labeled.',
-	id: undefined,
-	label: undefined,
-};
diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
index abd2f3affc45ae..d633fcdd7e7a77 100644
--- a/packages/components/src/base-control/styles/base-control-styles.ts
+++ b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };
@@ -37,7 +37,7 @@ export const StyledField = styled.div`
 const labelStyles = css`
 	${ baseLabelTypography };
 
-	display: inline-block;
+	display: block;
 	margin-bottom: ${ space( 2 ) };
 	/**
 	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from
diff --git a/packages/components/src/base-control/test/index.tsx b/packages/components/src/base-control/test/index.tsx
new file mode 100644
index 00000000000000..07623a8b4c3e7d
--- /dev/null
+++ b/packages/components/src/base-control/test/index.tsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '..';
+import { useBaseControlProps } from '../hooks';
+import type { BaseControlProps } from '../types';
+
+const MyBaseControl = ( props: Omit< BaseControlProps, 'children' > ) => {
+	const { baseControlProps, controlProps } = useBaseControlProps( props );
+
+	return (
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+			<textarea { ...controlProps } />
+		</BaseControl>
+	);
+};
+
+describe( 'BaseControl', () => {
+	it( 'should render help text as description', () => {
+		render( <MyBaseControl label="Text" help="My help text" /> );
+
+		expect(
+			screen.getByRole( 'textbox', {
+				description: 'My help text',
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should still render help as aria-describedby when not plain text', () => {
+		render(
+			<MyBaseControl
+				label="Text"
+				help={ <a href="/foo">My help text</a> }
+			/>
+		);
+
+		const textarea = screen.getByRole( 'textbox' );
+		const help = screen.getByRole( 'link', {
+			name: 'My help text',
+		} );
+
+		expect( textarea ).toHaveAttribute( 'aria-describedby' );
+		expect(
+			// eslint-disable-next-line testing-library/no-node-access
+			help.closest( `#${ textarea.getAttribute( 'aria-describedby' ) }` )
+		).toBeVisible();
+	} );
+} );
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 490163d92e889c..9ca2b7bdd4c6ed 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -11,12 +11,24 @@ export type BaseControlProps = {
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**
-	 * The HTML `id` of the element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
+	 * Temporary private prop for showing better deprecation messages,
+	 * e.g. `Some feature from wp.components.${ __associatedWPControl } is deprecated`.
+	 *
+	 * @ignore
+	 */
+	__associatedWPComponentName?: string;
+	/**
+	 * The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 	 * This is necessary to accessibly associate the label with that element.
+	 *
+	 * The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you.
+	 * Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
 	 */
 	id?: string;
 	/**
-	 * If this property is added, a help text will be generated using help property as the content.
+	 * Additional description for the control.
+	 *
+	 * Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**
@@ -37,5 +49,8 @@ export type BaseControlProps = {
 };
 
 export type BaseControlVisualLabelProps = {
+	/**
+	 * The content to be displayed within the `BaseControl.VisualLabel`.
+	 */
 	children: ReactNode;
 };
diff --git a/packages/components/src/base-field/README.md b/packages/components/src/base-field/README.md
deleted file mode 100644
index 228cd328429242..00000000000000
--- a/packages/components/src/base-field/README.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# BaseField
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`BaseField` is an internal (i.e., not exported in the `index.js`) primitive component used for building more complex fields like `TextField`. It provides error handling and focus styles for field components. It does _not_ handle layout of the component aside from wrapping the field in a `Flex` wrapper.
-
-## Usage
-
-`BaseField` is primarily used as a hook rather than a component:
-
-```js
-function useExampleField( props ) {
-	const { 
-		as = 'input',
-		...baseProps,
-	} = useBaseField( props );
-
-	const inputProps = {
-		as,
-		// more cool stuff here
-	}
-
-	return { inputProps, ...baseProps };
-}
-
-function ExampleField( props, forwardRef ) {
-	const {
-		preFix,
-		affix,
-		disabled,
-		inputProps,
-		...baseProps
-	} = useExampleField( props );
-
-	return (
-		<View { ...baseProps } disabled={ disabled }>
-			{preFix}
-			<View
-				autocomplete="off"
-				{ ...inputProps }
-				disabled={ disabled }
-			/>
-			{affix}
-		</View>
-	);
-}
-```
-
-## Props
-
-### `hasError`: `boolean`
-
-Renders an error style around the component.
-
-### `disabled`: `boolean`
-
-Whether the field is disabled.
-
-### `isInline`: `boolean`
-
-Renders a component that can be inlined in some text.
-
-### `isSubtle`: `boolean`
-
-Renders a subtle variant of the component.
diff --git a/packages/components/src/base-field/hook.js b/packages/components/src/base-field/hook.js
deleted file mode 100644
index afaa9e56f74b02..00000000000000
--- a/packages/components/src/base-field/hook.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem } from '../ui/context';
-import { useControlGroupContext } from '../ui/control-group';
-import { useFlex } from '../flex';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
-
-/**
- * @typedef OwnProps
- * @property {boolean} [hasError=false] Renders an error.
- * @property {boolean} [disabled]       Whether the field is disabled.
- * @property {boolean} [isInline=false] Renders as an inline element (layout).
- * @property {boolean} [isSubtle=false] Renders a subtle variant.
- */
-
-/** @typedef {import('../flex/types').FlexProps & OwnProps} Props */
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<Props, 'div'>} props
- */
-export function useBaseField( props ) {
-	const {
-		className,
-		hasError = false,
-		isInline = false,
-		isSubtle = false,
-		// Extract these because useFlex doesn't accept it.
-		defaultValue,
-		disabled,
-		...flexProps
-	} = useContextSystem( props, 'BaseField' );
-
-	const { styles: controlGroupStyles } = useControlGroupContext();
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.BaseField,
-				controlGroupStyles,
-				isSubtle && styles.subtle,
-				hasError && styles.error,
-				isInline && styles.inline,
-				className
-			),
-		[ className, controlGroupStyles, cx, hasError, isInline, isSubtle ]
-	);
-
-	return {
-		...useFlex( { ...flexProps, className: classes } ),
-		disabled,
-		defaultValue,
-	};
-}
diff --git a/packages/components/src/base-field/index.js b/packages/components/src/base-field/index.js
deleted file mode 100644
index 263e623dae3167..00000000000000
--- a/packages/components/src/base-field/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { useBaseField } from './hook';
diff --git a/packages/components/src/base-field/styles.js b/packages/components/src/base-field/styles.js
deleted file mode 100644
index 30bd93cd41aa4b..00000000000000
--- a/packages/components/src/base-field/styles.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { CONFIG, COLORS, reduceMotion } from '../utils';
-import { safariOnly } from '../utils/browsers';
-
-export const BaseField = css`
-	background: ${ CONFIG.controlBackgroundColor };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	border: 1px solid;
-	border-color: ${ CONFIG.controlBorderColor };
-	box-shadow: ${ CONFIG.controlBoxShadow };
-	display: flex;
-	flex: 1;
-	font-size: ${ CONFIG.fontSize };
-	outline: none;
-	padding: 0 8px;
-	position: relative;
-	transition: border-color ${ CONFIG.transitionDurationFastest } ease;
-	${ reduceMotion( 'transition' ) }
-	width: 100%;
-
-	&[disabled] {
-		opacity: 0.6;
-	}
-
-	&:hover {
-		border-color: ${ CONFIG.controlBorderColorHover };
-	}
-
-	&:focus,
-	&[data-focused='true'] {
-		border-color: ${ COLORS.ui.theme };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-	}
-`;
-
-export const subtle = css`
-	background-color: transparent;
-
-	&:hover,
-	&:active,
-	&:focus,
-	&[data-focused='true'] {
-		background: ${ CONFIG.controlBackgroundColor };
-	}
-`;
-
-export const error = css`
-	border-color: ${ CONFIG.controlDestructiveBorderColor };
-
-	&:hover,
-	&:active {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-	}
-
-	&:focus,
-	&[data-focused='true'] {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-		box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
-	}
-`;
-
-export const errorFocus = css`
-	border-color: ${ CONFIG.controlDestructiveBorderColor };
-	box-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };
-
-	&:hover {
-		border-color: ${ CONFIG.controlDestructiveBorderColor };
-	}
-`;
-
-export const inline = css`
-	display: inline-flex;
-	vertical-align: baseline;
-	width: auto;
-
-	${ safariOnly`
-			vertical-align: middle;
-	` }
-`;
diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap
deleted file mode 100644
index 99582f8d40879f..00000000000000
--- a/packages/components/src/base-field/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`base field props should render error styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -11,11 +11,11 @@
-      "-webkit-justify-content": "space-between",
-      "-webkit-transition": "border-color 100ms ease",
-      "align-items": "center",
-      "background": "#fff",
-      "border": "1px solid",
--     "border-color": "#d94f4f",
-+     "border-color": "#757575",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
-      "display": "flex",
-      "flex": "1",
-      "flex-direction": "row",
-`;
-
-exports[`base field props should render inline styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -14,19 +14,18 @@
-      "background": "#fff",
-      "border": "1px solid",
-      "border-color": "#757575",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
--     "display": "inline-flex",
-+     "display": "flex",
-      "flex": "1",
-      "flex-direction": "row",
-      "font-size": "13px",
-      "gap": "calc(4px * 2)",
-      "justify-content": "space-between",
-      "outline": "none",
-      "padding": "0 8px",
-      "position": "relative",
-      "transition": "border-color 100ms ease",
--     "vertical-align": "baseline",
--     "width": "auto",
-+     "width": "100%",
-    },
-  ]
-`;
-
-exports[`base field props should render subtle styles 1`] = `
-Snapshot Diff:
-- Received styles
-+ Base styles
-
-@@ -10,11 +10,10 @@
-      "-webkit-flex-direction": "row",
-      "-webkit-justify-content": "space-between",
-      "-webkit-transition": "border-color 100ms ease",
-      "align-items": "center",
-      "background": "#fff",
--     "background-color": "transparent",
-      "border": "1px solid",
-      "border-color": "#757575",
-      "border-radius": "2px",
-      "box-shadow": "transparent",
-      "display": "flex",
-`;
-
-exports[`base field should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  background: #fff;
-  border-radius: 2px;
-  border: 1px solid;
-  border-color: #757575;
-  box-shadow: transparent;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  font-size: 13px;
-  outline: none;
-  padding: 0 8px;
-  position: relative;
-  -webkit-transition: border-color 100ms ease;
-  transition: border-color 100ms ease;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-0 {
-    transition-duration: 0ms;
-  }
-}
-
-.emotion-0[disabled] {
-  opacity: 0.6;
-}
-
-.emotion-0:hover {
-  border-color: #757575;
-}
-
-.emotion-0:focus,
-.emotion-0[data-focused='true'] {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-
-<div>
-  <div
-    class="components-flex components-base-field emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="BaseField"
-  />
-</div>
-`;
diff --git a/packages/components/src/base-field/test/index.js b/packages/components/src/base-field/test/index.js
deleted file mode 100644
index 871bd8b3f595ee..00000000000000
--- a/packages/components/src/base-field/test/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { useBaseField } from '../index';
-import { View } from '../../view';
-
-const TestField = ( props ) => {
-	return <View { ...useBaseField( props ) } />;
-};
-
-describe( 'base field', () => {
-	it( 'should render correctly', () => {
-		const { container } = render( <TestField /> );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	describe( 'props', () => {
-		it( 'should render error styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField hasError data-testid="base-field-error" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-error' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-
-		it( 'should render inline styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField isInline data-testid="base-field-inline" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-inline' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-
-		it( 'should render subtle styles', () => {
-			render(
-				<>
-					<TestField data-testid="base-field" />
-					<TestField isSubtle data-testid="base-field-subtle" />
-				</>
-			);
-			expect(
-				screen.getByTestId( 'base-field-subtle' )
-			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
-		} );
-	} );
-
-	describe( 'useBaseField', () => {
-		it( 'should pass through disabled and defaultValue props', () => {
-			// wrap this in a component so that `useContext` calls don't fail inside the hook
-			// assertions will still run as normal when we `render` the component :)
-			const Component = () => {
-				const disabled = Symbol.for( 'disabled' );
-				const defaultValue = Symbol.for( 'defaultValue' );
-
-				const result = useBaseField( { disabled, defaultValue } );
-
-				expect( result.disabled ).toBe( disabled );
-				expect( result.defaultValue ).toBe( defaultValue );
-
-				return null;
-			};
-
-			render( <Component /> );
-		} );
-	} );
-} );
diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx b/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
index c4001369f8e015..5388a381deb395 100644
--- a/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx
@@ -10,13 +10,14 @@ import { __ } from '@wordpress/i18n';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { View } from '../../view';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlLinkedButton } from './hook';
 
 import type { LinkedButtonProps } from '../types';
 
 const BorderBoxControlLinkedButton = (
-	props: WordPressComponentProps< LinkedButtonProps, 'div' >,
+	props: WordPressComponentProps< LinkedButtonProps, 'button' >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const { className, isLinked, ...buttonProps } =
@@ -28,7 +29,7 @@ const BorderBoxControlLinkedButton = (
 			<View className={ className }>
 				<Button
 					{ ...buttonProps }
-					isSmall
+					size="small"
 					icon={ isLinked ? link : linkOff }
 					iconSize={ 24 }
 					aria-label={ label }
diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
index 043c101b05f5a4..3d535a6583a13c 100644
--- a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
@@ -7,13 +7,14 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { LinkedButtonProps } from '../types';
 
 export function useBorderBoxControlLinkedButton(
-	props: WordPressComponentProps< LinkedButtonProps, 'div' >
+	props: WordPressComponentProps< LinkedButtonProps, 'button' >
 ) {
 	const {
 		className,
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index b5b80c0aa6b500..94e1728076b181 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -11,7 +11,8 @@ import { useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlVisualizer from '../border-box-control-visualizer';
 import { BorderControl } from '../../border-control';
 import { Grid } from '../../grid';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlSplitControls } from './hook';
 
 import type { BorderControlProps } from '../../border-control/types';
@@ -33,7 +34,6 @@ const BorderBoxControlSplitControls = (
 		rightAlignedClassName,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
@@ -65,19 +65,19 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		isCompact: true,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		size,
+		__shouldNotWarnDeprecated36pxSize: true,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
-		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
+		<Grid { ...otherProps } ref={ mergedRef } gap={ 3 }>
 			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -85,7 +85,7 @@ const BorderBoxControlSplitControls = (
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -94,7 +94,7 @@ const BorderBoxControlSplitControls = (
 			/>
 			<BorderControl
 				className={ rightAlignedClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -103,7 +103,7 @@ const BorderBoxControlSplitControls = (
 			/>
 			<BorderControl
 				className={ centeredClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
 				__unstablePopoverProps={ popoverProps }
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
index 46e9f7b78ff956..3a8194819ef0c8 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';
@@ -21,7 +22,6 @@ export function useBorderBoxControlSplitControls(
 		enableAlpha = false,
 		enableStyle = true,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
@@ -49,7 +49,6 @@ export function useBorderBoxControlSplitControls(
 		enableStyle,
 		rightAlignedClassName,
 		size,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
index c0abb92f3803ba..fe457eccac8c0e 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
@@ -1,13 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlVisualizer } from './hook';
 
 import type { VisualizerProps } from '../types';
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
index 4e6e69e9d8452b..8cc678c7e2708c 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';
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..9d51be2901a2a3 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
@@ -1,12 +1,7 @@
 # BorderBoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-<br />
-
-This component provides users with the ability to configure a single "flat"
-border or separate borders per side.
+An input control for the color, style, and width of the border of a box. The
+border can be customized as a whole, or individually for each side of the box.
 
 ## Development guidelines
 
@@ -27,7 +22,8 @@ show "Mixed" placeholder text.
 ## Usage
 
 ```jsx
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import { useState } from 'react';
+import { BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -51,6 +47,7 @@ const MyBorderBoxControl = () => {
 
 	return (
 		<BorderBoxControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }
@@ -75,35 +72,35 @@ colors are organized by multiple origins.
 
 Each color may be an object containing a `name` and `color` value.
 
-- Required: No
-- Default: `[]`
+-   Required: No
+-   Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
 This toggles the ability to choose custom colors.
 
-- Required: No
+-   Required: No
 
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting
 custom colors.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selections.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `hideLabelFromVision`: `boolean`
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `label`: `string`
 
@@ -112,7 +109,7 @@ If provided, a label will be generated using this as the content.
 _Whether it is visible only to screen readers is controlled via
 `hideLabelFromVision`._
 
-- Required: No
+-   Required: No
 
 ### `onChange`: `( value?: Object ) => void`
 
@@ -122,7 +119,7 @@ borders, or `undefined`.
 
 _Note: The will be `undefined` if a user clears all borders._
 
-- Required: Yes
+-   Required: Yes
 
 ### `popoverPlacement`: `string`
 
@@ -132,21 +129,21 @@ By default, popovers are displayed relative to the button that initiated the pop
 
 The available base placements are 'top', 'right', 'bottom', 'left'. Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.
 
-- Required: No
+-   Required: No
 
 ### `popoverOffset`: `number`
 
 The space between the popover and the control wrapper.
 
-- Required: No
+-   Required: No
 
 ### `size`: `string`
 
 Size of the control.
 
-- Required: No
-- Default: `default`
-- Allowed values: `default`, `__unstable-large`
+-   Required: No
+-   Default: `default`
+-   Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
@@ -157,6 +154,7 @@ properties or a "split" border which defines the previous properties but for
 each side; `top`, `right`, `bottom`, and `left`.
 
 Examples:
+
 ```js
 const flatBorder = { color: '#72aee6', style: 'solid', width: '1px' };
 const splitBorders = {
@@ -167,4 +165,11 @@ const splitBorders = {
 };
 ```
 
-- Required: No
+-   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index bbb2b1e05afc08..0e84c7b56ee483 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -14,7 +14,8 @@ import { BorderControl } from '../../border-control';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControl } from './hook';
 
 import type { BorderBoxControlProps } from '../types';
@@ -62,7 +63,6 @@ const UnconnectedBorderBoxControl = (
 		splitValue,
 		toggleLinked,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControl( props );
@@ -89,7 +89,6 @@ const UnconnectedBorderBoxControl = (
 		);
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
-
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel
@@ -112,16 +111,14 @@ const UnconnectedBorderBoxControl = (
 						__unstablePopoverProps={ popoverProps }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
-						withSlider={ true }
+						withSlider
 						width={
 							size === '__unstable-large' ? '116px' : '110px'
 						}
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__shouldNotWarnDeprecated36pxSize
 						size={ size }
 					/>
 				) : (
@@ -134,9 +131,6 @@ const UnconnectedBorderBoxControl = (
 						popoverPlacement={ popoverPlacement }
 						popoverOffset={ popoverOffset }
 						value={ splitValue }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
@@ -154,22 +148,11 @@ const UnconnectedBorderBoxControl = (
 };
 
 /**
- * The `BorderBoxControl` effectively has two view states. The first, a "linked"
- * view, allows configuration of a flat border via a single `BorderControl`.
- * The second, a "split" view, contains a `BorderControl` for each side
- * as well as a visualizer for the currently selected borders. Each view also
- * contains a button to toggle between the two.
- *
- * When switching from the "split" view to "linked", if the individual side
- * borders are not consistent, the "linked" view will display any border
- * properties selections that are consistent while showing a mixed state for
- * those that aren't. For example, if all borders had the same color and style
- * but different widths, then the border dropdown in the "linked" view's
- * `BorderControl` would show that consistent color and style but the "linked"
- * view's width input would show "Mixed" placeholder text.
+ * An input control for the color, style, and width of the border of a box. The
+ * border can be customized as a whole, or individually for each side of the box.
  *
  * ```jsx
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { BorderBoxControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [
@@ -193,6 +176,7 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index fc3214efbcd569..6ab30056665433 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -16,8 +16,10 @@ import {
 	isCompleteBorder,
 	isEmptyBorder,
 } from '../utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
@@ -33,11 +35,20 @@ export function useBorderBoxControl(
 		enableStyle = true,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderBoxControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -133,10 +144,9 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
-		size,
+		size: computedSize,
 		splitValue,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..3f118ae7cb37cc
--- /dev/null
+++ b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { BorderBoxControl } from '../';
+
+const meta: Meta< typeof BorderBoxControl > = {
+	title: 'Components/BorderBoxControl',
+	component: BorderBoxControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+
+const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
+	const { onChange, ...otherProps } = props;
+	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
+
+	const onChangeMerged: ComponentProps<
+		typeof BorderBoxControl
+	>[ 'onChange' ] = ( newBorders ) => {
+		setBorders( newBorders );
+		onChange( newBorders );
+	};
+
+	return (
+		<>
+			<BorderBoxControl
+				{ ...otherProps }
+				onChange={ onChangeMerged }
+				value={ borders }
+			/>
+			<hr
+				style={ {
+					marginTop: '100px',
+					borderColor: '#ddd',
+					borderStyle: 'solid',
+					borderBottom: 'none',
+				} }
+			/>
+			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
+				The BorderBoxControl is intended to be used within a component
+				that will provide reset controls. The button below is only for
+				convenience.
+			</p>
+			<Button
+				variant="primary"
+				onClick={ () => onChangeMerged( undefined ) }
+			>
+				Reset
+			</Button>
+		</>
+	);
+};
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Borders',
+	enableStyle: true,
+	__next40pxDefaultSize: true,
+};
diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx
deleted file mode 100644
index b391c2f00f592b..00000000000000
--- a/packages/components/src/border-box-control/stories/index.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import Popover from '../../popover';
-import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-
-const meta: ComponentMeta< typeof BorderBoxControl > = {
-	title: 'Components (Experimental)/BorderBoxControl',
-	component: BorderBoxControl,
-	argTypes: {
-		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-// Available border colors.
-const colors = [
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
-	const { onChange, ...otherProps } = props;
-	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
-
-	const onChangeMerged: ComponentProps<
-		typeof BorderBoxControl
-	>[ 'onChange' ] = ( newBorders ) => {
-		setBorders( newBorders );
-		onChange( newBorders );
-	};
-
-	return (
-		<SlotFillProvider>
-			<BorderBoxControl
-				{ ...otherProps }
-				onChange={ onChangeMerged }
-				value={ borders }
-			/>
-			<hr
-				style={ {
-					marginTop: '100px',
-					borderColor: '#ddd',
-					borderStyle: 'solid',
-					borderBottom: 'none',
-				} }
-			/>
-			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
-				The BorderBoxControl is intended to be used within a component
-				that will provide reset controls. The button below is only for
-				convenience.
-			</p>
-			<Button
-				variant="primary"
-				onClick={ () => onChangeMerged( undefined ) }
-			>
-				Reset
-			</Button>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-export const Default = Template.bind( {} );
-Default.args = {
-	colors,
-	label: 'Borders',
-};
diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
deleted file mode 100644
index af805aa4bde118..00000000000000
--- a/packages/components/src/border-box-control/test/index.js
+++ /dev/null
@@ -1,524 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { BorderBoxControl } from '../';
-
-const colors = [
-	{ name: 'Gray', color: '#f6f7f7' },
-	{ name: 'Blue', color: '#72aee6' },
-	{ name: 'Red', color: '#e65054' },
-	{ name: 'Green', color: '#00a32a' },
-	{ name: 'Yellow', color: '#bd8600' },
-];
-
-const defaultBorder = {
-	color: '#72aee6',
-	style: 'solid',
-	width: '1px',
-};
-
-const defaultBorders = {
-	top: defaultBorder,
-	right: defaultBorder,
-	bottom: defaultBorder,
-	left: defaultBorder,
-};
-
-const mixedBorders = {
-	top: { color: '#f6f7f7', style: 'solid', width: '1px' },
-	right: { color: '#e65054', style: 'dashed', width: undefined },
-	bottom: { color: undefined, style: 'dotted', width: '2rem' },
-	left: { color: '#bd8600', style: undefined, width: '0.75em' },
-};
-
-const props = {
-	colors,
-	label: 'Border Box',
-	onChange: jest.fn().mockImplementation( ( newValue ) => {
-		props.value = newValue;
-	} ),
-	value: undefined,
-};
-
-const toggleLabelRegex = /Border color( and style)* picker/;
-const colorPickerRegex = /Border color picker/;
-
-describe( 'BorderBoxControl', () => {
-	describe( 'Linked view rendering', () => {
-		it( 'should render correctly when no value provided', () => {
-			render( <BorderBoxControl { ...props } /> );
-
-			const label = screen.getByText( props.label );
-			const colorButton = screen.getByLabelText( toggleLabelRegex );
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-			const unitSelect = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
-			const slider = screen.getByRole( 'slider', {
-				name: 'Border width',
-			} );
-			const linkedButton = screen.getByLabelText( 'Unlink sides' );
-
-			expect( label ).toBeInTheDocument();
-			expect( colorButton ).toBeInTheDocument();
-			expect( widthInput ).toBeInTheDocument();
-			expect( widthInput ).not.toHaveAttribute( 'placeholder' );
-			expect( unitSelect ).toBeInTheDocument();
-			expect( slider ).toBeInTheDocument();
-			expect( linkedButton ).toBeInTheDocument();
-		} );
-
-		it( 'should hide label', () => {
-			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
-
-			const label = screen.getByText( props.label );
-
-			// As visually hidden labels are still included in the document
-			// and do not have `display: none` styling, we can't rely on
-			// `.toBeInTheDocument()` or `.toBeVisible()` assertions.
-			expect( label ).toHaveAttribute(
-				'data-wp-component',
-				'VisuallyHidden'
-			);
-		} );
-
-		it( 'should show correct width value when flat border value provided', () => {
-			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
-
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-
-			expect( widthInput.value ).toBe( '1' );
-		} );
-
-		it( 'should show correct width value when consistent split borders provided', () => {
-			render(
-				<BorderBoxControl { ...props } value={ defaultBorders } />
-			);
-
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-
-			expect( widthInput.value ).toBe( '1' );
-		} );
-
-		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
-
-			// First render of control with mixed values should show split view.
-			await user.click(
-				screen.getByRole( 'button', { name: 'Link sides' } )
-			);
-
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-			const unitSelect = screen.queryByRole( 'combobox', {
-				name: 'Select unit',
-			} );
-
-			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
-			expect( unitSelect ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render shared border width and unit select when switching to linked view', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			// Render control with mixed border values but consistent widths.
-			render(
-				<BorderBoxControl
-					{ ...props }
-					value={ {
-						top: { color: 'red', width: '5px', style: 'solid' },
-						right: { color: 'blue', width: '5px', style: 'dashed' },
-						bottom: {
-							color: 'green',
-							width: '5px',
-							style: 'solid',
-						},
-						left: {
-							color: 'yellow',
-							width: '5px',
-							style: 'dotted',
-						},
-					} }
-				/>
-			);
-
-			// First render of control with mixed values should show split view.
-			await user.click(
-				screen.getByRole( 'button', { name: 'Link sides' } )
-			);
-
-			const linkedInput = screen.getByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-			const unitSelect = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
-
-			expect( linkedInput.value ).toBe( '5' );
-			expect( unitSelect ).toBeInTheDocument();
-		} );
-
-		it( 'should omit style options when requested', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
-
-			const colorButton = screen.getByLabelText( colorPickerRegex );
-			await user.click( colorButton );
-
-			const styleLabel = screen.queryByText( 'Style' );
-			const solidButton = screen.queryByRole( 'button', {
-				name: 'Solid',
-			} );
-			const dashedButton = screen.queryByRole( 'button', {
-				name: 'Dashed',
-			} );
-			const dottedButton = screen.queryByRole( 'button', {
-				name: 'Dotted',
-			} );
-
-			expect( styleLabel ).not.toBeInTheDocument();
-			expect( solidButton ).not.toBeInTheDocument();
-			expect( dashedButton ).not.toBeInTheDocument();
-			expect( dottedButton ).not.toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Split view rendering', () => {
-		it( 'should render split view by default when mixed values provided', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
-
-			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
-			const widthInputs = screen.getAllByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-			const unitSelects = screen.getAllByRole( 'combobox', {
-				name: 'Select unit',
-			} );
-			const sliders = screen.queryAllByRole( 'slider', {
-				name: 'Border width',
-			} );
-			const linkedButton = screen.getByLabelText( 'Link sides' );
-
-			expect( colorButtons.length ).toBe( 4 );
-			expect( widthInputs.length ).toBe( 4 );
-			expect( unitSelects.length ).toBe( 4 );
-			expect( sliders.length ).toBe( 0 );
-			expect( linkedButton ).toBeInTheDocument();
-		} );
-
-		it( 'should render correct width values in appropriate inputs', () => {
-			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
-
-			const widthInputs = screen.getAllByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-
-			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
-			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
-			expect( widthInputs[ 2 ].value ).toBe( '' ); // Right.
-			expect( widthInputs[ 3 ].value ).toBe( '2' ); // Bottom.
-		} );
-
-		it( 'should render split view correctly when starting with flat border', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<BorderBoxControl { ...props } value={ defaultBorders } />
-			);
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			);
-
-			const widthInputs = screen.getAllByRole( 'spinbutton', {
-				name: 'Border width',
-			} );
-			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
-			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
-			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
-			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
-		} );
-
-		it( 'should omit style options when requested', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			);
-
-			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
-
-			function assertStyleOptionsMissing() {
-				const styleLabel = screen.queryByText( 'Style' );
-				const solidButton = screen.queryByRole( 'button', {
-					name: 'Solid',
-				} );
-				const dashedButton = screen.queryByRole( 'button', {
-					name: 'Dashed',
-				} );
-				const dottedButton = screen.queryByRole( 'button', {
-					name: 'Dotted',
-				} );
-
-				expect( styleLabel ).not.toBeInTheDocument();
-				expect( solidButton ).not.toBeInTheDocument();
-				expect( dashedButton ).not.toBeInTheDocument();
-				expect( dottedButton ).not.toBeInTheDocument();
-			}
-
-			await user.click( colorButtons[ 0 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 0 ] );
-
-			await user.click( colorButtons[ 1 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 1 ] );
-
-			await user.click( colorButtons[ 2 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 2 ] );
-
-			await user.click( colorButtons[ 3 ] );
-			assertStyleOptionsMissing();
-			await user.click( colorButtons[ 3 ] );
-		}, 10000 );
-	} );
-
-	describe( 'onChange handling', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-			props.value = undefined;
-		} );
-
-		describe( 'Linked value change handling', () => {
-			it( 'should set undefined when new border is empty', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl { ...props } value={ { width: '1px' } } />
-				);
-
-				await user.clear(
-					screen.getByRole( 'spinbutton', { name: 'Border width' } )
-				);
-
-				expect( props.onChange ).toHaveBeenCalledWith( undefined );
-			} );
-
-			it( 'should update with complete flat border', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl { ...props } value={ defaultBorder } />
-				);
-
-				const widthInput = screen.getByRole( 'spinbutton', {
-					name: 'Border width',
-				} );
-				await user.clear( widthInput );
-				await user.type( widthInput, '3' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( {
-					...defaultBorder,
-					width: '3px',
-				} );
-			} );
-
-			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl
-						{ ...props }
-						value={ {
-							top: { color: '#72aee6' },
-							right: { color: '#f6f7f7', style: 'dashed' },
-							bottom: { color: '#e65054', style: 'dotted' },
-							left: { color: undefined },
-						} }
-					/>
-				);
-
-				await user.click(
-					screen.getByRole( 'button', { name: 'Link sides' } )
-				);
-
-				const widthInput = screen.getByRole( 'spinbutton', {
-					name: 'Border width',
-				} );
-				await user.clear( widthInput );
-				await user.type( widthInput, '4' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( {
-					top: { color: '#72aee6', width: '4px' },
-					right: { color: '#f6f7f7', style: 'dashed', width: '4px' },
-					bottom: { color: '#e65054', style: 'dotted', width: '4px' },
-					left: { color: undefined, width: '4px' },
-				} );
-			} );
-
-			it( 'should update with consistent split borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl { ...props } value={ defaultBorders } />
-				);
-
-				const widthInput = screen.getByRole( 'spinbutton', {
-					name: 'Border width',
-				} );
-				await user.clear( widthInput );
-				await user.type( widthInput, '10' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( {
-					...defaultBorder,
-					width: '10px',
-				} );
-			} );
-
-			it( 'should set undefined borders when change results in empty borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl
-						{ ...props }
-						value={ {
-							top: { width: '1px' },
-							right: { width: '1px' },
-							bottom: { width: '1px' },
-							left: { width: '1px' },
-						} }
-					/>
-				);
-
-				await user.clear(
-					screen.getByRole( 'spinbutton', { name: 'Border width' } )
-				);
-
-				expect( props.onChange ).toHaveBeenCalledWith( undefined );
-			} );
-
-			it( 'should set flat border when change results in consistent split borders', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<BorderBoxControl
-						{ ...props }
-						value={ {
-							top: { ...defaultBorder, width: '1px' },
-							right: { ...defaultBorder, width: '2px' },
-							bottom: { ...defaultBorder, width: '3px' },
-							left: { ...defaultBorder, width: '4px' },
-						} }
-					/>
-				);
-
-				await user.click(
-					screen.getByRole( 'button', { name: 'Link sides' } )
-				);
-
-				const widthInput = screen.getByRole( 'spinbutton', {
-					name: 'Border width',
-				} );
-				await user.clear( widthInput );
-				await user.type( widthInput, '10' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( {
-					...defaultBorder,
-					width: '10px',
-				} );
-			} );
-		} );
-
-		describe( 'Split value change handling', () => {
-			it( 'should set split borders when the updated borders are mixed', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const borders = {
-					top: { ...defaultBorder, width: '1px' },
-					right: { ...defaultBorder, width: '2px' },
-					bottom: { ...defaultBorder, width: '3px' },
-					left: { ...defaultBorder, width: '4px' },
-				};
-
-				render( <BorderBoxControl { ...props } value={ borders } /> );
-
-				const widthInput = screen.getAllByRole( 'spinbutton', {
-					name: 'Border width',
-				} )[ 0 ];
-				await user.clear( widthInput );
-				await user.type( widthInput, '5' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( {
-					...borders,
-					top: { ...defaultBorder, width: '5px' },
-				} );
-			} );
-
-			it( 'should set flat border when updated borders are consistent', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const borders = {
-					top: { ...defaultBorder, width: '4px' },
-					right: { ...defaultBorder, width: '1px' },
-					bottom: { ...defaultBorder, width: '1px' },
-					left: { ...defaultBorder, width: '1px' },
-				};
-
-				render( <BorderBoxControl { ...props } value={ borders } /> );
-
-				const widthInput = screen.getAllByRole( 'spinbutton', {
-					name: 'Border width',
-				} )[ 0 ];
-				await user.clear( widthInput );
-				await user.type( widthInput, '1' );
-
-				expect( props.onChange ).toHaveBeenCalledWith( defaultBorder );
-			} );
-		} );
-	} );
-} );
diff --git a/packages/components/src/border-box-control/test/index.tsx b/packages/components/src/border-box-control/test/index.tsx
new file mode 100644
index 00000000000000..fb536656453f4d
--- /dev/null
+++ b/packages/components/src/border-box-control/test/index.tsx
@@ -0,0 +1,503 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { BorderBoxControl } from '..';
+
+const colors = [
+	{ name: 'Gray', color: '#f6f7f7' },
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Green', color: '#00a32a' },
+	{ name: 'Yellow', color: '#bd8600' },
+];
+
+const defaultBorder = {
+	color: '#72aee6',
+	style: 'solid',
+	width: '1px',
+};
+
+const defaultBorders = {
+	top: defaultBorder,
+	right: defaultBorder,
+	bottom: defaultBorder,
+	left: defaultBorder,
+};
+
+const mixedBorders = {
+	top: { color: '#f6f7f7', style: 'solid', width: '1px' },
+	right: { color: '#e65054', style: 'dashed', width: undefined },
+	bottom: { color: undefined, style: 'dotted', width: '2rem' },
+	left: { color: '#bd8600', style: undefined, width: '0.75em' },
+};
+
+const props = {
+	colors,
+	label: 'Border Box',
+	onChange: jest.fn().mockImplementation( ( newValue ) => {
+		props.value = newValue;
+	} ),
+	value: undefined,
+	__next40pxDefaultSize: true,
+};
+
+const toggleLabelRegex = /Border color( and style)* picker/;
+const colorPickerRegex = /Border color picker/;
+
+describe( 'BorderBoxControl', () => {
+	describe( 'Linked view rendering', () => {
+		it( 'should render correctly when no value provided', () => {
+			render( <BorderBoxControl { ...props } /> );
+
+			const label = screen.getByText( props.label );
+			const colorButton = screen.getByLabelText( toggleLabelRegex );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const slider = screen.getByRole( 'slider', {
+				name: 'Border width',
+			} );
+			const linkedButton = screen.getByLabelText( 'Unlink sides' );
+
+			expect( label ).toBeInTheDocument();
+			expect( colorButton ).toBeInTheDocument();
+			expect( widthInput ).toBeInTheDocument();
+			expect( widthInput ).not.toHaveAttribute( 'placeholder' );
+			expect( unitSelect ).toBeInTheDocument();
+			expect( slider ).toBeInTheDocument();
+			expect( linkedButton ).toBeInTheDocument();
+		} );
+
+		it( 'should hide label', () => {
+			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
+
+			const label = screen.getByText( props.label );
+
+			// As visually hidden labels are still included in the document
+			// and do not have `display: none` styling, we can't rely on
+			// `.toBeInTheDocument()` or `.toBeVisible()` assertions.
+			expect( label ).toHaveAttribute(
+				'data-wp-component',
+				'VisuallyHidden'
+			);
+		} );
+
+		it( 'should show correct width value when flat border value provided', () => {
+			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} ) as HTMLInputElement;
+
+			expect( widthInput.value ).toBe( '1' );
+		} );
+
+		it( 'should show correct width value when consistent split borders provided', () => {
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} ) as HTMLInputElement;
+
+			expect( widthInput.value ).toBe( '1' );
+		} );
+
+		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
+			const user = userEvent.setup();
+
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+
+			// There are 4 inputs when in unlinked mode (top/right/bottom/left)
+			expect(
+				screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )
+			).toHaveLength( 4 );
+
+			// First render of control with mixed values should show split view.
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
+
+			// In linked mode, there is only one input
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'spinbutton', {
+						name: 'Border width',
+					} )
+				).toBeVisible()
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.queryByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( unitSelect ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render shared border width and unit select when switching to linked view', async () => {
+			const user = userEvent.setup();
+
+			// Render control with mixed border values but consistent widths.
+			render(
+				<BorderBoxControl
+					{ ...props }
+					value={ {
+						top: { color: 'red', width: '5px', style: 'solid' },
+						right: { color: 'blue', width: '5px', style: 'dashed' },
+						bottom: {
+							color: 'green',
+							width: '5px',
+							style: 'solid',
+						},
+						left: {
+							color: 'yellow',
+							width: '5px',
+							style: 'dotted',
+						},
+					} }
+				/>
+			);
+
+			// First render of control with mixed values should show split view.
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
+
+			const linkedInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} ) as HTMLInputElement;
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			expect( linkedInput.value ).toBe( '5' );
+			expect( unitSelect ).toBeInTheDocument();
+		} );
+
+		it( 'should omit style options when requested', async () => {
+			const user = userEvent.setup();
+
+			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+
+			const colorButton = screen.getByLabelText( colorPickerRegex );
+			await user.click( colorButton );
+
+			// Wait for the custom color picker in the dropdown to appear
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Custom color picker.',
+					} )
+				).toBeVisible()
+			);
+
+			// Make sure that none of the border style buttons (and the section
+			// title) are rendered to screen.
+			expect( screen.queryByText( 'Style' ) ).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /(Solid)|(Dashed)|(Dotted)/,
+				} )
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Split view rendering', () => {
+		it( 'should render split view by default when mixed values provided', () => {
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+
+			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelects = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const sliders = screen.queryAllByRole( 'slider', {
+				name: 'Border width',
+			} );
+			const linkedButton = screen.getByLabelText( 'Link sides' );
+
+			expect( colorButtons.length ).toBe( 4 );
+			expect( widthInputs.length ).toBe( 4 );
+			expect( unitSelects.length ).toBe( 4 );
+			expect( sliders.length ).toBe( 0 );
+			expect( linkedButton ).toBeInTheDocument();
+		} );
+
+		it( 'should render correct width values in appropriate inputs', () => {
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
+
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} ) as HTMLInputElement[];
+
+			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
+			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
+			expect( widthInputs[ 2 ].value ).toBe( '' ); // Right.
+			expect( widthInputs[ 3 ].value ).toBe( '2' ); // Bottom.
+		} );
+
+		it( 'should render split view correctly when starting with flat border', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} ) as HTMLInputElement[];
+			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
+			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
+			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
+			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
+		} );
+
+		// We're expecting to have 4 color buttons by default.
+		const colorButtonIndexes = [ ...Array( 4 ).keys() ];
+
+		it.each( colorButtonIndexes )(
+			'should omit style options when color button %s is pressed',
+			async ( colorButtonIndex ) => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl { ...props } enableStyle={ false } />
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Unlink sides' } )
+				);
+
+				const colorButtons =
+					screen.getAllByLabelText( colorPickerRegex );
+
+				await user.click( colorButtons[ colorButtonIndex ] );
+
+				// Make sure that none of the border style buttons (and the section
+				// title) are rendered to screen.
+				expect( screen.queryByText( 'Style' ) ).not.toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'button', {
+						name: /(Solid)|(Dashed)|(Dotted)/,
+					} )
+				).not.toBeInTheDocument();
+			}
+		);
+	} );
+
+	describe( 'onChange handling', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+			props.value = undefined;
+		} );
+
+		describe( 'Linked value change handling', () => {
+			it( 'should set undefined when new border is empty', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl { ...props } value={ { width: '1px' } } />
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
+
+				expect( props.onChange ).toHaveBeenCalledWith( undefined );
+			} );
+
+			it( 'should update with complete flat border', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorder } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '3' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '3px',
+				} );
+			} );
+
+			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { color: '#72aee6' },
+							right: { color: '#f6f7f7', style: 'dashed' },
+							bottom: { color: '#e65054', style: 'dotted' },
+							left: { color: undefined },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '4' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					top: { color: '#72aee6', width: '4px' },
+					right: { color: '#f6f7f7', style: 'dashed', width: '4px' },
+					bottom: { color: '#e65054', style: 'dotted', width: '4px' },
+					left: { color: undefined, width: '4px' },
+				} );
+			} );
+
+			it( 'should update with consistent split borders', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorders } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '10px',
+				} );
+			} );
+
+			it( 'should set undefined borders when change results in empty borders', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { width: '1px' },
+							right: { width: '1px' },
+							bottom: { width: '1px' },
+							left: { width: '1px' },
+						} }
+					/>
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
+
+				expect( props.onChange ).toHaveBeenCalledWith( undefined );
+			} );
+
+			it( 'should set flat border when change results in consistent split borders', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { ...defaultBorder, width: '1px' },
+							right: { ...defaultBorder, width: '2px' },
+							bottom: { ...defaultBorder, width: '3px' },
+							left: { ...defaultBorder, width: '4px' },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...defaultBorder,
+					width: '10px',
+				} );
+			} );
+		} );
+
+		describe( 'Split value change handling', () => {
+			it( 'should set split borders when the updated borders are mixed', async () => {
+				const user = userEvent.setup();
+
+				const borders = {
+					top: { ...defaultBorder, width: '1px' },
+					right: { ...defaultBorder, width: '2px' },
+					bottom: { ...defaultBorder, width: '3px' },
+					left: { ...defaultBorder, width: '4px' },
+				};
+
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '5' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( {
+					...borders,
+					top: { ...defaultBorder, width: '5px' },
+				} );
+			} );
+
+			it( 'should set flat border when updated borders are consistent', async () => {
+				const user = userEvent.setup();
+
+				const borders = {
+					top: { ...defaultBorder, width: '4px' },
+					right: { ...defaultBorder, width: '1px' },
+					bottom: { ...defaultBorder, width: '1px' },
+					left: { ...defaultBorder, width: '1px' },
+				};
+
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '1' );
+
+				expect( props.onChange ).toHaveBeenCalledWith( defaultBorder );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/border-box-control/test/utils.js b/packages/components/src/border-box-control/test/utils.js
deleted file mode 100644
index 42c23e98101745..00000000000000
--- a/packages/components/src/border-box-control/test/utils.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getBorderDiff,
-	getCommonBorder,
-	getShorthandBorderStyle,
-	getSplitBorders,
-	hasMixedBorders,
-	hasSplitBorders,
-	isCompleteBorder,
-	isDefinedBorder,
-	isEmptyBorder,
-} from '../utils';
-
-const completeBorder = { color: '#000', style: 'solid', width: '1px' };
-const partialBorder = { color: undefined, style: undefined, width: '2px' };
-const partialWithExtraProp = { color: '#fff', unrelated: true };
-const nonBorder = { unrelatedProperty: true };
-
-const splitBorders = {
-	top: completeBorder,
-	right: completeBorder,
-	bottom: completeBorder,
-	left: completeBorder,
-};
-const undefinedSplitBorders = {
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-const mixedBorders = {
-	top: completeBorder,
-	right: completeBorder,
-	bottom: completeBorder,
-	left: { color: '#fff', style: 'dashed', width: '10px' },
-};
-const mixedBordersWithUndefined = {
-	top: undefined,
-	right: undefined,
-	bottom: completeBorder,
-	left: partialBorder,
-};
-
-describe( 'BorderBoxControl Utils', () => {
-	describe( 'isEmptyBorder', () => {
-		it( 'should determine a undefined, null, and {} to be empty', () => {
-			expect( isEmptyBorder( undefined ) ).toBe( true );
-			expect( isEmptyBorder( null ) ).toBe( true );
-			expect( isEmptyBorder( {} ) ).toBe( true );
-		} );
-
-		it( 'should determine object missing all border props to be empty', () => {
-			expect( isEmptyBorder( nonBorder ) ).toBe( true );
-		} );
-
-		it( 'should determine that a border object with all properties is not empty', () => {
-			expect( isEmptyBorder( completeBorder ) ).toBe( false );
-		} );
-
-		it( 'should determine object with at least one border property as non-empty', () => {
-			expect( isEmptyBorder( partialWithExtraProp ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'isDefinedBorder', () => {
-		it( 'should determine undefined is not a defined border', () => {
-			expect( isDefinedBorder( undefined ) ).toBe( false );
-		} );
-
-		it( 'should determine an empty object to be an undefined border', () => {
-			expect( isDefinedBorder( {} ) ).toBe( false );
-		} );
-
-		it( 'should determine an border object with undefined properties to be an undefined border', () => {
-			const emptyBorder = {
-				color: undefined,
-				style: undefined,
-				width: undefined,
-			};
-			expect( isDefinedBorder( emptyBorder ) ).toBe( false );
-		} );
-
-		it( 'should class an object with at least one side border as defined', () => {
-			expect( isDefinedBorder( mixedBordersWithUndefined ) ).toBe( true );
-		} );
-
-		it( 'should determine complete split borders object is defined border', () => {
-			expect( isDefinedBorder( splitBorders ) ).toBe( true );
-		} );
-
-		it( 'should determine border is not defined when all sides are empty', () => {
-			const mixedUndefinedBorders = {
-				top: undefined,
-				right: undefined,
-				bottom: {},
-				left: {
-					color: undefined,
-					style: undefined,
-					width: undefined,
-				},
-			};
-
-			expect( isDefinedBorder( undefinedSplitBorders ) ).toBe( false );
-			expect( isDefinedBorder( mixedUndefinedBorders ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'isCompleteBorder', () => {
-		it( 'should determine a undefined, null, and {} to be incomplete', () => {
-			expect( isCompleteBorder( undefined ) ).toBe( false );
-			expect( isCompleteBorder( null ) ).toBe( false );
-			expect( isCompleteBorder( {} ) ).toBe( false );
-		} );
-
-		it( 'should determine objects missing border props to be incomplete', () => {
-			expect( isCompleteBorder( nonBorder ) ).toBe( false );
-			expect( isCompleteBorder( partialBorder ) ).toBe( false );
-			expect( isCompleteBorder( partialWithExtraProp ) ).toBe( false );
-		} );
-
-		it( 'should determine that a border object with all properties is complete', () => {
-			expect( isCompleteBorder( completeBorder ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'hasSplitBorders', () => {
-		it( 'should determine empty or undefined borders as not being split', () => {
-			expect( hasSplitBorders( undefined ) ).toBe( false );
-			expect( hasSplitBorders( {} ) ).toBe( false );
-		} );
-
-		it( 'should determine flat border object as not being split', () => {
-			expect( hasSplitBorders( completeBorder ) ).toBe( false );
-		} );
-
-		it( 'should determine object with at least one side property as split', () => {
-			expect( hasSplitBorders( splitBorders ) ).toBe( true );
-			expect( hasSplitBorders( { top: completeBorder } ) ).toBe( true );
-		} );
-
-		it( 'should determine object with undefined sides but containing properties as split', () => {
-			expect( hasSplitBorders( undefinedSplitBorders ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'hasMixedBorders', () => {
-		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
-			expect( hasMixedBorders( undefined ) ).toBe( false );
-			expect( hasMixedBorders( {} ) ).toBe( false );
-			expect( hasMixedBorders( nonBorder ) ).toBe( false );
-		} );
-
-		it( 'should determine flat border object as not being mixed', () => {
-			expect( hasMixedBorders( completeBorder ) ).toBe( false );
-		} );
-
-		it( 'should determine split border object with some undefined side borders as mixed', () => {
-			expect( hasMixedBorders( mixedBordersWithUndefined ) ).toBe( true );
-		} );
-
-		it( 'should determine split border object with different side borders as mixed', () => {
-			expect( hasMixedBorders( mixedBorders ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'getSplitBorders', () => {
-		it( 'should return undefined when no border provided', () => {
-			expect( getSplitBorders( undefined ) ).toEqual( undefined );
-			expect( getSplitBorders( null ) ).toEqual( undefined );
-		} );
-
-		it( 'should return undefined when supplied border is empty', () => {
-			expect( getSplitBorders( {} ) ).toEqual( undefined );
-			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
-		} );
-
-		it( 'should return object with all sides populated when given valid border', () => {
-			expect( getSplitBorders( completeBorder ) ).toEqual( {
-				top: completeBorder,
-				right: completeBorder,
-				bottom: completeBorder,
-				left: completeBorder,
-			} );
-		} );
-	} );
-
-	describe( 'getBorderDiff', () => {
-		it( 'should return empty object when there are no differences', () => {
-			const diff = getBorderDiff( completeBorder, completeBorder );
-			expect( diff ).toEqual( {} );
-		} );
-
-		it( 'should only return differences for border related properties', () => {
-			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
-			expect( diff ).toEqual( {} );
-		} );
-
-		it( 'should return object with only border properties that have changed', () => {
-			const diff = getBorderDiff( completeBorder, {
-				...completeBorder,
-				color: '#21759b',
-				caffeine: 'cola',
-			} );
-			expect( diff ).toEqual( { color: '#21759b' } );
-		} );
-	} );
-
-	describe( 'getCommonBorder', () => {
-		it( 'should return undefined when no borders supplied', () => {
-			expect( getCommonBorder( undefined ) ).toEqual( undefined );
-		} );
-
-		it( 'should return border object with undefined properties when undefined borders given', () => {
-			const undefinedBorder = {
-				color: undefined,
-				style: undefined,
-				width: undefined,
-			};
-
-			expect( getCommonBorder( {} ) ).toEqual( undefinedBorder );
-			expect( getCommonBorder( undefinedSplitBorders ) ).toEqual(
-				undefinedBorder
-			);
-		} );
-
-		it( 'should return flat border object when split borders are the same', () => {
-			expect( getCommonBorder( splitBorders ) ).toEqual( completeBorder );
-		} );
-
-		it( 'should only set properties where every side border shares the same value', () => {
-			const sideBorders = {
-				top: { color: '#fff', style: 'solid', width: '1px' },
-				right: { color: '#000', style: 'solid', width: '1px' },
-				bottom: { color: '#000', style: 'solid', width: '1px' },
-				left: { color: '#000', style: undefined, width: '1px' },
-			};
-			const commonBorder = {
-				color: undefined,
-				style: undefined,
-				width: '1px',
-			};
-
-			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
-		} );
-
-		it( 'should return most common unit selection if border widths are mixed', () => {
-			const sideBorders = {
-				top: { color: '#fff', style: 'solid', width: '10px' },
-				right: { color: '#000', style: 'solid', width: '1rem' },
-				bottom: { color: '#000', style: 'solid', width: '2em' },
-				left: { color: '#000', style: undefined, width: '2em' },
-			};
-			const commonBorder = {
-				color: undefined,
-				style: undefined,
-				width: 'em',
-			};
-
-			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
-		} );
-
-		it( 'should return first unit when multiple units are equal most common', () => {
-			const sideBorders = {
-				top: { color: '#fff', style: 'solid', width: '1rem' },
-				right: { color: '#000', style: 'solid', width: '0.75em' },
-				bottom: { color: '#000', style: 'solid', width: '1vw' },
-				left: { color: '#000', style: undefined, width: '2vh' },
-			};
-			const commonBorder = {
-				color: undefined,
-				style: undefined,
-				width: 'rem',
-			};
-
-			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
-		} );
-
-		it( 'should ignore undefined values in determining most common unit', () => {
-			const sideBorders = {
-				top: { color: '#fff', style: 'solid', width: undefined },
-				right: { color: '#000', style: 'solid', width: '5vw' },
-				bottom: { color: '#000', style: 'solid', width: undefined },
-				left: { color: '#000', style: undefined, width: '2vh' },
-			};
-			const commonBorder = {
-				color: undefined,
-				style: undefined,
-				width: 'vw',
-			};
-
-			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
-		} );
-	} );
-
-	describe( 'getShorthandBorderStyle', () => {
-		it( 'should return undefined when no border provided', () => {
-			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
-			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
-			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
-		} );
-
-		it( 'should generate correct shorthand style from valid border', () => {
-			const style = getShorthandBorderStyle( completeBorder );
-			expect( style ).toEqual( '1px solid #000' );
-		} );
-
-		it( 'should generate correct style from partial border', () => {
-			const style = getShorthandBorderStyle( {
-				style: 'dashed',
-				width: '2px',
-			} );
-			expect( style ).toEqual( '2px dashed' );
-		} );
-
-		it( 'should default borders with either color or width to solid style', () => {
-			const widthOnlyStyle = getShorthandBorderStyle( { width: '5px' } );
-			const colorOnlyStyle = getShorthandBorderStyle( { color: '#000' } );
-
-			expect( widthOnlyStyle ).toEqual( '5px solid' );
-			expect( colorOnlyStyle ).toEqual( 'solid #000' );
-		} );
-
-		it( 'should not default border style to solid for zero width border', () => {
-			const zeroWidthStyle = getShorthandBorderStyle( { width: '0' } );
-			expect( zeroWidthStyle ).toEqual( '0' );
-		} );
-
-		it( 'should return undefined when no border or fallback supplied', () => {
-			expect( getShorthandBorderStyle() ).toBe( undefined );
-		} );
-
-		it( 'should return fallback border when border is undefined', () => {
-			const result = getShorthandBorderStyle( undefined, completeBorder );
-			expect( result ).toEqual( completeBorder );
-		} );
-
-		it( 'should return fallback border when empty border supplied', () => {
-			const result = getShorthandBorderStyle( {}, completeBorder );
-			expect( result ).toEqual( completeBorder );
-		} );
-
-		it( 'should use fallback border properties if missing from border', () => {
-			const result = getShorthandBorderStyle(
-				{ width: '1em' },
-				{ width: '5px', style: 'dashed', color: '#72aee6' }
-			);
-
-			expect( result ).toEqual( `1em dashed #72aee6` );
-		} );
-	} );
-} );
diff --git a/packages/components/src/border-box-control/test/utils.ts b/packages/components/src/border-box-control/test/utils.ts
new file mode 100644
index 00000000000000..03fd7be1420f48
--- /dev/null
+++ b/packages/components/src/border-box-control/test/utils.ts
@@ -0,0 +1,373 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getBorderDiff,
+	getCommonBorder,
+	getShorthandBorderStyle,
+	getSplitBorders,
+	hasMixedBorders,
+	hasSplitBorders,
+	isCompleteBorder,
+	isDefinedBorder,
+	isEmptyBorder,
+} from '../utils';
+
+const completeBorder = { color: '#000', style: 'solid', width: '1px' };
+const partialBorder = { color: undefined, style: undefined, width: '2px' };
+const partialWithExtraProp = { color: '#fff', unrelated: true };
+const nonBorder = { unrelatedProperty: true };
+
+const splitBorders = {
+	top: completeBorder,
+	right: completeBorder,
+	bottom: completeBorder,
+	left: completeBorder,
+};
+const undefinedSplitBorders = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+const mixedBorders = {
+	top: completeBorder,
+	right: completeBorder,
+	bottom: completeBorder,
+	left: { color: '#fff', style: 'dashed', width: '10px' },
+};
+const mixedBordersWithUndefined = {
+	top: undefined,
+	right: undefined,
+	bottom: completeBorder,
+	left: partialBorder,
+};
+
+describe( 'BorderBoxControl Utils', () => {
+	describe( 'isEmptyBorder', () => {
+		it( 'should determine a undefined, null, and {} to be empty', () => {
+			expect( isEmptyBorder( undefined ) ).toBe( true );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( isEmptyBorder( null ) ).toBe( true );
+			expect( isEmptyBorder( {} ) ).toBe( true );
+		} );
+
+		it( 'should determine object missing all border props to be empty', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( isEmptyBorder( nonBorder ) ).toBe( true );
+		} );
+
+		it( 'should determine that a border object with all properties is not empty', () => {
+			expect( isEmptyBorder( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine object with at least one border property as non-empty', () => {
+			expect( isEmptyBorder( partialWithExtraProp ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isDefinedBorder', () => {
+		it( 'should determine undefined is not a defined border', () => {
+			expect( isDefinedBorder( undefined ) ).toBe( false );
+		} );
+
+		it( 'should determine an empty object to be an undefined border', () => {
+			expect( isDefinedBorder( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine an border object with undefined properties to be an undefined border', () => {
+			const emptyBorder = {
+				color: undefined,
+				style: undefined,
+				width: undefined,
+			};
+			expect( isDefinedBorder( emptyBorder ) ).toBe( false );
+		} );
+
+		it( 'should class an object with at least one side border as defined', () => {
+			expect( isDefinedBorder( mixedBordersWithUndefined ) ).toBe( true );
+		} );
+
+		it( 'should determine complete split borders object is defined border', () => {
+			expect( isDefinedBorder( splitBorders ) ).toBe( true );
+		} );
+
+		it( 'should determine border is not defined when all sides are empty', () => {
+			const mixedUndefinedBorders = {
+				top: undefined,
+				right: undefined,
+				bottom: {},
+				left: {
+					color: undefined,
+					style: undefined,
+					width: undefined,
+				},
+			};
+
+			expect( isDefinedBorder( undefinedSplitBorders ) ).toBe( false );
+			expect( isDefinedBorder( mixedUndefinedBorders ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isCompleteBorder', () => {
+		it( 'should determine a undefined, null, and {} to be incomplete', () => {
+			expect( isCompleteBorder( undefined ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( isCompleteBorder( null ) ).toBe( false );
+			expect( isCompleteBorder( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine objects missing border props to be incomplete', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( isCompleteBorder( nonBorder ) ).toBe( false );
+			expect( isCompleteBorder( partialBorder ) ).toBe( false );
+			expect( isCompleteBorder( partialWithExtraProp ) ).toBe( false );
+		} );
+
+		it( 'should determine that a border object with all properties is complete', () => {
+			expect( isCompleteBorder( completeBorder ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'hasSplitBorders', () => {
+		it( 'should determine empty or undefined borders as not being split', () => {
+			expect( hasSplitBorders( undefined ) ).toBe( false );
+			expect( hasSplitBorders( {} ) ).toBe( false );
+		} );
+
+		it( 'should determine flat border object as not being split', () => {
+			expect( hasSplitBorders( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine object with at least one side property as split', () => {
+			expect( hasSplitBorders( splitBorders ) ).toBe( true );
+			expect( hasSplitBorders( { top: completeBorder } ) ).toBe( true );
+		} );
+
+		it( 'should determine object with undefined sides but containing properties as split', () => {
+			expect( hasSplitBorders( undefinedSplitBorders ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'hasMixedBorders', () => {
+		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
+			expect( hasMixedBorders( undefined ) ).toBe( false );
+			expect( hasMixedBorders( {} ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( hasMixedBorders( nonBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine flat border object as not being mixed', () => {
+			expect( hasMixedBorders( completeBorder ) ).toBe( false );
+		} );
+
+		it( 'should determine split border object with some undefined side borders as mixed', () => {
+			expect( hasMixedBorders( mixedBordersWithUndefined ) ).toBe( true );
+		} );
+
+		it( 'should determine split border object with different side borders as mixed', () => {
+			expect( hasMixedBorders( mixedBorders ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'getSplitBorders', () => {
+		it( 'should return undefined when no border provided', () => {
+			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( getSplitBorders( null ) ).toEqual( undefined );
+		} );
+
+		it( 'should return undefined when supplied border is empty', () => {
+			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
+		} );
+
+		it( 'should return object with all sides populated when given valid border', () => {
+			expect( getSplitBorders( completeBorder ) ).toEqual( {
+				top: completeBorder,
+				right: completeBorder,
+				bottom: completeBorder,
+				left: completeBorder,
+			} );
+		} );
+	} );
+
+	describe( 'getBorderDiff', () => {
+		it( 'should return empty object when there are no differences', () => {
+			const diff = getBorderDiff( completeBorder, completeBorder );
+			expect( diff ).toEqual( {} );
+		} );
+
+		it( 'should only return differences for border related properties', () => {
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
+			expect( diff ).toEqual( {} );
+		} );
+
+		it( 'should return object with only border properties that have changed', () => {
+			const diff = getBorderDiff( completeBorder, {
+				...completeBorder,
+				color: '#21759b',
+				// Checking for extra resilience, even if not a valid type.
+				// @ts-expect-error
+				caffeine: 'cola',
+			} );
+			expect( diff ).toEqual( { color: '#21759b' } );
+		} );
+	} );
+
+	describe( 'getCommonBorder', () => {
+		it( 'should return undefined when no borders supplied', () => {
+			expect( getCommonBorder( undefined ) ).toEqual( undefined );
+		} );
+
+		it( 'should return border object with undefined properties when undefined borders given', () => {
+			const undefinedBorder = {
+				color: undefined,
+				style: undefined,
+				width: undefined,
+			};
+
+			expect( getCommonBorder( {} ) ).toEqual( undefinedBorder );
+			expect( getCommonBorder( undefinedSplitBorders ) ).toEqual(
+				undefinedBorder
+			);
+		} );
+
+		it( 'should return flat border object when split borders are the same', () => {
+			expect( getCommonBorder( splitBorders ) ).toEqual( completeBorder );
+		} );
+
+		it( 'should only set properties where every side border shares the same value', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '1px' },
+				right: { color: '#000', style: 'solid', width: '1px' },
+				bottom: { color: '#000', style: 'solid', width: '1px' },
+				left: { color: '#000', style: undefined, width: '1px' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: '1px',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should return most common unit selection if border widths are mixed', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '10px' },
+				right: { color: '#000', style: 'solid', width: '1rem' },
+				bottom: { color: '#000', style: 'solid', width: '2em' },
+				left: { color: '#000', style: undefined, width: '2em' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'em',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should return first unit when multiple units are equal most common', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: '1rem' },
+				right: { color: '#000', style: 'solid', width: '0.75em' },
+				bottom: { color: '#000', style: 'solid', width: '1vw' },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'rem',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+
+		it( 'should ignore undefined values in determining most common unit', () => {
+			const sideBorders = {
+				top: { color: '#fff', style: 'solid', width: undefined },
+				right: { color: '#000', style: 'solid', width: '5vw' },
+				bottom: { color: '#000', style: 'solid', width: undefined },
+				left: { color: '#000', style: undefined, width: '2vh' },
+			};
+			const commonBorder = {
+				color: undefined,
+				style: undefined,
+				width: 'vw',
+			};
+
+			expect( getCommonBorder( sideBorders ) ).toEqual( commonBorder );
+		} );
+	} );
+
+	describe( 'getShorthandBorderStyle', () => {
+		it( 'should return undefined when no border provided', () => {
+			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
+			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
+			// @ts-expect-error
+			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
+		} );
+
+		it( 'should generate correct shorthand style from valid border', () => {
+			const style = getShorthandBorderStyle( completeBorder );
+			expect( style ).toEqual( '1px solid #000' );
+		} );
+
+		it( 'should generate correct style from partial border', () => {
+			const style = getShorthandBorderStyle( {
+				style: 'dashed',
+				width: '2px',
+			} );
+			expect( style ).toEqual( '2px dashed' );
+		} );
+
+		it( 'should default borders with either color or width to solid style', () => {
+			const widthOnlyStyle = getShorthandBorderStyle( { width: '5px' } );
+			const colorOnlyStyle = getShorthandBorderStyle( { color: '#000' } );
+
+			expect( widthOnlyStyle ).toEqual( '5px solid' );
+			expect( colorOnlyStyle ).toEqual( 'solid #000' );
+		} );
+
+		it( 'should not default border style to solid for zero width border', () => {
+			const zeroWidthStyle = getShorthandBorderStyle( { width: '0' } );
+			expect( zeroWidthStyle ).toEqual( '0' );
+		} );
+
+		it( 'should return undefined when no border or fallback supplied', () => {
+			expect( getShorthandBorderStyle() ).toBe( undefined );
+		} );
+
+		it( 'should return fallback border when border is undefined', () => {
+			const result = getShorthandBorderStyle( undefined, completeBorder );
+			expect( result ).toEqual( completeBorder );
+		} );
+
+		it( 'should return fallback border when empty border supplied', () => {
+			const result = getShorthandBorderStyle( {}, completeBorder );
+			expect( result ).toEqual( completeBorder );
+		} );
+
+		it( 'should use fallback border properties if missing from border', () => {
+			const result = getShorthandBorderStyle(
+				{ width: '1em' },
+				{ width: '5px', style: 'dashed', color: '#72aee6' }
+			);
+
+			expect( result ).toEqual( `1em dashed #72aee6` );
+		} );
+	} );
+} );
diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
index 0b454d8ed09292..283faf05014a03 100644
--- a/packages/components/src/border-box-control/types.ts
+++ b/packages/components/src/border-box-control/types.ts
@@ -45,6 +45,12 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
diff --git a/packages/components/src/border-box-control/utils.ts b/packages/components/src/border-box-control/utils.ts
index 1e2529166974a6..7308985e35f963 100644
--- a/packages/components/src/border-box-control/utils.ts
+++ b/packages/components/src/border-box-control/utils.ts
@@ -171,7 +171,7 @@ export const getMostCommonUnit = (
  * Finds the mode value out of the array passed favouring the first value
  * as a tiebreaker.
  *
- * @param  values Values to determine the mode from.
+ * @param values Values to determine the mode from.
  *
  * @return The mode value.
  */
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..707497ae2993c0 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -7,7 +7,6 @@ import type { CSSProperties } from 'react';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,30 +16,35 @@ import Button from '../../button';
 import ColorIndicator from '../../color-indicator';
 import ColorPalette from '../../color-palette';
 import Dropdown from '../../dropdown';
-import { HStack } from '../../h-stack';
 import { VStack } from '../../v-stack';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderControlDropdown } from './hook';
-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 { ColorObject } from '../../color-palette/types';
+import { isMultiplePaletteArray } from '../../color-palette/utils';
+import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
-const noop = () => undefined;
+const getAriaLabelColorValue = ( colorValue: string ) => {
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	return colorValue.replace( /^var\((.+)\)$/, '$1' );
+};
+
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colors: ColorProps[ 'colors' ] | undefined,
-	hasMultipleColorOrigins: boolean
+	colors: ColorProps[ 'colors' ] | undefined
 ) => {
 	if ( ! colorValue || ! colors ) {
 		return;
 	}
 
-	if ( hasMultipleColorOrigins ) {
+	if ( isMultiplePaletteArray( colors ) ) {
+		// Multiple origins
 		let matchedColor;
 
-		( colors as PaletteObject[] ).some( ( origin ) =>
+		colors.some( ( origin ) =>
 			origin.colors.some( ( color ) => {
 				if ( color.color === colorValue ) {
 					matchedColor = color;
@@ -54,9 +58,8 @@ const getColorObject = (
 		return matchedColor;
 	}
 
-	return ( colors as ColorObject[] ).find(
-		( color ) => color.color === colorValue
-	);
+	// Single origin
+	return colors.find( ( color ) => color.color === colorValue );
 };
 
 const getToggleAriaLabel = (
@@ -67,34 +70,44 @@ const getToggleAriaLabel = (
 ) => {
 	if ( isStyleEnabled ) {
 		if ( colorObject ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorObject.color );
 			return style
 				? sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'
+						),
 						colorObject.name,
-						colorObject.color,
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-						'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+						// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+						__(
+							'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+						),
 						colorObject.name,
-						colorObject.color
+						ariaLabelValue
 				  );
 		}
 
 		if ( colorValue ) {
+			const ariaLabelValue = getAriaLabelColorValue( colorValue );
 			return style
 				? sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".
-						'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".',
-						colorValue,
+						// translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'
+						),
+						ariaLabelValue,
 						style
 				  )
 				: sprintf(
-						// translators: %1$s: The color's hex code e.g.: "#f00:".
-						'Border color and style picker. The currently selected color has a value of "%1$s".',
-						colorValue
+						// translators: %s: The color's hex code e.g: "#f00".
+						__(
+							'Border color and style picker. The currently selected color has a value of "%s".'
+						),
+						ariaLabelValue
 				  );
 		}
 
@@ -103,18 +116,22 @@ const getToggleAriaLabel = (
 
 	if ( colorObject ) {
 		return sprintf(
-			// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".
-			'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".',
+			// translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+			),
 			colorObject.name,
-			colorObject.color
+			getAriaLabelColorValue( colorObject.color )
 		);
 	}
 
 	if ( colorValue ) {
 		return sprintf(
-			// translators: %1$s: The color's hex code e.g.: "#f00:".
-			'Border color picker. The currently selected color has a value of "%1$s".',
-			colorValue
+			// translators: %s: The color's hex code e.g: "#f00".
+			__(
+				'Border color picker. The currently selected color has a value of "%s".'
+			),
+			getAriaLabelColorValue( colorValue )
 		);
 	}
 
@@ -126,7 +143,6 @@ const BorderControlDropdown = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		border,
 		colors,
@@ -135,23 +151,20 @@ const BorderControlDropdown = (
 		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
+		isStyleSettable,
 		onReset,
 		onColorChange,
 		onStyleChange,
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
-		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
 
 	const { color, style } = border || {};
-	const colorObject = getColorObject(
-		color,
-		colors,
-		!! __experimentalHasMultipleOrigins
-	);
+	const colorObject = getColorObject( color, colors );
 
 	const toggleAriaLabel = getToggleAriaLabel(
 		color,
@@ -165,14 +178,17 @@ const BorderControlDropdown = (
 		? 'bottom left'
 		: undefined;
 
-	const renderToggle = ( { onToggle = noop } ) => (
+	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
+		onToggle,
+	} ) => (
 		<Button
 			onClick={ onToggle }
 			variant="tertiary"
 			aria-label={ toggleAriaLabel }
-			position={ dropdownPosition }
+			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
-			showTooltip={ true }
+			showTooltip
+			__next40pxDefaultSize={ size === '__unstable-large' }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -183,37 +199,24 @@ 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 }>
-					{ showDropdownHeader ? (
-						<HStack>
-							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
-							<Button
-								isSmall
-								label={ __( 'Close border color' ) }
-								icon={ closeSmall }
-								onClick={ onClose }
-							/>
-						</HStack>
-					) : undefined }
 					<ColorPalette
 						className={ popoverContentClassName }
 						value={ color }
 						onChange={ onColorChange }
 						{ ...{ colors, disableCustomColors } }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
 						clearable={ false }
 						enableAlpha={ enableAlpha }
 					/>
-					{ enableStyle && (
+					{ enableStyle && isStyleSettable && (
 						<BorderControlStylePicker
 							label={ __( 'Style' ) }
 							value={ style }
@@ -231,8 +234,9 @@ const BorderControlDropdown = (
 							onReset();
 							onClose();
 						} }
+						__next40pxDefaultSize
 					>
-						{ __( 'Reset to default' ) }
+						{ __( 'Reset' ) }
 					</Button>
 				</DropdownContentWrapper>
 			) }
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index d7fef513a74eb0..5366babc266c61 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -8,7 +8,8 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { DropdownProps } from '../types';
@@ -25,7 +26,6 @@ export function useBorderControlDropdown(
 		onChange,
 		previousStyleSelection,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
@@ -95,7 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
-		__experimentalHasMultipleOrigins,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }
diff --git a/packages/components/src/border-control/border-control-style-picker/component.tsx b/packages/components/src/border-control/border-control-style-picker/component.tsx
index c61cec058be1af..c0a0fe82111cec 100644
--- a/packages/components/src/border-control/border-control-style-picker/component.tsx
+++ b/packages/components/src/border-control/border-control-style-picker/component.tsx
@@ -7,15 +7,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
-import { View } from '../../view';
-import { Flex } from '../../flex';
-import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
-import { useBorderControlStylePicker } from './hook';
-
-import type { LabelProps, StylePickerProps } from '../types';
+import { contextConnect } from '../../context';
+import type { StylePickerProps } from '../types';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOptionIcon,
+} from '../../toggle-group-control';
 
 const BORDER_STYLES = [
 	{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },
@@ -23,67 +20,36 @@ const BORDER_STYLES = [
 	{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },
 ];
 
-const Label = ( props: LabelProps ) => {
-	const { label, hideLabelFromVision } = props;
-
-	if ( ! label ) {
-		return null;
-	}
-
-	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
-	) : (
-		<StyledLabel>{ label }</StyledLabel>
-	);
-};
-
-const BorderControlStylePicker = (
-	props: WordPressComponentProps< StylePickerProps, 'div' >,
+function UnconnectedBorderControlStylePicker(
+	{ onChange, ...restProps }: StylePickerProps,
 	forwardedRef: React.ForwardedRef< any >
-) => {
-	const {
-		buttonClassName,
-		hideLabelFromVision,
-		label,
-		onChange,
-		value,
-		...otherProps
-	} = useBorderControlStylePicker( props );
-
+) {
 	return (
-		<View { ...otherProps } ref={ forwardedRef }>
-			<Label
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-			<Flex justify="flex-start" gap={ 1 }>
-				{ BORDER_STYLES.map( ( borderStyle ) => (
-					<Button
-						key={ borderStyle.value }
-						className={ buttonClassName }
-						icon={ borderStyle.icon }
-						isSmall
-						isPressed={ borderStyle.value === value }
-						onClick={ () =>
-							onChange(
-								borderStyle.value === value
-									? undefined
-									: borderStyle.value
-							)
-						}
-						aria-label={ borderStyle.label }
-						label={ borderStyle.label }
-						showTooltip={ true }
-					/>
-				) ) }
-			</Flex>
-		</View>
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			ref={ forwardedRef }
+			isDeselectable
+			onChange={ ( value ) => {
+				onChange?.( value as string | undefined );
+			} }
+			{ ...restProps }
+		>
+			{ BORDER_STYLES.map( ( borderStyle ) => (
+				<ToggleGroupControlOptionIcon
+					key={ borderStyle.value }
+					value={ borderStyle.value }
+					icon={ borderStyle.icon }
+					label={ borderStyle.label }
+				/>
+			) ) }
+		</ToggleGroupControl>
 	);
-};
+}
 
-const ConnectedBorderControlStylePicker = contextConnect(
-	BorderControlStylePicker,
+const BorderControlStylePicker = contextConnect(
+	UnconnectedBorderControlStylePicker,
 	'BorderControlStylePicker'
 );
 
-export default ConnectedBorderControlStylePicker;
+export default BorderControlStylePicker;
diff --git a/packages/components/src/border-control/border-control-style-picker/hook.ts b/packages/components/src/border-control/border-control-style-picker/hook.ts
deleted file mode 100644
index b8d1c27b9a7276..00000000000000
--- a/packages/components/src/border-control/border-control-style-picker/hook.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx } from '../../utils/hooks/use-cx';
-
-import type { StylePickerProps } from '../types';
-
-export function useBorderControlStylePicker(
-	props: WordPressComponentProps< StylePickerProps, 'div' >
-) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'BorderControlStylePicker'
-	);
-
-	// Generate class names.
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.borderControlStylePicker, className );
-	}, [ className, cx ] );
-
-	const buttonClassName = useMemo( () => {
-		return cx( styles.borderStyleButton );
-	}, [ cx ] );
-
-	return { ...otherProps, className: classes, buttonClassName };
-}
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 901859df2395e9..0afda1ee31ae81 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -1,10 +1,6 @@
-#  BorderControl
+# BorderControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-<br />
-This component provides control over a border's color, style, and width.
+An input control for a border's color, style, and width.
 
 ## Development guidelines
 
@@ -20,7 +16,8 @@ a "shape" abstraction.
 ## Usage
 
 ```jsx
-import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+import { useState } from 'react';
+import { BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -30,13 +27,13 @@ const colors = [
 
 const MyBorderControl = () => {
 	const [ border, setBorder ] = useState();
-	const onChange = ( newBorder ) => setBorder( newBorder );
 
 	return (
 		<BorderControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
-			onChange={ onChange }
+			onChange={ setBorder }
 			value={ border }
 		/>
 	);
@@ -58,41 +55,41 @@ colors are organized by multiple origins.
 
 Each color may be an object containing a `name` and `color` value.
 
-- Required: No
-- Default: `[]`
+-   Required: No
+-   Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
 This toggles the ability to choose custom colors.
 
-- Required: No
+-   Required: No
 
 ### `disableUnits`: `boolean`
 
 This controls whether unit selection should be disabled.
 
-- Required: No
+-   Required: No
 
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting
 custom colors.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `true`
 
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selection.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `hideLabelFromVision`: `boolean`
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `isCompact`: `boolean`
 
@@ -100,7 +97,7 @@ This flags the `BorderControl` to render with a more compact appearance. It
 restricts the width of the control and prevents it from expanding to take up
 additional space.
 
-- Required: No
+-   Required: No
 
 ### `label`: `string`
 
@@ -109,7 +106,7 @@ If provided, a label will be generated using this as the content.
 _Whether it is visible only to screen readers is controlled via
 `hideLabelFromVision`._
 
-- Required: No
+-   Required: No
 
 ### `onChange`: `( value?: Object ) => void`
 
@@ -118,7 +115,7 @@ that selects or clears, border color, style, or width.
 
 _Note: the value may be `undefined` if a user clears all border properties._
 
-- Required: Yes
+-   Required: Yes
 
 ### `shouldSanitizeBorder`: `boolean`
 
@@ -126,23 +123,16 @@ If opted into, sanitizing the border means that if no width or color have been
 selected, the border style is also cleared and `undefined` is returned as the
 new border value.
 
-- Required: No
-- Default: true
-
-### `showDropdownHeader`: `boolean`
-
-Whether or not to render a header for the border color and style picker
-dropdown. The header includes a label for the color picker and a close button.
-
-- Required: No
+-   Required: No
+-   Default: `true`
 
 ### `size`: `string`
 
 Size of the control.
 
-- Required: No
-- Default: `default`
-- Allowed values: `default`, `__unstable-large`
+-   Required: No
+-   Default: `default`
+-   Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
@@ -150,6 +140,7 @@ An object representing a border or `undefined`. Used to set the current border
 configuration for this component.
 
 Example:
+
 ```js
  {
 	color: '#72aee6',
@@ -158,18 +149,25 @@ Example:
 }
 ```
 
-- Required: No
+-   Required: No
 
 ### `width`: `CSSProperties[ 'width' ]`
 
 Controls the visual width of the `BorderControl`. It has no effect if the
 `isCompact` prop is set to `true`.
 
-- Required: No
+-   Required: No
 
 ### `withSlider`: `boolean`
 
 Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
-- Required: No
+-   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index 942adc4e95b477..f71599b274778d 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -13,10 +13,12 @@ import { HStack } from '../../h-stack';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderControl } from './hook';
 
 import type { BorderControlProps, LabelProps } from '../types';
+import { Spacer } from '../../spacer';
 
 const BorderLabel = ( props: LabelProps ) => {
 	const { label, hideLabelFromVision } = props;
@@ -37,6 +39,7 @@ const UnconnectedBorderControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
+		__next40pxDefaultSize = false,
 		colors,
 		disableCustomColors,
 		disableUnits,
@@ -45,6 +48,7 @@ const UnconnectedBorderControl = (
 		hideLabelFromVision,
 		innerWrapperClassName,
 		inputWidth,
+		isStyleSettable,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -59,7 +63,6 @@ const UnconnectedBorderControl = (
 		widthUnit,
 		widthValue,
 		withSlider,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderControl( props );
@@ -72,25 +75,30 @@ const UnconnectedBorderControl = (
 			/>
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					__shouldNotWarnDeprecated36pxSize
 					prefix={
-						<BorderControlDropdown
-							border={ border }
-							colors={ colors }
-							__unstablePopoverProps={ __unstablePopoverProps }
-							disableCustomColors={ disableCustomColors }
-							enableAlpha={ enableAlpha }
-							enableStyle={ enableStyle }
-							onChange={ onBorderChange }
-							previousStyleSelection={ previousStyleSelection }
-							showDropdownHeader={ showDropdownHeader }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							size={ size }
-						/>
+						<Spacer marginRight={ 1 } marginBottom={ 0 }>
+							<BorderControlDropdown
+								border={ border }
+								colors={ colors }
+								__unstablePopoverProps={
+									__unstablePopoverProps
+								}
+								disableCustomColors={ disableCustomColors }
+								enableAlpha={ enableAlpha }
+								enableStyle={ enableStyle }
+								isStyleSettable={ isStyleSettable }
+								onChange={ onBorderChange }
+								previousStyleSelection={
+									previousStyleSelection
+								}
+								__experimentalIsRenderedInSidebar={
+									__experimentalIsRenderedInSidebar
+								}
+								size={ size }
+							/>
+						</Spacer>
 					}
 					label={ __( 'Border width' ) }
 					hideLabelFromVision
@@ -104,6 +112,7 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }
@@ -114,6 +123,8 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 			</HStack>
@@ -132,7 +143,7 @@ const UnconnectedBorderControl = (
  * a "shape" abstraction.
  *
  * ```jsx
- * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { BorderControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [
@@ -146,6 +157,7 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 72b8ca0ec93c8a..9b0f064c51921f 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/packages/components/src/border-control/border-control/hook.ts
@@ -8,21 +8,18 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-
 import type { Border, BorderControlProps } from '../types';
-
-const sanitizeBorder = ( border?: Border ) => {
-	const hasNoWidth = border?.width === undefined || border.width === '';
-	const hasNoColor = border?.color === undefined;
-
-	// If width and color are undefined, unset any style selection as well.
-	if ( hasNoWidth && hasNoColor ) {
-		return undefined;
-	}
-
-	return border;
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
+
+// If either width or color are defined, the border is considered valid
+// and a border style can be set as well.
+const isValidBorder = ( border?: Border ) => {
+	const hasWidth = border?.width !== undefined && border.width !== '';
+	const hasColor = border?.color !== undefined;
+	return hasWidth || hasColor;
 };
 
 export function useBorderControl(
@@ -39,11 +36,22 @@ export function useBorderControl(
 		size = 'default',
 		value: border,
 		width,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(
 		border?.width
 	);
@@ -53,12 +61,16 @@ export function useBorderControl(
 	const [ colorSelection, setColorSelection ] = useState< string >();
 	const [ styleSelection, setStyleSelection ] = useState< string >();
 
+	const isStyleSettable = shouldSanitizeBorder
+		? isValidBorder( border )
+		: true;
+
 	const onBorderChange = useCallback(
 		( newBorder?: Border ) => {
-			if ( shouldSanitizeBorder ) {
-				return onChange( sanitizeBorder( newBorder ) );
+			if ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {
+				onChange( undefined );
+				return;
 			}
-
 			onChange( newBorder );
 		},
 		[ onChange, shouldSanitizeBorder ]
@@ -130,10 +142,10 @@ export function useBorderControl(
 	}
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( size );
+		const heightStyle = styles.wrapperHeight( computedSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, size ] );
+	}, [ wrapperWidth, cx, computedSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -147,6 +159,7 @@ export function useBorderControl(
 		enableStyle,
 		innerWrapperClassName,
 		inputWidth: wrapperWidth,
+		isStyleSettable,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,
@@ -155,8 +168,8 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		size,
-		__experimentalHasMultipleOrigins,
+		size: computedSize,
 		__experimentalIsRenderedInSidebar,
+		__next40pxDefaultSize,
 	};
 }
diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..ca8505c01a0ba0
--- /dev/null
+++ b/packages/components/src/border-control/stories/index.story.tsx
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BorderControl } from '..';
+import type { Border } from '../types';
+
+const meta: Meta< typeof BorderControl > = {
+	title: 'Components/BorderControl',
+	component: BorderControl,
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		width: { control: { type: 'text' } },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+
+// Multiple origin colors.
+const multipleOriginColors = [
+	{
+		name: 'Default',
+		colors: [
+			{ name: 'Gray 20', color: '#a7aaad' },
+			{ name: 'Gray 70', color: '#3c434a' },
+		],
+	},
+	{
+		name: 'Theme',
+		colors: [
+			{ name: 'Blue 20', color: '#72aee6' },
+			{ name: 'Blue 40', color: '#3582c4' },
+			{ name: 'Blue 70', color: '#0a4b78' },
+		],
+	},
+	{
+		name: 'User',
+		colors: [
+			{ name: 'Green', color: '#00a32a' },
+			{ name: 'Yellow', color: '#f2d675' },
+		],
+	},
+];
+
+const Template: StoryFn< typeof BorderControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ border, setBorder ] = useState< Border >();
+	const onChangeMerged: ComponentProps<
+		typeof BorderControl
+	>[ 'onChange' ] = ( newBorder ) => {
+		setBorder( newBorder );
+		onChange( newBorder );
+	};
+
+	return (
+		<BorderControl
+			onChange={ onChangeMerged }
+			value={ border }
+			{ ...props }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Border',
+	__next40pxDefaultSize: true,
+	enableAlpha: true,
+	enableStyle: true,
+	shouldSanitizeBorder: true,
+};
+
+/**
+ * Render a slider beside the control.
+ */
+export const WithSlider = Template.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	withSlider: true,
+};
+
+/**
+ * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
+ */
+export const WithSliderCustomWidth = Template.bind( {} );
+WithSliderCustomWidth.args = {
+	...Default.args,
+	withSlider: true,
+	width: '150px',
+};
+WithSliderCustomWidth.storyName = 'With Slider (Custom Width)';
+
+/**
+ * Restrict the width of the control and prevent it from expanding to take up additional space.
+ * When `true`, the `width` prop will be ignored.
+ */
+export const IsCompact = Template.bind( {} );
+IsCompact.args = {
+	...Default.args,
+	isCompact: true,
+};
+
+/**
+ * The `colors` object can contain multiple origins.
+ */
+export const WithMultipleOrigins = Template.bind( {} );
+WithMultipleOrigins.args = {
+	...Default.args,
+	colors: multipleOriginColors,
+};
diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx
deleted file mode 100644
index 2735e3ea2717b1..00000000000000
--- a/packages/components/src/border-control/stories/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BorderControl } from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
-import type { Border } from '../types';
-
-const meta: ComponentMeta< typeof BorderControl > = {
-	title: 'Components (Experimental)/BorderControl',
-	component: BorderControl,
-	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-		width: { control: { type: 'text' } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-// Available border colors.
-const colors = [
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-// Multiple origin colors.
-const multipleOriginColors = [
-	{
-		name: 'Default',
-		colors: [
-			{ name: 'Gray 20', color: '#a7aaad' },
-			{ name: 'Gray 70', color: '#3c434a' },
-		],
-	},
-	{
-		name: 'Theme',
-		colors: [
-			{ name: 'Blue 20', color: '#72aee6' },
-			{ name: 'Blue 40', color: '#3582c4' },
-			{ name: 'Blue 70', color: '#0a4b78' },
-		],
-	},
-	{
-		name: 'User',
-		colors: [
-			{ name: 'Green', color: '#00a32a' },
-			{ name: 'Yellow', color: '#f2d675' },
-		],
-	},
-];
-
-const Template: ComponentStory< typeof BorderControl > = ( {
-	onChange,
-	...props
-} ) => {
-	const [ border, setBorder ] = useState< Border >();
-	const onChangeMerged: ComponentProps<
-		typeof BorderControl
-	>[ 'onChange' ] = ( newBorder ) => {
-		setBorder( newBorder );
-		onChange( newBorder );
-	};
-
-	return (
-		<SlotFillProvider>
-			<BorderControl
-				onChange={ onChangeMerged }
-				value={ border }
-				{ ...props }
-			/>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	colors,
-	label: 'Border',
-};
-
-/**
- * Render a slider beside the control.
- */
-export const WithSlider = Template.bind( {} );
-WithSlider.args = {
-	...Default.args,
-	withSlider: true,
-};
-
-/**
- * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
- */
-export const WithSliderCustomWidth = Template.bind( {} );
-WithSliderCustomWidth.args = {
-	...Default.args,
-	withSlider: true,
-	width: '150px',
-};
-WithSliderCustomWidth.storyName = 'With Slider (Custom Width)';
-
-/**
- * Restrict the width of the control and prevent it from expanding to take up additional space.
- * When `true`, the `width` prop will be ignored.
- */
-export const IsCompact = Template.bind( {} );
-IsCompact.args = {
-	...Default.args,
-	isCompact: true,
-};
-
-/**
- * The `colors` object can contain multiple origins.
- */
-export const WithMultipleOrigins = Template.bind( {} );
-WithMultipleOrigins.args = {
-	...Default.args,
-	colors: multipleOriginColors,
-	__experimentalHasMultipleOrigins: true,
-};
-
-/**
- * Allow the alpha channel to be edited on each color.
- */
-export const WithAlphaEnabled = Template.bind( {} );
-WithAlphaEnabled.args = {
-	...Default.args,
-	enableAlpha: true,
-};
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index b105e8b62bd7bd..a678b6f362308a 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -7,11 +7,8 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../ui/utils/space';
-import {
-	StyledField,
-	StyledLabel,
-} from '../base-control/styles/base-control-styles';
+import { space } from '../utils/space';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,
 	UnitSelect,
@@ -19,12 +16,8 @@ import {
 
 import type { Border } from './types';
 
-const labelStyles = css`
-	font-weight: 500;
-`;
-
 const focusBoxShadow = css`
-	box-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };
+	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
 
 export const borderControl = css`
@@ -62,18 +55,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;
@@ -113,7 +99,7 @@ export const colorIndicatorWrapper = (
 	const { style } = border || {};
 
 	return css`
-		border-radius: 9999px;
+		border-radius: ${ CONFIG.radiusFull };
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
 		width: ${ size === '__unstable-large' ? '24px' : '22px' };
@@ -150,7 +136,6 @@ export const borderControlPopoverControls = css`
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
-		${ labelStyles }
 	}
 
 	&& ${ StyledLabel } + button:not( .has-text ) {
@@ -168,35 +153,13 @@ export const resetButton = css`
 
 	/* Override button component styling */
 	&& {
-		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		height: 46px;
-	}
-`;
-
-export const borderControlStylePicker = css`
-	${ StyledLabel } {
-		${ labelStyles }
-	}
-`;
-
-export const borderStyleButton = css`
-	&&&&& {
-		min-width: 30px;
-		width: 30px;
-		height: 30px;
-		padding: 3px;
 	}
 `;
 
 export const borderSlider = () => css`
 	flex: 1 1 60%;
 	${ rtl( { marginRight: space( 3 ) } )() }
-
-	${ StyledField } {
-		margin-bottom: 0;
-		font-size: 0;
-		display: flex;
-	}
 `;
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 922abba8f9c83c..ec7fb18837f97d 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ function createProps( customProps ) {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
+		__next40pxDefaultSize: true,
 		...customProps,
 	};
 	return props;
@@ -37,41 +39,28 @@ 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 openPopover = async ( user ) => {
+	const toggleButton = screen.getByLabelText( toggleLabelRegex );
+	await user.click( toggleButton );
 
-const rerenderBorderControl = async ( rerender, props ) => {
-	const view = rerender( <BorderControl { ...props } /> );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
-	return view;
-};
+	// Wait for color picker popover to fully appear
+	const pickerButton = screen.getByRole( 'button', {
+		name: /^Custom color picker/,
+	} );
 
-const openPopover = async () => {
-	const toggleButton = screen.getByLabelText( toggleLabelRegex );
-	fireEvent.click( toggleButton );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
+	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
 const getButton = ( name ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const queryButton = ( name ) => {
-	return screen.queryByRole( 'button', { name } );
+const getColorOption = ( color ) => {
+	return screen.getByRole( 'option', { name: `Color: ${ color }` } );
 };
 
-const clickButton = ( name ) => {
-	fireEvent.click( getButton( name ) );
+const queryButton = ( name ) => {
+	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
@@ -81,21 +70,12 @@ const getSliderInput = () => {
 const getWidthInput = () => {
 	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
 };
-const setWidthInput = ( value ) => {
-	const widthInput = getWidthInput();
-	act( () => {
-		widthInput.focus();
-	} );
-	fireEvent.change( widthInput, { target: { value } } );
-};
-
-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 +94,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,36 +108,37 @@ 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' );
 		} );
 
 		it( 'should render color and style popover', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
-			const colorSwatchButtons = screen.getAllByRole( 'button', {
+			const colorSwatchButtons = screen.getAllByRole( 'option', {
 				name: /^Color:/,
 			} );
 			const styleLabel = screen.getByText( 'Style' );
 			const solidButton = getButton( 'Solid' );
 			const dashedButton = getButton( 'Dashed' );
 			const dottedButton = getButton( 'Dotted' );
-			const resetButton = getButton( 'Reset to default' );
+			const resetButton = getButton( 'Reset' );
 
 			expect( customColorPicker ).toBeInTheDocument();
 			expect( colorSwatchButtons.length ).toEqual( colors.length );
@@ -168,22 +149,11 @@ describe( 'BorderControl', () => {
 			expect( resetButton ).toBeInTheDocument();
 		} );
 
-		it( 'should render color and style popover header', async () => {
-			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
-			await openPopover();
-
-			const headerLabel = screen.getByText( 'Border color' );
-			const closeButton = getButton( 'Close border color' );
-
-			expect( headerLabel ).toBeInTheDocument();
-			expect( closeButton ).toBeInTheDocument();
-		} );
-
 		it( 'should not render style options when opted out of', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { enableStyle: false } );
-			await renderBorderControl( props );
-			await openPopover();
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = queryButton( 'Solid' );
@@ -199,18 +169,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 +189,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 +200,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 +213,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 +228,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 +254,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,11 +271,15 @@ 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();
+			// As per [1], it is not currently possible to reasonably
+			// replicate this interaction using `userEvent`, so leaving
+			// `fireEvent` in place to cover it.
+			// [1]: https://github.com/testing-library/user-event/issues/871
 			fireEvent.change( slider, { target: { value: '5' } } );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -313,17 +287,18 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
 		} );
 
 		it( 'should update color selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Color: Green' );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -332,10 +307,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color selection when toggling swatch off', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -344,10 +320,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should update style selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Dashed' );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -356,19 +333,21 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should take no action when color and style popover is closed', async () => {
-			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Close border color' );
+			const user = userEvent.setup();
+			const props = createProps();
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.keyboard( 'Escape' );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Reset to default' );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getButton( 'Reset' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				color: undefined,
@@ -378,25 +357,27 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should sanitize border when width and color are undefined', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
-			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			const { rerender } = render( <BorderControl { ...props } /> );
+			await user.clear( getWidthInput() );
+			rerender( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( undefined );
 		} );
 
 		it( 'should not sanitize border when requested', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
-			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			const { rerender } = render( <BorderControl { ...props } /> );
+			await user.clear( getWidthInput() );
+			rerender( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 2, {
 				color: undefined,
@@ -406,12 +387,16 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Color: Green' );
-			clickButton( 'Dotted' );
-			setWidthInput( '0' );
+			render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
+			await user.click( getButton( 'Dotted' ) );
+			await user.type( getWidthInput(), '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 3, {
 				color: undefined,
@@ -421,15 +406,23 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Color: Green' );
-			await rerenderBorderControl( rerender, props );
-			clickButton( 'Dotted' );
-			await rerenderBorderControl( rerender, props );
-			setWidthInput( '0' );
-			setWidthInput( '5' );
+			const { rerender } = render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
+			rerender( <BorderControl { ...props } /> );
+			await user.click( getButton( 'Dotted' ) );
+			rerender( <BorderControl { ...props } /> );
+			const widthInput = getWidthInput();
+			await user.type( widthInput, '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
+			await user.type( widthInput, '5', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 4, {
 				color: '#00a32a',
@@ -439,10 +432,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { value: undefined } );
-			const { rerender } = await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Color: Yellow' );
+			const { rerender } = render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Yellow' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#bd8600',
@@ -450,9 +444,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
-			clickButton( 'Color: Green' );
+			await user.type( getWidthInput(), '0' );
+
+			rerender( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#00a32a',
@@ -462,13 +458,14 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying style to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
-			await openPopover();
-			clickButton( 'Dashed' );
+			const { rerender } = render( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,
@@ -476,9 +473,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
-			clickButton( 'Dotted' );
+			await user.type( getWidthInput(), '0' );
+
+			rerender( <BorderControl { ...props } /> );
+			await openPopover( user );
+			await user.click( getButton( 'Dotted' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 290618fbff8cf9..ecd3f67c9be08d 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -8,6 +8,7 @@ import type { CSSProperties } from 'react';
  */
 import type { ColorPaletteProps } from '../color-palette/types';
 import type { PopoverProps } from '../popover/types';
+import type { ToggleGroupControlProps } from '../toggle-group-control/types';
 
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
@@ -17,15 +18,19 @@ export type Border = {
 
 export type ColorProps = Pick<
 	ColorPaletteProps,
-	| 'colors'
-	| 'enableAlpha'
-	| '__experimentalHasMultipleOrigins'
-	| '__experimentalIsRenderedInSidebar'
+	'colors' | '__experimentalIsRenderedInSidebar'
 > & {
 	/**
 	 * This toggles the ability to choose custom colors.
 	 */
 	disableCustomColors?: boolean;
+	/**
+	 * This controls whether the alpha channel will be offered when selecting
+	 * custom colors.
+	 *
+	 * @default true
+	 */
+	enableAlpha?: boolean;
 };
 
 export type LabelProps = {
@@ -63,6 +68,10 @@ export type BorderControlProps = ColorProps &
 		 * interaction that selects or clears, border color, style, or width.
 		 */
 		onChange: ( value?: Border ) => void;
+		/**
+		 * Placeholder text for the number input.
+		 */
+		placeholder?: HTMLInputElement[ 'placeholder' ];
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
@@ -76,9 +85,8 @@ export type BorderControlProps = ColorProps &
 		 */
 		shouldSanitizeBorder?: boolean;
 		/**
-		 * Whether or not to show the header for the border color and style
-		 * picker dropdown. The header includes a label for the color picker
-		 * and a close button.
+		 * @deprecated This prop no longer has any effect.
+		 * @ignore
 		 */
 		showDropdownHeader?: boolean;
 		/**
@@ -102,6 +110,19 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &
@@ -112,6 +133,10 @@ export type DropdownProps = ColorProps &
 		 * values for its popover controls.
 		 */
 		border?: Border;
+		/**
+		 * Whether a border style can be set, based on the border sanitization settings.
+		 */
+		isStyleSettable: boolean;
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
@@ -127,14 +152,16 @@ export type DropdownProps = ColorProps &
 		 */
 		previousStyleSelection?: string;
 		/**
-		 * Whether or not to render a header for the border color and style picker
-		 * dropdown. The header includes a label for the color picker and a
-		 * close button.
+		 * @deprecated This prop no longer has any effect.
+		 * @ignore
 		 */
 		showDropdownHeader?: boolean;
 	};
 
-export type StylePickerProps = LabelProps & {
+export type StylePickerProps = Omit<
+	ToggleGroupControlProps,
+	'value' | 'onChange' | 'children'
+> & {
 	/**
 	 * A callback function invoked when a border style is selected or cleared.
 	 */
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index edf3993679033f..8bcb5a5dad8fc2 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -1,111 +1,126 @@
 # BoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-boxcontrol--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-## Usage
+A control that lets users set values for top, right, bottom, and left. Can be
+used as an input control for values like `padding` or `margin`.
 
 ```jsx
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-const Example = () => {
-	const [ values, setValues ] = useState( {
-		top: '50px',
-		left: '10%',
-		right: '10%',
-		bottom: '50px',
-	} );
-
-	return (
-		<BoxControl
-			values={ values }
-			onChange={ ( nextValues ) => setValues( nextValues ) }
-		/>
-	);
+import { useState } from 'react';
+import { BoxControl } from '@wordpress/components';
+
+function Example() {
+  const [ values, setValues ] = useState( {
+    top: '50px',
+    left: '10%',
+    right: '10%',
+    bottom: '50px',
+  } );
+
+  return (
+    <BoxControl
+      __next40pxDefaultSize
+      values={ values }
+      onChange={ setValues }
+    />
+  );
 };
 ```
-
 ## Props
-### allowReset
+
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `allowReset`
 
 If this property is true, a button to reset the box control is rendered.
 
-- Type: `Boolean`
-- Required: No
-- Default: `true`
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
 
-### splitOnAxis
+### `id`
 
-If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
+The id to use as a base for the unique HTML id attribute of the control.
 
-- Type: `Boolean`
-- Required: No
-- Default: `false`
+ - Type: `string`
+ - Required: No
 
-### inputProps
+### `inputProps`
 
-Props for the internal [InputControl](../input-control) components.
+Props for the internal `UnitControl` components.
 
--   Type: `Object`
--   Required: No
+ - Type: `UnitControlPassthroughProps`
+ - Required: No
+ - Default: `{
+    	min: 0,
+    }`
 
-### label
+### `label`
 
-Heading label for BoxControl.
+Heading label for the control.
 
--   Type: `String`
--   Required: No
--   Default: `Box Control`
+ - Type: `string`
+ - Required: No
+ - Default: `__( 'Box Control' )`
 
-### onChange
+### `onChange`
 
 A callback function when an input value changes.
 
--   Type: `Function`
--   Required: Yes
+ - Type: `(next: BoxControlValue) => void`
+ - Required: No
+ - Default: `() => {}`
 
-### resetValues
+### `resetValues`
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 
--   Type: `Object`
--   Required: No
+ - Type: `BoxControlValue`
+ - Required: No
+ - Default: `{
+    	top: undefined,
+    	right: undefined,
+    	bottom: undefined,
+    	left: undefined,
+    }`
 
-### sides
+### `sides`
 
 Collection of sides to allow control of. If omitted or empty, all sides will be available.
 
--   Type: `Array<Object>`
--   Required: No
-
-### units
-
-Collection of available units which are compatible with [UnitControl](../unit-control).
+Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
 
--   Type: `Array<Object>`
--   Required: No
+ - Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
+ - Required: No
 
-### values
+### `splitOnAxis`
 
-The `top`, `right`, `bottom`, and `left` box dimension values.
+If this property is true, when the box control is unlinked, vertical and horizontal controls
+can be used instead of updating individual sides.
 
--   Type: `Object`
--   Required: No
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### onMouseOver
+### `units`
 
-A handler for onMouseOver events.
+Available units to select from.
 
--   Type: `Function`
--   Required: No
+ - Type: `WPUnitControlUnit[]`
+ - Required: No
+ - Default: `CSS_UNITS`
 
-### onMouseOut
+### `values`
 
-A handler for onMouseOut events.
+The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 
--   Type: `Function`
--   Required: No
+ - Type: `BoxControlValue`
+ - Required: No
diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
deleted file mode 100644
index fcde202fd7de8f..00000000000000
--- a/packages/components/src/box-control/all-input-control.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Internal dependencies
- */
-import UnitControl from './unit-control';
-import {
-	LABELS,
-	applyValueToSides,
-	getAllValue,
-	isValuesMixed,
-	isValuesDefined,
-} from './utils';
-
-const noop = () => {};
-
-export default function AllInputControl( {
-	onChange = noop,
-	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
-	values,
-	sides,
-	selectedUnits,
-	setSelectedUnits,
-	...props
-} ) {
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
-	const allPlaceholder = isMixed ? LABELS.mixed : null;
-
-	const handleOnFocus = ( event ) => {
-		onFocus( event, { side: 'all' } );
-	};
-
-	const handleOnChange = ( next ) => {
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-		const nextValues = applyValueToSides( values, nextValue, sides );
-
-		onChange( nextValues );
-	};
-
-	// Set selected unit so it can be used as fallback by unlinked controls
-	// when individual sides do not have a value containing a unit.
-	const handleOnUnitChange = ( unit ) => {
-		const newUnits = applyValueToSides( selectedUnits, unit, sides );
-		setSelectedUnits( newUnits );
-	};
-
-	const handleOnHoverOn = () => {
-		onHoverOn( {
-			top: true,
-			bottom: true,
-			left: true,
-			right: true,
-		} );
-	};
-
-	const handleOnHoverOff = () => {
-		onHoverOff( {
-			top: false,
-			bottom: false,
-			left: false,
-			right: false,
-		} );
-	};
-
-	return (
-		<UnitControl
-			{ ...props }
-			disableUnits={ isMixed }
-			isOnly
-			value={ allValue }
-			onChange={ handleOnChange }
-			onUnitChange={ handleOnUnitChange }
-			onFocus={ handleOnFocus }
-			onHoverOn={ handleOnHoverOn }
-			onHoverOff={ handleOnHoverOff }
-			placeholder={ allPlaceholder }
-		/>
-	);
-}
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
new file mode 100644
index 00000000000000..0cfaea21915f6d
--- /dev/null
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import type { UnitControlProps } from '../unit-control/types';
+import {
+	FlexedRangeControl,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import type { BoxControlInputControlProps } from './types';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
+import {
+	LABELS,
+	applyValueToSides,
+	getAllValue,
+	isValuesMixed,
+	isValuesDefined,
+	CUSTOM_VALUE_SETTINGS,
+} from './utils';
+
+const noop = () => {};
+
+export default function AllInputControl( {
+	__next40pxDefaultSize,
+	onChange = noop,
+	onFocus = noop,
+	values,
+	sides,
+	selectedUnits,
+	setSelectedUnits,
+	...props
+}: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AllInputControl, 'box-control-input-all' );
+
+	const allValue = getAllValue( values, selectedUnits, sides );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
+	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
+
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( allValue );
+
+	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
+		event
+	) => {
+		onFocus( event, { side: 'all' } );
+	};
+
+	const onValueChange = ( next?: string ) => {
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		const nextValues = applyValueToSides( values, nextValue, sides );
+
+		onChange( nextValues );
+	};
+
+	const sliderOnChange = ( next?: number ) => {
+		onValueChange(
+			next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined
+		);
+	};
+
+	// Set selected unit so it can be used as fallback by unlinked controls
+	// when individual sides do not have a value containing a unit.
+	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
+		const newUnits = applyValueToSides( selectedUnits, unit, sides );
+		setSelectedUnits( newUnits );
+	};
+
+	return (
+		<>
+			<StyledUnitControl
+				{ ...props }
+				__shouldNotWarnDeprecated36pxSize
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				className="component-box-control__unit-control"
+				disableUnits={ isMixed }
+				id={ inputId }
+				isPressEnterToChange
+				value={ allValue }
+				onChange={ onValueChange }
+				onUnitChange={ handleOnUnitChange }
+				onFocus={ handleOnFocus }
+				placeholder={ allPlaceholder }
+				label={ LABELS.all }
+				hideLabelFromVision
+			/>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
+				aria-controls={ inputId }
+				label={ LABELS.all }
+				hideLabelFromVision
+				onChange={ sliderOnChange }
+				min={ 0 }
+				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
+				step={
+					CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
+				}
+				value={ parsedQuantity ?? 0 }
+				withInputField={ false }
+			/>
+		</>
+	);
+}
diff --git a/packages/components/src/box-control/axial-input-controls.js b/packages/components/src/box-control/axial-input-controls.js
deleted file mode 100644
index 99a09d4ba366c7..00000000000000
--- a/packages/components/src/box-control/axial-input-controls.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Internal dependencies
- */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import UnitControl from './unit-control';
-import { LABELS } from './utils';
-import { Layout } from './styles/box-control-styles';
-
-const groupedSides = [ 'vertical', 'horizontal' ];
-
-export default function AxialInputControls( {
-	onChange,
-	onFocus,
-	onHoverOn,
-	onHoverOff,
-	values,
-	selectedUnits,
-	setSelectedUnits,
-	sides,
-	...props
-} ) {
-	const createHandleOnFocus = ( side ) => ( event ) => {
-		if ( ! onFocus ) {
-			return;
-		}
-		onFocus( event, { side } );
-	};
-
-	const createHandleOnHoverOn = ( side ) => () => {
-		if ( ! onHoverOn ) {
-			return;
-		}
-		if ( side === 'vertical' ) {
-			onHoverOn( {
-				top: true,
-				bottom: true,
-			} );
-		}
-		if ( side === 'horizontal' ) {
-			onHoverOn( {
-				left: true,
-				right: true,
-			} );
-		}
-	};
-
-	const createHandleOnHoverOff = ( side ) => () => {
-		if ( ! onHoverOff ) {
-			return;
-		}
-		if ( side === 'vertical' ) {
-			onHoverOff( {
-				top: false,
-				bottom: false,
-			} );
-		}
-		if ( side === 'horizontal' ) {
-			onHoverOff( {
-				left: false,
-				right: false,
-			} );
-		}
-	};
-
-	const createHandleOnChange = ( side ) => ( next ) => {
-		if ( ! onChange ) {
-			return;
-		}
-		const nextValues = { ...values };
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-
-		if ( side === 'vertical' ) {
-			nextValues.top = nextValue;
-			nextValues.bottom = nextValue;
-		}
-
-		if ( side === 'horizontal' ) {
-			nextValues.left = nextValue;
-			nextValues.right = nextValue;
-		}
-
-		onChange( nextValues );
-	};
-
-	const createHandleOnUnitChange = ( side ) => ( next ) => {
-		const newUnits = { ...selectedUnits };
-
-		if ( side === 'vertical' ) {
-			newUnits.top = next;
-			newUnits.bottom = next;
-		}
-
-		if ( side === 'horizontal' ) {
-			newUnits.left = next;
-			newUnits.right = next;
-		}
-
-		setSelectedUnits( newUnits );
-	};
-
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? groupedSides.filter( ( side ) => sides.includes( side ) )
-		: groupedSides;
-
-	const first = filteredSides[ 0 ];
-	const last = filteredSides[ filteredSides.length - 1 ];
-	const only = first === last && first;
-
-	return (
-		<Layout
-			gap={ 0 }
-			align="top"
-			className="component-box-control__vertical-horizontal-input-controls"
-		>
-			{ filteredSides.map( ( side ) => {
-				const [ parsedQuantity, parsedUnit ] =
-					parseQuantityAndUnitFromRawValue(
-						side === 'vertical' ? values.top : values.left
-					);
-				const selectedUnit =
-					side === 'vertical'
-						? selectedUnits.top
-						: selectedUnits.left;
-				return (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ [
-							parsedQuantity,
-							selectedUnit ?? parsedUnit,
-						].join( '' ) }
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ side }
-					/>
-				);
-			} ) }
-		</Layout>
-	);
-}
diff --git a/packages/components/src/box-control/axial-input-controls.tsx b/packages/components/src/box-control/axial-input-controls.tsx
new file mode 100644
index 00000000000000..f8cbc5635c9b55
--- /dev/null
+++ b/packages/components/src/box-control/axial-input-controls.tsx
@@ -0,0 +1,165 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import Tooltip from '../tooltip';
+import { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import type { BoxControlInputControlProps } from './types';
+
+const groupedSides = [ 'vertical', 'horizontal' ] as const;
+type GroupedSide = ( typeof groupedSides )[ number ];
+
+export default function AxialInputControls( {
+	__next40pxDefaultSize,
+	onChange,
+	onFocus,
+	values,
+	selectedUnits,
+	setSelectedUnits,
+	sides,
+	...props
+}: BoxControlInputControlProps ) {
+	const generatedId = useInstanceId(
+		AxialInputControls,
+		`box-control-input`
+	);
+
+	const createHandleOnFocus =
+		( side: GroupedSide ) =>
+		( event: React.FocusEvent< HTMLInputElement > ) => {
+			if ( ! onFocus ) {
+				return;
+			}
+			onFocus( event, { side } );
+		};
+
+	const handleOnValueChange = ( side: GroupedSide, next?: string ) => {
+		if ( ! onChange ) {
+			return;
+		}
+		const nextValues = { ...values };
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+
+		if ( side === 'vertical' ) {
+			nextValues.top = nextValue;
+			nextValues.bottom = nextValue;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = nextValue;
+			nextValues.right = nextValue;
+		}
+
+		onChange( nextValues );
+	};
+
+	const createHandleOnUnitChange =
+		( side: GroupedSide ) => ( next?: string ) => {
+			const newUnits = { ...selectedUnits };
+
+			if ( side === 'vertical' ) {
+				newUnits.top = next;
+				newUnits.bottom = next;
+			}
+
+			if ( side === 'horizontal' ) {
+				newUnits.left = next;
+				newUnits.right = next;
+			}
+
+			setSelectedUnits( newUnits );
+		};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue(
+						side === 'vertical' ? values.top : values.left
+					);
+				const selectedUnit =
+					side === 'vertical'
+						? selectedUnits.top
+						: selectedUnits.left;
+
+				const inputId = [ generatedId, side ].join( '-' );
+
+				return (
+					<InputWrapper key={ side }>
+						<FlexedBoxControlIcon side={ side } sides={ sides } />
+						<Tooltip placement="top-end" text={ LABELS[ side ] }>
+							<StyledUnitControl
+								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								className="component-box-control__unit-control"
+								id={ inputId }
+								isPressEnterToChange
+								value={ [
+									parsedQuantity,
+									selectedUnit ?? parsedUnit,
+								].join( '' ) }
+								onChange={ ( newValue ) =>
+									handleOnValueChange( side, newValue )
+								}
+								onUnitChange={ createHandleOnUnitChange(
+									side
+								) }
+								onFocus={ createHandleOnFocus( side ) }
+								label={ LABELS[ side ] }
+								hideLabelFromVision
+								key={ side }
+							/>
+						</Tooltip>
+						<FlexedRangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__shouldNotWarnDeprecated36pxSize
+							aria-controls={ inputId }
+							label={ LABELS[ side ] }
+							hideLabelFromVision
+							onChange={ ( newValue ) =>
+								handleOnValueChange(
+									side,
+									newValue !== undefined
+										? [
+												newValue,
+												selectedUnit ?? parsedUnit,
+										  ].join( '' )
+										: undefined
+								)
+							}
+							min={ 0 }
+							max={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
+									?.max ?? 10
+							}
+							step={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
+									?.step ?? 0.1
+							}
+							value={ parsedQuantity ?? 0 }
+							withInputField={ false }
+						/>
+					</InputWrapper>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/components/src/box-control/docs-manifest.json b/packages/components/src/box-control/docs-manifest.json
new file mode 100644
index 00000000000000..c506e7a9e27eef
--- /dev/null
+++ b/packages/components/src/box-control/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "BoxControl",
+	"filePath": "./index.tsx"
+}
diff --git a/packages/components/src/box-control/icon.js b/packages/components/src/box-control/icon.js
deleted file mode 100644
index 2a7db9972c5b13..00000000000000
--- a/packages/components/src/box-control/icon.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	Root,
-	Viewbox,
-	TopStroke,
-	RightStroke,
-	BottomStroke,
-	LeftStroke,
-} from './styles/box-control-icon-styles';
-
-const BASE_ICON_SIZE = 24;
-
-export default function BoxControlIcon( {
-	size = 24,
-	side = 'all',
-	sides,
-	...props
-} ) {
-	const isSideDisabled = ( value ) =>
-		sides?.length && ! sides.includes( value );
-
-	const hasSide = ( value ) => {
-		if ( isSideDisabled( value ) ) {
-			return false;
-		}
-
-		return side === 'all' || side === value;
-	};
-
-	const top = hasSide( 'top' ) || hasSide( 'vertical' );
-	const right = hasSide( 'right' ) || hasSide( 'horizontal' );
-	const bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );
-	const left = hasSide( 'left' ) || hasSide( 'horizontal' );
-
-	// Simulates SVG Icon scaling.
-	const scale = size / BASE_ICON_SIZE;
-
-	return (
-		<Root style={ { transform: `scale(${ scale })` } } { ...props }>
-			<Viewbox>
-				<TopStroke isFocused={ top } />
-				<RightStroke isFocused={ right } />
-				<BottomStroke isFocused={ bottom } />
-				<LeftStroke isFocused={ left } />
-			</Viewbox>
-		</Root>
-	);
-}
diff --git a/packages/components/src/box-control/icon.tsx b/packages/components/src/box-control/icon.tsx
new file mode 100644
index 00000000000000..480235aa7c0ad8
--- /dev/null
+++ b/packages/components/src/box-control/icon.tsx
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import {
+	Root,
+	Viewbox,
+	TopStroke,
+	RightStroke,
+	BottomStroke,
+	LeftStroke,
+} from './styles/box-control-icon-styles';
+import type { BoxControlIconProps, BoxControlProps } from './types';
+
+const BASE_ICON_SIZE = 24;
+
+export default function BoxControlIcon( {
+	size = 24,
+	side = 'all',
+	sides,
+	...props
+}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {
+	const isSideDisabled = (
+		value: NonNullable< BoxControlProps[ 'sides' ] >[ number ]
+	) => sides?.length && ! sides.includes( value );
+
+	const hasSide = (
+		value: NonNullable< BoxControlProps[ 'sides' ] >[ number ]
+	) => {
+		if ( isSideDisabled( value ) ) {
+			return false;
+		}
+
+		return side === 'all' || side === value;
+	};
+
+	const top = hasSide( 'top' ) || hasSide( 'vertical' );
+	const right = hasSide( 'right' ) || hasSide( 'horizontal' );
+	const bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );
+	const left = hasSide( 'left' ) || hasSide( 'horizontal' );
+
+	// Simulates SVG Icon scaling.
+	const scale = size / BASE_ICON_SIZE;
+
+	return (
+		<Root style={ { transform: `scale(${ scale })` } } { ...props }>
+			<Viewbox>
+				<TopStroke isFocused={ top } />
+				<RightStroke isFocused={ right } />
+				<BottomStroke isFocused={ bottom } />
+				<LeftStroke isFocused={ left } />
+			</Viewbox>
+		</Root>
+	);
+}
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
deleted file mode 100644
index d8a0fdf4c67483..00000000000000
--- a/packages/components/src/box-control/index.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { BaseControl } from '../base-control';
-import Button from '../button';
-import { FlexItem, FlexBlock } from '../flex';
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
-import BoxControlIcon from './icon';
-import LinkedButton from './linked-button';
-import {
-	Root,
-	Header,
-	HeaderControlWrapper,
-} from './styles/box-control-styles';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import {
-	DEFAULT_VALUES,
-	getInitialSide,
-	isValuesMixed,
-	isValuesDefined,
-} from './utils';
-import { useControlledState } from '../utils/hooks';
-
-const defaultInputProps = {
-	min: 0,
-};
-
-const noop = () => {};
-
-function useUniqueId( idProp ) {
-	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
-
-	return idProp || instanceId;
-}
-export default function BoxControl( {
-	id: idProp,
-	inputProps = defaultInputProps,
-	onChange = noop,
-	label = __( 'Box Control' ),
-	values: valuesProp,
-	units,
-	sides,
-	splitOnAxis = false,
-	allowReset = true,
-	resetValues = DEFAULT_VALUES,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	const [ values, setValues ] = useControlledState( valuesProp, {
-		fallback: DEFAULT_VALUES,
-	} );
-	const inputValues = values || DEFAULT_VALUES;
-	const hasInitialValue = isValuesDefined( valuesProp );
-	const hasOneSide = sides?.length === 1;
-
-	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
-	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
-	);
-
-	const [ side, setSide ] = useState(
-		getInitialSide( isLinked, splitOnAxis )
-	);
-
-	// Tracking selected units via internal state allows filtering of CSS unit
-	// only values from being saved while maintaining preexisting unit selection
-	// behaviour. Filtering CSS only values prevents invalid style values.
-	const [ selectedUnits, setSelectedUnits ] = useState( {
-		top: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],
-		right: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],
-		bottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],
-		left: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],
-	} );
-
-	const id = useUniqueId( idProp );
-	const headingId = `${ id }-heading`;
-
-	const toggleLinked = () => {
-		setIsLinked( ! isLinked );
-		setSide( getInitialSide( ! isLinked, splitOnAxis ) );
-	};
-
-	const handleOnFocus = ( event, { side: nextSide } ) => {
-		setSide( nextSide );
-	};
-
-	const handleOnChange = ( nextValues ) => {
-		onChange( nextValues );
-		setValues( nextValues );
-		setIsDirty( true );
-	};
-
-	const handleOnReset = () => {
-		onChange( resetValues );
-		setValues( resetValues );
-		setSelectedUnits( resetValues );
-		setIsDirty( false );
-	};
-
-	const inputControlProps = {
-		...inputProps,
-		onChange: handleOnChange,
-		onFocus: handleOnFocus,
-		isLinked,
-		units,
-		selectedUnits,
-		setSelectedUnits,
-		sides,
-		values: inputValues,
-		onMouseOver,
-		onMouseOut,
-	};
-
-	return (
-		<Root id={ id } role="group" aria-labelledby={ headingId }>
-			<Header className="component-box-control__header">
-				<FlexItem>
-					<BaseControl.VisualLabel id={ headingId }>
-						{ label }
-					</BaseControl.VisualLabel>
-				</FlexItem>
-				{ allowReset && (
-					<FlexItem>
-						<Button
-							className="component-box-control__reset-button"
-							isSecondary
-							isSmall
-							onClick={ handleOnReset }
-							disabled={ ! isDirty }
-						>
-							{ __( 'Reset' ) }
-						</Button>
-					</FlexItem>
-				) }
-			</Header>
-			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
-				<FlexItem>
-					<BoxControlIcon side={ side } sides={ sides } />
-				</FlexItem>
-				{ isLinked && (
-					<FlexBlock>
-						<AllInputControl
-							aria-label={ label }
-							{ ...inputControlProps }
-						/>
-					</FlexBlock>
-				) }
-				{ ! isLinked && splitOnAxis && (
-					<FlexBlock>
-						<AxialInputControls { ...inputControlProps } />
-					</FlexBlock>
-				) }
-				{ ! hasOneSide && (
-					<FlexItem>
-						<LinkedButton
-							onClick={ toggleLinked }
-							isLinked={ isLinked }
-						/>
-					</FlexItem>
-				) }
-			</HeaderControlWrapper>
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
-		</Root>
-	);
-}
-
-export { applyValueToSides } from './utils';
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
new file mode 100644
index 00000000000000..46cf2cd93a9444
--- /dev/null
+++ b/packages/components/src/box-control/index.tsx
@@ -0,0 +1,214 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BaseControl } from '../base-control';
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import AxialInputControls from './axial-input-controls';
+import LinkedButton from './linked-button';
+import { Grid } from '../grid';
+import {
+	FlexedBoxControlIcon,
+	InputWrapper,
+	ResetButton,
+	LinkedButtonWrapper,
+} from './styles/box-control-styles';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import {
+	DEFAULT_VALUES,
+	getInitialSide,
+	isValuesMixed,
+	isValuesDefined,
+} from './utils';
+import { useControlledState } from '../utils/hooks';
+import type {
+	BoxControlIconProps,
+	BoxControlProps,
+	BoxControlValue,
+} from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+const defaultInputProps = {
+	min: 0,
+};
+
+const noop = () => {};
+
+function useUniqueId( idProp?: string ) {
+	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
+
+	return idProp || instanceId;
+}
+
+/**
+ * A control that lets users set values for top, right, bottom, and left. Can be
+ * used as an input control for values like `padding` or `margin`.
+ *
+ * ```jsx
+ * import { useState } from 'react';
+ * import { BoxControl } from '@wordpress/components';
+ *
+ * function Example() {
+ *   const [ values, setValues ] = useState( {
+ *     top: '50px',
+ *     left: '10%',
+ *     right: '10%',
+ *     bottom: '50px',
+ *   } );
+ *
+ *   return (
+ *     <BoxControl
+ *       __next40pxDefaultSize
+ *       values={ values }
+ *       onChange={ setValues }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+function BoxControl( {
+	__next40pxDefaultSize = false,
+	id: idProp,
+	inputProps = defaultInputProps,
+	onChange = noop,
+	label = __( 'Box Control' ),
+	values: valuesProp,
+	units,
+	sides,
+	splitOnAxis = false,
+	allowReset = true,
+	resetValues = DEFAULT_VALUES,
+	onMouseOver,
+	onMouseOut,
+}: BoxControlProps ) {
+	const [ values, setValues ] = useControlledState( valuesProp, {
+		fallback: DEFAULT_VALUES,
+	} );
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( valuesProp );
+	const hasOneSide = sides?.length === 1;
+
+	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+	);
+
+	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
+		getInitialSide( isLinked, splitOnAxis )
+	);
+
+	// Tracking selected units via internal state allows filtering of CSS unit
+	// only values from being saved while maintaining preexisting unit selection
+	// behaviour. Filtering CSS only values prevents invalid style values.
+	const [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {
+		top: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],
+		right: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],
+		bottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],
+		left: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],
+	} );
+
+	const id = useUniqueId( idProp );
+	const headingId = `${ id }-heading`;
+
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+		setSide( getInitialSide( ! isLinked, splitOnAxis ) );
+	};
+
+	const handleOnFocus = (
+		_event: React.FocusEvent< HTMLInputElement >,
+		{ side: nextSide }: { side: typeof side }
+	) => {
+		setSide( nextSide );
+	};
+
+	const handleOnChange = ( nextValues: BoxControlValue ) => {
+		onChange( nextValues );
+		setValues( nextValues );
+		setIsDirty( true );
+	};
+
+	const handleOnReset = () => {
+		onChange( resetValues );
+		setValues( resetValues );
+		setSelectedUnits( resetValues );
+		setIsDirty( false );
+	};
+
+	const inputControlProps = {
+		onMouseOver,
+		onMouseOut,
+		...inputProps,
+		onChange: handleOnChange,
+		onFocus: handleOnFocus,
+		isLinked,
+		units,
+		selectedUnits,
+		setSelectedUnits,
+		sides,
+		values: inputValues,
+		__next40pxDefaultSize,
+	};
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BoxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
+	return (
+		<Grid
+			id={ id }
+			columns={ 3 }
+			templateColumns="1fr min-content min-content"
+			role="group"
+			aria-labelledby={ headingId }
+		>
+			<BaseControl.VisualLabel id={ headingId }>
+				{ label }
+			</BaseControl.VisualLabel>
+			{ isLinked && (
+				<InputWrapper>
+					<FlexedBoxControlIcon side={ side } sides={ sides } />
+					<AllInputControl { ...inputControlProps } />
+				</InputWrapper>
+			) }
+			{ ! hasOneSide && (
+				<LinkedButtonWrapper>
+					<LinkedButton
+						onClick={ toggleLinked }
+						isLinked={ isLinked }
+					/>
+				</LinkedButtonWrapper>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
+			{ ! isLinked && ! splitOnAxis && (
+				<InputControls { ...inputControlProps } />
+			) }
+			{ allowReset && (
+				<ResetButton
+					className="component-box-control__reset-button"
+					variant="secondary"
+					size="small"
+					onClick={ handleOnReset }
+					disabled={ ! isDirty }
+				>
+					{ __( 'Reset' ) }
+				</ResetButton>
+			) }
+		</Grid>
+	);
+}
+
+export { applyValueToSides } from './utils';
+export default BoxControl;
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
deleted file mode 100644
index 244488c70046ac..00000000000000
--- a/packages/components/src/box-control/input-controls.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Internal dependencies
- */
-import UnitControl from './unit-control';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { ALL_SIDES, LABELS } from './utils';
-import { LayoutContainer, Layout } from './styles/box-control-styles';
-
-const noop = () => {};
-
-export default function BoxInputControls( {
-	onChange = noop,
-	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
-	values,
-	selectedUnits,
-	setSelectedUnits,
-	sides,
-	...props
-} ) {
-	const createHandleOnFocus = ( side ) => ( event ) => {
-		onFocus( event, { side } );
-	};
-
-	const createHandleOnHoverOn = ( side ) => () => {
-		onHoverOn( { [ side ]: true } );
-	};
-
-	const createHandleOnHoverOff = ( side ) => () => {
-		onHoverOff( { [ side ]: false } );
-	};
-
-	const handleOnChange = ( nextValues ) => {
-		onChange( nextValues );
-	};
-
-	const createHandleOnChange =
-		( side ) =>
-		( next, { event } ) => {
-			const { altKey } = event;
-			const nextValues = { ...values };
-			const isNumeric = ! isNaN( parseFloat( next ) );
-			const nextValue = isNumeric ? next : undefined;
-
-			nextValues[ side ] = nextValue;
-
-			/**
-			 * Supports changing pair sides. For example, holding the ALT key
-			 * when changing the TOP will also update BOTTOM.
-			 */
-			if ( altKey ) {
-				switch ( side ) {
-					case 'top':
-						nextValues.bottom = nextValue;
-						break;
-					case 'bottom':
-						nextValues.top = nextValue;
-						break;
-					case 'left':
-						nextValues.right = nextValue;
-						break;
-					case 'right':
-						nextValues.left = nextValue;
-						break;
-				}
-			}
-
-			handleOnChange( nextValues );
-		};
-
-	const createHandleOnUnitChange = ( side ) => ( next ) => {
-		const newUnits = { ...selectedUnits };
-		newUnits[ side ] = next;
-		setSelectedUnits( newUnits );
-	};
-
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
-		: ALL_SIDES;
-
-	const first = filteredSides[ 0 ];
-	const last = filteredSides[ filteredSides.length - 1 ];
-	const only = first === last && first;
-
-	return (
-		<LayoutContainer className="component-box-control__input-controls-wrapper">
-			<Layout
-				gap={ 0 }
-				align="top"
-				className="component-box-control__input-controls"
-			>
-				{ filteredSides.map( ( side ) => {
-					const [ parsedQuantity, parsedUnit ] =
-						parseQuantityAndUnitFromRawValue( values[ side ] );
-
-					const computedUnit = values[ side ]
-						? parsedUnit
-						: selectedUnits[ side ];
-
-					return (
-						<UnitControl
-							{ ...props }
-							isFirst={ first === side }
-							isLast={ last === side }
-							isOnly={ only === side }
-							value={ [ parsedQuantity, computedUnit ].join(
-								''
-							) }
-							onChange={ createHandleOnChange( side ) }
-							onUnitChange={ createHandleOnUnitChange( side ) }
-							onFocus={ createHandleOnFocus( side ) }
-							onHoverOn={ createHandleOnHoverOn( side ) }
-							onHoverOff={ createHandleOnHoverOff( side ) }
-							label={ LABELS[ side ] }
-							key={ `box-control-${ side }` }
-						/>
-					);
-				} ) }
-			</Layout>
-		</LayoutContainer>
-	);
-}
diff --git a/packages/components/src/box-control/input-controls.tsx b/packages/components/src/box-control/input-controls.tsx
new file mode 100644
index 00000000000000..8f4518d717dbed
--- /dev/null
+++ b/packages/components/src/box-control/input-controls.tsx
@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import Tooltip from '../tooltip';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import type { BoxControlInputControlProps, BoxControlValue } from './types';
+
+const noop = () => {};
+
+export default function BoxInputControls( {
+	__next40pxDefaultSize,
+	onChange = noop,
+	onFocus = noop,
+	values,
+	selectedUnits,
+	setSelectedUnits,
+	sides,
+	...props
+}: BoxControlInputControlProps ) {
+	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
+
+	const createHandleOnFocus =
+		( side: keyof BoxControlValue ) =>
+		( event: React.FocusEvent< HTMLInputElement > ) => {
+			onFocus( event, { side } );
+		};
+
+	const handleOnChange = ( nextValues: BoxControlValue ) => {
+		onChange( nextValues );
+	};
+
+	const handleOnValueChange = (
+		side: keyof BoxControlValue,
+		next?: string,
+		extra?: { event: React.SyntheticEvent< Element, Event > }
+	) => {
+		const nextValues = { ...values };
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+
+		nextValues[ side ] = nextValue;
+
+		/**
+		 * Supports changing pair sides. For example, holding the ALT key
+		 * when changing the TOP will also update BOTTOM.
+		 */
+		// @ts-expect-error - TODO: event.altKey is only present when the change event was
+		// triggered by a keyboard event. Should this feature be implemented differently so
+		// it also works with drag events?
+		if ( extra?.event.altKey ) {
+			switch ( side ) {
+				case 'top':
+					nextValues.bottom = nextValue;
+					break;
+				case 'bottom':
+					nextValues.top = nextValue;
+					break;
+				case 'left':
+					nextValues.right = nextValue;
+					break;
+				case 'right':
+					nextValues.left = nextValue;
+					break;
+			}
+		}
+
+		handleOnChange( nextValues );
+	};
+
+	const createHandleOnUnitChange =
+		( side: keyof BoxControlValue ) => ( next?: string ) => {
+			const newUnits = { ...selectedUnits };
+			newUnits[ side ] = next;
+			setSelectedUnits( newUnits );
+		};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
+		: ALL_SIDES;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue( values[ side ] );
+
+				const computedUnit = values[ side ]
+					? parsedUnit
+					: selectedUnits[ side ];
+
+				const inputId = [ generatedId, side ].join( '-' );
+
+				return (
+					<InputWrapper key={ `box-control-${ side }` } expanded>
+						<FlexedBoxControlIcon side={ side } sides={ sides } />
+						<Tooltip placement="top-end" text={ LABELS[ side ] }>
+							<StyledUnitControl
+								{ ...props }
+								__shouldNotWarnDeprecated36pxSize
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								className="component-box-control__unit-control"
+								id={ inputId }
+								isPressEnterToChange
+								value={ [ parsedQuantity, computedUnit ].join(
+									''
+								) }
+								onChange={ ( nextValue, extra ) =>
+									handleOnValueChange(
+										side,
+										nextValue,
+										extra
+									)
+								}
+								onUnitChange={ createHandleOnUnitChange(
+									side
+								) }
+								onFocus={ createHandleOnFocus( side ) }
+								label={ LABELS[ side ] }
+								hideLabelFromVision
+							/>
+						</Tooltip>
+
+						<FlexedRangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							__shouldNotWarnDeprecated36pxSize
+							aria-controls={ inputId }
+							label={ LABELS[ side ] }
+							hideLabelFromVision
+							onChange={ ( newValue ) => {
+								handleOnValueChange(
+									side,
+									newValue !== undefined
+										? [ newValue, computedUnit ].join( '' )
+										: undefined
+								);
+							} }
+							min={ 0 }
+							max={
+								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+									?.max ?? 10
+							}
+							step={
+								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+									?.step ?? 0.1
+							}
+							value={ parsedQuantity ?? 0 }
+							withInputField={ false }
+						/>
+					</InputWrapper>
+				);
+			} ) }
+		</>
+	);
+}
diff --git a/packages/components/src/box-control/linked-button.js b/packages/components/src/box-control/linked-button.js
deleted file mode 100644
index 39de0e894783f2..00000000000000
--- a/packages/components/src/box-control/linked-button.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { link, linkOff } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Tooltip from '../tooltip';
-
-export default function LinkedButton( { isLinked, ...props } ) {
-	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
-
-	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
-	return (
-		<Tooltip text={ label }>
-			<span>
-				<Button
-					{ ...props }
-					className="component-box-control__linked-button"
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-				/>
-			</span>
-		</Tooltip>
-	);
-}
diff --git a/packages/components/src/box-control/linked-button.tsx b/packages/components/src/box-control/linked-button.tsx
new file mode 100644
index 00000000000000..595a3c03436756
--- /dev/null
+++ b/packages/components/src/box-control/linked-button.tsx
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Tooltip from '../tooltip';
+
+export default function LinkedButton( {
+	isLinked,
+	...props
+}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
+
+	return (
+		<Tooltip text={ label }>
+			<Button
+				{ ...props }
+				className="component-box-control__linked-button"
+				size="small"
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
+		</Tooltip>
+	);
+}
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
deleted file mode 100644
index 55cf2628c670c7..00000000000000
--- a/packages/components/src/box-control/stories/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BoxControl from '../';
-
-export default {
-	title: 'Components (Experimental)/BoxControl',
-	component: BoxControl,
-};
-
-export const _default = () => {
-	return <BoxControl />;
-};
-
-const defaultSideValues = {
-	top: '10px',
-	right: '10px',
-	bottom: '10px',
-	left: '10px',
-};
-
-function DemoExample( {
-	sides,
-	defaultValues = defaultSideValues,
-	splitOnAxis = false,
-} ) {
-	const [ values, setValues ] = useState( defaultValues );
-
-	return (
-		<BoxControl
-			label="Padding"
-			values={ values }
-			sides={ sides }
-			onChange={ setValues }
-			splitOnAxis={ splitOnAxis }
-		/>
-	);
-}
-
-export const arbitrarySides = () => {
-	return (
-		<DemoExample
-			sides={ [ 'top', 'bottom' ] }
-			defaultValues={ { top: '10px', bottom: '10px' } }
-		/>
-	);
-};
-
-export const singleSide = () => {
-	return (
-		<DemoExample
-			sides={ [ 'bottom' ] }
-			defaultValues={ { bottom: '10px' } }
-		/>
-	);
-};
-
-export const axialControls = () => {
-	return <DemoExample splitOnAxis={ true } />;
-};
-
-export const axialControlsWithSingleSide = () => {
-	return (
-		<DemoExample
-			sides={ [ 'horizontal' ] }
-			defaultValues={ { left: '10px', right: '10px' } }
-			splitOnAxis={ true }
-		/>
-	);
-};
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..0d8b96de063168
--- /dev/null
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BoxControl from '../';
+
+const meta: Meta< typeof BoxControl > = {
+	title: 'Components/BoxControl',
+	component: BoxControl,
+	argTypes: {
+		values: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
+	return <BoxControl { ...props } />;
+};
+
+const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
+	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();
+
+	return (
+		<BoxControl
+			values={ values }
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValues( nextValue );
+				props.onChange?.( nextValue );
+			} }
+		/>
+	);
+};
+
+export const Default = TemplateUncontrolled.bind( {} );
+Default.args = {
+	label: 'Label',
+	__next40pxDefaultSize: true,
+};
+
+export const Controlled = TemplateControlled.bind( {} );
+Controlled.args = {
+	...Default.args,
+};
+
+export const ArbitrarySides = TemplateControlled.bind( {} );
+ArbitrarySides.args = {
+	...Default.args,
+	sides: [ 'top', 'bottom' ],
+};
+
+export const SingleSide = TemplateControlled.bind( {} );
+SingleSide.args = {
+	...Default.args,
+	sides: [ 'bottom' ],
+};
+
+export const AxialControls = TemplateControlled.bind( {} );
+AxialControls.args = {
+	...Default.args,
+	splitOnAxis: true,
+};
+
+export const AxialControlsWithSingleSide = TemplateControlled.bind( {} );
+AxialControlsWithSingleSide.args = {
+	...Default.args,
+	sides: [ 'horizontal' ],
+	splitOnAxis: true,
+};
diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.js b/packages/components/src/box-control/styles/box-control-icon-styles.js
deleted file mode 100644
index e3222968f0ed70..00000000000000
--- a/packages/components/src/box-control/styles/box-control-icon-styles.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-export const Root = styled.span`
-	box-sizing: border-box;
-	display: block;
-	width: 24px;
-	height: 24px;
-	position: relative;
-	padding: 4px;
-`;
-
-export const Viewbox = styled.span`
-	box-sizing: border-box;
-	display: block;
-	position: relative;
-	width: 100%;
-	height: 100%;
-`;
-
-const strokeFocus = ( { isFocused } ) => {
-	return css( {
-		backgroundColor: 'currentColor',
-		opacity: isFocused ? 1 : 0.3,
-	} );
-};
-
-const Stroke = styled.span`
-	box-sizing: border-box;
-	display: block;
-	pointer-events: none;
-	position: absolute;
-	${ strokeFocus };
-`;
-
-const VerticalStroke = styled( Stroke )`
-	bottom: 3px;
-	top: 3px;
-	width: 2px;
-`;
-
-const HorizontalStroke = styled( Stroke )`
-	height: 2px;
-	left: 3px;
-	right: 3px;
-`;
-
-export const TopStroke = styled( HorizontalStroke )`
-	top: 0;
-`;
-
-export const RightStroke = styled( VerticalStroke )`
-	right: 0;
-`;
-
-export const BottomStroke = styled( HorizontalStroke )`
-	bottom: 0;
-`;
-
-export const LeftStroke = styled( VerticalStroke )`
-	left: 0;
-`;
diff --git a/packages/components/src/box-control/styles/box-control-icon-styles.ts b/packages/components/src/box-control/styles/box-control-icon-styles.ts
new file mode 100644
index 00000000000000..2ce7a540d5c363
--- /dev/null
+++ b/packages/components/src/box-control/styles/box-control-icon-styles.ts
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Root = styled.span`
+	box-sizing: border-box;
+	display: block;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	padding: 4px;
+`;
+
+export const Viewbox = styled.span`
+	box-sizing: border-box;
+	display: block;
+	position: relative;
+	width: 100%;
+	height: 100%;
+`;
+
+const strokeFocus = ( { isFocused }: { isFocused: boolean } ) => {
+	return css( {
+		backgroundColor: 'currentColor',
+		opacity: isFocused ? 1 : 0.3,
+	} );
+};
+
+const Stroke = styled.span`
+	box-sizing: border-box;
+	display: block;
+	pointer-events: none;
+	position: absolute;
+	${ strokeFocus };
+`;
+
+const VerticalStroke = styled( Stroke )`
+	bottom: 3px;
+	top: 3px;
+	width: 2px;
+`;
+
+const HorizontalStroke = styled( Stroke )`
+	height: 2px;
+	left: 3px;
+	right: 3px;
+`;
+
+export const TopStroke = styled( HorizontalStroke )`
+	top: 0;
+`;
+
+export const RightStroke = styled( VerticalStroke )`
+	right: 0;
+`;
+
+export const BottomStroke = styled( HorizontalStroke )`
+	bottom: 0;
+`;
+
+export const LeftStroke = styled( VerticalStroke )`
+	left: 0;
+`;
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
deleted file mode 100644
index 1aa2c995a8235d..00000000000000
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-/**
- * Internal dependencies
- */
-import { Flex } from '../../flex';
-import BaseUnitControl from '../../unit-control';
-import { rtl } from '../../utils';
-
-export const Root = styled.div`
-	box-sizing: border-box;
-	max-width: 235px;
-	padding-bottom: 12px;
-	width: 100%;
-`;
-
-export const Header = styled( Flex )`
-	margin-bottom: 8px;
-`;
-
-export const HeaderControlWrapper = styled( Flex )`
-	min-height: 30px;
-	gap: 0;
-`;
-
-export const UnitControlWrapper = styled.div`
-	box-sizing: border-box;
-	max-width: 80px;
-`;
-
-export const LayoutContainer = styled( Flex )`
-	justify-content: center;
-	padding-top: 8px;
-`;
-
-export const Layout = styled( Flex )`
-	position: relative;
-	height: 100%;
-	width: 100%;
-	justify-content: flex-start;
-`;
-
-const unitControlBorderRadiusStyles = ( { isFirst, isLast, isOnly } ) => {
-	if ( isFirst ) {
-		return rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();
-	}
-	if ( isLast ) {
-		return rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();
-	}
-	if ( isOnly ) {
-		return css( { borderRadius: 2 } );
-	}
-
-	return css( {
-		borderRadius: 0,
-	} );
-};
-
-const unitControlMarginStyles = ( { isFirst, isOnly } ) => {
-	const marginLeft = isFirst || isOnly ? 0 : -1;
-
-	return rtl( { marginLeft } )();
-};
-
-export const UnitControl = styled( BaseUnitControl )`
-	max-width: 60px;
-	${ unitControlBorderRadiusStyles };
-	${ unitControlMarginStyles };
-`;
diff --git a/packages/components/src/box-control/styles/box-control-styles.ts b/packages/components/src/box-control/styles/box-control-styles.ts
new file mode 100644
index 00000000000000..ce2c8aa227e586
--- /dev/null
+++ b/packages/components/src/box-control/styles/box-control-styles.ts
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import BoxControlIcon from '../icon';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import RangeControl from '../../range-control';
+import UnitControl from '../../unit-control';
+import { space } from '../../utils/space';
+
+export const StyledUnitControl = styled( UnitControl )`
+	max-width: 90px;
+`;
+
+export const InputWrapper = styled( HStack )`
+	grid-column: 1 / span 3;
+`;
+
+export const ResetButton = styled( Button )`
+	grid-area: 1 / 2;
+	justify-self: end;
+`;
+
+export const LinkedButtonWrapper = styled.div`
+	grid-area: 1 / 3;
+	justify-self: end;
+`;
+
+export const FlexedBoxControlIcon = styled( BoxControlIcon )`
+	flex: 0 0 auto;
+`;
+
+export const FlexedRangeControl = styled( RangeControl )`
+	width: 100%;
+	margin-inline-end: ${ space( 2 ) };
+`;
diff --git a/packages/components/src/box-control/styles/box-control-visualizer-styles.js b/packages/components/src/box-control/styles/box-control-visualizer-styles.js
deleted file mode 100644
index 2a5c4fc8ec4702..00000000000000
--- a/packages/components/src/box-control/styles/box-control-visualizer-styles.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { COLORS, rtl } from '../../utils';
-
-const containerPositionStyles = ( { isPositionAbsolute } ) => {
-	if ( ! isPositionAbsolute ) return '';
-
-	return css`
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-		z-index: 1;
-	`;
-};
-
-export const Container = styled.div`
-	box-sizing: border-box;
-	position: relative;
-	${ containerPositionStyles };
-`;
-
-export const Side = styled.div`
-	box-sizing: border-box;
-	background: ${ COLORS.ui.theme };
-	filter: brightness( 1 );
-	opacity: 0;
-	position: absolute;
-	pointer-events: none;
-	transition: opacity 120ms linear;
-	z-index: 1;
-
-	${ ( { isActive } ) =>
-		isActive &&
-		`
-		opacity: 0.3;
-	` }
-`;
-
-export const TopView = styled( Side )`
-	top: 0;
-	left: 0;
-	right: 0;
-`;
-
-export const RightView = styled( Side )`
-	top: 0;
-	bottom: 0;
-	${ rtl( { right: 0 } ) };
-`;
-
-export const BottomView = styled( Side )`
-	bottom: 0;
-	left: 0;
-	right: 0;
-`;
-
-export const LeftView = styled( Side )`
-	top: 0;
-	bottom: 0;
-	${ rtl( { left: 0 } ) };
-`;
diff --git a/packages/components/src/box-control/test/index.js b/packages/components/src/box-control/test/index.js
deleted file mode 100644
index d52b50924f46b3..00000000000000
--- a/packages/components/src/box-control/test/index.js
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BoxControl from '../';
-
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
-const getInput = () =>
-	screen.getByLabelText( 'Box Control', { selector: 'input' } );
-const getSelect = () => screen.getByLabelText( 'Select unit' );
-const getReset = () => screen.getByText( /Reset/ );
-
-describe( 'BoxControl', () => {
-	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			const { container } = render( <BoxControl /> );
-			const input = container.querySelector( 'input' );
-
-			expect( input ).toBeTruthy();
-		} );
-
-		it( 'should update values when interacting with input', async () => {
-			const user = setupUser();
-			render( <BoxControl /> );
-			const input = getInput();
-			const select = getSelect();
-
-			await user.type( input, '100%' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( '%' );
-		} );
-	} );
-
-	describe( 'Reset', () => {
-		it( 'should reset values when clicking Reset', async () => {
-			const user = setupUser();
-			render( <BoxControl /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
-
-			await user.type( input, '100px' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			await user.click( reset );
-
-			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
-		} );
-
-		it( 'should reset values when clicking Reset, if controlled', async () => {
-			const Example = () => {
-				const [ state, setState ] = useState();
-
-				return (
-					<BoxControl
-						values={ state }
-						onChange={ ( next ) => setState( next ) }
-					/>
-				);
-			};
-			const user = setupUser();
-			render( <Example /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
-
-			await user.type( input, '100px' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			await user.click( reset );
-
-			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
-		} );
-
-		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
-			const Example = () => {
-				const [ state, setState ] = useState();
-
-				return (
-					<BoxControl
-						values={ state }
-						onChange={ ( next ) => {
-							if ( next.top ) {
-								setState( next );
-							} else {
-								// This reverts it to being uncontrolled.
-								setState( undefined );
-							}
-						} }
-					/>
-				);
-			};
-			const user = setupUser();
-			render( <Example /> );
-			const input = getInput();
-			const select = getSelect();
-			const reset = getReset();
-
-			await user.type( input, '100px' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			await user.click( reset );
-
-			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
-		} );
-
-		it( 'should persist cleared value when focus changes', async () => {
-			const user = setupUser();
-			const spyChange = jest.fn();
-			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
-			const input = screen.getByLabelText( 'Box Control', {
-				selector: 'input',
-			} );
-			const unitSelect = screen.getByLabelText( 'Select unit' );
-
-			await user.type( input, '100%' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( unitSelect ).toHaveValue( '%' );
-
-			await user.clear( input );
-			expect( input ).toHaveValue( '' );
-			// Clicking document.body to trigger a blur event on the input.
-			await user.click( document.body );
-
-			expect( input ).toHaveValue( '' );
-			expect( spyChange ).toHaveBeenLastCalledWith( {
-				top: undefined,
-				right: undefined,
-				bottom: undefined,
-				left: undefined,
-			} );
-		} );
-	} );
-
-	describe( 'Unlinked sides', () => {
-		it( 'should update a single side value when unlinked', async () => {
-			let state = {};
-			const setState = ( newState ) => ( state = newState );
-
-			render(
-				<BoxControl
-					values={ state }
-					onChange={ ( next ) => setState( next ) }
-				/>
-			);
-			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink sides/ );
-
-			await user.click( unlink );
-
-			const input = screen.getByLabelText( /Top/ );
-			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
-
-			await user.type( input, '100px' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			expect( state ).toEqual( {
-				top: '100px',
-				right: undefined,
-				bottom: undefined,
-				left: undefined,
-			} );
-		} );
-
-		it( 'should update a whole axis when value is changed when unlinked', async () => {
-			let state = {};
-			const setState = ( newState ) => ( state = newState );
-
-			render(
-				<BoxControl
-					values={ state }
-					onChange={ ( next ) => setState( next ) }
-					splitOnAxis={ true }
-				/>
-			);
-			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink sides/ );
-
-			await user.click( unlink );
-
-			const input = screen.getByLabelText( /Vertical/ );
-			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
-
-			await user.type( input, '100px' );
-			await user.keyboard( '{Enter}' );
-
-			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
-
-			expect( state ).toEqual( {
-				top: '100px',
-				right: undefined,
-				bottom: '100px',
-				left: undefined,
-			} );
-		} );
-	} );
-
-	describe( 'Unit selections', () => {
-		it( 'should update unlinked controls unit selection based on all input control', async () => {
-			// Render control.
-			render( <BoxControl /> );
-			const user = setupUser();
-
-			// Make unit selection on all input control.
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, [ 'em' ] );
-
-			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink sides/ ) );
-
-			// Confirm that each individual control has the selected unit
-			const unlinkedSelects = screen.getAllByDisplayValue( 'em' );
-			expect( unlinkedSelects.length ).toEqual( 4 );
-		} );
-
-		it( 'should use individual side attribute unit when available', async () => {
-			// Render control.
-			const { rerender } = render( <BoxControl /> );
-			const user = setupUser();
-
-			// Make unit selection on all input control.
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, [ 'vw' ] );
-
-			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink sides/ ) );
-
-			// Confirm that each individual control has the selected unit
-			const unlinkedSelects = screen.getAllByDisplayValue( 'vw' );
-			expect( unlinkedSelects.length ).toEqual( 4 );
-
-			// Rerender with individual side value & confirm unit is selected.
-			rerender( <BoxControl values={ { top: '2.5em' } } /> );
-
-			const topSelect = screen.getByDisplayValue( 'em' );
-			const otherSelects = screen.getAllByDisplayValue( 'vw' );
-
-			expect( topSelect ).toBeInTheDocument();
-			expect( otherSelects.length ).toEqual( 3 );
-		} );
-	} );
-
-	describe( 'onChange updates', () => {
-		it( 'should call onChange when values contain more than just CSS units', async () => {
-			const setState = jest.fn();
-
-			render( <BoxControl onChange={ setState } /> );
-			const user = setupUser();
-			const input = getInput();
-
-			await user.type( input, '7.5rem' );
-			await user.keyboard( '{Enter}' );
-
-			expect( setState ).toHaveBeenCalledWith( {
-				top: '7.5rem',
-				right: '7.5rem',
-				bottom: '7.5rem',
-				left: '7.5rem',
-			} );
-		} );
-
-		it( 'should not pass invalid CSS unit only values to onChange', async () => {
-			const setState = jest.fn();
-
-			render( <BoxControl onChange={ setState } /> );
-			const user = setupUser();
-
-			const allUnitSelect = getSelect();
-			await user.selectOptions( allUnitSelect, 'rem' );
-
-			expect( setState ).toHaveBeenCalledWith( {
-				top: undefined,
-				right: undefined,
-				bottom: undefined,
-				left: undefined,
-			} );
-		} );
-	} );
-} );
diff --git a/packages/components/src/box-control/test/index.tsx b/packages/components/src/box-control/test/index.tsx
new file mode 100644
index 00000000000000..185a18b258951f
--- /dev/null
+++ b/packages/components/src/box-control/test/index.tsx
@@ -0,0 +1,470 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BoxControl from '..';
+import type { BoxControlProps, BoxControlValue } from '../types';
+
+const ControlledBoxControl = (
+	extraProps: Omit< BoxControlProps, 'onChange' >
+) => {
+	const [ state, setState ] = useState< BoxControlValue >();
+
+	return (
+		<BoxControl
+			__next40pxDefaultSize
+			values={ state }
+			onChange={ ( next ) => setState( next ) }
+			{ ...extraProps }
+		/>
+	);
+};
+
+const UncontrolledBoxControl = ( {
+	onChange = () => {},
+	...props
+}: Omit< BoxControlProps, 'onChange' > & {
+	onChange?: BoxControlProps[ 'onChange' ];
+} ) => <BoxControl __next40pxDefaultSize onChange={ onChange } { ...props } />;
+
+describe( 'BoxControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render a box control input', () => {
+			render( <UncontrolledBoxControl /> );
+
+			expect(
+				screen.getByRole( 'group', { name: 'Box Control' } )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toBeVisible();
+		} );
+
+		it( 'should update values when interacting with input', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			await user.type( input, '100' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '100' );
+		} );
+
+		it( 'should update input values when interacting with slider', () => {
+			render( <UncontrolledBoxControl /> );
+
+			const slider = screen.getByRole( 'slider' );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should update slider values when interacting with input', async () => {
+			const user = userEvent.setup();
+			render( <UncontrolledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '50' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '50' );
+			expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' );
+		} );
+
+		it( 'should render the number input with a default min value of 0', () => {
+			render( <UncontrolledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '0' );
+		} );
+
+		it( 'should pass down `inputProps` to the underlying number input', () => {
+			render(
+				<UncontrolledBoxControl inputProps={ { min: 10, max: 50 } } />
+			);
+
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
+
+			expect( input ).toHaveAttribute( 'min', '10' );
+			expect( input ).toHaveAttribute( 'max', '50' );
+		} );
+	} );
+
+	describe( 'Reset', () => {
+		it( 'should reset values when clicking Reset', async () => {
+			const user = userEvent.setup();
+
+			render( <UncontrolledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '100' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '100' );
+
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( input ).toHaveValue( '' );
+		} );
+
+		it( 'should reset values when clicking Reset, if controlled', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '100' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '100' );
+
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( input ).toHaveValue( '' );
+		} );
+
+		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '100' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '100' );
+
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( input ).toHaveValue( '' );
+		} );
+
+		it( 'should persist cleared value when focus changes', async () => {
+			const user = userEvent.setup();
+			const spyChange = jest.fn();
+
+			render(
+				<UncontrolledBoxControl onChange={ ( v ) => spyChange( v ) } />
+			);
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '100' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '100' );
+
+			await user.clear( input );
+			expect( input ).toHaveValue( '' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( input ).toHaveValue( '' );
+			expect( spyChange ).toHaveBeenLastCalledWith( {
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			} );
+		} );
+	} );
+
+	describe( 'Unlinked sides', () => {
+		it( 'should update a single side value when unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			await user.type(
+				screen.getByRole( 'textbox', { name: 'Top side' } ),
+				'100'
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top side' } )
+			).toHaveValue( '100' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left side' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a single side value when using slider unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', { name: 'Right side' } );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left side' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a whole axis when value is changed when unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl splitOnAxis /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Top and bottom sides',
+				} ),
+				'100'
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
+			).toHaveValue( '100' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a whole axis using a slider when value is changed when unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl splitOnAxis /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', {
+				name: 'Left and right sides',
+			} );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should show "Mixed" label when sides have different values but are linked', async () => {
+			const user = userEvent.setup();
+
+			render( <ControlledBoxControl /> );
+
+			const unlinkButton = screen.getByRole( 'button', {
+				name: 'Unlink sides',
+			} );
+
+			await user.click( unlinkButton );
+
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Right side',
+				} ),
+				'13'
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '13' );
+
+			await user.click( unlinkButton );
+
+			expect( screen.getByPlaceholderText( 'Mixed' ) ).toHaveValue( '' );
+		} );
+	} );
+
+	describe( 'Unit selections', () => {
+		it( 'should update unlinked controls unit selection based on all input control', async () => {
+			const user = userEvent.setup();
+
+			// Render control.
+			render( <UncontrolledBoxControl /> );
+
+			// Make unit selection on all input control.
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				[ 'em' ]
+			);
+
+			// Unlink the controls.
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const controls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Confirm we have exactly 4 controls.
+			expect( controls ).toHaveLength( 4 );
+
+			// Confirm that each individual control has the selected unit
+			controls.forEach( ( control ) => {
+				expect( control ).toHaveValue( 'em' );
+			} );
+		} );
+
+		it( 'should use individual side attribute unit when available', async () => {
+			const user = userEvent.setup();
+
+			// Render control.
+			const { rerender } = render( <UncontrolledBoxControl /> );
+
+			// Make unit selection on all input control.
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				[ 'vw' ]
+			);
+
+			// Unlink the controls.
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const controls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Confirm we have exactly 4 controls.
+			expect( controls ).toHaveLength( 4 );
+
+			// Confirm that each individual control has the selected unit
+			controls.forEach( ( control ) => {
+				expect( control ).toHaveValue( 'vw' );
+			} );
+
+			// Rerender with individual side value & confirm unit is selected.
+			rerender( <UncontrolledBoxControl values={ { top: '2.5em' } } /> );
+
+			const rerenderedControls = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Confirm we have exactly 4 controls.
+			expect( rerenderedControls ).toHaveLength( 4 );
+
+			// Confirm that each individual control has the right selected unit
+			rerenderedControls.forEach( ( control, index ) => {
+				const expected = index === 0 ? 'em' : 'vw';
+				expect( control ).toHaveValue( expected );
+			} );
+		} );
+	} );
+
+	describe( 'onChange updates', () => {
+		it( 'should call onChange when values contain more than just CSS units', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+
+			render( <UncontrolledBoxControl onChange={ onChangeSpy } /> );
+
+			const valueInput = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+
+			// Typing the first letter of a unit blurs the input and focuses the combobox.
+			await user.type( valueInput, '7r' );
+
+			expect( unitSelect ).toHaveFocus();
+
+			// The correct expected behavior would be for the values to have "rem"
+			// as their unit, but the test environment doesn't seem to change
+			// values on `select` elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( {
+				top: '7px',
+				right: '7px',
+				bottom: '7px',
+				left: '7px',
+			} );
+		} );
+
+		it( 'should not pass invalid CSS unit only values to onChange', async () => {
+			const user = userEvent.setup();
+			const setState = jest.fn();
+
+			render( <UncontrolledBoxControl onChange={ setState } /> );
+
+			await user.selectOptions(
+				screen.getByRole( 'combobox', {
+					name: 'Select unit',
+				} ),
+				'rem'
+			);
+
+			expect( setState ).toHaveBeenCalledWith( {
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
new file mode 100644
index 00000000000000..16b69dfe70a64a
--- /dev/null
+++ b/packages/components/src/box-control/types.ts
@@ -0,0 +1,127 @@
+/**
+ * Internal dependencies
+ */
+import type { UnitControlProps } from '../unit-control/types';
+import type { LABELS } from './utils';
+
+export type BoxControlValue = {
+	top?: string;
+	right?: string;
+	bottom?: string;
+	left?: string;
+};
+
+export type CustomValueUnits = {
+	[ key: string ]: { max: number; step: number };
+};
+
+type UnitControlPassthroughProps = Omit<
+	UnitControlProps,
+	'label' | 'onChange' | 'onFocus' | 'units'
+>;
+
+type DeprecatedBoxControlProps = {
+	/**
+	 * @deprecated Pass to the `inputProps` prop instead.
+	 * @ignore
+	 */
+	onMouseOver?: UnitControlProps[ 'onMouseOver' ];
+	/**
+	 * @deprecated Pass to the `inputProps` prop instead.
+	 * @ignore
+	 */
+	onMouseOut?: UnitControlProps[ 'onMouseOut' ];
+};
+
+export type BoxControlProps = Pick< UnitControlProps, 'units' > &
+	DeprecatedBoxControlProps & {
+		/**
+		 * If this property is true, a button to reset the box control is rendered.
+		 *
+		 * @default true
+		 */
+		allowReset?: boolean;
+		/**
+		 * The id to use as a base for the unique HTML id attribute of the control.
+		 */
+		id?: string;
+		/**
+		 * Props for the internal `UnitControl` components.
+		 *
+		 * @default { min: 0 }
+		 */
+		inputProps?: UnitControlPassthroughProps;
+		/**
+		 * Heading label for the control.
+		 *
+		 * @default __( 'Box Control' )
+		 */
+		label?: string;
+		/**
+		 * A callback function when an input value changes.
+		 */
+		onChange: ( next: BoxControlValue ) => void;
+		/**
+		 * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
+		 *
+		 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
+		 */
+		resetValues?: BoxControlValue;
+		/**
+		 * Collection of sides to allow control of. If omitted or empty, all sides will be available.
+		 *
+		 * Allowed values are "top", "right", "bottom", "left", "vertical", and "horizontal".
+		 */
+		sides?: readonly (
+			| keyof BoxControlValue
+			| 'horizontal'
+			| 'vertical'
+		)[];
+		/**
+		 * If this property is true, when the box control is unlinked, vertical and horizontal controls
+		 * can be used instead of updating individual sides.
+		 *
+		 * @default false
+		 */
+		splitOnAxis?: boolean;
+		/**
+		 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
+		 */
+		values?: BoxControlValue;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
+	};
+
+export type BoxControlInputControlProps = UnitControlPassthroughProps & {
+	onChange?: ( nextValues: BoxControlValue ) => void;
+	onFocus?: (
+		_event: React.FocusEvent< HTMLInputElement >,
+		{ side }: { side: keyof typeof LABELS }
+	) => void;
+	onHoverOff?: (
+		sides: Partial< Record< keyof BoxControlValue, boolean > >
+	) => void;
+	onHoverOn?: (
+		sides: Partial< Record< keyof BoxControlValue, boolean > >
+	) => void;
+	selectedUnits: BoxControlValue;
+	setSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;
+	sides: BoxControlProps[ 'sides' ];
+	values: BoxControlValue;
+};
+
+export type BoxControlIconProps = {
+	/**
+	 * @default 24
+	 */
+	size?: number;
+	/**
+	 * @default 'all'
+	 */
+	side?: keyof typeof LABELS;
+	sides?: BoxControlProps[ 'sides' ];
+};
diff --git a/packages/components/src/box-control/unit-control.js b/packages/components/src/box-control/unit-control.js
deleted file mode 100644
index 1355b39fb6de13..00000000000000
--- a/packages/components/src/box-control/unit-control.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { useHover } from '@use-gesture/react';
-
-/**
- * Internal dependencies
- */
-import BaseTooltip from '../tooltip';
-import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
-
-const noop = () => {};
-
-export default function BoxUnitControl( {
-	isFirst,
-	isLast,
-	isOnly,
-	onHoverOn = noop,
-	onHoverOff = noop,
-	label,
-	value,
-	...props
-} ) {
-	const bindHoverGesture = useHover( ( { event, ...state } ) => {
-		if ( state.hovering ) {
-			onHoverOn( event, state );
-		} else {
-			onHoverOff( event, state );
-		}
-	} );
-
-	return (
-		<UnitControlWrapper { ...bindHoverGesture() }>
-			<Tooltip text={ label }>
-				<UnitControl
-					aria-label={ label }
-					className="component-box-control__unit-control"
-					isFirst={ isFirst }
-					isLast={ isLast }
-					isOnly={ isOnly }
-					isPressEnterToChange
-					isResetValueOnUnitChange={ false }
-					value={ value }
-					{ ...props }
-				/>
-			</Tooltip>
-		</UnitControlWrapper>
-	);
-}
-
-function Tooltip( { children, text } ) {
-	if ( ! text ) return children;
-
-	/**
-	 * Wrapping the children in a `<div />` as Tooltip as it attempts
-	 * to render the <UnitControl />. Using a plain `<div />` appears to
-	 * resolve this issue.
-	 *
-	 * Originally discovered and referenced here:
-	 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
-	 */
-	return (
-		<BaseTooltip text={ text } position="top">
-			<div>{ children }</div>
-		</BaseTooltip>
-	);
-}
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
deleted file mode 100644
index 1053e8ff81998a..00000000000000
--- a/packages/components/src/box-control/utils.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-
-export const LABELS = {
-	all: __( 'All' ),
-	top: __( 'Top' ),
-	bottom: __( 'Bottom' ),
-	left: __( 'Left' ),
-	right: __( 'Right' ),
-	mixed: __( 'Mixed' ),
-	vertical: __( 'Vertical' ),
-	horizontal: __( 'Horizontal' ),
-};
-
-export const DEFAULT_VALUES = {
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-
-export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
-
-/**
- * Gets an items with the most occurrence within an array
- * https://stackoverflow.com/a/20762713
- *
- * @param {Array<any>} arr Array of items to check.
- * @return {any} The item with the most occurrences.
- */
-function mode( arr ) {
-	return arr
-		.sort(
-			( a, b ) =>
-				arr.filter( ( v ) => v === a ).length -
-				arr.filter( ( v ) => v === b ).length
-		)
-		.pop();
-}
-
-/**
- * Gets the 'all' input value and unit from values data.
- *
- * @param {Object} values         Box values.
- * @param {Object} selectedUnits  Box units.
- * @param {Array}  availableSides Available box sides to evaluate.
- *
- * @return {string} A value + unit for the 'all' input.
- */
-export function getAllValue(
-	values = {},
-	selectedUnits,
-	availableSides = ALL_SIDES
-) {
-	const sides = normalizeSides( availableSides );
-	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
-		parseQuantityAndUnitFromRawValue( values[ side ] )
-	);
-	const allParsedQuantities = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 0 ] ?? ''
-	);
-	const allParsedUnits = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 1 ]
-	);
-
-	const commonQuantity = allParsedQuantities.every(
-		( v ) => v === allParsedQuantities[ 0 ]
-	)
-		? allParsedQuantities[ 0 ]
-		: '';
-
-	/**
-	 * The typeof === 'number' check is important. On reset actions, the incoming value
-	 * may be null or an empty string.
-	 *
-	 * Also, the value may also be zero (0), which is considered a valid unit value.
-	 *
-	 * typeof === 'number' is more specific for these cases, rather than relying on a
-	 * simple truthy check.
-	 */
-	let commonUnit;
-	if ( typeof commonQuantity === 'number' ) {
-		commonUnit = mode( allParsedUnits );
-	} else {
-		// Set meaningful unit selection if no commonQuantity and user has previously
-		// selected units without assigning values while controls were unlinked.
-		commonUnit =
-			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
-	}
-
-	return [ commonQuantity, commonUnit ].join( '' );
-}
-
-/**
- * Determine the most common unit selection to use as a fallback option.
- *
- * @param {Object} selectedUnits Current unit selections for individual sides.
- * @return {string} Most common unit selection.
- */
-export function getAllUnitFallback( selectedUnits ) {
-	if ( ! selectedUnits || typeof selectedUnits !== 'object' ) {
-		return undefined;
-	}
-
-	const filteredUnits = Object.values( selectedUnits ).filter( Boolean );
-
-	return mode( filteredUnits );
-}
-
-/**
- * Checks to determine if values are mixed.
- *
- * @param {Object} values        Box values.
- * @param {Object} selectedUnits Box units.
- * @param {Array}  sides         Available box sides to evaluate.
- *
- * @return {boolean} Whether values are mixed.
- */
-export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const isMixed = isNaN( parseFloat( allValue ) );
-
-	return isMixed;
-}
-
-/**
- * Checks to determine if values are defined.
- *
- * @param {Object} values Box values.
- *
- * @return {boolean} Whether values are mixed.
- */
-export function isValuesDefined( values ) {
-	return (
-		values !== undefined &&
-		Object.values( values ).filter(
-			// Switching units when input is empty causes values only
-			// containing units. This gives false positive on mixed values
-			// unless filtered.
-			( value ) => !! value && /\d/.test( value )
-		).length > 0
-	);
-}
-
-/**
- * Get initial selected side, factoring in whether the sides are linked,
- * and whether the vertical / horizontal directions are grouped via splitOnAxis.
- *
- * @param {boolean} isLinked    Whether the box control's fields are linked.
- * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.
- * @return {string} The initial side.
- */
-export function getInitialSide( isLinked, splitOnAxis ) {
-	let initialSide = 'all';
-
-	if ( ! isLinked ) {
-		initialSide = splitOnAxis ? 'vertical' : 'top';
-	}
-
-	return initialSide;
-}
-
-/**
- * Normalizes provided sides configuration to an array containing only top,
- * right, bottom and left. This essentially just maps `horizontal` or `vertical`
- * to their appropriate sides to facilitate correctly determining value for
- * all input control.
- *
- * @param {Array} sides Available sides for box control.
- * @return {Array} Normalized sides configuration.
- */
-export function normalizeSides( sides ) {
-	const filteredSides = [];
-
-	if ( ! sides?.length ) {
-		return ALL_SIDES;
-	}
-
-	if ( sides.includes( 'vertical' ) ) {
-		filteredSides.push( ...[ 'top', 'bottom' ] );
-	} else if ( sides.includes( 'horizontal' ) ) {
-		filteredSides.push( ...[ 'left', 'right' ] );
-	} else {
-		const newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );
-		filteredSides.push( ...newSides );
-	}
-
-	return filteredSides;
-}
-
-/**
- * Applies a value to an object representing top, right, bottom and left sides
- * while taking into account any custom side configuration.
- *
- * @param {Object}        currentValues The current values for each side.
- * @param {string|number} newValue      The value to apply to the sides object.
- * @param {string[]}      sides         Array defining valid sides.
- *
- * @return {Object} Object containing the updated values for each side.
- */
-export function applyValueToSides( currentValues, newValue, sides ) {
-	const newValues = { ...currentValues };
-
-	if ( sides?.length ) {
-		sides.forEach( ( side ) => {
-			if ( side === 'vertical' ) {
-				newValues.top = newValue;
-				newValues.bottom = newValue;
-			} else if ( side === 'horizontal' ) {
-				newValues.left = newValue;
-				newValues.right = newValue;
-			} else {
-				newValues[ side ] = newValue;
-			}
-		} );
-	} else {
-		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
-	}
-
-	return newValues;
-}
diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts
new file mode 100644
index 00000000000000..73c7f4a6a46cfb
--- /dev/null
+++ b/packages/components/src/box-control/utils.ts
@@ -0,0 +1,272 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import type {
+	BoxControlProps,
+	BoxControlValue,
+	CustomValueUnits,
+} from './types';
+
+export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
+	px: { max: 300, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+export const LABELS = {
+	all: __( 'All sides' ),
+	top: __( 'Top side' ),
+	bottom: __( 'Bottom side' ),
+	left: __( 'Left side' ),
+	right: __( 'Right side' ),
+	mixed: __( 'Mixed' ),
+	vertical: __( 'Top and bottom sides' ),
+	horizontal: __( 'Left and right sides' ),
+};
+
+export const DEFAULT_VALUES = {
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ] as const;
+
+/**
+ * Gets an items with the most occurrence within an array
+ * https://stackoverflow.com/a/20762713
+ *
+ * @param arr Array of items to check.
+ * @return The item with the most occurrences.
+ */
+function mode< T >( arr: T[] ) {
+	return arr
+		.sort(
+			( a, b ) =>
+				arr.filter( ( v ) => v === a ).length -
+				arr.filter( ( v ) => v === b ).length
+		)
+		.pop();
+}
+
+/**
+ * Gets the 'all' input value and unit from values data.
+ *
+ * @param values         Box values.
+ * @param selectedUnits  Box units.
+ * @param availableSides Available box sides to evaluate.
+ *
+ * @return A value + unit for the 'all' input.
+ */
+export function getAllValue(
+	values: BoxControlValue = {},
+	selectedUnits?: BoxControlValue,
+	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
+) {
+	const sides = normalizeSides( availableSides );
+	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
+		parseQuantityAndUnitFromRawValue( values[ side ] )
+	);
+	const allParsedQuantities = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 0 ] ?? ''
+	);
+	const allParsedUnits = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 1 ]
+	);
+
+	const commonQuantity = allParsedQuantities.every(
+		( v ) => v === allParsedQuantities[ 0 ]
+	)
+		? allParsedQuantities[ 0 ]
+		: '';
+
+	/**
+	 * The typeof === 'number' check is important. On reset actions, the incoming value
+	 * may be null or an empty string.
+	 *
+	 * Also, the value may also be zero (0), which is considered a valid unit value.
+	 *
+	 * typeof === 'number' is more specific for these cases, rather than relying on a
+	 * simple truthy check.
+	 */
+	let commonUnit;
+	if ( typeof commonQuantity === 'number' ) {
+		commonUnit = mode( allParsedUnits );
+	} else {
+		// Set meaningful unit selection if no commonQuantity and user has previously
+		// selected units without assigning values while controls were unlinked.
+		commonUnit =
+			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	}
+
+	return [ commonQuantity, commonUnit ].join( '' );
+}
+
+/**
+ * Determine the most common unit selection to use as a fallback option.
+ *
+ * @param selectedUnits Current unit selections for individual sides.
+ * @return  Most common unit selection.
+ */
+export function getAllUnitFallback( selectedUnits?: BoxControlValue ) {
+	if ( ! selectedUnits || typeof selectedUnits !== 'object' ) {
+		return undefined;
+	}
+
+	const filteredUnits = Object.values( selectedUnits ).filter( Boolean );
+
+	return mode( filteredUnits );
+}
+
+/**
+ * Checks to determine if values are mixed.
+ *
+ * @param values        Box values.
+ * @param selectedUnits Box units.
+ * @param sides         Available box sides to evaluate.
+ *
+ * @return Whether values are mixed.
+ */
+export function isValuesMixed(
+	values: BoxControlValue = {},
+	selectedUnits?: BoxControlValue,
+	sides: BoxControlProps[ 'sides' ] = ALL_SIDES
+) {
+	const allValue = getAllValue( values, selectedUnits, sides );
+	const isMixed = isNaN( parseFloat( allValue ) );
+
+	return isMixed;
+}
+
+/**
+ * Checks to determine if values are defined.
+ *
+ * @param values Box values.
+ *
+ * @return  Whether values are mixed.
+ */
+export function isValuesDefined( values?: BoxControlValue ) {
+	return (
+		values &&
+		Object.values( values ).filter(
+			// Switching units when input is empty causes values only
+			// containing units. This gives false positive on mixed values
+			// unless filtered.
+			( value ) => !! value && /\d/.test( value )
+		).length > 0
+	);
+}
+
+/**
+ * Get initial selected side, factoring in whether the sides are linked,
+ * and whether the vertical / horizontal directions are grouped via splitOnAxis.
+ *
+ * @param isLinked    Whether the box control's fields are linked.
+ * @param splitOnAxis Whether splitting by horizontal or vertical axis.
+ * @return The initial side.
+ */
+export function getInitialSide( isLinked: boolean, splitOnAxis: boolean ) {
+	let initialSide: keyof typeof LABELS = 'all';
+
+	if ( ! isLinked ) {
+		initialSide = splitOnAxis ? 'vertical' : 'top';
+	}
+
+	return initialSide;
+}
+
+/**
+ * Normalizes provided sides configuration to an array containing only top,
+ * right, bottom and left. This essentially just maps `horizontal` or `vertical`
+ * to their appropriate sides to facilitate correctly determining value for
+ * all input control.
+ *
+ * @param sides Available sides for box control.
+ * @return Normalized sides configuration.
+ */
+export function normalizeSides( sides: BoxControlProps[ 'sides' ] ) {
+	const filteredSides: ( keyof BoxControlValue )[] = [];
+
+	if ( ! sides?.length ) {
+		return ALL_SIDES;
+	}
+
+	if ( sides.includes( 'vertical' ) ) {
+		filteredSides.push( ...( [ 'top', 'bottom' ] as const ) );
+	} else if ( sides.includes( 'horizontal' ) ) {
+		filteredSides.push( ...( [ 'left', 'right' ] as const ) );
+	} else {
+		const newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );
+		filteredSides.push( ...newSides );
+	}
+
+	return filteredSides;
+}
+
+/**
+ * Applies a value to an object representing top, right, bottom and left sides
+ * while taking into account any custom side configuration.
+ *
+ * @param currentValues The current values for each side.
+ * @param newValue      The value to apply to the sides object.
+ * @param sides         Array defining valid sides.
+ *
+ * @return Object containing the updated values for each side.
+ */
+export function applyValueToSides(
+	currentValues: BoxControlValue,
+	newValue?: string,
+	sides?: BoxControlProps[ 'sides' ]
+): BoxControlValue {
+	const newValues = { ...currentValues };
+
+	if ( sides?.length ) {
+		sides.forEach( ( side ) => {
+			if ( side === 'vertical' ) {
+				newValues.top = newValue;
+				newValues.bottom = newValue;
+			} else if ( side === 'horizontal' ) {
+				newValues.left = newValue;
+				newValues.right = newValue;
+			} else {
+				newValues[ side ] = newValue;
+			}
+		} );
+	} else {
+		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
+	}
+
+	return newValues;
+}
diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md
index 2135a027afa5b6..5c0179d6877af9 100644
--- a/packages/components/src/button-group/README.md
+++ b/packages/components/src/button-group/README.md
@@ -4,12 +4,6 @@ ButtonGroup can be used to group any related buttons together. To emphasize rela
 
 ![ButtonGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
diff --git a/packages/components/src/button-group/index.tsx b/packages/components/src/button-group/index.tsx
index 6185792b6e4d90..fb2659c2a0d7de 100644
--- a/packages/components/src/button-group/index.tsx
+++ b/packages/components/src/button-group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -13,14 +13,14 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import type { ButtonGroupProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnforwardedButtonGroup(
 	props: WordPressComponentProps< ButtonGroupProps, 'div', false >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const { className, ...restProps } = props;
-	const classes = classnames( 'components-button-group', className );
+	const classes = clsx( 'components-button-group', className );
 
 	return (
 		<div ref={ ref } role="group" className={ classes } { ...restProps } />
diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx
new file mode 100644
index 00000000000000..4b5ab3d5dfdb6b
--- /dev/null
+++ b/packages/components/src/button-group/stories/index.story.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '..';
+import Button from '../../button';
+
+const meta: Meta< typeof ButtonGroup > = {
+	title: 'Components/ButtonGroup',
+	component: ButtonGroup,
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ButtonGroup > = {
+	args: {
+		children: (
+			<>
+				<Button variant="primary">Button 1</Button>
+				<Button>Button 2</Button>
+			</>
+		),
+	},
+};
diff --git a/packages/components/src/button-group/stories/index.tsx b/packages/components/src/button-group/stories/index.tsx
deleted file mode 100644
index 33d7cbfacd35d5..00000000000000
--- a/packages/components/src/button-group/stories/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import ButtonGroup from '..';
-import Button from '../../button';
-
-const meta: ComponentMeta< typeof ButtonGroup > = {
-	title: 'Components/ButtonGroup',
-	component: ButtonGroup,
-	argTypes: {
-		children: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
-	const style = { margin: '0 4px' };
-	return (
-		<ButtonGroup { ...args }>
-			<Button variant="primary" style={ style }>
-				Button 1
-			</Button>
-			<Button variant="primary" style={ style }>
-				Button 2
-			</Button>
-		</ButtonGroup>
-	);
-};
-
-export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
-	{}
-);
diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 171722b409f693..96a9e8f458c84c 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -12,11 +12,11 @@
 		}
 
 		&:first-child {
-			border-radius: $radius-block-ui 0 0 $radius-block-ui;
+			border-radius: $radius-small 0 0 $radius-small;
 		}
 
 		&:last-child {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0;
+			border-radius: 0 $radius-small $radius-small 0;
 		}
 
 		// The focused button should be elevated so the focus ring isn't cropped,
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index b8b3a7f3111d2b..d458771494a338 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -4,12 +4,6 @@ Buttons let users take actions and make choices with a single click or tap.
 
 ![Button components](https://make.wordpress.org/design/files/2019/03/button.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -121,133 +115,190 @@ The presence of a `href` prop determines whether an `anchor` element is rendered
 
 Props not included in this set will be applied to the `a` or `button` element.
 
-#### disabled
+#### `accessibleWhenDisabled`: `boolean`
+
+Whether to keep the button focusable when disabled.
+
+In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or by preventing focus from returning to a trigger element.
+
+Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols) in the WAI-ARIA Authoring Practices Guide.
+
+-   Required: No
+-   Default: `false`
+
+#### `children`: `ReactNode`
+
+The button's children.
+
+-   Required: No
+
+#### `className`: `string`
+
+An optional additional class name to apply to the rendered button.
+
+-   Required: No
+
+#### `description`: `string`
 
-Whether the button is disabled. If `true`, this will force a `button` element to be rendered.
+An accessible description for the button.
 
--   Type: `Boolean`
 -   Required: No
 
-#### href
+#### `disabled`: `boolean`
+
+Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.
+
+In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
+
+-   Required: No
+
+#### `href`: `string`
 
 If provided, renders `a` instead of `button`.
 
--   Type: `String`
 -   Required: No
 
-#### variant
+#### `icon`: `IconProps< unknown >[ 'icon' ]`
 
-Specifies the button's style. The accepted values are `'primary'` (the primary button styles), `'secondary'` (the default button styles), `'tertiary'` (the text-based button styles), and `'link'` (the link button styles).
+If provided, renders an [Icon](/packages/components/src/icon/README.md) component inside the button.
 
--   Type: `String`
 -   Required: No
 
-#### isDestructive
+#### `iconPosition`: `'left' | 'right'`
+
+If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.
+
+-   Required: No
+-   Default: `left`
+
+#### `iconSize`: `IconProps< unknown >[ 'size' ]`
+
+If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
+
+-   Required: No
+
+#### `isBusy`: `boolean`
+
+Indicates activity while a action is being performed.
+
+-   Required: No
+
+#### `isDestructive`: `boolean`
 
 Renders a red text-based button style to indicate destructive behavior.
 
--   Type: `Boolean`
 -   Required: No
 
-#### isSmall
+#### `isLink`: `boolean`
 
-Decreases the size of the button.
+Deprecated: Renders a button with an anchor style.
+Use `variant` prop with `link` value instead.
 
--   Type: `Boolean`
 -   Required: No
+-   Default: `false`
 
-#### isPressed
+#### `isPressed`: `boolean`
 
 Renders a pressed button style.
 
--   Type: `Boolean`
+If the native `aria-pressed` attribute is also set, it will take precedence.
+
 -   Required: No
 
-#### isBusy
+#### `isPrimary`: `boolean`
 
-Indicates activity while a action is being performed.
+Deprecated: Renders a primary button style.
+Use `variant` prop with `primary` value instead.
 
--   Type: `Boolean`
 -   Required: No
+-   Default: `false`
 
-#### focus
+#### `isSecondary`: `boolean`
 
-Whether the button is focused.
+Deprecated: Renders a default button style.
+Use `variant` prop with `secondary` value instead.
 
--   Type: `Boolean`
 -   Required: No
+-   Default: `false`
 
-#### target
+#### `isSmall`: `boolean`
 
-If provided with `href`, sets the `target` attribute to the `a`.
+Decreases the size of the button.
+
+Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
 
--   Type: `String`
 -   Required: No
 
-#### className
+#### `isTertiary`: `boolean`
 
-An optional additional class name to apply to the rendered button.
+Deprecated: Renders a text-based button style.
+Use `variant` prop with `tertiary` value instead.
 
--   Type: `String`
 -   Required: No
+-   Default: `false`
 
-#### icon
+#### `label`: `string`
 
-If provided, renders an [Icon](/packages/components/src/icon/README.md) component inside the button.
+Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.
 
--   Type: `String|Function|WPComponent|null`
 -   Required: No
 
-#### iconSize
+#### `shortcut`: `string | { display: string; ariaLabel: string; }`
 
-If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
+If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an object is provided, it should contain `display` and `ariaLabel` keys.
 
--   Type: `Number`
 -   Required: No
 
-#### iconPosition
+#### `showTooltip`: `boolean`
 
-If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.
+If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) component for the button.
 
--   Type: `string`
 -   Required: No
--   Default: `left`
 
-#### text
+#### `size`: `'default'` | `'compact'` | `'small'`
 
-If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
+The size of the button.
+
+-   `'default'`: For normal text-label buttons, unless it is a toggle button.
+-   `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+-   `'small'`: For icon buttons associated with more advanced or auxiliary features.
+
+If the deprecated `isSmall` prop is also defined, this prop will take precedence.
 
--   Type: `String`
 -   Required: No
+-   Default: `'default'`
 
-#### showTooltip
+#### `target`: `string`
 
-If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) component for the button.
+If provided with `href`, sets the `target` attribute to the `a`.
 
--   Type: `Boolean`
 -   Required: No
 
-#### tooltipPosition
+#### `text`: `string`
 
-If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
+If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
 
--   Type: `String`
--   Require: No
+-   Required: No
 
-#### shortcut
+#### `tooltipPosition`: `PopoverProps[ 'position' ]`
 
-If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.
+If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
 
--   Type: `String|Object`
 -   Required: No
 
-#### label
+#### `variant`: `'primary' | 'secondary' | 'tertiary' | 'link'`
 
-Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.
+Specifies the button's style. The accepted values are `'primary'` (the primary button styles), `'secondary'` (the default button styles), `'tertiary'` (the text-based button styles), and `'link'` (the link button styles).
 
--   Type: `String`
 -   Required: No
 
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   To group buttons together, use the [ButtonGroup](/packages/components/src/button-group/README.md) component.
diff --git a/packages/components/src/button/deprecated.js b/packages/components/src/button/deprecated.js
deleted file mode 100644
index 5f18e0e5eb1648..00000000000000
--- a/packages/components/src/button/deprecated.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-
-function IconButton( { labelPosition, size, tooltip, label, ...props }, ref ) {
-	deprecated( 'wp.components.IconButton', {
-		since: '5.4',
-		alternative: 'wp.components.Button',
-		version: '6.2',
-	} );
-
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			tooltipPosition={ labelPosition }
-			iconSize={ size }
-			showTooltip={ tooltip !== undefined ? !! tooltip : undefined }
-			label={ tooltip || label }
-		/>
-	);
-}
-
-export default forwardRef( IconButton );
diff --git a/packages/components/src/button/deprecated.tsx b/packages/components/src/button/deprecated.tsx
new file mode 100644
index 00000000000000..5d39e53c1008c1
--- /dev/null
+++ b/packages/components/src/button/deprecated.tsx
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '.';
+import type { DeprecatedIconButtonProps } from './types';
+
+function UnforwardedIconButton(
+	{
+		label,
+		labelPosition,
+		size,
+		tooltip,
+		...props
+	}: React.ComponentPropsWithoutRef< typeof Button > &
+		DeprecatedIconButtonProps,
+	ref: ForwardedRef< any >
+) {
+	deprecated( 'wp.components.IconButton', {
+		since: '5.4',
+		alternative: 'wp.components.Button',
+		version: '6.2',
+	} );
+
+	return (
+		<Button
+			{ ...props }
+			ref={ ref }
+			tooltipPosition={ labelPosition }
+			iconSize={ size }
+			showTooltip={ tooltip !== undefined ? !! tooltip : undefined }
+			label={ tooltip || label }
+		/>
+	);
+}
+
+export default forwardRef( UnforwardedIconButton );
diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js
deleted file mode 100644
index 1b0fd57a441a91..00000000000000
--- a/packages/components/src/button/index.js
+++ /dev/null
@@ -1,208 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-import { forwardRef } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import Icon from '../icon';
-import { VisuallyHidden } from '../visually-hidden';
-
-const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ];
-
-function useDeprecatedProps( {
-	isDefault,
-	isPrimary,
-	isSecondary,
-	isTertiary,
-	isLink,
-	variant,
-	...otherProps
-} ) {
-	let computedVariant = variant;
-
-	if ( isPrimary ) {
-		computedVariant ??= 'primary';
-	}
-
-	if ( isTertiary ) {
-		computedVariant ??= 'tertiary';
-	}
-
-	if ( isSecondary ) {
-		computedVariant ??= 'secondary';
-	}
-
-	if ( isDefault ) {
-		deprecated( 'Button isDefault prop', {
-			since: '5.4',
-			alternative: 'variant="secondary"',
-			version: '6.2',
-		} );
-
-		computedVariant ??= 'secondary';
-	}
-
-	if ( isLink ) {
-		computedVariant ??= 'link';
-	}
-
-	return {
-		...otherProps,
-		variant: computedVariant,
-	};
-}
-
-export function Button( props, ref ) {
-	const {
-		href,
-		target,
-		isSmall,
-		isPressed,
-		isBusy,
-		isDestructive,
-		className,
-		disabled,
-		icon,
-		iconPosition = 'left',
-		iconSize,
-		showTooltip,
-		tooltipPosition,
-		shortcut,
-		label,
-		children,
-		text,
-		variant,
-		__experimentalIsFocusable: isFocusable,
-		describedBy,
-		...additionalProps
-	} = useDeprecatedProps( props );
-	const instanceId = useInstanceId(
-		Button,
-		'components-button__description'
-	);
-
-	const hasChildren =
-		children?.[ 0 ] &&
-		children[ 0 ] !== null &&
-		// Tooltip should not considered as a child
-		children?.[ 0 ]?.props?.className !== 'components-tooltip';
-
-	const classes = classnames( 'components-button', className, {
-		'is-secondary': variant === 'secondary',
-		'is-primary': variant === 'primary',
-		'is-small': isSmall,
-		'is-tertiary': variant === 'tertiary',
-		'is-pressed': isPressed,
-		'is-busy': isBusy,
-		'is-link': variant === 'link',
-		'is-destructive': isDestructive,
-		'has-text': !! icon && hasChildren,
-		'has-icon': !! icon,
-	} );
-
-	const trulyDisabled = disabled && ! isFocusable;
-	const Tag = href !== undefined && ! trulyDisabled ? 'a' : 'button';
-	const tagProps =
-		Tag === 'a'
-			? { href, target }
-			: {
-					type: 'button',
-					disabled: trulyDisabled,
-					'aria-pressed': isPressed,
-			  };
-
-	if ( disabled && isFocusable ) {
-		// In this case, the button will be disabled, but still focusable and
-		// perceivable by screen reader users.
-		tagProps[ 'aria-disabled' ] = true;
-
-		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
-			additionalProps[ disabledEvent ] = ( event ) => {
-				event.stopPropagation();
-				event.preventDefault();
-			};
-		}
-	}
-
-	// Should show the tooltip if...
-	const shouldShowTooltip =
-		! trulyDisabled &&
-		// An explicit tooltip is passed or...
-		( ( showTooltip && label ) ||
-			// There's a shortcut or...
-			shortcut ||
-			// There's a label and...
-			( !! label &&
-				// The children are empty and...
-				! children?.length &&
-				// The tooltip is not explicitly disabled.
-				false !== showTooltip ) );
-
-	const descriptionId = describedBy ? instanceId : null;
-
-	const describedById =
-		additionalProps[ 'aria-describedby' ] || descriptionId;
-
-	const element = (
-		<Tag
-			{ ...tagProps }
-			{ ...additionalProps }
-			className={ classes }
-			aria-label={ additionalProps[ 'aria-label' ] || label }
-			aria-describedby={ describedById }
-			ref={ ref }
-		>
-			{ icon && iconPosition === 'left' && (
-				<Icon icon={ icon } size={ iconSize } />
-			) }
-			{ text && <>{ text }</> }
-			{ icon && iconPosition === 'right' && (
-				<Icon icon={ icon } size={ iconSize } />
-			) }
-			{ children }
-		</Tag>
-	);
-
-	if ( ! shouldShowTooltip ) {
-		return (
-			<>
-				{ element }
-				{ describedBy && (
-					<VisuallyHidden>
-						<span id={ descriptionId }>{ describedBy }</span>
-					</VisuallyHidden>
-				) }
-			</>
-		);
-	}
-
-	return (
-		<>
-			<Tooltip
-				text={ children?.length && describedBy ? describedBy : label }
-				shortcut={ shortcut }
-				position={ tooltipPosition }
-			>
-				{ element }
-			</Tooltip>
-			{ describedBy && (
-				<VisuallyHidden>
-					<span id={ descriptionId }>{ describedBy }</span>
-				</VisuallyHidden>
-			) }
-		</>
-	);
-}
-
-export default forwardRef( Button );
diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
index 02820e1731f71c..063a2cc191eaed 100644
--- a/packages/components/src/button/index.native.js
+++ b/packages/components/src/button/index.native.js
@@ -24,6 +24,7 @@ import {
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
+import style from './style.scss';
 
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
@@ -51,8 +52,6 @@ const styles = StyleSheet.create( {
 		justifyContent: 'center',
 		alignItems: 'center',
 		borderRadius: 6,
-		borderColor: '#2e4453',
-		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
 		color: '#7b9ab1', // $toolbar-button.
@@ -95,6 +94,7 @@ export function Button( props ) {
 		tooltipPosition,
 		isActiveStyle,
 		customContainerStyles,
+		hitSlop,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
@@ -105,10 +105,16 @@ export function Button( props ) {
 		customContainerStyles && { ...customContainerStyles },
 	];
 
+	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
+		style[ 'components-button-light--active' ],
+		style[ 'components-button-dark--active' ]
+	);
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed ? buttonActiveColorStyles : {} ),
 		...( isPressed &&
 			isActiveStyle?.borderRadius && {
 				borderRadius: isActiveStyle.borderRadius,
@@ -158,7 +164,6 @@ export function Button( props ) {
 
 	const newIcon = icon
 		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				colorScheme: preferredColorScheme,
 				isPressed,
 		  } )
 		: null;
@@ -175,15 +180,16 @@ export function Button( props ) {
 	const element = (
 		<TouchableOpacity
 			activeOpacity={ 0.7 }
-			accessible={ true }
+			accessible
 			accessibilityLabel={ label }
 			accessibilityStates={ states }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
+			hitSlop={ hitSlop }
 		>
 			<LongPressGestureHandler
 				minDurationMs={ 500 }
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
new file mode 100644
index 00000000000000..0ab6b24b4dd6aa
--- /dev/null
+++ b/packages/components/src/button/index.tsx
@@ -0,0 +1,306 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type {
+	ComponentPropsWithoutRef,
+	ForwardedRef,
+	HTMLAttributes,
+	MouseEvent,
+	ReactElement,
+} from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Tooltip from '../tooltip';
+import Icon from '../icon';
+import { VisuallyHidden } from '../visually-hidden';
+import type { ButtonProps, DeprecatedButtonProps } from './types';
+import { positionToPlacement } from '../popover/utils';
+
+const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
+
+function useDeprecatedProps( {
+	__experimentalIsFocusable,
+	isDefault,
+	isPrimary,
+	isSecondary,
+	isTertiary,
+	isLink,
+	isPressed,
+	isSmall,
+	size,
+	variant,
+	describedBy,
+	...otherProps
+}: ButtonProps & DeprecatedButtonProps ): ButtonProps {
+	let computedSize = size;
+	let computedVariant = variant;
+
+	const newProps = {
+		accessibleWhenDisabled: __experimentalIsFocusable,
+		// @todo Mark `isPressed` as deprecated
+		'aria-pressed': isPressed,
+		description: describedBy,
+	};
+
+	if ( isSmall ) {
+		computedSize ??= 'small';
+	}
+
+	if ( isPrimary ) {
+		computedVariant ??= 'primary';
+	}
+
+	if ( isTertiary ) {
+		computedVariant ??= 'tertiary';
+	}
+
+	if ( isSecondary ) {
+		computedVariant ??= 'secondary';
+	}
+
+	if ( isDefault ) {
+		deprecated( 'wp.components.Button `isDefault` prop', {
+			since: '5.4',
+			alternative: 'variant="secondary"',
+		} );
+
+		computedVariant ??= 'secondary';
+	}
+
+	if ( isLink ) {
+		computedVariant ??= 'link';
+	}
+
+	return {
+		...newProps,
+		...otherProps,
+		size: computedSize,
+		variant: computedVariant,
+	};
+}
+
+export function UnforwardedButton(
+	props: ButtonProps & DeprecatedButtonProps,
+	ref: ForwardedRef< any >
+) {
+	const {
+		__next40pxDefaultSize,
+		accessibleWhenDisabled,
+		isBusy,
+		isDestructive,
+		className,
+		disabled,
+		icon,
+		iconPosition = 'left',
+		iconSize,
+		showTooltip,
+		tooltipPosition,
+		shortcut,
+		label,
+		children,
+		size = 'default',
+		text,
+		variant,
+		description,
+		...buttonOrAnchorProps
+	} = useDeprecatedProps( props );
+
+	const {
+		href,
+		target,
+		'aria-checked': ariaChecked,
+		'aria-pressed': ariaPressed,
+		'aria-selected': ariaSelected,
+		...additionalProps
+	} = 'href' in buttonOrAnchorProps
+		? buttonOrAnchorProps
+		: { href: undefined, target: undefined, ...buttonOrAnchorProps };
+
+	const instanceId = useInstanceId(
+		Button,
+		'components-button__description'
+	);
+
+	const hasChildren =
+		( 'string' === typeof children && !! children ) ||
+		( Array.isArray( children ) &&
+			children?.[ 0 ] &&
+			children[ 0 ] !== null &&
+			// Tooltip should not considered as a child
+			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
+
+	const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
+		true,
+		'true',
+		'mixed',
+	];
+
+	const classes = clsx( 'components-button', className, {
+		'is-next-40px-default-size': __next40pxDefaultSize,
+		'is-secondary': variant === 'secondary',
+		'is-primary': variant === 'primary',
+		'is-small': size === 'small',
+		'is-compact': size === 'compact',
+		'is-tertiary': variant === 'tertiary',
+
+		'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),
+		'is-pressed-mixed': ariaPressed === 'mixed',
+
+		'is-busy': isBusy,
+		'is-link': variant === 'link',
+		'is-destructive': isDestructive,
+		'has-text': !! icon && ( hasChildren || text ),
+		'has-icon': !! icon,
+	} );
+
+	const trulyDisabled = disabled && ! accessibleWhenDisabled;
+	const Tag = href !== undefined && ! disabled ? 'a' : 'button';
+	const buttonProps: ComponentPropsWithoutRef< 'button' > =
+		Tag === 'button'
+			? {
+					type: 'button',
+					disabled: trulyDisabled,
+					'aria-checked': ariaChecked,
+					'aria-pressed': ariaPressed,
+					'aria-selected': ariaSelected,
+			  }
+			: {};
+	const anchorProps: ComponentPropsWithoutRef< 'a' > =
+		Tag === 'a' ? { href, target } : {};
+
+	const disableEventProps: {
+		[ key: string ]: ( event: MouseEvent ) => void;
+	} = {};
+	if ( disabled && accessibleWhenDisabled ) {
+		// In this case, the button will be disabled, but still focusable and
+		// perceivable by screen reader users.
+		buttonProps[ 'aria-disabled' ] = true;
+		anchorProps[ 'aria-disabled' ] = true;
+		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
+			disableEventProps[ disabledEvent ] = ( event: MouseEvent ) => {
+				if ( event ) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			};
+		}
+	}
+
+	// Should show the tooltip if...
+	const shouldShowTooltip =
+		! trulyDisabled &&
+		// An explicit tooltip is passed or...
+		( ( showTooltip && !! label ) ||
+			// There's a shortcut or...
+			!! shortcut ||
+			// There's a label and...
+			( !! label &&
+				// The children are empty and...
+				! ( children as string | ReactElement[] )?.length &&
+				// The tooltip is not explicitly disabled.
+				false !== showTooltip ) );
+
+	const descriptionId = description ? instanceId : undefined;
+
+	const describedById =
+		additionalProps[ 'aria-describedby' ] || descriptionId;
+
+	const commonProps = {
+		className: classes,
+		'aria-label': additionalProps[ 'aria-label' ] || label,
+		'aria-describedby': describedById,
+		ref,
+	};
+
+	const elementChildren = (
+		<>
+			{ icon && iconPosition === 'left' && (
+				<Icon icon={ icon } size={ iconSize } />
+			) }
+			{ text && <>{ text }</> }
+			{ children }
+			{ icon && iconPosition === 'right' && (
+				<Icon icon={ icon } size={ iconSize } />
+			) }
+		</>
+	);
+
+	const element =
+		Tag === 'a' ? (
+			<a
+				{ ...anchorProps }
+				{ ...( additionalProps as HTMLAttributes< HTMLAnchorElement > ) }
+				{ ...disableEventProps }
+				{ ...commonProps }
+			>
+				{ elementChildren }
+			</a>
+		) : (
+			<button
+				{ ...buttonProps }
+				{ ...( additionalProps as HTMLAttributes< HTMLButtonElement > ) }
+				{ ...disableEventProps }
+				{ ...commonProps }
+			>
+				{ elementChildren }
+			</button>
+		);
+
+	// In order to avoid some React reconciliation issues, we are always rendering
+	// the `Tooltip` component even when `shouldShowTooltip` is `false`.
+	// In order to make sure that the tooltip doesn't show when it shouldn't,
+	// we don't pass the props to the `Tooltip` component.
+	const tooltipProps = shouldShowTooltip
+		? {
+				text:
+					( children as string | ReactElement[] )?.length &&
+					description
+						? description
+						: label,
+				shortcut,
+				placement:
+					tooltipPosition &&
+					// Convert legacy `position` values to be used with the new `placement` prop
+					positionToPlacement( tooltipPosition ),
+		  }
+		: {};
+
+	return (
+		<>
+			<Tooltip { ...tooltipProps }>{ element }</Tooltip>
+			{ description && (
+				<VisuallyHidden>
+					<span id={ descriptionId }>{ description }</span>
+				</VisuallyHidden>
+			) }
+		</>
+	);
+}
+
+/**
+ * Lets users take actions and make choices with a single click or tap.
+ *
+ * ```jsx
+ * import { Button } from '@wordpress/components';
+ * const Mybutton = () => (
+ *   <Button
+ *     variant="primary"
+ *     onClick={ handleClick }
+ *   >
+ *     Click here
+ *   </Button>
+ * );
+ * ```
+ */
+export const Button = forwardRef( UnforwardedButton );
+export default Button;
diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx
new file mode 100644
index 00000000000000..d2651e8df1ec18
--- /dev/null
+++ b/packages/components/src/button/stories/e2e/index.story.tsx
@@ -0,0 +1,169 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Button } from '../..';
+import type { ButtonAsButtonProps } from '../../types';
+
+const meta: Meta< typeof Button > = {
+	component: Button,
+	title: 'Components/Button',
+};
+export default meta;
+
+export const VariantStates: StoryFn< typeof Button > = (
+	props: ButtonAsButtonProps
+) => {
+	const variants: ( typeof props.variant )[] = [
+		undefined,
+		'primary',
+		'secondary',
+		'tertiary',
+		'link',
+	];
+
+	const VariantsRow = ( {
+		buttonProps,
+		name,
+	}: {
+		buttonProps?: ButtonAsButtonProps;
+		name: string;
+	} ) => {
+		return (
+			<tr>
+				<th
+					style={ {
+						fontSize: 13,
+						fontWeight: 'normal',
+						padding: 8,
+						background: '#f3f4f5',
+					} }
+				>
+					{ name }
+				</th>
+				{ variants.map( ( variant ) => (
+					<td key={ variant ?? 'undefined' } style={ { padding: 4 } }>
+						<Button
+							{ ...props }
+							variant={ variant }
+							{ ...buttonProps }
+						/>
+					</td>
+				) ) }
+			</tr>
+		);
+	};
+
+	return (
+		<table>
+			<thead>
+				<tr style={ { background: '#f3f4f5' } }>
+					<th />
+					{ variants.map( ( variant ) => (
+						<th
+							key={ variant ?? 'undefined' }
+							style={ { padding: 8 } }
+						>
+							{ variant ?? '(default)' }
+						</th>
+					) ) }
+				</tr>
+			</thead>
+			<tbody>
+				<VariantsRow name="(default)" />
+				<VariantsRow
+					name="disabled"
+					buttonProps={ { disabled: true } }
+				/>
+				<VariantsRow
+					name="focusable disabled"
+					buttonProps={ {
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy"
+					buttonProps={ {
+						isBusy: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy disabled"
+					buttonProps={ {
+						isBusy: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive"
+					buttonProps={ {
+						isDestructive: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive disabled"
+					buttonProps={ {
+						isDestructive: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed"
+					buttonProps={ {
+						isPressed: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed disabled"
+					buttonProps={ {
+						isPressed: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+			</tbody>
+		</table>
+	);
+};
+VariantStates.args = {
+	children: 'Code is poetry',
+};
+
+export const Icon = VariantStates.bind( {} );
+Icon.args = {
+	icon: wordpress,
+};
+
+export const Dashicons: StoryFn< typeof Button > = ( props ) => {
+	return (
+		<div style={ { display: 'flex', gap: 8 } }>
+			<Button { ...props } />
+			<Button { ...props }>Children</Button>
+			<Button { ...props } iconPosition="right">
+				Children (icon right)
+			</Button>
+			<Button { ...props } text="Text" />
+			<Button
+				{ ...props }
+				text="Text (icon right)"
+				iconPosition="right"
+			/>
+		</div>
+	);
+};
+Dashicons.args = {
+	icon: 'editor-help',
+	variant: 'primary',
+};
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
deleted file mode 100644
index 428d1851c66400..00000000000000
--- a/packages/components/src/button/stories/index.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	formatBold,
-	formatItalic,
-	link,
-	more,
-	wordpress,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import './style.css';
-import Button from '../';
-
-export default {
-	title: 'Components/Button',
-	component: Button,
-	argTypes: {
-		label: {
-			control: { type: 'text' },
-			description:
-				'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
-		},
-		children: {
-			control: { type: 'text' },
-		},
-		href: {
-			control: { type: 'text' },
-			description: 'If provided, renders `a` instead of `button`.',
-		},
-		icon: {
-			control: { type: 'select' },
-			description:
-				'If provided, renders an `Icon` component inside the button.',
-			options: [ 'wordpress', 'link', 'more' ],
-			mapping: {
-				wordpress,
-				link,
-				more,
-			},
-		},
-		iconSize: {
-			control: { type: 'number' },
-			description: 'If provided with `icon`, sets the icon size.',
-		},
-		iconPosition: {
-			control: { type: 'select' },
-			description:
-				'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
-			options: [ 'left', 'right' ],
-			table: {
-				defaultValue: { summary: `left` },
-			},
-		},
-		isBusy: {
-			control: 'boolean',
-			description:
-				'Indicates activity while a action is being performed.',
-		},
-		isDestructive: {
-			control: 'boolean',
-			description:
-				'Renders a red text-based button style to indicate destructive behavior.',
-		},
-		isPressed: {
-			control: 'boolean',
-			description: 'Renders a pressed button style.',
-		},
-		isSmall: {
-			control: 'boolean',
-			description: 'Decreases the size of the button.',
-		},
-		disabled: {
-			control: 'boolean',
-			description:
-				'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
-		},
-		shortcut: {
-			control: { type: 'text' },
-			description:
-				'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
-		},
-		showTooltip: {
-			control: 'boolean',
-			description:
-				'If provided, renders a `Tooltip` component for the button.',
-		},
-		tooltipPosition: {
-			control: { type: 'text' },
-			description:
-				'If provided with `showTooltip`, sets the position of the tooltip.',
-		},
-		text: {
-			control: { type: 'text' },
-			description:
-				'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
-		},
-		target: {
-			control: { type: 'text' },
-			description:
-				'If provided with `href`, sets the `target` attribute to the `a`.',
-		},
-		variant: {
-			control: { type: 'select' },
-			description: "Specifies the button's style.",
-			options: [ 'primary', 'secondary', 'tertiary', 'link' ],
-		},
-		__experimentalIsFocusable: {
-			control: 'boolean',
-			description: 'Makes the button focusable even when disabled',
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-function Template( { children, ...props } ) {
-	return <Button { ...props }>{ children }</Button>;
-}
-
-export const Default = Template.bind( {} );
-Default.args = {
-	children: 'Code is poetry',
-};
-
-export const Icon = Template.bind( {} );
-Icon.args = {
-	label: 'Code is poetry',
-	icon: 'wordpress',
-};
-
-export const groupedIcons = () => {
-	const GroupContainer = ( { children } ) => (
-		<div style={ { display: 'inline-flex' } }>{ children }</div>
-	);
-
-	return (
-		<GroupContainer>
-			<Button icon={ formatBold } label="Bold" />
-			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ link } label="Link" />
-		</GroupContainer>
-	);
-};
diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
new file mode 100644
index 00000000000000..808914893de610
--- /dev/null
+++ b/packages/components/src/button/stories/index.story.tsx
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	formatBold,
+	formatItalic,
+	link,
+	more,
+	wordpress,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.css';
+import Button from '..';
+
+const meta: Meta< typeof Button > = {
+	title: 'Components/Actions/Button',
+	id: 'components-button',
+	component: Button,
+	argTypes: {
+		// Overrides a limitation of the docgen interpreting our TS types for this as required.
+		'aria-pressed': {
+			control: { type: 'select' },
+			description:
+				'Indicates the current "pressed" state, implying it is a toggle button. Implicitly set by `isPressed`, but takes precedence if both are provided.',
+			options: [ undefined, 'true', 'false', 'mixed' ],
+			table: {
+				type: {
+					summary: 'boolean | "true" | "false" | "mixed"',
+				},
+			},
+		},
+		href: { type: { name: 'string', required: false } },
+		icon: {
+			control: { type: 'select' },
+			options: [ 'wordpress', 'link', 'more' ],
+			mapping: {
+				wordpress,
+				link,
+				more,
+			},
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Button > = ( props ) => {
+	return <Button { ...props }></Button>;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
+};
+
+export const Primary = Template.bind( {} );
+Primary.args = {
+	...Default.args,
+	variant: 'primary',
+};
+
+export const Secondary = Template.bind( {} );
+Secondary.args = {
+	...Default.args,
+	variant: 'secondary',
+};
+
+export const Tertiary = Template.bind( {} );
+Tertiary.args = {
+	...Default.args,
+	variant: 'tertiary',
+};
+
+export const Link = Template.bind( {} );
+Link.args = {
+	...Default.args,
+	variant: 'link',
+};
+
+export const IsDestructive = Template.bind( {} );
+IsDestructive.args = {
+	...Default.args,
+	isDestructive: true,
+};
+
+export const Icon = Template.bind( {} );
+Icon.args = {
+	label: 'Code is poetry',
+	icon: 'wordpress',
+};
+
+export const GroupedIcons = () => {
+	const GroupContainer = ( { children }: { children: ReactNode } ) => (
+		<div style={ { display: 'inline-flex' } }>{ children }</div>
+	);
+
+	return (
+		<GroupContainer>
+			<Button icon={ formatBold } label="Bold" />
+			<Button icon={ formatItalic } label="Italic" />
+			<Button icon={ link } label="Link" />
+		</GroupContainer>
+	);
+};
diff --git a/packages/components/src/button/style.native.scss b/packages/components/src/button/style.native.scss
new file mode 100644
index 00000000000000..ab90f8ec64e82c
--- /dev/null
+++ b/packages/components/src/button/style.native.scss
@@ -0,0 +1,9 @@
+.components-button-light--active {
+	border-color: $light-dim;
+	background-color: $light-dim;
+}
+
+.components-button-dark--active {
+	border-color: $dark-quaternary;
+	background-color: $dark-quaternary;
+}
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 29b8d4aa2cba92..61455a54e26f6b 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -1,3 +1,10 @@
+/**
+ * For easier testing of potential regressions, you can use a Button variant matrix
+ * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
+ */
+
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
@@ -15,17 +22,16 @@
 	align-items: center;
 	box-sizing: border-box;
 	padding: 6px 12px;
-	border-radius: $radius-block-ui;
-	color: $gray-900;
+	border-radius: $radius-small;
+	color: $components-color-foreground;
 
-	&[aria-expanded="true"],
-	&:hover {
-		color: $components-color-accent;
+	&.is-next-40px-default-size {
+		height: $button-size-next-default-40px;
 	}
 
-	// Unset some hovers, instead of adding :not specificity.
-	&[aria-disabled="true"]:hover {
-		color: initial;
+	&[aria-expanded="true"],
+	&:hover:not(:disabled, [aria-disabled="true"]) {
+		color: $components-color-accent;
 	}
 
 	// Focus.
@@ -44,7 +50,7 @@
 	&.is-primary {
 		white-space: nowrap;
 		background: $components-color-accent;
-		color: $white;
+		color: $components-color-accent-inverted;
 		text-decoration: none;
 		text-shadow: none;
 
@@ -53,17 +59,17 @@
 
 		&:hover:not(:disabled) {
 			background: $components-color-accent-darker-10;
-			color: $white;
+			color: $components-color-accent-inverted;
 		}
 
 		&:active:not(:disabled) {
 			background: $components-color-accent-darker-20;
 			border-color: $components-color-accent-darker-20;
-			color: $white;
+			color: $components-color-accent-inverted;
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&:disabled,
@@ -71,26 +77,23 @@
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			color: rgba($white, 0.4);
 			background: $components-color-accent;
 			border-color: $components-color-accent;
-			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
-				box-shadow:
-					0 0 0 $border-width $white,
-					0 0 0 3px $components-color-accent;
+				box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 			}
 		}
 
 		&.is-busy,
 		&.is-busy:disabled,
 		&.is-busy[aria-disabled="true"] {
-			color: $white;
+			color: $components-color-accent-inverted;
 			background-size: 100px 100%;
-			// Disable reason: This function call looks nicer when each argument is on its own line.
-			/* stylelint-disable */
+			/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 			background-image: linear-gradient(
 				-45deg,
 				$components-color-accent 33%,
@@ -113,25 +116,15 @@
 		outline: 1px solid transparent;
 
 		&:active:not(:disabled) {
-			background: $gray-300;
-			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
 
-		&:hover:not(:disabled) {
-			color: $components-color-accent-darker-10;
-			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
-		}
-
 		&:disabled,
 		&[aria-disabled="true"],
 		&[aria-disabled="true"]:hover {
-			color: lighten($gray-700, 5%);
-			background: lighten($gray-300, 5%);
+			color: $gray-600;
+			background: transparent;
 			transform: none;
-			opacity: 1;
-			box-shadow: none;
-			outline: none;
 		}
 	}
 
@@ -140,11 +133,25 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width $components-color-accent;
+		box-shadow: inset 0 0 0 $border-width $components-color-accent, 0 0 0 currentColor;
 		outline: 1px solid transparent; // Shown in high contrast mode.
 		white-space: nowrap;
 		color: $components-color-accent;
 		background: transparent;
+
+		&:hover:not(:disabled, [aria-disabled="true"]) {
+			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
+		}
+
+		&:disabled:not(:focus),
+		&[aria-disabled="true"]:not(:focus),
+		&[aria-disabled="true"]:hover:not(:focus) {
+			box-shadow: inset 0 0 0 $border-width $gray-300;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		}
 	}
 
 	/**
@@ -155,17 +162,32 @@
 		white-space: nowrap;
 		color: $components-color-accent;
 		background: transparent;
-		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
+		&:hover:not(:disabled, [aria-disabled="true"]) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		}
+
+		&:active:not(:disabled, [aria-disabled="true"]) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
+			/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
 		}
+
+		&:disabled,
+		&[aria-disabled="true"],
+		&[aria-disabled="true"]:hover {
+			&:not(:focus) {
+				box-shadow: none;
+				outline: none;
+			}
+		}
 	}
 
 	/**
@@ -179,19 +201,33 @@
 		// Only the default variant is styled differently from the non-destructive counterparts.
 		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
 			color: $alert-red;
-			box-shadow: inset 0 0 0 $border-width $alert-red;
 
-			&:hover:not(:disabled) {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
 				color: darken($alert-red, 20%);
 			}
 
-			&:focus:not(:disabled) {
+			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
 			}
 
-			&:active:not(:disabled) {
+			&:active:not(:disabled, [aria-disabled="true"]) {
 				background: $gray-400;
 			}
+
+			&:disabled,
+			&[aria-disabled="true"] {
+				color: $gray-600;
+			}
+		}
+
+		&.is-tertiary {
+			&:hover:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.04);
+			}
+
+			&:active:not(:disabled, [aria-disabled="true"]) {
+				background: rgba($alert-red, 0.08);
+			}
 		}
 	}
 
@@ -217,18 +253,23 @@
 		height: auto;
 
 		&:focus {
-			border-radius: $radius-block-ui;
+			border-radius: $radius-small;
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
 		}
 	}
 
-	&:not([aria-disabled="true"]):active {
-		color: inherit;
+	&:not(:disabled, [aria-disabled="true"]):active {
+		color: $components-color-foreground;
 	}
 
 	&:disabled,
 	&[aria-disabled="true"] {
 		cursor: default;
-		opacity: 0.3;
+		color: $gray-600;
 	}
 
 	&.is-busy,
@@ -236,12 +277,16 @@
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
 		animation: components-button__busy-animation 2500ms infinite linear;
-		opacity: 1;
+		// This should be refactored to use the reduce-motion("animation") mixin
+		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 0s;
+		}
 		background-size: 100px 100%;
-		// Disable reason: This function call looks nicer when each argument is on its own line.
-		/* stylelint-disable */
+		/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
 		background-image: linear-gradient(
 			-45deg,
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			darken($white, 2%) 33%,
 			darken($white, 12%) 33%,
 			darken($white, 12%) 70%,
@@ -250,16 +295,26 @@
 		/* stylelint-enable */
 	}
 
+	&.is-compact {
+		height: $button-size-compact;
+
+		&.has-icon:not(.has-text) {
+			padding: 0;
+			width: $button-size-compact;
+			min-width: $button-size-compact;
+		}
+	}
+
 	&.is-small {
-		height: $icon-size;
+		height: $button-size-small;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $icon-size;
-			min-width: $icon-size;
+			width: $button-size-small;
+			min-width: $button-size-small;
 		}
 	}
 
@@ -270,42 +325,52 @@
 		min-width: $button-size;
 		justify-content: center;
 
+		&.is-next-40px-default-size {
+			min-width: $button-size-next-default-40px;
+		}
+
 		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-			margin-left: 2px;
-			margin-right: 2px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			padding: 2px;
+			box-sizing: content-box;
 		}
 
 		&.has-text {
 			justify-content: start;
-		}
-
-		&.has-text svg {
-			margin-right: 8px;
-		}
-
-		&.has-text .dashicon {
-			margin-right: 10px;
+			padding-right: $grid-unit-15;
+			padding-left: $grid-unit-10;
+			gap: $grid-unit-05;
 		}
 	}
 
 	// Toggled style.
 	&.is-pressed {
-		color: $white;
-		background: $gray-900;
+		&,
+		&:hover {
+			color: $components-color-foreground-inverted;
+			&:not(:disabled, [aria-disabled="true"]) {
+				background: $components-color-foreground;
+			}
+		}
+
+		&:disabled,
+		&[aria-disabled="true"] {
+			color: $gray-600;
+
+			&:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
+				color: $components-color-foreground-inverted;
+				background: $gray-600;
+			}
+		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+			box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
 		}
-
-		&:hover:not(:disabled) {
-			color: $white;
-			background: $gray-900;
-		}
 	}
 
 	svg {
diff --git a/packages/components/src/button/test/index.js b/packages/components/src/button/test/index.js
deleted file mode 100644
index 0536ab585e1c92..00000000000000
--- a/packages/components/src/button/test/index.js
+++ /dev/null
@@ -1,375 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { createRef } from '@wordpress/element';
-import { plusCircle } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../';
-import { Tooltip } from '../../';
-
-jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
-
-describe( 'Button', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render a button element with only one class', () => {
-			render( <Button /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).toHaveClass( 'components-button' );
-			expect( button ).not.toHaveClass( 'is-large' );
-			expect( button ).not.toHaveClass( 'is-primary' );
-			expect( button ).not.toHaveClass( 'is-pressed' );
-			expect( button ).toBeEnabled();
-			expect( button ).not.toHaveAttribute( 'aria-disabled' );
-			expect( button ).toHaveAttribute( 'type', 'button' );
-		} );
-
-		it( 'should render a button element with is-primary class', () => {
-			render( <Button variant="primary" /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).not.toHaveClass( 'is-large' );
-			expect( button ).toHaveClass( 'is-primary' );
-		} );
-
-		it( 'should render a button element with is-secondary and is-small class', () => {
-			render( <Button variant="secondary" isSmall /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).toHaveClass( 'is-secondary' );
-			expect( button ).not.toHaveClass( 'is-large' );
-			expect( button ).toHaveClass( 'is-small' );
-			expect( button ).not.toHaveClass( 'is-primary' );
-		} );
-
-		it( 'should render a button element with is-tertiary class', () => {
-			render( <Button variant="tertiary" /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).not.toHaveClass( 'is-large' );
-			expect( button ).not.toHaveClass( 'is-primary' );
-			expect( button ).not.toHaveClass( 'is-secondary' );
-			expect( button ).toHaveClass( 'is-tertiary' );
-		} );
-
-		it( 'should render a button element with is-link class', () => {
-			render( <Button variant="link" /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).not.toHaveClass( 'is-primary' );
-			expect( button ).not.toHaveClass( 'is-secondary' );
-			expect( button ).not.toHaveClass( 'is-tertiary' );
-			expect( button ).toHaveClass( 'is-link' );
-		} );
-
-		it( 'should render a button element with is-pressed without button class', () => {
-			render( <Button isPressed /> );
-
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
-		} );
-
-		it( 'should render a button element with has-text when children are passed', async () => {
-			render( <Button icon={ plusCircle }>Children</Button> );
-			await screen.getByRole( 'button' ).focus();
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
-		} );
-
-		it( 'should render a button element without has-text when children are not passed', async () => {
-			render( <Button icon={ plusCircle }></Button> );
-			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
-				'has-text'
-			);
-		} );
-
-		it( 'should render a button element without has-text when children are empty fragment', async () => {
-			render(
-				<Button icon={ plusCircle }>
-					<></>
-				</Button>
-			);
-			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
-				'has-text'
-			);
-		} );
-
-		it( 'should render a button element without has-text when a button wrapped in Tooltip', async () => {
-			render(
-				<Tooltip text="Help text">
-					<Button icon={ plusCircle } />
-				</Tooltip>
-			);
-			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
-				'has-text'
-			);
-		} );
-
-		it( 'should add a disabled prop to the button', () => {
-			render( <Button disabled /> );
-
-			expect( screen.getByRole( 'button' ) ).toBeDisabled();
-		} );
-
-		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
-			render( <Button disabled __experimentalIsFocusable /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).toBeEnabled();
-			expect( button ).toHaveAttribute( 'aria-disabled' );
-		} );
-
-		it( 'should not pass the prop target into the element', () => {
-			render( <Button target="_blank" /> );
-
-			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
-				'target'
-			);
-		} );
-
-		it( 'should render with an additional className', () => {
-			render( <Button className="gutenberg" /> );
-
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'gutenberg' );
-		} );
-
-		it( 'should render an additional WordPress prop of value awesome', () => {
-			render( <Button WordPress="awesome" /> );
-
-			expect( console ).toHaveErrored();
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'wordpress',
-				'awesome'
-			);
-		} );
-
-		it( 'should render an icon button', () => {
-			render( <Button icon={ plusCircle } /> );
-			const button = screen.getByRole( 'button' );
-
-			expect( button ).toHaveClass( 'has-icon' );
-			expect( button ).not.toHaveAttribute( 'aria-label' );
-		} );
-
-		it( 'should render a Dashicon component matching the wordpress icon', () => {
-			render( <Button icon={ plusCircle } /> );
-
-			expect( screen.getByRole( 'button' ) ).toContainElement(
-				screen.getByTestId( 'test-icon' )
-			);
-		} );
-
-		it( 'should render child elements and icon', () => {
-			render(
-				<Button
-					icon={ plusCircle }
-					children={ <p className="test">Test</p> }
-				/>
-			);
-
-			expect( screen.getByRole( 'button' ) ).toContainElement(
-				screen.getByTestId( 'test-icon' )
-			);
-
-			const paragraph = screen.getByText( 'Test' );
-			expect( paragraph ).toBeVisible();
-			expect( paragraph ).toHaveClass( 'test' );
-		} );
-
-		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
-			render( <Button icon={ plusCircle } label="WordPress" /> );
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
-
-			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
-		} );
-
-		it( 'should support explicit aria-label override', () => {
-			render( <Button aria-label="Custom" /> );
-
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'aria-label',
-				'Custom'
-			);
-		} );
-
-		it( 'should support adding aria-describedby text', () => {
-			render( <Button describedBy="Description text" /> );
-			expect(
-				screen.getByRole( 'button', {
-					description: 'Description text',
-				} )
-			).toBeVisible();
-		} );
-
-		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
-			render(
-				<Button
-					describedBy="Description text"
-					label="Label"
-					icon={ plusCircle }
-				/>
-			);
-
-			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
-
-			await screen.getByRole( 'button', { name: 'Label' } ).focus();
-
-			expect( screen.getByText( 'Label' ) ).toBeVisible();
-		} );
-
-		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
-			render(
-				<Button
-					label="Label"
-					describedBy="Description text"
-					icon={ plusCircle }
-					showTooltip
-				>
-					Children
-				</Button>
-			);
-
-			expect(
-				screen.getByRole( 'button', {
-					description: 'Description text',
-				} )
-			).toBeVisible();
-		} );
-
-		it( 'should allow tooltip disable', async () => {
-			render(
-				<Button
-					icon={ plusCircle }
-					label="WordPress"
-					showTooltip={ false }
-				/>
-			);
-			const button = screen.getByRole( 'button', { name: 'WordPress' } );
-
-			expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-
-			await button.focus();
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'should show the tooltip for empty children', async () => {
-			render(
-				<Button icon={ plusCircle } label="WordPress" children={ [] } />
-			);
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
-
-			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
-		} );
-
-		it( 'should not show the tooltip when icon and children defined', async () => {
-			render(
-				<Button icon={ plusCircle } label="WordPress">
-					Children
-				</Button>
-			);
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'should force showing the tooltip even if icon and children defined', async () => {
-			render(
-				<Button icon={ plusCircle } label="WordPress" showTooltip>
-					Children
-				</Button>
-			);
-
-			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
-
-			await screen.getByRole( 'button', { name: 'WordPress' } ).focus();
-
-			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
-		} );
-	} );
-
-	describe( 'with href property', () => {
-		it( 'should render a link instead of a button with href prop', () => {
-			render( <Button href="https://wordpress.org/" /> );
-
-			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
-				'href',
-				'https://wordpress.org/'
-			);
-		} );
-
-		it( 'should allow for the passing of the target prop when a link is created', () => {
-			render( <Button href="https://wordpress.org/" target="_blank" /> );
-
-			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
-				'target',
-				'_blank'
-			);
-		} );
-
-		it( 'should become a button again when disabled is supplied', () => {
-			render( <Button href="https://wordpress.org/" disabled /> );
-
-			expect( screen.getByRole( 'button' ) ).toBeVisible();
-		} );
-	} );
-
-	describe( 'ref forwarding', () => {
-		it( 'should enable access to DOM element', () => {
-			const ref = createRef();
-
-			render( <Button ref={ ref } /> );
-
-			expect( ref.current ).toBe( screen.getByRole( 'button' ) );
-		} );
-	} );
-
-	describe( 'deprecated props', () => {
-		it( 'should not break when the legacy isPrimary prop is passed', () => {
-			render( <Button isPrimary /> );
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-primary' );
-		} );
-
-		it( 'should not break when the legacy isSecondary prop is passed', () => {
-			render( <Button isSecondary /> );
-			expect( screen.getByRole( 'button' ) ).toHaveClass(
-				'is-secondary'
-			);
-		} );
-
-		it( 'should not break when the legacy isTertiary prop is passed', () => {
-			render( <Button isTertiary /> );
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
-		} );
-
-		it( 'should not break when the legacy isLink prop is passed', () => {
-			render( <Button isLink /> );
-			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-link' );
-		} );
-
-		it( 'should warn when the isDefault prop is passed', () => {
-			render( <Button isDefault /> );
-			expect( screen.getByRole( 'button' ) ).toHaveClass(
-				'is-secondary'
-			);
-			expect( console ).toHaveWarned();
-		} );
-	} );
-} );
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
new file mode 100644
index 00000000000000..8161e68c4e21b6
--- /dev/null
+++ b/packages/components/src/button/test/index.tsx
@@ -0,0 +1,644 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+import { plusCircle } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '..';
+import Tooltip from '../../tooltip';
+import cleanupTooltip from '../../tooltip/test/utils';
+import { press } from '@ariakit/test';
+
+jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
+
+describe( 'Button', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a button element with only one class', () => {
+			render( <Button /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'components-button' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-pressed' );
+			expect( button ).toBeEnabled();
+			expect( button ).not.toHaveAttribute( 'aria-disabled' );
+			expect( button ).toHaveAttribute( 'type', 'button' );
+		} );
+
+		it( 'should render a button element with is-primary class', () => {
+			render( <Button variant="primary" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-primary' );
+		} );
+
+		it( 'should render a button element with is-secondary and is-small class', () => {
+			render( <Button variant="secondary" size="small" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).toHaveClass( 'is-small' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+		} );
+
+		it( 'should render a button element with is-tertiary class', () => {
+			render( <Button variant="tertiary" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-large' );
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).toHaveClass( 'is-tertiary' );
+		} );
+
+		it( 'should render a button element with is-link class', () => {
+			render( <Button variant="link" /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).not.toHaveClass( 'is-primary' );
+			expect( button ).not.toHaveClass( 'is-secondary' );
+			expect( button ).not.toHaveClass( 'is-tertiary' );
+			expect( button ).toHaveClass( 'is-link' );
+		} );
+
+		it( 'should render a button element with has-text when children are passed', async () => {
+			render( <Button icon={ plusCircle }>Children</Button> );
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
+		} );
+
+		it( 'should render a button element without has-text when children are not passed', () => {
+			render( <Button icon={ plusCircle }></Button> );
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'has-text'
+			);
+		} );
+
+		it( 'should render a button element without has-text when children are empty fragment', () => {
+			render(
+				<Button icon={ plusCircle }>
+					<></>
+				</Button>
+			);
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'has-text'
+			);
+		} );
+
+		it( 'should render a button element without has-text when a button wrapped in Tooltip', () => {
+			render(
+				<Tooltip text="Help text">
+					<Button icon={ plusCircle } />
+				</Tooltip>
+			);
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'has-text'
+			);
+		} );
+
+		it( 'should render correctly as a tooltip anchor', async () => {
+			render(
+				<>
+					<Tooltip text="Tooltip text">
+						<Button icon={ plusCircle } label="Tooltip anchor" />
+					</Tooltip>
+					<Button>Focus me</Button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			await press.Tab();
+
+			expect( anchor ).toHaveFocus();
+
+			const tooltip = await screen.findByRole( 'tooltip', {
+				name: 'Tooltip text',
+			} );
+
+			expect( tooltip ).toBeVisible();
+
+			await press.Tab();
+
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Tooltip text',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render correctly as a tooltip anchor, ignoring its internal tooltip in favour of the external tooltip', async () => {
+			render(
+				<>
+					<Tooltip text="Tooltip text">
+						<Button icon={ plusCircle } label="Button label" />
+					</Tooltip>
+					<Button>Focus me</Button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Button label',
+			} );
+
+			await press.Tab();
+
+			expect( anchor ).toHaveFocus();
+
+			const tooltip = await screen.findByRole( 'tooltip', {
+				name: 'Tooltip text',
+			} );
+
+			expect( tooltip ).toBeVisible();
+			// Check that the tooltip that would be normally rendered internally by
+			// the `Button` component is ignored, because of an outer tooltip.
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Button label',
+				} )
+			).not.toBeInTheDocument();
+
+			await press.Tab();
+
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Tooltip text',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not trash the rendered HTML elements when toggling between showing and not showing a tooltip', async () => {
+			const { rerender } = render(
+				<Button label="Button label">Test button</Button>
+			);
+
+			const button = screen.getByRole( 'button', {
+				name: 'Button label',
+			} );
+
+			expect( button ).toBeVisible();
+
+			await press.Tab();
+
+			expect( button ).toHaveFocus();
+
+			// Re-render the button, but this time change the settings so that it
+			// shows a tooltip.
+			rerender(
+				<Button label="Button label" showTooltip>
+					Test button
+				</Button>
+			);
+
+			// The same button element that we referenced before should still be
+			// in the document and have focus.
+			expect( button ).toHaveFocus();
+
+			// Re-render the button, but stop showing a tooltip.
+			rerender( <Button label="Button label">Test button</Button> );
+
+			// The same button element that we referenced before should still be
+			// in the document and have focus.
+			expect( button ).toHaveFocus();
+		} );
+
+		it( 'should add a disabled prop to the button', () => {
+			// eslint-disable-next-line no-restricted-syntax
+			render( <Button disabled /> );
+
+			expect( screen.getByRole( 'button' ) ).toBeDisabled();
+		} );
+
+		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
+			render( <Button disabled accessibleWhenDisabled /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toBeEnabled();
+			expect( button ).toHaveAttribute( 'aria-disabled' );
+		} );
+
+		it( 'should not pass the prop target into the element', () => {
+			// @ts-expect-error - `target` requires `href`
+			render( <Button target="_blank" /> );
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'target'
+			);
+		} );
+
+		it( 'should render with an additional className', () => {
+			render( <Button className="gutenberg" /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'gutenberg' );
+		} );
+
+		it( 'should pass additional props to the element', () => {
+			render( <Button type="submit" /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'type',
+				'submit'
+			);
+		} );
+
+		it( 'should render an icon button', () => {
+			render( <Button icon={ plusCircle } /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toHaveClass( 'has-icon' );
+			expect( button ).not.toHaveAttribute( 'aria-label' );
+		} );
+
+		it( 'should render a Dashicon component matching the wordpress icon', () => {
+			render( <Button icon={ plusCircle } /> );
+
+			expect( screen.getByRole( 'button' ) ).toContainElement(
+				screen.getByTestId( 'test-icon' )
+			);
+		} );
+
+		it( 'should render child elements and icon', () => {
+			render(
+				<Button
+					icon={ plusCircle }
+					children={ <p className="test">Test</p> }
+				/>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toContainElement(
+				screen.getByTestId( 'test-icon' )
+			);
+
+			const paragraph = screen.getByText( 'Test' );
+			expect( paragraph ).toBeVisible();
+			expect( paragraph ).toHaveClass( 'test' );
+		} );
+
+		it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
+			render( <Button icon={ plusCircle } label="WordPress" /> );
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
+		} );
+
+		it( 'should support explicit aria-label override', () => {
+			render( <Button aria-label="Custom" /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-label',
+				'Custom'
+			);
+		} );
+
+		it( 'should support adding aria-describedby text', () => {
+			render( <Button description="Description text" /> );
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
+		} );
+
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
+			render(
+				<Button
+					description="Description text"
+					label="Label"
+					icon={ plusCircle }
+				/>
+			);
+
+			expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.getByText( 'Label' ) ).toBeVisible();
+
+			await cleanupTooltip();
+		} );
+
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', async () => {
+			render(
+				<Button
+					label="Label"
+					description="Description text"
+					icon={ plusCircle }
+					showTooltip
+				>
+					Children
+				</Button>
+			);
+
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Description text',
+				} )
+			).toBeVisible();
+
+			await press.Tab();
+
+			expect(
+				screen.getByRole( 'tooltip', {
+					name: 'Description text',
+				} )
+			).toBeVisible();
+
+			await cleanupTooltip();
+		} );
+
+		it( 'should allow tooltip disable', async () => {
+			render(
+				<Button
+					icon={ plusCircle }
+					label="WordPress"
+					showTooltip={ false }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: 'WordPress' } )
+			).toHaveAttribute( 'aria-label', 'WordPress' );
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should show the tooltip for empty children', async () => {
+			render(
+				<Button icon={ plusCircle } label="WordPress" children={ [] } />
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
+
+			await cleanupTooltip();
+		} );
+
+		it( 'should not show the tooltip when icon and children defined', async () => {
+			render(
+				<Button icon={ plusCircle } label="WordPress">
+					Children
+				</Button>
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should force showing the tooltip even if icon and children defined', async () => {
+			render(
+				<Button icon={ plusCircle } label="WordPress" showTooltip>
+					Children
+				</Button>
+			);
+
+			expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
+
+			// Move focus to the button
+			await press.Tab();
+
+			expect( screen.getByText( 'WordPress' ) ).toBeVisible();
+
+			await cleanupTooltip();
+		} );
+
+		describe( 'using `aria-pressed` prop', () => {
+			it( 'should render a button element with is-pressed when `true`', () => {
+				render( <Button aria-pressed /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element with is-pressed when `"true"`', () => {
+				render( <Button aria-pressed="true" /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element with is-pressed/is-pressed-mixed when `"mixed"`', () => {
+				render( <Button aria-pressed="mixed" /> );
+
+				expect( screen.getByRole( 'button' ) ).toHaveClass(
+					'is-pressed is-pressed-mixed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `undefined`', () => {
+				render( <Button aria-pressed={ undefined } /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `false`', () => {
+				render( <Button aria-pressed={ false } /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+
+			it( 'should render a button element without is-pressed when `"false"`', () => {
+				render( <Button aria-pressed="false" /> );
+
+				expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+					'is-pressed'
+				);
+			} );
+		} );
+	} );
+
+	describe( 'with href property', () => {
+		it( 'should render a link instead of a button with href prop', () => {
+			render( <Button href="https://wordpress.org/" /> );
+
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'href',
+				'https://wordpress.org/'
+			);
+		} );
+
+		it( 'should allow for the passing of the target prop when a link is created', () => {
+			render( <Button href="https://wordpress.org/" target="_blank" /> );
+
+			expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+				'target',
+				'_blank'
+			);
+		} );
+
+		it( 'should become a button again when disabled is supplied', () => {
+			// @ts-expect-error - a button should not have `href`
+			// eslint-disable-next-line no-restricted-syntax
+			render( <Button href="https://wordpress.org/" disabled /> );
+
+			expect( screen.getByRole( 'button' ) ).toBeVisible();
+		} );
+
+		it( 'should become a button again when disabled is supplied, even with `accessibleWhenDisabled`', () => {
+			render(
+				<Button
+					// @ts-expect-error - a button should not have `href`
+					// eslint-disable-next-line no-restricted-syntax
+					href="https://wordpress.org/"
+					disabled
+					accessibleWhenDisabled
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'ref forwarding', () => {
+		it( 'should enable access to DOM element', () => {
+			const ref = createRef();
+
+			render( <Button ref={ ref } /> );
+
+			expect( ref.current ).toBe( screen.getByRole( 'button' ) );
+		} );
+	} );
+
+	describe( 'deprecated props', () => {
+		it( 'should not break when the legacy isPrimary prop is passed', () => {
+			render( <Button isPrimary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-primary' );
+		} );
+
+		it( 'should not break when the legacy isSecondary prop is passed', () => {
+			render( <Button isSecondary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
+		} );
+
+		it( 'should not break when the legacy isTertiary prop is passed', () => {
+			render( <Button isTertiary /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
+		} );
+
+		it( 'should not break when the legacy isLink prop is passed', () => {
+			render( <Button isLink /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-link' );
+		} );
+
+		it( 'should warn when the isDefault prop is passed', () => {
+			render( <Button isDefault /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass(
+				'is-secondary'
+			);
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'should not break when the legacy isSmall prop is passed', () => {
+			render( <Button isSmall /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
+
+		it( 'should have the is-small class when small class prop is passed', () => {
+			render( <Button size="small" /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
+
+		it( 'should prioritize the `size` prop over `isSmall`', () => {
+			render( <Button size="compact" isSmall /> );
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'is-small'
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
+		} );
+
+		it( 'should not break when the legacy isPressed prop is passed', () => {
+			render( <Button isPressed /> );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-pressed',
+				'true'
+			);
+		} );
+
+		it( 'should prioritize the `aria-pressed` prop over `isPressed`', () => {
+			render( <Button isPressed aria-pressed="mixed" /> );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'aria-pressed',
+				'mixed'
+			);
+		} );
+
+		it( 'should not break when the legacy __experimentalIsFocusable prop is passed', () => {
+			// eslint-disable-next-line no-restricted-syntax
+			render( <Button disabled __experimentalIsFocusable /> );
+			const button = screen.getByRole( 'button' );
+
+			expect( button ).toBeEnabled();
+			expect( button ).toHaveAttribute( 'aria-disabled' );
+		} );
+	} );
+
+	describe( 'static typing', () => {
+		<>
+			<Button href="foo" />
+			{ /* @ts-expect-error - `target` requires `href` */ }
+			<Button target="foo" />
+
+			{ /* eslint-disable no-restricted-syntax */ }
+			{ /* @ts-expect-error - `disabled` is only for buttons */ }
+			<Button href="foo" disabled />
+			{ /* eslint-enable no-restricted-syntax */ }
+
+			<Button href="foo" type="image/png" />
+			{ /* @ts-expect-error - if button, type must be submit/reset/button */ }
+			<Button type="image/png" />
+			{ /* @ts-expect-error */ }
+			<Button type="invalidtype" />
+			{ /* @ts-expect-error */ }
+			<Button disabled accessibleWhenDisabled href="foo" />
+		</>;
+	} );
+} );
diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
new file mode 100644
index 00000000000000..7d67b721a5036d
--- /dev/null
+++ b/packages/components/src/button/types.ts
@@ -0,0 +1,217 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { Props as IconProps } from '../icon';
+import type { PopoverProps } from '../popover/types';
+import type { WordPressComponentProps } from '../context/wordpress-component';
+
+export type ButtonProps =
+	| WordPressComponentProps< ButtonAsButtonProps, 'button', false >
+	| WordPressComponentProps< ButtonAsAnchorProps, 'a', false >;
+
+export type ButtonAsButtonProps = BaseButtonProps & _ButtonProps;
+export type ButtonAsAnchorProps = BaseButtonProps & AnchorProps;
+
+type BaseButtonProps = {
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability
+	 * can cause accessibility issues, by hiding their presence from screen reader users,
+	 * or by preventing focus from returning to a trigger element.
+	 *
+	 * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)
+	 * in the WAI-ARIA Authoring Practices Guide.
+	 *
+	 * @default false
+	 */
+	accessibleWhenDisabled?: boolean;
+	/**
+	 * The button's children.
+	 */
+	children?: ReactNode;
+	/**
+	 * A visually hidden accessible description for the button.
+	 */
+	description?: string;
+	/**
+	 * If provided, renders an Icon component inside the button.
+	 */
+	icon?: IconProps[ 'icon' ];
+	/**
+	 * If provided with `icon`, sets the position of icon relative to the `text`.
+	 *
+	 * @default 'left'
+	 */
+	iconPosition?: 'left' | 'right';
+	/**
+	 * If provided with `icon`, sets the icon size.
+	 * Please refer to the Icon component for more details regarding
+	 * the default value of its `size` prop.
+	 */
+	iconSize?: IconProps[ 'size' ];
+	/**
+	 * Indicates activity while a action is being performed.
+	 */
+	isBusy?: boolean;
+	/**
+	 * Renders a red text-based button style to indicate destructive behavior.
+	 */
+	isDestructive?: boolean;
+	/**
+	 * Renders a pressed button style.
+	 */
+	isPressed?: boolean;
+	/**
+	 * Sets the `aria-label` of the component, if none is provided.
+	 * Sets the Tooltip content if `showTooltip` is provided.
+	 */
+	label?: string;
+	/**
+	 * If provided with `showTooltip`, appends the Shortcut label to the tooltip content.
+	 * If an object is provided, it should contain `display` and `ariaLabel` keys.
+	 */
+	shortcut?: string | { display: string; ariaLabel: string };
+	/**
+	 * If provided, renders a Tooltip component for the button.
+	 */
+	showTooltip?: boolean;
+	/**
+	 * The size of the button.
+	 *
+	 * - `'default'`: For normal text-label buttons, unless it is a toggle button.
+	 * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+	 * - `'small'`: For icon buttons associated with more advanced or auxiliary features.
+	 *
+	 * If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact' | 'small';
+	/**
+	 * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
+	 */
+	text?: string;
+	/**
+	 * If provided with `showTooltip`, sets the position of the tooltip.
+	 * Please refer to the Tooltip component for more details regarding the defaults.
+	 */
+	tooltipPosition?: PopoverProps[ 'position' ];
+	/**
+	 * Specifies the button's style.
+	 * The accepted values are:
+	 * 'primary' (the primary button styles)
+	 * 'secondary' (the default button styles)
+	 * 'tertiary' (the text-based button styles)
+	 * 'link' (the link button styles)
+	 */
+	variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
+};
+
+type _ButtonProps = {
+	/**
+	 * Whether the button is disabled. If `true`, this will force a `button` element
+	 * to be rendered, even when an `href` is given.
+	 *
+	 * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
+	 */
+	disabled?: boolean;
+};
+
+type AnchorProps = {
+	/**
+	 * Whether the button is disabled. If `true`, this will force a `button` element
+	 * to be rendered, even when an `href` is given.
+	 *
+	 * In most cases, it is recommended to also set the `accessibleWhenDisabled` prop to `true`.
+	 */
+	disabled?: false;
+	/**
+	 * If provided, renders `a` instead of `button`.
+	 */
+	href: string;
+	/**
+	 * If provided with `href`, sets the `target` attribute to the `a`.
+	 */
+	target?: string;
+};
+
+export type DeprecatedButtonProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * @default false
+	 * @deprecated Use the `accessibleWhenDisabled` prop instead.
+	 * @ignore
+	 */
+	__experimentalIsFocusable?: boolean;
+	/**
+	 * Gives the button a default style.
+	 *
+	 * @deprecated Use the `'secondary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
+	isDefault?: boolean;
+	/**
+	 * Gives the button a link style.
+	 *
+	 * @deprecated Use the `'link'` value on the `variant` prop instead.
+	 * @ignore
+	 */
+	isLink?: boolean;
+	/**
+	 * Gives the button a primary style.
+	 *
+	 * @deprecated Use the `'primary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
+	isPrimary?: boolean;
+	/**
+	 * Gives the button a default style.
+	 *
+	 * @deprecated Use the `'secondary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
+	isSecondary?: boolean;
+	/**
+	 * Gives the button a text-based style.
+	 *
+	 * @deprecated Use the `'tertiary'` value on the `variant` prop instead.
+	 * @ignore
+	 */
+	isTertiary?: boolean;
+	/**
+	 * Decreases the size of the button.
+	 *
+	 * @deprecated Use the `'small'` value on the `size` prop instead.
+	 * @ignore
+	 */
+	isSmall?: boolean;
+	/**
+	 * A visually hidden accessible description for the button.
+	 *
+	 * @deprecated Use the `description` prop instead.
+	 * @ignore
+	 */
+	describedBy?: string;
+};
+
+export type DeprecatedIconButtonProps = {
+	labelPosition: ButtonProps[ 'tooltipPosition' ];
+	showTooltip?: boolean;
+	size: ButtonProps[ 'iconSize' ];
+	label: ButtonProps[ 'label' ];
+	tooltip: ButtonProps[ 'label' ];
+};
diff --git a/packages/components/src/card/card-body/component.tsx b/packages/components/src/card/card-body/component.tsx
index cab52cf02ad25d..44f96ec951123c 100644
--- a/packages/components/src/card/card-body/component.tsx
+++ b/packages/components/src/card/card-body/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import { useCardBody } from './hook';
diff --git a/packages/components/src/card/card-body/hook.ts b/packages/components/src/card/card-body/hook.ts
index a02a6981b54e3d..d4cefb9ed9e670 100644
--- a/packages/components/src/card/card-body/hook.ts
+++ b/packages/components/src/card/card-body/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { BodyProps } from '../types';
diff --git a/packages/components/src/card/card-divider/component.tsx b/packages/components/src/card/card-divider/component.tsx
index cdd52bffd5c99f..8716f7caa9f238 100644
--- a/packages/components/src/card/card-divider/component.tsx
+++ b/packages/components/src/card/card-divider/component.tsx
@@ -6,8 +6,10 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
-import { Divider, DividerProps } from '../../divider';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
+import type { DividerProps } from '../../divider';
+import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
 
 function UnconnectedCardDivider(
diff --git a/packages/components/src/card/card-divider/hook.ts b/packages/components/src/card/card-divider/hook.ts
index aa5fdbe08eecbb..e7eb5c92b08cbe 100644
--- a/packages/components/src/card/card-divider/hook.ts
+++ b/packages/components/src/card/card-divider/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { DividerProps } from '../../divider';
diff --git a/packages/components/src/card/card-footer/component.tsx b/packages/components/src/card/card-footer/component.tsx
index 576807444c3069..74834eb1ca72ed 100644
--- a/packages/components/src/card/card-footer/component.tsx
+++ b/packages/components/src/card/card-footer/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
 import type { FooterProps } from '../types';
diff --git a/packages/components/src/card/card-footer/hook.ts b/packages/components/src/card/card-footer/hook.ts
index 831a9c7773f778..844417848b8aee 100644
--- a/packages/components/src/card/card-footer/hook.ts
+++ b/packages/components/src/card/card-footer/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { FooterProps } from '../types';
diff --git a/packages/components/src/card/card-header/component.tsx b/packages/components/src/card/card-header/component.tsx
index a055cf0966f52e..2ba12b5ed854f5 100644
--- a/packages/components/src/card/card-header/component.tsx
+++ b/packages/components/src/card/card-header/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
 import type { HeaderProps } from '../types';
diff --git a/packages/components/src/card/card-header/hook.ts b/packages/components/src/card/card-header/hook.ts
index 9cf9387b62a265..b45d75ff5467d0 100644
--- a/packages/components/src/card/card-header/hook.ts
+++ b/packages/components/src/card/card-header/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { HeaderProps } from '../types';
diff --git a/packages/components/src/card/card-media/README.md b/packages/components/src/card/card-media/README.md
index ce3db969fec518..880a65e07ce3bb 100644
--- a/packages/components/src/card/card-media/README.md
+++ b/packages/components/src/card/card-media/README.md
@@ -1,6 +1,6 @@
 # CardMedia
 
-`CardMedia` provides a container for media elements within a [`Card`](/packages/components/src/card/card/README.md).
+`CardMedia` provides a container for full-bleed content within a [`Card`](/packages/components/src/card/card/README.md), such as images, video, or even just a background color.
 
 ## Usage
 
diff --git a/packages/components/src/card/card-media/component.tsx b/packages/components/src/card/card-media/component.tsx
index 29e6990d5fe092..36b645d98d822d 100644
--- a/packages/components/src/card/card-media/component.tsx
+++ b/packages/components/src/card/card-media/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useCardMedia } from './hook';
 import type { MediaProps } from '../types';
@@ -21,7 +22,8 @@ function UnconnectedCardMedia(
 }
 
 /**
- * `CardMedia` provides a container for media elements within a `Card`.
+ * `CardMedia` provides a container for full-bleed content within a `Card`,
+ * such as images, video, or even just a background color.
  *
  * @example
  * ```jsx
diff --git a/packages/components/src/card/card-media/hook.ts b/packages/components/src/card/card-media/hook.ts
index edbedb986a4901..b9f3a7b2edff47 100644
--- a/packages/components/src/card/card-media/hook.ts
+++ b/packages/components/src/card/card-media/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { MediaProps } from '../types';
diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md
index b640b7159c33db..33b71cb74faa83 100644
--- a/packages/components/src/card/card/README.md
+++ b/packages/components/src/card/card/README.md
@@ -20,7 +20,7 @@ function Example() {
 	return (
 		<Card>
 			<CardHeader>
-				<Heading size={ 4 }>Card Title</Heading>
+				<Heading level={ 4 }>Card Title</Heading>
 			</CardHeader>
 			<CardBody>
 				<Text>Card Content</Text>
@@ -66,7 +66,7 @@ Determines the amount of padding within the component.
 
 ### Inherited props
 
-`Card` also inherits all of the [`Surface` props](/packages/components/src/ui/surface/README.md#props).
+`Card` also inherits all of the [`Surface` props](/packages/components/src/surface/README.md#props).
 
 ## Sub-Components
 
@@ -99,14 +99,14 @@ const Example = () => (
 		<CardMedia>
 			<img src="..." />
 		</CardMedia>
-		<CardHeader>...</CardHeader>
+		<CardFooter>...</CardFooter>
 	</Card>
 );
 ```
 
 ### Context
 
-`<Card />`'s sub-components are connected to `<Card />` using [Context](https://reactjs.org/docs/context.html). Certain props like `size` and `isBorderless` are passed through to some of the sub-components.
+`<Card />`'s sub-components are connected to `<Card />` using [Context](https://react.dev/learn/passing-data-deeply-with-context). Certain props like `size` and `isBorderless` are passed through to some of the sub-components.
 
 In the following example, the `<CardBody />` will render with a size of `small`:
 
diff --git a/packages/components/src/card/card/component.tsx b/packages/components/src/card/card/component.tsx
index 57f9c6430c0c08..e459f9abb9275b 100644
--- a/packages/components/src/card/card/component.tsx
+++ b/packages/components/src/card/card/component.tsx
@@ -12,11 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	ContextSystemProvider,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, ContextSystemProvider } from '../../context';
 import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import * as styles from '../styles';
@@ -37,7 +34,7 @@ function UnconnectedCard(
 		size,
 		...otherProps
 	} = useCard( props );
-	const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;
+	const elevationBorderRadius = isRounded ? CONFIG.radiusLarge : 0;
 
 	const cx = useCx();
 
@@ -88,15 +85,15 @@ function UnconnectedCard(
  *   CardHeader,
  *   CardBody,
  *   CardFooter,
- *   Text,
- *   Heading,
+ *   __experimentalText as Text,
+ *   __experimentalHeading as Heading,
  * } from `@wordpress/components`;
  *
  * function Example() {
  *   return (
  *     <Card>
  *       <CardHeader>
- *         <Heading size={ 4 }>Card Title</Heading>
+ *         <Heading level={ 4 }>Card Title</Heading>
  *       </CardHeader>
  *       <CardBody>
  *         <Text>Card Content</Text>
diff --git a/packages/components/src/card/card/hook.ts b/packages/components/src/card/card/hook.ts
index 57e928cb7f8592..93e313934b22a2 100644
--- a/packages/components/src/card/card/hook.ts
+++ b/packages/components/src/card/card/hook.ts
@@ -7,7 +7,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useSurface } from '../../surface';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx
new file mode 100644
index 00000000000000..22fb749461785f
--- /dev/null
+++ b/packages/components/src/card/stories/index.story.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	CardDivider,
+	CardMedia,
+	CardFooter,
+} from '..';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import Button from '../../button';
+
+const meta: Meta< typeof Card > = {
+	component: Card,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
+	title: 'Components/Containers/Card',
+	id: 'components-card',
+	argTypes: {
+		as: {
+			control: false,
+		},
+		children: {
+			control: false,
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+export const Default: StoryObj< typeof Card > = {
+	args: {
+		children: (
+			<>
+				<CardHeader>
+					<Heading>CardHeader</Heading>
+				</CardHeader>
+				<CardBody>
+					<Text>CardBody</Text>
+				</CardBody>
+				<CardBody>
+					<Text>CardBody (before CardDivider)</Text>
+				</CardBody>
+				<CardDivider />
+				<CardBody>
+					<Text>CardBody (after CardDivider)</Text>
+				</CardBody>
+				<CardMedia>
+					<img
+						alt="Card Media"
+						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+					/>
+				</CardMedia>
+				<CardFooter>
+					<Text>CardFooter</Text>
+					<Button variant="secondary">Action Button</Button>
+				</CardFooter>
+			</>
+		),
+	},
+};
+
+/**
+ * `CardMedia` provides a container for full-bleed content within a `Card`,
+ * such as images, video, or even just a background color. The corners will be rounded if necessary.
+ */
+export const FullBleedContent: StoryObj< typeof Card > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<CardMedia>
+				<div style={ { padding: 16, background: 'beige' } }>
+					Some full bleed content
+				</div>
+			</CardMedia>
+		),
+	},
+};
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
deleted file mode 100644
index a6de3a458cf60a..00000000000000
--- a/packages/components/src/card/stories/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import {
-	Card,
-	CardHeader,
-	CardBody,
-	CardDivider,
-	CardMedia,
-	CardFooter,
-} from '..';
-import { Text } from '../../text';
-import { Heading } from '../../heading';
-import Button from '../../button';
-
-const meta: ComponentMeta< typeof Card > = {
-	component: Card,
-	title: 'Components/Card',
-	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
-	argTypes: {
-		as: {
-			control: { type: null },
-		},
-		children: {
-			control: { type: null },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-
-export default meta;
-
-const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args }>
-		<CardHeader>
-			<Heading>CardHeader</Heading>
-		</CardHeader>
-		<CardBody>
-			<Text>CardBody</Text>
-		</CardBody>
-		<CardBody>
-			<Text>CardBody (before CardDivider)</Text>
-		</CardBody>
-		<CardDivider />
-		<CardBody>
-			<Text>CardBody (after CardDivider)</Text>
-		</CardBody>
-		<CardMedia>
-			<img
-				alt="Card Media"
-				src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-			/>
-		</CardMedia>
-		<CardFooter>
-			<Text>CardFooter</Text>
-			<Button variant="secondary">Action Button</Button>
-		</CardFooter>
-	</Card>
-);
-
-export const Default: ComponentStory< typeof Card > = Template.bind( {} );
diff --git a/packages/components/src/card/styles.ts b/packages/components/src/card/styles.ts
index fa70b19054e2fc..df0fe4eb7ed720 100644
--- a/packages/components/src/card/styles.ts
+++ b/packages/components/src/card/styles.ts
@@ -12,7 +12,7 @@ import { COLORS, CONFIG } from '../utils';
 // (as opposed to the `border` property), the value of the border radius needs
 // to be adjusted by removing 1px (this is because the `box-shadow` renders
 // as an "outer radius").
-const adjustedBorderRadius = `calc(${ CONFIG.cardBorderRadius } - 1px)`;
+const adjustedBorderRadius = `calc(${ CONFIG.radiusLarge } - 1px)`;
 
 export const Card = css`
 	box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor };
diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap
index b86714d86636a8..e9073edba3e3e4 100644
--- a/packages/components/src/card/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap
@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
+-     class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-scrollable components-card__body components-card-body css-26nv7r-PolymorphicDiv-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+     class="components-card__body components-card-body css-1nhkags-View-Body-borderRadius-medium-shady e19lxcc00"
+-     class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++     class="components-card__body components-card-body css-1j7lja1-PolymorphicDiv-Body-borderRadius-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-19jxwll-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-19sc0cg-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-14budie-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-120suhd-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__footer components-card-footer css-ys33kb-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
+-     class="components-flex components-card__footer components-card-footer css-19sc0cg-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__footer components-card-footer css-2io175-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-medium e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+     class="components-flex components-card__header components-card-header css-1qktnah-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
+-     class="components-flex components-card__header components-card-header css-1qwshfy-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++     class="components-flex components-card__header components-card-header css-1bzc8bz-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium-shady e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -93,19 +93,19 @@ Snapshot Diff:
 @@ -6,18 +6,18 @@
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-1qwshfy-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1t2zg3y-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+-         class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
@@ -122,7 +122,7 @@ Snapshot Diff:
   Array [
     Object {
       "background-color": "#fff",
--     "border-radius": "calc(2px - 1px)",
+-     "border-radius": "calc(8px - 1px)",
       "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)",
       "color": "#1e1e1e",
       "outline": "none",
@@ -138,27 +138,27 @@ Snapshot Diff:
 @@ -6,25 +6,25 @@
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-ubn8f6-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1t1rswf-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
+-         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-12jqy32-PolymorphicDiv-Body-borderRadius-medium e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-jsws2e-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-167csgt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-1kcgqsk-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -174,33 +174,33 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
-+     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded e19lxcc00"
+-     class="components-surface components-card css-1hs39fv-PolymorphicDiv-Surface-getBorders-primary-Card-boxShadowless-rounded e19lxcc00"
++     class="components-surface components-card css-1c6nh8q-PolymorphicDiv-Surface-getBorders-primary-Card-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
       <div
-        class="css-mgwsf4-View-Content e19lxcc00"
+        class="css-76dw7d-PolymorphicDiv-Content e19lxcc00"
       >
         <div
--         class="components-flex components-card__header components-card-header css-ed5e1x-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__header components-card-header css-1f9ii60-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__header components-card-header css-ubn8f6-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__header components-card-header css-1t1rswf-PolymorphicDiv-Flex-base-ItemsRow-Header-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-+         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small e19lxcc00"
+-         class="components-card__body components-card-body css-e0vrqx-PolymorphicDiv-Body-borderRadius-large e19lxcc00"
++         class="components-card__body components-card-body css-hms9n9-PolymorphicDiv-Body-borderRadius-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-ide17g-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
-+         class="components-flex components-card__footer components-card-footer css-1ih54yp-View-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
+-         class="components-flex components-card__footer components-card-footer css-167csgt-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-large-borderless e19lxcc00"
++         class="components-flex components-card__footer components-card-footer css-18yn3ff-PolymorphicDiv-Flex-base-ItemsRow-Footer-borderRadius-borderColor-small e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -215,7 +215,7 @@ exports[`Card Card component should render correctly 1`] = `
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: calc(2px - 1px);
+  border-radius: calc(8px - 1px);
 }
 
 .emotion-2 {
@@ -254,13 +254,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-6 {
@@ -271,13 +271,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-10 {
@@ -306,13 +306,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-16 {
@@ -347,13 +347,13 @@ exports[`Card Card component should render correctly 1`] = `
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
+  border-top-left-radius: calc(8px - 1px);
+  border-top-right-radius: calc(8px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
+  border-bottom-left-radius: calc(8px - 1px);
+  border-bottom-right-radius: calc(8px - 1px);
 }
 
 .emotion-18 {
@@ -370,14 +370,13 @@ exports[`Card Card component should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-18 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -470,15 +469,15 @@ Snapshot Diff:
       </div>
       <div
         aria-hidden="true"
--       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-a91pvj-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-1q4cuxd-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
--       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+-       class="components-elevation css-5u83fl-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-1q4cuxd-PolymorphicDiv-Elevation-sx-Base-sx-Base-elevationClassName e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
@@ -498,7 +497,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: calc(2px - 1px);
+  border-radius: calc(8px - 1px);
 }
 
 .emotion-2 {
@@ -519,14 +518,13 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-4 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -544,14 +542,13 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
+  border-radius: 8px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-6 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
diff --git a/packages/components/src/card/test/index.tsx b/packages/components/src/card/test/index.tsx
index ee10655fae0b21..fb1c6d972aa698 100644
--- a/packages/components/src/card/test/index.tsx
+++ b/packages/components/src/card/test/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -38,27 +38,39 @@ describe( 'Card', () => {
 		} );
 
 		it( 'should remove borders when the isBorderless prop is true', () => {
-			const { rerender, container } = render(
-				<Card>Code is Poetry</Card>
+			const { rerender } = render(
+				<Card data-testid="card-wrapper">Code is Poetry</Card>
 			);
-			expect( container.firstChild ).not.toHaveStyle(
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).not.toHaveStyle(
 				'box-shadow: none'
 			);
 
-			rerender( <Card isBorderless={ true }>Code is Poetry</Card> );
-			expect( container.firstChild ).toHaveStyle( 'box-shadow: none' );
+			rerender(
+				<Card data-testid="card-wrapper" isBorderless>
+					Code is Poetry
+				</Card>
+			);
+
+			expect( screen.getByTestId( 'card-wrapper' ) ).toHaveStyle(
+				'box-shadow: none'
+			);
 		} );
 
 		it( 'should add rounded border when the isRounded prop is true', () => {
-			const { container: containerRounded } = render(
-				<Card isRounded={ true }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-rounded" isRounded>
+					Code is Poetry
+				</Card>
 			);
-			const { container: containerSquared } = render(
-				<Card isRounded={ false }>Code is Poetry</Card>
+			render(
+				<Card data-testid="card-squared" isRounded={ false }>
+					Code is Poetry
+				</Card>
 			);
 			expect(
-				containerRounded.firstElementChild
-			).toMatchStyleDiffSnapshot( containerSquared.firstElementChild );
+				screen.getByTestId( 'card-rounded' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'card-squared' ) );
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {
@@ -94,7 +106,7 @@ describe( 'Card', () => {
 		it( 'should warn when the isElevated prop is passed', () => {
 			// `isElevated` is automatically converted to `elevation="2"`
 			const { container } = render(
-				<Card isElevated={ true }>Code is Poetry</Card>
+				<Card isElevated>Code is Poetry</Card>
 			);
 			expect( container ).toMatchSnapshot();
 
@@ -103,7 +115,7 @@ describe( 'Card', () => {
 
 		it( 'should pass the isBorderless and isSize props from its context to its sub-components', () => {
 			const { container: withoutBorderLarge } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
@@ -121,14 +133,14 @@ describe( 'Card', () => {
 
 		it( 'should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component', () => {
 			const { container: withoutBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader>Header</CardHeader>
 					<CardBody>Body</CardBody>
 					<CardFooter>Footer</CardFooter>
 				</Card>
 			);
 			const { container: withBorder } = render(
-				<Card isBorderless={ true } size="large">
+				<Card isBorderless size="large">
 					<CardHeader isBorderless={ false } size="small">
 						Header
 					</CardHeader>
@@ -165,7 +177,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardHeader>Header</CardHeader> );
 				const { container: containerShady } = render(
-					<CardHeader isShady={ true }>Header</CardHeader>
+					<CardHeader isShady>Header</CardHeader>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -175,7 +187,7 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardFooter>Footer</CardFooter> );
 				const { container: containerShady } = render(
-					<CardFooter isShady={ true }>Footer</CardFooter>
+					<CardFooter isShady>Footer</CardFooter>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
@@ -193,14 +205,14 @@ describe( 'Card', () => {
 			it( 'should render with a darker background color when isShady is true', () => {
 				const { container } = render( <CardBody>Body</CardBody> );
 				const { container: containerShady } = render(
-					<CardBody isShady={ true }>Body</CardBody>
+					<CardBody isShady>Body</CardBody>
 				);
 				expect( container ).toMatchDiffSnapshot( containerShady );
 			} );
 
 			it( 'should allow scrolling content with the scrollable prop is true', () => {
 				const { container: containerScrollable } = render(
-					<CardBody isScrollable={ true }>Body</CardBody>
+					<CardBody isScrollable>Body</CardBody>
 				);
 				const { container } = render( <CardBody>Body</CardBody> );
 				expect( container ).toMatchDiffSnapshot( containerScrollable );
diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
index 4bc19ed9bfe5f0..90c33a1fab78d5 100644
--- a/packages/components/src/checkbox-control/README.md
+++ b/packages/components/src/checkbox-control/README.md
@@ -2,15 +2,7 @@
 
 Checkboxes allow the user to select one or more items from a set.
 
-![](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
-
-Selected and unselected checkboxes
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![Selected and unselected checkboxes](https://make.wordpress.org/design/files/2019/02/CheckboxControl.png)
 
 ## Design guidelines
 
@@ -56,13 +48,14 @@ If only a few child checkboxes are checked, the parent checkbox becomes a mixed
 Render an is author checkbox:
 
 ```jsx
+import { useState } from 'react';
 import { CheckboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyCheckboxControl = () => {
 	const [ isChecked, setChecked ] = useState( true );
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label="Is author"
 			help="Is the user a author or not?"
 			checked={ isChecked }
@@ -85,7 +78,7 @@ If no prop is passed an empty label is rendered.
 
 -   Required: No
 
-#### `help`: `string|WPElement`
+#### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
 
@@ -110,6 +103,13 @@ If indeterminate is true the state of the checkbox will be indeterminate.
 
 -   Required: No
 
+#### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To select one option from a set, and you want to show all the available options at once, use the `RadioControl` component.
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 0b6bd68d7ad88e..a24d1abaab45a7 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -16,8 +16,9 @@ import { Icon, check, reset } from '@wordpress/icons';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { HStack } from '../h-stack';
 import type { CheckboxControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * Checkboxes allow the user to select one or more items from a set.
@@ -30,6 +31,7 @@ import type { WordPressComponentProps } from '../ui/context';
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <CheckboxControl
+ *       __nextHasNoMarginBottom
  *       label="Is author"
  *       help="Is the user a author or not?"
  *       checked={ isChecked }
@@ -50,6 +52,7 @@ export function CheckboxControl(
 		checked,
 		indeterminate,
 		help,
+		id: idProp,
 		onChange,
 		...additionalProps
 	} = props;
@@ -81,52 +84,66 @@ export function CheckboxControl(
 		},
 		[ checked, indeterminate ]
 	);
-	const instanceId = useInstanceId( CheckboxControl );
-	const id = `inspector-checkbox-control-${ instanceId }`;
+	const id = useInstanceId(
+		CheckboxControl,
+		'inspector-checkbox-control',
+		idProp
+	);
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.checked );
 
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="CheckboxControl"
 			label={ heading }
 			id={ id }
-			help={ help }
-			className={ classnames( 'components-checkbox-control', className ) }
+			help={
+				help && (
+					<span className="components-checkbox-control__help">
+						{ help }
+					</span>
+				)
+			}
+			className={ clsx( 'components-checkbox-control', className ) }
 		>
-			<span className="components-checkbox-control__input-container">
-				<input
-					ref={ ref }
-					id={ id }
-					className="components-checkbox-control__input"
-					type="checkbox"
-					value="1"
-					onChange={ onChangeValue }
-					checked={ checked }
-					aria-describedby={ !! help ? id + '__help' : undefined }
-					{ ...additionalProps }
-				/>
-				{ showIndeterminateIcon ? (
-					<Icon
-						icon={ reset }
-						className="components-checkbox-control__indeterminate"
-						role="presentation"
-					/>
-				) : null }
-				{ showCheckedIcon ? (
-					<Icon
-						icon={ check }
-						className="components-checkbox-control__checked"
-						role="presentation"
+			<HStack spacing={ 0 } justify="start" alignment="top">
+				<span className="components-checkbox-control__input-container">
+					<input
+						ref={ ref }
+						id={ id }
+						className="components-checkbox-control__input"
+						type="checkbox"
+						value="1"
+						onChange={ onChangeValue }
+						checked={ checked }
+						aria-describedby={ !! help ? id + '__help' : undefined }
+						{ ...additionalProps }
 					/>
-				) : null }
-			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+					{ showIndeterminateIcon ? (
+						<Icon
+							icon={ reset }
+							className="components-checkbox-control__indeterminate"
+							role="presentation"
+						/>
+					) : null }
+					{ showCheckedIcon ? (
+						<Icon
+							icon={ check }
+							className="components-checkbox-control__checked"
+							role="presentation"
+						/>
+					) : null }
+				</span>
+				{ label && (
+					<label
+						className="components-checkbox-control__label"
+						htmlFor={ id }
+					>
+						{ label }
+					</label>
+				) }
+			</HStack>
 		</BaseControl>
 	);
 }
diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..a2936654c8629a
--- /dev/null
+++ b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CheckboxControl from '..';
+import { VStack } from '../../v-stack';
+import { HStack } from '../../h-stack';
+
+const meta: Meta< typeof CheckboxControl > = {
+	component: CheckboxControl,
+	title: 'Components/Selection & Input/Common/CheckboxControl',
+	id: 'components-checkboxcontrol',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		checked: {
+			control: false,
+		},
+		help: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+			exclude: [ 'heading' ],
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: StoryFn< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<CheckboxControl
+			{ ...args }
+			checked={ isChecked }
+			onChange={ ( v ) => {
+				setChecked( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
+	{}
+);
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Is author',
+	help: 'Is the user an author or not?',
+};
+
+export const Indeterminate: StoryFn< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ fruits, setFruits ] = useState( { apple: false, orange: false } );
+
+	const isAllChecked = Object.values( fruits ).every( Boolean );
+	const isIndeterminate =
+		Object.values( fruits ).some( Boolean ) && ! isAllChecked;
+
+	return (
+		<VStack>
+			<CheckboxControl
+				{ ...args }
+				checked={ isAllChecked }
+				indeterminate={ isIndeterminate }
+				onChange={ ( v ) => {
+					setFruits( {
+						apple: v,
+						orange: v,
+					} );
+					onChange( v );
+				} }
+			/>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				label="Apple"
+				checked={ fruits.apple }
+				onChange={ ( apple ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						apple,
+					} ) )
+				}
+			/>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				label="Orange"
+				checked={ fruits.orange }
+				onChange={ ( orange ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						orange,
+					} ) )
+				}
+			/>
+		</VStack>
+	);
+};
+Indeterminate.args = {
+	label: 'Select all',
+	__nextHasNoMarginBottom: true,
+};
+
+/**
+ * For more complex designs, a custom `<label>` element can be associated with the checkbox
+ * by leaving the `label` prop undefined and using the `id` and `htmlFor` props instead.
+ * Because the label element also functions as a click target for the checkbox, [do not
+ * place interactive elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#interactive_content)
+ * such as links or buttons inside the `<label>` node.
+ *
+ * Similarly, a custom description can be added by omitting the `help` prop
+ * and using the `aria-describedby` prop instead.
+ */
+export const WithCustomLabel: StoryFn< typeof CheckboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<HStack justify="flex-start" alignment="top" spacing={ 0 }>
+			<CheckboxControl
+				{ ...args }
+				checked={ isChecked }
+				onChange={ ( v ) => {
+					setChecked( v );
+					onChange( v );
+				} }
+				// Disable reason: For simplicity of the code snippet.
+				// eslint-disable-next-line no-restricted-syntax
+				id="my-checkbox-with-custom-label"
+				aria-describedby="my-custom-description"
+			/>
+			<VStack>
+				<label htmlFor="my-checkbox-with-custom-label">
+					My custom label
+				</label>
+				{ /* eslint-disable-next-line no-restricted-syntax */ }
+				<div id="my-custom-description" style={ { fontSize: 13 } }>
+					A custom description.
+				</div>
+			</VStack>
+		</HStack>
+	);
+};
+WithCustomLabel.args = {
+	__nextHasNoMarginBottom: true,
+};
diff --git a/packages/components/src/checkbox-control/stories/index.tsx b/packages/components/src/checkbox-control/stories/index.tsx
deleted file mode 100644
index 9054e50dc2ffc3..00000000000000
--- a/packages/components/src/checkbox-control/stories/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CheckboxControl from '..';
-import { VStack } from '../../v-stack';
-
-const meta: ComponentMeta< typeof CheckboxControl > = {
-	component: CheckboxControl,
-	title: 'Components/CheckboxControl',
-	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-		checked: {
-			control: { type: null },
-		},
-		help: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-			exclude: [ 'heading' ],
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ isChecked, setChecked ] = useState( true );
-
-	return (
-		<CheckboxControl
-			{ ...args }
-			checked={ isChecked }
-			onChange={ ( v ) => {
-				setChecked( v );
-				onChange( v );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof CheckboxControl > =
-	DefaultTemplate.bind( {} );
-Default.args = {
-	label: 'Is author',
-	help: 'Is the user an author or not?',
-};
-
-export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ fruits, setFruits ] = useState( { apple: false, orange: false } );
-
-	const isAllChecked = Object.values( fruits ).every( Boolean );
-	const isIndeterminate =
-		Object.values( fruits ).some( Boolean ) && ! isAllChecked;
-
-	return (
-		<VStack>
-			<CheckboxControl
-				{ ...args }
-				checked={ isAllChecked }
-				indeterminate={ isIndeterminate }
-				onChange={ ( v ) => {
-					setFruits( {
-						apple: v,
-						orange: v,
-					} );
-					onChange( v );
-				} }
-			/>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label="Apple"
-				checked={ fruits.apple }
-				onChange={ ( apple ) =>
-					setFruits( ( prevState ) => ( {
-						...prevState,
-						apple,
-					} ) )
-				}
-			/>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label="Orange"
-				checked={ fruits.orange }
-				onChange={ ( orange ) =>
-					setFruits( ( prevState ) => ( {
-						...prevState,
-						orange,
-					} ) )
-				}
-			/>
-		</VStack>
-	);
-};
-Indeterminate.args = {
-	label: 'Select all',
-	__nextHasNoMarginBottom: true,
-};
diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
index e983ae80ad891f..25394ba645ee80 100644
--- a/packages/components/src/checkbox-control/style.scss
+++ b/packages/components/src/checkbox-control/style.scss
@@ -1,5 +1,19 @@
-$checkbox-input-size: 20px;
-$checkbox-input-size-sm: 24px; // Width & height for small viewports.
+.components-checkbox-control {
+	// Careful, these CSS vars have experimental overrides in Data Views (packages/dataviews/src/style.scss).
+	--checkbox-input-size: 24px; // Width & height for small viewports.
+
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	--checkbox-input-margin: #{$grid-unit-10};
+}
+
+.components-checkbox-control__label {
+	// Ensure label is aligned with checkbox along X axis
+	line-height: var(--checkbox-input-size);
+	cursor: pointer;
+}
 
 .components-checkbox-control__input[type="checkbox"] {
 	@include checkbox-control;
@@ -14,23 +28,15 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	padding: 0 !important;
 	text-align: center;
 	vertical-align: top;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		height: $checkbox-input-size;
-		width: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	height: var(--checkbox-input-size);
 
 	appearance: none;
 	transition: 0.1s border-color ease-in-out;
 	@include reduce-motion("transition");
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
-
-		// Only visible in Windows High Contrast mode.
-		outline: 2px solid transparent;
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
 	}
 
 	&:checked,
@@ -52,31 +58,35 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: 12px;
+	margin-right: var(--checkbox-input-margin);
 	vertical-align: middle;
-	width: $checkbox-input-size-sm;
-	height: $checkbox-input-size-sm;
-
-	@include break-small() {
-		width: $checkbox-input-size;
-		height: $checkbox-input-size;
-	}
+	width: var(--checkbox-input-size);
+	aspect-ratio: 1;
+	line-height: 1; // maintains proper height even with WP common.css
+	flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
+	--checkmark-size: var(--checkbox-input-size);
+
 	fill: $white;
 	cursor: pointer;
 	position: absolute;
-	left: 0;
-	top: 0;
-	width: $button-size-small;
-	height: $button-size-small;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: var(--checkmark-size);
+	height: var(--checkmark-size);
+	user-select: none;
+	pointer-events: none;
 
 	@include break-small() {
-		left: -2px;
-		top: -2px;
+		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
-	user-select: none;
-	pointer-events: none;
+}
+
+.components-checkbox-control__help {
+	display: inline-block;
+	margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
 }
diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index 408f18d8c7e770..6a4d345cc445bf 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -5,37 +5,33 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
-        <span
-          class="components-checkbox-control__input-container"
-        >
-          <input
-            class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
-            type="checkbox"
-            value="1"
-+         />
-+         <svg
-+           aria-hidden="true"
-+           class="components-checkbox-control__indeterminate"
-+           focusable="false"
-+           height="24"
-+           role="presentation"
-+           viewBox="0 0 24 24"
-+           width="24"
-+           xmlns="http://www.w3.org/2000/svg"
-+         >
-+           <path
-+             d="M7 11.5h10V13H7z"
-            />
-+         </svg>
-        </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
+@@ -13,14 +13,28 @@
+          <span
+            class="components-checkbox-control__input-container"
+          >
+            <input
+              class="components-checkbox-control__input"
+-             id="inspector-checkbox-control-6"
++             id="inspector-checkbox-control-7"
+              type="checkbox"
+              value="1"
++           />
++           <svg
++             aria-hidden="true"
++             class="components-checkbox-control__indeterminate"
++             focusable="false"
++             height="24"
++             role="presentation"
++             viewBox="0 0 24 24"
++             width="24"
++             xmlns="http://www.w3.org/2000/svg"
++           >
++             <path
++               d="M7 11.5h10V13H7z"
+              />
++           </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 2c603105dbb70c..547f479184e862 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -20,13 +20,20 @@ const noop = () => {};
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
-	return <BaseCheckboxControl onChange={ noop } { ...props } />;
+	return (
+		<BaseCheckboxControl
+			onChange={ noop }
+			{ ...props }
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
 	const [ isChecked, setChecked ] = useState( false );
 	return (
 		<BaseCheckboxControl
+			__nextHasNoMarginBottom
 			checked={ isChecked }
 			onChange={ ( value ) => {
 				setChecked( value );
@@ -60,6 +67,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is not set', () => {
+			render( <CheckboxControl /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );
@@ -79,13 +93,16 @@ describe( 'CheckboxControl', () => {
 				containerIndeterminate
 			);
 		} );
+
+		it( 'should associate the `help` text accessibly', () => {
+			render( <CheckboxControl help="Help text" /> );
+			expect( getInput() ).toHaveAccessibleDescription( 'Help text' );
+		} );
 	} );
 
 	describe( 'Value', () => {
 		it( 'should flip the checked property when clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			let state = false;
 			const setState = jest.fn(
diff --git a/packages/components/src/circular-option-picker/README.md b/packages/components/src/circular-option-picker/README.md
new file mode 100644
index 00000000000000..1dc230686cae17
--- /dev/null
+++ b/packages/components/src/circular-option-picker/README.md
@@ -0,0 +1,155 @@
+# `CircularOptionPicker`
+
+<div class="callout callout-alert">
+This component is not exported, and therefore can only be used internally to the `@wordpress/components` package.
+</div>
+
+`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+
+## Usage
+
+```jsx
+import { useState } from 'react';
+import { CircularOptionPicker } from '../circular-option-picker';
+
+const Example = () => {
+	const [ currentColor, setCurrentColor ] = useState();
+	const colors = [
+		{ color: '#f00', name: 'Red' },
+		{ color: '#0f0', name: 'Green' },
+		{ color: '#00f', name: 'Blue' },
+	];
+	const colorOptions = (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ index === currentColor }
+						onClick={ () => setCurrentColor( index ) }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+	return (
+		<CircularOptionPicker
+				options={ colorOptions }
+				actions={
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => setCurrentColor( undefined ) }
+					>
+						{ 'Clear' }
+					</CircularOptionPicker.ButtonAction>
+				}
+			/>
+	);
+};
+```
+
+## Props
+
+### `className`: `string`
+
+A CSS class to apply to the wrapper element.
+
+- Required: No
+
+### `actions`: `ReactNode`
+
+The action(s) to be rendered after the options, such as a 'clear' button as seen in `ColorPalette`.
+
+Usually a `CircularOptionPicker.ButtonAction` or `CircularOptionPicker.DropdownLinkAction` component.
+
+- Required: No
+
+### `options`: `ReactNode`
+
+The options to be rendered, such as color swatches.
+
+Usually a `CircularOptionPicker.Option` component.
+
+- Required: No
+
+### `children`: `ReactNode`
+
+The child elements.
+
+- Required: No
+
+### `asButtons`: `boolean`
+
+Whether the control should present as a set of buttons, each with its own tab stop.
+
+- Required: No
+- Default: `false`
+
+### `loop`: `boolean`
+
+Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+
+- Required: No
+- Default: `true`
+
+## Subcomponents
+
+### `CircularOptionPicker.ButtonAction`
+
+A `ButtonAction` is an action that is rendered as a button alongside the options themselves.
+
+A common use case is a 'clear' button to deselect the currently selected option.
+
+#### Props
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `Button` component.
+
+- Required: No
+
+##### `children`: `ReactNode`
+
+The button's children.
+
+- Required: No
+
+##### Inherited props
+
+`CircularOptionPicker.ButtonAction` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+### `CircularOptionPicker.DropdownLinkAction`
+
+`CircularOptionPicker.DropdownLinkAction` is an action that's hidden behind a dropdown toggle. The button is formatted as a link and rendered as an `anchor` element.
+
+#### Props
+
+##### `className`: `string`
+
+A CSS class to apply to the underlying `Dropdown` component.
+
+- Required: No
+
+##### `linkText`: `string`
+
+The text to be displayed on the button.
+
+- Required: Yes
+
+##### `dropdownProps`: `object`
+
+The props for the underlying `Dropdown` component.
+
+Inherits all of the [`Dropdown` props](/packages/components/src/dropdown/README.md#props), except for `className` and `renderToggle`.
+
+- Required: Yes
+
+##### `buttonProps`: `object`
+
+Props for the underlying `Button` component.
+
+Inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`, `target`, and `children`. 
+
+- Required: No
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
new file mode 100644
index 00000000000000..339c614e4ca45d
--- /dev/null
+++ b/packages/components/src/circular-option-picker/circular-option-picker-actions.tsx
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import Dropdown from '../dropdown';
+import type { DropdownLinkActionProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import type { ButtonAsButtonProps } from '../button/types';
+
+export function DropdownLinkAction( {
+	buttonProps,
+	className,
+	dropdownProps,
+	linkText,
+}: DropdownLinkActionProps ) {
+	return (
+		<Dropdown
+			className={ clsx(
+				'components-circular-option-picker__dropdown-link-action',
+				className
+			) }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					onClick={ onToggle }
+					variant="link"
+					{ ...buttonProps }
+				>
+					{ linkText }
+				</Button>
+			) }
+			{ ...dropdownProps }
+		/>
+	);
+}
+
+export function ButtonAction( {
+	className,
+	children,
+	...additionalProps
+}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {
+	return (
+		<Button
+			__next40pxDefaultSize
+			className={ clsx(
+				'components-circular-option-picker__clear',
+				className
+			) }
+			variant="tertiary"
+			{ ...additionalProps }
+		>
+			{ children }
+		</Button>
+	);
+}
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-context.tsx b/packages/components/src/circular-option-picker/circular-option-picker-context.tsx
new file mode 100644
index 00000000000000..cafb0b90e3017f
--- /dev/null
+++ b/packages/components/src/circular-option-picker/circular-option-picker-context.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { CircularOptionPickerContextProps } from './types';
+
+export const CircularOptionPickerContext =
+	createContext< CircularOptionPickerContextProps >( {} );
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx
new file mode 100644
index 00000000000000..a4a8da1b62b58e
--- /dev/null
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option-group.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import type { OptionGroupProps } from './types';
+
+export function OptionGroup( {
+	className,
+	options,
+	...additionalProps
+}: OptionGroupProps ) {
+	const role =
+		'aria-label' in additionalProps || 'aria-labelledby' in additionalProps
+			? 'group'
+			: undefined;
+
+	return (
+		<div
+			{ ...additionalProps }
+			role={ role }
+			className={ clsx(
+				'components-circular-option-picker__option-group',
+				'components-circular-option-picker__swatches',
+				className
+			) }
+		>
+			{ options }
+		</div>
+	);
+}
diff --git a/packages/components/src/circular-option-picker/circular-option-picker-option.tsx b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
new file mode 100644
index 00000000000000..c5b2edb260d159
--- /dev/null
+++ b/packages/components/src/circular-option-picker/circular-option-picker-option.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useContext, useEffect } from '@wordpress/element';
+import { Icon, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { CircularOptionPickerContext } from './circular-option-picker-context';
+import Button from '../button';
+import { Composite } from '../composite';
+import Tooltip from '../tooltip';
+import type { OptionProps } from './types';
+
+function UnforwardedOptionAsButton(
+	props: {
+		id?: string;
+		className?: string;
+		isPressed?: boolean;
+	},
+	forwardedRef: ForwardedRef< any >
+) {
+	const { isPressed, ...additionalProps } = props;
+	return (
+		<Button
+			{ ...additionalProps }
+			aria-pressed={ isPressed }
+			ref={ forwardedRef }
+		/>
+	);
+}
+
+const OptionAsButton = forwardRef( UnforwardedOptionAsButton );
+
+function UnforwardedOptionAsOption(
+	props: {
+		id: string;
+		className?: string;
+		isSelected?: boolean;
+	},
+	forwardedRef: ForwardedRef< any >
+) {
+	const { id, isSelected, ...additionalProps } = props;
+
+	const { setActiveId, activeId } = useContext( CircularOptionPickerContext );
+
+	useEffect( () => {
+		if ( isSelected && ! activeId ) {
+			// The setTimeout call is necessary to make sure that this update
+			// doesn't get overridden by `Composite`'s internal logic, which picks
+			// an initial active item if one is not specifically set.
+			window.setTimeout( () => setActiveId?.( id ), 0 );
+		}
+	}, [ isSelected, setActiveId, activeId, id ] );
+
+	return (
+		<Composite.Item
+			render={
+				<Button
+					{ ...additionalProps }
+					role="option"
+					aria-selected={ !! isSelected }
+					ref={ forwardedRef }
+				/>
+			}
+			id={ id }
+		/>
+	);
+}
+
+const OptionAsOption = forwardRef( UnforwardedOptionAsOption );
+
+export function Option( {
+	className,
+	isSelected,
+	selectedIconProps = {},
+	tooltipText,
+	...additionalProps
+}: OptionProps ) {
+	const { baseId, setActiveId } = useContext( CircularOptionPickerContext );
+	const id = useInstanceId(
+		Option,
+		baseId || 'components-circular-option-picker__option'
+	);
+
+	const commonProps = {
+		id,
+		className: 'components-circular-option-picker__option',
+		__next40pxDefaultSize: true,
+		...additionalProps,
+	};
+
+	const isListbox = setActiveId !== undefined;
+	const optionControl = isListbox ? (
+		<OptionAsOption { ...commonProps } isSelected={ isSelected } />
+	) : (
+		<OptionAsButton { ...commonProps } isPressed={ isSelected } />
+	);
+
+	return (
+		<div
+			className={ clsx(
+				className,
+				'components-circular-option-picker__option-wrapper'
+			) }
+		>
+			{ tooltipText ? (
+				<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>
+			) : (
+				optionControl
+			) }
+			{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }
+		</div>
+	);
+}
diff --git a/packages/components/src/circular-option-picker/circular-option-picker.tsx b/packages/components/src/circular-option-picker/circular-option-picker.tsx
new file mode 100644
index 00000000000000..adf2b386e5cbec
--- /dev/null
+++ b/packages/components/src/circular-option-picker/circular-option-picker.tsx
@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CircularOptionPickerContext } from './circular-option-picker-context';
+import { Composite } from '../composite';
+import type {
+	CircularOptionPickerProps,
+	ListboxCircularOptionPickerProps,
+	ButtonsCircularOptionPickerProps,
+} from './types';
+import { Option } from './circular-option-picker-option';
+import { OptionGroup } from './circular-option-picker-option-group';
+import {
+	ButtonAction,
+	DropdownLinkAction,
+} from './circular-option-picker-actions';
+
+/**
+ *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+ *
+ * ```jsx
+ * import { CircularOptionPicker } from '../circular-option-picker';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ currentColor, setCurrentColor ] = useState();
+ * 	const colors = [
+ * 		{ color: '#f00', name: 'Red' },
+ * 		{ color: '#0f0', name: 'Green' },
+ * 		{ color: '#00f', name: 'Blue' },
+ * 	];
+ * 	const colorOptions = (
+ * 		<>
+ * 			{ colors.map( ( { color, name }, index ) => {
+ * 				return (
+ * 					<CircularOptionPicker.Option
+ * 						key={ `${ color }-${ index }` }
+ * 						tooltipText={ name }
+ * 						style={ { backgroundColor: color, color } }
+ * 						isSelected={ index === currentColor }
+ * 						onClick={ () => setCurrentColor( index ) }
+ * 						aria-label={ name }
+ * 					/>
+ * 				);
+ * 			} ) }
+ * 		</>
+ * 	);
+ * 	return (
+ * 		<CircularOptionPicker
+ * 				options={ colorOptions }
+ * 				actions={
+ * 					<CircularOptionPicker.ButtonAction
+ * 						onClick={ () => setCurrentColor( undefined ) }
+ * 					>
+ * 						{ 'Clear' }
+ * 					</CircularOptionPicker.ButtonAction>
+ * 				}
+ * 			/>
+ * 	);
+ * };
+ * ```
+ */
+
+function ListboxCircularOptionPicker(
+	props: ListboxCircularOptionPickerProps
+) {
+	const {
+		actions,
+		options,
+		baseId,
+		className,
+		loop = true,
+		children,
+		...additionalProps
+	} = props;
+
+	const [ activeId, setActiveId ] = useState< string | null | undefined >(
+		undefined
+	);
+
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+			activeId,
+			setActiveId,
+		} ),
+		[ baseId, activeId, setActiveId ]
+	);
+
+	return (
+		<div className={ className }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
+				<Composite
+					{ ...additionalProps }
+					id={ baseId }
+					focusLoop={ loop }
+					rtl={ isRTL() }
+					role="listbox"
+					activeId={ activeId }
+					setActiveId={ setActiveId }
+				>
+					{ options }
+				</Composite>
+				{ children }
+				{ actions }
+			</CircularOptionPickerContext.Provider>
+		</div>
+	);
+}
+
+function ButtonsCircularOptionPicker(
+	props: ButtonsCircularOptionPickerProps
+) {
+	const { actions, options, children, baseId, ...additionalProps } = props;
+
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+		} ),
+		[ baseId ]
+	);
+
+	return (
+		<div { ...additionalProps } id={ baseId }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
+				{ options }
+				{ children }
+				{ actions }
+			</CircularOptionPickerContext.Provider>
+		</div>
+	);
+}
+
+function CircularOptionPicker( props: CircularOptionPickerProps ) {
+	const {
+		asButtons,
+		actions: actionsProp,
+		options: optionsProp,
+		children,
+		className,
+		...additionalProps
+	} = props;
+
+	const baseId = useInstanceId(
+		CircularOptionPicker,
+		'components-circular-option-picker',
+		additionalProps.id
+	);
+
+	const OptionPickerImplementation = asButtons
+		? ButtonsCircularOptionPicker
+		: ListboxCircularOptionPicker;
+
+	const actions = actionsProp ? (
+		<div className="components-circular-option-picker__custom-clear-wrapper">
+			{ actionsProp }
+		</div>
+	) : undefined;
+
+	const options = (
+		<div className="components-circular-option-picker__swatches">
+			{ optionsProp }
+		</div>
+	);
+
+	return (
+		<OptionPickerImplementation
+			{ ...additionalProps }
+			baseId={ baseId }
+			className={ clsx( 'components-circular-option-picker', className ) }
+			actions={ actions }
+			options={ options }
+		>
+			{ children }
+		</OptionPickerImplementation>
+	);
+}
+
+CircularOptionPicker.Option = Option;
+CircularOptionPicker.OptionGroup = OptionGroup;
+CircularOptionPicker.ButtonAction = ButtonAction;
+CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+
+export default CircularOptionPicker;
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
deleted file mode 100644
index f41813906fcaba..00000000000000
--- a/packages/components/src/circular-option-picker/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Dropdown from '../dropdown';
-import Tooltip from '../tooltip';
-
-function Option( props ) {
-	const {
-		className,
-		isSelected,
-		selectedIconProps,
-		tooltipText,
-		...additionalProps
-	} = props;
-	const optionButton = (
-		<Button
-			isPressed={ isSelected }
-			className="components-circular-option-picker__option"
-			{ ...additionalProps }
-		/>
-	);
-	return (
-		<div
-			className={ classnames(
-				className,
-				'components-circular-option-picker__option-wrapper'
-			) }
-		>
-			{ tooltipText ? (
-				<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>
-			) : (
-				optionButton
-			) }
-			{ isSelected && (
-				<Icon
-					icon={ check }
-					{ ...( selectedIconProps ? selectedIconProps : {} ) }
-				/>
-			) }
-		</div>
-	);
-}
-
-function DropdownLinkAction( props ) {
-	const { buttonProps, className, dropdownProps, linkText } = props;
-	return (
-		<Dropdown
-			className={ classnames(
-				'components-circular-option-picker__dropdown-link-action',
-				className
-			) }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					variant="link"
-					{ ...buttonProps }
-				>
-					{ linkText }
-				</Button>
-			) }
-			{ ...dropdownProps }
-		/>
-	);
-}
-
-function ButtonAction( props ) {
-	const { className, children, ...additionalProps } = props;
-	return (
-		<Button
-			className={ classnames(
-				'components-circular-option-picker__clear',
-				className
-			) }
-			variant="tertiary"
-			{ ...additionalProps }
-		>
-			{ children }
-		</Button>
-	);
-}
-
-export default function CircularOptionPicker( props ) {
-	const { actions, className, options, children } = props;
-	return (
-		<div
-			className={ classnames(
-				'components-circular-option-picker',
-				className
-			) }
-		>
-			<div className="components-circular-option-picker__swatches">
-				{ options }
-			</div>
-			{ children }
-			{ actions && (
-				<div className="components-circular-option-picker__custom-clear-wrapper">
-					{ actions }
-				</div>
-			) }
-		</div>
-	);
-}
-
-CircularOptionPicker.Option = Option;
-CircularOptionPicker.ButtonAction = ButtonAction;
-CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
diff --git a/packages/components/src/circular-option-picker/index.tsx b/packages/components/src/circular-option-picker/index.tsx
new file mode 100644
index 00000000000000..ef975c21ee6545
--- /dev/null
+++ b/packages/components/src/circular-option-picker/index.tsx
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from './circular-option-picker';
+
+export { Option } from './circular-option-picker-option';
+export { OptionGroup } from './circular-option-picker-option-group';
+export {
+	ButtonAction,
+	DropdownLinkAction,
+} from './circular-option-picker-actions';
+
+export default CircularOptionPicker;
diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..84165bf24bff6c
--- /dev/null
+++ b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -0,0 +1,165 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState, createContext, useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '..';
+
+const CircularOptionPickerStoryContext = createContext< {
+	currentColor?: string;
+	setCurrentColor?: ( v: string | undefined ) => void;
+} >( {} );
+
+const meta: Meta< typeof CircularOptionPicker > = {
+	title: 'Components/Selection & Input/Color/CircularOptionPicker',
+	id: 'components-circularoptionpicker',
+	component: CircularOptionPicker,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.Option': CircularOptionPicker.Option,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.OptionGroup': CircularOptionPicker.OptionGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.ButtonAction': CircularOptionPicker.ButtonAction,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.DropdownLinkAction':
+			CircularOptionPicker.DropdownLinkAction,
+	},
+	argTypes: {
+		actions: { control: false },
+		options: { control: false },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		// Share current color state between main component, `actions` and `options`
+		( Story ) => {
+			const [ currentColor, setCurrentColor ] = useState< string >();
+
+			return (
+				<CircularOptionPickerStoryContext.Provider
+					value={ {
+						currentColor,
+						setCurrentColor,
+					} }
+				>
+					<Story />
+				</CircularOptionPickerStoryContext.Provider>
+			);
+		},
+	],
+};
+export default meta;
+
+const colors = [
+	{ color: '#f00', name: 'Red' },
+	{ color: '#0f0', name: 'Green' },
+	{ color: '#0af', name: 'Blue' },
+];
+
+const DefaultOptions = () => {
+	const { currentColor, setCurrentColor } = useContext(
+		CircularOptionPickerStoryContext
+	);
+
+	return (
+		<>
+			{ colors.map( ( { color, name }, index ) => {
+				return (
+					<CircularOptionPicker.Option
+						key={ `${ color }-${ index }` }
+						tooltipText={ name }
+						style={ { backgroundColor: color, color } }
+						isSelected={ color === currentColor }
+						onClick={ () => {
+							setCurrentColor?.( color );
+						} }
+						aria-label={ name }
+					/>
+				);
+			} ) }
+		</>
+	);
+};
+
+const DefaultActions = () => {
+	const { setCurrentColor } = useContext( CircularOptionPickerStoryContext );
+
+	return (
+		<CircularOptionPicker.ButtonAction
+			onClick={ () => setCurrentColor?.( undefined ) }
+		>
+			Clear
+		</CircularOptionPicker.ButtonAction>
+	);
+};
+
+const Template: StoryFn< typeof CircularOptionPicker > = ( props ) => (
+	<CircularOptionPicker { ...props } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	'aria-label': 'Circular Option Picker',
+	options: <DefaultOptions />,
+};
+
+export const AsButtons = Template.bind( {} );
+AsButtons.args = {
+	...Default.args,
+	asButtons: true,
+};
+
+export const WithLoopingDisabled = Template.bind( {} );
+WithLoopingDisabled.args = {
+	...Default.args,
+	loop: false,
+};
+WithLoopingDisabled.parameters = {
+	docs: {
+		source: {
+			code: `<CircularOptionPicker
+  aria-label="${ WithLoopingDisabled.args[ 'aria-label' ] }"
+  loop={false}
+  options={<DefaultOptions />}
+/>`,
+		},
+	},
+};
+
+export const WithButtonAction = Template.bind( {} );
+WithButtonAction.args = {
+	...Default.args,
+	actions: <DefaultActions />,
+};
+WithButtonAction.storyName = 'With ButtonAction';
+
+export const WithDropdownLinkAction = Template.bind( {} );
+WithDropdownLinkAction.args = {
+	...Default.args,
+	actions: (
+		<CircularOptionPicker.DropdownLinkAction
+			dropdownProps={ {
+				popoverProps: { position: 'top right' },
+				renderContent: () => (
+					<div>This is an example of a DropdownLinkAction.</div>
+				),
+			} }
+			linkText="Learn More"
+		></CircularOptionPicker.DropdownLinkAction>
+	),
+};
+WithDropdownLinkAction.storyName = 'With DropdownLinkAction';
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 56ec9edf1cc1f7..e47764a3a60d7f 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -16,6 +16,16 @@ $color-palette-circle-spacing: 12px;
 		display: flex;
 		flex-wrap: wrap;
 		gap: $color-palette-circle-spacing;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__swatches");
+	}
+
+	// Make sure that the .components-circular-option-picker__swatches element
+	// renders visually on top of its siblings. This is necessary to make sure
+	// that the tooltip rendered when hovering an `Option` always appears on top.
+	> *:not(.components-circular-option-picker__swatches) {
+		position: relative;
+		z-index: z-index("> *:not(.components-circular-option-picker__swatches)");
 	}
 }
 
@@ -26,6 +36,7 @@ $color-palette-circle-spacing: 12px;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;
+	will-change: transform;
 	@include reduce-motion("transition");
 
 	&:hover {
@@ -49,18 +60,17 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
 	z-index: z-index(".components-circular-option-picker__option-wrapper::before");
-	// Need to disable the lint rule because given that we are in the presence of a data URL that needs quotes we need to wrap it with single quotes.
-	/* stylelint-disable-next-line function-url-quotes */
+	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 
 .components-circular-option-picker__option {
 	display: inline-block;
 	vertical-align: top;
-	height: 100%;
-	width: 100%;
+	height: 100% !important;
+	aspect-ratio: 1;
 	border: none;
-	border-radius: 50%;
+	border-radius: $radius-round;
 	background: transparent;
 	box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
 	transition: 100ms box-shadow ease;
@@ -72,7 +82,8 @@ $color-palette-circle-spacing: 12px;
 		box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
 	}
 
-	&.is-pressed {
+	&[aria-pressed="true"],
+	&[aria-selected="true"] {
 		box-shadow: inset 0 0 0 4px;
 		position: relative;
 		z-index: z-index(".components-circular-option-picker__option.is-pressed");
@@ -82,7 +93,7 @@ $color-palette-circle-spacing: 12px;
 			position: absolute;
 			left: 2px;
 			top: 2px;
-			border-radius: 50%;
+			border-radius: $radius-round;
 			z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
 			pointer-events: none;
 		}
@@ -98,21 +109,26 @@ $color-palette-circle-spacing: 12px;
 		border-radius: $radius-round;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 		// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
-		border: 1px solid transparent;
+		border: $border-width solid transparent;
 		box-sizing: inherit;
 	}
 
 	&:focus {
 		&::after {
 			content: "";
-			border: #{ $border-width * 2 } solid $gray-700;
-			width: 32px;
-			height: 32px;
-			position: absolute;
-			top: -2px;
-			left: -2px;
 			border-radius: $radius-round;
 			box-shadow: inset 0 0 0 2px $white;
+
+			// Make sure it's always centered
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			// Make sure dimensions account for border width
+			border: #{ $border-width * 2 } solid $gray-700;
+			width: calc(100% + #{ ( $border-width * 2 ) * 2 });
+			height: calc(100% + #{ ( $border-width * 2 ) * 2 });
 		}
 	}
 
@@ -128,7 +144,6 @@ $color-palette-circle-spacing: 12px;
 	background: $white;
 }
 
-
 .components-circular-option-picker__dropdown-link-action {
 	margin-right: $grid-unit-20;
 
diff --git a/packages/components/src/circular-option-picker/test/index.tsx b/packages/components/src/circular-option-picker/test/index.tsx
new file mode 100644
index 00000000000000..a6e9f2c45a05ce
--- /dev/null
+++ b/packages/components/src/circular-option-picker/test/index.tsx
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { press } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '..';
+
+const SINGLE_OPTION = [ <CircularOptionPicker.Option key="option" /> ];
+
+const MULTIPLE_OPTIONS = [
+	<CircularOptionPicker.Option key="option-1" aria-label="Option One" />,
+	<CircularOptionPicker.Option key="option-2" aria-label="Option Two" />,
+];
+
+const DEFAULT_PROPS = {
+	'aria-label': 'Circular Option Picker',
+	options: SINGLE_OPTION,
+};
+
+function getOption( name: string ) {
+	return screen.getByRole( 'option', { name } );
+}
+
+describe( 'CircularOptionPicker', () => {
+	describe( 'when `asButtons` is not set', () => {
+		it( 'should render as a listbox', async () => {
+			render( <CircularOptionPicker { ...DEFAULT_PROPS } /> );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
+			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `asButtons` is false', () => {
+		it( 'should render as a listbox', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					asButtons={ false }
+				/>
+			);
+
+			expect( screen.getByRole( 'listbox' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'option' ) ).toBeInTheDocument();
+			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `asButtons` is true', () => {
+		it( 'should render as buttons', async () => {
+			render( <CircularOptionPicker { ...DEFAULT_PROPS } asButtons /> );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when `loop` is not set', () => {
+		it( 'should loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					options={ MULTIPLE_OPTIONS }
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'when `loop` is true', () => {
+		it( 'should loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					options={ MULTIPLE_OPTIONS }
+					loop
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'when `loop` is false', () => {
+		it( 'should not loop', async () => {
+			render(
+				<CircularOptionPicker
+					{ ...DEFAULT_PROPS }
+					loop={ false }
+					options={ MULTIPLE_OPTIONS }
+				/>
+			);
+
+			await press.Tab();
+			expect( getOption( 'Option One' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+			await press.ArrowRight();
+			expect( getOption( 'Option Two' ) ).toHaveFocus();
+		} );
+	} );
+} );
diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts
new file mode 100644
index 00000000000000..411782aed575b1
--- /dev/null
+++ b/packages/components/src/circular-option-picker/types.ts
@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import type { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type { DropdownProps } from '../dropdown/types';
+import type { WordPressComponentProps } from '../context';
+
+type CommonCircularOptionPickerProps = {
+	/**
+	 * An ID to apply to the component.
+	 */
+	id?: string;
+	/**
+	 * A CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The action(s) to be rendered after the options,
+	 * such as a 'clear' button as seen in `ColorPalette`.
+	 * Usually a `CircularOptionPicker.ButtonAction` or
+	 * `CircularOptionPicker.DropdownLinkAction` component.
+	 */
+	actions?: ReactNode;
+	/**
+	 * The options to be rendered, such as color swatches.
+	 * Usually a `CircularOptionPicker.Option` component.
+	 */
+	options: ReactNode;
+	/**
+	 * The child elements.
+	 */
+	children?: ReactNode;
+};
+
+type WithBaseId = {
+	baseId: string;
+};
+
+type FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 */
+	asButtons?: false;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
+} & (
+		| {
+				'aria-label': string;
+				'aria-labelledby'?: never;
+		  }
+		| {
+				'aria-label'?: never;
+				'aria-labelledby': string;
+		  }
+	);
+
+export type ListboxCircularOptionPickerProps = WithBaseId &
+	Omit< FullListboxCircularOptionPickerProps, 'asButtons' >;
+
+type FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons: true;
+};
+
+export type ButtonsCircularOptionPickerProps = WithBaseId &
+	Omit< FullButtonsCircularOptionPickerProps, 'asButtons' >;
+
+export type CircularOptionPickerProps =
+	| FullListboxCircularOptionPickerProps
+	| FullButtonsCircularOptionPickerProps;
+
+export type DropdownLinkActionProps = {
+	buttonProps?: Omit<
+		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+		'children'
+	>;
+	linkText: string;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
+	className?: string;
+};
+
+export type OptionGroupProps = {
+	className?: string;
+	options: ReactNode;
+};
+
+export type OptionProps = Omit<
+	WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+	'isPressed' | 'className'
+> & {
+	className?: string;
+	tooltipText?: string;
+	isSelected?: boolean;
+	// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option
+	// and is not intended to be overridden.
+	// `size` relies on the `Icon` component's default size of `24` to fit
+	// `CircularOptionPicker`'s design, and should not be explicitly set.
+	selectedIconProps?: Omit<
+		React.ComponentProps< typeof Icon >,
+		'icon' | 'size'
+	>;
+};
+
+export type CircularOptionPickerContextProps = {
+	baseId?: string;
+	activeId?: string | null | undefined;
+	setActiveId?: ( newId: string | null | undefined ) => void;
+};
diff --git a/packages/components/src/clipboard-button/README.md b/packages/components/src/clipboard-button/README.md
index 0f1bbdf44b99db..94bd50b0476a58 100644
--- a/packages/components/src/clipboard-button/README.md
+++ b/packages/components/src/clipboard-button/README.md
@@ -11,8 +11,8 @@ With a clipboard button, users copy text (or other elements) with a single click
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ClipboardButton } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyClipboardButton = () => {
 	const [ hasCopied, setHasCopied ] = useState( false );
diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js
deleted file mode 100644
index 9cce2dbefa9a79..00000000000000
--- a/packages/components/src/clipboard-button/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-import { useCopyToClipboard } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-
-const TIMEOUT = 4000;
-
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
-export default function ClipboardButton( {
-	className,
-	children,
-	onCopy,
-	onFinishCopy,
-	text,
-	...buttonProps
-} ) {
-	deprecated( 'wp.components.ClipboardButton', {
-		since: '5.8',
-		alternative: 'wp.compose.useCopyToClipboard',
-	} );
-
-	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timeoutId = useRef();
-	const ref = useCopyToClipboard( text, () => {
-		onCopy();
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
-
-		if ( onFinishCopy ) {
-			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
-		}
-	} );
-
-	useEffect( () => {
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
-	}, [] );
-
-	const classes = classnames( 'components-clipboard-button', className );
-
-	// Workaround for inconsistent behavior in Safari, where <textarea> is not
-	// the document.activeElement at the moment when the copy event fires.
-	// This causes documentHasSelection() in the copy-handler component to
-	// mistakenly override the ClipboardButton, and copy a serialized string
-	// of the current block instead.
-	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-	const focusOnCopyEventTarget = ( event ) => {
-		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
-		event.target.focus();
-	};
-
-	return (
-		<Button
-			{ ...buttonProps }
-			className={ classes }
-			ref={ ref }
-			onCopy={ focusOnCopyEventTarget }
-		>
-			{ children }
-		</Button>
-	);
-}
diff --git a/packages/components/src/clipboard-button/index.tsx b/packages/components/src/clipboard-button/index.tsx
new file mode 100644
index 00000000000000..492ab64b7290e2
--- /dev/null
+++ b/packages/components/src/clipboard-button/index.tsx
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+import { useCopyToClipboard } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import type { ClipboardButtonProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+const TIMEOUT = 4000;
+
+export default function ClipboardButton( {
+	className,
+	children,
+	onCopy,
+	onFinishCopy,
+	text,
+	...buttonProps
+}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {
+	deprecated( 'wp.components.ClipboardButton', {
+		since: '5.8',
+		alternative: 'wp.compose.useCopyToClipboard',
+	} );
+
+	const timeoutIdRef = useRef< NodeJS.Timeout >();
+	const ref = useCopyToClipboard( text, () => {
+		onCopy();
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
+		}
+
+		if ( onFinishCopy ) {
+			timeoutIdRef.current = setTimeout( () => onFinishCopy(), TIMEOUT );
+		}
+	} );
+
+	useEffect( () => {
+		return () => {
+			if ( timeoutIdRef.current ) {
+				clearTimeout( timeoutIdRef.current );
+			}
+		};
+	}, [] );
+
+	const classes = clsx( 'components-clipboard-button', className );
+
+	// Workaround for inconsistent behavior in Safari, where <textarea> is not
+	// the document.activeElement at the moment when the copy event fires.
+	// This causes documentHasSelection() in the copy-handler component to
+	// mistakenly override the ClipboardButton, and copy a serialized string
+	// of the current block instead.
+	const focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {
+		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
+		event.target.focus();
+	};
+
+	return (
+		<Button
+			{ ...buttonProps }
+			className={ classes }
+			ref={ ref }
+			onCopy={ focusOnCopyEventTarget }
+		>
+			{ children }
+		</Button>
+	);
+}
diff --git a/packages/components/src/clipboard-button/types.ts b/packages/components/src/clipboard-button/types.ts
new file mode 100644
index 00000000000000..7987230598fbbb
--- /dev/null
+++ b/packages/components/src/clipboard-button/types.ts
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export interface ClipboardButtonProps {
+	children: ReactNode;
+	onCopy: () => void;
+	onFinishCopy?: () => void;
+	text: string;
+}
diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js
index 2a058f25ceec4c..b76915e87469e3 100644
--- a/packages/components/src/color-indicator/index.native.js
+++ b/packages/components/src/color-indicator/index.native.js
@@ -6,12 +6,12 @@ import { View, Animated } from 'react-native';
  * WordPress dependencies
  */
 import { Icon, check } from '@wordpress/icons';
-import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import Gradient from '../mobile/gradient';
 import { colorsUtils } from '../mobile/color-settings/utils';
 
 function SelectedIcon( { opacity } ) {
diff --git a/packages/components/src/color-indicator/index.tsx b/packages/components/src/color-indicator/index.tsx
index fc402eac03f8c1..9d4c0de452b246 100644
--- a/packages/components/src/color-indicator/index.tsx
+++ b/packages/components/src/color-indicator/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { ColorIndicatorProps } from './types';
 
 function UnforwardedColorIndicator(
@@ -23,7 +23,7 @@ function UnforwardedColorIndicator(
 
 	return (
 		<span
-			className={ classnames( 'component-color-indicator', className ) }
+			className={ clsx( 'component-color-indicator', className ) }
 			style={ { background: colorValue } }
 			ref={ forwardedRef }
 			{ ...additionalProps }
diff --git a/packages/components/src/color-indicator/stories/index.story.tsx b/packages/components/src/color-indicator/stories/index.story.tsx
new file mode 100644
index 00000000000000..c24c26f5e844b3
--- /dev/null
+++ b/packages/components/src/color-indicator/stories/index.story.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '..';
+
+const meta: Meta< typeof ColorIndicator > = {
+	component: ColorIndicator,
+	title: 'Components/Selection & Input/Color/ColorIndicator',
+	id: 'components-colorindicator',
+	argTypes: {
+		colorValue: {
+			control: { type: 'color' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ColorIndicator > = ( { ...args } ) => (
+	<ColorIndicator { ...args } />
+);
+
+export const Default: StoryFn< typeof ColorIndicator > = Template.bind( {} );
+Default.args = {
+	colorValue: '#0073aa',
+};
diff --git a/packages/components/src/color-indicator/stories/index.tsx b/packages/components/src/color-indicator/stories/index.tsx
deleted file mode 100644
index 40019fbf0ba1a2..00000000000000
--- a/packages/components/src/color-indicator/stories/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import ColorIndicator from '..';
-
-const meta: ComponentMeta< typeof ColorIndicator > = {
-	component: ColorIndicator,
-	title: 'Components/ColorIndicator',
-	argTypes: {
-		colorValue: {
-			control: { type: 'color' },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
-	<ColorIndicator { ...args } />
-);
-
-export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
-	{}
-);
-Default.args = {
-	colorValue: '#0073aa',
-};
diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss
index 68abd0808f42fb..4029b50340e62a 100644
--- a/packages/components/src/color-indicator/style.scss
+++ b/packages/components/src/color-indicator/style.scss
@@ -2,7 +2,8 @@
 	width: $grid-unit-50 * 0.5;
 	height: $grid-unit-50 * 0.5;
 	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-	border-radius: 50%;
+	border-radius: $radius-round;
 	display: inline-block;
 	padding: 0;
+	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
diff --git a/packages/components/src/color-list-picker/index.js b/packages/components/src/color-list-picker/index.js
deleted file mode 100644
index 9748a8ea3ba72b..00000000000000
--- a/packages/components/src/color-list-picker/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
-
-function ColorOption( {
-	label,
-	value,
-	colors,
-	disableCustomColors,
-	enableAlpha,
-	onChange,
-} ) {
-	const [ isOpen, setIsOpen ] = useState( false );
-	return (
-		<>
-			<Button
-				className="components-color-list-picker__swatch-button"
-				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
-			>
-				<HStack justify="flex-start" spacing={ 2 }>
-					{ value ? (
-						<ColorIndicator
-							colorValue={ value }
-							className="components-color-list-picker__swatch-color"
-						/>
-					) : (
-						<Icon icon={ swatch } />
-					) }
-					<span>{ label }</span>
-				</HStack>
-			</Button>
-			{ isOpen && (
-				<ColorPalette
-					className="components-color-list-picker__color-picker"
-					colors={ colors }
-					value={ value }
-					clearable={ false }
-					onChange={ onChange }
-					disableCustomColors={ disableCustomColors }
-					enableAlpha={ enableAlpha }
-				/>
-			) }
-		</>
-	);
-}
-
-function ColorListPicker( {
-	colors,
-	labels,
-	value = [],
-	disableCustomColors,
-	enableAlpha,
-	onChange,
-} ) {
-	return (
-		<div className="components-color-list-picker">
-			{ labels.map( ( label, index ) => (
-				<ColorOption
-					key={ index }
-					label={ label }
-					value={ value[ index ] }
-					colors={ colors }
-					disableCustomColors={ disableCustomColors }
-					enableAlpha={ enableAlpha }
-					onChange={ ( newColor ) => {
-						const newColors = value.slice();
-						newColors[ index ] = newColor;
-						onChange( newColors );
-					} }
-				/>
-			) ) }
-		</div>
-	);
-}
-
-export default ColorListPicker;
diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/color-list-picker/style.scss
deleted file mode 100644
index dd0c79ffb8062b..00000000000000
--- a/packages/components/src/color-list-picker/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.components-color-list-picker,
-.components-color-list-picker__swatch-button {
-	width: 100%;
-}
-
-.components-color-list-picker__color-picker {
-	margin: $grid-unit-10 0;
-}
-
-.components-color-list-picker__swatch-button {
-	// Used to simulate styles as a .button.has-icon (which this component can't
-	// opt into, because it has to show more than a simple SVG as the "icon")
-	padding: 6px;
-}
-
-.components-color-list-picker__swatch-color {
-	// Match the 24px size of the `swatch` icon (used when no color is set)
-	margin: 2px;
-}
diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md
index f5689cb0af0364..0fbfbd4d710013 100644
--- a/packages/components/src/color-palette/README.md
+++ b/packages/components/src/color-palette/README.md
@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPalette } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyColorPalette = () => {
 	const [ color, setColor ] = useState ( '#f00' )
@@ -43,7 +43,7 @@ Whether the palette should have a clearing button.
 -   Required: No
 -   Default: `true`
 
-### `colors`: `( PaletteObject | ColorObject )[]`
+### `colors`: `PaletteObject[] | ColorObject[]`
 
 Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
 
@@ -66,6 +66,13 @@ colors.
 -   Required: No
 -   Default: `false`
 
+### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+
+The heading level.
+
+-   Required: No
+-   Default: `2`
+
 ### `value`: `string`
 
 Currently active value.
@@ -77,3 +84,17 @@ Currently active value.
 Callback called when a color is selected.
 
 -   Required: Yes
+
+### `asButtons`: `boolean`
+
+Whether the control should present as a set of buttons, each with its own tab stop.
+
+- Required: No
+- Default: `false`
+
+### `loop`: `boolean`
+
+Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+
+- Required: No
+- Default: `true`
diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
index 5ce545b3c64ffa..ab86cd6f05f127 100644
--- a/packages/components/src/color-palette/index.native.js
+++ b/packages/components/src/color-palette/index.native.js
@@ -11,12 +11,11 @@ import {
 	Platform,
 	Text,
 } from 'react-native';
-import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -34,7 +33,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
-	enableCustomColor = true,
+	enableCustomColor = false,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -62,17 +61,37 @@ function ColorPalette( {
 
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
+	const delayedScrollRef = useRef();
 
-	const defaultColors = [
-		...new Set( map( defaultSettings.colors, 'color' ) ),
-	];
 	const mergedColors = [
-		...new Set( map( defaultSettings.allColors, 'color' ) ),
+		...new Set(
+			( defaultSettings.colors ?? [] ).map( ( { color } ) => color )
+		),
+	];
+	const mergedGradients = [
+		...new Set(
+			( defaultSettings.gradients ?? [] ).map(
+				( { gradient } ) => gradient
+			)
+		),
 	];
-	const defaultGradientColors = [
-		...new Set( map( defaultSettings.gradients, 'gradient' ) ),
+	const allAvailableColors = [
+		...new Set(
+			( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
+		),
 	];
-	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+	const allAvailableGradients = [
+		...new Set(
+			( defaultSettings.allGradients ?? [] ).map(
+				( { gradient } ) => gradient
+			)
+		),
+	];
+
+	const colors = isGradientSegment ? mergedGradients : mergedColors;
+	const allColors = isGradientSegment
+		? allAvailableGradients
+		: allAvailableColors;
 
 	const customIndicatorColor = isGradientSegment
 		? activeColor
@@ -96,14 +115,13 @@ function ColorPalette( {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
 		}
-		// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+		// Not adding additional dependencies until the component can be refactored and updated safely.
 		// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ currentSegment ] );
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && mergedColors && mergedColors.includes( activeColor );
+			activeColor && allColors?.includes( activeColor );
 		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;
@@ -168,6 +186,22 @@ function ColorPalette( {
 		}
 	}
 
+	function getColorGradientName( value ) {
+		const fallbackName = sprintf(
+			/* translators: %s: the hex color value */
+			__( 'Unlabeled color. %s' ),
+			value
+		);
+		const foundColorName = isGradientSegment
+			? defaultSettings.gradients?.find(
+					( gradient ) => gradient.gradient === value
+			  )
+			: defaultSettings.allColors?.find(
+					( color ) => color.color === value
+			  );
+		return foundColorName ? foundColorName?.name : fallbackName;
+	}
+
 	function onColorPress( color ) {
 		deselectCustomGradient();
 		performAnimation( color );
@@ -182,11 +216,11 @@ function ColorPalette( {
 	}
 
 	function scrollToEndWithDelay() {
-		const delayedScroll = setTimeout( () => {
-			scrollViewRef.current.scrollToEnd();
+		delayedScrollRef.current = setTimeout( () => {
+			scrollViewRef?.current.scrollToEnd();
 		}, ANIMATION_DURATION );
 		return () => {
-			clearTimeout( delayedScroll );
+			clearTimeout( delayedScrollRef.current );
 		};
 	}
 
@@ -244,15 +278,18 @@ function ColorPalette( {
 					const scaleValue = isSelected( color )
 						? scaleInterpolation
 						: 1;
+					const colorName = getColorGradientName( color );
+
 					return (
 						<View key={ `${ color }-${ isSelected( color ) }` }>
 							<TouchableWithoutFeedback
 								onPress={ () => onColorPress( color ) }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityState={ {
 									selected: isSelected( color ),
 								} }
 								accessibilityHint={ color }
+								accessibilityLabel={ colorName }
 								testID={ color }
 							>
 								<Animated.View
@@ -288,7 +325,7 @@ function ColorPalette( {
 						) }
 						<TouchableWithoutFeedback
 							onPress={ onCustomPress }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityState={ {
 								selected: isSelectedCustom(),
 							} }
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index 8a403d75192064..ed3e9039704179 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -5,12 +5,14 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useMemo, forwardRef } from '@wordpress/element';
+import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,7 +21,6 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
-import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
@@ -31,7 +32,13 @@ import type {
 	PaletteObject,
 	SinglePaletteProps,
 } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import type { DropdownProps } from '../dropdown/types';
+import {
+	extractColorNameFromCurrentValue,
+	isMultiplePaletteArray,
+	normalizeColorValue,
+} from './utils';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -41,7 +48,7 @@ function SinglePalette( {
 	colors,
 	onChange,
 	value,
-	actions,
+	...additionalProps
 }: SinglePaletteProps ) {
 	const colorOptions = useMemo( () => {
 		return colors.map( ( { color, name }, index ) => {
@@ -70,7 +77,7 @@ function SinglePalette( {
 					}
 					style={ { backgroundColor: color, color } }
 					onClick={
-						isSelected ? clearColor : () => onChange( color )
+						isSelected ? clearColor : () => onChange( color, index )
 					}
 					aria-label={
 						name
@@ -84,15 +91,11 @@ function SinglePalette( {
 		} );
 	}, [ colors, value, onChange, clearColor ] );
 
-	if ( colors.length === 0 ) {
-		return null;
-	}
-
 	return (
-		<CircularOptionPicker
+		<CircularOptionPicker.OptionGroup
 			className={ className }
 			options={ colorOptions }
-			actions={ actions }
+			{ ...additionalProps }
 		/>
 	);
 }
@@ -103,8 +106,10 @@ function MultiplePalettes( {
 	colors,
 	onChange,
 	value,
-	actions,
+	headingLevel,
 }: MultiplePalettesProps ) {
+	const instanceId = useInstanceId( MultiplePalettes, 'color-palette' );
+
 	if ( colors.length === 0 ) {
 		return null;
 	}
@@ -112,17 +117,20 @@ function MultiplePalettes( {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ colors.map( ( { name, colors: colorPalette }, index ) => {
+				const id = `${ instanceId }-${ index }`;
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading>{ name }</ColorHeading>
+						<ColorHeading id={ id } level={ headingLevel }>
+							{ name }
+						</ColorHeading>
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
-							onChange={ onChange }
-							value={ value }
-							actions={
-								colors.length === index + 1 ? actions : null
+							onChange={ ( newColor ) =>
+								onChange( newColor, index )
 							}
+							value={ value }
+							aria-labelledby={ id }
 						/>
 					</VStack>
 				);
@@ -136,9 +144,13 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 }: CustomColorPickerDropdownProps ) {
-	const popoverProps = useMemo(
+	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
+			// Disabling resize as it would otherwise cause the popover to show
+			// scrollbars while dragging the color picker's handle close to the
+			// popover edge.
+			resize: false,
 			...( isRenderedInSidebar
 				? {
 						// When in the sidebar: open to the left (stacking),
@@ -165,192 +177,188 @@ export function CustomColorPickerDropdown( {
 	);
 }
 
-export const extractColorNameFromCurrentValue = (
-	currentValue?: ColorPaletteProps[ 'value' ],
-	colors: ColorPaletteProps[ 'colors' ] = [],
-	showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
-) => {
-	if ( ! currentValue ) {
-		return '';
-	}
-
-	const currentValueIsCssVariable = /^var\(/.test( currentValue );
-	const normalizedCurrentValue = currentValueIsCssVariable
-		? currentValue
-		: colord( currentValue ).toHex();
-
-	// Normalize format of `colors` to simplify the following loop
-	type normalizedPaletteObject = { colors: ColorObject[] };
-	const colorPalettes: normalizedPaletteObject[] = showMultiplePalettes
-		? ( colors as PaletteObject[] )
-		: [ { colors: colors as ColorObject[] } ];
-	for ( const { colors: paletteColors } of colorPalettes ) {
-		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			const normalizedColorValue = currentValueIsCssVariable
-				? colorValue
-				: colord( colorValue ).toHex();
-
-			if ( normalizedCurrentValue === normalizedColorValue ) {
-				return colorName;
-			}
-		}
-	}
-
-	// translators: shown when the user has picked a custom color (i.e not in the palette of colors).
-	return __( 'Custom' );
-};
-
-export const showTransparentBackground = ( currentValue?: string ) => {
-	if ( typeof currentValue === 'undefined' ) {
-		return true;
-	}
-	return colord( currentValue ).alpha() === 0;
-};
-
-const areColorsMultiplePalette = (
-	colors: NonNullable< ColorPaletteProps[ 'colors' ] >
-): colors is PaletteObject[] => {
-	return colors.every( ( colorObj ) =>
-		Array.isArray( ( colorObj as PaletteObject ).colors )
-	);
-};
-
 function UnforwardedColorPalette(
 	props: WordPressComponentProps< ColorPaletteProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		asButtons,
+		loop,
 		clearable = true,
 		colors = [],
 		disableCustomColors = false,
 		enableAlpha = false,
 		onChange,
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
-		...otherProps
+		headingLevel = 2,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...additionalProps
 	} = props;
+	const [ normalizedColorValue, setNormalizedColorValue ] = useState( value );
+
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
+	const customColorPaletteCallbackRef = useCallback(
+		( node: HTMLElement | null ) => {
+			setNormalizedColorValue( normalizeColorValue( value, node ) );
+		},
+		[ value ]
+	);
+
+	const hasMultipleColorOrigins = isMultiplePaletteArray( colors );
 	const buttonLabelName = useMemo(
 		() =>
 			extractColorNameFromCurrentValue(
 				value,
 				colors,
-				__experimentalHasMultipleOrigins
+				hasMultipleColorOrigins
 			),
-		[ value, colors, __experimentalHasMultipleOrigins ]
+		[ value, colors, hasMultipleColorOrigins ]
 	);
 
-	// Make sure that the `colors` array has a format (single/multiple) that is
-	// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
-	// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
-	// either both `true` or both `false`.
-	if (
-		colors.length > 0 &&
-		__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
-		);
-		return null;
-	}
-
 	const renderCustomColorPicker = () => (
 		<DropdownContentWrapper paddingSize="none">
 			<ColorPicker
-				color={ value }
+				color={ normalizedColorValue }
 				onChange={ ( color ) => onChange( color ) }
 				enableAlpha={ enableAlpha }
 			/>
 		</DropdownContentWrapper>
 	);
+	const isHex = value?.startsWith( '#' );
 
-	const colordColor = colord( value ?? '' );
-
-	const valueWithoutLeadingHash = value?.startsWith( '#' )
-		? value.substring( 1 )
-		: value ?? '';
-
-	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+	// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
+	const displayValue = value?.replace( /^var\((.+)\)$/, '$1' );
+	const customColorAccessibleLabel = !! displayValue
 		? sprintf(
-				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				// translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
 				__(
 					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
 				),
 				buttonLabelName,
-				valueWithoutLeadingHash
+				displayValue
 		  )
 		: __( 'Custom color picker.' );
 
 	const paletteCommonProps = {
-		clearable,
 		clearColor,
 		onChange,
 		value,
-		actions: !! clearable && (
-			<CircularOptionPicker.ButtonAction onClick={ clearColor }>
-				{ __( 'Clear' ) }
-			</CircularOptionPicker.ButtonAction>
-		),
 	};
 
+	const actions = !! clearable && (
+		<CircularOptionPicker.ButtonAction
+			onClick={ clearColor }
+			accessibleWhenDisabled
+			disabled={ ! value }
+		>
+			{ __( 'Clear' ) }
+		</CircularOptionPicker.ButtonAction>
+	);
+
+	let metaProps:
+		| { asButtons: false; loop?: boolean; 'aria-label': string }
+		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
+		| { asButtons: true };
+
+	if ( asButtons ) {
+		metaProps = { asButtons: true };
+	} else {
+		const _metaProps: { asButtons: false; loop?: boolean } = {
+			asButtons: false,
+			loop,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
+	}
+
 	return (
-		<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>
+		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
 			{ ! disableCustomColors && (
 				<CustomColorPickerDropdown
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Flex
-							as={ 'button' }
-							justify="space-between"
-							align="flex-start"
-							className="components-color-palette__custom-color"
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							aria-label={ customColorAccessibleLabel }
-							style={
-								showTransparentBackground( value )
-									? { color: '#000' }
-									: {
-											background: value,
-											color:
-												colordColor.contrast() >
-												colordColor.contrast( '#000' )
-													? '#fff'
-													: '#000',
-									  }
-							}
+						<VStack
+							className="components-color-palette__custom-color-wrapper"
+							spacing={ 0 }
 						>
-							<FlexItem
-								isBlock
-								as={ Truncate }
-								className="components-color-palette__custom-color-name"
-							>
-								{ buttonLabelName }
-							</FlexItem>
-							<FlexItem
-								as="span"
-								className="components-color-palette__custom-color-value"
+							<button
+								ref={ customColorPaletteCallbackRef }
+								className="components-color-palette__custom-color-button"
+								aria-expanded={ isOpen }
+								aria-haspopup="true"
+								onClick={ onToggle }
+								aria-label={ customColorAccessibleLabel }
+								style={ {
+									background: value,
+								} }
+								type="button"
+							/>
+							<VStack
+								className="components-color-palette__custom-color-text-wrapper"
+								spacing={ 0.5 }
 							>
-								{ valueWithoutLeadingHash }
-							</FlexItem>
-						</Flex>
+								<Truncate className="components-color-palette__custom-color-name">
+									{ value
+										? buttonLabelName
+										: __( 'No color selected' ) }
+								</Truncate>
+								{ /*
+								This `Truncate` is always rendered, even if
+								there is no `displayValue`, to ensure the layout
+								does not shift
+								*/ }
+								<Truncate
+									className={ clsx(
+										'components-color-palette__custom-color-value',
+										{
+											'components-color-palette__custom-color-value--is-hex':
+												isHex,
+										}
+									) }
+								>
+									{ displayValue }
+								</Truncate>
+							</VStack>
+						</VStack>
 					) }
 				/>
 			) }
-			{ __experimentalHasMultipleOrigins ? (
-				<MultiplePalettes
-					{ ...paletteCommonProps }
-					colors={ colors as PaletteObject[] }
-				/>
-			) : (
-				<SinglePalette
-					{ ...paletteCommonProps }
-					colors={ colors as ColorObject[] }
+			{ ( colors.length > 0 || actions ) && (
+				<CircularOptionPicker
+					{ ...metaProps }
+					actions={ actions }
+					options={
+						hasMultipleColorOrigins ? (
+							<MultiplePalettes
+								{ ...paletteCommonProps }
+								headingLevel={ headingLevel }
+								colors={ colors as PaletteObject[] }
+								value={ value }
+							/>
+						) : (
+							<SinglePalette
+								{ ...paletteCommonProps }
+								colors={ colors as ColorObject[] }
+								value={ value }
+							/>
+						)
+					}
 				/>
 			) }
 		</VStack>
diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx
new file mode 100644
index 00000000000000..e4c4b89d524448
--- /dev/null
+++ b/packages/components/src/color-palette/stories/index.story.tsx
@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '..';
+
+const meta: Meta< typeof ColorPalette > = {
+	title: 'Components/Selection & Input/Color/ColorPalette',
+	id: 'components-colorpalette',
+	component: ColorPalette,
+	argTypes: {
+		as: { control: false },
+		onChange: { action: 'onChange', control: false },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ColorPalette > = ( {
+	onChange,
+	value,
+	...args
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >( value );
+
+	return (
+		<ColorPalette
+			{ ...args }
+			value={ color }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colors: [
+		{ name: 'Red', color: '#f00' },
+		{ name: 'White', color: '#fff' },
+		{ name: 'Blue', color: '#00f' },
+	],
+};
+
+export const InitialValue = Template.bind( {} );
+InitialValue.args = {
+	colors: [
+		{ name: 'Red', color: '#f00' },
+		{ name: 'White', color: '#fff' },
+		{ name: 'Blue', color: '#00f' },
+	],
+	value: '#00f',
+};
+
+export const MultipleOrigins = Template.bind( {} );
+MultipleOrigins.args = {
+	colors: [
+		{
+			name: 'Primary colors',
+			colors: [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Yellow', color: '#ff0' },
+				{ name: 'Blue', color: '#00f' },
+			],
+		},
+		{
+			name: 'Secondary colors',
+			colors: [
+				{ name: 'Orange', color: '#f60' },
+				{ name: 'Green', color: '#0f0' },
+				{ name: 'Purple', color: '#60f' },
+			],
+		},
+	],
+};
+
+export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	colors: [
+		{ name: 'Red', color: 'var(--red)' },
+		{ name: 'Yellow', color: 'var(--yellow)' },
+		{ name: 'Blue', color: 'var(--blue)' },
+	],
+};
diff --git a/packages/components/src/color-palette/stories/index.tsx b/packages/components/src/color-palette/stories/index.tsx
deleted file mode 100644
index 46bf8cfae609ea..00000000000000
--- a/packages/components/src/color-palette/stories/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ColorPalette from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import type { ColorObject, PaletteObject } from '../types';
-
-const meta: ComponentMeta< typeof ColorPalette > = {
-	title: 'Components/ColorPalette',
-	component: ColorPalette,
-	argTypes: {
-		// Removing the control because setting this prop without changing the
-		// format of the `colors` prop can break the component.
-		__experimentalHasMultipleOrigins: {
-			control: {
-				type: null,
-			},
-		},
-		as: { control: { type: null } },
-		onChange: { action: 'onChange', control: { type: null } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ColorPalette > = ( {
-	onChange,
-	...args
-} ) => {
-	const firstColor =
-		( args.colors as ColorObject[] )[ 0 ].color ||
-		( args.colors as PaletteObject[] )[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState< string | undefined >( firstColor );
-
-	return (
-		<SlotFillProvider>
-			<ColorPalette
-				{ ...args }
-				value={ color }
-				onChange={ ( newColor ) => {
-					setColor( newColor );
-					onChange?.( newColor );
-				} }
-			/>
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	colors: [
-		{ name: 'Red', color: '#f00' },
-		{ name: 'White', color: '#fff' },
-		{ name: 'Blue', color: '#00f' },
-	],
-};
-
-/**
- * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
- * the `colors` prop is expected to be an array of color palettes, rather
- * than an array of color objects.
- */
-export const MultipleOrigins = Template.bind( {} );
-MultipleOrigins.args = {
-	__experimentalHasMultipleOrigins: true,
-	colors: [
-		{
-			name: 'Primary colors',
-			colors: [
-				{ name: 'Red', color: '#f00' },
-				{ name: 'Yellow', color: '#ff0' },
-				{ name: 'Blue', color: '#00f' },
-			],
-		},
-		{
-			name: 'Secondary colors',
-			colors: [
-				{ name: 'Orange', color: '#f60' },
-				{ name: 'Green', color: '#0f0' },
-				{ name: 'Purple', color: '#60f' },
-			],
-		},
-	],
-};
-
-export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
-	return (
-		<div
-			style={
-				{
-					'--red': '#f00',
-					'--yellow': '#ff0',
-					'--blue': '#00f',
-				} as CSSProperties
-			}
-		>
-			<Template { ...args } />
-		</div>
-	);
-};
-CSSVariables.args = {
-	colors: [
-		{ name: 'Red', color: 'var(--red)' },
-		{ name: 'Yellow', color: 'var(--yellow)' },
-		{ name: 'Blue', color: 'var(--blue)' },
-	],
-};
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 82f1858d64d3c4..278aacb22914bb 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -1,41 +1,77 @@
-.components-color-palette__custom-color {
+$border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+
+.components-color-palette__custom-color-wrapper {
+	position: relative;
+	z-index: 0;
+}
+.components-color-palette__custom-color-button {
 	position: relative;
 	border: none;
 	background: none;
-	border-radius: $radius-block-ui;
 	height: $grid-unit-80;
-	padding: $grid-unit-15;
-	font-family: inherit;
 	width: 100%;
-	// The background image creates a checkerboard pattern. Ignore rtlcss to
-	// make it work both in LTR and RTL.
-	// See https://github.com/WordPress/gutenberg/pull/42510
-	/*rtl:begin:ignore*/
-	background-image:
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
-		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 24px 24px;
-	/*rtl:end:ignore*/
-	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
-	color: $white;
 	cursor: pointer;
-	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
 	// Show a thin outline in Windows high contrast mode.
 	outline: 1px solid transparent;
+	border-radius: $radius-medium $radius-medium 0 0;
+	box-shadow: $border-as-box-shadow;
 
 	&:focus {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		// Show a outline in Windows high contrast mode.
 		outline-width: 2px;
 	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: $border-width;
+		z-index: -1;
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 24px 24px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 24px) calc(2 * 24px);
+		border-radius: $radius-medium - $border-width $radius-medium - $border-width 0 0;
+	}
+}
+
+.components-color-palette__custom-color-text-wrapper {
+	padding: $grid-unit-15 $grid-unit-20;
+	border-radius: 0 0 $radius-medium $radius-medium;
+	position: relative;
+	font-size: $default-font-size;
+
+	// Add a border with the same technique as the button above,
+	// but only for left, bottom, and right sides.
+	box-shadow:
+		inset 0 -1 * $border-width 0 0 rgba(0, 0, 0, 0.2),
+		inset $border-width 0 0 0 rgba(0, 0, 0, 0.2),
+		inset -1 * $border-width 0 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .components-color-palette__custom-color-name {
-	text-align: left;
+	color: $components-color-foreground;
+	margin: 0 $border-width;
 }
 
 .components-color-palette__custom-color-value {
-	margin-left: $grid-unit-20;
-	text-transform: uppercase;
+	color: $gray-700;
+
+	&--is-hex {
+		text-transform: uppercase;
+	}
+
+	// Add a zero-width space when this element is empty to preserve
+	// a minimum height of 1 line of text, and avoid layout jumps.
+	&:empty::after {
+		content: "\200B";
+		visibility: hidden;
+	}
 }
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
deleted file mode 100644
index 573ff940ebf0db..00000000000000
--- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
+++ /dev/null
@@ -1,270 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorPalette should allow disabling custom color picker 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
-<div>
-  <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="VStack"
-  >
-    <div
-      class="components-circular-option-picker"
-    >
-      <div
-        class="components-circular-option-picker__swatches"
-      >
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: red"
-            aria-pressed="true"
-            class="components-button components-circular-option-picker__option is-pressed"
-            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-            type="button"
-          />
-          <svg
-            aria-hidden="true"
-            fill="#000"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-            />
-          </svg>
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: white"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
-            type="button"
-          />
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: blue"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
-            type="button"
-          />
-        </div>
-      </div>
-      <div
-        class="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <button
-          class="components-button components-circular-option-picker__clear is-tertiary"
-          type="button"
-        >
-          Clear
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-.emotion-0>* {
-  min-height: 0;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-2>* {
-  min-width: 0;
-}
-
-.emotion-5 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-7 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-<div>
-  <div
-    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="VStack"
-  >
-    <div
-      class="components-dropdown"
-      tabindex="-1"
-    >
-      <button
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-        class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="Flex"
-        style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
-      >
-        <span
-          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-5 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
-        >
-          red
-        </span>
-        <span
-          class="components-flex-item components-color-palette__custom-color-value emotion-7 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="FlexItem"
-        >
-          f00
-        </span>
-      </button>
-    </div>
-    <div
-      class="components-circular-option-picker"
-    >
-      <div
-        class="components-circular-option-picker__swatches"
-      >
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: red"
-            aria-pressed="true"
-            class="components-button components-circular-option-picker__option is-pressed"
-            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-            type="button"
-          />
-          <svg
-            aria-hidden="true"
-            fill="#000"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-            />
-          </svg>
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: white"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
-            type="button"
-          />
-        </div>
-        <div
-          class="components-circular-option-picker__option-wrapper"
-        >
-          <button
-            aria-label="Color: blue"
-            aria-pressed="false"
-            class="components-button components-circular-option-picker__option"
-            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
-            type="button"
-          />
-        </div>
-      </div>
-      <div
-        class="components-circular-option-picker__custom-clear-wrapper"
-      >
-        <button
-          class="components-button components-circular-option-picker__clear is-tertiary"
-          type="button"
-        >
-          Clear
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/components/src/color-palette/test/index.tsx b/packages/components/src/color-palette/test/index.tsx
index 9918a530918af4..8d108469fba3a8 100644
--- a/packages/components/src/color-palette/test/index.tsx
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -1,107 +1,114 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import ColorPalette from '..';
 
-describe( 'ColorPalette', () => {
-	const colors = [
-		{ name: 'red', color: '#f00' },
-		{ name: 'white', color: '#fff' },
-		{ name: 'blue', color: '#00f' },
-	];
-	const currentColor = '#f00';
-	const onChange = jest.fn();
-
-	beforeEach( () => {
-		onChange.mockClear();
-	} );
+const EXAMPLE_COLORS = [
+	{ name: 'red', color: '#f00' },
+	{ name: 'green', color: '#0f0' },
+	{ name: 'blue', color: '#00f' },
+];
+const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
-	test( 'should render a dynamic toolbar of colors', () => {
-		const { container } = render(
-			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
-				onChange={ onChange }
-			/>
-		);
+const ControlledColorPalette = ( {
+	onChange,
+}: {
+	onChange?: ( newColor?: string ) => void;
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >( undefined );
 
-		expect( container ).toMatchSnapshot();
-	} );
+	return (
+		<ColorPalette
+			value={ color }
+			colors={ EXAMPLE_COLORS }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
+	);
+};
+
+describe( 'ColorPalette', () => {
+	it( 'should render three color button options', () => {
+		const onChange = jest.fn();
 
-	test( 'should render three color button options', () => {
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
 		expect(
-			screen.getAllByRole( 'button', { name: /^Color:/ } )
+			screen.getAllByRole( 'option', { name: /^Color:/ } )
 		).toHaveLength( 3 );
 	} );
 
-	test( 'should call onClick on an active button with undefined', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+	it( 'should call onClick on an active button with undefined', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
 		await user.click(
-			screen.getByRole( 'button', { name: /^Color:/, pressed: true } )
+			screen.getByRole( 'option', { name: /^Color:/, selected: true } )
 		);
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onClick on an inactive button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+	it( 'should call onClick on an inactive button', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
+		// Click the first unpressed button
+		// (i.e. a button representing a color that is not the current color)
 		await user.click(
-			screen.getAllByRole( 'button', {
+			screen.getAllByRole( 'option', {
 				name: /^Color:/,
-				pressed: false,
+				selected: false,
 			} )[ 0 ]
 		);
 
+		// Expect the green color to have been selected
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( '#fff' );
+		expect( onChange ).toHaveBeenCalledWith( EXAMPLE_COLORS[ 1 ].color, 1 );
 	} );
 
-	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -112,32 +119,57 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should allow disabling custom color picker', () => {
-		const { container } = render(
+	it( 'should render custom color picker', () => {
+		const onChange = jest.fn();
+
+		render(
 			<ColorPalette
-				colors={ colors }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^Custom color picker\./ } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should allow disabling custom color picker', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
 				disableCustomColors
-				value={ currentColor }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect(
+			screen.queryByRole( 'button', { name: /^Custom color picker\./ } )
+		).not.toBeInTheDocument();
 	} );
 
-	test( 'should render dropdown and its content', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+	it( 'should render dropdown and its content', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
+		// Check that custom color popover is not visible by default.
+		expect(
+			screen.queryByLabelText( 'Hex color' )
+		).not.toBeInTheDocument();
+
+		// Click the dropdown button while the dropdown is not expanded.
 		await user.click(
 			screen.getByRole( 'button', {
 				name: /^Custom color picker/,
@@ -145,20 +177,95 @@ describe( 'ColorPalette', () => {
 			} )
 		);
 
+		// Confirm the dropdown is now expanded, and the button is still visible.
 		const dropdownButton = screen.getByRole( 'button', {
 			name: /^Custom color picker/,
 			expanded: true,
 		} );
-
 		expect( dropdownButton ).toBeVisible();
 
+		// Check that the popover with custom color input has appeared.
+		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
+
+		await waitFor( () =>
+			expect( dropdownColorInput ).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should show the clear button by default', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should show the clear button even when `colors` is an empty array', () => {
+		const onChange = jest.fn();
+
+		render( <ColorPalette colors={ [] } onChange={ onChange } /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should display the selected color name and value', async () => {
+		const user = userEvent.setup();
+
+		render( <ControlledColorPalette /> );
+
+		const { name: colorName, color: colorCode } = EXAMPLE_COLORS[ 0 ];
+
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+
+		// Click the first unpressed button
+		await user.click(
+			screen.getAllByRole( 'option', {
+				name: /^Color:/,
+				selected: false,
+			} )[ 0 ]
+		);
+
+		// Confirm the correct color name, color value, and button label are used
 		expect(
-			within( dropdownButton ).getByText( colors[ 0 ].name )
+			screen.getByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
 		).toBeVisible();
 		expect(
-			within( dropdownButton ).getByText(
-				colors[ 0 ].color.replace( '#', '' )
-			)
+			screen.getByText( colorCode, {
+				selector: '.components-color-palette__custom-color-value',
+			} )
 		).toBeVisible();
+		expect(
+			screen.getByRole( 'button', {
+				name: `Custom color picker. The currently selected color is called "${ colorName }" and has a value of "${ colorCode }".`,
+				expanded: false,
+			} )
+		).toBeInTheDocument();
+
+		// Clear the color, confirm that the relative values are cleared/updated.
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
+		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
+		expect(
+			screen.queryByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
+		).not.toBeInTheDocument();
+		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker.$/,
+			} )
+		).toBeInTheDocument();
 	} );
 } );
diff --git a/packages/components/src/color-palette/test/utils.ts b/packages/components/src/color-palette/test/utils.ts
index bbb0d82c6e91d7..56acec5416ecbd 100644
--- a/packages/components/src/color-palette/test/utils.ts
+++ b/packages/components/src/color-palette/test/utils.ts
@@ -3,8 +3,8 @@
  */
 import {
 	extractColorNameFromCurrentValue,
-	showTransparentBackground,
-} from '../';
+	normalizeColorValue,
+} from '../utils';
 
 describe( 'ColorPalette: Utils', () => {
 	describe( 'extractColorNameFromCurrentValue', () => {
@@ -24,19 +24,39 @@ describe( 'ColorPalette: Utils', () => {
 			expect( result ).toBe( 'Blue' );
 		} );
 	} );
-	describe( 'showTransparentBackground', () => {
-		test( 'should return true for undefined color values', () => {
-			expect( showTransparentBackground( undefined ) ).toBe( true );
+
+	describe( 'normalizeColorValue', () => {
+		test( 'should return the value if the value argument is not a CSS variable', () => {
+			const element = document.createElement( 'div' );
+			expect( normalizeColorValue( '#ff0000', element ) ).toBe(
+				'#ff0000'
+			);
 		} );
-		test( 'should return true for transparent colors', () => {
-			expect( showTransparentBackground( 'transparent' ) ).toBe( true );
-			expect( showTransparentBackground( '#75757500' ) ).toBe( true );
+		test( 'should return the background color computed from an element if the value argument is a CSS variable', () => {
+			const element = document.createElement( 'div' );
+			element.style.backgroundColor = '#ff0000';
+			expect( normalizeColorValue( 'var(--red)', element ) ).toBe(
+				'#ff0000'
+			);
 		} );
-
-		test( 'should return false for non-transparent colors', () => {
-			expect( showTransparentBackground( '#FFF' ) ).toBe( false );
-			expect( showTransparentBackground( '#757575' ) ).toBe( false );
-			expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
+		test( 'should return the background color computed from an element if the value argument is a color mix', () => {
+			const element = document.createElement( 'div' );
+			element.style.backgroundColor = '#ff0000';
+			expect(
+				normalizeColorValue(
+					'color-mix(in oklab, #a71e14, white)',
+					element
+				)
+			).toBe( '#ff0000' );
+		} );
+		test( 'should return the value if the value argument is undefined', () => {
+			const element = document.createElement( 'div' );
+			expect( normalizeColorValue( undefined, element ) ).toBe(
+				undefined
+			);
+		} );
+		test( 'should return the value if the element argument is null', () => {
+			expect( normalizeColorValue( '#ff0000', null ) ).toBe( '#ff0000' );
 		} );
 	} );
 } );
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
index f9356634d3ef89..b2a7a884fec57d 100644
--- a/packages/components/src/color-palette/types.ts
+++ b/packages/components/src/color-palette/types.ts
@@ -1,12 +1,13 @@
 /**
  * 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';
+import type { HeadingSize } from '../heading/types';
 
 export type ColorObject = {
 	name: string;
@@ -24,9 +25,10 @@ type PaletteProps = {
 	/**
 	 * Callback called when a color is selected.
 	 */
-	onChange: ( newColor?: string ) => void;
+	onChange: ( newColor?: string, index?: number ) => void;
 	value?: string;
 	actions?: ReactNode;
+	headingLevel?: HeadingSize;
 };
 
 export type SinglePaletteProps = PaletteProps & {
@@ -37,15 +39,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' > & {
@@ -62,7 +57,7 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 *
 	 * @default []
 	 */
-	colors?: ( PaletteObject | ColorObject )[];
+	colors?: PaletteObject[] | ColorObject[];
 	/**
 	 * Whether to allow the user to pick a custom color on top of the predefined
 	 * choices (defined via the `colors` prop).
@@ -77,21 +72,53 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * @default false
 	 */
 	enableAlpha?: boolean;
+	/**
+	 * The heading level.
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
 	/**
 	 * Currently active value.
 	 */
 	value?: string;
 	/**
-	 * Whether the colors prop is an array of color palettes,
-	 * rather than an array of color objects.
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
 	 *
 	 * @default false
 	 */
-	__experimentalHasMultipleOrigins?: boolean;
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
 	/**
 	 * Whether this is rendered in the sidebar.
 	 *
 	 * @default false
 	 */
 	__experimentalIsRenderedInSidebar?: boolean;
-};
+} & (
+		| {
+				/**
+				 * A label to identify the purpose of the control.
+				 *
+				 * @todo [#54055] Either this or `aria-labelledby` should be required
+				 */
+				'aria-label'?: string;
+				'aria-labelledby'?: never;
+		  }
+		| {
+				/**
+				 * An ID of an element to provide a label for the control.
+				 *
+				 * @todo [#54055] Either this or `aria-label` should be required
+				 */
+				'aria-labelledby'?: string;
+				'aria-label'?: never;
+		  }
+	);
diff --git a/packages/components/src/color-palette/utils.ts b/packages/components/src/color-palette/utils.ts
new file mode 100644
index 00000000000000..19fd4b7252f639
--- /dev/null
+++ b/packages/components/src/color-palette/utils.ts
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { ColorObject, ColorPaletteProps, PaletteObject } from './types';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+/**
+ * Checks if a color value is a simple CSS color.
+ *
+ * @param value The color value to check.
+ * @return A boolean indicating whether the color value is a simple CSS color.
+ */
+const isSimpleCSSColor = ( value: string ): boolean => {
+	const valueIsCssVariable = /var\(/.test( value ?? '' );
+	const valueIsColorMix = /color-mix\(/.test( value ?? '' );
+	return ! valueIsCssVariable && ! valueIsColorMix;
+};
+
+export const extractColorNameFromCurrentValue = (
+	currentValue?: ColorPaletteProps[ 'value' ],
+	colors: ColorPaletteProps[ 'colors' ] = [],
+	showMultiplePalettes: boolean = false
+) => {
+	if ( ! currentValue ) {
+		return '';
+	}
+	const currentValueIsSimpleColor = currentValue
+		? isSimpleCSSColor( currentValue )
+		: false;
+	const normalizedCurrentValue = currentValueIsSimpleColor
+		? colord( currentValue ).toHex()
+		: currentValue;
+
+	// Normalize format of `colors` to simplify the following loop
+	type normalizedPaletteObject = { colors: ColorObject[] };
+	const colorPalettes: normalizedPaletteObject[] = showMultiplePalettes
+		? ( colors as PaletteObject[] )
+		: [ { colors: colors as ColorObject[] } ];
+	for ( const { colors: paletteColors } of colorPalettes ) {
+		for ( const { name: colorName, color: colorValue } of paletteColors ) {
+			const normalizedColorValue = currentValueIsSimpleColor
+				? colord( colorValue ).toHex()
+				: colorValue;
+
+			if ( normalizedCurrentValue === normalizedColorValue ) {
+				return colorName;
+			}
+		}
+	}
+
+	// translators: shown when the user has picked a custom color (i.e not in the palette of colors).
+	return __( 'Custom' );
+};
+
+// The PaletteObject type has a `colors` property (an array of ColorObject),
+// while the ColorObject type has a `color` property (the CSS color value).
+export const isMultiplePaletteObject = (
+	obj: PaletteObject | ColorObject
+): obj is PaletteObject =>
+	Array.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );
+
+export const isMultiplePaletteArray = (
+	arr: ( PaletteObject | ColorObject )[]
+): arr is PaletteObject[] => {
+	return (
+		arr.length > 0 &&
+		arr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )
+	);
+};
+
+/**
+ * Transform a CSS variable used as background color into the color value itself.
+ *
+ * @param value   The color value that may be a CSS variable.
+ * @param element The element for which to get the computed style.
+ * @return The background color value computed from a element.
+ */
+export const normalizeColorValue = (
+	value: string | undefined,
+	element: HTMLElement | null
+) => {
+	if ( ! value || ! element || isSimpleCSSColor( value ) ) {
+		return value;
+	}
+
+	const { ownerDocument } = element;
+	const { defaultView } = ownerDocument;
+	const computedBackgroundColor =
+		defaultView?.getComputedStyle( element ).backgroundColor;
+
+	return computedBackgroundColor
+		? colord( computedBackgroundColor ).toHex()
+		: value;
+};
diff --git a/packages/components/src/color-picker/README.md b/packages/components/src/color-picker/README.md
index 3aa595183ac735..ed6ab104cd26ab 100644
--- a/packages/components/src/color-picker/README.md
+++ b/packages/components/src/color-picker/README.md
@@ -5,6 +5,7 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { ColorPicker } from '@wordpress/components';
 
 function Example() {
@@ -30,13 +31,13 @@ The current color value to display in the picker. Must be a hex or hex8 string.
 
 ### `onChange`: `(hex8Color: string) => void`
 
-Fired when the color changes. Always passes a hex8 color string.
+Fired when the color changes. Always passes a hex or hex8 color string.
 
 - Required: No
 
 ### `enableAlpha`: `boolean`
 
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
 - Required: No
 - Default: `false`
diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index f5d7f2978ddfce..6e49fa7ae85e74 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -9,16 +9,17 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { CopyButton } from './styles';
-import { Text } from '../text';
-import { Tooltip } from '../ui/tooltip';
+import { Button } from '../button';
+import Tooltip from '../tooltip';
 
 import type { ColorCopyButtonProps } from './types';
 
 export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	const { color, colorType } = props;
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyTimerRef = useRef<
+		ReturnType< typeof setTimeout > | undefined
+	>();
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {
@@ -35,38 +36,33 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 			}
 		},
 		() => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
+			if ( copyTimerRef.current ) {
+				clearTimeout( copyTimerRef.current );
 			}
 			setCopiedColor( color.toHex() );
-			copyTimer.current = setTimeout( () => {
+			copyTimerRef.current = setTimeout( () => {
 				setCopiedColor( null );
-				copyTimer.current = undefined;
+				copyTimerRef.current = undefined;
 			}, 3000 );
 		}
 	);
 	useEffect( () => {
-		// Clear copyTimer on component unmount.
+		// Clear copyTimerRef on component unmount.
 		return () => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
+			if ( copyTimerRef.current ) {
+				clearTimeout( copyTimerRef.current );
 			}
 		};
 	}, [] );
 
+	const label =
+		copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );
+
 	return (
-		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
-			}
-			placement="bottom"
-		>
-			<CopyButton
-				isSmall
+		<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>
+			<Button
+				size="compact"
+				aria-label={ label }
 				ref={ copyRef }
 				icon={ copy }
 				showTooltip={ false }
diff --git a/packages/components/src/color-picker/color-input.tsx b/packages/components/src/color-picker/color-input.tsx
index c57077bb3e5fe6..486e1ea319c917 100644
--- a/packages/components/src/color-picker/color-input.tsx
+++ b/packages/components/src/color-picker/color-input.tsx
@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
 /**
  * Internal dependencies
  */
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-
-interface ColorInputProps {
-	colorType: 'hsl' | 'hex' | 'rgb';
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 
 export const ColorInput = ( {
 	colorType,
diff --git a/packages/components/src/color-picker/component.tsx b/packages/components/src/color-picker/component.tsx
index 9e4777aec3eecb..a2ddb6cd8ee4b6 100644
--- a/packages/components/src/color-picker/component.tsx
+++ b/packages/components/src/color-picker/component.tsx
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import { colord, extend, Colord } from 'colord';
+import type { Colord } from 'colord';
+import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
 /**
@@ -15,11 +16,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import { useContextSystem, contextConnect } from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,26 +29,18 @@ import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
 
-import type { ColorType } from './types';
+import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
-export interface ColorPickerProps {
-	enableAlpha?: boolean;
-	color?: string;
-	onChange?: ( color: string ) => void;
-	defaultValue?: string;
-	copyFormat?: ColorType;
-}
-
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const ColorPicker = (
-	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+const UnconnectedColorPicker = (
+	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
@@ -97,6 +86,8 @@ const ColorPicker = (
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
+						__nextHasNoMarginBottom
+						size="compact"
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>
@@ -104,6 +95,7 @@ const ColorPicker = (
 						}
 						label={ __( 'Color format' ) }
 						hideLabelFromVision
+						variant="minimal"
 					/>
 					<ColorCopyButton
 						color={ safeColordColor }
@@ -123,6 +115,9 @@ const ColorPicker = (
 	);
 };
 
-const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+export const ColorPicker = contextConnect(
+	UnconnectedColorPicker,
+	'ColorPicker'
+);
 
-export default ConnectedColorPicker;
+export default ColorPicker;
diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index b7c7032b284511..ef8b5356c0edc1 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -13,20 +13,16 @@ import { __ } from '@wordpress/i18n';
  */
 import { InputControl } from '../input-control';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
-
-interface HexInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
-		if ( ! nextValue ) return;
+		if ( ! nextValue ) {
+			return;
+		}
 		const hexValue = nextValue.startsWith( '#' )
 			? nextValue
 			: '#' + nextValue;
@@ -51,14 +47,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	return (
 		<InputControl
 			prefix={
-				<Spacer
-					as={ Text }
-					marginLeft={ space( 4 ) }
-					color={ COLORS.ui.theme }
-					lineHeight={ 1 }
-				>
-					#
-				</Spacer>
+				<InputControlPrefixWrapper>
+					<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+						#
+					</Text>
+				</InputControlPrefixWrapper>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
 			onChange={ handleChange }
diff --git a/packages/components/src/color-picker/hsl-input.tsx b/packages/components/src/color-picker/hsl-input.tsx
index c9766244665fb1..8d2b0c7c444899 100644
--- a/packages/components/src/color-picker/hsl-input.tsx
+++ b/packages/components/src/color-picker/hsl-input.tsx
@@ -1,21 +1,63 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const { h, s, l, a } = color.toHsl();
+	const colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );
+
+	const [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );
+
+	const isInternalColorSameAsReceivedColor = color.isEqual(
+		colord( internalHSLA )
+	);
+
+	useEffect( () => {
+		if ( ! isInternalColorSameAsReceivedColor ) {
+			// Keep internal HSLA color up to date with the received color prop
+			setInternalHSLA( colorPropHSLA );
+		}
+	}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );
+
+	// If the internal color is equal to the received color prop, we can use the
+	// HSLA values from the local state which, compared to the received color prop,
+	// retain more details about the actual H and S values that the user selected,
+	// and thus allow for better UX when interacting with the H and S sliders.
+	const colorValue = isInternalColorSameAsReceivedColor
+		? internalHSLA
+		: colorPropHSLA;
+
+	const updateHSLAValue = (
+		partialNewValue: Partial< typeof colorPropHSLA >
+	) => {
+		const nextOnChangeValue = colord( {
+			...colorValue,
+			...partialNewValue,
+		} );
+
+		// Fire `onChange` only if the resulting color is different from the
+		// current one.
+		// Otherwise, update the internal HSLA color to cause a re-render.
+		if ( ! color.isEqual( nextOnChangeValue ) ) {
+			onChange( nextOnChangeValue );
+		} else {
+			setInternalHSLA( ( prevHSLA ) => ( {
+				...prevHSLA,
+				...partialNewValue,
+			} ) );
+		}
+	};
 
 	return (
 		<>
@@ -24,9 +66,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ h }
+				value={ colorValue.h }
 				onChange={ ( nextH: number ) => {
-					onChange( colord( { h: nextH, s, l, a } ) );
+					updateHSLAValue( { h: nextH } );
 				} }
 			/>
 			<InputWithSlider
@@ -34,16 +76,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ s }
+				value={ colorValue.s }
 				onChange={ ( nextS: number ) => {
-					onChange(
-						colord( {
-							h,
-							s: nextS,
-							l,
-							a,
-						} )
-					);
+					updateHSLAValue( { s: nextS } );
 				} }
 			/>
 			<InputWithSlider
@@ -51,16 +86,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ l }
+				value={ colorValue.l }
 				onChange={ ( nextL: number ) => {
-					onChange(
-						colord( {
-							h,
-							s,
-							l: nextL,
-							a,
-						} )
-					);
+					updateHSLAValue( { l: nextL } );
 				} }
 			/>
 			{ enableAlpha && (
@@ -69,16 +97,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					max={ 100 }
 					label="Alpha"
 					abbreviation="A"
-					value={ Math.trunc( 100 * a ) }
+					value={ Math.trunc( 100 * colorValue.a ) }
 					onChange={ ( nextA: number ) => {
-						onChange(
-							colord( {
-								h,
-								s,
-								l,
-								a: nextA / 100,
-							} )
-						);
+						updateHSLAValue( { a: nextA / 100 } );
 					} }
 				/>
 			) }
diff --git a/packages/components/src/color-picker/hsv-color-picker.native.js b/packages/components/src/color-picker/hsv-color-picker.native.js
new file mode 100644
index 00000000000000..46499c94df5b3e
--- /dev/null
+++ b/packages/components/src/color-picker/hsv-color-picker.native.js
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { View, Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HuePicker from './hue-picker';
+import SaturationValuePicker from './saturation-picker';
+import styles from './style.native.scss';
+
+const HsvColorPicker = ( props ) => {
+	const maxWidth = Dimensions.get( 'window' ).width - 32;
+	const satValPickerRef = useRef( null );
+
+	const {
+		containerStyle = {},
+		currentColor,
+		huePickerContainerStyle = {},
+		huePickerBorderRadius = 0,
+		huePickerHue = 0,
+		huePickerBarWidth = maxWidth,
+		huePickerBarHeight = 12,
+		huePickerSliderSize = 24,
+		onHuePickerDragStart,
+		onHuePickerDragMove,
+		onHuePickerDragEnd,
+		onHuePickerDragTerminate,
+		onHuePickerPress,
+		satValPickerContainerStyle = {},
+		satValPickerBorderRadius = 0,
+		satValPickerSize = { width: maxWidth, height: 200 },
+		satValPickerSliderSize = 24,
+		satValPickerHue = 0,
+		satValPickerSaturation = 1,
+		satValPickerValue = 1,
+		onSatValPickerDragStart,
+		onSatValPickerDragMove,
+		onSatValPickerDragEnd,
+		onSatValPickerDragTerminate,
+		onSatValPickerPress,
+	} = props;
+
+	return (
+		<View
+			style={ [ styles[ 'hsv-container' ], containerStyle ] }
+			testID="hsv-color-picker"
+		>
+			<SaturationValuePicker
+				containerStyle={ satValPickerContainerStyle }
+				currentColor={ currentColor }
+				borderRadius={ satValPickerBorderRadius }
+				size={ satValPickerSize }
+				sliderSize={ satValPickerSliderSize }
+				hue={ satValPickerHue }
+				saturation={ satValPickerSaturation }
+				value={ satValPickerValue }
+				onDragStart={ onSatValPickerDragStart }
+				onDragMove={ onSatValPickerDragMove }
+				onDragEnd={ onSatValPickerDragEnd }
+				onDragTerminate={ onSatValPickerDragTerminate }
+				onPress={ onSatValPickerPress }
+				ref={ satValPickerRef }
+			/>
+			<HuePicker
+				containerStyle={ huePickerContainerStyle }
+				borderRadius={ huePickerBorderRadius }
+				hue={ huePickerHue }
+				barWidth={ huePickerBarWidth }
+				barHeight={ huePickerBarHeight }
+				sliderSize={ huePickerSliderSize }
+				onDragStart={ onHuePickerDragStart }
+				onDragMove={ onHuePickerDragMove }
+				onDragEnd={ onHuePickerDragEnd }
+				onDragTerminate={ onHuePickerDragTerminate }
+				onPress={ onHuePickerPress }
+			/>
+		</View>
+	);
+};
+
+export default HsvColorPicker;
diff --git a/packages/components/src/color-picker/hue-picker.native.js b/packages/components/src/color-picker/hue-picker.native.js
new file mode 100644
index 00000000000000..691e9396ee2d8d
--- /dev/null
+++ b/packages/components/src/color-picker/hue-picker.native.js
@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+import { Animated, View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export default class HuePicker extends Component {
+	constructor( props ) {
+		super( props );
+		this.hueColors = [
+			'#ff0000',
+			'#ffff00',
+			'#00ff00',
+			'#00ffff',
+			'#0000ff',
+			'#ff00ff',
+			'#ff0000',
+		];
+		this.sliderX = new Animated.Value(
+			( props.barHeight * props.hue ) / 360
+		);
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				this.dragStartValue = this.computeHueValuePress( evt );
+
+				if ( onPress ) {
+					onPress( {
+						hue: this.computeHueValuePress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;
+		const borderWidth = sliderSize / 10;
+		if ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {
+			this.sliderX.setValue(
+				( ( barWidth - sliderSize + borderWidth ) * hue ) / 360
+			);
+		}
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
+		return value;
+	}
+
+	getContainerStyle() {
+		const {
+			sliderSize = 24,
+			barHeight = 12,
+			containerStyle = {},
+		} = this.props;
+		const paddingLeft = sliderSize / 2;
+		const paddingTop =
+			sliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;
+		return [
+			styles[ 'hsv-container' ],
+			containerStyle,
+			{
+				paddingTop,
+				paddingBottom: paddingTop,
+				paddingLeft,
+				paddingRight: paddingLeft,
+			},
+		];
+	}
+
+	computeHueValueDrag( gestureState ) {
+		const { dx } = gestureState;
+		const { barWidth = 200 } = this.props;
+		const { dragStartValue } = this;
+		const diff = dx / barWidth;
+		const updatedHue =
+			this.normalizeValue( dragStartValue / 360 + diff ) * 360;
+		return updatedHue;
+	}
+
+	computeHueValuePress( event ) {
+		const { nativeEvent } = event;
+		const { locationX } = nativeEvent;
+		const { barWidth = 200 } = this.props;
+		const updatedHue = this.normalizeValue( locationX / barWidth ) * 360;
+		return updatedHue;
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				hue: this.computeHueValueDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	firePressEvent( event ) {
+		const { onPress } = this.props;
+		if ( onPress ) {
+			onPress( {
+				hue: this.computeHueValuePress( event ),
+				nativeEvent: event.nativeEvent,
+			} );
+		}
+	}
+
+	render() {
+		const { hueColors } = this;
+		const {
+			sliderSize = 24,
+			barWidth = 200,
+			barHeight = 12,
+			borderRadius = 0,
+		} = this.props;
+		const borderWidth = sliderSize / 10;
+		return (
+			<View
+				style={ this.getContainerStyle() }
+				{ ...this.panResponder.panHandlers }
+				hitSlop={ {
+					top: 10,
+					bottom: 10,
+					left: 0,
+					right: 0,
+				} }
+			>
+				<LinearGradient
+					colors={ hueColors }
+					style={ {
+						borderRadius,
+					} }
+					start={ { x: 0, y: 0 } }
+					end={ { x: 1, y: 0 } }
+				>
+					<View
+						style={ {
+							width: barWidth,
+							height: barHeight,
+						} }
+					/>
+				</LinearGradient>
+				<Animated.View
+					pointerEvents="none"
+					style={ [
+						styles[ 'hue-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							left: ( sliderSize - borderWidth ) / 2,
+							borderRadius: sliderSize / 2,
+							transform: [
+								{
+									translateX: this.sliderX,
+								},
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}
diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js
index 1dfd2353cad1cc..302de6b7d79b89 100644
--- a/packages/components/src/color-picker/index.native.js
+++ b/packages/components/src/color-picker/index.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import HsvColorPicker from 'react-native-hsv-color-picker';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 /**
@@ -10,13 +9,14 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon, check, close } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import HsvColorPicker from './hsv-color-picker.native.js';
+import BottomSheet from '../mobile/bottom-sheet';
 
 extend( [ namesPlugin ] );
 
@@ -82,9 +82,15 @@ function ColorPicker( {
 	const currentColor = combineToHex();
 
 	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
-		if ( h !== undefined ) setHue( h );
-		if ( s !== undefined ) setSaturation( s );
-		if ( v !== undefined ) setValue( v );
+		if ( h !== undefined ) {
+			setHue( h );
+		}
+		if ( s !== undefined ) {
+			setSaturation( s );
+		}
+		if ( v !== undefined ) {
+			setValue( v );
+		}
 		setColor( combineToHex( h, s, v ) );
 	};
 
@@ -105,7 +111,6 @@ function ColorPicker( {
 		// the hook’s dependencies and running it a single time. Ideally there
 		// may be a way to refactor and obviate the disabled lint rule. If not,
 		// this comment should be replaced by one that explains the reasoning.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	function onButtonPress( action ) {
@@ -122,6 +127,7 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
+				currentColor={ currentColor }
 				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
 					! isBottomSheetContentScrolling && updateColor
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index be09e789d7902e..221a9289f7450e 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -3,19 +3,10 @@
  */
 import { HStack } from '../h-stack';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
-
-interface InputWithSliderProps {
-	min: number;
-	max: number;
-	value: number;
-	label: string;
-	abbreviation: string;
-	onChange: ( value: number ) => void;
-}
+import type { InputWithSliderProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const InputWithSlider = ( {
 	min,
@@ -40,6 +31,7 @@ export const InputWithSlider = ( {
 	return (
 		<HStack spacing={ 4 }>
 			<NumberControlWrapper
+				__next40pxDefaultSize
 				min={ min }
 				max={ max }
 				label={ label }
@@ -47,19 +39,17 @@ export const InputWithSlider = ( {
 				value={ value }
 				onChange={ onNumberControlChange }
 				prefix={
-					<Spacer
-						as={ Text }
-						paddingLeft={ space( 4 ) }
-						color={ COLORS.ui.theme }
-						lineHeight={ 1 }
-					>
-						{ abbreviation }
-					</Spacer>
+					<InputControlPrefixWrapper>
+						<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+							{ abbreviation }
+						</Text>
+					</InputControlPrefixWrapper>
 				}
 				spinControls="none"
-				size="__unstable-large"
 			/>
 			<RangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ label }
 				hideLabelFromVision
 				min={ min }
diff --git a/packages/components/src/color-picker/legacy-adapter.tsx b/packages/components/src/color-picker/legacy-adapter.tsx
index ef119f263d92dc..4da460bc12bb78 100644
--- a/packages/components/src/color-picker/legacy-adapter.tsx
+++ b/packages/components/src/color-picker/legacy-adapter.tsx
@@ -2,10 +2,9 @@
  * Internal dependencies
  */
 import ColorPicker from './component';
+import type { LegacyAdapterProps } from './types';
 import { useDeprecatedProps } from './use-deprecated-props';
 
-type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
-
 export const LegacyAdapter = ( props: LegacyAdapterProps ) => {
 	return <ColorPicker { ...useDeprecatedProps( props ) } />;
 };
diff --git a/packages/components/src/color-picker/picker.tsx b/packages/components/src/color-picker/picker.tsx
index f48050a468d9e0..f2c068d8a46be2 100644
--- a/packages/components/src/color-picker/picker.tsx
+++ b/packages/components/src/color-picker/picker.tsx
@@ -2,17 +2,16 @@
  * External dependencies
  */
 import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-interface PickerProps {
-	color: Colord;
-	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 	const Component = enableAlpha
@@ -26,6 +25,16 @@ export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 			onChange={ ( nextColor ) => {
 				onChange( colord( nextColor ) );
 			} }
+			// Pointer capture fortifies drag gestures so that they continue to
+			// work while dragging outside the component over objects like
+			// iframes. If a newer version of react-colorful begins to employ
+			// pointer capture this will be redundant and should be removed.
+			onPointerDown={ ( { currentTarget, pointerId } ) => {
+				currentTarget.setPointerCapture( pointerId );
+			} }
+			onPointerUp={ ( { currentTarget, pointerId } ) => {
+				currentTarget.releasePointerCapture( pointerId );
+			} }
 		/>
 	);
 };
diff --git a/packages/components/src/color-picker/rgb-input.tsx b/packages/components/src/color-picker/rgb-input.tsx
index e2c51a32fd0635..21872db8472072 100644
--- a/packages/components/src/color-picker/rgb-input.tsx
+++ b/packages/components/src/color-picker/rgb-input.tsx
@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface RgbInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = color.toRgb();
diff --git a/packages/components/src/color-picker/saturation-picker.native.js b/packages/components/src/color-picker/saturation-picker.native.js
new file mode 100644
index 00000000000000..5ca35d257565ff
--- /dev/null
+++ b/packages/components/src/color-picker/saturation-picker.native.js
@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+import { View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+export default class SaturationValuePicker extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				const { saturation, value } = this.computeSatValPress( evt );
+				this.dragStartValue = {
+					saturation,
+					value,
+				};
+
+				if ( onPress ) {
+					onPress( {
+						...this.computeSatValPress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) {
+			return 0;
+		}
+		if ( value > 1 ) {
+			return 1;
+		}
+		return value;
+	}
+
+	computeSatValDrag( gestureState ) {
+		const { dx, dy } = gestureState;
+		const { size } = this.props;
+		const { saturation, value } = this.dragStartValue;
+		const diffx = dx / size.width;
+		const diffy = dy / size.height;
+		return {
+			saturation: this.normalizeValue( saturation + diffx ),
+			value: this.normalizeValue( value - diffy ),
+		};
+	}
+
+	computeSatValPress( event ) {
+		const { nativeEvent } = event;
+		const { locationX, locationY } = nativeEvent;
+		const { size } = this.props;
+		return {
+			saturation: this.normalizeValue( locationX / size.width ),
+			value: 1 - this.normalizeValue( locationY / size.height ),
+		};
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				...this.computeSatValDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	render() {
+		const {
+			size,
+			sliderSize = 24,
+			hue = 0,
+			value = 1,
+			saturation = 1,
+			containerStyle = {},
+			borderRadius = 0,
+			currentColor,
+		} = this.props;
+
+		return (
+			<View
+				style={ [
+					styles[ 'hsv-container' ],
+					containerStyle,
+					{
+						height: size.height + sliderSize,
+						width: size.width + sliderSize,
+					},
+				] }
+				{ ...this.panResponder.panHandlers }
+			>
+				<LinearGradient
+					style={ [
+						styles[ 'gradient-container' ],
+						{
+							borderRadius,
+						},
+					] }
+					colors={ [
+						'#fff',
+						colord( { h: hue, s: 100, l: 50 } ).toHex(),
+					] }
+					start={ { x: 0, y: 0.5 } }
+					end={ { x: 1, y: 0.5 } }
+				>
+					<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>
+						<View
+							style={ {
+								height: size.height,
+								width: size.width,
+							} }
+						/>
+					</LinearGradient>
+				</LinearGradient>
+				<View
+					pointerEvents="none"
+					style={ [
+						styles[ 'saturation-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							borderRadius: sliderSize / 2,
+							borderWidth: sliderSize / 10,
+							backgroundColor: currentColor,
+							transform: [
+								{ translateX: size.width * saturation },
+								{ translateY: size.height * ( 1 - value ) },
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
deleted file mode 100644
index 98bd612e631218..00000000000000
--- a/packages/components/src/color-picker/stories/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-import { Flex } from '../../flex';
-import { Spacer } from '../../spacer';
-import { space } from '../../ui/utils/space';
-
-export default {
-	component: ColorPicker,
-	title: 'Components/ColorPicker',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const PROP_UNSET = 'unset';
-
-const Example = () => {
-	const [ color, setColor ] = useState( undefined );
-	const props = {
-		enableAlpha: boolean( 'enableAlpha', false ),
-		copyFormat: select(
-			'copyFormat',
-			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
-			PROP_UNSET
-		),
-	};
-
-	if ( props.copyFormat === PROP_UNSET ) {
-		delete props.copyFormat;
-	}
-
-	return (
-		<Flex
-			as={ Spacer }
-			gap={ space( 2 ) }
-			justify="space-around"
-			align="flex-start"
-			marginTop={ space( 10 ) }
-		>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-		</Flex>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-const LegacyExample = () => {
-	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
-	const legacyProps = {
-		color: legacyColor,
-		onChangeComplete: setLegacyColor,
-		disableAlpha: boolean( 'disableAlpha', true ),
-	};
-
-	return (
-		<Flex align="flex-start" justify="flex-start">
-			<ColorPicker { ...legacyProps } />
-			<pre style={ { width: '20em' } }>
-				{ JSON.stringify( legacyColor, undefined, 4 ) }
-			</pre>
-		</Flex>
-	);
-};
-
-export const legacy = () => <LegacyExample />;
diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..0886719a7de52c
--- /dev/null
+++ b/packages/components/src/color-picker/stories/index.story.tsx
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+
+const meta: Meta< typeof ColorPicker > = {
+	component: ColorPicker,
+	title: 'Components/Selection & Input/Color/ColorPicker',
+	id: 'components-colorpicker',
+	argTypes: {
+		as: { control: false },
+		color: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ColorPicker > = {};
diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss
index 9932830e4e313d..248a464ae4ad82 100644
--- a/packages/components/src/color-picker/style.native.scss
+++ b/packages/components/src/color-picker/style.native.scss
@@ -62,3 +62,26 @@
 .pickerPointer {
 	height: 16px;
 }
+
+.hsv-container {
+	justify-content: center;
+	align-items: center;
+}
+
+.gradient-gontainer {
+	overflow: hidden;
+}
+
+.saturation-slider {
+	top: 0;
+	left: 0;
+	position: absolute;
+	border-color: $white;
+}
+
+.hue-slider {
+	position: absolute;
+	background-color: #fff;
+	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
+	z-index: 5;
+}
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 97a1171dd53beb..50ce33da9f2333 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -9,39 +9,23 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { StyledField } from '../base-control/styles/base-control-styles';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
-import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
-import {
-	BackdropUI,
-	Container as InputControlContainer,
-} from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
-	${ InputControlContainer } {
-		width: ${ space( 24 ) };
-	}
+	width: ${ space( 24 ) };
 `;
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
-	${ BackdropUI } {
-		display: none;
-	}
 `;
 
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
 	margin-right: ${ space( 2 ) };
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 // Make the Hue circle picker not go out of the bar.
@@ -81,7 +65,6 @@ export const ColorfulWrapper = styled.div`
 		align-items: center;
 		width: 216px;
 		height: auto;
-		overflow: hidden;
 	}
 
 	.react-colorful__saturation {
@@ -96,7 +79,7 @@ export const ColorfulWrapper = styled.div`
 	.react-colorful__alpha {
 		width: 184px;
 		height: 16px;
-		border-radius: 16px;
+		border-radius: ${ CONFIG.radiusFull };
 		margin-bottom: ${ space( 2 ) };
 	}
 
@@ -115,19 +98,4 @@ export const ColorfulWrapper = styled.div`
 	}
 
 	${ interactiveHueStyles }
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
-`;
-
-export const CopyButton = styled( Button )`
-	&&&&& {
-		min-width: ${ space( 6 ) };
-		padding: 0;
-
-		> svg {
-			margin-right: 0;
-		}
-	}
 `;
diff --git a/packages/components/src/color-picker/test/index.js b/packages/components/src/color-picker/test/index.js
deleted file mode 100644
index 3613302bbdc2a0..00000000000000
--- a/packages/components/src/color-picker/test/index.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ColorPicker } from '..';
-
-/**
- * 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
- * trying to select the appropriate element. We might as well just use the classname
- * on the container which will be more durable if, for example, the order changes.
- *
- * @param {HTMLElement} container
- * @return {HTMLElement} The saturation element
- */
-function getSaturation( container ) {
-	return container.querySelector(
-		'.react-colorful__saturation .react-colorful__interactive'
-	);
-}
-
-// Fix to pass `pageX` and `pageY`
-// See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends window.MouseEvent {
-	constructor( type, values = {} ) {
-		super( type, { buttons: 1, bubbles: true, ...values } );
-
-		Object.assign( this, {
-			pageX: values.pageX || 0,
-			pageY: values.pageY || 0,
-		} );
-	}
-}
-
-function moveReactColorfulSlider( sliderElement, from, to ) {
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
-}
-
-const sleep = ( ms ) => {
-	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
-	jest.advanceTimersByTime( ms + 1 );
-	return promise;
-};
-
-const hslaMatcher = expect.objectContaining( {
-	h: expect.any( Number ),
-	s: expect.any( Number ),
-	l: expect.any( Number ),
-	a: expect.any( Number ),
-} );
-
-const legacyColorMatcher = {
-	hex: expect.any( String ),
-	hsl: hslaMatcher,
-	hsv: expect.objectContaining( {
-		h: expect.any( Number ),
-		s: expect.any( Number ),
-		v: expect.any( Number ),
-		a: expect.any( Number ),
-	} ),
-	rgb: expect.objectContaining( {
-		r: expect.any( Number ),
-		g: expect.any( Number ),
-		b: expect.any( Number ),
-		a: expect.any( Number ),
-	} ),
-	oldHue: expect.any( Number ),
-	source: 'hex',
-};
-
-describe( 'ColorPicker', () => {
-	describe( 'legacy props', () => {
-		it( 'should fire onChangeComplete with the legacy color format', async () => {
-			const onChangeComplete = jest.fn();
-			const color = '#fff';
-
-			const { container } = render(
-				<ColorPicker
-					onChangeComplete={ onChangeComplete }
-					color={ color }
-				/>
-			);
-
-			const saturation = getSaturation( container );
-			moveReactColorfulSlider(
-				saturation,
-				{ pageX: 0, pageY: 0 },
-				{ pageX: 10, pageY: 10 }
-			);
-
-			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-			await sleep( 1 );
-
-			expect( onChangeComplete ).toHaveBeenCalledWith(
-				legacyColorMatcher
-			);
-		} );
-	} );
-
-	it( 'should fire onChange with the string value', async () => {
-		const onChange = jest.fn();
-		const color = 'rgba(1, 1, 1, 0.5)';
-
-		const { container } = render(
-			<ColorPicker onChange={ onChange } color={ color } enableAlpha />
-		);
-
-		const saturation = getSaturation( container );
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
-
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
-		);
-	} );
-
-	it( 'should fire onChange with the HSL value', async () => {
-		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			// Add alpha to prove it's ignored.
-			a: 0.5,
-		};
-
-		const { container } = render(
-			<ColorPicker
-				onChange={ onChange }
-				color={ color }
-				enableAlpha={ false }
-			/>
-		);
-
-		const saturation = getSaturation( container );
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
-
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
-
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
-		);
-	} );
-} );
diff --git a/packages/components/src/color-picker/test/index.tsx b/packages/components/src/color-picker/test/index.tsx
new file mode 100644
index 00000000000000..98e059d5994ded
--- /dev/null
+++ b/packages/components/src/color-picker/test/index.tsx
@@ -0,0 +1,345 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, screen, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '..';
+import { click } from '@ariakit/test';
+
+const hslaMatcher = expect.objectContaining( {
+	h: expect.any( Number ),
+	s: expect.any( Number ),
+	l: expect.any( Number ),
+	a: expect.any( Number ),
+} );
+
+const legacyColorMatcher = {
+	hex: expect.any( String ),
+	hsl: hslaMatcher,
+	hsv: expect.objectContaining( {
+		h: expect.any( Number ),
+		s: expect.any( Number ),
+		v: expect.any( Number ),
+		a: expect.any( Number ),
+	} ),
+	rgb: expect.objectContaining( {
+		r: expect.any( Number ),
+		g: expect.any( Number ),
+		b: expect.any( Number ),
+		a: expect.any( Number ),
+	} ),
+	oldHue: expect.any( Number ),
+	source: 'hex',
+};
+
+describe( 'ColorPicker', () => {
+	describe( 'legacy props', () => {
+		it( 'should fire onChangeComplete with the legacy color format', async () => {
+			const user = userEvent.setup();
+			const onChangeComplete = jest.fn();
+			const color = '#000';
+
+			render(
+				<ColorPicker
+					onChangeComplete={ onChangeComplete }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'hex' );
+
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
+
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
+
+			expect( onChangeComplete ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeComplete ).toHaveBeenLastCalledWith(
+				legacyColorMatcher
+			);
+		} );
+	} );
+	describe( 'Hex input', () => {
+		it( 'should fire onChange with the correct value from the hex input', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#000';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'hex' );
+
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
+
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
+
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#11aabb' );
+		} );
+	} );
+
+	describe.each( [
+		[ 'red', 'Red', '#7dffff' ],
+		[ 'green', 'Green', '#ff7dff' ],
+		[ 'blue', 'Blue', '#ffff7d' ],
+	] )( 'RGB inputs', ( colorInput, inputLabel, expected ) => {
+		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#fff';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'rgb' );
+
+			const inputElement = screen.getByRole( 'spinbutton', {
+				name: inputLabel,
+			} );
+			expect( inputElement ).toBeVisible();
+
+			await user.clear( inputElement );
+			await user.type( inputElement, '125' );
+
+			expect( onChange ).toHaveBeenCalledTimes( 4 );
+			expect( onChange ).toHaveBeenLastCalledWith( expected );
+		} );
+	} );
+
+	describe( 'HSL inputs', () => {
+		it( 'sliders should use accurate H and S values based on user interaction when possible', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const ControlledColorPicker = ( {
+				onChange: onChangeProp,
+				...restProps
+			}: React.ComponentProps< typeof ColorPicker > ) => {
+				const [ colorState, setColorState ] = useState( '#000000' );
+
+				const internalOnChange: typeof onChangeProp = ( newColor ) => {
+					onChangeProp?.( newColor );
+					setColorState( newColor );
+				};
+
+				return (
+					<>
+						<ColorPicker
+							{ ...restProps }
+							onChange={ internalOnChange }
+							color={ colorState }
+						/>
+						<button onClick={ () => setColorState( '#4d87ba' ) }>
+							Set color to #4d87ba
+						</button>
+					</>
+				);
+			};
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const hueSliders = screen.getAllByRole( 'slider', {
+				name: 'Hue',
+			} );
+			expect( hueSliders ).toHaveLength( 2 );
+
+			// Reason for the `!` post-fix expression operator: if the check above
+			// doesn't fail, we're guaranteed that `hueSlider` is not undefined.
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+			const lightnessNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Lightness',
+			} );
+
+			// All initial inputs should have a value of `0` since the color is black.
+			expect( hueSlider ).toHaveValue( '0' );
+			expect( saturationSlider ).toHaveValue( '0' );
+			expect( lightnessSlider ).toHaveValue( '0' );
+			expect( hueNumberInput ).toHaveValue( 0 );
+			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( lightnessNumberInput ).toHaveValue( 0 );
+
+			// Interact with the Hue slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still black.
+			fireEvent.change( hueSlider, { target: { value: 80 } } );
+
+			expect( hueSlider ).toHaveValue( '80' );
+			expect( hueNumberInput ).toHaveValue( 80 );
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Interact with the Saturation slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still black.
+			fireEvent.change( saturationSlider, { target: { value: 50 } } );
+
+			expect( saturationSlider ).toHaveValue( '50' );
+			expect( saturationNumberInput ).toHaveValue( 50 );
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Interact with the Lightness slider, it should change its value (and the
+			// value of the associated number input). It should also cause the
+			// `onChange` callback to fire, since changing the lightness actually
+			// causes the color to change.
+			fireEvent.change( lightnessSlider, { target: { value: 30 } } );
+
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '30' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 30 );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#597326' );
+
+			// Interact with the Lightness slider, setting to 100 (ie. white).
+			// It should also cause the `onChange` callback to fire, and reset the
+			// hue and saturation inputs to `0`.
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 100 );
+			expect( hueSlider ).toHaveValue( '0' );
+			expect( saturationSlider ).toHaveValue( '0' );
+			expect( hueNumberInput ).toHaveValue( 0 );
+			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
+
+			// Interact with the Hue slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still white.
+			fireEvent.change( hueSlider, { target: { value: 147 } } );
+
+			expect( hueSlider ).toHaveValue( '147' );
+			expect( hueNumberInput ).toHaveValue( 147 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			// Interact with the Saturation slider, it should change its value (and the
+			// value of the associated number input), but it shouldn't cause the
+			// `onChange` callback to fire, since the resulting color is still white.
+			fireEvent.change( saturationSlider, { target: { value: 82 } } );
+
+			expect( saturationSlider ).toHaveValue( '82' );
+			expect( saturationNumberInput ).toHaveValue( 82 );
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			// Interact with the Lightness slider, it should change its value (and the
+			// value of the associated number input). It should also cause the
+			// `onChange` callback to fire, since changing the lightness actually
+			// causes the color to change.
+			fireEvent.change( lightnessSlider, { target: { value: 14 } } );
+
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '14' )
+			);
+			expect( lightnessNumberInput ).toHaveValue( 14 );
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#064121' );
+
+			// Set the color externally. All inputs should update to match the H/S/L
+			// value of the new color.
+			const setColorButton = screen.getByRole( 'button', {
+				name: /set color/i,
+			} );
+			await click( setColorButton );
+
+			expect( hueSlider ).toHaveValue( '208' );
+			expect( hueNumberInput ).toHaveValue( 208 );
+			expect( saturationSlider ).toHaveValue( '44' );
+			expect( saturationNumberInput ).toHaveValue( 44 );
+			expect( lightnessSlider ).toHaveValue( '52' );
+			expect( lightnessNumberInput ).toHaveValue( 52 );
+		} );
+
+		describe.each( [
+			[ 'hue', 'Hue', '#aad52a' ],
+			[ 'saturation', 'Saturation', '#20dfdf' ],
+			[ 'lightness', 'Lightness', '#95eaea' ],
+		] )( 'HSL inputs', ( colorInput, inputLabel, expected ) => {
+			it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+				const user = userEvent.setup();
+				const onChange = jest.fn();
+				const color = '#2ad5d5';
+
+				render(
+					<ColorPicker
+						onChange={ onChange }
+						color={ color }
+						enableAlpha={ false }
+					/>
+				);
+
+				const formatSelector = screen.getByRole( 'combobox' );
+				expect( formatSelector ).toBeVisible();
+
+				await user.selectOptions( formatSelector, 'hsl' );
+
+				const inputElement = screen.getByRole( 'spinbutton', {
+					name: inputLabel,
+				} );
+				expect( inputElement ).toBeVisible();
+
+				await user.clear( inputElement );
+				await user.type( inputElement, '75' );
+
+				expect( onChange ).toHaveBeenCalledTimes( 3 );
+				expect( onChange ).toHaveBeenLastCalledWith( expected );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/color-picker/types.ts b/packages/components/src/color-picker/types.ts
index b2f9d2bc3739f4..5f98404c528444 100644
--- a/packages/components/src/color-picker/types.ts
+++ b/packages/components/src/color-picker/types.ts
@@ -1,10 +1,137 @@
 /**
  * External dependencies
  */
-import type { Colord } from 'colord';
+import type {
+	Colord,
+	HslColor,
+	HsvaColor,
+	HsvColor,
+	RgbaColor,
+	RgbColor,
+} from 'colord';
+import type { HslaColor } from 'react-colorful';
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { useDeprecatedProps } from './use-deprecated-props';
 
 export type ColorType = 'rgb' | 'hsl' | 'hex';
 export type ColorCopyButtonProps = {
 	color: Colord;
 	colorType: ColorType;
 };
+
+export type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
+
+export type ColorPickerProps = WordPressComponentProps<
+	{
+		/**
+		 * When `true` the color picker will display the alpha channel both in
+		 * the bottom inputs as well as in the color picker itself.
+		 *
+		 * @default false
+		 */
+		enableAlpha?: boolean;
+		/**
+		 * The current color value to display in the picker.
+		 * Must be a hex or hex8 string.
+		 */
+		color?: string;
+		/**
+		 * Fired when the color changes. Always passes a hex or hex8 color string.
+		 */
+		onChange?: ( color: string ) => void;
+		/**
+		 * An optional default value to use for the color picker.
+		 */
+		defaultValue?: string;
+		/**
+		 * The format to copy when clicking the displayed color format.
+		 */
+		copyFormat?: ColorType;
+	},
+	'div',
+	false
+>;
+
+export interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export interface ColorInputProps {
+	colorType: 'hsl' | 'hex' | 'rgb';
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface InputWithSliderProps {
+	min: number;
+	max: number;
+	value: number;
+	label: string;
+	abbreviation: string;
+	onChange: ( value: number ) => void;
+}
+
+export interface HexInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface HslInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface RgbInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+/**
+ * @deprecated
+ */
+export type LegacyColor =
+	| string
+	| {
+			hex: string;
+			hsl: HslColor | HslaColor;
+			hsv: HsvColor | HsvaColor;
+			rgb: RgbColor | RgbaColor;
+			/**
+			 * @deprecated
+			 */
+			oldHue: number;
+			/**
+			 * @deprecated
+			 */
+			source: 'hex';
+	  };
+
+/**
+ * @deprecated
+ */
+export interface LegacyProps {
+	color?: LegacyColor;
+	/**
+	 * @deprecated
+	 */
+	onChangeComplete: ( colors: LegacyColor ) => void;
+	/**
+	 * @deprecated
+	 */
+	oldHue: string;
+	className: string;
+	/**
+	 * @deprecated
+	 */
+	disableAlpha: boolean;
+	onChange?: never;
+}
diff --git a/packages/components/src/color-picker/use-deprecated-props.ts b/packages/components/src/color-picker/use-deprecated-props.ts
index a2cae51d202f19..68820af887a944 100644
--- a/packages/components/src/color-picker/use-deprecated-props.ts
+++ b/packages/components/src/color-picker/use-deprecated-props.ts
@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	colord,
-	HslColor,
-	HslaColor,
-	HsvColor,
-	HsvaColor,
-	RgbColor,
-	RgbaColor,
-} from 'colord';
-import type { ComponentProps } from 'react';
+import { colord } from 'colord';
 import memoize from 'memize';
 
 /**
@@ -21,49 +12,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type ColorPicker from './component';
-
-type ColorPickerProps = ComponentProps< typeof ColorPicker >;
-
-/**
- * @deprecated
- */
-type LegacyColor =
-	| string
-	| {
-			hex: string;
-			hsl: HslColor | HslaColor;
-			hsv: HsvColor | HsvaColor;
-			rgb: RgbColor | RgbaColor;
-			/**
-			 * @deprecated
-			 */
-			oldHue: number;
-			/**
-			 * @deprecated
-			 */
-			source: 'hex';
-	  };
-
-/**
- * @deprecated
- */
-export interface LegacyProps {
-	color?: LegacyColor;
-	/**
-	 * @deprecated
-	 */
-	onChangeComplete: ( colors: LegacyColor ) => void;
-	/**
-	 * @deprecated
-	 */
-	oldHue: string;
-	className: string;
-	/**
-	 * @deprecated
-	 */
-	disableAlpha: boolean;
-}
+import type { ColorPickerProps, LegacyColor, LegacyProps } from './types';
 
 function isLegacyProps( props: any ): props is LegacyProps {
 	return (
@@ -76,11 +25,17 @@ function isLegacyProps( props: any ): props is LegacyProps {
 function getColorFromLegacyProps(
 	color: LegacyProps[ 'color' ]
 ): string | undefined {
-	if ( color === undefined ) return;
+	if ( color === undefined ) {
+		return;
+	}
 
-	if ( typeof color === 'string' ) return color;
+	if ( typeof color === 'string' ) {
+		return color;
+	}
 
-	if ( color.hex ) return color.hex;
+	if ( color.hex ) {
+		return color.hex;
+	}
 
 	return undefined;
 }
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index f6e81d2cff3513..4089cf9c56e9b5 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -2,12 +2,6 @@
 
 `ComboboxControl` is an enhanced version of a [`SelectControl`](/packages/components/src/select-control/README.md), with the addition of being able to search for options using a search input.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/README.md#design-guidelines), but this component is better suited for when there are too many items to scroll through or load at once so you need to filter them based on user input.
@@ -17,11 +11,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
 ### Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
+import { useState } from 'react';
 import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const options = [
 	{
@@ -36,10 +27,6 @@ const options = [
 		value: 'large',
 		label: 'Large',
 	},
-	{
-		value: 'huge',
-		label: 'Huge',
-	},
 ];
 
 function MyComboboxControl() {
@@ -47,6 +34,8 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -54,9 +43,7 @@ function MyComboboxControl() {
 			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
-						option.label
-							.toLowerCase()
-							.startsWith( inputValue.toLowerCase() )
+						option.value === inputValue
 					)
 				)
 			}
@@ -92,41 +79,73 @@ If this property is added, a help text will be generated using help property as
 
 The options that can be chosen from.
 
--   Type: `Array<{ value: String, label: String }>`
+-   Type: `Array<{ value: string, label: string, disabled?: boolean }>`
 -   Required: Yes
 
 #### onFilterValueChange
 
-Function called with the control's search input value changes. The argument contains the next input value.
+Function called when the control's search input value changes. The argument contains the next input value.
 
--   Type: `Function`
+-   Type: `( value: string ) => void`
 -   Required: No
 
 #### onChange
 
 Function called with the selected value changes.
 
--   Type: `Function`
+-   Type: `( value: string | null | undefined ) => void`
 -   Required: No
 
 #### value
 
-The current value of the input.
+The current value of the control.
 
--   Type: `mixed`
--   Required: Yes
+-   Type: `string | null`
+-   Required: No
+
+#### expandOnFocus
+
+Automatically expand the dropdown when the control is focused.
+If the control is clicked, the dropdown will expand regardless of this prop.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+### placeholder
+
+If passed, the combobox input will show a placeholder string if no values are present.
+
+-   Type: `string`
+-   Required: No
 
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
 
--   Type: `Function` - `( args: { item: object } ) => ReactNode`
+-   Type: `( args: { item: object } ) => ReactNode`
+-   Required: No
+
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
 -   Required: No
+-   Default: `false`
 
 ## Related components
 
--   Like this component, but without a search input, the `CustomSelectControl` component.
+-   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.
 
--   To select one option from a set, when you want to show all the available options at once, use the `Radio` component.
--   To select one or more items from a set, use the `CheckboxControl` component.
--   To toggle a single setting on or off, use the `ToggleControl` component.
+-   To select one option from a set, when you want to show all the available options at once, use the [`RadioControl`](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/) component.
+-   To select one or more items from a set, use the [`CheckboxControl`](https://developer.wordpress.org/block-editor/reference-guides/components/checkbox-control/) component.
+-   To toggle a single setting on or off, use the [`ToggleControl`](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/) component.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
deleted file mode 100644
index eae04e09d8cf71..00000000000000
--- a/packages/components/src/combobox-control/index.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	Component,
-	useState,
-	useMemo,
-	useRef,
-	useEffect,
-} from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
-import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { InputWrapperFlex } from './styles';
-import TokenInput from '../form-token-field/token-input';
-import SuggestionsList from '../form-token-field/suggestions-list';
-import BaseControl from '../base-control';
-import Button from '../button';
-import { FlexBlock, FlexItem } from '../flex';
-import withFocusOutside from '../higher-order/with-focus-outside';
-import { useControlledValue } from '../utils/hooks';
-import { normalizeTextString } from '../utils/strings';
-
-const noop = () => {};
-
-const DetectOutside = withFocusOutside(
-	class extends Component {
-		handleFocusOutside( event ) {
-			this.props.onFocusOutside( event );
-		}
-
-		render() {
-			return this.props.children;
-		}
-	}
-);
-
-function ComboboxControl( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMarginBottom = false,
-	__next36pxDefaultSize,
-	value: valueProp,
-	label,
-	options,
-	onChange: onChangeProp,
-	onFilterValueChange = noop,
-	hideLabelFromVision,
-	help,
-	allowReset = true,
-	className,
-	messages = {
-		selected: __( 'Item selected.' ),
-	},
-	__experimentalRenderItem,
-} ) {
-	const [ value, setValue ] = useControlledValue( {
-		value: valueProp,
-		onChange: onChangeProp,
-	} );
-
-	const currentOption = options.find( ( option ) => option.value === value );
-	const currentLabel = currentOption?.label ?? '';
-	// Use a custom prefix when generating the `instanceId` to avoid having
-	// duplicate input IDs when rendering this component and `FormTokenField`
-	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
-	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
-	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
-		currentOption || null
-	);
-	const [ isExpanded, setIsExpanded ] = useState( false );
-	const [ inputHasFocus, setInputHasFocus ] = useState( false );
-	const [ inputValue, setInputValue ] = useState( '' );
-	const inputContainer = useRef();
-
-	const matchingSuggestions = useMemo( () => {
-		const startsWithMatch = [];
-		const containsMatch = [];
-		const match = normalizeTextString( inputValue );
-		options.forEach( ( option ) => {
-			const index = normalizeTextString( option.label ).indexOf( match );
-			if ( index === 0 ) {
-				startsWithMatch.push( option );
-			} else if ( index > 0 ) {
-				containsMatch.push( option );
-			}
-		} );
-
-		return startsWithMatch.concat( containsMatch );
-	}, [ inputValue, options ] );
-
-	const onSuggestionSelected = ( newSelectedSuggestion ) => {
-		setValue( newSelectedSuggestion.value );
-		speak( messages.selected, 'assertive' );
-		setSelectedSuggestion( newSelectedSuggestion );
-		setInputValue( '' );
-		setIsExpanded( false );
-	};
-
-	const handleArrowNavigation = ( offset = 1 ) => {
-		const index = matchingSuggestions.indexOf( selectedSuggestion );
-		let nextIndex = index + offset;
-		if ( nextIndex < 0 ) {
-			nextIndex = matchingSuggestions.length - 1;
-		} else if ( nextIndex >= matchingSuggestions.length ) {
-			nextIndex = 0;
-		}
-		setSelectedSuggestion( matchingSuggestions[ nextIndex ] );
-		setIsExpanded( true );
-	};
-
-	const onKeyDown = ( event ) => {
-		let preventDefault = false;
-
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		switch ( event.code ) {
-			case 'Enter':
-				if ( selectedSuggestion ) {
-					onSuggestionSelected( selectedSuggestion );
-					preventDefault = true;
-				}
-				break;
-			case 'ArrowUp':
-				handleArrowNavigation( -1 );
-				preventDefault = true;
-				break;
-			case 'ArrowDown':
-				handleArrowNavigation( 1 );
-				preventDefault = true;
-				break;
-			case 'Escape':
-				setIsExpanded( false );
-				setSelectedSuggestion( null );
-				preventDefault = true;
-				break;
-			default:
-				break;
-		}
-
-		if ( preventDefault ) {
-			event.preventDefault();
-		}
-	};
-
-	const onBlur = () => {
-		setInputHasFocus( false );
-	};
-
-	const onFocus = () => {
-		setInputHasFocus( true );
-		setIsExpanded( true );
-		onFilterValueChange( '' );
-		setInputValue( '' );
-	};
-
-	const onFocusOutside = () => {
-		setIsExpanded( false );
-	};
-
-	const onInputChange = ( event ) => {
-		const text = event.value;
-		setInputValue( text );
-		onFilterValueChange( text );
-		if ( inputHasFocus ) {
-			setIsExpanded( true );
-		}
-	};
-
-	const handleOnReset = () => {
-		setValue( null );
-		inputContainer.current.focus();
-	};
-
-	// Update current selections when the filter input changes.
-	useEffect( () => {
-		const hasMatchingSuggestions = matchingSuggestions.length > 0;
-		const hasSelectedMatchingSuggestions =
-			matchingSuggestions.indexOf( selectedSuggestion ) > 0;
-
-		if ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {
-			// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
-			setSelectedSuggestion( matchingSuggestions[ 0 ] );
-		}
-	}, [ matchingSuggestions, selectedSuggestion ] );
-
-	// Announcements.
-	useEffect( () => {
-		const hasMatchingSuggestions = matchingSuggestions.length > 0;
-		if ( isExpanded ) {
-			const message = hasMatchingSuggestions
-				? sprintf(
-						/* translators: %d: number of results. */
-						_n(
-							'%d result found, use up and down arrow keys to navigate.',
-							'%d results found, use up and down arrow keys to navigate.',
-							matchingSuggestions.length
-						),
-						matchingSuggestions.length
-				  )
-				: __( 'No results.' );
-
-			speak( message, 'polite' );
-		}
-	}, [ matchingSuggestions, isExpanded ] );
-
-	// Disable reason: There is no appropriate role which describes the
-	// input container intended accessible usability.
-	// TODO: Refactor click detection to use blur to stop propagation.
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
-	return (
-		<DetectOutside onFocusOutside={ onFocusOutside }>
-			<BaseControl
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				className={ classnames(
-					className,
-					'components-combobox-control'
-				) }
-				tabIndex="-1"
-				label={ label }
-				id={ `components-form-token-input-${ instanceId }` }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-			>
-				<div
-					className="components-combobox-control__suggestions-container"
-					tabIndex="-1"
-					onKeyDown={ onKeyDown }
-				>
-					<InputWrapperFlex
-						__next36pxDefaultSize={ __next36pxDefaultSize }
-					>
-						<FlexBlock>
-							<TokenInput
-								className="components-combobox-control__input"
-								instanceId={ instanceId }
-								ref={ inputContainer }
-								value={ isExpanded ? inputValue : currentLabel }
-								onFocus={ onFocus }
-								onBlur={ onBlur }
-								isExpanded={ isExpanded }
-								selectedSuggestionIndex={ matchingSuggestions.indexOf(
-									selectedSuggestion
-								) }
-								onChange={ onInputChange }
-							/>
-						</FlexBlock>
-						{ allowReset && (
-							<FlexItem>
-								<Button
-									className="components-combobox-control__reset"
-									icon={ closeSmall }
-									disabled={ ! value }
-									onClick={ handleOnReset }
-									label={ __( 'Reset' ) }
-								/>
-							</FlexItem>
-						) }
-					</InputWrapperFlex>
-					{ isExpanded && (
-						<SuggestionsList
-							instanceId={ instanceId }
-							match={ { label: inputValue } }
-							displayTransform={ ( suggestion ) =>
-								suggestion.label
-							}
-							suggestions={ matchingSuggestions }
-							selectedIndex={ matchingSuggestions.indexOf(
-								selectedSuggestion
-							) }
-							onHover={ setSelectedSuggestion }
-							onSelect={ onSuggestionSelected }
-							scrollIntoView
-							__experimentalRenderItem={
-								__experimentalRenderItem
-							}
-						/>
-					) }
-				</div>
-			</BaseControl>
-		</DetectOutside>
-	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
-}
-
-export default ComboboxControl;
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
new file mode 100644
index 00000000000000..28510c8653d02e
--- /dev/null
+++ b/packages/components/src/combobox-control/index.tsx
@@ -0,0 +1,408 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	Component,
+	useState,
+	useMemo,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { InputWrapperFlex } from './styles';
+import TokenInput from '../form-token-field/token-input';
+import SuggestionsList from '../form-token-field/suggestions-list';
+import BaseControl from '../base-control';
+import Button from '../button';
+import { FlexBlock } from '../flex';
+import withFocusOutside from '../higher-order/with-focus-outside';
+import { useControlledValue } from '../utils/hooks';
+import { normalizeTextString } from '../utils/strings';
+import type { ComboboxControlOption, ComboboxControlProps } from './types';
+import type { TokenInputProps } from '../form-token-field/types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+const noop = () => {};
+
+interface DetectOutsideComponentProps {
+	onFocusOutside: ( event: React.FocusEvent ) => void;
+	children?: React.ReactNode;
+}
+
+const DetectOutside = withFocusOutside(
+	class extends Component< DetectOutsideComponentProps > {
+		handleFocusOutside( event: React.FocusEvent ) {
+			this.props.onFocusOutside( event );
+		}
+
+		render() {
+			return this.props.children;
+		}
+	}
+);
+
+const getIndexOfMatchingSuggestion = (
+	selectedSuggestion: ComboboxControlOption | null,
+	matchingSuggestions: ComboboxControlOption[]
+) =>
+	selectedSuggestion === null
+		? -1
+		: matchingSuggestions.indexOf( selectedSuggestion );
+
+/**
+ * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of
+ * being able to search for options using a search input.
+ *
+ * ```jsx
+ * import { ComboboxControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const options = [
+ * 	{
+ * 		value: 'small',
+ * 		label: 'Small',
+ * 	},
+ * 	{
+ * 		value: 'normal',
+ * 		label: 'Normal',
+ * 		disabled: true,
+ * 	},
+ * 	{
+ * 		value: 'large',
+ * 		label: 'Large',
+ * 		disabled: false,
+ * 	},
+ * ];
+ *
+ * function MyComboboxControl() {
+ * 	const [ fontSize, setFontSize ] = useState();
+ * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
+ * 	return (
+ * 		<ComboboxControl
+ * 			__next40pxDefaultSize
+ * 			__nextHasNoMarginBottom
+ * 			label="Font Size"
+ * 			value={ fontSize }
+ * 			onChange={ setFontSize }
+ * 			options={ filteredOptions }
+ * 			onFilterValueChange={ ( inputValue ) =>
+ * 				setFilteredOptions(
+ * 					options.filter( ( option ) =>
+ * 						option.label
+ * 							.toLowerCase()
+ * 							.startsWith( inputValue.toLowerCase() )
+ * 					)
+ * 				)
+ * 			}
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
+function ComboboxControl( props: ComboboxControlProps ) {
+	const {
+		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
+		value: valueProp,
+		label,
+		options,
+		onChange: onChangeProp,
+		onFilterValueChange = noop,
+		hideLabelFromVision,
+		help,
+		allowReset = true,
+		className,
+		messages = {
+			selected: __( 'Item selected.' ),
+		},
+		__experimentalRenderItem,
+		expandOnFocus = true,
+		placeholder,
+	} = useDeprecated36pxDefaultSizeProp( props );
+
+	const [ value, setValue ] = useControlledValue( {
+		value: valueProp,
+		onChange: onChangeProp,
+	} );
+
+	const currentOption = options.find( ( option ) => option.value === value );
+	const currentLabel = currentOption?.label ?? '';
+	// Use a custom prefix when generating the `instanceId` to avoid having
+	// duplicate input IDs when rendering this component and `FormTokenField`
+	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
+	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
+	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
+		currentOption || null
+	);
+	const [ isExpanded, setIsExpanded ] = useState( false );
+	const [ inputHasFocus, setInputHasFocus ] = useState( false );
+	const [ inputValue, setInputValue ] = useState( '' );
+	const inputContainer = useRef< HTMLInputElement >( null );
+
+	const matchingSuggestions = useMemo( () => {
+		const startsWithMatch: ComboboxControlOption[] = [];
+		const containsMatch: ComboboxControlOption[] = [];
+		const match = normalizeTextString( inputValue );
+		options.forEach( ( option ) => {
+			const index = normalizeTextString( option.label ).indexOf( match );
+			if ( index === 0 ) {
+				startsWithMatch.push( option );
+			} else if ( index > 0 ) {
+				containsMatch.push( option );
+			}
+		} );
+
+		return startsWithMatch.concat( containsMatch );
+	}, [ inputValue, options ] );
+
+	const onSuggestionSelected = (
+		newSelectedSuggestion: ComboboxControlOption
+	) => {
+		if ( newSelectedSuggestion.disabled ) {
+			return;
+		}
+
+		setValue( newSelectedSuggestion.value );
+		speak( messages.selected, 'assertive' );
+		setSelectedSuggestion( newSelectedSuggestion );
+		setInputValue( '' );
+		setIsExpanded( false );
+	};
+
+	const handleArrowNavigation = ( offset = 1 ) => {
+		const index = getIndexOfMatchingSuggestion(
+			selectedSuggestion,
+			matchingSuggestions
+		);
+		let nextIndex = index + offset;
+		if ( nextIndex < 0 ) {
+			nextIndex = matchingSuggestions.length - 1;
+		} else if ( nextIndex >= matchingSuggestions.length ) {
+			nextIndex = 0;
+		}
+		setSelectedSuggestion( matchingSuggestions[ nextIndex ] );
+		setIsExpanded( true );
+	};
+
+	const onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+		withIgnoreIMEEvents( ( event ) => {
+			let preventDefault = false;
+
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			switch ( event.code ) {
+				case 'Enter':
+					if ( selectedSuggestion ) {
+						onSuggestionSelected( selectedSuggestion );
+						preventDefault = true;
+					}
+					break;
+				case 'ArrowUp':
+					handleArrowNavigation( -1 );
+					preventDefault = true;
+					break;
+				case 'ArrowDown':
+					handleArrowNavigation( 1 );
+					preventDefault = true;
+					break;
+				case 'Escape':
+					setIsExpanded( false );
+					setSelectedSuggestion( null );
+					preventDefault = true;
+					break;
+				default:
+					break;
+			}
+
+			if ( preventDefault ) {
+				event.preventDefault();
+			}
+		} );
+
+	const onBlur = () => {
+		setInputHasFocus( false );
+	};
+
+	const onFocus = () => {
+		setInputHasFocus( true );
+		if ( expandOnFocus ) {
+			setIsExpanded( true );
+		}
+
+		onFilterValueChange( '' );
+		setInputValue( '' );
+	};
+
+	const onClick = () => {
+		setIsExpanded( true );
+	};
+
+	const onFocusOutside = () => {
+		setIsExpanded( false );
+	};
+
+	const onInputChange: TokenInputProps[ 'onChange' ] = ( event ) => {
+		const text = event.value;
+		setInputValue( text );
+		onFilterValueChange( text );
+		if ( inputHasFocus ) {
+			setIsExpanded( true );
+		}
+	};
+
+	const handleOnReset = () => {
+		setValue( null );
+		inputContainer.current?.focus();
+	};
+
+	// Stop propagation of the keydown event when pressing Enter on the Reset
+	// button to prevent calling the onKeydown callback on the container div
+	// element which actually sets the selected suggestion.
+	const handleResetStopPropagation: React.KeyboardEventHandler<
+		HTMLButtonElement
+	> = ( event ) => {
+		event.stopPropagation();
+	};
+
+	// Update current selections when the filter input changes.
+	useEffect( () => {
+		const hasMatchingSuggestions = matchingSuggestions.length > 0;
+		const hasSelectedMatchingSuggestions =
+			getIndexOfMatchingSuggestion(
+				selectedSuggestion,
+				matchingSuggestions
+			) > 0;
+
+		if ( hasMatchingSuggestions && ! hasSelectedMatchingSuggestions ) {
+			// If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
+			setSelectedSuggestion( matchingSuggestions[ 0 ] );
+		}
+	}, [ matchingSuggestions, selectedSuggestion ] );
+
+	// Announcements.
+	useEffect( () => {
+		const hasMatchingSuggestions = matchingSuggestions.length > 0;
+		if ( isExpanded ) {
+			const message = hasMatchingSuggestions
+				? sprintf(
+						/* translators: %d: number of results. */
+						_n(
+							'%d result found, use up and down arrow keys to navigate.',
+							'%d results found, use up and down arrow keys to navigate.',
+							matchingSuggestions.length
+						),
+						matchingSuggestions.length
+				  )
+				: __( 'No results.' );
+
+			speak( message, 'polite' );
+		}
+	}, [ matchingSuggestions, isExpanded ] );
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'ComboboxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
+	// Disable reason: There is no appropriate role which describes the
+	// input container intended accessible usability.
+	// TODO: Refactor click detection to use blur to stop propagation.
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<DetectOutside onFocusOutside={ onFocusOutside }>
+			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__associatedWPComponentName="ComboboxControl"
+				className={ clsx( className, 'components-combobox-control' ) }
+				label={ label }
+				id={ `components-form-token-input-${ instanceId }` }
+				hideLabelFromVision={ hideLabelFromVision }
+				help={ help }
+			>
+				<div
+					className="components-combobox-control__suggestions-container"
+					tabIndex={ -1 }
+					onKeyDown={ onKeyDown }
+				>
+					<InputWrapperFlex
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+					>
+						<FlexBlock>
+							<TokenInput
+								className="components-combobox-control__input"
+								instanceId={ instanceId }
+								ref={ inputContainer }
+								placeholder={ placeholder }
+								value={ isExpanded ? inputValue : currentLabel }
+								onFocus={ onFocus }
+								onBlur={ onBlur }
+								onClick={ onClick }
+								isExpanded={ isExpanded }
+								selectedSuggestionIndex={ getIndexOfMatchingSuggestion(
+									selectedSuggestion,
+									matchingSuggestions
+								) }
+								onChange={ onInputChange }
+							/>
+						</FlexBlock>
+						{ allowReset && (
+							<Button
+								size="small"
+								icon={ closeSmall }
+								// Disable reason: Focus returns to input field when reset is clicked.
+								// eslint-disable-next-line no-restricted-syntax
+								disabled={ ! value }
+								onClick={ handleOnReset }
+								onKeyDown={ handleResetStopPropagation }
+								label={ __( 'Reset' ) }
+							/>
+						) }
+					</InputWrapperFlex>
+					{ isExpanded && (
+						<SuggestionsList
+							instanceId={ instanceId }
+							// The empty string for `value` here is not actually used, but is
+							// just a quick way to satisfy the TypeScript requirements of SuggestionsList.
+							// See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330
+							match={ { label: inputValue, value: '' } }
+							displayTransform={ ( suggestion ) =>
+								suggestion.label
+							}
+							suggestions={ matchingSuggestions }
+							selectedIndex={ getIndexOfMatchingSuggestion(
+								selectedSuggestion,
+								matchingSuggestions
+							) }
+							onHover={ setSelectedSuggestion }
+							onSelect={ onSuggestionSelected }
+							scrollIntoView
+							__experimentalRenderItem={
+								__experimentalRenderItem
+							}
+						/>
+					) }
+				</div>
+			</BaseControl>
+		</DetectOutside>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}
+
+export default ComboboxControl;
diff --git a/packages/components/src/combobox-control/stories/index.js b/packages/components/src/combobox-control/stories/index.js
deleted file mode 100644
index fda098e19e364f..00000000000000
--- a/packages/components/src/combobox-control/stories/index.js
+++ /dev/null
@@ -1,339 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ComboboxControl from '../';
-
-const countries = [
-	{ name: 'Afghanistan', code: 'AF' },
-	{ name: 'Åland Islands', code: 'AX' },
-	{ name: 'Albania', code: 'AL' },
-	{ name: 'Algeria', code: 'DZ' },
-	{ name: 'American Samoa', code: 'AS' },
-	{ name: 'Andorra', code: 'AD' },
-	{ name: 'Angola', code: 'AO' },
-	{ name: 'Anguilla', code: 'AI' },
-	{ name: 'Antarctica', code: 'AQ' },
-	{ name: 'Antigua and Barbuda', code: 'AG' },
-	{ name: 'Argentina', code: 'AR' },
-	{ name: 'Armenia', code: 'AM' },
-	{ name: 'Aruba', code: 'AW' },
-	{ name: 'Australia', code: 'AU' },
-	{ name: 'Austria', code: 'AT' },
-	{ name: 'Azerbaijan', code: 'AZ' },
-	{ name: 'Bahamas', code: 'BS' },
-	{ name: 'Bahrain', code: 'BH' },
-	{ name: 'Bangladesh', code: 'BD' },
-	{ name: 'Barbados', code: 'BB' },
-	{ name: 'Belarus', code: 'BY' },
-	{ name: 'Belgium', code: 'BE' },
-	{ name: 'Belize', code: 'BZ' },
-	{ name: 'Benin', code: 'BJ' },
-	{ name: 'Bermuda', code: 'BM' },
-	{ name: 'Bhutan', code: 'BT' },
-	{ name: 'Bolivia', code: 'BO' },
-	{ name: 'Bosnia and Herzegovina', code: 'BA' },
-	{ name: 'Botswana', code: 'BW' },
-	{ name: 'Bouvet Island', code: 'BV' },
-	{ name: 'Brazil', code: 'BR' },
-	{ name: 'British Indian Ocean Territory', code: 'IO' },
-	{ name: 'Brunei Darussalam', code: 'BN' },
-	{ name: 'Bulgaria', code: 'BG' },
-	{ name: 'Burkina Faso', code: 'BF' },
-	{ name: 'Burundi', code: 'BI' },
-	{ name: 'Cambodia', code: 'KH' },
-	{ name: 'Cameroon', code: 'CM' },
-	{ name: 'Canada', code: 'CA' },
-	{ name: 'Cape Verde', code: 'CV' },
-	{ name: 'Cayman Islands', code: 'KY' },
-	{ name: 'Central African Republic', code: 'CF' },
-	{ name: 'Chad', code: 'TD' },
-	{ name: 'Chile', code: 'CL' },
-	{ name: 'China', code: 'CN' },
-	{ name: 'Christmas Island', code: 'CX' },
-	{ name: 'Cocos (Keeling) Islands', code: 'CC' },
-	{ name: 'Colombia', code: 'CO' },
-	{ name: 'Comoros', code: 'KM' },
-	{ name: 'Congo', code: 'CG' },
-	{ name: 'Congo, The Democratic Republic of the', code: 'CD' },
-	{ name: 'Cook Islands', code: 'CK' },
-	{ name: 'Costa Rica', code: 'CR' },
-	{ name: "Cote D'Ivoire", code: 'CI' },
-	{ name: 'Croatia', code: 'HR' },
-	{ name: 'Cuba', code: 'CU' },
-	{ name: 'Cyprus', code: 'CY' },
-	{ name: 'Czech Republic', code: 'CZ' },
-	{ name: 'Denmark', code: 'DK' },
-	{ name: 'Djibouti', code: 'DJ' },
-	{ name: 'Dominica', code: 'DM' },
-	{ name: 'Dominican Republic', code: 'DO' },
-	{ name: 'Ecuador', code: 'EC' },
-	{ name: 'Egypt', code: 'EG' },
-	{ name: 'El Salvador', code: 'SV' },
-	{ name: 'Equatorial Guinea', code: 'GQ' },
-	{ name: 'Eritrea', code: 'ER' },
-	{ name: 'Estonia', code: 'EE' },
-	{ name: 'Ethiopia', code: 'ET' },
-	{ name: 'Falkland Islands (Malvinas)', code: 'FK' },
-	{ name: 'Faroe Islands', code: 'FO' },
-	{ name: 'Fiji', code: 'FJ' },
-	{ name: 'Finland', code: 'FI' },
-	{ name: 'France', code: 'FR' },
-	{ name: 'French Guiana', code: 'GF' },
-	{ name: 'French Polynesia', code: 'PF' },
-	{ name: 'French Southern Territories', code: 'TF' },
-	{ name: 'Gabon', code: 'GA' },
-	{ name: 'Gambia', code: 'GM' },
-	{ name: 'Georgia', code: 'GE' },
-	{ name: 'Germany', code: 'DE' },
-	{ name: 'Ghana', code: 'GH' },
-	{ name: 'Gibraltar', code: 'GI' },
-	{ name: 'Greece', code: 'GR' },
-	{ name: 'Greenland', code: 'GL' },
-	{ name: 'Grenada', code: 'GD' },
-	{ name: 'Guadeloupe', code: 'GP' },
-	{ name: 'Guam', code: 'GU' },
-	{ name: 'Guatemala', code: 'GT' },
-	{ name: 'Guernsey', code: 'GG' },
-	{ name: 'Guinea', code: 'GN' },
-	{ name: 'Guinea-Bissau', code: 'GW' },
-	{ name: 'Guyana', code: 'GY' },
-	{ name: 'Haiti', code: 'HT' },
-	{ name: 'Heard Island and Mcdonald Islands', code: 'HM' },
-	{ name: 'Holy See (Vatican City State)', code: 'VA' },
-	{ name: 'Honduras', code: 'HN' },
-	{ name: 'Hong Kong', code: 'HK' },
-	{ name: 'Hungary', code: 'HU' },
-	{ name: 'Iceland', code: 'IS' },
-	{ name: 'India', code: 'IN' },
-	{ name: 'Indonesia', code: 'ID' },
-	{ name: 'Iran, Islamic Republic Of', code: 'IR' },
-	{ name: 'Iraq', code: 'IQ' },
-	{ name: 'Ireland', code: 'IE' },
-	{ name: 'Isle of Man', code: 'IM' },
-	{ name: 'Israel', code: 'IL' },
-	{ name: 'Italy', code: 'IT' },
-	{ name: 'Jamaica', code: 'JM' },
-	{ name: 'Japan', code: 'JP' },
-	{ name: 'Jersey', code: 'JE' },
-	{ name: 'Jordan', code: 'JO' },
-	{ name: 'Kazakhstan', code: 'KZ' },
-	{ name: 'Kenya', code: 'KE' },
-	{ name: 'Kiribati', code: 'KI' },
-	{ name: "Korea, Democratic People'S Republic of", code: 'KP' },
-	{ name: 'Korea, Republic of', code: 'KR' },
-	{ name: 'Kuwait', code: 'KW' },
-	{ name: 'Kyrgyzstan', code: 'KG' },
-	{ name: "Lao People'S Democratic Republic", code: 'LA' },
-	{ name: 'Latvia', code: 'LV' },
-	{ name: 'Lebanon', code: 'LB' },
-	{ name: 'Lesotho', code: 'LS' },
-	{ name: 'Liberia', code: 'LR' },
-	{ name: 'Libyan Arab Jamahiriya', code: 'LY' },
-	{ name: 'Liechtenstein', code: 'LI' },
-	{ name: 'Lithuania', code: 'LT' },
-	{ name: 'Luxembourg', code: 'LU' },
-	{ name: 'Macao', code: 'MO' },
-	{ name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
-	{ name: 'Madagascar', code: 'MG' },
-	{ name: 'Malawi', code: 'MW' },
-	{ name: 'Malaysia', code: 'MY' },
-	{ name: 'Maldives', code: 'MV' },
-	{ name: 'Mali', code: 'ML' },
-	{ name: 'Malta', code: 'MT' },
-	{ name: 'Marshall Islands', code: 'MH' },
-	{ name: 'Martinique', code: 'MQ' },
-	{ name: 'Mauritania', code: 'MR' },
-	{ name: 'Mauritius', code: 'MU' },
-	{ name: 'Mayotte', code: 'YT' },
-	{ name: 'Mexico', code: 'MX' },
-	{ name: 'Micronesia, Federated States of', code: 'FM' },
-	{ name: 'Moldova, Republic of', code: 'MD' },
-	{ name: 'Monaco', code: 'MC' },
-	{ name: 'Mongolia', code: 'MN' },
-	{ name: 'Montserrat', code: 'MS' },
-	{ name: 'Morocco', code: 'MA' },
-	{ name: 'Mozambique', code: 'MZ' },
-	{ name: 'Myanmar', code: 'MM' },
-	{ name: 'Namibia', code: 'NA' },
-	{ name: 'Nauru', code: 'NR' },
-	{ name: 'Nepal', code: 'NP' },
-	{ name: 'Netherlands', code: 'NL' },
-	{ name: 'Netherlands Antilles', code: 'AN' },
-	{ name: 'New Caledonia', code: 'NC' },
-	{ name: 'New Zealand', code: 'NZ' },
-	{ name: 'Nicaragua', code: 'NI' },
-	{ name: 'Niger', code: 'NE' },
-	{ name: 'Nigeria', code: 'NG' },
-	{ name: 'Niue', code: 'NU' },
-	{ name: 'Norfolk Island', code: 'NF' },
-	{ name: 'Northern Mariana Islands', code: 'MP' },
-	{ name: 'Norway', code: 'NO' },
-	{ name: 'Oman', code: 'OM' },
-	{ name: 'Pakistan', code: 'PK' },
-	{ name: 'Palau', code: 'PW' },
-	{ name: 'Palestinian Territory, Occupied', code: 'PS' },
-	{ name: 'Panama', code: 'PA' },
-	{ name: 'Papua New Guinea', code: 'PG' },
-	{ name: 'Paraguay', code: 'PY' },
-	{ name: 'Peru', code: 'PE' },
-	{ name: 'Philippines', code: 'PH' },
-	{ name: 'Pitcairn', code: 'PN' },
-	{ name: 'Poland', code: 'PL' },
-	{ name: 'Portugal', code: 'PT' },
-	{ name: 'Puerto Rico', code: 'PR' },
-	{ name: 'Qatar', code: 'QA' },
-	{ name: 'Reunion', code: 'RE' },
-	{ name: 'Romania', code: 'RO' },
-	{ name: 'Russian Federation', code: 'RU' },
-	{ name: 'RWANDA', code: 'RW' },
-	{ name: 'Saint Helena', code: 'SH' },
-	{ name: 'Saint Kitts and Nevis', code: 'KN' },
-	{ name: 'Saint Lucia', code: 'LC' },
-	{ name: 'Saint Pierre and Miquelon', code: 'PM' },
-	{ name: 'Saint Vincent and the Grenadines', code: 'VC' },
-	{ name: 'Samoa', code: 'WS' },
-	{ name: 'San Marino', code: 'SM' },
-	{ name: 'Sao Tome and Principe', code: 'ST' },
-	{ name: 'Saudi Arabia', code: 'SA' },
-	{ name: 'Senegal', code: 'SN' },
-	{ name: 'Serbia and Montenegro', code: 'CS' },
-	{ name: 'Seychelles', code: 'SC' },
-	{ name: 'Sierra Leone', code: 'SL' },
-	{ name: 'Singapore', code: 'SG' },
-	{ name: 'Slovakia', code: 'SK' },
-	{ name: 'Slovenia', code: 'SI' },
-	{ name: 'Solomon Islands', code: 'SB' },
-	{ name: 'Somalia', code: 'SO' },
-	{ name: 'South Africa', code: 'ZA' },
-	{ name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
-	{ name: 'Spain', code: 'ES' },
-	{ name: 'Sri Lanka', code: 'LK' },
-	{ name: 'Sudan', code: 'SD' },
-	{ name: 'Suriname', code: 'SR' },
-	{ name: 'Svalbard and Jan Mayen', code: 'SJ' },
-	{ name: 'Swaziland', code: 'SZ' },
-	{ name: 'Sweden', code: 'SE' },
-	{ name: 'Switzerland', code: 'CH' },
-	{ name: 'Syrian Arab Republic', code: 'SY' },
-	{ name: 'Taiwan, Province of China', code: 'TW' },
-	{ name: 'Tajikistan', code: 'TJ' },
-	{ name: 'Tanzania, United Republic of', code: 'TZ' },
-	{ name: 'Thailand', code: 'TH' },
-	{ name: 'Timor-Leste', code: 'TL' },
-	{ name: 'Togo', code: 'TG' },
-	{ name: 'Tokelau', code: 'TK' },
-	{ name: 'Tonga', code: 'TO' },
-	{ name: 'Trinidad and Tobago', code: 'TT' },
-	{ name: 'Tunisia', code: 'TN' },
-	{ name: 'Turkey', code: 'TR' },
-	{ name: 'Turkmenistan', code: 'TM' },
-	{ name: 'Turks and Caicos Islands', code: 'TC' },
-	{ name: 'Tuvalu', code: 'TV' },
-	{ name: 'Uganda', code: 'UG' },
-	{ name: 'Ukraine', code: 'UA' },
-	{ name: 'United Arab Emirates', code: 'AE' },
-	{ name: 'United Kingdom', code: 'GB' },
-	{ name: 'United States', code: 'US' },
-	{ name: 'United States Minor Outlying Islands', code: 'UM' },
-	{ name: 'Uruguay', code: 'UY' },
-	{ name: 'Uzbekistan', code: 'UZ' },
-	{ name: 'Vanuatu', code: 'VU' },
-	{ name: 'Venezuela', code: 'VE' },
-	{ name: 'Viet Nam', code: 'VN' },
-	{ name: 'Virgin Islands, British', code: 'VG' },
-	{ name: 'Virgin Islands, U.S.', code: 'VI' },
-	{ name: 'Wallis and Futuna', code: 'WF' },
-	{ name: 'Western Sahara', code: 'EH' },
-	{ name: 'Yemen', code: 'YE' },
-	{ name: 'Zambia', code: 'ZM' },
-	{ name: 'Zimbabwe', code: 'ZW' },
-];
-
-export default {
-	title: 'Components/ComboboxControl',
-	component: ComboboxControl,
-	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
-		onChange: { action: 'onChange' },
-	},
-};
-
-const mapCountryOption = ( country ) => ( {
-	value: country.code,
-	label: country.name,
-} );
-
-const countryOptions = countries.map( mapCountryOption );
-
-function Template( { onChange, ...args } ) {
-	const [ value, setValue ] = useState( null );
-
-	return (
-		<>
-			<ComboboxControl
-				{ ...args }
-				value={ value }
-				onChange={ ( ...changeArgs ) => {
-					setValue( ...changeArgs );
-					onChange?.( ...changeArgs );
-				} }
-			/>
-		</>
-	);
-}
-export const Default = Template.bind( {} );
-Default.args = {
-	__next36pxDefaultSize: false,
-	allowReset: false,
-	label: 'Select a country',
-	options: countryOptions,
-};
-
-const authorOptions = [
-	{
-		value: 'parsley',
-		label: 'Parsley Montana',
-		age: 48,
-		country: 'Germany',
-	},
-	{
-		value: 'cabbage',
-		label: 'Cabbage New York',
-		age: 44,
-		country: 'France',
-	},
-	{
-		value: 'jake',
-		label: 'Jake Weary',
-		age: 41,
-		country: 'United Kingdom',
-	},
-];
-
-/**
- * The rendered output of each suggestion can be customized by passing a
- * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
- * and is subject to change.)
- */
-export const WithCustomRenderItem = Template.bind( {} );
-WithCustomRenderItem.args = {
-	...Default.args,
-	label: 'Select an author',
-	options: authorOptions,
-	__experimentalRenderItem: ( { item } ) => {
-		const { label, age, country } = item;
-		return (
-			<div>
-				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
-				<small>
-					Age: { age }, Country: { country }
-				</small>
-			</div>
-		);
-	},
-};
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..f033742a336623
--- /dev/null
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -0,0 +1,156 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ComboboxControl from '..';
+import type { ComboboxControlProps } from '../types';
+
+const countries = [
+	{ name: 'Afghanistan', code: 'AF' },
+	{ name: 'Åland Islands', code: 'AX' },
+	{ name: 'Albania', code: 'AL' },
+	{ name: 'Algeria', code: 'DZ' },
+	{ name: 'American Samoa', code: 'AS' },
+	{ name: 'Andorra', code: 'AD' },
+	{ name: 'Angola', code: 'AO' },
+	{ name: 'Anguilla', code: 'AI' },
+	{ name: 'Antarctica', code: 'AQ' },
+	{ name: 'Antigua and Barbuda', code: 'AG' },
+	{ name: 'Argentina', code: 'AR' },
+	{ name: 'Armenia', code: 'AM' },
+	{ name: 'Aruba', code: 'AW' },
+	{ name: 'Australia', code: 'AU' },
+	{ name: 'Austria', code: 'AT' },
+	{ name: 'Azerbaijan', code: 'AZ' },
+];
+
+const meta: Meta< typeof ComboboxControl > = {
+	title: 'Components/Selection & Input/Common/ComboboxControl',
+	id: 'components-comboboxcontrol',
+	component: ComboboxControl,
+	argTypes: {
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
+	value: country.code,
+	label: country.name,
+} );
+
+const countryOptions = countries.map( mapCountryOption );
+
+const Template: StoryFn< typeof ComboboxControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] =
+		useState< ComboboxControlProps[ 'value' ] >( null );
+
+	return (
+		<>
+			<ComboboxControl
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
+			/>
+		</>
+	);
+};
+export const Default = Template.bind( {} );
+Default.args = {
+	__next40pxDefaultSize: true,
+	__nextHasNoMarginBottom: true,
+	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+};
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem = Template.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	label: 'Select an author',
+	options: [
+		{
+			value: 'parsley',
+			label: 'Parsley Montana',
+			age: 48,
+			country: 'Germany',
+		},
+		{
+			value: 'cabbage',
+			label: 'Cabbage New York',
+			age: 44,
+			country: 'France',
+		},
+		{
+			value: 'jake',
+			label: 'Jake Weary',
+			age: 41,
+			country: 'United Kingdom',
+		},
+	],
+	__experimentalRenderItem: ( { item } ) => {
+		const { label, age, country } = item;
+		return (
+			<div>
+				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
+				<small>
+					Age: { age }, Country: { country }
+				</small>
+			</div>
+		);
+	},
+};
+
+/**
+ * You can disable options in the list
+ * by setting the `disabled` property to true
+ * for individual items in the option object.
+ */
+export const WithDisabledOptions = Template.bind( {} );
+const optionsWithDisabledOptions = countryOptions.map( ( option, index ) => ( {
+	...option,
+	disabled: index % 3 === 0, // Disable options at index 0, 3, 6, etc.
+} ) );
+
+WithDisabledOptions.args = {
+	...Default.args,
+	options: optionsWithDisabledOptions,
+};
+
+/**
+ * By default, the combobox expands when focused.
+ * You can disable this behavior by setting the `expandOnFocus` prop to `false`.
+ * This is useful when you want to show the suggestions only when the user interacts with the input.
+ */
+export const NotExpandOnFocus = Template.bind( {} );
+
+NotExpandOnFocus.args = {
+	...Default.args,
+	options: countryOptions,
+	expandOnFocus: false,
+};
diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss
index 8bd4c2fb156a9f..c8fd8a168c0fb7 100644
--- a/packages/components/src/combobox-control/style.scss
+++ b/packages/components/src/combobox-control/style.scss
@@ -38,9 +38,3 @@ input.components-combobox-control__input[type="text"] {
 	}
 }
 
-.components-combobox-control__reset.components-button {
-	display: flex;
-	height: $grid-unit-20;
-	min-width: $grid-unit-20;
-	padding: 0;
-}
diff --git a/packages/components/src/combobox-control/styles.ts b/packages/components/src/combobox-control/styles.ts
index 6d7164b493e848..676c70f9e8f572 100644
--- a/packages/components/src/combobox-control/styles.ts
+++ b/packages/components/src/combobox-control/styles.ts
@@ -8,10 +8,13 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
+import type { ComboboxControlProps } from './types';
 
-const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
-	! __next36pxDefaultSize &&
+const deprecatedDefaultSize = ( {
+	__next40pxDefaultSize,
+}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize &&
 	css`
 		height: 28px; // 30px - 2px vertical borders on parent container
 		padding-left: ${ space( 1 ) };
@@ -19,7 +22,7 @@ const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
 	`;
 
 export const InputWrapperFlex = styled( Flex )`
-	height: 34px; // 36px - 2px vertical borders on parent container
+	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
 
diff --git a/packages/components/src/combobox-control/test/index.js b/packages/components/src/combobox-control/test/index.js
deleted file mode 100644
index 8fcb6f423b4346..00000000000000
--- a/packages/components/src/combobox-control/test/index.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ComboboxControl from '../';
-
-const timezones = [
-	{ label: 'Greenwich Mean Time', value: 'GMT' },
-	{ label: 'Universal Coordinated Time', value: 'UTC' },
-	{ label: 'European Central Time', value: 'ECT' },
-	{ label: '(Arabic) Egypt Standard Time', value: 'ART' },
-	{ label: 'Eastern African Time', value: 'EAT' },
-	{ label: 'Middle East Time', value: 'MET' },
-	{ label: 'Near East Time', value: 'NET' },
-	{ label: 'Pakistan Lahore Time', value: 'PLT' },
-	{ label: 'India Standard Time', value: 'IST' },
-	{ label: 'Bangladesh Standard Time', value: 'BST' },
-	{ label: 'Vietnam Standard Time', value: 'VST' },
-	{ label: 'China Taiwan Time', value: 'CTT' },
-	{ label: 'Japan Standard Time', value: 'JST' },
-	{ label: 'Australia Central Time', value: 'ACT' },
-	{ label: 'Australia Eastern Time', value: 'AET' },
-	{ label: 'Solomon Standard Time', value: 'SST' },
-	{ label: 'New Zealand Standard Time', value: 'NST' },
-	{ label: 'Midway Islands Time', value: 'MIT' },
-	{ label: 'Hawaii Standard Time', value: 'HST' },
-	{ label: 'Alaska Standard Time', value: 'AST' },
-	{ label: 'Pacific Standard Time', value: 'PST' },
-	{ label: 'Phoenix Standard Time', value: 'PNT' },
-	{ label: 'Mountain Standard Time', value: 'MST' },
-	{ label: 'Central Standard Time', value: 'CST' },
-	{ label: 'Eastern Standard Time', value: 'EST' },
-	{ label: 'Indiana Eastern Standard Time', value: 'IET' },
-	{ label: 'Puerto Rico and US Virgin Islands Time', value: 'PRT' },
-	{ label: 'Canada Newfoundland Time', value: 'CNT' },
-	{ label: 'Argentina Standard Time', value: 'AGT' },
-	{ label: 'Brazil Eastern Time', value: 'BET' },
-	{ label: 'Central African Time', value: 'CAT' },
-];
-
-const defaultLabelText = 'Select a timezone';
-const getLabel = ( labelText ) => screen.getByText( labelText );
-const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
-const getOption = ( name ) => screen.getByRole( 'option', { name } );
-const getAllOptions = () => screen.getAllByRole( 'option' );
-const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
-const ControlledComboboxControl = ( {
-	value: valueProp,
-	onChange,
-	...props
-} ) => {
-	const [ value, setValue ] = useState( valueProp );
-	const handleOnChange = ( newValue ) => {
-		setValue( newValue );
-		onChange?.( newValue );
-	};
-	return (
-		<>
-			<ComboboxControl
-				{ ...props }
-				value={ value }
-				onChange={ handleOnChange }
-			/>
-		</>
-	);
-};
-
-describe.each( [
-	[ 'uncontrolled', ComboboxControl ],
-	[ 'controlled', ControlledComboboxControl ],
-] )( 'ComboboxControl %s', ( ...modeAndComponent ) => {
-	const [ , Component ] = modeAndComponent;
-
-	it( 'should render with visible label', () => {
-		render(
-			<Component options={ timezones } label={ defaultLabelText } />
-		);
-		const label = getLabel( defaultLabelText );
-		expect( label ).toBeInTheDocument();
-		expect( label ).toBeVisible();
-	} );
-
-	it( 'should render with hidden label', () => {
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				hideLabelFromVision={ true }
-			/>
-		);
-		const label = getLabel( defaultLabelText );
-
-		expect( label ).toBeInTheDocument();
-		expect( label ).toHaveAttribute(
-			'data-wp-component',
-			'VisuallyHidden'
-		);
-	} );
-
-	it( 'should render with the correct options', async () => {
-		const user = setupUser();
-		render(
-			<Component options={ timezones } label={ defaultLabelText } />
-		);
-		const input = getInput( defaultLabelText );
-
-		// Clicking on the input shows the options
-		await user.click( input );
-
-		const renderedOptions = getAllOptions();
-
-		// Confirm the rendered options match the provided dataset.
-		expect( renderedOptions ).toHaveLength( timezones.length );
-		renderedOptions.forEach( ( option, optionIndex ) => {
-			expect( option ).toHaveTextContent(
-				timezones[ optionIndex ].label
-			);
-		} );
-	} );
-
-	it( 'should select the correct option via click events', async () => {
-		const user = setupUser();
-		const targetOption = timezones[ 2 ];
-		const onChangeSpy = jest.fn();
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				onChange={ onChangeSpy }
-			/>
-		);
-		const input = getInput( defaultLabelText );
-
-		// Clicking on the input shows the options
-		await user.click( input );
-
-		// Select the target option
-		await user.click( getOption( targetOption.label ) );
-
-		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
-		expect( input ).toHaveValue( targetOption.label );
-	} );
-
-	it( 'should select the correct option via keypress events', async () => {
-		const user = setupUser();
-		const targetIndex = 4;
-		const targetOption = timezones[ targetIndex ];
-		const onChangeSpy = jest.fn();
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				onChange={ onChangeSpy }
-			/>
-		);
-		const input = getInput( defaultLabelText );
-
-		// Pressing tab selects the input and shows the options
-		await user.tab();
-
-		// Navigate the options using the down arrow
-		for ( let i = 0; i < targetIndex; i++ ) {
-			await user.keyboard( '{ArrowDown}' );
-		}
-
-		// Pressing Enter/Return selects the currently focused option
-		await user.keyboard( '{Enter}' );
-
-		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
-		expect( input ).toHaveValue( targetOption.label );
-	} );
-
-	it( 'should select the correct option from a search', async () => {
-		const user = setupUser();
-		const targetOption = timezones[ 13 ];
-		const onChangeSpy = jest.fn();
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				onChange={ onChangeSpy }
-			/>
-		);
-		const input = getInput( defaultLabelText );
-
-		// Pressing tab selects the input and shows the options
-		await user.tab();
-
-		// Type enough characters to ensure a predictable search result
-		await user.keyboard( getOptionSearchString( targetOption ) );
-
-		// Pressing Enter/Return selects the currently focused option
-		await user.keyboard( '{Enter}' );
-
-		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
-		expect( input ).toHaveValue( targetOption.label );
-	} );
-
-	it( 'should render aria-live announcement upon selection', async () => {
-		const user = setupUser();
-		const targetOption = timezones[ 9 ];
-		const onChangeSpy = jest.fn();
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				onChange={ onChangeSpy }
-			/>
-		);
-
-		// Pressing tab selects the input and shows the options
-		await user.tab();
-
-		// Type enough characters to ensure a predictable search result
-		await user.keyboard( getOptionSearchString( targetOption ) );
-
-		// Pressing Enter/Return selects the currently focused option
-		await user.keyboard( '{Enter}' );
-
-		expect(
-			screen.getByText( 'Item selected.', {
-				selector: '[aria-live]',
-			} )
-		).toBeInTheDocument();
-	} );
-
-	it( 'should process multiple entries in a single session', async () => {
-		const user = setupUser();
-		const unmatchedString = 'Mordor';
-		const targetOption = timezones[ 6 ];
-		const onChangeSpy = jest.fn();
-		render(
-			<Component
-				options={ timezones }
-				label={ defaultLabelText }
-				onChange={ onChangeSpy }
-			/>
-		);
-		const input = getInput( defaultLabelText );
-
-		// Pressing tab selects the input and shows the options
-		await user.tab();
-
-		const initialRenderedOptions = getAllOptions();
-
-		// Rendered options match the provided dataset.
-		expect( initialRenderedOptions ).toHaveLength( timezones.length );
-		initialRenderedOptions.forEach( ( option, optionIndex ) => {
-			expect( option ).toHaveTextContent(
-				timezones[ optionIndex ].label
-			);
-		} );
-
-		// No options are rendered if no match is found
-		await user.keyboard( unmatchedString );
-		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
-
-		// Clearing the input renders all options again
-		await user.clear( input );
-
-		const postClearRenderedOptions = getAllOptions();
-
-		expect( postClearRenderedOptions ).toHaveLength( timezones.length );
-		postClearRenderedOptions.forEach( ( option, optionIndex ) => {
-			expect( option ).toHaveTextContent(
-				timezones[ optionIndex ].label
-			);
-		} );
-
-		// Run a second search with a valid string.
-		const searchString = getOptionSearchString( targetOption );
-		await user.keyboard( searchString );
-		const validSearchRenderedOptions = getAllOptions();
-
-		// Find option that match the search string.
-		const matches = timezones.filter( ( option ) =>
-			option.label.includes( searchString )
-		);
-
-		// Confirm the rendered options match the provided dataset based on the current string.
-		expect( validSearchRenderedOptions ).toHaveLength( matches.length );
-		validSearchRenderedOptions.forEach( ( option, optionIndex ) => {
-			expect( option ).toHaveTextContent( matches[ optionIndex ].label );
-		} );
-
-		// Confirm that the corrent option is selected
-		await user.keyboard( '{Enter}' );
-
-		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
-		expect( input ).toHaveValue( targetOption.label );
-	} );
-} );
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
new file mode 100644
index 00000000000000..8f569ed381a844
--- /dev/null
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -0,0 +1,485 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import _ComboboxControl from '..';
+import type { ComboboxControlOption, ComboboxControlProps } from '../types';
+
+const timezones = [
+	{ label: 'Greenwich Mean Time', value: 'GMT' },
+	{ label: 'Universal Coordinated Time', value: 'UTC' },
+	{ label: 'European Central Time', value: 'ECT' },
+	{ label: '(Arabic) Egypt Standard Time', value: 'ART' },
+	{ label: 'Eastern African Time', value: 'EAT' },
+	{ label: 'Middle East Time', value: 'MET' },
+	{ label: 'Near East Time', value: 'NET' },
+	{ label: 'Pakistan Lahore Time', value: 'PLT' },
+	{ label: 'India Standard Time', value: 'IST' },
+	{ label: 'Bangladesh Standard Time', value: 'BST' },
+	{ label: 'Vietnam Standard Time', value: 'VST' },
+	{ label: 'China Taiwan Time', value: 'CTT' },
+	{ label: 'Japan Standard Time', value: 'JST' },
+	{ label: 'Australia Central Time', value: 'ACT' },
+	{ label: 'Australia Eastern Time', value: 'AET' },
+	{ label: 'Solomon Standard Time', value: 'SST' },
+	{ label: 'New Zealand Standard Time', value: 'NST' },
+	{ label: 'Midway Islands Time', value: 'MIT' },
+	{ label: 'Hawaii Standard Time', value: 'HST' },
+	{ label: 'Alaska Standard Time', value: 'AST' },
+	{ label: 'Pacific Standard Time', value: 'PST' },
+	{ label: 'Phoenix Standard Time', value: 'PNT' },
+	{ label: 'Mountain Standard Time', value: 'MST' },
+	{ label: 'Central Standard Time', value: 'CST' },
+	{ label: 'Eastern Standard Time', value: 'EST' },
+	{ label: 'Indiana Eastern Standard Time', value: 'IET' },
+	{ label: 'Puerto Rico and US Virgin Islands Time', value: 'PRT' },
+	{ label: 'Canada Newfoundland Time', value: 'CNT' },
+	{ label: 'Argentina Standard Time', value: 'AGT' },
+	{ label: 'Brazil Eastern Time', value: 'BET' },
+	{ label: 'Central African Time', value: 'CAT' },
+];
+
+const defaultLabelText = 'Select a timezone';
+const getLabel = ( labelText: string ) => screen.getByText( labelText );
+const getInput = ( name: string ) => screen.getByRole( 'combobox', { name } );
+const getOption = ( name: string ) => screen.getByRole( 'option', { name } );
+const getAllOptions = () => screen.getAllByRole( 'option' );
+const getOptionSearchString = ( option: ComboboxControlOption ) =>
+	option.label.substring( 0, 11 );
+
+const ComboboxControl = ( props: ComboboxControlProps ) => {
+	return (
+		<_ComboboxControl
+			{ ...props }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+};
+
+const ControlledComboboxControl = ( {
+	value: valueProp,
+	onChange,
+	...props
+}: ComboboxControlProps ) => {
+	const [ value, setValue ] = useState( valueProp );
+	const handleOnChange: ComboboxControlProps[ 'onChange' ] = ( newValue ) => {
+		setValue( newValue );
+		onChange?.( newValue );
+	};
+	return (
+		<>
+			<ComboboxControl
+				{ ...props }
+				value={ value }
+				onChange={ handleOnChange }
+			/>
+		</>
+	);
+};
+
+describe.each( [
+	[ 'uncontrolled', ComboboxControl ],
+	[ 'controlled', ControlledComboboxControl ],
+] )( 'ComboboxControl %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'should render with visible label', () => {
+		render(
+			<Component options={ timezones } label={ defaultLabelText } />
+		);
+		const label = getLabel( defaultLabelText );
+		expect( label ).toBeVisible();
+	} );
+
+	it( 'should render with hidden label', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				hideLabelFromVision
+			/>
+		);
+		const label = getLabel( defaultLabelText );
+
+		expect( label ).toBeInTheDocument();
+		expect( label ).toHaveAttribute(
+			'data-wp-component',
+			'VisuallyHidden'
+		);
+	} );
+
+	it( 'should render with the correct options', async () => {
+		const user = await userEvent.setup();
+		render(
+			<Component options={ timezones } label={ defaultLabelText } />
+		);
+		const input = getInput( defaultLabelText );
+
+		// Clicking on the input shows the options
+		await user.click( input );
+
+		const renderedOptions = getAllOptions();
+
+		// Confirm the rendered options match the provided dataset.
+		expect( renderedOptions ).toHaveLength( timezones.length );
+		renderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+	} );
+
+	it( 'should select the correct option via click events', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 2 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Clicking on the input shows the options
+		await user.click( input );
+
+		// Select the target option
+		await user.click( getOption( targetOption.label ) );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should select the correct option via keypress events', async () => {
+		const user = await userEvent.setup();
+		const targetIndex = 4;
+		const targetOption = timezones[ targetIndex ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Navigate the options using the down arrow
+		for ( let i = 0; i < targetIndex; i++ ) {
+			await user.keyboard( '{ArrowDown}' );
+		}
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( onFilterValueChangeSpy ).toHaveBeenCalledWith( 'a' );
+	} );
+
+	it( 'clears the textbox value if there is no selected value on blur', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( input ).toHaveValue( 'a' );
+
+		// Blur and focus the input.
+		await user.tab();
+		await user.click( input );
+
+		expect( input ).toHaveValue( '' );
+		expect( onFilterValueChangeSpy ).toHaveBeenLastCalledWith( '' );
+	} );
+
+	it( 'should select the correct option from a search', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Type enough characters to ensure a predictable search result
+		await user.keyboard( getOptionSearchString( targetOption ) );
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should render aria-live announcement upon selection', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 9 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		// Type enough characters to ensure a predictable search result
+		await user.keyboard( getOptionSearchString( targetOption ) );
+
+		// Pressing Enter/Return selects the currently focused option
+		await user.keyboard( '{Enter}' );
+
+		expect(
+			screen.getByText( 'Item selected.', {
+				selector: '[aria-live]',
+			} )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should process multiple entries in a single session', async () => {
+		const user = await userEvent.setup();
+		const unmatchedString = 'Mordor';
+		const targetOption = timezones[ 6 ];
+		const onChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onChange={ onChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		// Pressing tab selects the input and shows the options
+		await user.tab();
+
+		const initialRenderedOptions = getAllOptions();
+
+		// Rendered options match the provided dataset.
+		expect( initialRenderedOptions ).toHaveLength( timezones.length );
+		initialRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+
+		// No options are rendered if no match is found
+		await user.keyboard( unmatchedString );
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+
+		// Clearing the input renders all options again
+		await user.clear( input );
+
+		const postClearRenderedOptions = getAllOptions();
+
+		expect( postClearRenderedOptions ).toHaveLength( timezones.length );
+		postClearRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent(
+				timezones[ optionIndex ].label
+			);
+		} );
+
+		// Run a second search with a valid string.
+		const searchString = getOptionSearchString( targetOption );
+		await user.keyboard( searchString );
+		const validSearchRenderedOptions = getAllOptions();
+
+		// Find option that match the search string.
+		const matches = timezones.filter( ( option ) =>
+			option.label.includes( searchString )
+		);
+
+		// Confirm the rendered options match the provided dataset based on the current string.
+		expect( validSearchRenderedOptions ).toHaveLength( matches.length );
+		validSearchRenderedOptions.forEach( ( option, optionIndex ) => {
+			expect( option ).toHaveTextContent( matches[ optionIndex ].label );
+		} );
+
+		// Confirm that the corrent option is selected
+		await user.keyboard( '{Enter}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeSpy ).toHaveBeenCalledWith( targetOption.value );
+		expect( input ).toHaveValue( targetOption.label );
+	} );
+
+	it( 'should render with Reset button disabled', () => {
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).toBeVisible();
+		expect( resetButton ).toBeDisabled();
+	} );
+
+	it( 'should reset input when clicking the Reset button', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		expect( resetButton ).toBeEnabled();
+
+		await user.click( resetButton );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
+
+	it( 'should reset input when pressing the Reset button with the Enter key', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		// Pressing tab moves focus to the Reset buttons
+		await user.tab();
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		// If the button has focus that implies it is enabled.
+		expect( resetButton ).toHaveFocus();
+
+		// Pressing Enter/Return resets the input.
+		await user.keyboard( '{Enter}' );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
+
+	it( 'should reset input when pressing the Reset button with the Spacebar key', async () => {
+		const user = await userEvent.setup();
+		const targetOption = timezones[ 13 ];
+
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				allowReset
+			/>
+		);
+
+		// Pressing tab selects the input and shows the options.
+		await user.tab();
+		// Type enough characters to ensure a predictable search result.
+		await user.keyboard( getOptionSearchString( targetOption ) );
+		// Pressing Enter/Return selects the currently focused option.
+		await user.keyboard( '{Enter}' );
+
+		const input = getInput( defaultLabelText );
+
+		expect( input ).toHaveValue( targetOption.label );
+
+		// Pressing tab moves focus to the Reset buttons.
+		await user.tab();
+
+		const resetButton = screen.getByRole( 'button', { name: 'Reset' } );
+
+		// If the button has focus that implies it is enabled.
+		expect( resetButton ).toHaveFocus();
+
+		// Pressing Spacebar resets the input.
+		await user.keyboard( '[Space]' );
+
+		expect( input ).toHaveValue( '' );
+		expect( resetButton ).toBeDisabled();
+		expect( input ).toHaveFocus();
+	} );
+} );
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
new file mode 100644
index 00000000000000..470b38c35e2c8a
--- /dev/null
+++ b/packages/components/src/combobox-control/types.ts
@@ -0,0 +1,89 @@
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type ComboboxControlOption = {
+	label: string;
+	value: string;
+	disabled?: boolean;
+	[ key: string ]: any;
+};
+
+export type ComboboxControlProps = Pick<
+	BaseControlProps,
+	| '__nextHasNoMarginBottom'
+	| 'className'
+	| 'label'
+	| 'hideLabelFromVision'
+	| 'help'
+> & {
+	/**
+	 * Custom renderer invoked for each option in the suggestion list.
+	 * The render prop receives as its argument an object containing, under the `item` key,
+	 * the single option's data (directly from the array of data passed to the `options` prop).
+	 */
+	__experimentalRenderItem?: ( args: {
+		item: ComboboxControlOption;
+	} ) => React.ReactNode;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 * @ignore
+	 */
+	__next36pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * Show a reset button to clear the input.
+	 *
+	 * @default true
+	 */
+	allowReset?: boolean;
+	/**
+	 * Automatically expand the dropdown when the control is focused.
+	 * If the control is clicked, the dropdown will expand regardless of this prop.
+	 *
+	 * @default true
+	 */
+	expandOnFocus?: boolean;
+	/**
+	 * Customizable UI messages.
+	 */
+	messages?: {
+		/**
+		 * The message to announce to screen readers when a suggestion is selected.
+		 *
+		 * @default `__( 'Item selected.' )`
+		 */
+		selected: string;
+	};
+	/**
+	 * Function called with the selected value changes.
+	 */
+	onChange?: ( value: ComboboxControlProps[ 'value' ] ) => void;
+	/**
+	 * Function called when the control's search input value changes. The argument contains the next input value.
+	 *
+	 * @default noop
+	 */
+	onFilterValueChange?: ( value: string ) => void;
+	/**
+	 * The options that can be chosen from.
+	 */
+	options: ComboboxControlOption[];
+	/**
+	 * The current value of the control.
+	 */
+	value?: string | null;
+	/**
+	 * If passed, the combobox input will show a placeholder string if no values are present.
+	 */
+	placeholder?: string;
+};
diff --git a/packages/components/src/composite/README.md b/packages/components/src/composite/README.md
new file mode 100644
index 00000000000000..de710bd2ab6272
--- /dev/null
+++ b/packages/components/src/composite/README.md
@@ -0,0 +1,306 @@
+# `Composite`
+
+`Composite` provides a single tab stop on the page and allows navigation through the focusable descendants with arrow keys. This abstract component is based on the [WAI-ARIA Composite Role⁠](https://w3c.github.io/aria/#composite).
+
+## Usage
+
+```jsx
+import { Composite } from '@wordpress/components';
+
+<Composite>
+  <Composite.Group>
+    <Composite.GroupLabel>Label</Composite.GroupLabel>
+    <Composite.Item>Item 1</Composite.Item>
+    <Composite.Item>Item 2</Composite.Item>
+  </CompositeGroup>
+</Composite>
+```
+
+## Components
+
+### `Composite`
+
+Renders a composite widget.
+
+#### Props
+
+##### `activeId`: `string | null`
+
+The current active item `id`. The active item is the element within the composite widget that has either DOM or virtual focus (in case the `virtualFocus` prop is enabled).
+
+-   `null` represents the base composite element (the one with a [composite role](https://w3c.github.io/aria/#composite)). Users will be able to navigate out of it using arrow keys.
+-   If `activeId` is initially set to `null`, the base composite element itself will have focus and users will be able to navigate to it using arrow keys.
+
+-   Required: no
+
+##### `defaultActiveId`: `string | null`
+
+The composite item id that should be active by default when the composite widget is rendered. If `null`, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.
+
+-   Required: no
+
+##### `setActiveId`: `((activeId: string | null | undefined) => void)`
+
+A callback that gets called when the `activeId` state changes.
+
+-   Required: no
+
+##### `focusLoop`: `boolean | 'horizontal' | 'vertical' | 'both'`
+
+Determines how the focus behaves when the user reaches the end of the composite widget.
+
+On one-dimensional composite widgets:
+
+-   `true` loops from the last item to the first item and vice-versa.
+-   `horizontal` loops only if `orientation` is `horizontal` or not set.
+-   `vertical` loops only if `orientation` is `vertical` or not set.
+-   If `activeId` is initially set to `null`, the composite element will be focused in between the last and first items.
+
+On two-dimensional composite widgets (ie. when using `CompositeRow`):
+
+-   `true` loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
+-   `horizontal` loops only from the last row item to the first item in the same row.
+-   `vertical` loops only from the last column item to the first item in the column row.
+-   If `activeId` is initially set to `null`, vertical loop will have no effect as moving down from the last row or up from the first row will focus on the composite element.
+-   If `focusWrap` matches the value of `focusLoop`, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.
+
+-   Required: no
+-   Default: `false`
+
+##### `focusShift`: `boolean`
+
+**Works only on two-dimensional composite widgets**.
+
+If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.
+
+-   Required: no
+-   Default: `false`
+
+##### `focusWrap`: `boolean`
+
+**Works only on two-dimensional composite widgets**.
+
+If enabled, moving to the next item from the last one in a row or column
+will focus on the first item in the next row or column and vice-versa.
+
+-   `true` wraps between rows and columns.
+-   `horizontal` wraps only between rows.
+-   `vertical` wraps only between columns.
+-   If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
+    last item in the last row or column and the first item in the first row or
+    column and vice-versa.
+
+-   Required: no
+-   Default: `false`
+
+##### `virtualFocus`: `boolean`
+
+If enabled, the composite element will act as an [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
+container instead of [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex). DOM focus will remain on the composite element while its items receive
+virtual focus.
+
+In both scenarios, the item in focus will carry the `data-active-item` attribute.
+
+-   Required: no
+-   Default: `false`
+
+##### `orientation`: `'horizontal' | 'vertical' | 'both'`
+
+Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the `orientation` value determines which arrow keys can be used to move focus:
+
+-   `both`: all arrow keys work.
+-   `horizontal`: only left and right arrow keys work.
+-   `vertical`: only up and down arrow keys work.
+
+It doesn't have any effect on two-dimensional composites.
+
+-   Required: no
+-   Default: `both`
+
+##### `rtl`: `boolean`
+
+Determines how the `store`'s `next` and `previous` functions will behave. If `rtl` is set to `true`, they will be inverted.
+
+This only affects the composite widget behavior. You still need to set `dir="rtl"` on HTML/CSS.
+
+-   Required: no
+-   Default: `false`
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `focusable`: `boolean`
+
+Makes the component a focusable element. When this element gains keyboard focus, it gets a `data-focus-visible` attribute and triggers the `onFocusVisible` prop.
+
+The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the the `accessibleWhenDisabled` prop.
+
+Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.
+
+-   Required: no
+
+##### `disabled`: `boolean`
+
+Determines if the element is disabled. This sets the `aria-disabled` attribute accordingly, enabling support for all elements, including those that don't support the native `disabled` attribute.
+
+This feature can be combined with the `accessibleWhenDisabled` prop to
+make disabled elements still accessible via keyboard.
+
+**Note**: For this prop to work, the `focusable` prop must be set to
+`true`, if it's not set by default.
+
+-   Required: no
+-   Default: `false`
+
+##### `accessibleWhenDisabled`: `boolean`
+
+Indicates whether the element should be focusable even when it is
+`disabled`.
+
+This is important when discoverability is a concern. For example:
+
+> A toolbar in an editor contains a set of special smart paste functions
+> that are disabled when the clipboard is empty or when the function is not
+> applicable to the current content of the clipboard. It could be helpful to
+> keep the disabled buttons focusable if the ability to discover their
+> functionality is primarily via their presence on the toolbar.
+
+Learn more on [Focusability of disabled
+controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+
+-   Required: no
+
+##### `onFocusVisible`: `(event: SyntheticEvent<HTMLElement>) => void`
+
+Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is the programmatic equivalent of the `data-focus-visible` attribute.
+
+**Note**: For this prop to work, the `focusable` prop must be set to `true` if it's not set by default.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Group`
+
+Renders a group element for composite items.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.GroupLabel`
+
+Renders a label in a composite group. This component must be wrapped with `Composite.Group` so the `aria-labelledby` prop is properly set on the composite group element.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Item`
+
+Renders a composite item.
+
+##### `accessibleWhenDisabled`: `boolean`
+
+Indicates whether the element should be focusable even when it is
+`disabled`.
+
+This is important when discoverability is a concern. For example:
+
+> A toolbar in an editor contains a set of special smart paste functions
+> that are disabled when the clipboard is empty or when the function is not
+> applicable to the current content of the clipboard. It could be helpful to
+> keep the disabled buttons focusable if the ability to discover their
+> functionality is primarily via their presence on the toolbar.
+
+Learn more on [Focusability of disabled
+controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+
+-   Required: no
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Row`
+
+Renders a composite row. Wrapping `Composite.Item` elements within `Composite.Row` will create a two-dimensional composite widget, such as a grid.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Hover`
+
+Renders an element in a composite widget that receives focus on mouse move and loses focus to the composite base element on mouse leave. This should be combined with the `Composite.Item` component.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Typeahead`
+
+Renders a component that adds typeahead functionality to composite components. Hitting printable character keys will move focus to the next composite item that begins with the input characters.
+
+##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+-   Required: no
+
+##### `children`: `React.ReactNode`
+
+The contents of the component.
+
+-   Required: no
+
+### `Composite.Context`
+
+The React context used by the composite components. It can be used by to access the composite store, and to forward the context when composite sub-components are rendered across portals (ie. `SlotFill` components) that would not otherwise forward the context to the `Fill` children.
diff --git a/packages/components/src/composite/context.tsx b/packages/components/src/composite/context.tsx
new file mode 100644
index 00000000000000..4a8b22a712b031
--- /dev/null
+++ b/packages/components/src/composite/context.tsx
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { CompositeContextProps } from './types';
+
+export const CompositeContext = createContext< CompositeContextProps >( {} );
+
+export const useCompositeContext = () => useContext( CompositeContext );
diff --git a/packages/components/src/composite/group-label.tsx b/packages/components/src/composite/group-label.tsx
new file mode 100644
index 00000000000000..7e3c6ffdc7759c
--- /dev/null
+++ b/packages/components/src/composite/group-label.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeGroupLabelProps } from './types';
+
+export const CompositeGroupLabel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
+>( function CompositeGroupLabel( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return (
+		<Ariakit.CompositeGroupLabel store={ store } { ...props } ref={ ref } />
+	);
+} );
diff --git a/packages/components/src/composite/group.tsx b/packages/components/src/composite/group.tsx
new file mode 100644
index 00000000000000..bcfb47e684613d
--- /dev/null
+++ b/packages/components/src/composite/group.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeGroupProps } from './types';
+
+export const CompositeGroup = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupProps, 'div', false >
+>( function CompositeGroup( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeGroup store={ store } { ...props } ref={ ref } />;
+} );
diff --git a/packages/components/src/composite/hover.tsx b/packages/components/src/composite/hover.tsx
new file mode 100644
index 00000000000000..a8a0ebfb4729fe
--- /dev/null
+++ b/packages/components/src/composite/hover.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeHoverProps } from './types';
+
+export const CompositeHover = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeHoverProps, 'div', false >
+>( function CompositeHover( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeHover store={ store } { ...props } ref={ ref } />;
+} );
diff --git a/packages/components/src/composite/index.js b/packages/components/src/composite/index.js
deleted file mode 100644
index ddb10fffa12ad9..00000000000000
--- a/packages/components/src/composite/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://reakit.io/docs/composite/
- *
- * The plan is to build own API that accounts for future breaking changes
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
- */
-/* eslint-disable-next-line no-restricted-imports */
-export {
-	Composite,
-	CompositeGroup,
-	CompositeItem,
-	useCompositeState,
-} from 'reakit';
diff --git a/packages/components/src/composite/index.tsx b/packages/components/src/composite/index.tsx
new file mode 100644
index 00000000000000..8eb562f5bdab38
--- /dev/null
+++ b/packages/components/src/composite/index.tsx
@@ -0,0 +1,251 @@
+/**
+ * Composite is a component that may contain navigable items represented by
+ * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+import { useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { CompositeContext } from './context';
+import { CompositeGroup } from './group';
+import { CompositeGroupLabel } from './group-label';
+import { CompositeHover } from './hover';
+import { CompositeItem } from './item';
+import { CompositeRow } from './row';
+import { CompositeTypeahead } from './typeahead';
+import type { CompositeProps } from './types';
+
+/**
+ * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
+ * role, which provides a single tab stop on the page and arrow key navigation
+ * through the focusable descendants.
+ *
+ * @example
+ * ```jsx
+ * import { Composite } from '@wordpress/components';
+ *
+ * <Composite>
+ *   <Composite.Item>Item 1</Composite.Item>
+ *   <Composite.Item>Item 2</Composite.Item>
+ * </Composite>
+ * ```
+ */
+export const Composite = Object.assign(
+	forwardRef<
+		HTMLDivElement,
+		WordPressComponentProps< CompositeProps, 'div', false >
+	>( function Composite(
+		{
+			// Composite store props
+			activeId,
+			defaultActiveId,
+			setActiveId,
+			focusLoop = false,
+			focusWrap = false,
+			focusShift = false,
+			virtualFocus = false,
+			orientation = 'both',
+			rtl = isRTL(),
+
+			// Composite component props
+			children,
+			disabled = false,
+
+			// Rest props
+			...props
+		},
+		ref
+	) {
+		// @ts-expect-error The store prop is undocumented and only used by the
+		// legacy compat layer.
+		const storeProp = props.store as Ariakit.CompositeStore;
+		const internalStore = Ariakit.useCompositeStore( {
+			activeId,
+			defaultActiveId,
+			setActiveId,
+			focusLoop,
+			focusWrap,
+			focusShift,
+			virtualFocus,
+			orientation,
+			rtl,
+		} );
+
+		const store = storeProp ?? internalStore;
+
+		const contextValue = useMemo(
+			() => ( {
+				store,
+			} ),
+			[ store ]
+		);
+
+		return (
+			<Ariakit.Composite
+				disabled={ disabled }
+				store={ store }
+				{ ...props }
+				ref={ ref }
+			>
+				<CompositeContext.Provider value={ contextValue }>
+					{ children }
+				</CompositeContext.Provider>
+			</Ariakit.Composite>
+		);
+	} ),
+	{
+		/**
+		 * Renders a group element for composite items.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite>
+		 *   <Composite.Group>
+		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+		 *     <Composite.Item>Item 1</Composite.Item>
+		 *     <Composite.Item>Item 2</Composite.Item>
+		 *   </CompositeGroup>
+		 * </Composite>
+		 * ```
+		 */
+		Group: Object.assign( CompositeGroup, {
+			displayName: 'Composite.Group',
+		} ),
+		/**
+		 * Renders a label in a composite group. This component must be wrapped with
+		 * `Composite.Group` so the `aria-labelledby` prop is properly set on the
+		 * composite group element.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite>
+		 *   <Composite.Group>
+		 *     <Composite.GroupLabel>Label</Composite.GroupLabel>
+		 *     <Composite.Item>Item 1</Composite.Item>
+		 *     <Composite.Item>Item 2</Composite.Item>
+		 *   </CompositeGroup>
+		 * </Composite>
+		 * ```
+		 */
+		GroupLabel: Object.assign( CompositeGroupLabel, {
+			displayName: 'Composite.GroupLabel',
+		} ),
+		/**
+		 * Renders a composite item.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite>
+		 *   <Composite.Item>Item 1</Composite.Item>
+		 *   <Composite.Item>Item 2</Composite.Item>
+		 *   <Composite.Item>Item 3</Composite.Item>
+		 * </Composite>
+		 * ```
+		 */
+		Item: Object.assign( CompositeItem, { displayName: 'Composite.Item' } ),
+		/**
+		 * Renders a composite row. Wrapping `Composite.Item` elements within
+		 * `Composite.Row` will create a two-dimensional composite widget, such as a
+		 * grid.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite>
+		 *   <Composite.Row>
+		 *     <Composite.Item>Item 1.1</Composite.Item>
+		 *     <Composite.Item>Item 1.2</Composite.Item>
+		 *     <Composite.Item>Item 1.3</Composite.Item>
+		 *   </Composite.Row>
+		 *   <Composite.Row>
+		 *     <Composite.Item>Item 2.1</Composite.Item>
+		 *     <Composite.Item>Item 2.2</Composite.Item>
+		 *     <Composite.Item>Item 2.3</Composite.Item>
+		 *   </Composite.Row>
+		 * </Composite>
+		 * ```
+		 */
+		Row: Object.assign( CompositeRow, { displayName: 'Composite.Row' } ),
+		/**
+		 * Renders an element in a composite widget that receives focus on mouse move
+		 * and loses focus to the composite base element on mouse leave. This should
+		 * be combined with the `Composite.Item` component.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite>
+		 *   <Composite.Hover render={ <Composite.Item /> }>
+		 *     Item 1
+		 *   </Composite.Hover>
+		 *   <Composite.Hover render={ <Composite.Item /> }>
+		 *     Item 2
+		 *   </Composite.Hover>
+		 * </Composite>
+		 * ```
+		 */
+		Hover: Object.assign( CompositeHover, {
+			displayName: 'Composite.Hover',
+		} ),
+		/**
+		 * Renders a component that adds typeahead functionality to composite
+		 * components. Hitting printable character keys will move focus to the next
+		 * composite item that begins with the input characters.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 *
+		 * <Composite render={ <CompositeTypeahead /> }>
+		 *   <Composite.Item>Item 1</Composite.Item>
+		 *   <Composite.Item>Item 2</Composite.Item>
+		 * </Composite>
+		 * ```
+		 */
+		Typeahead: Object.assign( CompositeTypeahead, {
+			displayName: 'Composite.Typeahead',
+		} ),
+		/**
+		 * The React context used by the composite components. It can be used by
+		 * to access the composite store, and to forward the context when composite
+		 * sub-components are rendered across portals (ie. `SlotFill` components)
+		 * that would not otherwise forward the context to the `Fill` children.
+		 *
+		 * @example
+		 * ```jsx
+		 * import { Composite } from '@wordpress/components';
+		 * import { useContext } from '@wordpress/element';
+		 *
+		 * const compositeContext = useContext( Composite.Context );
+		 * ```
+		 */
+		Context: Object.assign( CompositeContext, {
+			displayName: 'Composite.Context',
+		} ),
+	}
+);
diff --git a/packages/components/src/composite/item.tsx b/packages/components/src/composite/item.tsx
new file mode 100644
index 00000000000000..4a02f76039a5cf
--- /dev/null
+++ b/packages/components/src/composite/item.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeItemProps } from './types';
+
+export const CompositeItem = forwardRef<
+	HTMLButtonElement,
+	WordPressComponentProps< CompositeItemProps, 'button', false >
+>( function CompositeItem( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeItem store={ store } { ...props } ref={ ref } />;
+} );
diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
new file mode 100644
index 00000000000000..c6e6616e96c044
--- /dev/null
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -0,0 +1,257 @@
+/**
+ * Composite is a component that may contain navigable items represented by
+ * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * This file aims at providing components that are as close as possible to the
+ * original `reakit`-based implementation (which was removed from the codebase),
+ * although it is recommended that consumers of the package switch to the stable,
+ * un-prefixed, `ariakit`-based version of `Composite`.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { Composite as Current } from '..';
+
+type Orientation = 'horizontal' | 'vertical';
+
+export interface LegacyStateOptions {
+	/**
+	 * ID that will serve as a base for all the items IDs.
+	 */
+	baseId?: string;
+	/**
+	 * Determines how next and previous functions will behave. If `rtl` is set
+	 * to `true`, they will be inverted. This only affects the composite widget
+	 * behavior. You still need to set `dir="rtl"` on HTML/CSS.
+	 *
+	 * @default false
+	 */
+	rtl?: boolean;
+	/**
+	 * Defines the orientation of the composite widget. If the composite has a
+	 * single row or column (one-dimensional), the orientation value determines
+	 * which arrow keys can be used to move focus.
+	 */
+	orientation?: Orientation;
+	/**
+	 * The current focused item `id`.
+	 */
+	currentId?: string;
+	/**
+	 * Determines how focus moves from the start and end of rows and columns.
+	 *
+	 * @default false
+	 */
+	loop?: boolean | Orientation;
+	/**
+	 * If enabled, moving to the next item from the last one in a row or column
+	 * will focus the first item in the next row or column and vice-versa.
+	 *
+	 * ** Has effect only on two-dimensional composites. **
+	 *
+	 * @default false
+	 */
+	wrap?: boolean | Orientation;
+	/**
+	 * If enabled, moving up or down when there's no next item or the next item
+	 * is disabled will shift to the item right before it.
+	 *
+	 * ** Has effect only on two-dimensional composites. **
+	 *
+	 * @default false
+	 */
+	shift?: boolean;
+	unstable_virtual?: boolean;
+}
+
+type Component = React.FunctionComponent< any >;
+
+type CompositeStore = ReturnType< typeof Ariakit.useCompositeStore >;
+type CompositeStoreState = { store: CompositeStore };
+export type CompositeState = CompositeStoreState &
+	Required< Pick< LegacyStateOptions, 'baseId' > >;
+
+// Legacy composite components can either provide state through a
+// single `state` prop, or via individual props, usually through
+// spreading the state generated by `useCompositeState`.
+// That is, `<Composite* { ...state }>`.
+export type CompositeStateProps =
+	| { state: CompositeState }
+	| ( CompositeState & { state?: never } );
+type ComponentProps< C extends Component > = React.ComponentPropsWithRef< C >;
+export type CompositeProps< C extends Component > = ComponentProps< C > &
+	CompositeStateProps;
+type CompositeComponent< C extends Component > = (
+	props: CompositeProps< C >
+) => React.ReactElement;
+type CompositeComponentProps = CompositeState &
+	(
+		| ComponentProps< typeof Current.Group >
+		| ComponentProps< typeof Current.Item >
+		| ComponentProps< typeof Current.Row >
+	);
+
+function mapLegacyStatePropsToComponentProps(
+	legacyProps: CompositeStateProps
+): CompositeComponentProps {
+	// If a `state` prop is provided, we unpack that; otherwise,
+	// the necessary props are provided directly in `legacyProps`.
+	if ( legacyProps.state ) {
+		const { state, ...rest } = legacyProps;
+		const { store, ...props } =
+			mapLegacyStatePropsToComponentProps( state );
+		return { ...rest, ...props, store };
+	}
+
+	return legacyProps;
+}
+
+const LEGACY_TO_NEW_DISPLAY_NAME = {
+	__unstableComposite: 'Composite',
+	__unstableCompositeGroup: 'Composite.Group or Composite.Row',
+	__unstableCompositeItem: 'Composite.Item',
+	__unstableUseCompositeState: 'Composite',
+};
+
+function proxyComposite< C extends Component >(
+	ProxiedComponent: C | React.ForwardRefExoticComponent< C >,
+	propMap: Record< string, string > = {}
+): CompositeComponent< C > {
+	const displayName = ProxiedComponent.displayName ?? '';
+
+	const Component = ( legacyProps: CompositeStateProps ) => {
+		deprecated( `wp.components.${ displayName }`, {
+			since: '6.7',
+			alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(
+				displayName
+			)
+				? LEGACY_TO_NEW_DISPLAY_NAME[
+						displayName as keyof typeof LEGACY_TO_NEW_DISPLAY_NAME
+				  ]
+				: undefined,
+		} );
+
+		const { store, ...rest } =
+			mapLegacyStatePropsToComponentProps( legacyProps );
+		let props = rest as ComponentProps< C >;
+		props = {
+			...props,
+			id: useInstanceId( store, props.baseId, props.id ),
+		};
+
+		Object.entries( propMap ).forEach( ( [ from, to ] ) => {
+			if ( props.hasOwnProperty( from ) ) {
+				Object.assign( props, { [ to ]: props[ from ] } );
+				delete props[ from ];
+			}
+		} );
+
+		delete props.baseId;
+
+		return <ProxiedComponent { ...props } store={ store } />;
+	};
+	Component.displayName = displayName;
+	return Component;
+}
+
+// The old `CompositeGroup` used to behave more like the current
+// `CompositeRow`, but this has been split into two different
+// components. We handle that difference by checking on the
+// provided role, and returning the appropriate component.
+const UnproxiedCompositeGroup = forwardRef<
+	any,
+	React.ComponentPropsWithoutRef< typeof Current.Group | typeof Current.Row >
+>( ( { role, ...props }, ref ) => {
+	const Component = role === 'row' ? Current.Row : Current.Group;
+	return <Component ref={ ref } role={ role } { ...props } />;
+} );
+
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
+export const Composite = proxyComposite(
+	Object.assign( Current, { displayName: '__unstableComposite' } ),
+	{ baseId: 'id' }
+);
+/**
+ * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
+ *
+ * @deprecated
+ */
+export const CompositeGroup = proxyComposite(
+	Object.assign( UnproxiedCompositeGroup, {
+		displayName: '__unstableCompositeGroup',
+	} )
+);
+/**
+ * _Note: please use the `Composite.Item` component instead._
+ *
+ * @deprecated
+ */
+export const CompositeItem = proxyComposite(
+	Object.assign( Current.Item, {
+		displayName: '__unstableCompositeItem',
+	} ),
+	{
+		focusable: 'accessibleWhenDisabled',
+	}
+);
+
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
+export function useCompositeState(
+	legacyStateOptions: LegacyStateOptions = {}
+): CompositeState {
+	deprecated( `wp.components.__unstableUseCompositeState`, {
+		since: '6.7',
+		alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState,
+	} );
+
+	const {
+		baseId,
+		currentId: defaultActiveId,
+		orientation,
+		rtl = false,
+		loop: focusLoop = false,
+		wrap: focusWrap = false,
+		shift: focusShift = false,
+		// eslint-disable-next-line camelcase
+		unstable_virtual: virtualFocus,
+	} = legacyStateOptions;
+
+	return {
+		baseId: useInstanceId( Composite, 'composite', baseId ),
+		store: Ariakit.useCompositeStore( {
+			defaultActiveId,
+			rtl,
+			orientation,
+			focusLoop,
+			focusShift,
+			focusWrap,
+			virtualFocus,
+		} ),
+	};
+}
diff --git a/packages/components/src/composite/legacy/stories/index.story.tsx b/packages/components/src/composite/legacy/stories/index.story.tsx
new file mode 100644
index 00000000000000..1b8e07e9bbf560
--- /dev/null
+++ b/packages/components/src/composite/legacy/stories/index.story.tsx
@@ -0,0 +1,206 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite,
+	CompositeGroup,
+	CompositeItem,
+	useCompositeState,
+} from '..';
+import { UseCompositeStatePlaceholder, transform } from './utils';
+
+const meta: Meta< typeof UseCompositeStatePlaceholder > = {
+	title: 'Components (Deprecated)/Composite (Unstable)',
+	id: 'components-composite-unstable',
+	component: UseCompositeStatePlaceholder,
+	subcomponents: {
+		Composite,
+		CompositeGroup,
+		CompositeItem,
+	},
+	args: {},
+	parameters: {
+		controls: { exclude: /^unstable_/ },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { transform },
+		},
+	},
+	argTypes: {
+		orientation: { control: 'select' },
+		loop: {
+			control: 'select',
+			options: [ true, false, 'horizontal', 'vertical' ],
+		},
+		wrap: {
+			control: 'select',
+			options: [ true, false, 'horizontal', 'vertical' ],
+		},
+	},
+};
+export default meta;
+
+export const TwoDimensionsWithStateProp: StoryFn<
+	typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+	const state = useCompositeState( initialState );
+
+	return (
+		<Composite
+			role="grid"
+			state={ state }
+			aria-label="Legacy Composite with state prop (two dimensions)"
+		>
+			<CompositeGroup state={ state } role="row">
+				<CompositeItem state={ state } role="gridcell">
+					Item A1
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item A2
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item A3
+				</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup state={ state } role="row">
+				<CompositeItem state={ state } role="gridcell">
+					Item B1
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item B2
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item B3
+				</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup state={ state } role="row">
+				<CompositeItem state={ state } role="gridcell">
+					Item C1
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item C2
+				</CompositeItem>
+				<CompositeItem state={ state } role="gridcell">
+					Item C3
+				</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+};
+TwoDimensionsWithStateProp.args = {};
+
+export const TwoDimensionsWithSpreadProps: StoryFn<
+	typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+	const state = useCompositeState( initialState );
+
+	return (
+		<Composite
+			role="grid"
+			{ ...state }
+			aria-label="Legacy Composite with spread props (two dimensions)"
+		>
+			<CompositeGroup { ...state } role="row">
+				<CompositeItem { ...state } role="gridcell">
+					Item A1
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item A2
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item A3
+				</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup { ...state } role="row">
+				<CompositeItem { ...state } role="gridcell">
+					Item B1
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item B2
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item B3
+				</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup { ...state } role="row">
+				<CompositeItem { ...state } role="gridcell">
+					Item C1
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item C2
+				</CompositeItem>
+				<CompositeItem { ...state } role="gridcell">
+					Item C3
+				</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+};
+TwoDimensionsWithSpreadProps.args = {};
+
+export const OneDimensionWithStateProp: StoryFn<
+	typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+	const state = useCompositeState( initialState );
+
+	return (
+		<Composite
+			role="list"
+			state={ state }
+			aria-label="Legacy Composite with state prop (one dimension)"
+		>
+			<CompositeItem state={ state } role="listitem">
+				Item 1
+			</CompositeItem>
+			<CompositeItem state={ state } role="listitem">
+				Item 2
+			</CompositeItem>
+			<CompositeItem state={ state } role="listitem">
+				Item 3
+			</CompositeItem>
+			<CompositeItem state={ state } role="listitem">
+				Item 4
+			</CompositeItem>
+			<CompositeItem state={ state } role="listitem">
+				Item 5
+			</CompositeItem>
+		</Composite>
+	);
+};
+OneDimensionWithStateProp.args = {};
+
+export const OneDimensionWithSpreadProps: StoryFn<
+	typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+	const state = useCompositeState( initialState );
+
+	return (
+		<Composite
+			role="list"
+			{ ...state }
+			aria-label="Legacy Composite with spread props (one dimension)"
+		>
+			<CompositeItem { ...state } role="listitem">
+				Item 1
+			</CompositeItem>
+			<CompositeItem { ...state } role="listitem">
+				Item 2
+			</CompositeItem>
+			<CompositeItem { ...state } role="listitem">
+				Item 3
+			</CompositeItem>
+			<CompositeItem { ...state } role="listitem">
+				Item 4
+			</CompositeItem>
+			<CompositeItem { ...state } role="listitem">
+				Item 5
+			</CompositeItem>
+		</Composite>
+	);
+};
+OneDimensionWithSpreadProps.args = {};
diff --git a/packages/components/src/composite/legacy/stories/utils.tsx b/packages/components/src/composite/legacy/stories/utils.tsx
new file mode 100644
index 00000000000000..2fb51c845f9fbe
--- /dev/null
+++ b/packages/components/src/composite/legacy/stories/utils.tsx
@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { StoryContext } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import type { LegacyStateOptions } from '..';
+
+/**
+ * Renders a composite widget.
+ *
+ * This unstable component is deprecated. Use `Composite` instead.
+ *
+ * ```jsx
+ * import {
+ * 	__unstableUseCompositeState as useCompositeState,
+ * 	__unstableComposite as Composite,
+ * 	__unstableCompositeItem as CompositeItem,
+ * } from '@wordpress/components';
+ *
+ * const state = useCompositeState();
+ * <Composite state={ state }>
+ * 	<CompositeItem>Item 1</CompositeItem>
+ * 	<CompositeItem>Item 2</CompositeItem>
+ * </Composite>;
+ * ```
+ */
+export function UseCompositeStatePlaceholder( props: LegacyStateOptions ) {
+	return (
+		<dl>
+			{ Object.entries( props ).map( ( [ name, value ] ) => (
+				<>
+					<dt>{ name }</dt>
+					<dd>{ JSON.stringify( value ) }</dd>
+				</>
+			) ) }
+		</dl>
+	);
+}
+UseCompositeStatePlaceholder.displayName = 'useCompositeState';
+
+export function transform( code: string, context: StoryContext ) {
+	// The output generated by Storybook for these components is
+	// messy, so we apply this transform to make it more useful
+	// for anyone reading the docs.
+	const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+	const state = config.replace( ' {} ', '' );
+	return [
+		// Include a setup line, showing how to make use of
+		// `useCompositeState` to convert state options into
+		// a composite state option.
+		`const state = useCompositeState(${ state });`,
+		'',
+		'return (',
+		'  ' +
+			code
+				// The generated output includes a full dump of everything
+				// in the state; the reader probably isn't interested in
+				// what that looks like, so instead we drop all of that
+				// in favor of the state generated above.
+				.replaceAll( /state=\{\{[\s\S]*?\}\}/g, 'state={ state }' )
+				// The previous line only works for `state={ state }`, and
+				// doesn't replace spread props, so we do that separately.
+				.replaceAll( '=>', '' )
+				.replaceAll( /baseId=[^>]+?(\s*>)/g, ( _, close ) => {
+					return `{ ...state }${ close }`;
+				} )
+				// Now we tidy the output by removing any unnecessary
+				// whitespace...
+				.replaceAll( /<Composite\w+[\s\S]*?>/g, ( match ) =>
+					match.replaceAll( /\s+\s/g, ' ' )
+				)
+				// ...including around <Composite*> children...
+				.replaceAll(
+					/ >\s+([\w\s]*?)\s+<\//g,
+					( _, value ) => `>${ value }</`
+				)
+				// ...and inside JSX definitions.
+				.replaceAll( '} >', '}>' )
+				// Finally we indent everything to make it more readable.
+				.replaceAll( /\n/g, '\n  ' ),
+		');',
+	].join( '\n' );
+}
diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
new file mode 100644
index 00000000000000..a118dbcfbadbb3
--- /dev/null
+++ b/packages/components/src/composite/legacy/test/index.tsx
@@ -0,0 +1,636 @@
+/**
+ * External dependencies
+ */
+import {
+	queryByAttribute,
+	render,
+	screen,
+	renderHook,
+} from '@testing-library/react';
+import { press, waitFor } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite,
+	CompositeGroup,
+	CompositeItem,
+	useCompositeState,
+} from '..';
+
+// This is necessary because of how Ariakit calculates page up and
+// page down. Without this, nothing has a height, and so paging up
+// and down doesn't behave as expected in tests.
+
+let clientHeightSpy: jest.SpiedGetter<
+	typeof HTMLElement.prototype.clientHeight
+>;
+
+beforeAll( () => {
+	clientHeightSpy = jest
+		.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+		.mockImplementation( function getClientHeight( this: HTMLElement ) {
+			if ( this.tagName === 'BODY' ) {
+				return window.outerHeight;
+			}
+			return 50;
+		} );
+} );
+
+afterAll( () => {
+	clientHeightSpy?.mockRestore();
+} );
+
+type InitialState = Parameters< typeof useCompositeState >[ 0 ];
+type CompositeState = ReturnType< typeof useCompositeState >;
+type CompositeStateProps = CompositeState | { state: CompositeState };
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+	const view = render( ...args );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
+function getKeys( rtl: boolean ) {
+	return {
+		previous: rtl ? 'ArrowRight' : 'ArrowLeft',
+		next: rtl ? 'ArrowLeft' : 'ArrowRight',
+		first: rtl ? 'End' : 'Home',
+		last: rtl ? 'Home' : 'End',
+	};
+}
+
+function OneDimensionalTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeItem { ...props }>Item 1</CompositeItem>
+			<CompositeItem { ...props }>Item 2</CompositeItem>
+			<CompositeItem { ...props }>Item 3</CompositeItem>
+		</Composite>
+	);
+}
+
+function getOneDimensionalItems() {
+	return {
+		item1: screen.getByText( 'Item 1' ),
+		item2: screen.getByText( 'Item 2' ),
+		item3: screen.getByText( 'Item 3' ),
+	};
+}
+
+function TwoDimensionalTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item A1</CompositeItem>
+				<CompositeItem { ...props }>Item A2</CompositeItem>
+				<CompositeItem { ...props }>Item A3</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item B1</CompositeItem>
+				<CompositeItem { ...props }>Item B2</CompositeItem>
+				<CompositeItem { ...props }>Item B3</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item C1</CompositeItem>
+				<CompositeItem { ...props }>Item C2</CompositeItem>
+				<CompositeItem { ...props }>Item C3</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+}
+
+function getTwoDimensionalItems() {
+	return {
+		itemA1: screen.getByText( 'Item A1' ),
+		itemA2: screen.getByText( 'Item A2' ),
+		itemA3: screen.getByText( 'Item A3' ),
+		itemB1: screen.getByText( 'Item B1' ),
+		itemB2: screen.getByText( 'Item B2' ),
+		itemB3: screen.getByText( 'Item B3' ),
+		itemC1: screen.getByText( 'Item C1' ),
+		itemC2: screen.getByText( 'Item C2' ),
+		itemC3: screen.getByText( 'Item C3' ),
+	};
+}
+
+function ShiftTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item A1</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item B1</CompositeItem>
+				<CompositeItem { ...props }>Item B2</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item C1</CompositeItem>
+				<CompositeItem { ...props } disabled>
+					Item C2
+				</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+}
+
+function getShiftTestItems() {
+	return {
+		itemA1: screen.getByText( 'Item A1' ),
+		itemB1: screen.getByText( 'Item B1' ),
+		itemB2: screen.getByText( 'Item B2' ),
+		itemC1: screen.getByText( 'Item C1' ),
+		itemC2: screen.getByText( 'Item C2' ),
+	};
+}
+
+// Checking for deprecation warnings before other tests because the `deprecated`
+// utility only fires a console.warn the first time a component is rendered.
+describe( 'Shows a deprecation warning', () => {
+	it( 'useCompositeState', () => {
+		renderHook( () => useCompositeState() );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableUseCompositeState is deprecated since version 6.7. Please use Composite instead.'
+		);
+	} );
+	it( 'Composite', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return <Composite { ...props } />;
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableComposite is deprecated since version 6.7. Please use Composite instead.'
+		);
+	} );
+	it( 'CompositeItem', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return (
+				<Composite { ...props }>
+					<CompositeItem { ...props } />
+				</Composite>
+			);
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableCompositeItem is deprecated since version 6.7. Please use Composite.Item instead.'
+		);
+	} );
+	it( 'CompositeGroup', () => {
+		const Test = () => {
+			const props = useCompositeState();
+			return (
+				<Composite { ...props }>
+					<CompositeGroup { ...props }>
+						<CompositeItem { ...props } />
+					</CompositeGroup>
+				</Composite>
+			);
+		};
+		render( <Test /> );
+		expect( console ).toHaveWarnedWith(
+			'wp.components.__unstableCompositeGroup is deprecated since version 6.7. Please use Composite.Group or Composite.Row instead.'
+		);
+	} );
+} );
+
+describe.each( [
+	[
+		'With "spread" state',
+		( initialState?: InitialState ) => useCompositeState( initialState ),
+	],
+	[
+		'With `state` prop',
+		( initialState?: InitialState ) => ( {
+			state: useCompositeState( initialState ),
+		} ),
+	],
+] )( '%s', ( __, useProps ) => {
+	test( 'Renders as a single tab stop', async () => {
+		const Test = () => (
+			<>
+				<button>Before</button>
+				<OneDimensionalTest { ...useProps() } />
+				<button>After</button>
+			</>
+		);
+		await renderAndValidate( <Test /> );
+
+		await press.Tab();
+		expect( screen.getByText( 'Before' ) ).toHaveFocus();
+		await press.Tab();
+		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+		await press.Tab();
+		expect( screen.getByText( 'After' ) ).toHaveFocus();
+		await press.ShiftTab();
+		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+	} );
+
+	test( 'Excludes disabled items', async () => {
+		const Test = () => {
+			const props = useProps();
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeItem { ...props }>Item 1</CompositeItem>
+					<CompositeItem { ...props } disabled>
+						Item 2
+					</CompositeItem>
+					<CompositeItem { ...props }>Item 3</CompositeItem>
+				</Composite>
+			);
+		};
+		await renderAndValidate( <Test /> );
+
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item2 ).toBeDisabled();
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).not.toHaveFocus();
+		expect( item3 ).toHaveFocus();
+	} );
+
+	test( 'Includes focusable disabled items', async () => {
+		const Test = () => {
+			const props = useProps();
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeItem { ...props }>Item 1</CompositeItem>
+					<CompositeItem { ...props } disabled focusable>
+						Item 2
+					</CompositeItem>
+					<CompositeItem { ...props }>Item 3</CompositeItem>
+				</Composite>
+			);
+		};
+		await renderAndValidate( <Test /> );
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item2 ).toBeEnabled();
+		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).toHaveFocus();
+		expect( item3 ).not.toHaveFocus();
+	} );
+
+	test( 'Supports `baseId`', async () => {
+		const Test = () => (
+			<OneDimensionalTest
+				{ ...useProps( {
+					baseId: 'test-id',
+				} ) }
+			/>
+		);
+		await renderAndValidate( <Test /> );
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item1.id ).toMatch( 'test-id-1' );
+		expect( item2.id ).toMatch( 'test-id-2' );
+		expect( item3.id ).toMatch( 'test-id-3' );
+	} );
+
+	test( 'Supports `currentId`', async () => {
+		const Test = () => (
+			<OneDimensionalTest
+				{ ...useProps( {
+					baseId: 'test-id',
+					currentId: 'test-id-2',
+				} ) }
+			/>
+		);
+		await renderAndValidate( <Test /> );
+		const { item2 } = getOneDimensionalItems();
+
+		await press.Tab();
+		await waitFor( () => expect( item2 ).toHaveFocus() );
+	} );
+} );
+
+describe.each( [
+	[ 'When LTR', false ],
+	[ 'When RTL', true ],
+] )( '%s', ( _when, rtl ) => {
+	const { previous, next, first, last } = getKeys( rtl );
+
+	async function useOneDimensionalTest( initialState?: InitialState ) {
+		const Test = () => (
+			<OneDimensionalTest
+				state={ useCompositeState( { rtl, ...initialState } ) }
+			/>
+		);
+		await renderAndValidate( <Test /> );
+		return getOneDimensionalItems();
+	}
+
+	async function useTwoDimensionalTest( initialState?: InitialState ) {
+		const Test = () => (
+			<TwoDimensionalTest
+				state={ useCompositeState( { rtl, ...initialState } ) }
+			/>
+		);
+		await renderAndValidate( <Test /> );
+		return getTwoDimensionalItems();
+	}
+
+	async function useShiftTest( shift: boolean ) {
+		const Test = () => (
+			<ShiftTest state={ useCompositeState( { rtl, shift } ) } />
+		);
+		await renderAndValidate( <Test /> );
+		return getShiftTestItems();
+	}
+
+	describe( 'In one dimension', () => {
+		test( 'All directions work with no orientation', async () => {
+			const { item1, item2, item3 } = await useOneDimensionalTest();
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item2 ).toHaveFocus();
+			await press( next );
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item2 ).toHaveFocus();
+			await press( previous );
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Only left/right work with horizontal orientation', async () => {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
+				orientation: 'horizontal',
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item2 ).toHaveFocus();
+			await press( next );
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item2 ).toHaveFocus();
+			await press( previous );
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Only up/down work with vertical orientation', async () => {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
+				orientation: 'vertical',
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps with loop enabled', async () => {
+			const { item1, item2, item3 } = await useOneDimensionalTest( {
+				loop: true,
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item3 ).toHaveFocus();
+			await press( next );
+			expect( item1 ).toHaveFocus();
+			await press( previous );
+			expect( item3 ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'In two dimensions', () => {
+		test( 'All directions work as standard', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
+				await useTwoDimensionalTest();
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA2 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press( last );
+			expect( itemA3 ).toHaveFocus();
+			await press.PageDown();
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC3 ).toHaveFocus();
+			await press( first );
+			expect( itemC1 ).toHaveFocus();
+			await press.PageUp();
+			expect( itemA1 ).toHaveFocus();
+			await press.End( null, { ctrlKey: true } );
+			expect( itemC3 ).toHaveFocus();
+			await press.Home( null, { ctrlKey: true } );
+			expect( itemA1 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps around rows/columns with loop enabled', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+				await useTwoDimensionalTest( { loop: true } );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( next );
+			expect( itemA2 ).toHaveFocus();
+			await press( next );
+			expect( itemA3 ).toHaveFocus();
+			await press( next );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemC3 ).toHaveFocus();
+		} );
+
+		test( 'Focus moves between rows/columns with wrap enabled', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+				await useTwoDimensionalTest( { wrap: true } );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( next );
+			expect( itemA2 ).toHaveFocus();
+			await press( next );
+			expect( itemA3 ).toHaveFocus();
+			await press( next );
+			expect( itemB1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA2 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA1 ).toHaveFocus();
+			await press.End( itemA1, { ctrlKey: true } );
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC3 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
+			const { itemA1, itemC3 } = await useTwoDimensionalTest( {
+				loop: true,
+				wrap: true,
+			} );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemA1 ).toHaveFocus();
+		} );
+
+		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
+			const { itemA1, itemB1, itemB2, itemC1 } =
+				await useShiftTest( true );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			// A2 doesn't exist
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowDown();
+			// C2 is disabled
+			expect( itemC1 ).toHaveFocus();
+		} );
+
+		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
+			const { itemA1, itemB1, itemB2 } = await useShiftTest( false );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			// A2 doesn't exist
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowDown();
+			// C2 is disabled
+			expect( itemB2 ).toHaveFocus();
+		} );
+	} );
+} );
diff --git a/packages/components/src/composite/row.tsx b/packages/components/src/composite/row.tsx
new file mode 100644
index 00000000000000..1a88da557785e9
--- /dev/null
+++ b/packages/components/src/composite/row.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeRowProps } from './types';
+
+export const CompositeRow = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeRowProps, 'div', false >
+>( function CompositeRow( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return <Ariakit.CompositeRow store={ store } { ...props } ref={ ref } />;
+} );
diff --git a/packages/components/src/composite/stories/index.story.tsx b/packages/components/src/composite/stories/index.story.tsx
new file mode 100644
index 00000000000000..63731a15a8c9cd
--- /dev/null
+++ b/packages/components/src/composite/stories/index.story.tsx
@@ -0,0 +1,398 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+import { Composite } from '..';
+import { Tooltip } from '../../tooltip';
+
+const meta: Meta< typeof Composite > = {
+	title: 'Components/Utilities/Composite',
+	id: 'components-composite',
+	component: Composite,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Group': Composite.Group,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.GroupLabel': Composite.GroupLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Row': Composite.Row,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Item': Composite.Item,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Hover': Composite.Hover,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Typeahead': Composite.Typeahead,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Composite.Context': Composite.Context,
+	},
+	argTypes: {
+		children: { control: false },
+		render: { control: false },
+		setActiveId: { control: false },
+		focusLoop: {
+			control: 'select',
+			options: [ true, false, 'horizontal', 'vertical', 'both' ],
+		},
+		focusWrap: {
+			control: 'select',
+			options: [ true, false, 'horizontal', 'vertical', 'both' ],
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+		},
+	},
+	decorators: [
+		( Story ) => {
+			return (
+				<>
+					{ /* Visually style the active composite item  */ }
+					<style>{ `
+						[data-active-item] {
+							background-color: #ffc0b5;
+						}
+					` }</style>
+					<Story />
+					<div
+						style={ {
+							marginTop: '2em',
+							fontSize: '12px',
+							fontStyle: 'italic',
+						} }
+					>
+						{ /* eslint-disable-next-line no-restricted-syntax */ }
+						<p id="list-title">Notes</p>
+						<ul aria-labelledby="list-title">
+							<li>
+								The active composite item is highlighted with a
+								different background color;
+							</li>
+							<li>
+								A composite item can be the active item even
+								when it doesn&apos;t have keyboard focus.
+							</li>
+						</ul>
+					</div>
+				</>
+			);
+		},
+	],
+};
+export default meta;
+
+export const Default: StoryObj< typeof Composite > = {
+	args: {
+		children: (
+			<>
+				<Composite.Item>Item one</Composite.Item>
+				<Composite.Item>Item two</Composite.Item>
+				<Composite.Item>Item three</Composite.Item>
+			</>
+		),
+	},
+};
+
+export const Groups: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Composite.Group>
+					<Composite.GroupLabel>Group one</Composite.GroupLabel>
+					<Composite.Item>Item 1.1</Composite.Item>
+					<Composite.Item>Item 1.2</Composite.Item>
+				</Composite.Group>
+				<Composite.Group>
+					<Composite.GroupLabel>Group two</Composite.GroupLabel>
+					<Composite.Item>Item 2.1</Composite.Item>
+					<Composite.Item>Item 2.1</Composite.Item>
+				</Composite.Group>
+			</>
+		),
+	},
+};
+
+export const Grid: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		role: 'grid',
+		'aria-label': 'Composite',
+		children: (
+			<>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item A1</Composite.Item>
+					<Composite.Item role="gridcell">Item A2</Composite.Item>
+					<Composite.Item role="gridcell">Item A3</Composite.Item>
+				</Composite.Row>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item B1</Composite.Item>
+					<Composite.Item role="gridcell">Item B2</Composite.Item>
+					<Composite.Item role="gridcell">Item B3</Composite.Item>
+				</Composite.Row>
+				<Composite.Row role="row">
+					<Composite.Item role="gridcell">Item C1</Composite.Item>
+					<Composite.Item role="gridcell">Item C2</Composite.Item>
+					<Composite.Item role="gridcell">Item C3</Composite.Item>
+				</Composite.Row>
+			</>
+		),
+	},
+};
+
+export const Hover: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item one
+				</Composite.Hover>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item two
+				</Composite.Hover>
+				<Composite.Hover render={ <Composite.Item /> }>
+					Hover item three
+				</Composite.Hover>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Elements in the composite widget will receive focus on mouse move and lose focus to the composite base element on mouse leave.',
+			},
+		},
+	},
+};
+
+export const Typeahead: StoryObj< typeof Composite > = {
+	args: {
+		...Default.args,
+		render: <Composite.Typeahead />,
+		children: (
+			<>
+				<Composite.Item>Apple</Composite.Item>
+				<Composite.Item>Banana</Composite.Item>
+				<Composite.Item>Peach</Composite.Item>
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'When focus in on the composite widget, hitting printable character keys will move focus to the next composite item that begins with the input characters.',
+			},
+		},
+	},
+};
+
+const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+	const compositeContext = useContext( Composite.Context );
+
+	// Forward the Slot's composite context to the Fill via fillProps, so that
+	// Composite components rendered inside the Fill can work as expected.
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ Composite.Context.Provider, { value: compositeContext } ],
+			],
+		} ),
+		[ compositeContext ]
+	);
+
+	return (
+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }
+		/>
+	);
+};
+
+type ForwardedContextTuple< P = {} > = [
+	React.ComponentType< React.PropsWithChildren< P > >,
+	P,
+];
+
+const Fill = ( { children }: { children: React.ReactNode } ) => {
+	const innerMarkup = <>{ children }</>;
+
+	return (
+		<ExampleSlotFill.Fill>
+			{ ( fillProps: { forwardedContext?: ForwardedContextTuple[] } ) => {
+				const { forwardedContext = [] } = fillProps;
+
+				// Render all context providers forwarded by the Slot via fillProps.
+				return forwardedContext.reduce(
+					( inner: JSX.Element, [ Provider, props ] ) => (
+						<Provider { ...props }>{ inner }</Provider>
+					),
+					innerMarkup
+				);
+			} }
+		</ExampleSlotFill.Fill>
+	);
+};
+
+export const WithSlotFill: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Composite.Item>Item one (direct child)</Composite.Item>
+				<Slot />
+				<Composite.Item>Item four (direct child)</Composite.Item>
+			</>
+		),
+	},
+	decorators: [
+		( Story ) => {
+			return (
+				<SlotFillProvider>
+					<Story />
+
+					<Fill>
+						<Composite.Item>
+							Item two (from slot fill)
+						</Composite.Item>
+						<Composite.Item>
+							Item three (from slot fill)
+						</Composite.Item>
+					</Fill>
+				</SlotFillProvider>
+			);
+		},
+	],
+	parameters: {
+		docs: {
+			description: {
+				story: 'When rendering Composite components across a SlotFill, the Composite.Context should be manually forwarded from the Slot to the Fill component.',
+			},
+			source: {
+				transform: ( code: string ) => {
+					return `const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+  const compositeContext = useContext( Composite.Context );
+
+  // Forward the Slot's composite context to the Fill via fillProps, so that
+  // Composite components rendered inside the Fill can work as expected.
+  const fillProps = useMemo(
+    () => ( {
+      forwardedContext: [
+        [ Composite.Context.Provider, { value: compositeContext } ],
+      ],
+    } ),
+    [ compositeContext ]
+  );
+
+  return (
+    <ExampleSlotFill.Slot
+      fillProps={ fillProps }
+      bubblesVirtually
+      style={ { display: 'contents' } }
+    />
+  );
+};
+
+const Fill = ( { children } ) => {
+  const innerMarkup = <>{ children }</>;
+
+  return (
+    <ExampleSlotFill.Fill>
+      { ( fillProps ) => {
+        const { forwardedContext = [] } = fillProps;
+
+        // Render all context providers forwarded by the Slot via fillProps.
+        return forwardedContext.reduce(
+          ( inner, [ Provider, props ] ) => (
+            <Provider { ...props }>{ inner }</Provider>
+          ),
+          innerMarkup
+        );
+      } }
+    </ExampleSlotFill.Fill>
+  );
+};
+
+// In a separate component:
+
+<SlotFillProvider>
+  ${
+		// Add one level of indentation to match the surrounding code.
+		code.replaceAll( '\n', '\n  ' )
+  }
+
+  <Fill>
+    <Composite.Item>
+      Item two (from slot fill)
+    </Composite.Item>
+    <Composite.Item>
+      Item three (from slot fill)
+    </Composite.Item>
+  </Fill>
+</SlotFillProvider>`;
+				},
+			},
+		},
+	},
+};
+
+/**
+ * Combining the `Tooltip` and `Composite` component has a few caveats. And while there are a few ways to compose these two components, our recommendation is to render `Composite.Item` as a child of `Tooltip`.
+ *
+ * ```jsx
+ * // 🔴 Does not work
+ * <Composite.Item
+ *   render={
+ *     <Tooltip text="Tooltip">
+ *       <button>Item</button>
+ *     </Tooltip>
+ *   }
+ * />
+ *
+ * // 🟢 Good
+ * <Tooltip text="Tooltip one">
+ *   <Composite.Item>
+ *     Item one
+ *   </Composite.Item>
+ * </Tooltip>
+ * ```
+ */
+export const WithTooltips: StoryObj< typeof Composite > = {
+	...Default,
+	args: {
+		...Default.args,
+		children: (
+			<>
+				<Tooltip text="Tooltip one">
+					<Composite.Item>Item one</Composite.Item>
+				</Tooltip>
+				<Tooltip text="Tooltip two">
+					<Composite.Item>Item two</Composite.Item>
+				</Tooltip>
+				<Tooltip text="Tooltip three">
+					<Composite.Item>Item three</Composite.Item>
+				</Tooltip>
+			</>
+		),
+	},
+};
diff --git a/packages/components/src/composite/test/index.tsx b/packages/components/src/composite/test/index.tsx
new file mode 100644
index 00000000000000..197302a5f3c9d3
--- /dev/null
+++ b/packages/components/src/composite/test/index.tsx
@@ -0,0 +1,714 @@
+/**
+ * External dependencies
+ */
+import { queryByAttribute, render, screen } from '@testing-library/react';
+import { click, press, waitFor } from '@ariakit/test';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Composite } from '..';
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+	const view = render( ...args );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			'true'
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
+describe( 'Composite', () => {
+	let clientHeightSpy: jest.SpiedGetter<
+		typeof HTMLElement.prototype.clientHeight
+	>;
+
+	beforeAll( () => {
+		// This is necessary because of how Ariakit calculates page up and
+		// page down. Without this, nothing has a height, and so paging up
+		// and down doesn't behave as expected in tests.
+		clientHeightSpy = jest
+			.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+			.mockImplementation( function getClientHeight( this: HTMLElement ) {
+				if ( this.tagName === 'BODY' ) {
+					return window.outerHeight;
+				}
+				return 50;
+			} );
+	} );
+
+	afterAll( () => {
+		clientHeightSpy?.mockRestore();
+	} );
+
+	test( 'Renders as a single tab stop', async () => {
+		await renderAndValidate(
+			<>
+				<button>Before</button>
+				<Composite>
+					<Composite.Item>Item 1</Composite.Item>
+					<Composite.Item>Item 2</Composite.Item>
+					<Composite.Item>Item 3</Composite.Item>
+				</Composite>
+				<button>After</button>
+			</>
+		);
+
+		await press.Tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before' } )
+		).toHaveFocus();
+		await press.Tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Item 1' } )
+		).toHaveFocus();
+		await press.Tab();
+		expect( screen.getByRole( 'button', { name: 'After' } ) ).toHaveFocus();
+		await press.ShiftTab();
+		expect(
+			screen.getByRole( 'button', { name: 'Item 1' } )
+		).toHaveFocus();
+	} );
+
+	test( 'Excludes disabled items', async () => {
+		await renderAndValidate(
+			<Composite>
+				<Composite.Item>Item 1</Composite.Item>
+				<Composite.Item disabled>Item 2</Composite.Item>
+				<Composite.Item>Item 3</Composite.Item>
+			</Composite>
+		);
+
+		const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+		const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+		const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+		expect( item2 ).toBeDisabled();
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).not.toHaveFocus();
+		expect( item3 ).toHaveFocus();
+	} );
+
+	test( 'Includes focusable disabled items', async () => {
+		await renderAndValidate(
+			<Composite>
+				<Composite.Item>Item 1</Composite.Item>
+				<Composite.Item disabled accessibleWhenDisabled>
+					Item 2
+				</Composite.Item>
+				<Composite.Item>Item 3</Composite.Item>
+			</Composite>
+		);
+
+		const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+		const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+		const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+		expect( item2 ).toBeEnabled();
+		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).toHaveFocus();
+		expect( item3 ).not.toHaveFocus();
+	} );
+
+	test( 'Supports `activeId`', async () => {
+		/* eslint-disable no-restricted-syntax */
+		await renderAndValidate(
+			<Composite activeId="item-2">
+				<Composite.Item id="item-1">Item 1</Composite.Item>
+				<Composite.Item id="item-2">Item 2</Composite.Item>
+				<Composite.Item id="item-3">Item 3</Composite.Item>
+			</Composite>
+		);
+		/* eslint-enable no-restricted-syntax */
+
+		const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+
+		await press.Tab();
+		await waitFor( () => expect( item2 ).toHaveFocus() );
+	} );
+
+	it( 'should remain focusable even when there are no elements in the DOM associated with the currently active ID', async () => {
+		const RemoveItemTest = (
+			props: ComponentProps< typeof Composite >
+		) => {
+			const [ showThirdItem, setShowThirdItem ] = useState( true );
+			return (
+				<>
+					<button>Focus trap before composite</button>
+					<Composite { ...props }>
+						<Composite.Item>Item 1</Composite.Item>
+						<Composite.Item>Item 2</Composite.Item>
+						{ showThirdItem && (
+							<Composite.Item>Item 3</Composite.Item>
+						) }
+					</Composite>
+					<button
+						onClick={ () =>
+							setShowThirdItem( ( value ) => ! value )
+						}
+					>
+						Toggle third item
+					</button>
+				</>
+			);
+		};
+
+		await renderAndValidate( <RemoveItemTest /> );
+
+		const toggleButton = screen.getByRole( 'button', {
+			name: 'Toggle third item',
+		} );
+
+		await press.Tab();
+		await press.Tab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 1' } )
+		).toHaveFocus();
+
+		await press.ArrowRight();
+		await press.ArrowRight();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toHaveFocus();
+
+		await click( toggleButton );
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Item 3' } )
+		).not.toBeInTheDocument();
+
+		await press.ShiftTab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 2' } )
+		).toHaveFocus();
+
+		await click( toggleButton );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toBeVisible();
+
+		await press.ShiftTab();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 2' } )
+		).toHaveFocus();
+
+		await press.ArrowRight();
+
+		expect(
+			screen.getByRole( 'button', { name: 'Item 3' } )
+		).toHaveFocus();
+	} );
+
+	describe.each( [
+		[ 'When LTR', false ],
+		[ 'When RTL', true ],
+	] )( '%s', ( _when, rtl ) => {
+		const previousArrowKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+		const nextArrowKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+		const firstArrowKey = rtl ? 'End' : 'Home';
+		const lastArrowKey = rtl ? 'Home' : 'End';
+
+		describe( 'In one dimension', () => {
+			test( 'All directions work with no orientation', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl }>
+						<Composite.Item>Item 1</Composite.Item>
+						<Composite.Item>Item 2</Composite.Item>
+						<Composite.Item>Item 3</Composite.Item>
+					</Composite>
+				);
+
+				const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+				const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+				const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+				await press.Tab();
+				expect( item1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item2 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item3 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item3 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item2 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item1 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item2 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item3 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item2 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item1 ).toHaveFocus();
+				await press.End();
+				expect( item3 ).toHaveFocus();
+				await press.Home();
+				expect( item1 ).toHaveFocus();
+				await press.PageDown();
+				expect( item3 ).toHaveFocus();
+				await press.PageUp();
+				expect( item1 ).toHaveFocus();
+			} );
+
+			test( 'Only left/right work with horizontal orientation', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } orientation="horizontal">
+						<Composite.Item>Item 1</Composite.Item>
+						<Composite.Item>Item 2</Composite.Item>
+						<Composite.Item>Item 3</Composite.Item>
+					</Composite>
+				);
+
+				const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+				const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+				const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+				await press.Tab();
+				expect( item1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item2 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item3 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item3 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item2 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item1 ).toHaveFocus();
+				await press.End();
+				expect( item3 ).toHaveFocus();
+				await press.Home();
+				expect( item1 ).toHaveFocus();
+				await press.PageDown();
+				expect( item3 ).toHaveFocus();
+				await press.PageUp();
+				expect( item1 ).toHaveFocus();
+			} );
+
+			test( 'Only up/down work with vertical orientation', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } orientation="vertical">
+						<Composite.Item>Item 1</Composite.Item>
+						<Composite.Item>Item 2</Composite.Item>
+						<Composite.Item>Item 3</Composite.Item>
+					</Composite>
+				);
+
+				const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+				const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+				const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+				await press.Tab();
+				expect( item1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item2 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item3 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item3 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item2 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item1 ).toHaveFocus();
+				await press.End();
+				expect( item3 ).toHaveFocus();
+				await press.Home();
+				expect( item1 ).toHaveFocus();
+				await press.PageDown();
+				expect( item3 ).toHaveFocus();
+				await press.PageUp();
+				expect( item1 ).toHaveFocus();
+			} );
+
+			test( 'Focus wraps with loop enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } focusLoop>
+						<Composite.Item>Item 1</Composite.Item>
+						<Composite.Item>Item 2</Composite.Item>
+						<Composite.Item>Item 3</Composite.Item>
+					</Composite>
+				);
+
+				const item1 = screen.getByRole( 'button', { name: 'Item 1' } );
+				const item2 = screen.getByRole( 'button', { name: 'Item 2' } );
+				const item3 = screen.getByRole( 'button', { name: 'Item 3' } );
+
+				await press.Tab();
+				expect( item1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item2 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item3 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( item1 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( item3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( item1 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( item3 ).toHaveFocus();
+			} );
+		} );
+
+		describe( 'In two dimensions', () => {
+			test( 'All directions work as standard', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl }>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+							<Composite.Item>Item A2</Composite.Item>
+							<Composite.Item>Item A3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+							<Composite.Item>Item B3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item>Item C2</Composite.Item>
+							<Composite.Item>Item C3</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemA2 = screen.getByRole( 'button', {
+					name: 'Item A2',
+				} );
+				const itemA3 = screen.getByRole( 'button', {
+					name: 'Item A3',
+				} );
+				const itemB1 = screen.getByRole( 'button', {
+					name: 'Item B1',
+				} );
+				const itemB2 = screen.getByRole( 'button', {
+					name: 'Item B2',
+				} );
+				const itemC1 = screen.getByRole( 'button', {
+					name: 'Item C1',
+				} );
+				const itemC3 = screen.getByRole( 'button', {
+					name: 'Item C3',
+				} );
+
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( itemA1 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemB1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemB2 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( itemA2 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemA1 ).toHaveFocus();
+				await press( lastArrowKey );
+				expect( itemA3 ).toHaveFocus();
+				await press.PageDown();
+				expect( itemC3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemC3 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemC3 ).toHaveFocus();
+				await press( firstArrowKey );
+				expect( itemC1 ).toHaveFocus();
+				await press.PageUp();
+				expect( itemA1 ).toHaveFocus();
+				await press.End( null, { ctrlKey: true } );
+				expect( itemC3 ).toHaveFocus();
+				await press.Home( null, { ctrlKey: true } );
+				expect( itemA1 ).toHaveFocus();
+			} );
+
+			test( 'Focus wraps around rows/columns with loop enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } focusLoop>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+							<Composite.Item>Item A2</Composite.Item>
+							<Composite.Item>Item A3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+							<Composite.Item>Item B3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item>Item C2</Composite.Item>
+							<Composite.Item>Item C3</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemA2 = screen.getByRole( 'button', {
+					name: 'Item A2',
+				} );
+				const itemA3 = screen.getByRole( 'button', {
+					name: 'Item A3',
+				} );
+				const itemB1 = screen.getByRole( 'button', {
+					name: 'Item B1',
+				} );
+				const itemC1 = screen.getByRole( 'button', {
+					name: 'Item C1',
+				} );
+				const itemC3 = screen.getByRole( 'button', {
+					name: 'Item C3',
+				} );
+
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA2 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemB1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemC1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemA1 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemA3 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( itemC3 ).toHaveFocus();
+			} );
+
+			test( 'Focus moves between rows/columns with wrap enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } focusWrap>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+							<Composite.Item>Item A2</Composite.Item>
+							<Composite.Item>Item A3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+							<Composite.Item>Item B3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item>Item C2</Composite.Item>
+							<Composite.Item>Item C3</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemA2 = screen.getByRole( 'button', {
+					name: 'Item A2',
+				} );
+				const itemA3 = screen.getByRole( 'button', {
+					name: 'Item A3',
+				} );
+				const itemB1 = screen.getByRole( 'button', {
+					name: 'Item B1',
+				} );
+				const itemC1 = screen.getByRole( 'button', {
+					name: 'Item C1',
+				} );
+				const itemC3 = screen.getByRole( 'button', {
+					name: 'Item C3',
+				} );
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA2 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemB1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemC1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemA2 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemA1 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( itemA1 ).toHaveFocus();
+				await press.End( itemA1, { ctrlKey: true } );
+				expect( itemC3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemC3 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemC3 ).toHaveFocus();
+			} );
+
+			test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } focusLoop focusWrap>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+							<Composite.Item>Item A2</Composite.Item>
+							<Composite.Item>Item A3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+							<Composite.Item>Item B3</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item>Item C2</Composite.Item>
+							<Composite.Item>Item C3</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemC3 = screen.getByRole( 'button', {
+					name: 'Item C3',
+				} );
+
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press( previousArrowKey );
+				expect( itemC3 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowUp();
+				expect( itemC3 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemA1 ).toHaveFocus();
+			} );
+
+			test( 'Focus shifts if vertical neighbor unavailable when shift enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl } focusShift>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item disabled>Item C2</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemB1 = screen.getByRole( 'button', {
+					name: 'Item B1',
+				} );
+				const itemB2 = screen.getByRole( 'button', {
+					name: 'Item B2',
+				} );
+				const itemC1 = screen.getByRole( 'button', {
+					name: 'Item C1',
+				} );
+
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemB1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemB2 ).toHaveFocus();
+				await press.ArrowUp();
+				// A2 doesn't exist
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemB1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemB2 ).toHaveFocus();
+				await press.ArrowDown();
+				// C2 is disabled
+				expect( itemC1 ).toHaveFocus();
+			} );
+
+			test( 'Focus does not shift if vertical neighbor unavailable when shift not enabled', async () => {
+				await renderAndValidate(
+					<Composite rtl={ rtl }>
+						<Composite.Row>
+							<Composite.Item>Item A1</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item B1</Composite.Item>
+							<Composite.Item>Item B2</Composite.Item>
+						</Composite.Row>
+						<Composite.Row>
+							<Composite.Item>Item C1</Composite.Item>
+							<Composite.Item disabled>Item C2</Composite.Item>
+						</Composite.Row>
+					</Composite>
+				);
+
+				const itemA1 = screen.getByRole( 'button', {
+					name: 'Item A1',
+				} );
+				const itemB1 = screen.getByRole( 'button', {
+					name: 'Item B1',
+				} );
+				const itemB2 = screen.getByRole( 'button', {
+					name: 'Item B2',
+				} );
+
+				await press.Tab();
+				expect( itemA1 ).toHaveFocus();
+				await press.ArrowDown();
+				expect( itemB1 ).toHaveFocus();
+				await press( nextArrowKey );
+				expect( itemB2 ).toHaveFocus();
+				await press.ArrowUp();
+				// A2 doesn't exist
+				expect( itemB2 ).toHaveFocus();
+				await press.ArrowDown();
+				// C2 is disabled
+				expect( itemB2 ).toHaveFocus();
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/composite/typeahead.tsx b/packages/components/src/composite/typeahead.tsx
new file mode 100644
index 00000000000000..3a3c3875a33604
--- /dev/null
+++ b/packages/components/src/composite/typeahead.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeTypeaheadProps } from './types';
+
+export const CompositeTypeahead = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeTypeaheadProps, 'div', false >
+>( function CompositeTypeahead( props, ref ) {
+	const context = useCompositeContext();
+
+	// @ts-expect-error The store prop is undocumented and only used by the
+	// legacy compat layer. The `store` prop is documented, but its type is
+	// obfuscated to discourage its use outside of the component's internals.
+	const store = ( props.store ?? context.store ) as Ariakit.CompositeStore;
+
+	return (
+		<Ariakit.CompositeTypeahead store={ store } { ...props } ref={ ref } />
+	);
+} );
diff --git a/packages/components/src/composite/types.ts b/packages/components/src/composite/types.ts
new file mode 100644
index 00000000000000..ed95c7f0253b33
--- /dev/null
+++ b/packages/components/src/composite/types.ts
@@ -0,0 +1,296 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+export type CompositeContextProps = {
+	/**
+	 * The component store, used for advanced usage of the component.
+	 *
+	 * _Note: Using the store directly is not recommended. Instead, use the props
+	 * exposed by the `Composite` component._
+	 *
+	 */
+	store?: unknown;
+};
+
+type CompositeStoreProps = {
+	/**
+	 * The current active item `id`. The active item is the element within the
+	 * composite widget that has either DOM or virtual focus (in case
+	 * the `virtualFocus` prop is enabled).
+	 * - `null` represents the base composite element (the one with a [composite
+	 *   role](https://w3c.github.io/aria/#composite)). Users will be able to
+	 *   navigate out of it using arrow keys.
+	 * - If `activeId` is initially set to `null`, the base composite element
+	 *   itself will have focus and users will be able to navigate to it using
+	 *   arrow keys.
+	 */
+	activeId?: Ariakit.CompositeStoreProps[ 'activeId' ];
+	/**
+	 * The composite item id that should be active by default when the composite
+	 * widget is rendered. If `null`, the composite element itself will have focus
+	 * and users will be able to navigate to it using arrow keys. If `undefined`,
+	 * the first enabled item will be focused.
+	 */
+	defaultActiveId?: Ariakit.CompositeStoreProps[ 'defaultActiveId' ];
+	/**
+	 * A callback that gets called when the `activeId` state changes.
+	 */
+	setActiveId?: Ariakit.CompositeStoreProps[ 'setActiveId' ];
+	/**
+	 * Determines how the focus behaves when the user reaches the end of the
+	 * composite widget.
+	 *
+	 * On one-dimensional composite widgets:
+	 * - `true` loops from the last item to the first item and vice-versa.
+	 * - `horizontal` loops only if `orientation` is `horizontal` or not set.
+	 * - `vertical` loops only if `orientation` is `vertical` or not set.
+	 * - If `activeId` is initially set to `null`, the composite element will
+	 *   be focused in between the last and first items.
+	 *
+	 * On two-dimensional composite widgets (ie. when using `CompositeRow`):
+	 * - `true` loops from the last row/column item to the first item in the same
+	 *   row/column and vice-versa. If it's the last item in the last row, it
+	 *   moves to the first item in the first row and vice-versa.
+	 * - `horizontal` loops only from the last row item to the first item in the
+	 *   same row.
+	 * - `vertical` loops only from the last column item to the first item in the
+	 *   column row.
+	 * - If `activeId` is initially set to `null`, vertical loop will have no
+	 *   effect as moving down from the last row or up from the first row will
+	 *   focus on the composite element.
+	 * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the
+	 *   last item in the last row or column and the first item in the first row or
+	 *   column and vice-versa.
+	 *
+	 * @default false
+	 */
+	focusLoop?: Ariakit.CompositeStoreProps[ 'focusLoop' ];
+	/**
+	 * **Works only on two-dimensional composite widgets**.
+	 *
+	 * If enabled, moving to the next item from the last one in a row or column
+	 * will focus on the first item in the next row or column and vice-versa.
+	 * - `true` wraps between rows and columns.
+	 * - `horizontal` wraps only between rows.
+	 * - `vertical` wraps only between columns.
+	 * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
+	 *   last item in the last row or column and the first item in the first row or
+	 *   column and vice-versa.
+	 *
+	 * @default false
+	 */
+	focusWrap?: Ariakit.CompositeStoreProps[ 'focusWrap' ];
+	/**
+	 * **Works only on two-dimensional composite widgets**.
+	 *
+	 * If enabled, moving up or down when there's no next item or when the next
+	 * item is disabled will shift to the item right before it.
+	 *
+	 * @default false
+	 */
+	focusShift?: Ariakit.CompositeStoreProps[ 'focusShift' ];
+	/**
+	 * If enabled, the composite element will act as an
+	 * [`aria-activedescendant`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant)
+	 * container instead of [roving
+	 * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
+	 * DOM focus will remain on the composite element while its items receive
+	 * virtual focus.
+	 *
+	 * In both scenarios, the item in focus will carry the `data-active-item`
+	 * attribute.
+	 *
+	 * @default false
+	 */
+	virtualFocus?: Ariakit.CompositeStoreProps[ 'virtualFocus' ];
+	/**
+	 * Defines the orientation of the composite widget. If the composite has a
+	 * single row or column (one-dimensional), the `orientation` value determines
+	 * which arrow keys can be used to move focus:
+	 * - `both`: all arrow keys work.
+	 * - `horizontal`: only left and right arrow keys work.
+	 * - `vertical`: only up and down arrow keys work.
+	 *
+	 * It doesn't have any effect on two-dimensional composites.
+	 *
+	 * @default "both"
+	 */
+	orientation?: Ariakit.CompositeStoreProps[ 'orientation' ];
+	/**
+	 * Controls how the previous and next items are determined.
+	 * If `rtl` is set to `true`, they will be inverted.
+	 *
+	 * This only affects the composite widget behavior. You still need to set
+	 * `dir="rtl"` on HTML/CSS.
+	 *
+	 * @default `isRtl()`
+	 */
+	rtl?: Ariakit.CompositeStoreProps[ 'rtl' ];
+};
+
+export type CompositeProps = CompositeStoreProps & {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeProps[ 'render' ];
+	/**
+	 * Makes the component a focusable element. When this element gains keyboard
+	 * focus, it gets a `data-focus-visible` attribute and triggers the
+	 * `onFocusVisible` prop.
+	 * The component supports the `disabled` prop even for those elements not
+	 * supporting the native `disabled` attribute. Disabled elements may be
+	 * still accessible via keyboard by using the the `accessibleWhenDisabled`
+	 * prop.
+	 * Non-native focusable elements will lose their focusability entirely.
+	 * However, native focusable elements will retain their inherent focusability.
+	 */
+	focusable?: Ariakit.CompositeProps[ 'focusable' ];
+	/**
+	 * Determines if the element is disabled. This sets the `aria-disabled`
+	 * attribute accordingly, enabling support for all elements, including those
+	 * that don't support the native `disabled` attribute.
+	 *
+	 * This feature can be combined with the `accessibleWhenDisabled` prop to
+	 * make disabled elements still accessible via keyboard.
+	 *
+	 * **Note**: For this prop to work, the `focusable` prop must be set to
+	 * `true`, if it's not set by default.
+	 *
+	 * @default false
+	 */
+	disabled?: Ariakit.CompositeProps[ 'disabled' ];
+	/**
+	 * Indicates whether the element should be focusable even when it is
+	 * `disabled`.
+	 *
+	 * This is important when discoverability is a concern. For example:
+	 *
+	 * > A toolbar in an editor contains a set of special smart paste functions
+	 * that are disabled when the clipboard is empty or when the function is not
+	 * applicable to the current content of the clipboard. It could be helpful to
+	 * keep the disabled buttons focusable if the ability to discover their
+	 * functionality is primarily via their presence on the toolbar.
+	 *
+	 * Learn more on [Focusability of disabled
+	 * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+	 */
+	accessibleWhenDisabled?: Ariakit.CompositeProps[ 'accessibleWhenDisabled' ];
+	/**
+	 * Custom event handler invoked when the element gains focus through keyboard
+	 * interaction or a key press occurs while the element is in focus. This is
+	 * the programmatic equivalent of the `data-focus-visible` attribute.
+	 *
+	 * **Note**: For this prop to work, the `focusable` prop must be set to `true`
+	 * if it's not set by default.
+	 */
+	onFocusVisible?: Ariakit.CompositeProps[ 'onFocusVisible' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeProps[ 'children' ];
+};
+
+export type CompositeGroupProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeGroupProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeGroupProps[ 'children' ];
+};
+
+export type CompositeGroupLabelProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeGroupLabelProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeGroupLabelProps[ 'children' ];
+};
+
+export type CompositeItemProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeItemProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeItemProps[ 'children' ];
+	/**
+	 * Indicates whether the element should be focusable even when it is
+	 * `disabled`.
+	 *
+	 * This is important when discoverability is a concern. For example:
+	 *
+	 * > A toolbar in an editor contains a set of special smart paste functions
+	 * that are disabled when the clipboard is empty or when the function is not
+	 * applicable to the current content of the clipboard. It could be helpful to
+	 * keep the disabled buttons focusable if the ability to discover their
+	 * functionality is primarily via their presence on the toolbar.
+	 *
+	 * Learn more on [Focusability of disabled
+	 * controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+	 */
+	accessibleWhenDisabled?: Ariakit.CompositeItemProps[ 'accessibleWhenDisabled' ];
+};
+
+export type CompositeRowProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeRowProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeRowProps[ 'children' ];
+};
+
+export type CompositeHoverProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeHoverProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeHoverProps[ 'children' ];
+};
+
+export type CompositeTypeaheadProps = {
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 */
+	render?: Ariakit.CompositeTypeaheadProps[ 'render' ];
+	/**
+	 * The contents of the component.
+	 */
+	children?: Ariakit.CompositeTypeaheadProps[ 'children' ];
+};
diff --git a/packages/components/src/confirm-dialog/README.md b/packages/components/src/confirm-dialog/README.md
index 5ed36534898490..3ad42d9d68160e 100644
--- a/packages/components/src/confirm-dialog/README.md
+++ b/packages/components/src/confirm-dialog/README.md
@@ -43,6 +43,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
 
 function Example() {
@@ -136,4 +137,11 @@ The optional custom text to display as the confirmation button's label
 -   Required: No
 -   Default: "Cancel"
 
-The optional custom text to display as the cancelation button's label
+The optional custom text to display as the cancellation button's label
+
+## Best practices
+
+The ConfirmDialog component should:
+
+-   Be used only for short confirmation messages where a cancel and confirm actions are provided.
+-   Use a descriptive text for the _confirm_ button. Default is "OK".
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 92fb3fa08fbb17..7e787439d91dfd 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -1,24 +1,16 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef, KeyboardEvent } from 'react';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Modal from '../modal';
-import type { OwnProps, DialogInputEvent } from './types';
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { ConfirmDialogProps, DialogInputEvent } from './types';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnect } from '../context';
 import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';
@@ -26,10 +18,10 @@ import { VStack } from '../v-stack';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 
-function ConfirmDialog(
-	props: WordPressComponentProps< OwnProps, 'div', false >,
-	forwardedRef: ForwardedRef< any >
-) {
+const UnconnectedConfirmDialog = (
+	props: WordPressComponentProps< ConfirmDialogProps, 'div', false >,
+	forwardedRef: React.ForwardedRef< any >
+) => {
 	const {
 		isOpen: isOpenProp,
 		onConfirm,
@@ -42,6 +34,8 @@ function ConfirmDialog(
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
+	const cancelButtonRef = useRef();
+	const confirmButtonRef = useRef();
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
@@ -68,8 +62,14 @@ function ConfirmDialog(
 	);
 
 	const handleEnter = useCallback(
-		( event: KeyboardEvent< HTMLDivElement > ) => {
-			if ( event.key === 'Enter' ) {
+		( event: React.KeyboardEvent< HTMLDivElement > ) => {
+			// Avoid triggering the 'confirm' action when a button is focused,
+			// as this can cause a double submission.
+			const isConfirmOrCancelButton =
+				event.target === cancelButtonRef.current ||
+				event.target === confirmButtonRef.current;
+
+			if ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {
 				handleEvent( onConfirm )( event );
 			}
 		},
@@ -86,7 +86,7 @@ function ConfirmDialog(
 					onRequestClose={ handleEvent( onCancel ) }
 					onKeyDown={ handleEnter }
 					closeButtonLabel={ cancelLabel }
-					isDismissible={ true }
+					isDismissible
 					ref={ forwardedRef }
 					overlayClassName={ wrapperClassName }
 					__experimentalHideHeader
@@ -96,12 +96,16 @@ function ConfirmDialog(
 						<Text>{ children }</Text>
 						<Flex direction="row" justify="flex-end">
 							<Button
+								__next40pxDefaultSize
+								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
 							>
 								{ cancelLabel }
 							</Button>
 							<Button
+								__next40pxDefaultSize
+								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }
 							>
@@ -113,6 +117,77 @@ function ConfirmDialog(
 			) }
 		</>
 	);
-}
+};
 
-export default contextConnect( ConfirmDialog, 'ConfirmDialog' );
+/**
+ * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)
+ * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+ * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.
+ * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by
+ * clicking outside the dialog focus (i.e, the overlay).
+ *
+ * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.
+ *
+ * UnControlled:
+ *
+ * Allows the component to be used standalone, just by declaring it as part of another React's component render method:
+ * -   It will be automatically open (displayed) upon mounting;
+ * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+ * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
+ *
+ * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:
+ *
+ * ```jsx
+ * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ *
+ * function Example() {
+ * 	return (
+ * 		<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>
+ * 			Are you sure? <strong>This action cannot be undone!</strong>
+ * 		</ConfirmDialog>
+ * 	);
+ * }
+ * ```
+ *
+ *
+ * Controlled mode:
+ *  Let the parent component control when the dialog is open/closed. It's activated when a
+ * boolean value is passed to `isOpen`:
+ * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;
+ * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;
+ * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
+ *
+ *```jsx
+ * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * function Example() {
+ * 	const [ isOpen, setIsOpen ] = useState( true );
+ *
+ * 	const handleConfirm = () => {
+ * 		console.debug( 'Confirmed!' );
+ * 		setIsOpen( false );
+ * 	};
+ *
+ * 	const handleCancel = () => {
+ * 		console.debug( 'Cancelled!' );
+ * 		setIsOpen( false );
+ * 	};
+ *
+ * 	return (
+ * 		<ConfirmDialog
+ * 			isOpen={ isOpen }
+ * 			onConfirm={ handleConfirm }
+ * 			onCancel={ handleCancel }
+ * 		>
+ * 			Are you sure? <strong>This action cannot be undone!</strong>
+ * 		</ConfirmDialog>
+ * 	);
+ * }
+ * ```
+ */
+export const ConfirmDialog = contextConnect(
+	UnconnectedConfirmDialog,
+	'ConfirmDialog'
+);
+export default ConfirmDialog;
diff --git a/packages/components/src/confirm-dialog/stories/index.js b/packages/components/src/confirm-dialog/stories/index.js
deleted file mode 100644
index 92274c70aaf794..00000000000000
--- a/packages/components/src/confirm-dialog/stories/index.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Heading } from '../../heading';
-import { ConfirmDialog } from '..';
-
-const meta = {
-	component: ConfirmDialog,
-	title: 'Components (Experimental)/ConfirmDialog',
-	argTypes: {
-		children: {
-			control: { type: 'text' },
-		},
-		confirmButtonText: {
-			control: { type: 'text' },
-		},
-		cancelButtonText: {
-			control: { type: 'text' },
-		},
-		isOpen: {
-			control: { type: null },
-		},
-		onConfirm: {
-			control: { type: null },
-		},
-		onCancel: {
-			control: { type: null },
-		},
-	},
-	args: {
-		children: 'Would you like to privately publish the post now?',
-	},
-	parameters: {
-		docs: { source: { state: 'open' } },
-	},
-};
-
-export default meta;
-
-const Template = ( args ) => {
-	const [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState( '' );
-
-	const handleConfirm = () => {
-		setConfirmVal( 'Confirmed!' );
-		setIsOpen( false );
-	};
-
-	const handleCancel = () => {
-		setConfirmVal( 'Cancelled' );
-		setIsOpen( false );
-	};
-	return (
-		<>
-			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
-				Open ConfirmDialog
-			</Button>
-
-			<ConfirmDialog
-				{ ...args }
-				isOpen={ isOpen }
-				onConfirm={ handleConfirm }
-				onCancel={ handleCancel }
-			>
-				{ args.children }
-			</ConfirmDialog>
-
-			<Heading level={ 1 }>{ confirmVal }</Heading>
-		</>
-	);
-};
-
-// Simplest usage: just declare the component with the required `onConfirm` prop. Note: the `onCancel` prop is optional here, unless you'd like to render the component in Controlled mode (see below)
-export const _default = Template.bind( {} );
-const _defaultSnippet = `() => {
-  const [ isOpen, setIsOpen ] = useState( false );
-  const [ confirmVal, setConfirmVal ] = useState('');
-
-  const handleConfirm = () => {
-    setConfirmVal( 'Confirmed!' );
-    setIsOpen( false );
-  };
-
-  const handleCancel = () => {
-    setConfirmVal( 'Cancelled' );
-    setIsOpen( false );
-  };
-
-  return (
-    <>
-    <ConfirmDialog
-      isOpen={ isOpen }
-      onConfirm={ handleConfirm }
-      onCancel={ handleCancel }
-    >
-      Would you like to privately publish the post now?
-    </ConfirmDialog>
-
-    <Heading level={ 1 }>{ confirmVal }</Heading>
-
-    <Button variant="primary" onClick={ () => setIsOpen( true ) }>
-      Open ConfirmDialog
-    </Button>
-    </>
-    );
-  };`;
-_default.args = {};
-_default.parameters = {
-	docs: {
-		source: {
-			code: _defaultSnippet,
-			language: 'jsx',
-			type: 'auto',
-			format: 'true',
-		},
-	},
-};
-
-// To customize button text, pass the `cancelButtonText` and/or `confirmButtonText` props.
-export const withCustomButtonLabels = Template.bind( {} );
-withCustomButtonLabels.args = {
-	cancelButtonText: 'No thanks',
-	confirmButtonText: 'Yes please!',
-};
diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx
new file mode 100644
index 00000000000000..7c08d48369a2b0
--- /dev/null
+++ b/packages/components/src/confirm-dialog/stories/index.story.tsx
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { ConfirmDialog } from '../component';
+
+const meta: Meta< typeof ConfirmDialog > = {
+	component: ConfirmDialog,
+	title: 'Components (Experimental)/Overlays/ConfirmDialog',
+	id: 'components-experimental-confirmdialog',
+	argTypes: {
+		isOpen: {
+			control: false,
+		},
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+const Template: StoryFn< typeof ConfirmDialog > = ( {
+	onConfirm,
+	onCancel,
+	...args
+} ) => {
+	const [ isOpen, setIsOpen ] = useState( false );
+
+	const handleConfirm: typeof onConfirm = ( confirmArgs ) => {
+		onConfirm( confirmArgs );
+		setIsOpen( false );
+	};
+
+	const handleCancel: typeof onCancel = ( cancelArgs ) => {
+		onCancel?.( cancelArgs );
+		setIsOpen( false );
+	};
+
+	return (
+		<>
+			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
+				Open ConfirmDialog
+			</Button>
+
+			<ConfirmDialog
+				{ ...args }
+				isOpen={ isOpen }
+				onConfirm={ handleConfirm }
+				onCancel={ handleCancel }
+			>
+				{ args.children }
+			</ConfirmDialog>
+		</>
+	);
+};
+
+// Simplest usage: just declare the component with the required `onConfirm` prop. Note: the `onCancel` prop is optional here, unless you'd like to render the component in Controlled mode (see below)
+export const Default = Template.bind( {} );
+const _defaultSnippet = `() => {
+  const [ isOpen, setIsOpen ] = useState( false );
+  const [ confirmVal, setConfirmVal ] = useState('');
+
+  const handleConfirm = () => {
+    setConfirmVal( 'Confirmed!' );
+    setIsOpen( false );
+  };
+
+  const handleCancel = () => {
+    setConfirmVal( 'Cancelled' );
+    setIsOpen( false );
+  };
+
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={ isOpen }
+        onConfirm={ handleConfirm }
+        onCancel={ handleCancel }
+      >
+        Would you like to privately publish the post now?
+      </ConfirmDialog>
+
+      <Heading level={ 1 }>{ confirmVal }</Heading>
+
+      <Button variant="primary" onClick={ () => setIsOpen( true ) }>
+        Open ConfirmDialog
+      </Button>
+    </>
+  );
+};`;
+Default.args = {
+	children: 'Would you like to privately publish the post now?',
+};
+Default.parameters = {
+	docs: {
+		source: {
+			code: _defaultSnippet,
+			language: 'jsx',
+			type: 'auto',
+		},
+	},
+};
+
+// To customize button text, pass the `cancelButtonText` and/or `confirmButtonText` props.
+export const WithCustomButtonLabels = Template.bind( {} );
+WithCustomButtonLabels.args = {
+	...Default.args,
+	cancelButtonText: 'No thanks',
+	confirmButtonText: 'Yes please!',
+};
diff --git a/packages/components/src/confirm-dialog/test/index.js b/packages/components/src/confirm-dialog/test/index.js
deleted file mode 100644
index 0959f0e95b989f..00000000000000
--- a/packages/components/src/confirm-dialog/test/index.js
+++ /dev/null
@@ -1,353 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	render,
-	screen,
-	fireEvent,
-	waitForElementToBeRemoved,
-	waitFor,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { ConfirmDialog } from '..';
-
-const noop = () => {};
-
-describe( 'Confirm', () => {
-	describe( 'Confirm component', () => {
-		describe( 'Structure', () => {
-			it( 'should render correctly', () => {
-				render(
-					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const dialog = screen.getByRole( 'dialog' );
-				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
-
-				expect( dialog ).toBeInTheDocument();
-
-				elementsTexts.forEach( ( txt ) => {
-					const el = screen.getByText( txt );
-					expect( el ).toBeInTheDocument();
-				} );
-			} );
-			it( 'should render correctly with custom button labels', () => {
-				const cancelButtonText = 'No thanks';
-				const confirmButtonText = 'Yes please!';
-				render(
-					<ConfirmDialog
-						onConfirm={ noop }
-						onCancel={ noop }
-						cancelButtonText={ cancelButtonText }
-						confirmButtonText={ confirmButtonText }
-					>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const dialog = screen.getByRole( 'dialog' );
-				const elementsTexts = [ confirmButtonText, cancelButtonText ];
-
-				expect( dialog ).toBeInTheDocument();
-				expect(
-					screen.getByText( 'Are you sure?' )
-				).toBeInTheDocument();
-
-				elementsTexts.forEach( ( txt ) => {
-					const el = screen.getByRole( 'button', { name: txt } );
-					expect( el ).toBeInTheDocument();
-				} );
-			} );
-		} );
-
-		describe( 'When uncontrolled', () => {
-			it( 'should render', () => {
-				render(
-					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-
-				expect( confirmDialog ).toBeInTheDocument();
-			} );
-
-			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-
-				render(
-					<ConfirmDialog onConfirm={ onConfirm }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-				const button = screen.getByText( 'OK' );
-
-				await user.click( button );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-				expect( onConfirm ).toHaveBeenCalled();
-			} );
-
-			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const onCancel = jest.fn().mockName( 'onCancel()' );
-
-				render(
-					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-				const button = screen.getByText( 'Cancel' );
-
-				await user.click( button );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-				expect( onCancel ).toHaveBeenCalled();
-			} );
-
-			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				render(
-					<ConfirmDialog onConfirm={ noop }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-				const button = screen.getByText( 'Cancel' );
-
-				await user.click( button );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-			} );
-
-			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
-				const onCancel = jest.fn().mockName( 'onCancel()' );
-
-				render(
-					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-
-				//The overlay click is handled by detecting an onBlur from the modal frame.
-				// TODO: replace with `@testing-library/user-event`
-				fireEvent.blur( confirmDialog );
-
-				await waitForElementToBeRemoved( confirmDialog );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-				expect( onCancel ).toHaveBeenCalled();
-			} );
-
-			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const onCancel = jest.fn().mockName( 'onCancel()' );
-
-				render(
-					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-
-				await user.keyboard( '[Escape]' );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-				expect( onCancel ).toHaveBeenCalled();
-			} );
-
-			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
-				const onConfirm = jest.fn().mockName( 'onConfirm()' );
-
-				render(
-					<ConfirmDialog onConfirm={ onConfirm }>
-						Are you sure?
-					</ConfirmDialog>
-				);
-
-				const confirmDialog = screen.getByRole( 'dialog' );
-
-				await user.keyboard( '[Enter]' );
-
-				expect( confirmDialog ).not.toBeInTheDocument();
-				expect( onConfirm ).toHaveBeenCalled();
-			} );
-		} );
-	} );
-
-	describe( 'When controlled (isOpen is not `undefined`)', () => {
-		it( 'should render when `isOpen` is set to `true`', async () => {
-			render(
-				<ConfirmDialog
-					isOpen={ true }
-					onConfirm={ noop }
-					onCancel={ noop }
-				>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			const confirmDialog = screen.getByRole( 'dialog' );
-
-			expect( confirmDialog ).toBeInTheDocument();
-		} );
-
-		it( 'should not render if `isOpen` is set to false', async () => {
-			render(
-				<ConfirmDialog
-					isOpen={ false }
-					onConfirm={ noop }
-					onCancel={ noop }
-				>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			// `queryByRole` needs to be used here because in this scenario the
-			// dialog is never rendered.
-			const confirmDialog = screen.queryByRole( 'dialog' );
-
-			expect( confirmDialog ).not.toBeInTheDocument();
-		} );
-
-		it( 'should call the `onConfirm` callback if `OK`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
-
-			render(
-				<ConfirmDialog isOpen={ true } onConfirm={ onConfirm }>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			const button = screen.getByText( 'OK' );
-
-			await user.click( button );
-
-			expect( onConfirm ).toHaveBeenCalled();
-		} );
-
-		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onCancel = jest.fn().mockName( 'onCancel()' );
-
-			render(
-				<ConfirmDialog
-					isOpen={ true }
-					onConfirm={ noop }
-					onCancel={ onCancel }
-				>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			const button = screen.getByText( 'Cancel' );
-
-			await user.click( button );
-
-			expect( onCancel ).toHaveBeenCalled();
-		} );
-
-		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
-			const onCancel = jest.fn().mockName( 'onCancel()' );
-
-			render(
-				<ConfirmDialog
-					isOpen={ true }
-					onConfirm={ noop }
-					onCancel={ onCancel }
-				>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			const confirmDialog = screen.getByRole( 'dialog' );
-
-			//The overlay click is handled by detecting an onBlur from the modal frame.
-			// TODO: replace with `@testing-library/user-event`
-			fireEvent.blur( confirmDialog );
-
-			// Wait for a DOM side effect here, so that the `queueBlurCheck` in the
-			// `useFocusOutside` hook properly executes its timeout task.
-			await waitFor( () => expect( onCancel ).toHaveBeenCalled() );
-		} );
-
-		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onCancel = jest.fn().mockName( 'onCancel()' );
-
-			render(
-				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			await user.keyboard( '[Escape]' );
-
-			expect( onCancel ).toHaveBeenCalled();
-		} );
-
-		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onConfirm = jest.fn().mockName( 'onConfirm()' );
-
-			render(
-				<ConfirmDialog
-					isOpen={ true }
-					onConfirm={ onConfirm }
-					onCancel={ noop }
-				>
-					Are you sure?
-				</ConfirmDialog>
-			);
-
-			await user.keyboard( '[Enter]' );
-
-			expect( onConfirm ).toHaveBeenCalled();
-		} );
-	} );
-} );
diff --git a/packages/components/src/confirm-dialog/test/index.tsx b/packages/components/src/confirm-dialog/test/index.tsx
new file mode 100644
index 00000000000000..65867e827f4845
--- /dev/null
+++ b/packages/components/src/confirm-dialog/test/index.tsx
@@ -0,0 +1,353 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { ConfirmDialog } from '..';
+
+const noop = () => {};
+
+describe( 'Confirm', () => {
+	describe( 'Confirm component', () => {
+		describe( 'Structure', () => {
+			it( 'should render correctly', () => {
+				render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const dialog = screen.getByRole( 'dialog' );
+				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
+
+				expect( dialog ).toBeInTheDocument();
+
+				elementsTexts.forEach( ( txt ) => {
+					const el = screen.getByText( txt );
+					expect( el ).toBeInTheDocument();
+				} );
+			} );
+			it( 'should render correctly with custom button labels', () => {
+				const cancelButtonText = 'No thanks';
+				const confirmButtonText = 'Yes please!';
+				render(
+					<ConfirmDialog
+						onConfirm={ noop }
+						onCancel={ noop }
+						cancelButtonText={ cancelButtonText }
+						confirmButtonText={ confirmButtonText }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const dialog = screen.getByRole( 'dialog' );
+				const elementsTexts = [ confirmButtonText, cancelButtonText ];
+
+				expect( dialog ).toBeInTheDocument();
+				expect(
+					screen.getByText( 'Are you sure?' )
+				).toBeInTheDocument();
+
+				elementsTexts.forEach( ( txt ) => {
+					const el = screen.getByRole( 'button', { name: txt } );
+					expect( el ).toBeInTheDocument();
+				} );
+			} );
+		} );
+
+		describe( 'When uncontrolled', () => {
+			it( 'should render', () => {
+				render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+
+				expect( confirmDialog ).toBeInTheDocument();
+			} );
+
+			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+				render(
+					<ConfirmDialog onConfirm={ onConfirm }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'OK' );
+
+				await user.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onConfirm ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup();
+
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
+
+				await user.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should be dismissible even if an `onCancel` callback is not provided', async () => {
+				const user = userEvent.setup();
+
+				render(
+					<ConfirmDialog onConfirm={ noop }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
+
+				await user.click( button );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+			} );
+
+			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup();
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+
+				// Disable reason: Semantic queries can’t reach the overlay.
+				// eslint-disable-next-line testing-library/no-node-access
+				await user.click( confirmDialog.parentElement! );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup();
+
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+
+				await user.keyboard( '[Escape]' );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
+
+			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+				render(
+					<ConfirmDialog onConfirm={ onConfirm }>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				const confirmDialog = screen.getByRole( 'dialog' );
+
+				await user.keyboard( '[Enter]' );
+
+				expect( confirmDialog ).not.toBeInTheDocument();
+				expect( onConfirm ).toHaveBeenCalled();
+			} );
+
+			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Enter]' );
+
+				expect( onConfirm ).not.toHaveBeenCalled();
+				expect( onCancel ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Tab][Enter]' );
+
+				expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+				expect( onCancel ).not.toHaveBeenCalled();
+			} );
+		} );
+	} );
+
+	describe( 'When controlled (isOpen is not `undefined`)', () => {
+		it( 'should render when `isOpen` is set to `true`', async () => {
+			render(
+				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ noop }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const confirmDialog = screen.getByRole( 'dialog' );
+
+			expect( confirmDialog ).toBeInTheDocument();
+		} );
+
+		it( 'should not render if `isOpen` is set to false', async () => {
+			render(
+				<ConfirmDialog
+					isOpen={ false }
+					onConfirm={ noop }
+					onCancel={ noop }
+				>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			// `queryByRole` needs to be used here because in this scenario the
+			// dialog is never rendered.
+			const confirmDialog = screen.queryByRole( 'dialog' );
+
+			expect( confirmDialog ).not.toBeInTheDocument();
+		} );
+
+		it( 'should call the `onConfirm` callback if `OK`', async () => {
+			const user = userEvent.setup();
+
+			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+			render(
+				<ConfirmDialog isOpen onConfirm={ onConfirm }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const button = screen.getByText( 'OK' );
+
+			await user.click( button );
+
+			expect( onConfirm ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
+			const user = userEvent.setup();
+
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			render(
+				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const button = screen.getByText( 'Cancel' );
+
+			await user.click( button );
+
+			expect( onCancel ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
+			const user = userEvent.setup();
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			render(
+				<ConfirmDialog isOpen onConfirm={ noop } onCancel={ onCancel }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			const confirmDialog = screen.getByRole( 'dialog' );
+
+			// Disable reason: Semantic queries can’t reach the overlay.
+			// eslint-disable-next-line testing-library/no-node-access
+			await user.click( confirmDialog.parentElement! );
+
+			expect( onCancel ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
+			const user = userEvent.setup();
+
+			const onCancel = jest.fn().mockName( 'onCancel()' );
+
+			render(
+				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			await user.keyboard( '[Escape]' );
+
+			expect( onCancel ).toHaveBeenCalled();
+		} );
+
+		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
+			const user = userEvent.setup();
+
+			const onConfirm = jest.fn().mockName( 'onConfirm()' );
+
+			render(
+				<ConfirmDialog isOpen onConfirm={ onConfirm } onCancel={ noop }>
+					Are you sure?
+				</ConfirmDialog>
+			);
+
+			await user.keyboard( '[Enter]' );
+
+			expect( onConfirm ).toHaveBeenCalled();
+		} );
+	} );
+} );
diff --git a/packages/components/src/confirm-dialog/types.ts b/packages/components/src/confirm-dialog/types.ts
index 72fef59dc20094..b456b9bc4df196 100644
--- a/packages/components/src/confirm-dialog/types.ts
+++ b/packages/components/src/confirm-dialog/types.ts
@@ -13,21 +13,41 @@ export type DialogInputEvent =
 	| KeyboardEvent< HTMLDivElement >
 	| MouseEvent< HTMLButtonElement >;
 
-type BaseProps = {
+export type ConfirmDialogProps = {
+	/**
+	 * The actual message for the dialog. It's passed as children and any valid `ReactNode` is accepted.
+	 */
 	children: ReactNode;
+	/**
+	 * The callback that's called when the user confirms.
+	 * A confirmation can happen when the `OK` button is clicked or when `Enter` is pressed.
+	 */
 	onConfirm: ( event: DialogInputEvent ) => void;
+	/**
+	 * The optional custom text to display as the confirmation button's label.
+	 */
 	confirmButtonText?: string;
+	/**
+	 * The optional custom text to display as the cancellation button's label.
+	 */
 	cancelButtonText?: string;
-};
-
-type ControlledProps = BaseProps & {
-	onCancel: ( event: DialogInputEvent ) => void;
-	isOpen: boolean;
-};
-
-type UncontrolledProps = BaseProps & {
+	/**
+	 * The callback that's called when the user cancels. A cancellation can happen
+	 * when the `Cancel` button is clicked, when the `ESC` key is pressed, or when
+	 * a click outside of the dialog focus is detected (i.e. in the overlay).
+	 *
+	 * It's not required if `isOpen` is not set (uncontrolled mode), as the component
+	 * will take care of closing itself, but you can still pass a callback if something
+	 * must be done upon cancelling (the component will still close itself in this case).
+	 *
+	 * If `isOpen` is set (controlled mode), then it's required, and you need to set
+	 * the state that defines `isOpen` to `false` as part of this callback if you want the
+	 * dialog to close when the user cancels.
+	 */
 	onCancel?: ( event: DialogInputEvent ) => void;
-	isOpen?: never;
+	/**
+	 * Defines if the dialog is open (displayed) or closed (not rendered/displayed).
+	 * It also implicitly toggles the controlled mode if set or the uncontrolled mode if it's not set.
+	 */
+	isOpen?: boolean;
 };
-
-export type OwnProps = ControlledProps | UncontrolledProps;
diff --git a/packages/components/src/context/constants.js b/packages/components/src/context/constants.js
new file mode 100644
index 00000000000000..aa98c3945dc17f
--- /dev/null
+++ b/packages/components/src/context/constants.js
@@ -0,0 +1,8 @@
+export const COMPONENT_NAMESPACE = 'data-wp-component';
+export const CONNECTED_NAMESPACE = 'data-wp-c16t';
+
+/**
+ * Special key where the connected namespaces are stored.
+ * This is attached to Context connected components as a static property.
+ */
+export const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
diff --git a/packages/components/src/ui/context/context-connect.ts b/packages/components/src/context/context-connect.ts
similarity index 84%
rename from packages/components/src/ui/context/context-connect.ts
rename to packages/components/src/context/context-connect.ts
index 44a38bdd7e8cc5..bbab68222abb9a 100644
--- a/packages/components/src/ui/context/context-connect.ts
+++ b/packages/components/src/context/context-connect.ts
@@ -18,7 +18,7 @@ import type { WordPressComponentFromProps } from '.';
 
 type AcceptsTwoArgs<
 	F extends ( ...args: any ) => any,
-	ErrorMessage = never
+	ErrorMessage = never,
 > = Parameters< F >[ 'length' ] extends 2 ? {} : ErrorMessage;
 
 type ContextConnectOptions = {
@@ -29,12 +29,12 @@ type ContextConnectOptions = {
  * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component
  * within the Context system under a specified namespace.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 export function contextConnect<
-	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null
+	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
 >(
 	Component: C &
 		AcceptsTwoArgs<
@@ -50,8 +50,8 @@ export function contextConnect<
  * "Connects" (or registers) a component within the Context system under a specified namespace.
  * Does not forward a ref.
  *
- * @param  Component The component to register into the Context system.
- * @param  namespace The namespace to register the component under.
+ * @param Component The component to register into the Context system.
+ * @param namespace The namespace to register the component under.
  * @return The connected WordPressComponent
  */
 export function contextConnectWithoutRef< P >(
@@ -66,7 +66,7 @@ export function contextConnectWithoutRef< P >(
 // component wrappers.
 function _contextConnect<
 	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
-	O extends ContextConnectOptions
+	O extends ContextConnectOptions,
 >(
 	Component: C,
 	namespace: string,
@@ -99,7 +99,7 @@ function _contextConnect<
 	}
 
 	// @ts-expect-error We can't rely on inferred types here because of the
-	// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+	// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
 	return Object.assign( WrappedComponent, {
 		[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],
 		displayName: namespace,
@@ -110,13 +110,15 @@ function _contextConnect<
 /**
  * Attempts to retrieve the connected namespace from a component.
  *
- * @param  Component The component to retrieve a namespace from.
+ * @param Component The component to retrieve a namespace from.
  * @return The connected namespaces.
  */
 export function getConnectNamespace(
 	Component: ReactChild | undefined | {}
 ): string[] {
-	if ( ! Component ) return [];
+	if ( ! Component ) {
+		return [];
+	}
 
 	let namespaces = [];
 
@@ -138,14 +140,16 @@ export function getConnectNamespace(
 /**
  * Checks to see if a component is connected within the Context system.
  *
- * @param  Component The component to retrieve a namespace from.
- * @param  match     The namespace to check.
+ * @param Component The component to retrieve a namespace from.
+ * @param match     The namespace to check.
  */
 export function hasConnectNamespace(
 	Component: ReactNode,
 	match: string[] | string
 ): boolean {
-	if ( ! Component ) return false;
+	if ( ! Component ) {
+		return false;
+	}
 
 	if ( typeof match === 'string' ) {
 		return getConnectNamespace( Component ).includes( match );
diff --git a/packages/components/src/context/context-system-provider.js b/packages/components/src/context/context-system-provider.js
new file mode 100644
index 00000000000000..741d2d833227fa
--- /dev/null
+++ b/packages/components/src/context/context-system-provider.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useRef,
+	useMemo,
+	memo,
+} from '@wordpress/element';
+import warn from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import { useUpdateEffect } from '../utils';
+
+export const ComponentsContext = createContext(
+	/** @type {Record<string, any>} */ ( {} )
+);
+export const useComponentsContext = () => useContext( ComponentsContext );
+
+/**
+ * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
+ *
+ * Note: This function will warn if it detects an un-memoized `value`
+ *
+ * @param {Object}              props
+ * @param {Record<string, any>} props.value
+ * @return {Record<string, any>} The consolidated value.
+ */
+function useContextSystemBridge( { value } ) {
+	const parentContext = useComponentsContext();
+
+	const valueRef = useRef( value );
+
+	useUpdateEffect( () => {
+		if (
+			// Objects are equivalent.
+			fastDeepEqual( valueRef.current, value ) &&
+			// But not the same reference.
+			valueRef.current !== value
+		) {
+			warn( `Please memoize your context: ${ JSON.stringify( value ) }` );
+		}
+	}, [ value ] );
+
+	// `parentContext` will always be memoized (i.e., the result of this hook itself)
+	// or the default value from when the `ComponentsContext` was originally
+	// initialized (which will never change, it's a static variable)
+	// so this memoization will prevent `deepmerge()` from rerunning unless
+	// the references to `value` change OR the `parentContext` has an actual material change
+	// (because again, it's guaranteed to be memoized or a static reference to the empty object
+	// so we know that the only changes for `parentContext` are material ones... i.e., why we
+	// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
+	// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
+	// correctly warning when the `value` isn't being properly memoized. All of that to say
+	// that this should be super safe to assume that `useMemo` will only run on actual
+	// changes to the two dependencies, therefore saving us calls to `deepmerge()`!
+	const config = useMemo( () => {
+		// Deep clone `parentContext` to avoid mutating it later.
+		return deepmerge( parentContext ?? {}, value ?? {}, {
+			isMergeableObject: isPlainObject,
+		} );
+	}, [ parentContext, value ] );
+
+	return config;
+}
+
+/**
+ * A Provider component that can modify props for connected components within
+ * the Context system.
+ *
+ * @example
+ * ```jsx
+ * <ContextSystemProvider value={{ Button: { size: 'small' }}}>
+ *   <Button>...</Button>
+ * </ContextSystemProvider>
+ * ```
+ *
+ * @template {Record<string, any>} T
+ * @param {Object}                    options
+ * @param {import('react').ReactNode} options.children Children to render.
+ * @param {T}                         options.value    Props to render into connected components.
+ * @return {JSX.Element} A Provider wrapped component.
+ */
+const BaseContextSystemProvider = ( { children, value } ) => {
+	const contextValue = useContextSystemBridge( { value } );
+
+	return (
+		<ComponentsContext.Provider value={ contextValue }>
+			{ children }
+		</ComponentsContext.Provider>
+	);
+};
+
+export const ContextSystemProvider = memo( BaseContextSystemProvider );
diff --git a/packages/components/src/ui/context/get-styled-class-name-from-key.ts b/packages/components/src/context/get-styled-class-name-from-key.ts
similarity index 78%
rename from packages/components/src/ui/context/get-styled-class-name-from-key.ts
rename to packages/components/src/context/get-styled-class-name-from-key.ts
index ec92ea79a3251b..c2f5ebec5df6ec 100644
--- a/packages/components/src/ui/context/get-styled-class-name-from-key.ts
+++ b/packages/components/src/context/get-styled-class-name-from-key.ts
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 import memoize from 'memize';
 
 /**
  * Generates the connected component CSS className based on the namespace.
  *
- * @param  namespace The name of the connected component.
+ * @param namespace The name of the connected component.
  * @return The generated CSS className.
  */
 function getStyledClassName( namespace: string ): string {
diff --git a/packages/components/src/context/index.ts b/packages/components/src/context/index.ts
new file mode 100644
index 00000000000000..266e2c3459a547
--- /dev/null
+++ b/packages/components/src/context/index.ts
@@ -0,0 +1,12 @@
+export {
+	ContextSystemProvider,
+	useComponentsContext,
+} from './context-system-provider';
+export {
+	contextConnect,
+	contextConnectWithoutRef,
+	hasConnectNamespace,
+	getConnectNamespace,
+} from './context-connect';
+export { useContextSystem } from './use-context-system';
+export * from './wordpress-component';
diff --git a/packages/components/src/ui/context/stories/ComponentsProvider.stories.js b/packages/components/src/context/stories/ComponentsProvider.stories.js
similarity index 100%
rename from packages/components/src/ui/context/stories/ComponentsProvider.stories.js
rename to packages/components/src/context/stories/ComponentsProvider.stories.js
diff --git a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap b/packages/components/src/context/test/__snapshots__/context-system-provider.js.snap
similarity index 100%
rename from packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap
rename to packages/components/src/context/test/__snapshots__/context-system-provider.js.snap
diff --git a/packages/components/src/ui/context/test/context-connect.tsx b/packages/components/src/context/test/context-connect.tsx
similarity index 95%
rename from packages/components/src/ui/context/test/context-connect.tsx
rename to packages/components/src/context/test/context-connect.tsx
index 21bc6a4f009c37..f6f3c8d704d150 100644
--- a/packages/components/src/ui/context/test/context-connect.tsx
+++ b/packages/components/src/context/test/context-connect.tsx
@@ -10,6 +10,7 @@ import { contextConnect, contextConnectWithoutRef } from '../context-connect';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript tests
+/* eslint-disable jest/expect-expect */
 describe( 'ref forwarding', () => {
 	const ComponentWithRef = (
 		props: WordPressComponentProps< {}, 'div' >,
@@ -53,3 +54,4 @@ describe( 'ref forwarding', () => {
 		<NoRef foo={ null } />;
 	} );
 } );
+/* eslint-enable jest/expect-expect */
diff --git a/packages/components/src/context/test/context-system-provider.js b/packages/components/src/context/test/context-system-provider.js
new file mode 100644
index 00000000000000..e92f637634d826
--- /dev/null
+++ b/packages/components/src/context/test/context-system-provider.js
@@ -0,0 +1,204 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { cloneElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect } from '../context-connect';
+import { ContextSystemProvider } from '../context-system-provider';
+import { useContextSystem } from '../use-context-system';
+
+const View = styled.div``;
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const { container } = render(
+			<ContextSystemProvider>
+				<ConnectedComponent />
+			</ContextSystemProvider>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should render context props', () => {
+		const Component = ( props, ref ) => {
+			const { quote, ...otherProps } = useContextSystem(
+				props,
+				'Component'
+			);
+			return (
+				<View { ...otherProps } ref={ ref }>
+					{ quote }
+				</View>
+			);
+		};
+
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		const contextValue = {
+			Component: {
+				quote: 'Code is Poetry',
+			},
+		};
+
+		const { container } = render(
+			<ContextSystemProvider value={ contextValue }>
+				<ConnectedComponent />
+			</ContextSystemProvider>
+		);
+
+		expect( container ).toMatchSnapshot();
+		expect( screen.getByText( 'Code is Poetry' ) ).toBeVisible();
+	} );
+
+	test( 'should render _override props', () => {
+		const Component = ( props, ref ) => {
+			const { quote, ...otherProps } = useContextSystem(
+				props,
+				'Component'
+			);
+			return (
+				<View { ...otherProps } ref={ ref }>
+					{ quote }
+				</View>
+			);
+		};
+
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		const contextValue = {
+			Component: {
+				_overrides: {
+					quote: 'Code is Poetry',
+				},
+			},
+		};
+
+		const { container } = render(
+			<>
+				<ContextSystemProvider value={ contextValue }>
+					<ConnectedComponent
+						className="test-component"
+						quote="WordPress.org"
+					/>
+				</ContextSystemProvider>
+			</>
+		);
+
+		expect( container ).toMatchSnapshot();
+
+		const element = screen.getByText( 'Code is Poetry' );
+		expect( element ).toBeVisible();
+		expect( element ).toHaveClass( 'test-component' );
+
+		expect( screen.queryByText( 'WordPress.org' ) ).not.toBeInTheDocument();
+	} );
+} );
+
+describe( 'children', () => {
+	test( 'should pass through children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent>Pass through</ConnectedComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getByText( 'Pass through' ) ).toBeInTheDocument();
+	} );
+
+	test( 'should not accept children via `context`', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		render(
+			<ContextSystemProvider
+				context={ { Component: { children: 'Override' } } }
+			>
+				<ConnectedComponent />
+			</ContextSystemProvider>
+		);
+
+		expect( screen.queryByText( 'Override' ) ).not.toBeInTheDocument();
+	} );
+
+	// This matches the behavior for normal, non-context-connected components.
+	test( 'should not override inherent children', () => {
+		const Component = ( props, ref ) => (
+			<View { ...useContextSystem( props, 'Component' ) } ref={ ref }>
+				Inherent
+			</View>
+		);
+		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const NormalComponent = ( props ) => <div { ...props }>Inherent</div>;
+
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent />
+				<ConnectedComponent>Explicit children</ConnectedComponent>
+				<NormalComponent />
+				<NormalComponent>Explicit children</NormalComponent>
+			</ContextSystemProvider>
+		);
+
+		expect( screen.getAllByText( 'Inherent' ) ).toHaveLength( 4 );
+	} );
+
+	describe( 'when connected component does a `cloneElement()`', () => {
+		// eslint-disable-next-line no-unused-vars
+		const ComponentThatClones = ( { content, ...props }, _ref ) =>
+			cloneElement(
+				content,
+				useContextSystem( props, 'ComponentThatClones' )
+			);
+		const ConnectedComponentThatClones = contextConnect(
+			ComponentThatClones,
+			'ComponentThatClones'
+		);
+
+		test( 'should not override cloned inherent children with implicit `undefined` children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					/>
+				</ContextSystemProvider>
+			);
+			expect( screen.getByText( 'Inherent' ) ).toBeInTheDocument();
+		} );
+
+		test( 'should override cloned inherent children with explicit children', () => {
+			render(
+				<ContextSystemProvider>
+					<ConnectedComponentThatClones
+						content={ <span>Inherent</span> }
+					>
+						Explicit children
+					</ConnectedComponentThatClones>
+				</ContextSystemProvider>
+			);
+			expect(
+				screen.getByText( 'Explicit children' )
+			).toBeInTheDocument();
+		} );
+	} );
+} );
diff --git a/packages/components/src/ui/context/test/wordpress-component.tsx b/packages/components/src/context/test/wordpress-component.tsx
similarity index 91%
rename from packages/components/src/ui/context/test/wordpress-component.tsx
rename to packages/components/src/context/test/wordpress-component.tsx
index e648dd78fc9c75..637e5998dbebee 100644
--- a/packages/components/src/ui/context/test/wordpress-component.tsx
+++ b/packages/components/src/context/test/wordpress-component.tsx
@@ -14,6 +14,7 @@ import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript checks
+/* eslint-disable jest/expect-expect */
 describe( 'WordPressComponentProps', () => {
 	it( 'should not accept a ref', () => {
 		const Foo = ( props: WordPressComponentProps< {}, 'div' > ) => (
@@ -34,3 +35,4 @@ describe( 'WordPressComponentProps', () => {
 		<ForwardedFoo ref={ null } />;
 	} );
 } );
+/* eslint-enable jest/expect-expect */
diff --git a/packages/components/src/ui/context/use-context-system.js b/packages/components/src/context/use-context-system.js
similarity index 98%
rename from packages/components/src/ui/context/use-context-system.js
rename to packages/components/src/context/use-context-system.js
index 07297ddb30f7e9..213d4ad67a2f55 100644
--- a/packages/components/src/ui/context/use-context-system.js
+++ b/packages/components/src/context/use-context-system.js
@@ -9,7 +9,7 @@ import warn from '@wordpress/warning';
 import { useComponentsContext } from './context-system-provider';
 import { getNamespace, getConnectedNamespace } from './utils';
 import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
-import { useCx } from '../../utils/hooks/use-cx';
+import { useCx } from '../utils/hooks/use-cx';
 
 /**
  * @template TProps
diff --git a/packages/components/src/ui/context/utils.js b/packages/components/src/context/utils.js
similarity index 100%
rename from packages/components/src/ui/context/utils.js
rename to packages/components/src/context/utils.js
diff --git a/packages/components/src/context/wordpress-component.ts b/packages/components/src/context/wordpress-component.ts
new file mode 100644
index 00000000000000..6e88ed4efb094e
--- /dev/null
+++ b/packages/components/src/context/wordpress-component.ts
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type * as React from 'react';
+
+// Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts
+export type WordPressComponentProps<
+	/** Prop types. */
+	P,
+	/** The HTML element to inherit props from. */
+	T extends React.ElementType | null,
+	/** Supports polymorphism through the `as` prop. */
+	IsPolymorphic extends boolean = true,
+> = P &
+	( T extends React.ElementType
+		? // The `children` prop is being explicitly omitted since it is otherwise implicitly added
+		  // by `ComponentPropsWithRef`. The context is that components should require the `children`
+		  // prop explicitly when needed (see https://github.com/WordPress/gutenberg/pull/31817).
+		  Omit<
+				React.ComponentPropsWithoutRef< T >,
+				'as' | keyof P | 'children'
+		  >
+		: {} ) &
+	( IsPolymorphic extends true
+		? {
+				/** The HTML element or React component to render the component as. */
+				as?: T | keyof JSX.IntrinsicElements;
+		  }
+		: {} );
+
+export type WordPressComponent<
+	T extends React.ElementType | null,
+	O,
+	IsPolymorphic extends boolean,
+> = {
+	< TT extends React.ElementType >(
+		props: WordPressComponentProps< O, TT, IsPolymorphic > &
+			( IsPolymorphic extends true ? { as: TT } : {} )
+	): JSX.Element | null;
+	(
+		props: WordPressComponentProps< O, T, IsPolymorphic >
+	): JSX.Element | null;
+	displayName?: string;
+	/**
+	 * A CSS selector used to fake component interpolation in styled components
+	 * for components not generated by `styled`. Anything passed to `contextConnect`
+	 * will get this property.
+	 *
+	 * We restrict it to a class to align with the already existing class names that
+	 * are generated by the context system.
+	 */
+	selector?: `.${ string }`;
+};
+
+export type WordPressComponentFromProps<
+	Props,
+	ForwardsRef extends boolean = true,
+> = Props extends WordPressComponentProps< infer P, infer T, infer I >
+	? WordPressComponent<
+			T,
+			P & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),
+			I
+	  >
+	: never;
diff --git a/packages/components/src/css.d.ts b/packages/components/src/css.d.ts
new file mode 100644
index 00000000000000..598eb388f6d352
--- /dev/null
+++ b/packages/components/src/css.d.ts
@@ -0,0 +1,9 @@
+import type * as CSS from 'csstype';
+
+// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587
+declare module 'csstype' {
+	interface Properties {
+		// Allow any CSS Custom Properties
+		[ index: `--${ string }` ]: any;
+	}
+}
diff --git a/packages/components/src/custom-gradient-picker/constants.js b/packages/components/src/custom-gradient-picker/constants.js
deleted file mode 100644
index 9924ff2b3d6860..00000000000000
--- a/packages/components/src/custom-gradient-picker/constants.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const DEFAULT_GRADIENT =
-	'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
-
-export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
-
-export const HORIZONTAL_GRADIENT_ORIENTATION = {
-	type: 'angular',
-	value: 90,
-};
-
-export const GRADIENT_OPTIONS = [
-	{ value: 'linear-gradient', label: __( 'Linear' ) },
-	{ value: 'radial-gradient', label: __( 'Radial' ) },
-];
-
-export const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
-	top: 0,
-	'top right': 45,
-	'right top': 45,
-	right: 90,
-	'right bottom': 135,
-	'bottom right': 135,
-	bottom: 180,
-	'bottom left': 225,
-	'left bottom': 225,
-	left: 270,
-	'top left': 315,
-	'left top': 315,
-};
diff --git a/packages/components/src/custom-gradient-picker/constants.ts b/packages/components/src/custom-gradient-picker/constants.ts
new file mode 100644
index 00000000000000..842aea9dcb638d
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/constants.ts
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const DEFAULT_GRADIENT =
+	'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';
+
+export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
+
+export const HORIZONTAL_GRADIENT_ORIENTATION = {
+	type: 'angular',
+	value: '90',
+} as const;
+
+export const GRADIENT_OPTIONS = [
+	{ value: 'linear-gradient', label: __( 'Linear' ) },
+	{ value: 'radial-gradient', label: __( 'Radial' ) },
+];
+
+export const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {
+	top: 0,
+	'top right': 45,
+	'right top': 45,
+	right: 90,
+	'right bottom': 135,
+	'bottom right': 135,
+	bottom: 180,
+	'bottom left': 225,
+	'left bottom': 225,
+	left: 270,
+	'top left': 315,
+	'left top': 315,
+};
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/constants.js b/packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
similarity index 100%
rename from packages/components/src/custom-gradient-picker/gradient-bar/constants.js
rename to packages/components/src/custom-gradient-picker/gradient-bar/constants.ts
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
deleted file mode 100644
index c7086833269e22..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.js
+++ /dev/null
@@ -1,361 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { plus } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { HStack } from '../../h-stack';
-import { ColorPicker } from '../../color-picker';
-import { VisuallyHidden } from '../../visually-hidden';
-import { CustomColorPickerDropdown } from '../../color-palette';
-
-import {
-	addControlPoint,
-	clampPercent,
-	removeControlPoint,
-	updateControlPointColor,
-	updateControlPointColorByPosition,
-	updateControlPointPosition,
-	getHorizontalRelativeGradientPosition,
-} from './utils';
-import {
-	MINIMUM_SIGNIFICANT_MOVE,
-	KEYBOARD_CONTROL_POINT_VARIATION,
-} from './constants';
-
-function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
-	const instanceId = useInstanceId( ControlPointButton );
-	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
-	return (
-		<>
-			<Button
-				aria-label={ sprintf(
-					// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
-					__(
-						'Gradient control point at position %1$s%% with color code %2$s.'
-					),
-					position,
-					color
-				) }
-				aria-describedby={ descriptionId }
-				aria-haspopup="true"
-				aria-expanded={ isOpen }
-				className={ classnames(
-					'components-custom-gradient-picker__control-point-button',
-					{
-						'is-active': isOpen,
-					}
-				) }
-				{ ...additionalProps }
-			/>
-			<VisuallyHidden id={ descriptionId }>
-				{ __(
-					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
-				) }
-			</VisuallyHidden>
-		</>
-	);
-}
-
-function GradientColorPickerDropdown( {
-	isRenderedInSidebar,
-	className,
-	...props
-} ) {
-	// Open the popover below the gradient control/insertion point
-	const popoverProps = useMemo(
-		() => ( {
-			placement: 'bottom',
-			offset: 8,
-		} ),
-		[]
-	);
-
-	const mergedClassName = classnames(
-		'components-custom-gradient-picker__control-point-dropdown',
-		className
-	);
-
-	return (
-		<CustomColorPickerDropdown
-			isRenderedInSidebar={ isRenderedInSidebar }
-			popoverProps={ popoverProps }
-			className={ mergedClassName }
-			{ ...props }
-		/>
-	);
-}
-
-function ControlPoints( {
-	disableRemove,
-	disableAlpha,
-	gradientPickerDomRef,
-	ignoreMarkerPosition,
-	value: controlPoints,
-	onChange,
-	onStartControlPointChange,
-	onStopControlPointChange,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const controlPointMoveState = useRef();
-
-	const onMouseMove = ( event ) => {
-		const relativePosition = getHorizontalRelativeGradientPosition(
-			event.clientX,
-			gradientPickerDomRef.current
-		);
-		const { initialPosition, index, significantMoveHappened } =
-			controlPointMoveState.current;
-		if (
-			! significantMoveHappened &&
-			Math.abs( initialPosition - relativePosition ) >=
-				MINIMUM_SIGNIFICANT_MOVE
-		) {
-			controlPointMoveState.current.significantMoveHappened = true;
-		}
-
-		onChange(
-			updateControlPointPosition( controlPoints, index, relativePosition )
-		);
-	};
-
-	const cleanEventListeners = () => {
-		if (
-			window &&
-			window.removeEventListener &&
-			controlPointMoveState.current &&
-			controlPointMoveState.current.listenersActivated
-		) {
-			window.removeEventListener( 'mousemove', onMouseMove );
-			window.removeEventListener( 'mouseup', cleanEventListeners );
-			onStopControlPointChange();
-			controlPointMoveState.current.listenersActivated = false;
-		}
-	};
-
-	// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
-	// This memoization would prevent the event listeners from being properly cleaned.
-	// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
-	const cleanEventListenersRef = useRef();
-	cleanEventListenersRef.current = cleanEventListeners;
-
-	useEffect( () => {
-		return () => {
-			cleanEventListenersRef.current();
-		};
-	}, [] );
-
-	return controlPoints.map( ( point, index ) => {
-		const initialPosition = point?.position;
-		return (
-			ignoreMarkerPosition !== initialPosition && (
-				<GradientColorPickerDropdown
-					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
-					key={ index }
-					onClose={ onStopControlPointChange }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<ControlPointButton
-							key={ index }
-							onClick={ () => {
-								if (
-									controlPointMoveState.current &&
-									controlPointMoveState.current
-										.significantMoveHappened
-								) {
-									return;
-								}
-								if ( isOpen ) {
-									onStopControlPointChange();
-								} else {
-									onStartControlPointChange();
-								}
-								onToggle();
-							} }
-							onMouseDown={ () => {
-								if ( window && window.addEventListener ) {
-									controlPointMoveState.current = {
-										initialPosition,
-										index,
-										significantMoveHappened: false,
-										listenersActivated: true,
-									};
-									onStartControlPointChange();
-									window.addEventListener(
-										'mousemove',
-										onMouseMove
-									);
-									window.addEventListener(
-										'mouseup',
-										cleanEventListeners
-									);
-								}
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.code === 'ArrowLeft' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position -
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								} else if ( event.code === 'ArrowRight' ) {
-									// Stop propagation of the key press event to avoid focus moving
-									// to another editor area.
-									event.stopPropagation();
-									onChange(
-										updateControlPointPosition(
-											controlPoints,
-											index,
-											clampPercent(
-												point.position +
-													KEYBOARD_CONTROL_POINT_VARIATION
-											)
-										)
-									);
-								}
-							} }
-							isOpen={ isOpen }
-							position={ point.position }
-							color={ point.color }
-						/>
-					) }
-					renderContent={ ( { onClose } ) => (
-						<>
-							<ColorPicker
-								enableAlpha={ ! disableAlpha }
-								color={ point.color }
-								onChange={ ( color ) => {
-									onChange(
-										updateControlPointColor(
-											controlPoints,
-											index,
-											colord( color ).toRgbString()
-										)
-									);
-								} }
-							/>
-							{ ! disableRemove && controlPoints.length > 2 && (
-								<HStack
-									className="components-custom-gradient-picker__remove-control-point-wrapper"
-									alignment="center"
-								>
-									<Button
-										onClick={ () => {
-											onChange(
-												removeControlPoint(
-													controlPoints,
-													index
-												)
-											);
-											onClose();
-										} }
-										variant="link"
-									>
-										{ __( 'Remove Control Point' ) }
-									</Button>
-								</HStack>
-							) }
-						</>
-					) }
-					style={ {
-						left: `${ point.position }%`,
-						transform: 'translateX( -50% )',
-					} }
-				/>
-			)
-		);
-	} );
-}
-
-function InsertPoint( {
-	value: controlPoints,
-	onChange,
-	onOpenInserter,
-	onCloseInserter,
-	insertPosition,
-	disableAlpha,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
-	return (
-		<GradientColorPickerDropdown
-			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
-			className="components-custom-gradient-picker__inserter"
-			onClose={ () => {
-				onCloseInserter();
-			} }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<Button
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ () => {
-						if ( isOpen ) {
-							onCloseInserter();
-						} else {
-							setAlreadyInsertedPoint( false );
-							onOpenInserter();
-						}
-						onToggle();
-					} }
-					className="components-custom-gradient-picker__insert-point-dropdown"
-					icon={ plus }
-				/>
-			) }
-			renderContent={ () => (
-				<ColorPicker
-					enableAlpha={ ! disableAlpha }
-					onChange={ ( color ) => {
-						if ( ! alreadyInsertedPoint ) {
-							onChange(
-								addControlPoint(
-									controlPoints,
-									insertPosition,
-									colord( color ).toRgbString()
-								)
-							);
-							setAlreadyInsertedPoint( true );
-						} else {
-							onChange(
-								updateControlPointColorByPosition(
-									controlPoints,
-									insertPosition,
-									colord( color ).toRgbString()
-								)
-							);
-						}
-					} }
-				/>
-			) }
-			style={
-				insertPosition !== null
-					? {
-							left: `${ insertPosition }%`,
-							transform: 'translateX( -50% )',
-					  }
-					: undefined
-			}
-		/>
-	);
-}
-ControlPoints.InsertPoint = InsertPoint;
-
-export default ControlPoints;
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
new file mode 100644
index 00000000000000..d68ee7502e1f63
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -0,0 +1,409 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
+
+import {
+	addControlPoint,
+	clampPercent,
+	removeControlPoint,
+	updateControlPointColor,
+	updateControlPointColorByPosition,
+	updateControlPointPosition,
+	getHorizontalRelativeGradientPosition,
+} from './utils';
+import {
+	MINIMUM_SIGNIFICANT_MOVE,
+	KEYBOARD_CONTROL_POINT_VARIATION,
+} from './constants';
+import type { WordPressComponentProps } from '../../context';
+import type {
+	ControlPointButtonProps,
+	ControlPointMoveState,
+	ControlPointsProps,
+	InsertPointProps,
+} from '../types';
+import type { CustomColorPickerDropdownProps } from '../../color-palette/types';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
+
+function ControlPointButton( {
+	isOpen,
+	position,
+	color,
+	...additionalProps
+}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {
+	const instanceId = useInstanceId( ControlPointButton );
+	const descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;
+	return (
+		<>
+			<Button
+				aria-label={ sprintf(
+					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
+					__(
+						'Gradient control point at position %1$s%% with color code %2$s.'
+					),
+					position,
+					color
+				) }
+				aria-describedby={ descriptionId }
+				aria-haspopup="true"
+				aria-expanded={ isOpen }
+				__next40pxDefaultSize
+				className={ clsx(
+					'components-custom-gradient-picker__control-point-button',
+					{
+						'is-active': isOpen,
+					}
+				) }
+				{ ...additionalProps }
+			/>
+			<VisuallyHidden id={ descriptionId }>
+				{ __(
+					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
+				) }
+			</VisuallyHidden>
+		</>
+	);
+}
+
+function GradientColorPickerDropdown( {
+	isRenderedInSidebar,
+	className,
+	...props
+}: CustomColorPickerDropdownProps ) {
+	// Open the popover below the gradient control/insertion point
+	const popoverProps = useMemo(
+		() =>
+			( {
+				placement: 'bottom',
+				offset: 8,
+				// Disabling resize as it would otherwise cause the popover to show
+				// scrollbars while dragging the color picker's handle close to the
+				// popover edge.
+				resize: false,
+			} ) as const,
+		[]
+	);
+
+	const mergedClassName = clsx(
+		'components-custom-gradient-picker__control-point-dropdown',
+		className
+	);
+
+	return (
+		<CustomColorPickerDropdown
+			isRenderedInSidebar={ isRenderedInSidebar }
+			popoverProps={ popoverProps }
+			className={ mergedClassName }
+			{ ...props }
+		/>
+	);
+}
+
+function ControlPoints( {
+	disableRemove,
+	disableAlpha,
+	gradientPickerDomRef,
+	ignoreMarkerPosition,
+	value: controlPoints,
+	onChange,
+	onStartControlPointChange,
+	onStopControlPointChange,
+	__experimentalIsRenderedInSidebar,
+}: ControlPointsProps ) {
+	const controlPointMoveStateRef = useRef< ControlPointMoveState >();
+
+	const onMouseMove = ( event: MouseEvent ) => {
+		if (
+			controlPointMoveStateRef.current === undefined ||
+			gradientPickerDomRef.current === null
+		) {
+			return;
+		}
+
+		const relativePosition = getHorizontalRelativeGradientPosition(
+			event.clientX,
+			gradientPickerDomRef.current
+		);
+
+		const { initialPosition, index, significantMoveHappened } =
+			controlPointMoveStateRef.current;
+
+		if (
+			! significantMoveHappened &&
+			Math.abs( initialPosition - relativePosition ) >=
+				MINIMUM_SIGNIFICANT_MOVE
+		) {
+			controlPointMoveStateRef.current.significantMoveHappened = true;
+		}
+
+		onChange(
+			updateControlPointPosition( controlPoints, index, relativePosition )
+		);
+	};
+
+	const cleanEventListeners = () => {
+		if (
+			window &&
+			window.removeEventListener &&
+			controlPointMoveStateRef.current &&
+			controlPointMoveStateRef.current.listenersActivated
+		) {
+			window.removeEventListener( 'mousemove', onMouseMove );
+			window.removeEventListener( 'mouseup', cleanEventListeners );
+			onStopControlPointChange();
+			controlPointMoveStateRef.current.listenersActivated = false;
+		}
+	};
+
+	// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
+	// This memoization would prevent the event listeners from being properly cleaned.
+	// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
+	const cleanEventListenersRef = useRef< () => void >();
+	cleanEventListenersRef.current = cleanEventListeners;
+
+	useEffect( () => {
+		return () => {
+			cleanEventListenersRef.current?.();
+		};
+	}, [] );
+
+	return (
+		<>
+			{ controlPoints.map( ( point, index ) => {
+				const initialPosition = point?.position;
+				return (
+					ignoreMarkerPosition !== initialPosition && (
+						<GradientColorPickerDropdown
+							isRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							key={ index }
+							onClose={ onStopControlPointChange }
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<ControlPointButton
+									key={ index }
+									onClick={ () => {
+										if (
+											controlPointMoveStateRef.current &&
+											controlPointMoveStateRef.current
+												.significantMoveHappened
+										) {
+											return;
+										}
+										if ( isOpen ) {
+											onStopControlPointChange();
+										} else {
+											onStartControlPointChange();
+										}
+										onToggle();
+									} }
+									onMouseDown={ () => {
+										if (
+											window &&
+											window.addEventListener
+										) {
+											controlPointMoveStateRef.current = {
+												initialPosition,
+												index,
+												significantMoveHappened: false,
+												listenersActivated: true,
+											};
+											onStartControlPointChange();
+											window.addEventListener(
+												'mousemove',
+												onMouseMove
+											);
+											window.addEventListener(
+												'mouseup',
+												cleanEventListeners
+											);
+										}
+									} }
+									onKeyDown={ ( event ) => {
+										if ( event.code === 'ArrowLeft' ) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
+											onChange(
+												updateControlPointPosition(
+													controlPoints,
+													index,
+													clampPercent(
+														point.position -
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										} else if (
+											event.code === 'ArrowRight'
+										) {
+											// Stop propagation of the key press event to avoid focus moving
+											// to another editor area.
+											event.stopPropagation();
+											onChange(
+												updateControlPointPosition(
+													controlPoints,
+													index,
+													clampPercent(
+														point.position +
+															KEYBOARD_CONTROL_POINT_VARIATION
+													)
+												)
+											);
+										}
+									} }
+									isOpen={ isOpen }
+									position={ point.position }
+									color={ point.color }
+								/>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<DropdownContentWrapper paddingSize="none">
+									<ColorPicker
+										enableAlpha={ ! disableAlpha }
+										color={ point.color }
+										onChange={ ( color ) => {
+											onChange(
+												updateControlPointColor(
+													controlPoints,
+													index,
+													colord(
+														color
+													).toRgbString()
+												)
+											);
+										} }
+									/>
+									{ ! disableRemove &&
+										controlPoints.length > 2 && (
+											<HStack
+												className="components-custom-gradient-picker__remove-control-point-wrapper"
+												alignment="center"
+											>
+												<Button
+													onClick={ () => {
+														onChange(
+															removeControlPoint(
+																controlPoints,
+																index
+															)
+														);
+														onClose();
+													} }
+													variant="link"
+												>
+													{ __(
+														'Remove Control Point'
+													) }
+												</Button>
+											</HStack>
+										) }
+								</DropdownContentWrapper>
+							) }
+							style={ {
+								left: `${ point.position }%`,
+								transform: 'translateX( -50% )',
+							} }
+						/>
+					)
+				);
+			} ) }
+		</>
+	);
+}
+
+function InsertPoint( {
+	value: controlPoints,
+	onChange,
+	onOpenInserter,
+	onCloseInserter,
+	insertPosition,
+	disableAlpha,
+	__experimentalIsRenderedInSidebar,
+}: InsertPointProps ) {
+	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
+	return (
+		<GradientColorPickerDropdown
+			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
+			className="components-custom-gradient-picker__inserter"
+			onClose={ () => {
+				onCloseInserter();
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					__next40pxDefaultSize
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					onClick={ () => {
+						if ( isOpen ) {
+							onCloseInserter();
+						} else {
+							setAlreadyInsertedPoint( false );
+							onOpenInserter();
+						}
+						onToggle();
+					} }
+					className="components-custom-gradient-picker__insert-point-dropdown"
+					icon={ plus }
+				/>
+			) }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="none">
+					<ColorPicker
+						enableAlpha={ ! disableAlpha }
+						onChange={ ( color ) => {
+							if ( ! alreadyInsertedPoint ) {
+								onChange(
+									addControlPoint(
+										controlPoints,
+										insertPosition,
+										colord( color ).toRgbString()
+									)
+								);
+								setAlreadyInsertedPoint( true );
+							} else {
+								onChange(
+									updateControlPointColorByPosition(
+										controlPoints,
+										insertPosition,
+										colord( color ).toRgbString()
+									)
+								);
+							}
+						} }
+					/>
+				</DropdownContentWrapper>
+			) }
+			style={
+				insertPosition !== null
+					? {
+							left: `${ insertPosition }%`,
+							transform: 'translateX( -50% )',
+					  }
+					: undefined
+			}
+		/>
+	);
+}
+ControlPoints.InsertPoint = InsertPoint;
+
+export default ControlPoints;
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.js b/packages/components/src/custom-gradient-picker/gradient-bar/index.js
deleted file mode 100644
index 9767071c03e2a2..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/index.js
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useReducer } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ControlPoints from './control-points';
-import { getHorizontalRelativeGradientPosition } from './utils';
-import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
-
-function customGradientBarReducer( state, action ) {
-	switch ( action.type ) {
-		case 'MOVE_INSERTER':
-			if ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {
-				return {
-					id: 'MOVING_INSERTER',
-					insertPosition: action.insertPosition,
-				};
-			}
-			break;
-		case 'STOP_INSERTER_MOVE':
-			if ( state.id === 'MOVING_INSERTER' ) {
-				return {
-					id: 'IDLE',
-				};
-			}
-			break;
-		case 'OPEN_INSERTER':
-			if ( state.id === 'MOVING_INSERTER' ) {
-				return {
-					id: 'INSERTING_CONTROL_POINT',
-					insertPosition: state.insertPosition,
-				};
-			}
-			break;
-		case 'CLOSE_INSERTER':
-			if ( state.id === 'INSERTING_CONTROL_POINT' ) {
-				return {
-					id: 'IDLE',
-				};
-			}
-			break;
-		case 'START_CONTROL_CHANGE':
-			if ( state.id === 'IDLE' ) {
-				return {
-					id: 'MOVING_CONTROL_POINT',
-				};
-			}
-			break;
-		case 'STOP_CONTROL_CHANGE':
-			if ( state.id === 'MOVING_CONTROL_POINT' ) {
-				return {
-					id: 'IDLE',
-				};
-			}
-			break;
-	}
-	return state;
-}
-const customGradientBarReducerInitialState = { id: 'IDLE' };
-
-export default function CustomGradientBar( {
-	background,
-	hasGradient,
-	value: controlPoints,
-	onChange,
-	disableInserter = false,
-	disableAlpha = false,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const gradientMarkersContainerDomRef = useRef();
-
-	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
-		customGradientBarReducer,
-		customGradientBarReducerInitialState
-	);
-	const onMouseEnterAndMove = ( event ) => {
-		const insertPosition = getHorizontalRelativeGradientPosition(
-			event.clientX,
-			gradientMarkersContainerDomRef.current
-		);
-
-		// If the insert point is close to an existing control point don't show it.
-		if (
-			controlPoints.some( ( { position } ) => {
-				return (
-					Math.abs( insertPosition - position ) <
-					MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT
-				);
-			} )
-		) {
-			if ( gradientBarState.id === 'MOVING_INSERTER' ) {
-				gradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );
-			}
-			return;
-		}
-
-		gradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );
-	};
-
-	const onMouseLeave = () => {
-		gradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );
-	};
-
-	const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
-	const isInsertingControlPoint =
-		gradientBarState.id === 'INSERTING_CONTROL_POINT';
-
-	return (
-		<div
-			className={ classnames(
-				'components-custom-gradient-picker__gradient-bar',
-				{ 'has-gradient': hasGradient }
-			) }
-			onMouseEnter={ onMouseEnterAndMove }
-			onMouseMove={ onMouseEnterAndMove }
-			style={ { background } }
-			onMouseLeave={ onMouseLeave }
-		>
-			<div
-				ref={ gradientMarkersContainerDomRef }
-				className="components-custom-gradient-picker__markers-container"
-			>
-				{ ! disableInserter &&
-					( isMovingInserter || isInsertingControlPoint ) && (
-						<ControlPoints.InsertPoint
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							disableAlpha={ disableAlpha }
-							insertPosition={ gradientBarState.insertPosition }
-							value={ controlPoints }
-							onChange={ onChange }
-							onOpenInserter={ () => {
-								gradientBarStateDispatch( {
-									type: 'OPEN_INSERTER',
-								} );
-							} }
-							onCloseInserter={ () => {
-								gradientBarStateDispatch( {
-									type: 'CLOSE_INSERTER',
-								} );
-							} }
-						/>
-					) }
-				<ControlPoints
-					__experimentalIsRenderedInSidebar={
-						__experimentalIsRenderedInSidebar
-					}
-					disableAlpha={ disableAlpha }
-					disableRemove={ disableInserter }
-					gradientPickerDomRef={ gradientMarkersContainerDomRef }
-					ignoreMarkerPosition={
-						isInsertingControlPoint
-							? gradientBarState.insertPosition
-							: undefined
-					}
-					value={ controlPoints }
-					onChange={ onChange }
-					onStartControlPointChange={ () => {
-						gradientBarStateDispatch( {
-							type: 'START_CONTROL_CHANGE',
-						} );
-					} }
-					onStopControlPointChange={ () => {
-						gradientBarStateDispatch( {
-							type: 'STOP_CONTROL_CHANGE',
-						} );
-					} }
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
new file mode 100644
index 00000000000000..4f5eafb17523b4
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/index.tsx
@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useReducer } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ControlPoints from './control-points';
+import { getHorizontalRelativeGradientPosition } from './utils';
+import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
+import type {
+	CustomGradientBarProps,
+	CustomGradientBarReducerState,
+	CustomGradientBarReducerAction,
+	CustomGradientBarIdleState,
+} from '../types';
+import type { MouseEventHandler } from 'react';
+
+const customGradientBarReducer = (
+	state: CustomGradientBarReducerState,
+	action: CustomGradientBarReducerAction
+): CustomGradientBarReducerState => {
+	switch ( action.type ) {
+		case 'MOVE_INSERTER':
+			if ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {
+				return {
+					id: 'MOVING_INSERTER',
+					insertPosition: action.insertPosition,
+				};
+			}
+			break;
+		case 'STOP_INSERTER_MOVE':
+			if ( state.id === 'MOVING_INSERTER' ) {
+				return {
+					id: 'IDLE',
+				};
+			}
+			break;
+		case 'OPEN_INSERTER':
+			if ( state.id === 'MOVING_INSERTER' ) {
+				return {
+					id: 'INSERTING_CONTROL_POINT',
+					insertPosition: state.insertPosition,
+				};
+			}
+			break;
+		case 'CLOSE_INSERTER':
+			if ( state.id === 'INSERTING_CONTROL_POINT' ) {
+				return {
+					id: 'IDLE',
+				};
+			}
+			break;
+		case 'START_CONTROL_CHANGE':
+			if ( state.id === 'IDLE' ) {
+				return {
+					id: 'MOVING_CONTROL_POINT',
+				};
+			}
+			break;
+		case 'STOP_CONTROL_CHANGE':
+			if ( state.id === 'MOVING_CONTROL_POINT' ) {
+				return {
+					id: 'IDLE',
+				};
+			}
+			break;
+	}
+	return state;
+};
+const customGradientBarReducerInitialState: CustomGradientBarIdleState = {
+	id: 'IDLE',
+};
+
+export default function CustomGradientBar( {
+	background,
+	hasGradient,
+	value: controlPoints,
+	onChange,
+	disableInserter = false,
+	disableAlpha = false,
+	__experimentalIsRenderedInSidebar = false,
+}: CustomGradientBarProps ) {
+	const gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );
+
+	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
+		customGradientBarReducer,
+		customGradientBarReducerInitialState
+	);
+	const onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (
+		event
+	) => {
+		if ( ! gradientMarkersContainerDomRef.current ) {
+			return;
+		}
+
+		const insertPosition = getHorizontalRelativeGradientPosition(
+			event.clientX,
+			gradientMarkersContainerDomRef.current
+		);
+
+		// If the insert point is close to an existing control point don't show it.
+		if (
+			controlPoints.some( ( { position } ) => {
+				return (
+					Math.abs( insertPosition - position ) <
+					MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT
+				);
+			} )
+		) {
+			if ( gradientBarState.id === 'MOVING_INSERTER' ) {
+				gradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );
+			}
+			return;
+		}
+
+		gradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );
+	};
+
+	const onMouseLeave = () => {
+		gradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );
+	};
+
+	const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
+	const isInsertingControlPoint =
+		gradientBarState.id === 'INSERTING_CONTROL_POINT';
+
+	return (
+		<div
+			className={ clsx(
+				'components-custom-gradient-picker__gradient-bar',
+				{ 'has-gradient': hasGradient }
+			) }
+			onMouseEnter={ onMouseEnterAndMove }
+			onMouseMove={ onMouseEnterAndMove }
+			onMouseLeave={ onMouseLeave }
+		>
+			<div
+				className="components-custom-gradient-picker__gradient-bar-background"
+				style={ {
+					background,
+					opacity: hasGradient ? 1 : 0.4,
+				} }
+			/>
+			<div
+				ref={ gradientMarkersContainerDomRef }
+				className="components-custom-gradient-picker__markers-container"
+			>
+				{ ! disableInserter &&
+					( isMovingInserter || isInsertingControlPoint ) && (
+						<ControlPoints.InsertPoint
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							disableAlpha={ disableAlpha }
+							insertPosition={ gradientBarState.insertPosition }
+							value={ controlPoints }
+							onChange={ onChange }
+							onOpenInserter={ () => {
+								gradientBarStateDispatch( {
+									type: 'OPEN_INSERTER',
+								} );
+							} }
+							onCloseInserter={ () => {
+								gradientBarStateDispatch( {
+									type: 'CLOSE_INSERTER',
+								} );
+							} }
+						/>
+					) }
+				<ControlPoints
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
+					disableAlpha={ disableAlpha }
+					disableRemove={ disableInserter }
+					gradientPickerDomRef={ gradientMarkersContainerDomRef }
+					ignoreMarkerPosition={
+						isInsertingControlPoint
+							? gradientBarState.insertPosition
+							: undefined
+					}
+					value={ controlPoints }
+					onChange={ onChange }
+					onStartControlPointChange={ () => {
+						gradientBarStateDispatch( {
+							type: 'START_CONTROL_CHANGE',
+						} );
+					} }
+					onStopControlPointChange={ () => {
+						gradientBarStateDispatch( {
+							type: 'STOP_CONTROL_CHANGE',
+						} );
+					} }
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js b/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js
deleted file mode 100644
index 525d075a0fd0a7..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getHorizontalRelativeGradientPosition } from '../utils';
-
-describe( 'getHorizontalRelativeGradientPosition', () => {
-	it( 'should return relative percentage position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
-
-		expect(
-			getHorizontalRelativeGradientPosition( 500, containerElement )
-		).toBe( 50 );
-	} );
-
-	it( 'should subtract the x position of the container from the mouse position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
-
-		expect(
-			getHorizontalRelativeGradientPosition( 550, containerElement )
-		).toBe( 50 );
-	} );
-
-	it( 'should clamp to a whole percentage number', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
-
-		expect(
-			getHorizontalRelativeGradientPosition( 333, containerElement )
-		).toBe( 33 );
-	} );
-
-	it( 'should clamp to zero when mouse position is less the x position', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 50,
-				width: 1000,
-			} ),
-		};
-
-		expect(
-			getHorizontalRelativeGradientPosition( 2, containerElement )
-		).toBe( 0 );
-	} );
-
-	it( 'should clamp to 100 when mouse position is greater than width', () => {
-		const containerElement = {
-			getBoundingClientRect: () => ( {
-				x: 0,
-				width: 1000,
-			} ),
-		};
-
-		expect(
-			getHorizontalRelativeGradientPosition( 1500, containerElement )
-		).toBe( 100 );
-	} );
-
-	it( 'should return undefined if no containerElement is provided', () => {
-		const containerElement = undefined;
-
-		expect(
-			getHorizontalRelativeGradientPosition( 1500, containerElement )
-		).toBeUndefined();
-	} );
-} );
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts b/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts
new file mode 100644
index 00000000000000..53804696ba2d3c
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/test/utils.ts
@@ -0,0 +1,106 @@
+/**
+ * Internal dependencies
+ */
+import { getHorizontalRelativeGradientPosition } from '../utils';
+
+describe( 'getHorizontalRelativeGradientPosition', () => {
+	it( 'should return relative percentage position', () => {
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} ) as DOMRect
+		);
+
+		const containerElement = document.createElement( 'div' );
+		expect(
+			getHorizontalRelativeGradientPosition( 500, containerElement )
+		).toBe( 50 );
+	} );
+
+	it( 'should subtract the x position of the container from the mouse position', () => {
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} ) as DOMRect
+		);
+
+		const containerElement = document.createElement( 'div' );
+		expect(
+			getHorizontalRelativeGradientPosition( 550, containerElement )
+		).toBe( 50 );
+	} );
+
+	it( 'should clamp to a whole percentage number', () => {
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 0,
+					width: 1000,
+				} ) as DOMRect
+		);
+
+		const containerElement = document.createElement( 'div' );
+
+		expect(
+			getHorizontalRelativeGradientPosition( 333, containerElement )
+		).toBe( 33 );
+	} );
+
+	it( 'should clamp to zero when mouse position is less the x position', () => {
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} ) as DOMRect
+		);
+		const containerElement = document.createElement( 'div' );
+
+		expect(
+			getHorizontalRelativeGradientPosition( 2, containerElement )
+		).toBe( 0 );
+	} );
+
+	it( 'should clamp to 100 when mouse position is greater than width', () => {
+		jest.spyOn(
+			window.HTMLElement.prototype,
+			'getBoundingClientRect'
+		).mockImplementationOnce(
+			() =>
+				( {
+					x: 50,
+					width: 1000,
+				} ) as DOMRect
+		);
+
+		const containerElement = document.createElement( 'div' );
+
+		expect(
+			getHorizontalRelativeGradientPosition( 1500, containerElement )
+		).toBe( 100 );
+	} );
+
+	it( 'should return undefined if no containerElement is provided', () => {
+		const containerElement = null;
+
+		expect(
+			getHorizontalRelativeGradientPosition( 1500, containerElement )
+		).toBeUndefined();
+	} );
+} );
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js b/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
deleted file mode 100644
index 95d8abd6e23299..00000000000000
--- a/packages/components/src/custom-gradient-picker/gradient-bar/utils.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Internal dependencies
- */
-import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
-
-/**
- * Control point for the gradient bar.
- *
- * @typedef {Object} ControlPoint
- * @property {string} color    Color of the control point.
- * @property {number} position Integer position of the control point as a percentage.
- */
-
-/**
- * Color as parsed from the gradient by gradient-parser.
- *
- * @typedef {Object} Color
- * @property {string} r   Red component.
- * @property {string} g   Green component.
- * @property {string} b   Green component.
- * @property {string} [a] Optional alpha component.
- */
-
-/**
- * Clamps a number between 0 and 100.
- *
- * @param {number} value Value to clamp.
- *
- * @return {number} Value clamped between 0 and 100.
- */
-export function clampPercent( value ) {
-	return Math.max( 0, Math.min( 100, value ) );
-}
-
-/**
- * Check if a control point is overlapping with another.
- *
- * @param {ControlPoint[]} value        Array of control points.
- * @param {number}         initialIndex Index of the position to test.
- * @param {number}         newPosition  New position of the control point.
- * @param {number}         minDistance  Distance considered to be overlapping.
- *
- * @return {boolean} True if the point is overlapping.
- */
-export function isOverlapping(
-	value,
-	initialIndex,
-	newPosition,
-	minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS
-) {
-	const initialPosition = value[ initialIndex ].position;
-	const minPosition = Math.min( initialPosition, newPosition );
-	const maxPosition = Math.max( initialPosition, newPosition );
-
-	return value.some( ( { position }, index ) => {
-		return (
-			index !== initialIndex &&
-			( Math.abs( position - newPosition ) < minDistance ||
-				( minPosition < position && position < maxPosition ) )
-		);
-	} );
-}
-
-/**
- * Adds a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position to insert the new point.
- * @param {Color}          color    Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function addControlPoint( points, position, color ) {
-	const nextIndex = points.findIndex(
-		( point ) => point.position > position
-	);
-	const newPoint = { color, position };
-	const newPoints = points.slice();
-	newPoints.splice( nextIndex - 1, 0, newPoint );
-	return newPoints;
-}
-
-/**
- * Removes a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points Array of control points.
- * @param {number}         index  Index to remove.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function removeControlPoint( points, index ) {
-	return points.filter( ( point, pointIndex ) => {
-		return pointIndex !== index;
-	} );
-}
-
-/**
- * Updates a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {ControlPoint[]} newPoint New control point to replace the index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPoint( points, index, newPoint ) {
-	const newValue = points.slice();
-	newValue[ index ] = newPoint;
-	return newValue;
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points      Array of control points.
- * @param {number}         index       Index to update.
- * @param {number}         newPosition Position to move the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointPosition( points, index, newPosition ) {
-	if ( isOverlapping( points, index, newPosition ) ) {
-		return points;
-	}
-	const newPoint = {
-		...points[ index ],
-		position: newPosition,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         index    Index to update.
- * @param {Color}          newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColor( points, index, newColor ) {
-	const newPoint = {
-		...points[ index ],
-		color: newColor,
-	};
-	return updateControlPoint( points, index, newPoint );
-}
-
-/**
- * Updates the position of a control point from an array and returns the new array.
- *
- * @param {ControlPoint[]} points   Array of control points.
- * @param {number}         position Position of the color stop.
- * @param {string}         newColor Color to update the control point at index.
- *
- * @return {ControlPoint[]} New array of control points.
- */
-export function updateControlPointColorByPosition(
-	points,
-	position,
-	newColor
-) {
-	const index = points.findIndex( ( point ) => point.position === position );
-	return updateControlPointColor( points, index, newColor );
-}
-
-/**
- * Gets the horizontal coordinate when dragging a control point with the mouse.
- *
- * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
- * @param {Element} containerElement Container for the gradient picker.
- *
- * @return {number} Whole number percentage from the left.
- */
-export function getHorizontalRelativeGradientPosition(
-	mouseXCoordinate,
-	containerElement
-) {
-	if ( ! containerElement ) {
-		return;
-	}
-	const { x, width } = containerElement.getBoundingClientRect();
-	const absolutePositionValue = mouseXCoordinate - x;
-	return Math.round(
-		clampPercent( ( absolutePositionValue * 100 ) / width )
-	);
-}
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
new file mode 100644
index 00000000000000..88daf2b2c19d6c
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/utils.ts
@@ -0,0 +1,193 @@
+/**
+ * Internal dependencies
+ */
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
+import type { ControlPoint } from '../types';
+
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+export function clampPercent( value: number ) {
+	return Math.max( 0, Math.min( 100, value ) );
+}
+
+/**
+ * Check if a control point is overlapping with another.
+ *
+ * @param value        Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition  New position of the control point.
+ * @param minDistance  Distance considered to be overlapping.
+ *
+ * @return True if the point is overlapping.
+ */
+export function isOverlapping(
+	value: ControlPoint[],
+	initialIndex: number,
+	newPosition: number,
+	minDistance: number = MINIMUM_DISTANCE_BETWEEN_POINTS
+) {
+	const initialPosition = value[ initialIndex ].position;
+	const minPosition = Math.min( initialPosition, newPosition );
+	const maxPosition = Math.max( initialPosition, newPosition );
+
+	return value.some( ( { position }, index ) => {
+		return (
+			index !== initialIndex &&
+			( Math.abs( position - newPosition ) < minDistance ||
+				( minPosition < position && position < maxPosition ) )
+		);
+	} );
+}
+
+/**
+ * Adds a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position to insert the new point.
+ * @param color    Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function addControlPoint(
+	points: ControlPoint[],
+	position: number,
+	color: ControlPoint[ 'color' ]
+) {
+	const nextIndex = points.findIndex(
+		( point ) => point.position > position
+	);
+	const newPoint = { color, position };
+	const newPoints = points.slice();
+	newPoints.splice( nextIndex - 1, 0, newPoint );
+	return newPoints;
+}
+
+/**
+ * Removes a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index  Index to remove.
+ *
+ * @return New array of control points.
+ */
+export function removeControlPoint( points: ControlPoint[], index: number ) {
+	return points.filter( ( _point, pointIndex ) => {
+		return pointIndex !== index;
+	} );
+}
+/**
+ * Updates a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newPoint New control point to replace the index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPoint(
+	points: ControlPoint[],
+	index: number,
+	newPoint: ControlPoint
+) {
+	const newValue = points.slice();
+	newValue[ index ] = newPoint;
+	return newValue;
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points      Array of control points.
+ * @param index       Index to update.
+ * @param newPosition Position to move the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointPosition(
+	points: ControlPoint[],
+	index: number,
+	newPosition: ControlPoint[ 'position' ]
+) {
+	if ( isOverlapping( points, index, newPosition ) ) {
+		return points;
+	}
+	const newPoint = {
+		...points[ index ],
+		position: newPosition,
+	};
+	return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColor(
+	points: ControlPoint[],
+	index: number,
+	newColor: ControlPoint[ 'color' ]
+) {
+	const newPoint = {
+		...points[ index ],
+		color: newColor,
+	};
+	return updateControlPoint( points, index, newPoint );
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColorByPosition(
+	points: ControlPoint[],
+	position: ControlPoint[ 'position' ],
+	newColor: ControlPoint[ 'color' ]
+) {
+	const index = points.findIndex( ( point ) => point.position === position );
+	return updateControlPointColor( points, index, newColor );
+}
+
+/**
+ * Gets the horizontal coordinate when dragging a control point with the mouse.
+ *
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
+ *
+ * @return Whole number percentage from the left.
+ */
+export function getHorizontalRelativeGradientPosition(
+	mouseXcoordinate: number,
+	containerElement: HTMLDivElement
+): number;
+export function getHorizontalRelativeGradientPosition(
+	mouseXcoordinate: number,
+	containerElement: null
+): undefined;
+export function getHorizontalRelativeGradientPosition(
+	mouseXCoordinate: number,
+	containerElement: HTMLDivElement | null
+) {
+	if ( ! containerElement ) {
+		return;
+	}
+	const { x, width } = containerElement.getBoundingClientRect();
+	const absolutePositionValue = mouseXCoordinate - x;
+	return Math.round(
+		clampPercent( ( absolutePositionValue * 100 ) / width )
+	);
+}
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
deleted file mode 100644
index cac1393fe53d49..00000000000000
--- a/packages/components/src/custom-gradient-picker/index.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import AnglePickerControl from '../angle-picker-control';
-import CustomGradientBar from './gradient-bar';
-import { Flex } from '../flex';
-import SelectControl from '../select-control';
-import { VStack } from '../v-stack';
-import {
-	getGradientAstWithDefault,
-	getLinearGradientRepresentation,
-	getGradientAstWithControlPoints,
-	getStopCssColor,
-} from './utils';
-import { serializeGradient } from './serializer';
-import {
-	DEFAULT_LINEAR_GRADIENT_ANGLE,
-	HORIZONTAL_GRADIENT_ORIENTATION,
-	GRADIENT_OPTIONS,
-	DEFAULT_GRADIENT,
-} from './constants';
-import {
-	AccessoryWrapper,
-	SelectWrapper,
-} from './styles/custom-gradient-picker-styles';
-
-const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
-	const angle =
-		gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
-	const onAngleChange = ( newAngle ) => {
-		onChange(
-			serializeGradient( {
-				...gradientAST,
-				orientation: {
-					type: 'angular',
-					value: newAngle,
-				},
-			} )
-		);
-	};
-	return (
-		<AnglePickerControl
-			__nextHasNoMarginBottom
-			onChange={ onAngleChange }
-			labelPosition="top"
-			value={ hasGradient ? angle : '' }
-		/>
-	);
-};
-
-const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
-	const { type } = gradientAST;
-	const onSetLinearGradient = () => {
-		onChange(
-			serializeGradient( {
-				...gradientAST,
-				...( gradientAST.orientation
-					? {}
-					: { orientation: HORIZONTAL_GRADIENT_ORIENTATION } ),
-				type: 'linear-gradient',
-			} )
-		);
-	};
-
-	const onSetRadialGradient = () => {
-		const { orientation, ...restGradientAST } = gradientAST;
-		onChange(
-			serializeGradient( {
-				...restGradientAST,
-				type: 'radial-gradient',
-			} )
-		);
-	};
-
-	const handleOnChange = ( next ) => {
-		if ( next === 'linear-gradient' ) {
-			onSetLinearGradient();
-		}
-		if ( next === 'radial-gradient' ) {
-			onSetRadialGradient();
-		}
-	};
-
-	return (
-		<SelectControl
-			__nextHasNoMarginBottom
-			className="components-custom-gradient-picker__type-picker"
-			label={ __( 'Type' ) }
-			labelPosition="top"
-			onChange={ handleOnChange }
-			options={ GRADIENT_OPTIONS }
-			size="__unstable-large"
-			value={ hasGradient && type }
-		/>
-	);
-};
-
-export default function CustomGradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
-	value,
-	onChange,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const gradientAST = getGradientAstWithDefault( value );
-	// On radial gradients the bar should display a linear gradient.
-	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
-	// On liner gradients the bar represents the color stops from left to right independently of the angle.
-	const background = getLinearGradientRepresentation( gradientAST );
-	const hasGradient = gradientAST.value !== DEFAULT_GRADIENT;
-	// Control points color option may be hex from presets, custom colors will be rgb.
-	// The position should always be a percentage.
-	const controlPoints = gradientAST.colorStops.map( ( colorStop ) => ( {
-		color: getStopCssColor( colorStop ),
-		position: parseInt( colorStop.length.value ),
-	} ) );
-
-	if ( ! __nextHasNoMargin ) {
-		deprecated(
-			'Outer margin styles for wp.components.CustomGradientPicker',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
-	return (
-		<VStack
-			spacing={ 4 }
-			className={ classnames( 'components-custom-gradient-picker', {
-				'is-next-has-no-margin': __nextHasNoMargin,
-			} ) }
-		>
-			<CustomGradientBar
-				__experimentalIsRenderedInSidebar={
-					__experimentalIsRenderedInSidebar
-				}
-				background={ background }
-				hasGradient={ hasGradient }
-				value={ controlPoints }
-				onChange={ ( newControlPoints ) => {
-					onChange(
-						serializeGradient(
-							getGradientAstWithControlPoints(
-								gradientAST,
-								newControlPoints
-							)
-						)
-					);
-				} }
-			/>
-			<Flex
-				gap={ 3 }
-				className="components-custom-gradient-picker__ui-line"
-			>
-				<SelectWrapper>
-					<GradientTypePicker
-						gradientAST={ gradientAST }
-						hasGradient={ hasGradient }
-						onChange={ onChange }
-					/>
-				</SelectWrapper>
-				<AccessoryWrapper>
-					{ gradientAST.type === 'linear-gradient' && (
-						<GradientAnglePicker
-							gradientAST={ gradientAST }
-							hasGradient={ hasGradient }
-							onChange={ onChange }
-						/>
-					) }
-				</AccessoryWrapper>
-			</Flex>
-		</VStack>
-	);
-}
diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js
index 474df2bd18b9b5..12b2e44e379e68 100644
--- a/packages/components/src/custom-gradient-picker/index.native.js
+++ b/packages/components/src/custom-gradient-picker/index.native.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, RadioControl, RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
@@ -16,6 +15,9 @@ import {
 	HORIZONTAL_GRADIENT_ORIENTATION,
 } from './constants';
 import styles from './style.scss';
+import PanelBody from '../panel/body';
+import RadioControl from '../radio-control';
+import RangeControl from '../range-control';
 
 function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ gradientOrientation, setGradientOrientation ] = useState(
@@ -25,7 +27,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ currentColor, setCurrentColor ] = useState( currentValue );
 
 	const { getGradientType, gradients, gradientOptions } = colorsUtils;
-	const gradientAST = getGradientAstWithDefault( currentColor );
+	const { gradientAST } = getGradientAstWithDefault( currentColor );
 	const gradientType = getGradientType( currentColor );
 
 	function isLinearGradient( type ) {
diff --git a/packages/components/src/custom-gradient-picker/index.tsx b/packages/components/src/custom-gradient-picker/index.tsx
new file mode 100644
index 00000000000000..8d53cd9f3d0ea2
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/index.tsx
@@ -0,0 +1,211 @@
+/**
+ * External dependencies
+ */
+import { type LinearGradientNode } from 'gradient-parser';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AnglePickerControl from '../angle-picker-control';
+import CustomGradientBar from './gradient-bar';
+import { Flex } from '../flex';
+import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
+import {
+	getGradientAstWithDefault,
+	getLinearGradientRepresentation,
+	getGradientAstWithControlPoints,
+	getStopCssColor,
+} from './utils';
+import { serializeGradient } from './serializer';
+import {
+	DEFAULT_LINEAR_GRADIENT_ANGLE,
+	HORIZONTAL_GRADIENT_ORIENTATION,
+	GRADIENT_OPTIONS,
+} from './constants';
+import {
+	AccessoryWrapper,
+	SelectWrapper,
+} from './styles/custom-gradient-picker-styles';
+import type {
+	CustomGradientPickerProps,
+	GradientAnglePickerProps,
+	GradientTypePickerProps,
+} from './types';
+
+const GradientAnglePicker = ( {
+	gradientAST,
+	hasGradient,
+	onChange,
+}: GradientAnglePickerProps ) => {
+	const angle =
+		gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
+	const onAngleChange = ( newAngle: number ) => {
+		onChange(
+			serializeGradient( {
+				...gradientAST,
+				orientation: {
+					type: 'angular',
+					value: `${ newAngle }`,
+				},
+			} )
+		);
+	};
+	return (
+		<AnglePickerControl
+			onChange={ onAngleChange }
+			value={ hasGradient ? angle : '' }
+		/>
+	);
+};
+
+const GradientTypePicker = ( {
+	gradientAST,
+	hasGradient,
+	onChange,
+}: GradientTypePickerProps ) => {
+	const { type } = gradientAST;
+
+	const onSetLinearGradient = () => {
+		onChange(
+			serializeGradient( {
+				...gradientAST,
+				orientation: gradientAST.orientation
+					? undefined
+					: HORIZONTAL_GRADIENT_ORIENTATION,
+				type: 'linear-gradient',
+			} satisfies LinearGradientNode )
+		);
+	};
+
+	const onSetRadialGradient = () => {
+		const { orientation, ...restGradientAST } = gradientAST;
+		onChange(
+			serializeGradient( {
+				...restGradientAST,
+				type: 'radial-gradient',
+			} )
+		);
+	};
+
+	const handleOnChange = ( next: string ) => {
+		if ( next === 'linear-gradient' ) {
+			onSetLinearGradient();
+		}
+		if ( next === 'radial-gradient' ) {
+			onSetRadialGradient();
+		}
+	};
+
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			className="components-custom-gradient-picker__type-picker"
+			label={ __( 'Type' ) }
+			labelPosition="top"
+			onChange={ handleOnChange }
+			options={ GRADIENT_OPTIONS }
+			size="__unstable-large"
+			value={ hasGradient ? type : undefined }
+		/>
+	);
+};
+
+/**
+ * CustomGradientPicker is a React component that renders a UI for specifying
+ * linear or radial gradients. Radial gradients are displayed in the picker as
+ * a slice of the gradient from the center to the outside.
+ *
+ * ```jsx
+ * import { CustomGradientPicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyCustomGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState();
+ *
+ *   return (
+ *     <CustomGradientPicker
+ *			value={ gradient }
+ *			onChange={ setGradient }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function CustomGradientPicker( {
+	value,
+	onChange,
+	enableAlpha = true,
+	__experimentalIsRenderedInSidebar = false,
+}: CustomGradientPickerProps ) {
+	const { gradientAST, hasGradient } = getGradientAstWithDefault( value );
+
+	// On radial gradients the bar should display a linear gradient.
+	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
+	// On liner gradients the bar represents the color stops from left to right independently of the angle.
+	const background = getLinearGradientRepresentation( gradientAST );
+
+	// Control points color option may be hex from presets, custom colors will be rgb.
+	// The position should always be a percentage.
+	const controlPoints = gradientAST.colorStops.map( ( colorStop ) => {
+		return {
+			color: getStopCssColor( colorStop ),
+			// Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`,
+			// TypeScript doesn't know that `colorStop.length` is not undefined here.
+			// @ts-expect-error
+			position: parseInt( colorStop.length.value ),
+		};
+	} );
+
+	return (
+		<VStack spacing={ 4 } className="components-custom-gradient-picker">
+			<CustomGradientBar
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				disableAlpha={ ! enableAlpha }
+				background={ background }
+				hasGradient={ hasGradient }
+				value={ controlPoints }
+				onChange={ ( newControlPoints ) => {
+					onChange(
+						serializeGradient(
+							getGradientAstWithControlPoints(
+								gradientAST,
+								newControlPoints
+							)
+						)
+					);
+				} }
+			/>
+			<Flex
+				gap={ 3 }
+				className="components-custom-gradient-picker__ui-line"
+			>
+				<SelectWrapper>
+					<GradientTypePicker
+						gradientAST={ gradientAST }
+						hasGradient={ hasGradient }
+						onChange={ onChange }
+					/>
+				</SelectWrapper>
+				<AccessoryWrapper>
+					{ gradientAST.type === 'linear-gradient' && (
+						<GradientAnglePicker
+							gradientAST={ gradientAST }
+							hasGradient={ hasGradient }
+							onChange={ onChange }
+						/>
+					) }
+				</AccessoryWrapper>
+			</Flex>
+		</VStack>
+	);
+}
+
+export default CustomGradientPicker;
diff --git a/packages/components/src/custom-gradient-picker/serializer.js b/packages/components/src/custom-gradient-picker/serializer.js
deleted file mode 100644
index f0b08404896da2..00000000000000
--- a/packages/components/src/custom-gradient-picker/serializer.js
+++ /dev/null
@@ -1,46 +0,0 @@
-export function serializeGradientColor( { type, value } ) {
-	if ( type === 'literal' ) {
-		return value;
-	}
-	if ( type === 'hex' ) {
-		return `#${ value }`;
-	}
-	return `${ type }(${ value.join( ',' ) })`;
-}
-
-export function serializeGradientPosition( position ) {
-	if ( ! position ) {
-		return '';
-	}
-	const { value, type } = position;
-	return `${ value }${ type }`;
-}
-
-export function serializeGradientColorStop( { type, value, length } ) {
-	return `${ serializeGradientColor( {
-		type,
-		value,
-	} ) } ${ serializeGradientPosition( length ) }`;
-}
-
-export function serializeGradientOrientation( orientation ) {
-	if ( ! orientation || orientation.type !== 'angular' ) {
-		return;
-	}
-	return `${ orientation.value }deg`;
-}
-
-export function serializeGradient( { type, orientation, colorStops } ) {
-	const serializedOrientation = serializeGradientOrientation( orientation );
-	const serializedColorStops = colorStops
-		.sort( ( colorStop1, colorStop2 ) => {
-			return (
-				( colorStop1?.length?.value ?? 0 ) -
-				( colorStop2?.length?.value ?? 0 )
-			);
-		} )
-		.map( serializeGradientColorStop );
-	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
-		.filter( Boolean )
-		.join( ',' ) })`;
-}
diff --git a/packages/components/src/custom-gradient-picker/serializer.ts b/packages/components/src/custom-gradient-picker/serializer.ts
new file mode 100644
index 00000000000000..67a315970f8562
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/serializer.ts
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+
+export function serializeGradientColor( {
+	type,
+	value,
+}: gradientParser.ColorStop ) {
+	if ( type === 'literal' ) {
+		return value;
+	}
+	if ( type === 'hex' ) {
+		return `#${ value }`;
+	}
+	return `${ type }(${ value.join( ',' ) })`;
+}
+
+export function serializeGradientPosition(
+	position: gradientParser.ColorStop[ 'length' ]
+) {
+	if ( ! position ) {
+		return '';
+	}
+	const { value, type } = position;
+	return `${ value }${ type }`;
+}
+
+export function serializeGradientColorStop( {
+	type,
+	value,
+	length,
+}: gradientParser.ColorStop ) {
+	return `${ serializeGradientColor( {
+		type,
+		value,
+	} as gradientParser.ColorStop ) } ${ serializeGradientPosition( length ) }`;
+}
+
+export function serializeGradientOrientation(
+	orientation: gradientParser.GradientNode[ 'orientation' ]
+) {
+	if (
+		Array.isArray( orientation ) ||
+		! orientation ||
+		orientation.type !== 'angular'
+	) {
+		return;
+	}
+	return `${ orientation.value }deg`;
+}
+
+export function serializeGradient( {
+	type,
+	orientation,
+	colorStops,
+}: gradientParser.GradientNode ) {
+	const serializedOrientation = serializeGradientOrientation( orientation );
+	const serializedColorStops = colorStops
+		.sort( ( colorStop1, colorStop2 ) => {
+			const getNumericStopValue = (
+				colorStop: gradientParser.ColorStop
+			) => {
+				return colorStop?.length?.value === undefined
+					? 0
+					: parseInt( colorStop.length.value );
+			};
+
+			return (
+				getNumericStopValue( colorStop1 ) -
+				getNumericStopValue( colorStop2 )
+			);
+		} )
+		.map( serializeGradientColorStop );
+	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
+		.filter( Boolean )
+		.join( ',' ) })`;
+}
diff --git a/packages/components/src/custom-gradient-picker/stories/index.js b/packages/components/src/custom-gradient-picker/stories/index.js
deleted file mode 100644
index 9e56d1534955d0..00000000000000
--- a/packages/components/src/custom-gradient-picker/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import CustomGradientPicker from '../';
-
-export default {
-	title: 'Components/CustomGradientPicker',
-	component: CustomGradientPicker,
-	argTypes: {
-		__nextHasNoMargin: { control: { type: 'boolean' } },
-	},
-};
-
-const CustomGradientPickerWithState = ( props ) => {
-	const [ gradient, setGradient ] = useState();
-	return (
-		<CustomGradientPicker
-			{ ...props }
-			value={ gradient }
-			onChange={ setGradient }
-		/>
-	);
-};
-
-export const Default = CustomGradientPickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-};
diff --git a/packages/components/src/custom-gradient-picker/stories/index.story.tsx b/packages/components/src/custom-gradient-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..23d5239e5d240d
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/stories/index.story.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomGradientPicker from '../';
+
+const meta: Meta< typeof CustomGradientPicker > = {
+	title: 'Components/Selection & Input/Color/CustomGradientPicker',
+	id: 'components-customgradientpicker',
+	component: CustomGradientPicker,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const CustomGradientPickerWithState: StoryFn<
+	typeof CustomGradientPicker
+> = ( { onChange, ...props } ) => {
+	const [ gradient, setGradient ] = useState< string >();
+	return (
+		<CustomGradientPicker
+			{ ...props }
+			value={ gradient }
+			onChange={ ( newGradient ) => {
+				setGradient( newGradient );
+				onChange( newGradient );
+			} }
+		/>
+	);
+};
+
+export const Default = CustomGradientPickerWithState.bind( {} );
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index c3c236f2367058..b9f2bee9dbe4eb 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,20 +1,29 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
-.components-custom-gradient-picker {
-	&:not(.is-next-has-no-margin) {
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-30;
-	}
-}
-
-.components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
-	opacity: 0.4;
-}
-
 .components-custom-gradient-picker__gradient-bar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	width: 100%;
 	height: $grid-unit-60;
+	position: relative;
+	z-index: 1;
+
+	&.has-gradient {
+		// The background image creates a checkerboard pattern. Ignore rtlcss to
+		// make it work both in LTR and RTL.
+		// See https://github.com/WordPress/gutenberg/pull/42510
+		/*rtl:begin:ignore*/
+		background-image:
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+		background-position: 0 0, 12px 12px;
+		/*rtl:end:ignore*/
+		background-size: calc(2 * 12px) calc(2 * 12px);
+	}
+
+	.components-custom-gradient-picker__gradient-bar-background {
+		position: absolute;
+		inset: 0;
+	}
 
 	.components-custom-gradient-picker__markers-container {
 		position: relative;
@@ -38,8 +47,8 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;
-		min-width: $grid-unit-20;
-		border-radius: 50%;
+		min-width: $grid-unit-20 !important;
+		border-radius: $radius-round;
 
 		background: $white;
 		padding: 2px;
@@ -56,18 +65,18 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
 		height: inherit;
 		width: inherit;
-		border-radius: 50%;
+		border-radius: $radius-round;
 		padding: 0;
 
 		// Shadow and stroke.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 
 		&:focus,
 		&.is-active {
-			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: $border-width-tab solid transparent;
@@ -91,21 +100,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 	height: 20px;
 }
 
-.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
-	border: none;
-
-	// Work-around to target the inner button containers rendered by <ToolbarGroup />
-	> div + div {
-		margin-left: 1px;
-	}
-
-	button {
-		&.is-pressed {
-			> svg {
-				background: $white;
-				border: 1px solid $gray-600;
-				border-radius: 2px;
-			}
-		}
-	}
+.components-custom-gradient-picker__ui-line {
+	position: relative;
+	z-index: 0;
 }
diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
similarity index 100%
rename from packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
rename to packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx
diff --git a/packages/components/src/custom-gradient-picker/test/serializer.js b/packages/components/src/custom-gradient-picker/test/serializer.js
deleted file mode 100644
index 3b11e41f7c91d3..00000000000000
--- a/packages/components/src/custom-gradient-picker/test/serializer.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	serializeGradientColor,
-	serializeGradientPosition,
-	serializeGradientColorStop,
-	serializeGradientOrientation,
-	serializeGradient,
-} from '../serializer';
-
-describe( 'It should serialize a gradient', () => {
-	test( 'serializeGradientColor', () => {
-		expect(
-			serializeGradientColor( { type: 'rgba', value: [ 1, 2, 3, 0.5 ] } )
-		).toBe( 'rgba(1,2,3,0.5)' );
-
-		expect(
-			serializeGradientColor( { type: 'rgb', value: [ 255, 0, 0 ] } )
-		).toBe( 'rgb(255,0,0)' );
-	} );
-
-	test( 'serializeGradientPosition', () => {
-		expect( serializeGradientPosition( { type: '%', value: 70 } ) ).toBe(
-			'70%'
-		);
-
-		expect( serializeGradientPosition( { type: '%', value: 0 } ) ).toBe(
-			'0%'
-		);
-
-		expect( serializeGradientPosition( { type: 'px', value: 4 } ) ).toBe(
-			'4px'
-		);
-	} );
-
-	test( 'serializeGradientColorStop', () => {
-		expect(
-			serializeGradientColorStop( {
-				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: '%', value: 70 },
-			} )
-		).toBe( 'rgba(1,2,3,0.5) 70%' );
-
-		expect(
-			serializeGradientColorStop( {
-				type: 'rgb',
-				value: [ 255, 0, 0 ],
-				length: { type: '%', value: 0 },
-			} )
-		).toBe( 'rgb(255,0,0) 0%' );
-
-		expect(
-			serializeGradientColorStop( {
-				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: 'px', value: 100 },
-			} )
-		).toBe( 'rgba(1,2,3,0.5) 100px' );
-	} );
-
-	test( 'serializeGradientOrientation', () => {
-		expect(
-			serializeGradientOrientation( { type: 'angular', value: 40 } )
-		).toBe( '40deg' );
-
-		expect(
-			serializeGradientOrientation( { type: 'angular', value: 0 } )
-		).toBe( '0deg' );
-	} );
-
-	test( 'serializeGradient', () => {
-		expect(
-			serializeGradient( {
-				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 40 },
-				colorStops: [
-					{
-						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
-					},
-					{
-						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
-					},
-				],
-			} )
-		).toBe(
-			'linear-gradient(40deg,rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 70%)'
-		);
-
-		expect(
-			serializeGradient( {
-				type: 'linear-gradient',
-				colorStops: [
-					{
-						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
-					},
-					{
-						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
-					},
-				],
-			} )
-		).toBe( 'linear-gradient(rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 70%)' );
-
-		expect(
-			serializeGradient( {
-				type: 'linear-gradient',
-				colorStops: [
-					{
-						type: 'hex',
-						value: '000',
-						length: { type: '%', value: 70 },
-					},
-					{
-						type: 'hex',
-						value: 'fff',
-						length: { type: '%', value: 40 },
-					},
-				],
-			} )
-		).toBe( 'linear-gradient(#fff 40%,#000 70%)' );
-
-		expect(
-			serializeGradient( {
-				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 0 },
-				colorStops: [
-					{
-						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 0 },
-					},
-					{
-						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
-					},
-					{
-						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 100 },
-					},
-					{
-						type: 'rgba',
-						value: [ 10, 20, 30, 0.5 ],
-						length: { type: '%', value: 20 },
-					},
-				],
-			} )
-		).toBe(
-			'linear-gradient(0deg,rgba(1,2,3,0.5) 0%,rgba(10,20,30,0.5) 20%,rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 100%)'
-		);
-	} );
-} );
diff --git a/packages/components/src/custom-gradient-picker/test/serializer.ts b/packages/components/src/custom-gradient-picker/test/serializer.ts
new file mode 100644
index 00000000000000..3c14194fc7279f
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/test/serializer.ts
@@ -0,0 +1,168 @@
+/**
+ * Internal dependencies
+ */
+import {
+	serializeGradientColor,
+	serializeGradientPosition,
+	serializeGradientColorStop,
+	serializeGradientOrientation,
+	serializeGradient,
+} from '../serializer';
+
+describe( 'It should serialize a gradient', () => {
+	test( 'serializeGradientColor', () => {
+		expect(
+			serializeGradientColor( {
+				type: 'rgba',
+				value: [ '1', '2', '3', '0.5' ],
+			} )
+		).toBe( 'rgba(1,2,3,0.5)' );
+
+		expect(
+			serializeGradientColor( {
+				type: 'rgb',
+				value: [ '255', '0', '0' ],
+			} )
+		).toBe( 'rgb(255,0,0)' );
+	} );
+
+	test( 'serializeGradientPosition', () => {
+		expect( serializeGradientPosition( { type: '%', value: '70' } ) ).toBe(
+			'70%'
+		);
+
+		expect( serializeGradientPosition( { type: '%', value: '0' } ) ).toBe(
+			'0%'
+		);
+
+		expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
+			'4px'
+		);
+	} );
+
+	test( 'serializeGradientColorStop', () => {
+		expect(
+			serializeGradientColorStop( {
+				type: 'rgba',
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: '%', value: '70' },
+			} )
+		).toBe( 'rgba(1,2,3,0.5) 70%' );
+
+		expect(
+			serializeGradientColorStop( {
+				type: 'rgb',
+				value: [ '255', '0', '0' ],
+				length: { type: '%', value: '0' },
+			} )
+		).toBe( 'rgb(255,0,0) 0%' );
+
+		expect(
+			serializeGradientColorStop( {
+				type: 'rgba',
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: 'px', value: '100' },
+			} )
+		).toBe( 'rgba(1,2,3,0.5) 100px' );
+	} );
+
+	test( 'serializeGradientOrientation', () => {
+		expect(
+			serializeGradientOrientation( { type: 'angular', value: '40' } )
+		).toBe( '40deg' );
+
+		expect(
+			serializeGradientOrientation( { type: 'angular', value: '0' } )
+		).toBe( '0deg' );
+	} );
+
+	test( 'serializeGradient', () => {
+		expect(
+			serializeGradient( {
+				type: 'linear-gradient',
+				orientation: { type: 'angular', value: '40' },
+				colorStops: [
+					{
+						type: 'rgba',
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
+					},
+					{
+						type: 'rgba',
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
+					},
+				],
+			} )
+		).toBe(
+			'linear-gradient(40deg,rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 70%)'
+		);
+
+		expect(
+			serializeGradient( {
+				type: 'linear-gradient',
+				colorStops: [
+					{
+						type: 'rgba',
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
+					},
+					{
+						type: 'rgba',
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
+					},
+				],
+			} )
+		).toBe( 'linear-gradient(rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 70%)' );
+
+		expect(
+			serializeGradient( {
+				type: 'linear-gradient',
+				colorStops: [
+					{
+						type: 'hex',
+						value: '000',
+						length: { type: '%', value: '70' },
+					},
+					{
+						type: 'hex',
+						value: 'fff',
+						length: { type: '%', value: '40' },
+					},
+				],
+			} )
+		).toBe( 'linear-gradient(#fff 40%,#000 70%)' );
+
+		expect(
+			serializeGradient( {
+				type: 'linear-gradient',
+				orientation: { type: 'angular', value: '0' },
+				colorStops: [
+					{
+						type: 'rgba',
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '0' },
+					},
+					{
+						type: 'rgba',
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
+					},
+					{
+						type: 'rgba',
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '100' },
+					},
+					{
+						type: 'rgba',
+						value: [ '10', '20', '30', '0.5' ],
+						length: { type: '%', value: '20' },
+					},
+				],
+			} )
+		).toBe(
+			'linear-gradient(0deg,rgba(1,2,3,0.5) 0%,rgba(10,20,30,0.5) 20%,rgba(255,1,1,0.9) 40%,rgba(1,2,3,0.5) 100%)'
+		);
+	} );
+} );
diff --git a/packages/components/src/custom-gradient-picker/types.ts b/packages/components/src/custom-gradient-picker/types.ts
new file mode 100644
index 00000000000000..17702c74ef527a
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/types.ts
@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+
+export type CustomGradientPickerProps = {
+	/**
+	 * Start opting in to the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: string | null;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string ) => void;
+	/**
+	 * Whether to enable alpha transparency options in the picker.
+	 *
+	 * @default true
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type GradientAnglePickerProps = {
+	gradientAST:
+		| gradientParser.LinearGradientNode
+		| gradientParser.RepeatingLinearGradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type GradientTypePickerProps = {
+	gradientAST: gradientParser.GradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type ControlPoint = { color: string; position: number };
+
+export type CustomGradientBarProps = {
+	background: React.CSSProperties[ 'background' ];
+	hasGradient: boolean;
+	value: ControlPoint[];
+	onChange: ( newControlPoints: ControlPoint[] ) => void;
+	disableInserter?: boolean;
+	disableAlpha?: boolean;
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type CustomGradientBarIdleState = { id: 'IDLE' };
+type CustomGradientBarMovingInserterState = {
+	id: 'MOVING_INSERTER';
+	insertPosition: number;
+};
+type CustomGradientBarInsertingControlPointState = {
+	id: 'INSERTING_CONTROL_POINT';
+	insertPosition: number;
+};
+type CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };
+
+export type CustomGradientBarReducerState =
+	| CustomGradientBarIdleState
+	| CustomGradientBarMovingInserterState
+	| CustomGradientBarInsertingControlPointState
+	| CustomGradientBarMovingControlPointState;
+
+export type CustomGradientBarReducerAction =
+	| { type: 'MOVE_INSERTER'; insertPosition: number }
+	| { type: 'STOP_INSERTER_MOVE' }
+	| { type: 'OPEN_INSERTER' }
+	| { type: 'CLOSE_INSERTER' }
+	| { type: 'START_CONTROL_CHANGE' }
+	| { type: 'STOP_CONTROL_CHANGE' };
+
+export type ControlPointButtonProps = {
+	isOpen: boolean;
+	position: ControlPoint[ 'position' ];
+	color: string;
+};
+
+export type ControlPointsProps = {
+	disableRemove: boolean;
+	disableAlpha: boolean;
+	gradientPickerDomRef: React.RefObject< HTMLDivElement >;
+	ignoreMarkerPosition?: number;
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onStartControlPointChange: () => void;
+	onStopControlPointChange: () => void;
+	__experimentalIsRenderedInSidebar: boolean;
+};
+
+export type ControlPointMoveState = {
+	initialPosition: number;
+	index: number;
+	significantMoveHappened: boolean;
+	listenersActivated: boolean;
+};
+
+export type InsertPointProps = {
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onOpenInserter: () => void;
+	onCloseInserter: () => void;
+	insertPosition: number;
+	disableAlpha: boolean;
+	__experimentalIsRenderedInSidebar: boolean;
+};
diff --git a/packages/components/src/custom-gradient-picker/utils.js b/packages/components/src/custom-gradient-picker/utils.js
deleted file mode 100644
index 74c23db5b26d44..00000000000000
--- a/packages/components/src/custom-gradient-picker/utils.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-import gradientParser from 'gradient-parser';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-/**
- * Internal dependencies
- */
-import {
-	DEFAULT_GRADIENT,
-	HORIZONTAL_GRADIENT_ORIENTATION,
-	DIRECTIONAL_ORIENTATION_ANGLE_MAP,
-} from './constants';
-import { serializeGradient } from './serializer';
-
-extend( [ namesPlugin ] );
-
-export function getLinearGradientRepresentation( gradientAST ) {
-	return serializeGradient( {
-		type: 'linear-gradient',
-		orientation: HORIZONTAL_GRADIENT_ORIENTATION,
-		colorStops: gradientAST.colorStops,
-	} );
-}
-
-function hasUnsupportedLength( item ) {
-	return item.length === undefined || item.length.type !== '%';
-}
-
-export function getGradientAstWithDefault( value ) {
-	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
-	// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
-	let gradientAST;
-
-	try {
-		gradientAST = gradientParser.parse( value )[ 0 ];
-		gradientAST.value = value;
-	} catch ( error ) {
-		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
-		gradientAST.value = DEFAULT_GRADIENT;
-	}
-
-	if ( gradientAST.orientation?.type === 'directional' ) {
-		gradientAST.orientation.type = 'angular';
-		gradientAST.orientation.value =
-			DIRECTIONAL_ORIENTATION_ANGLE_MAP[
-				gradientAST.orientation.value
-			].toString();
-	}
-
-	if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {
-		const { colorStops } = gradientAST;
-		const step = 100 / ( colorStops.length - 1 );
-		colorStops.forEach( ( stop, index ) => {
-			stop.length = {
-				value: step * index,
-				type: '%',
-			};
-		} );
-		gradientAST.value = serializeGradient( gradientAST );
-	}
-
-	return gradientAST;
-}
-
-export function getGradientAstWithControlPoints(
-	gradientAST,
-	newControlPoints
-) {
-	return {
-		...gradientAST,
-		colorStops: newControlPoints.map( ( { position, color } ) => {
-			const { r, g, b, a } = colord( color ).toRgb();
-			return {
-				length: {
-					type: '%',
-					value: position?.toString(),
-				},
-				type: a < 1 ? 'rgba' : 'rgb',
-				value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],
-			};
-		} ),
-	};
-}
-
-export function getStopCssColor( colorStop ) {
-	switch ( colorStop.type ) {
-		case 'hex':
-			return `#${ colorStop.value }`;
-		case 'literal':
-			return colorStop.value;
-		case 'rgb':
-		case 'rgba':
-			return `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;
-		default:
-			// Should be unreachable if passing an AST from gradient-parser.
-			// See https://github.com/rafaelcaricio/gradient-parser#ast.
-			return 'transparent';
-	}
-}
diff --git a/packages/components/src/custom-gradient-picker/utils.ts b/packages/components/src/custom-gradient-picker/utils.ts
new file mode 100644
index 00000000000000..e52c5220a6e759
--- /dev/null
+++ b/packages/components/src/custom-gradient-picker/utils.ts
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import gradientParser from 'gradient-parser';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * Internal dependencies
+ */
+import {
+	DEFAULT_GRADIENT,
+	HORIZONTAL_GRADIENT_ORIENTATION,
+	DIRECTIONAL_ORIENTATION_ANGLE_MAP,
+} from './constants';
+import { serializeGradient } from './serializer';
+import type { ControlPoint } from './types';
+
+extend( [ namesPlugin ] );
+
+export function getLinearGradientRepresentation(
+	gradientAST: gradientParser.GradientNode
+) {
+	return serializeGradient( {
+		type: 'linear-gradient',
+		orientation: HORIZONTAL_GRADIENT_ORIENTATION,
+		colorStops: gradientAST.colorStops,
+	} );
+}
+
+function hasUnsupportedLength( item: gradientParser.ColorStop ) {
+	return item.length === undefined || item.length.type !== '%';
+}
+
+export function getGradientAstWithDefault( value?: string | null ) {
+	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
+	// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
+	let gradientAST: gradientParser.GradientNode | undefined;
+	let hasGradient = !! value;
+
+	const valueToParse = value ?? DEFAULT_GRADIENT;
+
+	try {
+		gradientAST = gradientParser.parse( valueToParse )[ 0 ];
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'wp.components.CustomGradientPicker failed to parse the gradient with error',
+			error
+		);
+
+		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
+		hasGradient = false;
+	}
+
+	if (
+		! Array.isArray( gradientAST.orientation ) &&
+		gradientAST.orientation?.type === 'directional'
+	) {
+		gradientAST.orientation = {
+			type: 'angular',
+			value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+				gradientAST.orientation.value
+			].toString(),
+		};
+	}
+
+	if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {
+		const { colorStops } = gradientAST;
+		const step = 100 / ( colorStops.length - 1 );
+		colorStops.forEach( ( stop, index ) => {
+			stop.length = {
+				value: `${ step * index }`,
+				type: '%',
+			};
+		} );
+	}
+
+	return { gradientAST, hasGradient };
+}
+
+export function getGradientAstWithControlPoints(
+	gradientAST: gradientParser.GradientNode,
+	newControlPoints: ControlPoint[]
+) {
+	return {
+		...gradientAST,
+		colorStops: newControlPoints.map( ( { position, color } ) => {
+			const { r, g, b, a } = colord( color ).toRgb();
+			return {
+				length: {
+					type: '%',
+					value: position?.toString(),
+				},
+				type: a < 1 ? 'rgba' : 'rgb',
+				value:
+					a < 1
+						? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]
+						: [ `${ r }`, `${ g }`, `${ b }` ],
+			};
+		} ),
+	} as gradientParser.GradientNode;
+}
+
+export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
+	switch ( colorStop.type ) {
+		case 'hex':
+			return `#${ colorStop.value }`;
+		case 'literal':
+			return colorStop.value;
+		case 'rgb':
+		case 'rgba':
+			return `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;
+		default:
+			// Should be unreachable if passing an AST from gradient-parser.
+			// See https://github.com/rafaelcaricio/gradient-parser#ast.
+			return 'transparent';
+	}
+}
diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md
new file mode 100644
index 00000000000000..db7208c2d13015
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/README.md
@@ -0,0 +1,159 @@
+# CustomSelectControlV2
+
+Used to render a customizable select control component.
+
+## Development guidelines
+
+### Usage
+
+#### Uncontrolled Mode
+
+`CustomSelectControlV2` can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultValue` prop can be used to set the initial selected value. If this prop is not set, the first value from the children will be selected by default.
+
+```jsx
+const UncontrolledCustomSelectControlV2 = () => (
+	<CustomSelectControlV2 label="Colors">
+		<CustomSelectControlV2.Item value="Blue">
+			{ /* The `defaultValue` since it wasn't defined */ }
+			<span style={ { color: 'blue' } }>Blue</span>
+		</CustomSelectControlV2.Item>
+		<CustomSelectControlV2.Item value="Purple">
+			<span style={ { color: 'purple' } }>Purple</span>
+		</CustomSelectControlV2.Item>
+		<CustomSelectControlV2.Item value="Pink">
+			<span style={ { color: 'deeppink' } }>Pink</span>
+		</CustomSelectControlV2.Item>
+	</CustomSelectControlV2>
+);
+```
+
+#### Controlled Mode
+
+`CustomSelectControlV2` can also be used in a controlled mode, where the parent component specifies the `value` and the `onChange` props to control selection.
+
+```jsx
+const ControlledCustomSelectControlV2 = () => {
+	const [ value, setValue ] = useState< string | string[] >();
+
+    const renderControlledValue = ( renderValue: string | string[] ) => (
+		<>
+			{ /* Custom JSX to display `renderValue` item */ }
+		</>
+    );
+
+	return (
+		<CustomSelectControlV2
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		>
+			{ [ 'blue', 'purple', 'pink' ].map( ( option ) => (
+				<CustomSelectControlV2.Item key={ option } value={ option }>
+					{ renderControlledValue( option ) }
+				</CustomSelectControlV2.Item>
+			) ) }
+		</CustomSelectControlV2>
+	);
+};
+```
+
+#### Multiple Selection
+
+Multiple selection can be enabled by using an array for the `value` and
+`defaultValue` props. The argument of the `onChange` function will also change accordingly.
+
+```jsx
+const MultiSelectCustomSelectControlV2 = () => (
+	<CustomSelectControlV2 defaultValue={ [ 'blue', 'pink' ] } label="Colors">
+		{ [ 'blue', 'purple', 'pink' ].map( ( item ) => (
+			<CustomSelectControlV2.Item key={ item } value={ item }>
+				{ item }
+			</CustomSelectControlV2.Item>
+		) ) }
+	</CustomSelectControlV2>
+);
+```
+
+### Components and Sub-components
+
+`CustomSelectControlV2` is comprised of two individual components:
+
+-   `CustomSelectControlV2`: a wrapper component and context provider. It is responsible for managing the state of the `CustomSelectControlV2.Item` children.
+-   `CustomSelectControlV2.Item`: renders a single select item. The first `CustomSelectControlV2.Item` child will be used as the `defaultValue` when `defaultValue` is undefined.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The child elements. This should be composed of `CustomSelectControlV2.Item` components.
+
+-   Required: yes
+
+##### `defaultValue`: `string | string[]`
+
+An optional default value for the control. If left `undefined`, the first non-disabled item will be used.
+
+-   Required: no
+
+##### `hideLabelFromVision`: `boolean`
+
+Used to visually hide the label. It will always be visible to screen readers.
+
+-   Required: no
+-   Default: `false`
+
+##### `label`: `string`
+
+Label for the control.
+
+-   Required: yes
+
+##### `onChange`: `( newValue: string | string[] ) => void`
+
+A function that receives the new value of the input.
+
+-   Required: no
+
+##### `renderSelectedValue`: `( selectValue: string | string[] ) => React.ReactNode`
+
+Can be used to render select UI with custom styled values.
+
+-   Required: no
+
+##### `size`: `'default' | 'compact'`
+
+The size of the control.
+
+-   Required: no
+-   Default: `'default'`
+
+##### `value`: `string | string[]`
+
+Can be used to externally control the value of the control.
+
+-   Required: no
+
+### `CustomSelectControlV2.Item`
+
+Used to render a select item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `value`: `string`
+
+The value of the select item. This will be used as the children if children are left `undefined`.
+
+-   Required: yes
+
+##### `children`: `React.ReactNode`
+
+The children to display for each select item. The `value` will be used if left `undefined`.
+
+-   Required: no
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
new file mode 100644
index 00000000000000..bb458abcc282ff
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useCallback, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+import * as Styled from './styles';
+import type {
+	CustomSelectContext as CustomSelectContextType,
+	CustomSelectStore,
+	CustomSelectButtonProps,
+	CustomSelectButtonSize,
+	_CustomSelectInternalProps,
+	_CustomSelectProps,
+} from './types';
+import InputBase from '../input-control/input-base';
+import SelectControlChevronDown from '../select-control/chevron-down';
+import BaseControl from '../base-control';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+function defaultRenderSelectedValue(
+	value: CustomSelectButtonProps[ 'value' ]
+) {
+	const isValueEmpty = Array.isArray( value )
+		? value.length === 0
+		: value === undefined || value === null;
+
+	if ( isValueEmpty ) {
+		return __( 'Select an item' );
+	}
+
+	if ( Array.isArray( value ) ) {
+		return value.length === 1
+			? value[ 0 ]
+			: // translators: %s: number of items selected (it will always be 2 or more items)
+			  sprintf( __( '%s items selected' ), value.length );
+	}
+
+	return value;
+}
+
+const CustomSelectButton = ( {
+	renderSelectedValue,
+	size = 'default',
+	store,
+	...restProps
+}: Omit<
+	React.ComponentProps< typeof Ariakit.Select > &
+		CustomSelectButtonProps &
+		CustomSelectButtonSize &
+		CustomSelectStore,
+	'onChange'
+> ) => {
+	const { value: currentValue } = useStoreState( store );
+
+	const computedRenderSelectedValue = useMemo(
+		() => renderSelectedValue ?? defaultRenderSelectedValue,
+		[ renderSelectedValue ]
+	);
+
+	return (
+		<Styled.Select
+			{ ...restProps }
+			size={ size }
+			hasCustomRenderProp={ !! renderSelectedValue }
+			store={ store }
+		>
+			{ computedRenderSelectedValue( currentValue ) }
+		</Styled.Select>
+	);
+};
+
+function _CustomSelect(
+	props: _CustomSelectInternalProps &
+		_CustomSelectProps &
+		CustomSelectStore &
+		CustomSelectButtonSize
+) {
+	const {
+		children,
+		hideLabelFromVision = false,
+		label,
+		size,
+		store,
+		className,
+		isLegacy = false,
+		...restProps
+	} = props;
+
+	const onSelectPopoverKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+		useCallback(
+			( e ) => {
+				if ( isLegacy ) {
+					e.stopPropagation();
+				}
+			},
+			[ isLegacy ]
+		);
+
+	const contextValue = useMemo( () => ( { store, size } ), [ store, size ] );
+
+	return (
+		// Where should `restProps` be forwarded to?
+		<div className={ className }>
+			<Ariakit.SelectLabel
+				store={ store }
+				render={
+					hideLabelFromVision ? (
+						// @ts-expect-error `children` are passed via the render prop
+						<VisuallyHidden />
+					) : (
+						// @ts-expect-error `children` are passed via the render prop
+						<BaseControl.VisualLabel as="div" />
+					)
+				}
+			>
+				{ label }
+			</Ariakit.SelectLabel>
+			<InputBase
+				__next40pxDefaultSize
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
+			>
+				<CustomSelectButton
+					{ ...restProps }
+					size={ size }
+					store={ store }
+					// Match legacy behavior (move selection rather than open the popover)
+					showOnKeyDown={ ! isLegacy }
+				/>
+				<Styled.SelectPopover
+					gutter={ 12 }
+					store={ store }
+					sameWidth
+					slide={ false }
+					onKeyDown={ onSelectPopoverKeyDown }
+					// Match legacy behavior
+					flip={ ! isLegacy }
+				>
+					<CustomSelectContext.Provider value={ contextValue }>
+						{ children }
+					</CustomSelectContext.Provider>
+				</Styled.SelectPopover>
+			</InputBase>
+		</div>
+	);
+}
+
+export default _CustomSelect;
diff --git a/packages/components/src/custom-select-control-v2/index.tsx b/packages/components/src/custom-select-control-v2/index.tsx
new file mode 100644
index 00000000000000..07d073caf920f9
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/index.tsx
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from './custom-select';
+import type { CustomSelectProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import Item from './item';
+
+function CustomSelectControlV2(
+	props: WordPressComponentProps< CustomSelectProps, 'button', false >
+) {
+	const { defaultValue, onChange, value, ...restProps } = props;
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	return <_CustomSelect { ...restProps } store={ store } />;
+}
+
+CustomSelectControlV2.Item = Item;
+
+export default CustomSelectControlV2;
diff --git a/packages/components/src/custom-select-control-v2/item.tsx b/packages/components/src/custom-select-control-v2/item.tsx
new file mode 100644
index 00000000000000..ade187bb603e98
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/item.tsx
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { Icon, check } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import type { CustomSelectItemProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import * as Styled from './styles';
+import { CustomSelectContext } from './custom-select';
+
+export function CustomSelectItem( {
+	children,
+	...props
+}: WordPressComponentProps< CustomSelectItemProps, 'div', false > ) {
+	const customSelectContext = useContext( CustomSelectContext );
+	return (
+		<Styled.SelectItem
+			store={ customSelectContext?.store }
+			size={ customSelectContext?.size ?? 'default' }
+			{ ...props }
+		>
+			{ children ?? props.value }
+			<Styled.SelectedItemCheck>
+				<Icon icon={ check } />
+			</Styled.SelectedItemCheck>
+		</Styled.SelectItem>
+	);
+}
+
+CustomSelectItem.displayName = 'CustomSelectControlV2.Item';
+
+export default CustomSelectItem;
diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
new file mode 100644
index 00000000000000..75226314af8dbd
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomSelectControlV2 from '..';
+
+const meta: Meta< typeof CustomSelectControlV2 > = {
+	title: 'Components/Selection & Input/Common/CustomSelectControl v2',
+	id: 'components-customselectcontrol-v2',
+	component: CustomSelectControlV2,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CustomSelectControlV2.Item': CustomSelectControlV2.Item,
+	},
+	argTypes: {
+		children: { control: false },
+		value: { control: false },
+	},
+	tags: [ 'status-wip' ],
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelectControlV2 > = ( props ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelectControlV2
+			{ ...props }
+			onChange={ ( nextValue: string | string[] ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label text',
+	defaultValue: 'Select a color...',
+	children: (
+		<>
+			<CustomSelectControlV2.Item value="Blue">
+				<span style={ { color: 'blue' } }>Blue</span>
+			</CustomSelectControlV2.Item>
+			<CustomSelectControlV2.Item value="Purple">
+				<span style={ { color: 'purple' } }>Purple</span>
+			</CustomSelectControlV2.Item>
+			<CustomSelectControlV2.Item value="Pink">
+				<span style={ { color: 'deeppink' } }>Pink</span>
+			</CustomSelectControlV2.Item>
+		</>
+	),
+};
+
+/**
+ * Multiple selection can be enabled by using an array for the `value` and
+ * `defaultValue` props. The argument type of the `onChange` function will also
+ * change accordingly.
+ */
+export const MultipleSelection = Template.bind( {} );
+MultipleSelection.args = {
+	label: 'Select Colors',
+	defaultValue: [ 'lavender', 'tangerine' ],
+	children: (
+		<>
+			{ [
+				'amber',
+				'aquamarine',
+				'flamingo pink',
+				'lavender',
+				'maroon',
+				'tangerine',
+			].map( ( item ) => (
+				<CustomSelectControlV2.Item key={ item } value={ item }>
+					{ item }
+				</CustomSelectControlV2.Item>
+			) ) }
+		</>
+	),
+};
+
+const renderItem = ( gravatar: string | string[] ) => {
+	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
+	return (
+		<div style={ { display: 'flex', alignItems: 'center' } }>
+			<img
+				style={ { maxHeight: '75px', marginRight: '10px' } }
+				src={ avatar }
+				alt=""
+			/>
+			<span>{ gravatar }</span>
+		</div>
+	);
+};
+
+/**
+ * The `renderSelectedValue` prop can be used to customize how the selected value
+ * is rendered in the dropdown trigger.
+ */
+export const CustomSelectedValue = Template.bind( {} );
+CustomSelectedValue.args = {
+	label: 'Default Gravatars',
+	renderSelectedValue: renderItem,
+	children: (
+		<>
+			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
+				( option ) => (
+					<CustomSelectControlV2.Item key={ option } value={ option }>
+						{ renderItem( option ) }
+					</CustomSelectControlV2.Item>
+				)
+			) }
+		</>
+	),
+};
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
new file mode 100644
index 00000000000000..2b8bdb9946b7c9
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -0,0 +1,231 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+import { space } from '../utils/space';
+import { chevronIconSize } from '../select-control/styles/select-control-styles';
+import { fontSizeStyles } from '../input-control/styles/input-control-styles';
+import type { CustomSelectButtonSize } from './types';
+
+// TODO: extract to common utils and apply to relevant components
+const ANIMATION_PARAMS = {
+	SLIDE_AMOUNT: '2px',
+	DURATION: '400ms',
+	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
+};
+
+const INLINE_PADDING = {
+	compact: CONFIG.controlPaddingXSmall,
+	small: CONFIG.controlPaddingXSmall,
+	default: CONFIG.controlPaddingX,
+};
+
+const getSelectSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >,
+	heightProperty: 'minHeight' | 'height'
+) => {
+	const sizes = {
+		compact: {
+			[ heightProperty ]: 32,
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact + chevronIconSize,
+		},
+		default: {
+			[ heightProperty ]: 40,
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default + chevronIconSize,
+		},
+		small: {
+			[ heightProperty ]: 24,
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small + chevronIconSize,
+		},
+	};
+
+	return sizes[ size ] || sizes.default;
+};
+
+const getSelectItemSize = (
+	size: NonNullable< CustomSelectButtonSize[ 'size' ] >
+) => {
+	// Used to visually align the checkmark with the chevron
+	const checkmarkCorrection = 6;
+	const sizes = {
+		compact: {
+			paddingInlineStart: INLINE_PADDING.compact,
+			paddingInlineEnd: INLINE_PADDING.compact - checkmarkCorrection,
+		},
+		default: {
+			paddingInlineStart: INLINE_PADDING.default,
+			paddingInlineEnd: INLINE_PADDING.default - checkmarkCorrection,
+		},
+		small: {
+			paddingInlineStart: INLINE_PADDING.small,
+			paddingInlineEnd: INLINE_PADDING.small - checkmarkCorrection,
+		},
+	};
+
+	return sizes[ size ] || sizes.default;
+};
+
+export const Select = styled( Ariakit.Select, {
+	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
+} )(
+	( {
+		size,
+		hasCustomRenderProp,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+		hasCustomRenderProp: boolean;
+	} ) => css`
+		display: block;
+		background-color: ${ COLORS.theme.background };
+		border: none;
+		color: ${ COLORS.theme.foreground };
+		cursor: pointer;
+		font-family: inherit;
+		text-align: start;
+		user-select: none;
+		width: 100%;
+
+		&[data-focus-visible] {
+			outline: none; // handled by InputBase component
+		}
+
+		${ getSelectSize( size, hasCustomRenderProp ? 'minHeight' : 'height' ) }
+		${ ! hasCustomRenderProp && truncateStyles }
+		${ fontSizeStyles( { inputSize: size } ) }
+	`
+);
+
+const slideDownAndFade = keyframes( {
+	'0%': {
+		opacity: 0,
+		transform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,
+	},
+	'100%': { opacity: 1, transform: 'translateY(0)' },
+} );
+
+export const SelectPopover = styled( Ariakit.SelectPopover )`
+	display: flex;
+	flex-direction: column;
+
+	background-color: ${ COLORS.theme.background };
+	border-radius: ${ CONFIG.radiusSmall };
+	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
+
+	/* z-index(".components-popover") */
+	z-index: 1000000;
+
+	max-height: min( var( --popover-available-height, 400px ), 400px );
+	overflow: auto;
+	overscroll-behavior: contain;
+
+	/* The smallest size without overflowing the container. */
+	min-width: min-content;
+
+	/* Animation */
+	&[data-open] {
+		@media not ( prefers-reduced-motion ) {
+			animation-duration: ${ ANIMATION_PARAMS.DURATION };
+			animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+			animation-name: ${ slideDownAndFade };
+			will-change: transform, opacity;
+		}
+	}
+
+	&[data-focus-visible] {
+		/* The outline will be on the trigger, rather than the popover. */
+		outline: none;
+	}
+`;
+
+export const SelectItem = styled( Ariakit.SelectItem )(
+	( {
+		size,
+	}: {
+		size: NonNullable< CustomSelectButtonSize[ 'size' ] >;
+	} ) => css`
+		cursor: default;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: ${ CONFIG.fontSize };
+		// TODO: reassess line-height for non-legacy v2
+		line-height: 28px;
+		padding-block: ${ space( 2 ) };
+		scroll-margin: ${ space( 1 ) };
+		user-select: none;
+
+		&[aria-disabled='true'] {
+			cursor: not-allowed;
+		}
+
+		&[data-active-item] {
+			background-color: ${ COLORS.theme.gray[ 300 ] };
+		}
+
+		${ getSelectItemSize( size ) }
+	`
+);
+
+const truncateStyles = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;
+
+export const SelectedExperimentalHintWrapper = styled.div`
+	${ truncateStyles }
+`;
+
+export const SelectedExperimentalHintItem = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	margin-inline-start: ${ space( 2 ) };
+`;
+
+export const WithHintItemWrapper = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	flex: 1;
+	column-gap: ${ space( 4 ) };
+`;
+
+export const WithHintItemHint = styled.span`
+	color: ${ COLORS.theme.gray[ 600 ] };
+	text-align: initial;
+	line-height: ${ CONFIG.fontLineHeightBase };
+	padding-inline-end: ${ space( 1 ) };
+	margin-block: ${ space( 1 ) };
+`;
+
+export const SelectedItemCheck = styled( Ariakit.SelectItemCheck )`
+	display: flex;
+	align-items: center;
+	margin-inline-start: ${ space( 2 ) };
+
+	// Keep the checkmark vertically aligned at the top. Since the item text has a
+	// 28px line height and the checkmark is 24px tall, a (28-24)/2 = 2px margin
+	// is applied to keep the correct alignment between the text and the checkmark.
+	align-self: start;
+	margin-block-start: 2px;
+
+	// Since the checkmark's dimensions are applied with 'em' units, setting a
+	// font size of 0 allows the space reserved for the checkmark to collapse for
+	// items that are not selected or that don't have an associated item hint.
+	font-size: 0;
+	${ WithHintItemWrapper } ~ &,
+	&:not(:empty) {
+		font-size: 24px; // Size of checkmark icon
+	}
+`;
diff --git a/packages/components/src/custom-select-control-v2/test/index.tsx b/packages/components/src/custom-select-control-v2/test/index.tsx
new file mode 100644
index 00000000000000..060a367ba8597b
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/test/index.tsx
@@ -0,0 +1,445 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import { click, press, type } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import UncontrolledCustomSelectControlV2 from '..';
+import type { CustomSelectProps } from '../types';
+
+const items = [
+	{
+		key: 'flower1',
+		value: 'violets',
+	},
+	{
+		key: 'flower2',
+		value: 'crimson clover',
+	},
+	{
+		key: 'flower3',
+		value: 'poppy',
+	},
+	{
+		key: 'color1',
+		value: 'amber',
+	},
+	{
+		key: 'color2',
+		value: 'aquamarine',
+	},
+];
+
+const defaultProps = {
+	label: 'label!',
+	children: items.map( ( { value, key } ) => (
+		<UncontrolledCustomSelectControlV2.Item value={ value } key={ key } />
+	) ),
+};
+
+const ControlledCustomSelectControl = ( props: CustomSelectProps ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<UncontrolledCustomSelectControlV2
+			{ ...props }
+			onChange={ ( nextValue: string | string[] ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+describe.each( [
+	[ 'Uncontrolled', UncontrolledCustomSelectControlV2 ],
+	[ 'Controlled', ControlledCustomSelectControl ],
+] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		await render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'crimson clover',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'poppy',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'poppy' );
+	} );
+
+	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
+		await render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await press.Tab();
+		await press.Enter();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+
+		await press.Escape();
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: defaultProps.label,
+			} )
+		).not.toBeInTheDocument();
+
+		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
+	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Should be able to change selection using keyboard', async () => {
+			await render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: defaultProps.label,
+				} )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			await press.Enter();
+
+			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+		} );
+
+		it( 'Should be able to type characters to select matching options', async () => {
+			await render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: defaultProps.label,
+				} )
+			).toHaveFocus();
+
+			await type( 'a' );
+			await press.Enter();
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
+			await render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
+
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
+
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: defaultProps.label,
+					hidden: true,
+				} )
+			).not.toBeInTheDocument();
+
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
+			await press.Enter();
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Should have correct aria-selected value for selections', async () => {
+			await render( <Component { ...defaultProps } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await click( currentSelectedItem );
+
+			// assert that first item has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'violets',
+					selected: true,
+				} )
+			).toBeVisible();
+
+			// change the current selection
+			await click( screen.getByRole( 'option', { name: 'poppy' } ) );
+
+			// click combobox to mount listbox with options again
+			await click( currentSelectedItem );
+
+			// check that first item is has aria-selected="false" after new selection
+			expect(
+				screen.getByRole( 'option', {
+					name: 'violets',
+					selected: false,
+				} )
+			).toBeVisible();
+
+			// check that new selected item now has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'poppy',
+					selected: true,
+				} )
+			).toBeVisible();
+		} );
+	} );
+
+	describe( 'Multiple selection', () => {
+		it( 'Should be able to select multiple items when provided an array', async () => {
+			const onChangeMock = jest.fn();
+
+			// initial selection as defaultValue
+			const defaultValues = [
+				'incandescent glow',
+				'ultraviolet morning light',
+			];
+
+			await render(
+				<Component
+					defaultValue={ defaultValues }
+					onChange={ onChangeMock }
+					label="Multi-select"
+				>
+					{ [
+						'aurora borealis green',
+						'flamingo pink sunrise',
+						'incandescent glow',
+						'rose blush',
+						'ultraviolet morning light',
+					].map( ( item ) => (
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
+							{ item }
+						</UncontrolledCustomSelectControlV2.Item>
+					) ) }
+				</Component>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			// ensure more than one item is selected due to defaultValues
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${ defaultValues.length } items selected`
+			);
+
+			await click( currentSelectedItem );
+
+			expect( screen.getByRole( 'listbox' ) ).toHaveAttribute(
+				'aria-multiselectable'
+			);
+
+			// ensure defaultValues are selected in list of items
+			defaultValues.forEach( ( value ) =>
+				expect(
+					screen.getByRole( 'option', {
+						name: value,
+						selected: true,
+					} )
+				).toBeVisible()
+			);
+
+			// name of next selection
+			const nextSelectionName = 'rose blush';
+
+			// element for next selection
+			const nextSelection = screen.getByRole( 'option', {
+				name: nextSelectionName,
+			} );
+
+			// click next selection to add another item to current selection
+			await click( nextSelection );
+
+			// updated array containing defaultValues + the item just selected
+			const updatedSelection = defaultValues.concat( nextSelectionName );
+
+			expect( onChangeMock ).toHaveBeenCalledWith( updatedSelection );
+
+			expect( nextSelection ).toHaveAttribute( 'aria-selected' );
+
+			// expect increased array length for current selection
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${ updatedSelection.length } items selected`
+			);
+		} );
+
+		it( 'Should be able to deselect items when provided an array', async () => {
+			// initial selection as defaultValue
+			const defaultValues = [
+				'aurora borealis green',
+				'incandescent glow',
+				'key lime green',
+				'rose blush',
+				'ultraviolet morning light',
+			];
+
+			await render(
+				<Component defaultValue={ defaultValues } label="Multi-select">
+					{ defaultValues.map( ( item ) => (
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
+							{ item }
+						</UncontrolledCustomSelectControlV2.Item>
+					) ) }
+				</Component>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await click( currentSelectedItem );
+
+			// Array containing items to deselect
+			const nextSelection = [
+				'aurora borealis green',
+				'rose blush',
+				'incandescent glow',
+			];
+
+			// Deselect some items by clicking them to ensure that changes
+			// are reflected correctly
+			await Promise.all(
+				nextSelection.map( async ( value ) => {
+					await click(
+						screen.getByRole( 'option', { name: value } )
+					);
+					expect(
+						screen.getByRole( 'option', {
+							name: value,
+							selected: false,
+						} )
+					).toBeVisible();
+				} )
+			);
+
+			// expect different array length from defaultValues due to deselecting items
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${
+					defaultValues.length - nextSelection.length
+				} items selected`
+			);
+		} );
+	} );
+
+	it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
+		const renderValue = ( value: string | string[] ) => {
+			return <img src={ `${ value }.jpg` } alt={ value as string } />;
+		};
+
+		await render(
+			<Component label="Rendered" renderSelectedValue={ renderValue }>
+				<UncontrolledCustomSelectControlV2.Item value="april-29">
+					{ renderValue( 'april-29' ) }
+				</UncontrolledCustomSelectControlV2.Item>
+				<UncontrolledCustomSelectControlV2.Item value="july-9">
+					{ renderValue( 'july-9' ) }
+				</UncontrolledCustomSelectControlV2.Item>
+			</Component>
+		);
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		expect( currentSelectedItem ).toBeVisible();
+
+		// expect that the initial selection renders an image
+		expect( currentSelectedItem ).toContainElement(
+			screen.getByRole( 'img', { name: 'april-29' } )
+		);
+
+		expect(
+			screen.queryByRole( 'img', { name: 'july-9' } )
+		).not.toBeInTheDocument();
+
+		await click( currentSelectedItem );
+
+		// expect that the other image is only visible after opening popover with options
+		expect( screen.getByRole( 'img', { name: 'july-9' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'option', { name: 'july-9' } )
+		).toBeVisible();
+	} );
+
+	it( 'Should open the select popover when focussing the trigger button and pressing arrow down', async () => {
+		await render( <Component { ...defaultProps } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await press.Tab();
+		expect( currentSelectedItem ).toHaveFocus();
+		expect( currentSelectedItem ).toHaveTextContent( items[ 0 ].value );
+
+		await press.ArrowDown();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'Should label the component correctly even when the label is not visible', async () => {
+		await render( <Component { ...defaultProps } hideLabelFromVision /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				name: defaultProps.label,
+			} )
+		).toBeVisible();
+	} );
+} );
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
new file mode 100644
index 00000000000000..a31598c1db3ead
--- /dev/null
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+export type CustomSelectStore = {
+	/**
+	 * The store object returned by Ariakit's `useSelectStore` hook.
+	 */
+	store: Ariakit.SelectStore;
+};
+
+type CustomSelectSize< Size = 'compact' | 'default' > = {
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: Size;
+};
+
+export type CustomSelectButtonSize = CustomSelectSize<
+	'compact' | 'default' | 'small'
+>;
+
+export type CustomSelectContext =
+	| ( CustomSelectStore & CustomSelectButtonSize )
+	| undefined;
+
+export type CustomSelectButtonProps = {
+	/**
+	 * An optional default value for the control when used in uncontrolled mode.
+	 * If left `undefined`, the first non-disabled item will be used.
+	 */
+	defaultValue?: string | string[];
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange?: ( newValue: string | string[] ) => void;
+	/**
+	 * Can be used to render select UI with custom styled values.
+	 */
+	renderSelectedValue?: (
+		selectedValue: string | string[]
+	) => React.ReactNode;
+	/**
+	 * The value of the control when used in uncontrolled mode.
+	 */
+	value?: string | string[];
+};
+
+// Props only exposed on the internal implementation
+export type _CustomSelectInternalProps = {
+	/**
+	 * True if the consumer is emulating the legacy component behavior and look
+	 */
+	isLegacy?: boolean;
+};
+
+// Props that are exposed in exported components
+export type _CustomSelectProps = CustomSelectButtonProps & {
+	/**
+	 * Additional className added to the root wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The child elements. This should be composed of `CustomSelectItem` components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Used to visually hide the label. It will always be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Accessible label for the control.
+	 */
+	label: string;
+};
+
+export type CustomSelectProps = _CustomSelectProps & CustomSelectSize;
+
+export type CustomSelectItemProps = {
+	/**
+	 * The value of the select item. This will be used as the children if
+	 * children are left `undefined`.
+	 */
+	value: string;
+	/**
+	 * The children to display for each select item. The `value` will be
+	 * used if left `undefined`.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * If true, the item will be disabled.
+	 *
+	 * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.
+	 * @default false
+	 */
+	disabled?: boolean;
+};
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index 8144a7cfa59609..6c175b1fcc5d24 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -2,12 +2,6 @@
 
 `CustomSelectControl` allows users to select an item from a single-option menu just like [`SelectControl`](/packages/components/src/select-control/readme.md), with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native `<select>`, so should only be used if the custom styling is necessary.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 These are the same as [the ones for `SelectControl`s](/packages/components/src/select-control/readme.md#design-guidelines).
@@ -17,11 +11,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
 ### Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
+import { useState } from 'react';
 import { CustomSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const options = [
 	{
@@ -50,7 +41,7 @@ function MyCustomSelectControl() {
 	const [ , setFontSize ] = useState();
 	return (
 		<CustomSelectControl
-			__nextUnconstrainedWidth
+			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -62,7 +53,7 @@ function MyControlledCustomSelectControl() {
 	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
 	return (
 		<CustomSelectControl
-			__nextUnconstrainedWidth
+			__next40pxDefaultSize
 			label="Font Size"
 			options={ options }
 			onChange={ ( { selectedItem } ) => setFontSize( selectedItem ) }
@@ -74,77 +65,92 @@ function MyControlledCustomSelectControl() {
 
 ### Props
 
-#### className
+#### `className`: `string`
+
+Optional classname for the component.
+
+-   Required: No
+
+#### `hideLabelFromVision`: `boolean`
 
-A custom class name to append to the outer `<div>`.
+Hide the label visually, while keeping available to assistive technology.
 
--   Type: `String`
 -   Required: No
 
-#### hideLabelFromVision
+#### `describedBy`: `string`
 
-Used to visually hide the label. It will always be visible to screen readers.
+Description for the select trigger button used by assistive technology. If no value is passed, the text "Currently selected: selectedItem.name" will be used fully translated.
 
--   Type: `Boolean`
 -   Required: No
 
-#### label
+#### `label`: `string`
 
-The label for the control.
+Label for the control.
 
--   Type: `String`
 -   Required: Yes
 
-#### describedBy
+#### `onChange`: `( newValue: ChangeObject ) => void`
 
-Pass in a description that will be shown to screen readers associated with the select trigger button. If no value is passed, the text "Currently selected: selectedItem.name" will be used fully translated.
+Function called with the control's internal state changes. The `selectedItem` property contains the next selected item.
 
--   Type: `String`
 -   Required: No
 
-#### options
+#### `options`: `Array< Option >`
 
-The options that can be chosen from.
+The list of options that can be chosen from.
 
--   Type: `Array<{ key: String, name: String, style: ?{}, className: ?String, ...rest }>`
 -   Required: Yes
 
-#### onChange
+#### `size`: `'default' | 'small' | '\_\_unstable-large'`
 
-Function called with the control's internal state changes. The `selectedItem` property contains the next selected item.
+The size of the control.
 
--   Type: `Function`
+-   Default: `'default'`
 -   Required: No
 
-#### value
+#### `showSelectedHint`: `boolean`
+
+Show the hint of the selected item in the trigger button.
+
+-   Required: No
+
+#### `value`: `Option`
 
 Can be used to externally control the value of the control, like in the `MyControlledCustomSelectControl` example above.
 
--   Type: `Object`
 -   Required: No
 
-#### __nextUnconstrainedWidth
+#### `onMouseOver`: `MouseEventHandler< HTMLButtonElement >`
 
-Start opting into the unconstrained width style that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+A handler for `mouseover` events on the trigger button.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
-#### onMouseOver
+#### `onMouseOut`: `MouseEventHandler< HTMLButtonElement >`
 
-A handler for onMouseOver events.
+A handler for `mouseout` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
-#### onMouseOut
+#### `onFocus`: `FocusEventHandler< HTMLButtonElement >`
 
-A handler for onMouseOut events.
+A handler for `focus` events on the trigger button.
 
--   Type: `Function`
 -   Required: No
 
+#### `onBlur`: `FocusEventHandler< HTMLButtonElement >`
+
+A handler for `blur` events on the trigger button.
+
+-   Required: No
+
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
deleted file mode 100644
index 337c86e8422d45..00000000000000
--- a/packages/components/src/custom-select-control/index.js
+++ /dev/null
@@ -1,247 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { useSelect } from 'downshift';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useState } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '../visually-hidden';
-import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
-import SelectControlChevronDown from '../select-control/chevron-down';
-import { InputBaseWithBackCompatMinWidth } from './styles';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
-
-const itemToString = ( item ) => item?.name;
-// This is needed so that in Windows, where
-// the menu does not necessarily open on
-// key up/down, you can still switch between
-// options with the menu closed.
-const stateReducer = (
-	{ selectedItem },
-	{ type, changes, props: { items } }
-) => {
-	switch ( type ) {
-		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
-			// If we already have a selected item, try to select the next one,
-			// without circular navigation. Otherwise, select the first item.
-			return {
-				selectedItem:
-					items[
-						selectedItem
-							? Math.min(
-									items.indexOf( selectedItem ) + 1,
-									items.length - 1
-							  )
-							: 0
-					],
-			};
-		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-			// If we already have a selected item, try to select the previous one,
-			// without circular navigation. Otherwise, select the last item.
-			return {
-				selectedItem:
-					items[
-						selectedItem
-							? Math.max( items.indexOf( selectedItem ) - 1, 0 )
-							: items.length - 1
-					],
-			};
-		default:
-			return changes;
-	}
-};
-
-export default function CustomSelectControl( props ) {
-	const {
-		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next36pxDefaultSize = false,
-		/** Start opting into the unconstrained width that will become the default in a future version. */
-		__nextUnconstrainedWidth = false,
-		className,
-		hideLabelFromVision,
-		label,
-		describedBy,
-		options: items,
-		onChange: onSelectedItemChange,
-		/** @type {import('../select-control/types').SelectControlProps.size} */
-		size = 'default',
-		value: _selectedItem,
-		onMouseOver,
-		onMouseOut,
-		__experimentalShowSelectedHint = false,
-	} = props;
-
-	const {
-		getLabelProps,
-		getToggleButtonProps,
-		getMenuProps,
-		getItemProps,
-		isOpen,
-		highlightedIndex,
-		selectedItem,
-	} = useSelect( {
-		initialSelectedItem: items[ 0 ],
-		items,
-		itemToString,
-		onSelectedItemChange,
-		...( typeof _selectedItem !== 'undefined' && _selectedItem !== null
-			? { selectedItem: _selectedItem }
-			: undefined ),
-		stateReducer,
-	} );
-
-	const [ isFocused, setIsFocused ] = useState( false );
-
-	if ( ! __nextUnconstrainedWidth ) {
-		deprecated(
-			'Constrained width styles for wp.components.CustomSelectControl',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
-	function getDescribedBy() {
-		if ( describedBy ) {
-			return describedBy;
-		}
-
-		if ( ! selectedItem ) {
-			return __( 'No selection' );
-		}
-
-		// translators: %s: The selected option.
-		return sprintf( __( 'Currently selected: %s' ), selectedItem.name );
-	}
-
-	const menuProps = getMenuProps( {
-		className: 'components-custom-select-control__menu',
-		'aria-hidden': ! isOpen,
-	} );
-
-	const onKeyDownHandler = useCallback(
-		( e ) => {
-			e.stopPropagation();
-			menuProps?.onKeyDown?.( e );
-		},
-		[ menuProps ]
-	);
-
-	// We need this here, because the null active descendant is not fully ARIA compliant.
-	if (
-		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
-	) {
-		delete menuProps[ 'aria-activedescendant' ];
-	}
-	return (
-		<div
-			className={ classnames(
-				'components-custom-select-control',
-				className
-			) }
-		>
-			{ hideLabelFromVision ? (
-				<VisuallyHidden as="label" { ...getLabelProps() }>
-					{ label }
-				</VisuallyHidden>
-			) : (
-				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-				<StyledLabel
-					{ ...getLabelProps( {
-						className: 'components-custom-select-control__label',
-					} ) }
-				>
-					{ label }
-				</StyledLabel>
-			) }
-			<InputBaseWithBackCompatMinWidth
-				__next36pxDefaultSize={ __next36pxDefaultSize }
-				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
-				isFocused={ isOpen || isFocused }
-				__unstableInputWidth={
-					__nextUnconstrainedWidth ? undefined : 'auto'
-				}
-				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
-				size={ size }
-				suffix={ <SelectControlChevronDown /> }
-			>
-				<SelectControlSelect
-					onMouseOver={ onMouseOver }
-					onMouseOut={ onMouseOut }
-					as="button"
-					onFocus={ () => setIsFocused( true ) }
-					onBlur={ () => setIsFocused( false ) }
-					selectSize={ size }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
-					{ ...getToggleButtonProps( {
-						// This is needed because some speech recognition software don't support `aria-labelledby`.
-						'aria-label': label,
-						'aria-labelledby': undefined,
-						className: 'components-custom-select-control__button',
-						describedBy: getDescribedBy(),
-					} ) }
-				>
-					{ itemToString( selectedItem ) }
-					{ __experimentalShowSelectedHint &&
-						selectedItem.__experimentalHint && (
-							<span className="components-custom-select-control__hint">
-								{ selectedItem.__experimentalHint }
-							</span>
-						) }
-				</SelectControlSelect>
-			</InputBaseWithBackCompatMinWidth>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
-				{ isOpen &&
-					items.map( ( item, index ) => (
-						// eslint-disable-next-line react/jsx-key
-						<li
-							{ ...getItemProps( {
-								item,
-								index,
-								key: item.key,
-								className: classnames(
-									item.className,
-									'components-custom-select-control__item',
-									{
-										'is-highlighted':
-											index === highlightedIndex,
-										'has-hint': !! item.__experimentalHint,
-										'is-next-36px-default-size':
-											__next36pxDefaultSize,
-									}
-								),
-								style: item.style,
-							} ) }
-						>
-							{ item.name }
-							{ item.__experimentalHint && (
-								<span className="components-custom-select-control__item-hint">
-									{ item.__experimentalHint }
-								</span>
-							) }
-							{ item === selectedItem && (
-								<Icon
-									icon={ check }
-									className="components-custom-select-control__item-icon"
-								/>
-							) }
-						</li>
-					) ) }
-			</ul>
-		</div>
-	);
-}
diff --git a/packages/components/src/custom-select-control/index.tsx b/packages/components/src/custom-select-control/index.tsx
new file mode 100644
index 00000000000000..74da8a5c741060
--- /dev/null
+++ b/packages/components/src/custom-select-control/index.tsx
@@ -0,0 +1,215 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import _CustomSelect from '../custom-select-control-v2/custom-select';
+import CustomSelectItem from '../custom-select-control-v2/item';
+import * as Styled from '../custom-select-control-v2/styles';
+import type { CustomSelectProps, CustomSelectOption } from './types';
+import { VisuallyHidden } from '../visually-hidden';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+function useDeprecatedProps< T extends CustomSelectOption >( {
+	__experimentalShowSelectedHint,
+	...otherProps
+}: CustomSelectProps< T > ) {
+	return {
+		showSelectedHint: __experimentalShowSelectedHint,
+		...otherProps,
+	};
+}
+
+// The removal of `__experimentalHint` in favour of `hint` doesn't happen in
+// the `useDeprecatedProps` hook in order not to break consumers that rely
+// on object identity (see https://github.com/WordPress/gutenberg/pull/63248#discussion_r1672213131)
+function applyOptionDeprecations( {
+	__experimentalHint,
+	...rest
+}: CustomSelectOption ) {
+	return {
+		hint: __experimentalHint,
+		...rest,
+	};
+}
+
+function getDescribedBy( currentValue: string, describedBy?: string ) {
+	if ( describedBy ) {
+		return describedBy;
+	}
+
+	// translators: %s: The selected option.
+	return sprintf( __( 'Currently selected: %s' ), currentValue );
+}
+
+function CustomSelectControl< T extends CustomSelectOption >(
+	props: CustomSelectProps< T >
+) {
+	const {
+		__next40pxDefaultSize = false,
+		__shouldNotWarnDeprecated36pxSize,
+		describedBy,
+		options,
+		onChange,
+		size = 'default',
+		value,
+		className: classNameProp,
+		showSelectedHint = false,
+		...restProps
+	} = useDeprecatedProps( props );
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'CustomSelectControl',
+		__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
+	const descriptionId = useInstanceId(
+		CustomSelectControl,
+		'custom-select-control__description'
+	);
+
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore< string >( {
+		async setValue( nextValue ) {
+			const nextOption = options.find(
+				( item ) => item.name === nextValue
+			);
+
+			if ( ! onChange || ! nextOption ) {
+				return;
+			}
+
+			// Executes the logic in a microtask after the popup is closed.
+			// This is simply to ensure the isOpen state matches the one from the
+			// previous legacy implementation.
+			await Promise.resolve();
+			const state = store.getState();
+
+			const changeObject = {
+				highlightedIndex: state.renderedItems.findIndex(
+					( item ) => item.value === nextValue
+				),
+				inputValue: '',
+				isOpen: state.open,
+				selectedItem: nextOption,
+				type: '',
+			};
+			onChange( changeObject );
+		},
+		value: value?.name,
+		// Setting the first option as a default value when no value is provided
+		// is already done natively by the underlying Ariakit component,
+		// but doing this explicitly avoids the `onChange` callback from firing
+		// on initial render, thus making this implementation closer to the v1.
+		defaultValue: options[ 0 ]?.name,
+	} );
+
+	const children = options
+		.map( applyOptionDeprecations )
+		.map( ( { name, key, hint, style, className } ) => {
+			const withHint = (
+				<Styled.WithHintItemWrapper>
+					<span>{ name }</span>
+					<Styled.WithHintItemHint
+						// Keeping the classname for legacy reasons
+						className="components-custom-select-control__item-hint"
+					>
+						{ hint }
+					</Styled.WithHintItemHint>
+				</Styled.WithHintItemWrapper>
+			);
+
+			return (
+				<CustomSelectItem
+					key={ key }
+					value={ name }
+					children={ hint ? withHint : name }
+					style={ style }
+					className={ clsx(
+						className,
+						// Keeping the classnames for legacy reasons
+						'components-custom-select-control__item',
+						{
+							'has-hint': hint,
+						}
+					) }
+				/>
+			);
+		} );
+
+	const { value: currentValue } = store.getState();
+
+	const renderSelectedValueHint = () => {
+		const selectedOptionHint = options
+			?.map( applyOptionDeprecations )
+			?.find( ( { name } ) => currentValue === name )?.hint;
+
+		return (
+			<Styled.SelectedExperimentalHintWrapper>
+				{ currentValue }
+				{ selectedOptionHint && (
+					<Styled.SelectedExperimentalHintItem
+						// Keeping the classname for legacy reasons
+						className="components-custom-select-control__hint"
+					>
+						{ selectedOptionHint }
+					</Styled.SelectedExperimentalHintItem>
+				) }
+			</Styled.SelectedExperimentalHintWrapper>
+		);
+	};
+
+	const translatedSize = ( () => {
+		if (
+			( __next40pxDefaultSize && size === 'default' ) ||
+			size === '__unstable-large'
+		) {
+			return 'default';
+		}
+		if ( ! __next40pxDefaultSize && size === 'default' ) {
+			return 'compact';
+		}
+		return size;
+	} )();
+
+	return (
+		<>
+			<_CustomSelect
+				aria-describedby={ descriptionId }
+				renderSelectedValue={
+					showSelectedHint ? renderSelectedValueHint : undefined
+				}
+				size={ translatedSize }
+				store={ store }
+				className={ clsx(
+					// Keeping the classname for legacy reasons
+					'components-custom-select-control',
+					classNameProp
+				) }
+				isLegacy
+				{ ...restProps }
+			>
+				{ children }
+			</_CustomSelect>
+			<VisuallyHidden>
+				<span id={ descriptionId }>
+					{ getDescribedBy( currentValue, describedBy ) }
+				</span>
+			</VisuallyHidden>
+		</>
+	);
+}
+
+export default CustomSelectControl;
diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js
deleted file mode 100644
index 4891bcf2109378..00000000000000
--- a/packages/components/src/custom-select-control/stories/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Internal dependencies
- */
-import CustomSelectControl from '../';
-
-export default {
-	title: 'Components/CustomSelectControl',
-	component: CustomSelectControl,
-	argTypes: {
-		__next36pxDefaultSize: { control: { type: 'boolean' } },
-		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
-		size: {
-			control: {
-				type: 'radio',
-				options: [ 'small', 'default', '__unstable-large' ],
-			},
-		},
-	},
-};
-
-export const Default = CustomSelectControl.bind( {} );
-Default.args = {
-	__nextUnconstrainedWidth: true,
-	label: 'Label',
-	options: [
-		{
-			key: 'small',
-			name: 'Small',
-			style: { fontSize: '50%' },
-		},
-		{
-			key: 'normal',
-			name: 'Normal',
-			style: { fontSize: '100%' },
-			className: 'can-apply-custom-class-to-option',
-		},
-		{
-			key: 'large',
-			name: 'Large',
-			style: { fontSize: '200%' },
-		},
-		{
-			key: 'huge',
-			name: 'Huge',
-			style: { fontSize: '300%' },
-		},
-	],
-};
-
-export const WithLongLabels = CustomSelectControl.bind( {} );
-WithLongLabels.args = {
-	...Default.args,
-	options: [
-		{
-			key: 'reallylonglabel1',
-			name: 'Really long labels are good for stress testing',
-		},
-		{
-			key: 'reallylonglabel2',
-			name: 'But they can take a long time to type.',
-		},
-		{
-			key: 'reallylonglabel3',
-			name: 'That really is ok though because you should stress test your UIs.',
-		},
-	],
-};
-
-export const WithHints = CustomSelectControl.bind( {} );
-WithHints.args = {
-	...Default.args,
-	options: [
-		{
-			key: 'thumbnail',
-			name: 'Thumbnail',
-			__experimentalHint: '150x150',
-		},
-		{
-			key: 'medium',
-			name: 'Medium',
-			__experimentalHint: '250x250',
-		},
-		{
-			key: 'large',
-			name: 'Large',
-			__experimentalHint: '1024x1024',
-		},
-		{
-			key: 'full',
-			name: 'Full Size',
-			__experimentalHint: '1600x1600',
-		},
-	],
-};
diff --git a/packages/components/src/custom-select-control/stories/index.story.tsx b/packages/components/src/custom-select-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..8c5e200f7532e8
--- /dev/null
+++ b/packages/components/src/custom-select-control/stories/index.story.tsx
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CustomSelectControl from '..';
+
+const meta: Meta< typeof CustomSelectControl > = {
+	title: 'Components/Selection & Input/Common/CustomSelectControl',
+	component: CustomSelectControl,
+	id: 'components-customselectcontrol',
+	argTypes: {
+		onChange: { control: false },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
+	const [ value, setValue ] = useState( props.options[ 0 ] );
+
+	const onChange: React.ComponentProps<
+		typeof CustomSelectControl
+	>[ 'onChange' ] = ( changeObject ) => {
+		setValue( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ onChange }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__next40pxDefaultSize: true,
+	label: 'Label',
+	options: [
+		{
+			key: 'small',
+			name: 'Small',
+			style: { fontSize: '50%' },
+		},
+		{
+			key: 'normal',
+			name: 'Normal',
+			style: { fontSize: '100%' },
+			className: 'can-apply-custom-class-to-option',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			style: { fontSize: '200%' },
+		},
+		{
+			key: 'huge',
+			name: 'Huge',
+			style: { fontSize: '300%' },
+		},
+	],
+};
+
+export const WithLongLabels = Template.bind( {} );
+WithLongLabels.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'reallylonglabel1',
+			name: 'Really long labels are good for stress testing',
+		},
+		{
+			key: 'reallylonglabel2',
+			name: 'But they can take a long time to type.',
+		},
+		{
+			key: 'reallylonglabel3',
+			name: 'That really is ok though because you should stress test your UIs.',
+		},
+	],
+};
+
+export const WithHints = Template.bind( {} );
+WithHints.args = {
+	...Default.args,
+	options: [
+		{
+			key: 'thumbnail',
+			name: 'Thumbnail',
+			hint: '150x150',
+		},
+		{
+			key: 'medium',
+			name: 'Medium',
+			hint: '250x250',
+		},
+		{
+			key: 'large',
+			name: 'Large',
+			hint: '1024x1024',
+		},
+		{
+			key: 'full',
+			name: 'Full Size',
+			hint: '1600x1600',
+		},
+	],
+};
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
deleted file mode 100644
index b231218ef4b611..00000000000000
--- a/packages/components/src/custom-select-control/style.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.components-custom-select-control {
-	position: relative;
-	font-size: $default-font-size;
-}
-
-.components-custom-select-control__button {
-	position: relative;
-	text-align: left;
-	outline: 0; // focus ring is handled elsewhere
-}
-
-.components-custom-select-control__hint {
-	color: $gray-600;
-	margin-left: 10px;
-}
-
-.components-custom-select-control__menu {
-	// Hide when collapsed.
-	&[aria-hidden="true"] {
-		display: none;
-	}
-
-	// Block UI appearance.
-	border: $border-width solid $gray-900;
-	background-color: $white;
-	border-radius: $radius-block-ui;
-	outline: none;
-	transition: none;
-
-	max-height: 400px;
-	min-width: 100%;
-	overflow: auto;
-	padding: 0;
-	position: absolute;
-	z-index: z-index(".components-popover");
-}
-
-.components-custom-select-control__item {
-	align-items: center;
-	display: grid;
-	grid-template-columns: auto auto;
-	list-style-type: none;
-	padding: $grid-unit-10 $grid-unit-20;
-	cursor: default;
-	line-height: $icon-size + $grid-unit-05;
-
-	&:not(.is-next-36px-default-size) {
-		padding: $grid-unit-10;
-	}
-
-	&.has-hint {
-		grid-template-columns: auto auto 30px;
-	}
-	&.is-highlighted {
-		background: $gray-300;
-	}
-	.components-custom-select-control__item-hint {
-		color: $gray-600;
-		text-align: right;
-		padding-right: $grid-unit-05;
-	}
-	.components-custom-select-control__item-icon {
-		margin-left: auto;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
diff --git a/packages/components/src/custom-select-control/styles.ts b/packages/components/src/custom-select-control/styles.ts
deleted file mode 100644
index e16b5d0b7bdd7a..00000000000000
--- a/packages/components/src/custom-select-control/styles.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import InputBase from '../input-control/input-base';
-import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
-
-type BackCompatMinWidthProps = {
-	__nextUnconstrainedWidth: boolean;
-};
-
-const backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>
-	! props.__nextUnconstrainedWidth
-		? css`
-				${ InputControlContainer } {
-					min-width: 130px;
-				}
-		  `
-		: '';
-
-export const InputBaseWithBackCompatMinWidth = styled( InputBase )`
-	${ backCompatMinWidth }
-`;
diff --git a/packages/components/src/custom-select-control/test/index.js b/packages/components/src/custom-select-control/test/index.js
deleted file mode 100644
index 413760b63ebed7..00000000000000
--- a/packages/components/src/custom-select-control/test/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { CustomSelectControl } from '@wordpress/components';
-
-describe( 'CustomSelectControl', () => {
-	it( 'Captures the keypress event and does not let it propagate', () => {
-		const onKeyDown = jest.fn();
-		const options = [
-			{
-				key: 'one',
-				name: 'Option one',
-			},
-			{
-				key: 'two',
-				name: 'Option two',
-			},
-			{
-				key: 'three',
-				name: 'Option three',
-			},
-		];
-
-		render(
-			<div
-				// This role="none" is required to prevent an eslint warning about accessibility.
-				role="none"
-				onKeyDown={ onKeyDown }
-			>
-				<CustomSelectControl
-					options={ options }
-					__nextUnconstrainedWidth
-				/>
-			</div>
-		);
-		const toggleButton = screen.getByRole( 'button' );
-		fireEvent.click( toggleButton );
-
-		const customSelect = screen.getByRole( 'listbox' );
-		fireEvent.keyDown( customSelect );
-
-		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
-	} );
-
-	it( 'does not show selected hint by default', () => {
-		render(
-			<CustomSelectControl
-				label="Custom select"
-				options={ [
-					{
-						key: 'one',
-						name: 'One',
-						__experimentalHint: 'Hint',
-					},
-				] }
-				__nextUnconstrainedWidth
-			/>
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Custom select' } )
-		).not.toHaveTextContent( 'Hint' );
-	} );
-
-	it( 'shows selected hint when __experimentalShowSelectedHint is set', () => {
-		render(
-			<CustomSelectControl
-				label="Custom select"
-				options={ [
-					{
-						key: 'one',
-						name: 'One',
-						__experimentalHint: 'Hint',
-					},
-				] }
-				__experimentalShowSelectedHint
-				__nextUnconstrainedWidth
-			/>
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Custom select' } )
-		).toHaveTextContent( 'Hint' );
-	} );
-} );
diff --git a/packages/components/src/custom-select-control/test/index.tsx b/packages/components/src/custom-select-control/test/index.tsx
new file mode 100644
index 00000000000000..61d212c26c619e
--- /dev/null
+++ b/packages/components/src/custom-select-control/test/index.tsx
@@ -0,0 +1,820 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import { click, press, sleep, type, waitFor } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import _CustomSelectControl from '..';
+
+const UncontrolledCustomSelectControl = (
+	props: React.ComponentProps< typeof _CustomSelectControl >
+) => <_CustomSelectControl __next40pxDefaultSize { ...props } />;
+
+const customClassName = 'amber-skies';
+const customStyles = {
+	backgroundColor: 'rgb(127, 255, 212)',
+	rotate: '13deg',
+};
+
+const props = {
+	label: 'label!',
+	options: [
+		{
+			key: 'flower1',
+			name: 'violets',
+		},
+		{
+			key: 'flower2',
+			name: 'crimson clover',
+			className: customClassName,
+		},
+		{
+			key: 'flower3',
+			name: 'poppy',
+		},
+		{
+			key: 'color1',
+			name: 'amber',
+			className: customClassName,
+		},
+		{
+			key: 'color2',
+			name: 'aquamarine',
+			style: customStyles,
+		},
+		{
+			key: 'color3',
+			name: 'tomato (with custom props)',
+			className: customClassName,
+			style: customStyles,
+			// try passing a valid HTML attribute
+			'aria-label': 'test label',
+			// try adding a custom prop
+			customPropFoo: 'foo',
+		},
+	],
+};
+
+const ControlledCustomSelectControl = ( {
+	options,
+	onChange: onChangeProp,
+	...restProps
+}: React.ComponentProps< typeof UncontrolledCustomSelectControl > ) => {
+	const [ value, setValue ] = useState( restProps.value ?? options[ 0 ] );
+
+	const onChange: typeof onChangeProp = ( changeObject ) => {
+		onChangeProp?.( changeObject );
+		setValue( changeObject.selectedItem );
+	};
+
+	return (
+		<UncontrolledCustomSelectControl
+			{ ...restProps }
+			options={ options }
+			onChange={ onChange }
+			value={ options.find(
+				( option: any ) => option.key === value.key
+			) }
+		/>
+	);
+};
+
+it( 'Should apply external controlled updates', async () => {
+	const mockOnChange = jest.fn();
+	const { rerender } = await render(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 0 ] }
+			onChange={ mockOnChange }
+		/>
+	);
+
+	const currentSelectedItem = screen.getByRole( 'combobox', {
+		expanded: false,
+	} );
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 0 ].name );
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+
+	await rerender(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 1 ] }
+		/>
+	);
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 1 ].name );
+
+	// Necessary to wait for onChange to potentially fire
+	await sleep();
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+} );
+
+describe.each( [
+	[ 'Uncontrolled', UncontrolledCustomSelectControl ],
+	[ 'Controlled', ControlledCustomSelectControl ],
+] )( 'CustomSelectControl (%s)', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	it( 'Should select the first option when no explicit initial value is passed without firing onChange', async () => {
+		const mockOnChange = jest.fn();
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 0 ].name );
+
+		// Necessary to wait for onChange to potentially fire
+		await sleep();
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'Should pick the initially selected option if the value prop is passed without firing onChange', async () => {
+		const mockOnChange = jest.fn();
+		await render(
+			<Component
+				{ ...props }
+				onChange={ mockOnChange }
+				value={ props.options[ 3 ] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 3 ].name );
+
+		// Necessary to wait for onChange to potentially fire
+		await sleep();
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'Should replace the initial selection when a new item is selected', async () => {
+		await render( <Component { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'crimson clover',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+
+		await click( currentSelectedItem );
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'poppy',
+			} )
+		);
+
+		expect( currentSelectedItem ).toHaveTextContent( 'poppy' );
+	} );
+
+	it( 'Should keep current selection if dropdown is closed without changing selection', async () => {
+		await render( <Component { ...props } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await press.Tab();
+		await press.Enter();
+		expect(
+			screen.getByRole( 'listbox', {
+				name: props.label,
+			} )
+		).toBeVisible();
+
+		await press.Escape();
+		expect(
+			screen.queryByRole( 'listbox', {
+				name: props.label,
+			} )
+		).not.toBeInTheDocument();
+
+		expect( currentSelectedItem ).toHaveTextContent(
+			props.options[ 0 ].name
+		);
+	} );
+
+	it( 'Should apply class only to options that have a className defined', async () => {
+		await render( <Component { ...props } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ a className added
+		const itemsWithClass = props.options.filter(
+			( option ) => option.className !== undefined
+		);
+
+		// assert against filtered array
+		itemsWithClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
+				customClassName
+			)
+		);
+
+		// return an array of items _without_ a className added
+		const itemsWithoutClass = props.options.filter(
+			( option ) => option.className === undefined
+		);
+
+		// assert against filtered array
+		itemsWithoutClass.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
+				customClassName
+			)
+		);
+	} );
+
+	it( 'Should apply styles only to options that have styles defined', async () => {
+		await render( <Component { ...props } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		// return an array of items _with_ styles added
+		const styledItems = props.options.filter(
+			( option ) => option.style !== undefined
+		);
+
+		// assert against filtered array
+		styledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).toHaveStyle(
+				customStyles
+			)
+		);
+
+		// return an array of items _without_ styles added
+		const unstyledItems = props.options.filter(
+			( option ) => option.style === undefined
+		);
+
+		// assert against filtered array
+		unstyledItems.map( ( { name } ) =>
+			expect( screen.getByRole( 'option', { name } ) ).not.toHaveStyle(
+				customStyles
+			)
+		);
+	} );
+
+	it( 'does not show selected hint by default', async () => {
+		await render(
+			<Component
+				{ ...props }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						hint: 'Hint',
+					},
+				] }
+			/>
+		);
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'combobox', { name: 'Custom select' } )
+			).not.toHaveTextContent( 'Hint' )
+		);
+	} );
+
+	it( 'shows selected hint when showSelectedHint is set', async () => {
+		await render(
+			<Component
+				{ ...props }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						hint: 'Hint',
+					},
+				] }
+				showSelectedHint
+			/>
+		);
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'combobox', {
+					expanded: false,
+				} )
+			).toHaveTextContent( 'Hint' )
+		);
+	} );
+
+	it( 'shows selected hint in list of options when added, regardless of showSelectedHint prop', async () => {
+		await render(
+			<Component
+				{ ...props }
+				label="Custom select"
+				options={ [
+					{
+						key: 'one',
+						name: 'One',
+						hint: 'Hint',
+					},
+				] }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'combobox', { name: 'Custom select' } )
+		);
+
+		expect( screen.getByRole( 'option', { name: /hint/i } ) ).toBeVisible();
+	} );
+
+	it( 'Should return object onChange', async () => {
+		const mockOnChange = jest.fn();
+
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await click(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		);
+
+		await click(
+			screen.getByRole( 'option', {
+				name: 'aquamarine',
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				inputValue: '',
+				isOpen: false,
+				selectedItem: expect.objectContaining( {
+					name: 'aquamarine',
+				} ),
+				type: expect.any( String ),
+			} )
+		);
+	} );
+
+	it( 'Should return selectedItem object when specified onChange', async () => {
+		const mockOnChange = jest.fn();
+
+		await render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await press.Tab();
+		expect(
+			screen.getByRole( 'combobox', {
+				expanded: false,
+			} )
+		).toHaveFocus();
+
+		await type( 'p' );
+		await press.Enter();
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'flower3',
+					name: 'poppy',
+				} ),
+			} )
+		);
+	} );
+
+	it( "Should pass arbitrary props to onChange's selectedItem, but apply only style and className to DOM elements", async () => {
+		const onChangeMock = jest.fn();
+
+		await render( <Component { ...props } onChange={ onChangeMock } /> );
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		await click( currentSelectedItem );
+
+		const optionWithCustomAttributes = screen.getByRole( 'option', {
+			name: 'tomato (with custom props)',
+		} );
+
+		// Assert that the option element does not have the custom attributes
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'customPropFoo'
+		);
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'aria-label'
+		);
+
+		await click( optionWithCustomAttributes );
+
+		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'color3',
+					name: 'tomato (with custom props)',
+					className: customClassName,
+					style: customStyles,
+					'aria-label': 'test label',
+					customPropFoo: 'foo',
+				} ),
+			} )
+		);
+	} );
+
+	it( 'Should label the component correctly even when the label is not visible', async () => {
+		await render( <Component { ...props } hideLabelFromVision /> );
+
+		expect(
+			screen.getByRole( 'combobox', {
+				name: props.label,
+			} )
+		).toBeVisible();
+	} );
+
+	describe( 'Keyboard behavior and accessibility', () => {
+		it( 'Captures the keypress event and does not let it propagate', async () => {
+			const onKeyDown = jest.fn();
+
+			await render(
+				<div
+					// This role="none" is required to prevent an eslint warning about accessibility.
+					role="none"
+					onKeyDown={ onKeyDown }
+				>
+					<Component { ...props } />
+				</div>
+			);
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+			await click( currentSelectedItem );
+
+			const customSelect = screen.getByRole( 'listbox', {
+				name: props.label,
+			} );
+			expect( customSelect ).toHaveFocus();
+			await press.Enter();
+
+			expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
+		} );
+
+		it( 'Should be able to change selection using keyboard', async () => {
+			await render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: props.label,
+				} )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			await press.Enter();
+
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 1 ].name
+			);
+		} );
+
+		it( 'Should be able to type characters to select matching options', async () => {
+			await render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			await press.Enter();
+			expect(
+				screen.getByRole( 'listbox', {
+					name: props.label,
+				} )
+			).toHaveFocus();
+
+			await type( 'a' );
+			await press.Enter();
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown if typed characters match an option', async () => {
+			await render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 0 ].name
+			);
+
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
+
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: props.label,
+					hidden: true,
+				} )
+			).not.toBeInTheDocument();
+
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
+			await press.Enter();
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
+		} );
+
+		it( 'Can change selection with a focused input and closed dropdown while pressing arrow keys', async () => {
+			await render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 0 ].name
+			);
+
+			await press.ArrowDown();
+			await press.ArrowDown();
+			expect(
+				screen.queryByRole( 'listbox', {
+					name: props.label,
+				} )
+			).not.toBeInTheDocument();
+
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 2 ].name
+			);
+		} );
+
+		it( 'Should have correct aria-selected value for selections', async () => {
+			await render( <Component { ...props } /> );
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await click( currentSelectedItem );
+
+			// get all items except for first option
+			const unselectedItems = props.options.filter(
+				( { name } ) => name !== props.options[ 0 ].name
+			);
+
+			// assert that all other items have aria-selected="false"
+			unselectedItems.map( ( { name } ) =>
+				expect(
+					screen.getByRole( 'option', { name, selected: false } )
+				).toBeVisible()
+			);
+
+			// assert that first item has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: true,
+				} )
+			).toBeVisible();
+
+			// change the current selection
+			await click( screen.getByRole( 'option', { name: 'poppy' } ) );
+
+			// click combobox to mount listbox with options again
+			await click( currentSelectedItem );
+
+			// check that first item is has aria-selected="false" after new selection
+			expect(
+				screen.getByRole( 'option', {
+					name: props.options[ 0 ].name,
+					selected: false,
+				} )
+			).toBeVisible();
+
+			// check that new selected item now has aria-selected="true"
+			expect(
+				screen.getByRole( 'option', {
+					name: 'poppy',
+					selected: true,
+				} )
+			).toBeVisible();
+		} );
+
+		it( 'Should call custom event handlers', async () => {
+			const onFocusMock = jest.fn();
+			const onBlurMock = jest.fn();
+
+			await render(
+				<>
+					<Component
+						{ ...props }
+						onFocus={ onFocusMock }
+						onBlur={ onBlurMock }
+					/>
+					<button>Focus stop</button>
+				</>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await press.Tab();
+
+			expect( currentSelectedItem ).toHaveFocus();
+			expect( onFocusMock ).toHaveBeenCalledTimes( 1 );
+
+			await press.Tab();
+			expect( currentSelectedItem ).not.toHaveFocus();
+			expect( onBlurMock ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should render the describedBy text when specified', async () => {
+			const describedByText = 'My description.';
+
+			await render(
+				<Component { ...props } describedBy={ describedByText } />
+			);
+
+			expect(
+				screen.getByRole( 'combobox' )
+			).toHaveAccessibleDescription( describedByText );
+		} );
+
+		it( 'should render the default ARIA description when describedBy is not specified', async () => {
+			await render( <Component { ...props } /> );
+
+			expect(
+				screen.getByRole( 'combobox' )
+			).toHaveAccessibleDescription(
+				`Currently selected: ${ props.options[ 0 ].name }`
+			);
+		} );
+	} );
+} );
+
+describe( 'Type checking', () => {
+	// eslint-disable-next-line jest/expect-expect
+	it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+		const options = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		];
+		const optionsReadOnly = [
+			{
+				key: 'narrow',
+				name: 'Narrow',
+			},
+			{
+				key: 'value',
+				name: 'Value',
+			},
+		] as const;
+
+		const onChange = (): void => {};
+
+		<_CustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'random string is also accepted for non-readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ options }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				// @ts-expect-error: random string is not accepted for immutable options
+				key: 'random string is not accepted for readonly options',
+				name: 'Narrow',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+				// @ts-expect-error: the option type should not be inferred from `value`
+				foo: 'foo',
+			} }
+			onChange={ onChange }
+		/>;
+
+		<_CustomSelectControl
+			label="Label"
+			options={ optionsReadOnly }
+			value={ {
+				key: 'narrow',
+				name: 'Narrow',
+			} }
+			// To ensure the type inferring is working correctly, but this is not a common use case.
+			// @ts-expect-error: the option type should not be inferred from `onChange`
+			onChange={
+				onChange as ( obj: {
+					selectedItem: { key: string; name: string; foo: string };
+				} ) => void
+			}
+		/>;
+	} );
+} );
diff --git a/packages/components/src/custom-select-control/types.ts b/packages/components/src/custom-select-control/types.ts
new file mode 100644
index 00000000000000..dd3db6d3bb0f95
--- /dev/null
+++ b/packages/components/src/custom-select-control/types.ts
@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import type { FocusEventHandler, MouseEventHandler } from 'react';
+
+/**
+ * The object structure for the options array.
+ */
+export type CustomSelectOption = {
+	key: string;
+	name: string;
+	style?: React.CSSProperties;
+	className?: string;
+	hint?: string;
+	/**
+	 * Use the `hint` property instead
+	 * @deprecated
+	 * @ignore
+	 */
+	__experimentalHint?: string;
+	[ key: string ]: any;
+};
+
+/**
+ * The object returned from the onChange event.
+ */
+type CustomSelectChangeObject< T extends CustomSelectOption > = {
+	highlightedIndex?: number;
+	inputValue?: string;
+	isOpen?: boolean;
+	type?: string;
+	selectedItem: T;
+};
+
+export type CustomSelectProps< T extends CustomSelectOption > = {
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * Hide the label visually, while keeping available to assistive technology.
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Description for the select trigger button used by assistive technology.
+	 * If no value is passed, the text "Currently selected: selectedItem.name"
+	 * will be used fully translated.
+	 */
+	describedBy?: string;
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * Function called with the control's internal state changes. The `selectedItem`
+	 * property contains the next selected item.
+	 */
+	onChange?: ( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void;
+	/**
+	 * A handler for `blur` events on the trigger button.
+	 *
+	 * @ignore
+	 */
+	onBlur?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `focus` events on the trigger button.
+	 *
+	 * @ignore
+	 */
+	onFocus?: FocusEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `mouseout` events on the trigger button.
+	 *
+	 * @ignore
+	 */
+	onMouseOut?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * A handler for `mouseover` events on the trigger button.
+	 *
+	 * @ignore
+	 */
+	onMouseOver?: MouseEventHandler< HTMLButtonElement >;
+	/**
+	 * The list of options that can be chosen from.
+	 */
+	options: ReadonlyArray< T >;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small' | '__unstable-large';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: NoInfer< T >;
+	/**
+	 * Use the `showSelectedHint` property instead.
+	 * @deprecated
+	 * @ignore
+	 */
+	__experimentalShowSelectedHint?: boolean;
+	/**
+	 * Show the hint of the selected item in the trigger button.
+	 *
+	 * @default false
+	 */
+	showSelectedHint?: boolean;
+	/**
+	 * Opt-in prop for an unconstrained width style which became the default in
+	 * WordPress 6.5. The prop is no longer needed and can be safely removed.
+	 *
+	 * @deprecated
+	 * @ignore
+	 */
+	__nextUnconstrainedWidth?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
+};
diff --git a/packages/components/src/dashicon/index.js b/packages/components/src/dashicon/index.js
deleted file mode 100644
index 7bf76771f97038..00000000000000
--- a/packages/components/src/dashicon/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @typedef OwnProps
- *
- * @property {import('./types').IconKey} icon        Icon name
- * @property {string}                    [className] Class name
- * @property {number}                    [size]      Size of the icon
- */
-/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
-
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-
-function Dashicon( { icon, className, size = 20, style = {}, ...extraProps } ) {
-	const iconClass = [
-		'dashicon',
-		'dashicons',
-		'dashicons-' + icon,
-		className,
-	]
-		.filter( Boolean )
-		.join( ' ' );
-
-	// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default
-	const sizeStyles =
-		// using `!=` to catch both 20 and "20"
-		// eslint-disable-next-line eqeqeq
-		20 != size
-			? {
-					fontSize: `${ size }px`,
-					width: `${ size }px`,
-					height: `${ size }px`,
-			  }
-			: {};
-
-	const styles = {
-		...sizeStyles,
-		...style,
-	};
-
-	return <span className={ iconClass } style={ styles } { ...extraProps } />;
-}
-
-export default Dashicon;
diff --git a/packages/components/src/dashicon/index.native.js b/packages/components/src/dashicon/index.native.js
index 35f9f6f99cb6f7..aba26313412602 100644
--- a/packages/components/src/dashicon/index.native.js
+++ b/packages/components/src/dashicon/index.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
diff --git a/packages/components/src/dashicon/index.tsx b/packages/components/src/dashicon/index.tsx
new file mode 100644
index 00000000000000..d0abe7374da10d
--- /dev/null
+++ b/packages/components/src/dashicon/index.tsx
@@ -0,0 +1,51 @@
+/**
+ * @typedef OwnProps
+ *
+ * @property {import('./types').IconKey} icon        Icon name
+ * @property {string}                    [className] Class name
+ * @property {number}                    [size]      Size of the icon
+ */
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { DashiconProps } from './types';
+
+function Dashicon( {
+	icon,
+	className,
+	size = 20,
+	style = {},
+	...extraProps
+}: WordPressComponentProps< DashiconProps, 'span', false > ) {
+	const iconClass = [
+		'dashicon',
+		'dashicons',
+		'dashicons-' + icon,
+		className,
+	]
+		.filter( Boolean )
+		.join( ' ' );
+
+	// For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default
+	const sizeStyles =
+		// using `!=` to catch both 20 and "20"
+		// eslint-disable-next-line eqeqeq
+		20 != size
+			? {
+					fontSize: `${ size }px`,
+					width: `${ size }px`,
+					height: `${ size }px`,
+			  }
+			: {};
+
+	const styles = {
+		...sizeStyles,
+		...style,
+	};
+
+	return <span className={ iconClass } style={ styles } { ...extraProps } />;
+}
+
+export default Dashicon;
diff --git a/packages/components/src/dashicon/types.ts b/packages/components/src/dashicon/types.ts
index a8be986a606a3a..a4a4f5156aff5f 100644
--- a/packages/components/src/dashicon/types.ts
+++ b/packages/components/src/dashicon/types.ts
@@ -1,3 +1,14 @@
+export type DashiconProps = {
+	/**
+	 * The icon name
+	 */
+	icon: IconKey;
+	/**
+	 * Size of the icon
+	 */
+	size?: number;
+};
+
 export type IconKey =
 	| 'admin-appearance'
 	| 'admin-collapse'
@@ -208,7 +219,6 @@ export type IconKey =
 	| 'insert-before'
 	| 'insert'
 	| 'instagram'
-	| 'keyboard-hide'
 	| 'laptop'
 	| 'layout'
 	| 'leftright'
@@ -255,7 +265,6 @@ export type IconKey =
 	| 'playlist-audio'
 	| 'playlist-video'
 	| 'plus-alt'
-	| 'plus-light'
 	| 'plus'
 	| 'portfolio'
 	| 'post-status'
diff --git a/packages/components/src/date-time/README.md b/packages/components/src/date-time/README.md
index e01d9074953f25..b57a3f859b0e11 100644
--- a/packages/components/src/date-time/README.md
+++ b/packages/components/src/date-time/README.md
@@ -15,8 +15,8 @@ Date pickers should:
 Render a DateTimePicker.
 
 ```jsx
+import { useState } from 'react';
 import { DateTimePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDateTimePicker = () => {
 	const [ date, setDate ] = useState( new Date() );
@@ -26,8 +26,6 @@ const MyDateTimePicker = () => {
 			currentDate={ date }
 			onChange={ ( newDate ) => setDate( newDate ) }
 			is12Hour={ true }
-			__nextRemoveHelpButton
-			__nextRemoveResetButton
 		/>
 	);
 };
@@ -58,6 +56,14 @@ Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is display
 -   Required: No
 -   Default: false
 
+### `dateOrder`: `'dmy' | 'mdy' | 'ymd'`
+
+The order of day, month, and year. This prop overrides the time format determined by `is12Hour` prop.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'dmy'`
+
 ### `isInvalidDate`: `( date: Date ) => boolean`
 
 A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not.
@@ -83,17 +89,3 @@ The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
 
 - Required: No
 - Default: 0
-
-### `__nextRemoveHelpButton`: `boolean`
-
-Start opting in to not displaying a Help button which will become the default in a future version.
-
-- Required: No
-- Default: `false`
-
-### `__nextRemoveResetButton`: `boolean`
-
-Start opting in to not displaying a Reset button which will become the default in a future version.
-
-- Required: No
-- Default: `false`
diff --git a/packages/components/src/date-time/date-time/index.tsx b/packages/components/src/date-time/date-time/index.tsx
index 3d97b19dc17c6c..82e34cff8e14e9 100644
--- a/packages/components/src/date-time/date-time/index.tsx
+++ b/packages/components/src/date-time/date-time/index.tsx
@@ -6,21 +6,15 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Button from '../../button';
 import { default as DatePicker } from '../date';
 import { default as TimePicker } from '../time';
 import type { DateTimePickerProps } from '../types';
-import { Wrapper, CalendarHelp } from './styles';
-import { HStack } from '../../h-stack';
-import { Heading } from '../../heading';
-import { Spacer } from '../../spacer';
+import { Wrapper } from './styles';
 
 export { DatePicker, TimePicker };
 
@@ -30,162 +24,33 @@ function UnforwardedDateTimePicker(
 	{
 		currentDate,
 		is12Hour,
+		dateOrder,
 		isInvalidDate,
 		onMonthPreviewed = noop,
 		onChange,
 		events,
 		startOfWeek,
-		__nextRemoveHelpButton = false,
-		__nextRemoveResetButton = false,
 	}: DateTimePickerProps,
 	ref: ForwardedRef< any >
 ) {
-	if ( ! __nextRemoveHelpButton ) {
-		deprecated( 'Help button in wp.components.DateTimePicker', {
-			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
-			hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
-		} );
-	}
-	if ( ! __nextRemoveResetButton ) {
-		deprecated( 'Reset button in wp.components.DateTimePicker', {
-			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
-			hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
-		} );
-	}
-
-	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =
-		useState( false );
-
-	function onClickDescriptionToggle() {
-		setCalendarHelpIsVisible( ! calendarHelpIsVisible );
-	}
-
 	return (
 		<Wrapper ref={ ref } className="components-datetime" spacing={ 4 }>
-			{ ! calendarHelpIsVisible && (
-				<>
-					<TimePicker
-						currentTime={ currentDate }
-						onChange={ onChange }
-						is12Hour={ is12Hour }
-					/>
-					<DatePicker
-						currentDate={ currentDate }
-						onChange={ onChange }
-						isInvalidDate={ isInvalidDate }
-						events={ events }
-						onMonthPreviewed={ onMonthPreviewed }
-						startOfWeek={ startOfWeek }
-					/>
-				</>
-			) }
-			{ calendarHelpIsVisible && (
-				<CalendarHelp
-					className="components-datetime__calendar-help" // Unused, for backwards compatibility.
-				>
-					<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>
-					<ul>
-						<li>
-							{ __(
-								'Click the right or left arrows to select other months in the past or the future.'
-							) }
-						</li>
-						<li>{ __( 'Click the desired day to select it.' ) }</li>
-					</ul>
-					<Heading level={ 4 }>
-						{ __( 'Navigating with a keyboard' ) }
-					</Heading>
-					<ul>
-						<li>
-							<abbr
-								aria-label={ _x( 'Enter', 'keyboard button' ) }
-							>
-								↵
-							</abbr>
-							{
-								' ' /* JSX removes whitespace, but a space is required for screen readers. */
-							}
-							<span>{ __( 'Select the date in focus.' ) }</span>
-						</li>
-						<li>
-							<abbr aria-label={ __( 'Left and Right Arrows' ) }>
-								←/→
-							</abbr>
-							{
-								' ' /* JSX removes whitespace, but a space is required for screen readers. */
-							}
-							{ __(
-								'Move backward (left) or forward (right) by one day.'
-							) }
-						</li>
-						<li>
-							<abbr aria-label={ __( 'Up and Down Arrows' ) }>
-								↑/↓
-							</abbr>
-							{
-								' ' /* JSX removes whitespace, but a space is required for screen readers. */
-							}
-							{ __(
-								'Move backward (up) or forward (down) by one week.'
-							) }
-						</li>
-						<li>
-							<abbr aria-label={ __( 'Page Up and Page Down' ) }>
-								{ __( 'PgUp/PgDn' ) }
-							</abbr>
-							{
-								' ' /* JSX removes whitespace, but a space is required for screen readers. */
-							}
-							{ __(
-								'Move backward (PgUp) or forward (PgDn) by one month.'
-							) }
-						</li>
-						<li>
-							<abbr aria-label={ __( 'Home and End' ) }>
-								{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
-								{ __( 'Home/End' ) }
-							</abbr>
-							{
-								' ' /* JSX removes whitespace, but a space is required for screen readers. */
-							}
-							{ __(
-								'Go to the first (Home) or last (End) day of a week.'
-							) }
-						</li>
-					</ul>
-				</CalendarHelp>
-			) }
-			{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (
-				<HStack
-					className="components-datetime__buttons" // Unused, for backwards compatibility.
-				>
-					{ ! __nextRemoveResetButton &&
-						! calendarHelpIsVisible &&
-						currentDate && (
-							<Button
-								className="components-datetime__date-reset-button" // Unused, for backwards compatibility.
-								variant="link"
-								onClick={ () => onChange?.( null ) }
-							>
-								{ __( 'Reset' ) }
-							</Button>
-						) }
-					<Spacer />
-					{ ! __nextRemoveHelpButton && (
-						<Button
-							className="components-datetime__date-help-toggle" // Unused, for backwards compatibility.
-							variant="link"
-							onClick={ onClickDescriptionToggle }
-						>
-							{ calendarHelpIsVisible
-								? __( 'Close' )
-								: __( 'Calendar Help' ) }
-						</Button>
-					) }
-				</HStack>
-			) }
+			<>
+				<TimePicker
+					currentTime={ currentDate }
+					onChange={ onChange }
+					is12Hour={ is12Hour }
+					dateOrder={ dateOrder }
+				/>
+				<DatePicker
+					currentDate={ currentDate }
+					onChange={ onChange }
+					isInvalidDate={ isInvalidDate }
+					events={ events }
+					onMonthPreviewed={ onMonthPreviewed }
+					startOfWeek={ startOfWeek }
+				/>
+			</>
 		</Wrapper>
 	);
 }
@@ -207,8 +72,6 @@ function UnforwardedDateTimePicker(
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
- *       __nextRemoveHelpButton
- *       __nextRemoveResetButton
  *     />
  *   );
  * };
diff --git a/packages/components/src/date-time/date-time/styles.ts b/packages/components/src/date-time/date-time/styles.ts
index a7f23eb276e047..51dc6e71f0c468 100644
--- a/packages/components/src/date-time/date-time/styles.ts
+++ b/packages/components/src/date-time/date-time/styles.ts
@@ -11,7 +11,3 @@ import { VStack } from '../../v-stack';
 export const Wrapper = styled( VStack )`
 	box-sizing: border-box;
 `;
-
-export const CalendarHelp = styled.div`
-	min-width: 260px;
-`;
diff --git a/packages/components/src/date-time/date/index.tsx b/packages/components/src/date-time/date/index.tsx
index 5f0b01df2ce5af..ca093f9d70847b 100644
--- a/packages/components/src/date-time/date/index.tsx
+++ b/packages/components/src/date-time/date/index.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useLilius } from 'use-lilius';
 import {
 	format,
 	isSameDay,
@@ -16,6 +15,7 @@ import {
 	startOfWeek,
 	endOfWeek,
 } from 'date-fns';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -28,6 +28,7 @@ import { useState, useRef, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { useLilius } from './use-lilius';
 import type { DatePickerProps } from '../types';
 import {
 	Wrapper,
@@ -124,6 +125,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 				<NavigatorHeading level={ 3 }>
 					<strong>
@@ -149,6 +151,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 			</Navigator>
 			<Calendar
@@ -273,7 +276,7 @@ type DayProps = {
 	numEvents: number;
 	isInvalid: boolean;
 	onClick: () => void;
-	onKeyDown: ( event: KeyboardEvent ) => void;
+	onKeyDown: KeyboardEventHandler;
 };
 
 function Day( {
@@ -299,7 +302,6 @@ function Day( {
 		}
 		// isFocusAllowed is not a dep as there is no point calling focus() on
 		// an already focused element.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isFocusable ] );
 
 	return (
diff --git a/packages/components/src/date-time/date/styles.ts b/packages/components/src/date-time/date/styles.ts
index a0f1853098f16e..84405854827ec9 100644
--- a/packages/components/src/date-time/date/styles.ts
+++ b/packages/components/src/date-time/date/styles.ts
@@ -7,13 +7,13 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import Button from '../../button';
-import { COLORS, CONFIG } from '../../utils';
+import { boxSizingReset, COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
-	box-sizing: border-box;
+	${ boxSizingReset }
 `;
 
 export const Navigator = styled( HStack )`
@@ -38,7 +38,7 @@ export const Calendar = styled.div`
 `;
 
 export const DayOfWeek = styled.div`
-	color: ${ COLORS.gray[ 700 ] };
+	color: ${ COLORS.theme.gray[ 700 ] };
 	font-size: ${ CONFIG.fontSize };
 	line-height: ${ CONFIG.fontLineHeightBase };
 
@@ -83,22 +83,41 @@ export const DayButton = styled( Button, {
 		` }
 
 	&&& {
-		border-radius: 100%;
+		border-radius: ${ CONFIG.radiusRound };
 		height: ${ space( 7 ) };
 		width: ${ space( 7 ) };
 
 		${ ( props ) =>
 			props.isSelected &&
 			`
-			background: ${ COLORS.ui.theme };
-			color: ${ COLORS.white };
+				background: ${ COLORS.theme.accent };
+
+				&,
+				&:hover:not(:disabled, [aria-disabled=true]) {
+					color: ${ COLORS.theme.accentInverted };
+				}
+
+				&:focus:not(:disabled),
+				&:focus:not(:disabled) {
+					border: ${ CONFIG.borderWidthFocus } solid currentColor;
+				}
+
+				/* Highlight the selected day for high-contrast mode */
+				&::after {
+					content: '';
+					position: absolute;
+					pointer-events: none;
+					inset: 0;
+					border-radius: inherit;
+					border: 1px solid transparent;
+				}
 			` }
 
 		${ ( props ) =>
 			! props.isSelected &&
 			props.isToday &&
 			`
-			background: ${ COLORS.gray[ 200 ] };
+			background: ${ COLORS.theme.gray[ 200 ] };
 			` }
 	}
 
@@ -106,15 +125,16 @@ export const DayButton = styled( Button, {
 		props.hasEvents &&
 		`
 		::before {
-			background: ${ props.isSelected ? COLORS.white : COLORS.ui.theme };
-			border-radius: 2px;
-			bottom: 0;
+			border: 2px solid ${
+				props.isSelected
+					? COLORS.theme.accentInverted
+					: COLORS.theme.accent
+			};
+			border-radius: ${ CONFIG.radiusRound };
 			content: " ";
-			height: 4px;
 			left: 50%;
-			margin-left: -2px;
 			position: absolute;
-			width: 4px;
+			transform: translate(-50%, 9px);
 		}
 		` }
 `;
diff --git a/packages/components/src/date-time/date/test/index.tsx b/packages/components/src/date-time/date/test/index.tsx
index 7a1a52ee929a9e..a0c21dce2be76f 100644
--- a/packages/components/src/date-time/date/test/index.tsx
+++ b/packages/components/src/date-time/date/test/index.tsx
@@ -31,9 +31,7 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onChange when a day is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 
@@ -52,9 +50,7 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onMonthPreviewed = jest.fn();
 		const onChange = jest.fn();
@@ -116,6 +112,6 @@ describe( 'DatePicker', () => {
 		const button = screen.getByRole( 'button', {
 			name: 'May 20, 2022',
 		} ) as HTMLButtonElement;
-		expect( button.disabled ).toBe( true );
+		expect( button ).toBeDisabled();
 	} );
 } );
diff --git a/packages/components/src/date-time/date/test/use-lilius.ts b/packages/components/src/date-time/date/test/use-lilius.ts
new file mode 100644
index 00000000000000..31b81fa11bb74b
--- /dev/null
+++ b/packages/components/src/date-time/date/test/use-lilius.ts
@@ -0,0 +1,417 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+import { addYears, getYear, set, startOfToday, subYears } from 'date-fns';
+
+/**
+ * Internal dependencies
+ */
+import { Month, useLilius } from '../use-lilius';
+
+const getDate = ( {
+	year = 1999,
+	month = Month.NOVEMBER,
+	date = 24,
+	hours = 0,
+	minutes = 0,
+	seconds = 0,
+	milliseconds = 0,
+}: {
+	year?: number;
+	month?: number;
+	date?: number;
+	hours?: number;
+	minutes?: number;
+	seconds?: number;
+	milliseconds?: number;
+} = {} ) => {
+	return set( new Date(), {
+		year,
+		month,
+		date,
+		hours,
+		minutes,
+		seconds,
+		milliseconds,
+	} );
+};
+
+describe( 'helpers', () => {
+	describe( 'clearTime', () => {
+		it( 'returns a copy of the given date with the time set to 00:00:00:00', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate( { hours: 7, minutes: 30 } );
+
+			expect( result.current.clearTime( date ) ).toStrictEqual(
+				set( date, {
+					hours: 0,
+					minutes: 0,
+					seconds: 0,
+					milliseconds: 0,
+				} )
+			);
+		} );
+	} );
+
+	describe( 'inRange', () => {
+		it( 'returns whether or not a date is between 2 other dates (inclusive)', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+			const min = subYears( date, 1 );
+			const max = addYears( date, 1 );
+
+			expect( result.current.inRange( date, min, max ) ).toBe( true );
+			expect(
+				result.current.inRange( addYears( date, 10 ), min, max )
+			).toBe( false );
+		} );
+	} );
+} );
+
+describe( 'viewing', () => {
+	describe( 'viewing', () => {
+		it( 'returns the date represented in the calendar matrix', () => {
+			const date = getDate();
+
+			const { result } = renderHook( () =>
+				useLilius( { viewing: date } )
+			);
+
+			expect( result.current.viewing ).toStrictEqual( date );
+		} );
+	} );
+
+	describe( 'setViewing', () => {
+		it( 'sets the date represented in the calendar matrix', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () => result.current.setViewing( date ) );
+			expect( result.current.viewing ).toStrictEqual( date );
+		} );
+	} );
+
+	describe( 'viewToday', () => {
+		it( 'sets the viewing date to today', () => {
+			const { result } = renderHook( () =>
+				useLilius( { viewing: getDate( { year: 1999 } ) } )
+			);
+
+			act( () => result.current.viewToday() );
+			expect( result.current.viewing ).toStrictEqual( startOfToday() );
+		} );
+	} );
+
+	describe( 'viewMonth', () => {
+		it( 'sets the viewing date to the given month', () => {
+			const date = getDate( { month: Month.JANUARY } );
+
+			const { result } = renderHook( () =>
+				useLilius( { viewing: date } )
+			);
+
+			act( () => result.current.viewMonth( Month.FEBRUARY ) );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { month: Month.FEBRUARY } )
+			);
+		} );
+	} );
+
+	describe( 'viewPreviousMonth', () => {
+		it( 'sets the viewing date to the month before the current', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate( { month: Month.OCTOBER } );
+
+			act( () => result.current.setViewing( date ) );
+			act( () => result.current.viewPreviousMonth() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { month: Month.SEPTEMBER } )
+			);
+		} );
+
+		it( 'wraps to december of the previous year if the current month is january', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate( { month: Month.JANUARY } );
+
+			act( () => result.current.setViewing( date ) );
+			act( () => result.current.viewPreviousMonth() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, {
+					month: Month.DECEMBER,
+					year: getYear( date ) - 1,
+				} )
+			);
+		} );
+	} );
+
+	describe( 'viewNextMonth', () => {
+		it( 'sets the viewing date to the month after the current', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate( { month: Month.OCTOBER } );
+
+			act( () => result.current.setViewing( date ) );
+			act( () => result.current.viewNextMonth() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { month: Month.NOVEMBER } )
+			);
+		} );
+
+		it( 'wraps to january of the next year if the current month is december', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate( { month: Month.DECEMBER } );
+
+			act( () => result.current.setViewing( date ) );
+			act( () => result.current.viewNextMonth() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { month: Month.JANUARY, year: getYear( date ) + 1 } )
+			);
+		} );
+	} );
+
+	describe( 'viewYear', () => {
+		it( 'sets the viewing date to the given year', () => {
+			const date = getDate( { year: 1999 } );
+
+			const { result } = renderHook( () =>
+				useLilius( { viewing: date } )
+			);
+
+			act( () => result.current.viewYear( 1997 ) );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { year: 1997 } )
+			);
+		} );
+	} );
+
+	describe( 'viewPreviousYear', () => {
+		it( 'sets the viewing date to the year before the current', () => {
+			const date = getDate( { year: 1999 } );
+
+			const { result } = renderHook( () =>
+				useLilius( { viewing: date } )
+			);
+
+			act( () => result.current.viewPreviousYear() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { year: 1998 } )
+			);
+		} );
+	} );
+
+	describe( 'viewNextYear', () => {
+		it( 'sets the viewing date to the year after the current', () => {
+			const date = getDate( { year: 1999 } );
+
+			const { result } = renderHook( () =>
+				useLilius( { viewing: date } )
+			);
+
+			act( () => result.current.viewNextYear() );
+			expect( result.current.viewing ).toStrictEqual(
+				set( date, { year: 2000 } )
+			);
+		} );
+	} );
+} );
+
+describe( 'selected', () => {
+	describe( 'selected', () => {
+		it( 'returns the dates currently selected', () => {
+			const date = getDate();
+
+			const { result } = renderHook( () =>
+				useLilius( {
+					selected: [ date ],
+				} )
+			);
+
+			expect( result.current.selected ).toStrictEqual( [ date ] );
+		} );
+	} );
+
+	describe( 'clearSelected', () => {
+		it( 'resets the selected dates to []', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () =>
+				result.current.selectRange(
+					set( date, { date: 1 } ),
+					set( date, { date: 5 } )
+				)
+			);
+			expect( result.current.selected.length ).toBe( 5 );
+
+			act( () => result.current.clearSelected() );
+			expect( result.current.selected.length ).toBe( 0 );
+		} );
+	} );
+
+	describe( 'isSelected', () => {
+		it( 'returns whether or not a date has been selected', () => {
+			const date = getDate();
+
+			const { result } = renderHook( () =>
+				useLilius( {
+					selected: [ date ],
+				} )
+			);
+
+			expect( result.current.isSelected( date ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'select', () => {
+		it( 'selects a date', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () => result.current.select( date ) );
+			expect( result.current.isSelected( date ) ).toBe( true );
+		} );
+
+		it( 'selects multiple dates', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const dateOne = getDate( { date: 1 } );
+			const dateTwo = getDate( { date: 2 } );
+
+			act( () => result.current.select( [ dateOne, dateTwo ] ) );
+			expect( result.current.isSelected( dateOne ) ).toBe( true );
+			expect( result.current.isSelected( dateTwo ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'deselect', () => {
+		it( 'deselects a date', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () => result.current.select( date ) );
+			act( () => result.current.deselect( date ) );
+			expect( result.current.isSelected( date ) ).toBe( false );
+		} );
+
+		it( 'deselects multiple dates', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const dateOne = getDate( { date: 1 } );
+			const dateTwo = getDate( { date: 2 } );
+
+			act( () => result.current.select( [ dateOne, dateTwo ] ) );
+			act( () => result.current.deselect( [ dateOne, dateTwo ] ) );
+			expect( result.current.isSelected( dateOne ) ).toBe( false );
+			expect( result.current.isSelected( dateTwo ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'toggle', () => {
+		it( 'toggles the selection of a date', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () => result.current.toggle( date ) );
+			expect( result.current.isSelected( date ) ).toBe( true );
+
+			act( () => result.current.toggle( date ) );
+			expect( result.current.isSelected( date ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'selectRange', () => {
+		it( 'selects a range of dates (inclusive)', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			const first = set( date, { date: 1 } );
+			const second = set( date, { date: 2 } );
+			const third = set( date, { date: 3 } );
+
+			act( () => result.current.selectRange( first, third ) );
+
+			expect( result.current.selected.length ).toBe( 3 );
+			expect( result.current.isSelected( first ) ).toBe( true );
+			expect( result.current.isSelected( second ) ).toBe( true );
+			expect( result.current.isSelected( third ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'deselectRange', () => {
+		it( 'deselects a range of dates (inclusive)', () => {
+			const { result } = renderHook( () => useLilius() );
+
+			const date = getDate();
+
+			act( () =>
+				result.current.selectRange(
+					set( date, { date: 1 } ),
+					set( date, { date: 3 } )
+				)
+			);
+			act( () =>
+				result.current.deselectRange(
+					set( date, { date: 1 } ),
+					set( date, { date: 3 } )
+				)
+			);
+
+			expect( result.current.selected.length ).toBe( 0 );
+			expect(
+				result.current.isSelected( set( date, { date: 1 } ) )
+			).toBe( false );
+			expect(
+				result.current.isSelected( set( date, { date: 2 } ) )
+			).toBe( false );
+			expect(
+				result.current.isSelected( set( date, { date: 3 } ) )
+			).toBe( false );
+		} );
+	} );
+} );
+
+describe( 'calendar', () => {
+	it( 'returns a matrix of days based on the current viewing date', () => {
+		const { result } = renderHook( () =>
+			useLilius( { viewing: new Date( 1582, Month.OCTOBER, 1 ) } )
+		);
+
+		expect( result.current.calendar![ 0 ][ 0 ][ 0 ] ).toStrictEqual(
+			new Date( 1582, Month.SEPTEMBER, 26 )
+		);
+		expect( result.current.calendar![ 0 ][ 0 ][ 5 ] ).toStrictEqual(
+			new Date( 1582, Month.OCTOBER, 1 )
+		);
+		expect( result.current.calendar![ 0 ][ 5 ][ 6 ] ).toStrictEqual(
+			new Date( 1582, Month.NOVEMBER, 6 )
+		);
+	} );
+
+	it( 'supports returning multiple months', () => {
+		const { result } = renderHook( () =>
+			useLilius( {
+				viewing: new Date( 1582, Month.OCTOBER, 1 ),
+				numberOfMonths: 2,
+			} )
+		);
+
+		expect( result.current.calendar![ 0 ][ 0 ][ 0 ] ).toStrictEqual(
+			new Date( 1582, Month.SEPTEMBER, 26 )
+		);
+		expect( result.current.calendar![ 1 ][ 0 ][ 0 ] ).toStrictEqual(
+			new Date( 1582, Month.OCTOBER, 31 )
+		);
+	} );
+} );
diff --git a/packages/components/src/date-time/date/use-lilius/index.ts b/packages/components/src/date-time/date/use-lilius/index.ts
new file mode 100644
index 00000000000000..2da204b3c76419
--- /dev/null
+++ b/packages/components/src/date-time/date/use-lilius/index.ts
@@ -0,0 +1,394 @@
+/**
+ * This source is a local copy of the use-lilius library, since the original
+ * library is not actively maintained.
+ * @see https://github.com/WordPress/gutenberg/discussions/64968
+ *
+ * use-lilius@2.0.5
+ * https://github.com/Avarios/use-lilius
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2021-Present Danny Tatom
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * External dependencies
+ */
+import {
+	addMonths,
+	addYears,
+	eachDayOfInterval,
+	eachMonthOfInterval,
+	eachWeekOfInterval,
+	endOfMonth,
+	endOfWeek,
+	isAfter,
+	isBefore,
+	isEqual,
+	set,
+	setMonth,
+	setYear,
+	startOfMonth,
+	startOfToday,
+	startOfWeek,
+	subMonths,
+	subYears,
+} from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo, useState } from '@wordpress/element';
+
+export enum Month {
+	JANUARY,
+	FEBRUARY,
+	MARCH,
+	APRIL,
+	MAY,
+	JUNE,
+	JULY,
+	AUGUST,
+	SEPTEMBER,
+	OCTOBER,
+	NOVEMBER,
+	DECEMBER,
+}
+
+export enum Day {
+	SUNDAY,
+	MONDAY,
+	TUESDAY,
+	WEDNESDAY,
+	THURSDAY,
+	FRIDAY,
+	SATURDAY,
+}
+
+export interface Options {
+	/**
+	 * What day a week starts on within the calendar matrix.
+	 *
+	 * @default Day.SUNDAY
+	 */
+	weekStartsOn?: Day;
+
+	/**
+	 * The initial viewing date.
+	 *
+	 * @default new Date()
+	 */
+	viewing?: Date;
+
+	/**
+	 * The initial date(s) selection.
+	 *
+	 * @default []
+	 */
+	selected?: Date[];
+
+	/**
+	 * The number of months in the calendar.
+	 *
+	 * @default 1
+	 */
+	numberOfMonths?: number;
+}
+
+export interface Returns {
+	/**
+	 * Returns a copy of the given date with the time set to 00:00:00:00.
+	 */
+	clearTime: ( date: Date ) => Date;
+
+	/**
+	 * Returns whether or not a date is between 2 other dates (inclusive).
+	 */
+	inRange: ( date: Date, min: Date, max: Date ) => boolean;
+
+	/**
+	 * The date represented in the calendar matrix. Note that
+	 * the month and year are the only parts used.
+	 */
+	viewing: Date;
+
+	/**
+	 * Set the date represented in the calendar matrix. Note that
+	 * the month and year are the only parts used.
+	 */
+	setViewing: React.Dispatch< React.SetStateAction< Date > >;
+
+	/**
+	 * Set the viewing date to today.
+	 */
+	viewToday: () => void;
+
+	/**
+	 * Set the viewing date to the given month.
+	 */
+	viewMonth: ( month: Month ) => void;
+
+	/**
+	 * Set the viewing date to the month before the current.
+	 */
+	viewPreviousMonth: () => void;
+
+	/**
+	 * Set the viewing date to the month after the current.
+	 */
+	viewNextMonth: () => void;
+
+	/**
+	 * Set the viewing date to the given year.
+	 */
+	viewYear: ( year: number ) => void;
+
+	/**
+	 * Set the viewing date to the year before the current.
+	 */
+	viewPreviousYear: () => void;
+
+	/**
+	 * Set the viewing date to the year after the current.
+	 */
+	viewNextYear: () => void;
+
+	/**
+	 * The dates currently selected.
+	 */
+	selected: Date[];
+
+	/**
+	 * Override the currently selected dates.
+	 */
+	setSelected: React.Dispatch< React.SetStateAction< Date[] > >;
+
+	/**
+	 * Reset the selected dates to [].
+	 */
+	clearSelected: () => void;
+
+	/**
+	 * Determine whether or not a date has been selected.
+	 */
+	isSelected: ( date: Date ) => boolean;
+
+	/**
+	 * Select one or more dates.
+	 */
+	select: ( date: Date | Date[], replaceExisting?: boolean ) => void;
+
+	/**
+	 * Deselect one or more dates.
+	 */
+	deselect: ( date: Date | Date[] ) => void;
+
+	/**
+	 * Toggle the selection of a date.
+	 */
+	toggle: ( date: Date, replaceExisting?: boolean ) => void;
+
+	/**
+	 * Select a range of dates (inclusive).
+	 */
+	selectRange: ( start: Date, end: Date, replaceExisting?: boolean ) => void;
+
+	/**
+	 * Deselect a range of dates (inclusive).
+	 */
+	deselectRange: ( start: Date, end: Date ) => void;
+
+	/**
+	 * A matrix of days based on the current viewing date.
+	 */
+	calendar: Date[][][];
+}
+
+const inRange = ( date: Date, min: Date, max: Date ) =>
+	( isEqual( date, min ) || isAfter( date, min ) ) &&
+	( isEqual( date, max ) || isBefore( date, max ) );
+
+const clearTime = ( date: Date ) =>
+	set( date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 } );
+
+export const useLilius = ( {
+	weekStartsOn = Day.SUNDAY,
+	viewing: initialViewing = new Date(),
+	selected: initialSelected = [],
+	numberOfMonths = 1,
+}: Options = {} ): Returns => {
+	const [ viewing, setViewing ] = useState< Date >( initialViewing );
+
+	const viewToday = useCallback(
+		() => setViewing( startOfToday() ),
+		[ setViewing ]
+	);
+
+	const viewMonth = useCallback(
+		( month: Month ) => setViewing( ( v ) => setMonth( v, month ) ),
+		[]
+	);
+
+	const viewPreviousMonth = useCallback(
+		() => setViewing( ( v ) => subMonths( v, 1 ) ),
+		[]
+	);
+
+	const viewNextMonth = useCallback(
+		() => setViewing( ( v ) => addMonths( v, 1 ) ),
+		[]
+	);
+
+	const viewYear = useCallback(
+		( year: number ) => setViewing( ( v ) => setYear( v, year ) ),
+		[]
+	);
+
+	const viewPreviousYear = useCallback(
+		() => setViewing( ( v ) => subYears( v, 1 ) ),
+		[]
+	);
+
+	const viewNextYear = useCallback(
+		() => setViewing( ( v ) => addYears( v, 1 ) ),
+		[]
+	);
+
+	const [ selected, setSelected ] = useState< Date[] >(
+		initialSelected.map( clearTime )
+	);
+
+	const clearSelected = () => setSelected( [] );
+
+	const isSelected = useCallback(
+		( date: Date ) =>
+			selected.findIndex( ( s ) => isEqual( s, date ) ) > -1,
+		[ selected ]
+	);
+
+	const select = useCallback(
+		( date: Date | Date[], replaceExisting?: boolean ) => {
+			if ( replaceExisting ) {
+				setSelected( Array.isArray( date ) ? date : [ date ] );
+			} else {
+				setSelected( ( selectedItems ) =>
+					selectedItems.concat(
+						Array.isArray( date ) ? date : [ date ]
+					)
+				);
+			}
+		},
+		[]
+	);
+
+	const deselect = useCallback(
+		( date: Date | Date[] ) =>
+			setSelected( ( selectedItems ) =>
+				Array.isArray( date )
+					? selectedItems.filter(
+							( s ) =>
+								! date
+									.map( ( d ) => d.getTime() )
+									.includes( s.getTime() )
+					  )
+					: selectedItems.filter( ( s ) => ! isEqual( s, date ) )
+			),
+		[]
+	);
+
+	const toggle = useCallback(
+		( date: Date, replaceExisting?: boolean ) =>
+			isSelected( date )
+				? deselect( date )
+				: select( date, replaceExisting ),
+		[ deselect, isSelected, select ]
+	);
+
+	const selectRange = useCallback(
+		( start: Date, end: Date, replaceExisting?: boolean ) => {
+			if ( replaceExisting ) {
+				setSelected( eachDayOfInterval( { start, end } ) );
+			} else {
+				setSelected( ( selectedItems ) =>
+					selectedItems.concat( eachDayOfInterval( { start, end } ) )
+				);
+			}
+		},
+		[]
+	);
+
+	const deselectRange = useCallback( ( start: Date, end: Date ) => {
+		setSelected( ( selectedItems ) =>
+			selectedItems.filter(
+				( s ) =>
+					! eachDayOfInterval( { start, end } )
+						.map( ( d ) => d.getTime() )
+						.includes( s.getTime() )
+			)
+		);
+	}, [] );
+
+	const calendar = useMemo< Date[][][] >(
+		() =>
+			eachMonthOfInterval( {
+				start: startOfMonth( viewing ),
+				end: endOfMonth( addMonths( viewing, numberOfMonths - 1 ) ),
+			} ).map( ( month ) =>
+				eachWeekOfInterval(
+					{
+						start: startOfMonth( month ),
+						end: endOfMonth( month ),
+					},
+					{ weekStartsOn }
+				).map( ( week ) =>
+					eachDayOfInterval( {
+						start: startOfWeek( week, { weekStartsOn } ),
+						end: endOfWeek( week, { weekStartsOn } ),
+					} )
+				)
+			),
+		[ viewing, weekStartsOn, numberOfMonths ]
+	);
+
+	return {
+		clearTime,
+		inRange,
+		viewing,
+		setViewing,
+		viewToday,
+		viewMonth,
+		viewPreviousMonth,
+		viewNextMonth,
+		viewYear,
+		viewPreviousYear,
+		viewNextYear,
+		selected,
+		setSelected,
+		clearSelected,
+		isSelected,
+		select,
+		deselect,
+		toggle,
+		selectRange,
+		deselectRange,
+		calendar,
+	};
+};
diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx
new file mode 100644
index 00000000000000..0c6af3f53fa195
--- /dev/null
+++ b/packages/components/src/date-time/stories/date-time.story.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '../date-time';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: Meta< typeof DateTimePicker > = {
+	title: 'Components/Selection & Input/Time & Date/DateTimePicker',
+	id: 'components-datetimepicker',
+	component: DateTimePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof DateTimePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} );
+
+export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} );
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: StoryFn< typeof DateTimePicker > = Template.bind(
+	{}
+);
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	isInvalidDate: isWeekend,
+};
diff --git a/packages/components/src/date-time/stories/date-time.tsx b/packages/components/src/date-time/stories/date-time.tsx
deleted file mode 100644
index 53d369728d34d7..00000000000000
--- a/packages/components/src/date-time/stories/date-time.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DateTimePicker from '../date-time';
-import { daysFromNow, isWeekend } from './utils';
-
-const meta: ComponentMeta< typeof DateTimePicker > = {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-	argTypes: {
-		currentDate: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof DateTimePicker > = ( {
-	currentDate,
-	onChange,
-	...args
-} ) => {
-	const [ date, setDate ] = useState( currentDate );
-	useEffect( () => {
-		setDate( currentDate );
-	}, [ currentDate ] );
-	return (
-		<DateTimePicker
-			{ ...args }
-			currentDate={ date }
-			onChange={ ( newDate ) => {
-				setDate( newDate );
-				onChange?.( newDate );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
-	{}
-);
-Default.args = {
-	__nextRemoveHelpButton: true,
-	__nextRemoveResetButton: true,
-};
-
-export const WithEvents: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
-WithEvents.args = {
-	currentDate: new Date(),
-	events: [
-		{ date: daysFromNow( 2 ) },
-		{ date: daysFromNow( 4 ) },
-		{ date: daysFromNow( 6 ) },
-		{ date: daysFromNow( 8 ) },
-	],
-};
-
-export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
-WithInvalidDates.args = {
-	currentDate: new Date(),
-	isInvalidDate: isWeekend,
-};
diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx
new file mode 100644
index 00000000000000..ae4816809f7865
--- /dev/null
+++ b/packages/components/src/date-time/stories/date.story.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: Meta< typeof DatePicker > = {
+	title: 'Components/Selection & Input/Time & Date/DatePicker',
+	id: 'components-datepicker',
+	component: DatePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof DatePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DatePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof DatePicker > = Template.bind( {} );
+
+export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} );
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: StoryFn< typeof DatePicker > = Template.bind(
+	{}
+);
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	isInvalidDate: isWeekend,
+};
diff --git a/packages/components/src/date-time/stories/date.tsx b/packages/components/src/date-time/stories/date.tsx
deleted file mode 100644
index 58d3295b425a1f..00000000000000
--- a/packages/components/src/date-time/stories/date.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-import { daysFromNow, isWeekend } from './utils';
-
-const meta: ComponentMeta< typeof DatePicker > = {
-	title: 'Components/DatePicker',
-	component: DatePicker,
-	argTypes: {
-		currentDate: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof DatePicker > = ( {
-	currentDate,
-	onChange,
-	...args
-} ) => {
-	const [ date, setDate ] = useState( currentDate );
-	useEffect( () => {
-		setDate( currentDate );
-	}, [ currentDate ] );
-	return (
-		<DatePicker
-			{ ...args }
-			currentDate={ date }
-			onChange={ ( newDate ) => {
-				setDate( newDate );
-				onChange?.( newDate );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
-
-export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
-	{}
-);
-WithEvents.args = {
-	currentDate: new Date(),
-	events: [
-		{ date: daysFromNow( 2 ) },
-		{ date: daysFromNow( 4 ) },
-		{ date: daysFromNow( 6 ) },
-		{ date: daysFromNow( 8 ) },
-	],
-};
-
-export const WithInvalidDates: ComponentStory< typeof DatePicker > =
-	Template.bind( {} );
-WithInvalidDates.args = {
-	currentDate: new Date(),
-	isInvalidDate: isWeekend,
-};
diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx
new file mode 100644
index 00000000000000..12e5574115a6c3
--- /dev/null
+++ b/packages/components/src/date-time/stories/time.story.tsx
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TimePicker from '../time';
+
+const meta: Meta< typeof TimePicker > = {
+	title: 'Components/Selection & Input/Time & Date/TimePicker',
+	id: 'components-timepicker',
+	component: TimePicker,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },
+	argTypes: {
+		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TimePicker > = ( {
+	currentTime,
+	onChange,
+	...args
+} ) => {
+	const [ time, setTime ] = useState( currentTime );
+	useEffect( () => {
+		setTime( currentTime );
+	}, [ currentTime ] );
+	return (
+		<TimePicker
+			{ ...args }
+			currentTime={ time }
+			onChange={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );
+
+const TimeInputTemplate: StoryFn< typeof TimePicker.TimeInput > = ( args ) => {
+	return <TimePicker.TimeInput { ...args } />;
+};
+
+/**
+ * The time input can be used in isolation as `<TimePicker.TimeInput />`. In this case, the `value` will be passed
+ * as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ */
+export const TimeInput = TimeInputTemplate.bind( {} );
+TimeInput.args = {
+	label: 'Time',
+};
+// Hide TimePicker controls because they don't apply to TimeInput
+TimeInput.parameters = { controls: { include: [] } };
diff --git a/packages/components/src/date-time/stories/time.tsx b/packages/components/src/date-time/stories/time.tsx
deleted file mode 100644
index 9fc72086075f7c..00000000000000
--- a/packages/components/src/date-time/stories/time.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TimePicker from '../time';
-
-const meta: ComponentMeta< typeof TimePicker > = {
-	title: 'Components/TimePicker',
-	component: TimePicker,
-	argTypes: {
-		currentTime: { control: 'date' },
-		onChange: { action: 'onChange', control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof TimePicker > = ( {
-	currentTime,
-	onChange,
-	...args
-} ) => {
-	const [ time, setTime ] = useState( currentTime );
-	useEffect( () => {
-		setTime( currentTime );
-	}, [ currentTime ] );
-	return (
-		<TimePicker
-			{ ...args }
-			currentTime={ time }
-			onChange={ ( newTime ) => {
-				setTime( newTime );
-				onChange?.( newTime );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index 77295b38f21edb..90a8a901354a39 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startOfMinute, format, set, setHours, setMonth } from 'date-fns';
+import { startOfMinute, format, set, setMonth } from 'date-fns';
 
 /**
  * WordPress dependencies
@@ -13,63 +13,29 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BaseControl from '../../base-control';
-import Button from '../../button';
-import ButtonGroup from '../../button-group';
+import { VisuallyHidden } from '../../visually-hidden';
+import SelectControl from '../../select-control';
 import TimeZone from './timezone';
-import type { TimePickerProps } from '../types';
+import type { TimeInputValue, TimePickerProps } from '../types';
 import {
 	Wrapper,
 	Fieldset,
-	HoursInput,
-	TimeSeparator,
-	MinutesInput,
 	MonthSelectWrapper,
-	MonthSelect,
 	DayInput,
 	YearInput,
-	TimeWrapper,
 } from './styles';
 import { HStack } from '../../h-stack';
 import { Spacer } from '../../spacer';
 import type { InputChangeCallback } from '../../input-control/types';
-import type { InputState } from '../../input-control/reducer/state';
 import {
-	COMMIT,
-	InputAction,
-	PRESS_DOWN,
-	PRESS_UP,
-} from '../../input-control/reducer/actions';
-import { inputToDate } from '../utils';
+	inputToDate,
+	buildPadInputStateReducer,
+	validateInputElementTarget,
+} from '../utils';
 import { TIMEZONELESS_FORMAT } from '../constants';
+import { TimeInput } from './time-input';
 
-function from12hTo24h( hours: number, isPm: boolean ) {
-	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
-}
-
-/**
- * Creates an InputControl reducer used to pad an input so that it is always a
- * given width. For example, the hours and minutes inputs are padded to 2 so
- * that '4' appears as '04'.
- *
- * @param  pad How many digits the value should be.
- */
-function buildPadInputStateReducer( pad: number ) {
-	return ( state: InputState, action: InputAction ) => {
-		const nextState = { ...state };
-		if (
-			action.type === COMMIT ||
-			action.type === PRESS_UP ||
-			action.type === PRESS_DOWN
-		) {
-			if ( nextState.value !== undefined ) {
-				nextState.value = nextState.value
-					.toString()
-					.padStart( pad, '0' );
-			}
-		}
-		return nextState;
-	};
-}
+const VALID_DATE_ORDERS = [ 'dmy', 'mdy', 'ymd' ];
 
 /**
  * TimePicker is a React component that renders a clock for time selection.
@@ -95,6 +61,8 @@ export function TimePicker( {
 	is12Hour,
 	currentTime,
 	onChange,
+	dateOrder: dateOrderProp,
+	hideLabelFromVision = false,
 }: TimePickerProps ) {
 	const [ date, setDate ] = useState( () =>
 		// Truncate the date at the minutes, see: #15495.
@@ -111,39 +79,44 @@ export function TimePicker( {
 		);
 	}, [ currentTime ] );
 
-	const { day, month, year, minutes, hours, am } = useMemo(
+	const monthOptions = [
+		{ value: '01', label: __( 'January' ) },
+		{ value: '02', label: __( 'February' ) },
+		{ value: '03', label: __( 'March' ) },
+		{ value: '04', label: __( 'April' ) },
+		{ value: '05', label: __( 'May' ) },
+		{ value: '06', label: __( 'June' ) },
+		{ value: '07', label: __( 'July' ) },
+		{ value: '08', label: __( 'August' ) },
+		{ value: '09', label: __( 'September' ) },
+		{ value: '10', label: __( 'October' ) },
+		{ value: '11', label: __( 'November' ) },
+		{ value: '12', label: __( 'December' ) },
+	] as const;
+
+	const { day, month, year, minutes, hours } = useMemo(
 		() => ( {
 			day: format( date, 'dd' ),
-			month: format( date, 'MM' ),
+			month: format(
+				date,
+				'MM'
+			) as ( typeof monthOptions )[ number ][ 'value' ],
 			year: format( date, 'yyyy' ),
 			minutes: format( date, 'mm' ),
-			hours: format( date, is12Hour ? 'hh' : 'HH' ),
+			hours: format( date, 'HH' ),
 			am: format( date, 'a' ),
 		} ),
-		[ date, is12Hour ]
+		[ date ]
 	);
 
-	const buildNumberControlChangeCallback = (
-		method: 'hours' | 'minutes' | 'date' | 'year'
-	) => {
+	const buildNumberControlChangeCallback = ( method: 'date' | 'year' ) => {
 		const callback: InputChangeCallback = ( value, { event } ) => {
-			if ( ! ( event.target instanceof HTMLInputElement ) ) {
-				return;
-			}
-
-			if ( ! event.target.validity.valid ) {
+			if ( ! validateInputElementTarget( event ) ) {
 				return;
 			}
 
 			// We can safely assume value is a number if target is valid.
-			let numberValue = Number( value );
-
-			// If the 12-hour format is being used and the 'PM' period is
-			// selected, then the incoming value (which ranges 1-12) should be
-			// increased by 12 to match the expected 24-hour format.
-			if ( method === 'hours' && is12Hour ) {
-				numberValue = from12hTo24h( numberValue, am === 'PM' );
-			}
+			const numberValue = Number( value );
 
 			const newDate = set( date, { [ method ]: numberValue } );
 			setDate( newDate );
@@ -152,29 +125,25 @@ export function TimePicker( {
 		return callback;
 	};
 
-	function buildAmPmChangeCallback( value: 'AM' | 'PM' ) {
-		return () => {
-			if ( am === value ) {
-				return;
-			}
-
-			const parsedHours = parseInt( hours, 10 );
-
-			const newDate = setHours(
-				date,
-				from12hTo24h( parsedHours, value === 'PM' )
-			);
-			setDate( newDate );
-			onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
-		};
-	}
+	const onTimeInputChangeCallback = ( {
+		hours: newHours,
+		minutes: newMinutes,
+	}: TimeInputValue ) => {
+		const newDate = set( date, {
+			hours: newHours,
+			minutes: newMinutes,
+		} );
+		setDate( newDate );
+		onChange?.( format( newDate, TIMEZONELESS_FORMAT ) );
+	};
 
 	const dayField = (
 		<DayInput
+			key="day"
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
-			__next36pxDefaultSize
+			__next40pxDefaultSize
 			value={ day }
 			step={ 1 }
 			min={ 1 }
@@ -189,27 +158,15 @@ export function TimePicker( {
 	);
 
 	const monthField = (
-		<MonthSelectWrapper>
-			<MonthSelect
+		<MonthSelectWrapper key="month">
+			<SelectControl
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
-				options={ [
-					{ value: '01', label: __( 'January' ) },
-					{ value: '02', label: __( 'February' ) },
-					{ value: '03', label: __( 'March' ) },
-					{ value: '04', label: __( 'April' ) },
-					{ value: '05', label: __( 'May' ) },
-					{ value: '06', label: __( 'June' ) },
-					{ value: '07', label: __( 'July' ) },
-					{ value: '08', label: __( 'August' ) },
-					{ value: '09', label: __( 'September' ) },
-					{ value: '10', label: __( 'October' ) },
-					{ value: '11', label: __( 'November' ) },
-					{ value: '12', label: __( 'December' ) },
-				] }
+				options={ monthOptions }
 				onChange={ ( value ) => {
 					const newDate = setMonth( date, Number( value ) - 1 );
 					setDate( newDate );
@@ -219,144 +176,124 @@ export function TimePicker( {
 		</MonthSelectWrapper>
 	);
 
+	const yearField = (
+		<YearInput
+			key="year"
+			className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+			label={ __( 'Year' ) }
+			hideLabelFromVision
+			__next40pxDefaultSize
+			value={ year }
+			step={ 1 }
+			min={ 1 }
+			max={ 9999 }
+			required
+			spinControls="none"
+			isPressEnterToChange
+			isDragEnabled={ false }
+			isShiftStepEnabled={ false }
+			onChange={ buildNumberControlChangeCallback( 'year' ) }
+			__unstableStateReducer={ buildPadInputStateReducer( 4 ) }
+		/>
+	);
+
+	const defaultDateOrder = is12Hour ? 'mdy' : 'dmy';
+	const dateOrder =
+		dateOrderProp && VALID_DATE_ORDERS.includes( dateOrderProp )
+			? dateOrderProp
+			: defaultDateOrder;
+
+	const fields = dateOrder.split( '' ).map( ( field ) => {
+		switch ( field ) {
+			case 'd':
+				return dayField;
+			case 'm':
+				return monthField;
+			case 'y':
+				return yearField;
+			default:
+				return null;
+		}
+	} );
+
 	return (
 		<Wrapper
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Time' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Time' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Time' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
-					<TimeWrapper
-						className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
-					>
-						<HoursInput
-							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
-							label={ __( 'Hours' ) }
-							hideLabelFromVision
-							__next36pxDefaultSize
-							value={ hours }
-							step={ 1 }
-							min={ is12Hour ? 1 : 0 }
-							max={ is12Hour ? 12 : 23 }
-							required
-							spinControls="none"
-							isPressEnterToChange
-							isDragEnabled={ false }
-							isShiftStepEnabled={ false }
-							onChange={ buildNumberControlChangeCallback(
-								'hours'
-							) }
-							__unstableStateReducer={ buildPadInputStateReducer(
-								2
-							) }
-						/>
-						<TimeSeparator
-							className="components-datetime__time-separator" // Unused, for backwards compatibility.
-							aria-hidden="true"
-						>
-							:
-						</TimeSeparator>
-						<MinutesInput
-							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
-							label={ __( 'Minutes' ) }
-							hideLabelFromVision
-							__next36pxDefaultSize
-							value={ minutes }
-							step={ 1 }
-							min={ 0 }
-							max={ 59 }
-							required
-							spinControls="none"
-							isPressEnterToChange
-							isDragEnabled={ false }
-							isShiftStepEnabled={ false }
-							onChange={ buildNumberControlChangeCallback(
-								'minutes'
-							) }
-							__unstableStateReducer={ buildPadInputStateReducer(
-								2
-							) }
-						/>
-					</TimeWrapper>
-					{ is12Hour && (
-						<ButtonGroup
-							className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
-						>
-							<Button
-								className="components-datetime__time-am-button" // Unused, for backwards compatibility.
-								variant={
-									am === 'AM' ? 'primary' : 'secondary'
-								}
-								onClick={ buildAmPmChangeCallback( 'AM' ) }
-							>
-								{ __( 'AM' ) }
-							</Button>
-							<Button
-								className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
-								variant={
-									am === 'PM' ? 'primary' : 'secondary'
-								}
-								onClick={ buildAmPmChangeCallback( 'PM' ) }
-							>
-								{ __( 'PM' ) }
-							</Button>
-						</ButtonGroup>
-					) }
+					<TimeInput
+						value={ {
+							hours: Number( hours ),
+							minutes: Number( minutes ),
+						} }
+						is12Hour={ is12Hour }
+						onChange={ onTimeInputChangeCallback }
+					/>
 					<Spacer />
 					<TimeZone />
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<BaseControl.VisualLabel
-					as="legend"
-					className="components-datetime__time-legend" // Unused, for backwards compatibility.
-				>
-					{ __( 'Date' ) }
-				</BaseControl.VisualLabel>
+				{ hideLabelFromVision ? (
+					<VisuallyHidden as="legend">
+						{ __( 'Date' ) }
+					</VisuallyHidden>
+				) : (
+					<BaseControl.VisualLabel
+						as="legend"
+						className="components-datetime__time-legend" // Unused, for backwards compatibility.
+					>
+						{ __( 'Date' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
-					{ is12Hour ? (
-						<>
-							{ monthField }
-							{ dayField }
-						</>
-					) : (
-						<>
-							{ dayField }
-							{ monthField }
-						</>
-					) }
-					<YearInput
-						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
-						label={ __( 'Year' ) }
-						hideLabelFromVision
-						__next36pxDefaultSize
-						value={ year }
-						step={ 1 }
-						min={ 1 }
-						max={ 9999 }
-						required
-						spinControls="none"
-						isPressEnterToChange
-						isDragEnabled={ false }
-						isShiftStepEnabled={ false }
-						onChange={ buildNumberControlChangeCallback( 'year' ) }
-						__unstableStateReducer={ buildPadInputStateReducer(
-							4
-						) }
-					/>
+					{ fields }
 				</HStack>
 			</Fieldset>
 		</Wrapper>
 	);
 }
 
+/**
+ * A component to input a time.
+ *
+ * Values are passed as an object in 24-hour format (`{ hours: number, minutes: number }`).
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimeInput = () => {
+ * 	const [ time, setTime ] = useState( { hours: 13, minutes: 30 } );
+ *
+ * 	return (
+ * 		<TimePicker.TimeInput
+ * 			value={ time }
+ * 			onChange={ setTime }
+ * 			label="Time"
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+TimePicker.TimeInput = TimeInput;
+Object.assign( TimePicker.TimeInput, { displayName: 'TimePicker.TimeInput' } );
+
 export default TimePicker;
diff --git a/packages/components/src/date-time/time/styles.ts b/packages/components/src/date-time/time/styles.ts
index bc579a6731ee98..066c8fb1d1d3cd 100644
--- a/packages/components/src/date-time/time/styles.ts
+++ b/packages/components/src/date-time/time/styles.ts
@@ -8,14 +8,12 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import {
 	Input,
 	BackdropUI,
 } from '../../input-control/styles/input-control-styles';
 import NumberControl from '../../number-control';
-import SelectControl from '../../select-control';
-import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
@@ -64,6 +62,7 @@ export const HoursInput = styled( NumberControl )`
 export const TimeSeparator = styled.span`
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
 	border-bottom: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 700 ] };
+	font-size: ${ CONFIG.fontSize };
 	line-height: calc(
 		${ CONFIG.controlHeight } - ${ CONFIG.borderWidth } * 2
 	);
@@ -92,14 +91,6 @@ export const MonthSelectWrapper = styled.div`
 	flex-grow: 1;
 `;
 
-export const MonthSelect = styled( SelectControl )`
-	height: 36px;
-
-	${ Select } {
-		line-height: 30px;
-	}
-`;
-
 export const DayInput = styled( NumberControl )`
 	${ baseInput }
 
diff --git a/packages/components/src/date-time/time/test/index.tsx b/packages/components/src/date-time/time/test/index.tsx
index 4b22cd232baf0e..6f843fda75336c 100644
--- a/packages/components/src/date-time/time/test/index.tsx
+++ b/packages/components/src/date-time/time/test/index.tsx
@@ -11,9 +11,7 @@ import TimePicker from '..';
 
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -67,9 +65,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -91,9 +87,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with a bounded hour (12-hour clock) if the hour is out of bounds', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -115,9 +109,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -139,9 +131,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with a bounded minute if out of bounds', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -163,9 +153,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should switch to PM correctly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -185,9 +173,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should switch to AM correctly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -207,9 +193,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should allow to set the time correctly when the PM period is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -242,9 +226,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should truncate at the minutes on change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -299,12 +281,9 @@ describe( 'TimePicker', () => {
 		expect(
 			( screen.getByLabelText( 'Minutes' ) as HTMLInputElement ).value
 		).toBe( '00' );
-		/**
-		 * This is not ideal, but best of we can do for now until we refactor
-		 * AM/PM into accessible elements, like radio buttons.
-		 */
-		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
-		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
+
+		expect( screen.getByRole( 'radio', { name: 'AM' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'PM' } ) ).toBeChecked();
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {
@@ -351,6 +330,67 @@ describe( 'TimePicker', () => {
 		expect( monthInputIndex < dayInputIndex ).toBe( true );
 	} );
 
+	it( 'Should change layouts/orders when `dateOrder` prop is passed', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<form aria-label="form">
+				<TimePicker
+					currentTime="1986-10-18T11:00:00"
+					onChange={ onChangeSpy }
+					dateOrder="ymd"
+				/>
+			</form>
+		);
+
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
+
+		const yearInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Year' )
+		);
+
+		const monthInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Month' )
+		);
+		const dayInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Day' )
+		);
+
+		expect( monthInputIndex > yearInputIndex ).toBe( true );
+		expect( dayInputIndex > monthInputIndex ).toBe( true );
+	} );
+
+	it( 'Should ignore `is12Hour` prop setting when `dateOrder` prop is explicitly passed', () => {
+		const onChangeSpy = jest.fn();
+
+		render(
+			<form aria-label="form">
+				<TimePicker
+					currentTime="1986-10-18T11:00:00"
+					onChange={ onChangeSpy }
+					dateOrder="ymd"
+					is12Hour
+				/>
+			</form>
+		);
+
+		const form = screen.getByRole( 'form' ) as HTMLFormElement;
+
+		const yearInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Year' )
+		);
+
+		const monthInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Month' )
+		);
+		const dayInputIndex = Array.from( form.elements ).indexOf(
+			screen.getByLabelText( 'Day' )
+		);
+
+		expect( monthInputIndex > yearInputIndex ).toBe( true );
+		expect( dayInputIndex > monthInputIndex ).toBe( true );
+	} );
+
 	it( 'Should set a time when passed a null currentTime', () => {
 		const onChangeSpy = jest.fn();
 
diff --git a/packages/components/src/date-time/time/time-input/index.tsx b/packages/components/src/date-time/time/time-input/index.tsx
new file mode 100644
index 00000000000000..e2628fdb7a2b46
--- /dev/null
+++ b/packages/components/src/date-time/time/time-input/index.tsx
@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TimeWrapper,
+	TimeSeparator,
+	HoursInput,
+	MinutesInput,
+	Fieldset,
+} from '../styles';
+import { HStack } from '../../../h-stack';
+import {
+	from12hTo24h,
+	from24hTo12h,
+	buildPadInputStateReducer,
+	validateInputElementTarget,
+} from '../../utils';
+import type { TimeInputProps } from '../../types';
+import type { InputChangeCallback } from '../../../input-control/types';
+import { useControlledValue } from '../../../utils';
+import BaseControl from '../../../base-control';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../../../toggle-group-control';
+
+export function TimeInput( {
+	value: valueProp,
+	defaultValue,
+	is12Hour,
+	label,
+	minutesProps,
+	onChange,
+}: TimeInputProps ) {
+	const [
+		value = {
+			hours: new Date().getHours(),
+			minutes: new Date().getMinutes(),
+		},
+		setValue,
+	] = useControlledValue( {
+		value: valueProp,
+		onChange,
+		defaultValue,
+	} );
+	const dayPeriod = parseDayPeriod( value.hours );
+	const hours12Format = from24hTo12h( value.hours );
+
+	const buildNumberControlChangeCallback = (
+		method: 'hours' | 'minutes'
+	): InputChangeCallback => {
+		return ( _value, { event } ) => {
+			if ( ! validateInputElementTarget( event ) ) {
+				return;
+			}
+
+			// We can safely assume value is a number if target is valid.
+			const numberValue = Number( _value );
+
+			setValue( {
+				...value,
+				[ method ]:
+					method === 'hours' && is12Hour
+						? from12hTo24h( numberValue, dayPeriod === 'PM' )
+						: numberValue,
+			} );
+		};
+	};
+
+	const buildAmPmChangeCallback = ( _value: 'AM' | 'PM' ) => {
+		return () => {
+			if ( dayPeriod === _value ) {
+				return;
+			}
+
+			setValue( {
+				...value,
+				hours: from12hTo24h( hours12Format, _value === 'PM' ),
+			} );
+		};
+	};
+
+	function parseDayPeriod( _hours: number ) {
+		return _hours < 12 ? 'AM' : 'PM';
+	}
+
+	const Wrapper = label ? Fieldset : Fragment;
+
+	return (
+		<Wrapper>
+			{ label && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+
+			<HStack alignment="left" expanded={ false }>
+				<TimeWrapper
+					className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+				>
+					<HoursInput
+						className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+						label={ __( 'Hours' ) }
+						hideLabelFromVision
+						__next40pxDefaultSize
+						value={ String(
+							is12Hour ? hours12Format : value.hours
+						).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ is12Hour ? 1 : 0 }
+						max={ is12Hour ? 12 : 23 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ buildNumberControlChangeCallback( 'hours' ) }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+					/>
+					<TimeSeparator
+						className="components-datetime__time-separator" // Unused, for backwards compatibility.
+						aria-hidden="true"
+					>
+						:
+					</TimeSeparator>
+					<MinutesInput
+						className={ clsx(
+							'components-datetime__time-field-minutes-input', // Unused, for backwards compatibility.
+							minutesProps?.className
+						) }
+						label={ __( 'Minutes' ) }
+						hideLabelFromVision
+						__next40pxDefaultSize
+						value={ String( value.minutes ).padStart( 2, '0' ) }
+						step={ 1 }
+						min={ 0 }
+						max={ 59 }
+						required
+						spinControls="none"
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ ( ...args ) => {
+							buildNumberControlChangeCallback( 'minutes' )(
+								...args
+							);
+							minutesProps?.onChange?.( ...args );
+						} }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							2
+						) }
+						{ ...minutesProps }
+					/>
+				</TimeWrapper>
+				{ is12Hour && (
+					<ToggleGroupControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						isBlock
+						label={ __( 'Select AM or PM' ) }
+						hideLabelFromVision
+						value={ dayPeriod }
+						onChange={ ( newValue ) => {
+							buildAmPmChangeCallback(
+								newValue as 'AM' | 'PM'
+							)();
+						} }
+					>
+						<ToggleGroupControlOption
+							value="AM"
+							label={ __( 'AM' ) }
+						/>
+						<ToggleGroupControlOption
+							value="PM"
+							label={ __( 'PM' ) }
+						/>
+					</ToggleGroupControl>
+				) }
+			</HStack>
+		</Wrapper>
+	);
+}
+export default TimeInput;
diff --git a/packages/components/src/date-time/time/time-input/test/index.tsx b/packages/components/src/date-time/time/time-input/test/index.tsx
new file mode 100644
index 00000000000000..eae082a12bc1c9
--- /dev/null
+++ b/packages/components/src/date-time/time/time-input/test/index.tsx
@@ -0,0 +1,170 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import TimeInput from '..';
+
+describe( 'TimeInput', () => {
+	it( 'should call onChange with updated values | 24-hours format', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				defaultValue={ timeInputValue }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const hoursInput = screen.getByRole( 'spinbutton', { name: 'Hours' } );
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+		onChangeSpy.mockClear();
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 12,
+			minutes: 35,
+		} );
+		onChangeSpy.mockClear();
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '23' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 23,
+			minutes: 35,
+		} );
+		onChangeSpy.mockClear();
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '0' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 23, minutes: 0 } );
+	} );
+
+	it( 'should call onChange with updated values | 12-hours format', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				is12Hour
+				defaultValue={ timeInputValue }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const hoursInput = screen.getByRole( 'spinbutton', { name: 'Hours' } );
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+		const amButton = screen.getByRole( 'radio', { name: 'AM' } );
+		const pmButton = screen.getByRole( 'radio', { name: 'PM' } );
+
+		expect( amButton ).toBeChecked();
+		expect( pmButton ).not.toBeChecked();
+		expect( hoursInput ).not.toHaveValue( 0 );
+		expect( hoursInput ).toHaveValue( 12 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '35' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+		expect( amButton ).toBeChecked();
+
+		await user.clear( hoursInput );
+		await user.type( hoursInput, '12' );
+		await user.keyboard( '{Tab}' );
+
+		expect( onChangeSpy ).toHaveBeenCalledWith( { hours: 0, minutes: 35 } );
+
+		await user.click( pmButton );
+		expect( onChangeSpy ).toHaveBeenCalledWith( {
+			hours: 12,
+			minutes: 35,
+		} );
+		expect( pmButton ).toBeChecked();
+	} );
+
+	it( 'should call onChange with defined minutes steps', async () => {
+		const user = userEvent.setup();
+
+		const timeInputValue = { hours: 0, minutes: 0 };
+		const onChangeSpy = jest.fn();
+
+		render(
+			<TimeInput
+				defaultValue={ timeInputValue }
+				minutesProps={ { step: 5 } }
+				onChange={ onChangeSpy }
+			/>
+		);
+
+		const minutesInput = screen.getByRole( 'spinbutton', {
+			name: 'Minutes',
+		} );
+
+		await user.clear( minutesInput );
+		await user.keyboard( '{ArrowUp}' );
+
+		expect( minutesInput ).toHaveValue( 5 );
+
+		await user.keyboard( '{ArrowUp}' );
+		await user.keyboard( '{ArrowUp}' );
+
+		expect( minutesInput ).toHaveValue( 15 );
+
+		await user.keyboard( '{ArrowDown}' );
+
+		expect( minutesInput ).toHaveValue( 10 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '44' );
+		await user.keyboard( '{Tab}' );
+
+		expect( minutesInput ).toHaveValue( 45 );
+
+		await user.clear( minutesInput );
+		await user.type( minutesInput, '51' );
+		await user.keyboard( '{Tab}' );
+
+		expect( minutesInput ).toHaveValue( 50 );
+	} );
+
+	it( 'should reflect changes to the value prop', () => {
+		const { rerender } = render(
+			<TimeInput value={ { hours: 0, minutes: 0 } } />
+		);
+		rerender( <TimeInput value={ { hours: 1, minutes: 2 } } /> );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Hours' } )
+		).toHaveValue( 1 );
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Minutes' } )
+		).toHaveValue( 2 );
+	} );
+} );
diff --git a/packages/components/src/date-time/time/timezone.tsx b/packages/components/src/date-time/time/timezone.tsx
index f878deddaa782a..5c839e8df3af48 100644
--- a/packages/components/src/date-time/time/timezone.tsx
+++ b/packages/components/src/date-time/time/timezone.tsx
@@ -30,15 +30,27 @@ const TimeZone = () => {
 	const zoneAbbr =
 		'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )
 			? timezone.abbr
-			: `UTC${ offsetSymbol }${ timezone.offset }`;
+			: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;
+
+	// Replace underscore with space in strings like `America/Costa_Rica`.
+	const prettyTimezoneString = timezone.string.replace( '_', ' ' );
 
 	const timezoneDetail =
 		'UTC' === timezone.string
 			? __( 'Coordinated Universal Time' )
-			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
-
-	return (
-		<Tooltip position="top center" text={ timezoneDetail }>
+			: `(${ zoneAbbr }) ${ prettyTimezoneString }`;
+
+	// When the prettyTimezoneString is empty, there is no additional timezone
+	// detail information to show in a Tooltip.
+	const hasNoAdditionalTimezoneDetail =
+		prettyTimezoneString.trim().length === 0;
+
+	return hasNoAdditionalTimezoneDetail ? (
+		<StyledComponent className="components-datetime__timezone">
+			{ zoneAbbr }
+		</StyledComponent>
+	) : (
+		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }
 			</StyledComponent>
diff --git a/packages/components/src/date-time/types.ts b/packages/components/src/date-time/types.ts
index ae99a7082dcd27..1f2298d9d450b5 100644
--- a/packages/components/src/date-time/types.ts
+++ b/packages/components/src/date-time/types.ts
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import type { MinutesInput } from './time/styles';
+
 export type TimePickerProps = {
 	/**
 	 * The initial current time the time picker should render.
@@ -11,11 +16,76 @@ export type TimePickerProps = {
 	 */
 	is12Hour?: boolean;
 
+	/**
+	 * The order of day, month, and year. This prop overrides the time format
+	 * determined by `is12Hour` prop.
+	 *
+	 * @default 'dmy'
+	 */
+	dateOrder?: 'dmy' | 'mdy' | 'ymd';
+
 	/**
 	 * The function called when a new time has been selected. It is passed the
 	 * time as an argument.
 	 */
 	onChange?: ( time: string ) => void;
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+};
+
+export type TimeInputValue = {
+	/**
+	 * The hours value in 24-hour format.
+	 */
+	hours: number;
+
+	/**
+	 * The minutes value.
+	 */
+	minutes: number;
+};
+
+export type TimeInputProps = {
+	/**
+	 * Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is
+	 * displayed
+	 */
+	is12Hour?: boolean;
+
+	/**
+	 * The time input object with hours and minutes values.
+	 *
+	 * - hours: number (24-hour format)
+	 * - minutes: number
+	 */
+	value?: TimeInputValue;
+
+	/**
+	 * An optional default value for the control when used in uncontrolled mode.
+	 * If left `undefined`, the current time will be used.
+	 */
+	defaultValue?: TimeInputValue;
+
+	/**
+	 * The props to pass down to the minutes input.
+	 */
+	minutesProps?: React.ComponentProps< typeof MinutesInput >;
+
+	/**
+	 * The label for the time input.
+	 */
+	label?: string;
+
+	/**
+	 * The function is called when a new time has been selected.
+	 * Passing hours and minutes as an object properties.
+	 */
+	onChange?: ( time: TimeInputValue ) => void;
 };
 
 export type DatePickerEvent = {
@@ -67,26 +137,13 @@ export type DatePickerProps = {
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &
-	Omit< TimePickerProps, 'currentTime' | 'onChange' > & {
+	Omit<
+		TimePickerProps,
+		'currentTime' | 'onChange' | 'hideLabelFromVision'
+	> & {
 		/**
 		 * The function called when a new date or time has been selected. It is
 		 * passed the date and time as an argument.
 		 */
 		onChange?: ( date: string | null ) => void;
-
-		/**
-		 * Start opting in to not displaying a Help button which will become the
-		 * default in a future version.
-		 *
-		 * @default false
-		 */
-		__nextRemoveHelpButton?: boolean;
-
-		/**
-		 * Start opting in to not displaying a Reset button which will become
-		 * the default in a future version.
-		 *
-		 * @default false
-		 */
-		__nextRemoveResetButton?: boolean;
 	};
diff --git a/packages/components/src/date-time/utils.ts b/packages/components/src/date-time/utils.ts
index e99f52f9900413..76250edc1959cd 100644
--- a/packages/components/src/date-time/utils.ts
+++ b/packages/components/src/date-time/utils.ts
@@ -3,11 +3,18 @@
  */
 import { toDate } from 'date-fns';
 
+/**
+ * Internal dependencies
+ */
+import type { InputState } from '../input-control/reducer/state';
+import type { InputAction } from '../input-control/reducer/actions';
+import { COMMIT, PRESS_DOWN, PRESS_UP } from '../input-control/reducer/actions';
+
 /**
  * Like date-fn's toDate, but tries to guess the format when a string is
  * given.
  *
- * @param  input Value to turn into a date.
+ * @param input Value to turn into a date.
  */
 export function inputToDate( input: Date | string | number ): Date {
 	if ( typeof input === 'string' ) {
@@ -15,3 +22,65 @@ export function inputToDate( input: Date | string | number ): Date {
 	}
 	return toDate( input );
 }
+
+/**
+ * Converts a 12-hour time to a 24-hour time.
+ * @param hours
+ * @param isPm
+ */
+export function from12hTo24h( hours: number, isPm: boolean ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
+/**
+ * Converts a 24-hour time to a 12-hour time.
+ * @param hours
+ */
+export function from24hTo12h( hours: number ) {
+	return hours % 12 || 12;
+}
+
+/**
+ * Creates an InputControl reducer used to pad an input so that it is always a
+ * given width. For example, the hours and minutes inputs are padded to 2 so
+ * that '4' appears as '04'.
+ *
+ * @param pad How many digits the value should be.
+ */
+export function buildPadInputStateReducer( pad: number ) {
+	return ( state: InputState, action: InputAction ) => {
+		const nextState = { ...state };
+		if (
+			action.type === COMMIT ||
+			action.type === PRESS_UP ||
+			action.type === PRESS_DOWN
+		) {
+			if ( nextState.value !== undefined ) {
+				nextState.value = nextState.value
+					.toString()
+					.padStart( pad, '0' );
+			}
+		}
+		return nextState;
+	};
+}
+
+/**
+ * Validates the target of a React event to ensure it is an input element and
+ * that the input is valid.
+ * @param event
+ */
+export function validateInputElementTarget( event: React.SyntheticEvent ) {
+	// `instanceof` checks need to get the instance definition from the
+	// corresponding window object — therefore, the following logic makes
+	// the component work correctly even when rendered inside an iframe.
+	const HTMLInputElementInstance =
+		( event.target as HTMLInputElement )?.ownerDocument.defaultView
+			?.HTMLInputElement ?? HTMLInputElement;
+
+	if ( ! ( event.target instanceof HTMLInputElementInstance ) ) {
+		return false;
+	}
+
+	return event.target.validity.valid;
+}
diff --git a/packages/components/src/dimension-control/README.md b/packages/components/src/dimension-control/README.md
index d310820a12f84d..fd04d99ca4ca93 100644
--- a/packages/components/src/dimension-control/README.md
+++ b/packages/components/src/dimension-control/README.md
@@ -1,5 +1,9 @@
 # DimensionControl
 
+<div class="callout callout-alert">
+This component is deprecated.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
@@ -8,77 +12,48 @@ This feature is still experimental. “Experimental” means this is an early im
 
 ## Usage
 
-In a block's `edit` implementation, render a `<DimensionControl />` component.
-
 ```jsx
-import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { DimensionControl } from '@wordpress/components';
-
-const partialRight =
-	( fn, ...partialArgs ) =>
-	( ...args ) =>
-		fn( ...args, ...partialArgs );
-
-registerBlockType( 'my-plugin/my-block', {
-	// ...
-
-	attributes: {
-		// other attributes here
-		// ...
-
-		paddingSize: {
-			type: 'string',
-		},
-	},
-
-	edit( { attributes, setAttributes, clientId } ) {
-		const { paddingSize } = attributes;
-
-		const updateSpacing = ( dimension, size, device = '' ) => {
-			setAttributes( {
-				[ `${ dimension }${ device }` ]: size,
-			} );
-		};
-
-		return (
-			<DimensionControl
-				label={ __( 'Padding' ) }
-				icon={ 'desktop' }
-				onChange={ partialRight( updateSpacing, 'paddingSize' ) }
-				value={ paddingSize }
-			/>
-		);
-	},
-} );
+import { useState } from 'react';
+import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+
+export default function MyCustomDimensionControl() {
+	const [ paddingSize, setPaddingSize ] = useState( '' );
+
+	return (
+		<DimensionControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ 'Padding' }
+			icon={ 'desktop' }
+			onChange={ ( value ) => setPaddingSize( value ) }
+			value={ paddingSize }
+		/>
+	);
+}
 ```
 
-_Note:_ it is recommended to partially apply the value of the Block attribute to be updated (eg: `paddingSize`, `marginSize`...etc) to your callback functions. This avoids the need to unnecessarily couple the component to the Block attribute schema.
-
 _Note:_ by default, if you do not provide an initial `value` prop for the current dimension value, then no value will be selected (ie: there is no default dimension set).
 
 ## Props
 
 ### `label`
 
--   **Type:** `String`
--   **Default:** `undefined`
+-   **Type:** `string`
 -   **Required:** Yes
 
 The human readable label for the control.
 
 ### `value`
 
--   **Type:** `String`
--   **Default:** `''`
+-   **Type:** `string`
 -   **Required:** No
 
 The current value of the dimension UI control. If provided the UI with automatically select the value.
 
 ### `sizes`
 
--   **Type:** `Array`
--   **Default:** See `packages/block-editor/src/components/dimension-control/sizes.js`
+-   **Type:** `{ name: string; slug: string }[]`
+-   **Default:** See `packages/block-editor/src/components/dimension-control/sizes.ts`
 -   **Required:** No
 
 An optional array of size objects in the following shape:
@@ -101,16 +76,14 @@ By default a set of relative sizes (`small`, `medium`...etc) are provided. See `
 
 ### `icon`
 
--   **Type:** `String`
--   **Default:** `undefined`
+-   **Type:** `string`
 -   **Required:** No
 
 An optional dashicon to display before to the control label.
 
 ### `onChange`
 
--   **Type:** `Function`
--   **Default:** `undefined`
+-   **Type:** `( value?: string ) => void;`
 -   **Required:** No
 -   **Arguments:**:
     -   `size` - a string representing the selected size (eg: `medium`)
@@ -119,8 +92,24 @@ A callback which is triggered when a spacing size value changes (is selected/cli
 
 ### `className`
 
--   **Type:** `String`
+-   **Type:** `string`
 -   **Default:** `''`
 -   **Required:** No
 
 A string of classes to be added to the control component.
+
+### `__next40pxDefaultSize`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+### `__nextHasNoMarginBottom`
+
+-   **Type:** `Boolean`
+-   **Required:** No
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/dimension-control/index.js b/packages/components/src/dimension-control/index.js
deleted file mode 100644
index 3e782e748a90d4..00000000000000
--- a/packages/components/src/dimension-control/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Icon, SelectControl } from '../';
-import sizesTable, { findSizeBySlug } from './sizes';
-
-export function DimensionControl( props ) {
-	const {
-		label,
-		value,
-		sizes = sizesTable,
-		icon,
-		onChange,
-		className = '',
-	} = props;
-
-	const onChangeSpacingSize = ( val ) => {
-		const theSize = findSizeBySlug( sizes, val );
-
-		if ( ! theSize || value === theSize.slug ) {
-			onChange( undefined );
-		} else if ( typeof onChange === 'function' ) {
-			onChange( theSize.slug );
-		}
-	};
-
-	const formatSizesAsOptions = ( theSizes ) => {
-		const options = theSizes.map( ( { name, slug } ) => ( {
-			label: name,
-			value: slug,
-		} ) );
-
-		return [
-			{
-				label: __( 'Default' ),
-				value: '',
-			},
-		].concat( options );
-	};
-
-	const selectLabel = (
-		<Fragment>
-			{ icon && <Icon icon={ icon } /> }
-			{ label }
-		</Fragment>
-	);
-
-	return (
-		<SelectControl
-			className={ classnames(
-				className,
-				'block-editor-dimension-control'
-			) }
-			label={ selectLabel }
-			hideLabelFromVision={ false }
-			value={ value }
-			onChange={ onChangeSpacingSize }
-			options={ formatSizesAsOptions( sizes ) }
-		/>
-	);
-}
-
-export default DimensionControl;
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
new file mode 100644
index 00000000000000..2cc39379ebde0c
--- /dev/null
+++ b/packages/components/src/dimension-control/index.tsx
@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../icon';
+import SelectControl from '../select-control';
+import sizesTable, { findSizeBySlug } from './sizes';
+import type { DimensionControlProps, Size } from './types';
+import type { SelectControlSingleSelectionProps } from '../select-control/types';
+import { ContextSystemProvider } from '../context';
+import deprecated from '@wordpress/deprecated';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'DimensionControl' },
+	},
+};
+
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * @deprecated
+ *
+ * ```jsx
+ * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * export default function MyCustomDimensionControl() {
+ * 	const [ paddingSize, setPaddingSize ] = useState( '' );
+ *
+ * 	return (
+ * 		<DimensionControl
+ * 			__next40pxDefaultSize
+ * 			__nextHasNoMarginBottom
+ * 			label={ 'Padding' }
+ * 			icon={ 'desktop' }
+ * 			onChange={ ( value ) => setPaddingSize( value ) }
+ * 			value={ paddingSize }
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
+export function DimensionControl( props: DimensionControlProps ) {
+	const {
+		__next40pxDefaultSize = false,
+		__nextHasNoMarginBottom = false,
+		label,
+		value,
+		sizes = sizesTable,
+		icon,
+		onChange,
+		className = '',
+	} = props;
+
+	deprecated( 'wp.components.DimensionControl', {
+		since: '6.7',
+		version: '7.0',
+	} );
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'DimensionControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
+	const onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =
+		( val ) => {
+			const theSize = findSizeBySlug( sizes, val );
+
+			if ( ! theSize || value === theSize.slug ) {
+				onChange?.( undefined );
+			} else if ( typeof onChange === 'function' ) {
+				onChange( theSize.slug );
+			}
+		};
+
+	const formatSizesAsOptions = ( theSizes: Size[] ) => {
+		const options = theSizes.map( ( { name, slug } ) => ( {
+			label: name,
+			value: slug,
+		} ) );
+
+		return [
+			{
+				label: __( 'Default' ),
+				value: '',
+			},
+			...options,
+		];
+	};
+
+	const selectLabel = (
+		<>
+			{ icon && <Icon icon={ icon } /> }
+			{ label }
+		</>
+	);
+
+	return (
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				className={ clsx(
+					className,
+					'block-editor-dimension-control'
+				) }
+				label={ selectLabel }
+				hideLabelFromVision={ false }
+				value={ value }
+				onChange={ onChangeSpacingSize }
+				options={ formatSizesAsOptions( sizes ) }
+			/>
+		</ContextSystemProvider>
+	);
+}
+
+export default DimensionControl;
diff --git a/packages/components/src/dimension-control/sizes.js b/packages/components/src/dimension-control/sizes.js
deleted file mode 100644
index 55dcff9698d4e4..00000000000000
--- a/packages/components/src/dimension-control/sizes.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Sizes
- *
- * defines the sizes used in dimension controls
- * all hardcoded `size` values are based on the value of
- * the Sass variable `$block-padding` from
- * `packages/block-editor/src/components/dimension-control/sizes.js`.
- */
-
-/**
- * WordPress dependencies
- */
-import { _x } from '@wordpress/i18n';
-
-/**
- * Finds the correct size object from the provided sizes
- * table by size slug (eg: `medium`)
- *
- * @param {Array}  sizes containing objects for each size definition.
- * @param {string} slug  a string representation of the size (eg: `medium`).
- *
- * @return {Object} the matching size definition.
- */
-export const findSizeBySlug = ( sizes, slug ) =>
-	sizes.find( ( size ) => slug === size.slug );
-
-export default [
-	{
-		name: _x( 'None', 'Size of a UI element' ),
-		slug: 'none',
-	},
-	{
-		name: _x( 'Small', 'Size of a UI element' ),
-		slug: 'small',
-	},
-	{
-		name: _x( 'Medium', 'Size of a UI element' ),
-		slug: 'medium',
-	},
-	{
-		name: _x( 'Large', 'Size of a UI element' ),
-		slug: 'large',
-	},
-	{
-		name: _x( 'Extra Large', 'Size of a UI element' ),
-		slug: 'xlarge',
-	},
-];
diff --git a/packages/components/src/dimension-control/sizes.ts b/packages/components/src/dimension-control/sizes.ts
new file mode 100644
index 00000000000000..40700d34f191df
--- /dev/null
+++ b/packages/components/src/dimension-control/sizes.ts
@@ -0,0 +1,51 @@
+/**
+ * Sizes
+ *
+ * defines the sizes used in dimension controls
+ * all hardcoded `size` values are based on the value of
+ * the Sass variable `$block-padding` from
+ * `packages/block-editor/src/components/dimension-control/sizes.js`.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Size } from './types';
+
+/**
+ * Finds the correct size object from the provided sizes
+ * table by size slug (eg: `medium`)
+ *
+ * @param sizes containing objects for each size definition.
+ * @param slug  a string representation of the size (eg: `medium`).
+ */
+export const findSizeBySlug = ( sizes: Size[], slug: string ) =>
+	sizes.find( ( size ) => slug === size.slug );
+
+export default [
+	{
+		name: _x( 'None', 'Size of a UI element' ),
+		slug: 'none',
+	},
+	{
+		name: _x( 'Small', 'Size of a UI element' ),
+		slug: 'small',
+	},
+	{
+		name: _x( 'Medium', 'Size of a UI element' ),
+		slug: 'medium',
+	},
+	{
+		name: _x( 'Large', 'Size of a UI element' ),
+		slug: 'large',
+	},
+	{
+		name: _x( 'Extra Large', 'Size of a UI element' ),
+		slug: 'xlarge',
+	},
+];
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..086d75b198fb05
--- /dev/null
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { DimensionControl } from '..';
+import sizes from '../sizes';
+
+/**
+ * WordPress dependencies
+ */
+import { desktop, tablet, mobile } from '@wordpress/icons';
+
+/**
+ * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.
+ *
+ * This component is deprecated.
+ */
+const meta: Meta< typeof DimensionControl > = {
+	component: DimensionControl,
+	title: 'Components (Deprecated)/DimensionControl',
+	id: 'components-dimensioncontrol',
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: false },
+		icon: {
+			control: { type: 'select' },
+			options: [ '-', 'desktop', 'tablet', 'mobile' ],
+			mapping: {
+				'-': undefined,
+				desktop,
+				tablet,
+				mobile,
+			},
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof DimensionControl > = ( args ) => (
+	<DimensionControl { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	label: 'Please select a size',
+	sizes,
+};
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index 5f932fd5e0fffb..fd6cc2df3fcde7 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -13,15 +13,11 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -37,18 +33,26 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-8 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -58,15 +62,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -82,7 +88,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -97,11 +103,11 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -110,32 +116,32 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  color: currentColor;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
+  overflow: hidden;
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -150,23 +156,30 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   display: flex;
 }
 
-.emotion-20 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+.emotion-21 {
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -175,9 +188,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -189,17 +199,17 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-3"
@@ -208,10 +218,10 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-3"
           >
             <option
@@ -236,15 +246,15 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -263,7 +273,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -285,15 +295,11 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -309,18 +315,26 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-8 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -330,15 +344,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -354,7 +370,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -369,11 +385,11 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -382,32 +398,32 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  color: currentColor;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
+  overflow: hidden;
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -422,23 +438,30 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   display: flex;
 }
 
-.emotion-20 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+.emotion-21 {
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -447,9 +470,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -461,17 +481,17 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-0"
@@ -480,10 +500,10 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-0"
           >
             <option
@@ -518,15 +538,15 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -545,7 +565,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -567,15 +587,11 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -591,18 +607,26 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-8 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -612,15 +636,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -636,7 +662,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -651,11 +677,11 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -664,32 +690,32 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  color: currentColor;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
+  overflow: hidden;
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -704,23 +730,30 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+.emotion-21 {
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -729,9 +762,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -743,17 +773,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-2"
@@ -767,17 +797,17 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-2"
           >
             <option
@@ -812,15 +842,15 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -839,7 +869,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
@@ -861,15 +891,11 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
 
-.emotion-5 {
+.emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -885,18 +911,26 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
+  color: var(--wp-components-color-foreground, #1e1e1e);
+  cursor: pointer;
 }
 
-.emotion-5>* {
+.emotion-6>* {
   min-height: 0;
 }
 
-.emotion-8 {
+.emotion-6:focus-within:not( :has( :is( .em5sgkm8, .emotion-19 ):focus-within ) ) .emotion-26 {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-9 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -906,15 +940,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   max-width: calc( 100% - 10px );
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
 
-.emotion-11.emotion-11.emotion-11 {
+.emotion-12.emotion-12.emotion-12 {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.4;
@@ -930,7 +966,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   white-space: nowrap;
 }
 
-.emotion-13 {
+.emotion-14 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -945,11 +981,11 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
-.emotion-15.emotion-15.emotion-15 {
+.emotion-16.emotion-16.emotion-16 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -958,32 +994,32 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
-  color: #1e1e1e;
+  color: currentColor;
+  cursor: inherit;
   display: block;
   font-family: inherit;
   margin: 0;
   width: 100%;
   max-width: none;
-  cursor: pointer;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   font-size: 16px;
-  height: 30px;
-  min-height: 30px;
+  height: 40px;
+  min-height: 40px;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: 8px;
-  padding-right: 26px;
+  padding-left: 12px;
+  padding-right: 30px;
+  overflow: hidden;
 }
 
 @media ( min-width: 600px ) {
-  .emotion-15.emotion-15.emotion-15 {
+  .emotion-16.emotion-16.emotion-16 {
     font-size: 13px;
   }
 }
 
-.emotion-17 {
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -998,23 +1034,30 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   display: flex;
 }
 
-.emotion-20 {
-  margin-bottom: 0;
-  padding-right: calc(4px * 2);
+.emotion-21 {
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
   position: absolute;
   pointer-events: none;
   right: 0;
 }
 
-.emotion-22 {
+.emotion-23 {
   -webkit-margin-end: calc(4px * -1);
   margin-inline-end: calc(4px * -1);
   line-height: 0;
 }
 
-.emotion-24.emotion-24.emotion-24 {
+.emotion-23 path {
+  fill: currentColor;
+}
+
+.emotion-25.emotion-25.emotion-25 {
   box-sizing: border-box;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
   bottom: 0;
   left: 0;
   margin: 0;
@@ -1023,9 +1066,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
-  border-style: solid;
-  border-width: 1px;
   padding-left: 2px;
 }
 
@@ -1037,17 +1077,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
-          class="components-flex-item emotion-7 emotion-8 emotion-6"
+          class="components-flex-item emotion-8 emotion-9 emotion-7"
           data-wp-c16t="true"
           data-wp-component="FlexItem"
         >
           <label
-            class="components-truncate components-text components-input-control__label emotion-10 emotion-11 emotion-6"
+            class="components-truncate components-text components-input-control__label emotion-11 emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="Text"
             for="inspector-select-control-1"
@@ -1061,17 +1101,17 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z"
+                d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
               />
             </svg>
             Margin
           </label>
         </div>
         <div
-          class="components-input-control__container emotion-13 emotion-14"
+          class="components-input-control__container emotion-14 emotion-15"
         >
           <select
-            class="components-select-control__input emotion-15 emotion-16"
+            class="components-select-control__input emotion-16 emotion-17"
             id="inspector-select-control-1"
           >
             <option
@@ -1106,15 +1146,15 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
             </option>
           </select>
           <span
-            class="components-input-control__suffix emotion-17 emotion-18"
+            class="components-input-control__suffix emotion-18 emotion-19"
           >
             <div
-              class="components-spacer components-input-control-suffix-wrapper emotion-19 emotion-20 emotion-6"
+              class="components-input-control-suffix-wrapper emotion-20 emotion-21 emotion-22"
               data-wp-c16t="true"
               data-wp-component="InputControlSuffixWrapper"
             >
               <div
-                class="emotion-22 emotion-23"
+                class="emotion-23 emotion-24"
               >
                 <svg
                   aria-hidden="true"
@@ -1133,7 +1173,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
           </span>
           <div
             aria-hidden="true"
-            class="components-input-control__backdrop emotion-24 emotion-25"
+            class="components-input-control__backdrop emotion-25 emotion-26"
           />
         </div>
       </div>
diff --git a/packages/components/src/dimension-control/test/index.test.js b/packages/components/src/dimension-control/test/index.test.js
index b1e92add6fd00b..8f3cb7ea944cd1 100644
--- a/packages/components/src/dimension-control/test/index.test.js
+++ b/packages/components/src/dimension-control/test/index.test.js
@@ -12,7 +12,17 @@ import { plus } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { DimensionControl } from '../';
+import { DimensionControl as _DimensionControl } from '../';
+
+const DimensionControl = ( props ) => {
+	return (
+		<_DimensionControl
+			{ ...props }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+};
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
@@ -25,11 +35,9 @@ describe( 'DimensionControl', () => {
 	describe( 'rendering', () => {
 		it( 'renders with defaults', () => {
 			const { container } = render(
-				<DimensionControl
-					instanceId={ instanceId }
-					label={ 'Padding' }
-				/>
+				<DimensionControl instanceId={ instanceId } label="Padding" />
 			);
+			expect( console ).toHaveWarned();
 			expect( container ).toMatchSnapshot();
 		} );
 
@@ -37,7 +45,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
 				/>
 			);
@@ -48,9 +56,9 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Margin' }
+					label="Margin"
 					icon={ plus }
-					iconLabel={ 'Tablet Devices' }
+					iconLabel="Tablet Devices"
 				/>
 			);
 			expect( container ).toMatchSnapshot();
@@ -78,7 +86,7 @@ describe( 'DimensionControl', () => {
 			const { container } = render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Custom Dimension' }
+					label="Custom Dimension"
 					sizes={ customSizes }
 				/>
 			);
@@ -88,14 +96,12 @@ describe( 'DimensionControl', () => {
 
 	describe( 'callbacks', () => {
 		it( 'should call onChange handler with correct args on size change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);
@@ -112,14 +118,12 @@ describe( 'DimensionControl', () => {
 		} );
 
 		it( 'should call onChange handler with undefined value when no size is provided on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<DimensionControl
 					instanceId={ instanceId }
-					label={ 'Padding' }
+					label="Padding"
 					onChange={ onChangeHandler }
 				/>
 			);
diff --git a/packages/components/src/dimension-control/types.ts b/packages/components/src/dimension-control/types.ts
new file mode 100644
index 00000000000000..03a4edf29153b7
--- /dev/null
+++ b/packages/components/src/dimension-control/types.ts
@@ -0,0 +1,52 @@
+/**
+ * Internal dependencies
+ */
+import type { IconType } from '../icon';
+import type { SelectControlProps } from '../select-control/types';
+
+export type Size = {
+	/**
+	 * Human-readable name of the size.
+	 */
+	name: string;
+	/**
+	 * Short unique identifying name of the size.
+	 */
+	slug: string;
+};
+
+export type DimensionControlProps = Pick<
+	SelectControlProps,
+	'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+> & {
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * An array of sizes to choose from.
+	 *
+	 * @default DEFAULT_SIZES
+	 *
+	 * @see packages/components/src/dimension-control/sizes.ts
+	 */
+	sizes?: Size[];
+	/**
+	 * Optional icon rendered in front on the label.
+	 */
+	icon?: IconType;
+	/**
+	 * Used to externally control the current value of the control.
+	 */
+	value?: string;
+	/**
+	 * Function called with the control's internal state changes. The `value` property is equal to a given size slug.
+	 */
+	onChange?: ( value?: string ) => void;
+	/**
+	 * CSS class applied to `SelectControl`.
+	 *
+	 * @default ''
+	 */
+	className?: string;
+};
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
index c36afc2044bd20..e9eb6398554d9d 100644
--- a/packages/components/src/disabled/README.md
+++ b/packages/components/src/disabled/README.md
@@ -7,13 +7,20 @@ Disabled is a component which disables descendant tabbable elements and prevents
 Assuming you have a form component, you can disable all form inputs by wrapping the form with `<Disabled>`.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Disabled, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDisabled = () => {
 	const [ isDisabled, setIsDisabled ] = useState( true );
 
-	let input = <TextControl label="Input" onChange={ () => {} } />;
+	let input = (
+		<TextControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label="Input"
+			onChange={ () => {} }
+		/>
+	);
 	if ( isDisabled ) {
 		input = <Disabled>{ input }</Disabled>;
 	}
@@ -33,17 +40,12 @@ const MyDisabled = () => {
 };
 ```
 
-A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Context`.
+A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://react.dev/learn/passing-data-deeply-with-context) using `Disabled.Context`.
 
 ```jsx
 function CustomButton( props ) {
 	const isDisabled = useContext( Disabled.Context );
-	return (
-		<button
-			{ ...props }
-			style={ { opacity: isDisabled ? 0.5 : 1 } }
-		/>
-	);
+	return <button { ...props } style={ { opacity: isDisabled ? 0.5 : 1 } } />;
 }
 ```
 
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 91c4316f3a6d82..cc55a4d2e6d672 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/packages/components/src/disabled/index.tsx
@@ -8,7 +8,7 @@ import { createContext } from '@wordpress/element';
  */
 import { disabledStyles } from './styles/disabled-styles';
 import type { DisabledProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );
@@ -31,7 +31,14 @@ const { Consumer, Provider } = Context;
  * const MyDisabled = () => {
  * 	const [ isDisabled, setIsDisabled ] = useState( true );
  *
- * 	let input = <TextControl label="Input" onChange={ () => {} } />;
+ *	let input = (
+ *		<TextControl
+ *			__next40pxDefaultSize
+ *			__nextHasNoMarginBottom
+ *			label="Input"
+ *			onChange={ () => {} }
+ *		/>
+ *	);
  * 	if ( isDisabled ) {
  * 		input = <Disabled>{ input }</Disabled>;
  * 	}
diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx
new file mode 100644
index 00000000000000..7a42da71f8efe9
--- /dev/null
+++ b/packages/components/src/disabled/stories/index.story.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+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: Meta< typeof Disabled > = {
+	title: 'Components/Utilities/Disabled',
+	id: 'components-disabled',
+	component: Disabled,
+	argTypes: {
+		as: { control: false },
+		children: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+const Form = () => {
+	const [ textControlValue, setTextControlValue ] = useState( '' );
+	const [ textAreaValue, setTextAreaValue ] = useState( '' );
+	return (
+		<VStack>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label="Text Control"
+				value={ textControlValue }
+				onChange={ setTextControlValue }
+			/>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				label="TextArea Control"
+				value={ textAreaValue }
+				onChange={ setTextAreaValue }
+			/>
+			<SelectControl
+				__nextHasNoMarginBottom
+				label="Select Control"
+				onChange={ () => {} }
+				options={ [
+					{ value: '', label: 'Select an option', disabled: true },
+					{ value: 'a', label: 'Option A' },
+					{ value: 'b', label: 'Option B' },
+					{ value: 'c', label: 'Option C' },
+				] }
+			/>
+		</VStack>
+	);
+};
+
+export const Default: StoryFn< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<Form />
+		</Disabled>
+	);
+};
+Default.args = {
+	isDisabled: true,
+};
+
+export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => {
+	return (
+		<Disabled { ...args }>
+			<div contentEditable tabIndex={ 0 }>
+				contentEditable
+			</div>
+		</Disabled>
+	);
+};
+ContentEditable.args = {
+	isDisabled: true,
+};
diff --git a/packages/components/src/disabled/stories/index.tsx b/packages/components/src/disabled/stories/index.tsx
deleted file mode 100644
index 06246adde633f1..00000000000000
--- a/packages/components/src/disabled/stories/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Disabled from '../';
-import SelectControl from '../../select-control/';
-import TextControl from '../../text-control/';
-import TextareaControl from '../../textarea-control/';
-
-const meta: ComponentMeta< typeof Disabled > = {
-	title: 'Components/Disabled',
-	component: Disabled,
-	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-
-export default meta;
-
-const Form = () => {
-	const [ textControlValue, setTextControlValue ] = useState( '' );
-	const [ textAreaValue, setTextAreaValue ] = useState( '' );
-	return (
-		<div>
-			<TextControl
-				label="Text Control"
-				value={ textControlValue }
-				onChange={ setTextControlValue }
-			/>
-			<TextareaControl
-				label="TextArea Control"
-				value={ textAreaValue }
-				onChange={ setTextAreaValue }
-			/>
-			<SelectControl
-				label="Select Control"
-				onChange={ () => {} }
-				options={ [
-					{ value: '', label: 'Select an option', disabled: true },
-					{ value: 'a', label: 'Option A' },
-					{ value: 'b', label: 'Option B' },
-					{ value: 'c', label: 'Option C' },
-				] }
-			/>
-		</div>
-	);
-};
-
-export const Default: ComponentStory< typeof Disabled > = ( args ) => {
-	return (
-		<Disabled { ...args }>
-			<Form />
-		</Disabled>
-	);
-};
-Default.args = {
-	isDisabled: true,
-};
-
-export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
-	return (
-		<Disabled { ...args }>
-			<div contentEditable tabIndex={ 0 }>
-				contentEditable
-			</div>
-		</Disabled>
-	);
-};
-ContentEditable.args = {
-	isDisabled: true,
-};
diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx
index cedcdad872701f..fd03d5161f3300 100644
--- a/packages/components/src/disabled/test/index.tsx
+++ b/packages/components/src/disabled/test/index.tsx
@@ -18,54 +18,62 @@ describe( 'Disabled', () => {
 	);
 
 	it( 'will disable all fields', () => {
-		const { container } = render(
-			<Disabled>
+		render(
+			<Disabled data-testid="disabled-wrapper">
 				<Form />
 			</Disabled>
 		);
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {
 		const MaybeDisable = ( { isDisabled = true } ) =>
 			isDisabled ? (
-				<Disabled>
+				<Disabled data-testid="disabled-wrapper">
 					<Form />
 				</Disabled>
 			) : (
 				<Form />
 			);
 
-		const { container, rerender } = render( <MaybeDisable /> );
+		const { rerender } = render( <MaybeDisable /> );
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
+		expect(
+			screen.queryByTestId( 'disabled-wrapper' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
 		const MaybeDisable = ( { isDisabled = true } ) => (
-			<Disabled isDisabled={ isDisabled }>
+			<Disabled isDisabled={ isDisabled } data-testid="disabled-wrapper">
 				<Form />
 			</Disabled>
 		);
 
-		const { rerender, container } = render( <MaybeDisable /> );
+		const { rerender } = render( <MaybeDisable /> );
 
-		expect( container.firstChild ).toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).toHaveAttribute(
+			'inert'
+		);
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
+		expect( screen.getByTestId( 'disabled-wrapper' ) ).not.toHaveAttribute(
+			'inert'
+		);
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const MaybeDisable = ( { isDisabled = true } ) => (
 			<Disabled isDisabled={ isDisabled }>
@@ -86,7 +94,7 @@ describe( 'Disabled', () => {
 			'This is contentEditable.'
 		);
 
-		rerender( <MaybeDisable isDisabled={ true } /> );
+		rerender( <MaybeDisable isDisabled /> );
 		expect( getInput() ).toHaveValue( 'This is input.' );
 		expect( getContentEditable() ).toHaveTextContent(
 			'This is contentEditable.'
diff --git a/packages/components/src/disclosure/index.js b/packages/components/src/disclosure/index.js
deleted file mode 100644
index 5458ba053eef6a..00000000000000
--- a/packages/components/src/disclosure/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Accessible Disclosure component that controls visibility of a section of
- * content. It follows the WAI-ARIA Disclosure Pattern.
- *
- * @see https://reakit.io/docs/disclosure/
- *
- * The plan is to build own API that accounts for future breaking changes
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
- */
-/* eslint-disable-next-line no-restricted-imports */
-export { DisclosureContent } from 'reakit';
diff --git a/packages/components/src/disclosure/index.tsx b/packages/components/src/disclosure/index.tsx
new file mode 100644
index 00000000000000..fa8570fc1d4c5b
--- /dev/null
+++ b/packages/components/src/disclosure/index.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DisclosureContentProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+/**
+ * Accessible Disclosure component that controls visibility of a section of
+ * content. It follows the WAI-ARIA Disclosure Pattern.
+ */
+const UnforwardedDisclosureContent = (
+	{
+		visible,
+		children,
+		...props
+	}: WordPressComponentProps< DisclosureContentProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) => {
+	const disclosure = Ariakit.useDisclosureStore( { open: visible } );
+
+	return (
+		<Ariakit.DisclosureContent
+			store={ disclosure }
+			ref={ ref }
+			{ ...props }
+		>
+			{ children }
+		</Ariakit.DisclosureContent>
+	);
+};
+
+export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
+export default DisclosureContent;
diff --git a/packages/components/src/disclosure/types.tsx b/packages/components/src/disclosure/types.tsx
new file mode 100644
index 00000000000000..6a0a746bb6397f
--- /dev/null
+++ b/packages/components/src/disclosure/types.tsx
@@ -0,0 +1,10 @@
+export type DisclosureContentProps = {
+	/**
+	 * If set to `true` the content will be shown, otherwise it's hidden.
+	 */
+	visible?: boolean;
+	/**
+	 * The content to display within the component.
+	 */
+	children: React.ReactNode;
+};
diff --git a/packages/components/src/divider/README.md b/packages/components/src/divider/README.md
index c28b6b6b060a04..c81026b7b55871 100644
--- a/packages/components/src/divider/README.md
+++ b/packages/components/src/divider/README.md
@@ -55,4 +55,4 @@ Divider's orientation. When using inside a flex container, you may need to make
 
 ### Inherited props
 
-`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).
+`Divider` also inherits all of the [`Separator` props](https://ariakit.org/reference/separator#optional-props).
diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
index ee03d9bd4dbb3e..8d68f8a6326ac1 100644
--- a/packages/components/src/divider/component.tsx
+++ b/packages/components/src/divider/component.tsx
@@ -1,18 +1,14 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import { Separator } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DividerView } from './styles';
 import type { DividerProps } from './types';
 
@@ -23,8 +19,8 @@ function UnconnectedDivider(
 	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
-		<Separator
-			as={ DividerView }
+		<Ariakit.Separator
+			render={ <DividerView /> }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>
diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx
new file mode 100644
index 00000000000000..3f143fc5237694
--- /dev/null
+++ b/packages/components/src/divider/stories/index.story.tsx
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../../text';
+import { Divider } from '..';
+import { Flex } from '../../flex';
+
+const meta: Meta< typeof Divider > = {
+	component: Divider,
+	title: 'Components (Experimental)/Divider',
+	argTypes: {
+		margin: {
+			control: { type: 'text' },
+		},
+		marginStart: {
+			control: { type: 'text' },
+		},
+		marginEnd: {
+			control: { type: 'text' },
+		},
+		wrapElement: {
+			control: false,
+		},
+		ref: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Divider > = ( args ) => (
+	<div>
+		<Text>Some text before the divider</Text>
+		<Divider { ...args } />
+		<Text>Some text after the divider</Text>
+	</div>
+);
+
+export const Horizontal: StoryFn< typeof Divider > = Template.bind( {} );
+Horizontal.args = {
+	margin: '2',
+};
+
+export const Vertical: StoryFn< typeof Divider > = Template.bind( {} );
+Vertical.args = {
+	...Horizontal.args,
+	orientation: 'vertical',
+};
+
+// Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
+export const InFlexContainer: StoryFn< typeof Divider > = ( args ) => {
+	return (
+		<Flex align="stretch">
+			<Text>
+				Some text before the divider Some text before the divider Some
+				text before the divider Some text before the divider Some text
+				before the divider Some text before the divider Some text before
+				the divider
+			</Text>
+			<Divider { ...args } />
+			<Text>
+				Some text after the divider Some text after the divider Some
+				text after the divider
+			</Text>
+		</Flex>
+	);
+};
+InFlexContainer.args = {
+	...Vertical.args,
+};
diff --git a/packages/components/src/divider/stories/index.tsx b/packages/components/src/divider/stories/index.tsx
deleted file mode 100644
index 312e5b8d7f6bea..00000000000000
--- a/packages/components/src/divider/stories/index.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../../text';
-import { Divider } from '..';
-import { Flex } from '../../flex';
-
-const meta: ComponentMeta< typeof Divider > = {
-	component: Divider,
-	title: 'Components (Experimental)/Divider',
-	argTypes: {
-		margin: {
-			control: { type: 'text' },
-		},
-		marginStart: {
-			control: { type: 'text' },
-		},
-		marginEnd: {
-			control: { type: 'text' },
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Divider > = ( args ) => (
-	<div>
-		<Text>Some text before the divider</Text>
-		<Divider { ...args } />
-		<Text>Some text after the divider</Text>
-	</div>
-);
-
-export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
-Horizontal.args = {
-	margin: '2',
-};
-
-export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );
-Vertical.args = {
-	...Horizontal.args,
-	orientation: 'vertical',
-};
-
-// Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
-export const InFlexContainer: ComponentStory< typeof Divider > = ( args ) => {
-	return (
-		<Flex align="stretch">
-			<Text>
-				Some text before the divider Some text before the divider Some
-				text before the divider Some text before the divider Some text
-				before the divider Some text before the divider Some text before
-				the divider
-			</Text>
-			<Divider { ...args } />
-			<Text>
-				Some text after the divider Some text after the divider Some
-				text after the divider
-			</Text>
-		</Flex>
-	);
-};
-InFlexContainer.args = {
-	...Vertical.args,
-};
diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts
index ad13e357c53b08..189f0a0223041e 100644
--- a/packages/components/src/divider/styles.ts
+++ b/packages/components/src/divider/styles.ts
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { rtl } from '../utils';
 import type { DividerProps } from './types';
 
diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts
index feaa0b4f4c19b0..7f7ecf1f0dcca5 100644
--- a/packages/components/src/divider/types.ts
+++ b/packages/components/src/divider/types.ts
@@ -1,17 +1,16 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import type { SeparatorProps } from 'reakit';
+import type { SeparatorProps } from '@ariakit/react';
 
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,
-	'children' | 'unstable_system' | 'orientation'
+	'children' | 'unstable_system' | 'orientation' | 'as' | 'render'
 > & {
 	/**
 	 * Adjusts all margins on the inline dimension.
diff --git a/packages/components/src/draggable/README.md b/packages/components/src/draggable/README.md
index f83ab93dd3b3c1..58ffa2c6a6d0d1 100644
--- a/packages/components/src/draggable/README.md
+++ b/packages/components/src/draggable/README.md
@@ -8,9 +8,16 @@ Note that the drag handle needs to declare the `draggable="true"` property and b
 
 The component accepts the following props:
 
+### `appendToOwnerDocument`: `boolean`
+
+Whether to append the cloned element to the `ownerDocument` body. By default, elements sourced by id are appended to the element's wrapper.
+
+-   Required: No
+-   Default: `false`
+
 ### `elementId`: `string`
 
-The HTML id of the element to clone on drag
+The HTML id of the element to clone on drag.
 
 -   Required: Yes
 
diff --git a/packages/components/src/draggable/index.native.js b/packages/components/src/draggable/index.native.js
index 474730d900e384..87e68ad651cb06 100644
--- a/packages/components/src/draggable/index.native.js
+++ b/packages/components/src/draggable/index.native.js
@@ -63,7 +63,7 @@ const Draggable = ( {
 	useAnimatedReaction(
 		() => isDragging.value,
 		( result, previous ) => {
-			if ( result === previous || previous === null ) {
+			if ( result === previous ) {
 				return;
 			}
 
@@ -75,7 +75,7 @@ const Draggable = ( {
 						id: draggingId.value,
 					} );
 				}
-			} else if ( onDragEnd ) {
+			} else if ( previous !== null && onDragEnd ) {
 				onDragEnd( {
 					x: lastPosition.x.value,
 					y: lastPosition.y.value,
diff --git a/packages/components/src/draggable/index.tsx b/packages/components/src/draggable/index.tsx
index 3a4fb2ebdf3b31..b9dea8fed43061 100644
--- a/packages/components/src/draggable/index.tsx
+++ b/packages/components/src/draggable/index.tsx
@@ -63,6 +63,7 @@ export function Draggable( {
 	onDragStart,
 	onDragOver,
 	onDragEnd,
+	appendToOwnerDocument = false,
 	cloneClassname,
 	elementId,
 	transferData,
@@ -70,16 +71,16 @@ export function Draggable( {
 	__experimentalDragComponent: dragComponent,
 }: DraggableProps ) {
 	const dragComponentRef = useRef< HTMLDivElement >( null );
-	const cleanup = useRef( () => {} );
+	const cleanupRef = useRef( () => {} );
 
 	/**
 	 * Removes the element clone, resets cursor, and removes drag listener.
 	 *
-	 * @param  event The non-custom DragEvent.
+	 * @param event The non-custom DragEvent.
 	 */
 	function end( event: DragEvent ) {
 		event.preventDefault();
-		cleanup.current();
+		cleanupRef.current();
 
 		if ( onDragEnd ) {
 			onDragEnd( event );
@@ -94,7 +95,7 @@ export function Draggable( {
 	 * - Sets transfer data.
 	 * - Adds dragover listener.
 	 *
-	 * @param  event The non-custom DragEvent.
+	 * @param event The non-custom DragEvent.
 	 */
 	function start( event: DragEvent ) {
 		const { ownerDocument } = event.target as HTMLElement;
@@ -173,7 +174,11 @@ export function Draggable( {
 			cloneWrapper.appendChild( clone );
 
 			// Inject the cloneWrapper into the DOM.
-			elementWrapper?.appendChild( cloneWrapper );
+			if ( appendToOwnerDocument ) {
+				ownerDocument.body.appendChild( cloneWrapper );
+			} else {
+				elementWrapper?.appendChild( cloneWrapper );
+			}
 		}
 
 		// Mark the current cursor coordinates.
@@ -207,17 +212,11 @@ export function Draggable( {
 		// Update cursor to 'grabbing', document wide.
 		ownerDocument.body.classList.add( bodyClass );
 
-		// Allow the Synthetic Event to be accessed from asynchronous code.
-		// https://reactjs.org/docs/events.html#event-pooling
-		event.persist();
-
-		let timerId: number | undefined;
-
 		if ( onDragStart ) {
-			timerId = setTimeout( () => onDragStart( event ) );
+			onDragStart( event );
 		}
 
-		cleanup.current = () => {
+		cleanupRef.current = () => {
 			// Remove drag clone.
 			if ( cloneWrapper && cloneWrapper.parentNode ) {
 				cloneWrapper.parentNode.removeChild( cloneWrapper );
@@ -231,14 +230,12 @@ export function Draggable( {
 			ownerDocument.body.classList.remove( bodyClass );
 
 			ownerDocument.removeEventListener( 'dragover', throttledDragOver );
-
-			clearTimeout( timerId );
 		};
 	}
 
 	useEffect(
 		() => () => {
-			cleanup.current();
+			cleanupRef.current();
 		},
 		[]
 	);
diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx
new file mode 100644
index 00000000000000..537dd9b40d7f36
--- /dev/null
+++ b/packages/components/src/draggable/stories/index.story.tsx
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { DragEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { Icon, more } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Draggable from '..';
+
+const meta: Meta< typeof Draggable > = {
+	component: Draggable,
+	title: 'Components/Utilities/Draggable',
+	id: 'components-draggable',
+	argTypes: {
+		elementId: { control: false },
+		__experimentalDragComponent: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { source: { code: '' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: StoryFn< typeof Draggable > = ( args ) => {
+	const [ isDragging, setDragging ] = useState( false );
+	const instanceId = useInstanceId( DefaultTemplate );
+
+	// Allow for the use of ID in the example.
+	return (
+		<div>
+			<p
+				style={ {
+					padding: '1em',
+					position: 'relative',
+					zIndex: 1000,
+					backgroundColor: 'whitesmoke',
+				} }
+			>
+				Is Dragging? { isDragging ? 'Yes' : 'No!' }
+			</p>
+			<div
+				style={ {
+					zIndex: 100,
+					position: 'relative',
+				} }
+			>
+				<div
+					id={ `draggable-example-box-${ instanceId }` }
+					style={ {
+						display: 'inline-flex',
+						position: 'relative',
+					} }
+				>
+					<Draggable
+						{ ...args }
+						elementId={ `draggable-example-box-${ instanceId }` }
+					>
+						{ ( { onDraggableStart, onDraggableEnd } ) => {
+							const handleOnDragStart = ( event: DragEvent ) => {
+								setDragging( true );
+								onDraggableStart( event );
+							};
+							const handleOnDragEnd = ( event: DragEvent ) => {
+								setDragging( false );
+								onDraggableEnd( event );
+							};
+
+							return (
+								<div
+									onDragStart={ handleOnDragStart }
+									onDragEnd={ handleOnDragEnd }
+									draggable
+									style={ {
+										alignItems: 'center',
+										display: 'flex',
+										justifyContent: 'center',
+										width: 100,
+										height: 100,
+										background: '#ddd',
+									} }
+								>
+									<Icon icon={ more } />
+								</div>
+							);
+						} }
+					</Draggable>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
+Default.args = {};
+
+/**
+ * `appendToOwnerDocument` is used to append the element being dragged to the body of the owner document.
+ *
+ * This is useful when the element being dragged should not receive styles from its parent.
+ * For example, when the element's parent sets a `z-index` value that would cause the dragged
+ * element to be rendered behind other elements.
+ */
+export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
+	DefaultTemplate.bind( {} );
+AppendElementToOwnerDocument.args = {
+	appendToOwnerDocument: true,
+};
diff --git a/packages/components/src/draggable/stories/index.tsx b/packages/components/src/draggable/stories/index.tsx
deleted file mode 100644
index 0fa16f063bb8fd..00000000000000
--- a/packages/components/src/draggable/stories/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { DragEvent } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { Icon, more } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Draggable from '..';
-
-const meta: ComponentMeta< typeof Draggable > = {
-	component: Draggable,
-	title: 'Components/Draggable',
-	argTypes: {
-		elementId: { control: { type: null } },
-		__experimentalDragComponent: { control: { type: null } },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { code: '' } },
-	},
-};
-export default meta;
-
-const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
-	const [ isDragging, setDragging ] = useState( false );
-
-	// Allow for the use of ID in the example.
-	return (
-		<div>
-			<p>Is Dragging? { isDragging ? 'Yes' : 'No!' }</p>
-			<div
-				/* eslint-disable no-restricted-syntax, eslint-comments/disable-enable-pair */
-				id="draggable-example-box"
-				style={ { display: 'inline-flex' } }
-			>
-				<Draggable { ...args } elementId="draggable-example-box">
-					{ ( { onDraggableStart, onDraggableEnd } ) => {
-						const handleOnDragStart = ( event: DragEvent ) => {
-							setDragging( true );
-							onDraggableStart( event );
-						};
-						const handleOnDragEnd = ( event: DragEvent ) => {
-							setDragging( false );
-							onDraggableEnd( event );
-						};
-
-						return (
-							<div
-								onDragStart={ handleOnDragStart }
-								onDragEnd={ handleOnDragEnd }
-								draggable
-								style={ {
-									alignItems: 'center',
-									display: 'flex',
-									justifyContent: 'center',
-									width: 100,
-									height: 100,
-									background: '#ddd',
-								} }
-							>
-								<Icon icon={ more } />
-							</div>
-						);
-					} }
-				</Draggable>
-			</div>
-		</div>
-	);
-};
-
-export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
-	{}
-);
-Default.args = {};
diff --git a/packages/components/src/draggable/test/index.native.js b/packages/components/src/draggable/test/index.native.js
index e2f3e1b658fc3f..ca607960010d18 100644
--- a/packages/components/src/draggable/test/index.native.js
+++ b/packages/components/src/draggable/test/index.native.js
@@ -10,9 +10,9 @@ import { State } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { Draggable, DraggableTrigger } from '@wordpress/components';
+import Draggable, { DraggableTrigger } from '../../draggable';
 
 // Touch event type constants have been extracted from original source code, as they are not exported in the package.
 // Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
@@ -28,10 +28,12 @@ const TouchEventType = {
 // For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
 let requestAnimationFrameCopy;
 beforeEach( () => {
+	jest.useFakeTimers();
 	requestAnimationFrameCopy = global.requestAnimationFrame;
 	global.requestAnimationFrame = ( callback ) => callback();
 } );
 afterEach( () => {
+	jest.useRealTimers();
 	global.requestAnimationFrame = requestAnimationFrameCopy;
 } );
 
@@ -43,7 +45,7 @@ describe( 'Draggable', () => {
 			<Draggable>
 				<DraggableTrigger
 					id={ triggerId }
-					enabled={ true }
+					enabled
 					minDuration={ 500 }
 					onLongPress={ onLongPress }
 					testID="draggableTrigger"
@@ -58,8 +60,9 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 
-		expect( onLongPress ).toBeCalledTimes( 1 );
+		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
 		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
 	} );
 
@@ -93,6 +96,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 		fireGestureHandler( draggable, [
 			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
 			{ oldState: State.BEGAN, state: State.ACTIVE },
@@ -110,17 +114,21 @@ describe( 'Draggable', () => {
 			},
 			{ state: State.END },
 		] );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			'[Reanimated] setGestureState() cannot be used with Jest.'
+		);
 
-		expect( onDragStart ).toBeCalledTimes( 1 );
+		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
 		expect( onDragStart ).toHaveBeenCalledWith( {
 			id: triggerId,
 			x: touchEvents[ 0 ].x,
 			y: touchEvents[ 0 ].y,
 		} );
-		expect( onDragOver ).toBeCalledTimes( 2 );
+		expect( onDragOver ).toHaveBeenCalledTimes( 2 );
 		expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
 		expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
-		expect( onDragEnd ).toBeCalledTimes( 1 );
+		expect( onDragEnd ).toHaveBeenCalledTimes( 1 );
 		expect( onDragEnd ).toHaveBeenCalledWith( {
 			id: triggerId,
 			x: touchEvents[ 2 ].x,
diff --git a/packages/components/src/draggable/types.ts b/packages/components/src/draggable/types.ts
index 665378a71ea99b..5242ecf7d67eb6 100644
--- a/packages/components/src/draggable/types.ts
+++ b/packages/components/src/draggable/types.ts
@@ -17,6 +17,13 @@ export type DraggableProps = {
 		 */
 		onDraggableEnd: ( event: DragEvent ) => void;
 	} ) => JSX.Element | null;
+	/**
+	 * Whether to append the cloned element to the `ownerDocument` body.
+	 * By default, elements sourced by id are appended to the element's wrapper.
+	 *
+	 * @default false
+	 */
+	appendToOwnerDocument?: boolean;
 	/**
 	 * Classname for the cloned element.
 	 */
diff --git a/packages/components/src/drop-zone/README.md b/packages/components/src/drop-zone/README.md
index b06d278c5d1e5d..e06327ec774361 100644
--- a/packages/components/src/drop-zone/README.md
+++ b/packages/components/src/drop-zone/README.md
@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { DropZone } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDropZone = () => {
 	const [ hasDropped, setHasDropped ] = useState( false );
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index 00b602f91e36d3..dd8b97149a0598 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,20 +10,13 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { upload, Icon } from '@wordpress/icons';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
-import {
-	__experimentalUseDropZone as useDropZone,
-	useReducedMotion,
-} from '@wordpress/compose';
+import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import {
-	__unstableMotion as motion,
-	__unstableAnimatePresence as AnimatePresence,
-} from '../animation';
-import type { DropType, DropZoneProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { DropZoneProps } from './types';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
@@ -54,23 +47,26 @@ export function DropZoneComponent( {
 	onFilesDrop,
 	onHTMLDrop,
 	onDrop,
+	isEligible = () => true,
 	...restProps
 }: WordPressComponentProps< DropZoneProps, 'div', false > ) {
 	const [ isDraggingOverDocument, setIsDraggingOverDocument ] =
 		useState< boolean >();
 	const [ isDraggingOverElement, setIsDraggingOverElement ] =
 		useState< boolean >();
-	const [ type, setType ] = useState< DropType >();
+	const [ isActive, setIsActive ] = useState< boolean >();
 	const ref = useDropZone( {
 		onDrop( event ) {
-			const files = event.dataTransfer
-				? getFilesFromDataTransfer( event.dataTransfer )
-				: [];
-			const html = event.dataTransfer?.getData( 'text/html' );
+			if ( ! event.dataTransfer ) {
+				return;
+			}
+
+			const files = getFilesFromDataTransfer( event.dataTransfer );
+			const html = event.dataTransfer.getData( 'text/html' );
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
+			 * The order of the checks is important to recognize the HTML drop.
 			 */
 			if ( html && onHTMLDrop ) {
 				onHTMLDrop( html );
@@ -83,31 +79,31 @@ export function DropZoneComponent( {
 		onDragStart( event ) {
 			setIsDraggingOverDocument( true );
 
-			let _type: DropType = 'default';
+			if ( ! event.dataTransfer ) {
+				return;
+			}
 
 			/**
 			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-			 * The order of the checks is important to recognise the HTML drop.
+			 * The order of the checks is important to recognize the HTML drop.
 			 */
-			if ( event.dataTransfer?.types.includes( 'text/html' ) ) {
-				_type = 'html';
+			if ( event.dataTransfer.types.includes( 'text/html' ) ) {
+				setIsActive( !! onHTMLDrop );
 			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
-				event.dataTransfer?.types.includes( 'Files' ) ||
-				( event.dataTransfer
-					? getFilesFromDataTransfer( event.dataTransfer )
-					: []
-				).length > 0
+				event.dataTransfer.types.includes( 'Files' ) ||
+				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
-				_type = 'file';
+				setIsActive( !! onFilesDrop );
+			} else {
+				setIsActive( !! onDrop && isEligible( event.dataTransfer ) );
 			}
-
-			setType( _type );
 		},
 		onDragEnd() {
+			setIsDraggingOverElement( false );
 			setIsDraggingOverDocument( false );
-			setType( undefined );
+			setIsActive( undefined );
 		},
 		onDragEnter() {
 			setIsDraggingOverElement( true );
@@ -116,51 +112,17 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const disableMotion = useReducedMotion();
 
-	let children;
-	const backdrop = {
-		hidden: { scaleY: 0, opacity: 0 },
-		show: {
-			scaleY: 1,
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0.1,
-				delayChildren: 0.2,
-			},
-		},
-		exit: {
-			scaleY: 1,
-			opacity: 0,
-			transition: {
-				duration: 0.3,
-				delayChildren: 0,
-			},
-		},
-	};
-
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.75 },
-		show: { opacity: 1, scale: 1 },
-		exit: { opacity: 0, scale: 0.9 },
-	};
+	const classes = clsx( 'components-drop-zone', className, {
+		'is-active': isActive,
+		'is-dragging-over-document': isDraggingOverDocument,
+		'is-dragging-over-element': isDraggingOverElement,
+	} );
 
-	if ( isDraggingOverElement ) {
-		children = (
-			<motion.div
-				variants={ backdrop }
-				initial={ disableMotion ? 'show' : 'hidden' }
-				animate="show"
-				exit={ disableMotion ? 'show' : 'exit' }
-				className="components-drop-zone__content"
-				// Without this, when this div is shown,
-				// Safari calls a onDropZoneLeave causing a loop because of this bug
-				// https://bugs.webkit.org/show_bug.cgi?id=66547
-				style={ { pointerEvents: 'none' } }
-			>
-				<motion.div variants={ foreground }>
+	return (
+		<div { ...restProps } ref={ ref } className={ classes }>
+			<div className="components-drop-zone__content">
+				<div className="components-drop-zone__content-inner">
 					<Icon
 						icon={ upload }
 						className="components-drop-zone__content-icon"
@@ -168,29 +130,8 @@ export function DropZoneComponent( {
 					<span className="components-drop-zone__content-text">
 						{ label ? label : __( 'Drop files to upload' ) }
 					</span>
-				</motion.div>
-			</motion.div>
-		);
-	}
-
-	const classes = classnames( 'components-drop-zone', className, {
-		'is-active':
-			( isDraggingOverDocument || isDraggingOverElement ) &&
-			( ( type === 'file' && onFilesDrop ) ||
-				( type === 'html' && onHTMLDrop ) ||
-				( type === 'default' && onDrop ) ),
-		'is-dragging-over-document': isDraggingOverDocument,
-		'is-dragging-over-element': isDraggingOverElement,
-		[ `is-dragging-${ type }` ]: !! type,
-	} );
-
-	return (
-		<div { ...restProps } ref={ ref } className={ classes }>
-			{ disableMotion ? (
-				children
-			) : (
-				<AnimatePresence>{ children }</AnimatePresence>
-			) }
+				</div>
+			</div>
 		</div>
 	);
 }
diff --git a/packages/components/src/drop-zone/stories/index.story.tsx b/packages/components/src/drop-zone/stories/index.story.tsx
new file mode 100644
index 00000000000000..7e2dcbf03c03b1
--- /dev/null
+++ b/packages/components/src/drop-zone/stories/index.story.tsx
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import DropZone from '..';
+
+const meta: Meta< typeof DropZone > = {
+	component: DropZone,
+	id: 'components-dropzone',
+	title: 'Components/Selection & Input/File Upload/DropZone',
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof DropZone > = ( props ) => {
+	return (
+		<div style={ { background: 'lightgray', padding: 16 } }>
+			Drop something here
+			<DropZone { ...props } />
+		</div>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/components/src/drop-zone/stories/index.tsx b/packages/components/src/drop-zone/stories/index.tsx
deleted file mode 100644
index de94c98e4be031..00000000000000
--- a/packages/components/src/drop-zone/stories/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-/**
- * Internal dependencies
- */
-import DropZone from '..';
-
-const meta: ComponentMeta< typeof DropZone > = {
-	component: DropZone,
-	title: 'Components/DropZone',
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof DropZone > = ( props ) => {
-	return (
-		<div style={ { background: 'lightgray', padding: 16 } }>
-			Drop something here
-			<DropZone { ...props } />
-		</div>
-	);
-};
-
-export const Default = Template.bind( {} );
diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
index fe23616dc4ad34..d66eaee87b8a1f 100644
--- a/packages/components/src/drop-zone/style.scss
+++ b/packages/components/src/drop-zone/style.scss
@@ -7,29 +7,64 @@
 	z-index: z-index(".components-drop-zone");
 	visibility: hidden;
 	opacity: 0;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&.is-active {
 		opacity: 1;
 		visibility: visible;
 	}
-}
 
-.components-drop-zone__content {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	background-color: $components-color-accent;
-	align-items: center;
-	justify-content: center;
-	z-index: z-index(".components-drop-zone__content");
-	text-align: center;
-	color: $white;
+	.components-drop-zone__content {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100%;
+		width: 100%;
+		display: flex;
+		background-color: $components-color-accent;
+		align-items: center;
+		justify-content: center;
+		z-index: z-index(".components-drop-zone__content");
+		text-align: center;
+		color: $white;
+		opacity: 0;
+
+		// Without this, when this div is shown,
+		// Safari calls a onDropZoneLeave causing a loop because of this bug
+		// https://bugs.webkit.org/show_bug.cgi?id=66547
+		pointer-events: none;
+	}
+
+	.components-drop-zone__content-inner {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+
+	&.is-active.is-dragging-over-element {
+		.components-drop-zone__content {
+			opacity: 1;
+
+			transition: opacity 0.2s ease-in-out;
+			@media (prefers-reduced-motion) {
+				transition: none;
+			}
+		}
+
+		.components-drop-zone__content-inner {
+			opacity: 1;
+			transform: scale(1);
+
+			transition:
+				opacity 0.1s ease-in-out 0.1s,
+				transform 0.1s ease-in-out 0.1s;
+
+			@media (prefers-reduced-motion) {
+				transition: none;
+			}
+		}
+	}
 }
 
 .components-drop-zone__content-icon,
@@ -38,7 +73,7 @@
 }
 
 .components-drop-zone__content-icon {
-	margin: 0 auto;
+	margin: 0 auto $grid-unit-10;
 	line-height: 0;
 	fill: currentColor;
 	pointer-events: none;
diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
index 3982889a4f3eac..503f400bc4be45 100644
--- a/packages/components/src/drop-zone/types.ts
+++ b/packages/components/src/drop-zone/types.ts
@@ -26,4 +26,9 @@ export type DropZoneProps = {
 	 * It receives the HTML being dropped as an argument.
 	 */
 	onHTMLDrop?: ( html: string ) => void;
+	/**
+	 * A function to determine if the drop zone is eligible to handle the drop
+	 * data transfer items.
+	 */
+	isEligible?: ( dataTransfer: DataTransfer ) => boolean;
 };
diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md
index f85d2813fb1c9a..f1b664efc09a29 100644
--- a/packages/components/src/dropdown-menu/README.md
+++ b/packages/components/src/dropdown-menu/README.md
@@ -4,11 +4,6 @@ The DropdownMenu displays a list of actions (each contained in a MenuItem, MenuI
 
 ![An expanded DropdownMenu, containing a list of MenuItems.](https://wordpress.org/gutenberg/files/2019/01/DropdownMenuExample.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-
 ## Anatomy
 
 ![Anatomy of a DropdownMenu.](https://wordpress.org/gutenberg/files/2019/01/DropdownMenuAnatomy.png)
@@ -101,14 +96,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 +116,7 @@ const MyDropdownMenu = () => (
 						Remove
 					</MenuItem>
 				</MenuGroup>
-			</Fragment>
+			</>
 		) }
 	</DropdownMenu>
 );
@@ -132,80 +126,88 @@ const MyDropdownMenu = () => (
 
 The component accepts the following props:
 
-#### icon
+#### `icon`: `string | null`
 
 The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug to be shown in the collapsed menu button.
 
--   Type: `String|null`
 -   Required: No
 -   Default: `"menu"`
 
 See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/)
 
-#### label
+#### `label`: `string`
 
 A human-readable label to present as accessibility text on the focused collapsed menu button.
 
--   Type: `String`
 -   Required: Yes
 
-#### controls
+#### `controls:` `DropdownOption[] | DropdownOption[][]`
 
-An array of objects describing the options to be shown in the expanded menu.
+An array or nested array of objects describing the options to be shown in the expanded menu.
 
 Each object should include an `icon` [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug string, a human-readable `title` string, `isDisabled` boolean flag and an `onClick` function callback to invoke when the option is selected.
 
-A valid DropdownMenu must specify one or the other of a `controls` or `children` prop.
-
--   Type: `Array`
+A valid DropdownMenu must specify a `controls` or `children` prop, or both.
 -   Required: No
 
-#### children
+#### `children`: `( callbackProps: DropdownCallbackProps ) => ReactNode`
 
 A [function render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render) which should return an element or elements valid for use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. Its first argument is a props object including the same values as given to a [`Dropdown`'s `renderContent`](/packages/components/src/dropdown#rendercontent) (`isOpen`, `onToggle`, `onClose`).
 
-A valid DropdownMenu must specify one or the other of a `controls` or `children` prop.
+A valid DropdownMenu must specify a `controls` or `children` prop, or both.
 
--   Type: `Function`
 -   Required: No
 
 See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/)
 
-#### className
+#### `className`: `string`
 
 A class name to apply to the dropdown menu's toggle element wrapper.
 
--   Type: `String`
 -   Required: No
 
-#### popoverProps
+#### `popoverProps`: `DropdownProps[ 'popoverProps' ]`
 
 Properties of `popoverProps` object will be passed as props to the nested `Popover` component.
 Use this object to modify props available for the `Popover` component that are not already exposed in the `DropdownMenu` component, e.g.: the direction in which the popover should open relative to its parent node set with `position` prop.
 
--   Type: `Object`
 -   Required: No
 
-#### toggleProps
+#### `toggleProps`: `ToggleProps`
 
 Properties of `toggleProps` object will be passed as props to the nested `Button` component in the `renderToggle` implementation of the `Dropdown` component used internally.
 Use this object to modify props available for the `Button` component that are not already exposed in the `DropdownMenu` component, e.g.: the tooltip text displayed on hover set with `tooltip` prop.
 
--   Type: `Object`
 -   Required: No
 
-#### menuProps
+#### `menuProps`: `NavigableContainerProps`
 
 Properties of `menuProps` object will be passed as props to the nested `NavigableMenu` component in the `renderContent` implementation of the `Dropdown` component used internally.
 Use this object to modify props available for the `NavigableMenu` component that are not already exposed in the `DropdownMenu` component, e.g.: the orientation of the menu set with `orientation` prop.
 
--   Type: `Object`
 -   Required: No
 
-#### disableOpenOnArrowDown
+#### `disableOpenOnArrowDown`: `boolean`
 
 In some contexts, the arrow down key used to open the dropdown menu might need to be disabled—for example when that key is used to perform another action.
 
--   Type: `Object`
 -   Required: No
 -   Default: `false`
+
+### `defaultOpen`: `boolean`
+
+The open state of the dropdown menu when initially rendered. Use when you do not need to control its open state. It will be overridden by the `open` prop if it is specified on the component's first render.
+
+-   Required: No
+
+### `open`: `boolean`
+
+The controlled open state of the dropdown menu. Must be used in conjunction with `onToggle`.
+
+-   Required: No
+
+### `onToggle`: `( willOpen: boolean ) => void`
+
+A callback invoked when the state of the dropdown changes from open to closed and vice versa.
+
+-   Required: No
diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
deleted file mode 100644
index 481d84a6589f48..00000000000000
--- a/packages/components/src/dropdown-menu/index.js
+++ /dev/null
@@ -1,198 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { menu } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Dropdown from '../dropdown';
-import { NavigableMenu } from '../navigable-container';
-
-function mergeProps( defaultProps = {}, props = {} ) {
-	const mergedProps = {
-		...defaultProps,
-		...props,
-	};
-
-	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
-	}
-
-	return mergedProps;
-}
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-function isFunction( maybeFunc ) {
-	return typeof maybeFunc === 'function';
-}
-
-function DropdownMenu( dropdownMenuProps ) {
-	const {
-		children,
-		className,
-		controls,
-		icon = menu,
-		label,
-		popoverProps,
-		toggleProps,
-		menuProps,
-		disableOpenOnArrowDown = false,
-		text,
-		noIcons,
-	} = dropdownMenuProps;
-
-	if ( ! controls?.length && ! isFunction( children ) ) {
-		return null;
-	}
-
-	// Normalize controls to nested array of objects (sets of controls)
-	let controlSets;
-	if ( controls?.length ) {
-		controlSets = controls;
-		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
-			controlSets = [ controlSets ];
-		}
-	}
-	const mergedPopoverProps = mergeProps(
-		{
-			className: 'components-dropdown-menu__popover',
-		},
-		popoverProps
-	);
-
-	return (
-		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
-			popoverProps={ mergedPopoverProps }
-			renderToggle={ ( { isOpen, onToggle } ) => {
-				const openOnArrowDown = ( event ) => {
-					if ( disableOpenOnArrowDown ) {
-						return;
-					}
-
-					if ( ! isOpen && event.code === 'ArrowDown' ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
-				const mergedToggleProps = mergeProps(
-					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
-					},
-					toggleProps
-				);
-
-				return (
-					<Button
-						{ ...mergedToggleProps }
-						icon={ icon }
-						onClick={ ( event ) => {
-							onToggle( event );
-							if ( mergedToggleProps.onClick ) {
-								mergedToggleProps.onClick( event );
-							}
-						} }
-						onKeyDown={ ( event ) => {
-							openOnArrowDown( event );
-							if ( mergedToggleProps.onKeyDown ) {
-								mergedToggleProps.onKeyDown( event );
-							}
-						} }
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						label={ label }
-						text={ text }
-						showTooltip={ toggleProps?.showTooltip ?? true }
-					>
-						{ mergedToggleProps.children }
-					</Button>
-				);
-			} }
-			renderContent={ ( props ) => {
-				const mergedMenuProps = mergeProps(
-					{
-						'aria-label': label,
-						className: classnames(
-							'components-dropdown-menu__menu',
-							{ 'no-icons': noIcons }
-						),
-					},
-					menuProps
-				);
-
-				return (
-					<NavigableMenu { ...mergedMenuProps } role="menu">
-						{ isFunction( children ) ? children( props ) : null }
-						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
-							controlSet.map( ( control, indexOfControl ) => (
-								<Button
-									key={ [
-										indexOfSet,
-										indexOfControl,
-									].join() }
-									onClick={ ( event ) => {
-										event.stopPropagation();
-										props.onClose();
-										if ( control.onClick ) {
-											control.onClick();
-										}
-									} }
-									className={ classnames(
-										'components-dropdown-menu__menu-item',
-										{
-											'has-separator':
-												indexOfSet > 0 &&
-												indexOfControl === 0,
-											'is-active': control.isActive,
-											'is-icon-only': ! control.title,
-										}
-									) }
-									icon={ control.icon }
-									label={ control.label }
-									aria-checked={
-										control.role === 'menuitemcheckbox' ||
-										control.role === 'menuitemradio'
-											? control.isActive
-											: undefined
-									}
-									role={
-										control.role === 'menuitemcheckbox' ||
-										control.role === 'menuitemradio'
-											? control.role
-											: 'menuitem'
-									}
-									disabled={ control.isDisabled }
-								>
-									{ control.title }
-								</Button>
-							) )
-						) }
-					</NavigableMenu>
-				);
-			} }
-		/>
-	);
-}
-
-export default DropdownMenu;
diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js
index 1f60e0f67cf088..1e9d6569afc932 100644
--- a/packages/components/src/dropdown-menu/index.native.js
+++ b/packages/components/src/dropdown-menu/index.native.js
@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, PanelBody } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { menu } from '@wordpress/icons';
 
@@ -15,6 +14,8 @@ import { menu } from '@wordpress/icons';
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
+import BottomSheet from '../mobile/bottom-sheet';
+import PanelBody from '../panel/body';
 
 function mergeProps( defaultProps = {}, props = {} ) {
 	const mergedProps = {
@@ -23,10 +24,7 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	};
 
 	if ( props.className && defaultProps.className ) {
-		mergedProps.className = classnames(
-			props.className,
-			defaultProps.className
-		);
+		mergedProps.className = clsx( props.className, defaultProps.className );
 	}
 
 	return mergedProps;
@@ -72,17 +70,14 @@ function DropdownMenu( {
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ clsx( 'components-dropdown-menu', className ) }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const mergedToggleProps = mergeProps(
 					{
-						className: classnames(
-							'components-dropdown-menu__toggle',
-							{
-								'is-opened': isOpen,
-							}
-						),
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
 					},
 					toggleProps
 				);
@@ -108,7 +103,7 @@ function DropdownMenu( {
 			renderContent={ ( { isOpen, onClose, ...props } ) => {
 				return (
 					<BottomSheet
-						hideHeader={ true }
+						hideHeader
 						isVisible={ isOpen }
 						onClose={ onClose }
 					>
@@ -135,7 +130,7 @@ function DropdownMenu( {
 												} }
 												editable={ false }
 												icon={ control.icon }
-												leftAlign={ true }
+												leftAlign
 												isSelected={ control.isActive }
 												separatorType={
 													Platform.OS === 'android'
diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx
new file mode 100644
index 00000000000000..195595fb9dc0de
--- /dev/null
+++ b/packages/components/src/dropdown-menu/index.tsx
@@ -0,0 +1,307 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { menu } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnectWithoutRef, useContextSystem } from '../context';
+import Button from '../button';
+import Dropdown from '../dropdown';
+import { NavigableMenu } from '../navigable-container';
+import type {
+	DropdownMenuProps,
+	DropdownOption,
+	DropdownMenuInternalContext,
+} from './types';
+
+function mergeProps<
+	T extends { className?: string; [ key: string ]: unknown },
+>( defaultProps: Partial< T > = {}, props: T = {} as T ) {
+	const mergedProps: T = {
+		...defaultProps,
+		...props,
+	};
+
+	if ( props.className && defaultProps.className ) {
+		mergedProps.className = clsx( props.className, defaultProps.className );
+	}
+
+	return mergedProps;
+}
+
+function isFunction( maybeFunc: unknown ): maybeFunc is () => void {
+	return typeof maybeFunc === 'function';
+}
+
+function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
+	const {
+		children,
+		className,
+		controls,
+		icon = menu,
+		label,
+		popoverProps,
+		toggleProps,
+		menuProps,
+		disableOpenOnArrowDown = false,
+		text,
+		noIcons,
+
+		open,
+		defaultOpen,
+		onToggle: onToggleProp,
+
+		// Context
+		variant,
+	} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(
+		dropdownMenuProps,
+		'DropdownMenu'
+	);
+
+	if ( ! controls?.length && ! isFunction( children ) ) {
+		return null;
+	}
+
+	// Normalize controls to nested array of objects (sets of controls)
+	let controlSets: DropdownOption[][];
+	if ( controls?.length ) {
+		// @ts-expect-error The check below is needed because `DropdownMenus`
+		// rendered by `ToolBarGroup` receive controls as a nested array.
+		controlSets = controls;
+		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
+			// This is not ideal, but at this point we know that `controls` is
+			// not a nested array, even if TypeScript doesn't.
+			controlSets = [ controls as DropdownOption[] ];
+		}
+	}
+
+	const mergedPopoverProps = mergeProps(
+		{
+			className: 'components-dropdown-menu__popover',
+			variant,
+		},
+		popoverProps
+	);
+
+	return (
+		<Dropdown
+			className={ className }
+			popoverProps={ mergedPopoverProps }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				const openOnArrowDown = ( event: React.KeyboardEvent ) => {
+					if ( disableOpenOnArrowDown ) {
+						return;
+					}
+
+					if ( ! isOpen && event.code === 'ArrowDown' ) {
+						event.preventDefault();
+						onToggle();
+					}
+				};
+				const { as: Toggle = Button, ...restToggleProps } =
+					toggleProps ?? {};
+
+				const mergedToggleProps = mergeProps(
+					{
+						className: clsx( 'components-dropdown-menu__toggle', {
+							'is-opened': isOpen,
+						} ),
+					},
+					restToggleProps
+				);
+
+				return (
+					<Toggle
+						{ ...mergedToggleProps }
+						icon={ icon }
+						onClick={
+							( ( event ) => {
+								onToggle();
+								if ( mergedToggleProps.onClick ) {
+									mergedToggleProps.onClick( event );
+								}
+							} ) as React.MouseEventHandler< HTMLButtonElement >
+						}
+						onKeyDown={
+							( ( event ) => {
+								openOnArrowDown( event );
+								if ( mergedToggleProps.onKeyDown ) {
+									mergedToggleProps.onKeyDown( event );
+								}
+							} ) as React.KeyboardEventHandler< HTMLButtonElement >
+						}
+						aria-haspopup="true"
+						aria-expanded={ isOpen }
+						label={ label }
+						text={ text }
+						showTooltip={ toggleProps?.showTooltip ?? true }
+					>
+						{ mergedToggleProps.children }
+					</Toggle>
+				);
+			} }
+			renderContent={ ( props ) => {
+				const mergedMenuProps = mergeProps(
+					{
+						'aria-label': label,
+						className: clsx( 'components-dropdown-menu__menu', {
+							'no-icons': noIcons,
+						} ),
+					},
+					menuProps
+				);
+
+				return (
+					<NavigableMenu { ...mergedMenuProps } role="menu">
+						{ isFunction( children ) ? children( props ) : null }
+						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
+							controlSet.map( ( control, indexOfControl ) => (
+								<Button
+									__next40pxDefaultSize
+									key={ [
+										indexOfSet,
+										indexOfControl,
+									].join() }
+									onClick={ (
+										event: React.MouseEvent< HTMLButtonElement >
+									) => {
+										event.stopPropagation();
+										props.onClose();
+										if ( control.onClick ) {
+											control.onClick();
+										}
+									} }
+									className={ clsx(
+										'components-dropdown-menu__menu-item',
+										{
+											'has-separator':
+												indexOfSet > 0 &&
+												indexOfControl === 0,
+											'is-active': control.isActive,
+											'is-icon-only': ! control.title,
+										}
+									) }
+									icon={ control.icon }
+									label={ control.label }
+									aria-checked={
+										control.role === 'menuitemcheckbox' ||
+										control.role === 'menuitemradio'
+											? control.isActive
+											: undefined
+									}
+									role={
+										control.role === 'menuitemcheckbox' ||
+										control.role === 'menuitemradio'
+											? control.role
+											: 'menuitem'
+									}
+									accessibleWhenDisabled
+									disabled={ control.isDisabled }
+								>
+									{ control.title }
+								</Button>
+							) )
+						) }
+					</NavigableMenu>
+				);
+			} }
+			open={ open }
+			defaultOpen={ defaultOpen }
+			onToggle={ onToggleProp }
+		/>
+	);
+}
+
+/**
+ *
+ * The DropdownMenu displays a list of actions (each contained in a MenuItem,
+ * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
+ * after the user has interacted with an element (a button or icon) or when
+ * they perform a specific action.
+ *
+ * Render a Dropdown Menu with a set of controls:
+ *
+ * ```jsx
+ * import { DropdownMenu } from '@wordpress/components';
+ * import {
+ * 	more,
+ * 	arrowLeft,
+ * 	arrowRight,
+ * 	arrowUp,
+ * 	arrowDown,
+ * } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu
+ * 		icon={ more }
+ * 		label="Select a direction"
+ * 		controls={ [
+ * 			{
+ * 				title: 'Up',
+ * 				icon: arrowUp,
+ * 				onClick: () => console.log( 'up' ),
+ * 			},
+ * 			{
+ * 				title: 'Right',
+ * 				icon: arrowRight,
+ * 				onClick: () => console.log( 'right' ),
+ * 			},
+ * 			{
+ * 				title: 'Down',
+ * 				icon: arrowDown,
+ * 				onClick: () => console.log( 'down' ),
+ * 			},
+ * 			{
+ * 				title: 'Left',
+ * 				icon: arrowLeft,
+ * 				onClick: () => console.log( 'left' ),
+ * 			},
+ * 		] }
+ * 	/>
+ * );
+ * ```
+ *
+ * Alternatively, specify a `children` function which returns elements valid for
+ * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
+ *
+ * ```jsx
+ * 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 } ) => (
+ * 			<>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
+ * 						Move Up
+ * 					</MenuItem>
+ * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
+ * 						Move Down
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ trash } onClick={ onClose }>
+ * 						Remove
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 			</>
+ * 		) }
+ * 	</DropdownMenu>
+ * );
+ * ```
+ *
+ */
+export const DropdownMenu = contextConnectWithoutRef(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
+);
+
+export default DropdownMenu;
diff --git a/packages/components/src/dropdown-menu/stories/index.js b/packages/components/src/dropdown-menu/stories/index.js
deleted file mode 100644
index c70ef559387644..00000000000000
--- a/packages/components/src/dropdown-menu/stories/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { text, boolean } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import DropdownMenu from '../';
-
-/**
- * WordPress dependencies
- */
-import { menu, arrowUp, arrowDown } from '@wordpress/icons';
-
-export default {
-	title: 'Components/DropdownMenu',
-	component: DropdownMenu,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Select a direction.' );
-	const firstMenuItemLabel = text( 'First Menu Item Label', 'Up' );
-	const secondMenuItemLabel = text( 'First Menu Item Label', 'Down' );
-	const toggleButtonTootip = boolean(
-		'Show tooltip on a toggle button',
-		true
-	);
-
-	const controls = [
-		{
-			title: firstMenuItemLabel,
-			icon: arrowUp,
-		},
-		{
-			title: secondMenuItemLabel,
-			icon: arrowDown,
-		},
-	];
-
-	return (
-		<DropdownMenu
-			icon={ menu }
-			label={ label }
-			controls={ controls }
-			toggleProps={ { showTooltip: toggleButtonTootip } }
-		/>
-	);
-};
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
new file mode 100644
index 00000000000000..7b06ae979de84a
--- /dev/null
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { DropdownMenu } from '..';
+import MenuItem from '../../menu-item';
+import MenuGroup from '../../menu-group';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	menu,
+	arrowUp,
+	arrowDown,
+	chevronDown,
+	more,
+	trash,
+} from '@wordpress/icons';
+
+const meta: Meta< typeof DropdownMenu > = {
+	title: 'Components/Actions/DropdownMenu',
+	component: DropdownMenu,
+	id: 'components-dropdownmenu',
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	argTypes: {
+		icon: {
+			options: [ 'menu', 'chevronDown', 'more' ],
+			mapping: { menu, chevronDown, more },
+			control: { type: 'select' },
+		},
+		open: { control: false },
+		defaultOpen: { control: false },
+		onToggle: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof DropdownMenu > = {
+	args: {
+		label: 'Select a direction.',
+		icon: menu,
+		controls: [
+			{
+				title: 'First Menu Item Label',
+				icon: arrowUp,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'up!' ),
+			},
+			{
+				title: 'Second Menu Item Label',
+				icon: arrowDown,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'down!' ),
+			},
+		],
+	},
+};
+
+export const WithChildren: StoryObj< typeof DropdownMenu > = {
+	...Default,
+	// Adding custom source because Storybook is not able to show the contents of
+	// the `children` prop correctly in the code snippet.
+	parameters: {
+		docs: {
+			source: {
+				code: `<DropdownMenu label="Select a direction." icon={ more }>
+  <MenuGroup>
+    <MenuItem icon={ arrowUp } onClick={ onClose }>
+      Move Up
+    </MenuItem>
+    <MenuItem icon={ arrowDown } onClick={ onClose }>
+      Move Down
+    </MenuItem>
+  </MenuGroup>
+  <MenuGroup>
+    <MenuItem icon={ trash } onClick={ onClose }>
+      Remove
+    </MenuItem>
+  </MenuGroup>
+</DropdownMenu>`,
+				language: 'jsx',
+				type: 'auto',
+			},
+		},
+	},
+	args: {
+		label: 'Select a direction.',
+		icon: more,
+		children: ( { onClose } ) => (
+			<>
+				<MenuItem icon={ arrowUp } onClick={ onClose }>
+					Standalone Item
+				</MenuItem>
+				<MenuGroup>
+					<MenuItem icon={ arrowUp } onClick={ onClose }>
+						Move Up
+					</MenuItem>
+					<MenuItem icon={ arrowDown } onClick={ onClose }>
+						Move Down
+					</MenuItem>
+				</MenuGroup>
+				<MenuGroup>
+					<MenuItem icon={ trash } onClick={ onClose }>
+						Remove
+					</MenuItem>
+				</MenuGroup>
+			</>
+		),
+	},
+};
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 64303ea9049eb7..29fd6db18ba283 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -1,3 +1,7 @@
+.components-dropdown-menu__toggle {
+	vertical-align: top;
+}
+
 .components-dropdown-menu__menu {
 	width: 100%;
 	font-family: $default-font;
@@ -30,19 +34,15 @@
 			height: 1px;
 		}
 
-		&.is-active svg {
-			// Block UI appearance.
-			color: $white;
-			background: $gray-900;
-			box-shadow: 0 0 0 $border-width $gray-900;
-			border-radius: $border-width;
-		}
-
-		// Formatting buttons
-		> svg {
-			border-radius: $radius-block-ui;
-			width: $button-size-small;
-			height: $button-size-small;
+		&.is-active {
+			svg,
+			.dashicon {
+				// Block UI appearance.
+				color: $white;
+				background: $gray-900;
+				box-shadow: 0 0 0 $border-width $gray-900;
+				border-radius: $border-width;
+			}
 		}
 
 		// If menu items are icon-only, make them stretch only to the icon size.
@@ -53,36 +53,11 @@
 
 	.components-menu-item__button,
 	.components-menu-item__button.components-button {
-		min-height: $button-size;
+		min-height: $button-size-next-default-40px;
 		height: auto;
 		text-align: left;
 		padding-left: $grid-unit-10;
 		padding-right: $grid-unit-10;
 	}
 
-	.components-menu-group {
-		padding: $grid-unit-10;
-		margin-top: 0;
-		margin-bottom: 0;
-		margin-left: -$grid-unit-10;
-		margin-right: -$grid-unit-10;
-
-		&:first-child {
-			margin-top: -$grid-unit-10;
-		}
-
-		&:last-child {
-			margin-bottom: -$grid-unit-10;
-		}
-	}
-
-	.components-menu-group + .components-menu-group {
-		margin-top: 0;
-		border-top: $border-width solid $gray-400;
-		padding: $grid-unit-10;
-
-		.is-alternate & {
-			border-color: $gray-900;
-		}
-	}
 }
diff --git a/packages/components/src/dropdown-menu/test/index.js b/packages/components/src/dropdown-menu/test/index.js
deleted file mode 100644
index 2eab09f6c052df..00000000000000
--- a/packages/components/src/dropdown-menu/test/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import DropdownMenu from '../';
-import { MenuItem } from '../../';
-
-describe( 'DropdownMenu', () => {
-	it( 'should not render when neither controls nor children are assigned', () => {
-		render( <DropdownMenu /> );
-
-		// The button toggle should not even be rendered
-		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should not render when controls are empty and children is not specified', () => {
-		render( <DropdownMenu controls={ [] } /> );
-
-		// The button toggle should not even be rendered
-		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should open menu when pressing arrow down on the toggle and the controls prop is used to define menu items', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const controls = [
-			{
-				title: 'Up',
-				icon: arrowUp,
-				onClick: jest.fn(),
-			},
-			{
-				title: 'Right',
-				icon: arrowRight,
-				onClick: jest.fn(),
-			},
-			{
-				title: 'Down',
-				icon: arrowDown,
-				onClick: jest.fn(),
-			},
-			{
-				title: 'Left',
-				icon: arrowLeft,
-				onClick: jest.fn(),
-			},
-		];
-
-		render( <DropdownMenu controls={ controls } /> );
-
-		// Move focus on the toggle button
-		await user.tab();
-
-		await user.keyboard( '[ArrowDown]' );
-
-		let menu;
-		await waitFor( () => {
-			menu = screen.getByRole( 'menu' );
-			return expect( menu ).toBeVisible();
-		} );
-
-		expect( within( menu ).getAllByRole( 'menuitem' ) ).toHaveLength(
-			controls.length
-		);
-	} );
-
-	it( 'should open menu when pressing arrow down on the toggle and the children prop is used to define menu items', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render(
-			<DropdownMenu
-				children={ ( { onClose } ) => <MenuItem onClick={ onClose } /> }
-			/>
-		);
-
-		const button = screen.getByRole( 'button' );
-		button.focus();
-
-		await user.keyboard( '[ArrowDown]' );
-
-		let menu;
-		await waitFor( () => {
-			menu = screen.getByRole( 'menu' );
-			return expect( menu ).toBeVisible();
-		} );
-
-		// Clicking the menu item will close the dropdown menu
-		await user.click( within( menu ).getByRole( 'menuitem' ) );
-
-		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
-	} );
-} );
diff --git a/packages/components/src/dropdown-menu/test/index.tsx b/packages/components/src/dropdown-menu/test/index.tsx
new file mode 100644
index 00000000000000..9bee9f26605085
--- /dev/null
+++ b/packages/components/src/dropdown-menu/test/index.tsx
@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DropdownMenu from '..';
+import MenuItem from '../../menu-item';
+
+describe( 'DropdownMenu', () => {
+	it( 'should not render when neither controls nor children are assigned', () => {
+		render( <DropdownMenu label="Open dropdown" /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should not render when controls are empty and children is not specified', () => {
+		render( <DropdownMenu label="Open dropdown" controls={ [] } /> );
+
+		// The button toggle should not even be rendered
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should open menu when pressing arrow down on the toggle and the controls prop is used to define menu items', async () => {
+		const user = userEvent.setup();
+
+		const controls = [
+			{
+				title: 'Up',
+				icon: arrowUp,
+				onClick: jest.fn(),
+			},
+			{
+				title: 'Right',
+				icon: arrowRight,
+				onClick: jest.fn(),
+			},
+			{
+				title: 'Down',
+				icon: arrowDown,
+				onClick: jest.fn(),
+			},
+			{
+				title: 'Left',
+				icon: arrowLeft,
+				onClick: jest.fn(),
+			},
+		];
+
+		render( <DropdownMenu label="Open dropdown" controls={ controls } /> );
+
+		// Move focus on the toggle button
+		await user.tab();
+
+		await user.keyboard( '[ArrowDown]' );
+
+		const menu = screen.getByRole( 'menu' );
+
+		// we need to wait because showing the dropdown is animated
+		await waitFor( () => expect( menu ).toBeVisible() );
+
+		expect( within( menu ).getAllByRole( 'menuitem' ) ).toHaveLength(
+			controls.length
+		);
+	} );
+
+	it( 'should open menu when pressing arrow down on the toggle and the children prop is used to define menu items', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<DropdownMenu
+				label="Open dropdown"
+				children={ ( { onClose } ) => <MenuItem onClick={ onClose } /> }
+			/>
+		);
+
+		// Move focus on the toggle button
+		await user.tab();
+
+		await user.keyboard( '[ArrowDown]' );
+
+		const menu = screen.getByRole( 'menu' );
+
+		// we need to wait because showing the dropdown is animated
+		await waitFor( () => expect( menu ).toBeVisible() );
+
+		// Clicking the menu item will close the dropdown menu
+		await user.click( within( menu ).getByRole( 'menuitem' ) );
+
+		expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+	} );
+} );
diff --git a/packages/components/src/dropdown-menu/types.ts b/packages/components/src/dropdown-menu/types.ts
new file mode 100644
index 00000000000000..7deb08abaa28ec
--- /dev/null
+++ b/packages/components/src/dropdown-menu/types.ts
@@ -0,0 +1,168 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type { WordPressComponentProps } from '../context';
+import type { DropdownProps } from '../dropdown/types';
+import type { Props as IconProps } from '../icon';
+import type { NavigableMenuProps } from '../navigable-container/types';
+
+export type DropdownOption = {
+	/**
+	 * The icon to be shown for the option.
+	 */
+	icon?: IconProps[ 'icon' ];
+	/**
+	 * A human-readable title to display for the option.
+	 */
+	title: string;
+	/**
+	 * Whether or not the option is disabled.
+	 *
+	 * @default false
+	 */
+	isDisabled?: boolean;
+	/**
+	 * A callback function to invoke when the option is selected.
+	 */
+	onClick?: ( event?: React.MouseEvent ) => void;
+	/**
+	 * Whether or not the control is currently active.
+	 */
+	isActive?: boolean;
+	/**
+	 * Text to use for the internal `Button` component's tooltip.
+	 */
+	label?: string;
+	/**
+	 * The role to apply to the option's HTML element
+	 */
+	role?: HTMLAttributes< HTMLElement >[ 'role' ];
+};
+
+type DropdownCallbackProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
+// Manually including `as` prop because `WordPressComponentProps` polymorphism
+// creates a union that is too large for TypeScript to handle.
+type ToggleProps = Partial<
+	Omit<
+		WordPressComponentProps< ButtonAsButtonProps, 'button', false >,
+		'label' | 'text'
+	>
+> & {
+	as?: React.ElementType | keyof JSX.IntrinsicElements;
+	'data-toolbar-item'?: boolean;
+};
+
+export type DropdownMenuProps = {
+	/**
+	 * The icon to be shown in the collapsed menu button.
+	 *
+	 * @default "menu"
+	 */
+	icon?: IconProps[ 'icon' ] | null;
+	/**
+	 * A human-readable label to present as accessibility text on the focused
+	 * collapsed menu button.
+	 */
+	label: string;
+	/**
+	 * A class name to apply to the dropdown menu's toggle element wrapper.
+	 */
+	className?: string;
+	/**
+	 * Properties of `popoverProps` object will be passed as props to the nested
+	 * `Popover` component.
+	 * Use this object to modify props available for the `Popover` component that
+	 * are not already exposed in the `DropdownMenu` component, e.g.: the
+	 * direction in which the popover should open relative to its parent node
+	 * set with `position` prop.
+	 */
+	popoverProps?: DropdownProps[ 'popoverProps' ];
+	/**
+	 * Properties of `toggleProps` object will be passed as props to the nested
+	 * `Button` component in the `renderToggle` implementation of the `Dropdown`
+	 * component used internally.
+	 * Use this object to modify props available for the `Button` component that
+	 * are not already exposed in the `DropdownMenu` component, e.g.: the tooltip
+	 * text displayed on hover set with `tooltip` prop.
+	 */
+	toggleProps?: ToggleProps;
+	/**
+	 * Properties of `menuProps` object will be passed as props to the nested
+	 * `NavigableMenu` component in the `renderContent` implementation of the
+	 * `Dropdown` component used internally.
+	 * Use this object to modify props available for the `NavigableMenu`
+	 * component that are not already exposed in the `DropdownMenu` component,
+	 * e.g.: the orientation of the menu set with `orientation` prop.
+	 */
+	menuProps?: Omit< Partial< NavigableMenuProps >, 'children' >;
+	/**
+	 * In some contexts, the arrow down key used to open the dropdown menu might
+	 * need to be disabled—for example when that key is used to perform another
+	 * action.
+	 *
+	 * @default false
+	 */
+	disableOpenOnArrowDown?: boolean;
+	/**
+	 * Text to display on the nested `Button` component in the `renderToggle`
+	 * implementation of the `Dropdown` component used internally.
+	 */
+	text?: string;
+	/**
+	 * Whether or not `no-icons` should be added to the menu's `className`.
+	 */
+	noIcons?: boolean;
+	/**
+	 * A [function render prop](https://reactjs.org/docs/render-props.html#using-props-other-than-render)
+	 * which should return an element or elements valid for use in a DropdownMenu:
+	 * `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. Its first argument is a
+	 * props object including the same values as given to a `Dropdown`'s
+	 * `renderContent` (`isOpen`, `onToggle`, `onClose`).
+	 *
+	 * A valid DropdownMenu must specify a `controls` or `children` prop, or both.
+	 */
+	children?: ( callbackProps: DropdownCallbackProps ) => ReactNode;
+	/**
+	 * An array or nested array of objects describing the options to be shown in
+	 * the expanded menu. Each object should include an `icon` Dashicon slug
+	 * string, a human-readable `title` string, `isDisabled` boolean flag, and
+	 * an `onClick` function callback to invoke when the option is selected.
+	 *
+	 * A valid DropdownMenu must specify a `controls` or `children` prop, or both.
+	 */
+	controls?: DropdownOption[] | DropdownOption[][];
+	/**
+	 * The controlled open state of the dropdown menu.
+	 * Must be used in conjunction with `onToggle`.
+	 */
+	open?: boolean;
+	/**
+	 * The open state of the dropdown menu when initially rendered.
+	 * Use when you do not need to control its open state. It will be overridden
+	 * by the `open` prop if it is specified on the component's first render.
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * A callback invoked when the state of the dropdown menu changes
+	 * from open to closed and vice versa.
+	 */
+	onToggle?: ( willOpen: boolean ) => void;
+};
+
+export type DropdownMenuInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};
diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md
index c3ce8f42818fbe..5bb3ec2c3b6e0e 100644
--- a/packages/components/src/dropdown/README.md
+++ b/packages/components/src/dropdown/README.md
@@ -13,7 +13,7 @@ const MyDropdown = () => (
 	<Dropdown
 		className="my-container-class-name"
 		contentClassName="my-popover-content-classname"
-		position="bottom right"
+		popoverProps={ { placement: 'bottom-start' } }
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<Button
 				variant="primary"
@@ -32,96 +32,94 @@ 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
+### `defaultOpen`: `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.
+The open state of the dropdown when initially rendered. Use when you do not need to control its open state. It will be overridden by the `open` prop if it is specified on the component's first render.
 
--   Type: `String`
 -   Required: No
--   Default: `"top center"`
 
-### renderToggle
+### `expandOnMobile`: `boolean`
 
-A callback invoked to render the Dropdown Toggle Button.
+Opt-in prop to show popovers fullscreen on mobile.
 
--   Type: `Function`
--   Required: Yes
+-   Required: No
+-   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
+### `open`: `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"`.
+The controlled open state of the dropdown. Must be used in conjunction with `onToggle`.
 
-Specifying a `true` value will focus the container instead.
+-   Required: No
 
-Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
+### `onToggle`: `( willOpen: boolean ) => void`
+
+A callback invoked when the state of the dropdown changes from open to closed and vice versa.
 
--   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
+### `renderContent`: `( props: CallbackProps ) => ReactNode`
 
-A callback invoked when the popover should be closed.
+A callback invoked to render the content of the dropdown menu.
 
--   Type: `Function`
--   Required: No
+- `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
 
-### onToggle
+-   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
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+### `style`: `React.CSSProperties`
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+The style of the global container
 
--   Type: `Function`
 -   Required: No
diff --git a/packages/components/src/dropdown/dropdown-content-wrapper.tsx b/packages/components/src/dropdown/dropdown-content-wrapper.tsx
index 48c04a33657216..ce41f24081f819 100644
--- a/packages/components/src/dropdown/dropdown-content-wrapper.tsx
+++ b/packages/components/src/dropdown/dropdown-content-wrapper.tsx
@@ -6,11 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';
 
diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
deleted file mode 100644
index 0092256a61225c..00000000000000
--- a/packages/components/src/dropdown/index.js
+++ /dev/null
@@ -1,138 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect, useState } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Popover from '../popover';
-
-function useObservableState( initialState, onStateChange ) {
-	const [ state, setState ] = useState( initialState );
-	return [
-		state,
-		( value ) => {
-			setState( value );
-			if ( onStateChange ) {
-				onStateChange( value );
-			}
-		},
-	];
-}
-
-export default function Dropdown( props ) {
-	const {
-		renderContent,
-		renderToggle,
-		className,
-		contentClassName,
-		expandOnMobile,
-		headerTitle,
-		focusOnMount,
-		position,
-		popoverProps,
-		onClose,
-		onToggle,
-		style,
-	} = props;
-	// 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();
-	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
-
-	useEffect(
-		() => () => {
-			if ( onToggle && isOpen ) {
-				onToggle( false );
-			}
-		},
-		[ onToggle, isOpen ]
-	);
-
-	function toggle() {
-		setIsOpen( ! isOpen );
-	}
-
-	/**
-	 * Closes the popover when focus leaves it unless the toggle was pressed or
-	 * focus has moved to a separate dialog. The former is to let the toggle
-	 * handle closing the popover and the latter is to preserve presence in
-	 * case a dialog has opened, allowing focus to return when it's dismissed.
-	 */
-	function closeIfFocusOutside() {
-		const { ownerDocument } = containerRef.current;
-		const dialog = ownerDocument.activeElement.closest( '[role="dialog"]' );
-		if (
-			! containerRef.current.contains( ownerDocument.activeElement ) &&
-			( ! dialog || dialog.contains( containerRef.current ) )
-		) {
-			close();
-		}
-	}
-
-	function close() {
-		if ( onClose ) {
-			onClose();
-		}
-		setIsOpen( false );
-	}
-
-	const args = { isOpen, onToggle: toggle, onClose: close };
-	const popoverPropsHaveAnchor =
-		!! popoverProps?.anchor ||
-		// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
-		// be removed from `Popover` from WordPress 6.3
-		!! popoverProps?.anchorRef ||
-		!! popoverProps?.getAnchorRect ||
-		!! popoverProps?.anchorRect;
-
-	return (
-		<div
-			className={ classnames( 'components-dropdown', className ) }
-			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
-			// 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"
-			style={ style }
-		>
-			{ renderToggle( args ) }
-			{ isOpen && (
-				<Popover
-					position={ position }
-					onClose={ close }
-					onFocusOutside={ closeIfFocusOutside }
-					expandOnMobile={ expandOnMobile }
-					headerTitle={ headerTitle }
-					focusOnMount={ focusOnMount }
-					// This value is used to ensure that the dropdowns
-					// align with the editor header by default.
-					offset={ 13 }
-					anchor={
-						! popoverPropsHaveAnchor
-							? fallbackPopoverAnchor
-							: undefined
-					}
-					{ ...popoverProps }
-					className={ classnames(
-						'components-dropdown__content',
-						popoverProps ? popoverProps.className : undefined,
-						contentClassName
-					) }
-				>
-					{ renderContent( args ) }
-				</Popover>
-			) }
-		</div>
-	);
-}
diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx
new file mode 100644
index 00000000000000..3530d3b1e8de23
--- /dev/null
+++ b/packages/components/src/dropdown/index.tsx
@@ -0,0 +1,185 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, useContextSystem } from '../context';
+import { useControlledValue } from '../utils/hooks';
+import Popover from '../popover';
+import type { DropdownProps, DropdownInternalContext } from './types';
+
+const UnconnectedDropdown = (
+	props: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const {
+		renderContent,
+		renderToggle,
+		className,
+		contentClassName,
+		expandOnMobile,
+		headerTitle,
+		focusOnMount,
+		popoverProps,
+		onClose,
+		onToggle,
+		style,
+
+		open,
+		defaultOpen,
+
+		// Deprecated props
+		position,
+
+		// From context system
+		variant,
+	} = useContextSystem< DropdownProps & DropdownInternalContext >(
+		props,
+		'Dropdown'
+	);
+
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.components.Dropdown', {
+			since: '6.2',
+			alternative: '`popoverProps.placement` prop',
+			hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.',
+		} );
+	}
+
+	// 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< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >();
+
+	const [ isOpen, setIsOpen ] = useControlledValue( {
+		defaultValue: defaultOpen,
+		value: open,
+		onChange: onToggle,
+	} );
+
+	/**
+	 * Closes the popover when focus leaves it unless the toggle was pressed or
+	 * focus has moved to a separate dialog. The former is to let the toggle
+	 * handle closing the popover and the latter is to preserve presence in
+	 * 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"]' );
+		if (
+			! containerRef.current.contains( ownerDocument.activeElement ) &&
+			( ! dialog || dialog.contains( containerRef.current ) )
+		) {
+			close();
+		}
+	}
+
+	function close() {
+		onClose?.();
+		setIsOpen( false );
+	}
+
+	const args = {
+		isOpen: !! isOpen,
+		onToggle: () => setIsOpen( ! isOpen ),
+		onClose: close,
+	};
+	const popoverPropsHaveAnchor =
+		!! popoverProps?.anchor ||
+		// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
+		// be removed from `Popover` from WordPress 6.3
+		!! popoverProps?.anchorRef ||
+		!! popoverProps?.getAnchorRect ||
+		!! popoverProps?.anchorRect;
+
+	return (
+		<div
+			className={ className }
+			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 }
+			style={ style }
+		>
+			{ renderToggle( args ) }
+			{ isOpen && (
+				<Popover
+					position={ position }
+					onClose={ close }
+					onFocusOutside={ closeIfFocusOutside }
+					expandOnMobile={ expandOnMobile }
+					headerTitle={ headerTitle }
+					focusOnMount={ focusOnMount }
+					// This value is used to ensure that the dropdowns
+					// align with the editor header by default.
+					offset={ 13 }
+					anchor={
+						! popoverPropsHaveAnchor
+							? fallbackPopoverAnchor
+							: undefined
+					}
+					variant={ variant }
+					{ ...popoverProps }
+					className={ clsx(
+						'components-dropdown__content',
+						popoverProps?.className,
+						contentClassName
+					) }
+				>
+					{ renderContent( args ) }
+				</Popover>
+			) }
+		</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-dropdown-content-classname"
+ *     popoverProps={ { placement: 'bottom-start' } }
+ *     renderToggle={ ( { isOpen, onToggle } ) => (
+ *       <Button
+ *         variant="primary"
+ *         onClick={ onToggle }
+ *         aria-expanded={ isOpen }
+ *       >
+ *         Toggle Dropdown!
+ *       </Button>
+ *     ) }
+ *     renderContent={ () => <div>This is the content of the dropdown.</div> }
+ *   />
+ * );
+ * ```
+ */
+export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );
+
+export default Dropdown;
diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.js
deleted file mode 100644
index 191b03bb07d8be..00000000000000
--- a/packages/components/src/dropdown/stories/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Internal dependencies
- */
-import Dropdown from '../';
-import Button from '../../button';
-import { DropdownContentWrapper } from '../dropdown-content-wrapper';
-
-export default {
-	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 } },
-	},
-};
-
-const Template = ( args ) => {
-	return (
-		<div style={ { height: 150 } }>
-			<Dropdown { ...args } />
-		</div>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	position: 'bottom right',
-	renderToggle: ( { isOpen, onToggle } ) => (
-		<Button onClick={ onToggle } aria-expanded={ isOpen } isPrimary>
-			Open dropdown
-		</Button>
-	),
-	renderContent: () => <div>This is the dropdown content.</div>,
-};
-
-/**
- * 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( {} );
-WithMorePadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="medium">
-			Content wrapped with <code>{ `paddingSize="medium"` }</code>.
-		</DropdownContentWrapper>
-	),
-};
-
-/**
- * The `<DropdownContentWrapper>` convenience wrapper can also be used to remove padding entirely,
- * 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( {} );
-WithNoPadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="none">
-			Content wrapped with <code>{ `paddingSize="none"` }</code>.
-		</DropdownContentWrapper>
-	),
-};
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
new file mode 100644
index 00000000000000..ff4d0101a377ef
--- /dev/null
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Dropdown from '..';
+import Button from '../../button';
+import MenuGroup from '../../menu-group';
+import MenuItem from '../../menu-item';
+import { DropdownContentWrapper } from '../dropdown-content-wrapper';
+
+const meta: Meta< typeof Dropdown > = {
+	title: 'Components/Overlays/Dropdown',
+	id: 'components-dropdown',
+	component: Dropdown,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { DropdownContentWrapper },
+	argTypes: {
+		focusOnMount: {
+			options: [ 'firstElement', true, false ],
+			control: {
+				type: 'radio',
+			},
+		},
+		position: { control: false },
+		renderContent: { control: false },
+		renderToggle: { control: false },
+		open: { control: false },
+		defaultOpen: { control: false },
+		onToggle: { control: false },
+		onClose: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof Dropdown > = {
+	args: {
+		renderToggle: ( { isOpen, onToggle } ) => (
+			<Button
+				onClick={ onToggle }
+				aria-expanded={ isOpen }
+				variant="primary"
+			>
+				Open dropdown
+			</Button>
+		),
+		renderContent: () => <div>This is the dropdown content.</div>,
+	},
+};
+
+/**
+ * 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: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="medium">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="medium"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</DropdownContentWrapper>
+		),
+	},
+};
+
+/**
+ * The `<DropdownContentWrapper>` convenience wrapper can also be used to remove padding entirely,
+ * 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: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="none">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="none"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</DropdownContentWrapper>
+		),
+	},
+};
+
+export const WithMenuItems: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<>
+				<MenuItem>Standalone Item</MenuItem>
+				<MenuGroup label="Group 1">
+					<MenuItem>Item 1</MenuItem>
+					<MenuItem>Item 2</MenuItem>
+				</MenuGroup>
+				<MenuGroup label="Group 2">
+					<MenuItem>Item 1</MenuItem>
+					<MenuItem>Item 2</MenuItem>
+				</MenuGroup>
+			</>
+		),
+	},
+};
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index f3b0570eca1d84..d7ae7963f7ed8c 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -5,9 +5,32 @@
 .components-dropdown__content {
 	.components-popover__content {
 		padding: $grid-unit-10;
+
+		&:has(.components-menu-group) {
+			padding: 0;
+
+			.components-dropdown-menu__menu > .components-menu-item__button,
+			> .components-menu-item__button {
+				margin: $grid-unit-10;
+				width: auto;
+			}
+		}
 	}
 
 	[role="menuitem"] {
 		white-space: nowrap;
 	}
+
+	.components-menu-group {
+		padding: $grid-unit-10;
+	}
+
+	.components-menu-group + .components-menu-group {
+		border-top: $border-width solid $gray-400;
+		padding: $grid-unit-10;
+	}
+
+	&.is-alternate .components-menu-group + .components-menu-group {
+		border-color: $gray-900;
+	}
 }
diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts
index f64e886e8be264..24f4de4b4c6c92 100644
--- a/packages/components/src/dropdown/styles.ts
+++ b/packages/components/src/dropdown/styles.ts
@@ -7,11 +7,13 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import type { DropdownContentWrapperProps } from './types';
 
 const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {
-	if ( paddingSize === 'none' ) return;
+	if ( paddingSize === 'none' ) {
+		return;
+	}
 
 	const paddingValues = {
 		small: space( 2 ),
diff --git a/packages/components/src/dropdown/test/index.js b/packages/components/src/dropdown/test/index.js
deleted file mode 100644
index b4d4f81fde8d1a..00000000000000
--- a/packages/components/src/dropdown/test/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import Dropdown from '../';
-
-describe( 'Dropdown', () => {
-	it( 'should toggle the dropdown properly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const { unmount } = render(
-			<Dropdown
-				className="container"
-				contentClassName="content"
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<button aria-expanded={ isOpen } onClick={ onToggle }>
-						Toggle
-					</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();
-
-		await user.click( button );
-
-		expect(
-			screen.getByRole( 'button', { expanded: true } )
-		).toBeVisible();
-
-		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
-		);
-
-		// Cleanup remaining effects, like the delayed popover positioning
-		unmount();
-	} );
-
-	it( 'should close the dropdown when calling onClose', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		render(
-			<Dropdown
-				className="container"
-				contentClassName="content"
-				renderToggle={ ( { isOpen, onToggle, onClose } ) => [
-					<button
-						key="open"
-						className="open"
-						aria-expanded={ isOpen }
-						onClick={ onToggle }
-					>
-						Toggle
-					</button>,
-					<button key="close" className="close" onClick={ onClose }>
-						close
-					</button>,
-				] }
-				renderContent={ () => null }
-				popoverProps={ { 'data-testid': 'popover' } }
-			/>
-		);
-
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
-
-		await user.click( screen.getByRole( 'button', { name: 'Toggle' } ) );
-
-		await waitFor( () =>
-			expect( screen.getByTestId( 'popover' ) ).toBeVisible()
-		);
-
-		await user.click( screen.getByRole( 'button', { name: 'close' } ) );
-
-		expect( screen.queryByTestId( 'popover' ) ).not.toBeInTheDocument();
-	} );
-} );
diff --git a/packages/components/src/dropdown/test/index.tsx b/packages/components/src/dropdown/test/index.tsx
new file mode 100644
index 00000000000000..c737499c7fb28d
--- /dev/null
+++ b/packages/components/src/dropdown/test/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import Dropdown from '..';
+
+describe( 'Dropdown', () => {
+	it( 'should toggle the dropdown properly', async () => {
+		const user = userEvent.setup();
+		const { unmount } = render(
+			<Dropdown
+				className="container"
+				contentClassName="content"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<button aria-expanded={ isOpen } onClick={ onToggle }>
+						Toggle
+					</button>
+				) }
+				renderContent={ () => <span>test</span> }
+			/>
+		);
+
+		const button = screen.getByRole( 'button', { expanded: false } );
+
+		expect( button ).toBeVisible();
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
+
+		await user.click( button );
+
+		expect(
+			screen.getByRole( 'button', { expanded: true } )
+		).toBeVisible();
+
+		await waitFor( () =>
+			expect( screen.queryByText( 'test' ) ).toBeVisible()
+		);
+
+		// Cleanup remaining effects, like the delayed popover positioning
+		unmount();
+	} );
+
+	it( 'should close the dropdown when calling onClose', async () => {
+		const user = userEvent.setup();
+		render(
+			<Dropdown
+				className="container"
+				contentClassName="content"
+				renderToggle={ ( { isOpen, onToggle, onClose } ) => [
+					<button
+						key="open"
+						className="open"
+						aria-expanded={ isOpen }
+						onClick={ onToggle }
+					>
+						Toggle
+					</button>,
+					<button key="close" className="close" onClick={ onClose }>
+						close
+					</button>,
+				] }
+				renderContent={ () => <span>test</span> }
+			/>
+		);
+
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
+
+		await user.click( screen.getByRole( 'button', { name: 'Toggle' } ) );
+
+		await waitFor( () =>
+			expect( screen.getByText( 'test' ) ).toBeVisible()
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'close' } ) );
+
+		expect( screen.queryByText( 'test' ) ).not.toBeInTheDocument();
+	} );
+} );
diff --git a/packages/components/src/dropdown/types.ts b/packages/components/src/dropdown/types.ts
index 573e0b5ee7e017..b185ec6fe14f71 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,108 @@ 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 dropdown changes
+	 * from open to closed and vice versa.
+	 */
+	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'
+	>;
+	/**
+	 * 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;
+	/**
+	 * Legacy way to specify the popover's position with respect to its anchor.
+	 * For details about the possible values, see the `Popover` component's docs.
+	 * _Note: this prop is deprecated. Use the `popoverProps.placement` prop
+	 * instead._
+	 *
+	 * @deprecated
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * The controlled open state of the dropdown.
+	 * Must be used in conjunction with `onToggle`.
+	 */
+	open?: boolean;
+	/**
+	 * The open state of the dropdown when initially rendered.
+	 * Use when you do not need to control its open state. It will be overridden
+	 * by the `open` prop if it is specified on the component's first render.
+	 */
+	defaultOpen?: boolean;
+};
+
+export type DropdownInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};
diff --git a/packages/components/src/duotone-picker/README.md b/packages/components/src/duotone-picker/README.md
index 7b272e38dd8412..550cf5774b2a76 100644
--- a/packages/components/src/duotone-picker/README.md
+++ b/packages/components/src/duotone-picker/README.md
@@ -3,8 +3,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const DUOTONE_PALETTE = [
 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
@@ -64,6 +64,20 @@ An array of colors for the duotone effect.
 
 Callback which is called when the duotone colors change.
 
+### `asButtons`: `boolean`
+
+Whether the control should present as a set of buttons, each with its own tab stop.
+
+- Required: No
+- Default: `false`
+
+### `loop`: `boolean`
+
+Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+
+- Required: No
+- Default: `true`
+
 ## DuotoneSwatch Props
 
 ### `values`
diff --git a/packages/components/src/duotone-picker/color-list-picker/index.tsx b/packages/components/src/duotone-picker/color-list-picker/index.tsx
new file mode 100644
index 00000000000000..e3925b7d064fdc
--- /dev/null
+++ b/packages/components/src/duotone-picker/color-list-picker/index.tsx
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { swatch } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import type { ColorListPickerProps, ColorOptionProps } from './types';
+import { useInstanceId } from '@wordpress/compose';
+
+function ColorOption( {
+	label,
+	value,
+	colors,
+	disableCustomColors,
+	enableAlpha,
+	onChange,
+}: ColorOptionProps ) {
+	const [ isOpen, setIsOpen ] = useState( false );
+	const idRoot = useInstanceId( ColorOption, 'color-list-picker-option' );
+	const labelId = `${ idRoot }__label`;
+	const contentId = `${ idRoot }__content`;
+
+	return (
+		<>
+			<Button
+				__next40pxDefaultSize
+				className="components-color-list-picker__swatch-button"
+				id={ labelId }
+				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				aria-expanded={ isOpen }
+				aria-controls={ contentId }
+				icon={
+					value ? (
+						<ColorIndicator
+							colorValue={ value }
+							className="components-color-list-picker__swatch-color"
+						/>
+					) : (
+						<Icon icon={ swatch } />
+					)
+				}
+				text={ label }
+			/>
+			<div
+				role="group"
+				id={ contentId }
+				aria-labelledby={ labelId }
+				aria-hidden={ ! isOpen }
+			>
+				{ isOpen && (
+					<ColorPalette
+						aria-label={ __( 'Color options' ) }
+						className="components-color-list-picker__color-picker"
+						colors={ colors }
+						value={ value }
+						clearable={ false }
+						onChange={ onChange }
+						disableCustomColors={ disableCustomColors }
+						enableAlpha={ enableAlpha }
+					/>
+				) }
+			</div>
+		</>
+	);
+}
+
+function ColorListPicker( {
+	colors,
+	labels,
+	value = [],
+	disableCustomColors,
+	enableAlpha,
+	onChange,
+}: ColorListPickerProps ) {
+	return (
+		<div className="components-color-list-picker">
+			{ labels.map( ( label, index ) => (
+				<ColorOption
+					key={ index }
+					label={ label }
+					value={ value[ index ] }
+					colors={ colors }
+					disableCustomColors={ disableCustomColors }
+					enableAlpha={ enableAlpha }
+					onChange={ ( newColor ) => {
+						const newColors: ( string | undefined )[] =
+							value.slice();
+						newColors[ index ] = newColor;
+						onChange( newColors );
+					} }
+				/>
+			) ) }
+		</div>
+	);
+}
+
+export default ColorListPicker;
diff --git a/packages/components/src/duotone-picker/color-list-picker/style.scss b/packages/components/src/duotone-picker/color-list-picker/style.scss
new file mode 100644
index 00000000000000..56f2546158329a
--- /dev/null
+++ b/packages/components/src/duotone-picker/color-list-picker/style.scss
@@ -0,0 +1,13 @@
+.components-color-list-picker,
+.components-color-list-picker__swatch-button {
+	width: 100%;
+}
+
+.components-color-list-picker__color-picker {
+	margin: $grid-unit-10 0;
+}
+
+.components-color-list-picker__swatch-color {
+	// Match the 24px size of the `swatch` icon (used when no color is set)
+	margin: 2px;
+}
diff --git a/packages/components/src/duotone-picker/color-list-picker/types.ts b/packages/components/src/duotone-picker/color-list-picker/types.ts
new file mode 100644
index 00000000000000..5c42e6c9371b62
--- /dev/null
+++ b/packages/components/src/duotone-picker/color-list-picker/types.ts
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type ColorListPickerProps = {
+	/**
+	 * A list of predefined colors. Each color is an object with a `name` and a
+	 * `color` value.
+	 * The `name` is a string used to identify the color in the UI.
+	 * The `color` is a valid CSS color string.
+	 */
+	colors: Array< {
+		name: string;
+		color: NonNullable< CSSProperties[ 'color' ] >;
+	} >;
+	/**
+	 * A list of labels for each of the options displayed in the UI.
+	 */
+	labels: Array< string >;
+	/**
+	 * An array containing the currently selected colors.
+	 */
+	value?: Array< string >;
+	/**
+	 * Controls whether the custom color picker is displayed.
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Controls whether the ColorPalette should show an alpha channel control.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * A function that receives the updated color value.
+	 */
+	onChange: ( newValue: Array< string | undefined > ) => void;
+};
+
+export type ColorOptionProps = Pick<
+	ColorListPickerProps,
+	'colors' | 'disableCustomColors' | 'enableAlpha'
+> & {
+	label: ColorListPickerProps[ 'labels' ][ number ];
+	value: string | undefined;
+	onChange: ( newValue: string | undefined ) => void;
+};
diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.js b/packages/components/src/duotone-picker/custom-duotone-bar.js
deleted file mode 100644
index 8aef83f8a4bfab..00000000000000
--- a/packages/components/src/duotone-picker/custom-duotone-bar.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import CustomGradientBar from '../custom-gradient-picker/gradient-bar';
-
-import {
-	getColorStopsFromColors,
-	getGradientFromCSSColors,
-	getColorsFromColorStops,
-} from './utils';
-
-const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
-
-export default function CustomDuotoneBar( { value, onChange } ) {
-	const hasGradient = !! value;
-	const values = hasGradient ? value : PLACEHOLDER_VALUES;
-	const background = getGradientFromCSSColors( values );
-	const controlPoints = getColorStopsFromColors( values );
-	return (
-		<CustomGradientBar
-			disableInserter
-			background={ background }
-			hasGradient={ hasGradient }
-			value={ controlPoints }
-			onChange={ ( newColorStops ) => {
-				const newValue = getColorsFromColorStops( newColorStops );
-				onChange( newValue );
-			} }
-		/>
-	);
-}
diff --git a/packages/components/src/duotone-picker/custom-duotone-bar.tsx b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
new file mode 100644
index 00000000000000..f72db529ebd481
--- /dev/null
+++ b/packages/components/src/duotone-picker/custom-duotone-bar.tsx
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import CustomGradientBar from '../custom-gradient-picker/gradient-bar';
+
+import {
+	getColorStopsFromColors,
+	getGradientFromCSSColors,
+	getColorsFromColorStops,
+} from './utils';
+
+const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
+
+export default function CustomDuotoneBar( {
+	value,
+	onChange,
+}: {
+	value?: string[];
+	onChange: ( value?: string[] ) => void;
+} ) {
+	const hasGradient = !! value;
+	const values = hasGradient ? value : PLACEHOLDER_VALUES;
+	const background = getGradientFromCSSColors( values );
+	const controlPoints = getColorStopsFromColors( values );
+	return (
+		<CustomGradientBar
+			disableInserter
+			background={ background }
+			hasGradient={ hasGradient }
+			value={ controlPoints }
+			onChange={ ( newColorStops ) => {
+				const newValue = getColorsFromColorStops( newColorStops );
+				onChange( newValue );
+			} }
+		/>
+	);
+}
diff --git a/packages/components/src/duotone-picker/duotone-picker.js b/packages/components/src/duotone-picker/duotone-picker.js
deleted file mode 100644
index 39e1733460f2ae..00000000000000
--- a/packages/components/src/duotone-picker/duotone-picker.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * External dependencies
- */
-import { isEqual } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ColorListPicker from '../color-list-picker';
-import CircularOptionPicker from '../circular-option-picker';
-import { VStack } from '../v-stack';
-
-import CustomDuotoneBar from './custom-duotone-bar';
-import { getDefaultColors, getGradientFromCSSColors } from './utils';
-import { Spacer } from '../spacer';
-
-function DuotonePicker( {
-	clearable = true,
-	unsetable = true,
-	colorPalette,
-	duotonePalette,
-	disableCustomColors,
-	disableCustomDuotone,
-	value,
-	onChange,
-} ) {
-	const [ defaultDark, defaultLight ] = useMemo(
-		() => getDefaultColors( colorPalette ),
-		[ colorPalette ]
-	);
-
-	const isUnset = value === 'unset';
-
-	const unsetOption = (
-		<CircularOptionPicker.Option
-			key="unset"
-			value="unset"
-			isSelected={ isUnset }
-			tooltipText={ __( 'Unset' ) }
-			className="components-duotone-picker__color-indicator"
-			onClick={ () => {
-				onChange( isUnset ? undefined : 'unset' );
-			} }
-		/>
-	);
-
-	const options = duotonePalette.map( ( { colors, slug, name } ) => {
-		const style = {
-			background: getGradientFromCSSColors( colors, '135deg' ),
-			color: 'transparent',
-		};
-		const tooltipText =
-			name ??
-			sprintf(
-				// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-				__( 'Duotone code: %s' ),
-				slug
-			);
-		const label = name
-			? sprintf(
-					// translators: %s: The name of the option e.g: "Dark grayscale".
-					__( 'Duotone: %s' ),
-					name
-			  )
-			: tooltipText;
-		const isSelected = isEqual( colors, value );
-
-		return (
-			<CircularOptionPicker.Option
-				key={ slug }
-				value={ colors }
-				isSelected={ isSelected }
-				aria-label={ label }
-				tooltipText={ tooltipText }
-				style={ style }
-				onClick={ () => {
-					onChange( isSelected ? undefined : colors );
-				} }
-			/>
-		);
-	} );
-
-	return (
-		<CircularOptionPicker
-			options={ unsetable ? [ unsetOption, ...options ] : options }
-			actions={
-				!! clearable && (
-					<CircularOptionPicker.ButtonAction
-						onClick={ () => onChange( undefined ) }
-					>
-						{ __( 'Clear' ) }
-					</CircularOptionPicker.ButtonAction>
-				)
-			}
-		>
-			<Spacer paddingTop={ 4 }>
-				<VStack spacing={ 3 }>
-					{ ! disableCustomColors && ! disableCustomDuotone && (
-						<CustomDuotoneBar
-							value={ isUnset ? undefined : value }
-							onChange={ onChange }
-						/>
-					) }
-					{ ! disableCustomDuotone && (
-						<ColorListPicker
-							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
-							colors={ colorPalette }
-							value={ isUnset ? undefined : value }
-							disableCustomColors={ disableCustomColors }
-							enableAlpha
-							onChange={ ( newColors ) => {
-								if ( ! newColors[ 0 ] ) {
-									newColors[ 0 ] = defaultDark;
-								}
-								if ( ! newColors[ 1 ] ) {
-									newColors[ 1 ] = defaultLight;
-								}
-								const newValue =
-									newColors.length >= 2
-										? newColors
-										: undefined;
-								onChange( newValue );
-							} }
-						/>
-					) }
-				</VStack>
-			</Spacer>
-		</CircularOptionPicker>
-	);
-}
-
-export default DuotonePicker;
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
new file mode 100644
index 00000000000000..8764b401c38296
--- /dev/null
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -0,0 +1,218 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ColorListPicker from './color-list-picker';
+import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
+
+import CustomDuotoneBar from './custom-duotone-bar';
+import { getDefaultColors, getGradientFromCSSColors } from './utils';
+import { Spacer } from '../spacer';
+import type { DuotonePickerProps } from './types';
+
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
+function DuotonePicker( {
+	asButtons,
+	loop,
+	clearable = true,
+	unsetable = true,
+	colorPalette,
+	duotonePalette,
+	disableCustomColors,
+	disableCustomDuotone,
+	value,
+	onChange,
+	'aria-label': ariaLabel,
+	'aria-labelledby': ariaLabelledby,
+	...otherProps
+}: DuotonePickerProps ) {
+	const [ defaultDark, defaultLight ] = useMemo(
+		() => getDefaultColors( colorPalette ),
+		[ colorPalette ]
+	);
+
+	const isUnset = value === 'unset';
+	const unsetOptionLabel = __( 'Unset' );
+
+	const unsetOption = (
+		<CircularOptionPicker.Option
+			key="unset"
+			value="unset"
+			isSelected={ isUnset }
+			tooltipText={ unsetOptionLabel }
+			aria-label={ unsetOptionLabel }
+			className="components-duotone-picker__color-indicator"
+			onClick={ () => {
+				onChange( isUnset ? undefined : 'unset' );
+			} }
+		/>
+	);
+
+	const duotoneOptions = duotonePalette.map( ( { colors, slug, name } ) => {
+		const style = {
+			background: getGradientFromCSSColors( colors, '135deg' ),
+			color: 'transparent',
+		};
+		const tooltipText =
+			name ??
+			sprintf(
+				// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+				__( 'Duotone code: %s' ),
+				slug
+			);
+		const label = name
+			? sprintf(
+					// translators: %s: The name of the option e.g: "Dark grayscale".
+					__( 'Duotone: %s' ),
+					name
+			  )
+			: tooltipText;
+		const isSelected = fastDeepEqual( colors, value );
+
+		return (
+			<CircularOptionPicker.Option
+				key={ slug }
+				value={ colors }
+				isSelected={ isSelected }
+				aria-label={ label }
+				tooltipText={ tooltipText }
+				style={ style }
+				onClick={ () => {
+					onChange( isSelected ? undefined : colors );
+				} }
+			/>
+		);
+	} );
+
+	let metaProps:
+		| { asButtons: false; loop?: boolean; 'aria-label': string }
+		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
+		| { asButtons: true };
+
+	if ( asButtons ) {
+		metaProps = { asButtons: true };
+	} else {
+		const _metaProps: { asButtons: false; loop?: boolean } = {
+			asButtons: false,
+			loop,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
+	}
+
+	const options = unsetable
+		? [ unsetOption, ...duotoneOptions ]
+		: duotoneOptions;
+
+	return (
+		<CircularOptionPicker
+			{ ...otherProps }
+			{ ...metaProps }
+			options={ options }
+			actions={
+				!! clearable && (
+					<CircularOptionPicker.ButtonAction
+						onClick={ () => onChange( undefined ) }
+						accessibleWhenDisabled
+						disabled={ ! value }
+					>
+						{ __( 'Clear' ) }
+					</CircularOptionPicker.ButtonAction>
+				)
+			}
+		>
+			<Spacer paddingTop={ options.length === 0 ? 0 : 4 }>
+				<VStack spacing={ 3 }>
+					{ ! disableCustomColors && ! disableCustomDuotone && (
+						<CustomDuotoneBar
+							value={ isUnset ? undefined : value }
+							onChange={ onChange }
+						/>
+					) }
+					{ ! disableCustomDuotone && (
+						<ColorListPicker
+							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
+							colors={ colorPalette }
+							value={ isUnset ? undefined : value }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha
+							onChange={ ( newColors ) => {
+								if ( ! newColors[ 0 ] ) {
+									newColors[ 0 ] = defaultDark;
+								}
+								if ( ! newColors[ 1 ] ) {
+									newColors[ 1 ] = defaultLight;
+								}
+								const newValue =
+									newColors.length >= 2
+										? newColors
+										: undefined;
+								// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+								// but it's currently typed as a string[].
+								// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
+								onChange( newValue );
+							} }
+						/>
+					) }
+				</VStack>
+			</Spacer>
+		</CircularOptionPicker>
+	);
+}
+
+export default DuotonePicker;
diff --git a/packages/components/src/duotone-picker/duotone-swatch.js b/packages/components/src/duotone-picker/duotone-swatch.js
deleted file mode 100644
index d98671affbbd13..00000000000000
--- a/packages/components/src/duotone-picker/duotone-swatch.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { getGradientFromCSSColors } from './utils';
-
-function DuotoneSwatch( { values } ) {
-	return values ? (
-		<ColorIndicator
-			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
-		/>
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default DuotoneSwatch;
diff --git a/packages/components/src/duotone-picker/duotone-swatch.tsx b/packages/components/src/duotone-picker/duotone-swatch.tsx
new file mode 100644
index 00000000000000..1a40bb68f1c51f
--- /dev/null
+++ b/packages/components/src/duotone-picker/duotone-swatch.tsx
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { swatch } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
+import { getGradientFromCSSColors } from './utils';
+import type { DuotoneSwatchProps } from './types';
+
+function DuotoneSwatch( { values }: DuotoneSwatchProps ) {
+	return values ? (
+		<ColorIndicator
+			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
+		/>
+	) : (
+		<Icon icon={ swatch } />
+	);
+}
+
+export default DuotoneSwatch;
diff --git a/packages/components/src/duotone-picker/index.js b/packages/components/src/duotone-picker/index.ts
similarity index 100%
rename from packages/components/src/duotone-picker/index.js
rename to packages/components/src/duotone-picker/index.ts
diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.js b/packages/components/src/duotone-picker/stories/duotone-picker.js
deleted file mode 100644
index 6186dd1b3ad37f..00000000000000
--- a/packages/components/src/duotone-picker/stories/duotone-picker.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { DuotonePicker } from '../';
-
-export default {
-	title: 'Components/DuotonePicker',
-	component: DuotonePicker,
-	argTypes: {
-		clearable: { control: { type: 'boolean' } },
-		disableCustomColors: { control: { type: 'boolean' } },
-		disableCustomDuotone: { control: { type: 'boolean' } },
-		onChange: { action: 'onChange' },
-		unsetable: { control: { type: 'boolean' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const DUOTONE_PALETTE = [
-	{
-		colors: [ '#8c00b7', '#fcff41' ],
-		name: 'Purple and yellow',
-		slug: 'purple-yellow',
-	},
-	{
-		colors: [ '#000097', '#ff4747' ],
-		name: 'Blue and red',
-		slug: 'blue-red',
-	},
-];
-
-const COLOR_PALETTE = [
-	{ color: '#ff4747', name: 'Red', slug: 'red' },
-	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
-	{ color: '#000097', name: 'Blue', slug: 'blue' },
-	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
-];
-
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-
-	return (
-		<DuotonePicker
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				setValue( ...changeArgs );
-				onChange( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	colorPalette: COLOR_PALETTE,
-	duotonePalette: DUOTONE_PALETTE,
-};
diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
new file mode 100644
index 00000000000000..bf8439c38bb854
--- /dev/null
+++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DuotonePicker } from '..';
+import type { DuotonePickerProps } from '../types';
+
+const meta: Meta< typeof DuotonePicker > = {
+	title: 'Components/DuotonePicker',
+	component: DuotonePicker,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const DUOTONE_PALETTE = [
+	{
+		colors: [ '#8c00b7', '#fcff41' ],
+		name: 'Purple and yellow',
+		slug: 'purple-yellow',
+	},
+	{
+		colors: [ '#000097', '#ff4747' ],
+		name: 'Blue and red',
+		slug: 'blue-red',
+	},
+];
+
+const COLOR_PALETTE = [
+	{ color: '#ff4747', name: 'Red', slug: 'red' },
+	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+	{ color: '#000097', name: 'Blue', slug: 'blue' },
+	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+];
+
+const Template: StoryFn< typeof DuotonePicker > = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
+
+	return (
+		<DuotonePicker
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colorPalette: COLOR_PALETTE,
+	duotonePalette: DUOTONE_PALETTE,
+};
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.js b/packages/components/src/duotone-picker/stories/duotone-swatch.js
deleted file mode 100644
index e64b3e3c2c295f..00000000000000
--- a/packages/components/src/duotone-picker/stories/duotone-swatch.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Internal dependencies
- */
-import { DuotoneSwatch } from '../';
-
-export default {
-	title: 'Components/DuotoneSwatch',
-	component: DuotoneSwatch,
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const Template = ( args ) => {
-	return <DuotoneSwatch { ...args } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	values: [ '#000', '#fff' ],
-};
-
-export const SingleColor = Template.bind( {} );
-SingleColor.args = {
-	values: [ 'pink' ],
-};
-
-export const Null = Template.bind( {} );
-Null.args = {
-	values: null,
-};
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
new file mode 100644
index 00000000000000..edcca5114d0260
--- /dev/null
+++ b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { DuotoneSwatch } from '..';
+
+const meta: Meta< typeof DuotoneSwatch > = {
+	title: 'Components/DuotoneSwatch',
+	component: DuotoneSwatch,
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof DuotoneSwatch > = ( args ) => {
+	return <DuotoneSwatch { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	values: [ '#000', '#fff' ],
+};
+
+export const SingleColor = Template.bind( {} );
+SingleColor.args = {
+	values: [ 'pink' ],
+};
+
+export const Null = Template.bind( {} );
+Null.args = {
+	values: null,
+};
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
new file mode 100644
index 00000000000000..382f7b364ba7f4
--- /dev/null
+++ b/packages/components/src/duotone-picker/types.ts
@@ -0,0 +1,94 @@
+export type DuotonePickerProps = {
+	/**
+	 * Whether there should be a button to clear the duotone value.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Whether there should be an `unset` option.
+	 *
+	 * @default true
+	 */
+	unsetable?: boolean;
+	/**
+	 * Array of color presets of the form `{ color: '#000000', name: 'Black', slug: 'black' }`.
+	 */
+	colorPalette: Color[];
+	/**
+	 * Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
+	 */
+	duotonePalette: DuotoneColor[];
+	/**
+	 * Whether custom colors should be disabled.
+	 *
+	 * @default false
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether custom duotone values should be disabled.
+	 *
+	 * @default false
+	 */
+	disableCustomDuotone?: boolean;
+	/**
+	 * An array of colors for the duotone effect.
+	 */
+	value?: string[] | 'unset';
+	/**
+	 * Callback which is called when the duotone colors change.
+	 */
+	onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
+} & (
+	| {
+			/**
+			 * A label to identify the purpose of the control.
+			 *
+			 * @todo [#54055] Either this or `aria-labelledby` should be required
+			 */
+			'aria-label'?: string;
+			'aria-labelledby'?: never;
+	  }
+	| {
+			/**
+			 * An ID of an element to provide a label for the control.
+			 *
+			 * @todo [#54055] Either this or `aria-label` should be required
+			 */
+			'aria-labelledby'?: string;
+			'aria-label'?: never;
+	  }
+);
+
+type Color = {
+	color: string;
+	name: string;
+	slug: string;
+};
+
+type DuotoneColor = {
+	colors: string[];
+	name: string;
+	slug: string;
+};
+
+export type DuotoneSwatchProps = {
+	/**
+	 * An array of colors to show or `null` to show the placeholder swatch icon.
+	 */
+	values?: string[] | null;
+};
diff --git a/packages/components/src/duotone-picker/utils.js b/packages/components/src/duotone-picker/utils.js
deleted file mode 100644
index f33aff4f965d52..00000000000000
--- a/packages/components/src/duotone-picker/utils.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-extend( [ namesPlugin ] );
-
-/**
- * Object representation for a color.
- *
- * @typedef {Object} RGBColor
- * @property {number} r Red component of the color in the range [0,1].
- * @property {number} g Green component of the color in the range [0,1].
- * @property {number} b Blue component of the color in the range [0,1].
- */
-
-/**
- * Calculate the brightest and darkest values from a color palette.
- *
- * @param {Object[]} palette Color palette for the theme.
- *
- * @return {string[]} Tuple of the darkest color and brightest color.
- */
-export function getDefaultColors( palette ) {
-	// A default dark and light color are required.
-	if ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];
-
-	return palette
-		.map( ( { color } ) => ( {
-			color,
-			brightness: colord( color ).brightness(),
-		} ) )
-		.reduce(
-			( [ min, max ], current ) => {
-				return [
-					current.brightness <= min.brightness ? current : min,
-					current.brightness >= max.brightness ? current : max,
-				];
-			},
-			[ { brightness: 1 }, { brightness: 0 } ]
-		)
-		.map( ( { color } ) => color );
-}
-
-/**
- * Generate a duotone gradient from a list of colors.
- *
- * @param {string[]} colors CSS color strings.
- * @param {string}   angle  CSS gradient angle.
- *
- * @return {string} CSS gradient string for the duotone swatch.
- */
-export function getGradientFromCSSColors( colors = [], angle = '90deg' ) {
-	const l = 100 / colors.length;
-
-	const stops = colors
-		.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )
-		.join( ', ' );
-
-	return `linear-gradient( ${ angle }, ${ stops } )`;
-}
-
-/**
- * Convert a color array to an array of color stops.
- *
- * @param {string[]} colors CSS colors array
- *
- * @return {Object[]} Color stop information.
- */
-export function getColorStopsFromColors( colors ) {
-	return colors.map( ( color, i ) => ( {
-		position: ( i * 100 ) / ( colors.length - 1 ),
-		color,
-	} ) );
-}
-
-/**
- * Convert a color stop array to an array colors.
- *
- * @param {Object[]} colorStops Color stop information.
- *
- * @return {string[]} CSS colors array.
- */
-export function getColorsFromColorStops( colorStops = [] ) {
-	return colorStops.map( ( { color } ) => color );
-}
diff --git a/packages/components/src/duotone-picker/utils.ts b/packages/components/src/duotone-picker/utils.ts
new file mode 100644
index 00000000000000..3f3eb1fd1eb247
--- /dev/null
+++ b/packages/components/src/duotone-picker/utils.ts
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * Internal dependencies
+ */
+import type { DuotonePickerProps } from './types';
+
+extend( [ namesPlugin ] );
+
+/**
+ * Object representation for a color.
+ *
+ * @typedef {Object} RGBColor
+ * @property {number} r Red component of the color in the range [0,1].
+ * @property {number} g Green component of the color in the range [0,1].
+ * @property {number} b Blue component of the color in the range [0,1].
+ */
+
+/**
+ * Calculate the brightest and darkest values from a color palette.
+ *
+ * @param palette Color palette for the theme.
+ *
+ * @return Tuple of the darkest color and brightest color.
+ */
+export function getDefaultColors(
+	palette: DuotonePickerProps[ 'colorPalette' ]
+) {
+	// A default dark and light color are required.
+	if ( ! palette || palette.length < 2 ) {
+		return [ '#000', '#fff' ];
+	}
+
+	return palette
+		.map( ( { color } ) => ( {
+			color,
+			brightness: colord( color ).brightness(),
+		} ) )
+		.reduce(
+			( [ min, max ], current ) => {
+				return [
+					current.brightness <= min.brightness ? current : min,
+					current.brightness >= max.brightness ? current : max,
+				];
+			},
+			[
+				{ brightness: 1, color: '' },
+				{ brightness: 0, color: '' },
+			]
+		)
+		.map( ( { color } ) => color );
+}
+
+/**
+ * Generate a duotone gradient from a list of colors.
+ *
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
+ *
+ * @return  CSS gradient string for the duotone swatch.
+ */
+export function getGradientFromCSSColors(
+	colors: string[] = [],
+	angle = '90deg'
+) {
+	const l = 100 / colors.length;
+
+	const stops = colors
+		.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )
+		.join( ', ' );
+
+	return `linear-gradient( ${ angle }, ${ stops } )`;
+}
+
+/**
+ * Convert a color array to an array of color stops.
+ *
+ * @param colors CSS colors array
+ *
+ * @return Color stop information.
+ */
+export function getColorStopsFromColors( colors: string[] ) {
+	return colors.map( ( color, i ) => ( {
+		position: ( i * 100 ) / ( colors.length - 1 ),
+		color,
+	} ) );
+}
+
+/**
+ * Convert a color stop array to an array colors.
+ *
+ * @param colorStops Color stop information.
+ *
+ * @return CSS colors array.
+ */
+export function getColorsFromColorStops(
+	colorStops: { position: number; color: string }[] = []
+) {
+	return colorStops.map( ( { color } ) => color );
+}
diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index bdcdd90e718b59..d116859d9a303a 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useElevation } from './hook';
 import type { ElevationProps } from './types';
diff --git a/packages/components/src/elevation/hook.ts b/packages/components/src/elevation/hook.ts
index 797fe784c2e400..ce95de6ef6b67d 100644
--- a/packages/components/src/elevation/hook.ts
+++ b/packages/components/src/elevation/hook.ts
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -11,9 +12,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
-import { CONFIG, reduceMotion } from '../utils';
+import { CONFIG } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';
 import { isValueDefined } from '../utils/values';
 import type { ElevationProps } from './types';
@@ -74,9 +76,12 @@ export function useElevation(
 				left: offset,
 				right: offset,
 				top: offset,
-				transition,
 			},
-			reduceMotion( 'transition' )
+			css`
+				@media not ( prefers-reduced-motion ) {
+					transition: ${ transition };
+				}
+			`
 		);
 
 		if ( isValueDefined( hoverValue ) ) {
diff --git a/packages/components/src/elevation/stories/index.story.tsx b/packages/components/src/elevation/stories/index.story.tsx
new file mode 100644
index 00000000000000..912268f5341147
--- /dev/null
+++ b/packages/components/src/elevation/stories/index.story.tsx
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '..';
+
+const meta: Meta< typeof Elevation > = {
+	component: Elevation,
+	title: 'Components (Experimental)/Elevation',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		borderRadius: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Elevation > = ( args ) => {
+	return (
+		<div
+			style={ {
+				width: 150,
+				height: 150,
+				position: 'relative',
+			} }
+		>
+			<Elevation { ...args } />
+		</div>
+	);
+};
+
+const InteractiveTemplate: StoryFn< typeof Elevation > = ( args ) => {
+	return (
+		<button
+			style={ {
+				border: 0,
+				background: 'transparent',
+				width: 150,
+				height: 150,
+				position: 'relative',
+			} }
+		>
+			Click me
+			<Elevation { ...args } />
+		</button>
+	);
+};
+
+export const Default: StoryFn< typeof Elevation > = Template.bind( {} );
+Default.args = {
+	value: 5,
+};
+
+/**
+ * Enable the `isInteractive` prop to automatically generate values
+ * for the hover/active/focus states.
+ */
+export const WithInteractive: StoryFn< typeof Elevation > =
+	InteractiveTemplate.bind( {} );
+WithInteractive.args = {
+	...Default.args,
+	isInteractive: true,
+};
+
+/**
+ * You can also provide custom values for the hover/active/focus states
+ * instead of using the `isInteractive` prop.
+ */
+export const WithCustomInteractive: StoryFn< typeof Elevation > =
+	InteractiveTemplate.bind( {} );
+WithCustomInteractive.args = {
+	...Default.args,
+	hover: 7,
+	active: 1,
+	focus: 10,
+};
diff --git a/packages/components/src/elevation/stories/index.tsx b/packages/components/src/elevation/stories/index.tsx
deleted file mode 100644
index af4be87daa0cde..00000000000000
--- a/packages/components/src/elevation/stories/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '..';
-
-const meta: ComponentMeta< typeof Elevation > = {
-	component: Elevation,
-	title: 'Components (Experimental)/Elevation',
-	argTypes: {
-		as: { control: { type: 'text' } },
-		borderRadius: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Elevation > = ( args ) => {
-	return (
-		<div
-			style={ {
-				width: 150,
-				height: 150,
-				position: 'relative',
-			} }
-		>
-			<Elevation { ...args } />
-		</div>
-	);
-};
-
-const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
-	return (
-		<button
-			style={ {
-				border: 0,
-				background: 'transparent',
-				width: 150,
-				height: 150,
-				position: 'relative',
-			} }
-		>
-			Click me
-			<Elevation { ...args } />
-		</button>
-	);
-};
-
-export const Default: ComponentStory< typeof Elevation > = Template.bind( {} );
-Default.args = {
-	value: 5,
-};
-
-/**
- * Enable the `isInteractive` prop to automatically generate values
- * for the hover/active/focus states.
- */
-export const WithInteractive: ComponentStory< typeof Elevation > =
-	InteractiveTemplate.bind( {} );
-WithInteractive.args = {
-	...Default.args,
-	isInteractive: true,
-};
-
-/**
- * You can also provide custom values for the hover/active/focus states
- * instead of using the `isInteractive` prop.
- */
-export const WithCustomInteractive: ComponentStory< typeof Elevation > =
-	InteractiveTemplate.bind( {} );
-WithCustomInteractive.args = {
-	...Default.args,
-	hover: 7,
-	active: 1,
-	focus: 10,
-};
diff --git a/packages/components/src/elevation/test/__snapshots__/index.tsx.snap b/packages/components/src/elevation/test/__snapshots__/index.tsx.snap
index 248fe4dbd25823..2c78ed92d491b5 100644
--- a/packages/components/src/elevation/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/elevation/test/__snapshots__/index.tsx.snap
@@ -15,13 +15,12 @@ exports[`props should render active 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -57,13 +56,12 @@ exports[`props should render correctly 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -91,13 +89,12 @@ exports[`props should render hover 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -129,13 +126,12 @@ exports[`props should render isInteractive 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -171,13 +167,12 @@ exports[`props should render offset 1`] = `
   left: -2px;
   right: -2px;
   top: -2px;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
@@ -213,13 +208,12 @@ exports[`props should render value 1`] = `
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-0 {
-    transition-duration: 0ms;
+    -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+    transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
   }
 }
 
diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx
index d11f7e1eb71f67..0927effb3ae672 100644
--- a/packages/components/src/external-link/index.tsx
+++ b/packages/components/src/external-link/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -9,15 +9,12 @@ import type { ForwardedRef } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '../visually-hidden';
-import { StyledIcon } from './styles/external-link-styles';
 import type { ExternalLinkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnforwardedExternalLink(
 	props: Omit<
@@ -37,7 +34,7 @@ function UnforwardedExternalLink(
 			].filter( Boolean )
 		),
 	].join( ' ' );
-	const classes = classnames( 'components-external-link', className );
+	const classes = clsx( 'components-external-link', className );
 	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
 	to prevent them from being opened in the editor. */
@@ -66,17 +63,18 @@ function UnforwardedExternalLink(
 			rel={ optimizedRel }
 			ref={ ref }
 		>
-			{ children }
-			<VisuallyHidden as="span">
-				{
+			<span className="components-external-link__contents">
+				{ children }
+			</span>
+			<span
+				className="components-external-link__icon"
+				aria-label={
 					/* translators: accessibility text */
 					__( '(opens in a new tab)' )
 				}
-			</VisuallyHidden>
-			<StyledIcon
-				icon={ external }
-				className="components-external-link__icon"
-			/>
+			>
+				&#8599;
+			</span>
 		</a>
 		/* eslint-enable react/jsx-no-target-blank */
 	);
diff --git a/packages/components/src/external-link/stories/index.story.tsx b/packages/components/src/external-link/stories/index.story.tsx
new file mode 100644
index 00000000000000..eb70999413187f
--- /dev/null
+++ b/packages/components/src/external-link/stories/index.story.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ExternalLink from '..';
+
+const meta: Meta< typeof ExternalLink > = {
+	component: ExternalLink,
+	title: 'Components/Navigation/ExternalLink',
+	id: 'components-externallink',
+	argTypes: {
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ExternalLink > = ( { ...args } ) => {
+	return <ExternalLink { ...args } />;
+};
+
+export const Default: StoryFn< typeof ExternalLink > = Template.bind( {} );
+Default.args = {
+	children: 'WordPress',
+	href: 'https://wordpress.org',
+};
diff --git a/packages/components/src/external-link/stories/index.tsx b/packages/components/src/external-link/stories/index.tsx
deleted file mode 100644
index f782d962f3740f..00000000000000
--- a/packages/components/src/external-link/stories/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import ExternalLink from '..';
-
-const meta: ComponentMeta< typeof ExternalLink > = {
-	component: ExternalLink,
-	title: 'Components/ExternalLink',
-	argTypes: {
-		children: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
-	return <ExternalLink { ...args } />;
-};
-
-export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
-	{}
-);
-Default.args = {
-	children: 'WordPress',
-	href: 'https://wordpress.org',
-};
diff --git a/packages/components/src/external-link/style.scss b/packages/components/src/external-link/style.scss
new file mode 100644
index 00000000000000..6af3b0e991e710
--- /dev/null
+++ b/packages/components/src/external-link/style.scss
@@ -0,0 +1,12 @@
+.components-external-link {
+	text-decoration: none;
+}
+
+.components-external-link__contents {
+	text-decoration: underline;
+}
+
+.components-external-link__icon {
+	margin-left: 0.5ch;
+	font-weight: 400;
+}
diff --git a/packages/components/src/external-link/styles/external-link-styles.ts b/packages/components/src/external-link/styles/external-link-styles.ts
deleted file mode 100644
index 6b64fd61c8bad4..00000000000000
--- a/packages/components/src/external-link/styles/external-link-styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/icons';
-
-export const StyledIcon = styled( Icon )`
-	width: 1em;
-	height: 1em;
-	margin: 0;
-	vertical-align: middle;
-	fill: currentColor;
-`;
diff --git a/packages/components/src/external-link/test/index.tsx b/packages/components/src/external-link/test/index.tsx
index bb001961ae33e8..18fc0104270b0d 100644
--- a/packages/components/src/external-link/test/index.tsx
+++ b/packages/components/src/external-link/test/index.tsx
@@ -9,14 +9,9 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
 describe( 'ExternalLink', () => {
 	test( 'should call function passed in onClick handler when clicking the link', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const onClickMock = jest.fn();
 
 		render(
@@ -35,7 +30,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 
 		render(
 			<ExternalLink href="#test">I&apos;m an anchor link!</ExternalLink>
@@ -58,7 +53,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const onClickMock = jest.fn();
 
 		render(
@@ -79,7 +74,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 
 		render(
 			<ExternalLink href="https://wordpress.org">
diff --git a/packages/components/src/flex/flex-block/component.tsx b/packages/components/src/flex/flex-block/component.tsx
index f732bbe64896cf..c156b0af5a01f1 100644
--- a/packages/components/src/flex/flex-block/component.tsx
+++ b/packages/components/src/flex/flex-block/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';
diff --git a/packages/components/src/flex/flex-block/hook.ts b/packages/components/src/flex/flex-block/hook.ts
index b9026e64f7c46b..aa702e752a8121 100644
--- a/packages/components/src/flex/flex-block/hook.ts
+++ b/packages/components/src/flex/flex-block/hook.ts
@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useFlexItem } from '../flex-item';
 import type { FlexBlockProps } from '../types';
 
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
index 1ae3ddbc870f18..6c5a04b1bdeb40 100644
--- a/packages/components/src/flex/flex-item/README.md
+++ b/packages/components/src/flex/flex-item/README.md
@@ -16,7 +16,7 @@ The CSS display property of `FlexItem`.
 
 ### `isBlock`: `boolean`
 
-Determins if `FlexItem` should render as an adaptive full-width block.
+Determines if `FlexItem` should render as an adaptive full-width block.
 
 -   Required: No
 -   Default: `false`
diff --git a/packages/components/src/flex/flex-item/component.tsx b/packages/components/src/flex/flex-item/component.tsx
index e4073a4b400f40..c02d3dda7cb8f6 100644
--- a/packages/components/src/flex/flex-item/component.tsx
+++ b/packages/components/src/flex/flex-item/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
 import type { FlexItemProps } from '../types';
diff --git a/packages/components/src/flex/flex-item/hook.ts b/packages/components/src/flex/flex-item/hook.ts
index 6a7b259560d1f3..4de791905a4065 100644
--- a/packages/components/src/flex/flex-item/hook.ts
+++ b/packages/components/src/flex/flex-item/hook.ts
@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
diff --git a/packages/components/src/flex/flex/README.md b/packages/components/src/flex/flex/README.md
index b72a9b19424f77..ef36e2700ea304 100644
--- a/packages/components/src/flex/flex/README.md
+++ b/packages/components/src/flex/flex/README.md
@@ -53,14 +53,14 @@ Spacing in between each child can be adjusted by using `gap`. The value of `gap`
 -   Required: No
 -   Default: `2`
 
-##### `justify`: `CSSProperties['justifyContent']`
+### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 
 -   Required: No
 -   Default: `space-between`
 
-##### `wrap`: `boolean`
+### `wrap`: `boolean`
 
 Determines if children should wrap.
 
diff --git a/packages/components/src/flex/flex/component.tsx b/packages/components/src/flex/flex/component.tsx
index 4302e9b16c7ada..c1802c102cc764 100644
--- a/packages/components/src/flex/flex/component.tsx
+++ b/packages/components/src/flex/flex/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';
diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts
index 2708043f284143..f5648c187c7628 100644
--- a/packages/components/src/flex/flex/hook.ts
+++ b/packages/components/src/flex/flex/hook.ts
@@ -12,16 +12,17 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
-import { space } from '../../ui/utils/space';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
+import { useResponsiveValue } from '../../utils/use-responsive-value';
+import { space } from '../../utils/space';
 import * as styles from '../styles';
 import { useCx } from '../../utils';
 import type { FlexProps } from '../types';
 
 function useDeprecatedProps(
 	props: WordPressComponentProps< FlexProps, 'div' >
-): WordPressComponentProps< FlexProps, 'div' > {
+): Omit< typeof props, 'isReversed' > {
 	const { isReversed, ...otherProps } = props;
 
 	if ( typeof isReversed !== 'undefined' ) {
@@ -40,7 +41,7 @@ function useDeprecatedProps(
 
 export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 	const {
-		align = 'center',
+		align,
 		className,
 		direction: directionProp = 'row',
 		expanded = true,
@@ -62,7 +63,7 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 
 	const classes = useMemo( () => {
 		const base = css( {
-			alignItems: isColumn ? 'normal' : align,
+			alignItems: align ?? ( isColumn ? 'normal' : 'center' ),
 			flexDirection: direction,
 			flexWrap: wrap ? 'wrap' : undefined,
 			gap: space( gap ),
diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx
new file mode 100644
index 00000000000000..fac5b2e7c31e05
--- /dev/null
+++ b/packages/components/src/flex/stories/index.story.tsx
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex, FlexItem, FlexBlock } from '../';
+import { View } from '../../view';
+
+const meta: Meta< typeof Flex > = {
+	component: Flex,
+	title: 'Components/Flex',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { FlexBlock, FlexItem },
+	argTypes: {
+		align: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		children: { control: false },
+		gap: { control: { type: 'text' } },
+		justify: { control: { type: 'text' } },
+		// Disabled isReversed because it's deprecated.
+		isReversed: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const GrayBox = ( { children }: { children: string } ) => (
+	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
+);
+
+export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 2</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+Default.args = {};
+
+export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexBlock>
+				<GrayBox>Item 2</GrayBox>
+			</FlexBlock>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 4</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+ResponsiveDirection.args = {
+	direction: [ 'column', 'row' ],
+};
diff --git a/packages/components/src/flex/stories/index.tsx b/packages/components/src/flex/stories/index.tsx
deleted file mode 100644
index 0b74ac783a68eb..00000000000000
--- a/packages/components/src/flex/stories/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Flex, FlexItem, FlexBlock } from '../';
-import { View } from '../../view';
-
-const meta: ComponentMeta< typeof Flex > = {
-	component: Flex,
-	title: 'Components/Flex',
-	subcomponents: { FlexBlock, FlexItem },
-	argTypes: {
-		align: { control: { type: 'text' } },
-		as: { control: { type: 'text' } },
-		children: { control: { type: null } },
-		gap: { control: { type: 'text' } },
-		justify: { control: { type: 'text' } },
-		// Disabled isReversed because it's deprecated.
-		isReversed: {
-			table: {
-				disable: true,
-			},
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const GrayBox = ( { children }: { children: string } ) => (
-	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
-);
-
-export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
-	return (
-		<Flex { ...args }>
-			<FlexItem>
-				<GrayBox>Item 1</GrayBox>
-			</FlexItem>
-			<FlexItem>
-				<GrayBox>Item 2</GrayBox>
-			</FlexItem>
-			<FlexItem>
-				<GrayBox>Item 3</GrayBox>
-			</FlexItem>
-		</Flex>
-	);
-};
-Default.args = {};
-
-export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
-	...args
-} ) => {
-	return (
-		<Flex { ...args }>
-			<FlexItem>
-				<GrayBox>Item 1</GrayBox>
-			</FlexItem>
-			<FlexBlock>
-				<GrayBox>Item 2</GrayBox>
-			</FlexBlock>
-			<FlexItem>
-				<GrayBox>Item 3</GrayBox>
-			</FlexItem>
-			<FlexItem>
-				<GrayBox>Item 4</GrayBox>
-			</FlexItem>
-		</Flex>
-	);
-};
-ResponsiveDirection.args = {
-	direction: [ 'column', 'row' ],
-};
diff --git a/packages/components/src/flex/test/__snapshots__/index.tsx.snap b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
index 072b70ff9cb806..f963bf0fd7167d 100644
--- a/packages/components/src/flex/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
@@ -7,25 +7,25 @@ Snapshot Diff:
 
 @@ -1,22 +1,18 @@
   <div
-    class="components-flex css-j6raph-View-Flex-base-ItemsRow e19lxcc00"
+    class="components-flex css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
 -   data-testid="flex"
 +   data-testid="base-flex"
     data-wp-c16t="true"
     data-wp-component="Flex"
   >
     <div
-      class="components-flex-item css-mw3lhz-View-Item-sx-Base e19lxcc00"
+      class="components-flex-item css-eno349-PolymorphicDiv-Item-sx-Base e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     >
       Item
     </div>
 -   <div
--     class="css-1mm2cvy-View e19lxcc00"
+-     class="css-161q9d5-PolymorphicDiv e19lxcc00"
 -   />
 -   <div />
     <div
-      class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block e19lxcc00"
+      class="components-flex-item components-flex-block css-10m3u8l-PolymorphicDiv-Item-sx-Base-block e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     >
diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts
index e36a906392b8d9..cc5553a660a831 100644
--- a/packages/components/src/flex/types.ts
+++ b/packages/components/src/flex/types.ts
@@ -6,8 +6,8 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
-import type { SpaceInput } from '../ui/utils/space';
+import type { ResponsiveCSSValue } from '../utils/types';
+import type { SpaceInput } from '../utils/space';
 
 export type FlexDirection = ResponsiveCSSValue<
 	CSSProperties[ 'flexDirection' ]
diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index 4d8c1324328766..baa6601d74dbcf 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/packages/components/src/focal-point-picker/README.md
@@ -8,8 +8,8 @@ Focal Point Picker is a component which creates a UI for identifying the most im
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FocalPointPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ focalPoint, setFocalPoint ] = useState( {
@@ -28,6 +28,7 @@ const Example = () => {
 	return (
 		<>
 			<FocalPointPicker
+			  __nextHasNoMarginBottom
 				url={ url }
 				value={ focalPoint }
 				onDragStart={ setFocalPoint }
@@ -98,3 +99,19 @@ Callback which is called at the start of drag operations.
 -   Required: No
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
+
+### `__next40pxDefaultSize`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+### `__nextHasNoMarginBottom`
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+Start opting into the new margin-free styles that will become the default in a future version.
\ No newline at end of file
diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx
index 3e6d33011da730..1ecf846b10635e 100644
--- a/packages/components/src/focal-point-picker/controls.tsx
+++ b/packages/components/src/focal-point-picker/controls.tsx
@@ -37,7 +37,9 @@ export default function FocalPointPickerControls( {
 		value: Parameters< UnitControlOnChangeCallback >[ 0 ],
 		axis: FocalPointAxis
 	) => {
-		if ( value === undefined ) return;
+		if ( value === undefined ) {
+			return;
+		}
 
 		const num = parseInt( value, 10 );
 
@@ -51,9 +53,11 @@ export default function FocalPointPickerControls( {
 			className="focal-point-picker__controls"
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			hasHelpText={ hasHelpText }
+			gap={ 4 }
 		>
 			<FocalPointUnitControl
 				label={ __( 'Left' ) }
+				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>
@@ -66,6 +70,7 @@ export default function FocalPointPickerControls( {
 			/>
 			<FocalPointUnitControl
 				label={ __( 'Top' ) }
+				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>
@@ -83,6 +88,7 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
+			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }
diff --git a/packages/components/src/focal-point-picker/focal-point.tsx b/packages/components/src/focal-point-picker/focal-point.tsx
index 21a25f5a832f34..a03e41d4809cce 100644
--- a/packages/components/src/focal-point-picker/focal-point.tsx
+++ b/packages/components/src/focal-point-picker/focal-point.tsx
@@ -6,20 +6,21 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import type { FocalPointProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function FocalPoint( {
 	left = '50%',
 	top = '50%',
 	...props
 }: WordPressComponentProps< FocalPointProps, 'div' > ) {
-	const classes = classnames(
-		'components-focal-point-picker__icon_container'
-	);
-
 	const style = { left, top };
 
-	return <PointerCircle { ...props } className={ classes } style={ style } />;
+	return (
+		<PointerCircle
+			{ ...props }
+			className="components-focal-point-picker__icon_container"
+			style={ style }
+		/>
+	);
 }
diff --git a/packages/components/src/focal-point-picker/grid.tsx b/packages/components/src/focal-point-picker/grid.tsx
index 9b7ef9cff25f50..a52f5b11c1b2fd 100644
--- a/packages/components/src/focal-point-picker/grid.tsx
+++ b/packages/components/src/focal-point-picker/grid.tsx
@@ -7,7 +7,7 @@ import {
 	GridLineY,
 } from './styles/focal-point-picker-style';
 import type { FocalPointPickerGridProps } from './types';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 
 export default function FocalPointPickerGrid( {
 	bounds,
diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js
index 127f66ac65ab72..9a11673aa41bb0 100644
--- a/packages/components/src/focal-point-picker/index.native.js
+++ b/packages/components/src/focal-point-picker/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, PanResponder, View } from 'react-native';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -12,7 +12,6 @@ import {
 	setFocalPointPickerTooltipShown,
 } from '@wordpress/react-native-bridge';
 import { __ } from '@wordpress/i18n';
-import { Image, UnitControl } from '@wordpress/components';
 import { useRef, useState, useMemo, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -24,6 +23,8 @@ import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
 import { clamp } from '../utils/math';
+import Image from '../mobile/image';
+import UnitControl from '../unit-control';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;
@@ -164,7 +165,7 @@ function FocalPointPicker( props ) {
 		},
 	];
 	const FOCAL_POINT_SIZE = 50;
-	const focalPointStyles = [
+	const focalPointStyles = StyleSheet.flatten( [
 		styles.focalPoint,
 		{
 			height: FOCAL_POINT_SIZE,
@@ -172,7 +173,7 @@ function FocalPointPicker( props ) {
 			marginTop: -( FOCAL_POINT_SIZE / 2 ),
 			width: FOCAL_POINT_SIZE,
 		},
-	];
+	] );
 
 	const onTooltipPress = () => setTooltipVisible( false );
 	const onMediaLayout = ( event ) => {
@@ -243,9 +244,10 @@ function FocalPointPicker( props ) {
 									yOffset={ -( FOCAL_POINT_SIZE / 2 ) }
 								/>
 								<FocalPoint
-									height={ styles.focalPoint?.height }
+									height={ focalPointStyles.height }
 									style={ focalPointStyles }
-									width={ styles.focalPoint?.width }
+									testID="focal-point-picker-handle"
+									width={ focalPointStyles.width }
 								/>
 							</Animated.View>
 						) }
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index 1c9077483dfda3..cad14aff5b693f 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/packages/components/src/focal-point-picker/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ import {
 } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
 import { useUpdateEffect } from '../utils/hooks';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,
@@ -70,6 +70,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 	return (
  * 		<>
  * 			<FocalPointPicker
+ *        __nextHasNoMarginBottom
  * 				url={ url }
  * 				value={ focalPoint }
  * 				onDragStart={ setFocalPoint }
@@ -110,7 +111,9 @@ export function FocalPointPicker( {
 
 			// `value` can technically be undefined if getValueWithinDragArea() is
 			// called before dragAreaRef is set, but this shouldn't happen in reality.
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 
 			onDragStart?.( value, event );
 			setPoint( value );
@@ -119,7 +122,9 @@ export function FocalPointPicker( {
 			// Prevents text-selection when dragging.
 			event.preventDefault();
 			const value = getValueWithinDragArea( event );
-			if ( ! value ) return;
+			if ( ! value ) {
+				return;
+			}
 			onDrag?.( value, event );
 			setPoint( value );
 		},
@@ -135,7 +140,9 @@ export function FocalPointPicker( {
 	const dragAreaRef = useRef< HTMLDivElement >( null );
 	const [ bounds, setBounds ] = useState( INITIAL_BOUNDS );
 	const refUpdateBounds = useRef( () => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { clientWidth: width, clientHeight: height } =
 			dragAreaRef.current;
@@ -149,7 +156,9 @@ export function FocalPointPicker( {
 
 	useEffect( () => {
 		const updateBounds = refUpdateBounds.current;
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { defaultView } = dragAreaRef.current.ownerDocument;
 		defaultView?.addEventListener( 'resize', updateBounds );
@@ -170,7 +179,9 @@ export function FocalPointPicker( {
 		clientY: number;
 		shiftKey: boolean;
 	} ) => {
-		if ( ! dragAreaRef.current ) return;
+		if ( ! dragAreaRef.current ) {
+			return;
+		}
 
 		const { top, left } = dragAreaRef.current.getBoundingClientRect();
 		let nextX = ( clientX - left ) / bounds.width;
@@ -202,8 +213,9 @@ export function FocalPointPicker( {
 			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
 				code
 			)
-		)
+		) {
 			return;
+		}
 
 		event.preventDefault();
 		const value = { x, y };
@@ -216,14 +228,11 @@ export function FocalPointPicker( {
 	};
 
 	const focalPointPosition = {
-		left: x * bounds.width,
-		top: y * bounds.height,
+		left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
+		top: y !== undefined ? y * bounds.height : 0.5 * bounds.height,
 	};
 
-	const classes = classnames(
-		'components-focal-point-picker-control',
-		className
-	);
+	const classes = clsx( 'components-focal-point-picker-control', className );
 
 	const instanceId = useInstanceId( FocalPointPicker );
 	const id = `inspector-focal-point-picker-control-${ instanceId }`;
@@ -241,6 +250,7 @@ export function FocalPointPicker( {
 		<BaseControl
 			{ ...restProps }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="FocalPointPicker"
 			label={ label }
 			id={ id }
 			help={ help }
@@ -252,7 +262,9 @@ export function FocalPointPicker( {
 					onKeyDown={ arrowKeyStep }
 					onMouseDown={ startDrag }
 					onBlur={ () => {
-						if ( isDragging ) endDrag();
+						if ( isDragging ) {
+							endDrag();
+						}
 					} }
 					ref={ dragAreaRef }
 					role="button"
diff --git a/packages/components/src/focal-point-picker/stories/index.story.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..42fd64b8e4d855
--- /dev/null
+++ b/packages/components/src/focal-point-picker/stories/index.story.tsx
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import FocalPointPicker from '..';
+
+const meta: Meta< typeof FocalPointPicker > = {
+	title: 'Components/FocalPointPicker',
+	component: FocalPointPicker,
+	argTypes: {
+		help: { control: 'text' },
+		label: { control: 'text' },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof FocalPointPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ focalPoint, setFocalPoint ] = useState( {
+		x: 0.5,
+		y: 0.5,
+	} );
+
+	return (
+		<FocalPointPicker
+			{ ...props }
+			value={ focalPoint }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setFocalPoint( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+};
+
+export const Image = Template.bind( {} );
+Image.args = {
+	...Default.args,
+	url: 'https://i0.wp.com/themes.svn.wordpress.org/twentytwenty/1.3/screenshot.png?w=572&strip=al',
+};
+
+export const Video = Template.bind( {} );
+Video.args = {
+	...Default.args,
+	url: 'data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAACAG1wNDJpc28yYXZjMW1wNDEAAAScbW9vdgAAAGxtdmhkAAAAAN7yaaTe8mmkAAAD6AAAAzAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAA7l0cmFrAAAAXHRraGQAAAAD3vJppN7yaaQAAAABAAAAAAAAAzAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAUAAAADwAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAAMwAAAXcAABAAAAAAMxbWRpYQAAACBtZGhkAAAAAN7yaaTe8mmkAAFfkAABHqFVxAAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAAC3G1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAApxzdGJsAAAA0HN0c2QAAAAAAAAAAQAAAMBhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAUAA8ABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAM2F2Y0MBTUAo/+EAG2dNQCjsoKD9gLUGAQalAAADAAEAAr8gDxgxlgEABWjq4TLIAAAAE2NvbHJuY2x4AAYAAQAGAAAAABBwYXNwAAAAAQAAAAEAAAAUYnRydAAAAAAAApRuAAKUbgAAABhzdHRzAAAAAAAAAAEAAAAYAAALuAAAABRzdHNzAAAAAAAAAAEAAAABAAAAJHNkdHAAAAAAIBAQGBgQEBgYEBAYGBAQGBgQEBgYEBAYAAAA0GN0dHMAAAAAAAAAGAAAAAEAABdwAAAAAQAAOpgAAAABAAAXcAAAAAEAAAAAAAAAAQAAC7gAAAABAAA6mAAAAAEAABdwAAAAAQAAAAAAAAABAAALuAAAAAEAADqYAAAAAQAAF3AAAAABAAAAAAAAAAEAAAu4AAAAAQAAOpgAAAABAAAXcAAAAAEAAAAAAAAAAQAAC7gAAAABAAA6mAAAAAEAABdwAAAAAQAAAAAAAAABAAALuAAAAAEAABdwAAAAAQAAKIkAAAABAAALuAAAABxzdHNjAAAAAAAAAAEAAAABAAAAGAAAAAEAAAB0c3RzegAAAAAAAAAAAAAAGAAADx0AAAUwAAADvQAAADgAAAA3AAAEuQAAA3IAAAApAAAAPAAABZ8AAANFAAAANAAAADoAAATdAAAE3gAAAC8AAAA2AAAEXgAAA1sAAAAlAAAANQAABU0AAAAfAAAAEQAAABRzdGNvAAAAAAAAAAEAAATMAAAAb3VkdGEAAABnbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAA6aWxzdAAAADKpdG9vAAAAKmRhdGEAAAABAAAAAEhhbmRCcmFrZSAxLjUuMSAyMDIyMDExMDAwAAAACGZyZWUAAEITbWRhdAAAAvQGBf//8NxF6b3m2Ui3lizYINkj7u94MjY0IC0gY29yZSAxNjQgcjMwNjUgYWUwM2Q5MiAtIEguMjY0L01QRUctNCBBVkMgY29kZWMgLSBDb3B5bGVmdCAyMDAzLTIwMjEgLSBodHRwOi8vd3d3LnZpZGVvbGFuLm9yZy94MjY0Lmh0bWwgLSBvcHRpb25zOiBjYWJhYz0xIHJlZj0yIGRlYmxvY2s9MTowOjAgYW5hbHlzZT0weDE6MHgxMTEgbWU9aGV4IHN1Ym1lPTYgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTAgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02IGxvb2thaGVhZF90aHJlYWRzPTEgc2xpY2VkX3RocmVhZHM9MCBucj0wIGRlY2ltYXRlPTEgaW50ZXJsYWNlZD0wIGJsdXJheV9jb21wYXQ9MCBjb25zdHJhaW5lZF9pbnRyYT0wIGJmcmFtZXM9MyBiX3B5cmFtaWQ9MiBiX2FkYXB0PTEgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0xIGtleWludD0zMDAga2V5aW50X21pbj0zMCBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmNfbG9va2FoZWFkPTMwIHJjPWNyZiBtYnRyZWU9MSBjcmY9MjIuMCBxY29tcD0wLjYwIHFwbWluPTAgcXBtYXg9NjkgcXBzdGVwPTQgdmJ2X21heHJhdGU9MjAwMDAgdmJ2X2J1ZnNpemU9MjUwMDAgY3JmX21heD0wLjAgbmFsX2hyZD1ub25lIGZpbGxlcj0wIGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAwhZYiEAf/zA2GNkKfOFSsuTVloQEaXdzoHD7Vtw/suEginCwuvVdLAAIC4a8RRwZWlYBuDUCSPfB3B5lW9X50lraB4kEgmym6mAAImPPAiIv5IzQUREXNTlXLGDbZ6pr7DtSUl9HZ8/7xMuDpvacJMwO2ZrQABPwobl+UNw97XDlJhhlm1a9jM3/P/K1jvpDw63Bu9E5f4cavT3elDFhSIT6FQ+iTN+13wY9LeL+T20YNckYyNifbav1oJZN6ec1X+ai3nodpai1j2QnWNfq3lO8tGXVbG1DPN4S7Xm8qs0ba7GbbB3eagRurMx0TWeIRfxVmKgXizipPdX4zTTlG4C0U0+eeEcjWzes5UzxKEhLcaJRJ6P5LU4p24Puq9xTLEB1EjbhpdbrclA2Z8rSfiQxXPW+9hvNkCWMDRvjKpUVzTQP+HgnD3Th39tikUJZJYer5OCbzdwPK7Q/f47QynLISBoW5VZXmWwIOZG4T7KAYVOKrQuU0wW3bhUY4SPvo979r3FTfcf4MxGr2LR5+2BDLaI7EntpwCI1zj9Lk5WFGY+Rlb++hMvZ4DSJKzv6fE0ROmmXsJ0U1LPjkHe7bastf5R3a+x2QHuUSIxWmO7wnVWVn6mkvjU6BQUelrRTDKrwOGPrn0lNrZCLZE1nQXB5TxM82EX+hv1YG3eS5tSoQpWaLkvvnoMBxGt1bBo42UKVKmpzSfPfTapexYbjW0pQB+BfazvlIsbkWoUgdIPsmpq7+ca7FT+iIeD+TNU9TvEmvHyV1MKYax64hPCtNO34u5vwjlu5P2O2d0nL5mg++r4+Gl9ybNKGPWGXK/L5HjojDKSZBdCcv8rejatxmJxlUI9JdvZy0kAjLislEn8mWpf1I0ZXkeb+HuOWFMjYcJy1WwwEIN04jzhejmHpqdzduXUqMyzSKrbIX5zc0EcicHQpoGg0Tlf5yOfTKX3sqZgXsLUobfqUz8Xj5HdyWq2iW3MLytOMm/8Rbyb+RaVyWZQL6yBQcJNRFIvdkTT7K1N6amktfFiPJKaKpBaE07Y5sytd2C3KSZnvlrr2AZ2s/6u2HsMCRRr+qDzywVpCkXW3EWrdKb+3Sq7yh+lopglZGRb+BKkSWihgi00ZRL+F3mwUNV5VPibODPvr//skhJk7LLXI7r8/JEz4lnQqpwZJu8CpeJzFX4dlytL8bpoRhilI9Nwu3fkyJGu4d/esGQfXvg+OLzf63xMyu6HMwey7Z9aA21FHYFH+3rIum72Mu22IXYFSXVq1eN0yTUsMT3/lnrTuWt8zh9INPUDUgUi/uPuvnhjDr/MAO5Tb7h3nsfQy6WDWhHcRZBQQkLd7M1tZdEeWw+jz1ckNjcnCe5o3o6Ucd+Tb9uZKyvlzyzVkx+PZRFCAdQrKLXv2OGHCUR9eLFWNHogm2XZU/39A462LM0PkeM6Wn2Aurjpoxq9V4uzC7NW0P0f+LrypIunB8Cy8VYYy0i4eLJhjtGqXHLazJh6BxDRysBIxpqDp16Hm+sT8+LnPrH0yAl2TXf1KmkLnP/+2193RxJJ9roy85d96K9RZTG76ZxUFPGgmGILrhrY4maFWhGq9guBeokoIkUAUn9yhzTHr88D5MSvGlesrpy7CJI1vKwJPFX56c25ScAdNOXEB0aASly1xpzslZ65oQJrP5lh1OSgAzMaCzrWleHUOxmpcwMeFYys3lEgOtwQgBmoKvGQ6ld0BLI5JJPQrZTAs6M6cU9WxiOHiqSraNLEooqeepDNmg9AjKVKCUTh1pc26JOdg7YhrKqdc4jyq0YqUrguZkTo7pt2mHdWExgEfHshuEUvL2J0hW6y4wC1tfEdJoKIPnySv6peQMYGAD50HGsg6lix+bfYb+wYj1RQrDZyPMrib47nNjVSQq7feOrqdY5PX1ey7AzW0wFOg1ksN9uRszBUb1JELEEFBqTIDQz3DH0JALQ4WhunD7cpmlPuoaWLNwVztHeWLerXLE74iuziBx/SMZgzQOFMJ/XFrjWw8rmaJSIiA9uRyhaW9YDJ/smWG8Uf+7cRtpTu6ao/3Lh2sQQdWzQIRLONgxLzDlVyOavM/kDa5da0hknWv3PlLILv7vGQ+Zs4UktjycwP6duVkN/u1KQTf8X0HXCAPvq07AswtBQyNRVuWGdvKv9qVwzF0C8QueA69lL9j/dn5vVYW+qbUyF9z/ilUPHVl9LzV+Y4n+QGnxyVMFvOit87NtZphn+L4ZYLMztPRYIZHWmJHx59Ek8cThU/RyDEU2ZQ9GuXH/tAA0b0CqP0Opvb3iqgzeNDcvz7C6W4wUgm2G3vM0KdmNgADxF4iTE0cJswo2exOMt/uRYFORat+ffXU+4pXpPr0cZeBO5qHqk/w+21EctDB0Ky9PZSyT2L/CdLQC+6GIbRo871nJkDZId5POS8t8qf25O3DeUze17pUYvtK1rcYNGGv9kr5Noh/cvVxlZfZk+hAJZEsJqN+k6xG2469xaQq8wEKL6yev5Eiq+DzSDyO3xk9IL4UDosFTqgv+nLqSEQZf42/1vlI6r7PLBWiw7Grg2ITSfVRZT9OhEQCEEIrfA0BXFIjtJ9e9pDZZhpF6qIhJ+EZtB2UOCWU4zxwt0pDLkX8+qEaefg0s8XkxDrCbUInNY5+MS97YMrbAZDo11HpMbD6spXTj/sGEJEVvBhVJYZxT34+E8RzPjbn5PgSrUpM1lQZ+hbeJ4PV+kiDwC60BVriYI4xyd/DlHSe0CwGooOSUYzLb2x6ScpvbuGmkZ+FS48S/RL6BdZcC+tw9YJuj3k+ZRzQEygvLJGn/Ff3g35Mu5OniFh8iBs7klOQBR+DcH5LndXN+Mw4OcrCyfC3qOUXyUEB4KAMAF6x48I4Q3G2+/asthOmO/Lfue5ELh8fPTOeWGcNEEHPeQbacOs7YSHiT8eBfzXxUdYHjI5/RMqG7UJaIVf6C+DHGX1XF7AUtj4MaTJDu+AN20uk9Yokv8eeI4sc9v/+dc0z3GOsyu34kL9qFhGzPhC9a3Eki2vdkvrPNhgUsZmvjbhGGXHWFhPcywW+dUfpTJ8flX7/pnDj8t/1z4/VjkTqN13n+OYmQXKw2wfiDjT3WxFjNvkMywveho0ya3lNGmZ/7XQ4j2wCM53wBd2Vd4aLeXHhulxu1+aCxhe0/0VfjuGRERmY78odPjleOb03ulA+BzFmPC0D/OT91+LDXwicxGW4FYNpdddyyG+Jb250hXUK7mb/kpnLfQLcQ1E0lB/Nh7croXi6FF8uBMlwigktv6jntMUVx0aU7cpR1wIXDR17VCRiuejAbn8v4rVvJvyrI6xLUetS0vdq5L5FVtxcrb41eisp1gTXjO8u9QAXVPjS8r9cNE5yIHvCM6AjWLy5oBTGkoQ/BrzuTkdM8y8GZq8Q1Nd7wBbj407htDYJknbg32SWpCnZNkpNXVL2Nt4fU+kXZEqtJJa6zJTLk+VhXWT+s8oW4YfUESvkoB5mUaU18P7xPA4V5P1V3na4yyXzrLdWAHcaZBQnddBFad2AYUcoTEeYYckXoc9R+bCRQSo5rSNtVUj2jUnT/2YxLKRo3wSiAZGfDnhE0sZ2UaE2+W+LdifOHvwJ0j43ZdeSdtG6aod16qez0JLDvWR2hLjukO3yLRhr4uFN8ebV6vnZztxLCZVcPmax7UfjQ67AWxjcFlyMB/Rm800Oe++ft2Gxngrejdnt0lY6/MpSEIOl24LUp8YXgdR0tsNo0TqBQII0KiU6k8UQCat4MLmbGWKdLzMtZXfzS59+DuVImjG3UGOSrEu7VCPjAMIe3Z+WDNz5nIEaxwQrMtGhqv9oqhNOCG751fxfXb8zNKOC5r96Ti8zqm5P7O/G58xp7F+bbECR+Lf/IUXlxTdt6dyVsP8L9qfonB/9HuWIN5TInSOYkVF3CnRDe92FJTx7URcvk7ABg/akjc2++SqNFEW5tH1igCo4JWWqItaishaksBJnVHYO7xSWre29ik20xixB/j9IQBiYEJnn5UbtZAzUOdCLsbdjH1+aSuRIofXvLynenW4vT4/PpW+jJidXV1fX48ZklOyXf8FXn5UImACwO4rEtlMUZq9eJdO0VAt2w10t/+7PDtAO2wInrOo4V18nju21flg7HyhtrBAAAFLEGaJGxG//yk5V/bYk6AL69BRgDUlzKmvMlnKdcvSzcDMpFz33VkzeYT/fXe72/sEqXtalkzOHcwbKeaUFZK+YZJr4dCu/+aXe1udMCC4PwXR+kHnTiy1yoQ+xKIMjp/3uOW+M9hVvZPaOLpBEMM7WaqU9nGX4hJzj0EKQ2eQdjElT9GIqQDmoXuZ8jssWV+Ao/LqUYAK8ogdNsSMBSpxfEIY64qDQpN/1QnrST4ay5jwsBFt0PB7H6j/ep0pZlZB93ML9g4Oie/bv+cewzgXSL3iKsXDgY8Qc28yicYWQtI9ykEJgb+/Clj+3R13r2jNZtdAqUDrhn4P2qe1oHVddY2vdEKoukaDI1rza7Dh6efOEtd+FPLm49xxlf/uU3wqiN1//r00ibfbGE5dltNN7pdmaxEtpyaTdCCxbJ6u270FuCV5fnsYALRBgq9lLo1L4AwEQHg1uzdZgcIFUyw5pNvFtkfHO2cTagF/RrNYTXr8yobWkmprqgydk6Jn28cT8R6E5JQh8Q8VMCPJt91GBgoYk6DaTKVQ+GR8AQiofW6w2qgI6A69Fny3397qCEg9iEZpDO2N5BpALpZZmzAyaONjw/3Sz07iltmDs45X52rSlQXgoSFKkPg8vAzUgcJRmCDnK4tvr5yv2UXFRflRtnJeUasWD9P9UP7dEujcD237dOA9DDH2ClH2wyT5WmhZRNYbpEoZzHUf5SYG5bGZTBFdXoHCWZkqjMg8bOy7D8EZO+yRNXY9ZuadAQbFCR8uKfmVyAqrdUiATepgc/a58BCpkcQczP8nqIbjS5RfP4/hVWY8RAuuNOvtMmfg3o1et1cCT+pYI17EHgXr59vNEVIE78s6Jwi3uUjPHrnCvbPqrC2GBtyc/HG/epri8XwcPf1cDY3jcA6VwkIx6o/ZmEQ/mAlRIO9ScmJuOX/n6Z6yp97DFOcrLFTHgoL2eMP+V/GOU3TIuyzwj9/zHqzC+S42Tgnm1kfzAeKwuPOgpKIkOS9/SYxsTVHYqmKGkGBZi77VKp7BMJmIIOQe4fVYEOZ5YYAjR+QKduA+ReJMHhh7lDdpcRkiSIOJaYhnWQjwz4r+Mn8qQ2ZlA6B2k9OWV5A6Pzy8cKFWYZvMdWtCuFsFkAlBBY/hSVDlBvBabEJvqxOuls3KXxDSszejfPJOMkYIDbKmK74SmNMbFGYE6AHx8EWP1rTofvGf59sGbYZjoye+kyDH4q2lFuKwzdqX3BvADvwS/JqNiax4McmKbISxuQJacCRkD4Cqoi4FnWFKqA3xgbtwQSrlTV7Hw1beEvfU5x6Bt9e1LIn6DvtIBjwkM8v2hQjq6cWgVThoxwED4TviYxSmNLM9sNrBIQGzR7vzgBlRg+g6cT2fChebuOUfIQOvOW5jwHJWpZN5ddtgvsMmj7ZYUrITDCwY1CgCS8KijSN/Q4aUkGED3bgLe7GKFq/c8oPAgps3jwSuiRWlV7MwXAgpMfowGKM8n67EZMpylSYuApCH2xoOdHePAjYFHHM9hvTMV0Jv+5Q31C1h/UuQyXU1MyduXg9Mlx2uOpBVzP1Qc/hmlsZoHMGysUZ5feYp846DLu/X5xW+9jPexhJ9hLwiVWNHNFfmp5/kaKE7WC+5E9/6OAz/DuNLPOuyvBwJ9JySD8ov9JsK+maBiT7IzJrsaEKzzYS7erYult/p/SyasHUTbJ4BgQmH64Qb2Ydco02tZzGSrAAkZbvGasnvYee+5NkFbnlB1C5xHU7LcQ6t7IRKj4NVIAAAAO5QZ5CeL9DUtN8A/bTgCkRRrBvGKTL6Qq/3/0bv5L58FnEKi7CJwY7YYYePSK08qJjZtspBBfw3JQsZy8UYsAV7u+GxHzRLbeZNw13bJAT7nVcR83GmWeCzDwUEk9elfT45KJyhT/b0x27CWARXNNIcYUzEU2F9U5GsiiQ4clH1kFGf5dI7JVzQaZk5jhoTZY3LK3DOeKtm7Hh/BaHANbEz8ZdztVOrVDwB7QwsmkMoEUIKdX+wDzZWK6JKdEQynr1Rqc+qxGg/PaN5luC9yjEjCMzsYFhEahpiAADL67e6F0WBZSmvI3XZC/nF7iJj5G5ocWFY06hI+W4wQ89KkpOGcUASWRU2mGvbHq12VA+xAF3vVecHZVXmw/Qbu+J+uG1DXY7ktD8hKK1NQ9rShO4r+wlALcacAk2mPoC9KBTKYp31HnpJzJEQlwsBe0cFxBBnEPiW5HOky4eTdy6PruUkSsu3GExXxIf7frY/VqL5pa7RVXry4pdJNtirHiWCC+PdZiTvlX1m/aT2nyRHYEDKAbph896AsYOn+YnHVeENt580uPY91s0uM3vrB74BAq+PtChvY5/oCXngPquoWZ6SkTp3DHIZG+UHI3kRd5FZxg5cKzNuSLACxwL24xPMh9XzJH2z1Et6VzrfZrXQi1conE/TQlhjSd29S01Wc6EUxLXI6IkZToc5yVqNq5yM0DiXt9Os7/dXB/yrH/7+PWjgABHPnEZCJbQCeOjBXIX8egoyaSCKx2Q3AxEzDPsiGN5CpE3mQ+OKHmqpfnzROARN5Yt3LWNwLh+nlXUqKPWTGvfCWxMBzliCdowzMHziIhra4IeDF6cYjId+4/bh+M7aPWauIuKv42h58mkgTeOVYNlx8t2NJO2/1+9D7RMPsfkC4IBz7ZNdI7wws8T4+i8koCAFEukHGCOUeFl0bogUH1cRwuD34m3w4fdawaJU62HHYAbqmsln+7qoyFm/hNlmyVCP90iAhHsjfTMBPJVCcE+mwP7csDuuROcalLfAaMgFywed7ViQpJVfKJJv6PyXzCgWBt6GLHZJ9olmCzS7zykg/5Cueol7nHk0C1u3MwvPv1F6u2RzGlh5WSMATXnkILY+BeLcXTtK6g66EtLk6ZQeDX5PTpm7iMkcfmLN0Twjbn+cXouJ4Mfg4fgisobiGHMWQjY7KGUYMwCi7vmkVStoFQtSDaQqgEYP4A0Aguxk6D+OoRxNFI63oRXeZaTEFuH5HrKdeqW9UEd7TzFMhfudhMM34rXb98AAAA0AZ5hdH8jvpdGROI7bSMKAAADACMj2cV31f7qpkPemBOJNdf3vf36M6gN3zC4osWpqtDXeQAAADMBnmNH/0N1x6D8rbCTqAEImIXY/C6nT/gzHYvs+x7Ifmu0wbVuh7CyJslawMgBgP59Mb8AAAS1QZpoNKTBG//5vW8AXlZAzzbvQt6LccWVmbfXW5TOMS+Sa75eLgodS2aJ2PdBLFmx+Nl+iAxUrh+aH82vePF2kbxo3nx865/9LDGPSQab7QKOjp0GwGc6cPYijS6t8zNsZszcyLxZQU0HHGl2AWf1lX6aL2R6nsSFqa2Bac7e9NGJllBJjMr5mTh7kxVgXVaWf21lMkImZiY+JWbblMlqOMviNnZaO5hjOsFRAHrGqLhpdBz1JeXt6V9QFH0M/7O1o3h60TuF8Sr3R9ru7CZzQeQv/6qVoZ6uGAVPsm13kEbOlAvTjZpkYLL9krnU9a618CVK7xOUjEcQUeGxPEIT28zF9X1ewY5S+FpYHpUE03tbv9/G9Sziccrpj/YpskkdXC3OvrqfNTkAOH/Oe4YlcmOMQAw/v4u7jyIPDgSIn3dvl01QmBrm6VjGIi26w8zlaBCMl+DV4QpuPT0Gyhc3y0YZPBjIl1nP3Odik8EaE1rE5SMbTjAUYgVQa3+TF6yajDxqGNiWM9oo9HXh7x0N91HPXB6TzQak1rvRlWbYBT5S8HltVYdKqEUqrtwV5SgXfMIbJUKdAKLHvT4m4HdqWM92104+vFIIPtWT4COFVF5U8rtpJa8Huh0/HGqzvUTrRH6Q7szTn7b4vmMPDNRTNtyh+NUTGGBpE88FKCj1EWU5gSDHq4SvUrnk/hq7zQwJc3gSuyJADFgrPQ93e300gpzKotyofAuqXm38uY36/9Db2KRcC7U0TRdaVgi5rwdNfOlTzI6Kf/xiMs5rPOjtSS62OtnwvRAQtdIHQc/DPF9obIF6eIidsY0OUkp2gNjzIv06P3Au5C+9VlnEpwTeDlS1wywNSNR613xqSxUi45cFRB/MXk8We8QjIrhrrhKrIQQrMidMrN621RaZHielvsE5MGJIbSmpCwhg/mTyDdbhiXQahZbhAicynmqK66U0pyCcfy1ZxNYRErWt/R2KJWwnpxqenjYbbxrjyn3z3gg5ep/F7pR2b6X0u8JJRJohwLEZgs1Hd5htI3jjThXgLzesg5c1yDlo0nF6Nv0aBESNQ1k8GH3HFsEQ4av90nOpFyqyV0USDP1vSNagRzH4hSdCq9umKD8pITZtqByw2MYEJY5OKnzDd8uC/fe+jhhwGwDIDhCLkGSlalM+t5Wz26M9C+3Iu8D+Wjo/VIVNtOcnW0MVfoiCBV+FEwYueusOYDi8ecHp3xaN1FfFVeo/XKpUQmDcUadEiV0YUAh8Tr9hmpRWkGY7YjkT73zNMg+PkIzrFWFuIX5Ijs/4pzz4NbYKGEfsnbIDrUK6cOMonm/F6OMILnIX27jsarrFj+1DCk2ct88mqeBUhHAJy5XNrlXi3uOFCqUFnfV/UQjRICOgsWJgxqHGnCDQFpLtZRD5ZAdeWB4bSFTRH7pWhZAQpeRkzhLsWpPIoXHd8n1w7JLIssRnKaOA3vJn3cib8PNGUM+Id8foqBjALDYGlDVVD0/gwrk3Km3W0mQoCPqxNVCwaXnf1dOoQHFE8zQcXE+UcLGcm1zND/IsWMGI9TTBI6RzGEsIqzewpdrBM6lZWy8G7rKDQJe5m1+avNqi/2Ze10sfwcEAAANuQZ6GRREt/4drPKDmjD9SiP4GCKASnBhaH/4fPqahr+tNx8A3QJr6gDLqNCrU2q7Xzk0n6Le8xKgjYPjFtPACl9K7Ck9S3sqDyq0e16eLDlMIA3/YJxjCa8NlzJH5EE41PD9bW9VuA+iSHP7X44imUUfrm+K5wdCD5/qf07n7OnFgycrEiH0iCFv8314/5VRGLxoThSbAIV+ROFRdqBmO5kTdVbGCz7AtagWcuKpJYX1ZMDg+5FA2L06zSb8aLMiVmJTan5JssqxZHhqimr8xInMPwQkLErnNFHmMihKJy13HHS+6P4bdfQb7NWVUmEDEjC+lv7lpCVQ9TKG11yy+7eImtHTMKUCeDCvdpHhR/9ByAFWWbLqGhL53SbIvF9uITp5eoeAunyEIPaiE+f8nelSJzWSHUMiJ/nlsT11A7uTV2AtGbUZXyLhoUOo+beBYkqY/4XOVTXlatxjT8nVeZqwgDmy6H8iHeWctIeHPwthDz0Y8lOeDLqLrm/WM3NzbcaLw+SdOvMqzAbIBiRNG/OSqGnSzH4ymks6B4Ox7+RQTMJF+YUrz92144wveNJ+m7DDJcA2Ef+fL5eoK9Grdax5Uu+A3AccruVvICHB6b1jDAqDaU13yeoJ5GMeZpus6/RSeZJSjilUPykAVMvf1pwuixlZmts7+tBRYu5me23mvLPIVbLkX99mon1xnSLV2xE7pTubTikkMPzHHvD70vgR6KpTvu2J8xOZYstmTXHZC4v5LKgPu8mxqNfPSI0Crqulu9YFUNoS4Oqz8Gf2K/Nim8Bmqy4bpwOuFAfztRd++98f5zsbOA2liloQ7QvjwnG0Ugg+WbcwaCNF1EV/qjx//8IkvCvMy8irP0ck7C+mOsijbtTiU240X6Wvf4z3td34UrKx//9D072H+7vdTVn2GTupbSrFbD/OnZm9a2t+ED814PoiiIkZGzsn7rn7viElX01XaXEbVeQQ9W55VCAjvD6MVJ93AhFq5QErrXshPA8JvNekBNrXCnDXPrV+vmwSo5nMsssCSDA1rpUltz3yb1SmOipuSenvPxKoGII4hOV5mUva/kgyLYkfKKt1m+86Av7Vd0C4Kt2QVnHuXvpDefcUCI94gFT0MTxcdcLdo9n/l0wC8mHVI+8uz27Yxw9E5LrFqtWvEWZwvqVEAAAAlAZ6ldH9bMAXa2Fzy2uy5AAADAAAKZqjGMW5qDruI3pQ4rL2czQAAADgBnqdH/4LjU0waEknlET3d4qfUTHiOfuB/zYJFbl0E0ddeRHiNBBVsCJI+qipEq4wifvaehZYh7gAABZtBmqw0pMEX//lvAo5ICKiMCnWCbjZk0ARFeHd/8wpo4T/Er/7PtbIWW9SKqpretF9SLZao2mKHZJl6CSw0K+jJxtnXwZUt5/OyqqiR095Ajt2YqgJoX2pt3S5K2R1/lCurb8Dsd7N06ZeyfMh9lbsBSYym6srOBxAeVcpScHXHW/LWo6nYJg48sNcSIL3y2fcm25IEh3Nh8AJxLvt8FQGR3R2+dRMT8AJVNGyazFibo+vxZdMe8sSsrnxen2jr2CRdcxjmYuEt2gjiSX5VEZ5f6K5P7zlwTzYrkV1nKw7QPyVrwnupQISZcW+KgDk7lFhi1YszBsmC37X4lDWEXTwRugEAH+HpGWeW30P9VLLfLK2ogQ9WN0PagtN0sdh70Bz4zcnEU74hTKoe9bwcW3JbTTOnLA4xUcYWtbbGTwmYzFwiksGOgqFsKM0vebaCAJEgktRJyYxiFMgIUuAsFTcdy8V/aB9qw1yBM8t8UxTuaini6qf4oye30SseUwDlQFd2IwYMTbVF1lNZyWyWcnm4c9oHzta+OPcPBFN4zbG6aPdoYJFpguPf/dBAo9E8sIdfitBGHgN3u8TVqjj52XkyfvWUF2LoYifD+e2Pi7PH6QJ0vgaBBj0ErIMoNNyexJV4QPcBO/V7BU1O4a8b1NU/Uq5hZqkqbRtt/hmxE9/8tnLzffPgZ46q31Ln76tvmVdTCB8zG0NMRkXYlBHC9Jy7H9YA777reCZX/gSuHrDVU4jyAD3kvVITXa2Wks5O0qst/9qfjt1KkhwaCfvF1Ei7YQMvvJ8vnTt+Bhbfv5H29dReRd+J/RrIyMu8bKRUHe9GKoyqgpv+v1LYQn4enbuu0xpl8Da+d7LFi4J3NwiovnrgWKYzR7Pfy1LX/QiOpw9KSJNN/IuqWH1HG4A9jVRxIoMl0gk2v2cT6c4PxCTrbTNVrH9uMlwSc6tqes0c9YArHWeMloFSQV9tEHKYniTHq+3+lGQ7pTPpeBPicPJSHnx4s70sKZaKr5Tt2pwDUZvJWF4PADt5a5HLOluWKbi2k5t8IP5wG3FnUYc2LVCxKwQ4dMIIAH0RSbXlYfxI9ke13VBniXSuTsHgW/S2LRnYXAt9iFD9qufwEuJ0J8p9lcAIMLjTo8z5ezfpbguHut3xzaDwqFaHo5SZSzUpJ4lPDjsEGDUsxoUz15VdSh1nDvzInfZThX8cK19M0ASbSv/GrdFpuANrAT6SXBGeRJKuq+fBOJOr2tILJYACkvmPqkFHCgsNg0gSBqoy7e+olW28U0DSKzjmMkSA/pt3Ozk8dfRnNCYT14fpsw0uNhmSgyV6zWOVtueuVm+viPP/GkwE1eOHrQXHLnXVCEH8Q60jr04JfHpWwM8/RDK4yHFhzOIDvtUbX9KHowRkUdgvu3sJv3GwHRE622afLBtxvnJ51Z8aeKnxBqN0Ay4G9d/HzcmBLuH6c1ncaWVHgUbamtnJFpk9XMalXptaLndc4A19rXA3fpcRAkL7N3W2PWOU6igyHfwni3f4ZxiAOWcCGid3y1rRt2Fpt8/WTF6psz8YU+W3mMiTg8AzAn+e6YXwn5tZf3OFm0UtB4TEs5Z1JEjN5OzowLKmotQAIMvMDffXysNY5i7XLyB4vbJ0ymO/XAeApKkW4t5meC1NOMhy6TQAYJPnxA2wjevhX3V3nPItRxKXw/8qUb1VLG8Tv/yNDCfBVLmQIZ8E7ss8iM70dr+XRE9GS6hxfgX1Wrg4w1XZub7ZqLjVudc4nQ8DyF8+Eu+mGfnlmGK+nYfMu4BfIE+FfHdnznEL+nt5KX86bERWzoUmxijG/Bzw+Y8vtCNjzViqb/miI2Ov3d2meHwNLWpyCIN5R4llgC9QNae5xzPfPWseull987QbmrTdbpPNKzeF2OL7uGcv7noMAAADQUGeykUVLf+n72rcHlCgR7xSO5SNlWHKJaNZ2uvKGimyQk0aChNS9SgDeHNoBlRzm0WV2ain9iTZcN4RhlOPtuohVbV3n+m/PzBbkuwXx3HuirzyqjmtZPzqMpTmZ0nYVxvl/Z0lstl9p2+QSDfE6tBYACoHZbHNVcHgwPfIArlPUmlZB1etVVXpgsoAPleGxqdIfx1jBhzNE9v0EkE8NLRy3Xe1LbwmhgvIodFF+kshgY1+NyLvQnNj0BgRRlMlVgWzxgTE2npKrt89+WxoiSQh6rzgPIpbK4OXnvAIQm2zSIFeeHY8/rFfI9wG6cQoIRU1SEmFo7QozIYC0AMn71vnDCc61/YaqfT2I8R+rfrnuMLyvt8fUMfwQOz4jvCzdd+U3HWwVL1+CO5Juhp1mqSXabiqctSXzRDAKIuz7Aq+GhRwEuSVE+X+nQQLoDO1rC3WBwsUhsR2P7Q6Deb3EU6BsU9L9Eh3MNrDxCfinVld1e/QXBp60smnuzIjyeOCgTHQoHuyIytF6cdDTPK2ON4m35SbtB306pd/zzpV+wIwKlO78NZFHTZOxw+aHu83bzlBHUQnoyqUryQYyqI2Tf/iZTYX9AuTk+yvxHbuTzkQALbUUOTcVqe78SPHksy9f2FGhsZLwlPZMhI1HaqxJ4BUNGBHuF74P/z0zN5VRlltLqH8o4naR/+ZszLKKRayVjTxQoAp63WqEim/zCB+7JlLPv6D9cGskMKy4KnZ00yaiIHCOxedTKoB1KC02cltW379uf14hYIwxN4ac81hZf5oT7tcNUq4KsJjFtb0oQMBe9ngWj+EdksXhfWDL018GMTQy/FERfY7ZYnymC7OZltIG8uSgdCrfo4ZrPD8pmVbjUyahJ0U/TDhAvgvSgE0Cj/HMMxMZBrwpkO36JXwdOB/61cncUK8/euByhtxcs+FE6FjSTL3xktr/jWRaoY4RY5CJEJzt1eqdX5vYYAARY/uFm9mZc0/ekMbZL25sNC7dQ1/XxA7tY7svSawSu0k+rZgoGofT6F3cCn0YeanVHTuopIBDzBksrskbT5f1YB/BW4UKbGdyO5UX8lKygNfI4QEO1djtAv4vSOqksTfatvlAAAAMAGe6XR/qeJdJQyzgTW8TRTdAACQt4ei4m7Uex+ql1ViFkEYF6ozSQlCUs1nd7HOQAAAADYBnutH/6sUlfOR50DzQFTUfcTLetlJWs6X/8jYcTb94JjsaAAf3GzrPRIWgVL9PGpuGSwY0uUAAATZQZrwNKTBE//+DOAQNseATVIvvulM1zbNTm1kte2zdhlRzbLGjXY8Zu9C5cbwE2V3T2N3NU2MfQOoskso9vQLwmv2yjuyydzZI49SM33U8h6P3tlK05g344/9ooNiw1zXuh8k9WP1sf3yCyXlfcJvvW5GG6a5tZKgf9mvUtxG0vyB508xmHXcscwTso3hRUjkvTFxnW9aW0FbgqqXy+L4CRf5W1lxT2Pes6otdiQEBs8CHhvAeu+a3MhHY7a+hAD6kKFCCam09nAnczhYcCu0mpdoxdqyYPpA1SFEE3FDnyWi//iFsXqB7OFT0kT1oAjadoZtgNVOjL1NfFD7aELCwNGPnuWDfPEfGGXRZkKrLqEDZUzGU+KAuCCUkKC5qPWN4qhcJK/jMC94fGVVle7MzKtJ0za4+aXyVTIgIFvJftwMH+C3DOydSFvoZfxR5T27ZuDo09kLmmweBV+B2/wD9f10b8RvMTL4rMWkSw8vepCI+Em6obnzQ9bRctkLNUYWR6cIfUCJQ/eCe3yXiOF0phR/gh0J8Yi1CQtHqrveHMXVep2XwcFZSa55YitLU7Fv1BnWakQ1v8goIUOOmJ9xTMj0GlEheiDTGxzd6BDHjhKgq7oBggzVEsD4IvjsC8Y4dDTH6yXZHg+nLn5GfMhPj1bCbG8csQuGNRHlMcI/a7eW1eO7LdjAMDezLNuXNe4Wzt7RXEk/fTZwqcPJcUJiO1VTkXyJckJjIhiU+K3LW2VGZp2TPsJ3Ucu0c8yZUBxPxNGK9IY7J/fJWx2LxkYQFRNppiZfSROJ3bGz/u6aNgw5Sff/AnBu1jZHwPXxfGzSnnA2uKFCcysOxO+Nd9a/BcY2tT9awdrjS/nXtLAQ2cOf1BDLTZRTgPm2LGaf2u4/lBE3BjNWKL4550gSRFtiwQYjZrGik7RTQIzMEiT0u/Oajg47gYzMmQJNvw7T0u9JgvNCUYZoHVvN7rDPgrPub6or3TcmBZnEZL4xSbN1drgxD03BgNUPgtX+wEcnmBi5L3MZ1HAYJbO30ksBttEKYJxBDUdsiprLFps0q0WscpbStan4JeCgyCYth1WLz6N+c3HWieojQvRhRfJj+cLlhU/L72BRHGdFkXhoK3UlaUvxMdS3u0OX901JHwljUdlgi8rK6Fq2mQlEGU4+Vx63OTCQh0V2TKi+jL/X1bmonSMvHmQFAfVnbJ/H/9M4eRal8Va9jV0hhiznkDv+lHrLMfnIUUIVkRPQISczfY9DQjmcZtTUcM69H4TSpM0Waqe3KQO2pGOVcSHC1QUgQvKxIr4Y6KNLffRLgAI1Xp0xkxv482b9GRY9XzUxUxphu+5/gTMyeNmYip8u4Xa9iwrPIGUmWFxv28ppd/3OmYyq09aJXOYqIalqD7SeUD3lMU2VdR9tvO1IUGPT+FkXDTzq9sx1h4Dtr1YKiV0+ZQXIyNRxwxT3U6VC3/lFsdoTIjqfGbX+C8vlpHBHsNaRLFy/QS6+KWdBT/Fp5Fex05aqIgRYuSyL0tHyvv13bO+5vdlhsvvGWAP8jL5gK5exNS9/UtyFVbOVDhaw0Vn0OnrmhJ51L8NKUM+QiGOy49YT5o3lggfNS8wB4pcR/Jn7zGwDge6vLHEJGzlwyMtLmZxcMUzaJp2SSik+w9MAAATaQZ8ORRUt/3aCTJFiGKXks7idcOR6JHQvZkEhSgtc75eJYkqtyt+Le9nqbcMUA64gQMMJxrK7cKTDERSe7wZvyqJ2SgwVzjZGidDi2gK8tfkv8aMc6i084e4BYRi5RVb0vxRrZOGLvrc3FJXDIzi03pUNBuMVg41Yog7WxLETzIWBOdzmiv02xmrQBQSbe39slcc0tHTNtndNKbmn8Z3Vzmw9U+siJIo1q3Jg3v1+1VOEs59cu3Jpcw6++GEU1FeIRkHhFJr400BmLhjMqYoEwtLNJsDbh4bYnmil4aSU5zjPk1ByBPHAjLoesoU/zdqOAhLx8RLKavVoELf3KbZBzdtT5wtq4BWnKTMy13sLoIEynOqObrMZkgVplgFqkiF0cAdwUq0538+jdnJbHC49GBLS50cRiUglBvhKAEVTvsnZiA6WaScJmmBi9mG9KeH/4fohe/zmWg8XqOE1I0xT6QBIH8ujXi2xi2a2IEhtpIzHyQN4ShyC/NX4M556sv/MkVkqf6ZtTe5/dgOwHStK6ZkSR6D//WAuzItlGs2RmQffPWkY9j5C7ItFNxwEgYCTdxmWGOtWbedlEmCr5TiYxvqmm2szhg0TBYqAqyNoVcQXGn9mEXjm28N29IGs5HDfgjSbq9Vdn1CwfyW1g9gVqF3ter8Z2Qeyv9VhY0obQoQ83/0kehk91ISwqKUM2L5uI6YPg/QlDC9kkYVsXL38EM7B3wmMNhO06fjwcRvDh0nUwm83LUgpnqHsRYhmMqU24YBkUMWPzG9W4BYF5GIZYKbHqB2iTcA7raiuHg5P7004Y1XADNsoLc7vY2J4NOF/WYZAST/haWXJ22i49wBs6iu0KrGS/Q7I0fWaFzNH6PNCZxy1kQH5OVJp6P7Mb+1xqi1eeoMGoXfegHpmzkjmjmOFM4J7VbPO9fyl4TqkU5S7jzPyr4KcEsPF1N19zBQCZFAfCpq42/nfCxI517vqCPdmOi5xtEB4HAVJM61Pu+RmiSrlnnHXWOVOdELpJOW17f6Rj9ZTw5Nvspd2pd62JBX/UTP7MMhAjWIofKKjEwIwGALJ++v/HuCXezOuNJrEekkfLlM1sZGBfXxabJmi8p/R9nyMTs9kt5M6WxLVg1odgQXIim4tDGXC4oFBTgJxwIOwtgFK/mJ39CdSLRfP/ZmmmCWkjVuqPFp83NUPilJbJP6S6ZfduEWCV0LcabcytOn6WNqEhBbj13vkfNsxRcSNIFx4Cg85xbRMM86kGp9D1rMDTA/uIHjiXJHAEST9+j9wBLtoS4uMy2Prv3sMMtmcFca8SoYGWjYO2aEkOpG3rNeGQEAw/eUrNERGacYR0zkF1zibdjJHm28uOYYorqji9UkOlWtJkuRIdN/g18tDtCdB1KlbqmVFsP2+jV3SuCGgataGKAKEIU+Or3dWLtkzUZZNgUpEO694yqXsH9BcXNvX3YP5Yi2LuiP0X16LdYRlcEHGB6LszmLFzo3iCHWDTz1xo7BMBP0iTcLFlvaNTkxPngZIapY/XmqHHg4FUokFzUjZ+NTxyXKwwdvHtN0xqHP5GJvocQ528lgFg2xCUiZKlmIgkBw0SXlz1bp9ReA280JMqAH7pAhHllW0YAYrZHxdZfJQaqgtglQZ7ljSIFW8UYNFJgWxAAAAKwGfLXR/Wy6G0XgAAXTnwgAABZ3lcr4r9A2Up2nEWqgHlsPyx+XK80uYPOEAAAAyAZ8vR/9zj0IFPF5VQDMZ9QGGDL3mdQ35Wi/fw3WLQ6XPgpKAg0V7LQ9cUgoShCSoyQgAAARaQZs0NKTBL+nkrLWL14BgpvYwUI0QSlXD2m67rqJJ28+NTnaILhEiFtNTHVd6A0P1pq8u65+o7U62OjTL+qIvGEm+koebxxsvM8zbUr7697FtF8OnyP3WcgVIJxF9unxBWWGRlLtsbAH22NoH8XUvn2O+ZDIxmKDhMG08O0zsRayxFveTYnHH/YEbbxTEKxqJII2deeqAC8rsnaUnUot6DP2EY2sdnodLluPcquntESzyywrwIBRqMm5WxkyLRy79ld7UmLYU276tf/ZVwrwNdR9LeU9iquFKhSAZV8gcZZo9S8CtSJw+wi+V7HUOlQozyXeBkc2OHv2Ky8FTXCzxhCkrnHUUNaCSfN2mIj2vJBazw5cVVSTuhp/lkNxNmPXZKXiD4kIHSwKC7BpZjty4u8Vi1gUenMmt5QDfm3nVJ/V3s0QFGg1cIhREv3lMa0IOadTK4H3IeuYbbYxSzqQOvs/N+6bnzq0+lk5Smf0Wl038jxt8REJs55FE8L/RcRijvbzwMD3dxiD7/likYCdrncXst+xmp2HCAStX/z61kIIYzJvNd9gZxnYipettHIOYRKrdc670N6lRW2WpaoL9l/6vaXlGkJijR8O9ed9fe/vSCYW1PgkUMV/Q2DUNjTx8jB9kyw4xk/11D6l4YZKhRpQYzgjKR7vnhaozCTAy4ZWmtogw6GK32dLAFqfGYo52nYzhlxpE9wD8ip12tlNh5Pu7f/WskgfOG1/CJ0exyD9zdWmZT43SMIeLc4JfMQphlEMptD7B8hJYSn84pC+WH2UH8cBmmOdCyupNvBMu3HfqLiLoCscE/E/6yhqxuvmJictCNzhKBwbvEFMlLZlujFCLEi9QutZfySrdn0J0+zc+w9ue+3QBT2GUWnPo7gNn+zxILF6rY/xsmJ8Ib6jIIJtaB6T/g2rc1brOXZ6MTw8LqveaGEg9UAsOgslabRYnUfDD7V81ao05sSbkiBhDXXIizByeAPraO45DBDFiJewT6kFPoq9PwDoLw5QyAYkORO2ntVIDQB1OkMvogexjf/K1lnswXISXB5pycQ+F0/1R82xR8WCkIO3HcfIPqAIDPXv+XaqJxdQGHxcz/LgwvJAap7ppGASsGOjqBryJcPp0kEj5wMxAOSvb58yCQ1ZKq8VFOOP0UDsZuec1SVizLK+v0YmXNH0Wl97r9Co3kJklMgZkxYbI8DUBMbAp3CQQPxZC5AwiqgOkhJf5Wwr+f8FWoSX4ISzr3a3XB4pbkc7KT2jBJ0Vg0YEOBjFLwFlCO9bW/PYRn0AguiFumYpR3V1I0ikGbqgE6HBOauwcGNH/gpMP17Hs7pV7gWU4NZH3U9XFK+PDp7HwHWezbvfZYUeYleajAD9gh/rjzloQIM8YOiyCS9oON35edC0EEieGGCv5DB1IKBkWi0YHuK65Es13voLml/nvfnGFg4+IogBN3gCMzILwB9weYN2jDTdVt2FDjzhX+Hy5MAAAA1dBn1JFFSy/tejAKQVMjP6jHG4IE8lNyOEr0Yj6uzSAKM471vUmt9C3RJAL0RcyuTIc9MnT4jf0oyvkHPusajauDLMWLejnXAQr4A1Upb3PI6kqvqa02qnxpXLtL8UrViIpCevaS8/gYwR31mlpN1B1TQRziVFZsD9rlMsi0IPexOLBYIkxfR6JgR6cpjWkReACmU7Mwj2VeJzL9DEx52K0oGAxwHgDQ9oZmG0aH+x54FbTJBYOuAwShIdpprOX+q0nhAD50W1C86/A7BAFlnzwWM2OLejhLm/b0UNChH/ONp+nT7uu7MltgWWpGGtLc7d/oEYNhu2Ktre/FEfznjzC48tSeRzySD4KgjY4U69DvloDmWtOzQ19dpkXpSuPPz2kSbb8BxkKjVBz16B4T7xdYvX2SA0ueT+0gPn3GKBlRbB+rM6tyPzQebNdqqVWGVn3ggl8G3WM/9EJualCe/x/HglKGpIjV1iAZjvSE+p9r0WPJnMI7zV1sDiFK1dsWWgEju6OAbBPbwixUa2M0HBDTLFRIMERf114SXQ23aMm1WtBdaicCqIy1+EybI+guwt0rTpyXpYgOeA0jzk4qaGirYJud5PKCYTnUlRQ/AyjN987sr6XAKCTVrzNsvK89DmaNUNS8Gn08gA5dUVc7m98/TndI/yCjZ0Jyit8XR8uOxcyYHPMLwTOyKJ1bB04vO4Xb4HuOm0yGBpYha8c5lGJV1jjX6zfpAHby/AKlIGbio8w9ofyXUgv3qtJr8zVbO5M59pledUAvJG3MyIl2sHZdPj26hibO1I65ox4aQ/wy5DnDHI7Hg+V/RY7aRmBHqv27ModFwTsMVx1/v2agG5OjblzemSecIepH4eVH8igZ6MlQMAORp/EcovUYdrhmmJAv9qsNtcGPlUS47/+7hGOsHfi+trGNIs/VMGpT3T869Si9kKXOjqeb1DQYJ7imKB82VntfmjVNGmv59mYz9HERieEst1I/iWaizIQ/3X1rRhkw8L5q/J/UhYg48hPOAk0c8hNR0PIMk/GyiXocACfU6UeYxrAb0GVFkG9deuwVC/xt6/kJhMZbjSxt02PZFi/zxjICY27ua2U0N81W/vnYniG9lDNGeum+FrR7w6Qw4cTV016vYEAAAAhAZ9xdH+p4s2UH52lqJS2E9cEmAA11wMne3ub36jm2kZgAAAAMQGfc0f/qxbyhUA7THirxCHylQGNqodn3lDZu7jT/mCovBpzUqOKa1+blNIbAHSp9UkAAAVJQZt1NKTBL+RXFlOh+KjOVqTTfbdWmxm4pHHjfaTgdVRG9dXt6WOuYh+zWSkOX4/dCTB3U0Exmt2Ogu9zrm6ePGEJsXcN4xmMEh4Xog0VK1Ndga5IEemp4rOnmecJzRnqp1ZoHewYQhhj4qjHTTDCO5JOt0Ld2PHSJAc8s44DGDB/9tdUVtnuK57m4YDBqGNltuqoRU8x58q5krVZxVIU6p7XHGUZiGP6VWHD2OnqfNbUT9pOEBr1eBMi04BWAqaS8lPa8kxJDsT15kr7BKbBwHhyalynXbaJQFRYi/0IKiSZEhPbkQFchTvidC14OCCCKddQitI1UXWq9vpfVVkUMdK2efoCjjyohvIeiI8ON+6tJdSo/VW6ISG87RGa/DpqKsXGWK7O+J7B6VO0Cq2NM7gJBoltji8tI2iyRAOcoOTZRrtcoXD8WwS7lKFBoRxoh/AwY//YFpz0jjgjsHQy/K+Ez9eb9zmmWW9DCTHNa57paUFWqOL02f0Fxyy0sVVlYim4MWba2o4IjklbMSsUMM+FbKNhBr2MlmxBafJwcTYdfd9vw/y46NKCdiJp9y1J7On5yQGz13V6RYMwpWAmU662tBP7d1OXSckVUgbndIWyfkN0ZsICB39VT8G54t/PJDJ2h4JrKTkNiqEiT0Tjkl+jhqMOReREuCRd9qyeJBR44lid+EEd+n2itsYETL65wNCVKsuuhCnOKvLMq8N6j9lWsoGFfRkQuGipTLoxmbIUBAcYRBbFJNBrsvunXQsPrxYmOprEQTtTaAAqKNvnzbLF5it6iG8Wa6OKDD+msXDDXl6Ho96pwSKNrvFKUlEDJK71X2whkKeiQU7xgzy7HG9KhDcNqLQcHQ1D4aZ9DNKCt9hgiHqu6fJlaXtEYwxRKRnbTK2lSgLoo2VHM4NlLfOyc8Fm474gk64jEMAfNwQ4zluoV4iGjh0vMUC9buCqqO0wqhXZAXXwMteRdAEBTnyZ/McyHWiIpKbSYY8H1jU2RrVrg4/WGZeBoRUYXM8T9v2oa8rEfZdqF1/PXyX04qMWrLdu4LIuCGVnPGEwFicTbFZyxz6SLKWfF+PTM1YhswdZ1HPuWIqUMZ7Hd6ukQtFnWJWHLSJhj+8eZEP4ItJA0cu1oQ2xRJ2/uTDf3rundAUCDrBQEIfuw1uUQbtvvYmOMkp7YtscAd7ZXu5gq7/2tZW0M9/1BykLzMcf9NJ5jZXgrAyuY9Q3Pc0PfG7/hwLR2GNFnNYSEm84VYpyX5Ixr3Ast82qSd0qt0EdQOnXhA7dZmsyTBZbLLtaTcwjo7PiApjVt0PnhnmI27uZaFzKFa/SoP+BMsYK7PtpnaiR5O8wzqBzitkNmpgEuBUoz1MXVeWOU9cs0qM34aSosyQy2dRhX8pon1ZrNupnwe/poejl/D2FpEoPfyFnjqj4R9BLi4s6VEruViIwMQEqh09s+fwwaJg7hIKzfuxTsyat2UXyO+aSGqitKgSZyMt7S171xZs3KnYoPUppUWPoku+xoXNUyAMcddzYungGAJoEsnDSdbjQS0lVXJYPd47grc0vPFpEv6RCK7Fs5d/4BLZMUy7lR7L86lg0SRba+V8eKGn8Ce1cJ7/FysjyBRut6PUKq4NSmtAc5qyMe6/2cuJ/yYzFLsBif/Eiyf0Z4pBhaWEkOOR7bX/FgXl+EYzraGJivBv1tusEPOVoz/8OKofPlCgFiXsyoTP0TZ8r4mBTbsu+7U1+6WpcQN1aLHU7yWI43k+8MQN7i1c/5dY0SuSnwC/wFDZVJqeuzEDLhFoa75b5HK+HYaFhAAAAG0Gblz0TCipb/4cATgZovIQUgDcqUc47H33miAAAAA0Bn7ZH/wjcNKL6EPfZ',
+};
+
+export const Snapping = Template.bind( {} );
+Snapping.args = {
+	...Default.args,
+	resolvePoint: ( value ) => {
+		const snapValues = {
+			x: [ 0, 0.33, 0.66, 1 ],
+			y: [ 0, 0.33, 0.66, 1 ],
+		};
+
+		const threshold = 0.05;
+
+		let x = value.x;
+		let y = value.y;
+
+		snapValues.x.forEach( ( snapValue ) => {
+			if ( snapValue - threshold < x && x < snapValue + threshold ) {
+				x = snapValue;
+			}
+		} );
+
+		snapValues.y.forEach( ( snapValue ) => {
+			if ( snapValue - threshold < y && y < snapValue + threshold ) {
+				y = snapValue;
+			}
+		} );
+
+		return { x, y };
+	},
+};
diff --git a/packages/components/src/focal-point-picker/stories/index.tsx b/packages/components/src/focal-point-picker/stories/index.tsx
deleted file mode 100644
index a42185f3c1ffb5..00000000000000
--- a/packages/components/src/focal-point-picker/stories/index.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import FocalPointPicker from '..';
-
-const meta: ComponentMeta< typeof FocalPointPicker > = {
-	title: 'Components/FocalPointPicker',
-	component: FocalPointPicker,
-	argTypes: {
-		help: { control: 'text' },
-		label: { control: 'text' },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof FocalPointPicker > = ( {
-	onChange,
-	...props
-} ) => {
-	const [ focalPoint, setFocalPoint ] = useState( {
-		x: 0.5,
-		y: 0.5,
-	} );
-
-	return (
-		<FocalPointPicker
-			{ ...props }
-			value={ focalPoint }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setFocalPoint( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-
-export const Image = Template.bind( {} );
-Image.args = {
-	...Default.args,
-	url: 'https://i0.wp.com/themes.svn.wordpress.org/twentytwenty/1.3/screenshot.png?w=572&strip=al',
-};
-
-export const Video = Template.bind( {} );
-Video.args = {
-	...Default.args,
-	url: 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm',
-};
-
-export const Snapping = Template.bind( {} );
-Snapping.args = {
-	...Default.args,
-	resolvePoint: ( value ) => {
-		const snapValues = {
-			x: [ 0, 0.33, 0.66, 1 ],
-			y: [ 0, 0.33, 0.66, 1 ],
-		};
-
-		const threshold = 0.05;
-
-		let x = value.x;
-		let y = value.y;
-
-		snapValues.x.forEach( ( snapValue ) => {
-			if ( snapValue - threshold < x && x < snapValue + threshold ) {
-				x = snapValue;
-			}
-		} );
-
-		snapValues.y.forEach( ( snapValue ) => {
-			if ( snapValue - threshold < y && y < snapValue + threshold ) {
-				y = snapValue;
-			}
-		} );
-
-		return { x, y };
-	},
-};
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
index f405b02959f9d7..fba3eda2fb0f29 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -9,19 +9,20 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS } from '../../utils';
+import { COLORS, CONFIG } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
+	display: flex;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
+	border-radius: ${ CONFIG.radiusSmall };
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
@@ -29,8 +30,21 @@ export const MediaContainer = styled.div`
 	position: relative;
 	height: 100%;
 
+	&:after {
+		border-radius: inherit;
+		bottom: 0;
+		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+		content: '';
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
 	img,
 	video {
+		border-radius: inherit;
 		box-sizing: border-box;
 		display: block;
 		height: auto;
@@ -45,6 +59,7 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.gray[ 100 ] };
+	border-radius: inherit;
 	box-sizing: border-box;
 	height: ${ INITIAL_BOUNDS.height }px;
 	max-width: 280px;
@@ -53,7 +68,7 @@ export const MediaPlaceholder = styled.div`
 `;
 
 export const StyledUnitControl = styled( UnitControl )`
-	width: 100px;
+	width: 100%;
 `;
 
 const deprecatedBottomMargin = ( {
@@ -91,29 +106,31 @@ export const GridView = styled.div`
 	position: absolute;
 	top: 50%;
 	transform: translate3d( -50%, -50%, 0 );
-	transition: opacity 120ms linear;
 	z-index: 1;
 
+	@media not ( prefers-reduced-motion ) {
+		transition: opacity 100ms linear;
+	}
+
 	opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>
 		showOverlay ? 1 : 0 };
 `;
 
 export const GridLine = styled.div`
-	background: white;
-	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
+	background: rgba( 255, 255, 255, 0.4 );
+	backdrop-filter: blur( 16px ) saturate( 180% );
 	position: absolute;
-	opacity: 0.4;
 	transform: translateZ( 0 );
 `;
 
 export const GridLineX = styled( GridLine )`
 	height: 1px;
-	left: 0;
-	right: 0;
+	left: 1px;
+	right: 1px;
 `;
 
 export const GridLineY = styled( GridLine )`
 	width: 1px;
-	top: 0;
-	bottom: 0;
+	top: 1px;
+	bottom: 1px;
 `;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-style.ts
index 201924ec6f6c6e..ad1e8eeb286779 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.ts
@@ -3,21 +3,36 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../../utils';
+
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
-	height: 48px;
-	margin: -24px 0 0 -24px;
+	height: 40px;
+	margin: -20px 0 0 -20px;
 	position: absolute;
 	user-select: none;
-	width: 48px;
+	width: 40px;
 	will-change: transform;
 	z-index: 10000;
-	background: rgba( 255, 255, 255, 0.6 );
-	border-radius: 50%;
-	backdrop-filter: blur( 4px );
-	box-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;
+	background: rgba( 255, 255, 255, 0.4 );
+	border: 1px solid rgba( 255, 255, 255, 0.4 );
+	border-radius: ${ CONFIG.radiusRound };
+	backdrop-filter: blur( 16px ) saturate( 180% );
+	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
+
+	@media not ( prefers-reduced-motion ) {
+		transition: transform 100ms linear;
+	}
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
-		isDragging && 'cursor: grabbing;' }
+		isDragging &&
+		`
+			box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px;
+			transform: scale( 1.1 );
+			cursor: grabbing;
+			` }
 `;
diff --git a/packages/components/src/focal-point-picker/test/index.js b/packages/components/src/focal-point-picker/test/index.js
deleted file mode 100644
index b49985931050d1..00000000000000
--- a/packages/components/src/focal-point-picker/test/index.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import Picker from '..';
-
-describe( 'FocalPointPicker', () => {
-	describe( 'focus and blur', () => {
-		it( 'clicking the draggable area should focus it', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const mockOnChange = jest.fn();
-
-			render( <Picker onChange={ mockOnChange } /> );
-
-			const draggableArea = screen.getByRole( 'button' );
-
-			await user.click( draggableArea );
-
-			expect( draggableArea ).toHaveFocus();
-		} );
-
-		it( 'should stop a drag operation when focus is lost', () => {
-			const mockOnDrag = jest.fn();
-			const mockOnDragEnd = jest.fn();
-			const mockOnChange = jest.fn();
-
-			render(
-				<Picker
-					onChange={ mockOnChange }
-					onDrag={ mockOnDrag }
-					onDragEnd={ mockOnDragEnd }
-				/>
-			);
-
-			const draggableArea = screen.getByRole( 'button' );
-
-			// `user-event` is not capable of testing drag interactions properly.
-			// we could consider using playwright instead.
-			fireEvent.mouseDown( draggableArea );
-
-			expect( mockOnDrag ).not.toHaveBeenCalled();
-			expect( mockOnDragEnd ).not.toHaveBeenCalled();
-
-			fireEvent.blur( draggableArea );
-			fireEvent.mouseMove( draggableArea );
-
-			expect( mockOnDrag ).not.toHaveBeenCalled();
-			expect( mockOnDragEnd ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-
-	describe( 'drag gestures', () => {
-		it( 'should call onDragStart, onDrag, onDragEnd and onChange in that order', () => {
-			const logs = [];
-			const eventLogger = ( name, args ) => logs.push( { name, args } );
-			const events = [ 'onDragStart', 'onDrag', 'onDragEnd', 'onChange' ];
-			const handlers = {};
-			events.forEach( ( name ) => {
-				handlers[ name ] = ( ...all ) => eventLogger( name, all );
-			} );
-
-			render( <Picker { ...handlers } /> );
-
-			const dragArea = screen.getByRole( 'button' );
-
-			// `user-event` is not capable of testing drag interactions properly.
-			// we could consider using playwright instead.
-			fireEvent.mouseDown( dragArea );
-			fireEvent.mouseMove( dragArea );
-			fireEvent.mouseUp( dragArea );
-
-			expect(
-				events.reduce( ( last, eventName, index ) => {
-					return last && logs[ index ].name === eventName;
-				}, true )
-			).toBe( true );
-		} );
-	} );
-
-	describe( 'resolvePoint handling', () => {
-		it( 'should allow value altering', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const spyChange = jest.fn();
-			const spy = jest.fn();
-
-			render(
-				<Picker
-					value={ { x: 0.25, y: 0.25 } }
-					onChange={ spyChange }
-					resolvePoint={ () => {
-						spy();
-						return { x: 0.91, y: 0.42 };
-					} }
-				/>
-			);
-
-			// Click and press arrow up
-			const dragArea = screen.getByRole( 'button' );
-
-			await user.click( dragArea );
-			await user.keyboard( '[ArrowUp]' );
-
-			expect( spy ).toHaveBeenCalled();
-			expect( spyChange ).toHaveBeenLastCalledWith( {
-				x: 0.91,
-				y: 0.42,
-			} );
-		} );
-	} );
-
-	describe( 'controllability', () => {
-		it( 'should update value from props', () => {
-			const { rerender } = render(
-				<Picker value={ { x: 0.25, y: 0.5 } } />
-			);
-			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
-			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
-			expect( xInput.value ).toBe( '93' );
-		} );
-		it( 'call onChange with the expected values', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const spyChange = jest.fn();
-			render(
-				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
-			);
-			// Focus and press arrow up
-			const dragArea = screen.getByRole( 'button' );
-
-			await user.click( dragArea );
-			await user.keyboard( '[ArrowDown]' );
-
-			expect( spyChange ).toHaveBeenLastCalledWith( {
-				x: 0.14,
-				y: 0.63,
-			} );
-		} );
-	} );
-
-	describe( 'value handling', () => {
-		it( 'should handle legacy string values', () => {
-			const onChangeSpy = jest.fn();
-			render(
-				<Picker
-					value={ { x: '0.1', y: '0.2' } }
-					onChange={ onChangeSpy }
-				/>
-			);
-
-			expect(
-				screen.getByRole( 'spinbutton', { name: 'Left' } ).value
-			).toBe( '10' );
-			expect(
-				screen.getByRole( 'spinbutton', { name: 'Top' } ).value
-			).toBe( '20' );
-			expect( onChangeSpy ).not.toHaveBeenCalled();
-		} );
-	} );
-} );
diff --git a/packages/components/src/focal-point-picker/test/index.tsx b/packages/components/src/focal-point-picker/test/index.tsx
new file mode 100644
index 00000000000000..377ba6c4e9e6b3
--- /dev/null
+++ b/packages/components/src/focal-point-picker/test/index.tsx
@@ -0,0 +1,203 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import _Picker from '..';
+import type { FocalPointPickerProps } from '../types';
+
+type Log = { name: string; args: unknown[] };
+type EventLogger = ( name: string, args: unknown[] ) => void;
+
+const Picker = ( props: React.ComponentProps< typeof _Picker > ) => {
+	return <_Picker { ...props } __nextHasNoMarginBottom />;
+};
+
+const props: FocalPointPickerProps = {
+	onChange: jest.fn(),
+	url: 'test-url',
+	value: {
+		x: 0,
+		y: 0,
+	},
+};
+
+describe( 'FocalPointPicker', () => {
+	describe( 'focus and blur', () => {
+		it( 'clicking the draggable area should focus it', async () => {
+			const user = userEvent.setup();
+
+			const mockOnChange = jest.fn();
+
+			render( <Picker { ...props } onChange={ mockOnChange } /> );
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			await user.click( draggableArea );
+
+			expect( draggableArea ).toHaveFocus();
+		} );
+
+		it( 'should stop a drag operation when focus is lost', () => {
+			const mockOnDrag = jest.fn();
+			const mockOnDragEnd = jest.fn();
+			const mockOnChange = jest.fn();
+
+			render(
+				<Picker
+					{ ...props }
+					onChange={ mockOnChange }
+					onDrag={ mockOnDrag }
+					onDragEnd={ mockOnDragEnd }
+				/>
+			);
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).not.toHaveBeenCalled();
+
+			fireEvent.blur( draggableArea );
+			fireEvent.mouseMove( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	describe( 'drag gestures', () => {
+		it( 'should call onDragStart, onDrag, onDragEnd and onChange in that order', () => {
+			const logs: Log[] = [];
+			const eventLogger: EventLogger = ( name, args ) =>
+				logs.push( { name, args } );
+			const events = [ 'onDragStart', 'onDrag', 'onDragEnd', 'onChange' ];
+			const handlers: { [ key: string ]: EventLogger } = {};
+			events.forEach( ( name ) => {
+				handlers[ name ] = ( ...all ) => eventLogger( name, all );
+			} );
+
+			render( <Picker { ...props } { ...handlers } /> );
+
+			const dragArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( dragArea );
+			fireEvent.mouseMove( dragArea );
+			fireEvent.mouseUp( dragArea );
+
+			expect(
+				events.reduce( ( last, eventName, index ) => {
+					return last && logs[ index ].name === eventName;
+				}, true )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'resolvePoint handling', () => {
+		it( 'should allow value altering', async () => {
+			const user = userEvent.setup();
+
+			const spyChange = jest.fn();
+			const spy = jest.fn();
+
+			render(
+				<Picker
+					{ ...props }
+					value={ { x: 0.25, y: 0.25 } }
+					onChange={ spyChange }
+					resolvePoint={ () => {
+						spy();
+						return { x: 0.91, y: 0.42 };
+					} }
+				/>
+			);
+
+			// Click and press arrow up
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( spy ).toHaveBeenCalled();
+			expect( spyChange ).toHaveBeenLastCalledWith( {
+				x: 0.91,
+				y: 0.42,
+			} );
+		} );
+	} );
+
+	describe( 'controllability', () => {
+		it( 'should update value from props', () => {
+			const { rerender } = render(
+				<Picker { ...props } value={ { x: 0.25, y: 0.5 } } />
+			);
+			const xInput = screen.getByRole( 'spinbutton', {
+				name: 'Focal point left position',
+			} ) as HTMLButtonElement;
+			rerender( <Picker { ...props } value={ { x: 0.93, y: 0.5 } } /> );
+			expect( xInput.value ).toBe( '93' );
+		} );
+		it( 'call onChange with the expected values', async () => {
+			const user = userEvent.setup();
+
+			const spyChange = jest.fn();
+			render(
+				<Picker
+					{ ...props }
+					value={ { x: 0.14, y: 0.62 } }
+					onChange={ spyChange }
+				/>
+			);
+			// Focus and press arrow up
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( spyChange ).toHaveBeenLastCalledWith( {
+				x: 0.14,
+				y: 0.63,
+			} );
+		} );
+	} );
+
+	describe( 'value handling', () => {
+		it( 'should handle legacy string values', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Picker
+					{ ...props }
+					value={ {
+						x: '0.1' as unknown as number,
+						y: '0.2' as unknown as number,
+					} }
+					onChange={ onChangeSpy }
+				/>
+			);
+			expect(
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point left position',
+					} ) as HTMLButtonElement
+				 ).value
+			).toBe( '10' );
+			expect(
+				(
+					screen.getByRole( 'spinbutton', {
+						name: 'Focal point top position',
+					} ) as HTMLButtonElement
+				 ).value
+			).toBe( '20' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
+		} );
+	} );
+} );
diff --git a/packages/components/src/focal-point-picker/test/media.js b/packages/components/src/focal-point-picker/test/media.js
deleted file mode 100644
index a755396f8bef42..00000000000000
--- a/packages/components/src/focal-point-picker/test/media.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import Media from '../media';
-
-const getMedia = ( container ) =>
-	container.querySelector( '.components-focal-point-picker__media' );
-
-describe( 'FocalPointPicker/Media', () => {
-	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
-
-			expect( el ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'Media types', () => {
-		it( 'should render a placeholder by default', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
-
-			expect( el.outerHTML ).toContain( 'placeholder' );
-		} );
-
-		it( 'should render an video if src is a video file', () => {
-			const { container, rerender } = render(
-				<Media src="file.mp4" muted={ false } />
-			);
-
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
-
-			rerender( <Media src="file.ogg" muted={ false } /> );
-
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
-
-			rerender( <Media src="file.webm" muted={ false } /> );
-
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
-		} );
-
-		it( 'should render an image file, if not video', () => {
-			const { container, rerender } = render( <Media src="file.gif" /> );
-
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
-
-			rerender( <Media src="file.png" muted={ false } /> );
-
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
-		} );
-	} );
-} );
diff --git a/packages/components/src/focal-point-picker/test/media.tsx b/packages/components/src/focal-point-picker/test/media.tsx
new file mode 100644
index 00000000000000..e2c03968f795d9
--- /dev/null
+++ b/packages/components/src/focal-point-picker/test/media.tsx
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Media from '../media';
+import type { FocalPointPickerMediaProps } from '../types';
+
+type FocalPointPickerMediaTestProps = FocalPointPickerMediaProps & {
+	'data-testid': string;
+};
+
+const props: FocalPointPickerMediaTestProps = {
+	alt: '',
+	src: '',
+	'data-testid': 'media',
+};
+
+describe( 'FocalPointPicker/Media', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			render( <Media { ...props } /> );
+
+			expect( screen.getByTestId( 'media' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'Media types', () => {
+		it( 'should render a placeholder by default', () => {
+			render( <Media { ...props } /> );
+
+			expect( screen.getByTestId( 'media' ) ).toHaveClass(
+				'components-focal-point-picker__media--placeholder'
+			);
+		} );
+
+		it( 'should render an video if src is a video file', () => {
+			const { rerender } = render(
+				<Media { ...props } src="file.mp4" muted={ false } />
+			);
+
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
+
+			rerender( <Media { ...props } src="file.ogg" muted={ false } /> );
+
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
+
+			rerender( <Media { ...props } src="file.webm" muted={ false } /> );
+
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
+		} );
+
+		it( 'should render an image file, if not video', () => {
+			const { rerender } = render(
+				<Media { ...props } src="file.gif" />
+			);
+
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
+
+			rerender( <Media { ...props } src="file.png" muted={ false } /> );
+
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/focal-point-picker/tooltip/index.native.js b/packages/components/src/focal-point-picker/tooltip/index.native.js
index 626fb130c43dce..a8e9e74abd0045 100644
--- a/packages/components/src/focal-point-picker/tooltip/index.native.js
+++ b/packages/components/src/focal-point-picker/tooltip/index.native.js
@@ -54,7 +54,7 @@ function Tooltip( { children, onPress, style, visible } ) {
 	);
 }
 
-function Label( { align, text, xOffset, yOffset } ) {
+function Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const [ dimensions, setDimensions ] = useState( null );
 	const visible = useContext( TooltipContext );
@@ -139,12 +139,6 @@ function Label( { align, text, xOffset, yOffset } ) {
 	);
 }
 
-Label.defaultProps = {
-	align: 'center',
-	xOffset: 0,
-	yOffset: 0,
-};
-
 Tooltip.Label = Label;
 
 export default Tooltip;
diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts
index 81b683b7ce16cb..357af1e090d7f5 100644
--- a/packages/components/src/focal-point-picker/types.ts
+++ b/packages/components/src/focal-point-picker/types.ts
@@ -26,6 +26,13 @@ export type FocalPointPickerProps = Pick<
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Autoplays HTML5 video. This only applies to video sources (`url`).
 	 *
diff --git a/packages/components/src/focal-point-picker/utils.ts b/packages/components/src/focal-point-picker/utils.ts
index 66776f038cf8fb..0fa5f5707e9248 100644
--- a/packages/components/src/focal-point-picker/utils.ts
+++ b/packages/components/src/focal-point-picker/utils.ts
@@ -19,7 +19,7 @@ const VIDEO_EXTENSIONS = [
 /**
  * Gets the extension of a file name.
  *
- * @param  filename The file name.
+ * @param filename The file name.
  * @return  The extension of the file name.
  */
 export function getExtension( filename = '' ): string {
@@ -30,18 +30,23 @@ export function getExtension( filename = '' ): string {
 /**
  * Checks if a file is a video.
  *
- * @param  filename The file name.
+ * @param filename The file name.
  * @return Whether the file is a video.
  */
 export function isVideoType( filename: string = '' ): boolean {
-	if ( ! filename ) return false;
-	return VIDEO_EXTENSIONS.includes( getExtension( filename ) );
+	if ( ! filename ) {
+		return false;
+	}
+	return (
+		filename.startsWith( 'data:video/' ) ||
+		VIDEO_EXTENSIONS.includes( getExtension( filename ) )
+	);
 }
 
 /**
  * Transforms a fraction value to a percentage value.
  *
- * @param  fraction The fraction value.
+ * @param fraction The fraction value.
  * @return A percentage value.
  */
 export function fractionToPercentage( fraction: number ): number {
diff --git a/packages/components/src/focusable-iframe/README.md b/packages/components/src/focusable-iframe/README.md
index a7cd2f0b31b5b4..f083cff58cacb8 100644
--- a/packages/components/src/focusable-iframe/README.md
+++ b/packages/components/src/focusable-iframe/README.md
@@ -32,7 +32,7 @@ Callback to invoke when iframe receives focus. Passes an emulated `FocusEvent` o
 
 ### `iframeRef`
 
--   Type: `wp.element.Ref`
+-   Type: `React.Ref`
 -   Required: No
 
-If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `wp.element.createRef` called from your component.
+If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `React.createRef` called from your component.
diff --git a/packages/components/src/focusable-iframe/index.js b/packages/components/src/focusable-iframe/index.js
deleted file mode 100644
index 5c7e6b8edd799d..00000000000000
--- a/packages/components/src/focusable-iframe/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * @param {Object}                                 props
- * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
- */
-export default function FocusableIframe( { iframeRef, ...props } ) {
-	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
-	deprecated( 'wp.components.FocusableIframe', {
-		since: '5.9',
-		alternative: 'wp.compose.useFocusableIframe',
-	} );
-	// Disable reason: The rendered iframe is a pass-through component,
-	// assigning props inherited from the rendering parent. It's the
-	// responsibility of the parent to assign a title.
-	// eslint-disable-next-line jsx-a11y/iframe-has-title
-	return <iframe ref={ ref } { ...props } />;
-}
diff --git a/packages/components/src/focusable-iframe/index.tsx b/packages/components/src/focusable-iframe/index.tsx
new file mode 100644
index 00000000000000..ba1fae45c2928a
--- /dev/null
+++ b/packages/components/src/focusable-iframe/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+/**
+ * Internal dependencies
+ */
+import type { FocusableIframeProps } from './types';
+
+export default function FocusableIframe( {
+	iframeRef,
+	...props
+}: FocusableIframeProps ) {
+	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
+	deprecated( 'wp.components.FocusableIframe', {
+		since: '5.9',
+		alternative: 'wp.compose.useFocusableIframe',
+	} );
+	// Disable reason: The rendered iframe is a pass-through component,
+	// assigning props inherited from the rendering parent. It's the
+	// responsibility of the parent to assign a title.
+	// eslint-disable-next-line jsx-a11y/iframe-has-title
+	return <iframe ref={ ref } { ...props } />;
+}
diff --git a/packages/components/src/focusable-iframe/types.ts b/packages/components/src/focusable-iframe/types.ts
new file mode 100644
index 00000000000000..456408cb7c1702
--- /dev/null
+++ b/packages/components/src/focusable-iframe/types.ts
@@ -0,0 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface FocusableIframeProps
+	extends ComponentPropsWithoutRef< 'iframe' > {
+	iframeRef: React.Ref< HTMLIFrameElement >;
+}
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 5f74dd09a28193..39d916c0c7b212 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -6,8 +6,8 @@ The component renders a user interface that allows the user to select predefined
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FontSizePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 const fontSizes = [
@@ -29,7 +29,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
@@ -49,22 +49,20 @@ const MyFontSizePicker = () => {
 
 The component accepts the following props:
 
-### disableCustomFontSizes
+### `disableCustomFontSizes`: `boolean`
 
 If `true`, it will not be possible to choose a custom fontSize. The user will be forced to pick one of the pre-defined sizes passed in fontSizes.
 
--   Type: `Boolean`
 -   Required: no
 -   Default: `false`
 
-### fallbackFontSize
+### `fallbackFontSize`: `number`
 
 If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.
 
--   Type: `Number`
 -   Required: No
 
-### fontSizes
+### `fontSizes`: `FontSize[]`
 
 An array of font size objects. The object should contain properties size, name, and slug.
 The property `size` contains a number with the font size value, in `px` or a string specifying the font size CSS property that should be used eg: "13px", "1em", or "clamp(12px, 5vw, 100px)".
@@ -73,44 +71,53 @@ The `slug` property is a string with a unique identifier for the font size. Used
 
 **Note:** The slugs `default` and `custom` are reserved and cannot be used.
 
--   Type: `Array`
 -   Required: No
+-   Default: `[]`
 
-### onChange
+### `onChange`: `( value: number | string | undefined, selectedItem?: FontSize ) => void`
 
 A function that receives the new font size value.
 If onChange is called without any parameter, it should reset the value, attending to what reset means in that context, e.g., set the font size to undefined or set the font size a starting value.
 
--   Type: `function`
 -   Required: Yes
 
-### value
+### `size`: `'default' | '__unstable-large'`
 
-The current font size value.
+Size of the control.
 
--   Type: `Number | String`
 -   Required: No
+-   Default: `'default'`
 
-### withSlider
+### `units`: `string[]`
 
-If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
+Available units for custom font size selection.
 
--   Type: `Boolean`
--   Required: no
--   Default: `false`
+-   Required: No
+-   Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]`
+
+### `value`: `number | string`
+
+The current font size value.
+
+-   Required: No
 
-### withReset
+### `withReset`: `boolean`
 
 If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
--   Type: `Boolean`
 -   Required: no
 -   Default: `true`
 
-### __nextHasNoMarginBottom
+### `withSlider`: `boolean`
 
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
--   Type: `Boolean`
 -   Required: no
 -   Default: `false`
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx
index d3fc2ffe4a61fd..b33c382f3393e4 100644
--- a/packages/components/src/font-size-picker/font-size-picker-select.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx
@@ -27,6 +27,7 @@ const CUSTOM_OPTION: FontSizePickerSelectOption = {
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const {
+		__next40pxDefaultSize,
 		fontSizes,
 		value,
 		disableCustomFontSizes,
@@ -55,7 +56,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
 				value: fontSize.size,
-				__experimentalHint: hint,
+				hint,
 			};
 		} ),
 		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
@@ -67,7 +68,8 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<CustomSelectControl
-			__nextUnconstrainedWidth
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
@@ -78,7 +80,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			) }
 			options={ options }
 			value={ selectedOption }
-			__experimentalShowSelectedHint
+			showSelectedHint
 			onChange={ ( {
 				selectedItem,
 			}: {
diff --git a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
index 697d9e11b67e47..1b3619c800e453 100644
--- a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
@@ -14,10 +14,12 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;
+	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
 	return (
 		<ToggleGroupControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }
diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
index 9659c1dbe225fa..5c22cb86175dbd 100644
--- a/packages/components/src/font-size-picker/index.native.js
+++ b/packages/components/src/font-size-picker/index.native.js
@@ -9,15 +9,15 @@ import { View, useWindowDimensions } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit';
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
+import BottomSheet from '../mobile/bottom-sheet';
 
 const DEFAULT_FONT_SIZE = 16;
 
@@ -59,9 +59,15 @@ function FontSizePicker( {
 	const label = __( 'Font Size' );
 
 	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem' ],
+		availableUnits: [ 'px', 'em', 'rem', 'vw', 'vh' ],
 	} );
 
+	const accessibilityLabel = sprintf(
+		// translators: %s: Font size name e.g. Small
+		__( 'Font Size, %s' ),
+		selectedOption.name
+	);
+
 	return (
 		<BottomSheet.SubSheet
 			navigationButton={
@@ -71,18 +77,18 @@ function FontSizePicker( {
 					value={
 						selectedValue
 							? sprintf(
-									// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
-									__( '%1$s (%2$s)' ),
+									// translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
+									_x( '%1$s (%2$s)', 'font size' ),
 									selectedOption.name,
 									selectedPxValue
 							  )
 							: __( 'Default' )
 					}
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
-					accessibilityLabel={ selectedOption.name }
+					accessibilityRole="button"
+					accessibilityLabel={ accessibilityLabel }
 					accessibilityHint={ sprintf(
-						// translators: %s: Select control button label e.g. Small
+						// translators: %s: Select control button label e.g. "Button width"
 						__( 'Navigates to select %s' ),
 						selectedOption.name
 					) }
@@ -105,9 +111,9 @@ function FontSizePicker( {
 						separatorType="none"
 						label={ __( 'Default' ) }
 						onPress={ onChangeValue( undefined ) }
-						leftAlign={ true }
-						key={ 'default' }
-						accessibilityRole={ 'button' }
+						leftAlign
+						key="default"
+						accessibilityRole="button"
 						accessibilityLabel={ __( 'Selected: Default' ) }
 						accessibilityHint={ __(
 							'Double tap to select default font size'
@@ -131,13 +137,13 @@ function FontSizePicker( {
 								label={ item.name }
 								subLabel={ item.sizePx }
 								onPress={ onChangeValue( item.sizePx ) }
-								leftAlign={ true }
+								leftAlign
 								key={ index }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityLabel={
 									item.sizePx === selectedValue
 										? sprintf(
-												// translators: %s: Select font size option value e.g: "Selected: Large".
+												// translators: %s: The selected option.
 												__( 'Selected: %s' ),
 												item.name
 										  )
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 06a0b7fcf112f3..a47812640f1a29 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -6,7 +6,6 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
@@ -14,7 +13,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import { Button } from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -24,86 +23,88 @@ import {
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
-import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
 	Container,
+	Header,
 	HeaderHint,
 	HeaderLabel,
-	Controls,
-	ResetButton,
+	HeaderToggle,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+
+const MAX_TOGGLE_GROUP_SIZES = 5;
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
 ) => {
 	const {
-		/** Start opting into the new margin-free styles that will become the default in a future version. */
-		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
+		units: unitsProp = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
-			since: '6.1',
-			version: '6.4',
-			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-		} );
-	}
-
 	const units = useCustomUnits( {
-		availableUnits: [ 'px', 'em', 'rem' ],
+		availableUnits: unitsProp,
 	} );
 
-	const shouldUseSelectControl = fontSizes.length > 5;
 	const selectedFontSize = fontSizes.find(
 		( fontSize ) => fontSize.size === value
 	);
 	const isCustomValue = !! value && ! selectedFontSize;
 
-	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
-		! disableCustomFontSizes && isCustomValue
-	);
-
-	const headerHint = useMemo( () => {
-		if ( showCustomValueControl ) {
-			return __( 'Custom' );
-		}
+	// Initially request a custom picker if the value is not from the predef list.
+	const [ userRequestedCustom, setUserRequestedCustom ] =
+		useState( isCustomValue );
 
-		if ( ! shouldUseSelectControl ) {
-			if ( selectedFontSize ) {
-				return (
-					selectedFontSize.name ||
-					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-				);
-			}
-			return '';
-		}
+	let currentPickerType;
+	if ( ! disableCustomFontSizes && userRequestedCustom ) {
+		// While showing the custom value picker, switch back to predef only if
+		// `disableCustomFontSizes` is set to `true`.
+		currentPickerType = 'custom' as const;
+	} else {
+		currentPickerType =
+			fontSizes.length > MAX_TOGGLE_GROUP_SIZES
+				? ( 'select' as const )
+				: ( 'togglegroup' as const );
+	}
 
-		const commonUnit = getCommonSizeUnit( fontSizes );
-		if ( commonUnit ) {
-			return `(${ commonUnit })`;
+	const headerHint = useMemo( () => {
+		switch ( currentPickerType ) {
+			case 'custom':
+				return __( 'Custom' );
+			case 'togglegroup':
+				if ( selectedFontSize ) {
+					return (
+						selectedFontSize.name ||
+						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+					);
+				}
+				break;
+			case 'select':
+				const commonUnit = getCommonSizeUnit( fontSizes );
+				if ( commonUnit ) {
+					return `(${ commonUnit })`;
+				}
+				break;
 		}
 
 		return '';
-	}, [
-		showCustomValueControl,
-		shouldUseSelectControl,
-		selectedFontSize,
-		fontSizes,
-	] );
+	}, [ currentPickerType, selectedFontSize, fontSizes ] );
 
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
@@ -120,13 +121,20 @@ const UnforwardedFontSizePicker = (
 		units
 	);
 	const isValueUnitRelative =
-		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
+	const isDisabled = value === undefined;
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'FontSizePicker',
+		__next40pxDefaultSize,
+		size,
+	} );
 
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
-				<HStack className="components-font-size-picker__header">
+				<Header className="components-font-size-picker__header">
 					<HeaderLabel
 						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
 					>
@@ -138,61 +146,51 @@ const UnforwardedFontSizePicker = (
 						) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
-						<Button
+						<HeaderToggle
 							label={
-								showCustomValueControl
+								currentPickerType === 'custom'
 									? __( 'Use size preset' )
 									: __( 'Set custom size' )
 							}
 							icon={ settings }
-							onClick={ () => {
-								setShowCustomValueControl(
-									! showCustomValueControl
-								);
-							} }
-							isPressed={ showCustomValueControl }
-							isSmall
+							onClick={ () =>
+								setUserRequestedCustom( ! userRequestedCustom )
+							}
+							isPressed={ currentPickerType === 'custom' }
+							size="small"
 						/>
 					) }
-				</HStack>
+				</Header>
 			</Spacer>
-			<Controls
-				className="components-font-size-picker__controls"
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<FontSizePickerSelect
-							fontSizes={ fontSizes }
-							value={ value }
-							disableCustomFontSizes={ disableCustomFontSizes }
-							size={ size }
-							onChange={ ( newValue ) => {
-								if ( newValue === undefined ) {
-									onChange?.( undefined );
-								} else {
-									onChange?.(
-										hasUnits
-											? newValue
-											: Number( newValue ),
-										fontSizes.find(
-											( fontSize ) =>
-												fontSize.size === newValue
-										)
-									);
-								}
-							} }
-							onSelectCustom={ () =>
-								setShowCustomValueControl( true )
+			<div>
+				{ currentPickerType === 'select' && (
+					<FontSizePickerSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						fontSizes={ fontSizes }
+						value={ value }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						size={ size }
+						onChange={ ( newValue ) => {
+							if ( newValue === undefined ) {
+								onChange?.( undefined );
+							} else {
+								onChange?.(
+									hasUnits ? newValue : Number( newValue ),
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
+								);
 							}
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						} }
+						onSelectCustom={ () => setUserRequestedCustom( true ) }
+					/>
+				) }
+				{ currentPickerType === 'togglegroup' && (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
@@ -209,15 +207,19 @@ const UnforwardedFontSizePicker = (
 						} }
 					/>
 				) }
-				{ ! disableCustomFontSizes && showCustomValueControl && (
+				{ currentPickerType === 'custom' && (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
 								onChange={ ( newValue ) => {
+									setUserRequestedCustom( true );
+
 									if ( newValue === undefined ) {
 										onChange?.( undefined );
 									} else {
@@ -237,9 +239,11 @@ const UnforwardedFontSizePicker = (
 							<FlexItem isBlock>
 								<Spacer marginX={ 2 } marginBottom={ 0 }>
 									<RangeControl
-										__nextHasNoMarginBottom={
-											__nextHasNoMarginBottom
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize={
+											__next40pxDefaultSize
 										}
+										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
@@ -247,6 +251,8 @@ const UnforwardedFontSizePicker = (
 										initialPosition={ fallbackFontSize }
 										withInputField={ false }
 										onChange={ ( newValue ) => {
+											setUserRequestedCustom( true );
+
 											if ( newValue === undefined ) {
 												onChange?.( undefined );
 											} else if ( hasUnits ) {
@@ -267,22 +273,28 @@ const UnforwardedFontSizePicker = (
 						) }
 						{ withReset && (
 							<FlexItem>
-								<ResetButton
-									disabled={ value === undefined }
+								<Button
+									disabled={ isDisabled }
+									accessibleWhenDisabled
 									onClick={ () => {
 										onChange?.( undefined );
 									} }
-									isSmall
 									variant="secondary"
-									size={ size }
+									__next40pxDefaultSize
+									size={
+										size === '__unstable-large' ||
+										props.__next40pxDefaultSize
+											? 'default'
+											: 'small'
+									}
 								>
 									{ __( 'Reset' ) }
-								</ResetButton>
+								</Button>
 							</FlexItem>
 						) }
 					</Flex>
 				) }
-			</Controls>
+			</div>
 		</Container>
 	);
 };
diff --git a/packages/components/src/font-size-picker/stories/e2e/index.story.tsx b/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
new file mode 100644
index 00000000000000..cee44efcac8b34
--- /dev/null
+++ b/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../..';
+
+export default {
+	title: 'Components/FontSizePicker',
+	component: FontSizePicker,
+};
+
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
+	value,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ setFontSize }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
+Default.args = {
+	fontSizes: [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	],
+	value: 16,
+};
diff --git a/packages/components/src/font-size-picker/stories/e2e/index.tsx b/packages/components/src/font-size-picker/stories/e2e/index.tsx
deleted file mode 100644
index c2a038e656b55e..00000000000000
--- a/packages/components/src/font-size-picker/stories/e2e/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FontSizePicker from '../..';
-
-export default {
-	title: 'Components/FontSizePicker',
-	component: FontSizePicker,
-};
-
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
-	value,
-	...props
-} ) => {
-	const [ fontSize, setFontSize ] = useState( value );
-	return (
-		<FontSizePicker
-			{ ...props }
-			value={ fontSize }
-			onChange={ setFontSize }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-Default.args = {
-	fontSizes: [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	],
-	value: 16,
-};
diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..f6502fcfd537c8
--- /dev/null
+++ b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -0,0 +1,210 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePicker from '../';
+
+const meta: Meta< typeof FontSizePicker > = {
+	title: 'Components/FontSizePicker',
+	component: FontSizePicker,
+	argTypes: {
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
+	value,
+	onChange,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ ( nextValue ) => {
+				setFontSize( nextValue );
+				onChange?.( nextValue );
+			} }
+		/>
+	);
+};
+
+const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
+	fontSizes,
+	...props
+} ) => {
+	return (
+		<>
+			<h2>Fewer font sizes</h2>
+			<FontSizePickerWithState
+				{ ...props }
+				fontSizes={ fontSizes?.slice( 0, 4 ) }
+			/>
+
+			<h2>More font sizes</h2>
+			<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
+		</>
+	);
+};
+
+export const Default: StoryFn< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
+Default.args = {
+	__next40pxDefaultSize: true,
+	disableCustomFontSizes: false,
+	fontSizes: [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+	],
+	value: 16,
+	withSlider: false,
+};
+
+export const WithSlider: StoryFn< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	fallbackFontSize: 16,
+	value: undefined,
+	withSlider: true,
+};
+
+/**
+ * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
+ * only be able to pick one of the predefined sizes passed in `fontSizes`.
+ */
+export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
+WithCustomSizesDisabled.args = {
+	...Default.args,
+	disableCustomFontSizes: true,
+};
+
+/**
+ * When there are more than 5 font size options, the UI is no longer a toggle group.
+ */
+export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
+WithMoreFontSizes.args = {
+	...Default.args,
+	fontSizes: [
+		{
+			name: 'Tiny',
+			slug: 'tiny',
+			size: 8,
+		},
+		{
+			name: 'Small',
+			slug: 'small',
+			size: 12,
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: 16,
+		},
+		{
+			name: 'Big',
+			slug: 'big',
+			size: 26,
+		},
+		{
+			name: 'Bigger',
+			slug: 'bigger',
+			size: 30,
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: 36,
+		},
+	],
+	value: 8,
+};
+
+/**
+ * When units like `px` are specified explicitly, it will be shown as a label hint.
+ */
+export const WithUnits: StoryFn< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
+WithUnits.args = {
+	...WithMoreFontSizes.args,
+	fontSizes: WithMoreFontSizes.args.fontSizes?.map( ( option ) => ( {
+		...option,
+		size: `${ option.size }px`,
+	} ) ),
+	value: '8px',
+};
+
+/**
+ * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
+ * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
+ */
+export const WithComplexCSSValues: StoryFn< typeof FontSizePicker > =
+	TwoFontSizePickersWithState.bind( {} );
+WithComplexCSSValues.args = {
+	...Default.args,
+	fontSizes: [
+		{
+			name: 'Small',
+			slug: 'small',
+			// Adding just one complex css value is enough
+			size: 'clamp(1.75rem, 3vw, 2.25rem)',
+		},
+		{
+			name: 'Medium',
+			slug: 'medium',
+			size: '1.125rem',
+		},
+		{
+			name: 'Large',
+			slug: 'large',
+			size: '1.7rem',
+		},
+		{
+			name: 'Extra Large',
+			slug: 'extra-large',
+			size: '1.95rem',
+		},
+		{
+			name: 'Extra Extra Large',
+			slug: 'extra-extra-large',
+			size: '2.5rem',
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: '2.8rem',
+		},
+	],
+	value: '1.125rem',
+};
diff --git a/packages/components/src/font-size-picker/stories/index.tsx b/packages/components/src/font-size-picker/stories/index.tsx
deleted file mode 100644
index 894a619e036868..00000000000000
--- a/packages/components/src/font-size-picker/stories/index.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FontSizePicker from '../';
-
-const meta: ComponentMeta< typeof FontSizePicker > = {
-	title: 'Components/FontSizePicker',
-	component: FontSizePicker,
-	argTypes: {
-		value: { control: { type: null } },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
-	value,
-	onChange,
-	...props
-} ) => {
-	const [ fontSize, setFontSize ] = useState( value );
-	return (
-		<FontSizePicker
-			{ ...props }
-			value={ fontSize }
-			onChange={ ( nextValue ) => {
-				setFontSize( nextValue );
-				onChange?.( nextValue );
-			} }
-		/>
-	);
-};
-
-const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
-	fontSizes,
-	...props
-} ) => {
-	return (
-		<>
-			<h2>Fewer font sizes</h2>
-			<FontSizePickerWithState
-				{ ...props }
-				fontSizes={ fontSizes?.slice( 0, 4 ) }
-			/>
-
-			<h2>More font sizes</h2>
-			<FontSizePickerWithState { ...props } fontSizes={ fontSizes } />
-		</>
-	);
-};
-
-export const Default: ComponentStory< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMarginBottom: true,
-	disableCustomFontSizes: false,
-	fontSizes: [
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-	],
-	value: 16,
-	withSlider: false,
-};
-
-export const WithSlider: ComponentStory< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithSlider.args = {
-	...Default.args,
-	fallbackFontSize: 16,
-	value: undefined,
-	withSlider: true,
-};
-
-/**
- * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
- * only be able to pick one of the predefined sizes passed in `fontSizes`.
- */
-export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithCustomSizesDisabled.args = {
-	...Default.args,
-	disableCustomFontSizes: true,
-};
-
-/**
- * When there are more than 5 font size options, the UI is no longer a toggle group.
- */
-export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
-	FontSizePickerWithState.bind( {} );
-WithMoreFontSizes.args = {
-	...Default.args,
-	fontSizes: [
-		{
-			name: 'Tiny',
-			slug: 'tiny',
-			size: 8,
-		},
-		{
-			name: 'Small',
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: 'Normal',
-			slug: 'normal',
-			size: 16,
-		},
-		{
-			name: 'Big',
-			slug: 'big',
-			size: 26,
-		},
-		{
-			name: 'Bigger',
-			slug: 'bigger',
-			size: 30,
-		},
-		{
-			name: 'Huge',
-			slug: 'huge',
-			size: 36,
-		},
-	],
-	value: 8,
-};
-
-/**
- * When units like `px` are specified explicitly, it will be shown as a label hint.
- */
-export const WithUnits: ComponentStory< typeof FontSizePicker > =
-	TwoFontSizePickersWithState.bind( {} );
-WithUnits.args = {
-	...WithMoreFontSizes.args,
-	fontSizes: WithMoreFontSizes.args.fontSizes?.map( ( option ) => ( {
-		...option,
-		size: `${ option.size }px`,
-	} ) ),
-	value: '8px',
-};
-
-/**
- * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
- * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
- */
-export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
-	TwoFontSizePickersWithState.bind( {} );
-WithComplexCSSValues.args = {
-	...Default.args,
-	fontSizes: [
-		{
-			name: 'Small',
-			slug: 'small',
-			// Adding just one complex css value is enough
-			size: 'clamp(1.75rem, 3vw, 2.25rem)',
-		},
-		{
-			name: 'Medium',
-			slug: 'medium',
-			size: '1.125rem',
-		},
-		{
-			name: 'Large',
-			slug: 'large',
-			size: '1.7rem',
-		},
-		{
-			name: 'Extra Large',
-			slug: 'extra-large',
-			size: '1.95rem',
-		},
-		{
-			name: 'Extra Extra Large',
-			slug: 'extra-extra-large',
-			size: '2.5rem',
-		},
-		{
-			name: 'Huge',
-			slug: 'huge',
-			size: '2.8rem',
-		},
-	],
-	value: '1.125rem',
-};
diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
index 643db817442838..f47ca41b51eb71 100644
--- a/packages/components/src/font-size-picker/styles.ts
+++ b/packages/components/src/font-size-picker/styles.ts
@@ -8,9 +8,9 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
-import { space } from '../ui/utils/space';
+import { HStack } from '../h-stack';
+import { space } from '../utils/space';
 import { COLORS } from '../utils';
-import type { FontSizePickerProps } from './types';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -18,6 +18,14 @@ export const Container = styled.fieldset`
 	padding: 0;
 `;
 
+export const Header = styled( HStack )`
+	height: ${ space( 4 ) };
+`;
+
+export const HeaderToggle = styled( Button )`
+	margin-top: ${ space( -1 ) };
+`;
+
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	display: flex;
 	gap: ${ space( 1 ) };
@@ -28,19 +36,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
 `;
-
-export const Controls = styled.div< {
-	__nextHasNoMarginBottom: boolean;
-} >`
-	${ ( props ) =>
-		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
-`;
-
-export const ResetButton = styled( Button )< {
-	size: FontSizePickerProps[ 'size' ];
-} >`
-	&&& {
-		height: ${ ( props ) =>
-			props.size === '__unstable-large' ? '40px' : '30px' };
-	}
-`;
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 3ac59bc2df1cb1..34e8ce17c67fa6 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -1,14 +1,42 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
 
 /**
  * Internal dependencies
  */
-import FontSizePicker from '../';
+import _FontSizePicker from '../';
 import type { FontSize } from '../types';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const FontSizePicker = (
+	props: React.ComponentProps< typeof _FontSizePicker >
+) => <_FontSizePicker __next40pxDefaultSize { ...props } />;
+
+const ControlledFontSizePicker = ( {
+	onChange,
+	...props
+}: React.ComponentProps< typeof FontSizePicker > ) => {
+	const [ fontSize, setFontSize ] =
+		useState< typeof props.value >( undefined );
+
+	return (
+		<FontSizePicker
+			{ ...props }
+			value={ fontSize }
+			onChange={ ( newFontSize ) => {
+				setFontSize( newFontSize );
+				onChange?.( newFontSize );
+			} }
+		/>
+	);
+};
 
 describe( 'FontSizePicker', () => {
 	test.each( [
@@ -19,16 +47,10 @@ describe( 'FontSizePicker', () => {
 	] )(
 		'should call onChange( $expectedValue ) after user types 80 when value is $value',
 		async ( { value, expectedValue } ) => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					value={ value }
-					onChange={ onChange }
-				/>
+			await render(
+				<FontSizePicker value={ value } onChange={ onChange } />
 			);
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
@@ -46,13 +68,10 @@ describe( 'FontSizePicker', () => {
 	] )(
 		'should call onChange( $expectedValue ) after user types 80 when first font size is $firstFontSize',
 		async ( { firstFontSize, expectedValue } ) => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
 				/>
@@ -102,17 +121,10 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a select control', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			const user = userEvent.setup();
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 8 );
@@ -132,17 +144,11 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( { value, expectedLabel } ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -160,20 +166,17 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedArguments ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
 					/>
 				);
 				await user.click(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				);
 				await user.click(
 					screen.getByRole( 'option', { name: option } )
@@ -222,17 +225,10 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a select control', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			const user = userEvent.setup();
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 8 );
@@ -252,16 +248,12 @@ describe( 'FontSizePicker', () => {
 			{ value: '8px', option: 'Tiny' },
 		] )(
 			'defaults to $option when value is $value',
-			( { value, option } ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( { value, option } ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				).toHaveTextContent( option );
 			}
 		);
@@ -275,17 +267,11 @@ describe( 'FontSizePicker', () => {
 			{ value: '3px', expectedLabel: 'Size Custom' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( { value, expectedLabel } ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -321,20 +307,17 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedValue ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
 					/>
 				);
 				await user.click(
-					screen.getByRole( 'button', { name: 'Font size' } )
+					screen.getByRole( 'combobox', { name: 'Font size' } )
 				);
 				await user.click(
 					screen.getByRole( 'option', { name: option } )
@@ -377,13 +360,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -404,31 +382,19 @@ describe( 'FontSizePicker', () => {
 			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( { value, expectedLabel } ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
 		it( 'calls onChange when a font size is selected', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
 			expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -463,13 +429,8 @@ describe( 'FontSizePicker', () => {
 			},
 		];
 
-		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+		it( 'displays a toggle group control with t-shirt sizes', async () => {
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -493,17 +454,11 @@ describe( 'FontSizePicker', () => {
 			},
 		] )(
 			'displays $expectedLabel as label when value is $value',
-			( { value, expectedLabel } ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( { value, expectedLabel } ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect(
-					screen.getByLabelText( expectedLabel )
-				).toBeInTheDocument();
+				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
 			}
 		);
 
@@ -521,13 +476,10 @@ describe( 'FontSizePicker', () => {
 		] )(
 			'calls onChange( $expectedArguments ) when $radio is selected',
 			async ( { radio, expectedArguments } ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
-				render(
+				await render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						onChange={ onChange }
 					/>
@@ -545,10 +497,9 @@ describe( 'FontSizePicker', () => {
 	} );
 
 	function commonToggleGroupTests( fontSizes: FontSize[] ) {
-		it( 'defaults to M when value is 16px', () => {
-			render(
+		it( 'defaults to M when value is 16px', async () => {
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 				/>
@@ -560,15 +511,11 @@ describe( 'FontSizePicker', () => {
 
 		test.each( [ undefined, '' ] )(
 			'has no selection when value is %p',
-			( value ) => {
-				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+			async ( value ) => {
+				await render(
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
-				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
+				expect( screen.getByRole( 'radiogroup' ) ).toBeVisible();
 				expect(
 					screen.queryByRole( 'radio', { checked: true } )
 				).not.toBeInTheDocument();
@@ -578,52 +525,69 @@ describe( 'FontSizePicker', () => {
 
 	function commonSelectTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when Custom is selected', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
-				screen.getByRole( 'button', { name: 'Font size' } )
+				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			await user.click(
 				screen.getByRole( 'option', { name: 'Custom' } )
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
 			expect( onChange ).not.toHaveBeenCalled();
 		} );
 	}
 
 	function commonTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when value is unknown', () => {
-			render(
+		it( 'shows custom input when value is unknown', async () => {
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+		} );
+
+		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
+			const { rerender } = await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+
+			rerender(
 				<FontSizePicker
-					__nextHasNoMarginBottom
+					disableCustomFontSizes
 					fontSizes={ fontSizes }
 					value="3px"
 				/>
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+			expect(
+				screen.queryByLabelText( 'Custom' )
+			).not.toBeInTheDocument();
 		} );
 
-		it( 'allows custom values by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onChange = jest.fn();
-			render(
+		it( "doesn't hide custom input when the selected font size is a predef", async () => {
+			const { rerender } = await render(
+				<FontSizePicker fontSizes={ fontSizes } value="3px" />
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+
+			rerender(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
-					onChange={ onChange }
+					value={ fontSizes[ 0 ].size }
 				/>
 			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+		} );
+
+		it( 'allows custom values by default', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
+			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -632,10 +596,31 @@ describe( 'FontSizePicker', () => {
 			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
 
-		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
-			render(
+		it( 'allows switching between custom and predef inputs when pressing the dedicated toggle', async () => {
+			const user = userEvent.setup();
+
+			await render(
+				<ControlledFontSizePicker fontSizes={ fontSizes } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+
+			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Use size preset' } )
+			);
+
+			expect(
+				screen.queryByLabelText( 'Custom' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'does not allow custom values when disableCustomFontSizes is set', async () => {
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
 				/>
@@ -646,15 +631,8 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'does not display a slider by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			const user = userEvent.setup();
+			await render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -664,13 +642,10 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'allows a slider to be used when withSlider is set', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					withSlider
 					onChange={ onChange }
@@ -688,13 +663,10 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'allows reset by default', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					onChange={ onChange }
@@ -709,12 +681,9 @@ describe( 'FontSizePicker', () => {
 		} );
 
 		it( 'does not allow reset when withReset is false', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			render(
+			const user = userEvent.setup();
+			await render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					withReset={ false }
@@ -727,5 +696,27 @@ describe( 'FontSizePicker', () => {
 				screen.queryByRole( 'button', { name: 'Reset' } )
 			).not.toBeInTheDocument();
 		} );
+
+		it( 'applies custom units to custom font size control', async () => {
+			const user = userEvent.setup();
+
+			await render(
+				<FontSizePicker
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+					units={ [ 'px', 'ch', 'ex' ] }
+				/>
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+
+			const units = screen.getAllByRole( 'option' );
+			expect( units ).toHaveLength( 3 );
+			expect( units[ 0 ] ).toHaveAccessibleName( 'px' );
+			expect( units[ 1 ] ).toHaveAccessibleName( 'ch' );
+			expect( units[ 2 ] ).toHaveAccessibleName( 'ex' );
+		} );
 	}
 } );
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 24c66efe1bee28..2296e968567882 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -26,13 +26,20 @@ export type FontSizePickerProps = {
 		value: number | string | undefined,
 		selectedItem?: FontSize
 	) => void;
+	/**
+	 * Available units for custom font size selection.
+	 *
+	 * @default [ 'px', 'em', 'rem', 'vw', 'vh' ]
+	 */
+	units?: string[];
 	/**
 	 * The current font size value.
 	 */
 	value?: number | string;
 	/**
-	 * If `true`, the UI will contain a slider, instead of a numeric text input
-	 * field. If `false`, no slider will be present.
+	 * If `true`, a slider will be displayed alongside the input field when a
+	 * custom font size is active. Has no effect when `disableCustomFontSizes`
+	 * is `true`.
 	 *
 	 * @default false
 	 */
@@ -40,7 +47,7 @@ export type FontSizePickerProps = {
 	/**
 	 * If `true`, a reset button will be displayed alongside the input field
 	 * when a custom font size is active. Has no effect when
-	 * `disableCustomFontSizes` or `withSlider` is `true`.
+	 * `disableCustomFontSizes` is `true`.
 	 *
 	 * @default true
 	 */
@@ -51,8 +58,16 @@ export type FontSizePickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Size of the control.
 	 *
@@ -89,18 +104,19 @@ export type FontSizePickerSelectProps = Pick<
 	>;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
+	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
 	key: string;
 	name: string;
 	value?: FontSize[ 'size' ];
-	__experimentalHint?: string;
+	hint?: string;
 };
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom'
+	'value' | 'size' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
index d7e426230329e0..64816f12255bac 100644
--- a/packages/components/src/font-size-picker/utils.ts
+++ b/packages/components/src/font-size-picker/utils.ts
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
@@ -13,13 +8,14 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control';
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
  *
- * @param  value The value that is checked.
+ * @param value The value that is checked.
  * @return Whether the value is a simple css value.
  */
 export function isSimpleCssValue(
 	value: NonNullable< FontSizePickerProps[ 'value' ] >
 ) {
-	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
 
@@ -27,7 +23,7 @@ export function isSimpleCssValue(
  * If all of the given font sizes have the same unit (e.g. 'px'), return that
  * unit. Otherwise return null.
  *
- * @param  fontSizes List of font sizes.
+ * @param fontSizes List of font sizes.
  * @return The common unit, or null.
  */
 export function getCommonSizeUnit( fontSizes: FontSize[] ) {
diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index 38dd50dd039155..c6a7205815de53 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -1,87 +1,105 @@
 # FormFileUpload
 
-FormFileUpload is a component that allows users to select files from their local device.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-formfileupload--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
+
+FormFileUpload allows users to select files from their local device.
 
 ```jsx
 import { FormFileUpload } from '@wordpress/components';
 
 const MyFormFileUpload = () => (
-	<FormFileUpload
-		accept="image/*"
-		onChange={ ( event ) => console.log( event.currentTarget.files ) }
-	>
-		Upload
-	</FormFileUpload>
+  <FormFileUpload
+    __next40pxDefaultSize
+    accept="image/*"
+    onChange={ ( event ) => console.log( event.currentTarget.files ) }
+  >
+    Upload
+  </FormFileUpload>
 );
 ```
-
 ## Props
 
-The component accepts the following props. Props not included in this set will be passed to the `Button` component.
+### `__next40pxDefaultSize`
+
+Start opting into the larger default height that will become the default size in a future version.
 
-### accept
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-A string passed to `input` element that tells the browser which file types can be upload to the upload by the user use. e.g: `image/*,video/*`.
-More information about this string is available in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers.
+### `accept`
 
--   Type: `String`
--   Required: No
+A string passed to the `input` element that tells the browser which
+[file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers)
+can be uploaded by the user. e.g: `image/*,video/*`.
 
-### children
+ - Type: `string`
+ - Required: No
+
+### `children`
 
 Children are passed as children of `Button`.
 
--   Type: `Boolean`
--   Required: No
+ - Type: `ReactNode`
+ - Required: No
+
+### `icon`
 
-### icon
+The icon to render in the default button.
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+See the `Icon` component docs for more information.
 
--   Type: `String|Function|WPComponent|null`
--   Required: No
--   Default: `null`
+ - Type: `IconType`
+ - Required: No
 
-### multiple
+### `multiple`
 
 Whether to allow multiple selection of files or not.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### onChange
+### `onChange`
 
 Callback function passed directly to the `input` file element.
 
 Select files will be available in `event.currentTarget.files`.
 
--   Type: `Function`
--   Required: Yes
+ - Type: `ChangeEventHandler<HTMLInputElement>`
+ - Required: Yes
 
-### onClick
+### `onClick`
 
 Callback function passed directly to the `input` file element.
 
-This can be useful when you want to force a `change` event to fire when the user chooses the same file again. To do this, set the target value to an empty string in the `onClick` function.
+This can be useful when you want to force a `change` event to fire when
+the user chooses the same file again. To do this, set the target value to
+an empty string in the `onClick` function.
 
 ```jsx
 <FormFileUpload
-	onClick={ ( event ) => ( event.target.value = '' ) }
-	onChange={ onChange }
+  __next40pxDefaultSize
+  onClick={ ( event ) => ( event.target.value = '' ) }
+  onChange={ onChange }
 >
-	Upload
+  Upload
 </FormFileUpload>
 ```
 
--   Type: `Function`
--   Required: No
+ - Type: `MouseEventHandler<HTMLInputElement>`
+ - Required: No
+
+### `render`
 
-### render
+Optional callback function used to render the UI.
 
-Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
+If passed, the component does not render the default UI (a button) and
+calls this function to render it. The function receives an object with
+property `openFileDialog`, a function that, when called, opens the browser
+native file upload modal window.
 
--   Type: `Function`
--   Required: No
+ - Type: `(arg: { openFileDialog: () => void; }) => ReactNode`
+ - Required: No
diff --git a/packages/components/src/form-file-upload/docs-manifest.json b/packages/components/src/form-file-upload/docs-manifest.json
new file mode 100644
index 00000000000000..cb000536d73562
--- /dev/null
+++ b/packages/components/src/form-file-upload/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "FormFileUpload",
+	"filePath": "./index.tsx"
+}
diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
index 608fdf837300f4..378dc144c6fe8c 100644
--- a/packages/components/src/form-file-upload/index.tsx
+++ b/packages/components/src/form-file-upload/index.tsx
@@ -7,17 +7,19 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../button';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { FormFileUploadProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 /**
- * FormFileUpload is a component that allows users to select files from their local device.
+ * FormFileUpload allows users to select files from their local device.
  *
  * ```jsx
  * import { FormFileUpload } from '@wordpress/components';
  *
  * const MyFormFileUpload = () => (
  *   <FormFileUpload
+ *     __next40pxDefaultSize
  *     accept="image/*"
  *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
  *   >
@@ -40,6 +42,15 @@ export function FormFileUpload( {
 		ref.current?.click();
 	};
 
+	if ( ! render ) {
+		maybeWarnDeprecated36pxSize( {
+			componentName: 'FormFileUpload',
+			__next40pxDefaultSize: props.__next40pxDefaultSize,
+			// @ts-expect-error - We don't "officially" support all Button props but this likely happens.
+			size: props.size,
+		} );
+	}
+
 	const ui = render ? (
 		render( { openFileDialog } )
 	) : (
@@ -47,6 +58,18 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
+	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
+	// This can be removed once the Chromium fix is in the stable channel.
+	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+	const isSafari =
+		globalThis.window?.navigator.userAgent.includes( 'Safari' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&
+		! globalThis.window?.navigator.userAgent.includes( 'Chromium' );
+	const compatAccept =
+		! isSafari && !! accept?.includes( 'image/*' )
+			? `${ accept }, image/heic, image/heif`
+			: accept;
 
 	return (
 		<div className="components-form-file-upload">
@@ -56,7 +79,7 @@ export function FormFileUpload( {
 				ref={ ref }
 				multiple={ multiple }
 				style={ { display: 'none' } }
-				accept={ accept }
+				accept={ compatAccept }
 				onChange={ onChange }
 				onClick={ onClick }
 				data-testid="form-file-upload-input"
diff --git a/packages/components/src/form-file-upload/stories/index.story.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx
new file mode 100644
index 00000000000000..cec182346c0a72
--- /dev/null
+++ b/packages/components/src/form-file-upload/stories/index.story.tsx
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { upload as uploadIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FormFileUpload from '..';
+
+const meta: Meta< typeof FormFileUpload > = {
+	title: 'Components/Selection & Input/File Upload/FormFileUpload',
+	id: 'components-formfileupload',
+	component: FormFileUpload,
+	argTypes: {
+		icon: { control: false },
+		onChange: { action: 'onChange', control: false },
+		onClick: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
+	return <FormFileUpload { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Select file',
+	__next40pxDefaultSize: true,
+};
+
+export const RestrictFileTypes = Template.bind( {} );
+RestrictFileTypes.args = {
+	...Default.args,
+	accept: 'image/*',
+	children: 'Select image',
+};
+
+export const AllowMultipleFiles = Template.bind( {} );
+AllowMultipleFiles.args = {
+	...Default.args,
+	children: 'Select files',
+	multiple: true,
+};
+
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: 'Upload',
+	icon: uploadIcon,
+};
+
+/**
+ * Render a custom trigger button by passing a render function to the `render` prop.
+ *
+ * ```jsx
+ * ( { openFileDialog } ) => <button onClick={ openFileDialog }>Custom Upload Button</button>
+ * ```
+ */
+export const WithCustomRender = Template.bind( {} );
+WithCustomRender.args = {
+	...Default.args,
+	render: ( { openFileDialog } ) => (
+		<button onClick={ openFileDialog }>Custom Upload Button</button>
+	),
+};
diff --git a/packages/components/src/form-file-upload/stories/index.tsx b/packages/components/src/form-file-upload/stories/index.tsx
deleted file mode 100644
index dfdaf0fb14d88a..00000000000000
--- a/packages/components/src/form-file-upload/stories/index.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { upload as uploadIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import FormFileUpload from '..';
-
-const meta: ComponentMeta< typeof FormFileUpload > = {
-	title: 'Components/FormFileUpload',
-	component: FormFileUpload,
-	argTypes: {
-		icon: { control: { type: null } },
-		onChange: { action: 'onChange', control: { type: null } },
-		onClick: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof FormFileUpload > = ( props ) => {
-	return <FormFileUpload { ...props } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	children: 'Select file',
-};
-
-export const RestrictFileTypes = Template.bind( {} );
-RestrictFileTypes.args = {
-	...Default.args,
-	accept: 'image/*',
-	children: 'Select image',
-};
-
-export const AllowMultipleFiles = Template.bind( {} );
-AllowMultipleFiles.args = {
-	...Default.args,
-	children: 'Select files',
-	multiple: true,
-};
-
-export const WithIcon = Template.bind( {} );
-WithIcon.args = {
-	...Default.args,
-	children: 'Upload',
-	icon: uploadIcon,
-};
-
-/**
- * Render a custom trigger button by passing a render function to the `render` prop.
- *
- * ```jsx
- * ( { openFileDialog } ) => <button onClick={ openFileDialog }>Custom Upload Button</button>
- * ```
- */
-export const WithCustomRender = Template.bind( {} );
-WithCustomRender.args = {
-	...Default.args,
-	render: ( { openFileDialog } ) => (
-		<button onClick={ openFileDialog }>Custom Upload Button</button>
-	),
-};
diff --git a/packages/components/src/form-file-upload/test/index.tsx b/packages/components/src/form-file-upload/test/index.tsx
index cad69766aa8c2b..b82dcd754bcd20 100644
--- a/packages/components/src/form-file-upload/test/index.tsx
+++ b/packages/components/src/form-file-upload/test/index.tsx
@@ -7,13 +7,17 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import FormFileUpload from '..';
+import _FormFileUpload from '..';
 
 /**
  * Browser dependencies
  */
 const { File } = window;
 
+const FormFileUpload = (
+	props: React.ComponentProps< typeof _FormFileUpload >
+) => <_FormFileUpload __next40pxDefaultSize { ...props } />;
+
 // @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( {
@@ -22,15 +26,6 @@ const fakePath = expect.objectContaining( {
 } );
 
 describe( 'FormFileUpload', () => {
-	beforeEach( () => {
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	it( 'should show an Icon Button and a hidden input', () => {
 		render(
 			<FormFileUpload onChange={ () => {} }>
@@ -45,9 +40,7 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 
@@ -72,9 +65,7 @@ describe( 'FormFileUpload', () => {
 	} );
 
 	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 
diff --git a/packages/components/src/form-file-upload/types.ts b/packages/components/src/form-file-upload/types.ts
index 5b9054fa869eea..3bdbbf5ac2d4c0 100644
--- a/packages/components/src/form-file-upload/types.ts
+++ b/packages/components/src/form-file-upload/types.ts
@@ -11,10 +11,15 @@ import type Icon from '../icon';
 // TODO: Replace `children` and `icon` types with props from Button once Button is typed.
 export type FormFileUploadProps = {
 	/**
-	 * A string passed to `input` element that tells the browser which file types can be
-	 * upload to the upload by the user use. e.g: `image/*,video/*`.
+	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers.
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * A string passed to the `input` element that tells the browser which
+	 * [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers)
+	 * can be uploaded by the user. e.g: `image/*,video/*`.
 	 */
 	accept?: InputHTMLAttributes< HTMLInputElement >[ 'accept' ];
 	/**
@@ -22,7 +27,9 @@ export type FormFileUploadProps = {
 	 */
 	children?: ReactNode;
 	/**
-	 * The icon to render in the `Button`.
+	 * The icon to render in the default button.
+	 *
+	 * See the `Icon` component docs for more information.
 	 */
 	icon?: ComponentProps< typeof Icon >[ 'icon' ];
 	/**
@@ -44,10 +51,11 @@ export type FormFileUploadProps = {
 	 *
 	 * ```jsx
 	 * <FormFileUpload
-	 * 	onClick={ ( event ) => ( event.target.value = '' ) }
-	 * 	onChange={ onChange }
+	 *   __next40pxDefaultSize
+	 *   onClick={ ( event ) => ( event.target.value = '' ) }
+	 *   onChange={ onChange }
 	 * >
-	 * 	Upload
+	 *   Upload
 	 * </FormFileUpload>
 	 * ```
 	 */
diff --git a/packages/components/src/form-toggle/README.md b/packages/components/src/form-toggle/README.md
index 941e431654e50b..ba5fbf3cb16007 100644
--- a/packages/components/src/form-toggle/README.md
+++ b/packages/components/src/form-toggle/README.md
@@ -4,12 +4,6 @@ FormToggle switches a single setting on or off.
 
 ![On and off FormToggles. The top toggle is on, while the bottom toggle is off.](https://wordpress.org/gutenberg/files/2019/01/Toggle.jpg)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -54,8 +48,8 @@ When a user switches a toggle, its corresponding action takes effect immediately
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormToggle } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index e7ee1ae0bebdee..8a90fe4561bff4 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -1,37 +1,25 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { FormToggleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- *   const [ isChecked, setChecked ] = useState( true );
- *
- *   return (
- *     <FormToggle
- *       checked={ isChecked }
- *       onChange={ () => setChecked( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function FormToggle(
-	props: WordPressComponentProps< FormToggleProps, 'input', false >
+function UnforwardedFormToggle(
+	props: WordPressComponentProps< FormToggleProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		className,
@@ -41,7 +29,7 @@ export function FormToggle(
 		onChange = noop,
 		...additionalProps
 	} = props;
-	const wrapperClasses = classnames( 'components-form-toggle', className, {
+	const wrapperClasses = clsx( 'components-form-toggle', className, {
 		'is-checked': checked,
 		'is-disabled': disabled,
 	} );
@@ -56,6 +44,7 @@ export function FormToggle(
 				onChange={ onChange }
 				disabled={ disabled }
 				{ ...additionalProps }
+				ref={ ref }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
@@ -63,4 +52,25 @@ export function FormToggle(
 	);
 }
 
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const FormToggle = forwardRef( UnforwardedFormToggle );
+
 export default FormToggle;
diff --git a/packages/components/src/form-toggle/stories/index.story.tsx b/packages/components/src/form-toggle/stories/index.story.tsx
new file mode 100644
index 00000000000000..d987860955bdf9
--- /dev/null
+++ b/packages/components/src/form-toggle/stories/index.story.tsx
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle from '..';
+
+const meta: Meta< typeof FormToggle > = {
+	component: FormToggle,
+	title: 'Components/FormToggle',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof FormToggle > = ( { onChange, ...args } ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<FormToggle
+			{ ...args }
+			checked={ isChecked }
+			onChange={ ( e ) => {
+				setChecked( ( state ) => ! state );
+				onChange( e );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof FormToggle > = Template.bind( {} );
+Default.args = {};
diff --git a/packages/components/src/form-toggle/stories/index.tsx b/packages/components/src/form-toggle/stories/index.tsx
deleted file mode 100644
index eba2bf4c8580c8..00000000000000
--- a/packages/components/src/form-toggle/stories/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { FormToggle } from '..';
-
-const meta: ComponentMeta< typeof FormToggle > = {
-	component: FormToggle,
-	title: 'Components/FormToggle',
-	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof FormToggle > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ isChecked, setChecked ] = useState( true );
-
-	return (
-		<FormToggle
-			{ ...args }
-			checked={ isChecked }
-			onChange={ ( e ) => {
-				setChecked( ( state ) => ! state );
-				onChange( e );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
-Default.args = {};
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index b91fc18dd3a6b5..900874b59004b8 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -1,54 +1,84 @@
-$toggle-width: 36px;
-$toggle-height: 18px;
+@use "sass:math";
+
+$toggle-width: $grid-unit-40;
+$toggle-height: $grid-unit-20;
 $toggle-border-width: 1px;
+$toggle-thumb-size:  $grid-unit-15;
+
+$transition-duration: 0.2s;
 
 .components-form-toggle {
 	position: relative;
 	display: inline-block;
+	height: $toggle-height;
 
 	// Unchecked state.
 	.components-form-toggle__track {
+		position: relative;
 		content: "";
 		display: inline-block;
 		box-sizing: border-box;
 		vertical-align: top;
 		background-color: $white;
-		border: $toggle-border-width solid $gray-900;
+		border: $toggle-border-width solid $gray-600;
 		width: $toggle-width;
 		height: $toggle-height;
-		border-radius: $toggle-height * 0.5;
-		transition: 0.2s background ease;
+		border-radius: math.div($toggle-height, 2);
+		transition:
+			$transition-duration background-color ease,
+			$transition-duration border-color ease;
 		@include reduce-motion("transition");
+		overflow: hidden;
+
+		// Windows High Contrast Mode
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			box-sizing: border-box;
+			// Expand the border to fake a solid in Windows High Contrast Mode.
+			border-top: #{ $toggle-height } solid transparent;
+
+			transition: $transition-duration opacity ease;
+			@include reduce-motion("transition");
+
+			opacity: 0;
+		}
 	}
 
 	.components-form-toggle__thumb {
 		display: block;
 		position: absolute;
 		box-sizing: border-box;
-		top: $toggle-border-width * 3;
-		left: $toggle-border-width * 3;
-		width: $toggle-height - ($toggle-border-width * 6);
-		height: $toggle-height - ($toggle-border-width * 6);
-		border-radius: 50%;
-		transition: 0.1s transform ease;
+		top: math.div($toggle-thumb-size, 6);
+		left: math.div($toggle-thumb-size, 6);
+		width: $toggle-thumb-size;
+		height: $toggle-thumb-size;
+		border-radius: $radius-round;
+		transition:
+			$transition-duration transform ease,
+			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
-		border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode.
+		box-shadow: $elevation-x-small;
+
+		// Transparent border acts as a fill in Windows High Contrast Mode.
+		border: math.div($toggle-thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
 		background-color: $components-color-accent;
-		border: $toggle-border-width solid $components-color-accent;
-		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
+		border-color: $components-color-accent;
+
+		// Windows High Contrast Mode
+		&::after {
+			opacity: 1;
+		}
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: 2px;
+		@include button-style-outset__focus($components-color-accent);
 	}
 
 	&.is-checked {
@@ -88,4 +118,8 @@ $toggle-border-width: 1px;
 	&::before {
 		content: "";
 	}
+
+	&:not(:disabled, [aria-disabled="true"]) {
+		cursor: pointer;
+	}
 }
diff --git a/packages/components/src/form-toggle/test/index.tsx b/packages/components/src/form-toggle/test/index.tsx
index 57c603dc4143ad..b843ecc27c74b6 100644
--- a/packages/components/src/form-toggle/test/index.tsx
+++ b/packages/components/src/form-toggle/test/index.tsx
@@ -79,9 +79,7 @@ describe( 'FormToggle', () => {
 
 	describe( 'Value', () => {
 		it( 'should flip the checked property when clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChange = jest.fn();
 			render( <ControlledFormToggle onChange={ onChange } /> );
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index 3b5bd7e46bf21e..a04ba5ec7b9d29 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -4,7 +4,7 @@ A `FormTokenField` is a field similar to the tags and categories fields in the i
 
 Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
 
-The `value` property is handled in a manner similar to controlled form components. See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+The `value` property is handled in a manner similar to controlled form components. See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
 
 ## Keyboard Accessibility
 
@@ -61,12 +61,15 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
+-   `__next40pxDefaultSize` - Start opting into the larger default height that will become the default size in a future version.
+-   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
+-   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormTokenField } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const continents = [
 	'Africa',
@@ -82,9 +85,11 @@ const MyFormTokenField = () => {
 
 	return (
 		<FormTokenField
+			__next40pxDefaultSize
 			value={ selectedContinents }
 			suggestions={ continents }
 			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index a7c8e9d272f8e3..987c75d769b727 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import clsx from 'clsx';
+import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -12,6 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -22,7 +23,14 @@ import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
 import { FlexItem } from '../flex';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
+import {
+	StyledHelp,
+	StyledLabel,
+} from '../base-control/styles/base-control-styles';
+import { Spacer } from '../spacer';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const identity = ( value: string ) => value;
 
@@ -34,7 +42,7 @@ const identity = ( value: string ) => value;
  * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
  *
  * The `value` property is handled in a manner similar to controlled form components.
- * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+ * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
  */
 export function FormTokenField( props: FormTokenFieldProps ) {
 	const {
@@ -65,9 +73,25 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
-	} = props;
+		__nextHasNoMarginBottom = false,
+		tokenizeOnBlur = false,
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
+
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.FormTokenField', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'FormTokenField',
+		size: undefined,
+		__next40pxDefaultSize,
+	} );
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -107,17 +131,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 
 		// TODO: updateSuggestions() should first be refactored so its actual deps are clearer.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ suggestions, prevSuggestions, value, prevValue ] );
 
 	useEffect( () => {
 		updateSuggestions();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ incompleteTokenValue ] );
 
 	useEffect( () => {
 		updateSuggestions();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ __experimentalAutoSelectFirstMatch ] );
 
 	if ( disabled && isActive ) {
@@ -152,15 +173,33 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function onBlur() {
-		if ( inputHasValidValue() ) {
+	function onBlur( event: FocusEvent ) {
+		if (
+			inputHasValidValue() &&
+			__experimentalValidateInput( incompleteTokenValue )
+		) {
 			setIsActive( false );
+			if ( tokenizeOnBlur && inputHasValidValue() ) {
+				addNewToken( incompleteTokenValue );
+			}
 		} else {
 			// Reset to initial state
 			setIncompleteTokenValue( '' );
 			setInputOffsetFromEnd( 0 );
 			setIsActive( false );
-			setIsExpanded( false );
+
+			if ( __experimentalExpandOnFocus ) {
+				// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+				// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+				const hasFocusWithin =
+					event.relatedTarget === tokensAndInput.current;
+				setIsExpanded( hasFocusWithin );
+			} else {
+				// Else collapse the suggestion list. This will result in the suggestion list closing
+				// after a suggestion has been submitted since that causes a blur.
+				setIsExpanded( false );
+			}
+
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}
@@ -169,15 +208,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if (
-			event.defaultPrevented ||
-			// 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
-		) {
+		if ( event.defaultPrevented ) {
 			return;
 		}
 		switch ( event.key ) {
@@ -439,7 +470,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		setSelectedSuggestionScroll( false );
 		setIsExpanded( ! __experimentalExpandOnFocus );
 
-		if ( isActive ) {
+		if ( isActive && ! tokenizeOnBlur ) {
 			focus();
 		}
 	}
@@ -626,7 +657,6 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			autoCapitalize,
 			autoComplete,
 			placeholder: value.length === 0 ? placeholder : '',
-			key: 'input',
 			disabled,
 			value: incompleteTokenValue,
 			onBlur,
@@ -636,6 +666,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 		return (
 			<TokenInput
+				key="input"
 				{ ...inputProps }
 				onChange={
 					! ( maxLength && value.length >= maxLength )
@@ -647,7 +678,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		);
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		className,
 		'components-form-token-field__input-container',
 		{
@@ -664,7 +695,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	if ( ! disabled ) {
 		tokenFieldProps = Object.assign( {}, tokenFieldProps, {
-			onKeyDown,
+			onKeyDown: withIgnoreIMEEvents( onKeyDown ),
 			onKeyPress,
 			onFocus: onFocusHandler,
 		} );
@@ -676,12 +707,14 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<StyledLabel
-				htmlFor={ `components-form-token-input-${ instanceId }` }
-				className="components-form-token-field__label"
-			>
-				{ label }
-			</StyledLabel>
+			{ label && (
+				<StyledLabel
+					htmlFor={ `components-form-token-input-${ instanceId }` }
+					className="components-form-token-field__label"
+				>
+					{ label }
+				</StyledLabel>
+			) }
 			<div
 				ref={ tokensAndInput }
 				className={ classes }
@@ -693,8 +726,8 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					justify="flex-start"
 					align="center"
 					gap={ 1 }
-					wrap={ true }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					wrap
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }
@@ -713,17 +746,19 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					/>
 				) }
 			</div>
+			{ ! __nextHasNoMarginBottom && <Spacer marginBottom={ 2 } /> }
 			{ __experimentalShowHowTo && (
-				<p
+				<StyledHelp
 					id={ `components-form-token-suggestions-howto-${ instanceId }` }
 					className="components-form-token-field__help"
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ tokenizeOnSpace
 						? __(
 								'Separate with commas, spaces, or the Enter key.'
 						  )
 						: __( 'Separate with commas or the Enter key.' ) }
-				</p>
+				</StyledHelp>
 			) }
 		</div>
 	);
diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx
new file mode 100644
index 00000000000000..52daabe5608b0a
--- /dev/null
+++ b/packages/components/src/form-token-field/stories/index.story.tsx
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FormTokenField from '../';
+
+const meta: Meta< typeof FormTokenField > = {
+	component: FormTokenField,
+	title: 'Components/Selection & Input/Common/FormTokenField',
+	id: 'components-formtokenfield',
+	argTypes: {
+		value: {
+			control: false,
+		},
+		__experimentalValidateInput: {
+			control: false,
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const continents = [
+	'Africa',
+	'America',
+	'Antarctica',
+	'Asia',
+	'Europe',
+	'Oceania',
+];
+
+const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
+	const [ selectedContinents, setSelectedContinents ] = useState<
+		ComponentProps< typeof FormTokenField >[ 'value' ]
+	>( [] );
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selectedContinents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
+	{}
+);
+Default.args = {
+	label: 'Type a continent',
+	suggestions: continents,
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+};
+
+export const Async: StoryFn< typeof FormTokenField > = ( {
+	suggestions,
+	...args
+} ) => {
+	const [ selectedContinents, setSelectedContinents ] = useState<
+		ComponentProps< typeof FormTokenField >[ 'value' ]
+	>( [] );
+	const [ availableContinents, setAvailableContinents ] = useState<
+		string[]
+	>( [] );
+
+	const searchContinents = ( input: string ) => {
+		const timeout = setTimeout( () => {
+			const available = ( suggestions || [] ).filter( ( continent ) =>
+				continent.toLowerCase().includes( input.toLowerCase() )
+			);
+			setAvailableContinents( available );
+		}, 1000 );
+
+		return () => clearTimeout( timeout );
+	};
+
+	return (
+		<FormTokenField
+			{ ...args }
+			value={ selectedContinents }
+			suggestions={ availableContinents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+			onInputChange={ searchContinents }
+		/>
+	);
+};
+Async.args = {
+	label: 'Type a continent',
+	suggestions: continents,
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+};
+
+export const DropdownSelector: StoryFn< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+DropdownSelector.args = {
+	...Default.args,
+	__experimentalExpandOnFocus: true,
+	__experimentalAutoSelectFirstMatch: true,
+};
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	__experimentalRenderItem: ( { item } ) => (
+		<div>{ `${ item } — a nice place to visit` }</div>
+	),
+};
+
+/**
+ * Only values for which the `__experimentalValidateInput` function returns
+ * `true` will be tokenized. (This is still an experimental feature and is
+ * subject to change.)
+ */
+export const WithValidatedInput: StoryFn< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+WithValidatedInput.args = {
+	...Default.args,
+	__experimentalValidateInput: ( input: string ) =>
+		continents.includes( input ),
+};
diff --git a/packages/components/src/form-token-field/stories/index.tsx b/packages/components/src/form-token-field/stories/index.tsx
deleted file mode 100644
index d4af7209132da2..00000000000000
--- a/packages/components/src/form-token-field/stories/index.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FormTokenField from '../';
-
-const meta: ComponentMeta< typeof FormTokenField > = {
-	component: FormTokenField,
-	title: 'Components/FormTokenField',
-	argTypes: {
-		value: {
-			control: { type: null },
-		},
-		__experimentalValidateInput: {
-			control: { type: null },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const continents = [
-	'Africa',
-	'America',
-	'Antarctica',
-	'Asia',
-	'Europe',
-	'Oceania',
-];
-
-const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
-	...args
-} ) => {
-	const [ selectedContinents, setSelectedContinents ] = useState<
-		ComponentProps< typeof FormTokenField >[ 'value' ]
-	>( [] );
-
-	return (
-		<FormTokenField
-			{ ...args }
-			value={ selectedContinents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
-Default.args = {
-	label: 'Type a continent',
-	suggestions: continents,
-};
-
-export const Async: ComponentStory< typeof FormTokenField > = ( {
-	suggestions,
-	...args
-} ) => {
-	const [ selectedContinents, setSelectedContinents ] = useState<
-		ComponentProps< typeof FormTokenField >[ 'value' ]
-	>( [] );
-	const [ availableContinents, setAvailableContinents ] = useState<
-		string[]
-	>( [] );
-
-	const searchContinents = ( input: string ) => {
-		const timeout = setTimeout( () => {
-			const available = ( suggestions || [] ).filter( ( continent ) =>
-				continent.toLowerCase().includes( input.toLowerCase() )
-			);
-			setAvailableContinents( available );
-		}, 1000 );
-
-		return () => clearTimeout( timeout );
-	};
-
-	return (
-		<FormTokenField
-			{ ...args }
-			value={ selectedContinents }
-			suggestions={ availableContinents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			onInputChange={ searchContinents }
-		/>
-	);
-};
-Async.args = {
-	label: 'Type a continent',
-	suggestions: continents,
-};
-
-export const DropdownSelector: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
-DropdownSelector.args = {
-	...Default.args,
-	__experimentalExpandOnFocus: true,
-	__experimentalAutoSelectFirstMatch: true,
-};
-
-/**
- * The rendered output of each suggestion can be customized by passing a
- * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
- * and is subject to change.)
- */
-export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
-WithCustomRenderItem.args = {
-	...Default.args,
-	__experimentalRenderItem: ( { item } ) => (
-		<div>{ `${ item } — a nice place to visit` }</div>
-	),
-};
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index a4d5320296bc8f..d18ca274d76764 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -1,7 +1,6 @@
 .components-form-token-field__input-container {
 	@include input-control();
 	width: 100%;
-	margin: 0 0 $grid-unit-10 0;
 	padding: 0;
 	cursor: text;
 
@@ -48,12 +47,6 @@
 	}
 }
 
-.components-form-token-field__help {
-	font-size: $helptext-font-size;
-	font-style: normal;
-	color: $gray-700;
-}
-
 // Tokens
 .components-form-token-field__token {
 	font-size: $default-font-size;
@@ -88,7 +81,12 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: $components-color-accent;
+		}
+
+		&:not(.is-disabled) {
+			.components-form-token-field__token-text {
+				color: $components-color-accent;
+			}
 		}
 
 		.components-form-token-field__remove-token {
@@ -97,7 +95,6 @@
 			position: absolute;
 			top: 1px;
 			right: 0;
-			padding: 0;
 		}
 
 		&.is-success {
@@ -109,7 +106,6 @@
 		&.is-error {
 			.components-form-token-field__token-text {
 				color: $alert-red;
-				border-radius: 4px 0 0 4px;
 				padding: 0 4px 0 6px;
 			}
 		}
@@ -120,18 +116,11 @@
 			}
 		}
 	}
-
-	&.is-disabled {
-		.components-form-token-field__remove-token {
-			cursor: default;
-		}
-	}
 }
 
 .components-form-token-field__token-text,
 .components-form-token-field__remove-token.components-button {
 	display: inline-block;
-	line-height: 24px;
 	height: auto;
 	background: $gray-300;
 	min-width: unset;
@@ -140,22 +129,21 @@
 }
 
 .components-form-token-field__token-text {
-	border-radius: 2px 0 0 2px;
+	border-radius: $radius-x-small 0 0 $radius-x-small;
 	padding: 0 0 0 8px;
+	line-height: 24px;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .components-form-token-field__remove-token.components-button {
-	cursor: pointer;
-	border-radius: 0 2px 2px 0;
-	padding: 0 2px;
+	border-radius: 0 $radius-x-small $radius-x-small 0;
 	color: $gray-900;
 	line-height: 10px;
 	overflow: initial;
 
-	&:hover {
+	&:hover:not(:disabled) {
 		color: $gray-900;
 	}
 }
@@ -164,30 +152,40 @@
 .components-form-token-field__suggestions-list {
 	flex: 1 0 100%;
 	min-width: 100%;
-	max-height: 9em;
+	max-height: $grid-unit-80 * 2;
 	overflow-y: auto;
 	transition: all 0.15s ease-in-out;
 	@include reduce-motion("transition");
 	list-style: none;
-	border-top: $border-width solid $gray-700;
+	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;
 	padding: 0;
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-700;
+	color: $gray-900;
 	display: block;
 	font-size: $default-font-size;
-	padding: 4px 8px;
+	padding: $grid-unit-10 $grid-unit-15;
+	min-height: $button-size-compact;
 	margin: 0;
-	cursor: pointer;
+	box-sizing: border-box;
 
 	&.is-selected {
 		background: $components-color-accent;
 		color: $white;
 	}
-}
 
-.components-form-token-field__suggestion-match {
-	text-decoration: underline;
+	&[aria-disabled="true"] {
+		pointer-events: none;
+		color: $gray-600;
+
+		&.is-selected {
+			background-color: $components-color-accent-transparent-40;
+		}
+	}
+
+	&:not(.is-empty) {
+		cursor: pointer;
+	}
 }
diff --git a/packages/components/src/form-token-field/styles.ts b/packages/components/src/form-token-field/styles.ts
index 73044d57a95386..e4d41ad90c472c 100644
--- a/packages/components/src/form-token-field/styles.ts
+++ b/packages/components/src/form-token-field/styles.ts
@@ -8,25 +8,27 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
+import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {
-	__next36pxDefaultSize: boolean;
+	__next40pxDefaultSize: boolean;
 	hasTokens: boolean;
 };
 
 const deprecatedPaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	hasTokens,
 }: TokensAndInputWrapperProps ) =>
-	! __next36pxDefaultSize &&
+	! __next40pxDefaultSize &&
 	css`
 		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
 		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
 	`;
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 5px ${ space( 1 ) };
+	padding: 7px;
+	${ boxSizingReset }
 
 	${ deprecatedPaddings }
 `;
diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index 81302d5bfebe81..1339e0cc189e38 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -1,15 +1,14 @@
 /**
  * External dependencies
  */
-import scrollView from 'dom-scroll-into-view';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -21,7 +20,9 @@ const handleMouseDown: MouseEventHandler = ( e ) => {
 	e.preventDefault();
 };
 
-export function SuggestionsList< T extends string | { value: string } >( {
+export function SuggestionsList<
+	T extends string | { value: string; disabled?: boolean },
+>( {
 	selectedIndex,
 	scrollIntoView,
 	match,
@@ -32,8 +33,6 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	instanceId,
 	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
-	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
-
 	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
@@ -44,16 +43,10 @@ export function SuggestionsList< T extends string | { value: string } >( {
 				scrollIntoView &&
 				listNode.children[ selectedIndex ]
 			) {
-				setScrollingIntoView( true );
-				scrollView(
-					listNode.children[ selectedIndex ] as HTMLLIElement,
-					listNode,
-					{
-						onlyScrollIfNeeded: true,
-					}
-				);
-				rafId = requestAnimationFrame( () => {
-					setScrollingIntoView( false );
+				listNode.children[ selectedIndex ].scrollIntoView( {
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
 				} );
 			}
 
@@ -68,9 +61,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 
 	const handleHover = ( suggestion: T ) => {
 		return () => {
-			if ( ! scrollingIntoView ) {
-				onHover?.( suggestion );
-			}
+			onHover?.( suggestion );
 		};
 	};
 
@@ -115,10 +106,18 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		>
 			{ suggestions.map( ( suggestion, index ) => {
 				const matchText = computeSuggestionMatch( suggestion );
-				const className = classnames(
+				const isSelected = index === selectedIndex;
+				const isDisabled =
+					typeof suggestion === 'object' && suggestion?.disabled;
+				const key =
+					typeof suggestion === 'object' && 'value' in suggestion
+						? suggestion?.value
+						: displayTransform( suggestion );
+
+				const className = clsx(
 					'components-form-token-field__suggestion',
 					{
-						'is-selected': index === selectedIndex,
+						'is-selected': isSelected,
 					}
 				);
 
@@ -146,22 +145,23 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						id={ `components-form-token-suggestions-${ instanceId }-${ index }` }
 						role="option"
 						className={ className }
-						key={
-							typeof suggestion === 'object' &&
-							'value' in suggestion
-								? suggestion?.value
-								: displayTransform( suggestion )
-						}
+						key={ key }
 						onMouseDown={ handleMouseDown }
 						onClick={ handleClick( suggestion ) }
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
+						aria-disabled={ isDisabled }
 					>
 						{ output }
 					</li>
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
 			} ) }
+			{ suggestions.length === 0 && (
+				<li className="components-form-token-field__suggestion is-empty">
+					{ __( 'No items found' ) }
+				</li>
+			) }
 		</ul>
 	);
 }
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index ddae1f8c06b894..60c17112717bd1 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -1,3 +1,5 @@
+/* eslint jest/expect-expect: ["warn", { "assertFunctionNames": ["expect", "expectTokensToBeInTheDocument", "expectTokensNotToBeInTheDocument", "expectVisibleSuggestionsToBe", "expectEscapedProperly"] }] */
+
 /**
  * External dependencies
  */
@@ -19,7 +21,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import FormTokenField from '../';
+import _FormTokenField from '../';
+
+const FormTokenField = ( props: ComponentProps< typeof _FormTokenField > ) => (
+	<_FormTokenField __next40pxDefaultSize { ...props } />
+);
 
 const FormTokenFieldWithState = ( {
 	onChange,
@@ -42,6 +48,7 @@ const FormTokenFieldWithState = ( {
 				setSelectedValue( tokens );
 				onChange?.( tokens );
 			} }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -83,6 +90,17 @@ const expectTokensNotToBeInTheDocument = ( tokensText: string[] ) => {
 	);
 };
 
+const expectEscapedProperly = ( tokenHtml: string ) => {
+	screen.getByText( ( _, node: Element | null ) => {
+		if ( node === null ) {
+			return false;
+		}
+
+		// This is hacky, but it's a way we can check exactly the output HTML
+		return node.innerHTML === tokenHtml;
+	} );
+};
+
 const expectVisibleSuggestionsToBe = (
 	listElement: HTMLElement,
 	suggestionsText: string[]
@@ -107,9 +125,7 @@ function unescapeAndFormatSpaces( str: string ) {
 describe( 'FormTokenField', () => {
 	describe( 'basic usage', () => {
 		it( "should add tokens with the input's value when pressing the enter key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -134,9 +150,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should add a token with the input's value when pressing the comma key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -152,9 +166,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should add a token with the input value when pressing the space key and the `tokenizeOnSpace` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -197,10 +209,43 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
-		it( "should not add a token with the input's value when pressing the tab key", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+		it( 'should add a token with the input value with onBlur when `tokenizeOnBlur` prop is `true`', async () => {
+			const user = userEvent.setup();
+
+			const onChangeSpy = jest.fn();
+
+			const { rerender } = render(
+				<FormTokenFieldWithState onChange={ onChangeSpy } />
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Add 'grapefruit' token by typing it and check blur of field does not tokenize it.
+			await user.type( input, 'grapefruit' );
+			await user.click( document.body );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 0 );
+			expectTokensNotToBeInTheDocument( [ 'grapefruit' ] );
+
+			rerender(
+				<FormTokenFieldWithState
+					onChange={ onChangeSpy }
+					tokenizeOnBlur
+				/>
+			);
+			await user.clear( input );
+
+			// Add 'grapefruit' token by typing it and check blur of field tokenizes it.
+			await user.type( input, 'grapefruit' );
+
+			await user.click( document.body );
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, [
+				'grapefruit',
+			] );
+			expectTokensToBeInTheDocument( [ 'grapefruit' ] );
+		} );
+
+		it( "should not add a token with the input's value when tokenizeOnBlur is not set and pressing the tab key", async () => {
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -216,9 +261,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove the last token when pressing the backspace key', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -246,9 +289,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove a token when clicking the token\'s "remove" button', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -290,9 +331,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should remove a token when by focusing on the token\'s "remove" button and pressing space bar', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -327,9 +366,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not add a new token if a token with the same value already exists', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -356,9 +393,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not add a new token if the text input is blank', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -378,9 +413,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow moving the cursor through the tokens when pressing the arrow keys, and should remove the token in front of the cursor when pressing the delete key', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -486,6 +519,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'
 			);
@@ -506,9 +540,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should fire the `onFocus` callback when the input is focused', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onFocusSpy = jest.fn();
 
@@ -530,9 +562,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should fire the `onInputChange` callback when the input's value changes", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onInputChangeSpy = jest.fn();
 
@@ -599,9 +629,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should use the value of the `placeholder` prop as the input's placeholder only when there are no tokens", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -630,9 +658,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should handle accents and special characters in tokens and input value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -677,9 +703,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should render suggestions when receiving focus if the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onFocusSpy = jest.fn();
 
@@ -721,10 +745,105 @@ describe( 'FormTokenField', () => {
 			] );
 		} );
 
+		it( 'should render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `true`', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+						__experimentalExpandOnFocus
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+		} );
+
+		it( 'should not render suggestions after a selection is made when the `__experimentalExpandOnFocus` prop is set to `false` or not defined', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not render suggestions after the input is blurred', async () => {
+			const user = userEvent.setup();
+
+			const onFocusSpy = jest.fn();
+
+			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
+
+			render(
+				<>
+					<FormTokenFieldWithState
+						onFocus={ onFocusSpy }
+						suggestions={ suggestions }
+					/>
+				</>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'ee' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Green',
+				'Seaweed',
+			] );
+
+			// Select the first suggestion ("Green")
+			await user.keyboard( '[ArrowDown][Enter]' );
+
+			// Click the body, blurring the input.
+			await user.click( document.body );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
 		it( 'should not render suggestions if the text input is not matching any of the suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'White', 'Pearl', 'Alabaster' ];
 
@@ -739,9 +858,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should render the matching suggestions only if the text input has the minimum length', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Yellow', 'Canary', 'Gold', 'Blonde' ];
 
@@ -766,9 +883,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not render a matching suggestion if a token with the same value has already been added', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Green', 'Emerald', 'Seaweed' ];
 
@@ -791,9 +906,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow the user to use the keyboard to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -872,9 +985,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow the user to use the mouse to navigate and select suggestions (which are marked with the `aria-selected` attribute)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -944,9 +1055,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should hide the suggestion list when the Escape key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -978,10 +1087,88 @@ describe( 'FormTokenField', () => {
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );
 
+		it( 'should hide the suggestion list on an empty input', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [ 'One', 'Two', 'Three' ];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'on' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'One',
+			] );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+
+			await user.clear( input );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should hide the suggestion list on blur and invalid input', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [ 'One', 'Two', 'Three' ];
+
+			render(
+				<FormTokenFieldWithState
+					suggestions={ suggestions }
+					__experimentalValidateInput={ ( token ) =>
+						suggestions.includes( token )
+					}
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'on' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'One',
+			] );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+
+			await user.click( document.body );
+
+			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not hide the suggestion list on blur and valid input', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [ 'One', 'Two', 'Three' ];
+
+			render(
+				<FormTokenFieldWithState
+					suggestions={ suggestions }
+					__experimentalValidateInput={ ( token ) =>
+						suggestions.includes( token )
+					}
+				/>
+			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			await user.type( input, 'One' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'One',
+			] );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+
+			await user.click( document.body );
+
+			expect( screen.getByRole( 'listbox' ) ).toBeVisible();
+		} );
+
 		it( 'matches the search text with the suggestions in a case-insensitive way', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Cinnamon', 'Tawny', 'Mocha' ];
 
@@ -1000,9 +1187,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should show, at most, a number of suggestions equals to the value of the `maxSuggestions` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [
 				'Ablaze',
@@ -1050,9 +1235,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should match the search text against the unescaped values of suggestions with special characters (including spaces)', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1093,9 +1276,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should re-render if suggestions change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Aluminum', 'Silver', 'Bronze' ];
 
@@ -1116,9 +1297,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should automatically select the first matching suggestions when the `__experimentalAutoSelectFirstMatch` prop is set to `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Walnut', 'Hazelnut', 'Pecan' ];
 
@@ -1159,9 +1338,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should allow to render custom suggestion items via the `__experimentalRenderItem` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Wood', 'Stone', 'Metal' ];
 
@@ -1192,9 +1369,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'tokens as objects', () => {
 		it( 'should accept tokens in their object format', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1234,9 +1409,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should trigger mouse callbacks if the `onMouseEnter` and/or the `onMouseLeave` properties are set on a token data object', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onMouseEnterSpy = jest.fn();
 			const onMouseLeaveSpy = jest.fn();
@@ -1290,21 +1463,35 @@ describe( 'FormTokenField', () => {
 			expect( screen.getByTitle( 'España' ) ).toBeVisible();
 		} );
 
-		it( 'should be still used to filter out duplicate suggestions', () => {
+		it( 'should be still used to filter out duplicate suggestions', async () => {
+			const user = userEvent.setup();
+
 			render(
 				<FormTokenFieldWithState
 					__experimentalExpandOnFocus
-					initialValue={ [ { value: 'France' }, { value: 'Spain' } ] }
+					initialValue={ [
+						{ value: 'Slovenia' },
+						{ value: 'Spain' },
+					] }
+					suggestions={ [ 'Slovenia', 'Slovakia', 'Sweden' ] }
 				/>
 			);
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Typing `slov` will match both `Slovenia` and `Slovakia`.
+			await user.type( input, 'slov' );
+
+			// However, `Slovenia` is already selected.
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Slovakia',
+			] );
 		} );
 	} );
 
 	describe( 'saveTransform', () => {
 		it( "by default, it should trim the input's value from extra white spaces before attempting to add it as a token", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1368,9 +1555,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "should allow to modify the input's value when saving it as a token", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1433,9 +1618,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'is applied to the search value when matching it against the list of suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1473,9 +1656,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'displayTransform', () => {
 		it( 'should allow to modify the text rendered in the browser for each token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1531,9 +1712,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( "is applied to each suggestions, but doesn't influence the matching against the search value", async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1583,15 +1762,7 @@ describe( 'FormTokenField', () => {
 				'a&nbsp;&nbsp;&nbsp;b',
 				'i&nbsp;&lt;3&nbsp;tags',
 				'1&amp;2&amp;3&amp;4',
-			].forEach( ( tokenHtml ) => {
-				screen.getByText( ( _, node: Element | null ) => {
-					if ( node === null ) {
-						return false;
-					}
-
-					return node.innerHTML === tokenHtml;
-				} );
-			} );
+			].forEach( ( tokenHtml ) => expectEscapedProperly( tokenHtml ) );
 		} );
 
 		it( 'should allow to pass a function that renders tokens with special characters correctly', async () => {
@@ -1613,23 +1784,13 @@ describe( 'FormTokenField', () => {
 				'a&nbsp;&nbsp;&nbsp;b',
 				'i&nbsp;&lt;3&nbsp;tags',
 				'1&amp;2&amp;3&amp;4',
-			].forEach( ( tokenHtml ) => {
-				screen.getByText( ( _, node: Element | null ) => {
-					if ( node === null ) {
-						return false;
-					}
-
-					return node.innerHTML === tokenHtml;
-				} );
-			} );
+			].forEach( ( tokenHtml ) => expectEscapedProperly( tokenHtml ) );
 		} );
 	} );
 
 	describe( 'validation', () => {
 		it( 'should add a token only if it passes the validation set via `__experimentalValidateInput`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			const startsWithCapitalLetter = ( tokenText: string ) =>
@@ -1674,9 +1835,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'maxLength', () => {
 		it( 'should not allow adding new tokens beyond the value defined by the `maxLength` prop', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1744,9 +1903,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not affect tokens that were added before the limit was imposed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1789,9 +1946,7 @@ describe( 'FormTokenField', () => {
 
 	describe( 'disabled', () => {
 		it( 'should not allow adding tokens when the `disabled` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1819,9 +1974,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should not allow removing tokens when the `disable` prop is `true`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 
@@ -1867,9 +2020,7 @@ describe( 'FormTokenField', () => {
 		};
 
 		it( 'should announce to assistive technology the addition of a new token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState /> );
 
@@ -1885,9 +2036,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the addition of a new token with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState messages={ customMessages } /> );
 
@@ -1903,9 +2052,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the removal of a token', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <FormTokenFieldWithState initialValue={ [ 'horse' ] } /> );
 
@@ -1920,9 +2067,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the removal of a token with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1942,9 +2087,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the failure of a potential token to pass validation', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1964,9 +2107,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the failure of a potential token to pass validation with a custom message', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -1987,9 +2128,7 @@ describe( 'FormTokenField', () => {
 		} );
 
 		it( 'should announce to assistive technology the result of the matching of the search text against the list of suggestions', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<FormTokenFieldWithState
@@ -2051,9 +2190,7 @@ describe( 'FormTokenField', () => {
 	// but I wasn't sure if there was a better way.
 	describe( 'aria attributes', () => {
 		it( 'should add the correct aria attributes to the input as the user interacts with it', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const suggestions = [ 'Pine', 'Pistachio', 'Sage' ];
 
diff --git a/packages/components/src/form-token-field/token-input.tsx b/packages/components/src/form-token-field/token-input.tsx
index 196ac03c799af8..daf1df4223354a 100644
--- a/packages/components/src/form-token-field/token-input.tsx
+++ b/packages/components/src/form-token-field/token-input.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
@@ -12,7 +12,7 @@ import { forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { TokenInputProps } from './types';
 
 export function UnForwardedTokenInput(
@@ -48,9 +48,7 @@ export function UnForwardedTokenInput(
 		onFocus?.( e );
 	};
 
-	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
-		e
-	) => {
+	const onBlurHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
 		setHasFocus( false );
 		onBlur?.( e );
 	};
@@ -66,7 +64,7 @@ export function UnForwardedTokenInput(
 			onFocus={ onFocusHandler }
 			onBlur={ onBlurHandler }
 			size={ size }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-form-token-field__input'
 			) }
diff --git a/packages/components/src/form-token-field/token.tsx b/packages/components/src/form-token-field/token.tsx
index 9d2c522037d8e9..0cfa14cc3e0218 100644
--- a/packages/components/src/form-token-field/token.tsx
+++ b/packages/components/src/form-token-field/token.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Token( {
 	termsCount,
 }: TokenProps ) {
 	const instanceId = useInstanceId( Token );
-	const tokenClasses = classnames( 'components-form-token-field__token', {
+	const tokenClasses = clsx( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
 		'is-validating': 'validating' === status,
@@ -72,8 +72,12 @@ export default function Token( {
 
 			<Button
 				className="components-form-token-field__remove-token"
+				size="small"
 				icon={ closeSmall }
-				onClick={ ! disabled && onClick }
+				onClick={ ! disabled ? onClick : undefined }
+				// Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.
+				// eslint-disable-next-line no-restricted-syntax
+				disabled={ disabled }
 				label={ messages.remove }
 				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }
 			/>
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index bdc67d725489b4..051f00a6cdeb06 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -5,6 +5,7 @@ import type {
 	ComponentPropsWithRef,
 	MouseEventHandler,
 	ReactNode,
+	FocusEvent,
 } from 'react';
 
 type Messages = {
@@ -151,13 +152,21 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 * @ignore
+	 */
+	__next36pxDefaultSize?: boolean;
 	/**
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If true, the select the first matching suggestion when the user presses
 	 * the Enter key (or space when tokenizeOnSpace is true).
@@ -169,13 +178,25 @@ export interface FormTokenFieldProps
 	 * Custom renderer for suggestions.
 	 */
 	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
+	/**
+	 * Start opting into the new margin-free styles that will become the default in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * If true, add any incompleteTokenValue as a new token when the field loses focus.
+	 *
+	 * @default false
+	 */
+	tokenizeOnBlur?: boolean;
 }
 
 /**
  * `T` can be either a `string` or an object which must have a `value` prop as a string.
  */
 export interface SuggestionsListProps<
-	T = string | ( Record< string, unknown > & { value: string } )
+	T = string | ( Record< string, unknown > & { value: string } ),
 > {
 	selectedIndex: number;
 	scrollIntoView: boolean;
diff --git a/packages/components/src/gradient-picker/README.md b/packages/components/src/gradient-picker/README.md
index 8def1ef24de590..ec0210d03c0a43 100644
--- a/packages/components/src/gradient-picker/README.md
+++ b/packages/components/src/gradient-picker/README.md
@@ -1,103 +1,156 @@
 # GradientPicker
 
-GradientPicker is a React component that renders a color gradient picker to define a multi step gradient. There's either a _linear_ or a _radial_ type available.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-![gradient-picker](https://user-images.githubusercontent.com/881729/147505438-3818c4c7-65b5-4394-b97b-af903c62adce.png)
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-gradientpicker--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-## Usage
-
-Render a GradientPicker.
+GradientPicker is a React component that renders a color gradient picker to
+define a multi step gradient. There's either a _linear_ or a _radial_ type
+available.
 
 ```jsx
+import { useState } from 'react';
 import { GradientPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-const myGradientPicker = () => {
-	const [ gradient, setGradient ] = useState( null );
-
-	return (
-		<GradientPicker
-			__nextHasNoMargin
-			value={ gradient }
-			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
-			gradients={ [
-				{
-					name: 'JShine',
-					gradient:
-						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
-					slug: 'jshine',
-				},
-				{
-					name: 'Moonlit Asteroid',
-					gradient:
-						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
-					slug: 'moonlit-asteroid',
-				},
-				{
-					name: 'Rastafarie',
-					gradient:
-						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
-					slug: 'rastafari',
-				},
-			] }
-		/>
-	);
+
+const MyGradientPicker = () => {
+  const [ gradient, setGradient ] = useState( null );
+
+  return (
+    <GradientPicker
+      value={ gradient }
+      onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+      gradients={ [
+        {
+          name: 'JShine',
+          gradient:
+            'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+          slug: 'jshine',
+        },
+        {
+          name: 'Moonlit Asteroid',
+          gradient:
+            'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+          slug: 'moonlit-asteroid',
+        },
+        {
+          name: 'Rastafarie',
+          gradient:
+            'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+          slug: 'rastafari',
+        },
+      ] }
+    />
+  );
 };
 ```
-
 ## Props
 
-The component accepts the following props:
+### `__experimentalIsRenderedInSidebar`
+
+Whether this is rendered in the sidebar.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### value
+### `asButtons`
 
-The current value of the gradient. Pass a css gradient like `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`. Optionally pass in a `null` value to specify no gradient is currently selected.
+Whether the control should present as a set of buttons,
+each with its own tab stop.
 
--   Type: `string`
--   Required: No
--   Default: `linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)`
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
 
-### onChange
+### `aria-label`
 
-The function called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
+A label to identify the purpose of the control.
 
--   Type: `Function`
--   Required: Yes
+ - Type: `string`
+ - Required: No
 
-### gradients
+### `aria-labelledby`
 
-An array of objects of predefined gradients which show up as `CircularOptionPicker` above the gradient selector.
+An ID of an element to provide a label for the control.
 
--   Type: `array`
--   Required: No
+ - Type: `string`
+ - Required: No
 
-### clearable
+### `className`
+
+The class name added to the wrapper.
+
+ - Type: `string`
+ - Required: No
+
+### `clearable`
 
 Whether the palette should have a clearing button or not.
 
--   Type: `Boolean`
--   Required: No
--   Default: true
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
+### `disableCustomGradients`
+
+If true, the gradient picker will not be displayed and only defined
+gradients from `gradients` will be shown.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `false`
+
+### `enableAlpha`
+
+Whether to enable alpha transparency options in the picker.
+
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
+
+### `gradients`
+
+An array of objects as predefined gradients displayed above the gradient
+selector. Alternatively, if there are multiple sets (or 'origins') of
+gradients, you can pass an array of objects each with a `name` and a
+`gradients` array which will in turn contain the predefined gradient objects.
+
+ - Type: `GradientsProp`
+ - Required: No
+ - Default: `[]`
+
+### `headingLevel`
+
+The heading level. Only applies in cases where gradients are provided
+from multiple origins (i.e. when the array passed as the `gradients` prop
+contains two or more items).
+
+ - Type: `1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | ...`
+ - Required: No
+ - Default: `2`
 
-### clearGradient
+### `loop`
 
-Called when a new gradient has been defined. It is passed the `currentGradient` as an argument.
+Prevents keyboard interaction from wrapping around.
+Only used when `asButtons` is not true.
 
--   Type: `Function`
--   Required: No
+ - Type: `boolean`
+ - Required: No
+ - Default: `true`
 
-### disableCustomGradients
+### `onChange`
 
-If true, the gradient picker will not be displayed and only defined gradients from `gradients` are available.
+The function called when a new gradient has been defined. It is passed to
+the `currentGradient` as an argument.
 
--   Type: `Boolean`
--   Required: No
--   Default: false
+ - Type: `(currentGradient: string) => void`
+ - Required: Yes
 
-### __nextHasNoMargin
+### `value`
 
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+The current value of the gradient. Pass a css gradient string (See default value for example).
+Optionally pass in a `null` value to specify no gradient is currently selected.
 
--   Type: `Boolean`
--   Required: No
--   Default: `false`
+ - Type: `string`
+ - Required: No
+ - Default: `'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'`
diff --git a/packages/components/src/gradient-picker/docs-manifest.json b/packages/components/src/gradient-picker/docs-manifest.json
new file mode 100644
index 00000000000000..6bea56ccc678c6
--- /dev/null
+++ b/packages/components/src/gradient-picker/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "GradientPicker",
+	"filePath": "./index.tsx"
+}
diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
deleted file mode 100644
index 0da35f8736a7c8..00000000000000
--- a/packages/components/src/gradient-picker/index.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import CircularOptionPicker from '../circular-option-picker';
-import CustomGradientPicker from '../custom-gradient-picker';
-import { VStack } from '../v-stack';
-import { ColorHeading } from '../color-palette/styles';
-import { Spacer } from '../spacer';
-
-function SingleOrigin( {
-	className,
-	clearGradient,
-	gradients,
-	onChange,
-	value,
-	actions,
-} ) {
-	const gradientOptions = useMemo( () => {
-		return map( gradients, ( { gradient, name } ) => (
-			<CircularOptionPicker.Option
-				key={ gradient }
-				value={ gradient }
-				isSelected={ value === gradient }
-				tooltipText={
-					name ||
-					// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-					sprintf( __( 'Gradient code: %s' ), gradient )
-				}
-				style={ { color: 'rgba( 0,0,0,0 )', background: gradient } }
-				onClick={
-					value === gradient
-						? clearGradient
-						: () => onChange( gradient )
-				}
-				aria-label={
-					name
-						? // translators: %s: The name of the gradient e.g: "Angular red to blue".
-						  sprintf( __( 'Gradient: %s' ), name )
-						: // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-						  sprintf( __( 'Gradient code: %s' ), gradient )
-				}
-			/>
-		) );
-	}, [ gradients, value, onChange, clearGradient ] );
-	return (
-		<CircularOptionPicker
-			className={ className }
-			options={ gradientOptions }
-			actions={ actions }
-		/>
-	);
-}
-
-function MultipleOrigin( {
-	className,
-	clearGradient,
-	gradients,
-	onChange,
-	value,
-	actions,
-} ) {
-	return (
-		<VStack spacing={ 3 } className={ className }>
-			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
-				return (
-					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading>{ name }</ColorHeading>
-						<SingleOrigin
-							clearGradient={ clearGradient }
-							gradients={ gradientSet }
-							onChange={ onChange }
-							value={ value }
-							{ ...( gradients.length === index + 1
-								? { actions }
-								: {} ) }
-						/>
-					</VStack>
-				);
-			} ) }
-		</VStack>
-	);
-}
-
-export default function GradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
-	className,
-	gradients,
-	onChange,
-	value,
-	clearable = true,
-	disableCustomGradients = false,
-	__experimentalHasMultipleOrigins,
-	__experimentalIsRenderedInSidebar,
-} ) {
-	const clearGradient = useCallback(
-		() => onChange( undefined ),
-		[ onChange ]
-	);
-	const Component =
-		__experimentalHasMultipleOrigins && gradients?.length
-			? MultipleOrigin
-			: SingleOrigin;
-
-	if ( ! __nextHasNoMargin ) {
-		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
-			since: '6.1',
-			version: '6.4',
-			hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-		} );
-	}
-
-	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
-		? {
-				marginTop: ! gradients?.length ? 3 : undefined,
-				marginBottom: ! clearable ? 6 : 0,
-		  }
-		: {};
-
-	return (
-		// Outmost Spacer wrapper can be removed when deprecation period is over
-		<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
-			<VStack spacing={ gradients?.length ? 4 : 0 }>
-				{ ! disableCustomGradients && (
-					<CustomGradientPicker
-						__nextHasNoMargin
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
-				) }
-				{ ( gradients?.length || clearable ) && (
-					<Component
-						className={ className }
-						clearable={ clearable }
-						clearGradient={ clearGradient }
-						gradients={ gradients }
-						onChange={ onChange }
-						value={ value }
-						actions={
-							clearable &&
-							! disableCustomGradients && (
-								<CircularOptionPicker.ButtonAction
-									onClick={ clearGradient }
-								>
-									{ __( 'Clear' ) }
-								</CircularOptionPicker.ButtonAction>
-							)
-						}
-					/>
-				) }
-			</VStack>
-		</Spacer>
-	);
-}
diff --git a/packages/components/src/gradient-picker/index.tsx b/packages/components/src/gradient-picker/index.tsx
new file mode 100644
index 00000000000000..28491d8a56010e
--- /dev/null
+++ b/packages/components/src/gradient-picker/index.tsx
@@ -0,0 +1,266 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CircularOptionPicker from '../circular-option-picker';
+import CustomGradientPicker from '../custom-gradient-picker';
+import { VStack } from '../v-stack';
+import { ColorHeading } from '../color-palette/styles';
+import type {
+	GradientPickerComponentProps,
+	PickerProps,
+	OriginObject,
+	GradientObject,
+} from './types';
+
+// The Multiple Origin Gradients have a `gradients` property (an array of
+// gradient objects), while Single Origin ones have a `gradient` property.
+const isMultipleOriginObject = (
+	obj: Record< string, any >
+): obj is OriginObject =>
+	Array.isArray( obj.gradients ) && ! ( 'gradient' in obj );
+
+const isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {
+	return (
+		arr.length > 0 &&
+		arr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )
+	);
+};
+
+function SingleOrigin( {
+	className,
+	clearGradient,
+	gradients,
+	onChange,
+	value,
+	...additionalProps
+}: PickerProps< GradientObject > ) {
+	const gradientOptions = useMemo( () => {
+		return gradients.map( ( { gradient, name, slug }, index ) => (
+			<CircularOptionPicker.Option
+				key={ slug }
+				value={ gradient }
+				isSelected={ value === gradient }
+				tooltipText={
+					name ||
+					// translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+					sprintf( __( 'Gradient code: %s' ), gradient )
+				}
+				style={ { color: 'rgba( 0,0,0,0 )', background: gradient } }
+				onClick={
+					value === gradient
+						? clearGradient
+						: () => onChange( gradient, index )
+				}
+				aria-label={
+					name
+						? // translators: %s: The name of the gradient e.g: "Angular red to blue".
+						  sprintf( __( 'Gradient: %s' ), name )
+						: // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+						  sprintf( __( 'Gradient code: %s' ), gradient )
+				}
+			/>
+		) );
+	}, [ gradients, value, onChange, clearGradient ] );
+	return (
+		<CircularOptionPicker.OptionGroup
+			className={ className }
+			options={ gradientOptions }
+			{ ...additionalProps }
+		/>
+	);
+}
+
+function MultipleOrigin( {
+	className,
+	clearGradient,
+	gradients,
+	onChange,
+	value,
+	headingLevel,
+}: PickerProps< OriginObject > ) {
+	const instanceId = useInstanceId( MultipleOrigin );
+
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
+				const id = `color-palette-${ instanceId }-${ index }`;
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading level={ headingLevel } id={ id }>
+							{ name }
+						</ColorHeading>
+						<SingleOrigin
+							clearGradient={ clearGradient }
+							gradients={ gradientSet }
+							onChange={ ( gradient ) =>
+								onChange( gradient, index )
+							}
+							value={ value }
+							aria-labelledby={ id }
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
+
+function Component( props: PickerProps< any > ) {
+	const {
+		asButtons,
+		loop,
+		actions,
+		headingLevel,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		...additionalProps
+	} = props;
+	const options = isMultipleOriginArray( props.gradients ) ? (
+		<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />
+	) : (
+		<SingleOrigin { ...additionalProps } />
+	);
+
+	let metaProps:
+		| { asButtons: false; loop?: boolean; 'aria-label': string }
+		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
+		| { asButtons: true };
+
+	if ( asButtons ) {
+		metaProps = { asButtons: true };
+	} else {
+		const _metaProps: { asButtons: false; loop?: boolean } = {
+			asButtons: false,
+			loop,
+		};
+
+		if ( ariaLabel ) {
+			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
+		} else if ( ariaLabelledby ) {
+			metaProps = {
+				..._metaProps,
+				'aria-labelledby': ariaLabelledby,
+			};
+		} else {
+			metaProps = {
+				..._metaProps,
+				'aria-label': __( 'Custom color picker.' ),
+			};
+		}
+	}
+
+	return (
+		<CircularOptionPicker
+			{ ...metaProps }
+			actions={ actions }
+			options={ options }
+		/>
+	);
+}
+
+/**
+ * GradientPicker is a React component that renders a color gradient picker to
+ * define a multi step gradient. There's either a _linear_ or a _radial_ type
+ * available.
+ *
+ * ```jsx
+ * import { useState } from 'react';
+ * import { GradientPicker } from '@wordpress/components';
+ *
+ * const MyGradientPicker = () => {
+ *   const [ gradient, setGradient ] = useState( null );
+ *
+ *   return (
+ *     <GradientPicker
+ *       value={ gradient }
+ *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }
+ *       gradients={ [
+ *         {
+ *           name: 'JShine',
+ *           gradient:
+ *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
+ *           slug: 'jshine',
+ *         },
+ *         {
+ *           name: 'Moonlit Asteroid',
+ *           gradient:
+ *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
+ *           slug: 'moonlit-asteroid',
+ *         },
+ *         {
+ *           name: 'Rastafarie',
+ *           gradient:
+ *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
+ *           slug: 'rastafari',
+ *         },
+ *       ] }
+ *     />
+ *   );
+ * };
+ *```
+ *
+ */
+export function GradientPicker( {
+	className,
+	gradients = [],
+	onChange,
+	value,
+	clearable = true,
+	enableAlpha = true,
+	disableCustomGradients = false,
+	__experimentalIsRenderedInSidebar,
+	headingLevel = 2,
+	...additionalProps
+}: GradientPickerComponentProps ) {
+	const clearGradient = useCallback(
+		() => onChange( undefined ),
+		[ onChange ]
+	);
+
+	return (
+		<VStack spacing={ gradients.length ? 4 : 0 }>
+			{ ! disableCustomGradients && (
+				<CustomGradientPicker
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
+					enableAlpha={ enableAlpha }
+					value={ value }
+					onChange={ onChange }
+				/>
+			) }
+			{ ( gradients.length > 0 || clearable ) && (
+				<Component
+					{ ...additionalProps }
+					className={ className }
+					clearGradient={ clearGradient }
+					gradients={ gradients }
+					onChange={ onChange }
+					value={ value }
+					actions={
+						clearable &&
+						! disableCustomGradients && (
+							<CircularOptionPicker.ButtonAction
+								onClick={ clearGradient }
+								accessibleWhenDisabled
+								disabled={ ! value }
+							>
+								{ __( 'Clear' ) }
+							</CircularOptionPicker.ButtonAction>
+						)
+					}
+					headingLevel={ headingLevel }
+				/>
+			) }
+		</VStack>
+	);
+}
+
+export default GradientPicker;
diff --git a/packages/components/src/gradient-picker/stories/index.js b/packages/components/src/gradient-picker/stories/index.js
deleted file mode 100644
index c083bf0d42ee6b..00000000000000
--- a/packages/components/src/gradient-picker/stories/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import GradientPicker from '../';
-
-export default {
-	title: 'Components/GradientPicker',
-	component: GradientPicker,
-	argTypes: {
-		__nextHasNoMargin: { control: { type: 'boolean' } },
-		clearable: { control: { type: 'boolean' } },
-		disableCustomGradients: { control: { type: 'boolean' } },
-		onChange: { action: 'onChange' },
-	},
-};
-
-const GRADIENTS = [
-	{
-		name: 'Vivid cyan blue to vivid purple',
-		gradient:
-			'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-		slug: 'vivid-cyan-blue-to-vivid-purple',
-	},
-	{
-		name: 'Light green cyan to vivid green cyan',
-		gradient:
-			'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-		slug: 'light-green-cyan-to-vivid-green-cyan',
-	},
-	{
-		name: 'Luminous vivid amber to luminous vivid orange',
-		gradient:
-			'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
-		slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
-	},
-	{
-		name: 'Luminous vivid orange to vivid red',
-		gradient:
-			'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
-		slug: 'luminous-vivid-orange-to-vivid-red',
-	},
-	{
-		name: 'Very light gray to cyan bluish gray',
-		gradient:
-			'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
-		slug: 'very-light-gray-to-cyan-bluish-gray',
-	},
-	{
-		name: 'Cool to warm spectrum',
-		gradient:
-			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
-		slug: 'cool-to-warm-spectrum',
-	},
-];
-
-const Template = ( { onChange, ...props } ) => {
-	const [ gradient, setGradient ] = useState();
-	return (
-		<GradientPicker
-			{ ...props }
-			value={ gradient }
-			onChange={ ( ...changeArgs ) => {
-				setGradient( ...changeArgs );
-				onChange?.( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-	gradients: GRADIENTS,
-};
-
-export const WithNoExistingGradients = Template.bind( {} );
-WithNoExistingGradients.args = {
-	...Default.args,
-	gradients: [],
-};
-
-export const MultipleOrigins = Template.bind( {} );
-MultipleOrigins.args = {
-	...Default.args,
-	__experimentalHasMultipleOrigins: true,
-	gradients: [
-		{ name: 'Origin 1', gradients: GRADIENTS },
-		{ name: 'Origin 2', gradients: GRADIENTS },
-	],
-};
diff --git a/packages/components/src/gradient-picker/stories/index.story.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx
new file mode 100644
index 00000000000000..7dc5f62df726db
--- /dev/null
+++ b/packages/components/src/gradient-picker/stories/index.story.tsx
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import GradientPicker from '..';
+
+const meta: Meta< typeof GradientPicker > = {
+	title: 'Components/Selection & Input/Color/GradientPicker',
+	id: 'components-gradientpicker',
+	component: GradientPicker,
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+		actions: { argTypesRegex: '^on.*' },
+	},
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+const GRADIENTS = [
+	{
+		name: 'Vivid cyan blue to vivid purple',
+		gradient:
+			'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+		slug: 'vivid-cyan-blue-to-vivid-purple',
+	},
+	{
+		name: 'Light green cyan to vivid green cyan',
+		gradient:
+			'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+		slug: 'light-green-cyan-to-vivid-green-cyan',
+	},
+	{
+		name: 'Luminous vivid amber to luminous vivid orange',
+		gradient:
+			'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+		slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+	},
+	{
+		name: 'Luminous vivid orange to vivid red',
+		gradient:
+			'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+		slug: 'luminous-vivid-orange-to-vivid-red',
+	},
+	{
+		name: 'Very light gray to cyan bluish gray',
+		gradient:
+			'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+		slug: 'very-light-gray-to-cyan-bluish-gray',
+	},
+	{
+		name: 'Cool to warm spectrum',
+		gradient:
+			'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+		slug: 'cool-to-warm-spectrum',
+	},
+];
+
+const Template: StoryFn< typeof GradientPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ gradient, setGradient ] =
+		useState< ( typeof props )[ 'value' ] >( null );
+	return (
+		<GradientPicker
+			{ ...props }
+			value={ gradient }
+			onChange={ ( ...changeArgs ) => {
+				setGradient( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	gradients: GRADIENTS,
+};
+
+export const WithNoExistingGradients = Template.bind( {} );
+WithNoExistingGradients.args = {
+	...Default.args,
+	gradients: [],
+};
+
+export const MultipleOrigins = Template.bind( {} );
+MultipleOrigins.args = {
+	...Default.args,
+	gradients: [
+		{ name: 'Origin 1', gradients: GRADIENTS },
+		{ name: 'Origin 2', gradients: GRADIENTS },
+	],
+};
diff --git a/packages/components/src/gradient-picker/types.ts b/packages/components/src/gradient-picker/types.ts
new file mode 100644
index 00000000000000..3497dd8c5ac008
--- /dev/null
+++ b/packages/components/src/gradient-picker/types.ts
@@ -0,0 +1,128 @@
+/**
+ * Internal dependencies
+ */
+import type { HeadingSize } from '../heading/types';
+
+export type GradientObject = {
+	gradient: string;
+	name: string;
+	slug: string;
+};
+export type OriginObject = { name: string; gradients: GradientObject[] };
+export type GradientsProp = GradientObject[] | OriginObject[];
+
+type GradientPickerBaseProps = {
+	/**
+	 * The class name added to the wrapper.
+	 */
+	className?: string;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string | undefined ) => void;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: GradientObject[ 'gradient' ] | null;
+	/**
+	 * Whether the palette should have a clearing button or not.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * The heading level. Only applies in cases where gradients are provided
+	 * from multiple origins (i.e. when the array passed as the `gradients` prop
+	 * contains two or more items).
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
+	/**
+	 * Whether to enable alpha transparency options in the picker.
+	 *
+	 * @default true
+	 */
+	enableAlpha?: boolean;
+} & (
+	| {
+			// TODO: [#54055] Either this or `aria-labelledby` should be required
+			/**
+			 * A label to identify the purpose of the control.
+			 */
+			'aria-label'?: string;
+			'aria-labelledby'?: never;
+	  }
+	| {
+			// TODO: [#54055] Either this or `aria-label` should be required
+			/**
+			 * An ID of an element to provide a label for the control.
+			 */
+			'aria-labelledby'?: string;
+			'aria-label'?: never;
+	  }
+);
+
+export type GradientPickerComponentProps = GradientPickerBaseProps & {
+	/**
+	 * An array of objects as predefined gradients displayed above the gradient
+	 * selector. Alternatively, if there are multiple sets (or 'origins') of
+	 * gradients, you can pass an array of objects each with a `name` and a
+	 * `gradients` array which will in turn contain the predefined gradient objects.
+	 *
+	 * @default []
+	 */
+	gradients?: GradientsProp;
+	/**
+	 * Start opting in to the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * If true, the gradient picker will not be displayed and only defined
+	 * gradients from `gradients` will be shown.
+	 *
+	 * @default false
+	 */
+	disableCustomGradients?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type PickerProps< TOriginType extends GradientObject | OriginObject > =
+	GradientPickerBaseProps & {
+		clearGradient: () => void;
+		onChange: (
+			currentGradient: string | undefined,
+			index: number
+		) => void;
+		actions?: React.ReactNode;
+		gradients: TOriginType[];
+	};
diff --git a/packages/components/src/grid/README.md b/packages/components/src/grid/README.md
index 85640de2868c40..15cd959e135bee 100644
--- a/packages/components/src/grid/README.md
+++ b/packages/components/src/grid/README.md
@@ -27,69 +27,69 @@ function Example() {
 
 ## Props
 
-##### `align`: `CSS['alignItems']`
+### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
 -   Required: No
 
-##### `alignment`: `GridAlignment`
+### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
 -   Required: No
 
-##### `columnGap`: `CSSProperties['gridColumnGap']`
+### `columnGap`: `CSSProperties['gridColumnGap']`
 
 Adjusts the `grid-column-gap`.
 
 -   Required: No
 
-##### `columns`: `number`
+### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
 -   Required: No
 -   Default: `2`
 
-##### `gap`: `number`
+### `gap`: `number`
 
 Gap between each child.
 
 -   Required: No
 -   Default: `3`
 
-##### `isInline`: `boolean`
+### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
 -   Required: No
 
-##### `justify`: `CSS['justifyContent']`
+### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
 -   Required: No
 
-##### `rowGap`: `CSSProperties['gridRowGap']`
+### `rowGap`: `CSSProperties['gridRowGap']`
 
 Adjusts the `grid-row-gap`.
 
 -   Required: No
 
-##### `rows`: `number`
+### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
 -   Required: No
 
-##### `templateColumns`: `CSS['gridTemplateColumns']`
+### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
 -   Required: No
 
-##### `templateRows`: `CSS['gridTemplateRows']`
+### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
 
diff --git a/packages/components/src/grid/component.tsx b/packages/components/src/grid/component.tsx
index 689e641774f726..f18909c8e1c9ae 100644
--- a/packages/components/src/grid/component.tsx
+++ b/packages/components/src/grid/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import useGrid from './hook';
 import type { GridProps } from './types';
diff --git a/packages/components/src/grid/hook.ts b/packages/components/src/grid/hook.ts
index be615a884fd1c1..621438c96df7b3 100644
--- a/packages/components/src/grid/hook.ts
+++ b/packages/components/src/grid/hook.ts
@@ -11,9 +11,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import { getAlignmentProps } from './utils';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import { useResponsiveValue } from '../utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
 import type { GridProps } from './types';
diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx
new file mode 100644
index 00000000000000..5b2284e22d27e3
--- /dev/null
+++ b/packages/components/src/grid/stories/index.story.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Grid } from '..';
+
+const meta: Meta< typeof Grid > = {
+	component: Grid,
+	title: 'Components (Experimental)/Grid',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		align: { control: { type: 'text' } },
+		children: { control: false },
+		columnGap: { control: { type: 'text' } },
+		columns: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		justify: { control: { type: 'text' } },
+		rowGap: { control: { type: 'text' } },
+		rows: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		templateColumns: { control: { type: 'text' } },
+		templateRows: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Item = ( props: { children: string } ) => (
+	<View
+		style={ {
+			borderRadius: 8,
+			background: '#eee',
+			padding: 8,
+			textAlign: 'center',
+		} }
+		{ ...props }
+	/>
+);
+
+const Template: StoryFn< typeof Grid > = ( props ) => (
+	<Grid { ...props }>
+		<Item>One</Item>
+		<Item>Two</Item>
+		<Item>Three</Item>
+		<Item>Four</Item>
+		<Item>Five</Item>
+		<Item>Six</Item>
+		<Item>Seven</Item>
+		<Item>Eight</Item>
+	</Grid>
+);
+
+export const Default: StoryFn< typeof Grid > = Template.bind( {} );
+Default.args = {
+	alignment: 'bottom',
+	columns: 4,
+	gap: 2,
+};
diff --git a/packages/components/src/grid/stories/index.tsx b/packages/components/src/grid/stories/index.tsx
deleted file mode 100644
index 44451c54fd6c95..00000000000000
--- a/packages/components/src/grid/stories/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Grid } from '..';
-
-const meta: ComponentMeta< typeof Grid > = {
-	component: Grid,
-	title: 'Components (Experimental)/Grid',
-	argTypes: {
-		as: { control: { type: 'text' } },
-		align: { control: { type: 'text' } },
-		children: { control: { type: null } },
-		columnGap: { control: { type: 'text' } },
-		columns: {
-			table: { type: { summary: 'number' } },
-			control: { type: 'number' },
-		},
-		justify: { control: { type: 'text' } },
-		rowGap: { control: { type: 'text' } },
-		rows: {
-			table: { type: { summary: 'number' } },
-			control: { type: 'number' },
-		},
-		templateColumns: { control: { type: 'text' } },
-		templateRows: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Item = ( props: { children: string } ) => (
-	<View
-		style={ {
-			borderRadius: 8,
-			background: '#eee',
-			padding: 8,
-			textAlign: 'center',
-		} }
-		{ ...props }
-	/>
-);
-
-const Template: ComponentStory< typeof Grid > = ( props ) => (
-	<Grid { ...props }>
-		<Item>One</Item>
-		<Item>Two</Item>
-		<Item>Three</Item>
-		<Item>Four</Item>
-		<Item>Five</Item>
-		<Item>Six</Item>
-		<Item>Seven</Item>
-		<Item>Eight</Item>
-	</Grid>
-);
-
-export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
-Default.args = {
-	alignment: 'bottom',
-	columns: 4,
-	gap: 2,
-};
diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts
index 878e23f8ff5317..44258064e46a69 100644
--- a/packages/components/src/grid/types.ts
+++ b/packages/components/src/grid/types.ts
@@ -6,7 +6,7 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
+import type { ResponsiveCSSValue } from '../utils/types';
 
 type GridAlignment =
 	| 'bottom'
diff --git a/packages/components/src/guide/README.md b/packages/components/src/guide/README.md
index 061332234cdbc2..01b11823380059 100644
--- a/packages/components/src/guide/README.md
+++ b/packages/components/src/guide/README.md
@@ -37,20 +37,6 @@ function MyTutorial() {
 
 The component accepts the following props:
 
-### onFinish
-
-A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
-
--   Type: `function`
--   Required: Yes
-
-### pages
-
-A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.
-
--   Type: `array`
--   Required: Yes
-
 ### className
 
 A custom class to add to the modal.
@@ -62,7 +48,7 @@ A custom class to add to the modal.
 
 This property is used as the modal's accessibility label. It is required for accessibility reasons.
 
--   Type: `String`
+-   Type: `string`
 -   Required: Yes
 
 ### finishButtonText
@@ -71,3 +57,19 @@ Use this to customize the label of the _Finish_ button shown at the end of the g
 
 -   Type: `string`
 -   Required: No
+-	Default: `'Finish'`
+
+### onFinish
+
+A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
+
+-   Type: `( event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent ) => void`
+-   Required: Yes
+
+### pages
+
+A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.
+
+-   Type: `{ content: ReactNode; image?: ReactNode; }[]`
+-   Required: No
+-   Default: `[]`
diff --git a/packages/components/src/guide/icons.js b/packages/components/src/guide/icons.js
deleted file mode 100644
index 1f9713d6fdd8c5..00000000000000
--- a/packages/components/src/guide/icons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Circle } from '@wordpress/primitives';
-
-export const PageControlIcon = ( { isSelected } ) => (
-	<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Circle
-			cx="4"
-			cy="4"
-			r="4"
-			fill={ isSelected ? '#419ECD' : '#E1E3E6' }
-		/>
-	</SVG>
-);
diff --git a/packages/components/src/guide/icons.tsx b/packages/components/src/guide/icons.tsx
new file mode 100644
index 00000000000000..36146611dc299a
--- /dev/null
+++ b/packages/components/src/guide/icons.tsx
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Circle } from '@wordpress/primitives';
+
+export const PageControlIcon = () => (
+	<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Circle cx="4" cy="4" r="4" />
+	</SVG>
+);
diff --git a/packages/components/src/guide/index.js b/packages/components/src/guide/index.js
deleted file mode 100644
index 4669f13471801b..00000000000000
--- a/packages/components/src/guide/index.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, Children, useRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
-import Modal from '../modal';
-import Button from '../button';
-import PageControl from './page-control';
-
-export default function Guide( {
-	children,
-	className,
-	contentLabel,
-	finishButtonText,
-	onFinish,
-	pages = [],
-} ) {
-	const guideContainer = useRef();
-	const [ currentPage, setCurrentPage ] = useState( 0 );
-
-	useEffect( () => {
-		if ( Children.count( children ) ) {
-			deprecated( 'Passing children to <Guide>', {
-				since: '5.5',
-				alternative: 'the `pages` prop',
-			} );
-		}
-	}, [ children ] );
-
-	useEffect( () => {
-		// Each time we change the current page, start from the first element of the page.
-		// This also solves any focus loss that can happen.
-		if ( guideContainer.current ) {
-			focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
-		}
-	}, [ currentPage ] );
-
-	if ( Children.count( children ) ) {
-		pages = Children.map( children, ( child ) => ( { content: child } ) );
-	}
-
-	const canGoBack = currentPage > 0;
-	const canGoForward = currentPage < pages.length - 1;
-
-	const goBack = () => {
-		if ( canGoBack ) {
-			setCurrentPage( currentPage - 1 );
-		}
-	};
-
-	const goForward = () => {
-		if ( canGoForward ) {
-			setCurrentPage( currentPage + 1 );
-		}
-	};
-
-	if ( pages.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className={ classnames( 'components-guide', className ) }
-			contentLabel={ contentLabel }
-			onRequestClose={ onFinish }
-			onKeyDown={ ( event ) => {
-				if ( event.code === 'ArrowLeft' ) {
-					goBack();
-					// Do not scroll the modal's contents.
-					event.preventDefault();
-				} else if ( event.code === 'ArrowRight' ) {
-					goForward();
-					// Do not scroll the modal's contents.
-					event.preventDefault();
-				}
-			} }
-			ref={ guideContainer }
-		>
-			<div className="components-guide__container">
-				<div className="components-guide__page">
-					{ pages[ currentPage ].image }
-
-					{ pages.length > 1 && (
-						<PageControl
-							currentPage={ currentPage }
-							numberOfPages={ pages.length }
-							setCurrentPage={ setCurrentPage }
-						/>
-					) }
-
-					{ pages[ currentPage ].content }
-				</div>
-
-				<div className="components-guide__footer">
-					{ canGoBack && (
-						<Button
-							className="components-guide__back-button"
-							onClick={ goBack }
-						>
-							{ __( 'Previous' ) }
-						</Button>
-					) }
-					{ canGoForward && (
-						<Button
-							className="components-guide__forward-button"
-							onClick={ goForward }
-						>
-							{ __( 'Next' ) }
-						</Button>
-					) }
-					{ ! canGoForward && (
-						<Button
-							className="components-guide__finish-button"
-							onClick={ onFinish }
-						>
-							{ finishButtonText || __( 'Finish' ) }
-						</Button>
-					) }
-				</div>
-			</div>
-		</Modal>
-	);
-}
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
new file mode 100644
index 00000000000000..121c9f22330e88
--- /dev/null
+++ b/packages/components/src/guide/index.tsx
@@ -0,0 +1,178 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, Children, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Modal from '../modal';
+import Button from '../button';
+import PageControl from './page-control';
+import type { GuideProps } from './types';
+
+/**
+ * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
+ *
+ * ```jsx
+ * function MyTutorial() {
+ * 	const [ isOpen, setIsOpen ] = useState( true );
+ *
+ * 	if ( ! isOpen ) {
+ * 		return null;
+ * 	}
+ *
+ * 	return (
+ * 		<Guide
+ * 			onFinish={ () => setIsOpen( false ) }
+ * 			pages={ [
+ * 				{
+ * 					content: <p>Welcome to the ACME Store!</p>,
+ * 				},
+ * 				{
+ * 					image: <img src="https://acmestore.com/add-to-cart.png" />,
+ * 					content: (
+ * 						<p>
+ * 							Click <i>Add to Cart</i> to buy a product.
+ * 						</p>
+ * 					),
+ * 				},
+ * 			] }
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
+function Guide( {
+	children,
+	className,
+	contentLabel,
+	finishButtonText = __( 'Finish' ),
+	onFinish,
+	pages = [],
+}: GuideProps ) {
+	const ref = useRef< HTMLDivElement >( null );
+	const [ currentPage, setCurrentPage ] = useState( 0 );
+
+	useEffect( () => {
+		// Place focus at the top of the guide on mount and when the page changes.
+		const frame = ref.current?.querySelector( '.components-guide' );
+		if ( frame instanceof HTMLElement ) {
+			frame.focus();
+		}
+	}, [ currentPage ] );
+
+	useEffect( () => {
+		if ( Children.count( children ) ) {
+			deprecated( 'Passing children to <Guide>', {
+				since: '5.5',
+				alternative: 'the `pages` prop',
+			} );
+		}
+	}, [ children ] );
+
+	if ( Children.count( children ) ) {
+		pages =
+			Children.map( children, ( child ) => ( {
+				content: child,
+			} ) ) ?? [];
+	}
+
+	const canGoBack = currentPage > 0;
+	const canGoForward = currentPage < pages.length - 1;
+
+	const goBack = () => {
+		if ( canGoBack ) {
+			setCurrentPage( currentPage - 1 );
+		}
+	};
+
+	const goForward = () => {
+		if ( canGoForward ) {
+			setCurrentPage( currentPage + 1 );
+		}
+	};
+
+	if ( pages.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className={ clsx( 'components-guide', className ) }
+			contentLabel={ contentLabel }
+			isDismissible={ pages.length > 1 }
+			onRequestClose={ onFinish }
+			onKeyDown={ ( event ) => {
+				if ( event.code === 'ArrowLeft' ) {
+					goBack();
+					// Do not scroll the modal's contents.
+					event.preventDefault();
+				} else if ( event.code === 'ArrowRight' ) {
+					goForward();
+					// Do not scroll the modal's contents.
+					event.preventDefault();
+				}
+			} }
+			ref={ ref }
+		>
+			<div className="components-guide__container">
+				<div className="components-guide__page">
+					{ pages[ currentPage ].image }
+
+					{ pages.length > 1 && (
+						<PageControl
+							currentPage={ currentPage }
+							numberOfPages={ pages.length }
+							setCurrentPage={ setCurrentPage }
+						/>
+					) }
+
+					{ pages[ currentPage ].content }
+				</div>
+
+				<div className="components-guide__footer">
+					{ canGoBack && (
+						<Button
+							className="components-guide__back-button"
+							variant="tertiary"
+							onClick={ goBack }
+							__next40pxDefaultSize
+						>
+							{ __( 'Previous' ) }
+						</Button>
+					) }
+					{ canGoForward && (
+						<Button
+							className="components-guide__forward-button"
+							variant="primary"
+							onClick={ goForward }
+							__next40pxDefaultSize
+						>
+							{ __( 'Next' ) }
+						</Button>
+					) }
+					{ ! canGoForward && (
+						<Button
+							className="components-guide__finish-button"
+							variant="primary"
+							onClick={ onFinish }
+							__next40pxDefaultSize
+						>
+							{ finishButtonText }
+						</Button>
+					) }
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+export default Guide;
diff --git a/packages/components/src/guide/page-control.js b/packages/components/src/guide/page-control.js
deleted file mode 100644
index 41547c18326dfd..00000000000000
--- a/packages/components/src/guide/page-control.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { PageControlIcon } from './icons';
-
-export default function PageControl( {
-	currentPage,
-	numberOfPages,
-	setCurrentPage,
-} ) {
-	return (
-		<ul
-			className="components-guide__page-control"
-			aria-label={ __( 'Guide controls' ) }
-		>
-			{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (
-				<li
-					key={ page }
-					// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
-					aria-current={ page === currentPage ? 'step' : undefined }
-				>
-					<Button
-						key={ page }
-						icon={
-							<PageControlIcon
-								isSelected={ page === currentPage }
-							/>
-						}
-						aria-label={ sprintf(
-							/* translators: 1: current page number 2: total number of pages */
-							__( 'Page %1$d of %2$d' ),
-							page + 1,
-							numberOfPages
-						) }
-						onClick={ () => setCurrentPage( page ) }
-					/>
-				</li>
-			) ) }
-		</ul>
-	);
-}
diff --git a/packages/components/src/guide/page-control.tsx b/packages/components/src/guide/page-control.tsx
new file mode 100644
index 00000000000000..80b0a641c2a430
--- /dev/null
+++ b/packages/components/src/guide/page-control.tsx
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { PageControlIcon } from './icons';
+import type { PageControlProps } from './types';
+
+export default function PageControl( {
+	currentPage,
+	numberOfPages,
+	setCurrentPage,
+}: PageControlProps ) {
+	return (
+		<ul
+			className="components-guide__page-control"
+			aria-label={ __( 'Guide controls' ) }
+		>
+			{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (
+				<li
+					key={ page }
+					// Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
+					aria-current={ page === currentPage ? 'step' : undefined }
+				>
+					<Button
+						size="small"
+						key={ page }
+						icon={ <PageControlIcon /> }
+						aria-label={ sprintf(
+							/* translators: 1: current page number 2: total number of pages */
+							__( 'Page %1$d of %2$d' ),
+							page + 1,
+							numberOfPages
+						) }
+						onClick={ () => setCurrentPage( page ) }
+					/>
+				</li>
+			) ) }
+		</ul>
+	);
+}
diff --git a/packages/components/src/guide/page.js b/packages/components/src/guide/page.js
deleted file mode 100644
index 2b8cec1af5492c..00000000000000
--- a/packages/components/src/guide/page.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-export default function GuidePage( props ) {
-	useEffect( () => {
-		deprecated( '<GuidePage>', {
-			since: '5.5',
-			alternative: 'the `pages` prop in <Guide>',
-		} );
-	}, [] );
-
-	return <div { ...props } />;
-}
diff --git a/packages/components/src/guide/page.tsx b/packages/components/src/guide/page.tsx
new file mode 100644
index 00000000000000..04dbabb34854ac
--- /dev/null
+++ b/packages/components/src/guide/page.tsx
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+
+export default function GuidePage(
+	props: WordPressComponentProps< {}, 'div', false >
+) {
+	useEffect( () => {
+		deprecated( '<GuidePage>', {
+			since: '5.5',
+			alternative: 'the `pages` prop in <Guide>',
+		} );
+	}, [] );
+
+	return <div { ...props } />;
+}
diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js
deleted file mode 100644
index be7a17b2590ce9..00000000000000
--- a/packages/components/src/guide/stories/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import Guide from '../';
-
-export default {
-	title: 'Components/Guide',
-	component: Guide,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const ModalExample = ( { numberOfPages, ...props } ) => {
-	const [ isOpen, setOpen ] = useState( false );
-
-	const openGuide = () => setOpen( true );
-	const closeGuide = () => setOpen( false );
-
-	const loremIpsum =
-		'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.';
-
-	return (
-		<>
-			<Button variant="secondary" onClick={ openGuide }>
-				Open Guide
-			</Button>
-			{ isOpen && (
-				<Guide
-					{ ...props }
-					onFinish={ closeGuide }
-					pages={ Array.from( { length: numberOfPages } ).map(
-						( _, page ) => ( {
-							content: (
-								<>
-									<h1>
-										Page { page + 1 } of { numberOfPages }
-									</h1>
-									<p>{ loremIpsum }</p>
-								</>
-							),
-						} )
-					) }
-				/>
-			) }
-		</>
-	);
-};
-
-export const _default = () => {
-	const finishButtonText = text( 'finishButtonText', 'Finish' );
-	const contentLabel = text( 'title', 'Guide title' );
-	const numberOfPages = number( 'numberOfPages', 3, {
-		range: true,
-		min: 1,
-		max: 10,
-		step: 1,
-	} );
-
-	const modalProps = {
-		finishButtonText,
-		contentLabel,
-		numberOfPages,
-	};
-
-	return <ModalExample { ...modalProps } />;
-};
diff --git a/packages/components/src/guide/stories/index.story.tsx b/packages/components/src/guide/stories/index.story.tsx
new file mode 100644
index 00000000000000..d9154a02097e71
--- /dev/null
+++ b/packages/components/src/guide/stories/index.story.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Guide from '..';
+
+const meta: Meta< typeof Guide > = {
+	title: 'Components/Guide',
+	component: Guide,
+	argTypes: {
+		contentLabel: { control: 'text' },
+		finishButtonText: { control: 'text' },
+		onFinish: { action: 'onFinish' },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
+	const [ isOpen, setOpen ] = useState( false );
+
+	const openGuide = () => setOpen( true );
+	const closeGuide = () => setOpen( false );
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openGuide }>
+				Open Guide
+			</Button>
+			{ isOpen && (
+				<Guide
+					{ ...props }
+					onFinish={ ( ...finishArgs ) => {
+						closeGuide();
+						onFinish?.( ...finishArgs );
+					} }
+				/>
+			) }
+		</>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	pages: Array.from( { length: 3 } ).map( ( _, page ) => ( {
+		content: <p>{ `Page ${ page + 1 }` }</p>,
+	} ) ),
+};
diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss
index 5731f81de10ed1..df52d5325f3fbf 100644
--- a/packages/components/src/guide/style.scss
+++ b/packages/components/src/guide/style.scss
@@ -9,7 +9,6 @@
 	.components-modal__content {
 		padding: 0;
 		margin-top: 0;
-		border-radius: $radius-block-ui;
 
 		&::before {
 			content: none;
@@ -29,13 +28,13 @@
 
 			&:hover {
 				svg {
-					fill: #fff;
+					fill: $white;
 				}
 			}
 		}
 	}
 
-	&__container {
+	.components-guide__container {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -43,7 +42,7 @@
 		min-height: 100%;
 	}
 
-	&__page {
+	.components-guide__page {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -54,10 +53,10 @@
 		}
 	}
 
-	&__footer {
+	.components-guide__footer {
 		align-content: center;
 		display: flex;
-		height: 30px;
+		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
 		padding: 0 $grid-unit-40;
@@ -65,7 +64,7 @@
 		width: 100%;
 	}
 
-	&__page-control {
+	.components-guide__page-control {
 		margin: 0;
 		text-align: center;
 
@@ -75,9 +74,12 @@
 		}
 
 		.components-button {
-			height: 30px;
-			min-width: 20px;
 			margin: -6px 0;
+			color: $gray-200;
+		}
+
+		li[aria-current="step"] .components-button {
+			color: $components-color-accent;
 		}
 	}
 }
@@ -85,7 +87,6 @@
 .components-modal__frame.components-guide {
 	border: none;
 	min-width: 312px;
-	height: 80vh;
 	max-height: 575px;
 
 	@media ( max-width: $break-small ) {
@@ -98,34 +99,14 @@
 	&.components-guide__back-button,
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		height: 30px;
 		position: absolute;
 	}
 
-	&.components-guide__back-button,
-	&.components-guide__forward-button {
-		font-size: $default-font-size;
-		padding: 4px 2px;
-
-		&.has-text svg {
-			margin: 0;
-		}
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
 	&.components-guide__back-button {
 		left: $grid-unit-40;
 	}
 
-	&.components-guide__forward-button {
-		right: $grid-unit-40;
-		color: #1386bf;
-		font-weight: bold;
-	}
-
+	&.components-guide__forward-button,
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}
diff --git a/packages/components/src/guide/test/index.js b/packages/components/src/guide/test/index.js
deleted file mode 100644
index 852c09ed280887..00000000000000
--- a/packages/components/src/guide/test/index.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import Guide from '../';
-
-describe( 'Guide', () => {
-	it( 'renders nothing when there are no pages', () => {
-		render( <Guide pages={ [] } /> );
-		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders one page at a time', () => {
-		render(
-			<Guide
-				pages={ [
-					{ content: <p>Page 1</p> },
-					{ content: <p>Page 2</p> },
-				] }
-			/>
-		);
-
-		expect( screen.queryByRole( 'dialog' ) ).toBeVisible();
-		expect( screen.queryByText( 'Page 1' ) ).toBeVisible();
-		expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'hides back button and shows forward button on the first page', () => {
-		render(
-			<Guide
-				pages={ [
-					{ content: <p>Page 1</p> },
-					{ content: <p>Page 2</p> },
-				] }
-			/>
-		);
-
-		expect(
-			screen.queryByRole( 'button', { name: 'Previous' } )
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole( 'button', { name: 'Next' } )
-		).toBeVisible();
-		expect(
-			screen.queryByRole( 'button', { name: 'Finish' } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'shows back button and shows finish button on the last page', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		render(
-			<Guide
-				pages={ [
-					{ content: <p>Page 1</p> },
-					{ content: <p>Page 2</p> },
-				] }
-			/>
-		);
-		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
-
-		expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-		expect( screen.queryByText( 'Page 2' ) ).toBeVisible();
-
-		expect(
-			screen.queryByRole( 'button', { name: 'Previous' } )
-		).toBeVisible();
-		expect(
-			screen.queryByRole( 'button', { name: 'Next' } )
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole( 'button', { name: 'Finish' } )
-		).toBeVisible();
-	} );
-
-	it( "doesn't display the page control if there is only one page", () => {
-		render( <Guide pages={ [ { content: <p>Page 1</p> } ] } /> );
-		expect(
-			screen.queryByRole( 'list', { name: 'Guide controls' } )
-		).not.toBeInTheDocument();
-	} );
-
-	it( 'calls onFinish when the finish button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onFinish = jest.fn();
-		render(
-			<Guide
-				onFinish={ onFinish }
-				pages={ [ { content: <p>Page 1</p> } ] }
-			/>
-		);
-		await user.click( screen.getByRole( 'button', { name: 'Finish' } ) );
-
-		expect( onFinish ).toHaveBeenCalled();
-	} );
-
-	it( 'calls onFinish when the modal is closed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onFinish = jest.fn();
-		render(
-			<Guide
-				onFinish={ onFinish }
-				pages={ [ { content: <p>Page 1</p> } ] }
-			/>
-		);
-
-		await user.keyboard( '[Escape]' );
-
-		expect( onFinish ).toHaveBeenCalled();
-	} );
-
-	describe( 'page navigation', () => {
-		it( 'renders an empty list when there are no pages', () => {
-			render( <Guide pages={ [] } /> );
-			expect(
-				screen.queryByRole( 'list', {
-					name: 'Guide controls',
-				} )
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByRole( 'button', {
-					name: /page \d of \d/i,
-				} )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'renders a button for each page', () => {
-			render(
-				<Guide
-					pages={ [
-						{ content: <p>Page 1</p> },
-						{ content: <p>Page 2</p> },
-						{ content: <p>Page 3</p> },
-						{ content: <p>Page 4</p> },
-					] }
-				/>
-			);
-			const listContainer = screen.getByRole( 'list', {
-				name: 'Guide controls',
-			} );
-			expect(
-				within( listContainer ).getAllByRole( 'button', {
-					name: /page \d of \d/i,
-				} )
-			).toHaveLength( 4 );
-		} );
-
-		it( 'sets the current page when a button is clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Guide
-					pages={ [
-						{ content: <p>Page 1</p> },
-						{ content: <p>Page 2</p> },
-						{ content: <p>Page 3</p> },
-					] }
-				/>
-			);
-
-			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Page 2 of 3' } )
-			);
-
-			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Page 3 of 3' } )
-			);
-
-			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-
-			await user.click(
-				screen.getByRole( 'button', { name: 'Page 1 of 3' } )
-			);
-
-			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'allows navigating through the pages with the left and right arrows', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Guide
-					pages={ [
-						{ content: <p>Page 1</p> },
-						{ content: <p>Page 2</p> },
-						{ content: <p>Page 3</p> },
-					] }
-				/>
-			);
-
-			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowLeft]' );
-
-			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowRight]' );
-
-			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowRight]' );
-
-			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowRight]' );
-
-			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowLeft]' );
-
-			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-
-			await user.keyboard( '[ArrowLeft]' );
-
-			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
-			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
-			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
-		} );
-	} );
-} );
diff --git a/packages/components/src/guide/test/index.tsx b/packages/components/src/guide/test/index.tsx
new file mode 100644
index 00000000000000..eff2886cb038b9
--- /dev/null
+++ b/packages/components/src/guide/test/index.tsx
@@ -0,0 +1,266 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import Guide from '..';
+
+const defaultProps = {
+	onFinish: () => {},
+	contentLabel: 'Arbitrary Content Label',
+};
+
+describe( 'Guide', () => {
+	it( 'renders nothing when there are no pages', () => {
+		render( <Guide { ...defaultProps } pages={ [] } /> );
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders one page at a time', () => {
+		render(
+			<Guide
+				{ ...defaultProps }
+				pages={ [
+					{ content: <p>Page 1</p> },
+					{ content: <p>Page 2</p> },
+				] }
+			/>
+		);
+
+		expect( screen.queryByRole( 'dialog' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 1' ) ).toBeVisible();
+		expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'hides back button and shows forward button on the first page', () => {
+		render(
+			<Guide
+				{ ...defaultProps }
+				pages={ [
+					{ content: <p>Page 1</p> },
+					{ content: <p>Page 2</p> },
+				] }
+			/>
+		);
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'shows back button and shows finish button on the last page', async () => {
+		const user = userEvent.setup();
+		render(
+			<Guide
+				{ ...defaultProps }
+				pages={ [
+					{ content: <p>Page 1</p> },
+					{ content: <p>Page 2</p> },
+				] }
+			/>
+		);
+		await user.click( screen.getByRole( 'button', { name: 'Next' } ) );
+
+		expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Page 2' ) ).toBeVisible();
+
+		expect(
+			screen.queryByRole( 'button', { name: 'Previous' } )
+		).toBeVisible();
+		expect(
+			screen.queryByRole( 'button', { name: 'Next' } )
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'button', { name: 'Finish' } )
+		).toBeVisible();
+	} );
+
+	it( "doesn't display the page control if there is only one page", () => {
+		render(
+			<Guide
+				{ ...defaultProps }
+				pages={ [ { content: <p>Page 1</p> } ] }
+			/>
+		);
+		expect(
+			screen.queryByRole( 'list', { name: 'Guide controls' } )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'calls onFinish when the finish button is clicked', async () => {
+		const user = userEvent.setup();
+		const onFinish = jest.fn();
+		render(
+			<Guide
+				{ ...defaultProps }
+				onFinish={ onFinish }
+				pages={ [ { content: <p>Page 1</p> } ] }
+			/>
+		);
+		await user.click( screen.getByRole( 'button', { name: 'Finish' } ) );
+
+		expect( onFinish ).toHaveBeenCalled();
+	} );
+
+	it( 'calls onFinish when the modal is closed', async () => {
+		const user = userEvent.setup();
+		const onFinish = jest.fn();
+		render(
+			<Guide
+				{ ...defaultProps }
+				onFinish={ onFinish }
+				pages={ [ { content: <p>Page 1</p> } ] }
+			/>
+		);
+
+		await user.keyboard( '[Escape]' );
+
+		expect( onFinish ).toHaveBeenCalled();
+	} );
+
+	describe( 'page navigation', () => {
+		it( 'renders an empty list when there are no pages', () => {
+			render( <Guide { ...defaultProps } pages={ [] } /> );
+			expect(
+				screen.queryByRole( 'list', {
+					name: 'Guide controls',
+				} )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'renders a button for each page', () => {
+			render(
+				<Guide
+					{ ...defaultProps }
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+						{ content: <p>Page 4</p> },
+					] }
+				/>
+			);
+			const listContainer = screen.getByRole( 'list', {
+				name: 'Guide controls',
+			} );
+			expect(
+				within( listContainer ).getAllByRole( 'button', {
+					name: /page \d of \d/i,
+				} )
+			).toHaveLength( 4 );
+		} );
+
+		it( 'sets the current page when a button is clicked', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<Guide
+					{ ...defaultProps }
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 2 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 3 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Page 1 of 3' } )
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'allows navigating through the pages with the left and right arrows', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<Guide
+					{ ...defaultProps }
+					pages={ [
+						{ content: <p>Page 1</p> },
+						{ content: <p>Page 2</p> },
+						{ content: <p>Page 3</p> },
+					] }
+				/>
+			);
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowRight]' );
+
+			expect( screen.getByText( 'Page 3' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 2' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 1' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+
+			await user.keyboard( '[ArrowLeft]' );
+
+			expect( screen.getByText( 'Page 1' ) ).toBeVisible();
+			expect( screen.queryByText( 'Page 2' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Page 3' ) ).not.toBeInTheDocument();
+		} );
+	} );
+} );
diff --git a/packages/components/src/guide/types.ts b/packages/components/src/guide/types.ts
new file mode 100644
index 00000000000000..62c1816a5c6720
--- /dev/null
+++ b/packages/components/src/guide/types.ts
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { ModalProps } from '../modal/types';
+
+export type Page = {
+	/**
+	 * Content of the page.
+	 */
+	content: ReactNode;
+	/**
+	 * Image displayed above the page content.
+	 */
+	image?: ReactNode;
+};
+
+export type GuideProps = {
+	/**
+	 * Deprecated. Use `pages` prop instead.
+	 *
+	 * @deprecated since 5.5
+	 */
+	children?: ReactNode;
+	/**
+	 * A custom class to add to the modal.
+	 */
+	className?: string;
+	/**
+	 * Used as the modal's accessibility label.
+	 */
+	contentLabel: ModalProps[ 'contentLabel' ];
+	/**
+	 * Use this to customize the label of the _Finish_ button shown at the end of the guide.
+	 *
+	 * @default 'Finish'
+	 */
+	finishButtonText?: string;
+	/**
+	 * A function which is called when the guide is finished.
+	 */
+	onFinish: ModalProps[ 'onRequestClose' ];
+	/**
+	 * A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.
+	 *
+	 * @default []
+	 */
+	pages?: Page[];
+};
+
+export type PageControlProps = {
+	/**
+	 * Current page index.
+	 */
+	currentPage: number;
+	/**
+	 * Total number of pages.
+	 */
+	numberOfPages: number;
+	/**
+	 * Called when user clicks on a `PageControlIcon` button.
+	 */
+	setCurrentPage: ( page: number ) => void;
+};
diff --git a/packages/components/src/h-stack/README.md b/packages/components/src/h-stack/README.md
index a0b63c7521fcb1..77e3c77b940f2a 100644
--- a/packages/components/src/h-stack/README.md
+++ b/packages/components/src/h-stack/README.md
@@ -29,7 +29,7 @@ function Example() {
 
 ## Props
 
-##### alignment
+### alignment
 
 **Type**: `HStackAlignment` | `CSS[ 'alignItems' ]`
 
@@ -44,36 +44,36 @@ Determines how the child elements are aligned.
 -   `bottom`: Aligns content to the bottom.
 -   `bottomLeft`: Aligns content to the bottom/left.
 -   `bottomRight`: Aligns content to the bottom/right.
--   `edge`: Aligns content to the edges of the container.
--   `stretch`: Stretches content to the edges of the container.
+-   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+-   `stretch`: Stretches content to the cross axis edges of the container.
 
-##### direction
+### direction
 
 **Type**: `FlexDirection`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### expanded
+### expanded
 
 **Type**: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### justify
+### justify
 
 **Type**: `CSS['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
-##### spacing
+### spacing
 
 **Type**: `CSS['width']`
 
 The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
 The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).
 
-##### wrap
+### wrap
 
 **Type**: `boolean`
 
diff --git a/packages/components/src/h-stack/component.tsx b/packages/components/src/h-stack/component.tsx
index 1f1deb474db4b8..1d1efebe8a0912 100644
--- a/packages/components/src/h-stack/component.tsx
+++ b/packages/components/src/h-stack/component.tsx
@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useHStack } from './hook';
 import type { Props } from './types';
@@ -20,7 +21,6 @@ function UnconnectedHStack(
  *
  * `HStack` can render anything inside.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalHStack as HStack,
diff --git a/packages/components/src/h-stack/hook.tsx b/packages/components/src/h-stack/hook.tsx
index 2c281757c0fecd..bb473a881b9dea 100644
--- a/packages/components/src/h-stack/hook.tsx
+++ b/packages/components/src/h-stack/hook.tsx
@@ -6,14 +6,11 @@ import type { ReactElement } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	hasConnectNamespace,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { hasConnectNamespace, useContextSystem } from '../context';
 import { FlexItem, useFlex } from '../flex';
 import { getAlignmentProps } from './utils';
-import { getValidChildren } from '../ui/utils/get-valid-children';
+import { getValidChildren } from '../utils/get-valid-children';
 import type { Props } from './types';
 
 export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
@@ -50,7 +47,8 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 		gap: spacing,
 	};
 
-	const flexProps = useFlex( propsForFlex );
+	// Omit `isColumn` because it's not used in HStack.
+	const { isColumn, ...flexProps } = useFlex( propsForFlex );
 
 	return flexProps;
 }
diff --git a/packages/components/src/h-stack/stories/e2e/index.story.tsx b/packages/components/src/h-stack/stories/e2e/index.story.tsx
new file mode 100644
index 00000000000000..db965b5ac18987
--- /dev/null
+++ b/packages/components/src/h-stack/stories/e2e/index.story.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../../view';
+import { HStack } from '../..';
+
+const meta: Meta< typeof HStack > = {
+	component: HStack,
+	title: 'Components (Experimental)/HStack',
+};
+export default meta;
+
+const Template: StoryFn< typeof HStack > = ( props ) => {
+	return (
+		<HStack
+			style={ { background: '#eee', minHeight: '3rem' } }
+			{ ...props }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</HStack>
+	);
+};
+
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
+Default.args = {
+	spacing: 3,
+};
diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx
new file mode 100644
index 00000000000000..a2e5b4fa55e9fa
--- /dev/null
+++ b/packages/components/src/h-stack/stories/index.story.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { HStack } from '..';
+
+const ALIGNMENTS = {
+	top: 'top',
+	topLeft: 'topLeft',
+	topRight: 'topRight',
+	left: 'left',
+	center: 'center',
+	right: 'right',
+	bottom: 'bottom',
+	bottomLeft: 'bottomLeft',
+	bottomRight: 'bottomRight',
+	edge: 'edge',
+	stretch: 'stretch',
+};
+
+const DIRECTIONS = {
+	row: 'row',
+	column: 'column',
+	responsive: [ 'column', 'row' ],
+};
+
+const JUSTIFICATIONS = {
+	'space-around': 'space-around',
+	'space-between': 'space-between',
+	'space-evenly': 'space-evenly',
+	stretch: 'stretch',
+	center: 'center',
+	end: 'end',
+	'flex-end': 'flex-end',
+	'flex-start': 'flex-start',
+	start: 'start',
+};
+
+const meta: Meta< typeof HStack > = {
+	component: HStack,
+	title: 'Components (Experimental)/Layout/HStack',
+	id: 'components-experimental-hstack',
+	argTypes: {
+		as: {
+			control: false,
+		},
+		children: {
+			control: false,
+		},
+		alignment: {
+			control: { type: 'select' },
+			options: Object.keys( ALIGNMENTS ),
+			mapping: ALIGNMENTS,
+		},
+		direction: {
+			control: { type: 'select' },
+			options: Object.keys( DIRECTIONS ),
+			mapping: DIRECTIONS,
+		},
+		justify: {
+			control: { type: 'select' },
+			options: Object.keys( JUSTIFICATIONS ),
+			mapping: JUSTIFICATIONS,
+		},
+		spacing: {
+			control: { type: 'text' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof HStack > = ( args ) => (
+	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
+		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+			<View key={ text } style={ { background: '#b9f9ff' } }>
+				{ text }
+			</View>
+		) ) }
+	</HStack>
+);
+
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
+Default.args = {
+	spacing: '3',
+};
diff --git a/packages/components/src/h-stack/stories/index.tsx b/packages/components/src/h-stack/stories/index.tsx
deleted file mode 100644
index 479ac04c8acce2..00000000000000
--- a/packages/components/src/h-stack/stories/index.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { HStack } from '..';
-
-const ALIGNMENTS = {
-	top: 'top',
-	topLeft: 'topLeft',
-	topRight: 'topRight',
-	left: 'left',
-	center: 'center',
-	right: 'right',
-	bottom: 'bottom',
-	bottomLeft: 'bottomLeft',
-	bottomRight: 'bottomRight',
-	edge: 'edge',
-	stretch: 'stretch',
-};
-
-const DIRECTIONS = {
-	row: 'row',
-	column: 'column',
-	responsive: [ 'column', 'row' ],
-};
-
-const JUSTIFICATIONS = {
-	'space-around': 'space-around',
-	'space-between': 'space-between',
-	'space-evenly': 'space-evenly',
-	stretch: 'stretch',
-	center: 'center',
-	end: 'end',
-	'flex-end': 'flex-end',
-	'flex-start': 'flex-start',
-	start: 'start',
-};
-
-const meta: ComponentMeta< typeof HStack > = {
-	component: HStack,
-	title: 'Components (Experimental)/HStack',
-	argTypes: {
-		as: {
-			control: { type: null },
-		},
-		children: {
-			control: { type: null },
-		},
-		alignment: {
-			control: { type: 'select' },
-			options: Object.keys( ALIGNMENTS ),
-			mapping: ALIGNMENTS,
-		},
-		direction: {
-			control: { type: 'select' },
-			options: Object.keys( DIRECTIONS ),
-			mapping: DIRECTIONS,
-		},
-		justify: {
-			control: { type: 'select' },
-			options: Object.keys( JUSTIFICATIONS ),
-			mapping: JUSTIFICATIONS,
-		},
-		spacing: {
-			control: { type: 'text' },
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof HStack > = ( args ) => (
-	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
-		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
-			<View key={ text } style={ { background: '#b9f9ff' } }>
-				{ text }
-			</View>
-		) ) }
-	</HStack>
-);
-
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
-Default.args = {
-	spacing: '3',
-};
diff --git a/packages/components/src/h-stack/test/index.tsx b/packages/components/src/h-stack/test/index.tsx
index ea4f9c94fbe7f8..75352f3dfd22f0 100644
--- a/packages/components/src/h-stack/test/index.tsx
+++ b/packages/components/src/h-stack/test/index.tsx
@@ -39,4 +39,14 @@ describe( 'props', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	test( 'should not pass through invalid props to the `as` component', () => {
+		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+			return <div { ...props } />;
+		};
+
+		render( <HStack as={ AsComponent }>foobar</HStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );
diff --git a/packages/components/src/h-stack/types.ts b/packages/components/src/h-stack/types.ts
index e16a46746162ed..d9fe717eb44ab6 100644
--- a/packages/components/src/h-stack/types.ts
+++ b/packages/components/src/h-stack/types.ts
@@ -41,8 +41,8 @@ export type Props = Omit< FlexProps, 'align' | 'gap' > & {
 	 * * `bottom`: Aligns content to the bottom.
 	 * * `bottomLeft`: Aligns content to the bottom/left.
 	 * * `bottomRight`: Aligns content to the bottom/right.
-	 * * `edge`: Aligns content to the edges of the container.
-	 * * `stretch`: Stretches content to the edges of the container.
+	 * * `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+	 * * `stretch`: Stretches content to the cross axis edges of the container.
 	 *
 	 * @default 'edge'
 	 */
diff --git a/packages/components/src/h-stack/utils.ts b/packages/components/src/h-stack/utils.ts
index 3abddd0309f51c..b1413ee2dc8ef4 100644
--- a/packages/components/src/h-stack/utils.ts
+++ b/packages/components/src/h-stack/utils.ts
@@ -11,7 +11,7 @@ import { isValueDefined } from '../utils/values';
 
 const H_ALIGNMENTS: Alignments = {
 	bottom: { align: 'flex-end', justify: 'center' },
-	bottomLeft: { align: 'flex-start', justify: 'flex-end' },
+	bottomLeft: { align: 'flex-end', justify: 'flex-start' },
 	bottomRight: { align: 'flex-end', justify: 'flex-end' },
 	center: { align: 'center', justify: 'center' },
 	edge: { align: 'center', justify: 'space-between' },
@@ -25,13 +25,13 @@ const H_ALIGNMENTS: Alignments = {
 
 const V_ALIGNMENTS: Alignments = {
 	bottom: { justify: 'flex-end', align: 'center' },
-	bottomLeft: { justify: 'flex-start', align: 'flex-end' },
+	bottomLeft: { justify: 'flex-end', align: 'flex-start' },
 	bottomRight: { justify: 'flex-end', align: 'flex-end' },
 	center: { justify: 'center', align: 'center' },
 	edge: { justify: 'space-between', align: 'center' },
 	left: { justify: 'center', align: 'flex-start' },
 	right: { justify: 'center', align: 'flex-end' },
-	stretch: { justify: 'stretch' },
+	stretch: { align: 'stretch' },
 	top: { justify: 'flex-start', align: 'center' },
 	topLeft: { justify: 'flex-start', align: 'flex-start' },
 	topRight: { justify: 'flex-start', align: 'flex-end' },
diff --git a/packages/components/src/heading/README.md b/packages/components/src/heading/README.md
index 2989f4b25fbf46..a56e6e6ccd9321 100644
--- a/packages/components/src/heading/README.md
+++ b/packages/components/src/heading/README.md
@@ -18,9 +18,14 @@ function Example() {
 
 ## Props
 
-`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for `size` which is replaced by `level`. For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
+`Heading` uses `Text` underneath, so we have access to all of `Text`'s props except for:
 
-##### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+- `size` which is replaced by `level`;
+- `isBlock`'s default value, which is `true` for the `Heading` component.
+
+For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
+
+### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 Passing any of the heading levels to `level` will both render the correct typographic text size as well as the semantic element corresponding to the level (`h1` for `1` for example).
 
diff --git a/packages/components/src/heading/component.tsx b/packages/components/src/heading/component.tsx
index 7eb48be16b8a7f..a42af8b05f471d 100644
--- a/packages/components/src/heading/component.tsx
+++ b/packages/components/src/heading/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useHeading } from './hook';
 import type { HeadingProps } from './types';
diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts
index 3a92fffca7500d..d242afe1fdb2f5 100644
--- a/packages/components/src/heading/hook.ts
+++ b/packages/components/src/heading/hook.ts
@@ -1,9 +1,10 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import { useText } from '../text';
-import { getHeadingFontSize } from '../ui/utils/font-size';
+import { getHeadingFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import type { HeadingProps } from './types';
 
@@ -13,6 +14,9 @@ export function useHeading(
 	const {
 		as: asProp,
 		level = 2,
+		color = COLORS.gray[ 900 ],
+		isBlock = true,
+		weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps
 	} = useContextSystem( props, 'Heading' );
 
@@ -30,10 +34,10 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.gray[ 900 ],
+		color,
+		isBlock,
+		weight,
 		size: getHeadingFontSize( level ),
-		isBlock: true,
-		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
 		...otherProps,
 	} );
 
diff --git a/packages/components/src/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx
new file mode 100644
index 00000000000000..8777fb2c2e6507
--- /dev/null
+++ b/packages/components/src/heading/stories/index.story.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '..';
+
+const meta: Meta< typeof Heading > = {
+	component: Heading,
+	title: 'Components (Experimental)/Typography/Heading',
+	id: 'components-experimental-heading',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		variant: {
+			control: { type: 'select' },
+			options: [ undefined, 'muted' ],
+		},
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof Heading > = ( props ) => (
+	<Heading { ...props } />
+);
+Default.args = {
+	children: 'Heading',
+};
diff --git a/packages/components/src/heading/stories/index.tsx b/packages/components/src/heading/stories/index.tsx
deleted file mode 100644
index 8382504d05b604..00000000000000
--- a/packages/components/src/heading/stories/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Heading } from '..';
-
-const meta: ComponentMeta< typeof Heading > = {
-	component: Heading,
-	title: 'Components (Experimental)/Heading',
-	argTypes: {
-		adjustLineHeightForInnerControls: { control: { type: 'text' } },
-		as: { control: { type: 'text' } },
-		color: { control: { type: 'color' } },
-		display: { control: { type: 'text' } },
-		letterSpacing: { control: { type: 'text' } },
-		lineHeight: { control: { type: 'text' } },
-		optimizeReadabilityFor: { control: { type: 'color' } },
-		variant: {
-			control: { type: 'radio' },
-			options: [ 'undefined', 'muted' ],
-			mapping: { undefined, muted: 'muted' },
-		},
-		weight: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-export const Default: ComponentStory< typeof Heading > = ( props ) => (
-	<Heading { ...props } />
-);
-Default.args = {
-	children: 'Heading',
-};
diff --git a/packages/components/src/heading/test/__snapshots__/index.tsx.snap b/packages/components/src/heading/test/__snapshots__/index.tsx.snap
index 554446c2840cbc..cf863c4b2bb2ef 100644
--- a/packages/components/src/heading/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/heading/test/__snapshots__/index.tsx.snap
@@ -3,8 +3,10 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
@@ -25,6 +27,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -32,10 +35,10 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;
 
 exports[`props should render level as a string 1`] = `
@@ -43,6 +46,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -50,8 +54,8 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;
diff --git a/packages/components/src/heading/types.ts b/packages/components/src/heading/types.ts
index a7cac0d5b1f16b..6ec3f0a82ef2eb 100644
--- a/packages/components/src/heading/types.ts
+++ b/packages/components/src/heading/types.ts
@@ -17,7 +17,7 @@ export type HeadingSize =
 	| '5'
 	| '6';
 
-export type HeadingProps = Omit< TextProps, 'size' > & {
+export type HeadingProps = Omit< TextProps, 'isBlock' | 'color' | 'weight' > & {
 	/**
 	 * Passing any of the heading levels to `level` will both render the correct
 	 * typographic text size as well as the semantic element corresponding to
@@ -26,4 +26,23 @@ export type HeadingProps = Omit< TextProps, 'size' > & {
 	 * @default 2
 	 */
 	level?: HeadingSize;
+	/**
+	 * Sets `Heading` to have `display: block`. Note: text truncation only works
+	 * when `isBlock` is `false`.
+	 *
+	 * @default true
+	 */
+	isBlock?: TextProps[ 'isBlock' ];
+	/**
+	 * Adjusts the text color.
+	 *
+	 * @default '#1e1e1e'
+	 */
+	color?: TextProps[ 'color' ];
+	/**
+	 * Adjusts font-weight of the text.
+	 *
+	 * @default '600'
+	 */
+	weight?: TextProps[ 'weight' ];
 };
diff --git a/packages/components/src/higher-order/navigate-regions/index.js b/packages/components/src/higher-order/navigate-regions/index.js
deleted file mode 100644
index 0e76349cf3c0af..00000000000000
--- a/packages/components/src/higher-order/navigate-regions/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useRef } from '@wordpress/element';
-import {
-	createHigherOrderComponent,
-	useRefEffect,
-	useMergeRefs,
-} from '@wordpress/compose';
-import { isKeyboardEvent } from '@wordpress/keycodes';
-
-const defaultShortcuts = {
-	previous: [
-		{
-			modifier: 'ctrlShift',
-			character: '`',
-		},
-		{
-			modifier: 'ctrlShift',
-			character: '~',
-		},
-		{
-			modifier: 'access',
-			character: 'p',
-		},
-	],
-	next: [
-		{
-			modifier: 'ctrl',
-			character: '`',
-		},
-		{
-			modifier: 'access',
-			character: 'n',
-		},
-	],
-};
-
-export function useNavigateRegions( shortcuts = defaultShortcuts ) {
-	const ref = useRef();
-	const [ isFocusingRegions, setIsFocusingRegions ] = useState( false );
-
-	function focusRegion( offset ) {
-		const regions = Array.from(
-			ref.current.querySelectorAll( '[role="region"]' )
-		);
-		if ( ! regions.length ) {
-			return;
-		}
-		let nextRegion = regions[ 0 ];
-		const selectedIndex = regions.indexOf(
-			ref.current.ownerDocument.activeElement
-		);
-		if ( selectedIndex !== -1 ) {
-			let nextIndex = selectedIndex + offset;
-			nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
-			nextIndex = nextIndex === regions.length ? 0 : nextIndex;
-			nextRegion = regions[ nextIndex ];
-		}
-
-		nextRegion.focus();
-		setIsFocusingRegions( true );
-	}
-
-	const clickRef = useRefEffect(
-		( element ) => {
-			function onClick() {
-				setIsFocusingRegions( false );
-			}
-
-			element.addEventListener( 'click', onClick );
-
-			return () => {
-				element.removeEventListener( 'click', onClick );
-			};
-		},
-		[ setIsFocusingRegions ]
-	);
-
-	return {
-		ref: useMergeRefs( [ ref, clickRef ] ),
-		className: isFocusingRegions ? 'is-focusing-regions' : '',
-		onKeyDown( event ) {
-			if (
-				shortcuts.previous.some( ( { modifier, character } ) => {
-					return isKeyboardEvent[ modifier ]( event, character );
-				} )
-			) {
-				focusRegion( -1 );
-			} else if (
-				shortcuts.next.some( ( { modifier, character } ) => {
-					return isKeyboardEvent[ modifier ]( event, character );
-				} )
-			) {
-				focusRegion( 1 );
-			}
-		},
-	};
-}
-
-export default createHigherOrderComponent(
-	( Component ) =>
-		( { shortcuts, ...props } ) =>
-			(
-				<div { ...useNavigateRegions( shortcuts ) }>
-					<Component { ...props } />
-				</div>
-			),
-	'navigateRegions'
-);
diff --git a/packages/components/src/higher-order/navigate-regions/index.tsx b/packages/components/src/higher-order/navigate-regions/index.tsx
new file mode 100644
index 00000000000000..1f4e79654e5bc1
--- /dev/null
+++ b/packages/components/src/higher-order/navigate-regions/index.tsx
@@ -0,0 +1,148 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef } from '@wordpress/element';
+import {
+	createHigherOrderComponent,
+	useRefEffect,
+	useMergeRefs,
+} from '@wordpress/compose';
+import { isKeyboardEvent } from '@wordpress/keycodes';
+import type { WPKeycodeModifier } from '@wordpress/keycodes';
+
+const defaultShortcuts = {
+	previous: [
+		{
+			modifier: 'ctrlShift',
+			character: '`',
+		},
+		{
+			modifier: 'ctrlShift',
+			character: '~',
+		},
+		{
+			modifier: 'access',
+			character: 'p',
+		},
+	] as const,
+	next: [
+		{
+			modifier: 'ctrl',
+			character: '`',
+		},
+		{
+			modifier: 'access',
+			character: 'n',
+		},
+	] as const,
+};
+
+type Shortcuts = {
+	previous: readonly { modifier: WPKeycodeModifier; character: string }[];
+	next: readonly { modifier: WPKeycodeModifier; character: string }[];
+};
+
+export function useNavigateRegions( shortcuts: Shortcuts = defaultShortcuts ) {
+	const ref = useRef< HTMLDivElement >( null );
+	const [ isFocusingRegions, setIsFocusingRegions ] = useState( false );
+
+	function focusRegion( offset: number ) {
+		const regions = Array.from(
+			ref.current?.querySelectorAll< HTMLElement >(
+				'[role="region"][tabindex="-1"]'
+			) ?? []
+		);
+		if ( ! regions.length ) {
+			return;
+		}
+		let nextRegion = regions[ 0 ];
+		// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
+		const wrappingRegion =
+			ref.current?.ownerDocument?.activeElement?.closest< HTMLElement >(
+				'[role="region"][tabindex="-1"]'
+			);
+		const selectedIndex = wrappingRegion
+			? regions.indexOf( wrappingRegion )
+			: -1;
+		if ( selectedIndex !== -1 ) {
+			let nextIndex = selectedIndex + offset;
+			nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
+			nextIndex = nextIndex === regions.length ? 0 : nextIndex;
+			nextRegion = regions[ nextIndex ];
+		}
+
+		nextRegion.focus();
+		setIsFocusingRegions( true );
+	}
+
+	const clickRef = useRefEffect(
+		( element ) => {
+			function onClick() {
+				setIsFocusingRegions( false );
+			}
+
+			element.addEventListener( 'click', onClick );
+
+			return () => {
+				element.removeEventListener( 'click', onClick );
+			};
+		},
+		[ setIsFocusingRegions ]
+	);
+
+	return {
+		ref: useMergeRefs( [ ref, clickRef ] ),
+		className: isFocusingRegions ? 'is-focusing-regions' : '',
+		onKeyDown( event: React.KeyboardEvent< HTMLDivElement > ) {
+			if (
+				shortcuts.previous.some( ( { modifier, character } ) => {
+					return isKeyboardEvent[ modifier ]( event, character );
+				} )
+			) {
+				focusRegion( -1 );
+			} else if (
+				shortcuts.next.some( ( { modifier, character } ) => {
+					return isKeyboardEvent[ modifier ]( event, character );
+				} )
+			) {
+				focusRegion( 1 );
+			}
+		},
+	};
+}
+
+/**
+ * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
+ * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region").
+ * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,
+ * these elements must be properly labelled to briefly describe the purpose of the content in the region.
+ * For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)
+ * and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).
+ *
+ * ```jsx
+ * import { navigateRegions } from '@wordpress/components';
+ *
+ * const MyComponentWithNavigateRegions = navigateRegions( () => (
+ * 	<div>
+ * 		<div role="region" tabIndex="-1" aria-label="Header">
+ * 			Header
+ * 		</div>
+ * 		<div role="region" tabIndex="-1" aria-label="Content">
+ * 			Content
+ * 		</div>
+ * 		<div role="region" tabIndex="-1" aria-label="Sidebar">
+ * 			Sidebar
+ * 		</div>
+ * 	</div>
+ * ) );
+ * ```
+ */
+export default createHigherOrderComponent(
+	( Component ) =>
+		( { shortcuts, ...props } ) => (
+			<div { ...useNavigateRegions( shortcuts ) }>
+				<Component { ...props } />
+			</div>
+		),
+	'navigateRegions'
+);
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 86f089b68ba3d9..5fc1e210dea871 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -1,19 +1,23 @@
-// Allow the position to be easily overridden to e.g. fixed.
+$regionOutlineRatio: 2;
+
+@mixin region-selection-focus {
+	@include selected-block-focus( $regionOutlineRatio );
+	z-index: z-index(".is-focusing-regions {region} :focus::after");
+}
+
 [role="region"] {
 	position: relative;
+
+	// Handles the focus when we programatically send focus to this region
+	&.interface-interface-skeleton__content:focus-visible::after {
+		@include region-selection-focus;
+	}
 }
 
 .is-focusing-regions {
-	[role="region"]:focus {
-		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");
-		}
+	[role="region"]:focus::after {
+		@include region-selection-focus;
 	}
-
 	// Fixes for edge cases.
 	// Some of the regions are currently used for layout purposes as 'interface skeleton'
 	// items. When they're absolutely positioned or when they contain absolutely
@@ -21,64 +25,15 @@
 	// visible. For the future, it's important to take into consideration that
 	// the navigable regions should always have a computed size. For now, we can
 	// fix some edge cases but these CSS rules should be later removed in favor of
-	// a more abstracted approach to make the navigabel regions focus style work
+	// a more abstracted approach to make the navigable regions focus style work
 	// 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 {
-		outline: 4px solid $components-color-accent;
-		outline-offset: -4px;
-	}
-
-	// Edit site Navigation Drawer.
-	.interface-interface-skeleton__drawer {
-		z-index: z-index(".edit-site-navigation-toggle");
-
-		.interface-navigable-region__stacker,
-		.edit-site-navigation-toggle {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-
-		.edit-site-navigation-toggle.is-open {
-			outline: none;
-		}
-
-		.edit-site-navigation-toggle__button {
-			z-index: -1;
-		}
+	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
+	.editor-post-publish-panel {
+		@include selected-block-outline( $regionOutlineRatio );
 	}
 }
-
-// Fixes for edge cases.
-// Edit site Drawer.
-.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
-	height: 100%;
-}
diff --git a/packages/components/src/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md
index e6ef44b061e3c7..417ab7c133fea5 100644
--- a/packages/components/src/higher-order/with-constrained-tabbing/README.md
+++ b/packages/components/src/higher-order/with-constrained-tabbing/README.md
@@ -7,12 +7,12 @@
 Wrap your original component with `withConstrainedTabbing`.
 
 ```jsx
+import { useState } from 'react';
 import {
 	withConstrainedTabbing,
 	TextControl,
 	Button,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const ConstrainedTabbing = withConstrainedTabbing(
 	( { children } ) => children
@@ -22,8 +22,18 @@ const MyComponentWithConstrainedTabbing = () => {
 	const [ isConstrainedTabbing, setIsConstrainedTabbing ] = useState( false );
 	let form = (
 		<form>
-			<TextControl label="Input 1" onChange={ () => {} } />
-			<TextControl label="Input 2" onChange={ () => {} } />
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label="Input 1"
+				onChange={ () => {} }
+			/>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label="Input 2"
+				onChange={ () => {} }
+			/>
 		</form>
 	);
 	if ( isConstrainedTabbing ) {
@@ -43,5 +53,5 @@ const MyComponentWithConstrainedTabbing = () => {
 			</Button>
 		</div>
 	);
-}
+};
 ```
diff --git a/packages/components/src/higher-order/with-constrained-tabbing/index.js b/packages/components/src/higher-order/with-constrained-tabbing/index.js
deleted file mode 100644
index 506df55550bcc5..00000000000000
--- a/packages/components/src/higher-order/with-constrained-tabbing/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createHigherOrderComponent,
-	useConstrainedTabbing,
-} from '@wordpress/compose';
-
-const withConstrainedTabbing = createHigherOrderComponent(
-	( WrappedComponent ) =>
-		function ComponentWithConstrainedTabbing( props ) {
-			const ref = useConstrainedTabbing();
-			return (
-				<div ref={ ref } tabIndex={ -1 }>
-					<WrappedComponent { ...props } />
-				</div>
-			);
-		},
-	'withConstrainedTabbing'
-);
-
-export default withConstrainedTabbing;
diff --git a/packages/components/src/higher-order/with-constrained-tabbing/index.tsx b/packages/components/src/higher-order/with-constrained-tabbing/index.tsx
new file mode 100644
index 00000000000000..b470f3309fb8de
--- /dev/null
+++ b/packages/components/src/higher-order/with-constrained-tabbing/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createHigherOrderComponent,
+	useConstrainedTabbing,
+} from '@wordpress/compose';
+
+/**
+ * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
+ * adding the ability to constrain keyboard navigation with the Tab key within a component.
+ * For accessibility reasons, some UI components need to constrain Tab navigation, for example
+ * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
+ * navigate away from the wrapped component is implemented by other means, usually by pressing
+ * the Escape key or using a specific UI control, e.g. a "Close" button.
+ */
+const withConstrainedTabbing = createHigherOrderComponent(
+	( WrappedComponent ) =>
+		function ComponentWithConstrainedTabbing( props ) {
+			const ref = useConstrainedTabbing();
+			return (
+				<div ref={ ref } tabIndex={ -1 }>
+					<WrappedComponent { ...props } />
+				</div>
+			);
+		},
+	'withConstrainedTabbing'
+);
+
+export default withConstrainedTabbing;
diff --git a/packages/components/src/higher-order/with-fallback-styles/index.js b/packages/components/src/higher-order/with-fallback-styles/index.js
deleted file mode 100644
index 57532b9915874d..00000000000000
--- a/packages/components/src/higher-order/with-fallback-styles/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { isEqual } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-export default ( mapNodeToProps ) =>
-	createHigherOrderComponent( ( WrappedComponent ) => {
-		return class extends Component {
-			constructor() {
-				super( ...arguments );
-				this.nodeRef = this.props.node;
-				this.state = {
-					fallbackStyles: undefined,
-					grabStylesCompleted: false,
-				};
-
-				this.bindRef = this.bindRef.bind( this );
-			}
-
-			bindRef( node ) {
-				if ( ! node ) {
-					return;
-				}
-				this.nodeRef = node;
-			}
-
-			componentDidMount() {
-				this.grabFallbackStyles();
-			}
-
-			componentDidUpdate() {
-				this.grabFallbackStyles();
-			}
-
-			grabFallbackStyles() {
-				const { grabStylesCompleted, fallbackStyles } = this.state;
-				if ( this.nodeRef && ! grabStylesCompleted ) {
-					const newFallbackStyles = mapNodeToProps(
-						this.nodeRef,
-						this.props
-					);
-
-					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
-						this.setState( {
-							fallbackStyles: newFallbackStyles,
-							grabStylesCompleted:
-								Object.values( newFallbackStyles ).every(
-									Boolean
-								),
-						} );
-					}
-				}
-			}
-
-			render() {
-				const wrappedComponent = (
-					<WrappedComponent
-						{ ...this.props }
-						{ ...this.state.fallbackStyles }
-					/>
-				);
-				return this.props.node ? (
-					wrappedComponent
-				) : (
-					<div ref={ this.bindRef }> { wrappedComponent } </div>
-				);
-			}
-		};
-	}, 'withFallbackStyles' );
diff --git a/packages/components/src/higher-order/with-fallback-styles/index.tsx b/packages/components/src/higher-order/with-fallback-styles/index.tsx
new file mode 100644
index 00000000000000..b396094eadd530
--- /dev/null
+++ b/packages/components/src/higher-order/with-fallback-styles/index.tsx
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+type Props = {
+	node?: HTMLElement;
+	[ key: string ]: any;
+};
+
+type State = {
+	fallbackStyles?: { [ key: string ]: any };
+	grabStylesCompleted: boolean;
+};
+
+export default (
+	mapNodeToProps: (
+		node: HTMLElement,
+		props: Props
+	) => { [ key: string ]: any }
+) =>
+	createHigherOrderComponent( ( WrappedComponent ) => {
+		return class extends Component< Props, State > {
+			nodeRef?: HTMLElement;
+
+			constructor( props: Props ) {
+				super( props );
+				this.nodeRef = this.props.node;
+				this.state = {
+					fallbackStyles: undefined,
+					grabStylesCompleted: false,
+				};
+
+				this.bindRef = this.bindRef.bind( this );
+			}
+
+			bindRef( node: HTMLDivElement ) {
+				if ( ! node ) {
+					return;
+				}
+				this.nodeRef = node;
+			}
+
+			componentDidMount() {
+				this.grabFallbackStyles();
+			}
+
+			componentDidUpdate() {
+				this.grabFallbackStyles();
+			}
+
+			grabFallbackStyles() {
+				const { grabStylesCompleted, fallbackStyles } = this.state;
+				if ( this.nodeRef && ! grabStylesCompleted ) {
+					const newFallbackStyles = mapNodeToProps(
+						this.nodeRef,
+						this.props
+					);
+
+					if (
+						! fastDeepEqual( newFallbackStyles, fallbackStyles )
+					) {
+						this.setState( {
+							fallbackStyles: newFallbackStyles,
+							grabStylesCompleted:
+								Object.values( newFallbackStyles ).every(
+									Boolean
+								),
+						} );
+					}
+				}
+			}
+
+			render() {
+				const wrappedComponent = (
+					<WrappedComponent
+						{ ...this.props }
+						{ ...this.state.fallbackStyles }
+					/>
+				);
+				return this.props.node ? (
+					wrappedComponent
+				) : (
+					<div ref={ this.bindRef }> { wrappedComponent } </div>
+				);
+			}
+		};
+	}, 'withFallbackStyles' );
diff --git a/packages/components/src/higher-order/with-filters/index.js b/packages/components/src/higher-order/with-filters/index.js
deleted file mode 100644
index 9a65c7a5fff9d0..00000000000000
--- a/packages/components/src/higher-order/with-filters/index.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { addAction, applyFilters, removeAction } from '@wordpress/hooks';
-import { createHigherOrderComponent, debounce } from '@wordpress/compose';
-
-const ANIMATION_FRAME_PERIOD = 16;
-
-/**
- * Creates a higher-order component which adds filtering capability to the
- * wrapped component. Filters get applied when the original component is about
- * to be mounted. When a filter is added or removed that matches the hook name,
- * the wrapped component re-renders.
- *
- * @param {string} hookName Hook name exposed to be used by filters.
- *
- * @return {Function} Higher-order component factory.
- */
-export default function withFilters( hookName ) {
-	return createHigherOrderComponent( ( OriginalComponent ) => {
-		const namespace = 'core/with-filters/' + hookName;
-
-		/**
-		 * The component definition with current filters applied. Each instance
-		 * reuse this shared reference as an optimization to avoid excessive
-		 * calls to `applyFilters` when many instances exist.
-		 *
-		 * @type {?Component}
-		 */
-		let FilteredComponent;
-
-		/**
-		 * Initializes the FilteredComponent variable once, if not already
-		 * assigned. Subsequent calls are effectively a noop.
-		 */
-		function ensureFilteredComponent() {
-			if ( FilteredComponent === undefined ) {
-				FilteredComponent = applyFilters( hookName, OriginalComponent );
-			}
-		}
-
-		class FilteredComponentRenderer extends Component {
-			constructor() {
-				super( ...arguments );
-
-				ensureFilteredComponent();
-			}
-
-			componentDidMount() {
-				FilteredComponentRenderer.instances.push( this );
-
-				// If there were previously no mounted instances for components
-				// filtered on this hook, add the hook handler.
-				if ( FilteredComponentRenderer.instances.length === 1 ) {
-					addAction( 'hookRemoved', namespace, onHooksUpdated );
-					addAction( 'hookAdded', namespace, onHooksUpdated );
-				}
-			}
-
-			componentWillUnmount() {
-				FilteredComponentRenderer.instances =
-					FilteredComponentRenderer.instances.filter(
-						( instance ) => instance !== this
-					);
-
-				// If this was the last of the mounted components filtered on
-				// this hook, remove the hook handler.
-				if ( FilteredComponentRenderer.instances.length === 0 ) {
-					removeAction( 'hookRemoved', namespace );
-					removeAction( 'hookAdded', namespace );
-				}
-			}
-
-			render() {
-				return <FilteredComponent { ...this.props } />;
-			}
-		}
-
-		FilteredComponentRenderer.instances = [];
-
-		/**
-		 * Updates the FilteredComponent definition, forcing a render for each
-		 * mounted instance. This occurs a maximum of once per animation frame.
-		 */
-		const throttledForceUpdate = debounce( () => {
-			// Recreate the filtered component, only after delay so that it's
-			// computed once, even if many filters added.
-			FilteredComponent = applyFilters( hookName, OriginalComponent );
-
-			// Force each instance to render.
-			FilteredComponentRenderer.instances.forEach( ( instance ) => {
-				instance.forceUpdate();
-			} );
-		}, ANIMATION_FRAME_PERIOD );
-
-		/**
-		 * When a filter is added or removed for the matching hook name, each
-		 * mounted instance should re-render with the new filters having been
-		 * applied to the original component.
-		 *
-		 * @param {string} updatedHookName Name of the hook that was updated.
-		 */
-		function onHooksUpdated( updatedHookName ) {
-			if ( updatedHookName === hookName ) {
-				throttledForceUpdate();
-			}
-		}
-
-		return FilteredComponentRenderer;
-	}, 'withFilters' );
-}
diff --git a/packages/components/src/higher-order/with-filters/index.tsx b/packages/components/src/higher-order/with-filters/index.tsx
new file mode 100644
index 00000000000000..eddd0829f3716e
--- /dev/null
+++ b/packages/components/src/higher-order/with-filters/index.tsx
@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { addAction, applyFilters, removeAction } from '@wordpress/hooks';
+import { createHigherOrderComponent, debounce } from '@wordpress/compose';
+
+const ANIMATION_FRAME_PERIOD = 16;
+
+/**
+ * Creates a higher-order component which adds filtering capability to the
+ * wrapped component. Filters get applied when the original component is about
+ * to be mounted. When a filter is added or removed that matches the hook name,
+ * the wrapped component re-renders.
+ *
+ * @param hookName Hook name exposed to be used by filters.
+ *
+ * @return Higher-order component factory.
+ *
+ * ```jsx
+ * import { withFilters } from '@wordpress/components';
+ * import { addFilter } from '@wordpress/hooks';
+ *
+ * const MyComponent = ( { title } ) => <h1>{ title }</h1>;
+ *
+ * const ComponentToAppend = () => <div>Appended component</div>;
+ *
+ * function withComponentAppended( FilteredComponent ) {
+ * 	return ( props ) => (
+ * 		<>
+ * 			<FilteredComponent { ...props } />
+ * 			<ComponentToAppend />
+ * 		</>
+ * 	);
+ * }
+ *
+ * addFilter(
+ * 	'MyHookName',
+ * 	'my-plugin/with-component-appended',
+ * 	withComponentAppended
+ * );
+ *
+ * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );
+ * ```
+ */
+export default function withFilters( hookName: string ) {
+	return createHigherOrderComponent( ( OriginalComponent ) => {
+		const namespace = 'core/with-filters/' + hookName;
+
+		/**
+		 * The component definition with current filters applied. Each instance
+		 * reuse this shared reference as an optimization to avoid excessive
+		 * calls to `applyFilters` when many instances exist.
+		 */
+		let FilteredComponent: React.ComponentType;
+
+		/**
+		 * Initializes the FilteredComponent variable once, if not already
+		 * assigned. Subsequent calls are effectively a noop.
+		 */
+		function ensureFilteredComponent() {
+			if ( FilteredComponent === undefined ) {
+				FilteredComponent = applyFilters(
+					hookName,
+					OriginalComponent
+				) as React.ComponentType;
+			}
+		}
+
+		class FilteredComponentRenderer extends Component {
+			static instances: FilteredComponentRenderer[];
+
+			constructor( props: { [ key: string ]: any } ) {
+				super( props );
+
+				ensureFilteredComponent();
+			}
+
+			componentDidMount() {
+				FilteredComponentRenderer.instances.push( this );
+
+				// If there were previously no mounted instances for components
+				// filtered on this hook, add the hook handler.
+				if ( FilteredComponentRenderer.instances.length === 1 ) {
+					addAction( 'hookRemoved', namespace, onHooksUpdated );
+					addAction( 'hookAdded', namespace, onHooksUpdated );
+				}
+			}
+
+			componentWillUnmount() {
+				FilteredComponentRenderer.instances =
+					FilteredComponentRenderer.instances.filter(
+						( instance ) => instance !== this
+					);
+
+				// If this was the last of the mounted components filtered on
+				// this hook, remove the hook handler.
+				if ( FilteredComponentRenderer.instances.length === 0 ) {
+					removeAction( 'hookRemoved', namespace );
+					removeAction( 'hookAdded', namespace );
+				}
+			}
+
+			render() {
+				return <FilteredComponent { ...this.props } />;
+			}
+		}
+
+		FilteredComponentRenderer.instances = [];
+
+		/**
+		 * Updates the FilteredComponent definition, forcing a render for each
+		 * mounted instance. This occurs a maximum of once per animation frame.
+		 */
+		const throttledForceUpdate = debounce( () => {
+			// Recreate the filtered component, only after delay so that it's
+			// computed once, even if many filters added.
+			FilteredComponent = applyFilters(
+				hookName,
+				OriginalComponent
+			) as React.ComponentType;
+
+			// Force each instance to render.
+			FilteredComponentRenderer.instances.forEach( ( instance ) => {
+				instance.forceUpdate();
+			} );
+		}, ANIMATION_FRAME_PERIOD );
+
+		/**
+		 * When a filter is added or removed for the matching hook name, each
+		 * mounted instance should re-render with the new filters having been
+		 * applied to the original component.
+		 *
+		 * @param updatedHookName Name of the hook that was updated.
+		 */
+		function onHooksUpdated( updatedHookName: string ) {
+			if ( updatedHookName === hookName ) {
+				throttledForceUpdate();
+			}
+		}
+
+		return FilteredComponentRenderer;
+	}, 'withFilters' );
+}
diff --git a/packages/components/src/higher-order/with-filters/test/__snapshots__/index.js.snap b/packages/components/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from packages/components/src/higher-order/with-filters/test/__snapshots__/index.js.snap
rename to packages/components/src/higher-order/with-filters/test/__snapshots__/index.tsx.snap
diff --git a/packages/components/src/higher-order/with-filters/test/index.js b/packages/components/src/higher-order/with-filters/test/index.js
deleted file mode 100644
index 04f129c148436d..00000000000000
--- a/packages/components/src/higher-order/with-filters/test/index.js
+++ /dev/null
@@ -1,219 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import withFilters from '..';
-
-describe( 'withFilters', () => {
-	const hookName = 'EnhancedComponent';
-	const MyComponent = () => <div>My component</div>;
-
-	afterEach( () => {
-		removeAllFilters( hookName );
-	} );
-
-	it( 'should display original component when no filters applied', () => {
-		const EnhancedComponent = withFilters( hookName )( MyComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should display a component overridden by the filter', () => {
-		const OverriddenComponent = () => <div>Overridden component</div>;
-		addFilter(
-			'EnhancedComponent',
-			'test/enhanced-component-override',
-			() => OverriddenComponent
-		);
-		const EnhancedComponent = withFilters( hookName )( MyComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should display two components composed by the filter', () => {
-		const ComposedComponent = () => <div>Composed component</div>;
-		addFilter(
-			hookName,
-			'test/enhanced-component-compose',
-			( FilteredComponent ) => () =>
-				(
-					<div>
-						<FilteredComponent />
-						<ComposedComponent />
-					</div>
-				)
-		);
-		const EnhancedComponent = withFilters( hookName )( MyComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should not re-render component when new filter added before component was mounted', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 1 );
-	} );
-
-	it( 'should re-render component once when new filter added after component was mounted', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
-		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 1 );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should re-render component once when two filters added in the same animation frame', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
-		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-
-		const { container } = render( <EnhancedComponent /> );
-
-		spy.mockClear();
-
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-2',
-			( FilteredComponent ) => () =>
-				(
-					<section>
-						<FilteredComponent />
-					</section>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 1 );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
-		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-		const { container } = render( <EnhancedComponent /> );
-
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy',
-			( FilteredComponent ) => () =>
-				(
-					<div>
-						<FilteredComponent />
-					</div>
-				)
-		);
-		jest.runAllTimers();
-
-		removeFilter( hookName, 'test/enhanced-component-spy' );
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 2 );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should re-render both components once each when one filter added', () => {
-		const spy = jest.fn();
-		const SpiedComponent = () => {
-			spy();
-			return <div>Spied component</div>;
-		};
-		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
-
-		const CombinedComponents = () => (
-			<section>
-				<EnhancedComponent />
-				<EnhancedComponent />
-			</section>
-		);
-		const { container } = render( <CombinedComponents /> );
-
-		spy.mockClear();
-		addFilter(
-			hookName,
-			'test/enhanced-component-spy-1',
-			( FilteredComponent ) => () =>
-				(
-					<blockquote>
-						<FilteredComponent />
-					</blockquote>
-				)
-		);
-		jest.runAllTimers();
-
-		expect( spy ).toHaveBeenCalledTimes( 2 );
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/higher-order/with-filters/test/index.tsx b/packages/components/src/higher-order/with-filters/test/index.tsx
new file mode 100644
index 00000000000000..fd816df59cfcfb
--- /dev/null
+++ b/packages/components/src/higher-order/with-filters/test/index.tsx
@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import { render, waitFor } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import withFilters from '..';
+
+describe( 'withFilters', () => {
+	const hookName = 'EnhancedComponent';
+	const MyComponent = () => <div>My component</div>;
+
+	afterEach( () => {
+		removeAllFilters( hookName, 'test/enhanced-component-override' );
+		removeAllFilters( hookName, 'test/enhanced-component-compose' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-1' );
+		removeAllFilters( hookName, 'test/enhanced-component-spy-2' );
+	} );
+
+	it( 'should display original component when no filters applied', () => {
+		const EnhancedComponent = withFilters( hookName )( MyComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should display a component overridden by the filter', () => {
+		const OverriddenComponent = () => <div>Overridden component</div>;
+		addFilter(
+			'EnhancedComponent',
+			'test/enhanced-component-override',
+			() => OverriddenComponent
+		);
+		const EnhancedComponent = withFilters( hookName )( MyComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should display two components composed by the filter', () => {
+		const ComposedComponent = () => <div>Composed component</div>;
+		addFilter(
+			hookName,
+			'test/enhanced-component-compose',
+			( FilteredComponent ) => () => (
+				<div>
+					<FilteredComponent />
+					<ComposedComponent />
+				</div>
+			)
+		);
+		const EnhancedComponent = withFilters( hookName )( MyComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should not re-render component when new filter added before component was mounted', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
+		);
+		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should re-render component once when new filter added after component was mounted', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		SpiedComponent.mockClear();
+
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
+		);
+
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should re-render component once when two filters added in the same animation frame', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+
+		const { container } = render( <EnhancedComponent /> );
+
+		SpiedComponent.mockClear();
+
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
+		);
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-2',
+			( FilteredComponent ) => () => (
+				<section>
+					<FilteredComponent />
+				</section>
+			)
+		);
+
+		await waitFor( () =>
+			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 () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+		const { container } = render( <EnhancedComponent /> );
+
+		SpiedComponent.mockClear();
+
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy',
+			( FilteredComponent ) => () => (
+				<div>
+					<FilteredComponent />
+				</div>
+			)
+		);
+
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 1 )
+		);
+
+		removeFilter( hookName, 'test/enhanced-component-spy' );
+
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 2 )
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should re-render both components once each when one filter added', async () => {
+		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
+
+		const CombinedComponents = () => (
+			<section>
+				<EnhancedComponent />
+				<EnhancedComponent />
+			</section>
+		);
+		const { container } = render( <CombinedComponents /> );
+
+		SpiedComponent.mockClear();
+
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () => (
+				<blockquote>
+					<FilteredComponent />
+				</blockquote>
+			)
+		);
+
+		await waitFor( () =>
+			expect( SpiedComponent ).toHaveBeenCalledTimes( 2 )
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/higher-order/with-focus-outside/index.js b/packages/components/src/higher-order/with-focus-outside/index.js
deleted file mode 100644
index 41a7d9c9c3ea47..00000000000000
--- a/packages/components/src/higher-order/with-focus-outside/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-//@ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useState } from '@wordpress/element';
-import {
-	createHigherOrderComponent,
-	__experimentalUseFocusOutside as useFocusOutside,
-} from '@wordpress/compose';
-
-export default createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-		const bindFocusOutsideHandler = useCallback(
-			( node ) =>
-				setHandleFocusOutside( () =>
-					node?.handleFocusOutside
-						? node.handleFocusOutside.bind( node )
-						: undefined
-				),
-			[]
-		);
-
-		return (
-			<div { ...useFocusOutside( handleFocusOutside ) }>
-				<WrappedComponent
-					ref={ bindFocusOutsideHandler }
-					{ ...props }
-				/>
-			</div>
-		);
-	},
-	'withFocusOutside'
-);
diff --git a/packages/components/src/higher-order/with-focus-outside/index.tsx b/packages/components/src/higher-order/with-focus-outside/index.tsx
new file mode 100644
index 00000000000000..d340874b8bf136
--- /dev/null
+++ b/packages/components/src/higher-order/with-focus-outside/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import {
+	createHigherOrderComponent,
+	__experimentalUseFocusOutside as useFocusOutside,
+} from '@wordpress/compose';
+
+export default createHigherOrderComponent(
+	( WrappedComponent ) => ( props ) => {
+		const [ handleFocusOutside, setHandleFocusOutside ] = useState<
+			undefined | ( ( event: React.FocusEvent ) => void )
+		>( undefined );
+
+		const bindFocusOutsideHandler = useCallback<
+			( node: React.FocusEvent ) => void
+		>(
+			( node: any ) =>
+				setHandleFocusOutside( () =>
+					node?.handleFocusOutside
+						? node.handleFocusOutside.bind( node )
+						: undefined
+				),
+			[]
+		);
+
+		return (
+			<div { ...useFocusOutside( handleFocusOutside ) }>
+				<WrappedComponent
+					ref={ bindFocusOutsideHandler }
+					{ ...props }
+				/>
+			</div>
+		);
+	},
+	'withFocusOutside'
+);
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
deleted file mode 100644
index feea9e8f2ff029..00000000000000
--- a/packages/components/src/higher-order/with-focus-outside/test/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withFocusOutside from '../';
-
-let onFocusOutside;
-
-describe( 'withFocusOutside', () => {
-	let origHasFocus;
-
-	const EnhancedComponent = withFocusOutside(
-		class extends Component {
-			handleFocusOutside() {
-				this.props.onFocusOutside();
-			}
-
-			render() {
-				return (
-					<div>
-						<input type="text" />
-						<input type="button" />
-					</div>
-				);
-			}
-		}
-	);
-
-	class TestComponent extends Component {
-		render() {
-			return <EnhancedComponent { ...this.props } />;
-		}
-	}
-
-	beforeEach( () => {
-		// Mock document.hasFocus() to always be true for testing
-		// note: we overide this for some tests.
-		origHasFocus = document.hasFocus;
-		document.hasFocus = () => true;
-
-		onFocusOutside = jest.fn();
-	} );
-
-	afterEach( () => {
-		document.hasFocus = origHasFocus;
-	} );
-
-	it( 'should not call handler if focus shifts to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
-
-		input.focus();
-		input.blur();
-		button.focus();
-
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should not call handler if focus transitions via click to button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
-
-		input.focus();
-		await user.click( button );
-
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
-
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).toHaveBeenCalled();
-	} );
-
-	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		// Force document.hasFocus() to return false to simulate the window/document losing focus
-		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
-		document.hasFocus = () => false;
-
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
-
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should cancel check when unmounting while queued', () => {
-		const { rerender } = render(
-			<TestComponent onFocusOutside={ onFocusOutside } />
-		);
-
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
-
-		rerender( <div /> );
-
-		jest.runAllTimers();
-
-		expect( onFocusOutside ).not.toHaveBeenCalled();
-	} );
-} );
diff --git a/packages/components/src/higher-order/with-focus-outside/test/index.tsx b/packages/components/src/higher-order/with-focus-outside/test/index.tsx
new file mode 100644
index 00000000000000..a53a1cf11298df
--- /dev/null
+++ b/packages/components/src/higher-order/with-focus-outside/test/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import withFocusOutside from '..';
+
+interface TestComponentProps {
+	onFocusOutside: ( event: FocusEvent ) => void;
+}
+
+let onFocusOutside: () => void;
+
+describe( 'withFocusOutside', () => {
+	let origHasFocus: typeof document.hasFocus;
+
+	const EnhancedComponent = withFocusOutside(
+		class extends Component< TestComponentProps > {
+			handleFocusOutside() {
+				this.props.onFocusOutside( new FocusEvent( 'blur' ) );
+			}
+
+			render() {
+				return (
+					<div>
+						<input type="text" />
+						<input type="button" />
+					</div>
+				);
+			}
+		}
+	);
+
+	const TestComponent: React.FC< TestComponentProps > = ( props ) => {
+		return <EnhancedComponent { ...props } />;
+	};
+
+	beforeEach( () => {
+		// Mock document.hasFocus() to always be true for testing
+		// note: we override this for some tests.
+		origHasFocus = document.hasFocus;
+		document.hasFocus = () => true;
+
+		onFocusOutside = jest.fn();
+	} );
+
+	afterEach( () => {
+		document.hasFocus = origHasFocus;
+	} );
+
+	it( 'should not call handler if focus shifts to element within component', async () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		input.blur();
+		button.focus();
+
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
+	} );
+
+	it( 'should not call handler if focus transitions via click to button', async () => {
+		const user = userEvent.setup();
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		await user.click( button );
+
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
+	} );
+
+	it( 'should call handler if focus doesn’t shift to element within component', async () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		await waitFor( () => expect( onFocusOutside ).toHaveBeenCalled() );
+	} );
+
+	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		// Force document.hasFocus() to return false to simulate the window/document losing focus
+		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
+		document.hasFocus = () => false;
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
+	} );
+
+	it( 'should cancel check when unmounting while queued', async () => {
+		const { rerender } = render(
+			<TestComponent onFocusOutside={ onFocusOutside } />
+		);
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		rerender( <div /> );
+
+		await waitFor( () => expect( onFocusOutside ).not.toHaveBeenCalled() );
+	} );
+} );
diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md
index b038e090390040..81cecad4310f11 100644
--- a/packages/components/src/higher-order/with-focus-return/README.md
+++ b/packages/components/src/higher-order/with-focus-return/README.md
@@ -7,13 +7,18 @@
 ### `withFocusReturn`
 
 ```jsx
+import { useState } from 'react';
 import { withFocusReturn, TextControl, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const EnhancedComponent = withFocusReturn( () => (
 	<div>
 		Focus will return to the previous input when this component is unmounted
-		<TextControl autoFocus={ true } onChange={ () => {} } />
+		<TextControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			autoFocus={ true }
+			onChange={ () => {} }
+		/>
 	</div>
 ) );
 
@@ -27,6 +32,8 @@ const MyComponentWithFocusReturn = () => {
 	return (
 		<div>
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				placeholder="Type something"
 				value={ text }
 				onChange={ ( value ) => setText( value ) }
@@ -39,7 +46,7 @@ const MyComponentWithFocusReturn = () => {
 			) }
 		</div>
 	);
-}
+};
 ```
 
 `withFocusReturn` can optionally be called as a higher-order function creator. Provided an options object, a new higher-order function is returned.
diff --git a/packages/components/src/higher-order/with-focus-return/index.js b/packages/components/src/higher-order/with-focus-return/index.js
deleted file mode 100644
index c232bc6a1788ee..00000000000000
--- a/packages/components/src/higher-order/with-focus-return/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Returns true if the given object is component-like. An object is component-
- * like if it is an instance of wp.element.Component, or is a function.
- *
- * @param {*} object Object to test.
- *
- * @return {boolean} Whether object is component-like.
- */
-function isComponentLike( object ) {
-	return object instanceof Component || typeof object === 'function';
-}
-
-/**
- * Higher Order Component used to be used to wrap disposable elements like
- * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
- * reference to the current active element so we know where to restore focus
- * when the component is unmounted.
- *
- * @param {(WPComponent|Object)} options The component to be enhanced with
- *                                       focus return behavior, or an object
- *                                       describing the component and the
- *                                       focus return characteristics.
- *
- * @return {Function} Higher Order Component with the focus restauration behaviour.
- */
-export default createHigherOrderComponent( ( options ) => {
-	const HoC =
-		( { onFocusReturn } = {} ) =>
-		( WrappedComponent ) => {
-			const WithFocusReturn = ( props ) => {
-				const ref = useFocusReturn( onFocusReturn );
-				return (
-					<div ref={ ref }>
-						<WrappedComponent { ...props } />
-					</div>
-				);
-			};
-
-			return WithFocusReturn;
-		};
-
-	if ( isComponentLike( options ) ) {
-		const WrappedComponent = options;
-		return HoC()( WrappedComponent );
-	}
-
-	return HoC( options );
-}, 'withFocusReturn' );
-
-export const Provider = ( { children } ) => {
-	deprecated( 'wp.components.FocusReturnProvider component', {
-		since: '5.7',
-		hint: 'This provider is not used anymore. You can just remove it from your codebase',
-	} );
-
-	return children;
-};
diff --git a/packages/components/src/higher-order/with-focus-return/index.tsx b/packages/components/src/higher-order/with-focus-return/index.tsx
new file mode 100644
index 00000000000000..196226def624c1
--- /dev/null
+++ b/packages/components/src/higher-order/with-focus-return/index.tsx
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Returns true if the given object is component-like. An object is component-
+ * like if it is an instance of wp.element.Component, or is a function.
+ *
+ * @param object Object to test.
+ *
+ * @return Whether object is component-like.
+ */
+function isComponentLike( object: any ): object is React.ComponentType {
+	return object instanceof Component || typeof object === 'function';
+}
+
+type Props = {
+	onFocusReturn?: () => void;
+};
+
+/**
+ * Higher Order Component used to be used to wrap disposable elements like
+ * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
+ * reference to the current active element so we know where to restore focus
+ * when the component is unmounted.
+ *
+ * @param options The component to be enhanced with
+ *                focus return behavior, or an object
+ *                describing the component and the
+ *                focus return characteristics.
+ *
+ * @return Higher Order Component with the focus restauration behaviour.
+ */
+export default createHigherOrderComponent(
+	// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
+	( options: React.ComponentType | Record< string, unknown > ) => {
+		const HoC =
+			( { onFocusReturn }: Props = {} ) =>
+			( WrappedComponent: React.ComponentType ) => {
+				const WithFocusReturn = (
+					props: Record< string, unknown >
+				) => {
+					const ref = useFocusReturn( onFocusReturn );
+					return (
+						<div ref={ ref }>
+							<WrappedComponent { ...props } />
+						</div>
+					);
+				};
+
+				return WithFocusReturn;
+			};
+
+		if ( isComponentLike( options ) ) {
+			const WrappedComponent = options;
+			return HoC()( WrappedComponent );
+		}
+
+		return HoC( options );
+	},
+	'withFocusReturn'
+);
+
+export const Provider = ( { children }: { children: React.ReactNode } ) => {
+	deprecated( 'wp.components.FocusReturnProvider component', {
+		since: '5.7',
+		hint: 'This provider is not used anymore. You can just remove it from your codebase',
+	} );
+
+	return children;
+};
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
deleted file mode 100644
index 2f5dea414c34bb..00000000000000
--- a/packages/components/src/higher-order/with-focus-return/test/index.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withFocusReturn from '../';
-
-class Test extends Component {
-	render() {
-		const { className, focusHistory } = this.props;
-		return (
-			<div
-				className={ className }
-				data-testid="test-element"
-				data-focus-history={ focusHistory }
-			>
-				<textarea aria-label="Textarea" />
-			</div>
-		);
-	}
-}
-
-describe( 'withFocusReturn()', () => {
-	describe( 'testing rendering and focus handling', () => {
-		const Composite = withFocusReturn( Test );
-		const activeElement = document.createElement( 'button' );
-		const switchFocusTo = document.createElement( 'input' );
-		document.body.appendChild( activeElement );
-		document.body.appendChild( switchFocusTo );
-
-		beforeEach( () => {
-			activeElement.focus();
-		} );
-
-		afterEach( () => {
-			activeElement.blur();
-		} );
-
-		it( 'should render a basic Test component inside the HOC', () => {
-			render( <Composite /> );
-
-			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
-		} );
-
-		it( 'should pass own props through to the wrapped element', () => {
-			render( <Composite className="test" /> );
-
-			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
-				'test'
-			);
-		} );
-
-		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
-			render( <Composite className="test" /> );
-
-			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
-				'data-focus-history'
-			);
-		} );
-
-		it( 'should not switch focus back to the bound focus element', () => {
-			const { unmount } = render( <Composite />, {
-				container: document.body.appendChild(
-					document.createElement( 'div' )
-				),
-			} );
-
-			// Change activeElement.
-			switchFocusTo.focus();
-			expect( switchFocusTo ).toHaveFocus();
-
-			// Should keep focus on switchFocusTo, because it is not within HOC.
-			unmount();
-			expect( switchFocusTo ).toHaveFocus();
-		} );
-
-		it( 'should switch focus back when unmounted while having focus', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const { container, unmount } = render( <Composite />, {
-				container: document.body.appendChild(
-					document.createElement( 'div' )
-				),
-			} );
-
-			// Click inside the textarea to focus it.
-			await user.click(
-				screen.getByRole( 'textbox', {
-					name: 'Textarea',
-				} )
-			);
-
-			// Should return to the activeElement saved with this component.
-			unmount();
-			render( <div></div>, {
-				container,
-			} );
-			expect( activeElement ).toHaveFocus();
-		} );
-	} );
-} );
diff --git a/packages/components/src/higher-order/with-focus-return/test/index.tsx b/packages/components/src/higher-order/with-focus-return/test/index.tsx
new file mode 100644
index 00000000000000..74e7b58b8de189
--- /dev/null
+++ b/packages/components/src/higher-order/with-focus-return/test/index.tsx
@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import withFocusReturn from '..';
+
+class Test extends Component< { className: string; focusHistory: unknown } > {
+	render() {
+		const { className, focusHistory } = this.props;
+		return (
+			<div
+				className={ className }
+				data-testid="test-element"
+				data-focus-history={ focusHistory }
+			>
+				<textarea aria-label="Textarea" />
+			</div>
+		);
+	}
+}
+
+describe( 'withFocusReturn()', () => {
+	describe( 'testing rendering and focus handling', () => {
+		const Composite = withFocusReturn( Test );
+		const activeElement = document.createElement( 'button' );
+		const switchFocusTo = document.createElement( 'input' );
+		document.body.appendChild( activeElement );
+		document.body.appendChild( switchFocusTo );
+
+		beforeEach( () => {
+			activeElement.focus();
+		} );
+
+		afterEach( () => {
+			activeElement.blur();
+		} );
+
+		it( 'should render a basic Test component inside the HOC', () => {
+			render( <Composite /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
+		} );
+
+		it( 'should pass own props through to the wrapped element', () => {
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
+				'test'
+			);
+		} );
+
+		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
+				'data-focus-history'
+			);
+		} );
+
+		it( 'should not switch focus back to the bound focus element', () => {
+			const { unmount } = render( <Composite />, {
+				container: document.body.appendChild(
+					document.createElement( 'div' )
+				),
+			} );
+
+			// Change activeElement.
+			switchFocusTo.focus();
+			expect( switchFocusTo ).toHaveFocus();
+
+			// Should keep focus on switchFocusTo, because it is not within HOC.
+			unmount();
+			expect( switchFocusTo ).toHaveFocus();
+		} );
+
+		it( 'should switch focus back when unmounted while having focus', async () => {
+			const user = userEvent.setup();
+
+			const { unmount } = render( <Composite />, {
+				container: document.body.appendChild(
+					document.createElement( 'div' )
+				),
+			} );
+
+			// Click inside the textarea to focus it.
+			await user.click(
+				screen.getByRole( 'textbox', {
+					name: 'Textarea',
+				} )
+			);
+
+			// Should return to the activeElement saved with this component.
+			unmount();
+			expect( activeElement ).toHaveFocus();
+		} );
+	} );
+} );
diff --git a/packages/components/src/higher-order/with-notices/README.md b/packages/components/src/higher-order/with-notices/README.md
index 84c484eba101b2..17e1b0e12113b9 100644
--- a/packages/components/src/higher-order/with-notices/README.md
+++ b/packages/components/src/higher-order/with-notices/README.md
@@ -2,7 +2,7 @@
 
 `withNotices` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) used typically in adding the ability to post notice messages within the original component.
 
-Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations` and `noticeUI`.
+Wrapping the original component with `withNotices` encapsulates the component with the additional props `noticeOperations`, `noticeUI`, and `noticeList`.
 
 **noticeOperations**
 Contains a number of useful functions to add notices to your site.
@@ -34,6 +34,9 @@ _Parameters_
 <a  name="noticeUi"  href="#noticeUi">#</a>**noticeUi**
 The rendered `NoticeList`.
 
+<a  name="noticeList"  href="#noticeList">#</a>**noticeList**
+The array of notice objects to be displayed.
+
 ## Usage
 
 ```jsx
diff --git a/packages/components/src/higher-order/with-notices/index.js b/packages/components/src/higher-order/with-notices/index.js
deleted file mode 100644
index c4057e6b6fff3e..00000000000000
--- a/packages/components/src/higher-order/with-notices/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef, useState, useMemo } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import NoticeList from '../../notice/list';
-
-/**
- * Override the default edit UI to include notices if supported.
- *
- * @param {WPComponent} OriginalComponent Original component.
- *
- * @return {WPComponent} Wrapped component.
- */
-export default createHigherOrderComponent( ( OriginalComponent ) => {
-	function Component( props, ref ) {
-		const [ noticeList, setNoticeList ] = useState( [] );
-
-		const noticeOperations = useMemo( () => {
-			/**
-			 * Function passed down as a prop that adds a new notice.
-			 *
-			 * @param {Object} notice Notice to add.
-			 */
-			const createNotice = ( notice ) => {
-				const noticeToAdd = notice.id
-					? notice
-					: { ...notice, id: uuid() };
-				setNoticeList( ( current ) => [ ...current, noticeToAdd ] );
-			};
-
-			return {
-				createNotice,
-
-				/**
-				 * Function passed as a prop that adds a new error notice.
-				 *
-				 * @param {string} msg Error message of the notice.
-				 */
-				createErrorNotice: ( msg ) => {
-					createNotice( {
-						status: 'error',
-						content: msg,
-					} );
-				},
-
-				/**
-				 * Removes a notice by id.
-				 *
-				 * @param {string} id Id of the notice to remove.
-				 */
-				removeNotice: ( id ) => {
-					setNoticeList( ( current ) =>
-						current.filter( ( notice ) => notice.id !== id )
-					);
-				},
-
-				/**
-				 * Removes all notices
-				 */
-				removeAllNotices: () => {
-					setNoticeList( [] );
-				},
-			};
-		}, [] );
-
-		const propsOut = {
-			...props,
-			noticeList,
-			noticeOperations,
-			noticeUI: noticeList.length > 0 && (
-				<NoticeList
-					className="components-with-notices-ui"
-					notices={ noticeList }
-					onRemove={ noticeOperations.removeNotice }
-				/>
-			),
-		};
-
-		return isForwardRef ? (
-			<OriginalComponent { ...propsOut } ref={ ref } />
-		) : (
-			<OriginalComponent { ...propsOut } />
-		);
-	}
-
-	let isForwardRef;
-	const { render } = OriginalComponent;
-	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
-	if ( typeof render === 'function' ) {
-		isForwardRef = true;
-		return forwardRef( Component );
-	}
-	return Component;
-} );
diff --git a/packages/components/src/higher-order/with-notices/index.tsx b/packages/components/src/higher-order/with-notices/index.tsx
new file mode 100644
index 00000000000000..734fd8b2b1056c
--- /dev/null
+++ b/packages/components/src/higher-order/with-notices/index.tsx
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useState, useMemo } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import NoticeList from '../../notice/list';
+import type { WithNoticeProps } from './types';
+
+/**
+ * Override the default edit UI to include notices if supported.
+ *
+ * Wrapping the original component with `withNotices` encapsulates the component
+ * with the additional props `noticeOperations` and `noticeUI`.
+ *
+ * ```jsx
+ * import { withNotices, Button } from '@wordpress/components';
+ *
+ * const MyComponentWithNotices = withNotices(
+ * 	( { noticeOperations, noticeUI } ) => {
+ * 		const addError = () =>
+ * 			noticeOperations.createErrorNotice( 'Error message' );
+ * 		return (
+ * 			<div>
+ * 				{ noticeUI }
+ * 				<Button variant="secondary" onClick={ addError }>
+ * 					Add error
+ * 				</Button>
+ * 			</div>
+ * 		);
+ * 	}
+ * );
+ * ```
+ *
+ * @param OriginalComponent Original component.
+ *
+ * @return Wrapped component.
+ */
+export default createHigherOrderComponent( ( OriginalComponent ) => {
+	function Component(
+		props: { [ key: string ]: any },
+		ref: React.ForwardedRef< any >
+	) {
+		const [ noticeList, setNoticeList ] = useState<
+			WithNoticeProps[ 'noticeList' ]
+		>( [] );
+
+		const noticeOperations = useMemo<
+			WithNoticeProps[ 'noticeOperations' ]
+		>( () => {
+			const createNotice: WithNoticeProps[ 'noticeOperations' ][ 'createNotice' ] =
+				( notice ) => {
+					const noticeToAdd = notice.id
+						? notice
+						: { ...notice, id: uuid() };
+					setNoticeList( ( current ) => [ ...current, noticeToAdd ] );
+				};
+
+			return {
+				createNotice,
+				createErrorNotice: ( msg ) => {
+					// @ts-expect-error TODO: Missing `id`, potentially a bug
+					createNotice( {
+						status: 'error',
+						content: msg,
+					} );
+				},
+				removeNotice: ( id ) => {
+					setNoticeList( ( current ) =>
+						current.filter( ( notice ) => notice.id !== id )
+					);
+				},
+				removeAllNotices: () => {
+					setNoticeList( [] );
+				},
+			};
+		}, [] );
+
+		const propsOut = {
+			...props,
+			noticeList,
+			noticeOperations,
+			noticeUI: noticeList.length > 0 && (
+				<NoticeList
+					className="components-with-notices-ui"
+					notices={ noticeList }
+					onRemove={ noticeOperations.removeNotice }
+				/>
+			),
+		};
+
+		return isForwardRef ? (
+			<OriginalComponent { ...propsOut } ref={ ref } />
+		) : (
+			<OriginalComponent { ...propsOut } />
+		);
+	}
+
+	let isForwardRef: boolean;
+	// @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef().
+	const { render } = OriginalComponent;
+	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
+	if ( typeof render === 'function' ) {
+		isForwardRef = true;
+		return forwardRef( Component );
+	}
+	return Component;
+}, 'withNotices' );
diff --git a/packages/components/src/higher-order/with-notices/test/index.js b/packages/components/src/higher-order/with-notices/test/index.js
deleted file mode 100644
index fc529927b2a6f9..00000000000000
--- a/packages/components/src/higher-order/with-notices/test/index.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	act,
-	render,
-	fireEvent,
-	screen,
-	waitForElementToBeRemoved,
-	within,
-} from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import {
-	forwardRef,
-	useEffect,
-	useImperativeHandle,
-	useRef,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import withNotices from '..';
-
-// Implementation detail of Notice component used to query the dismissal button.
-const stockDismissText = 'Dismiss this notice';
-
-function noticesFrom( list ) {
-	return list.map( ( item ) => ( { id: item, content: item } ) );
-}
-
-function isComponentLike( object ) {
-	return typeof object === 'function';
-}
-
-function isForwardRefLike( { render: renderMethod } ) {
-	return typeof renderMethod === 'function';
-}
-
-const content = 'Base content';
-
-const BaseComponent = ( { noticeOperations, noticeUI, notifications } ) => {
-	useEffect( () => {
-		if ( notifications ) {
-			notifications.forEach( ( item ) =>
-				noticeOperations.createNotice( item )
-			);
-		}
-	}, [ noticeOperations, notifications ] );
-	return (
-		<div>
-			{ noticeUI }
-			{ content }
-		</div>
-	);
-};
-
-const TestComponent = withNotices( BaseComponent );
-
-const TestNoticeOperations = withNotices(
-	forwardRef( ( props, ref ) => {
-		useImperativeHandle( ref, () => ( { ...props.noticeOperations } ) );
-		return <BaseComponent { ...props } />;
-	} )
-);
-
-describe( 'withNotices return type', () => {
-	it( 'should be a component given a component', () => {
-		expect( isComponentLike( TestComponent ) ).toBe( true );
-	} );
-
-	it( 'should be a forwardRef given a forwardRef', () => {
-		expect( isForwardRefLike( TestNoticeOperations ) ).toBe( true );
-	} );
-} );
-
-describe( 'withNotices operations', () => {
-	let handle;
-	const Handle = ( props ) => {
-		handle = useRef();
-		return <TestNoticeOperations { ...props } ref={ handle } />;
-	};
-
-	it( 'should create notices with createNotice', () => {
-		const message = 'Aló!';
-		const { container } = render( <Handle /> );
-		const { getByText } = within( container );
-		act( () => {
-			handle.current.createNotice( { content: message } );
-		} );
-		expect( getByText( message ) ).toBeInTheDocument();
-	} );
-
-	it( 'should create notices of error status with createErrorNotice', () => {
-		const message = 'can’t touch this';
-		const { container } = render( <Handle /> );
-		const { getByText } = within( container );
-		act( () => {
-			handle.current.createErrorNotice( message );
-		} );
-		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
-	} );
-
-	it( 'should remove a notice with removeNotice', async () => {
-		const notice = { id: 'so real', content: 'so why can’t I touch it?' };
-		const { container } = render( <Handle /> );
-		const { getByText } = within( container );
-		act( () => {
-			handle.current.createNotice( notice );
-		} );
-		expect(
-			await waitForElementToBeRemoved( () => {
-				const target = getByText( notice.content );
-				act( () => handle.current.removeNotice( notice.id ) );
-				return target;
-			} ).then( () => true )
-		).toBe( true );
-	} );
-
-	it( 'should remove all notices with removeAllNotices', async () => {
-		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
-		const notices = noticesFrom( messages );
-		const { container } = render( <Handle notifications={ notices } /> );
-		const { getByText } = within( container );
-		expect(
-			await waitForElementToBeRemoved( () => {
-				const targets = notices.map( ( notice ) =>
-					getByText( notice.content )
-				);
-				act( () => handle.current.removeAllNotices() );
-				return targets;
-			} ).then( () => true )
-		).toBe( true );
-	} );
-} );
-
-describe( 'withNotices rendering', () => {
-	it( 'should display the original component given no notices', () => {
-		const { container } = render( <TestComponent /> );
-		expect( container.innerHTML ).toBe( `<div>${ content }</div>` );
-	} );
-
-	it( 'should display notices with functioning dismissal triggers', async () => {
-		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
-		const notices = noticesFrom( messages );
-		const { container } = render(
-			<TestComponent notifications={ notices } />
-		);
-		const [ buttonRemoveFirst ] =
-			screen.getAllByLabelText( stockDismissText );
-		const getRemovalTarget = () =>
-			within( container ).getByText(
-				// The last item corresponds to the first notice in the DOM.
-				messages[ messages.length - 1 ]
-			);
-		expect(
-			await waitForElementToBeRemoved( () => {
-				const target = getRemovalTarget();
-				// Removes the first notice in the DOM.
-				fireEvent.click( buttonRemoveFirst );
-				return target;
-			} ).then( () => true )
-		).toBe( true );
-	} );
-} );
diff --git a/packages/components/src/higher-order/with-notices/test/index.tsx b/packages/components/src/higher-order/with-notices/test/index.tsx
new file mode 100644
index 00000000000000..4b34da40838eef
--- /dev/null
+++ b/packages/components/src/higher-order/with-notices/test/index.tsx
@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import {
+	act,
+	render,
+	fireEvent,
+	screen,
+	waitForElementToBeRemoved,
+	within,
+} from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import withNotices from '..';
+import type { WithNoticeProps } from '../types';
+
+// Implementation detail of Notice component used to query the dismissal button.
+const stockDismissText = 'Close';
+
+function noticesFrom( list: string[] ) {
+	return list.map( ( item ) => ( { id: item, content: item } ) );
+}
+
+function isComponentLike( object: any ) {
+	return typeof object === 'function';
+}
+
+function isForwardRefLike( { render: renderMethod }: any ) {
+	return typeof renderMethod === 'function';
+}
+
+const content = 'Base content';
+
+const BaseComponent = ( {
+	noticeOperations,
+	noticeUI,
+	notifications,
+}: WithNoticeProps & { notifications: ReturnType< typeof noticesFrom > } ) => {
+	useEffect( () => {
+		if ( notifications ) {
+			notifications.forEach( ( item ) =>
+				noticeOperations.createNotice( item )
+			);
+		}
+	}, [ noticeOperations, notifications ] );
+	return (
+		<div>
+			{ noticeUI }
+			{ content }
+		</div>
+	);
+};
+
+const TestComponent = withNotices( BaseComponent );
+
+const TestNoticeOperations = withNotices(
+	forwardRef( ( props, ref ) => {
+		useImperativeHandle( ref, () => ( { ...props.noticeOperations } ) );
+		return <BaseComponent { ...props } />;
+	} )
+);
+
+describe( 'withNotices return type', () => {
+	it( 'should be a component given a component', () => {
+		expect( isComponentLike( TestComponent ) ).toBe( true );
+	} );
+
+	it( 'should be a forwardRef given a forwardRef', () => {
+		expect( isForwardRefLike( TestNoticeOperations ) ).toBe( true );
+	} );
+} );
+
+describe( 'withNotices operations', () => {
+	let handle: React.MutableRefObject< any >;
+	const Handle = ( props: any ) => {
+		handle = useRef();
+		return <TestNoticeOperations { ...props } ref={ handle } />;
+	};
+
+	it( 'should create notices with createNotice', () => {
+		const message = 'Aló!';
+		const { container } = render( <Handle /> );
+		const { getByText } = within( container );
+		act( () => {
+			handle.current.createNotice( { content: message } );
+		} );
+		expect( getByText( message ) ).toBeInTheDocument();
+	} );
+
+	it( 'should create notices of error status with createErrorNotice', () => {
+		const message = 'can’t touch this';
+		const { container } = render( <Handle /> );
+		const { getByText } = within( container );
+		act( () => {
+			handle.current.createErrorNotice( message );
+		} );
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
+	} );
+
+	it( 'should remove a notice with removeNotice', async () => {
+		const notice = { id: 'so real', content: 'so why can’t I touch it?' };
+		const { container } = render( <Handle /> );
+		const { getByText } = within( container );
+		act( () => {
+			handle.current.createNotice( notice );
+		} );
+		expect(
+			await waitForElementToBeRemoved( () => {
+				const target = getByText( notice.content );
+				act( () => handle.current.removeNotice( notice.id ) );
+				return target;
+			} ).then( () => true )
+		).toBe( true );
+	} );
+
+	it( 'should remove all notices with removeAllNotices', async () => {
+		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
+		const notices = noticesFrom( messages );
+		const { container } = render( <Handle notifications={ notices } /> );
+		const { getByText } = within( container );
+		expect(
+			await waitForElementToBeRemoved( () => {
+				const targets = notices.map( ( notice ) =>
+					getByText( notice.content )
+				);
+				act( () => handle.current.removeAllNotices() );
+				return targets;
+			} ).then( () => true )
+		).toBe( true );
+	} );
+} );
+
+describe( 'withNotices rendering', () => {
+	it( 'should display the original component given no notices', () => {
+		const { container } = render( <TestComponent /> );
+		expect( container.innerHTML ).toBe( `<div>${ content }</div>` );
+	} );
+
+	it( 'should display notices with functioning dismissal triggers', async () => {
+		const messages = [ 'Aló!', 'hu dis?', 'Otis' ];
+		const notices = noticesFrom( messages );
+		const { container } = render(
+			<TestComponent notifications={ notices } />
+		);
+		const [ buttonRemoveFirst ] =
+			screen.getAllByLabelText( stockDismissText );
+		const getRemovalTarget = () =>
+			within( container ).getByText(
+				// The last item corresponds to the first notice in the DOM.
+				messages[ messages.length - 1 ]
+			);
+		expect(
+			await waitForElementToBeRemoved( () => {
+				const target = getRemovalTarget();
+				// Removes the first notice in the DOM.
+				fireEvent.click( buttonRemoveFirst );
+				return target;
+			} ).then( () => true )
+		).toBe( true );
+	} );
+} );
diff --git a/packages/components/src/higher-order/with-notices/types.ts b/packages/components/src/higher-order/with-notices/types.ts
new file mode 100644
index 00000000000000..e914d21d82df7d
--- /dev/null
+++ b/packages/components/src/higher-order/with-notices/types.ts
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import type { NoticeListProps } from '../../notice/types';
+
+export type WithNoticeProps = {
+	noticeList: NoticeListProps[ 'notices' ];
+	noticeOperations: {
+		/**
+		 * Function passed down as a prop that adds a new notice.
+		 *
+		 * @param notice Notice to add.
+		 */
+		createNotice: (
+			notice: NoticeListProps[ 'notices' ][ number ]
+		) => void;
+		/**
+		 * Function passed as a prop that adds a new error notice.
+		 *
+		 * @param msg Error message of the notice.
+		 */
+		createErrorNotice: ( msg: string ) => void;
+		/**
+		 * Removes a notice by id.
+		 *
+		 * @param id Id of the notice to remove.
+		 */
+		removeNotice: ( id: string ) => void;
+		/**
+		 * Removes all notices
+		 */
+		removeAllNotices: () => void;
+	};
+	noticeUI: false | JSX.Element;
+};
diff --git a/packages/components/src/higher-order/with-spoken-messages/index.js b/packages/components/src/higher-order/with-spoken-messages/index.js
deleted file mode 100644
index 4302c8f252d4f9..00000000000000
--- a/packages/components/src/higher-order/with-spoken-messages/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
-
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
-
-/**
- * A Higher Order Component used to be provide speak and debounced speak
- * functions.
- *
- * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
- *
- * @param {WPComponent} Component The component to be wrapped.
- *
- * @return {WPComponent} The wrapped component.
- */
-export default createHigherOrderComponent(
-	( Component ) => ( props ) =>
-		(
-			<Component
-				{ ...props }
-				speak={ speak }
-				debouncedSpeak={ useDebounce( speak, 500 ) }
-			/>
-		),
-	'withSpokenMessages'
-);
diff --git a/packages/components/src/higher-order/with-spoken-messages/index.tsx b/packages/components/src/higher-order/with-spoken-messages/index.tsx
new file mode 100644
index 00000000000000..df97427594ef36
--- /dev/null
+++ b/packages/components/src/higher-order/with-spoken-messages/index.tsx
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+
+/** @typedef {import('react').ComponentType} ComponentType */
+
+/**
+ * A Higher Order Component used to provide speak and debounced speak functions.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
+ *
+ * @param {ComponentType} Component The component to be wrapped.
+ *
+ * @return {ComponentType} The wrapped component.
+ */
+export default createHigherOrderComponent(
+	( Component ) => ( props ) => (
+		<Component
+			{ ...props }
+			speak={ speak }
+			debouncedSpeak={ useDebounce( speak, 500 ) }
+		/>
+	),
+	'withSpokenMessages'
+);
diff --git a/packages/components/src/higher-order/with-spoken-messages/test/index.js b/packages/components/src/higher-order/with-spoken-messages/test/index.js
deleted file mode 100644
index ea8efec351bc4f..00000000000000
--- a/packages/components/src/higher-order/with-spoken-messages/test/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import withSpokenMessages from '../';
-
-describe( 'withSpokenMessages', () => {
-	it( 'should generate speak and debouncedSpeak props', () => {
-		const testSpeak = jest.fn();
-		const testDebouncedSpeak = jest.fn();
-		const isFunction = ( maybeFunc ) => typeof maybeFunc === 'function';
-		const DumpComponent = withSpokenMessages(
-			( { speak, debouncedSpeak } ) => {
-				testSpeak( isFunction( speak ) );
-				testDebouncedSpeak( isFunction( debouncedSpeak ) );
-				return <div />;
-			}
-		);
-		render( <DumpComponent /> );
-
-		// Unrendered element.
-		expect( testSpeak ).toHaveBeenCalledWith( true );
-		expect( testDebouncedSpeak ).toHaveBeenCalledWith( true );
-	} );
-} );
diff --git a/packages/components/src/higher-order/with-spoken-messages/test/index.tsx b/packages/components/src/higher-order/with-spoken-messages/test/index.tsx
new file mode 100644
index 00000000000000..b4d37eaa840962
--- /dev/null
+++ b/packages/components/src/higher-order/with-spoken-messages/test/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import withSpokenMessages from '../';
+
+describe( 'withSpokenMessages', () => {
+	it( 'should generate speak and debouncedSpeak props', () => {
+		const testSpeak = jest.fn();
+		const testDebouncedSpeak = jest.fn();
+		const isFunction = ( maybeFunc: any ) =>
+			typeof maybeFunc === 'function';
+		const DumpComponent = withSpokenMessages(
+			( { speak, debouncedSpeak } ) => {
+				testSpeak( isFunction( speak ) );
+				testDebouncedSpeak( isFunction( debouncedSpeak ) );
+				return <div />;
+			}
+		);
+		render( <DumpComponent /> );
+
+		// Unrendered element.
+		expect( testSpeak ).toHaveBeenCalledWith( true );
+		expect( testDebouncedSpeak ).toHaveBeenCalledWith( true );
+	} );
+} );
diff --git a/packages/components/src/icon/README.md b/packages/components/src/icon/README.md
index 4566ed9831a5df..63d52c1fd20b13 100644
--- a/packages/components/src/icon/README.md
+++ b/packages/components/src/icon/README.md
@@ -1,82 +1,39 @@
 # Icon
 
-Allows you to render a raw icon without any initial styling or wrappers.
+<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->
 
-## Usage
+<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-icon--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>
 
-#### With a Dashicon
+Renders a raw icon without any initial styling or wrappers.
 
 ```jsx
-import { Icon } from '@wordpress/components';
+import { wordpress } from '@wordpress/icons';
 
-const MyIcon = () => <Icon icon="screenoptions" />;
+<Icon icon={ wordpress } />
 ```
-
-#### With a function
-
-```jsx
-import { Icon } from '@wordpress/components';
-
-const MyIcon = () => (
-	<Icon
-		icon={ () => (
-			<svg>
-				<path d="M5 4v3h5.5v12h3V7H19V4z" />
-			</svg>
-		) }
-	/>
-);
-```
-
-#### With a Component
-
-```jsx
-import { MyIconComponent } from '../my-icon-component';
-import { Icon } from '@wordpress/components';
-
-const MyIcon = () => <Icon icon={ MyIconComponent } />;
-```
-
-#### With an SVG
-
-```jsx
-import { Icon } from '@wordpress/components';
-
-const MyIcon = () => (
-	<Icon
-		icon={
-			<svg>
-				<path d="M5 4v3h5.5v12h3V7H19V4z" />
-			</svg>
-		}
-	/>
-);
-```
-
-#### Specifying a className
-
-```jsx
-import { Icon } from '@wordpress/components';
-
-const MyIcon = () => <Icon icon="screenoptions" className="example-class" />;
-```
-
 ## Props
 
-The component accepts the following props. Any additional props are passed through to the underlying icon element.
+### `icon`
 
-### icon
+The icon to render. In most cases, you should use an icon from
+[the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+Other supported values are: component instances, functions,
+[Dashicons](https://developer.wordpress.org/resource/dashicons/)
+(specified as strings), and `null`.
 
--   Type: `String|Function|WPComponent|null`
--   Required: No
--   Default: `null`
+The `size` value, as well as any other additional props, will be passed through.
 
-### size
+ - Type: `IconType`
+ - Required: No
+ - Default: `null`
+
+### `size`
 
 The size (width and height) of the icon.
 
--   Type: `Number`
--   Required: No
--   Default: `20` when a Dashicon is rendered, `24` for all other icons.
+Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.
+
+ - Type: `number`
+ - Required: No
+ - Default: `'string' === typeof icon ? 20 : 24`
diff --git a/packages/components/src/icon/docs-manifest.json b/packages/components/src/icon/docs-manifest.json
new file mode 100644
index 00000000000000..4794049a3eb6ce
--- /dev/null
+++ b/packages/components/src/icon/docs-manifest.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "Icon",
+	"filePath": "./index.tsx"
+}
diff --git a/packages/components/src/icon/index.tsx b/packages/components/src/icon/index.tsx
index 15b41063fdb1fc..283b9cd179cd1c 100644
--- a/packages/components/src/icon/index.tsx
+++ b/packages/components/src/icon/index.tsx
@@ -9,7 +9,6 @@ import type { ComponentType, HTMLProps, SVGProps } from 'react';
 import {
 	cloneElement,
 	createElement,
-	Component,
 	isValidElement,
 } from '@wordpress/element';
 import { SVG } from '@wordpress/primitives';
@@ -20,37 +19,56 @@ import { SVG } from '@wordpress/primitives';
 import Dashicon from '../dashicon';
 import type { IconKey as DashiconIconKey } from '../dashicon/types';
 
-export type IconType< P > = DashiconIconKey | ComponentType< P > | JSX.Element;
+export type IconType =
+	| DashiconIconKey
+	| ComponentType< { size?: number } >
+	| ( ( props: { size?: number } ) => JSX.Element )
+	| JSX.Element;
 
-interface BaseProps< P > {
+type AdditionalProps< T > = T extends ComponentType< infer U >
+	? U
+	: T extends DashiconIconKey
+	? SVGProps< SVGSVGElement >
+	: {};
+
+export type Props = {
 	/**
-	 * The icon to render. Supported values are: Dashicons (specified as
-	 * strings), functions, Component instances and `null`.
+	 * The icon to render. In most cases, you should use an icon from
+	 * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).
+	 *
+	 * Other supported values are: component instances, functions,
+	 * [Dashicons](https://developer.wordpress.org/resource/dashicons/)
+	 * (specified as strings), and `null`.
+	 *
+	 * The `size` value, as well as any other additional props, will be passed through.
 	 *
 	 * @default null
 	 */
-	icon?: IconType< P > | null;
+	icon?: IconType | null;
 	/**
 	 * The size (width and height) of the icon.
 	 *
-	 * @default `20` when a Dashicon is rendered, `24` for all other icons.
+	 * Defaults to `20` when `icon` is a string (i.e. a Dashicon id), otherwise `24`.
+	 *
+	 * @default `'string' === typeof icon ? 20 : 24`.
 	 */
 	size?: number;
-}
+} & AdditionalProps< IconType >;
 
-type AdditionalProps< T > = T extends ComponentType< infer U >
-	? U
-	: T extends DashiconIconKey
-	? SVGProps< SVGSVGElement >
-	: {};
-
-export type Props< P > = BaseProps< P > & AdditionalProps< IconType< P > >;
-
-function Icon< P >( {
+/**
+ * Renders a raw icon without any initial styling or wrappers.
+ *
+ * ```jsx
+ * import { wordpress } from '@wordpress/icons';
+ *
+ * <Icon icon={ wordpress } />
+ * ```
+ */
+function Icon( {
 	icon = null,
 	size = 'string' === typeof icon ? 20 : 24,
 	...additionalProps
-}: Props< P > ) {
+}: Props ) {
 	if ( 'string' === typeof icon ) {
 		return (
 			<Dashicon
@@ -68,14 +86,7 @@ function Icon< P >( {
 	}
 
 	if ( 'function' === typeof icon ) {
-		if ( icon.prototype instanceof Component ) {
-			return createElement( icon, {
-				size,
-				...additionalProps,
-			} as unknown as P );
-		}
-
-		return ( icon as ( ...args: any[] ) => JSX.Element )( {
+		return createElement( icon, {
 			size,
 			...additionalProps,
 		} );
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.story.tsx b/packages/components/src/icon/stories/index.story.tsx
new file mode 100644
index 00000000000000..d1eabf2e98b771
--- /dev/null
+++ b/packages/components/src/icon/stories/index.story.tsx
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } 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: Meta< typeof Icon > = {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+/**
+ * When `icon` is a function, it will be passed the `size` prop and any other additional props.
+ */
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: ( { size }: { size?: number } ) => (
+		<img
+			width={ size }
+			height={ size }
+			src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+			alt="WordPress"
+		/>
+	),
+};
+WithAFunction.parameters = {
+	docs: {
+		source: {
+			code: `
+<Icon
+  icon={ ( { size } ) => (
+    <img
+      width={ size }
+      height={ size }
+      src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+      alt="WordPress"
+    />
+  ) }
+/>
+		`,
+		},
+	},
+};
+
+const MyIconComponent = ( { size }: { size?: number } ) => (
+	<SVG width={ size } height={ size }>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+/**
+ * When `icon` is a component, it will be passed the `size` prop and any other additional props.
+ */
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: <MyIconComponent />,
+};
+WithAComponent.parameters = {
+	docs: {
+		source: {
+			code: `
+const MyIconComponent = ( { size } ) => (
+  <SVG width={ size } height={ size }>
+    <Path d="M5 4v3h5.5v12h3V7H19V4z" />
+  </SVG>
+);
+
+<Icon 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](https://developer.wordpress.org/resource/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: StoryFn< 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',
+};
diff --git a/packages/components/src/icon/test/index.js b/packages/components/src/icon/test/index.js
deleted file mode 100644
index 9faff9e74116df..00000000000000
--- a/packages/components/src/icon/test/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import Icon from '../';
-import { Path, SVG } from '../../';
-
-describe( 'Icon', () => {
-	const testId = 'icon';
-	const className = 'example-class';
-	const svg = (
-		<SVG>
-			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-		</SVG>
-	);
-
-	it( 'renders nothing when icon omitted', () => {
-		render( <Icon data-testid={ testId } /> );
-
-		expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders a dashicon by slug', () => {
-		render( <Icon data-testid={ testId } icon="format-image" /> );
-
-		expect( screen.getByTestId( testId ) ).toHaveClass(
-			'dashicons-format-image'
-		);
-	} );
-
-	it( 'renders a dashicon with custom size', () => {
-		render(
-			<Icon data-testid={ testId } icon="format-image" size={ 10 } />
-		);
-
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
-		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
-	} );
-
-	it( 'renders a function', () => {
-		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
-
-		expect( screen.getByTestId( testId ) ).toBeVisible();
-	} );
-
-	it( 'renders an element', () => {
-		render( <Icon icon={ <span data-testid={ testId } /> } /> );
-
-		expect( screen.getByTestId( testId ) ).toBeVisible();
-	} );
-
-	it( 'renders an svg element', () => {
-		render( <Icon data-testid={ testId } icon={ svg } /> );
-
-		expect( screen.getByTestId( testId ) ).toBeVisible();
-	} );
-
-	it( 'renders an svg element with a default width and height of 24', () => {
-		render( <Icon data-testid={ testId } icon={ svg } /> );
-		const icon = screen.getByTestId( testId );
-
-		expect( icon ).toHaveAttribute( 'width', '24' );
-		expect( icon ).toHaveAttribute( 'height', '24' );
-	} );
-
-	it( 'renders an svg element and override its width and height', () => {
-		render(
-			<Icon
-				data-testid={ testId }
-				icon={
-					<SVG width={ 64 } height={ 64 }>
-						<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-					</SVG>
-				}
-				size={ 32 }
-			/>
-		);
-		const icon = screen.getByTestId( testId );
-
-		expect( icon ).toHaveAttribute( 'width', '32' );
-		expect( icon ).toHaveAttribute( 'height', '32' );
-	} );
-
-	it( 'renders an svg element and does not override width and height if already specified', () => {
-		render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> );
-		const icon = screen.getByTestId( testId );
-
-		expect( icon ).toHaveAttribute( 'width', '32' );
-		expect( icon ).toHaveAttribute( 'height', '32' );
-	} );
-
-	it( 'renders a component', () => {
-		const MyComponent = () => (
-			<span data-testid={ testId } className={ className } />
-		);
-		render( <Icon icon={ MyComponent } /> );
-
-		expect( screen.getByTestId( testId ) ).toHaveClass( className );
-	} );
-} );
diff --git a/packages/components/src/icon/test/index.tsx b/packages/components/src/icon/test/index.tsx
new file mode 100644
index 00000000000000..fd9c1650fb3b5b
--- /dev/null
+++ b/packages/components/src/icon/test/index.tsx
@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '..';
+
+describe( 'Icon', () => {
+	const testId = 'icon';
+	const className = 'example-class';
+	const svg = (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	);
+
+	it( 'renders nothing when icon omitted', () => {
+		render( <Icon data-testid={ testId } /> );
+
+		expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders a dashicon by slug', () => {
+		render( <Icon data-testid={ testId } icon="format-image" /> );
+
+		expect( screen.getByTestId( testId ) ).toHaveClass(
+			'dashicons-format-image'
+		);
+	} );
+
+	it( 'renders a dashicon with custom size', () => {
+		render(
+			<Icon data-testid={ testId } icon="format-image" size={ 10 } />
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'width:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'height:10px' );
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'font-size:10px' );
+	} );
+
+	it( 'renders a function', () => {
+		render( <Icon icon={ () => <span data-testid={ testId } /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an element', () => {
+		render( <Icon icon={ <span data-testid={ testId } /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an svg element', () => {
+		render( <Icon data-testid={ testId } icon={ svg } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+	} );
+
+	it( 'renders an svg element with a default width and height of 24', () => {
+		render( <Icon data-testid={ testId } icon={ svg } /> );
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '24' );
+		expect( icon ).toHaveAttribute( 'height', '24' );
+	} );
+
+	it( 'renders an svg element and override its width and height', () => {
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={
+					<SVG width={ 64 } height={ 64 }>
+						<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+					</SVG>
+				}
+				size={ 32 }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
+	} );
+
+	it( 'renders an svg element and does not override width and height if already specified', () => {
+		render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> );
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveAttribute( 'width', '32' );
+		expect( icon ).toHaveAttribute( 'height', '32' );
+	} );
+
+	it( 'renders a component', () => {
+		const MyComponent = () => (
+			<span data-testid={ testId } className={ className } />
+		);
+		render( <Icon icon={ MyComponent } /> );
+
+		expect( screen.getByTestId( testId ) ).toHaveClass( className );
+	} );
+} );
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
deleted file mode 100644
index 114884690e4821..00000000000000
--- a/packages/components/src/index.js
+++ /dev/null
@@ -1,213 +0,0 @@
-// Primitives.
-export {
-	SVG,
-	Path,
-	Circle,
-	Polygon,
-	Rect,
-	G,
-	Line,
-	HorizontalRule,
-	BlockQuotation,
-} from '@wordpress/primitives';
-
-// Components.
-export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
-export {
-	default as Animate,
-	getAnimateClassName as __unstableGetAnimateClassName,
-} from './animate';
-export { __unstableMotion } from './animation';
-export { default as AnglePickerControl } from './angle-picker-control';
-export {
-	default as Autocomplete,
-	useAutocompleteProps as __unstableUseAutocompleteProps,
-} from './autocomplete';
-export { default as BaseControl } from './base-control';
-export {
-	BorderBoxControl as __experimentalBorderBoxControl,
-	hasSplitBorders as __experimentalHasSplitBorders,
-	isDefinedBorder as __experimentalIsDefinedBorder,
-	isEmptyBorder as __experimentalIsEmptyBorder,
-} from './border-box-control';
-export { BorderControl as __experimentalBorderControl } from './border-control';
-export {
-	default as __experimentalBoxControl,
-	applyValueToSides as __experimentalApplyValueToSides,
-} from './box-control';
-export { default as Button } from './button';
-export { default as ButtonGroup } from './button-group';
-export {
-	Card,
-	CardBody,
-	CardDivider,
-	CardFooter,
-	CardHeader,
-	CardMedia,
-} from './card';
-export { default as CheckboxControl } from './checkbox-control';
-export { default as ClipboardButton } from './clipboard-button';
-export { default as __experimentalPaletteEdit } from './palette-edit';
-export { default as ColorIndicator } from './color-indicator';
-export { default as ColorPalette } from './color-palette';
-export { ColorPicker } from './color-picker';
-export { default as ComboboxControl } from './combobox-control';
-export {
-	Composite as __unstableComposite,
-	CompositeGroup as __unstableCompositeGroup,
-	CompositeItem as __unstableCompositeItem,
-	useCompositeState as __unstableUseCompositeState,
-} from './composite';
-export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
-export { default as CustomSelectControl } from './custom-select-control';
-export { default as Dashicon } from './dashicon';
-export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
-export { default as __experimentalDimensionControl } from './dimension-control';
-export { default as Disabled } from './disabled';
-export { DisclosureContent as __unstableDisclosureContent } from './disclosure';
-export { Divider as __experimentalDivider } from './divider';
-export { default as Draggable } from './draggable';
-export { default as DropZone } from './drop-zone';
-export { default as DropZoneProvider } from './drop-zone/provider';
-export { default as Dropdown } from './dropdown';
-export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';
-export { default as DropdownMenu } from './dropdown-menu';
-export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
-export { Elevation as __experimentalElevation } from './elevation';
-export { default as ExternalLink } from './external-link';
-export { Flex, FlexBlock, FlexItem } from './flex';
-export { default as FocalPointPicker } from './focal-point-picker';
-export { default as FocusableIframe } from './focusable-iframe';
-export { default as FontSizePicker } from './font-size-picker';
-export { default as FormFileUpload } from './form-file-upload';
-export { default as FormToggle } from './form-toggle';
-export { default as FormTokenField } from './form-token-field';
-export { default as GradientPicker } from './gradient-picker';
-export { default as CustomGradientPicker } from './custom-gradient-picker';
-export { Grid as __experimentalGrid } from './grid';
-export { default as Guide } from './guide';
-export { default as GuidePage } from './guide/page';
-export { Heading as __experimentalHeading } from './heading';
-export { HStack as __experimentalHStack } from './h-stack';
-export { default as Icon } from './icon';
-export { default as IconButton } from './button/deprecated';
-export {
-	ItemGroup as __experimentalItemGroup,
-	Item as __experimentalItem,
-} from './item-group';
-export { default as __experimentalInputControl } from './input-control';
-export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';
-export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';
-export { default as KeyboardShortcuts } from './keyboard-shortcuts';
-export { default as MenuGroup } from './menu-group';
-export { default as MenuItem } from './menu-item';
-export { default as MenuItemsChoice } from './menu-items-choice';
-export { default as Modal } from './modal';
-export { default as ScrollLock } from './scroll-lock';
-export { NavigableMenu, TabbableContainer } from './navigable-container';
-export { default as __experimentalNavigation } from './navigation';
-export { default as __experimentalNavigationBackButton } from './navigation/back-button';
-export { default as __experimentalNavigationGroup } from './navigation/group';
-export { default as __experimentalNavigationItem } from './navigation/item';
-export { default as __experimentalNavigationMenu } from './navigation/menu';
-export {
-	NavigatorProvider as __experimentalNavigatorProvider,
-	NavigatorScreen as __experimentalNavigatorScreen,
-	NavigatorButton as __experimentalNavigatorButton,
-	NavigatorBackButton as __experimentalNavigatorBackButton,
-	useNavigator as __experimentalUseNavigator,
-} from './navigator';
-export { default as Notice } from './notice';
-export { default as __experimentalNumberControl } from './number-control';
-export { default as NoticeList } from './notice/list';
-export { default as Panel } from './panel';
-export { default as PanelBody } from './panel/body';
-export { default as PanelHeader } from './panel/header';
-export { default as PanelRow } from './panel/row';
-export { default as Placeholder } from './placeholder';
-export { default as Popover } from './popover';
-export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
-export { default as QueryControls } from './query-controls';
-export { default as __experimentalRadio } from './radio-group/radio';
-export { default as __experimentalRadioGroup } from './radio-group';
-export { default as RadioControl } from './radio-control';
-export { default as RangeControl } from './range-control';
-export { default as ResizableBox } from './resizable-box';
-export { default as ResponsiveWrapper } from './responsive-wrapper';
-export { default as SandBox } from './sandbox';
-export { default as SearchControl } from './search-control';
-export { default as SelectControl } from './select-control';
-export { default as Snackbar } from './snackbar';
-export { default as SnackbarList } from './snackbar/list';
-export { Spacer as __experimentalSpacer } from './spacer';
-export { Scrollable as __experimentalScrollable } from './scrollable';
-export { default as Spinner } from './spinner';
-export { Surface as __experimentalSurface } from './surface';
-export { default as TabPanel } from './tab-panel';
-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 {
-	ToggleGroupControl as __experimentalToggleGroupControl,
-	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
-	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
-} from './toggle-group-control';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
-export {
-	ToolsPanel as __experimentalToolsPanel,
-	ToolsPanelItem as __experimentalToolsPanelItem,
-	ToolsPanelContext as __experimentalToolsPanelContext,
-} from './tools-panel';
-export { default as Tooltip } from './tooltip';
-export {
-	default as __experimentalTreeGrid,
-	TreeGridRow as __experimentalTreeGridRow,
-	TreeGridCell as __experimentalTreeGridCell,
-	TreeGridItem as __experimentalTreeGridItem,
-} from './tree-grid';
-export { default as TreeSelect } from './tree-select';
-export { Truncate as __experimentalTruncate } from './truncate';
-export {
-	default as __experimentalUnitControl,
-	useCustomUnits as __experimentalUseCustomUnits,
-	parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,
-} from './unit-control';
-export { View as __experimentalView } from './view';
-export { VisuallyHidden } from './visually-hidden';
-export { VStack as __experimentalVStack } from './v-stack';
-export { default as IsolatedEventContainer } from './isolated-event-container';
-export {
-	createSlotFill,
-	Slot,
-	Fill,
-	Provider as SlotFillProvider,
-	useSlot as __experimentalUseSlot,
-	useSlotFills as __experimentalUseSlotFills,
-} from './slot-fill';
-export { default as __experimentalStyleProvider } from './style-provider';
-export { ZStack as __experimentalZStack } from './z-stack';
-
-// Higher-Order Components.
-export {
-	default as navigateRegions,
-	useNavigateRegions as __unstableUseNavigateRegions,
-} from './higher-order/navigate-regions';
-export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
-export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
-export { default as withFilters } from './higher-order/with-filters';
-export { default as withFocusOutside } from './higher-order/with-focus-outside';
-export {
-	default as withFocusReturn,
-	Provider as FocusReturnProvider,
-} from './higher-order/with-focus-return';
-export { default as withNotices } from './higher-order/with-notices';
-export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 140ad940ace6eb..7c2866cbe98b13 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -15,12 +15,14 @@ export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as FocalPointPicker } from './focal-point-picker';
-export { default as Toolbar } from './toolbar';
-export { default as ToolbarButton } from './toolbar-button';
-export { default as __experimentalToolbarContext } from './toolbar-context';
-export { default as ToolbarGroup } from './toolbar-group';
-export { default as ToolbarItem } from './toolbar-item';
-export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
 export { default as Tooltip } from './tooltip';
 export { default as Icon } from './icon';
 export { default as Spinner } from './spinner';
@@ -33,6 +35,7 @@ export {
 
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
+export { hasSplitBorders as __experimentalHasSplitBorders } from './border-box-control/utils';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';
 export { default as PanelActions } from './panel/actions';
@@ -91,7 +94,6 @@ export { default as HTMLTextInput } from './mobile/html-text-input';
 export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
-export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
@@ -104,13 +106,11 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
 export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
-export { default as ImageLinkDestinationsScreen } from './mobile/link-settings/image-link-destinations-screen';
 export { default as SegmentedControl } from './mobile/segmented-control';
-export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
+export { default as Image } from './mobile/image';
+export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
-export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
-export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
@@ -121,6 +121,7 @@ export {
 	ALIGNMENT_BREAKPOINTS,
 	alignmentHelpers,
 } from './mobile/utils/alignments';
+export { default as getPxFromCssUnit } from './mobile/utils/get-px-from-css-unit';
 
 // Hooks.
 export {
@@ -129,14 +130,5 @@ export {
 	getValueAndUnit,
 } from './mobile/utils/use-unit-converter-to-mobile';
 
-export {
-	default as GlobalStylesContext,
-	useGlobalStyles,
-	withGlobalStyles,
-	getMergedGlobalStyles,
-} from './mobile/global-styles-context';
-export {
-	getGlobalStyles,
-	getColorsAndGradients,
-	useMobileGlobalStylesColors,
-} from './mobile/global-styles-context/utils';
+// Private APIs.
+export { privateApis } from './private-apis';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
new file mode 100644
index 00000000000000..2acd609992d6ad
--- /dev/null
+++ b/packages/components/src/index.ts
@@ -0,0 +1,242 @@
+// Primitives.
+export {
+	SVG,
+	Path,
+	Circle,
+	Polygon,
+	Rect,
+	G,
+	Line,
+	HorizontalRule,
+	BlockQuotation,
+} from '@wordpress/primitives';
+
+// Components.
+export {
+	/** @deprecated Import `AlignmentMatrixControl` instead. */
+	default as __experimentalAlignmentMatrixControl,
+	default as AlignmentMatrixControl,
+} from './alignment-matrix-control';
+export {
+	default as Animate,
+	getAnimateClassName as __unstableGetAnimateClassName,
+} from './animate';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
+export { default as AnglePickerControl } from './angle-picker-control';
+export {
+	default as Autocomplete,
+	useAutocompleteProps as __unstableUseAutocompleteProps,
+} from './autocomplete';
+export { default as BaseControl, useBaseControlProps } from './base-control';
+export {
+	/** @deprecated Import `BorderBoxControl` instead. */
+	BorderBoxControl as __experimentalBorderBoxControl,
+	BorderBoxControl,
+	hasSplitBorders as __experimentalHasSplitBorders,
+	isDefinedBorder as __experimentalIsDefinedBorder,
+	isEmptyBorder as __experimentalIsEmptyBorder,
+} from './border-box-control';
+export {
+	/** @deprecated Import `BorderControl` instead. */
+	BorderControl as __experimentalBorderControl,
+	BorderControl,
+} from './border-control';
+export {
+	/** @deprecated Import `BoxControl` instead. */
+	default as __experimentalBoxControl,
+	default as BoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button-group';
+export {
+	Card,
+	CardBody,
+	CardDivider,
+	CardFooter,
+	CardHeader,
+	CardMedia,
+} from './card';
+export { default as CheckboxControl } from './checkbox-control';
+export { default as ClipboardButton } from './clipboard-button';
+export { default as __experimentalPaletteEdit } from './palette-edit';
+export { default as ColorIndicator } from './color-indicator';
+export { default as ColorPalette } from './color-palette';
+export { ColorPicker } from './color-picker';
+export { default as ComboboxControl } from './combobox-control';
+export {
+	Composite as __unstableComposite,
+	CompositeGroup as __unstableCompositeGroup,
+	CompositeItem as __unstableCompositeItem,
+	useCompositeState as __unstableUseCompositeState,
+} from './composite/legacy';
+export { Composite } from './composite';
+export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
+export { default as CustomSelectControl } from './custom-select-control';
+export { default as Dashicon } from './dashicon';
+export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
+export { default as __experimentalDimensionControl } from './dimension-control';
+export { default as Disabled } from './disabled';
+export { DisclosureContent as __unstableDisclosureContent } from './disclosure';
+export { Divider as __experimentalDivider } from './divider';
+export { default as Draggable } from './draggable';
+export { default as DropZone } from './drop-zone';
+export { default as DropZoneProvider } from './drop-zone/provider';
+export { default as Dropdown } from './dropdown';
+export { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';
+export { default as DropdownMenu } from './dropdown-menu';
+export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
+export { Elevation as __experimentalElevation } from './elevation';
+export { default as ExternalLink } from './external-link';
+export { Flex, FlexBlock, FlexItem } from './flex';
+export { default as FocalPointPicker } from './focal-point-picker';
+export { default as FocusableIframe } from './focusable-iframe';
+export { default as FontSizePicker } from './font-size-picker';
+export { default as FormFileUpload } from './form-file-upload';
+export { default as FormToggle } from './form-toggle';
+export { default as FormTokenField } from './form-token-field';
+export { default as GradientPicker } from './gradient-picker';
+export { default as CustomGradientPicker } from './custom-gradient-picker';
+export { Grid as __experimentalGrid } from './grid';
+export { default as Guide } from './guide';
+export { default as GuidePage } from './guide/page';
+export { Heading as __experimentalHeading } from './heading';
+export { HStack as __experimentalHStack } from './h-stack';
+export { default as Icon } from './icon';
+export type { IconType } from './icon';
+export { default as IconButton } from './button/deprecated';
+export {
+	ItemGroup as __experimentalItemGroup,
+	Item as __experimentalItem,
+} from './item-group';
+export { default as __experimentalInputControl } from './input-control';
+export { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';
+export { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';
+export { default as KeyboardShortcuts } from './keyboard-shortcuts';
+export { default as MenuGroup } from './menu-group';
+export { default as MenuItem } from './menu-item';
+export { default as MenuItemsChoice } from './menu-items-choice';
+export { default as Modal } from './modal';
+export { default as ScrollLock } from './scroll-lock';
+export { NavigableMenu, TabbableContainer } from './navigable-container';
+export { default as __experimentalNavigation } from './navigation';
+export { default as __experimentalNavigationBackButton } from './navigation/back-button';
+export { default as __experimentalNavigationGroup } from './navigation/group';
+export { default as __experimentalNavigationItem } from './navigation/item';
+export { default as __experimentalNavigationMenu } from './navigation/menu';
+export {
+	/** @deprecated Import `Navigator` instead. */
+	NavigatorProvider as __experimentalNavigatorProvider,
+	/** @deprecated Import `Navigator` and use `Navigator.Screen` instead. */
+	NavigatorScreen as __experimentalNavigatorScreen,
+	/** @deprecated Import `Navigator` and use `Navigator.Button` instead. */
+	NavigatorButton as __experimentalNavigatorButton,
+	/** @deprecated Import `Navigator` and use `Navigator.BackButton` instead. */
+	NavigatorBackButton as __experimentalNavigatorBackButton,
+	/** @deprecated Import `Navigator` and use `Navigator.BackButton` instead. */
+	NavigatorToParentButton as __experimentalNavigatorToParentButton,
+} from './navigator/legacy';
+export {
+	Navigator,
+	useNavigator,
+	/** @deprecated Import `useNavigator` instead. */
+	useNavigator as __experimentalUseNavigator,
+} from './navigator';
+export { default as Notice } from './notice';
+export { default as __experimentalNumberControl } from './number-control';
+export { default as NoticeList } from './notice/list';
+export { default as Panel } from './panel';
+export { default as PanelBody } from './panel/body';
+export { default as PanelHeader } from './panel/header';
+export { default as PanelRow } from './panel/row';
+export { default as Placeholder } from './placeholder';
+export { default as Popover } from './popover';
+export { default as ProgressBar } from './progress-bar';
+export { default as QueryControls } from './query-controls';
+export { default as __experimentalRadio } from './radio-group/radio';
+export { default as __experimentalRadioGroup } from './radio-group';
+export { default as RadioControl } from './radio-control';
+export { default as RangeControl } from './range-control';
+export { default as ResizableBox } from './resizable-box';
+export { default as ResponsiveWrapper } from './responsive-wrapper';
+export { default as SandBox } from './sandbox';
+export { default as SearchControl } from './search-control';
+export { default as SelectControl } from './select-control';
+export { default as Snackbar } from './snackbar';
+export { default as SnackbarList } from './snackbar/list';
+export { Spacer as __experimentalSpacer } from './spacer';
+export { Scrollable as __experimentalScrollable } from './scrollable';
+export { default as Spinner } from './spinner';
+export { Surface as __experimentalSurface } from './surface';
+export { default as TabPanel } from './tab-panel';
+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 Tip } from './tip';
+export { default as ToggleControl } from './toggle-control';
+export {
+	ToggleGroupControl as __experimentalToggleGroupControl,
+	ToggleGroupControlOption as __experimentalToggleGroupControlOption,
+	ToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,
+} from './toggle-group-control';
+export {
+	Toolbar,
+	ToolbarButton,
+	ToolbarContext as __experimentalToolbarContext,
+	ToolbarDropdownMenu,
+	ToolbarGroup,
+	ToolbarItem,
+} from './toolbar';
+export {
+	ToolsPanel as __experimentalToolsPanel,
+	ToolsPanelItem as __experimentalToolsPanelItem,
+	ToolsPanelContext as __experimentalToolsPanelContext,
+} from './tools-panel';
+export { default as Tooltip } from './tooltip';
+export {
+	default as __experimentalTreeGrid,
+	TreeGridRow as __experimentalTreeGridRow,
+	TreeGridCell as __experimentalTreeGridCell,
+	TreeGridItem as __experimentalTreeGridItem,
+} from './tree-grid';
+export { default as TreeSelect } from './tree-select';
+export { Truncate as __experimentalTruncate } from './truncate';
+export {
+	default as __experimentalUnitControl,
+	useCustomUnits as __experimentalUseCustomUnits,
+	parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,
+} from './unit-control';
+export { View as __experimentalView } from './view';
+export { VisuallyHidden } from './visually-hidden';
+export { VStack as __experimentalVStack } from './v-stack';
+export { default as IsolatedEventContainer } from './isolated-event-container';
+export {
+	createSlotFill,
+	Slot,
+	Fill,
+	Provider as SlotFillProvider,
+	useSlot as __experimentalUseSlot,
+	useSlotFills as __experimentalUseSlotFills,
+} from './slot-fill';
+export { default as __experimentalStyleProvider } from './style-provider';
+export { ZStack as __experimentalZStack } from './z-stack';
+
+// Higher-Order Components.
+export {
+	default as navigateRegions,
+	useNavigateRegions as __unstableUseNavigateRegions,
+} from './higher-order/navigate-regions';
+export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
+export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
+export { default as withFilters } from './higher-order/with-filters';
+export { default as withFocusOutside } from './higher-order/with-focus-outside';
+export {
+	default as withFocusReturn,
+	Provider as FocusReturnProvider,
+} from './higher-order/with-focus-return';
+export { default as withNotices } from './higher-order/with-notices';
+export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+
+// Private APIs.
+export { privateApis } from './private-apis';
diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
index 1cde49917823ff..58a3b4a3b1a094 100644
--- a/packages/components/src/input-control/README.md
+++ b/packages/components/src/input-control/README.md
@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );
@@ -107,3 +107,11 @@ The current value of the input.
 
 -   Type: `String`
 -   Required: No
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/input-control/backdrop.tsx b/packages/components/src/input-control/backdrop.tsx
index c85efad03a8052..4fe0bb9097c62e 100644
--- a/packages/components/src/input-control/backdrop.tsx
+++ b/packages/components/src/input-control/backdrop.tsx
@@ -7,13 +7,13 @@ import { memo } from '@wordpress/element';
  */
 import { BackdropUI } from './styles/input-control-styles';
 
-function Backdrop( { disabled = false, isFocused = false } ) {
+function Backdrop( { disabled = false, isBorderless = false } ) {
 	return (
 		<BackdropUI
 			aria-hidden="true"
 			className="components-input-control__backdrop"
 			disabled={ disabled }
-			isFocused={ isFocused }
+			isBorderless={ isBorderless }
 		/>
 	);
 }
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index ee6ab9e0d1334a..fd0fc0a5c45536 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,8 +16,10 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { useDraft } from './utils';
+import BaseControl from '../base-control';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -29,12 +31,16 @@ function useUniqueId( idProp?: string ) {
 }
 
 export function UnforwardedInputControl(
-	{
-		__next36pxDefaultSize,
+	props: InputControlProps,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
 		disabled = false,
+		help,
 		hideLabelFromVision = false,
 		id: idProp,
 		isPressEnterToChange = false,
@@ -48,58 +54,61 @@ export function UnforwardedInputControl(
 		style,
 		suffix,
 		value,
-		...props
-	}: InputControlProps,
-	ref: ForwardedRef< HTMLInputElement >
-) {
-	const [ isFocused, setIsFocused ] = useState( false );
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const id = useUniqueId( idProp );
-	const classes = classNames( 'components-input-control', className );
+	const classes = clsx( 'components-input-control', className );
 
 	const draftHookProps = useDraft( {
 		value,
-		onBlur: props.onBlur,
+		onBlur: restProps.onBlur,
 		onChange,
 	} );
 
+	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
+
 	return (
-		<InputBase
-			__next36pxDefaultSize={ __next36pxDefaultSize }
-			__unstableInputWidth={ __unstableInputWidth }
+		<BaseControl
 			className={ classes }
-			disabled={ disabled }
-			gap={ 3 }
-			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
 			id={ id }
-			isFocused={ isFocused }
-			justify="left"
-			label={ label }
-			labelPosition={ labelPosition }
-			prefix={ prefix }
-			size={ size }
-			style={ style }
-			suffix={ suffix }
+			__nextHasNoMarginBottom
 		>
-			<InputField
-				{ ...props }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
-				className="components-input-control__input"
+			<InputBase
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
+				gap={ 3 }
+				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
-				isPressEnterToChange={ isPressEnterToChange }
-				onKeyDown={ onKeyDown }
-				onValidate={ onValidate }
-				paddingInlineStart={ prefix ? space( 2 ) : undefined }
-				paddingInlineEnd={ suffix ? space( 2 ) : undefined }
-				ref={ ref }
-				setIsFocused={ setIsFocused }
+				justify="left"
+				label={ label }
+				labelPosition={ labelPosition }
+				prefix={ prefix }
 				size={ size }
-				stateReducer={ stateReducer }
-				{ ...draftHookProps }
-			/>
-		</InputBase>
+				style={ style }
+				suffix={ suffix }
+			>
+				<InputField
+					{ ...restProps }
+					{ ...helpProp }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					className="components-input-control__input"
+					disabled={ disabled }
+					id={ id }
+					isPressEnterToChange={ isPressEnterToChange }
+					onKeyDown={ onKeyDown }
+					onValidate={ onValidate }
+					paddingInlineStart={ prefix ? space( 1 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 1 ) : undefined }
+					ref={ ref }
+					size={ size }
+					stateReducer={ stateReducer }
+					{ ...draftHookProps }
+				/>
+			</InputBase>
+		</BaseControl>
 	);
 }
 
@@ -109,7 +118,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from 'react';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 3f520e279b8fab..f1b8227563cfdc 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -7,22 +7,22 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Backdrop from './backdrop';
 import Label from './label';
-import {
-	Container,
-	Root,
-	Prefix,
-	Suffix,
-	getSizeConfig,
-} from './styles/input-control-styles';
+import { Container, Root, Prefix, Suffix } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import {
+	ContextSystemProvider,
+	contextConnect,
+	useContextSystem,
+} from '../context';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -33,14 +33,21 @@ function useUniqueId( idProp?: string ) {
 
 // Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
-	const props: { direction?: string; gap?: number; justify?: string } = {};
+	const props: {
+		direction?: string;
+		gap?: number;
+		justify?: string;
+		expanded?: boolean;
+	} = {};
 	switch ( labelPosition ) {
 		case 'top':
 			props.direction = 'column';
+			props.expanded = false;
 			props.gap = 0;
 			break;
 		case 'bottom':
 			props.direction = 'column-reverse';
+			props.expanded = false;
 			props.gap = 0;
 			break;
 		case 'edge':
@@ -51,9 +58,12 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 	return props;
 }
 
-export function InputBase(
-	{
-		__next36pxDefaultSize,
+function InputBase(
+	props: WordPressComponentProps< InputBaseProps, 'div' >,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -61,38 +71,33 @@ export function InputBase(
 		hideLabelFromVision = false,
 		labelPosition,
 		id: idProp,
-		isFocused = false,
+		isBorderless = false,
 		label,
 		prefix,
 		size = 'default',
 		suffix,
-		...props
-	}: WordPressComponentProps< InputBaseProps, 'div' >,
-	ref: ForwardedRef< HTMLDivElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp(
+		useContextSystem( props, 'InputBase' )
+	);
+
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
-	const { paddingLeft, paddingRight } = getSizeConfig( {
-		inputSize: size,
-		__next36pxDefaultSize,
-	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { paddingLeft },
-			InputControlSuffixWrapper: { paddingRight },
+			InputControlPrefixWrapper: { __next40pxDefaultSize, size },
+			InputControlSuffixWrapper: { __next40pxDefaultSize, size },
 		};
-	}, [ paddingLeft, paddingRight ] );
+	}, [ __next40pxDefaultSize, size ] );
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
-			{ ...props }
+			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
 			gap={ 2 }
-			isFocused={ isFocused }
-			labelPosition={ labelPosition }
 			ref={ ref }
 		>
 			<Label
@@ -123,10 +128,14 @@ export function InputBase(
 						</Suffix>
 					) }
 				</ContextSystemProvider>
-				<Backdrop disabled={ disabled } isFocused={ isFocused } />
+				<Backdrop disabled={ disabled } isBorderless={ isBorderless } />
 			</Container>
 		</Root>
 	);
 }
 
-export default forwardRef( InputBase );
+/**
+ * `InputBase` is an internal component used to style the standard borders for an input,
+ * as well as handle the layout for prefix/suffix elements.
+ */
+export default contextConnect( InputBase, 'InputBase' );
diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
index 77a69aa259d207..d9b5a293a0fa6e 100644
--- a/packages/components/src/input-control/input-field.tsx
+++ b/packages/components/src/input-control/input-field.tsx
@@ -19,11 +19,12 @@ import { forwardRef, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
 import type { InputFieldProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const noop = () => {};
 
@@ -34,18 +35,15 @@ function InputField(
 		dragThreshold = 10,
 		id,
 		isDragEnabled = false,
-		isFocused,
 		isPressEnterToChange = false,
 		onBlur = noop,
 		onChange = noop,
 		onDrag = noop,
 		onDragEnd = noop,
 		onDragStart = noop,
-		onFocus = noop,
 		onKeyDown = noop,
 		onValidate = noop,
 		size = 'default',
-		setIsFocused,
 		stateReducer = ( state: any ) => state,
 		value: valueProp,
 		type,
@@ -84,7 +82,6 @@ function InputField(
 
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
-		setIsFocused?.( false );
 
 		/**
 		 * If isPressEnterToChange is set, this commits the value to
@@ -96,11 +93,6 @@ function InputField(
 		}
 	};
 
-	const handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {
-		onFocus( event );
-		setIsFocused?.( true );
-	};
-
 	const handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {
 		const nextValue = event.target.value;
 		change( nextValue, event );
@@ -163,7 +155,9 @@ function InputField(
 				target,
 			};
 
-			if ( ! distance ) return;
+			if ( ! distance ) {
+				return;
+			}
 			event.stopPropagation();
 
 			/**
@@ -221,12 +215,13 @@ function InputField(
 			id={ id }
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
-			onFocus={ handleOnFocus }
-			onKeyDown={ handleOnKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }
-			value={ value }
+			// Fallback to `''` to avoid "uncontrolled to controlled" warning.
+			// See https://github.com/WordPress/gutenberg/pull/47250 for details.
+			value={ value ?? '' }
 			type={ type }
 		/>
 	);
diff --git a/packages/components/src/input-control/input-prefix-wrapper.tsx b/packages/components/src/input-control/input-prefix-wrapper.tsx
index 310d51886e93dd..c5232e4d9e6bbc 100644
--- a/packages/components/src/input-control/input-prefix-wrapper.tsx
+++ b/packages/components/src/input-control/input-prefix-wrapper.tsx
@@ -6,22 +6,23 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
-import type { InputControlPrefixWrapperProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlPrefixWrapper(
-	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
 
 	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+		<PrefixSuffixWrapper
+			{ ...derivedProps }
+			isPrefix
+			ref={ forwardedRef }
+		/>
 	);
 }
 
diff --git a/packages/components/src/input-control/input-suffix-wrapper.tsx b/packages/components/src/input-control/input-suffix-wrapper.tsx
index 16e7848f9c12aa..fb3ec4c6ae9be9 100644
--- a/packages/components/src/input-control/input-suffix-wrapper.tsx
+++ b/packages/components/src/input-control/input-suffix-wrapper.tsx
@@ -6,23 +6,18 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
-import {
-	WordPressComponentProps,
-	contextConnect,
-	useContextSystem,
-} from '../ui/context';
-import type { InputControlSuffixWrapperProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlSuffixWrapper(
-	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
 
-	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
-	);
+	return <PrefixSuffixWrapper { ...derivedProps } ref={ forwardedRef } />;
 }
 
 /**
diff --git a/packages/components/src/input-control/label.tsx b/packages/components/src/input-control/label.tsx
index c0a79f83d95995..50a92289be0208 100644
--- a/packages/components/src/input-control/label.tsx
+++ b/packages/components/src/input-control/label.tsx
@@ -6,7 +6,7 @@ import {
 	Label as BaseLabel,
 	LabelWrapper,
 } from './styles/input-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { InputControlLabelProps } from './types';
 
 export default function Label( {
@@ -15,7 +15,9 @@ export default function Label( {
 	htmlFor,
 	...props
 }: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
-	if ( ! children ) return null;
+	if ( ! children ) {
+		return null;
+	}
 
 	if ( hideLabelFromVision ) {
 		return (
diff --git a/packages/components/src/input-control/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
index acd95d2664342f..51e54d6492f5c5 100644
--- a/packages/components/src/input-control/reducer/reducer.ts
+++ b/packages/components/src/input-control/reducer/reducer.ts
@@ -11,19 +11,15 @@ import { useReducer, useLayoutEffect, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	InputState,
-	StateReducer,
-	initialInputControlState,
-	initialStateReducer,
-} from './state';
+import type { InputState, StateReducer } from './state';
+import { initialInputControlState, initialStateReducer } from './state';
 import * as actions from './actions';
 import type { InputChangeCallback } from '../types';
 
 /**
  * Prepares initialState for the reducer.
  *
- * @param  initialState The initial state.
+ * @param initialState The initial state.
  * @return Prepared initialState for the reducer
  */
 function mergeInitialState(
@@ -45,7 +41,7 @@ function mergeInitialState(
  * exception for CONTROL actions is because they represent controlled updates
  * from props and no case has yet presented for their specialization.
  *
- * @param  composedStateReducers A reducer to specialize state changes.
+ * @param composedStateReducers A reducer to specialize state changes.
  * @return The reducer.
  */
 function inputControlStateReducer(
@@ -140,9 +136,9 @@ function inputControlStateReducer(
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param  stateReducer    An external state reducer.
- * @param  initialState    The initial state for the reducer.
- * @param  onChangeHandler A handler for the onChange event.
+ * @param stateReducer    An external state reducer.
+ * @param initialState    The initial state for the reducer.
+ * @param onChangeHandler A handler for the onChange event.
  * @return State, dispatch, and a collection of actions.
  */
 export function useInputControlStateReducer(
@@ -196,25 +192,28 @@ export function useInputControlStateReducer(
 	const pressDown = createKeyEvent( actions.PRESS_DOWN );
 	const pressEnter = createKeyEvent( actions.PRESS_ENTER );
 
-	const currentState = useRef( state );
-	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+	const currentStateRef = useRef( state );
+	const refPropsRef = useRef( {
+		value: initialState.value,
+		onChangeHandler,
+	} );
 
 	// Freshens refs to props and state so that subsequent effects have access
 	// to their latest values without their changes causing effect runs.
 	useLayoutEffect( () => {
-		currentState.current = state;
-		refProps.current = { value: initialState.value, onChangeHandler };
+		currentStateRef.current = state;
+		refPropsRef.current = { value: initialState.value, onChangeHandler };
 	} );
 
 	// Propagates the latest state through onChange.
 	useLayoutEffect( () => {
 		if (
-			currentState.current._event !== undefined &&
-			state.value !== refProps.current.value &&
+			currentStateRef.current._event !== undefined &&
+			state.value !== refPropsRef.current.value &&
 			! state.isDirty
 		) {
-			refProps.current.onChangeHandler( state.value ?? '', {
-				event: currentState.current._event as
+			refPropsRef.current.onChangeHandler( state.value ?? '', {
+				event: currentStateRef.current._event as
 					| ChangeEvent< HTMLInputElement >
 					| PointerEvent< HTMLInputElement >,
 			} );
@@ -224,8 +223,8 @@ export function useInputControlStateReducer(
 	// Updates the state from props.
 	useLayoutEffect( () => {
 		if (
-			initialState.value !== currentState.current.value &&
-			! currentState.current.isDirty
+			initialState.value !== currentStateRef.current.value &&
+			! currentStateRef.current.isDirty
 		) {
 			dispatch( {
 				type: actions.CONTROL,
diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..136301c42e7d09
--- /dev/null
+++ b/packages/components/src/input-control/stories/index.story.tsx
@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { closeSmall, Icon, link, seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import InputControl from '..';
+import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
+import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
+import Button from '../../button';
+
+const meta: Meta< typeof InputControl > = {
+	title: 'Components (Experimental)/Selection & Input/InputControl',
+	id: 'components-experimental-inputcontrol',
+	component: InputControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		prefix: { control: false },
+		suffix: { control: false },
+		type: { control: { type: 'text' } },
+		value: { control: { disable: true } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof InputControl > = ( args ) => (
+	<InputControl { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Value',
+	placeholder: 'Placeholder',
+};
+
+export const WithHelpText = Template.bind( {} );
+WithHelpText.args = {
+	...Default.args,
+	help: 'Help text to describe the control.',
+};
+
+/**
+ * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlPrefixWrapper>` convenience wrapper.
+ */
+export const WithPrefix = Template.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <InputControlPrefixWrapper>@</InputControlPrefixWrapper>,
+};
+
+/**
+ * A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlSuffixWrapper>` convenience wrapper.
+ */
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
+};
+
+/**
+ * `<InputControlPrefixWrapper>` and `<InputControlSuffixWrapper>` have a `variant` prop that can be used to
+ * adjust the wrapper based on the prefix or suffix content.
+ *
+ * - `'default'`: Standard padding for text content.
+ * - `'icon'`: For icons.
+ * - `'control'`: For controls, like buttons or selects.
+ */
+export const WithIconOrControl = Template.bind( {} );
+WithIconOrControl.args = {
+	...Default.args,
+	prefix: (
+		<InputControlPrefixWrapper variant="icon">
+			<Icon icon={ link } />
+		</InputControlPrefixWrapper>
+	),
+	suffix: (
+		<InputControlSuffixWrapper variant="control">
+			<Button icon={ closeSmall } size="small" label="Clear" />
+		</InputControlSuffixWrapper>
+	),
+};
+
+export const WithSideLabel = Template.bind( {} );
+WithSideLabel.args = {
+	...Default.args,
+	labelPosition: 'side',
+};
+
+export const WithEdgeLabel = Template.bind( {} );
+WithEdgeLabel.args = {
+	...Default.args,
+	__unstableInputWidth: '20em',
+	labelPosition: 'edge',
+};
+
+export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
+	const [ visible, setVisible ] = useState( false );
+	return (
+		<InputControl
+			type={ visible ? 'text' : 'password' }
+			label="Password"
+			suffix={
+				<InputControlSuffixWrapper variant="control">
+					<Button
+						size="small"
+						icon={ visible ? unseen : seen }
+						onClick={ () => setVisible( ( value ) => ! value ) }
+						label={ visible ? 'Hide password' : 'Show password' }
+					/>
+				</InputControlSuffixWrapper>
+			}
+			{ ...args }
+		/>
+	);
+};
diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx
deleted file mode 100644
index 3199e42e630318..00000000000000
--- a/packages/components/src/input-control/stories/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import InputControl from '..';
-import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
-import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
-
-const meta: ComponentMeta< typeof InputControl > = {
-	title: 'Components (Experimental)/InputControl',
-	component: InputControl,
-	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
-	argTypes: {
-		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: { type: null } },
-		onChange: { control: { type: null } },
-		prefix: { control: { type: null } },
-		suffix: { control: { type: null } },
-		type: { control: { type: 'text' } },
-		value: { control: { disable: true } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
-	<InputControl { ...args } />
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Value',
-	placeholder: 'Placeholder',
-};
-
-/**
- * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
- * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
- * `<InputControlPrefixWrapper>` convenience wrapper.
- */
-export const WithPrefix = Template.bind( {} );
-WithPrefix.args = {
-	...Default.args,
-	prefix: <InputControlPrefixWrapper>@</InputControlPrefixWrapper>,
-};
-
-/**
- * A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border,
- * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
- * `<InputControlSuffixWrapper>` convenience wrapper.
- */
-export const WithSuffix = Template.bind( {} );
-WithSuffix.args = {
-	...Default.args,
-	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
-};
-
-export const WithSideLabel = Template.bind( {} );
-WithSideLabel.args = {
-	...Default.args,
-	labelPosition: 'side',
-};
-
-export const WithEdgeLabel = Template.bind( {} );
-WithEdgeLabel.args = {
-	...Default.args,
-	__unstableInputWidth: '20em',
-	labelPosition: 'edge',
-};
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index 1be98530d1fa48..39eea8fdb029a1 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import { css, SerializedStyles } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { baseLabelTypography, COLORS, rtl } from '../../utils';
-import type { LabelPosition, Size } from '../types';
-import { space } from '../../ui/utils/space';
+import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
+import type { LabelPosition, Size, PrefixSuffixWrapperProps } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -22,23 +22,74 @@ type ContainerProps = {
 	labelPosition?: LabelPosition;
 };
 
-type RootProps = {
-	isFocused?: boolean;
-	labelPosition?: LabelPosition;
+export const Prefix = styled.span`
+	box-sizing: border-box;
+	display: block;
+`;
+
+export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
+	box-sizing: border-box;
+	display: flex;
+`;
+
+type BackdropProps = {
+	disabled?: boolean;
+	isBorderless?: boolean;
 };
 
-const rootFocusedStyles = ( { isFocused }: RootProps ) => {
-	if ( ! isFocused ) return '';
+const backdropBorderColor = ( {
+	disabled,
+	isBorderless,
+}: BackdropProps ): CSSProperties[ 'borderColor' ] => {
+	if ( isBorderless ) {
+		return 'transparent';
+	}
 
-	return css( { zIndex: 1 } );
+	if ( disabled ) {
+		return COLORS.ui.borderDisabled;
+	}
+
+	return COLORS.ui.border;
 };
 
-export const Root = styled( Flex )< RootProps >`
+export const BackdropUI = styled.div< BackdropProps >`
+	&&& {
+		box-sizing: border-box;
+		border-color: ${ backdropBorderColor };
+		border-radius: inherit;
+		border-style: solid;
+		border-width: 1px;
+		bottom: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		${ rtl( { paddingLeft: 2 } ) }
+	}
+`;
+
+export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	padding-top: 0;
-	${ rootFocusedStyles }
+
+	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
+	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
+		${ BackdropUI } {
+			border-color: ${ COLORS.ui.borderFocus };
+			box-shadow: ${ CONFIG.controlBoxShadowFocus };
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
@@ -53,9 +104,13 @@ const containerWidthStyles = ( {
 	__unstableInputWidth,
 	labelPosition,
 }: ContainerProps ) => {
-	if ( ! __unstableInputWidth ) return css( { width: '100%' } );
+	if ( ! __unstableInputWidth ) {
+		return css( { width: '100%' } );
+	}
 
-	if ( labelPosition === 'side' ) return '';
+	if ( labelPosition === 'side' ) {
+		return '';
+	}
 
 	if ( labelPosition === 'edge' ) {
 		return css( {
@@ -79,7 +134,7 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -89,24 +144,29 @@ type InputProps = {
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,
 	} );
 };
 
-const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
+export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		compact: '13px',
 		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
 	const fontSizeMobile = '16px';
 
-	if ( ! fontSize ) return '';
+	if ( ! fontSize ) {
+		return '';
+	}
 
 	return css`
 		font-size: ${ fontSizeMobile };
@@ -119,41 +179,42 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 
 export const getSizeConfig = ( {
 	inputSize: size,
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 }: InputProps ) => {
 	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
-			height: 36,
+			height: 40,
 			lineHeight: 1,
-			minHeight: 36,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			minHeight: 40,
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
+		},
+		compact: {
+			height: 32,
+			lineHeight: 1,
+			minHeight: 32,
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 	};
 
-	if ( ! __next36pxDefaultSize ) {
-		sizes.default = {
-			height: 30,
-			lineHeight: 1,
-			minHeight: 30,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
-		};
+	if ( ! __next40pxDefaultSize ) {
+		sizes.default = sizes.compact;
 	}
 
 	return sizes[ size as Size ] || sizes.default;
@@ -210,7 +271,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.gray[ 900 ] };
+		color: ${ COLORS.theme.foreground };
 		display: block;
 		font-family: inherit;
 		margin: 0;
@@ -258,61 +319,34 @@ export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
 
-type BackdropProps = {
-	disabled?: boolean;
-	isFocused?: boolean;
-};
-
-const backdropFocusedStyles = ( {
-	disabled,
-	isFocused,
-}: BackdropProps ): SerializedStyles => {
-	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
-
-	let boxShadow;
+const prefixSuffixWrapperStyles = ( {
+	variant = 'default',
+	size,
+	__next40pxDefaultSize,
+	isPrefix,
+}: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
+	const { paddingLeft: padding } = getSizeConfig( {
+		inputSize: size,
+		__next40pxDefaultSize,
+	} );
 
-	if ( isFocused ) {
-		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
-	}
+	const paddingProperty = isPrefix
+		? 'paddingInlineStart'
+		: 'paddingInlineEnd';
 
-	if ( disabled ) {
-		borderColor = COLORS.ui.borderDisabled;
+	if ( variant === 'default' ) {
+		return css( {
+			[ paddingProperty ]: padding,
+		} );
 	}
 
+	// If variant is 'icon' or 'control'
 	return css( {
-		boxShadow,
-		borderColor,
-		borderStyle: 'solid',
-		borderWidth: 1,
+		display: 'flex',
+		[ paddingProperty ]: padding - 4,
 	} );
 };
 
-export const BackdropUI = styled.div< BackdropProps >`
-	&&& {
-		box-sizing: border-box;
-		border-radius: inherit;
-		bottom: 0;
-		left: 0;
-		margin: 0;
-		padding: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-
-		${ backdropFocusedStyles }
-		${ rtl( { paddingLeft: 2 } ) }
-	}
-`;
-
-export const Prefix = styled.span`
-	box-sizing: border-box;
-	display: block;
-`;
-
-export const Suffix = styled.span`
-	align-items: center;
-	align-self: stretch;
-	box-sizing: border-box;
-	display: flex;
+export const PrefixSuffixWrapper = styled.div`
+	${ prefixSuffixWrapperStyles }
 `;
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index 97878838dc41ab..ace3086c388c8b 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -14,11 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import BaseInputControl from '../';
 
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -50,11 +45,30 @@ describe( 'InputControl', () => {
 
 			expect( input ).toBeInTheDocument();
 		} );
+
+		it( 'should render help text as description', () => {
+			render( <InputControl help="My help text" /> );
+			expect(
+				screen.getByRole( 'textbox', { description: 'My help text' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should still render help as aria-describedby when not plain text', () => {
+			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
+
+			const input = screen.getByRole( 'textbox' );
+			const help = screen.getByRole( 'link', { name: 'My help text' } );
+
+			expect(
+				// eslint-disable-next-line testing-library/no-node-access
+				help.closest( `#${ input.getAttribute( 'aria-describedby' ) }` )
+			).toBeVisible();
+		} );
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {
 		it( 'should focus its input on mousedown events', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
 			const target = getInput();
@@ -71,7 +85,7 @@ describe( 'InputControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value onChange', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render(
 				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
@@ -86,7 +100,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should work as a controlled component given normal, falsy or nullish values', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			const heldKeySet = new Set();
 			const Example = () => {
@@ -98,10 +112,13 @@ describe( 'InputControl', () => {
 				const onKeyDown = ( { key } ) => {
 					heldKeySet.add( key );
 					if ( key === 'Escape' ) {
-						if ( heldKeySet.has( 'Meta' ) ) setState( 'qux' );
-						else if ( heldKeySet.has( 'Alt' ) )
+						if ( heldKeySet.has( 'Meta' ) ) {
+							setState( 'qux' );
+						} else if ( heldKeySet.has( 'Alt' ) ) {
 							setState( undefined );
-						else setState( '' );
+						} else {
+							setState( '' );
+						}
 					}
 				};
 				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
@@ -157,7 +174,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spy = jest.fn();
 			render(
 				<InputControl
@@ -177,7 +194,7 @@ describe( 'InputControl', () => {
 		} );
 
 		it( 'should commit value when blurred if value is invalid', async () => {
-			const user = setupUser();
+			const user = await userEvent.setup();
 			const spyChange = jest.fn();
 			render(
 				<InputControl
@@ -190,8 +207,9 @@ describe( 'InputControl', () => {
 						if (
 							action.type === 'COMMIT' &&
 							action.payload.event.type === 'blur'
-						)
+						) {
 							value = value.replace( /\bnow\b/, 'meow' );
+						}
 
 						return { ...state, value };
 					} }
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index db9fe4b75cb42b..13f078cd89cc1f 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -13,8 +13,9 @@ import type { useDrag } from '@use-gesture/react';
  * Internal dependencies
  */
 import type { StateReducer } from './reducer/state';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { FlexProps } from '../flex/types';
+import type { BaseControlProps } from '../base-control/types';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -22,30 +23,30 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
-export type Size = 'default' | 'small' | '__unstable-large';
+export type Size = 'default' | 'small' | 'compact' | '__unstable-large';
 
 interface BaseProps {
 	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
 	 *
 	 * @default false
+	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
-	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
-	 * If true, the label will only be visible to screen readers.
+	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
 	 * @default false
 	 */
-	hideLabelFromVision?: boolean;
+	__next40pxDefaultSize?: boolean;
+	__unstableInputWidth?: CSSProperties[ 'width' ];
 	/**
-	 * Whether the component should be in a focused state.
-	 * Used to coordinate focus states when the actual focused element and the component handling
-	 * visual focus are separate.
+	 * If true, the label will only be visible to screen readers.
 	 *
 	 * @default false
 	 */
-	isFocused: boolean;
+	hideLabelFromVision?: boolean;
 	/**
 	 * The position of the label.
 	 *
@@ -65,7 +66,8 @@ export type InputChangeCallback< P = {} > = (
 	extra: { event: SyntheticEvent } & P
 ) => void;
 
-export interface InputFieldProps extends BaseProps {
+export interface InputFieldProps
+	extends Omit< BaseProps, '__next36pxDefaultSize' > {
 	/**
 	 * Determines the drag axis.
 	 *
@@ -102,7 +104,6 @@ export interface InputFieldProps extends BaseProps {
 	) => void;
 	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
 	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
-	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
 	 * The current value of the input.
@@ -167,10 +168,20 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * If this property is added, a label will be generated using label property as the content.
 	 */
 	label?: ReactNode;
+	/**
+	 * Whether to hide the border when not focused.
+	 *
+	 * @default false
+	 */
+	isBorderless?: boolean;
 }
 
 export interface InputControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
+	extends Omit<
+			InputBaseProps,
+			'children' | 'isBorderless' | keyof FlexProps
+		>,
+		Pick< BaseControlProps, 'help' >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from
@@ -178,15 +189,13 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
 		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
 			| 'stateReducer'
 			| 'prefix'
-			| 'isFocused'
-			| 'setIsFocused'
 			| 'paddingInlineStart'
 			| 'paddingInlineEnd'
 		> {
@@ -200,16 +209,31 @@ export interface InputControlLabelProps {
 	size?: BaseProps[ 'size' ];
 }
 
-export type InputControlPrefixWrapperProps = {
+export type PrefixSuffixWrapperProps = {
 	/**
-	 * The prefix to be inserted.
+	 * The content to be inserted.
 	 */
 	children: ReactNode;
-};
-
-export type InputControlSuffixWrapperProps = {
 	/**
-	 * The suffix to be inserted.
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
 	 */
-	children: ReactNode;
+	size?: BaseProps[ 'size' ];
+	/**
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: BaseProps[ '__next40pxDefaultSize' ];
+	/**
+	 * Adjust the wrapper based on the prefix or suffix content.
+	 *
+	 * - `'default'`: Standard padding for text content.
+	 * - `'icon'`: For icons.
+	 * - `'control'`: For controls, like buttons or selects.
+	 *
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'icon' | 'control';
 };
diff --git a/packages/components/src/input-control/utils.ts b/packages/components/src/input-control/utils.ts
index ff4550fac3a106..5bc42312af1f5d 100644
--- a/packages/components/src/input-control/utils.ts
+++ b/packages/components/src/input-control/utils.ts
@@ -21,7 +21,7 @@ import type { InputChangeCallback } from './types';
 /**
  * Gets a CSS cursor value based on a drag direction.
  *
- * @param  dragDirection The drag direction.
+ * @param dragDirection The drag direction.
  * @return  The CSS cursor value.
  */
 export function getDragCursor( dragDirection: string ): string {
@@ -73,7 +73,7 @@ export function useDraft( props: {
 	onBlur?: FocusEventHandler;
 	onChange: InputChangeCallback;
 } ) {
-	const refPreviousValue = useRef( props.value );
+	const previousValueRef = useRef( props.value );
 	const [ draft, setDraft ] = useState< {
 		value?: string;
 		isStale?: boolean;
@@ -84,12 +84,13 @@ export function useDraft( props: {
 	// To do so, it tracks the previous value and marks the draft value as stale
 	// after each render.
 	useLayoutEffect( () => {
-		const { current: previousValue } = refPreviousValue;
-		refPreviousValue.current = props.value;
-		if ( draft.value !== undefined && ! draft.isStale )
+		const { current: previousValue } = previousValueRef;
+		previousValueRef.current = props.value;
+		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
-		else if ( draft.isStale && props.value !== previousValue )
+		} else if ( draft.isStale && props.value !== previousValue ) {
 			setDraft( {} );
+		}
 	}, [ props.value, draft ] );
 
 	const onChange: InputChangeCallback = ( nextValue, extra ) => {
diff --git a/packages/components/src/isolated-event-container/test/index.js b/packages/components/src/isolated-event-container/test/index.js
deleted file mode 100644
index 1667d69b4df0dd..00000000000000
--- a/packages/components/src/isolated-event-container/test/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import IsolatedEventContainer from '../';
-
-describe( 'IsolatedEventContainer', () => {
-	it( 'should pass props to container', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const clickHandler = jest.fn();
-		render(
-			<IsolatedEventContainer
-				title="Container"
-				className="test"
-				onClick={ clickHandler }
-			/>
-		);
-
-		const container = screen.getByTitle( 'Container' );
-		expect( container ).toHaveClass( 'test' );
-
-		await user.click( container );
-
-		expect( clickHandler ).toHaveBeenCalledTimes( 1 );
-		expect( console ).toHaveWarned();
-	} );
-
-	it( 'should render children', async () => {
-		render(
-			<IsolatedEventContainer title="Container">
-				<p>Child</p>
-			</IsolatedEventContainer>
-		);
-
-		expect(
-			within( screen.getByTitle( 'Container' ) ).getByText( 'Child' )
-		).toBeVisible();
-	} );
-
-	it( 'should stop event propagation only for mousedown, but not for keydown', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const mousedownHandler = jest.fn();
-		const keydownHandler = jest.fn();
-		render(
-			<button
-				onMouseDown={ mousedownHandler }
-				onKeyDown={ keydownHandler }
-			>
-				<IsolatedEventContainer title="Container" />
-			</button>
-		);
-
-		const container = screen.getByTitle( 'Container' );
-
-		await user.click( container );
-		await user.keyboard( '[Enter]' );
-
-		expect( mousedownHandler ).not.toHaveBeenCalled();
-		expect( keydownHandler ).toHaveBeenCalledTimes( 1 );
-	} );
-} );
diff --git a/packages/components/src/isolated-event-container/test/index.tsx b/packages/components/src/isolated-event-container/test/index.tsx
new file mode 100644
index 00000000000000..a914527b937ff2
--- /dev/null
+++ b/packages/components/src/isolated-event-container/test/index.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import IsolatedEventContainer from '..';
+
+describe( 'IsolatedEventContainer', () => {
+	it( 'should pass props to container', async () => {
+		const user = userEvent.setup();
+		const clickHandler = jest.fn();
+		render(
+			<IsolatedEventContainer
+				title="Container"
+				className="test"
+				onClick={ clickHandler }
+			/>
+		);
+
+		const container = screen.getByTitle( 'Container' );
+		expect( container ).toHaveClass( 'test' );
+
+		await user.click( container );
+
+		expect( clickHandler ).toHaveBeenCalledTimes( 1 );
+		expect( console ).toHaveWarned();
+	} );
+
+	it( 'should render children', async () => {
+		render(
+			<IsolatedEventContainer title="Container">
+				<p>Child</p>
+			</IsolatedEventContainer>
+		);
+
+		expect(
+			within( screen.getByTitle( 'Container' ) ).getByText( 'Child' )
+		).toBeVisible();
+	} );
+
+	it( 'should stop event propagation only for mousedown, but not for keydown', async () => {
+		const user = userEvent.setup();
+
+		const mousedownHandler = jest.fn();
+		const keydownHandler = jest.fn();
+		render(
+			<button
+				onMouseDown={ mousedownHandler }
+				onKeyDown={ keydownHandler }
+			>
+				<IsolatedEventContainer title="Container" />
+			</button>
+		);
+
+		const container = screen.getByTitle( 'Container' );
+
+		await user.click( container );
+		await user.keyboard( '[Enter]' );
+
+		expect( mousedownHandler ).not.toHaveBeenCalled();
+		expect( keydownHandler ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx
index 3c7aa60b5bdd7c..6bfae11dd4f85f 100644
--- a/packages/components/src/item-group/item-group/component.tsx
+++ b/packages/components/src/item-group/item-group/component.tsx
@@ -6,13 +6,14 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useItemGroup } from './hook';
 import { ItemGroupContext, useItemGroupContext } from '../context';
 import { View } from '../../view';
 import type { ItemGroupProps } from '../types';
 
-function ItemGroup(
+function UnconnectedItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -40,4 +41,26 @@ function ItemGroup(
 	);
 }
 
-export default contextConnect( ItemGroup, 'ItemGroup' );
+/**
+ * `ItemGroup` displays a list of `Item`s grouped and styled together.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const ItemGroup = contextConnect( UnconnectedItemGroup, 'ItemGroup' );
+
+export default ItemGroup;
diff --git a/packages/components/src/item-group/item-group/hook.ts b/packages/components/src/item-group/item-group/hook.ts
index f8ec3740e721ca..0078e009050fc4 100644
--- a/packages/components/src/item-group/item-group/hook.ts
+++ b/packages/components/src/item-group/item-group/hook.ts
@@ -1,7 +1,8 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 
 /**
  * Internal dependencies
diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx
index 34b58573b882e2..f3f11617312a7c 100644
--- a/packages/components/src/item-group/item/component.tsx
+++ b/packages/components/src/item-group/item/component.tsx
@@ -8,10 +8,11 @@ import type { ForwardedRef } from 'react';
  */
 import type { ItemProps } from '../types';
 import { useItem } from './hook';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 
-function Item(
+function UnconnectedItem(
 	props: WordPressComponentProps< ItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -24,4 +25,27 @@ function Item(
 	);
 }
 
-export default contextConnect( Item, 'Item' );
+/**
+ * `Item` is used in combination with `ItemGroup` to display a list of items
+ * grouped and styled together.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalItemGroup as ItemGroup,
+ *   __experimentalItem as Item,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ItemGroup>
+ *       <Item>Code</Item>
+ *       <Item>is</Item>
+ *       <Item>Poetry</Item>
+ *     </ItemGroup>
+ *   );
+ * }
+ * ```
+ */
+export const Item = contextConnect( UnconnectedItem, 'Item' );
+
+export default Item;
diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts
index bd3be96c618b89..be817a24dcbb1e 100644
--- a/packages/components/src/item-group/item/hook.ts
+++ b/packages/components/src/item-group/item/hook.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { ElementType } from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -11,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import * as styles from '../styles';
 import { useItemGroupContext } from '../context';
 import { useCx } from '../../utils/hooks/use-cx';
@@ -31,18 +27,15 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 
 	const size = sizeProp || contextSize;
 
-	const as =
-		asProp ||
-		( ( typeof onClick !== 'undefined'
-			? 'button'
-			: 'div' ) as ElementType );
+	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );
 
 	const cx = useCx();
 
 	const classes = useMemo(
 		() =>
 			cx(
-				as === 'button' && styles.unstyledButton,
+				( as === 'button' || as === 'a' ) &&
+					styles.unstyledButton( as ),
 				styles.itemSizes[ size ] || styles.itemSizes.medium,
 				styles.item,
 				spacedAround && styles.spacedAround,
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
deleted file mode 100644
index 8e15373849ce7e..00000000000000
--- a/packages/components/src/item-group/stories/index.js
+++ /dev/null
@@ -1,270 +0,0 @@
-/* eslint-disable no-alert */
-/* globals alert */
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { typography, chevronRight } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useCx } from '../../utils';
-import { ItemGroup, Item } from '..';
-import Button from '../../button';
-import { FlexItem, FlexBlock } from '../../flex';
-import Dropdown from '../../dropdown';
-import { HStack } from '../../h-stack';
-import Icon from '../../icon';
-import { Text } from '../../text';
-import { Truncate } from '../../truncate';
-import { ZStack } from '../../z-stack';
-
-export default {
-	component: ItemGroup,
-	title: 'Components (Experimental)/ItemGroup',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-// Using `unset` instead of `undefined` as Storybook seems to sometimes pass an
-// empty string instead of `undefined`, which is not ideal.
-// https://github.com/storybookjs/storybook/issues/800
-const PROP_UNSET = 'unset';
-
-export const _default = () => {
-	const itemGroupProps = {
-		isBordered: boolean( 'ItemGroup: isBordered', false ),
-		isSeparated: boolean( 'ItemGroup: isSeparated', false ),
-		isRounded: boolean( 'ItemGroup: isRounded', true ),
-		size: select(
-			'ItemGroup: size',
-			[ 'small', 'medium', 'large' ],
-			'medium'
-		),
-	};
-
-	const itemProps = {
-		size: select(
-			'Item 1: size',
-			{
-				'unset (defaults to the value set on the <ItemGroup> parent)':
-					PROP_UNSET,
-				small: 'small',
-				medium: 'medium',
-				large: 'large',
-			},
-			PROP_UNSET
-		),
-	};
-
-	// Do not pass the `size` prop when its value is `undefined`.
-	// This allows the `Item` component to use the values that are set on the
-	// parent `ItemGroup` component by default.
-	if ( itemProps.size === PROP_UNSET ) {
-		delete itemProps.size;
-	}
-
-	return (
-		<ItemGroup style={ { width: '350px' } } { ...itemGroupProps }>
-			<Item { ...itemProps }>Code is Poetry (no click handlers)</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-		</ItemGroup>
-	);
-};
-
-export const dropdown = () => (
-	<Dropdown
-		renderToggle={ ( { isOpen, onToggle } ) => (
-			<Button onClick={ onToggle } aria-expanded={ isOpen }>
-				Open Popover
-			</Button>
-		) }
-		renderContent={ () => (
-			<ItemGroup style={ { minWidth: 350, padding: 4 } }>
-				<Item>Code is Poetry (no click handlers)</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-				<Item onClick={ () => alert( 'WordPress.org' ) }>
-					Code is Poetry — Click me!
-				</Item>
-			</ItemGroup>
-		) }
-	/>
-);
-
-const SimpleColorSwatch = ( { color, style } ) => (
-	<div
-		style={ {
-			...style,
-			borderRadius: '50%',
-			border: '1px solid rgba(0, 0, 0, 0.2)',
-			width: '24px',
-			height: '24px',
-			backgroundColor: color,
-		} }
-	/>
-);
-
-const ChevronWrapper = styled( FlexItem )`
-	display: block;
-	fill: currentColor;
-	transition: transform 0.15s ease-out;
-`;
-
-const ItemWithChevron = ( {
-	children,
-	className,
-	alwaysVisible,
-	...otherProps
-} ) => {
-	const isRtlLayout = isRTL();
-	const cx = useCx();
-
-	const appearingChevron = css`
-		&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
-			display: none;
-		}
-	`;
-
-	const itemClassName = useMemo(
-		() => cx( ! alwaysVisible && appearingChevron, className ),
-		[ alwaysVisible, className, cx, appearingChevron ]
-	);
-
-	const chevronIconClassName = useMemo(
-		() =>
-			cx( css`
-				display: block;
-				fill: currentColor;
-				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
-			` ),
-		[ cx, isRtlLayout ]
-	);
-
-	return (
-		<Item { ...otherProps } className={ itemClassName }>
-			<HStack justify="flex-start">
-				<FlexBlock>{ children }</FlexBlock>
-				<ChevronWrapper>
-					<Icon
-						className={ chevronIconClassName }
-						icon={ chevronRight }
-						size={ 24 }
-					/>
-				</ChevronWrapper>
-			</HStack>
-		</Item>
-	);
-};
-
-export const complexLayouts = () => {
-	const colors = [
-		{
-			color: '#00A19D',
-			id: 'teal',
-		},
-		{
-			color: '#FFF8E5',
-			id: 'cream',
-		},
-		{
-			color: '#FFB344',
-			id: 'yellow',
-		},
-		{
-			color: '#E05D5D',
-			id: 'red',
-		},
-	];
-
-	return (
-		<ItemGroup isBordered isSeparated style={ { width: '250px' } }>
-			<Item onClick={ () => alert( 'Color palette' ) }>
-				<HStack>
-					<FlexBlock>
-						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors.map( ( { color, id } ) => (
-								<SimpleColorSwatch key={ id } color={ color } />
-							) ) }
-						</ZStack>
-					</FlexBlock>
-					<FlexItem as={ Text } variant="muted">
-						23 colors
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<Item onClick={ () => alert( 'Single color setting' ) }>
-				<HStack justify="flex-start">
-					<FlexItem
-						as={ SimpleColorSwatch }
-						color="#22577A"
-						style={ { flexShrink: 0 } }
-					/>
-					<FlexItem as={ Truncate }>
-						Single color setting with very long description
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<Item onClick={ () => alert( 'Single typography setting' ) }>
-				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ typography } size={ 24 } />
-					</FlexItem>
-					<FlexItem as={ Truncate }>
-						Single typography setting
-					</FlexItem>
-				</HStack>
-			</Item>
-
-			<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#2FB63F"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron on hover and focus</Truncate>
-				</HStack>
-			</ItemWithChevron>
-
-			<ItemWithChevron
-				alwaysVisible
-				onClick={ () => alert( 'Single color setting' ) }
-			>
-				<HStack justify="flex-start">
-					<SimpleColorSwatch
-						color="#D175D0"
-						style={ { flexShrink: 0 } }
-					/>
-
-					<Truncate>Chevron always visible</Truncate>
-				</HStack>
-			</ItemWithChevron>
-		</ItemGroup>
-	);
-};
-/* eslint-enable no-alert */
diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx
new file mode 100644
index 00000000000000..845843d2433db9
--- /dev/null
+++ b/packages/components/src/item-group/stories/index.story.tsx
@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ItemGroup } from '../item-group/component';
+import { Item } from '../item/component';
+
+type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
+
+const meta: Meta< typeof ItemGroup > = {
+	component: ItemGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Item },
+	title: 'Components (Experimental)/ItemGroup',
+	argTypes: {
+		as: { control: false },
+		children: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const mapPropsToItem = ( props: ItemProps, index: number ) => (
+	<Item { ...props } key={ index } />
+);
+
+const Template: StoryFn< typeof ItemGroup > = ( props ) => (
+	<ItemGroup { ...props } />
+);
+
+export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
+Default.args = {
+	isBordered: true,
+	isSeparated: true,
+	children: (
+		[
+			{
+				children: 'First button item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'First item clicked' ),
+			},
+			{
+				children: 'Second button item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Second item clicked' ),
+			},
+			{
+				children: 'Third button item',
+				// eslint-disable-next-line no-alert
+				onClick: () => alert( 'Third item clicked' ),
+			},
+			{
+				children: 'Anchor item',
+				as: 'a',
+				href: 'https://wordpress.org',
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
+	{}
+);
+NonClickableItems.args = {
+	...Default.args,
+	children: (
+		[
+			{
+				children:
+					"This <Item /> is not click-able because it doesn't have an `onClick` prop",
+			},
+			{
+				children:
+					"This <Item /> is also not click-able because it doesn't have an `onClick` prop",
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
+CustomItemSize.args = {
+	...Default.args,
+	children: (
+		[
+			{
+				children:
+					'This <Item /> will inherit the size from <ItemGroup /> (try changing the size prop)',
+			},
+			{
+				children:
+					'This <Item /> has a hardcoded size="large", regardless of <ItemGroup />\'s size',
+				size: 'large',
+			},
+		] as ItemProps[]
+	 ).map( mapPropsToItem ),
+};
+
+export const WithoutBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
+WithoutBorder.args = {
+	...Default.args,
+	isBordered: false,
+	isSeparated: false,
+};
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index bac0d2e72e462c..a2d73c8dcfc592 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -6,26 +6,42 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS } from '../utils';
-
-export const unstyledButton = css`
-	appearance: none;
-	border: 1px solid transparent;
-	cursor: pointer;
-	background: none;
-	text-align: start;
-
-	&:hover {
-		color: ${ COLORS.ui.theme };
-	}
-
-	&:focus {
-		background-color: transparent;
-		color: ${ COLORS.ui.theme };
-		border-color: ${ COLORS.ui.theme };
-		outline: 3px solid transparent;
-	}
-`;
+import { CONFIG, COLORS, font } from '../utils';
+
+export const unstyledButton = ( as: 'a' | 'button' ) => {
+	return css`
+		font-size: ${ font( 'default.fontSize' ) };
+		font-family: inherit;
+		appearance: none;
+		border: 1px solid transparent;
+		cursor: pointer;
+		background: none;
+		text-align: start;
+		text-decoration: ${ as === 'a' ? 'none' : undefined };
+
+		svg,
+		path {
+			fill: currentColor;
+		}
+
+		&:hover {
+			color: ${ COLORS.theme.accent };
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+				${ COLORS.theme.accent };
+			// Windows high contrast mode.
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+	`;
+};
 
 export const itemWrapper = css`
 	width: 100%;
@@ -33,6 +49,7 @@ export const itemWrapper = css`
 `;
 
 export const item = css`
+	box-sizing: border-box;
 	width: 100%;
 	display: block;
 	margin: 0;
@@ -53,7 +70,7 @@ export const separated = css`
 	}
 `;
 
-const borderRadius = CONFIG.controlBorderRadius;
+const borderRadius = CONFIG.radiusSmall;
 
 export const spacedAround = css`
 	border-radius: ${ borderRadius };
@@ -88,12 +105,12 @@ const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight
 
 export const itemSizes = {
 	small: css`
-		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall };
+		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px;
 	`,
 	medium: css`
-		padding: ${ paddingY } ${ CONFIG.controlPaddingX };
+		padding: ${ paddingY } ${ CONFIG.controlPaddingX }px;
 	`,
 	large: css`
-		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge };
+		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px;
 	`,
 };
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index 112e119cd50f38..4104a4bf5140c1 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+-       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
++       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -74,7 +74,8 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 }
 
 .emotion-3 {
-  padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  padding: calc((36px - calc(13px * 1.4) - 2px) / 2) 12px;
+  box-sizing: border-box;
   width: 100%;
   display: block;
   margin: 0;
@@ -113,8 +114,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -124,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -141,8 +142,8 @@ Snapshot Diff:
 @@ -1,18 +1,18 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-1ibn92o-PolymorphicDiv-bordered-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
@@ -152,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+-         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
++         class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -169,8 +170,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+     class="components-item-group css-1mm2cvy-View e19lxcc00"
+-     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
++     class="components-item-group css-161q9d5-PolymorphicDiv e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
diff --git a/packages/components/src/item-group/test/index.js b/packages/components/src/item-group/test/index.js
index e0471661c2c277..be89f5880089fb 100644
--- a/packages/components/src/item-group/test/index.js
+++ b/packages/components/src/item-group/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -28,7 +29,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: withBorders } = render(
-				<ItemGroup isBordered={ true }>
+				<ItemGroup isBordered>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
@@ -62,7 +63,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: separatedItems } = render(
-				<ItemGroup isSeparated={ true }>
+				<ItemGroup isSeparated>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
@@ -72,7 +73,8 @@ describe( 'ItemGroup', () => {
 	} );
 
 	describe( 'Item', () => {
-		it( 'should render as a `button` if the `onClick` handler is specified', () => {
+		it( 'should render as a `button` if the `onClick` handler is specified', async () => {
+			const user = userEvent.setup();
 			const spy = jest.fn();
 			render( <Item onClick={ spy }>Code is poetry</Item> );
 
@@ -80,7 +82,7 @@ describe( 'ItemGroup', () => {
 
 			expect( button ).toBeInTheDocument();
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( spy ).toHaveBeenCalled();
 		} );
diff --git a/packages/components/src/keyboard-shortcuts/README.md b/packages/components/src/keyboard-shortcuts/README.md
index f78abbbd03260d..9e7d8d51c0cc23 100644
--- a/packages/components/src/keyboard-shortcuts/README.md
+++ b/packages/components/src/keyboard-shortcuts/README.md
@@ -11,8 +11,8 @@ It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyb
 Render `<KeyboardShortcuts />` with a `shortcuts` prop object:
 
 ```jsx
+import { useState } from 'react';
 import { KeyboardShortcuts } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyKeyboardShortcuts = () => {
 	const [ isAllSelected, setIsAllSelected ] = useState( false );
@@ -41,7 +41,7 @@ The component accepts the following props:
 
 Elements to render, upon whom key events are to be monitored.
 
--   Type: `Element` | `Element[]`
+-   Type: `ReactNode`
 -   Required: No
 
 ### shortcuts
diff --git a/packages/components/src/keyboard-shortcuts/index.js b/packages/components/src/keyboard-shortcuts/index.js
deleted file mode 100644
index 07d3801cf54d07..00000000000000
--- a/packages/components/src/keyboard-shortcuts/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useRef, Children } from '@wordpress/element';
-import { useKeyboardShortcut } from '@wordpress/compose';
-
-function KeyboardShortcut( {
-	target,
-	callback,
-	shortcut,
-	bindGlobal,
-	eventName,
-} ) {
-	useKeyboardShortcut( shortcut, callback, {
-		bindGlobal,
-		target,
-		eventName,
-	} );
-
-	return null;
-}
-
-function KeyboardShortcuts( { children, shortcuts, bindGlobal, eventName } ) {
-	const target = useRef();
-
-	const element = map( shortcuts, ( callback, shortcut ) => (
-		<KeyboardShortcut
-			key={ shortcut }
-			shortcut={ shortcut }
-			callback={ callback }
-			bindGlobal={ bindGlobal }
-			eventName={ eventName }
-			target={ target }
-		/>
-	) );
-
-	// Render as non-visual if there are no children pressed. Keyboard
-	// events will be bound to the document instead.
-	if ( ! Children.count( children ) ) {
-		return element;
-	}
-
-	return (
-		<div ref={ target }>
-			{ element }
-			{ children }
-		</div>
-	);
-}
-
-export default KeyboardShortcuts;
diff --git a/packages/components/src/keyboard-shortcuts/index.tsx b/packages/components/src/keyboard-shortcuts/index.tsx
new file mode 100644
index 00000000000000..cc6835c56666d8
--- /dev/null
+++ b/packages/components/src/keyboard-shortcuts/index.tsx
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, Children } from '@wordpress/element';
+import { useKeyboardShortcut } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { KeyboardShortcutProps, KeyboardShortcutsProps } from './types';
+
+function KeyboardShortcut( {
+	target,
+	callback,
+	shortcut,
+	bindGlobal,
+	eventName,
+}: KeyboardShortcutProps ) {
+	useKeyboardShortcut( shortcut, callback, {
+		bindGlobal,
+		target,
+		eventName,
+	} );
+
+	return null;
+}
+
+/**
+ * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.
+ *
+ * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.
+ *
+ * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.
+ *
+ * ```jsx
+ * import { KeyboardShortcuts } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyKeyboardShortcuts = () => {
+ * 	const [ isAllSelected, setIsAllSelected ] = useState( false );
+ * 	const selectAll = () => {
+ * 		setIsAllSelected( true );
+ * 	};
+ *
+ * 	return (
+ * 		<div>
+ * 			<KeyboardShortcuts
+ * 				shortcuts={ {
+ * 					'mod+a': selectAll,
+ * 				} }
+ * 			/>
+ * 			[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+function KeyboardShortcuts( {
+	children,
+	shortcuts,
+	bindGlobal,
+	eventName,
+}: KeyboardShortcutsProps ) {
+	const target = useRef( null );
+
+	const element = Object.entries( shortcuts ?? {} ).map(
+		( [ shortcut, callback ] ) => (
+			<KeyboardShortcut
+				key={ shortcut }
+				shortcut={ shortcut }
+				callback={ callback }
+				bindGlobal={ bindGlobal }
+				eventName={ eventName }
+				target={ target }
+			/>
+		)
+	);
+
+	// Render as non-visual if there are no children pressed. Keyboard
+	// events will be bound to the document instead.
+	if ( ! Children.count( children ) ) {
+		return <>{ element }</>;
+	}
+
+	return (
+		<div ref={ target }>
+			{ element }
+			{ children }
+		</div>
+	);
+}
+
+export default KeyboardShortcuts;
diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
new file mode 100644
index 00000000000000..0c8e0f451929a0
--- /dev/null
+++ b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import KeyboardShortcuts from '..';
+
+const meta: Meta< typeof KeyboardShortcuts > = {
+	component: KeyboardShortcuts,
+	title: 'Components/Utilities/KeyboardShortcuts',
+	id: 'components-keyboardshortcuts',
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof KeyboardShortcuts > = ( props ) => (
+	<KeyboardShortcuts { ...props } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	shortcuts: {
+		// eslint-disable-next-line no-alert
+		a: () => window.alert( 'You hit "a"!' ),
+		// eslint-disable-next-line no-alert
+		b: () => window.alert( 'You hit "b"!' ),
+	},
+	children: (
+		<div>
+			{ /* eslint-disable react/no-unescaped-entities */ }
+			<p>Hit the "a" or "b" key in this textarea:</p>
+			{ /* eslint-enable react/no-unescaped-entities */ }
+			<textarea />
+		</div>
+	),
+};
+Default.parameters = {
+	docs: {
+		source: {
+			code: `
+<KeyboardShortcuts
+  shortcuts={{
+    a: () => window.alert('You hit "a"!'),
+    b: () => window.alert('You hit "b"!'),
+  }}
+>
+  <div>
+    <p>
+      Hit the "a" or "b" key in this textarea:
+    </p>
+    <textarea />
+  </div>
+</KeyboardShortcuts>
+			`,
+		},
+	},
+};
diff --git a/packages/components/src/keyboard-shortcuts/test/index.js b/packages/components/src/keyboard-shortcuts/test/index.js
deleted file mode 100644
index bb63535f36c41e..00000000000000
--- a/packages/components/src/keyboard-shortcuts/test/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import KeyboardShortcuts from '../';
-
-describe( 'KeyboardShortcuts', () => {
-	function keyPress( which, target ) {
-		[ 'keydown', 'keypress', 'keyup' ].forEach( ( eventName ) => {
-			const event = new window.Event( eventName, { bubbles: true } );
-			event.keyCode = which;
-			event.which = which;
-			fireEvent( target, event );
-		} );
-	}
-
-	it( 'should capture key events', async () => {
-		const spy = jest.fn();
-
-		render(
-			<KeyboardShortcuts
-				shortcuts={ {
-					d: spy,
-				} }
-			/>
-		);
-
-		keyPress( 68, document );
-
-		expect( spy ).toHaveBeenCalled();
-	} );
-
-	it( 'should capture key events globally', () => {
-		const spy = jest.fn();
-
-		render(
-			<div>
-				<KeyboardShortcuts
-					bindGlobal
-					shortcuts={ {
-						d: spy,
-					} }
-				/>
-				<textarea></textarea>
-			</div>
-		);
-
-		keyPress( 68, screen.getByRole( 'textbox' ) );
-
-		expect( spy ).toHaveBeenCalled();
-	} );
-
-	it( 'should capture key events on specific event', () => {
-		const spy = jest.fn();
-
-		render(
-			<div>
-				<KeyboardShortcuts
-					eventName="keyup"
-					shortcuts={ {
-						d: spy,
-					} }
-				/>
-				<textarea></textarea>
-			</div>
-		);
-
-		keyPress( 68, screen.getByRole( 'textbox' ) );
-
-		expect( spy.mock.calls[ 0 ][ 0 ].type ).toBe( 'keyup' );
-	} );
-
-	it( 'should capture key events on children', () => {
-		const spy = jest.fn();
-
-		render(
-			<div>
-				<KeyboardShortcuts
-					shortcuts={ {
-						d: spy,
-					} }
-				>
-					<textarea></textarea>
-				</KeyboardShortcuts>
-				<textarea></textarea>
-			</div>
-		);
-
-		const textareas = screen.getAllByRole( 'textbox' );
-
-		// Outside scope
-		keyPress( 68, textareas[ 1 ] );
-		expect( spy ).not.toHaveBeenCalled();
-
-		// Inside scope
-		keyPress( 68, textareas[ 0 ] );
-		expect( spy ).toHaveBeenCalled();
-	} );
-} );
diff --git a/packages/components/src/keyboard-shortcuts/test/index.tsx b/packages/components/src/keyboard-shortcuts/test/index.tsx
new file mode 100644
index 00000000000000..e7aa78a03210be
--- /dev/null
+++ b/packages/components/src/keyboard-shortcuts/test/index.tsx
@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import KeyboardShortcuts from '..';
+
+describe( 'KeyboardShortcuts', () => {
+	function keyPress(
+		which: KeyboardEvent[ 'which' ],
+		target: Parameters< typeof fireEvent >[ 0 ]
+	) {
+		[ 'keydown', 'keypress', 'keyup' ].forEach( ( eventName ) => {
+			const event = createEvent(
+				eventName,
+				target,
+				{
+					bubbles: true,
+					keyCode: which,
+					which,
+				},
+				{ EventType: 'KeyboardEvent' }
+			);
+			fireEvent( target, event );
+		} );
+	}
+
+	it( 'should capture key events', async () => {
+		const spy = jest.fn();
+
+		render(
+			<KeyboardShortcuts
+				shortcuts={ {
+					d: spy,
+				} }
+			/>
+		);
+
+		keyPress( 68, document );
+
+		expect( spy ).toHaveBeenCalled();
+	} );
+
+	it( 'should capture key events globally', () => {
+		const spy = jest.fn();
+
+		render(
+			<div>
+				<KeyboardShortcuts
+					bindGlobal
+					shortcuts={ {
+						d: spy,
+					} }
+				/>
+				<textarea></textarea>
+			</div>
+		);
+
+		keyPress( 68, screen.getByRole( 'textbox' ) );
+
+		expect( spy ).toHaveBeenCalled();
+	} );
+
+	it( 'should capture key events on specific event', () => {
+		const spy = jest.fn();
+
+		render(
+			<div>
+				<KeyboardShortcuts
+					eventName="keyup"
+					shortcuts={ {
+						d: spy,
+					} }
+				/>
+				<textarea></textarea>
+			</div>
+		);
+
+		keyPress( 68, screen.getByRole( 'textbox' ) );
+
+		expect( spy.mock.calls[ 0 ][ 0 ].type ).toBe( 'keyup' );
+	} );
+
+	it( 'should capture key events on children', () => {
+		const spy = jest.fn();
+
+		render(
+			<div>
+				<KeyboardShortcuts
+					shortcuts={ {
+						d: spy,
+					} }
+				>
+					<textarea></textarea>
+				</KeyboardShortcuts>
+				<textarea></textarea>
+			</div>
+		);
+
+		const textareas = screen.getAllByRole( 'textbox' );
+
+		// Outside scope
+		keyPress( 68, textareas[ 1 ] );
+		expect( spy ).not.toHaveBeenCalled();
+
+		// Inside scope
+		keyPress( 68, textareas[ 0 ] );
+		expect( spy ).toHaveBeenCalled();
+	} );
+} );
diff --git a/packages/components/src/keyboard-shortcuts/types.ts b/packages/components/src/keyboard-shortcuts/types.ts
new file mode 100644
index 00000000000000..c9d7ad71c71f80
--- /dev/null
+++ b/packages/components/src/keyboard-shortcuts/types.ts
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import type { useKeyboardShortcut } from '@wordpress/compose';
+
+// TODO: We wouldn't have to do this if this type was exported from `@wordpress/compose`.
+type WPKeyboardShortcutConfig = NonNullable<
+	Parameters< typeof useKeyboardShortcut >[ 2 ]
+>;
+
+export type KeyboardShortcutProps = {
+	shortcut: string | string[];
+	/**
+	 * @see {@link https://craig.is/killing/mice Mousetrap documentation}
+	 */
+	callback: ( event: Mousetrap.ExtendedKeyboardEvent, combo: string ) => void;
+} & Pick< WPKeyboardShortcutConfig, 'bindGlobal' | 'eventName' | 'target' >;
+
+export type KeyboardShortcutsProps = {
+	/**
+	 * Elements to render, upon whom key events are to be monitored.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * An object of shortcut bindings, where each key is a keyboard combination,
+	 * the value of which is the callback to be invoked when the key combination is pressed.
+	 *
+	 * The value of each shortcut should be a consistent function reference, not an anonymous function.
+	 * Otherwise, the callback will not be correctly unbound when the component unmounts.
+	 *
+	 * The `KeyboardShortcuts` component will not update to reflect a changed `shortcuts` prop.
+	 * If you need to change shortcuts, mount a separate `KeyboardShortcuts` element,
+	 * which can be achieved by assigning a unique `key` prop.
+	 *
+	 * @see {@link https://craig.is/killing/mice Mousetrap documentation}
+	 */
+	shortcuts: Record< string, KeyboardShortcutProps[ 'callback' ] >;
+	/**
+	 * By default, a callback will not be invoked if the key combination occurs in an editable field.
+	 * Pass `bindGlobal` as `true` if the key events should be observed globally, including within editable fields.
+	 *
+	 * Tip: If you need some but not all keyboard events to be observed globally,
+	 * simply render two distinct `KeyboardShortcuts` elements, one with and one without the `bindGlobal` prop.
+	 */
+	bindGlobal?: KeyboardShortcutProps[ 'bindGlobal' ];
+	/**
+	 * By default, a callback is invoked in response to the `keydown` event.
+	 * To override this, pass `eventName` with the name of a specific keyboard event.
+	 */
+	eventName?: KeyboardShortcutProps[ 'eventName' ];
+};
diff --git a/packages/components/src/lock-unlock.js b/packages/components/src/lock-unlock.js
new file mode 100644
index 00000000000000..7749a249cd02ac
--- /dev/null
+++ b/packages/components/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/components'
+	);
diff --git a/packages/components/src/menu-group/README.md b/packages/components/src/menu-group/README.md
index 94dc54e0cda8ce..f3e18edec9b1a1 100644
--- a/packages/components/src/menu-group/README.md
+++ b/packages/components/src/menu-group/README.md
@@ -4,14 +4,6 @@
 
 ![MenuGroup Example](https://wordpress.org/gutenberg/files/2019/03/MenuGroup.png)
 
-1. MenuGroup
-
-## Table of Contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
diff --git a/packages/components/src/menu-group/index.tsx b/packages/components/src/menu-group/index.tsx
index 00938928969507..4148db8f369557 100644
--- a/packages/components/src/menu-group/index.tsx
+++ b/packages/components/src/menu-group/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export function MenuGroup( props: MenuGroupProps ) {
 	}
 
 	const labelId = `components-menu-group-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-menu-group', {
+	const classNames = clsx( className, 'components-menu-group', {
 		'has-hidden-separator': hideSeparator,
 	} );
 
diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx
new file mode 100644
index 00000000000000..c46804bc999007
--- /dev/null
+++ b/packages/components/src/menu-group/stories/index.story.tsx
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '..';
+import MenuItem from '../../menu-item';
+import MenuItemsChoice from '../../menu-items-choice';
+
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+const meta: Meta< typeof MenuGroup > = {
+	title: 'Components/Actions/MenuGroup',
+	component: MenuGroup,
+	id: 'components-menugroup',
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuGroup > = ( args ) => {
+	return (
+		<MenuGroup { ...args }>
+			<MenuItem>Menu Item 1</MenuItem>
+			<MenuItem>Menu Item 2</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuGroup > = Template.bind( {} );
+
+const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
+	const [ mode, setMode ] = useState( 'visual' );
+	const choices = [
+		{
+			value: 'visual',
+			label: 'Visual editor',
+		},
+		{
+			value: 'text',
+			label: 'Code editor',
+		},
+	];
+
+	return (
+		<>
+			<MenuGroup label="View">
+				<MenuItem>Top Toolbar</MenuItem>
+				<MenuItem>Spotlight Mode</MenuItem>
+				<MenuItem>Distraction Free</MenuItem>
+			</MenuGroup>
+			<MenuGroup { ...args }>
+				<MenuItemsChoice
+					choices={ choices }
+					value={ mode }
+					onSelect={ ( newMode: string ) => setMode( newMode ) }
+					onHover={ () => {} }
+				/>
+			</MenuGroup>
+		</>
+	);
+};
+
+/**
+ * When other menu items exist above or below a MenuGroup, the group
+ * should have a divider line between it and the adjacent item.
+ */
+export const WithSeperator = MultiGroupsTemplate.bind( {} );
+WithSeperator.args = {
+	...Default.args,
+	hideSeparator: false,
+	label: 'Editor',
+};
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index d9412c504940b3..744e3f74c5b955 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,5 +1,4 @@
 .components-menu-group + .components-menu-group {
-	margin-top: $grid-unit-10;
 	padding-top: $grid-unit-10;
 	border-top: $border-width solid $gray-900;
 
@@ -10,6 +9,10 @@
 	}
 }
 
+.components-menu-group:has(> div:empty) {
+	display: none;
+}
+
 .components-menu-group__label {
 	padding: 0 $grid-unit-10;
 	margin-top: $grid-unit-05;
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
index 68affcd63b8bfd..9a0f97e97ac890 100644
--- a/packages/components/src/menu-item/README.md
+++ b/packages/components/src/menu-item/README.md
@@ -5,8 +5,8 @@ MenuItem is a component which renders a button intended to be used in combinatio
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { MenuItem } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyMenuItem = () => {
 	const [ isActive, setIsActive ] = useState( true );
@@ -29,11 +29,18 @@ MenuItem supports the following props. Any additional props are passed through t
 
 ### `children`
 
--   Type: `WPElement`
+-   Type: `Element`
 -   Required: No
 
 Element to render as child of button.
 
+### `disabled`
+
+-   Type: `boolean`
+-   Required: No
+
+Refer to documentation for [Button's `disabled` prop](/packages/components/src/button/README.md#disabled-boolean).
+
 ### `info`
 
 -   Type: `string`
@@ -63,7 +70,7 @@ Determines where to display the provided `icon`.
 -   Type: `boolean`
 -   Required: No
 
-Whether or not the menu item is currently selected.
+Whether or not the menu item is currently selected. `isSelected` is only taken into account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 
 ### `shortcut`
 
@@ -82,7 +89,7 @@ If shortcut is a string, it is expecting the display text. If shortcut is an obj
 
 ### `suffix`
 
--   Type: `WPElement`
+-   Type: `Element`
 -   Required: No
 
 Allows for markup other than icons or shortcuts to be added to the menu item.
diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
deleted file mode 100644
index 907d54fb680541..00000000000000
--- a/packages/components/src/menu-item/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { cloneElement, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Shortcut from '../shortcut';
-import Button from '../button';
-import Icon from '../icon';
-
-export function MenuItem( props, ref ) {
-	let {
-		children,
-		info,
-		className,
-		icon,
-		iconPosition = 'right',
-		shortcut,
-		isSelected,
-		role = 'menuitem',
-		suffix,
-		...buttonProps
-	} = props;
-
-	className = classnames( 'components-menu-item__button', className );
-
-	if ( info ) {
-		children = (
-			<span className="components-menu-item__info-wrapper">
-				<span className="components-menu-item__item">{ children }</span>
-				<span className="components-menu-item__info">{ info }</span>
-			</span>
-		);
-	}
-
-	if ( icon && typeof icon !== 'string' ) {
-		icon = cloneElement( icon, {
-			className: classnames( 'components-menu-items__item-icon', {
-				'has-icon-right': iconPosition === 'right',
-			} ),
-		} );
-	}
-
-	return (
-		<Button
-			ref={ ref }
-			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
-			aria-checked={
-				role === 'menuitemcheckbox' || role === 'menuitemradio'
-					? isSelected
-					: undefined
-			}
-			role={ role }
-			icon={ iconPosition === 'left' ? icon : undefined }
-			className={ className }
-			{ ...buttonProps }
-		>
-			<span className="components-menu-item__item">{ children }</span>
-			{ ! suffix && (
-				<Shortcut
-					className="components-menu-item__shortcut"
-					shortcut={ shortcut }
-				/>
-			) }
-			{ ! suffix && icon && iconPosition === 'right' && (
-				<Icon icon={ icon } />
-			) }
-			{ suffix }
-		</Button>
-	);
-}
-
-export default forwardRef( MenuItem );
diff --git a/packages/components/src/menu-item/index.tsx b/packages/components/src/menu-item/index.tsx
new file mode 100644
index 00000000000000..cc57d23e585a10
--- /dev/null
+++ b/packages/components/src/menu-item/index.tsx
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { cloneElement, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from '../shortcut';
+import Button from '../button';
+import Icon from '../icon';
+import type { WordPressComponentProps } from '../context';
+import type { MenuItemProps } from './types';
+
+function UnforwardedMenuItem(
+	props: WordPressComponentProps< MenuItemProps, 'button', false >,
+	ref: ForwardedRef< HTMLButtonElement >
+) {
+	let {
+		children,
+		info,
+		className,
+		icon,
+		iconPosition = 'right',
+		shortcut,
+		isSelected,
+		role = 'menuitem',
+		suffix,
+		...buttonProps
+	} = props;
+
+	className = clsx( 'components-menu-item__button', className );
+
+	if ( info ) {
+		children = (
+			<span className="components-menu-item__info-wrapper">
+				<span className="components-menu-item__item">{ children }</span>
+				<span className="components-menu-item__info">{ info }</span>
+			</span>
+		);
+	}
+
+	if ( icon && typeof icon !== 'string' ) {
+		icon = cloneElement( icon, {
+			className: clsx( 'components-menu-items__item-icon', {
+				'has-icon-right': iconPosition === 'right',
+			} ),
+		} );
+	}
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			ref={ ref }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				role === 'menuitemcheckbox' || role === 'menuitemradio'
+					? isSelected
+					: undefined
+			}
+			role={ role }
+			icon={ iconPosition === 'left' ? icon : undefined }
+			className={ className }
+			{ ...buttonProps }
+		>
+			<span className="components-menu-item__item">{ children }</span>
+			{ ! suffix && (
+				<Shortcut
+					className="components-menu-item__shortcut"
+					shortcut={ shortcut }
+				/>
+			) }
+			{ ! suffix && icon && iconPosition === 'right' && (
+				<Icon icon={ icon } />
+			) }
+			{ suffix }
+		</Button>
+	);
+}
+
+/**
+ * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.
+ *
+ * ```jsx
+ * import { MenuItem } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyMenuItem = () => {
+ * 	const [ isActive, setIsActive ] = useState( true );
+ *
+ * 	return (
+ * 		<MenuItem
+ * 			icon={ isActive ? 'yes' : 'no' }
+ * 			isSelected={ isActive }
+ * 			role="menuitemcheckbox"
+ * 			onClick={ () => setIsActive( ( state ) => ! state ) }
+ * 		>
+ * 			Toggle
+ * 		</MenuItem>
+ * 	);
+ * };
+ * ```
+ */
+export const MenuItem = forwardRef( UnforwardedMenuItem );
+
+export default MenuItem;
diff --git a/packages/components/src/menu-item/stories/index.story.tsx b/packages/components/src/menu-item/stories/index.story.tsx
new file mode 100644
index 00000000000000..bef548c59d9461
--- /dev/null
+++ b/packages/components/src/menu-item/stories/index.story.tsx
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { link, more, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '../../menu-group';
+import MenuItem from '..';
+import Shortcut from '../../shortcut';
+
+const meta: Meta< typeof MenuItem > = {
+	component: MenuItem,
+	title: 'Components/Actions/MenuItem',
+	id: 'components-menuitem',
+	argTypes: {
+		children: { control: false },
+		icon: {
+			control: { type: 'select' },
+			options: [ 'check', 'link', 'more' ],
+			mapping: {
+				check,
+				link,
+				more,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuItem > = ( props ) => {
+	return (
+		<MenuGroup>
+			<MenuItem { ...props }>Menu Item 1</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuItem > = Template.bind( {} );
+
+/**
+ * When the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`, the
+ * `isSelected` prop should be used so screen readers can tell which item is currently selected.
+ */
+export const IsSelected = Template.bind( {} );
+IsSelected.args = {
+	...Default.args,
+	isSelected: true,
+	role: 'menuitemcheckbox',
+};
+
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	icon: link,
+	iconPosition: 'left',
+};
+
+export const WithInfo = Template.bind( {} );
+WithInfo.args = {
+	...Default.args,
+	info: 'Menu Item description',
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <Shortcut shortcut="Ctrl+M"></Shortcut>,
+};
diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
index 06aaf4b620dfe0..07dc49b034e5ee 100644
--- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap
+++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -3,7 +3,7 @@
 exports[`MenuItem should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitemcheckbox"
   type="button"
 >
@@ -35,7 +35,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -62,7 +62,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
-  class="components-button components-menu-item__button my-class"
+  class="components-button components-menu-item__button my-class is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
 <button
-  class="components-button components-menu-item__button"
+  class="components-button components-menu-item__button is-next-40px-default-size"
   role="menuitem"
   type="button"
 >
diff --git a/packages/components/src/menu-item/types.ts b/packages/components/src/menu-item/types.ts
new file mode 100644
index 00000000000000..d213af6153accc
--- /dev/null
+++ b/packages/components/src/menu-item/types.ts
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+
+export type MenuItemProps = Pick< ButtonAsButtonProps, 'isDestructive' > & {
+	/**
+	 * A CSS `class` to give to the container element.
+	 */
+	className?: string;
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+	/**
+	 * Text to use as description for button text.
+	 */
+	info?: string;
+	/**
+	 * The icon to render. Supported values are: Dashicons (specified as
+	 * strings), functions, Component instances and `null`.
+	 *
+	 * @default null
+	 */
+	icon?: JSX.Element | null;
+	/**
+	 * Determines where to display the provided `icon`.
+	 */
+	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
+	/**
+	 * Whether or not the menu item is currently selected, `isSelected` is only taken into
+	 * account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
+	 */
+	isSelected?: boolean;
+	/**
+	 * If shortcut is a string, it is expecting the display text. If shortcut is an object,
+	 * it will accept the properties of `display` (string) and `ariaLabel` (string).
+	 */
+	shortcut?: string | { display: string; ariaLabel: string };
+	/**
+	 * If you need to have selectable menu items use menuitemradio for single select,
+	 * and menuitemcheckbox for multiselect.
+	 *
+	 * @default 'menuitem'
+	 */
+	role?: string;
+	/**
+	 * Allows for markup other than icons or shortcuts to be added to the menu item.
+	 *
+	 */
+	suffix?: ReactNode;
+	/**
+	 * Human-readable label for item.
+	 */
+	label?: string;
+};
diff --git a/packages/components/src/menu-items-choice/README.md b/packages/components/src/menu-items-choice/README.md
index b5527c3bc33e3a..7ee1b6096fb1fd 100644
--- a/packages/components/src/menu-items-choice/README.md
+++ b/packages/components/src/menu-items-choice/README.md
@@ -4,13 +4,6 @@
 
 ![MenuItemsChoice Example](https://wordpress.org/gutenberg/files/2019/03/MenuItemsChoice.png)
 
-1. MenuItemsChoice
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-
 ## Design guidelines
 
 A `MenuItemsChoice` should be housed within in its own distinct `MenuGroup`, so that the set of options are distinct from nearby `MenuItems`.
@@ -54,8 +47,8 @@ Designs with a `MenuItemsChoice` option selected by default make a strong sugges
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyMenuItemsChoice = () => {
 	const [ mode, setMode ] = useState( 'visual' );
diff --git a/packages/components/src/menu-items-choice/index.js b/packages/components/src/menu-items-choice/index.js
deleted file mode 100644
index 33a24cfb879634..00000000000000
--- a/packages/components/src/menu-items-choice/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import MenuItem from '../menu-item';
-
-const noop = () => {};
-
-export default function MenuItemsChoice( {
-	choices = [],
-	onHover = noop,
-	onSelect,
-	value,
-} ) {
-	return choices.map( ( item ) => {
-		const isSelected = value === item.value;
-		return (
-			<MenuItem
-				key={ item.value }
-				role="menuitemradio"
-				icon={ isSelected && check }
-				info={ item.info }
-				isSelected={ isSelected }
-				shortcut={ item.shortcut }
-				className="components-menu-items-choice"
-				onClick={ () => {
-					if ( ! isSelected ) {
-						onSelect( item.value );
-					}
-				} }
-				onMouseEnter={ () => onHover( item.value ) }
-				onMouseLeave={ () => onHover( null ) }
-				aria-label={ item[ 'aria-label' ] }
-			>
-				{ item.label }
-			</MenuItem>
-		);
-	} );
-}
diff --git a/packages/components/src/menu-items-choice/index.tsx b/packages/components/src/menu-items-choice/index.tsx
new file mode 100644
index 00000000000000..ecdf9ba47242d7
--- /dev/null
+++ b/packages/components/src/menu-items-choice/index.tsx
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MenuItem from '../menu-item';
+import type { MenuItemsChoiceProps } from './types';
+
+const noop = () => {};
+
+/**
+ * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices.
+ *
+ *
+ * ```jsx
+ * import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyMenuItemsChoice = () => {
+ * 	const [ mode, setMode ] = useState( 'visual' );
+ * 	const choices = [
+ * 		{
+ * 			value: 'visual',
+ * 			label: 'Visual editor',
+ * 		},
+ * 		{
+ * 			value: 'text',
+ * 			label: 'Code editor',
+ * 		},
+ * 	];
+ *
+ * 	return (
+ * 		<MenuGroup label="Editor">
+ * 			<MenuItemsChoice
+ * 				choices={ choices }
+ * 				value={ mode }
+ * 				onSelect={ ( newMode ) => setMode( newMode ) }
+ * 			/>
+ * 		</MenuGroup>
+ * 	);
+ * };
+ * ```
+ */
+function MenuItemsChoice( {
+	choices = [],
+	onHover = noop,
+	onSelect,
+	value,
+}: MenuItemsChoiceProps ) {
+	return (
+		<>
+			{ choices.map( ( item ) => {
+				const isSelected = value === item.value;
+				return (
+					<MenuItem
+						key={ item.value }
+						role="menuitemradio"
+						disabled={ item.disabled }
+						icon={ isSelected ? check : null }
+						info={ item.info }
+						isSelected={ isSelected }
+						shortcut={ item.shortcut }
+						className="components-menu-items-choice"
+						onClick={ () => {
+							if ( ! isSelected ) {
+								onSelect( item.value );
+							}
+						} }
+						onMouseEnter={ () => onHover( item.value ) }
+						onMouseLeave={ () => onHover( null ) }
+						aria-label={ item[ 'aria-label' ] }
+					>
+						{ item.label }
+					</MenuItem>
+				);
+			} ) }
+		</>
+	);
+}
+
+export default MenuItemsChoice;
diff --git a/packages/components/src/menu-items-choice/stories/index.story.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx
new file mode 100644
index 00000000000000..b634eb5becedbf
--- /dev/null
+++ b/packages/components/src/menu-items-choice/stories/index.story.tsx
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import MenuItemsChoice from '..';
+import MenuGroup from '../../menu-group';
+
+const meta: Meta< typeof MenuItemsChoice > = {
+	component: MenuItemsChoice,
+	title: 'Components/Actions/MenuItemsChoice',
+	id: 'components-menuitemschoice',
+	argTypes: {
+		onHover: { action: 'onHover' },
+		onSelect: { action: 'onSelect' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuItemsChoice > = ( {
+	onHover,
+	onSelect,
+	choices,
+} ) => {
+	const [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );
+
+	return (
+		<MenuGroup label="Editor">
+			<MenuItemsChoice
+				choices={ choices }
+				value={ choice }
+				onSelect={ ( ...selectArgs ) => {
+					onSelect( ...selectArgs );
+					setChoice( ...selectArgs );
+				} }
+				onHover={ onHover }
+			/>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuItemsChoice > = Template.bind( {} );
+
+Default.args = {
+	choices: [
+		{
+			value: 'arbitrary-choice-1',
+			label: 'Arbitrary Label #1',
+			info: 'Arbitrary Explanatory 1',
+		},
+		{
+			value: 'arbitrary-choice-2',
+			label: 'Arbitrary Label #2',
+			info: 'Arbitrary Explanatory 2',
+		},
+		{
+			value: 'arbitrary-choice-3',
+			label: 'Arbitrary Label #3',
+			info: 'Arbitrary Explanatory 3',
+		},
+	],
+	value: 'arbitrary-choice-1',
+};
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e8..c33ce43301842b 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,8 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
+	min-height: $button-size-next-default-40px;
+	height: auto;
+
 	svg {
 		margin-right: $grid-unit-15;
 	}
diff --git a/packages/components/src/menu-items-choice/types.ts b/packages/components/src/menu-items-choice/types.ts
new file mode 100644
index 00000000000000..a722d5e03709ed
--- /dev/null
+++ b/packages/components/src/menu-items-choice/types.ts
@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import type { ShortcutProps } from '../shortcut/types';
+import type { ButtonAsButtonProps } from '../button/types';
+
+export type MenuItemsChoiceProps = {
+	/**
+	 * Array of choices.
+	 *
+	 * @default []
+	 */
+	choices: readonly MenuItemChoice[];
+	/**
+	 * Value of currently selected choice (should match a `value` property
+	 * from a choice in `choices`).
+	 */
+	value: string;
+	/**
+	 * Callback function to be called with the selected choice when user
+	 * selects a new choice.
+	 */
+	onSelect: ( value: string ) => void;
+
+	/**
+	 * Callback function to be called with a choice when user
+	 * hovers over a new choice (will be empty on mouse leave).
+	 *
+	 * @default noop
+	 */
+	onHover: ( value: string | null ) => void;
+};
+
+export type MenuItemChoice = {
+	/**
+	 * Human-readable label for choice.
+	 */
+	label: string;
+	/**
+	 * Unique value for choice.
+	 */
+	value: string;
+	/**
+	 * Whether the menu item is disabled.
+	 */
+	disabled?: ButtonAsButtonProps[ 'disabled' ];
+	/**
+	 * Additional information which will be rendered below the given label.
+	 */
+	info?: string;
+	/**
+	 * Optional keyboard sequence to trigger choice with keyboard shortcut
+	 * (e.g. `ctrl+s`).
+	 */
+	shortcut?: ShortcutProps[ 'shortcut' ];
+	/**
+	 * Aria compliant label.
+	 */
+	[ 'aria-label' ]?: string;
+};
diff --git a/packages/components/src/menu/README.md b/packages/components/src/menu/README.md
new file mode 100644
index 00000000000000..6732610c0c6cae
--- /dev/null
+++ b/packages/components/src/menu/README.md
@@ -0,0 +1,344 @@
+# `Menu`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`Menu` displays a menu to the user (such as a set of actions or functions). The menu is rendered in a popover (this pattern is also known as a "Dropdown menu"), which is triggered by a button.
+
+## Design guidelines
+
+### Usage
+
+#### When to use a `Menu`
+
+Use a `Menu` when you want users to:
+
+-   Choose an action or change a setting from a list, AND
+-   Only see the available choices contextually.
+
+`Menu` is a React component to render an expandable menu of buttons. It is similar in purpose to a `<select>` element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.
+
+If you need to display all the available options at all times, consider using a Toolbar instead. Use a `Menu` to display a list of actions after the user interacts with a button.
+
+**Do**
+Use a `Menu` to display a list of actions after the user interacts with an icon.
+
+**Don’t** use a `Menu` for important actions that should always be visible. Use a `Toolbar` instead.
+
+**Don’t**
+Don’t use a `Menu` for frequently used actions. Use a `Toolbar` instead.
+
+#### Behavior
+
+Generally, the parent button should indicate that interacting with it will show a `Menu`.
+
+The parent button should retain the same visual styling regardless of whether the `Menu` is displayed or not.
+
+#### Placement
+
+The `Menu` should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full `Menu`, it can be displayed instead above the parent button.
+
+## Development guidelines
+
+This component is still highly experimental, and it's not normally accessible to consumers of the `@wordpress/components` package.
+
+The component exposes a set of components that are meant to be used in combination with each other in order to implement a `Menu` correctly.
+
+### `Menu`
+
+The root component, used to specify the menu's trigger and its contents.
+
+#### Props
+
+The component accepts the following props:
+
+##### `trigger`: `React.ReactNode`
+
+The button triggering the menu popover.
+
+-   Required: yes
+
+##### `children`: `React.ReactNode`
+
+The contents of the menu (ie. one or more menu items).
+
+-   Required: yes
+
+##### `defaultOpen`: `boolean`
+
+The open state of the menu popover when it is initially rendered. Use when not wanting to control its open state.
+
+-   Required: no
+-   Default: `false`
+
+##### `open`: `boolean`
+
+The controlled open state of the menu popover. Must be used in conjunction with `onOpenChange`.
+
+-   Required: no
+
+##### `onOpenChange`: `(open: boolean) => void`
+
+Event handler called when the open state of the menu popover changes.
+
+-   Required: no
+
+##### `modal`: `boolean`
+
+The modality of the menu popover. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+
+-   Required: no
+-   Default: `true`
+
+##### `placement`: ``'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
+
+The placement of the menu popover.
+
+-   Required: no
+-   Default: `'bottom-start'` for root-level menus, `'right-start'` for nested menus
+
+##### `gutter`: `number`
+
+The distance in pixels from the trigger.
+
+-   Required: no
+-   Default: `8` for root-level menus, `16` for nested menus
+
+##### `shift`: `number`
+
+The skidding of the popover along the anchor element. Can be set to negative values to make the popover shift to the opposite side.
+
+-   Required: no
+-   Default: `0` for root-level menus, `-8` for nested menus
+
+### `Menu.Item`
+
+Used to render a menu item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the item
+
+-   Required: yes
+
+##### `prefix`: `React.ReactNode`
+
+The contents of the item's prefix.
+
+-   Required: no
+
+##### `suffix`: `React.ReactNode`
+
+The contents of the item's suffix.
+
+-   Required: no
+
+##### `hideOnClick`: `boolean`
+
+Whether to hide the menu popover when the menu item is clicked.
+
+-   Required: no
+-   Default: `true`
+
+##### `disabled`: `boolean`
+
+Determines if the element is disabled.
+
+-   Required: no
+-   Default: `false`
+
+### `Menu.CheckboxItem`
+
+Used to render a checkbox item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the item
+
+-   Required: yes
+
+##### `suffix`: `React.ReactNode`
+
+The contents of the item's suffix.
+
+-   Required: no
+
+##### `hideOnClick`: `boolean`
+
+Whether to hide the menu popover when the menu item is clicked.
+
+-   Required: no
+-   Default: `false`
+
+##### `disabled`: `boolean`
+
+Determines if the element is disabled.
+
+-   Required: no
+-   Default: `false`
+
+##### `name`: `string`
+
+The checkbox item's name.
+
+-   Required: yes
+
+##### `value`: `string`
+
+The checkbox item's value, useful when using multiple checkbox items
+associated to the same `name`.
+
+-   Required: no
+
+##### `checked`: `boolean`
+
+The checkbox item's value, useful when using multiple checkbox items
+associated to the same `name`.
+
+-   Required: no
+
+##### `defaultChecked`: `boolean`
+
+The checked state of the checkbox menu item when it is initially rendered. Use when not wanting to control its checked state.
+
+-   Required: no
+
+##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
+
+Event handler called when the checked state of the checkbox menu item changes.
+
+-   Required: no
+
+### `Menu.RadioItem`
+
+Used to render a radio item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the item
+
+-   Required: yes
+
+##### `suffix`: `React.ReactNode`
+
+The contents of the item's suffix.
+
+-   Required: no
+
+##### `hideOnClick`: `boolean`
+
+Whether to hide the menu popover when the menu item is clicked.
+
+-   Required: no
+-   Default: `false`
+
+##### `disabled`: `boolean`
+
+Determines if the element is disabled.
+
+-   Required: no
+-   Default: `false`
+
+##### `name`: `string`
+
+The radio item's name.
+
+-   Required: yes
+
+##### `value`: `string | number`
+
+The radio item's value.
+
+-   Required: yes
+
+##### `checked`: `boolean`
+
+The checkbox item's value, useful when using multiple checkbox items
+associated to the same `name`.
+
+-   Required: no
+
+##### `defaultChecked`: `boolean`
+
+The checked state of the radio menu item when it is initially rendered. Use when not wanting to control its checked state.
+
+-   Required: no
+
+##### `onChange`: `( event: React.ChangeEvent< HTMLInputElement > ) => void;`
+
+Event handler called when the checked radio menu item changes.
+
+-   Required: no
+
+### `Menu.ItemLabel`
+
+Used to render the menu item's label.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The label contents.
+
+-   Required: yes
+
+### `Menu.ItemHelpText`
+
+Used to render the menu item's help text.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The help text contents.
+
+-   Required: yes
+
+### `Menu.Group`
+
+Used to group menu items.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the menu group (ie. an optional menu group label and one or more menu items).
+
+-   Required: yes
+
+### `Menu.GroupLabel`
+
+Used to render a group label. The label text should be kept as short as possible.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The contents of the menu group label.
+
+-   Required: yes
+
+### `Menu.Separator`
+
+Used to render a visual separator.
diff --git a/packages/components/src/menu/checkbox-item.tsx b/packages/components/src/menu/checkbox-item.tsx
new file mode 100644
index 00000000000000..ddb700b43324a6
--- /dev/null
+++ b/packages/components/src/menu/checkbox-item.tsx
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+import { Icon, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import type { MenuCheckboxItemProps } from './types';
+import * as Styled from './styles';
+
+export const MenuCheckboxItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
+>( function MenuCheckboxItem(
+	{ suffix, children, hideOnClick = false, ...props },
+	ref
+) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.CheckboxItem can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuCheckboxItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ menuContext.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ menuContext.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ check } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
+					{ children }
+				</Styled.MenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuCheckboxItem>
+	);
+} );
diff --git a/packages/components/src/menu/context.tsx b/packages/components/src/menu/context.tsx
new file mode 100644
index 00000000000000..1205015c57cbee
--- /dev/null
+++ b/packages/components/src/menu/context.tsx
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { MenuContext as MenuContextType } from './types';
+
+export const MenuContext = createContext< MenuContextType | undefined >(
+	undefined
+);
diff --git a/packages/components/src/menu/group-label.tsx b/packages/components/src/menu/group-label.tsx
new file mode 100644
index 00000000000000..5bf081880cb1d7
--- /dev/null
+++ b/packages/components/src/menu/group-label.tsx
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import { Text } from '../text';
+import type { MenuGroupLabelProps } from './types';
+import * as Styled from './styles';
+
+export const MenuGroupLabel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuGroupLabelProps, 'div', false >
+>( function MenuGroup( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.GroupLabel can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuGroupLabel
+			ref={ ref }
+			render={
+				// @ts-expect-error The `children` prop is passed
+				<Text
+					upperCase
+					variant="muted"
+					size="11px"
+					weight={ 500 }
+					lineHeight="16px"
+				/>
+			}
+			{ ...props }
+			store={ menuContext.store }
+		/>
+	);
+} );
diff --git a/packages/components/src/menu/group.tsx b/packages/components/src/menu/group.tsx
new file mode 100644
index 00000000000000..834350955f3c5d
--- /dev/null
+++ b/packages/components/src/menu/group.tsx
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import type { MenuGroupProps } from './types';
+import * as Styled from './styles';
+
+export const MenuGroup = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuGroupProps, 'div', false >
+>( function MenuGroup( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Group can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuGroup
+			ref={ ref }
+			{ ...props }
+			store={ menuContext.store }
+		/>
+	);
+} );
diff --git a/packages/components/src/menu/index.tsx b/packages/components/src/menu/index.tsx
new file mode 100644
index 00000000000000..6f6e89b0a1c72b
--- /dev/null
+++ b/packages/components/src/menu/index.tsx
@@ -0,0 +1,239 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useMemo,
+	cloneElement,
+	isValidElement,
+	useCallback,
+} from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+import { chevronRightSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, contextConnect } from '../context';
+import type { WordPressComponentProps } from '../context';
+import type { MenuContext as MenuContextType, MenuProps } from './types';
+import * as Styled from './styles';
+import { MenuContext } from './context';
+import { MenuItem } from './item';
+import { MenuCheckboxItem } from './checkbox-item';
+import { MenuRadioItem } from './radio-item';
+import { MenuGroup } from './group';
+import { MenuGroupLabel } from './group-label';
+import { MenuSeparator } from './separator';
+import { MenuItemLabel } from './item-label';
+import { MenuItemHelpText } from './item-help-text';
+
+const UnconnectedMenu = (
+	props: WordPressComponentProps< MenuProps, 'div', false >,
+	ref: React.ForwardedRef< HTMLDivElement >
+) => {
+	const {
+		// Store props
+		open,
+		defaultOpen = false,
+		onOpenChange,
+		placement,
+
+		// Menu trigger props
+		trigger,
+
+		// Menu props
+		gutter,
+		children,
+		shift,
+		modal = true,
+
+		// From internal components context
+		variant,
+
+		// Rest
+		...otherProps
+	} = useContextSystem< typeof props & Pick< MenuContextType, 'variant' > >(
+		props,
+		'Menu'
+	);
+
+	const parentContext = useContext( MenuContext );
+
+	const computedDirection = isRTL() ? 'rtl' : 'ltr';
+
+	// If an explicit value for the `placement` prop is not passed,
+	// apply a default placement of `bottom-start` for the root menu popover,
+	// and of `right-start` for nested menu popovers.
+	let computedPlacement =
+		props.placement ??
+		( parentContext?.store ? 'right-start' : 'bottom-start' );
+	// Swap left/right in case of RTL direction
+	if ( computedDirection === 'rtl' ) {
+		if ( /right/.test( computedPlacement ) ) {
+			computedPlacement = computedPlacement.replace(
+				'right',
+				'left'
+			) as typeof computedPlacement;
+		} else if ( /left/.test( computedPlacement ) ) {
+			computedPlacement = computedPlacement.replace(
+				'left',
+				'right'
+			) as typeof computedPlacement;
+		}
+	}
+
+	const menuStore = Ariakit.useMenuStore( {
+		parent: parentContext?.store,
+		open,
+		defaultOpen,
+		placement: computedPlacement,
+		focusLoop: true,
+		setOpen( willBeOpen ) {
+			onOpenChange?.( willBeOpen );
+		},
+		rtl: computedDirection === 'rtl',
+	} );
+
+	const contextValue = useMemo(
+		() => ( { store: menuStore, variant } ),
+		[ menuStore, variant ]
+	);
+
+	// Extract the side from the applied placement — useful for animations.
+	// Using `currentPlacement` instead of `placement` to make sure that we
+	// use the final computed placement (including "flips" etc).
+	const appliedPlacementSide = useStoreState(
+		menuStore,
+		'currentPlacement'
+	).split( '-' )[ 0 ];
+
+	if (
+		menuStore.parent &&
+		! ( isValidElement( trigger ) && MenuItem === trigger.type )
+	) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'For nested Menus, the `trigger` should always be a `MenuItem`.'
+		);
+	}
+
+	const hideOnEscape = useCallback(
+		( event: React.KeyboardEvent< Element > ) => {
+			// Pressing Escape can cause unexpected consequences (ie. exiting
+			// full screen mode on MacOs, close parent modals...).
+			event.preventDefault();
+			// Returning `true` causes the menu to hide.
+			return true;
+		},
+		[]
+	);
+
+	const wrapperProps = useMemo(
+		() => ( {
+			dir: computedDirection,
+			style: {
+				direction:
+					computedDirection as React.CSSProperties[ 'direction' ],
+			},
+		} ),
+		[ computedDirection ]
+	);
+
+	return (
+		<>
+			{ /* Menu trigger */ }
+			<Ariakit.MenuButton
+				ref={ ref }
+				store={ menuStore }
+				render={
+					menuStore.parent
+						? cloneElement( trigger, {
+								// Add submenu arrow, unless a `suffix` is explicitly specified
+								suffix: (
+									<>
+										{ trigger.props.suffix }
+										<Styled.SubmenuChevronIcon
+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"
+										/>
+									</>
+								),
+						  } )
+						: trigger
+				}
+			/>
+
+			{ /* Menu popover */ }
+			<Ariakit.Menu
+				{ ...otherProps }
+				modal={ modal }
+				store={ menuStore }
+				// Root menu has an 8px distance from its trigger,
+				// otherwise 0 (which causes the submenu to slightly overlap)
+				gutter={ gutter ?? ( menuStore.parent ? 0 : 8 ) }
+				// Align nested menu by the same (but opposite) amount
+				// as the menu container's padding.
+				shift={ shift ?? ( menuStore.parent ? -4 : 0 ) }
+				hideOnHoverOutside={ false }
+				data-side={ appliedPlacementSide }
+				wrapperProps={ wrapperProps }
+				hideOnEscape={ hideOnEscape }
+				unmountOnHide
+				render={ ( renderProps ) => (
+					// Two wrappers are needed for the entry animation, where the menu
+					// container scales with a different factor than its contents.
+					// The {...renderProps} are passed to the inner wrapper, so that the
+					// menu element is the direct parent of the menu item elements.
+					<Styled.MenuPopoverOuterWrapper variant={ variant }>
+						<Styled.MenuPopoverInnerWrapper { ...renderProps } />
+					</Styled.MenuPopoverOuterWrapper>
+				) }
+			>
+				<MenuContext.Provider value={ contextValue }>
+					{ children }
+				</MenuContext.Provider>
+			</Ariakit.Menu>
+		</>
+	);
+};
+
+export const Menu = Object.assign( contextConnect( UnconnectedMenu, 'Menu' ), {
+	Context: Object.assign( MenuContext, {
+		displayName: 'Menu.Context',
+	} ),
+	Item: Object.assign( MenuItem, {
+		displayName: 'Menu.Item',
+	} ),
+	RadioItem: Object.assign( MenuRadioItem, {
+		displayName: 'Menu.RadioItem',
+	} ),
+	CheckboxItem: Object.assign( MenuCheckboxItem, {
+		displayName: 'Menu.CheckboxItem',
+	} ),
+	Group: Object.assign( MenuGroup, {
+		displayName: 'Menu.Group',
+	} ),
+	GroupLabel: Object.assign( MenuGroupLabel, {
+		displayName: 'Menu.GroupLabel',
+	} ),
+	Separator: Object.assign( MenuSeparator, {
+		displayName: 'Menu.Separator',
+	} ),
+	ItemLabel: Object.assign( MenuItemLabel, {
+		displayName: 'Menu.ItemLabel',
+	} ),
+	ItemHelpText: Object.assign( MenuItemHelpText, {
+		displayName: 'Menu.ItemHelpText',
+	} ),
+} );
+
+export default Menu;
diff --git a/packages/components/src/menu/item-help-text.tsx b/packages/components/src/menu/item-help-text.tsx
new file mode 100644
index 00000000000000..13d14c294125bd
--- /dev/null
+++ b/packages/components/src/menu/item-help-text.tsx
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import * as Styled from './styles';
+
+export const MenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function MenuItemHelpText( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.ItemHelpText can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuItemHelpText numberOfLines={ 2 } ref={ ref } { ...props } />
+	);
+} );
diff --git a/packages/components/src/menu/item-label.tsx b/packages/components/src/menu/item-label.tsx
new file mode 100644
index 00000000000000..4f5f80e547861f
--- /dev/null
+++ b/packages/components/src/menu/item-label.tsx
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import * as Styled from './styles';
+
+export const MenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function MenuItemLabel( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.ItemLabel can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuItemLabel numberOfLines={ 1 } ref={ ref } { ...props } />
+	);
+} );
diff --git a/packages/components/src/menu/item.tsx b/packages/components/src/menu/item.tsx
new file mode 100644
index 00000000000000..6d09bdf3d0f591
--- /dev/null
+++ b/packages/components/src/menu/item.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { MenuItemProps } from './types';
+import * as Styled from './styles';
+import { MenuContext } from './context';
+
+export const MenuItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuItemProps, 'div', false >
+>( function MenuItem(
+	{ prefix, suffix, children, hideOnClick = true, ...props },
+	ref
+) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Item can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ menuContext.store }
+		>
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
+					{ children }
+				</Styled.MenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuItem>
+	);
+} );
diff --git a/packages/components/src/menu/radio-item.tsx b/packages/components/src/menu/radio-item.tsx
new file mode 100644
index 00000000000000..5534a6b7f3e10c
--- /dev/null
+++ b/packages/components/src/menu/radio-item.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import type { MenuRadioItemProps } from './types';
+import * as Styled from './styles';
+import { SVG, Circle } from '@wordpress/primitives';
+
+const radioCheck = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
+	</SVG>
+);
+
+export const MenuRadioItem = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< MenuRadioItemProps, 'div', false >
+>( function MenuRadioItem(
+	{ suffix, children, hideOnClick = false, ...props },
+	ref
+) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.RadioItem can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuRadioItem
+			ref={ ref }
+			{ ...props }
+			accessibleWhenDisabled
+			hideOnClick={ hideOnClick }
+			store={ menuContext.store }
+		>
+			<Ariakit.MenuItemCheck
+				store={ menuContext.store }
+				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
+			>
+				<Icon icon={ radioCheck } size={ 24 } />
+			</Ariakit.MenuItemCheck>
+
+			<Styled.MenuItemContentWrapper>
+				<Styled.MenuItemChildrenWrapper>
+					{ children }
+				</Styled.MenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.MenuItemContentWrapper>
+		</Styled.MenuRadioItem>
+	);
+} );
diff --git a/packages/components/src/menu/separator.tsx b/packages/components/src/menu/separator.tsx
new file mode 100644
index 00000000000000..57cff572c287a0
--- /dev/null
+++ b/packages/components/src/menu/separator.tsx
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
+import type { MenuSeparatorProps } from './types';
+import * as Styled from './styles';
+
+export const MenuSeparator = forwardRef<
+	HTMLHRElement,
+	WordPressComponentProps< MenuSeparatorProps, 'hr', false >
+>( function MenuSeparator( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Separator can only be rendered inside a Menu component'
+		);
+	}
+
+	return (
+		<Styled.MenuSeparator
+			ref={ ref }
+			{ ...props }
+			store={ menuContext.store }
+			variant={ menuContext.variant }
+		/>
+	);
+} );
diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx
new file mode 100644
index 00000000000000..ad4794057e0e03
--- /dev/null
+++ b/packages/components/src/menu/stories/index.story.tsx
@@ -0,0 +1,543 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import { css } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { customLink, formatCapitalize } from '@wordpress/icons';
+import { useState, useMemo, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useCx } from '../../utils';
+import { Menu } from '..';
+import Icon from '../../icon';
+import Button from '../../button';
+import Modal from '../../modal';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+import { ContextSystemProvider } from '../../context';
+
+const meta: Meta< typeof Menu > = {
+	id: 'components-experimental-menu',
+	title: 'Components (Experimental)/Actions/Menu',
+	component: Menu,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Item: Menu.Item,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CheckboxItem: Menu.CheckboxItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Group: Menu.Group,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		GroupLabel: Menu.GroupLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Separator: Menu.Separator,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Context: Menu.Context,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		RadioItem: Menu.RadioItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ItemLabel: Menu.ItemLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ItemHelpText: Menu.ItemHelpText,
+	},
+	argTypes: {
+		children: { control: false },
+		trigger: { control: false },
+	},
+	tags: [ 'status-private' ],
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof Menu > = ( props ) => (
+	<Menu { ...props }>
+		<Menu.Item>
+			<Menu.ItemLabel>Label</Menu.ItemLabel>
+		</Menu.Item>
+		<Menu.Item>
+			<Menu.ItemLabel>Label</Menu.ItemLabel>
+			<Menu.ItemHelpText>Help text</Menu.ItemHelpText>
+		</Menu.Item>
+		<Menu.Item>
+			<Menu.ItemLabel>Label</Menu.ItemLabel>
+			<Menu.ItemHelpText>
+				The menu item help text is automatically truncated when there
+				are more than two lines of text
+			</Menu.ItemHelpText>
+		</Menu.Item>
+		<Menu.Item hideOnClick={ false }>
+			<Menu.ItemLabel>Label</Menu.ItemLabel>
+			<Menu.ItemHelpText>
+				This item doesn&apos;t close the menu on click
+			</Menu.ItemHelpText>
+		</Menu.Item>
+		<Menu.Item disabled>Disabled item</Menu.Item>
+		<Menu.Separator />
+		<Menu.Group>
+			<Menu.GroupLabel>Group label</Menu.GroupLabel>
+			<Menu.Item prefix={ <Icon icon={ customLink } size={ 24 } /> }>
+				<Menu.ItemLabel>With prefix</Menu.ItemLabel>
+			</Menu.Item>
+			<Menu.Item suffix="⌘S">With suffix</Menu.Item>
+			<Menu.Item
+				disabled
+				prefix={ <Icon icon={ formatCapitalize } size={ 24 } /> }
+				suffix="⌥⌘T"
+			>
+				<Menu.ItemLabel>Disabled with prefix and suffix</Menu.ItemLabel>
+				<Menu.ItemHelpText>And help text</Menu.ItemHelpText>
+			</Menu.Item>
+		</Menu.Group>
+	</Menu>
+);
+Default.args = {
+	trigger: (
+		<Button __next40pxDefaultSize variant="secondary">
+			Open menu
+		</Button>
+	),
+};
+
+export const WithSubmenu: StoryFn< typeof Menu > = ( props ) => (
+	<Menu { ...props }>
+		<Menu.Item>Level 1 item</Menu.Item>
+		<Menu
+			trigger={
+				<Menu.Item suffix="Suffix">
+					<Menu.ItemLabel>
+						Submenu trigger item with a long label
+					</Menu.ItemLabel>
+				</Menu.Item>
+			}
+		>
+			<Menu.Item>
+				<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+			</Menu.Item>
+			<Menu.Item>
+				<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+			</Menu.Item>
+			<Menu
+				trigger={
+					<Menu.Item>
+						<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
+					</Menu.Item>
+				}
+			>
+				<Menu.Item>
+					<Menu.ItemLabel>Level 3 item</Menu.ItemLabel>
+				</Menu.Item>
+				<Menu.Item>
+					<Menu.ItemLabel>Level 3 item</Menu.ItemLabel>
+				</Menu.Item>
+			</Menu>
+		</Menu>
+	</Menu>
+);
+WithSubmenu.args = {
+	...Default.args,
+};
+
+export const WithCheckboxes: StoryFn< typeof Menu > = ( props ) => {
+	const [ isAChecked, setAChecked ] = useState( false );
+	const [ isBChecked, setBChecked ] = useState( true );
+	const [ multipleCheckboxesValue, setMultipleCheckboxesValue ] = useState<
+		string[]
+	>( [ 'b' ] );
+
+	const onMultipleCheckboxesCheckedChange: React.ComponentProps<
+		typeof Menu.CheckboxItem
+	>[ 'onChange' ] = ( e ) => {
+		setMultipleCheckboxesValue( ( prevValues ) => {
+			if ( prevValues.includes( e.target.value ) ) {
+				return prevValues.filter( ( val ) => val !== e.target.value );
+			}
+			return [ ...prevValues, e.target.value ];
+		} );
+	};
+
+	return (
+		<Menu { ...props }>
+			<Menu.Group>
+				<Menu.GroupLabel>
+					Single selection, uncontrolled
+				</Menu.GroupLabel>
+				<Menu.CheckboxItem
+					name="checkbox-individual-uncontrolled-a"
+					value="a"
+					suffix="⌥⌘T"
+				>
+					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+				<Menu.CheckboxItem
+					name="checkbox-individual-uncontrolled-b"
+					value="b"
+					defaultChecked
+				>
+					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+			</Menu.Group>
+			<Menu.Separator />
+			<Menu.Group>
+				<Menu.GroupLabel>Single selection, controlled</Menu.GroupLabel>
+				<Menu.CheckboxItem
+					name="checkbox-individual-controlled-a"
+					value="a"
+					checked={ isAChecked }
+					onChange={ ( e ) => setAChecked( e.target.checked ) }
+				>
+					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+				<Menu.CheckboxItem
+					name="checkbox-individual-controlled-b"
+					value="b"
+					checked={ isBChecked }
+					onChange={ ( e ) => setBChecked( e.target.checked ) }
+				>
+					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+			</Menu.Group>
+			<Menu.Separator />
+			<Menu.Group>
+				<Menu.GroupLabel>
+					Multiple selection, uncontrolled
+				</Menu.GroupLabel>
+				<Menu.CheckboxItem
+					name="checkbox-multiple-uncontrolled"
+					value="a"
+				>
+					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+				<Menu.CheckboxItem
+					name="checkbox-multiple-uncontrolled"
+					value="b"
+					defaultChecked
+				>
+					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+			</Menu.Group>
+			<Menu.Separator />
+			<Menu.Group>
+				<Menu.GroupLabel>
+					Multiple selection, controlled
+				</Menu.GroupLabel>
+				<Menu.CheckboxItem
+					name="checkbox-multiple-controlled"
+					value="a"
+					checked={ multipleCheckboxesValue.includes( 'a' ) }
+					onChange={ onMultipleCheckboxesCheckedChange }
+				>
+					<Menu.ItemLabel>Checkbox item A</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+				<Menu.CheckboxItem
+					name="checkbox-multiple-controlled"
+					value="b"
+					checked={ multipleCheckboxesValue.includes( 'b' ) }
+					onChange={ onMultipleCheckboxesCheckedChange }
+				>
+					<Menu.ItemLabel>Checkbox item B</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.CheckboxItem>
+			</Menu.Group>
+		</Menu>
+	);
+};
+WithCheckboxes.args = {
+	...Default.args,
+};
+
+export const WithRadios: StoryFn< typeof Menu > = ( props ) => {
+	const [ radioValue, setRadioValue ] = useState( 'two' );
+	const onRadioChange: React.ComponentProps<
+		typeof Menu.RadioItem
+	>[ 'onChange' ] = ( e ) => setRadioValue( e.target.value );
+
+	return (
+		<Menu { ...props }>
+			<Menu.Group>
+				<Menu.GroupLabel>Uncontrolled</Menu.GroupLabel>
+				<Menu.RadioItem name="radio-uncontrolled" value="one">
+					<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.RadioItem>
+				<Menu.RadioItem
+					name="radio-uncontrolled"
+					value="two"
+					defaultChecked
+				>
+					<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.RadioItem>
+			</Menu.Group>
+			<Menu.Separator />
+			<Menu.Group>
+				<Menu.GroupLabel>Controlled</Menu.GroupLabel>
+				<Menu.RadioItem
+					name="radio-controlled"
+					value="one"
+					checked={ radioValue === 'one' }
+					onChange={ onRadioChange }
+				>
+					<Menu.ItemLabel>Radio item 1</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially unchecked</Menu.ItemHelpText>
+				</Menu.RadioItem>
+				<Menu.RadioItem
+					name="radio-controlled"
+					value="two"
+					checked={ radioValue === 'two' }
+					onChange={ onRadioChange }
+				>
+					<Menu.ItemLabel>Radio item 2</Menu.ItemLabel>
+					<Menu.ItemHelpText>Initially checked</Menu.ItemHelpText>
+				</Menu.RadioItem>
+			</Menu.Group>
+		</Menu>
+	);
+};
+WithRadios.args = {
+	...Default.args,
+};
+
+const modalOnTopOfMenuPopover = css`
+	&& {
+		z-index: 1000000;
+	}
+`;
+
+// For more examples with `Modal`, check https://ariakit.org/examples/menu-wordpress-modal
+export const WithModals: StoryFn< typeof Menu > = ( props ) => {
+	const [ isOuterModalOpen, setOuterModalOpen ] = useState( false );
+	const [ isInnerModalOpen, setInnerModalOpen ] = useState( false );
+
+	const cx = useCx();
+	const modalOverlayClassName = cx( modalOnTopOfMenuPopover );
+
+	return (
+		<>
+			<Menu { ...props }>
+				<Menu.Item
+					onClick={ () => setOuterModalOpen( true ) }
+					hideOnClick={ false }
+				>
+					<Menu.ItemLabel>Open outer modal</Menu.ItemLabel>
+				</Menu.Item>
+				<Menu.Item
+					onClick={ () => setInnerModalOpen( true ) }
+					hideOnClick={ false }
+				>
+					<Menu.ItemLabel>Open inner modal</Menu.ItemLabel>
+				</Menu.Item>
+				{ isInnerModalOpen && (
+					<Modal
+						onRequestClose={ () => setInnerModalOpen( false ) }
+						overlayClassName={ modalOverlayClassName }
+					>
+						Modal&apos;s contents
+						<button onClick={ () => setInnerModalOpen( false ) }>
+							Close
+						</button>
+					</Modal>
+				) }
+			</Menu>
+			{ isOuterModalOpen && (
+				<Modal
+					onRequestClose={ () => setOuterModalOpen( false ) }
+					overlayClassName={ modalOverlayClassName }
+				>
+					Modal&apos;s contents
+					<button onClick={ () => setOuterModalOpen( false ) }>
+						Close
+					</button>
+				</Modal>
+			) }
+		</>
+	);
+};
+WithModals.args = {
+	...Default.args,
+};
+
+const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+	const menuContext = useContext( Menu.Context );
+
+	// Forwarding the content of the slot so that it can be used by the fill
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ Menu.Context.Provider, { value: menuContext } ],
+			],
+		} ),
+		[ menuContext ]
+	);
+
+	return (
+		<ExampleSlotFill.Slot
+			fillProps={ fillProps }
+			bubblesVirtually
+			style={ { display: 'contents' } }
+		/>
+	);
+};
+
+type ForwardedContextTuple< P = {} > = [
+	React.ComponentType< React.PropsWithChildren< P > >,
+	P,
+];
+
+const Fill = ( { children }: { children: React.ReactNode } ) => {
+	const innerMarkup = <>{ children }</>;
+
+	return (
+		<ExampleSlotFill.Fill>
+			{ ( fillProps: { forwardedContext?: ForwardedContextTuple[] } ) => {
+				const { forwardedContext = [] } = fillProps;
+
+				return forwardedContext.reduce(
+					( inner: JSX.Element, [ Provider, props ] ) => (
+						<Provider { ...props }>{ inner }</Provider>
+					),
+					innerMarkup
+				);
+			} }
+		</ExampleSlotFill.Fill>
+	);
+};
+
+export const WithSlotFill: StoryFn< typeof Menu > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<Menu { ...props }>
+				<Menu.Item>
+					<Menu.ItemLabel>Item</Menu.ItemLabel>
+				</Menu.Item>
+				<Slot />
+			</Menu>
+
+			<Fill>
+				<Menu.Item>
+					<Menu.ItemLabel>Item from fill</Menu.ItemLabel>
+				</Menu.Item>
+				<Menu
+					trigger={
+						<Menu.Item>
+							<Menu.ItemLabel>Submenu from fill</Menu.ItemLabel>
+						</Menu.Item>
+					}
+				>
+					<Menu.Item>
+						<Menu.ItemLabel>Submenu item from fill</Menu.ItemLabel>
+					</Menu.Item>
+				</Menu>
+			</Fill>
+		</SlotFillProvider>
+	);
+};
+WithSlotFill.args = {
+	...Default.args,
+};
+
+const toolbarVariantContextValue = {
+	Menu: {
+		variant: 'toolbar',
+	},
+};
+export const ToolbarVariant: StoryFn< typeof Menu > = ( props ) => (
+	// TODO: add toolbar
+	<ContextSystemProvider value={ toolbarVariantContextValue }>
+		<Menu { ...props }>
+			<Menu.Item>
+				<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
+			</Menu.Item>
+			<Menu.Item>
+				<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
+			</Menu.Item>
+			<Menu.Separator />
+			<Menu
+				trigger={
+					<Menu.Item>
+						<Menu.ItemLabel>Submenu trigger</Menu.ItemLabel>
+					</Menu.Item>
+				}
+			>
+				<Menu.Item>
+					<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+				</Menu.Item>
+			</Menu>
+		</Menu>
+	</ContextSystemProvider>
+);
+ToolbarVariant.args = {
+	...Default.args,
+};
+
+export const InsideModal: StoryFn< typeof Menu > = ( props ) => {
+	const [ isModalOpen, setModalOpen ] = useState( false );
+	return (
+		<>
+			<Button
+				onClick={ () => setModalOpen( true ) }
+				__next40pxDefaultSize
+				variant="secondary"
+			>
+				Open modal
+			</Button>
+			{ isModalOpen && (
+				<Modal onRequestClose={ () => setModalOpen( false ) }>
+					<Menu { ...props }>
+						<Menu.Item>
+							<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
+						</Menu.Item>
+						<Menu.Item>
+							<Menu.ItemLabel>Level 1 item</Menu.ItemLabel>
+						</Menu.Item>
+						<Menu.Separator />
+						<Menu
+							trigger={
+								<Menu.Item>
+									<Menu.ItemLabel>
+										Submenu trigger
+									</Menu.ItemLabel>
+								</Menu.Item>
+							}
+						>
+							<Menu.Item>
+								<Menu.ItemLabel>Level 2 item</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu>
+					</Menu>
+					<Button onClick={ () => setModalOpen( false ) }>
+						Close modal
+					</Button>
+				</Modal>
+			) }
+		</>
+	);
+};
+InsideModal.args = {
+	...Default.args,
+};
+InsideModal.parameters = {
+	docs: {
+		source: { type: 'code' },
+	},
+};
diff --git a/packages/components/src/menu/styles.ts b/packages/components/src/menu/styles.ts
new file mode 100644
index 00000000000000..0e0752bf24cd10
--- /dev/null
+++ b/packages/components/src/menu/styles.ts
@@ -0,0 +1,391 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, font, rtl, CONFIG } from '../utils';
+import { space } from '../utils/space';
+import Icon from '../icon';
+import { Truncate } from '../truncate';
+import type { MenuContext } from './types';
+
+const ANIMATION_PARAMS = {
+	SCALE_AMOUNT_OUTER: 0.82,
+	SCALE_AMOUNT_CONTENT: 0.9,
+	DURATION: {
+		IN: '400ms',
+		OUT: '200ms',
+	},
+	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
+const CONTENT_WRAPPER_PADDING = space( 1 );
+const ITEM_PADDING_BLOCK = space( 2 );
+const ITEM_PADDING_INLINE = space( 3 );
+
+// TODO:
+// - border color and divider color are different from COLORS.theme variables
+// - lighter text color is not defined in COLORS.theme, should it be?
+// - lighter background color is not defined in COLORS.theme, should it be?
+const DEFAULT_BORDER_COLOR = COLORS.theme.gray[ 300 ];
+const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
+const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
+const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
+const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
+
+const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
+
+export const MenuPopoverOuterWrapper = styled.div<
+	Pick< MenuContext, 'variant' >
+>`
+	position: relative;
+
+	background-color: ${ COLORS.ui.background };
+	border-radius: ${ CONFIG.radiusMedium };
+	${ ( props ) => css`
+		box-shadow: ${ props.variant === 'toolbar'
+			? TOOLBAR_VARIANT_BOX_SHADOW
+			: DEFAULT_BOX_SHADOW };
+	` }
+
+	overflow: hidden;
+
+	/* Open/close animation (outer wrapper) */
+	@media not ( prefers-reduced-motion ) {
+		transition-property: transform, opacity;
+		transition-timing-function: ${ ANIMATION_PARAMS.EASING };
+		transition-duration: ${ ANIMATION_PARAMS.DURATION.IN };
+		will-change: transform, opacity;
+
+		/* Regardless of the side, fade in and out. */
+		opacity: 0;
+		&:has( [data-enter] ) {
+			opacity: 1;
+		}
+
+		&:has( [data-leave] ) {
+			transition-duration: ${ ANIMATION_PARAMS.DURATION.OUT };
+		}
+
+		/* For menus opening on top and bottom side, animate the scale Y too. */
+		&:has( [data-side='bottom'] ),
+		&:has( [data-side='top'] ) {
+			transform: scaleY( ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } );
+		}
+		&:has( [data-side='bottom'] ) {
+			transform-origin: top;
+		}
+		&:has( [data-side='top'] ) {
+			transform-origin: bottom;
+		}
+		&:has( [data-enter][data-side='bottom'] ),
+		&:has( [data-enter][data-side='top'] ),
+		/* Do not animate the scaleY when closing the menu */
+		&:has( [data-leave][data-side='bottom'] ),
+		&:has( [data-leave][data-side='top'] ) {
+			transform: scaleY( 1 );
+		}
+	}
+`;
+
+export const MenuPopoverInnerWrapper = styled.div`
+	position: relative;
+	/* Same as popover component */
+	/* TODO: is there a way to read the sass variable? */
+	z-index: 1000000;
+
+	display: grid;
+	grid-template-columns: ${ GRID_TEMPLATE_COLS };
+	grid-template-rows: auto;
+
+	box-sizing: border-box;
+	min-width: 160px;
+	max-width: 320px;
+	max-height: var( --popover-available-height );
+
+	padding: ${ CONTENT_WRAPPER_PADDING };
+
+	overscroll-behavior: contain;
+	overflow: auto;
+
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent !important;
+
+	/* Open/close animation (inner content wrapper) */
+	@media not ( prefers-reduced-motion ) {
+		transition: inherit;
+		transform-origin: inherit;
+
+		/*
+		 * For menus opening on top and bottom side, animate the scale Y too.
+		 * The content scales at a different rate than the outer container:
+		 * - first, counter the outer scale factor by doing "1 / scaleAmountOuter"
+		 * - then, apply the content scale factor.
+		 */
+		&[data-side='bottom'],
+		&[data-side='top'] {
+			transform: scaleY(
+				calc(
+					1 / ${ ANIMATION_PARAMS.SCALE_AMOUNT_OUTER } *
+						${ ANIMATION_PARAMS.SCALE_AMOUNT_CONTENT }
+				)
+			);
+		}
+		&[data-enter][data-side='bottom'],
+		&[data-enter][data-side='top'],
+		/* Do not animate the scaleY when closing the menu */
+		&[data-leave][data-side='bottom'],
+		&[data-leave][data-side='top'] {
+			transform: scaleY( 1 );
+		}
+	}
+`;
+
+const baseItem = css`
+	all: unset;
+
+	position: relative;
+	min-height: ${ space( 10 ) };
+	box-sizing: border-box;
+
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
+
+	display: grid;
+	grid-template-columns: ${ GRID_TEMPLATE_COLS };
+	align-items: center;
+
+	@supports ( grid-template-columns: subgrid ) {
+		/*
+		 * Define a grid layout which inherits the same columns configuration
+		 * from the parent layout (ie. subgrid). This allows the menu
+		 * to synchronize the indentation of all its items.
+		 */
+		grid-template-columns: subgrid;
+	}
+
+	font-size: ${ font( 'default.fontSize' ) };
+	font-family: inherit;
+	font-weight: normal;
+	line-height: 20px;
+
+	color: ${ COLORS.theme.foreground };
+	border-radius: ${ CONFIG.radiusSmall };
+
+	padding-block: ${ ITEM_PADDING_BLOCK };
+	padding-inline: ${ ITEM_PADDING_INLINE };
+
+	/*
+	 * Make sure that, when an item is scrolled into view (eg. while using the
+	 * keyboard to move focus), the whole item comes into view
+	 */
+	scroll-margin: ${ CONTENT_WRAPPER_PADDING };
+
+	user-select: none;
+	outline: none;
+
+	&[aria-disabled='true'] {
+		color: ${ COLORS.ui.textDisabled };
+		cursor: not-allowed;
+	}
+
+	/* Active item (including hover) */
+	&[data-active-item]:not( [data-focus-visible] ):not(
+			[aria-disabled='true']
+		) {
+		background-color: ${ COLORS.theme.accent };
+		color: ${ COLORS.white };
+	}
+
+	/* Keyboard focus (focus-visible) */
+	&[data-focus-visible] {
+		box-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };
+
+		/* Only visible in Windows High Contrast mode */
+		outline: 2px solid transparent;
+	}
+
+	/* Active (ie. pressed, mouse down) */
+	&:active,
+	&[data-active] {
+		/* TODO: should there be a visual active state? */
+	}
+
+	/* When the item is the trigger of an open submenu */
+	${ MenuPopoverInnerWrapper }:not(:focus) &:not(:focus)[aria-expanded="true"] {
+		background-color: ${ LIGHT_BACKGROUND_COLOR };
+		color: ${ COLORS.theme.foreground };
+	}
+
+	svg {
+		fill: currentColor;
+	}
+`;
+
+export const MenuItem = styled( Ariakit.MenuItem )`
+	${ baseItem };
+`;
+
+export const MenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
+	${ baseItem };
+`;
+
+export const MenuRadioItem = styled( Ariakit.MenuItemRadio )`
+	${ baseItem };
+`;
+
+export const ItemPrefixWrapper = styled.span`
+	/* Always occupy the first column, even when auto-collapsing */
+	grid-column: 1;
+
+	/*
+	 * Even when the item is not checked, occupy the same screen space to avoid
+	 * the space collapside when no items are checked.
+	 */
+	${ MenuCheckboxItem } > &,
+	${ MenuRadioItem } > & {
+		/* Same width as the check icons */
+		min-width: ${ space( 6 ) };
+	}
+
+	${ MenuCheckboxItem } > &,
+	${ MenuRadioItem } > &,
+	&:not( :empty ) {
+		margin-inline-end: ${ space( 2 ) };
+	}
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	color: ${ LIGHTER_TEXT_COLOR };
+
+	/*
+	* When the parent menu item is active, except when it's a non-focused/hovered
+	* submenu trigger (in that case, color should not be inherited)
+	*/
+	[data-active-item]:not( [data-focus-visible] ) > &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] > & {
+		color: inherit;
+	}
+`;
+
+export const MenuItemContentWrapper = styled.div`
+	/*
+	 * Always occupy the second column, since the first column
+	 * is taken by the prefix wrapper (when displayed).
+	 */
+	grid-column: 2;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: ${ space( 3 ) };
+
+	pointer-events: none;
+`;
+
+export const MenuItemChildrenWrapper = styled.div`
+	flex: 1;
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: ${ space( 1 ) };
+`;
+
+export const ItemSuffixWrapper = styled.span`
+	flex: 0 1 fit-content;
+	min-width: 0;
+	width: fit-content;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: ${ space( 3 ) };
+
+	color: ${ LIGHTER_TEXT_COLOR };
+
+	/*
+	 * When the parent menu item is active, except when it's a non-focused/hovered
+	 * submenu trigger (in that case, color should not be inherited)
+	 */
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ MenuPopoverInnerWrapper }) &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] *:not(${ MenuPopoverInnerWrapper }) & {
+		color: inherit;
+	}
+`;
+
+export const MenuGroup = styled( Ariakit.MenuGroup )`
+	/* Ignore this element when calculating the layout. Useful for subgrid */
+	display: contents;
+`;
+
+export const MenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
+
+	padding-block-start: ${ space( 3 ) };
+	padding-block-end: ${ space( 2 ) };
+	padding-inline: ${ ITEM_PADDING_INLINE };
+`;
+
+export const MenuSeparator = styled( Ariakit.MenuSeparator )<
+	Pick< MenuContext, 'variant' >
+>`
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
+
+	border: none;
+	height: ${ CONFIG.borderWidth };
+	background-color: ${ ( props ) =>
+		props.variant === 'toolbar'
+			? TOOLBAR_VARIANT_BORDER_COLOR
+			: DIVIDER_COLOR };
+	/* Align with menu items' content */
+	margin-block: ${ space( 2 ) };
+	margin-inline: ${ ITEM_PADDING_INLINE };
+
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+`;
+
+export const SubmenuChevronIcon = styled( Icon )`
+	width: ${ space( 1.5 ) };
+	${ rtl(
+		{
+			transform: `scaleX(1)`,
+		},
+		{
+			transform: `scaleX(-1)`,
+		}
+	) };
+`;
+
+export const MenuItemLabel = styled( Truncate )`
+	font-size: ${ font( 'default.fontSize' ) };
+	line-height: 20px;
+	color: inherit;
+`;
+
+export const MenuItemHelpText = styled( Truncate )`
+	font-size: ${ font( 'helpText.fontSize' ) };
+	line-height: 16px;
+	color: ${ LIGHTER_TEXT_COLOR };
+	overflow-wrap: anywhere;
+
+	[data-active-item]:not( [data-focus-visible] )
+		*:not( ${ MenuPopoverInnerWrapper } )
+		&,
+	[aria-disabled='true'] *:not( ${ MenuPopoverInnerWrapper } ) & {
+		color: inherit;
+	}
+`;
diff --git a/packages/components/src/menu/test/index.tsx b/packages/components/src/menu/test/index.tsx
new file mode 100644
index 00000000000000..60276cdb2379a0
--- /dev/null
+++ b/packages/components/src/menu/test/index.tsx
@@ -0,0 +1,1060 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import { press, click, hover, type } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Menu } from '..';
+
+const delay = ( delayInMs: number ) => {
+	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
+};
+
+describe( 'Menu', () => {
+	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+	it( 'should follow the WAI-ARIA spec', async () => {
+		render(
+			<Menu trigger={ <button>Open dropdown</button> }>
+				<Menu.Item>Menu item</Menu.Item>
+				<Menu.Separator />
+				<Menu trigger={ <Menu.Item>Submenu trigger item</Menu.Item> }>
+					<Menu.Item>Submenu item 1</Menu.Item>
+					<Menu.Item>Submenu item 2</Menu.Item>
+				</Menu>
+			</Menu>
+		);
+
+		const toggleButton = screen.getByRole( 'button', {
+			name: 'Open dropdown',
+		} );
+
+		expect( toggleButton ).toHaveAttribute( 'aria-haspopup', 'menu' );
+		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		await click( toggleButton );
+
+		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: toggleButton.textContent ?? '',
+				} )
+			).toHaveFocus()
+		);
+
+		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
+			'aria-orientation',
+			'horizontal'
+		);
+		expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( 2 );
+
+		const submenuTrigger = screen.getByRole( 'menuitem', {
+			name: 'Submenu trigger item',
+		} );
+		expect( submenuTrigger ).toHaveAttribute( 'aria-haspopup', 'menu' );
+		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		await hover( submenuTrigger );
+
+		// Wait for the open animation after hovering
+		await waitFor( () =>
+			expect(
+				screen.getByRole( 'menu', {
+					name: submenuTrigger.textContent ?? '',
+				} )
+			).toBeVisible()
+		);
+
+		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'true' );
+		expect( submenuTrigger ).toHaveAttribute(
+			'aria-controls',
+			screen.getAllByRole( 'menu' )[ 1 ].id
+		);
+	} );
+
+	describe( 'pointer and keyboard interactions', () => {
+		it( 'should open and focus the menu when clicking the trigger', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// Menu closed
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+
+			// Click to open the menu
+			await click( toggleButton );
+
+			// Menu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+		} );
+
+		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item disabled>First item</Menu.Item>
+					<Menu.Item>Second item</Menu.Item>
+					<Menu.Item>Third item</Menu.Item>
+				</Menu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// Move focus on the toggle
+			await press.Tab();
+
+			expect( toggleButton ).toHaveFocus();
+
+			// Menu closed
+			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+			await press.ArrowDown();
+
+			// Menu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible)
+			expect(
+				screen.getByRole( 'menuitem', { name: 'First item' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item disabled>First item</Menu.Item>
+					<Menu.Item>Second item</Menu.Item>
+					<Menu.Item>Third item</Menu.Item>
+				</Menu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// Move focus on the toggle
+			await press.Tab();
+
+			expect( toggleButton ).toHaveFocus();
+
+			// Menu closed
+			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+			await press.Space();
+
+			// Menu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible
+			expect(
+				screen.getByRole( 'menuitem', { name: 'First item' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should close when pressing the escape key', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			const trigger = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			await click( trigger );
+
+			// Focuses menu on mouse click, focuses first item on keyboard press
+			// Can be changed with a custom useEffect
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Pressing esc will close the menu and move focus to the toggle
+			await press.Escape();
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', { name: 'Open dropdown' } )
+				).toHaveFocus()
+			);
+		} );
+
+		it( 'should close when clicking outside of the content', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Click on the body (ie. outside of the dropdown menu)
+			await click( document.body );
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should close when clicking on a menu item', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Clicking a menu item will close the menu
+			await click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item hideOnClick={ false }>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
+
+			// Clicking a menu item will close the menu
+			await click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
+		} );
+
+		it( 'should not close when clicking on a disabled menu item', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item disabled>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+
+			// Clicking a disabled menu item won't close the menu
+			await click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item 1</Menu.Item>
+					<Menu.Item>Menu item 2</Menu.Item>
+					<Menu
+						trigger={ <Menu.Item>Submenu trigger item</Menu.Item> }
+					>
+						<Menu.Item>Submenu item 1</Menu.Item>
+						<Menu.Item>Submenu item 2</Menu.Item>
+					</Menu>
+					<Menu.Item>Menu item 3</Menu.Item>
+				</Menu>
+			);
+
+			// Before hover, submenu items are not rendered
+			expect(
+				screen.queryByRole( 'menuitem', {
+					name: 'Submenu item 1',
+				} )
+			).not.toBeInTheDocument();
+
+			await hover(
+				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
+			);
+
+			// After hover, submenu items are rendered
+			// Reason for `findByRole`: due to the animation, we've got to wait
+			// a short amount of time for the submenu to appear
+			await screen.findByRole( 'menuitem', {
+				name: 'Submenu item 1',
+			} );
+		} );
+
+		it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
+			render(
+				<Menu defaultOpen trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>Menu item 1</Menu.Item>
+					<Menu.Item>Menu item 2</Menu.Item>
+					<Menu
+						trigger={ <Menu.Item>Submenu trigger item</Menu.Item> }
+					>
+						<Menu.Item>Submenu item 1</Menu.Item>
+						<Menu.Item>Submenu item 2</Menu.Item>
+					</Menu>
+					<Menu.Item>Menu item 3</Menu.Item>
+				</Menu>
+			);
+
+			// The menu is focused automatically when `defaultOpen` is set.
+			await waitFor( () =>
+				expect( screen.getByRole( 'menu' ) ).toHaveFocus()
+			);
+
+			// Arrow up/down selects menu items
+			// The selection wraps around from last to first and viceversa
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Menu item 2' } )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
+			).toHaveFocus();
+
+			await press.ArrowUp();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
+			).toHaveFocus();
+
+			await press.ArrowUp();
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
+			).toHaveFocus();
+
+			// Arrow right/left can be used to enter/leave submenus
+			await press.ArrowRight();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await press.ArrowDown();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu item 2',
+				} )
+			).toHaveFocus();
+
+			await press.ArrowLeft();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu trigger item',
+				} )
+			).toHaveFocus();
+
+			// Spacebar or enter key can also be used to enter a submenu
+			await press.Enter();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await press.ArrowLeft();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu trigger item',
+				} )
+			).toHaveFocus();
+
+			await press.Space();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu item 1',
+				} )
+			).toHaveFocus();
+
+			await press.ArrowLeft();
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Submenu trigger item',
+				} )
+			).toHaveFocus();
+		} );
+
+		it( 'should check radio items and keep the menu open when clicking (controlled)', async () => {
+			const onRadioValueChangeSpy = jest.fn();
+
+			const ControlledRadioGroup = () => {
+				const [ radioValue, setRadioValue ] = useState( 'two' );
+				const onRadioChange: React.ComponentProps<
+					typeof Menu.RadioItem
+				>[ 'onChange' ] = ( e ) => {
+					onRadioValueChangeSpy( e.target.value );
+					setRadioValue( e.target.value );
+				};
+				return (
+					<Menu trigger={ <button>Open dropdown</button> }>
+						<Menu.Group>
+							<Menu.RadioItem
+								name="radio-test"
+								value="radio-one"
+								checked={ radioValue === 'radio-one' }
+								onChange={ onRadioChange }
+							>
+								Radio item one
+							</Menu.RadioItem>
+							<Menu.RadioItem
+								name="radio-test"
+								value="radio-two"
+								checked={ radioValue === 'radio-two' }
+								onChange={ onRadioChange }
+							>
+								Radio item two
+							</Menu.RadioItem>
+						</Menu.Group>
+					</Menu>
+				);
+			};
+
+			render( <ControlledRadioGroup /> );
+
+			// Open dropdown
+			await click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// No radios should be checked at this point
+			expect( screen.getAllByRole( 'menuitemradio' ) ).toHaveLength( 2 );
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click first radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-one'
+			);
+
+			// Make sure that first radio is checked
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click second radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-two'
+			);
+
+			// Make sure that second radio is selected
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+		} );
+
+		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
+			const onRadioValueChangeSpy = jest.fn();
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Group>
+						<Menu.RadioItem
+							name="radio-test"
+							value="radio-one"
+							onChange={ ( e ) =>
+								onRadioValueChangeSpy( e.target.value )
+							}
+						>
+							Radio item one
+						</Menu.RadioItem>
+						<Menu.RadioItem
+							name="radio-test"
+							value="radio-two"
+							defaultChecked
+							onChange={ ( e ) =>
+								onRadioValueChangeSpy( e.target.value )
+							}
+						>
+							Radio item two
+						</Menu.RadioItem>
+					</Menu.Group>
+				</Menu>
+			);
+
+			// Open dropdown
+			await click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Radio item two should be checked (`defaultChecked` prop)
+			expect( screen.getAllByRole( 'menuitemradio' ) ).toHaveLength( 2 );
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+
+			// Click first radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-one'
+			);
+
+			// Make sure that first radio is checked
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click second radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-two'
+			);
+
+			// Make sure that second radio is selected
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+		} );
+
+		it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
+			const onCheckboxValueChangeSpy = jest.fn();
+
+			const ControlledRadioGroup = () => {
+				const [ itemOneChecked, setItemOneChecked ] =
+					useState< boolean >();
+				const [ itemTwoChecked, setItemTwoChecked ] =
+					useState< boolean >();
+
+				return (
+					<Menu trigger={ <button>Open dropdown</button> }>
+						<Menu.CheckboxItem
+							name="item-one"
+							value="item-one-value"
+							checked={ itemOneChecked }
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+								setItemOneChecked( e.target.checked );
+							} }
+						>
+							Checkbox item one
+						</Menu.CheckboxItem>
+
+						<Menu.CheckboxItem
+							name="item-two"
+							value="item-two-value"
+							checked={ itemTwoChecked }
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+								setItemTwoChecked( e.target.checked );
+							} }
+						>
+							Checkbox item two
+						</Menu.CheckboxItem>
+					</Menu>
+				);
+			};
+
+			render( <ControlledRadioGroup /> );
+
+			// Open dropdown
+			await click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// No checkboxes should be checked at this point
+			expect( screen.getAllByRole( 'menuitemcheckbox' ) ).toHaveLength(
+				2
+			);
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+
+			// Click first checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-one',
+				'item-one-value',
+				true
+			);
+
+			// Make sure that first checkbox is checked
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				true
+			);
+
+			// Make sure that second checkbox is selected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				false
+			);
+
+			// Make sure that second checkbox is unselected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+		} );
+
+		it( 'should check checkbox items and keep the menu open when clicking (uncontrolled)', async () => {
+			const onCheckboxValueChangeSpy = jest.fn();
+
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.CheckboxItem
+						name="item-one"
+						value="item-one-value"
+						onChange={ ( e ) => {
+							onCheckboxValueChangeSpy(
+								e.target.name,
+								e.target.value,
+								e.target.checked
+							);
+						} }
+					>
+						Checkbox item one
+					</Menu.CheckboxItem>
+
+					<Menu.CheckboxItem
+						name="item-two"
+						value="item-two-value"
+						defaultChecked
+						onChange={ ( e ) => {
+							onCheckboxValueChangeSpy(
+								e.target.name,
+								e.target.value,
+								e.target.checked
+							);
+						} }
+					>
+						Checkbox item two
+					</Menu.CheckboxItem>
+				</Menu>
+			);
+
+			// Open dropdown
+			await click(
+				screen.getByRole( 'button', { name: 'Open dropdown' } )
+			);
+
+			// Checkbox item two should be checked (`defaultChecked`)
+			expect( screen.getAllByRole( 'menuitemcheckbox' ) ).toHaveLength(
+				2
+			);
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+
+			// Click first checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-one',
+				'item-one-value',
+				true
+			);
+
+			// Make sure that first checkbox is checked
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				false
+			);
+
+			// Make sure that second checkbox is unchecked
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				true
+			);
+
+			// Make sure that second checkbox is unselected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+		} );
+	} );
+
+	describe( 'modality', () => {
+		it( 'should be modal by default', async () => {
+			render(
+				<>
+					<Menu trigger={ <button>Open dropdown</button> }>
+						<Menu.Item>Menu item</Menu.Item>
+					</Menu>
+					<button>Button outside of dropdown</button>
+				</>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// Menu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'button', {
+					name: 'Button outside of dropdown',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not be modal when the `modal` prop is set to `false`', async () => {
+			render(
+				<>
+					<Menu
+						trigger={ <button>Open dropdown</button> }
+						modal={ false }
+					>
+						<Menu.Item>Menu item</Menu.Item>
+					</Menu>
+					<button>Button outside of dropdown</button>
+				</>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// Menu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Menu is not modal, therefore the outer button is part of the
+			// accessibility tree and can be found.
+			const outerButton = screen.getByRole( 'button', {
+				name: 'Button outside of dropdown',
+			} );
+
+			// The outer button can be focused by pressing tab. Doing so will cause
+			// the Menu to close.
+			await press.Tab();
+			expect( outerButton ).toBeInTheDocument();
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'items prefix and suffix', () => {
+		it( 'should display a prefix on regular items', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item prefix={ <>Item prefix</> }>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the prefix are rendered before the item's children
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Item prefix Menu item',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on regular items', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item suffix={ <>Item suffix</> }>Menu item</Menu.Item>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitem', {
+					name: 'Menu item Item suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on radio items', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.RadioItem
+						name="radio-test"
+						value="radio-one"
+						suffix="Radio suffix"
+					>
+						Radio item one
+					</Menu.RadioItem>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitemradio', {
+					name: 'Radio item one Radio suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should display a suffix on checkbox items', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.CheckboxItem
+						name="checkbox-test"
+						value="checkbox-one"
+						suffix="Checkbox suffix"
+					>
+						Checkbox item one
+					</Menu.CheckboxItem>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// The contents of the suffix are rendered after the item's children
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one Checkbox suffix',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'typeahead', () => {
+		it( 'should highlight matching item', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>One</Menu.Item>
+					<Menu.Item>Two</Menu.Item>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Type "tw", it should match and focus the item with content "Two"
+			await type( 'tw' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Two' } )
+			).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type "on", it should match and focus the item with content "One"
+			await type( 'on' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should keep previous focus when no matches are found', async () => {
+			render(
+				<Menu trigger={ <button>Open dropdown</button> }>
+					<Menu.Item>One</Menu.Item>
+					<Menu.Item>Two</Menu.Item>
+				</Menu>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Type a string that doesn't match any items. Focus shouldn't move.
+			await type( 'abc' );
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type "on", it should match and focus the item with content "One"
+			await type( 'on' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type a string that doesn't match any items. Focus shouldn't move.
+			await type( 'abc' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type "tw", it should match and focus the item with content "Two"
+			await type( 'tw' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'Two' } )
+			).toHaveFocus();
+		} );
+	} );
+} );
diff --git a/packages/components/src/menu/types.ts b/packages/components/src/menu/types.ts
new file mode 100644
index 00000000000000..7b58cef241743e
--- /dev/null
+++ b/packages/components/src/menu/types.ts
@@ -0,0 +1,186 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+import type { Placement } from '@floating-ui/react-dom';
+
+export interface MenuContext {
+	/**
+	 * The ariakit store shared across all Menu subcomponents.
+	 */
+	store: Ariakit.MenuStore;
+	/**
+	 * The variant used by the underlying menu popover.
+	 */
+	variant?: 'toolbar';
+}
+
+export interface MenuProps {
+	/**
+	 * The button triggering the menu popover.
+	 */
+	trigger: React.ReactElement;
+	/**
+	 * The contents of the menu (ie. one or more menu items).
+	 */
+	children?: React.ReactNode;
+	/**
+	 * The open state of the menu popover when it is initially rendered. Use when
+	 * not wanting to control its open state.
+	 *
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * The controlled open state of the menu popover. Must be used in conjunction
+	 * with `onOpenChange`.
+	 */
+	open?: boolean;
+	/**
+	 * Event handler called when the open state of the menu popover changes.
+	 */
+	onOpenChange?: ( open: boolean ) => void;
+	/**
+	 * The modality of the menu popover. When set to true, interaction with
+	 * outside elements will be disabled and only menu content will be visible to
+	 * screen readers.
+	 *
+	 * @default true
+	 */
+	modal?: boolean;
+	/**
+	 * The placement of the menu popover.
+	 *
+	 * @default 'bottom-start' for root-level menus, 'right-start' for nested menus
+	 */
+	placement?: Placement;
+	/**
+	 * The distance between the popover and the anchor element.
+	 *
+	 * @default 8 for root-level menus, 16 for nested menus
+	 */
+	gutter?: number;
+	/**
+	 * The skidding of the popover along the anchor element. Can be set to
+	 * negative values to make the popover shift to the opposite side.
+	 *
+	 * @default 0 for root-level menus, -8 for nested menus
+	 */
+	shift?: number;
+	/**
+	 * Determines whether the menu popover will be hidden when the user presses
+	 * the Escape key.
+	 *
+	 * @default `( event ) => { event.preventDefault(); return true; }`
+	 */
+	hideOnEscape?:
+		| boolean
+		| ( (
+				event: KeyboardEvent | React.KeyboardEvent< Element >
+		  ) => boolean );
+}
+
+export interface MenuGroupProps {
+	/**
+	 * The contents of the menu group (ie. an optional menu group label and one
+	 * or more menu items).
+	 */
+	children: React.ReactNode;
+}
+
+export interface MenuGroupLabelProps {
+	/**
+	 * The contents of the menu group label.
+	 */
+	children: React.ReactNode;
+}
+
+export interface MenuItemProps {
+	/**
+	 * The contents of the menu item.
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the menu item's prefix.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the menu item's suffix.
+	 */
+	suffix?: React.ReactNode;
+	/**
+	 * Whether to hide the menu popover when the menu item is clicked.
+	 *
+	 * @default true
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * Determines if the element is disabled.
+	 */
+	disabled?: boolean;
+}
+
+export interface MenuCheckboxItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
+	/**
+	 * Whether to hide the menu popover when the menu item is clicked.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The checkbox menu item's name.
+	 */
+	name: string;
+	/**
+	 * The checkbox item's value, useful when using multiple checkbox menu items
+	 * associated to the same `name`.
+	 */
+	value?: string;
+	/**
+	 * The controlled checked state of the checkbox menu item.
+	 */
+	checked?: boolean;
+	/**
+	 * The checked state of the checkbox menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Event handler called when the checked state of the checkbox menu item changes.
+	 */
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface MenuRadioItemProps
+	extends Omit< MenuItemProps, 'prefix' | 'hideOnClick' > {
+	/**
+	 * Whether to hide the menu popover when the menu item is clicked.
+	 *
+	 * @default false
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The radio item's name.
+	 */
+	name: string;
+	/**
+	 * The radio item's value.
+	 */
+	value: string | number;
+	/**
+	 * The controlled checked state of the radio menu item.
+	 */
+	checked?: boolean;
+	/**
+	 * The checked state of the radio menu item when it is initially rendered.
+	 * Use when not wanting to control its checked state.
+	 */
+	defaultChecked?: boolean;
+	/**
+	 * Event handler called when the checked radio menu item changes.
+	 */
+	onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+}
+
+export interface MenuSeparatorProps {}
diff --git a/packages/components/src/mobile/audio-player/index.native.js b/packages/components/src/mobile/audio-player/index.native.js
deleted file mode 100644
index ad8f0dcb2e9e8d..00000000000000
--- a/packages/components/src/mobile/audio-player/index.native.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Text,
-	TouchableWithoutFeedback,
-	Linking,
-	Alert,
-	Platform,
-} from 'react-native';
-import { default as VideoPlayer } from 'react-native-video';
-
-/**
- * WordPress dependencies
- */
-import { View } from '@wordpress/primitives';
-import { Icon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { audio, warning } from '@wordpress/icons';
-import {
-	requestImageFailedRetryDialog,
-	requestImageUploadCancelDialog,
-} from '@wordpress/react-native-bridge';
-import { getProtocol } from '@wordpress/url';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import { parseAudioUrl } from './audio-url-parser.native';
-
-const isIOS = Platform.OS === 'ios';
-
-function Player( {
-	getStylesFromColorScheme,
-	isUploadInProgress,
-	isUploadFailed,
-	attributes,
-	isSelected,
-} ) {
-	const { id, src } = attributes;
-	const [ paused, setPaused ] = useState( true );
-
-	const onPressListen = () => {
-		if ( src ) {
-			if ( isIOS && this.player ) {
-				this.player.presentFullscreenPlayer();
-				return;
-			}
-
-			Linking.canOpenURL( src )
-				.then( ( supported ) => {
-					if ( ! supported ) {
-						Alert.alert(
-							__( 'Problem opening the audio' ),
-							__( 'No application can handle this request.' )
-						);
-					} else {
-						return Linking.openURL( src );
-					}
-				} )
-				.catch( () => {
-					Alert.alert(
-						__( 'Problem opening the audio' ),
-						__( 'An unknown error occurred. Please try again.' )
-					);
-				} );
-		}
-	};
-
-	const containerStyle = getStylesFromColorScheme(
-		styles.container,
-		styles.containerDark
-	);
-
-	const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
-
-	const iconDisabledStyle = getStylesFromColorScheme(
-		styles.iconDisabled,
-		styles.iconDisabledDark
-	);
-
-	const isDisabled = isUploadFailed || isUploadInProgress;
-
-	const finalIconStyle = {
-		...iconStyle,
-		...( isDisabled && iconDisabledStyle ),
-	};
-
-	const iconContainerStyle = getStylesFromColorScheme(
-		styles.iconContainer,
-		styles.iconContainerDark
-	);
-
-	const titleContainerStyle = {
-		...styles.titleContainer,
-		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
-	};
-
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-
-	const uploadFailedStyle = getStylesFromColorScheme(
-		styles.uploadFailed,
-		styles.uploadFailedDark
-	);
-
-	const subtitleStyle = getStylesFromColorScheme(
-		styles.subtitle,
-		styles.subtitleDark
-	);
-
-	const finalSubtitleStyle = {
-		...subtitleStyle,
-		...( isUploadFailed && uploadFailedStyle ),
-	};
-
-	const buttonBackgroundStyle = getStylesFromColorScheme(
-		styles.buttonBackground,
-		styles.buttonBackgroundDark
-	);
-
-	let title = '';
-	let extension = '';
-
-	if ( src ) {
-		const result = parseAudioUrl( src );
-		extension = result.extension;
-		title = result.title;
-	}
-
-	const getSubtitleValue = () => {
-		if ( isUploadInProgress ) {
-			return __( 'Uploading…' );
-		}
-		if ( isUploadFailed ) {
-			return __( 'Failed to insert audio file. Please tap for options.' );
-		}
-		return (
-			extension +
-			// translators: displays audio file extension. e.g. MP3 audio file
-			__( 'audio file' )
-		);
-	};
-
-	function onAudioUploadCancelDialog() {
-		if ( isUploadInProgress ) {
-			requestImageUploadCancelDialog( id );
-		} else if ( id && getProtocol( src ) === 'file:' ) {
-			requestImageFailedRetryDialog( id );
-		}
-	}
-
-	return (
-		<TouchableWithoutFeedback
-			accessible={ ! isSelected }
-			disabled={ ! isSelected }
-			onPress={ onAudioUploadCancelDialog }
-		>
-			<View style={ containerStyle }>
-				<View style={ iconContainerStyle }>
-					<Icon icon={ audio } style={ finalIconStyle } size={ 24 } />
-				</View>
-				<View style={ titleContainerStyle }>
-					<Text style={ titleStyle }>{ title }</Text>
-					<View style={ styles.subtitleContainer }>
-						{ isUploadFailed && (
-							<Icon
-								icon={ warning }
-								style={ {
-									...styles.errorIcon,
-									...uploadFailedStyle,
-								} }
-								size={ 16 }
-							/>
-						) }
-						<Text style={ finalSubtitleStyle }>
-							{ getSubtitleValue() }
-						</Text>
-					</View>
-				</View>
-				{ ! isDisabled && (
-					<TouchableWithoutFeedback
-						accessibilityLabel={ __( 'Audio Player' ) }
-						accessibilityRole={ 'button' }
-						accessibilityHint={ __(
-							'Double tap to listen the audio file'
-						) }
-						onPress={ onPressListen }
-					>
-						<View style={ buttonBackgroundStyle }>
-							<Text style={ styles.buttonText }>
-								{ __( 'OPEN' ) }
-							</Text>
-						</View>
-					</TouchableWithoutFeedback>
-				) }
-				{ isIOS && (
-					<VideoPlayer
-						source={ { uri: src } }
-						paused={ paused }
-						ref={ ( ref ) => {
-							this.player = ref;
-						} }
-						controls={ false }
-						ignoreSilentSwitch={ 'ignore' }
-						onFullscreenPlayerWillPresent={ () => {
-							setPaused( false );
-						} }
-						onFullscreenPlayerDidDismiss={ () => {
-							setPaused( true );
-						} }
-					/>
-				) }
-			</View>
-		</TouchableWithoutFeedback>
-	);
-}
-
-export default withPreferredColorScheme( Player );
diff --git a/packages/components/src/mobile/autocompletion-items.native.js b/packages/components/src/mobile/autocompletion-items.native.js
index 320dc6758ba5dd..9d010dc3a144eb 100644
--- a/packages/components/src/mobile/autocompletion-items.native.js
+++ b/packages/components/src/mobile/autocompletion-items.native.js
@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import { createSlotFill } from '../slot-fill';
 
 const { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' );
 
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/README.md b/packages/components/src/mobile/bottom-sheet-select-control/README.md
index ed940baa53409f..7d45b7abcabba1 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-select-control/README.md
@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{
diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
index cc0a340104f86c..0e0a19c12aed44 100644
--- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js
@@ -10,11 +10,16 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import BottomSheet from '../bottom-sheet';
+
+const EMPTY_OPTION = {
+	label: '',
+};
 
 const BottomSheetSelectControl = ( {
 	label,
@@ -22,6 +27,7 @@ const BottomSheetSelectControl = ( {
 	options: items,
 	onChange,
 	value: selectedValue,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -33,9 +39,9 @@ const BottomSheetSelectControl = ( {
 		};
 	};
 
-	const selectedOption = items.find(
-		( option ) => option.value === selectedValue
-	);
+	const selectedOption =
+		items.find( ( option ) => option.value === selectedValue ) ??
+		EMPTY_OPTION;
 
 	const goBack = () => {
 		setShowSubSheet( false );
@@ -56,9 +62,9 @@ const BottomSheetSelectControl = ( {
 					icon={ icon }
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityLabel={ sprintf(
-						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						// translators:  1: Select control button label e.g. "Button width". 2: Select control option value e.g: "Auto, 25%".
 						__( '%1$s. Currently selected: %2$s' ),
 						label,
 						selectedOption.label
@@ -68,8 +74,9 @@ const BottomSheetSelectControl = ( {
 						__( 'Navigates to select %s' ),
 						label
 					) }
+					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }
@@ -89,13 +96,13 @@ const BottomSheetSelectControl = ( {
 							label={ item.label }
 							icon={ item.icon }
 							onPress={ onChangeValue( item.value ) }
-							leftAlign={ true }
+							leftAlign
 							key={ index }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={
 								item.value === selectedValue
 									? sprintf(
-											// translators: %s: Select control option value e.g: "Auto, 25%".
+											// translators: %s: The selected option.
 											__( 'Selected: %s' ),
 											item.label
 									  )
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/README.md b/packages/components/src/mobile/bottom-sheet-text-control/README.md
index e23680f5ba2beb..1acc8598321d4b 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-text-control/README.md
@@ -64,7 +64,14 @@ A function that receives the value that's input into the text editor.
 
 #### placeholder
 
-The placeholder text that will display in the component's subsheet, when its text editor is empty.
+The placeholder text that will display in the component's cell and subsheet when there is no set value.
+
+-   Type: `String`
+-   Required: No
+
+### cellPlaceholder
+
+The placeholder text that will display in the component's cell when there is no set value. The `cellPlaceholder` will override the more generic placeholder prop when set, enabling the placeholders in the component's cell and subsheet to be different if desired.
 
 -   Type: `String`
 -   Required: No
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
index 820f8e16da2960..430981f8f9695a 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
@@ -10,16 +10,14 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	BottomSheet,
-	PanelBody,
-	FooterMessageControl,
-} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import PanelBody from '../../panel/body';
+import FooterMessageControl from '../../footer-message-control';
 
 const BottomSheetTextControl = ( {
 	initialValue,
@@ -28,6 +26,8 @@ const BottomSheetTextControl = ( {
 	label,
 	icon,
 	footerNote,
+	cellPlaceholder,
+	disabled,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -57,12 +57,13 @@ const BottomSheetTextControl = ( {
 			navigationButton={
 				<BottomSheet.Cell
 					icon={ icon }
-					placeholder={ placeholder }
 					label={ label }
 					onPress={ openSubSheet }
 					value={ initialValue || '' }
+					placeholder={ cellPlaceholder || placeholder || '' }
+					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }
@@ -79,11 +80,11 @@ const BottomSheetTextControl = ( {
 						label={ label }
 						onChangeText={ ( text ) => onChange( text ) }
 						defaultValue={ initialValue }
-						multiline={ true }
+						multiline
 						placeholder={ placeholder }
-						placeholderTextColor={ '#87a6bc' }
+						placeholderTextColor="#87a6bc"
 						style={ textEditorStyle }
-						textAlignVertical={ 'top' }
+						textAlignVertical="top"
 					/>
 				</PanelBody>
 			</>
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js
index 9e89c285b25347..5995490239d5d5 100644
--- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js
+++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js
@@ -6,7 +6,7 @@ import { createContext } from '@wordpress/element';
 // Navigation context in BottomSheet is necessary for controlling the
 // height of navigation container.
 export const BottomSheetNavigationContext = createContext( {
-	currentHeight: 1,
+	currentHeight: { value: 0 },
 	setHeight: () => {},
 } );
 
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js
index 69534681dfa051..5f87ff80194b81 100644
--- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js
+++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js
@@ -1,15 +1,19 @@
 /**
  * External dependencies
  */
-import { View, Easing } from 'react-native';
 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import Animated, {
+	Easing,
+	useAnimatedStyle,
+	useSharedValue,
+	withTiming,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
 import {
-	useState,
 	useContext,
 	useMemo,
 	useCallback,
@@ -23,11 +27,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { performLayoutAnimation } from '../../layout-animation';
 import {
 	BottomSheetNavigationContext,
 	BottomSheetNavigationProvider,
 } from './bottom-sheet-navigation-context';
+import { BottomSheetContext } from '../bottom-sheet-context';
 
 import styles from './styles.scss';
 
@@ -55,9 +59,11 @@ const options = {
 	headerShown: false,
 	gestureEnabled: false,
 	cardStyleInterpolator: fadeConfig,
+	keyboardHandlingEnabled: false,
 };
 
-const ANIMATION_DURATION = 190;
+const HEIGHT_ANIMATION_DURATION = 300;
+const DEFAULT_HEIGHT = 1;
 
 function BottomSheetNavigationContainer( {
 	children,
@@ -65,11 +71,14 @@ function BottomSheetNavigationContainer( {
 	main,
 	theme,
 	style,
+	testID,
 } ) {
 	const Stack = useRef( createStackNavigator() ).current;
-	const context = useContext( BottomSheetNavigationContext );
-	const [ currentHeight, setCurrentHeight ] = useState(
-		context.currentHeight || 1
+	const navigationContext = useContext( BottomSheetNavigationContext );
+	const { maxHeight: sheetMaxHeight, isMaxHeightSet: isSheetMaxHeightSet } =
+		useContext( BottomSheetContext );
+	const currentHeight = useSharedValue(
+		navigationContext.currentHeight?.value || DEFAULT_HEIGHT
 	);
 
 	const backgroundStyle = usePreferredColorSchemeStyle(
@@ -77,47 +86,49 @@ function BottomSheetNavigationContainer( {
 		styles.backgroundDark
 	);
 
-	const _theme = theme || {
-		...DefaultTheme,
-		colors: {
-			...DefaultTheme.colors,
-			background: backgroundStyle.backgroundColor,
-		},
-	};
+	const defaultTheme = useMemo(
+		() => ( {
+			...DefaultTheme,
+			colors: {
+				...DefaultTheme.colors,
+				background: backgroundStyle.backgroundColor,
+			},
+		} ),
+		[ backgroundStyle.backgroundColor ]
+	);
+	const _theme = theme || defaultTheme;
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight.
 			if (
-				typeof height === 'string' &&
-				typeof height !== typeof currentHeight
+				height > DEFAULT_HEIGHT &&
+				Math.round( height ) !== Math.round( currentHeight.value )
 			) {
-				performLayoutAnimation( ANIMATION_DURATION );
-				setCurrentHeight( height );
-
-				return;
-			}
-
-			if (
-				height > 1 &&
-				Math.round( height ) !== Math.round( currentHeight )
-			) {
-				if ( currentHeight === 1 ) {
-					setCurrentHeight( height );
-				} else if ( animate ) {
-					performLayoutAnimation( ANIMATION_DURATION );
-					setCurrentHeight( height );
+				// If max height is set in the bottom sheet, we clamp
+				// the new height using that value.
+				const newHeight = isSheetMaxHeightSet
+					? Math.min( sheetMaxHeight, height )
+					: height;
+				const shouldAnimate =
+					animate && currentHeight.value !== DEFAULT_HEIGHT;
+
+				if ( shouldAnimate ) {
+					currentHeight.value = withTiming( newHeight, {
+						duration: HEIGHT_ANIMATION_DURATION,
+						easing: Easing.out( Easing.cubic ),
+					} );
 				} else {
-					setCurrentHeight( height );
+					currentHeight.value = newHeight;
 				}
 			}
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ currentHeight ]
+		[ animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight ]
 	);
 
+	const animatedStyles = useAnimatedStyle( () => ( {
+		height: currentHeight.value,
+	} ) );
+
 	const screens = useMemo( () => {
 		return Children.map( children, ( child ) => {
 			let screen = child;
@@ -136,38 +147,47 @@ function BottomSheetNavigationContainer( {
 				/>
 			);
 		} );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ children ] );
+	}, [ children, main ] );
 
 	return useMemo( () => {
 		return (
-			<View style={ [ style, { height: currentHeight } ] }>
+			<Animated.View
+				style={ [ style, animatedStyles ] }
+				testID={ testID }
+			>
 				<BottomSheetNavigationProvider
-					value={ {
-						setHeight,
-						currentHeight,
-					} }
+					value={ { setHeight, currentHeight } }
 				>
 					{ main ? (
 						<NavigationContainer theme={ _theme }>
-							<Stack.Navigator screenOptions={ options }>
+							<Stack.Navigator
+								screenOptions={ options }
+								detachInactiveScreens={ false }
+							>
 								{ screens }
 							</Stack.Navigator>
 						</NavigationContainer>
 					) : (
-						<Stack.Navigator screenOptions={ options }>
+						<Stack.Navigator
+							screenOptions={ options }
+							detachInactiveScreens={ false }
+						>
 							{ screens }
 						</Stack.Navigator>
 					) }
 				</BottomSheetNavigationProvider>
-			</View>
+			</Animated.View>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ currentHeight, _theme ] );
+	}, [
+		_theme,
+		animatedStyles,
+		currentHeight,
+		main,
+		screens,
+		setHeight,
+		style,
+		testID,
+	] );
 }
 
 export default BottomSheetNavigationContainer;
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
index 059adb42c7089a..8c43bc85612762 100644
--- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
+++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js
@@ -6,19 +6,24 @@ import {
 	useNavigation,
 	useFocusEffect,
 } from '@react-navigation/native';
-import { View, ScrollView, TouchableHighlight } from 'react-native';
+import {
+	ScrollView,
+	TouchableHighlight,
+	useWindowDimensions,
+	View,
+} from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { BottomSheetContext } from '@wordpress/components';
-import { debounce } from '@wordpress/compose';
+
 import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
+import { BottomSheetContext } from '../bottom-sheet-context';
 import styles from './styles.scss';
 
 const BottomSheetNavigationScreen = ( {
@@ -29,7 +34,7 @@ const BottomSheetNavigationScreen = ( {
 	name,
 } ) => {
 	const navigation = useNavigation();
-	const heightRef = useRef( { maxHeight: 0 } );
+	const maxHeight = useRef( 0 );
 	const isFocused = useIsFocused();
 	const {
 		onHandleHardwareButtonPress,
@@ -38,16 +43,10 @@ const BottomSheetNavigationScreen = ( {
 		listProps,
 		safeAreaBottomInset,
 	} = useContext( BottomSheetContext );
+	const { height: windowHeight } = useWindowDimensions();
 
 	const { setHeight } = useContext( BottomSheetNavigationContext );
 
-	// Disable reason: deferring this refactor to the native team.
-	// see https://github.com/WordPress/gutenberg/pull/41166
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const setHeightDebounce = useCallback( debounce( setHeight, 10 ), [
-		setHeight,
-	] );
-
 	useFocusEffect(
 		useCallback( () => {
 			onHandleHardwareButtonPress( () => {
@@ -66,32 +65,29 @@ const BottomSheetNavigationScreen = ( {
 			 * passed to useCallback here is what prevents erroneous callback
 			 * replacements, but leveraging memoization to achieve this is brittle and
 			 * explicitly discouraged in the React documentation.
-			 * https://reactjs.org/docs/hooks-reference.html#usememo
+			 * https://react.dev/reference/react/useMemo
 			 *
 			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
 			 * callbacks triggered based upon which screen is currently active.
 			 *
 			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
+			 *
+			 * Also see https://github.com/WordPress/gutenberg/pull/41166.
 			 */
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
 		}, [] )
 	);
 
 	useFocusEffect(
 		useCallback( () => {
 			if ( fullScreen ) {
-				setHeight( '100%' );
+				setHeight( windowHeight );
 				setIsFullScreen( true );
-			} else if ( heightRef.current.maxHeight !== 0 ) {
+			} else if ( maxHeight.current !== 0 ) {
 				setIsFullScreen( false );
-				setHeight( heightRef.current.maxHeight );
+				setHeight( maxHeight.current );
 			}
 			return () => {};
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [ setHeight ] )
+		}, [ fullScreen, setHeight, setIsFullScreen, windowHeight ] )
 	);
 
 	const onLayout = ( { nativeEvent } ) => {
@@ -99,10 +95,9 @@ const BottomSheetNavigationScreen = ( {
 			return;
 		}
 		const { height } = nativeEvent.layout;
-
-		if ( heightRef.current.maxHeight !== height && isFocused ) {
-			heightRef.current.maxHeight = height;
-			setHeightDebounce( height );
+		if ( maxHeight.current !== height && isFocused ) {
+			maxHeight.current = height;
+			setHeight( height );
 		}
 	};
 
@@ -135,9 +130,7 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		children,
 		isFocused,
diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js
index 2b4d7cc5743f13..e0ebd90eb6c1e4 100644
--- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js
+++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import { render, fireEvent, waitFor, act } from 'test/helpers';
+import { act, render, fireEvent, withReanimatedTimer } from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -10,11 +10,8 @@ import { useNavigation } from '@react-navigation/native';
  */
 import NavigationContainer from '../navigation-container';
 import NavigationScreen from '../navigation-screen';
-import { performLayoutAnimation } from '../../../layout-animation';
 
-jest.mock( '../../../layout-animation', () => ( {
-	performLayoutAnimation: jest.fn(),
-} ) );
+const WINDOW_HEIGHT = 1000;
 
 const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	const navigation = useNavigation();
@@ -27,143 +24,174 @@ const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	);
 };
 
+const fireLayoutEvent = ( element, layout ) =>
+	fireEvent( element, 'layout', {
+		nativeEvent: { layout },
+	} );
+
 beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+	jest.spyOn(
+		require( 'react-native' ),
+		'useWindowDimensions'
+	).mockReturnValue( { width: 900, height: WINDOW_HEIGHT } );
 } );
 
-afterAll( () => {
-	jest.runOnlyPendingTimers();
-	jest.useRealTimers();
-} );
+it( 'animates height transitioning from non-full-screen to non-full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen name="test-screen-2" navigateTo="test-screen-1" />
+			</NavigationContainer>
+		);
 
-it( 'animates height transitioning from non-full-screen to full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-1"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		act( () => jest.advanceTimersByTime( 1 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		const screen2Layout = { height: 200 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-2' ),
+			screen2Layout
+		);
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		act( () => jest.advanceTimersByTime( 301 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen2Layout );
+	} ) );
+
+it( 'animates height transitioning from non-full-screen to full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
+
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
+
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		act( () => jest.advanceTimersByTime( 1 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		act( () => jest.advanceTimersByTime( 301 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
-	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+	} ) );
 
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
-} );
+it( 'animates height transitioning from full-screen to non-full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
 
-it( 'animates height transitioning from full-screen to non-full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-1"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		act( () => jest.advanceTimersByTime( 1 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		act( () => jest.advanceTimersByTime( 301 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
-	// Navigate to screen 1
-	fireEvent.press(
-		// Use custom waitFor due to https://github.com/callstack/react-native-testing-library/issues/379
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
-	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-1/ ) );
 
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 2 );
-} );
+		// Navigate to screen 1
+		fireEvent.press( await screen.findByText( /test-screen-2/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		act( () => jest.advanceTimersByTime( 301 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+	} ) );
 
-it( 'does not animate height transitioning from full-screen to full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-3"
-				fullScreen
-			/>
-			<TestScreen
-				name="test-screen-3"
-				navigateTo="test-screen-2"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+it( 'does not animate height transitioning from full-screen to full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen
+					name="test-screen-1"
+					navigateTo="test-screen-2"
+					fullScreen
+				/>
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		act( () => jest.advanceTimersByTime( 1 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
-	// Navigate to screen 3
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
-	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-3/ ) )
-	);
-	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
 
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
-} );
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// We wait some milliseconds to check if height has changed.
+		act( () => jest.advanceTimersByTime( 10 ) );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
+		} );
+	} ) );
diff --git a/packages/components/src/mobile/bottom-sheet/button.native.js b/packages/components/src/mobile/bottom-sheet/button.native.js
index a9c88f18fb770b..205ee43e5ac096 100644
--- a/packages/components/src/mobile/bottom-sheet/button.native.js
+++ b/packages/components/src/mobile/bottom-sheet/button.native.js
@@ -9,11 +9,7 @@ import { TouchableOpacity, View, Text } from 'react-native';
 import styles from './styles.scss';
 
 const BottomSheetButton = ( { onPress, disabled, text, color } ) => (
-	<TouchableOpacity
-		accessible={ true }
-		onPress={ onPress }
-		disabled={ disabled }
-	>
+	<TouchableOpacity accessible onPress={ onPress } disabled={ disabled }>
 		<View style={ { flexDirection: 'row', justifyContent: 'center' } }>
 			<Text style={ { ...styles.buttonText, color } }>{ text }</Text>
 		</View>
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 90757bcc1811e8..6618566837cfc9 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -10,12 +10,10 @@ import {
 	AccessibilityInfo,
 	Platform,
 } from 'react-native';
-import { isEmpty, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { check } from '@wordpress/icons';
 import { Component } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -27,6 +25,8 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
+import LockIcon from './lock-icon';
+import Icon from '../../icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -58,7 +58,7 @@ class BottomSheetCell extends Component {
 
 		AccessibilityInfo.isScreenReaderEnabled().then(
 			( isScreenReaderEnabled ) => {
-				if ( this.isCurrent ) {
+				if ( this.isCurrent && isScreenReaderEnabled ) {
 					this.setState( { isScreenReaderEnabled } );
 				}
 			}
@@ -93,6 +93,8 @@ class BottomSheetCell extends Component {
 			accessibilityHint,
 			accessibilityRole,
 			disabled = false,
+			disabledStyle = styles.cellDisabled,
+			showLockIcon = true,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -224,27 +226,38 @@ class BottomSheetCell extends Component {
 				styles.cellValue,
 				styles.cellTextDark
 			);
-			const finalStyle = {
+			const textInputStyle = {
 				...cellValueStyle,
 				...valueStyle,
 				...styleRTL,
 			};
+			const placeholderTextColor = disabled
+				? this.props.getStylesFromColorScheme(
+						styles.placeholderColorDisabled,
+						styles.placeholderColorDisabledDark
+				  ).color
+				: styles.placeholderColor.color;
+			const textStyle = {
+				...( disabled && styles.cellDisabled ),
+				...cellValueStyle,
+				...valueStyle,
+			};
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
 			// we show the TextInput just when the user wants to edit the value,
 			// and the Text component to display it.
 			// We also show the TextInput to display placeholder.
-			const shouldShowPlaceholder = isValueEditable && value === '';
+			const shouldShowPlaceholder = isInteractive && value === '';
 			return this.state.isEditingValue || shouldShowPlaceholder ? (
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }
 					numberOfLines={ 1 }
-					style={ finalStyle }
+					style={ textInputStyle }
 					value={ value }
 					placeholder={ valuePlaceholder }
-					placeholderTextColor={ '#87a6bc' }
+					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
-					editable={ isValueEditable }
+					editable={ isValueEditable && ! disabled }
 					pointerEvents={
 						this.state.isEditingValue ? 'auto' : 'none'
 					}
@@ -252,13 +265,14 @@ class BottomSheetCell extends Component {
 					onBlur={ finishEditing }
 					onSubmitEditing={ onSubmit }
 					keyboardType={ this.typeToKeyboardType( type, step ) }
+					disabled={ disabled }
 					{ ...valueProps }
 				/>
 			) : (
 				<Text
-					style={ { ...cellValueStyle, ...valueStyle } }
+					style={ textStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ value }
 				</Text>
@@ -273,8 +287,8 @@ class BottomSheetCell extends Component {
 				return accessibilityLabel || label;
 			}
 
-			if ( isEmpty( value ) ) {
-				return isEmpty( help )
+			if ( ! value ) {
+				return ! help
 					? sprintf(
 							/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
 							_x( '%s. Empty', 'inline textinput cell' ),
@@ -288,7 +302,7 @@ class BottomSheetCell extends Component {
 							help
 					  );
 			}
-			return isEmpty( help )
+			return ! help
 				? sprintf(
 						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
@@ -323,7 +337,7 @@ class BottomSheetCell extends Component {
 		const opacity =
 			activeOpacity !== undefined
 				? activeOpacity
-				: get( platformStyles, 'activeOpacity.opacity' );
+				: platformStyles.activeOpacity?.opacity;
 
 		return (
 			<TouchableRipple
@@ -362,6 +376,7 @@ class BottomSheetCell extends Component {
 									] }
 								>
 									<Icon
+										lock
 										icon={ icon }
 										size={ 24 }
 										fill={
@@ -404,7 +419,7 @@ class BottomSheetCell extends Component {
 						{ customActionButton && (
 							<TouchableOpacity
 								onPress={ handler }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 							>
 								<Text style={ resetButtonStyle }>
 									{ title }
@@ -416,10 +431,24 @@ class BottomSheetCell extends Component {
 						<Icon
 							icon={ check }
 							fill={ platformStyles.isSelected.color }
+							testID="bottom-sheet-cell-selected-icon"
 						/>
 					) }
 					{ showValue && getValueComponent() }
-					{ children }
+					<View
+						style={ [
+							disabled && disabledStyle,
+							styles.cellRowContainer,
+						] }
+						pointerEvents={ disabled ? 'none' : 'auto' }
+					>
+						{ children }
+					</View>
+					{ disabled && showLockIcon && (
+						<View style={ styles.cellDisabled }>
+							<LockIcon />
+						</View>
+					) }
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>
diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js
index 2783c23ce21def..a03b968e3b03ef 100644
--- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js
@@ -3,31 +3,33 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
-import { ColorIndicator } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import Cell from './cell';
 import styles from './styles.scss';
+import ColorIndicator from '../../color-indicator';
 
 export default function BottomSheetColorCell( props ) {
-	const { color, withColorIndicator = true, ...cellProps } = props;
+	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
 
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityHint={
 				/* translators: accessibility text (hint for moving to color settings) */
 				__( 'Double tap to go to color settings' )
 			}
 			editable={ false }
+			disabled={ disabled }
 			value={ withColorIndicator && ! color && __( 'Default' ) }
 		>
 			{ withColorIndicator && color && (
 				<ColorIndicator color={ color } style={ styles.colorCircle } />
 			) }
-			<Icon icon={ chevronRight }></Icon>
+			{ disabled ? null : <Icon icon={ chevronRight }></Icon> }
 		</Cell>
 	);
 }
diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
index 343363a2b07fe4..17001242b30a2b 100644
--- a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js
@@ -13,8 +13,8 @@ function FooterMessageCell( { textAlign = 'left', ...props } ) {
 		<Cell
 			{ ...props }
 			editable={ false }
-			value={ '' }
-			accessibilityRole={ 'text' }
+			value=""
+			accessibilityRole="text"
 			labelStyle={ [ styles.footerMessageCell, { textAlign } ] }
 		/>
 	);
diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
index 27eaf1b462aca1..017956c6405d92 100644
--- a/packages/components/src/mobile/bottom-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -19,7 +19,10 @@ import SafeArea from 'react-native-safe-area';
 /**
  * WordPress dependencies
  */
-import { subscribeAndroidModalClosed } from '@wordpress/react-native-bridge';
+import {
+	subscribeAndroidModalClosed,
+	showAndroidSoftKeyboard,
+} from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 
@@ -215,6 +218,11 @@ class BottomSheet extends Component {
 		if ( this.androidModalClosedSubscription ) {
 			this.androidModalClosedSubscription.remove();
 		}
+
+		if ( this.props.isVisible ) {
+			showAndroidSoftKeyboard();
+		}
+
 		if ( this.safeAreaEventSubscription === null ) {
 			return;
 		}
@@ -315,6 +323,9 @@ class BottomSheet extends Component {
 	onDismiss() {
 		const { onDismiss } = this.props;
 
+		// Restore Keyboard Visibility
+		showAndroidSoftKeyboard();
+
 		if ( onDismiss ) {
 			onDismiss();
 		}
@@ -368,6 +379,7 @@ class BottomSheet extends Component {
 	onHardwareButtonPress() {
 		const { onClose } = this.props;
 		const { handleHardwareButtonPress } = this.state;
+
 		if ( handleHardwareButtonPress && handleHardwareButtonPress() ) {
 			return;
 		}
@@ -527,6 +539,9 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
+				testID="bottom-sheet"
+				hardwareAccelerated
+				useNativeDriverForBackdrop
 				{ ...rest }
 			>
 				<KeyboardAvoidingView
@@ -575,6 +590,8 @@ class BottomSheet extends Component {
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
 								safeAreaBottomInset,
+								maxHeight,
+								isMaxHeightSet,
 							} }
 						>
 							{ hasNavigation ? (
diff --git a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
index f183f8f291b5b4..46029a7585f54a 100644
--- a/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js
@@ -64,7 +64,7 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 			{ ...props }
 			icon={ icons[ type ] || empty }
 			onPress={ pickLink }
-			separatorType={ 'none' }
+			separatorType="none"
 			cellContainerStyle={ suggestionStyles.itemContainerStyle }
 			labelStyle={ suggestionStyles.hidden }
 			valueStyle={ suggestionStyles.hidden }
@@ -73,14 +73,14 @@ function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 				<Text
 					style={ titleStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ title }
 				</Text>
 				<Text
 					style={ summaryStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode={ 'middle' }
+					ellipsizeMode="middle"
 				>
 					{ summary }
 				</Text>
diff --git a/packages/components/src/mobile/bottom-sheet/lock-icon/index.native.js b/packages/components/src/mobile/bottom-sheet/lock-icon/index.native.js
new file mode 100644
index 00000000000000..2d281e6bc89eaf
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/lock-icon/index.native.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+export default function LockIcon() {
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
+	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/lock-icon/styles.native.scss b/packages/components/src/mobile/bottom-sheet/lock-icon/styles.native.scss
new file mode 100644
index 00000000000000..fccde19eb1c21f
--- /dev/null
+++ b/packages/components/src/mobile/bottom-sheet/lock-icon/styles.native.scss
@@ -0,0 +1,8 @@
+.icon {
+	color: $gray-dark;
+	margin-left: 6px;
+}
+
+.icon--dark {
+	color: $gray-light;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
index 6b11f30959fe5d..6a13bca18e9efb 100644
--- a/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
+++ b/packages/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js
@@ -18,7 +18,7 @@ function ActionButton( {
 	return (
 		<TouchableWithoutFeedback
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 			accessibilityLabel={ accessibilityLabel }
 			accessibilityHint={ accessibilityHint }
 		>
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/bottom-sheet/radio-cell.native.js b/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
index db9793ff76e0b5..c2b5df004d5c31 100644
--- a/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/radio-cell.native.js
@@ -10,7 +10,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-export default function BottomSheetColorCell( props ) {
+export default function BottomSheetRadioCell( props ) {
 	const { selected, ...cellProps } = props;
 
 	const selectedIconStyle = usePreferredColorSchemeStyle(
@@ -21,14 +21,15 @@ export default function BottomSheetColorCell( props ) {
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityRole={ 'radio' }
+			accessibilityRole="radio"
 			accessibilityState={ { selected } }
 			accessibilityHint={
 				/* translators: accessibility text (hint for selecting option) */
 				__( 'Double tap to select the option' )
 			}
 			editable={ false }
-			value={ '' }
+			value=""
+			showLockIcon={ selected }
 		>
 			{ selected && (
 				<Icon icon={ check } style={ selectedIconStyle }></Icon>
diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
index 7d7bafd4acd0cd..afa25683e4e3e8 100644
--- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js
@@ -15,6 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
+import LockIcon from './lock-icon';
 import styles from './range-cell.scss';
 import RangeTextInput from './range-text-input';
 import { toFixed } from '../utils';
@@ -164,7 +165,7 @@ class BottomSheetRangeCell extends Component {
 
 		const getAccessibilityLabel = () => {
 			return sprintf(
-				/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+				/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 				__( '%1$s. %2$s is %3$s %4$s.' ),
 				cellProps.label,
 				settingLabel,
@@ -180,7 +181,7 @@ class BottomSheetRangeCell extends Component {
 
 		return (
 			<View
-				accessible={ true }
+				accessible
 				accessibilityRole="adjustable"
 				accessibilityActions={ [
 					{ name: 'increment' },
@@ -218,6 +219,8 @@ class BottomSheetRangeCell extends Component {
 						activeOpacity={ 1 }
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
+						disabled={ disabled }
+						showLockIcon={ false }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -225,7 +228,7 @@ class BottomSheetRangeCell extends Component {
 								testID={ `Slider ${ cellProps.label }` }
 								value={ sliderValue }
 								defaultValue={ defaultValue }
-								disabled={ disabled }
+								disabled={ disabled && ! isIOS }
 								step={ step }
 								minimumValue={ minimumValue }
 								maximumValue={ maximumValue }
@@ -259,6 +262,7 @@ class BottomSheetRangeCell extends Component {
 									{ children }
 								</RangeTextInput>
 							) }
+							{ disabled && <LockIcon /> }
 						</View>
 					</Cell>
 				</View>
diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js
index e6a003a915d454..6e5239687c5aa4 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/index.native.js
@@ -144,6 +144,7 @@ class BottomSheetStepperCell extends Component {
 			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
+			disabled,
 		} = this.props;
 		const { inputValue } = this.state;
 		const isMinValue = value === min;
@@ -158,7 +159,7 @@ class BottomSheetStepperCell extends Component {
 		};
 
 		const accessibilityLabel = sprintf(
-			/* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
+			/* translators: accessibility text. Inform about current value. 1: Control label. 2: setting label (example: width). 3: Current value. 4: value measurement unit (example: pixels) */
 			__( '%1$s. %2$s is %3$s %4$s.' ),
 			label,
 			settingLabel,
@@ -173,7 +174,7 @@ class BottomSheetStepperCell extends Component {
 
 		return (
 			<View
-				accessible={ true }
+				accessible
 				accessibilityRole="adjustable"
 				accessibilityLabel={ accessibilityLabel }
 				accessibilityHint={ getAccessibilityHint() }
@@ -213,8 +214,9 @@ class BottomSheetStepperCell extends Component {
 						icon={ icon }
 						label={ label }
 						labelStyle={ labelStyle }
-						leftAlign={ true }
+						leftAlign
 						separatorType={ separatorType }
+						disabled={ disabled }
 					>
 						<View style={ preview && containerStyle }>
 							{ preview }
diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
index 37f72425640fe0..ce0fbba03eae88 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js
@@ -56,7 +56,7 @@ function Stepper( {
 			) }
 			{ children }
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }
diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
index fa2318a9fd7282..3cd25ab6b7bd6c 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
@@ -49,7 +49,7 @@ function Stepper( {
 				<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
-				testID={ 'Increment' }
+				testID="Increment"
 				disabled={ isMaxValue }
 				onPressIn={ onPressInIncrement }
 				onPressOut={ onPressOut }
diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
index 4d00d452304615..5292b04c13731a 100644
--- a/packages/components/src/mobile/bottom-sheet/styles.native.scss
+++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -1,5 +1,7 @@
 //Bottom Sheet
 
+$cell-disable-opacity: 0.38;
+
 .bottomModal {
 	justify-content: flex-end;
 	margin: 0;
@@ -284,7 +286,15 @@
 
 // used in both light and dark modes
 .placeholderColor {
-	color: #87a6bc;
+	color: $gray;
+}
+
+.placeholderColorDisabled {
+	color: rgba($gray-dark, $cell-disable-opacity);
+}
+
+.placeholderColorDisabledDark {
+	color: rgba($white, $cell-disable-opacity);
 }
 
 .applyButton {
@@ -317,3 +327,7 @@
 .cellSubLabelTextDark {
 	color: $sub-heading-dark;
 }
+
+.cellDisabled {
+	opacity: $cell-disable-opacity;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
index 1e60bb74ac5347..4953f294d40970 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md
@@ -8,13 +8,13 @@ BottomSheetSubSheet allows for adding controls inside the React Native bottom sh
 /**
  * External dependencies
  */
+import { useState } from 'react';
 import { SafeAreaView, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { BottomSheet } from '@wordpress/components';
 
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
index 64e3f609d167c3..14040be0cc239e 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
@@ -7,7 +7,12 @@ import { SafeAreaView } from 'react-native';
  * WordPress dependencies
  */
 import { Children, useEffect, useContext } from '@wordpress/element';
-import { createSlotFill, BottomSheetContext } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { BottomSheetContext } from '../bottom-sheet-context';
+import { createSlotFill } from '../../../slot-fill';
 
 const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
 
@@ -23,9 +28,7 @@ const BottomSheetSubSheet = ( {
 		if ( showSheet ) {
 			setIsFullScreen( isFullScreen );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ showSheet, isFullScreen ] );
 
 	return (
diff --git a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
index 9dcaf794df750b..3e00756b1a7dc5 100644
--- a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
@@ -12,8 +12,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
+const EMPTY_STYLE = {};
+
 export default function BottomSheetSwitchCell( props ) {
-	const { value, onValueChange, ...cellProps } = props;
+	const { value, onValueChange, disabled, ...cellProps } = props;
 
 	const onPress = () => {
 		onValueChange( ! value );
@@ -52,16 +54,22 @@ export default function BottomSheetSwitchCell( props ) {
 		<Cell
 			{ ...cellProps }
 			accessibilityLabel={ getAccessibilityLabel() }
-			accessibilityRole={ 'none' }
+			accessibilityRole="none"
 			accessibilityHint={
 				/* translators: accessibility text (hint for switches) */
 				__( 'Double tap to toggle setting' )
 			}
 			onPress={ onPress }
 			editable={ false }
-			value={ '' }
+			value=""
+			disabled={ disabled }
+			disabledStyle={ EMPTY_STYLE }
 		>
-			<Switch value={ value } onValueChange={ onValueChange } />
+			<Switch
+				value={ value }
+				onValueChange={ onValueChange }
+				disabled={ disabled }
+			/>
 		</Cell>
 	);
 }
diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js
index 171c4a011a7fe2..c7956df0e935dd 100644
--- a/packages/components/src/mobile/color-settings/index.native.js
+++ b/packages/components/src/mobile/color-settings/index.native.js
@@ -7,7 +7,6 @@ import { useRoute } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { memo, useEffect, useContext } from '@wordpress/element';
-import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,6 +14,8 @@ import { BottomSheetContext, BottomSheet } from '@wordpress/components';
 import PickerScreen from './picker-screen';
 import GradientPickerScreen from './gradient-picker-screen';
 import PaletteScreen from './palette.screen';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 import { colorsUtils } from './utils';
 
@@ -34,9 +35,7 @@ const ColorSettingsMemo = memo(
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
 			onHandleClosingBottomSheet( null );
-			// Disable reason: deferring this refactor to the native team.
-			// see https://github.com/WordPress/gutenberg/pull/41166
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+			// See https://github.com/WordPress/gutenberg/pull/41166
 		}, [] );
 		return (
 			<BottomSheet.NavigationContainer>
diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js
index 021df19ee4db59..a780a4295dfba5 100644
--- a/packages/components/src/mobile/color-settings/palette.screen.native.js
+++ b/packages/components/src/mobile/color-settings/palette.screen.native.js
@@ -9,12 +9,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { useState, useContext } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	ColorControl,
-	PanelBody,
-	BottomSheetContext,
-	useMobileGlobalStylesColors,
-} from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
 
 /**
@@ -25,11 +19,13 @@ import ColorIndicator from '../../color-indicator';
 import NavBar from '../bottom-sheet/nav-bar';
 import SegmentedControls from '../segmented-control';
 import { colorsUtils } from './utils';
+import PanelBody from '../../panel/body';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
+import ColorControl from '../../color-control';
 
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
-const THEME_PALETTE_NAME = 'Theme';
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -48,7 +44,6 @@ const PaletteScreen = () => {
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
 	const isGradientColor = isGradient( currentValue );
 	const selectedSegmentIndex = isGradientColor ? 1 : 0;
-	const allAvailableColors = useMobileGlobalStylesColors();
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
@@ -57,6 +52,10 @@ const PaletteScreen = () => {
 	const currentSegmentColors = ! isGradientSegment
 		? defaultSettings.colors
 		: defaultSettings.gradients;
+	const allAvailableColors = defaultSettings?.allAvailableColors || [];
+	const allAvailableGradients = currentSegmentColors
+		.flatMap( ( { gradients } ) => gradients )
+		.filter( Boolean );
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -78,22 +77,15 @@ const PaletteScreen = () => {
 		setCurrentValue( color );
 		if ( isSolidSegment && onColorChange && onGradientChange ) {
 			onColorChange( color );
-			onGradientChange( '' );
 		} else if ( isSolidSegment && onColorChange ) {
 			onColorChange( color );
 		} else if ( ! isSolidSegment && onGradientChange ) {
 			onGradientChange( color );
-			onColorChange( '' );
 		}
 	};
 
 	function onClear() {
 		setCurrentValue( undefined );
-		if ( isSolidSegment ) {
-			onColorChange( '' );
-		} else {
-			onGradientChange( '' );
-		}
 
 		if ( onColorCleared ) {
 			onColorCleared();
@@ -117,7 +109,11 @@ const PaletteScreen = () => {
 
 	function getClearButton() {
 		return (
-			<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>
+			<TouchableWithoutFeedback
+				accessibilityLabel={ __( 'Clear selected color' ) }
+				onPress={ onClear }
+				hitSlop={ HIT_SLOP }
+			>
 				<View style={ styles.clearButtonContainer }>
 					<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>
 				</View>
@@ -191,10 +187,10 @@ const PaletteScreen = () => {
 						colors: palette.colors,
 						gradients: palette.gradients,
 						allColors: allAvailableColors,
+						allGradients: allAvailableGradients,
 					};
-					const enableCustomColor =
-						! isGradientSegment &&
-						palette.name === THEME_PALETTE_NAME;
+					// Limit to show the custom indicator to the first available palette
+					const enableCustomColor = paletteKey === 0;
 
 					return (
 						<ColorPalette
diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js
index f8626a67338a42..e924580d939794 100644
--- a/packages/components/src/mobile/color-settings/picker-screen.native.js
+++ b/packages/components/src/mobile/color-settings/picker-screen.native.js
@@ -7,12 +7,12 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { useContext, useMemo } from '@wordpress/element';
-import { BottomSheetContext } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '../../color-picker';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 const PickerScreen = () => {
 	const route = useRoute();
@@ -43,9 +43,7 @@ const PickerScreen = () => {
 				onHandleHardwareButtonPress={ onHandleHardwareButtonPress }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [
 		setColor,
 		currentValue,
diff --git a/packages/components/src/mobile/color-settings/utils.native.js b/packages/components/src/mobile/color-settings/utils.native.js
index c18a6503e5973f..87ad346c8ec3a6 100644
--- a/packages/components/src/mobile/color-settings/utils.native.js
+++ b/packages/components/src/mobile/color-settings/utils.native.js
@@ -28,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
+	segments: [ __( 'Color' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,
diff --git a/packages/components/src/mobile/focal-point-settings-panel/index.native.js b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
index c9b87a4793cdb4..0aefdc6188c22c 100644
--- a/packages/components/src/mobile/focal-point-settings-panel/index.native.js
+++ b/packages/components/src/mobile/focal-point-settings-panel/index.native.js
@@ -9,13 +9,14 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  */
 import { __ } from '@wordpress/i18n';
 import { memo, useContext, useState, useCallback } from '@wordpress/element';
-import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
+import FocalPointPicker from '../../focal-point-picker';
 
 const FocalPointSettingsPanelMemo = memo(
 	( {
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
deleted file mode 100644
index c16843b4b3f158..00000000000000
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	BLOCK_STYLE_ATTRIBUTES,
-	getBlockPaddings,
-	getBlockColors,
-	getBlockTypography,
-} from './utils';
-
-const GlobalStylesContext = createContext( { style: {} } );
-
-GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
-
-export const getMergedGlobalStyles = (
-	baseGlobalStyles,
-	globalStyle,
-	wrapperPropsStyle,
-	blockAttributes,
-	defaultColors,
-	blockName,
-	fontSizes
-) => {
-	const baseGlobalColors = {
-		baseColors: baseGlobalStyles || {},
-	};
-	const blockStyleAttributes = pick(
-		blockAttributes,
-		BLOCK_STYLE_ATTRIBUTES
-	);
-	// This prevents certain wrapper styles from being applied to blocks that
-	// don't support them yet.
-	const wrapperPropsStyleFiltered = pick(
-		wrapperPropsStyle,
-		BLOCK_STYLE_ATTRIBUTES
-	);
-
-	const mergedStyle = {
-		...baseGlobalColors,
-		...globalStyle,
-		...wrapperPropsStyleFiltered,
-	};
-	const blockColors = getBlockColors(
-		blockStyleAttributes,
-		defaultColors,
-		blockName,
-		baseGlobalStyles
-	);
-	const blockPaddings = getBlockPaddings(
-		mergedStyle,
-		wrapperPropsStyle,
-		blockStyleAttributes,
-		blockColors
-	);
-	const blockTypography = getBlockTypography(
-		blockStyleAttributes,
-		fontSizes,
-		blockName,
-		baseGlobalStyles
-	);
-
-	return {
-		...mergedStyle,
-		...blockPaddings,
-		...blockColors,
-		...blockTypography,
-	};
-};
-
-export const useGlobalStyles = () => {
-	const globalStyles = useContext( GlobalStylesContext );
-
-	return globalStyles;
-};
-
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
-	(
-		<GlobalStylesContext.Consumer>
-			{ ( globalStyles ) => (
-				<WrappedComponent { ...props } globalStyles={ globalStyles } />
-			) }
-		</GlobalStylesContext.Consumer>
-	);
-
-export default GlobalStylesContext;
diff --git a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js b/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js
deleted file mode 100644
index 68c4593446a7ce..00000000000000
--- a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js
+++ /dev/null
@@ -1,294 +0,0 @@
-export const DEFAULT_COLORS = [
-	{ color: '#cd2653', name: 'Accent Color', slug: 'accent' },
-	{ color: '#000000', name: 'Primary', slug: 'primary' },
-	{ color: '#6d6d6d', name: 'Secondary', slug: 'secondary' },
-];
-
-export const GLOBAL_STYLES_PALETTE = [
-	{
-		slug: 'green',
-		color: '#D1E4DD',
-		name: 'Green',
-	},
-	{
-		slug: 'blue',
-		color: '#D1DFE4',
-		name: 'Blue',
-	},
-	{
-		slug: 'purple',
-		color: '#D1D1E4',
-		name: 'Purple',
-	},
-	{
-		color: '#cf1594',
-		name: 'Color 2 ',
-		slug: 'custom-color-2',
-	},
-];
-
-export const GLOBAL_STYLES_GRADIENTS = {
-	default: [
-		{
-			name: 'Vivid cyan blue to vivid purple',
-			gradient:
-				'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-			slug: 'vivid-cyan-blue-to-vivid-purple',
-		},
-		{
-			name: 'Light green cyan to vivid green cyan',
-			gradient:
-				'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-			slug: 'light-green-cyan-to-vivid-green-cyan',
-		},
-	],
-	theme: [
-		{
-			slug: 'purple-to-blue',
-			gradient:
-				'linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--blue))',
-			name: 'Purple to Blue',
-		},
-		{
-			slug: 'green-to-purple',
-			gradient:
-				'linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--purple))',
-			name: 'Green to Purple',
-		},
-	],
-};
-
-export const DEFAULT_GLOBAL_STYLES = {
-	color: {
-		background: 'var(--wp--preset--color--green)',
-		text: 'var(--wp--preset--color--blue)',
-	},
-	typography: {
-		fontSize: 'var(--wp--preset--font-size--normal)',
-		lineHeight: 'var(--wp--custom--line-height--body)',
-	},
-	elements: {
-		link: {
-			color: {
-				text: 'var(--wp--preset--color--purple)',
-			},
-		},
-		h1: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--gigantic)',
-				lineHeight: 'var(--wp--custom--line-height--page-title)',
-			},
-		},
-		h2: {
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--extra-large)',
-				lineHeight: 'var(--wp--custom--line-height--heading)',
-			},
-		},
-	},
-	blocks: {
-		'core/button': {
-			color: {
-				background: 'var(--wp--preset--color--purple)',
-				text: 'var(--wp--preset--color--green)',
-			},
-			typography: {
-				fontSize: 'var(--wp--preset--font-size--normal)',
-			},
-		},
-		'core/separator': {
-			color: {
-				text: 'var:preset|color|custom-color-2',
-			},
-		},
-	},
-};
-
-export const PARSED_GLOBAL_STYLES = {
-	color: {
-		background: '#D1E4DD',
-		text: '#D1DFE4',
-	},
-	typography: {
-		fontSize: '18px',
-		lineHeight: '1.7',
-	},
-	elements: {
-		link: {
-			color: {
-				text: '#D1D1E4',
-			},
-		},
-		h1: {
-			typography: {
-				fontSize: '144px',
-				lineHeight: '1.1',
-			},
-		},
-		h2: {
-			typography: {
-				fontSize: '40px',
-				lineHeight: '1.3',
-			},
-		},
-	},
-	blocks: {
-		'core/button': {
-			color: {
-				background: '#D1D1E4',
-				text: '#D1E4DD',
-			},
-			typography: {
-				fontSize: '18px',
-			},
-		},
-		'core/separator': {
-			color: {
-				text: '#cf1594',
-			},
-		},
-	},
-};
-
-export const RAW_FEATURES = {
-	color: {
-		palette: {
-			default: [
-				{
-					name: 'Black',
-					slug: 'black',
-					color: '#000000',
-				},
-				{
-					name: 'Cyan bluish gray',
-					slug: 'cyan-bluish-gray',
-					color: '#abb8c3',
-				},
-				{
-					name: 'White',
-					slug: 'white',
-					color: '#ffffff',
-				},
-			],
-			theme: [
-				{
-					slug: 'green',
-					color: '#D1E4DD',
-					name: 'Green',
-				},
-				{
-					slug: 'blue',
-					color: '#D1DFE4',
-					name: 'Blue',
-				},
-				{
-					slug: 'purple',
-					color: '#D1D1E4',
-					name: 'Purple',
-				},
-			],
-			custom: [
-				{
-					color: '#1bf5c1',
-					name: 'Color 1 ',
-					slug: 'custom-color-1',
-				},
-				{
-					color: '#cf1594',
-					name: 'Color 2 ',
-					slug: 'custom-color-2',
-				},
-			],
-		},
-		gradients: {
-			default: [
-				{
-					name: 'Vivid cyan blue to vivid purple',
-					gradient:
-						'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
-					slug: 'vivid-cyan-blue-to-vivid-purple',
-				},
-				{
-					name: 'Light green cyan to vivid green cyan',
-					gradient:
-						'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-					slug: 'light-green-cyan-to-vivid-green-cyan',
-				},
-			],
-			theme: [
-				{
-					slug: 'purple-to-blue',
-					gradient: 'linear-gradient(160deg, #D1D1E4, #D1DFE4)',
-					name: 'Purple to Blue',
-				},
-				{
-					slug: 'green-to-purple',
-					gradient: 'linear-gradient(160deg, #D1E4DD, #D1D1E4)',
-					name: 'Green to Purple',
-				},
-			],
-		},
-	},
-	typography: {
-		fontSizes: {
-			default: [
-				{
-					name: 'Small',
-					slug: 'small',
-					size: '13px',
-					sizePx: '13px',
-				},
-				{
-					name: 'Normal',
-					slug: 'normal',
-					size: '16px',
-					sizePx: '16px',
-				},
-				{
-					name: 'Huge',
-					slug: 'huge',
-					size: '42px',
-					sizePx: '42px',
-				},
-			],
-			theme: [
-				{
-					name: 'Normal',
-					slug: 'normal',
-					size: '18px',
-					sizePx: '18px',
-				},
-				{
-					slug: 'extra-large',
-					size: '40px',
-					sizePx: '40px',
-					name: 'Extra large',
-				},
-				{
-					slug: 'gigantic',
-					size: '144px',
-					sizePx: '144px',
-					name: 'Gigantic',
-				},
-			],
-		},
-	},
-	custom: {
-		'line-height': {
-			body: 1.7,
-			heading: 1.3,
-			'page-title': 1.1,
-		},
-	},
-};
-
-export const MAPPED_VALUES = {
-	color: {
-		values: GLOBAL_STYLES_PALETTE,
-		slug: 'color',
-	},
-	'font-size': {
-		values: RAW_FEATURES.typography.fontSizes.theme,
-		slug: 'size',
-	},
-};
diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js
deleted file mode 100644
index c1f968de24e485..00000000000000
--- a/packages/components/src/mobile/global-styles-context/test/utils.native.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getBlockPaddings,
-	getBlockColors,
-	parseStylesVariables,
-	getGlobalStyles,
-} from '../utils';
-
-import {
-	DEFAULT_COLORS,
-	GLOBAL_STYLES_GRADIENTS,
-	DEFAULT_GLOBAL_STYLES,
-	PARSED_GLOBAL_STYLES,
-	RAW_FEATURES,
-	MAPPED_VALUES,
-} from './fixtures/theme';
-
-describe( 'getBlockPaddings', () => {
-	const PADDING = 12;
-
-	it( 'returns no paddings for a block without background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{ backgroundColor: 'red' },
-			{ textColor: 'primary' }
-		);
-		expect( paddings ).toEqual( expect.objectContaining( {} ) );
-	} );
-
-	it( 'returns paddings for a block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ color: 'red' },
-			{},
-			{ backgroundColor: 'red', textColor: 'primary' }
-		);
-		expect( paddings ).toEqual(
-			expect.objectContaining( { padding: PADDING } )
-		);
-	} );
-
-	it( 'returns no paddings for an inner block without background color within a parent block with background color', () => {
-		const paddings = getBlockPaddings(
-			{ backgroundColor: 'blue', color: 'yellow', padding: PADDING },
-			{},
-			{ textColor: 'primary' }
-		);
-
-		expect( paddings ).toEqual(
-			expect.not.objectContaining( { padding: PADDING } )
-		);
-	} );
-} );
-
-describe( 'getBlockColors', () => {
-	it( 'returns the theme colors correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: 'accent', textColor: 'secondary' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#cd2653',
-				color: '#6d6d6d',
-			} )
-		);
-	} );
-
-	it( 'returns custom background color correctly', () => {
-		const blockColors = getBlockColors(
-			{ backgroundColor: '#222222', textColor: 'accent' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				backgroundColor: '#222222',
-				color: '#cd2653',
-			} )
-		);
-	} );
-
-	it( 'returns custom text color correctly', () => {
-		const blockColors = getBlockColors(
-			{ textColor: '#4ddddd' },
-			DEFAULT_COLORS
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( {
-				color: '#4ddddd',
-			} )
-		);
-	} );
-} );
-
-describe( 'parseStylesVariables', () => {
-	it( 'returns the parsed preset values correctly', () => {
-		const customValues = parseStylesVariables(
-			JSON.stringify( RAW_FEATURES.custom ),
-			MAPPED_VALUES
-		);
-		const blockColors = parseStylesVariables(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			MAPPED_VALUES,
-			customValues
-		);
-		expect( blockColors ).toEqual(
-			expect.objectContaining( PARSED_GLOBAL_STYLES )
-		);
-	} );
-} );
-
-describe( 'getGlobalStyles', () => {
-	it( 'returns the global styles data correctly', () => {
-		const rawFeatures = JSON.stringify( RAW_FEATURES );
-		const gradients = parseStylesVariables(
-			JSON.stringify( GLOBAL_STYLES_GRADIENTS ),
-			MAPPED_VALUES
-		);
-
-		const globalStyles = getGlobalStyles(
-			JSON.stringify( DEFAULT_GLOBAL_STYLES ),
-			rawFeatures
-		);
-
-		expect( globalStyles ).toEqual(
-			expect.objectContaining( {
-				__experimentalFeatures: {
-					color: {
-						palette: RAW_FEATURES.color.palette,
-						gradients,
-						text: true,
-						background: true,
-						defaultPalette: true,
-						defaultGradients: true,
-					},
-					typography: {
-						fontSizes: RAW_FEATURES.typography.fontSizes,
-						customLineHeight: RAW_FEATURES.custom[ 'line-height' ],
-					},
-				},
-				__experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES,
-			} )
-		);
-	} );
-} );
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
deleted file mode 100644
index 7d985a9cccb6f6..00000000000000
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ /dev/null
@@ -1,421 +0,0 @@
-/**
- * External dependencies
- */
-import { camelCase } from 'change-case';
-import { find, get } from 'lodash';
-import { Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import {
-	getPxFromCssUnit,
-	useSetting,
-	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-
-export const BLOCK_STYLE_ATTRIBUTES = [
-	'textColor',
-	'backgroundColor',
-	'style',
-	'color',
-	'fontSize',
-];
-
-// Mapping style properties name to native.
-const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
-	textColor: 'color',
-	text: 'color',
-	background: 'backgroundColor',
-	link: 'linkColor',
-	placeholder: 'placeholderColor',
-};
-
-const PADDING = 12; // $solid-border-space
-const UNKNOWN_VALUE = 'undefined';
-const DEFAULT_FONT_SIZE = 16;
-
-export function getBlockPaddings(
-	mergedStyle,
-	wrapperPropsStyle,
-	blockStyleAttributes,
-	blockColors
-) {
-	const blockPaddings = {};
-
-	if (
-		! mergedStyle.padding &&
-		( wrapperPropsStyle?.backgroundColor ||
-			blockStyleAttributes?.backgroundColor ||
-			blockColors?.backgroundColor )
-	) {
-		blockPaddings.padding = PADDING;
-		return blockPaddings;
-	}
-
-	// Prevent adding extra paddings to inner blocks without background colors.
-	if (
-		mergedStyle?.padding &&
-		! wrapperPropsStyle?.backgroundColor &&
-		! blockStyleAttributes?.backgroundColor &&
-		! blockColors?.backgroundColor
-	) {
-		blockPaddings.padding = undefined;
-	}
-
-	return blockPaddings;
-}
-
-export function getBlockColors(
-	blockStyleAttributes,
-	defaultColors,
-	blockName,
-	baseGlobalStyles
-) {
-	const blockStyles = {};
-	const customBlockStyles = blockStyleAttributes?.style?.color || {};
-	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
-
-	// Global styles colors.
-	if ( blockGlobalStyles?.color ) {
-		Object.entries( blockGlobalStyles.color ).forEach(
-			( [ key, value ] ) => {
-				const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ key ];
-
-				if ( styleKey && value !== UNKNOWN_VALUE ) {
-					const color = customBlockStyles[ key ] ?? value;
-					blockStyles[ styleKey ] = color;
-				}
-			}
-		);
-	} else if ( baseGlobalStyles?.styles?.color?.text ) {
-		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.text ] =
-			baseGlobalStyles?.styles?.color?.text;
-	}
-
-	// Global styles elements.
-	if ( blockGlobalStyles?.elements ) {
-		const linkColor = blockGlobalStyles.elements?.link?.color?.text;
-		const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
-
-		if ( styleKey && linkColor && linkColor !== UNKNOWN_VALUE ) {
-			blockStyles[ styleKey ] = linkColor;
-		}
-	}
-
-	// Custom colors.
-	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
-		const isCustomColor = value?.startsWith?.( '#' );
-		let styleKey = key;
-
-		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
-			styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ];
-		}
-
-		if ( ! isCustomColor ) {
-			const mappedColor = find( defaultColors, {
-				slug: value,
-			} );
-
-			if ( mappedColor ) {
-				blockStyles[ styleKey ] = mappedColor.color;
-			}
-		} else {
-			blockStyles[ styleKey ] = value;
-		}
-	} );
-
-	// Color placeholder.
-	if ( blockStyles?.color ) {
-		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] =
-			blockStyles.color;
-	}
-
-	return blockStyles;
-}
-
-export function getBlockTypography(
-	blockStyleAttributes,
-	fontSizes,
-	blockName,
-	baseGlobalStyles
-) {
-	const typographyStyles = {};
-	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
-	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
-
-	// Global styles.
-	if ( blockGlobalStyles?.typography ) {
-		const fontSize = blockGlobalStyles?.typography?.fontSize;
-		const lineHeight = blockGlobalStyles?.typography?.lineHeight;
-
-		if ( fontSize ) {
-			if ( parseInt( fontSize, 10 ) ) {
-				typographyStyles.fontSize = fontSize;
-			} else {
-				const mappedFontSize = find( fontSizes, {
-					slug: fontSize,
-				} );
-
-				if ( mappedFontSize ) {
-					typographyStyles.fontSize = mappedFontSize?.size;
-				}
-			}
-		}
-
-		if ( lineHeight ) {
-			typographyStyles.lineHeight = lineHeight;
-		}
-	}
-
-	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
-		const mappedFontSize = find( fontSizes, {
-			slug: blockStyleAttributes?.fontSize,
-		} );
-
-		if ( mappedFontSize ) {
-			typographyStyles.fontSize = mappedFontSize?.size;
-		}
-	}
-
-	// Custom styles.
-	if ( customBlockStyles?.fontSize ) {
-		typographyStyles.fontSize = customBlockStyles?.fontSize;
-	}
-
-	if ( customBlockStyles?.lineHeight ) {
-		typographyStyles.lineHeight = customBlockStyles?.lineHeight;
-	}
-
-	return typographyStyles;
-}
-
-export function parseStylesVariables( styles, mappedValues, customValues ) {
-	let stylesBase = styles;
-	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
-
-	if ( ! stylesBase ) {
-		return styles;
-	}
-
-	variables.forEach( ( variable ) => {
-		// Examples
-		// var(--wp--preset--color--gray)
-		// var(--wp--custom--body--typography--font-family)
-		// var:preset|color|custom-color-2
-		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
-		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
-		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
-
-		if ( variable === 'preset' ) {
-			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
-				const path = $2.split( '--' );
-				const mappedPresetValue = mappedValues[ path[ 0 ] ];
-				if ( mappedPresetValue && mappedPresetValue.slug ) {
-					const matchedValue = find( mappedPresetValue.values, {
-						slug: path[ 1 ],
-					} );
-					return matchedValue?.[ mappedPresetValue.slug ];
-				}
-				return UNKNOWN_VALUE;
-			} );
-		}
-		if ( variable === 'custom' ) {
-			const customValuesData = customValues ?? JSON.parse( stylesBase );
-			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
-				const path = $2.split( '--' );
-				if (
-					path.reduce(
-						( prev, curr ) => prev && prev[ curr ],
-						customValuesData
-					)
-				) {
-					return get( customValuesData, path );
-				}
-
-				// Check for camelcase properties.
-				return get( customValuesData, [
-					...path.slice( 0, path.length - 1 ),
-					camelCase( path[ path.length - 1 ] ),
-				] );
-			} );
-		}
-
-		if ( variable === 'var' ) {
-			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
-				if ( mappedValues?.color ) {
-					const matchedValue = find( mappedValues.color?.values, {
-						slug: $2,
-					} );
-					return `"${ matchedValue?.color }"`;
-				}
-				return UNKNOWN_VALUE;
-			} );
-		}
-
-		if ( variable === 'fontSize' ) {
-			const { width, height } = Dimensions.get( 'window' );
-
-			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
-				const parsedFontSize =
-					getPxFromCssUnit( $2, {
-						width,
-						height,
-						fontSize: DEFAULT_FONT_SIZE,
-					} ) || `${ DEFAULT_FONT_SIZE }px`;
-
-				return `"fontSize":"${ parsedFontSize }"`;
-			} );
-		}
-	} );
-
-	return JSON.parse( stylesBase );
-}
-
-export function getMappedValues( features, palette ) {
-	const typography = features?.typography;
-	const colors = [
-		...( palette?.theme || [] ),
-		...( palette?.custom || [] ),
-		...( palette?.default || [] ),
-	];
-
-	const fontSizes = {
-		...typography?.fontSizes?.theme,
-		...typography?.fontSizes?.custom,
-	};
-	const mappedValues = {
-		color: {
-			values: colors,
-			slug: 'color',
-		},
-		'font-size': {
-			values: fontSizes,
-			slug: 'size',
-		},
-	};
-	return mappedValues;
-}
-
-/**
- * Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
- *
- * @param {Object} fontSizes found in global styles.
- * @return {Object} normalized sizes.
- */
-function normalizeFontSizes( fontSizes ) {
-	// Adds normalized PX values for each of the different keys.
-	if ( ! fontSizes ) {
-		return fontSizes;
-	}
-	const normalizedFontSizes = {};
-	const dimensions = Dimensions.get( 'window' );
-
-	[ 'default', 'theme', 'custom' ].forEach( ( key ) => {
-		if ( fontSizes[ key ] ) {
-			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
-				( fontSizeObject ) => {
-					fontSizeObject.sizePx = getPxFromCssUnit(
-						fontSizeObject.size,
-						{
-							width: dimensions.width,
-							height: dimensions.height,
-							fontSize: DEFAULT_FONT_SIZE,
-						}
-					);
-					return fontSizeObject;
-				}
-			);
-		}
-	} );
-
-	return normalizedFontSizes;
-}
-
-export function useMobileGlobalStylesColors( type = 'colors' ) {
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-	const availableThemeColors = colorGradientSettings?.[ type ]?.reduce(
-		( colors, origin ) => colors.concat( origin?.[ type ] ),
-		[]
-	);
-	// Default editor colors/gradients if it's not a block-based theme.
-	const colorPalette =
-		type === 'colors' ? 'color.palette' : 'color.gradients';
-	const editorDefaultPalette = useSetting( colorPalette );
-
-	return availableThemeColors.length >= 1
-		? availableThemeColors
-		: editorDefaultPalette;
-}
-
-export function getColorsAndGradients(
-	defaultEditorColors = [],
-	defaultEditorGradients = [],
-	rawFeatures
-) {
-	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
-
-	return {
-		__experimentalGlobalStylesBaseStyles: null,
-		__experimentalFeatures: {
-			color: {
-				...( ! features?.color
-					? {
-							text: true,
-							background: true,
-							palette: {
-								default: defaultEditorColors,
-							},
-							gradients: {
-								default: defaultEditorGradients,
-							},
-					  }
-					: features?.color ),
-				defaultPalette: defaultEditorColors?.length > 0,
-				defaultGradients: defaultEditorGradients?.length > 0,
-			},
-		},
-	};
-}
-
-export function getGlobalStyles( rawStyles, rawFeatures ) {
-	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
-	const mappedValues = getMappedValues( features, features?.color?.palette );
-	const colors = parseStylesVariables(
-		JSON.stringify( features?.color ),
-		mappedValues
-	);
-	const gradients = parseStylesVariables(
-		JSON.stringify( features?.color?.gradients ),
-		mappedValues
-	);
-	const customValues = parseStylesVariables(
-		JSON.stringify( features?.custom ),
-		mappedValues
-	);
-	const globalStyles = parseStylesVariables(
-		rawStyles,
-		mappedValues,
-		customValues
-	);
-
-	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
-
-	return {
-		__experimentalFeatures: {
-			color: {
-				palette: colors?.palette,
-				gradients,
-				text: features?.color?.text ?? true,
-				background: features?.color?.background ?? true,
-				defaultPalette: features?.color?.defaultPalette ?? true,
-				defaultGradients: features?.color?.defaultGradients ?? true,
-			},
-			typography: {
-				fontSizes,
-				customLineHeight: features?.custom?.[ 'line-height' ],
-			},
-		},
-		__experimentalGlobalStylesBaseStyles: globalStyles,
-	};
-}
diff --git a/packages/components/src/mobile/gradient/index.native.js b/packages/components/src/mobile/gradient/index.native.js
index e0a2ad8de0decb..47e96558ce3fef 100644
--- a/packages/components/src/mobile/gradient/index.native.js
+++ b/packages/components/src/mobile/gradient/index.native.js
@@ -7,7 +7,6 @@ import gradientParser from 'gradient-parser';
 /**
  * WordPress dependencies
  */
-import { colorsUtils } from '@wordpress/components';
 import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';
 import { useResizeObserver } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
@@ -16,6 +15,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import styles from './style.scss';
+import { colorsUtils } from '../color-settings/utils';
 
 export function getGradientAngle( gradientValue ) {
 	const angleBase = 45;
@@ -51,7 +51,9 @@ export function getGradientAngle( gradientValue ) {
 		}
 	} else if ( angleType === 'angle' ) {
 		return parseFloat( angle );
-	} else return 4 * angleBase;
+	} else {
+		return 4 * angleBase;
+	}
 }
 
 export function getGradientColorGroup( gradientValue ) {
@@ -135,7 +137,7 @@ function Gradient( {
 		return (
 			<RNLinearGradient
 				colors={ colors }
-				useAngle={ true }
+				useAngle
 				angle={ getGradientAngle( gradientValue ) }
 				locations={ locations }
 				angleCenter={ angleCenter }
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
index 18bdc2caa3ac08..16604bbc4e3eb0 100644
--- a/packages/components/src/mobile/html-text-input/index.native.js
+++ b/packages/components/src/mobile/html-text-input/index.native.js
@@ -81,7 +81,10 @@ export class HTMLTextInput extends Component {
 			title,
 		} = this.props;
 		const titleStyle = [
-			styles.htmlViewTitle,
+			getStylesFromColorScheme(
+				styles.htmlViewTitle,
+				styles.htmlViewTitleDark
+			),
 			style?.text && { color: style.text },
 		];
 		const htmlStyle = [
diff --git a/packages/components/src/mobile/html-text-input/style.scss b/packages/components/src/mobile/html-text-input/style.scss
index 89b81e898ad4bb..47102aca755044 100644
--- a/packages/components/src/mobile/html-text-input/style.scss
+++ b/packages/components/src/mobile/html-text-input/style.scss
@@ -37,3 +37,7 @@ $textColorDark: $white;
 .scrollView {
 	flex: 1;
 }
+
+.htmlViewTitleDark {
+	color: $textColorDark;
+}
diff --git a/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap b/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..dd3272bef4d715
--- /dev/null
+++ b/packages/components/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
+<View
+  onLayout={[Function]}
+>
+  <RCTScrollView>
+    <View>
+      <TextInput
+        accessibilityLabel="html-view-title"
+        autoCorrect={false}
+        numberOfLines={1}
+        placeholder="Add title"
+        placeholderTextColor="white"
+        style={
+          [
+            {
+              "color": "white",
+            },
+            undefined,
+          ]
+        }
+        textAlignVertical="center"
+      />
+      <TextInput
+        accessibilityLabel="html-view-content"
+        autoCorrect={false}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        placeholder="Start writing…"
+        placeholderTextColor="white"
+        rejectResponderTermination={false}
+        scrollEnabled={false}
+        style={
+          [
+            {
+              "color": "white",
+            },
+            undefined,
+          ]
+        }
+        textAlignVertical="top"
+      />
+    </View>
+  </RCTScrollView>
+</View>
+`;
diff --git a/packages/components/src/mobile/html-text-input/test/index.native.js b/packages/components/src/mobile/html-text-input/test/index.native.js
index 5ddffe3d81d0d5..1f900fc5ee1e9a 100644
--- a/packages/components/src/mobile/html-text-input/test/index.native.js
+++ b/packages/components/src/mobile/html-text-input/test/index.native.js
@@ -23,13 +23,13 @@ const getStylesFromColorScheme = () => {
 };
 
 describe( 'HTMLTextInput', () => {
-	it( 'HTMLTextInput renders', () => {
+	it( 'HTMLTextInput renders and matches snapshot', () => {
 		const screen = render(
 			<HTMLTextInput
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
-		expect( screen.container ).toBeTruthy();
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 
 	it( 'HTMLTextInput updates state on HTML text change', () => {
diff --git a/packages/components/src/mobile/image/constants.js b/packages/components/src/mobile/image/constants.js
new file mode 100644
index 00000000000000..e866759bd2ac0d
--- /dev/null
+++ b/packages/components/src/mobile/image/constants.js
@@ -0,0 +1 @@
+export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
diff --git a/packages/components/src/mobile/image/icon-customize.native.js b/packages/components/src/mobile/image/icon-customize.native.js
index 57fc39c7c29f1b..0f33638041688b 100644
--- a/packages/components/src/mobile/image/icon-customize.native.js
+++ b/packages/components/src/mobile/image/icon-customize.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/packages/components/src/mobile/image/icon-retry.native.js b/packages/components/src/mobile/image/icon-retry.native.js
index 580cd1fff188f5..1ac6c714b3f6e4 100644
--- a/packages/components/src/mobile/image/icon-retry.native.js
+++ b/packages/components/src/mobile/image/icon-retry.native.js
@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { SVG, Path } from '@wordpress/primitives';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-		<Path d="M0 0h24v24H0z" fill={ 'none' } />
+		<Path d="M0 0h24v24H0z" fill="none" />
 	</SVG>
 );
diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js
index fccc4fa2bfe334..b3dfd546b63645 100644
--- a/packages/components/src/mobile/image/image-editing-button.native.js
+++ b/packages/components/src/mobile/image/image-editing-button.native.js
@@ -6,7 +6,6 @@ import { TouchableWithoutFeedback, View, Platform } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { MediaEdit } from '../media-edit';
 import SvgIconCustomize from './icon-customize';
 import styles from './style.scss';
+import Icon from '../../icon';
 
 const accessibilityHint =
 	Platform.OS === 'ios'
@@ -40,7 +40,7 @@ const ImageEditingButton = ( {
 				<TouchableWithoutFeedback
 					accessibilityHint={ accessibilityHint }
 					accessibilityLabel={ __( 'Edit image' ) }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					onPress={ open }
 				>
 					<View style={ styles.editContainer }>
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 9d365763e027dd..3c7e4ddc19c006 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -8,8 +8,7 @@ import FastImage from 'react-native-fast-image';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Icon } from '@wordpress/components';
-import { image as icon } from '@wordpress/icons';
+import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useEffect, useState, Platform } from '@wordpress/element';
 
@@ -20,15 +19,15 @@ import { getImageWithFocalPointStyles } from './utils';
 import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
+import Icon from '../../icon';
 
 const ICON_TYPE = {
+	OFFLINE: 'offline',
 	PLACEHOLDER: 'placeholder',
 	RETRY: 'retry',
 	UPLOAD: 'upload',
 };
 
-export const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
-
 const ImageComponent = ( {
 	align,
 	alt,
@@ -39,6 +38,7 @@ const ImageComponent = ( {
 	isSelected,
 	shouldUseFastImage,
 	isUploadFailed,
+	isUploadPaused,
 	isUploadInProgress,
 	mediaPickerOptions,
 	onImageDataLoad,
@@ -54,6 +54,9 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ localURL, setLocalURL ] = useState( null );
+	const [ networkURL, setNetworkURL ] = useState( null );
+	const [ networkImageLoaded, setNetworkImageLoaded ] = useState( false );
 
 	// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
 	const Image =
@@ -80,11 +83,36 @@ const ImageComponent = ( {
 					onImageDataLoad( metaData );
 				}
 			} );
+
+			if ( url.startsWith( 'file:///' ) ) {
+				setLocalURL( url );
+				setNetworkURL( null );
+				setNetworkImageLoaded( false );
+			} else if ( url.startsWith( 'https://' ) ) {
+				if ( Platform.isIOS ) {
+					setNetworkURL( url );
+				} else if ( Platform.isAndroid ) {
+					RNImage.prefetch( url ).then(
+						() => {
+							if ( ! isCurrent ) {
+								return;
+							}
+							setNetworkURL( url );
+							setNetworkImageLoaded( true );
+						},
+						() => {
+							// This callback is called when the image fails to load,
+							// but these events are handled by `isUploadFailed`
+							// and `isUploadPaused` events instead.
+							//
+							// Ignoring the error event will persist the local image URI.
+						}
+					);
+				}
+			}
 		}
 		return () => ( isCurrent = false );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	const onContainerLayout = ( event ) => {
@@ -101,19 +129,23 @@ const ImageComponent = ( {
 	};
 
 	const getIcon = ( iconType ) => {
+		let icon;
 		let iconStyle;
 		switch ( iconType ) {
 			case ICON_TYPE.RETRY:
-				return (
-					<Icon
-						icon={ retryIcon || SvgIconRetry }
-						{ ...styles.iconRetry }
-					/>
-				);
+				icon = retryIcon || SvgIconRetry;
+				iconStyle = iconRetryStyles;
+				break;
+			case ICON_TYPE.OFFLINE:
+				icon = offline;
+				iconStyle = iconOfflineStyles;
+				break;
 			case ICON_TYPE.PLACEHOLDER:
+				icon = image;
 				iconStyle = iconPlaceholderStyles;
 				break;
 			case ICON_TYPE.UPLOAD:
+				icon = image;
 				iconStyle = iconUploadStyles;
 				break;
 		}
@@ -130,6 +162,31 @@ const ImageComponent = ( {
 		styles.iconUploadDark
 	);
 
+	const iconOfflineStyles = usePreferredColorSchemeStyle(
+		styles.iconOffline,
+		styles.iconOfflineDark
+	);
+
+	const retryIconStyles = usePreferredColorSchemeStyle(
+		styles.retryIcon,
+		styles.retryIconDark
+	);
+
+	const iconRetryStyles = usePreferredColorSchemeStyle(
+		styles.iconRetry,
+		styles.iconRetryDark
+	);
+
+	const retryContainerStyles = usePreferredColorSchemeStyle(
+		styles.retryContainer,
+		styles.retryContainerDark
+	);
+
+	const uploadFailedTextStyles = usePreferredColorSchemeStyle(
+		styles.uploadFailedText,
+		styles.uploadFailedTextDark
+	);
+
 	const placeholderStyles = [
 		usePreferredColorSchemeStyle(
 			styles.imageContainerUpload,
@@ -161,7 +218,6 @@ const ImageComponent = ( {
 
 	const imageStyles = [
 		{
-			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
 		! resizeMode && {
@@ -178,7 +234,7 @@ const ImageComponent = ( {
 			imageData &&
 			containerSize && {
 				height:
-					imageData?.width > containerSize?.width
+					imageData?.width > containerSize?.width && ! imageWidth
 						? containerSize?.width / imageData?.aspectRatio
 						: undefined,
 			},
@@ -186,6 +242,30 @@ const ImageComponent = ( {
 		shapeStyle,
 	];
 
+	// On iOS, add 1 to height to account for the 1px non-visible image
+	// that is used to determine when the network image has loaded
+	// We also must verify that it is not NaN, as it can be NaN when the image is loading.
+	// This is not necessary on Android as the non-visible image is not used.
+	let calculatedSelectedHeight;
+	if ( Platform.isIOS ) {
+		calculatedSelectedHeight =
+			containerSize && ! isNaN( containerSize.height )
+				? containerSize.height + 1
+				: 0;
+	} else {
+		calculatedSelectedHeight = containerSize?.height;
+	}
+
+	const imageSelectedStyles = [
+		usePreferredColorSchemeStyle(
+			styles.imageBorder,
+			styles.imageBorderDark
+		),
+		{
+			height: calculatedSelectedHeight,
+		},
+	];
+
 	return (
 		<View
 			style={ [
@@ -203,20 +283,13 @@ const ImageComponent = ( {
 				disabled={ ! isSelected }
 				accessibilityLabel={ alt }
 				accessibilityHint={ __( 'Double tap and hold to edit' ) }
-				accessibilityRole={ 'imagebutton' }
+				accessibilityRole="imagebutton"
 				key={ url }
 				style={ imageContainerStyles }
 			>
-				{ isSelected &&
-					highlightSelected &&
-					! ( isUploadInProgress || isUploadFailed ) && (
-						<View
-							style={ [
-								styles.imageBorder,
-								{ height: containerSize?.height },
-							] }
-						/>
-					) }
+				{ isSelected && highlightSelected && (
+					<View style={ imageSelectedStyles } />
+				) }
 
 				{ ! imageData ? (
 					<View style={ placeholderStyles }>
@@ -226,33 +299,83 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<Image
-							style={ imageStyles }
-							source={ { uri: url } }
-							{ ...( ! focalPoint && {
-								resizeMethod: 'scale',
-							} ) }
-							resizeMode={ imageResizeMode }
-						/>
+						{ Platform.isAndroid && (
+							<>
+								{ networkImageLoaded && networkURL && (
+									<Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: networkURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+										testID={ `network-image-${ url }` }
+									/>
+								) }
+								{ ! networkImageLoaded && ! networkURL && (
+									<Image
+										style={ imageStyles }
+										fadeDuration={ 0 }
+										source={ { uri: localURL } }
+										{ ...( ! focalPoint && {
+											resizeMethod: 'scale',
+										} ) }
+										resizeMode={ imageResizeMode }
+									/>
+								) }
+							</>
+						) }
+						{ Platform.isIOS && (
+							<>
+								<Image
+									style={ imageStyles }
+									source={ {
+										uri:
+											networkURL && networkImageLoaded
+												? networkURL
+												: localURL || url,
+									} }
+									{ ...( ! focalPoint && {
+										resizeMethod: 'scale',
+									} ) }
+									resizeMode={ imageResizeMode }
+									testID={ `network-image-${
+										networkURL && networkImageLoaded
+											? networkURL
+											: localURL || url
+									}` }
+								/>
+								<Image
+									source={ { uri: networkURL } }
+									style={ styles.nonVisibleImage }
+									onLoad={ () => {
+										setNetworkImageLoaded( true );
+									} }
+								/>
+							</>
+						) }
 					</View>
 				) }
 
-				{ isUploadFailed && retryMessage && (
+				{ ( isUploadFailed || isUploadPaused ) && retryMessage && (
 					<View
 						style={ [
 							styles.imageContainer,
-							styles.retryContainer,
+							retryContainerStyles,
 						] }
 					>
 						<View
 							style={ [
-								styles.retryIcon,
+								retryIconStyles,
 								retryIcon && styles.customRetryIcon,
 							] }
 						>
-							{ getIcon( ICON_TYPE.RETRY ) }
+							{ isUploadPaused
+								? getIcon( ICON_TYPE.OFFLINE )
+								: getIcon( ICON_TYPE.RETRY ) }
 						</View>
-						<Text style={ styles.uploadFailedText }>
+						<Text style={ uploadFailedTextStyles }>
 							{ retryMessage }
 						</Text>
 					</View>
@@ -263,7 +386,11 @@ const ImageComponent = ( {
 				<ImageEditingButton
 					onSelectMediaUploadOption={ onSelectMediaUploadOption }
 					openMediaOptions={ openMediaOptions }
-					url={ ! isUploadFailed && imageData && url }
+					url={
+						! ( isUploadFailed || isUploadPaused ) &&
+						imageData &&
+						url
+					}
 					pickerOptions={ mediaPickerOptions }
 				/>
 			) }
diff --git a/packages/components/src/mobile/image/style.native.scss b/packages/components/src/mobile/image/style.native.scss
index c5ccd195993519..cebc097de8cdc5 100644
--- a/packages/components/src/mobile/image/style.native.scss
+++ b/packages/components/src/mobile/image/style.native.scss
@@ -7,7 +7,7 @@
 }
 
 .imageBorder {
-	border-color: $blue-medium;
+	border-color: $blue-40;
 	border-width: 2px;
 	border-style: solid;
 	position: absolute;
@@ -16,11 +16,28 @@
 	height: 100%;
 }
 
+.imageBorderDark {
+	border-color: $blue-50;
+}
+
 .retryIcon {
-	width: 80px;
-	height: 80px;
-	justify-content: center;
-	align-items: center;
+	background-color: $black;
+	border-radius: 200px;
+	padding: 8px;
+}
+
+.retryIconDark {
+	background-color: $white;
+}
+
+.iconOffline {
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconOfflineDark {
+	fill: $black;
 }
 
 .customRetryIcon {
@@ -29,9 +46,13 @@
 }
 
 .iconRetry {
-	fill: #fff;
-	width: 100%;
-	height: 100%;
+	fill: $white;
+	width: 24px;
+	height: 24px;
+}
+
+.iconRetryDark {
+	fill: $black;
 }
 
 .iconPlaceholder {
@@ -86,12 +107,17 @@
 }
 
 .uploadFailedText {
-	color: #fff;
+	color: $black;
+	font-weight: bold;
 	font-size: 14;
 	margin-top: 5;
 	text-align: center;
 }
 
+.uploadFailedTextDark {
+	color: $white;
+}
+
 .editContainer {
 	width: 44px;
 	height: 44px;
@@ -112,7 +138,7 @@
 }
 
 .iconCustomise {
-	fill: #fff;
+	fill: $white;
 	position: absolute;
 	top: 7px;
 	left: 7px;
@@ -120,6 +146,10 @@
 
 .retryContainer {
 	flex: 1;
+	background-color: "rgba(255, 255, 255, 0.8)";
+}
+
+.retryContainerDark {
 	background-color: "rgba(0, 0, 0, 0.5)";
 }
 
@@ -141,3 +171,9 @@
 .wide {
 	width: 100%;
 }
+
+.nonVisibleImage {
+	height: 1;
+	width: 1;
+	opacity: 0;
+}
diff --git a/packages/components/src/mobile/inserter-button/index.native.js b/packages/components/src/mobile/inserter-button/index.native.js
deleted file mode 100644
index 91d8a3b449f18c..00000000000000
--- a/packages/components/src/mobile/inserter-button/index.native.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableHighlight, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
-import { withPreferredColorScheme } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-import { BlockIcon } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import sparkles from './sparkles';
-class MenuItem extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onPress = this.onPress.bind( this );
-	}
-
-	onPress() {
-		const { onSelect, item } = this.props;
-		onSelect( item );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
-			this.props;
-
-		const modalIconWrapperStyle = getStylesFromColorScheme(
-			styles.modalIconWrapper,
-			styles.modalIconWrapperDark
-		);
-		const modalIconStyle = styles.modalIcon;
-		const modalItemLabelStyle = getStylesFromColorScheme(
-			styles.modalItemLabel,
-			styles.modalItemLabelDark
-		);
-
-		const clipboardBlockStyles = getStylesFromColorScheme(
-			styles.clipboardBlock,
-			styles.clipboardBlockDark
-		);
-
-		const isClipboardBlock = item.id === 'clipboard';
-		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
-		const blockIsNew = item.isNew === true;
-		const accessibilityLabelFormat = blockIsNew
-			? // translators: Newly available block name. %s: The localized block name
-			  __( '%s block, newly available' )
-			: // translators: Block name. %s: The localized block name
-			  __( '%s block' );
-		const accessibilityLabel = sprintf(
-			accessibilityLabelFormat,
-			item.title
-		);
-
-		return (
-			<TouchableHighlight
-				style={ [
-					styles.touchableArea,
-					item.isDisabled ? styles.disabled : null,
-				] }
-				underlayColor="transparent"
-				activeOpacity={ 0.5 }
-				accessibilityRole="button"
-				accessibilityLabel={ accessibilityLabel }
-				onPress={ this.onPress }
-				disabled={ item.isDisabled }
-			>
-				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
-					<View
-						style={ [
-							modalIconWrapperStyle,
-							itemWidth && {
-								width: itemWidth,
-							},
-							isClipboardBlock && clipboardBlockStyles,
-						] }
-					>
-						{ blockIsNew && (
-							<Icon
-								icon={ sparkles }
-								style={ styles.newIndicator }
-							/>
-						) }
-						<View style={ modalIconStyle }>
-							<BlockIcon
-								icon={ item.icon }
-								size={ modalIconStyle.width }
-							/>
-						</View>
-					</View>
-					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
-						{ blockTitle }
-					</Text>
-				</View>
-			</TouchableHighlight>
-		);
-	}
-}
-
-const InserterButton = withPreferredColorScheme( MenuItem );
-
-InserterButton.Styles = {
-	modalItem: styles.modalItem,
-	modalIconWrapper: styles.modalIconWrapper,
-};
-
-export default InserterButton;
diff --git a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js
index f13e7d329874fd..7630fd21fbc429 100644
--- a/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js
+++ b/packages/components/src/mobile/keyboard-avoiding-view/index.ios.js
@@ -69,9 +69,7 @@ export const KeyboardAvoidingView = ( {
 			keyboardShowSubscription.remove();
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	function onSafeAreaInsetsUpdate( { safeAreaInsets } ) {
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js
index ffdd97dd5acbb7..0e92bef7df25f2 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.android.js
@@ -2,30 +2,80 @@
  * External dependencies
  */
 import { FlatList } from 'react-native';
-import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useCallback,
+	useImperativeHandle,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
+
+export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
+	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
+		props;
+
+	const {
+		scrollViewRef,
+		scrollHandler,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	} = useScroll( {
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		extraScrollHeight,
+		onScroll,
+	} );
+
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
+
+	useImperativeHandle( ref, () => {
+		return {
+			scrollViewRef: scrollViewRef.current,
+			scrollToSection,
+			scrollToElement,
+			lastScrollTo,
+		};
+	} );
+
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
 
-export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
-	const scrollHandler = useAnimatedScrollHandler( { onScroll } );
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
-				ref={ innerRef }
+				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
+				onContentSizeChange={ onContentSizeChange }
+				// Disable clipping to fix focus losing.
+				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+				removeClippedSubviews={ false }
+				{ ...optimizationProps }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
-	// no need to handle on Android, it is system managed
-};
-
-export default KeyboardAwareFlatList;
+export default forwardRef( KeyboardAwareFlatList );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
index a8e84aaf1c2a49..9c224405a14a82 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -1,111 +1,147 @@
 /**
  * External dependencies
  */
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { FlatList } from 'react-native';
-import { isEqual } from 'lodash';
-import Animated, {
-	useAnimatedScrollHandler,
-	useSharedValue,
-} from 'react-native-reanimated';
+import { FlatList, View } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
-import { memo, useCallback, useRef } from '@wordpress/element';
-
-const List = memo( FlatList, isEqual );
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
-	KeyboardAwareScrollView
-);
-
-export const KeyboardAwareFlatList = ( {
-	extraScrollHeight,
-	shouldPreventAutomaticScroll,
-	innerRef,
-	autoScroll,
-	scrollViewStyle,
-	inputAccessoryViewHeight,
-	onScroll,
-	...listProps
-} ) => {
-	const scrollViewRef = useRef();
-	const keyboardWillShowIndicator = useRef();
-
-	const latestContentOffsetY = useSharedValue( -1 );
-
-	const scrollHandler = useAnimatedScrollHandler( {
-		onScroll: ( event ) => {
-			const { contentOffset } = event;
-			latestContentOffsetY.value = contentOffset.y;
-			onScroll( event );
-		},
+import {
+	useCallback,
+	useEffect,
+	forwardRef,
+	useImperativeHandle,
+} from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import useScroll from './use-scroll';
+import useTextInputOffset from './use-text-input-offset';
+import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
+
+const DEFAULT_FONT_SIZE = 16;
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * React component that provides a FlatList that is aware of the keyboard state and can scroll
+ * to the currently focused TextInput.
+ *
+ * @param {Object}    props                              Component props.
+ * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
+ * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
+ * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
+ * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @param {Object}    props...                           Other props to pass to the FlatList component.
+ * @param {RefObject} ref
+ * @return {Component} KeyboardAwareFlatList component.
+ */
+export const KeyboardAwareFlatList = (
+	{
+		extraScrollHeight,
+		onScroll,
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		...props
+	},
+	ref
+) => {
+	const {
+		scrollViewRef,
+		scrollHandler,
+		keyboardOffset,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	} = useScroll( {
+		scrollEnabled,
+		shouldPreventAutomaticScroll,
+		extraScrollHeight,
+		onScroll,
+		onSizeChange,
 	} );
 
-	const getRef = useCallback(
-		( ref ) => {
-			scrollViewRef.current = ref;
-			innerRef( ref );
+	const [ getTextInputOffset ] = useTextInputOffset(
+		scrollEnabled,
+		scrollViewRef
+	);
+
+	const onScrollToTextInput = useThrottle(
+		useCallback(
+			async ( caret ) => {
+				const { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};
+				const textInputOffset = await getTextInputOffset( caret );
+				const hasTextInputOffset = textInputOffset !== null;
+
+				if ( hasTextInputOffset ) {
+					scrollToSection( textInputOffset, caretHeight );
+				}
+			},
+			[ getTextInputOffset, scrollToSection ]
+		),
+		200,
+		{ leading: false }
+	);
+
+	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
+
+	const onSizeChange = useCallback(
+		() => onScrollToTextInput( currentCaretData ),
+		[ currentCaretData, onScrollToTextInput ]
+	);
+
+	useEffect( () => {
+		onScrollToTextInput( currentCaretData );
+	}, [ currentCaretData, onScrollToTextInput ] );
+
+	// Adds content insets when the keyboard is opened to have
+	// extra padding at the bottom.
+	const contentInset = { bottom: keyboardOffset };
+
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
 		},
-		[ innerRef ]
+		[ scrollViewRef ]
 	);
-	const onKeyboardWillHide = useCallback( () => {
-		keyboardWillShowIndicator.current = false;
-	}, [] );
-	const onKeyboardDidHide = useCallback( () => {
-		setTimeout( () => {
-			if (
-				! keyboardWillShowIndicator.current &&
-				latestContentOffsetY.value !== -1 &&
-				! shouldPreventAutomaticScroll()
-			) {
-				// Reset the content position if keyboard is still closed.
-				scrollViewRef.current?.scrollToPosition(
-					0,
-					latestContentOffsetY.value,
-					true
-				);
-			}
-		}, 50 );
-	}, [ latestContentOffsetY, shouldPreventAutomaticScroll ] );
-	const onKeyboardWillShow = useCallback( () => {
-		keyboardWillShowIndicator.current = true;
-	}, [] );
+
+	useImperativeHandle( ref, () => {
+		return {
+			scrollViewRef: scrollViewRef.current,
+			scrollToSection,
+			scrollToElement,
+			lastScrollTo,
+		};
+	} );
+
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
 
 	return (
-		<AnimatedKeyboardAwareScrollView
-			style={ [ { flex: 1 }, scrollViewStyle ] }
-			keyboardDismissMode="none"
-			enableResetScrollToCoords={ false }
-			keyboardShouldPersistTaps="handled"
-			extraScrollHeight={ extraScrollHeight }
-			extraHeight={ 0 }
-			inputAccessoryViewHeight={ inputAccessoryViewHeight }
-			enableAutomaticScroll={
-				autoScroll === undefined ? false : autoScroll
-			}
-			ref={ getRef }
-			onKeyboardWillHide={ onKeyboardWillHide }
-			onKeyboardDidHide={ onKeyboardDidHide }
-			onKeyboardWillShow={ onKeyboardWillShow }
-			scrollEnabled={ listProps.scrollEnabled }
-			onScroll={ scrollHandler }
-		>
-			<List { ...listProps } />
-		</AnimatedKeyboardAwareScrollView>
+		<View style={ styles.list__container }>
+			<AnimatedFlatList
+				ref={ getFlatListRef }
+				automaticallyAdjustContentInsets={ false }
+				contentInset={ contentInset }
+				keyboardShouldPersistTaps="handled"
+				onContentSizeChange={ onContentSizeChange }
+				onScroll={ scrollHandler }
+				scrollEventThrottle={ 16 }
+				style={ styles.list__content }
+				{ ...optimizationProps }
+				{ ...props }
+			/>
+		</View>
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
-	scrollView,
-	targetId,
-	caretY,
-	previousCaretY
-) => {
-	if ( previousCaretY ) {
-		// If this is not the first tap.
-		scrollView.refreshScrollForField( targetId );
-	}
-};
-
-export default KeyboardAwareFlatList;
+export default forwardRef( KeyboardAwareFlatList );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/shared.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/shared.native.js
new file mode 100644
index 00000000000000..170ea77773ee1d
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/shared.native.js
@@ -0,0 +1,26 @@
+/**
+ * Optimization properties for FlatList.
+ * @typedef {Object} OptimizationProps
+ * @property {number} maxToRenderPerBatch - Controls the amount of items rendered per batch during scrolling.
+ *                                        Increasing this number reduces visual blank areas but may affect responsiveness.
+ *                                        Default: 10
+ * @property {number} windowSize          - Measurement unit representing viewport height.
+ *                                        Default: 21 (10 viewports above, 10 below, and 1 in between).
+ *                                        Larger values reduce chances of seeing blank spaces while scrolling but increase memory consumption.
+ *                                        Smaller values save memory but increase chances of seeing blank areas.
+ */
+
+/**
+ * Threshold for applying optimization settings.
+ * @type {number}
+ */
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;
+
+/**
+ * Optimization properties for FlatList.
+ * @type {OptimizationProps}
+ */
+export const OPTIMIZATION_PROPS = {
+	maxToRenderPerBatch: 15,
+	windowSize: 17,
+};
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/styles.native.scss b/packages/components/src/mobile/keyboard-aware-flat-list/styles.native.scss
new file mode 100644
index 00000000000000..bbde37bac1c37b
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/styles.native.scss
@@ -0,0 +1,8 @@
+.list__container {
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.list__content {
+	margin-bottom: $mobile-block-toolbar-height;
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js
new file mode 100644
index 00000000000000..18265682b305a5
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js
@@ -0,0 +1,203 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react-native';
+import { Keyboard } from 'react-native';
+import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from '../use-keyboard-offset';
+
+jest.useFakeTimers();
+
+describe( 'useKeyboardOffset', () => {
+	beforeEach( () => {
+		Keyboard.removeAllListeners( 'keyboardDidShow' );
+		Keyboard.removeAllListeners( 'keyboardDidHide' );
+		Keyboard.removeAllListeners( 'keyboardWillShow' );
+	} );
+
+	it( 'returns the initial state', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is shown', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 250 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is hidden', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( false );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'removes all keyboard listeners when scrollEnabled changes to false', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+		const [ keyboardOffset ] = result.current;
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			0
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			0
+		);
+	} );
+
+	it( 'adds all keyboard listeners when scrollEnabled changes to true', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: false },
+			}
+		);
+		// Act
+		act( () => {
+			rerender( { scrollEnabled: true } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 250 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			1
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			1
+		);
+	} );
+
+	it( 'does not set keyboard offset to 0 when keyboard is hidden and shouldPreventAutomaticScroll is true', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( true );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+
+	it( 'handles updates to shouldPreventAutomaticScroll', () => {
+		// Arrange
+		const preventScrollTrue = jest.fn( () => true );
+		const preventScrollFalse = jest.fn( () => false );
+
+		// Act
+		const { result, rerender } = renderHook(
+			( { shouldPreventAutomaticScroll } ) =>
+				useKeyboardOffset( true, shouldPreventAutomaticScroll ),
+			{
+				initialProps: {
+					shouldPreventAutomaticScroll: preventScrollFalse,
+				},
+			}
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 0 );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 150 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollTrue } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollFalse } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+} );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-section.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-section.native.js
new file mode 100644
index 00000000000000..7ee00cea55c664
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-section.native.js
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import useScrollToSection from '../use-scroll-to-section';
+
+describe( 'useScrollToSection', () => {
+	it( 'scrolls up to the section', () => {
+		// Arrange
+		const sectionY = 50;
+		const sectionHeight = 10;
+
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 150 };
+
+		const { result } = renderHook( () =>
+			useScrollToSection(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: sectionY,
+			animated: true,
+		} );
+	} );
+
+	it( 'scrolls down to the section', () => {
+		// Arrange
+		const sectionY = 750;
+		const sectionHeight = 10;
+
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 250 };
+
+		const { result } = renderHook( () =>
+			useScrollToSection(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( sectionY, sectionHeight );
+
+		// Assert
+		const expectedYOffset =
+			sectionY -
+			( scrollViewMeasurements.current.height -
+				( keyboardOffset + extraScrollHeight + sectionHeight ) );
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: expectedYOffset,
+			animated: true,
+		} );
+	} );
+
+	it( 'does not scroll when the ScrollView ref is not available', () => {
+		// Arrange
+		const sectionY = 50;
+		const sectionHeight = 10;
+
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: null };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+
+		const { result } = renderHook( () =>
+			useScrollToSection(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollViewRef.current ).toBeNull();
+	} );
+
+	it( 'does not scroll when the scroll is not enabled', () => {
+		// Arrange
+		const sectionY = 50;
+		const sectionHeight = 10;
+
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = false;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+
+		const { result } = renderHook( () =>
+			useScrollToSection(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).not.toHaveBeenCalled();
+	} );
+} );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll.native.js
new file mode 100644
index 00000000000000..ab34bb59b3a4e1
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-scroll.native.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useScroll from '../use-scroll';
+
+// Mock Reanimated with default mock
+jest.mock( 'react-native-reanimated', () => ( {
+	...require( 'react-native-reanimated/mock' ),
+	useAnimatedScrollHandler: jest.fn( ( args ) => args ),
+} ) );
+
+describe( 'useScroll', () => {
+	it( 'scrolls using current scroll position', () => {
+		const sectionY = 50;
+		const sectionHeight = 10;
+		const scrollViewMeasurements = { x: 0, y: 0, width: 0, height: 600 };
+		const extraScrollHeight = 50;
+		const scrollEnabled = true;
+		const shouldPreventAutomaticScroll = false;
+
+		const scrollTo = jest.fn();
+		const measureInWindow = jest.fn( ( callback ) =>
+			callback( ...Object.values( scrollViewMeasurements ) )
+		);
+		const scrollRef = { scrollTo, measureInWindow };
+		const onScroll = jest.fn();
+		const onSizeChange = jest.fn();
+
+		const { result } = renderHook( () =>
+			useScroll( {
+				scrollEnabled,
+				shouldPreventAutomaticScroll,
+				onScroll,
+				onSizeChange,
+				extraScrollHeight,
+			} )
+		);
+		const {
+			scrollViewRef,
+			onContentSizeChange,
+			scrollHandler,
+			scrollToSection,
+		} = result.current;
+
+		// Assign ref
+		scrollViewRef.current = scrollRef;
+
+		// Check content size changes
+		onContentSizeChange();
+		expect( measureInWindow ).toHaveBeenCalled();
+		expect( onSizeChange ).toHaveBeenCalled();
+
+		// Set up initial scroll offset
+		scrollHandler.onScroll( { contentOffset: { y: 150 } } );
+
+		// Scroll to section
+		scrollToSection( sectionY, sectionHeight );
+
+		// Assert
+		expect( scrollTo ).toHaveBeenCalledWith( {
+			y: sectionY,
+			animated: true,
+		} );
+	} );
+} );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-caret-position.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-caret-position.native.js
new file mode 100644
index 00000000000000..6cb9bd5be81aab
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-caret-position.native.js
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useTextInputCaretPosition from '../use-text-input-caret-position';
+
+describe( 'useTextInputCaretPosition', () => {
+	let addCaretChangeListenerSpy;
+	let removeCaretChangeListenerSpy;
+
+	beforeAll( () => {
+		addCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'addCaretChangeListener'
+		);
+		removeCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'removeCaretChangeListener'
+		);
+	} );
+
+	beforeEach( () => {
+		addCaretChangeListenerSpy.mockClear();
+		removeCaretChangeListenerSpy.mockClear();
+	} );
+
+	it( 'should add and remove caret change listener correctly', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		const { unmount } = renderHook( () =>
+			useTextInputCaretPosition( scrollEnabled )
+		);
+		unmount();
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should add caret change listener when scroll is enabled', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		renderHook( () => useTextInputCaretPosition( scrollEnabled ) );
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should remove caret change listener when scroll is enabled and then changed to disabled', () => {
+		// Arrange
+		const { rerender } = renderHook(
+			( props ) => useTextInputCaretPosition( props.scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalled();
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalled();
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-offset.native.js
new file mode 100644
index 00000000000000..850b8c09a03b91
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-text-input-offset.native.js
@@ -0,0 +1,147 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useTextInputOffset from '../use-text-input-offset';
+
+jest.mock( '@wordpress/react-native-aztec', () => ( {
+	InputState: {
+		getCurrentFocusedElement: jest.fn(),
+	},
+} ) );
+
+describe( 'useTextInputOffset', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return a function', () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBeInstanceOf( Function );
+	} );
+
+	it( 'should return null when scrollViewRef.current is null', async () => {
+		// Arrange
+		const scrollViewRef = { current: null };
+		const scrollEnabled = true;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return null when textInput is null', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			null
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return null when scroll is not enabled', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = false;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return correct offset value when caretY is not null', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		const x = 0;
+		const y = 10;
+		const width = 0;
+		const height = 100;
+		const textInput = {
+			measureLayout: jest.fn( ( _, callback ) => {
+				callback( x, y, width, height );
+			} ),
+		};
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			textInput
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset( { caretY: 10 } );
+		expect( offset ).toBe( 20 );
+	} );
+
+	it( 'should return correct offset value when caretY is -1', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		const x = 0;
+		const y = 10;
+		const width = 0;
+		const height = 100;
+		const textInput = {
+			measureLayout: jest.fn( ( _, callback ) => {
+				callback( x, y, width, height );
+			} ),
+		};
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			textInput
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset( { caretY: -1 } );
+		expect( offset ).toBe( 110 );
+	} );
+} );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js
new file mode 100644
index 00000000000000..f12b254dd9469b
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+
+import { Keyboard } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useCallback, useState, useRef } from '@wordpress/element';
+
+/**
+ * Hook that adds Keyboard listeners to get the offset space
+ * when the keyboard is opened, taking into account focused AztecViews.
+ *
+ * @param {boolean}  scrollEnabled                Whether the scroll is enabled or not.
+ * @param {Function} shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @return {[number]} Keyboard offset.
+ */
+export default function useKeyboardOffset(
+	scrollEnabled,
+	shouldPreventAutomaticScroll
+) {
+	const [ keyboardOffset, setKeyboardOffset ] = useState( 0 );
+	const timeoutRef = useRef();
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( shouldPreventAutomaticScroll() ) {
+			clearTimeout( timeoutRef.current );
+			return;
+		}
+
+		// A timeout is being used to delay resetting the offset in cases
+		// where the focus is changed to a different TextInput.
+		clearTimeout( timeoutRef.current );
+		timeoutRef.current = setTimeout( () => {
+			setKeyboardOffset( 0 );
+		}, 200 );
+	}, [ shouldPreventAutomaticScroll ] );
+
+	const onKeyboardDidShow = useCallback( ( { endCoordinates } ) => {
+		clearTimeout( timeoutRef.current );
+		setKeyboardOffset( endCoordinates.height );
+	}, [] );
+
+	const onKeyboardWillShow = useCallback( () => {
+		clearTimeout( timeoutRef.current );
+	}, [] );
+
+	useEffect( () => {
+		let willShowSubscription;
+		let showSubscription;
+		let hideSubscription;
+
+		if ( scrollEnabled ) {
+			willShowSubscription = Keyboard.addListener(
+				'keyboardWillShow',
+				onKeyboardWillShow
+			);
+			showSubscription = Keyboard.addListener(
+				'keyboardDidShow',
+				onKeyboardDidShow
+			);
+			hideSubscription = Keyboard.addListener(
+				'keyboardDidHide',
+				onKeyboardDidHide
+			);
+		} else {
+			willShowSubscription?.remove();
+			showSubscription?.remove();
+			hideSubscription?.remove();
+		}
+
+		return () => {
+			clearTimeout( timeoutRef.current );
+			willShowSubscription?.remove();
+			showSubscription?.remove();
+			hideSubscription?.remove();
+		};
+	}, [
+		onKeyboardDidHide,
+		onKeyboardDidShow,
+		onKeyboardWillShow,
+		scrollEnabled,
+	] );
+	return [ keyboardOffset ];
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js
new file mode 100644
index 00000000000000..048b6815cdec29
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-element.native.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook to scroll to a specified element by taking into account the Keyboard
+ * and the Header.
+ *
+ * @param {RefObject} scrollViewRef   Scroll view reference.
+ * @param {Function}  scrollToSection Function to scroll.
+ * @return {Function[]} Function to scroll to an element.
+ */
+export default function useScrollToElement( scrollViewRef, scrollToSection ) {
+	/**
+	 * Function to scroll to an element.
+	 *
+	 * @param {RefObject} elementRef Ref of the element.
+	 */
+	const scrollToElement = useCallback(
+		( elementRef ) => {
+			if ( ! scrollViewRef.current || ! elementRef ) {
+				return;
+			}
+
+			elementRef.current.measureLayout(
+				scrollViewRef.current,
+				( _x, y, _width, height ) => {
+					if ( height || y ) {
+						scrollToSection( Math.round( y ), height );
+					}
+				},
+				() => {}
+			);
+		},
+		[ scrollViewRef, scrollToSection ]
+	);
+
+	return [ scrollToElement ];
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js
new file mode 100644
index 00000000000000..d44895c69f678c
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
+/**
+ * Hook to scroll to a specified section by taking into account the Keyboard
+ * and the Header.
+ *
+ * @param {number}      extraScrollHeight      Extra space to not overlap the content.
+ * @param {number}      keyboardOffset         Keyboard space offset.
+ * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
+ * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
+ * @param {RefObject}   scrollViewRef          Scroll view reference.
+ * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
+ * @return {Function[]} Function to scroll to a section.
+ */
+export default function useScrollToSection(
+	extraScrollHeight,
+	keyboardOffset,
+	scrollEnabled,
+	scrollViewMeasurements,
+	scrollViewRef,
+	scrollViewYOffset
+) {
+	const { top, bottom } = useSafeAreaInsets();
+	const insets = top + bottom;
+
+	/**
+	 * Function to scroll to a section.
+	 *
+	 * @param {Object} section        Section data to scroll to.
+	 * @param {number} section.y      Y-coordinate of of the section.
+	 * @param {number} section.height Height of the section.
+	 */
+	const scrollToSection = useCallback(
+		( sectionY, sectionHeight ) => {
+			if (
+				! scrollViewRef.current ||
+				! scrollEnabled ||
+				! scrollViewMeasurements.current
+			) {
+				return;
+			}
+
+			const currentScrollViewYOffset = Math.max(
+				0,
+				scrollViewYOffset.value
+			);
+
+			// Scroll to the top of the section.
+			if ( sectionY < currentScrollViewYOffset ) {
+				scrollViewRef.current.scrollTo( {
+					y: sectionY,
+					animated: true,
+				} );
+				return;
+			}
+
+			const availableScreenSpace = Math.abs(
+				Math.floor(
+					scrollViewMeasurements.current.height -
+						( keyboardOffset + extraScrollHeight + sectionHeight )
+				)
+			);
+			const maxOffset = Math.floor(
+				currentScrollViewYOffset + availableScreenSpace
+			);
+
+			const isAtTheTop =
+				sectionY < scrollViewMeasurements.current.y + insets;
+
+			// Scroll to the bottom of the section.
+			if ( sectionY > maxOffset && ! isAtTheTop ) {
+				scrollViewRef.current.scrollTo( {
+					y: sectionY - availableScreenSpace,
+					animated: true,
+				} );
+			}
+		},
+		[
+			extraScrollHeight,
+			insets,
+			keyboardOffset,
+			scrollEnabled,
+			scrollViewMeasurements,
+			scrollViewRef,
+			scrollViewYOffset,
+		]
+	);
+
+	return [ scrollToSection ];
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll.native.js
new file mode 100644
index 00000000000000..faba873a9903be
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-scroll.native.js
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+
+import { useWindowDimensions } from 'react-native';
+import {
+	useAnimatedScrollHandler,
+	useSharedValue,
+} from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from './use-keyboard-offset';
+import useScrollToSection from './use-scroll-to-section';
+import useScrollToElement from './use-scroll-to-element';
+
+export default function useScroll( {
+	scrollEnabled,
+	shouldPreventAutomaticScroll,
+	onScroll,
+	onSizeChange,
+	extraScrollHeight,
+} ) {
+	const scrollViewRef = useRef();
+	const scrollViewMeasurements = useRef();
+	const scrollViewYOffset = useSharedValue( -1 );
+	const lastScrollTo = useRef( {
+		clientId: null,
+	} );
+
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = windowWidth >= windowHeight;
+
+	const [ keyboardOffset ] = useKeyboardOffset(
+		scrollEnabled,
+		shouldPreventAutomaticScroll
+	);
+
+	const scrollHandler = useAnimatedScrollHandler( {
+		onScroll: ( event ) => {
+			const { contentOffset } = event;
+			scrollViewYOffset.value = contentOffset.y;
+			onScroll( event );
+		},
+	} );
+
+	// When the orientation changes, the ScrollView measurements
+	// need to be re-calculated.
+	useEffect( () => {
+		scrollViewMeasurements.current = null;
+	}, [ isLandscape ] );
+
+	const [ scrollToSection ] = useScrollToSection(
+		extraScrollHeight,
+		keyboardOffset,
+		scrollEnabled,
+		scrollViewMeasurements,
+		scrollViewRef,
+		scrollViewYOffset
+	);
+	const [ scrollToElement ] = useScrollToElement(
+		scrollViewRef,
+		scrollToSection
+	);
+
+	const measureScrollView = useCallback( () => {
+		if ( scrollViewRef.current ) {
+			scrollViewRef.current.measureInWindow( ( _x, y, width, height ) => {
+				scrollViewMeasurements.current = { y, width, height };
+			} );
+		}
+	}, [ scrollViewRef ] );
+
+	const onContentSizeChange = useCallback( () => {
+		if ( onSizeChange ) {
+			onSizeChange();
+		}
+
+		// Sets the first values when the content size changes.
+		if ( ! scrollViewMeasurements.current ) {
+			measureScrollView();
+		}
+	}, [ measureScrollView, onSizeChange ] );
+
+	return {
+		scrollViewRef,
+		scrollHandler,
+		keyboardOffset,
+		scrollToSection,
+		scrollToElement,
+		onContentSizeChange,
+		lastScrollTo,
+	};
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js
new file mode 100644
index 00000000000000..49aa873fc66efc
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Hook that listens to caret changes from AztecView TextInputs.
+ *
+ * @param {boolean} scrollEnabled Whether the scroll is enabled or not.
+ * @return {[number]} Current caret's data.
+ */
+export default function useTextInputCaretPosition( scrollEnabled ) {
+	const [ currentCaretData, setCurrentCaretData ] = useState();
+
+	const onCaretChange = useCallback( ( caret ) => {
+		setCurrentCaretData( caret );
+	}, [] );
+
+	useEffect( () => {
+		if ( scrollEnabled ) {
+			RCTAztecView.InputState.addCaretChangeListener( onCaretChange );
+		} else {
+			RCTAztecView.InputState.removeCaretChangeListener( onCaretChange );
+		}
+
+		return () => {
+			if ( scrollEnabled ) {
+				RCTAztecView.InputState.removeCaretChangeListener(
+					onCaretChange
+				);
+			}
+		};
+	}, [ scrollEnabled, onCaretChange ] );
+	return [ currentCaretData ];
+}
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-offset.native.js
new file mode 100644
index 00000000000000..1c69cbcc48c45f
--- /dev/null
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/use-text-input-offset.native.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook that calculates the currently focused TextInput's current
+ * caret Y coordinate position.
+ *
+ * @param {boolean}   scrollEnabled Whether the scroll is enabled or not.
+ * @param {RefObject} scrollViewRef ScrollView reference.
+ * @return {[Function]} Function to get the current TextInput's offset.
+ */
+export default function useTextInputOffset( scrollEnabled, scrollViewRef ) {
+	const getTextInputOffset = useCallback(
+		async ( caret ) => {
+			const { caretY = null } = caret ?? {};
+			const textInput =
+				RCTAztecView.InputState.getCurrentFocusedElement();
+
+			return new Promise( ( resolve ) => {
+				if (
+					scrollViewRef.current &&
+					textInput &&
+					scrollEnabled &&
+					caretY !== null
+				) {
+					textInput.measureLayout(
+						scrollViewRef.current,
+						( _x, y, _width, height ) => {
+							const caretYOffset =
+								// For cases where the caretY value is -1
+								// we use the y + height value, e.g the current
+								// character index is not valid or out of bounds
+								// see https://github.com/wordpress-mobile/AztecEditor-iOS/blob/4d0522d67b0056ac211466caaa76936cc5b4f947/Aztec/Classes/TextKit/TextView.swift#L762
+								caretY >= 0 && caretY < height
+									? y + caretY
+									: y + height;
+							resolve( Math.round( Math.abs( caretYOffset ) ) );
+						},
+						() => resolve( null )
+					);
+				} else {
+					resolve( null );
+				}
+			} );
+		},
+		[ scrollEnabled, scrollViewRef ]
+	);
+
+	return [ getTextInputOffset ];
+}
diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js
index ffde5b28c26171..d6eb354287b9a3 100644
--- a/packages/components/src/mobile/link-picker/index.native.js
+++ b/packages/components/src/mobile/link-picker/index.native.js
@@ -9,7 +9,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
  */
 import { useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { BottomSheet, Icon } from '@wordpress/components';
 import { getProtocol, isURL, prependHTTP } from '@wordpress/url';
 import { link, cancelCircleFilled } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -20,6 +19,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import LinkPickerResults from './link-picker-results';
 import NavBar from '../bottom-sheet/nav-bar';
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import Icon from '../../icon';
 
 // This creates a search suggestion for adding a url directly.
 export const createDirectEntry = ( value ) => {
@@ -57,10 +58,8 @@ export const LinkPicker = ( {
 	onLinkPicked,
 	onCancel: cancel,
 } ) => {
-	const [ { value, clipboardUrl }, setValue ] = useState( {
-		value: initialValue,
-		clipboardUrl: '',
-	} );
+	const [ value, setValue ] = useState( initialValue );
+	const [ clipboardUrl, setClipboardUrl ] = useState( '' );
 	const directEntry = createDirectEntry( value );
 
 	// The title of a direct entry is displayed as the raw input value, but if we
@@ -74,7 +73,8 @@ export const LinkPicker = ( {
 	};
 
 	const clear = () => {
-		setValue( { value: '', clipboardUrl } );
+		setValue( '' );
+		setClipboardUrl( '' );
 	};
 
 	const omniCellStyle = usePreferredColorSchemeStyle(
@@ -89,11 +89,8 @@ export const LinkPicker = ( {
 
 	useEffect( () => {
 		getURLFromClipboard()
-			.then( ( url ) => setValue( { value, clipboardUrl: url } ) )
-			.catch( () => setValue( { value, clipboardUrl: '' } ) );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+			.then( setClipboardUrl )
+			.catch( () => setClipboardUrl( '' ) );
 	}, [] );
 
 	// TODO: Localize the accessibility label.
@@ -115,9 +112,7 @@ export const LinkPicker = ( {
 					autoCapitalize="none"
 					autoCorrect={ false }
 					keyboardType="url"
-					onChangeValue={ ( newValue ) => {
-						setValue( { value: newValue, clipboardUrl } );
-					} }
+					onChangeValue={ setValue }
 					onSubmit={ onSubmit }
 					/* eslint-disable-next-line jsx-a11y/no-autofocus */
 					autoFocus
diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js
index a3a9c7e9e0a743..4751ebc1ee2111 100644
--- a/packages/components/src/mobile/link-picker/link-picker-results.native.js
+++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js
@@ -6,7 +6,6 @@ import { ActivityIndicator, FlatList, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -15,6 +14,8 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import styles from './styles.scss';
+import BottomSheet from '../bottom-sheet';
+import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context';
 
 const PER_PAGE = 20;
 const REQUEST_DEBOUNCE_DELAY = 400;
@@ -74,6 +75,8 @@ export default function LinkPickerResults( {
 		return {
 			fetchMoreSuggestions: debounce( fetchMore, REQUEST_DEBOUNCE_DELAY ),
 		};
+		// Not adding dependencies for now, to avoid introducing a regression
+		// (see https://github.com/WordPress/gutenberg/pull/23922#discussion_r1170634879).
 	}, [] );
 
 	// Prevent setting state when unmounted.
@@ -86,15 +89,13 @@ export default function LinkPickerResults( {
 		setHasAllSuggestions( false );
 		setLinks( [ directEntry ] );
 		fetchMoreSuggestions( { query, links: [ directEntry ] } );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ query ] );
 
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );
 
 	const spinner = ! hasAllSuggestions && meetsThreshold( query ) && (
-		<View style={ styles.spinner }>
+		<View style={ styles.spinner } testID="link-picker-loading">
 			<ActivityIndicator animating />
 		</View>
 	);
diff --git a/packages/components/src/mobile/link-picker/link-picker-screen.native.js b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
index 7bc1dbd7009b62..999c9053c59862 100644
--- a/packages/components/src/mobile/link-picker/link-picker-screen.native.js
+++ b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
@@ -53,9 +53,7 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 				onCancel={ onCancel }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ inputValue ] );
 };
 
diff --git a/packages/components/src/mobile/link-picker/test/performance/index.native.js b/packages/components/src/mobile/link-picker/test/performance/index.native.js
new file mode 100644
index 00000000000000..3736bd39b9c607
--- /dev/null
+++ b/packages/components/src/mobile/link-picker/test/performance/index.native.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { act, measurePerformance } from 'test/helpers';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+/**
+ * Internal dependencies
+ */
+import { LinkPicker } from '../../index';
+
+describe( 'LinkPicker', () => {
+	const onLinkPicked = jest.fn();
+	const onCancel = jest.fn();
+	const clipboardResult = Promise.resolve( '' );
+	Clipboard.getString.mockReturnValue( clipboardResult );
+
+	it( 'performance is stable when clipboard results do not change', async () => {
+		const scenario = async () => {
+			// Given the clipboard result is an empty string, there are no
+			// user-facing changes to query. Thus, we must await the promise
+			// itself.
+			await act( () => clipboardResult );
+		};
+
+		await measurePerformance(
+			<LinkPicker
+				onLinkPicked={ onLinkPicked }
+				onCancel={ onCancel }
+				value=""
+			/>,
+			{ scenario }
+		);
+	} );
+} );
diff --git a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js b/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js
deleted file mode 100644
index 02d29326e303e2..00000000000000
--- a/packages/components/src/mobile/link-settings/image-link-destinations-screen.native.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/**
- * External dependencies
- */
-import { useNavigation, useRoute } from '@react-navigation/native';
-import { StyleSheet } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check, chevronRight } from '@wordpress/icons';
-import { blockSettingsScreens } from '@wordpress/block-editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import PanelBody from '../../panel/body';
-import BottomSheet from '../bottom-sheet';
-
-const LINK_DESTINATION_NONE = 'none';
-const LINK_DESTINATION_MEDIA = 'media';
-const LINK_DESTINATION_ATTACHMENT = 'attachment';
-const LINK_DESTINATION_CUSTOM = 'custom';
-
-function LinkDestination( {
-	children,
-	isSelected,
-	label,
-	onPress,
-	value,
-	valueStyle,
-} ) {
-	const optionIcon = usePreferredColorSchemeStyle(
-		styles.optionIcon,
-		styles.optionIconDark
-	);
-	return (
-		<BottomSheet.Cell
-			icon={ check }
-			iconStyle={ StyleSheet.flatten( [
-				optionIcon,
-				! isSelected && styles.unselectedOptionIcon,
-			] ) }
-			label={ label }
-			leftAlign
-			onPress={ onPress }
-			value={ value }
-			valueStyle={ valueStyle }
-			separatorType="leftMargin"
-		>
-			{ children }
-		</BottomSheet.Cell>
-	);
-}
-
-function ImageLinkDestinationsScreen( props ) {
-	const navigation = useNavigation();
-	const route = useRoute();
-	const { url = '' } = props;
-	const {
-		inputValue = url,
-		imageUrl,
-		attachmentPageUrl,
-		linkDestination,
-	} = route.params || {};
-
-	function goToLinkPicker() {
-		navigation.navigate( blockSettingsScreens.linkPicker, {
-			inputValue:
-				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
-		} );
-	}
-
-	const setLinkDestination = ( newLinkDestination ) => () => {
-		let newUrl;
-		switch ( newLinkDestination ) {
-			case LINK_DESTINATION_MEDIA:
-				newUrl = imageUrl;
-				break;
-			case LINK_DESTINATION_ATTACHMENT:
-				newUrl = attachmentPageUrl;
-				break;
-			default:
-				newUrl = '';
-				break;
-		}
-
-		navigation.navigate( blockSettingsScreens.settings, {
-			// The `inputValue` name is reused from LinkPicker, as it helps avoid
-			// bugs from stale values remaining in the React Navigation route
-			// parameters.
-			inputValue: newUrl,
-			// Clear link text value that may be set from LinkPicker.
-			text: '',
-		} );
-	};
-
-	return (
-		<>
-			<BottomSheet.NavBar>
-				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
-				<BottomSheet.NavBar.Heading>
-					{ __( 'Link To' ) }
-				</BottomSheet.NavBar.Heading>
-			</BottomSheet.NavBar>
-			<PanelBody>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_NONE }
-					label={ __( 'None' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
-				/>
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
-					label={ __( 'Media File' ) }
-					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
-				/>
-				{ !! attachmentPageUrl && (
-					<LinkDestination
-						isSelected={
-							linkDestination === LINK_DESTINATION_ATTACHMENT
-						}
-						label={ __( 'Attachment Page' ) }
-						onPress={ setLinkDestination(
-							LINK_DESTINATION_ATTACHMENT
-						) }
-					/>
-				) }
-				<LinkDestination
-					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
-					label={ __( 'Custom URL' ) }
-					onPress={ goToLinkPicker }
-					value={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? inputValue
-							: ''
-					}
-					valueStyle={
-						linkDestination === LINK_DESTINATION_CUSTOM
-							? undefined
-							: styles.placeholderTextColor
-					}
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</LinkDestination>
-			</PanelBody>
-		</>
-	);
-}
-
-export default ImageLinkDestinationsScreen;
diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
index e80672a3103fa6..a01e33b410a5c0 100644
--- a/packages/components/src/mobile/link-settings/index.native.js
+++ b/packages/components/src/mobile/link-settings/index.native.js
@@ -101,9 +101,7 @@ function LinkSettings( {
 		if ( onHandleClosingBottomSheet ) {
 			onHandleClosingBottomSheet( onCloseSettingsSheet );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
 
 	useEffect( () => {
@@ -115,9 +113,7 @@ function LinkSettings( {
 		if ( url !== urlInputValue ) {
 			setUrlInputValue( url || '' );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ url ] );
 
 	useEffect( () => {
@@ -141,9 +137,7 @@ function LinkSettings( {
 		if ( prevEditorSidebarOpened && ! editorSidebarOpened ) {
 			onSetAttributes();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ editorSidebarOpened, isVisible ] );
 
 	useEffect( () => {
@@ -156,9 +150,7 @@ function LinkSettings( {
 				url: prependHTTP( urlValue ),
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlValue ] );
 
 	const onChangeURL = useCallback(
@@ -188,9 +180,7 @@ function LinkSettings( {
 				rel: linkRelInputValue,
 			} );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ urlInputValue, labelInputValue, linkRelInputValue, setAttributes ] );
 
 	const onCloseSettingsSheet = useCallback( () => {
@@ -223,9 +213,7 @@ function LinkSettings( {
 				rel: updatedRel,
 			} );
 		},
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 		[ linkRelInputValue ]
 	);
 
diff --git a/packages/components/src/mobile/link-settings/link-rel.native.js b/packages/components/src/mobile/link-settings/link-rel.native.js
index bc8060ec405a88..041acb2b33aaad 100644
--- a/packages/components/src/mobile/link-settings/link-rel.native.js
+++ b/packages/components/src/mobile/link-settings/link-rel.native.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 
 export default (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/components/src/mobile/link-settings/link-settings-navigation.native.js b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js
index 7f82ca49a96769..375dae450fbcef 100644
--- a/packages/components/src/mobile/link-settings/link-settings-navigation.native.js
+++ b/packages/components/src/mobile/link-settings/link-settings-navigation.native.js
@@ -23,7 +23,7 @@ function LinkSettingsNavigation( props ) {
 			isVisible={ props.isVisible }
 			onClose={ props.onClose }
 			onDismiss={ props.onDismiss }
-			testID={ props.testID }
+			testID="link-settings-navigation"
 			hideHeader
 			hasNavigation
 		>
diff --git a/packages/components/src/mobile/link-settings/link-settings-screen.native.js b/packages/components/src/mobile/link-settings/link-settings-screen.native.js
index d04bd0699b7a54..7147becd67b22d 100644
--- a/packages/components/src/mobile/link-settings/link-settings-screen.native.js
+++ b/packages/components/src/mobile/link-settings/link-settings-screen.native.js
@@ -37,9 +37,7 @@ const LinkSettingsScreen = ( props ) => {
 				urlValue={ inputValue }
 			/>
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ props, inputValue, navigation, route ] );
 };
 
diff --git a/packages/components/src/mobile/link-settings/style.native.scss b/packages/components/src/mobile/link-settings/style.native.scss
index 137c2e32dfc768..b9545b80ec4ab1 100644
--- a/packages/components/src/mobile/link-settings/style.native.scss
+++ b/packages/components/src/mobile/link-settings/style.native.scss
@@ -2,20 +2,3 @@
 	padding-left: 0;
 	padding-right: 0;
 }
-
-// used in both light and dark modes
-.placeholderTextColor {
-	color: #87a6bc;
-}
-
-.optionIcon {
-	color: $blue-50;
-}
-
-.optionIconDark {
-	color: $blue-30;
-}
-
-.unselectedOptionIcon {
-	opacity: 0;
-}
diff --git a/packages/components/src/mobile/link-settings/test/edit.native.js b/packages/components/src/mobile/link-settings/test/edit.native.js
index 5ce1ae6a90fb3b..715a4478207453 100644
--- a/packages/components/src/mobile/link-settings/test/edit.native.js
+++ b/packages/components/src/mobile/link-settings/test/edit.native.js
@@ -4,7 +4,11 @@
  * External dependencies
  */
 import Clipboard from '@react-native-clipboard/clipboard';
-import { fireEvent, initializeEditor, waitFor } from 'test/helpers';
+import {
+	fireEvent,
+	initializeEditor,
+	waitForElementToBeRemoved,
+} from 'test/helpers';
 /**
  * WordPress dependencies
  */
@@ -12,6 +16,19 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
+// Mock debounce to prevent potentially belated state updates.
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
+// Mock link suggestions that are fetched by the link picker
+// when typing a search query.
+jest.mock( '@wordpress/core-data/src/fetch', () => ( {
+	__experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
+} ) );
+
 /**
  * Utility function to unregister all core block types previously registered
  * when staging the Redux Store `beforeAll` integration tests start running.
@@ -34,9 +51,7 @@ describe.each( [
 			type: 'core/button',
 			initialHtml: `
 				<!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-				<div class="wp-block-button">
-					<a class="wp-block-button__link" style="border-radius:5px">Link</a>
-				</div>
+				<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px">Link</a></div>
 				<!-- /wp:button -->
 			`,
 			toJSON: () => 'core/button',
@@ -76,24 +91,18 @@ describe.each( [
 		Clipboard.getString.mockReturnValue( url );
 
 		// Act.
-		const block = await waitFor( () =>
-			subject.getByLabelText(
-				type === 'core/image' ? /Image Block/ : /Button Block/
-			)
+		const [ block ] = await subject.findAllByLabelText(
+			type === 'core/image' ? /Image Block/ : /Button Block/
 		);
 		fireEvent.press( block );
 		fireEvent.press( block );
-		fireEvent.press(
-			await waitFor( () => subject.getByLabelText( 'Open Settings' ) )
-		);
+		fireEvent.press( await subject.findByLabelText( 'Open Settings' ) );
 
 		// Assert.
-		const linkToField = await waitFor( () =>
-			subject.getByLabelText(
-				`Link to, ${
-					type === 'core/image' ? 'None' : 'Search or type URL'
-				}`
-			)
+		const linkToField = await subject.findByLabelText(
+			`Link to, ${
+				type === 'core/image' ? 'None' : 'Search or type URL'
+			}`
 		);
 		expect( linkToField ).toBeTruthy();
 	} );
@@ -113,37 +122,25 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					)
+				const [ block ] = await subject.findAllByLabelText(
+					type === 'core/image' ? /Image Block/ : /Button Block/
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
+				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText( 'Open Settings' )
-					)
-				);
-				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
+					subject.getByLabelText(
+						`Link to, ${
+							type === 'core/image'
+								? 'None'
+								: 'Search or type URL'
+						}`
 					)
 				);
 				if ( type === 'core/image' ) {
-					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( /Custom URL/ )
-						)
-					);
+					fireEvent.press( subject.getByLabelText( /Custom URL/ ) );
 				}
-				await waitFor( () => subject.getByLabelText( 'Apply' ) );
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
@@ -166,60 +163,48 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					)
+				const [ block ] = await subject.findAllByLabelText(
+					type === 'core/image' ? /Image Block/ : /Button Block/
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
+				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText( 'Open Settings' )
-					)
-				);
-				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
+					subject.getByLabelText(
+						`Link to, ${
+							type === 'core/image'
+								? 'None'
+								: 'Search or type URL'
+						}`
 					)
 				);
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Custom URL. Empty' )
-						)
+						subject.getByLabelText( 'Custom URL. Empty' )
 					);
 				}
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Copy URL from the clipboard, ${ url }`
-						)
+					await subject.findByLabelText(
+						`Copy URL from the clipboard, ${ url }`
 					)
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image' ? 'Custom URL' : url
-							}`
-						)
+					await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image' ? 'Custom URL' : url
+						}`
 					)
 				);
+
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( `Custom URL, ${ url }` )
-						)
+						subject.getByLabelText( `Custom URL, ${ url }` )
 					);
 				}
-				await waitFor( () => subject.getByLabelText( 'Apply' ) );
+				await waitForElementToBeRemoved( () =>
+					subject.getByTestId( 'link-picker-loading' )
+				);
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
@@ -245,51 +230,37 @@ describe.each( [
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act.
-					const block = await waitFor( () =>
-						subject.getByLabelText(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
-						)
+					const [ block ] = await subject.findAllByLabelText(
+						type === 'core/image' ? /Image Block/ : /Button Block/
 					);
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Open Settings' )
-						)
+						subject.getByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
+						subject.getByLabelText(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await waitFor( () =>
-								subject.getByLabelText( /Custom URL/ )
-							)
+							subject.getByLabelText( /Custom URL/ )
 						);
 					}
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Copy URL from the clipboard, ${ url }`
-						)
+					await subject.findByLabelText(
+						`Copy URL from the clipboard, ${ url }`
 					);
 
 					// Assert.
-					const clipboardUrl = await waitFor( () =>
-						subject.getByText( url )
-					);
+					const clipboardUrl = await subject.findByText( url );
 					expect( clipboardUrl ).toBeTruthy();
-					const clipboardNote = await waitFor( () =>
-						subject.getByText( __( 'From clipboard' ) )
+					const clipboardNote = await subject.findByText(
+						__( 'From clipboard' )
 					);
 					expect( clipboardNote ).toBeTruthy();
 				}
@@ -312,53 +283,39 @@ describe.each( [
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act.
-					const block = await waitFor( () =>
-						subject.getByLabelText(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
-						)
+					const [ block ] = await subject.findAllByLabelText(
+						type === 'core/image' ? /Image Block/ : /Button Block/
 					);
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Open Settings' )
-						)
+						subject.getByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
+						subject.getByLabelText(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await waitFor( () =>
-								subject.getByLabelText( /Custom URL/ )
-							)
+							subject.getByLabelText( /Custom URL/ )
 						);
 					}
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Copy URL from the clipboard, ${ url }`
-							)
+						await subject.findByLabelText(
+							`Copy URL from the clipboard, ${ url }`
 						)
 					);
 
 					// Assert.
-					const linkToField = await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image' ? 'Custom URL' : url
-							}`
-						)
+					const linkToField = await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image' ? 'Custom URL' : url
+						}`
 					);
 					expect( linkToField ).toBeTruthy();
 				}
diff --git a/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js b/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js
index ddf2dd5d8f622b..9d8cf2a844e9b1 100644
--- a/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js
+++ b/packages/components/src/mobile/link-settings/test/link-settings-navigation.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Keyboard, Platform } from 'react-native';
-import { render, fireEvent, waitFor } from 'test/helpers';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { render, fireEvent, waitFor } from 'test/helpers';
 import LinkSettingsNavigation from '../link-settings-navigation';
 
 beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+	jest.useFakeTimers( { legacyFakeTimers: true } );
 } );
 
 afterAll( () => {
@@ -40,13 +40,8 @@ describe( 'Android', () => {
 	it( 'improves back animation performance by dismissing keyboard beforehand', async () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
-		fireEvent.press(
-			screen.getByLabelText( 'Link to, Search or type URL' )
-		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -57,9 +52,7 @@ describe( 'Android', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Apply' )
-		);
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -81,9 +74,7 @@ describe( 'iOS', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -94,9 +85,7 @@ describe( 'iOS', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Apply' )
-		);
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js
index 471bd7d23ecfa5..08bedbb804a1a3 100644
--- a/packages/components/src/mobile/media-edit/index.native.js
+++ b/packages/components/src/mobile/media-edit/index.native.js
@@ -3,12 +3,16 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
 import {
 	requestMediaEditor,
 	mediaSources,
 } from '@wordpress/react-native-bridge';
 
+/**
+ * Internal dependencies
+ */
+import Picker from '../picker';
+
 export const MEDIA_TYPE_IMAGE = 'image';
 
 export const MEDIA_EDITOR = 'MEDIA_EDITOR';
@@ -103,7 +107,7 @@ export class MediaEdit extends Component {
 				hideCancelButton
 				ref={ ( instance ) => ( this.picker = instance ) }
 				options={ this.getMediaOptionsItems() }
-				leftAlign={ true }
+				leftAlign
 				onChange={ this.onPickerSelect }
 				// translators: %s: block title e.g: "Paragraph".
 				title={ __( 'Media options' ) }
diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js
index 0db2826ddb16ca..06d2665f189c88 100644
--- a/packages/components/src/mobile/picker/index.android.js
+++ b/packages/components/src/mobile/picker/index.android.js
@@ -9,13 +9,14 @@ import { View } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { PanelBody, TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BottomSheet from '../bottom-sheet';
 import styles from './styles.scss';
+import PanelBody from '../../panel/body';
+import TextControl from '../../text-control';
 
 function Separator() {
 	const separatorStyle = usePreferredColorSchemeStyle(
@@ -61,7 +62,7 @@ export default class Picker extends Component {
 					icon={ option.icon }
 					leftAlign={ leftAlign }
 					label={ option.label }
-					separatorType={ 'none' }
+					separatorType="none"
 					onPress={ () => this.onCellPress( option.value ) }
 					disabled={ option.disabled }
 					style={
@@ -93,7 +94,7 @@ export default class Picker extends Component {
 						<TextControl
 							label={ __( 'Cancel' ) }
 							onPress={ this.onClose }
-							separatorType={ 'none' }
+							separatorType="none"
 						/>
 					) }
 				</PanelBody>
diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js
index dac31ded159be0..a6f98465e7e498 100644
--- a/packages/components/src/mobile/picker/index.ios.js
+++ b/packages/components/src/mobile/picker/index.ios.js
@@ -9,13 +9,13 @@ import { ActionSheetIOS } from 'react-native';
 import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { BottomSheetContext } from '@wordpress/components';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 
 class Picker extends Component {
 	presentPicker() {
diff --git a/packages/components/src/mobile/readable-content-view/index.native.js b/packages/components/src/mobile/readable-content-view/index.native.js
deleted file mode 100644
index 59cdd224c81ca4..00000000000000
--- a/packages/components/src/mobile/readable-content-view/index.native.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Dimensions } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
-import { ALIGNMENT_BREAKPOINTS, WIDE_ALIGNMENTS } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const PIXEL_RATIO = 2;
-
-const ReadableContentView = ( { align, reversed, children, style } ) => {
-	const { width, height } = Dimensions.get( 'window' );
-	const [ windowWidth, setWindowWidth ] = useState( width );
-	const [ windowRatio, setWindowRatio ] = useState( width / height );
-
-	function onDimensionsChange( { window } ) {
-		setWindowWidth( window.width );
-		setWindowRatio( window.width / window.height );
-	}
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
-
-	function getWideStyles() {
-		if (
-			windowRatio >= PIXEL_RATIO &&
-			windowWidth < ALIGNMENT_BREAKPOINTS.large
-		) {
-			return styles.wideLandscape;
-		}
-
-		if ( windowWidth <= ALIGNMENT_BREAKPOINTS.small ) {
-			return { maxWidth: windowWidth };
-		}
-
-		if (
-			windowWidth >= ALIGNMENT_BREAKPOINTS.medium &&
-			windowWidth < ALIGNMENT_BREAKPOINTS.wide
-		) {
-			return styles.wideMedium;
-		}
-	}
-
-	return (
-		<View style={ styles.container }>
-			<View
-				style={ [
-					reversed
-						? styles.reversedCenteredContent
-						: styles.centeredContent,
-					style,
-					styles[ align ],
-					align === WIDE_ALIGNMENTS.alignments.wide &&
-						getWideStyles(),
-				] }
-			>
-				{ children }
-			</View>
-		</View>
-	);
-};
-
-const isContentMaxWidth = () => {
-	const { width } = Dimensions.get( 'window' );
-	return width > styles.centeredContent.maxWidth;
-};
-
-ReadableContentView.isContentMaxWidth = isContentMaxWidth;
-
-export default ReadableContentView;
diff --git a/packages/components/src/mobile/readable-content-view/style.native.scss b/packages/components/src/mobile/readable-content-view/style.native.scss
deleted file mode 100644
index 2560d7ac6b3e1c..00000000000000
--- a/packages/components/src/mobile/readable-content-view/style.native.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.container {
-	align-items: center;
-}
-
-.centeredContent {
-	width: 100%;
-	max-width: 580;
-}
-
-.reversedCenteredContent {
-	flex-direction: column-reverse;
-	width: 100%;
-	max-width: 580;
-}
-
-.full {
-	max-width: 100%;
-}
-
-.wide {
-	max-width: 1054;
-}
-
-.wideMedium {
-	max-width: 770;
-}
-
-.wideLandscape {
-	max-width: 662;
-}
diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js
index b3270e37120e3b..36b92bb0d4ea32 100644
--- a/packages/components/src/mobile/segmented-control/index.native.js
+++ b/packages/components/src/mobile/segmented-control/index.native.js
@@ -74,18 +74,14 @@ const SegmentedControls = ( {
 	useEffect( () => {
 		setActiveSegmentIndex( selectedSegmentIndex );
 		segmentHandler( segments[ selectedSegmentIndex ] );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	useEffect( () => {
 		positionAnimationValue.setValue(
 			calculateEndValue( activeSegmentIndex )
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ segmentsDimensions ] );
 
 	const containerStyle = usePreferredColorSchemeStyle(
@@ -140,8 +136,8 @@ const SegmentedControls = ( {
 		styles.selectedDark
 	);
 
-	const width = segmentsDimensions[ activeSegmentIndex ].width;
-	const height = segmentsDimensions[ activeSegmentIndex ].height;
+	const width = segmentsDimensions[ activeSegmentIndex ]?.width;
+	const height = segmentsDimensions[ activeSegmentIndex ]?.height;
 
 	const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];
 
@@ -149,6 +145,17 @@ const SegmentedControls = ( {
 		<View style={ styles.row }>
 			<View style={ styles.flex }>{ addonLeft }</View>
 			<View style={ [ containerStyle, isIOS && styles.containerIOS ] }>
+				<Animated.View
+					style={ [
+						{
+							width,
+							left: positionAnimationValue,
+							height,
+						},
+						selectedStyle,
+						outlineStyle,
+					] }
+				/>
 				{ segments.map( ( segment, index ) => {
 					return (
 						<Segment
@@ -162,7 +169,7 @@ const SegmentedControls = ( {
 							accessibilityState={ {
 								selected: activeSegmentIndex === index,
 							} }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityLabel={ segment }
 							accessibilityHint={ `${ index + 1 } on ${
 								segments.length
@@ -170,17 +177,6 @@ const SegmentedControls = ( {
 						/>
 					);
 				} ) }
-				<Animated.View
-					style={ [
-						{
-							width,
-							left: positionAnimationValue,
-							height,
-						},
-						selectedStyle,
-						outlineStyle,
-					] }
-				/>
 			</View>
 			<View style={ styles.flex }>{ addonRight }</View>
 		</View>
diff --git a/packages/components/src/mobile/utils/alignments.native.js b/packages/components/src/mobile/utils/alignments.native.js
index 98635ea4681ada..f1f737d7ed367a 100644
--- a/packages/components/src/mobile/utils/alignments.native.js
+++ b/packages/components/src/mobile/utils/alignments.native.js
@@ -10,8 +10,10 @@ export const WIDE_ALIGNMENTS = {
 	},
 	excludeBlocks: [ 'core/heading' ],
 	notInnerContainers: [
+		'core/image',
 		'core/separator',
 		'core/media-text',
+		'core/quote',
 		'core/pullquote',
 	],
 };
diff --git a/packages/components/src/mobile/utils/get-px-from-css-unit.native.js b/packages/components/src/mobile/utils/get-px-from-css-unit.native.js
new file mode 100644
index 00000000000000..8689de98696095
--- /dev/null
+++ b/packages/components/src/mobile/utils/get-px-from-css-unit.native.js
@@ -0,0 +1,329 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit( cssUnit ) {
+	const match = cssUnit
+		?.trim()
+		.match(
+			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+		);
+	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
+		return { value: parseFloat( cssUnit ), unit: 'px' };
+	}
+	return match
+		? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }
+		: { value: cssUnit, unit: undefined };
+}
+/**
+ * Evaluate a math expression.
+ *
+ * @param {string} expression
+ * @return {number} evaluated expression.
+ */
+function calculate( expression ) {
+	try {
+		return Function( `'use strict'; return (${ expression })` )();
+	} catch ( err ) {
+		return null;
+	}
+}
+
+/**
+ * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
+ *
+ * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
+ * @param {Object} options
+ * @return {string} unit containing the unit in PX.
+ */
+function getFunctionUnitValue( functionUnitValue, options ) {
+	const functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );
+
+	const units = functionUnit
+		.slice( 1 )
+		.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )
+		.filter( Boolean );
+
+	switch ( functionUnit[ 0 ] ) {
+		case 'min':
+			return Math.min( ...units ) + 'px';
+		case 'max':
+			return Math.max( ...units ) + 'px';
+		case 'clamp':
+			if ( units.length !== 3 ) {
+				return null;
+			}
+			if ( units[ 1 ] < units[ 0 ] ) {
+				return units[ 0 ] + 'px';
+			}
+			if ( units[ 1 ] > units[ 2 ] ) {
+				return units[ 2 ] + 'px';
+			}
+			return units[ 1 ] + 'px';
+		case 'calc':
+			return units[ 0 ] + 'px';
+	}
+}
+
+/**
+ * Take a css function such as min, max, calc, clamp and returns parsedUnit
+ *
+ * How this works for the nested function is that it first replaces the inner function call.
+ * Then it tackles the outer onces.
+ * So for example: min( max(25px, 35px), 40px )
+ * in the first pass we would replace max(25px, 35px) with 35px.
+ * then we would try to evaluate min( 35px, 40px )
+ * and then finally return 35px.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit object.
+ */
+function parseUnitFunction( cssUnit ) {
+	while ( true ) {
+		const currentCssUnit = cssUnit;
+		const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
+		const matches = regExp.exec( cssUnit ) || [];
+		if ( matches[ 0 ] ) {
+			const functionUnitValue = getFunctionUnitValue( matches[ 0 ] );
+			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
+		}
+
+		// If the unit hasn't been modified or we have a single value break free.
+		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
+			break;
+		}
+	}
+
+	return parseUnit( cssUnit );
+}
+/**
+ * Return true if we think this is a math expression.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {boolean} Whether the cssUnit is a math expression.
+ */
+function isMathExpression( cssUnit ) {
+	for ( let i = 0; i < cssUnit.length; i++ ) {
+		if ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {
+			return true;
+		}
+	}
+	return false;
+}
+/**
+ * Evaluates the math expression and return a px value.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {string} return a converfted value to px.
+ */
+function evalMathExpression( cssUnit ) {
+	let errorFound = false;
+	// Convert every part of the expression to px values.
+	// The following regex matches numbers that have a following unit
+	// E.g. 5.25rem, 1vw
+	const cssUnitsBits = cssUnit.match( /\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g );
+	if ( cssUnitsBits ) {
+		for ( const unit of cssUnitsBits ) {
+			// Standardize the unit to px and extract the value.
+			const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
+			if ( ! parseFloat( parsedUnit.value ) ) {
+				errorFound = true;
+				// End early since we are dealing with a null value.
+				break;
+			}
+			cssUnit = cssUnit.replace( unit, parsedUnit.value );
+		}
+	} else {
+		errorFound = true;
+	}
+
+	// For mixed math expressions wrapped within CSS expressions
+	const expressionsMatches = cssUnit.match( /(max|min|clamp)/g );
+	if ( ! errorFound && expressionsMatches ) {
+		const values = cssUnit.split( ',' );
+		for ( const currentValue of values ) {
+			// Check for nested calc() and remove them to calculate the value.
+			const rawCurrentValue = currentValue.replace( /\s|calc/g, '' );
+
+			if ( isMathExpression( rawCurrentValue ) ) {
+				const calculatedExpression = calculate( rawCurrentValue );
+
+				if ( calculatedExpression ) {
+					const calculatedValue =
+						calculatedExpression.toFixed( 0 ) + 'px';
+					cssUnit = cssUnit.replace( currentValue, calculatedValue );
+				}
+			}
+		}
+		const parsedValue = parseUnitFunction( cssUnit );
+		return ! parsedValue ? null : parsedValue.value + parsedValue.unit;
+	}
+
+	if ( errorFound ) {
+		return null;
+	}
+
+	const calculatedResult = calculate( cssUnit );
+	return calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;
+}
+
+/**
+ * Convert a parsedUnit object to px value.
+ *
+ * @param {Object} parsedUnit
+ * @param {Object} options
+ * @return {string} or {null} returns the converted with in a px value format.
+ */
+function convertParsedUnitToPx( parsedUnit, options ) {
+	const PIXELS_PER_INCH = 96;
+	const ONE_PERCENT = 0.01;
+
+	const defaultProperties = {
+		fontSize: 16,
+		lineHeight: 16,
+		width: 375,
+		height: 812,
+		type: 'font',
+	};
+
+	const setOptions = Object.assign( {}, defaultProperties, options );
+
+	const relativeUnits = {
+		em: setOptions.fontSize,
+		rem: setOptions.fontSize,
+		vh: setOptions.height * ONE_PERCENT,
+		vw: setOptions.width * ONE_PERCENT,
+		vmin:
+			( setOptions.width < setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		vmax:
+			( setOptions.width > setOptions.height
+				? setOptions.width
+				: setOptions.height ) * ONE_PERCENT,
+		'%':
+			( setOptions.type === 'font'
+				? setOptions.fontSize
+				: setOptions.width ) * ONE_PERCENT,
+		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
+		ex: 7.15625, // X-height of the element's font. Approximate.
+		lh: setOptions.lineHeight,
+	};
+	relativeUnits.svw = relativeUnits.vmin;
+	relativeUnits.lvw = relativeUnits.vmax;
+	relativeUnits.dvw = relativeUnits.vw;
+	relativeUnits.svh = relativeUnits.vmin;
+	relativeUnits.lvh = relativeUnits.vmax;
+	relativeUnits.dvh = relativeUnits.vh;
+	relativeUnits.vi = relativeUnits.vh;
+	relativeUnits.svi = relativeUnits.vmin;
+	relativeUnits.lvi = relativeUnits.vmax;
+	relativeUnits.dvi = relativeUnits.vw;
+	relativeUnits.vb = relativeUnits.vh;
+	relativeUnits.svb = relativeUnits.vmin;
+	relativeUnits.lvb = relativeUnits.vmax;
+	relativeUnits.dvb = relativeUnits.vh;
+	relativeUnits.svmin = relativeUnits.vmin;
+	relativeUnits.lvmin = relativeUnits.vmin;
+	relativeUnits.dvmin = relativeUnits.vmin;
+	relativeUnits.svmax = relativeUnits.vmax;
+	relativeUnits.lvmax = relativeUnits.vmax;
+	relativeUnits.dvmax = relativeUnits.vmax;
+
+	const absoluteUnits = {
+		in: PIXELS_PER_INCH,
+		cm: PIXELS_PER_INCH / 2.54,
+		mm: PIXELS_PER_INCH / 25.4,
+		pt: PIXELS_PER_INCH / 72,
+		pc: PIXELS_PER_INCH / 6,
+		px: 1,
+		Q: PIXELS_PER_INCH / 2.54 / 40,
+	};
+
+	if ( relativeUnits[ parsedUnit.unit ] ) {
+		return (
+			( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	if ( absoluteUnits[ parsedUnit.unit ] ) {
+		return (
+			( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(
+				0
+			) + 'px'
+		);
+	}
+
+	return null;
+}
+
+/**
+ * Returns the px value of a cssUnit.
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+export function getPxFromCssUnit( cssUnit, options = {} ) {
+	if ( Number.isFinite( cssUnit ) ) {
+		return cssUnit.toFixed( 0 ) + 'px';
+	}
+	if ( cssUnit === undefined ) {
+		return null;
+	}
+	let parsedUnit = parseUnit( cssUnit );
+
+	if ( ! parsedUnit.unit ) {
+		parsedUnit = parseUnitFunction( cssUnit );
+	}
+
+	if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
+		return evalMathExpression( cssUnit );
+	}
+
+	return convertParsedUnitToPx( parsedUnit, options );
+}
+
+// Use simple cache.
+const cache = {};
+/**
+ * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+function memoizedGetPxFromCssUnit( cssUnit, options = {} ) {
+	const hash = cssUnit + hashOptions( options );
+
+	if ( ! cache[ hash ] ) {
+		cache[ hash ] = getPxFromCssUnit( cssUnit, options );
+	}
+	return cache[ hash ];
+}
+
+function hashOptions( options ) {
+	let hash = '';
+	if ( options.hasOwnProperty( 'fontSize' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'lineHeight' ) ) {
+		hash = ':' + options.lineHeight;
+	}
+	if ( options.hasOwnProperty( 'width' ) ) {
+		hash = ':' + options.width;
+	}
+	if ( options.hasOwnProperty( 'height' ) ) {
+		hash = ':' + options.height;
+	}
+	if ( options.hasOwnProperty( 'type' ) ) {
+		hash = ':' + options.type;
+	}
+	return hash;
+}
+
+export default memoizedGetPxFromCssUnit;
diff --git a/packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js b/packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js
new file mode 100644
index 00000000000000..852fc0b4f9a78a
--- /dev/null
+++ b/packages/components/src/mobile/utils/test/get-px-from-css-unit.native.js
@@ -0,0 +1,172 @@
+/**
+ * Internal dependencies
+ */
+import {
+	default as memoizedGetPxFromCssUnit,
+	getPxFromCssUnit,
+} from '../get-px-from-css-unit';
+
+describe( 'getPxFromCssUnit', () => {
+	// Absolute units.
+	describe( 'absolute unites should return px values', () => {
+		const testData = [
+			[ '25px', '25px' ],
+			[ '25.5', '26px' ],
+			[ '1cm', '38px' ],
+			[ '10mm', '38px' ],
+			[ '1in', '96px' ],
+			[ '12pt', '16px' ],
+			[ '1pc', '16px' ],
+			[ '40Q', '38px' ], // 40 Q should be 1 cm.
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit ) ).toBe( expected );
+			}
+		);
+	} );
+
+	describe( 'relative unites should return px values', () => {
+		const settings = {
+			fontSize: 10,
+			width: 100,
+			height: 200,
+			lineHeight: 2,
+			type: 'font',
+		};
+
+		const testData = [
+			[ '2em', '20px' ],
+			[ '2rem', '20px' ],
+			[ '1.125rem', '11px' ],
+			[ '20vw', '20px' ],
+			[ '20vh', '40px' ],
+			[ '20vmin', '20px' ],
+			[ '20vmax', '40px' ],
+			[ '20lh', '40px' ],
+			[ '120%', '12px' ],
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+	} );
+
+	// Function units.
+
+	describe( 'function unites should return px values', () => {
+		const settings = {
+			fontSize: 10,
+			width: 100,
+			height: 200,
+			lineHeight: 2,
+			type: 'font',
+		};
+
+		const testData = [
+			[ 'min(20px, 25px)', '20px' ],
+			[ 'min(20px, 9px, 12pt, 25px)', '9px' ],
+			[ 'max(20px, 25px)', '25px' ],
+			[ 'clamp(10px, 9px, 25px)', '10px' ],
+			[ 'clamp(10px, 35px, 25px)', '25px' ],
+			[ 'clamp(10px, 15px, 25px)', '15px' ],
+			[ 'min(max(20px,25px), 35px)', '25px' ],
+			[ 'max(min(20px,25px), 35px)', '35px' ],
+			[ '10px + 25px', '35px' ],
+			[ 'calc(10px + 25px)', '35px' ],
+			[ 'calc( 2 * 20px)', '40px' ],
+			[ 'calc(25px - 10px)', '15px' ],
+			[ 'min(10px + 25px, 55pt)', '35px' ],
+			[ 'calc(12vw * 10px)', '450px' ],
+			[ 'calc(45vw / 10px)', '17px' ],
+			[ '', null ],
+			[ undefined, null ],
+			[ 123, '123px' ],
+			[ 123.456, '123px' ],
+			[ 'abc', null ],
+			[ 'console.log("howdy"); + 10px', null ],
+			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
+			[ 'calc( 1em + 0.875rem )', '30px' ], // Decimals
+			[
+				'clamp(1.8rem, 1.8rem + ((1vw / 0.48rem + 1rem) * 2.885), 3rem)',
+				'48px',
+			],
+			[
+				'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+				'80px',
+			],
+			[
+				'clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)',
+				'42px',
+			],
+			[ 'var:preset|font-size|medium', null ],
+		];
+
+		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {
+			expect( getPxFromCssUnit( unit, settings ) ).toBe( expected );
+		} );
+		test.each( testData )(
+			'memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+		test.each( testData )(
+			'cached memoizedGetPxFromCssUnit( %s )',
+			( unit, expected ) => {
+				expect( memoizedGetPxFromCssUnit( unit, settings ) ).toBe(
+					expected
+				);
+			}
+		);
+	} );
+	// Skip this test it might be useful in dev.
+	it.skip( 'test performance of memoizedGetPxFromCssUnit function', () => {
+		const start = Date.now();
+		let i = 0;
+		const intervals = 1000;
+		while ( i < intervals ) {
+			getPxFromCssUnit( 'max(25px, 35px)', { width: 200 } );
+			i++;
+		}
+		const rawDuration = Date.now() - start;
+
+		const startM = Date.now();
+		i = 0;
+		// The memoized Version should be at 10X better then the non default one.
+		while ( i < intervals * 10 ) {
+			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
+			i++;
+		}
+		expect( rawDuration > Date.now() - startM ).toBe( true );
+	} );
+} );
diff --git a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
index 11d54f954215d4..0b1dfd31147dee 100644
--- a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
+++ b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js
@@ -6,18 +6,7 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	useCallback,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import GlobalStylesContext from '../global-styles-context';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 
 const getValueAndUnit = ( value, unit ) => {
 	const regex = /(\d+\.?\d*)(.*)/;
@@ -63,8 +52,7 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
 	}
 };
 
-const useConvertUnitToMobile = ( value, unit ) => {
-	const { globalStyles: styles } = useContext( GlobalStylesContext );
+const useConvertUnitToMobile = ( value, unit, styles ) => {
 	const [ windowSizes, setWindowSizes ] = useState(
 		Dimensions.get( 'window' )
 	);
@@ -78,9 +66,7 @@ const useConvertUnitToMobile = ( value, unit ) => {
 		return () => {
 			dimensionsChangeSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	const onDimensionsChange = useCallback( ( { window } ) => {
@@ -97,9 +83,7 @@ const useConvertUnitToMobile = ( value, unit ) => {
 			valueToConvert,
 			valueUnit
 		);
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ windowSizes, value, unit ] );
 };
 
diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md
index 8b0aa84750d16c..c7c0c8ec6d6348 100644
--- a/packages/components/src/modal/README.md
+++ b/packages/components/src/modal/README.md
@@ -4,12 +4,6 @@ Modals give users information and choices related to a task they’re trying to
 
 ![An alert modal for trashing a post](https://wordpress.org/gutenberg/files/2019/04/Modal.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -120,8 +114,8 @@ The modal is used to create an accessible modal over an application.
 The following example shows you how to properly implement a modal. For the modal to properly work it's important you implement the close logic for the modal properly.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyModal = () => {
 	const [ isOpen, setOpen ] = useState( false );
@@ -187,13 +181,26 @@ Titles are required for accessibility reasons, see `aria.labelledby` and `title`
 
 -   Required: No
 
-#### `focusOnMount`: `boolean | 'firstElement'`
+#### `focusOnMount`: `boolean | 'firstElement'` | 'firstContentElement'
 
 If this property is true, it will focus the first tabbable element rendered in the modal.
 
+If this property is false, focus will not be transferred and it is the responsibility of the consumer to ensure accessible focus management.
+
+If set to `firstElement` focus will be placed on the first tabbable element anywhere within the Modal.
+
+If set to `firstContentElement` focus will be placed on the first tabbable element within the Modal's **content** (i.e. children). Note that it is the responsibility of the consumer to ensure there is at least one tabbable element within the children **or the focus will be lost**.
+
 -   Required: No
 -   Default: `true`
 
+#### headerActions
+
+An optional React node intended to contain additional actions or other elements related to the modal, for example, buttons. Content is rendered in the top right corner of the modal and to the left of the close button, if visible.
+
+-   Required: No
+-   Default: `null`
+
 #### `isDismissible`: `boolean`
 
 If this property is set to false, the modal will not display a close icon and cannot be dismissed.
@@ -208,6 +215,14 @@ This property when set to `true` will render a full screen modal.
 -   Required: No
 -   Default: `false`
 
+#### `size`: `'small' | 'medium' | 'large' | 'fill'`
+
+If this property is added it will cause the modal to render at a preset width, or expand to fill the screen. This prop will be ignored if `isFullScreen` is set to `true`.
+
+-   Required: No
+
+Note: `Modal`'s width can also be controlled by adjusting the width of the modal's contents via CSS.
+
 #### `onRequestClose`: ``
 
 This function is called to indicate that the modal should be closed.
diff --git a/packages/components/src/modal/aria-helper.ts b/packages/components/src/modal/aria-helper.ts
index 25ef449a30d3df..bd11fb71253e1e 100644
--- a/packages/components/src/modal/aria-helper.ts
+++ b/packages/components/src/modal/aria-helper.ts
@@ -6,8 +6,7 @@ const LIVE_REGION_ARIA_ROLES = new Set( [
 	'timer',
 ] );
 
-let hiddenElements: Element[] = [],
-	isHidden = false;
+const hiddenElementsByDepth: Element[][] = [];
 
 /**
  * Hides all elements in the body element from screen-readers except
@@ -19,36 +18,36 @@ let hiddenElements: Element[] = [],
  * we should consider removing these helper functions in favor of
  * `aria-modal="true"`.
  *
- * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
+ * @param modalElement The element that should not be hidden.
  */
-export function hideApp( unhiddenElement?: HTMLDivElement ) {
-	if ( isHidden ) {
-		return;
-	}
+export function modalize( modalElement?: HTMLDivElement ) {
 	const elements = Array.from( document.body.children );
-	elements.forEach( ( element ) => {
-		if ( element === unhiddenElement ) {
-			return;
+	const hiddenElements: Element[] = [];
+	hiddenElementsByDepth.push( hiddenElements );
+	for ( const element of elements ) {
+		if ( element === modalElement ) {
+			continue;
 		}
+
 		if ( elementShouldBeHidden( element ) ) {
 			element.setAttribute( 'aria-hidden', 'true' );
 			hiddenElements.push( element );
 		}
-	} );
-	isHidden = true;
+	}
 }
 
 /**
  * Determines if the passed element should not be hidden from screen readers.
  *
- * @param {HTMLElement} element The element that should be checked.
+ * @param element The element that should be checked.
  *
- * @return {boolean} Whether the element should not be hidden from screen-readers.
+ * @return Whether the element should not be hidden from screen-readers.
  */
 export function elementShouldBeHidden( element: Element ) {
 	const role = element.getAttribute( 'role' );
 	return ! (
 		element.tagName === 'SCRIPT' ||
+		element.hasAttribute( 'hidden' ) ||
 		element.hasAttribute( 'aria-hidden' ) ||
 		element.hasAttribute( 'aria-live' ) ||
 		( role && LIVE_REGION_ARIA_ROLES.has( role ) )
@@ -56,16 +55,15 @@ export function elementShouldBeHidden( element: Element ) {
 }
 
 /**
- * Makes all elements in the body that have been hidden by `hideApp`
- * visible again to screen-readers.
+ * Accessibly reveals the elements hidden by the latest modal.
  */
-export function showApp() {
-	if ( ! isHidden ) {
+export function unmodalize() {
+	const hiddenElements = hiddenElementsByDepth.pop();
+	if ( ! hiddenElements ) {
 		return;
 	}
-	hiddenElements.forEach( ( element ) => {
+
+	for ( const element of hiddenElements ) {
 		element.removeAttribute( 'aria-hidden' );
-	} );
-	hiddenElements = [];
-	isHidden = false;
+	}
 }
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 8c4f3a8535704d..2dec0f65240f9b 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import type { ForwardedRef, KeyboardEvent, UIEvent } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,17 +13,20 @@ import {
 	useRef,
 	useState,
 	forwardRef,
+	useLayoutEffect,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
 	useFocusOnMount,
-	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -33,13 +35,22 @@ import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { Spacer } from '../spacer';
+import { useModalExitAnimation } from './use-modal-exit-animation';
 
-// Used to count the number of open modals.
-let openModalCount = 0;
+// Used to track and dismiss the prior modal when another opens unless nested.
+type Dismissers = Set<
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+>;
+const ModalContext = createContext< Dismissers >( new Set() );
+
+// Used to track body class names applied while modals are open.
+const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
 	const {
 		bodyOpenClassName = 'modal-open',
@@ -59,59 +70,154 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
 		isFullScreen = false,
+		size,
+		headerActions = null,
 		__experimentalHideHeader = false,
 	} = props;
 
 	const ref = useRef< HTMLDivElement >();
+
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
 		? `components-modal-header-${ instanceId }`
 		: aria.labelledby;
-	const focusOnMountRef = useFocusOnMount( focusOnMount );
+
+	// The focus hook does not support 'firstContentElement' but this is a valid
+	// value for the Modal's focusOnMount prop. The following code ensures the focus
+	// hook will focus the first focusable node within the element to which it is applied.
+	// When `firstContentElement` is passed as the value of the focusOnMount prop,
+	// the focus hook is applied to the Modal's content element.
+	// Otherwise, the focus hook is applied to the Modal's ref. This ensures that the
+	// focus hook will focus the first element in the Modal's **content** when
+	// `firstContentElement` is passed.
+	const focusOnMountRef = useFocusOnMount(
+		focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount
+	);
 	const constrainedTabbingRef = useConstrainedTabbing();
 	const focusReturnRef = useFocusReturn();
-	const focusOutsideProps = useFocusOutside( onRequestClose );
+	const contentRef = useRef< HTMLDivElement >( null );
+	const childrenContainerRef = useRef< HTMLDivElement >( null );
 
 	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
+	const [ hasScrollableContent, setHasScrollableContent ] = useState( false );
 
-	useEffect( () => {
-		openModalCount++;
+	let sizeClass;
+	if ( isFullScreen || size === 'fill' ) {
+		sizeClass = 'is-full-screen';
+	} else if ( size ) {
+		sizeClass = `has-size-${ size }`;
+	}
 
-		if ( openModalCount === 1 ) {
-			ariaHelper.hideApp( ref.current );
-			document.body.classList.add( bodyOpenClassName );
+	// Determines whether the Modal content is scrollable and updates the state.
+	const isContentScrollable = useCallback( () => {
+		if ( ! contentRef.current ) {
+			return;
 		}
 
+		const closestScrollContainer = getScrollContainer( contentRef.current );
+
+		if ( contentRef.current === closestScrollContainer ) {
+			setHasScrollableContent( true );
+		} else {
+			setHasScrollableContent( false );
+		}
+	}, [ contentRef ] );
+
+	// Accessibly isolates/unisolates the modal.
+	useEffect( () => {
+		ariaHelper.modalize( ref.current );
+		return () => ariaHelper.unmodalize();
+	}, [] );
+
+	// Keeps a fresh ref for the subsequent effect.
+	const onRequestCloseRef = useRef< ModalProps[ 'onRequestClose' ] >();
+	useEffect( () => {
+		onRequestCloseRef.current = onRequestClose;
+	}, [ onRequestClose ] );
+
+	// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
+	// one should remain open at a time and the list enables closing prior ones.
+	const dismissers = useContext( ModalContext );
+	// Used for the tracking and dismissing any nested modals.
+	const [ nestedDismissers ] = useState< Dismissers >( () => new Set() );
+
+	// Updates the stack tracking open modals at this level and calls
+	// onRequestClose for any prior and/or nested modals as applicable.
+	useEffect( () => {
+		// add this modal instance to the dismissers set
+		dismissers.add( onRequestCloseRef );
+		// request that all the other modals close themselves
+		for ( const dismisser of dismissers ) {
+			if ( dismisser !== onRequestCloseRef ) {
+				dismisser.current?.();
+			}
+		}
 		return () => {
-			openModalCount--;
+			// request that all the nested modals close themselves
+			for ( const dismisser of nestedDismissers ) {
+				dismisser.current?.();
+			}
+			// remove this modal instance from the dismissers set
+			dismissers.delete( onRequestCloseRef );
+		};
+	}, [ dismissers, nestedDismissers ] );
 
-			if ( openModalCount === 0 ) {
-				document.body.classList.remove( bodyOpenClassName );
-				ariaHelper.showApp();
+	// Adds/removes the value of bodyOpenClassName to body element.
+	useEffect( () => {
+		const theClass = bodyOpenClassName;
+		const oneMore = 1 + ( bodyOpenClasses.get( theClass ) ?? 0 );
+		bodyOpenClasses.set( theClass, oneMore );
+		document.body.classList.add( bodyOpenClassName );
+		return () => {
+			const oneLess = bodyOpenClasses.get( theClass )! - 1;
+			if ( oneLess === 0 ) {
+				document.body.classList.remove( theClass );
+				bodyOpenClasses.delete( theClass );
+			} else {
+				bodyOpenClasses.set( theClass, oneLess );
 			}
 		};
 	}, [ bodyOpenClassName ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
+	// Calls the isContentScrollable callback when the Modal children container resizes.
+	useLayoutEffect( () => {
+		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
+			return;
+		}
+
+		const resizeObserver = new ResizeObserver( isContentScrollable );
+		resizeObserver.observe( childrenContainerRef.current );
+
+		isContentScrollable();
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [ isContentScrollable, childrenContainerRef ] );
+
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
-			event.code === 'Escape' &&
+			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
-			if ( onRequestClose ) {
-				onRequestClose( event );
-			}
+			closeModal().then( () => onRequestClose( event ) );
 		}
 	}
 
 	const onContentContainerScroll = useCallback(
-		( e: UIEvent< HTMLDivElement > ) => {
+		( e: React.UIEvent< HTMLDivElement > ) => {
 			const scrollY = e?.currentTarget?.scrollTop ?? -1;
 
 			if ( ! hasScrolledContent && scrollY > 0 ) {
@@ -123,48 +229,86 @@ function UnforwardedModal(
 		[ hasScrolledContent ]
 	);
 
-	return createPortal(
+	let pressTarget: EventTarget | null = null;
+	const overlayPressHandlers: {
+		onPointerDown: React.PointerEventHandler< HTMLDivElement >;
+		onPointerUp: React.PointerEventHandler< HTMLDivElement >;
+	} = {
+		onPointerDown: ( event ) => {
+			if ( event.target === event.currentTarget ) {
+				pressTarget = event.target;
+				// Avoids focus changing so that focus return works as expected.
+				event.preventDefault();
+			}
+		},
+		// Closes the modal with two exceptions. 1. Opening the context menu on
+		// the overlay. 2. Pressing on the overlay then dragging the pointer
+		// over the modal and releasing. Due to the modal being a child of the
+		// overlay, such a gesture is a `click` on the overlay and cannot be
+		// excepted by a `click` handler. Thus the tactic of handling
+		// `pointerup` and comparing its target to that of the `pointerdown`.
+		onPointerUp: ( { target, button } ) => {
+			const isSameTarget = target === pressTarget;
+			pressTarget = null;
+			if ( button === 0 && isSameTarget ) {
+				closeModal().then( () => onRequestClose() );
+			}
+		},
+	};
+
+	const modal = (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-			className={ classnames(
+			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
-			onKeyDown={ handleEscapeKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
+			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
 		>
 			<StyleProvider document={ document }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'components-modal__frame',
-						className,
-						{
-							'is-full-screen': isFullScreen,
-						}
+						sizeClass,
+						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
-						focusOnMountRef,
+						focusOnMount !== 'firstContentElement'
+							? focusOnMountRef
+							: null,
 					] ) }
 					role={ role }
 					aria-label={ contentLabel }
 					aria-labelledby={ contentLabel ? undefined : headingId }
 					aria-describedby={ aria.describedby }
 					tabIndex={ -1 }
-					{ ...( shouldCloseOnClickOutside
-						? focusOutsideProps
-						: {} ) }
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ classnames( 'components-modal__content', {
+						className={ clsx( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
+							'is-scrollable': hasScrollableContent,
 							'has-scrolled-content': hasScrolledContent,
 						} ) }
 						role="document"
 						onScroll={ onContentContainerScroll }
+						ref={ contentRef }
+						aria-label={
+							hasScrollableContent
+								? __( 'Scrollable section' )
+								: undefined
+						}
+						tabIndex={ hasScrollableContent ? 0 : undefined }
 					>
 						{ ! __experimentalHideHeader && (
 							<div className="components-modal__header">
@@ -186,23 +330,53 @@ function UnforwardedModal(
 										</h1>
 									) }
 								</div>
+								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel ||
-											__( 'Close dialog' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 2 }
+										/>
+										<Button
+											size="compact"
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
+											icon={ close }
+											label={
+												closeButtonLabel ||
+												__( 'Close' )
+											}
+										/>
+									</>
 								) }
 							</div>
 						) }
-						{ children }
+
+						<div
+							ref={ useMergeRefs( [
+								childrenContainerRef,
+								focusOnMount === 'firstContentElement'
+									? focusOnMountRef
+									: null,
+							] ) }
+						>
+							{ children }
+						</div>
 					</div>
 				</div>
 			</StyleProvider>
-		</div>,
+		</div>
+	);
+
+	return createPortal(
+		<ModalContext.Provider value={ nestedDismissers }>
+			{ modal }
+		</ModalContext.Provider>,
 		document.body
 	);
 }
diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
new file mode 100644
index 00000000000000..be18ed141dd3fc
--- /dev/null
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { fullscreen } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import InputControl from '../../input-control';
+import Modal from '../';
+import type { ModalProps } from '../types';
+
+const meta: Meta< typeof Modal > = {
+	component: Modal,
+	title: 'Components/Overlays/Modal',
+	id: 'components-modal',
+	argTypes: {
+		children: {
+			control: false,
+		},
+		onKeyDown: {
+			control: false,
+		},
+		focusOnMount: {
+			options: [ true, false, 'firstElement', 'firstContentElement' ],
+			control: { type: 'select' },
+		},
+		role: {
+			control: { type: 'text' },
+		},
+		onRequestClose: {
+			action: 'onRequestClose',
+		},
+		isDismissible: {
+			control: { type: 'boolean' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
+		setOpen( false );
+		onRequestClose( event );
+	};
+
+	return (
+		<>
+			<Button variant="secondary" onClick={ openModal }>
+				Open Modal
+			</Button>
+			{ isOpen && (
+				<Modal onRequestClose={ closeModal } { ...args }>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation ullamco laboris nisi ut aliquip ex ea 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>
+
+					<InputControl style={ { marginBottom: '20px' } } />
+
+					<Button variant="secondary" onClick={ closeModal }>
+						Close Modal
+					</Button>
+				</Modal>
+			) }
+		</>
+	);
+};
+
+export const Default: StoryFn< typeof Modal > = Template.bind( {} );
+Default.args = {
+	title: 'Title',
+};
+Default.parameters = {
+	docs: {
+		source: {
+			code: '',
+		},
+	},
+};
+
+export const WithsizeSmall: StoryFn< typeof Modal > = Template.bind( {} );
+WithsizeSmall.args = {
+	size: 'small',
+};
+WithsizeSmall.storyName = 'With size: small';
+
+/**
+ * The `headerActions` prop can be used to add auxiliary actions to the header, for example a fullscreen mode toggle.
+ */
+export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
+WithHeaderActions.args = {
+	...Default.args,
+	headerActions: (
+		<Button icon={ fullscreen } label="Fullscreen mode" size="compact" />
+	),
+	children: <div style={ { height: '200px' } } />,
+};
+WithHeaderActions.parameters = {
+	...Default.parameters,
+};
diff --git a/packages/components/src/modal/stories/index.tsx b/packages/components/src/modal/stories/index.tsx
deleted file mode 100644
index 42b7874b1eeaab..00000000000000
--- a/packages/components/src/modal/stories/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import Modal from '../';
-import type { ModalProps } from '../types';
-
-const meta: ComponentMeta< typeof Modal > = {
-	component: Modal,
-	title: 'Components/Modal',
-	argTypes: {
-		children: {
-			control: { type: null },
-		},
-		onKeyDown: {
-			control: { type: null },
-		},
-		focusOnMount: {
-			control: { type: 'boolean' },
-		},
-		role: {
-			control: { type: 'text' },
-		},
-		onRequestClose: {
-			action: 'onRequestClose',
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Modal > = ( {
-	onRequestClose,
-	...args
-} ) => {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
-		setOpen( false );
-		onRequestClose( event );
-	};
-
-	return (
-		<>
-			<Button variant="secondary" onClick={ openModal }>
-				Open Modal
-			</Button>
-			{ isOpen && (
-				<Modal
-					onRequestClose={ closeModal }
-					style={ { maxWidth: '600px' } }
-					{ ...args }
-				>
-					<p>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-						sed do eiusmod tempor incididunt ut labore et magna
-						aliqua. Ut enim ad minim veniam, quis nostrud
-						exercitation ullamco laboris nisi ut aliquip ex ea 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>
-
-					<Button variant="secondary" onClick={ closeModal }>
-						Close Modal
-					</Button>
-				</Modal>
-			) }
-		</>
-	);
-};
-
-export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
-Default.args = {
-	title: 'Title',
-};
-Default.parameters = {
-	docs: {
-		source: {
-			code: '',
-		},
-	},
-};
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 2374a7e57993d4..70959f69392d1c 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -8,40 +8,82 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
-	// backdrop-filter: blur($grid-unit);
-	// This animates the appearance of the white background.
-	@include edit-post__fade-in-animation();
+	// This animates the appearance of the backdrop.
+	@include animation__fade-in();
+
+	&.is-animating-out {
+		// Note: it's important that the fade-out animation doesn't end after the
+		// modal frame's disappear animation, because the component will be removed
+		// from the DOM when that animation ends.
+		@include animation__fade-out($delay: 80ms);
+	}
 }
 
 // The modal window element.
 .components-modal__frame {
+	@include reset;
 	// Use the entire viewport on smaller screens.
-	margin: 0;
+	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
-	box-shadow: $shadow-modal;
-	border-radius: $radius-block-ui;
+	box-shadow: $elevation-large;
+	border-radius: $radius-large $radius-large 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	// Animate the modal frame/contents appearing on the page.
+	animation-name: components-modal__appear-animation;
+	animation-duration: var(--modal-frame-animation-duration);
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
+	@include reduce-motion("animation");
+
+	.components-modal__screen-overlay.is-animating-out & {
+		animation-name: components-modal__disappear-animation;
+		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+	}
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		border-radius: $radius-large;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		// Animate the modal frame/contents appearing on the page.
-		animation: components-modal__appear-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-
 		&.is-full-screen {
-			width: 90vw;
-			min-height: 90vh;
+			@include break-small() {
+				width: calc(100% - #{ $grid-unit-20 * 2 });
+				height: calc(100% - #{ $grid-unit-20 * 2 });
+				max-height: none;
+			}
+			@include break-medium() {
+				width: calc(100% - #{ $grid-unit-50 * 2 });
+				height: calc(100% - #{ $grid-unit-50 * 2 });
+				max-width: none;
+			}
 		}
+
+		&.has-size-small,
+		&.has-size-medium,
+		&.has-size-large {
+			width: 100%;
+		}
+
+		// The following widths were selected to align with existing baselines
+		// found elsewhere in the editor.
+		// See https://github.com/WordPress/gutenberg/pull/54471#issuecomment-1723818809
+		&.has-size-small {
+			max-width: $modal-width-small;
+		}
+		&.has-size-medium {
+			max-width: $modal-width-medium;
+		}
+		&.has-size-large {
+			max-width: $modal-width-large;
+		}
+
 	}
 
 	@include break-large() {
@@ -51,10 +93,25 @@
 
 @keyframes components-modal__appear-animation {
 	from {
-		transform: translateY($grid-unit-40);
+		opacity: 0;
+		transform: scale(0.9);
 	}
 	to {
-		transform: translateY(0);
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+// Note: this animation is also used in the animationend JS event listener.
+// Make sure that the animation name is kept in sync across the two files.
+@keyframes components-modal__disappear-animation {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.9);
 	}
 }
 
@@ -64,12 +121,12 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: 0 $grid-unit-40;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-20;
+	height: $header-height + $grid-unit-15;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -86,11 +143,6 @@
 		margin: 0;
 	}
 
-	.components-button {
-		position: relative;
-		left: $grid-unit-10;
-	}
-
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}
@@ -121,12 +173,21 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-20;
-	padding: 0 $grid-unit-40 $grid-unit-40;
+	margin-top: $header-height + $grid-unit-15;
+	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
+	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-30;
+		padding-top: $grid-unit-40;
+	}
+
+	&.is-scrollable:focus-visible {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: -2px;
 	}
 }
diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
index a0778bfb8aab8b..05dcc35dce18da 100644
--- a/packages/components/src/modal/test/index.tsx
+++ b/packages/components/src/modal/test/index.tsx
@@ -2,11 +2,18 @@
  * External dependencies
  */
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Modal from '../';
+import type { ModalProps } from '../types';
 
 const noop = () => {};
 
@@ -69,4 +76,413 @@ 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();
+		const onRequestClose = jest.fn();
+		render(
+			<Modal onRequestClose={ onRequestClose }>
+				<p>Modal content</p>
+			</Modal>
+		);
+		await user.keyboard( '[Escape]' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'should return focus when dismissed by clicking outside', async () => {
+		const user = userEvent.setup();
+		const ReturnDemo = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<div>
+					<button onClick={ () => setIsShown( true ) }>📣</button>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Modal content</p>
+						</Modal>
+					) }
+				</div>
+			);
+		};
+		render( <ReturnDemo /> );
+
+		const opener = screen.getByRole( 'button' );
+		await user.click( opener );
+		const modalFrame = screen.getByRole( 'dialog' );
+		expect( modalFrame ).toHaveFocus();
+
+		// Disable reason: No semantic query can reach the overlay.
+		// eslint-disable-next-line testing-library/no-node-access
+		await user.click( modalFrame.parentElement! );
+		expect( opener ).toHaveFocus();
+	} );
+
+	it( 'should request closing of any non nested modal when opened', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const DismissAdjacent = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>💥</button>
+					</Modal>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Adjacent modal content</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <DismissAdjacent /> );
+
+		await user.click( screen.getByRole( 'button', { name: '💥' } ) );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'should support nested modals', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const NestSupport = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<Modal onRequestClose={ onRequestClose }>
+						<button onClick={ () => setIsShown( true ) }>🪆</button>
+						{ isShown && (
+							<Modal onRequestClose={ () => setIsShown( false ) }>
+								<p>Nested modal content</p>
+							</Modal>
+						) }
+					</Modal>
+				</>
+			);
+		};
+		render( <NestSupport /> );
+
+		await user.click( screen.getByRole( 'button', { name: '🪆' } ) );
+		expect( onRequestClose ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should request closing of nested modal when outer modal unmounts', async () => {
+		const user = userEvent.setup();
+		const onRequestClose = jest.fn();
+
+		const RequestCloseOfNested = () => {
+			const [ isShown, setIsShown ] = useState( true );
+			return (
+				<>
+					{ isShown && (
+						<Modal
+							onKeyDown={ ( { key } ) => {
+								if ( key === 'o' ) {
+									setIsShown( false );
+								}
+							} }
+							onRequestClose={ noop }
+						>
+							<Modal onRequestClose={ onRequestClose }>
+								<p>Nested modal content</p>
+							</Modal>
+						</Modal>
+					) }
+				</>
+			);
+		};
+		render( <RequestCloseOfNested /> );
+
+		await user.keyboard( 'o' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
+
+	it( 'should accessibly hide and show siblings including outer modals', async () => {
+		const user = userEvent.setup();
+
+		const AriaDemo = () => {
+			const [ isOuterShown, setIsOuterShown ] = useState( false );
+			const [ isInnerShown, setIsInnerShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsOuterShown( true ) }>
+						Start
+					</button>
+					{ isOuterShown && (
+						<Modal
+							onRequestClose={ () => setIsOuterShown( false ) }
+						>
+							<button onClick={ () => setIsInnerShown( true ) }>
+								Nest
+							</button>
+							{ isInnerShown && (
+								<Modal
+									onRequestClose={ () =>
+										setIsInnerShown( false )
+									}
+								>
+									<p>Nested modal content</p>
+								</Modal>
+							) }
+						</Modal>
+					) }
+				</>
+			);
+		};
+		const { container } = render( <AriaDemo /> );
+
+		// Opens outer modal > hides container.
+		await user.click( screen.getByRole( 'button', { name: 'Start' } ) );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Disable reason: No semantic query can reach the overlay.
+		// eslint-disable-next-line testing-library/no-node-access
+		const outer = screen.getByRole( 'dialog' ).parentElement!;
+
+		// Opens inner modal > hides outer modal.
+		await user.click( screen.getByRole( 'button', { name: 'Nest' } ) );
+		expect( outer ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes inner modal > Unhides outer modal and container stays hidden.
+		await user.keyboard( '[Escape]' );
+		expect( outer ).not.toHaveAttribute( 'aria-hidden' );
+		expect( container ).toHaveAttribute( 'aria-hidden', 'true' );
+
+		// Closes outer modal > Unhides container.
+		await user.keyboard( '[Escape]' );
+		expect( container ).not.toHaveAttribute( 'aria-hidden' );
+	} );
+
+	it( 'should render `headerActions` React nodes', async () => {
+		render(
+			<Modal
+				headerActions={ <button>A sweet button</button> }
+				onRequestClose={ noop }
+			>
+				<p>Modal content</p>
+			</Modal>
+		);
+		expect(
+			screen.getByText( 'A sweet button', { selector: 'button' } )
+		).toBeInTheDocument();
+	} );
+
+	describe( 'Focus handling', () => {
+		const originalGetClientRects =
+			window.HTMLElement.prototype.getClientRects;
+
+		const FocusMountDemo = ( {
+			focusOnMount,
+		}: Pick< ModalProps, 'focusOnMount' > ) => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<>
+					<button onClick={ () => setIsShown( true ) }>
+						Toggle Modal
+					</button>
+					{ isShown && (
+						<Modal
+							focusOnMount={ focusOnMount }
+							onRequestClose={ () => setIsShown( false ) }
+						>
+							<p>Modal content</p>
+							<a href="https://wordpress.org">
+								First Focusable Content Element
+							</a>
+
+							<a href="https://wordpress.org">
+								Another Focusable Content Element
+							</a>
+						</Modal>
+					) }
+				</>
+			);
+		};
+
+		beforeEach( () => {
+			/**
+			 * The test environment does not have a layout engine, so we need to mock
+			 * the getClientRects method. This ensures that the focusable elements can be
+			 * found by the `focusOnMount` logic which depends on layout information
+			 * to determine if the element is visible or not.
+			 * See https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61.
+			 */
+			// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+			window.HTMLElement.prototype.getClientRects = function () {
+				return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+			};
+		} );
+
+		afterEach( () => {
+			// Restore original HTMLElement prototype.
+			// See beforeEach for details.
+			window.HTMLElement.prototype.getClientRects =
+				originalGetClientRects;
+		} );
+
+		it( 'should focus the Modal dialog by default when `focusOnMount` prop is not provided', async () => {
+			const user = userEvent.setup();
+
+			render( <FocusMountDemo /> );
+
+			const opener = screen.getByRole( 'button', {
+				name: 'Toggle Modal',
+			} );
+
+			await user.click( opener );
+
+			expect( screen.getByRole( 'dialog' ) ).toHaveFocus();
+		} );
+
+		it( 'should focus the Modal dialog when `true` passed as value for `focusOnMount` prop', async () => {
+			const user = userEvent.setup();
+
+			render( <FocusMountDemo focusOnMount /> );
+
+			const opener = screen.getByRole( 'button', {
+				name: 'Toggle Modal',
+			} );
+
+			await user.click( opener );
+
+			expect( screen.getByRole( 'dialog' ) ).toHaveFocus();
+		} );
+
+		it( 'should focus the first focusable element in the contents (if found) when `firstContentElement` passed as value for `focusOnMount` prop', async () => {
+			const user = userEvent.setup();
+
+			render( <FocusMountDemo focusOnMount="firstContentElement" /> );
+
+			const opener = screen.getByRole( 'button' );
+
+			await user.click( opener );
+
+			expect(
+				screen.getByText( 'First Focusable Content Element' )
+			).toHaveFocus();
+		} );
+
+		it( 'should focus the first element anywhere within the Modal when `firstElement` passed as value for `focusOnMount` prop', async () => {
+			const user = userEvent.setup();
+
+			render( <FocusMountDemo focusOnMount="firstElement" /> );
+
+			const opener = screen.getByRole( 'button' );
+
+			await user.click( opener );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Close' } )
+			).toHaveFocus();
+		} );
+
+		it( 'should not move focus when `false` passed as value for `focusOnMount` prop', async () => {
+			const user = userEvent.setup();
+
+			render( <FocusMountDemo focusOnMount={ false } /> );
+
+			const opener = screen.getByRole( 'button', {
+				name: 'Toggle Modal',
+			} );
+
+			await user.click( opener );
+
+			expect( opener ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'Body class name', () => {
+		const overrideClass = 'is-any-open';
+		const BodyClassDemo = () => {
+			const [ isAShown, setIsAShown ] = useState( false );
+			const [ isA1Shown, setIsA1Shown ] = useState( false );
+			const [ isBShown, setIsBShown ] = useState( false );
+			const [ isClassOverriden, setIsClassOverriden ] = useState( false );
+			useEffect( () => {
+				const toggles: ( e: KeyboardEvent ) => void = ( {
+					key,
+					metaKey,
+				} ) => {
+					if ( key === 'a' ) {
+						if ( metaKey ) {
+							return setIsA1Shown( ( v ) => ! v );
+						}
+						return setIsAShown( ( v ) => ! v );
+					}
+					if ( key === 'b' ) {
+						return setIsBShown( ( v ) => ! v );
+					}
+					if ( key === 'c' ) {
+						return setIsClassOverriden( ( v ) => ! v );
+					}
+				};
+				document.addEventListener( 'keydown', toggles );
+				return () =>
+					void document.removeEventListener( 'keydown', toggles );
+			}, [] );
+			return (
+				<>
+					{ isAShown && (
+						<Modal
+							bodyOpenClassName={
+								isClassOverriden ? overrideClass : 'is-A-open'
+							}
+							onRequestClose={ () => setIsAShown( false ) }
+						>
+							<p>Modal A contents</p>
+							{ isA1Shown && (
+								<Modal
+									title="Nested"
+									onRequestClose={ () =>
+										setIsA1Shown( false )
+									}
+								>
+									<p>Modal A1 contents</p>
+								</Modal>
+							) }
+						</Modal>
+					) }
+					{ isBShown && (
+						<Modal
+							bodyOpenClassName={
+								isClassOverriden ? overrideClass : 'is-B-open'
+							}
+							onRequestClose={ () => setIsBShown( false ) }
+						>
+							<p>Modal B contents</p>
+						</Modal>
+					) }
+				</>
+			);
+		};
+
+		it( 'is added and removed when modal opens and closes including when closed due to another modal opening', async () => {
+			const user = userEvent.setup();
+
+			const { baseElement } = render( <BodyClassDemo /> );
+
+			await user.keyboard( 'a' ); // Opens modal A.
+			expect( baseElement ).toHaveClass( 'is-A-open' );
+
+			await user.keyboard( 'b' ); // Opens modal B > closes modal A.
+			expect( baseElement ).toHaveClass( 'is-B-open' );
+			expect( baseElement ).not.toHaveClass( 'is-A-open' );
+
+			await user.keyboard( 'b' ); // Closes modal B.
+			expect( baseElement ).not.toHaveClass( 'is-B-open' );
+		} );
+
+		it( 'is removed even when prop changes while nested modal is open', async () => {
+			const user = userEvent.setup();
+
+			const { baseElement } = render( <BodyClassDemo /> );
+
+			await user.keyboard( 'a' ); // Opens modal A.
+			await user.keyboard( '{Meta>}a{/Meta}' ); // Opens nested modal.
+			await user.keyboard( 'c' ); // Changes `bodyOpenClassName`.
+			await user.keyboard( 'a' ); // Closes modal A.
+			expect( baseElement ).not.toHaveClass( 'is-A-open' );
+		} );
+	} );
 } );
diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
index 45fe0580d5329b..f6f35eec85fc73 100644
--- a/packages/components/src/modal/types.ts
+++ b/packages/components/src/modal/types.ts
@@ -1,15 +1,3 @@
-/**
- * External dependencies
- */
-import type {
-	AriaRole,
-	CSSProperties,
-	ReactNode,
-	KeyboardEventHandler,
-	KeyboardEvent,
-	SyntheticEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +30,7 @@ export type ModalProps = {
 	/**
 	 * The children elements.
 	 */
-	children: ReactNode;
+	children: React.ReactNode;
 	/**
 	 * If this property is added, it will an additional class name to the modal
 	 * content `div`.
@@ -50,6 +38,8 @@ export type ModalProps = {
 	className?: string;
 	/**
 	 * Label on the close button.
+	 *
+	 * @default `__( 'Close' )`
 	 */
 	closeButtonLabel?: string;
 	/**
@@ -66,7 +56,17 @@ export type ModalProps = {
 	 *
 	 * @default true
 	 */
-	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
+	focusOnMount?:
+		| Parameters< typeof useFocusOnMount >[ 0 ]
+		| 'firstContentElement';
+	/**
+	 * Elements that are injected into the modal header to the left of the close button (if rendered).
+	 * Hidden if `__experimentalHideHeader` is `true`.
+	 *
+	 * @default null
+	 */
+	headerActions?: React.ReactNode;
+
 	/**
 	 * If this property is added, an icon will be added before the title.
 	 */
@@ -84,15 +84,24 @@ export type ModalProps = {
 	 * @default false
 	 */
 	isFullScreen?: boolean;
+	/**
+	 * If this property is added it will cause the modal to render at a preset
+	 * width, or expand to fill the screen. This prop will be ignored if
+	 * `isFullScreen` is set to `true`.
+	 *
+	 * Note: `Modal`'s width can also be controlled by adjusting the width of the
+	 * modal's contents, or via CSS using the `style` prop.
+	 */
+	size?: 'small' | 'medium' | 'large' | 'fill';
 	/**
 	 *  Handle the key down on the modal frame `div`.
 	 */
-	onKeyDown?: KeyboardEventHandler< HTMLDivElement >;
+	onKeyDown?: React.KeyboardEventHandler< HTMLDivElement >;
 	/**
 	 * This function is called to indicate that the modal should be closed.
 	 */
 	onRequestClose: (
-		event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent
+		event?: React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent
 	) => void;
 	/**
 	 * If this property is added, it will an additional class name to the modal
@@ -105,7 +114,7 @@ export type ModalProps = {
 	 *
 	 * @default 'dialog'
 	 */
-	role?: AriaRole;
+	role?: React.AriaRole;
 	/**
 	 * If this property is added, it will determine whether the modal requests
 	 * to close when a mouse click occurs outside of the modal content.
@@ -123,7 +132,7 @@ export type ModalProps = {
 	/**
 	 * If this property is added, it will be added to the modal frame `div`.
 	 */
-	style?: CSSProperties;
+	style?: React.CSSProperties;
 	/**
 	 * This property is used as the modal header's title.
 	 *
diff --git a/packages/components/src/modal/use-modal-exit-animation.ts b/packages/components/src/modal/use-modal-exit-animation.ts
new file mode 100644
index 00000000000000..729b4f9ea6f86c
--- /dev/null
+++ b/packages/components/src/modal/use-modal-exit-animation.ts
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion } from '@wordpress/compose';
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../utils';
+import warning from '@wordpress/warning';
+
+// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
+const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
+const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
+	CONFIG.transitionDuration
+);
+
+const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';
+
+export function useModalExitAnimation() {
+	const frameRef = useRef< HTMLDivElement >();
+	const [ isAnimatingOut, setIsAnimatingOut ] = useState( false );
+	const isReducedMotion = useReducedMotion();
+
+	const closeModal = useCallback(
+		() =>
+			new Promise< void >( ( closeModalResolve ) => {
+				// Grab a "stable" reference of the frame element, since
+				// the value held by the react ref might change at runtime.
+				const frameEl = frameRef.current;
+
+				if ( isReducedMotion ) {
+					closeModalResolve();
+					return;
+				}
+
+				if ( ! frameEl ) {
+					warning(
+						"wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element."
+					);
+					closeModalResolve();
+					return;
+				}
+
+				let handleAnimationEnd:
+					| undefined
+					| ( ( e: AnimationEvent ) => void );
+
+				const startAnimation = () =>
+					new Promise< void >( ( animationResolve ) => {
+						handleAnimationEnd = ( e: AnimationEvent ) => {
+							if ( e.animationName === EXIT_ANIMATION_NAME ) {
+								animationResolve();
+							}
+						};
+
+						frameEl.addEventListener(
+							'animationend',
+							handleAnimationEnd
+						);
+						setIsAnimatingOut( true );
+					} );
+				const animationTimeout = () =>
+					new Promise< void >( ( timeoutResolve ) => {
+						setTimeout(
+							() => timeoutResolve(),
+							// Allow an extra 20% of the animation duration for the
+							// animationend event to fire, in case the animation frame is
+							// slightly delayes by some other events in the event loop.
+							FRAME_ANIMATION_DURATION_NUMBER * 1.2
+						);
+					} );
+
+				Promise.race( [ startAnimation(), animationTimeout() ] ).then(
+					() => {
+						if ( handleAnimationEnd ) {
+							frameEl.removeEventListener(
+								'animationend',
+								handleAnimationEnd
+							);
+						}
+						setIsAnimatingOut( false );
+						closeModalResolve();
+					}
+				);
+			} ),
+		[ isReducedMotion ]
+	);
+
+	return {
+		overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
+		frameRef,
+		frameStyle: {
+			'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }`,
+		},
+		closeModal,
+	};
+}
diff --git a/packages/components/src/navigable-container/README.md b/packages/components/src/navigable-container/README.md
index de6c1103ae6dea..bbc1f16dcb8f6c 100644
--- a/packages/components/src/navigable-container/README.md
+++ b/packages/components/src/navigable-container/README.md
@@ -2,38 +2,49 @@
 
 `NavigableContainer` is a React component to render a container navigable using the keyboard. Only things that are focusable can be navigated to. It will currently always be a `div`.
 
-`NavigableContainer` is exported as two classes: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
+`NavigableContainer` is exported as two components: `NavigableMenu` and `TabbableContainer`. `NavigableContainer` itself is **not** exported. `NavigableMenu` and `TabbableContainer` have the props listed below. Any other props will be passed through to the `div`.
 
 ---
 
 ## Props
 
-These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one class are labelled appropriately.
+These are the props that `NavigableMenu` and `TabbableContainer`. Any props which are specific to one component are labelled appropriately.
 
-### onNavigate
+### `cycle`: `boolean`
 
-A callback invoked when the menu navigates to one of its children passing the index and child as an argument
+A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
 
--   Type: `Function`
 -   Required: No
+-   default: `true`
 
-### cycle
+### `eventToOffset`: `( event: KeyboardEvent ) => -1 | 0 | 1 | undefined`
 
-A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
+(TabbableContainer only)
+Gets an offset, given an event.
+
+-   Required: No
+
+### `onKeyDown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
+### `onNavigate`: `( index: number, focusable: HTMLElement ) => void`
+
+A callback invoked when the menu navigates to one of its children passing the index and child as an argument
 
--   Type: `Boolean`
 -   Required: No
--   default: true
 
-### orientation (NavigableMenu only)
+### `orientation`: `'vertical' | 'horizontal' | 'both'`
 
-The orientation of the menu. It could be "vertical", "horizontal" or "both"
+(NavigableMenu only)
+The orientation of the menu. It could be "vertical", "horizontal", or "both".
 
--   Type: `String`
 -   Required: No
 -   Default: `"vertical"`
 
-## Classes
+## Components
 
 ### NavigableMenu
 
diff --git a/packages/components/src/navigable-container/container.js b/packages/components/src/navigable-container/container.js
deleted file mode 100644
index 6c9de468f0c591..00000000000000
--- a/packages/components/src/navigable-container/container.js
+++ /dev/null
@@ -1,160 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { Component, forwardRef } from '@wordpress/element';
-import { focus } from '@wordpress/dom';
-
-const noop = () => {};
-const MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];
-
-function cycleValue( value, total, offset ) {
-	const nextValue = value + offset;
-	if ( nextValue < 0 ) {
-		return total + nextValue;
-	} else if ( nextValue >= total ) {
-		return nextValue - total;
-	}
-
-	return nextValue;
-}
-
-class NavigableContainer extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onKeyDown = this.onKeyDown.bind( this );
-		this.bindContainer = this.bindContainer.bind( this );
-
-		this.getFocusableContext = this.getFocusableContext.bind( this );
-		this.getFocusableIndex = this.getFocusableIndex.bind( this );
-	}
-
-	componentDidMount() {
-		// We use DOM event listeners instead of React event listeners
-		// because we want to catch events from the underlying DOM tree
-		// The React Tree can be different from the DOM tree when using
-		// portals. Block Toolbars for instance are rendered in a separate
-		// React Trees.
-		this.container.addEventListener( 'keydown', this.onKeyDown );
-		this.container.addEventListener( 'focus', this.onFocus );
-	}
-
-	componentWillUnmount() {
-		this.container.removeEventListener( 'keydown', this.onKeyDown );
-		this.container.removeEventListener( 'focus', this.onFocus );
-	}
-
-	bindContainer( ref ) {
-		const { forwardedRef } = this.props;
-		this.container = ref;
-
-		if ( typeof forwardedRef === 'function' ) {
-			forwardedRef( ref );
-		} else if ( forwardedRef && 'current' in forwardedRef ) {
-			forwardedRef.current = ref;
-		}
-	}
-
-	getFocusableContext( target ) {
-		const { onlyBrowserTabstops } = this.props;
-		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
-		const focusables = finder.find( this.container );
-
-		const index = this.getFocusableIndex( focusables, target );
-		if ( index > -1 && target ) {
-			return { index, target, focusables };
-		}
-		return null;
-	}
-
-	getFocusableIndex( focusables, target ) {
-		const directIndex = focusables.indexOf( target );
-		if ( directIndex !== -1 ) {
-			return directIndex;
-		}
-	}
-
-	onKeyDown( event ) {
-		if ( this.props.onKeyDown ) {
-			this.props.onKeyDown( event );
-		}
-
-		const { getFocusableContext } = this;
-		const {
-			cycle = true,
-			eventToOffset,
-			onNavigate = noop,
-			stopNavigationEvents,
-		} = this.props;
-
-		const offset = eventToOffset( event );
-
-		// eventToOffset returns undefined if the event is not handled by the component.
-		if ( offset !== undefined && stopNavigationEvents ) {
-			// Prevents arrow key handlers bound to the document directly interfering.
-			event.stopImmediatePropagation();
-
-			// When navigating a collection of items, prevent scroll containers
-			// from scrolling. The preventDefault also prevents Voiceover from
-			// 'handling' the event, as voiceover will try to use arrow keys
-			// for highlighting text.
-			const targetRole = event.target.getAttribute( 'role' );
-			const targetHasMenuItemRole =
-				MENU_ITEM_ROLES.includes( targetRole );
-
-			// `preventDefault()` on tab to avoid having the browser move the focus
-			// after this component has already moved it.
-			const isTab = event.code === 'Tab';
-
-			if ( targetHasMenuItemRole || isTab ) {
-				event.preventDefault();
-			}
-		}
-
-		if ( ! offset ) {
-			return;
-		}
-
-		const context = getFocusableContext(
-			event.target.ownerDocument.activeElement
-		);
-		if ( ! context ) {
-			return;
-		}
-
-		const { index, focusables } = context;
-		const nextIndex = cycle
-			? cycleValue( index, focusables.length, offset )
-			: index + offset;
-		if ( nextIndex >= 0 && nextIndex < focusables.length ) {
-			focusables[ nextIndex ].focus();
-			onNavigate( nextIndex, focusables[ nextIndex ] );
-		}
-	}
-
-	render() {
-		const {
-			children,
-			stopNavigationEvents,
-			eventToOffset,
-			onNavigate,
-			onKeyDown,
-			cycle,
-			onlyBrowserTabstops,
-			forwardedRef,
-			...restProps
-		} = this.props;
-		return (
-			<div ref={ this.bindContainer } { ...restProps }>
-				{ children }
-			</div>
-		);
-	}
-}
-
-const forwardedNavigableContainer = ( props, ref ) => {
-	return <NavigableContainer { ...props } forwardedRef={ ref } />;
-};
-forwardedNavigableContainer.displayName = 'NavigableContainer';
-
-export default forwardRef( forwardedNavigableContainer );
diff --git a/packages/components/src/navigable-container/container.tsx b/packages/components/src/navigable-container/container.tsx
new file mode 100644
index 00000000000000..44e990a6e4a195
--- /dev/null
+++ b/packages/components/src/navigable-container/container.tsx
@@ -0,0 +1,190 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, forwardRef } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigableContainerProps } from './types';
+
+const noop = () => {};
+const MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];
+
+function cycleValue( value: number, total: number, offset: number ) {
+	const nextValue = value + offset;
+	if ( nextValue < 0 ) {
+		return total + nextValue;
+	} else if ( nextValue >= total ) {
+		return nextValue - total;
+	}
+
+	return nextValue;
+}
+
+class NavigableContainer extends Component< NavigableContainerProps > {
+	container?: HTMLDivElement;
+
+	constructor( args: NavigableContainerProps ) {
+		super( args );
+		this.onKeyDown = this.onKeyDown.bind( this );
+		this.bindContainer = this.bindContainer.bind( this );
+
+		this.getFocusableContext = this.getFocusableContext.bind( this );
+		this.getFocusableIndex = this.getFocusableIndex.bind( this );
+	}
+
+	componentDidMount() {
+		if ( ! this.container ) {
+			return;
+		}
+
+		// We use DOM event listeners instead of React event listeners
+		// because we want to catch events from the underlying DOM tree
+		// The React Tree can be different from the DOM tree when using
+		// portals. Block Toolbars for instance are rendered in a separate
+		// React Trees.
+		this.container.addEventListener( 'keydown', this.onKeyDown );
+	}
+
+	componentWillUnmount() {
+		if ( ! this.container ) {
+			return;
+		}
+
+		this.container.removeEventListener( 'keydown', this.onKeyDown );
+	}
+
+	bindContainer( ref: HTMLDivElement ) {
+		const { forwardedRef } = this.props;
+		this.container = ref;
+
+		if ( typeof forwardedRef === 'function' ) {
+			forwardedRef( ref );
+		} else if ( forwardedRef && 'current' in forwardedRef ) {
+			forwardedRef.current = ref;
+		}
+	}
+
+	getFocusableContext( target: Element ) {
+		if ( ! this.container ) {
+			return null;
+		}
+
+		const { onlyBrowserTabstops } = this.props;
+		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
+		const focusables = finder.find( this.container );
+
+		const index = this.getFocusableIndex( focusables, target );
+		if ( index > -1 && target ) {
+			return { index, target, focusables };
+		}
+		return null;
+	}
+
+	getFocusableIndex( focusables: Element[], target: Element ) {
+		return focusables.indexOf( target );
+	}
+
+	onKeyDown( event: KeyboardEvent ) {
+		if ( this.props.onKeyDown ) {
+			this.props.onKeyDown( event );
+		}
+
+		const { getFocusableContext } = this;
+		const {
+			cycle = true,
+			eventToOffset,
+			onNavigate = noop,
+			stopNavigationEvents,
+		} = this.props;
+
+		const offset = eventToOffset( event );
+
+		// eventToOffset returns undefined if the event is not handled by the component.
+		if ( offset !== undefined && stopNavigationEvents ) {
+			// Prevents arrow key handlers bound to the document directly interfering.
+			event.stopImmediatePropagation();
+
+			// When navigating a collection of items, prevent scroll containers
+			// from scrolling. The preventDefault also prevents Voiceover from
+			// 'handling' the event, as voiceover will try to use arrow keys
+			// for highlighting text.
+			const targetRole = (
+				event.target as HTMLDivElement | null
+			 )?.getAttribute( 'role' );
+			const targetHasMenuItemRole =
+				!! targetRole && MENU_ITEM_ROLES.includes( targetRole );
+
+			if ( targetHasMenuItemRole ) {
+				event.preventDefault();
+			}
+		}
+
+		if ( ! offset ) {
+			return;
+		}
+
+		const activeElement = ( event.target as HTMLElement | null )
+			?.ownerDocument?.activeElement;
+		if ( ! activeElement ) {
+			return;
+		}
+
+		const context = getFocusableContext( activeElement );
+		if ( ! context ) {
+			return;
+		}
+
+		const { index, focusables } = context;
+		const nextIndex = cycle
+			? cycleValue( index, focusables.length, offset )
+			: index + offset;
+
+		if ( nextIndex >= 0 && nextIndex < focusables.length ) {
+			focusables[ nextIndex ].focus();
+			onNavigate( nextIndex, focusables[ nextIndex ] );
+
+			// `preventDefault()` on tab to avoid having the browser move the focus
+			// after this component has already moved it.
+			if ( event.code === 'Tab' ) {
+				event.preventDefault();
+			}
+		}
+	}
+
+	render() {
+		const {
+			children,
+			stopNavigationEvents,
+			eventToOffset,
+			onNavigate,
+			onKeyDown,
+			cycle,
+			onlyBrowserTabstops,
+			forwardedRef,
+			...restProps
+		} = this.props;
+		return (
+			<div ref={ this.bindContainer } { ...restProps }>
+				{ children }
+			</div>
+		);
+	}
+}
+
+const forwardedNavigableContainer = (
+	props: NavigableContainerProps,
+	ref: ForwardedRef< HTMLDivElement >
+) => {
+	return <NavigableContainer { ...props } forwardedRef={ ref } />;
+};
+forwardedNavigableContainer.displayName = 'NavigableContainer';
+
+export default forwardRef( forwardedNavigableContainer );
diff --git a/packages/components/src/navigable-container/index.js b/packages/components/src/navigable-container/index.js
deleted file mode 100644
index b47667fd39cd7d..00000000000000
--- a/packages/components/src/navigable-container/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// @ts-nocheck
-/**
- * Internal Dependencies
- */
-export { default as NavigableMenu } from './menu';
-export { default as TabbableContainer } from './tabbable';
diff --git a/packages/components/src/navigable-container/index.tsx b/packages/components/src/navigable-container/index.tsx
new file mode 100644
index 00000000000000..e98f1b1236d7b4
--- /dev/null
+++ b/packages/components/src/navigable-container/index.tsx
@@ -0,0 +1,5 @@
+/**
+ * Internal Dependencies
+ */
+export { default as NavigableMenu } from './menu';
+export { default as TabbableContainer } from './tabbable';
diff --git a/packages/components/src/navigable-container/menu.js b/packages/components/src/navigable-container/menu.js
deleted file mode 100644
index cf19c23adcb9d8..00000000000000
--- a/packages/components/src/navigable-container/menu.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// @ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import NavigableContainer from './container';
-
-export function NavigableMenu(
-	{ role = 'menu', orientation = 'vertical', ...rest },
-	ref
-) {
-	const eventToOffset = ( evt ) => {
-		const { code } = evt;
-
-		let next = [ 'ArrowDown' ];
-		let previous = [ 'ArrowUp' ];
-
-		if ( orientation === 'horizontal' ) {
-			next = [ 'ArrowRight' ];
-			previous = [ 'ArrowLeft' ];
-		}
-
-		if ( orientation === 'both' ) {
-			next = [ 'ArrowRight', 'ArrowDown' ];
-			previous = [ 'ArrowLeft', 'ArrowUp' ];
-		}
-
-		if ( next.includes( code ) ) {
-			return 1;
-		} else if ( previous.includes( code ) ) {
-			return -1;
-		} else if (
-			[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(
-				code
-			)
-		) {
-			// Key press should be handled, e.g. have event propagation and
-			// default behavior handled by NavigableContainer but not result
-			// in an offset.
-			return 0;
-		}
-	};
-
-	return (
-		<NavigableContainer
-			ref={ ref }
-			stopNavigationEvents
-			onlyBrowserTabstops={ false }
-			role={ role }
-			aria-orientation={ role === 'presentation' ? null : orientation }
-			eventToOffset={ eventToOffset }
-			{ ...rest }
-		/>
-	);
-}
-
-export default forwardRef( NavigableMenu );
diff --git a/packages/components/src/navigable-container/menu.tsx b/packages/components/src/navigable-container/menu.tsx
new file mode 100644
index 00000000000000..ae865fe443aaec
--- /dev/null
+++ b/packages/components/src/navigable-container/menu.tsx
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import NavigableContainer from './container';
+import type { NavigableMenuProps } from './types';
+
+export function UnforwardedNavigableMenu(
+	{ role = 'menu', orientation = 'vertical', ...rest }: NavigableMenuProps,
+	ref: ForwardedRef< any >
+) {
+	const eventToOffset = ( evt: KeyboardEvent ) => {
+		const { code } = evt;
+
+		let next = [ 'ArrowDown' ];
+		let previous = [ 'ArrowUp' ];
+
+		if ( orientation === 'horizontal' ) {
+			next = [ 'ArrowRight' ];
+			previous = [ 'ArrowLeft' ];
+		}
+
+		if ( orientation === 'both' ) {
+			next = [ 'ArrowRight', 'ArrowDown' ];
+			previous = [ 'ArrowLeft', 'ArrowUp' ];
+		}
+
+		if ( next.includes( code ) ) {
+			return 1;
+		} else if ( previous.includes( code ) ) {
+			return -1;
+		} else if (
+			[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(
+				code
+			)
+		) {
+			// Key press should be handled, e.g. have event propagation and
+			// default behavior handled by NavigableContainer but not result
+			// in an offset.
+			return 0;
+		}
+
+		return undefined;
+	};
+
+	return (
+		<NavigableContainer
+			ref={ ref }
+			stopNavigationEvents
+			onlyBrowserTabstops={ false }
+			role={ role }
+			aria-orientation={
+				role !== 'presentation' &&
+				( orientation === 'vertical' || orientation === 'horizontal' )
+					? orientation
+					: undefined
+			}
+			eventToOffset={ eventToOffset }
+			{ ...rest }
+		/>
+	);
+}
+
+/**
+ * A container for a navigable menu.
+ *
+ *  ```jsx
+ *  import {
+ *    NavigableMenu,
+ *    Button,
+ *  } from '@wordpress/components';
+ *
+ *  function onNavigate( index, target ) {
+ *    console.log( `Navigates to ${ index }`, target );
+ *  }
+ *
+ *  const MyNavigableContainer = () => (
+ *    <div>
+ *      <span>Navigable Menu:</span>
+ *      <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
+ *        <Button variant="secondary">Item 1</Button>
+ *        <Button variant="secondary">Item 2</Button>
+ *        <Button variant="secondary">Item 3</Button>
+ *      </NavigableMenu>
+ *    </div>
+ *  );
+ *  ```
+ */
+export const NavigableMenu = forwardRef( UnforwardedNavigableMenu );
+
+export default NavigableMenu;
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.js b/packages/components/src/navigable-container/stories/navigable-menu.js
deleted file mode 100644
index af9b08fd9b032a..00000000000000
--- a/packages/components/src/navigable-container/stories/navigable-menu.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Internal dependencies
- */
-import { NavigableMenu } from '..';
-
-export default {
-	title: 'Components/NavigableMenu',
-	component: NavigableMenu,
-	argTypes: {
-		children: { type: null },
-		cycle: {
-			type: 'boolean',
-		},
-		onNavigate: { action: 'onNavigate' },
-		orientation: {
-			options: [ 'horizontal', 'vertical' ],
-			control: { type: 'radio' },
-		},
-	},
-};
-
-export const Default = ( args ) => {
-	return (
-		<>
-			<button>Before navigable menu</button>
-			<NavigableMenu
-				{ ...args }
-				style={ {
-					margin: '32px 0',
-					padding: '16px',
-					border: '1px solid black',
-				} }
-			>
-				<div role="menuitem">Item 1 (non-tabbable, non-focusable)</div>
-				<button role="menuitem">Item 2 (tabbable, focusable)</button>
-				<button role="menuitem" disabled>
-					Item 3 (disabled, therefore non-tabbable and not-focusable)
-				</button>
-				<span role="menuitem" tabIndex={ -1 }>
-					Item 4 (non-tabbable, non-focusable)
-				</span>
-				<div role="menuitem" tabIndex={ 0 }>
-					Item 5 (tabbable, focusable)
-				</div>
-			</NavigableMenu>
-			<button>After navigable menu</button>
-		</>
-	);
-};
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
new file mode 100644
index 00000000000000..30986ff479e43f
--- /dev/null
+++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { NavigableMenu } from '..';
+
+const meta: Meta< typeof NavigableMenu > = {
+	title: 'Components/Containers/NavigableMenu',
+	id: 'components-navigablemenu',
+	component: NavigableMenu,
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof NavigableMenu > = ( args ) => {
+	return (
+		<>
+			<button>Before navigable menu</button>
+			<NavigableMenu
+				{ ...args }
+				style={ {
+					margin: '32px 0',
+					padding: '16px',
+					border: '1px solid black',
+				} }
+			>
+				<div role="menuitem">Item 1 (non-tabbable, non-focusable)</div>
+				<button role="menuitem">Item 2 (tabbable, focusable)</button>
+				<button role="menuitem" disabled>
+					Item 3 (disabled, therefore non-tabbable and not-focusable)
+				</button>
+				<span role="menuitem" tabIndex={ -1 }>
+					Item 4 (non-tabbable, non-focusable)
+				</span>
+				<div role="menuitem" tabIndex={ 0 }>
+					Item 5 (tabbable, focusable)
+				</div>
+			</NavigableMenu>
+			<button>After navigable menu</button>
+		</>
+	);
+};
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.js b/packages/components/src/navigable-container/stories/tabbable-container.js
deleted file mode 100644
index 3e12825189f1a7..00000000000000
--- a/packages/components/src/navigable-container/stories/tabbable-container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Internal dependencies
- */
-import { TabbableContainer } from '..';
-
-export default {
-	title: 'Components/TabbableContainer',
-	component: TabbableContainer,
-	argTypes: {
-		children: { type: null },
-		cycle: {
-			type: 'boolean',
-		},
-		onNavigate: { action: 'onNavigate' },
-	},
-};
-
-export const Default = ( args ) => {
-	return (
-		<>
-			<button>Before tabbable container</button>
-			<TabbableContainer
-				{ ...args }
-				style={ {
-					margin: '32px 0',
-					padding: '16px',
-					border: '1px solid black',
-				} }
-			>
-				<button>Item 1</button>
-				<button>Item 2</button>
-				<button disabled>Item 3 (disabled)</button>
-				<button tabIndex={ -1 }>Item 4 (non-tabbable)</button>
-				<button tabIndex={ 0 }>Item 5</button>
-				<button>Item 6</button>
-			</TabbableContainer>
-			<button>After tabbable container</button>
-		</>
-	);
-};
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
new file mode 100644
index 00000000000000..afb4119015b52a
--- /dev/null
+++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { TabbableContainer } from '..';
+
+const meta: Meta< typeof TabbableContainer > = {
+	title: 'Components/Containers/TabbableContainer',
+	id: 'components-tabbablecontainer',
+	component: TabbableContainer,
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof TabbableContainer > = ( args ) => {
+	return (
+		<>
+			<button>Before tabbable container</button>
+			<TabbableContainer
+				{ ...args }
+				style={ {
+					margin: '32px 0',
+					padding: '16px',
+					border: '1px solid black',
+				} }
+			>
+				<button>Item 1</button>
+				<button>Item 2</button>
+				<button disabled>Item 3 (disabled)</button>
+				<button tabIndex={ -1 }>Item 4 (non-tabbable)</button>
+				<button tabIndex={ 0 }>Item 5</button>
+				<button>Item 6</button>
+			</TabbableContainer>
+			<button>After tabbable container</button>
+		</>
+	);
+};
diff --git a/packages/components/src/navigable-container/tabbable.js b/packages/components/src/navigable-container/tabbable.js
deleted file mode 100644
index 8f38970bf06700..00000000000000
--- a/packages/components/src/navigable-container/tabbable.js
+++ /dev/null
@@ -1,46 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import NavigableContainer from './container';
-
-export function TabbableContainer( { eventToOffset, ...props }, ref ) {
-	const innerEventToOffset = ( evt ) => {
-		const { code, shiftKey } = evt;
-		if ( 'Tab' === code ) {
-			return shiftKey ? -1 : 1;
-		}
-
-		// Allow custom handling of keys besides Tab.
-		//
-		// By default, TabbableContainer will move focus forward on Tab and
-		// backward on Shift+Tab. The handler below will be used for all other
-		// events. The semantics for `eventToOffset`'s return
-		// values are the following:
-		//
-		// - +1: move focus forward
-		// - -1: move focus backward
-		// -  0: don't move focus, but acknowledge event and thus stop it
-		// - undefined: do nothing, let the event propagate.
-		if ( eventToOffset ) {
-			return eventToOffset( evt );
-		}
-	};
-
-	return (
-		<NavigableContainer
-			ref={ ref }
-			stopNavigationEvents
-			onlyBrowserTabstops
-			eventToOffset={ innerEventToOffset }
-			{ ...props }
-		/>
-	);
-}
-
-export default forwardRef( TabbableContainer );
diff --git a/packages/components/src/navigable-container/tabbable.tsx b/packages/components/src/navigable-container/tabbable.tsx
new file mode 100644
index 00000000000000..565007bf62d831
--- /dev/null
+++ b/packages/components/src/navigable-container/tabbable.tsx
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import NavigableContainer from './container';
+import type { TabbableContainerProps } from './types';
+
+export function UnforwardedTabbableContainer(
+	{ eventToOffset, ...props }: TabbableContainerProps,
+	ref: ForwardedRef< any >
+) {
+	const innerEventToOffset = ( evt: KeyboardEvent ) => {
+		const { code, shiftKey } = evt;
+		if ( 'Tab' === code ) {
+			return shiftKey ? -1 : 1;
+		}
+
+		// Allow custom handling of keys besides Tab.
+		//
+		// By default, TabbableContainer will move focus forward on Tab and
+		// backward on Shift+Tab. The handler below will be used for all other
+		// events. The semantics for `eventToOffset`'s return
+		// values are the following:
+		//
+		// - +1: move focus forward
+		// - -1: move focus backward
+		// -  0: don't move focus, but acknowledge event and thus stop it
+		// - undefined: do nothing, let the event propagate.
+		if ( eventToOffset ) {
+			return eventToOffset( evt );
+		}
+
+		return undefined;
+	};
+
+	return (
+		<NavigableContainer
+			ref={ ref }
+			stopNavigationEvents
+			onlyBrowserTabstops
+			eventToOffset={ innerEventToOffset }
+			{ ...props }
+		/>
+	);
+}
+
+/**
+ * A container for tabbable elements.
+ *
+ *  ```jsx
+ *  import {
+ *    TabbableContainer,
+ *    Button,
+ *  } from '@wordpress/components';
+ *
+ *  function onNavigate( index, target ) {
+ *    console.log( `Navigates to ${ index }`, target );
+ *  }
+ *
+ *  const MyTabbableContainer = () => (
+ *    <div>
+ *      <span>Tabbable Container:</span>
+ *      <TabbableContainer onNavigate={ onNavigate }>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 1
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 2
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 3
+ *        </Button>
+ *        <Button variant="secondary" tabIndex="0">
+ *          Section 4
+ *        </Button>
+ *      </TabbableContainer>
+ *    </div>
+ *  );
+ *  ```
+ */
+export const TabbableContainer = forwardRef( UnforwardedTabbableContainer );
+
+export default TabbableContainer;
diff --git a/packages/components/src/navigable-container/test/navigable-menu.js b/packages/components/src/navigable-container/test/navigable-menu.js
deleted file mode 100644
index e50925a73c1d3b..00000000000000
--- a/packages/components/src/navigable-container/test/navigable-menu.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { NavigableMenu } from '../menu';
-
-const NavigableMenuTestCase = ( props ) => (
-	<NavigableMenu { ...props }>
-		<button>Item 1</button>
-		<span>
-			<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
-		</span>
-		<p>I can not be focused</p>
-		<input type="text" disabled name="disabled-input" />
-		<a href="https://example.com">Item 4</a>
-	</NavigableMenu>
-);
-
-const getNavigableMenuFocusables = () => [
-	screen.getByRole( 'button', { name: 'Item 1' } ),
-	screen.getByText( 'Item 2 (not tabbable)' ),
-	screen.getByRole( 'link', { name: 'Item 4' } ),
-];
-
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
-describe( 'NavigableMenu', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
-	it( 'moves focus on its focusable children by using the up/down arrow keys', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const onNavigateSpy = jest.fn();
-
-		render( <NavigableMenuTestCase onNavigate={ onNavigateSpy } /> );
-
-		const focusables = getNavigableMenuFocusables();
-
-		// Move focus to first item.
-		await user.tab();
-		expect( focusables[ 0 ] ).toHaveFocus();
-
-		// By default, up/down arrows are used to navigate.
-		await user.keyboard( '[ArrowDown]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
-
-		await user.keyboard( '[ArrowDown]' );
-		expect( focusables[ 2 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, focusables[ 2 ] );
-
-		await user.keyboard( '[ArrowUp]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
-
-		// Left/right arrows don't navigate.
-		await user.keyboard( '[ArrowLeft]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-
-		await user.keyboard( '[ArrowRight]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-	} );
-
-	it( 'moves focus on its focusable children by using the left/right arrow keys when the `orientation`prop is set to `horizontal', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const onNavigateSpy = jest.fn();
-
-		render(
-			<NavigableMenuTestCase
-				orientation="horizontal"
-				onNavigate={ onNavigateSpy }
-			/>
-		);
-
-		const focusables = getNavigableMenuFocusables();
-
-		// Move focus to first item.
-		await user.tab();
-		expect( focusables[ 0 ] ).toHaveFocus();
-
-		// When `orientation="horizontal"`, left/right arrows are used to navigate.
-		await user.keyboard( '[ArrowRight]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
-
-		await user.keyboard( '[ArrowRight]' );
-		expect( focusables[ 2 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, focusables[ 2 ] );
-
-		await user.keyboard( '[ArrowLeft]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
-
-		// When `orientation="horizontal"`, up/down arrows don't navigate.
-		await user.keyboard( '[ArrowUp]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-
-		await user.keyboard( '[ArrowDown]' );
-		expect( focusables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-	} );
-
-	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const onNavigateSpy = jest.fn();
-
-		const { rerender } = render(
-			<NavigableMenuTestCase onNavigate={ onNavigateSpy } />
-		);
-
-		const focusables = getNavigableMenuFocusables();
-		const firstFocusable = focusables[ 0 ];
-		const lastFocusableIndex = focusables.length - 1;
-		const lastFocusable = focusables[ lastFocusableIndex ];
-
-		// Move focus to first item.
-		await user.tab();
-		expect( firstFocusable ).toHaveFocus();
-
-		// By default, cycling from first to last and from last to first is allowed.
-		await user.keyboard( '[ArrowUp]' );
-		expect( lastFocusable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
-			lastFocusableIndex,
-			lastFocusable
-		);
-
-		await user.keyboard( '[ArrowDown]' );
-		expect( firstFocusable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 0, firstFocusable );
-
-		rerender(
-			<NavigableMenuTestCase
-				onNavigate={ onNavigateSpy }
-				cycle={ false }
-			/>
-		);
-
-		// With the `cycle` prop set to `false`, cycling is not allowed.
-		// By default, cycling from first to last and from last to first is allowed.
-		await user.keyboard( '[ArrowUp]' );
-		expect( firstFocusable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-
-		await user.keyboard( '[ArrowDown][ArrowDown]' );
-		expect( lastFocusable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
-			lastFocusableIndex,
-			lastFocusable
-		);
-
-		await user.keyboard( '[ArrowDown]' );
-		expect( lastFocusable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
-	} );
-
-	it( 'stops keydown event propagation when arrow keys are pressed, regardless of the `orientation` prop', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const externalWrapperOnKeyDownSpy = jest.fn();
-
-		render(
-			// Disable reason: this is only for test purposes.
-			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-			<div onKeyDown={ externalWrapperOnKeyDownSpy }>
-				<NavigableMenuTestCase />
-			</div>
-		);
-
-		const focusables = getNavigableMenuFocusables();
-
-		// Move focus to first item
-		await user.tab();
-		expect( focusables[ 0 ] ).toHaveFocus();
-
-		await user.keyboard( '[Space]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
-
-		await user.keyboard( '[ArrowDown][ArrowUp][ArrowLeft][ArrowRight]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
-
-		await user.keyboard( '[Escape]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
-	} );
-
-	it( 'skips its internal logic when the tab key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render(
-			<>
-				<button>Before menu</button>
-				<NavigableMenuTestCase />
-				<button>After menu</button>
-			</>
-		);
-
-		const beforeFocusable = screen.getByRole( 'button', {
-			name: 'Before menu',
-		} );
-		const internalFocusables = getNavigableMenuFocusables();
-		const firstFocusable = internalFocusables[ 0 ];
-		const lastFocusableIndex = internalFocusables.length - 1;
-		const lastFocusable = internalFocusables[ lastFocusableIndex ];
-		const afterFocusable = screen.getByRole( 'button', {
-			name: 'After menu',
-		} );
-
-		// The 'tab' key is not handled by the component, which means that elements
-		// are focused following the standard browser behavior.
-		await user.tab();
-		expect( beforeFocusable ).toHaveFocus();
-
-		await user.tab();
-		expect( firstFocusable ).toHaveFocus();
-
-		// Note: the second element "internalFocusables" is not focused by default
-		// by the browser because it has `tabindex="-1"`
-
-		await user.tab();
-		expect( lastFocusable ).toHaveFocus();
-
-		await user.tab();
-		expect( afterFocusable ).toHaveFocus();
-
-		await user.tab( { shift: true } );
-		expect( lastFocusable ).toHaveFocus();
-
-		// Note: the second element "internalFocusables" is not focused by default
-		// by the browser because it has `tabindex="-1"`
-
-		await user.tab( { shift: true } );
-		expect( firstFocusable ).toHaveFocus();
-
-		await user.tab( { shift: true } );
-		expect( beforeFocusable ).toHaveFocus();
-	} );
-} );
diff --git a/packages/components/src/navigable-container/test/navigable-menu.tsx b/packages/components/src/navigable-container/test/navigable-menu.tsx
new file mode 100644
index 00000000000000..a5ab228b0c2b20
--- /dev/null
+++ b/packages/components/src/navigable-container/test/navigable-menu.tsx
@@ -0,0 +1,269 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { NavigableMenu } from '../menu';
+import type { NavigableMenuProps } from '../types';
+
+const NavigableMenuTestCase = ( props: NavigableMenuProps ) => (
+	<NavigableMenu { ...props }>
+		<button>Item 1</button>
+		<span>
+			<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
+		</span>
+		<p>I can not be focused</p>
+		<input type="text" disabled name="disabled-input" />
+		<a href="https://example.com">Item 4</a>
+	</NavigableMenu>
+);
+
+const getNavigableMenuFocusables = () => [
+	screen.getByRole( 'button', { name: 'Item 1' } ),
+	screen.getByText( 'Item 2 (not tabbable)' ),
+	screen.getByRole( 'link', { name: 'Item 4' } ),
+];
+
+const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
+
+describe( 'NavigableMenu', () => {
+	beforeAll( () => {
+		// Mocking `getClientRects()` is necessary to pass a check performed by
+		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
+		// from the `@wordpress/dom` package.
+		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+		window.HTMLElement.prototype.getClientRects = function () {
+			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+		};
+	} );
+
+	afterAll( () => {
+		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	it( 'moves focus on its focusable children by using the up/down arrow keys', async () => {
+		const user = userEvent.setup();
+
+		const onNavigateSpy = jest.fn();
+
+		render( <NavigableMenuTestCase onNavigate={ onNavigateSpy } /> );
+
+		const focusables = getNavigableMenuFocusables();
+
+		// Move focus to first item.
+		await user.tab();
+		expect( focusables[ 0 ] ).toHaveFocus();
+
+		// By default, up/down arrows are used to navigate.
+		await user.keyboard( '[ArrowDown]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
+
+		await user.keyboard( '[ArrowDown]' );
+		expect( focusables[ 2 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, focusables[ 2 ] );
+
+		await user.keyboard( '[ArrowUp]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
+
+		// Left/right arrows don't navigate.
+		await user.keyboard( '[ArrowLeft]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+
+		await user.keyboard( '[ArrowRight]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+	} );
+
+	it( 'moves focus on its focusable children by using the left/right arrow keys when the `orientation`prop is set to `horizontal', async () => {
+		const user = userEvent.setup();
+
+		const onNavigateSpy = jest.fn();
+
+		render(
+			<NavigableMenuTestCase
+				orientation="horizontal"
+				onNavigate={ onNavigateSpy }
+			/>
+		);
+
+		const focusables = getNavigableMenuFocusables();
+
+		// Move focus to first item.
+		await user.tab();
+		expect( focusables[ 0 ] ).toHaveFocus();
+
+		// When `orientation="horizontal"`, left/right arrows are used to navigate.
+		await user.keyboard( '[ArrowRight]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
+
+		await user.keyboard( '[ArrowRight]' );
+		expect( focusables[ 2 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, focusables[ 2 ] );
+
+		await user.keyboard( '[ArrowLeft]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, focusables[ 1 ] );
+
+		// When `orientation="horizontal"`, up/down arrows don't navigate.
+		await user.keyboard( '[ArrowUp]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+
+		await user.keyboard( '[ArrowDown]' );
+		expect( focusables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+	} );
+
+	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
+		const user = userEvent.setup();
+
+		const onNavigateSpy = jest.fn();
+
+		const { rerender } = render(
+			<NavigableMenuTestCase onNavigate={ onNavigateSpy } />
+		);
+
+		const focusables = getNavigableMenuFocusables();
+		const firstFocusable = focusables[ 0 ];
+		const lastFocusableIndex = focusables.length - 1;
+		const lastFocusable = focusables[ lastFocusableIndex ];
+
+		// Move focus to first item.
+		await user.tab();
+		expect( firstFocusable ).toHaveFocus();
+
+		// By default, cycling from first to last and from last to first is allowed.
+		await user.keyboard( '[ArrowUp]' );
+		expect( lastFocusable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
+			lastFocusableIndex,
+			lastFocusable
+		);
+
+		await user.keyboard( '[ArrowDown]' );
+		expect( firstFocusable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 0, firstFocusable );
+
+		rerender(
+			<NavigableMenuTestCase
+				onNavigate={ onNavigateSpy }
+				cycle={ false }
+			/>
+		);
+
+		// With the `cycle` prop set to `false`, cycling is not allowed.
+		// By default, cycling from first to last and from last to first is allowed.
+		await user.keyboard( '[ArrowUp]' );
+		expect( firstFocusable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+
+		await user.keyboard( '[ArrowDown][ArrowDown]' );
+		expect( lastFocusable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
+			lastFocusableIndex,
+			lastFocusable
+		);
+
+		await user.keyboard( '[ArrowDown]' );
+		expect( lastFocusable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
+	} );
+
+	it( 'stops keydown event propagation when arrow keys are pressed, regardless of the `orientation` prop', async () => {
+		const user = userEvent.setup();
+
+		const externalWrapperOnKeyDownSpy = jest.fn();
+
+		render(
+			// Disable reason: this is only for test purposes.
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ externalWrapperOnKeyDownSpy }>
+				<NavigableMenuTestCase />
+			</div>
+		);
+
+		const focusables = getNavigableMenuFocusables();
+
+		// Move focus to first item
+		await user.tab();
+		expect( focusables[ 0 ] ).toHaveFocus();
+
+		await user.keyboard( '[Space]' );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
+
+		await user.keyboard( '[ArrowDown][ArrowUp][ArrowLeft][ArrowRight]' );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
+
+		await user.keyboard( '[Escape]' );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'skips its internal logic when the tab key is pressed', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<>
+				<button>Before menu</button>
+				<NavigableMenuTestCase />
+				<button>After menu</button>
+			</>
+		);
+
+		const beforeFocusable = screen.getByRole( 'button', {
+			name: 'Before menu',
+		} );
+		const internalFocusables = getNavigableMenuFocusables();
+		const firstFocusable = internalFocusables[ 0 ];
+		const lastFocusableIndex = internalFocusables.length - 1;
+		const lastFocusable = internalFocusables[ lastFocusableIndex ];
+		const afterFocusable = screen.getByRole( 'button', {
+			name: 'After menu',
+		} );
+
+		// The 'tab' key is not handled by the component, which means that elements
+		// are focused following the standard browser behavior.
+		await user.tab();
+		expect( beforeFocusable ).toHaveFocus();
+
+		await user.tab();
+		expect( firstFocusable ).toHaveFocus();
+
+		// Note: the second element "internalFocusables" is not focused by default
+		// by the browser because it has `tabindex="-1"`
+
+		await user.tab();
+		expect( lastFocusable ).toHaveFocus();
+
+		await user.tab();
+		expect( afterFocusable ).toHaveFocus();
+
+		await user.tab( { shift: true } );
+		expect( lastFocusable ).toHaveFocus();
+
+		// Note: the second element "internalFocusables" is not focused by default
+		// by the browser because it has `tabindex="-1"`
+
+		await user.tab( { shift: true } );
+		expect( firstFocusable ).toHaveFocus();
+
+		await user.tab( { shift: true } );
+		expect( beforeFocusable ).toHaveFocus();
+	} );
+} );
diff --git a/packages/components/src/navigable-container/test/tababble-container.js b/packages/components/src/navigable-container/test/tababble-container.js
deleted file mode 100644
index 593238578792f1..00000000000000
--- a/packages/components/src/navigable-container/test/tababble-container.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { TabbableContainer } from '../tabbable';
-
-const TabbableContainerTestCase = ( props ) => (
-	<TabbableContainer { ...props }>
-		<button>Item 1</button>
-		<span>
-			<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
-		</span>
-		<span>
-			<span tabIndex={ 0 }>Item 3</span>
-		</span>
-		<p>I can not be tabbed</p>
-		<input type="text" disabled name="disabled-input" />
-		<a href="https://example.com">Item 4</a>
-	</TabbableContainer>
-);
-
-const getTabbableContainerTabbables = () => [
-	screen.getByRole( 'button', { name: 'Item 1' } ),
-	screen.getByText( 'Item 3' ),
-	screen.getByRole( 'link', { name: 'Item 4' } ),
-];
-
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
-describe( 'TabbableContainer', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
-	it( 'moves focus on its tabbable children by using the tab key', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const onNavigateSpy = jest.fn();
-
-		render( <TabbableContainerTestCase onNavigate={ onNavigateSpy } /> );
-
-		const tabbables = getTabbableContainerTabbables();
-
-		// Move focus to first item.
-		await user.tab();
-		expect( tabbables[ 0 ] ).toHaveFocus();
-
-		await user.tab();
-		expect( tabbables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, tabbables[ 1 ] );
-
-		await user.tab();
-		expect( tabbables[ 2 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, tabbables[ 2 ] );
-
-		await user.tab( { shift: true } );
-		expect( tabbables[ 1 ] ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, tabbables[ 1 ] );
-	} );
-
-	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const onNavigateSpy = jest.fn();
-
-		const { rerender } = render(
-			<TabbableContainerTestCase onNavigate={ onNavigateSpy } />
-		);
-
-		const tabbables = getTabbableContainerTabbables();
-		const firstTabbable = tabbables[ 0 ];
-		const lastTabbableIndex = tabbables.length - 1;
-		const lastTabbable = tabbables[ lastTabbableIndex ];
-
-		// Move focus to first item.
-		await user.tab();
-		expect( firstTabbable ).toHaveFocus();
-
-		// By default, cycling from first to last and from last to first is allowed.
-		await user.tab( { shift: true } );
-		expect( lastTabbable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
-			lastTabbableIndex,
-			lastTabbable
-		);
-
-		await user.tab();
-		expect( firstTabbable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 0, firstTabbable );
-
-		rerender(
-			<TabbableContainerTestCase
-				onNavigate={ onNavigateSpy }
-				cycle={ false }
-			/>
-		);
-
-		// With the `cycle` prop set to `false`, cycling is not allowed.
-		// By default, cycling from first to last and from last to first is allowed.
-		await user.tab( { shift: true } );
-		expect( firstTabbable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
-
-		await user.tab();
-		await user.tab();
-		expect( lastTabbable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
-		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
-			lastTabbableIndex,
-			lastTabbable
-		);
-
-		await user.tab();
-		expect( lastTabbable ).toHaveFocus();
-		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
-	} );
-
-	it( 'stops keydown event propagation when the tab key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const externalWrapperOnKeyDownSpy = jest.fn();
-
-		render(
-			// Disable reason: this is only for test purposes.
-			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-			<div onKeyDown={ externalWrapperOnKeyDownSpy }>
-				<TabbableContainerTestCase />
-			</div>
-		);
-
-		const tabbables = getTabbableContainerTabbables();
-
-		// Move focus to first item
-		await user.tab();
-		expect( tabbables[ 0 ] ).toHaveFocus();
-
-		await user.keyboard( '[Space]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
-
-		await user.tab();
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
-		await user.tab( { shift: true } );
-		// This extra call is caused by the "shift" key being pressed
-		// on its own before "tab"
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
-
-		await user.keyboard( '[Escape]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 3 );
-	} );
-} );
diff --git a/packages/components/src/navigable-container/test/tababble-container.tsx b/packages/components/src/navigable-container/test/tababble-container.tsx
new file mode 100644
index 00000000000000..eb14842025bec2
--- /dev/null
+++ b/packages/components/src/navigable-container/test/tababble-container.tsx
@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { TabbableContainer } from '../tabbable';
+import type { TabbableContainerProps } from '../types';
+
+const TabbableContainerTestCase = ( props: TabbableContainerProps ) => (
+	<>
+		<button>Before container</button>
+		<TabbableContainer { ...props }>
+			<button>Item 1</button>
+			<span>
+				<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
+			</span>
+			<span>
+				<span tabIndex={ 0 }>Item 3</span>
+			</span>
+			<p>I can not be tabbed</p>
+			<input type="text" disabled name="disabled-input" />
+			<a href="https://example.com">Item 4</a>
+		</TabbableContainer>
+		<button>After container</button>
+	</>
+);
+
+const getTabbableContainerTabbables = () => [
+	screen.getByRole( 'button', { name: 'Item 1' } ),
+	screen.getByText( 'Item 3' ),
+	screen.getByRole( 'link', { name: 'Item 4' } ),
+];
+
+const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
+
+describe( 'TabbableContainer', () => {
+	beforeAll( () => {
+		// Mocking `getClientRects()` is necessary to pass a check performed by
+		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
+		// from the `@wordpress/dom` package.
+		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+		window.HTMLElement.prototype.getClientRects = function () {
+			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+		};
+	} );
+
+	afterAll( () => {
+		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	it( 'moves focus on its tabbable children by using the tab key', async () => {
+		const user = userEvent.setup();
+
+		const onNavigateSpy = jest.fn();
+
+		render( <TabbableContainerTestCase onNavigate={ onNavigateSpy } /> );
+
+		const tabbables = getTabbableContainerTabbables();
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+
+		await user.tab();
+		expect( tabbables[ 0 ] ).toHaveFocus();
+
+		await user.tab();
+		expect( tabbables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, tabbables[ 1 ] );
+
+		await user.tab();
+		expect( tabbables[ 2 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 2, tabbables[ 2 ] );
+
+		await user.tab( { shift: true } );
+		expect( tabbables[ 1 ] ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 3 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 1, tabbables[ 1 ] );
+	} );
+
+	it( 'should stop at the edges when the `cycle` prop is set to `false`', async () => {
+		const user = userEvent.setup();
+
+		const onNavigateSpy = jest.fn();
+
+		const { rerender } = render(
+			<TabbableContainerTestCase onNavigate={ onNavigateSpy } />
+		);
+
+		const tabbables = getTabbableContainerTabbables();
+		const firstTabbable = tabbables[ 0 ];
+		const lastTabbableIndex = tabbables.length - 1;
+		const lastTabbable = tabbables[ lastTabbableIndex ];
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+
+		await user.tab();
+		expect( firstTabbable ).toHaveFocus();
+
+		// By default, cycling from first to last and from last to first is allowed.
+		await user.tab( { shift: true } );
+		expect( lastTabbable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 1 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
+			lastTabbableIndex,
+			lastTabbable
+		);
+
+		await user.tab();
+		expect( firstTabbable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith( 0, firstTabbable );
+
+		rerender(
+			<TabbableContainerTestCase
+				onNavigate={ onNavigateSpy }
+				cycle={ false }
+			/>
+		);
+
+		// By default, cycling from first to last and from last to first is allowed.
+		// With the `cycle` prop set to `false`, cycling is not allowed.
+		// Therefore, focus will escape the `TabbableContainer` and continue its
+		// natural path in the page.
+		await user.tab( { shift: true } );
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
+
+		await user.tab();
+		await user.tab();
+		await user.tab();
+		expect( lastTabbable ).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
+		expect( onNavigateSpy ).toHaveBeenLastCalledWith(
+			lastTabbableIndex,
+			lastTabbable
+		);
+
+		// Focus will move to the next natively focusable elements after
+		// `TabbableContainer`
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'After container' } )
+		).toHaveFocus();
+		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
+	} );
+
+	it( 'stops keydown event propagation when the tab key is pressed', async () => {
+		const user = userEvent.setup();
+
+		const externalWrapperOnKeyDownSpy = jest.fn();
+
+		render(
+			// Disable reason: this is only for test purposes.
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ externalWrapperOnKeyDownSpy }>
+				<TabbableContainerTestCase />
+			</div>
+		);
+
+		const tabbables = getTabbableContainerTabbables();
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 0 );
+
+		await user.tab();
+		expect( tabbables[ 0 ] ).toHaveFocus();
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
+
+		await user.keyboard( '[Space]' );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
+
+		await user.tab();
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
+		await user.tab( { shift: true } );
+		// This extra call is caused by the "shift" key being pressed
+		// on its own before "tab"
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 3 );
+
+		await user.keyboard( '[Escape]' );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 4 );
+	} );
+} );
diff --git a/packages/components/src/navigable-container/types.ts b/packages/components/src/navigable-container/types.ts
new file mode 100644
index 00000000000000..709aee447d3e04
--- /dev/null
+++ b/packages/components/src/navigable-container/types.ts
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+
+type BaseProps = {
+	/**
+	 * The component children.
+	 */
+	children?: ReactNode;
+	/**
+	 * A boolean which tells the component whether or not to cycle from the end back to the beginning and vice versa.
+	 *
+	 * @default true
+	 */
+	cycle?: boolean;
+	/**
+	 * A callback invoked on the keydown event.
+	 */
+	onKeyDown?: ( event: KeyboardEvent ) => void;
+	/**
+	 * A callback invoked when the menu navigates to one of its children passing the index and child as an argument
+	 */
+	onNavigate?: ( index: number, focusable: HTMLElement ) => void;
+};
+
+export type NavigableContainerProps = WordPressComponentProps<
+	BaseProps & {
+		/**
+		 * Gets an offset, given an event.
+		 */
+		eventToOffset: ( event: KeyboardEvent ) => -1 | 0 | 1 | undefined;
+		/**
+		 * The forwarded ref.
+		 */
+		forwardedRef?: ForwardedRef< any >;
+		/**
+		 * Whether to only consider browser tab stops.
+		 *
+		 * @default false
+		 */
+		onlyBrowserTabstops: boolean;
+		/**
+		 * Whether to stop navigation events.
+		 *
+		 * @default false
+		 */
+		stopNavigationEvents: boolean;
+	},
+	'div',
+	false
+>;
+
+export type NavigableMenuProps = WordPressComponentProps<
+	BaseProps & {
+		/**
+		 * The orientation of the menu.
+		 *
+		 * @default 'vertical'
+		 */
+		orientation?: 'vertical' | 'horizontal' | 'both';
+	},
+	'div',
+	false
+>;
+
+export type TabbableContainerProps = WordPressComponentProps<
+	BaseProps & Partial< Pick< NavigableContainerProps, 'eventToOffset' > >,
+	'div',
+	false
+>;
diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
index 1128874463d574..b294eb78331eef 100644
--- a/packages/components/src/navigation/README.md
+++ b/packages/components/src/navigation/README.md
@@ -1,5 +1,9 @@
 # Navigation
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `Navigator` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
@@ -122,7 +126,7 @@ The unique identifier of the menu. The root menu can omit this, and it will defa
 
 ### onSearch
 
--   Type: `function`
+-   Type: `( searchString: string ) => void;`
 -   Required: No
 
 When `hasSearch` is active, this function handles the search input's `onChange` event, making it controlled from the outside. It requires setting the `search` prop as well.
@@ -162,6 +166,13 @@ Indicates whether the menu is empty or not. Used together with the `hideIfTarget
 
 The menu title. It's also the field used by the menu search function.
 
+### `titleAction`
+
+-   Type: `React.ReactNode`
+-   Required: No
+
+Use this prop to render additional actions in the menu title.
+
 ## Navigation Group Props
 
 `NavigationGroup` supports the following props.
@@ -205,6 +216,13 @@ Optional className for the `NavigationItem` component.
 
 If provided, renders `a` instead of `button`.
 
+### `icon`
+
+-   Type: `JSX.Element`
+-   Required: No
+
+If no `children` are passed, this prop allows to specify a custom icon for the menu item.
+
 ### `item`
 
 -   Type: `string`
@@ -228,7 +246,7 @@ Indicates whether this item should be hidden if the menu specified in `navigateT
 
 ### `onClick`
 
--   Type: `function`
+-   Type: `React.MouseEventHandler`
 -   Required: No
 
 A callback to handle clicking on a menu item.
diff --git a/packages/components/src/navigation/back-button/index.js b/packages/components/src/navigation/back-button/index.js
deleted file mode 100644
index 5912e104d2cbb7..00000000000000
--- a/packages/components/src/navigation/back-button/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import { __, isRTL } from '@wordpress/i18n';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { MenuBackButtonUI } from '../styles/navigation-styles';
-
-function NavigationBackButton(
-	{ backButtonLabel, className, href, onClick, parentMenu },
-	ref
-) {
-	const { setActiveMenu, navigationTree } = useNavigationContext();
-
-	const classes = classnames(
-		'components-navigation__back-button',
-		className
-	);
-
-	const parentMenuTitle = navigationTree.getMenu( parentMenu )?.title;
-
-	const handleOnClick = ( event ) => {
-		if ( typeof onClick === 'function' ) {
-			onClick( event );
-		}
-
-		const animationDirection = isRTL() ? 'left' : 'right';
-		if ( parentMenu && ! event.defaultPrevented ) {
-			setActiveMenu( parentMenu, animationDirection );
-		}
-	};
-	const icon = isRTL() ? chevronRight : chevronLeft;
-	return (
-		<MenuBackButtonUI
-			className={ classes }
-			href={ href }
-			variant="tertiary"
-			ref={ ref }
-			onClick={ handleOnClick }
-		>
-			<Icon icon={ icon } />
-			{ backButtonLabel || parentMenuTitle || __( 'Back' ) }
-		</MenuBackButtonUI>
-	);
-}
-export default forwardRef( NavigationBackButton );
diff --git a/packages/components/src/navigation/back-button/index.tsx b/packages/components/src/navigation/back-button/index.tsx
new file mode 100644
index 00000000000000..077e5a8dbdc6d4
--- /dev/null
+++ b/packages/components/src/navigation/back-button/index.tsx
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { __, isRTL } from '@wordpress/i18n';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { MenuBackButtonUI } from '../styles/navigation-styles';
+
+import type { NavigationBackButtonProps } from '../types';
+
+function UnforwardedNavigationBackButton(
+	{
+		backButtonLabel,
+		className,
+		href,
+		onClick,
+		parentMenu,
+	}: NavigationBackButtonProps,
+	ref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >
+) {
+	const { setActiveMenu, navigationTree } = useNavigationContext();
+
+	const classes = clsx( 'components-navigation__back-button', className );
+
+	const parentMenuTitle =
+		parentMenu !== undefined
+			? navigationTree.getMenu( parentMenu )?.title
+			: undefined;
+
+	const handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {
+		if ( typeof onClick === 'function' ) {
+			onClick( event );
+		}
+
+		const animationDirection = isRTL() ? 'left' : 'right';
+		if ( parentMenu && ! event.defaultPrevented ) {
+			setActiveMenu( parentMenu, animationDirection );
+		}
+	};
+	const icon = isRTL() ? chevronRight : chevronLeft;
+	return (
+		<MenuBackButtonUI
+			className={ classes }
+			href={ href }
+			variant="tertiary"
+			ref={ ref }
+			onClick={ handleOnClick }
+		>
+			<Icon icon={ icon } />
+			{ backButtonLabel || parentMenuTitle || __( 'Back' ) }
+		</MenuBackButtonUI>
+	);
+}
+
+/**
+ * @deprecated Use `Navigator` instead.
+ */
+export const NavigationBackButton = forwardRef(
+	UnforwardedNavigationBackButton
+);
+
+export default NavigationBackButton;
diff --git a/packages/components/src/navigation/constants.js b/packages/components/src/navigation/constants.tsx
similarity index 100%
rename from packages/components/src/navigation/constants.js
rename to packages/components/src/navigation/constants.tsx
diff --git a/packages/components/src/navigation/context.js b/packages/components/src/navigation/context.js
deleted file mode 100644
index 58fcb9712a22eb..00000000000000
--- a/packages/components/src/navigation/context.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ROOT_MENU } from './constants';
-
-const noop = () => {};
-
-export const NavigationContext = createContext( {
-	activeItem: undefined,
-	activeMenu: ROOT_MENU,
-	setActiveMenu: noop,
-	isMenuEmpty: noop,
-
-	navigationTree: {
-		items: {},
-		getItem: noop,
-		addItem: noop,
-		removeItem: noop,
-
-		menus: {},
-		getMenu: noop,
-		addMenu: noop,
-		removeMenu: noop,
-		childMenu: {},
-		traverseMenu: noop,
-		isMenuEmpty: noop,
-	},
-} );
-export const useNavigationContext = () => useContext( NavigationContext );
diff --git a/packages/components/src/navigation/context.tsx b/packages/components/src/navigation/context.tsx
new file mode 100644
index 00000000000000..3b14faf47d315d
--- /dev/null
+++ b/packages/components/src/navigation/context.tsx
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ROOT_MENU } from './constants';
+
+import type { NavigationContext as NavigationContextType } from './types';
+
+const noop = () => {};
+const defaultIsEmpty = () => false;
+const defaultGetter = () => undefined;
+
+export const NavigationContext = createContext< NavigationContextType >( {
+	activeItem: undefined,
+	activeMenu: ROOT_MENU,
+	setActiveMenu: noop,
+
+	navigationTree: {
+		items: {},
+		getItem: defaultGetter,
+		addItem: noop,
+		removeItem: noop,
+
+		menus: {},
+		getMenu: defaultGetter,
+		addMenu: noop,
+		removeMenu: noop,
+		childMenu: {},
+		traverseMenu: noop,
+		isMenuEmpty: defaultIsEmpty,
+	},
+} );
+export const useNavigationContext = () => useContext( NavigationContext );
diff --git a/packages/components/src/navigation/group/context.js b/packages/components/src/navigation/group/context.js
deleted file mode 100644
index d6725504ba8f2c..00000000000000
--- a/packages/components/src/navigation/group/context.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const NavigationGroupContext = createContext( { group: undefined } );
-
-export const useNavigationGroupContext = () =>
-	useContext( NavigationGroupContext );
diff --git a/packages/components/src/navigation/group/context.tsx b/packages/components/src/navigation/group/context.tsx
new file mode 100644
index 00000000000000..822a0bb067c882
--- /dev/null
+++ b/packages/components/src/navigation/group/context.tsx
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigationGroupContext as NavigationGroupContextType } from '../types';
+
+export const NavigationGroupContext =
+	createContext< NavigationGroupContextType >( { group: undefined } );
+
+export const useNavigationGroupContext = () =>
+	useContext( NavigationGroupContext );
diff --git a/packages/components/src/navigation/group/index.js b/packages/components/src/navigation/group/index.js
deleted file mode 100644
index 5ebebc2ed3b27f..00000000000000
--- a/packages/components/src/navigation/group/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { NavigationGroupContext } from './context';
-import { GroupTitleUI } from '../styles/navigation-styles';
-import { useNavigationContext } from '../context';
-
-let uniqueId = 0;
-
-export default function NavigationGroup( { children, className, title } ) {
-	const [ groupId ] = useState( `group-${ ++uniqueId }` );
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-
-	const context = { group: groupId };
-
-	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if (
-		! Object.values( items ).some(
-			( item ) => item.group === groupId && item._isVisible
-		)
-	) {
-		return (
-			<NavigationGroupContext.Provider value={ context }>
-				{ children }
-			</NavigationGroupContext.Provider>
-		);
-	}
-
-	const groupTitleId = `components-navigation__group-title-${ groupId }`;
-	const classes = classnames( 'components-navigation__group', className );
-
-	return (
-		<NavigationGroupContext.Provider value={ context }>
-			<li className={ classes }>
-				{ title && (
-					<GroupTitleUI
-						className="components-navigation__group-title"
-						id={ groupTitleId }
-						level={ 3 }
-					>
-						{ title }
-					</GroupTitleUI>
-				) }
-				<ul aria-labelledby={ groupTitleId } role="group">
-					{ children }
-				</ul>
-			</li>
-		</NavigationGroupContext.Provider>
-	);
-}
diff --git a/packages/components/src/navigation/group/index.tsx b/packages/components/src/navigation/group/index.tsx
new file mode 100644
index 00000000000000..f1871f67cace35
--- /dev/null
+++ b/packages/components/src/navigation/group/index.tsx
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationGroupContext } from './context';
+import { GroupTitleUI } from '../styles/navigation-styles';
+import { useNavigationContext } from '../context';
+
+import type { NavigationGroupProps } from '../types';
+
+let uniqueId = 0;
+
+/**
+ * @deprecated Use `Navigator` instead.
+ */
+export function NavigationGroup( {
+	children,
+	className,
+	title,
+}: NavigationGroupProps ) {
+	const [ groupId ] = useState( `group-${ ++uniqueId }` );
+	const {
+		navigationTree: { items },
+	} = useNavigationContext();
+
+	const context = { group: groupId };
+
+	// Keep the children rendered to make sure invisible items are included in the navigation tree.
+	if (
+		! Object.values( items ).some(
+			( item ) => item.group === groupId && item._isVisible
+		)
+	) {
+		return (
+			<NavigationGroupContext.Provider value={ context }>
+				{ children }
+			</NavigationGroupContext.Provider>
+		);
+	}
+
+	const groupTitleId = `components-navigation__group-title-${ groupId }`;
+	const classes = clsx( 'components-navigation__group', className );
+
+	return (
+		<NavigationGroupContext.Provider value={ context }>
+			<li className={ classes }>
+				{ title && (
+					<GroupTitleUI
+						className="components-navigation__group-title"
+						id={ groupTitleId }
+						level={ 3 }
+					>
+						{ title }
+					</GroupTitleUI>
+				) }
+				<ul aria-labelledby={ groupTitleId } role="group">
+					{ children }
+				</ul>
+			</li>
+		</NavigationGroupContext.Provider>
+	);
+}
+
+export default NavigationGroup;
diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js
deleted file mode 100644
index ab1f5cb5b58aa3..00000000000000
--- a/packages/components/src/navigation/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { getAnimateClassName } from '../animate';
-import { ROOT_MENU } from './constants';
-import { NavigationContext } from './context';
-import { NavigationUI } from './styles/navigation-styles';
-import { useCreateNavigationTree } from './use-create-navigation-tree';
-
-const noop = () => {};
-
-export default function Navigation( {
-	activeItem,
-	activeMenu = ROOT_MENU,
-	children,
-	className,
-	onActivateMenu = noop,
-} ) {
-	const [ menu, setMenu ] = useState( activeMenu );
-	const [ slideOrigin, setSlideOrigin ] = useState();
-	const navigationTree = useCreateNavigationTree();
-	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
-
-	const setActiveMenu = ( menuId, slideInOrigin = defaultSlideOrigin ) => {
-		if ( ! navigationTree.getMenu( menuId ) ) {
-			return;
-		}
-
-		setSlideOrigin( slideInOrigin );
-		setMenu( menuId );
-		onActivateMenu( menuId );
-	};
-
-	// Used to prevent the sliding animation on mount
-	const isMounted = useRef( false );
-	useEffect( () => {
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
-		}
-	}, [] );
-
-	useEffect( () => {
-		if ( activeMenu !== menu ) {
-			setActiveMenu( activeMenu );
-		}
-		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
-		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeMenu ] );
-
-	const context = {
-		activeItem,
-		activeMenu: menu,
-		setActiveMenu,
-		navigationTree,
-	};
-
-	const classes = classnames( 'components-navigation', className );
-	const animateClassName = getAnimateClassName( {
-		type: 'slide-in',
-		origin: slideOrigin,
-	} );
-
-	return (
-		<NavigationUI className={ classes }>
-			<div
-				key={ menu }
-				className={ classnames( {
-					[ animateClassName ]: isMounted.current && slideOrigin,
-				} ) }
-			>
-				<NavigationContext.Provider value={ context }>
-					{ children }
-				</NavigationContext.Provider>
-			</div>
-		</NavigationUI>
-	);
-}
diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx
new file mode 100644
index 00000000000000..92f431dfb22fc7
--- /dev/null
+++ b/packages/components/src/navigation/index.tsx
@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getAnimateClassName } from '../animate';
+import { ROOT_MENU } from './constants';
+import { NavigationContext } from './context';
+import { NavigationUI } from './styles/navigation-styles';
+import { useCreateNavigationTree } from './use-create-navigation-tree';
+
+import type {
+	NavigationProps,
+	NavigationContext as NavigationContextType,
+} from './types';
+
+const noop = () => {};
+
+/**
+ * Render a navigation list with optional groupings and hierarchy.
+ *
+ * @deprecated Use `Navigator` instead.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalNavigation as Navigation,
+ *   __experimentalNavigationGroup as NavigationGroup,
+ *   __experimentalNavigationItem as NavigationItem,
+ *   __experimentalNavigationMenu as NavigationMenu,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <Navigation>
+ *     <NavigationMenu title="Home">
+ *       <NavigationGroup title="Group 1">
+ *         <NavigationItem item="item-1" title="Item 1" />
+ *         <NavigationItem item="item-2" title="Item 2" />
+ *       </NavigationGroup>
+ *       <NavigationGroup title="Group 2">
+ *         <NavigationItem
+ *           item="item-3"
+ *           navigateToMenu="category"
+ *           title="Category"
+ *         />
+ *       </NavigationGroup>
+ *     </NavigationMenu>
+ *
+ *     <NavigationMenu
+ *       backButtonLabel="Home"
+ *       menu="category"
+ *       parentMenu="root"
+ *       title="Category"
+ *     >
+ *       <NavigationItem badge="1" item="child-1" title="Child 1" />
+ *       <NavigationItem item="child-2" title="Child 2" />
+ *     </NavigationMenu>
+ *   </Navigation>
+ * );
+ * ```
+ */
+export function Navigation( {
+	activeItem,
+	activeMenu = ROOT_MENU,
+	children,
+	className,
+	onActivateMenu = noop,
+}: NavigationProps ) {
+	const [ menu, setMenu ] = useState( activeMenu );
+	const [ slideOrigin, setSlideOrigin ] = useState< 'left' | 'right' >();
+	const navigationTree = useCreateNavigationTree();
+	const defaultSlideOrigin = isRTL() ? 'right' : 'left';
+
+	const setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (
+		menuId,
+		slideInOrigin = defaultSlideOrigin
+	) => {
+		if ( ! navigationTree.getMenu( menuId ) ) {
+			return;
+		}
+
+		setSlideOrigin( slideInOrigin );
+		setMenu( menuId );
+		onActivateMenu( menuId );
+	};
+
+	// Used to prevent the sliding animation on mount
+	const isMountedRef = useRef( false );
+	useEffect( () => {
+		if ( ! isMountedRef.current ) {
+			isMountedRef.current = true;
+		}
+	}, [] );
+
+	useEffect( () => {
+		if ( activeMenu !== menu ) {
+			setActiveMenu( activeMenu );
+		}
+		// Not adding deps for now, as it would require either a larger refactor or some questionable workarounds.
+		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
+	}, [ activeMenu ] );
+
+	const context = {
+		activeItem,
+		activeMenu: menu,
+		setActiveMenu,
+		navigationTree,
+	};
+
+	const classes = clsx( 'components-navigation', className );
+	const animateClassName = getAnimateClassName( {
+		type: 'slide-in',
+		origin: slideOrigin,
+	} );
+
+	return (
+		<NavigationUI className={ classes }>
+			<div
+				key={ menu }
+				className={
+					animateClassName
+						? clsx( {
+								[ animateClassName ]:
+									isMountedRef.current && slideOrigin,
+						  } )
+						: undefined
+				}
+			>
+				<NavigationContext.Provider value={ context }>
+					{ children }
+				</NavigationContext.Provider>
+			</div>
+		</NavigationUI>
+	);
+}
+
+export default Navigation;
diff --git a/packages/components/src/navigation/item/base-content.js b/packages/components/src/navigation/item/base-content.js
deleted file mode 100644
index f4b6fc5b41a8a8..00000000000000
--- a/packages/components/src/navigation/item/base-content.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
-
-export default function NavigationItemBaseContent( props ) {
-	const { badge, title } = props;
-
-	return (
-		<>
-			{ title && (
-				<ItemTitleUI
-					className="components-navigation__item-title"
-					variant="body.small"
-					as="span"
-				>
-					{ title }
-				</ItemTitleUI>
-			) }
-
-			{ badge && (
-				<ItemBadgeUI className="components-navigation__item-badge">
-					{ badge }
-				</ItemBadgeUI>
-			) }
-		</>
-	);
-}
diff --git a/packages/components/src/navigation/item/base-content.tsx b/packages/components/src/navigation/item/base-content.tsx
new file mode 100644
index 00000000000000..3bda9a71251698
--- /dev/null
+++ b/packages/components/src/navigation/item/base-content.tsx
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';
+
+import type { NavigationItemBaseContentProps } from '../types';
+
+export default function NavigationItemBaseContent(
+	props: NavigationItemBaseContentProps
+) {
+	const { badge, title } = props;
+
+	return (
+		<>
+			{ title && (
+				<ItemTitleUI
+					className="components-navigation__item-title"
+					as="span"
+				>
+					{ title }
+				</ItemTitleUI>
+			) }
+
+			{ badge && (
+				<ItemBadgeUI className="components-navigation__item-badge">
+					{ badge }
+				</ItemBadgeUI>
+			) }
+		</>
+	);
+}
diff --git a/packages/components/src/navigation/item/base.js b/packages/components/src/navigation/item/base.js
deleted file mode 100644
index 1cbe80d466941b..00000000000000
--- a/packages/components/src/navigation/item/base.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { useNavigationTreeItem } from './use-navigation-tree-item';
-import { ItemBaseUI } from '../styles/navigation-styles';
-
-let uniqueId = 0;
-
-export default function NavigationItemBase( props ) {
-	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
-	const { children, className, title, href, ...restProps } = props;
-
-	const [ itemId ] = useState( `item-${ ++uniqueId }` );
-
-	useNavigationTreeItem( itemId, props );
-	const { navigationTree } = useNavigationContext();
-
-	if ( ! navigationTree.getItem( itemId )?._isVisible ) {
-		return null;
-	}
-
-	const classes = classnames( 'components-navigation__item', className );
-
-	return (
-		<ItemBaseUI className={ classes } { ...restProps }>
-			{ children }
-		</ItemBaseUI>
-	);
-}
diff --git a/packages/components/src/navigation/item/base.tsx b/packages/components/src/navigation/item/base.tsx
new file mode 100644
index 00000000000000..de4dfaba88c1a3
--- /dev/null
+++ b/packages/components/src/navigation/item/base.tsx
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { useNavigationTreeItem } from './use-navigation-tree-item';
+import { ItemBaseUI } from '../styles/navigation-styles';
+
+import type { NavigationItemBaseProps } from '../types';
+
+let uniqueId = 0;
+
+export default function NavigationItemBase( props: NavigationItemBaseProps ) {
+	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
+	const { children, className, title, href, ...restProps } = props;
+
+	const [ itemId ] = useState( `item-${ ++uniqueId }` );
+
+	useNavigationTreeItem( itemId, props );
+	const { navigationTree } = useNavigationContext();
+
+	if ( ! navigationTree.getItem( itemId )?._isVisible ) {
+		return null;
+	}
+
+	const classes = clsx( 'components-navigation__item', className );
+
+	return (
+		<ItemBaseUI className={ classes } { ...restProps }>
+			{ children }
+		</ItemBaseUI>
+	);
+}
diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js
deleted file mode 100644
index 7f9369b5c9e2bd..00000000000000
--- a/packages/components/src/navigation/item/index.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { useNavigationContext } from '../context';
-import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
-import NavigationItemBaseContent from './base-content';
-import NavigationItemBase from './base';
-
-const noop = () => {};
-
-export default function NavigationItem( props ) {
-	const {
-		badge,
-		children,
-		className,
-		href,
-		item,
-		navigateToMenu,
-		onClick = noop,
-		title,
-		icon,
-		hideIfTargetMenuEmpty,
-		isText,
-		...restProps
-	} = props;
-
-	const {
-		activeItem,
-		setActiveMenu,
-		navigationTree: { isMenuEmpty },
-	} = useNavigationContext();
-
-	// If hideIfTargetMenuEmpty prop is true
-	// And the menu we are supposed to navigate to
-	// Is marked as empty, then we skip rendering the item.
-	if (
-		hideIfTargetMenuEmpty &&
-		navigateToMenu &&
-		isMenuEmpty( navigateToMenu )
-	) {
-		return null;
-	}
-
-	const isActive = item && activeItem === item;
-
-	const classes = classnames( className, {
-		'is-active': isActive,
-	} );
-
-	const onItemClick = ( event ) => {
-		if ( navigateToMenu ) {
-			setActiveMenu( navigateToMenu );
-		}
-
-		onClick( event );
-	};
-	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
-	const baseProps = children ? props : { ...props, onClick: undefined };
-	const itemProps = isText
-		? restProps
-		: {
-				as: Button,
-				href,
-				onClick: onItemClick,
-				'aria-current': isActive ? 'page' : undefined,
-				...restProps,
-		  };
-
-	return (
-		<NavigationItemBase { ...baseProps } className={ classes }>
-			{ children || (
-				<ItemUI { ...itemProps }>
-					{ icon && (
-						<ItemIconUI>
-							<Icon icon={ icon } />
-						</ItemIconUI>
-					) }
-
-					<NavigationItemBaseContent
-						title={ title }
-						badge={ badge }
-					/>
-
-					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
-				</ItemUI>
-			) }
-		</NavigationItemBase>
-	);
-}
diff --git a/packages/components/src/navigation/item/index.tsx b/packages/components/src/navigation/item/index.tsx
new file mode 100644
index 00000000000000..4f4cc2a5dc7a22
--- /dev/null
+++ b/packages/components/src/navigation/item/index.tsx
@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { useNavigationContext } from '../context';
+import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
+import NavigationItemBaseContent from './base-content';
+import NavigationItemBase from './base';
+
+import type { NavigationItemProps } from '../types';
+
+const noop = () => {};
+
+/**
+ * @deprecated Use `Navigator` instead.
+ */
+export function NavigationItem( props: NavigationItemProps ) {
+	const {
+		badge,
+		children,
+		className,
+		href,
+		item,
+		navigateToMenu,
+		onClick = noop,
+		title,
+		icon,
+		hideIfTargetMenuEmpty,
+		isText,
+		...restProps
+	} = props;
+
+	const {
+		activeItem,
+		setActiveMenu,
+		navigationTree: { isMenuEmpty },
+	} = useNavigationContext();
+
+	// If hideIfTargetMenuEmpty prop is true
+	// And the menu we are supposed to navigate to
+	// Is marked as empty, then we skip rendering the item.
+	if (
+		hideIfTargetMenuEmpty &&
+		navigateToMenu &&
+		isMenuEmpty( navigateToMenu )
+	) {
+		return null;
+	}
+
+	const isActive = item && activeItem === item;
+
+	const classes = clsx( className, {
+		'is-active': isActive,
+	} );
+
+	const onItemClick: React.MouseEventHandler<
+		HTMLButtonElement | HTMLAnchorElement
+	> = ( event ) => {
+		if ( navigateToMenu ) {
+			setActiveMenu( navigateToMenu );
+		}
+
+		onClick( event );
+	};
+	const navigationIcon = isRTL() ? chevronLeft : chevronRight;
+	const baseProps = children ? props : { ...props, onClick: undefined };
+	const itemProps = isText
+		? restProps
+		: {
+				as: Button,
+				href,
+				onClick: onItemClick,
+				'aria-current': isActive ? 'page' : undefined,
+				...restProps,
+		  };
+
+	return (
+		<NavigationItemBase { ...baseProps } className={ classes }>
+			{ children || (
+				<ItemUI { ...itemProps }>
+					{ icon && (
+						<ItemIconUI>
+							<Icon icon={ icon } />
+						</ItemIconUI>
+					) }
+
+					<NavigationItemBaseContent
+						title={ title }
+						badge={ badge }
+					/>
+
+					{ navigateToMenu && <Icon icon={ navigationIcon } /> }
+				</ItemUI>
+			) }
+		</NavigationItemBase>
+	);
+}
+
+export default NavigationItem;
diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.js b/packages/components/src/navigation/item/use-navigation-tree-item.js
deleted file mode 100644
index 28db2e526e1b4a..00000000000000
--- a/packages/components/src/navigation/item/use-navigation-tree-item.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { useNavigationGroupContext } from '../group/context';
-import { useNavigationMenuContext } from '../menu/context';
-import { normalizedSearch } from '../utils';
-
-export const useNavigationTreeItem = ( itemId, props ) => {
-	const {
-		activeMenu,
-		navigationTree: { addItem, removeItem },
-	} = useNavigationContext();
-	const { group } = useNavigationGroupContext();
-	const { menu, search } = useNavigationMenuContext();
-
-	useEffect( () => {
-		const isMenuActive = activeMenu === menu;
-		const isItemVisible =
-			! search || normalizedSearch( props.title, search );
-
-		addItem( itemId, {
-			...props,
-			group,
-			menu,
-			_isVisible: isMenuActive && isItemVisible,
-		} );
-
-		return () => {
-			removeItem( itemId );
-		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeMenu, search ] );
-};
diff --git a/packages/components/src/navigation/item/use-navigation-tree-item.tsx b/packages/components/src/navigation/item/use-navigation-tree-item.tsx
new file mode 100644
index 00000000000000..335e55f2401bf4
--- /dev/null
+++ b/packages/components/src/navigation/item/use-navigation-tree-item.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { useNavigationGroupContext } from '../group/context';
+import { useNavigationMenuContext } from '../menu/context';
+import { normalizedSearch } from '../utils';
+
+import type { NavigationItemProps } from '../types';
+
+export const useNavigationTreeItem = (
+	itemId: string,
+	props: NavigationItemProps
+) => {
+	const {
+		activeMenu,
+		navigationTree: { addItem, removeItem },
+	} = useNavigationContext();
+	const { group } = useNavigationGroupContext();
+	const { menu, search } = useNavigationMenuContext();
+
+	useEffect( () => {
+		const isMenuActive = activeMenu === menu;
+		const isItemVisible =
+			! search ||
+			( props.title !== undefined &&
+				normalizedSearch( props.title, search ) );
+
+		addItem( itemId, {
+			...props,
+			group,
+			menu,
+			_isVisible: isMenuActive && isItemVisible,
+		} );
+
+		return () => {
+			removeItem( itemId );
+		};
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/41639
+	}, [ activeMenu, search ] );
+};
diff --git a/packages/components/src/navigation/menu/context.js b/packages/components/src/navigation/menu/context.js
deleted file mode 100644
index 29b4814757c7cd..00000000000000
--- a/packages/components/src/navigation/menu/context.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-export const NavigationMenuContext = createContext( {
-	menu: undefined,
-	search: '',
-} );
-export const useNavigationMenuContext = () =>
-	useContext( NavigationMenuContext );
diff --git a/packages/components/src/navigation/menu/context.tsx b/packages/components/src/navigation/menu/context.tsx
new file mode 100644
index 00000000000000..53b71e4ccc368f
--- /dev/null
+++ b/packages/components/src/navigation/menu/context.tsx
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NavigationMenuContext as NavigationMenuContextType } from '../types';
+
+export const NavigationMenuContext = createContext< NavigationMenuContextType >(
+	{
+		menu: undefined,
+		search: '',
+	}
+);
+export const useNavigationMenuContext = () =>
+	useContext( NavigationMenuContext );
diff --git a/packages/components/src/navigation/menu/index.js b/packages/components/src/navigation/menu/index.js
deleted file mode 100644
index 2e3aa30db0de8e..00000000000000
--- a/packages/components/src/navigation/menu/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ROOT_MENU } from '../constants';
-import { NavigationMenuContext } from './context';
-import { useNavigationContext } from '../context';
-import { useNavigationTreeMenu } from './use-navigation-tree-menu';
-import NavigationBackButton from '../back-button';
-import NavigationMenuTitle from './menu-title';
-import NavigationSearchNoResultsFound from './search-no-results-found';
-import { NavigableMenu } from '../../navigable-container';
-import { MenuUI } from '../styles/navigation-styles';
-
-export default function NavigationMenu( props ) {
-	const {
-		backButtonLabel,
-		children,
-		className,
-		hasSearch,
-		menu = ROOT_MENU,
-		onBackButtonClick,
-		onSearch: setControlledSearch,
-		parentMenu,
-		search: controlledSearch,
-		isSearchDebouncing,
-		title,
-		titleAction,
-	} = props;
-	const [ uncontrolledSearch, setUncontrolledSearch ] = useState( '' );
-	useNavigationTreeMenu( props );
-	const { activeMenu } = useNavigationContext();
-
-	const context = {
-		menu,
-		search: uncontrolledSearch,
-	};
-
-	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if ( activeMenu !== menu ) {
-		return (
-			<NavigationMenuContext.Provider value={ context }>
-				{ children }
-			</NavigationMenuContext.Provider>
-		);
-	}
-
-	const isControlledSearch = !! setControlledSearch;
-	const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
-	const onSearch = isControlledSearch
-		? setControlledSearch
-		: setUncontrolledSearch;
-
-	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	const classes = classnames( 'components-navigation__menu', className );
-
-	return (
-		<NavigationMenuContext.Provider value={ context }>
-			<MenuUI className={ classes }>
-				{ ( parentMenu || onBackButtonClick ) && (
-					<NavigationBackButton
-						backButtonLabel={ backButtonLabel }
-						parentMenu={ parentMenu }
-						onClick={ onBackButtonClick }
-					/>
-				) }
-
-				{ title && (
-					<NavigationMenuTitle
-						hasSearch={ hasSearch }
-						onSearch={ onSearch }
-						search={ search }
-						title={ title }
-						titleAction={ titleAction }
-					/>
-				) }
-
-				<NavigableMenu>
-					<ul aria-labelledby={ menuTitleId }>
-						{ children }
-						{ search && ! isSearchDebouncing && (
-							<NavigationSearchNoResultsFound search={ search } />
-						) }
-					</ul>
-				</NavigableMenu>
-			</MenuUI>
-		</NavigationMenuContext.Provider>
-	);
-}
diff --git a/packages/components/src/navigation/menu/index.tsx b/packages/components/src/navigation/menu/index.tsx
new file mode 100644
index 00000000000000..2a2cb20da0e9c9
--- /dev/null
+++ b/packages/components/src/navigation/menu/index.tsx
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ROOT_MENU } from '../constants';
+import { NavigationMenuContext } from './context';
+import { useNavigationContext } from '../context';
+import { useNavigationTreeMenu } from './use-navigation-tree-menu';
+import NavigationBackButton from '../back-button';
+import NavigationMenuTitle from './menu-title';
+import NavigationSearchNoResultsFound from './search-no-results-found';
+import { NavigableMenu } from '../../navigable-container';
+import { MenuUI } from '../styles/navigation-styles';
+
+import type { NavigationMenuProps } from '../types';
+
+/**
+ * @deprecated Use `Navigator` instead.
+ */
+export function NavigationMenu( props: NavigationMenuProps ) {
+	const {
+		backButtonLabel,
+		children,
+		className,
+		hasSearch,
+		menu = ROOT_MENU,
+		onBackButtonClick,
+		onSearch: setControlledSearch,
+		parentMenu,
+		search: controlledSearch,
+		isSearchDebouncing,
+		title,
+		titleAction,
+	} = props;
+	const [ uncontrolledSearch, setUncontrolledSearch ] = useState( '' );
+	useNavigationTreeMenu( props );
+	const { activeMenu } = useNavigationContext();
+
+	const context = {
+		menu,
+		search: uncontrolledSearch,
+	};
+
+	// Keep the children rendered to make sure invisible items are included in the navigation tree.
+	if ( activeMenu !== menu ) {
+		return (
+			<NavigationMenuContext.Provider value={ context }>
+				{ children }
+			</NavigationMenuContext.Provider>
+		);
+	}
+
+	const isControlledSearch = !! setControlledSearch;
+	const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
+	const onSearch = isControlledSearch
+		? setControlledSearch
+		: setUncontrolledSearch;
+
+	const menuTitleId = `components-navigation__menu-title-${ menu }`;
+	const classes = clsx( 'components-navigation__menu', className );
+
+	return (
+		<NavigationMenuContext.Provider value={ context }>
+			<MenuUI className={ classes }>
+				{ ( parentMenu || onBackButtonClick ) && (
+					<NavigationBackButton
+						backButtonLabel={ backButtonLabel }
+						parentMenu={ parentMenu }
+						onClick={ onBackButtonClick }
+					/>
+				) }
+
+				{ title && (
+					<NavigationMenuTitle
+						hasSearch={ hasSearch }
+						onSearch={ onSearch }
+						search={ search }
+						title={ title }
+						titleAction={ titleAction }
+					/>
+				) }
+
+				<NavigableMenu>
+					<ul aria-labelledby={ menuTitleId }>
+						{ children }
+						{ search && ! isSearchDebouncing && (
+							<NavigationSearchNoResultsFound search={ search } />
+						) }
+					</ul>
+				</NavigableMenu>
+			</MenuUI>
+		</NavigationMenuContext.Provider>
+	);
+}
+
+export default NavigationMenu;
diff --git a/packages/components/src/navigation/menu/menu-title-search.js b/packages/components/src/navigation/menu/menu-title-search.js
deleted file mode 100644
index cba2ddf2ffe308..00000000000000
--- a/packages/components/src/navigation/menu/menu-title-search.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import withSpokenMessages from '../../higher-order/with-spoken-messages';
-import { useNavigationMenuContext } from './context';
-import { useNavigationContext } from '../context';
-import { MenuTitleSearchUI } from '../styles/navigation-styles';
-import { SEARCH_FOCUS_DELAY } from '../constants';
-
-function MenuTitleSearch( {
-	debouncedSpeak,
-	onCloseSearch,
-	onSearch,
-	search,
-	title,
-} ) {
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-	const { menu } = useNavigationMenuContext();
-	const inputRef = useRef();
-
-	// Wait for the slide-in animation to complete before autofocusing the input.
-	// This prevents scrolling to the input during the animation.
-	useEffect( () => {
-		const delayedFocus = setTimeout( () => {
-			inputRef.current.focus();
-		}, SEARCH_FOCUS_DELAY );
-
-		return () => {
-			clearTimeout( delayedFocus );
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( ! search ) {
-			return;
-		}
-
-		const count = Object.values( items ).filter(
-			( item ) => item._isVisible
-		).length;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage );
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ items, search ] );
-
-	const onClose = () => {
-		onSearch( '' );
-		onCloseSearch();
-	};
-
-	function onKeyDown( event ) {
-		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
-			event.preventDefault();
-			onClose();
-		}
-	}
-
-	const inputId = `components-navigation__menu-title-search-${ menu }`;
-	const placeholder = sprintf(
-		/* translators: placeholder for menu search box. %s: menu title */
-		__( 'Search %s' ),
-		title?.toLowerCase()
-	).trim();
-
-	return (
-		<div className="components-navigation__menu-title-search">
-			<MenuTitleSearchUI
-				autoComplete="off"
-				className="components-navigation__menu-search-input"
-				id={ inputId }
-				onChange={ ( value ) => onSearch( value ) }
-				onKeyDown={ onKeyDown }
-				placeholder={ placeholder }
-				onClose={ onClose }
-				ref={ inputRef }
-				type="search"
-				value={ search }
-			/>
-		</div>
-	);
-}
-
-export default withSpokenMessages( MenuTitleSearch );
diff --git a/packages/components/src/navigation/menu/menu-title-search.tsx b/packages/components/src/navigation/menu/menu-title-search.tsx
new file mode 100644
index 00000000000000..f0014fa4768046
--- /dev/null
+++ b/packages/components/src/navigation/menu/menu-title-search.tsx
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import withSpokenMessages from '../../higher-order/with-spoken-messages';
+import { useNavigationMenuContext } from './context';
+import { useNavigationContext } from '../context';
+import { SEARCH_FOCUS_DELAY } from '../constants';
+
+import type { NavigationMenuTitleSearchProps } from '../types';
+import SearchControl from '../../search-control';
+import { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';
+
+function MenuTitleSearch( {
+	debouncedSpeak,
+	onCloseSearch,
+	onSearch,
+	search,
+	title,
+}: NavigationMenuTitleSearchProps ) {
+	const {
+		navigationTree: { items },
+	} = useNavigationContext();
+	const { menu } = useNavigationMenuContext();
+	const inputRef = useRef< HTMLInputElement >( null );
+
+	// Wait for the slide-in animation to complete before autofocusing the input.
+	// This prevents scrolling to the input during the animation.
+	useEffect( () => {
+		const delayedFocus = setTimeout( () => {
+			inputRef.current?.focus();
+		}, SEARCH_FOCUS_DELAY );
+
+		return () => {
+			clearTimeout( delayedFocus );
+		};
+	}, [] );
+
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+
+		const count = Object.values( items ).filter(
+			( item ) => item._isVisible
+		).length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+		// Not adding deps for now, as it would require either a larger refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44090
+	}, [ items, search ] );
+
+	const onClose = () => {
+		onSearch?.( '' );
+		onCloseSearch();
+	};
+
+	const onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (
+		event
+	) => {
+		if ( event.code === 'Escape' && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onClose();
+		}
+	};
+
+	const inputId = `components-navigation__menu-title-search-${ menu }`;
+	const placeholder = sprintf(
+		/* translators: placeholder for menu search box. %s: menu title */
+		__( 'Search %s' ),
+		title?.toLowerCase()
+	).trim();
+
+	return (
+		<MenuTitleSearchControlWrapper>
+			<SearchControl
+				__nextHasNoMarginBottom
+				className="components-navigation__menu-search-input"
+				id={ inputId }
+				onChange={ ( value ) => onSearch?.( value ) }
+				onKeyDown={ onKeyDown }
+				placeholder={ placeholder }
+				onClose={ onClose }
+				ref={ inputRef }
+				value={ search }
+			/>
+		</MenuTitleSearchControlWrapper>
+	);
+}
+
+export default withSpokenMessages( MenuTitleSearch );
diff --git a/packages/components/src/navigation/menu/menu-title.js b/packages/components/src/navigation/menu/menu-title.js
deleted file mode 100644
index 7dcc0a02084902..00000000000000
--- a/packages/components/src/navigation/menu/menu-title.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, search as searchIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getAnimateClassName } from '../../animate';
-import Button from '../../button';
-import MenuTitleSearch from './menu-title-search';
-import {
-	GroupTitleUI,
-	MenuTitleActionsUI,
-	MenuTitleUI,
-} from '../styles/navigation-styles';
-import { useNavigationMenuContext } from './context';
-import { SEARCH_FOCUS_DELAY } from '../constants';
-
-export default function NavigationMenuTitle( {
-	hasSearch,
-	onSearch,
-	search,
-	title,
-	titleAction,
-} ) {
-	const [ isSearching, setIsSearching ] = useState( false );
-	const { menu } = useNavigationMenuContext();
-	const searchButtonRef = useRef();
-
-	if ( ! title ) {
-		return null;
-	}
-
-	const onCloseSearch = () => {
-		setIsSearching( false );
-
-		// Wait for the slide-in animation to complete before focusing the search button.
-		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
-		setTimeout( () => {
-			searchButtonRef.current.focus();
-		}, SEARCH_FOCUS_DELAY );
-	};
-
-	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	/* translators: search button label for menu search box. %s: menu title */
-	const searchButtonLabel = sprintf( __( 'Search in %s' ), title );
-
-	return (
-		<MenuTitleUI className="components-navigation__menu-title">
-			{ ! isSearching && (
-				<GroupTitleUI
-					as="h2"
-					className="components-navigation__menu-title-heading"
-					level={ 3 }
-				>
-					<span id={ menuTitleId }>{ title }</span>
-
-					{ ( hasSearch || titleAction ) && (
-						<MenuTitleActionsUI>
-							{ titleAction }
-
-							{ hasSearch && (
-								<Button
-									isSmall
-									variant="tertiary"
-									label={ searchButtonLabel }
-									onClick={ () => setIsSearching( true ) }
-									ref={ searchButtonRef }
-								>
-									<Icon icon={ searchIcon } />
-								</Button>
-							) }
-						</MenuTitleActionsUI>
-					) }
-				</GroupTitleUI>
-			) }
-
-			{ isSearching && (
-				<div
-					className={ getAnimateClassName( {
-						type: 'slide-in',
-						origin: 'left',
-					} ) }
-				>
-					<MenuTitleSearch
-						onCloseSearch={ onCloseSearch }
-						onSearch={ onSearch }
-						search={ search }
-						title={ title }
-					/>
-				</div>
-			) }
-		</MenuTitleUI>
-	);
-}
diff --git a/packages/components/src/navigation/menu/menu-title.tsx b/packages/components/src/navigation/menu/menu-title.tsx
new file mode 100644
index 00000000000000..43ae0bd45cfb2b
--- /dev/null
+++ b/packages/components/src/navigation/menu/menu-title.tsx
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Icon, search as searchIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { getAnimateClassName } from '../../animate';
+import Button from '../../button';
+import MenuTitleSearch from './menu-title-search';
+import {
+	GroupTitleUI,
+	MenuTitleActionsUI,
+	MenuTitleUI,
+} from '../styles/navigation-styles';
+import { useNavigationMenuContext } from './context';
+import { SEARCH_FOCUS_DELAY } from '../constants';
+
+import type { NavigationMenuTitleProps } from '../types';
+
+export default function NavigationMenuTitle( {
+	hasSearch,
+	onSearch,
+	search,
+	title,
+	titleAction,
+}: NavigationMenuTitleProps ) {
+	const [ isSearching, setIsSearching ] = useState( false );
+	const { menu } = useNavigationMenuContext();
+	const searchButtonRef = useRef< HTMLElement >( null );
+
+	if ( ! title ) {
+		return null;
+	}
+
+	const onCloseSearch = () => {
+		setIsSearching( false );
+
+		// Wait for the slide-in animation to complete before focusing the search button.
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			searchButtonRef.current?.focus();
+		}, SEARCH_FOCUS_DELAY );
+	};
+
+	const menuTitleId = `components-navigation__menu-title-${ menu }`;
+	/* translators: search button label for menu search box. %s: menu title */
+	const searchButtonLabel = sprintf( __( 'Search in %s' ), title );
+
+	return (
+		<MenuTitleUI className="components-navigation__menu-title">
+			{ ! isSearching && (
+				<GroupTitleUI
+					as="h2"
+					className="components-navigation__menu-title-heading"
+					level={ 3 }
+				>
+					<span id={ menuTitleId }>{ title }</span>
+
+					{ ( hasSearch || titleAction ) && (
+						<MenuTitleActionsUI>
+							{ titleAction }
+
+							{ hasSearch && (
+								<Button
+									size="small"
+									variant="tertiary"
+									label={ searchButtonLabel }
+									onClick={ () => setIsSearching( true ) }
+									ref={ searchButtonRef }
+								>
+									<Icon icon={ searchIcon } />
+								</Button>
+							) }
+						</MenuTitleActionsUI>
+					) }
+				</GroupTitleUI>
+			) }
+
+			{ isSearching && (
+				<div
+					className={ getAnimateClassName( {
+						type: 'slide-in',
+						origin: 'left',
+					} ) }
+				>
+					<MenuTitleSearch
+						onCloseSearch={ onCloseSearch }
+						onSearch={ onSearch }
+						search={ search }
+						title={ title }
+					/>
+				</div>
+			) }
+		</MenuTitleUI>
+	);
+}
diff --git a/packages/components/src/navigation/menu/search-no-results-found.js b/packages/components/src/navigation/menu/search-no-results-found.js
deleted file mode 100644
index 1297ff1656db9b..00000000000000
--- a/packages/components/src/navigation/menu/search-no-results-found.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
-
-export default function NavigationSearchNoResultsFound( { search } ) {
-	const {
-		navigationTree: { items },
-	} = useNavigationContext();
-
-	const resultsCount = Object.values( items ).filter(
-		( item ) => item._isVisible
-	).length;
-
-	if ( ! search || !! resultsCount ) {
-		return null;
-	}
-
-	return (
-		<ItemBaseUI>
-			<ItemUI>{ __( 'No results found.' ) } </ItemUI>
-		</ItemBaseUI>
-	);
-}
diff --git a/packages/components/src/navigation/menu/search-no-results-found.tsx b/packages/components/src/navigation/menu/search-no-results-found.tsx
new file mode 100644
index 00000000000000..c239f74ce8173a
--- /dev/null
+++ b/packages/components/src/navigation/menu/search-no-results-found.tsx
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { ItemBaseUI, ItemUI } from '../styles/navigation-styles';
+
+import type { NavigationSearchNoResultsFoundProps } from '../types';
+
+export default function NavigationSearchNoResultsFound( {
+	search,
+}: NavigationSearchNoResultsFoundProps ) {
+	const {
+		navigationTree: { items },
+	} = useNavigationContext();
+
+	const resultsCount = Object.values( items ).filter(
+		( item ) => item._isVisible
+	).length;
+
+	if ( ! search || !! resultsCount ) {
+		return null;
+	}
+
+	return (
+		<ItemBaseUI>
+			<ItemUI>{ __( 'No results found.' ) } </ItemUI>
+		</ItemBaseUI>
+	);
+}
diff --git a/packages/components/src/navigation/menu/use-navigation-tree-menu.js b/packages/components/src/navigation/menu/use-navigation-tree-menu.js
deleted file mode 100644
index f50f25370f9380..00000000000000
--- a/packages/components/src/navigation/menu/use-navigation-tree-menu.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationContext } from '../context';
-import { ROOT_MENU } from '../constants';
-
-export const useNavigationTreeMenu = ( props ) => {
-	const {
-		navigationTree: { addMenu, removeMenu },
-	} = useNavigationContext();
-
-	const key = props.menu || ROOT_MENU;
-	useEffect( () => {
-		addMenu( key, { ...props, menu: key } );
-
-		return () => {
-			removeMenu( key );
-		};
-		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-};
diff --git a/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx b/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx
new file mode 100644
index 00000000000000..8631812445cd7d
--- /dev/null
+++ b/packages/components/src/navigation/menu/use-navigation-tree-menu.tsx
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationContext } from '../context';
+import { ROOT_MENU } from '../constants';
+
+import type { NavigationMenuProps } from '../types';
+
+export const useNavigationTreeMenu = ( props: NavigationMenuProps ) => {
+	const {
+		navigationTree: { addMenu, removeMenu },
+	} = useNavigationContext();
+
+	const key = props.menu || ROOT_MENU;
+	useEffect( () => {
+		addMenu( key, { ...props, menu: key } );
+
+		return () => {
+			removeMenu( key );
+		};
+		// Not adding deps for now, as it would require either a larger refactor
+		// See https://github.com/WordPress/gutenberg/pull/44090
+	}, [] );
+};
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
deleted file mode 100644
index 8fbdde44fe7dff..00000000000000
--- a/packages/components/src/navigation/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Internal dependencies
- */
-import Navigation from '..';
-import NavigationBackButton from '../back-button';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import { DefaultStory } from './utils/default';
-import { GroupStory } from './utils/group';
-import { ControlledStateStory } from './utils/controlled-state';
-import { SearchStory } from './utils/search';
-import { MoreExamplesStory } from './utils/more-examples';
-import { HideIfEmptyStory } from './utils/hide-if-empty';
-import './style.css';
-
-export default {
-	title: 'Components (Experimental)/Navigation',
-	component: Navigation,
-	subcomponents: {
-		NavigationBackButton,
-		NavigationGroup,
-		NavigationItem,
-		NavigationMenu,
-	},
-};
-
-export const _default = () => <DefaultStory />;
-export const controlledState = () => <ControlledStateStory />;
-export const groups = () => <GroupStory />;
-export const search = () => <SearchStory />;
-export const moreExamples = () => <MoreExamplesStory />;
-export const hideIfEmpty = () => <HideIfEmptyStory />;
diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx
new file mode 100644
index 00000000000000..8510b6f20b5370
--- /dev/null
+++ b/packages/components/src/navigation/stories/index.story.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '..';
+import { NavigationBackButton } from '../back-button';
+import { NavigationGroup } from '../group';
+import { NavigationItem } from '../item';
+import { NavigationMenu } from '../menu';
+import { DefaultStory } from './utils/default';
+import { GroupStory } from './utils/group';
+import { ControlledStateStory } from './utils/controlled-state';
+import { SearchStory } from './utils/search';
+import { MoreExamplesStory } from './utils/more-examples';
+import { HideIfEmptyStory } from './utils/hide-if-empty';
+import './style.css';
+
+/**
+ * Render a navigation list with optional groupings and hierarchy.
+ *
+ * This component is deprecated. Consider using `Navigator` instead.
+ */
+const meta: Meta< typeof Navigation > = {
+	title: 'Components (Deprecated)/Navigation',
+	id: 'components-navigation',
+	component: Navigation,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationBackButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationMenu,
+	},
+	argTypes: {
+		activeItem: { control: false },
+		activeMenu: { control: false },
+		children: { control: false },
+		onActivateMenu: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+export const _default = DefaultStory.bind( {} );
+export const ControlledState = ControlledStateStory.bind( {} );
+export const Groups = GroupStory.bind( {} );
+export const Search = SearchStory.bind( {} );
+export const MoreExamples = MoreExamplesStory.bind( {} );
+export const HideIfEmpty = HideIfEmptyStory.bind( {} );
diff --git a/packages/components/src/navigation/stories/utils/controlled-state.js b/packages/components/src/navigation/stories/utils/controlled-state.js
deleted file mode 100644
index ed7d652d0df778..00000000000000
--- a/packages/components/src/navigation/stories/utils/controlled-state.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-
-export function ControlledStateStory() {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ activeMenu, setActiveMenu ] = useState( 'root' );
-
-	// Mock navigation link.
-	const MockLink = ( { href, children } ) => (
-		<Button
-			href={ href }
-			// Since we're not actually navigating pages, simulate it with onClick.
-			onClick={ ( event ) => {
-				event.preventDefault();
-				const item = href.replace( 'https://example.com/', '' );
-				setActiveItem( item );
-			} }
-		>
-			{ children }
-		</Button>
-	);
-
-	return (
-		<>
-			<Navigation
-				activeItem={ activeItem }
-				activeMenu={ activeMenu }
-				className="navigation-story"
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu title="Home">
-					<NavigationItem item="item-1" title="Item 1">
-						<MockLink href="https://example.com/item-1">
-							Item 1
-						</MockLink>
-					</NavigationItem>
-					<NavigationItem item="item-2">
-						<MockLink href="https://example.com/item-2">
-							Item 2
-						</MockLink>
-					</NavigationItem>
-					<NavigationItem
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="sub-menu"
-					parentMenu="root"
-					title="Sub-Menu"
-				>
-					<NavigationItem
-						item="child-1"
-						onClick={ () => setActiveItem( 'child-1' ) }
-						title="Child 1"
-					/>
-					<NavigationItem
-						item="child-2"
-						onClick={ () => setActiveItem( 'child-2' ) }
-						title="Child 2"
-					/>
-					<NavigationItem
-						item="child-nested-sub-menu"
-						navigateToMenu="nested-sub-menu"
-						title="Nested Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="nested-sub-menu"
-					parentMenu="sub-menu"
-					title="Nested Sub-Menu"
-				>
-					<NavigationItem
-						item="sub-child-1"
-						onClick={ () => setActiveItem( 'sub-child-1' ) }
-						title="Sub-Child 1"
-					/>
-					<NavigationItem
-						item="sub-child-2"
-						onClick={ () => setActiveItem( 'sub-child-2' ) }
-						title="Sub-Child 2"
-					/>
-				</NavigationMenu>
-			</Navigation>
-
-			<div className="navigation-story__aside">
-				<p>
-					Menu <code>{ activeMenu }</code> is active.
-					<br />
-					Item <code>{ activeItem }</code> is active.
-				</p>
-				<p>
-					<Button
-						variant="secondary"
-						onClick={ () => {
-							setActiveMenu( 'nested-sub-menu' );
-						} }
-					>
-						Open the Nested Sub-Menu menu
-					</Button>
-				</p>
-				<p>
-					<Button
-						variant="secondary"
-						onClick={ () => {
-							setActiveItem( 'child-2' );
-							setActiveMenu( 'sub-menu' );
-						} }
-					>
-						Navigate to Child 2 item
-					</Button>
-				</p>
-			</div>
-		</>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/controlled-state.tsx b/packages/components/src/navigation/stories/utils/controlled-state.tsx
new file mode 100644
index 00000000000000..b5d842b67e78c4
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/controlled-state.tsx
@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../../button';
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+
+export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	// Mock navigation link.
+	const MockLink = ( {
+		href,
+		children,
+	}: {
+		href: string;
+		children: React.ReactNode;
+	} ) => (
+		<Button
+			href={ href }
+			// Since we're not actually navigating pages, simulate it with onClick.
+			onClick={
+				( ( event ) => {
+					event.preventDefault();
+					const item = href.replace( 'https://example.com/', '' );
+					setActiveItem( item );
+				} ) as React.MouseEventHandler< HTMLAnchorElement >
+			}
+		>
+			{ children }
+		</Button>
+	);
+
+	return (
+		<>
+			<Navigation
+				{ ...props }
+				activeItem={ activeItem }
+				activeMenu={ activeMenu }
+				className={ [ 'navigation-story', className ]
+					.filter( Boolean )
+					.join( ' ' ) }
+				onActivateMenu={ setActiveMenu }
+			>
+				<NavigationMenu title="Home">
+					<NavigationItem item="item-1" title="Item 1">
+						<MockLink href="https://example.com/item-1">
+							Item 1
+						</MockLink>
+					</NavigationItem>
+					<NavigationItem item="item-2">
+						<MockLink href="https://example.com/item-2">
+							Item 2
+						</MockLink>
+					</NavigationItem>
+					<NavigationItem
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="sub-menu"
+					parentMenu="root"
+					title="Sub-Menu"
+				>
+					<NavigationItem
+						item="child-1"
+						onClick={ () => setActiveItem( 'child-1' ) }
+						title="Child 1"
+					/>
+					<NavigationItem
+						item="child-2"
+						onClick={ () => setActiveItem( 'child-2' ) }
+						title="Child 2"
+					/>
+					<NavigationItem
+						item="child-nested-sub-menu"
+						navigateToMenu="nested-sub-menu"
+						title="Nested Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="nested-sub-menu"
+					parentMenu="sub-menu"
+					title="Nested Sub-Menu"
+				>
+					<NavigationItem
+						item="sub-child-1"
+						onClick={ () => setActiveItem( 'sub-child-1' ) }
+						title="Sub-Child 1"
+					/>
+					<NavigationItem
+						item="sub-child-2"
+						onClick={ () => setActiveItem( 'sub-child-2' ) }
+						title="Sub-Child 2"
+					/>
+				</NavigationMenu>
+			</Navigation>
+
+			<div className="navigation-story__aside">
+				<p>
+					Menu <code>{ activeMenu }</code> is active.
+					<br />
+					Item <code>{ activeItem }</code> is active.
+				</p>
+				<p>
+					<Button
+						variant="secondary"
+						onClick={ () => {
+							setActiveMenu( 'nested-sub-menu' );
+						} }
+					>
+						Open the Nested Sub-Menu menu
+					</Button>
+				</p>
+				<p>
+					<Button
+						variant="secondary"
+						onClick={ () => {
+							setActiveItem( 'child-2' );
+							setActiveMenu( 'sub-menu' );
+						} }
+					>
+						Navigate to Child 2 item
+					</Button>
+				</p>
+			</div>
+		</>
+	);
+};
diff --git a/packages/components/src/navigation/stories/utils/default.js b/packages/components/src/navigation/stories/utils/default.js
deleted file mode 100644
index 569cb8aa17b4bc..00000000000000
--- a/packages/components/src/navigation/stories/utils/default.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-
-export function DefaultStory() {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-
-	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
-			<NavigationMenu title="Home">
-				<NavigationItem
-					item="item-1"
-					onClick={ () => setActiveItem( 'item-1' ) }
-					title="Item 1"
-				/>
-				<NavigationItem
-					item="item-2"
-					onClick={ () => setActiveItem( 'item-2' ) }
-					title="Item 2"
-				/>
-				<NavigationItem>
-					<a
-						className="components-button"
-						href="http://www.example.com"
-					>
-						External Link
-					</a>
-				</NavigationItem>
-				<NavigationItem
-					item="item-sub-menu"
-					navigateToMenu="sub-menu"
-					title="Sub-Menu"
-				/>
-			</NavigationMenu>
-			<NavigationMenu menu="sub-menu" parentMenu="root" title="Sub-Menu">
-				<NavigationItem
-					item="child-1"
-					onClick={ () => setActiveItem( 'child-1' ) }
-					title="Child 1"
-				/>
-				<NavigationItem
-					item="child-2"
-					onClick={ () => setActiveItem( 'child-2' ) }
-					title="Child 2"
-				/>
-				<NavigationItem
-					item="child-nested-sub-menu"
-					navigateToMenu="nested-sub-menu"
-					title="Nested Sub-Menu"
-				/>
-			</NavigationMenu>
-			<NavigationMenu
-				menu="nested-sub-menu"
-				parentMenu="sub-menu"
-				title="Nested Sub-Menu"
-			>
-				<NavigationItem
-					item="sub-child-1"
-					onClick={ () => setActiveItem( 'sub-child-1' ) }
-					title="Sub-Child 1"
-				/>
-				<NavigationItem
-					item="sub-child-2"
-					onClick={ () => setActiveItem( 'sub-child-2' ) }
-					title="Sub-Child 2"
-				/>
-			</NavigationMenu>
-		</Navigation>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/default.tsx b/packages/components/src/navigation/stories/utils/default.tsx
new file mode 100644
index 00000000000000..d2948494adfb62
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/default.tsx
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+
+export const DefaultStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+
+	return (
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
+			<NavigationMenu title="Home">
+				<NavigationItem
+					item="item-1"
+					onClick={ () => setActiveItem( 'item-1' ) }
+					title="Item 1"
+				/>
+				<NavigationItem
+					item="item-2"
+					onClick={ () => setActiveItem( 'item-2' ) }
+					title="Item 2"
+				/>
+				<NavigationItem>
+					<a
+						className="components-button"
+						href="http://www.example.com"
+					>
+						External Link
+					</a>
+				</NavigationItem>
+				<NavigationItem
+					item="item-sub-menu"
+					navigateToMenu="sub-menu"
+					title="Sub-Menu"
+				/>
+			</NavigationMenu>
+			<NavigationMenu menu="sub-menu" parentMenu="root" title="Sub-Menu">
+				<NavigationItem
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
+				<NavigationItem
+					item="child-nested-sub-menu"
+					navigateToMenu="nested-sub-menu"
+					title="Nested Sub-Menu"
+				/>
+			</NavigationMenu>
+			<NavigationMenu
+				menu="nested-sub-menu"
+				parentMenu="sub-menu"
+				title="Nested Sub-Menu"
+			>
+				<NavigationItem
+					item="sub-child-1"
+					onClick={ () => setActiveItem( 'sub-child-1' ) }
+					title="Sub-Child 1"
+				/>
+				<NavigationItem
+					item="sub-child-2"
+					onClick={ () => setActiveItem( 'sub-child-2' ) }
+					title="Sub-Child 2"
+				/>
+			</NavigationMenu>
+		</Navigation>
+	);
+};
diff --git a/packages/components/src/navigation/stories/utils/group.js b/packages/components/src/navigation/stories/utils/group.js
deleted file mode 100644
index 7e11071a63b9a4..00000000000000
--- a/packages/components/src/navigation/stories/utils/group.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-import NavigationGroup from '../../group';
-
-export function GroupStory() {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-
-	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
-			<NavigationMenu title="Home">
-				<NavigationGroup title="Group 1">
-					<NavigationItem
-						item="item-1"
-						onClick={ () => setActiveItem( 'item-1' ) }
-						title="Item 1"
-					/>
-					<NavigationItem
-						item="item-2"
-						onClick={ () => setActiveItem( 'item-2' ) }
-						title="Item 2"
-					/>
-				</NavigationGroup>
-				<NavigationGroup title="Group 2">
-					<NavigationItem
-						item="item-3"
-						onClick={ () => setActiveItem( 'item-3' ) }
-						title="Item 3"
-					/>
-					<NavigationItem
-						item="item-4"
-						onClick={ () => setActiveItem( 'item-4' ) }
-						title="Item 4"
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-		</Navigation>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/group.tsx b/packages/components/src/navigation/stories/utils/group.tsx
new file mode 100644
index 00000000000000..bdf4f7011a171a
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/group.tsx
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+import { NavigationGroup } from '../../group';
+
+export const GroupStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+
+	return (
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
+			<NavigationMenu title="Home">
+				<NavigationGroup title="Group 1">
+					<NavigationItem
+						item="item-1"
+						onClick={ () => setActiveItem( 'item-1' ) }
+						title="Item 1"
+					/>
+					<NavigationItem
+						item="item-2"
+						onClick={ () => setActiveItem( 'item-2' ) }
+						title="Item 2"
+					/>
+				</NavigationGroup>
+				<NavigationGroup title="Group 2">
+					<NavigationItem
+						item="item-3"
+						onClick={ () => setActiveItem( 'item-3' ) }
+						title="Item 3"
+					/>
+					<NavigationItem
+						item="item-4"
+						onClick={ () => setActiveItem( 'item-4' ) }
+						title="Item 4"
+					/>
+				</NavigationGroup>
+			</NavigationMenu>
+		</Navigation>
+	);
+};
diff --git a/packages/components/src/navigation/stories/utils/hide-if-empty.js b/packages/components/src/navigation/stories/utils/hide-if-empty.js
deleted file mode 100644
index ef9e889932a895..00000000000000
--- a/packages/components/src/navigation/stories/utils/hide-if-empty.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-
-export function HideIfEmptyStory() {
-	return (
-		<>
-			<Navigation className="navigation-story">
-				<NavigationMenu title="Home" menu="root" isEmpty={ false }>
-					<NavigationItem
-						navigateToMenu="root-sub-1"
-						title="To sub 1 (hidden)"
-						hideIfTargetMenuEmpty
-					/>
-
-					<NavigationItem
-						navigateToMenu="root-sub-2"
-						title="To sub 2 (visible)"
-						hideIfTargetMenuEmpty
-					/>
-
-					<NavigationItem
-						navigateToMenu="root-sub-1-sub-1"
-						title="To sub 1-1 (hidden)"
-						hideIfTargetMenuEmpty
-					/>
-				</NavigationMenu>
-
-				<NavigationMenu
-					menu="root-sub-1"
-					parentMenu="root"
-					isEmpty={ true }
-				/>
-				<NavigationMenu
-					menu="root-sub-2"
-					parentMenu="root"
-					isEmpty={ false }
-				>
-					<NavigationItem title="This menu is visible" />
-				</NavigationMenu>
-				<NavigationMenu
-					menu="root-sub-1-sub-1"
-					parentMenu="root-sub-1"
-					isEmpty={ true }
-				/>
-			</Navigation>
-
-			<p>
-				This story contains 3 navigation items and 4 menus. You should
-				only see one item: <strong>To sub 2 (visible)</strong>
-			</p>
-		</>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/hide-if-empty.tsx b/packages/components/src/navigation/stories/utils/hide-if-empty.tsx
new file mode 100644
index 00000000000000..2d9dcb91660375
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/hide-if-empty.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '../..';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+
+export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	return (
+		<>
+			<Navigation
+				{ ...props }
+				className={ [ 'navigation-story', className ]
+					.filter( Boolean )
+					.join( ' ' ) }
+			>
+				<NavigationMenu title="Home" menu="root" isEmpty={ false }>
+					<NavigationItem
+						navigateToMenu="root-sub-1"
+						title="To sub 1 (hidden)"
+						hideIfTargetMenuEmpty
+					/>
+
+					<NavigationItem
+						navigateToMenu="root-sub-2"
+						title="To sub 2 (visible)"
+						hideIfTargetMenuEmpty
+					/>
+
+					<NavigationItem
+						navigateToMenu="root-sub-1-sub-1"
+						title="To sub 1-1 (hidden)"
+						hideIfTargetMenuEmpty
+					/>
+				</NavigationMenu>
+
+				<NavigationMenu menu="root-sub-1" parentMenu="root" isEmpty />
+				<NavigationMenu
+					menu="root-sub-2"
+					parentMenu="root"
+					isEmpty={ false }
+				>
+					<NavigationItem title="This menu is visible" />
+				</NavigationMenu>
+				<NavigationMenu
+					menu="root-sub-1-sub-1"
+					parentMenu="root-sub-1"
+					isEmpty
+				/>
+			</Navigation>
+
+			<p>
+				This story contains 3 navigation items and 4 menus. You should
+				only see one item: <strong>To sub 2 (visible)</strong>
+			</p>
+		</>
+	);
+};
diff --git a/packages/components/src/navigation/stories/utils/more-examples.js b/packages/components/src/navigation/stories/utils/more-examples.js
deleted file mode 100644
index 43bd33835db370..00000000000000
--- a/packages/components/src/navigation/stories/utils/more-examples.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import { Icon, wordpress, home } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationGroup from '../../group';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-
-export function MoreExamplesStory() {
-	const [ activeItem, setActiveItem ] = useState( 'child-1' );
-	const [ delayedBadge, setDelayedBadge ] = useState();
-	useEffect( () => {
-		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
-		return () => clearTimeout( timeout );
-	} );
-	const [ backButtonBadge, setBackButtonBadge ] = useState( 1 );
-	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] =
-		useState( 1 );
-
-	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
-			<NavigationMenu title="Home">
-				<NavigationGroup title="Items without Active State">
-					<NavigationItem item="item-1" title="Item 1" />
-					<NavigationItem item="item-2" title="Item 2" />
-				</NavigationGroup>
-				<NavigationGroup title="Items with Unusual Features">
-					<NavigationItem
-						icon={ home }
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu with Custom Back Label"
-					/>
-					<NavigationItem
-						item="item-custom-back-click-handler"
-						navigateToMenu="custom-back-click-handler-menu"
-						title="Custom Back Click Handler"
-						badge={ backButtonBadge }
-					/>
-					<NavigationItem
-						item="item-custom-back-click-handler-prevented"
-						navigateToMenu="custom-back-click-handler-prevented-menu"
-						title="Prevent back navigation"
-					/>
-					<NavigationItem
-						item="item-nonexistent-menu"
-						navigateToMenu="nonexistent-menu"
-						title="Navigate to Nonexistent Menu"
-					/>
-					<NavigationItem
-						badge={ delayedBadge }
-						item="item-delayed-badge"
-						onClick={ () => setActiveItem( 'item-delayed-badge' ) }
-						title="Item with a Delayed Badge"
-					/>
-				</NavigationGroup>
-				<NavigationGroup title="External Links">
-					<NavigationItem
-						href="https://wordpress.org/"
-						item="item-4"
-						target="_blank"
-						title="WordPress.org"
-					/>
-					<NavigationItem item="item-5">
-						<a
-							className="navigation-story__wordpress-icon"
-							href="https://wordpress.org/"
-							target="_blank"
-							rel="noreferrer"
-						>
-							<Icon icon={ wordpress } />
-							<em>Custom Content</em>
-						</a>
-					</NavigationItem>
-				</NavigationGroup>
-				<NavigationGroup title="Text only items">
-					<NavigationItem
-						item="item-text-only"
-						title="This is just text, doesn't have any functionality"
-						isText
-					/>
-					<NavigationItem
-						item="item-text-only-with-badge"
-						title="Text with badge"
-						badge="2"
-						isText
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-
-			<NavigationMenu
-				backButtonLabel="Custom Back Button Label"
-				menu="sub-menu"
-				parentMenu="root"
-				title="Sub-Menu with Custom Back Label"
-			>
-				<NavigationItem
-					item="child-1"
-					onClick={ () => setActiveItem( 'child-1' ) }
-					title="Child 1"
-				/>
-				<NavigationItem
-					item="child-2"
-					onClick={ () => setActiveItem( 'child-2' ) }
-					title="Child 2"
-				/>
-			</NavigationMenu>
-
-			<NavigationMenu
-				menu="custom-back-click-handler-menu"
-				title="Custom back button click handler"
-				parentMenu="root"
-				onBackButtonClick={ () =>
-					setBackButtonBadge( backButtonBadge + 1 )
-				}
-				backButtonLabel="Increment badge and go back"
-			/>
-
-			<NavigationMenu
-				menu="custom-back-click-handler-prevented-menu"
-				title="Custom back button click handler prevented"
-				parentMenu="root"
-				onBackButtonClick={ ( event ) => {
-					event.preventDefault();
-					setBackButtonPreventedBadge( backButtonPreventedBadge + 1 );
-				} }
-				backButtonLabel="Increment badge"
-			>
-				<NavigationItem
-					item="custom-back-click-prevented-child-1"
-					title="You can't go back from here"
-					badge={ backButtonPreventedBadge }
-				/>
-			</NavigationMenu>
-		</Navigation>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/more-examples.tsx b/packages/components/src/navigation/stories/utils/more-examples.tsx
new file mode 100644
index 00000000000000..e0ce566a5ab66c
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/more-examples.tsx
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { Icon, wordpress, home } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '../..';
+import { NavigationGroup } from '../../group';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+
+export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	const [ activeItem, setActiveItem ] = useState( 'child-1' );
+	const [ delayedBadge, setDelayedBadge ] = useState< number | undefined >();
+	useEffect( () => {
+		const timeout = setTimeout( () => setDelayedBadge( 2 ), 1500 );
+		return () => clearTimeout( timeout );
+	} );
+	const [ backButtonBadge, setBackButtonBadge ] = useState( 1 );
+	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] =
+		useState( 1 );
+
+	return (
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
+			<NavigationMenu title="Home">
+				<NavigationGroup title="Items without Active State">
+					<NavigationItem item="item-1" title="Item 1" />
+					<NavigationItem item="item-2" title="Item 2" />
+				</NavigationGroup>
+				<NavigationGroup title="Items with Unusual Features">
+					<NavigationItem
+						icon={ home }
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu with Custom Back Label"
+					/>
+					<NavigationItem
+						item="item-custom-back-click-handler"
+						navigateToMenu="custom-back-click-handler-menu"
+						title="Custom Back Click Handler"
+						badge={ backButtonBadge }
+					/>
+					<NavigationItem
+						item="item-custom-back-click-handler-prevented"
+						navigateToMenu="custom-back-click-handler-prevented-menu"
+						title="Prevent back navigation"
+					/>
+					<NavigationItem
+						item="item-nonexistent-menu"
+						navigateToMenu="nonexistent-menu"
+						title="Navigate to Nonexistent Menu"
+					/>
+					<NavigationItem
+						badge={ delayedBadge }
+						item="item-delayed-badge"
+						onClick={ () => setActiveItem( 'item-delayed-badge' ) }
+						title="Item with a Delayed Badge"
+					/>
+				</NavigationGroup>
+				<NavigationGroup title="External Links">
+					<NavigationItem
+						href="https://wordpress.org/"
+						item="item-4"
+						target="_blank"
+						title="WordPress.org"
+					/>
+					<NavigationItem item="item-5">
+						<a
+							className="navigation-story__wordpress-icon"
+							href="https://wordpress.org/"
+							target="_blank"
+							rel="noreferrer"
+						>
+							<Icon icon={ wordpress } />
+							<em>Custom Content</em>
+						</a>
+					</NavigationItem>
+				</NavigationGroup>
+				<NavigationGroup title="Text only items">
+					<NavigationItem
+						item="item-text-only"
+						title="This is just text, doesn't have any functionality"
+						isText
+					/>
+					<NavigationItem
+						item="item-text-only-with-badge"
+						title="Text with badge"
+						badge="2"
+						isText
+					/>
+				</NavigationGroup>
+			</NavigationMenu>
+
+			<NavigationMenu
+				backButtonLabel="Custom Back Button Label"
+				menu="sub-menu"
+				parentMenu="root"
+				title="Sub-Menu with Custom Back Label"
+			>
+				<NavigationItem
+					item="child-1"
+					onClick={ () => setActiveItem( 'child-1' ) }
+					title="Child 1"
+				/>
+				<NavigationItem
+					item="child-2"
+					onClick={ () => setActiveItem( 'child-2' ) }
+					title="Child 2"
+				/>
+			</NavigationMenu>
+
+			<NavigationMenu
+				menu="custom-back-click-handler-menu"
+				title="Custom back button click handler"
+				parentMenu="root"
+				onBackButtonClick={ () =>
+					setBackButtonBadge( backButtonBadge + 1 )
+				}
+				backButtonLabel="Increment badge and go back"
+			/>
+
+			<NavigationMenu
+				menu="custom-back-click-handler-prevented-menu"
+				title="Custom back button click handler prevented"
+				parentMenu="root"
+				onBackButtonClick={
+					( ( event ) => {
+						event.preventDefault();
+						setBackButtonPreventedBadge(
+							backButtonPreventedBadge + 1
+						);
+					} ) as React.MouseEventHandler
+				}
+				backButtonLabel="Increment badge"
+			>
+				<NavigationItem
+					item="custom-back-click-prevented-child-1"
+					title="You can't go back from here"
+					badge={ backButtonPreventedBadge }
+				/>
+			</NavigationMenu>
+		</Navigation>
+	);
+};
diff --git a/packages/components/src/navigation/stories/utils/search.js b/packages/components/src/navigation/stories/utils/search.js
deleted file mode 100644
index 6fb1a176970233..00000000000000
--- a/packages/components/src/navigation/stories/utils/search.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Navigation from '../..';
-import NavigationGroup from '../../group';
-import NavigationItem from '../../item';
-import NavigationMenu from '../../menu';
-import { normalizedSearch } from '../../utils';
-
-const searchItems = [
-	{ item: 'foo', title: 'Foo' },
-	{ item: 'bar', title: 'Bar' },
-	{ item: 'baz', title: 'Baz' },
-	{ item: 'qux', title: 'Qux' },
-	{ item: 'quux', title: 'Quux' },
-	{ item: 'corge', title: 'Corge' },
-	{ item: 'grault', title: 'Grault' },
-	{ item: 'garply', title: 'Garply' },
-	{ item: 'waldo', title: 'Waldo' },
-];
-
-export function SearchStory() {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ search, setSearch ] = useState( '' );
-
-	return (
-		<Navigation activeItem={ activeItem } className="navigation-story">
-			<NavigationMenu hasSearch title="Home">
-				<NavigationGroup title="Items">
-					{ searchItems.map( ( { item, title } ) => (
-						<NavigationItem
-							item={ `item-${ item }` }
-							key={ `item-${ item }` }
-							onClick={ () => setActiveItem( `item-${ item }` ) }
-							title={ title }
-						/>
-					) ) }
-				</NavigationGroup>
-
-				<NavigationGroup title="More Examples">
-					<NavigationItem
-						item="item-controlled-search"
-						navigateToMenu="controlled-search"
-						title="Controlled Search"
-					/>
-				</NavigationGroup>
-			</NavigationMenu>
-
-			<NavigationMenu
-				hasSearch
-				menu="controlled-search"
-				onSearch={ ( value ) => setSearch( value ) }
-				parentMenu="root"
-				search={ search }
-				title="Controlled Search"
-			>
-				{ searchItems
-					.filter( ( { title } ) =>
-						normalizedSearch( title, search )
-					)
-					.map( ( { item, title } ) => (
-						<NavigationItem
-							item={ `child-${ item }` }
-							key={ `child-${ item }` }
-							onClick={ () => setActiveItem( `child-${ item }` ) }
-							title={ title }
-						/>
-					) ) }
-			</NavigationMenu>
-		</Navigation>
-	);
-}
diff --git a/packages/components/src/navigation/stories/utils/search.tsx b/packages/components/src/navigation/stories/utils/search.tsx
new file mode 100644
index 00000000000000..44fb352bbdbf1a
--- /dev/null
+++ b/packages/components/src/navigation/stories/utils/search.tsx
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Navigation } from '../..';
+import { NavigationGroup } from '../../group';
+import { NavigationItem } from '../../item';
+import { NavigationMenu } from '../../menu';
+import { normalizedSearch } from '../../utils';
+
+const searchItems = [
+	{ item: 'foo', title: 'Foo' },
+	{ item: 'bar', title: 'Bar' },
+	{ item: 'baz', title: 'Baz' },
+	{ item: 'qux', title: 'Qux' },
+	{ item: 'quux', title: 'Quux' },
+	{ item: 'corge', title: 'Corge' },
+	{ item: 'grault', title: 'Grault' },
+	{ item: 'garply', title: 'Garply' },
+	{ item: 'waldo', title: 'Waldo' },
+];
+
+export const SearchStory: StoryFn< typeof Navigation > = ( {
+	className,
+	...props
+} ) => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ search, setSearch ] = useState( '' );
+
+	return (
+		<Navigation
+			{ ...props }
+			activeItem={ activeItem }
+			className={ [ 'navigation-story', className ]
+				.filter( Boolean )
+				.join( ' ' ) }
+		>
+			<NavigationMenu hasSearch title="Home">
+				<NavigationGroup title="Items">
+					{ searchItems.map( ( { item, title } ) => (
+						<NavigationItem
+							item={ `item-${ item }` }
+							key={ `item-${ item }` }
+							onClick={ () => setActiveItem( `item-${ item }` ) }
+							title={ title }
+						/>
+					) ) }
+				</NavigationGroup>
+
+				<NavigationGroup title="More Examples">
+					<NavigationItem
+						item="item-controlled-search"
+						navigateToMenu="controlled-search"
+						title="Controlled Search"
+					/>
+				</NavigationGroup>
+			</NavigationMenu>
+
+			<NavigationMenu
+				hasSearch
+				menu="controlled-search"
+				onSearch={ ( value ) => setSearch( value ) }
+				parentMenu="root"
+				search={ search }
+				title="Controlled Search"
+			>
+				{ searchItems
+					.filter( ( { title } ) =>
+						normalizedSearch( title, search )
+					)
+					.map( ( { item, title } ) => (
+						<NavigationItem
+							item={ `child-${ item }` }
+							key={ `child-${ item }` }
+							onClick={ () => setActiveItem( `child-${ item }` ) }
+							title={ title }
+						/>
+					) ) }
+			</NavigationMenu>
+		</Navigation>
+	);
+};
diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js
deleted file mode 100644
index 45b5e03e32bbaf..00000000000000
--- a/packages/components/src/navigation/styles/navigation-styles.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils/colors-values';
-import Button from '../../button';
-import { Text } from '../../text';
-import { Heading } from '../../heading';
-import { reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
-import SearchControl from '../../search-control';
-
-export const NavigationUI = styled.div`
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0 ${ space( 4 ) };
-	overflow: hidden;
-`;
-
-export const MenuUI = styled.div`
-	margin-top: ${ space( 6 ) };
-	margin-bottom: ${ space( 6 ) };
-	display: flex;
-	flex-direction: column;
-	ul {
-		padding: 0;
-		margin: 0;
-		list-style: none;
-	}
-	.components-navigation__back-button {
-		margin-bottom: ${ space( 6 ) };
-	}
-
-	.components-navigation__group + .components-navigation__group {
-		margin-top: ${ space( 6 ) };
-	}
-`;
-
-export const MenuBackButtonUI = styled( Button )`
-	&.is-tertiary {
-		color: inherit;
-		opacity: 0.7;
-
-		&:hover:not( :disabled ) {
-			opacity: 1;
-			box-shadow: none;
-			color: inherit;
-		}
-
-		&:active:not( :disabled ) {
-			background: transparent;
-			opacity: 1;
-			color: inherit;
-		}
-	}
-`;
-
-export const MenuTitleUI = styled.div`
-	overflow: hidden;
-	width: 100%;
-`;
-
-export const MenuTitleActionsUI = styled.span`
-	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
-
-	.components-button.is-small {
-		color: inherit;
-		opacity: 0.7;
-		margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
-		padding: 0;
-
-		&:active:not( :disabled ) {
-			background: none;
-			opacity: 1;
-			color: inherit;
-		}
-		&:hover:not( :disabled ) {
-			box-shadow: none;
-			opacity: 1;
-			color: inherit;
-		}
-	}
-`;
-
-export const MenuTitleSearchUI = styled( SearchControl )`
-	input[type='search'].components-search-control__input {
-		margin: 0;
-		background: #303030;
-		color: #fff;
-
-		&:focus {
-			background: #434343;
-			color: #fff;
-		}
-
-		&::placeholder {
-			color: rgba( 255, 255, 255, 0.6 );
-		}
-	}
-
-	svg {
-		fill: white;
-	}
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: auto;
-	}
-`;
-
-export const GroupTitleUI = styled( Heading )`
-	min-height: ${ space( 12 ) };
-	align-items: center;
-	color: inherit;
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: ${ space( 2 ) };
-	padding: ${ () =>
-		isRTL()
-			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`
-			: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(
-					4
-			  ) }` };
-`;
-
-export const ItemBaseUI = styled.li`
-	border-radius: 2px;
-	color: inherit;
-	margin-bottom: 0;
-
-	> button,
-	> a.components-button,
-	> a {
-		width: 100%;
-		color: inherit;
-		opacity: 0.7;
-		padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
-		${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
-
-		&:hover,
-		&:focus:not( [aria-disabled='true'] ):active,
-		&:active:not( [aria-disabled='true'] ):active {
-			color: inherit;
-			opacity: 1;
-		}
-	}
-
-	&.is-active {
-		background-color: ${ COLORS.ui.theme };
-		color: ${ COLORS.white };
-
-		> button,
-		> a {
-			color: ${ COLORS.white };
-			opacity: 1;
-		}
-	}
-
-	> svg path {
-		color: ${ COLORS.gray[ 600 ] };
-	}
-`;
-
-export const ItemUI = styled.div`
-	display: flex;
-	align-items: center;
-	height: auto;
-	min-height: 40px;
-	margin: 0;
-	padding: ${ space( 1.5 ) } ${ space( 4 ) };
-	font-weight: 400;
-	line-height: 20px;
-	width: 100%;
-	color: inherit;
-	opacity: 0.7;
-`;
-
-export const ItemIconUI = styled.span`
-	display: flex;
-	margin-right: ${ space( 2 ) };
-`;
-
-export const ItemBadgeUI = styled.span`
-	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
-	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
-	display: inline-flex;
-	padding: ${ space( 1 ) } ${ space( 3 ) };
-	border-radius: 2px;
-	animation: fade-in 250ms ease-out;
-
-	@keyframes fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	${ reduceMotion( 'animation' ) };
-`;
-
-export const ItemTitleUI = styled( Text )`
-	${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) }
-	font-size: 14px;
-	line-height: 20px;
-	color: inherit;
-`;
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
new file mode 100644
index 00000000000000..580c0eef4dba8f
--- /dev/null
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../../utils/colors-values';
+import Button from '../../button';
+import { Text } from '../../text';
+import { Heading } from '../../heading';
+import { rtl, CONFIG } from '../../utils';
+import { space } from '../../utils/space';
+
+export const NavigationUI = styled.div`
+	width: 100%;
+	box-sizing: border-box;
+	padding: 0 ${ space( 4 ) };
+	overflow: hidden;
+`;
+
+export const MenuUI = styled.div`
+	margin-top: ${ space( 6 ) };
+	margin-bottom: ${ space( 6 ) };
+	display: flex;
+	flex-direction: column;
+	ul {
+		padding: 0;
+		margin: 0;
+		list-style: none;
+	}
+	.components-navigation__back-button {
+		margin-bottom: ${ space( 6 ) };
+	}
+
+	.components-navigation__group + .components-navigation__group {
+		margin-top: ${ space( 6 ) };
+	}
+`;
+
+export const MenuBackButtonUI = styled( Button )`
+	&.is-tertiary {
+		color: inherit;
+		opacity: 0.7;
+
+		&:hover:not( :disabled ) {
+			opacity: 1;
+			box-shadow: none;
+			color: inherit;
+		}
+
+		&:active:not( :disabled ) {
+			background: transparent;
+			opacity: 1;
+			color: inherit;
+		}
+	}
+`;
+
+export const MenuTitleUI = styled.div`
+	overflow: hidden;
+	width: 100%;
+`;
+
+export const MenuTitleSearchControlWrapper = styled.div`
+	margin: 11px 0; // non-ideal hardcoding to maintain same height as Heading, could be improved
+	padding: 1px; // so the focus border doesn't get cut off by the overflow hidden on MenuTitleUI
+`;
+
+export const MenuTitleActionsUI = styled.span`
+	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
+
+	.components-button.is-small {
+		color: inherit;
+		opacity: 0.7;
+		margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
+		padding: 0;
+
+		&:active:not( :disabled ) {
+			background: none;
+			opacity: 1;
+			color: inherit;
+		}
+		&:hover:not( :disabled ) {
+			box-shadow: none;
+			opacity: 1;
+			color: inherit;
+		}
+	}
+`;
+
+export const GroupTitleUI = styled( Heading )`
+	min-height: ${ space( 12 ) };
+	align-items: center;
+	color: inherit;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: ${ space( 2 ) };
+	padding: ${ () =>
+		isRTL()
+			? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 2 ) }`
+			: `${ space( 1 ) } ${ space( 2 ) } ${ space( 1 ) } ${ space(
+					4
+			  ) }` };
+`;
+
+export const ItemBaseUI = styled.li`
+	border-radius: ${ CONFIG.radiusSmall };
+	color: inherit;
+	margin-bottom: 0;
+
+	> button,
+	> a.components-button,
+	> a {
+		width: 100%;
+		color: inherit;
+		opacity: 0.7;
+		padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
+		${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }
+
+		&:hover,
+		&:focus:not( [aria-disabled='true'] ):active,
+		&:active:not( [aria-disabled='true'] ):active {
+			color: inherit;
+			opacity: 1;
+		}
+	}
+
+	&.is-active {
+		background-color: ${ COLORS.theme.accent };
+		color: ${ COLORS.white };
+
+		> button,
+		> a {
+			color: ${ COLORS.white };
+			opacity: 1;
+		}
+	}
+
+	> svg path {
+		color: ${ COLORS.gray[ 600 ] };
+	}
+`;
+
+export const ItemUI = styled.div`
+	display: flex;
+	align-items: center;
+	height: auto;
+	min-height: 40px;
+	margin: 0;
+	padding: ${ space( 1.5 ) } ${ space( 4 ) };
+	font-weight: 400;
+	line-height: 20px;
+	width: 100%;
+	color: inherit;
+	opacity: 0.7;
+`;
+
+export const ItemIconUI = styled.span`
+	display: flex;
+	margin-right: ${ space( 2 ) };
+`;
+
+export const ItemBadgeUI = styled.span`
+	margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
+	margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
+	display: inline-flex;
+	padding: ${ space( 1 ) } ${ space( 3 ) };
+	border-radius: ${ CONFIG.radiusSmall };
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media not ( prefers-reduced-motion ) {
+		animation: fade-in 250ms ease-out;
+	}
+`;
+
+export const ItemTitleUI = styled( Text )`
+	${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) }
+	font-size: 14px;
+	line-height: 20px;
+	color: inherit;
+`;
diff --git a/packages/components/src/navigation/test/index.js b/packages/components/src/navigation/test/index.js
deleted file mode 100644
index 83ada8291709bc..00000000000000
--- a/packages/components/src/navigation/test/index.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-
-const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
-	<Navigation activeItem={ activeItem }>
-		<NavigationMenu title={ rootTitle }>
-			<NavigationItem
-				badge={ showBadge && 21 }
-				item="item-1"
-				title="Item 1"
-			/>
-			<NavigationItem
-				href="http://example.com"
-				item="item-2"
-				target="_blank"
-				title="Item 2"
-			/>
-			<NavigationItem
-				navigateToMenu="category"
-				item="category"
-				title="Category"
-			/>
-			<NavigationItem item="item-3">
-				<span>customize me</span>
-			</NavigationItem>
-		</NavigationMenu>
-		<NavigationMenu
-			backButtonLabel="Home"
-			menu="category"
-			parentMenu="root"
-			title="Category"
-		>
-			<NavigationItem item="child-1" title="Child 1" />
-			<NavigationItem item="child-2" title="Child 2" />
-		</NavigationMenu>
-	</Navigation>
-);
-
-const TestNavigationControlled = () => {
-	const [ activeItem, setActiveItem ] = useState( 'item-1' );
-	const [ activeMenu, setActiveMenu ] = useState( 'root' );
-
-	const onMockLinkClick = ( event ) => {
-		event.preventDefault();
-		const item = event.target.href.replace( 'https://example.com/', '' );
-		setActiveItem( item );
-	};
-
-	return (
-		<>
-			<Navigation
-				activeItem={ activeItem }
-				activeMenu={ activeMenu }
-				className="navigation-story"
-				onActivateMenu={ setActiveMenu }
-			>
-				<NavigationMenu title="Home">
-					<NavigationItem
-						item="item-1"
-						title="Item 1"
-						href="https://example.com/item-1"
-						onClick={ onMockLinkClick }
-					/>
-					<NavigationItem
-						item="item-2"
-						title="Item 2"
-						href="https://example.com/item-2"
-						onClick={ onMockLinkClick }
-					/>
-					<NavigationItem
-						item="item-sub-menu"
-						navigateToMenu="sub-menu"
-						title="Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="sub-menu"
-					parentMenu="root"
-					title="Sub-Menu"
-				>
-					<NavigationItem
-						item="child-1"
-						onClick={ () => setActiveItem( 'child-1' ) }
-						title="Child 1"
-					/>
-					<NavigationItem
-						item="child-2"
-						onClick={ () => setActiveItem( 'child-2' ) }
-						title="Child 2"
-					/>
-					<NavigationItem
-						item="child-nested-sub-menu"
-						navigateToMenu="nested-sub-menu"
-						title="Nested Sub-Menu"
-					/>
-				</NavigationMenu>
-				<NavigationMenu
-					menu="nested-sub-menu"
-					parentMenu="sub-menu"
-					title="Nested Sub-Menu"
-				>
-					<NavigationItem
-						item="sub-child-1"
-						onClick={ () => setActiveItem( 'sub-child-1' ) }
-						title="Sub-Child 1"
-					/>
-					<NavigationItem
-						item="sub-child-2"
-						onClick={ () => setActiveItem( 'sub-child-2' ) }
-						title="Sub-Child 2"
-					/>
-				</NavigationMenu>
-			</Navigation>
-
-			<div className="navigation-story__aside">
-				<p>
-					Menu <code>{ activeMenu }</code> is active.
-					<br />
-					Item <code>{ activeItem }</code> is active.
-				</p>
-				<p>
-					<button
-						onClick={ () => {
-							setActiveMenu( 'nested-sub-menu' );
-						} }
-					>
-						Open the Nested Sub-Menu menu
-					</button>
-				</p>
-				<p>
-					<button
-						onClick={ () => {
-							setActiveItem( 'child-2' );
-							setActiveMenu( 'sub-menu' );
-						} }
-					>
-						Navigate to Child 2 item
-					</button>
-				</p>
-			</div>
-		</>
-	);
-};
-
-describe( 'Navigation', () => {
-	it( 'should render the panes and active item', async () => {
-		render( <TestNavigation activeItem="item-2" /> );
-
-		const menuItems = screen.getAllByRole( 'listitem' );
-
-		expect( menuItems ).toHaveLength( 4 );
-		expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
-		expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
-		expect( menuItems[ 2 ] ).toHaveTextContent( 'Category' );
-		expect( menuItems[ 3 ] ).toHaveTextContent( 'customize me' );
-
-		expect(
-			screen.getByRole( 'link', { current: 'page' } )
-		).toHaveTextContent( 'Item 2' );
-	} );
-
-	it( 'should render anchor links when menu item supplies an href', () => {
-		render( <TestNavigation /> );
-
-		const linkItem = screen.getByRole( 'link', { name: 'Item 2' } );
-
-		expect( linkItem ).toBeInTheDocument();
-		expect( linkItem ).toHaveAttribute( 'target', '_blank' );
-	} );
-
-	it( 'should render a custom component when menu item supplies one', () => {
-		render( <TestNavigation /> );
-
-		expect( screen.getByText( 'customize me' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should set an active category on click', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render( <TestNavigation /> );
-
-		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
-
-		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
-		const menuItems = screen.getAllByRole( 'listitem' );
-		expect( menuItems ).toHaveLength( 2 );
-		expect( menuItems[ 0 ] ).toHaveTextContent( 'Child 1' );
-		expect( menuItems[ 1 ] ).toHaveTextContent( 'Child 2' );
-	} );
-
-	it( 'should render the root title', () => {
-		const { rerender } = render( <TestNavigation /> );
-
-		expect( screen.queryByRole( 'heading' ) ).not.toBeInTheDocument();
-
-		rerender( <TestNavigation rootTitle="Home" /> );
-
-		expect( screen.getByRole( 'heading' ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
-	} );
-
-	it( 'should render badges', () => {
-		render( <TestNavigation showBadge /> );
-
-		const menuItem = screen.getAllByRole( 'listitem' );
-		expect( menuItem[ 0 ] ).toHaveTextContent( 'Item 1' + '21' );
-	} );
-
-	it( 'should render menu titles when items exist', () => {
-		const { rerender } = render( <Navigation></Navigation> );
-
-		expect( screen.queryByText( 'Menu title' ) ).not.toBeInTheDocument();
-
-		rerender( <TestNavigation rootTitle="Menu title" /> );
-
-		expect( screen.getByText( 'Menu title' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should navigate up a level when clicking the back button', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render( <TestNavigation rootTitle="Home" /> );
-
-		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
-
-		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
-
-		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
-
-		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
-	} );
-
-	it( 'should navigate correctly when controlled', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		render( <TestNavigationControlled /> );
-
-		// check root menu is shown and item 1 is selected
-		expect(
-			screen.getByRole( 'heading', { name: 'Home' } )
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole( 'link', { current: 'page' } )
-		).toHaveTextContent( 'Item 1' );
-
-		// click Item 2, check it's selected
-		await user.click( screen.getByRole( 'link', { name: 'Item 2' } ) );
-		expect(
-			screen.getByRole( 'link', { current: 'page' } )
-		).toHaveTextContent( 'Item 2' );
-
-		// click sub-menu, check new menu is shown
-		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
-		expect(
-			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
-		).toBeInTheDocument();
-
-		// click Child 1, check it's selected
-		await user.click( screen.getByRole( 'button', { name: 'Child 1' } ) );
-		expect(
-			screen.getByRole( 'button', { current: 'page' } )
-		).toHaveTextContent( 'Child 1' );
-
-		// click nested sub-menu, check nested sub-menu is shown
-		await user.click(
-			screen.getByRole( 'button', { name: 'Nested Sub-Menu' } )
-		);
-		expect(
-			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
-		).toBeInTheDocument();
-
-		// click Sub Child 2, check it's selected
-		await user.click(
-			screen.getByRole( 'button', { name: 'Sub-Child 2' } )
-		);
-		expect(
-			screen.getByRole( 'button', { current: 'page' } )
-		).toHaveTextContent( 'Sub-Child 2' );
-
-		// click back, check sub-menu is shown
-		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
-		expect(
-			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
-		).toBeInTheDocument();
-
-		// click back, check root menu is shown
-		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
-		expect(
-			screen.getByRole( 'heading', { name: 'Home' } )
-		).toBeInTheDocument();
-
-		// click the programmatic nested sub-menu button, check nested sub menu is shown
-		await user.click(
-			screen.getByRole( 'button', {
-				name: 'Open the Nested Sub-Menu menu',
-			} )
-		);
-		expect(
-			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
-		).toBeInTheDocument();
-
-		// click navigate to child2 item button, check the correct menu is shown and the item is selected
-		await user.click(
-			screen.getByRole( 'button', {
-				name: 'Navigate to Child 2 item',
-			} )
-		);
-		expect(
-			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole( 'button', { current: 'page' } )
-		).toHaveTextContent( 'Child 2' );
-	} );
-} );
diff --git a/packages/components/src/navigation/test/index.tsx b/packages/components/src/navigation/test/index.tsx
new file mode 100644
index 00000000000000..20646a6c809bfc
--- /dev/null
+++ b/packages/components/src/navigation/test/index.tsx
@@ -0,0 +1,343 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Navigation from '..';
+import NavigationItem from '../item';
+import NavigationMenu from '../menu';
+
+const TestNavigation = ( {
+	activeItem,
+	rootTitle,
+	showBadge,
+}: {
+	activeItem?: string;
+	rootTitle?: string;
+	showBadge?: boolean;
+} ) => (
+	<Navigation activeItem={ activeItem }>
+		<NavigationMenu title={ rootTitle }>
+			<NavigationItem
+				badge={ showBadge ? 21 : undefined }
+				item="item-1"
+				title="Item 1"
+			/>
+			<NavigationItem
+				href="http://example.com"
+				item="item-2"
+				target="_blank"
+				title="Item 2"
+			/>
+			<NavigationItem
+				navigateToMenu="category"
+				item="category"
+				title="Category"
+			/>
+			<NavigationItem item="item-3">
+				<span>customize me</span>
+			</NavigationItem>
+		</NavigationMenu>
+		<NavigationMenu
+			backButtonLabel="Home"
+			menu="category"
+			parentMenu="root"
+			title="Category"
+		>
+			<NavigationItem item="child-1" title="Child 1" />
+			<NavigationItem item="child-2" title="Child 2" />
+		</NavigationMenu>
+	</Navigation>
+);
+
+const TestNavigationControlled = () => {
+	const [ activeItem, setActiveItem ] = useState( 'item-1' );
+	const [ activeMenu, setActiveMenu ] = useState( 'root' );
+
+	const onMockLinkClick: React.MouseEventHandler< HTMLAnchorElement > = (
+		event
+	) => {
+		event.preventDefault();
+		const item = ( event.target as HTMLAnchorElement ).href.replace(
+			'https://example.com/',
+			''
+		);
+		setActiveItem( item );
+	};
+
+	return (
+		<>
+			<Navigation
+				activeItem={ activeItem }
+				activeMenu={ activeMenu }
+				className="navigation-story"
+				onActivateMenu={ setActiveMenu }
+			>
+				<NavigationMenu title="Home">
+					<NavigationItem
+						item="item-1"
+						title="Item 1"
+						href="https://example.com/item-1"
+						onClick={ onMockLinkClick }
+					/>
+					<NavigationItem
+						item="item-2"
+						title="Item 2"
+						href="https://example.com/item-2"
+						onClick={ onMockLinkClick }
+					/>
+					<NavigationItem
+						item="item-sub-menu"
+						navigateToMenu="sub-menu"
+						title="Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="sub-menu"
+					parentMenu="root"
+					title="Sub-Menu"
+				>
+					<NavigationItem
+						item="child-1"
+						onClick={ () => setActiveItem( 'child-1' ) }
+						title="Child 1"
+					/>
+					<NavigationItem
+						item="child-2"
+						onClick={ () => setActiveItem( 'child-2' ) }
+						title="Child 2"
+					/>
+					<NavigationItem
+						item="child-nested-sub-menu"
+						navigateToMenu="nested-sub-menu"
+						title="Nested Sub-Menu"
+					/>
+				</NavigationMenu>
+				<NavigationMenu
+					menu="nested-sub-menu"
+					parentMenu="sub-menu"
+					title="Nested Sub-Menu"
+				>
+					<NavigationItem
+						item="sub-child-1"
+						onClick={ () => setActiveItem( 'sub-child-1' ) }
+						title="Sub-Child 1"
+					/>
+					<NavigationItem
+						item="sub-child-2"
+						onClick={ () => setActiveItem( 'sub-child-2' ) }
+						title="Sub-Child 2"
+					/>
+				</NavigationMenu>
+			</Navigation>
+
+			<div className="navigation-story__aside">
+				<p>
+					Menu <code>{ activeMenu }</code> is active.
+					<br />
+					Item <code>{ activeItem }</code> is active.
+				</p>
+				<p>
+					<button
+						onClick={ () => {
+							setActiveMenu( 'nested-sub-menu' );
+						} }
+					>
+						Open the Nested Sub-Menu menu
+					</button>
+				</p>
+				<p>
+					<button
+						onClick={ () => {
+							setActiveItem( 'child-2' );
+							setActiveMenu( 'sub-menu' );
+						} }
+					>
+						Navigate to Child 2 item
+					</button>
+				</p>
+			</div>
+		</>
+	);
+};
+
+describe( 'Navigation', () => {
+	it( 'should render the panes and active item', async () => {
+		render( <TestNavigation activeItem="item-2" /> );
+
+		const menuItems = screen.getAllByRole( 'listitem' );
+
+		expect( menuItems ).toHaveLength( 4 );
+		expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+		expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+		expect( menuItems[ 2 ] ).toHaveTextContent( 'Category' );
+		expect( menuItems[ 3 ] ).toHaveTextContent( 'customize me' );
+
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 2' );
+	} );
+
+	it( 'should render anchor links when menu item supplies an href', () => {
+		render( <TestNavigation /> );
+
+		const linkItem = screen.getByRole( 'link', { name: 'Item 2' } );
+
+		expect( linkItem ).toBeInTheDocument();
+		expect( linkItem ).toHaveAttribute( 'target', '_blank' );
+	} );
+
+	it( 'should render a custom component when menu item supplies one', () => {
+		render( <TestNavigation /> );
+
+		expect( screen.getByText( 'customize me' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should set an active category on click', async () => {
+		const user = userEvent.setup();
+
+		render( <TestNavigation /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
+		const menuItems = screen.getAllByRole( 'listitem' );
+		expect( menuItems ).toHaveLength( 2 );
+		expect( menuItems[ 0 ] ).toHaveTextContent( 'Child 1' );
+		expect( menuItems[ 1 ] ).toHaveTextContent( 'Child 2' );
+	} );
+
+	it( 'should render the root title', () => {
+		const { rerender } = render( <TestNavigation /> );
+
+		expect( screen.queryByRole( 'heading' ) ).not.toBeInTheDocument();
+
+		rerender( <TestNavigation rootTitle="Home" /> );
+
+		expect( screen.getByRole( 'heading' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
+	} );
+
+	it( 'should render badges', () => {
+		render( <TestNavigation showBadge /> );
+
+		const menuItem = screen.getAllByRole( 'listitem' );
+		expect( menuItem[ 0 ] ).toHaveTextContent( 'Item 1' + '21' );
+	} );
+
+	it( 'should render menu titles when items exist', () => {
+		const { rerender } = render( <Navigation></Navigation> );
+
+		expect( screen.queryByText( 'Menu title' ) ).not.toBeInTheDocument();
+
+		rerender( <TestNavigation rootTitle="Menu title" /> );
+
+		expect( screen.getByText( 'Menu title' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should navigate up a level when clicking the back button', async () => {
+		const user = userEvent.setup();
+
+		render( <TestNavigation rootTitle="Home" /> );
+
+		await user.click( screen.getByRole( 'button', { name: 'Category' } ) );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Category' );
+
+		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
+
+		expect( screen.getByRole( 'heading' ) ).toHaveTextContent( 'Home' );
+	} );
+
+	it( 'should navigate correctly when controlled', async () => {
+		const user = userEvent.setup();
+
+		render( <TestNavigationControlled /> );
+
+		// check root menu is shown and item 1 is selected
+		expect(
+			screen.getByRole( 'heading', { name: 'Home' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 1' );
+
+		// click Item 2, check it's selected
+		await user.click( screen.getByRole( 'link', { name: 'Item 2' } ) );
+		expect(
+			screen.getByRole( 'link', { current: 'page' } )
+		).toHaveTextContent( 'Item 2' );
+
+		// click sub-menu, check new menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click Child 1, check it's selected
+		await user.click( screen.getByRole( 'button', { name: 'Child 1' } ) );
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Child 1' );
+
+		// click nested sub-menu, check nested sub-menu is shown
+		await user.click(
+			screen.getByRole( 'button', { name: 'Nested Sub-Menu' } )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click Sub Child 2, check it's selected
+		await user.click(
+			screen.getByRole( 'button', { name: 'Sub-Child 2' } )
+		);
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Sub-Child 2' );
+
+		// click back, check sub-menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Sub-Menu' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click back, check root menu is shown
+		await user.click( screen.getByRole( 'button', { name: 'Home' } ) );
+		expect(
+			screen.getByRole( 'heading', { name: 'Home' } )
+		).toBeInTheDocument();
+
+		// click the programmatic nested sub-menu button, check nested sub menu is shown
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Open the Nested Sub-Menu menu',
+			} )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Nested Sub-Menu' } )
+		).toBeInTheDocument();
+
+		// click navigate to child2 item button, check the correct menu is shown and the item is selected
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Navigate to Child 2 item',
+			} )
+		);
+		expect(
+			screen.getByRole( 'heading', { name: 'Sub-Menu' } )
+		).toBeInTheDocument();
+		expect(
+			screen.getByRole( 'button', { current: 'page' } )
+		).toHaveTextContent( 'Child 2' );
+	} );
+} );
diff --git a/packages/components/src/navigation/types.ts b/packages/components/src/navigation/types.ts
new file mode 100644
index 00000000000000..4dbc9f5236cc33
--- /dev/null
+++ b/packages/components/src/navigation/types.ts
@@ -0,0 +1,325 @@
+/**
+ * Internal dependencies
+ */
+import type { ButtonProps } from '../button/types';
+
+type IfDiscriminantDefinedBothRequired< TDiscriminant, TOther > =
+	// When props in TDiscriminant are specified,
+	// then props from TOther are required too
+	| {
+			[ K in keyof ( TDiscriminant & TOther ) ]: NonNullable<
+				( TDiscriminant & TOther )[ K ]
+			>;
+	  }
+	// When props in TDiscriminant are not specified,
+	// then props from TOther are optional
+	| ( {
+			[ K in keyof TDiscriminant ]?: never;
+	  } & {
+			[ K in keyof TOther ]?: TOther[ K ];
+	  } );
+
+// React Components
+
+export type NavigationProps = {
+	/**
+	 * The active item slug.
+	 */
+	activeItem?: string;
+	/**
+	 * The active menu slug.
+	 *
+	 * @default 'root'
+	 */
+	activeMenu?: string;
+	/**
+	 * The children components.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * Callback used to sync the active menu between the external state
+	 * and the Navigation's internal state.
+	 */
+	onActivateMenu?: ( activeMenuSlug: string ) => void;
+};
+
+// When `onSearch` is specified, `search` should be specified too
+type _NavigationMenuSearchProps = IfDiscriminantDefinedBothRequired<
+	{
+		/**
+		 * When the `hasSearch` prop is `true`, this callback handles the search
+		 * input's `onChange` event, making it controlled from the outside.
+		 * When using this prop, the `search` prop should be also set.
+		 */
+		onSearch: ( searchString: string ) => void;
+	},
+	{
+		/**
+		 * When the `hasSearch` is `true` and the `onSearch` prop is provided, this
+		 * prop controls the value of the search input.
+		 * Required when the `onSearch` prop is provided.
+		 */
+		search: string;
+	}
+>;
+
+export type NavigationMenuProps = _NavigationMenuSearchProps & {
+	/**
+	 * The back button label used in nested menus.
+	 * If not provided, the label will be inferred from the parent menu's title.
+	 * If the parent menu's title is not available then it will default to "Back".
+	 *
+	 * @default parentMenuTitle ?? 'Back'
+	 */
+	backButtonLabel?: string;
+	/**
+	 * A callback to handle clicking on the back button.
+	 * If this prop is provided then the back button will be shown.
+	 */
+	onBackButtonClick?: React.MouseEventHandler< HTMLElement >;
+	/**
+	 * The children components.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * When `true`, enables the search feature on the menu title.
+	 */
+	hasSearch?: boolean;
+	/**
+	 * Indicates whether the menu is empty or not. Used together with the
+	 * `hideIfTargetMenuEmpty` prop of `NavigationItem`.
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates whether the search is debouncing or not. In case of `true`, the
+	 * "No results found." text is omitted. Used to prevent showing the
+	 * "No results found." text between debounced searches.
+	 */
+	isSearchDebouncing?: boolean;
+	/**
+	 * The unique identifier of the menu.
+	 * The root menu can omit this prop, and it will default to "root".
+	 * All other menus need to specify it.
+	 *
+	 * @default 'root'
+	 */
+	menu?: string;
+	/**
+	 * The parent menu slug; used by nested menus to indicate their parent menu.
+	 */
+	parentMenu?: string;
+	/**
+	 * The menu title. It's also the field used by the menu search function.
+	 */
+	title?: string;
+	/**
+	 * Use this prop to render additional actions in the menu title.
+	 */
+	titleAction?: React.ReactNode;
+};
+
+export type NavigationGroupProps = {
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * The group title.
+	 */
+	title?: string;
+	/**
+	 * The children components.
+	 */
+	children: React.ReactNode;
+};
+
+type _NavigationItemButtonProps =
+	| ( ButtonProps & {
+			/**
+			 * If set to `true` the menu item will only act as a text-only item,
+			 * rather than a `<button />` or `<a />` element.
+			 */
+			isText?: false;
+	  } )
+	| {
+			/**
+			 * If set to `true` the menu item will only act as a text-only item,
+			 * rather than a `<button />` or `<a />` element.
+			 */
+			isText: true;
+	  };
+
+export type NavigationItemBaseProps = {
+	/**
+	 * The item badge content.
+	 */
+	badge?: string | number;
+	/**
+	 * The children components. When not specified, the item will render the
+	 * default item UI.
+	 */
+	children?: React.ReactNode;
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * If provided, causes the component to render an `<a />` element
+	 * instead of a `<button />` element.
+	 */
+	href?: string;
+	/**
+	 * If no `children` are passed, this prop allows to specify a custom icon for
+	 * the menu item.
+	 */
+	icon?: JSX.Element;
+	/**
+	 * The unique identifier of the item.
+	 */
+	item?: string;
+	/**
+	 * The child menu slug. If provided, clicking on the item will navigate
+	 * to the target menu.
+	 */
+	navigateToMenu?: string;
+	/**
+	 * Indicates whether this item should be hidden if the menu specified in
+	 * `navigateToMenu` is marked as empty in the `isEmpty` prop.
+	 * Used together with the `isEmpty` prop of `NavigationMenu`.
+	 */
+	hideIfTargetMenuEmpty?: boolean;
+	/**
+	 * A callback to handle clicking on a menu item.
+	 *
+	 * @default noop
+	 */
+	onClick?: React.MouseEventHandler;
+	/**
+	 * The item title.
+	 */
+	title?: string;
+};
+
+export type NavigationItemProps = _NavigationItemButtonProps &
+	NavigationItemBaseProps;
+
+export type NavigationItemBaseContentProps = Pick<
+	NavigationItemProps,
+	'badge' | 'title'
+>;
+
+export type NavigationBackButtonProps = {
+	/**
+	 * The text displayed for the button
+	 */
+	backButtonLabel?: string;
+	/**
+	 * Optional classname for the component.
+	 */
+	className?: string;
+	/**
+	 * If provided, causes the component to render an `<a />` element
+	 * instead of a `<button />` element.
+	 */
+	href?: string;
+	/**
+	 * Callback function called when the button is clicked.
+	 */
+	onClick?: React.MouseEventHandler;
+	/**
+	 * Id of the parent menu
+	 */
+	parentMenu?: string;
+};
+
+export type NavigationMenuTitleSearchProps = Pick<
+	NavigationMenuProps,
+	'onSearch' | 'search' | 'title'
+> & {
+	// @see `speak` function from `@wordpress/a11y`
+	debouncedSpeak: (
+		message: string,
+		ariaLive?: 'off' | 'polite' | 'assertive'
+	) => void;
+	onCloseSearch: () => void;
+};
+
+export type NavigationMenuTitleProps = Pick<
+	NavigationMenuProps,
+	'hasSearch' | 'onSearch' | 'search' | 'title' | 'titleAction'
+>;
+
+export type NavigationSearchNoResultsFoundProps = Pick<
+	NavigationMenuProps,
+	'search'
+>;
+
+// Data objects & context
+
+export type Item = Omit< NavigationItemBaseProps, 'children' > & {
+	/**
+	 * The group id
+	 */
+	group?: string;
+	/**
+	 * The menu id
+	 */
+	menu?: string;
+	/**
+	 * True is the item is currently visible (ie. the item is part
+	 * of the active menu, and — if there is a search query — its title
+	 * matches the search query).
+	 */
+	_isVisible: boolean;
+};
+
+export type Menu = Omit< NavigationMenuProps, 'children' > & {
+	menu: string;
+};
+
+export type NavigationGroupContext = {
+	/**
+	 * The unique id of the group
+	 */
+	group?: string;
+};
+
+export type NavigationMenuContext = {
+	menu?: string;
+	search?: string;
+};
+
+export type NavigationContext = {
+	activeItem?: string;
+	activeMenu: string;
+	setActiveMenu: (
+		parentMenu: string,
+		animationDirection?: 'left' | 'right'
+	) => void;
+
+	navigationTree: {
+		items: Record< string, Item >;
+		getItem: ( itemId: string ) => Item | undefined;
+		addItem: ( itemId: string, itemProps: Item ) => void;
+		removeItem: ( itemId: string ) => void;
+
+		menus: Record< string, Menu >;
+		getMenu: ( menuId: string ) => Menu | undefined;
+		addMenu: ( menuId: string, menuProps: Menu ) => void;
+		removeMenu: ( menuId: string ) => void;
+		childMenu: Record< string, string[] >;
+		traverseMenu: (
+			startMenu: string,
+			callback: ( menuObject: Menu ) => boolean | undefined
+		) => void;
+		isMenuEmpty: ( menuId: string ) => boolean;
+	};
+};
diff --git a/packages/components/src/navigation/use-create-navigation-tree.js b/packages/components/src/navigation/use-create-navigation-tree.js
deleted file mode 100644
index 63d5d4a6e2bbb9..00000000000000
--- a/packages/components/src/navigation/use-create-navigation-tree.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useNavigationTreeNodes } from './use-navigation-tree-nodes';
-
-export const useCreateNavigationTree = () => {
-	const {
-		nodes: items,
-		getNode: getItem,
-		addNode: addItem,
-		removeNode: removeItem,
-	} = useNavigationTreeNodes();
-
-	const {
-		nodes: menus,
-		getNode: getMenu,
-		addNode: addMenu,
-		removeNode: removeMenu,
-	} = useNavigationTreeNodes();
-
-	/**
-	 * Stores direct nested menus of menus
-	 * This makes it easy to traverse menu tree
-	 *
-	 * Key is the menu prop of the menu
-	 * Value is an array of menu keys
-	 */
-	const [ childMenu, setChildMenu ] = useState( {} );
-	const getChildMenu = ( menu ) => childMenu[ menu ] || [];
-
-	const traverseMenu = ( startMenu, callback ) => {
-		const visited = [];
-		let queue = [ startMenu ];
-		let current;
-
-		while ( queue.length > 0 ) {
-			current = getMenu( queue.shift() );
-
-			if ( ! current || visited.includes( current.menu ) ) {
-				continue;
-			}
-
-			visited.push( current.menu );
-			queue = [ ...queue, ...getChildMenu( current.menu ) ];
-
-			if ( callback( current ) === false ) {
-				break;
-			}
-		}
-	};
-
-	const isMenuEmpty = ( menuToCheck ) => {
-		let isEmpty = true;
-
-		traverseMenu( menuToCheck, ( current ) => {
-			if ( ! current.isEmpty ) {
-				isEmpty = false;
-				return false;
-			}
-		} );
-
-		return isEmpty;
-	};
-
-	return {
-		items,
-		getItem,
-		addItem,
-		removeItem,
-
-		menus,
-		getMenu,
-		addMenu: ( key, value ) => {
-			setChildMenu( ( state ) => {
-				const newState = { ...state };
-
-				if ( ! newState[ value.parentMenu ] ) {
-					newState[ value.parentMenu ] = [];
-				}
-
-				newState[ value.parentMenu ].push( key );
-
-				return newState;
-			} );
-
-			addMenu( key, value );
-		},
-		removeMenu,
-		childMenu,
-		traverseMenu,
-		isMenuEmpty,
-	};
-};
diff --git a/packages/components/src/navigation/use-create-navigation-tree.tsx b/packages/components/src/navigation/use-create-navigation-tree.tsx
new file mode 100644
index 00000000000000..7133ec08e4b4aa
--- /dev/null
+++ b/packages/components/src/navigation/use-create-navigation-tree.tsx
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useNavigationTreeNodes } from './use-navigation-tree-nodes';
+
+import type { NavigationContext, Item, Menu } from './types';
+
+export const useCreateNavigationTree = () => {
+	const {
+		nodes: items,
+		getNode: getItem,
+		addNode: addItem,
+		removeNode: removeItem,
+	} = useNavigationTreeNodes< Item >();
+
+	const {
+		nodes: menus,
+		getNode: getMenu,
+		addNode: addMenu,
+		removeNode: removeMenu,
+	} = useNavigationTreeNodes< Menu >();
+
+	/**
+	 * Stores direct nested menus of menus
+	 * This makes it easy to traverse menu tree
+	 *
+	 * Key is the menu prop of the menu
+	 * Value is an array of menu keys
+	 */
+	const [ childMenu, setChildMenu ] = useState< Record< string, string[] > >(
+		{}
+	);
+	const getChildMenu = ( menu: string ) => childMenu[ menu ] || [];
+
+	const traverseMenu: NavigationContext[ 'navigationTree' ][ 'traverseMenu' ] =
+		( startMenu, callback ) => {
+			const visited: string[] = [];
+			let queue = [ startMenu ];
+			let current: Menu;
+
+			while ( queue.length > 0 ) {
+				// Type cast to string is safe because of the `length > 0` check above.
+				current = getMenu( queue.shift() as string );
+
+				if ( ! current || visited.includes( current.menu ) ) {
+					continue;
+				}
+
+				visited.push( current.menu );
+				queue = [ ...queue, ...getChildMenu( current.menu ) ];
+
+				if ( callback( current ) === false ) {
+					break;
+				}
+			}
+		};
+
+	const isMenuEmpty = ( menuToCheck: string ) => {
+		let isEmpty = true;
+
+		traverseMenu( menuToCheck, ( current: Menu ) => {
+			if ( ! current.isEmpty ) {
+				isEmpty = false;
+				return false;
+			}
+
+			return undefined;
+		} );
+
+		return isEmpty;
+	};
+
+	return {
+		items,
+		getItem,
+		addItem,
+		removeItem,
+
+		menus,
+		getMenu,
+		addMenu: ( key: string, value: Menu ) => {
+			setChildMenu( ( state ) => {
+				const newState = { ...state };
+
+				if ( ! value.parentMenu ) {
+					return newState;
+				}
+
+				if ( ! newState[ value.parentMenu ] ) {
+					newState[ value.parentMenu ] = [];
+				}
+
+				newState[ value.parentMenu ].push( key );
+
+				return newState;
+			} );
+
+			addMenu( key, value );
+		},
+		removeMenu,
+		childMenu,
+		traverseMenu,
+		isMenuEmpty,
+	};
+};
diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.js b/packages/components/src/navigation/use-navigation-tree-nodes.js
deleted file mode 100644
index b69c49b970f266..00000000000000
--- a/packages/components/src/navigation/use-navigation-tree-nodes.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export const useNavigationTreeNodes = () => {
-	const [ nodes, setNodes ] = useState( {} );
-
-	const getNode = ( key ) => nodes[ key ];
-
-	const addNode = ( key, value ) => {
-		const { children, ...newNode } = value;
-		return setNodes( ( original ) => ( {
-			...original,
-			[ key ]: newNode,
-		} ) );
-	};
-
-	const removeNode = ( key ) => {
-		return setNodes( ( original ) => {
-			const { [ key ]: removedNode, ...remainingNodes } = original;
-			return remainingNodes;
-		} );
-	};
-
-	return { nodes, getNode, addNode, removeNode };
-};
diff --git a/packages/components/src/navigation/use-navigation-tree-nodes.tsx b/packages/components/src/navigation/use-navigation-tree-nodes.tsx
new file mode 100644
index 00000000000000..45ed86e0262309
--- /dev/null
+++ b/packages/components/src/navigation/use-navigation-tree-nodes.tsx
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export function useNavigationTreeNodes<
+	TNode extends { children?: React.ReactNode; [ key: string ]: unknown },
+>() {
+	const [ nodes, setNodes ] = useState<
+		Record< string, Omit< TNode, 'children' > >
+	>( {} );
+
+	const getNode = ( key: string ) => nodes[ key ];
+
+	const addNode = ( key: string, value: TNode ) => {
+		const { children, ...newNode } = value;
+		return setNodes( ( original ) => ( {
+			...original,
+			[ key ]: newNode,
+		} ) );
+	};
+
+	const removeNode = ( key: keyof typeof nodes ) => {
+		return setNodes( ( original ) => {
+			const { [ key ]: removedNode, ...remainingNodes } = original;
+			return remainingNodes;
+		} );
+	};
+
+	return { nodes, getNode, addNode, removeNode };
+}
diff --git a/packages/components/src/navigation/utils.js b/packages/components/src/navigation/utils.js
deleted file mode 100644
index 8b4d4f4701839c..00000000000000
--- a/packages/components/src/navigation/utils.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
-// @see packages/block-editor/src/components/inserter/search-items.js
-export const normalizeInput = ( input ) =>
-	removeAccents( input ).replace( /^\//, '' ).toLowerCase();
-
-export const normalizedSearch = ( title, search ) =>
-	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );
diff --git a/packages/components/src/navigation/utils.tsx b/packages/components/src/navigation/utils.tsx
new file mode 100644
index 00000000000000..47ef5f12cafcdb
--- /dev/null
+++ b/packages/components/src/navigation/utils.tsx
@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+// @see packages/block-editor/src/components/inserter/search-items.js
+export const normalizeInput = ( input: string ) =>
+	removeAccents( input ).replace( /^\//, '' ).toLowerCase();
+
+export const normalizedSearch = ( title: string, search: string ) =>
+	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 00000000000000..b56a82e0524eef
--- /dev/null
+++ b/packages/components/src/navigator/README.md
@@ -0,0 +1,176 @@
+# `Navigator`
+
+`Navigator` is a collection components that allow rendering nested views/panels/menus (via the `Navigator.Screen` component) and navigate between them (via the `Navigator.Button` and `Navigator.BackButton` components).
+
+## Usage
+
+```jsx
+import { Navigator } from '@wordpress/components';
+
+const MyNavigation = () => (
+	<Navigator initialPath="/">
+		<Navigator.Screen path="/">
+			<p>This is the home screen.</p>
+			<Navigator.Button path="/child">
+				Navigate to child screen.
+			</Navigator.Button>
+		</Navigator.Screen>
+		<Navigator.Screen path="/child">
+			<p>This is the child screen.</p>
+			<Navigator.BackButton>Go back</Navigator.BackButton>
+		</Navigator.Screen>
+	</Navigator>
+);
+```
+
+### Hierarchical `path`s
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`;
+-   `/parent/child` is a child of `/parent`;
+-   `/parent/child/grand-child` is a child of `/parent/child`;
+-   `/parent/:param` is a child of `/parent` as well;
+-   if the current screen has a `path="/parent/child/grand-child"`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+### Height and animations
+
+Due to how `Navigator.Screen` animations work, it is recommended that the `Navigator` component is assigned a `height` to prevent some potential UI jumps while moving across screens.
+
+### Individual components
+
+`Navigator` is comprised of four individual components:
+
+-   `Navigator`: a wrapper component and context provider. It holds the main logic for hiding and showing screens.
+-   `Navigator.Screen`: represents a single view/screen/panel;
+-   `Navigator.Button`: renders a button that allows navigating to a different `Navigator.Screen`;
+-   `Navigator.BackButton`: renders a button that allows navigating to the parent `Navigator.Screen` (see the section above about hierarchical paths).
+
+For advanced usages, consumers can use the `useNavigator` hook.
+
+#### `Navigator`
+
+##### Props
+
+###### `initialPath`: `string`
+
+The initial active path.
+
+-   Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: Yes
+
+#### `Navigator.Screen`
+
+##### Props
+
+###### `path`: `string`
+
+The screen's path, matched against the current path stored in the navigator.
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`.
+-   `/parent/child` is a child of `/parent`.
+-   `/parent/child/grand-child` is a child of `/parent/child`.
+-   `/parent/:param` is a child of `/parent` as well.
+-   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+-   Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: Yes
+
+#### `Navigator.Button`
+
+##### Props
+
+###### `path`: `string`
+
+The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
+
+-   Required: Yes
+
+###### `attributeName`: `string`
+
+The HTML attribute used to identify the `Navigator.Button`, which is used by `Navigator` to restore focus.
+
+-   Required: No
+-   Default: `id`
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: No
+
+###### Inherited props
+
+`Navigator.Button` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `Navigator.BackButton`
+
+##### Props
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: No
+
+###### Inherited props
+
+`Navigator.BackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `useNavigator`
+
+You can retrieve a `navigator` instance by using the `useNavigator` hook.
+
+##### Props
+
+The `navigator` instance has a few properties:
+
+###### `goTo`: `( path: string, options: NavigateOptions ) => void`
+
+The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
+
+The available options are:
+
+-   `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
+-   `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
+-   `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
+
+###### `goBack`: `( path: string, options: NavigateOptions ) => void`
+
+The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
+
+When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
+
+###### `location`: `NavigatorLocation`
+
+The `location` object represents the current location, and has a few properties:
+
+-   `path`: `string`. The path associated to the location.
+-   `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards.
+-   `isInitial`: `boolean`. A flag that is `true` only for the initial location.
+
+###### `params`: `Record< string, string | string[] >`
+
+The parsed record of parameters from the current location. For example if the current screen path is `/product/:productId` and the location is `/product/123`, then `params` will be `{ productId: '123' }`.
diff --git a/packages/components/src/navigator/context.ts b/packages/components/src/navigator/context.ts
index 13863aacc5c917..e195621b03d205 100644
--- a/packages/components/src/navigator/context.ts
+++ b/packages/components/src/navigator/context.ts
@@ -12,5 +12,9 @@ const initialContextValue: NavigatorContextType = {
 	location: {},
 	goTo: () => {},
 	goBack: () => {},
+	goToParent: () => {},
+	addScreen: () => {},
+	removeScreen: () => {},
+	params: {},
 };
 export const NavigatorContext = createContext( initialContextValue );
diff --git a/packages/components/src/navigator/index.ts b/packages/components/src/navigator/index.ts
deleted file mode 100644
index 49f5655dc4b39c..00000000000000
--- a/packages/components/src/navigator/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { NavigatorProvider } from './navigator-provider';
-export { NavigatorScreen } from './navigator-screen';
-export { NavigatorButton } from './navigator-button';
-export { NavigatorBackButton } from './navigator-back-button';
-export { default as useNavigator } from './use-navigator';
diff --git a/packages/components/src/navigator/index.tsx b/packages/components/src/navigator/index.tsx
new file mode 100644
index 00000000000000..1d9ae95441e01a
--- /dev/null
+++ b/packages/components/src/navigator/index.tsx
@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as TopLevelNavigator } from './navigator/component';
+import { NavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton } from './navigator-back-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `Navigator` component allows rendering nested views/panels/menus
+ * (via the `Navigator.Screen` component) and navigate between them
+ * (via the `Navigator.Button` and `Navigator.BackButton` components).
+ *
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <Navigator initialPath="/">
+ *     <Navigator.Screen path="/">
+ *       <p>This is the home screen.</p>
+ *        <Navigator.Button path="/child">
+ *          Navigate to child screen.
+ *       </Navigator.Button>
+ *     </Navigator.Screen>
+ *
+ *     <Navigator.Screen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <Navigator.BackButton>
+ *         Go back
+ *       </Navigator.BackButton>
+ *     </Navigator.Screen>
+ *   </Navigator>
+ * );
+ * ```
+ */
+export const Navigator = Object.assign( TopLevelNavigator, {
+	/**
+	 * The `Navigator.Screen` component represents a single view/screen/panel and
+	 * should be used in combination with the `Navigator`, the `Navigator.Button`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Screen: Object.assign( NavigatorScreen, {
+		displayName: 'Navigator.Screen',
+	} ),
+	/**
+	 * The `Navigator.Button` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Button: Object.assign( NavigatorButton, {
+		displayName: 'Navigator.Button',
+	} ),
+	/**
+	 * The `Navigator.BackButton` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.Button` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	BackButton: Object.assign( NavigatorBackButton, {
+		displayName: 'Navigator.BackButton',
+	} ),
+} );
diff --git a/packages/components/src/navigator/legacy.ts b/packages/components/src/navigator/legacy.ts
new file mode 100644
index 00000000000000..1caa5380fc049e
--- /dev/null
+++ b/packages/components/src/navigator/legacy.ts
@@ -0,0 +1,169 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as InternalNavigator } from './navigator/component';
+import { NavigatorScreen as InternalNavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton as InternalNavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton as InternalNavigatorBackButton } from './navigator-back-button/component';
+import { NavigatorToParentButton as InternalNavigatorToParentButton } from './navigator-to-parent-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between them
+ * (via the `NavigatorButton` and `NavigatorBackButton` components).
+ *
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorProvider = Object.assign( InternalNavigator, {
+	displayName: 'NavigatorProvider',
+} );
+
+/**
+ * The `NavigatorScreen` component represents a single view/screen/panel and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorButton` and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorScreen = Object.assign( InternalNavigatorScreen, {
+	displayName: 'NavigatorScreen',
+} );
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorButton = Object.assign( InternalNavigatorButton, {
+	displayName: 'NavigatorButton',
+} );
+
+/**
+ * The `NavigatorBackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorScreen` and the `NavigatorButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back (to parent)
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorBackButton = Object.assign( InternalNavigatorBackButton, {
+	displayName: 'NavigatorBackButton',
+} );
+
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
+ *
+ * @deprecated
+ */
+export const NavigatorToParentButton = Object.assign(
+	InternalNavigatorToParentButton,
+	{
+		displayName: 'NavigatorToParentButton',
+	}
+);
diff --git a/packages/components/src/navigator/navigator-back-button/README.md b/packages/components/src/navigator/navigator-back-button/README.md
deleted file mode 100644
index d1470276975979..00000000000000
--- a/packages/components/src/navigator/navigator-back-button/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# `NavigatorBackButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `onClick`: `React.MouseEventHandler< HTMLElement >`
-
-The callback called in response to a `click` event.
-
--   Required: No
-
-### `path`: `string`
-
-The path of the screen to navigate to.
-
--   Required: Yes
-
-### Inherited props
-
-`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 498096edd7d465..b5c4de7df78a85 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useNavigatorBackButton } from './hook';
 import type { NavigatorBackButtonProps } from '../types';
@@ -20,43 +21,7 @@ function UnconnectedNavigatorBackButton(
 	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
 }
 
-/**
- * The `NavigatorBackButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorBackButton = contextConnect(
 	UnconnectedNavigatorBackButton,
-	'NavigatorBackButton'
+	'Navigator.BackButton'
 );
-
-export default NavigatorBackButton;
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index 5e7adabf3d9bb7..d6fcd39647bff9 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -6,9 +6,10 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import Button from '../../button';
-import useNavigator from '../use-navigator';
+import { useNavigator } from '../use-navigator';
 import type { NavigatorBackButtonProps } from '../types';
 
 export function useNavigatorBackButton(
@@ -17,8 +18,9 @@ export function useNavigatorBackButton(
 	const {
 		onClick,
 		as = Button,
+
 		...otherProps
-	} = useContextSystem( props, 'NavigatorBackButton' );
+	} = useContextSystem( props, 'Navigator.BackButton' );
 
 	const { goBack } = useNavigator();
 	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
diff --git a/packages/components/src/navigator/navigator-back-button/index.ts b/packages/components/src/navigator/navigator-back-button/index.ts
deleted file mode 100644
index 9046e90350e278..00000000000000
--- a/packages/components/src/navigator/navigator-back-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NavigatorBackButton } from './component';
diff --git a/packages/components/src/navigator/navigator-button/README.md b/packages/components/src/navigator/navigator-button/README.md
deleted file mode 100644
index fc96c358cdb02e..00000000000000
--- a/packages/components/src/navigator/navigator-button/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `NavigatorButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `attributeName`: `string`
-
-The HTML attribute used to identify the `NavigatorButton`, which is used by `Navigator` to restore focus.
-
--   Required: No
--   Default: `id`
-
-### `onClick`: `React.MouseEventHandler< HTMLElement >`
-
-The callback called in response to a `click` event.
-
--   Required: No
-
-### `path`: `string`
-
-The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
-
--   Required: Yes
-
-### Inherited props
-
-`NavigatorButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href`.
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 2e446dac010c09..a6dc7963376723 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useNavigatorButton } from './hook';
 import type { NavigatorButtonProps } from '../types';
@@ -20,42 +21,7 @@ function UnconnectedNavigatorButton(
 	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
 }
 
-/**
- * The `NavigatorButton` component can be used to navigate to a screen and should
- * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorButton = contextConnect(
 	UnconnectedNavigatorButton,
-	'NavigatorButton'
+	'Navigator.Button'
 );
-
-export default NavigatorButton;
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 15d52d269b60a2..59d2aaa65662d7 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -7,9 +7,10 @@ import { escapeAttribute } from '@wordpress/escape-html';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import Button from '../../button';
-import useNavigator from '../use-navigator';
+import { useNavigator } from '../use-navigator';
 import type { NavigatorButtonProps } from '../types';
 
 const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
@@ -24,7 +25,7 @@ export function useNavigatorButton(
 		as = Button,
 		attributeName = 'id',
 		...otherProps
-	} = useContextSystem( props, 'NavigatorButton' );
+	} = useContextSystem( props, 'Navigator.Button' );
 
 	const escapedPath = escapeAttribute( path );
 
diff --git a/packages/components/src/navigator/navigator-button/index.ts b/packages/components/src/navigator/navigator-button/index.ts
deleted file mode 100644
index 74975a5e1b0c14..00000000000000
--- a/packages/components/src/navigator/navigator-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NavigatorButton } from './component';
diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md
deleted file mode 100644
index d552d2bb20634f..00000000000000
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# `NavigatorProvider`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this.
-
-## Usage
-
-```jsx
-import {
-  __experimentalNavigatorProvider as NavigatorProvider,
-  __experimentalNavigatorScreen as NavigatorScreen,
-  __experimentalNavigatorButton as NavigatorButton,
-  __experimentalNavigatorBackButton as NavigatorBackButton,
-} from '@wordpress/components';
-
-const MyNavigation = () => (
-  <NavigatorProvider initialPath="/">
-    <NavigatorScreen path="/">
-      <p>This is the home screen.</p>
-       <NavigatorButton path="/child">
-         Navigate to child screen.
-      </NavigatorButton>
-    </NavigatorScreen>
-
-    <NavigatorScreen path="/child">
-      <p>This is the child screen.</p>
-      <NavigatorBackButton>
-        Go back
-      </NavigatorBackButton>
-    </NavigatorScreen>
-  </NavigatorProvider>
-);
-```
-
-## Props
-
-The component accepts the following props:
-
-### `initialPath`: `string`
-
-The initial active path.
-
--   Required: No
-
-## The `navigator` object
-
-You can retrieve a `navigator` instance by using the `useNavigator` hook.
-
-The `navigator` instance has a few properties:
-
-### `goTo`: `( path: string, options: NavigateOptions ) => void`
-
-The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
-
-The available options are:
-
-- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back.
-
-### `goBack`: `() => void`
-
-The `goBack` function allows navigating to the previous path.
-
-### `location`: `NavigatorLocation`
-
-The `location` object represent the current location, and has a few properties:
-
-- `path`: `string`. The path associated to the location.
-- `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards in the location stack.
-- `isInitial`: `boolean`. A flag that is `true` only for the first (root) location in the location stack.
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
deleted file mode 100644
index 57b18f6d92dba0..00000000000000
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useState, useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
-import { useCx } from '../../utils/hooks/use-cx';
-import { View } from '../../view';
-import { NavigatorContext } from '../context';
-import type {
-	NavigatorProviderProps,
-	NavigatorLocation,
-	NavigatorContext as NavigatorContextType,
-} from '../types';
-
-function UnconnectedNavigatorProvider(
-	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
-	forwardedRef: ForwardedRef< any >
-) {
-	const { initialPath, children, className, ...otherProps } =
-		useContextSystem( props, 'NavigatorProvider' );
-
-	const [ locationHistory, setLocationHistory ] = useState<
-		NavigatorLocation[]
-	>( [
-		{
-			path: initialPath,
-		},
-	] );
-
-	const goTo: NavigatorContextType[ 'goTo' ] = useCallback(
-		( path, options = {} ) => {
-			setLocationHistory( [
-				...locationHistory,
-				{
-					...options,
-					path,
-					isBack: false,
-					hasRestoredFocus: false,
-				},
-			] );
-		},
-		[ locationHistory ]
-	);
-
-	const goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {
-		if ( locationHistory.length > 1 ) {
-			setLocationHistory( [
-				...locationHistory.slice( 0, -2 ),
-				{
-					...locationHistory[ locationHistory.length - 2 ],
-					isBack: true,
-					hasRestoredFocus: false,
-				},
-			] );
-		}
-	}, [ locationHistory ] );
-
-	const navigatorContextValue: NavigatorContextType = useMemo(
-		() => ( {
-			location: {
-				...locationHistory[ locationHistory.length - 1 ],
-				isInitial: locationHistory.length === 1,
-			},
-			goTo,
-			goBack,
-		} ),
-		[ locationHistory, goTo, goBack ]
-	);
-
-	const cx = useCx();
-	const classes = useMemo(
-		// Prevents horizontal overflow while animating screen transitions.
-		() => cx( css( { overflowX: 'hidden' } ), className ),
-		[ className, cx ]
-	);
-
-	return (
-		<View ref={ forwardedRef } className={ classes } { ...otherProps }>
-			<NavigatorContext.Provider value={ navigatorContextValue }>
-				{ children }
-			</NavigatorContext.Provider>
-		</View>
-	);
-}
-
-/**
- * The `NavigatorProvider` component allows rendering nested views/panels/menus
- * (via the `NavigatorScreen` component and navigate between these different
- * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
- * `useNavigator` hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
-export const NavigatorProvider = contextConnect(
-	UnconnectedNavigatorProvider,
-	'NavigatorProvider'
-);
-
-export default NavigatorProvider;
diff --git a/packages/components/src/navigator/navigator-provider/index.ts b/packages/components/src/navigator/navigator-provider/index.ts
deleted file mode 100644
index b9a330613ac847..00000000000000
--- a/packages/components/src/navigator/navigator-provider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NavigatorProvider } from './component';
diff --git a/packages/components/src/navigator/navigator-screen/README.md b/packages/components/src/navigator/navigator-screen/README.md
deleted file mode 100644
index 5ba5af44fe8c1a..00000000000000
--- a/packages/components/src/navigator/navigator-screen/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# `NavigatorScreen`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `path`: `string`
-
-The screen's path, matched against the current path stored in the navigator.
-
--   Required: Yes
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 266bd553e0a8d2..fe0d81b90a17be 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -2,107 +2,115 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { motion, MotionProps } from 'framer-motion';
-import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
 import {
-	useReducedMotion,
-	useMergeRefs,
-	usePrevious,
-} from '@wordpress/compose';
-import { isRTL } from '@wordpress/i18n';
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useId,
+} from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 import { escapeAttribute } from '@wordpress/escape-html';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
+import * as styles from '../styles';
 import type { NavigatorScreenProps } from '../types';
-
-const animationEnterDelay = 0;
-const animationEnterDuration = 0.14;
-const animationExitDuration = 0.14;
-const animationExitDelay = 0;
-
-// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
-// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
-type Props = Omit<
-	WordPressComponentProps< NavigatorScreenProps, 'div', false >,
-	keyof MotionProps
->;
+import { useScreenAnimatePresence } from './use-screen-animate-presence';
 
 function UnconnectedNavigatorScreen(
-	props: Props,
+	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { children, className, path, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorScreen'
-	);
+	if ( ! /^\//.test( props.path ) ) {
+		warning(
+			'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+		);
+	}
 
-	const prefersReducedMotion = useReducedMotion();
-	const { location } = useContext( NavigatorContext );
-	const isMatch = location.path === escapeAttribute( path );
+	const screenId = useId();
+
+	const {
+		children,
+		className,
+		path,
+		onAnimationEnd: onAnimationEndProp,
+		...otherProps
+	} = useContextSystem( props, 'Navigator.Screen' );
+
+	const { location, match, addScreen, removeScreen } =
+		useContext( NavigatorContext );
+	const { isInitial, isBack, focusTargetSelector, skipFocus } = location;
+
+	const isMatch = match === screenId;
 	const wrapperRef = useRef< HTMLDivElement >( null );
+	const skipAnimationAndFocusRestoration = !! isInitial && ! isBack;
 
-	const previousLocation = usePrevious( location );
+	// Register / unregister screen with the navigator context.
+	useEffect( () => {
+		const screen = {
+			id: screenId,
+			path: escapeAttribute( path ),
+		};
+		addScreen( screen );
+		return () => removeScreen( screen );
+	}, [ screenId, path, addScreen, removeScreen ] );
+
+	// Animation.
+	const { animationStyles, shouldRenderScreen, screenProps } =
+		useScreenAnimatePresence( {
+			isMatch,
+			isBack,
+			onAnimationEnd: onAnimationEndProp,
+			skipAnimation: skipAnimationAndFocusRestoration,
+		} );
 
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				css( {
-					// Ensures horizontal overflow is visually accessible.
-					overflowX: 'auto',
-					// In case the root has a height, it should not be exceeded.
-					maxHeight: '100%',
-				} ),
-				className
-			),
-		[ className, cx ]
+		() => cx( styles.navigatorScreen, animationStyles, className ),
+		[ className, cx, animationStyles ]
 	);
 
+	// Focus restoration
 	const locationRef = useRef( location );
-
 	useEffect( () => {
 		locationRef.current = location;
 	}, [ location ] );
-
-	// Focus restoration
-	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
+		const wrapperEl = wrapperRef.current;
 		// Only attempt to restore focus:
 		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
 		// - if focus hasn't already been restored for the current location
+		// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
 		if (
-			isInitialLocation ||
+			skipAnimationAndFocusRestoration ||
 			! isMatch ||
-			! wrapperRef.current ||
-			locationRef.current.hasRestoredFocus
+			! wrapperEl ||
+			locationRef.current.hasRestoredFocus ||
+			skipFocus
 		) {
 			return;
 		}
 
-		const activeElement = wrapperRef.current.ownerDocument.activeElement;
+		const activeElement = wrapperEl.ownerDocument.activeElement;
 
 		// If an element is already focused within the wrapper do not focus the
 		// element. This prevents inputs or buttons from losing focus unnecessarily.
-		if ( wrapperRef.current.contains( activeElement ) ) {
+		if ( wrapperEl.contains( activeElement ) ) {
 			return;
 		}
 
@@ -110,132 +118,42 @@ function UnconnectedNavigatorScreen(
 
 		// When navigating back, if a selector is provided, use it to look for the
 		// target element (assumed to be a node inside the current NavigatorScreen)
-		if ( location.isBack && previousLocation?.focusTargetSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				previousLocation.focusTargetSelector
-			);
+		if ( isBack && focusTargetSelector ) {
+			elementToFocus = wrapperEl.querySelector( focusTargetSelector );
 		}
 
 		// If the previous query didn't run or find any element to focus, fallback
 		// to the first tabbable element in the screen (or the screen itself).
 		if ( ! elementToFocus ) {
-			const firstTabbable = (
-				focus.tabbable.find( wrapperRef.current ) as HTMLElement[]
-			 )[ 0 ];
-			elementToFocus = firstTabbable ?? wrapperRef.current;
+			const [ firstTabbable ] = focus.tabbable.find( wrapperEl );
+			elementToFocus = firstTabbable ?? wrapperEl;
 		}
 
 		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
-		isInitialLocation,
+		skipAnimationAndFocusRestoration,
 		isMatch,
-		location.isBack,
-		previousLocation?.focusTargetSelector,
+		isBack,
+		focusTargetSelector,
+		skipFocus,
 	] );
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
-	if ( ! isMatch ) {
-		return null;
-	}
-
-	if ( prefersReducedMotion ) {
-		return (
-			<View
-				ref={ mergedWrapperRef }
-				className={ classes }
-				{ ...otherProps }
-			>
-				{ children }
-			</View>
-		);
-	}
-
-	const animate = {
-		opacity: 1,
-		transition: {
-			delay: animationEnterDelay,
-			duration: animationEnterDuration,
-			ease: 'easeInOut',
-		},
-		x: 0,
-	};
-	const initial = {
-		opacity: 0,
-		x:
-			( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )
-				? 50
-				: -50,
-	};
-	const exit = {
-		delay: animationExitDelay,
-		opacity: 0,
-		x:
-			( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )
-				? 50
-				: -50,
-		transition: {
-			duration: animationExitDuration,
-			ease: 'easeInOut',
-		},
-	};
-
-	const animatedProps = {
-		animate,
-		exit,
-		initial,
-	};
-
-	return (
-		<motion.div
+	return shouldRenderScreen ? (
+		<View
 			ref={ mergedWrapperRef }
 			className={ classes }
+			{ ...screenProps }
 			{ ...otherProps }
-			{ ...animatedProps }
 		>
 			{ children }
-		</motion.div>
-	);
+		</View>
+	) : null;
 }
 
-/**
- * The `NavigatorScreen` component represents a single view/screen/panel and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorScreen = contextConnect(
 	UnconnectedNavigatorScreen,
-	'NavigatorScreen'
+	'Navigator.Screen'
 );
-
-export default NavigatorScreen;
diff --git a/packages/components/src/navigator/navigator-screen/index.ts b/packages/components/src/navigator/navigator-screen/index.ts
deleted file mode 100644
index 9c9a40d435fff3..00000000000000
--- a/packages/components/src/navigator/navigator-screen/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as NavigatorScreen } from './component';
diff --git a/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
new file mode 100644
index 00000000000000..af5a47ee12df4c
--- /dev/null
+++ b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+
+// Possible values:
+// - 'INITIAL': the initial state
+// - 'ANIMATING_IN': start enter animation
+// - 'IN': enter animation has ended
+// - 'ANIMATING_OUT': start exit animation
+// - 'OUT': the exit animation has ended
+type AnimationStatus =
+	| 'INITIAL'
+	| 'ANIMATING_IN'
+	| 'IN'
+	| 'ANIMATING_OUT'
+	| 'OUT';
+
+// Allow an extra 20% of the total animation duration to account for potential
+// event loop delays.
+const ANIMATION_TIMEOUT_MARGIN = 1.2;
+
+const isEnterAnimation = (
+	animationDirection: 'end' | 'start',
+	animationStatus: AnimationStatus,
+	animationName: string
+) =>
+	animationStatus === 'ANIMATING_IN' &&
+	animationName === styles.ANIMATION_END_NAMES[ animationDirection ].in;
+
+const isExitAnimation = (
+	animationDirection: 'end' | 'start',
+	animationStatus: AnimationStatus,
+	animationName: string
+) =>
+	animationStatus === 'ANIMATING_OUT' &&
+	animationName === styles.ANIMATION_END_NAMES[ animationDirection ].out;
+
+export function useScreenAnimatePresence( {
+	isMatch,
+	skipAnimation,
+	isBack,
+	onAnimationEnd,
+}: {
+	isMatch: boolean;
+	skipAnimation: boolean;
+	isBack?: boolean;
+	onAnimationEnd?: React.AnimationEventHandler< Element >;
+} ) {
+	const isRTL = isRTLFn();
+	const prefersReducedMotion = useReducedMotion();
+
+	const [ animationStatus, setAnimationStatus ] =
+		useState< AnimationStatus >( 'INITIAL' );
+
+	// Start enter and exit animations when the screen is selected or deselected.
+	// The animation status is set to `IN` or `OUT` immediately if the animation
+	// should be skipped.
+	const becameSelected =
+		animationStatus !== 'ANIMATING_IN' &&
+		animationStatus !== 'IN' &&
+		isMatch;
+	const becameUnselected =
+		animationStatus !== 'ANIMATING_OUT' &&
+		animationStatus !== 'OUT' &&
+		! isMatch;
+	useLayoutEffect( () => {
+		if ( becameSelected ) {
+			setAnimationStatus(
+				skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'
+			);
+		} else if ( becameUnselected ) {
+			setAnimationStatus(
+				skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'
+			);
+		}
+	}, [
+		becameSelected,
+		becameUnselected,
+		skipAnimation,
+		prefersReducedMotion,
+	] );
+
+	// Animation attributes (derived state).
+	const animationDirection =
+		( isRTL && isBack ) || ( ! isRTL && ! isBack ) ? 'end' : 'start';
+	const isAnimatingIn = animationStatus === 'ANIMATING_IN';
+	const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
+	let animationType: 'in' | 'out' | undefined;
+	if ( isAnimatingIn ) {
+		animationType = 'in';
+	} else if ( isAnimatingOut ) {
+		animationType = 'out';
+	}
+
+	const onScreenAnimationEnd = useCallback(
+		( e: React.AnimationEvent< HTMLElement > ) => {
+			onAnimationEnd?.( e );
+
+			if (
+				isExitAnimation(
+					animationDirection,
+					animationStatus,
+					e.animationName
+				)
+			) {
+				// When the exit animation ends on an unselected screen, set the
+				// status to 'OUT' to remove the screen contents from the DOM.
+				setAnimationStatus( 'OUT' );
+			} else if (
+				isEnterAnimation(
+					animationDirection,
+					animationStatus,
+					e.animationName
+				)
+			) {
+				// When the enter animation ends on a selected screen, set the
+				// status to 'IN' to ensure the screen is rendered in the DOM.
+				setAnimationStatus( 'IN' );
+			}
+		},
+		[ onAnimationEnd, animationStatus, animationDirection ]
+	);
+
+	// Fallback timeout to ensure that the logic is applied even if the
+	// `animationend` event is not triggered.
+	useEffect( () => {
+		let animationTimeout: number | undefined;
+
+		if ( isAnimatingOut ) {
+			animationTimeout = window.setTimeout( () => {
+				setAnimationStatus( 'OUT' );
+				animationTimeout = undefined;
+			}, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN );
+		} else if ( isAnimatingIn ) {
+			animationTimeout = window.setTimeout( () => {
+				setAnimationStatus( 'IN' );
+				animationTimeout = undefined;
+			}, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN );
+		}
+
+		return () => {
+			if ( animationTimeout ) {
+				window.clearTimeout( animationTimeout );
+				animationTimeout = undefined;
+			}
+		};
+	}, [ isAnimatingOut, isAnimatingIn ] );
+
+	return {
+		animationStyles: styles.navigatorScreenAnimation,
+		// Render the screen's contents in the DOM not only when the screen is
+		// selected, but also while it is animating out.
+		shouldRenderScreen:
+			isMatch ||
+			animationStatus === 'IN' ||
+			animationStatus === 'ANIMATING_OUT',
+		screenProps: {
+			onAnimationEnd: onScreenAnimationEnd,
+			'data-animation-direction': animationDirection,
+			'data-animation-type': animationType,
+			'data-skip-animation': skipAnimation || undefined,
+		},
+	} as const;
+}
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
new file mode 100644
index 00000000000000..f1c2d27e2284a1
--- /dev/null
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { NavigatorBackButton } from '../navigator-back-button/component';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
+import type { NavigatorBackButtonProps } from '../types';
+
+function UnconnectedNavigatorToParentButton(
+	props: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,
+	forwardedRef: React.ForwardedRef< any >
+) {
+	deprecated( 'wp.components.NavigatorToParentButton', {
+		since: '6.7',
+		alternative: 'wp.components.Navigator.BackButton',
+	} );
+
+	return <NavigatorBackButton ref={ forwardedRef } { ...props } />;
+}
+
+/**
+ * @deprecated
+ */
+export const NavigatorToParentButton = contextConnect(
+	UnconnectedNavigatorToParentButton,
+	'Navigator.ToParentButton'
+);
diff --git a/packages/components/src/navigator/navigator/component.tsx b/packages/components/src/navigator/navigator/component.tsx
new file mode 100644
index 00000000000000..bd49b3682fb144
--- /dev/null
+++ b/packages/components/src/navigator/navigator/component.tsx
@@ -0,0 +1,291 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useReducer } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { patternMatch, findParent } from '../utils/router';
+import { View } from '../../view';
+import { NavigatorContext } from '../context';
+import * as styles from '../styles';
+import type {
+	NavigatorProps,
+	NavigatorLocation,
+	NavigatorContext as NavigatorContextType,
+	NavigateOptions,
+	Screen,
+	NavigateToParentOptions,
+} from '../types';
+import deprecated from '@wordpress/deprecated';
+
+type MatchedPath = ReturnType< typeof patternMatch >;
+
+type RouterAction =
+	| { type: 'add' | 'remove'; screen: Screen }
+	| { type: 'goto'; path: string; options?: NavigateOptions }
+	| { type: 'gotoparent'; options?: NavigateToParentOptions };
+
+type RouterState = {
+	initialPath: string;
+	screens: Screen[];
+	currentLocation: NavigatorLocation;
+	matchedPath: MatchedPath;
+	focusSelectors: Map< string, string >;
+};
+
+function addScreen( { screens }: RouterState, screen: Screen ) {
+	if ( screens.some( ( s ) => s.path === screen.path ) ) {
+		warning(
+			`Navigator: a screen with path ${ screen.path } already exists.
+The screen with id ${ screen.id } will not be added.`
+		);
+		return screens;
+	}
+	return [ ...screens, screen ];
+}
+
+function removeScreen( { screens }: RouterState, screen: Screen ) {
+	return screens.filter( ( s ) => s.id !== screen.id );
+}
+
+function goTo(
+	state: RouterState,
+	path: string,
+	options: NavigateOptions = {}
+) {
+	const { focusSelectors } = state;
+	const currentLocation = { ...state.currentLocation };
+
+	const {
+		// Default assignments
+		isBack = false,
+		skipFocus = false,
+		// Extract to avoid forwarding
+		replace,
+		focusTargetSelector,
+		// Rest
+		...restOptions
+	} = options;
+
+	if ( currentLocation.path === path ) {
+		return { currentLocation, focusSelectors };
+	}
+
+	let focusSelectorsCopy: typeof focusSelectors | undefined;
+	function getFocusSelectorsCopy() {
+		focusSelectorsCopy =
+			focusSelectorsCopy ?? new Map( state.focusSelectors );
+		return focusSelectorsCopy;
+	}
+
+	// Set a focus selector that will be used when navigating
+	// back to the current location.
+	if ( focusTargetSelector && currentLocation.path ) {
+		getFocusSelectorsCopy().set(
+			currentLocation.path,
+			focusTargetSelector
+		);
+	}
+
+	// Get the focus selector for the new location.
+	let currentFocusSelector;
+	if ( focusSelectors.get( path ) ) {
+		if ( isBack ) {
+			// Use the found focus selector only when navigating back.
+			currentFocusSelector = focusSelectors.get( path );
+		}
+		// Make a copy of the focusSelectors map to remove the focus selector
+		// only if necessary (ie. a focus selector was found).
+		getFocusSelectorsCopy().delete( path );
+	}
+
+	return {
+		currentLocation: {
+			...restOptions,
+			isInitial: false,
+			path,
+			isBack,
+			hasRestoredFocus: false,
+			focusTargetSelector: currentFocusSelector,
+			skipFocus,
+		},
+		focusSelectors: focusSelectorsCopy ?? focusSelectors,
+	};
+}
+
+function goToParent(
+	state: RouterState,
+	options: NavigateToParentOptions = {}
+) {
+	const { screens, focusSelectors } = state;
+	const currentLocation = { ...state.currentLocation };
+	const currentPath = currentLocation.path;
+	if ( currentPath === undefined ) {
+		return { currentLocation, focusSelectors };
+	}
+	const parentPath = findParent( currentPath, screens );
+	if ( parentPath === undefined ) {
+		return { currentLocation, focusSelectors };
+	}
+	return goTo( state, parentPath, {
+		...options,
+		isBack: true,
+	} );
+}
+
+function routerReducer(
+	state: RouterState,
+	action: RouterAction
+): RouterState {
+	let {
+		screens,
+		currentLocation,
+		matchedPath,
+		focusSelectors,
+		...restState
+	} = state;
+	switch ( action.type ) {
+		case 'add':
+			screens = addScreen( state, action.screen );
+			break;
+		case 'remove':
+			screens = removeScreen( state, action.screen );
+			break;
+		case 'goto':
+			( { currentLocation, focusSelectors } = goTo(
+				state,
+				action.path,
+				action.options
+			) );
+			break;
+		case 'gotoparent':
+			( { currentLocation, focusSelectors } = goToParent(
+				state,
+				action.options
+			) );
+			break;
+	}
+
+	// Return early in case there is no change
+	if (
+		screens === state.screens &&
+		currentLocation === state.currentLocation
+	) {
+		return state;
+	}
+
+	// Compute the matchedPath
+	const currentPath = currentLocation.path;
+	matchedPath =
+		currentPath !== undefined
+			? patternMatch( currentPath, screens )
+			: undefined;
+
+	// If the new match is the same as the previous match,
+	// return the previous one to keep immutability.
+	if (
+		matchedPath &&
+		state.matchedPath &&
+		matchedPath.id === state.matchedPath.id &&
+		isShallowEqual( matchedPath.params, state.matchedPath.params )
+	) {
+		matchedPath = state.matchedPath;
+	}
+
+	return {
+		...restState,
+		screens,
+		currentLocation,
+		matchedPath,
+		focusSelectors,
+	};
+}
+
+function UnconnectedNavigator(
+	props: WordPressComponentProps< NavigatorProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
+		initialPath: initialPathProp,
+		children,
+		className,
+		...otherProps
+	} = useContextSystem( props, 'Navigator' );
+
+	const [ routerState, dispatch ] = useReducer(
+		routerReducer,
+		initialPathProp,
+		( path ) => ( {
+			screens: [],
+			currentLocation: { path, isInitial: true },
+			matchedPath: undefined,
+			focusSelectors: new Map(),
+			initialPath: initialPathProp,
+		} )
+	);
+
+	// The methods are constant forever, create stable references to them.
+	const methods = useMemo(
+		() => ( {
+			// Note: calling goBack calls `goToParent` internally, as it was established
+			// that `goBack` should behave like `goToParent`, and `goToParent` should
+			// be marked as deprecated.
+			goBack: ( options: NavigateToParentOptions | undefined ) =>
+				dispatch( { type: 'gotoparent', options } ),
+			goTo: ( path: string, options?: NavigateOptions ) =>
+				dispatch( { type: 'goto', path, options } ),
+			goToParent: ( options: NavigateToParentOptions | undefined ) => {
+				deprecated( `wp.components.useNavigator().goToParent`, {
+					since: '6.7',
+					alternative: 'wp.components.useNavigator().goBack',
+				} );
+				dispatch( { type: 'gotoparent', options } );
+			},
+			addScreen: ( screen: Screen ) =>
+				dispatch( { type: 'add', screen } ),
+			removeScreen: ( screen: Screen ) =>
+				dispatch( { type: 'remove', screen } ),
+		} ),
+		[]
+	);
+
+	const { currentLocation, matchedPath } = routerState;
+
+	const navigatorContextValue: NavigatorContextType = useMemo(
+		() => ( {
+			location: currentLocation,
+			params: matchedPath?.params ?? {},
+			match: matchedPath?.id,
+			...methods,
+		} ),
+		[ currentLocation, matchedPath, methods ]
+	);
+
+	const cx = useCx();
+	const classes = useMemo(
+		() => cx( styles.navigatorWrapper, className ),
+		[ className, cx ]
+	);
+
+	return (
+		<View ref={ forwardedRef } className={ classes } { ...otherProps }>
+			<NavigatorContext.Provider value={ navigatorContextValue }>
+				{ children }
+			</NavigatorContext.Provider>
+		</View>
+	);
+}
+
+export const Navigator = contextConnect( UnconnectedNavigator, 'Navigator' );
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
new file mode 100644
index 00000000000000..0baf6a1c9cf5bf
--- /dev/null
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -0,0 +1,195 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { VStack } from '../../v-stack';
+import { HStack } from '../../h-stack';
+import { Navigator, useNavigator } from '../';
+
+const meta: Meta< typeof Navigator > = {
+	component: Navigator,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Screen: Navigator.Screen,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Button: Navigator.Button,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		BackButton: Navigator.BackButton,
+	},
+	title: 'Components/Navigation/Navigator',
+	id: 'components-navigator',
+	argTypes: {
+		as: { control: false },
+		children: { control: false },
+		initialPath: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+	decorators: [
+		( Story ) => {
+			return (
+				<>
+					<style>{ `
+					  /* The data-wp-component attribute is a private implementation
+						 * detail of the Navigator component. Do not use outside of
+						 * its source code.
+						 */
+						[data-wp-component="Navigator"] {
+							height: 250px;
+						}
+						[data-wp-component="Navigator.Screen"] {
+							padding: 8px;
+						}
+					` }</style>
+					<Story />
+				</>
+			);
+		},
+	],
+};
+export default meta;
+
+export const Default: StoryObj< typeof Navigator > = {
+	args: {
+		initialPath: '/',
+		children: (
+			<>
+				<Navigator.Screen path="/">
+					<h2>This is the home screen.</h2>
+
+					<VStack alignment="left">
+						<Navigator.Button variant="primary" path="/child">
+							Go to child screen.
+						</Navigator.Button>
+
+						<Navigator.Button variant="primary" path="/product/1">
+							Go to dynamic path screen with id 1.
+						</Navigator.Button>
+
+						<Navigator.Button variant="primary" path="/product/2">
+							Go to dynamic path screen with id 2.
+						</Navigator.Button>
+					</VStack>
+				</Navigator.Screen>
+
+				<Navigator.Screen path="/child">
+					<h2>This is the child screen.</h2>
+					<HStack spacing={ 2 } alignment="left">
+						<Navigator.BackButton variant="secondary">
+							Go back
+						</Navigator.BackButton>
+
+						<Navigator.Button
+							variant="primary"
+							path="/child/grandchild"
+						>
+							Go to grand child screen.
+						</Navigator.Button>
+					</HStack>
+				</Navigator.Screen>
+
+				<Navigator.Screen path="/child/grandchild">
+					<h2>This is the grand child screen.</h2>
+					<Navigator.BackButton variant="secondary">
+						Go back
+					</Navigator.BackButton>
+				</Navigator.Screen>
+
+				<Navigator.Screen path="/product/:id">
+					<DynamicScreen />
+				</Navigator.Screen>
+			</>
+		),
+	},
+};
+
+function DynamicScreen() {
+	const { params } = useNavigator();
+
+	return (
+		<>
+			<h2>This is the dynamic screen</h2>
+			<p>
+				This screen can parse params dynamically. The current id is:{ ' ' }
+				{ params.id }
+			</p>
+			<Navigator.BackButton variant="secondary">
+				Go back
+			</Navigator.BackButton>
+		</>
+	);
+}
+
+export const WithNestedInitialPath: StoryObj< typeof Navigator > = {
+	...Default,
+	args: {
+		...Default.args,
+		initialPath: '/child/grandchild',
+	},
+};
+
+const NavigatorButtonWithSkipFocus = ( {
+	path,
+	onClick,
+	...props
+}: React.ComponentProps< typeof Navigator.Button > ) => {
+	const { goTo } = useNavigator();
+
+	return (
+		<Button
+			{ ...props }
+			style={ {
+				marginInline: '8px',
+				...props.style,
+			} }
+			onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+				goTo( path, { skipFocus: true } );
+				onClick?.( e );
+			} }
+		/>
+	);
+};
+
+export const SkipFocus: StoryObj< typeof Navigator > = {
+	args: {
+		initialPath: '/',
+		children: (
+			<>
+				<div
+					style={ {
+						height: 150,
+						outline: '1px solid black',
+						outlineOffset: '-1px',
+						marginBlockEnd: '1rem',
+						display: 'contents',
+					} }
+				>
+					<Navigator.Screen path="/">
+						<h2>Home screen</h2>
+						<Navigator.Button variant="primary" path="/child">
+							Go to child screen.
+						</Navigator.Button>
+					</Navigator.Screen>
+
+					<Navigator.Screen path="/child">
+						<h2>Child screen</h2>
+						<Navigator.BackButton variant="secondary">
+							Go back to home screen
+						</Navigator.BackButton>
+					</Navigator.Screen>
+				</div>
+
+				<NavigatorButtonWithSkipFocus path="/child">
+					Go to child screen, but keep focus on this button
+				</NavigatorButtonWithSkipFocus>
+			</>
+		),
+	},
+};
diff --git a/packages/components/src/navigator/stories/index.tsx b/packages/components/src/navigator/stories/index.tsx
deleted file mode 100644
index a1f6e2fbf0c9a5..00000000000000
--- a/packages/components/src/navigator/stories/index.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Card, CardBody, CardFooter, CardHeader } from '../../card';
-import { HStack } from '../../h-stack';
-import Dropdown from '../../dropdown';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-} from '..';
-
-const meta: ComponentMeta< typeof NavigatorProvider > = {
-	component: NavigatorProvider,
-	title: 'Components (Experimental)/Navigator',
-	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
-	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
-		initialPath: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof NavigatorProvider > = ( {
-	style,
-	...props
-} ) => (
-	<NavigatorProvider
-		style={ { ...style, height: '100vh', maxHeight: '450px' } }
-		{ ...props }
-	>
-		<NavigatorScreen path="/">
-			<Card>
-				<CardBody>
-					<p>This is the home screen.</p>
-
-					<HStack justify="flex-start" wrap>
-						<NavigatorButton variant="secondary" path="/child">
-							Navigate to child screen.
-						</NavigatorButton>
-
-						<NavigatorButton
-							variant="secondary"
-							path="/overflow-child"
-						>
-							Navigate to screen with horizontal overflow.
-						</NavigatorButton>
-
-						<NavigatorButton variant="secondary" path="/stickies">
-							Navigate to screen with sticky content.
-						</NavigatorButton>
-
-						<Dropdown
-							renderToggle={ ( {
-								isOpen,
-								onToggle,
-							}: {
-								// TODO: remove once `Dropdown` is refactored to TypeScript
-								isOpen: boolean;
-								onToggle: () => void;
-							} ) => (
-								<Button
-									onClick={ onToggle }
-									aria-expanded={ isOpen }
-									variant="primary"
-								>
-									Open test dialog
-								</Button>
-							) }
-							renderContent={ () => (
-								<Card>
-									<CardHeader>Go</CardHeader>
-									<CardBody>Stuff</CardBody>
-								</Card>
-							) }
-						/>
-					</HStack>
-				</CardBody>
-			</Card>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/child">
-			<Card>
-				<CardBody>
-					<p>This is the child screen.</p>
-					<NavigatorBackButton variant="secondary">
-						Go back
-					</NavigatorBackButton>
-				</CardBody>
-			</Card>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/overflow-child">
-			<Card>
-				<CardBody>
-					<NavigatorBackButton variant="secondary">
-						Go back
-					</NavigatorBackButton>
-					<div
-						style={ {
-							display: 'inline-block',
-							background: 'papayawhip',
-						} }
-					>
-						<span
-							style={ {
-								color: 'palevioletred',
-								whiteSpace: 'nowrap',
-								fontSize: '42vw',
-							} }
-						>
-							¯\_(ツ)_/¯
-						</span>
-					</div>
-				</CardBody>
-			</Card>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/stickies">
-			<Card>
-				<CardHeader style={ getStickyStyles( { zIndex: 2 } ) }>
-					<NavigatorBackButton variant="secondary">
-						Go back
-					</NavigatorBackButton>
-				</CardHeader>
-				<CardBody>
-					<div
-						style={ getStickyStyles( {
-							top: 69,
-							bgColor: 'peachpuff',
-						} ) }
-					>
-						<h2>A wild sticky element appears</h2>
-					</div>
-					<MetaphorIpsum quantity={ 3 } />
-				</CardBody>
-				<CardBody>
-					<div
-						style={ getStickyStyles( {
-							top: 69,
-							bgColor: 'paleturquoise',
-						} ) }
-					>
-						<h2>Another wild sticky element appears</h2>
-					</div>
-					<MetaphorIpsum quantity={ 3 } />
-				</CardBody>
-				<CardFooter
-					style={ getStickyStyles( {
-						bgColor: 'mistyrose',
-					} ) }
-				>
-					<Button variant="primary">Primary noop</Button>
-				</CardFooter>
-			</Card>
-		</NavigatorScreen>
-	</NavigatorProvider>
-);
-
-export const Default: ComponentStory< typeof NavigatorProvider > =
-	Template.bind( {} );
-Default.args = {
-	initialPath: '/',
-};
-
-function getStickyStyles( {
-	bottom = 0,
-	bgColor = 'whitesmoke',
-	top = 0,
-	zIndex = 1,
-} ): React.CSSProperties {
-	return {
-		display: 'flex',
-		position: 'sticky',
-		top,
-		bottom,
-		zIndex,
-		backgroundColor: bgColor,
-	};
-}
-
-function MetaphorIpsum( { quantity }: { quantity: number } ) {
-	const list = [
-		'A loopy clarinet’s year comes with it the thought that the fenny step-son is an ophthalmologist. The literature would have us believe that a glabrate country is not but a rhythm. A beech is a rub from the right perspective. In ancient times few can name an unglossed walrus that isn’t an unspilt trial.',
-		'Authors often misinterpret the afterthought as a roseless mother-in-law, when in actuality it feels more like an uncapped thunderstorm. In recent years, some posit the tarry bottle to be less than acerb. They were lost without the unkissed timbale that composed their customer. A donna is a springtime breath.',
-		'It’s an undeniable fact, really; their museum was, in this moment, a snotty beef. The swordfishes could be said to resemble prowessed lasagnas. However, the rainier authority comes from a cureless soup. Unfortunately, that is wrong; on the contrary, the cover is a powder.',
-	];
-	quantity = Math.min( list.length, quantity );
-	return (
-		<>
-			{ list.slice( 0, quantity ).map( ( text, key ) => (
-				<p style={ { maxWidth: '20em' } } key={ key }>
-					{ text }
-				</p>
-			) ) }
-		</>
-	);
-}
diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
new file mode 100644
index 00000000000000..167d4ac07de3d6
--- /dev/null
+++ b/packages/components/src/navigator/styles.ts
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import { css, keyframes } from '@emotion/react';
+
+export const navigatorWrapper = css`
+	position: relative;
+	/* Prevents horizontal overflow while animating screen transitions */
+	overflow-x: clip;
+	/*
+	 * Mark this DOM subtree as isolated when it comes to layout calculations,
+	 * providing performance benefits.
+	 */
+	contain: layout;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	align-items: start;
+`;
+
+const fadeIn = keyframes( {
+	from: {
+		opacity: 0,
+	},
+} );
+
+const fadeOut = keyframes( {
+	to: {
+		opacity: 0,
+	},
+} );
+
+export const slideFromRight = keyframes( {
+	from: {
+		transform: 'translateX(100px)',
+	},
+} );
+
+export const slideToLeft = keyframes( {
+	to: {
+		transform: 'translateX(-80px)',
+	},
+} );
+
+export const slideFromLeft = keyframes( {
+	from: {
+		transform: 'translateX(-100px)',
+	},
+} );
+
+export const slideToRight = keyframes( {
+	to: {
+		transform: 'translateX(80px)',
+	},
+} );
+
+const FADE = {
+	DURATION: 70,
+	EASING: 'linear',
+	DELAY: {
+		IN: 70,
+		OUT: 40,
+	},
+};
+const SLIDE = {
+	DURATION: 300,
+	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
+export const TOTAL_ANIMATION_DURATION = {
+	IN: Math.max( FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION ),
+	OUT: Math.max( FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION ),
+};
+
+export const ANIMATION_END_NAMES = {
+	end: {
+		in: slideFromRight.name,
+		out: slideToLeft.name,
+	},
+	start: {
+		in: slideFromLeft.name,
+		out: slideToRight.name,
+	},
+};
+
+const ANIMATION = {
+	end: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromRight }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToLeft }
+		`,
+	},
+	start: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromLeft }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToRight }
+		`,
+	},
+} as const;
+export const navigatorScreenAnimation = css`
+	z-index: 1;
+
+	&[data-animation-type='out'] {
+		z-index: 0;
+	}
+
+	@media not ( prefers-reduced-motion ) {
+		&:not( [data-skip-animation] ) {
+			${ ( [ 'start', 'end' ] as const ).map( ( direction ) =>
+				( [ 'in', 'out' ] as const ).map(
+					( type ) => css`
+						&[data-animation-direction='${ direction }'][data-animation-type='${ type }'] {
+							animation: ${ ANIMATION[ direction ][ type ] };
+						}
+					`
+				)
+			) }
+		}
+	}
+`;
+
+export const navigatorScreen = css`
+	/* Ensures horizontal overflow is visually accessible */
+	overflow-x: auto;
+	/* In case the root has a height, it should not be exceeded */
+	max-height: 100%;
+	box-sizing: border-box;
+
+	position: relative;
+
+	grid-column: 1 / -1;
+	grid-row: 1 / -1;
+`;
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index be836f0152fc20..cab6e9a4cdadff 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ForwardedRef, ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -13,43 +13,23 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-} from '..';
-
-jest.mock( 'framer-motion', () => {
-	const actual = jest.requireActual( 'framer-motion' );
-	return {
-		__esModule: true,
-		...actual,
-		AnimatePresence:
-			( { children }: { children?: ReactNode } ) =>
-			() =>
-				<div>{ children }</div>,
-		motion: {
-			...actual.motion,
-			div: require( 'react' ).forwardRef(
-				(
-					{ children }: { children?: ReactNode },
-					ref: ForwardedRef< HTMLDivElement >
-				) => <div ref={ ref }>{ children }</div>
-			),
-		},
-	};
-} );
+import Button from '../../button';
+import { Navigator, useNavigator } from '..';
+import { NavigatorToParentButton } from '../legacy';
+import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
-	raw: ' "\'><=invalid_path',
-	escaped: " &quot;'&gt;<=invalid_path",
+	raw: '/ "\'><=invalid_path',
+	escaped: "/ &quot;'&gt;<=invalid_path",
 };
 
 const PATHS = {
 	HOME: '/',
 	CHILD: '/child',
 	NESTED: '/child/nested',
+	PRODUCT_PATTERN: '/product/:productId',
+	PRODUCT_1: '/product/1',
+	PRODUCT_2: '/product/2',
 	INVALID_HTML_ATTRIBUTE: INVALID_HTML_ATTRIBUTE.raw,
 	NOT_FOUND: '/not-found',
 };
@@ -58,6 +38,7 @@ const SCREEN_TEXT = {
 	home: 'This is the home screen.',
 	child: 'This is the child screen.',
 	nested: 'This is the nested screen.',
+	product: 'This is the product screen.',
 	invalidHtmlPath: 'This is the screen with an invalid HTML value as a path.',
 };
 
@@ -65,9 +46,13 @@ const BUTTON_TEXT = {
 	toNonExistingScreen: 'Navigate to non-existing screen.',
 	toChildScreen: 'Navigate to child screen.',
 	toNestedScreen: 'Navigate to nested screen.',
+	toProductScreen1: 'Navigate to product 1 screen.',
+	toProductScreen2: 'Navigate to product 2 screen.',
 	toInvalidHtmlPathScreen:
 		'Navigate to screen with an invalid HTML value as a path.',
 	back: 'Go back',
+	backUsingGoTo: 'Go back using goTo',
+	goToWithSkipFocus: 'Go to with skipFocus',
 };
 
 type CustomTestOnClickHandler = (
@@ -75,19 +60,21 @@ type CustomTestOnClickHandler = (
 		| {
 				type: 'goTo';
 				path: string;
+				options?: NavigateOptions;
 		  }
 		| { type: 'goBack' }
+		| { type: 'goToParent' }
 ) => void;
 
 function CustomNavigatorButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorButton
+		<Navigator.Button
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
@@ -98,20 +85,41 @@ function CustomNavigatorButton( {
 	);
 }
 
-function CustomNavigatorButtonWithFocusRestoration( {
+function CustomNavigatorGoToBackButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
+	const { goTo } = useNavigator();
 	return (
-		<NavigatorButton
+		<Button
 			onClick={ () => {
+				goTo( path, { isBack: true } );
+				// Used to spy on the values passed to `navigator.goTo`.
+				onClick?.( { type: 'goTo', path } );
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+function CustomNavigatorGoToSkipFocusButton( {
+	path,
+	onClick,
+	...props
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goTo } = useNavigator();
+	return (
+		<Button
+			onClick={ () => {
+				goTo( path, { skipFocus: true } );
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
 			} }
-			path={ path }
 			{ ...props }
 		/>
 	);
@@ -120,11 +128,14 @@ function CustomNavigatorButtonWithFocusRestoration( {
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorBackButton
+		<Navigator.BackButton
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );
@@ -134,6 +145,65 @@ function CustomNavigatorBackButton( {
 	);
 }
 
+function CustomNavigatorToParentButton( {
+	onClick,
+	...props
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	return (
+		<NavigatorToParentButton
+			onClick={ () => {
+				// Used to spy on the values passed to `navigator.goBack`.
+				onClick?.( { type: 'goToParent' } );
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+function CustomNavigatorToParentButtonAlternative( {
+	onClick,
+	children,
+}: {
+	children: React.ReactNode;
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goToParent } = useNavigator();
+	return (
+		<button
+			onClick={ () => {
+				goToParent();
+				// Used to spy on the values passed to `navigator.goBack`.
+				onClick?.( { type: 'goToParent' } );
+			} }
+		>
+			{ children }
+		</button>
+	);
+}
+
+const ProductScreen = ( {
+	onBackButtonClick,
+}: {
+	onBackButtonClick?: CustomTestOnClickHandler;
+} ) => {
+	const { params } = useNavigator();
+
+	return (
+		<Navigator.Screen path={ PATHS.PRODUCT_PATTERN }>
+			<p>{ SCREEN_TEXT.product }</p>
+			<p>Product ID is { params.productId }</p>
+			<CustomNavigatorBackButton onClick={ onBackButtonClick }>
+				{ BUTTON_TEXT.back }
+			</CustomNavigatorBackButton>
+		</Navigator.Screen>
+	);
+};
+
 const MyNavigation = ( {
 	initialPath = PATHS.HOME,
 	onNavigatorButtonClick,
@@ -145,9 +215,15 @@ const MyNavigation = ( {
 	const [ outerInputValue, setOuterInputValue ] = useState( '' );
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable home screen button</button>
 					<CustomNavigatorButton
 						path={ PATHS.NOT_FOUND }
 						onClick={ onNavigatorButtonClick }
@@ -160,22 +236,40 @@ const MyNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
+					<CustomNavigatorButton
+						path={ PATHS.PRODUCT_1 }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toProductScreen1 }
+					</CustomNavigatorButton>
+					<CustomNavigatorButton
+						path={ PATHS.PRODUCT_2 }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toProductScreen2 }
+					</CustomNavigatorButton>
 					<CustomNavigatorButton
 						path={ PATHS.INVALID_HTML_ATTRIBUTE }
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.toInvalidHtmlPathScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
-					<CustomNavigatorButtonWithFocusRestoration
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable child screen button</button>
+					<CustomNavigatorButton
 						path={ PATHS.NESTED }
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.toNestedScreen }
-					</CustomNavigatorButtonWithFocusRestoration>
+					</CustomNavigatorButton>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
@@ -192,28 +286,30 @@ const MyNavigation = ( {
 						} }
 						value={ innerInputValue }
 					/>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+				<ProductScreen onBackButtonClick={ onNavigatorButtonClick } />
+
+				<Navigator.Screen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
 					<p>{ SCREEN_TEXT.invalidHtmlPath }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-			</NavigatorProvider>
+				{ /* A `Navigator.Screen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
+			</Navigator>
 
 			<label htmlFor="test-input-outer">Outer input</label>
 			<input
@@ -229,6 +325,138 @@ const MyNavigation = ( {
 	);
 };
 
+const MyHierarchicalNavigation = ( {
+	initialPath = PATHS.HOME,
+	onNavigatorButtonClick,
+}: {
+	initialPath?: string;
+	onNavigatorButtonClick?: CustomTestOnClickHandler;
+} ) => {
+	return (
+		<>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
+					<p>{ SCREEN_TEXT.home }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable home screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.CHILD }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toChildScreen }
+					</CustomNavigatorButton>
+				</Navigator.Screen>
+
+				<Navigator.Screen path={ PATHS.CHILD }>
+					<p>{ SCREEN_TEXT.child }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable child screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.NESTED }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toNestedScreen }
+					</CustomNavigatorButton>
+					<CustomNavigatorBackButton
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorBackButton>
+				</Navigator.Screen>
+
+				<Navigator.Screen path={ PATHS.NESTED }>
+					<p>{ SCREEN_TEXT.nested }</p>
+					<CustomNavigatorBackButton
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorBackButton>
+					<CustomNavigatorGoToBackButton
+						path={ PATHS.CHILD }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.backUsingGoTo }
+					</CustomNavigatorGoToBackButton>
+				</Navigator.Screen>
+				<CustomNavigatorGoToSkipFocusButton
+					path={ PATHS.NESTED }
+					onClick={ onNavigatorButtonClick }
+				>
+					{ BUTTON_TEXT.goToWithSkipFocus }
+				</CustomNavigatorGoToSkipFocusButton>
+			</Navigator>
+		</>
+	);
+};
+
+const MyDeprecatedNavigation = ( {
+	initialPath = PATHS.HOME,
+	onNavigatorButtonClick,
+}: {
+	initialPath?: string;
+	onNavigatorButtonClick?: CustomTestOnClickHandler;
+} ) => {
+	return (
+		<>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
+					<p>{ SCREEN_TEXT.home }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable home screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.CHILD }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toChildScreen }
+					</CustomNavigatorButton>
+				</Navigator.Screen>
+
+				<Navigator.Screen path={ PATHS.CHILD }>
+					<p>{ SCREEN_TEXT.child }</p>
+					{ /*
+					 * A button useful to test focus restoration. This button is the first
+					 * tabbable item in the screen, but should not receive focus when
+					 * navigating to screen as a result of a backwards navigation.
+					 */ }
+					<button>First tabbable child screen button</button>
+					<CustomNavigatorButton
+						path={ PATHS.NESTED }
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.toNestedScreen }
+					</CustomNavigatorButton>
+					<CustomNavigatorToParentButton
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorToParentButton>
+				</Navigator.Screen>
+
+				<Navigator.Screen path={ PATHS.NESTED }>
+					<p>{ SCREEN_TEXT.nested }</p>
+					<CustomNavigatorToParentButtonAlternative
+						onClick={ onNavigatorButtonClick }
+					>
+						{ BUTTON_TEXT.back }
+					</CustomNavigatorToParentButtonAlternative>
+				</Navigator.Screen>
+			</Navigator>
+		</>
+	);
+};
+
 const getScreen = ( screenKey: keyof typeof SCREEN_TEXT ) =>
 	screen.getByText( SCREEN_TEXT[ screenKey ] );
 const queryScreen = ( screenKey: keyof typeof SCREEN_TEXT ) =>
@@ -302,9 +530,7 @@ describe( 'Navigator', () => {
 	it( 'should navigate across screens', async () => {
 		const spy = jest.fn();
 
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
 
@@ -371,12 +597,10 @@ describe( 'Navigator', () => {
 		} );
 	} );
 
-	it( 'should not rended anything if the path does not match any available screen', async () => {
+	it( 'should not render anything if the path does not match any available screen', async () => {
 		const spy = jest.fn();
 
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <MyNavigation onNavigatorButtonClick={ spy } /> );
 
@@ -400,10 +624,6 @@ describe( 'Navigator', () => {
 	} );
 
 	it( 'should escape the value of the `path` prop', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
 		render( <MyNavigation /> );
 
 		expect( getScreen( 'home' ) ).toBeInTheDocument();
@@ -413,31 +633,55 @@ describe( 'Navigator', () => {
 
 		// The following line tests the implementation details, but it's necessary
 		// as this would be otherwise transparent to the user.
+		// A potential way would be to check if an invalid HTML attribute could
+		// be detected in the tests (by JSDom or any other plugin). We could then
+		// make sure that an invalid path would not error because it's escaped
+		// correctly.
 		expect(
 			getNavigationButton( 'toInvalidHtmlPathScreen' )
 		).toHaveAttribute( 'id', INVALID_HTML_ATTRIBUTE.escaped );
+	} );
 
-		// Navigate to screen with an invalid HTML value for its `path`.
-		await user.click( getNavigationButton( 'toInvalidHtmlPathScreen' ) );
+	it( 'should warn if the `path` prop does not follow the required format', () => {
+		render( <Navigator.Screen path="not-valid">Test</Navigator.Screen> );
 
-		expect( getScreen( 'invalidHtmlPath' ) ).toBeInTheDocument();
-		expect( getNavigationButton( 'back' ) ).toBeInTheDocument();
+		expect( console ).toHaveWarnedWith(
+			'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+		);
+	} );
+
+	it( 'should match correctly paths with named arguments', async () => {
+		const user = userEvent.setup();
+
+		render( <MyNavigation /> );
+
+		expect( getScreen( 'home' ) ).toBeInTheDocument();
+
+		// Navigate to Product 1 screen
+		await user.click( getNavigationButton( 'toProductScreen1' ) );
+
+		expect( getScreen( 'product' ) ).toBeInTheDocument();
 
-		// Navigate back to home screen, check that the focus restoration selector
-		// worked correctly despite the escaping.
+		// Check that named parameter is extracted correctly
+		expect( screen.getByText( 'Product ID is 1' ) ).toBeInTheDocument();
+
+		// Navigate back to home screen
 		await user.click( getNavigationButton( 'back' ) );
 
 		expect( getScreen( 'home' ) ).toBeInTheDocument();
-		expect(
-			getNavigationButton( 'toInvalidHtmlPathScreen' )
-		).toHaveFocus();
+
+		// Navigate to Product 2 screen
+		await user.click( getNavigationButton( 'toProductScreen2' ) );
+
+		expect( getScreen( 'product' ) ).toBeInTheDocument();
+
+		// Check that named parameter is extracted correctly
+		expect( screen.getByText( 'Product ID is 2' ) ).toBeInTheDocument();
 	} );
 
 	describe( 'focus management', () => {
 		it( 'should restore focus correctly', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <MyNavigation /> );
 
@@ -445,7 +689,11 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'toChildScreen' ) );
 
 			// The first tabbable element receives focus.
-			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
 
 			// Navigate to nested screen.
 			await user.click( getNavigationButton( 'toNestedScreen' ) );
@@ -456,20 +704,33 @@ describe( 'Navigator', () => {
 			// Navigate back to child screen.
 			await user.click( getNavigationButton( 'back' ) );
 
-			// The first tabbable element receives focus.
+			// Focus is restored on the last element that had focus when the
+			// navigation away from the screen occurred.
 			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
 
-			// Navigate back to home screen, check that focus was correctly restored.
+			// Navigate back to home screen.
 			await user.click( getNavigationButton( 'back' ) );
 
-			// The first tabbable element receives focus.
+			// Focus is restored on the last element that had focus when the
+			// navigation away from the screen occurred.
 			expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus();
+
+			// Navigate to product screen for product 2
+			await user.click( getNavigationButton( 'toProductScreen2' ) );
+
+			// The first tabbable element receives focus.
+			expect( getNavigationButton( 'back' ) ).toHaveFocus();
+
+			// Navigate back to home screen.
+			await user.click( getNavigationButton( 'back' ) );
+
+			// Focus is restored on the last element that had focus when the
+			// navigation away from the screen occurred.
+			expect( getNavigationButton( 'toProductScreen2' ) ).toHaveFocus();
 		} );
 
 		it( 'should keep focus on an active element inside navigator, while re-rendering', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <MyNavigation /> );
 
@@ -477,7 +738,11 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'toChildScreen' ) );
 
 			// The first tabbable element receives focus.
-			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
 
 			// Interact with the inner input.
 			// The focus should stay on the input element.
@@ -487,9 +752,7 @@ describe( 'Navigator', () => {
 		} );
 
 		it( 'should keep focus on an active element outside navigator, while re-rendering', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <MyNavigation /> );
 
@@ -497,7 +760,11 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'toChildScreen' ) );
 
 			// The first tabbable element receives focus.
-			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
 
 			// Interact with the outer input.
 			// The focus should stay on the input element.
@@ -505,5 +772,139 @@ describe( 'Navigator', () => {
 			await user.type( outerInput, 'd' );
 			expect( outerInput ).toHaveFocus();
 		} );
+
+		it( 'should restore focus correctly even when the `path` needs to be escaped', async () => {
+			const user = userEvent.setup();
+
+			render( <MyNavigation /> );
+
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+
+			// Navigate to screen with an invalid HTML value for its `path`.
+			await user.click(
+				getNavigationButton( 'toInvalidHtmlPathScreen' )
+			);
+
+			expect( getScreen( 'invalidHtmlPath' ) ).toBeInTheDocument();
+
+			// Navigate back to home screen, check that the focus restoration selector
+			// worked correctly despite the escaping.
+			await user.click( getNavigationButton( 'back' ) );
+
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+			expect(
+				getNavigationButton( 'toInvalidHtmlPathScreen' )
+			).toHaveFocus();
+		} );
+
+		it( 'should restore focus while using goTo and goToParent', async () => {
+			const user = userEvent.setup();
+
+			render( <MyHierarchicalNavigation /> );
+
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+
+			// Navigate to child screen.
+			await user.click( getNavigationButton( 'toChildScreen' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+
+			// Navigate to nested screen.
+			await user.click( getNavigationButton( 'toNestedScreen' ) );
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+			expect( getNavigationButton( 'back' ) ).toBeInTheDocument();
+
+			// Navigate back to child screen using the back button.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
+
+			// Re navigate to nested screen.
+			await user.click( getNavigationButton( 'toNestedScreen' ) );
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+			expect(
+				getNavigationButton( 'backUsingGoTo' )
+			).toBeInTheDocument();
+
+			// Navigate back to child screen using the go to button.
+			await user.click( getNavigationButton( 'backUsingGoTo' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			expect( getNavigationButton( 'toNestedScreen' ) ).toHaveFocus();
+
+			// Navigate back to home screen.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus();
+		} );
+
+		it( 'should skip focus based on location `skipFocus` option', async () => {
+			const user = userEvent.setup();
+			render( <MyHierarchicalNavigation /> );
+
+			// Navigate to child screen with skipFocus.
+			await user.click( getNavigationButton( 'goToWithSkipFocus' ) );
+			expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// The clicked button should remain focused.
+			expect( getNavigationButton( 'goToWithSkipFocus' ) ).toHaveFocus();
+
+			// Navigate back to parent screen.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			// The first tabbable element receives focus.
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+		} );
+	} );
+
+	describe( 'deprecated APIs', () => {
+		it( 'should log a deprecation notice when using the NavigatorToParentButton component', async () => {
+			const user = userEvent.setup();
+
+			render( <MyDeprecatedNavigation initialPath={ PATHS.CHILD } /> );
+
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+
+			// Navigate back to home screen.
+			// The first tabbable element receives focus, since focus restoration
+			// it not possible (there was no forward navigation).
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'home' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable home screen button',
+				} )
+			).toHaveFocus();
+
+			// Rendering `NavigatorToParentButton` logs a deprecation notice
+			expect( console ).toHaveWarnedWith(
+				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.'
+			);
+		} );
+
+		it( 'should log a deprecation notice when using the useNavigator().goToParent() function', async () => {
+			const user = userEvent.setup();
+
+			render( <MyDeprecatedNavigation initialPath={ PATHS.NESTED } /> );
+
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// Navigate back to child screen using the back button.
+			// The first tabbable element receives focus, since focus restoration
+			// it not possible (there was no forward navigation).
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+
+			expect( console ).toHaveWarnedWith(
+				'wp.components.useNavigator().goToParent is deprecated since version 6.7. Please use wp.components.useNavigator().goBack instead.'
+			);
+		} );
 	} );
 } );
diff --git a/packages/components/src/navigator/test/router.ts b/packages/components/src/navigator/test/router.ts
new file mode 100644
index 00000000000000..50e05fed47bb7c
--- /dev/null
+++ b/packages/components/src/navigator/test/router.ts
@@ -0,0 +1,122 @@
+/**
+ * Internal dependencies
+ */
+import { patternMatch, findParent } from '../utils/router';
+
+describe( 'patternMatch', () => {
+	it( 'should return undefined if not pattern is matched', () => {
+		const result = patternMatch( '/test', [ { id: 'route', path: '/' } ] );
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'should match a pattern with no params', () => {
+		const result = patternMatch( '/test', [
+			{ id: 'route', path: '/test' },
+		] );
+		expect( result ).toEqual( { id: 'route', params: {} } );
+	} );
+
+	it( 'should match a pattern with params', () => {
+		const result = patternMatch( '/test/123', [
+			{ id: 'route', path: '/test/:id' },
+		] );
+		expect( result ).toEqual( { id: 'route', params: { id: '123' } } );
+	} );
+
+	it( 'should match the first pattern in case of ambiguity', () => {
+		const result = patternMatch( '/test/123', [
+			{ id: 'route1', path: '/test/:id' },
+			{ id: 'route2', path: '/test/123' },
+		] );
+		expect( result ).toEqual( { id: 'route1', params: { id: '123' } } );
+	} );
+
+	it( 'should match a pattern with optional params', () => {
+		const result = patternMatch( '/test', [
+			{ id: 'route', path: '/test/:id?' },
+		] );
+		expect( result ).toEqual( { id: 'route', params: {} } );
+	} );
+
+	it( 'should return an array of matches for the same param', () => {
+		const result = patternMatch( '/some/basic/route', [
+			{ id: 'route', path: '/:test+' },
+		] );
+		expect( result ).toEqual( {
+			id: 'route',
+			params: { test: [ 'some', 'basic', 'route' ] },
+		} );
+	} );
+} );
+
+describe( 'findParent', () => {
+	it( 'should return undefined if no parent is found', () => {
+		const result = findParent( '/test', [
+			{ id: 'route', path: '/test' },
+		] );
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'should return the parent path', () => {
+		const result = findParent( '/test', [
+			{ id: 'route1', path: '/test' },
+			{ id: 'route2', path: '/' },
+		] );
+		expect( result ).toEqual( '/' );
+	} );
+
+	it( 'should return to another parent path', () => {
+		const result = findParent( '/test/123', [
+			{ id: 'route1', path: '/test/:id' },
+			{ id: 'route2', path: '/test' },
+		] );
+		expect( result ).toEqual( '/test' );
+	} );
+
+	it( 'should return the parent path with params', () => {
+		const result = findParent( '/test/123/456', [
+			{ id: 'route1', path: '/test/:id/:subId' },
+			{ id: 'route2', path: '/test/:id' },
+		] );
+		expect( result ).toEqual( '/test/123' );
+	} );
+
+	it( 'should return the parent path with optional params', () => {
+		const result = findParent( '/test/123', [
+			{ id: 'route', path: '/test/:id?' },
+		] );
+		expect( result ).toEqual( '/test' );
+	} );
+
+	it( 'should return the grand parent if no parent found', () => {
+		const result = findParent( '/test/123/456', [
+			{ id: 'route1', path: '/test/:id/:subId' },
+			{ id: 'route2', path: '/test' },
+		] );
+		expect( result ).toEqual( '/test' );
+	} );
+
+	it( 'should return the root when no grand parent found', () => {
+		const result = findParent( '/test/nested/path', [
+			{ id: 'route1', path: '/other-path' },
+			{ id: 'route2', path: '/yet-another-path' },
+			{ id: 'root', path: '/' },
+		] );
+		expect( result ).toEqual( '/' );
+	} );
+
+	it( 'should return undefined when no potential parent found', () => {
+		const result = findParent( '/test/nested/path', [
+			{ id: 'route1', path: '/other-path' },
+			{ id: 'route2', path: '/yet-another-path' },
+		] );
+		expect( result ).toBeUndefined();
+	} );
+
+	it( 'should return undefined for non supported paths', () => {
+		const result = findParent( 'this-is-a-path', [
+			{ id: 'route', path: '/' },
+		] );
+		expect( result ).toBeUndefined();
+	} );
+} );
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 0b1a6a077ea7a0..aeb5fd3b12c7fb 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -3,27 +3,90 @@
  */
 import type { ReactNode } from 'react';
 
-type NavigateOptions = {
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+
+export type MatchParams = Record< string, string | string[] >;
+
+export type NavigateOptions = {
+	/**
+	 * Specify the CSS selector used to restore focus on an given element when
+	 * navigating back. When not provided, the component will attempt to restore
+	 * focus on the element that originated the forward navigation.
+	 */
 	focusTargetSelector?: string;
+	/**
+	 * Whether the navigation is a backwards navigation. This enables focus
+	 * restoration (when possible), and causes the animation to be backwards.
+	 */
+	isBack?: boolean;
+	/**
+	 * Opt out of focus management. Useful when the consumer of the component
+	 * wants to manage focus themselves.
+	 */
+	skipFocus?: boolean;
+	/**
+	 * Note: this option is deprecated and currently doesn't have any effect.
+	 * @deprecated
+	 * @ignore
+	 */
+	replace?: boolean;
 };
 
+export type NavigateToParentOptions = Omit< NavigateOptions, 'isBack' >;
+
 export type NavigatorLocation = NavigateOptions & {
+	/**
+	 * Whether the current location is the initial one (ie. first in the stack).
+	 */
 	isInitial?: boolean;
-	isBack?: boolean;
+	/**
+	 * The path associated to the location.
+	 */
 	path?: string;
+	/**
+	 * Whether focus was already restored for this location (in case of
+	 * backwards navigation).
+	 */
 	hasRestoredFocus?: boolean;
 };
 
-export type NavigatorContext = {
+// Returned by the `useNavigator` hook.
+export type Navigator = {
+	/**
+	 * The current location.
+	 */
 	location: NavigatorLocation;
+	/**
+	 * Params associated with the current location
+	 */
+	params: MatchParams;
+	/**
+	 * Navigate to a new location.
+	 */
 	goTo: ( path: string, options?: NavigateOptions ) => void;
-	goBack: () => void;
+	/**
+	 * Go back to the parent location (ie. "/some/path" will navigate back
+	 * to "/some")
+	 */
+	goBack: ( options?: NavigateToParentOptions ) => void;
+	/**
+	 * _Note: This function is deprecated. Please use `goBack` instead._
+	 * @deprecated
+	 * @ignore
+	 */
+	goToParent: ( options?: NavigateToParentOptions ) => void;
 };
 
-// Returned by the `useNavigator` hook.
-export type Navigator = NavigatorContext;
+export type NavigatorContext = Navigator & {
+	addScreen: ( screen: Screen ) => void;
+	removeScreen: ( screen: Screen ) => void;
+	match?: string;
+};
 
-export type NavigatorProviderProps = {
+export type NavigatorProps = {
 	/**
 	 * The initial active path.
 	 */
@@ -37,6 +100,24 @@ export type NavigatorProviderProps = {
 export type NavigatorScreenProps = {
 	/**
 	 * The screen's path, matched against the current path stored in the navigator.
+	 *
+	 * `Navigator` assumes that screens are organized hierarchically according
+	 * to their `path`, which should follow a URL-like scheme where each path
+	 * segment starts with and is separated by the `/` character.
+	 *
+	 * `Navigator` will treat "back" navigations as going to the parent screen —
+	 * it is, therefore, the responsibility of the consumer of the component to
+	 * create the correct screen hierarchy.
+	 *
+	 * For example:
+	 *  - `/` is the root of all paths. There should always be a screen with
+	 *    `path="/"`;
+	 *  - `/parent/child` is a child of `/parent`;
+	 *  - `/parent/child/grand-child` is a child of `/parent/child`;
+	 *  - `/parent/:param` is a child of `/parent` as well;
+	 *  - if the current screen has a `path="/parent/child/grand-child"`, when
+	 *    going "back" `Navigator` will try to recursively navigate the path
+	 *    hierarchy until a matching screen (or the root `/`) is found.
 	 */
 	path: string;
 	/**
@@ -45,17 +126,9 @@ export type NavigatorScreenProps = {
 	children: ReactNode;
 };
 
-type ButtonProps = {
-	// TODO: should also extend `Button` prop types once the `Button` component
-	// is refactored to TypeScript.
-	variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
-};
-export type NavigatorBackButtonProps = Omit< ButtonProps, 'href' > & {
-	/**
-	 * The children elements.
-	 */
-	children: ReactNode;
-};
+export type NavigatorBackButtonProps = ButtonAsButtonProps;
+
+export type NavigatorToParentButtonProps = NavigatorBackButtonProps;
 
 export type NavigatorButtonProps = NavigatorBackButtonProps & {
 	/**
@@ -71,3 +144,8 @@ export type NavigatorButtonProps = NavigatorBackButtonProps & {
 	 */
 	attributeName?: string;
 };
+
+export type Screen = {
+	id: string;
+	path: string;
+};
diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
index 052be3d0be498a..1ea99f3f1c857d 100644
--- a/packages/components/src/navigator/use-navigator.ts
+++ b/packages/components/src/navigator/use-navigator.ts
@@ -10,16 +10,20 @@ import { NavigatorContext } from './context';
 import type { Navigator } from './types';
 
 /**
- * Retrieves a `navigator` instance.
+ * Retrieves a `navigator` instance. This hook provides advanced functionality,
+ * such as imperatively navigating to a new location (with options like
+ * navigating back or skipping focus restoration) and accessing the current
+ * location and path parameters.
  */
-function useNavigator(): Navigator {
-	const { location, goTo, goBack } = useContext( NavigatorContext );
+export function useNavigator(): Navigator {
+	const { location, params, goTo, goBack, goToParent } =
+		useContext( NavigatorContext );
 
 	return {
 		location,
 		goTo,
 		goBack,
+		goToParent,
+		params,
 	};
 }
-
-export default useNavigator;
diff --git a/packages/components/src/navigator/utils/router.ts b/packages/components/src/navigator/utils/router.ts
new file mode 100644
index 00000000000000..6ff5be66661f98
--- /dev/null
+++ b/packages/components/src/navigator/utils/router.ts
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { match } from 'path-to-regexp';
+
+/**
+ * Internal dependencies
+ */
+import type { Screen, MatchParams } from '../types';
+
+function matchPath( path: string, pattern: string ) {
+	const matchingFunction = match< MatchParams >( pattern, {
+		decode: decodeURIComponent,
+	} );
+	return matchingFunction( path );
+}
+
+export function patternMatch( path: string, screens: Screen[] ) {
+	for ( const screen of screens ) {
+		const matched = matchPath( path, screen.path );
+		if ( matched ) {
+			return { params: matched.params, id: screen.id };
+		}
+	}
+
+	return undefined;
+}
+
+export function findParent( path: string, screens: Screen[] ) {
+	if ( ! path.startsWith( '/' ) ) {
+		return undefined;
+	}
+	const pathParts = path.split( '/' );
+	let parentPath;
+	while ( pathParts.length > 1 && parentPath === undefined ) {
+		pathParts.pop();
+		const potentialParentPath =
+			pathParts.join( '/' ) === '' ? '/' : pathParts.join( '/' );
+		if (
+			screens.find( ( screen ) => {
+				return matchPath( potentialParentPath, screen.path ) !== false;
+			} )
+		) {
+			parentPath = potentialParentPath;
+		}
+	}
+
+	return parentPath;
+}
diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
index 5cda6d71266c84..2efb8276cb7584 100644
--- a/packages/components/src/notice/README.md
+++ b/packages/components/src/notice/README.md
@@ -4,74 +4,56 @@ Use Notices to communicate prominent messages to the user.
 
 ![Notice component](https://make.wordpress.org/design/files/2019/03/Notice-Screenshot-alt.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 A Notice displays a succinct message. It can also offer the user options, like viewing a published post or updating a setting, and requires a user action to be dismissed.
 
 Use Notices to communicate things that are important but don’t necessarily require action — a user can keep using the product even if they don’t choose to act on a Notice. They are less interruptive than a Modal.
 
-### Anatomy
-
-![Diagram of a Notice component with numbered labels](https://make.wordpress.org/design/files/2019/03/Notice-Anatomy.png)
-
-1. Container (status indicated with color)
-2. Icon (optional)
-3. Message
-4. Dismiss icon (optional)
-
 ### Usage
 
 Notices display at the top of the screen, below any toolbars anchored to the top of the page. They’re persistent and non-modal. Since they don’t overlay the content, users can ignore or dismiss them, and choose when to interact with them.
 
-![](https://make.wordpress.org/design/files/2019/03/Notice-States.png)
-
 Notices are color-coded to indicate the type of message being communicated:
 
--   **Default** notices have **no background**.
--   **Informational** notices are **blue** by default.
-    - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
--   **Success** notices are **green.**
--   **Warning** notices are **yellow\*\***.\*\*
--   **Error** notices are **red.**
+- **Informational** notices are **blue** by default.
+- If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
+- **Success** notices are **green.**
+- **Warning** notices are **yellow\*\***.\*\*
+- **Error** notices are **red.**
 
 If an icon is included in the Notice, it should be color-coded to match the Notice state.
 
+### Do's and Don'ts
+**Do** use a Notice when you want to communicate a message of medium importance.
+
 ![A success Notice for updating a post](https://make.wordpress.org/design/files/2019/03/Notice-Do-1-alt.png)
 
-**Do**
-Do use a Notice when you want to communicate a message of medium importance.
+---
+**Don’t** use a Notice for a message that requires immediate attention and action from the user. Use a Modal for this instead.
 
 ![A Notice that requires an immediate action](https://make.wordpress.org/design/files/2019/03/Notice-Dont-1-alt.png)
 
-**Don’t**
-Don't use a Notice for a message that requires immediate attention and action from the user. Use a Modal for this instead.
+---
+**Do** display Notices at the top of the screen, below any toolbars.
 
 ![A success Notice for publishing a post](https://make.wordpress.org/design/files/2019/03/Notice-Do-2-alt.png)
 
-**Do**
-Do display Notices at the top of the screen, below any toolbars.
+---
+**Don’t** show Notices on top of toolbars.
 
 ![A success Notice on top of the editor toolbar](https://make.wordpress.org/design/files/2019/03/Notice-Dont-2-alt.png)
 
-**Don’t**
-Don't show Notices on top of toolbars.
+---
+**Do** use color to indicate the type of message being communicated.
 
 ![An error Notice using red](https://make.wordpress.org/design/files/2019/03/Notice-Do-3-alt.png)
 
-**Do**
-Do use color to indicate the type of message being communicated.
+---
+**Don’t** apply any colors other than those for Warnings, Success, or Errors.
 
 ![An error Notice using purple](https://make.wordpress.org/design/files/2019/03/Notice-Dont-3-alt.png)
 
-**Don’t**
-Don't apply any colors other than those for Warnings, Success, or Errors.
-
 ## Development guidelines
 
 ### Usage
@@ -79,6 +61,8 @@ Don't apply any colors other than those for Warnings, Success, or Errors.
 To display a plain notice, pass `Notice` a string:
 
 ```jsx
+import { Notice } from `@wordpress/components`;
+
 const MyNotice = () => (
 	<Notice status="error">An unknown error occurred.</Notice>
 );
@@ -87,6 +71,8 @@ const MyNotice = () => (
 For more complex markup, you can pass any JSX element:
 
 ```jsx
+import { Notice } from `@wordpress/components`;
+
 const MyNotice = () => (
 	<Notice status="error">
 		<p>
@@ -96,21 +82,76 @@ const MyNotice = () => (
 );
 ```
 
-#### Props
+### Props
 
 The following props are used to control the behavior of the component.
 
--   `children`: (string) The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
--   `spokenMessage`: (string) Used to provide a custom spoken message in place of the `children` default.
--   `status`: (string) can be `warning` (yellow), `success` (green), `error` (red), or `info`. Defaults to `info`.
--   `onRemove`: function called when dismissing the notice
--   `politeness`: (string) A politeness level for the notice's spoken message. Should be provided as one of the valid options for [an `aria-live` attribute value](https://www.w3.org/TR/wai-aria-1.1/#aria-live). If not provided, a sensible default is used based on the notice status. Note that this value should be considered a suggestion; assistive technologies may override it based on internal heuristics.
-    -   A value of `'assertive'` is to be used for important, and usually time-sensitive, information. It will interrupt anything else the screen reader is announcing in that moment.
-    -   A value of `'polite'` is to be used for advisory information. It should not interrupt what the screen reader is announcing in that moment (the "speech queue") or interrupt the current task.
--   `isDismissible`: (boolean) defaults to true, whether the notice should be dismissible or not
--   `onDismiss` : callback function which is executed when the notice is dismissed. It is distinct from onRemove, which _looks_ like a callback but is actually the function to call to remove the notice from the UI.
--   `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. A `className` property can be used to add custom classes to the button styles. The default appearance of the button is inferred based on whether `url` or `onClick` are provided, rendering the button as a link if appropriate. A `noDefaultClasses` property value of `true` will remove all default styling. You can denote a primary button action for a notice by passing the `variant` property with a value of `primary`.
+#### `children`: `ReactNode`
+
+The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
+
+- Required: Yes
+
+#### `spokenMessage`: `ReactNode`
+
+Used to provide a custom spoken message in place of the `children` default.
+
+- Required: No
+- Default: `children`
+
+#### `status`: `'warning' | 'success' | 'error' | 'info'`
+
+Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue, but if there is a parent Theme component with an accent color prop, the notice will take on that color instead.
+
+- Required: No
+- Default: `info`
+
+#### `onRemove`: `() => void`
+
+A function called to dismiss/remove the notice.
+
+- Required: No
+- Default: `noop`
+
+#### `politeness`: `'polite' | 'assertive'`
+
+A politeness level for the notice's spoken message. Should be provided as one of the valid options for [an `aria-live` attribute value](https://www.w3.org/TR/wai-aria-1.1/#aria-live).
+
+- A value of `'assertive'` is to be used for important, and usually time-sensitive, information. It will interrupt anything else the screen reader is announcing in that moment.
+- A value of `'polite'` is to be used for advisory information. It should not interrupt what the screen reader is announcing in that moment (the "speech queue") or interrupt the current task.
+
+Note that this value should be considered a suggestion; assistive technologies may override it based on internal heuristics.
+
+- Required: No
+- Default: `'assertive'` or `'polite'`, based on the notice status.
+
+#### `isDismissible`: `boolean`
+
+Whether the notice should be dismissible or not
+
+- Required: No
+- Default: `true`
+
+#### `onDismiss` : `() => void`
+
+A deprecated alternative to `onRemove`. This prop is kept for compatibilty reasons but should be avoided.
+
+- Requiered: No
+- Default: `noop`
+
+#### `actions`: `Array<NoticeAction>`.
+
+An array of notice actions. Each member object should contain:
+
+- `label`: `string` containing the text of the button/link
+- `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify what the action does.
+- `className`: `string` (optional) to add custom classes to the button styles.
+- `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all default styling.
+- `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a primary button action for a notice by passing a value of `primary`.
+
+The default appearance of an action button is inferred based on whether `url` or `onClick` are provided, rendering the button as a link if appropriate. If both props are provided, `url` takes precedence, and the action button will render as an anchor tag.
 
 ## Related components
 
--   To create a more prominent message that requires action, use a Modal.
+- To create a more prominent message that requires action, use a Modal.
+- For low priority, non-interruptive messsages, use Snackbar.
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
deleted file mode 100644
index df14240957d91d..00000000000000
--- a/packages/components/src/notice/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { RawHTML, useEffect, renderToString } from '@wordpress/element';
-import { speak } from '@wordpress/a11y';
-import { close } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Button } from '../';
-
-/** @typedef {import('@wordpress/element').WPElement} WPElement */
-
-const noop = () => {};
-
-/**
- * Custom hook which announces the message with the given politeness, if a
- * valid message is provided.
- *
- * @param {string|WPElement}     [message]  Message to announce.
- * @param {'polite'|'assertive'} politeness Politeness to announce.
- */
-function useSpokenMessage( message, politeness ) {
-	const spokenMessage =
-		typeof message === 'string' ? message : renderToString( message );
-
-	useEffect( () => {
-		if ( spokenMessage ) {
-			speak( spokenMessage, politeness );
-		}
-	}, [ spokenMessage, politeness ] );
-}
-
-/**
- * Given a notice status, returns an assumed default politeness for the status.
- * Defaults to 'assertive'.
- *
- * @param {string} [status] Notice status.
- *
- * @return {'polite'|'assertive'} Notice politeness.
- */
-function getDefaultPoliteness( status ) {
-	switch ( status ) {
-		case 'success':
-		case 'warning':
-		case 'info':
-			return 'polite';
-
-		case 'error':
-		default:
-			return 'assertive';
-	}
-}
-
-function Notice( {
-	className,
-	status = 'info',
-	children,
-	spokenMessage = children,
-	onRemove = noop,
-	isDismissible = true,
-	actions = [],
-	politeness = getDefaultPoliteness( status ),
-	__unstableHTML,
-	// onDismiss is a callback executed when the notice is dismissed.
-	// It is distinct from onRemove, which _looks_ like a callback but is
-	// actually the function to call to remove the notice from the UI.
-	onDismiss = noop,
-} ) {
-	useSpokenMessage( spokenMessage, politeness );
-
-	const classes = classnames(
-		className,
-		'components-notice',
-		'is-' + status,
-		{
-			'is-dismissible': isDismissible,
-		}
-	);
-
-	if ( __unstableHTML ) {
-		children = <RawHTML>{ children }</RawHTML>;
-	}
-
-	const onDismissNotice = ( event ) => {
-		event?.preventDefault?.();
-		onDismiss();
-		onRemove();
-	};
-
-	return (
-		<div className={ classes }>
-			<div className="components-notice__content">
-				{ children }
-				<div className="components-notice__actions">
-					{ actions.map(
-						(
-							{
-								className: buttonCustomClasses,
-								label,
-								isPrimary,
-								variant,
-								noDefaultClasses = false,
-								onClick,
-								url,
-							},
-							index
-						) => {
-							let computedVariant = variant;
-							if ( variant !== 'primary' && ! noDefaultClasses ) {
-								computedVariant = ! url ? 'secondary' : 'link';
-							}
-							if (
-								typeof computedVariant === 'undefined' &&
-								isPrimary
-							) {
-								computedVariant = 'primary';
-							}
-
-							return (
-								<Button
-									key={ index }
-									href={ url }
-									variant={ computedVariant }
-									onClick={ url ? undefined : onClick }
-									className={ classnames(
-										'components-notice__action',
-										buttonCustomClasses
-									) }
-								>
-									{ label }
-								</Button>
-							);
-						}
-					) }
-				</div>
-			</div>
-			{ isDismissible && (
-				<Button
-					className="components-notice__dismiss"
-					icon={ close }
-					label={ __( 'Dismiss this notice' ) }
-					onClick={ onDismissNotice }
-					showTooltip={ false }
-				/>
-			) }
-		</div>
-	);
-}
-
-export default Notice;
diff --git a/packages/components/src/notice/index.tsx b/packages/components/src/notice/index.tsx
new file mode 100644
index 00000000000000..6f3ca94d4f734a
--- /dev/null
+++ b/packages/components/src/notice/index.tsx
@@ -0,0 +1,175 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RawHTML, useEffect, renderToString } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+import { close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import type { NoticeAction, NoticeProps } from './types';
+import type { DeprecatedButtonProps } from '../button/types';
+import { VisuallyHidden } from '../visually-hidden';
+
+const noop = () => {};
+
+/**
+ * Custom hook which announces the message with the given politeness, if a
+ * valid message is provided.
+ */
+function useSpokenMessage(
+	message: NoticeProps[ 'spokenMessage' ],
+	politeness: NoticeProps[ 'politeness' ]
+) {
+	const spokenMessage =
+		typeof message === 'string' ? message : renderToString( message );
+
+	useEffect( () => {
+		if ( spokenMessage ) {
+			speak( spokenMessage, politeness );
+		}
+	}, [ spokenMessage, politeness ] );
+}
+
+function getDefaultPoliteness( status: NoticeProps[ 'status' ] ) {
+	switch ( status ) {
+		case 'success':
+		case 'warning':
+		case 'info':
+			return 'polite';
+		// The default will also catch the 'error' status.
+		default:
+			return 'assertive';
+	}
+}
+
+function getStatusLabel( status: NoticeProps[ 'status' ] ) {
+	switch ( status ) {
+		case 'warning':
+			return __( 'Warning notice' );
+		case 'info':
+			return __( 'Information notice' );
+		case 'error':
+			return __( 'Error notice' );
+		// The default will also catch the 'success' status.
+		default:
+			return __( 'Notice' );
+	}
+}
+
+/**
+ * `Notice` is a component used to communicate feedback to the user.
+ *
+ *```jsx
+ * import { Notice } from `@wordpress/components`;
+ *
+ * const MyNotice = () => (
+ *   <Notice status="error">An unknown error occurred.</Notice>
+ * );
+ * ```
+ */
+function Notice( {
+	className,
+	status = 'info',
+	children,
+	spokenMessage = children,
+	onRemove = noop,
+	isDismissible = true,
+	actions = [],
+	politeness = getDefaultPoliteness( status ),
+	__unstableHTML,
+	// onDismiss is a callback executed when the notice is dismissed.
+	// It is distinct from onRemove, which _looks_ like a callback but is
+	// actually the function to call to remove the notice from the UI.
+	onDismiss = noop,
+}: NoticeProps ) {
+	useSpokenMessage( spokenMessage, politeness );
+
+	const classes = clsx( className, 'components-notice', 'is-' + status, {
+		'is-dismissible': isDismissible,
+	} );
+
+	if ( __unstableHTML && typeof children === 'string' ) {
+		children = <RawHTML>{ children }</RawHTML>;
+	}
+
+	const onDismissNotice = () => {
+		onDismiss();
+		onRemove();
+	};
+
+	return (
+		<div className={ classes }>
+			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
+			<div className="components-notice__content">
+				{ children }
+				<div className="components-notice__actions">
+					{ actions.map(
+						(
+							{
+								className: buttonCustomClasses,
+								label,
+								isPrimary,
+								variant,
+								noDefaultClasses = false,
+								onClick,
+								url,
+							}: NoticeAction &
+								// `isPrimary` is a legacy prop included for
+								// backcompat, but `variant` should be used
+								// instead.
+								Pick< DeprecatedButtonProps, 'isPrimary' >,
+							index
+						) => {
+							let computedVariant = variant;
+							if ( variant !== 'primary' && ! noDefaultClasses ) {
+								computedVariant = ! url ? 'secondary' : 'link';
+							}
+							if (
+								typeof computedVariant === 'undefined' &&
+								isPrimary
+							) {
+								computedVariant = 'primary';
+							}
+
+							return (
+								<Button
+									__next40pxDefaultSize
+									key={ index }
+									href={ url }
+									variant={ computedVariant }
+									onClick={ url ? undefined : onClick }
+									className={ clsx(
+										'components-notice__action',
+										buttonCustomClasses
+									) }
+								>
+									{ label }
+								</Button>
+							);
+						}
+					) }
+				</div>
+			</div>
+			{ isDismissible && (
+				<Button
+					size="small"
+					className="components-notice__dismiss"
+					icon={ close }
+					label={ __( 'Close' ) }
+					onClick={ onDismissNotice }
+				/>
+			) }
+		</div>
+	);
+}
+
+export default Notice;
diff --git a/packages/components/src/notice/list.js b/packages/components/src/notice/list.js
deleted file mode 100644
index 23c54605e58230..00000000000000
--- a/packages/components/src/notice/list.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import Notice from './';
-
-const noop = () => {};
-
-/**
- * Renders a list of notices.
- *
- * @param {Object}   $0           Props passed to the component.
- * @param {Array}    $0.notices   Array of notices to render.
- * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
- * @param {Object}   $0.className Name of the class used by the component.
- * @param {Object}   $0.children  Array of children to be rendered inside the notice list.
- *
- * @return {Object} The rendered notices list.
- */
-function NoticeList( { notices, onRemove = noop, className, children } ) {
-	const removeNotice = ( id ) => () => onRemove( id );
-
-	className = classnames( 'components-notice-list', className );
-
-	return (
-		<div className={ className }>
-			{ children }
-			{ [ ...notices ].reverse().map( ( notice ) => {
-				const { content, ...restNotice } = notice;
-				return (
-					<Notice
-						{ ...restNotice }
-						key={ notice.id }
-						onRemove={ removeNotice( notice.id ) }
-					>
-						{ notice.content }
-					</Notice>
-				);
-			} ) }
-		</div>
-	);
-}
-
-export default NoticeList;
diff --git a/packages/components/src/notice/list.tsx b/packages/components/src/notice/list.tsx
new file mode 100644
index 00000000000000..04351f383894ef
--- /dev/null
+++ b/packages/components/src/notice/list.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import Notice from '.';
+import type { WordPressComponentProps } from '../context';
+import type { NoticeListProps } from './types';
+
+const noop = () => {};
+
+/**
+ * `NoticeList` is a component used to render a collection of notices.
+ *
+ *```jsx
+ * import { Notice, NoticeList } from `@wordpress/components`;
+ *
+ * const MyNoticeList = () => {
+ *	const [ notices, setNotices ] = useState( [
+ *		{
+ *			id: 'second-notice',
+ *			content: 'second notice content',
+ *		},
+ *		{
+ *			id: 'fist-notice',
+ *			content: 'first notice content',
+ *		},
+ *	] );
+ *
+ *	const removeNotice = ( id ) => {
+ *		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
+ *	};
+ *
+ *	return <NoticeList notices={ notices } onRemove={ removeNotice } />;
+ *};
+ *```
+ */
+function NoticeList( {
+	notices,
+	onRemove = noop,
+	className,
+	children,
+}: WordPressComponentProps< NoticeListProps, 'div', false > ) {
+	const removeNotice =
+		( id: NoticeListProps[ 'notices' ][ number ][ 'id' ] ) => () =>
+			onRemove( id );
+
+	className = clsx( 'components-notice-list', className );
+
+	return (
+		<div className={ className }>
+			{ children }
+			{ [ ...notices ].reverse().map( ( notice ) => {
+				const { content, ...restNotice } = notice;
+				return (
+					<Notice
+						{ ...restNotice }
+						key={ notice.id }
+						onRemove={ removeNotice( notice.id ) }
+					>
+						{ notice.content }
+					</Notice>
+				);
+			} ) }
+		</div>
+	);
+}
+
+export default NoticeList;
diff --git a/packages/components/src/notice/stories/index.js b/packages/components/src/notice/stories/index.js
deleted file mode 100644
index 95a1adf0d71834..00000000000000
--- a/packages/components/src/notice/stories/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Notice from '../';
-
-export default {
-	title: 'Components/Notice',
-	component: Notice,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-
-	return (
-		<Notice status={ status } isDismissible={ isDismissible }>
-			<p>This is a notice.</p>
-		</Notice>
-	);
-};
-
-export const withCustomSpokenMessage = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-	const politeness = select(
-		'Politeness',
-		{
-			Assertive: 'assertive',
-			Polite: 'polite',
-		},
-		'assertive'
-	);
-	const spokenMessage = text(
-		'Spoken Message',
-		'This is a notice with a custom spoken message'
-	);
-
-	return (
-		<Notice
-			status={ status }
-			isDismissible={ isDismissible }
-			politeness={ politeness }
-			spokenMessage={ spokenMessage }
-		>
-			<p>This is a notice.</p>
-		</Notice>
-	);
-};
diff --git a/packages/components/src/notice/stories/index.story.tsx b/packages/components/src/notice/stories/index.story.tsx
new file mode 100644
index 00000000000000..042b4ac3ec79b3
--- /dev/null
+++ b/packages/components/src/notice/stories/index.story.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Notice from '..';
+import Button from '../../button';
+import NoticeList from '../list';
+import type { NoticeListProps } from '../types';
+
+const meta: Meta< typeof Notice > = {
+	title: 'Components/Feedback/Notice',
+	id: 'components-notice',
+	component: Notice,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { NoticeList },
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Notice > = ( props ) => {
+	return <Notice { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a notice.',
+};
+
+export const WithCustomSpokenMessage = Template.bind( {} );
+WithCustomSpokenMessage.args = {
+	...Default.args,
+	politeness: 'assertive',
+	spokenMessage: 'This is a notice with a custom spoken message',
+};
+
+export const WithJSXChildren = Template.bind( {} );
+WithJSXChildren.args = {
+	...Default.args,
+	children: (
+		<>
+			<p>
+				JSX elements can be helpful
+				<strong> if you need to format</strong> the notice output.
+			</p>
+			<code>
+				note: in the interest of consistency, this should not be
+				overused!
+			</code>
+		</>
+	),
+};
+
+export const WithActions = Template.bind( {} );
+WithActions.args = {
+	...Default.args,
+	actions: [
+		{
+			label: 'Click me!',
+			onClick: () => {},
+			variant: 'primary',
+		},
+		{
+			label: 'Or click me instead!',
+			onClick: () => {},
+		},
+		{
+			label: 'Or visit a link for more info',
+			url: 'https://wordpress.org',
+			variant: 'link',
+		},
+	],
+};
+
+export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
+	const exampleNotices = [
+		{
+			id: 'second-notice',
+			content: 'second notice content',
+		},
+		{
+			id: 'first-notice',
+			content: 'first notice content',
+		},
+	];
+	const [ notices, setNotices ] = useState( exampleNotices );
+
+	const removeNotice = (
+		id: NoticeListProps[ 'notices' ][ number ][ 'id' ]
+	) => {
+		setNotices( notices.filter( ( notice ) => notice.id !== id ) );
+	};
+
+	const resetNotices = () => {
+		setNotices( exampleNotices );
+	};
+
+	return (
+		<>
+			<NoticeList notices={ notices } onRemove={ removeNotice } />
+			<Button
+				__next40pxDefaultSize
+				variant="primary"
+				onClick={ resetNotices }
+			>
+				Reset Notices
+			</Button>
+		</>
+	);
+};
+NoticeListSubcomponent.storyName = 'NoticeList Subcomponent';
diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
index 23378cefe1ec63..a2d6aca530a93c 100644
--- a/packages/components/src/notice/style.scss
+++ b/packages/components/src/notice/style.scss
@@ -4,12 +4,10 @@
 	font-size: $default-font-size;
 	background-color: $white;
 	border-left: 4px solid $components-color-accent;
-	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;
 
 	&.is-dismissible {
-		padding-right: 36px;
 		position: relative;
 	}
 
diff --git a/packages/components/src/notice/test/__snapshots__/index.js.snap b/packages/components/src/notice/test/__snapshots__/index.js.snap
deleted file mode 100644
index 8f31d71af7c90d..00000000000000
--- a/packages/components/src/notice/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Notice should match snapshot 1`] = `
-<div>
-  <div
-    class="components-notice is-success is-dismissible"
-  >
-    <div
-      class="components-notice__content"
-    >
-      Example
-      <div
-        class="components-notice__actions"
-      >
-        <a
-          class="components-button components-notice__action is-link"
-          href="https://example.com"
-        >
-          More information
-        </a>
-        <button
-          class="components-button components-notice__action is-secondary"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="components-button components-notice__action is-primary"
-          type="button"
-        >
-          Submit
-        </button>
-      </div>
-    </div>
-    <button
-      aria-label="Dismiss this notice"
-      class="components-button components-notice__dismiss 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/components/src/notice/test/__snapshots__/index.tsx.snap b/packages/components/src/notice/test/__snapshots__/index.tsx.snap
new file mode 100644
index 00000000000000..77abecf14264be
--- /dev/null
+++ b/packages/components/src/notice/test/__snapshots__/index.tsx.snap
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notice should match snapshot 1`] = `
+<div>
+  <div
+    class="components-notice is-success is-dismissible"
+  >
+    <div
+      class="components-visually-hidden emotion-0 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="VisuallyHidden"
+      style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+    >
+      Notice
+    </div>
+    <div
+      class="components-notice__content"
+    >
+      Example
+      <div
+        class="components-notice__actions"
+      >
+        <a
+          class="components-button components-notice__action is-next-40px-default-size is-link"
+          href="https://example.com"
+        >
+          More information
+        </a>
+        <button
+          class="components-button components-notice__action is-next-40px-default-size is-secondary"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="components-button components-notice__action is-next-40px-default-size is-primary"
+          type="button"
+        >
+          Submit
+        </button>
+      </div>
+    </div>
+    <button
+      aria-label="Close"
+      class="components-button components-notice__dismiss is-small 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.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/components/src/notice/test/index.js b/packages/components/src/notice/test/index.js
deleted file mode 100644
index a52fcbf3080944..00000000000000
--- a/packages/components/src/notice/test/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import Notice from '../index';
-
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
-
-describe( 'Notice', () => {
-	beforeEach( () => {
-		speak.mockReset();
-	} );
-
-	it( 'should match snapshot', () => {
-		const { container } = render(
-			<Notice
-				status="success"
-				actions={ [
-					{ label: 'More information', url: 'https://example.com' },
-					{ label: 'Cancel', onClick() {} },
-					{ label: 'Submit', onClick() {}, variant: 'primary' },
-				] }
-			>
-				Example
-			</Notice>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
-		const { container } = render( <Notice isDismissible={ false } /> );
-
-		expect( container.firstChild ).toHaveClass( 'components-notice' );
-		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
-	} );
-
-	it( 'should default to info status', () => {
-		const { container } = render( <Notice /> );
-
-		expect( container.firstChild ).toHaveClass( 'is-info' );
-	} );
-
-	describe( 'useSpokenMessage', () => {
-		it( 'should speak the given message', () => {
-			render( <Notice>FYI</Notice> );
-
-			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
-		} );
-
-		it( 'should speak the given message by explicit politeness', () => {
-			render( <Notice politeness="assertive">Uh oh!</Notice> );
-
-			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
-		} );
-
-		it( 'should speak the given message by implicit politeness by status', () => {
-			render( <Notice status="error">Uh oh!</Notice> );
-
-			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
-		} );
-
-		it( 'should speak the given message, preferring explicit to implicit politeness', () => {
-			render(
-				<Notice politeness="polite" status="error">
-					No need to panic
-				</Notice>
-			);
-
-			expect( speak ).toHaveBeenCalledWith(
-				'No need to panic',
-				'polite'
-			);
-		} );
-
-		it( 'should coerce a message to a string', () => {
-			// This test assumes that `@wordpress/a11y` is capable of handling
-			// markup strings appropriately.
-			render(
-				<Notice>
-					With <em>emphasis</em> this time.
-				</Notice>
-			);
-
-			expect( speak ).toHaveBeenCalledWith(
-				'With <em>emphasis</em> this time.',
-				'polite'
-			);
-		} );
-
-		it( 'should not re-speak an effectively equivalent element message', () => {
-			const { rerender } = render(
-				<Notice>
-					With <em>emphasis</em> this time.
-				</Notice>
-			);
-			rerender(
-				<Notice>
-					With <em>emphasis</em> this time.
-				</Notice>
-			);
-
-			expect( speak ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-} );
diff --git a/packages/components/src/notice/test/index.tsx b/packages/components/src/notice/test/index.tsx
new file mode 100644
index 00000000000000..b601e8717a1d3b
--- /dev/null
+++ b/packages/components/src/notice/test/index.tsx
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import Notice from '../index';
+
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
+function getNoticeWrapper( container: HTMLElement ) {
+	return container.firstChild;
+}
+
+describe( 'Notice', () => {
+	beforeEach( () => {
+		mockedSpeak.mockReset();
+	} );
+
+	it( 'should match snapshot', () => {
+		const { container } = render(
+			<Notice
+				status="success"
+				actions={ [
+					{ label: 'More information', url: 'https://example.com' },
+					{ label: 'Cancel', onClick() {} },
+					{ label: 'Submit', onClick() {}, variant: 'primary' },
+				] }
+			>
+				Example
+			</Notice>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
+		const { container } = render(
+			<Notice isDismissible={ false }>I cannot be dismissed!</Notice>
+		);
+		const wrapper = getNoticeWrapper( container );
+
+		expect( wrapper ).toHaveClass( 'components-notice' );
+		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
+	} );
+
+	it( 'should default to info status', () => {
+		const { container } = render( <Notice>FYI</Notice> );
+
+		expect( getNoticeWrapper( container ) ).toHaveClass( 'is-info' );
+	} );
+
+	describe( 'useSpokenMessage', () => {
+		it( 'should speak the given message', () => {
+			render( <Notice>FYI</Notice> );
+
+			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
+		} );
+
+		it( 'should speak the given message by explicit politeness', () => {
+			render( <Notice politeness="assertive">Uh oh!</Notice> );
+
+			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
+		} );
+
+		it( 'should speak the given message by implicit politeness by status', () => {
+			render( <Notice status="error">Uh oh!</Notice> );
+
+			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
+		} );
+
+		it( 'should speak the given message, preferring explicit to implicit politeness', () => {
+			render(
+				<Notice politeness="polite" status="error">
+					No need to panic
+				</Notice>
+			);
+
+			expect( speak ).toHaveBeenCalledWith(
+				'No need to panic',
+				'polite'
+			);
+		} );
+
+		it( 'should coerce a message to a string', () => {
+			// This test assumes that `@wordpress/a11y` is capable of handling
+			// markup strings appropriately.
+			render(
+				<Notice>
+					With <em>emphasis</em> this time.
+				</Notice>
+			);
+
+			expect( speak ).toHaveBeenCalledWith(
+				'With <em>emphasis</em> this time.',
+				'polite'
+			);
+		} );
+
+		it( 'should not re-speak an effectively equivalent element message', () => {
+			const { rerender } = render(
+				<Notice>
+					With <em>emphasis</em> this time.
+				</Notice>
+			);
+			rerender(
+				<Notice>
+					With <em>emphasis</em> this time.
+				</Notice>
+			);
+
+			expect( speak ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/notice/test/list.js b/packages/components/src/notice/test/list.js
deleted file mode 100644
index 2e38f19911c25e..00000000000000
--- a/packages/components/src/notice/test/list.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import NoticeList from '../list';
-
-describe( 'NoticeList', () => {
-	it( 'should merge className', () => {
-		const { container } = render(
-			<NoticeList notices={ [] } className="is-ok" />
-		);
-
-		expect( container.firstChild ).toHaveClass( 'is-ok' );
-		expect( container.firstChild ).toHaveClass( 'components-notice-list' );
-	} );
-} );
diff --git a/packages/components/src/notice/test/list.tsx b/packages/components/src/notice/test/list.tsx
new file mode 100644
index 00000000000000..65d896e1eb4925
--- /dev/null
+++ b/packages/components/src/notice/test/list.tsx
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import NoticeList from '../list';
+
+describe( 'NoticeList', () => {
+	it( 'should merge className', () => {
+		render(
+			<NoticeList notices={ [] } className="is-ok">
+				List of notices
+			</NoticeList>
+		);
+
+		const noticeList = screen.getByText( 'List of notices' );
+		expect( noticeList ).toHaveClass( 'is-ok' );
+		expect( noticeList ).toHaveClass( 'components-notice-list' );
+	} );
+} );
diff --git a/packages/components/src/notice/types.ts b/packages/components/src/notice/types.ts
new file mode 100644
index 00000000000000..2af7bc22c7ea5d
--- /dev/null
+++ b/packages/components/src/notice/types.ts
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactNode } from 'react';
+
+type CommonNoticeActionProps = {
+	label: string;
+	className?: string;
+	noDefaultClasses?: boolean;
+	variant?: 'primary' | 'secondary' | 'link';
+};
+// `url` and `onClick` can both be provided, but `url` takes precedence. If
+// `url` is provided, the action's button will be rendered as an anchor and
+// `onClick` will be ignored.
+type NoticeActionWithURL = CommonNoticeActionProps & {
+	url: string;
+	onClick?: never;
+};
+type NoticeActionWithOnClick = CommonNoticeActionProps & {
+	url?: never;
+	onClick: MouseEventHandler< HTMLButtonElement >;
+};
+
+export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
+
+export type NoticeChildren = string | JSX.Element;
+
+export type NoticeProps = {
+	/**
+	 * A CSS `class` to give to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The displayed message of a notice. Also used as the spoken message for
+	 * assistive technology, unless `spokenMessage` is provided as an alternative message.
+	 */
+	children: ReactNode;
+	/**
+	 * Used to provide a custom spoken message in place of the `children` default.
+	 *
+	 * @default `children`
+	 */
+	spokenMessage?: ReactNode;
+	/**
+	 * Determines the color of the notice: `warning` (yellow),
+	 * `success` (green), `error` (red), or `'info'`.
+	 * By default `'info'` will be blue, but if there is a parent Theme component
+	 * with an accent color prop, the notice will take on that color instead.
+	 *
+	 * @default 'info'
+	 */
+	status?: 'warning' | 'success' | 'error' | 'info';
+	/**
+	 * Function called when dismissing the notice
+	 *
+	 * @default noop
+	 */
+	onRemove?: () => void;
+	/**
+	 * A politeness level for the notice's spoken message. Should be provided as
+	 * one of the valid options for an `aria-live` attribute value.
+	 *
+	 * A value of `'assertive'` is to be used for important, and usually
+	 * time-sensitive, information. It will interrupt anything else the screen
+	 * reader is announcing in that moment.
+	 * A value of `'polite'` is to be used for advisory information. It should
+	 * not interrupt what the screen reader is announcing in that moment
+	 * (the "speech queue") or interrupt the current task.
+	 *
+	 * Note that this value should be considered a suggestion; assistive
+	 * technologies may override it based on internal heuristics.
+	 *
+	 * @see https://www.w3.org/TR/wai-aria-1.1/#aria-live
+	 *
+	 * @default 'assertive' for 'error' status, 'polite' for all other statuses
+	 */
+	politeness?: 'polite' | 'assertive';
+	/**
+	 * Whether the notice should be dismissible or not
+	 *
+	 * @default true
+	 */
+	isDismissible?: boolean;
+	/**
+	 * A deprecated alternative to `onRemove`. This prop is kept for
+	 * compatibilty reasons but should be avoided.
+	 *
+	 * @default noop
+	 */
+	onDismiss?: () => void;
+	/**
+	 * An array of action objects. Each member object should contain:
+	 *
+	 * - `label`: `string` containing the text of the button/link
+	 * - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify
+	 *    what the action does.
+	 * - `className`: `string` (optional) to add custom classes to the button styles.
+	 * - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all
+	 *    default styling.
+	 * - `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a
+	 *    primary button action for a notice by passing a value of `primary`.
+	 *
+	 * The default appearance of an action button is inferred based on whether
+	 * `url` or `onClick` are provided, rendering the button as a link if
+	 * appropriate. If both props are provided, `url` takes precedence, and the
+	 * action button will render as an anchor tag.
+	 *
+	 * @default []
+	 */
+	actions?: Array< NoticeAction >;
+	/**
+	 * Determines whether or not the message should be parsed as custom HTML
+	 * instead of a string.
+	 */
+	__unstableHTML?: boolean;
+};
+
+export type NoticeListProps = {
+	/**
+	 * Array of notices to render.
+	 */
+	notices: Array<
+		Omit< NoticeProps, 'children' > & {
+			id: string;
+			content: string;
+		}
+	>;
+	/**
+	 * Function called when a notice should be removed / dismissed.
+	 */
+	onRemove?: ( id: string ) => void;
+	/**
+	 * Children to be rendered inside the notice list.
+	 */
+	children?: ReactNode;
+};
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 1a78cd25bb457c..486092790548ee 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -16,6 +16,7 @@ const Example = () => {
 
 	return (
 		<NumberControl
+			__next40pxDefaultSize
 			isShiftStepEnabled={ true }
 			onChange={ setValue }
 			shiftStep={ 10 }
@@ -46,9 +47,9 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 
 ### spinControls
 
- The type of spin controls to display. These are butons that allow the user to
+ The type of spin controls to display. These are buttons that allow the user to
  quickly increment and decrement the number.
- 
+
  - 'none' - Do not show spin controls.
  - 'native' - Use browser's native HTML `input` controls.
  - 'custom' - Use plus and minus icon buttons.
@@ -139,3 +140,11 @@ Amount by which the `value` is changed when incrementing/decrementing. It is als
 -   Type: `Number | "any"`
 -   Required: No
 -   Default: `1`
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 40cbf51bee2d3a..efa84879b8ff3c 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
@@ -16,24 +16,30 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { Input, SpinButton } from './styles/number-control-styles';
+import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
+import { useCx } from '../utils';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
 function UnforwardedNumberControl(
-	{
+	props: WordPressComponentProps< NumberControlProps, 'input', false >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
 		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
-		spinControls = 'native',
+		spinControls = hideHTMLArrows ? 'none' : 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -42,42 +48,52 @@ function UnforwardedNumberControl(
 		required = false,
 		shiftStep = 10,
 		step = 1,
+		spinFactor = 1,
 		type: typeProp = 'number',
 		value: valueProp,
 		size = 'default',
 		suffix,
 		onChange = noop,
-		...props
-	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	forwardedRef: ForwardedRef< any >
-) {
+		__shouldNotWarnDeprecated36pxSize,
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'NumberControl',
+		size,
+		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	if ( hideHTMLArrows ) {
-		deprecated( 'hideHTMLArrows', {
+		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
 			alternative: 'spinControls="none"',
 			since: '6.2',
 			version: '6.3',
 		} );
-		spinControls = 'none';
 	}
-
 	const inputRef = useRef< HTMLInputElement >();
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
 
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
+	const baseSpin = ensureNumber( spinFactor ) * baseStep;
 	const baseValue = roundClamp( 0, min, max, baseStep );
 	const constrainValue = (
 		value: number | string,
 		stepOverride?: number
 	) => {
 		// When step is "any" clamp the value, otherwise round and clamp it.
+		// Use '' + to convert to string for use in input value attribute.
 		return isStepAny
-			? Math.min( max, Math.max( min, ensureNumber( value ) ) )
-			: roundClamp( value, min, max, stepOverride ?? baseStep );
+			? '' + Math.min( max, Math.max( min, ensureNumber( value ) ) )
+			: '' + roundClamp( value, min, max, stepOverride ?? baseStep );
 	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
-	const classes = classNames( 'components-number-control', className );
+	const classes = clsx( 'components-number-control', className );
+	const cx = useCx();
+	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 
 	const spinValue = (
 		value: string | number | undefined,
@@ -86,7 +102,7 @@ function UnforwardedNumberControl(
 	) => {
 		event?.preventDefault();
 		const shift = event?.shiftKey && isShiftStepEnabled;
-		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		const delta = shift ? ensureNumber( shiftStep ) * baseSpin : baseSpin;
 		let nextValue = isValueEmpty( value ) ? baseValue : value;
 		if ( direction === 'up' ) {
 			nextValue = add( nextValue, delta );
@@ -118,7 +134,6 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 				nextState.value = spinValue(
 					currentValue,
 					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
@@ -130,13 +145,11 @@ function UnforwardedNumberControl(
 			 * Handles drag to update events
 			 */
 			if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-				// @ts-expect-error TODO: See if reducer actions can be typed better
 				const [ x, y ] = payload.delta;
-				// @ts-expect-error TODO: See if reducer actions can be typed better
 				const enableShift = payload.shiftKey && isShiftStepEnabled;
 				const modifier = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
+					? ensureNumber( shiftStep ) * baseSpin
+					: baseSpin;
 
 				let directionModifier;
 				let delta;
@@ -167,7 +180,6 @@ function UnforwardedNumberControl(
 					delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
 					const distance = delta * modifier * directionModifier;
 
-					// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 					nextState.value = constrainValue(
 						// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
 						add( currentValue, distance ),
@@ -186,7 +198,6 @@ function UnforwardedNumberControl(
 				const applyEmptyValue =
 					required === false && currentValue === '';
 
-				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 				nextState.value = applyEmptyValue
 					? currentValue
 					: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
@@ -212,7 +223,7 @@ function UnforwardedNumberControl(
 		<Input
 			autoComplete={ autoComplete }
 			inputMode="numeric"
-			{ ...props }
+			{ ...restProps }
 			className={ classes }
 			dragDirection={ dragDirection }
 			hideHTMLArrows={ spinControls !== 'native' }
@@ -238,26 +249,22 @@ function UnforwardedNumberControl(
 						<Spacer marginBottom={ 0 } marginRight={ 2 }>
 							<HStack spacing={ 1 }>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ plusIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Increment' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Increment' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
-									size={ size }
 								/>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ resetIcon }
-									isSmall
-									aria-hidden="true"
-									aria-label={ __( 'Decrement' ) }
-									tabIndex={ -1 }
+									size="small"
+									label={ __( 'Decrement' ) }
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }
-									size={ size }
 								/>
 							</HStack>
 						</Spacer>
diff --git a/packages/components/src/number-control/stories/index.js b/packages/components/src/number-control/stories/index.js
deleted file mode 100644
index 4daff7e34b2baa..00000000000000
--- a/packages/components/src/number-control/stories/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import NumberControl from '../';
-
-export default {
-	title: 'Components (Experimental)/NumberControl',
-	component: NumberControl,
-	argTypes: {
-		onChange: { action: 'onChange' },
-		prefix: { control: { type: 'text' } },
-		step: { control: { type: 'text' } },
-		suffix: { control: { type: 'text' } },
-		type: { control: { type: 'text' } },
-		value: { control: null },
-	},
-};
-
-function Template( { onChange, ...props } ) {
-	const [ value, setValue ] = useState( '0' );
-	const [ isValidValue, setIsValidValue ] = useState( true );
-
-	return (
-		<>
-			<NumberControl
-				{ ...props }
-				value={ value }
-				onChange={ ( v, extra ) => {
-					setValue( v );
-					setIsValidValue( extra.event.target.validity.valid );
-					onChange( v, extra );
-				} }
-			/>
-			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
-		</>
-	);
-}
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Value',
-};
diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..e66be3490bb716
--- /dev/null
+++ b/packages/components/src/number-control/stories/index.story.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import NumberControl from '..';
+
+const meta: Meta< typeof NumberControl > = {
+	title: 'Components (Experimental)/Selection & Input/NumberControl',
+	id: 'components-experimental-numbercontrol',
+	component: NumberControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		prefix: { control: { type: 'text' } },
+		step: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		type: { control: { type: 'text' } },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+const Template: StoryFn< typeof NumberControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '0' );
+	const [ isValidValue, setIsValidValue ] = useState( true );
+
+	return (
+		<>
+			<NumberControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					setIsValidValue(
+						( extra.event.target as HTMLInputElement ).validity
+							.valid
+					);
+					onChange?.( v, extra );
+				} }
+			/>
+			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
+		</>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Value',
+	__next40pxDefaultSize: true,
+};
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
deleted file mode 100644
index 4f0bcb91bb8dda..00000000000000
--- a/packages/components/src/number-control/styles/number-control-styles.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import InputControl from '../../input-control';
-import { COLORS } from '../../utils';
-import Button from '../../button';
-import { space } from '../../ui/utils/space';
-
-const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) {
-		return ``;
-	}
-
-	return css`
-		input[type='number']::-webkit-outer-spin-button,
-		input[type='number']::-webkit-inner-spin-button {
-			-webkit-appearance: none !important;
-			margin: 0 !important;
-		}
-
-		input[type='number'] {
-			-moz-appearance: textfield;
-		}
-	`;
-};
-
-export const Input = styled( InputControl )`
-	${ htmlArrowStyles };
-`;
-
-const spinButtonSizeStyles = ( { size } ) => {
-	if ( size !== 'small' ) {
-		return ``;
-	}
-
-	return css`
-		width: ${ space( 5 ) };
-		min-width: ${ space( 5 ) };
-		height: ${ space( 5 ) };
-	`;
-};
-
-export const SpinButton = styled( Button )`
-	&&&&& {
-		color: ${ COLORS.ui.theme };
-		${ spinButtonSizeStyles }
-	}
-`;
diff --git a/packages/components/src/number-control/styles/number-control-styles.ts b/packages/components/src/number-control/styles/number-control-styles.ts
new file mode 100644
index 00000000000000..2fa1be970090bf
--- /dev/null
+++ b/packages/components/src/number-control/styles/number-control-styles.ts
@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '../../input-control';
+import { COLORS } from '../../utils';
+import Button from '../../button';
+import { space } from '../../utils/space';
+
+const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
+	if ( ! hideHTMLArrows ) {
+		return ``;
+	}
+
+	return css`
+		input[type='number']::-webkit-outer-spin-button,
+		input[type='number']::-webkit-inner-spin-button {
+			-webkit-appearance: none !important;
+			margin: 0 !important;
+		}
+
+		input[type='number'] {
+			-moz-appearance: textfield;
+		}
+	`;
+};
+
+export const Input = styled( InputControl )`
+	${ htmlArrowStyles };
+`;
+
+export const SpinButton = styled( Button )`
+	&&&&& {
+		color: ${ COLORS.theme.accent };
+	}
+`;
+
+const smallSpinButtons = css`
+	width: ${ space( 5 ) };
+	min-width: ${ space( 5 ) };
+	height: ${ space( 5 ) };
+`;
+
+export const styles = { smallSpinButtons };
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
deleted file mode 100644
index b1a57232ef2754..00000000000000
--- a/packages/components/src/number-control/test/index.js
+++ /dev/null
@@ -1,478 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import BaseNumberControl from '../';
-
-const getInput = () => screen.getByTestId( 'input' );
-
-const fireKeyDown = ( data ) =>
-	fireEvent.keyDown( document.activeElement || document.body, data );
-
-const NumberControl = ( props ) => (
-	<BaseNumberControl { ...props } data-testid="input" />
-);
-
-function StatefulNumberControl( props ) {
-	const [ value, setValue ] = useState( props.value );
-	const handleOnChange = ( v ) => setValue( v );
-
-	return (
-		<NumberControl
-			{ ...props }
-			value={ value }
-			onChange={ handleOnChange }
-		/>
-	);
-}
-
-describe( 'NumberControl', () => {
-	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <NumberControl /> );
-			expect( getInput() ).not.toBeNull();
-		} );
-
-		it( 'should render custom className', () => {
-			render( <NumberControl className="hello" /> );
-			expect( getInput() ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'onChange handling', () => {
-		it( 'should provide onChange callback with number value', () => {
-			const spy = jest.fn();
-
-			render(
-				<NumberControl value={ 5 } onChange={ ( v ) => spy( v ) } />
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 10 } } );
-
-			expect( spy ).toHaveBeenCalledWith( '10' );
-		} );
-
-		it( 'should call onChange callback when value is clamped on blur', async () => {
-			const spy = jest.fn();
-			render(
-				<NumberControl
-					value={ 5 }
-					min={ 4 }
-					max={ 10 }
-					onChange={ ( v ) => spy( v ) }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 1 } } );
-
-			// Before blurring, the value is still un-clamped
-			expect( input.value ).toBe( '1' );
-
-			input.blur();
-
-			// After blur, value is clamped
-			expect( input.value ).toBe( '4' );
-
-			// After the blur, the `onChange` callback fires asynchronously.
-			await waitFor( () => {
-				expect( spy ).toHaveBeenCalledTimes( 2 );
-			} );
-
-			expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
-			expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
-		} );
-
-		it( 'should call onChange callback when value is not valid', () => {
-			const spy = jest.fn();
-			render(
-				<NumberControl
-					value={ 5 }
-					min={ 1 }
-					max={ 10 }
-					onChange={ ( v, extra ) =>
-						spy( v, extra.event.target.validity.valid )
-					}
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 14 } } );
-
-			expect( input.value ).toBe( '14' );
-
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '10' );
-
-			expect( spy ).toHaveBeenCalledTimes( 2 );
-
-			// First call: invalid, unclamped value
-			expect( spy ).toHaveBeenNthCalledWith( 1, '14', false );
-			// Second call: valid, clamped value
-			expect( spy ).toHaveBeenNthCalledWith( 2, 10, true );
-		} );
-	} );
-
-	describe( 'Validation', () => {
-		it( 'should clamp value within range on ENTER keypress', () => {
-			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: -100 } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			/**
-			 * This is zero because the value has been adjusted to
-			 * respect the min/max range of the input.
-			 */
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should clamp value within range on blur', () => {
-			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 41 } } );
-
-			// Before blurring, the value is still un-clamped
-			expect( input.value ).toBe( '41' );
-
-			input.blur();
-
-			// After blur, value is clamped
-			expect( input.value ).toBe( '10' );
-		} );
-
-		it( 'should parse to number value on ENTER keypress when required', () => {
-			render( <NumberControl value={ 5 } required={ true } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '10 abc' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should parse to empty string on ENTER keypress when not required', () => {
-			render( <NumberControl value={ 5 } required={ false } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '10 abc' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should accept empty string on ENTER keypress for optional field', () => {
-			render( <NumberControl value={ 5 } required={ false } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should not enforce numerical value for empty string when required is omitted', () => {
-			render( <NumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '' );
-		} );
-
-		it( 'should enforce numerical value for empty string when required', () => {
-			render( <NumberControl value={ 5 } required={ true } /> );
-
-			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '' } } );
-			fireKeyDown( { keyCode: ENTER } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-	} );
-
-	describe( 'Key UP interactions', () => {
-		it( 'should fire onKeyDown callback', () => {
-			const spy = jest.fn();
-
-			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
-
-			getInput().focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( spy ).toHaveBeenCalled();
-		} );
-
-		it( 'should increment by step on key UP press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '6' );
-		} );
-
-		it( 'should increment from a negative value', () => {
-			render( <StatefulNumberControl value={ -5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '-4' );
-		} );
-
-		it( 'should increment while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should increment by shiftStep on key UP + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '20' );
-		} );
-
-		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should increment by custom shiftStep on key UP + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '100' );
-		} );
-
-		it( 'should increment but be limited by max on shiftStep', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					max={ 99 }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '99' );
-		} );
-
-		it( 'should not increment by shiftStep if disabled', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					isShiftStepEnabled={ false }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
-
-			expect( input.value ).toBe( '6' );
-		} );
-	} );
-
-	describe( 'Key DOWN interactions', () => {
-		it( 'should fire onKeyDown callback', () => {
-			const spy = jest.fn();
-			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
-
-			getInput().focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( spy ).toHaveBeenCalled();
-		} );
-
-		it( 'should decrement by step on key DOWN press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-
-		it( 'should decrement from a negative value', () => {
-			render( <StatefulNumberControl value={ -5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '-6' );
-		} );
-
-		it( 'should decrement while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should decrement by shiftStep on key DOWN + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '0' );
-		} );
-
-		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', () => {
-			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '867.5309' );
-		} );
-
-		it( 'should decrement by custom shiftStep on key DOWN + shift press', () => {
-			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '-100' );
-		} );
-
-		it( 'should decrement but be limited by min on shiftStep', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					min={ 4 }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-
-		it( 'should not decrement by shiftStep if disabled', () => {
-			render(
-				<StatefulNumberControl
-					value={ 5 }
-					shiftStep={ 100 }
-					isShiftStepEnabled={ false }
-				/>
-			);
-
-			const input = getInput();
-			input.focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
-
-			expect( input.value ).toBe( '4' );
-		} );
-	} );
-
-	describe( 'custom spin buttons', () => {
-		test.each( [ undefined, 'none', 'native' ] )(
-			'should not appear when spinControls = %s',
-			( spinControls ) => {
-				render( <NumberControl spinControls={ spinControls } /> );
-				expect(
-					screen.queryByLabelText( 'Increment' )
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByLabelText( 'Decrement' )
-				).not.toBeInTheDocument();
-			}
-		);
-
-		test.each( [
-			[ 'up', '1', {} ],
-			[ 'up', '2', { value: '1' } ],
-			[ 'up', '12', { value: '10', step: '2' } ],
-			[ 'up', '10', { value: '10', max: '10' } ],
-			[ 'down', '-1', {} ],
-			[ 'down', '1', { value: '2' } ],
-			[ 'down', '10', { value: '12', step: '2' } ],
-			[ 'down', '10', { value: '10', min: '10' } ],
-		] )(
-			'should spin %s to %s when props = %o',
-			async ( direction, expectedValue, props ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-				const onChange = jest.fn();
-				render(
-					<NumberControl
-						{ ...props }
-						spinControls="custom"
-						onChange={ onChange }
-					/>
-				);
-				await user.click(
-					screen.getByLabelText(
-						direction === 'up' ? 'Increment' : 'Decrement'
-					)
-				);
-				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
-					event: expect.anything(),
-				} );
-			}
-		);
-	} );
-} );
diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx
new file mode 100644
index 00000000000000..bf97b520673ea4
--- /dev/null
+++ b/packages/components/src/number-control/test/index.tsx
@@ -0,0 +1,610 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import _NumberControl from '..';
+import type { NumberControlProps } from '../types';
+
+const NumberControl = (
+	props: React.ComponentProps< typeof _NumberControl >
+) => <_NumberControl __next40pxDefaultSize { ...props } />;
+
+function StatefulNumberControl( props: NumberControlProps ) {
+	const [ value, setValue ] = useState( props.value );
+	const handleOnChange = ( v: string | undefined ) => setValue( v );
+
+	return (
+		<NumberControl
+			{ ...props }
+			value={ value }
+			onChange={ handleOnChange }
+		/>
+	);
+}
+
+describe( 'NumberControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			render( <NumberControl /> );
+			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
+		} );
+
+		it( 'should render custom className', () => {
+			render( <NumberControl className="hello" /> );
+			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'onChange handling', () => {
+		it( 'should provide onChange callback with number value', async () => {
+			const user = userEvent.setup();
+			const spy = jest.fn();
+
+			render(
+				<NumberControl value={ 5 } onChange={ ( v ) => spy( v ) } />
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.type( input, '10' );
+
+			expect( spy ).toHaveBeenCalledWith( '10' );
+		} );
+
+		it( 'should call onChange callback when value is clamped on blur', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 4 }
+					max={ 10 }
+					onChange={ ( v, extra ) =>
+						onChangeSpy(
+							v,
+							( extra.event.target as HTMLInputElement ).validity
+								.valid
+						)
+					}
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+
+			await user.clear( input );
+			await user.type( input, '1' );
+
+			// Before blurring, the value is still un-clamped
+			expect( input ).toHaveValue( 1 );
+
+			// Blur the input
+			await user.keyboard( '[Tab]' );
+
+			// After blur, value is clamped
+			expect( input ).toHaveValue( 4 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+
+			// First call: clear the input
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, '', true );
+			// Second call: type '1'
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 2, '1', false );
+			// Third call: clamp value
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 3, '4', true );
+		} );
+
+		it( 'should call onChange callback when value is not valid', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 1 }
+					max={ 10 }
+					onChange={ ( v, extra ) =>
+						onChangeSpy(
+							v,
+							( extra.event.target as HTMLInputElement ).validity
+								.valid
+						)
+					}
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+
+			await user.clear( input );
+			await user.type( input, '14' );
+
+			expect( input ).toHaveValue( 14 );
+
+			await user.keyboard( '[Enter]' );
+
+			expect( input ).toHaveValue( 10 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 4 );
+
+			// First call: clear value
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 1, '', true );
+			// Second call: valid, unclamped value
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 2, '1', true );
+			// Third call: invalid, unclamped value
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 3, '14', false );
+			// Fourth call: valid, clamped value
+			expect( onChangeSpy ).toHaveBeenNthCalledWith( 4, '10', true );
+		} );
+	} );
+
+	describe( 'Validation', () => {
+		it( 'should clamp value within range on ENTER keypress', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+
+			await user.clear( input );
+			await user.type( input, '-100' );
+			await user.keyboard( '[Enter]' );
+
+			/**
+			 * This is zero because the value has been adjusted to
+			 * respect the min/max range of the input.
+			 */
+			expect( input ).toHaveValue( 0 );
+		} );
+
+		it( 'should clamp value within range on blur', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.type( input, '41' );
+
+			// Before blurring, the value is still un-clamped
+			expect( input ).toHaveValue( 41 );
+
+			// Blur the input
+			await user.click( document.body );
+
+			// After blur, value is clamped
+			expect( input ).toHaveValue( 10 );
+		} );
+
+		it( 'should parse non-numeric values to a number on ENTER keypress when required', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } required /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.type( input, 'abc' );
+			await user.keyboard( '[Enter]' );
+
+			expect( input ).toHaveValue( 0 );
+		} );
+
+		it( 'should parse non-numeric values to empty string on ENTER keypress when not required', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } required={ false } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.type( input, 'abc' );
+			await user.keyboard( '[Enter]' );
+
+			// Note: the `input` field may still visually show the invalid input,
+			// while internally parsing the value as an empty string.
+			//
+			// React Testing Library associates `null` to empty string types for
+			// numeric `input` elements
+			// (see https://github.com/testing-library/jest-dom/blob/v5.16.5/src/utils.js#L191-L192)
+			expect( input ).toHaveValue( null );
+		} );
+
+		it( 'should not enforce numerical value for empty string when required is omitted', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.keyboard( '[Enter]' );
+
+			// React Testing Library associates `null` to empty string types for
+			// numeric `input` elements
+			// (see https://github.com/testing-library/jest-dom/blob/v5.16.5/src/utils.js#L191-L192)
+			expect( input ).toHaveValue( null );
+		} );
+
+		it( 'should enforce numerical value for empty string when required', async () => {
+			const user = userEvent.setup();
+
+			render( <NumberControl value={ 5 } required /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.clear( input );
+			await user.keyboard( '[Enter]' );
+
+			expect( input ).toHaveValue( 0 );
+		} );
+	} );
+
+	describe( 'Key UP interactions', () => {
+		it( 'should fire onKeyDown callback', async () => {
+			const user = userEvent.setup();
+
+			const spy = jest.fn();
+
+			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( spy ).toHaveBeenCalled();
+		} );
+
+		it( 'should increment by step on key UP press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( input ).toHaveValue( 6 );
+		} );
+
+		it( 'should increment from a negative value', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ -5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( input ).toHaveValue( -4 );
+		} );
+
+		it( 'should increment while preserving the decimal value when `step` is “any”', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( input ).toHaveValue( 867.5309 );
+		} );
+
+		it( 'should increment by step multiplied by spinFactor when spinFactor is provided', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					step={ 0.01 }
+					spinFactor={ 10 }
+					value={ 1.65 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowUp]' );
+
+			expect( input ).toHaveValue( 1.75 );
+		} );
+
+		it( 'should increment by shiftStep on key UP + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 20 );
+		} );
+
+		it( 'should increment by shiftStep multiplied by spinFactor on key UP + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } spinFactor={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 50 );
+		} );
+
+		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 867.5309 );
+		} );
+
+		it( 'should increment by custom shiftStep on key UP + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 100 );
+		} );
+
+		it( 'should increment but be limited by max on shiftStep', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					value={ 5 }
+					shiftStep={ 100 }
+					max={ 99 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 99 );
+		} );
+
+		it( 'should not increment by shiftStep if disabled', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					value={ 5 }
+					shiftStep={ 100 }
+					isShiftStepEnabled={ false }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowUp]{/Shift}' );
+
+			expect( input ).toHaveValue( 6 );
+		} );
+	} );
+
+	describe( 'Key DOWN interactions', () => {
+		it( 'should fire onKeyDown callback', async () => {
+			const user = userEvent.setup();
+			const spy = jest.fn();
+
+			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( spy ).toHaveBeenCalled();
+		} );
+
+		it( 'should decrement by step on key DOWN press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( input ).toHaveValue( 4 );
+		} );
+
+		it( 'should decrement from a negative value', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ -5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( input ).toHaveValue( -6 );
+		} );
+
+		it( 'should decrement while preserving the decimal value when `step` is “any”', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( input ).toHaveValue( 867.5309 );
+		} );
+
+		it( 'should decrement by step multiplied by spinFactor when spinFactor is provided', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					step={ 0.01 }
+					spinFactor={ 10 }
+					value={ 1.65 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '[ArrowDown]' );
+
+			expect( input ).toHaveValue( 1.55 );
+		} );
+
+		it( 'should decrement by shiftStep on key DOWN + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 0 );
+		} );
+
+		it( 'should decrement by shiftStep multiplied by spinFactor on key DOWN + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 100 } spinFactor={ 5 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 50 );
+		} );
+
+		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 867.5309 );
+		} );
+
+		it( 'should decrement by custom shiftStep on key DOWN + shift press', async () => {
+			const user = userEvent.setup();
+
+			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( -100 );
+		} );
+
+		it( 'should decrement but be limited by min on shiftStep', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					value={ 5 }
+					shiftStep={ 100 }
+					min={ 4 }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 4 );
+		} );
+
+		it( 'should not decrement by shiftStep if disabled', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<StatefulNumberControl
+					value={ 5 }
+					shiftStep={ 100 }
+					isShiftStepEnabled={ false }
+				/>
+			);
+
+			const input = screen.getByRole( 'spinbutton' );
+			await user.click( input );
+			await user.keyboard( '{Shift>}[ArrowDown]{/Shift}' );
+
+			expect( input ).toHaveValue( 4 );
+		} );
+	} );
+
+	describe( 'custom spin buttons', () => {
+		test.each( [
+			undefined,
+			'none',
+			'native',
+		] as NumberControlProps[ 'spinControls' ][] )(
+			'should not appear when spinControls = %s',
+			( spinControls ) => {
+				render( <NumberControl spinControls={ spinControls } /> );
+				expect(
+					screen.queryByLabelText( 'Increment' )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByLabelText( 'Decrement' )
+				).not.toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			[ 'up', '1', {} ],
+			[ 'up', '2', { value: '1' } ],
+			[ 'up', '12', { value: '10', step: '2' } ],
+			[ 'up', '10', { value: '10', max: 10 } ],
+			[ 'up', '10.1', { value: '10', step: '0.01', spinFactor: 10 } ],
+			[ 'down', '-1', {} ],
+			[ 'down', '1', { value: '2' } ],
+			[ 'down', '10', { value: '12', step: '2' } ],
+			[ 'down', '10', { value: '10', min: 10 } ],
+			[ 'down', '9.9', { value: '10', step: '0.01', spinFactor: 10 } ],
+		] )(
+			'should spin %s to %s when props = %o',
+			async ( direction, expectedValue, props ) => {
+				const user = userEvent.setup();
+				const onChange = jest.fn();
+				render(
+					<NumberControl
+						{ ...props }
+						spinControls="custom"
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByLabelText(
+						direction === 'up' ? 'Increment' : 'Decrement'
+					)
+				);
+				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
+					event: expect.objectContaining( {
+						target: expect.any( HTMLInputElement ),
+						type: expect.any( String ),
+					} ),
+				} );
+			}
+		);
+	} );
+} );
diff --git a/packages/components/src/number-control/types.ts b/packages/components/src/number-control/types.ts
index a6cb68d81c3914..2a0fbf402d3569 100644
--- a/packages/components/src/number-control/types.ts
+++ b/packages/components/src/number-control/types.ts
@@ -15,7 +15,7 @@ export type NumberControlProps = Omit<
 	 */
 	hideHTMLArrows?: boolean;
 	/**
-	 * The type of spin controls to display. These are butons that allow the
+	 * The type of spin controls to display. These are buttons that allow the
 	 * user to quickly increment and decrement the number.
 	 *
 	 * - 'none' - Do not show spin controls.
@@ -74,6 +74,13 @@ export type NumberControlProps = Omit<
 	 * @default 1
 	 */
 	step?: InputControlProps[ 'step' ];
+	/**
+	 * Optional multiplication factor in spin changes. i.e. A spin changes
+	 * by `spinFactor * step` (if `step` is "any", 1 is used instead).
+	 *
+	 * @default 1
+	 */
+	spinFactor?: number;
 	/**
 	 * The `type` attribute of the `input` element.
 	 *
@@ -84,4 +91,11 @@ export type NumberControlProps = Omit<
 	 * The value of the input.
 	 */
 	value?: number | string;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };
diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
deleted file mode 100644
index 0b52d309c03fa7..00000000000000
--- a/packages/components/src/palette-edit/index.js
+++ /dev/null
@@ -1,479 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import {
-	__experimentalUseFocusOutside as useFocusOutside,
-	useDebounce,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { FlexItem } from '../flex';
-import { HStack } from '../h-stack';
-import { ItemGroup } from '../item-group';
-import { VStack } from '../v-stack';
-import GradientPicker from '../gradient-picker';
-import ColorPalette from '../color-palette';
-import DropdownMenu from '../dropdown-menu';
-import Popover from '../popover';
-import {
-	PaletteActionsContainer,
-	PaletteEditStyles,
-	PaletteHeading,
-	PaletteHStackHeader,
-	IndicatorStyled,
-	PaletteItem,
-	NameContainer,
-	NameInputControl,
-	DoneButton,
-	RemoveButton,
-} from './styles';
-import { NavigableMenu } from '../navigable-container';
-import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
-import CustomGradientPicker from '../custom-gradient-picker';
-
-const DEFAULT_COLOR = '#000';
-
-function NameInput( { value, onChange, label } ) {
-	return (
-		<NameInputControl
-			label={ label }
-			hideLabelFromVision
-			value={ value }
-			onChange={ onChange }
-		/>
-	);
-}
-
-/**
- * Returns a temporary name for a palette item in the format "Color + id".
- * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
- * It expects slugs to be in the format: slugPrefix + color- + number.
- * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
- *
- * @param {string} elements   An array of color palette items.
- * @param {string} slugPrefix The slug prefix used to match the element slug.
- *
- * @return {string} A unique name for a palette item.
- */
-export function getNameForPosition( elements, slugPrefix ) {
-	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-	const position = elements.reduce( ( previousValue, currentValue ) => {
-		if ( typeof currentValue?.slug === 'string' ) {
-			const matches = currentValue?.slug.match( temporaryNameRegex );
-			if ( matches ) {
-				const id = parseInt( matches[ 1 ], 10 );
-				if ( id >= previousValue ) {
-					return id + 1;
-				}
-			}
-		}
-		return previousValue;
-	}, 1 );
-
-	return sprintf(
-		/* translators: %s: is a temporary id for a custom color */
-		__( 'Color %s' ),
-		position
-	);
-}
-
-function Option( {
-	canOnlyChangeValues,
-	element,
-	onChange,
-	isEditing,
-	onStartEditing,
-	onRemove,
-	onStopEditing,
-	slugPrefix,
-	isGradient,
-} ) {
-	const focusOutsideProps = useFocusOutside( onStopEditing );
-	const value = isGradient ? element.gradient : element.color;
-
-	return (
-		<PaletteItem
-			className={ isEditing ? 'is-selected' : undefined }
-			as="div"
-			onClick={ onStartEditing }
-			{ ...( isEditing
-				? { ...focusOutsideProps }
-				: {
-						style: {
-							cursor: 'pointer',
-						},
-				  } ) }
-		>
-			<HStack justify="flex-start">
-				<FlexItem>
-					<IndicatorStyled
-						style={ { background: value, color: 'transparent' } }
-					/>
-				</FlexItem>
-				<FlexItem>
-					{ isEditing && ! canOnlyChangeValues ? (
-						<NameInput
-							label={
-								isGradient
-									? __( 'Gradient name' )
-									: __( 'Color name' )
-							}
-							value={ element.name }
-							onChange={ ( nextName ) =>
-								onChange( {
-									...element,
-									name: nextName,
-									slug: slugPrefix + kebabCase( nextName ),
-								} )
-							}
-						/>
-					) : (
-						<NameContainer>{ element.name }</NameContainer>
-					) }
-				</FlexItem>
-				{ isEditing && ! canOnlyChangeValues && (
-					<FlexItem>
-						<RemoveButton
-							isSmall
-							icon={ lineSolid }
-							label={ __( 'Remove color' ) }
-							onClick={ onRemove }
-						/>
-					</FlexItem>
-				) }
-			</HStack>
-			{ isEditing && (
-				<Popover
-					placement="left-start"
-					offset={ 20 }
-					className="components-palette-edit__popover"
-				>
-					{ ! isGradient && (
-						<ColorPicker
-							color={ value }
-							enableAlpha
-							onChange={ ( newColor ) =>
-								onChange( {
-									...element,
-									color: newColor,
-								} )
-							}
-						/>
-					) }
-					{ isGradient && (
-						<div className="components-palette-edit__popover-gradient-picker">
-							<CustomGradientPicker
-								__nextHasNoMargin
-								__experimentalIsRenderedInSidebar
-								value={ value }
-								onChange={ ( newGradient ) =>
-									onChange( {
-										...element,
-										gradient: newGradient,
-									} )
-								}
-							/>
-						</div>
-					) }
-				</Popover>
-			) }
-		</PaletteItem>
-	);
-}
-
-function isTemporaryElement( slugPrefix, { slug, color, gradient } ) {
-	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
-	return (
-		regex.test( slug ) &&
-		( ( !! color && color === DEFAULT_COLOR ) ||
-			( !! gradient && gradient === DEFAULT_GRADIENT ) )
-	);
-}
-
-function PaletteEditListView( {
-	elements,
-	onChange,
-	editingElement,
-	setEditingElement,
-	canOnlyChangeValues,
-	slugPrefix,
-	isGradient,
-} ) {
-	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
-	const elementsReference = useRef();
-	useEffect( () => {
-		elementsReference.current = elements;
-	}, [ elements ] );
-	useEffect( () => {
-		return () => {
-			if (
-				elementsReference.current.some( ( element, index ) =>
-					isTemporaryElement( slugPrefix, element, index )
-				)
-			) {
-				const newElements = elementsReference.current.filter(
-					( element ) => ! isTemporaryElement( slugPrefix, element )
-				);
-				onChange( newElements.length ? newElements : undefined );
-			}
-		};
-		// Disable reason: adding the missing dependency here would cause breaking changes that will require
-		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const debounceOnChange = useDebounce( onChange, 100 );
-
-	return (
-		<VStack spacing={ 3 }>
-			<ItemGroup isRounded>
-				{ elements.map( ( element, index ) => (
-					<Option
-						isGradient={ isGradient }
-						canOnlyChangeValues={ canOnlyChangeValues }
-						key={ index }
-						element={ element }
-						onStartEditing={ () => {
-							if ( editingElement !== index ) {
-								setEditingElement( index );
-							}
-						} }
-						onChange={ ( newElement ) => {
-							debounceOnChange(
-								elements.map(
-									( currentElement, currentIndex ) => {
-										if ( currentIndex === index ) {
-											return newElement;
-										}
-										return currentElement;
-									}
-								)
-							);
-						} }
-						onRemove={ () => {
-							setEditingElement( null );
-							const newElements = elements.filter(
-								( _currentElement, currentIndex ) => {
-									if ( currentIndex === index ) {
-										return false;
-									}
-									return true;
-								}
-							);
-							onChange(
-								newElements.length ? newElements : undefined
-							);
-						} }
-						isEditing={ index === editingElement }
-						onStopEditing={ () => {
-							if ( index === editingElement ) {
-								setEditingElement( null );
-							}
-						} }
-						slugPrefix={ slugPrefix }
-					/>
-				) ) }
-			</ItemGroup>
-		</VStack>
-	);
-}
-
-const EMPTY_ARRAY = [];
-
-export default function PaletteEdit( {
-	gradients,
-	colors = EMPTY_ARRAY,
-	onChange,
-	paletteLabel,
-	emptyMessage,
-	canOnlyChangeValues,
-	canReset,
-	slugPrefix = '',
-} ) {
-	const isGradient = !! gradients;
-	const elements = isGradient ? gradients : colors;
-	const [ isEditing, setIsEditing ] = useState( false );
-	const [ editingElement, setEditingElement ] = useState( null );
-	const isAdding =
-		isEditing &&
-		editingElement &&
-		elements[ editingElement ] &&
-		! elements[ editingElement ].slug;
-	const elementsLength = elements.length;
-	const hasElements = elementsLength > 0;
-
-	return (
-		<PaletteEditStyles>
-			<PaletteHStackHeader>
-				<PaletteHeading>{ paletteLabel }</PaletteHeading>
-				<PaletteActionsContainer>
-					{ hasElements && isEditing && (
-						<DoneButton
-							isSmall
-							onClick={ () => {
-								setIsEditing( false );
-								setEditingElement( null );
-							} }
-						>
-							{ __( 'Done' ) }
-						</DoneButton>
-					) }
-					{ ! canOnlyChangeValues && (
-						<Button
-							isSmall
-							isPressed={ isAdding }
-							icon={ plus }
-							label={
-								isGradient
-									? __( 'Add gradient' )
-									: __( 'Add color' )
-							}
-							onClick={ () => {
-								const tempOptionName = getNameForPosition(
-									elements,
-									slugPrefix
-								);
-
-								onChange( [
-									...elements,
-									{
-										...( isGradient
-											? { gradient: DEFAULT_GRADIENT }
-											: { color: DEFAULT_COLOR } ),
-										name: tempOptionName,
-										slug:
-											slugPrefix +
-											kebabCase( tempOptionName ),
-									},
-								] );
-								setIsEditing( true );
-								setEditingElement( elements.length );
-							} }
-						/>
-					) }
-
-					{ hasElements &&
-						( ! isEditing ||
-							! canOnlyChangeValues ||
-							canReset ) && (
-							<DropdownMenu
-								icon={ moreVertical }
-								label={
-									isGradient
-										? __( 'Gradient options' )
-										: __( 'Color options' )
-								}
-								toggleProps={ {
-									isSmall: true,
-								} }
-							>
-								{ ( { onClose } ) => (
-									<>
-										<NavigableMenu role="menu">
-											{ ! isEditing && (
-												<Button
-													variant="tertiary"
-													onClick={ () => {
-														setIsEditing( true );
-														onClose();
-													} }
-													className="components-palette-edit__menu-button"
-												>
-													{ isGradient
-														? __( 'Edit gradients' )
-														: __( 'Edit colors' ) }
-												</Button>
-											) }
-											{ ! canOnlyChangeValues && (
-												<Button
-													variant="tertiary"
-													onClick={ () => {
-														setEditingElement(
-															null
-														);
-														setIsEditing( false );
-														onChange();
-														onClose();
-													} }
-													className="components-palette-edit__menu-button"
-												>
-													{ isGradient
-														? __(
-																'Remove all gradients'
-														  )
-														: __(
-																'Remove all colors'
-														  ) }
-												</Button>
-											) }
-											{ canReset && (
-												<Button
-													variant="tertiary"
-													onClick={ () => {
-														setEditingElement(
-															null
-														);
-														onChange();
-														onClose();
-													} }
-												>
-													{ isGradient
-														? __( 'Reset gradient' )
-														: __( 'Reset colors' ) }
-												</Button>
-											) }
-										</NavigableMenu>
-									</>
-								) }
-							</DropdownMenu>
-						) }
-				</PaletteActionsContainer>
-			</PaletteHStackHeader>
-			{ hasElements && (
-				<>
-					{ isEditing && (
-						<PaletteEditListView
-							canOnlyChangeValues={ canOnlyChangeValues }
-							elements={ elements }
-							onChange={ onChange }
-							editingElement={ editingElement }
-							setEditingElement={ setEditingElement }
-							slugPrefix={ slugPrefix }
-							isGradient={ isGradient }
-						/>
-					) }
-					{ ! isEditing &&
-						( isGradient ? (
-							<GradientPicker
-								__nextHasNoMargin
-								gradients={ gradients }
-								onChange={ () => {} }
-								clearable={ false }
-								disableCustomGradients={ true }
-							/>
-						) : (
-							<ColorPalette
-								colors={ colors }
-								onChange={ () => {} }
-								clearable={ false }
-								disableCustomColors={ true }
-							/>
-						) ) }
-				</>
-			) }
-			{ ! hasElements && emptyMessage }
-		</PaletteEditStyles>
-	);
-}
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
new file mode 100644
index 00000000000000..a58ecbb685e514
--- /dev/null
+++ b/packages/components/src/palette-edit/index.tsx
@@ -0,0 +1,631 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { lineSolid, moreVertical, plus } from '@wordpress/icons';
+import { useDebounce } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { ColorPicker } from '../color-picker';
+import { FlexItem } from '../flex';
+import { HStack } from '../h-stack';
+import { Item, ItemGroup } from '../item-group';
+import { VStack } from '../v-stack';
+import GradientPicker from '../gradient-picker';
+import ColorPalette from '../color-palette';
+import DropdownMenu from '../dropdown-menu';
+import Popover from '../popover';
+import {
+	PaletteActionsContainer,
+	PaletteEditStyles,
+	PaletteHeading,
+	IndicatorStyled,
+	NameContainer,
+	NameInputControl,
+	DoneButton,
+	RemoveButton,
+	PaletteEditContents,
+} from './styles';
+import { NavigableMenu } from '../navigable-container';
+import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
+import CustomGradientPicker from '../custom-gradient-picker';
+import { kebabCase } from '../utils/strings';
+import type {
+	Color,
+	ColorPickerPopoverProps,
+	NameInputProps,
+	OptionProps,
+	PaletteEditListViewProps,
+	PaletteEditProps,
+	PaletteElement,
+} from './types';
+
+const DEFAULT_COLOR = '#000';
+
+function NameInput( { value, onChange, label }: NameInputProps ) {
+	return (
+		<NameInputControl
+			label={ label }
+			hideLabelFromVision
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
+}
+
+/*
+ * Deduplicates the slugs of the provided elements.
+ */
+export function deduplicateElementSlugs< T extends PaletteElement >(
+	elements: T[]
+) {
+	const slugCounts: { [ slug: string ]: number } = {};
+
+	return elements.map( ( element ) => {
+		let newSlug: string | undefined;
+
+		const { slug } = element;
+		slugCounts[ slug ] = ( slugCounts[ slug ] || 0 ) + 1;
+
+		if ( slugCounts[ slug ] > 1 ) {
+			newSlug = `${ slug }-${ slugCounts[ slug ] - 1 }`;
+		}
+
+		return { ...element, slug: newSlug ?? slug };
+	} );
+}
+
+/**
+ * Returns a name and slug for a palette item. The name takes the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs.
+ * It expects slugs to be in the format: slugPrefix + color- + number.
+ * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
+ *
+ * @param elements   An array of color palette items.
+ * @param slugPrefix The slug prefix used to match the element slug.
+ *
+ * @return A name and slug for the new palette item.
+ */
+export function getNameAndSlugForPosition(
+	elements: PaletteElement[],
+	slugPrefix: string
+) {
+	const nameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const position = elements.reduce( ( previousValue, currentValue ) => {
+		if ( typeof currentValue?.slug === 'string' ) {
+			const matches = currentValue?.slug.match( nameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id >= previousValue ) {
+					return id + 1;
+				}
+			}
+		}
+		return previousValue;
+	}, 1 );
+
+	return {
+		name: sprintf(
+			/* translators: %s: is an id for a custom color */
+			__( 'Color %s' ),
+			position
+		),
+		slug: `${ slugPrefix }color-${ position }`,
+	};
+}
+
+function ColorPickerPopover< T extends PaletteElement >( {
+	isGradient,
+	element,
+	onChange,
+	popoverProps: receivedPopoverProps,
+	onClose = () => {},
+}: ColorPickerPopoverProps< T > ) {
+	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =
+		useMemo(
+			() => ( {
+				shift: true,
+				offset: 20,
+				// Disabling resize as it would otherwise cause the popover to show
+				// scrollbars while dragging the color picker's handle close to the
+				// popover edge.
+				resize: false,
+				placement: 'left-start',
+				...receivedPopoverProps,
+				className: clsx(
+					'components-palette-edit__popover',
+					receivedPopoverProps?.className
+				),
+			} ),
+			[ receivedPopoverProps ]
+		);
+
+	return (
+		<Popover { ...popoverProps } onClose={ onClose }>
+			{ ! isGradient && (
+				<ColorPicker
+					color={ element.color }
+					enableAlpha
+					onChange={ ( newColor ) => {
+						onChange( {
+							...element,
+							color: newColor,
+						} );
+					} }
+				/>
+			) }
+			{ isGradient && (
+				<div className="components-palette-edit__popover-gradient-picker">
+					<CustomGradientPicker
+						__experimentalIsRenderedInSidebar
+						value={ element.gradient }
+						onChange={ ( newGradient ) => {
+							onChange( {
+								...element,
+								gradient: newGradient,
+							} );
+						} }
+					/>
+				</div>
+			) }
+		</Popover>
+	);
+}
+
+function Option< T extends PaletteElement >( {
+	canOnlyChangeValues,
+	element,
+	onChange,
+	onRemove,
+	popoverProps: receivedPopoverProps,
+	slugPrefix,
+	isGradient,
+}: OptionProps< T > ) {
+	const value = isGradient ? element.gradient : element.color;
+	const [ isEditingColor, setIsEditingColor ] = useState( false );
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const popoverProps = useMemo(
+		() => ( {
+			...receivedPopoverProps,
+			// Use the custom palette color item as the popover anchor.
+			anchor: popoverAnchor,
+		} ),
+		[ popoverAnchor, receivedPopoverProps ]
+	);
+
+	return (
+		<Item ref={ setPopoverAnchor } size="small">
+			<HStack justify="flex-start">
+				<Button
+					size="small"
+					onClick={ () => {
+						setIsEditingColor( true );
+					} }
+					aria-label={ sprintf(
+						// translators: %s is a color or gradient name, e.g. "Red".
+						__( 'Edit: %s' ),
+						element.name.trim().length ? element.name : value
+					) }
+					style={ { padding: 0 } }
+				>
+					<IndicatorStyled colorValue={ value } />
+				</Button>
+				<FlexItem>
+					{ ! canOnlyChangeValues ? (
+						<NameInput
+							label={
+								isGradient
+									? __( 'Gradient name' )
+									: __( 'Color name' )
+							}
+							value={ element.name }
+							onChange={ ( nextName?: string ) =>
+								onChange( {
+									...element,
+									name: nextName,
+									slug:
+										slugPrefix +
+										kebabCase( nextName ?? '' ),
+								} )
+							}
+						/>
+					) : (
+						<NameContainer>
+							{ element.name.trim().length
+								? element.name
+								: /* Fall back to non-breaking space to maintain height */
+								  '\u00A0' }
+						</NameContainer>
+					) }
+				</FlexItem>
+				{ ! canOnlyChangeValues && (
+					<FlexItem>
+						<RemoveButton
+							size="small"
+							icon={ lineSolid }
+							label={ sprintf(
+								// translators: %s is a color or gradient name, e.g. "Red".
+								__( 'Remove color: %s' ),
+								element.name.trim().length
+									? element.name
+									: value
+							) }
+							onClick={ onRemove }
+						/>
+					</FlexItem>
+				) }
+			</HStack>
+			{ isEditingColor && (
+				<ColorPickerPopover
+					isGradient={ isGradient }
+					onChange={ onChange }
+					element={ element }
+					popoverProps={ popoverProps }
+					onClose={ () => setIsEditingColor( false ) }
+				/>
+			) }
+		</Item>
+	);
+}
+
+function PaletteEditListView< T extends PaletteElement >( {
+	elements,
+	onChange,
+	canOnlyChangeValues,
+	slugPrefix,
+	isGradient,
+	popoverProps,
+	addColorRef,
+}: PaletteEditListViewProps< T > ) {
+	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
+	const elementsReferenceRef = useRef< typeof elements >();
+	useEffect( () => {
+		elementsReferenceRef.current = elements;
+	}, [ elements ] );
+
+	const debounceOnChange = useDebounce(
+		( updatedElements: T[] ) =>
+			onChange( deduplicateElementSlugs( updatedElements ) ),
+		100
+	);
+
+	return (
+		<VStack spacing={ 3 }>
+			<ItemGroup isRounded isBordered isSeparated>
+				{ elements.map( ( element, index ) => (
+					<Option
+						isGradient={ isGradient }
+						canOnlyChangeValues={ canOnlyChangeValues }
+						key={ index }
+						element={ element }
+						onChange={ ( newElement ) => {
+							debounceOnChange(
+								elements.map(
+									( currentElement, currentIndex ) => {
+										if ( currentIndex === index ) {
+											return newElement;
+										}
+										return currentElement;
+									}
+								)
+							);
+						} }
+						onRemove={ () => {
+							const newElements = elements.filter(
+								( _currentElement, currentIndex ) => {
+									if ( currentIndex === index ) {
+										return false;
+									}
+									return true;
+								}
+							);
+							onChange(
+								newElements.length ? newElements : undefined
+							);
+							addColorRef.current?.focus();
+						} }
+						slugPrefix={ slugPrefix }
+						popoverProps={ popoverProps }
+					/>
+				) ) }
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+const EMPTY_ARRAY: Color[] = [];
+
+/**
+ * Allows editing a palette of colors or gradients.
+ *
+ * ```jsx
+ * import { PaletteEdit } from '@wordpress/components';
+ * const MyPaletteEdit = () => {
+ *   const [ controlledColors, setControlledColors ] = useState( colors );
+ *
+ *   return (
+ *     <PaletteEdit
+ *       colors={ controlledColors }
+ *       onChange={ ( newColors?: Color[] ) => {
+ *         setControlledColors( newColors );
+ *       } }
+ *       paletteLabel="Here is a label"
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function PaletteEdit( {
+	gradients,
+	colors = EMPTY_ARRAY,
+	onChange,
+	paletteLabel,
+	paletteLabelHeadingLevel = 2,
+	emptyMessage,
+	canOnlyChangeValues,
+	canReset,
+	slugPrefix = '',
+	popoverProps,
+}: PaletteEditProps ) {
+	const isGradient = !! gradients;
+	const elements = isGradient ? gradients : colors;
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ editingElement, setEditingElement ] = useState<
+		number | null | undefined
+	>( null );
+	const isAdding =
+		isEditing &&
+		!! editingElement &&
+		elements[ editingElement ] &&
+		! elements[ editingElement ].slug;
+	const elementsLength = elements.length;
+	const hasElements = elementsLength > 0;
+	const debounceOnChange = useDebounce( onChange, 100 );
+	const onSelectPaletteItem = useCallback(
+		(
+			value?: PaletteElement[ keyof PaletteElement ],
+			newEditingElementIndex?: number
+		) => {
+			const selectedElement =
+				newEditingElementIndex === undefined
+					? undefined
+					: elements[ newEditingElementIndex ];
+			const key = isGradient ? 'gradient' : 'color';
+			// Ensures that the index returned matches a known element value.
+			if ( !! selectedElement && selectedElement[ key ] === value ) {
+				setEditingElement( newEditingElementIndex );
+			} else {
+				setIsEditing( true );
+			}
+		},
+		[ isGradient, elements ]
+	);
+
+	const addColorRef = useRef< HTMLButtonElement | null >( null );
+
+	return (
+		<PaletteEditStyles>
+			<HStack>
+				<PaletteHeading level={ paletteLabelHeadingLevel }>
+					{ paletteLabel }
+				</PaletteHeading>
+				<PaletteActionsContainer>
+					{ hasElements && isEditing && (
+						<DoneButton
+							size="small"
+							onClick={ () => {
+								setIsEditing( false );
+								setEditingElement( null );
+							} }
+						>
+							{ __( 'Done' ) }
+						</DoneButton>
+					) }
+					{ ! canOnlyChangeValues && (
+						<Button
+							ref={ addColorRef }
+							size="small"
+							isPressed={ isAdding }
+							icon={ plus }
+							label={
+								isGradient
+									? __( 'Add gradient' )
+									: __( 'Add color' )
+							}
+							onClick={ () => {
+								const { name, slug } =
+									getNameAndSlugForPosition(
+										elements,
+										slugPrefix
+									);
+
+								if ( !! gradients ) {
+									onChange( [
+										...gradients,
+										{
+											gradient: DEFAULT_GRADIENT,
+											name,
+											slug,
+										},
+									] );
+								} else {
+									onChange( [
+										...colors,
+										{
+											color: DEFAULT_COLOR,
+											name,
+											slug,
+										},
+									] );
+								}
+								setIsEditing( true );
+								setEditingElement( elements.length );
+							} }
+						/>
+					) }
+
+					{ hasElements &&
+						( ! isEditing ||
+							! canOnlyChangeValues ||
+							canReset ) && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={
+									isGradient
+										? __( 'Gradient options' )
+										: __( 'Color options' )
+								}
+								toggleProps={ {
+									size: 'small',
+								} }
+							>
+								{ ( { onClose }: { onClose: () => void } ) => (
+									<>
+										<NavigableMenu role="menu">
+											{ ! isEditing && (
+												<Button
+													__next40pxDefaultSize
+													variant="tertiary"
+													onClick={ () => {
+														setIsEditing( true );
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ __( 'Show details' ) }
+												</Button>
+											) }
+											{ ! canOnlyChangeValues && (
+												<Button
+													__next40pxDefaultSize
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														setIsEditing( false );
+														onChange();
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ isGradient
+														? __(
+																'Remove all gradients'
+														  )
+														: __(
+																'Remove all colors'
+														  ) }
+												</Button>
+											) }
+											{ canReset && (
+												<Button
+													__next40pxDefaultSize
+													className="components-palette-edit__menu-button"
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														onChange();
+														onClose();
+													} }
+												>
+													{ isGradient
+														? __( 'Reset gradient' )
+														: __( 'Reset colors' ) }
+												</Button>
+											) }
+										</NavigableMenu>
+									</>
+								) }
+							</DropdownMenu>
+						) }
+				</PaletteActionsContainer>
+			</HStack>
+			{ hasElements && (
+				<PaletteEditContents>
+					{ isEditing && (
+						<PaletteEditListView< ( typeof elements )[ number ] >
+							canOnlyChangeValues={ canOnlyChangeValues }
+							elements={ elements }
+							// @ts-expect-error TODO: Don't know how to resolve
+							onChange={ onChange }
+							slugPrefix={ slugPrefix }
+							isGradient={ isGradient }
+							popoverProps={ popoverProps }
+							addColorRef={ addColorRef }
+						/>
+					) }
+					{ ! isEditing && editingElement !== null && (
+						<ColorPickerPopover
+							isGradient={ isGradient }
+							onClose={ () => setEditingElement( null ) }
+							onChange={ (
+								newElement: ( typeof elements )[ number ]
+							) => {
+								debounceOnChange(
+									// @ts-expect-error TODO: Don't know how to resolve
+									elements.map(
+										(
+											currentElement: ( typeof elements )[ number ],
+											currentIndex: number
+										) => {
+											if (
+												currentIndex === editingElement
+											) {
+												return newElement;
+											}
+											return currentElement;
+										}
+									)
+								);
+							} }
+							element={ elements[ editingElement ?? -1 ] }
+							popoverProps={ popoverProps }
+						/>
+					) }
+					{ ! isEditing &&
+						( isGradient ? (
+							<GradientPicker
+								gradients={ gradients }
+								onChange={ onSelectPaletteItem }
+								clearable={ false }
+								disableCustomGradients
+							/>
+						) : (
+							<ColorPalette
+								colors={ colors }
+								onChange={ onSelectPaletteItem }
+								clearable={ false }
+								disableCustomColors
+							/>
+						) ) }
+				</PaletteEditContents>
+			) }
+			{ ! hasElements && emptyMessage && (
+				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
+			) }
+		</PaletteEditStyles>
+	);
+}
+
+export default PaletteEdit;
diff --git a/packages/components/src/palette-edit/stories/index.story.tsx b/packages/components/src/palette-edit/stories/index.story.tsx
new file mode 100644
index 00000000000000..e78bc04d5b9ec9
--- /dev/null
+++ b/packages/components/src/palette-edit/stories/index.story.tsx
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PaletteEdit from '..';
+import type { Color, Gradient } from '../types';
+
+const meta: Meta< typeof PaletteEdit > = {
+	title: 'Components/PaletteEdit',
+	component: PaletteEdit,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof PaletteEdit > = ( args ) => {
+	const { colors, gradients, onChange, ...props } = args;
+	const [ value, setValue ] = useState( gradients || colors );
+
+	return (
+		<PaletteEdit
+			{ ...( gradients
+				? {
+						gradients: value as Gradient[],
+						onChange: ( newValue?: Gradient[] ) => {
+							setValue( newValue );
+							onChange( newValue );
+						},
+				  }
+				: {
+						colors: value as Color[],
+						onChange: ( newValue?: Color[] ) => {
+							setValue( newValue );
+							onChange( newValue );
+						},
+				  } ) }
+			{ ...props }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colors: [
+		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
+		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+		{ color: '#fb326b', name: 'Tertiary', slug: 'tertiary' },
+	],
+	paletteLabel: 'Colors',
+	emptyMessage: 'Colors are empty',
+	popoverProps: {
+		placement: 'bottom-start',
+		offset: 8,
+	},
+};
+
+export const Gradients = Template.bind( {} );
+Gradients.args = {
+	gradients: [
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+			name: 'Pale ocean',
+			slug: 'pale-ocean',
+		},
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+			name: 'Midnight',
+			slug: 'midnight',
+		},
+	],
+	paletteLabel: 'Gradients',
+	emptyMessage: 'Gradients are empty',
+};
diff --git a/packages/components/src/palette-edit/style.scss b/packages/components/src/palette-edit/style.scss
index 55fdfbf42cb525..d73c7ff46cc3c0 100644
--- a/packages/components/src/palette-edit/style.scss
+++ b/packages/components/src/palette-edit/style.scss
@@ -1,6 +1,6 @@
 .components-palette-edit__popover-gradient-picker {
-	width: 280px;
-	padding: 8px;
+	width: 260px;
+	padding: $grid-unit-10;
 }
 .components-dropdown-menu__menu {
 	.components-palette-edit__menu-button {
diff --git a/packages/components/src/palette-edit/styles.js b/packages/components/src/palette-edit/styles.js
deleted file mode 100644
index e524f153f88482..00000000000000
--- a/packages/components/src/palette-edit/styles.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { Heading } from '../heading';
-import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
-import { COLORS, CONFIG } from '../utils';
-import { View } from '../view';
-import InputControl from '../input-control';
-import {
-	Container as InputControlContainer,
-	Input,
-	BackdropUI as InputBackdropUI,
-} from '../input-control/styles/input-control-styles';
-import CircularOptionPicker from '../circular-option-picker';
-
-export const IndicatorStyled = styled( CircularOptionPicker.Option )`
-	width: ${ space( 6 ) };
-	height: ${ space( 6 ) };
-	pointer-events: none;
-`;
-
-export const NameInputControl = styled( InputControl )`
-	${ InputControlContainer } {
-		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius };
-		${ Input }${ Input }${ Input }${ Input } {
-			height: ${ space( 8 ) };
-		}
-		${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {
-			border-color: transparent;
-			box-shadow: none;
-		}
-	}
-`;
-
-export const PaletteItem = styled( View )`
-	padding: 3px 0 3px ${ space( 3 ) };
-	height: calc( 40px - ${ CONFIG.borderWidth } );
-	border: 1px solid ${ CONFIG.surfaceBorderColor };
-	border-bottom-color: transparent;
-	&:first-of-type {
-		border-top-left-radius: ${ CONFIG.controlBorderRadius };
-		border-top-right-radius: ${ CONFIG.controlBorderRadius };
-	}
-	&:last-of-type {
-		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
-		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
-		border-bottom-color: ${ CONFIG.surfaceBorderColor };
-	}
-	&.is-selected + & {
-		border-top-color: transparent;
-	}
-	&.is-selected {
-		border-color: ${ COLORS.ui.theme };
-	}
-`;
-
-export const NameContainer = styled.div`
-	line-height: ${ space( 8 ) };
-	margin-left: ${ space( 2 ) };
-	margin-right: ${ space( 2 ) };
-	white-space: nowrap;
-	overflow: hidden;
-	${ PaletteItem }:hover & {
-		color: ${ COLORS.ui.theme };
-	}
-`;
-
-export const PaletteHeading = styled( Heading )`
-	text-transform: uppercase;
-	line-height: ${ space( 6 ) };
-	font-weight: 500;
-	&&& {
-		font-size: 11px;
-		margin-bottom: 0;
-	}
-`;
-
-export const PaletteActionsContainer = styled( View )`
-	height: ${ space( 6 ) };
-	display: flex;
-`;
-
-export const PaletteHStackHeader = styled( HStack )`
-	margin-bottom: ${ space( 2 ) };
-`;
-
-export const PaletteEditStyles = styled( View )`
-	&&& {
-		.components-button.has-icon {
-			min-width: 0;
-			padding: 0;
-		}
-	}
-`;
-
-export const DoneButton = styled( Button )`
-	&& {
-		color: ${ COLORS.ui.theme };
-	}
-`;
-
-export const RemoveButton = styled( Button )`
-	&& {
-		margin-top: ${ space( 1 ) };
-	}
-`;
diff --git a/packages/components/src/palette-edit/styles.ts b/packages/components/src/palette-edit/styles.ts
new file mode 100644
index 00000000000000..0afe38773fc8e2
--- /dev/null
+++ b/packages/components/src/palette-edit/styles.ts
@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { Heading } from '../heading';
+import { space } from '../utils/space';
+import { COLORS, CONFIG } from '../utils';
+import { View } from '../view';
+import InputControl from '../input-control';
+import {
+	Container as InputControlContainer,
+	Input,
+	BackdropUI as InputBackdropUI,
+} from '../input-control/styles/input-control-styles';
+import ColorIndicator from '../color-indicator';
+
+export const IndicatorStyled = styled( ColorIndicator )`
+	&& {
+		flex-shrink: 0;
+		width: ${ space( 6 ) };
+		height: ${ space( 6 ) };
+	}
+`;
+
+export const NameInputControl = styled( InputControl )`
+	${ InputControlContainer } {
+		background: ${ COLORS.gray[ 100 ] };
+		border-radius: ${ CONFIG.radiusXSmall };
+		${ Input }${ Input }${ Input }${ Input } {
+			height: ${ space( 8 ) };
+		}
+		${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {
+			border-color: transparent;
+			box-shadow: none;
+		}
+	}
+`;
+
+export const NameContainer = styled.div`
+	line-height: ${ space( 8 ) };
+	margin-left: ${ space( 2 ) };
+	margin-right: ${ space( 2 ) };
+	white-space: nowrap;
+	overflow: hidden;
+`;
+
+export const PaletteHeading = styled( Heading )`
+	text-transform: uppercase;
+	line-height: ${ space( 6 ) };
+	font-weight: 500;
+	&&& {
+		font-size: 11px;
+		margin-bottom: 0;
+	}
+`;
+
+export const PaletteActionsContainer = styled( View )`
+	height: ${ space( 6 ) };
+	display: flex;
+`;
+
+export const PaletteEditContents = styled( View )`
+	margin-top: ${ space( 2 ) };
+`;
+
+export const PaletteEditStyles = styled( View )`
+	&&& {
+		.components-button.has-icon {
+			min-width: 0;
+			padding: 0;
+		}
+	}
+`;
+
+export const DoneButton = styled( Button )`
+	&& {
+		color: ${ COLORS.theme.accent };
+	}
+`;
+
+export const RemoveButton = styled( Button )`
+	&& {
+		margin-top: ${ space( 1 ) };
+	}
+`;
diff --git a/packages/components/src/palette-edit/test/index.js b/packages/components/src/palette-edit/test/index.js
deleted file mode 100644
index f13b324efac3de..00000000000000
--- a/packages/components/src/palette-edit/test/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getNameForPosition } from '../';
-
-describe( 'getNameForPosition', () => {
-	test( 'should return 1 by default', () => {
-		const slugPrefix = 'test-';
-		const elements = [];
-
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
-	} );
-
-	test( 'should return a new color name with an incremented slug id', () => {
-		const slugPrefix = 'test-';
-		const elements = [
-			{
-				slug: 'test-color-1',
-			},
-		];
-
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 2'
-		);
-	} );
-
-	test( 'should ignore user-defined color names', () => {
-		const slugPrefix = 'test-';
-		const elements = [
-			{
-				slug: 'a-sweet-color-2',
-			},
-		];
-
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 1'
-		);
-	} );
-
-	test( 'should return a new color name with an incremented slug id one higher than the current highest', () => {
-		const slugPrefix = 'test-';
-		const elements = [
-			{
-				slug: 'test-color-1',
-			},
-			{
-				slug: 'test-color-2',
-			},
-			{
-				slug: 'test-color-150',
-			},
-			{
-				slug: 'a-sweet-color-100',
-			},
-		];
-
-		expect( getNameForPosition( elements, slugPrefix ) ).toEqual(
-			'Color 151'
-		);
-	} );
-} );
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
new file mode 100644
index 00000000000000..7dc00dbba22042
--- /dev/null
+++ b/packages/components/src/palette-edit/test/index.tsx
@@ -0,0 +1,471 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import { click, type, press } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import PaletteEdit, {
+	getNameAndSlugForPosition,
+	deduplicateElementSlugs,
+} from '..';
+import type { PaletteElement } from '../types';
+
+const noop = () => {};
+
+async function clearInput( input: HTMLInputElement ) {
+	await click( input );
+
+	// Press backspace as many times as the input's current value
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	for ( const _ of Array( input.value.length ) ) {
+		await press.Backspace();
+	}
+}
+
+describe( 'getNameAndSlugForPosition', () => {
+	test( 'should return 1 by default', () => {
+		const slugPrefix = 'test-';
+		const elements: PaletteElement[] = [];
+
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
+	} );
+
+	test( 'should return a new color name and slug with an incremented slug id', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+		];
+
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 2',
+			slug: 'test-color-2',
+		} );
+	} );
+
+	test( 'should ignore user-defined color name and slug', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'a-sweet-color-2',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+		];
+
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 1',
+			slug: 'test-color-1',
+		} );
+	} );
+
+	test( 'should return a new color name and slug with an incremented slug id one higher than the current highest', () => {
+		const slugPrefix = 'test-';
+		const elements = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-2',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+			{
+				slug: 'test-color-150',
+				color: '#f6f6f6',
+				name: 'Test Color 150',
+			},
+			{
+				slug: 'a-sweet-color-100',
+				color: '#ffe2c7',
+				name: 'A Sweet Color 100',
+			},
+		];
+
+		expect( getNameAndSlugForPosition( elements, slugPrefix ) ).toEqual( {
+			name: 'Color 151',
+			slug: 'test-color-151',
+		} );
+	} );
+} );
+
+describe( 'deduplicateElementSlugs', () => {
+	it( 'should not change the slugs if they are unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-2',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( elements );
+	} );
+	it( 'should change the slugs if they are not unique', () => {
+		const elements: PaletteElement[] = [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		];
+
+		expect( deduplicateElementSlugs( elements ) ).toEqual( [
+			{
+				slug: 'test-color-1',
+				color: '#ffffff',
+				name: 'Test Color 1',
+			},
+			{
+				slug: 'test-color-1-1',
+				color: '#1a4548',
+				name: 'Test Color 2',
+			},
+		] );
+	} );
+} );
+
+describe( 'PaletteEdit', () => {
+	const defaultProps = {
+		paletteLabel: 'Test label',
+		slugPrefix: '',
+		onChange: noop,
+	};
+
+	const colors = [
+		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
+		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+	];
+	const gradients = [
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+			name: 'Pale ocean',
+			slug: 'pale-ocean',
+		},
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+			name: 'Midnight',
+			slug: 'midnight',
+		},
+	];
+
+	it( 'shows heading label', () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		const paletteLabel = screen.getByRole( 'heading', {
+			level: 2,
+			name: 'Test label',
+		} );
+
+		expect( paletteLabel ).toBeVisible();
+	} );
+
+	it( 'shows heading label with custom heading level', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteLabelHeadingLevel={ 5 }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 5,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows empty message', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				emptyMessage="Test empty message"
+			/>
+		);
+
+		expect( screen.getByText( 'Test empty message' ) ).toBeVisible();
+	} );
+
+	it( 'shows an option to remove all colors', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Remove all colors',
+				} )
+			).toBeVisible();
+		} );
+	} );
+
+	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
+		render(
+			<PaletteEdit { ...defaultProps } colors={ colors } canReset />
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await waitFor( () => {
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Reset colors',
+				} )
+			).toBeVisible();
+		} );
+	} );
+
+	it( 'does not show a reset colors option when `canReset` is disabled', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'calls the `onChange` with the new color appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...colors,
+				{
+					color: '#000',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'calls the `onChange` with the new gradient appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add gradient',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...gradients,
+				{
+					gradient:
+						'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
+		render( <PaletteEdit { ...defaultProps } canOnlyChangeValues /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Add color',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'can remove a color', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Remove color: Primary',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [ colors[ 1 ] ] );
+		} );
+	} );
+
+	it( 'can update palette name', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
+		const nameInput = screen.getByDisplayValue( 'Primary' );
+
+		await clearInput( nameInput as HTMLInputElement );
+
+		await type( 'Primary Updated' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					name: 'Primary Updated',
+					slug: 'primary-updated',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update color palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Color: Primary' ) );
+		const hexInput = screen.getByRole( 'textbox', {
+			name: 'Hex color',
+		} );
+
+		await clearInput( hexInput as HTMLInputElement );
+
+		await type( '000000' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					color: '#000000',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update gradient palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Gradient: Pale ocean' ) );
+
+		// Select radial gradient option
+		await click(
+			screen.getByRole( 'combobox', {
+				name: 'Type',
+			} )
+		);
+		await click( screen.getByRole( 'option', { name: 'Radial' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...gradients[ 0 ],
+					gradient:
+						'radial-gradient(rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+				},
+				gradients[ 1 ],
+			] );
+		} );
+	} );
+} );
diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
new file mode 100644
index 00000000000000..71cd0ac1d8cf52
--- /dev/null
+++ b/packages/components/src/palette-edit/types.ts
@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import type { Key, MouseEventHandler } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type Popover from '../popover';
+import type { HeadingSize } from '../heading/types';
+
+export type Color = {
+	color: string;
+	name: string;
+	slug: string;
+	gradient?: never;
+};
+
+export type Gradient = {
+	gradient: string;
+	name: string;
+	slug: string;
+	color?: never;
+};
+
+export type PaletteElement = Color | Gradient;
+
+export type BasePaletteEdit = {
+	/**
+	 * Whether the user can only change the color or gradient values.
+	 * If true, they cannot change names or delete values.
+	 *
+	 * @default false
+	 */
+	canOnlyChangeValues?: boolean;
+	/**
+	 * Whether the user can reset the editor.
+	 *
+	 * @default false
+	 */
+	canReset?: boolean;
+	/**
+	 * A message to show if there's nothing to edit.
+	 */
+	emptyMessage?: string;
+	/**
+	 * A heading label for the palette.
+	 */
+	paletteLabel: string;
+	/**
+	 * The label's heading level.
+	 *
+	 * @default 2
+	 */
+	paletteLabelHeadingLevel?: HeadingSize;
+	/**
+	 * The prefix for the element slug.
+	 *
+	 * @default ''
+	 */
+	slugPrefix?: string;
+	/**
+	 * Props to pass through to the underlying Popover component.
+	 */
+	popoverProps?: Omit<
+		React.ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
+};
+
+type PaletteEditColors = {
+	/**
+	 * The colors in the palette.
+	 */
+	colors?: Color[];
+	/**
+	 * Runs on changing the value.
+	 */
+	onChange: ( values?: Color[] ) => void;
+	gradients?: never;
+};
+
+type PaletteEditGradients = {
+	/**
+	 * The gradients in the palette.
+	 */
+	gradients: Gradient[];
+	/**
+	 * Runs on changing the value.
+	 */
+	onChange: ( values?: Gradient[] ) => void;
+	colors?: never;
+};
+
+export type PaletteEditProps = BasePaletteEdit &
+	( PaletteEditColors | PaletteEditGradients );
+
+type EditingElement = number | null;
+
+export type ColorPickerPopoverProps< T extends Color | Gradient > = {
+	element: T;
+	onChange: ( newElement: T ) => void;
+	isGradient?: T extends Gradient ? true : false;
+	onClose?: () => void;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
+};
+
+export type NameInputProps = {
+	label: string;
+	onChange: ( nextName?: PaletteElement[ 'name' ] ) => void;
+	value: PaletteElement[ 'name' ];
+};
+
+export type OptionProps< T extends Color | Gradient > = {
+	element: T;
+	onChange: ( newElement: T ) => void;
+	isGradient: T extends Gradient ? true : false;
+	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
+	key: Key;
+	onRemove: MouseEventHandler< HTMLButtonElement >;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
+	slugPrefix: string;
+};
+
+export type PaletteEditListViewProps< T extends Color | Gradient > = {
+	elements: T[];
+	onChange: ( newElements?: T[] ) => void;
+	isGradient: T extends Gradient ? true : false;
+	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
+	addColorRef: React.RefObject< HTMLButtonElement >;
+	editingElement?: EditingElement;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
+	setEditingElement: ( newEditingElement?: EditingElement ) => void;
+	slugPrefix: string;
+};
diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md
index 7cfc2eb8a5e6ea..ae9c209f250f54 100644
--- a/packages/components/src/panel/README.md
+++ b/packages/components/src/panel/README.md
@@ -4,12 +4,6 @@ Panels expand and collapse multiple sections of content.
 
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Anatomy
@@ -77,20 +71,25 @@ const MyPanel = () => (
 
 ##### Props
 
-###### className
+###### `header`: `string`
 
-The class that will be added with `components-panel`. If no `className` is passed only `components-panel__body` and `is-opened` is used.
+The text that will be rendered as the title of the panel. Text will be rendered inside an
+`<h2>` tag.
 
--   Type: `String`
 -   Required: No
 
-###### header
+###### `className`: `string`
 
-Title of the `Panel`. Text will be rendered inside an `<h2>` tag.
+The CSS class to apply to the wrapper element.
 
--   Type: `String`
 -   Required: No
 
+###### `children`: `React.ReactNode`
+
+The content to display within the panel row.
+
+-   Required: Yes
+
 ---
 
 #### PanelBody
@@ -99,77 +98,85 @@ The `PanelBody` creates a collapsible container that can be toggled open or clos
 
 ##### Props
 
-###### title
+###### `title`: `string`
 
-Title of the `PanelBody`. This shows even when it is closed.
+Title text. It shows even when the component is closed.
 
--   Type: `String`
 -   Required: No
 
-###### opened
+###### `opened`: `boolean`
 
-If opened is true then the `Panel` will remain open regardless of the `initialOpen` prop and the panel will be prevented from being closed.
+When set to `true`, the component will remain open regardless of the `initialOpen` prop and the
+panel will be prevented from being closed.
 
--   Type: `Boolean`
 -   Required: No
 
-###### className
+###### `className`: `string`
 
-The class that will be added with `components-panel__body`, if the panel is currently open, the `is-opened` class will also be passed to the classes of the wrapper div. If no `className` is passed then only `components-panel__body` and `is-opened` is used.
+The CSS class to apply to the wrapper element.
 
--   Type: `String`
 -   Required: No
 
-###### icon
+###### `icon`: `JSX.Element`
 
-An icon to be shown next to the `PanelBody` title.
+An icon to be shown next to the title.
 
--   Type: `String`
 -   Required: No
 
-###### onToggle
+###### `onToggle`: `( next: boolean ) => void;`
 
-A function that is called when the user clicks on the `PanelBody` title after the open state is changed.
+A function that is called any time the component is toggled from its closed state to its
+opened state, or vice versa.
 
--   Type: `function`
 -   Required: No
+-   Default: `noop`
 
-###### initialOpen
+###### `initialOpen`: `boolean`
 
 Whether or not the panel will start open.
 
--   Type: `Boolean`
 -   Required: No
--   Default: true
+-   Default: `true`
 
-###### children
+###### `children`: `| React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )`
 
-The rendered children. If the children is a `Function`, it will be called with an object with the `opened` property and return its value.
+The content to display in the `PanelBody`. If a function is provided for this prop, it will receive an object with the `opened` prop as an argument.
 
--   Type: `React.ReactNode | Function`
 -   Required: No
 
-###### buttonProps
+###### `buttonProps`: `WordPressComponentProps<Omit< ButtonAsButtonProps, 'icon' >, 'button', false>`
 
-Props that are passed to the `Button` component in the `PanelBodyTitle` within the panel body.
+Props that are passed to the `Button` component in title within the `PanelBody`.
 
--   Type: `Object`
 -   Required: No
 -   Default: `{}`
 
+###### `scrollAfterOpen`: `boolean`
+
+Scrolls the content into view when visible. This improves the UX when multiple `PanelBody`
+components are stacked in a scrollable container.
+
+-   Required: No
+-   Default: `true`
+
 ---
 
 #### PanelRow
 
-The `PanelRow` is a generic container for panel content. Default styles add a top margin and arrange items in a flex row.
+`PanelRow` is a generic container for rows within a `PanelBody`. It is a flex container with a top margin for spacing.
 
 ##### Props
 
-###### className
+###### `className`: `string`
 
-The class that will be added with `components-panel__row`. to the classes of the wrapper div. If no `className` is passed only `components-panel__row` is used.
+The CSS class to apply to the wrapper element.
+
+-   Required: No
+
+###### `children`: `React.ReactNode`
+
+The content to display within the panel row.
 
--   Type: `String`
 -   Required: No
 
 ##### Ref
@@ -182,15 +189,20 @@ PanelRow accepts a forwarded ref that will be added to the wrapper div. Usage:
 
 #### PanelHeader
 
-This is a simple container for a header component. This is used by the `Panel` component under the hood, so it does not typically need to be used.
+`PanelHeader` renders the header for the `Panel`. This is used by the `Panel` component under the hood, so it does not typically need to be used.
 
 ##### Props
 
-###### label
+###### `label`: `string`
 
 The text that will be rendered as the title of the `Panel`. Will be rendered in an `<h2>` tag.
 
--   Type: `String`
+-   Required: No
+
+###### `children`: `React.ReactNode`
+
+The content to display within the panel row.
+
 -   Required: No
 
 ## Related components
diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js
index cea78ce46fef0a..9e14932bfd5e19 100644
--- a/packages/components/src/panel/actions.native.js
+++ b/packages/components/src/panel/actions.native.js
@@ -6,7 +6,6 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
@@ -15,6 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import styles from './actions.scss';
 import BottomSeparatorCover from './bottom-separator-cover';
+import TextControl from '../text-control';
 
 function PanelActions( { actions, getStylesFromColorScheme } ) {
 	const mappedActions = useMemo( () => {
diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
deleted file mode 100644
index f47d0be42ad00f..00000000000000
--- a/packages/components/src/panel/body.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
-import { chevronUp, chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import Icon from '../icon';
-import { useControlledState, useUpdateEffect } from '../utils';
-
-const noop = () => {};
-
-export function PanelBody(
-	{
-		buttonProps = {},
-		children,
-		className,
-		icon,
-		initialOpen,
-		onToggle = noop,
-		opened,
-		title,
-		scrollAfterOpen = true,
-	},
-	ref
-) {
-	const [ isOpened, setIsOpened ] = useControlledState( opened, {
-		initial: initialOpen === undefined ? true : initialOpen,
-	} );
-	const nodeRef = useRef();
-
-	// Defaults to 'smooth' scrolling
-	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
-
-	const handleOnToggle = ( event ) => {
-		event.preventDefault();
-		const next = ! isOpened;
-		setIsOpened( next );
-		onToggle( next );
-	};
-
-	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
-	const scrollAfterOpenRef = useRef();
-	scrollAfterOpenRef.current = scrollAfterOpen;
-	// Runs after initial render.
-	useUpdateEffect( () => {
-		if (
-			isOpened &&
-			scrollAfterOpenRef.current &&
-			nodeRef.current?.scrollIntoView
-		) {
-			/*
-			 * Scrolls the content into view when visible.
-			 * This improves the UX when there are multiple stacking <PanelBody />
-			 * components in a scrollable container.
-			 */
-			nodeRef.current.scrollIntoView( {
-				inline: 'nearest',
-				block: 'nearest',
-				behavior: scrollBehavior,
-			} );
-		}
-	}, [ isOpened, scrollBehavior ] );
-
-	const classes = classnames( 'components-panel__body', className, {
-		'is-opened': isOpened,
-	} );
-
-	return (
-		<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>
-			<PanelBodyTitle
-				icon={ icon }
-				isOpened={ isOpened }
-				onClick={ handleOnToggle }
-				title={ title }
-				{ ...buttonProps }
-			/>
-			{ typeof children === 'function'
-				? children( { opened: isOpened } )
-				: isOpened && children }
-		</div>
-	);
-}
-
-const PanelBodyTitle = forwardRef(
-	( { isOpened, icon, title, ...props }, ref ) => {
-		if ( ! title ) return null;
-
-		return (
-			<h2 className="components-panel__body-title">
-				<Button
-					className="components-panel__body-toggle"
-					aria-expanded={ isOpened }
-					ref={ ref }
-					{ ...props }
-				>
-					{ /*
-					Firefox + NVDA don't announce aria-expanded because the browser
-					repaints the whole element, so this wrapping span hides that.
-				*/ }
-					<span aria-hidden="true">
-						<Icon
-							className="components-panel__arrow"
-							icon={ isOpened ? chevronUp : chevronDown }
-						/>
-					</span>
-					{ title }
-					{ icon && (
-						<Icon
-							icon={ icon }
-							className="components-panel__icon"
-							size={ 20 }
-						/>
-					) }
-				</Button>
-			</h2>
-		);
-	}
-);
-
-const ForwardedComponent = forwardRef( PanelBody );
-ForwardedComponent.displayName = 'PanelBody';
-
-export default ForwardedComponent;
diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx
new file mode 100644
index 00000000000000..ee1121ef04f4cb
--- /dev/null
+++ b/packages/components/src/panel/body.tsx
@@ -0,0 +1,151 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+import { chevronUp, chevronDown } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { PanelBodyProps, PanelBodyTitleProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import Button from '../button';
+import Icon from '../icon';
+import { useControlledState, useUpdateEffect } from '../utils';
+
+const noop = () => {};
+
+export function UnforwardedPanelBody(
+	props: PanelBodyProps,
+	ref: React.ForwardedRef< HTMLDivElement >
+) {
+	const {
+		buttonProps = {},
+		children,
+		className,
+		icon,
+		initialOpen,
+		onToggle = noop,
+		opened,
+		title,
+		scrollAfterOpen = true,
+	} = props;
+	const [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >(
+		opened,
+		{
+			initial: initialOpen === undefined ? true : initialOpen,
+			fallback: false,
+		}
+	);
+	const nodeRef = useRef< HTMLElement >( null );
+
+	// Defaults to 'smooth' scrolling
+	// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+	const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';
+
+	const handleOnToggle = ( event: React.MouseEvent ) => {
+		event.preventDefault();
+		const next = ! isOpened;
+		setIsOpened( next );
+		onToggle( next );
+	};
+
+	// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.
+	const scrollAfterOpenRef = useRef< boolean | undefined >();
+	scrollAfterOpenRef.current = scrollAfterOpen;
+	// Runs after initial render.
+	useUpdateEffect( () => {
+		if (
+			isOpened &&
+			scrollAfterOpenRef.current &&
+			nodeRef.current?.scrollIntoView
+		) {
+			/*
+			 * Scrolls the content into view when visible.
+			 * This improves the UX when there are multiple stacking <PanelBody />
+			 * components in a scrollable container.
+			 */
+			nodeRef.current.scrollIntoView( {
+				inline: 'nearest',
+				block: 'nearest',
+				behavior: scrollBehavior,
+			} );
+		}
+	}, [ isOpened, scrollBehavior ] );
+
+	const classes = clsx( 'components-panel__body', className, {
+		'is-opened': isOpened,
+	} );
+
+	return (
+		<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>
+			<PanelBodyTitle
+				icon={ icon }
+				isOpened={ Boolean( isOpened ) }
+				onClick={ handleOnToggle }
+				title={ title }
+				{ ...buttonProps }
+			/>
+			{ typeof children === 'function'
+				? children( { opened: Boolean( isOpened ) } )
+				: isOpened && children }
+		</div>
+	);
+}
+
+const PanelBodyTitle = forwardRef(
+	(
+		{
+			isOpened,
+			icon,
+			title,
+			...props
+		}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,
+		ref: React.ForwardedRef< any >
+	) => {
+		if ( ! title ) {
+			return null;
+		}
+
+		return (
+			<h2 className="components-panel__body-title">
+				<Button
+					__next40pxDefaultSize
+					className="components-panel__body-toggle"
+					aria-expanded={ isOpened }
+					ref={ ref }
+					{ ...props }
+				>
+					{ /*
+					Firefox + NVDA don't announce aria-expanded because the browser
+					repaints the whole element, so this wrapping span hides that.
+				*/ }
+					<span aria-hidden="true">
+						<Icon
+							className="components-panel__arrow"
+							icon={ isOpened ? chevronUp : chevronDown }
+						/>
+					</span>
+					{ title }
+					{ icon && (
+						<Icon
+							icon={ icon }
+							className="components-panel__icon"
+							size={ 20 }
+						/>
+					) }
+				</Button>
+			</h2>
+		);
+	}
+);
+
+export const PanelBody = forwardRef( UnforwardedPanelBody );
+
+export default PanelBody;
diff --git a/packages/components/src/panel/header.js b/packages/components/src/panel/header.js
deleted file mode 100644
index d26812e8b6289e..00000000000000
--- a/packages/components/src/panel/header.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function PanelHeader( { label, children } ) {
-	return (
-		<div className="components-panel__header">
-			{ label && <h2>{ label }</h2> }
-			{ children }
-		</div>
-	);
-}
-
-export default PanelHeader;
diff --git a/packages/components/src/panel/header.tsx b/packages/components/src/panel/header.tsx
new file mode 100644
index 00000000000000..428626225ada11
--- /dev/null
+++ b/packages/components/src/panel/header.tsx
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { PanelHeaderProps } from './types';
+
+/**
+ * `PanelHeader` renders the header for the `Panel`.
+ * This is used by the `Panel` component under the hood,
+ * so it does not typically need to be used.
+ */
+function PanelHeader( { label, children }: PanelHeaderProps ) {
+	return (
+		<div className="components-panel__header">
+			{ label && <h2>{ label }</h2> }
+			{ children }
+		</div>
+	);
+}
+
+export default PanelHeader;
diff --git a/packages/components/src/panel/index.js b/packages/components/src/panel/index.js
deleted file mode 100644
index 581a8632072c03..00000000000000
--- a/packages/components/src/panel/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import PanelHeader from './header';
-
-function Panel( { header, className, children }, ref ) {
-	const classNames = classnames( className, 'components-panel' );
-	return (
-		<div className={ classNames } ref={ ref }>
-			{ header && <PanelHeader label={ header } /> }
-			{ children }
-		</div>
-	);
-}
-
-export default forwardRef( Panel );
diff --git a/packages/components/src/panel/index.tsx b/packages/components/src/panel/index.tsx
new file mode 100644
index 00000000000000..de44af6bdfa3f8
--- /dev/null
+++ b/packages/components/src/panel/index.tsx
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PanelHeader from './header';
+import type { PanelProps } from './types';
+
+function UnforwardedPanel(
+	{ header, className, children }: PanelProps,
+	ref: React.ForwardedRef< HTMLDivElement >
+) {
+	const classNames = clsx( className, 'components-panel' );
+	return (
+		<div className={ classNames } ref={ ref }>
+			{ header && <PanelHeader label={ header } /> }
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * `Panel` expands and collapses multiple sections of content.
+ *
+ * ```jsx
+ * import { Panel, PanelBody, PanelRow } from '@wordpress/components';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MyPanel = () => (
+ * 	<Panel header="My Panel">
+ * 		<PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
+ * 			<PanelRow>My Panel Inputs and Labels</PanelRow>
+ * 		</PanelBody>
+ * 	</Panel>
+ * );
+ * ```
+ */
+export const Panel = forwardRef( UnforwardedPanel );
+
+export default Panel;
diff --git a/packages/components/src/panel/row.js b/packages/components/src/panel/row.js
deleted file mode 100644
index 9da08b06c84ba3..00000000000000
--- a/packages/components/src/panel/row.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-const PanelRow = forwardRef( ( { className, children }, ref ) => (
-	<div
-		className={ classnames( 'components-panel__row', className ) }
-		ref={ ref }
-	>
-		{ children }
-	</div>
-) );
-
-export default PanelRow;
diff --git a/packages/components/src/panel/row.tsx b/packages/components/src/panel/row.tsx
new file mode 100644
index 00000000000000..392f215c2c6754
--- /dev/null
+++ b/packages/components/src/panel/row.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { PanelRowProps } from './types';
+
+function UnforwardedPanelRow(
+	{ className, children }: PanelRowProps,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	return (
+		<div
+			className={ clsx( 'components-panel__row', className ) }
+			ref={ ref }
+		>
+			{ children }
+		</div>
+	);
+}
+
+/**
+ * `PanelRow` is a generic container for rows within a `PanelBody`.
+ * It is a flex container with a top margin for spacing.
+ */
+export const PanelRow = forwardRef( UnforwardedPanelRow );
+
+export default PanelRow;
diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.js
deleted file mode 100644
index 2afd1ae481eb98..00000000000000
--- a/packages/components/src/panel/stories/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Panel from '../';
-import PanelRow from '../row';
-import PanelBody from '../body';
-
-/**
- * WordPress dependencies
- */
-import { wordpress } from '@wordpress/icons';
-
-export default {
-	title: 'Components/Panel',
-	component: Panel,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const opened = boolean( 'Opened', true );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened }>
-				<PanelRow>{ rowText }</PanelRow>
-			</PanelBody>
-		</Panel>
-	);
-};
-
-export const multipleBodies = () => {
-	return (
-		<ScrollableContainer>
-			<Panel header="My Panel">
-				<PanelBody title="First Settings">
-					<PanelRow>
-						<Placeholder height={ 250 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Second Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 400 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Third Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 600 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Fourth Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody
-					title="Disabled Settings"
-					initialOpen={ false }
-					buttonProps={ { disabled: true } }
-				/>
-			</Panel>
-		</ScrollableContainer>
-	);
-};
-
-export const withIcon = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	const icon = boolean( 'Icon', true ) ? wordpress : undefined;
-	const opened = boolean( 'Opened', true );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened } icon={ icon }>
-				<PanelRow>{ rowText }</PanelRow>
-			</PanelBody>
-		</Panel>
-	);
-};
-
-function ScrollableContainer( { children } ) {
-	return (
-		<div
-			style={ {
-				width: 300,
-				height: '100vh',
-				overflowY: 'auto',
-				margin: 'auto',
-				boxShadow: '0 0 0 1px #ddd inset',
-			} }
-		>
-			{ children }
-		</div>
-	);
-}
-
-function Placeholder( { height = 200 } ) {
-	return <div style={ { background: '#ddd', height, width: '100%' } } />;
-}
diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx
new file mode 100644
index 00000000000000..db66b911d4dc17
--- /dev/null
+++ b/packages/components/src/panel/stories/index.story.tsx
@@ -0,0 +1,117 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Panel from '../';
+import PanelRow from '../row';
+import PanelBody from '../body';
+import InputControl from '../../input-control';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+const meta: Meta< typeof Panel > = {
+	title: 'Components/Containers/Panel',
+	id: 'components-panel',
+	component: Panel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { PanelRow, PanelBody },
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Panel > = ( props ) => <Panel { ...props } />;
+
+export const Default: StoryFn< typeof Panel > = Template.bind( {} );
+Default.args = {
+	header: 'My panel',
+	children: (
+		<>
+			<PanelBody title="First section">
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
+			</PanelBody>
+			<PanelBody title="Second section" initialOpen={ false }>
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
+			</PanelBody>
+		</>
+	),
+};
+
+/**
+ * `PanelRow` is a generic container for rows within a `PanelBody`.
+ * It is a flex container with a top margin for spacing.
+ */
+export const _PanelRow: StoryFn< typeof Panel > = Template.bind( {} );
+_PanelRow.args = {
+	children: (
+		<PanelBody title="My Profile">
+			<PanelRow>
+				<InputControl label="First name" />
+				<InputControl label="Last name" />
+			</PanelRow>
+			<PanelRow>
+				<div style={ { flex: 1 } }>
+					<InputControl label="Email" />
+				</div>
+			</PanelRow>
+		</PanelBody>
+	),
+};
+
+export const DisabledSection: StoryFn< typeof Panel > = Template.bind( {} );
+DisabledSection.args = {
+	...Default.args,
+	children: (
+		<PanelBody
+			title="Disabled section"
+			initialOpen={ false }
+			buttonProps={ { disabled: true } }
+		/>
+	),
+};
+
+export const WithIcon: StoryFn< typeof Panel > = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: (
+		<PanelBody title="Section title" icon={ wordpress }>
+			<PanelRow>
+				<div
+					style={ {
+						background: '#ddd',
+						height: 100,
+						width: '100%',
+					} }
+				/>
+			</PanelRow>
+		</PanelBody>
+	),
+};
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index b26f134e72350b..e525cd92569182 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -32,6 +32,7 @@
 
 .components-panel__header {
 	display: flex;
+	flex-shrink: 0;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
diff --git a/packages/components/src/panel/test/__snapshots__/body.tsx.snap b/packages/components/src/panel/test/__snapshots__/body.tsx.snap
new file mode 100644
index 00000000000000..245b1a85bf5c82
--- /dev/null
+++ b/packages/components/src/panel/test/__snapshots__/body.tsx.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/__snapshots__/header.js.snap b/packages/components/src/panel/test/__snapshots__/header.tsx.snap
similarity index 100%
rename from packages/components/src/panel/test/__snapshots__/header.js.snap
rename to packages/components/src/panel/test/__snapshots__/header.tsx.snap
diff --git a/packages/components/src/panel/test/__snapshots__/index.js.snap b/packages/components/src/panel/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from packages/components/src/panel/test/__snapshots__/index.js.snap
rename to packages/components/src/panel/test/__snapshots__/index.tsx.snap
diff --git a/packages/components/src/panel/test/__snapshots__/row.js.snap b/packages/components/src/panel/test/__snapshots__/row.tsx.snap
similarity index 100%
rename from packages/components/src/panel/test/__snapshots__/row.js.snap
rename to packages/components/src/panel/test/__snapshots__/row.tsx.snap
diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
deleted file mode 100644
index 3b8bb3e553a62a..00000000000000
--- a/packages/components/src/panel/test/body.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from '@testing-library/react';
-
-/**
- * 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' );
-		} );
-
-		it( 'should render inner content, if opened', () => {
-			const { container } = render(
-				<PanelBody opened={ true }>
-					<div className="inner-content">Content</div>
-				</PanelBody>
-			);
-			const panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-		} );
-
-		it( 'should be opened by default', () => {
-			const { container } = render(
-				<PanelBody>
-					<div>Content</div>
-				</PanelBody>
-			);
-			const panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-		} );
-
-		it( 'should render as initially opened, if specified', () => {
-			const { container } = render(
-				<PanelBody initialOpen={ true }>
-					<div>Content</div>
-				</PanelBody>
-			);
-			const panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-		} );
-
-		it( 'should call the children function, if specified', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
-				</PanelBody>
-			);
-			let panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-			expect( panelContent ).toHaveAttribute( 'hidden', '' );
-
-			rerender(
-				<PanelBody opened={ false }>
-					{ ( { opened } ) => <div hidden={ opened }>Content</div> }
-				</PanelBody>
-			);
-			panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-			expect( panelContent ).not.toHaveAttribute( 'hidden' );
-		} );
-	} );
-
-	describe( 'toggling', () => {
-		it( 'should toggle collapse with opened prop', () => {
-			const { container, rerender } = render(
-				<PanelBody opened={ true }>
-					<div>Content</div>
-				</PanelBody>
-			);
-			let panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-
-			rerender(
-				<PanelBody opened={ false }>
-					<div>Content</div>
-				</PanelBody>
-			);
-
-			panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeFalsy();
-
-			rerender(
-				<PanelBody opened={ true }>
-					<div>Content</div>
-				</PanelBody>
-			);
-
-			panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-		} );
-
-		it( 'should toggle when clicking header', () => {
-			const { container } = render(
-				<PanelBody title="Panel" initialOpen={ false }>
-					<div>Content</div>
-				</PanelBody>
-			);
-			let panelContent = getPanelBodyContent( container );
-			const panelToggle = getPanelToggle( container );
-
-			expect( panelContent ).toBeFalsy();
-
-			fireEvent.click( panelToggle );
-
-			panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeTruthy();
-
-			fireEvent.click( panelToggle );
-
-			panelContent = getPanelBodyContent( container );
-
-			expect( panelContent ).toBeFalsy();
-		} );
-
-		it( 'should pass button props to panel title', () => {
-			const mock = jest.fn();
-
-			const { container } = render(
-				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
-					<div>Content</div>
-				</PanelBody>
-			);
-
-			const panelToggle = getPanelToggle( container );
-
-			fireEvent.click( panelToggle );
-
-			expect( mock ).toHaveBeenCalled();
-		} );
-	} );
-} );
diff --git a/packages/components/src/panel/test/body.tsx b/packages/components/src/panel/test/body.tsx
new file mode 100644
index 00000000000000..fb745f2c602db7
--- /dev/null
+++ b/packages/components/src/panel/test/body.tsx
@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { PanelBody } from '../body';
+
+describe( 'PanelBody', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render an empty div with the matching className', () => {
+			const { container } = render( <PanelBody /> );
+
+			expect( container ).toMatchSnapshot();
+		} );
+
+		it( 'should render inner content, if opened', () => {
+			render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+		} );
+
+		it( 'should be opened by default', () => {
+			render(
+				<PanelBody>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+		} );
+
+		it( 'should render as initially opened, if specified', () => {
+			render(
+				<PanelBody initialOpen>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+		} );
+
+		it( 'should call the children function, if specified', () => {
+			const { rerender } = render(
+				<PanelBody opened>
+					{ ( { opened } ) => (
+						<div hidden={ opened } data-testid="inner-content">
+							Content
+						</div>
+					) }
+				</PanelBody>
+			);
+
+			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 } data-testid="inner-content">
+							Content
+						</div>
+					) }
+				</PanelBody>
+			);
+
+			panelContent = screen.getByTestId( 'inner-content' );
+
+			expect( panelContent ).toBeVisible();
+			expect( panelContent ).not.toHaveAttribute( 'hidden' );
+		} );
+	} );
+
+	describe( 'toggling', () => {
+		it( 'should toggle collapse with opened prop', () => {
+			const { rerender } = render(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+
+			rerender(
+				<PanelBody opened={ false }>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
+
+			rerender(
+				<PanelBody opened>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+		} );
+
+		it( 'should toggle when clicking header', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<PanelBody title="Panel" initialOpen={ false }>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			const panelToggle = screen.getByRole( 'button', { name: 'Panel' } );
+
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
+
+			await user.click( panelToggle );
+
+			expect( screen.getByTestId( 'inner-content' ) ).toBeVisible();
+
+			await user.click( panelToggle );
+
+			expect(
+				screen.queryByTestId( 'inner-content' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should pass button props to panel title', async () => {
+			const user = userEvent.setup();
+			const mock = jest.fn();
+
+			render(
+				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>
+					<div data-testid="inner-content">Content</div>
+				</PanelBody>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Panel' } ) );
+
+			expect( mock ).toHaveBeenCalled();
+		} );
+	} );
+} );
diff --git a/packages/components/src/panel/test/header.js b/packages/components/src/panel/test/header.js
deleted file mode 100644
index 0179012e00242e..00000000000000
--- a/packages/components/src/panel/test/header.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import PanelHeader from '../header.js';
-
-describe( 'PanelHeader', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render PanelHeader with empty div inside', () => {
-			const { container } = render( <PanelHeader /> );
-
-			expect( container ).toMatchSnapshot();
-		} );
-
-		it( 'should render a label matching the text provided in the prop', () => {
-			render( <PanelHeader label="Some Label" /> );
-
-			const heading = screen.getByRole( 'heading' );
-			expect( heading ).toBeVisible();
-			expect( heading ).toHaveTextContent( 'Some Label' );
-		} );
-
-		it( 'should render child elements in the panel header body when provided', () => {
-			render(
-				<PanelHeader>
-					<dfn>Some text</dfn>
-				</PanelHeader>
-			);
-
-			const term = screen.getByRole( 'term' );
-			expect( term ).toBeVisible();
-			expect( term ).toHaveTextContent( 'Some text' );
-		} );
-
-		it( 'should render both child elements and label when passed in', () => {
-			render(
-				<PanelHeader label="Some Label">
-					<dfn>Some text</dfn>
-				</PanelHeader>
-			);
-
-			const heading = screen.getByRole( 'heading' );
-			expect( heading ).toBeVisible();
-			expect( heading ).toHaveTextContent( 'Some Label' );
-
-			const term = screen.getByRole( 'term' );
-			expect( term ).toBeVisible();
-			expect( term ).toHaveTextContent( 'Some text' );
-		} );
-	} );
-} );
diff --git a/packages/components/src/panel/test/header.tsx b/packages/components/src/panel/test/header.tsx
new file mode 100644
index 00000000000000..8f93eb44b074c4
--- /dev/null
+++ b/packages/components/src/panel/test/header.tsx
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import PanelHeader from '../header';
+
+describe( 'PanelHeader', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render PanelHeader with empty div inside', () => {
+			const { container } = render( <PanelHeader /> );
+
+			expect( container ).toMatchSnapshot();
+		} );
+
+		it( 'should render a label matching the text provided in the prop', () => {
+			render( <PanelHeader label="Some Label" /> );
+
+			const heading = screen.getByRole( 'heading' );
+			expect( heading ).toBeVisible();
+			expect( heading ).toHaveTextContent( 'Some Label' );
+		} );
+
+		it( 'should render child elements in the panel header body when provided', () => {
+			render(
+				<PanelHeader>
+					<dfn>Some text</dfn>
+				</PanelHeader>
+			);
+
+			const term = screen.getByRole( 'term' );
+			expect( term ).toBeVisible();
+			expect( term ).toHaveTextContent( 'Some text' );
+		} );
+
+		it( 'should render both child elements and label when passed in', () => {
+			render(
+				<PanelHeader label="Some Label">
+					<dfn>Some text</dfn>
+				</PanelHeader>
+			);
+
+			const heading = screen.getByRole( 'heading' );
+			expect( heading ).toBeVisible();
+			expect( heading ).toHaveTextContent( 'Some Label' );
+
+			const term = screen.getByRole( 'term' );
+			expect( term ).toBeVisible();
+			expect( term ).toHaveTextContent( 'Some text' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/panel/test/index.js b/packages/components/src/panel/test/index.js
deleted file mode 100644
index 4247af577ca568..00000000000000
--- a/packages/components/src/panel/test/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import Panel from '../';
-
-describe( 'Panel', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render an empty div without any provided props', () => {
-			const { container } = render( <Panel /> );
-
-			expect( container ).toMatchSnapshot();
-		} );
-
-		it( 'should render a heading when provided text in the header prop', () => {
-			render( <Panel header="Header Label" /> );
-
-			const heading = screen.getByRole( 'heading' );
-			expect( heading ).toBeVisible();
-			expect( heading ).toHaveTextContent( 'Header Label' );
-		} );
-
-		it( 'should render an additional className', () => {
-			const { container } = render( <Panel className="the-panel" /> );
-
-			expect( container ).toMatchSnapshot();
-		} );
-
-		it( 'should add additional child elements to be rendered in the panel', () => {
-			render(
-				<Panel>
-					<dfn>The Panel</dfn>
-				</Panel>
-			);
-
-			const term = screen.getByRole( 'term' );
-			expect( term ).toBeVisible();
-			expect( term ).toHaveTextContent( 'The Panel' );
-		} );
-
-		it( 'should render both children and header when provided as props', () => {
-			render(
-				<Panel header="The header">
-					<dfn>The Panel</dfn>
-				</Panel>
-			);
-
-			const heading = screen.getByRole( 'heading' );
-			expect( heading ).toBeVisible();
-			expect( heading ).toHaveTextContent( 'The header' );
-
-			const term = screen.getByRole( 'term' );
-			expect( term ).toBeVisible();
-			expect( term ).toHaveTextContent( 'The Panel' );
-		} );
-	} );
-} );
diff --git a/packages/components/src/panel/test/index.tsx b/packages/components/src/panel/test/index.tsx
new file mode 100644
index 00000000000000..a48c88c36cb50d
--- /dev/null
+++ b/packages/components/src/panel/test/index.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import Panel from '..';
+
+describe( 'Panel', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render an empty div without any provided props', () => {
+			const { container } = render( <Panel children={ null } /> );
+
+			expect( container ).toMatchSnapshot();
+		} );
+
+		it( 'should render a heading when provided text in the header prop', () => {
+			render( <Panel header="Header Label" children={ null } /> );
+
+			const heading = screen.getByRole( 'heading' );
+			expect( heading ).toBeVisible();
+			expect( heading ).toHaveTextContent( 'Header Label' );
+		} );
+
+		it( 'should render an additional className', () => {
+			const { container } = render(
+				<Panel className="the-panel" children={ null } />
+			);
+
+			expect( container ).toMatchSnapshot();
+		} );
+
+		it( 'should add additional child elements to be rendered in the panel', () => {
+			render(
+				<Panel>
+					<dfn>The Panel</dfn>
+				</Panel>
+			);
+
+			const term = screen.getByRole( 'term' );
+			expect( term ).toBeVisible();
+			expect( term ).toHaveTextContent( 'The Panel' );
+		} );
+
+		it( 'should render both children and header when provided as props', () => {
+			render(
+				<Panel header="The header">
+					<dfn>The Panel</dfn>
+				</Panel>
+			);
+
+			const heading = screen.getByRole( 'heading' );
+			expect( heading ).toBeVisible();
+			expect( heading ).toHaveTextContent( 'The header' );
+
+			const term = screen.getByRole( 'term' );
+			expect( term ).toBeVisible();
+			expect( term ).toHaveTextContent( 'The Panel' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/panel/test/row.js b/packages/components/src/panel/test/row.js
deleted file mode 100644
index 2dbf09782e70fb..00000000000000
--- a/packages/components/src/panel/test/row.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import PanelRow from '../row';
-
-describe( 'PanelRow', () => {
-	it( 'should render with the default class name', () => {
-		const { container } = render( <PanelRow /> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should render with the custom class name', () => {
-		const { container } = render( <PanelRow className="custom" /> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should render child components', () => {
-		render(
-			<PanelRow>
-				<dfn>Some text</dfn>
-			</PanelRow>
-		);
-
-		const term = screen.getByRole( 'term' );
-		expect( term ).toBeVisible();
-		expect( term ).toHaveTextContent( 'Some text' );
-	} );
-} );
diff --git a/packages/components/src/panel/test/row.tsx b/packages/components/src/panel/test/row.tsx
new file mode 100644
index 00000000000000..ee052e78dfd512
--- /dev/null
+++ b/packages/components/src/panel/test/row.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import PanelRow from '../row';
+
+describe( 'PanelRow', () => {
+	it( 'should render with the default class name', () => {
+		const { container } = render( <PanelRow children={ null } /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should render with the custom class name', () => {
+		const { container } = render(
+			<PanelRow className="custom" children={ null } />
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should render child components', () => {
+		render(
+			<PanelRow>
+				<dfn>Some text</dfn>
+			</PanelRow>
+		);
+
+		const term = screen.getByRole( 'term' );
+		expect( term ).toBeVisible();
+		expect( term ).toHaveTextContent( 'Some text' );
+	} );
+} );
diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts
new file mode 100644
index 00000000000000..6b7ab35a57520a
--- /dev/null
+++ b/packages/components/src/panel/types.ts
@@ -0,0 +1,116 @@
+/**
+ * Internal dependencies
+ */
+import type { ButtonAsButtonProps } from '../button/types';
+import type { WordPressComponentProps } from '../context';
+
+export type PanelProps = {
+	/**
+	 * The text that will be rendered as the title of the panel.
+	 * Text will be rendered inside an `<h2>` tag.
+	 */
+	header?: PanelHeaderProps[ 'label' ];
+	/**
+	 * The CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The content to display within the panel.
+	 */
+	children: React.ReactNode;
+};
+
+export type PanelHeaderProps = {
+	/**
+	 * The text that will be rendered as the title of the panel.
+	 * Will be rendered in an `<h2>` tag.
+	 */
+	label?: string;
+	/**
+	 * The content to display within the panel header.
+	 */
+	children?: React.ReactNode;
+};
+
+export type PanelRowProps = {
+	/**
+	 * The CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The content to display within the panel row.
+	 */
+	children: React.ReactNode;
+};
+
+export type PanelBodyProps = {
+	/**
+	 * Props that are passed to the `Button` component in title within the
+	 * `PanelBody`.
+	 *
+	 * @default {}
+	 */
+	buttonProps?: WordPressComponentProps<
+		Omit< ButtonAsButtonProps, 'icon' >,
+		'button',
+		false
+	>;
+	/**
+	 * The content to display in the `PanelBody`.If a function is provided for
+	 * this prop, it will receive an object with the `opened` prop as an argument.
+	 */
+	children?:
+		| React.ReactNode
+		| ( ( props: { opened: boolean } ) => React.ReactNode );
+
+	/**
+	 * The CSS class to apply to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * An icon to be shown next to the title.
+	 */
+	icon?: JSX.Element;
+	/**
+	 * Whether or not the panel will start open.
+	 */
+	initialOpen?: boolean;
+	/**
+	 * A function that is called any time the component is toggled from its closed
+	 * state to its opened state, or vice versa.
+	 *
+	 * @default noop
+	 */
+	onToggle?: ( next: boolean ) => void;
+	/**
+	 * When set to `true`, the component will remain open regardless of the
+	 * `initialOpen` prop and the panel will be prevented from being closed.
+	 */
+	opened?: boolean;
+	/**
+	 * Title text. It shows even when it is closed.
+	 */
+	title?: string;
+	/**
+	 * Scrolls the content into view when visible. This improves the UX when
+	 * multiple `PanelBody` components are stacked in a scrollable container.
+	 *
+	 * @default true
+	 */
+	scrollAfterOpen?: boolean;
+};
+
+export type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & {
+	/**
+	 * An icon to be shown next to the title.
+	 */
+	icon?: JSX.Element;
+	/**
+	 * Whether or not the `PanelBody` is currently opened or not.
+	 */
+	isOpened?: boolean;
+	/**
+	 * The title text.
+	 */
+	title?: string;
+};
diff --git a/packages/components/src/placeholder/README.md b/packages/components/src/placeholder/README.md
index f260ab15378f0f..a23fcac0e066ef 100644
--- a/packages/components/src/placeholder/README.md
+++ b/packages/components/src/placeholder/README.md
@@ -17,7 +17,7 @@ Class to set on the container div.
 
 -   Required: No
 
-### `icon`: `string|Function|WPComponent|null`
+### `icon`: `string|Function|Component|null`
 
 If provided, renders an icon next to the label.
 
diff --git a/packages/components/src/placeholder/index.tsx b/packages/components/src/placeholder/index.tsx
index fe22bb5a3df0e5..9a6e12f30fefcd 100644
--- a/packages/components/src/placeholder/index.tsx
+++ b/packages/components/src/placeholder/index.tsx
@@ -1,20 +1,22 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+import { useEffect } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import Icon from '../icon';
 import type { PlaceholderProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 const PlaceholderIllustration = (
 	<SVG
@@ -38,12 +40,8 @@ const PlaceholderIllustration = (
  * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
  * ```
  */
-export function Placeholder< IconProps = unknown >(
-	props: WordPressComponentProps<
-		PlaceholderProps< IconProps >,
-		'div',
-		false
-	>
+export function Placeholder(
+	props: WordPressComponentProps< PlaceholderProps, 'div', false >
 ) {
 	const {
 		icon,
@@ -70,15 +68,23 @@ export function Placeholder< IconProps = unknown >(
 		};
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-placeholder',
 		className,
 		modifierClassNames,
 		withIllustration ? 'has-illustration' : null
 	);
-	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
+
+	const fieldsetClasses = clsx( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
+
+	useEffect( () => {
+		if ( instructions ) {
+			speak( instructions );
+		}
+	}, [ instructions ] );
+
 	return (
 		<div { ...additionalProps } className={ classes }>
 			{ withIllustration ? PlaceholderIllustration : null }
@@ -93,14 +99,12 @@ export function Placeholder< IconProps = unknown >(
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			<fieldset className={ fieldsetClasses }>
-				{ !! instructions && (
-					<legend className="components-placeholder__instructions">
-						{ instructions }
-					</legend>
-				) }
-				{ children }
-			</fieldset>
+			{ !! instructions && (
+				<div className="components-placeholder__instructions">
+					{ instructions }
+				</div>
+			) }
+			<div className={ fieldsetClasses }>{ children }</div>
 		</div>
 	);
 }
diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx
new file mode 100644
index 00000000000000..ffe60df0b4b857
--- /dev/null
+++ b/packages/components/src/placeholder/stories/index.story.tsx
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from '../';
+import TextControl from '../../text-control';
+
+const ICONS = { starEmpty, starFilled, styles, wordpress };
+
+const meta: Meta< typeof Placeholder > = {
+	component: Placeholder,
+	title: 'Components/Placeholder',
+	argTypes: {
+		children: { control: false },
+		notices: { control: false },
+		preview: { control: false },
+		icon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Placeholder > = ( args ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<Placeholder { ...args }>
+			<div>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label="Sample Field"
+					placeholder="Enter something here"
+					value={ value }
+					onChange={ setValue }
+				/>
+			</div>
+		</Placeholder>
+	);
+};
+
+export const Default: StoryFn< typeof Placeholder > = Template.bind( {} );
+Default.args = {
+	icon: 'wordpress',
+	label: 'My Placeholder Label',
+	instructions: 'Here are instructions you should follow',
+};
diff --git a/packages/components/src/placeholder/stories/index.tsx b/packages/components/src/placeholder/stories/index.tsx
deleted file mode 100644
index e501b98c4b0e67..00000000000000
--- a/packages/components/src/placeholder/stories/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-import TextControl from '../../text-control';
-
-const ICONS = { starEmpty, starFilled, styles, wordpress };
-
-const meta: ComponentMeta< typeof Placeholder > = {
-	component: Placeholder,
-	title: 'Components/Placeholder',
-	argTypes: {
-		children: { control: { type: null } },
-		notices: { control: { type: null } },
-		preview: { control: { type: null } },
-		icon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Placeholder > = ( args ) => {
-	const [ value, setValue ] = useState( '' );
-
-	return (
-		<Placeholder { ...args }>
-			<div>
-				<TextControl
-					label="Sample Field"
-					placeholder="Enter something here"
-					value={ value }
-					onChange={ setValue }
-				/>
-			</div>
-		</Placeholder>
-	);
-};
-
-export const Default: ComponentStory< typeof Placeholder > = Template.bind(
-	{}
-);
-Default.args = {
-	icon: 'wordpress',
-	label: 'My Placeholder Label',
-	instructions: 'Here are instructions you should follow',
-};
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 9f5db03711dc7e..a38d7d3e3ace8b 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -1,28 +1,25 @@
 // This needs specificity to override individual block styles.
 .components-placeholder.components-placeholder {
+	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
-	padding: 1em;
-	min-height: 200px;
+	padding: $grid-unit-30;
 	width: 100%;
 	text-align: left;
 	margin: 0;
 	color: $gray-900;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-20;
 
 	// Some editor styles unset this.
 	-moz-font-smoothing: subpixel-antialiased;
 	-webkit-font-smoothing: subpixel-antialiased;
 
-	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
-	@supports (position: sticky) {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: flex-start;
-	}
 
 	// Block UI appearance.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;	// Match the block toolbar material radius.
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
@@ -34,18 +31,22 @@
 .components-placeholder__fieldset {
 	font-family: $default-font;
 	font-size: $default-font-size;
+	// Global Styles can affect this so we are resetting.
+	letter-spacing: initial;
+	line-height: initial;
+	text-transform: none;
+	font-weight: normal;
 }
 
 .components-placeholder__label {
-	display: flex;
 	font-weight: 600;
-	margin-bottom: $grid-unit-20;
 	align-items: center;
+	display: flex;
 
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: 1ch;
+		margin-right: $grid-unit-05;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
@@ -66,6 +67,8 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: $grid-unit-20;
+	justify-content: flex-start;
 
 	p {
 		font-family: $default-font;
@@ -73,18 +76,6 @@
 	}
 }
 
-// Overrides for browser and editor fieldset styles.
-.components-placeholder__fieldset.components-placeholder__fieldset {
-	border: none;
-	padding: 0;
-
-	.components-placeholder__instructions {
-		padding: 0;
-		font-weight: normal;
-		font-size: 1em;
-	}
-}
-
 .components-placeholder__fieldset.is-column-layout,
 .components-placeholder__fieldset.is-column-layout form {
 	flex-direction: column;
@@ -92,28 +83,14 @@
 
 .components-placeholder__input[type="url"] {
 	@include input-control;
-	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
 
-.components-placeholder__instructions {
-	margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-	margin-top: 1em;
 	width: 100%;
+	gap: $grid-unit-10;
 }
 
-.components-placeholder__fieldset .components-button {
-	margin-right: $grid-unit-15;
-	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
-
-	&:last-child {
-		margin-bottom: 0;
-		margin-right: 0;
-	}
-}
 
 // Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
 // immediately after a button which is *not* an `variant="link"` style button. This is because
@@ -130,14 +107,6 @@
 
 // Element queries to show different layouts at various sizes.
 .components-placeholder {
-	// Medium and large sizes.
-	&.is-large {
-		.components-placeholder__label {
-			font-size: 18pt;
-			font-weight: normal;
-		}
-	}
-
 	// Medium and small sizes.
 	&.is-medium,
 	&.is-small {
@@ -150,16 +119,15 @@
 			flex-direction: column;
 		}
 
-		.components-placeholder__fieldset .components-button {
-			margin-right: auto;
+		.components-placeholder__fieldset > *,
+		.components-button {
+			width: 100%;
+			justify-content: center;
 		}
 	}
 
-	// Small sizes.
 	&.is-small {
-		.components-button {
-			padding: 0 $grid-unit-10 2px;
-		}
+		padding: $grid-unit-20;
 	}
 }
 
@@ -175,7 +143,9 @@
 	color: inherit;
 	display: flex;
 	box-shadow: none;
-	min-width: 100px;
+
+	// In the unselected state, radius should match Global Styles > Image > Radius.
+	border-radius: 0;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
@@ -191,8 +161,6 @@
 	}
 
 	.components-placeholder__fieldset {
-		width: auto;
-
 		// Unset intrinsic margins.
 		margin-left: 0;
 		margin-right: 0;
@@ -218,9 +186,22 @@
 		}
 	}
 
-	// By painting the borders here, we enable them to be replaced by the Border control.
-	@include placeholder-style();
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+		background: currentColor;
+		opacity: 0.1;
+	}
+
 	overflow: hidden;
+	.is-selected & {
+		overflow: auto;
+	}
 }
 
 // Position the spinner.
diff --git a/packages/components/src/placeholder/test/index.tsx b/packages/components/src/placeholder/test/index.tsx
index 9e47d4d016a7fc..6d9427af00b4c5 100644
--- a/packages/components/src/placeholder/test/index.tsx
+++ b/packages/components/src/placeholder/test/index.tsx
@@ -8,12 +8,13 @@ import { render, screen, within } from '@testing-library/react';
  */
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import BasePlaceholder from '../';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { PlaceholderProps } from '../types';
 
 jest.mock( '@wordpress/compose', () => {
@@ -34,13 +35,16 @@ const testIcon = (
 
 const Placeholder = (
 	props: Omit<
-		WordPressComponentProps< PlaceholderProps< unknown >, 'div', false >,
+		WordPressComponentProps< PlaceholderProps, 'div', false >,
 		'ref'
 	>
 ) => <BasePlaceholder data-testid="placeholder" { ...props } />;
 
 const getPlaceholder = () => screen.getByTestId( 'placeholder' );
 
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		// @ts-ignore
@@ -48,10 +52,11 @@ describe( 'Placeholder', () => {
 			<div key="1" />,
 			{ width: 320 },
 		] );
+		mockedSpeak.mockReset();
 	} );
 
 	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
+		it( 'should by default render label section and content section.', () => {
 			render( <Placeholder /> );
 			const placeholder = getPlaceholder();
 
@@ -59,6 +64,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,14 +73,18 @@ 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'
 			);
 			expect( placeholderInstructions ).not.toBeInTheDocument();
 
-			// Test for empty fieldset.
-			const placeholderFieldset =
-				within( placeholder ).getByRole( 'group' );
+			// Test for empty content. When the content is empty,
+			// the only way to query the div is with `querySelector`
+			// eslint-disable-next-line testing-library/no-node-access
+			const placeholderFieldset = placeholder.querySelector(
+				'.components-placeholder__fieldset'
+			);
 			expect( placeholderFieldset ).toBeInTheDocument();
 			expect( placeholderFieldset ).toBeEmptyDOMElement();
 		} );
@@ -84,6 +94,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'
 			);
@@ -101,27 +112,38 @@ describe( 'Placeholder', () => {
 			expect( placeholderLabel ).toBeInTheDocument();
 		} );
 
-		it( 'should display a fieldset from the children property', () => {
-			const content = 'Fieldset';
+		it( 'should display content from the children property', () => {
+			const content = 'Placeholder content';
 			render( <Placeholder>{ content }</Placeholder> );
-			const placeholderFieldset = screen.getByRole( 'group' );
+			const placeholder = screen.getByText( content );
 
-			expect( placeholderFieldset ).toBeInTheDocument();
-			expect( placeholderFieldset ).toHaveTextContent( content );
+			expect( placeholder ).toBeInTheDocument();
+			expect( placeholder ).toHaveTextContent( content );
 		} );
 
-		it( 'should display a legend if instructions are passed', () => {
+		it( 'should display instructions when provided', () => {
 			const instructions = 'Choose an option.';
 			render(
 				<Placeholder instructions={ instructions }>
-					<div>Fieldset</div>
+					<div>Placeholder content</div>
+				</Placeholder>
+			);
+			const placeholder = getPlaceholder();
+			const instructionsContainer =
+				within( placeholder ).getByText( instructions );
+
+			expect( instructionsContainer ).toBeInTheDocument();
+		} );
+
+		it( 'should announce instructions to screen readers', () => {
+			const instructions = 'Awesome block placeholder instructions.';
+			render(
+				<Placeholder instructions={ instructions }>
+					<div>Placeholder content</div>
 				</Placeholder>
 			);
-			const captionedFieldset = screen.getByRole( 'group', {
-				name: instructions,
-			} );
 
-			expect( captionedFieldset ).toBeInTheDocument();
+			expect( speak ).toHaveBeenCalledWith( instructions );
 		} );
 
 		it( 'should add an additional className to the top container', () => {
diff --git a/packages/components/src/placeholder/types.ts b/packages/components/src/placeholder/types.ts
index 617cc9585edfc5..64f5acf64ee00c 100644
--- a/packages/components/src/placeholder/types.ts
+++ b/packages/components/src/placeholder/types.ts
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { IconType } from '../icon';
 
-export type PlaceholderProps< IconProps = unknown > = {
+export type PlaceholderProps = {
 	/**
 	 * The children elements.
 	 */
@@ -20,7 +20,7 @@ export type PlaceholderProps< IconProps = unknown > = {
 	/**
 	 * If provided, renders an icon next to the label.
 	 */
-	icon?: IconType< IconProps >;
+	icon?: IconType;
 	/**
 	 * Instructions of the placeholder.
 	 */
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index e012dce41e9a90..32648aa67edf76 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -6,13 +6,13 @@ The behavior of the popover when it exceeds the viewport's edges can be controll
 
 ## Usage
 
-Render a Popover within the parent to which it should anchor.
+Render a Popover adjacent to its container.
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -32,8 +32,8 @@ const MyPopover = () => {
 In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	// Use internal state instead of a ref to make sure that the component
@@ -60,21 +60,20 @@ const MyPopover = () => {
 };
 ```
 
-If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
+By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom/client';
 import { Popover } from '@wordpress/components';
 import Content from './Content';
 
 const app = document.getElementById( 'app' );
-
-render(
+const root = createRoot( app );
+root.render(
 	<div>
 		<Content />
 		<Popover.Slot />
-	</div>,
-	app
+	</div>
 );
 ```
 
@@ -196,10 +195,13 @@ A callback invoked when the popover should be closed.
 
 -   Required: No
 
-### `placement`: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
+### `placement`: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'overlay'`
 
 Used to specify the popover's position with respect to its anchor.
 
+`overlay` is a special case that places the popover over the reference element.
+Please note that other placement related props may not behave as excepted.
+
 -   Required: No
 -   Default: `"bottom-start"`
 
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 1d3b2af1dec1ae..7db476db6b1db1 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -2,25 +2,19 @@
  * External dependencies
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useFloating,
 	flip as flipMiddleware,
 	shift as shiftMiddleware,
+	limitShift,
 	autoUpdate,
 	arrow,
 	offset as offsetMiddleware,
 	size,
-	Middleware,
-	MiddlewareArguments,
 } from '@floating-ui/react-dom';
-// eslint-disable-next-line no-restricted-imports
-import {
-	motion,
-	useReducedMotion,
-	HTMLMotionProps,
-	MotionProps,
-} from 'framer-motion';
+import type { HTMLMotionProps, MotionProps } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -34,8 +28,10 @@ import {
 	useMemo,
 	useState,
 	useCallback,
+	createPortal,
 } from '@wordpress/element';
 import {
+	useReducedMotion,
 	useViewportMatch,
 	useMergeRefs,
 	__experimentalUseDialog as useDialog,
@@ -43,6 +39,7 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -51,27 +48,27 @@ import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import {
-	getFrameOffset,
+	computePopoverPosition,
 	positionToPlacement,
 	placementToMotionAnimationProps,
-	getReferenceOwnerDocument,
 	getReferenceElement,
 } from './utils';
-import type { WordPressComponentProps } from '../ui/context';
+import { contextConnect, useContextSystem } from '../context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	PopoverProps,
-	AnimatedWrapperProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
-import { limitShift as customLimitShift } from './limit-shift';
+import { overlayMiddlewares } from './overlay-middlewares';
+import { StyleProvider } from '../style-provider';
 
 /**
  * Name of slot in which popover should fill.
  *
  * @type {string}
  */
-const SLOT_NAME = 'Popover';
+export const SLOT_NAME = 'Popover';
 
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
@@ -80,7 +77,7 @@ const SLOT_NAME = 'Popover';
 const ArrowTriangle = () => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
-		viewBox={ `0 0 100 100` }
+		viewBox="0 0 100 100"
 		className="components-popover__triangle"
 		role="presentation"
 	>
@@ -96,75 +93,37 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const AnimatedWrapper = forwardRef(
-	(
-		{
-			style: receivedInlineStyles,
-			placement,
-			shouldAnimate = false,
-			...props
-		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
-		forwardedRef: ForwardedRef< any >
-	) => {
-		// When animating, animate only once (i.e. when the popover is opened), and
-		// do not animate on subsequent prop changes (as it conflicts with
-		// floating-ui's positioning updates).
-		const [ hasAnimatedOnce, setHasAnimatedOnce ] = useState( false );
-		const shouldReduceMotion = useReducedMotion();
-
-		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
-			() => placementToMotionAnimationProps( placement ),
-			[ placement ]
-		);
-
-		const onAnimationComplete = useCallback(
-			() => setHasAnimatedOnce( true ),
-			[]
-		);
+const slotNameContext = createContext< string | undefined >( undefined );
 
-		const computedAnimationProps: HTMLMotionProps< 'div' > =
-			shouldAnimate && ! shouldReduceMotion
-				? {
-						style: {
-							...motionInlineStyles,
-							...receivedInlineStyles,
-						},
-						...otherMotionProps,
-						onAnimationComplete,
-						animate: hasAnimatedOnce
-							? false
-							: otherMotionProps.animate,
-				  }
-				: {
-						animate: false,
-						style: receivedInlineStyles,
-				  };
-
-		return (
-			<motion.div
-				{ ...computedAnimationProps }
-				{ ...props }
-				ref={ forwardedRef }
-			/>
-		);
+const fallbackContainerClassname = 'components-popover__fallback-container';
+const getPopoverFallbackContainer = () => {
+	let container = document.body.querySelector(
+		'.' + fallbackContainerClassname
+	);
+	if ( ! container ) {
+		container = document.createElement( 'div' );
+		container.className = fallbackContainerClassname;
+		document.body.append( container );
 	}
-);
 
-const slotNameContext = createContext< string | undefined >( undefined );
+	return container;
+};
 
 const UnforwardedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
 		// expected by `framer-motion`, omit all framer motion props from popover
-		// props (except for `animate`, which is re-defined in `PopoverProps`).
-		keyof Omit< MotionProps, 'animate' >
+		// props (except for `animate` and `children` which are re-defined in
+		// `PopoverProps`, and `style` which is merged safely).
+		keyof Omit< MotionProps, 'animate' | 'children' | 'style' >
 	>,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
 		animate = true,
 		headerTitle,
+		constrainTabbing,
 		onClose,
 		children,
 		className,
@@ -180,7 +139,9 @@ const UnforwardedPopover = (
 		flip = true,
 		resize = true,
 		shift = false,
+		inline = false,
 		variant,
+		style: contentStyle,
 
 		// Deprecated props
 		__unstableForcePosition,
@@ -191,7 +152,7 @@ const UnforwardedPopover = (
 
 		// Rest
 		...contentProps
-	} = props;
+	} = useContextSystem( props, 'Popover' );
 
 	let computedFlipProp = flip;
 	let computedResizeProp = resize;
@@ -241,9 +202,6 @@ const UnforwardedPopover = (
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
-	const [ referenceOwnerDocument, setReferenceOwnerDocument ] = useState<
-		Document | undefined
-	>();
 
 	const anchorRefFallback: RefCallback< HTMLSpanElement > = useCallback(
 		( node ) => {
@@ -259,68 +217,35 @@ const UnforwardedPopover = (
 		? positionToPlacement( position )
 		: placementProp;
 
-	/**
-	 * Offsets the position of the popover when the anchor is inside an iframe.
-	 *
-	 * Store the offset in a ref, due to constraints with floating-ui:
-	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
-	 */
-	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
-
 	const middleware = [
-		// Custom middleware which adjusts the popover's position by taking into
-		// account the offset of the anchor's iframe (if any) compared to the page.
-		{
-			name: 'frameOffset',
-			fn( { x, y }: MiddlewareArguments ) {
-				if ( ! frameOffsetRef.current ) {
-					return {
-						x,
-						y,
-					};
-				}
-
-				return {
-					x: x + frameOffsetRef.current.x,
-					y: y + frameOffsetRef.current.y,
-					data: {
-						// This will be used in the customLimitShift() function.
-						amount: frameOffsetRef.current,
-					},
-				};
-			},
-		},
+		...( placementProp === 'overlay' ? overlayMiddlewares() : [] ),
 		offsetMiddleware( offsetProp ),
-		computedFlipProp ? flipMiddleware() : undefined,
-		computedResizeProp
-			? size( {
-					apply( sizeProps ) {
-						const { firstElementChild } =
-							refs.floating.current ?? {};
-
-						// Only HTMLElement instances have the `style` property.
-						if ( ! ( firstElementChild instanceof HTMLElement ) )
-							return;
-
-						// Reduce the height of the popover to the available space.
-						Object.assign( firstElementChild.style, {
-							maxHeight: `${ sizeProps.availableHeight }px`,
-							overflow: 'auto',
-						} );
-					},
-			  } )
-			: undefined,
-		shift
-			? shiftMiddleware( {
-					crossAxis: true,
-					limiter: customLimitShift(),
-					padding: 1, // Necessary to avoid flickering at the edge of the viewport.
-			  } )
-			: undefined,
+		computedFlipProp && flipMiddleware(),
+		computedResizeProp &&
+			size( {
+				apply( sizeProps ) {
+					const { firstElementChild } = refs.floating.current ?? {};
+
+					// Only HTMLElement instances have the `style` property.
+					if ( ! ( firstElementChild instanceof HTMLElement ) ) {
+						return;
+					}
+
+					// Reduce the height of the popover to the available space.
+					Object.assign( firstElementChild.style, {
+						maxHeight: `${ sizeProps.availableHeight }px`,
+						overflow: 'auto',
+					} );
+				},
+			} ),
+		shift &&
+			shiftMiddleware( {
+				crossAxis: true,
+				limiter: limitShift(),
+				padding: 1, // Necessary to avoid flickering at the edge of the viewport.
+			} ),
 		arrow( { element: arrowRef } ),
-	].filter(
-		( m: Middleware | undefined ): m is Middleware => m !== undefined
-	);
+	];
 	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
@@ -339,6 +264,7 @@ const UnforwardedPopover = (
 	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
+		constrainTabbing,
 		focusOnMount,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
@@ -349,10 +275,6 @@ const UnforwardedPopover = (
 		// Positioning coordinates
 		x,
 		y,
-		// Callback refs (not regular refs). This allows the position to be updated.
-		// when either elements change.
-		reference: referenceCallbackRef,
-		floating,
 		// Object with "regular" refs to both "reference" and "floating"
 		refs,
 		// Type of CSS position property to use (absolute or fixed)
@@ -361,10 +283,14 @@ const UnforwardedPopover = (
 		placement: computedPlacement,
 		middlewareData: { arrow: arrowData },
 	} = useFloating( {
-		placement: normalizedPlacementFromProps,
+		placement:
+			normalizedPlacementFromProps === 'overlay'
+				? undefined
+				: normalizedPlacementFromProps,
 		middleware,
 		whileElementsMounted: ( referenceParam, floatingParam, updateParam ) =>
 			autoUpdate( referenceParam, floatingParam, updateParam, {
+				layoutShift: false,
 				animationFrame: true,
 			} ),
 	} );
@@ -391,14 +317,6 @@ const UnforwardedPopover = (
 		?.current;
 
 	useLayoutEffect( () => {
-		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
-			anchor,
-			anchorRef,
-			anchorRect,
-			getAnchorRect,
-			fallbackReferenceElement,
-			fallbackDocument: document,
-		} );
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
@@ -407,9 +325,7 @@ const UnforwardedPopover = (
 			fallbackReferenceElement,
 		} );
 
-		referenceCallbackRef( resultingReferenceElement );
-
-		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
+		refs.setReference( resultingReferenceElement );
 	}, [
 		anchor,
 		anchorRef,
@@ -420,58 +336,68 @@ const UnforwardedPopover = (
 		anchorRect,
 		getAnchorRect,
 		fallbackReferenceElement,
-		referenceCallbackRef,
+		refs,
 	] );
 
-	// If the reference element is in a different ownerDocument (e.g. iFrame),
-	// we need to manually update the floating's position as the reference's owner
-	// document scrolls. Also update the frame offset if the view resizes.
-	useLayoutEffect( () => {
-		if (
-			// Reference and root documents are the same.
-			referenceOwnerDocument === document ||
-			// Reference and floating are in the same document.
-			referenceOwnerDocument === refs.floating.current?.ownerDocument ||
-			// The reference's document has no view (i.e. window)
-			// or frame element (ie. it's not an iframe).
-			! referenceOwnerDocument?.defaultView?.frameElement
-		) {
-			frameOffsetRef.current = undefined;
-			return;
-		}
-
-		const { defaultView } = referenceOwnerDocument;
-
-		const updateFrameOffset = () => {
-			frameOffsetRef.current = getFrameOffset( referenceOwnerDocument );
-			update();
-		};
-		defaultView.addEventListener( 'resize', updateFrameOffset );
-
-		updateFrameOffset();
-
-		return () => {
-			defaultView.removeEventListener( 'resize', updateFrameOffset );
-		};
-	}, [ referenceOwnerDocument, update, refs.floating ] );
-
 	const mergedFloatingRef = useMergeRefs( [
-		floating,
+		refs.setFloating,
 		dialogRef,
 		forwardedRef,
 	] );
 
-	// Disable reason: We care to capture the _bubbled_ events from inputs
-	// within popover as inferring close intent.
+	const style = isExpanded
+		? undefined
+		: {
+				position: strategy,
+				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.
+				x: computePopoverPosition( x ),
+				y: computePopoverPosition( y ),
+		  };
+
+	const shouldReduceMotion = useReducedMotion();
+	const shouldAnimate = animate && ! isExpanded && ! shouldReduceMotion;
+
+	const [ animationFinished, setAnimationFinished ] = useState( false );
+
+	const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+		() => placementToMotionAnimationProps( computedPlacement ),
+		[ computedPlacement ]
+	);
+
+	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
+		? {
+				style: {
+					...contentStyle,
+					...motionInlineStyles,
+					...style,
+				},
+				onAnimationComplete: () => setAnimationFinished( true ),
+				...otherMotionProps,
+		  }
+		: {
+				animate: false,
+				style: {
+					...contentStyle,
+					...style,
+				},
+		  };
+
+	// When Floating UI has finished positioning and Framer Motion has finished animating
+	// the popover, add the `is-positioned` class to signal that all transitions have finished.
+	const isPositioned =
+		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
 
 	let content = (
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<AnimatedWrapper
-			shouldAnimate={ animate && ! isExpanded }
-			placement={ computedPlacement }
-			className={ classnames( 'components-popover', className, {
+		<motion.div
+			className={ clsx( className, {
 				'is-expanded': isExpanded,
+				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'
@@ -479,19 +405,11 @@ const UnforwardedPopover = (
 						: computedVariant
 				}` ]: computedVariant,
 			} ) }
+			{ ...animationProps }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
 			{ ...dialogProps }
 			tabIndex={ -1 }
-			style={
-				isExpanded
-					? undefined
-					: {
-							position: strategy,
-							left: Number.isNaN( x ) ? 0 : x ?? undefined,
-							top: Number.isNaN( y ) ? 0 : y ?? undefined,
-					  }
-			}
 		>
 			{ /* Prevents scroll on the document */ }
 			{ isExpanded && <ScrollLock /> }
@@ -502,8 +420,10 @@ const UnforwardedPopover = (
 					</span>
 					<Button
 						className="components-popover__close"
+						size="small"
 						icon={ close }
 						onClick={ onClose }
+						label={ __( 'Close' ) }
 					/>
 				</div>
 			) }
@@ -519,36 +439,43 @@ const UnforwardedPopover = (
 						left:
 							typeof arrowData?.x !== 'undefined' &&
 							Number.isFinite( arrowData.x )
-								? `${
-										arrowData.x +
-										( frameOffsetRef.current?.x ?? 0 )
-								  }px`
+								? `${ arrowData.x }px`
 								: '',
 						top:
 							typeof arrowData?.y !== 'undefined' &&
 							Number.isFinite( arrowData.y )
-								? `${
-										arrowData.y +
-										( frameOffsetRef.current?.y ?? 0 )
-								  }px`
+								? `${ arrowData.y }px`
 								: '',
 					} }
 				>
 					<ArrowTriangle />
 				</div>
 			) }
-		</AnimatedWrapper>
+		</motion.div>
 	);
 
-	if ( slot.ref ) {
+	const shouldRenderWithinSlot = slot.ref && ! inline;
+	const hasAnchor = anchorRef || anchorRect || anchor;
+
+	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
+	} else if ( ! inline ) {
+		content = createPortal(
+			<StyleProvider document={ document }>{ content }</StyleProvider>,
+			getPopoverFallbackContainer()
+		);
 	}
 
-	if ( anchorRef || anchorRect || anchor ) {
+	if ( hasAnchor ) {
 		return content;
 	}
 
-	return <span ref={ anchorRefFallback }>{ content }</span>;
+	return (
+		<>
+			<span ref={ anchorRefFallback } />
+			{ content }
+		</>
+	);
 };
 
 /**
@@ -574,7 +501,7 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = forwardRef( UnforwardedPopover );
+export const Popover = contextConnect( UnforwardedPopover, 'Popover' );
 
 function PopoverSlot(
 	{ name = SLOT_NAME }: { name?: string },
@@ -582,7 +509,6 @@ function PopoverSlot(
 ) {
 	return (
 		<Slot
-			// @ts-expect-error Need to type `SlotFill`
 			bubblesVirtually
 			name={ name }
 			className="popover-slot"
diff --git a/packages/components/src/popover/limit-shift.ts b/packages/components/src/popover/limit-shift.ts
deleted file mode 100644
index 45e65a0b619098..00000000000000
--- a/packages/components/src/popover/limit-shift.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * External dependencies
- */
-import type {
-	Axis,
-	Coords,
-	Placement,
-	Side,
-	MiddlewareArguments,
-} from '@floating-ui/react-dom';
-
-/**
- * Parts of this source were derived and modified from `floating-ui`,
- * released under the MIT license.
- *
- * https://github.com/floating-ui/floating-ui
- *
- * Copyright (c) 2021 Floating UI contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * Custom limiter function for the `shift` middleware.
- * This function is mostly identical default `limitShift` from ``@floating-ui`;
- * the only difference is that, when computing the min/max shift limits, it
- * also takes into account the iframe offset that is added by the
- * custom "frameOffset" middleware.
- *
- * All unexported types and functions are also from the `@floating-ui` library,
- * and have been copied to this file for convenience.
- */
-
-type LimitShiftOffset =
-	| ( ( args: MiddlewareArguments ) =>
-			| number
-			| {
-					/**
-					 * Offset the limiting of the axis that runs along the alignment of the
-					 * floating element.
-					 */
-					mainAxis?: number;
-					/**
-					 * Offset the limiting of the axis that runs along the side of the
-					 * floating element.
-					 */
-					crossAxis?: number;
-			  } )
-	| number
-	| {
-			/**
-			 * Offset the limiting of the axis that runs along the alignment of the
-			 * floating element.
-			 */
-			mainAxis?: number;
-			/**
-			 * Offset the limiting of the axis that runs along the side of the
-			 * floating element.
-			 */
-			crossAxis?: number;
-	  };
-
-type LimitShiftOptions = {
-	/**
-	 * Offset when limiting starts. `0` will limit when the opposite edges of the
-	 * reference and floating elements are aligned.
-	 * - positive = start limiting earlier
-	 * - negative = start limiting later
-	 */
-	offset: LimitShiftOffset;
-	/**
-	 * Whether to limit the axis that runs along the alignment of the floating
-	 * element.
-	 */
-	mainAxis: boolean;
-	/**
-	 * Whether to limit the axis that runs along the side of the floating element.
-	 */
-	crossAxis: boolean;
-};
-
-function getSide( placement: Placement ): Side {
-	return placement.split( '-' )[ 0 ] as Side;
-}
-
-function getMainAxisFromPlacement( placement: Placement ): Axis {
-	return [ 'top', 'bottom' ].includes( getSide( placement ) ) ? 'x' : 'y';
-}
-
-function getCrossAxis( axis: Axis ): Axis {
-	return axis === 'x' ? 'y' : 'x';
-}
-
-export const limitShift = (
-	options: Partial< LimitShiftOptions > = {}
-): {
-	options: Partial< LimitShiftOffset >;
-	fn: ( middlewareArguments: MiddlewareArguments ) => Coords;
-} => ( {
-	options,
-	fn( middlewareArguments ) {
-		const { x, y, placement, rects, middlewareData } = middlewareArguments;
-		const {
-			offset = 0,
-			mainAxis: checkMainAxis = true,
-			crossAxis: checkCrossAxis = true,
-		} = options;
-
-		const coords = { x, y };
-		const mainAxis = getMainAxisFromPlacement( placement );
-		const crossAxis = getCrossAxis( mainAxis );
-
-		let mainAxisCoord = coords[ mainAxis ];
-		let crossAxisCoord = coords[ crossAxis ];
-
-		const rawOffset =
-			typeof offset === 'function'
-				? offset( middlewareArguments )
-				: offset;
-		const computedOffset =
-			typeof rawOffset === 'number'
-				? { mainAxis: rawOffset, crossAxis: 0 }
-				: { mainAxis: 0, crossAxis: 0, ...rawOffset };
-
-		// At the moment of writing, this is the only difference
-		// with the `limitShift` function from `@floating-ui`.
-		// This offset needs to be added to all min/max limits
-		// in order to make the shift-limiting work as expected.
-		const additionalFrameOffset = {
-			x: 0,
-			y: 0,
-			...middlewareData.frameOffset?.amount,
-		};
-
-		if ( checkMainAxis ) {
-			const len = mainAxis === 'y' ? 'height' : 'width';
-			const limitMin =
-				rects.reference[ mainAxis ] -
-				rects.floating[ len ] +
-				computedOffset.mainAxis +
-				additionalFrameOffset[ mainAxis ];
-			const limitMax =
-				rects.reference[ mainAxis ] +
-				rects.reference[ len ] -
-				computedOffset.mainAxis +
-				additionalFrameOffset[ mainAxis ];
-
-			if ( mainAxisCoord < limitMin ) {
-				mainAxisCoord = limitMin;
-			} else if ( mainAxisCoord > limitMax ) {
-				mainAxisCoord = limitMax;
-			}
-		}
-
-		if ( checkCrossAxis ) {
-			const len = mainAxis === 'y' ? 'width' : 'height';
-			const isOriginSide = [ 'top', 'left' ].includes(
-				getSide( placement )
-			);
-			const limitMin =
-				rects.reference[ crossAxis ] -
-				rects.floating[ len ] +
-				( isOriginSide
-					? middlewareData.offset?.[ crossAxis ] ?? 0
-					: 0 ) +
-				( isOriginSide ? 0 : computedOffset.crossAxis ) +
-				additionalFrameOffset[ crossAxis ];
-			const limitMax =
-				rects.reference[ crossAxis ] +
-				rects.reference[ len ] +
-				( isOriginSide
-					? 0
-					: middlewareData.offset?.[ crossAxis ] ?? 0 ) -
-				( isOriginSide ? computedOffset.crossAxis : 0 ) +
-				additionalFrameOffset[ crossAxis ];
-
-			if ( crossAxisCoord < limitMin ) {
-				crossAxisCoord = limitMin;
-			} else if ( crossAxisCoord > limitMax ) {
-				crossAxisCoord = limitMax;
-			}
-		}
-
-		return {
-			[ mainAxis ]: mainAxisCoord,
-			[ crossAxis ]: crossAxisCoord,
-		} as Coords;
-	},
-} );
diff --git a/packages/components/src/popover/overlay-middlewares.tsx b/packages/components/src/popover/overlay-middlewares.tsx
new file mode 100644
index 00000000000000..8647fe6fb5251e
--- /dev/null
+++ b/packages/components/src/popover/overlay-middlewares.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { MiddlewareState } from '@floating-ui/react-dom';
+import { size } from '@floating-ui/react-dom';
+
+export function overlayMiddlewares() {
+	return [
+		{
+			name: 'overlay',
+			fn( { rects }: MiddlewareState ) {
+				return rects.reference;
+			},
+		},
+		size( {
+			apply( { rects, elements } ) {
+				const { firstElementChild } = elements.floating ?? {};
+
+				// Only HTMLElement instances have the `style` property.
+				if ( ! ( firstElementChild instanceof HTMLElement ) ) {
+					return;
+				}
+
+				// Reduce the height of the popover to the available space.
+				Object.assign( firstElementChild.style, {
+					width: `${ rects.reference.width }px`,
+					height: `${ rects.reference.height }px`,
+				} );
+			},
+		} ),
+	];
+}
diff --git a/packages/components/src/popover/stories/e2e/index.tsx b/packages/components/src/popover/stories/e2e/index.story.tsx
similarity index 100%
rename from packages/components/src/popover/stories/e2e/index.tsx
rename to packages/components/src/popover/stories/e2e/index.story.tsx
diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx
new file mode 100644
index 00000000000000..cf1bd5135ad9fd
--- /dev/null
+++ b/packages/components/src/popover/stories/index.story.tsx
@@ -0,0 +1,255 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { Popover } from '..';
+import { PopoverInsideIframeRenderedInExternalSlot } from '../test/utils';
+import type { PopoverProps } from '../types';
+
+const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
+	'top',
+	'top-start',
+	'top-end',
+	'right',
+	'right-start',
+	'right-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+	'overlay',
+];
+
+const meta: Meta< typeof Popover > = {
+	title: 'Components/Overlays/Popover',
+	id: 'components-popover',
+	component: Popover,
+	argTypes: {
+		anchor: { control: false },
+		anchorRef: { control: false },
+		anchorRect: { control: false },
+		children: { control: false },
+		focusOnMount: {
+			control: { type: 'select' },
+			options: [ 'firstElement', true, false ],
+		},
+		getAnchorRect: { control: false },
+		onClose: { action: 'onClose' },
+		onFocusOutside: { action: 'onFocusOutside' },
+		__unstableSlotName: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+};
+
+export default meta;
+
+const PopoverWithAnchor = ( args: PopoverProps ) => {
+	const anchorRef = useRef( null );
+
+	return (
+		<div
+			style={ {
+				height: '200px',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			} }
+		>
+			<p
+				style={ { padding: '8px', background: 'salmon' } }
+				ref={ anchorRef }
+			>
+				Popover&apos;s anchor
+			</p>
+			<Popover { ...args } anchorRef={ anchorRef } />
+		</div>
+	);
+};
+
+export const Default: StoryObj< typeof Popover > = {
+	decorators: [
+		( Story ) => {
+			const [ isVisible, setIsVisible ] = useState( false );
+			const toggleVisible = () => {
+				setIsVisible( ( state ) => ! state );
+			};
+			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			useEffect( () => {
+				buttonRef.current?.scrollIntoView?.( {
+					block: 'center',
+					inline: 'center',
+				} );
+			}, [] );
+
+			return (
+				<div
+					style={ {
+						width: '300vw',
+						height: '300vh',
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+					} }
+				>
+					<Button
+						variant="secondary"
+						onClick={ toggleVisible }
+						ref={ buttonRef }
+					>
+						Toggle Popover
+						{ isVisible && <Story /> }
+					</Button>
+				</div>
+			);
+		},
+	],
+	args: {
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				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.
+			</div>
+		),
+	},
+};
+
+export const Unstyled: StoryObj< typeof Popover > = {
+	...Default,
+	args: {
+		...Default.args,
+
+		variant: 'unstyled',
+	},
+};
+
+export const AllPlacements: StoryObj< typeof Popover > = {
+	render: ( { children, ...args } ) => (
+		<div
+			style={ {
+				minWidth: '600px',
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			} }
+		>
+			<h2>
+				Resize / scroll the viewport to test the behavior of the
+				popovers when they reach the viewport boundaries.
+			</h2>
+			<div>
+				{ AVAILABLE_PLACEMENTS.map( ( p ) => (
+					<PopoverWithAnchor
+						key={ p }
+						placement={ p }
+						{ ...args }
+						resize={ p === 'overlay' ? true : args.resize }
+					>
+						{ children }
+						<div>
+							<small>(placement: { p })</small>
+						</div>
+					</PopoverWithAnchor>
+				) ) }
+			</div>
+		</div>
+	),
+	// Excluding placement and position since they all possible values
+	// are passed directly in code.
+	parameters: {
+		controls: {
+			exclude: [ 'placement', 'position' ],
+		},
+	},
+	args: {
+		...Default.args,
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+				eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			</div>
+		),
+		noArrow: false,
+		offset: 10,
+		resize: false,
+		flip: false,
+	},
+};
+
+export const DynamicHeight: StoryObj< typeof Popover > = {
+	decorators: [
+		( Story ) => {
+			const [ height, setHeight ] = useState( 200 );
+			const increase = () => setHeight( height + 100 );
+			const decrease = () => setHeight( height - 100 );
+
+			return (
+				<div style={ { padding: '20px' } }>
+					<div>
+						<Button
+							variant="primary"
+							onClick={ increase }
+							style={ {
+								marginRight: '20px',
+							} }
+						>
+							Increase Size
+						</Button>
+
+						<Button variant="primary" onClick={ decrease }>
+							Decrease Size
+						</Button>
+					</div>
+
+					<p>
+						When the height of the popover exceeds the available
+						space in the canvas, a scrollbar inside the popover
+						should appear.
+					</p>
+
+					<div>
+						<style>{ `.components-popover { --dynamic-height: ${ height }px; }` }</style>
+						<Story />
+					</div>
+				</div>
+			);
+		},
+	],
+	args: {
+		...Default.args,
+		children: (
+			<div
+				style={ {
+					height: 'var(--dynamic-height)',
+					background: '#eee',
+					padding: '20px',
+				} }
+			>
+				Content with dynamic height
+			</div>
+		),
+	},
+};
+
+export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
+	render: ( args ) => (
+		<PopoverInsideIframeRenderedInExternalSlot { ...args } />
+	),
+	args: {
+		...Default.args,
+	},
+};
diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx
deleted file mode 100644
index f5a8fab45d7fcf..00000000000000
--- a/packages/components/src/popover/stories/index.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-// @ts-expect-error The `@wordpress/block-editor` is not typed
-import { __unstableIframe as Iframe } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import { Popover } from '..';
-import type { PopoverProps } from '../types';
-
-const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
-	'top',
-	'top-start',
-	'top-end',
-	'right',
-	'right-start',
-	'right-end',
-	'bottom',
-	'bottom-start',
-	'bottom-end',
-	'left',
-	'left-start',
-	'left-end',
-];
-
-const meta: ComponentMeta< typeof Popover > = {
-	title: 'Components/Popover',
-	component: Popover,
-	argTypes: {
-		anchor: { control: { type: null } },
-		anchorRef: { control: { type: null } },
-		anchorRect: { control: { type: null } },
-		children: { control: { type: null } },
-		focusOnMount: {
-			control: { type: 'select' },
-			options: [ 'firstElement', true, false ],
-		},
-		getAnchorRect: { control: { type: null } },
-		onClose: { action: 'onClose' },
-		onFocusOutside: { action: 'onFocusOutside' },
-		__unstableSlotName: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-	},
-};
-
-export default meta;
-
-const PopoverWithAnchor = ( args: PopoverProps ) => {
-	const anchorRef = useRef( null );
-
-	return (
-		<div
-			style={ {
-				height: '200px',
-				display: 'flex',
-				justifyContent: 'center',
-				alignItems: 'center',
-			} }
-		>
-			<p
-				style={ { padding: '8px', background: 'salmon' } }
-				ref={ anchorRef }
-			>
-				Popover&apos;s anchor
-			</p>
-			<Popover { ...args } anchorRef={ anchorRef } />
-		</div>
-	);
-};
-
-const Template: ComponentStory< typeof Popover > = ( args ) => {
-	const [ isVisible, setIsVisible ] = useState( false );
-	const toggleVisible = () => {
-		setIsVisible( ( state ) => ! state );
-	};
-	const buttonRef = useRef< HTMLButtonElement | undefined >();
-	useEffect( () => {
-		buttonRef.current?.scrollIntoView?.( {
-			block: 'center',
-			inline: 'center',
-		} );
-	}, [] );
-
-	return (
-		<div
-			style={ {
-				width: '300vw',
-				height: '300vh',
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-			} }
-		>
-			<Button
-				variant="secondary"
-				onClick={ toggleVisible }
-				ref={ buttonRef }
-			>
-				Toggle Popover
-				{ isVisible && <Popover { ...args } /> }
-			</Button>
-		</div>
-	);
-};
-
-export const Default: ComponentStory< typeof Popover > = Template.bind( {} );
-Default.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			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.
-		</div>
-	),
-};
-
-export const Toolbar: ComponentStory< typeof Popover > = Template.bind( {} );
-Toolbar.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			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.
-		</div>
-	),
-	variant: 'toolbar',
-};
-
-export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
-Unstyled.args = {
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			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.
-		</div>
-	),
-	variant: 'unstyled',
-};
-
-export const AllPlacements: ComponentStory< typeof Popover > = ( {
-	children,
-	...args
-} ) => (
-	<div
-		style={ {
-			minWidth: '600px',
-			marginLeft: 'auto',
-			marginRight: 'auto',
-		} }
-	>
-		<h2>
-			Resize / scroll the viewport to test the behavior of the popovers
-			when they reach the viewport boundaries.
-		</h2>
-		<div>
-			{ AVAILABLE_PLACEMENTS.map( ( p ) => (
-				<PopoverWithAnchor key={ p } placement={ p } { ...args }>
-					{ children }
-					<div>
-						<small>(placement: { p })</small>
-					</div>
-				</PopoverWithAnchor>
-			) ) }
-		</div>
-	</div>
-);
-// Excluding placement and position since they all possible values
-// are passed directly in code.
-AllPlacements.parameters = {
-	controls: {
-		exclude: [ 'placement', 'position' ],
-	},
-};
-AllPlacements.args = {
-	...Default.args,
-	children: (
-		<div style={ { width: '280px', whiteSpace: 'normal' } }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-			eiusmod tempor incididunt ut labore et dolore magna aliqua.
-		</div>
-	),
-	noArrow: false,
-	offset: 10,
-	resize: false,
-	flip: false,
-};
-
-export const DynamicHeight: ComponentStory< typeof Popover > = ( {
-	children,
-	...args
-} ) => {
-	const [ height, setHeight ] = useState( 200 );
-	const increase = () => setHeight( height + 100 );
-	const decrease = () => setHeight( height - 100 );
-
-	return (
-		<div style={ { padding: '20px' } }>
-			<div>
-				<Button
-					variant="primary"
-					onClick={ increase }
-					style={ {
-						marginRight: '20px',
-					} }
-				>
-					Increase Size
-				</Button>
-
-				<Button variant="primary" onClick={ decrease }>
-					Decrease Size
-				</Button>
-			</div>
-
-			<p>
-				When the height of the popover exceeds the available space in
-				the canvas, a scrollbar inside the popover should appear.
-			</p>
-
-			<div>
-				<Popover { ...args }>
-					<div
-						style={ {
-							height,
-							background: '#eee',
-							padding: '20px',
-						} }
-					>
-						{ children }
-					</div>
-				</Popover>
-			</div>
-		</div>
-	);
-};
-DynamicHeight.args = {
-	...Default.args,
-	children: 'Content with dynamic height',
-};
-
-export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = (
-	args
-) => {
-	const anchorRef = useRef( null );
-	const slotName = 'popover-with-slot-outside-iframe';
-
-	return (
-		<SlotFillProvider>
-			<div>
-				{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-				<Popover.Slot name={ slotName } />
-				<Iframe
-					style={ {
-						width: '100%',
-						height: '400px',
-						border: '0',
-						outline: '1px solid purple',
-					} }
-				>
-					<div
-						style={ {
-							height: '200vh',
-							paddingTop: '10vh',
-						} }
-					>
-						<p
-							style={ {
-								padding: '8px',
-								background: 'salmon',
-								maxWidth: '200px',
-								marginTop: '100px',
-								marginLeft: 'auto',
-								marginRight: 'auto',
-							} }
-							ref={ anchorRef }
-						>
-							Popover&apos;s anchor
-						</p>
-						<Popover
-							{ ...args }
-							__unstableSlotName={ slotName }
-							anchorRef={ anchorRef }
-						/>
-					</div>
-				</Iframe>
-			</div>
-		</SlotFillProvider>
-	);
-};
-WithSlotOutsideIframe.args = {
-	...Default.args,
-};
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index a557454da6f139..601e9ebb7675f5 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -1,7 +1,14 @@
 $arrow-triangle-base-size: 14px;
 
+$shadow-popover-border-default: 0 0 0 $border-width $gray-400;
+$shadow-popover-border-default-alternate: 0 0 0 $border-width $gray-900;
+$shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
+$shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
+
 .components-popover {
+	@include reset;
 	z-index: z-index(".components-popover");
+	will-change: transform;
 
 	&.is-expanded {
 		position: fixed;
@@ -15,26 +22,21 @@ $arrow-triangle-base-size: 14px;
 
 .components-popover__content {
 	background: $white;
-	// Using outline instead of border to avoid impacting
-	// popover computations.
-	outline: $border-width solid $gray-400;
-	box-shadow: $shadow-popover;
-	border-radius: $radius-block-ui;
+	box-shadow: $shadow-popover-border-default, $elevation-medium;
+	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
 
-	// Alternate treatment for popovers that put them at elevation zero with high contrast.
+	// Alternate treatment for popovers that put them at elevation zero with high contrast and smaller radius.
 	.is-alternate & {
-		outline: $border-width solid $gray-900;
-		box-shadow: none;
+		box-shadow: $shadow-popover-border-default-alternate;
+		border-radius: $radius-small;
 	}
 
 	// A style that gives the popover no visible ui.
 	.is-unstyled & {
 		background: none;
-		border: none;
 		border-radius: 0;
-		outline: none;
 		box-shadow: none;
 	}
 
@@ -43,9 +45,10 @@ $arrow-triangle-base-size: 14px;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
 		width: auto;
-		border: none;
-		outline: none;
-		border-top: $border-width solid $gray-900;
+		box-shadow: $shadow-popover-border-top-only;
+	}
+	.components-popover.is-expanded.is-alternate & {
+		box-shadow: $shadow-popover-border-top-only-alternate;
 	}
 }
 
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index b06886e52243ef..eac0f942df2f6e 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, getByText } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import type { CSSProperties } from 'react';
 
 /**
@@ -12,25 +13,52 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { positionToPlacement, placementToMotionAnimationProps } from '../utils';
+import {
+	computePopoverPosition,
+	positionToPlacement,
+	placementToMotionAnimationProps,
+} from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	NonNullable< PopoverProps[ 'placement' ] >,
 ];
 type PlacementToAnimationOriginTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	number,
-	number
+	number,
 ];
 type PlacementToInitialTranslationTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	'translateY' | 'translateX',
-	CSSProperties[ 'translate' ]
+	CSSProperties[ 'translate' ],
 ];
 
+beforeAll( () => {
+	// This mock is necessary because deep in the weeds, `useConstrained` relies
+	// on `focusable` to return a list of DOM elements that can be focused. Part
+	// of this process involves checking that an element has an intrinsic size,
+	// which will always fail in JSDom.
+	//
+	// https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61
+	jest.spyOn(
+		HTMLElement.prototype,
+		'offsetHeight',
+		'get'
+	).mockImplementation( function getOffsetHeight( this: HTMLElement ) {
+		// The `1` returned here is somewhat arbitrary – it just needs to be a
+		// non-zero integer.
+		return 1;
+	} );
+} );
+
+afterAll( () => {
+	jest.restoreAllMocks();
+} );
+
 // There's no matching `placement` for 'middle center' positions,
 // fallback to 'bottom' (same as `floating-ui`'s default.)
 const FALLBACK_FOR_MIDDLE_CENTER_POSITIONS = 'bottom';
@@ -92,21 +120,39 @@ const ALL_POSITIONS_TO_EXPECTED_PLACEMENTS: PositionToPlacementTuple[] = [
 describe( 'Popover', () => {
 	describe( 'Component', () => {
 		describe( 'basic behavior', () => {
-			it( 'should render content', () => {
+			it( 'should render content', async () => {
 				render( <Popover>Hello</Popover> );
 
-				expect( screen.getByText( 'Hello' ) ).toBeInTheDocument();
+				await waitFor( () =>
+					expect( screen.getByText( 'Hello' ) ).toBeVisible()
+				);
 			} );
 
-			it( 'should forward additional props to portaled element', () => {
+			it( 'should forward additional props to portaled element', async () => {
 				render( <Popover role="tooltip">Hello</Popover> );
 
-				expect( screen.getByRole( 'tooltip' ) ).toBeInTheDocument();
+				await waitFor( () =>
+					expect( screen.getByRole( 'tooltip' ) ).toBeVisible()
+				);
+			} );
+
+			it( 'should render inline regardless of slot name', async () => {
+				const { container } = render(
+					<Popover inline __unstableSlotName="Popover">
+						Hello
+					</Popover>
+				);
+
+				await waitFor( () =>
+					// We want to explicitly check if it's within the container.
+					// eslint-disable-next-line testing-library/prefer-screen-queries
+					expect( getByText( container, 'Hello' ) ).toBeVisible()
+				);
 			} );
 		} );
 
 		describe( 'anchor', () => {
-			it( 'should render correctly when anchor is provided', () => {
+			it( 'should render correctly when anchor is provided', async () => {
 				const PopoverWithAnchor = ( args: PopoverProps ) => {
 					// Use internal state instead of a ref to make sure that the component
 					// re-renders when the popover's anchor updates.
@@ -125,29 +171,317 @@ describe( 'Popover', () => {
 					<PopoverWithAnchor>Popover content</PopoverWithAnchor>
 				);
 
-				expect(
-					screen.getByText( 'Popover content' )
-				).toBeInTheDocument();
+				await waitFor( () =>
+					expect(
+						screen.getByText( 'Popover content' )
+					).toBeVisible()
+				);
+			} );
+		} );
+
+		describe( 'style', () => {
+			it( 'outputs inline styles added through the style prop in addition to built-in popover positioning styles', async () => {
+				render(
+					<Popover
+						style={ { zIndex: 0 } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).toHaveStyle(
+					'position: absolute; top: 0px; left: 0px; z-index: 0;'
+				);
+			} );
+
+			it( 'is not possible to override built-in popover positioning styles via the style prop', async () => {
+				render(
+					<Popover
+						style={ { position: 'static' } }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).not.toHaveStyle( 'position: static;' );
 			} );
 		} );
 
 		describe( 'focus behavior', () => {
-			it( 'should focus the popover by default when opened', () => {
-				render( <Popover>Popover content</Popover> );
+			it( 'should focus the popover container when opened', async () => {
+				render(
+					<Popover focusOnMount data-testid="popover-element">
+						Popover content
+					</Popover>
+				);
+
+				const popover = screen.getByTestId( 'popover-element' );
 
-				expect(
-					screen.getByText( 'Popover content' ).parentElement
-				).toHaveFocus();
+				await waitFor( () => expect( popover ).toBeVisible() );
+
+				expect( popover ).toHaveFocus();
 			} );
 
-			it( 'should allow focus-on-open behavior to be disabled', () => {
+			it( 'should allow focus-on-open behavior to be disabled', async () => {
 				render(
 					<Popover focusOnMount={ false }>Popover content</Popover>
 				);
 
+				await waitFor( () =>
+					expect(
+						screen.getByText( 'Popover content' )
+					).toBeVisible()
+				);
+
 				expect( document.body ).toHaveFocus();
 			} );
 		} );
+
+		describe( 'tab constraint behavior', () => {
+			// `constrainTabbing` is implicitly controlled by `focusOnMount`.
+			// By default, when `focusOnMount` is false, `constrainTabbing` will
+			// also be false; otherwise, `constrainTabbing` will be true.
+
+			const setup = async (
+				props?: Partial< React.ComponentProps< typeof Popover > >
+			) => {
+				const user = await userEvent.setup();
+				const view = render(
+					<Popover data-testid="popover-element" { ...props }>
+						<button>Button 1</button>
+						<button>Button 2</button>
+						<button>Button 3</button>
+					</Popover>
+				);
+
+				const popover = screen.getByTestId( 'popover-element' );
+				await waitFor( () => expect( popover ).toBeVisible() );
+
+				const [ firstButton, secondButton, thirdButton ] =
+					screen.getAllByRole( 'button' );
+
+				return {
+					...view,
+					popover,
+					firstButton,
+					secondButton,
+					thirdButton,
+					user,
+				};
+			};
+
+			// Note: due to an issue in testing-library/user-event [1], the
+			// tests for constrained tabbing fail.
+			// [1]: https://github.com/testing-library/user-event/issues/1188
+			//
+			// eslint-disable-next-line jest/no-disabled-tests
+			describe.skip( 'constrains tabbing', () => {
+				test( 'by default', async () => {
+					// The default value for `focusOnMount` is 'firstElement',
+					// which means the default value for `constrainTabbing` is
+					// 'true'.
+
+					const { user, firstButton, secondButton, thirdButton } =
+						await setup();
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is true', async () => {
+					const {
+						user,
+						popover,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { focusOnMount: true } );
+
+					expect( popover ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is "firstElement"', async () => {
+					const { user, firstButton, secondButton, thirdButton } =
+						await setup( { focusOnMount: 'firstElement' } );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is false if `constrainTabbing` is true', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: false,
+						constrainTabbing: true,
+					} );
+
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+			} );
+
+			describe( 'does not constrain tabbing', () => {
+				test( 'when `constrainTabbing` is false', async () => {
+					// The default value for `focusOnMount` is 'firstElement',
+					// which means the default value for `constrainTabbing` is
+					// 'true', but the provided value should override this.
+
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { constrainTabbing: false } );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is false', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { focusOnMount: false } );
+
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is true if `constrainTabbing` is false', async () => {
+					const {
+						user,
+						baseElement,
+						popover,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: true,
+						constrainTabbing: false,
+					} );
+
+					expect( popover ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is "firstElement" if `constrainTabbing` is false', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: 'firstElement',
+						constrainTabbing: false,
+					} );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'Slot outside iframe', () => {
+		it( 'should support cross-document rendering', async () => {
+			render(
+				<PopoverInsideIframeRenderedInExternalSlot>
+					<span>content</span>
+				</PopoverInsideIframeRenderedInExternalSlot>
+			);
+			await waitFor( async () =>
+				expect( screen.getByText( 'content' ) ).toBeVisible()
+			);
+		} );
 	} );
 
 	describe( 'positionToPlacement', () => {
@@ -227,4 +561,21 @@ describe( 'Popover', () => {
 			);
 		} );
 	} );
+
+	describe( 'computePopoverPosition', () => {
+		it.each( [
+			[ 14, 14 ], // valid integers shouldn't be changes
+			[ 14.02, 14 ], // floating numbers are parsed to integers
+			[ 0, 0 ], // zero remains zero
+			[ null, undefined ],
+			[ NaN, undefined ],
+		] )(
+			'converts `%s` to `%s`',
+			( inputCoordinate, expectedCoordinated ) => {
+				expect( computePopoverPosition( inputCoordinate ) ).toEqual(
+					expectedCoordinated
+				);
+			}
+		);
+	} );
 } );
diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx
new file mode 100644
index 00000000000000..91fa26d8102437
--- /dev/null
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { createPortal, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Popover from '../..';
+import { Provider as SlotFillProvider } from '../../../slot-fill';
+import type { WordPressComponentProps } from '../../../context';
+
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
+
+	return (
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
+		</iframe>
+	);
+};
+
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
+
+	return (
+		<SlotFillProvider>
+			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 96cb7e5fd6f863..427f4afb81bfb9 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -12,10 +12,7 @@ type DomRectWithOwnerDocument = DOMRect & {
 	ownerDocument?: Document;
 };
 
-export type AnimatedWrapperProps = {
-	placement: Placement;
-	shouldAnimate?: boolean;
-};
+type PopoverPlacement = Placement | 'overlay';
 
 export type PopoverAnchorRefReference = MutableRefObject<
 	Element | null | undefined
@@ -68,6 +65,15 @@ export type PopoverProps = {
 	 * @default true
 	 */
 	flip?: boolean;
+	/**
+	 * Determines whether tabbing is constrained to within the popover,
+	 * preventing keyboard focus from leaving the popover content without
+	 * explicit focus elswhere, or whether the popover remains part of the wider
+	 * tab order. If no value is passed, it will be derived from `focusOnMount`.
+	 *
+	 * @default `focusOnMount` !== false
+	 */
+	constrainTabbing?: 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"`.
@@ -111,7 +117,7 @@ export type PopoverProps = {
 	 *
 	 * @default 'bottom-start'
 	 */
-	placement?: Placement;
+	placement?: PopoverPlacement;
 	/**
 	 * Legacy way to specify the popover's position with respect to its anchor.
 	 * _Note: this prop is deprecated. Use the `placement` prop instead._
@@ -148,6 +154,12 @@ export type PopoverProps = {
 	 * @default undefined
 	 */
 	variant?: 'unstyled' | 'toolbar';
+	/**
+	 * Whether to render the popover inline or within the slot.
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
 	// Deprecated props
 	/**
 	 * Prevent the popover from flipping and resizing when meeting the viewport
diff --git a/packages/components/src/popover/utils.ts b/packages/components/src/popover/utils.ts
index f14e2c921f1ede..6b9a4fa3c36a9c 100644
--- a/packages/components/src/popover/utils.ts
+++ b/packages/components/src/popover/utils.ts
@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type { ReferenceType } from '@floating-ui/react-dom';
+import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -16,7 +15,7 @@ import type {
 
 const POSITION_TO_PLACEMENT: Record<
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	Placement
 > = {
 	bottom: 'bottom',
 	top: 'top',
@@ -74,13 +73,12 @@ const POSITION_TO_PLACEMENT: Record<
  * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
  * (used by `floating-ui`).
  *
- * @param  position The legacy position
+ * @param position The legacy position
  * @return The corresponding placement
  */
 export const positionToPlacement = (
 	position: NonNullable< PopoverProps[ 'position' ] >
-): NonNullable< PopoverProps[ 'placement' ] > =>
-	POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
+) => POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
 
 /**
  * @typedef AnimationOrigin
@@ -105,13 +103,14 @@ const PLACEMENT_TO_ANIMATION_ORIGIN: Record<
 	left: { originX: 1, originY: 0.5 }, // open from middle, right
 	'left-start': { originX: 1, originY: 0 }, // open from top, right
 	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
+	overlay: { originX: 0.5, originY: 0.5 }, // open from center, center
 };
 
 /**
  * Given the floating-ui `placement`, compute the framer-motion props for the
  * popover's entry animation.
  *
- * @param  placement A placement string from floating ui
+ * @param placement A placement string from floating ui
  * @return The object containing the motion props
  */
 export const placementToMotionAnimationProps = (
@@ -138,74 +137,17 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-/**
- * Returns the offset of a document's frame element.
- *
- * @param  document The iframe's owner document.
- *
- * @return The offset of the document's frame element, or undefined if the
- * document has no frame element.
- */
-export const getFrameOffset = (
-	document?: Document
-): { x: number; y: number } | undefined => {
-	const frameElement = document?.defaultView?.frameElement;
-	if ( ! frameElement ) {
-		return;
-	}
-	const iframeRect = frameElement.getBoundingClientRect();
-	return { x: iframeRect.left, y: iframeRect.top };
-};
+function isTopBottom(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefTopBottom {
+	return !! ( anchorRef as PopoverAnchorRefTopBottom )?.top;
+}
 
-export const getReferenceOwnerDocument = ( {
-	anchor,
-	anchorRef,
-	anchorRect,
-	getAnchorRect,
-	fallbackReferenceElement,
-	fallbackDocument,
-}: Pick<
-	PopoverProps,
-	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
-> & {
-	fallbackReferenceElement: Element | null;
-	fallbackDocument: Document;
-} ): Document => {
-	// In floating-ui's terms:
-	// - "reference" refers to the popover's anchor element.
-	// - "floating" refers the floating popover's element.
-	// A floating element can also be positioned relative to a virtual element,
-	// instead of a real one. A virtual element is represented by an object
-	// with the `getBoundingClientRect()` function (like real elements).
-	// See https://floating-ui.com/docs/virtual-elements for more info.
-	let resultingReferenceOwnerDoc;
-	if ( anchor ) {
-		resultingReferenceOwnerDoc = anchor.ownerDocument;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
-		resultingReferenceOwnerDoc = ( anchorRef as PopoverAnchorRefTopBottom )
-			?.top.ownerDocument;
-	} else if ( ( anchorRef as Range | undefined )?.startContainer ) {
-		resultingReferenceOwnerDoc = ( anchorRef as Range ).startContainer
-			.ownerDocument;
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
-		resultingReferenceOwnerDoc = (
-			( anchorRef as PopoverAnchorRefReference ).current as Element
-		 ).ownerDocument;
-	} else if ( anchorRef as Element | undefined ) {
-		// This one should be deprecated.
-		resultingReferenceOwnerDoc = ( anchorRef as Element ).ownerDocument;
-	} else if ( anchorRect && anchorRect?.ownerDocument ) {
-		resultingReferenceOwnerDoc = anchorRect.ownerDocument;
-	} else if ( getAnchorRect ) {
-		resultingReferenceOwnerDoc = getAnchorRect(
-			fallbackReferenceElement
-		)?.ownerDocument;
-	}
-
-	return resultingReferenceOwnerDoc ?? fallbackDocument;
-};
+function isRef(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefReference {
+	return !! ( anchorRef as PopoverAnchorRefReference )?.current;
+}
 
 export const getReferenceElement = ( {
 	anchor,
@@ -223,19 +165,15 @@ export const getReferenceElement = ( {
 
 	if ( anchor ) {
 		referenceElement = anchor;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
+	} else if ( isTopBottom( anchorRef ) ) {
 		// Create a virtual element for the ref. The expectation is that
 		// if anchorRef.top is defined, then anchorRef.bottom is defined too.
 		// Seems to be used by the block toolbar, when multiple blocks are selected
 		// (top and bottom blocks are used to calculate the resulting rect).
 		referenceElement = {
 			getBoundingClientRect() {
-				const topRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).top.getBoundingClientRect();
-				const bottomRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).bottom.getBoundingClientRect();
+				const topRect = anchorRef.top.getBoundingClientRect();
+				const bottomRect = anchorRef.bottom.getBoundingClientRect();
 				return new window.DOMRect(
 					topRect.x,
 					topRect.y,
@@ -244,12 +182,10 @@ export const getReferenceElement = ( {
 				);
 			},
 		};
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
+	} else if ( isRef( anchorRef ) ) {
 		// Standard React ref.
-		referenceElement = ( anchorRef as PopoverAnchorRefReference ).current;
-	} else if ( anchorRef as Element | undefined ) {
+		referenceElement = anchorRef.current;
+	} else if ( anchorRef ) {
 		// If `anchorRef` holds directly the element's value (no `current` key)
 		// This is a weird scenario and should be deprecated.
 		referenceElement = anchorRef as Element;
@@ -282,3 +218,15 @@ export const getReferenceElement = ( {
 	// Convert any `undefined` value to `null`.
 	return referenceElement ?? null;
 };
+
+/**
+ * Computes the final coordinate that needs to be applied to the floating
+ * element when applying transform inline styles, defaulting to `undefined`
+ * if the provided value is `null` or `NaN`.
+ *
+ * @param c input coordinate (usually as returned from floating-ui)
+ * @return The coordinate's value to be used for inline styles. An `undefined`
+ *         return value means "no style set" for this coordinate.
+ */
+export const computePopoverPosition = ( c: number | null ) =>
+	c === null || Number.isNaN( c ) ? undefined : Math.round( c );
diff --git a/packages/components/src/private-apis.native.js b/packages/components/src/private-apis.native.js
new file mode 100644
index 00000000000000..659de19f39137b
--- /dev/null
+++ b/packages/components/src/private-apis.native.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
+
+/**
+ * Private @wordpress/components APIs.
+ */
+export const privateApis = {};
+lock( privateApis, {
+	kebabCase,
+} );
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
new file mode 100644
index 00000000000000..2ced100dc576be
--- /dev/null
+++ b/packages/components/src/private-apis.ts
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
+import { Menu } from './menu';
+import { ComponentsContext } from './context/context-system-provider';
+import Theme from './theme';
+import { Tabs } from './tabs';
+import { kebabCase } from './utils/strings';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	__experimentalPopoverLegacyPositionToPlacement,
+	ComponentsContext,
+	Tabs,
+	Theme,
+	Menu,
+	kebabCase,
+} );
diff --git a/packages/components/src/progress-bar/README.md b/packages/components/src/progress-bar/README.md
new file mode 100644
index 00000000000000..07bd1d6c12071b
--- /dev/null
+++ b/packages/components/src/progress-bar/README.md
@@ -0,0 +1,64 @@
+# ProgressBar
+
+A simple horizontal progress bar component.
+
+Supports two modes: determinate and indeterminate. A progress bar is determinate when a specific progress value has been specified (from 0 to 100), and indeterminate when a value hasn't been specified.
+
+## Usage
+
+Basic usage:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar />;
+};
+```
+
+You can also make it determinate by passing a `value` (from 0 to 100) representing the progress:
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = ( { progress } ) => {
+	return <ProgressBar value={ progress } />;
+};
+```
+
+You can customize its appearance by passing a custom CSS class name to `className`.
+
+```css
+.my-custom-progress-bar {
+	width: 100%;
+}
+```
+
+```jsx
+import { ProgressBar } from '@wordpress/components';
+
+const MyLoadingComponent = () => {
+	return <ProgressBar className="my-custom-progress-bar" />;
+};
+```
+
+### Props
+
+The component accepts the following props:
+
+#### `value`: `number`
+
+The progress value, a number from 0 to 100.
+If a `value` is not specified, the progress bar will be considered indeterminate.
+
+-   Required: No
+
+#### `className`: `string`
+
+A CSS class to apply to the underlying `div` element, serving as a progress bar track.
+
+-   Required: No
+
+#### Inherited props
+
+Any additional props will be passed the underlying `<progress/>` element.
diff --git a/packages/components/src/progress-bar/index.tsx b/packages/components/src/progress-bar/index.tsx
new file mode 100644
index 00000000000000..e6a34850954563
--- /dev/null
+++ b/packages/components/src/progress-bar/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as ProgressBarStyled from './styles';
+import type { ProgressBarProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+function UnforwardedProgressBar(
+	props: WordPressComponentProps< ProgressBarProps, 'progress', false >,
+	ref: ForwardedRef< HTMLProgressElement >
+) {
+	const { className, value, ...progressProps } = props;
+	const isIndeterminate = ! Number.isFinite( value );
+
+	return (
+		<ProgressBarStyled.Track className={ className }>
+			<ProgressBarStyled.Indicator
+				style={ {
+					'--indicator-width': ! isIndeterminate
+						? `${ value }%`
+						: undefined,
+				} }
+				isIndeterminate={ isIndeterminate }
+			/>
+			<ProgressBarStyled.ProgressElement
+				max={ 100 }
+				value={ value }
+				aria-label={ __( 'Loading …' ) }
+				ref={ ref }
+				{ ...progressProps }
+			/>
+		</ProgressBarStyled.Track>
+	);
+}
+
+/**
+ * A simple horizontal progress bar component.
+ *
+ * Supports two modes: determinate and indeterminate. A progress bar is determinate
+ * when a specific progress value has been specified (from 0 to 100), and indeterminate
+ * when a value hasn't been specified.
+ *
+ * ```jsx
+ * import { ProgressBar } from '@wordpress/components';
+ *
+ * const MyLoadingComponent = () => {
+ * 	return <ProgressBar />;
+ * };
+ * ```
+ */
+export const ProgressBar = forwardRef( UnforwardedProgressBar );
+
+export default ProgressBar;
diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
new file mode 100644
index 00000000000000..2f6bb4dbe000fd
--- /dev/null
+++ b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+
+const meta: Meta< typeof ProgressBar > = {
+	component: ProgressBar,
+	title: 'Components/Feedback/ProgressBar',
+	id: 'components-progressbar',
+	argTypes: {
+		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
+	return <ProgressBar { ...args } />;
+};
+
+export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
+Default.args = {};
+
+const withCustomWidthCustomCSS = `
+	.custom-progress-bar {
+		width: 100%;
+	}
+`;
+
+/**
+ * A progress bar with a custom width.
+ *
+ * You can override the default `width` by passing a custom CSS class via the
+ * `className` prop.
+ *
+ * This example shows a progress bar with an overriden `width` of `100%` which
+ * makes it fit all available horizontal space of the parent element. The CSS
+ * class looks like this:
+ *
+ * ```css
+ * .custom-progress-bar {
+ *   width: 100%;
+ * }
+ * ```
+ */
+export const WithCustomWidth = Template.bind( {} );
+WithCustomWidth.args = {
+	className: 'custom-progress-bar',
+};
+WithCustomWidth.decorators = [
+	( Story ) => (
+		<>
+			<style>{ withCustomWidthCustomCSS }</style>
+			<Story />
+		</>
+	),
+];
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
new file mode 100644
index 00000000000000..585b9ab2620753
--- /dev/null
+++ b/packages/components/src/progress-bar/styles.ts
@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+function animateProgressBar( isRtl = false ) {
+	const animationDirection = isRtl ? 'right' : 'left';
+
+	return keyframes( {
+		'0%': {
+			[ animationDirection ]: '-50%',
+		},
+		'100%': {
+			[ animationDirection ]: '100%',
+		},
+	} );
+}
+
+// Width of the indicator for the indeterminate progress bar
+export const INDETERMINATE_TRACK_WIDTH = 50;
+
+export const Track = styled.div`
+	position: relative;
+	overflow: hidden;
+	height: ${ CONFIG.borderWidthFocus };
+	/* Text color at 10% opacity */
+	background-color: color-mix(
+		in srgb,
+		${ COLORS.theme.foreground },
+		transparent 90%
+	);
+	border-radius: ${ CONFIG.radiusFull };
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+
+	:where( & ) {
+		width: 160px;
+	}
+`;
+
+export const Indicator = styled.div< {
+	isIndeterminate: boolean;
+} >`
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	height: 100%;
+	border-radius: ${ CONFIG.radiusFull };
+	/* Text color at 90% opacity */
+	background-color: color-mix(
+		in srgb,
+		${ COLORS.theme.foreground },
+		transparent 10%
+	);
+
+	// Windows high contrast mode.
+	outline: 2px solid transparent;
+	outline-offset: -2px;
+
+	${ ( { isIndeterminate } ) =>
+		isIndeterminate
+			? css( {
+					animationDuration: '1.5s',
+					animationTimingFunction: 'ease-in-out',
+					animationIterationCount: 'infinite',
+					animationName: animateProgressBar( isRTL() ),
+					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
+			  } )
+			: css( {
+					width: 'var(--indicator-width)',
+					transition: 'width 0.4s ease-in-out',
+			  } ) };
+`;
+
+export const ProgressElement = styled.progress`
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+`;
diff --git a/packages/components/src/progress-bar/test/index.tsx b/packages/components/src/progress-bar/test/index.tsx
new file mode 100644
index 00000000000000..c3984318cc618a
--- /dev/null
+++ b/packages/components/src/progress-bar/test/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from '..';
+import { INDETERMINATE_TRACK_WIDTH } from '../styles';
+
+describe( 'ProgressBar', () => {
+	it( 'should render an indeterminate semantic progress bar element', () => {
+		render( <ProgressBar /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeInTheDocument();
+		expect( progressBar ).not.toBeVisible();
+		expect( progressBar ).not.toHaveValue();
+	} );
+
+	it( 'should render a determinate semantic progress bar element', () => {
+		render( <ProgressBar value={ 55 } /> );
+
+		const progressBar = screen.getByRole( 'progressbar' );
+
+		expect( progressBar ).toBeInTheDocument();
+		expect( progressBar ).not.toBeVisible();
+		expect( progressBar ).toHaveValue( 55 );
+	} );
+
+	it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
+		const { container } = render( <ProgressBar /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.firstChild?.firstChild;
+
+		expect( indicator ).toHaveStyle( {
+			width: `${ INDETERMINATE_TRACK_WIDTH }%`,
+		} );
+		expect( indicator ).not.toHaveStyle( {
+			'--indicator-width': expect.any( String ),
+		} );
+	} );
+
+	it( 'should use `value`% as width for determinate progress bar', () => {
+		const { container } = render( <ProgressBar value={ 55 } /> );
+
+		/**
+		 * We're intentionally not using an accessible selector, because
+		 * the track is an intentionally non-interactive presentation element.
+		 */
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const indicator = container.firstChild?.firstChild;
+
+		expect( indicator ).toHaveStyle( {
+			'--indicator-width': '55%',
+		} );
+	} );
+
+	it( 'should pass any additional props down to the underlying `progress` element', () => {
+		const id = 'foo-bar-123';
+		const ariaLabel = 'in progress...';
+		const style = { opacity: 1 };
+
+		render(
+			<ProgressBar id={ id } aria-label={ ariaLabel } style={ style } />
+		);
+
+		expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute( 'id', id );
+		expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute(
+			'aria-label',
+			ariaLabel
+		);
+		expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
+	} );
+} );
diff --git a/packages/components/src/progress-bar/types.ts b/packages/components/src/progress-bar/types.ts
new file mode 100644
index 00000000000000..9beb28317e58aa
--- /dev/null
+++ b/packages/components/src/progress-bar/types.ts
@@ -0,0 +1,11 @@
+export type ProgressBarProps = {
+	/**
+	 * Value of the progress bar.
+	 */
+	value?: number;
+
+	/**
+	 * A CSS class to apply to the progress bar wrapper (track) element.
+	 */
+	className?: string;
+};
diff --git a/packages/components/src/query-controls/README.md b/packages/components/src/query-controls/README.md
index 9a0f5b08e0cef5..3eb6d507c9ccd6 100644
--- a/packages/components/src/query-controls/README.md
+++ b/packages/components/src/query-controls/README.md
@@ -5,8 +5,8 @@
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { QueryControls } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const QUERY_DEFAULTS = {
 	category: 1,
@@ -28,10 +28,10 @@ const QUERY_DEFAULTS = {
 		},
 	],
 	maxItems: 20,
-	minItems: 1,	
+	minItems: 1,
 	numberOfItems: 10,
 	order: 'asc',
-	orderBy: 'title',	
+	orderBy: 'title',
 };
 
 const MyQueryControls = () => {
@@ -66,24 +66,35 @@ The `QueryControls` component now supports multiple category selection, to repla
 const QUERY_DEFAULTS = {
 	orderBy: 'title',
 	order: 'asc',
-	selectedCategories: [ 1 ],
-	categories: [
+	selectedCategories: [
 		{
 			id: 1,
-			name: 'Category 1',
+			value: 'Category 1',
 			parent: 0,
 		},
 		{
+			id: 2,
+			value: 'Category 1b',
+			parent: 1,
+		},
+	],
+	categories: {
+		'Category 1': {
+			id: 1,
+			name: 'Category 1',
+			parent: 0,
+		},
+		'Category 1b': {
 			id: 2,
 			name: 'Category 1b',
 			parent: 1,
 		},
-		{
+		'Category 2': {
 			id: 3,
 			name: 'Category 2',
 			parent: 0,
 		},
-	],
+	},
 	numberOfItems: 10,
 };
 
@@ -111,132 +122,128 @@ const MyQueryControls = () => {
 };
 ```
 
-The format of the categories list also needs to be updated to match what `FormTokenField` expects for making suggestions.
+The format of the categories list also needs to be updated to match the expected type for the category suggestions.
 
 ### Props
 
-#### authorList
+#### `authorList`: `Author[]`
 
-An array of author IDs that is passed into an `AuthorSelect` sub-component.
+An array of the authors to select from.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### selectedAuthorId
+#### `categoriesList`: `Category[]`
 
-The selected author ID.
+An array of categories. When passed in conjunction with the `onCategoryChange` prop, it causes the component to render UI that allows selecting one category at a time.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
 
-#### categoriesList
+#### `categorySuggestions`: `Record< Category[ 'name' ], Category >`
 
-An array of category IDs; renders a `CategorySelect` sub-component when passed in conjunction with `onCategoryChange`.
+An object of categories with the category name as the key. When passed in conjunction with the `onCategoryChange` prop, it causes the component to render UI that enables multiple selection.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### categorySuggestions
+#### `maxItems`: `number`
 
-An array of category names; renders a `FormTokenField` component when passed in conjunction with `onCategoryChange`.
+The maximum number of items.
 
--   Type: `Array`
 -   Required: No
+-   Default: 100
 -   Platform: Web
 
-#### maxItems
+#### `minItems`: `number`
+
+The minimum number of items.
 
--   Type: `Number`
 -   Required: No
--   Default: 100
+-   Default: 1
 -   Platform: Web
 
-#### minItems
+#### `numberOfItems`: `number`
+
+The selected number of items to retrieve via the query.
 
--   Type: `Number`
 -   Required: No
--   Default: 1
 -   Platform: Web
 
-#### numberOfItems
+#### `onAuthorChange`: `( newAuthor: string ) => void`
 
-The selected number of items to retrieve via the query.
+A function that receives the new author value. If not specified, the author controls are not rendered.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
 
-#### onAuthorChange
+#### `onCategoryChange`: `( newCategory: string ) => void | FormTokenFieldProps[ 'onChange' ]`
 
-A function that receives the new author value. If this is not specified, the author controls are not included.
+A function that receives the new category value. If not specified, the category controls are not rendered.
+The function's signature changes depending on whether multiple category selection is enabled or not.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onCategoryChange
+#### `onNumberOfItemsChange`: `( newNumber?: number ) => void`
 
-A function that receives the new category value. If this is not specified, the category controls are not included.
+A function that receives the new number of items. If not specified, then the number of items range control is not rendered.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onNumberOfItemsChange
+#### `onOrderChange`: `( newOrder: 'asc' | 'desc' ) => void`
 
-A function that receives the new number of items value. If this is not specified, then the number of items range control is not included.
+A function that receives the new order value. If this prop or the `onOrderByChange` prop are not specified, then the order controls are not rendered.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onOrderChange
+#### `onOrderByChange`: `( newOrderBy: 'date' | 'title' ) => void`
 
-A function that receives the new order value. If this or onOrderByChange are not specified, then the order controls are not included.
+A function that receives the new orderby value. If this prop or the `onOrderChange` prop are not specified, then the order controls are not rendered.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### onOrderByChange
+#### `order`: `'asc' | 'desc'`
 
-A function that receives the new orderby value. If this or onOrderChange are not specified, then the order controls are not included.
+The order in which to retrieve posts.
 
--   Type: `Function`
 -   Required: No
 -   Platform: Web
 
-#### order
+#### `orderBy`: `'date' | 'title'`
 
-The order in which to retrieve posts. Can be 'asc' or 'desc'.
+The meta key by which to order posts.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### orderBy
+#### `selectedAuthorId`: `number`
 
-The meta key by which to order posts. Can be 'date' or 'title'.
+The selected author ID.
 
--   Type: `String`
 -   Required: No
 -   Platform: Web
 
-#### selectedCategories
+#### `selectedCategories`: `Category[]`
 
-The selected categories for the `categorySuggestions`.
+The selected categories for the `categorySuggestions` prop.
 
--   Type: `Array`
 -   Required: No
 -   Platform: Web
 
-#### selectedCategoryId
+#### `selectedCategoryId`: `number`
 
-The selected category for the `categoriesList`.
+The selected category for the `categoriesList` prop.
 
--   Type: `Number`
 -   Required: No
 -   Platform: Web
+
+#### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+- Required: No
+- Default: `false`
\ No newline at end of file
diff --git a/packages/components/src/query-controls/author-select.js b/packages/components/src/query-controls/author-select.js
deleted file mode 100644
index 77901ce8703d19..00000000000000
--- a/packages/components/src/query-controls/author-select.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildTermsTree } from './terms';
-import TreeSelect from '../tree-select';
-
-export default function AuthorSelect( {
-	label,
-	noOptionLabel,
-	authorList,
-	selectedAuthorId,
-	onChange,
-} ) {
-	if ( ! authorList ) return null;
-	const termsTree = buildTermsTree( authorList );
-	return (
-		<TreeSelect
-			{ ...{ label, noOptionLabel, onChange } }
-			tree={ termsTree }
-			selectedId={ selectedAuthorId }
-		/>
-	);
-}
diff --git a/packages/components/src/query-controls/author-select.tsx b/packages/components/src/query-controls/author-select.tsx
new file mode 100644
index 00000000000000..aad1184b44e481
--- /dev/null
+++ b/packages/components/src/query-controls/author-select.tsx
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+import type { AuthorSelectProps } from './types';
+
+export default function AuthorSelect( {
+	__next40pxDefaultSize,
+	label,
+	noOptionLabel,
+	authorList,
+	selectedAuthorId,
+	onChange: onChangeProp,
+}: AuthorSelectProps ) {
+	if ( ! authorList ) {
+		return null;
+	}
+	const termsTree = buildTermsTree( authorList );
+	return (
+		<TreeSelect
+			{ ...{
+				label,
+				noOptionLabel,
+				onChange: onChangeProp,
+			} }
+			tree={ termsTree }
+			selectedId={
+				selectedAuthorId !== undefined
+					? String( selectedAuthorId )
+					: undefined
+			}
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+		/>
+	);
+}
diff --git a/packages/components/src/query-controls/category-select.js b/packages/components/src/query-controls/category-select.js
deleted file mode 100644
index 5a401014676d3d..00000000000000
--- a/packages/components/src/query-controls/category-select.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildTermsTree } from './terms';
-import TreeSelect from '../tree-select';
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-export default function CategorySelect( {
-	label,
-	noOptionLabel,
-	categoriesList,
-	selectedCategoryId,
-	onChange,
-	...props
-} ) {
-	const termsTree = useMemo( () => {
-		return buildTermsTree( categoriesList );
-	}, [ categoriesList ] );
-
-	return (
-		<TreeSelect
-			{ ...{ label, noOptionLabel, onChange } }
-			tree={ termsTree }
-			selectedId={ selectedCategoryId }
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/components/src/query-controls/category-select.tsx b/packages/components/src/query-controls/category-select.tsx
new file mode 100644
index 00000000000000..bc2306ff048fa1
--- /dev/null
+++ b/packages/components/src/query-controls/category-select.tsx
@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from './terms';
+import TreeSelect from '../tree-select';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import type { CategorySelectProps } from './types';
+
+export default function CategorySelect( {
+	__next40pxDefaultSize,
+	label,
+	noOptionLabel,
+	categoriesList,
+	selectedCategoryId,
+	onChange: onChangeProp,
+	...props
+}: CategorySelectProps ) {
+	const termsTree = useMemo( () => {
+		return buildTermsTree( categoriesList );
+	}, [ categoriesList ] );
+
+	return (
+		<TreeSelect
+			{ ...{
+				label,
+				noOptionLabel,
+				onChange: onChangeProp,
+			} }
+			tree={ termsTree }
+			selectedId={
+				selectedCategoryId !== undefined
+					? String( selectedCategoryId )
+					: undefined
+			}
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+		/>
+	);
+}
diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
deleted file mode 100644
index 04c225a7691dda..00000000000000
--- a/packages/components/src/query-controls/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import CategorySelect from './category-select';
-import { RangeControl, SelectControl, FormTokenField } from '../';
-import AuthorSelect from './author-select';
-
-const DEFAULT_MIN_ITEMS = 1;
-const DEFAULT_MAX_ITEMS = 100;
-const MAX_CATEGORIES_SUGGESTIONS = 20;
-
-export default function QueryControls( {
-	authorList,
-	selectedAuthorId,
-	categoriesList,
-	selectedCategoryId,
-	categorySuggestions,
-	selectedCategories,
-	numberOfItems,
-	order,
-	orderBy,
-	maxItems = DEFAULT_MAX_ITEMS,
-	minItems = DEFAULT_MIN_ITEMS,
-	onCategoryChange,
-	onAuthorChange,
-	onNumberOfItemsChange,
-	onOrderChange,
-	onOrderByChange,
-} ) {
-	return [
-		onOrderChange && onOrderByChange && (
-			<SelectControl
-				key="query-controls-order-select"
-				label={ __( 'Order by' ) }
-				value={ `${ orderBy }/${ order }` }
-				options={ [
-					{
-						label: __( 'Newest to oldest' ),
-						value: 'date/desc',
-					},
-					{
-						label: __( 'Oldest to newest' ),
-						value: 'date/asc',
-					},
-					{
-						/* translators: label for ordering posts by title in ascending order */
-						label: __( 'A → Z' ),
-						value: 'title/asc',
-					},
-					{
-						/* translators: label for ordering posts by title in descending order */
-						label: __( 'Z → A' ),
-						value: 'title/desc',
-					},
-				] }
-				onChange={ ( value ) => {
-					const [ newOrderBy, newOrder ] = value.split( '/' );
-					if ( newOrder !== order ) {
-						onOrderChange( newOrder );
-					}
-					if ( newOrderBy !== orderBy ) {
-						onOrderByChange( newOrderBy );
-					}
-				} }
-			/>
-		),
-		categoriesList && onCategoryChange && (
-			<CategorySelect
-				key="query-controls-category-select"
-				categoriesList={ categoriesList }
-				label={ __( 'Category' ) }
-				noOptionLabel={ __( 'All' ) }
-				selectedCategoryId={ selectedCategoryId }
-				onChange={ onCategoryChange }
-			/>
-		),
-		categorySuggestions && onCategoryChange && (
-			<FormTokenField
-				key="query-controls-categories-select"
-				label={ __( 'Categories' ) }
-				value={
-					selectedCategories &&
-					selectedCategories.map( ( item ) => ( {
-						id: item.id,
-						value: item.name || item.value,
-					} ) )
-				}
-				suggestions={ Object.keys( categorySuggestions ) }
-				onChange={ onCategoryChange }
-				maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
-			/>
-		),
-		onAuthorChange && (
-			<AuthorSelect
-				key="query-controls-author-select"
-				authorList={ authorList }
-				label={ __( 'Author' ) }
-				noOptionLabel={ __( 'All' ) }
-				selectedAuthorId={ selectedAuthorId }
-				onChange={ onAuthorChange }
-			/>
-		),
-		onNumberOfItemsChange && (
-			<RangeControl
-				key="query-controls-range-control"
-				label={ __( 'Number of items' ) }
-				value={ numberOfItems }
-				onChange={ onNumberOfItemsChange }
-				min={ minItems }
-				max={ maxItems }
-				required
-			/>
-		),
-	];
-}
diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js
index 6ba18f646146e6..4e687f4af09d57 100644
--- a/packages/components/src/query-controls/index.native.js
+++ b/packages/components/src/query-controls/index.native.js
@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useCallback, memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { RangeControl, SelectControl } from '../';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
 import CategorySelect from './category-select';
 
 const DEFAULT_MIN_ITEMS = 1;
@@ -23,12 +24,12 @@ const options = [
 		value: 'date/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in ascending order */
+		/* translators: Label for ordering posts by title in ascending order. */
 		label: __( 'A → Z' ),
 		value: 'title/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in descending order */
+		/* translators: Label for ordering posts by title in descending order. */
 		label: __( 'Z → A' ),
 		value: 'title/desc',
 	},
@@ -69,21 +70,22 @@ const QueryControls = memo(
 						value={ `${ orderBy }/${ order }` }
 						options={ options }
 						onChange={ onChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onCategoryChange && (
 					<CategorySelect
 						categoriesList={ categoriesList }
 						label={ __( 'Category' ) }
-						noOptionLabel={ __( 'All' ) }
+						noOptionLabel={ _x( 'All', 'categories' ) }
 						selectedCategoryId={ selectedCategoryId }
 						onChange={ onCategoryChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onNumberOfItemsChange && (
 					<RangeControl
+						__next40pxDefaultSize
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }
 						onChange={ onNumberOfItemsChange }
diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx
new file mode 100644
index 00000000000000..452dd303c778bb
--- /dev/null
+++ b/packages/components/src/query-controls/index.tsx
@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AuthorSelect from './author-select';
+import CategorySelect from './category-select';
+import FormTokenField from '../form-token-field';
+import RangeControl from '../range-control';
+import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
+import type {
+	QueryControlsProps,
+	QueryControlsWithMultipleCategorySelectionProps,
+	QueryControlsWithSingleCategorySelectionProps,
+} from './types';
+
+const DEFAULT_MIN_ITEMS = 1;
+const DEFAULT_MAX_ITEMS = 100;
+const MAX_CATEGORIES_SUGGESTIONS = 20;
+
+function isSingleCategorySelection(
+	props: QueryControlsProps
+): props is QueryControlsWithSingleCategorySelectionProps {
+	return 'categoriesList' in props;
+}
+
+function isMultipleCategorySelection(
+	props: QueryControlsProps
+): props is QueryControlsWithMultipleCategorySelectionProps {
+	return 'categorySuggestions' in props;
+}
+
+/**
+ * Controls to query for posts.
+ *
+ * ```jsx
+ * const MyQueryControls = () => (
+ *   <QueryControls
+ *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ *     onOrderByChange={ ( newOrderBy ) => {
+ *       updateQuery( { orderBy: newOrderBy } )
+ *     }
+ *     onOrderChange={ ( newOrder ) => {
+ *       updateQuery( { order: newOrder } )
+ *     }
+ *     categoriesList={ categories }
+ *     selectedCategoryId={ category }
+ *     onCategoryChange={ ( newCategory ) => {
+ *       updateQuery( { category: newCategory } )
+ *     }
+ *     onNumberOfItemsChange={ ( newNumberOfItems ) => {
+ *       updateQuery( { numberOfItems: newNumberOfItems } )
+ *     } }
+ *   />
+ * );
+ * ```
+ */
+export function QueryControls( {
+	authorList,
+	selectedAuthorId,
+	numberOfItems,
+	order,
+	orderBy,
+	maxItems = DEFAULT_MAX_ITEMS,
+	minItems = DEFAULT_MIN_ITEMS,
+	onAuthorChange,
+	onNumberOfItemsChange,
+	onOrderChange,
+	onOrderByChange,
+	// Props for single OR multiple category selection are not destructured here,
+	// but instead are destructured inline where necessary.
+	...props
+}: QueryControlsProps ) {
+	return (
+		<VStack spacing="4" className="components-query-controls">
+			{ [
+				onOrderChange && onOrderByChange && (
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						key="query-controls-order-select"
+						label={ __( 'Order by' ) }
+						value={
+							orderBy === undefined || order === undefined
+								? undefined
+								: `${ orderBy }/${ order }`
+						}
+						options={ [
+							{
+								label: __( 'Newest to oldest' ),
+								value: 'date/desc',
+							},
+							{
+								label: __( 'Oldest to newest' ),
+								value: 'date/asc',
+							},
+							{
+								/* translators: Label for ordering posts by title in ascending order. */
+								label: __( 'A → Z' ),
+								value: 'title/asc',
+							},
+							{
+								/* translators: Label for ordering posts by title in descending order. */
+								label: __( 'Z → A' ),
+								value: 'title/desc',
+							},
+						] }
+						onChange={ ( value ) => {
+							if ( typeof value !== 'string' ) {
+								return;
+							}
+
+							const [ newOrderBy, newOrder ] = value.split( '/' );
+							if ( newOrder !== order ) {
+								onOrderChange(
+									newOrder as NonNullable<
+										QueryControlsProps[ 'order' ]
+									>
+								);
+							}
+							if ( newOrderBy !== orderBy ) {
+								onOrderByChange(
+									newOrderBy as NonNullable<
+										QueryControlsProps[ 'orderBy' ]
+									>
+								);
+							}
+						} }
+					/>
+				),
+				isSingleCategorySelection( props ) &&
+					props.categoriesList &&
+					props.onCategoryChange && (
+						<CategorySelect
+							__next40pxDefaultSize
+							key="query-controls-category-select"
+							categoriesList={ props.categoriesList }
+							label={ __( 'Category' ) }
+							noOptionLabel={ _x( 'All', 'categories' ) }
+							selectedCategoryId={ props.selectedCategoryId }
+							onChange={ props.onCategoryChange }
+						/>
+					),
+				isMultipleCategorySelection( props ) &&
+					props.categorySuggestions &&
+					props.onCategoryChange && (
+						<FormTokenField
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							key="query-controls-categories-select"
+							label={ __( 'Categories' ) }
+							value={
+								props.selectedCategories &&
+								props.selectedCategories.map( ( item ) => ( {
+									id: item.id,
+									// Keeping the fallback to `item.value` for legacy reasons,
+									// even if items of `selectedCategories` should not have a
+									// `value` property.
+									// @ts-expect-error
+									value: item.name || item.value,
+								} ) )
+							}
+							suggestions={ Object.keys(
+								props.categorySuggestions
+							) }
+							onChange={ props.onCategoryChange }
+							maxSuggestions={ MAX_CATEGORIES_SUGGESTIONS }
+						/>
+					),
+				onAuthorChange && (
+					<AuthorSelect
+						__next40pxDefaultSize
+						key="query-controls-author-select"
+						authorList={ authorList }
+						label={ __( 'Author' ) }
+						noOptionLabel={ _x( 'All', 'authors' ) }
+						selectedAuthorId={ selectedAuthorId }
+						onChange={ onAuthorChange }
+					/>
+				),
+				onNumberOfItemsChange && (
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						key="query-controls-range-control"
+						label={ __( 'Number of items' ) }
+						value={ numberOfItems }
+						onChange={ onNumberOfItemsChange }
+						min={ minItems }
+						max={ maxItems }
+						required
+					/>
+				),
+			] }
+		</VStack>
+	);
+}
+
+export default QueryControls;
diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx
new file mode 100644
index 00000000000000..ad28d9aed0d0d9
--- /dev/null
+++ b/packages/components/src/query-controls/stories/index.story.tsx
@@ -0,0 +1,202 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import QueryControls from '..';
+import type {
+	Category,
+	QueryControlsWithSingleCategorySelectionProps,
+	QueryControlsWithMultipleCategorySelectionProps,
+} from '../types';
+
+const meta: Meta< typeof QueryControls > = {
+	title: 'Components/QueryControls',
+	component: QueryControls,
+	argTypes: {
+		numberOfItems: { control: false },
+		order: { control: false },
+		orderBy: { control: false },
+		selectedAuthorId: { control: false },
+		selectedCategories: { control: false },
+		selectedCategoryId: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof QueryControls > = ( args ) => {
+	const {
+		onAuthorChange,
+		onCategoryChange,
+		onNumberOfItemsChange,
+		onOrderByChange,
+		onOrderChange,
+		...props
+	} = args as QueryControlsWithMultipleCategorySelectionProps;
+	const [ ownNumberOfItems, setOwnNumberOfItems ] = useState(
+		props.numberOfItems
+	);
+	const [ ownOrder, setOwnOrder ] = useState( props.order );
+	const [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );
+	const [ ownSelectedAuthorId, setOwnSelectedAuthorId ] = useState(
+		props.selectedAuthorId
+	);
+	const [ ownSelectedCategories, setOwnSelectedCategories ] = useState(
+		props.selectedCategories
+	);
+
+	const handleCategoryChange: QueryControlsWithMultipleCategorySelectionProps[ 'onCategoryChange' ] =
+		( tokens ) => {
+			onCategoryChange?.( tokens );
+
+			const hasNoSuggestion = tokens.some(
+				( token ) =>
+					typeof token === 'string' &&
+					! props.categorySuggestions?.[ token ]
+			);
+			if ( hasNoSuggestion ) {
+				return;
+			}
+			const allCategories = tokens
+				.map( ( token ) => {
+					return typeof token === 'string'
+						? props.categorySuggestions?.[ token ]
+						: token;
+				} )
+				.filter( Boolean ) as Array< Required< Category > >;
+
+			setOwnSelectedCategories( allCategories );
+		};
+
+	return (
+		<QueryControls
+			{ ...props }
+			numberOfItems={ ownNumberOfItems }
+			onCategoryChange={ handleCategoryChange }
+			onOrderByChange={ ( newOrderBy ) => {
+				onOrderByChange?.( newOrderBy );
+				setOwnOrderBy( newOrderBy );
+			} }
+			onOrderChange={ ( newOrder ) => {
+				onOrderChange?.( newOrder );
+				setOwnOrder( newOrder );
+			} }
+			order={ ownOrder }
+			orderBy={ ownOrderBy }
+			onNumberOfItemsChange={ ( newNumber ) => {
+				onNumberOfItemsChange?.( newNumber );
+				setOwnNumberOfItems( newNumber );
+			} }
+			onAuthorChange={ ( newAuthor ) => {
+				onAuthorChange?.( newAuthor );
+				setOwnSelectedAuthorId( Number( newAuthor ) );
+			} }
+			selectedAuthorId={ ownSelectedAuthorId }
+			selectedCategories={ ownSelectedCategories }
+		/>
+	);
+};
+
+Default.args = {
+	authorList: [
+		{
+			id: 1,
+			name: 'admin',
+		},
+		{
+			id: 2,
+			name: 'editor',
+		},
+	],
+	categorySuggestions: {
+		TypeScript: {
+			id: 11,
+			name: 'TypeScript',
+			parent: 0,
+		},
+		JavaScript: {
+			id: 12,
+			name: 'JavaScript',
+			parent: 0,
+		},
+	},
+	selectedCategories: [
+		{
+			id: 11,
+			name: 'JavaScript',
+			parent: 0,
+		},
+	],
+	numberOfItems: 5,
+	order: 'desc',
+	orderBy: 'date',
+	selectedAuthorId: 1,
+};
+
+const SingleCategoryTemplate: StoryFn< typeof QueryControls > = ( args ) => {
+	const {
+		onAuthorChange,
+		onCategoryChange,
+		onNumberOfItemsChange,
+		onOrderByChange,
+		onOrderChange,
+		...props
+	} = args as QueryControlsWithSingleCategorySelectionProps;
+	const [ ownOrder, setOwnOrder ] = useState( props.order );
+	const [ ownOrderBy, setOwnOrderBy ] = useState( props.orderBy );
+	const [ ownSelectedCategoryId, setSelectedCategoryId ] = useState(
+		props.selectedCategoryId
+	);
+
+	const handleCategoryChange: QueryControlsWithSingleCategorySelectionProps[ 'onCategoryChange' ] =
+		( newCategory ) => {
+			onCategoryChange?.( newCategory );
+			setSelectedCategoryId( Number( newCategory ) );
+		};
+
+	return (
+		<QueryControls
+			{ ...props }
+			onCategoryChange={ handleCategoryChange }
+			onOrderByChange={ ( newOrderBy ) => {
+				setOwnOrderBy( newOrderBy );
+			} }
+			onOrderChange={ ( newOrder ) => {
+				onOrderChange?.( newOrder );
+				setOwnOrder( newOrder );
+			} }
+			order={ ownOrder }
+			orderBy={ ownOrderBy }
+			selectedCategoryId={ ownSelectedCategoryId }
+		/>
+	);
+};
+export const SelectSingleCategory = SingleCategoryTemplate.bind( {} );
+SelectSingleCategory.args = {
+	categoriesList: [
+		{
+			id: 11,
+			name: 'TypeScript',
+			parent: 0,
+		},
+		{
+			id: 12,
+			name: 'JavaScript',
+			parent: 0,
+		},
+	],
+	selectedCategoryId: 11,
+};
diff --git a/packages/components/src/query-controls/terms.js b/packages/components/src/query-controls/terms.js
deleted file mode 100644
index 6405cf5d1ba5b0..00000000000000
--- a/packages/components/src/query-controls/terms.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
-/**
- * Returns terms in a tree form.
- *
- * @param {Array} flatTerms Array of terms in flat format.
- *
- * @return {Array} Array of terms in tree format.
- */
-export function buildTermsTree( flatTerms ) {
-	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
-		return {
-			children: [],
-			parent: null,
-			...term,
-		};
-	} );
-
-	const termsByParent = groupBy( flatTermsWithParentAndChildren, 'parent' );
-	if ( termsByParent.null && termsByParent.null.length ) {
-		return flatTermsWithParentAndChildren;
-	}
-	const fillWithChildren = ( terms ) => {
-		return terms.map( ( term ) => {
-			const children = termsByParent[ term.id ];
-			return {
-				...term,
-				children:
-					children && children.length
-						? fillWithChildren( children )
-						: [],
-			};
-		} );
-	};
-
-	return fillWithChildren( termsByParent[ '0' ] || [] );
-}
diff --git a/packages/components/src/query-controls/terms.ts b/packages/components/src/query-controls/terms.ts
new file mode 100644
index 00000000000000..7224d3bda6b46e
--- /dev/null
+++ b/packages/components/src/query-controls/terms.ts
@@ -0,0 +1,68 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	Author,
+	Category,
+	TermWithParentAndChildren,
+	TermsByParent,
+} from './types';
+
+const ensureParentsAreDefined = (
+	terms: TermWithParentAndChildren[]
+): terms is ( TermWithParentAndChildren & { parent: number } )[] => {
+	return terms.every( ( term ) => term.parent !== null );
+};
+/**
+ * Returns terms in a tree form.
+ *
+ * @param flatTerms Array of terms in flat format.
+ *
+ * @return Terms in tree format.
+ */
+export function buildTermsTree( flatTerms: readonly ( Author | Category )[] ) {
+	const flatTermsWithParentAndChildren: TermWithParentAndChildren[] =
+		flatTerms.map( ( term ) => ( {
+			children: [],
+			parent: null,
+			...term,
+			id: String( term.id ),
+		} ) );
+
+	// We use a custom type guard here to ensure that the parent property is
+	// defined on all terms. The type of the `parent` property is `number | null`
+	// and we need to ensure that it is `number`. This is because we use the
+	// `parent` property as a key in the `termsByParent` object.
+	if ( ! ensureParentsAreDefined( flatTermsWithParentAndChildren ) ) {
+		return flatTermsWithParentAndChildren;
+	}
+
+	const termsByParent = flatTermsWithParentAndChildren.reduce(
+		( acc: TermsByParent, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{}
+	);
+
+	const fillWithChildren = (
+		terms: TermWithParentAndChildren[]
+	): TermWithParentAndChildren[] => {
+		return terms.map( ( term ) => {
+			const children = termsByParent[ term.id ];
+			return {
+				...term,
+				children:
+					children && children.length
+						? fillWithChildren( children )
+						: [],
+			};
+		} );
+	};
+
+	return fillWithChildren( termsByParent[ '0' ] || [] );
+}
diff --git a/packages/components/src/query-controls/test/terms.js b/packages/components/src/query-controls/test/terms.js
deleted file mode 100644
index 68a1a7f10fb190..00000000000000
--- a/packages/components/src/query-controls/test/terms.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildTermsTree } from '../terms';
-
-describe( 'buildTermsTree()', () => {
-	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
-		const input = Object.freeze( [
-			{ id: 2232, dummy: true },
-			{ id: 2245, dummy: true },
-		] );
-		const output = Object.freeze( [
-			{ id: 2232, parent: null, children: [], dummy: true },
-			{ id: 2245, parent: null, children: [], dummy: true },
-		] );
-		const termsTreem = buildTermsTree( input );
-		expect( termsTreem ).toEqual( output );
-	} );
-	it( 'Should return same array as input with empty children added if all the elements are top level', () => {
-		const input = Object.freeze( [
-			{ id: 2232, parent: 0, dummy: true },
-			{ id: 2245, parent: 0, dummy: false },
-		] );
-		const output = [
-			{ id: 2232, parent: 0, children: [], dummy: true },
-			{ id: 2245, parent: 0, children: [], dummy: false },
-		];
-		const termsTreem = buildTermsTree( input );
-		expect( termsTreem ).toEqual( output );
-	} );
-	it( 'Should return element with its child if a child exists', () => {
-		const input = Object.freeze( [
-			{ id: 2232, parent: 0 },
-			{ id: 2245, parent: 2232 },
-		] );
-		const output = [
-			{
-				id: 2232,
-				parent: 0,
-				children: [ { id: 2245, parent: 2232, children: [] } ],
-			},
-		];
-		const termsTreem = buildTermsTree( input );
-		expect( termsTreem ).toEqual( output );
-	} );
-	it( 'Should return elements with multiple children and elements with no children', () => {
-		const input = Object.freeze( [
-			{ id: 2232, parent: 0 },
-			{ id: 2245, parent: 2232 },
-			{ id: 2249, parent: 0 },
-			{ id: 2246, parent: 2232 },
-		] );
-		const output = [
-			{
-				id: 2232,
-				parent: 0,
-				children: [
-					{ id: 2245, parent: 2232, children: [] },
-					{ id: 2246, parent: 2232, children: [] },
-				],
-			},
-			{ id: 2249, parent: 0, children: [] },
-		];
-		const termsTreem = buildTermsTree( input );
-		expect( termsTreem ).toEqual( output );
-	} );
-} );
diff --git a/packages/components/src/query-controls/test/terms.ts b/packages/components/src/query-controls/test/terms.ts
new file mode 100644
index 00000000000000..0dcaa62f1440a8
--- /dev/null
+++ b/packages/components/src/query-controls/test/terms.ts
@@ -0,0 +1,83 @@
+/**
+ * Internal dependencies
+ */
+import { buildTermsTree } from '../terms';
+
+describe( 'buildTermsTree()', () => {
+	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
+		const input = Object.freeze( [
+			{ id: 2232, name: 'foo', dummy: true },
+			{ id: 2245, name: 'baz', dummy: true },
+		] );
+		const output = Object.freeze( [
+			{
+				id: '2232',
+				name: 'foo',
+				parent: null,
+				children: [],
+				dummy: true,
+			},
+			{
+				id: '2245',
+				name: 'baz',
+				parent: null,
+				children: [],
+				dummy: true,
+			},
+		] );
+		const termsTreem = buildTermsTree( input );
+		expect( termsTreem ).toEqual( output );
+	} );
+	it( 'Should return same array as input with empty children added if all the elements are top level', () => {
+		const input = Object.freeze( [
+			{ id: 2232, name: 'foo', parent: 0, dummy: true },
+			{ id: 2245, name: 'baz', parent: 0, dummy: false },
+		] );
+		const output = [
+			{ id: '2232', name: 'foo', parent: 0, children: [], dummy: true },
+			{ id: '2245', name: 'baz', parent: 0, children: [], dummy: false },
+		];
+		const termsTreem = buildTermsTree( input );
+		expect( termsTreem ).toEqual( output );
+	} );
+	it( 'Should return element with its child if a child exists', () => {
+		const input = Object.freeze( [
+			{ id: 2232, name: 'foo', parent: 0 },
+			{ id: 2245, name: 'baz', parent: 2232 },
+		] );
+		const output = [
+			{
+				id: '2232',
+				name: 'foo',
+				parent: 0,
+				children: [
+					{ id: '2245', name: 'baz', parent: 2232, children: [] },
+				],
+			},
+		];
+		const termsTreem = buildTermsTree( input );
+		expect( termsTreem ).toEqual( output );
+	} );
+	it( 'Should return elements with multiple children and elements with no children', () => {
+		const input = Object.freeze( [
+			{ id: 2232, name: 'a', parent: 0 },
+			{ id: 2245, name: 'b', parent: 2232 },
+			{ id: 2249, name: 'c', parent: 0 },
+			{ id: 2246, name: 'd', parent: 2232 },
+		] );
+		const output = [
+			{
+				id: '2232',
+				name: 'a',
+				parent: 0,
+				children: [
+					{ id: '2245', name: 'b', parent: 2232, children: [] },
+					{ id: '2246', name: 'd', parent: 2232, children: [] },
+				],
+			},
+			{ id: '2249', name: 'c', parent: 0, children: [] },
+		];
+		const termsTreem = buildTermsTree( input );
+		expect( termsTreem ).toEqual( output );
+	} );
+} );
diff --git a/packages/components/src/query-controls/types.ts b/packages/components/src/query-controls/types.ts
new file mode 100644
index 00000000000000..eb004bf8215b0a
--- /dev/null
+++ b/packages/components/src/query-controls/types.ts
@@ -0,0 +1,160 @@
+/**
+ * Internal dependencies
+ */
+import type { FormTokenFieldProps } from '../form-token-field/types';
+import type { TreeSelectProps } from '../tree-select/types';
+
+export type Author = {
+	id: number;
+	name: string;
+};
+
+export type Category = {
+	id: number;
+	name: string;
+	parent: number;
+};
+
+export type TermWithParentAndChildren = {
+	id: string;
+	name: string;
+	parent: number | null;
+	children: TermWithParentAndChildren[];
+};
+
+export type TermsByParent = Record< string, TermWithParentAndChildren[] >;
+
+export type CategorySelectProps = Pick<
+	TreeSelectProps,
+	'label' | 'noOptionLabel'
+> & {
+	categoriesList: Category[];
+	onChange: ( newCategory: string ) => void;
+	selectedCategoryId?: Category[ 'id' ];
+	__next40pxDefaultSize: boolean;
+};
+
+export type AuthorSelectProps = Pick<
+	TreeSelectProps,
+	'label' | 'noOptionLabel'
+> & {
+	authorList?: Author[];
+	onChange: ( newAuthor: string ) => void;
+	selectedAuthorId?: Author[ 'id' ];
+	__next40pxDefaultSize: boolean;
+};
+
+type Order = 'asc' | 'desc';
+type OrderBy = 'date' | 'title';
+
+type BaseQueryControlsProps = {
+	/**
+	 * An array of the authors to select from.
+	 */
+	authorList?: AuthorSelectProps[ 'authorList' ];
+	/**
+	 * The maximum number of items.
+	 *
+	 * @default 100
+	 */
+	maxItems?: number;
+	/**
+	 * The minimum number of items.
+	 *
+	 * @default 1
+	 */
+	minItems?: number;
+	/**
+	 * The selected number of items to retrieve via the query.
+	 */
+	numberOfItems?: number;
+	/**
+	 * A function that receives the new author value.
+	 * If not specified, the author controls are not rendered.
+	 */
+	onAuthorChange?: AuthorSelectProps[ 'onChange' ];
+	/**
+	 * A function that receives the new number of items.
+	 * If not specified, then the number of items
+	 * range control is not rendered.
+	 */
+	onNumberOfItemsChange?: ( newNumber?: number ) => void;
+	/**
+	 * A function that receives the new order value.
+	 * If this prop or the `onOrderByChange` prop are not specified,
+	 * then the order controls are not rendered.
+	 */
+	onOrderChange?: ( newOrder: Order ) => void;
+	/**
+	 * A function that receives the new orderby value.
+	 * If this prop or the `onOrderChange` prop are not specified,
+	 * then the order controls are not rendered.
+	 */
+	onOrderByChange?: ( newOrderBy: OrderBy ) => void;
+	/**
+	 * The order in which to retrieve posts.
+	 */
+	order?: Order;
+	/**
+	 * The meta key by which to order posts.
+	 */
+	orderBy?: OrderBy;
+	/**
+	 * The selected author ID.
+	 */
+	selectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @deprecated Default behavior since WP 6.7. Prop can be safely removed.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: boolean;
+};
+
+export type QueryControlsWithSingleCategorySelectionProps =
+	BaseQueryControlsProps & {
+		/**
+		 * An array of categories. When passed in conjunction with the
+		 * `onCategoryChange` prop, it causes the component to render UI that allows
+		 * selecting one category at a time.
+		 */
+		categoriesList?: CategorySelectProps[ 'categoriesList' ];
+		/**
+		 * The selected category for the `categoriesList` prop.
+		 */
+		selectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];
+		/**
+		 * A function that receives the new category value. If not specified, the
+		 * category controls are not rendered.
+		 * The function's signature changes depending on whether multiple category
+		 * selection is enabled or not.
+		 */
+		onCategoryChange?: CategorySelectProps[ 'onChange' ];
+	};
+
+export type QueryControlsWithMultipleCategorySelectionProps =
+	BaseQueryControlsProps & {
+		/**
+		 * An object of categories with the category name as the key. When passed in
+		 * conjunction with the `onCategoryChange` prop, it causes the component to
+		 * render UI that enables multiple selection.
+		 */
+		categorySuggestions?: Record< Category[ 'name' ], Category >;
+		/**
+		 * The selected categories for the `categorySuggestions` prop.
+		 */
+		selectedCategories?: Category[];
+		/**
+		 * A function that receives the new category value. If not specified, the
+		 * category controls are not rendered.
+		 * The function's signature changes depending on whether multiple category
+		 * selection is enabled or not.
+		 */
+		onCategoryChange?: FormTokenFieldProps[ 'onChange' ];
+	};
+
+export type QueryControlsProps =
+	| QueryControlsWithSingleCategorySelectionProps
+	| QueryControlsWithMultipleCategorySelectionProps;
diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md
index 28708f6dbb387f..5d7204ef627be3 100644
--- a/packages/components/src/radio-control/README.md
+++ b/packages/components/src/radio-control/README.md
@@ -5,12 +5,6 @@ Use radio buttons when you want users to select one option from a set, and you w
 ![](https://make.wordpress.org/design/files/2018/11/radio.png)
 Selected and unselected radio buttons
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -26,12 +20,12 @@ If you have a list of available options that can be collapsed, consider using a
 
 #### Do
 
-![](https://make.wordpress.org/design/files/2018/11/radio-usage-do.png)
+![Right: A screenshot showing two radio buttons for "Author" and "Editor", one checked](https://github.com/WordPress/gutenberg/assets/10128264/77da4e95-b038-43e7-bd29-11282cc2bac7)
 Use radio buttons when only one item can be selected from a list.
 
 #### Don’t
 
-![](https://make.wordpress.org/design/files/2018/11/radio-usage-dont.png)
+![Wrong: A screenshot showing two checkboxes for "Author" and "Editor", one checked](https://github.com/WordPress/gutenberg/assets/10128264/214f37a8-2080-4c10-a4b5-b011e0875f18)
 Don’t use checkboxes when only one item can be selected from a list. Use radio buttons instead.
 
 #### Defaults
@@ -58,7 +52,7 @@ Render a user interface to select the user type using radio inputs.
 
 ```jsx
 import { RadioControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState } from 'react';
 
 const MyRadioControl = () => {
 	const [ option, setOption ] = useState( 'a' );
@@ -82,7 +76,7 @@ const MyRadioControl = () => {
 
 The component accepts the following props:
 
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
 
 If this property is added, a help text will be generated using help property as the content.
 
@@ -125,4 +119,4 @@ The value property of the currently selected option.
 
 -   To select one or more items from a set, use the `CheckboxControl` component.
 -   To toggle a single setting on or off, use the `ToggleControl` component.
--   To format as a button group, use the `RadioGroup` component.
+-   To format as a segmented button group, use the `ToggleGroupControl` component.
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
index bbc2b2c04ed43b..29927558c58cd4 100644
--- a/packages/components/src/radio-control/index.tsx
+++ b/packages/components/src/radio-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -13,9 +13,23 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
+import { StyledHelp } from '../base-control/styles/base-control-styles';
+import { VisuallyHidden } from '../visually-hidden';
+
+function generateOptionDescriptionId( radioGroupId: string, index: number ) {
+	return `${ radioGroupId }-${ index }-option-description`;
+}
+
+function generateOptionId( radioGroupId: string, index: number ) {
+	return `${ radioGroupId }-${ index }`;
+}
+
+function generateHelpId( radioGroupId: string ) {
+	return `${ radioGroupId }__help`;
+}
 
 /**
  * Render a user interface to select the user type using radio inputs.
@@ -53,10 +67,15 @@ export function RadioControl(
 		onChange,
 		hideLabelFromVision,
 		options = [],
+		id: preferredId,
 		...additionalProps
 	} = props;
-	const instanceId = useInstanceId( RadioControl );
-	const id = `inspector-radio-control-${ instanceId }`;
+	const id = useInstanceId(
+		RadioControl,
+		'inspector-radio-control',
+		preferredId
+	);
+
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
@@ -65,22 +84,32 @@ export function RadioControl(
 	}
 
 	return (
-		<BaseControl
-			__nextHasNoMarginBottom
-			label={ label }
+		<fieldset
 			id={ id }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			className={ classnames( className, 'components-radio-control' ) }
+			className={ clsx( className, 'components-radio-control' ) }
+			aria-describedby={ !! help ? generateHelpId( id ) : undefined }
 		>
-			<VStack spacing={ 1 }>
+			{ hideLabelFromVision ? (
+				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			) : (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+
+			<VStack
+				spacing={ 3 }
+				className={ clsx( 'components-radio-control__group-wrapper', {
+					'has-help': !! help,
+				} ) }
+			>
 				{ options.map( ( option, index ) => (
 					<div
-						key={ `${ id }-${ index }` }
+						key={ generateOptionId( id, index ) }
 						className="components-radio-control__option"
 					>
 						<input
-							id={ `${ id }-${ index }` }
+							id={ generateOptionId( id, index ) }
 							className="components-radio-control__input"
 							type="radio"
 							name={ id }
@@ -88,17 +117,40 @@ export function RadioControl(
 							onChange={ onChangeValue }
 							checked={ option.value === selected }
 							aria-describedby={
-								!! help ? `${ id }__help` : undefined
+								!! option.description
+									? generateOptionDescriptionId( id, index )
+									: undefined
 							}
 							{ ...additionalProps }
 						/>
-						<label htmlFor={ `${ id }-${ index }` }>
+						<label
+							className="components-radio-control__label"
+							htmlFor={ generateOptionId( id, index ) }
+						>
 							{ option.label }
 						</label>
+						{ !! option.description ? (
+							<StyledHelp
+								__nextHasNoMarginBottom
+								id={ generateOptionDescriptionId( id, index ) }
+								className="components-radio-control__option-description"
+							>
+								{ option.description }
+							</StyledHelp>
+						) : null }
 					</div>
 				) ) }
 			</VStack>
-		</BaseControl>
+			{ !! help && (
+				<StyledHelp
+					__nextHasNoMarginBottom
+					id={ generateHelpId( id ) }
+					className="components-base-control__help"
+				>
+					{ help }
+				</StyledHelp>
+			) }
+		</fieldset>
 	);
 }
 
diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..7b7bc773f323a9
--- /dev/null
+++ b/packages/components/src/radio-control/stories/index.story.tsx
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RadioControl from '..';
+
+const meta: Meta< typeof RadioControl > = {
+	component: RadioControl,
+	title: 'Components/Selection & Input/Common/RadioControl',
+	id: 'components-radiocontrol',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		selected: {
+			control: false,
+		},
+		label: {
+			control: { type: 'text' },
+		},
+		help: {
+			control: { type: 'text' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof RadioControl > = ( {
+	onChange,
+	options,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( options?.[ 0 ]?.value );
+
+	return (
+		<RadioControl
+			{ ...args }
+			selected={ value }
+			options={ options }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof RadioControl > = Template.bind( {} );
+Default.args = {
+	label: 'Post visibility',
+	options: [
+		{ label: 'Public', value: 'public' },
+		{ label: 'Private', value: 'private' },
+		{ label: 'Password Protected', value: 'password' },
+	],
+};
+
+export const WithOptionDescriptions: StoryFn< typeof RadioControl > =
+	Template.bind( {} );
+WithOptionDescriptions.args = {
+	...Default.args,
+	options: [
+		{
+			label: 'Public',
+			value: 'public',
+			description: 'Visible to everyone',
+		},
+		{
+			label: 'Private',
+			value: 'private',
+			description: 'Only visible to you',
+		},
+		{
+			label: 'Password Protected',
+			value: 'password',
+			description: 'Protected by a password',
+		},
+	],
+};
diff --git a/packages/components/src/radio-control/stories/index.tsx b/packages/components/src/radio-control/stories/index.tsx
deleted file mode 100644
index bf4bbcca24ea34..00000000000000
--- a/packages/components/src/radio-control/stories/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RadioControl from '..';
-
-const meta: ComponentMeta< typeof RadioControl > = {
-	component: RadioControl,
-	title: 'Components/RadioControl',
-	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-		selected: {
-			control: { type: null },
-		},
-		label: {
-			control: { type: 'text' },
-		},
-		help: {
-			control: { type: 'text' },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof RadioControl > = ( {
-	onChange,
-	options,
-	...args
-} ) => {
-	const [ value, setValue ] = useState( options?.[ 0 ]?.value );
-
-	return (
-		<RadioControl
-			{ ...args }
-			selected={ value }
-			options={ options }
-			onChange={ ( v ) => {
-				setValue( v );
-				onChange( v );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof RadioControl > = Template.bind(
-	{}
-);
-Default.args = {
-	label: 'Post visibility',
-	options: [
-		{ label: 'Public', value: 'public' },
-		{ label: 'Private', value: 'private' },
-		{ label: 'Password Protected', value: 'password' },
-	],
-};
diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
index 732dc1201d9d5a..e3dcb8d1e58270 100644
--- a/packages/components/src/radio-control/style.scss
+++ b/packages/components/src/radio-control/style.scss
@@ -1,5 +1,72 @@
+.components-radio-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	font-family: $default-font;
+	font-size: $default-font-size;
+}
+
+.components-radio-control__group-wrapper.has-help {
+	margin-block-end: $grid-unit-15;
+}
+
+.components-radio-control__option {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	grid-template-rows: auto minmax(0, max-content);
+	column-gap: $grid-unit-10;
+	align-items: center;
+}
+
 .components-radio-control__input[type="radio"] {
+	grid-column: 1;
+	grid-row: 1;
+
 	@include radio-control;
-	margin-top: 0;
-	margin-right: 6px;
+
+	display: inline-flex;
+	margin: 0;
+	padding: 0;
+	appearance: none;
+	cursor: pointer;
+
+	&:focus {
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
+	}
+
+	&:checked {
+		background: $components-color-accent;
+		border-color: $components-color-accent;
+
+		&::before {
+			content: "";
+			border-radius: $radius-round;
+		}
+	}
+}
+
+.components-radio-control__label {
+	grid-column: 2;
+	grid-row: 1;
+
+	cursor: pointer;
+	line-height: $radio-input-size-sm;
+
+	@include break-small() {
+		line-height: $radio-input-size;
+	}
+}
+
+.components-radio-control__option-description {
+	grid-column: 2;
+	grid-row: 2;
+
+	padding-block-start: $grid-unit-05;
+
+	// Override the top margin of the StyledHelp component from BaseControl.
+	// TODO: we should tweak the StyledHelp component to not have a top margin.
+	&.components-radio-control__option-description {
+		margin-top: 0;
+	}
 }
diff --git a/packages/components/src/radio-control/test/index.tsx b/packages/components/src/radio-control/test/index.tsx
new file mode 100644
index 00000000000000..7e30744d96b826
--- /dev/null
+++ b/packages/components/src/radio-control/test/index.tsx
@@ -0,0 +1,277 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RadioControl from '../';
+
+const ControlledRadioControl = ( {
+	...props
+}: React.ComponentProps< typeof RadioControl > ) => {
+	const [ option, setOption ] = useState( props.selected );
+
+	return (
+		<RadioControl
+			{ ...props }
+			onChange={ ( newValue ) => {
+				setOption( newValue );
+				props.onChange?.( newValue );
+			} }
+			selected={ option }
+		/>
+	);
+};
+
+const defaultProps = {
+	options: [
+		{ label: 'Mouse', value: 'mouse' },
+		{ label: 'Cat', value: 'cat' },
+		{ label: 'Dog', value: 'dog' },
+	],
+	label: 'Animal',
+};
+
+const defaultPropsWithDescriptions = {
+	...defaultProps,
+	options: defaultProps.options.map( ( option, index ) => ( {
+		...option,
+		description: `This is the option number ${ index + 1 }.`,
+	} ) ),
+};
+
+describe.each( [
+	// TODO: `RadioControl` doesn't currently support uncontrolled mode.
+	// [ 'uncontrolled', RadioControl ],
+	[ 'controlled', ControlledRadioControl ],
+] )( 'RadioControl %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	describe( 'semantics and labelling', () => {
+		it( 'should group all radios under a fieldset with an accessible label (legend)', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toBeVisible();
+		} );
+
+		it( 'should group all radios under a fieldset with an accessible label even when the label is visually hidden', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultProps }
+					hideLabelFromVision
+					onChange={ onChangeSpy }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toBeVisible();
+		} );
+
+		it( 'should describe the radio group with the help text', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultProps }
+					help="Test help text"
+					onChange={ onChangeSpy }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: defaultProps.label } )
+			).toHaveAccessibleDescription( 'Test help text' );
+		} );
+
+		it( 'should render radio inputs with accessible labels', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			for ( const option of defaultProps.options ) {
+				const optionEl = screen.getByRole( 'radio', {
+					name: option.label,
+				} );
+				expect( optionEl ).toBeVisible();
+				expect( optionEl ).not.toBeChecked();
+			}
+		} );
+
+		it( 'should not select have a selected value when the `selected` prop does not match any available options', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			expect(
+				screen.queryByRole( 'radio', {
+					checked: true,
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render mutually exclusive radio inputs', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultProps }
+					onChange={ onChangeSpy }
+					selected={ defaultProps.options[ 1 ].value }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+				} )
+			).toHaveAccessibleName( defaultProps.options[ 1 ].label );
+		} );
+
+		it( 'should use the option description text to describe individual options', () => {
+			const onChangeSpy = jest.fn();
+			render(
+				<Component
+					{ ...defaultPropsWithDescriptions }
+					onChange={ onChangeSpy }
+					selected={ defaultProps.options[ 1 ].value }
+					help="Select your favorite animal"
+				/>
+			);
+
+			// Group help text should not be used to describe individual options.
+			let index = 1;
+			for ( const option of defaultProps.options ) {
+				expect(
+					screen.getByRole( 'radio', { name: option.label } )
+				).toHaveAccessibleDescription(
+					`This is the option number ${ index }.`
+				);
+				index += 1;
+			}
+		} );
+	} );
+
+	describe( 'interaction', () => {
+		it( 'should select a new value when clicking on the radio input', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			// Click on the third radio, make sure it's selected.
+			await user.click(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 2 ].label,
+				} )
+			);
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+				} )
+			).toHaveAccessibleName( defaultProps.options[ 2 ].label );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 2 ].value
+			);
+		} );
+
+		it( 'should select a new value when clicking on the radio label', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			// Click on the second radio's label, make sure it selects the associated radio.
+			await user.click(
+				screen.getByText( defaultProps.options[ 1 ].label )
+			);
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+				} )
+			).toHaveAccessibleName( defaultProps.options[ 1 ].label );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 1 ].value
+			);
+		} );
+
+		it( 'should select a new value when using the arrow keys', async () => {
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+			render(
+				<Component { ...defaultProps } onChange={ onChangeSpy } />
+			);
+
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'radio', {
+					name: defaultProps.options[ 0 ].label,
+				} )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+					name: defaultProps.options[ 1 ].label,
+				} )
+			).toHaveFocus();
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 1 ].value
+			);
+
+			await user.keyboard( '{ArrowDown}' );
+			await user.keyboard( '{ArrowDown}' );
+
+			// The selection wrap around.
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+					name: defaultProps.options[ 0 ].label,
+				} )
+			).toHaveFocus();
+			// TODO: why called twice for every interaction?
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 6 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 0 ].value
+			);
+
+			await user.keyboard( '{ArrowUp}' );
+
+			expect(
+				screen.getByRole( 'radio', {
+					checked: true,
+					name: defaultProps.options[ 2 ].label,
+				} )
+			).toHaveFocus();
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 8 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				defaultProps.options[ 2 ].value
+			);
+		} );
+	} );
+} );
diff --git a/packages/components/src/radio-control/types.ts b/packages/components/src/radio-control/types.ts
index 43c5e147f028d9..d1c3aa40d96481 100644
--- a/packages/components/src/radio-control/types.ts
+++ b/packages/components/src/radio-control/types.ts
@@ -24,6 +24,10 @@ export type RadioControlProps = Pick<
 		 * The internal value compared against select and passed to onChange
 		 */
 		value: string;
+		/**
+		 * Optional help text to be shown in addition the label.
+		 */
+		description?: string;
 	}[];
 	/**
 	 * The value property of the currently selected option.
diff --git a/packages/components/src/radio-group/README.md b/packages/components/src/radio-group/README.md
index 239205ec428f75..78cff485597279 100644
--- a/packages/components/src/radio-group/README.md
+++ b/packages/components/src/radio-group/README.md
@@ -12,12 +12,6 @@ Use a RadioGroup component when you want users to select one option from a small
 
 ![RadioGroup component](https://wordpress.org/gutenberg/files/2018/12/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541792995815_ButtonGroup.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -53,20 +47,20 @@ Radio groups that cannot be selected can either be given a disabled state, or be
 #### Controlled
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyControlledRadioRadioGroup = () => {
 	const [ checked, setChecked ] = useState( '25' );
 	return (
 		<RadioGroup label="Width" onChange={ setChecked } checked={ checked }>
-			<Radio value="25">25%</Radio>
-			<Radio value="50">50%</Radio>
-			<Radio value="75">75%</Radio>
-			<Radio value="100">100%</Radio>
+			<Radio __next40pxDefaultSize value="25">25%</Radio>
+			<Radio __next40pxDefaultSize value="50">50%</Radio>
+			<Radio __next40pxDefaultSize value="75">75%</Radio>
+			<Radio __next40pxDefaultSize value="100">100%</Radio>
 		</RadioGroup>
 	);
 };
@@ -77,19 +71,19 @@ const MyControlledRadioRadioGroup = () => {
 When using the RadioGroup component as an uncontrolled component, the default value can be set with the `defaultChecked` prop.
 
 ```jsx
+import { useState } from 'react';
 import {
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyUncontrolledRadioRadioGroup = () => {
 	return (
 		<RadioGroup label="Width" defaultChecked="25">
-			<Radio value="25">25%</Radio>
-			<Radio value="50">50%</Radio>
-			<Radio value="75">75%</Radio>
-			<Radio value="100">100%</Radio>
+			<Radio __next40pxDefaultSize value="25">25%</Radio>
+			<Radio __next40pxDefaultSize value="50">50%</Radio>
+			<Radio __next40pxDefaultSize value="75">75%</Radio>
+			<Radio __next40pxDefaultSize value="100">100%</Radio>
 		</RadioGroup>
 	);
 };
diff --git a/packages/components/src/radio-group/context.tsx b/packages/components/src/radio-group/context.tsx
new file mode 100644
index 00000000000000..be03d8d3254a4e
--- /dev/null
+++ b/packages/components/src/radio-group/context.tsx
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const RadioGroupContext = createContext< {
+	store?: Ariakit.RadioStore;
+	disabled?: boolean;
+} >( {
+	store: undefined,
+	disabled: undefined,
+} );
diff --git a/packages/components/src/radio-group/index.js b/packages/components/src/radio-group/index.js
deleted file mode 100644
index a94493c5f2fd8c..00000000000000
--- a/packages/components/src/radio-group/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ButtonGroup from '../button-group';
-import RadioContext from './radio-context';
-
-function RadioGroup(
-	{ label, checked, defaultChecked, disabled, onChange, ...props },
-	ref
-) {
-	const radioState = useRadioState( {
-		state: defaultChecked,
-		baseId: props.id,
-	} );
-	const radioContext = {
-		...radioState,
-		disabled,
-		// Controlled or uncontrolled.
-		state: checked ?? radioState.state,
-		setState: onChange ?? radioState.setState,
-	};
-
-	return (
-		<RadioContext.Provider value={ radioContext }>
-			<ReakitRadioGroup
-				ref={ ref }
-				as={ ButtonGroup }
-				aria-label={ label }
-				{ ...radioState }
-				{ ...props }
-			/>
-		</RadioContext.Provider>
-	);
-}
-
-/**
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
- */
-export default forwardRef( RadioGroup );
diff --git a/packages/components/src/radio-group/index.tsx b/packages/components/src/radio-group/index.tsx
new file mode 100644
index 00000000000000..e59775c00a8023
--- /dev/null
+++ b/packages/components/src/radio-group/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ButtonGroup from '../button-group';
+import type { WordPressComponentProps } from '../context';
+import { RadioGroupContext } from './context';
+import type { RadioGroupProps } from './types';
+
+function UnforwardedRadioGroup(
+	{
+		label,
+		checked,
+		defaultChecked,
+		disabled,
+		onChange,
+		children,
+		...props
+	}: WordPressComponentProps< RadioGroupProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const radioStore = Ariakit.useRadioStore( {
+		value: checked,
+		defaultValue: defaultChecked,
+		setValue: ( newValue ) => {
+			onChange?.( newValue ?? undefined );
+		},
+		rtl: isRTL(),
+	} );
+
+	const contextValue = useMemo(
+		() => ( {
+			store: radioStore,
+			disabled,
+		} ),
+		[ radioStore, disabled ]
+	);
+
+	return (
+		<RadioGroupContext.Provider value={ contextValue }>
+			<Ariakit.RadioGroup
+				store={ radioStore }
+				render={ <ButtonGroup>{ children }</ButtonGroup> }
+				aria-label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</RadioGroupContext.Provider>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const RadioGroup = forwardRef( UnforwardedRadioGroup );
+export default RadioGroup;
diff --git a/packages/components/src/radio-group/radio-context/index.js b/packages/components/src/radio-group/radio-context/index.js
deleted file mode 100644
index 58a7783dcb84e0..00000000000000
--- a/packages/components/src/radio-group/radio-context/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-const RadioContext = createContext( {
-	state: null,
-	setState: () => {},
-} );
-
-export default RadioContext;
diff --git a/packages/components/src/radio-group/radio.tsx b/packages/components/src/radio-group/radio.tsx
new file mode 100644
index 00000000000000..782a737b6ba28a
--- /dev/null
+++ b/packages/components/src/radio-group/radio.tsx
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../button';
+import { RadioGroupContext } from './context';
+import type { WordPressComponentProps } from '../context';
+import type { RadioProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+
+function UnforwardedRadio(
+	{
+		value,
+		children,
+		...props
+	}: WordPressComponentProps< RadioProps, 'button', false >,
+	ref: React.ForwardedRef< any >
+) {
+	const { store, disabled } = useContext( RadioGroupContext );
+
+	const selectedValue = useStoreState( store, 'value' );
+	const isChecked = selectedValue !== undefined && selectedValue === value;
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'Radio',
+		size: undefined,
+		__next40pxDefaultSize: props.__next40pxDefaultSize,
+	} );
+
+	return (
+		<Ariakit.Radio
+			disabled={ disabled }
+			store={ store }
+			ref={ ref }
+			value={ value }
+			render={
+				<Button
+					variant={ isChecked ? 'primary' : 'secondary' }
+					{ ...props }
+				/>
+			}
+		>
+			{ children || value }
+		</Ariakit.Radio>
+	);
+}
+
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
+export const Radio = forwardRef( UnforwardedRadio );
+export default Radio;
diff --git a/packages/components/src/radio-group/radio/index.js b/packages/components/src/radio-group/radio/index.js
deleted file mode 100644
index 446850c421b4c1..00000000000000
--- a/packages/components/src/radio-group/radio/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { Radio as ReakitRadio } from 'reakit/Radio';
-
-/**
- * WordPress dependencies
- */
-import { useContext, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import RadioContext from '../radio-context';
-
-function Radio( { children, value, ...props }, ref ) {
-	const radioContext = useContext( RadioContext );
-	const checked = radioContext.state === value;
-
-	return (
-		<ReakitRadio
-			ref={ ref }
-			as={ Button }
-			variant={ checked ? 'primary' : 'secondary' }
-			value={ value }
-			{ ...radioContext }
-			{ ...props }
-		>
-			{ children || value }
-		</ReakitRadio>
-	);
-}
-
-/**
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
- */
-export default forwardRef( Radio );
diff --git a/packages/components/src/radio-group/stories/index.js b/packages/components/src/radio-group/stories/index.js
deleted file mode 100644
index 10fb5dfd028000..00000000000000
--- a/packages/components/src/radio-group/stories/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Radio from '../radio';
-import RadioGroup from '../';
-
-export default {
-	title: 'Components (Deprecated)/RadioGroup',
-	subcomponents: { Radio },
-	component: RadioGroup,
-	parameters: {
-		docs: {
-			description: {
-				component:
-					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
-			},
-		},
-	},
-};
-
-export const _default = () => {
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="default-radiogroup"
-			label="options"
-			defaultChecked="option2"
-		>
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-			<Radio value="option3">Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const disabled = () => {
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="disabled-radiogroup"
-			disabled
-			label="options"
-			defaultChecked="option2"
-		>
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-			<Radio value="option3">Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-const ControlledRadioGroupWithState = () => {
-	const [ checked, setChecked ] = useState( 1 );
-
-	/* eslint-disable no-restricted-syntax */
-	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="controlled-radiogroup"
-			label="options"
-			checked={ checked }
-			onChange={ setChecked }
-		>
-			<Radio value={ 0 }>Option 1</Radio>
-			<Radio value={ 1 }>Option 2</Radio>
-			<Radio value={ 2 }>Option 3</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
-
-export const controlled = () => {
-	return <ControlledRadioGroupWithState />;
-};
diff --git a/packages/components/src/radio-group/stories/index.story.tsx b/packages/components/src/radio-group/stories/index.story.tsx
new file mode 100644
index 00000000000000..aee8610e1b7002
--- /dev/null
+++ b/packages/components/src/radio-group/stories/index.story.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioGroup } from '..';
+import { Radio } from '../radio';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: Meta< typeof RadioGroup > = {
+	title: 'Components (Deprecated)/RadioGroup',
+	id: 'components-radiogroup',
+	component: RadioGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Radio },
+	argTypes: {
+		onChange: { control: false },
+		children: { control: false },
+		checked: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
+			},
+		},
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof RadioGroup > = ( props ) => {
+	return <RadioGroup { ...props } />;
+};
+
+export const Default: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Default.args = {
+	id: 'default-radiogroup',
+	label: 'options',
+	defaultChecked: 'option2',
+	children: (
+		<>
+			<Radio __next40pxDefaultSize value="option1">
+				Option 1
+			</Radio>
+			<Radio __next40pxDefaultSize value="option2">
+				Option 2
+			</Radio>
+			<Radio __next40pxDefaultSize value="option3">
+				Option 3
+			</Radio>
+		</>
+	),
+};
+
+export const Disabled: StoryFn< typeof RadioGroup > = Template.bind( {} );
+Disabled.args = {
+	...Default.args,
+	id: 'disabled-radiogroup',
+	disabled: true,
+};
+
+const ControlledTemplate: StoryFn< typeof RadioGroup > = ( {
+	checked: checkedProp,
+	onChange: onChangeProp,
+	...props
+} ) => {
+	const [ checked, setChecked ] =
+		useState< React.ComponentProps< typeof RadioGroup >[ 'checked' ] >(
+			checkedProp
+		);
+
+	const onChange: typeof onChangeProp = ( value ) => {
+		setChecked( value );
+		onChangeProp?.( value );
+	};
+
+	return (
+		<RadioGroup { ...props } onChange={ onChange } checked={ checked } />
+	);
+};
+
+export const Controlled: StoryFn< typeof RadioGroup > = ControlledTemplate.bind(
+	{}
+);
+Controlled.args = {
+	...Default.args,
+	checked: 'option2',
+	id: 'controlled-radiogroup',
+};
+Controlled.argTypes = {
+	checked: { control: false },
+};
diff --git a/packages/components/src/radio-group/types.ts b/packages/components/src/radio-group/types.ts
new file mode 100644
index 00000000000000..c72917a33faa4c
--- /dev/null
+++ b/packages/components/src/radio-group/types.ts
@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import type { ButtonProps } from '../button/types';
+
+export type RadioGroupProps = {
+	/**
+	 * Accessible label for the radio group
+	 */
+	label: string;
+	/**
+	 * The `value` of the `Radio` element which should be selected.
+	 * Indicates controlled usage of the component.
+	 */
+	checked?: string | number;
+	/**
+	 * The value of the radio element which is initially selected.
+	 */
+	defaultChecked?: string | number;
+	/**
+	 * Whether the `RadioGroup` should be disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * Called when a `Radio` element has been selected.
+	 * Receives the `value` of the selected element as an argument.
+	 */
+	onChange?: ( value: string | number | undefined ) => void;
+	/**
+	 * The children elements, which should be a series of `Radio` components.
+	 */
+	children: React.ReactNode;
+};
+
+export type RadioProps = Pick< ButtonProps, '__next40pxDefaultSize' > & {
+	/**
+	 * The actual value of the radio element.
+	 */
+	value: string | number;
+	/**
+	 * Content displayed on the Radio element. If there aren't any children, `value` is displayed.
+	 */
+	children?: React.ReactNode;
+};
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 2a8f7ae7a05ab1..f21285c5f26256 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -2,15 +2,7 @@
 
 RangeControls are used to make selections from a range of incremental values.
 
-![](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
-
-A RangeControl for volume
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
+![A RangeControl for volume](https://make.wordpress.org/design/files/2018/12/rangecontrol.png)
 
 ## Design guidelines
 
@@ -90,14 +82,16 @@ RangeControls should provide the full range of choices available for the user to
 Render a RangeControl to make a selection from a range of incremental values.
 
 ```jsx
+import { useState } from 'react';
 import { RangeControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyRangeControl = () => {
 	const [ columns, setColumns ] = useState( 2 );
 
-	return(
+	return (
 		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -113,7 +107,7 @@ const MyRangeControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input elements.
 
-### `afterIcon`: `string|Function|WPComponent|null`
+### `afterIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered after the slider with the icon equal to `afterIcon`.
 
@@ -130,7 +124,7 @@ If this property is true, a button to reset the slider is rendered.
 -   Default: `false`
 -   Platform: Web | Mobile
 
-### `beforeIcon`: `string|Function|WPComponent|null`
+### `beforeIcon`: `string|Function|Component|null`
 
 If this property is added, an [Icon component](/packages/components/src/icon/README.md) will be rendered before the slider with the icon equal to `beforeIcon`.
 
@@ -160,8 +154,7 @@ Disables the `input`, preventing new values from being applied.
 -   Required: No
 -   Platform: Web
 
-
-### `help`: `string|WPElement`
+### `help`: `string|Element`
 
 If this property is added, a help text will be generated using help property as the content.
 
@@ -172,7 +165,7 @@ If this property is added, a help text will be generated using help property as
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `icon`: `string`
 
@@ -341,6 +334,7 @@ The minimum amount by which `value` changes. It is also a factor in validation a
 
 -   Required: No
 -   Platform: Web
+
 ### `trackColor`: `CSSProperties[ 'color' ]`
 
 CSS color string to customize the track element's background.
@@ -369,6 +363,20 @@ Determines if the `input` number field will render next to the RangeControl. Thi
 -   Required: No
 -   Platform: Web
 
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
+
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To collect a numerical input in a text field, use the `TextControl` component.
diff --git a/packages/components/src/range-control/index.native.js b/packages/components/src/range-control/index.native.js
index 4717502785561d..3250680ee9a937 100644
--- a/packages/components/src/range-control/index.native.js
+++ b/packages/components/src/range-control/index.native.js
@@ -25,6 +25,7 @@ const RangeControl = memo(
 		max,
 		type,
 		separatorType,
+		disabled,
 		...props
 	} ) => {
 		if ( type === 'stepper' ) {
@@ -36,6 +37,7 @@ const RangeControl = memo(
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					disabled={ disabled }
 				/>
 			);
 		}
@@ -61,6 +63,7 @@ const RangeControl = memo(
 				allowReset={ allowReset }
 				defaultValue={ initialSliderValue }
 				separatorType={ separatorType }
+				disabled={ disabled }
 				{ ...props }
 			/>
 		);
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index cec69ac1dfa697..89dd8248a1e614 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
@@ -36,16 +36,33 @@ import {
 } from './styles/range-control-styles';
 
 import type { RangeControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { space } from '../utils/space';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
-function UnforwardedRangeControl< IconProps = unknown >(
-	props: WordPressComponentProps<
-		RangeControlProps< IconProps >,
-		'input',
-		false
-	>,
+/**
+ * Computes the value that `RangeControl` should reset to when pressing
+ * the reset button.
+ */
+function computeResetValue( {
+	resetFallbackValue,
+	initialPosition,
+}: Pick< RangeControlProps, 'resetFallbackValue' | 'initialPosition' > ) {
+	if ( resetFallbackValue !== undefined ) {
+		return ! Number.isNaN( resetFallbackValue ) ? resetFallbackValue : null;
+	}
+
+	if ( initialPosition !== undefined ) {
+		return ! Number.isNaN( initialPosition ) ? initialPosition : null;
+	}
+
+	return null;
+}
+
+function UnforwardedRangeControl(
+	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
@@ -54,7 +71,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		allowReset = false,
 		beforeIcon,
 		className,
-		color: colorProp = COLORS.ui.theme,
+		color: colorProp = COLORS.theme.accent,
 		currentInput,
 		disabled = false,
 		help,
@@ -73,12 +90,14 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		railColor,
 		renderTooltipContent = ( v ) => v,
 		resetFallbackValue,
+		__next40pxDefaultSize = false,
 		shiftStep = 10,
 		showTooltip: showTooltipProp,
 		step = 1,
 		trackColor,
 		value: valueProp,
 		withInputField = true,
+		__shouldNotWarnDeprecated36pxSize,
 		...otherProps
 	} = props;
 
@@ -118,9 +137,9 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		: ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
-	const classes = classnames( 'components-range-control', className );
+	const classes = clsx( 'components-range-control', className );
 
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'components-range-control__wrapper',
 		!! marks && 'is-marked'
 	);
@@ -168,13 +187,12 @@ function UnforwardedRangeControl< IconProps = unknown >(
 	};
 
 	const handleOnReset = () => {
-		let resetValue: number | null = parseFloat( `${ resetFallbackValue }` );
-		let onChangeResetValue: number | undefined = resetValue;
-
-		if ( isNaN( resetValue ) ) {
-			resetValue = null;
-			onChangeResetValue = undefined;
-		}
+		// Reset to `resetFallbackValue` if defined, otherwise set internal value
+		// to `null` — which, if propagated to the `value` prop, will cause
+		// the value to be reset to the `initialPosition` prop if defined.
+		const resetValue = Number.isNaN( resetFallbackValue )
+			? null
+			: resetFallbackValue ?? null;
 
 		setValue( resetValue );
 
@@ -191,7 +209,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		 * preserve the undefined callback argument, except when a
 		 * resetFallbackValue is defined.
 		 */
-		onChange( onChangeResetValue );
+		onChange( resetValue ?? undefined );
 	};
 
 	const handleShowTooltip = () => setShowTooltip( true );
@@ -213,16 +231,28 @@ function UnforwardedRangeControl< IconProps = unknown >(
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
 
+	// Add default size deprecation warning.
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'RangeControl',
+		__next40pxDefaultSize,
+		size: undefined,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="RangeControl"
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ `${ id }` }
 			help={ help }
 		>
-			<Root className="components-range-control__root">
+			<Root
+				className="components-range-control__root"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+			>
 				{ beforeIcon && (
 					<BeforeIconWrapper>
 						<Icon icon={ beforeIcon } />
@@ -253,7 +283,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						value={ inputSliderValue ?? undefined }
 					/>
 					<RangeRail
-						aria-hidden={ true }
+						aria-hidden
 						disabled={ disabled }
 						marks={ marks }
 						max={ max }
@@ -263,15 +293,19 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						value={ rangeFillValue }
 					/>
 					<Track
-						aria-hidden={ true }
+						aria-hidden
 						className="components-range-control__track"
 						disabled={ disabled }
 						style={ { width: fillValueOffset } }
 						trackColor={ trackColor }
 					/>
-					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
+					<ThumbWrapper
+						className="components-range-control__thumb-wrapper"
+						style={ offsetStyle }
+						disabled={ disabled }
+					>
 						<Thumb
-							aria-hidden={ true }
+							aria-hidden
 							isFocused={ isThumbFocused }
 							disabled={ disabled }
 						/>
@@ -305,18 +339,39 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						onBlur={ handleOnInputNumberBlur }
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
+						size={
+							__next40pxDefaultSize
+								? '__unstable-large'
+								: 'default'
+						}
+						__unstableInputWidth={
+							__next40pxDefaultSize ? space( 20 ) : space( 16 )
+						}
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
+						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 				{ allowReset && (
 					<ActionRightWrapper>
 						<Button
 							className="components-range-control__reset"
-							disabled={ disabled || value === undefined }
+							// If the RangeControl itself is disabled, the reset button shouldn't be in the tab sequence.
+							accessibleWhenDisabled={ ! disabled }
+							// The reset button should be disabled if RangeControl itself is disabled,
+							// or if the current `value` is equal to the value that would be currently
+							// assigned when clicking the button.
+							disabled={
+								disabled ||
+								value ===
+									computeResetValue( {
+										resetFallbackValue,
+										initialPosition,
+									} )
+							}
 							variant="secondary"
-							isSmall
+							size="small"
 							onClick={ handleOnReset }
 						>
 							{ __( 'Reset' ) }
@@ -339,6 +394,8 @@ function UnforwardedRangeControl< IconProps = unknown >(
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <RangeControl
+ *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"
diff --git a/packages/components/src/range-control/input-range.tsx b/packages/components/src/range-control/input-range.tsx
index 3b663309918ae1..028f08294f3eb4 100644
--- a/packages/components/src/range-control/input-range.tsx
+++ b/packages/components/src/range-control/input-range.tsx
@@ -9,14 +9,13 @@ import { forwardRef } from '@wordpress/element';
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 
 import type { InputRangeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function InputRange(
 	props: WordPressComponentProps< InputRangeProps, 'input' >,
 	ref: React.ForwardedRef< HTMLInputElement >
 ) {
 	const { describedBy, label, value, ...otherProps } = props;
-
 	return (
 		<BaseInputRange
 			{ ...otherProps }
diff --git a/packages/components/src/range-control/mark.tsx b/packages/components/src/range-control/mark.tsx
index 892a3b3679df1e..a17665bb628aba 100644
--- a/packages/components/src/range-control/mark.tsx
+++ b/packages/components/src/range-control/mark.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Mark, MarkLabel } from './styles/range-control-styles';
 
 import type { RangeMarkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function RangeMark(
 	props: WordPressComponentProps< RangeMarkProps, 'span' >
@@ -22,12 +22,12 @@ export default function RangeMark(
 		...otherProps
 	} = props;
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-range-control__mark',
 		isFilled && 'is-filled',
 		className
 	);
-	const labelClasses = classnames(
+	const labelClasses = clsx(
 		'components-range-control__mark-label',
 		isFilled && 'is-filled'
 	);
diff --git a/packages/components/src/range-control/rail.tsx b/packages/components/src/range-control/rail.tsx
index c284415630906c..48bf7d9b231158 100644
--- a/packages/components/src/range-control/rail.tsx
+++ b/packages/components/src/range-control/rail.tsx
@@ -9,7 +9,7 @@ import { isRTL } from '@wordpress/i18n';
 import RangeMark from './mark';
 import { MarksWrapper, Rail } from './styles/range-control-styles';
 
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type {
 	MarksProps,
 	RangeMarkProps,
@@ -92,7 +92,7 @@ function useMarks( {
 	if ( ! Array.isArray( marks ) ) {
 		marks = [];
 		const count = 1 + Math.round( range / step );
-		while ( count > marks.push( { value: step * marks.length + min } ) );
+		while ( count > marks.push( { value: step * marks.length + min } ) ) {}
 	}
 
 	const placedMarks: RangeMarkProps[] = [];
diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..5a4b2342a49ffb
--- /dev/null
+++ b/packages/components/src/range-control/stories/index.story.tsx
@@ -0,0 +1,254 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import RangeControl from '..';
+
+const ICONS = { starEmpty, starFilled, styles, wordpress };
+
+const meta: Meta< typeof RangeControl > = {
+	component: RangeControl,
+	title: 'Components/Selection & Input/Common/RangeControl',
+	id: 'components-rangecontrol',
+	argTypes: {
+		afterIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		beforeIcon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+		color: { control: { type: 'color' } },
+		help: { control: { type: 'text' } },
+		icon: { control: false },
+		marks: { control: { type: 'object' } },
+		onBlur: { control: false },
+		onChange: { control: false },
+		onFocus: { control: false },
+		onMouseLeave: { control: false },
+		onMouseMove: { control: false },
+		railColor: { control: { type: 'color' } },
+		step: { control: { type: 'number' } },
+		trackColor: { control: { type: 'color' } },
+		type: { control: { type: 'check' }, options: [ 'stepper' ] },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState< number >();
+
+	return (
+		<RangeControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange?.( v );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	help: 'Please select how transparent you would like this.',
+	initialPosition: 50,
+	label: 'Opacity',
+	max: 100,
+	min: 0,
+};
+
+/**
+ * Setting the `step` prop to `"any"` will allow users to select non-integer
+ * values. This also overrides both `withInputField` and `showTooltip` props to
+ * `false`.
+ */
+export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< number >();
+
+	return (
+		<>
+			<RangeControl
+				{ ...args }
+				value={ value }
+				onChange={ ( v ) => {
+					setValue( v );
+					onChange?.( v );
+				} }
+			/>
+			<hr style={ { marginTop: '5em' } } />
+			<p>Current value: { value }</p>
+		</>
+	);
+};
+WithAnyStep.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	label: 'Brightness',
+	step: 'any',
+};
+
+const MarkTemplate: StoryFn< typeof RangeControl > = ( {
+	label,
+	onChange,
+	...args
+} ) => {
+	const [ automaticValue, setAutomaticValue ] = useState< number >();
+	const [ customValue, setCustomValue ] = useState< number >();
+
+	return (
+		<>
+			<h2>{ label }</h2>
+			<RangeControl
+				{ ...args }
+				label="Automatic marks"
+				marks
+				onChange={ ( v ) => {
+					setAutomaticValue( v );
+					onChange?.( v );
+				} }
+				value={ automaticValue }
+			/>
+			<RangeControl
+				{ ...args }
+				label="Custom marks"
+				onChange={ ( v ) => {
+					setCustomValue( v );
+					onChange?.( v );
+				} }
+				value={ customValue }
+			/>
+		</>
+	);
+};
+
+const marksBase = [
+	{ value: 0, label: '0' },
+	{ value: 1, label: '1' },
+	{ value: 2, label: '2' },
+	{ value: 8, label: '8' },
+	{ value: 10, label: '10' },
+];
+
+const marksWithNegatives = [
+	...marksBase,
+	{ value: -1, label: '-1' },
+	{ value: -2, label: '-2' },
+	{ value: -4, label: '-4' },
+	{ value: -8, label: '-8' },
+];
+
+/**
+ * Use `marks` to render a visual representation of `step` ticks. Marks may be
+ * automatically generated or custom mark indicators can be provided by an
+ * `Array`.
+ */
+export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithIntegerStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	label: 'Integer Step',
+	marks: marksBase,
+	max: 10,
+	min: 0,
+	step: 1,
+};
+
+/**
+ * Decimal values may be used for `marks` rendered as a visual representation of
+ * `step` ticks. Marks may be automatically generated or custom mark indicators
+ * can be provided by an `Array`.
+ */
+export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithDecimalStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	marks: [
+		...marksBase,
+		{ value: 3.5, label: '3.5' },
+		{ value: 5.8, label: '5.8' },
+	],
+	max: 10,
+	min: 0,
+	step: 0.1,
+};
+
+/**
+ * A negative `min` value can be used to constrain `RangeControl` values. Mark
+ * indicators can represent negative values as well. Marks may be automatically
+ * generated or custom mark indicators can be provided by an `Array`.
+ */
+export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithNegativeMinimumAndMarks.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	marks: marksWithNegatives,
+	max: 10,
+	min: -10,
+	step: 1,
+};
+
+/**
+ * The entire range of valid values for a `RangeControl` may be negative. Mark
+ * indicators can represent negative values as well. Marks may be automatically
+ * generated or custom mark indicators can be provided by an `Array`.
+ */
+export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithNegativeRangeAndMarks.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	marks: marksWithNegatives,
+	max: -1,
+	min: -10,
+	step: 1,
+};
+
+/**
+ * When a `RangeControl` has a `step` value of `any` a user may select
+ * non-integer values. This may still be used in conjunction with `marks`
+ * rendering a visual representation of `step` ticks.
+ */
+export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
+
+WithAnyStepAndMarks.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+	marks: marksBase,
+	max: 10,
+	min: 0,
+	step: 'any',
+};
diff --git a/packages/components/src/range-control/stories/index.tsx b/packages/components/src/range-control/stories/index.tsx
deleted file mode 100644
index 587231c03f3d25..00000000000000
--- a/packages/components/src/range-control/stories/index.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import RangeControl from '..';
-
-const ICONS = { starEmpty, starFilled, styles, wordpress };
-
-const meta: ComponentMeta< typeof RangeControl > = {
-	component: RangeControl,
-	title: 'Components/RangeControl',
-	argTypes: {
-		afterIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		beforeIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		color: { control: { type: 'color' } },
-		help: { control: { type: 'text' } },
-		icon: { control: { type: null } },
-		marks: { control: { type: 'object' } },
-		onBlur: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onFocus: { control: { type: null } },
-		onMouseLeave: { control: { type: null } },
-		onMouseMove: { control: { type: null } },
-		railColor: { control: { type: 'color' } },
-		step: { control: { type: 'number' } },
-		trackColor: { control: { type: 'color' } },
-		type: { control: { type: 'check' }, options: [ 'stepper' ] },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof RangeControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState< number >();
-
-	return (
-		<RangeControl
-			{ ...args }
-			value={ value }
-			onChange={ ( v ) => {
-				setValue( v );
-				onChange?.( v );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof RangeControl > = Template.bind(
-	{}
-);
-Default.args = {
-	help: 'Please select how transparent you would like this.',
-	initialPosition: 50,
-	label: 'Opacity',
-	max: 100,
-	min: 0,
-};
-
-/**
- * Setting the `step` prop to `"any"` will allow users to select non-integer
- * values. This also overrides both `withInputField` and `showTooltip` props to
- * `false`.
- */
-export const WithAnyStep: ComponentStory< typeof RangeControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState< number >();
-
-	return (
-		<>
-			<RangeControl
-				{ ...args }
-				value={ value }
-				onChange={ ( v ) => {
-					setValue( v );
-					onChange?.( v );
-				} }
-			/>
-			<hr style={ { marginTop: '5em' } } />
-			<p>Current value: { value }</p>
-		</>
-	);
-};
-WithAnyStep.args = {
-	label: 'Brightness',
-	step: 'any',
-};
-
-const MarkTemplate: ComponentStory< typeof RangeControl > = ( {
-	label,
-	onChange,
-	...args
-} ) => {
-	const [ automaticValue, setAutomaticValue ] = useState< number >();
-	const [ customValue, setCustomValue ] = useState< number >();
-
-	return (
-		<>
-			<h2>{ label }</h2>
-			<RangeControl
-				{ ...args }
-				label="Automatic marks"
-				marks
-				onChange={ ( v ) => {
-					setAutomaticValue( v );
-					onChange?.( v );
-				} }
-				value={ automaticValue }
-			/>
-			<RangeControl
-				{ ...args }
-				label="Custom marks"
-				onChange={ ( v ) => {
-					setCustomValue( v );
-					onChange?.( v );
-				} }
-				value={ customValue }
-			/>
-		</>
-	);
-};
-
-const marksBase = [
-	{ value: 0, label: '0' },
-	{ value: 1, label: '1' },
-	{ value: 2, label: '2' },
-	{ value: 8, label: '8' },
-	{ value: 10, label: '10' },
-];
-
-const marksWithNegatives = [
-	...marksBase,
-	{ value: -1, label: '-1' },
-	{ value: -2, label: '-2' },
-	{ value: -4, label: '-4' },
-	{ value: -8, label: '-8' },
-];
-
-/**
- * Use `marks` to render a visual representation of `step` ticks. Marks may be
- * automatically generated or custom mark indicators can be provided by an
- * `Array`.
- */
-export const WithIntegerStepAndMarks: ComponentStory< typeof RangeControl > =
-	MarkTemplate.bind( {} );
-
-WithIntegerStepAndMarks.args = {
-	label: 'Integer Step',
-	marks: marksBase,
-	max: 10,
-	min: 0,
-	step: 1,
-};
-
-/**
- * Decimal values may be used for `marks` rendered as a visual representation of
- * `step` ticks. Marks may be automatically generated or custom mark indicators
- * can be provided by an `Array`.
- */
-export const WithDecimalStepAndMarks: ComponentStory< typeof RangeControl > =
-	MarkTemplate.bind( {} );
-
-WithDecimalStepAndMarks.args = {
-	marks: [
-		...marksBase,
-		{ value: 3.5, label: '3.5' },
-		{ value: 5.8, label: '5.8' },
-	],
-	max: 10,
-	min: 0,
-	step: 0.1,
-};
-
-/**
- * A negative `min` value can be used to constrain `RangeControl` values. Mark
- * indicators can represent negative values as well. Marks may be automatically
- * generated or custom mark indicators can be provided by an `Array`.
- */
-export const WithNegativeMinimumAndMarks: ComponentStory<
-	typeof RangeControl
-> = MarkTemplate.bind( {} );
-
-WithNegativeMinimumAndMarks.args = {
-	marks: marksWithNegatives,
-	max: 10,
-	min: -10,
-	step: 1,
-};
-
-/**
- * The entire range of valid values for a `RangeControl` may be negative. Mark
- * indicators can represent negative values as well. Marks may be automatically
- * generated or custom mark indicators can be provided by an `Array`.
- */
-export const WithNegativeRangeAndMarks: ComponentStory< typeof RangeControl > =
-	MarkTemplate.bind( {} );
-
-WithNegativeRangeAndMarks.args = {
-	marks: marksWithNegatives,
-	max: -1,
-	min: -10,
-	step: 1,
-};
-
-/**
- * When a `RangeControl` has a `step` value of `any` a user may select
- * non-integer values. This may still be used in conjunction with `marks`
- * rendering a visual representation of `step` ticks.
- */
-export const WithAnyStepAndMarks: ComponentStory< typeof RangeControl > =
-	MarkTemplate.bind( {} );
-
-WithAnyStepAndMarks.args = {
-	marks: marksBase,
-	max: 10,
-	min: 0,
-	step: 'any',
-};
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index a351a7db26bdd4..6e9c68ace97532 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -8,8 +8,8 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import NumberControl from '../../number-control';
-import { COLORS, reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { COLORS, rtl, CONFIG } from '../../utils';
+import { space } from '../../utils/space';
 
 import type {
 	RangeMarkProps,
@@ -18,6 +18,7 @@ import type {
 	TooltipProps,
 	TrackProps,
 	WrapperProps,
+	RangeControlProps,
 } from '../types';
 
 const rangeHeightValue = 30;
@@ -26,15 +27,24 @@ const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
 
-export const Root = styled.div`
+const deprecatedHeight = ( {
+	__next40pxDefaultSize,
+}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );
+
+type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
+export const Root = styled.div< RootProps >`
 	-webkit-tap-highlight-color: transparent;
-	align-items: flex-start;
+	align-items: center;
 	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
 	touch-action: none;
 	width: 100%;
+	min-height: 40px;
+	/* TODO: remove after removing the __next40pxDefaultSize prop */
+	${ deprecatedHeight };
 `;
 
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
@@ -47,7 +57,10 @@ const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
 	return '';
 };
 
-export const Wrapper = styled.div< WrapperProps >`
+export const Wrapper = styled( 'div', {
+	shouldForwardProp: ( prop: string ) =>
+		! [ 'color', '__nextHasNoMarginBottom', 'marks' ].includes( prop ),
+} )< WrapperProps >`
 	display: block;
 	flex: 1;
 	position: relative;
@@ -92,7 +105,7 @@ export const Rail = styled.span`
 	position: absolute;
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
-	border-radius: ${ railHeight }px;
+	border-radius: ${ CONFIG.radiusFull };
 
 	${ railBackgroundColor };
 `;
@@ -109,7 +122,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 
 export const Track = styled.span`
 	background-color: currentColor;
-	border-radius: ${ railHeight }px;
+	border-radius: ${ CONFIG.radiusFull };
 	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
@@ -144,7 +157,7 @@ export const Mark = styled.span`
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
-	top: -4px;
+	top: 9px;
 	width: 1px;
 
 	${ markFill };
@@ -158,13 +171,17 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 
 export const MarkLabel = styled.span`
 	color: ${ COLORS.gray[ 300 ] };
-	left: 0;
 	font-size: 11px;
 	position: absolute;
-	top: 12px;
-	transform: translateX( -50% );
+	top: 22px;
 	white-space: nowrap;
 
+	${ rtl( { left: 0 } ) };
+	${ rtl(
+		{ transform: 'translateX( -50% )' },
+		{ transform: 'translateX( 50% )' }
+	) };
+
 	${ markLabelFill };
 `;
 
@@ -174,7 +191,7 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 				background-color: ${ COLORS.gray[ 400 ] };
 		  `
 		: css`
-				background-color: ${ COLORS.ui.theme };
+				background-color: ${ COLORS.theme.accent };
 		  `;
 
 export const ThumbWrapper = styled.span`
@@ -189,7 +206,7 @@ export const ThumbWrapper = styled.span`
 	top: 0;
 	user-select: none;
 	width: ${ thumbSize }px;
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };
@@ -205,9 +222,9 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: ${ COLORS.ui.theme };
+					background-color: ${ COLORS.theme.accent };
 					opacity: 0.4;
-					border-radius: 50%;
+					border-radius: ${ CONFIG.radiusRound };
 					height: ${ thumbSize + 8 }px;
 					width: ${ thumbSize + 8 }px;
 					top: -4px;
@@ -219,12 +236,13 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 
 export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
-	border-radius: 50%;
+	border-radius: ${ CONFIG.radiusRound };
 	height: 100%;
 	outline: 0;
 	position: absolute;
 	user-select: none;
 	width: 100%;
+	box-shadow: ${ CONFIG.elevationXSmall };
 
 	${ thumbColor };
 	${ thumbFocus };
@@ -246,9 +264,20 @@ export const InputRange = styled.input`
 `;
 
 const tooltipShow = ( { show }: TooltipProps ) => {
-	return css( {
-		opacity: show ? 1 : 0,
-	} );
+	return css`
+		display: ${ show ? 'inline-block' : 'none' };
+		opacity: ${ show ? 1 : 0 };
+
+		@media not ( prefers-reduced-motion ) {
+			transition:
+				opacity 120ms ease,
+				display 120ms ease allow-discrete;
+		}
+
+		@starting-style {
+			opacity: 0;
+		}
+	`;
 };
 
 const tooltipPosition = ( { position }: TooltipProps ) => {
@@ -267,36 +296,32 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
 
 export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	color: white;
-	display: inline-block;
 	font-size: 12px;
 	min-width: 32px;
-	opacity: 0;
 	padding: 4px 8px;
 	pointer-events: none;
 	position: absolute;
 	text-align: center;
-	transition: opacity 120ms ease;
 	user-select: none;
 	line-height: 1.4;
 
 	${ tooltipShow };
+
 	${ tooltipPosition };
-	${ reduceMotion( 'transition' ) };
 	${ rtl(
 		{ transform: 'translateX(-50%)' },
 		{ transform: 'translateX(50%)' }
 	) }
 `;
 
-// @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack.
+// @todo Refactor RangeControl with latest HStack configuration
+// @see: packages/components/src/h-stack
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 16 ) } !important;
 
 	input[type='number']& {
 		${ rangeHeight };
diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx
index 5a9b83ab0bed82..3d2db30eea186f 100644
--- a/packages/components/src/range-control/test/index.tsx
+++ b/packages/components/src/range-control/test/index.tsx
@@ -1,24 +1,31 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import RangeControl from '../';
-
-const getRangeInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'slider' ) as HTMLInputElement;
-const getNumberInput = (): HTMLInputElement | null =>
-	screen.getByRole( 'spinbutton' ) as HTMLInputElement;
-const getResetButton = (): HTMLButtonElement | null =>
-	screen.getByRole( 'button' ) as HTMLButtonElement;
-
-const fireChangeEvent = (
-	input: HTMLInputElement | null,
-	value?: number | string
-) => fireEvent.change( input as Element, { target: { value } } );
+import _RangeControl from '../';
+
+const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
+const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
+const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
+
+const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
+	fireEvent.change( input, { target: { value } } );
+
+const RangeControl = (
+	props: React.ComponentProps< typeof _RangeControl >
+) => {
+	return (
+		<_RangeControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
+};
 
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
@@ -30,10 +37,10 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, '5' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '10' );
 
 			expect( onChange ).toHaveBeenCalledWith( 5 );
@@ -48,9 +55,11 @@ describe( 'RangeControl', () => {
 				/>
 			);
 
+			// 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, testing-library/no-node-access
 			const afterIcon = container.querySelector(
 				'.dashicons-format-video'
 			);
@@ -68,9 +77,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '10' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '10' );
+			expect( rangeInput.value ).not.toBe( '10' );
 		} );
 
 		it( 'should not apply if new value is greater than maximum', () => {
@@ -80,9 +89,9 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '21' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).not.toBe( '21' );
+			expect( rangeInput.value ).not.toBe( '21' );
 		} );
 
 		it( 'should not call onChange if new value is invalid', () => {
@@ -93,7 +102,7 @@ describe( 'RangeControl', () => {
 
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '25e' );
 
 			expect( onChange ).not.toHaveBeenCalled();
@@ -108,15 +117,15 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '-1.1' );
 
-			expect( numberInput?.value ).toBe( '-1.1' );
-			expect( rangeInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1.1' );
+			expect( rangeInput.value ).toBe( '-1' );
 
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 			expect( onChange ).toHaveBeenCalledWith( -1 );
-			expect( numberInput?.value ).toBe( '-1' );
+			expect( numberInput.value ).toBe( '-1' );
 		} );
 
 		it( 'should validate when provided a max or min of zero', () => {
@@ -125,11 +134,11 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '1' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
-			expect( rangeInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
 		} );
 
 		it( 'should validate when min and max are negative', () => {
@@ -138,16 +147,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 
 			fireChangeEvent( numberInput, '-101' );
-			expect( rangeInput?.value ).toBe( '-100' );
+			expect( rangeInput.value ).toBe( '-100' );
 
 			fireChangeEvent( numberInput, '-49' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 
 			fireChangeEvent( numberInput, '-50' );
-			expect( rangeInput?.value ).toBe( '-50' );
+			expect( rangeInput.value ).toBe( '-50' );
 		} );
 
 		it( 'should take into account the step starting from min', () => {
@@ -163,16 +172,16 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, '0.125' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.125 );
-			expect( rangeInput?.value ).toBe( '0.125' );
+			expect( rangeInput.value ).toBe( '0.125' );
 
 			fireChangeEvent( numberInput, '0.225' );
 
 			expect( onChange ).toHaveBeenCalledWith( 0.225 );
-			expect( rangeInput?.value ).toBe( '0.225' );
+			expect( rangeInput.value ).toBe( '0.225' );
 		} );
 	} );
 
@@ -182,7 +191,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '5' );
+			expect( rangeInput.value ).toBe( '5' );
 		} );
 
 		it( 'should render initialPosition if no value is provided', () => {
@@ -190,7 +199,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 		} );
 
 		it( 'should render value instead of initialPosition is provided', () => {
@@ -198,7 +207,7 @@ describe( 'RangeControl', () => {
 
 			const rangeInput = getRangeInput();
 
-			expect( rangeInput?.value ).toBe( '10' );
+			expect( rangeInput.value ).toBe( '10' );
 		} );
 
 		it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
@@ -216,19 +225,19 @@ describe( 'RangeControl', () => {
 			const resetButton = getResetButton();
 
 			// Value should be clamped on initial load
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 
 			fireChangeEvent( numberInput, '50' );
 
-			expect( numberInput?.value ).toBe( '50' );
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 
 			// Value should be clamped after resetting
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
 
-			expect( numberInput?.value ).toBe( '100' );
-			expect( rangeInput?.value ).toBe( '100' );
+			expect( numberInput.value ).toBe( '100' );
+			expect( rangeInput.value ).toBe( '100' );
 		} );
 	} );
 
@@ -255,8 +264,8 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			expect( rangeInput?.value ).toBe( '0' );
-			expect( numberInput?.value ).toBe( '0' );
+			expect( rangeInput.value ).toBe( '0' );
+			expect( numberInput.value ).toBe( '0' );
 		} );
 
 		it( 'should update both field and range on change', () => {
@@ -265,17 +274,17 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			rangeInput?.focus();
+			act( () => rangeInput.focus() );
 			fireChangeEvent( rangeInput, 13 );
 
-			expect( rangeInput?.value ).toBe( '13' );
-			expect( numberInput?.value ).toBe( '13' );
+			expect( rangeInput.value ).toBe( '13' );
+			expect( numberInput.value ).toBe( '13' );
 
-			numberInput?.focus();
+			act( () => numberInput.focus() );
 			fireChangeEvent( numberInput, 7 );
 
-			expect( rangeInput?.value ).toBe( '7' );
-			expect( numberInput?.value ).toBe( '7' );
+			expect( rangeInput.value ).toBe( '7' );
+			expect( numberInput.value ).toBe( '7' );
 		} );
 
 		it( 'should reset input values if next value is removed', () => {
@@ -285,24 +294,47 @@ describe( 'RangeControl', () => {
 			const numberInput = getNumberInput();
 
 			fireChangeEvent( numberInput, '' );
-			fireEvent.blur( numberInput as Element );
+			fireEvent.blur( numberInput );
 
 			// Reset to 50. Median value of min: 0, max: 100.
-			expect( rangeInput?.value ).toBe( '50' );
+			expect( rangeInput.value ).toBe( '50' );
 			// Input field should be blank.
-			expect( numberInput?.value ).toBe( '' );
+			expect( numberInput.value ).toBe( '' );
 		} );
 	} );
 
 	describe( 'reset', () => {
-		it( 'should reset to a custom fallback value, defined by a parent component', () => {
+		it( 'should clear the input value when clicking the reset button', () => {
+			const spy = jest.fn();
+			render( <RangeControl allowReset onChange={ spy } /> );
+
+			const resetButton = getResetButton();
+			const rangeInput = getRangeInput();
+			const numberInput = getNumberInput();
+
+			fireChangeEvent( numberInput, '14' );
+
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
+			fireEvent.click( resetButton );
+
+			// range input resets to min + (max-min)/2
+			expect( rangeInput.value ).toBe( '50' );
+			expect( numberInput.value ).toBe( '' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+
+		it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
 			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ 10 }
-					allowReset={ true }
+					allowReset
+					initialPosition={ 23 }
 					onChange={ spy }
-					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -310,21 +342,29 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireChangeEvent( numberInput, '14' );
 
-			expect( rangeInput?.value ).toBe( '33' );
-			expect( numberInput?.value ).toBe( '33' );
-			expect( spy ).toHaveBeenCalledWith( 33 );
+			expect( rangeInput.value ).toBe( '14' );
+			expect( numberInput.value ).toBe( '14' );
+			expect( spy ).toHaveBeenCalledWith( 14 );
+
+			fireEvent.click( resetButton );
+
+			expect( rangeInput.value ).toBe( '23' );
+			expect( numberInput.value ).toBe( '23' );
+			expect( spy ).toHaveBeenCalledWith( undefined );
+
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should reset to a 50% of min/max value, of no initialPosition or value is defined', () => {
+		it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
+			const spy = jest.fn();
 			render(
 				<RangeControl
-					initialPosition={ undefined }
-					min={ 0 }
-					max={ 100 }
-					allowReset={ true }
-					resetFallbackValue={ undefined }
+					initialPosition={ 10 }
+					allowReset
+					onChange={ spy }
+					resetFallbackValue={ 33 }
 				/>
 			);
 
@@ -332,10 +372,13 @@ describe( 'RangeControl', () => {
 			const rangeInput = getRangeInput();
 			const numberInput = getNumberInput();
 
-			fireEvent.click( resetButton as Element );
+			fireEvent.click( resetButton );
+
+			expect( rangeInput.value ).toBe( '33' );
+			expect( numberInput.value ).toBe( '33' );
+			expect( spy ).toHaveBeenCalledWith( 33 );
 
-			expect( rangeInput?.value ).toBe( '50' );
-			expect( numberInput?.value ).toBe( '' );
+			expect( resetButton ).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 	} );
 } );
diff --git a/packages/components/src/range-control/tooltip.tsx b/packages/components/src/range-control/tooltip.tsx
index 3c8403d1275c66..4156c026464347 100644
--- a/packages/components/src/range-control/tooltip.tsx
+++ b/packages/components/src/range-control/tooltip.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
 import { Tooltip } from './styles/range-control-styles';
 
 import type { TooltipProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function SimpleTooltip(
 	props: WordPressComponentProps< TooltipProps, 'span' >
@@ -31,7 +31,7 @@ export default function SimpleTooltip(
 		...restProps
 	} = props;
 	const position = useTooltipPosition( { inputRef, tooltipPosition } );
-	const classes = classnames( 'components-simple-tooltip', className );
+	const classes = clsx( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
 		zIndex,
@@ -40,7 +40,7 @@ export default function SimpleTooltip(
 	return (
 		<Tooltip
 			{ ...restProps }
-			aria-hidden={ show }
+			aria-hidden="false"
 			className={ classes }
 			position={ position }
 			show={ show }
diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts
index 721c5edf4c8bdb..e4792296f83144 100644
--- a/packages/components/src/range-control/types.ts
+++ b/packages/components/src/range-control/types.ts
@@ -74,7 +74,7 @@ export type RangeMarkProps = {
 
 export type ControlledRangeValue = number | '' | null;
 
-export type RangeControlProps< IconProps = unknown > = Pick<
+export type RangeControlProps = Pick<
 	BaseControlProps,
 	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
@@ -86,7 +86,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		afterIcon?: IconType< IconProps >;
+		afterIcon?: IconType;
 		/**
 		 * If this property is true, a button to reset the slider is
 		 * rendered.
@@ -101,11 +101,11 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		beforeIcon?: IconType< IconProps >;
+		beforeIcon?: IconType;
 		/**
 		 * CSS color string for the `RangeControl` wrapper.
 		 *
-		 * @default COLORS.ui.theme
+		 * @default COLORS.theme.accent
 		 * @see /packages/components/src/utils/colors-values.js
 		 */
 		color?: CSSProperties[ 'color' ];
@@ -203,6 +203,12 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * @default 10
 		 */
 		shiftStep?: number;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 		/**
 		 * Forcing the Tooltip UI to show or hide. This is overridden to `false`
 		 * when `step` is set to the special string value `any`.
@@ -227,6 +233,13 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * @default true
 		 */
 		withInputField?: boolean;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
 
 export type RailProps = MarksProps & {
diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts
index a80c8dffdffa1c..0bf0a4efaa3e0d 100644
--- a/packages/components/src/range-control/utils.ts
+++ b/packages/components/src/range-control/utils.ts
@@ -14,9 +14,9 @@ import type { UseControlledRangeValueArgs } from './types';
 /**
  * A float supported clamp function for a specific value.
  *
- * @param  value The value to clamp.
- * @param  min   The minimum value.
- * @param  max   The maximum value.
+ * @param value The value to clamp.
+ * @param min   The minimum value.
+ * @param max   The maximum value.
  *
  * @return A (float) number
  */
@@ -31,7 +31,7 @@ export function floatClamp( value: number | null, min: number, max: number ) {
 /**
  * Hook to store a clamped value, derived from props.
  *
- * @param  settings
+ * @param settings
  * @return The controlled value and the value setter.
  */
 export function useControlledRangeValue(
diff --git a/packages/components/src/resizable-box/README.md b/packages/components/src/resizable-box/README.md
index 3860c1d802ce10..c313ece517a835 100644
--- a/packages/components/src/resizable-box/README.md
+++ b/packages/components/src/resizable-box/README.md
@@ -38,8 +38,8 @@ const Edit = ( props ) => {
 			} }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
-					height: parseInt( height + delta.height, 10 ),
-					width: parseInt( width + delta.width, 10 ),
+					height: height + delta.height,
+					width: width + delta.width,
 				} );
 				toggleSelection( true );
 			} }
diff --git a/packages/components/src/resizable-box/index.tsx b/packages/components/src/resizable-box/index.tsx
index 19fab8eeec19cf..3bf3d36aa0d5c3 100644
--- a/packages/components/src/resizable-box/index.tsx
+++ b/packages/components/src/resizable-box/index.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ReactNode, ForwardedRef } from 'react';
@@ -21,45 +21,45 @@ const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
 
 const HANDLE_CLASSES = {
-	top: classnames(
+	top: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top'
 	),
-	right: classnames(
+	right: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-right'
 	),
-	bottom: classnames(
+	bottom: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom'
 	),
-	left: classnames(
+	left: clsx(
 		HANDLE_CLASS_NAME,
 		SIDE_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-left'
 	),
-	topLeft: classnames(
+	topLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-left'
 	),
-	topRight: classnames(
+	topRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-top',
 		'components-resizable-box__handle-right'
 	),
-	bottomRight: classnames(
+	bottomRight: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
 		'components-resizable-box__handle-right'
 	),
-	bottomLeft: classnames(
+	bottomLeft: clsx(
 		HANDLE_CLASS_NAME,
 		CORNER_HANDLE_CLASS_NAME,
 		'components-resizable-box__handle-bottom',
@@ -88,14 +88,13 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	className: string;
 	children: ReactNode;
-	showHandle: boolean;
-	__experimentalShowTooltip: boolean;
-	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+	showHandle?: boolean;
+	__experimentalShowTooltip?: boolean;
+	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];
 };
 
-function ResizableBox(
+function UnforwardedResizableBox(
 	{
 		className,
 		children,
@@ -108,11 +107,21 @@ function ResizableBox(
 ): JSX.Element {
 	return (
 		<Resizable
-			className={ classnames(
+			className={ clsx(
 				'components-resizable-box__container',
 				showHandle && 'has-show-handle',
 				className
 			) }
+			// Add a focusable element within the drag handle. Unfortunately,
+			// `re-resizable` does not make them properly focusable by default,
+			// causing focus to move the the block wrapper which triggers block
+			// drag.
+			handleComponent={ Object.fromEntries(
+				Object.keys( HANDLE_CLASSES ).map( ( key ) => [
+					key,
+					<div key={ key } tabIndex={ -1 } />,
+				] )
+			) }
 			handleClasses={ HANDLE_CLASSES }
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }
@@ -124,4 +133,6 @@ function ResizableBox(
 	);
 }
 
-export default forwardRef( ResizableBox );
+export const ResizableBox = forwardRef( UnforwardedResizableBox );
+
+export default ResizableBox;
diff --git a/packages/components/src/resizable-box/resize-tooltip/README.md b/packages/components/src/resizable-box/resize-tooltip/README.md
index 513ed0d9fa83ce..d041d76f6d27e1 100644
--- a/packages/components/src/resizable-box/resize-tooltip/README.md
+++ b/packages/components/src/resizable-box/resize-tooltip/README.md
@@ -24,11 +24,11 @@ Be sure that the parent element containing `<ResizeTooltip />` has the `position
 -   `bottom` (Default)
 -   `corner`
 
-##### `bottom`
+#### `bottom`
 
 The `bottom` position (default) renders the dimensions label at the bottom-center of the (parent) element.
 
-##### `corner`
+#### `corner`
 
 The `corner` position renders the dimensions label in the top-right corner of the (parent) element.
 
@@ -60,7 +60,7 @@ Determines if the label can render.
 
 ### labelRef
 
-Callback [Ref](https://reactjs.org/docs/forwarding-refs.html) for the label element.
+Callback [Ref](https://react.dev/learn/manipulating-the-dom-with-refs) for the label element.
 
 -   Type: `Function`
 -   Required: No
diff --git a/packages/components/src/resizable-box/resize-tooltip/index.tsx b/packages/components/src/resizable-box/resize-tooltip/index.tsx
index 53969a664a8635..edab3f8406798c 100644
--- a/packages/components/src/resizable-box/resize-tooltip/index.tsx
+++ b/packages/components/src/resizable-box/resize-tooltip/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { Ref, ForwardedRef } from 'react';
 
 /**
@@ -13,7 +13,8 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Label from './label';
-import { useResizeLabel, Axis, Position, POSITIONS } from './utils';
+import type { Axis, Position } from './utils';
+import { useResizeLabel, POSITIONS } from './utils';
 import { Root } from './styles/resize-tooltip.styles';
 
 type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
@@ -54,9 +55,11 @@ function ResizeTooltip(
 		position,
 	} );
 
-	if ( ! isVisible ) return null;
+	if ( ! isVisible ) {
+		return null;
+	}
 
-	const classes = classnames( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', className );
 
 	return (
 		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>
diff --git a/packages/components/src/resizable-box/resize-tooltip/label.tsx b/packages/components/src/resizable-box/resize-tooltip/label.tsx
index 8d1c91f13c8b50..6f3cb4c77a49b4 100644
--- a/packages/components/src/resizable-box/resize-tooltip/label.tsx
+++ b/packages/components/src/resizable-box/resize-tooltip/label.tsx
@@ -12,7 +12,8 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Position, POSITIONS } from './utils';
+import type { Position } from './utils';
+import { POSITIONS } from './utils';
 import {
 	TooltipWrapper,
 	Tooltip,
@@ -40,7 +41,9 @@ function Label(
 	const isBottom = position === POSITIONS.bottom;
 	const isCorner = position === POSITIONS.corner;
 
-	if ( ! showLabel ) return null;
+	if ( ! showLabel ) {
+		return null;
+	}
 
 	let style: React.CSSProperties = {
 		opacity: showLabel ? 1 : undefined,
diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
deleted file mode 100644
index 72390f834f51c8..00000000000000
--- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../../../text';
-import { COLORS } from '../../../utils';
-
-export const Root = styled.div`
-	bottom: 0;
-	box-sizing: border-box;
-	left: 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-`;
-
-export const TooltipWrapper = styled.div`
-	align-items: center;
-	box-sizing: border-box;
-	display: inline-flex;
-	justify-content: center;
-	opacity: 0;
-	pointer-events: none;
-	transition: opacity 120ms linear;
-`;
-
-export const Tooltip = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: 2px;
-	box-sizing: border-box;
-	font-size: 12px;
-	color: ${ COLORS.ui.textDark };
-	padding: 4px 8px;
-	position: relative;
-`;
-
-// TODO: Resolve need to use &&& to increase specificity
-// https://github.com/WordPress/gutenberg/issues/18483
-
-export const LabelText = styled( Text )`
-	&&& {
-		color: ${ COLORS.ui.textDark };
-		display: block;
-		font-size: 13px;
-		line-height: 1.4;
-		white-space: nowrap;
-	}
-`;
diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts
new file mode 100644
index 00000000000000..1cfc2f381f2c11
--- /dev/null
+++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../../../text';
+import { font, COLORS, CONFIG } from '../../../utils';
+
+export const Root = styled.div`
+	bottom: 0;
+	box-sizing: border-box;
+	left: 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	top: 0;
+`;
+
+export const TooltipWrapper = styled.div`
+	align-items: center;
+	box-sizing: border-box;
+	display: inline-flex;
+	justify-content: center;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+`;
+
+export const Tooltip = styled.div`
+	background: ${ COLORS.theme.foreground };
+	border-radius: ${ CONFIG.radiusSmall };
+	box-sizing: border-box;
+	font-family: ${ font( 'default.fontFamily' ) };
+	font-size: 12px;
+	color: ${ COLORS.theme.foregroundInverted };
+	padding: 4px 8px;
+	position: relative;
+`;
+
+// TODO: Resolve need to use &&& to increase specificity
+// https://github.com/WordPress/gutenberg/issues/18483
+
+export const LabelText = styled( Text )`
+	&&& {
+		color: ${ COLORS.theme.foregroundInverted };
+		display: block;
+		font-size: 13px;
+		line-height: 1.4;
+		white-space: nowrap;
+	}
+`;
diff --git a/packages/components/src/resizable-box/resize-tooltip/utils.ts b/packages/components/src/resizable-box/resize-tooltip/utils.ts
index 7c122c2ebd85ab..895f521c80ae22 100644
--- a/packages/components/src/resizable-box/resize-tooltip/utils.ts
+++ b/packages/components/src/resizable-box/resize-tooltip/utils.ts
@@ -13,7 +13,7 @@ export const POSITIONS = {
 	corner: 'corner',
 } as const;
 
-export type Position = typeof POSITIONS[ keyof typeof POSITIONS ];
+export type Position = ( typeof POSITIONS )[ keyof typeof POSITIONS ];
 
 interface UseResizeLabelProps {
 	/** The label value. */
@@ -25,7 +25,7 @@ interface UseResizeLabelProps {
 interface UseResizeLabelArgs {
 	axis?: Axis;
 	fadeTimeout: number;
-	onResize( data: { width: number | null; height: number | null } ): void;
+	onResize: ( data: { width: number | null; height: number | null } ) => void;
 	position: Position;
 	showPx: boolean;
 }
@@ -34,12 +34,12 @@ interface UseResizeLabelArgs {
  * Custom hook that manages resize listener events. It also provides a label
  * based on current resize width x height values.
  *
- * @param  props
- * @param  props.axis        Only shows the label corresponding to the axis.
- * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.
- * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.
- * @param  props.position    Adjusts label value.
- * @param  props.showPx      Whether to add `PX` to the label.
+ * @param props
+ * @param props.axis        Only shows the label corresponding to the axis.
+ * @param props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param props.position    Adjusts label value.
+ * @param props.showPx      Whether to add `PX` to the label.
  *
  * @return Properties for hook.
  */
@@ -90,7 +90,9 @@ export function useResizeLabel( {
 			 * If axis is controlled, we will avoid resetting the moveX and moveY values.
 			 * This will allow for the preferred axis values to persist in the label.
 			 */
-			if ( isAxisControlled ) return;
+			if ( isAxisControlled ) {
+				return;
+			}
 			setMoveX( false );
 			setMoveY( false );
 		};
@@ -109,12 +111,16 @@ export function useResizeLabel( {
 		 */
 		const isRendered = width !== null || height !== null;
 
-		if ( ! isRendered ) return;
+		if ( ! isRendered ) {
+			return;
+		}
 
 		const didWidthChange = width !== widthRef.current;
 		const didHeightChange = height !== heightRef.current;
 
-		if ( ! didWidthChange && ! didHeightChange ) return;
+		if ( ! didWidthChange && ! didHeightChange ) {
+			return;
+		}
 
 		/*
 		 * After the initial render, the useResizeAware will set the first
@@ -174,14 +180,14 @@ interface GetSizeLabelArgs {
 /**
  * Gets the resize label based on width and height values (as well as recent changes).
  *
- * @param  props
- * @param  props.axis     Only shows the label corresponding to the axis.
- * @param  props.height   Height value.
- * @param  props.moveX    Recent width (x axis) changes.
- * @param  props.moveY    Recent width (y axis) changes.
- * @param  props.position Adjusts label value.
- * @param  props.showPx   Whether to add `PX` to the label.
- * @param  props.width    Width value.
+ * @param props
+ * @param props.axis     Only shows the label corresponding to the axis.
+ * @param props.height   Height value.
+ * @param props.moveX    Recent width (x axis) changes.
+ * @param props.moveY    Recent width (y axis) changes.
+ * @param props.position Adjusts label value.
+ * @param props.showPx   Whether to add `PX` to the label.
+ * @param props.width    Width value.
  *
  * @return The rendered label.
  */
@@ -194,7 +200,9 @@ function getSizeLabel( {
 	showPx = false,
 	width,
 }: GetSizeLabelArgs ): string | undefined {
-	if ( ! moveX && ! moveY ) return undefined;
+	if ( ! moveX && ! moveY ) {
+		return undefined;
+	}
 
 	/*
 	 * Corner position...
diff --git a/packages/components/src/resizable-box/stories/index.js b/packages/components/src/resizable-box/stories/index.js
deleted file mode 100644
index 44f4a5f5fa6331..00000000000000
--- a/packages/components/src/resizable-box/stories/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ResizableBox from '../';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default {
-	title: 'Components/ResizableBox',
-	component: ResizableBox,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Example = ( props ) => {
-	const [ attributes, setAttributes ] = useState( {
-		height: 200,
-		width: 400,
-	} );
-	const { height, width } = attributes;
-	const { children, ...restProps } = props;
-
-	return (
-		<div style={ { margin: 30 } }>
-			<ResizableBox
-				{ ...restProps }
-				size={ {
-					height,
-					width,
-				} }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						height: parseInt( height + delta.height, 10 ),
-						width: parseInt( width + delta.width, 10 ),
-					} );
-				} }
-			>
-				{ children }
-			</ResizableBox>
-		</div>
-	);
-};
-
-export const _default = () => {
-	const content = text( 'Example: Content', 'Resize' );
-	const showHandle = boolean( 'showHandle', true );
-	const minHeight = number( 'minHeight', 50 );
-	const minWidth = number( 'minWidth', 50 );
-	const enable = {
-		top: boolean( 'enable.top', false ),
-		right: boolean( 'enable.right', true ),
-		bottom: boolean( 'enable.bottom', true ),
-		left: boolean( 'enable.left', false ),
-		topRight: boolean( 'enable.topRight', false ),
-		bottomRight: boolean( 'enable.bottomRight', true ),
-		bottomLeft: boolean( 'enable.bottomLeft', false ),
-		topLeft: boolean( 'enable.topLeft', false ),
-	};
-	const __experimentalShowTooltip = boolean(
-		'__experimentalShowTooltip',
-		false
-	);
-
-	const props = {
-		enable,
-		minHeight,
-		minWidth,
-		showHandle,
-		__experimentalShowTooltip,
-	};
-
-	return (
-		<Example { ...props }>
-			<div
-				style={ {
-					background: '#eee',
-					display: 'flex',
-					height: '100%',
-					width: '100%',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<span>{ content }</span>
-			</div>
-		</Example>
-	);
-};
diff --git a/packages/components/src/resizable-box/stories/index.story.tsx b/packages/components/src/resizable-box/stories/index.story.tsx
new file mode 100644
index 00000000000000..aa5b080d00b51e
--- /dev/null
+++ b/packages/components/src/resizable-box/stories/index.story.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResizableBox from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const meta: Meta< typeof ResizableBox > = {
+	title: 'Components/Utilities/ResizableBox',
+	id: 'components-resizablebox',
+	component: ResizableBox,
+	argTypes: {
+		children: { control: false },
+		enable: { control: 'object' },
+		onResizeStop: { action: 'onResizeStop' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ResizableBox > = ( {
+	onResizeStop,
+	...props
+} ) => {
+	const [ { height, width }, setAttributes ] = useState( {
+		height: 200,
+		width: 400,
+	} );
+
+	return (
+		<ResizableBox
+			{ ...props }
+			size={ {
+				height,
+				width,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				onResizeStop?.( event, direction, elt, delta );
+				setAttributes( {
+					height: height + delta.height,
+					width: width + delta.width,
+				} );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<div
+			style={ {
+				background: '#eee',
+				display: 'flex',
+				height: '100%',
+				width: '100%',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			Resize
+		</div>
+	),
+};
+
+/**
+ * The `enable` prop can be used to disable resizing in specific directions.
+ */
+export const DisabledDirections = Template.bind( {} );
+DisabledDirections.args = {
+	...Default.args,
+	enable: {
+		top: false,
+		right: true,
+		bottom: true,
+		left: false,
+		topRight: false,
+		bottomRight: true,
+		bottomLeft: false,
+		topLeft: false,
+	},
+};
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 6badc505b799a6..4db3d27b5fab6b 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -15,6 +15,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
+
+	> div {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: z-index(".components-resizable-box__handle");
+		outline: none;
+	}
 }
 
 // Make the image inside the resize to get the full width
@@ -28,14 +36,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	content: "";
 	width: $resize-handler-size;
 	height: $resize-handler-size;
-	border-radius: 50%;
+	border-radius: $radius-round;
 	background: $white;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
@@ -43,7 +51,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 // This is the "visible" resize handle for side handles - the line
 .components-resizable-box__side-handle::before {
 	display: block;
-	border-radius: 2px;
+	border-radius: $radius-full;
 	content: "";
 	width: 3px;
 	height: 3px;
@@ -54,6 +62,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	right: calc(50% - 1px);
 	transition: transform 0.1s ease-in;
 	@include reduce-motion("transition");
+	will-change: transform;
 	opacity: 0;
 }
 
diff --git a/packages/components/src/responsive-wrapper/README.md b/packages/components/src/responsive-wrapper/README.md
index 990161de2a99d6..31acf65932d4e6 100644
--- a/packages/components/src/responsive-wrapper/README.md
+++ b/packages/components/src/responsive-wrapper/README.md
@@ -1,5 +1,7 @@
 # ResponsiveWrapper
 
+A wrapper component that maintains its aspect ratio when resized.
+
 ## Usage
 
 ```jsx
@@ -14,3 +16,36 @@ const MyResponsiveWrapper = () => (
 	</ResponsiveWrapper>
 );
 ```
+
+### Usage with `SVG` elements
+
+When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make sure that it has the `viewbox` and the `preserveAspectRatio` set.
+
+When dealing with SVGs, it may not be possible to derive its `naturalWidth` and `naturalHeight` and therefore passing them as propertied to `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill its container, unless the `height` and `width` attributes are specified.
+
+## Props
+
+### `children`: `React.ReactElement`
+
+The element to wrap.
+
+-   Required: Yes
+
+### `isInline`: `boolean`
+
+If true, the wrapper will be `span` instead of `div`.
+
+-   Required: No
+-   Default: `false`
+
+### `naturalHeight`: `number`
+
+The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: No
+
+### `naturalWidth`: `number`
+
+The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: No
diff --git a/packages/components/src/responsive-wrapper/index.js b/packages/components/src/responsive-wrapper/index.js
deleted file mode 100644
index 6f3de4bacd8be3..00000000000000
--- a/packages/components/src/responsive-wrapper/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { cloneElement, Children } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-
-function ResponsiveWrapper( {
-	naturalWidth,
-	naturalHeight,
-	children,
-	isInline = false,
-} ) {
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
-	if ( Children.count( children ) !== 1 ) {
-		return null;
-	}
-	const imageStyle = {
-		paddingBottom:
-			naturalWidth < containerWidth
-				? naturalHeight
-				: ( naturalHeight / naturalWidth ) * 100 + '%',
-	};
-	const TagName = isInline ? 'span' : 'div';
-	return (
-		<TagName className="components-responsive-wrapper">
-			{ containerResizeListener }
-			<TagName style={ imageStyle } />
-			{ cloneElement( children, {
-				className: classnames(
-					'components-responsive-wrapper__content',
-					children.props.className
-				),
-			} ) }
-		</TagName>
-	);
-}
-
-export default ResponsiveWrapper;
diff --git a/packages/components/src/responsive-wrapper/index.tsx b/packages/components/src/responsive-wrapper/index.tsx
new file mode 100644
index 00000000000000..98e0493ad3e833
--- /dev/null
+++ b/packages/components/src/responsive-wrapper/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { cloneElement, Children } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveWrapperProps } from './types';
+
+/**
+ * A wrapper component that maintains its aspect ratio when resized.
+ *
+ * ```jsx
+ * import { ResponsiveWrapper } from '@wordpress/components';
+ *
+ * const MyResponsiveWrapper = () => (
+ * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
+ * 		<img
+ * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+ * 			alt="WordPress"
+ * 		/>
+ * 	</ResponsiveWrapper>
+ * );
+ * ```
+ */
+function ResponsiveWrapper( {
+	naturalWidth,
+	naturalHeight,
+	children,
+	isInline = false,
+}: ResponsiveWrapperProps ) {
+	if ( Children.count( children ) !== 1 ) {
+		return null;
+	}
+
+	const TagName = isInline ? 'span' : 'div';
+	let aspectRatio;
+	if ( naturalWidth && naturalHeight ) {
+		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
+	}
+
+	return (
+		<TagName className="components-responsive-wrapper">
+			<div>
+				{ cloneElement( children, {
+					className: clsx(
+						'components-responsive-wrapper__content',
+						children.props.className
+					),
+					style: {
+						...children.props.style,
+						aspectRatio,
+					},
+				} ) }
+			</div>
+		</TagName>
+	);
+}
+
+export default ResponsiveWrapper;
diff --git a/packages/components/src/responsive-wrapper/stories/index.story.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx
new file mode 100644
index 00000000000000..5a834b999b715b
--- /dev/null
+++ b/packages/components/src/responsive-wrapper/stories/index.story.tsx
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '..';
+
+const meta: Meta< typeof ResponsiveWrapper > = {
+	component: ResponsiveWrapper,
+	title: 'Components/Layout/ResponsiveWrapper',
+	id: 'components-responsivewrapper',
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ResponsiveWrapper > = ( args ) => (
+	<ResponsiveWrapper { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	naturalWidth: 2000,
+	naturalHeight: 680,
+	children: (
+		<img
+			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+			alt="WordPress"
+		/>
+	),
+};
+
+/**
+ * When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make
+ * sure that it has the `viewbox` and the `preserveAspectRatio` set.
+ *
+ * When dealing with SVGs, it may not be possible to derive its `naturalWidth`
+ * and `naturalHeight` and therefore passing them as propertied to
+ * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
+ * its container, unless the `height` and `width` attributes are specified.
+ */
+export const WithSVG: StoryFn< typeof ResponsiveWrapper > = Template.bind( {} );
+WithSVG.args = {
+	children: (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 280 640"
+			preserveAspectRatio="xMinYMin meet"
+			width="280px"
+			height="640px"
+		>
+			<rect
+				x="0"
+				y="0"
+				width="280"
+				height="640"
+				style={ { fill: 'blue' } }
+			/>
+			<g>
+				<circle style={ { fill: 'red' } } cx="140" cy="160" r="60" />
+				<circle style={ { fill: 'yellow' } } cx="140" cy="320" r="60" />
+				<circle
+					style={ { fill: '#40CC40' } }
+					cx="140"
+					cy="480"
+					r="60"
+				/>
+			</g>
+		</svg>
+	),
+};
diff --git a/packages/components/src/responsive-wrapper/style.scss b/packages/components/src/responsive-wrapper/style.scss
index b6a556bf3425d0..d32fed8cd48406 100644
--- a/packages/components/src/responsive-wrapper/style.scss
+++ b/packages/components/src/responsive-wrapper/style.scss
@@ -1,19 +1,13 @@
 .components-responsive-wrapper {
 	position: relative;
 	max-width: 100%;
-	&,
-	& > span {
-		display: block;
-	}
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .components-responsive-wrapper__content {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	display: block;
+	max-width: 100%;
 	width: 100%;
-	height: 100%;
-	margin: auto;
 }
diff --git a/packages/components/src/responsive-wrapper/types.ts b/packages/components/src/responsive-wrapper/types.ts
new file mode 100644
index 00000000000000..7f76ff8af5a552
--- /dev/null
+++ b/packages/components/src/responsive-wrapper/types.ts
@@ -0,0 +1,20 @@
+export type ResponsiveWrapperProps = {
+	/**
+	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalWidth?: number;
+	/**
+	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalHeight?: number;
+	/**
+	 * The element to wrap.
+	 */
+	children: React.ReactElement;
+	/**
+	 * If true, the wrapper will be `span` instead of `div`.
+	 *
+	 * @default false
+	 */
+	isInline?: boolean;
+};
diff --git a/packages/components/src/sandbox/README.md b/packages/components/src/sandbox/README.md
index ee3e124cae22e7..33d78454aaacdf 100644
--- a/packages/components/src/sandbox/README.md
+++ b/packages/components/src/sandbox/README.md
@@ -1,4 +1,4 @@
-# Sandbox
+# SandBox
 
 This component provides an isolated environment for arbitrary HTML via iframes.
 
@@ -8,6 +8,55 @@ This component provides an isolated environment for arbitrary HTML via iframes.
 import { SandBox } from '@wordpress/components';
 
 const MySandBox = () => (
-	<SandBox html="<p>Content</p>" title="Sandbox" type="embed" />
+	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
 );
 ```
+
+## Props
+
+### `html`: `string`
+
+The HTML to render in the body of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `onFocus`: `React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ]`
+
+The `onFocus` callback for the iframe.
+
+-   Required: No
+
+### `scripts`: `string[]`
+
+An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `styles`: `string[]`
+
+An array of CSS strings to inject into the `<head>` of the iframe document.
+
+-   Required: No
+-   Default: []
+
+### `title`: `string`
+
+The `<title>` of the iframe document.
+
+-   Required: No
+-   Default: ""
+
+### `type`: `string`
+
+The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+
+-   Required: No
+-   Default: ""
+
+### `tabIndex`: `HTMLElement[ 'tabIndex' ]`
+
+The `tabindex` the iframe should receive.
+
+-   Required: No
diff --git a/packages/components/src/sandbox/index.js b/packages/components/src/sandbox/index.js
deleted file mode 100644
index ec7549bbd26243..00000000000000
--- a/packages/components/src/sandbox/index.js
+++ /dev/null
@@ -1,268 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	renderToString,
-	useRef,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
-
-const observeAndResizeJS = function () {
-	const { MutationObserver } = window;
-
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
-
-	function sendResize() {
-		const clientBoundingRect = document.body.getBoundingClientRect();
-
-		window.parent.postMessage(
-			{
-				action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			},
-			'*'
-		);
-	}
-
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
-
-	window.addEventListener( 'load', sendResize, true );
-
-	// Hack: Remove viewport unit styles, as these are relative
-	// the iframe root and interfere with our mechanism for
-	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode ) {
-		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
-				if (
-					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
-				) {
-					ruleOrNode.style[ style ] = '';
-				}
-			} );
-		}
-	}
-
-	Array.prototype.forEach.call(
-		document.querySelectorAll( '[style]' ),
-		removeViewportStyles
-	);
-	Array.prototype.forEach.call(
-		document.styleSheets,
-		function ( stylesheet ) {
-			Array.prototype.forEach.call(
-				stylesheet.cssRules || stylesheet.rules,
-				removeViewportStyles
-			);
-		}
-	);
-
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
-
-	sendResize();
-
-	// Resize events can change the width of elements with 100% width, but we don't
-	// get an DOM mutations for that, so do the resize when the window is resized, too.
-	window.addEventListener( 'resize', sendResize, true );
-};
-
-const style = `
-	body {
-		margin: 0;
-	}
-	html,
-	body,
-	body > div {
-		width: 100%;
-	}
-	html.wp-has-aspect-ratio,
-	body.wp-has-aspect-ratio,
-	body.wp-has-aspect-ratio > div,
-	body.wp-has-aspect-ratio > div iframe {
-		width: 100%;
-		height: 100%;
-		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
-	}
-	body > div > * {
-		margin-top: 0 !important; /* Has to have !important to override inline styles. */
-		margin-bottom: 0 !important;
-	}
-`;
-
-export default function Sandbox( {
-	html = '',
-	title = '',
-	type,
-	styles = [],
-	scripts = [],
-	onFocus,
-} ) {
-	const ref = useRef();
-	const [ width, setWidth ] = useState( 0 );
-	const [ height, setHeight ] = useState( 0 );
-
-	function isFrameAccessible() {
-		try {
-			return !! ref.current.contentDocument.body;
-		} catch ( e ) {
-			return false;
-		}
-	}
-
-	function trySandbox( forceRerender = false ) {
-		if ( ! isFrameAccessible() ) {
-			return;
-		}
-
-		const { contentDocument, ownerDocument } = ref.current;
-		const { body } = contentDocument;
-
-		if (
-			! forceRerender &&
-			null !== body.getAttribute( 'data-resizable-iframe-connected' )
-		) {
-			return;
-		}
-
-		// Put the html snippet into a html document, and then write it to the iframe's document
-		// we can use this in the future to inject custom styles or scripts.
-		// Scripts go into the body rather than the head, to support embedded content such as Instagram
-		// that expect the scripts to be part of the body.
-		const htmlDoc = (
-			<html
-				lang={ ownerDocument.documentElement.lang }
-				className={ type }
-			>
-				<head>
-					<title>{ title }</title>
-					<style dangerouslySetInnerHTML={ { __html: style } } />
-					{ styles.map( ( rules, i ) => (
-						<style
-							key={ i }
-							dangerouslySetInnerHTML={ { __html: rules } }
-						/>
-					) ) }
-				</head>
-				<body
-					data-resizable-iframe-connected="data-resizable-iframe-connected"
-					className={ type }
-				>
-					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html: `(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
-					{ scripts.map( ( src ) => (
-						<script key={ src } src={ src } />
-					) ) }
-				</body>
-			</html>
-		);
-
-		// Writing the document like this makes it act in the same way as if it was
-		// loaded over the network, so DOM creation and mutation, script execution, etc.
-		// all work as expected.
-		contentDocument.open();
-		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
-		contentDocument.close();
-	}
-
-	useEffect( () => {
-		trySandbox();
-
-		function tryNoForceSandbox() {
-			trySandbox( false );
-		}
-
-		function checkMessageForResize( event ) {
-			const iframe = ref.current;
-
-			// Verify that the mounted element is the source of the message.
-			if ( ! iframe || iframe.contentWindow !== event.source ) {
-				return;
-			}
-
-			// Attempt to parse the message data as JSON if passed as string.
-			let data = event.data || {};
-
-			if ( 'string' === typeof data ) {
-				try {
-					data = JSON.parse( data );
-				} catch ( e ) {}
-			}
-
-			// Update the state only if the message is formatted as we expect,
-			// i.e. as an object with a 'resize' action.
-			if ( 'resize' !== data.action ) {
-				return;
-			}
-
-			setWidth( data.width );
-			setHeight( data.height );
-		}
-
-		const iframe = ref.current;
-		const { ownerDocument } = iframe;
-		const { defaultView } = ownerDocument;
-
-		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
-		// after reordering the containing block. See these two issues for more details:
-		// https://github.com/WordPress/gutenberg/issues/6146
-		// https://github.com/facebook/react/issues/18752
-		iframe.addEventListener( 'load', tryNoForceSandbox, false );
-		defaultView.addEventListener( 'message', checkMessageForResize );
-
-		return () => {
-			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
-			defaultView.addEventListener( 'message', checkMessageForResize );
-		};
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	useEffect( () => {
-		trySandbox();
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ title, styles, scripts ] );
-
-	useEffect( () => {
-		trySandbox( true );
-		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
-		// See https://github.com/WordPress/gutenberg/pull/44378
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ html, type ] );
-
-	return (
-		<iframe
-			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
-			title={ title }
-			className="components-sandbox"
-			sandbox="allow-scripts allow-same-origin allow-presentation"
-			onFocus={ onFocus }
-			width={ Math.ceil( width ) }
-			height={ Math.ceil( height ) }
-		/>
-	);
-}
diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js
index 173a81efaaac2c..72070bf6efcd08 100644
--- a/packages/components/src/sandbox/index.native.js
+++ b/packages/components/src/sandbox/index.native.js
@@ -14,6 +14,8 @@ import {
 	useRef,
 	useState,
 	useEffect,
+	forwardRef,
+	useCallback,
 } from '@wordpress/element';
 import { usePreferredColorScheme } from '@wordpress/compose';
 
@@ -22,85 +24,84 @@ import { usePreferredColorScheme } from '@wordpress/compose';
  */
 import sandboxStyles from './style.scss';
 
-const observeAndResizeJS = function () {
-	// Hermes requires a special directive to preserve the original source code
-	// when using `Function.prototype.toString()` below.
-	// https://github.com/facebook/hermes/issues/114#issuecomment-887106990
-	'show source';
-	const { MutationObserver } = window;
+const observeAndResizeJS = `
+	(function() {
+		const { MutationObserver } = window;
 
-	if ( ! MutationObserver || ! document.body || ! window.parent ) {
-		return;
-	}
-
-	function sendResize() {
-		const clientBoundingRect = document.body.getBoundingClientRect();
-
-		// The function postMessage is exposed by the react-native-webview library
-		// to communicate between React Native and the WebView, in this case,
-		// we use it for notifying resize changes.
-		window.ReactNativeWebView.postMessage(
-			JSON.stringify( {
-				action: 'resize',
-				width: clientBoundingRect.width,
-				height: clientBoundingRect.height,
-			} )
-		);
-	}
+		if ( ! MutationObserver || ! document.body || ! window.parent ) {
+			return;
+		}
 
-	const observer = new MutationObserver( sendResize );
-	observer.observe( document.body, {
-		attributes: true,
-		attributeOldValue: false,
-		characterData: true,
-		characterDataOldValue: false,
-		childList: true,
-		subtree: true,
-	} );
+		function sendResize() {
+			const clientBoundingRect = document.body.getBoundingClientRect();
+
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
+			// we use it for notifying resize changes.
+			window.ReactNativeWebView.postMessage(
+				JSON.stringify( {
+					action: 'resize',
+					width: clientBoundingRect.width,
+					height: clientBoundingRect.height,
+				} )
+			);
+		}
 
-	window.addEventListener( 'load', sendResize, true );
-
-	// Hack: Remove viewport unit styles, as these are relative
-	// the iframe root and interfere with our mechanism for
-	// determining the unconstrained page bounds.
-	function removeViewportStyles( ruleOrNode ) {
-		if ( ruleOrNode.style ) {
-			[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
-				style
-			) {
-				if (
-					/^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] )
+		const observer = new MutationObserver( sendResize );
+		observer.observe( document.body, {
+			attributes: true,
+			attributeOldValue: false,
+			characterData: true,
+			characterDataOldValue: false,
+			childList: true,
+			subtree: true,
+		} );
+
+		window.addEventListener( 'load', sendResize, true );
+
+		// Hack: Remove viewport unit styles, as these are relative
+		// the iframe root and interfere with our mechanism for
+		// determining the unconstrained page bounds.
+		function removeViewportStyles( ruleOrNode ) {
+			if ( ruleOrNode.style ) {
+				[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function (
+					style
 				) {
-					ruleOrNode.style[ style ] = '';
-				}
-			} );
+					if (
+						/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test( ruleOrNode.style[ style ] )
+					) {
+						ruleOrNode.style[ style ] = '';
+					}
+				} );
+			}
 		}
-	}
 
-	Array.prototype.forEach.call(
-		document.querySelectorAll( '[style]' ),
-		removeViewportStyles
-	);
-	Array.prototype.forEach.call(
-		document.styleSheets,
-		function ( stylesheet ) {
-			Array.prototype.forEach.call(
-				stylesheet.cssRules || stylesheet.rules,
-				removeViewportStyles
-			);
-		}
-	);
+		Array.prototype.forEach.call(
+			document.querySelectorAll( '[style]' ),
+			removeViewportStyles
+		);
+		Array.prototype.forEach.call(
+			document.styleSheets,
+			function ( stylesheet ) {
+				Array.prototype.forEach.call(
+					stylesheet.cssRules || stylesheet.rules,
+					removeViewportStyles
+				);
+			}
+		);
 
-	document.body.style.position = 'absolute';
-	document.body.style.width = '100%';
-	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+		document.body.style.position = 'absolute';
+		document.body.style.width = '100%';
+		document.body.setAttribute( 'data-resizable-iframe-connected', '' );
 
-	sendResize();
+		sendResize();
 
-	// Resize events can change the width of elements with 100% width, but we don't
-	// get an DOM mutations for that, so do the resize when the window is resized, too.
-	window.addEventListener( 'resize', sendResize, true );
-};
+		// Resize events can change the width of elements with 100% width, but we don't
+		// get an DOM mutations for that, so do the resize when the window is resized, too.
+		window.addEventListener( 'resize', sendResize, true );
+		window.addEventListener( 'orientationchange', sendResize, true );
+	})();
+`;
 
 const style = `
 	body {
@@ -171,20 +172,26 @@ const style = `
 
 const EMPTY_ARRAY = [];
 
-function Sandbox( {
-	containerStyle,
-	customJS,
-	html = '',
-	lang = 'en',
-	providerUrl = '',
-	scripts = EMPTY_ARRAY,
-	styles = EMPTY_ARRAY,
-	title = '',
-	type,
-	url,
-} ) {
+const Sandbox = forwardRef( function Sandbox(
+	{
+		containerStyle,
+		customJS,
+		html = '',
+		lang = 'en',
+		providerUrl = '',
+		scripts = EMPTY_ARRAY,
+		styles = EMPTY_ARRAY,
+		title = '',
+		type,
+		url,
+		onWindowEvents = {},
+		viewportProps = '',
+		onLoadEnd = () => {},
+		testID,
+	},
+	ref
+) {
 	const colorScheme = usePreferredColorScheme();
-	const ref = useRef();
 	const [ height, setHeight ] = useState( 0 );
 	const [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );
 
@@ -209,13 +216,19 @@ function Sandbox( {
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram
 		// that expect the scripts to be part of the body.
+
+		// Avoid comma issues with props.viewportProps.
+		const addViewportProps = viewportProps
+			.trim()
+			.replace( /(^[^,])/, ', $1' );
+
 		const htmlDoc = (
 			<html lang={ lang }>
 				<head>
 					<title>{ title }</title>
 					<meta
 						name="viewport"
-						content="width=device-width, initial-scale=1"
+						content={ `width=device-width, initial-scale=1${ addViewportProps }` }
 					></meta>
 					<style dangerouslySetInnerHTML={ { __html: style } } />
 					{ styles.map( ( rules, i ) => (
@@ -230,14 +243,6 @@ function Sandbox( {
 					className={ type }
 				>
 					<div dangerouslySetInnerHTML={ { __html: html } } />
-					<script
-						type="text/javascript"
-						dangerouslySetInnerHTML={ {
-							__html:
-								customJS ||
-								`(${ observeAndResizeJS.toString() })();`,
-						} }
-					/>
 					{ scripts.map( ( src ) => (
 						<script key={ src } src={ src } />
 					) ) }
@@ -247,6 +252,21 @@ function Sandbox( {
 		return '<!DOCTYPE html>' + renderToString( htmlDoc );
 	}
 
+	const getInjectedJavaScript = useCallback( () => {
+		// Allow parent to override the resize observers with prop.customJS (legacy support)
+		let injectedJS = customJS || observeAndResizeJS;
+
+		// Add any event listeners that were passed in.
+		Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+			injectedJS += `
+				window.addEventListener( '${ eventType }', function( event ) {
+					window.ReactNativeWebView.postMessage( JSON.stringify( { type: '${ eventType }', ...event.data } ) );
+				});`;
+		} );
+
+		return injectedJS;
+	}, [ customJS, onWindowEvents ] );
+
 	function updateContentHtml( forceRerender = false ) {
 		const newContentHtml = getHtmlDoc();
 
@@ -261,25 +281,6 @@ function Sandbox( {
 		}
 	}
 
-	function checkMessageForResize( event ) {
-		// Attempt to parse the message data as JSON if passed as string.
-		let data = event.nativeEvent.data || {};
-
-		if ( 'string' === typeof data ) {
-			try {
-				data = JSON.parse( data );
-			} catch ( e ) {}
-		}
-
-		// Update the state only if the message is formatted as we expect,
-		// i.e. as an object with a 'resize' action.
-		if ( 'resize' !== data.action ) {
-			return;
-		}
-
-		setHeight( data.height );
-	}
-
 	function getSizeStyle() {
 		const contentHeight = Math.ceil( height );
 
@@ -290,6 +291,39 @@ function Sandbox( {
 		setIsLandscape( dimensions.window.width >= dimensions.window.height );
 	}
 
+	const onMessage = useCallback(
+		( message ) => {
+			let data = message?.nativeEvent?.data;
+
+			try {
+				data = JSON.parse( data );
+			} catch ( e ) {
+				return;
+			}
+
+			// check for resize event
+			if ( 'resize' === data?.action ) {
+				setHeight( data.height );
+			}
+
+			// Forward the event to parent event listeners
+			Object.keys( onWindowEvents ).forEach( ( eventType ) => {
+				if ( data?.type === eventType ) {
+					try {
+						onWindowEvents[ eventType ]( data );
+					} catch ( e ) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`Error handling event ${ eventType }`,
+							e
+						);
+					}
+				}
+			} );
+		},
+		[ onWindowEvents ]
+	);
+
 	useEffect( () => {
 		const dimensionsChangeSubscription = Dimensions.addEventListener(
 			'change',
@@ -302,9 +336,7 @@ function Sandbox( {
 
 	useEffect( () => {
 		updateContentHtml();
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {
@@ -322,6 +354,7 @@ function Sandbox( {
 				sandboxStyles[ 'sandbox-webview__container' ],
 				containerStyle,
 			] }
+			injectedJavaScript={ getInjectedJavaScript() }
 			key={ key }
 			ref={ ref }
 			source={ { baseUrl: providerUrl, html: contentHtml } }
@@ -333,14 +366,17 @@ function Sandbox( {
 				getSizeStyle(),
 				Platform.isAndroid && workaroundStyles.webView,
 			] }
-			onMessage={ checkMessageForResize }
+			onMessage={ onMessage }
 			scrollEnabled={ false }
 			setBuiltInZoomControls={ false }
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
+			mediaPlaybackRequiresUserAction={ false }
+			onLoadEnd={ onLoadEnd }
+			testID={ testID }
 		/>
 	);
-}
+} );
 
 const workaroundStyles = StyleSheet.create( {
 	webView: {
diff --git a/packages/components/src/sandbox/index.tsx b/packages/components/src/sandbox/index.tsx
new file mode 100644
index 00000000000000..5288fea3f7e43e
--- /dev/null
+++ b/packages/components/src/sandbox/index.tsx
@@ -0,0 +1,295 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	renderToString,
+	useRef,
+	useState,
+	useEffect,
+} from '@wordpress/element';
+import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { SandBoxProps } from './types';
+
+const observeAndResizeJS = function () {
+	const { MutationObserver } = window;
+
+	if ( ! MutationObserver || ! document.body || ! window.parent ) {
+		return;
+	}
+
+	function sendResize() {
+		const clientBoundingRect = document.body.getBoundingClientRect();
+
+		window.parent.postMessage(
+			{
+				action: 'resize',
+				width: clientBoundingRect.width,
+				height: clientBoundingRect.height,
+			},
+			'*'
+		);
+	}
+
+	const observer = new MutationObserver( sendResize );
+	observer.observe( document.body, {
+		attributes: true,
+		attributeOldValue: false,
+		characterData: true,
+		characterDataOldValue: false,
+		childList: true,
+		subtree: true,
+	} );
+
+	window.addEventListener( 'load', sendResize, true );
+
+	// Hack: Remove viewport unit styles, as these are relative
+	// the iframe root and interfere with our mechanism for
+	// determining the unconstrained page bounds.
+	function removeViewportStyles( ruleOrNode: ElementCSSInlineStyle ) {
+		if ( ruleOrNode.style ) {
+			(
+				[ 'width', 'height', 'minHeight', 'maxHeight' ] as const
+			 ).forEach( function ( style ) {
+				if (
+					/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/.test(
+						ruleOrNode.style[ style ]
+					)
+				) {
+					ruleOrNode.style[ style ] = '';
+				}
+			} );
+		}
+	}
+
+	Array.prototype.forEach.call(
+		document.querySelectorAll( '[style]' ),
+		removeViewportStyles
+	);
+	Array.prototype.forEach.call(
+		document.styleSheets,
+		function ( stylesheet ) {
+			Array.prototype.forEach.call(
+				stylesheet.cssRules || stylesheet.rules,
+				removeViewportStyles
+			);
+		}
+	);
+
+	document.body.style.position = 'absolute';
+	document.body.style.width = '100%';
+	document.body.setAttribute( 'data-resizable-iframe-connected', '' );
+
+	sendResize();
+
+	// Resize events can change the width of elements with 100% width, but we don't
+	// get an DOM mutations for that, so do the resize when the window is resized, too.
+	window.addEventListener( 'resize', sendResize, true );
+};
+
+// TODO: These styles shouldn't be coupled with WordPress.
+const style = `
+	body {
+		margin: 0;
+	}
+	html,
+	body,
+	body > div {
+		width: 100%;
+	}
+	html.wp-has-aspect-ratio,
+	body.wp-has-aspect-ratio,
+	body.wp-has-aspect-ratio > div,
+	body.wp-has-aspect-ratio > div iframe {
+		width: 100%;
+		height: 100%;
+		overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */
+	}
+	body > div > * {
+		margin-top: 0 !important; /* Has to have !important to override inline styles. */
+		margin-bottom: 0 !important;
+	}
+`;
+
+/**
+ * This component provides an isolated environment for arbitrary HTML via iframes.
+ *
+ * ```jsx
+ * import { SandBox } from '@wordpress/components';
+ *
+ * const MySandBox = () => (
+ * 	<SandBox html="<p>Content</p>" title="SandBox" type="embed" />
+ * );
+ * ```
+ */
+function SandBox( {
+	html = '',
+	title = '',
+	type,
+	styles = [],
+	scripts = [],
+	onFocus,
+	tabIndex,
+}: SandBoxProps ) {
+	const ref = useRef< HTMLIFrameElement >();
+	const [ width, setWidth ] = useState( 0 );
+	const [ height, setHeight ] = useState( 0 );
+
+	function isFrameAccessible() {
+		try {
+			return !! ref.current?.contentDocument?.body;
+		} catch ( e ) {
+			return false;
+		}
+	}
+
+	function trySandBox( forceRerender = false ) {
+		if ( ! isFrameAccessible() ) {
+			return;
+		}
+
+		const { contentDocument, ownerDocument } =
+			ref.current as HTMLIFrameElement & {
+				contentDocument: Document;
+			};
+
+		if (
+			! forceRerender &&
+			null !==
+				contentDocument?.body.getAttribute(
+					'data-resizable-iframe-connected'
+				)
+		) {
+			return;
+		}
+
+		// Put the html snippet into a html document, and then write it to the iframe's document
+		// we can use this in the future to inject custom styles or scripts.
+		// Scripts go into the body rather than the head, to support embedded content such as Instagram
+		// that expect the scripts to be part of the body.
+		const htmlDoc = (
+			<html
+				lang={ ownerDocument.documentElement.lang }
+				className={ type }
+			>
+				<head>
+					<title>{ title }</title>
+					<style dangerouslySetInnerHTML={ { __html: style } } />
+					{ styles.map( ( rules, i ) => (
+						<style
+							key={ i }
+							dangerouslySetInnerHTML={ { __html: rules } }
+						/>
+					) ) }
+				</head>
+				<body
+					data-resizable-iframe-connected="data-resizable-iframe-connected"
+					className={ type }
+				>
+					<div dangerouslySetInnerHTML={ { __html: html } } />
+					<script
+						type="text/javascript"
+						dangerouslySetInnerHTML={ {
+							__html: `(${ observeAndResizeJS.toString() })();`,
+						} }
+					/>
+					{ scripts.map( ( src ) => (
+						<script key={ src } src={ src } />
+					) ) }
+				</body>
+			</html>
+		);
+
+		// Writing the document like this makes it act in the same way as if it was
+		// loaded over the network, so DOM creation and mutation, script execution, etc.
+		// all work as expected.
+		contentDocument.open();
+		contentDocument.write( '<!DOCTYPE html>' + renderToString( htmlDoc ) );
+		contentDocument.close();
+	}
+
+	useEffect( () => {
+		trySandBox();
+
+		function tryNoForceSandBox() {
+			trySandBox( false );
+		}
+
+		function checkMessageForResize( event: MessageEvent ) {
+			const iframe = ref.current;
+
+			// Verify that the mounted element is the source of the message.
+			if ( ! iframe || iframe.contentWindow !== event.source ) {
+				return;
+			}
+
+			// Attempt to parse the message data as JSON if passed as string.
+			let data = event.data || {};
+
+			if ( 'string' === typeof data ) {
+				try {
+					data = JSON.parse( data );
+				} catch ( e ) {}
+			}
+
+			// Update the state only if the message is formatted as we expect,
+			// i.e. as an object with a 'resize' action.
+			if ( 'resize' !== data.action ) {
+				return;
+			}
+
+			setWidth( data.width );
+			setHeight( data.height );
+		}
+
+		const iframe = ref.current;
+		const defaultView = iframe?.ownerDocument?.defaultView;
+
+		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
+		// after reordering the containing block. See these two issues for more details:
+		// https://github.com/WordPress/gutenberg/issues/6146
+		// https://github.com/facebook/react/issues/18752
+		iframe?.addEventListener( 'load', tryNoForceSandBox, false );
+		defaultView?.addEventListener( 'message', checkMessageForResize );
+
+		return () => {
+			iframe?.removeEventListener( 'load', tryNoForceSandBox, false );
+			defaultView?.removeEventListener(
+				'message',
+				checkMessageForResize
+			);
+		};
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+	}, [] );
+
+	useEffect( () => {
+		trySandBox();
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+	}, [ title, styles, scripts ] );
+
+	useEffect( () => {
+		trySandBox( true );
+		// Passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+	}, [ html, type ] );
+
+	return (
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
+			title={ title }
+			tabIndex={ tabIndex }
+			className="components-sandbox"
+			sandbox="allow-scripts allow-same-origin allow-presentation"
+			onFocus={ onFocus }
+			width={ Math.ceil( width ) }
+			height={ Math.ceil( height ) }
+		/>
+	);
+}
+
+export default SandBox;
diff --git a/packages/components/src/sandbox/stories/index.story.tsx b/packages/components/src/sandbox/stories/index.story.tsx
new file mode 100644
index 00000000000000..6d5eaa4868e788
--- /dev/null
+++ b/packages/components/src/sandbox/stories/index.story.tsx
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import SandBox from '..';
+
+const meta: Meta< typeof SandBox > = {
+	component: SandBox,
+	title: 'Components/Utilities/SandBox',
+	id: 'components-sandbox',
+	argTypes: {
+		onFocus: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	html: '<p>Arbitrary HTML content</p>',
+};
diff --git a/packages/components/src/sandbox/test/index.js b/packages/components/src/sandbox/test/index.js
deleted file mode 100644
index f25bdca675cbfd..00000000000000
--- a/packages/components/src/sandbox/test/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen, within } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Sandbox from '../';
-
-describe( 'Sandbox', () => {
-	const TestWrapper = () => {
-		const [ html, setHtml ] = useState(
-			// MutationObserver implementation from JSDom does not work as intended
-			// with iframes so we need to ignore it for the time being.
-			'<script type="text/javascript">window.MutationObserver = null;</script>' +
-				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
-		);
-
-		const updateHtml = () => {
-			setHtml(
-				'<iframe title="Mock Iframe" src="https://another.super.embed"></iframe>'
-			);
-		};
-
-		return (
-			<div>
-				<button onClick={ updateHtml } className="mock-button">
-					Mock Button
-				</button>
-				<Sandbox html={ html } title="Sandbox Title" />
-			</div>
-		);
-	};
-
-	it( 'should rerender with new emdeded content if html prop changes', () => {
-		render( <TestWrapper /> );
-
-		const iframe = screen.getByTitle( 'Sandbox Title' );
-
-		let sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://super.embed'
-		);
-
-		fireEvent.click( screen.getByRole( 'button' ) );
-
-		sandboxedIframe = within(
-			iframe.contentWindow.document.body
-		).getByTitle( 'Mock Iframe' );
-
-		expect( sandboxedIframe ).toHaveAttribute(
-			'src',
-			'https://another.super.embed'
-		);
-	} );
-} );
diff --git a/packages/components/src/sandbox/test/index.tsx b/packages/components/src/sandbox/test/index.tsx
new file mode 100644
index 00000000000000..e1a51814ecab61
--- /dev/null
+++ b/packages/components/src/sandbox/test/index.tsx
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen, within } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SandBox from '..';
+
+describe( 'SandBox', () => {
+	const TestWrapper = () => {
+		const [ html, setHtml ] = useState(
+			// MutationObserver implementation from JSDom does not work as intended
+			// with iframes so we need to ignore it for the time being.
+			'<script type="text/javascript">window.MutationObserver = null;</script>' +
+				'<iframe title="Mock Iframe" src="https://super.embed"></iframe>'
+		);
+
+		const updateHtml = () => {
+			setHtml(
+				'<iframe title="Mock Iframe" src="https://another.super.embed"></iframe>'
+			);
+		};
+
+		return (
+			<div>
+				<button onClick={ updateHtml } className="mock-button">
+					Mock Button
+				</button>
+				<SandBox html={ html } title="SandBox Title" />
+			</div>
+		);
+	};
+
+	it( 'should rerender with new emdeded content if html prop changes', () => {
+		render( <TestWrapper /> );
+
+		const iframe =
+			screen.getByTitle< HTMLIFrameElement >( 'SandBox Title' );
+
+		if ( ! iframe.contentWindow ) {
+			throw new Error();
+		}
+
+		let sandboxedIframe = within(
+			iframe.contentWindow.document.body
+		).getByTitle( 'Mock Iframe' );
+
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
+			'https://super.embed'
+		);
+
+		fireEvent.click( screen.getByRole( 'button' ) );
+
+		sandboxedIframe = within(
+			iframe.contentWindow.document.body
+		).getByTitle( 'Mock Iframe' );
+
+		expect( sandboxedIframe ).toHaveAttribute(
+			'src',
+			'https://another.super.embed'
+		);
+	} );
+} );
diff --git a/packages/components/src/sandbox/types.ts b/packages/components/src/sandbox/types.ts
new file mode 100644
index 00000000000000..76f98da45c8c63
--- /dev/null
+++ b/packages/components/src/sandbox/types.ts
@@ -0,0 +1,40 @@
+export type SandBoxProps = {
+	/**
+	 * The HTML to render in the body of the iframe document.
+	 *
+	 * @default ''
+	 */
+	html?: string;
+	/**
+	 * The `<title>` of the iframe document.
+	 *
+	 * @default ''
+	 */
+	title?: string;
+	/**
+	 * The CSS class name to apply to the `<html>` and `<body>` elements of the iframe.
+	 */
+	type?: string;
+	/**
+	 * An array of CSS strings to inject into the `<head>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	styles?: string[];
+	/**
+	 * An array of script URLs to inject as `<script>` tags into the bottom of the `<body>` of the iframe document.
+	 *
+	 * @default []
+	 */
+	scripts?: string[];
+	/**
+	 * The `onFocus` callback for the iframe.
+	 */
+	onFocus?: React.DOMAttributes< HTMLIFrameElement >[ 'onFocus' ];
+	/**
+	 * The `tabindex` the iframe should receive.
+	 *
+	 * @default 0
+	 */
+	tabIndex?: HTMLElement[ 'tabIndex' ];
+};
diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md
index 33c5948ac0367e..4b8542966c3660 100644
--- a/packages/components/src/scroll-lock/README.md
+++ b/packages/components/src/scroll-lock/README.md
@@ -7,8 +7,8 @@ ScrollLock is a content-free React component for declaratively preventing scroll
 Declare scroll locking as part of modal UI.
 
 ```jsx
+import { useState } from 'react';
 import { ScrollLock, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyScrollLock = () => {
 	const [ isScrollLocked, setIsScrollLocked ] = useState( false );
diff --git a/packages/components/src/scroll-lock/stories/index.story.tsx b/packages/components/src/scroll-lock/stories/index.story.tsx
new file mode 100644
index 00000000000000..b251018f00b38e
--- /dev/null
+++ b/packages/components/src/scroll-lock/stories/index.story.tsx
@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ScrollLock from '..';
+
+const meta: Meta< typeof ScrollLock > = {
+	component: ScrollLock,
+	title: 'Components/Utilities/ScrollLock',
+	id: 'components-scrolllock',
+	parameters: {
+		controls: { hideNoControlsWarning: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+function StripedBackground( props: { children: ReactNode } ) {
+	return (
+		<div
+			style={ {
+				backgroundColor: '#fff',
+				backgroundImage:
+					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
+				backgroundSize: '50px 50px',
+				height: 3000,
+				position: 'relative',
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+function ToggleContainer( props: { children: ReactNode } ) {
+	const { children } = props;
+	return (
+		<div
+			style={ {
+				position: 'sticky',
+				top: 0,
+				padding: 40,
+				display: 'flex',
+				justifyContent: 'center',
+				textAlign: 'center',
+			} }
+		>
+			<div>{ children }</div>
+		</div>
+	);
+}
+
+export const Default: StoryFn< typeof ScrollLock > = () => {
+	const [ isScrollLocked, setScrollLocked ] = useState( false );
+	const toggleLock = () => setScrollLocked( ! isScrollLocked );
+
+	return (
+		<div style={ { height: 1000 } }>
+			<div
+				style={ {
+					overflow: 'auto',
+					height: 240,
+					border: '1px solid lightgray',
+				} }
+			>
+				<StripedBackground>
+					<div>
+						Start scrolling down. Once you scroll to the end of this
+						container with the stripes, the rest of the page will
+						continue scrolling. <code>ScrollLock</code> prevents
+						this &quot;scroll bleed&quot; from happening.
+					</div>
+					<ToggleContainer>
+						<Button variant="primary" onClick={ toggleLock }>
+							Toggle Scroll Lock
+						</Button>
+						{ isScrollLocked && <ScrollLock /> }
+						<p>
+							Scroll locked:{ ' ' }
+							<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+						</p>
+					</ToggleContainer>
+				</StripedBackground>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/components/src/scroll-lock/stories/index.tsx b/packages/components/src/scroll-lock/stories/index.tsx
deleted file mode 100644
index 61f6fc166094bf..00000000000000
--- a/packages/components/src/scroll-lock/stories/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ReactNode } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ScrollLock from '..';
-
-const meta: ComponentMeta< typeof ScrollLock > = {
-	component: ScrollLock,
-	title: 'Components/ScrollLock',
-	parameters: {
-		controls: { hideNoControlsWarning: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-function StripedBackground( props: { children: ReactNode } ) {
-	return (
-		<div
-			style={ {
-				backgroundColor: '#fff',
-				backgroundImage:
-					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
-				backgroundSize: '50px 50px',
-				height: 3000,
-				position: 'relative',
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-function ToggleContainer( props: { children: ReactNode } ) {
-	const { children } = props;
-	return (
-		<div
-			style={ {
-				position: 'sticky',
-				top: 0,
-				padding: 40,
-				display: 'flex',
-				justifyContent: 'center',
-				textAlign: 'center',
-			} }
-		>
-			<div>{ children }</div>
-		</div>
-	);
-}
-
-export const Default: ComponentStory< typeof ScrollLock > = () => {
-	const [ isScrollLocked, setScrollLocked ] = useState( false );
-	const toggleLock = () => setScrollLocked( ! isScrollLocked );
-
-	return (
-		<div style={ { height: 1000 } }>
-			<div
-				style={ {
-					overflow: 'auto',
-					height: 240,
-					border: '1px solid lightgray',
-				} }
-			>
-				<StripedBackground>
-					<div>
-						Start scrolling down. Once you scroll to the end of this
-						container with the stripes, the rest of the page will
-						continue scrolling. <code>ScrollLock</code> prevents
-						this &quot;scroll bleed&quot; from happening.
-					</div>
-					<ToggleContainer>
-						<Button variant="primary" onClick={ toggleLock }>
-							Toggle Scroll Lock
-						</Button>
-						{ isScrollLocked && <ScrollLock /> }
-						<p>
-							Scroll locked:{ ' ' }
-							<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
-						</p>
-					</ToggleContainer>
-				</StripedBackground>
-			</div>
-		</div>
-	);
-};
diff --git a/packages/components/src/scrollable/component.tsx b/packages/components/src/scrollable/component.tsx
index ffbcf8c697003a..415ea6d4628e19 100644
--- a/packages/components/src/scrollable/component.tsx
+++ b/packages/components/src/scrollable/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useScrollable } from './hook';
 import type { ScrollableProps } from './types';
diff --git a/packages/components/src/scrollable/hook.ts b/packages/components/src/scrollable/hook.ts
index 16e6074a1d196a..1e86370b742ca6 100644
--- a/packages/components/src/scrollable/hook.ts
+++ b/packages/components/src/scrollable/hook.ts
@@ -6,7 +6,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';
diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx
new file mode 100644
index 00000000000000..318a841f229788
--- /dev/null
+++ b/packages/components/src/scrollable/stories/index.story.tsx
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Scrollable } from '..';
+
+const meta: Meta< typeof Scrollable > = {
+	component: Scrollable,
+	title: 'Components (Experimental)/Scrollable',
+	argTypes: {
+		as: {
+			control: { type: 'text' },
+		},
+		children: {
+			control: false,
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
+	const targetRef = useRef< HTMLInputElement >( null );
+
+	const onButtonClick = () => {
+		targetRef.current?.focus();
+	};
+
+	const containerWidth = 300;
+	const containerHeight = 400;
+
+	return (
+		<Scrollable
+			style={ { height: containerHeight, width: containerWidth } }
+			{ ...args }
+		>
+			<View
+				style={ {
+					backgroundColor: '#eee',
+					height:
+						args.scrollDirection === 'x' ? containerHeight : 1000,
+					width: args.scrollDirection === 'y' ? containerWidth : 1000,
+					position: 'relative',
+				} }
+			>
+				<button onClick={ onButtonClick }>
+					Move focus to an element out of view
+				</button>
+				<input
+					ref={ targetRef }
+					style={ {
+						position: 'absolute',
+						bottom: args.scrollDirection === 'x' ? 'initial' : 0,
+						right: 0,
+					} }
+					type="text"
+					value="Focus me"
+				/>
+			</View>
+		</Scrollable>
+	);
+};
+
+export const Default: StoryFn< typeof Scrollable > = Template.bind( {} );
+Default.args = {
+	smoothScroll: false,
+	scrollDirection: 'y',
+};
diff --git a/packages/components/src/scrollable/stories/index.tsx b/packages/components/src/scrollable/stories/index.tsx
deleted file mode 100644
index d460dbd8e9c8cd..00000000000000
--- a/packages/components/src/scrollable/stories/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Scrollable } from '..';
-
-const meta: ComponentMeta< typeof Scrollable > = {
-	component: Scrollable,
-	title: 'Components (Experimental)/Scrollable',
-	argTypes: {
-		as: {
-			control: { type: 'text' },
-		},
-		children: {
-			control: { type: null },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
-	const targetRef = useRef< HTMLInputElement >( null );
-
-	const onButtonClick = () => {
-		targetRef.current?.focus();
-	};
-
-	const containerWidth = 300;
-	const containerHeight = 400;
-
-	return (
-		<Scrollable
-			style={ { height: containerHeight, width: containerWidth } }
-			{ ...args }
-		>
-			<View
-				style={ {
-					backgroundColor: '#eee',
-					height:
-						args.scrollDirection === 'x' ? containerHeight : 1000,
-					width: args.scrollDirection === 'y' ? containerWidth : 1000,
-					position: 'relative',
-				} }
-			>
-				<button onClick={ onButtonClick }>
-					Move focus to an element out of view
-				</button>
-				<input
-					ref={ targetRef }
-					style={ {
-						position: 'absolute',
-						bottom: args.scrollDirection === 'x' ? 'initial' : 0,
-						right: 0,
-					} }
-					type="text"
-					value="Focus me"
-				/>
-			</View>
-		</Scrollable>
-	);
-};
-
-export const Default: ComponentStory< typeof Scrollable > = Template.bind( {} );
-Default.args = {
-	smoothScroll: false,
-	scrollDirection: 'y',
-};
diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md
index 49d28a4e623e58..3945f451d6dcf7 100644
--- a/packages/components/src/search-control/README.md
+++ b/packages/components/src/search-control/README.md
@@ -2,11 +2,7 @@
 
 SearchControl components let users display a search control.
 
-
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
+Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-searchcontrol--docs) for a visual exploration of this component.
 
 ## Development guidelines
 
@@ -15,14 +11,17 @@ SearchControl components let users display a search control.
 Render a user interface to input the name of an additional css class.
 
 ```jsx
+import { useState } from 'react';
+import { __ } from '@wordpress/i18n';
 import { SearchControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function MySearchControl( { className, setState } ) {
     const [ searchInput, setSearchInput ] = useState( '' );
 
     return (
         <SearchControl
+            __nextHasNoMarginBottom
+            label={ __( 'Search posts' ) }
             value={ searchInput }
             onChange={ setSearchInput }
         />
@@ -37,10 +36,14 @@ Props not included in this set will be applied to the input element.
 
 #### label
 
-If this property is added, a label will be generated using label property as the content.
+The accessible label for the input.
+
+A label should always be provided as an accessibility best practice, even when a placeholder is defined
+and `hideLabelFromVision` is `true`.
 
 -   Type: `String`
--   Required: Yes
+-   Required: No
+-   Default: `__( 'Search' )`
 
 #### placeholder
 
@@ -71,18 +74,46 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### onClose
+
+_Note: this prop is deprecated._
+
+When an `onClose` callback is provided, the search control will render a close button that will trigger the given callback.
+
+Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value.
+
+-   Type: `function`
+-   Required: No
+
 #### help
 
 If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
-### hideLabelFromVision
 
-If true, the label will only be visible to screen readers.
+#### hideLabelFromVision
+
+If true, the label will not be visible, but will be read by screen readers. Defaults to `true`.
 
 -   Type: `Boolean`
 -   Required: No
+-   Default: `true`
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
+#### `size`: `'default'` | `'compact'`
+
+The size of the component.
+
+-   Required: No
+-   Default: `'default'`
 
 ## Related components
 
diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js
index 6f640f9960a3a4..5bb03196d1de14 100644
--- a/packages/components/src/search-control/index.native.js
+++ b/packages/components/src/search-control/index.native.js
@@ -14,9 +14,14 @@ import {
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useMemo, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useMemo,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button, Gridicons } from '@wordpress/components';
 import {
 	Icon,
 	cancelCircleFilled as cancelCircleFilledIcon,
@@ -29,6 +34,8 @@ import {
  */
 import allStyles from './style.scss';
 import platformStyles from './platform-style.scss';
+import Button from '../button';
+import Gridicons from '../mobile/gridicons';
 
 // Merge platform specific styles with the default styles.
 const baseStyles = { ...allStyles };
@@ -115,28 +122,47 @@ function SearchControl( {
 		mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );
 
 		setCurrentStyles( futureStyles );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ isActive, isDark ] );
 
+	const clearInput = useCallback( () => {
+		onChange( '' );
+	}, [ onChange ] );
+
+	const onPress = useCallback( () => {
+		setIsActive( true );
+		inputRef.current?.focus();
+	}, [] );
+
+	const onFocus = useCallback( () => {
+		setIsActive( true );
+	}, [] );
+
+	const onCancel = useCallback( () => {
+		clearTimeout( onCancelTimer.current );
+		onCancelTimer.current = setTimeout( () => {
+			inputRef.current?.blur();
+			clearInput();
+			setIsActive( false );
+		}, 0 );
+	}, [ clearInput ] );
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( ! isIOS ) {
+			onCancel();
+		}
+	}, [ isIOS, onCancel ] );
+
 	useEffect( () => {
 		const keyboardHideSubscription = Keyboard.addListener(
 			'keyboardDidHide',
-			() => {
-				if ( ! isIOS ) {
-					onCancel();
-				}
-			}
+			onKeyboardDidHide
 		);
 		return () => {
 			clearTimeout( onCancelTimer.current );
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
+	}, [ onKeyboardDidHide ] );
 
 	const {
 		'search-control__container': containerStyle,
@@ -153,18 +179,6 @@ function SearchControl( {
 		'search-control__right-icon': rightIconStyle,
 	} = currentStyles;
 
-	function clearInput() {
-		onChange( '' );
-	}
-
-	function onCancel() {
-		onCancelTimer.current = setTimeout( () => {
-			inputRef.current.blur();
-			clearInput();
-			setIsActive( false );
-		}, 0 );
-	}
-
 	function renderLeftButton() {
 		const button =
 			! isIOS && isActive ? (
@@ -220,8 +234,8 @@ function SearchControl( {
 				<Text
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
-					accessible={ true }
-					accessibilityRole={ 'button' }
+					accessible
+					accessibilityRole="button"
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }
 				>
@@ -234,10 +248,7 @@ function SearchControl( {
 	return (
 		<TouchableOpacity
 			style={ containerStyle }
-			onPress={ () => {
-				setIsActive( true );
-				inputRef.current.focus();
-			} }
+			onPress={ onPress }
 			activeOpacity={ 1 }
 		>
 			<View style={ innerContainerStyle }>
@@ -248,7 +259,7 @@ function SearchControl( {
 						style={ formInputStyle }
 						placeholderTextColor={ placeholderStyle?.color }
 						onChangeText={ onChange }
-						onFocus={ () => setIsActive( true ) }
+						onFocus={ onFocus }
 						value={ value }
 						placeholder={ placeholder }
 					/>
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index 528ae52b26bbc8..0a1b821a0a079a 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -9,91 +9,124 @@ import classnames from 'classnames';
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useMemo, useRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
-import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
-import type { SearchControlProps } from './types';
+import type { WordPressComponentProps } from '../context/wordpress-component';
+import type { SearchControlProps, SuffixItemProps } from './types';
 import type { ForwardedRef } from 'react';
+import { ContextSystemProvider } from '../context';
+import { StyledInputControl, SuffixItemWrapper } from './styles';
+
+function SuffixItem( {
+	searchRef,
+	value,
+	onChange,
+	onClose,
+}: SuffixItemProps ) {
+	if ( ! onClose && ! value ) {
+		return <Icon icon={ search } />;
+	}
+
+	if ( onClose ) {
+		deprecated( '`onClose` prop in wp.components.SearchControl', {
+			since: '6.8',
+		} );
+	}
+
+	const onReset = () => {
+		onChange( '' );
+		searchRef.current?.focus();
+	};
+
+	return (
+		<Button
+			size="small"
+			icon={ closeSmall }
+			label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
+			onClick={ onClose ?? onReset }
+		/>
+	);
+}
 
 function UnforwardedSearchControl(
 	{
-		__nextHasNoMarginBottom,
+		__nextHasNoMarginBottom = false,
 		className,
 		onChange,
-		onKeyDown,
 		value,
-		label,
+		label = __( 'Search' ),
 		placeholder = __( 'Search' ),
 		hideLabelFromVision = true,
-		help,
 		onClose,
+		size = 'default',
 		...restProps
-	}: WordPressComponentProps< SearchControlProps, 'input', false >,
+	}: Omit<
+		WordPressComponentProps< SearchControlProps, 'input', false >,
+		// TODO: Background styling currently doesn't support a disabled state. Needs design work.
+		'disabled'
+	>,
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
-	const searchRef = useRef< HTMLInputElement >();
-	const instanceId = useInstanceId( SearchControl );
-	const id = `components-search-control-${ instanceId }`;
+	// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
+	// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
+	const { disabled, ...filteredRestProps } = restProps;
 
-	const renderRightButton = () => {
-		if ( onClose ) {
-			return (
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close search' ) }
-					onClick={ onClose }
-				/>
-			);
-		}
-
-		if ( !! value ) {
-			return (
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Reset search' ) }
-					onClick={ () => {
-						onChange( '' );
-						searchRef.current?.focus();
-					} }
-				/>
-			);
-		}
+	const searchRef = useRef< HTMLInputElement >( null );
+	const instanceId = useInstanceId(
+		SearchControl,
+		'components-search-control'
+	);
 
-		return <Icon icon={ search } />;
-	};
+	const contextValue = useMemo(
+		() => ( {
+			BaseControl: {
+				// Overrides the underlying BaseControl `__nextHasNoMarginBottom` via the context system
+				// to provide backwards compatibile margin for SearchControl.
+				// (In a standard InputControl, the BaseControl `__nextHasNoMarginBottom` is always set to true.)
+				_overrides: { __nextHasNoMarginBottom },
+				__associatedWPComponentName: 'SearchControl',
+			},
+			// `isBorderless` is still experimental and not a public prop for InputControl yet.
+			InputBase: { isBorderless: true },
+		} ),
+		[ __nextHasNoMarginBottom ]
+	);
 
 	return (
-		<BaseControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			label={ label }
-			id={ id }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			className={ classnames( className, 'components-search-control' ) }
-		>
-			<div className="components-search-control__input-wrapper">
-				<input
-					{ ...restProps }
-					ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
-					className="components-search-control__input"
-					id={ id }
-					type="search"
-					placeholder={ placeholder }
-					onChange={ ( event ) => onChange( event.target.value ) }
-					onKeyDown={ onKeyDown }
-					autoComplete="off"
-					value={ value || '' }
-				/>
-				<div className="components-search-control__icon">
-					{ renderRightButton() }
-				</div>
-			</div>
-		</BaseControl>
+		<ContextSystemProvider value={ contextValue }>
+			<StyledInputControl
+				__next40pxDefaultSize
+				id={ instanceId }
+				hideLabelFromVision={ hideLabelFromVision }
+				label={ label }
+				ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
+				type="search"
+				size={ size }
+				className={ clsx( 'components-search-control', className ) }
+				onChange={ ( nextValue?: string ) =>
+					onChange( nextValue ?? '' )
+				}
+				autoComplete="off"
+				placeholder={ placeholder }
+				value={ value ?? '' }
+				suffix={
+					<SuffixItemWrapper size={ size }>
+						<SuffixItem
+							searchRef={ searchRef }
+							value={ value }
+							onChange={ onChange }
+							onClose={ onClose }
+						/>
+					</SuffixItemWrapper>
+				}
+				{ ...filteredRestProps }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
@@ -109,6 +142,7 @@ function UnforwardedSearchControl(
  *
  *   return (
  *     <SearchControl
+ *       __nextHasNoMarginBottom
  *       value={ searchInput }
  *       onChange={ setSearchInput }
  *     />
diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..c3385c4eb21b44
--- /dev/null
+++ b/packages/components/src/search-control/stories/index.story.tsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SearchControl from '..';
+
+const meta: Meta< typeof SearchControl > = {
+	title: 'Components/Selection & Input/Common/SearchControl',
+	id: 'components-searchcontrol',
+	component: SearchControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof SearchControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] = useState< string >();
+
+	return (
+		<SearchControl
+			{ ...props }
+			value={ value }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	help: 'Help text to explain the input.',
+	__nextHasNoMarginBottom: true,
+};
diff --git a/packages/components/src/search-control/stories/index.tsx b/packages/components/src/search-control/stories/index.tsx
deleted file mode 100644
index fc04b670e86eaa..00000000000000
--- a/packages/components/src/search-control/stories/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SearchControl from '..';
-
-const meta: ComponentMeta< typeof SearchControl > = {
-	title: 'Components/SearchControl',
-	component: SearchControl,
-	argTypes: {
-		onChange: { action: 'onChange' },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof SearchControl > = ( {
-	onChange,
-	...props
-} ) => {
-	const [ value, setValue ] = useState< string >();
-
-	return (
-		<SearchControl
-			{ ...props }
-			value={ value }
-			onChange={ ( ...changeArgs ) => {
-				setValue( ...changeArgs );
-				onChange( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Label Text',
-	help: 'Help text to explain the input.',
-};
-
-/**
- * When an `onClose` callback is provided, the search control will render a close button
- * that will trigger the given callback.
- *
- * Use this if you want the button to trigger your own logic to close the search field entirely,
- * rather than just clearing the input value.
- */
-export const WithOnClose = Template.bind( {} );
-WithOnClose.args = {
-	...Default.args,
-};
-WithOnClose.argTypes = {
-	onClose: { action: 'onClose' },
-};
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
deleted file mode 100644
index c02250de4f52ee..00000000000000
--- a/packages/components/src/search-control/style.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.components-search-control {
-	position: relative;
-
-	input[type="search"].components-search-control__input {
-		@include input-control;
-		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-60;
-
-		// Unset inherited values.
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-}
-
-.components-search-control__icon {
-	position: absolute;
-	top: 0;
-	right: ( $grid-unit-60 - $icon-size ) * 0.5;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-
-	> svg {
-		margin: $grid-unit-10 0;
-	}
-}
-
-.components-search-control__input-wrapper {
-	position: relative;
-}
diff --git a/packages/components/src/search-control/styles.ts b/packages/components/src/search-control/styles.ts
new file mode 100644
index 00000000000000..183c7a26e172e9
--- /dev/null
+++ b/packages/components/src/search-control/styles.ts
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { space } from '../utils/space';
+import InputControl from '../input-control';
+import { COLORS } from '../utils';
+import type { SearchControlProps } from './types';
+
+const inlinePadding = ( {
+	size,
+}: Required< Pick< SearchControlProps, 'size' > > ) => {
+	return space( size === 'compact' ? 1 : 2 );
+};
+
+export const SuffixItemWrapper = styled.div`
+	display: flex;
+	padding-inline-end: ${ inlinePadding };
+
+	svg {
+		fill: currentColor;
+	}
+`;
+
+export const StyledInputControl = styled( InputControl )`
+	input[type='search'] {
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	&:not( :focus-within ) {
+		--wp-components-color-background: ${ COLORS.theme.gray[ 100 ] };
+	}
+`;
diff --git a/packages/components/src/search-control/test/index.tsx b/packages/components/src/search-control/test/index.tsx
new file mode 100644
index 00000000000000..5250a531f58d09
--- /dev/null
+++ b/packages/components/src/search-control/test/index.tsx
@@ -0,0 +1,111 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { click, type } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SearchControl from '..';
+
+function ControlledSearchControl( {
+	onChange,
+	...restProps
+}: React.ComponentProps< typeof SearchControl > ) {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<SearchControl
+			{ ...restProps }
+			__nextHasNoMarginBottom
+			value={ value }
+			onChange={ ( ...args ) => {
+				setValue( ...args );
+				onChange( ...args );
+			} }
+		/>
+	);
+}
+
+describe( 'SearchControl', () => {
+	describe.each( [
+		// TODO: Uncontrolled mode is not supported yet.
+		// [ 'Uncontrolled', SearchControl ],
+		[ 'Controlled mode', ControlledSearchControl ],
+	] )( '%s', ( ...modeAndComponent ) => {
+		const [ , Component ] = modeAndComponent;
+
+		it( 'should call onChange with input value when value is changed', async () => {
+			const onChangeSpy = jest.fn();
+			render( <Component onChange={ onChangeSpy } /> );
+
+			const searchInput = screen.getByRole( 'searchbox' );
+			await type( 'test', searchInput );
+			expect( searchInput ).toHaveValue( 'test' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( 'test' );
+		} );
+
+		it( 'should render a Reset search button if no onClose function is provided', async () => {
+			const onChangeSpy = jest.fn();
+			render( <Component onChange={ onChangeSpy } /> );
+
+			const searchInput = screen.getByRole( 'searchbox' );
+
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+
+			await type( 'test', searchInput );
+			const resetButton = screen.getByRole( 'button', {
+				name: 'Reset search',
+			} );
+			expect( resetButton ).toBeVisible();
+
+			await click( resetButton );
+			expect( searchInput ).toHaveValue( '' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( '' );
+		} );
+
+		it( 'should render a Close button (instead of Reset) when onClose function is provided', async () => {
+			const onChangeSpy = jest.fn();
+			const onCloseSpy = jest.fn();
+			render(
+				<Component onChange={ onChangeSpy } onClose={ onCloseSpy } />
+			);
+
+			expect( console ).toHaveWarnedWith(
+				'`onClose` prop in wp.components.SearchControl is deprecated since version 6.8.'
+			);
+			expect(
+				screen.queryByRole( 'button', { name: 'Close search' } )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+
+			const searchInput = screen.getByRole( 'searchbox' );
+			await type( 'test', searchInput );
+
+			expect(
+				screen.queryByRole( 'button', { name: 'Close search' } )
+			).toBeVisible();
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset search' } )
+			).not.toBeInTheDocument();
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 'test'.length );
+
+			await click(
+				screen.getByRole( 'button', { name: 'Close search' } )
+			);
+			expect( onCloseSpy ).toHaveBeenCalledTimes( 1 );
+			expect( searchInput ).toHaveValue( 'test' ); // no change
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 'test'.length ); // no change
+		} );
+	} );
+} );
diff --git a/packages/components/src/search-control/types.ts b/packages/components/src/search-control/types.ts
index dbaf16ad2feff0..e4117e5ed57ffb 100644
--- a/packages/components/src/search-control/types.ts
+++ b/packages/components/src/search-control/types.ts
@@ -1,23 +1,35 @@
-/**
- * External dependencies
- */
-import type { HTMLAttributes } from 'react';
-
 /**
  * Internal dependencies
  */
-import type { BaseControlProps } from '../base-control/types';
+import type { InputControlProps } from '../input-control/types';
 
-export type SearchControlProps = Pick<
-	BaseControlProps,
-	'__nextHasNoMarginBottom' | 'help' | 'label'
-> & {
+export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & {
+	/**
+	 * @deprecated This is now the default.
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: InputControlProps[ '__next40pxDefaultSize' ];
+	/**
+	 * Start opting into the new margin-free styles that will become the default in a future version.
+	 *
+	 * @default false
+	 */
+	__nextHasNoMarginBottom?: boolean;
 	/**
 	 * If true, the label will only be visible to screen readers.
 	 *
 	 * @default true
 	 */
-	hideLabelFromVision?: boolean;
+	hideLabelFromVision?: InputControlProps[ 'hideLabelFromVision' ];
+	/**
+	 * The accessible label for the input.
+	 *
+	 * A label should always be provided as an accessibility best practice,
+	 * even when a placeholder is defined and `hideLabelFromVision` is `true`.
+	 *
+	 * @default 'Search'
+	 */
+	label?: string;
 	/**
 	 * A function that receives the value of the input when the value is changed.
 	 */
@@ -28,16 +40,34 @@ export type SearchControlProps = Pick<
 	 *
 	 * Use this if you want the button to trigger your own logic to close the search field entirely,
 	 * rather than just clearing the input value.
+	 *
+	 * @deprecated
+	 * @ignore
 	 */
 	onClose?: () => void;
+	/** @ignore */
+	onDrag?: InputControlProps[ 'onDrag' ];
+	/** @ignore */
+	onDragStart?: InputControlProps[ 'onDragStart' ];
+	/** @ignore */
+	onDragEnd?: InputControlProps[ 'onDragEnd' ];
 	/**
 	 * A placeholder for the input.
 	 *
 	 * @default 'Search'
 	 */
-	placeholder?: HTMLAttributes< HTMLInputElement >[ 'placeholder' ];
+	placeholder?: InputControlProps[ 'placeholder' ];
 	/**
-	 * The current value of the input.
+	 * The size of the component
+	 *
+	 * @default 'default'
 	 */
-	value?: string;
+	size?: 'default' | 'compact';
+};
+
+export type SuffixItemProps = Pick<
+	SearchControlProps,
+	'value' | 'onChange' | 'onClose'
+> & {
+	searchRef: React.RefObject< HTMLInputElement >;
 };
diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
index 1d96f2ba92b76e..c240243408fab3 100644
--- a/packages/components/src/select-control/README.md
+++ b/packages/components/src/select-control/README.md
@@ -4,12 +4,6 @@ SelectControl allow users to select from a single or multiple option menu. It fu
 
 ![A “Link To” select with “none” selected.](https://wordpress.org/gutenberg/files/2018/12/select.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -82,8 +76,8 @@ Use sentences in your menu.
 Render a user interface to select the size of an image.
 
 ```jsx
+import { useState } from 'react';
 import { SelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MySelectControl = () => {
 	const [ size, setSize ] = useState( '50%' );
@@ -109,7 +103,7 @@ Render a user interface to select multiple users from a list.
 ```jsx
 <SelectControl
 	multiple
-	label={ __( 'Select some users:' ) }
+	label={ __( 'User' ) }
 	value={ this.state.users } // e.g: value = [ 'a', 'c' ]
 	onChange={ ( users ) => {
 		this.setState( { users } );
@@ -132,7 +126,7 @@ const [ item, setItem ] = useState( '' );
 // ...
 
 <SelectControl
-    label={ __( 'Select an item:' ) }
+    label={ __( 'My dinosaur' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
     __nextHasNoMarginBottom
@@ -182,19 +176,21 @@ If true, the label will only be visible to screen readers.
 
 If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String|WPElement`
+-   Type: `String|Element`
 -   Required: No
 
 #### multiple
 
-If this property is added, multiple values can be selected. The value passed should be an array.
+If this property is added, multiple values can be selected. The `value` passed should be an array.
+
+In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
 
 -   Type: `Boolean`
 -   Required: No
 
 #### options
 
-An array of objects containing the following properties:
+An array of objects containing the following properties, as well as any other `option` element attributes:
 
 -   `label`: (string) The label to be shown to the user.
 -   `value`: (string) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
@@ -218,6 +214,29 @@ If multiple is false the value received is a single value with the new selected
 -   Type: `function`
 -   Required: Yes
 
+#### value
+
+The value of the selected option. If `multiple` is true, the `value` should be an array with the values of the selected options.
+
+-   Type: `String|String[]`
+-   Required: No
+
+#### variant
+
+The style variant of the control.
+
+-   Type: `'default' | 'minimal'`
+-   Required: No
+-   Default: `'default'`
+
+### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ### __nextHasNoMarginBottom
 
 Start opting into the new margin-free styles that will become the default in a future version.
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 2abd647388cf27..3686661b8a58dc 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -1,26 +1,23 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
-import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import InputBase from '../input-control/input-base';
-import { Select } from './styles/select-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import { Select, StyledInputBase } from './styles/select-control-styles';
+import type { WordPressComponentProps } from '../context';
 import type { SelectControlProps } from './types';
 import SelectControlChevronDown from './chevron-down';
-
-const noop = () => {};
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
@@ -29,8 +26,27 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-function UnforwardedSelectControl(
-	{
+function SelectOptions( {
+	options,
+}: {
+	options: NonNullable< SelectControlProps[ 'options' ] >;
+} ) {
+	return options.map( ( { id, label, value, ...optionProps }, index ) => {
+		const key = id || `${ label }-${ value }-${ index }`;
+
+		return (
+			<option key={ key } value={ value } { ...optionProps }>
+				{ label }
+			</option>
+		);
+	} );
+}
+
+function UnforwardedSelectControl< V extends string >(
+	props: WordPressComponentProps< SelectControlProps< V >, 'select', false >,
+	ref: React.ForwardedRef< HTMLSelectElement >
+) {
+	const {
 		className,
 		disabled = false,
 		help,
@@ -38,9 +54,7 @@ function UnforwardedSelectControl(
 		id: idProp,
 		label,
 		multiple = false,
-		onBlur = noop,
-		onChange = noop,
-		onFocus = noop,
+		onChange,
 		options = [],
 		size = 'default',
 		value: valueProp,
@@ -48,107 +62,90 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
-		__next36pxDefaultSize = false,
+		variant = 'default',
+		__next40pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
-		...props
-	}: WordPressComponentProps< SelectControlProps, 'select', false >,
-	ref: ForwardedRef< HTMLSelectElement >
-) {
-	const [ isFocused, setIsFocused ] = useState( false );
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp( props );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
 	// Disable reason: A select with an onchange throws a warning.
-	if ( ! options?.length && ! children ) return null;
-
-	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {
-		onBlur( event );
-		setIsFocused( false );
-	};
-
-	const handleOnFocus = ( event: FocusEvent< HTMLSelectElement > ) => {
-		onFocus( event );
-		setIsFocused( true );
-	};
-
-	const handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {
-		if ( multiple ) {
+	if ( ! options?.length && ! children ) {
+		return null;
+	}
+
+	const handleOnChange = (
+		event: React.ChangeEvent< HTMLSelectElement >
+	) => {
+		if ( props.multiple ) {
 			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
-			const newValues = selectedOptions.map( ( { value } ) => value );
-			onChange( newValues );
+			const newValues = selectedOptions.map(
+				( { value } ) => value as V
+			);
+			props.onChange?.( newValues, { event } );
 			return;
 		}
 
-		onChange( event.target.value, { event } );
+		props.onChange?.( event.target.value as V, { event } );
 	};
 
-	const classes = classNames( 'components-select-control', className );
+	const classes = clsx( 'components-select-control', className );
 
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<BaseControl
 			help={ help }
 			id={ id }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="SelectControl"
 		>
-			<InputBase
+			<StyledInputBase
 				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
+				isBorderless={ variant === 'minimal' }
 				label={ label }
 				size={ size }
-				suffix={ suffix || <SelectControlChevronDown /> }
+				suffix={
+					suffix || ( ! multiple && <SelectControlChevronDown /> )
+				}
 				prefix={ prefix }
 				labelPosition={ labelPosition }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__unstableInputWidth={
+					variant === 'minimal' ? 'auto' : undefined
+				}
+				variant={ variant }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 			>
 				<Select
-					{ ...props }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					{ ...restProps }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }
 					id={ id }
 					multiple={ multiple }
-					onBlur={ handleOnBlur }
 					onChange={ handleOnChange }
-					onFocus={ handleOnFocus }
 					ref={ ref }
 					selectSize={ size }
 					value={ valueProp }
+					variant={ variant }
 				>
-					{ children ||
-						options.map( ( option, index ) => {
-							const key =
-								option.id ||
-								`${ option.label }-${ option.value }-${ index }`;
-
-							return (
-								<option
-									key={ key }
-									value={ option.value }
-									disabled={ option.disabled }
-								>
-									{ option.label }
-								</option>
-							);
-						} ) }
+					{ children || <SelectOptions options={ options } /> }
 				</Select>
-			</InputBase>
+			</StyledInputBase>
 		</BaseControl>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 /**
  * `SelectControl` allows users to select from a single or multiple option menu.
  * It functions as a wrapper around the browser's native `<select>` element.
  *
- * @example
+ * ```jsx
  * import { SelectControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
@@ -157,6 +154,7 @@ function UnforwardedSelectControl(
  *
  *   return (
  *     <SelectControl
+ *       __nextHasNoMarginBottom
  *       label="Size"
  *       value={ size }
  *       options={ [
@@ -168,7 +166,16 @@ function UnforwardedSelectControl(
  *     />
  *   );
  * };
+ * ```
  */
-export const SelectControl = forwardRef( UnforwardedSelectControl );
+export const SelectControl = forwardRef( UnforwardedSelectControl ) as <
+	V extends string,
+>(
+	props: WordPressComponentProps<
+		SelectControlProps< V >,
+		'select',
+		false
+	> & { ref?: React.Ref< HTMLSelectElement > }
+) => React.JSX.Element | null;
 
 export default SelectControl;
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..d872df540602e4
--- /dev/null
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SelectControl from '../';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
+
+const meta: Meta< typeof SelectControl > = {
+	title: 'Components/Selection & Input/Common/SelectControl',
+	id: 'components-selectcontrol',
+	component: SelectControl,
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		prefix: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
+	const [ selection, setSelection ] = useState< string[] >();
+
+	if ( props.multiple ) {
+		return (
+			<SelectControl
+				{ ...props }
+				multiple
+				value={ selection }
+				onChange={ ( value ) => {
+					setSelection( value );
+					props.onChange?.( value );
+				} }
+			/>
+		);
+	}
+
+	return (
+		<SelectControl
+			{ ...props }
+			multiple={ false }
+			value={ selection?.[ 0 ] }
+			onChange={ ( value ) => {
+				setSelection( [ value ] );
+				props.onChange?.( value );
+			} }
+		/>
+	);
+};
+
+export const Default = SelectControlWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Label',
+	options: [
+		{ value: '', label: 'Select an Option', disabled: true },
+		{ value: 'a', label: 'Option A' },
+		{ value: 'b', label: 'Option B' },
+		{ value: 'c', label: 'Option C' },
+	],
+};
+
+export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
+WithLabelAndHelpText.args = {
+	...Default.args,
+	help: 'Help text to explain the select control.',
+};
+
+/**
+ * As an alternative to the `options` prop, `optgroup`s and `options` can be
+ * passed in as `children` for more customizeability.
+ */
+export const WithCustomChildren = SelectControlWithState.bind( {} );
+WithCustomChildren.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Label',
+	children: (
+		<>
+			<option value="option-1">Option 1</option>
+			<option value="option-2" disabled>
+				Option 2 - Disabled
+			</option>
+			<optgroup label="Option Group 1">
+				<option value="option-group-1-option-1">
+					Option Group 1 - Option 1
+				</option>
+				<option value="option-group-1-option-2" disabled>
+					Option Group 1 - Option 2 - Disabled
+				</option>
+			</optgroup>
+		</>
+	),
+};
+
+/**
+ * By default, the prefix is aligned with the edge of the input border, with no padding.
+ * If you want to apply standard padding in accordance with the size variant, wrap the element in the `<InputControlPrefixWrapper>` component.
+ */
+export const WithPrefix = SelectControlWithState.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <InputControlPrefixWrapper>Prefix:</InputControlPrefixWrapper>,
+};
+
+export const Minimal = SelectControlWithState.bind( {} );
+Minimal.args = {
+	...Default.args,
+	variant: 'minimal',
+	hideLabelFromVision: true,
+};
diff --git a/packages/components/src/select-control/stories/index.tsx b/packages/components/src/select-control/stories/index.tsx
deleted file mode 100644
index a8cf1be478954a..00000000000000
--- a/packages/components/src/select-control/stories/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SelectControl from '../';
-
-const meta: ComponentMeta< typeof SelectControl > = {
-	title: 'Components/SelectControl',
-	component: SelectControl,
-	argTypes: {
-		help: { control: { type: 'text' } },
-		label: { control: { type: 'text' } },
-		prefix: { control: { type: 'text' } },
-		suffix: { control: { type: 'text' } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const SelectControlWithState: ComponentStory< typeof SelectControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ selection, setSelection ] =
-		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
-
-	return (
-		<SelectControl
-			{ ...args }
-			value={ selection }
-			onChange={ ( value ) => {
-				setSelection( value );
-				onChange?.( value );
-			} }
-		/>
-	);
-};
-
-export const Default = SelectControlWithState.bind( {} );
-Default.args = {
-	options: [
-		{ value: '', label: 'Select an Option', disabled: true },
-		{ value: 'a', label: 'Option A' },
-		{ value: 'b', label: 'Option B' },
-		{ value: 'c', label: 'Option C' },
-	],
-};
-
-export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
-WithLabelAndHelpText.args = {
-	...Default.args,
-	help: 'Help text to explain the select control.',
-	label: 'Value',
-};
-
-/**
- * As an alternative to the `options` prop, `optgroup`s and `options` can be
- * passed in as `children` for more customizability.
- */
-export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
-	args
-) => {
-	return (
-		<SelectControlWithState { ...args }>
-			<option value="option-1">Option 1</option>
-			<option value="option-2" disabled>
-				Option 2 - Disabled
-			</option>
-			<optgroup label="Option Group 1">
-				<option value="option-group-1-option-1">
-					Option Group 1 - Option 1
-				</option>
-				<option value="option-group-1-option-2" disabled>
-					Option Group 1 - Option 2 - Disabled
-				</option>
-			</optgroup>
-		</SelectControlWithState>
-	);
-};
diff --git a/packages/components/src/select-control/style.scss b/packages/components/src/select-control/style.scss
index b59fa2160b9526..1558314af554f8 100644
--- a/packages/components/src/select-control/style.scss
+++ b/packages/components/src/select-control/style.scss
@@ -1,16 +1,6 @@
 .components-select-control__input {
-	background: $white;
-	height: 36px;
-	line-height: 36px;
-	margin: 1px;
 	outline: 0;
-	width: 100%;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
-
-	@include break-medium() {
-		height: 28px;
-		line-height: 28px;
-	}
 }
 
 @media (max-width: #{ ($break-medium) }) {
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index e0976c9f507697..5248e7af988285 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -7,55 +7,67 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { COLORS, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { COLORS, rtl, CONFIG } from '../../utils';
+import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
+import { fontSizeStyles } from '../../input-control/styles/input-control-styles';
+import InputBase from '../../input-control/input-base';
 
 interface SelectProps
-	extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > {
+	extends Pick<
+		SelectControlProps,
+		'__next40pxDefaultSize' | 'disabled' | 'multiple' | 'variant'
+	> {
 	// Using `selectSize` instead of `size` to avoid a type conflict with the
 	// `size` HTML attribute of the `select` element.
 	selectSize?: SelectControlProps[ 'size' ];
 }
 
 const disabledStyles = ( { disabled }: SelectProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
-	return css( {
-		color: COLORS.ui.textDisabled,
-	} );
+	return css`
+		color: ${ COLORS.ui.textDisabled };
+		cursor: default;
+	`;
 };
 
-const fontSizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
-	const sizes = {
-		default: '13px',
-		small: '11px',
-		'__unstable-large': '13px',
-	};
-
-	const fontSize = sizes[ selectSize ];
-	const fontSizeMobile = '16px';
+const inputBaseVariantStyles = ( { variant }: SelectProps ) => {
+	if ( variant === 'minimal' ) {
+		return css`
+			display: inline-flex;
+		`;
+	}
 
-	if ( ! fontSize ) return '';
+	return '';
+};
 
-	return css`
-		font-size: ${ fontSizeMobile };
+export const StyledInputBase = styled( InputBase )`
+	color: ${ COLORS.theme.foreground };
+	cursor: pointer;
 
-		@media ( min-width: 600px ) {
-			font-size: ${ fontSize };
-		}
-	`;
-};
+	${ disabledStyles }
+	${ inputBaseVariantStyles }
+`;
 
 const sizeStyles = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
+	multiple,
 	selectSize = 'default',
 }: SelectProps ) => {
+	if ( multiple ) {
+		// When `multiple`, just use the native browser styles
+		// without setting explicit height.
+		return;
+	}
+
 	const sizes = {
 		default: {
-			height: 36,
-			minHeight: 36,
+			height: 40,
+			minHeight: 40,
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
@@ -65,6 +77,12 @@ const sizeStyles = ( {
 			paddingTop: 0,
 			paddingBottom: 0,
 		},
+		compact: {
+			height: 32,
+			minHeight: 32,
+			paddingTop: 0,
+			paddingBottom: 0,
+		},
 		'__unstable-large': {
 			height: 40,
 			minHeight: 40,
@@ -73,13 +91,8 @@ const sizeStyles = ( {
 		},
 	};
 
-	if ( ! __next36pxDefaultSize ) {
-		sizes.default = {
-			height: 30,
-			minHeight: 30,
-			paddingTop: 0,
-			paddingBottom: 0,
-		};
+	if ( ! __next40pxDefaultSize ) {
+		sizes.default = sizes.compact;
 	}
 
 	const style = sizes[ selectSize ] || sizes.default;
@@ -90,34 +103,49 @@ const sizeStyles = ( {
 export const chevronIconSize = 18;
 
 const sizePaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
+	multiple,
 	selectSize = 'default',
 }: SelectProps ) => {
-	const iconWidth = chevronIconSize;
+	const padding = {
+		default: CONFIG.controlPaddingX,
+		small: CONFIG.controlPaddingXSmall,
+		compact: CONFIG.controlPaddingXSmall,
+		'__unstable-large': CONFIG.controlPaddingX,
+	};
 
-	const sizes = {
-		default: {
-			paddingLeft: 16,
-			paddingRight: 16 + iconWidth,
-		},
-		small: {
-			paddingLeft: 8,
-			paddingRight: 8 + iconWidth,
-		},
-		'__unstable-large': {
-			paddingLeft: 16,
-			paddingRight: 16 + iconWidth,
-		},
+	if ( ! __next40pxDefaultSize ) {
+		padding.default = padding.compact;
+	}
+
+	const selectedPadding = padding[ selectSize ] || padding.default;
+
+	return rtl( {
+		paddingLeft: selectedPadding,
+		paddingRight: selectedPadding + chevronIconSize,
+		...( multiple
+			? {
+					paddingTop: selectedPadding,
+					paddingBottom: selectedPadding,
+			  }
+			: {} ),
+	} );
+};
+
+const overflowStyles = ( { multiple }: SelectProps ) => {
+	return {
+		overflow: multiple ? 'auto' : 'hidden',
 	};
+};
 
-	if ( ! __next36pxDefaultSize ) {
-		sizes.default = {
-			paddingLeft: 8,
-			paddingRight: 8 + iconWidth,
-		};
+const variantStyles = ( { variant }: SelectProps ) => {
+	if ( variant === 'minimal' ) {
+		return css( {
+			fieldSizing: 'content',
+		} );
 	}
 
-	return rtl( sizes[ selectSize ] || sizes.default );
+	return '';
 };
 
 // TODO: Resolve need to use &&& to increase specificity
@@ -130,27 +158,31 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.gray[ 900 ] };
+		color: currentColor; // Overrides hover/focus styles in forms.css
+		cursor: inherit;
 		display: block;
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
 		max-width: none;
-		cursor: pointer;
-		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
-		${ disabledStyles };
 		${ fontSizeStyles };
 		${ sizeStyles };
 		${ sizePaddings };
+		${ overflowStyles }
+		${ variantStyles }
 	}
 `;
 
 export const DownArrowWrapper = styled.div`
 	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
 	line-height: 0;
+
+	path {
+		fill: currentColor;
+	}
 `;
 
 export const InputControlSuffixWrapperWithClickThrough = styled(
diff --git a/packages/components/src/select-control/test/select-control.tsx b/packages/components/src/select-control/test/select-control.tsx
index 3e0dd45d62b586..47b684cd20e280 100644
--- a/packages/components/src/select-control/test/select-control.tsx
+++ b/packages/components/src/select-control/test/select-control.tsx
@@ -7,12 +7,13 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import SelectControl from '..';
+import _SelectControl from '..';
 
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const SelectControl = (
+	props: React.ComponentProps< typeof _SelectControl >
+) => {
+	return <_SelectControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'SelectControl', () => {
 	it( 'should not render when no options or children are provided', () => {
@@ -22,8 +23,8 @@ describe( 'SelectControl', () => {
 		expect( screen.queryByRole( 'combobox' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should not render its children', async () => {
-		const user = setupUser();
+	it( 'should render its children', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -51,8 +52,8 @@ describe( 'SelectControl', () => {
 		);
 	} );
 
-	it( 'should not render its options', async () => {
-		const user = setupUser();
+	it( 'should render its options', async () => {
+		const user = userEvent.setup();
 		const handleChangeMock = jest.fn();
 
 		render(
@@ -86,4 +87,148 @@ describe( 'SelectControl', () => {
 			expect.anything()
 		);
 	} );
+
+	it( 'should pass through options props', () => {
+		render(
+			<SelectControl
+				label="Select"
+				options={ [
+					{
+						value: 'value',
+						label: 'label',
+						'aria-label': 'Aria label',
+					},
+				] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'option', { name: 'Aria label' } )
+		).toBeInTheDocument();
+	} );
+
+	/* eslint-disable jest/expect-expect */
+	describe( 'static typing', () => {
+		describe( 'single', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: ( value: 'foo' | 'bar' ) => void = () => {};
+
+				<SelectControl
+					value="narrow"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<_SelectControl
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error "string" is not "narrow" or "value"
+					onChange={ ( value ) => value === 'string' }
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<_SelectControl< 'narrow' | 'value' >
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value="string"
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+
+		describe( 'multiple', () => {
+			it( 'should infer the value type from available `options`, but not the `value` or `onChange` prop', () => {
+				const onChange: (
+					value: ( 'foo' | 'bar' )[]
+				) => void = () => {};
+
+				<_SelectControl
+					multiple
+					value={ [ 'narrow' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					// @ts-expect-error onChange type is not compatible with inferred value type
+					onChange={ onChange }
+				/>;
+
+				<_SelectControl
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							value: 'value',
+							label: 'Value',
+						},
+					] }
+					onChange={ ( value ) =>
+						// @ts-expect-error "string" is not "narrow" or "value"
+						value.forEach( ( v ) => v === 'string' )
+					}
+				/>;
+			} );
+
+			it( 'should accept an explicit type argument', () => {
+				<_SelectControl< 'narrow' | 'value' >
+					multiple
+					// @ts-expect-error "string" is not "narrow" or "value"
+					value={ [ 'string' ] }
+					options={ [
+						{
+							value: 'narrow',
+							label: 'Narrow',
+						},
+						{
+							// @ts-expect-error "string" is not "narrow" or "value"
+							value: 'string',
+							label: 'String',
+						},
+					] }
+				/>;
+			} );
+		} );
+	} );
+	/* eslint-enable jest/expect-expect */
 } );
diff --git a/packages/components/src/select-control/types.ts b/packages/components/src/select-control/types.ts
index 6126ba5043d6c4..4e7211ab9abfb2 100644
--- a/packages/components/src/select-control/types.ts
+++ b/packages/components/src/select-control/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -9,59 +9,107 @@ import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
 
-export interface SelectControlProps
-	extends Pick<
-			InputBaseProps,
-			| '__next36pxDefaultSize'
-			| 'disabled'
-			| 'hideLabelFromVision'
-			| 'label'
-			| 'labelPosition'
-			| 'prefix'
-			| 'size'
-			| 'suffix'
-		>,
-		Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > {
-	/**
-	 * If this property is added, multiple values can be selected. The value passed should be an array.
-	 *
-	 * @default false
-	 */
-	multiple?: boolean;
-	onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-	onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-	/**
-	 * A function that receives the value of the new option that is being selected as input.
-	 *
-	 * If `multiple` is `true`, the value received is an array of the selected value.
-	 * Otherwise, the value received is a single value with the new selected value.
-	 */
-	onChange?: (
-		value: string | string[],
-		extra?: { event?: ChangeEvent< HTMLSelectElement > }
-	) => void;
-	options?: {
+type SelectControlBaseProps< V extends string > = Pick<
+	InputBaseProps,
+	| '__next36pxDefaultSize'
+	| '__next40pxDefaultSize'
+	| 'disabled'
+	| 'hideLabelFromVision'
+	| 'label'
+	| 'labelPosition'
+	| 'prefix'
+	| 'size'
+	| 'suffix'
+> &
+	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
 		/**
-		 * The label to be shown to the user.
+		 * An array of option property objects to be rendered,
+		 * each with a `label` and `value` property, as well as any other
+		 * `<option>` attributes.
 		 */
-		label: string;
+		options?: readonly ( {
+			/**
+			 * The label to be shown to the user.
+			 */
+			label: string;
+			/**
+			 * The internal value used to choose the selected value.
+			 * This is also the value passed to `onChange` when the option is selected.
+			 */
+			value: V;
+		} & Omit<
+			React.OptionHTMLAttributes< HTMLOptionElement >,
+			'label' | 'value'
+		> )[];
 		/**
-		 * The internal value used to choose the selected value.
-		 * This is also the value passed to `onChange` when the option is selected.
+		 * As an alternative to the `options` prop, `optgroup`s and `options` can be
+		 * passed in as `children` for more customizability.
 		 */
-		value: string;
-		id?: string;
+		children?: ReactNode;
 		/**
-		 * Whether or not the option should have the disabled attribute.
+		 * The style variant of the control.
+		 *
+		 * @default 'default'
+		 */
+		variant?: 'default' | 'minimal';
+	};
+
+export type SelectControlSingleSelectionProps< V extends string = string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+		 *
+		 * @default false
+		 */
+		multiple?: false;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >;
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >,
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
+
+export type SelectControlMultipleSelectionProps< V extends string > =
+	SelectControlBaseProps< V > & {
+		/**
+		 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+		 *
+		 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
 		 *
 		 * @default false
 		 */
-		disabled?: boolean;
-	}[];
-	value?: string | string[];
-	/**
-	 * As an alternative to the `options` prop, `optgroup`s and `options` can be
-	 * passed in as `children` for more customizability.
-	 */
-	children?: ReactNode;
-}
+		multiple: true;
+		/**
+		 * The value of the selected option.
+		 *
+		 * If `multiple` is true, the `value` should be an array with the values of the selected options.
+		 */
+		value?: NoInfer< V >[];
+		/**
+		 * A function that receives the value of the new option that is being selected as input.
+		 *
+		 * If `multiple` is `true`, the value received is an array of the selected value.
+		 * Otherwise, the value received is a single value with the new selected value.
+		 */
+		onChange?: (
+			value: NoInfer< V >[],
+			extra?: { event?: ChangeEvent< HTMLSelectElement > }
+		) => void;
+	};
+
+export type SelectControlProps< V extends string = string > =
+	| SelectControlSingleSelectionProps< V >
+	| SelectControlMultipleSelectionProps< V >;
diff --git a/packages/components/src/shortcut/index.tsx b/packages/components/src/shortcut/index.tsx
index dbdaa955384f55..5ba7c7efdfff02 100644
--- a/packages/components/src/shortcut/index.tsx
+++ b/packages/components/src/shortcut/index.tsx
@@ -3,6 +3,19 @@
  */
 import type { ShortcutProps } from './types';
 
+/**
+ * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
+ *
+ * ```jsx
+ * import { Shortcut } from '@wordpress/components';
+ *
+ * const MyShortcut = () => {
+ * 	return (
+ * 		<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
+ * 	);
+ * };
+ * ```
+ */
 function Shortcut( props: ShortcutProps ) {
 	const { shortcut, className } = props;
 
diff --git a/packages/components/src/shortcut/stories/index.story.tsx b/packages/components/src/shortcut/stories/index.story.tsx
new file mode 100644
index 00000000000000..b0bd31ac51cf4b
--- /dev/null
+++ b/packages/components/src/shortcut/stories/index.story.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from '../';
+
+const meta: Meta< typeof Shortcut > = {
+	component: Shortcut,
+	title: 'Components/Utilities/Shortcut',
+	id: 'components-shortcut',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Shortcut > = ( props ) => {
+	return <Shortcut shortcut="Ctrl + S" { ...props } />;
+};
+
+export const Default: StoryFn< typeof Shortcut > = Template.bind( {} );
+
+export const WithAriaLabel = Template.bind( {} );
+WithAriaLabel.args = {
+	...Default.args,
+	shortcut: { display: 'Ctrl + L', ariaLabel: 'Load' },
+};
diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md
index 5c7455f6a555e8..3f14b9ccde9eeb 100644
--- a/packages/components/src/slot-fill/README.md
+++ b/packages/components/src/slot-fill/README.md
@@ -1,18 +1,18 @@
-# Slot Fill
+# Slot/Fill
 
-Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as "portal" rendering. It is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application.
+`Slot` and `Fill` are a pair of components which enable developers to render React UI elsewhere in a React element tree, a pattern often referred to as "portal" rendering. It is a pattern for component extensibility, where a single `Slot` may be occupied by multiple `Fill`s rendered in different parts of the application.
 
-Slot Fill is heavily inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill), but uses React's own portal rendering API.
+Slot/Fill was originally inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill).
 
 ## Usage
 
-At the root of your application, you must render a `SlotFillProvider` which coordinates Slot and Fill rendering.
+At the root of your application, you must render a `SlotFillProvider` which coordinates `Slot` and `Fill` rendering.
 
-Then, render a Slot component anywhere in your application, giving it a name.
+Then, render a `Slot` component anywhere in your application, giving it a `name`. The `name` is either a `string` or a symbol. Symbol names are useful for slots that are supposed to be private, accessible only to clients that have access to the symbol value.
 
-Any Fill will automatically occupy this Slot space, even if rendered elsewhere in the application.
+Any `Fill` will render its UI in this `Slot` space, even if rendered elsewhere in the application.
 
-You can either use the Fill component directly, or a wrapper component type as in the below example to abstract the slot name from consumer awareness.
+You can either use the `Fill` component directly, or create a wrapper component (as in the following example) to hide the slot name from the consumer.
 
 ```jsx
 import {
@@ -43,7 +43,7 @@ const MySlotFillProvider = () => {
 };
 ```
 
-There is also `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
+There is also the `createSlotFill` helper method which was created to simplify the process of matching the corresponding `Slot` and `Fill` components:
 
 ```jsx
 const { Fill, Slot } = createSlotFill( 'Toolbar' );
@@ -59,18 +59,27 @@ const Toolbar = () => (
 
 ## Props
 
-The `SlotFillProvider` component does not accept any props.
+The `SlotFillProvider` component does not accept any props (except `children`).
 
 Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given `name` will render the `children` of any associated `Fill`s.
 
-`Slot` accepts a `bubblesVirtually` prop which changes the event bubbling behaviour:
+`Slot` accepts a `bubblesVirtually` prop which changes the method how the `Fill` children are rendered. With `bubblesVirtually`, the `Fill` is rendered using a React portal. That affects the event bubbling and React context propagation behaviour:
 
--   By default, events will bubble to their parents on the DOM hierarchy (native event bubbling)
--   If `bubblesVirtually` is set to true, events will bubble to their virtual parent in the React elements hierarchy instead.
+### `bubblesVirtually=false`
 
-`Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
+-   events will bubble to their parents on the DOM hierarchy (native event bubbling)
+-   the React elements inside the `Fill` will be rendered with React context of the `Slot`
+-   renders the `Fill` elements directly, inside a `Fragment`, with no wrapper DOM element
 
-`Slot` also accepts optional `children` function prop, which takes `fills` as a param. It allows to perform additional processing and wrap `fills` conditionally.
+### `bubblesVirtually=true`
+
+-   events will bubble to their virtual (React) parent in the React elements hierarchy
+-   the React elements inside the `Fill` will keep the React context of the `Fill` and its parents
+-   renders a wrapper DOM element inside which the `Fill` elements are rendered (used as an argument for React `createPortal`)
+
+`Slot` with `bubblesVirtually=true` renders a wrapper DOM element (a `div` by default) and accepts additional props that customize this element, like `className` or `style`. You can also replace the `div` with another element by passing an `as` prop.
+
+`Slot` **without** `bubblesVirtually` accepts an optional `children` prop, which is a function that receives `fills` array as a param. It allows you to perform additional processing: render a placeholder when there are no fills, or render a wrapper only when there are fills.
 
 _Example_:
 
@@ -89,3 +98,30 @@ const Toolbar = ( { isMobile } ) => (
 	</div>
 );
 ```
+
+Additional information (props) can also be passed from a `Slot` to a `Fill` by a combination of:
+1. Adding a `fillProps` prop to the `Slot`.
+2. Passing a function as `children` to the `Fill`. This function will receive the `fillProps` as an argument.
+
+```jsx
+const { Fill, Slot } = createSlotFill( 'Toolbar' );
+
+const ToolbarItem = () => (
+	<Fill>
+		{ ( { hideToolbar } ) => {
+			<Button onClick={ hideToolbar }>Hide</Button>;
+		} }
+	</Fill>
+);
+
+const Toolbar = () => {
+	const hideToolbar = () => {
+		console.log( 'Hide toolbar' );
+	};
+	return (
+		<div className="toolbar">
+			<Slot fillProps={ { hideToolbar } } />
+		</div>
+	);
+};
+```
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.js b/packages/components/src/slot-fill/bubbles-virtually/fill.js
deleted file mode 100644
index c18d745ca94688..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/fill.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useSlot from './use-slot';
-import StyleProvider from '../../style-provider';
-
-function useForceUpdate() {
-	const [ , setState ] = useState( {} );
-	const mounted = useRef( true );
-
-	useEffect( () => {
-		return () => {
-			mounted.current = false;
-		};
-	}, [] );
-
-	return () => {
-		if ( mounted.current ) {
-			setState( {} );
-		}
-	};
-}
-
-export default function Fill( { name, children } ) {
-	const { registerFill, unregisterFill, ...slot } = useSlot( name );
-	const ref = useRef( { rerender: useForceUpdate() } );
-
-	useEffect( () => {
-		// We register fills so we can keep track of their existence.
-		// Some Slot implementations need to know if there're already fills
-		// registered so they can choose to render themselves or not.
-		registerFill( ref );
-		return () => {
-			unregisterFill( ref );
-		};
-	}, [ registerFill, unregisterFill ] );
-
-	if ( ! slot.ref || ! slot.ref.current ) {
-		return null;
-	}
-
-	if ( typeof children === 'function' ) {
-		children = children( slot.fillProps );
-	}
-
-	// When using a `Fill`, the `children` will be rendered in the document of the
-	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
-	// to make sure we're referencing the right document/iframe (instead of the
-	// context of the `Fill`'s parent).
-	const wrappedChildren = (
-		<StyleProvider document={ slot.ref.current.ownerDocument }>
-			{ children }
-		</StyleProvider>
-	);
-
-	return createPortal( wrappedChildren, slot.ref.current );
-}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.tsx b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
new file mode 100644
index 00000000000000..ef7bc94ff540bd
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/fill.tsx
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useObservableValue } from '@wordpress/compose';
+import {
+	useContext,
+	useRef,
+	useEffect,
+	createPortal,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import StyleProvider from '../../style-provider';
+import type { FillComponentProps } from '../types';
+
+export default function Fill( { name, children }: FillComponentProps ) {
+	const registry = useContext( SlotFillContext );
+	const slot = useObservableValue( registry.slots, name );
+	const instanceRef = useRef( {} );
+
+	// We register fills so we can keep track of their existence.
+	// Slots can use the `useSlotFills` hook to know if there're already fills
+	// registered so they can choose to render themselves or not.
+	useEffect( () => {
+		const instance = instanceRef.current;
+		registry.registerFill( name, instance );
+		return () => registry.unregisterFill( name, instance );
+	}, [ registry, name ] );
+
+	if ( ! slot || ! slot.ref.current ) {
+		return null;
+	}
+
+	// When using a `Fill`, the `children` will be rendered in the document of the
+	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
+	// to make sure we're referencing the right document/iframe (instead of the
+	// context of the `Fill`'s parent).
+	const wrappedChildren = (
+		<StyleProvider document={ slot.ref.current.ownerDocument }>
+			{ typeof children === 'function'
+				? children( slot.fillProps ?? {} )
+				: children }
+		</StyleProvider>
+	);
+
+	return createPortal( wrappedChildren, slot.ref.current );
+}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
deleted file mode 100644
index cd1576fd19c3ac..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { proxyMap } from 'valtio/utils';
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-import warning from '@wordpress/warning';
-
-const SlotFillContext = createContext( {
-	slots: proxyMap(),
-	fills: proxyMap(),
-	registerSlot: () => {
-		warning(
-			'Components must be wrapped within `SlotFillProvider`. ' +
-				'See https://developer.wordpress.org/block-editor/components/slot-fill/'
-		);
-	},
-	updateSlot: () => {},
-	unregisterSlot: () => {},
-	registerFill: () => {},
-	unregisterFill: () => {},
-} );
-
-export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
new file mode 100644
index 00000000000000..a144a7dc33f464
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+import warning from '@wordpress/warning';
+import { observableMap } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { SlotFillBubblesVirtuallyContext } from '../types';
+
+const initialContextValue: SlotFillBubblesVirtuallyContext = {
+	slots: observableMap(),
+	fills: observableMap(),
+	registerSlot: () => {
+		warning(
+			'Components must be wrapped within `SlotFillProvider`. ' +
+				'See https://developer.wordpress.org/block-editor/components/slot-fill/'
+		);
+	},
+	updateSlot: () => {},
+	unregisterSlot: () => {},
+	registerFill: () => {},
+	unregisterFill: () => {},
+
+	// This helps the provider know if it's using the default context value or not.
+	isDefault: true,
+};
+
+const SlotFillContext = createContext( initialContextValue );
+
+export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js
deleted file mode 100644
index 47c31f1906cfa4..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { ref as valRef } from 'valtio';
-import { proxyMap } from 'valtio/utils';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useCallback, useRef } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-function useSlotRegistry() {
-	const slots = useRef( proxyMap() );
-	const fills = useRef( proxyMap() );
-
-	const registerSlot = useCallback( ( name, ref, fillProps ) => {
-		const slot = slots.current.get( name ) || {};
-		slots.current.set(
-			name,
-			valRef( {
-				...slot,
-				ref: ref || slot.ref,
-				fillProps: fillProps || slot.fillProps || {},
-			} )
-		);
-	}, [] );
-
-	const unregisterSlot = useCallback( ( name, ref ) => {
-		// Make sure we're not unregistering a slot registered by another element
-		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-		if ( slots.current.get( name )?.ref === ref ) {
-			slots.current.delete( name );
-		}
-	}, [] );
-
-	const updateSlot = useCallback( ( name, fillProps ) => {
-		const slot = slots.current.get( name );
-		if ( ! slot ) {
-			return;
-		}
-
-		if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
-			slot.fillProps = fillProps;
-			const slotFills = fills.current.get( name );
-			if ( slotFills ) {
-				// Force update fills.
-				slotFills.map( ( fill ) => fill.current.rerender() );
-			}
-		}
-	}, [] );
-
-	const registerFill = useCallback( ( name, ref ) => {
-		fills.current.set(
-			name,
-			valRef( [ ...( fills.current.get( name ) || [] ), ref ] )
-		);
-	}, [] );
-
-	const unregisterFill = useCallback( ( name, ref ) => {
-		if ( fills.current.get( name ) ) {
-			fills.current.set(
-				name,
-				valRef(
-					fills.current
-						.get( name )
-						.filter( ( fillRef ) => fillRef !== ref )
-				)
-			);
-		}
-	}, [] );
-
-	// Memoizing the return value so it can be directly passed to Provider value
-	const registry = useMemo(
-		() => ( {
-			slots: slots.current,
-			fills: fills.current,
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		} ),
-		[
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		]
-	);
-
-	return registry;
-}
-
-export default function SlotFillProvider( { children } ) {
-	const registry = useSlotRegistry();
-	return (
-		<SlotFillContext.Provider value={ registry }>
-			{ children }
-		</SlotFillContext.Provider>
-	);
-}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
new file mode 100644
index 00000000000000..cf692700eef79c
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+import { observableMap } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import type {
+	SlotFillProviderProps,
+	SlotFillBubblesVirtuallyContext,
+} from '../types';
+
+function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
+	const slots: SlotFillBubblesVirtuallyContext[ 'slots' ] = observableMap();
+	const fills: SlotFillBubblesVirtuallyContext[ 'fills' ] = observableMap();
+
+	const registerSlot: SlotFillBubblesVirtuallyContext[ 'registerSlot' ] = (
+		name,
+		ref,
+		fillProps
+	) => {
+		slots.set( name, { ref, fillProps } );
+	};
+
+	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
+		( name, ref ) => {
+			const slot = slots.get( name );
+			if ( ! slot ) {
+				return;
+			}
+
+			// Make sure we're not unregistering a slot registered by another element
+			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+			if ( slot.ref !== ref ) {
+				return;
+			}
+
+			slots.delete( name );
+		};
+
+	const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
+		name,
+		ref,
+		fillProps
+	) => {
+		const slot = slots.get( name );
+		if ( ! slot ) {
+			return;
+		}
+
+		if ( slot.ref !== ref ) {
+			return;
+		}
+
+		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+			return;
+		}
+
+		slots.set( name, { ref, fillProps } );
+	};
+
+	const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (
+		name,
+		ref
+	) => {
+		fills.set( name, [ ...( fills.get( name ) || [] ), ref ] );
+	};
+
+	const unregisterFill: SlotFillBubblesVirtuallyContext[ 'unregisterFill' ] =
+		( name, ref ) => {
+			const fillsForName = fills.get( name );
+			if ( ! fillsForName ) {
+				return;
+			}
+
+			fills.set(
+				name,
+				fillsForName.filter( ( fillRef ) => fillRef !== ref )
+			);
+		};
+
+	return {
+		slots,
+		fills,
+		registerSlot,
+		updateSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+	};
+}
+
+export default function SlotFillProvider( {
+	children,
+}: SlotFillProviderProps ) {
+	const [ registry ] = useState( createSlotRegistry );
+	return (
+		<SlotFillContext.Provider value={ registry }>
+			{ children }
+		</SlotFillContext.Provider>
+	);
+}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js
deleted file mode 100644
index ef7ad56cc68bac..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/slot.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import {
-	useRef,
-	useLayoutEffect,
-	useContext,
-	forwardRef,
-} from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-function Slot(
-	{ name, fillProps = {}, as: Component = 'div', ...props },
-	forwardedRef
-) {
-	const { registerSlot, unregisterSlot, ...registry } =
-		useContext( SlotFillContext );
-	const ref = useRef();
-
-	useLayoutEffect( () => {
-		registerSlot( name, ref, fillProps );
-		return () => {
-			unregisterSlot( name, ref );
-		};
-		// Ignore reason: We don't want to unregister and register the slot whenever
-		// `fillProps` change, which would cause the fill to be re-mounted. Instead,
-		// we can just update the slot (see hook below).
-		// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ registerSlot, unregisterSlot, name ] );
-	// fillProps may be an update that interacts with the layout, so we
-	// useLayoutEffect.
-	useLayoutEffect( () => {
-		registry.updateSlot( name, fillProps );
-	} );
-
-	return (
-		<Component ref={ useMergeRefs( [ forwardedRef, ref ] ) } { ...props } />
-	);
-}
-
-export default forwardRef( Slot );
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx
new file mode 100644
index 00000000000000..e65c055c410a6b
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useRef,
+	useLayoutEffect,
+	useContext,
+	forwardRef,
+} from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import SlotFillContext from './slot-fill-context';
+import type { WordPressComponentProps } from '../../context';
+import type { SlotComponentProps } from '../types';
+
+function Slot(
+	props: WordPressComponentProps<
+		Omit< SlotComponentProps, 'bubblesVirtually' >,
+		'div'
+	>,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
+		name,
+		fillProps = {},
+		as,
+		// `children` is not allowed. However, if it is passed,
+		// it will be displayed as is, so remove `children`.
+		children,
+		...restProps
+	} = props;
+
+	const registry = useContext( SlotFillContext );
+
+	const ref = useRef< HTMLElement >( null );
+
+	// We don't want to unregister and register the slot whenever
+	// `fillProps` change, which would cause the fill to be re-mounted. Instead,
+	// we can just update the slot (see hook below).
+	// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
+	const fillPropsRef = useRef( fillProps );
+	useLayoutEffect( () => {
+		fillPropsRef.current = fillProps;
+	}, [ fillProps ] );
+
+	useLayoutEffect( () => {
+		registry.registerSlot( name, ref, fillPropsRef.current );
+		return () => registry.unregisterSlot( name, ref );
+	}, [ registry, name ] );
+
+	useLayoutEffect( () => {
+		registry.updateSlot( name, ref, fillPropsRef.current );
+	} );
+
+	return (
+		<View
+			as={ as }
+			ref={ useMergeRefs( [ forwardedRef, ref ] ) }
+			{ ...restProps }
+		/>
+	);
+}
+
+export default forwardRef( Slot );
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js
deleted file mode 100644
index 29e4380ed3d43d..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { useSnapshot } from 'valtio';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-export default function useSlotFills( name ) {
-	const registry = useContext( SlotFillContext );
-	const fills = useSnapshot( registry.fills, { sync: true } );
-	// The important bit here is that this call ensures that the hook
-	// only causes a re-render if the "fills" of a given slot name
-	// change change, not any fills.
-	return fills.get( name );
-}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
new file mode 100644
index 00000000000000..6229d20f2da513
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot-fills.ts
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import type { SlotKey } from '../types';
+
+export default function useSlotFills( name: SlotKey ) {
+	const registry = useContext( SlotFillContext );
+	return useObservableValue( registry.fills, name );
+}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js b/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
deleted file mode 100644
index 8c5a0182ea0743..00000000000000
--- a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
+++ /dev/null
@@ -1,66 +0,0 @@
-// @ts-nocheck
-/**
- * External dependencies
- */
-import { useSnapshot } from 'valtio';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './slot-fill-context';
-
-export default function useSlot( name ) {
-	const {
-		updateSlot: registryUpdateSlot,
-		unregisterSlot: registryUnregisterSlot,
-		registerFill: registryRegisterFill,
-		unregisterFill: registryUnregisterFill,
-		...registry
-	} = useContext( SlotFillContext );
-	const slots = useSnapshot( registry.slots, { sync: true } );
-	// The important bit here is that this call ensures
-	// the hook only causes a re-render if the slot
-	// with the given name change, not any other slot.
-	const slot = slots.get( name );
-
-	const updateSlot = useCallback(
-		( fillProps ) => {
-			registryUpdateSlot( name, fillProps );
-		},
-		[ name, registryUpdateSlot ]
-	);
-
-	const unregisterSlot = useCallback(
-		( slotRef ) => {
-			registryUnregisterSlot( name, slotRef );
-		},
-		[ name, registryUnregisterSlot ]
-	);
-
-	const registerFill = useCallback(
-		( fillRef ) => {
-			registryRegisterFill( name, fillRef );
-		},
-		[ name, registryRegisterFill ]
-	);
-
-	const unregisterFill = useCallback(
-		( fillRef ) => {
-			registryUnregisterFill( name, fillRef );
-		},
-		[ name, registryUnregisterFill ]
-	);
-
-	return {
-		...slot,
-		updateSlot,
-		unregisterSlot,
-		registerFill,
-		unregisterFill,
-	};
-}
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts b/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
new file mode 100644
index 00000000000000..cac57a024e4ee2
--- /dev/null
+++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { useObservableValue } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+import type { SlotKey } from '../types';
+
+export default function useSlot( name: SlotKey ) {
+	const registry = useContext( SlotFillContext );
+	const slot = useObservableValue( registry.slots, name );
+	return { ...slot };
+}
diff --git a/packages/components/src/slot-fill/context.js b/packages/components/src/slot-fill/context.js
deleted file mode 100644
index 0f7961a8ffd3b6..00000000000000
--- a/packages/components/src/slot-fill/context.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-export const SlotFillContext = createContext( {
-	registerSlot: () => {},
-	unregisterSlot: () => {},
-	registerFill: () => {},
-	unregisterFill: () => {},
-	getSlot: () => {},
-	getFills: () => {},
-	subscribe: () => {},
-} );
-
-export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/context.ts b/packages/components/src/slot-fill/context.ts
new file mode 100644
index 00000000000000..c4839462fbce0c
--- /dev/null
+++ b/packages/components/src/slot-fill/context.ts
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { BaseSlotFillContext } from './types';
+
+const initialValue: BaseSlotFillContext = {
+	registerSlot: () => {},
+	unregisterSlot: () => {},
+	registerFill: () => {},
+	unregisterFill: () => {},
+	getSlot: () => undefined,
+	getFills: () => [],
+	subscribe: () => () => {},
+};
+export const SlotFillContext = createContext( initialValue );
+
+export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/fill.js b/packages/components/src/slot-fill/fill.js
deleted file mode 100644
index 745439a275dd1e..00000000000000
--- a/packages/components/src/slot-fill/fill.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// @ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import { createPortal, useLayoutEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-import useSlot from './use-slot';
-
-function FillComponent( { name, children, registerFill, unregisterFill } ) {
-	const slot = useSlot( name );
-
-	const ref = useRef( {
-		name,
-		children,
-	} );
-
-	useLayoutEffect( () => {
-		const refValue = ref.current;
-		registerFill( name, refValue );
-		return () => unregisterFill( name, refValue );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	useLayoutEffect( () => {
-		ref.current.children = children;
-		if ( slot ) {
-			slot.forceUpdate();
-		}
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ children ] );
-
-	useLayoutEffect( () => {
-		if ( name === ref.current.name ) {
-			// Ignore initial effect.
-			return;
-		}
-		unregisterFill( ref.current.name, ref.current );
-		ref.current.name = name;
-		registerFill( name, ref.current );
-		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
-		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ name ] );
-
-	if ( ! slot || ! slot.node ) {
-		return null;
-	}
-
-	// If a function is passed as a child, provide it with the fillProps.
-	if ( typeof children === 'function' ) {
-		children = children( slot.props.fillProps );
-	}
-
-	return createPortal( children, slot.node );
-}
-
-const Fill = ( props ) => (
-	<SlotFillContext.Consumer>
-		{ ( { registerFill, unregisterFill } ) => (
-			<FillComponent
-				{ ...props }
-				registerFill={ registerFill }
-				unregisterFill={ unregisterFill }
-			/>
-		) }
-	</SlotFillContext.Consumer>
-);
-
-export default Fill;
diff --git a/packages/components/src/slot-fill/fill.ts b/packages/components/src/slot-fill/fill.ts
new file mode 100644
index 00000000000000..0a31c8276b3f10
--- /dev/null
+++ b/packages/components/src/slot-fill/fill.ts
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import useSlot from './use-slot';
+import type { FillComponentProps } from './types';
+
+export default function Fill( { name, children }: FillComponentProps ) {
+	const registry = useContext( SlotFillContext );
+	const slot = useSlot( name );
+
+	const ref = useRef( {
+		name,
+		children,
+	} );
+
+	useLayoutEffect( () => {
+		const refValue = ref.current;
+		refValue.name = name;
+		registry.registerFill( name, refValue );
+		return () => registry.unregisterFill( name, refValue );
+	}, [ registry, name ] );
+
+	useLayoutEffect( () => {
+		ref.current.children = children;
+		if ( slot ) {
+			slot.rerender();
+		}
+	}, [ slot, children ] );
+
+	return null;
+}
diff --git a/packages/components/src/slot-fill/index.js b/packages/components/src/slot-fill/index.js
deleted file mode 100644
index 18aea104677012..00000000000000
--- a/packages/components/src/slot-fill/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BaseFill from './fill';
-import BaseSlot from './slot';
-import BubblesVirtuallyFill from './bubbles-virtually/fill';
-import BubblesVirtuallySlot from './bubbles-virtually/slot';
-import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
-import SlotFillProvider from './provider';
-import useSlot from './bubbles-virtually/use-slot';
-export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
-
-export function Fill( props ) {
-	// We're adding both Fills here so they can register themselves before
-	// their respective slot has been registered. Only the Fill that has a slot
-	// will render. The other one will return null.
-	return (
-		<>
-			<BaseFill { ...props } />
-			<BubblesVirtuallyFill { ...props } />
-		</>
-	);
-}
-export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
-	if ( bubblesVirtually ) {
-		return <BubblesVirtuallySlot { ...props } ref={ ref } />;
-	}
-	return <BaseSlot { ...props } />;
-} );
-
-export function Provider( { children, ...props } ) {
-	return (
-		<SlotFillProvider { ...props }>
-			<BubblesVirtuallySlotFillProvider>
-				{ children }
-			</BubblesVirtuallySlotFillProvider>
-		</SlotFillProvider>
-	);
-}
-
-export function createSlotFill( name ) {
-	const FillComponent = ( props ) => <Fill name={ name } { ...props } />;
-	FillComponent.displayName = name + 'Fill';
-
-	const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
-	SlotComponent.displayName = name + 'Slot';
-	SlotComponent.__unstableName = name;
-
-	return {
-		Fill: FillComponent,
-		Slot: SlotComponent,
-	};
-}
-
-export { useSlot };
diff --git a/packages/components/src/slot-fill/index.tsx b/packages/components/src/slot-fill/index.tsx
new file mode 100644
index 00000000000000..caf97091b67ac8
--- /dev/null
+++ b/packages/components/src/slot-fill/index.tsx
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseFill from './fill';
+import BaseSlot from './slot';
+import BubblesVirtuallyFill from './bubbles-virtually/fill';
+import BubblesVirtuallySlot from './bubbles-virtually/slot';
+import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
+import SlotFillProvider from './provider';
+import SlotFillContext from './bubbles-virtually/slot-fill-context';
+import type { WordPressComponentProps } from '../context';
+
+export { default as useSlot } from './bubbles-virtually/use-slot';
+export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
+import type {
+	DistributiveOmit,
+	FillComponentProps,
+	SlotComponentProps,
+	SlotFillProviderProps,
+	SlotKey,
+} from './types';
+
+export function Fill( props: FillComponentProps ) {
+	// We're adding both Fills here so they can register themselves before
+	// their respective slot has been registered. Only the Fill that has a slot
+	// will render. The other one will return null.
+	return (
+		<>
+			<BaseFill { ...props } />
+			<BubblesVirtuallyFill { ...props } />
+		</>
+	);
+}
+
+export function UnforwardedSlot(
+	props: SlotComponentProps &
+		Omit< WordPressComponentProps< {}, 'div' >, 'className' >,
+	ref: ForwardedRef< any >
+) {
+	const { bubblesVirtually, ...restProps } = props;
+	if ( bubblesVirtually ) {
+		return <BubblesVirtuallySlot { ...restProps } ref={ ref } />;
+	}
+	return <BaseSlot { ...restProps } />;
+}
+export const Slot = forwardRef( UnforwardedSlot );
+
+export function Provider( {
+	children,
+	passthrough = false,
+}: SlotFillProviderProps ) {
+	const parent = useContext( SlotFillContext );
+	if ( ! parent.isDefault && passthrough ) {
+		return <>{ children }</>;
+	}
+	return (
+		<SlotFillProvider>
+			<BubblesVirtuallySlotFillProvider>
+				{ children }
+			</BubblesVirtuallySlotFillProvider>
+		</SlotFillProvider>
+	);
+}
+Provider.displayName = 'SlotFillProvider';
+
+export function createSlotFill( key: SlotKey ) {
+	const baseName = typeof key === 'symbol' ? key.description : key;
+	const FillComponent = ( props: Omit< FillComponentProps, 'name' > ) => (
+		<Fill name={ key } { ...props } />
+	);
+	FillComponent.displayName = `${ baseName }Fill`;
+
+	const SlotComponent = (
+		props: DistributiveOmit< SlotComponentProps, 'name' >
+	) => <Slot name={ key } { ...props } />;
+	SlotComponent.displayName = `${ baseName }Slot`;
+	/**
+	 * @deprecated 6.8.0
+	 * Please use `slotFill.name` instead of `slotFill.Slot.__unstableName`.
+	 */
+	SlotComponent.__unstableName = key;
+
+	return {
+		name: key,
+		Fill: FillComponent,
+		Slot: SlotComponent,
+	};
+}
diff --git a/packages/components/src/slot-fill/provider.js b/packages/components/src/slot-fill/provider.js
deleted file mode 100644
index 37b4560140516c..00000000000000
--- a/packages/components/src/slot-fill/provider.js
+++ /dev/null
@@ -1,125 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-
-export default class SlotFillProvider extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.registerSlot = this.registerSlot.bind( this );
-		this.registerFill = this.registerFill.bind( this );
-		this.unregisterSlot = this.unregisterSlot.bind( this );
-		this.unregisterFill = this.unregisterFill.bind( this );
-		this.getSlot = this.getSlot.bind( this );
-		this.getFills = this.getFills.bind( this );
-		this.hasFills = this.hasFills.bind( this );
-		this.subscribe = this.subscribe.bind( this );
-
-		this.slots = {};
-		this.fills = {};
-		this.listeners = [];
-		this.contextValue = {
-			registerSlot: this.registerSlot,
-			unregisterSlot: this.unregisterSlot,
-			registerFill: this.registerFill,
-			unregisterFill: this.unregisterFill,
-			getSlot: this.getSlot,
-			getFills: this.getFills,
-			hasFills: this.hasFills,
-			subscribe: this.subscribe,
-		};
-	}
-
-	registerSlot( name, slot ) {
-		const previousSlot = this.slots[ name ];
-		this.slots[ name ] = slot;
-		this.triggerListeners();
-
-		// Sometimes the fills are registered after the initial render of slot
-		// But before the registerSlot call, we need to rerender the slot.
-		this.forceUpdateSlot( name );
-
-		// If a new instance of a slot is being mounted while another with the
-		// same name exists, force its update _after_ the new slot has been
-		// assigned into the instance, such that its own rendering of children
-		// will be empty (the new Slot will subsume all fills for this name).
-		if ( previousSlot ) {
-			previousSlot.forceUpdate();
-		}
-	}
-
-	registerFill( name, instance ) {
-		this.fills[ name ] = [ ...( this.fills[ name ] || [] ), instance ];
-		this.forceUpdateSlot( name );
-	}
-
-	unregisterSlot( name, instance ) {
-		// If a previous instance of a Slot by this name unmounts, do nothing,
-		// as the slot and its fills should only be removed for the current
-		// known instance.
-		if ( this.slots[ name ] !== instance ) {
-			return;
-		}
-
-		delete this.slots[ name ];
-		this.triggerListeners();
-	}
-
-	unregisterFill( name, instance ) {
-		this.fills[ name ] =
-			this.fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
-		this.forceUpdateSlot( name );
-	}
-
-	getSlot( name ) {
-		return this.slots[ name ];
-	}
-
-	getFills( name, slotInstance ) {
-		// Fills should only be returned for the current instance of the slot
-		// in which they occupy.
-		if ( this.slots[ name ] !== slotInstance ) {
-			return [];
-		}
-		return this.fills[ name ];
-	}
-
-	hasFills( name ) {
-		return this.fills[ name ] && !! this.fills[ name ].length;
-	}
-
-	forceUpdateSlot( name ) {
-		const slot = this.getSlot( name );
-
-		if ( slot ) {
-			slot.forceUpdate();
-		}
-	}
-
-	triggerListeners() {
-		this.listeners.forEach( ( listener ) => listener() );
-	}
-
-	subscribe( listener ) {
-		this.listeners.push( listener );
-
-		return () => {
-			this.listeners = this.listeners.filter( ( l ) => l !== listener );
-		};
-	}
-
-	render() {
-		return (
-			<SlotFillContext.Provider value={ this.contextValue }>
-				{ this.props.children }
-			</SlotFillContext.Provider>
-		);
-	}
-}
diff --git a/packages/components/src/slot-fill/provider.tsx b/packages/components/src/slot-fill/provider.tsx
new file mode 100644
index 00000000000000..e2b98e73e1b707
--- /dev/null
+++ b/packages/components/src/slot-fill/provider.tsx
@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type {
+	FillComponentProps,
+	BaseSlotFillContext,
+	SlotFillProviderProps,
+	SlotKey,
+	Rerenderable,
+} from './types';
+
+function createSlotRegistry(): BaseSlotFillContext {
+	const slots: Record< SlotKey, Rerenderable > = {};
+	const fills: Record< SlotKey, FillComponentProps[] > = {};
+	let listeners: Array< () => void > = [];
+
+	function registerSlot( name: SlotKey, slot: Rerenderable ) {
+		const previousSlot = slots[ name ];
+		slots[ name ] = slot;
+		triggerListeners();
+
+		// Sometimes the fills are registered after the initial render of slot
+		// But before the registerSlot call, we need to rerender the slot.
+		forceUpdateSlot( name );
+
+		// If a new instance of a slot is being mounted while another with the
+		// same name exists, force its update _after_ the new slot has been
+		// assigned into the instance, such that its own rendering of children
+		// will be empty (the new Slot will subsume all fills for this name).
+		if ( previousSlot ) {
+			previousSlot.rerender();
+		}
+	}
+
+	function registerFill( name: SlotKey, instance: FillComponentProps ) {
+		fills[ name ] = [ ...( fills[ name ] || [] ), instance ];
+		forceUpdateSlot( name );
+	}
+
+	function unregisterSlot( name: SlotKey, instance: Rerenderable ) {
+		// If a previous instance of a Slot by this name unmounts, do nothing,
+		// as the slot and its fills should only be removed for the current
+		// known instance.
+		if ( slots[ name ] !== instance ) {
+			return;
+		}
+
+		delete slots[ name ];
+		triggerListeners();
+	}
+
+	function unregisterFill( name: SlotKey, instance: FillComponentProps ) {
+		fills[ name ] =
+			fills[ name ]?.filter( ( fill ) => fill !== instance ) ?? [];
+		forceUpdateSlot( name );
+	}
+
+	function getSlot( name: SlotKey ): Rerenderable | undefined {
+		return slots[ name ];
+	}
+
+	function getFills(
+		name: SlotKey,
+		slotInstance: Rerenderable
+	): FillComponentProps[] {
+		// Fills should only be returned for the current instance of the slot
+		// in which they occupy.
+		if ( slots[ name ] !== slotInstance ) {
+			return [];
+		}
+		return fills[ name ];
+	}
+
+	function forceUpdateSlot( name: SlotKey ) {
+		const slot = getSlot( name );
+
+		if ( slot ) {
+			slot.rerender();
+		}
+	}
+
+	function triggerListeners() {
+		listeners.forEach( ( listener ) => listener() );
+	}
+
+	function subscribe( listener: () => void ) {
+		listeners.push( listener );
+
+		return () => {
+			listeners = listeners.filter( ( l ) => l !== listener );
+		};
+	}
+
+	return {
+		registerSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+		getSlot,
+		getFills,
+		subscribe,
+	};
+}
+
+export function SlotFillProvider( { children }: SlotFillProviderProps ) {
+	const [ contextValue ] = useState( createSlotRegistry );
+	return (
+		<SlotFillContext.Provider value={ contextValue }>
+			{ children }
+		</SlotFillContext.Provider>
+	);
+}
+
+export default SlotFillProvider;
diff --git a/packages/components/src/slot-fill/slot.js b/packages/components/src/slot-fill/slot.js
deleted file mode 100644
index 50ff143bf227e5..00000000000000
--- a/packages/components/src/slot-fill/slot.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import {
-	Children,
-	Component,
-	cloneElement,
-	isEmptyElement,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-function isFunction( maybeFunc ) {
-	return typeof maybeFunc === 'function';
-}
-
-class SlotComponent extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.isUnmounted = false;
-		this.bindNode = this.bindNode.bind( this );
-	}
-
-	componentDidMount() {
-		const { registerSlot } = this.props;
-
-		registerSlot( this.props.name, this );
-	}
-
-	componentWillUnmount() {
-		const { unregisterSlot } = this.props;
-		this.isUnmounted = true;
-		unregisterSlot( this.props.name, this );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { name, unregisterSlot, registerSlot } = this.props;
-
-		if ( prevProps.name !== name ) {
-			unregisterSlot( prevProps.name );
-			registerSlot( name, this );
-		}
-	}
-
-	bindNode( node ) {
-		this.node = node;
-	}
-
-	forceUpdate() {
-		if ( this.isUnmounted ) {
-			return;
-		}
-		super.forceUpdate();
-	}
-
-	render() {
-		const { children, name, fillProps = {}, getFills } = this.props;
-
-		const fills = ( getFills( name, this ) ?? [] )
-			.map( ( fill ) => {
-				const fillChildren = isFunction( fill.children )
-					? fill.children( fillProps )
-					: fill.children;
-
-				return Children.map( fillChildren, ( child, childIndex ) => {
-					if ( ! child || typeof child === 'string' ) {
-						return child;
-					}
-
-					const childKey = child.key || childIndex;
-					return cloneElement( child, { key: childKey } );
-				} );
-			} )
-			.filter(
-				// In some cases fills are rendered only when some conditions apply.
-				// This ensures that we only use non-empty fills when rendering, i.e.,
-				// it allows us to render wrappers only when the fills are actually present.
-				( element ) => ! isEmptyElement( element )
-			);
-
-		return <>{ isFunction( children ) ? children( fills ) : fills }</>;
-	}
-}
-
-const Slot = ( props ) => (
-	<SlotFillContext.Consumer>
-		{ ( { registerSlot, unregisterSlot, getFills } ) => (
-			<SlotComponent
-				{ ...props }
-				registerSlot={ registerSlot }
-				unregisterSlot={ unregisterSlot }
-				getFills={ getFills }
-			/>
-		) }
-	</SlotFillContext.Consumer>
-);
-
-export default Slot;
diff --git a/packages/components/src/slot-fill/slot.tsx b/packages/components/src/slot-fill/slot.tsx
new file mode 100644
index 00000000000000..fe4a741ddbfbad
--- /dev/null
+++ b/packages/components/src/slot-fill/slot.tsx
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement, ReactNode, Key } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useEffect,
+	useReducer,
+	useRef,
+	Children,
+	cloneElement,
+	isEmptyElement,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type { SlotComponentProps } from './types';
+
+/**
+ * Whether the argument is a function.
+ *
+ * @param maybeFunc The argument to check.
+ * @return True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc: any ): maybeFunc is Function {
+	return typeof maybeFunc === 'function';
+}
+
+function Slot( props: Omit< SlotComponentProps, 'bubblesVirtually' > ) {
+	const registry = useContext( SlotFillContext );
+	const [ , rerender ] = useReducer( () => [], [] );
+	const ref = useRef( { rerender } );
+
+	const { name, children, fillProps = {} } = props;
+
+	useEffect( () => {
+		const refValue = ref.current;
+		registry.registerSlot( name, refValue );
+		return () => registry.unregisterSlot( name, refValue );
+	}, [ registry, name ] );
+
+	const fills: ReactNode[] = ( registry.getFills( name, ref.current ) ?? [] )
+		.map( ( fill ) => {
+			const fillChildren = isFunction( fill.children )
+				? fill.children( fillProps )
+				: fill.children;
+			return Children.map( fillChildren, ( child, childIndex ) => {
+				if ( ! child || typeof child === 'string' ) {
+					return child;
+				}
+				let childKey: Key = childIndex;
+				if (
+					typeof child === 'object' &&
+					'key' in child &&
+					child?.key
+				) {
+					childKey = child.key;
+				}
+
+				return cloneElement( child as ReactElement, {
+					key: childKey,
+				} );
+			} );
+		} )
+		.filter(
+			// In some cases fills are rendered only when some conditions apply.
+			// This ensures that we only use non-empty fills when rendering, i.e.,
+			// it allows us to render wrappers only when the fills are actually present.
+			( element ) => ! isEmptyElement( element )
+		);
+
+	return <>{ isFunction( children ) ? children( fills ) : fills }</>;
+}
+
+export default Slot;
diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.js
deleted file mode 100644
index d8f830f267e0b9..00000000000000
--- a/packages/components/src/slot-fill/stories/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import { text, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Slot, Fill, Provider } from '../';
-
-export default {
-	title: 'Components/SlotFill',
-	component: Slot,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<Provider>
-			<h2>Profile</h2>
-			<p>
-				Name: <Slot bubblesVirtually as="span" name="name" />
-			</p>
-			<p>
-				Age: <Slot bubblesVirtually as="span" name="age" />
-			</p>
-			<Fill name="name">Grace</Fill>
-			<Fill name="age">33</Fill>
-		</Provider>
-	);
-};
-
-export const withFillProps = () => {
-	const name = text( 'name', 'Grace' );
-	const age = number( 'age', 33 );
-	return (
-		<Provider>
-			<h2>Profile</h2>
-			<p>
-				Name:{ ' ' }
-				<Slot
-					bubblesVirtually
-					as="span"
-					name="name"
-					fillProps={ { name } }
-				/>
-			</p>
-			<p>
-				Age:{ ' ' }
-				<Slot
-					bubblesVirtually
-					as="span"
-					name="age"
-					fillProps={ { age } }
-				/>
-			</p>
-			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
-			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
-		</Provider>
-	);
-};
-
-export const withContext = () => {
-	const Context = createContext();
-	const ContextFill = ( { name } ) => {
-		const value = useContext( Context );
-		return <Fill name={ name }>{ value }</Fill>;
-	};
-	return (
-		<Provider>
-			<h2>Profile</h2>
-			<p>
-				Name: <Slot bubblesVirtually as="span" name="name" />
-			</p>
-			<p>
-				Age: <Slot bubblesVirtually as="span" name="age" />
-			</p>
-			<Context.Provider value="Grace">
-				<ContextFill name="name" />
-			</Context.Provider>
-			<Context.Provider value={ 33 }>
-				<ContextFill name="age" />
-			</Context.Provider>
-		</Provider>
-	);
-};
diff --git a/packages/components/src/slot-fill/stories/index.story.tsx b/packages/components/src/slot-fill/stories/index.story.tsx
new file mode 100644
index 00000000000000..2c74496e1eada0
--- /dev/null
+++ b/packages/components/src/slot-fill/stories/index.story.tsx
@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Slot, Fill, Provider as SlotFillProvider } from '../';
+
+const meta: Meta< typeof Slot > = {
+	component: Slot,
+	title: 'Components/Utilities/SlotFill',
+	id: 'components-slotfill',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Fill, SlotFillProvider },
+	argTypes: {
+		name: { control: false },
+		as: { control: { type: 'text' } },
+		fillProps: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+export const Default: StoryFn< typeof Slot > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<h2>Profile</h2>
+			<p>
+				Name: <Slot { ...props } name="name" />
+			</p>
+			<p>
+				Age: <Slot { ...props } name="age" />
+			</p>
+			<Fill name="name">Grace</Fill>
+			<Fill name="age">33</Fill>
+		</SlotFillProvider>
+	);
+};
+Default.args = {
+	bubblesVirtually: true,
+	as: 'span',
+};
+
+export const WithFillProps: StoryFn< typeof Slot > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<h2>Profile</h2>
+			<p>
+				Name:{ ' ' }
+				<Slot
+					{ ...props }
+					name="name"
+					fillProps={ { name: 'Grace' } }
+				/>
+			</p>
+			<p>
+				Age: <Slot { ...props } name="age" fillProps={ { age: 33 } } />
+			</p>
+
+			<Fill name="name">{ ( fillProps ) => fillProps.name }</Fill>
+			<Fill name="age">{ ( fillProps ) => fillProps.age }</Fill>
+		</SlotFillProvider>
+	);
+};
+WithFillProps.args = {
+	...Default.args,
+};
+
+export const WithSlotChildren: StoryFn< typeof Slot > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<h2>Profile</h2>
+			<p>
+				Name:
+				{ /* @ts-expect-error Not supported children for `<Slot />` when `bubblesVirtually` is true. */ }
+				<Slot { ...props } name="name">
+					{ ( fills ) => {
+						return (
+							<span style={ { color: 'red' } }>{ fills }</span>
+						);
+					} }
+				</Slot>
+			</p>
+			<p>
+				Age:
+				{ /* @ts-expect-error Not support children for `<Slot />` when `bubblesVirtually` is true. */ }
+				<Slot { ...props } name="age">
+					{ ( fills ) => {
+						return (
+							<span style={ { color: 'red' } }>{ fills }</span>
+						);
+					} }
+				</Slot>
+			</p>
+			<Fill name="name">Alice</Fill>
+			<Fill name="age">18</Fill>
+		</SlotFillProvider>
+	);
+};
+WithSlotChildren.args = {
+	...Default.args,
+};
+
+export const WithContext: StoryFn< typeof Slot > = ( props ) => {
+	const Context = createContext< string | number >( '' );
+	const ContextFill = ( { name }: { name: string } ) => {
+		const value = useContext( Context );
+		return <Fill name={ name }>{ value }</Fill>;
+	};
+	return (
+		<SlotFillProvider>
+			<h2>Profile</h2>
+			<p>
+				Name: <Slot { ...props } name="name" />
+			</p>
+			<p>
+				Age: <Slot { ...props } name="age" />
+			</p>
+			<Context.Provider value="Grace">
+				<ContextFill name="name" />
+			</Context.Provider>
+			<Context.Provider value={ 33 }>
+				<ContextFill name="age" />
+			</Context.Provider>
+		</SlotFillProvider>
+	);
+};
+WithContext.args = {
+	...Default.args,
+};
diff --git a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
index d57954b0444f9b..b9379eda7171a2 100644
--- a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
+++ b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
@@ -42,12 +42,16 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="first"
   >
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -62,7 +66,9 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -187,7 +193,9 @@ exports[`Slot should render in expected order when fills unmounted 1`] = `
 exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
 </div>
 `;
diff --git a/packages/components/src/slot-fill/test/slot.js b/packages/components/src/slot-fill/test/slot.js
index 941ba278aadc78..99836a94463526 100644
--- a/packages/components/src/slot-fill/test/slot.js
+++ b/packages/components/src/slot-fill/test/slot.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -92,9 +93,9 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'calls the functions passed as the Slot’s fillProps in the Fill', () => {
+	it( 'calls the functions passed as the Slot’s fillProps in the Fill', async () => {
 		const onClose = jest.fn();
-
+		const user = userEvent.setup();
 		render(
 			<Provider>
 				<Slot name="chicken" fillProps={ { onClose } } />
@@ -108,7 +109,7 @@ describe( 'Slot', () => {
 			</Provider>
 		);
 
-		fireEvent.click( screen.getByText( 'Click me' ) );
+		await user.click( screen.getByText( 'Click me' ) );
 
 		expect( onClose ).toHaveBeenCalledTimes( 1 );
 	} );
@@ -149,7 +150,8 @@ describe( 'Slot', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render Slot when not bubbling virtually', () => {
+	it( 'should re-render Slot when not bubbling virtually', async () => {
+		const user = userEvent.setup();
 		const { container } = render(
 			<Provider>
 				<div>
@@ -161,7 +163,7 @@ describe( 'Slot', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		fireEvent.click( screen.getByRole( 'button' ) );
+		await user.click( screen.getByRole( 'button' ) );
 
 		expect( container ).toMatchSnapshot();
 	} );
diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts
new file mode 100644
index 00000000000000..6668057323edd9
--- /dev/null
+++ b/packages/components/src/slot-fill/types.ts
@@ -0,0 +1,141 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, RefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import type { ObservableMap } from '@wordpress/compose';
+
+export type DistributiveOmit< T, K extends keyof any > = T extends any
+	? Omit< T, K >
+	: never;
+
+export type SlotKey = string | symbol;
+
+export type FillProps = Record< string, any >;
+
+type SlotPropBase = {
+	/**
+	 * Slot name.
+	 */
+	name: SlotKey;
+
+	/**
+	 * props to pass from `Slot` to `Fill`.
+	 *
+	 * @default {}
+	 */
+	fillProps?: FillProps;
+};
+
+export type SlotComponentProps =
+	| ( SlotPropBase & {
+			/**
+			 * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).
+			 * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,
+			 * also accept an optional `className`, `id`, etc.  to add to the slot container.
+			 */
+			bubblesVirtually: true;
+
+			/**
+			 * A function that returns nodes to be rendered.
+			 * Supported only when `bubblesVirtually` is `false`.
+			 */
+			children?: never;
+
+			/**
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			className?: string;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: React.CSSProperties;
+	  } )
+	| ( SlotPropBase & {
+			/**
+			 * By default, events will bubble to their parents on the DOM hierarchy (native event bubbling).
+			 * If set to true, events will bubble to their virtual parent in the React elements hierarchy instead,
+			 * also accept an optional `className`, `id`, etc.  to add to the slot container.
+			 */
+			bubblesVirtually?: false;
+
+			/**
+			 * A function that returns nodes to be rendered.
+			 * Supported only when `bubblesVirtually` is `false`.
+			 */
+			children?: ( fills: ReactNode ) => ReactNode;
+
+			/**
+			 * Additional className for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			className?: never;
+
+			/**
+			 * Additional styles for the `Slot` component.
+			 * Supported only when `bubblesVirtually` is `true`.
+			 */
+			style?: never;
+	  } );
+
+export type FillComponentProps = {
+	/**
+	 * The name of the slot to fill into.
+	 */
+	name: SlotKey;
+
+	/**
+	 * Children elements or render function.
+	 */
+	children?: ReactNode | ( ( fillProps: FillProps ) => ReactNode );
+};
+
+export type SlotFillProviderProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+
+	/**
+	 * Whether to pass slots to the parent provider if existent.
+	 */
+	passthrough?: boolean;
+};
+
+export type SlotRef = RefObject< HTMLElement >;
+export type Rerenderable = { rerender: () => void };
+export type FillInstance = {};
+
+export type SlotFillBubblesVirtuallyContext = {
+	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
+	fills: ObservableMap< SlotKey, FillInstance[] >;
+	registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
+	unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void;
+	updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
+	registerFill: ( name: SlotKey, instance: FillInstance ) => void;
+	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
+
+	/**
+	 * This helps the provider know if it's using the default context value or not.
+	 */
+	isDefault?: boolean;
+};
+
+export type BaseSlotFillContext = {
+	registerSlot: ( name: SlotKey, slot: Rerenderable ) => void;
+	unregisterSlot: ( name: SlotKey, slot: Rerenderable ) => void;
+	registerFill: ( name: SlotKey, instance: FillComponentProps ) => void;
+	unregisterFill: ( name: SlotKey, instance: FillComponentProps ) => void;
+	getSlot: ( name: SlotKey ) => Rerenderable | undefined;
+	getFills: (
+		name: SlotKey,
+		slotInstance: Rerenderable
+	) => FillComponentProps[];
+	subscribe: ( listener: () => void ) => () => void;
+};
diff --git a/packages/components/src/slot-fill/use-slot.js b/packages/components/src/slot-fill/use-slot.js
deleted file mode 100644
index 99e7138e120259..00000000000000
--- a/packages/components/src/slot-fill/use-slot.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @ts-nocheck
-/**
- * WordPress dependencies
- */
-import { useContext, useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SlotFillContext from './context';
-
-/**
- * React hook returning the active slot given a name.
- *
- * @param {string} name Slot name.
- * @return {Object} Slot object.
- */
-const useSlot = ( name ) => {
-	const { getSlot, subscribe } = useContext( SlotFillContext );
-	const [ slot, setSlot ] = useState( getSlot( name ) );
-
-	useEffect( () => {
-		setSlot( getSlot( name ) );
-		const unsubscribe = subscribe( () => {
-			setSlot( getSlot( name ) );
-		} );
-
-		return unsubscribe;
-		// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
-		// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ name ] );
-
-	return slot;
-};
-
-export default useSlot;
diff --git a/packages/components/src/slot-fill/use-slot.ts b/packages/components/src/slot-fill/use-slot.ts
new file mode 100644
index 00000000000000..4ab419be1ad2bd
--- /dev/null
+++ b/packages/components/src/slot-fill/use-slot.ts
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './context';
+import type { SlotKey } from './types';
+
+/**
+ * React hook returning the active slot given a name.
+ *
+ * @param name Slot name.
+ * @return Slot object.
+ */
+const useSlot = ( name: SlotKey ) => {
+	const { getSlot, subscribe } = useContext( SlotFillContext );
+	return useSyncExternalStore(
+		subscribe,
+		() => getSlot( name ),
+		() => getSlot( name )
+	);
+};
+
+export default useSlot;
diff --git a/packages/components/src/snackbar/README.md b/packages/components/src/snackbar/README.md
index bbff9b9efabcb6..7fc734c69ac9b8 100644
--- a/packages/components/src/snackbar/README.md
+++ b/packages/components/src/snackbar/README.md
@@ -2,12 +2,6 @@
 
 Use Snackbars to communicate low priority, non-interruptive messages to the user.
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post but these options should also be available elsewhere in the UI.
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index 833d9dce8d30ff..dfcb0a6d8f2a84 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -2,13 +2,19 @@
  * External dependencies
  */
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { speak } from '@wordpress/a11y';
-import { useEffect, forwardRef, renderToString } from '@wordpress/element';
+import {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	forwardRef,
+	renderToString,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import warning from '@wordpress/warning';
 
@@ -16,8 +22,9 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import Button from '../button';
-import type { NoticeAction, SnackbarProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { SnackbarProps } from './types';
+import type { NoticeAction } from '../notice/types';
+import type { WordPressComponentProps } from '../context';
 
 const NOTICE_TIMEOUT = 10000;
 
@@ -25,8 +32,8 @@ const NOTICE_TIMEOUT = 10000;
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.
  *
- * @param  message    Message to announce.
- * @param  politeness Politeness to announce.
+ * @param message    Message to announce.
+ * @param politeness Politeness to announce.
  */
 function useSpokenMessage(
 	message: SnackbarProps[ 'spokenMessage' ],
@@ -73,7 +80,7 @@ function UnforwardedSnackbar(
 	}
 
 	function onActionClick(
-		event: MouseEvent,
+		event: MouseEvent< HTMLButtonElement >,
 		onClick: NoticeAction[ 'onClick' ]
 	) {
 		event.stopPropagation();
@@ -87,36 +94,40 @@ function UnforwardedSnackbar(
 
 	useSpokenMessage( spokenMessage, politeness );
 
-	// Only set up the timeout dismiss if we're not explicitly dismissing.
+	// The `onDismiss/onRemove` can have unstable references,
+	// trigger side-effect cleanup, and reset timers.
+	const callbacksRef = useRef( { onDismiss, onRemove } );
+	useLayoutEffect( () => {
+		callbacksRef.current = { onDismiss, onRemove };
+	} );
+
 	useEffect( () => {
+		// Only set up the timeout dismiss if we're not explicitly dismissing.
 		const timeoutHandle = setTimeout( () => {
 			if ( ! explicitDismiss ) {
-				onDismiss?.();
-				onRemove?.();
+				callbacksRef.current.onDismiss?.();
+				callbacksRef.current.onRemove?.();
 			}
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ onDismiss, onRemove, explicitDismiss ] );
+	}, [ explicitDismiss ] );
 
-	const classes = classnames( className, 'components-snackbar', {
+	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
 	} );
 	if ( actions && actions.length > 1 ) {
 		// We need to inform developers that snackbar only accepts 1 action.
 		warning(
-			'Snackbar can only have 1 action, use Notice if your message require many messages'
+			'Snackbar can only have one action. Use Notice if your message requires many actions.'
 		);
 		// return first element only while keeping it inside an array
 		actions = [ actions[ 0 ] ];
 	}
 
-	const snackbarContentClassnames = classnames(
-		'components-snackbar__content',
-		{
-			'components-snackbar__content-with-icon': !! icon,
-		}
-	);
+	const snackbarContentClassnames = clsx( 'components-snackbar__content', {
+		'components-snackbar__content-with-icon': !! icon,
+	} );
 
 	return (
 		<div
@@ -124,9 +135,12 @@ function UnforwardedSnackbar(
 			className={ classes }
 			onClick={ ! explicitDismiss ? dismissMe : undefined }
 			tabIndex={ 0 }
-			role={ ! explicitDismiss ? 'button' : '' }
+			role={ ! explicitDismiss ? 'button' : undefined }
 			onKeyPress={ ! explicitDismiss ? dismissMe : undefined }
-			aria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }
+			aria-label={
+				! explicitDismiss ? __( 'Dismiss this notice' ) : undefined
+			}
+			data-testid="snackbar"
 		>
 			<div className={ snackbarContentClassnames }>
 				{ icon && (
@@ -136,12 +150,13 @@ function UnforwardedSnackbar(
 				{ actions.map( ( { label, onClick, url }, index ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							key={ index }
 							href={ url }
-							variant="tertiary"
-							onClick={ ( event: MouseEvent ) =>
-								onActionClick( event, onClick )
-							}
+							variant="link"
+							onClick={ (
+								event: MouseEvent< HTMLButtonElement >
+							) => onActionClick( event, onClick ) }
 							className="components-snackbar__action"
 						>
 							{ label }
@@ -151,7 +166,7 @@ function UnforwardedSnackbar(
 				{ explicitDismiss && (
 					<span
 						role="button"
-						aria-label="Dismiss this notice"
+						aria-label={ __( 'Dismiss this notice' ) }
 						tabIndex={ 0 }
 						className="components-snackbar__dismiss-button"
 						onClick={ dismissMe }
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
index 093c0b3529612d..f97f8cc5db8945 100644
--- a/packages/components/src/snackbar/list.tsx
+++ b/packages/components/src/snackbar/list.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,8 +17,8 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
-import type { Notice, SnackbarListProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { SnackbarListProps } from './types';
+import type { WordPressComponentProps } from '../context';
 
 const SNACKBAR_VARIANTS = {
 	init: {
@@ -29,13 +29,21 @@ const SNACKBAR_VARIANTS = {
 		height: 'auto',
 		opacity: 1,
 		transition: {
-			height: { stiffness: 1000, velocity: -100 },
+			height: { type: 'tween', duration: 0.3, ease: [ 0, 0, 0.2, 1 ] },
+			opacity: {
+				type: 'tween',
+				duration: 0.25,
+				delay: 0.05,
+				ease: [ 0, 0, 0.2, 1 ],
+			},
 		},
 	},
 	exit: {
 		opacity: 0,
 		transition: {
-			duration: 0.5,
+			type: 'tween',
+			duration: 0.1,
+			ease: [ 0, 0, 0.2, 1 ],
 		},
 	},
 };
@@ -60,10 +68,17 @@ export function SnackbarList( {
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
 	const listRef = useRef< HTMLDivElement | null >( null );
 	const isReducedMotion = useReducedMotion();
-	className = classnames( 'components-snackbar-list', className );
-	const removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );
+	className = clsx( 'components-snackbar-list', className );
+	const removeNotice =
+		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
+			onRemove?.( notice.id );
 	return (
-		<div className={ className } tabIndex={ -1 } ref={ listRef }>
+		<div
+			className={ className }
+			tabIndex={ -1 }
+			ref={ listRef }
+			data-testid="snackbar-list"
+		>
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {
@@ -72,9 +87,9 @@ export function SnackbarList( {
 					return (
 						<motion.div
 							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
-							initial={ 'init' }
-							animate={ 'open' }
-							exit={ 'exit' }
+							initial="init"
+							animate="open"
+							exit="exit"
 							key={ notice.id }
 							variants={
 								isReducedMotion ? undefined : SNACKBAR_VARIANTS
diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx
new file mode 100644
index 00000000000000..5c24044cc1ae68
--- /dev/null
+++ b/packages/components/src/snackbar/stories/index.story.tsx
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../../icon';
+import Snackbar from '..';
+
+const meta: Meta< typeof Snackbar > = {
+	title: 'Components/Feedback/Snackbar',
+	id: 'components-snackbar',
+	component: Snackbar,
+	argTypes: {
+		as: { control: false },
+		onRemove: {
+			action: 'onRemove',
+			control: false,
+		},
+		onDismiss: {
+			action: 'onDismiss',
+			control: false,
+		},
+		listRef: {
+			control: false,
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: StoryFn< typeof Snackbar > = ( {
+	children,
+	...props
+} ) => {
+	return <Snackbar { ...props }>{ children }</Snackbar>;
+};
+
+export const Default: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
+Default.args = {
+	children:
+		'Use Snackbars to communicate low priority, non-interruptive messages to the user.',
+};
+
+export const WithActions: StoryFn< typeof Snackbar > = DefaultTemplate.bind(
+	{}
+);
+WithActions.args = {
+	actions: [
+		{
+			label: 'Open WP.org',
+			url: 'https://wordpress.org',
+		},
+	],
+	children: 'Use Snackbars with an action link to an external page.',
+};
+
+export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
+WithIcon.args = {
+	children: 'Add an icon to make your snackbar stand out',
+	icon: <Icon style={ { fill: 'currentcolor' } } icon={ wordpress } />,
+};
+
+export const WithExplicitDismiss: StoryFn< typeof Snackbar > =
+	DefaultTemplate.bind( {} );
+WithExplicitDismiss.args = {
+	children:
+		'Add a cross to explicitly close the snackbar, and do not hide it automatically',
+	explicitDismiss: true,
+};
+
+export const WithActionAndExplicitDismiss: StoryFn< typeof Snackbar > =
+	DefaultTemplate.bind( {} );
+WithActionAndExplicitDismiss.args = {
+	actions: [
+		{
+			label: 'Open WP.org',
+			url: 'https://wordpress.org',
+		},
+	],
+	children:
+		'Add an action and a cross to explicitly close the snackbar, and do not hide it automatically',
+	explicitDismiss: true,
+};
diff --git a/packages/components/src/snackbar/stories/index.tsx b/packages/components/src/snackbar/stories/index.tsx
deleted file mode 100644
index 0d226f321e72a0..00000000000000
--- a/packages/components/src/snackbar/stories/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import Snackbar from '..';
-
-const meta: ComponentMeta< typeof Snackbar > = {
-	title: 'Components/Snackbar',
-	component: Snackbar,
-	argTypes: {
-		as: { control: { type: null } },
-		onRemove: {
-			action: 'onRemove',
-			control: { type: null },
-		},
-		onDismiss: {
-			action: 'onDismiss',
-			control: { type: null },
-		},
-		listRef: {
-			control: { type: null },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const DefaultTemplate: ComponentStory< typeof Snackbar > = ( {
-	children,
-	...props
-} ) => {
-	return <Snackbar { ...props }>{ children }</Snackbar>;
-};
-
-export const Default: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
-Default.args = {
-	children:
-		'Use Snackbars to communicate low priority, non-interruptive messages to the user.',
-};
-
-export const WithActions: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
-WithActions.args = {
-	actions: [
-		{
-			label: 'Open WP.org',
-			url: 'https://wordpress.org',
-		},
-	],
-	children: 'Use Snackbars with an action link to an external page.',
-};
-
-export const WithIcon: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
-WithIcon.args = {
-	children: 'Add an icon to make your snackbar stand out',
-	icon: (
-		<span role="img" aria-label="Icon" style={ { fontSize: 21 } }>
-			🌮
-		</span>
-	),
-};
-
-export const WithExplicitDismiss: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
-WithExplicitDismiss.args = {
-	children:
-		'Add a cross to explicitly close the snackbar, and do not hide it automatically',
-	explicitDismiss: true,
-};
-
-export const WithActionAndExplicitDismiss: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
-WithActionAndExplicitDismiss.args = {
-	actions: [
-		{
-			label: 'Open WP.org',
-			url: 'https://wordpress.org',
-		},
-	],
-	children:
-		'Add an action and a cross to explicitly close the snackbar, and do not hide it automatically',
-	explicitDismiss: true,
-};
diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx
new file mode 100644
index 00000000000000..69a4367c485759
--- /dev/null
+++ b/packages/components/src/snackbar/stories/list.story.tsx
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList from '../list';
+
+const meta: Meta< typeof SnackbarList > = {
+	title: 'Components/Feedback/SnackbarList',
+	id: 'components-snackbarlist',
+	component: SnackbarList,
+	argTypes: {
+		as: { control: false },
+		onRemove: {
+			action: 'onRemove',
+			control: false,
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof SnackbarList > = ( {
+	children,
+	notices: noticesProp,
+	...props
+} ) => {
+	const [ notices, setNotices ] = useState( noticesProp );
+
+	const onRemove = ( id: string ) => {
+		const matchIndex = notices.findIndex( ( n ) => n.id === id );
+		if ( matchIndex > -1 ) {
+			setNotices( [
+				...notices.slice( 0, matchIndex ),
+				...notices.slice( matchIndex + 1 ),
+			] );
+		}
+	};
+
+	return (
+		<SnackbarList { ...props } notices={ notices } onRemove={ onRemove }>
+			{ children }
+		</SnackbarList>
+	);
+};
+
+Default.args = {
+	children:
+		'Use SnackbarList to communicate multiple low priority, non-interruptive messages to the user.',
+	notices: [
+		{
+			id: 'SAVE_POST_NOTICE_ID_1',
+			spokenMessage: 'Post published.',
+			actions: [
+				{
+					label: 'View Post',
+					url: 'https://example.com/?p=522',
+				},
+			],
+			content: 'Post published.',
+			explicitDismiss: false,
+		},
+		{
+			id: 'SAVE_POST_NOTICE_ID_2',
+			spokenMessage: 'Post updated',
+			actions: [
+				{
+					label: 'View Post',
+					url: 'https://example.com/?p=522',
+				},
+			],
+			content: 'Post updated.',
+			explicitDismiss: false,
+		},
+		{
+			id: 'global1',
+			spokenMessage: 'All content copied.',
+			actions: [],
+			content: 'All content copied.',
+			explicitDismiss: false,
+		},
+	],
+};
diff --git a/packages/components/src/snackbar/stories/list.tsx b/packages/components/src/snackbar/stories/list.tsx
deleted file mode 100644
index a12b2c171ae7a5..00000000000000
--- a/packages/components/src/snackbar/stories/list.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SnackbarList from '../list';
-
-const meta: ComponentMeta< typeof SnackbarList > = {
-	title: 'Components/SnackbarList',
-	component: SnackbarList,
-	argTypes: {
-		as: { control: { type: null } },
-		onRemove: {
-			action: 'onRemove',
-			control: { type: null },
-		},
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-export const Default: ComponentStory< typeof SnackbarList > = ( {
-	children,
-	notices: noticesProp,
-	...props
-} ) => {
-	const [ notices, setNotices ] = useState( noticesProp );
-
-	const onRemove = ( id: string ) => {
-		const matchIndex = notices.findIndex( ( n ) => n.id === id );
-		if ( matchIndex > -1 ) {
-			setNotices( [
-				...notices.slice( 0, matchIndex ),
-				...notices.slice( matchIndex + 1 ),
-			] );
-		}
-	};
-
-	return (
-		<SnackbarList { ...props } notices={ notices } onRemove={ onRemove }>
-			{ children }
-		</SnackbarList>
-	);
-};
-
-Default.args = {
-	children:
-		'Use SnackbarList to communicate multiple low priority, non-interruptive messages to the user.',
-	notices: [
-		{
-			id: 'SAVE_POST_NOTICE_ID_1',
-			spokenMessage: 'Post published.',
-			actions: [
-				{
-					label: 'View Post',
-					url: 'https://example.com/?p=522',
-				},
-			],
-			content: 'Post published.',
-			isDismissible: true,
-			explicitDismiss: false,
-		},
-		{
-			id: 'SAVE_POST_NOTICE_ID_2',
-			spokenMessage: 'Post updated',
-			actions: [
-				{
-					label: 'View Post',
-					url: 'https://example.com/?p=522',
-				},
-			],
-			content: 'Post updated.',
-			isDismissible: true,
-			explicitDismiss: false,
-		},
-		{
-			id: 'global1',
-			spokenMessage: 'All content copied.',
-			actions: [],
-			content: 'All content copied.',
-			isDismissible: true,
-			explicitDismiss: false,
-		},
-	],
-};
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 0e54d3b432b939..d1afd9b9f01e99 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -1,11 +1,12 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background-color: $gray-900;
-	border-radius: $radius-block-ui;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
+	backdrop-filter: blur($grid-unit-20) saturate(180%);
+	border-radius: $radius-medium;
+	box-shadow: $elevation-small;
 	color: $white;
-	padding: 16px 24px;
+	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
 	max-width: 600px;
 	box-sizing: border-box;
@@ -20,9 +21,7 @@
 	}
 
 	&:focus {
-		box-shadow:
-			0 0 0 1px $white,
-			0 0 0 3px $components-color-accent;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
@@ -30,17 +29,18 @@
 	}
 
 	.components-snackbar__content-with-icon {
-		margin-left: 24px;
+		position: relative;
+		padding-left: $icon-size;
 	}
 
 	.components-snackbar__icon {
 		position: absolute;
-		top: 24px;
-		left: 28px;
+		left: $grid-unit-10 * -1;
+		top: calc((#{$icon-size - ($default-font-size * $default-line-height)}) / -2);
 	}
 
 	.components-snackbar__dismiss-button {
-		margin-left: 32px;
+		margin-left: $grid-unit-30;
 		cursor: pointer;
 	}
 }
@@ -48,24 +48,16 @@
 .components-snackbar__action.components-button {
 	margin-left: $grid-unit-40;
 	color: $white;
-	height: auto;
 	flex-shrink: 0;
-	line-height: $default-line-height;
-	padding: 0;
-
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) {
-		text-decoration: underline;
-		background-color: transparent;
 
-		&:focus {
-			color: $white;
-			box-shadow: none;
-			outline: 1px dotted $white;
-		}
+	&:focus {
+		box-shadow: none;
+		outline: 1px dotted $white;
+	}
 
-		&:hover {
-			color: $components-color-accent;
-		}
+	&:hover {
+		text-decoration: none;
+		color: currentColor;
 	}
 }
 
@@ -90,5 +82,5 @@
 
 .components-snackbar-list__notice-container {
 	position: relative;
-	padding-top: 8px;
+	padding-top: $grid-unit-10;
 }
diff --git a/packages/components/src/snackbar/test/index.tsx b/packages/components/src/snackbar/test/index.tsx
new file mode 100644
index 00000000000000..6be4e58c928123
--- /dev/null
+++ b/packages/components/src/snackbar/test/index.tsx
@@ -0,0 +1,267 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import { click } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import Snackbar from '../index';
+
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
+describe( 'Snackbar', () => {
+	const testId = 'snackbar';
+
+	beforeEach( () => {
+		mockedSpeak.mockReset();
+	} );
+
+	it( 'should render correctly', () => {
+		render( <Snackbar>Message</Snackbar> );
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).toBeVisible();
+		expect( snackbar ).toHaveTextContent( 'Message' );
+	} );
+
+	it( 'should render with an additional className', () => {
+		render( <Snackbar className="gutenberg">Message</Snackbar> );
+
+		expect( screen.getByTestId( testId ) ).toHaveClass( 'gutenberg' );
+	} );
+
+	it( 'should render with an icon', () => {
+		const testIcon = (
+			<SVG data-testid="icon">
+				<Path />
+			</SVG>
+		);
+
+		render( <Snackbar icon={ testIcon }>Message</Snackbar> );
+
+		const snackbar = screen.getByTestId( testId );
+		const icon = within( snackbar ).getByTestId( 'icon' );
+
+		expect( icon ).toBeVisible();
+	} );
+
+	it( 'should be dismissible by clicking the snackbar', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar onRemove={ onRemove } onDismiss={ onDismiss }>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).toHaveAttribute( 'role', 'button' );
+		expect( snackbar ).toHaveAttribute(
+			'aria-label',
+			'Dismiss this notice'
+		);
+
+		await click( snackbar );
+
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+		expect( onDismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should not be dismissible by clicking the snackbar when the `explicitDismiss` prop is set to `true`', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar
+				explicitDismiss
+				onRemove={ onRemove }
+				onDismiss={ onDismiss }
+			>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+
+		expect( snackbar ).not.toHaveAttribute( 'role', 'button' );
+		expect( snackbar ).not.toHaveAttribute(
+			'aria-label',
+			'Dismiss this notice'
+		);
+		expect( snackbar ).toHaveClass(
+			'components-snackbar-explicit-dismiss'
+		);
+
+		await click( snackbar );
+
+		expect( onRemove ).not.toHaveBeenCalled();
+		expect( onDismiss ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should be dismissible by clicking the close button when the `explicitDismiss` prop is set to `true`', async () => {
+		const onRemove = jest.fn();
+		const onDismiss = jest.fn();
+
+		render(
+			<Snackbar
+				explicitDismiss
+				onRemove={ onRemove }
+				onDismiss={ onDismiss }
+			>
+				Message
+			</Snackbar>
+		);
+
+		const snackbar = screen.getByTestId( testId );
+		const closeButton = within( snackbar ).getByRole( 'button', {
+			name: 'Dismiss this notice',
+		} );
+
+		await click( closeButton );
+
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+		expect( onDismiss ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	describe( 'actions', () => {
+		it( 'should render only the first action with a warning when multiple actions are passed', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{ label: 'One', url: 'https://example.com' },
+						{ label: 'Two', url: 'https://example.com' },
+						{ label: 'Three', url: 'https://example.com' },
+					] }
+				>
+					Message
+				</Snackbar>
+			);
+
+			expect( console ).toHaveWarnedWith(
+				'Snackbar can only have one action. Use Notice if your message requires many actions.'
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const action = within( snackbar ).getByRole( 'link' );
+
+			expect( action ).toBeVisible();
+			expect( action ).toHaveTextContent( 'One' );
+		} );
+
+		it( 'should be rendered as a link when the `url` prop is set', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{ label: 'View post', url: 'https://example.com' },
+					] }
+				>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const link = within( snackbar ).getByRole( 'link', {
+				name: 'View post',
+			} );
+
+			expect( link ).toHaveAttribute( 'href', 'https://example.com' );
+		} );
+
+		it( 'should be rendered as a button and call `onClick` when the `onClick` prop is set', async () => {
+			const onClick = jest.fn();
+
+			render(
+				<Snackbar actions={ [ { label: 'View post', onClick } ] }>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const button = within( snackbar ).getByRole( 'button', {
+				name: 'View post',
+			} );
+
+			await click( button );
+
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should be rendered as a link when the `url` prop and the `onClick` are set', () => {
+			render(
+				<Snackbar
+					actions={ [
+						{
+							label: 'View post',
+							url: 'https://example.com',
+							onClick: () => {},
+						},
+					] }
+				>
+					Post updated.
+				</Snackbar>
+			);
+
+			const snackbar = screen.getByTestId( testId );
+			const link = within( snackbar ).getByRole( 'link', {
+				name: 'View post',
+			} );
+			expect( link ).toBeVisible();
+		} );
+	} );
+
+	describe( 'useSpokenMessage', () => {
+		it( 'should speak the given message', () => {
+			render( <Snackbar>FYI</Snackbar> );
+
+			expect( speak ).toHaveBeenCalledWith( 'FYI', 'polite' );
+		} );
+
+		it( 'should speak the given message by explicit politeness', () => {
+			render( <Snackbar politeness="assertive">Uh oh!</Snackbar> );
+
+			expect( speak ).toHaveBeenCalledWith( 'Uh oh!', 'assertive' );
+		} );
+
+		it( 'should coerce a message to a string', () => {
+			// This test assumes that `@wordpress/a11y` is capable of handling
+			// markup strings appropriately.
+			render(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+
+			expect( speak ).toHaveBeenCalledWith(
+				'With <em>emphasis</em> this time.',
+				'polite'
+			);
+		} );
+
+		it( 'should not re-speak an effectively equivalent element message', () => {
+			const { rerender } = render(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+			rerender(
+				<Snackbar>
+					With <em>emphasis</em> this time.
+				</Snackbar>
+			);
+
+			expect( speak ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/snackbar/test/list.tsx b/packages/components/src/snackbar/test/list.tsx
new file mode 100644
index 00000000000000..1b3749d42c61ef
--- /dev/null
+++ b/packages/components/src/snackbar/test/list.tsx
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { click } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import SnackbarList from '../list';
+
+window.scrollTo = jest.fn();
+
+describe( 'SnackbarList', () => {
+	afterEach( () => {
+		jest.resetAllMocks();
+	} );
+
+	it( 'should get focus after a snackbar is dismissed', async () => {
+		render(
+			<SnackbarList
+				notices={ [
+					{
+						id: 'ID_1',
+						content: 'Post published.',
+						explicitDismiss: true,
+					},
+					{
+						id: 'ID_2',
+						content: 'Post updated.',
+						explicitDismiss: true,
+					},
+				] }
+				onRemove={ () => {} }
+			/>
+		);
+
+		await click(
+			screen.getAllByRole( 'button', {
+				name: 'Dismiss this notice',
+			} )[ 0 ]
+		);
+
+		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
+	} );
+} );
diff --git a/packages/components/src/snackbar/types.ts b/packages/components/src/snackbar/types.ts
index 46c9a8e67e8cfb..13ed98ade8aa7a 100644
--- a/packages/components/src/snackbar/types.ts
+++ b/packages/components/src/snackbar/types.ts
@@ -1,116 +1,71 @@
 /**
  * External dependencies
  */
-import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
 
-export type NoticeActionWithURL = {
-	label: string;
-	url: string;
-	onClick?: ( event: SyntheticEvent ) => void;
-};
-
-type NoticeActionWithOnClick = {
-	label: string;
-	url?: string;
-	onClick: ( event: SyntheticEvent ) => void;
-};
-
-// TODO: move this type to the Notice component once it gets typed.
-export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
-
-export type Notice = {
-	id: string;
-	spokenMessage: string;
-	actions: NoticeAction[];
-	icon?: ReactNode;
-	onDismiss?: () => void;
-	content: string;
-	isDismissible: boolean;
-	explicitDismiss: boolean;
-};
+/**
+ * Internal dependencies
+ */
+import type {
+	NoticeProps,
+	NoticeChildren,
+	NoticeAction,
+} from '../notice/types';
 
-export type SnackbarProps = {
-	/**
-	 * The displayed message of a notice.
-	 *
-	 * Also used as the spoken message for assistive technology,
-	 * unless `spokenMessage` is provided as an alternative message.
-	 */
-	children: string;
-	/**
-	 * Used to provide a custom spoken message.
-	 *
-	 * @default children
-	 */
-	spokenMessage?: Notice[ 'spokenMessage' ];
-	/**
-	 * A politeness level for the notice's spoken message. Should be provided as
-	 * one of the valid options for an `aria-live` attribute value. Note that this
-	 * value should be considered a suggestion; assistive technologies may
-	 * override it based on internal heuristics.
-	 *
-	 * A value of `'assertive'` is to be used for important, and usually
-	 * time-sensitive, information. It will interrupt anything else the screen
-	 * reader is announcing in that moment.
-	 * A value of `'polite'` is to be used for advisory information. It should
-	 * not interrupt what the screen reader is announcing in that moment
-	 * (the "speech queue") or interrupt the current task.
-	 *
-	 * @see https://www.w3.org/TR/wai-aria-1.1/#aria-live
-	 *
-	 * @default 'polite'
-	 */
-	politeness?: 'polite' | 'assertive';
-	/**
-	 * An array of action objects.
-	 *
-	 * Each member object should contain
-	 * a `label` and either a `url` link string or `onClick` callback function.
-	 *
-	 * @default []
-	 */
-	actions?: Notice[ 'actions' ];
-	/**
-	 * Called to remove the snackbar from the UI.
-	 */
-	onRemove?: () => void;
+type SnackbarOnlyProps = {
 	/**
 	 * The icon to render in the snackbar.
 	 *
 	 * @default null
 	 */
-	icon?: Notice[ 'icon' ];
+	icon?: ReactNode;
 	/**
 	 * Whether to require user action to dismiss the snackbar.
 	 * By default, this is dismissed on a timeout, without user interaction.
 	 *
 	 * @default false
 	 */
-	explicitDismiss?: Notice[ 'explicitDismiss' ];
-	/**
-	 * A callback executed when the snackbar is dismissed.
-	 *
-	 * It is distinct from onRemove, which _looks_ like a callback but is
-	 * actually the function to call to remove the snackbar from the UI.
-	 */
-	onDismiss?: Notice[ 'onDismiss' ];
+	explicitDismiss?: boolean;
 	/**
 	 * A ref to the list that contains the snackbar.
 	 */
 	listRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
+export type SnackbarProps = Pick<
+	NoticeProps,
+	| 'className'
+	| 'children'
+	| 'spokenMessage'
+	| 'onRemove'
+	| 'politeness'
+	| 'onDismiss'
+> &
+	SnackbarOnlyProps & {
+		/**
+		 * An array of action objects. Each member object should contain:
+		 *
+		 * - `label`: `string` containing the text of the button/link
+		 * - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify
+		 *    what the action does.
+		 *
+		 * The default appearance of an action button is inferred based on whether
+		 * `url` or `onClick` are provided, rendering the button as a link if
+		 * appropriate. If both props are provided, `url` takes precedence, and the
+		 * action button will render as an anchor tag.
+		 *
+		 * @default []
+		 */
+		actions?: Pick< NoticeAction, 'label' | 'url' | 'onClick' >[];
+	};
+
 export type SnackbarListProps = {
-	/**
-	 * Array of notices to render.
-	 */
-	notices: Notice[];
-	/**
-	 * Children to be rendered inside the notice list.
-	 */
-	children?: ReactNode;
-	/**
-	 * Function called when a notice should be removed / dismissed.
-	 */
-	onRemove?: ( id: Notice[ 'id' ] ) => void;
+	notices: Array<
+		Omit< SnackbarProps, 'children' > & {
+			id: string;
+			content: string;
+		}
+	>;
+	onRemove: ( id: string ) => void;
+	children?: NoticeChildren | Array< NoticeChildren >;
 };
diff --git a/packages/components/src/spacer/README.md b/packages/components/src/spacer/README.md
index 577e306acbf54e..16160d39b61fa0 100644
--- a/packages/components/src/spacer/README.md
+++ b/packages/components/src/spacer/README.md
@@ -6,8 +6,6 @@ This feature is still experimental. “Experimental” means this is an early im
 
 `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.
 
-## Table of contents
-
 ## Usage
 
 `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
diff --git a/packages/components/src/spacer/component.tsx b/packages/components/src/spacer/component.tsx
index cce8f0b54905e4..afb4f8675933a5 100644
--- a/packages/components/src/spacer/component.tsx
+++ b/packages/components/src/spacer/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useSpacer } from './hook';
 import type { SpacerProps } from './types';
diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts
index 1ddf4dd7ae428b..3ef4b21e104c74 100644
--- a/packages/components/src/spacer/hook.ts
+++ b/packages/components/src/spacer/hook.ts
@@ -6,13 +6,15 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
-import { space } from '../ui/utils/space';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
+import { space } from '../utils/space';
 import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
 
-const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
-	typeof o !== 'undefined' && o !== null;
+function isDefined< T >( o: T ): o is Exclude< T, null | undefined > {
+	return typeof o !== 'undefined' && o !== null;
+}
 
 export function useSpacer(
 	props: WordPressComponentProps< SpacerProps, 'div' >
diff --git a/packages/components/src/spacer/stories/index.story.tsx b/packages/components/src/spacer/stories/index.story.tsx
new file mode 100644
index 00000000000000..586658ac0f01f5
--- /dev/null
+++ b/packages/components/src/spacer/stories/index.story.tsx
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+const controls = [
+	'margin',
+	'marginY',
+	'marginX',
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+
+	'padding',
+	'paddingY',
+	'paddingX',
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+].reduce(
+	( acc, prop ) => ( { ...acc, [ prop ]: { control: { type: 'text' } } } ),
+	{}
+);
+
+const meta: Meta< typeof Spacer > = {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: {
+			control: { type: 'text' },
+		},
+		...controls,
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+const Template: StoryFn< typeof Spacer > = ( { onChange, ...args } ) => {
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...args } />
+			<BlackBox />
+		</>
+	);
+};
+
+export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
+Default.args = {
+	children: 'This is the spacer',
+};
diff --git a/packages/components/src/spacer/stories/index.tsx b/packages/components/src/spacer/stories/index.tsx
deleted file mode 100644
index 46520e2069bce5..00000000000000
--- a/packages/components/src/spacer/stories/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Spacer } from '..';
-
-const controls = [
-	'margin',
-	'marginY',
-	'marginX',
-	'marginTop',
-	'marginBottom',
-	'marginLeft',
-	'marginRight',
-
-	'padding',
-	'paddingY',
-	'paddingX',
-	'paddingTop',
-	'paddingBottom',
-	'paddingLeft',
-	'paddingRight',
-].reduce(
-	( acc, prop ) => ( { ...acc, [ prop ]: { control: { type: 'text' } } } ),
-	{}
-);
-
-const meta: ComponentMeta< typeof Spacer > = {
-	component: Spacer,
-	title: 'Components (Experimental)/Spacer',
-	argTypes: {
-		as: { control: { type: 'text' } },
-		children: {
-			control: { type: 'text' },
-		},
-		...controls,
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const BlackBox = () => (
-	<div
-		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
-	/>
-);
-
-const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
-	return (
-		<>
-			<BlackBox />
-			<Spacer { ...args } />
-			<BlackBox />
-		</>
-	);
-};
-
-export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
-Default.args = {
-	children: 'This is the spacer',
-};
diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts
index c50801e2a3492b..52310c4f58bf28 100644
--- a/packages/components/src/spacer/types.ts
+++ b/packages/components/src/spacer/types.ts
@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type SpacerProps = {
 	/**
diff --git a/packages/components/src/spinner/README.md b/packages/components/src/spinner/README.md
index 474e6ebcb0a81a..64f596f22032fa 100644
--- a/packages/components/src/spinner/README.md
+++ b/packages/components/src/spinner/README.md
@@ -17,3 +17,5 @@ function Example() {
 The spinner component should:
 
 -   Signal to users that the processing of their request is underway and will soon complete.
+
+Check out the [Storybook page](https://wordpress.github.io/gutenberg/?path=/docs/components-spinner--docs) for a visual exploration of this component.
diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx
index 8fa34b9b230d31..b9c0a0e92b9e28 100644
--- a/packages/components/src/spinner/index.tsx
+++ b/packages/components/src/spinner/index.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
 import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * WordPress dependencies
@@ -21,7 +21,7 @@ export function UnforwardedSpinner(
 ) {
 	return (
 		<StyledSpinner
-			className={ classNames( 'components-spinner', className ) }
+			className={ clsx( 'components-spinner', className ) }
 			viewBox="0 0 100 100"
 			width="16"
 			height="16"
@@ -50,7 +50,6 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * @example
  * ```js
  *   import { Spinner } from '@wordpress/components';
  *
diff --git a/packages/components/src/spinner/stories/index.story.tsx b/packages/components/src/spinner/stories/index.story.tsx
new file mode 100644
index 00000000000000..1dc5879ac41444
--- /dev/null
+++ b/packages/components/src/spinner/stories/index.story.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Spinner from '../';
+import { space } from '../../utils/space';
+
+const meta: Meta< typeof Spinner > = {
+	title: 'Components/Feedback/Spinner',
+	id: 'components-spinner',
+	component: Spinner,
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Spinner > = ( args ) => {
+	return <Spinner { ...args } />;
+};
+
+export const Default: StoryFn< typeof Spinner > = Template.bind( {} );
+
+// The Spinner can be resized to any size, but the stroke width will remain unchanged.
+export const CustomSize: StoryFn< typeof Spinner > = Template.bind( {} );
+CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };
diff --git a/packages/components/src/spinner/stories/index.tsx b/packages/components/src/spinner/stories/index.tsx
deleted file mode 100644
index 7afaa35d3871fe..00000000000000
--- a/packages/components/src/spinner/stories/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import Spinner from '../';
-import { space } from '../../ui/utils/space';
-
-const meta: ComponentMeta< typeof Spinner > = {
-	title: 'Components/Spinner',
-	component: Spinner,
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Spinner > = ( args ) => {
-	return <Spinner { ...args } />;
-};
-
-export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
-
-// The Spinner can be resized to any size, but the stroke width will remain unchanged.
-export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
-CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };
diff --git a/packages/components/src/spinner/styles.ts b/packages/components/src/spinner/styles.ts
index 7a5a2205c97dd9..e51fd29470541c 100644
--- a/packages/components/src/spinner/styles.ts
+++ b/packages/components/src/spinner/styles.ts
@@ -24,8 +24,10 @@ export const StyledSpinner = styled.svg`
 	display: inline-block;
 	margin: 5px 11px 0;
 	position: relative;
-	color: ${ COLORS.ui.theme };
+	color: ${ COLORS.theme.accent };
 	overflow: visible;
+	opacity: 1;
+	background-color: transparent;
 `;
 
 const commonPathProps = css`
diff --git a/packages/components/src/style-provider/index.tsx b/packages/components/src/style-provider/index.tsx
index 0fa2c5b6ca008a..1c1b55589dedcc 100644
--- a/packages/components/src/style-provider/index.tsx
+++ b/packages/components/src/style-provider/index.tsx
@@ -3,7 +3,6 @@
  */
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
-import memoize from 'memize';
 import * as uuid from 'uuid';
 
 /**
@@ -12,19 +11,27 @@ import * as uuid from 'uuid';
 import type { StyleProviderProps } from './types';
 
 const uuidCache = new Set();
+// Use a weak map so that when the container is detached it's automatically
+// dereferenced to avoid memory leak.
+const containerCacheMap = new WeakMap();
 
-const memoizedCreateCacheWithContainer = memoize(
-	( container: HTMLElement ) => {
-		// Emotion only accepts alphabetical and hyphenated keys so we just
-		// strip the numbers from the UUID. It _should_ be fine.
-		let key = uuid.v4().replace( /[0-9]/g, '' );
-		while ( uuidCache.has( key ) ) {
-			key = uuid.v4().replace( /[0-9]/g, '' );
-		}
-		uuidCache.add( key );
-		return createCache( { container, key } );
+const memoizedCreateCacheWithContainer = ( container: HTMLElement ) => {
+	if ( containerCacheMap.has( container ) ) {
+		return containerCacheMap.get( container );
 	}
-);
+
+	// Emotion only accepts alphabetical and hyphenated keys so we just
+	// strip the numbers from the UUID. It _should_ be fine.
+	let key = uuid.v4().replace( /[0-9]/g, '' );
+	while ( uuidCache.has( key ) ) {
+		key = uuid.v4().replace( /[0-9]/g, '' );
+	}
+	uuidCache.add( key );
+
+	const cache = createCache( { container, key } );
+	containerCacheMap.set( container, cache );
+	return cache;
+};
 
 export function StyleProvider( props: StyleProviderProps ) {
 	const { children, document } = props;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 80dc3dbb682669..70317f4a2d0e0b 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,3 +1,9 @@
+// Include the default WP Components color variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 
@@ -11,16 +17,16 @@
 @import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
-@import "./color-list-picker/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
-@import "./custom-select-control/style.scss";
 @import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
+@import "./duotone-picker/color-list-picker/style.scss";
+@import "./external-link/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";
@@ -38,13 +44,13 @@
 @import "./responsive-wrapper/style.scss";
 @import "./sandbox/style.scss";
 @import "./scroll-lock/style.scss";
-@import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
-@import "./toolbar/style.scss";
-@import "./toolbar-button/style.scss";
-@import "./toolbar-group/style.scss";
+@import "./toggle-control/style.scss";
+@import "./toolbar/toolbar/style.scss";
+@import "./toolbar/toolbar-button/style.scss";
+@import "./toolbar/toolbar-group/style.scss";
 @import "./tooltip/style.scss";
diff --git a/packages/components/src/surface/component.tsx b/packages/components/src/surface/component.tsx
index 5b86494c991f5d..ba0745a40b5044 100644
--- a/packages/components/src/surface/component.tsx
+++ b/packages/components/src/surface/component.tsx
@@ -6,11 +6,11 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useSurface } from './hook';
 import type { SurfaceProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnconnectedSurface(
 	props: WordPressComponentProps< SurfaceProps, 'div' >,
diff --git a/packages/components/src/surface/hook.ts b/packages/components/src/surface/hook.ts
index 3cad00d4a7f69f..bacc2f2b291348 100644
--- a/packages/components/src/surface/hook.ts
+++ b/packages/components/src/surface/hook.ts
@@ -6,11 +6,11 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
 import type { SurfaceProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export function useSurface(
 	props: WordPressComponentProps< SurfaceProps, 'div' >
diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx
new file mode 100644
index 00000000000000..1ef0c0d5637cb4
--- /dev/null
+++ b/packages/components/src/surface/stories/index.story.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Surface } from '..';
+import { Text } from '../../text';
+
+const meta: Meta< typeof Surface > = {
+	component: Surface,
+	title: 'Components (Experimental)/Surface',
+	argTypes: {
+		children: { control: false },
+		as: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Surface > = ( args ) => {
+	return (
+		<Surface
+			{ ...args }
+			style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
+		>
+			<Text>Code is Poetry</Text>
+		</Surface>
+	);
+};
+
+export const Default: StoryFn< typeof Surface > = Template.bind( {} );
+Default.args = {};
diff --git a/packages/components/src/surface/stories/index.tsx b/packages/components/src/surface/stories/index.tsx
deleted file mode 100644
index aa26cf29882f86..00000000000000
--- a/packages/components/src/surface/stories/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Surface } from '..';
-import { Text } from '../../text';
-
-const meta: ComponentMeta< typeof Surface > = {
-	component: Surface,
-	title: 'Components (Experimental)/Surface',
-	argTypes: {
-		children: { control: { type: null } },
-		as: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Surface > = ( args ) => {
-	return (
-		<Surface
-			{ ...args }
-			style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
-		>
-			<Text>Code is Poetry</Text>
-		</Surface>
-	);
-};
-
-export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
-Default.args = {};
diff --git a/packages/components/src/surface/test/__snapshots__/index.tsx.snap b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
index 200382f04ae5b6..520649a54d295a 100644
--- a/packages/components/src/surface/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1bmtyqd-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-iin9ud-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-4j30ez-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1v7smm4-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
@@ -94,8 +94,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+-     class="components-surface css-1afnk4j-PolymorphicDiv-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-1u146xf-PolymorphicDiv-Surface-getBorders-primary e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="Surface"
     >
diff --git a/packages/components/src/tab-panel/README.md b/packages/components/src/tab-panel/README.md
index c3e889a2bbf33d..73d5d16b46985b 100644
--- a/packages/components/src/tab-panel/README.md
+++ b/packages/components/src/tab-panel/README.md
@@ -6,11 +6,6 @@ TabPanels organize content across different screens, data sets, and interactions
 
 ![The “Document” tab selected in the sidebar TabPanel.](https://wordpress.org/gutenberg/files/2019/01/s_E36D9C9B8FFA15A1A8CE224E422535A12B016F88884089575F9998E52016A49F_1541785098230_TabPanel.png)
 
-## Table of contents
-
-1. Design guidelines
-2. Development guidelines
-
 ## Design guidelines
 
 ### Usage
@@ -121,6 +116,7 @@ An array of objects containing the following properties:
 -   `title`:`(string)` Defines the translated text for the tab.
 -   `className`:`(string)` Optional. Defines the class to put on the tab.
 -   `icon`:`(ReactNode)` Optional. When set, displays the icon in place of the tab title. The title is then rendered as an aria-label and tooltip.
+-   `disabled`:`(boolean)` Optional. Determines if the tab should be disabled or selectable.
 
 > > **Note:** Other fields may be added to the object and accessed from the child function if desired.
 
@@ -143,6 +139,14 @@ The name of the tab to be selected upon mounting of component. If this prop is n
 -   Required: No
 -   Default: none
 
+#### selectOnMove
+
+When `true`, the tab will be selected when receiving focus (automatic tab activation). When `false`, the tab will be selected only when clicked (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) for more info.
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `true`
+
 #### children
 
 A function which renders the tabviews given the selected tab. The function is passed the active tab object as an argument as defined the tabs prop.
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index dfd3ebd9455190..be06b42fcd013f 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -1,41 +1,41 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { find } from 'lodash';
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
+import {
+	forwardRef,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { NavigableMenu } from '../navigable-container';
+
 import Button from '../button';
-import type { TabButtonProps, TabPanelProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-
-const TabButton = ( {
-	tabId,
-	onClick,
-	children,
-	selected,
-	...rest
-}: TabButtonProps ) => (
-	<Button
-		role="tab"
-		tabIndex={ selected ? null : -1 }
-		aria-selected={ selected }
-		id={ tabId }
-		onClick={ onClick }
-		{ ...rest }
-	>
-		{ children }
-	</Button>
-);
+import type { TabPanelProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+// Separate the actual tab name from the instance ID. This is
+// necessary because Ariakit internally uses the element ID when
+// a new tab is selected, but our implementation looks specifically
+// for the tab name to be passed to the `onSelect` callback.
+const extractTabName = ( id: string | undefined | null ) => {
+	if ( typeof id === 'undefined' || id === null ) {
+		return;
+	}
+	return id.match( /^tab-panel-[0-9]*-(.*)/ )?.[ 1 ];
+};
 
 /**
  * TabPanel is an ARIA-compliant tabpanel.
@@ -73,81 +73,178 @@ const TabButton = ( {
  * );
  * ```
  */
-export function TabPanel( {
-	className,
-	children,
-	tabs,
-	initialTabName,
-	orientation = 'horizontal',
-	activeClass = 'is-active',
-	onSelect,
-}: WordPressComponentProps< TabPanelProps, 'div', false > ) {
+const UnforwardedTabPanel = (
+	{
+		className,
+		children,
+		tabs,
+		selectOnMove = true,
+		initialTabName,
+		orientation = 'horizontal',
+		activeClass = 'is-active',
+		onSelect,
+	}: WordPressComponentProps< TabPanelProps, 'div', false >,
+	ref: ForwardedRef< any >
+) => {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
-	const [ selected, setSelected ] = useState< string >();
 
-	const handleTabSelection = useCallback(
-		( tabKey: string ) => {
-			setSelected( tabKey );
-			onSelect?.( tabKey );
+	const prependInstanceId = useCallback(
+		( tabName: string | undefined ) => {
+			if ( typeof tabName === 'undefined' ) {
+				return;
+			}
+			return `${ instanceId }-${ tabName }`;
+		},
+		[ instanceId ]
+	);
+
+	const tabStore = Ariakit.useTabStore( {
+		setSelectedId: ( newTabValue ) => {
+			if ( typeof newTabValue === 'undefined' || newTabValue === null ) {
+				return;
+			}
+
+			const newTab = tabs.find(
+				( t ) => prependInstanceId( t.name ) === newTabValue
+			);
+			if ( newTab?.disabled || newTab === selectedTab ) {
+				return;
+			}
+
+			const simplifiedTabName = extractTabName( newTabValue );
+			if ( typeof simplifiedTabName === 'undefined' ) {
+				return;
+			}
+
+			onSelect?.( simplifiedTabName );
+		},
+		orientation,
+		selectOnMove,
+		defaultSelectedId: prependInstanceId( initialTabName ),
+		rtl: isRTL(),
+	} );
+
+	const selectedTabName = extractTabName(
+		useStoreState( tabStore, 'selectedId' )
+	);
+
+	const setTabStoreSelectedId = useCallback(
+		( tabName: string ) => {
+			tabStore.setState( 'selectedId', prependInstanceId( tabName ) );
 		},
-		[ onSelect ]
+		[ prependInstanceId, tabStore ]
 	);
 
-	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
-		child.click();
-	};
-	const selectedTab = find( tabs, { name: selected } );
-	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
+	const selectedTab = tabs.find( ( { name } ) => name === selectedTabName );
+
+	const previousSelectedTabName = usePrevious( selectedTabName );
 
+	// Ensure `onSelect` is called when the initial tab is selected.
 	useEffect( () => {
-		if ( ! selectedTab?.name && tabs.length > 0 ) {
-			handleTabSelection( initialTabName || tabs[ 0 ].name );
+		if (
+			previousSelectedTabName !== selectedTabName &&
+			selectedTabName === initialTabName &&
+			!! selectedTabName
+		) {
+			onSelect?.( selectedTabName );
+		}
+	}, [ selectedTabName, initialTabName, onSelect, previousSelectedTabName ] );
+
+	// Handle selecting the initial tab.
+	useLayoutEffect( () => {
+		// If there's a selected tab, don't override it.
+		if ( selectedTab ) {
+			return;
 		}
-	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
+		const initialTab = tabs.find( ( tab ) => tab.name === initialTabName );
+		// Wait for the denoted initial tab to be declared before making a
+		// selection. This ensures that if a tab is declared lazily it can
+		// still receive initial selection.
+		if ( initialTabName && ! initialTab ) {
+			return;
+		}
+		if ( initialTab && ! initialTab.disabled ) {
+			// Select the initial tab if it's not disabled.
+			setTabStoreSelectedId( initialTab.name );
+		} else {
+			// Fallback to the first enabled tab when the initial tab is
+			// disabled or it can't be found.
+			const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+			if ( firstEnabledTab ) {
+				setTabStoreSelectedId( firstEnabledTab.name );
+			}
+		}
+	}, [
+		tabs,
+		selectedTab,
+		initialTabName,
+		instanceId,
+		setTabStoreSelectedId,
+	] );
 
+	// Handle the currently selected tab becoming disabled.
+	useEffect( () => {
+		// This effect only runs when the selected tab is defined and becomes disabled.
+		if ( ! selectedTab?.disabled ) {
+			return;
+		}
+		const firstEnabledTab = tabs.find( ( tab ) => ! tab.disabled );
+		// If the currently selected tab becomes disabled, select the first enabled tab.
+		// (if there is one).
+		if ( firstEnabledTab ) {
+			setTabStoreSelectedId( firstEnabledTab.name );
+		}
+	}, [ tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId ] );
 	return (
-		<div className={ className }>
-			<NavigableMenu
-				role="tablist"
-				orientation={ orientation }
-				onNavigate={ onNavigate }
+		<div className={ className } ref={ ref }>
+			<Ariakit.TabList
+				store={ tabStore }
 				className="components-tab-panel__tabs"
 			>
-				{ tabs.map( ( tab ) => (
-					<TabButton
-						className={ classnames(
-							'components-tab-panel__tabs-item',
-							tab.className,
-							{
-								[ activeClass ]: tab.name === selected,
+				{ tabs.map( ( tab ) => {
+					return (
+						<Ariakit.Tab
+							key={ tab.name }
+							id={ prependInstanceId( tab.name ) }
+							className={ clsx(
+								'components-tab-panel__tabs-item',
+								tab.className,
+								{
+									[ activeClass ]:
+										tab.name === selectedTabName,
+								}
+							) }
+							disabled={ tab.disabled }
+							aria-controls={ `${ prependInstanceId(
+								tab.name
+							) }-view` }
+							render={
+								<Button
+									__next40pxDefaultSize
+									icon={ tab.icon }
+									label={ tab.icon && tab.title }
+									showTooltip={ !! tab.icon }
+								/>
 							}
-						) }
-						tabId={ `${ instanceId }-${ tab.name }` }
-						aria-controls={ `${ instanceId }-${ tab.name }-view` }
-						selected={ tab.name === selected }
-						key={ tab.name }
-						onClick={ () => handleTabSelection( tab.name ) }
-						label={ tab.icon && tab.title }
-						icon={ tab.icon }
-						showTooltip={ !! tab.icon }
-					>
-						{ ! tab.icon && tab.title }
-					</TabButton>
-				) ) }
-			</NavigableMenu>
+						>
+							{ ! tab.icon && tab.title }
+						</Ariakit.Tab>
+					);
+				} ) }
+			</Ariakit.TabList>
 			{ selectedTab && (
-				<div
-					key={ selectedId }
-					aria-labelledby={ selectedId }
-					role="tabpanel"
-					id={ `${ selectedId }-view` }
+				<Ariakit.TabPanel
+					id={ `${ prependInstanceId( selectedTab.name ) }-view` }
+					store={ tabStore }
+					tabId={ prependInstanceId( selectedTab.name ) }
 					className="components-tab-panel__tab-content"
 				>
 					{ children( selectedTab ) }
-				</div>
+				</Ariakit.TabPanel>
 			) }
 		</div>
 	);
-}
+};
 
+export const TabPanel = forwardRef( UnforwardedTabPanel );
 export default TabPanel;
diff --git a/packages/components/src/tab-panel/stories/index.story.tsx b/packages/components/src/tab-panel/stories/index.story.tsx
new file mode 100644
index 00000000000000..57a3cc311f863c
--- /dev/null
+++ b/packages/components/src/tab-panel/stories/index.story.tsx
@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { link, more, wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import TabPanel from '..';
+
+const meta: Meta< typeof TabPanel > = {
+	title: 'Components/Containers/TabPanel',
+	id: 'components-tabpanel',
+	component: TabPanel,
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+	],
+};
+
+export const DisabledTab = Template.bind( {} );
+DisabledTab.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			disabled: true,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+		},
+	],
+};
+
+const SlotFillTemplate: StoryFn< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
+};
+
+export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
+WithTabIconsAndTooltips.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			icon: wordpress,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+			icon: link,
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			icon: more,
+		},
+	],
+};
+
+export const ManualActivation = Template.bind( {} );
+ManualActivation.args = {
+	...Default.args,
+	selectOnMove: false,
+};
diff --git a/packages/components/src/tab-panel/stories/index.tsx b/packages/components/src/tab-panel/stories/index.tsx
deleted file mode 100644
index 0088f79d7b5d65..00000000000000
--- a/packages/components/src/tab-panel/stories/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import TabPanel from '..';
-
-const meta: ComponentMeta< typeof TabPanel > = {
-	title: 'Components/TabPanel',
-	component: TabPanel,
-	parameters: {
-		controls: { expanded: true },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof TabPanel > = ( props ) => {
-	return <TabPanel { ...props } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
-	tabs: [
-		{
-			name: 'tab1',
-			title: 'Tab 1',
-		},
-		{
-			name: 'tab2',
-			title: 'Tab 2',
-		},
-	],
-};
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
index 6a796b93015771..b54f7af1bf4ded 100644
--- a/packages/components/src/tab-panel/style.scss
+++ b/packages/components/src/tab-panel/style.scss
@@ -8,56 +8,89 @@
 }
 
 .components-tab-panel__tabs-item {
+	position: relative;
+	border-radius: 0;
+	height: $grid-unit-60 !important; // https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	background: transparent;
 	border: none;
 	box-shadow: none;
-	border-radius: 0;
 	cursor: pointer;
-	height: $grid-unit-60;
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 500;
-	transition: box-shadow 0.1s linear;
-	box-sizing: border-box;
 
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
+	&:focus:not(:disabled) {
+		position: relative;
+		box-shadow: none;
+		outline: none;
+	}
+
+	// Tab indicator
 	&::after {
-		content: attr(data-label);
-		display: block;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
+		content: "";
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
+
+		// Draw the indicator.
+		background: $components-color-accent;
+		height: calc(0 * var(--wp-admin-border-width-focus));
+		border-radius: 0;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&:focus:not(:disabled) {
-		box-shadow: inset 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	// Active.
+	&.is-active::after {
+		height: calc(1 * var(--wp-admin-border-width-focus));
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
 	}
 
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 $components-color-accent;
-		position: relative;
+	// Focus.
+	&::before {
+		content: "";
+		position: absolute;
+		top: $grid-unit-15;
+		right: $grid-unit-15;
+		bottom: $grid-unit-15;
+		left: $grid-unit-15;
+		pointer-events: none;
+
+		// Draw the indicator.
+		box-shadow: 0 0 0 0 transparent;
+		border-radius: $radius-small;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:focus-visible::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
+}
 
+.components-tab-panel__tab-content {
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+		box-shadow: none;
+		outline: none;
 	}
 
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, inset 0 -#{$border-width-tab * 2} 0 0 $components-color-accent;
+	&:focus-visible {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
 	}
 }
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index ce096cac6bcb5d..28dd1a81e9e84f 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { press, hover, click } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress, category, media } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import TabPanel from '..';
 
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
-
 const TABS = [
 	{
 		name: 'alpha',
@@ -32,166 +32,919 @@ const TABS = [
 	},
 ];
 
-const getSelectedTab = () => screen.getByRole( 'tab', { selected: true } );
-
-describe( 'TabPanel', () => {
-	it( 'should render a tabpanel, and clicking should change tabs', async () => {
-		const user = setupUser();
-		const panelRenderFunction = jest.fn();
-		const mockOnSelect = jest.fn();
-
-		render(
-			<TabPanel
-				tabs={ TABS }
-				children={ panelRenderFunction }
-				onSelect={ mockOnSelect }
-			/>
-		);
-
-		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
-		expect(
-			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
-		).toBeInTheDocument();
-		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
-		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
-
-		await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
-
-		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
-		expect(
-			screen.getByRole( 'tabpanel', { name: 'Beta' } )
-		).toBeInTheDocument();
-		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 1 ] );
-		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
-
-		await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
-
-		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
-		expect(
-			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
-		).toBeInTheDocument();
-		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
-		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+const getSelectedTab = async () =>
+	await screen.findByRole( 'tab', { selected: true } );
+
+let originalGetClientRects: () => DOMRectList;
+
+describe.each( [
+	[ 'uncontrolled', TabPanel ],
+	// The controlled component tests will be added once we certify the
+	// uncontrolled component's behaviour on trunk.
+	// [ 'controlled', TabPanel ],
+] )( 'TabPanel %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	beforeAll( () => {
+		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
+		// Mocking `getClientRects()` is necessary to pass a check performed by
+		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
+		// from the `@wordpress/dom` package.
+		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+		window.HTMLElement.prototype.getClientRects = function () {
+			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+		};
 	} );
 
-	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
-		render(
-			<TabPanel
-				initialTabName="beta"
-				tabs={ TABS }
-				children={ () => undefined }
-			/>
-		);
-		const selectedTab = screen.getByRole( 'tab', { selected: true } );
-		expect( selectedTab ).toHaveTextContent( 'Beta' );
+	afterAll( () => {
+		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
 	} );
 
-	it( 'should apply the `activeClass` to the selected tab', async () => {
-		const user = setupUser();
-		const activeClass = 'my-active-tab';
-
-		render(
-			<TabPanel
-				activeClass={ activeClass }
-				tabs={ TABS }
-				children={ () => undefined }
-			/>
-		);
-		expect( getSelectedTab() ).toHaveClass( activeClass );
-		screen
-			.getAllByRole( 'tab', { selected: false } )
-			.forEach( ( unselectedTab ) => {
-				expect( unselectedTab ).not.toHaveClass( activeClass );
-			} );
-
-		await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
-
-		expect( getSelectedTab() ).toHaveClass( activeClass );
-		screen
-			.getAllByRole( 'tab', { selected: false } )
-			.forEach( ( unselectedTab ) => {
-				expect( unselectedTab ).not.toHaveClass( activeClass );
-			} );
+	describe( 'Accessibility and semantics', () => {
+		it( 'should use the correct aria attributes', async () => {
+			const panelRenderFunction = jest.fn();
+
+			render(
+				<Component tabs={ TABS } children={ panelRenderFunction } />
+			);
+
+			const tabList = screen.getByRole( 'tablist' );
+			const allTabs = screen.getAllByRole( 'tab' );
+			const selectedTabPanel = await screen.findByRole( 'tabpanel' );
+
+			expect( tabList ).toBeVisible();
+			expect( tabList ).toHaveAttribute(
+				'aria-orientation',
+				'horizontal'
+			);
+
+			expect( allTabs ).toHaveLength( TABS.length );
+
+			// The selected `tab` aria-controls the active `tabpanel`,
+			// which is `aria-labelledby` the selected `tab`.
+			expect( selectedTabPanel ).toBeVisible();
+			expect( allTabs[ 0 ] ).toHaveAttribute(
+				'aria-controls',
+				selectedTabPanel.getAttribute( 'id' )
+			);
+			expect( selectedTabPanel ).toHaveAttribute(
+				'aria-labelledby',
+				allTabs[ 0 ].getAttribute( 'id' )
+			);
+		} );
+
+		it( 'should display a tooltip when hovering tabs provided with an icon', async () => {
+			const panelRenderFunction = jest.fn();
+
+			const TABS_WITH_ICON = [
+				{ ...TABS[ 0 ], icon: wordpress },
+				{ ...TABS[ 1 ], icon: category },
+				{ ...TABS[ 2 ], icon: media },
+			];
+
+			render(
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+				/>
+			);
+
+			const allTabs = screen.getAllByRole( 'tab' );
+
+			for ( let i = 0; i < allTabs.length; i++ ) {
+				expect(
+					screen.queryByText( TABS_WITH_ICON[ i ].title )
+				).not.toBeInTheDocument();
+
+				await hover( allTabs[ i ] );
+
+				await waitFor( () =>
+					expect(
+						screen.getByText( TABS_WITH_ICON[ i ].title )
+					).toBeVisible()
+				);
+
+				// Trigger closing the tooltip
+				await click( document.body );
+			}
+		} );
+
+		it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
+			const mockOnSelect = jest.fn();
+			const panelRenderFunction = jest.fn();
+
+			const TABS_WITH_ICON = [
+				{ ...TABS[ 0 ], icon: wordpress },
+				{ ...TABS[ 1 ], icon: category },
+				{ ...TABS[ 2 ], icon: media },
+			];
+
+			render(
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).not.toHaveTextContent( 'Alpha' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+			expect( await getSelectedTab() ).not.toHaveFocus();
+
+			// Tab to focus the tablist. Make sure alpha is focused, and that the
+			// corresponding tooltip is shown.
+			expect( screen.queryByText( 'Alpha' ) ).not.toBeInTheDocument();
+			await press.Tab();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( screen.getByText( 'Alpha' ) ).toBeInTheDocument();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Move selection with arrow keys. Make sure beta is focused, and that
+			// the corresponding tooltip is shown.
+			expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
+			await press.ArrowRight();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Move selection with arrow keys. Make sure gamma is focused, and that
+			// the corresponding tooltip is shown.
+			expect( screen.queryByText( 'Gamma' ) ).not.toBeInTheDocument();
+			await press.ArrowRight();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+			expect( screen.getByText( 'Gamma' ) ).toBeInTheDocument();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Move selection with arrow keys. Make sure beta is focused, and that
+			// the corresponding tooltip is shown.
+			expect( screen.queryByText( 'Beta' ) ).not.toBeInTheDocument();
+			await press.ArrowLeft();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
+			expect( await getSelectedTab() ).toHaveFocus();
+		} );
 	} );
 
-	it( "should apply the tab's `className` to the tab button", () => {
-		render( <TabPanel tabs={ TABS } children={ () => undefined } /> );
-
-		expect( screen.getByRole( 'tab', { name: 'Alpha' } ) ).toHaveClass(
-			'alpha-class'
-		);
-		expect( screen.getByRole( 'tab', { name: 'Beta' } ) ).toHaveClass(
-			'beta-class'
-		);
-		expect( screen.getByRole( 'tab', { name: 'Gamma' } ) ).toHaveClass(
-			'gamma-class'
-		);
+	describe( 'Without `initialTabName`', () => {
+		it( 'should render first tab', async () => {
+			const panelRenderFunction = jest.fn();
+
+			render(
+				<Component tabs={ TABS } children={ panelRenderFunction } />
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect(
+				await screen.findByRole( 'tabpanel', { name: 'Alpha' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should fall back to first enabled tab if the active tab is removed', async () => {
+			const mockOnSelect = jest.fn();
+			const { rerender } = render(
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			rerender(
+				<Component
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+		} );
 	} );
 
-	it( 'should select `initialTabname` if defined', () => {
-		const mockOnSelect = jest.fn();
-
-		render(
-			<TabPanel
-				tabs={ TABS }
-				initialTabName="beta"
-				children={ () => undefined }
-				onSelect={ mockOnSelect }
-			/>
-		);
-		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
-		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+	describe( 'With `initialTabName`', () => {
+		it( 'should render the tab set by initialTabName prop', async () => {
+			render(
+				<Component
+					initialTabName="beta"
+					tabs={ TABS }
+					children={ () => undefined }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+		} );
+
+		it( 'should not select a tab when `initialTabName` does not match any known tab', () => {
+			render(
+				<Component
+					initialTabName="does-not-exist"
+					tabs={ TABS }
+					children={ () => undefined }
+				/>
+			);
+
+			// No tab should be selected i.e. it doesn't fall back to first tab.
+			expect(
+				screen.queryByRole( 'tab', { selected: true } )
+			).not.toBeInTheDocument();
+
+			// No tabpanel should be rendered either
+			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument();
+		} );
+		it( 'should not change tabs when initialTabName is changed', async () => {
+			const { rerender } = render(
+				<Component
+					initialTabName="beta"
+					tabs={ TABS }
+					children={ () => undefined }
+				/>
+			);
+
+			rerender(
+				<Component
+					initialTabName="alpha"
+					tabs={ TABS }
+					children={ () => undefined }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+		} );
+
+		it( 'should fall back to the tab associated to `initialTabName` if the currently active tab is removed', async () => {
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<Component
+					initialTabName="gamma"
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			rerender(
+				<Component
+					initialTabName="gamma"
+					tabs={ TABS.slice( 1 ) } // Remove alpha
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+
+		it( 'should have no active tabs when the tab associated to `initialTabName` is removed while being the active tab', async () => {
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<Component
+					initialTabName="gamma"
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			rerender(
+				<Component
+					initialTabName="gamma"
+					tabs={ TABS.slice( 0, 2 ) } // Remove gamma
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( screen.getAllByRole( 'tab' ) ).toHaveLength( 2 );
+			expect(
+				screen.queryByRole( 'tab', { selected: true } )
+			).not.toBeInTheDocument();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'waits for the tab with the `initialTabName` to be present in the `tabs` array before selecting it', async () => {
+			const mockOnSelect = jest.fn();
+			const { rerender } = render(
+				<Component
+					initialTabName="delta"
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// There should be no selected tab yet.
+			expect(
+				screen.queryByRole( 'tab', { selected: true } )
+			).not.toBeInTheDocument();
+
+			rerender(
+				<Component
+					initialTabName="delta"
+					tabs={ [
+						{
+							name: 'delta',
+							title: 'Delta',
+							className: 'delta-class',
+						},
+						...TABS,
+					] }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Delta' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'delta' );
+		} );
 	} );
 
-	describe( 'fallbacks when new tab list invalidates current selection', () => {
-		it( 'should select `initialTabName` if defined', async () => {
-			const user = setupUser();
+	describe( 'Disabled Tab', () => {
+		it( 'should disable the tab when `disabled` is `true`', async () => {
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ [
+						...TABS,
+						{
+							name: 'delta',
+							title: 'Delta',
+							className: 'delta-class',
+							disabled: true,
+						},
+					] }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'tab', { name: 'Delta' } )
+			).toHaveAttribute( 'aria-disabled', 'true' );
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// onSelect should not be called since the disabled tab is
+			// highlighted, but not selected.
+			await press.ArrowLeft();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should select first enabled tab when the initial tab is disabled', async () => {
 			const mockOnSelect = jest.fn();
 
 			const { rerender } = render(
-				<TabPanel
+				<Component
+					// Disable alpha
+					tabs={ TABS.map( ( tab ) => {
+						if ( tab.name !== 'alpha' ) {
+							return tab;
+						}
+						return { ...tab, disabled: true };
+					} ) }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// As alpha (first tab) is disabled,
+			// the first enabled tab should be gamma.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+
+			// Re-enable all tabs
+			rerender(
+				<Component
 					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// Even if the initial tab becomes enabled again, the selected tab doesn't
+			// change.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+		} );
+
+		it( 'should select first enabled tab when the tab associated to `initialTabName` is disabled', async () => {
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<Component
+					tabs={ TABS.map( ( tab ) => {
+						if ( tab.name === 'gamma' ) {
+							return tab;
+						}
+						return { ...tab, disabled: true };
+					} ) }
+					initialTabName="beta"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// As alpha (first tab), and beta (the initial tab), are both
+			// disabled the first enabled tab should be gamma.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+
+			// Re-enable all tabs
+			rerender(
+				<Component
+					tabs={ TABS }
+					initialTabName="beta"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// Even if the initial tab becomes enabled again, the selected tab doesn't
+			// change.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+		} );
+
+		it( 'should select the first enabled tab when the selected tab becomes disabled', async () => {
+			const mockOnSelect = jest.fn();
+			const { rerender } = render(
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			rerender(
+				<Component
+					tabs={ TABS.map( ( tab ) => {
+						if ( tab.name === 'alpha' ) {
+							return { ...tab, disabled: true };
+						}
+						return tab;
+					} ) }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			rerender(
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+		} );
+
+		it( 'should select the first enabled tab when the tab associated to `initialTabName` becomes disabled while being the active tab', async () => {
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<Component
+					initialTabName="gamma"
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			rerender(
+				<Component
 					initialTabName="gamma"
+					tabs={ [
+						TABS[ 0 ],
+						TABS[ 1 ],
+						{ ...TABS[ 2 ], disabled: true },
+					] } // Disable gamma
 					children={ () => undefined }
 					onSelect={ mockOnSelect }
 				/>
 			);
-			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 			rerender(
-				<TabPanel
-					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+				<Component
 					initialTabName="gamma"
+					tabs={ TABS }
 					children={ () => undefined }
 					onSelect={ mockOnSelect }
 				/>
 			);
-			expect( getSelectedTab() ).toHaveTextContent( 'Gamma' );
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+
+	describe( 'Tab Activation', () => {
+		it( 'defaults to automatic tab activation (pointer clicks)', async () => {
+			const panelRenderFunction = jest.fn();
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ TABS }
+					children={ panelRenderFunction }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// Alpha is the initially selected tab
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect(
+				await screen.findByRole( 'tabpanel', { name: 'Alpha' } )
+			).toBeInTheDocument();
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Click on Beta, make sure beta is the selected tab
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect(
+				screen.getByRole( 'tabpanel', { name: 'Beta' } )
+			).toBeInTheDocument();
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Click on Alpha, make sure beta is the selected tab
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect(
+				screen.getByRole( 'tabpanel', { name: 'Alpha' } )
+			).toBeInTheDocument();
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+		} );
+
+		it( 'defaults to automatic tab activation (arrow keys)', async () => {
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Tab to focus the tablist. Make sure alpha is focused.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).not.toHaveFocus();
+			await press.Tab();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Navigate forward with arrow keys and make sure the Beta tab is
+			// selected automatically.
+			await press.ArrowRight();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Navigate backwards with arrow keys. Make sure alpha is
+			// selected automatically.
+			await press.ArrowLeft();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+		} );
+
+		it( 'wraps around the last/first tab when using arrow keys', async () => {
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Tab to focus the tablist. Make sure Alpha is focused.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).not.toHaveFocus();
+			await press.Tab();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Navigate backwards with arrow keys and make sure that the Gamma tab
+			// (the last tab) is selected automatically.
+			await press.ArrowLeft();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			// Navigate forward with arrow keys. Make sure alpha (the first tab) is
+			// selected automatically.
+			await press.ArrowRight();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 		} );
 
-		it( 'should select first tab if `initialTabName` not defined', async () => {
-			const user = setupUser();
+		it( 'should not move tab selection when pressing the up/down arrow keys, unless the orientation is changed to `vertical`', async () => {
 			const mockOnSelect = jest.fn();
 
 			const { rerender } = render(
-				<TabPanel
+				<Component
 					tabs={ TABS }
 					children={ () => undefined }
 					onSelect={ mockOnSelect }
 				/>
 			);
-			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Tab to focus the tablist. Make sure alpha is focused.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).not.toHaveFocus();
+			await press.Tab();
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Press the arrow up key, nothing happens.
+			await press.ArrowUp();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Press the arrow down key, nothing happens
+			await press.ArrowDown();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Change orientation to `vertical`. When the orientation is vertical,
+			// left/right arrow keys are replaced by up/down arrow keys.
 			rerender(
-				<TabPanel
-					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+				<Component
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+					orientation="vertical"
+				/>
+			);
+
+			expect( screen.getByRole( 'tablist' ) ).toHaveAttribute(
+				'aria-orientation',
+				'vertical'
+			);
+
+			// Make sure alpha is still focused.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+
+			// Navigate forward with arrow keys and make sure the Beta tab is
+			// selected automatically.
+			await press.ArrowDown();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Navigate backwards with arrow keys. Make sure alpha is
+			// selected automatically.
+			await press.ArrowUp();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Navigate backwards with arrow keys. Make sure alpha is
+			// selected automatically.
+			await press.ArrowUp();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			// Navigate backwards with arrow keys. Make sure alpha is
+			// selected automatically.
+			await press.ArrowDown();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 5 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+		} );
+
+		it( 'should move focus on a tab even if disabled with arrow key, but not with pointer clicks', async () => {
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ [
+						...TABS,
+						{
+							name: 'delta',
+							title: 'Delta',
+							className: 'delta-class',
+							disabled: true,
+						},
+					] }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Tab to focus the tablist. Make sure Alpha is focused.
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).not.toHaveFocus();
+			await press.Tab();
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Press the right arrow key three times. Since the delta tab is disabled:
+			// - it won't be selected. The gamma tab will be selected instead, since
+			//   it was the tab that was last selected before delta. Therefore, the
+			//   `mockOnSelect` function gets called only twice (and not three times)
+			// - it will receive focus, when using arrow keys
+			await press.ArrowRight();
+			await press.ArrowRight();
+			await press.ArrowRight();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect(
+				screen.getByRole( 'tab', { name: 'Delta' } )
+			).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			// Navigate backwards with arrow keys. The gamma tab receives focus.
+			// The `mockOnSelect` callback doesn't fire, since the gamma tab was
+			// already selected.
+			await press.ArrowLeft();
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+
+			// Click on the disabled tab. Compared to using arrow keys to move the
+			// focus, disabled tabs ignore pointer clicks — and therefore, they don't
+			// receive focus, nor they cause the `mockOnSelect` function to fire.
+			await click( screen.getByRole( 'tab', { name: 'Delta' } ) );
+			expect( await getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( await getSelectedTab() ).toHaveFocus();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+		} );
+
+		it( 'should not focus the next tab when the Tab key is pressed', async () => {
+			render( <Component tabs={ TABS } children={ () => undefined } /> );
+
+			// Tab should initially focus the first tab in the tablist, which
+			// is Alpha.
+			await press.Tab();
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveFocus();
+
+			// Because all other tabs should have `tabindex=-1`, pressing Tab
+			// should NOT move the focus to the next tab, which is Beta.
+			await press.Tab();
+			expect(
+				await screen.findByRole( 'tab', { name: 'Beta' } )
+			).not.toHaveFocus();
+		} );
+
+		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
+			const mockOnSelect = jest.fn();
+
+			render(
+				<Component
+					tabs={ TABS }
 					children={ () => undefined }
 					onSelect={ mockOnSelect }
+					selectOnMove={ false }
 				/>
 			);
-			expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+
+			// onSelect gets called on the initial render with the default
+			// selected tab.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Click on Alpha and make sure it is selected.
+			// onSelect shouldn't fire since the selected tab didn't change.
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Navigate forward with arrow keys. Make sure Beta is focused, but
+			// that the tab selection happens only when pressing the spacebar
+			// or enter key.
+			await press.ArrowRight();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect(
+				await screen.findByRole( 'tab', { name: 'Beta' } )
+			).toHaveFocus();
+
+			await press.Enter();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Navigate forward with arrow keys. Make sure Gamma (last tab) is
+			// focused, but that tab selection happens only when pressing the
+			// spacebar or enter key.
+			await press.ArrowRight();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect(
+				screen.getByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
+
+			await press.Space();
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+	} );
+
+	describe( 'Tab Attributes', () => {
+		it( "should apply the tab's `className` to the tab button", async () => {
+			render( <Component tabs={ TABS } children={ () => undefined } /> );
+
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveClass( 'alpha-class' );
+			expect( screen.getByRole( 'tab', { name: 'Beta' } ) ).toHaveClass(
+				'beta-class'
+			);
+			expect( screen.getByRole( 'tab', { name: 'Gamma' } ) ).toHaveClass(
+				'gamma-class'
+			);
+		} );
+
+		it( 'should apply the `activeClass` to the selected tab', async () => {
+			const activeClass = 'my-active-tab';
+
+			render(
+				<Component
+					activeClass={ activeClass }
+					tabs={ TABS }
+					children={ () => undefined }
+				/>
+			);
+
+			// Make sure that only the selected tab has the active class
+			expect( await getSelectedTab() ).toHaveTextContent( 'Alpha' );
+			expect( await getSelectedTab() ).toHaveClass( activeClass );
+			screen
+				.getAllByRole( 'tab', { selected: false } )
+				.forEach( ( unselectedTab ) => {
+					expect( unselectedTab ).not.toHaveClass( activeClass );
+				} );
+
+			// Click the 'Beta' tab
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+
+			// Make sure that only the selected tab has the active class
+			expect( await getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( await getSelectedTab() ).toHaveClass( activeClass );
+			screen
+				.getAllByRole( 'tab', { selected: false } )
+				.forEach( ( unselectedTab ) => {
+					expect( unselectedTab ).not.toHaveClass( activeClass );
+				} );
 		} );
 	} );
 } );
diff --git a/packages/components/src/tab-panel/types.ts b/packages/components/src/tab-panel/types.ts
index 1436b8034a66af..1f4dc7c677483a 100644
--- a/packages/components/src/tab-panel/types.ts
+++ b/packages/components/src/tab-panel/types.ts
@@ -21,19 +21,16 @@ type Tab = {
 	 * The class name to apply to the tab button.
 	 */
 	className?: string;
+	/**
+	 * The icon used for the tab button.
+	 */
+	icon?: IconType;
+	/**
+	 * Determines if the tab button should be disabled.
+	 */
+	disabled?: boolean;
 } & Record< any, any >;
 
-export type TabButtonProps< IconProps = unknown > = {
-	children: ReactNode;
-	className?: string;
-	icon?: IconType< IconProps >;
-	label?: string;
-	onClick: ( event: MouseEvent ) => void;
-	selected: boolean;
-	showTooltip?: boolean;
-	tabId: string;
-};
-
 export type TabPanelProps = {
 	/**
 	 * The class name to add to the active tab.
@@ -70,4 +67,15 @@ export type TabPanelProps = {
 	 * Array of tab objects. Each tab object should contain at least a `name` and a `title`.
 	 */
 	tabs: Tab[];
+	/**
+	 * When `true`, the tab will be selected when receiving focus (automatic tab
+	 * activation). When `false`, the tab will be selected only when clicked
+	 * (manual tab activation). See the official W3C docs for more info.
+	 * .
+	 *
+	 * @default true
+	 *
+	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+	 */
+	selectOnMove?: boolean;
 };
diff --git a/packages/components/src/tabs/README.md b/packages/components/src/tabs/README.md
new file mode 100644
index 00000000000000..9c7e846046c904
--- /dev/null
+++ b/packages/components/src/tabs/README.md
@@ -0,0 +1,254 @@
+# Tabs
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+Tabs is a collection of React components that combine to render an [ARIA-compliant tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+
+Tabs organizes content across different screens, data sets, and interactions. It has two sections: a list of tabs, and the view to show when tabs are chosen.
+
+## Development guidelines
+
+### Usage
+
+#### Uncontrolled Mode
+
+Tabs can be used in an uncontrolled mode, where the component manages its own state. In this mode, the `defaultTabId` prop can be used to set the initially selected tab. If this prop is not set, the first tab will be selected by default. In addition, in most cases where the currently active tab becomes disabled or otherwise unavailable, uncontrolled mode will automatically fall back to selecting the first available tab.
+
+```jsx
+import { Tabs } from '@wordpress/components';
+
+const onSelect = ( tabName ) => {
+	console.log( 'Selecting tab', tabName );
+};
+
+const MyUncontrolledTabs = () => (
+		<Tabs onSelect={ onSelect } defaultTabId="tab2">
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1" title="Tab 1">
+					Tab 1
+				</Tabs.Tab>
+				<Tabs.Tab tabId="tab2" title="Tab 2">
+					Tab 2
+				</Tabs.Tab>
+				<Tabs.Tab tabId="tab3" title="Tab 3">
+					Tab 3
+				</Tabs.Tab>
+			</Tabs.TabList>
+			<Tabs.TabPanel tabId="tab1">
+				<p>Selected tab: Tab 1</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab2">
+				<p>Selected tab: Tab 2</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab3">
+				<p>Selected tab: Tab 3</p>
+			</Tabs.TabPanel>
+		</Tabs>
+	);
+```
+
+#### Controlled Mode
+
+Tabs can also be used in a controlled mode, where the parent component specifies the `selectedTabId` and the `onSelect` props to control tab selection. In this mode, the `defaultTabId` prop will be ignored if it is provided. If the `selectedTabId` is `null`, no tab is selected. In this mode, if the currently selected tab becomes disabled or otherwise unavailable, the component will _not_ fall back to another available tab, leaving the controlling component in charge of implementing the desired logic.
+
+```jsx
+import { Tabs } from '@wordpress/components';
+	const [ selectedTabId, setSelectedTabId ] = useState<
+		string | undefined | null
+	>();
+
+const onSelect = ( tabName ) => {
+	console.log( 'Selecting tab', tabName );
+};
+
+const MyControlledTabs = () => (
+		<Tabs
+			selectedTabId={ selectedTabId }
+			onSelect={ ( selectedId ) => {
+				setSelectedTabId( selectedId );
+				onSelect( selectedId );
+			} }
+		>
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1" title="Tab 1">
+					Tab 1
+				</Tabs.Tab>
+				<Tabs.Tab tabId="tab2" title="Tab 2">
+					Tab 2
+				</Tabs.Tab>
+				<Tabs.Tab tabId="tab3" title="Tab 3">
+					Tab 3
+				</Tabs.Tab>
+			</Tabs.TabList>
+			<Tabs.TabPanel tabId="tab1">
+				<p>Selected tab: Tab 1</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab2">
+				<p>Selected tab: Tab 2</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab3">
+				<p>Selected tab: Tab 3</p>
+			</Tabs.TabPanel>
+		</Tabs>
+	);
+```
+
+### Components and Sub-components
+
+Tabs is comprised of four individual components:
+- `Tabs`: a wrapper component and context provider. It is responsible for managing the state of the tabs and rendering the `TabList` and `TabPanels`.
+- `TabList`: a wrapper component for the `Tab` components. It is responsible for rendering the list of tabs.
+- `Tab`: renders a single tab. The currently active tab receives default styling that can be overridden with CSS targeting [aria-selected="true"].
+- `TabPanel`: renders the content to display for a single tab once that tab is selected.
+
+#### Tabs
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The children elements, which should include one instance of the `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel` components as there are `Tabs.Tab` components.
+
+-   Required: Yes
+
+###### `selectOnMove`: `boolean`
+
+Determines if the tab should be selected when it receives focus. If set to `false`, the tab will only be selected upon clicking, not when using arrow keys to shift focus (manual tab activation). See the [official W3C docs](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) for more info.
+
+-   Required: No
+-   Default: `true`
+
+###### `selectedTabId`: `string | null`
+
+The id of the tab whose panel is currently visible.
+
+If left `undefined`, it will be automatically set to the first enabled tab, and the component assumes it is being used in "uncontrolled" mode.
+
+Consequently, any value different than `undefined` will set the component in "controlled" mode. When in "controlled" mode, the `null` value will result in no tabs being selected, and the tablist becoming tabbable.
+
+- Required: No
+
+###### `defaultTabId`: `string | null`
+
+The id of the tab whose panel is currently visible.
+
+If left `undefined`, it will be automatically set to the first enabled tab. If set to `null`, no tab will be selected, and the tablist will be tabbable.
+
+_Note: this prop will be overridden by the `selectedTabId` prop if it is provided (meaning the component will be used in "controlled" mode)._
+
+-   Required: No
+
+###### `onSelect`: `( ( selectedId: string | null | undefined ) => void )`
+
+The function called when the `selectedTabId` changes.
+
+-   Required: No
+-   Default: `noop`
+
+###### `activeTabId`: `string | null`
+
+The current active tab `id`. The active tab is the tab element within the tablist widget that has DOM focus.
+
+- `null` represents the tablist (ie. the base composite element). Users
+  will be able to navigate out of it using arrow keys;
+- If `activeTabId` is initially set to `null`, the base composite element
+  itself will have focus and users will be able to navigate to it using
+  arrow keys.
+
+- Required: No
+
+###### `defaultActiveTabId`: `string | null`
+
+The tab id that should be active by default when the composite widget is rendered. If `null`, the tablist element itself will have focus and users will be able to navigate to it using arrow keys. If `undefined`, the first enabled item will be focused.
+
+_Note: this prop will be overridden by the `activeTabId` prop if it is provided._
+
+-   Required: No
+
+###### `onActiveTabIdChange`: `( ( activeId: string | null | undefined ) => void )`
+
+The function called when the `selectedTabId` changes.
+
+-   Required: No
+-   Default: `noop`
+
+###### `orientation`: `'horizontal' | 'vertical' | 'both'`
+
+Defines the orientation of the tablist and determines which arrow keys can be used to move focus:
+
+- `both`: all arrow keys work;
+- `horizontal`: only left and right arrow keys work;
+- `vertical`: only up and down arrow keys work.
+
+-   Required: No
+-   Default: `horizontal`
+
+#### TabList
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The children elements, which should include one or more instances of the `Tabs.Tab` component.
+
+-   Required: No
+
+#### Tab
+
+##### Props
+
+###### `tabId`: `string`
+
+The unique ID of the tab. It will be used to register the tab and match it to a corresponding `Tabs.TabPanel` component. If not provided, a unique ID will be automatically generated.
+
+- Required: Yes
+
+###### `children`: `React.ReactNode`
+
+The contents of the tab.
+
+- Required: No
+
+###### `disabled`: `boolean`
+
+Determines if the tab should be disabled. Note that disabled tabs can still be accessed via the keyboard when navigating through the tablist.
+
+- Required: No
+- Default: `false`
+
+###### `render`: `React.ReactNode`
+
+Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
+
+By default, the tab will be rendered as a `button` element.
+
+- Required: No
+
+#### TabPanel
+
+##### Props
+
+###### `children`: `React.ReactNode`
+
+The contents of the tab panel.
+
+- Required: No
+
+###### `tabId`: `string`
+
+The unique `id` of the `Tabs.Tab` component controlling this panel. This connection is used to assign the `aria-labelledby` attribute to the tab panel and to determine if the tab panel should be visible.
+
+If not provided, this link is automatically established by matching the order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM.
+
+- Required: Yes
+
+###### `focusable`: `boolean`
+
+Determines whether or not the tabpanel element should be focusable.
+
+If `false`, pressing the tab key will skip over the tabpanel, and instead focus on the first focusable element in the panel (if there is one).
+
+- Required: No
+- Default: `true`
diff --git a/packages/components/src/tabs/context.ts b/packages/components/src/tabs/context.ts
new file mode 100644
index 00000000000000..cc6184d827138f
--- /dev/null
+++ b/packages/components/src/tabs/context.ts
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { TabsContextProps } from './types';
+
+export const TabsContext = createContext< TabsContextProps >( undefined );
+
+export const useTabsContext = () => useContext( TabsContext );
diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
new file mode 100644
index 00000000000000..819d259395daf8
--- /dev/null
+++ b/packages/components/src/tabs/index.tsx
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { TabsProps } from './types';
+import { TabsContext } from './context';
+import { Tab } from './tab';
+import { TabList } from './tablist';
+import { TabPanel } from './tabpanel';
+
+function externalToInternalTabId(
+	externalId: string | undefined | null,
+	instanceId: string
+) {
+	return externalId && `${ instanceId }-${ externalId }`;
+}
+
+function internalToExternalTabId(
+	internalId: string | undefined | null,
+	instanceId: string
+) {
+	return typeof internalId === 'string'
+		? internalId.replace( `${ instanceId }-`, '' )
+		: internalId;
+}
+
+/**
+ * Display one panel of content at a time with a tabbed interface, based on the
+ * WAI-ARIA Tabs Pattern⁠.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * ```
+ */
+export const Tabs = Object.assign(
+	function Tabs( {
+		selectOnMove = true,
+		defaultTabId,
+		orientation = 'horizontal',
+		onSelect,
+		children,
+		selectedTabId,
+		activeTabId,
+		defaultActiveTabId,
+		onActiveTabIdChange,
+	}: TabsProps ) {
+		const instanceId = useInstanceId( Tabs, 'tabs' );
+		const store = Ariakit.useTabStore( {
+			selectOnMove,
+			orientation,
+			defaultSelectedId: externalToInternalTabId(
+				defaultTabId,
+				instanceId
+			),
+			setSelectedId: ( newSelectedId ) => {
+				onSelect?.(
+					internalToExternalTabId( newSelectedId, instanceId )
+				);
+			},
+			selectedId: externalToInternalTabId( selectedTabId, instanceId ),
+			defaultActiveId: externalToInternalTabId(
+				defaultActiveTabId,
+				instanceId
+			),
+			setActiveId: ( newActiveId ) => {
+				onActiveTabIdChange?.(
+					internalToExternalTabId( newActiveId, instanceId )
+				);
+			},
+			activeId: externalToInternalTabId( activeTabId, instanceId ),
+			rtl: isRTL(),
+		} );
+
+		const { items, activeId } = Ariakit.useStoreState( store );
+		const { setActiveId } = store;
+
+		useEffect( () => {
+			requestAnimationFrame( () => {
+				const focusedElement =
+					items?.[ 0 ]?.element?.ownerDocument.activeElement;
+
+				if (
+					! focusedElement ||
+					! items.some( ( item ) => focusedElement === item.element )
+				) {
+					return; // Return early if no tabs are focused.
+				}
+
+				// If, after ariakit re-computes the active tab, that tab doesn't match
+				// the currently focused tab, then we force an update to ariakit to avoid
+				// any mismatches, especially when navigating to previous/next tab with
+				// arrow keys.
+				if ( activeId !== focusedElement.id ) {
+					setActiveId( focusedElement.id );
+				}
+			} );
+		}, [ activeId, items, setActiveId ] );
+
+		const contextValue = useMemo(
+			() => ( {
+				store,
+				instanceId,
+			} ),
+			[ store, instanceId ]
+		);
+
+		return (
+			<TabsContext.Provider value={ contextValue }>
+				{ children }
+			</TabsContext.Provider>
+		);
+	},
+	{
+		Tab: Object.assign( Tab, {
+			displayName: 'Tabs.Tab',
+		} ),
+		TabList: Object.assign( TabList, {
+			displayName: 'Tabs.TabList',
+		} ),
+		TabPanel: Object.assign( TabPanel, {
+			displayName: 'Tabs.TabPanel',
+		} ),
+		Context: Object.assign( TabsContext, {
+			displayName: 'Tabs.Context',
+		} ),
+	}
+);
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
new file mode 100644
index 00000000000000..5b2fd621bbb436
--- /dev/null
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -0,0 +1,494 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress, more, link } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Tabs } from '..';
+import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
+import DropdownMenu from '../../dropdown-menu';
+import Button from '../../button';
+import Tooltip from '../../tooltip';
+import Icon from '../../icon';
+
+const meta: Meta< typeof Tabs > = {
+	title: 'Components/Containers/Tabs',
+	id: 'components-tabs',
+	component: Tabs,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Tabs.TabList': Tabs.TabList,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Tabs.Tab': Tabs.Tab,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Tabs.TabPanel': Tabs.TabPanel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Tabs.Context': Tabs.Context,
+	},
+	tags: [ 'status-private' ],
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs { ...props }>
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+			<Tabs.TabPanel tabId="tab1">
+				<p>Selected tab: Tab 1</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab2">
+				<p>Selected tab: Tab 2</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab3" focusable={ false }>
+				<p>Selected tab: Tab 3</p>
+				<p>
+					This tabpanel has its <code>focusable</code> prop set to
+					<code> false</code>, so it won&apos;t get a tab stop.
+					<br />
+					Instead, the [Tab] key will move focus to the first
+					focusable element within the panel.
+				</p>
+				<Button variant="primary">I&apos;m a button!</Button>
+			</Tabs.TabPanel>
+		</Tabs>
+	);
+};
+
+export const Default = Template.bind( {} );
+
+export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
+	const [ fullWidth, setFullWidth ] = useState( false );
+	return (
+		<div>
+			<div style={ { maxWidth: '40rem', marginBottom: '1rem' } }>
+				<p>
+					This story helps understand how the TabList component
+					behaves under different conditions. The container below
+					(with the dotted red border) can be horizontally resized,
+					and it has a bit of padding to be out of the way of the
+					TabList.
+				</p>
+				<p>
+					The button will toggle between full width (adding{ ' ' }
+					<code>width: 100%</code>) and the default width.
+				</p>
+				<p>Try the following:</p>
+				<ul>
+					<li>
+						<strong>Small container</strong> that causes tabs to
+						overflow with scroll.
+					</li>
+					<li>
+						<strong>Large container</strong> that exceeds the normal
+						width of the tabs.
+						<ul>
+							<li>
+								<strong>
+									With <code>width: 100%</code>
+								</strong>{ ' ' }
+								set on the TabList (tabs fill up the space).
+							</li>
+							<li>
+								<strong>
+									Without <code>width: 100%</code>
+								</strong>{ ' ' }
+								(defaults to <code>auto</code>) set on the
+								TabList (tabs take up space proportional to
+								their content).
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+			<Button
+				style={ { marginBottom: '1rem' } }
+				variant="primary"
+				onClick={ () => setFullWidth( ! fullWidth ) }
+			>
+				{ fullWidth
+					? 'Remove width: 100% from TabList'
+					: 'Set width: 100% in TabList' }
+			</Button>
+			<Tabs { ...props }>
+				<div
+					style={ {
+						width: '20rem',
+						border: '2px dotted red',
+						padding: '1rem',
+						resize: 'horizontal',
+						overflow: 'auto',
+					} }
+				>
+					<Tabs.TabList
+						style={ {
+							maxWidth: '100%',
+							width: fullWidth ? '100%' : undefined,
+						} }
+					>
+						<Tabs.Tab tabId="tab1">
+							Label with multiple words
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab2">Short</Tabs.Tab>
+						<Tabs.Tab tabId="tab3">
+							Hippopotomonstrosesquippedaliophobia
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab4">Tab 4</Tabs.Tab>
+						<Tabs.Tab tabId="tab5">Tab 5</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+					<p>(Label with multiple words)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+					<p>(Short)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+					<p>(Hippopotomonstrosesquippedaliophobia)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab4">
+					<p>Selected tab: Tab 4</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab5">
+					<p>Selected tab: Tab 5</p>
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
+	);
+};
+SizeAndOverflowPlayground.args = {
+	defaultTabId: 'tab4',
+};
+
+const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs orientation="vertical" { ...props }>
+			<Tabs.TabList style={ { maxWidth: '10rem' } }>
+				<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+		</Tabs>
+	);
+};
+
+export const Vertical = VerticalTemplate.bind( {} );
+
+const DisabledTabTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs { ...props }>
+			<Tabs.TabList>
+				<Tabs.Tab tabId="tab1" disabled>
+					Tab 1
+				</Tabs.Tab>
+				<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+				<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+			</Tabs.TabList>
+			<Tabs.TabPanel tabId="tab1">
+				<p>Selected tab: Tab 1</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab2">
+				<p>Selected tab: Tab 2</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab3">
+				<p>Selected tab: Tab 3</p>
+			</Tabs.TabPanel>
+		</Tabs>
+	);
+};
+export const DisabledTab = DisabledTabTemplate.bind( {} );
+
+const WithTabIconsAndTooltipsTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<Tabs { ...props }>
+			<Tabs.TabList>
+				{ [
+					{
+						id: 'tab1',
+						label: 'Tab one',
+						icon: wordpress,
+					},
+					{
+						id: 'tab2',
+						label: 'Tab two',
+						icon: link,
+					},
+					{
+						id: 'tab3',
+						label: 'Tab three',
+						icon: more,
+					},
+				].map( ( { id, label, icon } ) => (
+					<Tooltip text={ label } key={ id }>
+						<Tabs.Tab tabId={ id } aria-label={ label }>
+							<Icon icon={ icon } />
+						</Tabs.Tab>
+					</Tooltip>
+				) ) }
+			</Tabs.TabList>
+			<Tabs.TabPanel tabId="tab1">
+				<p>Selected tab: Tab 1</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab2">
+				<p>Selected tab: Tab 2</p>
+			</Tabs.TabPanel>
+			<Tabs.TabPanel tabId="tab3">
+				<p>Selected tab: Tab 3</p>
+			</Tabs.TabPanel>
+		</Tabs>
+	);
+};
+export const WithTabIconsAndTooltips = WithTabIconsAndTooltipsTemplate.bind(
+	{}
+);
+
+export const ManualActivation = Template.bind( {} );
+ManualActivation.args = {
+	selectOnMove: false,
+};
+
+const UsingSlotFillTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<Tabs { ...props }>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+				</Tabs.TabList>
+				<Fill name="tabs-are-fun">
+					<Tabs.TabPanel tabId="tab1">
+						<p>Selected tab: Tab 1</p>
+					</Tabs.TabPanel>
+					<Tabs.TabPanel tabId="tab2">
+						<p>Selected tab: Tab 2</p>
+					</Tabs.TabPanel>
+					<Tabs.TabPanel tabId="tab3">
+						<p>Selected tab: Tab 3</p>
+					</Tabs.TabPanel>
+				</Fill>
+			</Tabs>
+			<div
+				style={ {
+					border: '2px solid #999',
+					width: '300px',
+					margin: '20px auto',
+				} }
+			>
+				<p>other stuff</p>
+				<p>other stuff</p>
+				<p>this is fun!</p>
+				<p>other stuff</p>
+				<Slot bubblesVirtually as="div" name="tabs-are-fun" />
+			</div>
+		</SlotFillProvider>
+	);
+};
+export const UsingSlotFill = UsingSlotFillTemplate.bind( {} );
+UsingSlotFill.storyName = 'Using SlotFill';
+
+const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	const [ isOpen, setIsOpen ] = useState( true );
+
+	return (
+		<>
+			{ isOpen ? (
+				<div
+					style={ {
+						width: '400px',
+						height: '100vh',
+						borderRight: '1px solid #333',
+					} }
+				>
+					<Tabs { ...props }>
+						<div
+							style={ {
+								display: 'flex',
+								borderBottom: '1px solid #333',
+							} }
+						>
+							<Tabs.TabList>
+								<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+								<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+								<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+							</Tabs.TabList>
+							<Button
+								variant="tertiary"
+								style={ {
+									marginLeft: 'auto',
+									alignSelf: 'center',
+								} }
+								onClick={ () => setIsOpen( false ) }
+							>
+								Close Tabs
+							</Button>
+						</div>
+						<Tabs.TabPanel tabId="tab1">
+							<p>Selected tab: Tab 1</p>
+						</Tabs.TabPanel>
+						<Tabs.TabPanel tabId="tab2">
+							<p>Selected tab: Tab 2</p>
+						</Tabs.TabPanel>
+						<Tabs.TabPanel tabId="tab3">
+							<p>Selected tab: Tab 3</p>
+						</Tabs.TabPanel>
+					</Tabs>
+				</div>
+			) : (
+				<Button variant="tertiary" onClick={ () => setIsOpen( true ) }>
+					Open Tabs
+				</Button>
+			) }
+		</>
+	);
+};
+export const InsertCustomElements = CloseButtonTemplate.bind( {} );
+
+const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	const [ selectedTabId, setSelectedTabId ] = useState<
+		string | undefined | null
+	>( props.selectedTabId );
+
+	return (
+		<>
+			<Tabs
+				{ ...props }
+				selectedTabId={ selectedTabId }
+				onSelect={ ( selectedId ) => {
+					setSelectedTabId( selectedId );
+					props.onSelect?.( selectedId );
+				} }
+			>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+
+					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+
+					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+				</Tabs.TabPanel>
+			</Tabs>
+			<div style={ { marginTop: '200px' } }>
+				<p>Select a tab:</p>
+				<DropdownMenu
+					controls={ [
+						{
+							onClick: () => setSelectedTabId( 'tab1' ),
+							title: 'Tab 1',
+							isActive: selectedTabId === 'tab1',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab2' ),
+							title: 'Tab 2',
+							isActive: selectedTabId === 'tab2',
+						},
+						{
+							onClick: () => setSelectedTabId( 'tab3' ),
+							title: 'Tab 3',
+							isActive: selectedTabId === 'tab3',
+						},
+					] }
+					label="Choose a tab. The power is yours."
+				/>
+			</div>
+		</>
+	);
+};
+
+export const ControlledMode = ControlledModeTemplate.bind( {} );
+ControlledMode.args = {
+	selectedTabId: 'tab3',
+};
+
+const TabBecomesDisabledTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	const [ disableTab2, setDisableTab2 ] = useState( false );
+
+	return (
+		<>
+			<Button
+				variant="primary"
+				onClick={ () => setDisableTab2( ! disableTab2 ) }
+			>
+				{ disableTab2 ? 'Enable' : 'Disable' } Tab 2
+			</Button>
+			<Tabs { ...props }>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
+					<Tabs.Tab tabId="tab2" disabled={ disableTab2 }>
+						Tab 2
+					</Tabs.Tab>
+					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+				</Tabs.TabPanel>
+			</Tabs>
+		</>
+	);
+};
+export const TabBecomesDisabled = TabBecomesDisabledTemplate.bind( {} );
+
+const TabGetsRemovedTemplate: StoryFn< typeof Tabs > = ( props ) => {
+	const [ removeTab1, setRemoveTab1 ] = useState( false );
+
+	return (
+		<>
+			<Button
+				variant="primary"
+				onClick={ () => setRemoveTab1( ! removeTab1 ) }
+			>
+				{ removeTab1 ? 'Restore' : 'Remove' } Tab 1
+			</Button>
+			<Tabs { ...props }>
+				<Tabs.TabList>
+					{ ! removeTab1 && <Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab> }
+					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
+					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+				</Tabs.TabPanel>
+			</Tabs>
+		</>
+	);
+};
+export const TabGetsRemoved = TabGetsRemovedTemplate.bind( {} );
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
new file mode 100644
index 00000000000000..717316227ddb3c
--- /dev/null
+++ b/packages/components/src/tabs/styles.ts
@@ -0,0 +1,285 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+import { space } from '../utils/space';
+import Icon from '../icon';
+
+export const StyledTabList = styled( Ariakit.TabList )`
+	display: flex;
+	align-items: stretch;
+	overflow-x: auto;
+
+	&[aria-orientation='vertical'] {
+		flex-direction: column;
+	}
+
+	:where( [aria-orientation='horizontal'] ) {
+		width: fit-content;
+	}
+
+	--direction-factor: 1;
+	--direction-start: left;
+	--direction-end: right;
+	--selected-start: var( --selected-left, 0 );
+	&:dir( rtl ) {
+		--direction-factor: -1;
+		--direction-start: right;
+		--direction-end: left;
+		--selected-start: var( --selected-right, 0 );
+	}
+
+	@media not ( prefers-reduced-motion ) {
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius, border-block;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+	position: relative;
+	&::before {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+		transform-origin: var( --direction-start ) top;
+
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: -1px;
+	}
+
+	/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+	--antialiasing-factor: 100;
+	&[aria-orientation='horizontal'] {
+		--fade-width: 4rem;
+		--fade-gradient-base: transparent 0%, black var( --fade-width );
+		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
+			transparent 50%;
+		&.is-overflowing-first {
+			mask-image: linear-gradient(
+				to var( --direction-end ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-last {
+			mask-image: linear-gradient(
+				to var( --direction-start ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-first.is-overflowing-last {
+			mask-image: linear-gradient(
+					to right,
+					var( --fade-gradient-composed )
+				),
+				linear-gradient( to left, var( --fade-gradient-composed ) );
+		}
+
+		&::before {
+			bottom: 0;
+			height: 0;
+			width: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateX(
+					calc(
+						var( --selected-start ) * var( --direction-factor ) *
+							1px
+					)
+				)
+				scaleX(
+					calc(
+						var( --selected-width, 0 ) /
+							var( --antialiasing-factor )
+					)
+				);
+			border-bottom: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+		}
+	}
+	&[aria-orientation='vertical'] {
+		&::before {
+			/* Adjusting the border radius to match the scaling in the y axis. */
+			border-radius: ${ CONFIG.radiusSmall } /
+				calc(
+					${ CONFIG.radiusSmall } /
+						(
+							var( --selected-height, 0 ) /
+								var( --antialiasing-factor )
+						)
+				);
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: calc( var( --antialiasing-factor ) * 1px );
+			transform: translateY( calc( var( --selected-top, 0 ) * 1px ) )
+				scaleY(
+					calc(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+				);
+			background-color: color-mix(
+				in srgb,
+				${ COLORS.theme.accent },
+				transparent 96%
+			);
+		}
+		&[data-select-on-move='true']:has(
+				:is( :focus-visible, [data-focus-visible] )
+			)::before {
+			box-sizing: border-box;
+			border: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+			/* Adjusting the border width to match the scaling in the y axis. */
+			border-block-width: calc(
+				var( --wp-admin-border-width-focus, 1px ) /
+					(
+						var( --selected-height, 0 ) /
+							var( --antialiasing-factor )
+					)
+			);
+		}
+	}
+`;
+
+export const Tab = styled( Ariakit.Tab )`
+	& {
+		/* Resets */
+		border-radius: 0;
+		background: transparent;
+		border: none;
+		box-shadow: none;
+
+		flex: 1 0 auto;
+		white-space: nowrap;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height.
+		font-weight: 400;
+		color: ${ COLORS.theme.foreground };
+
+		&[aria-disabled='true'] {
+			cursor: default;
+			color: ${ COLORS.ui.textDisabled };
+		}
+
+		&:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) {
+			color: ${ COLORS.theme.accent };
+		}
+
+		&:focus:not( :disabled ) {
+			box-shadow: none;
+			outline: none;
+		}
+
+		// Focus indicator.
+		position: relative;
+		&::after {
+			position: absolute;
+			pointer-events: none;
+
+			// Draw the indicator.
+			// Outline works for Windows high contrast mode as well.
+			outline: var( --wp-admin-border-width-focus ) solid
+				${ COLORS.theme.accent };
+			border-radius: ${ CONFIG.radiusSmall };
+
+			// Animation
+			opacity: 0;
+
+			@media not ( prefers-reduced-motion ) {
+				transition: opacity 0.1s linear;
+			}
+		}
+
+		&[data-focus-visible]::after {
+			opacity: 1;
+		}
+	}
+
+	[aria-orientation='horizontal'] & {
+		padding-inline: ${ space( 4 ) };
+		height: ${ space( 12 ) };
+		scroll-margin: 24px;
+
+		&::after {
+			content: '';
+			inset: ${ space( 3 ) };
+		}
+	}
+
+	[aria-orientation='vertical'] & {
+		padding: ${ space( 2 ) } ${ space( 3 ) };
+		min-height: ${ space( 10 ) };
+
+		&[aria-selected='true'] {
+			color: ${ COLORS.theme.accent };
+			fill: currentColor;
+		}
+	}
+	[aria-orientation='vertical'][data-select-on-move='false'] &::after {
+		content: '';
+		inset: var( --wp-admin-border-width-focus );
+	}
+`;
+
+export const TabChildren = styled.span`
+	flex-grow: 1;
+
+	display: flex;
+	align-items: center;
+
+	[aria-orientation='horizontal'] & {
+		justify-content: center;
+	}
+	[aria-orientation='vertical'] & {
+		justify-content: start;
+	}
+`;
+
+export const TabChevron = styled( Icon )`
+	flex-shrink: 0;
+	margin-inline-end: ${ space( -1 ) };
+	[aria-orientation='horizontal'] & {
+		display: none;
+	}
+	opacity: 0;
+	[role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & {
+		opacity: 1;
+	}
+	// The chevron is transitioned into existence when selectOnMove is enabled,
+	// because otherwise it looks jarring, as it shows up outside of the focus
+	// indicator that's being animated at the same time.
+	@media not ( prefers-reduced-motion ) {
+		[data-select-on-move='true']
+			[role='tab']:is( [aria-selected='true'],  )
+			& {
+			transition: opacity 0.15s 0.15s linear;
+		}
+	}
+	&:dir( rtl ) {
+		rotate: 180deg;
+	}
+`;
+
+export const TabPanel = styled( Ariakit.TabPanel )`
+	&:focus {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&[data-focus-visible] {
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			${ COLORS.theme.accent };
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
+		outline-offset: 0;
+	}
+`;
diff --git a/packages/components/src/tabs/tab.tsx b/packages/components/src/tabs/tab.tsx
new file mode 100644
index 00000000000000..8226d0589f08c8
--- /dev/null
+++ b/packages/components/src/tabs/tab.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { TabProps } from './types';
+import warning from '@wordpress/warning';
+import { useTabsContext } from './context';
+import {
+	Tab as StyledTab,
+	TabChildren as StyledTabChildren,
+	TabChevron as StyledTabChevron,
+} from './styles';
+import type { WordPressComponentProps } from '../context';
+import { chevronRight } from '@wordpress/icons';
+
+export const Tab = forwardRef<
+	HTMLButtonElement,
+	Omit< WordPressComponentProps< TabProps, 'button', false >, 'id' >
+>( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
+	const { store, instanceId } = useTabsContext() ?? {};
+
+	if ( ! store ) {
+		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
+	const instancedTabId = `${ instanceId }-${ tabId }`;
+
+	return (
+		<StyledTab
+			ref={ ref }
+			store={ store }
+			id={ instancedTabId }
+			disabled={ disabled }
+			render={ render }
+			{ ...otherProps }
+		>
+			<StyledTabChildren>{ children }</StyledTabChildren>
+			<StyledTabChevron icon={ chevronRight } />
+		</StyledTab>
+	);
+} );
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
new file mode 100644
index 00000000000000..b7cfef7e19a096
--- /dev/null
+++ b/packages/components/src/tabs/tablist.tsx
@@ -0,0 +1,156 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import warning from '@wordpress/warning';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { TabListProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import type { ElementOffsetRect } from '../utils/element-rect';
+import { useTabsContext } from './context';
+import { StyledTabList } from './styles';
+import { useTrackElementOffsetRect } from '../utils/element-rect';
+import { useTrackOverflow } from './use-track-overflow';
+import { useAnimatedOffsetRect } from '../utils/hooks/use-animated-offset-rect';
+
+const DEFAULT_SCROLL_MARGIN = 24;
+
+/**
+ * Scrolls a given parent element so that a given rect is visible.
+ *
+ * The scroll is updated initially and whenever the rect changes.
+ */
+function useScrollRectIntoView(
+	parent: HTMLElement | undefined,
+	rect: ElementOffsetRect,
+	{ margin = DEFAULT_SCROLL_MARGIN } = {}
+) {
+	useLayoutEffect( () => {
+		if ( ! parent || ! rect ) {
+			return;
+		}
+
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = rect;
+
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + margin - parentRightEdge;
+		const leftOverflow = parentScroll - ( childLeft - margin );
+
+		let scrollLeft = null;
+		if ( leftOverflow > 0 ) {
+			scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			scrollLeft = parentScroll + rightOverflow;
+		}
+
+		if ( scrollLeft !== null ) {
+			/**
+			 * The optional chaining is used here to avoid unit test failures.
+			 * It can be removed when JSDOM supports `Element` scroll methods.
+			 * See: https://github.com/WordPress/gutenberg/pull/66498#issuecomment-2441146096
+			 */
+			parent.scroll?.( { left: scrollLeft } );
+		}
+	}, [ margin, parent, rect ] );
+}
+
+export const TabList = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< TabListProps, 'div', false >
+>( function TabList( { children, ...otherProps }, ref ) {
+	const { store } = useTabsContext() ?? {};
+
+	const selectedId = Ariakit.useStoreState( store, 'selectedId' );
+	const activeId = Ariakit.useStoreState( store, 'activeId' );
+	const selectOnMove = Ariakit.useStoreState( store, 'selectOnMove' );
+	const items = Ariakit.useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement >();
+	const refs = useMergeRefs( [ ref, setParent ] );
+
+	const selectedItem = store?.item( selectedId );
+	const renderedItems = Ariakit.useStoreState( store, 'renderedItems' );
+
+	const selectedItemIndex =
+		renderedItems && selectedItem
+			? renderedItems.indexOf( selectedItem )
+			: -1;
+	// Use selectedItemIndex as a dependency to force recalculation when the
+	// selected item index changes (elements are swapped / added / removed).
+	const selectedRect = useTrackElementOffsetRect( selectedItem?.element, [
+		selectedItemIndex,
+	] );
+
+	// Track overflow to show scroll hints.
+	const overflow = useTrackOverflow( parent, {
+		first: items?.at( 0 )?.element,
+		last: items?.at( -1 )?.element,
+	} );
+
+	// Size, position, and animate the indicator.
+	useAnimatedOffsetRect( parent, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
+	} );
+
+	// Make sure selected tab is scrolled into view.
+	useScrollRectIntoView( parent, selectedRect );
+
+	const onBlur = () => {
+		if ( ! selectOnMove ) {
+			return;
+		}
+
+		// When automatic tab selection is on, make sure that the active tab is up
+		// to date with the selected tab when leaving the tablist. This makes sure
+		// that the selected tab will receive keyboard focus when tabbing back into
+		// the tablist.
+		if ( selectedId !== activeId ) {
+			store?.setActiveId( selectedId );
+		}
+	};
+
+	if ( ! store ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
+	return (
+		<StyledTabList
+			ref={ refs }
+			store={ store }
+			render={ ( props ) => (
+				<div
+					{ ...props }
+					// Fallback to -1 to prevent browsers from making the tablist
+					// tabbable when it is a scrolling container.
+					tabIndex={ props.tabIndex ?? -1 }
+				/>
+			) }
+			onBlur={ onBlur }
+			data-select-on-move={ selectOnMove ? 'true' : 'false' }
+			{ ...otherProps }
+			className={ clsx(
+				overflow.first && 'is-overflowing-first',
+				overflow.last && 'is-overflowing-last',
+				otherProps.className
+			) }
+		>
+			{ children }
+		</StyledTabList>
+	);
+} );
diff --git a/packages/components/src/tabs/tabpanel.tsx b/packages/components/src/tabs/tabpanel.tsx
new file mode 100644
index 00000000000000..512b2609682722
--- /dev/null
+++ b/packages/components/src/tabs/tabpanel.tsx
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { useStoreState } from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { TabPanelProps } from './types';
+import { TabPanel as StyledTabPanel } from './styles';
+
+import warning from '@wordpress/warning';
+import { useTabsContext } from './context';
+import type { WordPressComponentProps } from '../context';
+
+export const TabPanel = forwardRef<
+	HTMLDivElement,
+	Omit< WordPressComponentProps< TabPanelProps, 'div', false >, 'id' >
+>( function TabPanel(
+	{ children, tabId, focusable = true, ...otherProps },
+	ref
+) {
+	const context = useTabsContext();
+	const selectedId = useStoreState( context?.store, 'selectedId' );
+	if ( ! context ) {
+		warning( '`Tabs.TabPanel` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+	const { store, instanceId } = context;
+	const instancedTabId = `${ instanceId }-${ tabId }`;
+
+	return (
+		<StyledTabPanel
+			ref={ ref }
+			store={ store }
+			// For TabPanel, the id passed here is the id attribute of the DOM
+			// element.
+			// `tabId` is the id of the tab that controls this panel.
+			id={ `${ instancedTabId }-view` }
+			tabId={ instancedTabId }
+			focusable={ focusable }
+			{ ...otherProps }
+		>
+			{ selectedId === instancedTabId && children }
+		</StyledTabPanel>
+	);
+} );
diff --git a/packages/components/src/tabs/test/index.tsx b/packages/components/src/tabs/test/index.tsx
new file mode 100644
index 00000000000000..fd9ceb38190a79
--- /dev/null
+++ b/packages/components/src/tabs/test/index.tsx
@@ -0,0 +1,2005 @@
+/**
+ * External dependencies
+ */
+import { screen, waitFor } from '@testing-library/react';
+import { press, click } from '@ariakit/test';
+import { render } from '@ariakit/test/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Tabs } from '..';
+import type { TabsProps } from '../types';
+
+// Setup mocking the `isRTL` function to test arrow key navigation behavior.
+jest.mock( '@wordpress/i18n', () => {
+	const original = jest.requireActual( '@wordpress/i18n' );
+	return {
+		...original,
+		isRTL: jest.fn( () => false ),
+	};
+} );
+const mockedIsRTL = isRTL as jest.Mock;
+
+type Tab = {
+	tabId: string;
+	title: string;
+	content: React.ReactNode;
+	tab: {
+		className?: string;
+		disabled?: boolean;
+	};
+	tabpanel?: {
+		focusable?: boolean;
+	};
+};
+
+const TABS: Tab[] = [
+	{
+		tabId: 'alpha',
+		title: 'Alpha',
+		content: 'Selected tab: Alpha',
+		tab: { className: 'alpha-class' },
+	},
+	{
+		tabId: 'beta',
+		title: 'Beta',
+		content: 'Selected tab: Beta',
+		tab: { className: 'beta-class' },
+	},
+	{
+		tabId: 'gamma',
+		title: 'Gamma',
+		content: 'Selected tab: Gamma',
+		tab: { className: 'gamma-class' },
+	},
+];
+
+const TABS_WITH_ALPHA_DISABLED = TABS.map( ( tabObj ) =>
+	tabObj.tabId === 'alpha'
+		? {
+				...tabObj,
+				tab: {
+					...tabObj.tab,
+					disabled: true,
+				},
+		  }
+		: tabObj
+);
+
+const TABS_WITH_BETA_DISABLED = TABS.map( ( tabObj ) =>
+	tabObj.tabId === 'beta'
+		? {
+				...tabObj,
+				tab: {
+					...tabObj.tab,
+					disabled: true,
+				},
+		  }
+		: tabObj
+);
+
+const TABS_WITH_DELTA: Tab[] = [
+	...TABS,
+	{
+		tabId: 'delta',
+		title: 'Delta',
+		content: 'Selected tab: Delta',
+		tab: { className: 'delta-class' },
+	},
+];
+
+const UncontrolledTabs = ( {
+	tabs,
+	...props
+}: Omit< TabsProps, 'children' > & {
+	tabs: Tab[];
+} ) => {
+	return (
+		<Tabs { ...props }>
+			<Tabs.TabList>
+				{ tabs.map( ( tabObj ) => (
+					<Tabs.Tab
+						key={ tabObj.tabId }
+						tabId={ tabObj.tabId }
+						className={ tabObj.tab.className }
+						disabled={ tabObj.tab.disabled }
+					>
+						{ tabObj.title }
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ tabs.map( ( tabObj ) => (
+				<Tabs.TabPanel
+					key={ tabObj.tabId }
+					tabId={ tabObj.tabId }
+					focusable={ tabObj.tabpanel?.focusable }
+				>
+					{ tabObj.content }
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+};
+
+const ControlledTabs = ( {
+	tabs,
+	...props
+}: Omit< TabsProps, 'children' > & {
+	tabs: Tab[];
+} ) => {
+	const [ selectedTabId, setSelectedTabId ] = useState<
+		string | undefined | null
+	>( props.selectedTabId );
+
+	useEffect( () => {
+		setSelectedTabId( props.selectedTabId );
+	}, [ props.selectedTabId ] );
+
+	return (
+		<Tabs
+			{ ...props }
+			selectedTabId={ selectedTabId }
+			onSelect={ ( selectedId ) => {
+				setSelectedTabId( selectedId );
+				props.onSelect?.( selectedId );
+			} }
+		>
+			<Tabs.TabList>
+				{ tabs.map( ( tabObj ) => (
+					<Tabs.Tab
+						key={ tabObj.tabId }
+						tabId={ tabObj.tabId }
+						className={ tabObj.tab.className }
+						disabled={ tabObj.tab.disabled }
+					>
+						{ tabObj.title }
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ tabs.map( ( tabObj ) => (
+				<Tabs.TabPanel
+					key={ tabObj.tabId }
+					tabId={ tabObj.tabId }
+					focusable={ tabObj.tabpanel?.focusable }
+				>
+					{ tabObj.content }
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+};
+
+let originalGetClientRects: () => DOMRectList;
+
+async function waitForComponentToBeInitializedWithSelectedTab(
+	selectedTabName: string | undefined
+) {
+	if ( ! selectedTabName ) {
+		// Wait for the tablist to be tabbable as a mean to know
+		// that ariakit has finished initializing.
+		await waitFor( () =>
+			expect( screen.getByRole( 'tablist' ) ).toHaveAttribute(
+				'tabindex',
+				expect.stringMatching( /^(0|-1)$/ )
+			)
+		);
+		// No initially selected tabs or tabpanels.
+		await waitFor( () =>
+			expect(
+				screen.queryByRole( 'tab', { selected: true } )
+			).not.toBeInTheDocument()
+		);
+		await waitFor( () =>
+			expect( screen.queryByRole( 'tabpanel' ) ).not.toBeInTheDocument()
+		);
+	} else {
+		// Waiting for a tab to be selected is a sign that the component
+		// has fully initialized.
+		expect(
+			await screen.findByRole( 'tab', {
+				selected: true,
+				name: selectedTabName,
+			} )
+		).toBeVisible();
+		// The corresponding tabpanel is also shown.
+		expect(
+			screen.getByRole( 'tabpanel', {
+				name: selectedTabName,
+			} )
+		).toBeVisible();
+	}
+}
+
+describe( 'Tabs', () => {
+	beforeAll( () => {
+		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
+		// Mocking `getClientRects()` is necessary to pass a check performed by
+		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
+		// from the `@wordpress/dom` package.
+		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+		window.HTMLElement.prototype.getClientRects = function () {
+			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+		};
+	} );
+
+	afterAll( () => {
+		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	describe( 'Adherence to spec and basic behavior', () => {
+		it( 'should apply the correct roles, semantics and attributes', async () => {
+			await render( <UncontrolledTabs tabs={ TABS } /> );
+
+			// Alpha is automatically selected as the selected tab.
+			await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+			const tabList = screen.getByRole( 'tablist' );
+			const allTabs = screen.getAllByRole( 'tab' );
+			const allTabpanels = screen.getAllByRole( 'tabpanel' );
+
+			expect( tabList ).toBeVisible();
+			expect( tabList ).toHaveAttribute(
+				'aria-orientation',
+				'horizontal'
+			);
+
+			expect( allTabs ).toHaveLength( TABS.length );
+
+			// Only 1 tab panel is accessible — the one associated with the
+			// selected tab. The selected `tab` aria-controls the active
+			/// `tabpanel`, which is `aria-labelledby` the selected `tab`.
+			expect( allTabpanels ).toHaveLength( 1 );
+
+			expect( allTabpanels[ 0 ] ).toBeVisible();
+			expect( allTabs[ 0 ] ).toHaveAttribute(
+				'aria-controls',
+				allTabpanels[ 0 ].getAttribute( 'id' )
+			);
+			expect( allTabpanels[ 0 ] ).toHaveAttribute(
+				'aria-labelledby',
+				allTabs[ 0 ].getAttribute( 'id' )
+			);
+		} );
+
+		it( 'should associate each `tab` with the correct `tabpanel`, even if they are not rendered in the same order', async () => {
+			const TABS_WITH_DELTA_REVERSED = [ ...TABS_WITH_DELTA ].reverse();
+
+			await render(
+				<Tabs>
+					<Tabs.TabList>
+						{ TABS_WITH_DELTA.map( ( tabObj ) => (
+							<Tabs.Tab
+								key={ tabObj.tabId }
+								tabId={ tabObj.tabId }
+								className={ tabObj.tab.className }
+								disabled={ tabObj.tab.disabled }
+							>
+								{ tabObj.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ TABS_WITH_DELTA_REVERSED.map( ( tabObj ) => (
+						<Tabs.TabPanel
+							key={ tabObj.tabId }
+							tabId={ tabObj.tabId }
+							focusable={ tabObj.tabpanel?.focusable }
+						>
+							{ tabObj.content }
+						</Tabs.TabPanel>
+					) ) }
+				</Tabs>
+			);
+
+			// Alpha is automatically selected as the selected tab.
+			await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+			// Select Beta, make sure the correct tabpanel is rendered
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Beta',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Beta',
+				} )
+			).toBeVisible();
+
+			// Select Gamma, make sure the correct tabpanel is rendered
+			await click( screen.getByRole( 'tab', { name: 'Gamma' } ) );
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Gamma',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Gamma',
+				} )
+			).toBeVisible();
+
+			// Select Delta, make sure the correct tabpanel is rendered
+			await click( screen.getByRole( 'tab', { name: 'Delta' } ) );
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Delta',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Delta',
+				} )
+			).toBeVisible();
+		} );
+
+		it( "should apply the tab's `className` to the tab button", async () => {
+			await render( <UncontrolledTabs tabs={ TABS } /> );
+
+			// Alpha is automatically selected as the selected tab.
+			await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+			expect(
+				await screen.findByRole( 'tab', { name: 'Alpha' } )
+			).toHaveClass( 'alpha-class' );
+			expect( screen.getByRole( 'tab', { name: 'Beta' } ) ).toHaveClass(
+				'beta-class'
+			);
+			expect( screen.getByRole( 'tab', { name: 'Gamma' } ) ).toHaveClass(
+				'gamma-class'
+			);
+		} );
+	} );
+
+	describe( 'pointer interactions', () => {
+		it( 'should select a tab when clicked', async () => {
+			const mockOnSelect = jest.fn();
+
+			await render(
+				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
+			);
+
+			// Alpha is automatically selected as the selected tab.
+			await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Click on Beta, make sure beta is the selected tab
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Beta',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Beta',
+				} )
+			).toBeVisible();
+
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Click on Alpha, make sure alpha is the selected tab
+			await click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Alpha',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Alpha',
+				} )
+			).toBeVisible();
+
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+		} );
+
+		it( 'should not select a disabled tab when clicked', async () => {
+			const mockOnSelect = jest.fn();
+
+			await render(
+				<UncontrolledTabs
+					tabs={ TABS_WITH_BETA_DISABLED }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// Alpha is automatically selected as the selected tab.
+			await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Clicking on Beta does not result in beta being selected
+			// because the tab is disabled.
+			await click( screen.getByRole( 'tab', { name: 'Beta' } ) );
+
+			expect(
+				screen.getByRole( 'tab', {
+					selected: true,
+					name: 'Alpha',
+				} )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'tabpanel', {
+					name: 'Alpha',
+				} )
+			).toBeVisible();
+
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	describe( 'initial tab selection', () => {
+		describe( 'when a selected tab id is not specified', () => {
+			describe( 'when left `undefined` [Uncontrolled]', () => {
+				it( 'should choose the first tab as selected', async () => {
+					await render( <UncontrolledTabs tabs={ TABS } /> );
+
+					// Alpha is automatically selected as the selected tab.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Alpha'
+					);
+
+					// Press tab. The selected tab (alpha) received focus.
+					await press.Tab();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Alpha',
+						} )
+					).toHaveFocus();
+				} );
+
+				it( 'should choose the first non-disabled tab if the first tab is disabled', async () => {
+					await render(
+						<UncontrolledTabs tabs={ TABS_WITH_ALPHA_DISABLED } />
+					);
+
+					// Beta is automatically selected as the selected tab, since alpha is
+					// disabled.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Beta'
+					);
+
+					// Press tab. The selected tab (beta) received focus. The corresponding
+					// tabpanel is shown.
+					await press.Tab();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toHaveFocus();
+				} );
+			} );
+			describe( 'when `null` [Controlled]', () => {
+				it( 'should not have a selected tab nor show any tabpanels, make the tablist tabbable and still allow selecting tabs', async () => {
+					await render(
+						<ControlledTabs tabs={ TABS } selectedTabId={ null } />
+					);
+
+					// No initially selected tabs or tabpanels.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						undefined
+					);
+
+					// Press tab. The tablist receives focus
+					await press.Tab();
+					expect(
+						await screen.findByRole( 'tablist' )
+					).toHaveFocus();
+
+					// Press right arrow to select the first tab (alpha) and
+					// show the related tabpanel.
+					await press.ArrowRight();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Alpha',
+						} )
+					).toHaveFocus();
+					expect(
+						await screen.findByRole( 'tabpanel', {
+							name: 'Alpha',
+						} )
+					).toBeVisible();
+				} );
+			} );
+		} );
+
+		describe( 'when a selected tab id is specified', () => {
+			describe( 'through the `defaultTabId` prop [Uncontrolled]', () => {
+				it( 'should select the initial tab matching the `defaultTabId` prop', async () => {
+					await render(
+						<UncontrolledTabs tabs={ TABS } defaultTabId="beta" />
+					);
+
+					// Beta is the initially selected tab
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Beta'
+					);
+
+					// Press tab. The selected tab (beta) received focus. The corresponding
+					// tabpanel is shown.
+					await press.Tab();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toHaveFocus();
+				} );
+
+				it( 'should select the initial tab matching the `defaultTabId` prop even if the tab is disabled', async () => {
+					await render(
+						<UncontrolledTabs
+							tabs={ TABS_WITH_BETA_DISABLED }
+							defaultTabId="beta"
+						/>
+					);
+
+					// Beta is automatically selected as the selected tab despite being
+					// disabled, respecting the `defaultTabId` prop.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Beta'
+					);
+
+					// Press tab. The selected tab (beta) received focus, since it is
+					// accessible despite being disabled.
+					await press.Tab();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toHaveFocus();
+				} );
+
+				it( 'should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab when `defaultTabId` prop does not match any known tab', async () => {
+					await render(
+						<UncontrolledTabs
+							tabs={ TABS }
+							defaultTabId="non-existing-tab"
+						/>
+					);
+
+					// No initially selected tabs or tabpanels, since the `defaultTabId`
+					// prop is not matching any known tabs.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						undefined
+					);
+
+					// Press tab. The first tab receives focus, but it's
+					// not selected.
+					await press.Tab();
+					expect(
+						screen.getByRole( 'tab', { name: 'Alpha' } )
+					).toHaveFocus();
+					await waitFor( () =>
+						expect(
+							screen.queryByRole( 'tab', { selected: true } )
+						).not.toBeInTheDocument()
+					);
+					await waitFor( () =>
+						expect(
+							screen.queryByRole( 'tabpanel' )
+						).not.toBeInTheDocument()
+					);
+
+					// Press right arrow to select the next tab (beta) and
+					// show the related tabpanel.
+					await press.ArrowRight();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toHaveFocus();
+					expect(
+						await screen.findByRole( 'tabpanel', {
+							name: 'Beta',
+						} )
+					).toBeVisible();
+				} );
+
+				it( 'should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab, even when disabled, when `defaultTabId` prop does not match any known tab', async () => {
+					await render(
+						<UncontrolledTabs
+							tabs={ TABS_WITH_ALPHA_DISABLED }
+							defaultTabId="non-existing-tab"
+						/>
+					);
+
+					// No initially selected tabs or tabpanels, since the `defaultTabId`
+					// prop is not matching any known tabs.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						undefined
+					);
+
+					// Press tab. The first tab receives focus, but it's
+					// not selected.
+					await press.Tab();
+					expect(
+						screen.getByRole( 'tab', { name: 'Alpha' } )
+					).toHaveFocus();
+					await waitFor( () =>
+						expect(
+							screen.queryByRole( 'tab', { selected: true } )
+						).not.toBeInTheDocument()
+					);
+					await waitFor( () =>
+						expect(
+							screen.queryByRole( 'tabpanel' )
+						).not.toBeInTheDocument()
+					);
+
+					// Press right arrow to select the next tab (beta) and
+					// show the related tabpanel.
+					await press.ArrowRight();
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toHaveFocus();
+					expect(
+						await screen.findByRole( 'tabpanel', {
+							name: 'Beta',
+						} )
+					).toBeVisible();
+				} );
+
+				it( 'should ignore any changes to the `defaultTabId` prop after the first render', async () => {
+					const mockOnSelect = jest.fn();
+
+					const { rerender } = await render(
+						<UncontrolledTabs
+							tabs={ TABS }
+							defaultTabId="beta"
+							onSelect={ mockOnSelect }
+						/>
+					);
+
+					// Beta is the initially selected tab
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Beta'
+					);
+
+					// Changing the defaultTabId prop to gamma should not have any effect.
+					await rerender(
+						<UncontrolledTabs
+							tabs={ TABS }
+							defaultTabId="gamma"
+							onSelect={ mockOnSelect }
+						/>
+					);
+
+					expect(
+						await screen.findByRole( 'tab', {
+							selected: true,
+							name: 'Beta',
+						} )
+					).toBeVisible();
+					expect(
+						screen.getByRole( 'tabpanel', {
+							name: 'Beta',
+						} )
+					).toBeVisible();
+
+					expect( mockOnSelect ).not.toHaveBeenCalled();
+				} );
+			} );
+
+			describe( 'through the `selectedTabId` prop [Controlled]', () => {
+				describe( 'when the `selectedTabId` matches an existing tab', () => {
+					it( 'should choose the initial tab matching the `selectedTabId`', async () => {
+						await render(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="beta"
+							/>
+						);
+
+						// Beta is the initially selected tab
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Beta'
+						);
+
+						// Press tab. The selected tab (beta) received focus, since it is
+						// accessible despite being disabled.
+						await press.Tab();
+						expect(
+							await screen.findByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+					} );
+
+					it( 'should choose the initial tab matching the `selectedTabId` even if a `defaultTabId` is passed', async () => {
+						await render(
+							<ControlledTabs
+								tabs={ TABS }
+								defaultTabId="beta"
+								selectedTabId="gamma"
+							/>
+						);
+
+						// Gamma is the initially selected tab
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Gamma'
+						);
+
+						// Press tab. The selected tab (gamma) received focus, since it is
+						// accessible despite being disabled.
+						await press.Tab();
+						expect(
+							await screen.findByRole( 'tab', {
+								selected: true,
+								name: 'Gamma',
+							} )
+						).toHaveFocus();
+					} );
+
+					it( 'should choose the initial tab matching the `selectedTabId` even if the tab is disabled', async () => {
+						await render(
+							<ControlledTabs
+								tabs={ TABS_WITH_BETA_DISABLED }
+								selectedTabId="beta"
+							/>
+						);
+
+						// Beta is the initially selected tab
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Beta'
+						);
+
+						// Press tab. The selected tab (beta) received focus, since it is
+						// accessible despite being disabled.
+						await press.Tab();
+						expect(
+							await screen.findByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+					} );
+				} );
+
+				describe( "when the `selectedTabId` doesn't match an existing tab", () => {
+					it( 'should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab', async () => {
+						await render(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="non-existing-tab"
+							/>
+						);
+
+						// No initially selected tabs or tabpanels, since the `selectedTabId`
+						// prop is not matching any known tabs.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							undefined
+						);
+
+						// Press tab. The first tab receives focus, but it's
+						// not selected.
+						await press.Tab();
+						expect(
+							screen.getByRole( 'tab', { name: 'Alpha' } )
+						).toHaveFocus();
+						await waitFor( () =>
+							expect(
+								screen.queryByRole( 'tab', { selected: true } )
+							).not.toBeInTheDocument()
+						);
+						await waitFor( () =>
+							expect(
+								screen.queryByRole( 'tabpanel' )
+							).not.toBeInTheDocument()
+						);
+
+						// Press right arrow to select the next tab (beta) and
+						// show the related tabpanel.
+						await press.ArrowRight();
+						expect(
+							await screen.findByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+						expect(
+							await screen.findByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+					} );
+
+					it( 'should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab even when disabled', async () => {
+						await render(
+							<ControlledTabs
+								tabs={ TABS_WITH_ALPHA_DISABLED }
+								selectedTabId="non-existing-tab"
+							/>
+						);
+
+						// No initially selected tabs or tabpanels, since the `selectedTabId`
+						// prop is not matching any known tabs.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							undefined
+						);
+
+						// Press tab. The first tab receives focus, but it's
+						// not selected.
+						await press.Tab();
+						expect(
+							screen.getByRole( 'tab', { name: 'Alpha' } )
+						).toHaveFocus();
+						await waitFor( () =>
+							expect(
+								screen.queryByRole( 'tab', { selected: true } )
+							).not.toBeInTheDocument()
+						);
+						await waitFor( () =>
+							expect(
+								screen.queryByRole( 'tabpanel' )
+							).not.toBeInTheDocument()
+						);
+
+						// Press right arrow to select the next tab (beta) and
+						// show the related tabpanel.
+						await press.ArrowRight();
+						expect(
+							await screen.findByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+						expect(
+							await screen.findByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+					} );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'keyboard interactions', () => {
+		describe.each( [
+			[ 'Uncontrolled', UncontrolledTabs ],
+			[ 'Controlled', ControlledTabs ],
+		] )( '[`%s`]', ( _mode, Component ) => {
+			it( 'should handle the tablist as one tab stop', async () => {
+				await render( <Component tabs={ TABS } /> );
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				// Press tab. The selected tab (alpha) received focus.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// By default the tabpanel should receive focus
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+			} );
+
+			it( 'should not focus the tabpanel container when its `focusable` property is set to `false`', async () => {
+				await render(
+					<Component
+						tabs={ TABS.map( ( tabObj ) =>
+							tabObj.tabId === 'alpha'
+								? {
+										...tabObj,
+										content: (
+											<>
+												Selected Tab: Alpha
+												<button>Alpha Button</button>
+											</>
+										),
+										tabpanel: { focusable: false },
+								  }
+								: tabObj
+						) }
+					/>
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// In this case, the tabpanel container is skipped and focus is
+				// moved directly to its contents
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'button', {
+						name: 'Alpha Button',
+					} )
+				).toHaveFocus();
+			} );
+
+			it( 'should select tabs in the tablist when using the left and right arrow keys by default (automatic tab activation)', async () => {
+				const mockOnSelect = jest.fn();
+
+				await render(
+					<Component tabs={ TABS } onSelect={ mockOnSelect } />
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Press the right arrow key to select the beta tab
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+				// Press the right arrow key to select the gamma tab
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Gamma',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Gamma',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+				// Press the left arrow key to select the beta tab
+				await press.ArrowLeft();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+			} );
+
+			it( 'should not automatically select tabs in the tablist when pressing the left and right arrow keys if the `selectOnMove` prop is set to `false` (manual tab activation)', async () => {
+				const mockOnSelect = jest.fn();
+
+				await render(
+					<Component
+						tabs={ TABS }
+						onSelect={ mockOnSelect }
+						selectOnMove={ false }
+					/>
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Press the right arrow key to move focus to the beta tab,
+				// but without selecting it
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: false,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+				// Press the space key to click the beta tab, and select it.
+				// The same should be true with any other mean of clicking the tab button
+				// (ie. mouse click, enter key).
+				await press.Space();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+			} );
+
+			it( 'should not select tabs in the tablist when using the up and down arrow keys, unless the `orientation` prop is set to `vertical`', async () => {
+				const mockOnSelect = jest.fn();
+
+				const { rerender } = await render(
+					<Component tabs={ TABS } onSelect={ mockOnSelect } />
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Press the up arrow key, but the focused/selected tab does not change.
+				await press.ArrowUp();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+				// Press the down arrow key, but the focused/selected tab does not change.
+				await press.ArrowDown();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+				// Change the orientation to "vertical" and rerender the component.
+				await rerender(
+					<Component
+						tabs={ TABS }
+						onSelect={ mockOnSelect }
+						orientation="vertical"
+					/>
+				);
+
+				// Pressing the down arrow key now selects the next tab (beta).
+				await press.ArrowDown();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+				// Pressing the up arrow key now selects the previous tab (alpha).
+				await press.ArrowUp();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+			} );
+
+			it( 'should loop tab focus at the end of the tablist when using arrow keys', async () => {
+				const mockOnSelect = jest.fn();
+
+				await render(
+					<Component tabs={ TABS } onSelect={ mockOnSelect } />
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Press the left arrow key to loop around and select the gamma tab
+				await press.ArrowLeft();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Gamma',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Gamma',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+				// Press the right arrow key to loop around and select the alpha tab
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+			} );
+
+			// TODO: mock writing direction to RTL
+			it( 'should swap the left and right arrow keys when selecting tabs if the writing direction is set to RTL', async () => {
+				// For this test only, mock the writing direction to RTL.
+				mockedIsRTL.mockImplementation( () => true );
+
+				const mockOnSelect = jest.fn();
+
+				await render(
+					<Component tabs={ TABS } onSelect={ mockOnSelect } />
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Press the left arrow key to select the beta tab
+				await press.ArrowLeft();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+				// Press the left arrow key to select the gamma tab
+				await press.ArrowLeft();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Gamma',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Gamma',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+				// Press the right arrow key to select the beta tab
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Beta',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+				// Restore the original implementation of the isRTL function.
+				mockedIsRTL.mockRestore();
+			} );
+
+			it( 'should focus tabs in the tablist even if disabled', async () => {
+				const mockOnSelect = jest.fn();
+
+				await render(
+					<Component
+						tabs={ TABS_WITH_BETA_DISABLED }
+						onSelect={ mockOnSelect }
+					/>
+				);
+
+				// Alpha is automatically selected as the selected tab.
+				await waitForComponentToBeInitializedWithSelectedTab( 'Alpha' );
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+				// Focus the tablist (and the selected tab, alpha)
+				// Tab should initially focus the first tab in the tablist, which
+				// is Alpha.
+				await press.Tab();
+				expect(
+					await screen.findByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toHaveFocus();
+
+				// Pressing the right arrow key moves focus to the beta tab, but alpha
+				// remains the selected tab because beta is disabled.
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: false,
+						name: 'Beta',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Alpha',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+				// Press the right arrow key to select the gamma tab
+				await press.ArrowRight();
+
+				expect(
+					screen.getByRole( 'tab', {
+						selected: true,
+						name: 'Gamma',
+					} )
+				).toHaveFocus();
+				expect(
+					screen.getByRole( 'tabpanel', {
+						name: 'Gamma',
+					} )
+				).toBeVisible();
+
+				expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+			} );
+		} );
+
+		describe( 'When `selectedId` is changed by the controlling component [Controlled]', () => {
+			describe.each( [ true, false ] )(
+				'and `selectOnMove` is %s',
+				( selectOnMove ) => {
+					it( 'should continue to handle arrow key navigation properly', async () => {
+						const { rerender } = await render(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="beta"
+								selectOnMove={ selectOnMove }
+							/>
+						);
+
+						// Beta is the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Beta'
+						);
+
+						// Tab key should focus the currently selected tab, which is Beta.
+						await press.Tab();
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+
+						await rerender(
+							<ControlledTabs
+								tabs={ TABS }
+								selectedTabId="gamma"
+								selectOnMove={ selectOnMove }
+							/>
+						);
+
+						// When the selected tab is changed, focus should not be changed.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Gamma',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tab', {
+								selected: false,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+
+						// Arrow left should move focus to the previous tab (alpha).
+						// The alpha tab should be always focused, and should be selected
+						// when the `selectOnMove` prop is set to `true`.
+						await press.ArrowLeft();
+						expect(
+							screen.getByRole( 'tab', {
+								selected: selectOnMove,
+								name: 'Alpha',
+							} )
+						).toHaveFocus();
+					} );
+
+					it( 'should focus the correct tab when tabbing out and back into the tablist', async () => {
+						const { rerender } = await render(
+							<>
+								<button>Focus me</button>
+								<ControlledTabs
+									tabs={ TABS }
+									selectedTabId="beta"
+									selectOnMove={ selectOnMove }
+								/>
+							</>
+						);
+
+						// Beta is the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Beta'
+						);
+
+						// Tab key should focus the currently selected tab, which is Beta.
+						await press.Tab();
+						await press.Tab();
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+
+						// Change the selected tab to gamma via a controlled update.
+						await rerender(
+							<>
+								<button>Focus me</button>
+								<ControlledTabs
+									tabs={ TABS }
+									selectedTabId="gamma"
+									selectOnMove={ selectOnMove }
+								/>
+							</>
+						);
+
+						// When the selected tab is changed, it should not automatically receive focus.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Gamma',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tab', {
+								selected: false,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+
+						// Press shift+tab, move focus to the button before Tabs
+						await press.ShiftTab();
+						expect(
+							screen.getByRole( 'button', { name: 'Focus me' } )
+						).toHaveFocus();
+
+						// Press tab, move focus back to the tablist
+						await press.Tab();
+
+						const betaTab = screen.getByRole( 'tab', {
+							name: 'Beta',
+						} );
+						const gammaTab = screen.getByRole( 'tab', {
+							name: 'Gamma',
+						} );
+
+						expect(
+							selectOnMove ? gammaTab : betaTab
+						).toHaveFocus();
+					} );
+				}
+			);
+		} );
+	} );
+
+	describe( 'miscellaneous runtime changes', () => {
+		describe( 'removing a tab', () => {
+			describe( 'with no explicitly set initial tab', () => {
+				it( 'should not select a new tab when the selected tab is removed', async () => {
+					const mockOnSelect = jest.fn();
+
+					const { rerender } = await render(
+						<UncontrolledTabs
+							tabs={ TABS }
+							onSelect={ mockOnSelect }
+						/>
+					);
+
+					// Alpha is automatically selected as the selected tab.
+					await waitForComponentToBeInitializedWithSelectedTab(
+						'Alpha'
+					);
+
+					expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+					expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+					// Select gamma
+					await click( screen.getByRole( 'tab', { name: 'Gamma' } ) );
+
+					expect(
+						screen.getByRole( 'tab', {
+							selected: true,
+							name: 'Gamma',
+						} )
+					).toHaveFocus();
+					expect(
+						screen.getByRole( 'tabpanel', {
+							name: 'Gamma',
+						} )
+					).toBeVisible();
+
+					expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+					expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+					// Remove gamma
+					await rerender(
+						<UncontrolledTabs
+							tabs={ TABS.slice( 0, 2 ) }
+							onSelect={ mockOnSelect }
+						/>
+					);
+
+					expect( screen.getAllByRole( 'tab' ) ).toHaveLength( 2 );
+
+					// No tab should be selected i.e. it doesn't fall back to gamma,
+					// even if it matches the `defaultTabId` prop.
+					expect(
+						screen.queryByRole( 'tab', { selected: true } )
+					).not.toBeInTheDocument();
+					// No tabpanel should be rendered either
+					expect(
+						screen.queryByRole( 'tabpanel' )
+					).not.toBeInTheDocument();
+
+					expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+				} );
+			} );
+
+			describe.each( [
+				[ 'defaultTabId', 'Uncontrolled', UncontrolledTabs ],
+				[ 'selectedTabId', 'Controlled', ControlledTabs ],
+			] )(
+				'when using the `%s` prop [%s]',
+				( propName, _mode, Component ) => {
+					it( 'should not select a new tab when the selected tab is removed', async () => {
+						const mockOnSelect = jest.fn();
+
+						const initialComponentProps = {
+							tabs: TABS,
+							[ propName ]: 'gamma',
+							onSelect: mockOnSelect,
+						};
+
+						const { rerender } = await render(
+							<Component { ...initialComponentProps } />
+						);
+
+						// Gamma is the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Gamma'
+						);
+
+						// Remove gamma
+						await rerender(
+							<Component
+								{ ...initialComponentProps }
+								tabs={ TABS.slice( 0, 2 ) }
+							/>
+						);
+
+						expect( screen.getAllByRole( 'tab' ) ).toHaveLength(
+							2
+						);
+						// No tab should be selected i.e. it doesn't fall back to first tab.
+						expect(
+							screen.queryByRole( 'tab', { selected: true } )
+						).not.toBeInTheDocument();
+						// No tabpanel should be rendered either
+						expect(
+							screen.queryByRole( 'tabpanel' )
+						).not.toBeInTheDocument();
+
+						// Re-add gamma. Gamma becomes selected again.
+						await rerender(
+							<Component { ...initialComponentProps } />
+						);
+
+						expect( screen.getAllByRole( 'tab' ) ).toHaveLength(
+							TABS.length
+						);
+
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Gamma',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Gamma',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).not.toHaveBeenCalled();
+					} );
+
+					it( `should not select the tab matching the \`${ propName }\` prop as a fallback when the selected tab is removed`, async () => {
+						const mockOnSelect = jest.fn();
+
+						const initialComponentProps = {
+							tabs: TABS,
+							[ propName ]: 'gamma',
+							onSelect: mockOnSelect,
+						};
+
+						const { rerender } = await render(
+							<Component { ...initialComponentProps } />
+						);
+
+						// Gamma is the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Gamma'
+						);
+
+						// Select alpha
+						await click(
+							screen.getByRole( 'tab', { name: 'Alpha' } )
+						);
+
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Alpha',
+							} )
+						).toHaveFocus();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Alpha',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+						expect( mockOnSelect ).toHaveBeenLastCalledWith(
+							'alpha'
+						);
+
+						// Remove alpha
+						await rerender(
+							<Component
+								{ ...initialComponentProps }
+								tabs={ TABS.slice( 1 ) }
+							/>
+						);
+
+						expect( screen.getAllByRole( 'tab' ) ).toHaveLength(
+							2
+						);
+
+						// No tab should be selected i.e. it doesn't fall back to gamma,
+						// even if it matches the `defaultTabId` prop.
+						expect(
+							screen.queryByRole( 'tab', { selected: true } )
+						).not.toBeInTheDocument();
+						// No tabpanel should be rendered either
+						expect(
+							screen.queryByRole( 'tabpanel' )
+						).not.toBeInTheDocument();
+
+						// Re-add alpha. Alpha becomes selected again.
+						await rerender(
+							<Component { ...initialComponentProps } />
+						);
+
+						expect( screen.getAllByRole( 'tab' ) ).toHaveLength(
+							TABS.length
+						);
+
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Alpha',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Alpha',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+					} );
+				}
+			);
+		} );
+
+		describe( 'adding a tab', () => {
+			describe.each( [
+				[ 'defaultTabId', 'Uncontrolled', UncontrolledTabs ],
+				[ 'selectedTabId', 'Controlled', ControlledTabs ],
+			] )(
+				'when using the `%s` prop [%s]',
+				( propName, _mode, Component ) => {
+					it( `should select a newly added tab if it matches the \`${ propName }\` prop`, async () => {
+						const mockOnSelect = jest.fn();
+
+						const initialComponentProps = {
+							tabs: TABS,
+							[ propName ]: 'delta',
+							onSelect: mockOnSelect,
+						};
+
+						const { rerender } = await render(
+							<Component { ...initialComponentProps } />
+						);
+
+						// No initially selected tabs or tabpanels, since the `defaultTabId`
+						// prop is not matching any known tabs.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							undefined
+						);
+
+						expect( mockOnSelect ).not.toHaveBeenCalled();
+
+						// Re-render with beta disabled.
+						await rerender(
+							<Component
+								{ ...initialComponentProps }
+								tabs={ TABS_WITH_DELTA }
+							/>
+						);
+
+						// Delta becomes selected
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Delta',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Delta',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).not.toHaveBeenCalled();
+					} );
+				}
+			);
+		} );
+		describe( 'a tab becomes disabled', () => {
+			describe.each( [
+				[ 'defaultTabId', 'Uncontrolled', UncontrolledTabs ],
+				[ 'selectedTabId', 'Controlled', ControlledTabs ],
+			] )(
+				'when using the `%s` prop [%s]',
+				( propName, _mode, Component ) => {
+					it( `should keep the initial tab matching the \`${ propName }\` prop as selected even if it becomes disabled`, async () => {
+						const mockOnSelect = jest.fn();
+
+						const initialComponentProps = {
+							tabs: TABS,
+							[ propName ]: 'beta',
+							onSelect: mockOnSelect,
+						};
+
+						const { rerender } = await render(
+							<Component { ...initialComponentProps } />
+						);
+
+						// Beta is the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Beta'
+						);
+
+						expect( mockOnSelect ).not.toHaveBeenCalled();
+
+						// Re-render with beta disabled.
+						await rerender(
+							<Component
+								{ ...initialComponentProps }
+								tabs={ TABS_WITH_BETA_DISABLED }
+							/>
+						);
+
+						// Beta continues to be selected and focused, even if it is disabled.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+
+						// Re-enable beta.
+						await rerender(
+							<Component { ...initialComponentProps } />
+						);
+
+						// Beta continues to be selected and focused.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).not.toHaveBeenCalled();
+					} );
+
+					it( 'should keep the current tab selected by the user as selected even if it becomes disabled', async () => {
+						const mockOnSelect = jest.fn();
+
+						const { rerender } = await render(
+							<Component
+								tabs={ TABS }
+								onSelect={ mockOnSelect }
+							/>
+						);
+
+						// Alpha is automatically selected as the selected tab.
+						await waitForComponentToBeInitializedWithSelectedTab(
+							'Alpha'
+						);
+
+						expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+						expect( mockOnSelect ).toHaveBeenLastCalledWith(
+							'alpha'
+						);
+
+						// Click on beta tab, beta becomes selected.
+						await click(
+							screen.getByRole( 'tab', { name: 'Beta' } )
+						);
+
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+						expect( mockOnSelect ).toHaveBeenLastCalledWith(
+							'beta'
+						);
+
+						// Re-render with beta disabled.
+						await rerender(
+							<Component
+								tabs={ TABS_WITH_BETA_DISABLED }
+								onSelect={ mockOnSelect }
+							/>
+						);
+
+						// Beta continues to be selected, even if it is disabled.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toHaveFocus();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+
+						// Re-enable beta.
+						await rerender(
+							<Component
+								tabs={ TABS }
+								onSelect={ mockOnSelect }
+							/>
+						);
+
+						// Beta continues to be selected and focused.
+						expect(
+							screen.getByRole( 'tab', {
+								selected: true,
+								name: 'Beta',
+							} )
+						).toBeVisible();
+						expect(
+							screen.getByRole( 'tabpanel', {
+								name: 'Beta',
+							} )
+						).toBeVisible();
+
+						expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+					} );
+				}
+			);
+		} );
+	} );
+} );
diff --git a/packages/components/src/tabs/types.ts b/packages/components/src/tabs/types.ts
new file mode 100644
index 00000000000000..959a82509a05d6
--- /dev/null
+++ b/packages/components/src/tabs/types.ts
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+export type TabsContextProps =
+	| {
+			/**
+			 * The tabStore object returned by Ariakit's `useTabStore` hook.
+			 */
+			store: Ariakit.TabStore;
+			/**
+			 * The unique id string for this instance of the Tabs component.
+			 */
+			instanceId: string;
+	  }
+	| undefined;
+
+export type TabsProps = {
+	/**
+	 * The children elements, which should include one instance of the
+	 * `Tabs.Tablist` component and as many instances of the `Tabs.TabPanel`
+	 * components as there are `Tabs.Tab` components.
+	 */
+	children: Ariakit.TabProps[ 'children' ];
+	/**
+	 * Determines if the tab should be selected when it receives focus. If set to
+	 * `false`, the tab will only be selected upon clicking, not when using arrow
+	 * keys to shift focus (manual tab activation). See the official W3C docs
+	 * for more info.
+	 *
+	 * @default true
+	 *
+	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+	 */
+	selectOnMove?: Ariakit.TabStoreProps[ 'selectOnMove' ];
+	/**
+	 * The id of the tab whose panel is currently visible.
+	 *
+	 * If left `undefined`, it will be automatically set to the first enabled
+	 * tab, and the component assumes it is being used in "uncontrolled" mode.
+	 *
+	 * Consequently, any value different than `undefined` will set the component
+	 * in "controlled" mode. When in "controlled" mode, the `null` value will
+	 * result in no tabs being selected, and the tablist becoming tabbable.
+	 */
+	selectedTabId?: Ariakit.TabStoreProps[ 'selectedId' ];
+	/**
+	 * The id of the tab whose panel is currently visible.
+	 *
+	 * If left `undefined`, it will be automatically set to the first enabled
+	 * tab. If set to `null`, no tab will be selected, and the tablist will be
+	 * tabbable.
+	 *
+	 * Note: this prop will be overridden by the `selectedTabId` prop if it is
+	 * provided (meaning the component will be used in "controlled" mode).
+	 */
+	defaultTabId?: Ariakit.TabStoreProps[ 'defaultSelectedId' ];
+	/**
+	 * The function called when the `selectedTabId` changes.
+	 */
+	onSelect?: Ariakit.TabStoreProps[ 'setSelectedId' ];
+	/**
+	 * The current active tab `id`. The active tab is the tab element within the
+	 * tablist widget that has DOM focus.
+	 * - `null` represents the tablist (ie. the base composite element). Users
+	 *   will be able to navigate out of it using arrow keys.
+	 * - If `activeTabId` is initially set to `null`, the base composite element
+	 *   itself will have focus and users will be able to navigate to it using
+	 *   arrow keys.activeTabId
+	 */
+	activeTabId?: Ariakit.TabStoreProps[ 'activeId' ];
+	/**
+	 * The tab id that should be active by default when the composite widget is
+	 * rendered. If `null`, the tablist element itself will have focus
+	 * and users will be able to navigate to it using arrow keys. If `undefined`,
+	 * the first enabled item will be focused.
+	 *
+	 * Note: this prop will be overridden by the `activeTabId` prop if it is
+	 * provided.
+	 */
+	defaultActiveTabId?: Ariakit.TabStoreProps[ 'defaultActiveId' ];
+	/**
+	 * A callback that gets called when the `activeTabId` state changes.
+	 */
+	onActiveTabIdChange?: Ariakit.TabStoreProps[ 'setActiveId' ];
+	/**
+	 * Defines the orientation of the tablist and determines which arrow keys
+	 * can be used to move focus:
+	 * - `both`: all arrow keys work.
+	 * - `horizontal`: only left and right arrow keys work.
+	 * - `vertical`: only up and down arrow keys work.
+	 *
+	 * @default "horizontal"
+	 */
+	orientation?: Ariakit.TabStoreProps[ 'orientation' ];
+};
+
+export type TabListProps = {
+	/**
+	 * The children elements, which should include one or more instances of the
+	 * `Tabs.Tab` component.
+	 */
+	children: Ariakit.TabListProps[ 'children' ];
+};
+
+// TODO: consider prop name changes (tabId, selectedTabId)
+// switch to auto-generated README
+// compound technique
+
+export type TabProps = {
+	/**
+	 * The unique ID of the tab. It will be used to register the tab and match
+	 * it to a corresponding `Tabs.TabPanel` component.
+	 */
+	tabId: NonNullable< Ariakit.TabProps[ 'id' ] >;
+	/**
+	 * The contents of the tab.
+	 */
+	children?: Ariakit.TabProps[ 'children' ];
+	/**
+	 * Determines if the tab should be disabled. Note that disabled tabs can
+	 * still be accessed via the keyboard when navigating through the tablist.
+	 *
+	 * @default false
+	 */
+	disabled?: Ariakit.TabProps[ 'disabled' ];
+	/**
+	 * Allows the component to be rendered as a different HTML element or React
+	 * component. The value can be a React element or a function that takes in the
+	 * original component props and gives back a React element with the props
+	 * merged.
+	 *
+	 * By default, the tab will be rendered as a `button` element.
+	 */
+	render?: Ariakit.TabProps[ 'render' ];
+};
+
+export type TabPanelProps = {
+	/**
+	 * The contents of the tab panel.
+	 */
+	children?: Ariakit.TabPanelProps[ 'children' ];
+	/**
+	 * The unique `id` of the `Tabs.Tab` component controlling this panel. This
+	 * connection is used to assign the `aria-labelledby` attribute to the tab
+	 * panel and to determine if the tab panel should be visible.
+	 *
+	 * If not provided, this link is automatically established by matching the
+	 * order of `Tabs.Tab` and `Tabs.TabPanel` elements in the DOM.
+	 */
+	tabId: NonNullable< Ariakit.TabPanelProps[ 'tabId' ] >;
+	/**
+	 * Determines whether or not the tabpanel element should be focusable.
+	 * If `false`, pressing the tab key will skip over the tabpanel, and instead
+	 * focus on the first focusable element in the panel (if there is one).
+	 *
+	 * @default true
+	 */
+	focusable?: Ariakit.TabPanelProps[ 'focusable' ];
+};
diff --git a/packages/components/src/tabs/use-track-overflow.ts b/packages/components/src/tabs/use-track-overflow.ts
new file mode 100644
index 00000000000000..5f6504e6875212
--- /dev/null
+++ b/packages/components/src/tabs/use-track-overflow.ts
@@ -0,0 +1,76 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+export function useTrackOverflow(
+	parent: HTMLElement | undefined | null,
+	children: {
+		first: HTMLElement | undefined | null;
+		last: HTMLElement | undefined | null;
+	}
+) {
+	const [ first, setFirst ] = useState( false );
+	const [ last, setLast ] = useState( false );
+	const [ observer, setObserver ] = useState< IntersectionObserver >();
+
+	const callback: IntersectionObserverCallback = useEvent( ( entries ) => {
+		for ( const entry of entries ) {
+			if ( entry.target === children.first ) {
+				setFirst( ! entry.isIntersecting );
+			}
+			if ( entry.target === children.last ) {
+				setLast( ! entry.isIntersecting );
+			}
+		}
+	} );
+
+	useEffect( () => {
+		if ( ! parent || ! window.IntersectionObserver ) {
+			return;
+		}
+		const newObserver = new IntersectionObserver( callback, {
+			root: parent,
+			threshold: 0.9,
+		} );
+		setObserver( newObserver );
+
+		return () => newObserver.disconnect();
+	}, [ callback, parent ] );
+
+	useEffect( () => {
+		if ( ! observer ) {
+			return;
+		}
+
+		if ( children.first ) {
+			observer.observe( children.first );
+		}
+		if ( children.last ) {
+			observer.observe( children.last );
+		}
+
+		return () => {
+			if ( children.first ) {
+				observer.unobserve( children.first );
+			}
+			if ( children.last ) {
+				observer.unobserve( children.last );
+			}
+		};
+	}, [ children.first, children.last, observer ] );
+
+	return { first, last };
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
index 11834ddefbd21e..80f3145a4325b3 100644
--- a/packages/components/src/text-control/README.md
+++ b/packages/components/src/text-control/README.md
@@ -4,12 +4,6 @@ TextControl components let users enter and edit text.
 
 ![Unfilled and filled TextControl components](https://make.wordpress.org/design/files/2019/03/TextControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -60,14 +54,16 @@ Don’t use unclear visual markers to indicate a text field.
 Render a user interface to input the name of an additional css class.
 
 ```js
+import { useState } from 'react';
 import { TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyTextControl = () => {
 	const [ className, setClassName ] = useState( '' );
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }
@@ -132,6 +128,14 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
+#### __next40pxDefaultSize
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index 15d792489ba99e..83881542fe7b7b 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,8 +14,9 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedTextControl(
 	props: WordPressComponentProps< TextControlProps, 'input', false >,
@@ -22,23 +24,31 @@ function UnforwardedTextControl(
 ) {
 	const {
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		label,
 		hideLabelFromVision,
 		value,
 		help,
+		id: idProp,
 		className,
 		onChange,
 		type = 'text',
 		...additionalProps
 	} = props;
-	const instanceId = useInstanceId( TextControl );
-	const id = `inspector-text-control-${ instanceId }`;
+	const id = useInstanceId( TextControl, 'inspector-text-control', idProp );
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'TextControl',
+		size: undefined,
+		__next40pxDefaultSize,
+	} );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
@@ -46,7 +56,9 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className="components-text-control__input"
+				className={ clsx( 'components-text-control__input', {
+					'is-next-40px-default-size': __next40pxDefaultSize,
+				} ) }
 				type={ type }
 				id={ id }
 				value={ value }
@@ -71,6 +83,8 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }
diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..fe7fb538805da3
--- /dev/null
+++ b/packages/components/src/text-control/stories/index.story.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextControl from '..';
+
+const meta: Meta< typeof TextControl > = {
+	component: TextControl,
+	title: 'Components/Selection & Input/Common/TextControl',
+	id: 'components-textcontrol',
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: StoryFn< typeof TextControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<TextControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
+	{}
+);
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__next40pxDefaultSize: true,
+};
+
+export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
+	DefaultTemplate.bind( {} );
+WithLabelAndHelpText.args = {
+	...Default.args,
+	label: 'Label Text',
+	help: 'Help text to explain the input.',
+};
diff --git a/packages/components/src/text-control/stories/index.tsx b/packages/components/src/text-control/stories/index.tsx
deleted file mode 100644
index 9c10a970e1ef1e..00000000000000
--- a/packages/components/src/text-control/stories/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextControl from '..';
-
-const meta: ComponentMeta< typeof TextControl > = {
-	component: TextControl,
-	title: 'Components/TextControl',
-	argTypes: {
-		help: { control: { type: 'text' } },
-		label: { control: { type: 'text' } },
-		type: { control: { type: 'text' } },
-		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState( '' );
-
-	return (
-		<TextControl
-			{ ...args }
-			value={ value }
-			onChange={ ( v ) => {
-				setValue( v );
-				onChange( v );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof TextControl > =
-	DefaultTemplate.bind( {} );
-Default.args = {};
-
-export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
-	DefaultTemplate.bind( {} );
-WithLabelAndHelpText.args = {
-	...Default.args,
-	label: 'Label Text',
-	help: 'Help text to explain the input.',
-};
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 38c35eec9c8455..5ae2a90b827736 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -13,5 +13,18 @@
 .components-text-control__input[type="month"],
 .components-text-control__input[type="number"] {
 	width: 100%;
+	height: $grid-unit-40;
+	// Override input style margin in WP forms.css.
+	margin: 0;
 	@include input-control;
+
+	&.is-next-40px-default-size {
+		height: $grid-unit-50;
+
+		// Subtract 1px to account for the border, which isn't included on the element
+		// on newer components like InputControl, SelectControl, etc.
+		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
+	}
 }
diff --git a/packages/components/src/text-control/test/text-control.tsx b/packages/components/src/text-control/test/text-control.tsx
new file mode 100644
index 00000000000000..7eb3a82d2fb5f5
--- /dev/null
+++ b/packages/components/src/text-control/test/text-control.tsx
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import _TextControl from '..';
+
+const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
+	return (
+		<_TextControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
+};
+
+const noop = () => {};
+
+describe( 'TextControl', () => {
+	describe( 'When no ID prop is provided', () => {
+		it( 'should generate an ID', () => {
+			render( <TextControl onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+				'id',
+				expect.stringMatching( /^inspector-text-control-/ )
+			);
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl label={ labelValue } onChange={ noop } value="" />
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+
+	describe( 'When an ID prop is provided', () => {
+		const id = 'test-id';
+
+		it( 'should use the passed ID prop if provided', () => {
+			render( <TextControl id={ id } onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'id', id );
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl
+					label={ labelValue }
+					id={ id }
+					onChange={ noop }
+					value=""
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+} );
diff --git a/packages/components/src/text-control/types.ts b/packages/components/src/text-control/types.ts
index 4c900b8aa89150..0b2d2016614007 100644
--- a/packages/components/src/text-control/types.ts
+++ b/packages/components/src/text-control/types.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { HTMLInputTypeAttribute } from 'react';
-
 /**
  * Internal dependencies
  */
@@ -29,5 +24,22 @@ export type TextControlProps = Pick<
 	 *
 	 * @default 'text'
 	 */
-	type?: HTMLInputTypeAttribute;
+	type?:
+		| 'date'
+		| 'datetime-local'
+		| 'email'
+		| 'number'
+		| 'password'
+		| 'tel'
+		| 'text'
+		| 'time'
+		| 'search'
+		| 'url';
+
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
diff --git a/packages/components/src/text-highlight/stories/index.story.tsx b/packages/components/src/text-highlight/stories/index.story.tsx
new file mode 100644
index 00000000000000..f9538b7130095d
--- /dev/null
+++ b/packages/components/src/text-highlight/stories/index.story.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TextHighlight from '..';
+
+const meta: Meta< typeof TextHighlight > = {
+	component: TextHighlight,
+	title: 'Components/Typography/TextHighlight',
+	id: 'components-texthighlight',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TextHighlight > = ( args ) => {
+	return <TextHighlight { ...args } />;
+};
+
+export const Default: StoryFn< typeof TextHighlight > = Template.bind( {} );
+Default.args = {
+	text: 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.',
+	highlight: 'Gutenberg',
+};
diff --git a/packages/components/src/text-highlight/stories/index.tsx b/packages/components/src/text-highlight/stories/index.tsx
deleted file mode 100644
index e844d402f5d6eb..00000000000000
--- a/packages/components/src/text-highlight/stories/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import TextHighlight from '..';
-
-const meta: ComponentMeta< typeof TextHighlight > = {
-	component: TextHighlight,
-	title: 'Components/TextHighlight',
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof TextHighlight > = ( args ) => {
-	return <TextHighlight { ...args } />;
-};
-
-export const Default: ComponentStory< typeof TextHighlight > = Template.bind(
-	{}
-);
-Default.args = {
-	text: 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.',
-	highlight: 'Gutenberg',
-};
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/text/README.md b/packages/components/src/text/README.md
index 7747ec9cbc7277..46bd6a5f10de77 100644
--- a/packages/components/src/text/README.md
+++ b/packages/components/src/text/README.md
@@ -22,7 +22,7 @@ function Example() {
 
 ### adjustLineHeightForInnerControls
 
-**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"`
+**Type**: `"large"`,`"medium"`,`"small"`,`"xSmall"`
 
 Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 
@@ -31,7 +31,7 @@ import { __experimentalText as Text, TextInput } from '@wordpress/components';
 
 function Example() {
 	return (
-		<Text adjustLineHeightForInnerControls>
+		<Text adjustLineHeightForInnerControls={"small"}>
 			Lorem ipsum dolor sit amet, consectetur
 			<TextInput value="adipiscing elit..." />
 		</Text>
@@ -132,6 +132,8 @@ function Example() {
 
 Sets `Text` to have `display: block`.
 
+Note: text truncation only works when `isBlock` is `false`.
+
 ### isDestructive
 
 **Type**: `boolean`
@@ -196,7 +198,9 @@ function Example() {
 
 **Type**: `boolean`
 
-Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways.
+
+Note: text truncation won't work if the `isBlock` property is set to `true`
 
 ```jsx
 import { __experimentalText as Text } from '@wordpress/components';
diff --git a/packages/components/src/text/component.js b/packages/components/src/text/component.js
deleted file mode 100644
index b729f73bf640e8..00000000000000
--- a/packages/components/src/text/component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../ui/context';
-import { View } from '../view';
-import useText from './hook';
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- * @param {import('react').ForwardedRef<any>}                                                forwardedRef
- */
-function Text( props, forwardedRef ) {
-	const textProps = useText( props );
-
-	return <View as="span" { ...textProps } ref={ forwardedRef } />;
-}
-
-/**
- * `Text` is a core component that renders text in the library, using the
- * library's typography system.
- *
- * `Text` can be used to render any text-content, like an HTML `p` or `span`.
- *
- * @example
- *
- * ```jsx
- * import { __experimentalText as Text } from `@wordpress/components`;
- *
- * function Example() {
- * 	return <Text>Code is Poetry</Text>;
- * }
- * ```
- */
-const ConnectedText = contextConnect( Text, 'Text' );
-
-export default ConnectedText;
diff --git a/packages/components/src/text/component.tsx b/packages/components/src/text/component.tsx
new file mode 100644
index 00000000000000..f3fe69d936584c
--- /dev/null
+++ b/packages/components/src/text/component.tsx
@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
+import { View } from '../view';
+import useText from './hook';
+import type { Props } from './types';
+
+/**
+ * @param props
+ * @param forwardedRef
+ */
+function UnconnectedText(
+	props: WordPressComponentProps< Props, 'span' >,
+	forwardedRef: React.ForwardedRef< any >
+) {
+	const textProps = useText( props );
+
+	return <View as="span" { ...textProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `Text` is a core component that renders text in the library, using the
+ * library's typography system.
+ *
+ * `Text` can be used to render any text-content, like an HTML `p` or `span`.
+ *
+ * @example
+ *
+ * ```jsx
+ * import { __experimentalText as Text } from `@wordpress/components`;
+ *
+ * function Example() {
+ * 	return <Text>Code is Poetry</Text>;
+ * }
+ * ```
+ */
+export const Text = contextConnect( UnconnectedText, 'Text' );
+export default Text;
diff --git a/packages/components/src/text/get-line-height.ts b/packages/components/src/text/get-line-height.ts
index 88bf9d1558e6f5..345391ba334ffb 100644
--- a/packages/components/src/text/get-line-height.ts
+++ b/packages/components/src/text/get-line-height.ts
@@ -7,16 +7,20 @@ import type { CSSProperties } from 'react';
  * Internal dependencies
  */
 import type { Props } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { CONFIG } from '../utils';
 
 export function getLineHeight(
 	adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ],
 	lineHeight: CSSProperties[ 'lineHeight' ]
 ) {
-	if ( lineHeight ) return lineHeight;
+	if ( lineHeight ) {
+		return lineHeight;
+	}
 
-	if ( ! adjustLineHeightForInnerControls ) return;
+	if ( ! adjustLineHeightForInnerControls ) {
+		return;
+	}
 
 	let value = `calc(${ CONFIG.controlHeight } + ${ space( 2 ) })`;
 
diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js
deleted file mode 100644
index 7a83bc9c336999..00000000000000
--- a/packages/components/src/text/hook.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, Children, cloneElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
-import { useTruncate } from '../truncate';
-import { getOptimalTextShade } from '../ui/utils';
-import * as styles from './styles';
-import { createHighlighterText } from './utils';
-import { getFontSize } from '../ui/utils/font-size';
-import { CONFIG, COLORS } from '../utils';
-import { getLineHeight } from './get-line-height';
-import { useCx } from '../utils/hooks/use-cx';
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props
- */
-export default function useText( props ) {
-	const {
-		adjustLineHeightForInnerControls,
-		align,
-		children,
-		className,
-		color,
-		ellipsizeMode,
-		isDestructive = false,
-		display,
-		highlightEscape = false,
-		highlightCaseSensitive = false,
-		highlightWords,
-		highlightSanitize,
-		isBlock = false,
-		letterSpacing,
-		lineHeight: lineHeightProp,
-		optimizeReadabilityFor,
-		size,
-		truncate = false,
-		upperCase = false,
-		variant,
-		weight = CONFIG.fontWeight,
-		...otherProps
-	} = useContextSystem( props, 'Text' );
-
-	/** @type {import('react').ReactNode} */
-	let content = children;
-	const isHighlighter = Array.isArray( highlightWords );
-	const isCaption = size === 'caption';
-
-	if ( isHighlighter ) {
-		if ( typeof children !== 'string' ) {
-			throw new TypeError(
-				'`children` of `Text` must only be `string` types when `highlightWords` is defined'
-			);
-		}
-
-		content = createHighlighterText( {
-			autoEscape: highlightEscape,
-			// Disable reason: We need to disable this otherwise it erases the cast
-			// eslint-disable-next-line object-shorthand
-			children: /** @type {string} */ ( children ),
-			caseSensitive: highlightCaseSensitive,
-			searchWords: highlightWords,
-			sanitize: highlightSanitize,
-		} );
-	}
-
-	const cx = useCx();
-
-	const classes = useMemo( () => {
-		const sx = {};
-
-		const lineHeight = getLineHeight(
-			adjustLineHeightForInnerControls,
-			lineHeightProp
-		);
-
-		sx.Base = css( {
-			color,
-			display,
-			fontSize: getFontSize( size ),
-			/* eslint-disable jsdoc/valid-types */
-			fontWeight:
-				/** @type {import('react').CSSProperties['fontWeight']} */ (
-					weight
-				),
-			/* eslint-enable jsdoc/valid-types */
-			lineHeight,
-			letterSpacing,
-			textAlign: align,
-		} );
-
-		sx.upperCase = css( { textTransform: 'uppercase' } );
-
-		sx.optimalTextColor = null;
-
-		if ( optimizeReadabilityFor ) {
-			const isOptimalTextColorDark =
-				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
-
-			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.gray[ 900 ] } )
-				: css( { color: COLORS.white } );
-		}
-
-		return cx(
-			styles.Text,
-			sx.Base,
-			sx.optimalTextColor,
-			isDestructive && styles.destructive,
-			!! isHighlighter && styles.highlighterText,
-			isBlock && styles.block,
-			isCaption && styles.muted,
-			variant && styles[ variant ],
-			upperCase && sx.upperCase,
-			className
-		);
-	}, [
-		adjustLineHeightForInnerControls,
-		align,
-		className,
-		color,
-		cx,
-		display,
-		isBlock,
-		isCaption,
-		isDestructive,
-		isHighlighter,
-		letterSpacing,
-		lineHeightProp,
-		optimizeReadabilityFor,
-		size,
-		upperCase,
-		variant,
-		weight,
-	] );
-
-	/** @type {undefined | 'auto' | 'none'} */
-	let finalEllipsizeMode;
-	if ( truncate === true ) {
-		finalEllipsizeMode = 'auto';
-	}
-	if ( truncate === false ) {
-		finalEllipsizeMode = 'none';
-	}
-
-	const finalComponentProps = {
-		...otherProps,
-		className: classes,
-		children,
-		ellipsizeMode: ellipsizeMode || finalEllipsizeMode,
-	};
-
-	const truncateProps = useTruncate( finalComponentProps );
-
-	/**
-	 * Enhance child `<Link />` components to inherit font size.
-	 */
-	if ( ! truncate && Array.isArray( children ) ) {
-		content = Children.map( children, ( child ) => {
-			if (
-				typeof child !== 'object' ||
-				child === null ||
-				! ( 'props' in child )
-			) {
-				return child;
-			}
-
-			const isLink = hasConnectNamespace( child, [ 'Link' ] );
-			if ( isLink ) {
-				return cloneElement( child, {
-					size: child.props.size || 'inherit',
-				} );
-			}
-
-			return child;
-		} );
-	}
-
-	return {
-		...truncateProps,
-		children: truncate ? truncateProps.children : content,
-	};
-}
diff --git a/packages/components/src/text/hook.ts b/packages/components/src/text/hook.ts
new file mode 100644
index 00000000000000..a447b2ce5133be
--- /dev/null
+++ b/packages/components/src/text/hook.ts
@@ -0,0 +1,189 @@
+/**
+ * External dependencies
+ */
+import type { SerializedStyles } from '@emotion/react';
+import { css } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, Children, cloneElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { hasConnectNamespace, useContextSystem } from '../context';
+import { useTruncate } from '../truncate';
+import { getOptimalTextShade } from '../utils/colors';
+import * as styles from './styles';
+import { createHighlighterText } from './utils';
+import { getFontSize } from '../utils/font-size';
+import { CONFIG, COLORS } from '../utils';
+import { getLineHeight } from './get-line-height';
+import { useCx } from '../utils/hooks/use-cx';
+import type { Props } from './types';
+import type React from 'react';
+
+/**
+ * @param {import('../context').WordPressComponentProps<import('./types').Props, 'span'>} props
+ */
+export default function useText(
+	props: WordPressComponentProps< Props, 'span' >
+) {
+	const {
+		adjustLineHeightForInnerControls,
+		align,
+		children,
+		className,
+		color,
+		ellipsizeMode,
+		isDestructive = false,
+		display,
+		highlightEscape = false,
+		highlightCaseSensitive = false,
+		highlightWords,
+		highlightSanitize,
+		isBlock = false,
+		letterSpacing,
+		lineHeight: lineHeightProp,
+		optimizeReadabilityFor,
+		size,
+		truncate = false,
+		upperCase = false,
+		variant,
+		weight = CONFIG.fontWeight,
+		...otherProps
+	} = useContextSystem( props, 'Text' );
+
+	let content: React.ReactNode = children;
+	const isHighlighter = Array.isArray( highlightWords );
+	const isCaption = size === 'caption';
+
+	if ( isHighlighter ) {
+		if ( typeof children !== 'string' ) {
+			throw new TypeError(
+				'`children` of `Text` must only be `string` types when `highlightWords` is defined'
+			);
+		}
+
+		content = createHighlighterText( {
+			autoEscape: highlightEscape,
+			children,
+			caseSensitive: highlightCaseSensitive,
+			searchWords: highlightWords,
+			sanitize: highlightSanitize,
+		} );
+	}
+
+	const cx = useCx();
+
+	const classes = useMemo( () => {
+		const sx: Record< string, SerializedStyles | null > = {};
+
+		const lineHeight = getLineHeight(
+			adjustLineHeightForInnerControls,
+			lineHeightProp
+		);
+
+		sx.Base = css( {
+			color,
+			display,
+			fontSize: getFontSize( size ),
+			fontWeight: weight,
+			lineHeight,
+			letterSpacing,
+			textAlign: align,
+		} );
+
+		sx.upperCase = css( { textTransform: 'uppercase' } );
+
+		sx.optimalTextColor = null;
+
+		if ( optimizeReadabilityFor ) {
+			const isOptimalTextColorDark =
+				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
+
+			sx.optimalTextColor = isOptimalTextColorDark
+				? css( { color: COLORS.gray[ 900 ] } )
+				: css( { color: COLORS.white } );
+		}
+
+		return cx(
+			styles.Text,
+			sx.Base,
+			sx.optimalTextColor,
+			isDestructive && styles.destructive,
+			!! isHighlighter && styles.highlighterText,
+			isBlock && styles.block,
+			isCaption && styles.muted,
+			variant && styles[ variant ],
+			upperCase && sx.upperCase,
+			className
+		);
+	}, [
+		adjustLineHeightForInnerControls,
+		align,
+		className,
+		color,
+		cx,
+		display,
+		isBlock,
+		isCaption,
+		isDestructive,
+		isHighlighter,
+		letterSpacing,
+		lineHeightProp,
+		optimizeReadabilityFor,
+		size,
+		upperCase,
+		variant,
+		weight,
+	] );
+
+	let finalEllipsizeMode: undefined | 'auto' | 'none';
+	if ( truncate === true ) {
+		finalEllipsizeMode = 'auto';
+	}
+	if ( truncate === false ) {
+		finalEllipsizeMode = 'none';
+	}
+
+	const finalComponentProps = {
+		...otherProps,
+		className: classes,
+		children,
+		ellipsizeMode: ellipsizeMode || finalEllipsizeMode,
+	};
+
+	const truncateProps = useTruncate( finalComponentProps );
+
+	/**
+	 * Enhance child `<Link />` components to inherit font size.
+	 */
+	if ( ! truncate && Array.isArray( children ) ) {
+		content = Children.map( children, ( child ) => {
+			if (
+				typeof child !== 'object' ||
+				child === null ||
+				! ( 'props' in child )
+			) {
+				return child;
+			}
+
+			const isLink = hasConnectNamespace( child, [ 'Link' ] );
+			if ( isLink ) {
+				return cloneElement( child, {
+					size: child.props.size || 'inherit',
+				} );
+			}
+
+			return child;
+		} );
+	}
+
+	return {
+		...truncateProps,
+		children: truncate ? truncateProps.children : content,
+	};
+}
diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.ts
similarity index 100%
rename from packages/components/src/text/index.js
rename to packages/components/src/text/index.ts
diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.js
deleted file mode 100644
index a1cdf917b98c9e..00000000000000
--- a/packages/components/src/text/stories/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Text } from '..';
-
-export default {
-	component: Text,
-	title: 'Components (Experimental)/Text',
-};
-
-export const _default = () => {
-	return <Text>Hello</Text>;
-};
-
-export const truncate = () => {
-	return (
-		<Text numberOfLines={ 2 } truncate>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-			facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
-			Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
-			Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-			facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
-			In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
-			arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
-			eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
-			ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
-			risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
-			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-			posuere cubilia curae; Vivamus nec pretium velit, sit amet
-			consectetur ante. Praesent porttitor ex eget fermentum mattis.
-		</Text>
-	);
-};
-
-export const highlight = () => {
-	return (
-		<Text highlightWords={ [ 'con' ] }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-			facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
-			Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
-			Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-			facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
-			In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
-			arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
-			eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
-			ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
-			risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
-			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-			posuere cubilia curae; Vivamus nec pretium velit, sit amet
-			consectetur ante. Praesent porttitor ex eget fermentum mattis.
-		</Text>
-	);
-};
diff --git a/packages/components/src/text/stories/index.story.tsx b/packages/components/src/text/stories/index.story.tsx
new file mode 100644
index 00000000000000..92a2c7eb9be3e3
--- /dev/null
+++ b/packages/components/src/text/stories/index.story.tsx
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Text } from '../component';
+
+const meta: Meta< typeof Text > = {
+	component: Text,
+	title: 'Components (Experimental)/Typography/Text',
+	id: 'components-experimental-text',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		size: { control: { type: 'text' } },
+		variant: {
+			options: [ undefined, 'muted' ],
+			control: { type: 'select' },
+		},
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Text > = ( props ) => {
+	return <Text { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
+};
+
+export const Truncate = Template.bind( {} );
+Truncate.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	numberOfLines: 2,
+	truncate: true,
+};
+
+export const Highlight = Template.bind( {} );
+Highlight.args = {
+	children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
+Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
+Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
+facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
+arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
+eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
+ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
+risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+posuere cubilia curae; Vivamus nec pretium velit, sit amet
+consectetur ante. Praesent porttitor ex eget fermentum mattis.`,
+	highlightWords: [ 'con' ],
+};
diff --git a/packages/components/src/text/styles.js b/packages/components/src/text/styles.js
deleted file mode 100644
index 171e34fab9f46f..00000000000000
--- a/packages/components/src/text/styles.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { COLORS, CONFIG } from '../utils';
-
-export const Text = css`
-	color: ${ COLORS.gray[ 900 ] };
-	line-height: ${ CONFIG.fontLineHeightBase };
-	margin: 0;
-`;
-
-export const block = css`
-	display: block;
-`;
-
-export const positive = css`
-	color: ${ COLORS.alert.green };
-`;
-
-export const destructive = css`
-	color: ${ COLORS.alert.red };
-`;
-
-export const muted = css`
-	color: ${ COLORS.gray[ 700 ] };
-`;
-
-export const highlighterText = css`
-	mark {
-		background: ${ COLORS.alert.yellow };
-		border-radius: 2px;
-		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
-			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
-	}
-`;
-
-export const upperCase = css`
-	text-transform: uppercase;
-`;
diff --git a/packages/components/src/text/styles.ts b/packages/components/src/text/styles.ts
new file mode 100644
index 00000000000000..e777ed4f0941de
--- /dev/null
+++ b/packages/components/src/text/styles.ts
@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+export const Text = css`
+	color: ${ COLORS.gray[ 900 ] };
+	line-height: ${ CONFIG.fontLineHeightBase };
+	margin: 0;
+	text-wrap: balance; /* Fallback for Safari. */
+	text-wrap: pretty;
+`;
+
+export const block = css`
+	display: block;
+`;
+
+export const positive = css`
+	color: ${ COLORS.alert.green };
+`;
+
+export const destructive = css`
+	color: ${ COLORS.alert.red };
+`;
+
+export const muted = css`
+	color: ${ COLORS.gray[ 700 ] };
+`;
+
+export const highlighterText = css`
+	mark {
+		background: ${ COLORS.alert.yellow };
+		border-radius: ${ CONFIG.radiusSmall };
+		box-shadow:
+			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
+			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
+	}
+`;
+
+export const upperCase = css`
+	text-transform: uppercase;
+`;
diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap
index f63684c25d8695..1b98c0853ac549 100644
--- a/packages/components/src/text/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap
@@ -5,13 +5,14 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
-@@ -3,7 +3,8 @@
+@@ -3,8 +3,9 @@
       "color": "#1e1e1e",
       "font-size": "calc((13 / 13) * 13px)",
       "font-weight": "normal",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
 +     "text-align": "center",
+      "text-wrap": "pretty",
     },
   ]
 `;
@@ -19,8 +20,10 @@ Snapshot Diff:
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
@@ -50,8 +53,10 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
 exports[`Text snapshot tests should render correctly 1`] = `
 .emotion-0 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
 }
diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
index ac7dc907211ea3..5fad5582f4d46e 100644
--- a/packages/components/src/text/test/index.tsx
+++ b/packages/components/src/text/test/index.tsx
@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { getFontSize } from '../../ui/utils/font-size';
+import { getFontSize } from '../../utils/font-size';
 import { COLORS } from '../../utils';
 import { Text } from '../';
 
@@ -104,7 +104,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: 'orange',
+			color: 'rgb(255, 165, 0)',
 		} );
 	} );
 
diff --git a/packages/components/src/text/types.ts b/packages/components/src/text/types.ts
index 05b1488cd8c6ff..0b373adf49a729 100644
--- a/packages/components/src/text/types.ts
+++ b/packages/components/src/text/types.ts
@@ -7,6 +7,7 @@ import type { TruncateProps } from '../truncate/types';
  * External dependencies
  */
 import type { CSSProperties } from 'react';
+import type { FindAllArgs } from 'highlight-words-core';
 
 export type TextSize =
 	| 'body'
@@ -28,12 +29,7 @@ export interface Props extends TruncateProps {
 	/**
 	 * Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`).
 	 */
-	adjustLineHeightForInnerControls?:
-		| boolean
-		| 'large'
-		| 'medium'
-		| 'small'
-		| 'xSmall';
+	adjustLineHeightForInnerControls?: 'large' | 'medium' | 'small' | 'xSmall';
 	/**
 	 * Adjusts the text color.
 	 */
@@ -50,18 +46,25 @@ export interface Props extends TruncateProps {
 	isDestructive?: boolean;
 	/**
 	 * Escape characters in `highlightWords` which are meaningful in regular expressions.
+	 *
+	 * @default false
 	 */
 	highlightEscape?: boolean;
 	/**
 	 * Determines if `highlightWords` should be case sensitive.
+	 *
+	 * @default false
 	 */
 	highlightCaseSensitive?: boolean;
 	/**
 	 * Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true.
 	 */
-	highlightSanitize?: import('highlight-words-core').FindAllArgs[ 'sanitize' ];
+	highlightSanitize?: FindAllArgs[ 'sanitize' ];
 	/**
-	 * Sets `Text` to have `display: block`.
+	 * Sets `Text` to have `display: block`. Note: text truncation only works
+	 * when `isBlock` is `false`.
+	 *
+	 * @default false
 	 */
 	isBlock?: boolean;
 	/**
@@ -77,11 +80,15 @@ export interface Props extends TruncateProps {
 	 */
 	size?: CSSProperties[ 'fontSize' ] | TextSize;
 	/**
-	 * Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+	 * Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways. Note: text truncation won't work if the `isBlock` property is set to `true`
+	 *
+	 * @default false
 	 */
 	truncate?: boolean;
 	/**
 	 * Uppercases the text content.
+	 *
+	 * @default false
 	 */
 	upperCase?: boolean;
 	/**
@@ -90,6 +97,8 @@ export interface Props extends TruncateProps {
 	variant?: TextVariant;
 	/**
 	 * Adjusts font-weight of the text.
+	 *
+	 * @default 'normal'
 	 */
 	weight?: CSSProperties[ 'fontWeight' ] | TextWeight;
 	/**
diff --git a/packages/components/src/text/utils.js b/packages/components/src/text/utils.js
deleted file mode 100644
index 2496c86cca25ae..00000000000000
--- a/packages/components/src/text/utils.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-import { findAll } from 'highlight-words-core';
-
-/**
- * WordPress dependencies
- */
-import { createElement } from '@wordpress/element';
-
-/**
- * Source:
- * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
- */
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @typedef Options
- * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
- * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
- * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
- * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
- * @property {string}                                                     children                  Children to highlight.
- * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
- * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
- * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
- * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
- * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
- * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
- */
-
-/**
- * Maps props to lowercase names.
- *
- * @template {Record<string, unknown>} T
- * @param {T} object Props to map.
- * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.
- */
-/* eslint-enable jsdoc/valid-types */
-const lowercaseProps = ( object ) => {
-	/** @type {any} */
-	const mapped = {};
-	for ( const key in object ) {
-		mapped[ key.toLowerCase() ] = object[ key ];
-	}
-	return mapped;
-};
-
-const memoizedLowercaseProps = memoize( lowercaseProps );
-
-/**
- *
- * @param {Options} options
- */
-export function createHighlighterText( {
-	activeClassName = '',
-	activeIndex = -1,
-	activeStyle,
-	autoEscape,
-	caseSensitive = false,
-	children,
-	findChunks,
-	highlightClassName = '',
-	highlightStyle = {},
-	highlightTag = 'mark',
-	sanitize,
-	searchWords = [],
-	unhighlightClassName = '',
-	unhighlightStyle,
-} ) {
-	if ( ! children ) return null;
-	if ( typeof children !== 'string' ) return children;
-
-	const textToHighlight = children;
-
-	const chunks = findAll( {
-		autoEscape,
-		caseSensitive,
-		findChunks,
-		sanitize,
-		searchWords,
-		textToHighlight,
-	} );
-	const HighlightTag = highlightTag;
-	let highlightIndex = -1;
-	let highlightClassNames = '';
-	let highlightStyles;
-
-	const textContent = chunks.map( ( chunk, index ) => {
-		const text = textToHighlight.substr(
-			chunk.start,
-			chunk.end - chunk.start
-		);
-
-		if ( chunk.highlight ) {
-			highlightIndex++;
-
-			let highlightClass;
-			if ( typeof highlightClassName === 'object' ) {
-				if ( ! caseSensitive ) {
-					highlightClassName =
-						memoizedLowercaseProps( highlightClassName );
-					highlightClass = highlightClassName[ text.toLowerCase() ];
-				} else {
-					highlightClass = highlightClassName[ text ];
-				}
-			} else {
-				highlightClass = highlightClassName;
-			}
-
-			const isActive = highlightIndex === +activeIndex;
-
-			highlightClassNames = `${ highlightClass } ${
-				isActive ? activeClassName : ''
-			}`;
-			highlightStyles =
-				isActive === true && activeStyle !== null
-					? Object.assign( {}, highlightStyle, activeStyle )
-					: highlightStyle;
-
-			/** @type {Record<string, any>} */
-			const props = {
-				children: text,
-				className: highlightClassNames,
-				key: index,
-				style: highlightStyles,
-			};
-
-			// Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
-			// Only pass through the highlightIndex attribute for custom components.
-			if ( typeof HighlightTag !== 'string' ) {
-				props.highlightIndex = highlightIndex;
-			}
-
-			return createElement( HighlightTag, props );
-		}
-		return createElement( 'span', {
-			children: text,
-			className: unhighlightClassName,
-			key: index,
-			style: unhighlightStyle,
-		} );
-	} );
-
-	return textContent;
-}
diff --git a/packages/components/src/text/utils.ts b/packages/components/src/text/utils.ts
new file mode 100644
index 00000000000000..bcf7bff9c36ab7
--- /dev/null
+++ b/packages/components/src/text/utils.ts
@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+import type { FindAllArgs } from 'highlight-words-core';
+import { findAll } from 'highlight-words-core';
+
+/**
+ * WordPress dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Source:
+ * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
+ */
+
+/**
+ * @typedef Options
+ * @property {string}                                                     [activeClassName='']      Classname for active highlighted areas.
+ * @property {number}                                                     [activeIndex=-1]          The index of the active highlighted area.
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle]             Styles to apply to the active highlighted area.
+ * @property {boolean}                                                    [autoEscape]              Whether to automatically escape text.
+ * @property {boolean}                                                    [caseSensitive=false]     Whether to highlight in a case-sensitive manner.
+ * @property {string}                                                     children                  Children to highlight.
+ * @property {import('highlight-words-core').FindAllArgs['findChunks']}   [findChunks]              Custom `findChunks` function to pass to `highlight-words-core`.
+ * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
+ * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
+ * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
+ * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
+ * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
+ * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.
+ */
+
+interface Options {
+	activeClassName?: string;
+	activeIndex?: number;
+	activeStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	autoEscape?: boolean;
+	caseSensitive?: boolean;
+	children: string;
+	findChunks?: FindAllArgs[ 'findChunks' ];
+	highlightClassName?: string | Record< string, unknown >;
+	highlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+	highlightTag?: keyof JSX.IntrinsicElements;
+	sanitize?: FindAllArgs[ 'sanitize' ];
+	searchWords?: string[];
+	unhighlightClassName?: string;
+	unhighlightStyle?: React.AllHTMLAttributes< HTMLDivElement >[ 'style' ];
+}
+
+/**
+ * Maps props to lowercase names.
+ *
+ * @param object Props to map.
+ * @return The mapped props.
+ */
+const lowercaseProps = < T extends Record< string, unknown > >( object: T ) => {
+	const mapped: Record< string, unknown > = {};
+	for ( const key in object ) {
+		mapped[ key.toLowerCase() ] = object[ key ];
+	}
+	return mapped as { [ K in keyof T as Lowercase< string & K > ]: T[ K ] };
+};
+
+const memoizedLowercaseProps = memoize( lowercaseProps );
+
+/**
+ * @param options
+ * @param options.activeClassName
+ * @param options.activeIndex
+ * @param options.activeStyle
+ * @param options.autoEscape
+ * @param options.caseSensitive
+ * @param options.children
+ * @param options.findChunks
+ * @param options.highlightClassName
+ * @param options.highlightStyle
+ * @param options.highlightTag
+ * @param options.sanitize
+ * @param options.searchWords
+ * @param options.unhighlightClassName
+ * @param options.unhighlightStyle
+ */
+export function createHighlighterText( {
+	activeClassName = '',
+	activeIndex = -1,
+	activeStyle,
+	autoEscape,
+	caseSensitive = false,
+	children,
+	findChunks,
+	highlightClassName = '',
+	highlightStyle = {},
+	highlightTag = 'mark',
+	sanitize,
+	searchWords = [],
+	unhighlightClassName = '',
+	unhighlightStyle,
+}: Options ) {
+	if ( ! children ) {
+		return null;
+	}
+	if ( typeof children !== 'string' ) {
+		return children;
+	}
+
+	const textToHighlight = children;
+
+	const chunks = findAll( {
+		autoEscape,
+		caseSensitive,
+		findChunks,
+		sanitize,
+		searchWords,
+		textToHighlight,
+	} );
+	const HighlightTag = highlightTag;
+	let highlightIndex = -1;
+	let highlightClassNames = '';
+	let highlightStyles;
+
+	const textContent = chunks.map( ( chunk, index ) => {
+		const text = textToHighlight.substr(
+			chunk.start,
+			chunk.end - chunk.start
+		);
+
+		if ( chunk.highlight ) {
+			highlightIndex++;
+
+			let highlightClass;
+			if ( typeof highlightClassName === 'object' ) {
+				if ( ! caseSensitive ) {
+					highlightClassName =
+						memoizedLowercaseProps( highlightClassName );
+					highlightClass = highlightClassName[ text.toLowerCase() ];
+				} else {
+					highlightClass = highlightClassName[ text ];
+				}
+			} else {
+				highlightClass = highlightClassName;
+			}
+
+			const isActive = highlightIndex === +activeIndex;
+
+			highlightClassNames = `${ highlightClass } ${
+				isActive ? activeClassName : ''
+			}`;
+			highlightStyles =
+				isActive === true && activeStyle !== null
+					? Object.assign( {}, highlightStyle, activeStyle )
+					: highlightStyle;
+
+			const props: Record< string, unknown > = {
+				children: text,
+				className: highlightClassNames,
+				key: index,
+				style: highlightStyles,
+			};
+
+			// Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
+			// Only pass through the highlightIndex attribute for custom components.
+			if ( typeof HighlightTag !== 'string' ) {
+				props.highlightIndex = highlightIndex;
+			}
+
+			return createElement( HighlightTag, props );
+		}
+		return createElement( 'span', {
+			children: text,
+			className: unhighlightClassName,
+			key: index,
+			style: unhighlightStyle,
+		} );
+	} );
+
+	return textContent;
+}
diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
index 1da2617ef60b5b..c812f6c308ea46 100644
--- a/packages/components/src/textarea-control/README.md
+++ b/packages/components/src/textarea-control/README.md
@@ -4,12 +4,6 @@ TextareaControls are TextControls that allow for multiple lines of text, and wra
 
 ![An empty TextareaControl, and a focused TextareaControl with some content entered.](https://wordpress.org/gutenberg/files/2019/01/TextareaControl.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -77,14 +71,15 @@ When text input isn’t accepted, an error message can display instructions on h
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { TextareaControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyTextareaControl = () => {
 	const [ text, setText ] = useState( '' );
 
 	return (
 		<TextareaControl
+		  __nextHasNoMarginBottom
 			label="Text"
 			help="Enter some text"
 			value={ text }
@@ -100,7 +95,7 @@ The set of props accepted by the component will be specified below.
 
 Props not included in this set will be applied to the textarea element.
 
-#### `help`: `string | WPElement`
+#### `help`: `string | Element`
 
 If this property is added, a help text will be generated using help property as the content.
 
@@ -137,6 +132,13 @@ The current value of the textarea.
 
 -   Required: Yes
 
+#### `__nextHasNoMarginBottom`: `Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   For a field where users only enter one line of text, use the `TextControl` component.
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 92374d67fd5af9..e7528510667b75 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import type { ChangeEvent } from 'react';
-
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,33 +10,11 @@ import { useInstanceId } from '@wordpress/compose';
 import BaseControl from '../base-control';
 import { StyledTextarea } from './styles/textarea-control-styles';
 import type { TextareaControlProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
-/**
- * TextareaControls are TextControls that allow for multiple lines of text, and
- * wrap overflow text onto a new line. They are a fixed height and scroll
- * vertically when the cursor reaches the bottom of the field.
- *
- * ```jsx
- * import { TextareaControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyTextareaControl = () => {
- *   const [ text, setText ] = useState( '' );
- *
- *   return (
- *     <TextareaControl
- *       label="Text"
- *       help="Enter some text"
- *       value={ text }
- *       onChange={ ( value ) => setText( value ) }
- *     />
- *   );
- * };
- * ```
- */
-export function TextareaControl(
-	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >
+function UnforwardedTextareaControl(
+	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >,
+	ref: React.ForwardedRef< HTMLTextAreaElement >
 ) {
 	const {
 		__nextHasNoMarginBottom,
@@ -55,12 +29,13 @@ export function TextareaControl(
 	} = props;
 	const instanceId = useInstanceId( TextareaControl );
 	const id = `inspector-textarea-control-${ instanceId }`;
-	const onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) =>
+	const onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>
 		onChange( event.target.value );
 
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="TextareaControl"
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
@@ -74,10 +49,37 @@ export function TextareaControl(
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
 				value={ value }
+				ref={ ref }
 				{ ...additionalProps }
 			/>
 		</BaseControl>
 	);
 }
 
+/**
+ * TextareaControls are TextControls that allow for multiple lines of text, and
+ * wrap overflow text onto a new line. They are a fixed height and scroll
+ * vertically when the cursor reaches the bottom of the field.
+ *
+ * ```jsx
+ * import { TextareaControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTextareaControl = () => {
+ *   const [ text, setText ] = useState( '' );
+ *
+ *   return (
+ *     <TextareaControl
+ *       __nextHasNoMarginBottom
+ *       label="Text"
+ *       help="Enter some text"
+ *       value={ text }
+ *       onChange={ ( value ) => setText( value ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const TextareaControl = forwardRef( UnforwardedTextareaControl );
+
 export default TextareaControl;
diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..3160e0bfe68f31
--- /dev/null
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextareaControl from '..';
+
+const meta: Meta< typeof TextareaControl > = {
+	component: TextareaControl,
+	title: 'Components/Selection & Input/Common/TextareaControl',
+	id: 'components-textareacontrol',
+	argTypes: {
+		onChange: { action: 'onChange' },
+		label: { control: { type: 'text' } },
+		help: { control: { type: 'text' } },
+		value: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof TextareaControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<TextareaControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Text',
+	help: 'Enter some text',
+	placeholder: 'Placeholder',
+};
diff --git a/packages/components/src/textarea-control/stories/index.tsx b/packages/components/src/textarea-control/stories/index.tsx
deleted file mode 100644
index 4d6a5f9ceaacbf..00000000000000
--- a/packages/components/src/textarea-control/stories/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TextareaControl from '..';
-
-const meta: ComponentMeta< typeof TextareaControl > = {
-	component: TextareaControl,
-	title: 'Components/TextareaControl',
-	argTypes: {
-		onChange: { action: 'onChange' },
-		label: { control: { type: 'text' } },
-		help: { control: { type: 'text' } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof TextareaControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState( '' );
-
-	return (
-		<TextareaControl
-			{ ...args }
-			value={ value }
-			onChange={ ( v ) => {
-				setValue( v );
-				onChange( v );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
-	{}
-);
-Default.args = {
-	label: 'Text',
-	help: 'Enter some text',
-};
diff --git a/packages/components/src/textarea-control/styles/textarea-control-styles.ts b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
index 046e17816eff24..022ce3560ea3a5 100644
--- a/packages/components/src/textarea-control/styles/textarea-control-styles.ts
+++ b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
@@ -2,13 +2,86 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { inputControl } from '../../utils/input';
+import { font } from '../../utils/font';
+import { COLORS } from '../../utils/colors-values';
+import { CONFIG } from '../../utils';
+import { breakpoint } from '../../utils/breakpoint';
+
+const inputStyleNeutral = css`
+	box-shadow: 0 0 0 transparent;
+	border-radius: ${ CONFIG.radiusSmall };
+	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+
+	@media not ( prefers-reduced-motion ) {
+		transition: box-shadow 0.1s linear;
+	}
+`;
+
+const inputStyleFocus = css`
+	border-color: ${ COLORS.theme.accent };
+	box-shadow: 0 0 0
+		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
+		${ COLORS.theme.accent };
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+`;
 
 export const StyledTextarea = styled.textarea`
 	width: 100%;
-	${ inputControl }
+	display: block;
+	font-family: ${ font( 'default.fontFamily' ) };
+	line-height: 20px;
+
+	// Vertical padding is to match the standard 40px control height when rows=1,
+	// in conjunction with the 20px line-height.
+	// "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width.
+	padding: 9px 11px;
+
+	${ inputStyleNeutral };
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: ${ font( 'mobileTextMinFontSize' ) };
+
+	${ breakpoint( 'small' ) } {
+		font-size: ${ font( 'default.fontSize' ) };
+	}
+
+	&:focus {
+		${ inputStyleFocus }
+	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	&:-ms-input-placeholder {
+		color: ${ COLORS.ui.darkGrayPlaceholder };
+	}
+
+	.is-dark-theme & {
+		&::-webkit-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.lightGrayPlaceholder };
+		}
+	}
 `;
diff --git a/packages/components/src/theme/README.md b/packages/components/src/theme/README.md
index a63f8a85db1a20..ee0513988b9c15 100644
--- a/packages/components/src/theme/README.md
+++ b/packages/components/src/theme/README.md
@@ -8,27 +8,40 @@ This feature is still experimental. “Experimental” means this is an early im
 
 Multiple `Theme` components can be nested in order to override specific theme variables.
 
-## Usage
-
-```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>
-	);
-};
-```
-
 ## Props
 
 ### `accent`: `string`
 
-Used to set the accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color. No all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+The accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color.
+
+Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+
+-   Required: No
+
+### `background`: `string`
+
+The background color.  If a component explicitly has a background, it will be this color. Otherwise, this color will simply be used to determine what the foreground colors should be. The actual background color will need to be set on the component's container element. If a background color is not defined, the default fallback value is #fff.
+
+Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
 
 -   Required: No
+
+## Writing themeable components
+
+If you would like your custom component to be themeable as a child of the `Theme` component, it should use these color variables. (This is a work in progress, and this list of variables may change. We do not recommend using these variables in production at this time.)
+
+-  `--wp-components-color-accent`: The accent color.
+-  `--wp-components-color-accent-darker-10`: A slightly darker version of the accent color.
+-  `--wp-components-color-accent-darker-20`: An even darker version of the accent color.
+-  `--wp-components-color-accent-inverted`: The foreground color when the accent color is the background, for example when placing text on the accent color.
+-  `--wp-components-color-background`: The background color.
+-  `--wp-components-color-foreground`: The foreground color, for example text.
+-  `--wp-components-color-foreground-inverted`: The foreground color when the foreground color is the background, for example when placing text on the foreground color.
+-  Grayscale:
+   -  `--wp-components-color-gray-100`: Used for light gray backgrounds.
+   -  `--wp-components-color-gray-200`: Used sparingly for light borders.
+   -	`--wp-components-color-gray-300`: Used for most borders.
+   -	`--wp-components-color-gray-400`
+   -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
+   -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
+   -	`--wp-components-color-gray-800`
diff --git a/packages/components/src/theme/color-algorithms.ts b/packages/components/src/theme/color-algorithms.ts
new file mode 100644
index 00000000000000..bed8353c16b8b4
--- /dev/null
+++ b/packages/components/src/theme/color-algorithms.ts
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * WordPress dependencies
+ */
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import type { ThemeInputValues, ThemeOutputValues } from './types';
+import { COLORS } from '../utils';
+
+extend( [ namesPlugin, a11yPlugin ] );
+
+export function generateThemeVariables(
+	inputs: ThemeInputValues
+): ThemeOutputValues {
+	validateInputs( inputs );
+
+	const generatedColors = {
+		...generateAccentDependentColors( inputs.accent ),
+		...generateBackgroundDependentColors( inputs.background ),
+	};
+
+	warnContrastIssues( checkContrasts( inputs, generatedColors ) );
+
+	return { colors: generatedColors };
+}
+
+function validateInputs( inputs: ThemeInputValues ) {
+	for ( const [ key, value ] of Object.entries( inputs ) ) {
+		if ( typeof value !== 'undefined' && ! colord( value ).isValid() ) {
+			warning(
+				`wp.components.Theme: "${ value }" is not a valid color value for the '${ key }' prop.`
+			);
+		}
+	}
+}
+
+export function checkContrasts(
+	inputs: ThemeInputValues,
+	outputs: ThemeOutputValues[ 'colors' ]
+) {
+	const background = inputs.background || COLORS.white;
+	const accent = inputs.accent || '#3858e9';
+	const foreground = outputs.foreground || COLORS.gray[ 900 ];
+	const gray = outputs.gray || COLORS.gray;
+
+	return {
+		accent: colord( background ).isReadable( accent )
+			? undefined
+			: `The background color ("${ background }") does not have sufficient contrast against the accent color ("${ accent }").`,
+		foreground: colord( background ).isReadable( foreground )
+			? undefined
+			: `The background color provided ("${ background }") does not have sufficient contrast against the standard foreground colors.`,
+		grays:
+			colord( background ).contrast( gray[ 600 ] ) >= 3 &&
+			colord( background ).contrast( gray[ 700 ] ) >= 4.5
+				? undefined
+				: `The background color provided ("${ background }") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`,
+	};
+}
+
+function warnContrastIssues( issues: ReturnType< typeof checkContrasts > ) {
+	for ( const error of Object.values( issues ) ) {
+		if ( error ) {
+			warning( 'wp.components.Theme: ' + error );
+		}
+	}
+}
+
+function generateAccentDependentColors( accent?: string ) {
+	if ( ! accent ) {
+		return {};
+	}
+
+	return {
+		accent,
+		accentDarker10: colord( accent ).darken( 0.1 ).toHex(),
+		accentDarker20: colord( accent ).darken( 0.2 ).toHex(),
+		accentInverted: getForegroundForColor( accent ),
+	};
+}
+
+function generateBackgroundDependentColors( background?: string ) {
+	if ( ! background ) {
+		return {};
+	}
+
+	const foreground = getForegroundForColor( background );
+
+	return {
+		background,
+		foreground,
+		foregroundInverted: getForegroundForColor( foreground ),
+		gray: generateShades( background, foreground ),
+	};
+}
+
+function getForegroundForColor( color: string ) {
+	return colord( color ).isDark() ? COLORS.white : COLORS.gray[ 900 ];
+}
+
+export function generateShades( background: string, foreground: string ) {
+	// How much darkness you need to add to #fff to get the COLORS.gray[n] color
+	const SHADES = {
+		100: 0.06,
+		200: 0.121,
+		300: 0.132,
+		400: 0.2,
+		600: 0.42,
+		700: 0.543,
+		800: 0.821,
+	};
+
+	// Darkness of COLORS.gray[ 900 ], relative to #fff
+	const limit = 0.884;
+
+	const direction = colord( background ).isDark() ? 'lighten' : 'darken';
+
+	// Lightness delta between the background and foreground colors
+	const range =
+		Math.abs(
+			colord( background ).toHsl().l - colord( foreground ).toHsl().l
+		) / 100;
+
+	const result: Record< number, string > = {};
+
+	Object.entries( SHADES ).forEach( ( [ key, value ] ) => {
+		result[ parseInt( key ) ] = colord( background )
+			[ direction ]( ( value / limit ) * range )
+			.toHex();
+	} );
+
+	return result as NonNullable< ThemeOutputValues[ 'colors' ][ 'gray' ] >;
+}
diff --git a/packages/components/src/theme/index.tsx b/packages/components/src/theme/index.tsx
index 7504c7d5362909..fbb92f59278d1b 100644
--- a/packages/components/src/theme/index.tsx
+++ b/packages/components/src/theme/index.tsx
@@ -1,18 +1,16 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { colord, extend } from 'colord';
-import a11yPlugin from 'colord/plugins/a11y';
-import namesPlugin from 'colord/plugins/names';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { ThemeProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { Wrapper } from './styles';
-
-extend( [ namesPlugin, a11yPlugin ] );
+import type { WordPressComponentProps } from '../context';
+import { colorVariables, Wrapper } from './styles';
+import { generateThemeVariables } from './color-algorithms';
+import { useCx } from '../utils';
 
 /**
  * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
@@ -20,10 +18,7 @@ extend( [ namesPlugin, a11yPlugin ] );
  * Multiple `Theme` components can be nested in order to override specific theme variables.
  *
  *
- * @example
  * ```jsx
- * import { __experimentalTheme as Theme } from '@wordpress/components';
- *
  * const Example = () => {
  *   return (
  *     <Theme accent="red">
@@ -36,16 +31,25 @@ extend( [ namesPlugin, a11yPlugin ] );
  * };
  * ```
  */
-function Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) {
-	const { accent } = props;
-	if ( accent && ! colord( accent ).isValid() ) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`wp.components.Theme: "${ accent }" is not a valid color value for the 'accent' prop.`
-		);
-	}
+function Theme( {
+	accent,
+	background,
+	className,
+	...props
+}: WordPressComponentProps< ThemeProps, 'div', true > ) {
+	const cx = useCx();
+	const classes = useMemo(
+		() =>
+			cx(
+				...colorVariables(
+					generateThemeVariables( { accent, background } )
+				),
+				className
+			),
+		[ accent, background, className, cx ]
+	);
 
-	return <Wrapper { ...props } />;
+	return <Wrapper className={ classes } { ...props } />;
 }
 
 export default Theme;
diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx
new file mode 100644
index 00000000000000..67eec72533ff3f
--- /dev/null
+++ b/packages/components/src/theme/stories/index.story.tsx
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Theme from '../index';
+import Button from '../../button';
+import { generateThemeVariables, checkContrasts } from '../color-algorithms';
+import { HStack } from '../../h-stack';
+
+const meta: Meta< typeof Theme > = {
+	component: Theme,
+	title: 'Components/Utilities/Theme',
+	id: 'components-theme',
+	argTypes: {
+		accent: { control: { type: 'color' } },
+		background: { control: { type: 'color' } },
+	},
+	tags: [ 'status-private' ],
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Theme > = ( args ) => (
+	<Theme { ...args }>
+		<Button variant="primary">Hello</Button>
+	</Theme>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {};
+
+export const Nested: StoryFn< typeof Theme > = ( args ) => (
+	<Theme accent="tomato">
+		<Button variant="primary">Outer theme (hardcoded)</Button>
+
+		<Theme { ...args }>
+			<Button variant="primary">
+				Inner theme (set via Storybook controls)
+			</Button>
+		</Theme>
+	</Theme>
+);
+Nested.args = {
+	accent: 'blue',
+};
+
+/**
+ * The rest of the required colors are generated based on the given accent and background colors.
+ */
+export const ColorScheme: StoryFn< typeof Theme > = ( {
+	accent,
+	background,
+} ) => {
+	const { colors } = generateThemeVariables( { accent, background } );
+	const { gray, ...otherColors } = colors;
+	/* eslint-disable @typescript-eslint/no-unused-vars */
+	const contrastIssues = Object.entries(
+		checkContrasts( { accent, background }, colors )
+	).filter( ( [ _, error ] ) => !! error );
+	/* eslint-enable @typescript-eslint/no-unused-vars */
+
+	const Chip = ( { color, name }: { color: string; name: string } ) => (
+		<HStack justify="flex-start">
+			<div
+				style={ {
+					backgroundColor: color,
+					height: '1.25em',
+					width: 40,
+				} }
+			/>
+			<div style={ { fontSize: 14 } }>{ name }</div>
+		</HStack>
+	);
+
+	return (
+		<>
+			{ Object.entries( otherColors ).map( ( [ key, value ] ) => (
+				<Chip color={ value } name={ key } key={ key } />
+			) ) }
+			{ Object.entries( gray as NonNullable< typeof gray > ).map(
+				( [ key, value ] ) => (
+					<Chip
+						color={ value }
+						name={ `gray ${ key }` }
+						key={ key }
+					/>
+				)
+			) }
+			{ !! contrastIssues.length && (
+				<>
+					<h2>Contrast issues</h2>
+					<ul>
+						{ contrastIssues.map( ( [ key, error ] ) => (
+							<li key={ key }>{ error }</li>
+						) ) }
+					</ul>
+				</>
+			) }
+		</>
+	);
+};
+ColorScheme.args = {
+	accent: '#3858e9',
+	background: '#fff',
+};
+ColorScheme.argTypes = {
+	children: { table: { disable: true } },
+};
+ColorScheme.parameters = {
+	docs: { canvas: { sourceState: 'hidden' } },
+};
diff --git a/packages/components/src/theme/stories/index.tsx b/packages/components/src/theme/stories/index.tsx
deleted file mode 100644
index 740927be8b00cd..00000000000000
--- a/packages/components/src/theme/stories/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import Theme from '../index';
-import Button from '../../button';
-
-const meta: ComponentMeta< typeof Theme > = {
-	component: Theme,
-	title: 'Components (Experimental)/Theme',
-	argTypes: {
-		accent: { control: { type: 'color' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Theme > = ( args ) => (
-	<Theme { ...args }>
-		<Button variant="primary">Hello</Button>
-	</Theme>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {};
-
-export const Nested: ComponentStory< typeof Theme > = ( args ) => (
-	<Theme accent="tomato">
-		<Button variant="primary">Outer theme (hardcoded)</Button>
-
-		<Theme { ...args }>
-			<Button variant="primary">
-				Inner theme (set via Storybook controls)
-			</Button>
-		</Theme>
-	</Theme>
-);
-Nested.args = {
-	accent: 'blue',
-};
diff --git a/packages/components/src/theme/styles.ts b/packages/components/src/theme/styles.ts
index 770632e0fc9346..948c2d586649fb 100644
--- a/packages/components/src/theme/styles.ts
+++ b/packages/components/src/theme/styles.ts
@@ -1,28 +1,35 @@
 /**
  * External dependencies
  */
-import { colord } from 'colord';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import type { ThemeProps } from './types';
+import type { ThemeOutputValues } from './types';
 
-const accentColor = ( { accent }: ThemeProps ) =>
-	accent
-		? css`
-				--wp-components-color-accent: ${ accent };
-				--wp-components-color-accent-darker-10: ${ colord( accent )
-					.darken( 0.1 )
-					.toHex() };
-				--wp-components-color-accent-darker-20: ${ colord( accent )
-					.darken( 0.2 )
-					.toHex() };
-		  `
-		: undefined;
+export const colorVariables = ( { colors }: ThemeOutputValues ) => {
+	const shades = Object.entries( colors.gray || {} )
+		.map( ( [ k, v ] ) => `--wp-components-color-gray-${ k }: ${ v };` )
+		.join( '' );
 
-export const Wrapper = styled.div< ThemeProps >`
-	${ accentColor }
+	return [
+		css`
+			--wp-components-color-accent: ${ colors.accent };
+			--wp-components-color-accent-darker-10: ${ colors.accentDarker10 };
+			--wp-components-color-accent-darker-20: ${ colors.accentDarker20 };
+			--wp-components-color-accent-inverted: ${ colors.accentInverted };
+
+			--wp-components-color-background: ${ colors.background };
+			--wp-components-color-foreground: ${ colors.foreground };
+			--wp-components-color-foreground-inverted: ${ colors.foregroundInverted };
+
+			${ shades }
+		`,
+	];
+};
+
+export const Wrapper = styled.div`
+	color: var( --wp-components-color-foreground, currentColor );
 `;
diff --git a/packages/components/src/theme/test/color-algorithms.ts b/packages/components/src/theme/test/color-algorithms.ts
new file mode 100644
index 00000000000000..ff04c0b9511bf2
--- /dev/null
+++ b/packages/components/src/theme/test/color-algorithms.ts
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../../utils';
+
+/**
+ * Internal dependencies
+ */
+import { generateShades, generateThemeVariables } from '../color-algorithms';
+
+describe( 'Theme color algorithms', () => {
+	describe( 'generateThemeVariables', () => {
+		it( 'should allow explicitly undefined values', () => {
+			generateThemeVariables( {
+				accent: undefined,
+				background: undefined,
+			} );
+			expect( console ).not.toHaveWarned();
+		} );
+
+		it( 'should warn if invalid colors are passed', () => {
+			generateThemeVariables( { accent: 'var(--invalid)' } );
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'should warn if standard foreground colors are not readable against background', () => {
+			generateThemeVariables( { background: '#777' } );
+			expect( console ).toHaveWarnedWith(
+				'wp.components.Theme: The background color provided ("#777") does not have sufficient contrast against the standard foreground colors.'
+			);
+		} );
+
+		it( 'should warn if accent color is not readable against background', () => {
+			generateThemeVariables( { background: '#fefefe' } );
+			expect( console ).not.toHaveWarned();
+
+			generateThemeVariables( {
+				accent: '#000',
+				background: '#fff',
+			} );
+			expect( console ).not.toHaveWarned();
+
+			generateThemeVariables( {
+				accent: '#111',
+				background: '#000',
+			} );
+			expect( console ).toHaveWarnedWith(
+				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
+			);
+
+			generateThemeVariables( { background: '#1a1a1a' } );
+			expect( console ).toHaveWarnedWith(
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
+			);
+		} );
+
+		it( 'should warn if a readable grayscale cannot be generated', () => {
+			generateThemeVariables( { background: '#ddd' } );
+			expect( console ).toHaveWarnedWith(
+				'wp.components.Theme: The background color provided ("#ddd") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.'
+			);
+		} );
+	} );
+
+	describe( 'generateShades', () => {
+		it( 'should generate the default WP shades when the default WP background/foreground colors are given', () => {
+			const shades = generateShades( '#fff', '#1e1e1e' );
+
+			Object.entries( shades ).forEach( ( [ k, color ] ) => {
+				const key = parseInt( k, 10 ) as keyof typeof shades;
+				const normalizedExpectedColor = colord(
+					COLORS.gray[ key ]
+				).toHex();
+
+				expect( color ).toBe( normalizedExpectedColor );
+			} );
+		} );
+
+		it.each( [
+			[ '#000', '#fff' ], // wide delta
+			[ '#fff', '#000' ], // flipped
+			[ '#eee', '#fff' ], // narrow delta
+		] )( 'should generate unique shades (bg: %s, fg: %s)', ( bg, fg ) => {
+			const shades = generateShades( bg, fg );
+
+			// The darkest and lightest shades should be different from the fg/bg colors
+			expect( colord( shades[ 100 ] ).isEqual( bg ) ).toBe( false );
+			expect( colord( shades[ 800 ] ).isEqual( fg ) ).toBe( false );
+
+			// The shades should be unique
+			const shadeValues = Object.values( shades );
+			expect( shadeValues ).toHaveLength( new Set( shadeValues ).size );
+		} );
+	} );
+} );
diff --git a/packages/components/src/theme/test/index.tsx b/packages/components/src/theme/test/index.tsx
index a3e3137f0d5b7e..1b32fa1dfa2d66 100644
--- a/packages/components/src/theme/test/index.tsx
+++ b/packages/components/src/theme/test/index.tsx
@@ -26,7 +26,7 @@ const MyThemableComponent = ( props: MyThemableComponentProps ) => {
 
 describe( 'Theme', () => {
 	describe( 'accent color', () => {
-		it( 'it does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
+		it( 'does not define the accent color (and its variations) as a CSS variable when the `accent` prop is undefined', () => {
 			render(
 				<Theme data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -37,26 +37,19 @@ describe( 'Theme', () => {
 				screen.getByTestId( 'theme' )
 			);
 
-			expect(
-				innerElementStyles.getPropertyValue(
-					'--wp-components-color-accent'
-				)
-			).toBe( '' );
-
-			expect(
-				innerElementStyles.getPropertyValue(
-					'--wp-components-color-accent-darker-10'
-				)
-			).toBe( '' );
-
-			expect(
-				innerElementStyles.getPropertyValue(
-					'--wp-components-color-accent-darker-20'
-				)
-			).toBe( '' );
+			[
+				'--wp-components-color-accent',
+				'--wp-components-color-accent-darker-10',
+				'--wp-components-color-accent-darker-20',
+				'--wp-components-color-accent-inverted',
+			].forEach( ( cssVariable ) => {
+				expect(
+					innerElementStyles.getPropertyValue( cssVariable )
+				).toBe( '' );
+			} );
 		} );
 
-		it( 'it defines the accent color (and its variations) as a CSS variable', () => {
+		it( 'defines the accent color (and its variations) as a CSS variable', () => {
 			render(
 				<Theme accent="#123abc" data-testid="theme">
 					<MyThemableComponent>Inner</MyThemableComponent>
@@ -67,10 +60,61 @@ describe( 'Theme', () => {
 				'--wp-components-color-accent': '#123abc',
 				'--wp-components-color-accent-darker-10': '#0e2c8d',
 				'--wp-components-color-accent-darker-20': '#091d5f',
+				'--wp-components-color-accent-inverted': '#fff',
+			} );
+		} );
+	} );
+
+	describe( 'background color', () => {
+		it( 'does not define the background color (and its dependent colors) as a CSS variable when the `background` prop is undefined', () => {
+			render(
+				<Theme data-testid="theme">
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			const innerElementStyles = window.getComputedStyle(
+				screen.getByTestId( 'theme' )
+			);
+
+			[
+				'--wp-components-color-background',
+				'--wp-components-color-foreground',
+				'--wp-components-color-foreground-inverted',
+				...[ '100', '200', '300', '400', '600', '700', '800' ].map(
+					( shade ) => `--wp-components-color-gray-${ shade }`
+				),
+			].forEach( ( cssVariable ) => {
+				expect(
+					innerElementStyles.getPropertyValue( cssVariable )
+				).toBe( '' );
+			} );
+		} );
+
+		it( 'defines the background color (and its dependent colors) as a CSS variable', () => {
+			render(
+				<Theme background="#ffffff" data-testid="theme">
+					<MyThemableComponent>Inner</MyThemableComponent>
+				</Theme>
+			);
+
+			expect( screen.getByTestId( 'theme' ) ).toHaveStyle( {
+				'--wp-components-color-background': '#ffffff',
+				'--wp-components-color-foreground': '#1e1e1e',
+				'--wp-components-color-foreground-inverted': '#fff',
+				'--wp-components-color-gray-100': '#f0f0f0',
+				'--wp-components-color-gray-200': '#e0e0e0',
+				'--wp-components-color-gray-300': '#dddddd',
+				'--wp-components-color-gray-400': '#cccccc',
+				'--wp-components-color-gray-600': '#949494',
+				'--wp-components-color-gray-700': '#757575',
+				'--wp-components-color-gray-800': '#2f2f2f',
 			} );
 		} );
+	} );
 
-		describe( 'unsupported values', () => {
+	describe( 'unsupported values', () => {
+		describe.each( [ 'accent', 'background' ] )( '%s', ( propName ) => {
 			it.each( [
 				// Keywords
 				'currentcolor',
@@ -81,9 +125,8 @@ describe( 'Theme', () => {
 				'unset',
 				// CSS Custom properties
 				'var( --my-variable )',
-			] )( 'should warn when the value is "%s"', ( accentValue ) => {
-				render( <Theme accent={ accentValue } /> );
-
+			] )( 'should warn when the value is "%s"', ( value ) => {
+				render( <Theme { ...{ [ propName ]: value } } /> );
 				expect( console ).toHaveWarned();
 			} );
 		} );
diff --git a/packages/components/src/theme/types.ts b/packages/components/src/theme/types.ts
index d031bb0fff3496..4e148af4864e47 100644
--- a/packages/components/src/theme/types.ts
+++ b/packages/components/src/theme/types.ts
@@ -3,17 +3,57 @@
  */
 import type { ReactNode } from 'react';
 
-export type ThemeProps = {
+export type ThemeInputValues = {
 	/**
-	 * Used to set the accent color (used by components as the primary color).
+	 * The accent color (used by components as the primary color).
 	 *
 	 * If an accent color is not defined, the default fallback value is the original
-	 * WP Admin main theme color. No all valid CSS color syntaxes are supported —
+	 * WP Admin main theme color. Not all valid CSS color syntaxes are supported —
 	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
 	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
 	 * `var(--my-custom-property)`) are _not_ supported values for this property.
 	 */
 	accent?: string;
+	/**
+	 * The background color.
+	 *
+	 * If a component explicitly has a background, it will be this color.
+	 * Otherwise, this color will simply be used to determine what the foreground colors should be.
+	 * The actual background color will need to be set on the component's container element.
+	 *
+	 * If a background color is not defined, the default fallback value is #fff.
+	 * Not all valid CSS color syntaxes are supported —
+	 * in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`,
+	 * `'revert'`, `'unset'`...) and CSS custom properties (e.g.
+	 * `var(--my-custom-property)`) are _not_ supported values for this property.
+	 */
+	background?: string;
+};
+
+export type ThemeOutputValues = {
+	colors: Partial< {
+		accent: string;
+		accentDarker10: string;
+		accentDarker20: string;
+		/** Foreground color to use when accent color is the background. */
+		accentInverted: string;
+		background: string;
+		foreground: string;
+		/** Foreground color to use when foreground color is the background. */
+		foregroundInverted: string;
+		gray: {
+			100: string;
+			200: string;
+			300: string;
+			400: string;
+			600: string;
+			700: string;
+			800: string;
+		};
+	} >;
+};
+
+export type ThemeProps = ThemeInputValues & {
 	/**
 	 * The children elements.
 	 */
diff --git a/packages/components/src/tip/stories/index.story.tsx b/packages/components/src/tip/stories/index.story.tsx
new file mode 100644
index 00000000000000..3026f2a58fae73
--- /dev/null
+++ b/packages/components/src/tip/stories/index.story.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Tip from '..';
+
+const meta: Meta< typeof Tip > = {
+	component: Tip,
+	title: 'Components/Feedback/Tip',
+	id: 'components-tip',
+	argTypes: {
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Tip > = ( args ) => {
+	return <Tip { ...args } />;
+};
+
+export const Default: StoryFn< typeof Tip > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};
diff --git a/packages/components/src/tip/stories/index.tsx b/packages/components/src/tip/stories/index.tsx
deleted file mode 100644
index 4a251a34b20465..00000000000000
--- a/packages/components/src/tip/stories/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import Tip from '..';
-
-const meta: ComponentMeta< typeof Tip > = {
-	component: Tip,
-	title: 'Components/Tip',
-	argTypes: {
-		children: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof Tip > = ( args ) => {
-	return <Tip { ...args } />;
-};
-
-export const Default: ComponentStory< typeof Tip > = Template.bind( {} );
-Default.args = {
-	children: 'An example tip',
-};
diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index d22c99a414d165..cf480360265ed4 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -7,14 +7,15 @@ ToggleControl is used to generate a toggle user interface.
 Render a user interface to change fixed background setting.
 
 ```jsx
+import { useState } from 'react';
 import { ToggleControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyToggleControl = () => {
 	const [ hasFixedBackground, setHasFixedBackground ] = useState( false );
 
 	return (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			label="Fixed Background"
 			help={
 				hasFixedBackground
@@ -22,8 +23,8 @@ const MyToggleControl = () => {
 					: 'No fixed background.'
 			}
 			checked={ hasFixedBackground }
-			onChange={ () => {
-				setHasFixedBackground( ( state ) => ! state );
+			onChange={ (newValue) => {
+				setHasFixedBackground( newValue );
 			} }
 		/>
 	);
@@ -47,7 +48,7 @@ If this property is added, a help text will be generated using help property as
 For controlled components the `help` prop can also be a function which will return a help text
 dynamically depending on the boolean `checked` parameter.
 
--   Type: `String|WPElement|Function`
+-   Type: `String|Element|Function`
 -   Required: No
 
 ### checked
@@ -78,3 +79,11 @@ The class that will be added with `components-base-control` and `components-togg
 
 -		Type: `String`
 -		Required: No
+
+### `__nextHasNoMarginBottom`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index 4dfcda30e7cab4..d2ee234a9695f8 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -1,54 +1,41 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ForwardedRef } from 'react';
 import { css } from '@emotion/react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { FlexBlock } from '../flex';
 import FormToggle from '../form-toggle';
 import BaseControl from '../base-control';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { ToggleControlProps } from './types';
 import { HStack } from '../h-stack';
 import { useCx } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
-/**
- * ToggleControl is used to generate a toggle user interface.
- *
- * ```jsx
- * import { ToggleControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyToggleControl = () => {
- *   const [ value, setValue ] = useState( false );
- *
- *   return (
- *     <ToggleControl
- *       label="Fixed Background"
- *       checked={ value }
- *       onChange={ () => setValue( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function ToggleControl( {
-	__nextHasNoMarginBottom,
-	label,
-	checked,
-	help,
-	className,
-	onChange,
-	disabled,
-}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {
+function UnforwardedToggleControl(
+	{
+		__nextHasNoMarginBottom,
+		label,
+		checked,
+		help,
+		className,
+		onChange,
+		disabled,
+	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
 	function onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {
 		onChange( event.target.checked );
 	}
@@ -62,6 +49,14 @@ export function ToggleControl( {
 		! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )
 	);
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated( 'Bottom margin styles for wp.components.ToggleControl', {
+			since: '6.7',
+			version: '7.0',
+			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	let describedBy, helpLabel;
 	if ( help ) {
 		if ( typeof help === 'function' ) {
@@ -82,27 +77,60 @@ export function ToggleControl( {
 	return (
 		<BaseControl
 			id={ id }
-			help={ helpLabel }
+			help={
+				helpLabel && (
+					<span className="components-toggle-control__help">
+						{ helpLabel }
+					</span>
+				)
+			}
 			className={ classes }
 			__nextHasNoMarginBottom
 		>
-			<HStack justify="flex-start" spacing={ 3 }>
+			<HStack justify="flex-start" spacing={ 2 }>
 				<FormToggle
 					id={ id }
 					checked={ checked }
 					onChange={ onChangeToggle }
 					aria-describedby={ describedBy }
 					disabled={ disabled }
+					ref={ ref }
 				/>
-				<label
+				<FlexBlock
+					as="label"
 					htmlFor={ id }
-					className="components-toggle-control__label"
+					className={ clsx( 'components-toggle-control__label', {
+						'is-disabled': disabled,
+					} ) }
 				>
 					{ label }
-				</label>
+				</FlexBlock>
 			</HStack>
 		</BaseControl>
 	);
 }
 
+/**
+ * ToggleControl is used to generate a toggle user interface.
+ *
+ * ```jsx
+ * import { ToggleControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyToggleControl = () => {
+ *   const [ value, setValue ] = useState( false );
+ *
+ *   return (
+ *     <ToggleControl
+ *       __nextHasNoMarginBottom
+ *       label="Fixed Background"
+ *       checked={ value }
+ *       onChange={ () => setValue( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const ToggleControl = forwardRef( UnforwardedToggleControl );
+
 export default ToggleControl;
diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..6511655810066f
--- /dev/null
+++ b/packages/components/src/toggle-control/stories/index.story.tsx
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToggleControl from '..';
+
+const meta: Meta< typeof ToggleControl > = {
+	title: 'Components/Selection & Input/Common/ToggleControl',
+	id: 'components-togglecontrol',
+	component: ToggleControl,
+	argTypes: {
+		checked: { control: false },
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ToggleControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ checked, setChecked ] = useState( true );
+	return (
+		<ToggleControl
+			{ ...props }
+			checked={ checked }
+			onChange={ ( ...changeArgs ) => {
+				setChecked( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Enable something',
+};
+
+export const WithHelpText = Template.bind( {} );
+WithHelpText.args = {
+	...Default.args,
+	help: 'This is some help text.',
+};
diff --git a/packages/components/src/toggle-control/stories/index.tsx b/packages/components/src/toggle-control/stories/index.tsx
deleted file mode 100644
index 07cb9303dcba76..00000000000000
--- a/packages/components/src/toggle-control/stories/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ToggleControl from '..';
-
-const meta: ComponentMeta< typeof ToggleControl > = {
-	title: 'Components/ToggleControl',
-	component: ToggleControl,
-	argTypes: {
-		checked: { control: { type: null } },
-		help: { control: { type: 'text' } },
-		label: { control: { type: 'text' } },
-		onChange: { action: 'onChange' },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ToggleControl > = ( {
-	onChange,
-	...props
-} ) => {
-	const [ checked, setChecked ] = useState( true );
-	return (
-		<ToggleControl
-			{ ...props }
-			checked={ checked }
-			onChange={ ( ...changeArgs ) => {
-				setChecked( ...changeArgs );
-				onChange( ...changeArgs );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Enable something',
-};
-
-export const WithHelpText = Template.bind( {} );
-WithHelpText.args = {
-	...Default.args,
-	help: 'This is some help text.',
-};
diff --git a/packages/components/src/toggle-control/style.scss b/packages/components/src/toggle-control/style.scss
new file mode 100644
index 00000000000000..68733b53a9bc94
--- /dev/null
+++ b/packages/components/src/toggle-control/style.scss
@@ -0,0 +1,12 @@
+.components-toggle-control__label {
+	line-height: $toggle-height;
+
+	&:not(.is-disabled) {
+		cursor: pointer;
+	}
+}
+
+.components-toggle-control__help {
+	display: inline-block;
+	margin-inline-start: $toggle-width + $grid-unit-10;
+}
diff --git a/packages/components/src/toggle-control/test/index.tsx b/packages/components/src/toggle-control/test/index.tsx
index cc89031d9affa3..b0eec2aca6663d 100644
--- a/packages/components/src/toggle-control/test/index.tsx
+++ b/packages/components/src/toggle-control/test/index.tsx
@@ -6,7 +6,13 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ToggleControl from '..';
+import _ToggleControl from '..';
+
+const ToggleControl = (
+	props: React.ComponentProps< typeof _ToggleControl >
+) => {
+	return <_ToggleControl { ...props } __nextHasNoMarginBottom />;
+};
 
 describe( 'ToggleControl', () => {
 	it( 'should label the toggle', () => {
diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..0f3c0a299617af
--- /dev/null
+++ b/packages/components/src/toggle-group-control/stories/index.story.tsx
@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
+import type {
+	ToggleGroupControlOptionProps,
+	ToggleGroupControlOptionIconProps,
+	ToggleGroupControlProps,
+} from '../types';
+
+const meta: Meta< typeof ToggleGroupControl > = {
+	component: ToggleGroupControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
+	title: 'Components (Experimental)/Selection & Input/ToggleGroupControl',
+	id: 'components-experimental-togglegroupcontrol',
+	argTypes: {
+		help: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: false },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof ToggleGroupControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ value, setValue ] =
+		useState< ToggleGroupControlProps[ 'value' ] >();
+
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange?.( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+const mapPropsToOptionComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionProps ) => (
+	<ToggleGroupControlOption value={ value } key={ value } { ...props } />
+);
+
+const mapPropsToOptionIconComponent = ( {
+	value,
+	...props
+}: ToggleGroupControlOptionIconProps ) => (
+	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
+);
+
+export const Default: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
+Default.args = {
+	children: [
+		{ value: 'left', label: 'Left' },
+		{ value: 'center', label: 'Center' },
+		{ value: 'right', label: 'Right' },
+		{ value: 'justify', label: 'Justify' },
+	].map( mapPropsToOptionComponent ),
+	isBlock: true,
+	label: 'Label',
+};
+
+/**
+ * A tooltip can be shown for each option by enabling the `showTooltip` prop.
+ * The `aria-label` will be used in the tooltip if provided. Otherwise, the
+ * `label` will be used.
+ */
+export const WithTooltip: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
+WithTooltip.args = {
+	...Default.args,
+	children: [
+		{
+			value: 'asc',
+			label: 'A→Z',
+			'aria-label': 'Ascending',
+			showTooltip: true,
+		},
+		{
+			value: 'desc',
+			label: 'Z→A',
+			'aria-label': 'Descending',
+			showTooltip: true,
+		},
+	].map( mapPropsToOptionComponent ),
+};
+
+/**
+ * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
+ * on each option for accessibility, which will be shown in a tooltip.
+ */
+export const WithIcons: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
+WithIcons.args = {
+	...Default.args,
+	children: [
+		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
+		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
+	].map( mapPropsToOptionIconComponent ),
+	isBlock: false,
+};
+
+/**
+ * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
+ */
+export const Deselectable: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
+Deselectable.args = {
+	...WithIcons.args,
+	isDeselectable: true,
+};
diff --git a/packages/components/src/toggle-group-control/stories/index.tsx b/packages/components/src/toggle-group-control/stories/index.tsx
deleted file mode 100644
index 99784817643dca..00000000000000
--- a/packages/components/src/toggle-group-control/stories/index.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import {
-	ToggleGroupControl,
-	ToggleGroupControlOption,
-	ToggleGroupControlOptionIcon,
-} from '../index';
-import type {
-	ToggleGroupControlOptionProps,
-	ToggleGroupControlOptionIconProps,
-	ToggleGroupControlProps,
-} from '../types';
-
-const meta: ComponentMeta< typeof ToggleGroupControl > = {
-	component: ToggleGroupControl,
-	title: 'Components (Experimental)/ToggleGroupControl',
-	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
-	argTypes: {
-		help: { control: { type: 'text' } },
-		onChange: { action: 'onChange' },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof ToggleGroupControl > = ( {
-	onChange,
-	...props
-} ) => {
-	const [ value, setValue ] =
-		useState< ToggleGroupControlProps[ 'value' ] >();
-
-	return (
-		<ToggleGroupControl
-			{ ...props }
-			onChange={ ( ...changeArgs ) => {
-				setValue( ...changeArgs );
-				onChange?.( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
-
-const mapPropsToOptionComponent = ( {
-	value,
-	...props
-}: ToggleGroupControlOptionProps ) => (
-	<ToggleGroupControlOption value={ value } key={ value } { ...props } />
-);
-
-const mapPropsToOptionIconComponent = ( {
-	value,
-	...props
-}: ToggleGroupControlOptionIconProps ) => (
-	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
-);
-
-export const Default: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
-Default.args = {
-	children: [
-		{ value: 'left', label: 'Left' },
-		{ value: 'center', label: 'Center' },
-		{ value: 'right', label: 'Right' },
-		{ value: 'justify', label: 'Justify' },
-	].map( mapPropsToOptionComponent ),
-	isBlock: true,
-	label: 'Label',
-};
-
-/**
- * A tooltip can be shown for each option by enabling the `showTooltip` prop.
- * The `aria-label` will be used in the tooltip if provided. Otherwise, the
- * `label` will be used.
- */
-export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
-WithTooltip.args = {
-	...Default.args,
-	children: [
-		{
-			value: 'asc',
-			label: 'A→Z',
-			'aria-label': 'Ascending',
-			showTooltip: true,
-		},
-		{
-			value: 'desc',
-			label: 'Z→A',
-			'aria-label': 'Descending',
-			showTooltip: true,
-		},
-	].map( mapPropsToOptionComponent ),
-};
-
-/**
- * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
- * on each option for accessibility, which will be shown in a tooltip.
- */
-export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
-WithIcons.args = {
-	...Default.args,
-	children: [
-		{ value: 'uppercase', label: 'Uppercase', icon: formatUppercase },
-		{ value: 'lowercase', label: 'Lowercase', icon: formatLowercase },
-	].map( mapPropsToOptionIconComponent ),
-	isBlock: false,
-};
-
-/**
- * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
- */
-export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
-Deselectable.args = {
-	...WithIcons.args,
-	isDeselectable: true,
-};
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index be5b20d593954c..f344cd6ba16528 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToggleGroupControl should render correctly with icons 1`] = `
+exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
@@ -13,8 +13,369 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
+  display: block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
+}
+
+.emotion-8 {
+  background: var(--wp-components-color-background, #fff);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 0;
+  position: relative;
+  min-height: 40px;
+  padding: 3px;
+}
+
+.emotion-8:hover {
+  border-color: var(--wp-components-color-gray-700, #757575);
+}
+
+.emotion-8:focus-within {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
+.emotion-10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-12 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 1px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+  color: #1e1e1e;
+  height: 32px;
+  aspect-ratio: 1;
+  padding-left: 0;
+  padding-right: 0;
+  color: #fff;
+}
+
+@media not ( prefers-reduced-motion ) {
+  .emotion-12 {
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  }
+}
+
+.emotion-12::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.emotion-12:active {
+  background: #fff;
+}
+
+.emotion-12:active {
+  background: transparent;
+}
+
+.emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.emotion-17 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 1px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+  color: #1e1e1e;
+  height: 32px;
+  aspect-ratio: 1;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media not ( prefers-reduced-motion ) {
+  .emotion-17 {
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  }
+}
+
+.emotion-17::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-17[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.emotion-17:active {
+  background: #fff;
+}
+
+<div>
+  <div
+    class="components-base-control emotion-0 emotion-1"
+  >
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
+        >
+          Test Toggle Group Control
+        </span>
+      </div>
+      <div
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-12"
+        role="radiogroup"
+      >
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="true"
+            aria-label="Uppercase"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-active-item="true"
+            data-value="uppercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-12-32"
+            role="radio"
+            type="button"
+            value="uppercase"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="Lowercase"
+            class="emotion-17 components-toggle-group-control-option-base"
+            data-value="lowercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-12-33"
+            role="radio"
+            type="button"
+            value="lowercase"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="components-button"
+    type="button"
+  >
+    Reset
+  </button>
+</div>
+`;
+
+exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .components-panel__row .emotion-2 {
@@ -33,13 +394,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -47,49 +408,342 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
-  -webkit-transition: -webkit-transform 100ms linear;
-  transition: transform 100ms linear;
-  min-height: 36px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
-    transition-duration: 0ms;
-  }
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  outline: none;
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
-.emotion-10 {
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
   background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
+.emotion-10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-12 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 1px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+}
+
+@media not ( prefers-reduced-motion ) {
+  .emotion-12 {
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  }
+}
+
+.emotion-12::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.emotion-12:active {
+  background: #fff;
+}
+
+.emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+<div>
+  <div
+    class="components-base-control emotion-0 emotion-1"
+  >
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
+        >
+          Test Toggle Group Control
+        </span>
+      </div>
+      <div
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-11"
+        role="radiogroup"
+      >
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="R"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="rigas"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-11-30"
+            role="radio"
+            type="button"
+            value="rigas"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              R
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="J"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="jack"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-11-31"
+            role="radio"
+            type="button"
+            value="jack"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              J
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="components-button"
+    type="button"
+  >
+    Reset
+  </button>
+</div>
+`;
+
+exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: calc(4px * 2);
+  padding: 0;
+}
+
+.emotion-8 {
+  background: var(--wp-components-color-background, #fff);
+  border: 1px solid transparent;
   border-radius: 2px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  bottom: 2px;
-  -webkit-transition: -webkit-transform 160ms ease;
-  transition: transform 160ms ease;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 0;
+  position: relative;
+  min-height: 40px;
+  padding: 3px;
+}
+
+.emotion-8:hover {
+  border-color: var(--wp-components-color-gray-700, #757575);
+}
+
+.emotion-8:focus-within {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-10 {
-    transition-duration: 0ms;
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
   }
 }
 
-.emotion-12 {
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+}
+
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -102,7 +756,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   flex: 1;
 }
 
-.emotion-14 {
+.emotion-12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -113,7 +767,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -132,8 +786,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -141,31 +793,38 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 32px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-14 {
-    transition-duration: 0ms;
+@media not ( prefers-reduced-motion ) {
+  .emotion-12 {
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-14::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-14:active {
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.emotion-12:active {
   background: #fff;
 }
 
-.emotion-14:active {
+.emotion-12:active {
   background: transparent;
 }
 
-.emotion-15 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -174,7 +833,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   line-height: 1;
 }
 
-.emotion-19 {
+.emotion-17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -185,7 +844,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -204,8 +863,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -213,22 +870,29 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 32px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-19 {
-    transition-duration: 0ms;
+@media not ( prefers-reduced-motion ) {
+  .emotion-17 {
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-19::-moz-focus-inner {
+.emotion-17::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-19:active {
+.emotion-17[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.emotion-17:active {
   background: #fff;
 }
 
@@ -256,31 +920,24 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         id="toggle-group-control-as-radio-group-1"
         role="radiogroup"
       >
-        <div
-          aria-hidden="true"
-          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-        />
         <div
           class="emotion-10 emotion-11"
-          role="presentation"
-          style="transform: translateX(0px); transition: none; width: 0px;"
-        />
-        <div
-          class="emotion-12 emotion-13"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-14 components-toggle-group-control-option-base"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-2"
             role="radio"
-            tabindex="0"
+            type="button"
+            value="uppercase"
           >
             <div
-              class="emotion-15 emotion-16"
+              class="emotion-13 emotion-14"
             >
               <svg
                 aria-hidden="true"
@@ -298,21 +955,22 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           </button>
         </div>
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-10 emotion-11"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-19 components-toggle-group-control-option-base"
+            class="emotion-17 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-3"
             role="radio"
-            tabindex="-1"
+            type="button"
+            value="lowercase"
           >
             <div
-              class="emotion-15 emotion-16"
+              class="emotion-13 emotion-14"
             >
               <svg
                 aria-hidden="true"
@@ -335,7 +993,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 </div>
 `;
 
-exports[`ToggleGroupControl should render correctly with text options 1`] = `
+exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
@@ -348,10 +1006,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -368,13 +1022,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -382,28 +1036,70 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
-  -webkit-transition: -webkit-transform 100ms linear;
-  transition: transform 100ms linear;
-  min-height: 36px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
-    transition-duration: 0ms;
-  }
+  min-height: 40px;
+  padding: 3px;
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  outline: none;
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+@media not ( prefers-reduced-motion ) {
+  .emotion-8[data-indicator-animated]::before {
+    transition-property: transform,border-radius;
+    transition-duration: 0.2s;
+    transition-timing-function: ease-out;
+  }
+}
+
+.emotion-8::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  background: #1e1e1e;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+  --antialiasing-factor: 100;
+  border-radius: calc(
+  				1px /
+  					(
+  						var( --selected-width, 0 ) /
+  							var( --antialiasing-factor )
+  					)
+  			)/1px;
+  left: -1px;
+  width: calc( var( --antialiasing-factor ) * 1px );
+  height: calc( var( --selected-height, 0 ) * 1px );
+  transform-origin: left top;
+  -webkit-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -moz-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  -ms-transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
+  transform: translateX( calc( var( --selected-left, 0 ) * 1px ) ) scaleX(
+  				calc(
+  					var( --selected-width, 0 ) / var( --antialiasing-factor )
+  				)
+  			);
 }
 
 .emotion-10 {
@@ -430,7 +1126,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   appearance: none;
   background: transparent;
   border: none;
-  border-radius: 2px;
+  border-radius: 1px;
   color: #757575;
   fill: currentColor;
   cursor: pointer;
@@ -449,8 +1145,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   padding: 0 12px;
   position: relative;
   text-align: center;
-  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
-  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -459,9 +1153,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   z-index: 2;
 }
 
-@media ( prefers-reduced-motion: reduce ) {
+@media not ( prefers-reduced-motion ) {
   .emotion-12 {
-    transition-duration: 0ms;
+    -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+    transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
   }
 }
 
@@ -469,6 +1164,11 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   border: 0;
 }
 
+.emotion-12[disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
 .emotion-12:active {
   background: #fff;
 }
@@ -506,10 +1206,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         id="toggle-group-control-as-radio-group-0"
         role="radiogroup"
       >
-        <div
-          aria-hidden="true"
-          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-        />
         <div
           class="emotion-10 emotion-11"
         >
@@ -522,7 +1218,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-0"
             role="radio"
-            tabindex="0"
+            type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -543,7 +1240,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-1"
             role="radio"
-            tabindex="-1"
+            type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 28b3812fe8dafa..44cfda69c423cf 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -2,61 +2,122 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press, click, hover, sleep } from '@ariakit/test';
 
 /**
  * WordPress dependencies
  */
+import { useState } from '@wordpress/element';
 import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import Button from '../../button';
 import {
-	ToggleGroupControl,
+	ToggleGroupControl as _ToggleGroupControl,
 	ToggleGroupControlOption,
 	ToggleGroupControlOptionIcon,
 } from '../index';
-
-describe( 'ToggleGroupControl', () => {
-	const options = (
-		<>
-			<ToggleGroupControlOption value="rigas" label="R" />
-			<ToggleGroupControlOption value="jack" label="J" />
-		</>
+import { TOOLTIP_DELAY } from '../../tooltip';
+import type { ToggleGroupControlProps } from '../types';
+
+const hoverOutside = async () => {
+	await hover( document.body );
+	await hover( document.body, { clientX: 10, clientY: 10 } );
+};
+
+const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
+	return (
+		<_ToggleGroupControl
+			{ ...props }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
 	);
-	const optionsWithTooltip = (
+};
+
+const ControlledToggleGroupControl = ( {
+	value: valueProp,
+	onChange,
+	extraButtonOptions,
+	...props
+}: ToggleGroupControlProps & {
+	extraButtonOptions?: { name: string; value: string }[];
+} ) => {
+	const [ value, setValue ] = useState( valueProp );
+
+	return (
 		<>
-			<ToggleGroupControlOption
-				value="gnocchi"
-				label="Delicious Gnocchi"
-				aria-label="Click for Delicious Gnocchi"
-				showTooltip={ true }
-			/>
-			<ToggleGroupControlOption
-				value="caponata"
-				label="Sumptuous Caponata"
-				aria-label="Click for Sumptuous Caponata"
+			<ToggleGroupControl
+				{ ...props }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
+				value={ value }
 			/>
+			<Button onClick={ () => setValue( undefined ) }>Reset</Button>
+			{ extraButtonOptions?.map( ( obj ) => (
+				<Button
+					key={ obj.value }
+					onClick={ () => setValue( obj.value ) }
+				>
+					{ obj.name }
+				</Button>
+			) ) }
 		</>
 	);
+};
+const options = (
+	<>
+		<ToggleGroupControlOption value="rigas" label="R" />
+		<ToggleGroupControlOption value="jack" label="J" />
+	</>
+);
+const optionsWithTooltip = (
+	<>
+		<ToggleGroupControlOption
+			value="gnocchi"
+			label="Delicious Gnocchi"
+			aria-label="Click for Delicious Gnocchi"
+			showTooltip
+		/>
+		<ToggleGroupControlOption
+			value="caponata"
+			label="Sumptuous Caponata"
+			aria-label="Click for Sumptuous Caponata"
+		/>
+	</>
+);
+const optionsWithDisabledOption = (
+	<>
+		<ToggleGroupControlOption value="pizza" label="Pizza" />
+		<ToggleGroupControlOption value="rice" label="Rice" disabled />
+		<ToggleGroupControlOption value="pasta" label="Pasta" />
+	</>
+);
+
+describe.each( [
+	[ 'uncontrolled', ToggleGroupControl ],
+	[ 'controlled', ControlledToggleGroupControl ],
+] )( 'ToggleGroupControl %s', ( ...modeAndComponent ) => {
+	const [ mode, Component ] = modeAndComponent;
 
 	describe( 'should render correctly', () => {
 		it( 'with text options', () => {
 			const { container } = render(
-				<ToggleGroupControl label="Test Toggle Group Control">
+				<Component label="Test Toggle Group Control">
 					{ options }
-				</ToggleGroupControl>
+				</Component>
 			);
 
 			expect( container ).toMatchSnapshot();
 		} );
+
 		it( 'with icons', () => {
 			const { container } = render(
-				<ToggleGroupControl
-					value="uppercase"
-					label="Test Toggle Group Control"
-				>
+				<Component value="uppercase" label="Test Toggle Group Control">
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
 						icon={ formatUppercase }
@@ -67,178 +128,373 @@ describe( 'ToggleGroupControl', () => {
 						icon={ formatLowercase }
 						label="Lowercase"
 					/>
-				</ToggleGroupControl>
+				</Component>
 			);
 
 			expect( container ).toMatchSnapshot();
 		} );
 	} );
+	it( 'should render with the correct option initially selected when `value` is defined', () => {
+		render(
+			<Component value="jack" label="Test Toggle Group Control">
+				{ options }
+			</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+	} );
+	it( 'should render without a selected option when `value` is `undefined`', () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+		expect( screen.getByRole( 'radio', { name: 'R' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'J' } ) ).not.toBeChecked();
+	} );
 	it( 'should call onChange with proper value', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
 		const mockOnChange = jest.fn();
 
 		render(
-			<ToggleGroupControl
+			<Component
 				value="jack"
 				onChange={ mockOnChange }
 				label="Test Toggle Group Control"
 			>
 				{ options }
-			</ToggleGroupControl>
+			</Component>
 		);
 
-		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
+		await click( screen.getByRole( 'radio', { name: 'R' } ) );
 
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
-	it( 'should render tooltip where `showTooltip` === `true`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
+	it( 'should not set a value on focus', async () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+
+		const radio = screen.getByRole( 'radio', { name: 'R' } );
+		expect( radio ).not.toBeChecked();
+
+		await press.Tab();
+		expect( radio ).toHaveFocus();
+		expect( radio ).not.toBeChecked();
+	} );
+
+	if ( mode === 'controlled' ) {
+		it( 'should not set a value on focus, after the value is reset', async () => {
+			render(
+				<Component label="Test Toggle Group Control" value="jack">
+					{ options }
+				</Component>
+			);
+
+			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+
+			await press.ShiftTab();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
 		} );
+	}
+
+	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		render(
-			<ToggleGroupControl label="Test Toggle Group Control">
+			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
-			</ToggleGroupControl>
+			</Component>
 		);
 
 		const firstRadio = screen.getByLabelText(
 			'Click for Delicious Gnocchi'
 		);
 
-		await user.hover( firstRadio );
+		await hover( firstRadio );
 
-		await waitFor( () =>
-			expect(
-				screen.getByText( 'Click for Delicious Gnocchi' )
-			).toBeVisible()
-		);
+		const tooltip = await screen.findByRole( 'tooltip', {
+			name: 'Click for Delicious Gnocchi',
+		} );
+
+		await waitFor( () => expect( tooltip ).toBeVisible() );
+
+		// hover outside of radio
+		await hoverOutside();
+
+		// Tooltip should hide
+		expect(
+			screen.queryByRole( 'tooltip', {
+				name: 'Click for Delicious Gnocchi',
+			} )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render tooltip', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
 		render(
-			<ToggleGroupControl label="Test Toggle Group Control">
+			<Component label="Test Toggle Group Control">
 				{ optionsWithTooltip }
-			</ToggleGroupControl>
+			</Component>
 		);
 
 		const secondRadio = screen.getByLabelText(
 			'Click for Sumptuous Caponata'
 		);
 
-		await user.hover( secondRadio );
+		await hover( secondRadio );
 
-		await waitFor( () =>
-			expect(
-				screen.queryByText( 'Click for Sumptuous Caponata' )
-			).not.toBeInTheDocument()
-		);
+		// Tooltip shouldn't show
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
+
+		// Advance time by default delay
+		await sleep( TOOLTIP_DELAY );
+
+		// Tooltip shouldn't show.
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
 	} );
 
+	if ( mode === 'controlled' ) {
+		it( 'should reset values correctly when default value is undefined', async () => {
+			render(
+				<Component label="Test Toggle Group Control">
+					{ options }
+				</Component>
+			);
+
+			const rigasOption = screen.getByRole( 'radio', { name: 'R' } );
+			const jackOption = screen.getByRole( 'radio', { name: 'J' } );
+
+			await click( rigasOption );
+
+			expect( jackOption ).not.toBeChecked();
+			expect( rigasOption ).toBeChecked();
+
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).not.toBeChecked();
+		} );
+
+		it( 'should reset values correctly when default value is defined', async () => {
+			render(
+				<Component label="Test Toggle Group Control" value="rigas">
+					{ options }
+				</Component>
+			);
+
+			const rigasOption = screen.getByRole( 'radio', {
+				name: 'R',
+			} );
+			const jackOption = screen.getByRole( 'radio', {
+				name: 'J',
+			} );
+
+			expect( rigasOption ).toBeChecked();
+			expect( jackOption ).not.toBeChecked();
+
+			await click( screen.getByRole( 'button', { name: 'Reset' } ) );
+
+			expect( rigasOption ).not.toBeChecked();
+			expect( jackOption ).not.toBeChecked();
+		} );
+
+		describe.each( [
+			[ 'undefined', undefined ],
+			[ 'defined', 'rigas' ],
+		] )(
+			'should update correctly when triggered by external updates',
+			( defaultValueType, defaultValue ) => {
+				it( `when default value is ${ defaultValueType }`, async () => {
+					render(
+						<Component
+							value={ defaultValue }
+							label="Test Toggle Group Control"
+							extraButtonOptions={ [
+								{ name: 'Rigas', value: 'rigas' },
+								{ name: 'Jack', value: 'jack' },
+							] }
+						>
+							{ options }
+						</Component>
+					);
+
+					await click(
+						screen.getByRole( 'button', { name: 'Jack' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).not.toBeChecked();
+
+					await click(
+						screen.getByRole( 'button', { name: 'Rigas' } )
+					);
+					expect(
+						screen.getByRole( 'radio', { name: 'R' } )
+					).toBeChecked();
+					expect(
+						screen.getByRole( 'radio', { name: 'J' } )
+					).not.toBeChecked();
+				} );
+			}
+		);
+	}
+
 	describe( 'isDeselectable', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
 
 				render(
-					<ToggleGroupControl
+					<Component
 						value="rigas"
 						label="Test"
 						onChange={ mockOnChange }
 					>
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
 					name: 'R',
 					checked: true,
 				} );
-				await user.click( rigas );
+				await click( rigas );
 				expect( mockOnChange ).toHaveBeenCalledTimes( 0 );
 			} );
 
 			it( 'should not tab to next radio option', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
 				render(
-					<ToggleGroupControl value="rigas" label="Test">
-						{ options }
-					</ToggleGroupControl>
+					<>
+						<Component value="rigas" label="Test">
+							{ options }
+						</Component>
+						<button>After ToggleGroupControl</button>
+					</>
 				);
 
 				const rigas = screen.getByRole( 'radio', {
 					name: 'R',
 				} );
 
-				await user.tab();
+				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
-				await user.tab();
-				expect( rigas.ownerDocument.body ).toHaveFocus();
+				await press.Tab();
+
+				// When in controlled mode, there is an additional "Reset" button.
+				const expectedFocusTarget =
+					mode === 'uncontrolled'
+						? screen.getByRole( 'button', {
+								name: 'After ToggleGroupControl',
+						  } )
+						: screen.getByRole( 'button', { name: 'Reset' } );
+
+				expect( expectedFocusTarget ).toHaveFocus();
+			} );
+
+			it( 'should ignore disabled radio options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect(
+					screen.getByRole( 'radio', { name: 'Rice' } )
+				).toBeDisabled();
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowRight();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pasta' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Arrow navigation skips the disabled option
+				await press.ArrowLeft();
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pizza' );
+
+				// Clicks don't cause the option to be selected
+				await click( screen.getByRole( 'radio', { name: 'Rice' } ) );
+				expect(
+					screen.getByRole( 'radio', { name: 'Pizza' } )
+				).toBeChecked();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
 			} );
 		} );
 
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
 				const mockOnChange = jest.fn();
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
 
 				render(
-					<ToggleGroupControl
+					<Component
 						value="rigas"
 						label="Test"
 						onChange={ mockOnChange }
 						isDeselectable
 					>
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
-				await user.click(
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: true,
 					} )
 				);
 				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( undefined );
-				expect(
+				expect( mockOnChange ).toHaveBeenLastCalledWith( undefined );
+
+				await click(
 					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: false,
 					} )
-				).toBeVisible();
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 2 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'rigas' );
 			} );
 
 			it( 'should tab to the next option button', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
-
 				render(
-					<ToggleGroupControl
-						isDeselectable
-						value="rigas"
-						label="Test"
-					>
+					<Component isDeselectable value="rigas" label="Test">
 						{ options }
-					</ToggleGroupControl>
+					</Component>
 				);
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'R',
@@ -246,7 +502,7 @@ describe( 'ToggleGroupControl', () => {
 					} )
 				).toHaveFocus();
 
-				await user.tab();
+				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',
@@ -255,7 +511,7 @@ describe( 'ToggleGroupControl', () => {
 				).toHaveFocus();
 
 				// Focus should not move with arrow keys
-				await user.keyboard( '{ArrowLeft}' );
+				await press.ArrowLeft();
 				expect(
 					screen.getByRole( 'button', {
 						name: 'J',
@@ -263,6 +519,65 @@ describe( 'ToggleGroupControl', () => {
 					} )
 				).toHaveFocus();
 			} );
+
+			it( 'should ignore disabled options', async () => {
+				const mockOnChange = jest.fn();
+
+				render(
+					<Component
+						value="pizza"
+						isDeselectable
+						onChange={ mockOnChange }
+						label="Test Toggle Group Control"
+					>
+						{ optionsWithDisabledOption }
+					</Component>
+				);
+
+				await press.Tab();
+
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: true,
+					} )
+				).toBeVisible();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+						pressed: false,
+					} )
+				).toBeDisabled();
+
+				// Tab key navigation skips the disabled option
+				await press.Tab();
+				await press.Space();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pasta',
+						pressed: true,
+					} )
+				).toHaveFocus();
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenLastCalledWith( 'pasta' );
+
+				// Tab key navigation skips the disabled option
+				await press.ShiftTab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Pizza',
+						pressed: false,
+					} )
+				).toHaveFocus();
+
+				// Clicks don't cause the option to be selected.
+				await click(
+					screen.getByRole( 'button', {
+						name: 'Rice',
+					} )
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			} );
 		} );
 	} );
 } );
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
index a3a9a94807e93d..e673a1ed45bbf6 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md
@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, generic component for any children of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 ## Props
 
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index c0ab8f95409f76..041af1adf5e5b5 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -2,22 +2,19 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { Radio } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import type {
 	ToggleGroupControlOptionBaseProps,
 	WithToolTipProps,
@@ -32,7 +29,7 @@ const { ButtonContentView, LabelView } = styles;
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
-			<Tooltip text={ text } position="top center">
+			<Tooltip text={ text } placement="top">
 				{ children }
 			</Tooltip>
 		);
@@ -41,62 +38,91 @@ const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 };
 
 function ToggleGroupControlOptionBase(
-	props: WordPressComponentProps<
-		ToggleGroupControlOptionBaseProps,
-		'button',
-		false
+	props: Omit<
+		WordPressComponentProps<
+			ToggleGroupControlOptionBaseProps,
+			'button',
+			false
+		>,
+		// the element's id is generated internally
+		| 'id'
+		// due to how the component works, only the `disabled` prop should be used
+		| 'aria-disabled'
 	>,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const toggleGroupControlContext = useToggleGroupControlContext();
+
 	const id = useInstanceId(
 		ToggleGroupControlOptionBase,
 		toggleGroupControlContext.baseId || 'toggle-group-control-option-base'
-	) as string;
+	);
+
 	const buttonProps = useContextSystem(
 		{ ...props, id },
 		'ToggleGroupControlOptionBase'
 	);
+
 	const {
 		isBlock = false,
 		isDeselectable = false,
 		size = 'default',
-		...otherContextProps /* context props for Ariakit Radio */
 	} = toggleGroupControlContext;
+
 	const {
 		className,
 		isIcon = false,
 		value,
 		children,
 		showTooltip = false,
+		disabled,
 		...otherButtonProps
 	} = buttonProps;
 
-	const isPressed = otherContextProps.state === value;
+	const isPressed = toggleGroupControlContext.value === value;
 	const cx = useCx();
-	const labelViewClasses = cx( isBlock && styles.labelBlock );
-	const classes = cx(
-		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
-		className
+	const labelViewClasses = useMemo(
+		() => cx( isBlock && styles.labelBlock ),
+		[ cx, isBlock ]
+	);
+	const itemClasses = useMemo(
+		() =>
+			cx(
+				styles.buttonView( {
+					isDeselectable,
+					isIcon,
+					isPressed,
+					size,
+				} ),
+				className
+			),
+		[ cx, isDeselectable, isIcon, isPressed, size, className ]
 	);
 
 	const buttonOnClick = () => {
 		if ( isDeselectable && isPressed ) {
-			otherContextProps.setState( undefined );
+			toggleGroupControlContext.setValue( undefined );
 		} else {
-			otherContextProps.setState( value );
+			toggleGroupControlContext.setValue( value );
 		}
 	};
 
 	const commonProps = {
 		...otherButtonProps,
-		className: classes,
+		className: itemClasses,
 		'data-value': value,
 		ref: forwardedRef,
 	};
 
+	const labelRef = useRef< HTMLDivElement | null >( null );
+	useLayoutEffect( () => {
+		if ( isPressed && labelRef.current ) {
+			toggleGroupControlContext.setSelectedElement( labelRef.current );
+		}
+	}, [ isPressed, toggleGroupControlContext ] );
+
 	return (
-		<LabelView className={ labelViewClasses }>
+		<LabelView ref={ labelRef } className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
 				text={ otherButtonProps[ 'aria-label' ] }
@@ -104,6 +130,7 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...commonProps }
+						disabled={ disabled }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -111,16 +138,27 @@ function ToggleGroupControlOptionBase(
 						<ButtonContentView>{ children }</ButtonContentView>
 					</button>
 				) : (
-					<Radio
-						{ ...commonProps }
-						{
-							...otherContextProps /* these are only for Ariakit Radio */
-						}
-						as="button"
+					<Ariakit.Radio
+						disabled={ disabled }
+						onFocusVisible={ () => {
+							const selectedValueIsEmpty =
+								toggleGroupControlContext.value === null ||
+								toggleGroupControlContext.value === '';
+
+							// Conditions ensure that the first visible focus to a radio group
+							// without a selected option will not automatically select the option.
+							if (
+								! selectedValueIsEmpty ||
+								toggleGroupControlContext.activeItemIsNotFirstItem?.()
+							) {
+								toggleGroupControlContext.setValue( value );
+							}
+						} }
+						render={ <button type="button" { ...commonProps } /> }
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>
-					</Radio>
+					</Ariakit.Radio>
 				) }
 			</WithToolTip>
 		</LabelView>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index d4b5320edff616..c0248f9b3f7f22 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import { CONFIG, COLORS } from '../../utils';
 import type {
 	ToggleGroupControlProps,
 	ToggleGroupControlOptionBaseProps,
@@ -37,7 +37,7 @@ export const buttonView = ( {
 	appearance: none;
 	background: transparent;
 	border: none;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusXSmall };
 	color: ${ COLORS.gray[ 700 ] };
 	fill: currentColor;
 	cursor: pointer;
@@ -50,9 +50,12 @@ export const buttonView = ( {
 	padding: 0 12px;
 	position: relative;
 	text-align: center;
-	transition: background ${ CONFIG.transitionDurationFast } linear,
-		color ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;
-	${ reduceMotion( 'transition' ) }
+	@media not ( prefers-reduced-motion ) {
+		transition:
+			background ${ CONFIG.transitionDurationFast } linear,
+			color ${ CONFIG.transitionDurationFast } linear,
+			font-weight 60ms linear;
+	}
 	user-select: none;
 	width: 100%;
 	z-index: 2;
@@ -61,8 +64,13 @@ export const buttonView = ( {
 		border: 0;
 	}
 
+	&[disabled] {
+		opacity: 0.4;
+		cursor: default;
+	}
+
 	&:active {
-		background: ${ CONFIG.toggleGroupControlBackgroundColor };
+		background: ${ CONFIG.controlBackgroundColor };
 	}
 
 	${ isDeselectable && deselectable }
@@ -82,8 +90,9 @@ const deselectable = css`
 	color: ${ COLORS.gray[ 900 ] };
 
 	&:focus {
-		box-shadow: inset 0 0 0 1px ${ COLORS.white },
-			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.ui.theme };
+		box-shadow:
+			inset 0 0 0 1px ${ COLORS.white },
+			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
 		outline: 2px solid transparent;
 	}
 `;
@@ -99,12 +108,13 @@ const isIconStyles = ( {
 }: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
-		'__unstable-large': '34px',
+		'__unstable-large': '32px',
 	};
 
 	return css`
 		color: ${ COLORS.gray[ 900 ] };
-		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
+		aspect-ratio: 1;
 		padding-left: 0;
 		padding-right: 0;
 	`;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index ad25c21a8ae03c..1ee82b26a91998 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`] and displays an icon(<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).
+`ToggleGroupControlOptionIcon` is a form component which is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md) and displays an icon.
 
 ## Usage
 
@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl>
+		<ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
@@ -41,7 +41,7 @@ The value of the `ToggleGroupControlOption`.
 
 -   Required: Yes
 
-### `icon`: `WPComponent`
+### `icon`: `Component`
 
 Icon displayed as the content of the option. Usually one of the icons from the `@wordpress/icons` package, or a custom React `<svg>` icon.
 
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
index 283ef884b77672..d1840cba5595d9 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';
@@ -51,20 +51,20 @@ function UnforwardedToggleGroupControlOptionIcon(
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
  *
  * function Example() {
- *	return (
- *		<ToggleGroupControl>
- *			<ToggleGroupControlOptionIcon
- *				value="uppercase"
- *				label="Uppercase"
- *				icon={ formatUppercase }
- *			/>
- *			<ToggleGroupControlOptionIcon
- *				value="lowercase"
- *				label="Lowercase"
- *				icon={ formatLowercase }
- *			/>
- *		</ToggleGroupControl>
- *	);
+ *  return (
+ *    <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
+ *      <ToggleGroupControlOptionIcon
+ *        value="uppercase"
+ *        label="Uppercase"
+ *        icon={ formatUppercase }
+ *      />
+ *      <ToggleGroupControlOptionIcon
+ *        value="lowercase"
+ *        label="Lowercase"
+ *        icon={ formatLowercase }
+ *      />
+ *    </ToggleGroupControl>
+ *  );
  * }
  * ```
  */
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
index 2de2e665c3f5b2..411857d260a311 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/README.md
@@ -4,8 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`]((/packages/components/src/toggle-group-control/toggle-group-control/README.md)).
-
+`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`](/packages/components/src/toggle-group-control/toggle-group-control/README.md).
 
 ## Usage
 
@@ -17,7 +16,13 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		>
 			<ToggleGroupControlOption
 				value="horizontal"
 				label="Horizontal"
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index 52d85d08be8f59..8632d92fc00578 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -11,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
@@ -48,7 +48,13 @@ function UnforwardedToggleGroupControlOption(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/README.md b/packages/components/src/toggle-group-control/toggle-group-control/README.md
index 1f5fe74bc1a9af..841d474c148d45 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control/README.md
@@ -20,7 +20,13 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="vertical" isBlock>
+		<ToggleGroupControl
+			label="my label"
+			value="vertical"
+			isBlock
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
@@ -77,9 +83,22 @@ Callback when a segment is selected.
 -   Required: No
 -   Default: `() => {}`
 
-
 ### `value`: `string | number`
 
 The value of the `ToggleGroupControl`.
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
+
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
index 72e247659818f5..7ce762b6e71df2 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -1,28 +1,21 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
 /**
  * WordPress dependencies
  */
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { forwardRef, useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import { useControlledValue } from '../../utils';
+import type { WordPressComponentProps } from '../../context';
 import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
-import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlMainControlProps } from '../types';
+import { useComputeControlledOrUncontrolledValue } from './utils';
+import type {
+	ToggleGroupControlMainControlProps,
+	ToggleGroupControlContextProps,
+} from '../types';
 
 function UnforwardedToggleGroupControlAsButtonGroup(
 	{
@@ -31,67 +24,64 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		label,
 		onChange,
 		size,
-		value,
+		value: valueProp,
+		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
 		'div',
 		false
 	>,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
+	const generatedId = useInstanceId(
 		ToggleGroupControlAsButtonGroup,
 		'toggle-group-control-as-button-group'
-	).toString();
-	const [ selectedValue, setSelectedValue ] = useState( value );
-	const groupContext = {
-		baseId,
-		state: selectedValue,
-		setState: setSelectedValue,
-	};
-	const previousValue = usePrevious( value );
+	);
+	const baseId = idProp || generatedId;
 
-	// Propagate groupContext.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if groupContext state changed
-		// from incoming value.
-		if ( previousValue !== groupContext.state ) {
-			onChange( groupContext.state );
-		}
-	}, [ groupContext.state ] );
+	// Use a heuristic to understand if the component is being used in controlled
+	// or uncontrolled mode, and consequently:
+	// - when controlled, convert `undefined` values to `''` (ie. "no value")
+	// - use the `value` prop as the `defaultValue` when uncontrolled
+	const { value, defaultValue } =
+		useComputeControlledOrUncontrolledValue( valueProp );
 
-	// Sync incoming value with groupContext.state.
-	useUpdateEffect( () => {
-		if ( value !== groupContext.state ) {
-			groupContext.setState( value );
-		}
-	}, [ value ] );
+	const [ selectedValue, setSelectedValue ] = useControlledValue( {
+		defaultValue,
+		value,
+		onChange,
+	} );
+
+	const groupContextValue = useMemo(
+		(): ToggleGroupControlContextProps => ( {
+			baseId,
+			value: selectedValue,
+			setValue: setSelectedValue,
+			isBlock: ! isAdaptiveWidth,
+			isDeselectable: true,
+			size,
+			setSelectedElement,
+		} ),
+		[
+			baseId,
+			selectedValue,
+			setSelectedValue,
+			isAdaptiveWidth,
+			size,
+			setSelectedElement,
+		]
+	);
 
 	return (
-		<ToggleGroupControlContext.Provider
-			value={ {
-				...groupContext,
-				isBlock: ! isAdaptiveWidth,
-				isDeselectable: true,
-				size,
-			} }
-		>
+		<ToggleGroupControlContext.Provider value={ groupContextValue }>
 			<View
 				aria-label={ label }
 				{ ...otherProps }
-				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				ref={ forwardedRef }
 				role="group"
 			>
-				{ resizeListener }
-				<ToggleGroupControlBackdrop
-					state={ groupContext.state }
-					containerRef={ containerRef }
-					containerWidth={ sizes.width }
-					isAdaptiveWidth={ isAdaptiveWidth }
-				/>
 				{ children }
 			</View>
 		</ToggleGroupControlContext.Provider>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index 9f66e964d9d439..0166728dbafba4 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -2,38 +2,38 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useEffect, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import type { WordPressComponentProps } from '../../context';
 import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
-import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlMainControlProps } from '../types';
+import { useComputeControlledOrUncontrolledValue } from './utils';
+import type {
+	ToggleGroupControlMainControlProps,
+	ToggleGroupControlContextProps,
+} from '../types';
 
 function UnforwardedToggleGroupControlAsRadioGroup(
 	{
 		children,
 		isAdaptiveWidth,
 		label,
-		onChange,
+		onChange: onChangeProp,
 		size,
-		value,
+		value: valueProp,
+		id: idProp,
+		setSelectedElement,
 		...otherProps
 	}: WordPressComponentProps<
 		ToggleGroupControlMainControlProps,
@@ -42,54 +42,80 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 	>,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
+	const generatedId = useInstanceId(
 		ToggleGroupControlAsRadioGroup,
 		'toggle-group-control-as-radio-group'
-	).toString();
-	const radio = useRadioState( {
-		baseId,
-		state: value,
+	);
+	const baseId = idProp || generatedId;
+
+	// Use a heuristic to understand if the component is being used in controlled
+	// or uncontrolled mode, and consequently:
+	// - when controlled, convert `undefined` values to `''` (ie. "no value")
+	// - use the `value` prop as the `defaultValue` when uncontrolled
+	const { value, defaultValue } =
+		useComputeControlledOrUncontrolledValue( valueProp );
+
+	// `useRadioStore`'s `setValue` prop can be called with `null`, while
+	// the component's `onChange` prop only expects `undefined`
+	const wrappedOnChangeProp = onChangeProp
+		? ( v: string | number | null ) => {
+				onChangeProp( v ?? undefined );
+		  }
+		: undefined;
+
+	const radio = Ariakit.useRadioStore( {
+		defaultValue,
+		value,
+		setValue: wrappedOnChangeProp,
+		rtl: isRTL(),
 	} );
-	const previousValue = usePrevious( value );
 
-	// Propagate radio.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if radio state changed
-		// from incoming value.
-		if ( previousValue !== radio.state ) {
-			onChange( radio.state );
-		}
-	}, [ radio.state ] );
+	const selectedValue = useStoreState( radio, 'value' );
+	const setValue = radio.setValue;
 
-	// Sync incoming value with radio.state.
-	useUpdateEffect( () => {
-		if ( value !== radio.state ) {
-			radio.setState( value );
+	// Ensures that the active id is also reset after the value is "reset" by the consumer.
+	useEffect( () => {
+		if ( selectedValue === '' ) {
+			radio.setActiveId( undefined );
 		}
-	}, [ value ] );
+	}, [ radio, selectedValue ] );
+
+	const groupContextValue = useMemo(
+		(): ToggleGroupControlContextProps => ( {
+			activeItemIsNotFirstItem: () =>
+				radio.getState().activeId !== radio.first(),
+			baseId,
+			isBlock: ! isAdaptiveWidth,
+			size,
+			// @ts-expect-error - This is wrong and we should fix it.
+			value: selectedValue,
+			// @ts-expect-error - This is wrong and we should fix it.
+			setValue,
+			setSelectedElement,
+		} ),
+		[
+			baseId,
+			isAdaptiveWidth,
+			radio,
+			selectedValue,
+			setSelectedElement,
+			setValue,
+			size,
+		]
+	);
 
 	return (
-		<ToggleGroupControlContext.Provider
-			value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
-		>
-			<RadioGroup
-				{ ...radio }
+		<ToggleGroupControlContext.Provider value={ groupContextValue }>
+			<Ariakit.RadioGroup
+				store={ radio }
 				aria-label={ label }
-				as={ View }
+				render={ <View /> }
 				{ ...otherProps }
-				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				id={ baseId }
+				ref={ forwardedRef }
 			>
-				{ resizeListener }
-				<ToggleGroupControlBackdrop
-					state={ radio.state }
-					containerRef={ containerRef }
-					containerWidth={ sizes.width }
-					isAdaptiveWidth={ isAdaptiveWidth }
-				/>
 				{ children }
-			</RadioGroup>
+			</Ariakit.RadioGroup>
 		</ToggleGroupControlContext.Provider>
 	);
 }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index ebd4893e37fb2f..9f3427e95a6017 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -2,20 +2,17 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect, useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks';
 import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
@@ -23,8 +20,10 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
-
-const noop = () => {};
+import { useTrackElementOffsetRect } from '../../utils/element-rect';
+import { useMergeRefs } from '@wordpress/compose';
+import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 function UnconnectedToggleGroupControl(
 	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
@@ -32,6 +31,8 @@ function UnconnectedToggleGroupControl(
 ) {
 	const {
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
+		__shouldNotWarnDeprecated36pxSize,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
@@ -39,32 +40,61 @@ function UnconnectedToggleGroupControl(
 		label,
 		hideLabelFromVision = false,
 		help,
-		onChange = noop,
+		onChange,
 		size = 'default',
 		value,
 		children,
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
+
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
+
+	const [ selectedElement, setSelectedElement ] = useState< HTMLElement >();
+	const [ controlElement, setControlElement ] = useState< HTMLElement >();
+	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
+	const selectedRect = useTrackElementOffsetRect(
+		value || value === 0 ? selectedElement : undefined
+	);
+	useAnimatedOffsetRect( controlElement, selectedRect, {
+		prefix: 'selected',
+		dataAttribute: 'indicator-animated',
+		transitionEndFilter: ( event ) => event.pseudoElement === '::before',
+		roundRect: true,
+	} );
+
 	const cx = useCx();
 
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { isBlock, isDeselectable, size } ),
+				styles.toggleGroupControl( {
+					isBlock,
+					isDeselectable,
+					size: normalizedSize,
+				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
 		? ToggleGroupControlAsButtonGroup
 		: ToggleGroupControlAsRadioGroup;
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'ToggleGroupControl',
+		size,
+		__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	return (
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__associatedWPComponentName="ToggleGroupControl"
 		>
 			{ ! hideLabelFromVision && (
 				<VisualLabelWrapper>
@@ -73,15 +103,17 @@ function UnconnectedToggleGroupControl(
 			) }
 			<MainControl
 				{ ...otherProps }
-				children={ children }
+				setSelectedElement={ setSelectedElement }
 				className={ classes }
 				isAdaptiveWidth={ isAdaptiveWidth }
 				label={ label }
 				onChange={ onChange }
-				ref={ forwardedRef }
-				size={ size }
+				ref={ refs }
+				size={ normalizedSize }
 				value={ value }
-			/>
+			>
+				{ children }
+			</MainControl>
 		</BaseControl>
 	);
 }
@@ -107,7 +139,13 @@ function UnconnectedToggleGroupControl(
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *       __next40pxDefaultSize
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index b48826e8ccbe84..bb6efe476b2b2c 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -7,10 +7,10 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import { CONFIG, COLORS } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
-export const ToggleGroupControl = ( {
+export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
@@ -19,16 +19,54 @@ export const ToggleGroupControl = ( {
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
-	border-radius: ${ CONFIG.controlBorderRadius };
+	border-radius: ${ CONFIG.radiusSmall };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
-	transition: transform ${ CONFIG.transitionDurationFastest } linear;
-	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
+
+	@media not ( prefers-reduced-motion ) {
+		&[data-indicator-animated]::before {
+			transition-property: transform, border-radius;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+		pointer-events: none;
+		background: ${ COLORS.gray[ 900 ] };
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: -3px;
+
+		/* Using a large value to avoid antialiasing rounding issues
+			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
+		--antialiasing-factor: 100;
+		/* Adjusting the border radius to match the scaling in the x axis. */
+		border-radius: calc(
+				${ CONFIG.radiusXSmall } /
+					(
+						var( --selected-width, 0 ) /
+							var( --antialiasing-factor )
+					)
+			) / ${ CONFIG.radiusXSmall };
+		left: -1px; // Correcting for border.
+		width: calc( var( --antialiasing-factor ) * 1px );
+		height: calc( var( --selected-height, 0 ) * 1px );
+		transform-origin: left top;
+		transform: translateX( calc( var( --selected-left, 0 ) * 1px ) )
+			scaleX(
+				calc(
+					var( --selected-width, 0 ) / var( --antialiasing-factor )
+				)
+			);
+	}
 `;
 
 const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
@@ -46,8 +84,10 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 		&:focus-within {
 			border-color: ${ COLORS.ui.borderFocus };
 			box-shadow: ${ CONFIG.controlBoxShadowFocus };
-			outline: none;
 			z-index: 1;
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
 		}
 	`;
 };
@@ -55,14 +95,18 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '36px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`
@@ -70,18 +114,6 @@ export const block = css`
 	width: 100%;
 `;
 
-export const BackdropView = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	left: 0;
-	position: absolute;
-	top: 2px;
-	bottom: 2px;
-	transition: transform ${ CONFIG.transitionDurationFast } ease;
-	${ reduceMotion( 'transition' ) }
-	z-index: 1;
-`;
-
 export const VisualLabelWrapper = styled.div`
 	// Makes the inline label be the correct height, equivalent to setting line-height: 0
 	display: flex;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx b/packages/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx
deleted file mode 100644
index 6d122c711deb5f..00000000000000
--- a/packages/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import type { ToggleGroupControlBackdropProps } from '../types';
-import { BackdropView } from './styles';
-
-function ToggleGroupControlBackdrop( {
-	containerRef,
-	containerWidth,
-	isAdaptiveWidth,
-	state,
-}: ToggleGroupControlBackdropProps ) {
-	const [ left, setLeft ] = useState( 0 );
-	const [ width, setWidth ] = useState( 0 );
-	const [ canAnimate, setCanAnimate ] = useState( false );
-	const [ renderBackdrop, setRenderBackdrop ] = useState( false );
-
-	useEffect( () => {
-		const containerNode = containerRef?.current;
-		if ( ! containerNode ) return;
-
-		/**
-		 * Workaround for Reakit
-		 */
-		const targetNode = containerNode.querySelector(
-			`[data-value="${ state }"]`
-		);
-		setRenderBackdrop( !! targetNode );
-		if ( ! targetNode ) {
-			return;
-		}
-
-		const computeDimensions = () => {
-			const { width: offsetWidth, x } =
-				targetNode.getBoundingClientRect();
-
-			const { x: parentX } = containerNode.getBoundingClientRect();
-
-			const borderWidth = 1;
-			const offsetLeft = x - parentX - borderWidth;
-
-			setLeft( offsetLeft );
-			setWidth( offsetWidth );
-		};
-		// Fix to make the component appear as expected inside popovers.
-		// If the targetNode width is 0 it means the element was not yet rendered we should allow
-		// some time for the render to happen.
-		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
-		const dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
-
-		let animationRequestId: number;
-		if ( ! canAnimate ) {
-			animationRequestId = window.requestAnimationFrame( () => {
-				setCanAnimate( true );
-			} );
-		}
-		return () => {
-			window.clearTimeout( dimensionsRequestId );
-			window.cancelAnimationFrame( animationRequestId );
-		};
-	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
-
-	if ( ! renderBackdrop ) {
-		return null;
-	}
-
-	return (
-		<BackdropView
-			role="presentation"
-			style={ {
-				transform: `translateX(${ left }px)`,
-				transition: canAnimate ? undefined : 'none',
-				width,
-			} }
-		/>
-	);
-}
-
-export default memo( ToggleGroupControlBackdrop );
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/utils.ts b/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
new file mode 100644
index 00000000000000..0cc6dcd743b119
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control/utils.ts
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { usePrevious } from '@wordpress/compose';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ToggleGroupControlProps } from '../types';
+
+type ValueProp = ToggleGroupControlProps[ 'value' ];
+
+/**
+ * Used to determine, via an internal heuristics, whether an `undefined` value
+ * received for the `value` prop should be interpreted as the component being
+ * used in uncontrolled mode, or as an "empty" value for controlled mode.
+ *
+ * @param valueProp The received `value`
+ */
+export function useComputeControlledOrUncontrolledValue(
+	valueProp: ValueProp
+): { value: ValueProp; defaultValue: ValueProp } {
+	const isInitialRenderRef = useRef( true );
+	const prevValueProp = usePrevious( valueProp );
+	const prevIsControlledRef = useRef( false );
+
+	useEffect( () => {
+		if ( isInitialRenderRef.current ) {
+			isInitialRenderRef.current = false;
+		}
+	}, [] );
+
+	// Assume the component is being used in controlled mode on the first re-render
+	// that has a different `valueProp` from the previous render.
+	const isControlled =
+		prevIsControlledRef.current ||
+		( ! isInitialRenderRef.current && prevValueProp !== valueProp );
+	useEffect( () => {
+		prevIsControlledRef.current = isControlled;
+	}, [ isControlled ] );
+
+	if ( isControlled ) {
+		// When in controlled mode, use `''` instead of `undefined`
+		return { value: valueProp ?? '', defaultValue: undefined };
+	}
+
+	// When in uncontrolled mode, the `value` should be intended as the initial value
+	return { value: undefined, defaultValue: valueProp };
+}
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 4cc82bd3ac7b0c..cfa9d00080467c 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import type { MutableRefObject, ReactNode, ReactText } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import type { RadioStateReturn } from 'reakit';
+import type { ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { BaseControlProps } from '../base-control/types';
+import type { TooltipProps } from '../tooltip/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
@@ -18,7 +17,7 @@ export type ToggleGroupControlOptionBaseProps = {
 	 * @default false
 	 */
 	isIcon?: boolean;
-	value: ReactText;
+	value: string | number;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
 	 * show the aria-label or the label prop text.
@@ -58,7 +57,7 @@ export type WithToolTipProps = {
 	/**
 	 * React children
 	 */
-	children: ReactNode;
+	children: TooltipProps[ 'children' ];
 	/**
 	 * Label for the Tooltip component.
 	 */
@@ -107,11 +106,11 @@ export type ToggleGroupControlProps = Pick<
 	/**
 	 * Callback when a segment is selected.
 	 */
-	onChange?: ( value: ReactText | undefined ) => void;
+	onChange?: ( value: string | number | undefined ) => void;
 	/**
 	 * The selected value.
 	 */
-	value?: ReactText;
+	value?: string | number;
 	/**
 	 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
 	 * `ToggleGroupControlOptionIcon` components.
@@ -123,35 +122,34 @@ export type ToggleGroupControlProps = Pick<
 	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };
 
-type ToggleGroupControlAsRadioContext = {
-	isDeselectable?: false;
-} & RadioStateReturn;
-
-type ToggleGroupControlAsButtonContext = { isDeselectable: true } & Pick<
-	RadioStateReturn,
-	'state' | 'setState'
->;
-
-export type ToggleGroupControlContextProps = Pick<
-	ToggleGroupControlProps,
-	'isBlock' | 'size'
-> & {
+export type ToggleGroupControlContextProps = {
+	activeItemIsNotFirstItem?: () => boolean;
+	isDeselectable?: boolean;
 	baseId: string;
-} & ( ToggleGroupControlAsRadioContext | ToggleGroupControlAsButtonContext );
-
-export type ToggleGroupControlBackdropProps = {
-	containerRef: MutableRefObject< HTMLElement | undefined >;
-	containerWidth?: number | null;
-	isAdaptiveWidth?: boolean;
-	state?: any;
+	isBlock: ToggleGroupControlProps[ 'isBlock' ];
+	size: ToggleGroupControlProps[ 'size' ];
+	value: ToggleGroupControlProps[ 'value' ];
+	setValue: ( newValue: string | number | undefined ) => void;
+	setSelectedElement: ( element: HTMLElement | undefined ) => void;
 };
 
 export type ToggleGroupControlMainControlProps = Pick<
 	ToggleGroupControlProps,
-	'children' | 'isAdaptiveWidth' | 'label' | 'size'
-> & {
-	onChange: ( value: ReactText | undefined ) => void;
-	value?: ReactText;
-};
+	'children' | 'isAdaptiveWidth' | 'label' | 'size' | 'onChange' | 'value'
+> &
+	Pick< ToggleGroupControlContextProps, 'setSelectedElement' >;
diff --git a/packages/components/src/toolbar-button/README.md b/packages/components/src/toolbar-button/README.md
deleted file mode 100644
index 92e9e61777aff5..00000000000000
--- a/packages/components/src/toolbar-button/README.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# ToolbarButton
-
-ToolbarButton can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
-
-It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
-
-## Usage
-
-To create general interfaces, you'll want to render ToolbarButton in a [Toolbar](/packages/components/src/toolbar/README.md) component.
-
-```jsx
-import { Toolbar, ToolbarButton } from '@wordpress/components';
-import { edit } from '@wordpress/icons';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarButton
-				icon={ edit }
-				label="Edit"
-				onClick={ () => alert( 'Editing' ) }
-			/>
-		</Toolbar>
-	);
-}
-```
-
-### Inside BlockControls
-
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
-
-```jsx
-import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { edit } from '@wordpress/icons';
-
-function Edit() {
-	return (
-		<BlockControls>
-			<ToolbarGroup>
-				<ToolbarButton
-					icon={ edit }
-					label="Edit"
-					onClick={ () => alert( 'Editing' ) }
-				/>
-			</ToolbarGroup>
-		</BlockControls>
-	);
-}
-```
-
-## Props
-
-This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component.
-
-## Related components
-
--   If you wish to implement a control to select options grouped as icon buttons you can use the [Toolbar](/packages/components/src/toolbar/README.md) component, which already handles this strategy.
--   The ToolbarButton may be used with other elements such as [Dropdown](/packages/components/src/dropdown/README.md) to display options in a popover.
diff --git a/packages/components/src/toolbar-button/index.js b/packages/components/src/toolbar-button/index.js
deleted file mode 100644
index d053ea2b52cf6e..00000000000000
--- a/packages/components/src/toolbar-button/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-import { useContext, forwardRef } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import ToolbarItem from '../toolbar-item';
-import ToolbarContext from '../toolbar-context';
-import ToolbarButtonContainer from './toolbar-button-container';
-
-function ToolbarButton(
-	{
-		containerClassName,
-		className,
-		extraProps,
-		children,
-		title,
-		isActive,
-		isDisabled,
-		...props
-	},
-	ref
-) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-
-	if ( ! accessibleToolbarState ) {
-		return (
-			<ToolbarButtonContainer className={ containerClassName }>
-				<Button
-					ref={ ref }
-					icon={ props.icon }
-					label={ title }
-					shortcut={ props.shortcut }
-					data-subscript={ props.subscript }
-					onClick={ ( event ) => {
-						event.stopPropagation();
-						if ( props.onClick ) {
-							props.onClick( event );
-						}
-					} }
-					className={ classnames(
-						'components-toolbar__control',
-						className
-					) }
-					isPressed={ isActive }
-					disabled={ isDisabled }
-					data-toolbar-item
-					{ ...extraProps }
-					{ ...props }
-				>
-					{ children }
-				</Button>
-			</ToolbarButtonContainer>
-		);
-	}
-
-	// ToobarItem will pass all props to the render prop child, which will pass
-	// all props to Button. This means that ToolbarButton has the same API as
-	// Button.
-	return (
-		<ToolbarItem
-			className={ classnames( 'components-toolbar-button', className ) }
-			{ ...extraProps }
-			{ ...props }
-			ref={ ref }
-		>
-			{ ( toolbarItemProps ) => (
-				<Button
-					label={ title }
-					isPressed={ isActive }
-					disabled={ isDisabled }
-					{ ...toolbarItemProps }
-				>
-					{ children }
-				</Button>
-			) }
-		</ToolbarItem>
-	);
-}
-
-export default forwardRef( ToolbarButton );
diff --git a/packages/components/src/toolbar-button/stories/index.js b/packages/components/src/toolbar-button/stories/index.js
deleted file mode 100644
index 2a90172a793bd0..00000000000000
--- a/packages/components/src/toolbar-button/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { Toolbar } from '../../';
-import ToolbarButton from '../';
-
-export default {
-	title: 'Components/ToolbarButton',
-	component: ToolbarButton,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'This is an example label.' );
-
-	return (
-		<Toolbar label="Example Toolbar">
-			<ToolbarButton icon={ wordpress } label={ label } />
-		</Toolbar>
-	);
-};
diff --git a/packages/components/src/toolbar-button/style.scss b/packages/components/src/toolbar-button/style.scss
deleted file mode 100644
index 1f295c94a2c672..00000000000000
--- a/packages/components/src/toolbar-button/style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.components-toolbar__control.components-button {
-	position: relative;
-
-	// Subscript for numbered icon buttons, like headings
-	&[data-subscript] svg {
-		padding: 5px 10px 5px 0;
-	}
-
-	&[data-subscript]::after {
-		content: attr(data-subscript);
-		font-family: $default-font;
-		font-size: $default-font-size;
-		font-weight: 600;
-		line-height: 12px;
-		position: absolute;
-		right: 8px;
-		bottom: 10px;
-	}
-
-	// Hide focus rectangle on click.
-	&:active::before {
-		display: none;
-	}
-
-	&:not(:disabled).is-pressed[data-subscript]::after {
-		color: $white;
-	}
-}
diff --git a/packages/components/src/toolbar-button/toolbar-button-container.js b/packages/components/src/toolbar-button/toolbar-button-container.js
deleted file mode 100644
index dcb8ea0026256a..00000000000000
--- a/packages/components/src/toolbar-button/toolbar-button-container.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const ToolbarButtonContainer = ( props ) => (
-	<div className={ props.className }>{ props.children }</div>
-);
-export default ToolbarButtonContainer;
diff --git a/packages/components/src/toolbar-context/index.js b/packages/components/src/toolbar-context/index.js
deleted file mode 100644
index a5095c503f6ece..00000000000000
--- a/packages/components/src/toolbar-context/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-const ToolbarContext = createContext();
-
-export default ToolbarContext;
diff --git a/packages/components/src/toolbar-dropdown-menu/README.md b/packages/components/src/toolbar-dropdown-menu/README.md
deleted file mode 100644
index 866d98a89177fe..00000000000000
--- a/packages/components/src/toolbar-dropdown-menu/README.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# ToolbarDropdownMenu
-
-ToolbarDropdownMenu can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
-
-It has similar features to the [DropdownMenu](/packages/components/src/dropdown-menu/README.md) component. Using `ToolbarDropdownMenu` will ensure that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
-
-## Usage
-
-To create general interfaces, you'll want to render ToolbarButton in a [Toolbar](/packages/components/src/toolbar/README.md) component.
-
-```jsx
-import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
-import {
-	more,
-	arrowLeft,
-	arrowRight,
-	arrowUp,
-	arrowDown,
-} from '@wordpress/icons';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarDropdownMenu
-				icon={ more }
-				label="Select a direction"
-				controls={ [
-					{
-						title: 'Up',
-						icon: arrowUp,
-						onClick: () => console.log( 'up' ),
-					},
-					{
-						title: 'Right',
-						icon: arrowRight,
-						onClick: () => console.log( 'right' ),
-					},
-					{
-						title: 'Down',
-						icon: arrowDown,
-						onClick: () => console.log( 'down' ),
-					},
-					{
-						title: 'Left',
-						icon: arrowLeft,
-						onClick: () => console.log( 'left' ),
-					},
-				] }
-			/>
-		</Toolbar>
-	);
-}
-```
-
-### Inside BlockControls
-
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead.
-
-```jsx
-import { BlockControls } from '@wordpress/block-editor';
-import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
-import {
-	more,
-	arrowLeft,
-	arrowRight,
-	arrowUp,
-	arrowDown,
-} from '@wordpress/icons';
-
-function Edit() {
-	return (
-		<BlockControls group="block">
-			<ToolbarDropdownMenu
-				icon={ more }
-				label="Select a direction"
-				controls={ [
-					{
-						title: 'Up',
-						icon: arrowUp,
-						onClick: () => console.log( 'up' ),
-					},
-					{
-						title: 'Right',
-						icon: arrowRight,
-						onClick: () => console.log( 'right' ),
-					},
-					{
-						title: 'Down',
-						icon: arrowDown,
-						onClick: () => console.log( 'down' ),
-					},
-					{
-						title: 'Left',
-						icon: arrowLeft,
-						onClick: () => console.log( 'left' ),
-					},
-				] }
-			/>
-		</BlockControls>
-	);
-}
-```
-
-## Props
-
-This component accepts [the same API of the DropdownMenu](/packages/components/src/dropdown-menu/README.md#props) component.
diff --git a/packages/components/src/toolbar-dropdown-menu/index.js b/packages/components/src/toolbar-dropdown-menu/index.js
deleted file mode 100644
index 10b73757057bd2..00000000000000
--- a/packages/components/src/toolbar-dropdown-menu/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ToolbarItem from '../toolbar-item';
-import ToolbarContext from '../toolbar-context';
-import DropdownMenu from '../dropdown-menu';
-
-function ToolbarDropdownMenu( props, ref ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-
-	if ( ! accessibleToolbarState ) {
-		return <DropdownMenu { ...props } />;
-	}
-
-	// ToobarItem will pass all props to the render prop child, which will pass
-	// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
-	// has the same API as DropdownMenu.
-	return (
-		<ToolbarItem ref={ ref } { ...props.toggleProps }>
-			{ ( toolbarItemProps ) => (
-				<DropdownMenu
-					{ ...props }
-					popoverProps={ {
-						variant: 'toolbar',
-						...props.popoverProps,
-					} }
-					toggleProps={ toolbarItemProps }
-				/>
-			) }
-		</ToolbarItem>
-	);
-}
-
-export default forwardRef( ToolbarDropdownMenu );
diff --git a/packages/components/src/toolbar-group/README.md b/packages/components/src/toolbar-group/README.md
deleted file mode 100644
index 84dfc1d0e20982..00000000000000
--- a/packages/components/src/toolbar-group/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# ToolbarGroup
-
-A ToolbarGroup can be used to create subgroups of controls inside a [Toolbar](/packages/components/src/toolbar/README.md).
-
-## Usage
-
-```jsx
-import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { paragraph, formatBold, formatItalic, link } from '@wordpress/icons';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarGroup>
-				<ToolbarButton icon={ paragraph } label="Paragraph" />
-			</ToolbarGroup>
-			<ToolbarGroup>
-				<ToolbarButton icon={ formatBold } label="Bold" />
-				<ToolbarButton icon={ formatItalic } label="Italic" />
-				<ToolbarButton icon={ link } label="Link" />
-			</ToolbarGroup>
-		</Toolbar>
-	);
-}
-```
-
-### Props
-
-ToolbarGroup will pass all HTML props to the underlying element.
-
-## Related components
-
--   ToolbarGroup may contain [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
diff --git a/packages/components/src/toolbar-group/index.js b/packages/components/src/toolbar-group/index.js
deleted file mode 100644
index 09f46b6c43cd90..00000000000000
--- a/packages/components/src/toolbar-group/index.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ToolbarButton from '../toolbar-button';
-import ToolbarGroupContainer from './toolbar-group-container';
-import ToolbarGroupCollapsed from './toolbar-group-collapsed';
-import ToolbarContext from '../toolbar-context';
-
-/**
- * Renders a collapsible group of controls
- *
- * The `controls` prop accepts an array of sets. A set is an array of controls.
- * Controls have the following shape:
- *
- * ```
- * {
- *   icon: string,
- *   title: string,
- *   subscript: string,
- *   onClick: Function,
- *   isActive: boolean,
- *   isDisabled: boolean
- * }
- * ```
- *
- * For convenience it is also possible to pass only an array of controls. It is
- * then assumed this is the only set.
- *
- * Either `controls` or `children` is required, otherwise this components
- * renders nothing.
- *
- * @param {Object}    props               Component props.
- * @param {Array}     [props.controls]    The controls to render in this toolbar.
- * @param {WPElement} [props.children]    Any other things to render inside the toolbar besides the controls.
- * @param {string}    [props.className]   Class to set on the container div.
- * @param {boolean}   [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
- * @param {string}    [props.title]       ARIA label for dropdown menu if is collapsed.
- */
-function ToolbarGroup( {
-	controls = [],
-	children,
-	className,
-	isCollapsed,
-	title,
-	...props
-} ) {
-	// It'll contain state if `ToolbarGroup` is being used within
-	// `<Toolbar label="label" />`
-	const accessibleToolbarState = useContext( ToolbarContext );
-
-	if ( ( ! controls || ! controls.length ) && ! children ) {
-		return null;
-	}
-
-	const finalClassName = classnames(
-		// Unfortunately, there's legacy code referencing to `.components-toolbar`
-		// So we can't get rid of it
-		accessibleToolbarState
-			? 'components-toolbar-group'
-			: 'components-toolbar',
-		className
-	);
-
-	// Normalize controls to nested array of objects (sets of controls)
-	let controlSets = controls;
-	if ( ! Array.isArray( controlSets[ 0 ] ) ) {
-		controlSets = [ controlSets ];
-	}
-
-	if ( isCollapsed ) {
-		return (
-			<ToolbarGroupCollapsed
-				label={ title }
-				controls={ controlSets }
-				className={ finalClassName }
-				children={ children }
-				{ ...props }
-			/>
-		);
-	}
-
-	return (
-		<ToolbarGroupContainer className={ finalClassName } { ...props }>
-			{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
-				controlSet.map( ( control, indexOfControl ) => (
-					<ToolbarButton
-						key={ [ indexOfSet, indexOfControl ].join() }
-						containerClassName={
-							indexOfSet > 0 && indexOfControl === 0
-								? 'has-left-divider'
-								: null
-						}
-						{ ...control }
-					/>
-				) )
-			) }
-			{ children }
-		</ToolbarGroupContainer>
-	);
-}
-
-export default ToolbarGroup;
diff --git a/packages/components/src/toolbar-group/stories/index.js b/packages/components/src/toolbar-group/stories/index.js
deleted file mode 100644
index c24447be9dfab4..00000000000000
--- a/packages/components/src/toolbar-group/stories/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { formatBold, formatItalic, link } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { ToolbarButton, ToolbarGroup } from '../../';
-
-export default { title: 'Components/ToolbarGroup', component: ToolbarGroup };
-
-export const _default = () => {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton icon={ formatBold } title="Bold" isActive />
-			<ToolbarButton icon={ formatItalic } title="Italic" />
-			<ToolbarButton icon={ link } title="Link" />
-		</ToolbarGroup>
-	);
-};
-
-export const withControlsProp = () => {
-	return (
-		<ToolbarGroup
-			controls={ [
-				{ icon: formatBold, title: 'Bold', isActive: true },
-				{ icon: formatItalic, title: 'Italic' },
-				{ icon: link, title: 'Link' },
-			] }
-		/>
-	);
-};
diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss
deleted file mode 100644
index cf055791271ae6..00000000000000
--- a/packages/components/src/toolbar-group/style.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-.components-toolbar-group {
-	min-height: $block-toolbar-height;
-	border-right: $border-width solid $gray-900;
-	background-color: $white;
-	display: inline-flex;
-	flex-shrink: 0;
-	flex-wrap: wrap;
-	padding-left: $grid-unit-15 * 0.5; // 6px.
-	padding-right: $grid-unit-15 * 0.5;
-
-	// Unset for nested toolbar groups. Increase specificity.
-	& .components-toolbar-group.components-toolbar-group {
-		border-width: 0;
-		margin: 0;
-	}
-
-	line-height: 0;
-
-	// Size multiple sequential buttons to be optically balanced.
-	// Icons are 36px, as set by a 24px icon and 12px padding.
-	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
-	.components-button.has-icon.has-icon {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-}
-
-// Legacy toolbar group
-// External code references to it, so we can't change it?
-.components-toolbar {
-	min-height: $block-toolbar-height;
-	margin: 0;
-	border: $border-width solid $gray-900;
-	background-color: $white;
-	display: inline-flex;
-	flex-shrink: 0;
-	flex-wrap: wrap;
-
-	// Unset for nested toolbars. Increase specificity.
-	& .components-toolbar.components-toolbar {
-		border-width: 0;
-		margin: 0;
-	}
-}
-
-div.components-toolbar {
-	& > div {
-		// IE11 does not support `position: sticky`, or Flex very well, so use block.
-		display: block;
-		@supports (position: sticky) {
-			display: flex;
-		}
-
-		margin: 0;
-	}
-
-	& > div + div {
-		&.has-left-divider {
-			margin-left: 6px;
-			position: relative;
-			overflow: visible;
-		}
-
-		&.has-left-divider::before {
-			display: inline-block;
-			content: "";
-			box-sizing: content-box;
-			background-color: $gray-300;
-			position: absolute;
-			top: 8px;
-			left: -3px;
-			width: 1px;
-			height: $button-size - 16px;
-		}
-	}
-}
diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar-group/test/index.js
deleted file mode 100644
index e3fd756665905d..00000000000000
--- a/packages/components/src/toolbar-group/test/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import ToolbarGroup from '../';
-
-describe( 'ToolbarGroup', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render an empty node, when controls are not passed', () => {
-			const { container } = render( <ToolbarGroup /> );
-
-			expect( container ).toBeEmptyDOMElement();
-		} );
-
-		it( 'should render an empty node, when controls are empty', () => {
-			const { container } = render( <ToolbarGroup controls={ [] } /> );
-
-			expect( container ).toBeEmptyDOMElement();
-		} );
-
-		it( 'should render a list of controls with buttons', () => {
-			const clickHandler = ( event ) => event;
-			const controls = [
-				{
-					icon: 'wordpress',
-					title: 'WordPress',
-					onClick: clickHandler,
-					isActive: false,
-				},
-			];
-
-			render( <ToolbarGroup controls={ controls } /> );
-
-			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
-			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
-		} );
-
-		it( 'should render a list of controls with buttons and active control', () => {
-			const clickHandler = ( event ) => event;
-			const controls = [
-				{
-					icon: 'wordpress',
-					title: 'WordPress',
-					onClick: clickHandler,
-					isActive: true,
-				},
-			];
-
-			render( <ToolbarGroup controls={ controls } /> );
-
-			const toolbarButton = screen.getByLabelText( 'WordPress' );
-			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
-			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
-		} );
-
-		it( 'should render a nested list of controls with separator between', () => {
-			const controls = [
-				[
-					// First set.
-					{
-						icon: 'wordpress',
-						title: 'WordPress',
-					},
-				],
-				[
-					// Second set.
-					{
-						icon: 'wordpress',
-						title: 'WordPress',
-					},
-				],
-			];
-
-			const { container } = render(
-				<ToolbarGroup controls={ controls } />
-			);
-
-			const buttons = screen.getAllByRole( 'button' );
-			expect( buttons ).toHaveLength( 2 );
-			expect(
-				container.querySelector( '.has-left-divider button' )
-			).toBe( buttons[ 1 ] );
-		} );
-
-		it( 'should call the clickHandler on click.', () => {
-			const clickHandler = jest.fn();
-			const controls = [
-				{
-					icon: 'wordpress',
-					title: 'WordPress',
-					onClick: clickHandler,
-					isActive: true,
-				},
-			];
-			render( <ToolbarGroup controls={ controls } /> );
-
-			fireEvent.click( screen.getByLabelText( 'WordPress' ) );
-			expect( clickHandler ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-} );
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.js b/packages/components/src/toolbar-group/toolbar-group-collapsed.js
deleted file mode 100644
index c671a4dd00f99f..00000000000000
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DropdownMenu from '../dropdown-menu';
-import ToolbarContext from '../toolbar-context';
-import ToolbarItem from '../toolbar-item';
-
-function ToolbarGroupCollapsed( { controls = [], toggleProps, ...props } ) {
-	// It'll contain state if `ToolbarGroup` is being used within
-	// `<Toolbar label="label" />`
-	const accessibleToolbarState = useContext( ToolbarContext );
-
-	const renderDropdownMenu = ( internalToggleProps ) => (
-		<DropdownMenu
-			controls={ controls }
-			toggleProps={ {
-				...internalToggleProps,
-				'data-toolbar-item': true,
-			} }
-			{ ...props }
-		/>
-	);
-
-	if ( accessibleToolbarState ) {
-		return (
-			<ToolbarItem { ...toggleProps }>{ renderDropdownMenu }</ToolbarItem>
-		);
-	}
-
-	return renderDropdownMenu( toggleProps );
-}
-
-export default ToolbarGroupCollapsed;
diff --git a/packages/components/src/toolbar-group/toolbar-group-container.js b/packages/components/src/toolbar-group/toolbar-group-container.js
deleted file mode 100644
index 936960f9c5d7f9..00000000000000
--- a/packages/components/src/toolbar-group/toolbar-group-container.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const ToolbarGroupContainer = ( { className, children, ...props } ) => (
-	<div className={ className } { ...props }>
-		{ children }
-	</div>
-);
-export default ToolbarGroupContainer;
diff --git a/packages/components/src/toolbar-group/toolbar-group-container.native.js b/packages/components/src/toolbar-group/toolbar-group-container.native.js
deleted file mode 100644
index 6eaf0dc0c3c74a..00000000000000
--- a/packages/components/src/toolbar-group/toolbar-group-container.native.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { withPreferredColorScheme } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
-const ToolbarGroupContainer = ( {
-	getStylesFromColorScheme,
-	passedStyle,
-	children,
-} ) => (
-	<View
-		style={ [
-			getStylesFromColorScheme( styles.container, styles.containerDark ),
-			passedStyle,
-		] }
-	>
-		{ children }
-	</View>
-);
-
-export default withPreferredColorScheme( ToolbarGroupContainer );
diff --git a/packages/components/src/toolbar-item/README.md b/packages/components/src/toolbar-item/README.md
deleted file mode 100644
index 31a0dfa1cf4735..00000000000000
--- a/packages/components/src/toolbar-item/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# ToolbarItem
-
-A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
-
-## Usage
-
-### `as` prop
-
-You can use the `as` prop with a custom component or any HTML element.
-
-```jsx
-import { Toolbar, ToolbarItem, Button } from '@wordpress/components';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
-			<ToolbarItem as="button">I am another toolbar button</ToolbarItem>
-		</Toolbar>
-	);
-}
-```
-
-### render prop
-
-You can pass children as function to get the ToolbarItem props and pass them to another component.
-
-```jsx
-import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
-import { table } from '@wordpress/icons';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarItem>
-				{ ( toolbarItemHTMLProps ) => (
-					<DropdownMenu
-						icon={ table }
-						toggleProps={ toolbarItemHTMLProps }
-						label={ 'Edit table' }
-						controls={ [] }
-					/>
-				) }
-			</ToolbarItem>
-		</Toolbar>
-	);
-}
-```
-
-### Inside BlockControls
-
-If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
-
-```jsx
-import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
-
-function Edit() {
-	return (
-		<BlockControls>
-			<ToolbarGroup>
-				<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
-			</ToolbarGroup>
-		</BlockControls>
-	);
-}
-```
-
-## Related components
-
--   ToolbarItem should be used inside [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
--   If you want a simple toolbar button, consider using [ToolbarButton](/packages/components/src/toolbar-button/README.md) instead.
diff --git a/packages/components/src/toolbar-item/index.js b/packages/components/src/toolbar-item/index.js
deleted file mode 100644
index 7f938d55f85584..00000000000000
--- a/packages/components/src/toolbar-item/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef, useContext } from '@wordpress/element';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import ToolbarContext from '../toolbar-context';
-
-function ToolbarItem( { children, as: Component, ...props }, ref ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
-
-	if ( typeof children !== 'function' && ! Component ) {
-		warning(
-			'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +
-				'See https://developer.wordpress.org/block-editor/components/toolbar-item/'
-		);
-		return null;
-	}
-
-	const allProps = { ...props, ref, 'data-toolbar-item': true };
-
-	if ( ! accessibleToolbarState ) {
-		if ( Component ) {
-			return <Component { ...allProps }>{ children }</Component>;
-		}
-		return children( allProps );
-	}
-
-	return (
-		<BaseToolbarItem
-			{ ...accessibleToolbarState }
-			{ ...allProps }
-			as={ Component }
-		>
-			{ children }
-		</BaseToolbarItem>
-	);
-}
-
-export default forwardRef( ToolbarItem );
diff --git a/packages/components/src/toolbar/README.md b/packages/components/src/toolbar/README.md
deleted file mode 100644
index 2ce5bc8b2ad9bd..00000000000000
--- a/packages/components/src/toolbar/README.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Toolbar
-
-Toolbar can be used to group related options. To emphasize groups of related icon buttons, a toolbar should share a common container.
-
-![Toolbar component above an image block](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541782974545_ButtonGroup.png)
-
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
-## Design guidelines
-
-### Usage
-
-### Best practices
-
-Toolbars should:
-
--   **Clearly communicate that clicking or tapping will trigger an action.**
--   **Use established colors appropriately.** For example, only use red for actions that are difficult or impossible to undo.
--   When used with a block, have a consistent location above the block. **Otherwise, have a consistent location in the interface.**
-
-![A toolbar attached to the top left side of a block. (1. Toolbar, 2. Block)](https://wordpress.org/gutenberg/files/2019/01/s_D8D19E5A314C2D056B8CCC92B2DB5E27164936A0C5ED98A4C2DFDA650BE2A771_1542388042335_toolbar-block.png)
-
-### States
-
-#### Active and available toolbars
-
-A toolbar’s state makes it clear which icon button is active. Hover and focus states express the available selection options for icon buttons in a toolbar.
-
-![Toolbar component](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541784539545_ButtonGroup.png)
-
-#### Disabled toolbars
-
-Toolbars that cannot be selected can either be given a disabled state, or be hidden.
-
-## Development guidelines
-
-### Usage
-
-```jsx
-import { Toolbar, ToolbarButton } from '@wordpress/components';
-import { formatBold, formatItalic, link } from '@wordpress/icons';
-
-function MyToolbar() {
-	return (
-		<Toolbar label="Options">
-			<ToolbarButton icon={ formatBold } label="Bold" />
-			<ToolbarButton icon={ formatItalic } label="Italic" />
-			<ToolbarButton icon={ link } label="Link" />
-		</Toolbar>
-	);
-}
-```
-
-### Props
-
-Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.
-
-#### label
-
-An accessible label for the toolbar.
-
--   Type: `String`
--   Required: Yes
-
-## Related components
-
--   Toolbar may contain [ToolbarGroup](/packages/components/src/toolbar-group/README.md), [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js
index f798e3c3776a9f..a337fd3af4d216 100644
--- a/packages/components/src/toolbar/index.js
+++ b/packages/components/src/toolbar/index.js
@@ -1,52 +1,6 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import ToolbarGroup from '../toolbar-group';
-import ToolbarContainer from './toolbar-container';
-
-/**
- * Renders a toolbar.
- *
- * To add controls, simply pass `ToolbarButton` components as children.
- *
- * @param {Object} props             Component props.
- * @param {string} [props.className] Class to set on the container div.
- * @param {string} [props.label]     ARIA label for toolbar container.
- * @param {Object} ref               React Element ref.
- */
-function Toolbar( { className, label, ...props }, ref ) {
-	if ( ! label ) {
-		deprecated( 'Using Toolbar without label prop', {
-			since: '5.6',
-			alternative: 'ToolbarGroup component',
-			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
-		} );
-		return <ToolbarGroup { ...props } className={ className } />;
-	}
-	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
-	const finalClassName = classnames(
-		'components-accessible-toolbar',
-		className
-	);
-	return (
-		<ToolbarContainer
-			className={ finalClassName }
-			label={ label }
-			ref={ ref }
-			{ ...props }
-		/>
-	);
-}
-
-export default forwardRef( Toolbar );
+export { default as Toolbar } from './toolbar';
+export { default as ToolbarButton } from './toolbar-button';
+export { default as ToolbarContext } from './toolbar-context';
+export { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';
+export { default as ToolbarGroup } from './toolbar-group';
+export { default as ToolbarItem } from './toolbar-item';
diff --git a/packages/components/src/toolbar/stories/index.js b/packages/components/src/toolbar/stories/index.js
deleted file mode 100644
index 298cd97a8674ab..00000000000000
--- a/packages/components/src/toolbar/stories/index.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	alignCenter,
-	alignLeft,
-	alignRight,
-	code,
-	formatBold,
-	formatItalic,
-	formatStrikethrough,
-	link,
-	more,
-	paragraph,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Toolbar from '../';
-import {
-	SVG,
-	Path,
-	ToolbarButton,
-	ToolbarGroup,
-	ToolbarItem,
-	DropdownMenu,
-} from '../../';
-
-export default { title: 'Components/Toolbar', component: Toolbar };
-
-function InlineImageIcon() {
-	return (
-		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-			<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
-		</SVG>
-	);
-}
-
-/* eslint-disable no-restricted-syntax */
-export const _default = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar">
-			<ToolbarGroup>
-				<ToolbarButton icon={ paragraph } label="Paragraph" />
-			</ToolbarGroup>
-			<ToolbarGroup>
-				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<DropdownMenu
-							hasArrowIndicator
-							icon={ alignLeft }
-							label="Align"
-							controls={ [
-								{
-									icon: alignLeft,
-									title: 'Align left',
-									isActive: true,
-								},
-								{
-									icon: alignCenter,
-									title: 'Align center',
-								},
-								{
-									icon: alignRight,
-									title: 'Align right',
-								},
-							] }
-							toggleProps={ toggleProps }
-						/>
-					) }
-				</ToolbarItem>
-			</ToolbarGroup>
-			<ToolbarGroup>
-				<ToolbarButton>Text</ToolbarButton>
-				<ToolbarButton icon={ formatBold } label="Bold" isPressed />
-				<ToolbarButton icon={ formatItalic } label="Italic" />
-				<ToolbarButton icon={ link } label="Link" />
-				<ToolbarGroup
-					isCollapsed
-					icon={ false }
-					label="More rich text controls"
-					controls={ [
-						{ icon: code, title: 'Inline code' },
-						{ icon: <InlineImageIcon />, title: 'Inline image' },
-						{
-							icon: formatStrikethrough,
-							title: 'Strikethrough',
-						},
-					] }
-				/>
-			</ToolbarGroup>
-			<ToolbarGroup
-				icon={ more }
-				label="Align"
-				isCollapsed
-				controls={ [
-					{
-						icon: alignLeft,
-						title: 'Align left',
-						isActive: true,
-					},
-					{ icon: alignCenter, title: 'Align center' },
-					{ icon: alignRight, title: 'Align right' },
-				] }
-			/>
-		</Toolbar>
-	);
-};
-
-export const withoutGroup = () => {
-	return (
-		// id is required for server side rendering
-		<Toolbar label="Options" id="options-toolbar-without-group">
-			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
-			<ToolbarButton icon={ formatItalic } label="Italic" />
-			<ToolbarButton icon={ link } label="Link" />
-		</Toolbar>
-	);
-};
-/* eslint-enable no-restricted-syntax */
-
-export const toolbars = () => {
-	return (
-		<div>
-			<div style={ { padding: '20px' } }>
-				<h2>Icon-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton
-						icon={ formatItalic }
-						title="Italic"
-						isActive
-					/>
-					<ToolbarButton icon={ link } title="Link" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text-only Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Format</ToolbarButton>
-					<ToolbarButton isActive>Italic Format</ToolbarButton>
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Text and Icon Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-					<ToolbarButton isActive>Bold Format</ToolbarButton>
-					<ToolbarButton icon={ formatItalic } title="Italic" />
-					<ToolbarButton>Italic Format</ToolbarButton>
-					<ToolbarButton icon={ link } title="Link" />
-					<ToolbarButton>Link Format</ToolbarButton>
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Icon Button Toolbar</h2>
-				<Toolbar>
-					<ToolbarButton icon={ formatBold } title="Bold" />
-				</Toolbar>
-			</div>
-
-			<div style={ { padding: '20px' } }>
-				<h2>Single Text Button toolbar</h2>
-				<Toolbar>
-					<ToolbarButton>Bold Toolbar</ToolbarButton>
-				</Toolbar>
-			</div>
-		</div>
-	);
-};
diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx
new file mode 100644
index 00000000000000..8590c1ec8a2c6b
--- /dev/null
+++ b/packages/components/src/toolbar/stories/index.story.tsx
@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	alignCenter,
+	alignLeft,
+	alignRight,
+	code,
+	formatBold,
+	formatItalic,
+	formatStrikethrough,
+	link,
+	more,
+	paragraph,
+	arrowUp,
+	arrowDown,
+	arrowLeft,
+	arrowRight,
+	chevronDown,
+} from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Toolbar,
+	ToolbarButton,
+	ToolbarGroup,
+	ToolbarItem,
+	ToolbarDropdownMenu,
+} from '..';
+import DropdownMenu from '../../dropdown-menu';
+
+const meta: Meta< typeof Toolbar > = {
+	title: 'Components/Toolbar',
+	component: Toolbar,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarDropdownMenu,
+	},
+	argTypes: {
+		children: { control: false },
+		variant: {
+			options: [ undefined, 'unstyled' ],
+			control: { type: 'radio' },
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+function InlineImageIcon() {
+	return (
+		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
+		</SVG>
+	);
+}
+
+const Template: StoryFn< typeof Toolbar > = ( props ) => (
+	<div style={ { height: 280 } }>
+		<Toolbar { ...props } />
+	</div>
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Options',
+	id: 'options-toolbar',
+	children: (
+		<>
+			<ToolbarGroup>
+				<ToolbarButton icon={ paragraph } text="Paragraph" />
+			</ToolbarGroup>
+			<ToolbarGroup>
+				<ToolbarItem>
+					{ ( toggleProps ) => (
+						<DropdownMenu
+							icon={ alignLeft }
+							label="Align"
+							controls={ [
+								{
+									icon: alignLeft,
+									title: 'Align left',
+									isActive: true,
+								},
+								{
+									icon: alignCenter,
+									title: 'Align center',
+								},
+								{
+									icon: alignRight,
+									title: 'Align right',
+								},
+							] }
+							toggleProps={ toggleProps }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+			<ToolbarGroup>
+				<ToolbarButton>Text</ToolbarButton>
+				<ToolbarButton icon={ formatBold } label="Bold" isPressed />
+				<ToolbarButton icon={ formatItalic } label="Italic" />
+				<ToolbarButton icon={ link } label="Link" />
+				<ToolbarGroup
+					isCollapsed
+					icon={ null }
+					title="More rich text controls"
+					controls={ [
+						{ icon: code, title: 'Inline code' },
+						{ icon: <InlineImageIcon />, title: 'Inline image' },
+						{
+							icon: formatStrikethrough,
+							title: 'Strikethrough',
+						},
+					] }
+				/>
+			</ToolbarGroup>
+			<ToolbarGroup
+				icon={ more }
+				title="Align"
+				isCollapsed
+				controls={ [
+					{
+						icon: alignLeft,
+						title: 'Align left',
+						isActive: true,
+					},
+					{ icon: alignCenter, title: 'Align center' },
+					{ icon: alignRight, title: 'Align right' },
+				] }
+			/>
+			<ToolbarDropdownMenu
+				icon={ chevronDown }
+				label="Select a direction"
+				controls={ [
+					{
+						title: 'Up',
+						icon: arrowUp,
+					},
+					{
+						title: 'Right',
+						icon: arrowRight,
+					},
+					{
+						title: 'Down',
+						icon: arrowDown,
+					},
+					{
+						title: 'Left',
+						icon: arrowLeft,
+					},
+				] }
+			/>
+		</>
+	),
+};
+
+export const WithoutGroup = Template.bind( {} );
+WithoutGroup.args = {
+	label: 'Options',
+	id: 'options-toolbar-without-group',
+	children: (
+		<>
+			<ToolbarButton icon={ formatBold } label="Bold" isPressed />
+			<ToolbarButton icon={ formatItalic } label="Italic" />
+			<ToolbarButton icon={ link } label="Link" />
+		</>
+	),
+};
+
+/**
+ * Set the variant to `unstyled` to remove default border styles.
+ * Otherwise, leave it as `undefined` for default styles.
+ */
+
+export const Unstyled = Template.bind( {} );
+Unstyled.args = {
+	...Default.args,
+	variant: 'unstyled',
+};
diff --git a/packages/components/src/toolbar/style.native.scss b/packages/components/src/toolbar/style.native.scss
deleted file mode 100644
index e218aa37363e37..00000000000000
--- a/packages/components/src/toolbar/style.native.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.container {
-	flex-direction: row;
-	border-left-width: 1px;
-	border-color: #e9eff3;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-.containerDark {
-	border-color: #525354;
-}
diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
deleted file mode 100644
index d24a3317328d64..00000000000000
--- a/packages/components/src/toolbar/style.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.components-accessible-toolbar {
-	display: inline-flex;
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	flex-shrink: 0;
-
-	& > .components-toolbar-group:last-child {
-		border-right: none;
-	}
-}
-
-.components-accessible-toolbar,
-.components-toolbar {
-	.components-button {
-		position: relative;
-		height: $block-toolbar-height;
-		z-index: 1;
-
-		// Give all buttons extra padding to fit text.
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus and toggle pseudo elements.
-		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
-			height: $grid-unit-40;
-
-			// Position the focus rectangle.
-			left: $grid-unit-10;
-			right: $grid-unit-10;
-			z-index: -1;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
-		}
-
-		svg {
-			position: relative;
-
-			// Center the icon inside.
-			margin-left: auto;
-			margin-right: auto;
-		}
-
-		// Toggled style.
-		&.is-pressed {
-			background: transparent;
-
-			&:hover {
-				background: transparent;
-			}
-
-			&::before {
-				background: $gray-900;
-			}
-		}
-
-		// Focus style.
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Ensure the icon buttons remain square.
-		// This needs specificity.
-		&.has-icon.has-icon {
-			// Reduce the default padding when a button only has an icon.
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-			min-width: $block-toolbar-height;
-		}
-
-		// @todo: We should extract the tabs styles to the tabs component itself
-		&.components-tab-button {
-			font-weight: 500;
-
-			span {
-				display: inline-block;
-				padding-left: 0;
-				padding-right: 0;
-				position: relative;
-			}
-		}
-	}
-}
-
-
-@keyframes components-button__appear-animation {
-	from {
-		transform: scaleY(0);
-	}
-	to {
-		transform: scaleY(1);
-	}
-}
diff --git a/packages/components/src/toolbar/test/index.js b/packages/components/src/toolbar/test/index.js
deleted file mode 100644
index 1b48415d28ca9e..00000000000000
--- a/packages/components/src/toolbar/test/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import Toolbar from '../';
-import ToolbarButton from '../../toolbar-button';
-
-describe( 'Toolbar', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render a toolbar with toolbar buttons', () => {
-			render(
-				<Toolbar label="blocks">
-					<ToolbarButton label="control1" />
-					<ToolbarButton label="control2" />
-				</Toolbar>
-			);
-
-			expect(
-				screen.getByLabelText( 'control1', { selector: 'button' } )
-			).toBeInTheDocument();
-			expect(
-				screen.getByLabelText( 'control2', { selector: 'button' } )
-			).toBeInTheDocument();
-		} );
-	} );
-} );
diff --git a/packages/components/src/toolbar/test/index.tsx b/packages/components/src/toolbar/test/index.tsx
new file mode 100644
index 00000000000000..74c58804fc0991
--- /dev/null
+++ b/packages/components/src/toolbar/test/index.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Toolbar, ToolbarButton } from '..';
+
+describe( 'Toolbar', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render a toolbar with toolbar buttons', () => {
+			render(
+				<Toolbar label="blocks">
+					<ToolbarButton label="control1" />
+					<ToolbarButton label="control2" />
+				</Toolbar>
+			);
+
+			expect(
+				screen.getByLabelText( 'control1', { selector: 'button' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByLabelText( 'control2', { selector: 'button' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should apply the unstyled variant correctly via the `variant` prop', () => {
+			render( <Toolbar label="blocks" variant="unstyled" /> );
+
+			expect( screen.getByRole( 'toolbar' ) ).toHaveClass(
+				'is-unstyled'
+			);
+		} );
+	} );
+} );
diff --git a/packages/components/src/toolbar/test/toolbar-group.tsx b/packages/components/src/toolbar/test/toolbar-group.tsx
new file mode 100644
index 00000000000000..50aa1399c50a65
--- /dev/null
+++ b/packages/components/src/toolbar/test/toolbar-group.tsx
@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { ToolbarGroup } from '..';
+
+/**
+ * WordPress dependencies
+ */
+import { wordpress } from '@wordpress/icons';
+
+describe( 'ToolbarGroup', () => {
+	describe( 'basic rendering', () => {
+		it( 'should render an empty node, when controls are not passed', () => {
+			const { container } = render( <ToolbarGroup /> );
+
+			expect( container ).toBeEmptyDOMElement();
+		} );
+
+		it( 'should render an empty node, when controls are empty', () => {
+			const { container } = render( <ToolbarGroup controls={ [] } /> );
+
+			expect( container ).toBeEmptyDOMElement();
+		} );
+
+		it( 'should render a list of controls with buttons', () => {
+			const clickHandler = ( event?: React.MouseEvent ) => event;
+
+			const controls = [
+				{
+					icon: wordpress,
+					title: 'WordPress',
+					onClick: clickHandler,
+					isActive: false,
+				},
+			];
+
+			render( <ToolbarGroup controls={ controls } /> );
+
+			const toolbarButton = screen.getByLabelText( 'WordPress' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
+		} );
+
+		it( 'should render a list of controls with buttons and active control', () => {
+			const clickHandler = ( event?: React.MouseEvent ) => event;
+			const controls = [
+				{
+					icon: wordpress,
+					title: 'WordPress',
+					onClick: clickHandler,
+					isActive: true,
+				},
+			];
+
+			render( <ToolbarGroup controls={ controls } /> );
+
+			const toolbarButton = screen.getByLabelText( 'WordPress' );
+			expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( toolbarButton ).toHaveAttribute( 'type', 'button' );
+		} );
+
+		it( 'should render a nested list of controls with separator between', () => {
+			const controls = [
+				[
+					// First set.
+					{
+						icon: wordpress,
+						title: 'WordPress',
+					},
+				],
+				[
+					// Second set.
+					{
+						icon: wordpress,
+						title: 'WordPress',
+					},
+				],
+			];
+
+			render( <ToolbarGroup controls={ controls } /> );
+
+			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'
+			);
+		} );
+
+		it( 'should call the clickHandler on click.', () => {
+			const clickHandler = jest.fn();
+			const controls = [
+				{
+					icon: wordpress,
+					title: 'WordPress',
+					onClick: clickHandler,
+					isActive: true,
+				},
+			];
+			render( <ToolbarGroup controls={ controls } /> );
+
+			fireEvent.click( screen.getByLabelText( 'WordPress' ) );
+			expect( clickHandler ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/toolbar/toolbar-button/README.md b/packages/components/src/toolbar/toolbar-button/README.md
new file mode 100644
index 00000000000000..99338e32c1b700
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button/README.md
@@ -0,0 +1,71 @@
+# ToolbarButton
+
+ToolbarButton can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
+
+It has similar features to the [Button](/packages/components/src/button/README.md) component. Using `ToolbarButton` will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
+
+## Usage
+
+To create general interfaces, you'll want to render ToolbarButton in a [Toolbar](/packages/components/src/toolbar/README.md) component.
+
+```jsx
+import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { edit } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarButton
+				icon={ edit }
+				label="Edit"
+				onClick={ () => alert( 'Editing' ) }
+			/>
+		</Toolbar>
+	);
+}
+```
+
+### Inside BlockControls
+
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+
+```jsx
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { edit } from '@wordpress/icons';
+
+function Edit() {
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton
+					icon={ edit }
+					label="Edit"
+					onClick={ () => alert( 'Editing' ) }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+```
+
+## Props
+
+This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component in addition to:
+
+#### `containerClassName`: `string`
+
+An optional additional class name to apply to the button container.
+
+-   Required: No
+
+#### `subscript`: `string`
+
+An optional subscript for the button.
+
+-   Required: No
+
+## Related components
+
+-   If you wish to implement a control to select options grouped as icon buttons you can use the [Toolbar](/packages/components/src/toolbar/README.md) component, which already handles this strategy.
+-   The ToolbarButton may be used with other elements such as [Dropdown](/packages/components/src/dropdown/README.md) to display options in a popover.
diff --git a/packages/components/src/toolbar/toolbar-button/index.tsx b/packages/components/src/toolbar/toolbar-button/index.tsx
new file mode 100644
index 00000000000000..ae1f54acbfc14d
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button/index.tsx
@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ForwardedRef, MouseEvent as ReactMouseEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ToolbarItem from '../toolbar-item';
+import ToolbarContext from '../toolbar-context';
+import ToolbarButtonContainer from './toolbar-button-container';
+import type { ToolbarButtonOverriddenProps, ToolbarButtonProps } from './types';
+import type { WordPressComponentProps } from '../../context';
+
+function useDeprecatedProps( {
+	isDisabled,
+	...otherProps
+}: React.ComponentProps< typeof ToolbarButton > ) {
+	return {
+		disabled: isDisabled,
+		...otherProps,
+	};
+}
+
+function UnforwardedToolbarButton(
+	props: Omit<
+		WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+		'accessibleWhenDisabled' // By default, ToolbarButton will be focusable when disabled.
+	> &
+		ToolbarButtonOverriddenProps,
+	ref: ForwardedRef< any >
+) {
+	const {
+		children,
+		className,
+		containerClassName,
+		extraProps,
+		isActive,
+		title,
+		...restProps
+	} = useDeprecatedProps( props );
+	const accessibleToolbarState = useContext( ToolbarContext );
+
+	if ( ! accessibleToolbarState ) {
+		return (
+			<ToolbarButtonContainer className={ containerClassName }>
+				<Button
+					ref={ ref }
+					icon={ restProps.icon }
+					size="compact"
+					label={ title }
+					shortcut={ restProps.shortcut }
+					data-subscript={ restProps.subscript }
+					onClick={ (
+						event: ReactMouseEvent<
+							HTMLButtonElement & HTMLAnchorElement,
+							MouseEvent
+						>
+					) => {
+						event.stopPropagation();
+						// TODO: Possible bug; maybe use onClick instead of restProps.onClick.
+						if ( restProps.onClick ) {
+							restProps.onClick( event );
+						}
+					} }
+					className={ clsx(
+						'components-toolbar__control',
+						className
+					) }
+					isPressed={ isActive }
+					accessibleWhenDisabled
+					data-toolbar-item
+					{ ...extraProps }
+					{ ...restProps }
+				>
+					{ children }
+				</Button>
+			</ToolbarButtonContainer>
+		);
+	}
+
+	// ToobarItem will pass all props to the render prop child, which will pass
+	// all props to Button. This means that ToolbarButton has the same API as
+	// Button.
+	return (
+		<ToolbarItem
+			className={ clsx( 'components-toolbar-button', className ) }
+			{ ...extraProps }
+			{ ...restProps }
+			ref={ ref }
+		>
+			{ ( toolbarItemProps ) => (
+				<Button
+					size="compact"
+					label={ title }
+					isPressed={ isActive }
+					{ ...toolbarItemProps }
+				>
+					{ children }
+				</Button>
+			) }
+		</ToolbarItem>
+	);
+}
+
+/**
+ * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
+ * or ToolbarGroup when used to create general interfaces.
+ *
+ * ```jsx
+ * import { Toolbar, ToolbarButton } from '@wordpress/components';
+ * import { edit } from '@wordpress/icons';
+ *
+ * function MyToolbar() {
+ *   return (
+ *		<Toolbar label="Options">
+ *			<ToolbarButton
+ *				icon={ edit }
+ *				label="Edit"
+ *				onClick={ () => alert( 'Editing' ) }
+ *			/>
+ *		</Toolbar>
+ *   );
+ * }
+ * ```
+ */
+export const ToolbarButton = forwardRef( UnforwardedToolbarButton );
+export default ToolbarButton;
diff --git a/packages/components/src/toolbar/toolbar-button/style.scss b/packages/components/src/toolbar/toolbar-button/style.scss
new file mode 100644
index 00000000000000..b90b1bec49dfdb
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button/style.scss
@@ -0,0 +1,23 @@
+.components-toolbar__control.components-button {
+	position: relative;
+
+	// Subscript for numbered icon buttons, like headings
+	&[data-subscript] svg {
+		padding: 5px 10px 5px 0;
+	}
+
+	&[data-subscript]::after {
+		content: attr(data-subscript);
+		font-family: $default-font;
+		font-size: $default-font-size;
+		font-weight: 600;
+		line-height: 12px;
+		position: absolute;
+		right: 8px;
+		bottom: 10px;
+	}
+
+	&:not(:disabled).is-pressed[data-subscript]::after {
+		color: $white;
+	}
+}
diff --git a/packages/components/src/toolbar-button/toolbar-button-container.native.js b/packages/components/src/toolbar/toolbar-button/toolbar-button-container.native.js
similarity index 100%
rename from packages/components/src/toolbar-button/toolbar-button-container.native.js
rename to packages/components/src/toolbar/toolbar-button/toolbar-button-container.native.js
diff --git a/packages/components/src/toolbar/toolbar-button/toolbar-button-container.tsx b/packages/components/src/toolbar/toolbar-button/toolbar-button-container.tsx
new file mode 100644
index 00000000000000..47594c1e99b58b
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button/toolbar-button-container.tsx
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import type { ToolbarButtonContainerProps } from './types';
+
+const ToolbarButtonContainer = ( {
+	children,
+	className,
+}: ToolbarButtonContainerProps ) => (
+	<div className={ className }>{ children }</div>
+);
+
+export default ToolbarButtonContainer;
diff --git a/packages/components/src/toolbar/toolbar-button/types.ts b/packages/components/src/toolbar/toolbar-button/types.ts
new file mode 100644
index 00000000000000..bfe2f9c10ba49f
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-button/types.ts
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ToolbarButtonProps = {
+	/**
+	 * Children to be rendered inside the button.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	containerClassName?: string;
+	/**
+	 * Additional props to be passed alongside props.
+	 */
+	extraProps?: any;
+	/**
+	 * Indicates if the button is active.
+	 */
+	isActive?: boolean;
+	/**
+	 * Indicates if the button is disabled.
+	 *
+	 * @deprecated Use `disabled` instead.
+	 * @ignore
+	 */
+	isDisabled?: boolean;
+	/**
+	 * An optional subscript for the button.
+	 */
+	subscript?: string;
+	/**
+	 * An optional title/label for the button.
+	 */
+	title?: string;
+};
+
+export type ToolbarButtonOverriddenProps = {
+	/**
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * In most cases, it is recommended to set this to `true`. Disabling a control without maintaining focusability
+	 * can cause accessibility issues, by hiding their presence from screen reader users,
+	 * or by preventing focus from returning to a trigger element.
+	 *
+	 * Learn more about the [focusability of disabled controls](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)
+	 * in the WAI-ARIA Authoring Practices Guide.
+	 *
+	 * @default true
+	 */
+	accessibleWhenDisabled?: boolean;
+};
+
+export type ToolbarButtonContainerProps = {
+	/**
+	 * Children to be rendered inside the button container.
+	 */
+	children?: ReactNode;
+	/**
+	 * An optional class name for the button container.
+	 */
+	className?: string;
+};
diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js
deleted file mode 100644
index 4e39fb0990677b..00000000000000
--- a/packages/components/src/toolbar/toolbar-container.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import { useToolbarState, Toolbar } from 'reakit/Toolbar';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ToolbarContext from '../toolbar-context';
-
-function ToolbarContainer( { label, ...props }, ref ) {
-	// https://reakit.io/docs/basic-concepts/#state-hooks
-	// Passing baseId for server side rendering (which includes snapshots)
-	// If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids
-	const toolbarState = useToolbarState( {
-		loop: true,
-		baseId: props.id,
-		rtl: isRTL(),
-	} );
-
-	return (
-		// This will provide state for `ToolbarButton`'s
-		<ToolbarContext.Provider value={ toolbarState }>
-			<Toolbar
-				ref={ ref }
-				aria-label={ label }
-				{ ...toolbarState }
-				{ ...props }
-			/>
-		</ToolbarContext.Provider>
-	);
-}
-
-export default forwardRef( ToolbarContainer );
diff --git a/packages/components/src/toolbar/toolbar-context/index.ts b/packages/components/src/toolbar/toolbar-context/index.ts
new file mode 100644
index 00000000000000..33d407eac5c180
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-context/index.ts
@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const ToolbarContext = createContext< Ariakit.ToolbarStore | undefined >(
+	undefined
+);
+
+export default ToolbarContext;
diff --git a/packages/components/src/toolbar/toolbar-dropdown-menu/README.md b/packages/components/src/toolbar/toolbar-dropdown-menu/README.md
new file mode 100644
index 00000000000000..4abcf3a9164e50
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-dropdown-menu/README.md
@@ -0,0 +1,106 @@
+# ToolbarDropdownMenu
+
+ToolbarDropdownMenu can be used to add actions to a toolbar, usually inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
+
+It has similar features to the [DropdownMenu](/packages/components/src/dropdown-menu/README.md) component. Using `ToolbarDropdownMenu` will ensure that keyboard interactions in a toolbar are consistent with the [WAI-ARIA toolbar pattern](https://www.w3.org/TR/wai-aria-practices/#toolbar).
+
+## Usage
+
+To create general interfaces, you'll want to render ToolbarButton in a [Toolbar](/packages/components/src/toolbar/README.md) component.
+
+```jsx
+import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
+import {
+	more,
+	arrowLeft,
+	arrowRight,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarDropdownMenu
+				icon={ more }
+				label="Select a direction"
+				controls={ [
+					{
+						title: 'Up',
+						icon: arrowUp,
+						onClick: () => console.log( 'up' ),
+					},
+					{
+						title: 'Right',
+						icon: arrowRight,
+						onClick: () => console.log( 'right' ),
+					},
+					{
+						title: 'Down',
+						icon: arrowDown,
+						onClick: () => console.log( 'down' ),
+					},
+					{
+						title: 'Left',
+						icon: arrowLeft,
+						onClick: () => console.log( 'left' ),
+					},
+				] }
+			/>
+		</Toolbar>
+	);
+}
+```
+
+### Inside BlockControls
+
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead.
+
+```jsx
+import { BlockControls } from '@wordpress/block-editor';
+import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
+import {
+	more,
+	arrowLeft,
+	arrowRight,
+	arrowUp,
+	arrowDown,
+} from '@wordpress/icons';
+
+function Edit() {
+	return (
+		<BlockControls group="block">
+			<ToolbarDropdownMenu
+				icon={ more }
+				label="Select a direction"
+				controls={ [
+					{
+						title: 'Up',
+						icon: arrowUp,
+						onClick: () => console.log( 'up' ),
+					},
+					{
+						title: 'Right',
+						icon: arrowRight,
+						onClick: () => console.log( 'right' ),
+					},
+					{
+						title: 'Down',
+						icon: arrowDown,
+						onClick: () => console.log( 'down' ),
+					},
+					{
+						title: 'Left',
+						icon: arrowLeft,
+						onClick: () => console.log( 'left' ),
+					},
+				] }
+			/>
+		</BlockControls>
+	);
+}
+```
+
+## Props
+
+This component accepts [the same API of the DropdownMenu](/packages/components/src/dropdown-menu/README.md#props) component.
diff --git a/packages/components/src/toolbar/toolbar-dropdown-menu/index.tsx b/packages/components/src/toolbar/toolbar-dropdown-menu/index.tsx
new file mode 100644
index 00000000000000..6dc5fd523ec2fa
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-dropdown-menu/index.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarItem from '../toolbar-item';
+import ToolbarContext from '../toolbar-context';
+import DropdownMenu from '../../dropdown-menu';
+import type { DropdownMenuProps } from '../../dropdown-menu/types';
+
+function ToolbarDropdownMenu(
+	props: DropdownMenuProps,
+	ref: ForwardedRef< any >
+) {
+	const accessibleToolbarState = useContext( ToolbarContext );
+
+	if ( ! accessibleToolbarState ) {
+		return <DropdownMenu { ...props } />;
+	}
+
+	// ToolbarItem will pass all props to the render prop child, which will pass
+	// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
+	// has the same API as DropdownMenu.
+	return (
+		<ToolbarItem ref={ ref } { ...props.toggleProps }>
+			{ ( toolbarItemProps ) => (
+				<DropdownMenu
+					{ ...props }
+					popoverProps={ {
+						...props.popoverProps,
+					} }
+					toggleProps={ toolbarItemProps }
+				/>
+			) }
+		</ToolbarItem>
+	);
+}
+
+export default forwardRef( ToolbarDropdownMenu );
diff --git a/packages/components/src/toolbar/toolbar-group/README.md b/packages/components/src/toolbar/toolbar-group/README.md
new file mode 100644
index 00000000000000..7f6f3be67435af
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/README.md
@@ -0,0 +1,33 @@
+# ToolbarGroup
+
+A ToolbarGroup can be used to create subgroups of controls inside a [Toolbar](/packages/components/src/toolbar/toolbar/README.md).
+
+## Usage
+
+```jsx
+import { Toolbar, ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { paragraph, formatBold, formatItalic, link } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarGroup>
+				<ToolbarButton icon={ paragraph } label="Paragraph" />
+			</ToolbarGroup>
+			<ToolbarGroup>
+				<ToolbarButton icon={ formatBold } label="Bold" />
+				<ToolbarButton icon={ formatItalic } label="Italic" />
+				<ToolbarButton icon={ link } label="Link" />
+			</ToolbarGroup>
+		</Toolbar>
+	);
+}
+```
+
+### Props
+
+ToolbarGroup will pass all HTML props to the underlying element.
+
+## Related components
+
+-   ToolbarGroup may contain [ToolbarButton](/packages/components/src/toolbar/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar/toolbar-item/README.md) as children.
diff --git a/packages/components/src/toolbar/toolbar-group/index.tsx b/packages/components/src/toolbar/toolbar-group/index.tsx
new file mode 100644
index 00000000000000..af555233cc25c6
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/index.tsx
@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarButton from '../toolbar-button';
+import ToolbarGroupContainer from './toolbar-group-container';
+import ToolbarGroupCollapsed from './toolbar-group-collapsed';
+import ToolbarContext from '../toolbar-context';
+import type { ToolbarGroupProps, ToolbarGroupControls } from './types';
+
+function isNestedArray< T = any >( arr: T[] | T[][] ): arr is T[][] {
+	return Array.isArray( arr ) && Array.isArray( arr[ 0 ] );
+}
+
+/**
+ * Renders a collapsible group of controls
+ *
+ * The `controls` prop accepts an array of sets. A set is an array of controls.
+ * Controls have the following shape:
+ *
+ * ```
+ * {
+ *   icon: string,
+ *   title: string,
+ *   subscript: string,
+ *   onClick: Function,
+ *   isActive: boolean,
+ *   isDisabled: boolean
+ * }
+ * ```
+ *
+ * For convenience it is also possible to pass only an array of controls. It is
+ * then assumed this is the only set.
+ *
+ * Either `controls` or `children` is required, otherwise this components
+ * renders nothing.
+ *
+ * @param props               Component props.
+ * @param [props.controls]    The controls to render in this toolbar.
+ * @param [props.children]    Any other things to render inside the toolbar besides the controls.
+ * @param [props.className]   Class to set on the container div.
+ * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
+ * @param [props.title]       ARIA label for dropdown menu if is collapsed.
+ */
+function ToolbarGroup( {
+	controls = [],
+	children,
+	className,
+	isCollapsed,
+	title,
+	...props
+}: ToolbarGroupProps ) {
+	// It'll contain state if `ToolbarGroup` is being used within
+	// `<Toolbar label="label" />`
+	const accessibleToolbarState = useContext( ToolbarContext );
+
+	if ( ( ! controls || ! controls.length ) && ! children ) {
+		return null;
+	}
+
+	const finalClassName = clsx(
+		// Unfortunately, there's legacy code referencing to `.components-toolbar`
+		// So we can't get rid of it
+		accessibleToolbarState
+			? 'components-toolbar-group'
+			: 'components-toolbar',
+		className
+	);
+
+	// Normalize controls to nested array of objects (sets of controls)
+	let controlSets: ToolbarGroupControls[][];
+	if ( isNestedArray( controls ) ) {
+		controlSets = controls;
+	} else {
+		controlSets = [ controls ];
+	}
+
+	if ( isCollapsed ) {
+		return (
+			<ToolbarGroupCollapsed
+				label={ title }
+				controls={ controlSets }
+				className={ finalClassName }
+				children={ children }
+				{ ...props }
+			/>
+		);
+	}
+
+	return (
+		<ToolbarGroupContainer className={ finalClassName } { ...props }>
+			{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
+				controlSet.map( ( control, indexOfControl: number ) => (
+					<ToolbarButton
+						key={ [ indexOfSet, indexOfControl ].join() }
+						containerClassName={
+							indexOfSet > 0 && indexOfControl === 0
+								? 'has-left-divider'
+								: undefined
+						}
+						{ ...control }
+					/>
+				) )
+			) }
+			{ children }
+		</ToolbarGroupContainer>
+	);
+}
+
+export default ToolbarGroup;
diff --git a/packages/components/src/toolbar/toolbar-group/style.native.scss b/packages/components/src/toolbar/toolbar-group/style.native.scss
new file mode 100644
index 00000000000000..f45797de3a625a
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/style.native.scss
@@ -0,0 +1,10 @@
+.container {
+	flex-direction: row;
+	border-color: $light-quaternary;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.containerDark {
+	border-color: $dark-quaternary;
+}
diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
new file mode 100644
index 00000000000000..668968d40babbe
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -0,0 +1,82 @@
+.components-toolbar-group {
+	min-height: $block-toolbar-height;
+	border-right: $border-width solid $gray-900;
+	background-color: $white;
+	display: inline-flex;
+	flex-shrink: 0;
+	flex-wrap: wrap;
+	padding-left: $grid-unit-15 * 0.5; // 6px.
+	padding-right: $grid-unit-15 * 0.5;
+
+	// Unset for nested toolbar groups. Increase specificity.
+	& .components-toolbar-group.components-toolbar-group {
+		border-width: 0;
+		margin: 0;
+	}
+
+	line-height: 0;
+
+	// Size multiple sequential buttons to be optically balanced.
+	// Icons are 36px, as set by a 24px icon and 12px padding.
+	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
+	.components-button.has-icon.has-icon {
+		justify-content: center;
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-15 * 0.5;
+
+		svg {
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
+}
+
+// Legacy toolbar group
+// External code references to it, so we can't change it?
+.components-toolbar {
+	min-height: $block-toolbar-height;
+	margin: 0;
+	border: $border-width solid $gray-900;
+	background-color: $white;
+	display: inline-flex;
+	flex-shrink: 0;
+	flex-wrap: wrap;
+
+	// Unset for nested toolbars. Increase specificity.
+	& .components-toolbar.components-toolbar {
+		border-width: 0;
+		margin: 0;
+	}
+}
+
+div.components-toolbar {
+	& > div {
+		display: flex;
+		margin: 0;
+	}
+
+	& > div + div {
+		&.has-left-divider {
+			margin-left: 6px;
+			position: relative;
+			overflow: visible;
+		}
+
+		&.has-left-divider::before {
+			display: inline-block;
+			content: "";
+			box-sizing: content-box;
+			background-color: $gray-300;
+			position: absolute;
+			top: 8px;
+			left: -3px;
+			width: 1px;
+			height: $button-size - 16px;
+		}
+	}
+}
diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
similarity index 92%
rename from packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
rename to packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
index 411a4e6edbd604..6fa7b6f6bc13be 100644
--- a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js
@@ -9,7 +9,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '../dropdown-menu';
+import DropdownMenu from '../../dropdown-menu';
 import styles from './style.scss';
 
 function ToolbarGroupCollapsed( {
diff --git a/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.tsx b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.tsx
new file mode 100644
index 00000000000000..a829aa3b001442
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-collapsed.tsx
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DropdownMenu from '../../dropdown-menu';
+import ToolbarContext from '../toolbar-context';
+import ToolbarItem from '../toolbar-item';
+import type { ToolbarGroupCollapsedProps } from './types';
+import type { DropdownMenuProps } from '../../dropdown-menu/types';
+
+function ToolbarGroupCollapsed( {
+	controls = [],
+	toggleProps,
+	...props
+}: ToolbarGroupCollapsedProps ) {
+	// It'll contain state if `ToolbarGroup` is being used within
+	// `<Toolbar label="label" />`
+	const accessibleToolbarState = useContext( ToolbarContext );
+
+	const renderDropdownMenu = (
+		internalToggleProps?: DropdownMenuProps[ 'toggleProps' ]
+	) => (
+		<DropdownMenu
+			controls={ controls }
+			toggleProps={ {
+				...internalToggleProps,
+				'data-toolbar-item': true,
+			} }
+			{ ...props }
+		/>
+	);
+
+	if ( accessibleToolbarState ) {
+		return (
+			<ToolbarItem { ...toggleProps }>{ renderDropdownMenu }</ToolbarItem>
+		);
+	}
+
+	return renderDropdownMenu( toggleProps );
+}
+
+export default ToolbarGroupCollapsed;
diff --git a/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js
new file mode 100644
index 00000000000000..53c2c59bda9548
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { StyleSheet, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const ToolbarGroupContainer = ( { passedStyle, children } ) => {
+	const groupStyles = [
+		usePreferredColorSchemeStyle( styles.container, styles.containerDark ),
+		{ borderLeftWidth: StyleSheet.hairlineWidth },
+		passedStyle,
+	];
+
+	return <View style={ groupStyles }>{ children }</View>;
+};
+
+export default ToolbarGroupContainer;
diff --git a/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx
new file mode 100644
index 00000000000000..040a771d4ce039
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.tsx
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../../context';
+import type { ToolbarGroupContainerProps } from './types';
+
+const ToolbarGroupContainer = ( {
+	className,
+	children,
+	...props
+}: WordPressComponentProps< ToolbarGroupContainerProps, 'div', false > ) => (
+	<div className={ className } { ...props }>
+		{ children }
+	</div>
+);
+export default ToolbarGroupContainer;
diff --git a/packages/components/src/toolbar/toolbar-group/types.ts b/packages/components/src/toolbar/toolbar-group/types.ts
new file mode 100644
index 00000000000000..ea25a5ea855271
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-group/types.ts
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DropdownMenuProps,
+	DropdownOption,
+} from '../../dropdown-menu/types';
+
+/**
+ * WordPress dependencies
+ */
+import type { Props as IconProps } from '../../icon';
+
+export type ToolbarGroupControls = DropdownOption & {
+	/**
+	 * An optional subscript associated to the control.
+	 */
+	subscript?: string;
+};
+
+type ToolbarGroupPropsBase = {
+	/**
+	 * The controls to render in this toolbar.
+	 */
+	controls?: ToolbarGroupControls[] | ToolbarGroupControls[][];
+
+	/**
+	 * Class to set on the container div.
+	 */
+	className?: string;
+
+	/**
+	 * Any other things to render inside the toolbar besides the controls.
+	 */
+	children?: ReactNode;
+
+	/**
+	 * The Dashicon icon slug to be shown for the option.
+	 */
+	icon?: IconProps[ 'icon' ];
+};
+
+export type ToolbarGroupProps = ToolbarGroupPropsBase &
+	(
+		| {
+				/**
+				 * When true, turns `ToolbarGroup` into a dropdown menu.
+				 */
+				isCollapsed?: false;
+				/**
+				 * Any other things to render inside the toolbar besides the controls.
+				 */
+				children?: ReactNode;
+				title?: never;
+		  }
+		| {
+				/**
+				 * When true, turns `ToolbarGroup` into a dropdown menu.
+				 */
+				isCollapsed: true;
+				/**
+				 * Any other things to render inside the toolbar besides the controls.
+				 */
+				children?: ToolbarGroupCollapsedProps[ 'children' ];
+				/**
+				 * ARIA label for dropdown menu if is collapsed.
+				 */
+				title: string;
+		  }
+	);
+
+export type ToolbarGroupCollapsedProps = DropdownMenuProps;
+
+export type ToolbarGroupContainerProps = {
+	/**
+	 * Children to be rendered inside the toolbar.
+	 */
+	children?: ReactNode;
+	/**
+	 * Class to set on the container div.
+	 */
+	className?: string;
+	/**
+	 * Props to be passed.
+	 */
+	props?: any;
+};
diff --git a/packages/components/src/toolbar/toolbar-item/README.md b/packages/components/src/toolbar/toolbar-item/README.md
new file mode 100644
index 00000000000000..e219d085a2cbaa
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-item/README.md
@@ -0,0 +1,72 @@
+# ToolbarItem
+
+A ToolbarItem is a generic headless component that can be used to make any custom component a [Toolbar](/packages/components/src/toolbar/README.md) item. It should be inside a [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md) when used to create general interfaces. If you're using it to add controls to your custom block, you should consider using [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md).
+
+## Usage
+
+### `as` prop
+
+You can use the `as` prop with a custom component or any HTML element.
+
+```jsx
+import { Toolbar, ToolbarItem, Button } from '@wordpress/components';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
+			<ToolbarItem as="button">I am another toolbar button</ToolbarItem>
+		</Toolbar>
+	);
+}
+```
+
+### render prop
+
+You can pass children as function to get the ToolbarItem props and pass them to another component.
+
+```jsx
+import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
+import { table } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarItem>
+				{ ( toolbarItemHTMLProps ) => (
+					<DropdownMenu
+						icon={ table }
+						toggleProps={ toolbarItemHTMLProps }
+						label={ 'Edit table' }
+						controls={ [] }
+					/>
+				) }
+			</ToolbarItem>
+		</Toolbar>
+	);
+}
+```
+
+### Inside BlockControls
+
+If you're working on a custom block and you want to add controls to the block toolbar, you should use [BlockControls](/docs/getting-started/fundamentals/block-in-the-editor.md) instead. Optionally wrapping it with [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+
+```jsx
+import { BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
+
+function Edit() {
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+```
+
+## Related components
+
+-   ToolbarItem should be used inside [Toolbar](/packages/components/src/toolbar/README.md) or [ToolbarGroup](/packages/components/src/toolbar-group/README.md).
+-   If you want a simple toolbar button, consider using [ToolbarButton](/packages/components/src/toolbar-button/README.md) instead.
diff --git a/packages/components/src/toolbar-item/index.native.js b/packages/components/src/toolbar/toolbar-item/index.native.js
similarity index 100%
rename from packages/components/src/toolbar-item/index.native.js
rename to packages/components/src/toolbar/toolbar-item/index.native.js
diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx
new file mode 100644
index 00000000000000..57cd80bc35d233
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-item/index.tsx
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarContext from '../toolbar-context';
+import type { ToolbarItemProps } from './types';
+
+function ToolbarItem(
+	{ children, as: Component, ...props }: ToolbarItemProps,
+	ref: ForwardedRef< any >
+) {
+	const accessibleToolbarStore = useContext( ToolbarContext );
+	const isRenderProp = typeof children === 'function';
+
+	if ( ! isRenderProp && ! Component ) {
+		warning(
+			'`ToolbarItem` is a generic headless component. You must pass either a `children` prop as a function or an `as` prop as a component. ' +
+				'See https://developer.wordpress.org/block-editor/components/toolbar-item/'
+		);
+		return null;
+	}
+
+	const allProps = { ...props, ref, 'data-toolbar-item': true };
+
+	if ( ! accessibleToolbarStore ) {
+		if ( Component ) {
+			return <Component { ...allProps }>{ children }</Component>;
+		}
+		if ( ! isRenderProp ) {
+			return null;
+		}
+		return children( allProps );
+	}
+
+	const render = isRenderProp
+		? children
+		: Component && <Component>{ children }</Component>;
+
+	return (
+		<Ariakit.ToolbarItem
+			accessibleWhenDisabled
+			{ ...allProps }
+			store={ accessibleToolbarStore }
+			render={ render }
+		/>
+	);
+}
+
+export default forwardRef( ToolbarItem );
diff --git a/packages/components/src/toolbar/toolbar-item/types.ts b/packages/components/src/toolbar/toolbar-item/types.ts
new file mode 100644
index 00000000000000..a285afea2c6dae
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar-item/types.ts
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import type {
+	ReactElement,
+	ReactNode,
+	ElementType,
+	HTMLAttributes,
+	RefAttributes,
+} from 'react';
+
+export type ToolbarItemProps = Omit< HTMLAttributes< any >, 'children' > & {
+	/**
+	 * Component type that will be used to render the toolbar item.
+	 */
+	as?: ElementType;
+	/**
+	 * A function that receives the props that should be spread onto the element
+	 * that will be rendered as a toolbar item. If the `as` prop is not provided,
+	 * this prop will accept a ReactNode instead.
+	 */
+	children?:
+		| ReactNode
+		| ( (
+				props: HTMLAttributes< any > & RefAttributes< any >
+		  ) => ReactElement | null );
+};
diff --git a/packages/components/src/toolbar/toolbar/README.md b/packages/components/src/toolbar/toolbar/README.md
new file mode 100644
index 00000000000000..de8f7a89d01ea3
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/README.md
@@ -0,0 +1,88 @@
+# Toolbar
+
+Toolbar can be used to group related options. To emphasize groups of related icon buttons, a toolbar should share a common container.
+
+![Toolbar component above an image block](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541782974545_ButtonGroup.png)
+
+## Design guidelines
+
+### Usage
+
+### Best practices
+
+Toolbars should:
+
+-   **Clearly communicate that clicking or tapping will trigger an action.**
+-   **Use established colors appropriately.** For example, only use red for actions that are difficult or impossible to undo.
+-   When used with a block, have a consistent location above the block. **Otherwise, have a consistent location in the interface.**
+
+![A toolbar attached to the top left side of a block. (1. Toolbar, 2. Block)](https://wordpress.org/gutenberg/files/2019/01/s_D8D19E5A314C2D056B8CCC92B2DB5E27164936A0C5ED98A4C2DFDA650BE2A771_1542388042335_toolbar-block.png)
+
+### States
+
+#### Active and available toolbars
+
+A toolbar’s state makes it clear which icon button is active. Hover and focus states express the available selection options for icon buttons in a toolbar.
+
+![Toolbar component](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541784539545_ButtonGroup.png)
+
+#### Disabled toolbars
+
+Toolbars that cannot be selected can either be given a disabled state, or be hidden.
+
+## Development guidelines
+
+### Usage
+
+```jsx
+import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { formatBold, formatItalic, link } from '@wordpress/icons';
+
+function MyToolbar() {
+	return (
+		<Toolbar label="Options">
+			<ToolbarButton icon={ formatBold } label="Bold" />
+			<ToolbarButton icon={ formatItalic } label="Italic" />
+			<ToolbarButton icon={ link } label="Link" />
+		</Toolbar>
+	);
+}
+```
+
+### Props
+
+Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.
+
+#### `className`: `string`
+
+Class to set on the container div.
+
+-   Required: No
+
+#### `label`: `string`
+
+An accessible label for the toolbar.
+
+-   Required: Yes
+
+#### `variant`: `'unstyled' | undefined`
+
+Specifies the toolbar's style.
+
+Leave undefined for the default style. Or `'unstyled'` which removes the border from the toolbar, but keeps the default popover style.
+
+-   Required: No
+-   Default: `undefined`
+
+#### `orientation`: `'horizontal' | 'vertical'`
+
+Specifies the toolbar's orientation.
+
+Leave undefined or 'horizontal' for horizontal orientation keyboard interactions, choose 'vertical' for the alternative.
+
+-   Required: No
+-   Default: `horizontal`
+
+## Related components
+
+-   Toolbar may contain [ToolbarGroup](/packages/components/src/toolbar-group/README.md), [ToolbarButton](/packages/components/src/toolbar-button/README.md) and [ToolbarItem](/packages/components/src/toolbar-Item/README.md) as children.
diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx
new file mode 100644
index 00000000000000..6b7f4843560fe7
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/index.tsx
@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarGroup from '../toolbar-group';
+import ToolbarContainer from './toolbar-container';
+import type { ToolbarProps } from './types';
+import type { WordPressComponentProps } from '../../context';
+import { ContextSystemProvider } from '../../context';
+
+function UnforwardedToolbar(
+	{
+		className,
+		label,
+		variant,
+		...props
+	}: WordPressComponentProps< ToolbarProps, 'div', false >,
+	ref: ForwardedRef< any >
+) {
+	const isVariantDefined = variant !== undefined;
+	const contextSystemValue = useMemo( () => {
+		if ( isVariantDefined ) {
+			return {};
+		}
+		return {
+			DropdownMenu: {
+				variant: 'toolbar',
+			},
+			Dropdown: {
+				variant: 'toolbar',
+			},
+			Menu: {
+				variant: 'toolbar',
+			},
+		};
+	}, [ isVariantDefined ] );
+
+	if ( ! label ) {
+		deprecated( 'Using Toolbar without label prop', {
+			since: '5.6',
+			alternative: 'ToolbarGroup component',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
+		} );
+		// Extracting title from `props` because `ToolbarGroup` doesn't accept it.
+		const { title: _title, ...restProps } = props;
+		return (
+			<ToolbarGroup
+				isCollapsed={ false }
+				{ ...restProps }
+				className={ className }
+			/>
+		);
+	}
+	// `ToolbarGroup` already uses components-toolbar for compatibility reasons.
+	const finalClassName = clsx(
+		'components-accessible-toolbar',
+		className,
+		variant && `is-${ variant }`
+	);
+
+	return (
+		<ContextSystemProvider value={ contextSystemValue }>
+			<ToolbarContainer
+				className={ finalClassName }
+				label={ label }
+				ref={ ref }
+				{ ...props }
+			/>
+		</ContextSystemProvider>
+	);
+}
+
+/**
+ * Renders a toolbar.
+ *
+ * To add controls, simply pass `ToolbarButton` components as children.
+ *
+ * ```jsx
+ * import { Toolbar, ToolbarButton } from '@wordpress/components';
+ * import { formatBold, formatItalic, link } from '@wordpress/icons';
+ *
+ * function MyToolbar() {
+ *   return (
+ *     <Toolbar label="Options">
+ *       <ToolbarButton icon={ formatBold } label="Bold" />
+ *       <ToolbarButton icon={ formatItalic } label="Italic" />
+ *       <ToolbarButton icon={ link } label="Link" />
+ *     </Toolbar>
+ *   );
+ * }
+ * ```
+ */
+export const Toolbar = forwardRef( UnforwardedToolbar );
+export default Toolbar;
diff --git a/packages/components/src/toolbar-group/style.native.scss b/packages/components/src/toolbar/toolbar/style.native.scss
similarity index 100%
rename from packages/components/src/toolbar-group/style.native.scss
rename to packages/components/src/toolbar/toolbar/style.native.scss
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
new file mode 100644
index 00000000000000..c0cabacb84c77e
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -0,0 +1,109 @@
+.components-accessible-toolbar {
+	display: inline-flex;
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	flex-shrink: 0;
+
+	& > .components-toolbar-group:last-child {
+		border-right: none;
+	}
+
+	&.is-unstyled {
+		border: none;
+
+		& > .components-toolbar-group {
+			border-right: none;
+		}
+
+	}
+}
+
+.components-accessible-toolbar,
+.components-toolbar {
+
+	&[aria-orientation="vertical"] {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.components-button {
+		position: relative;
+		height: $block-toolbar-height;
+		z-index: 1;
+
+		// Give all buttons extra padding to fit text.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
+
+		// Don't show the focus inherited by the Button component.
+		&:focus:not(:disabled) {
+			box-shadow: none;
+			outline: none;
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-small;
+			height: $grid-unit-40;
+
+			// Position the focus rectangle.
+			left: $grid-unit-10;
+			right: $grid-unit-10;
+			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
+
+		svg {
+			position: relative;
+
+			// Center the icon inside.
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		// Toggled style.
+		&.is-pressed {
+			background: transparent;
+
+			&:hover {
+				background: transparent;
+			}
+
+			&::before {
+				background: $gray-900;
+			}
+		}
+
+		// Focus style.
+		&:focus::before {
+			@include block-toolbar-button-style__focus();
+		}
+
+		// Ensure the icon buttons remain square.
+		// This needs specificity.
+		&.has-icon.has-icon {
+			// Reduce the default padding when a button only has an icon.
+			padding-left: $grid-unit-10;
+			padding-right: $grid-unit-10;
+			min-width: $block-toolbar-height;
+		}
+	}
+}
+
+
+@keyframes components-button__appear-animation {
+	from {
+		transform: scaleY(0);
+	}
+	to {
+		transform: scaleY(1);
+	}
+}
diff --git a/packages/components/src/toolbar/toolbar-container.native.js b/packages/components/src/toolbar/toolbar/toolbar-container.native.js
similarity index 100%
rename from packages/components/src/toolbar/toolbar-container.native.js
rename to packages/components/src/toolbar/toolbar/toolbar-container.native.js
diff --git a/packages/components/src/toolbar/toolbar/toolbar-container.tsx b/packages/components/src/toolbar/toolbar/toolbar-container.tsx
new file mode 100644
index 00000000000000..5a12ba61c5d8a3
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/toolbar-container.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ToolbarContext from '../toolbar-context';
+import type { ToolbarProps } from './types';
+import type { WordPressComponentProps } from '../../context';
+
+function UnforwardedToolbarContainer(
+	{ label, ...props }: WordPressComponentProps< ToolbarProps, 'div', false >,
+	ref: ForwardedRef< any >
+) {
+	const toolbarStore = Ariakit.useToolbarStore( {
+		focusLoop: true,
+		rtl: isRTL(),
+	} );
+
+	return (
+		// This will provide state for `ToolbarButton`'s
+		<ToolbarContext.Provider value={ toolbarStore }>
+			<Ariakit.Toolbar
+				ref={ ref }
+				aria-label={ label }
+				store={ toolbarStore }
+				{ ...props }
+			/>
+		</ToolbarContext.Provider>
+	);
+}
+
+export const ToolbarContainer = forwardRef( UnforwardedToolbarContainer );
+export default ToolbarContainer;
diff --git a/packages/components/src/toolbar/toolbar/types.ts b/packages/components/src/toolbar/toolbar/types.ts
new file mode 100644
index 00000000000000..bf9ecc56292931
--- /dev/null
+++ b/packages/components/src/toolbar/toolbar/types.ts
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ToolbarProps = {
+	/**
+	 * Children to be rendered inside the toolbar.
+	 */
+	children?: ReactNode;
+	/**
+	 * An accessible label for the toolbar.
+	 */
+	label: string;
+	/**
+	 * Specifies the toolbar's style.
+	 *
+	 * Leave undefined for the default style. Or `'unstyled'` which
+	 * removes the border from the toolbar, but keeps the default
+	 * popover style.
+	 *
+	 * @default undefined
+	 */
+	variant?: 'unstyled' | undefined;
+	/**
+	 * Orientation of the toolbar keyboard interactions.
+	 *
+	 * @default 'horizontal'
+	 */
+	orientation?: 'horizontal' | 'vertical';
+};
diff --git a/packages/components/src/tools-panel/context.ts b/packages/components/src/tools-panel/context.ts
index 7b13e59a92acd9..d39c49c04ef203 100644
--- a/packages/components/src/tools-panel/context.ts
+++ b/packages/components/src/tools-panel/context.ts
@@ -18,6 +18,8 @@ export const ToolsPanelContext = createContext< ToolsPanelContextType >( {
 	registerPanelItem: noop,
 	deregisterPanelItem: noop,
 	flagItemCustomization: noop,
+	registerResetAllFilter: noop,
+	deregisterResetAllFilter: noop,
 	areAllOptionalControlsHidden: true,
 } );
 
diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
deleted file mode 100644
index 49f9d366587cb8..00000000000000
--- a/packages/components/src/tools-panel/stories/index.js
+++ /dev/null
@@ -1,513 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { ToolsPanel, ToolsPanelItem } from '../';
-import Panel from '../../panel';
-import UnitControl from '../../unit-control';
-import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
-
-export default {
-	title: 'Components (Experimental)/ToolsPanel',
-	component: ToolsPanel,
-};
-
-export const _default = () => {
-	const [ height, setHeight ] = useState();
-	const [ minHeight, setMinHeight ] = useState();
-	const [ width, setWidth ] = useState();
-	const [ scale, setScale ] = useState();
-
-	const resetAll = () => {
-		setHeight( undefined );
-		setWidth( undefined );
-		setMinHeight( undefined );
-		setScale( undefined );
-	};
-
-	return (
-		<PanelWrapperView>
-			<Panel>
-				<ToolsPanel
-					label="Tools Panel (default example)"
-					resetAll={ resetAll }
-				>
-					<SingleColumnItem
-						hasValue={ () => !! width }
-						label="Width"
-						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Width"
-							value={ width }
-							onChange={ ( next ) => setWidth( next ) }
-						/>
-					</SingleColumnItem>
-					<SingleColumnItem
-						hasValue={ () => !! height }
-						label="Height"
-						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Height"
-							value={ height }
-							onChange={ ( next ) => setHeight( next ) }
-						/>
-					</SingleColumnItem>
-					<ToolsPanelItem
-						hasValue={ () => !! minHeight }
-						label="Minimum height"
-						onDeselect={ () => setMinHeight( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Minimum height"
-							value={ minHeight }
-							onChange={ ( next ) => setMinHeight( next ) }
-						/>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						hasValue={ () => !! scale }
-						label="Scale"
-						onDeselect={ () => setScale( undefined ) }
-					>
-						<ToggleGroupControl
-							label="Scale"
-							value={ scale }
-							onChange={ ( next ) => setScale( next ) }
-							isBlock
-						>
-							<ToggleGroupControlOption
-								value="cover"
-								label="Cover"
-							/>
-							<ToggleGroupControlOption
-								value="contain"
-								label="Contain"
-							/>
-							<ToggleGroupControlOption
-								value="fill"
-								label="Fill"
-							/>
-						</ToggleGroupControl>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			</Panel>
-		</PanelWrapperView>
-	);
-};
-
-export const WithNonToolsPanelItems = () => {
-	const [ height, setHeight ] = useState();
-	const [ width, setWidth ] = useState();
-
-	const resetAll = () => {
-		setHeight( undefined );
-		setWidth( undefined );
-	};
-
-	return (
-		<PanelWrapperView>
-			<Panel>
-				<ToolsPanel
-					label="ToolsPanel (with non-menu items)"
-					resetAll={ resetAll }
-				>
-					<IntroText>
-						This text illustrates not all items must be wrapped in a
-						ToolsPanelItem and represented in the panel menu.
-					</IntroText>
-					<SingleColumnItem
-						hasValue={ () => !! width }
-						label="Width"
-						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Width"
-							value={ width }
-							onChange={ ( next ) => setWidth( next ) }
-						/>
-					</SingleColumnItem>
-					<SingleColumnItem
-						hasValue={ () => !! height }
-						label="Height"
-						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
-					>
-						<UnitControl
-							label="Height"
-							value={ height }
-							onChange={ ( next ) => setHeight( next ) }
-						/>
-					</SingleColumnItem>
-				</ToolsPanel>
-			</Panel>
-		</PanelWrapperView>
-	);
-};
-
-export const WithOptionalItemsPlusIcon = ( { isShownByDefault } ) => {
-	const [ height, setHeight ] = useState();
-	const [ width, setWidth ] = useState();
-	const [ minWidth, setMinWidth ] = useState();
-
-	const resetAll = () => {
-		setHeight( undefined );
-		setWidth( undefined );
-		setMinWidth( undefined );
-	};
-
-	return (
-		<PanelWrapperView>
-			<Panel>
-				<ToolsPanel
-					label="Tools Panel (optional items only)"
-					resetAll={ resetAll }
-					key={ isShownByDefault }
-				>
-					<SingleColumnItem
-						hasValue={ () => !! minWidth }
-						label="Minimum width"
-						onDeselect={ () => setMinWidth( undefined ) }
-						isShownByDefault={ isShownByDefault }
-					>
-						<UnitControl
-							label="Minimum width"
-							value={ minWidth }
-							onChange={ ( next ) => setMinWidth( next ) }
-						/>
-					</SingleColumnItem>
-					<SingleColumnItem
-						hasValue={ () => !! width }
-						label="Width"
-						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ false }
-					>
-						<UnitControl
-							label="Width"
-							value={ width }
-							onChange={ ( next ) => setWidth( next ) }
-						/>
-					</SingleColumnItem>
-					<SingleColumnItem
-						hasValue={ () => !! height }
-						label="Height"
-						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ false }
-					>
-						<UnitControl
-							label="Height"
-							value={ height }
-							onChange={ ( next ) => setHeight( next ) }
-						/>
-					</SingleColumnItem>
-				</ToolsPanel>
-			</Panel>
-		</PanelWrapperView>
-	);
-};
-
-WithOptionalItemsPlusIcon.args = {
-	isShownByDefault: false,
-};
-
-const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
-const panelId = 'unique-tools-panel-id';
-
-export const WithSlotFillItems = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { width, height } = attributes;
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	return (
-		<SlotFillProvider>
-			<ToolsPanelItems>
-				<SingleColumnItem
-					hasValue={ () => !! width }
-					label="Injected Width"
-					onDeselect={ () => updateAttribute( 'width', undefined ) }
-					resetAllFilter={ () => ( { width: undefined } ) }
-					panelId={ panelId }
-				>
-					<UnitControl
-						label="Injected Width"
-						value={ width }
-						onChange={ ( next ) =>
-							updateAttribute( 'width', next )
-						}
-					/>
-				</SingleColumnItem>
-				<SingleColumnItem
-					hasValue={ () => !! height }
-					label="Injected Height"
-					onDeselect={ () => updateAttribute( 'height', undefined ) }
-					resetAllFilter={ () => ( { height: undefined } ) }
-					panelId={ panelId }
-				>
-					<UnitControl
-						label="Injected Height"
-						value={ height }
-						onChange={ ( next ) =>
-							updateAttribute( 'height', next )
-						}
-					/>
-				</SingleColumnItem>
-				<ToolsPanelItem
-					hasValue={ () => true }
-					label="Item for alternate panel"
-					onDeselect={ () => undefined }
-					resetAllFilter={ () => undefined }
-					panelId={ 'intended-for-another-panel-via-shared-slot' }
-				>
-					<p>
-						This panel item will not be displayed in the demo as its
-						panelId does not match the panel being rendered.
-					</p>
-				</ToolsPanelItem>
-			</ToolsPanelItems>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanel
-						label="Tools Panel With SlotFill Items"
-						resetAll={ resetAll }
-						panelId={ panelId }
-					>
-						<Slot />
-					</ToolsPanel>
-				</Panel>
-			</PanelWrapperView>
-		</SlotFillProvider>
-	);
-};
-
-export const WithConditionalDefaultControl = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { height, scale } = attributes;
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	return (
-		<SlotFillProvider>
-			<ToolsPanelItems>
-				<SingleColumnItem
-					hasValue={ () => !! height }
-					label="Injected Height"
-					onDeselect={ () => updateAttribute( 'height', undefined ) }
-					resetAllFilter={ () => ( { height: undefined } ) }
-					panelId={ panelId }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						label="Injected Height"
-						value={ height }
-						onChange={ ( next ) =>
-							updateAttribute( 'height', next )
-						}
-					/>
-				</SingleColumnItem>
-				<ToolsPanelItem
-					hasValue={ () => !! scale }
-					label="Scale"
-					onDeselect={ () => updateAttribute( 'scale', undefined ) }
-					resetAllFilter={ () => ( { scale: undefined } ) }
-					panelId={ panelId }
-					isShownByDefault={ !! height }
-				>
-					<ToggleGroupControl
-						label="Scale"
-						value={ scale }
-						onChange={ ( next ) =>
-							updateAttribute( 'scale', next )
-						}
-						isBlock
-					>
-						<ToggleGroupControlOption value="cover" label="Cover" />
-						<ToggleGroupControlOption
-							value="contain"
-							label="Contain"
-						/>
-						<ToggleGroupControlOption value="fill" label="Fill" />
-					</ToggleGroupControl>
-				</ToolsPanelItem>
-			</ToolsPanelItems>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanel
-						label="Tools Panel With Conditional Default via SlotFill"
-						resetAll={ resetAll }
-						panelId={ panelId }
-					>
-						<Slot />
-					</ToolsPanel>
-				</Panel>
-			</PanelWrapperView>
-		</SlotFillProvider>
-	);
-};
-
-export const WithConditionallyRenderedControl = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { height, scale } = attributes;
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	return (
-		<SlotFillProvider>
-			<ToolsPanelItems>
-				<SingleColumnItem
-					hasValue={ () => !! height }
-					label="Injected Height"
-					onDeselect={ () => {
-						updateAttribute( 'scale', undefined );
-						updateAttribute( 'height', undefined );
-					} }
-					resetAllFilter={ () => ( { height: undefined } ) }
-					panelId={ panelId }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						label="Injected Height"
-						value={ height }
-						onChange={ ( next ) =>
-							updateAttribute( 'height', next )
-						}
-					/>
-				</SingleColumnItem>
-				{ !! height && (
-					<ToolsPanelItem
-						hasValue={ () => !! scale }
-						label="Scale"
-						onDeselect={ () =>
-							updateAttribute( 'scale', undefined )
-						}
-						resetAllFilter={ () => ( { scale: undefined } ) }
-						panelId={ panelId }
-						isShownByDefault={ true }
-					>
-						<ToggleGroupControl
-							label="Scale"
-							value={ scale }
-							onChange={ ( next ) =>
-								updateAttribute( 'scale', next )
-							}
-							isBlock
-						>
-							<ToggleGroupControlOption
-								value="cover"
-								label="Cover"
-							/>
-							<ToggleGroupControlOption
-								value="contain"
-								label="Contain"
-							/>
-							<ToggleGroupControlOption
-								value="fill"
-								label="Fill"
-							/>
-						</ToggleGroupControl>
-					</ToolsPanelItem>
-				) }
-			</ToolsPanelItems>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanel
-						label="Tools Panel With Conditionally Rendered Item via SlotFill"
-						resetAll={ resetAll }
-						panelId={ panelId }
-					>
-						<Slot />
-					</ToolsPanel>
-				</Panel>
-			</PanelWrapperView>
-		</SlotFillProvider>
-	);
-};
-
-export { ToolsPanelWithItemGroupSlot } from './utils/tools-panel-with-item-group-slot';
-
-const PanelWrapperView = styled.div`
-	font-size: 13px;
-
-	.components-dropdown-menu__menu {
-		max-width: 220px;
-	}
-`;
-
-const SingleColumnItem = styled( ToolsPanelItem )`
-	grid-column: span 1;
-`;
-
-const IntroText = styled.div`
-	grid-column: span 2;
-`;
diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx
new file mode 100644
index 00000000000000..76735c845c3ea6
--- /dev/null
+++ b/packages/components/src/tools-panel/stories/index.story.tsx
@@ -0,0 +1,634 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../../toggle-group-control';
+
+/**
+ * Internal dependencies
+ */
+import { ToolsPanel, ToolsPanelItem } from '..';
+import Panel from '../../panel';
+import UnitControl from '../../unit-control';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+
+const meta: Meta< typeof ToolsPanel > = {
+	title: 'Components (Experimental)/ToolsPanel',
+	component: ToolsPanel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToolsPanelItem },
+	argTypes: {
+		as: { control: false },
+		children: { control: false },
+		panelId: { control: false },
+		resetAll: { action: 'resetAll' },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
+	const [ height, setHeight ] = useState< string | undefined >();
+	const [ minHeight, setMinHeight ] = useState< string | undefined >();
+	const [ width, setWidth ] = useState< string | undefined >();
+	const [ scale, setScale ] = useState< React.ReactText | undefined >();
+
+	const resetAll: typeof resetAllProp = ( filters ) => {
+		setHeight( undefined );
+		setWidth( undefined );
+		setMinHeight( undefined );
+		setScale( undefined );
+		resetAllProp( filters );
+	};
+
+	return (
+		<PanelWrapperView>
+			<Panel>
+				<ToolsPanel { ...props } resetAll={ resetAll }>
+					<SingleColumnItem
+						hasValue={ () => !! width }
+						label="Width"
+						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault
+					>
+						<UnitControl
+							__next40pxDefaultSize
+							label="Width"
+							value={ width }
+							onChange={ ( next ) => setWidth( next ) }
+						/>
+					</SingleColumnItem>
+					<SingleColumnItem
+						hasValue={ () => !! height }
+						label="Height"
+						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault
+					>
+						<UnitControl
+							__next40pxDefaultSize
+							label="Height"
+							value={ height }
+							onChange={ ( next ) => setHeight( next ) }
+						/>
+					</SingleColumnItem>
+					<ToolsPanelItem
+						hasValue={ () => !! minHeight }
+						label="Minimum height"
+						onDeselect={ () => setMinHeight( undefined ) }
+						isShownByDefault
+					>
+						<UnitControl
+							__next40pxDefaultSize
+							label="Minimum height"
+							value={ minHeight }
+							onChange={ ( next ) => setMinHeight( next ) }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! scale }
+						label="Scale"
+						onDeselect={ () => setScale( undefined ) }
+					>
+						<ToggleGroupControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label="Scale"
+							value={ scale }
+							onChange={ ( next ) => setScale( next ) }
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="cover"
+								label="Cover"
+							/>
+							<ToggleGroupControlOption
+								value="contain"
+								label="Contain"
+							/>
+							<ToggleGroupControlOption
+								value="fill"
+								label="Fill"
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</Panel>
+		</PanelWrapperView>
+	);
+};
+Default.args = {
+	label: 'Tools Panel (default example)',
+};
+
+export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
+	const [ height, setHeight ] = useState< string | undefined >();
+	const [ width, setWidth ] = useState< string | undefined >();
+
+	const resetAll: typeof resetAllProp = ( filters ) => {
+		setHeight( undefined );
+		setWidth( undefined );
+		resetAllProp( filters );
+	};
+
+	return (
+		<PanelWrapperView>
+			<Panel>
+				<ToolsPanel { ...props } resetAll={ resetAll }>
+					<IntroText>
+						This text illustrates not all items must be wrapped in a
+						ToolsPanelItem and represented in the panel menu.
+					</IntroText>
+					<SingleColumnItem
+						hasValue={ () => !! width }
+						label="Width"
+						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault
+					>
+						<UnitControl
+							__next40pxDefaultSize
+							label="Width"
+							value={ width }
+							onChange={ ( next ) => setWidth( next ) }
+						/>
+					</SingleColumnItem>
+					<SingleColumnItem
+						hasValue={ () => !! height }
+						label="Height"
+						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault
+					>
+						<UnitControl
+							__next40pxDefaultSize
+							label="Height"
+							value={ height }
+							onChange={ ( next ) => setHeight( next ) }
+						/>
+					</SingleColumnItem>
+				</ToolsPanel>
+			</Panel>
+		</PanelWrapperView>
+	);
+};
+WithNonToolsPanelItems.args = {
+	...Default.args,
+	label: 'ToolsPanel (with non-menu items)',
+};
+
+export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
+	const [
+		isFirstToolsPanelItemShownByDefault,
+		setIsFirstToolsPanelItemShownByDefault,
+	] = useState( false );
+	const [ height, setHeight ] = useState< string | undefined >();
+	const [ width, setWidth ] = useState< string | undefined >();
+	const [ minWidth, setMinWidth ] = useState< string | undefined >();
+
+	const resetAll: typeof resetAllProp = ( filters ) => {
+		setHeight( undefined );
+		setWidth( undefined );
+		setMinWidth( undefined );
+		resetAllProp( filters );
+	};
+
+	return (
+		<>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanel
+						{ ...props }
+						resetAll={ resetAll }
+						// `key` property here is used as a hack to force `ToolsPanel` to re-render
+						// See https://github.com/WordPress/gutenberg/pull/38262/files#r793422991
+						key={
+							isFirstToolsPanelItemShownByDefault
+								? 'true'
+								: 'false'
+						}
+					>
+						<SingleColumnItem
+							hasValue={ () => !! minWidth }
+							label="Minimum width"
+							onDeselect={ () => setMinWidth( undefined ) }
+							isShownByDefault={
+								isFirstToolsPanelItemShownByDefault
+							}
+						>
+							<UnitControl
+								__next40pxDefaultSize
+								label="Minimum width"
+								value={ minWidth }
+								onChange={ ( next ) => setMinWidth( next ) }
+							/>
+						</SingleColumnItem>
+						<SingleColumnItem
+							hasValue={ () => !! width }
+							label="Width"
+							onDeselect={ () => setWidth( undefined ) }
+							isShownByDefault={ false }
+						>
+							<UnitControl
+								__next40pxDefaultSize
+								label="Width"
+								value={ width }
+								onChange={ ( next ) => setWidth( next ) }
+							/>
+						</SingleColumnItem>
+						<SingleColumnItem
+							hasValue={ () => !! height }
+							label="Height"
+							onDeselect={ () => setHeight( undefined ) }
+							isShownByDefault={ false }
+						>
+							<UnitControl
+								__next40pxDefaultSize
+								label="Height"
+								value={ height }
+								onChange={ ( next ) => setHeight( next ) }
+							/>
+						</SingleColumnItem>
+					</ToolsPanel>
+				</Panel>
+			</PanelWrapperView>
+
+			<button
+				onClick={ () =>
+					setIsFirstToolsPanelItemShownByDefault(
+						! isFirstToolsPanelItemShownByDefault
+					)
+				}
+				aria-pressed={
+					isFirstToolsPanelItemShownByDefault ? 'true' : 'false'
+				}
+				style={ {
+					marginTop: '2rem',
+				} }
+			>
+				{ isFirstToolsPanelItemShownByDefault
+					? 'Make first PanelItem hidden by default'
+					: 'Make first PanelItem shown by default' }
+			</button>
+		</>
+	);
+};
+
+WithOptionalItemsPlusIcon.args = {
+	...Default.args,
+	label: 'Tools Panel (optional items only)',
+};
+
+const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
+
+export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	panelId,
+	...props
+} ) => {
+	const [ attributes, setAttributes ] = useState< {
+		width?: string;
+		height?: string;
+	} >( {} );
+	const { width, height } = attributes;
+
+	const resetAll: typeof resetAllProp = ( resetFilters = [] ) => {
+		let newAttributes: typeof attributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
+		resetAllProp( resetFilters );
+	};
+
+	const updateAttribute = ( name: string, value?: any ) => {
+		setAttributes( {
+			...attributes,
+			[ name ]: value,
+		} );
+	};
+
+	return (
+		<SlotFillProvider>
+			<ToolsPanelItems>
+				<SingleColumnItem
+					hasValue={ () => !! width }
+					label="Injected Width"
+					onDeselect={ () => updateAttribute( 'width', undefined ) }
+					resetAllFilter={ () => ( { width: undefined } ) }
+					panelId={ panelId }
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label="Injected Width"
+						value={ width }
+						onChange={ ( next ) =>
+							updateAttribute( 'width', next )
+						}
+					/>
+				</SingleColumnItem>
+				<SingleColumnItem
+					hasValue={ () => !! height }
+					label="Injected Height"
+					onDeselect={ () => updateAttribute( 'height', undefined ) }
+					resetAllFilter={ () => ( { height: undefined } ) }
+					panelId={ panelId }
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label="Injected Height"
+						value={ height }
+						onChange={ ( next ) =>
+							updateAttribute( 'height', next )
+						}
+					/>
+				</SingleColumnItem>
+				<ToolsPanelItem
+					hasValue={ () => true }
+					label="Item for alternate panel"
+					onDeselect={ () => undefined }
+					resetAllFilter={ () => undefined }
+					panelId="intended-for-another-panel-via-shared-slot"
+				>
+					<p>
+						This panel item will not be displayed in the demo as its
+						panelId does not match the panel being rendered.
+					</p>
+				</ToolsPanelItem>
+			</ToolsPanelItems>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanel
+						{ ...props }
+						resetAll={ resetAll }
+						panelId={ panelId }
+					>
+						<Slot />
+					</ToolsPanel>
+				</Panel>
+			</PanelWrapperView>
+		</SlotFillProvider>
+	);
+};
+WithSlotFillItems.args = {
+	...Default.args,
+	label: 'Tools Panel With SlotFill Items',
+	panelId: 'unique-tools-panel-id',
+};
+
+export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	panelId,
+	...props
+} ) => {
+	const [ attributes, setAttributes ] = useState< {
+		height?: string;
+		scale?: React.ReactText;
+	} >( {} );
+	const { height, scale } = attributes;
+
+	const resetAll: typeof resetAllProp = ( resetFilters = [] ) => {
+		let newAttributes: typeof attributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
+
+		resetAllProp( resetFilters );
+	};
+
+	const updateAttribute = ( name: string, value?: any ) => {
+		setAttributes( {
+			...attributes,
+			[ name ]: value,
+		} );
+	};
+
+	return (
+		<SlotFillProvider>
+			<ToolsPanelItems>
+				<SingleColumnItem
+					hasValue={ () => !! height }
+					label="Injected Height"
+					onDeselect={ () => updateAttribute( 'height', undefined ) }
+					resetAllFilter={ () => ( { height: undefined } ) }
+					panelId={ panelId }
+					isShownByDefault
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label="Injected Height"
+						value={ height }
+						onChange={ ( next ) =>
+							updateAttribute( 'height', next )
+						}
+					/>
+				</SingleColumnItem>
+				<ToolsPanelItem
+					hasValue={ () => !! scale }
+					label="Scale"
+					onDeselect={ () => updateAttribute( 'scale', undefined ) }
+					resetAllFilter={ () => ( { scale: undefined } ) }
+					panelId={ panelId }
+					isShownByDefault={ !! height }
+				>
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label="Scale"
+						value={ scale }
+						onChange={ ( next ) =>
+							updateAttribute( 'scale', next )
+						}
+						isBlock
+					>
+						<ToggleGroupControlOption value="cover" label="Cover" />
+						<ToggleGroupControlOption
+							value="contain"
+							label="Contain"
+						/>
+						<ToggleGroupControlOption value="fill" label="Fill" />
+					</ToggleGroupControl>
+				</ToolsPanelItem>
+			</ToolsPanelItems>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanel
+						{ ...props }
+						resetAll={ resetAll }
+						panelId={ panelId }
+					>
+						<Slot />
+					</ToolsPanel>
+				</Panel>
+			</PanelWrapperView>
+		</SlotFillProvider>
+	);
+};
+WithConditionalDefaultControl.args = {
+	...Default.args,
+	label: 'Tools Panel With Conditional Default via SlotFill',
+	panelId: 'unique-tools-panel-id',
+};
+
+export const WithConditionallyRenderedControl: StoryFn<
+	typeof ToolsPanel
+> = ( { resetAll: resetAllProp, panelId, ...props } ) => {
+	const [ attributes, setAttributes ] = useState< {
+		height?: string;
+		scale?: React.ReactText;
+	} >( {} );
+	const { height, scale } = attributes;
+
+	const resetAll: typeof resetAllProp = ( resetFilters = [] ) => {
+		let newAttributes: typeof attributes = {};
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		setAttributes( newAttributes );
+
+		resetAllProp( resetFilters );
+	};
+
+	const updateAttribute = ( name: string, value?: any ) => {
+		setAttributes( {
+			...attributes,
+			[ name ]: value,
+		} );
+	};
+
+	return (
+		<SlotFillProvider>
+			<ToolsPanelItems>
+				<SingleColumnItem
+					hasValue={ () => !! height }
+					label="Injected Height"
+					onDeselect={ () => {
+						updateAttribute( 'scale', undefined );
+						updateAttribute( 'height', undefined );
+					} }
+					resetAllFilter={ () => ( { height: undefined } ) }
+					panelId={ panelId }
+					isShownByDefault
+				>
+					<UnitControl
+						__next40pxDefaultSize
+						label="Injected Height"
+						value={ height }
+						onChange={ ( next ) =>
+							updateAttribute( 'height', next )
+						}
+					/>
+				</SingleColumnItem>
+				{ !! height && (
+					<ToolsPanelItem
+						hasValue={ () => !! scale }
+						label="Scale"
+						onDeselect={ () =>
+							updateAttribute( 'scale', undefined )
+						}
+						resetAllFilter={ () => ( { scale: undefined } ) }
+						panelId={ panelId }
+						isShownByDefault
+					>
+						<ToggleGroupControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label="Scale"
+							value={ scale }
+							onChange={ ( next ) =>
+								updateAttribute( 'scale', next )
+							}
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="cover"
+								label="Cover"
+							/>
+							<ToggleGroupControlOption
+								value="contain"
+								label="Contain"
+							/>
+							<ToggleGroupControlOption
+								value="fill"
+								label="Fill"
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanelItems>
+			<PanelWrapperView>
+				<Panel>
+					<ToolsPanel
+						{ ...props }
+						resetAll={ resetAll }
+						panelId={ panelId }
+					>
+						<Slot />
+					</ToolsPanel>
+				</Panel>
+			</PanelWrapperView>
+		</SlotFillProvider>
+	);
+};
+WithConditionallyRenderedControl.args = {
+	...Default.args,
+	label: 'Tools Panel With Conditionally Rendered Item via SlotFill',
+	panelId: 'unique-tools-panel-id',
+};
+
+const PanelWrapperView = styled.div`
+	font-size: 13px;
+
+	.components-dropdown-menu__menu {
+		max-width: 220px;
+	}
+`;
+
+const SingleColumnItem = styled( ToolsPanelItem )`
+	grid-column: span 1;
+`;
+
+const IntroText = styled.div`
+	grid-column: span 2;
+`;
diff --git a/packages/components/src/tools-panel/stories/utils/tools-panel-with-item-group-slot.js b/packages/components/src/tools-panel/stories/utils/tools-panel-with-item-group-slot.js
deleted file mode 100644
index d1895324df4c3b..00000000000000
--- a/packages/components/src/tools-panel/stories/utils/tools-panel-with-item-group-slot.js
+++ /dev/null
@@ -1,246 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { useContext, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../../button';
-import ColorIndicator from '../../../color-indicator';
-import ColorPalette from '../../../color-palette';
-import Dropdown from '../../../dropdown';
-import Panel from '../../../panel';
-import { FlexItem } from '../../../flex';
-import { HStack } from '../../../h-stack';
-import { Item, ItemGroup } from '../../../item-group';
-import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '../..';
-import {
-	createSlotFill,
-	Provider as SlotFillProvider,
-} from '../../../slot-fill';
-import { useCx } from '../../../utils';
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-const panelId = 'unique-tools-panel-id';
-
-const { Fill, Slot } = createSlotFill( 'ToolsPanelSlot' );
-
-// This storybook example aims to replicate a virtual bubbling SlotFill use case
-// for the `ToolsPanel` when the Slot itself is an `ItemGroup`.
-
-// In this scenario the `ToolsPanel` has to render item placeholders so fills
-// maintain their order in the DOM. These placeholders in the DOM prevent the
-// normal styling of the `ItemGroup` in particular the border radii on the first
-// and last items. In case consumers of the ItemGroup and ToolsPanel are
-// applying their own styles to these components, the ToolsPanel needs to assist
-// consumers in identifying which of its visible items are first and last.
-
-// This custom fill is required to re-establish the ToolsPanelContext for
-// injected ToolsPanelItem components as they will not have access to the React
-// Context as the Provider is part of the ToolsPanelItems.Slot tree.
-const ToolsPanelItems = ( { children } ) => {
-	return (
-		<Fill>
-			{ ( fillProps ) => (
-				<ToolsPanelContext.Provider value={ fillProps }>
-					{ children }
-				</ToolsPanelContext.Provider>
-			) }
-		</Fill>
-	);
-};
-
-// This fetches the ToolsPanelContext and passes it through `fillProps` so that
-// rendered fills can re-establish the `ToolsPanelContext.Provider`.
-const SlotContainer = ( { Slot: ToolsPanelSlot, ...props } ) => {
-	const toolsPanelContext = useContext( ToolsPanelContext );
-
-	return (
-		<ToolsPanelSlot
-			{ ...props }
-			fillProps={ toolsPanelContext }
-			bubblesVirtually
-		/>
-	);
-};
-
-// This wraps the slot with a `ToolsPanel` mimicking a real-world use case from
-// the block editor.
-ToolsPanelItems.Slot = ( { resetAll, ...props } ) => (
-	<ToolsPanel
-		label="Tools Panel with Item Group"
-		resetAll={ resetAll }
-		panelId={ panelId }
-		hasInnerWrapper={ true }
-		shouldRenderPlaceholderItems={ true }
-		__experimentalFirstVisibleItemClass="first"
-		__experimentalLastVisibleItemClass="last"
-	>
-		<SlotContainer { ...props } Slot={ Slot } />
-	</ToolsPanel>
-);
-
-export const ToolsPanelWithItemGroupSlot = () => {
-	const [ attributes, setAttributes ] = useState( {} );
-	const { text, background, link } = attributes;
-
-	const cx = useCx();
-	const slotWrapperClassName = cx( SlotWrapper );
-	const itemClassName = cx( ToolsPanelItemClass );
-
-	const resetAll = ( resetFilters = [] ) => {
-		let newAttributes = {};
-
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
-			};
-		} );
-
-		setAttributes( newAttributes );
-	};
-
-	const updateAttribute = ( name, value ) => {
-		setAttributes( {
-			...attributes,
-			[ name ]: value,
-		} );
-	};
-
-	const ToolsPanelColorDropdown = ( { attribute, label, value } ) => {
-		return (
-			<ToolsPanelItem
-				className={ itemClassName }
-				hasValue={ () => !! value }
-				label={ label }
-				onDeselect={ () => updateAttribute( attribute, undefined ) }
-				resetAllFilter={ () => ( { [ attribute ]: undefined } ) }
-				panelId={ panelId }
-				as={ Item }
-			>
-				<Dropdown
-					renderToggle={ ( { onToggle } ) => (
-						<Button onClick={ onToggle }>
-							<HStack justify="flex-start">
-								<ColorIndicator colorValue={ value } />
-								<FlexItem>{ label }</FlexItem>
-							</HStack>
-						</Button>
-					) }
-					renderContent={ () => (
-						<ColorPalette
-							value={ value }
-							colors={ colors }
-							onChange={ ( newColor ) =>
-								updateAttribute( attribute, newColor )
-							}
-						/>
-					) }
-				/>
-			</ToolsPanelItem>
-		);
-	};
-
-	// ToolsPanelItems are rendered via two different fills to simulate
-	// injection from multiple locations.
-	return (
-		<SlotFillProvider>
-			<PanelWrapperView>
-				<Panel>
-					<ToolsPanelItems.Slot
-						as={ ItemGroup }
-						isBordered
-						isSeparated
-						isRounded={ false }
-						className={ slotWrapperClassName }
-						resetAll={ resetAll }
-					/>
-				</Panel>
-			</PanelWrapperView>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="text"
-					label="Text"
-					value={ text }
-				/>
-				<ToolsPanelColorDropdown
-					attribute="background"
-					label="Background"
-					value={ background }
-				/>
-			</ToolsPanelItems>
-			<ToolsPanelItems>
-				<ToolsPanelColorDropdown
-					attribute="link"
-					label="Link"
-					value={ link }
-				/>
-			</ToolsPanelItems>
-		</SlotFillProvider>
-	);
-};
-
-const PanelWrapperView = styled.div`
-	font-size: 13px;
-
-	.components-dropdown-menu__menu {
-		max-width: 220px;
-	}
-`;
-
-const SlotWrapper = css`
-	&&& {
-		row-gap: 0;
-		border-radius: 20px;
-	}
-
-	> div {
-		grid-column: span 2;
-		border-radius: inherit;
-	}
-`;
-
-const ToolsPanelItemClass = css`
-	padding: 0;
-
-	&&.first {
-		border-top-left-radius: inherit;
-		border-top-right-radius: inherit;
-	}
-
-	&.last {
-		border-bottom-left-radius: inherit;
-		border-bottom-right-radius: inherit;
-		border-bottom-color: transparent;
-	}
-	&& > div,
-	&& > div > button {
-		width: 100%;
-		border-radius: inherit;
-	}
-`;
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 85ad1cb278d9b0..11536e98a128a9 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -14,14 +14,14 @@ import {
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
 const toolsPanelGrid = {
 	columns: ( columns: number ) => css`
 		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
 	`,
 	spacing: css`
-		column-gap: ${ space( 2 ) };
+		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 4 ) };
 	`,
 	item: {
@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: ${ COLORS.ui.themeDark10 };
+	color: ${ COLORS.theme.accentDarker10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;
diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js
deleted file mode 100644
index 16e03c89bb2765..00000000000000
--- a/packages/components/src/tools-panel/test/index.js
+++ /dev/null
@@ -1,1118 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, within } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ToolsPanel, ToolsPanelContext, ToolsPanelItem } from '../';
-import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
-
-const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
-const resetAll = jest.fn();
-const noop = () => undefined;
-
-// Default props for the tools panel.
-const defaultProps = {
-	label: 'Panel header',
-	resetAll,
-};
-
-// Default props for an enabled control to be rendered within panel.
-const controlProps = {
-	attributes: { value: true },
-	hasValue: jest.fn().mockImplementation( () => {
-		return !! controlProps.attributes.value;
-	} ),
-	label: 'Example',
-	onDeselect: jest.fn().mockImplementation( () => {
-		controlProps.attributes.value = undefined;
-	} ),
-	onSelect: jest.fn(),
-};
-
-// Default props without a value for an alternate control to be rendered within
-// the panel.
-const altControlProps = {
-	attributes: { value: false },
-	hasValue: jest.fn().mockImplementation( () => {
-		return !! altControlProps.attributes.value;
-	} ),
-	label: 'Alt',
-	onDeselect: jest.fn(),
-	onSelect: jest.fn(),
-};
-
-// Default props for wrapped or grouped panel items.
-const nestedControlProps = {
-	attributes: { value: true },
-	hasValue: jest.fn().mockImplementation( () => {
-		return !! nestedControlProps.attributes.value;
-	} ),
-	label: 'Nested Control 1',
-	onDeselect: jest.fn().mockImplementation( () => {
-		nestedControlProps.attributes.value = undefined;
-	} ),
-	onSelect: jest.fn(),
-	isShownByDefault: true,
-};
-
-// Alternative props for wrapped or grouped panel items.
-const altNestedControlProps = {
-	attributes: { value: false },
-	hasValue: jest.fn().mockImplementation( () => {
-		return !! altNestedControlProps.attributes.value;
-	} ),
-	label: 'Nested Control 2',
-	onDeselect: jest.fn(),
-	onSelect: jest.fn(),
-};
-
-// Simple custom component grouping panel items. Used to test panel item
-// registration and display when not an immediate child of `ToolsPanel`.
-const GroupedItems = ( {
-	defaultGroupedProps = nestedControlProps,
-	altGroupedProps = altNestedControlProps,
-} ) => {
-	return (
-		<>
-			<ToolsPanelItem { ...defaultGroupedProps }>
-				<div>Grouped control</div>
-			</ToolsPanelItem>
-			<ToolsPanelItem { ...altGroupedProps }>
-				<div>Alt grouped control</div>
-			</ToolsPanelItem>
-		</>
-	);
-};
-
-// This context object is used to help simulate different scenarios in which
-// `ToolsPanelItem` registration or deregistration requires testing.
-const panelContext = {
-	panelId: '1234',
-	menuItems: {
-		default: {},
-		optional: { [ altControlProps.label ]: true },
-	},
-	hasMenuItems: false,
-	isResetting: false,
-	shouldRenderPlaceholderItems: false,
-	registerPanelItem: jest.fn(),
-	deregisterPanelItem: jest.fn(),
-	flagItemCustomization: noop,
-	areAllOptionalControlsHidden: true,
-};
-
-// Renders a tools panel including panel items that have been grouped within
-// a custom component.
-const renderGroupedItemsInPanel = () => {
-	return render(
-		<ToolsPanel { ...defaultProps }>
-			<GroupedItems />
-		</ToolsPanel>
-	);
-};
-
-// Custom component rendering a panel item within a wrapping element. Also used
-// to test panel item registration and rendering.
-const WrappedItem = ( { text, ...props } ) => {
-	return (
-		<div>
-			<span>Wrapper</span>
-			<ToolsPanelItem { ...props }>
-				<div>{ text }</div>
-			</ToolsPanelItem>
-		</div>
-	);
-};
-
-// Renders a `ToolsPanel` with single wrapped panel item via a custom component.
-const renderWrappedItemInPanel = () => {
-	return render(
-		<ToolsPanel { ...defaultProps }>
-			<WrappedItem { ...nestedControlProps } text="Wrapped 1" />
-			<WrappedItem { ...altNestedControlProps } text="Wrapped 2" />
-		</ToolsPanel>
-	);
-};
-
-// Renders a default tools panel including children that are
-// not to be represented within the panel's menu.
-const renderPanel = () => {
-	return render(
-		<ToolsPanel { ...defaultProps }>
-			{ false && <div>Hidden</div> }
-			<ToolsPanelItem { ...controlProps }>
-				<div>Example control</div>
-			</ToolsPanelItem>
-			<ToolsPanelItem { ...altControlProps }>
-				<div>Alt control</div>
-			</ToolsPanelItem>
-			<span>Visible</span>
-		</ToolsPanel>
-	);
-};
-
-/**
- * Retrieves the panel's dropdown menu toggle button.
- *
- * @return {HTMLElement} The menu button.
- */
-const getMenuButton = () => {
-	return screen.getByRole( 'button', {
-		name: /Panel([\w\s]+)header([\w\s]+)options/i,
-	} );
-};
-
-/**
- * Helper to find the menu button and simulate a user click.
- *
- * @return {HTMLElement} The menuButton.
- */
-const openDropdownMenu = () => {
-	const menuButton = getMenuButton();
-	fireEvent.click( menuButton );
-	return menuButton;
-};
-
-// Opens dropdown then selects the menu item by label before simulating a click.
-const selectMenuItem = async ( label ) => {
-	const menuItem = await screen.findByText( label );
-	fireEvent.click( menuItem );
-};
-
-describe( 'ToolsPanel', () => {
-	afterEach( () => {
-		controlProps.attributes.value = true;
-		altControlProps.attributes.value = false;
-	} );
-
-	describe( 'basic rendering', () => {
-		it( 'should render panel', () => {
-			renderPanel();
-
-			const menuButton = getMenuButton();
-			const label = screen.getByText( defaultProps.label );
-			const control = screen.getByText( 'Example control' );
-			const nonToolsPanelItem = screen.getByText( 'Visible' );
-
-			expect( menuButton ).toBeInTheDocument();
-			expect( label ).toBeInTheDocument();
-			expect( control ).toBeInTheDocument();
-			expect( nonToolsPanelItem ).toBeInTheDocument();
-		} );
-
-		it( 'should render panel item flagged as default control even without value', () => {
-			render(
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem { ...controlProps }>
-						<div>Example control</div>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
-						<div>Alt control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const altControl = screen.getByText( 'Alt control' );
-
-			expect( altControl ).toBeInTheDocument();
-		} );
-
-		it( 'should not render panel menu when there are no panel items', () => {
-			render(
-				<ToolsPanel { ...defaultProps }>
-					{ false && (
-						<ToolsPanelItem>Should not show</ToolsPanelItem>
-					) }
-					{ false && (
-						<ToolsPanelItem>Not shown either</ToolsPanelItem>
-					) }
-					<span>Visible but insignificant</span>
-				</ToolsPanel>
-			);
-
-			const menu = screen.queryByLabelText( defaultProps.label );
-			expect( menu ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render panel menu when at least one panel item', () => {
-			renderPanel();
-
-			const menuButton = openDropdownMenu();
-			expect( menuButton ).toBeInTheDocument();
-		} );
-
-		it( 'should render reset all item in menu', async () => {
-			renderPanel();
-			openDropdownMenu();
-
-			const resetAllItem = await screen.findByRole( 'menuitem' );
-
-			expect( resetAllItem ).toBeInTheDocument();
-		} );
-
-		it( 'should render panel menu items correctly', async () => {
-			renderPanel();
-			openDropdownMenu();
-
-			const menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
-
-			expect( menuItems.length ).toEqual( 2 );
-			expect( menuItems[ 0 ] ).toHaveAttribute( 'aria-checked', 'true' );
-			expect( menuItems[ 1 ] ).toHaveAttribute( 'aria-checked', 'false' );
-		} );
-
-		it( 'should render panel label as header text', () => {
-			renderPanel();
-			const header = screen.getByText( defaultProps.label );
-
-			expect( header ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'conditional rendering of panel items', () => {
-		it( 'should render panel item when it has a value', () => {
-			renderPanel();
-
-			const exampleControl = screen.getByText( 'Example control' );
-			const altControl = screen.queryByText( 'Alt control' );
-
-			expect( exampleControl ).toBeInTheDocument();
-			expect( altControl ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render panel item when corresponding menu item is selected', async () => {
-			renderPanel();
-			await openDropdownMenu();
-			await selectMenuItem( altControlProps.label );
-			const control = await screen.findByText( 'Alt control' );
-
-			expect( control ).toBeInTheDocument();
-
-			// Test the aria live announcement.
-			const announcement = screen.getByText( 'Alt is now visible' );
-			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
-		} );
-
-		it( 'should prevent optional panel item rendering when toggled off via menu item', async () => {
-			renderPanel();
-			await openDropdownMenu();
-			await selectMenuItem( controlProps.label );
-			const control = screen.queryByText( 'Example control' );
-
-			expect( control ).not.toBeInTheDocument();
-
-			// Test the aria live announcement.
-			const announcement = screen.getByText(
-				'Example hidden and reset to default'
-			);
-			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
-		} );
-
-		it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
-			render(
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
-						<div>Default control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const control = screen.getByText( 'Default control' );
-
-			expect( control ).toBeInTheDocument();
-
-			await openDropdownMenu();
-			await selectMenuItem( controlProps.label );
-			const resetControl = screen.getByText( 'Default control' );
-
-			expect( resetControl ).toBeInTheDocument();
-
-			// Test the aria live announcement.
-			const announcement = screen.getByText( 'Example reset to default' );
-			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
-		} );
-
-		it( 'should render appropriate menu groups', async () => {
-			render(
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
-						<div>Default control</div>
-					</ToolsPanelItem>
-					<ToolsPanelItem { ...altControlProps }>
-						<div>Optional control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-			openDropdownMenu();
-
-			const menuGroups = screen.getAllByRole( 'group' );
-
-			// Groups should be: default controls, optional controls & reset all.
-			expect( menuGroups.length ).toEqual( 3 );
-		} );
-
-		it( 'should not render contents of items when in placeholder state', () => {
-			render(
-				<ToolsPanel
-					{ ...defaultProps }
-					shouldRenderPlaceholderItems={ true }
-				>
-					<ToolsPanelItem { ...altControlProps }>
-						<div>Optional control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const optionalItem = screen.queryByText( 'Optional control' );
-
-			// When rendered as a placeholder a ToolsPanelItem will just omit
-			// all the item's children. So the container element will still be
-			// there holding its position but the inner text etc should not be
-			// there.
-			expect( optionalItem ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render default controls with conditional isShownByDefault', async () => {
-			const linkedControlProps = {
-				attributes: { value: false },
-				hasValue: jest.fn().mockImplementation( () => {
-					return !! linkedControlProps.attributes.value;
-				} ),
-				label: 'Linked',
-				onDeselect: jest.fn(),
-				onSelect: jest.fn(),
-			};
-
-			const TestPanel = () => (
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
-						<div>Default control</div>
-					</ToolsPanelItem>
-					<ToolsPanelItem
-						{ ...linkedControlProps }
-						isShownByDefault={ !! altControlProps.attributes.value }
-					>
-						<div>Linked control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const { rerender } = render( <TestPanel /> );
-
-			// The linked control should start out as an optional control and is
-			// not rendered because it does not have a value.
-			let linkedItem = screen.queryByText( 'Linked control' );
-			expect( linkedItem ).not.toBeInTheDocument();
-
-			openDropdownMenu();
-
-			// The linked control should initially appear in the optional controls
-			// menu group. There should be three menu groups: default controls,
-			// optional controls, and the group to reset all options.
-			let menuGroups = screen.getAllByRole( 'group' );
-			expect( menuGroups.length ).toEqual( 3 );
-
-			// The linked control should be in the second group, of optional controls.
-			let optionalItem = within( menuGroups[ 1 ] ).getByText( 'Linked' );
-			expect( optionalItem ).toBeInTheDocument();
-
-			// Simulate the main control having a value set which should
-			// trigger the linked control becoming a default control via the
-			// conditional `isShownByDefault` prop.
-			altControlProps.attributes.value = true;
-
-			rerender( <TestPanel /> );
-
-			// The linked control should now be a default control and rendered
-			// despite not having a value.
-			linkedItem = screen.getByText( 'Linked control' );
-			expect( linkedItem ).toBeInTheDocument();
-
-			// The linked control should now appear in the default controls
-			// menu group and have been removed from the optional group.
-			menuGroups = screen.getAllByRole( 'group' );
-
-			// There should now only be two groups. The default controls and
-			// and the group for the reset all option.
-			expect( menuGroups.length ).toEqual( 2 );
-
-			// The new default control item for the Linked control should be
-			// within the first menu group.
-			const defaultItem = within( menuGroups[ 0 ] ).getByText( 'Linked' );
-			expect( defaultItem ).toBeInTheDocument();
-
-			// Optional controls have an additional aria-label. This can be used
-			// to confirm the conditional default control has been removed from
-			// the optional menu item group.
-			optionalItem = screen.queryByRole( 'menuitemcheckbox', {
-				name: 'Show Linked',
-			} );
-			expect( optionalItem ).not.toBeInTheDocument();
-		} );
-
-		it( 'should handle conditionally rendered default control', async () => {
-			const conditionalControlProps = {
-				attributes: { value: false },
-				hasValue: jest.fn().mockImplementation( () => {
-					return !! conditionalControlProps.attributes.value;
-				} ),
-				label: 'Conditional',
-				onDeselect: jest.fn(),
-				onSelect: jest.fn(),
-			};
-
-			const TestPanel = () => (
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
-						<div>Default control</div>
-					</ToolsPanelItem>
-					{ !! altControlProps.attributes.value && (
-						<ToolsPanelItem
-							{ ...conditionalControlProps }
-							isShownByDefault={ true }
-						>
-							<div>Conditional control</div>
-						</ToolsPanelItem>
-					) }
-				</ToolsPanel>
-			);
-
-			const { rerender } = render( <TestPanel /> );
-
-			// The conditional control should not yet be rendered.
-			let conditionalItem = screen.queryByText( 'Conditional control' );
-			expect( conditionalItem ).not.toBeInTheDocument();
-
-			// The conditional control should not yet appear in the default controls
-			// menu group.
-			openDropdownMenu();
-			let menuGroups = screen.getAllByRole( 'group' );
-			let defaultItem = within( menuGroups[ 0 ] ).queryByText(
-				'Conditional'
-			);
-			expect( defaultItem ).not.toBeInTheDocument();
-
-			// Simulate the main control having a value set which will now
-			// render the new default control into the ToolsPanel.
-			altControlProps.attributes.value = true;
-
-			rerender( <TestPanel /> );
-
-			// The conditional control should now be rendered and included in
-			// the panel's menu.
-			conditionalItem = screen.getByText( 'Conditional control' );
-			expect( conditionalItem ).toBeInTheDocument();
-
-			// The conditional control should now appear in the default controls
-			// menu group.
-			menuGroups = screen.getAllByRole( 'group' );
-
-			// The new default control item for the Conditional control should
-			// be within the first menu group.
-			defaultItem = within( menuGroups[ 0 ] ).getByText( 'Conditional' );
-			expect( defaultItem ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'registration of panel items', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-		} );
-
-		it( 'should register and deregister items when panelId changes', () => {
-			// This test simulates switching block selection, which causes the
-			// `ToolsPanel` to rerender with a new panelId, necessitating the
-			// registration and deregistration of appropriate `ToolsPanelItem`
-			// children.
-			//
-			// When the `panelId` changes, only items matching the new ID register
-			// themselves, while those for the old panelId deregister.
-			//
-			// See: https://github.com/WordPress/gutenberg/pull/36588
-			const context = { ...panelContext };
-			const TestPanel = () => (
-				<ToolsPanelContext.Provider value={ context }>
-					<ToolsPanelItem { ...altControlProps } panelId="1234">
-						<div>Item</div>
-					</ToolsPanelItem>
-				</ToolsPanelContext.Provider>
-			);
-
-			// On the initial render of the panel, the ToolsPanelItem should
-			// be registered.
-			const { rerender } = render( <TestPanel /> );
-
-			expect( context.registerPanelItem ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					label: altControlProps.label,
-					panelId: '1234',
-				} )
-			);
-			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
-
-			// Simulate a change in panel, e.g. a switch of block selection.
-			context.panelId = '4321';
-			context.menuItems.optional[ altControlProps.label ] = false;
-
-			// Rerender the panel item. Because we have a new panelId, this
-			// panelItem should NOT be registered, but it SHOULD be
-			// deregistered.
-			rerender( <TestPanel /> );
-
-			// registerPanelItem has still only been called once.
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
-			// deregisterPanelItem is called, given that we have switched panels.
-			expect( context.deregisterPanelItem ).toBeCalledWith(
-				altControlProps.label
-			);
-
-			// Simulate switching back to the original panelId, e.g. by selecting
-			// the original block again.
-			context.panelId = '1234';
-			context.menuItems.optional[ altControlProps.label ] = true;
-
-			// Rerender the panel and ensure that the panelItem is registered
-			// again, and it is not de-registered.
-			rerender( <TestPanel /> );
-
-			expect( context.registerPanelItem ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					label: altControlProps.label,
-					panelId: '1234',
-				} )
-			);
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
-			// deregisterPanelItem has still only been called once.
-			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
-		} );
-
-		it( 'should register items when ToolsPanel panelId is null', () => {
-			// This test simulates when a panel spans multiple block selections.
-			// Multi-selection means a panel can't have a single id to match
-			// against the item's. Instead the panel gets an id of `null` and
-			// individual items should still render themselves in this case.
-			//
-			// See: https://github.com/WordPress/gutenberg/pull/37216
-			const context = { ...panelContext, panelId: null };
-			const TestPanel = () => (
-				<ToolsPanelContext.Provider value={ context }>
-					<ToolsPanelItem { ...altControlProps } panelId="1234">
-						<div>Item</div>
-					</ToolsPanelItem>
-				</ToolsPanelContext.Provider>
-			);
-
-			// On the initial render of the panel, the ToolsPanelItem should
-			// be registered.
-			const { rerender, unmount } = render( <TestPanel /> );
-
-			expect( context.registerPanelItem ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					label: altControlProps.label,
-					panelId: '1234',
-				} )
-			);
-			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
-
-			// Simulate a further block selection being added to the
-			// multi-selection. The panelId will remain `null` in this case.
-			rerender( <TestPanel /> );
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
-			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
-
-			// Simulate a change in panel back to single block selection for
-			// which the item matches panelId.
-			context.panelId = '1234';
-			rerender( <TestPanel /> );
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
-			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
-
-			// Simulate another multi-selection where the panelId is `null`.
-			// Item should re-register itself after it deregistered as the
-			// multi-selection occurred.
-			context.panelId = null;
-			rerender( <TestPanel /> );
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
-			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
-
-			// Simulate a change in panel e.g. back to a single block selection
-			// Where the item's panelId is not a match.
-			context.panelId = '4321';
-			rerender( <TestPanel /> );
-
-			// As the item no longer matches the panelId it should not have
-			// registered again but instead deregistered.
-			unmount();
-			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
-			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 2 );
-		} );
-	} );
-
-	describe( 'callbacks on menu item selection', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-		} );
-
-		it( 'should call onDeselect callback when menu item is toggled off', async () => {
-			renderPanel();
-
-			await openDropdownMenu();
-			await selectMenuItem( controlProps.label );
-
-			expect( controlProps.onSelect ).not.toHaveBeenCalled();
-			expect( controlProps.onDeselect ).toHaveBeenCalledTimes( 1 );
-		} );
-
-		it( 'should call onSelect callback when menu item is toggled on', async () => {
-			renderPanel();
-
-			await openDropdownMenu();
-			await selectMenuItem( altControlProps.label );
-
-			expect( altControlProps.onSelect ).toHaveBeenCalledTimes( 1 );
-			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should call resetAll callback when its menu item is selected', async () => {
-			renderPanel();
-
-			await openDropdownMenu();
-			await selectMenuItem( 'Reset all' );
-
-			expect( resetAll ).toHaveBeenCalledTimes( 1 );
-			expect( controlProps.onSelect ).not.toHaveBeenCalled();
-			expect( controlProps.onDeselect ).not.toHaveBeenCalled();
-			expect( altControlProps.onSelect ).not.toHaveBeenCalled();
-			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
-		} );
-
-		// This confirms the internal `isResetting` state when resetting all
-		// controls does not prevent subsequent individual reset requests.
-		// i.e. onDeselect callbacks are called correctly after a resetAll.
-		it( 'should call onDeselect after previous reset all', async () => {
-			renderPanel();
-
-			await openDropdownMenu();
-			await selectMenuItem( 'Reset all' ); // Initial control is displayed by default.
-			await selectMenuItem( controlProps.label ); // Re-display control.
-
-			expect( controlProps.onDeselect ).not.toHaveBeenCalled();
-
-			await selectMenuItem( controlProps.label ); // Reset control.
-
-			expect( controlProps.onDeselect ).toHaveBeenCalled();
-		} );
-	} );
-
-	describe( 'grouped panel items within custom components', () => {
-		it( 'should render grouped items correctly', () => {
-			renderGroupedItemsInPanel();
-
-			const defaultItem = screen.getByText( 'Grouped control' );
-			const altItem = screen.queryByText( 'Alt grouped control' );
-
-			expect( defaultItem ).toBeInTheDocument();
-			expect( altItem ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render grouped items within the menu', async () => {
-			renderGroupedItemsInPanel();
-			openDropdownMenu();
-
-			const defaultItem = screen.getByText( 'Nested Control 1' );
-			const defaultMenuItem = screen.getByRole( 'menuitem', {
-				name: 'Reset Nested Control 1',
-			} );
-
-			const altItem = screen.getByText( 'Nested Control 2' );
-			const altMenuItem = screen.getByRole( 'menuitemcheckbox', {
-				name: 'Show Nested Control 2',
-				checked: false,
-			} );
-
-			expect( defaultItem ).toBeInTheDocument();
-			expect( defaultMenuItem ).toBeInTheDocument();
-
-			expect( altItem ).toBeInTheDocument();
-			expect( altMenuItem ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'wrapped panel items within custom components', () => {
-		it( 'should render wrapped items correctly', () => {
-			renderWrappedItemInPanel();
-
-			const wrappers = screen.getAllByText( 'Wrapper' );
-			const defaultItem = screen.getByText( 'Wrapped 1' );
-			const altItem = screen.queryByText( 'Wrapped 2' );
-
-			// Both wrappers should be rendered but only the panel item
-			// displayed by default should be within the document.
-			expect( wrappers.length ).toEqual( 2 );
-			expect( defaultItem ).toBeInTheDocument();
-			expect( altItem ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render wrapped items within the menu', () => {
-			renderWrappedItemInPanel();
-			openDropdownMenu();
-
-			const defaultItem = screen.getByText( 'Nested Control 1' );
-			const defaultMenuItem = screen.getByRole( 'menuitem', {
-				name: 'Reset Nested Control 1',
-			} );
-
-			const altItem = screen.getByText( 'Nested Control 2' );
-			const altMenuItem = screen.getByRole( 'menuitemcheckbox', {
-				name: 'Show Nested Control 2',
-				checked: false,
-			} );
-
-			expect( defaultItem ).toBeInTheDocument();
-			expect( defaultMenuItem ).toBeInTheDocument();
-
-			expect( altItem ).toBeInTheDocument();
-			expect( altMenuItem ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'rendering via SlotFills', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-		} );
-
-		it( 'should maintain visual order of controls when toggled on and off', async () => {
-			// Multiple fills are added to better simulate panel items being
-			// injected from different locations.
-			render(
-				<SlotFillProvider>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...altControlProps }>
-							<div>Item 1</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...controlProps }>
-							<div>Item 2</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanel { ...defaultProps }>
-						<Slot />
-					</ToolsPanel>
-				</SlotFillProvider>
-			);
-
-			// Only the second item should be shown initially as it has a value.
-			const firstItem = screen.queryByText( 'Item 1' );
-			const secondItem = screen.getByText( 'Item 2' );
-
-			expect( firstItem ).not.toBeInTheDocument();
-			expect( secondItem ).toBeInTheDocument();
-
-			// Toggle on the first item.
-			await openDropdownMenu();
-			await selectMenuItem( altControlProps.label );
-
-			// The order of items should be as per their original source order.
-			let items = screen.getAllByText( /Item [1-2]/ );
-
-			expect( items ).toHaveLength( 2 );
-			expect( items[ 0 ] ).toHaveTextContent( 'Item 1' );
-			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
-
-			// Then toggle off both items.
-			await selectMenuItem( controlProps.label );
-			await selectMenuItem( altControlProps.label );
-
-			// Toggle on controls again and ensure order remains.
-			await selectMenuItem( controlProps.label );
-			await selectMenuItem( altControlProps.label );
-
-			items = screen.getAllByText( /Item [1-2]/ );
-
-			expect( items ).toHaveLength( 2 );
-			expect( items[ 0 ] ).toHaveTextContent( 'Item 1' );
-			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
-		} );
-
-		it( 'should not trigger callback when fill has not updated yet when panel has', () => {
-			// Fill provided controls can update independently to the panel.
-			// A `panelId` prop was added to both panels and items
-			// so it could prevent erroneous registrations and calls to
-			// `onDeselect` etc.
-			//
-			// See: https://github.com/WordPress/gutenberg/pull/35375
-			//
-			// This test simulates this issue by rendering an item within a
-			// contrived `ToolsPanelContext` to reflect the changes the panel
-			// item needs to protect against.
-			const context = {
-				panelId: '1234',
-				menuItems: {
-					default: {},
-					optional: { [ altControlProps.label ]: true },
-				},
-				hasMenuItems: false,
-				isResetting: false,
-				shouldRenderPlaceholderItems: false,
-				registerPanelItem: noop,
-				deregisterPanelItem: noop,
-				flagItemCustomization: noop,
-				areAllOptionalControlsHidden: true,
-			};
-
-			// This initial render gives the tools panel item a chance to
-			// set its internal state to reflect it was previously selected.
-			// This later forms part of the condition used to determine if an
-			// item is being deselected and thus call the onDeselect callback.
-			const { rerender } = render(
-				<ToolsPanelContext.Provider value={ context }>
-					<ToolsPanelItem { ...altControlProps } panelId="1234">
-						<div>Item</div>
-					</ToolsPanelItem>
-				</ToolsPanelContext.Provider>
-			);
-
-			// Simulate a change in panel separate to the rendering of fills.
-			// e.g. a switch of block selection.
-			context.panelId = '4321';
-			context.menuItems.optional[ altControlProps.label ] = false;
-
-			// Rerender the panel item and ensure that it skips any check
-			// for deselection given it still belongs to a different panelId.
-			rerender(
-				<ToolsPanelContext.Provider value={ context }>
-					<ToolsPanelItem { ...altControlProps } panelId="1234">
-						<div>Item</div>
-					</ToolsPanelItem>
-				</ToolsPanelContext.Provider>
-			);
-
-			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should not contain orphaned menu items when panelId changes', async () => {
-			// As fills and the panel can update independently this aims to
-			// test that no orphaned items appear registered in the panel menu.
-			//
-			// See: https://github.com/WordPress/gutenberg/pull/34085
-			const TestSlotFillPanel = ( { panelId } ) => (
-				<SlotFillProvider>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...altControlProps } panelId="1234">
-							<div>Item 1</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...controlProps } panelId="9999">
-							<div>Item 2</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanel { ...defaultProps } panelId={ panelId }>
-						<Slot />
-					</ToolsPanel>
-				</SlotFillProvider>
-			);
-
-			const { rerender } = render( <TestSlotFillPanel panelId="1234" /> );
-			await openDropdownMenu();
-
-			// Only the item matching the panelId should have been registered
-			// and appear in the panel menu.
-			let altMenuItem = screen.getByRole( 'menuitemcheckbox', {
-				name: 'Show Alt',
-			} );
-			let exampleMenuItem = screen.queryByRole( 'menuitemcheckbox', {
-				name: 'Hide and reset Example',
-			} );
-
-			expect( altMenuItem ).toBeInTheDocument();
-			expect( exampleMenuItem ).not.toBeInTheDocument();
-
-			// Re-render the panel with different panelID simulating a block
-			// selection change.
-			rerender( <TestSlotFillPanel panelId="9999" /> );
-
-			altMenuItem = screen.queryByRole( 'menuitemcheckbox', {
-				name: 'Show Alt',
-			} );
-			exampleMenuItem = screen.getByRole( 'menuitemcheckbox', {
-				name: 'Hide and reset Example',
-			} );
-
-			expect( altMenuItem ).not.toBeInTheDocument();
-			expect( exampleMenuItem ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'panel header icon toggle', () => {
-		const defaultControls = {
-			attributes: { value: false },
-			hasValue: jest.fn().mockImplementation( () => {
-				return !! defaultControls.attributes.value;
-			} ),
-			label: 'Default',
-			onDeselect: jest.fn(),
-			onSelect: jest.fn(),
-			isShownByDefault: true,
-		};
-
-		const optionalControls = {
-			attributes: { value: false },
-			hasValue: jest.fn().mockImplementation( () => {
-				return !! optionalControls.attributes.value;
-			} ),
-			label: 'Optional',
-			onDeselect: jest.fn(),
-			onSelect: jest.fn(),
-			isShownByDefault: false,
-		};
-
-		it( 'should render appropriate labels and descriptions for the dropdown menu where there are default controls', async () => {
-			render(
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem { ...defaultControls }>
-						<div>Default control</div>
-					</ToolsPanelItem>
-					<ToolsPanelItem { ...optionalControls }>
-						<div>Optional control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const optionsDisplayedIcon = screen.getByRole( 'button', {
-				name: 'Panel header options',
-			} );
-
-			expect( optionsDisplayedIcon ).toBeInTheDocument();
-
-			// The dropdown toggle doesn't have a description when an option is displayed.
-			// In this case the default control is displayed.
-			expect( optionsDisplayedIcon ).not.toHaveAccessibleDescription();
-		} );
-
-		it( 'should render appropriate labels and descriptions for the dropdown menu where there are no default controls', async () => {
-			// All options are inactive.
-			render(
-				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem { ...optionalControls }>
-						<div>Optional control</div>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			);
-
-			const optionsHiddenIcon = screen.getByRole( 'button', {
-				name: 'Panel header options',
-			} );
-
-			// The dropdown toggle has a description indicating that all options are hidden.
-			expect( optionsHiddenIcon ).toBeInTheDocument();
-			expect( optionsHiddenIcon ).toHaveAccessibleDescription(
-				'All options are currently hidden'
-			);
-
-			// Activate one of the options.
-			await openDropdownMenu();
-			await selectMenuItem( optionalControls.label );
-
-			const optionsDisplayedIcon = screen.getByRole( 'button', {
-				name: 'Panel header options',
-			} );
-
-			// The dropdown toggle no longer has a description.
-			expect( optionsDisplayedIcon ).not.toHaveAccessibleDescription();
-		} );
-	} );
-
-	describe( 'reset all button', () => {
-		it( "should disable the reset all button when there's nothing to reset", async () => {
-			await renderPanel();
-			await openDropdownMenu();
-
-			const resetAllItem = await screen.findByRole( 'menuitem', {
-				disabled: false,
-			} );
-			expect( resetAllItem ).toBeInTheDocument();
-
-			await selectMenuItem( 'Reset all' );
-
-			// Test the aria live announcement.
-			const announcement = screen.getByText( 'All options reset' );
-			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
-
-			const disabledResetAllItem = await screen.findByRole( 'menuitem', {
-				disabled: true,
-			} );
-			expect( disabledResetAllItem ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'first and last panel items', () => {
-		it( 'should apply first/last classes to appropriate items', () => {
-			render(
-				<SlotFillProvider>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...altControlProps }>
-							<div>Item 1</div>
-						</ToolsPanelItem>
-						<ToolsPanelItem { ...controlProps }>
-							<div>Item 2</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanelItems>
-						<ToolsPanelItem
-							{ ...altControlProps }
-							label="Item 3"
-							isShownByDefault={ true }
-						>
-							<div>Item 3</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanelItems>
-						<ToolsPanelItem { ...altControlProps } label="Item 4">
-							<div>Item 4</div>
-						</ToolsPanelItem>
-					</ToolsPanelItems>
-					<ToolsPanel
-						{ ...defaultProps }
-						hasInnerWrapper={ true }
-						shouldRenderPlaceholderItems={ true }
-						__experimentalFirstVisibleItemClass="first"
-						__experimentalLastVisibleItemClass="last"
-					>
-						<Slot />
-					</ToolsPanel>
-				</SlotFillProvider>
-			);
-
-			const item2 = screen.getByText( 'Item 2' );
-			const item3 = screen.getByText( 'Item 3' );
-
-			expect( screen.queryByText( 'Item 1' ) ).not.toBeInTheDocument();
-			expect( item2 ).toBeInTheDocument();
-			expect( item3 ).toBeInTheDocument();
-			expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
-
-			expect( item2.parentElement ).toHaveClass( 'first' );
-			expect( item3.parentElement ).toHaveClass( 'last' );
-		} );
-	} );
-} );
diff --git a/packages/components/src/tools-panel/test/index.tsx b/packages/components/src/tools-panel/test/index.tsx
new file mode 100644
index 00000000000000..68cf72233121e0
--- /dev/null
+++ b/packages/components/src/tools-panel/test/index.tsx
@@ -0,0 +1,1342 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { ToolsPanel, ToolsPanelContext, ToolsPanelItem } from '../';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
+import type {
+	ToolsPanelContext as ToolsPanelContextType,
+	ResetAllFilter,
+} from '../types';
+
+const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
+const resetAll = jest.fn();
+const noop = () => undefined;
+
+type ControlValue = boolean | undefined;
+
+// Default props for the tools panel.
+const defaultProps = {
+	label: 'Panel header',
+	resetAll,
+};
+
+// Default props for an enabled control to be rendered within panel.
+let controlValue: ControlValue = true;
+const controlProps = {
+	hasValue: jest.fn().mockImplementation( () => {
+		return !! controlValue;
+	} ),
+	label: 'Example',
+	onDeselect: jest.fn().mockImplementation( () => {
+		controlValue = undefined;
+	} ),
+	onSelect: jest.fn(),
+};
+
+// Default props without a value for an alternate control to be rendered within
+// the panel.
+let altControlValue: ControlValue = false;
+const altControlProps = {
+	hasValue: jest.fn().mockImplementation( () => {
+		return !! altControlValue;
+	} ),
+	label: 'Alt',
+	onDeselect: jest.fn(),
+	onSelect: jest.fn(),
+};
+
+// Default props for wrapped or grouped panel items.
+let nestedControlValue: ControlValue = true;
+const nestedControlProps = {
+	hasValue: jest.fn().mockImplementation( () => {
+		return !! nestedControlValue;
+	} ),
+	label: 'Nested Control 1',
+	onDeselect: jest.fn().mockImplementation( () => {
+		nestedControlValue = undefined;
+	} ),
+	onSelect: jest.fn(),
+	isShownByDefault: true,
+};
+
+// Alternative props for wrapped or grouped panel items.
+const altNestedControlValue: ControlValue = false;
+const altNestedControlProps = {
+	hasValue: jest.fn().mockImplementation( () => {
+		return !! altNestedControlValue;
+	} ),
+	label: 'Nested Control 2',
+	onDeselect: jest.fn(),
+	onSelect: jest.fn(),
+};
+
+// Simple custom component grouping panel items. Used to test panel item
+// registration and display when not an immediate child of `ToolsPanel`.
+const GroupedItems = ( {
+	defaultGroupedProps = nestedControlProps,
+	altGroupedProps = altNestedControlProps,
+} ) => {
+	return (
+		<>
+			<ToolsPanelItem { ...defaultGroupedProps }>
+				<div>Grouped control</div>
+			</ToolsPanelItem>
+			<ToolsPanelItem { ...altGroupedProps }>
+				<div>Alt grouped control</div>
+			</ToolsPanelItem>
+		</>
+	);
+};
+
+// This context object is used to help simulate different scenarios in which
+// `ToolsPanelItem` registration or deregistration requires testing.
+const panelContext: ToolsPanelContextType = {
+	panelId: '1234',
+	menuItems: {
+		default: {},
+		optional: { [ altControlProps.label ]: true },
+	},
+	hasMenuItems: false,
+	isResetting: false,
+	shouldRenderPlaceholderItems: false,
+	registerPanelItem: jest.fn(),
+	deregisterPanelItem: jest.fn(),
+	registerResetAllFilter: jest.fn(),
+	deregisterResetAllFilter: jest.fn(),
+	flagItemCustomization: noop,
+	areAllOptionalControlsHidden: true,
+};
+
+// Renders a tools panel including panel items that have been grouped within
+// a custom component.
+const renderGroupedItemsInPanel = () => {
+	return render(
+		<ToolsPanel { ...defaultProps }>
+			<GroupedItems />
+		</ToolsPanel>
+	);
+};
+
+// Custom component rendering a panel item within a wrapping element. Also used
+// to test panel item registration and rendering.
+const WrappedItem = ( {
+	text,
+	...props
+}: React.ComponentProps< typeof ToolsPanelItem > & { text: string } ) => {
+	return (
+		<div>
+			<span>Wrapper</span>
+			<ToolsPanelItem { ...props }>
+				<div>{ text }</div>
+			</ToolsPanelItem>
+		</div>
+	);
+};
+
+// Renders a `ToolsPanel` with single wrapped panel item via a custom component.
+const renderWrappedItemInPanel = () => {
+	return render(
+		<ToolsPanel { ...defaultProps }>
+			<WrappedItem { ...nestedControlProps } text="Wrapped 1" />
+			<WrappedItem { ...altNestedControlProps } text="Wrapped 2" />
+		</ToolsPanel>
+	);
+};
+
+// Renders a default tools panel including children that are
+// not to be represented within the panel's menu.
+const renderPanel = () => {
+	return render(
+		<ToolsPanel { ...defaultProps }>
+			<ToolsPanelItem { ...controlProps }>
+				<div>Example control</div>
+			</ToolsPanelItem>
+			<ToolsPanelItem { ...altControlProps }>
+				<div>Alt control</div>
+			</ToolsPanelItem>
+			<span>Visible</span>
+		</ToolsPanel>
+	);
+};
+
+/**
+ * Retrieves the panel's dropdown menu toggle button.
+ *
+ * @return {HTMLElement} The menu button.
+ */
+const getMenuButton = () => {
+	return screen.getByRole( 'button', {
+		name: /Panel([\w\s]+)header([\w\s]+)options/i,
+	} );
+};
+
+/**
+ * Helper to find the menu button and simulate a user click.
+ *
+ */
+const openDropdownMenu = async () => {
+	const user = userEvent.setup();
+	const menuButton = getMenuButton();
+	await user.click( menuButton );
+	return menuButton;
+};
+
+// Opens dropdown then selects the menu item by label before simulating a click.
+const selectMenuItem = async ( label: string ) => {
+	const user = userEvent.setup();
+	const menuItem = await screen.findByText( label );
+	await user.click( menuItem );
+};
+
+describe( 'ToolsPanel', () => {
+	afterEach( () => {
+		controlValue = true;
+		altControlValue = false;
+	} );
+
+	describe( 'basic rendering', () => {
+		it( 'should render panel', () => {
+			renderPanel();
+
+			const menuButton = getMenuButton();
+			const label = screen.getByText( defaultProps.label );
+			const control = screen.getByText( 'Example control' );
+			const nonToolsPanelItem = screen.getByText( 'Visible' );
+
+			expect( menuButton ).toBeInTheDocument();
+			expect( label ).toBeInTheDocument();
+			expect( control ).toBeInTheDocument();
+			expect( nonToolsPanelItem ).toBeInTheDocument();
+		} );
+
+		it( 'should render panel item flagged as default control even without value', () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...controlProps }>
+						<div>Example control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
+						<div>Alt control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const altControl = screen.getByText( 'Alt control' );
+
+			expect( altControl ).toBeInTheDocument();
+		} );
+
+		it( 'should not render panel menu when there are no panel items', () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<span>Visible but insignificant</span>
+				</ToolsPanel>
+			);
+
+			const menu = screen.queryByLabelText( defaultProps.label );
+			expect( menu ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render panel menu when at least one panel item', async () => {
+			renderPanel();
+
+			const menuButton = await openDropdownMenu();
+			expect( menuButton ).toBeInTheDocument();
+		} );
+
+		it( 'should render reset all item in menu', async () => {
+			renderPanel();
+			await openDropdownMenu();
+
+			const resetAllItem = await screen.findByRole( 'menuitem' );
+
+			expect( resetAllItem ).toBeInTheDocument();
+		} );
+
+		it( 'should render panel menu items correctly', async () => {
+			renderPanel();
+			await openDropdownMenu();
+
+			const menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 2 );
+			expect( menuItems[ 0 ] ).toBeChecked();
+			expect( menuItems[ 1 ] ).not.toBeChecked();
+		} );
+
+		it( 'should render panel label as header text', () => {
+			renderPanel();
+			const header = screen.getByText( defaultProps.label );
+
+			expect( header ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'conditional rendering of panel items', () => {
+		it( 'should render panel item when it has a value', () => {
+			renderPanel();
+
+			const exampleControl = screen.getByText( 'Example control' );
+			const altControl = screen.queryByText( 'Alt control' );
+
+			expect( exampleControl ).toBeInTheDocument();
+			expect( altControl ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render panel item when corresponding menu item is selected', async () => {
+			renderPanel();
+			await openDropdownMenu();
+			await selectMenuItem( altControlProps.label );
+			const control = await screen.findByText( 'Alt control' );
+
+			expect( control ).toBeInTheDocument();
+
+			// Test the aria live announcement.
+			const announcement = screen.getByText( 'Alt is now visible' );
+			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
+		} );
+
+		it( 'should prevent optional panel item rendering when toggled off via menu item', async () => {
+			renderPanel();
+			await openDropdownMenu();
+			await selectMenuItem( controlProps.label );
+			const control = screen.queryByText( 'Example control' );
+
+			expect( control ).not.toBeInTheDocument();
+
+			// Test the aria live announcement.
+			const announcement = screen.getByText(
+				'Example hidden and reset to default'
+			);
+			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
+		} );
+
+		it( 'should render optional panel item when value is updated externally and panel has an ID', async () => {
+			const ToolsPanelOptional = ( {
+				toolsPanelItemValue,
+			}: {
+				toolsPanelItemValue?: number;
+			} ) => {
+				const itemProps = {
+					attributes: { value: toolsPanelItemValue },
+					hasValue: () => !! toolsPanelItemValue,
+					label: 'Alt',
+					onDeselect: jest.fn(),
+					onSelect: jest.fn(),
+				};
+
+				return (
+					<ToolsPanel { ...defaultProps }>
+						<ToolsPanelItem { ...itemProps }>
+							<div>Optional control</div>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				);
+			};
+			const { rerender } = render( <ToolsPanelOptional /> );
+
+			const control = screen.queryByText( 'Optional control' );
+
+			expect( control ).not.toBeInTheDocument();
+
+			rerender( <ToolsPanelOptional toolsPanelItemValue={ 100 } /> );
+
+			const controlRerendered = screen.getByText( 'Optional control' );
+
+			expect( controlRerendered ).toBeInTheDocument();
+		} );
+
+		it( 'should render optional item when value is updated externally and panelId is null', async () => {
+			// This test partially covers: https://github.com/WordPress/gutenberg/issues/47368
+			const ToolsPanelOptional = ( {
+				toolsPanelItemValue,
+			}: {
+				toolsPanelItemValue?: number;
+			} ) => {
+				const itemProps = {
+					attributes: { value: toolsPanelItemValue },
+					hasValue: () => !! toolsPanelItemValue,
+					label: 'Alt',
+					onDeselect: jest.fn(),
+					onSelect: jest.fn(),
+				};
+
+				// The null panelId below simulates the panel prop when there
+				// are multiple blocks selected.
+				return (
+					<ToolsPanel { ...defaultProps } panelId={ null }>
+						<ToolsPanelItem { ...itemProps }>
+							<div>Optional control</div>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				);
+			};
+
+			const { rerender } = render( <ToolsPanelOptional /> );
+			const control = screen.queryByText( 'Optional control' );
+
+			expect( control ).not.toBeInTheDocument();
+
+			rerender( <ToolsPanelOptional toolsPanelItemValue={ 99 } /> );
+
+			const controlRerendered = screen.getByText( 'Optional control' );
+
+			expect( controlRerendered ).toBeInTheDocument();
+		} );
+
+		it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
+						<div>Default control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const control = screen.getByText( 'Default control' );
+
+			expect( control ).toBeInTheDocument();
+
+			await openDropdownMenu();
+			await selectMenuItem( controlProps.label );
+			const resetControl = screen.getByText( 'Default control' );
+
+			expect( resetControl ).toBeInTheDocument();
+
+			// Test the aria live announcement.
+			const announcement = screen.getByText( 'Example reset to default' );
+			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
+		} );
+
+		it( 'should render appropriate menu groups', async () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...altControlProps }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+			await openDropdownMenu();
+
+			const menuGroups = screen.getAllByRole( 'group' );
+
+			// There are now only two groups controls & reset all.
+			expect( menuGroups.length ).toEqual( 2 );
+		} );
+
+		it( 'should not render contents of items when in placeholder state', () => {
+			render(
+				<ToolsPanel { ...defaultProps } shouldRenderPlaceholderItems>
+					<ToolsPanelItem { ...altControlProps }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const optionalItem = screen.queryByText( 'Optional control' );
+
+			// When rendered as a placeholder a ToolsPanelItem will just omit
+			// all the item's children. So the container element will still be
+			// there holding its position but the inner text etc should not be
+			// there.
+			expect( optionalItem ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render default controls with conditional isShownByDefault', async () => {
+			const linkedControlValue = false;
+			const linkedControlProps = {
+				hasValue: jest.fn().mockImplementation( () => {
+					return !! linkedControlValue;
+				} ),
+				label: 'Linked',
+				onDeselect: jest.fn(),
+				onSelect: jest.fn(),
+			};
+
+			const TestPanel = () => (
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						{ ...linkedControlProps }
+						isShownByDefault={ !! altControlValue }
+					>
+						<div>Linked control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const { rerender } = render( <TestPanel /> );
+
+			// The linked control should start out as an optional control and is
+			// not rendered because it does not have a value.
+			let linkedItem = screen.queryByText( 'Linked control' );
+			expect( linkedItem ).not.toBeInTheDocument();
+
+			await openDropdownMenu();
+
+			let menuGroups = screen.getAllByRole( 'group' );
+
+			// The linked control should be in the first group of controls.
+			expect(
+				within( menuGroups[ 0 ] ).getByText( 'Linked' )
+			).toBeInTheDocument();
+
+			// Simulate the main control having a value set which should
+			// trigger the linked control becoming a default control via the
+			// conditional `isShownByDefault` prop.
+			altControlValue = true;
+
+			rerender( <TestPanel /> );
+
+			// The linked control should now be a default control and rendered
+			// despite not having a value.
+			linkedItem = screen.getByText( 'Linked control' );
+			expect( linkedItem ).toBeInTheDocument();
+
+			// The linked control should still appear in the controls
+			// menu group but as a default control.
+			menuGroups = screen.getAllByRole( 'group' );
+
+			// The new default control item for the Linked control should still
+			// be within the first menu group.
+			const defaultItem = within( menuGroups[ 0 ] ).getByText( 'Linked' );
+			expect( defaultItem ).toBeInTheDocument();
+
+			// Optional controls have an additional aria-label. This can be used
+			// to confirm the conditional default control is now being treated
+			// as default control.
+			expect(
+				screen.queryByRole( 'menuitemcheckbox', {
+					name: 'Show Linked',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should handle conditionally rendered default control', async () => {
+			const conditionalControlValue = false;
+			const conditionalControlProps = {
+				hasValue: jest.fn().mockImplementation( () => {
+					return !! conditionalControlValue;
+				} ),
+				label: 'Conditional',
+				onDeselect: jest.fn(),
+				onSelect: jest.fn(),
+			};
+
+			const TestPanel = () => (
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					{ !! altControlValue && (
+						<ToolsPanelItem
+							{ ...conditionalControlProps }
+							isShownByDefault
+						>
+							<div>Conditional control</div>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
+			);
+
+			const { rerender } = render( <TestPanel /> );
+
+			// The conditional control should not yet be rendered.
+			let conditionalItem = screen.queryByText( 'Conditional control' );
+			expect( conditionalItem ).not.toBeInTheDocument();
+
+			// The conditional control should not yet appear in the controls
+			// menu group.
+			await openDropdownMenu();
+			let menuGroups = screen.getAllByRole( 'group' );
+			let defaultItem = within( menuGroups[ 0 ] ).queryByText(
+				'Conditional'
+			);
+			expect( defaultItem ).not.toBeInTheDocument();
+
+			// Simulate the main control having a value set which will now
+			// render the new default control into the ToolsPanel.
+			altControlValue = true;
+
+			rerender( <TestPanel /> );
+
+			// The conditional control should now be rendered and included in
+			// the panel's menu.
+			conditionalItem = screen.getByText( 'Conditional control' );
+			expect( conditionalItem ).toBeInTheDocument();
+
+			// The conditional control should now appear in the controls
+			// menu group.
+			menuGroups = screen.getAllByRole( 'group' );
+
+			// The new default control item for the Conditional control should
+			// be within the first menu group.
+			defaultItem = within( menuGroups[ 0 ] ).getByText( 'Conditional' );
+			expect( defaultItem ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'registration of panel items', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+		} );
+
+		it( 'should register and deregister items when panelId changes', () => {
+			// This test simulates switching block selection, which causes the
+			// `ToolsPanel` to rerender with a new panelId, necessitating the
+			// registration and deregistration of appropriate `ToolsPanelItem`
+			// children.
+			//
+			// When the `panelId` changes, only items matching the new ID register
+			// themselves, while those for the old panelId deregister.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/36588
+			const context: ToolsPanelContextType = { ...panelContext };
+			const TestPanel = () => (
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			// On the initial render of the panel, the ToolsPanelItem should
+			// be registered.
+			const { rerender } = render( <TestPanel /> );
+
+			expect( context.registerPanelItem ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					label: altControlProps.label,
+					panelId: '1234',
+				} )
+			);
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a change in panel, e.g. a switch of block selection.
+			context.panelId = '4321';
+			context.menuItems.optional[ altControlProps.label ] = false;
+
+			// Rerender the panel item. Because we have a new panelId, this
+			// panelItem should NOT be registered, but it SHOULD be
+			// deregistered.
+			rerender( <TestPanel /> );
+
+			// registerPanelItem has still only been called once.
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			// deregisterPanelItem is called, given that we have switched panels.
+			expect( context.deregisterPanelItem ).toHaveBeenCalledWith(
+				altControlProps.label
+			);
+
+			// Simulate switching back to the original panelId, e.g. by selecting
+			// the original block again.
+			context.panelId = '1234';
+			context.menuItems.optional[ altControlProps.label ] = true;
+
+			// Rerender the panel and ensure that the panelItem is registered
+			// again, and it is not de-registered.
+			rerender( <TestPanel /> );
+
+			expect( context.registerPanelItem ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					label: altControlProps.label,
+					panelId: '1234',
+				} )
+			);
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			// deregisterPanelItem has still only been called once.
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should register items when ToolsPanel panelId is null', () => {
+			// This test simulates when a panel spans multiple block selections.
+			// Multi-selection means a panel can't have a single id to match
+			// against the item's. Instead the panel gets an id of `null` and
+			// individual items should still render themselves in this case.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/37216
+			const context: ToolsPanelContextType = {
+				...panelContext,
+				panelId: null,
+			};
+			const TestPanel = () => (
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			// On the initial render of the panel, the ToolsPanelItem should
+			// be registered.
+			const { rerender, unmount } = render( <TestPanel /> );
+
+			expect( context.registerPanelItem ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					label: altControlProps.label,
+					panelId: '1234',
+				} )
+			);
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a further block selection being added to the
+			// multi-selection. The panelId will remain `null` in this case.
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate a change in panel back to single block selection for
+			// which the item matches panelId.
+			context.panelId = '1234';
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 1 );
+			expect( context.deregisterPanelItem ).not.toHaveBeenCalled();
+
+			// Simulate another multi-selection where the panelId is `null`.
+			// Item should re-register itself after it deregistered as the
+			// multi-selection occurred.
+			context.panelId = null;
+			rerender( <TestPanel /> );
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 1 );
+
+			// Simulate a change in panel e.g. back to a single block selection
+			// Where the item's panelId is not a match.
+			context.panelId = '4321';
+			rerender( <TestPanel /> );
+
+			// As the item no longer matches the panelId it should not have
+			// registered again but instead deregistered.
+			unmount();
+			expect( context.registerPanelItem ).toHaveBeenCalledTimes( 2 );
+			expect( context.deregisterPanelItem ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+
+	describe( 'callbacks on menu item selection', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+		} );
+
+		it( 'should call onDeselect callback when menu item is toggled off', async () => {
+			renderPanel();
+
+			await openDropdownMenu();
+			await selectMenuItem( controlProps.label );
+
+			expect( controlProps.onSelect ).not.toHaveBeenCalled();
+			expect( controlProps.onDeselect ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should call onSelect callback when menu item is toggled on', async () => {
+			renderPanel();
+
+			await openDropdownMenu();
+			await selectMenuItem( altControlProps.label );
+
+			expect( altControlProps.onSelect ).toHaveBeenCalledTimes( 1 );
+			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should call resetAll callback when its menu item is selected', async () => {
+			renderPanel();
+
+			await openDropdownMenu();
+			await selectMenuItem( 'Reset all' );
+
+			expect( resetAll ).toHaveBeenCalledTimes( 1 );
+			expect( controlProps.onSelect ).not.toHaveBeenCalled();
+			expect( controlProps.onDeselect ).not.toHaveBeenCalled();
+			expect( altControlProps.onSelect ).not.toHaveBeenCalled();
+			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
+		} );
+
+		// This confirms the internal `isResetting` state when resetting all
+		// controls does not prevent subsequent individual reset requests.
+		// i.e. onDeselect callbacks are called correctly after a resetAll.
+		it( 'should call onDeselect after previous reset all', async () => {
+			renderPanel();
+
+			await openDropdownMenu();
+			await selectMenuItem( 'Reset all' ); // Initial control is displayed by default.
+			await selectMenuItem( controlProps.label ); // Re-display control.
+
+			expect( controlProps.onDeselect ).not.toHaveBeenCalled();
+
+			await selectMenuItem( controlProps.label ); // Reset control.
+
+			expect( controlProps.onDeselect ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'grouped panel items within custom components', () => {
+		it( 'should render grouped items correctly', () => {
+			renderGroupedItemsInPanel();
+
+			const defaultItem = screen.getByText( 'Grouped control' );
+			const altItem = screen.queryByText( 'Alt grouped control' );
+
+			expect( defaultItem ).toBeInTheDocument();
+			expect( altItem ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render grouped items within the menu', async () => {
+			renderGroupedItemsInPanel();
+			await openDropdownMenu();
+
+			const defaultItem = screen.getByText( 'Nested Control 1' );
+			const defaultMenuItem = screen.getByRole( 'menuitem', {
+				name: 'Reset Nested Control 1',
+			} );
+
+			const altItem = screen.getByText( 'Nested Control 2' );
+			const altMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Show Nested Control 2',
+				checked: false,
+			} );
+
+			expect( defaultItem ).toBeInTheDocument();
+			expect( defaultMenuItem ).toBeInTheDocument();
+
+			expect( altItem ).toBeInTheDocument();
+			expect( altMenuItem ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'wrapped panel items within custom components', () => {
+		it( 'should render wrapped items correctly', () => {
+			renderWrappedItemInPanel();
+
+			const wrappers = screen.getAllByText( 'Wrapper' );
+			const defaultItem = screen.getByText( 'Wrapped 1' );
+			const altItem = screen.queryByText( 'Wrapped 2' );
+
+			// Both wrappers should be rendered but only the panel item
+			// displayed by default should be within the document.
+			expect( wrappers.length ).toEqual( 2 );
+			expect( defaultItem ).toBeInTheDocument();
+			expect( altItem ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render wrapped items within the menu', async () => {
+			renderWrappedItemInPanel();
+			await openDropdownMenu();
+
+			const defaultItem = screen.getByText( 'Nested Control 1' );
+			const defaultMenuItem = screen.getByRole( 'menuitem', {
+				name: 'Reset Nested Control 1',
+			} );
+
+			const altItem = screen.getByText( 'Nested Control 2' );
+			const altMenuItem = screen.getByRole( 'menuitemcheckbox', {
+				name: 'Show Nested Control 2',
+				checked: false,
+			} );
+
+			expect( defaultItem ).toBeInTheDocument();
+			expect( defaultMenuItem ).toBeInTheDocument();
+
+			expect( altItem ).toBeInTheDocument();
+			expect( altMenuItem ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'rendering via SlotFills', () => {
+		beforeEach( () => {
+			jest.clearAllMocks();
+		} );
+
+		it( 'should maintain visual order of controls when toggled on and off', async () => {
+			// Multiple fills are added to better simulate panel items being
+			// injected from different locations.
+			render(
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps }>
+							<div>Item 1</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...controlProps }>
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Only the second item should be shown initially as it has a value.
+			const firstItem = screen.queryByText( 'Item 1' );
+			const secondItem = screen.getByText( 'Item 2' );
+
+			expect( firstItem ).not.toBeInTheDocument();
+			expect( secondItem ).toBeInTheDocument();
+
+			// Toggle on the first item.
+			await openDropdownMenu();
+			await selectMenuItem( altControlProps.label );
+
+			// The order of items should be as per their original source order.
+			let items = screen.getAllByText( /Item [1-2]/ );
+
+			expect( items ).toHaveLength( 2 );
+			expect( items[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
+
+			// Then toggle off both items.
+			await selectMenuItem( controlProps.label );
+			await selectMenuItem( altControlProps.label );
+
+			// Toggle on controls again and ensure order remains.
+			await selectMenuItem( controlProps.label );
+			await selectMenuItem( altControlProps.label );
+
+			items = screen.getAllByText( /Item [1-2]/ );
+
+			expect( items ).toHaveLength( 2 );
+			expect( items[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( items[ 1 ] ).toHaveTextContent( 'Item 2' );
+		} );
+
+		it( 'should maintain menu item order', async () => {
+			const InconsistentItems = () => (
+				<ToolsPanelItems>
+					<ToolsPanelItem
+						label="Item 1"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 1</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label="Item 2"
+						hasValue={ () => false }
+						isShownByDefault
+					>
+						<div>Item 2</div>
+					</ToolsPanelItem>
+				</ToolsPanelItems>
+			);
+
+			const { rerender } = render(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-1" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Open dropdown menu.
+			const user = userEvent.setup();
+			let menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm all the existing menu items are present and in the
+			// expected order.
+			let menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+
+			// Close the dropdown menu.
+			await user.click( menuButton );
+
+			rerender(
+				<SlotFillProvider>
+					<InconsistentItems key="order-test-step-2" />
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							label="Item 3"
+							hasValue={ () => false }
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			// Reopen dropdown menu.
+			menuButton = getMenuButton();
+			await user.click( menuButton );
+
+			// Confirm the menu item order has been maintained.
+			menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
+
+			expect( menuItems.length ).toEqual( 3 );
+			expect( menuItems[ 0 ] ).toHaveTextContent( 'Item 1' );
+			expect( menuItems[ 1 ] ).toHaveTextContent( 'Item 2' );
+			expect( menuItems[ 2 ] ).toHaveTextContent( 'Item 3' );
+		} );
+
+		it( 'should not trigger callback when fill has not updated yet when panel has', () => {
+			// Fill provided controls can update independently to the panel.
+			// A `panelId` prop was added to both panels and items
+			// so it could prevent erroneous registrations and calls to
+			// `onDeselect` etc.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/35375
+			//
+			// This test simulates this issue by rendering an item within a
+			// contrived `ToolsPanelContext` to reflect the changes the panel
+			// item needs to protect against.
+			const context = {
+				panelId: '1234',
+				menuItems: {
+					default: {},
+					optional: { [ altControlProps.label ]: true },
+				},
+				hasMenuItems: false,
+				isResetting: false,
+				shouldRenderPlaceholderItems: false,
+				registerPanelItem: noop,
+				deregisterPanelItem: noop,
+				registerResetAllFilter: noop,
+				deregisterResetAllFilter: noop,
+				flagItemCustomization: noop,
+				areAllOptionalControlsHidden: true,
+			};
+
+			// This initial render gives the tools panel item a chance to
+			// set its internal state to reflect it was previously selected.
+			// This later forms part of the condition used to determine if an
+			// item is being deselected and thus call the onDeselect callback.
+			const { rerender } = render(
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			// Simulate a change in panel separate to the rendering of fills.
+			// e.g. a switch of block selection.
+			context.panelId = '4321';
+			context.menuItems.optional[ altControlProps.label ] = false;
+
+			// Rerender the panel item and ensure that it skips any check
+			// for deselection given it still belongs to a different panelId.
+			rerender(
+				<ToolsPanelContext.Provider value={ context }>
+					<ToolsPanelItem { ...altControlProps } panelId="1234">
+						<div>Item</div>
+					</ToolsPanelItem>
+				</ToolsPanelContext.Provider>
+			);
+
+			expect( altControlProps.onDeselect ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should not contain orphaned menu items when panelId changes', async () => {
+			// As fills and the panel can update independently this aims to
+			// test that no orphaned items appear registered in the panel menu.
+			//
+			// See: https://github.com/WordPress/gutenberg/pull/34085
+			const TestSlotFillPanel = ( {
+				panelId,
+			}: Pick<
+				React.ComponentProps< typeof ToolsPanelItem >,
+				'panelId'
+			> ) => (
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps } panelId="1234">
+							<div>Item 1</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...controlProps } panelId="9999">
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel { ...defaultProps } panelId={ panelId }>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			const { rerender } = render( <TestSlotFillPanel panelId="1234" /> );
+			await openDropdownMenu();
+
+			// Only the item matching the panelId should have been registered
+			// and appear in the panel menu.
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Show Alt',
+				} )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'menuitemcheckbox', {
+					name: 'Hide and reset Example',
+				} )
+			).not.toBeInTheDocument();
+
+			// Re-render the panel with different panelID simulating a block
+			// selection change.
+			rerender( <TestSlotFillPanel panelId="9999" /> );
+			expect(
+				screen.queryByRole( 'menuitemcheckbox', {
+					name: 'Show Alt',
+				} )
+			).not.toBeInTheDocument();
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Hide and reset Example',
+				} )
+			).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'panel header icon toggle', () => {
+		const defaultControlsValue = false;
+		const defaultControls = {
+			hasValue: jest.fn().mockImplementation( () => {
+				return !! defaultControlsValue;
+			} ),
+			label: 'Default',
+			onDeselect: jest.fn(),
+			onSelect: jest.fn(),
+			isShownByDefault: true,
+		};
+
+		const optionalControlsValue = false;
+		const optionalControls = {
+			hasValue: jest.fn().mockImplementation( () => {
+				return !! optionalControlsValue;
+			} ),
+			label: 'Optional',
+			onDeselect: jest.fn(),
+			onSelect: jest.fn(),
+			isShownByDefault: false,
+		};
+
+		it( 'should render appropriate labels and descriptions for the dropdown menu where there are default controls', async () => {
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...defaultControls }>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...optionalControls }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const optionsDisplayedIcon = screen.getByRole( 'button', {
+				name: 'Panel header options',
+			} );
+
+			expect( optionsDisplayedIcon ).toBeInTheDocument();
+
+			// The dropdown toggle doesn't have a description when an option is displayed.
+			// In this case the default control is displayed.
+			expect( optionsDisplayedIcon ).not.toHaveAccessibleDescription();
+		} );
+
+		it( 'should render appropriate labels and descriptions for the dropdown menu where there are no default controls', async () => {
+			// All options are inactive.
+			render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem { ...optionalControls }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+
+			const optionsHiddenIcon = screen.getByRole( 'button', {
+				name: 'Panel header options',
+			} );
+
+			// The dropdown toggle has a description indicating that all options are hidden.
+			expect( optionsHiddenIcon ).toBeInTheDocument();
+			expect( optionsHiddenIcon ).toHaveAccessibleDescription(
+				'All options are currently hidden'
+			);
+
+			// Activate one of the options.
+			await openDropdownMenu();
+			await selectMenuItem( optionalControls.label );
+
+			const optionsDisplayedIcon = screen.getByRole( 'button', {
+				name: 'Panel header options',
+			} );
+
+			// The dropdown toggle no longer has a description.
+			expect( optionsDisplayedIcon ).not.toHaveAccessibleDescription();
+		} );
+
+		it( 'should not call reset all for different panelIds', async () => {
+			const resetItem = jest.fn();
+			const resetItemB = jest.fn();
+
+			const children = (
+				<>
+					<ToolsPanelItem
+						label="a"
+						hasValue={ () => true }
+						panelId="a"
+						resetAllFilter={ resetItem }
+						isShownByDefault
+					>
+						<div>Example control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label="b"
+						hasValue={ () => true }
+						panelId="b"
+						resetAllFilter={ resetItemB }
+						isShownByDefault
+					>
+						<div>Alt control</div>
+					</ToolsPanelItem>
+				</>
+			);
+
+			const resetAllCallback = (
+				filters: ResetAllFilter[] | undefined
+			) => filters?.forEach( ( f ) => f() );
+
+			const { rerender } = render(
+				<ToolsPanel
+					{ ...defaultProps }
+					panelId="a"
+					resetAll={ resetAllCallback }
+				>
+					{ children }
+				</ToolsPanel>
+			);
+
+			await openDropdownMenu();
+			await selectMenuItem( 'Reset all' );
+			expect( resetItem ).toHaveBeenCalled();
+			expect( resetItemB ).not.toHaveBeenCalled();
+
+			resetItem.mockClear();
+
+			rerender(
+				<ToolsPanel
+					{ ...defaultProps }
+					panelId="b"
+					resetAll={ resetAllCallback }
+				>
+					{ children }
+				</ToolsPanel>
+			);
+
+			await selectMenuItem( 'Reset all' );
+			expect( resetItem ).not.toHaveBeenCalled();
+			expect( resetItemB ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'reset all button', () => {
+		it( "should disable the reset all button when there's nothing to reset", async () => {
+			await renderPanel();
+			await openDropdownMenu();
+
+			const resetAllItem = await screen.findByRole( 'menuitem', {
+				name: 'Reset all',
+			} );
+			expect( resetAllItem ).toBeInTheDocument();
+			expect( resetAllItem ).toHaveAttribute( 'aria-disabled', 'false' );
+
+			await selectMenuItem( 'Reset all' );
+
+			// Test the aria live announcement.
+			const announcement = screen.getByText( 'All options reset' );
+			expect( announcement ).toHaveAttribute( 'aria-live', 'assertive' );
+
+			const disabledResetAllItem = await screen.findByRole( 'menuitem', {
+				name: 'Reset all',
+			} );
+			expect( disabledResetAllItem ).toBeInTheDocument();
+			expect( disabledResetAllItem ).toHaveAttribute(
+				'aria-disabled',
+				'true'
+			);
+		} );
+	} );
+
+	describe( 'first and last panel items', () => {
+		it( 'should apply first/last classes to appropriate items', () => {
+			render(
+				<SlotFillProvider>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps }>
+							<div>Item 1</div>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							{ ...controlProps }
+							data-testid="item-2"
+						>
+							<div>Item 2</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem
+							{ ...altControlProps }
+							label="Item 3"
+							data-testid="item-3"
+							isShownByDefault
+						>
+							<div>Item 3</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanelItems>
+						<ToolsPanelItem { ...altControlProps } label="Item 4">
+							<div>Item 4</div>
+						</ToolsPanelItem>
+					</ToolsPanelItems>
+					<ToolsPanel
+						{ ...defaultProps }
+						hasInnerWrapper
+						shouldRenderPlaceholderItems
+						__experimentalFirstVisibleItemClass="first"
+						__experimentalLastVisibleItemClass="last"
+					>
+						<Slot />
+					</ToolsPanel>
+				</SlotFillProvider>
+			);
+
+			const item2 = screen.getByText( 'Item 2' );
+			const item3 = screen.getByText( 'Item 3' );
+
+			expect( screen.queryByText( 'Item 1' ) ).not.toBeInTheDocument();
+			expect( item2 ).toBeInTheDocument();
+			expect( item3 ).toBeInTheDocument();
+			expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
+
+			expect( screen.getByTestId( 'item-2' ) ).toHaveClass( 'first' );
+			expect( screen.getByTestId( 'item-3' ) ).toHaveClass( 'last' );
+		} );
+	} );
+} );
diff --git a/packages/components/src/tools-panel/tools-panel-header/README.md b/packages/components/src/tools-panel/tools-panel-header/README.md
index 07a7544b6b1435..85e5aae5043948 100644
--- a/packages/components/src/tools-panel/tools-panel-header/README.md
+++ b/packages/components/src/tools-panel/tools-panel-header/README.md
@@ -18,6 +18,20 @@ This component is generated automatically by its parent
 
 ## Props
 
+### `dropdownMenuProps`: `{}`
+
+The dropdown menu props to configure the panel's `DropdownMenu`.
+
+-   Type: `DropdownMenuProps`
+-   Required: No
+
+### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+
+The heading level of the panel's header.
+
+-   Required: No
+-   Default: `2`
+
 ### `label`: `string`
 
 Text to be displayed within the panel header. It is also passed along as the
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index 57416d4d0c311d..1f35258bd50ee1 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -19,7 +19,8 @@ import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
@@ -38,7 +39,7 @@ const DefaultControlsGroup = ( {
 	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
 
 	return (
-		<MenuGroup label={ __( 'Defaults' ) }>
+		<>
 			{ items.map( ( [ label, hasValue ] ) => {
 				if ( hasValue ) {
 					return (
@@ -72,6 +73,7 @@ const DefaultControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
+						icon={ check }
 						className={ itemClassName }
 						role="menuitemcheckbox"
 						isSelected
@@ -81,7 +83,7 @@ const DefaultControlsGroup = ( {
 					</MenuItem>
 				);
 			} ) }
-		</MenuGroup>
+		</>
 	);
 };
 
@@ -94,7 +96,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup label={ __( 'Tools' ) }>
+		<>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -104,14 +106,14 @@ const OptionalControlsGroup = ( {
 					  )
 					: sprintf(
 							// translators: %s: The name of the control to display e.g. "Padding".
-							__( 'Show %s' ),
+							_x( 'Show %s', 'input control' ),
 							label
 					  );
 
 				return (
 					<MenuItem
 						key={ label }
-						icon={ isSelected && check }
+						icon={ isSelected ? check : null }
 						isSelected={ isSelected }
 						label={ itemLabel }
 						onClick={ () => {
@@ -142,7 +144,7 @@ const OptionalControlsGroup = ( {
 					</MenuItem>
 				);
 			} ) }
-		</MenuGroup>
+		</>
 	);
 };
 
@@ -156,10 +158,12 @@ const ToolsPanelHeader = (
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
+		headingLevel = 2,
 		label: labelText,
 		menuItems,
 		resetAll,
 		toggleItem,
+		dropdownMenuProps,
 		...headerProps
 	} = useToolsPanelHeader( props );
 
@@ -185,34 +189,42 @@ const ToolsPanelHeader = (
 
 	return (
 		<HStack { ...headerProps } ref={ forwardedRef }>
-			<Heading level={ 2 } className={ headingClassName }>
+			<Heading level={ headingLevel } className={ headingClassName }>
 				{ labelText }
 			</Heading>
 			{ hasMenuItems && (
 				<DropdownMenu
+					{ ...dropdownMenuProps }
 					icon={ dropDownMenuIcon }
 					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
 					toggleProps={ {
-						isSmall: true,
-						describedBy: dropdownMenuDescriptionText,
+						size: 'small',
+						description: dropdownMenuDescriptionText,
 					} }
 				>
 					{ () => (
 						<>
-							<DefaultControlsGroup
-								items={ defaultItems }
-								toggleItem={ toggleItem }
-								itemClassName={ defaultControlsItemClassName }
-							/>
-							<OptionalControlsGroup
-								items={ optionalItems }
-								toggleItem={ toggleItem }
-							/>
+							<MenuGroup label={ labelText }>
+								<DefaultControlsGroup
+									items={ defaultItems }
+									toggleItem={ toggleItem }
+									itemClassName={
+										defaultControlsItemClassName
+									}
+								/>
+								<OptionalControlsGroup
+									items={ optionalItems }
+									toggleItem={ toggleItem }
+								/>
+							</MenuGroup>
 							<MenuGroup>
 								<MenuItem
 									aria-disabled={ ! canResetAll }
-									variant={ 'tertiary' }
+									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
+									// we should rename it and explicitly allow it as an official API. All the other Button variants
+									// don't make sense in a MenuItem context, and should be disallowed.
+									variant="tertiary"
 									onClick={ () => {
 										if ( canResetAll ) {
 											resetAll();
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/src/tools-panel/tools-panel-header/hook.ts
index b44dc5bc9f7865..8f5fb0dcdee574 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.ts
@@ -8,17 +8,19 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelHeaderProps } from '../types';
 
 export function useToolsPanelHeader(
 	props: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >
 ) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'ToolsPanelHeader'
-	);
+	const {
+		className,
+		headingLevel = 2,
+		...otherProps
+	} = useContextSystem( props, 'ToolsPanelHeader' );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
@@ -47,6 +49,7 @@ export function useToolsPanelHeader(
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
+		headingLevel,
 		menuItems,
 		className: classes,
 	};
diff --git a/packages/components/src/tools-panel/tools-panel-item/README.md b/packages/components/src/tools-panel/tools-panel-item/README.md
index 85d03f96d1d04f..91f9c78ff9cbe8 100644
--- a/packages/components/src/tools-panel/tools-panel-item/README.md
+++ b/packages/components/src/tools-panel/tools-panel-item/README.md
@@ -31,7 +31,8 @@ This prop identifies the current item as being displayed by default. This means
 it will show regardless of whether it has a value set or is toggled on in the
 panel's menu.
 
--   Required: Yes
+-   Required: No
+-   Default: `false`
 
 ### `label`: `string`
 
@@ -58,18 +59,19 @@ A callback to take action when this item is selected in the `ToolsPanel` menu.
 
 -   Required: No
 
-### `panelId`: `string`
+### `panelId`: `string | null`
 
 Panel items will ensure they are only registering with their intended panel by
-comparing the `panelId` props set on both the item and the panel itself. This
+comparing the `panelId` props set on both the item and the panel itself, or if the `panelId` is explicitly `null`. This
 allows items to be injected from a shared source.
 
 -   Required: No
 
-### `resetAllFilter`: `() => void`
+### `resetAllFilter`: `( attributes?: any ) => any`
 
 A `ToolsPanel` will collect each item's `resetAllFilter` and pass an array of
 these functions through to the panel's `resetAll` callback. They can then be
 iterated over to perform additional tasks.
 
 -   Required: No
+-   Default: `() => {}`
diff --git a/packages/components/src/tools-panel/tools-panel-item/component.tsx b/packages/components/src/tools-panel/tools-panel-item/component.tsx
index b0cc12c0f19fde..a44514824ebef6 100644
--- a/packages/components/src/tools-panel/tools-panel-item/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-item/component.tsx
@@ -8,12 +8,13 @@ import type { ForwardedRef } from 'react';
  */
 import { useToolsPanelItem } from './hook';
 import { View } from '../../view';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import type { ToolsPanelItemProps } from '../types';
 
 // This wraps controls to be conditionally displayed within a tools panel. It
 // prevents props being applied to HTML elements that would make them invalid.
-const ToolsPanelItem = (
+const UnconnectedToolsPanelItem = (
 	props: WordPressComponentProps< ToolsPanelItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) => {
@@ -37,9 +38,9 @@ const ToolsPanelItem = (
 	);
 };
 
-const ConnectedToolsPanelItem = contextConnect(
-	ToolsPanelItem,
+export const ToolsPanelItem = contextConnect(
+	UnconnectedToolsPanelItem,
 	'ToolsPanelItem'
 );
 
-export default ConnectedToolsPanelItem;
+export default ToolsPanelItem;
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts
index dcc6c6416e0ce9..e0a1f0139dcace 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts
@@ -2,27 +2,35 @@
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import { useCallback, useEffect, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import * as styles from '../styles';
 import { useToolsPanelContext } from '../context';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelItemProps } from '../types';
 
+const noop = () => {};
+
 export function useToolsPanelItem(
 	props: WordPressComponentProps< ToolsPanelItemProps, 'div' >
 ) {
 	const {
 		className,
 		hasValue,
-		isShownByDefault,
+		isShownByDefault = false,
 		label,
 		panelId,
-		resetAllFilter,
+		resetAllFilter = noop,
 		onDeselect,
 		onSelect,
 		...otherProps
@@ -31,6 +39,8 @@ export function useToolsPanelItem(
 	const {
 		panelId: currentPanelId,
 		menuItems,
+		registerResetAllFilter,
+		deregisterResetAllFilter,
 		registerPanelItem,
 		deregisterPanelItem,
 		flagItemCustomization,
@@ -42,11 +52,12 @@ export function useToolsPanelItem(
 		__experimentalLastVisibleItemClass,
 	} = useToolsPanelContext();
 
-	const hasValueCallback = useCallback( hasValue, [ panelId, hasValue ] );
-	const resetAllFilterCallback = useCallback( resetAllFilter, [
-		panelId,
-		resetAllFilter,
-	] );
+	// hasValue is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	const hasValueCallback = useCallback( hasValue, [ panelId ] );
+	// resetAllFilter is a new function on every render, so do not add it as a
+	// dependency to the useCallback hook! If needed, we should use a ref.
+	const resetAllFilterCallback = useCallback( resetAllFilter, [ panelId ] );
 	const previousPanelId = usePrevious( currentPanelId );
 
 	const hasMatchingPanel =
@@ -54,13 +65,16 @@ export function useToolsPanelItem(
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
-	useEffect( () => {
+	//
+	// This is performed in a layout effect to ensure that the panel item
+	// is registered before it is rendered preventing a rendering glitch.
+	// See: https://github.com/WordPress/gutenberg/issues/56470
+	useLayoutEffect( () => {
 		if ( hasMatchingPanel && previousPanelId !== null ) {
 			registerPanelItem( {
 				hasValue: hasValueCallback,
 				isShownByDefault,
 				label,
-				resetAllFilter: resetAllFilterCallback,
 				panelId,
 			} );
 		}
@@ -81,26 +95,24 @@ export function useToolsPanelItem(
 		hasValueCallback,
 		panelId,
 		previousPanelId,
-		resetAllFilterCallback,
 		registerPanelItem,
 		deregisterPanelItem,
 	] );
 
-	const isValueSet = hasValue();
-	const wasValueSet = usePrevious( isValueSet );
-
-	// If this item represents a default control it will need to notify the
-	// panel when a custom value has been set.
 	useEffect( () => {
-		if ( isShownByDefault && isValueSet && ! wasValueSet ) {
-			flagItemCustomization( label );
+		if ( hasMatchingPanel ) {
+			registerResetAllFilter( resetAllFilterCallback );
 		}
+		return () => {
+			if ( hasMatchingPanel ) {
+				deregisterResetAllFilter( resetAllFilterCallback );
+			}
+		};
 	}, [
-		isValueSet,
-		wasValueSet,
-		isShownByDefault,
-		label,
-		flagItemCustomization,
+		registerResetAllFilter,
+		deregisterResetAllFilter,
+		resetAllFilterCallback,
+		hasMatchingPanel,
 	] );
 
 	// Note: `label` is used as a key when building menu item state in
@@ -110,6 +122,23 @@ export function useToolsPanelItem(
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
 	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
+	const isValueSet = hasValue();
+	// Notify the panel when an item's value has changed except for optional
+	// items without value because the item should not cause itself to hide.
+	useEffect( () => {
+		if ( ! isShownByDefault && ! isValueSet ) {
+			return;
+		}
+
+		flagItemCustomization( isValueSet, label, menuGroup );
+	}, [
+		isValueSet,
+		menuGroup,
+		label,
+		flagItemCustomization,
+		isShownByDefault,
+	] );
+
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
@@ -124,7 +153,7 @@ export function useToolsPanelItem(
 			onSelect?.();
 		}
 
-		if ( ! isMenuItemChecked && wasMenuItemChecked ) {
+		if ( ! isMenuItemChecked && isValueSet && wasMenuItemChecked ) {
 			onDeselect?.();
 		}
 	}, [
@@ -147,18 +176,16 @@ export function useToolsPanelItem(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		const placeholderStyle =
-			shouldRenderPlaceholder &&
-			! isShown &&
-			styles.ToolsPanelItemPlaceholder;
+		const shouldApplyPlaceholderStyles =
+			shouldRenderPlaceholder && ! isShown;
 		const firstItemStyle =
 			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
 		const lastItemStyle =
 			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
 		return cx(
 			styles.ToolsPanelItem,
-			placeholderStyle,
-			className,
+			shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
+			! shouldApplyPlaceholderStyles && className,
 			firstItemStyle,
 			lastItemStyle
 		);
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index 9b75f32f6645e2..b5e6860e2bd072 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
@@ -91,8 +91,8 @@ export function DimensionPanel() {
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			<PanelDescription>
-				Select dimensions or spacing related settings from the
-				menu for additional controls.
+				Select dimensions or spacing related settings from the menu for
+				additional controls.
 			</PanelDescription>
 			<SingleColumnItem
 				hasValue={ () => !! height }
@@ -101,6 +101,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					onChange={ setHeight }
 					value={ height }
@@ -113,6 +114,7 @@ export function DimensionPanel() {
 				isShownByDefault
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					onChange={ setWidth }
 					value={ width }
@@ -124,6 +126,7 @@ export function DimensionPanel() {
 				onDeselect={ () => setPadding( undefined ) }
 			>
 				<BoxControl
+					__next40pxDefaultSize
 					label={ __( 'Padding' ) }
 					onChange={ setPadding }
 					values={ padding }
@@ -136,6 +139,7 @@ export function DimensionPanel() {
 				onDeselect={ () => setMargin( undefined ) }
 			>
 				<BoxControl
+					__next40pxDefaultSize
 					label={ __( 'Margin' ) }
 					onChange={ setMargin }
 					values={ margin }
@@ -154,34 +158,52 @@ export function DimensionPanel() {
 Flags that the items in this ToolsPanel will be contained within an inner
 wrapper element allowing the panel to lay them out accordingly.
 
-- Required: No
+-   Required: No
+-   Default: `false`
+
+### `dropdownMenuProps`: `{}`
+
+The popover props to configure panel's `DropdownMenu`.
+
+-   Type: `DropdownMenuProps`
+-   Required: No
+
+### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+
+The heading level of the panel's header.
+
+-   Required: No
+-   Default: `2`
 
 ### `label`: `string`
 
 Text to be displayed within the panel's header and as the `aria-label` for the
 panel's dropdown menu.
 
-- Required: Yes
+-   Required: Yes
 
-### `panelId`: `string`
+### `panelId`: `string | null`
 
 If a `panelId` is set, it is passed through the `ToolsPanelContext` and used
 to restrict panel items. When a `panelId` is set, items can only register
 themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
 exactly.
 
-- Required: No
+-   Required: No
 
-### `resetAll`: `() => void`
+### `resetAll`: `( filters?: ResetAllFilter[] ) => void`
 
-A function to call when the `Reset all` menu option is selected. This is passed
-through to the panel's header component.
+A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`.
 
-- Required: Yes
+-   Required: Yes
 
 ### `shouldRenderPlaceholderItems`: `boolean`
 
 Advises the `ToolsPanel` that all of its `ToolsPanelItem` children should render
 placeholder content (instead of `null`) when they are toggled off and hidden.
 
-- Required: No
+Note that placeholder items won't apply the `className` that would be
+normally applied to a visible `ToolsPanelItem` via the `className` prop.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx
index fcfa353a0210d7..c094d593dd4c24 100644
--- a/packages/components/src/tools-panel/tools-panel/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel/component.tsx
@@ -10,10 +10,11 @@ import ToolsPanelHeader from '../tools-panel-header';
 import { ToolsPanelContext } from '../context';
 import { useToolsPanel } from './hook';
 import { Grid } from '../../grid';
-import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import type { ToolsPanelProps } from '../types';
 
-const ToolsPanel = (
+const UnconnectedToolsPanel = (
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) => {
@@ -23,6 +24,8 @@ const ToolsPanel = (
 		panelContext,
 		resetAllItems,
 		toggleItem,
+		headingLevel,
+		dropdownMenuProps,
 		...toolsPanelProps
 	} = useToolsPanel( props );
 
@@ -33,6 +36,8 @@ const ToolsPanel = (
 					label={ label }
 					resetAll={ resetAllItems }
 					toggleItem={ toggleItem }
+					headingLevel={ headingLevel }
+					dropdownMenuProps={ dropdownMenuProps }
 				/>
 				{ children }
 			</ToolsPanelContext.Provider>
@@ -40,6 +45,59 @@ const ToolsPanel = (
 	);
 };
 
-const ConnectedToolsPanel = contextConnect( ToolsPanel, 'ToolsPanel' );
+/**
+ * The `ToolsPanel` is a container component that displays its children preceded
+ * by a header. The header includes a dropdown menu which is automatically
+ * generated from the panel's inner `ToolsPanelItems`.
+ *
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import {
+ *   __experimentalToolsPanel as ToolsPanel,
+ *   __experimentalToolsPanelItem as ToolsPanelItem,
+ *   __experimentalUnitControl as UnitControl
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   const [ height, setHeight ] = useState();
+ *   const [ width, setWidth ] = useState();
+ *
+ *   const resetAll = () => {
+ *     setHeight();
+ *     setWidth();
+ *   }
+ *
+ *   return (
+ *     <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+ *       <ToolsPanelItem
+ *         hasValue={ () => !! height }
+ *         label={ __( 'Height' ) }
+ *         onDeselect={ () => setHeight() }
+ *       >
+ *         <UnitControl
+ *           __next40pxDefaultSize
+ *           label={ __( 'Height' ) }
+ *           onChange={ setHeight }
+ *           value={ height }
+ *         />
+ *       </ToolsPanelItem>
+ *       <ToolsPanelItem
+ *         hasValue={ () => !! width }
+ *         label={ __( 'Width' ) }
+ *         onDeselect={ () => setWidth() }
+ *       >
+ *         <UnitControl
+ *           __next40pxDefaultSize
+ *           label={ __( 'Width' ) }
+ *           onChange={ setWidth }
+ *           value={ width }
+ *         />
+ *       </ToolsPanelItem>
+ *     </ToolsPanel>
+ *   );
+ * }
+ * ```
+ */
+export const ToolsPanel = contextConnect( UnconnectedToolsPanel, 'ToolsPanel' );
 
-export default ConnectedToolsPanel;
+export default ToolsPanel;
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 2cbce4aad169f5..583a079ab20026 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -5,15 +5,16 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useReducer,
 	useRef,
-	useState,
 } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import * as styles from '../styles';
-import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 import type {
 	ToolsPanelItem,
@@ -21,164 +22,322 @@ import type {
 	ToolsPanelMenuItems,
 	ToolsPanelMenuItemsConfig,
 	ToolsPanelProps,
+	ResetAllFilter,
 } from '../types';
 
 const DEFAULT_COLUMNS = 2;
 
+type PanelItemsState = {
+	panelItems: ToolsPanelItem[];
+	menuItemOrder: string[];
+	menuItems: ToolsPanelMenuItems;
+};
+
+type PanelItemsAction =
+	| { type: 'REGISTER_PANEL'; item: ToolsPanelItem }
+	| { type: 'UNREGISTER_PANEL'; label: string }
+	| {
+			type: 'UPDATE_VALUE';
+			group: ToolsPanelMenuItemKey;
+			label: string;
+			value: boolean;
+	  }
+	| { type: 'TOGGLE_VALUE'; label: string }
+	| { type: 'RESET_ALL' };
+
+function emptyMenuItems(): ToolsPanelMenuItems {
+	return { default: {}, optional: {} };
+}
+
+function emptyState(): PanelItemsState {
+	return { panelItems: [], menuItemOrder: [], menuItems: emptyMenuItems() };
+}
+
 const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
 	currentMenuItems,
+	menuItemOrder,
 }: ToolsPanelMenuItemsConfig ) => {
-	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+	const newMenuItems: ToolsPanelMenuItems = emptyMenuItems();
+	const menuItems: ToolsPanelMenuItems = emptyMenuItems();
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
 		const group = isShownByDefault ? 'default' : 'optional';
 
-		// If a menu item for this label already exists, do not overwrite its value.
-		// This can cause default controls that have been flagged as customized to
-		// lose their value.
+		// If a menu item for this label has already been flagged as customized
+		// (for default controls), or toggled on (for optional controls), do not
+		// overwrite its value as those controls would lose that state.
 		const existingItemValue = currentMenuItems?.[ group ]?.[ label ];
-		const value =
-			existingItemValue !== undefined ? existingItemValue : hasValue();
+		const value = existingItemValue ? existingItemValue : hasValue();
+
+		newMenuItems[ group ][ label ] = shouldReset ? false : value;
+	} );
+
+	// Loop the known, previously registered items first to maintain menu order.
+	menuItemOrder.forEach( ( key ) => {
+		if ( newMenuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+
+		if ( newMenuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
+	} );
 
-		menuItems[ group ][ label ] = shouldReset ? false : value;
+	// Loop newMenuItems object adding any that aren't in the known items order.
+	Object.keys( newMenuItems.default ).forEach( ( key ) => {
+		if ( ! menuItems.default.hasOwnProperty( key ) ) {
+			menuItems.default[ key ] = newMenuItems.default[ key ];
+		}
+	} );
+
+	Object.keys( newMenuItems.optional ).forEach( ( key ) => {
+		if ( ! menuItems.optional.hasOwnProperty( key ) ) {
+			menuItems.optional[ key ] = newMenuItems.optional[ key ];
+		}
 	} );
 
 	return menuItems;
 };
 
+function panelItemsReducer(
+	panelItems: ToolsPanelItem[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			const newItems = [ ...panelItems ];
+			// If an item with this label has already been registered, remove it
+			// first. This can happen when an item is moved between the default
+			// and optional groups.
+			const existingIndex = newItems.findIndex(
+				( oldItem ) => oldItem.label === action.item.label
+			);
+			if ( existingIndex !== -1 ) {
+				newItems.splice( existingIndex, 1 );
+			}
+			newItems.push( action.item );
+			return newItems;
+		}
+		case 'UNREGISTER_PANEL': {
+			const index = panelItems.findIndex(
+				( item ) => item.label === action.label
+			);
+			if ( index !== -1 ) {
+				const newItems = [ ...panelItems ];
+				newItems.splice( index, 1 );
+				return newItems;
+			}
+			return panelItems;
+		}
+		default:
+			return panelItems;
+	}
+}
+
+function menuItemOrderReducer(
+	menuItemOrder: string[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			// Track the initial order of item registration. This is used for
+			// maintaining menu item order later.
+			if ( menuItemOrder.includes( action.item.label ) ) {
+				return menuItemOrder;
+			}
+
+			return [ ...menuItemOrder, action.item.label ];
+		}
+		default:
+			return menuItemOrder;
+	}
+}
+
+function menuItemsReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL':
+		case 'UNREGISTER_PANEL':
+			// generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`
+			return generateMenuItems( {
+				currentMenuItems: state.menuItems,
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: false,
+			} );
+		case 'RESET_ALL':
+			return generateMenuItems( {
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: true,
+			} );
+		case 'UPDATE_VALUE': {
+			const oldValue = state.menuItems[ action.group ][ action.label ];
+			if ( action.value === oldValue ) {
+				return state.menuItems;
+			}
+			return {
+				...state.menuItems,
+				[ action.group ]: {
+					...state.menuItems[ action.group ],
+					[ action.label ]: action.value,
+				},
+			};
+		}
+		case 'TOGGLE_VALUE': {
+			const currentItem = state.panelItems.find(
+				( item ) => item.label === action.label
+			);
+
+			if ( ! currentItem ) {
+				return state.menuItems;
+			}
+
+			const menuGroup = currentItem.isShownByDefault
+				? 'default'
+				: 'optional';
+
+			const newMenuItems = {
+				...state.menuItems,
+				[ menuGroup ]: {
+					...state.menuItems[ menuGroup ],
+					[ action.label ]:
+						! state.menuItems[ menuGroup ][ action.label ],
+				},
+			};
+			return newMenuItems;
+		}
+
+		default:
+			return state.menuItems;
+	}
+}
+
+function panelReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	const panelItems = panelItemsReducer( state.panelItems, action );
+	const menuItemOrder = menuItemOrderReducer( state.menuItemOrder, action );
+	// `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`
+	// and the updated `panelItems` and `menuItemOrder`.
+	const menuItems = menuItemsReducer(
+		{ panelItems, menuItemOrder, menuItems: state.menuItems },
+		action
+	);
+
+	return { panelItems, menuItemOrder, menuItems };
+}
+
+function resetAllFiltersReducer(
+	filters: ResetAllFilter[],
+	action: { type: 'REGISTER' | 'UNREGISTER'; filter: ResetAllFilter }
+) {
+	switch ( action.type ) {
+		case 'REGISTER':
+			return [ ...filters, action.filter ];
+		case 'UNREGISTER':
+			return filters.filter( ( f ) => f !== action.filter );
+		default:
+			return filters;
+	}
+}
+
 const isMenuItemTypeEmpty = (
-	obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
-) => obj && Object.keys( obj ).length === 0;
+	obj: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => Object.keys( obj ).length === 0;
 
 export function useToolsPanel(
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >
 ) {
 	const {
 		className,
+		headingLevel = 2,
 		resetAll,
 		panelId,
-		hasInnerWrapper,
-		shouldRenderPlaceholderItems,
+		hasInnerWrapper = false,
+		shouldRenderPlaceholderItems = false,
 		__experimentalFirstVisibleItemClass,
 		__experimentalLastVisibleItemClass,
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanel' );
 
-	const isResetting = useRef( false );
-	const wasResetting = isResetting.current;
+	const isResettingRef = useRef( false );
+	const wasResetting = isResettingRef.current;
 
-	// `isResetting` is cleared via this hook to effectively batch together
+	// `isResettingRef` is cleared via this hook to effectively batch together
 	// the resetAll task. Without this, the flag is cleared after the first
 	// control updates and forces a rerender with subsequent controls then
 	// believing they need to reset, unfortunately using stale data.
 	useEffect( () => {
 		if ( wasResetting ) {
-			isResetting.current = false;
+			isResettingRef.current = false;
 		}
 	}, [ wasResetting ] );
 
 	// Allow panel items to register themselves.
-	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
-
-	const registerPanelItem = useCallback(
-		( item: ToolsPanelItem ) => {
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				// If an item with this label has already been registered, remove it
-				// first. This can happen when an item is moved between the default
-				// and optional groups.
-				const existingIndex = newItems.findIndex(
-					( oldItem ) => oldItem.label === item.label
-				);
-				if ( existingIndex !== -1 ) {
-					newItems.splice( existingIndex, 1 );
-				}
-				return [ ...newItems, item ];
-			} );
-		},
-		[ setPanelItems ]
+	const [ { panelItems, menuItems }, panelDispatch ] = useReducer(
+		panelReducer,
+		undefined,
+		emptyState
+	);
+
+	const [ resetAllFilters, dispatchResetAllFilters ] = useReducer(
+		resetAllFiltersReducer,
+		[]
 	);
 
+	const registerPanelItem = useCallback( ( item: ToolsPanelItem ) => {
+		// Add item to panel items.
+		panelDispatch( { type: 'REGISTER_PANEL', item } );
+	}, [] );
+
 	// Panels need to deregister on unmount to avoid orphans in menu state.
 	// This is an issue when panel items are being injected via SlotFills.
-	const deregisterPanelItem = useCallback(
-		( label: string ) => {
-			// When switching selections between components injecting matching
-			// controls, e.g. both panels have a "padding" control, the
-			// deregistration of the first panel doesn't occur until after the
-			// registration of the next.
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				const index = newItems.findIndex(
-					( item ) => item.label === label
-				);
-				if ( index !== -1 ) {
-					newItems.splice( index, 1 );
-				}
-				return newItems;
-			} );
+	const deregisterPanelItem = useCallback( ( label: string ) => {
+		// When switching selections between components injecting matching
+		// controls, e.g. both panels have a "padding" control, the
+		// deregistration of the first panel doesn't occur until after the
+		// registration of the next.
+		panelDispatch( { type: 'UNREGISTER_PANEL', label } );
+	}, [] );
+
+	const registerResetAllFilter = useCallback( ( filter: ResetAllFilter ) => {
+		dispatchResetAllFilters( { type: 'REGISTER', filter } );
+	}, [] );
+
+	const deregisterResetAllFilter = useCallback(
+		( filter: ResetAllFilter ) => {
+			dispatchResetAllFilters( { type: 'UNREGISTER', filter } );
 		},
-		[ setPanelItems ]
+		[]
 	);
 
-	// Manage and share display state of menu items representing child controls.
-	const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
-		default: {},
-		optional: {},
-	} );
-
-	// Setup menuItems state as panel items register themselves.
-	useEffect( () => {
-		setMenuItems( ( prevState ) => {
-			const items = generateMenuItems( {
-				panelItems,
-				shouldReset: false,
-				currentMenuItems: prevState,
-			} );
-			return items;
-		} );
-	}, [ panelItems, setMenuItems ] );
-
-	// Force a menu item to be checked.
-	// This is intended for use with default panel items. They are displayed
-	// separately to optional items and have different display states,
-	// we need to update that when their value is customized.
+	// Updates the status of the panel’s menu items. For default items the
+	// value represents whether it differs from the default and for optional
+	// items whether the item is shown.
 	const flagItemCustomization = useCallback(
-		( label: string, group: ToolsPanelMenuItemKey = 'default' ) => {
-			setMenuItems( ( items ) => {
-				const newState = {
-					...items,
-					[ group ]: {
-						...items[ group ],
-						[ label ]: true,
-					},
-				};
-				return newState;
-			} );
+		(
+			value: boolean,
+			label: string,
+			group: ToolsPanelMenuItemKey = 'default'
+		) => {
+			panelDispatch( { type: 'UPDATE_VALUE', group, label, value } );
 		},
-		[ setMenuItems ]
+		[]
 	);
 
 	// Whether all optional menu items are hidden or not must be tracked
 	// in order to later determine if the panel display is empty and handle
 	// conditional display of a plus icon to indicate the presence of further
 	// menu items.
-	const [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =
-		useState( false );
-
-	useEffect( () => {
-		if (
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			! isMenuItemTypeEmpty( menuItems?.optional )
-		) {
-			const allControlsHidden = ! Object.entries(
-				menuItems.optional
-			).some( ( [ , isSelected ] ) => isSelected );
-			setAreAllOptionalControlsHidden( allControlsHidden );
-		}
-	}, [ menuItems, setAreAllOptionalControlsHidden ] );
+	const areAllOptionalControlsHidden = useMemo( () => {
+		return (
+			isMenuItemTypeEmpty( menuItems.default ) &&
+			! isMenuItemTypeEmpty( menuItems.optional ) &&
+			Object.values( menuItems.optional ).every(
+				( isSelected ) => ! isSelected
+			)
+		);
+	}, [ menuItems ] );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
@@ -186,9 +345,7 @@ export function useToolsPanel(
 			hasInnerWrapper &&
 			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			areAllOptionalControlsHidden &&
-			styles.ToolsPanelHiddenInnerWrapper;
+			areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
 
 		return cx(
 			styles.ToolsPanel( DEFAULT_COLUMNS ),
@@ -196,73 +353,31 @@ export function useToolsPanel(
 			emptyStyle,
 			className
 		);
-	}, [
-		areAllOptionalControlsHidden,
-		className,
-		cx,
-		hasInnerWrapper,
-		menuItems,
-	] );
+	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
-	const toggleItem = useCallback(
-		( label: string ) => {
-			const currentItem = panelItems.find(
-				( item ) => item.label === label
-			);
-
-			if ( ! currentItem ) {
-				return;
-			}
-
-			const menuGroup = currentItem.isShownByDefault
-				? 'default'
-				: 'optional';
-
-			const newMenuItems = {
-				...menuItems,
-				[ menuGroup ]: {
-					...menuItems[ menuGroup ],
-					[ label ]: ! menuItems[ menuGroup ][ label ],
-				},
-			};
-
-			setMenuItems( newMenuItems );
-		},
-		[ menuItems, panelItems, setMenuItems ]
-	);
+	const toggleItem = useCallback( ( label: string ) => {
+		panelDispatch( { type: 'TOGGLE_VALUE', label } );
+	}, [] );
 
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = useCallback( () => {
 		if ( typeof resetAll === 'function' ) {
-			isResetting.current = true;
-
-			// Collect available reset filters from panel items.
-			const filters: Array< () => void > = [];
-			panelItems.forEach( ( item ) => {
-				if ( item.resetAllFilter ) {
-					filters.push( item.resetAllFilter );
-				}
-			} );
-
-			resetAll( filters );
+			isResettingRef.current = true;
+			resetAll( resetAllFilters );
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = generateMenuItems( {
-			panelItems,
-			shouldReset: true,
-		} );
-		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAll, setMenuItems ] );
+		panelDispatch( { type: 'RESET_ALL' } );
+	}, [ resetAllFilters, resetAll ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
 	const getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {
 		const optionalItems = menuItems.optional || {};
 		const firstItem = items.find(
-			( item ) => item.isShownByDefault || !! optionalItems[ item.label ]
+			( item ) => item.isShownByDefault || optionalItems[ item.label ]
 		);
 
 		return firstItem?.label;
@@ -273,18 +388,22 @@ export function useToolsPanel(
 		[ ...panelItems ].reverse()
 	);
 
+	const hasMenuItems = panelItems.length > 0;
+
 	const panelContext = useMemo(
 		() => ( {
 			areAllOptionalControlsHidden,
 			deregisterPanelItem,
+			deregisterResetAllFilter,
 			firstDisplayedItem,
 			flagItemCustomization,
-			hasMenuItems: !! panelItems.length,
-			isResetting: isResetting.current,
+			hasMenuItems,
+			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
 			panelId,
 			registerPanelItem,
+			registerResetAllFilter,
 			shouldRenderPlaceholderItems,
 			__experimentalFirstVisibleItemClass,
 			__experimentalLastVisibleItemClass,
@@ -292,12 +411,14 @@ export function useToolsPanel(
 		[
 			areAllOptionalControlsHidden,
 			deregisterPanelItem,
+			deregisterResetAllFilter,
 			firstDisplayedItem,
 			flagItemCustomization,
 			lastDisplayedItem,
 			menuItems,
 			panelId,
-			panelItems,
+			hasMenuItems,
+			registerResetAllFilter,
 			registerPanelItem,
 			shouldRenderPlaceholderItems,
 			__experimentalFirstVisibleItemClass,
@@ -307,6 +428,7 @@ export function useToolsPanel(
 
 	return {
 		...otherProps,
+		headingLevel,
 		panelContext,
 		resetAllItems,
 		toggleItem,
diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
index b95a50a4aa9cbc..e8e2f950de9a30 100644
--- a/packages/components/src/tools-panel/types.ts
+++ b/packages/components/src/tools-panel/types.ts
@@ -3,7 +3,13 @@
  */
 import type { ReactNode } from 'react';
 
-type ResetAllFilter = () => void;
+/**
+ * Internal dependencies
+ */
+import type { HeadingSize } from '../heading/types';
+import type { DropdownMenu } from '../dropdown-menu';
+
+export type ResetAllFilter = ( attributes?: any ) => any;
 type ResetAll = ( filters?: ResetAllFilter[] ) => void;
 
 export type ToolsPanelProps = {
@@ -11,11 +17,23 @@ export type ToolsPanelProps = {
 	 * The child elements.
 	 */
 	children: ReactNode;
+	/**
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
+	 */
+	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
 	/**
 	 * Flags that the items in this ToolsPanel will be contained within an inner
 	 * wrapper element allowing the panel to lay them out accordingly.
+	 *
+	 * @default false
+	 */
+	hasInnerWrapper?: boolean;
+	/**
+	 * The heading level of the panel's header.
+	 *
+	 * @default 2
 	 */
-	hasInnerWrapper: boolean;
+	headingLevel?: HeadingSize;
 	/**
 	 * Text to be displayed within the panel's header and as the `aria-label`
 	 * for the panel's dropdown menu.
@@ -23,20 +41,26 @@ export type ToolsPanelProps = {
 	label: string;
 	/**
 	 * If a `panelId` is set, it is passed through the `ToolsPanelContext` and
-	 * used to restrict panel items. Only items with a matching `panelId` will
-	 * be able to register themselves with this panel.
+	 * used to restrict panel items. When a `panelId` is set, items can only
+	 * register themselves if the `panelId` is explicitly `null` or the item's
+	 * `panelId` matches exactly.
 	 */
-	panelId: string;
+	panelId?: string | null;
 	/**
-	 * A function to call when the `Reset all` menu option is selected. This is
-	 * passed through to the panel's header component.
+	 * A function to call when the `Reset all` menu option is selected. As an
+	 * argument, it receives an array containing the `resetAllFilter` callbacks
+	 * of all the valid registered `ToolsPanelItems`.
 	 */
 	resetAll: ResetAll;
 	/**
 	 * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
 	 * placeholder content instead of null when they are toggled off and hidden.
+	 * Note that placeholder items won't apply the `className` that would be
+	 * normally applied to a visible `ToolsPanelItem` via the `className` prop.
+	 *
+	 * @default false
 	 */
-	shouldRenderPlaceholderItems: boolean;
+	shouldRenderPlaceholderItems?: boolean;
 	/**
 	 * Experimental prop allowing for a custom CSS class to be applied to the
 	 * first visible `ToolsPanelItem` within the `ToolsPanel`.
@@ -50,6 +74,16 @@ export type ToolsPanelProps = {
 };
 
 export type ToolsPanelHeaderProps = {
+	/**
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
+	 */
+	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
+	/**
+	 * The heading level of the panel's header.
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
 	/**
 	 * Text to be displayed within the panel header. It is also passed along as
 	 * the `label` for the panel header's `DropdownMenu`.
@@ -79,8 +113,10 @@ export type ToolsPanelItem = {
 	 * This prop identifies the current item as being displayed by default. This
 	 * means it will show regardless of whether it has a value set or is toggled
 	 * on in the panel's menu.
+	 *
+	 * @default false
 	 */
-	isShownByDefault: boolean;
+	isShownByDefault?: boolean;
 	/**
 	 * The supplied label is dual purpose. It is used as:
 	 * 1. the human-readable label for the panel's dropdown menu
@@ -91,17 +127,12 @@ export type ToolsPanelItem = {
 	 */
 	label: string;
 	/**
-	 * Panel items will ensure they are only registering with their intended
-	 * panel by comparing the `panelId` props set on both the item and the panel
-	 * itself. This allows items to be injected from a shared source.
+	 * Panel items will ensure they are only registering with their intended panel
+	 * by comparing the `panelId` props set on both the item and the panel itself,
+	 * or if the `panelId` is explicitly `null`. This allows items to be injected
+	 * from a shared source.
 	 */
-	panelId: string;
-	/**
-	 * A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
-	 * array of these functions through to the panel's `resetAll` callback. They
-	 * can then be iterated over to perform additional tasks.
-	 */
-	resetAllFilter: ResetAllFilter;
+	panelId?: string | null;
 };
 
 export type ToolsPanelItemProps = ToolsPanelItem & {
@@ -119,6 +150,15 @@ export type ToolsPanelItemProps = ToolsPanelItem & {
 	 * menu.
 	 */
 	onSelect?: () => void;
+
+	/**
+	 * A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
+	 * array of these functions through to the panel's `resetAll` callback. They
+	 * can then be iterated over to perform additional tasks.
+	 *
+	 * @default noop
+	 */
+	resetAllFilter?: ResetAllFilter;
 };
 
 export type ToolsPanelMenuItemKey = 'default' | 'optional';
@@ -128,12 +168,15 @@ export type ToolsPanelMenuItems = {
 };
 
 export type ToolsPanelContext = {
-	panelId?: string;
+	panelId?: string | null;
 	menuItems: ToolsPanelMenuItems;
 	hasMenuItems: boolean;
 	registerPanelItem: ( item: ToolsPanelItem ) => void;
 	deregisterPanelItem: ( label: string ) => void;
+	registerResetAllFilter: ( filter: ResetAllFilter ) => void;
+	deregisterResetAllFilter: ( filter: ResetAllFilter ) => void;
 	flagItemCustomization: (
+		value: boolean,
 		label: string,
 		group?: ToolsPanelMenuItemKey
 	) => void;
@@ -156,4 +199,5 @@ export type ToolsPanelMenuItemsConfig = {
 	panelItems: ToolsPanelItem[];
 	shouldReset: boolean;
 	currentMenuItems?: ToolsPanelMenuItems;
+	menuItemOrder: string[];
 };
diff --git a/packages/components/src/tooltip/README.md b/packages/components/src/tooltip/README.md
index 479240b5d05fff..ef2cd35d25543e 100644
--- a/packages/components/src/tooltip/README.md
+++ b/packages/components/src/tooltip/README.md
@@ -1,8 +1,6 @@
-# Tooltip
+# ToolTip
 
-Tooltip is a React component to render floating help text relative to a node when it receives focus or when the user places the mouse cursor atop it. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically.
-
-Accessibility note: the tooltip text is hidden from screen readers and assistive technologies that understand ARIA. To make it accessible, use an `aria-label` attribute on the same element the tooltip is applied to, preferably using the same text used for the tooltip.
+Tooltip is a React component to render floating help text relative to a node when it receives focus or it is hovered upon by a mouse. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically.
 
 ## Usage
 
@@ -18,46 +16,62 @@ const MyTooltip = () => (
 );
 ```
 
+### Nested tooltips
+
+In case one or more `Tooltip` components are rendered inside another `Tooltip` component, only the tooltip associated to the outermost `Tooltip` component will be rendered in the browser and shown to the user appropriately. The rest of the nested `Tooltip` components will simply no-op and pass-through their anchor.
+
 ## Props
 
 The component accepts the following props:
 
-### position
+#### `children`: `React.ReactElement`
+
+The element to which the tooltip should anchor.
+
+**NOTE:** Accepts only one child element.
+
+-   Required: Yes
+
+#### `delay`: `number`
 
-The direction in which the tooltip should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports `"top"`, `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+The amount of time in milliseconds to wait before showing the tooltip.
 
--   Type: `String`
 -   Required: No
--   Default: `"top center"`
+-   Default: `700`
 
-### children
+#### `hideOnClick`: `boolean`
 
-The element to which the tooltip should anchor.
+Option to hide the tooltip when the anchor is clicked.
+
+-   Required: No
+-   Default: `true`
 
-**NOTE:** You must pass only a single child. Tooltip renders itself as a clone of `children` with a [`Popover`](/packages/components/src/popover/README.md) added as an additional child.
+#### `placement`: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 
--   Type: `Element`
--   Required: Yes
+Used to specify the tooltip's placement with respect to its anchor.
 
-### text
+-   Required: No
+-   Default: `'bottom'`
+
+#### `position`: `string`
 
-The tooltip text to show on focus or hover.
+_Note: use the `placement` prop instead when possible._
+
+Legacy way to specify the popover's position with respect to its anchor. 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: `'bottom'`
+
+#### `shortcut`: `string` | `object`
 
-### delay (web only)
+An option for adding accessible keyboard shortcuts.
 
-Time in milliseconds to wait before showing tooltip after the tooltip's visibility is toggled. This prop is currently only available for the web platforms.
+If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display`: `string` and `ariaLabel`: `string`.
 
--   Type: `Number`
 -   Required: No
--   Default: 700
 
-### visible (native only)
+#### `text`: `string`
 
-Whether the tooltip should be displayed on initial render. This prop is currently only available for the native mobile app built with React Native.
+The text shown in the tooltip when anchor element is focused or hovered.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`
diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js
deleted file mode 100644
index 491c7a76a97cda..00000000000000
--- a/packages/components/src/tooltip/index.js
+++ /dev/null
@@ -1,283 +0,0 @@
-// @ts-nocheck
-
-/**
- * WordPress dependencies
- */
-import {
-	Children,
-	cloneElement,
-	concatChildren,
-	useEffect,
-	useState,
-} from '@wordpress/element';
-import { useDebounce, useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Popover from '../popover';
-import Shortcut from '../shortcut';
-
-/**
- * Time over children to wait before showing tooltip
- *
- * @type {number}
- */
-export const TOOLTIP_DELAY = 700;
-
-const eventCatcher = <div className="event-catcher" />;
-
-const getDisabledElement = ( {
-	eventHandlers,
-	child,
-	childrenWithPopover,
-	mergedRefs,
-} ) => {
-	return cloneElement(
-		<span className="disabled-element-wrapper">
-			{ cloneElement( eventCatcher, eventHandlers ) }
-			{ cloneElement( child, {
-				children: childrenWithPopover,
-				ref: mergedRefs,
-			} ) }
-		</span>,
-		{ ...eventHandlers }
-	);
-};
-
-const getRegularElement = ( {
-	child,
-	eventHandlers,
-	childrenWithPopover,
-	mergedRefs,
-} ) => {
-	return cloneElement( child, {
-		...eventHandlers,
-		children: childrenWithPopover,
-		ref: mergedRefs,
-	} );
-};
-
-const addPopoverToGrandchildren = ( {
-	anchor,
-	grandchildren,
-	isOver,
-	offset,
-	position,
-	shortcut,
-	text,
-} ) =>
-	concatChildren(
-		grandchildren,
-		isOver && (
-			<Popover
-				focusOnMount={ false }
-				position={ position }
-				className="components-tooltip"
-				aria-hidden="true"
-				animate={ false }
-				offset={ offset }
-				anchor={ anchor }
-				shift
-			>
-				{ text }
-				<Shortcut
-					className="components-tooltip__shortcut"
-					shortcut={ shortcut }
-				/>
-			</Popover>
-		)
-	);
-
-const emitToChild = ( children, eventName, event ) => {
-	if ( Children.count( children ) !== 1 ) {
-		return;
-	}
-
-	const child = Children.only( children );
-
-	// If the underlying element is disabled, do not emit the event.
-	if ( child.props.disabled ) {
-		return;
-	}
-
-	if ( typeof child.props[ eventName ] === 'function' ) {
-		child.props[ eventName ]( event );
-	}
-};
-
-function Tooltip( props ) {
-	const {
-		children,
-		position = 'bottom middle',
-		text,
-		shortcut,
-		delay = TOOLTIP_DELAY,
-	} = props;
-	/**
-	 * Whether a mouse is currently pressed, used in determining whether
-	 * to handle a focus event as displaying the tooltip immediately.
-	 *
-	 * @type {boolean}
-	 */
-	const [ isMouseDown, setIsMouseDown ] = useState( false );
-	const [ isOver, setIsOver ] = useState( false );
-	const delayedSetIsOver = useDebounce( setIsOver, delay );
-	// Using internal state (instead of a ref) for the popover anchor to make sure
-	// that the component re-renders when the anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Create a reference to the Tooltip's child, to be passed to the Popover
-	// so that the Tooltip can be correctly positioned. Also, merge with the
-	// existing ref for the first child, so that its ref is preserved.
-	const existingChildRef = Children.toArray( children )[ 0 ]?.ref;
-	const mergedChildRefs = useMergeRefs( [
-		setPopoverAnchor,
-		existingChildRef,
-	] );
-
-	const createMouseDown = ( event ) => {
-		// In firefox, the mouse down event is also fired when the select
-		// list is chosen.
-		// Cancel further processing because re-rendering of child components
-		// causes onChange to be triggered with the old value.
-		// See https://github.com/WordPress/gutenberg/pull/42483
-		if ( event.target.tagName === 'OPTION' ) {
-			return;
-		}
-
-		// Preserve original child callback behavior.
-		emitToChild( children, 'onMouseDown', event );
-
-		// On mouse down, the next `mouseup` should revert the value of the
-		// instance property and remove its own event handler. The bind is
-		// made on the document since the `mouseup` might not occur within
-		// the bounds of the element.
-		document.addEventListener( 'mouseup', cancelIsMouseDown );
-		setIsMouseDown( true );
-	};
-
-	const createMouseUp = ( event ) => {
-		// In firefox, the mouse up event is also fired when the select
-		// list is chosen.
-		// Cancel further processing because re-rendering of child components
-		// causes onChange to be triggered with the old value.
-		// See https://github.com/WordPress/gutenberg/pull/42483
-		if ( event.target.tagName === 'OPTION' ) {
-			return;
-		}
-
-		emitToChild( children, 'onMouseUp', event );
-		document.removeEventListener( 'mouseup', cancelIsMouseDown );
-		setIsMouseDown( false );
-	};
-
-	const createMouseEvent = ( type ) => {
-		if ( type === 'mouseUp' ) return createMouseUp;
-		if ( type === 'mouseDown' ) return createMouseDown;
-	};
-
-	/**
-	 * Prebound `isInMouseDown` handler, created as a constant reference to
-	 * assure ability to remove in component unmount.
-	 *
-	 * @type {Function}
-	 */
-	const cancelIsMouseDown = createMouseEvent( 'mouseUp' );
-
-	const createToggleIsOver = ( eventName, isDelayed ) => {
-		return ( event ) => {
-			// Preserve original child callback behavior.
-			emitToChild( children, eventName, event );
-
-			// Mouse events behave unreliably in React for disabled elements,
-			// firing on mouseenter but not mouseleave.  Further, the default
-			// behavior for disabled elements in some browsers is to ignore
-			// mouse events. Don't bother trying to handle them.
-			//
-			// See: https://github.com/facebook/react/issues/4251
-			if ( event.currentTarget.disabled ) {
-				return;
-			}
-
-			// A focus event will occur as a result of a mouse click, but it
-			// should be disambiguated between interacting with the button and
-			// using an explicit focus shift as a cue to display the tooltip.
-			if ( 'focus' === event.type && isMouseDown ) {
-				return;
-			}
-
-			// Needed in case unsetting is over while delayed set pending, i.e.
-			// quickly blur/mouseleave before delayedSetIsOver is called.
-			delayedSetIsOver.cancel();
-
-			const _isOver = [ 'focus', 'mouseenter' ].includes( event.type );
-			if ( _isOver === isOver ) {
-				return;
-			}
-
-			if ( isDelayed ) {
-				delayedSetIsOver( _isOver );
-			} else {
-				setIsOver( _isOver );
-			}
-		};
-	};
-	const clearOnUnmount = () => {
-		delayedSetIsOver.cancel();
-		document.removeEventListener( 'mouseup', cancelIsMouseDown );
-	};
-
-	// Ignore reason: updating the deps array here could cause unexpected changes in behavior.
-	// Deferring until a more detailed investigation/refactor can be performed.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect( () => clearOnUnmount, [] );
-
-	if ( Children.count( children ) !== 1 ) {
-		if ( 'development' === process.env.NODE_ENV ) {
-			// eslint-disable-next-line no-console
-			console.error(
-				'Tooltip should be called with only a single child element.'
-			);
-		}
-
-		return children;
-	}
-
-	const eventHandlers = {
-		onMouseEnter: createToggleIsOver( 'onMouseEnter', true ),
-		onMouseLeave: createToggleIsOver( 'onMouseLeave' ),
-		onClick: createToggleIsOver( 'onClick' ),
-		onFocus: createToggleIsOver( 'onFocus' ),
-		onBlur: createToggleIsOver( 'onBlur' ),
-		onMouseDown: createMouseEvent( 'mouseDown' ),
-	};
-
-	const child = Children.only( children );
-	const { children: grandchildren, disabled } = child.props;
-	const getElementWithPopover = disabled
-		? getDisabledElement
-		: getRegularElement;
-
-	const popoverData = {
-		anchor: popoverAnchor,
-		isOver,
-		offset: 4,
-		position,
-		shortcut,
-		text,
-	};
-	const childrenWithPopover = addPopoverToGrandchildren( {
-		grandchildren,
-		...popoverData,
-	} );
-
-	return getElementWithPopover( {
-		child,
-		eventHandlers,
-		childrenWithPopover,
-		mergedRefs: mergedChildRefs,
-	} );
-}
-
-export default Tooltip;
diff --git a/packages/components/src/tooltip/index.native.js b/packages/components/src/tooltip/index.native.js
index 61b08c052dfacc..ff880d38e19822 100644
--- a/packages/components/src/tooltip/index.native.js
+++ b/packages/components/src/tooltip/index.native.js
@@ -62,9 +62,7 @@ const useKeyboardVisibility = () => {
 			showListener.remove();
 			hideListener.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [] );
 
 	return keyboardVisible;
@@ -105,9 +103,7 @@ const Tooltip = ( {
 			} );
 		}
 		return () => onHandleScreenTouch( null );
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible ] );
 
 	// Manage visibility animation.
@@ -121,9 +117,7 @@ const Tooltip = ( {
 			setAnimating( true );
 			startAnimation();
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible ] );
 
 	// Manage tooltip visibility and position in relation to keyboard.
@@ -142,9 +136,7 @@ const Tooltip = ( {
 			setAnimating( true );
 			setVisible( false );
 		}
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// See https://github.com/WordPress/gutenberg/pull/41166
 	}, [ visible, keyboardVisible ] );
 
 	// Manage tooltip position during keyboard frame changes.
@@ -273,9 +265,7 @@ const TooltipSlot = ( { children, ...rest } ) => {
 		setHandleScreenTouch( null );
 	};
 	// Memoize context value to avoid unnecessary rerenders of the Provider's children
-	// Disable reason: deferring this refactor to the native team.
-	// see https://github.com/WordPress/gutenberg/pull/41166
-	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// See https://github.com/WordPress/gutenberg/pull/41166
 	const value = useMemo( () => ( { onHandleScreenTouch } ) );
 
 	return (
diff --git a/packages/components/src/tooltip/index.tsx b/packages/components/src/tooltip/index.tsx
new file mode 100644
index 00000000000000..ce94daf67bfaba
--- /dev/null
+++ b/packages/components/src/tooltip/index.tsx
@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+import { useStoreState } from '@ariakit/react';
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import {
+	Children,
+	useContext,
+	createContext,
+	forwardRef,
+	cloneElement,
+} from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	TooltipProps,
+	TooltipInternalContext as TooltipInternalContextType,
+} from './types';
+import Shortcut from '../shortcut';
+import { positionToPlacement } from '../popover/utils';
+
+const TooltipInternalContext = createContext< TooltipInternalContextType >( {
+	isNestedInTooltip: false,
+} );
+
+/**
+ * Time over anchor to wait before showing tooltip
+ */
+export const TOOLTIP_DELAY = 700;
+
+const CONTEXT_VALUE = {
+	isNestedInTooltip: true,
+};
+
+function UnforwardedTooltip(
+	props: TooltipProps,
+	ref: React.ForwardedRef< any >
+) {
+	const {
+		children,
+		className,
+		delay = TOOLTIP_DELAY,
+		hideOnClick = true,
+		placement,
+		position,
+		shortcut,
+		text,
+
+		...restProps
+	} = props;
+
+	const { isNestedInTooltip } = useContext( TooltipInternalContext );
+
+	const baseId = useInstanceId( Tooltip, 'tooltip' );
+	const describedById = text || shortcut ? baseId : undefined;
+
+	const isOnlyChild = Children.count( children ) === 1;
+	// console error if more than one child element is added
+	if ( ! isOnlyChild ) {
+		if ( 'development' === process.env.NODE_ENV ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				'wp-components.Tooltip should be called with only a single child element.'
+			);
+		}
+	}
+
+	// Compute tooltip's placement:
+	// - give priority to `placement` prop, if defined
+	// - otherwise, compute it from the legacy `position` prop (if defined)
+	// - finally, fallback to the default placement: 'bottom'
+	let computedPlacement;
+	if ( placement !== undefined ) {
+		computedPlacement = placement;
+	} else if ( position !== undefined ) {
+		computedPlacement = positionToPlacement( position );
+		deprecated( '`position` prop in wp.components.tooltip', {
+			since: '6.4',
+			alternative: '`placement` prop',
+		} );
+	}
+	computedPlacement = computedPlacement || 'bottom';
+
+	const tooltipStore = Ariakit.useTooltipStore( {
+		placement: computedPlacement,
+		showTimeout: delay,
+	} );
+	const mounted = useStoreState( tooltipStore, 'mounted' );
+
+	if ( isNestedInTooltip ) {
+		return isOnlyChild ? (
+			<Ariakit.Role { ...restProps } render={ children } />
+		) : (
+			children
+		);
+	}
+
+	// TODO: this is a temporary workaround to minimize the effects of the
+	// Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to
+	// the tooltip anchor anymore since 0.4.0, so we need to add it manually.
+	// The `aria-describedby` attribute is added only if the anchor doesn't have
+	// one already, and if the tooltip text is not the same as the anchor's
+	// `aria-label`
+	// See: https://github.com/WordPress/gutenberg/pull/64066
+	// See: https://github.com/WordPress/gutenberg/pull/65989
+	function addDescribedById( element: React.ReactElement ) {
+		return describedById &&
+			mounted &&
+			element.props[ 'aria-describedby' ] === undefined &&
+			element.props[ 'aria-label' ] !== text
+			? cloneElement( element, { 'aria-describedby': describedById } )
+			: element;
+	}
+
+	return (
+		<TooltipInternalContext.Provider value={ CONTEXT_VALUE }>
+			<Ariakit.TooltipAnchor
+				onClick={ hideOnClick ? tooltipStore.hide : undefined }
+				store={ tooltipStore }
+				render={
+					isOnlyChild ? addDescribedById( children ) : undefined
+				}
+				ref={ ref }
+			>
+				{ isOnlyChild ? undefined : children }
+			</Ariakit.TooltipAnchor>
+			{ isOnlyChild && ( text || shortcut ) && (
+				<Ariakit.Tooltip
+					{ ...restProps }
+					className={ clsx( 'components-tooltip', className ) }
+					unmountOnHide
+					gutter={ 4 }
+					id={ describedById }
+					overflowPadding={ 0.5 }
+					store={ tooltipStore }
+				>
+					{ text }
+					{ shortcut && (
+						<Shortcut
+							className={
+								text ? 'components-tooltip__shortcut' : ''
+							}
+							shortcut={ shortcut }
+						/>
+					) }
+				</Ariakit.Tooltip>
+			) }
+		</TooltipInternalContext.Provider>
+	);
+}
+export const Tooltip = forwardRef( UnforwardedTooltip );
+
+export default Tooltip;
diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.js
deleted file mode 100644
index a76b69731b41a6..00000000000000
--- a/packages/components/src/tooltip/stories/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { text, select, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../';
-
-export default {
-	title: 'Components/ToolTip',
-	component: Tooltip,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-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 Button = styled.button`
-	margin: 0 10px;
-`;
-
-export const DisabledElement = () => {
-	const [ showMessage, toggleMessage ] = useState( false );
-
-	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 }
-		</>
-	);
-};
diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx
new file mode 100644
index 00000000000000..e3d21525dd345d
--- /dev/null
+++ b/packages/components/src/tooltip/stories/index.story.tsx
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { shortcutAriaLabel } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import Tooltip from '..';
+import Button from '../../button';
+
+const meta: Meta< typeof Tooltip > = {
+	title: 'Components/Overlays/Tooltip',
+	id: 'components-tooltip',
+	component: Tooltip,
+	argTypes: {
+		children: { control: false },
+		position: {
+			control: { type: 'select' },
+			options: [
+				'top left',
+				'top center',
+				'top right',
+				'bottom left',
+				'bottom center',
+				'bottom right',
+			],
+		},
+		shortcut: { control: { type: 'object' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Tooltip > = ( props ) => (
+	<Tooltip { ...props } />
+);
+
+export const Default: StoryFn< typeof Tooltip > = Template.bind( {} );
+Default.args = {
+	children: <Button variant="primary">Tooltip Anchor</Button>,
+	text: 'Tooltip Text',
+};
+
+export const KeyboardShortcut = Template.bind( {} );
+KeyboardShortcut.args = {
+	children: <Button variant="secondary">Keyboard Shortcut</Button>,
+	shortcut: {
+		display: '⇧⌘,',
+		ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+	},
+};
+
+/**
+ * In case one or more `Tooltip` components are rendered inside another
+ * `Tooltip` component, only the tooltip associated to the outermost `Tooltip`
+ * component will be rendered in the browser and shown to the user
+ * appropriately. The rest of the nested `Tooltip` components will simply no-op
+ * and pass-through their anchor.
+ */
+export const Nested: StoryFn< typeof Tooltip > = Template.bind( {} );
+Nested.args = {
+	children: (
+		<Tooltip text="Nested tooltip text (that will never show)">
+			<Button variant="primary">Tooltip Anchor</Button>
+		</Tooltip>
+	),
+	text: 'Outer tooltip text',
+};
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index 9a874246568f6b..e84946e4a9176c 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -1,40 +1,17 @@
-.components-tooltip.components-popover {
-	z-index: z-index(".components-tooltip");
-
-	.components-popover__content {
-		min-width: min-content;
-	}
-}
-
-.components-tooltip .components-popover__content {
-	background: $gray-900;
-	border-radius: $radius-block-ui;
-	border-width: 0;
-	outline: none;
-	color: $white;
-	white-space: nowrap;
+.components-tooltip {
+	background: $black;
+	font-family: $default-font;
+	border-radius: $radius-small;
+	color: $gray-100;
 	text-align: center;
 	line-height: 1.4;
 	font-size: 12px;
-	box-shadow: none;
 	padding: $grid-unit-05 $grid-unit-10;
+	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {
-	display: inline-block;
 	margin-left: $grid-unit-10;
 }
 
-.disabled-element-wrapper {
-	position: relative;
-	.event-catcher {
-		z-index: z-index(".components-tooltip .event-catcher");
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-	}
-}
diff --git a/packages/components/src/tooltip/test/index.js b/packages/components/src/tooltip/test/index.js
deleted file mode 100644
index d126209cc8a185..00000000000000
--- a/packages/components/src/tooltip/test/index.js
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../';
-/**
- * WordPress dependencies
- */
-import { TOOLTIP_DELAY } from '../index.js';
-
-describe( 'Tooltip', () => {
-	describe( '#render()', () => {
-		it( 'should not render the tooltip if multiple children are passed', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Button 1</button>
-					<button>Button 2</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByText( 'Button 1' );
-			button.focus();
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render children', () => {
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
-
-			expect(
-				screen.getByRole( 'button', { name: 'Hover Me!' } )
-			).toBeInTheDocument();
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'should render children with additional tooltip when focused', () => {
-			const mockOnFocus = jest.fn();
-
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
-
-			// Before focus, the tooltip is not shown.
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			button.focus();
-
-			// Tooltip is shown after focusing the anchor.
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-		} );
-
-		it( 'should render children with additional tooltip when hovered', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			render(
-				<Tooltip text="Help text">
-					<button>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
-
-			await user.hover( button );
-
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip shows after the delay
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
-		} );
-
-		it( 'should not show tooltip on focus as result of mouse click', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const mockOnFocus = jest.fn();
-
-			render(
-				<Tooltip text="Help text">
-					<button onFocus={ mockOnFocus }>Hover Me!</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
-
-			await user.click( button );
-
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip still hasn't appeared yet, even though the component was focused
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( mockOnFocus ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					type: 'focus',
-				} )
-			);
-		} );
-
-		it( 'should respect custom delay prop when showing tooltip', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const TEST_DELAY = TOOLTIP_DELAY * 2;
-			const mockOnMouseEnter = jest.fn();
-			const mockOnFocus = jest.fn();
-
-			render(
-				<Tooltip text="Help text" delay={ TEST_DELAY }>
-					<button
-						onMouseEnter={ mockOnMouseEnter }
-						onFocus={ mockOnFocus }
-					>
-						<span>Hover Me!</span>
-					</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
-
-			await user.hover( button );
-
-			// Tooltip hasn't appeared yet
-			expect( mockOnMouseEnter ).toHaveBeenCalledTimes( 1 );
-
-			// Advance by the usual TOOLTIP_DELAY
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip hasn't appeared yet after the usual delay
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-
-			// Advance time again, so that we reach the full TEST_DELAY time
-			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
-
-			// Tooltip shows after TEST_DELAY time
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
-
-			expect( mockOnFocus ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should show tooltip when an element is disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled>Click me</button>
-				</Tooltip>
-			);
-
-			const button = screen.getByRole( 'button', { name: 'Click me' } );
-			expect( button ).toBeInTheDocument();
-			expect( button ).toBeDisabled();
-
-			// Note: this is testing for implementation details,
-			// but couldn't find a better way.
-			const buttonRect = button.getBoundingClientRect();
-			const eventCatcher = container.querySelector( '.event-catcher' );
-			const eventCatcherRect = eventCatcher.getBoundingClientRect();
-			expect( buttonRect ).toEqual( eventCatcherRect );
-
-			await user.hover( eventCatcher );
-
-			// Tooltip hasn't appeared yet
-			expect(
-				screen.queryByText( 'Show helpful text here' )
-			).not.toBeInTheDocument();
-
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip shows after the delay
-			expect(
-				screen.getByText( 'Show helpful text here' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'should not emit events back to children when they are disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const onClickMock = jest.fn();
-			const { container } = render(
-				<Tooltip text="Show helpful text here">
-					<button disabled onClick={ onClickMock }>
-						Click me
-					</button>
-				</Tooltip>
-			);
-
-			const eventCatcher =
-				container.getElementsByClassName( 'event-catcher' )[ 0 ];
-			await user.click( eventCatcher );
-			expect( onClickMock ).not.toHaveBeenCalled();
-		} );
-
-		it( 'should not show tooltip if the mouse leaves the anchor before the tooltip has shown', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			const MOUSE_LEAVE_DELAY = TOOLTIP_DELAY - 200;
-			const onMouseEnterMock = jest.fn();
-			const onMouseLeaveMock = jest.fn();
-
-			render(
-				<>
-					<Tooltip text="Help text">
-						<button
-							onMouseEnter={ onMouseEnterMock }
-							onMouseLeave={ onMouseLeaveMock }
-						>
-							Hover Me!
-						</button>
-					</Tooltip>
-					<button>Hover me instead!</button>
-				</>
-			);
-
-			const externalButton = screen.getByRole( 'button', {
-				name: 'Hover me instead!',
-			} );
-			const tooltipButton = screen.getByRole( 'button', {
-				name: 'Hover Me!',
-			} );
-
-			await user.hover( tooltipButton );
-
-			// Tooltip hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-
-			// Advance time by MOUSE_LEAVE_DELAY time
-			act( () => jest.advanceTimersByTime( MOUSE_LEAVE_DELAY ) );
-
-			// Hover the other button, meaning that the mouse will leave the tooltip anchor
-			await user.hover( externalButton );
-
-			// Tooltip still hasn't appeared yet
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
-			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
-
-			// Advance time again, so that we reach the full TOOLTIP_DELAY time
-			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
-
-			// Tooltip won't show, since the mouse has left the anchor
-			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
-		} );
-	} );
-} );
diff --git a/packages/components/src/tooltip/test/index.native.js b/packages/components/src/tooltip/test/index.native.js
index d8047f66054cd1..4b9691313e3d1e 100644
--- a/packages/components/src/tooltip/test/index.native.js
+++ b/packages/components/src/tooltip/test/index.native.js
@@ -4,15 +4,11 @@
 import { fireEvent, render, act } from 'test/helpers';
 import { Keyboard, Text } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
 import Tooltip from '../index';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 // Minimal tree to render tooltip.
 const TooltipSlot = ( { children } ) => (
@@ -44,7 +40,7 @@ afterAll( () => {
 it( 'displays the message', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -53,12 +49,10 @@ it( 'displays the message', () => {
 	expect( screen.getByText( 'A helpful message' ) ).toBeTruthy();
 } );
 
-// Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
-// triggering `onTouch*` on the element: https://github.com/callstack/react-native-testing-library/issues/897
-it.skip( 'dismisses when the screen is tapped', () => {
+it( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -74,7 +68,7 @@ it.skip( 'dismisses when the screen is tapped', () => {
 it( 'dismisses when the keyboard closes', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
new file mode 100644
index 00000000000000..3679b597b2cb14
--- /dev/null
+++ b/packages/components/src/tooltip/test/index.tsx
@@ -0,0 +1,597 @@
+/**
+ * External dependencies
+ */
+import { render, screen, waitFor } from '@testing-library/react';
+import { press, hover, click, sleep } from '@ariakit/test';
+
+/**
+ * WordPress dependencies
+ */
+import { shortcutAriaLabel } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import Modal from '../../modal';
+import Tooltip, { TOOLTIP_DELAY } from '..';
+
+const props = {
+	children: <button>Tooltip anchor</button>,
+	text: 'tooltip text',
+};
+
+const expectTooltipToBeVisible = () =>
+	expect(
+		screen.getByRole( 'tooltip', { name: 'tooltip text' } )
+	).toBeVisible();
+
+const expectTooltipToBeHidden = () =>
+	expect(
+		screen.queryByRole( 'tooltip', { name: 'tooltip text' } )
+	).not.toBeInTheDocument();
+
+const waitExpectTooltipToShow = async ( timeout = TOOLTIP_DELAY ) =>
+	await waitFor( expectTooltipToBeVisible, { timeout } );
+
+const waitExpectTooltipToHide = async () =>
+	await waitFor( expectTooltipToBeHidden );
+
+const hoverOutside = async () => {
+	await hover( document.body );
+	await hover( document.body, { clientX: 10, clientY: 10 } );
+};
+
+describe( 'Tooltip', () => {
+	describe( 'basic behavior', () => {
+		it( 'should not render the tooltip if multiple children are passed', async () => {
+			render(
+				// @ts-expect-error Tooltip cannot have more than one child element
+				<Tooltip { ...props }>
+					<button>First button</button>
+					<button>Second button</button>
+				</Tooltip>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: 'First button' } )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'button', { name: 'Second button' } )
+			).toBeVisible();
+
+			await press.Tab();
+
+			expectTooltipToBeHidden();
+		} );
+
+		it( 'should associate the tooltip text with its anchor via the accessible description when visible', async () => {
+			render( <Tooltip { ...props } /> );
+
+			// The anchor can not be found by querying for its description,
+			// since that is present only when the tooltip is visible
+			expect(
+				screen.queryByRole( 'button', { description: 'tooltip text' } )
+			).not.toBeInTheDocument();
+
+			// Hover the anchor. The tooltip shows and its text is used to describe
+			// the tooltip anchor
+			await hover(
+				screen.getByRole( 'button', {
+					name: 'Tooltip anchor',
+				} )
+			);
+			expect(
+				await screen.findByRole( 'button', {
+					description: 'tooltip text',
+				} )
+			).toBeInTheDocument();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+			expect(
+				screen.queryByRole( 'button', { description: 'tooltip text' } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not leak Tooltip props to the tooltip anchor', () => {
+			render(
+				<Tooltip data-foo>
+					<button>Anchor</button>
+				</Tooltip>
+			);
+			expect(
+				screen.getByRole( 'button', { name: 'Anchor' } )
+			).not.toHaveAttribute( 'data-foo' );
+		} );
+
+		it( 'should add default and custom class names to the tooltip', async () => {
+			render( <Tooltip { ...props } className="foo" /> );
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+
+			// Check default and custom classnames
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text',
+					} )
+				).toHaveClass( 'components-tooltip', 'foo' )
+			);
+		} );
+	} );
+
+	describe( 'keyboard focus', () => {
+		it( 'should not render the tooltip if there is no focus', () => {
+			render( <Tooltip { ...props } /> );
+
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toBeVisible();
+
+			expectTooltipToBeHidden();
+		} );
+
+		it( 'should show the tooltip when focusing on the tooltip anchor and hide it the anchor loses focus', async () => {
+			render(
+				<>
+					<Tooltip { ...props } />
+					<button>Focus me</button>
+				</>
+			);
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( 'should show tooltip when focussing a disabled (but focussable) anchor button', async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-disabled="true">Tooltip anchor</button>
+					</Tooltip>
+					<button>Focus me</button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
+
+			// Focus anchor, tooltip should show
+			await press.Tab();
+			expect( anchor ).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// Focus another button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Focus me',
+				} )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+	} );
+
+	describe( 'mouse hover', () => {
+		it( 'should show the tooltip when the tooltip anchor is hovered and hide it when the cursor stops hovering the anchor', async () => {
+			render( <Tooltip { ...props } /> );
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitExpectTooltipToShow();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( 'should show tooltip when hovering over a disabled (but focussable) anchor button', async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-disabled="true">Tooltip anchor</button>
+					</Tooltip>
+					<button>Focus me</button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
+
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitExpectTooltipToShow();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+		} );
+	} );
+
+	describe( 'mouse click', () => {
+		it( 'should hide tooltip when the tooltip anchor is clicked', async () => {
+			render( <Tooltip { ...props } /> );
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitExpectTooltipToShow();
+
+			// Click the anchor, tooltip should hide
+			await click( anchor );
+			await waitExpectTooltipToHide();
+		} );
+
+		it( 'should not hide tooltip when the tooltip anchor is clicked and the `hideOnClick` prop is `false', async () => {
+			render(
+				<>
+					<Tooltip { ...props } hideOnClick={ false } />
+					<button>Click me</button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			expect( anchor ).toBeVisible();
+
+			// Hover over the anchor, tooltip should show
+			await hover( anchor );
+			await waitExpectTooltipToShow();
+
+			// Click the anchor, tooltip should not hide
+			await click( anchor );
+			await waitExpectTooltipToShow();
+
+			// Click another button, tooltip should hide
+			await click( screen.getByRole( 'button', { name: 'Click me' } ) );
+			await waitExpectTooltipToHide();
+		} );
+	} );
+
+	describe( 'delay', () => {
+		it( 'should respect custom delay prop when showing tooltip', async () => {
+			const ADDITIONAL_DELAY = 100;
+
+			render(
+				<Tooltip
+					{ ...props }
+					delay={ TOOLTIP_DELAY + ADDITIONAL_DELAY }
+				/>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+			expect( anchor ).toBeVisible();
+
+			// Hover over the anchor
+			await hover( anchor );
+			expectTooltipToBeHidden();
+
+			// Advance time by default delay
+			await sleep( TOOLTIP_DELAY );
+
+			// Tooltip hasn't appeared yet
+			expectTooltipToBeHidden();
+
+			// Wait for additional delay for tooltip to appear
+			await sleep( ADDITIONAL_DELAY );
+			await waitExpectTooltipToShow();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+
+			// Prevent this test from interfering with the next one.
+			// "Tooltips appear instantly if another tooltip has just been hidden."
+			// See: https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435495655
+			await sleep( 3000 );
+		} );
+
+		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
+			const onMouseEnterMock = jest.fn();
+			const onMouseLeaveMock = jest.fn();
+			const HOVER_OUTSIDE_ANTICIPATION = 200;
+
+			render(
+				<Tooltip { ...props }>
+					<button
+						onMouseEnter={ onMouseEnterMock }
+						onMouseLeave={ onMouseLeaveMock }
+					>
+						Tooltip anchor
+					</button>
+				</Tooltip>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+			expect( anchor ).toBeVisible();
+
+			// Hover over the anchor, tooltip hasn't appeared yet
+			await hover( anchor );
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+			expectTooltipToBeHidden();
+
+			// Advance time, tooltip hasn't appeared yet because TOOLTIP_DELAY time
+			// hasn't passed yet
+			await sleep( TOOLTIP_DELAY - HOVER_OUTSIDE_ANTICIPATION );
+			expectTooltipToBeHidden();
+
+			// Hover outside of the anchor, tooltip still hasn't appeared yet
+			await hoverOutside();
+			expectTooltipToBeHidden();
+
+			expect( onMouseEnterMock ).toHaveBeenCalledTimes( 1 );
+			expect( onMouseLeaveMock ).toHaveBeenCalledTimes( 1 );
+
+			// Advance time again, so that we reach the full TOOLTIP_DELAY time
+			await sleep( HOVER_OUTSIDE_ANTICIPATION );
+
+			// Tooltip won't show, since the mouse has left the tooltip anchor
+			expectTooltipToBeHidden();
+		} );
+	} );
+
+	describe( 'shortcut', () => {
+		it( 'should show the shortcut in the tooltip when a string is passed as the shortcut', async () => {
+			render( <Tooltip { ...props } shortcut="shortcut text" /> );
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text shortcut text',
+					} )
+				).toBeVisible()
+			);
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( 'should show the shortcut in the tooltip when an object is passed as the shortcut', async () => {
+			render(
+				<Tooltip
+					{ ...props }
+					shortcut={ {
+						display: '⇧⌘,',
+						ariaLabel: shortcutAriaLabel.primaryShift( ',' ),
+					} }
+				/>
+			);
+
+			// Hover over the anchor, tooltip should show
+			await hover(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			);
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', {
+						name: 'tooltip text Control + Shift + Comma',
+					} )
+				).toBeVisible()
+			);
+			expect(
+				screen.getByRole( 'tooltip', {
+					name: 'tooltip text Control + Shift + Comma',
+				} )
+			).toHaveTextContent( /⇧⌘,/i );
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+		} );
+	} );
+
+	describe( 'event propagation', () => {
+		it( 'should close the parent dialog component when pressing the Escape key while the tooltip is visible', async () => {
+			const onRequestClose = jest.fn();
+			render(
+				<Modal onRequestClose={ onRequestClose }>
+					<p>Modal content</p>
+				</Modal>
+			);
+
+			expectTooltipToBeHidden();
+
+			const closeButton = screen.getByRole( 'button', {
+				name: /close/i,
+			} );
+
+			// Hover over the anchor, tooltip should show
+			await hover( closeButton );
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', { name: /close/i } )
+				).toBeVisible()
+			);
+
+			// Press the Escape key, Modal should request to be closed
+			await press.Escape();
+			expect( onRequestClose ).toHaveBeenCalled();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitExpectTooltipToHide();
+		} );
+	} );
+
+	describe( 'nested', () => {
+		it( 'should render the outer tooltip and ignore nested tooltips', async () => {
+			render(
+				<Tooltip text="Outer tooltip">
+					<Tooltip text="Middle tooltip">
+						<Tooltip text="Inner tooltip">
+							<button>Tooltip anchor</button>
+						</Tooltip>
+					</Tooltip>
+				</Tooltip>
+			);
+
+			// Hover the anchor. Only the outer tooltip should show.
+			await hover(
+				screen.getByRole( 'button', {
+					name: 'Tooltip anchor',
+				} )
+			);
+
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'tooltip', { name: 'Outer tooltip' } )
+				).toBeVisible()
+			);
+			expect(
+				screen.queryByRole( 'tooltip', { name: 'Middle tooltip' } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'tooltip', { name: 'Inner tooltip' } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.getByRole( 'button', {
+					description: 'Outer tooltip',
+				} )
+			).toBeVisible();
+
+			// Hover outside of the anchor, tooltip should hide
+			await hoverOutside();
+			await waitFor( () =>
+				expect(
+					screen.queryByRole( 'tooltip', { name: 'Outer tooltip' } )
+				).not.toBeInTheDocument()
+			);
+		} );
+
+		it( 'should not leak Tooltip component classname to the anchor element', () => {
+			render(
+				<Tooltip>
+					<Tooltip>
+						<button>Anchor</button>
+					</Tooltip>
+				</Tooltip>
+			);
+			expect(
+				screen.getByRole( 'button', { name: 'Anchor' } )
+			).not.toHaveClass( 'components-tooltip' );
+		} );
+	} );
+
+	describe( 'aria-describedby', () => {
+		it( "should not override the anchor's aria-describedby attribute if specified", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-describedby="tooltip-test-description">
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					{ /* eslint-disable-next-line no-restricted-syntax */ }
+					<p id="tooltip-test-description">Tooltip description</p>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchors should retain its previous accessible description,
+			// since the tooltip shouldn't override it.
+			expect(
+				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
+			).toHaveAccessibleDescription( 'Tooltip description' );
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+
+		it( "should not add the aria-describedby attribute to the anchor if the tooltip text matches the anchor's aria-label", async () => {
+			render(
+				<>
+					<Tooltip { ...props }>
+						<button aria-label={ props.text }>
+							Tooltip anchor
+						</button>
+					</Tooltip>
+					<button>focus trap outside</button>
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the anchor, tooltip should show
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).toHaveFocus();
+			await waitExpectTooltipToShow();
+
+			// The anchor shouldn't have an aria-describedby prop
+			// because its aria-label matches the tooltip text.
+			expect(
+				screen.getByRole( 'button', { name: props.text } )
+			).not.toHaveAccessibleDescription();
+
+			// Focus the other button, tooltip should hide
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', { name: 'focus trap outside' } )
+			).toHaveFocus();
+			await waitExpectTooltipToHide();
+		} );
+	} );
+} );
diff --git a/packages/components/src/tooltip/test/utils/index.tsx b/packages/components/src/tooltip/test/utils/index.tsx
new file mode 100644
index 00000000000000..1e32a10f71bd20
--- /dev/null
+++ b/packages/components/src/tooltip/test/utils/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { click, press } from '@ariakit/test';
+
+// TODO: may need to be tested with Playwright; further context:
+// https://github.com/WordPress/gutenberg/pull/52133#issuecomment-1613691258
+// below workaround ensures tooltip is umounted after each test to prevent leaking
+// similarly to ariakit tooltip tests: https://github.com/ariakit/ariakit/blob/249d376e41115e6d4ceba244e231a95fa457bd04/examples/tooltip/test.ts#L12-L14
+
+/**
+ * Ensures the async behaviors and animations in tooltip complete
+ * to avoid leaking into other tests
+ *
+ */
+export default async function cleanupTooltip() {
+	await press.Tab();
+	await press.Tab();
+	await click( document.body );
+}
diff --git a/packages/components/src/tooltip/types.ts b/packages/components/src/tooltip/types.ts
new file mode 100644
index 00000000000000..3d42b02428de07
--- /dev/null
+++ b/packages/components/src/tooltip/types.ts
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import type { Placement } from '@floating-ui/react-dom';
+
+/**
+ * Internal dependencies
+ */
+import type { PopoverProps } from '../popover/types';
+import type { ShortcutProps } from '../shortcut/types';
+
+export type TooltipProps = {
+	/**
+	 * The anchor for the tooltip.
+	 *
+	 * **Note**: Accepts only one child element.
+	 */
+	children: React.ReactElement;
+	/**
+	 * Custom class name for the tooltip.
+	 */
+	className?: string;
+	/**
+	 * Option to hide the tooltip when the anchor is clicked.
+	 *
+	 * @default true
+	 */
+	hideOnClick?: boolean;
+	/**
+	 * The amount of time in milliseconds to wait before showing the tooltip.
+	 *
+	 * @default 700
+	 */
+	delay?: number;
+	/**
+	 * Where the tooltip should be positioned relative to its parent.
+	 *
+	 * @default bottom
+	 */
+	placement?: Placement;
+	/**
+	 * _Note: this prop is deprecated. Please use the `placement` prop instead._
+	 *
+	 * Legacy way of specifying the tooltip's position relative to its parent.
+	 *
+	 * Specify y- and x-axis as a space-separated string. Supports `"top"`,
+	 * `"bottom"` y axis, and `"left"`, `"center"`, `"right"` x axis.
+	 *
+	 * @deprecated
+	 * @default bottom
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * An option for adding accessible keyboard shortcuts.
+	 *
+	 * If shortcut is a string, it is expecting the display text. If shortcut is an
+	 * object, it will accept the properties of `display` (string) and `ariaLabel`
+	 * (string).
+	 */
+	shortcut?: ShortcutProps[ 'shortcut' ];
+	/**
+	 * The text shown in the tooltip when anchor element is focused or hovered.
+	 */
+	text?: string;
+};
+
+export type TooltipInternalContext = {
+	isNestedInTooltip: boolean;
+};
diff --git a/packages/components/src/tree-grid/README.md b/packages/components/src/tree-grid/README.md
index 45e140306b58ad..d6e861a7b9b18b 100644
--- a/packages/components/src/tree-grid/README.md
+++ b/packages/components/src/tree-grid/README.md
@@ -3,14 +3,10 @@
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
-## Table of contents
-
-1. [Development guidelines](#development-guidelines)
-2. [Related components](#related-components)
 
 ## Development guidelines
 
-`TreeGrid`, `TreeGridRow`, and `TreeGridCell` are components used to create a tree hierarchy. They're not visually styled components, but instead help with adding keyboard navigation and roving tab index behaviors to tree grid structures.
+`TreeGrid`, `TreeGridRow`, and `TreeGridCell` are components used to create a tree hierarchy. They're not visually styled components, but instead help with adding keyboard navigation and roving tabindex behaviors to tree grid structures.
 
 A tree grid is a hierarchical 2 dimensional UI component, for example it could be used to implement a file system browser.
 
@@ -31,69 +27,36 @@ function TreeMenu() {
 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>
-							Select
-						</Button>
+						<Button onClick={ onSelect } { ...props }>Select</Button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMoveUp } { ...props }>
-							Move Up
-						</Button>
-					) }
-				</TreeGridCell>
-				<TreeGridCell>
-					{ ( props ) => (
-						<Button onClick={ onMoveDown } { ...props }>
-							Move Down
-						</Button>
+						<Button onClick={ onMove } { ...props }>Move</Button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
 			<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>
-							Select
-						</Button>
-					) }
-				</TreeGridCell>
-				<TreeGridCell>
-					{ ( props ) => (
-						<Button onClick={ onMoveUp } { ...props }>
-							Move Up
-						</Button>
+						<Button onClick={ onSelect } { ...props }>Select</Button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMoveDown } { ...props }>
-							Move Down
-						</Button>
+						<Button onClick={ onMove } { ...props }>Move</Button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
 			<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>
-							Select
-						</Button>
+						<Button onClick={ onSelect } { ...props }>Select</Button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMoveUp } { ...props }>
-							Move Up
-						</Button>
-					) }
-				</TreeGridCell>
-				<TreeGridCell>
-					{ ( props ) => (
-						<Button onClick={ onMoveDown } { ...props }>
-							Move Down
-						</Button>
+						<Button onClick={ onMove } { ...props }>Move</Button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
@@ -112,27 +75,24 @@ Aside from the documented callback functions, any props specified will be passed
 
 `TreeGrid` should always have children.
 
-###### onFocusRow( event: Event, startRow: HTMLElement, destinationRow: HTMLElement )
+###### `onFocusRow`: `( event: KeyboardEvent, startRow: HTMLElement, destinationRow: HTMLElement ) => void`
 
 Callback that fires when focus is shifted from one row to another via the Up and Down keys. Callback is also fired on Home and End keys which move focus from the beginning row to the end row.
 The callback is passed the event, the start row element that the focus was on originally, and
 the destination row element after the focus has moved.
 
--   Type: `Function`
 -   Required: No
 
-###### onCollapseRow( row: HTMLElement )
+###### `onCollapseRow`: `( row: HTMLElement ) => void`
 
 A callback that passes in the row element to be collapsed.
 
--   Type: `Function`
 -   Required: No
 
-###### onExpandRow( row: HTMLElement )
+###### `onExpandRow`: `( row: HTMLElement ) => void`
 
 A callback that passes in the row element to be expanded.
 
--   Type: `Function`
 -   Required: No
 
 #### TreeGridRow
@@ -141,34 +101,48 @@ A callback that passes in the row element to be expanded.
 
 Additional props other than those specified below will be passed to the `tr` element rendered by `TreeGridRow`, so for example, it is possible to also set a `className` on a row.
 
-###### level
+###### `level`: `number`
 
 An integer value designating the level in the hierarchical tree structure. Counting starts at 1. A value of `1` indicates the root level of the structure.
 
--   Type: `Number`
 -   Required: Yes
 
-###### positionInSet
+###### `positionInSet`: `number`
 
 An integer value that represents the position in the set. A set is the count of elements at a specific level. Counting starts at 1.
 
--   Type: `Number`
 -   Required: Yes
 
-###### setSize
+###### `setSize`: `number`
 
-An integer value that represents the total number of items in the set ... that is the total number of items at this specific level of the hierarchy.
+An integer value that represents the total number of items in the set, at this specific level of the hierarchy.
 
--   Type: `Number`
 -   Required: Yes
 
-###### isExpanded
+###### `isExpanded`: `boolean`
 
 An optional value that designates whether a row is expanded or collapsed. Currently this value only sets the correct aria-expanded property on a row, it has no other built-in behavior.
 
--   Type: `Boolean`
+If there is a need to implement `aria-expanded` elsewhere in the row, cell, or element within a cell, you may pass `isExpanded={ undefined }`. In order for keyboard navigation to continue working, add the `data-expanded` attribute with either `true`/`false`. This allows the `TreeGrid` component to still manage keyboard interactions while allowing the `aria-expanded` attribute to be placed elsewhere. See the example below.
+
 -   Required: No
 
+```jsx
+function TreeMenu() {
+	return (
+		<TreeGrid>
+			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 } isExpanded={ undefined } data-expanded={ false }>
+				<TreeGridCell>
+					{ ( props ) => (
+						<Button aria-expanded="false" onClick={ onSelect } { ...props }>Select</Button>
+					) }
+				</TreeGridCell>
+			</TreeGridRow>
+		</TreeGrid>
+	);
+}
+```
+
 ### TreeGridCell
 
 #### Props
@@ -182,14 +156,14 @@ An optional value that designates whether a row is expanded or collapsed. Curren
 ```jsx
 <TreeGridCell>
 	{ ( props ) => (
-		<Button onClick={ onMoveDown } { ...props }>
-			Move Down
+		<Button onClick={ doSomething } { ...props }>
+			Do something
 		</Button>
 	) }
 </TreeGridCell>
 ```
 
-Props passed as an argument to the render prop must be passed to the child focusable component/element within the cell. If a component is used, it must correctly handle the `onFocus`, `tabIndex`, and `ref` props, passing these to the element it renders. These props are used to handle the roving tab index functionality of the tree grid.
+Props passed as an argument to the render prop must be passed to the child focusable component/element within the cell. If a component is used, it must correctly handle the `onFocus`, `tabIndex`, and `ref` props, passing these to the element it renders. These props are used to handle the roving tabindex functionality of the tree grid.
 
 ## Related components
 
diff --git a/packages/components/src/tree-grid/cell.js b/packages/components/src/tree-grid/cell.js
deleted file mode 100644
index dd4e2654d64e5e..00000000000000
--- a/packages/components/src/tree-grid/cell.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGridItem from './item';
-
-export default forwardRef( function TreeGridCell(
-	{ children, withoutGridItem = false, ...props },
-	ref
-) {
-	return (
-		<td { ...props } role="gridcell">
-			{ withoutGridItem ? (
-				children
-			) : (
-				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
-			) }
-		</td>
-	);
-} );
diff --git a/packages/components/src/tree-grid/cell.tsx b/packages/components/src/tree-grid/cell.tsx
new file mode 100644
index 00000000000000..08261abe10313a
--- /dev/null
+++ b/packages/components/src/tree-grid/cell.tsx
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeGridItem from './item';
+import type { WordPressComponentProps } from '../context';
+import type { TreeGridCellProps } from './types';
+
+function UnforwardedTreeGridCell(
+	{
+		children,
+		withoutGridItem = false,
+		...props
+	}: WordPressComponentProps< TreeGridCellProps, 'td', false >,
+	ref: React.ForwardedRef< any >
+) {
+	return (
+		<td { ...props } role="gridcell">
+			{ withoutGridItem ? (
+				<>
+					{ typeof children === 'function'
+						? children( { ...props, ref } )
+						: children }
+				</>
+			) : (
+				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
+			) }
+		</td>
+	);
+}
+
+/**
+ * `TreeGridCell` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+export const TreeGridCell = forwardRef( UnforwardedTreeGridCell );
+
+export default TreeGridCell;
diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
deleted file mode 100644
index 3d500b45c80237..00000000000000
--- a/packages/components/src/tree-grid/index.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { focus } from '@wordpress/dom';
-import { forwardRef, useCallback } from '@wordpress/element';
-import { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import RovingTabIndexContainer from './roving-tab-index';
-
-/**
- * Return focusables in a row element, excluding those from other branches
- * nested within the row.
- *
- * @param {Element} rowElement The DOM element representing the row.
- *
- * @return {?Array} The array of focusables in the row.
- */
-function getRowFocusables( rowElement ) {
-	const focusablesInRow = focus.focusable.find( rowElement, {
-		sequential: true,
-	} );
-
-	if ( ! focusablesInRow || ! focusablesInRow.length ) {
-		return;
-	}
-
-	return focusablesInRow.filter( ( focusable ) => {
-		return focusable.closest( '[role="row"]' ) === rowElement;
-	} );
-}
-
-/**
- * Renders both a table and tbody element, used to create a tree hierarchy.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props                      Component props.
- * @param {WPElement} props.children             Children to be rendered.
- * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
- * @param {string}    props.applicationAriaLabel Label to use for the application role.
- * @param {Object}    ref                        A ref to the underlying DOM table element.
- */
-function TreeGrid(
-	{
-		children,
-		onExpandRow = () => {},
-		onCollapseRow = () => {},
-		onFocusRow = () => {},
-		applicationAriaLabel,
-		...props
-	},
-	ref
-) {
-	const onKeyDown = useCallback(
-		( event ) => {
-			const { keyCode, metaKey, ctrlKey, altKey } = event;
-
-			// The shift key is intentionally absent from the following list,
-			// to enable shift + up/down to select items from the list.
-			const hasModifierKeyPressed = metaKey || ctrlKey || altKey;
-
-			if (
-				hasModifierKeyPressed ||
-				! [ UP, DOWN, LEFT, RIGHT, HOME, END ].includes( keyCode )
-			) {
-				return;
-			}
-
-			// The event will be handled, stop propagation.
-			event.stopPropagation();
-
-			const { activeElement } = document;
-			const { currentTarget: treeGridElement } = event;
-			if ( ! treeGridElement.contains( activeElement ) ) {
-				return;
-			}
-
-			// Calculate the columnIndex of the active element.
-			const activeRow = activeElement.closest( '[role="row"]' );
-			const focusablesInRow = getRowFocusables( activeRow );
-			const currentColumnIndex = focusablesInRow.indexOf( activeElement );
-			const canExpandCollapse = 0 === currentColumnIndex;
-			const cannotFocusNextColumn =
-				canExpandCollapse &&
-				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
-				keyCode === RIGHT;
-
-			if ( [ LEFT, RIGHT ].includes( keyCode ) ) {
-				// Calculate to the next element.
-				let nextIndex;
-				if ( keyCode === LEFT ) {
-					nextIndex = Math.max( 0, currentColumnIndex - 1 );
-				} else {
-					nextIndex = Math.min(
-						currentColumnIndex + 1,
-						focusablesInRow.length - 1
-					);
-				}
-
-				// Focus is at the left most column.
-				if ( canExpandCollapse ) {
-					if ( keyCode === LEFT ) {
-						// Left:
-						// If a row is focused, and it is expanded, collapses the current row.
-						if (
-							activeRow.getAttribute( 'aria-expanded' ) === 'true'
-						) {
-							onCollapseRow( activeRow );
-							event.preventDefault();
-							return;
-						}
-						// If a row is focused, and it is collapsed, moves to the parent row (if there is one).
-						const level = Math.max(
-							parseInt(
-								activeRow?.getAttribute( 'aria-level' ) ?? 1,
-								10
-							) - 1,
-							1
-						);
-						const rows = Array.from(
-							treeGridElement.querySelectorAll( '[role="row"]' )
-						);
-						let parentRow = activeRow;
-						const currentRowIndex = rows.indexOf( activeRow );
-						for ( let i = currentRowIndex; i >= 0; i-- ) {
-							if (
-								parseInt(
-									rows[ i ].getAttribute( 'aria-level' ),
-									10
-								) === level
-							) {
-								parentRow = rows[ i ];
-								break;
-							}
-						}
-						getRowFocusables( parentRow )?.[ 0 ]?.focus();
-					}
-					if ( keyCode === RIGHT ) {
-						// Right:
-						// If a row is focused, and it is collapsed, expands the current row.
-						if (
-							activeRow.getAttribute( 'aria-expanded' ) ===
-							'false'
-						) {
-							onExpandRow( activeRow );
-							event.preventDefault();
-							return;
-						}
-						// If a row is focused, and it is expanded, focuses the rightmost cell in the row.
-						const focusableItems = getRowFocusables( activeRow );
-						if ( focusableItems.length > 0 ) {
-							focusableItems[
-								focusableItems.length - 1
-							]?.focus();
-						}
-					}
-					// Prevent key use for anything else. For example, Voiceover
-					// will start reading text on continued use of left/right arrow
-					// keys.
-					event.preventDefault();
-					return;
-				}
-
-				// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
-				if ( cannotFocusNextColumn ) {
-					return;
-				}
-				focusablesInRow[ nextIndex ].focus();
-
-				// Prevent key use for anything else. This ensures Voiceover
-				// doesn't try to handle key navigation.
-				event.preventDefault();
-			} else if ( [ UP, DOWN ].includes( keyCode ) ) {
-				// Calculate the rowIndex of the next row.
-				const rows = Array.from(
-					treeGridElement.querySelectorAll( '[role="row"]' )
-				);
-				const currentRowIndex = rows.indexOf( activeRow );
-				let nextRowIndex;
-
-				if ( keyCode === UP ) {
-					nextRowIndex = Math.max( 0, currentRowIndex - 1 );
-				} else {
-					nextRowIndex = Math.min(
-						currentRowIndex + 1,
-						rows.length - 1
-					);
-				}
-
-				// Focus is either at the top or bottom edge of the grid. Do nothing.
-				if ( nextRowIndex === currentRowIndex ) {
-					// Prevent key use for anything else. For example, Voiceover
-					// will start navigating horizontally when reaching the vertical
-					// bounds of a table.
-					event.preventDefault();
-					return;
-				}
-
-				// Get the focusables in the next row.
-				const focusablesInNextRow = getRowFocusables(
-					rows[ nextRowIndex ]
-				);
-
-				// If for some reason there are no focusables in the next row, do nothing.
-				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
-					// Prevent key use for anything else. For example, Voiceover
-					// will still focus text when using arrow keys, while this
-					// component should limit navigation to focusables.
-					event.preventDefault();
-					return;
-				}
-
-				// Try to focus the element in the next row that's at a similar column to the activeElement.
-				const nextIndex = Math.min(
-					currentColumnIndex,
-					focusablesInNextRow.length - 1
-				);
-				focusablesInNextRow[ nextIndex ].focus();
-
-				// Let consumers know the row that was originally focused,
-				// and the row that is now in focus.
-				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
-
-				// Prevent key use for anything else. This ensures Voiceover
-				// doesn't try to handle key navigation.
-				event.preventDefault();
-			} else if ( [ HOME, END ].includes( keyCode ) ) {
-				// Calculate the rowIndex of the next row.
-				const rows = Array.from(
-					treeGridElement.querySelectorAll( '[role="row"]' )
-				);
-				const currentRowIndex = rows.indexOf( activeRow );
-				let nextRowIndex;
-
-				if ( keyCode === HOME ) {
-					nextRowIndex = 0;
-				} else {
-					nextRowIndex = rows.length - 1;
-				}
-
-				// Focus is either at the top or bottom edge of the grid. Do nothing.
-				if ( nextRowIndex === currentRowIndex ) {
-					// Prevent key use for anything else. For example, Voiceover
-					// will start navigating horizontally when reaching the vertical
-					// bounds of a table.
-					event.preventDefault();
-					return;
-				}
-
-				// Get the focusables in the next row.
-				const focusablesInNextRow = getRowFocusables(
-					rows[ nextRowIndex ]
-				);
-
-				// If for some reason there are no focusables in the next row, do nothing.
-				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
-					// Prevent key use for anything else. For example, Voiceover
-					// will still focus text when using arrow keys, while this
-					// component should limit navigation to focusables.
-					event.preventDefault();
-					return;
-				}
-
-				// Try to focus the element in the next row that's at a similar column to the activeElement.
-				const nextIndex = Math.min(
-					currentColumnIndex,
-					focusablesInNextRow.length - 1
-				);
-				focusablesInNextRow[ nextIndex ].focus();
-
-				// Let consumers know the row that was originally focused,
-				// and the row that is now in focus.
-				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
-
-				// Prevent key use for anything else. This ensures Voiceover
-				// doesn't try to handle key navigation.
-				event.preventDefault();
-			}
-		},
-		[ onExpandRow, onCollapseRow, onFocusRow ]
-	);
-
-	/* Disable reason: A treegrid is implemented using a table element. */
-	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
-	return (
-		<RovingTabIndexContainer>
-			{
-				// Prevent browser mode from triggering in NVDA by wrapping List View
-				// in a role=application wrapper.
-				// see: https://github.com/WordPress/gutenberg/issues/43729
-			 }
-			<div role="application" aria-label={ applicationAriaLabel }>
-				<table
-					{ ...props }
-					role="treegrid"
-					onKeyDown={ onKeyDown }
-					ref={ ref }
-				>
-					<tbody>{ children }</tbody>
-				</table>
-			</div>
-		</RovingTabIndexContainer>
-	);
-	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
-}
-
-export default forwardRef( TreeGrid );
-export { default as TreeGridRow } from './row';
-export { default as TreeGridCell } from './cell';
-export { default as TreeGridItem } from './item';
diff --git a/packages/components/src/tree-grid/index.tsx b/packages/components/src/tree-grid/index.tsx
new file mode 100644
index 00000000000000..6a02f333854941
--- /dev/null
+++ b/packages/components/src/tree-grid/index.tsx
@@ -0,0 +1,393 @@
+/**
+ * WordPress dependencies
+ */
+import { focus } from '@wordpress/dom';
+import { forwardRef, useCallback } from '@wordpress/element';
+import { UP, DOWN, LEFT, RIGHT, HOME, END } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import RovingTabIndexContainer from './roving-tab-index';
+import type { TreeGridProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+/**
+ * Return focusables in a row element, excluding those from other branches
+ * nested within the row.
+ *
+ * @param rowElement The DOM element representing the row.
+ *
+ * @return The array of focusables in the row.
+ */
+function getRowFocusables( rowElement: HTMLElement ) {
+	const focusablesInRow = focus.focusable.find( rowElement, {
+		sequential: true,
+	} );
+
+	return focusablesInRow.filter( ( focusable ) => {
+		return focusable.closest( '[role="row"]' ) === rowElement;
+	} );
+}
+
+/**
+ * Renders both a table and tbody element, used to create a tree hierarchy.
+ *
+ */
+function UnforwardedTreeGrid(
+	{
+		children,
+		onExpandRow = () => {},
+		onCollapseRow = () => {},
+		onFocusRow = () => {},
+		applicationAriaLabel,
+		...props
+	}: WordPressComponentProps< TreeGridProps, 'table', false >,
+	/** A ref to the underlying DOM table element. */
+	ref: React.ForwardedRef< HTMLTableElement >
+) {
+	const onKeyDown = useCallback(
+		( event: React.KeyboardEvent< HTMLTableElement > ) => {
+			const { keyCode, metaKey, ctrlKey, altKey } = event;
+
+			// The shift key is intentionally absent from the following list,
+			// to enable shift + up/down to select items from the list.
+			const hasModifierKeyPressed = metaKey || ctrlKey || altKey;
+
+			if (
+				hasModifierKeyPressed ||
+				! ( [ UP, DOWN, LEFT, RIGHT, HOME, END ] as number[] ).includes(
+					keyCode
+				)
+			) {
+				return;
+			}
+
+			// The event will be handled, stop propagation.
+			event.stopPropagation();
+
+			const { activeElement } = document;
+			const { currentTarget: treeGridElement } = event;
+
+			if (
+				! activeElement ||
+				! treeGridElement.contains( activeElement )
+			) {
+				return;
+			}
+
+			// Calculate the columnIndex of the active element.
+			const activeRow =
+				activeElement.closest< HTMLElement >( '[role="row"]' );
+
+			if ( ! activeRow ) {
+				return;
+			}
+
+			const focusablesInRow = getRowFocusables( activeRow );
+			const currentColumnIndex = focusablesInRow.indexOf(
+				activeElement as HTMLElement
+			);
+			const canExpandCollapse = 0 === currentColumnIndex;
+			const cannotFocusNextColumn =
+				canExpandCollapse &&
+				( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
+					activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
+				keyCode === RIGHT;
+
+			if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
+				// Calculate to the next element.
+				let nextIndex;
+				if ( keyCode === LEFT ) {
+					nextIndex = Math.max( 0, currentColumnIndex - 1 );
+				} else {
+					nextIndex = Math.min(
+						currentColumnIndex + 1,
+						focusablesInRow.length - 1
+					);
+				}
+
+				// Focus is at the left most column.
+				if ( canExpandCollapse ) {
+					if ( keyCode === LEFT ) {
+						// Left:
+						// If a row is focused, and it is expanded, collapses the current row.
+						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'true' ||
+							activeRow.getAttribute( 'aria-expanded' ) === 'true'
+						) {
+							onCollapseRow( activeRow );
+							event.preventDefault();
+							return;
+						}
+						// If a row is focused, and it is collapsed, moves to the parent row (if there is one).
+						const level = Math.max(
+							parseInt(
+								activeRow?.getAttribute( 'aria-level' ) ?? '1',
+								10
+							) - 1,
+							1
+						);
+						const rows = Array.from(
+							treeGridElement.querySelectorAll< HTMLElement >(
+								'[role="row"]'
+							)
+						);
+						let parentRow = activeRow;
+						const currentRowIndex = rows.indexOf( activeRow );
+						for ( let i = currentRowIndex; i >= 0; i-- ) {
+							const ariaLevel =
+								rows[ i ].getAttribute( 'aria-level' );
+
+							if (
+								ariaLevel !== null &&
+								parseInt( ariaLevel, 10 ) === level
+							) {
+								parentRow = rows[ i ];
+								break;
+							}
+						}
+						getRowFocusables( parentRow )?.[ 0 ]?.focus();
+					}
+					if ( keyCode === RIGHT ) {
+						// Right:
+						// If a row is focused, and it is collapsed, expands the current row.
+						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'false' ||
+							activeRow.getAttribute( 'aria-expanded' ) ===
+								'false'
+						) {
+							onExpandRow( activeRow );
+							event.preventDefault();
+							return;
+						}
+						// If a row is focused, and it is expanded, focuses the next cell in the row.
+						const focusableItems = getRowFocusables( activeRow );
+						if ( focusableItems.length > 0 ) {
+							focusableItems[ nextIndex ]?.focus();
+						}
+					}
+					// Prevent key use for anything else. For example, Voiceover
+					// will start reading text on continued use of left/right arrow
+					// keys.
+					event.preventDefault();
+					return;
+				}
+
+				// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
+				if ( cannotFocusNextColumn ) {
+					return;
+				}
+				focusablesInRow[ nextIndex ].focus();
+
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
+				event.preventDefault();
+			} else if ( ( [ UP, DOWN ] as number[] ).includes( keyCode ) ) {
+				// Calculate the rowIndex of the next row.
+				const rows = Array.from(
+					treeGridElement.querySelectorAll< HTMLElement >(
+						'[role="row"]'
+					)
+				);
+				const currentRowIndex = rows.indexOf( activeRow );
+				let nextRowIndex;
+
+				if ( keyCode === UP ) {
+					nextRowIndex = Math.max( 0, currentRowIndex - 1 );
+				} else {
+					nextRowIndex = Math.min(
+						currentRowIndex + 1,
+						rows.length - 1
+					);
+				}
+
+				// Focus is either at the top or bottom edge of the grid. Do nothing.
+				if ( nextRowIndex === currentRowIndex ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will start navigating horizontally when reaching the vertical
+					// bounds of a table.
+					event.preventDefault();
+					return;
+				}
+
+				// Get the focusables in the next row.
+				const focusablesInNextRow = getRowFocusables(
+					rows[ nextRowIndex ]
+				);
+
+				// If for some reason there are no focusables in the next row, do nothing.
+				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will still focus text when using arrow keys, while this
+					// component should limit navigation to focusables.
+					event.preventDefault();
+					return;
+				}
+
+				// Try to focus the element in the next row that's at a similar column to the activeElement.
+				const nextIndex = Math.min(
+					currentColumnIndex,
+					focusablesInNextRow.length - 1
+				);
+				focusablesInNextRow[ nextIndex ].focus();
+
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
+				event.preventDefault();
+			} else if ( ( [ HOME, END ] as number[] ).includes( keyCode ) ) {
+				// Calculate the rowIndex of the next row.
+				const rows = Array.from(
+					treeGridElement.querySelectorAll< HTMLElement >(
+						'[role="row"]'
+					)
+				);
+				const currentRowIndex = rows.indexOf( activeRow );
+				let nextRowIndex;
+
+				if ( keyCode === HOME ) {
+					nextRowIndex = 0;
+				} else {
+					nextRowIndex = rows.length - 1;
+				}
+
+				// Focus is either at the top or bottom edge of the grid. Do nothing.
+				if ( nextRowIndex === currentRowIndex ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will start navigating horizontally when reaching the vertical
+					// bounds of a table.
+					event.preventDefault();
+					return;
+				}
+
+				// Get the focusables in the next row.
+				const focusablesInNextRow = getRowFocusables(
+					rows[ nextRowIndex ]
+				);
+
+				// If for some reason there are no focusables in the next row, do nothing.
+				if ( ! focusablesInNextRow || ! focusablesInNextRow.length ) {
+					// Prevent key use for anything else. For example, Voiceover
+					// will still focus text when using arrow keys, while this
+					// component should limit navigation to focusables.
+					event.preventDefault();
+					return;
+				}
+
+				// Try to focus the element in the next row that's at a similar column to the activeElement.
+				const nextIndex = Math.min(
+					currentColumnIndex,
+					focusablesInNextRow.length - 1
+				);
+				focusablesInNextRow[ nextIndex ].focus();
+
+				// Let consumers know the row that was originally focused,
+				// and the row that is now in focus.
+				onFocusRow( event, activeRow, rows[ nextRowIndex ] );
+
+				// Prevent key use for anything else. This ensures Voiceover
+				// doesn't try to handle key navigation.
+				event.preventDefault();
+			}
+		},
+		[ onExpandRow, onCollapseRow, onFocusRow ]
+	);
+
+	/* Disable reason: A treegrid is implemented using a table element. */
+	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+	return (
+		<RovingTabIndexContainer>
+			{
+				// Prevent browser mode from triggering in NVDA by wrapping List View
+				// in a role=application wrapper.
+				// see: https://github.com/WordPress/gutenberg/issues/43729
+			 }
+			<div role="application" aria-label={ applicationAriaLabel }>
+				<table
+					{ ...props }
+					role="treegrid"
+					onKeyDown={ onKeyDown }
+					ref={ ref }
+				>
+					<tbody>{ children }</tbody>
+				</table>
+			</div>
+		</RovingTabIndexContainer>
+	);
+	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
+}
+
+/**
+ * `TreeGrid` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * A tree grid is a hierarchical 2 dimensional UI component, for example it could be
+ * used to implement a file system browser.
+ *
+ * A tree grid allows the user to navigate using arrow keys.
+ * Up/down to navigate vertically across rows, and left/right to navigate horizontally
+ * between focusables in a row.
+ *
+ * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used
+ * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid.
+ *
+ * ```jsx
+ * function TreeMenu() {
+ * 	return (
+ * 		<TreeGrid>
+ * 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 			<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 			<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onSelect } { ...props }>Select</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 				<TreeGridCell>
+ * 					{ ( props ) => (
+ * 						<Button onClick={ onMove } { ...props }>Move</Button>
+ * 					) }
+ * 				</TreeGridCell>
+ * 			</TreeGridRow>
+ * 		</TreeGrid>
+ * 	);
+ * }
+ * ```
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+export const TreeGrid = forwardRef( UnforwardedTreeGrid );
+
+export default TreeGrid;
+export { default as TreeGridRow } from './row';
+export { default as TreeGridCell } from './cell';
+export { default as TreeGridItem } from './item';
diff --git a/packages/components/src/tree-grid/item.js b/packages/components/src/tree-grid/item.js
deleted file mode 100644
index 1d79b5640731b3..00000000000000
--- a/packages/components/src/tree-grid/item.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RovingTabIndexItem from './roving-tab-index-item';
-
-export default forwardRef( function TreeGridItem(
-	{ children, ...props },
-	ref
-) {
-	return (
-		<RovingTabIndexItem ref={ ref } { ...props }>
-			{ children }
-		</RovingTabIndexItem>
-	);
-} );
diff --git a/packages/components/src/tree-grid/item.tsx b/packages/components/src/tree-grid/item.tsx
new file mode 100644
index 00000000000000..7e32fb346248fa
--- /dev/null
+++ b/packages/components/src/tree-grid/item.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RovingTabIndexItem from './roving-tab-index-item';
+import type { RovingTabIndexItemProps } from './types';
+
+function UnforwardedTreeGridItem(
+	{ children, ...props }: RovingTabIndexItemProps,
+	ref: React.ForwardedRef< any >
+) {
+	return (
+		<RovingTabIndexItem ref={ ref } { ...props }>
+			{ children }
+		</RovingTabIndexItem>
+	);
+}
+
+/**
+ * `TreeGridItem` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+export const TreeGridItem = forwardRef( UnforwardedTreeGridItem );
+
+export default TreeGridItem;
diff --git a/packages/components/src/tree-grid/roving-tab-index-context.js b/packages/components/src/tree-grid/roving-tab-index-context.js
deleted file mode 100644
index 90c3ca16704d74..00000000000000
--- a/packages/components/src/tree-grid/roving-tab-index-context.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-const RovingTabIndexContext = createContext();
-export const useRovingTabIndexContext = () =>
-	useContext( RovingTabIndexContext );
-export const RovingTabIndexProvider = RovingTabIndexContext.Provider;
diff --git a/packages/components/src/tree-grid/roving-tab-index-context.ts b/packages/components/src/tree-grid/roving-tab-index-context.ts
new file mode 100644
index 00000000000000..a0ff4ae486df45
--- /dev/null
+++ b/packages/components/src/tree-grid/roving-tab-index-context.ts
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+const RovingTabIndexContext = createContext<
+	| {
+			lastFocusedElement: HTMLElement | undefined;
+			setLastFocusedElement: React.Dispatch<
+				React.SetStateAction< HTMLElement | undefined >
+			>;
+	  }
+	| undefined
+>( undefined );
+export const useRovingTabIndexContext = () =>
+	useContext( RovingTabIndexContext );
+export const RovingTabIndexProvider = RovingTabIndexContext.Provider;
diff --git a/packages/components/src/tree-grid/roving-tab-index-item.js b/packages/components/src/tree-grid/roving-tab-index-item.js
deleted file mode 100644
index 1ac76950d038d5..00000000000000
--- a/packages/components/src/tree-grid/roving-tab-index-item.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useRovingTabIndexContext } from './roving-tab-index-context';
-
-export default forwardRef( function RovingTabIndexItem(
-	{ children, as: Component, ...props },
-	forwardedRef
-) {
-	const localRef = useRef();
-	const ref = forwardedRef || localRef;
-	const { lastFocusedElement, setLastFocusedElement } =
-		useRovingTabIndexContext();
-	let tabIndex;
-
-	if ( lastFocusedElement ) {
-		tabIndex = lastFocusedElement === ref.current ? 0 : -1;
-	}
-
-	const onFocus = ( event ) => setLastFocusedElement( event.target );
-	const allProps = { ref, tabIndex, onFocus, ...props };
-
-	if ( typeof children === 'function' ) {
-		return children( allProps );
-	}
-
-	return <Component { ...allProps }>{ children }</Component>;
-} );
diff --git a/packages/components/src/tree-grid/roving-tab-index-item.tsx b/packages/components/src/tree-grid/roving-tab-index-item.tsx
new file mode 100644
index 00000000000000..d5ed3410ddf684
--- /dev/null
+++ b/packages/components/src/tree-grid/roving-tab-index-item.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useRovingTabIndexContext } from './roving-tab-index-context';
+import type { RovingTabIndexItemProps } from './types';
+
+export const RovingTabIndexItem = forwardRef(
+	function UnforwardedRovingTabIndexItem(
+		{ children, as: Component, ...props }: RovingTabIndexItemProps,
+		forwardedRef: React.ForwardedRef< any >
+	) {
+		const localRef = useRef< any >();
+		const ref = forwardedRef || localRef;
+		// @ts-expect-error - We actually want to throw an error if this is undefined.
+		const { lastFocusedElement, setLastFocusedElement } =
+			useRovingTabIndexContext();
+		let tabIndex;
+
+		if ( lastFocusedElement ) {
+			tabIndex =
+				lastFocusedElement ===
+				// TODO: The original implementation simply used `ref.current` here, assuming
+				// that a forwarded ref would always be an object, which is not necessarily true.
+				// This workaround maintains the original runtime behavior in a type-safe way,
+				// but should be revisited.
+				( 'current' in ref ? ref.current : undefined )
+					? 0
+					: -1;
+		}
+
+		const onFocus: React.FocusEventHandler< HTMLElement > = ( event ) =>
+			setLastFocusedElement?.( event.target );
+		const allProps = { ref, tabIndex, onFocus, ...props };
+
+		if ( typeof children === 'function' ) {
+			return children( allProps );
+		}
+
+		if ( ! Component ) {
+			return null;
+		}
+
+		return <Component { ...allProps }>{ children }</Component>;
+	}
+);
+
+export default RovingTabIndexItem;
diff --git a/packages/components/src/tree-grid/roving-tab-index.js b/packages/components/src/tree-grid/roving-tab-index.js
deleted file mode 100644
index b390c70f291d4d..00000000000000
--- a/packages/components/src/tree-grid/roving-tab-index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { RovingTabIndexProvider } from './roving-tab-index-context';
-
-/**
- * Provider for adding roving tab index behaviors to tree grid structures.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- *
- * @param {Object}    props          Component props.
- * @param {WPElement} props.children Children to be rendered
- */
-export default function RovingTabIndex( { children } ) {
-	const [ lastFocusedElement, setLastFocusedElement ] = useState();
-
-	// Use `useMemo` to avoid creation of a new object for the providerValue
-	// on every render. Only create a new object when the `lastFocusedElement`
-	// value changes.
-	const providerValue = useMemo(
-		() => ( { lastFocusedElement, setLastFocusedElement } ),
-		[ lastFocusedElement ]
-	);
-
-	return (
-		<RovingTabIndexProvider value={ providerValue }>
-			{ children }
-		</RovingTabIndexProvider>
-	);
-}
diff --git a/packages/components/src/tree-grid/roving-tab-index.tsx b/packages/components/src/tree-grid/roving-tab-index.tsx
new file mode 100644
index 00000000000000..6d6d989fbc3ffa
--- /dev/null
+++ b/packages/components/src/tree-grid/roving-tab-index.tsx
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { RovingTabIndexProvider } from './roving-tab-index-context';
+
+/**
+ * Provider for adding roving tab index behaviors to tree grid structures.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
+ */
+export default function RovingTabIndex( {
+	children,
+}: {
+	children: React.ReactNode;
+} ) {
+	const [ lastFocusedElement, setLastFocusedElement ] =
+		useState< HTMLElement >();
+
+	// Use `useMemo` to avoid creation of a new object for the providerValue
+	// on every render. Only create a new object when the `lastFocusedElement`
+	// value changes.
+	const providerValue = useMemo(
+		() => ( { lastFocusedElement, setLastFocusedElement } ),
+		[ lastFocusedElement ]
+	);
+
+	return (
+		<RovingTabIndexProvider value={ providerValue }>
+			{ children }
+		</RovingTabIndexProvider>
+	);
+}
diff --git a/packages/components/src/tree-grid/row.js b/packages/components/src/tree-grid/row.js
deleted file mode 100644
index 744055194ad226..00000000000000
--- a/packages/components/src/tree-grid/row.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-function TreeGridRow(
-	{ children, level, positionInSet, setSize, isExpanded, ...props },
-	ref
-) {
-	return (
-		// Disable reason: Due to an error in the ARIA 1.1 specification, the
-		// aria-posinset and aria-setsize properties are not supported on row
-		// elements. This is being corrected in ARIA 1.2. Consequently, the
-		// linting rule fails when validating this markup.
-		//
-		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
-		<tr
-			{ ...props }
-			ref={ ref }
-			role="row"
-			aria-level={ level }
-			aria-posinset={ positionInSet }
-			aria-setsize={ setSize }
-			aria-expanded={ isExpanded }
-		>
-			{ children }
-		</tr>
-	);
-}
-
-export default forwardRef( TreeGridRow );
diff --git a/packages/components/src/tree-grid/row.tsx b/packages/components/src/tree-grid/row.tsx
new file mode 100644
index 00000000000000..a6ea0624fa6a86
--- /dev/null
+++ b/packages/components/src/tree-grid/row.tsx
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import type { TreeGridRowProps } from './types';
+
+function UnforwardedTreeGridRow(
+	{
+		children,
+		level,
+		positionInSet,
+		setSize,
+		isExpanded,
+		...props
+	}: WordPressComponentProps< TreeGridRowProps, 'tr', false >,
+	ref: React.ForwardedRef< HTMLTableRowElement >
+) {
+	return (
+		<tr
+			{ ...props }
+			ref={ ref }
+			role="row"
+			aria-level={ level }
+			aria-posinset={ positionInSet }
+			aria-setsize={ setSize }
+			aria-expanded={ isExpanded }
+		>
+			{ children }
+		</tr>
+	);
+}
+
+/**
+ * `TreeGridRow` is used to create a tree hierarchy.
+ * It is not a visually styled component, but instead helps with adding
+ * keyboard navigation and roving tab index behaviors to tree grid structures.
+ *
+ * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html}
+ */
+export const TreeGridRow = forwardRef( UnforwardedTreeGridRow );
+
+export default TreeGridRow;
diff --git a/packages/components/src/tree-grid/stories/index.js b/packages/components/src/tree-grid/stories/index.js
deleted file mode 100644
index e1a75448f39791..00000000000000
--- a/packages/components/src/tree-grid/stories/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGrid, { TreeGridRow, TreeGridCell } from '../';
-import { Button } from '../../';
-
-export default {
-	title: 'Components (Experimental)/TreeGrid',
-	component: TreeGrid,
-};
-
-const groceries = [
-	{
-		name: 'Fruit',
-		types: [
-			{
-				name: 'Apple',
-			},
-			{
-				name: 'Orange',
-			},
-			{
-				name: 'Pear',
-			},
-		],
-	},
-	{
-		name: 'Vegetable',
-		types: [
-			{
-				name: 'Cucumber',
-			},
-			{
-				name: 'Parsnip',
-			},
-			{
-				name: 'Pumpkin',
-			},
-		],
-	},
-];
-
-const Descender = ( { level } ) => {
-	if ( level === 1 ) {
-		return '';
-	}
-	const indentation = '\u00A0'.repeat( ( level - 1 ) * 4 );
-
-	return <span aria-hidden="true">{ indentation + '├ ' }</span>;
-};
-
-const Rows = ( { items, level = 1 } ) => {
-	return items.map( ( item, index ) => {
-		const hasChildren = !! item.types && !! item.types.length;
-		return (
-			<Fragment key={ item.name }>
-				<TreeGridRow
-					positionInSet={ index + 1 }
-					setSize={ items.length }
-					level={ level }
-				>
-					<TreeGridCell>
-						{ ( props ) => (
-							<>
-								<Descender level={ level } />
-								<Button variant="primary" { ...props }>
-									{ item.name }
-								</Button>
-							</>
-						) }
-					</TreeGridCell>
-					<TreeGridCell>
-						{ ( props ) => (
-							<Button variant="secondary" { ...props }>
-								Move Up
-							</Button>
-						) }
-					</TreeGridCell>
-					<TreeGridCell>
-						{ ( props ) => (
-							<Button variant="secondary" { ...props }>
-								Move Down
-							</Button>
-						) }
-					</TreeGridCell>
-				</TreeGridRow>
-				{ hasChildren && (
-					<Rows items={ item.types } level={ level + 1 } />
-				) }
-			</Fragment>
-		);
-	} );
-};
-
-export const _default = () => {
-	return (
-		<TreeGrid>
-			<Rows items={ groceries } />
-		</TreeGrid>
-	);
-};
diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx
new file mode 100644
index 00000000000000..f91ba4631d3209
--- /dev/null
+++ b/packages/components/src/tree-grid/stories/index.story.tsx
@@ -0,0 +1,146 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeGrid, { TreeGridRow, TreeGridCell } from '..';
+import { Button } from '../../button';
+import InputControl from '../../input-control';
+
+const meta: Meta< typeof TreeGrid > = {
+	title: 'Components (Experimental)/Navigation/TreeGrid',
+	id: 'components-experimental-treegrid',
+	component: TreeGrid,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { TreeGridRow, TreeGridCell },
+	argTypes: {
+		children: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+	},
+};
+export default meta;
+
+const groceries = [
+	{
+		name: 'Fruit',
+		types: [
+			{
+				name: 'Apple',
+			},
+			{
+				name: 'Orange',
+			},
+			{
+				name: 'Pear',
+			},
+		],
+	},
+	{
+		name: 'Vegetable',
+		types: [
+			{
+				name: 'Cucumber',
+			},
+			{
+				name: 'Parsnip',
+			},
+			{
+				name: 'Pumpkin',
+			},
+		],
+	},
+];
+
+const Descender = ( { level }: { level: number } ) => {
+	if ( level === 1 ) {
+		return null;
+	}
+	const indentation = '\u00A0'.repeat( ( level - 1 ) * 4 );
+
+	return <span aria-hidden="true">{ indentation + '├ ' }</span>;
+};
+
+type Item = {
+	name: string;
+	types?: Item[];
+};
+
+const Rows = ( {
+	items = [],
+	level = 1,
+}: {
+	items?: Item[];
+	level?: number;
+} ) => {
+	return (
+		<>
+			{ items.map( ( item, index ) => {
+				const hasChildren = !! item.types && !! item.types.length;
+				return (
+					<Fragment key={ item.name }>
+						<TreeGridRow
+							positionInSet={ index + 1 }
+							setSize={ items.length }
+							level={ level }
+							isExpanded
+						>
+							<TreeGridCell>
+								{ ( props ) => (
+									<>
+										<Descender level={ level } />
+										<Button variant="primary" { ...props }>
+											{ item.name }
+										</Button>
+									</>
+								) }
+							</TreeGridCell>
+							<TreeGridCell>
+								{ ( props ) => (
+									<InputControl
+										label="Description"
+										hideLabelFromVision
+										placeholder="Description"
+										{ ...props }
+									/>
+								) }
+							</TreeGridCell>
+							<TreeGridCell>
+								{ ( props ) => (
+									<InputControl
+										label="Notes"
+										hideLabelFromVision
+										placeholder="Notes"
+										{ ...props }
+									/>
+								) }
+							</TreeGridCell>
+						</TreeGridRow>
+						{ hasChildren && (
+							<Rows items={ item.types } level={ level + 1 } />
+						) }
+					</Fragment>
+				);
+			} ) }
+		</>
+	);
+};
+
+const Template: StoryFn< typeof TreeGrid > = ( args ) => (
+	<TreeGrid { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	children: <Rows items={ groceries } />,
+};
diff --git a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap b/packages/components/src/tree-grid/test/__snapshots__/cell.tsx.snap
similarity index 100%
rename from packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
rename to packages/components/src/tree-grid/test/__snapshots__/cell.tsx.snap
diff --git a/packages/components/src/tree-grid/test/__snapshots__/index.js.snap b/packages/components/src/tree-grid/test/__snapshots__/index.js.snap
deleted file mode 100644
index f493168bdb933e..00000000000000
--- a/packages/components/src/tree-grid/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;
diff --git a/packages/components/src/tree-grid/test/__snapshots__/index.tsx.snap b/packages/components/src/tree-grid/test/__snapshots__/index.tsx.snap
new file mode 100644
index 00000000000000..c18a8851385039
--- /dev/null
+++ b/packages/components/src/tree-grid/test/__snapshots__/index.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;
diff --git a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index-item.js.snap b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap
similarity index 100%
rename from packages/components/src/tree-grid/test/__snapshots__/roving-tab-index-item.js.snap
rename to packages/components/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap
diff --git a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap
similarity index 100%
rename from packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap
rename to packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap
diff --git a/packages/components/src/tree-grid/test/__snapshots__/row.js.snap b/packages/components/src/tree-grid/test/__snapshots__/row.tsx.snap
similarity index 100%
rename from packages/components/src/tree-grid/test/__snapshots__/row.js.snap
rename to packages/components/src/tree-grid/test/__snapshots__/row.tsx.snap
diff --git a/packages/components/src/tree-grid/test/cell.js b/packages/components/src/tree-grid/test/cell.js
deleted file mode 100644
index 7e62f751512d24..00000000000000
--- a/packages/components/src/tree-grid/test/cell.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGrid from '../';
-import TreeGridCell from '../cell';
-
-const TestButton = forwardRef( ( { ...props }, ref ) => (
-	<button { ...props } ref={ ref }></button>
-) );
-
-describe( 'TreeGridCell', () => {
-	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
-		expect( () =>
-			render(
-				<TreeGridCell>
-					{ ( props ) => (
-						<TestButton className="my-button" { ...props }>
-							Click Me!
-						</TestButton>
-					) }
-				</TreeGridCell>
-			)
-		).toThrow();
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'uses a child render function to render children', () => {
-		const { container } = render(
-			<TreeGrid>
-				<tr>
-					<TreeGridCell>
-						{ ( props ) => (
-							<TestButton className="my-button" { ...props }>
-								Click Me!
-							</TestButton>
-						) }
-					</TreeGridCell>
-				</tr>
-			</TreeGrid>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/tree-grid/test/cell.tsx b/packages/components/src/tree-grid/test/cell.tsx
new file mode 100644
index 00000000000000..e0791d6206dc7b
--- /dev/null
+++ b/packages/components/src/tree-grid/test/cell.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeGrid from '..';
+import TreeGridCell from '../cell';
+
+const TestButton = forwardRef(
+	(
+		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
+		ref: React.ForwardedRef< HTMLButtonElement >
+	) => <button { ...props } ref={ ref }></button>
+);
+
+describe( 'TreeGridCell', () => {
+	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
+		expect( () =>
+			render(
+				<TreeGridCell>
+					{ ( props ) => (
+						<TestButton className="my-button" { ...props }>
+							Click Me!
+						</TestButton>
+					) }
+				</TreeGridCell>
+			)
+		).toThrow();
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'uses a child render function to render children', () => {
+		const { container } = render(
+			<TreeGrid>
+				<tr>
+					<TreeGridCell>
+						{ ( props ) => (
+							<TestButton className="my-button" { ...props }>
+								Click Me!
+							</TestButton>
+						) }
+					</TreeGridCell>
+				</tr>
+			</TreeGrid>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/tree-grid/test/index.js b/packages/components/src/tree-grid/test/index.js
deleted file mode 100644
index 679000b91204bc..00000000000000
--- a/packages/components/src/tree-grid/test/index.js
+++ /dev/null
@@ -1,317 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { LEFT, RIGHT, UP, DOWN, HOME, END } from '@wordpress/keycodes';
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeGrid from '../';
-import TreeGridRow from '../row';
-import TreeGridCell from '../cell';
-
-const TestButton = forwardRef( ( { ...props }, ref ) => (
-	<button { ...props } ref={ ref }></button>
-) );
-
-describe( 'TreeGrid', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
-	describe( 'simple rendering', () => {
-		it( 'renders a table, tbody and any child elements', () => {
-			const { container } = render(
-				<TreeGrid>
-					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
-						<TreeGridCell withoutGridItem>Test</TreeGridCell>
-					</TreeGridRow>
-				</TreeGrid>
-			);
-
-			expect( container.innerHTML ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'onExpandRow', () => {
-		it( 'should call onExpandRow when pressing Right Arrow on a collapsed row', () => {
-			const onExpandRow = jest.fn();
-
-			render(
-				<TreeGrid onExpandRow={ onExpandRow }>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 1 }
-						setSize={ 3 }
-						isExpanded={ false }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton aria-expanded="false">Row 1</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 2 }
-						setSize={ 3 }
-						isExpanded={ false }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton>Row 2</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 3 }
-						setSize={ 3 }
-						isExpanded={ false }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton>Row 3</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-				</TreeGrid>
-			);
-
-			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
-				key: 'ArrowRight',
-				keyCode: RIGHT,
-				currentTarget: row1Element,
-			} );
-
-			expect( onExpandRow ).toHaveBeenCalledWith( row1Element );
-		} );
-	} );
-
-	describe( 'onCollapseRow', () => {
-		it( 'should call onCollapseRow when pressing Left Arrow on an expanded row', () => {
-			const onCollapseRow = jest.fn();
-
-			render(
-				<TreeGrid onCollapseRow={ onCollapseRow }>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 1 }
-						setSize={ 3 }
-						isExpanded={ true }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton aria-expanded="true">Row 1</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 2 }
-						setSize={ 3 }
-						isExpanded={ false }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton>Row 2</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-					<TreeGridRow
-						level={ 1 }
-						positionInSet={ 3 }
-						setSize={ 3 }
-						isExpanded={ false }
-					>
-						<TreeGridCell withoutGridItem>
-							<TestButton>Row 3</TestButton>
-						</TreeGridCell>
-					</TreeGridRow>
-				</TreeGrid>
-			);
-
-			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
-				key: 'ArrowLeft',
-				keyCode: LEFT,
-				currentTarget: row1Element,
-			} );
-
-			expect( onCollapseRow ).toHaveBeenCalledWith( row1Element );
-		} );
-	} );
-
-	describe( 'onFocusRow', () => {
-		const TestTree = ( { onFocusRow } ) => (
-			<TreeGrid onFocusRow={ onFocusRow }>
-				<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 3 }>
-					<TreeGridCell withoutGridItem>
-						<TestButton>Row 1</TestButton>
-					</TreeGridCell>
-				</TreeGridRow>
-				<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 3 }>
-					<TreeGridCell withoutGridItem>
-						<TestButton>Row 2</TestButton>
-					</TreeGridCell>
-				</TreeGridRow>
-				<TreeGridRow level={ 1 } positionInSet={ 3 } setSize={ 3 }>
-					<TreeGridCell withoutGridItem>
-						<TestButton>Row 3</TestButton>
-					</TreeGridCell>
-				</TreeGridRow>
-			</TreeGrid>
-		);
-
-		it( 'should call onFocusRow with event, start and end nodes when pressing Down Arrow', () => {
-			const onFocusRow = jest.fn();
-			render( <TestTree onFocusRow={ onFocusRow } /> );
-
-			screen.getByText( 'Row 2' ).focus();
-
-			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
-			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
-				key: 'ArrowDown',
-				keyCode: DOWN,
-				currentTarget: row2Element,
-			} );
-
-			expect( onFocusRow ).toHaveBeenCalledWith(
-				expect.objectContaining( { key: 'ArrowDown', keyCode: DOWN } ),
-				row2Element,
-				row3Element
-			);
-		} );
-
-		it( 'should call onFocusRow with event, start and end nodes when pressing End', () => {
-			const onFocusRow = jest.fn();
-			render( <TestTree onFocusRow={ onFocusRow } /> );
-
-			screen.getByText( 'Row 1' ).focus();
-
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
-				key: 'End',
-				keyCode: END,
-				currentTarget: row1Element,
-			} );
-
-			expect( onFocusRow ).toHaveBeenCalledWith(
-				expect.objectContaining( { key: 'End', keyCode: END } ),
-				row1Element,
-				row3Element
-			);
-		} );
-
-		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
-			const onFocusRow = jest.fn();
-			render( <TestTree onFocusRow={ onFocusRow } /> );
-
-			screen.getByText( 'Row 2' ).focus();
-
-			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
-				key: 'ArrowUp',
-				keyCode: UP,
-				currentTarget: row2Element,
-			} );
-
-			expect( onFocusRow ).toHaveBeenCalledWith(
-				expect.objectContaining( { key: 'ArrowUp', keyCode: UP } ),
-				row2Element,
-				row1Element
-			);
-		} );
-
-		it( 'should call onFocusRow with event, start and end nodes when pressing Home', () => {
-			const onFocusRow = jest.fn();
-			render( <TestTree onFocusRow={ onFocusRow } /> );
-
-			screen.getByText( 'Row 3' ).focus();
-
-			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
-				key: 'Home',
-				keyCode: HOME,
-				currentTarget: row3Element,
-			} );
-
-			expect( onFocusRow ).toHaveBeenCalledWith(
-				expect.objectContaining( { key: 'Home', keyCode: HOME } ),
-				row3Element,
-				row1Element
-			);
-		} );
-
-		it( 'should call onFocusRow when shift key is held', () => {
-			const onFocusRow = jest.fn();
-			render( <TestTree onFocusRow={ onFocusRow } /> );
-
-			screen.getByText( 'Row 2' ).focus();
-
-			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
-			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
-
-			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
-				key: 'ArrowUp',
-				keyCode: UP,
-				currentTarget: row2Element,
-				shiftKey: true,
-			} );
-
-			expect( onFocusRow ).toHaveBeenLastCalledWith(
-				expect.objectContaining( {
-					key: 'ArrowUp',
-					keyCode: UP,
-					shiftKey: true,
-				} ),
-				row2Element,
-				row1Element
-			);
-
-			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
-				key: 'ArrowDown',
-				keyCode: DOWN,
-				currentTarget: row1Element,
-				shiftKey: true,
-			} );
-
-			expect( onFocusRow ).toHaveBeenLastCalledWith(
-				expect.objectContaining( {
-					key: 'ArrowDown',
-					keyCode: DOWN,
-					shiftKey: true,
-				} ),
-				row1Element,
-				row2Element
-			);
-		} );
-	} );
-} );
diff --git a/packages/components/src/tree-grid/test/index.tsx b/packages/components/src/tree-grid/test/index.tsx
new file mode 100644
index 00000000000000..b4b9d5d370fb44
--- /dev/null
+++ b/packages/components/src/tree-grid/test/index.tsx
@@ -0,0 +1,325 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { LEFT, RIGHT, UP, DOWN, HOME, END } from '@wordpress/keycodes';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeGrid from '..';
+import TreeGridRow from '../row';
+import TreeGridCell from '../cell';
+
+const TestButton = forwardRef(
+	(
+		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
+		ref: React.ForwardedRef< HTMLButtonElement >
+	) => <button { ...props } ref={ ref }></button>
+);
+
+describe( 'TreeGrid', () => {
+	const originalGetClientRects = window.Element.prototype.getClientRects;
+
+	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
+	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
+	const mockedGetClientRects = jest.fn( () => [
+		{
+			x: 0,
+			y: 0,
+			width: 100,
+			height: 100,
+		},
+	] );
+
+	beforeAll( () => {
+		// @ts-expect-error - This is just a mock
+		window.Element.prototype.getClientRects =
+			jest.fn( mockedGetClientRects );
+	} );
+
+	afterAll( () => {
+		window.Element.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	describe( 'simple rendering', () => {
+		it( 'renders a table, tbody and any child elements', () => {
+			const { container } = render(
+				<TreeGrid>
+					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
+						<TreeGridCell withoutGridItem>Test</TreeGridCell>
+					</TreeGridRow>
+				</TreeGrid>
+			);
+
+			expect( container.innerHTML ).toMatchSnapshot();
+		} );
+	} );
+
+	describe( 'onExpandRow', () => {
+		it( 'should call onExpandRow when pressing Right Arrow on a collapsed row', () => {
+			const onExpandRow = jest.fn();
+
+			render(
+				<TreeGrid onExpandRow={ onExpandRow }>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton aria-expanded="false">Row 1</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 2 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 2</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 3 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 3</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+				</TreeGrid>
+			);
+
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'ArrowRight',
+				keyCode: RIGHT,
+				currentTarget: row1Element,
+			} );
+
+			expect( onExpandRow ).toHaveBeenCalledWith( row1Element );
+		} );
+	} );
+
+	describe( 'onCollapseRow', () => {
+		it( 'should call onCollapseRow when pressing Left Arrow on an expanded row', () => {
+			const onCollapseRow = jest.fn();
+
+			render(
+				<TreeGrid onCollapseRow={ onCollapseRow }>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 3 }
+						isExpanded
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton aria-expanded="true">Row 1</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 2 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 2</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+					<TreeGridRow
+						level={ 1 }
+						positionInSet={ 3 }
+						setSize={ 3 }
+						isExpanded={ false }
+					>
+						<TreeGridCell withoutGridItem>
+							<TestButton>Row 3</TestButton>
+						</TreeGridCell>
+					</TreeGridRow>
+				</TreeGrid>
+			);
+
+			screen.getByText( 'Row 1' ).focus();
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'ArrowLeft',
+				keyCode: LEFT,
+				currentTarget: row1Element,
+			} );
+
+			expect( onCollapseRow ).toHaveBeenCalledWith( row1Element );
+		} );
+	} );
+
+	describe( 'onFocusRow', () => {
+		const TestTree = ( {
+			onFocusRow,
+		}: {
+			onFocusRow: React.ComponentProps< typeof TreeGrid >[ 'onFocusRow' ];
+		} ) => (
+			<TreeGrid onFocusRow={ onFocusRow }>
+				<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 1</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
+				<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 2</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
+				<TreeGridRow level={ 1 } positionInSet={ 3 } setSize={ 3 }>
+					<TreeGridCell withoutGridItem>
+						<TestButton>Row 3</TestButton>
+					</TreeGridCell>
+				</TreeGridRow>
+			</TreeGrid>
+		);
+
+		it( 'should call onFocusRow with event, start and end nodes when pressing Down Arrow', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowDown',
+				keyCode: DOWN,
+				currentTarget: row2Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'ArrowDown', keyCode: DOWN } ),
+				row2Element,
+				row3Element
+			);
+		} );
+
+		it( 'should call onFocusRow with event, start and end nodes when pressing End', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 1' ).focus();
+
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'End',
+				keyCode: END,
+				currentTarget: row1Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'End', keyCode: END } ),
+				row1Element,
+				row3Element
+			);
+		} );
+
+		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowUp',
+				keyCode: UP,
+				currentTarget: row2Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'ArrowUp', keyCode: UP } ),
+				row2Element,
+				row1Element
+			);
+		} );
+
+		it( 'should call onFocusRow with event, start and end nodes when pressing Home', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 3' ).focus();
+
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
+				key: 'Home',
+				keyCode: HOME,
+				currentTarget: row3Element,
+			} );
+
+			expect( onFocusRow ).toHaveBeenCalledWith(
+				expect.objectContaining( { key: 'Home', keyCode: HOME } ),
+				row3Element,
+				row1Element
+			);
+		} );
+
+		it( 'should call onFocusRow when shift key is held', () => {
+			const onFocusRow = jest.fn();
+			render( <TestTree onFocusRow={ onFocusRow } /> );
+
+			screen.getByText( 'Row 2' ).focus();
+
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+
+			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
+				key: 'ArrowUp',
+				keyCode: UP,
+				currentTarget: row2Element,
+				shiftKey: true,
+			} );
+
+			expect( onFocusRow ).toHaveBeenLastCalledWith(
+				expect.objectContaining( {
+					key: 'ArrowUp',
+					keyCode: UP,
+					shiftKey: true,
+				} ),
+				row2Element,
+				row1Element
+			);
+
+			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
+				key: 'ArrowDown',
+				keyCode: DOWN,
+				currentTarget: row1Element,
+				shiftKey: true,
+			} );
+
+			expect( onFocusRow ).toHaveBeenLastCalledWith(
+				expect.objectContaining( {
+					key: 'ArrowDown',
+					keyCode: DOWN,
+					shiftKey: true,
+				} ),
+				row1Element,
+				row2Element
+			);
+		} );
+	} );
+} );
diff --git a/packages/components/src/tree-grid/test/roving-tab-index-item.js b/packages/components/src/tree-grid/test/roving-tab-index-item.js
deleted file mode 100644
index 0f2c6bd58c7c60..00000000000000
--- a/packages/components/src/tree-grid/test/roving-tab-index-item.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RovingTabIndex from '../roving-tab-index';
-import RovingTabIndexItem from '../roving-tab-index-item';
-
-const TestButton = forwardRef( ( { ...props }, ref ) => (
-	<button { ...props } ref={ ref }></button>
-) );
-
-describe( 'RovingTabIndexItem', () => {
-	it( 'requires RovingTabIndex to be declared as a parent component somewhere in the component hierarchy', () => {
-		expect( () =>
-			render( <RovingTabIndexItem as={ TestButton } /> )
-		).toThrow();
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {
-		const { container } = render(
-			<RovingTabIndex>
-				<RovingTabIndexItem as={ TestButton } />
-			</RovingTabIndex>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'forwards props to the `as` component', () => {
-		const { container } = render(
-			<RovingTabIndex>
-				<RovingTabIndexItem as={ TestButton } className="my-button">
-					Click Me!
-				</RovingTabIndexItem>
-			</RovingTabIndex>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'allows children to be declared using a child render function as an alternative to `as`', () => {
-		const { container } = render(
-			<RovingTabIndex>
-				<RovingTabIndexItem>
-					{ ( props ) => (
-						<TestButton className="my-button" { ...props }>
-							Click Me!
-						</TestButton>
-					) }
-				</RovingTabIndexItem>
-			</RovingTabIndex>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/tree-grid/test/roving-tab-index-item.tsx b/packages/components/src/tree-grid/test/roving-tab-index-item.tsx
new file mode 100644
index 00000000000000..fe426d1bb5c535
--- /dev/null
+++ b/packages/components/src/tree-grid/test/roving-tab-index-item.tsx
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import RovingTabIndex from '../roving-tab-index';
+import RovingTabIndexItem from '../roving-tab-index-item';
+
+const TestButton = forwardRef(
+	(
+		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
+		ref: React.ForwardedRef< HTMLButtonElement >
+	) => <button { ...props } ref={ ref }></button>
+);
+
+describe( 'RovingTabIndexItem', () => {
+	it( 'requires RovingTabIndex to be declared as a parent component somewhere in the component hierarchy', () => {
+		expect( () =>
+			render( <RovingTabIndexItem as={ TestButton } /> )
+		).toThrow();
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'allows another component to be specified as the rendered component using the `as` prop', () => {
+		const { container } = render(
+			<RovingTabIndex>
+				<RovingTabIndexItem as={ TestButton } />
+			</RovingTabIndex>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'forwards props to the `as` component', () => {
+		const { container } = render(
+			<RovingTabIndex>
+				<RovingTabIndexItem as={ TestButton } className="my-button">
+					Click Me!
+				</RovingTabIndexItem>
+			</RovingTabIndex>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'allows children to be declared using a child render function as an alternative to `as`', () => {
+		const { container } = render(
+			<RovingTabIndex>
+				<RovingTabIndexItem>
+					{ ( props: React.ComponentProps< typeof TestButton > ) => (
+						<TestButton className="my-button" { ...props }>
+							Click Me!
+						</TestButton>
+					) }
+				</RovingTabIndexItem>
+			</RovingTabIndex>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/tree-grid/test/roving-tab-index.js b/packages/components/src/tree-grid/test/roving-tab-index.tsx
similarity index 100%
rename from packages/components/src/tree-grid/test/roving-tab-index.js
rename to packages/components/src/tree-grid/test/roving-tab-index.tsx
diff --git a/packages/components/src/tree-grid/test/row.js b/packages/components/src/tree-grid/test/row.js
deleted file mode 100644
index 77b092c0735224..00000000000000
--- a/packages/components/src/tree-grid/test/row.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import TreeGridRow from '../row';
-
-describe( 'TreeGridRow', () => {
-	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow level="1" positionInSet="1" setSize="1">
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'forwards other props to the rendered tr element', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow
-						className="my-row"
-						level="1"
-						positionInSet="1"
-						setSize="1"
-					>
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/tree-grid/test/row.tsx b/packages/components/src/tree-grid/test/row.tsx
new file mode 100644
index 00000000000000..d0cdf2c9b7aeeb
--- /dev/null
+++ b/packages/components/src/tree-grid/test/row.tsx
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TreeGridRow from '../row';
+
+describe( 'TreeGridRow', () => {
+	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
+		const { container } = render(
+			<table>
+				<tbody>
+					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
+			</table>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'forwards other props to the rendered tr element', () => {
+		const { container } = render(
+			<table>
+				<tbody>
+					<TreeGridRow
+						className="my-row"
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 1 }
+					>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
+			</table>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/components/src/tree-grid/types.ts b/packages/components/src/tree-grid/types.ts
new file mode 100644
index 00000000000000..f4946ba58ca8a0
--- /dev/null
+++ b/packages/components/src/tree-grid/types.ts
@@ -0,0 +1,123 @@
+export type TreeGridRowProps = {
+	/**
+	 * The children to be rendered in the row.
+	 */
+	children: React.ReactNode;
+	/**
+	 * An integer value designating the level in the hierarchical tree structure.
+	 * Counting starts at 1. A value of `1` indicates the root level of the structure.
+	 */
+	level: NonNullable< React.AriaAttributes[ 'aria-level' ] >;
+	/**
+	 * An integer value that represents the position in the set.
+	 * A set is the count of elements at a specific level. Counting starts at 1.
+	 */
+	positionInSet: NonNullable< React.AriaAttributes[ 'aria-posinset' ] >;
+	/**
+	 * An integer value that represents the total number of items in the set,
+	 * at this specific level of the hierarchy.
+	 */
+	setSize: NonNullable< React.AriaAttributes[ 'aria-setsize' ] >;
+	/**
+	 * An optional value that designates whether a row is expanded or collapsed.
+	 * Currently this value only sets the correct aria-expanded property on a row,
+	 * it has no other built-in behavior.
+	 *
+	 * If there is a need to implement `aria-expanded` elsewhere in the row, cell,
+	 * or element within a cell, you may pass `isExpanded={ undefined }`.
+	 * In order for keyboard navigation to continue working, add the
+	 * `data-expanded` attribute with either `true`/`false`. This allows the
+	 * `TreeGrid` component to still manage keyboard interactions while allowing
+	 * the `aria-expanded` attribute to be placed elsewhere.
+	 */
+	isExpanded?: boolean;
+};
+
+type RovingTabIndexItemPassThruProps = {
+	ref: React.ForwardedRef< any >;
+	tabIndex?: number;
+	onFocus?: React.FocusEventHandler< any >;
+	[ key: string ]: any;
+};
+
+export type RovingTabIndexItemProps = {
+	/**
+	 * A render function that receives the props necessary to make it participate in the
+	 * roving tabindex. Any extra props will also be passed through to this function.
+	 *
+	 * Props passed as an argument to the render prop must be passed to the child
+	 * focusable component/element within the cell. If a component is used, it must
+	 * correctly handle the `onFocus`, `tabIndex`, and `ref` props, passing these to the
+	 * element it renders. These props are used to handle the roving tabindex functionality
+	 * of the tree grid.
+	 *
+	 * ```jsx
+	 * <TreeGridCell>
+	 * 	{ ( props ) => (
+	 * 		<Button onClick={ doSomething } { ...props }>
+	 * 			Do something
+	 * 		</Button>
+	 * 	) }
+	 * </TreeGridCell>
+	 * ```
+	 */
+	children?: ( props: RovingTabIndexItemPassThruProps ) => JSX.Element;
+	/**
+	 * If `children` is not a function, this component will be used instead.
+	 */
+	as?: React.ComponentType< RovingTabIndexItemPassThruProps >;
+	[ key: string ]: any;
+};
+
+export type TreeGridCellProps =
+	| ( {
+			/**
+			 * Render `children` without wrapping it in a `TreeGridItem` component.
+			 * This means that `children` will not participate in the roving tabindex.
+			 *
+			 * @default false
+			 */
+			withoutGridItem?: false;
+	  } & NonNullable< Pick< RovingTabIndexItemProps, 'children' > > )
+	| {
+			children: React.ReactNode;
+			withoutGridItem: true;
+	  };
+
+export type TreeGridProps = {
+	/**
+	 * Label to use for the element with the `application` role.
+	 */
+	applicationAriaLabel?: string;
+	/**
+	 * The children to be rendered in the tree grid.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Callback to fire when row is expanded.
+	 *
+	 * @default noop
+	 */
+	onExpandRow?: ( row: HTMLElement ) => void;
+	/**
+	 * Callback to fire when row is collapsed.
+	 *
+	 * @default noop
+	 */
+	onCollapseRow?: ( row: HTMLElement ) => void;
+	/**
+	 * Callback that fires when focus is shifted from one row to another via
+	 * the Up and Down keys. Callback is also fired on Home and End keys which
+	 * move focus from the beginning row to the end row.
+	 *
+	 * The callback is passed the event, the start row element that the focus was on
+	 * originally, and the destination row element after the focus has moved.
+	 *
+	 * @default noop
+	 */
+	onFocusRow?: (
+		event: React.KeyboardEvent< HTMLTableElement >,
+		startRow: HTMLElement,
+		destinationRow: HTMLElement
+	) => void;
+};
diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md
index 3306dfb0b71316..3d26488478bd0c 100644
--- a/packages/components/src/tree-select/README.md
+++ b/packages/components/src/tree-select/README.md
@@ -7,14 +7,15 @@ TreeSelect component is used to generate select input fields.
 Render a user interface to select the parent page in a hierarchy of pages:
 
 ```jsx
+import { useState } from 'react';
 import { TreeSelect } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyTreeSelect = () => {
 	const [ page, setPage ] = useState( 'p21' );
 
 	return (
 		<TreeSelect
+		  __nextHasNoMarginBottom
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -89,3 +90,11 @@ An array containing the tree objects with the possible nodes the user can select
 
 -   Type: `Object[]`
 -   Required: No
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index b7e76cf53cc7ec..bd92807bff4cc9 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -1,24 +1,34 @@
-/**
- * External dependencies
- */
-import { unescape as unescapeString } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+
 /**
  * Internal dependencies
  */
 import { SelectControl } from '../select-control';
-import type { TreeSelectProps, Tree, SelectOptions, Truthy } from './types';
+import type { TreeSelectProps, Tree, Truthy } from './types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { ContextSystemProvider } from '../context';
+
+const CONTEXT_VALUE = {
+	BaseControl: {
+		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
+		// via the context system to override the value set by SelectControl.
+		_overrides: { __associatedWPComponentName: 'TreeSelect' },
+	},
+};
 
-function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
+function getSelectOptions(
+	tree: Tree[],
+	level = 0
+): NonNullable< TreeSelectProps[ 'options' ] > {
 	return tree.flatMap( ( treeNode ) => [
 		{
 			value: treeNode.id,
 			label:
-				'\u00A0'.repeat( level * 3 ) + unescapeString( treeNode.name ),
+				'\u00A0'.repeat( level * 3 ) + decodeEntities( treeNode.name ),
 		},
 		...getSelectOptions( treeNode.children || [], level + 1 ),
 	] );
@@ -27,7 +37,6 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
 /**
  * TreeSelect component is used to generate select input fields.
  *
- * @example
  * ```jsx
  * import { TreeSelect } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
@@ -37,6 +46,7 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
  *
  * 	return (
  * 		<TreeSelect
+ * 			__nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -72,15 +82,16 @@ function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
  * }
  * ```
  */
+export function TreeSelect( props: TreeSelectProps ) {
+	const {
+		label,
+		noOptionLabel,
+		onChange,
+		selectedId,
+		tree = [],
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp( props );
 
-export function TreeSelect( {
-	label,
-	noOptionLabel,
-	onChange,
-	selectedId,
-	tree = [],
-	...props
-}: TreeSelectProps ) {
 	const options = useMemo( () => {
 		return [
 			noOptionLabel && { value: '', label: noOptionLabel },
@@ -89,11 +100,13 @@ export function TreeSelect( {
 	}, [ noOptionLabel, tree ] );
 
 	return (
-		<SelectControl
-			{ ...{ label, options, onChange } }
-			value={ selectedId }
-			{ ...props }
-		/>
+		<ContextSystemProvider value={ CONTEXT_VALUE }>
+			<SelectControl
+				{ ...{ label, options, onChange } }
+				value={ selectedId }
+				{ ...restProps }
+			/>
+		</ContextSystemProvider>
 	);
 }
 
diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx
new file mode 100644
index 00000000000000..b43245e5e16213
--- /dev/null
+++ b/packages/components/src/tree-select/stories/index.story.tsx
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+import type { ComponentProps } from 'react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeSelect from '../';
+
+const meta: Meta< typeof TreeSelect > = {
+	title: 'Components/Selection & Input/Common/TreeSelect',
+	id: 'components-treeselect',
+	component: TreeSelect,
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		prefix: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		selectedId: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+
+export default meta;
+
+const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
+	const [ selection, setSelection ] =
+		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
+
+	return (
+		<TreeSelect
+			{ ...props }
+			onChange={ setSelection }
+			selectedId={ selection }
+		/>
+	);
+};
+
+export const Default = TreeSelectWithState.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	label: 'Label Text',
+	noOptionLabel: 'No parent page',
+	help: 'Help text to explain the select control.',
+	tree: [
+		{
+			name: 'Page 1',
+			id: 'p1',
+			children: [
+				{ name: 'Descend 1 of page 1', id: 'p11' },
+				{ name: 'Descend 2 of page 1', id: 'p12' },
+			],
+		},
+		{
+			name: 'Page 2',
+			id: 'p2',
+			children: [
+				{
+					name: 'Descend 1 of page 2',
+					id: 'p21',
+					children: [
+						{
+							name: 'Descend 1 of Descend 1 of page 2',
+							id: 'p211',
+						},
+					],
+				},
+			],
+		},
+	],
+};
diff --git a/packages/components/src/tree-select/stories/index.tsx b/packages/components/src/tree-select/stories/index.tsx
deleted file mode 100644
index 63424973ee2169..00000000000000
--- a/packages/components/src/tree-select/stories/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeSelect from '../';
-
-const meta: ComponentMeta< typeof TreeSelect > = {
-	title: 'Components/TreeSelect',
-	component: TreeSelect,
-	argTypes: {
-		help: { control: { type: 'text' } },
-		label: { control: { type: 'text' } },
-		prefix: { control: { type: 'text' } },
-		suffix: { control: { type: 'text' } },
-		selectedId: { control: { type: null } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-
-export default meta;
-
-const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
-	const [ selection, setSelection ] =
-		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
-
-	return (
-		<TreeSelect
-			{ ...props }
-			onChange={ setSelection }
-			selectedId={ selection }
-		/>
-	);
-};
-
-export const Default = TreeSelectWithState.bind( {} );
-Default.args = {
-	label: 'Label Text',
-	noOptionLabel: 'No parent page',
-	help: 'Help text to explain the select control.',
-	tree: [
-		{
-			name: 'Page 1',
-			id: 'p1',
-			children: [
-				{ name: 'Descend 1 of page 1', id: 'p11' },
-				{ name: 'Descend 2 of page 1', id: 'p12' },
-			],
-		},
-		{
-			name: 'Page 2',
-			id: 'p2',
-			children: [
-				{
-					name: 'Descend 1 of page 2',
-					id: 'p21',
-					children: [
-						{
-							name: 'Descend 1 of Descend 1 of page 2',
-							id: 'p211',
-						},
-					],
-				},
-			],
-		},
-	],
-};
diff --git a/packages/components/src/tree-select/types.ts b/packages/components/src/tree-select/types.ts
index ba58244e13bd27..da90ece3a658e8 100644
--- a/packages/components/src/tree-select/types.ts
+++ b/packages/components/src/tree-select/types.ts
@@ -1,29 +1,22 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
 /**
  * Internal dependencies
  */
-import type SelectControl from '../select-control';
-import type { SelectControlProps } from '../select-control/types';
+import type { SelectControlSingleSelectionProps } from '../select-control/types';
 
 export type Truthy< T > = T extends false | '' | 0 | null | undefined
 	? never
 	: T;
 
-export type SelectOptions = Required<
-	ComponentProps< typeof SelectControl >
->[ 'options' ];
-
 export interface Tree {
 	id: string;
 	name: string;
 	children?: Tree[];
 }
 
-export interface TreeSelectProps extends Omit< SelectControlProps, 'value' > {
+// `TreeSelect` inherits props from `SelectControl`, but only
+// in single selection mode (ie. when the `multiple` prop is not defined).
+export interface TreeSelectProps
+	extends Omit< SelectControlSingleSelectionProps, 'value' | 'multiple' > {
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */
@@ -35,5 +28,5 @@ export interface TreeSelectProps extends Omit< SelectControlProps, 'value' > {
 	/**
 	 * The id of the currently selected node.
 	 */
-	selectedId?: ComponentProps< typeof SelectControl >[ 'value' ];
+	selectedId?: SelectControlSingleSelectionProps[ 'value' ];
 }
diff --git a/packages/components/src/truncate/README.md b/packages/components/src/truncate/README.md
index d173edb14977cd..6d5285244078e5 100644
--- a/packages/components/src/truncate/README.md
+++ b/packages/components/src/truncate/README.md
@@ -24,14 +24,22 @@ function Example() {
 
 ## Props
 
-##### `ellipsis`: `string`
+### `children`: `ReactNode`
+
+The children elements.
+
+Note: text truncation will be attempted only if the `children` are either of type `string` or `number`. In any other scenarios, the component will not attempt to truncate the text, and will pass through the `children`.
+
+-   Required: Yes
+
+### `ellipsis`: `string`
 
 The ellipsis string when truncating the text by the `limit` prop's value.
 
 -   Required: No
 -   Default: `…`
 
-##### `ellipsizeMode`: `'auto' | 'head' | 'tail' | 'middle' | 'none'`
+### `ellipsizeMode`: `'auto' | 'head' | 'tail' | 'middle' | 'none'`
 
 Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`.
 
@@ -43,14 +51,14 @@ Determines where to truncate. For example, we can truncate text right in the mid
 -   Required: No
 -   Default: `auto`
 
-##### `limit`: `number`
+### `limit`: `number`
 
 Determines the max number of characters to be displayed before the rest of the text gets truncated. Requires `ellipsizeMode` to assume values different from `auto` and `none`.
 
 -   Required: No
 -   Default: `0`
 
-##### `numberOfLines`: `number`
+### `numberOfLines`: `number`
 
 Clamps the text content to the specified `numberOfLines`, adding an ellipsis at the end. Note: this feature ignores the value of the `ellipsis` prop and always displays the default `…` ellipsis.
 
diff --git a/packages/components/src/truncate/component.tsx b/packages/components/src/truncate/component.tsx
index cd14fd3989e88a..4b6c721f92c70c 100644
--- a/packages/components/src/truncate/component.tsx
+++ b/packages/components/src/truncate/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import useTruncate from './hook';
 import type { TruncateProps } from './types';
diff --git a/packages/components/src/truncate/hook.ts b/packages/components/src/truncate/hook.ts
index 5fac3b83efe3b0..940e3b0127b085 100644
--- a/packages/components/src/truncate/hook.ts
+++ b/packages/components/src/truncate/hook.ts
@@ -11,7 +11,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils';
 import { useCx } from '../utils/hooks/use-cx';
@@ -32,20 +33,31 @@ export default function useTruncate(
 
 	const cx = useCx();
 
-	const truncatedContent = truncateContent(
-		typeof children === 'string' ? children : '',
-		{
-			ellipsis,
-			ellipsizeMode,
-			limit,
-			numberOfLines,
-		}
-	);
+	let childrenAsText;
+	if ( typeof children === 'string' ) {
+		childrenAsText = children;
+	} else if ( typeof children === 'number' ) {
+		childrenAsText = children.toString();
+	}
 
-	const shouldTruncate = ellipsizeMode === TRUNCATE_TYPE.auto;
+	const truncatedContent = childrenAsText
+		? truncateContent( childrenAsText, {
+				ellipsis,
+				ellipsizeMode,
+				limit,
+				numberOfLines,
+		  } )
+		: children;
+
+	const shouldTruncate =
+		!! childrenAsText && ellipsizeMode === TRUNCATE_TYPE.auto;
 
 	const classes = useMemo( () => {
+		// The `word-break: break-all` property first makes sure a text line
+		// breaks even when it contains 'unbreakable' content such as long URLs.
+		// See https://github.com/WordPress/gutenberg/issues/60860.
 		const truncateLines = css`
+			${ numberOfLines === 1 ? 'word-break: break-all;' : '' }
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${ numberOfLines };
 			display: -webkit-box;
diff --git a/packages/components/src/truncate/stories/index.story.tsx b/packages/components/src/truncate/stories/index.story.tsx
new file mode 100644
index 00000000000000..3b06831c59aa07
--- /dev/null
+++ b/packages/components/src/truncate/stories/index.story.tsx
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Truncate } from '..';
+
+const meta: Meta< typeof Truncate > = {
+	component: Truncate,
+	title: 'Components (Experimental)/Typography/Truncate',
+	id: 'components-experimental-truncate',
+	argTypes: {
+		children: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const defaultText =
+	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
+
+const Template: StoryFn< typeof Truncate > = ( args ) => {
+	return <Truncate { ...args } />;
+};
+
+export const Default: StoryFn< typeof Truncate > = Template.bind( {} );
+Default.args = {
+	numberOfLines: 2,
+	children: defaultText,
+};
+
+export const CharacterCount: StoryFn< typeof Truncate > = Template.bind( {} );
+CharacterCount.args = {
+	limit: 23,
+	children: defaultText,
+	ellipsizeMode: 'tail',
+	ellipsis: '[---]',
+};
+CharacterCount.storyName = 'Truncate by character count';
diff --git a/packages/components/src/truncate/stories/index.tsx b/packages/components/src/truncate/stories/index.tsx
deleted file mode 100644
index b339dac6bf9560..00000000000000
--- a/packages/components/src/truncate/stories/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Truncate } from '..';
-
-const meta: ComponentMeta< typeof Truncate > = {
-	component: Truncate,
-	title: 'Components (Experimental)/Truncate',
-	argTypes: {
-		children: { control: { type: 'text' } },
-		as: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const defaultText =
-	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
-
-const Template: ComponentStory< typeof Truncate > = ( args ) => {
-	return <Truncate { ...args } />;
-};
-
-export const Default: ComponentStory< typeof Truncate > = Template.bind( {} );
-Default.args = {
-	numberOfLines: 2,
-	children: defaultText,
-};
-
-export const CharacterCount: ComponentStory< typeof Truncate > = Template.bind(
-	{}
-);
-CharacterCount.args = {
-	limit: 23,
-	children: defaultText,
-	ellipsizeMode: 'tail',
-	ellipsis: '[---]',
-};
-CharacterCount.storyName = 'Truncate by character count';
diff --git a/packages/components/src/truncate/test/index.tsx b/packages/components/src/truncate/test/index.tsx
index 082b6aa232d477..399393a25e4201 100644
--- a/packages/components/src/truncate/test/index.tsx
+++ b/packages/components/src/truncate/test/index.tsx
@@ -8,36 +8,63 @@ import { render, screen } from '@testing-library/react';
  */
 import { Truncate } from '..';
 
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
-	} );
+describe( 'Truncate', () => {
+	describe( 'with string or number children', () => {
+		test( 'should pass through when no truncation props are set', () => {
+			render( <Truncate>Lorem ipsum</Truncate> );
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 
-	test( 'should render limit', () => {
-		render(
-			<Truncate limit={ 1 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'L…' ) ).toBeVisible();
-	} );
+		test( 'should render numbers correctly', () => {
+			render( <Truncate>{ 14 }</Truncate> );
+			expect( screen.getByText( '14' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the start when the limit prop is set and the ellipsizeMode is tail', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="tail">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( 'L…' ) ).toBeVisible();
+		} );
+
+		test( 'should truncate text from the end when the limit prop is set and the ellipsizeMode is head', () => {
+			render(
+				<Truncate limit={ 1 } ellipsizeMode="head">
+					Lorem ipsum
+				</Truncate>
+			);
+			expect( screen.getByText( '…m' ) ).toBeVisible();
+		} );
+
+		test( 'should render custom ellipsis', () => {
+			render(
+				<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		} );
 
-	test( 'should render custom ellipsis', () => {
-		render(
-			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
+		test( 'should render custom ellipsizeMode', () => {
+			render(
+				<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
+					Lorem ipsum.
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+		} );
 	} );
 
-	test( 'should render custom ellipsizeMode', () => {
-		render(
-			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
-				Lorem ipsum.
-			</Truncate>
-		);
-		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
+	describe( 'with other children types', () => {
+		test( 'should no-op and output a warning to console', () => {
+			render(
+				<Truncate>
+					<>Lorem ipsum</>
+				</Truncate>
+			);
+			expect( screen.getByText( 'Lorem ipsum' ) ).toBeVisible();
+		} );
 	} );
 } );
diff --git a/packages/components/src/truncate/types.ts b/packages/components/src/truncate/types.ts
index f9b720657d9b59..6725f9e225f8a4 100644
--- a/packages/components/src/truncate/types.ts
+++ b/packages/components/src/truncate/types.ts
@@ -48,6 +48,10 @@ export type TruncateProps = {
 	numberOfLines?: number;
 	/**
 	 * The children elements.
+	 *
+	 * Note: text truncation will be attempted only if the `children` are either
+	 * of type `string` or `number`. In any other scenarios, the component will
+	 * not attempt to truncate the text, and will pass through the `children`.
 	 */
 	children: ReactNode;
 };
diff --git a/packages/components/src/ui/README.md b/packages/components/src/ui/README.md
deleted file mode 100644
index 4fdf6dd220f563..00000000000000
--- a/packages/components/src/ui/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# (Next) Component System
-
-This directory contains the code for next Component System.
-
-More information can be found in the original GitHub issue:
-https://github.com/WordPress/gutenberg/issues/27484
-
-## Usage
-
-(This is still very much a work in progress)
-
-```jsx
-import { Text, View } from '@wordpress/components/ui';
-
-function Example() {
-	return (
-		<View>
-			<Text>Code is Poetry</Text>
-		</View>
-	);
-}
-```
diff --git a/packages/components/src/ui/context/constants.js b/packages/components/src/ui/context/constants.js
deleted file mode 100644
index b5bee35a35fbae..00000000000000
--- a/packages/components/src/ui/context/constants.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const REACT_TYPEOF_KEY = '$$typeof';
-export const COMPONENT_NAMESPACE = 'data-wp-component';
-export const CONNECTED_NAMESPACE = 'data-wp-c16t';
-export const CONTEXT_COMPONENT_NAMESPACE = 'data-wp-c5tc8t';
-
-/**
- * Special key where the connected namespaces are stored.
- * This is attached to Context connected components as a static property.
- */
-export const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
diff --git a/packages/components/src/ui/context/context-system-provider.js b/packages/components/src/ui/context/context-system-provider.js
deleted file mode 100644
index 6fe0053dbcd8c7..00000000000000
--- a/packages/components/src/ui/context/context-system-provider.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * External dependencies
- */
-import { isEqual, merge } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	createContext,
-	useContext,
-	useRef,
-	useMemo,
-	memo,
-} from '@wordpress/element';
-import warn from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import { useUpdateEffect } from '../../utils';
-
-export const ComponentsContext = createContext(
-	/** @type {Record<string, any>} */ ( {} )
-);
-export const useComponentsContext = () => useContext( ComponentsContext );
-
-/**
- * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
- *
- * Note: This function will warn if it detects an un-memoized `value`
- *
- * @param {Object}              props
- * @param {Record<string, any>} props.value
- * @return {Record<string, any>} The consolidated value.
- */
-function useContextSystemBridge( { value } ) {
-	const parentContext = useComponentsContext();
-
-	const valueRef = useRef( value );
-
-	useUpdateEffect( () => {
-		if (
-			// Objects are equivalent.
-			isEqual( valueRef.current, value ) &&
-			// But not the same reference.
-			valueRef.current !== value
-		) {
-			warn( `Please memoize your context: ${ JSON.stringify( value ) }` );
-		}
-	}, [ value ] );
-
-	// `parentContext` will always be memoized (i.e., the result of this hook itself)
-	// or the default value from when the `ComponentsContext` was originally
-	// initialized (which will never change, it's a static variable)
-	// so this memoization will prevent `merge` and `JSON.parse/stringify` from rerunning unless
-	// the references to `value` change OR the `parentContext` has an actual material change
-	// (because again, it's guaranteed to be memoized or a static reference to the empty object
-	// so we know that the only changes for `parentContext` are material ones... i.e., why we
-	// don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only
-	// need to bother with the `value`). The `useUpdateEffect` above will ensure that we are
-	// correctly warning when the `value` isn't being properly memoized. All of that to say
-	// that this should be super safe to assume that `useMemo` will only run on actual
-	// changes to the two dependencies, therefore saving us calls to `merge` and `JSON.parse/stringify`!
-	const config = useMemo( () => {
-		// Deep clone `parentContext` to avoid mutating it later.
-		return merge( JSON.parse( JSON.stringify( parentContext ) ), value );
-	}, [ parentContext, value ] );
-
-	return config;
-}
-
-/**
- * A Provider component that can modify props for connected components within
- * the Context system.
- *
- * @example
- * ```jsx
- * <ContextSystemProvider value={{ Button: { size: 'small' }}}>
- *   <Button>...</Button>
- * </ContextSystemProvider>
- * ```
- *
- * @template {Record<string, any>} T
- * @param {Object}                    options
- * @param {import('react').ReactNode} options.children Children to render.
- * @param {T}                         options.value    Props to render into connected components.
- * @return {JSX.Element} A Provider wrapped component.
- */
-const BaseContextSystemProvider = ( { children, value } ) => {
-	const contextValue = useContextSystemBridge( { value } );
-
-	return (
-		<ComponentsContext.Provider value={ contextValue }>
-			{ children }
-		</ComponentsContext.Provider>
-	);
-};
-
-export const ContextSystemProvider = memo( BaseContextSystemProvider );
diff --git a/packages/components/src/ui/context/index.ts b/packages/components/src/ui/context/index.ts
deleted file mode 100644
index 54694e47304ff2..00000000000000
--- a/packages/components/src/ui/context/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export {
-	ContextSystemProvider,
-	useComponentsContext,
-} from './context-system-provider';
-export {
-	contextConnect,
-	hasConnectNamespace,
-	getConnectNamespace,
-} from './context-connect';
-export { useContextSystem } from './use-context-system';
-export * from './wordpress-component';
diff --git a/packages/components/src/ui/context/test/context-system-provider.js b/packages/components/src/ui/context/test/context-system-provider.js
deleted file mode 100644
index 8b052bc06c27fe..00000000000000
--- a/packages/components/src/ui/context/test/context-system-provider.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { cloneElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../context-connect';
-import { ContextSystemProvider } from '../context-system-provider';
-import { useContextSystem } from '../use-context-system';
-
-const View = styled.div``;
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-		const { container } = render(
-			<ContextSystemProvider>
-				<ConnectedComponent />
-			</ContextSystemProvider>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	test( 'should render context props', () => {
-		const Component = ( props, ref ) => {
-			const { quote, ...otherProps } = useContextSystem(
-				props,
-				'Component'
-			);
-			return (
-				<View { ...otherProps } ref={ ref }>
-					{ quote }
-				</View>
-			);
-		};
-
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-
-		const contextValue = {
-			Component: {
-				quote: 'Code is Poetry',
-			},
-		};
-
-		const { container } = render(
-			<ContextSystemProvider value={ contextValue }>
-				<ConnectedComponent />
-			</ContextSystemProvider>
-		);
-
-		expect( container ).toMatchSnapshot();
-		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
-	} );
-
-	test( 'should render _override props', () => {
-		const Component = ( props, ref ) => {
-			const { quote, ...otherProps } = useContextSystem(
-				props,
-				'Component'
-			);
-			return (
-				<View { ...otherProps } ref={ ref }>
-					{ quote }
-				</View>
-			);
-		};
-
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-
-		const contextValue = {
-			Component: {
-				_overrides: {
-					quote: 'Code is Poetry',
-				},
-			},
-		};
-
-		const { container } = render(
-			<>
-				<ContextSystemProvider value={ contextValue }>
-					<ConnectedComponent
-						className="test-component"
-						quote="WordPress.org"
-					/>
-				</ContextSystemProvider>
-			</>
-		);
-
-		expect( container ).toMatchSnapshot();
-
-		const el = container.querySelector( '.test-component' );
-
-		expect( el.innerHTML ).toContain( 'Code is Poetry' );
-		expect( el.innerHTML ).not.toContain( 'WordPress.org' );
-	} );
-} );
-
-describe( 'children', () => {
-	test( 'should pass through children', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-
-		render(
-			<ContextSystemProvider>
-				<ConnectedComponent>Pass through</ConnectedComponent>
-			</ContextSystemProvider>
-		);
-
-		expect( screen.getByText( 'Pass through' ) ).toBeInTheDocument();
-	} );
-
-	test( 'should not accept children via `context`', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-
-		render(
-			<ContextSystemProvider
-				context={ { Component: { children: 'Override' } } }
-			>
-				<ConnectedComponent />
-			</ContextSystemProvider>
-		);
-
-		expect( screen.queryByText( 'Override' ) ).not.toBeInTheDocument();
-	} );
-
-	// This matches the behavior for normal, non-context-connected components.
-	test( 'should not override inherent children', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref }>
-				Inherent
-			</View>
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-		const NormalComponent = ( props ) => <div { ...props }>Inherent</div>;
-
-		render(
-			<ContextSystemProvider>
-				<ConnectedComponent />
-				<ConnectedComponent>Explicit children</ConnectedComponent>
-				<NormalComponent />
-				<NormalComponent>Explicit children</NormalComponent>
-			</ContextSystemProvider>
-		);
-
-		expect( screen.getAllByText( 'Inherent' ) ).toHaveLength( 4 );
-	} );
-
-	describe( 'when connected component does a `cloneElement()`', () => {
-		// eslint-disable-next-line no-unused-vars
-		const ComponentThatClones = ( { content, ...props }, _ref ) =>
-			cloneElement(
-				content,
-				useContextSystem( props, 'ComponentThatClones' )
-			);
-		const ConnectedComponentThatClones = contextConnect(
-			ComponentThatClones,
-			'ComponentThatClones'
-		);
-
-		test( 'should not override cloned inherent children with implicit `undefined` children', () => {
-			render(
-				<ContextSystemProvider>
-					<ConnectedComponentThatClones
-						content={ <span>Inherent</span> }
-					/>
-				</ContextSystemProvider>
-			);
-			expect( screen.getByText( 'Inherent' ) ).toBeInTheDocument();
-		} );
-
-		test( 'should override cloned inherent children with explicit children', () => {
-			render(
-				<ContextSystemProvider>
-					<ConnectedComponentThatClones
-						content={ <span>Inherent</span> }
-					>
-						Explicit children
-					</ConnectedComponentThatClones>
-				</ContextSystemProvider>
-			);
-			expect(
-				screen.getByText( 'Explicit children' )
-			).toBeInTheDocument();
-		} );
-	} );
-} );
diff --git a/packages/components/src/ui/context/wordpress-component.ts b/packages/components/src/ui/context/wordpress-component.ts
deleted file mode 100644
index 5c0c60978f88b1..00000000000000
--- a/packages/components/src/ui/context/wordpress-component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import type * as React from 'react';
-
-// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
-export type WordPressComponentProps<
-	/** Prop types. */
-	P,
-	/** The HTML element to inherit props from. */
-	T extends React.ElementType,
-	/** Supports polymorphism through the `as` prop. */
-	IsPolymorphic extends boolean = true
-> = P &
-	// The `children` prop is being explicitly omitted since it is otherwise implicitly added
-	// by `ComponentPropsWithRef`. The context is that components should require the `children`
-	// prop explicitely when needed (see https://github.com/WordPress/gutenberg/pull/31817).
-	Omit< React.ComponentPropsWithoutRef< T >, 'as' | keyof P | 'children' > &
-	( IsPolymorphic extends true
-		? {
-				/** The HTML element or React component to render the component as. */
-				as?: T | keyof JSX.IntrinsicElements;
-		  }
-		: {} );
-
-export type WordPressComponent<
-	T extends React.ElementType,
-	O,
-	IsPolymorphic extends boolean
-> = {
-	< TT extends React.ElementType >(
-		props: WordPressComponentProps< O, TT, IsPolymorphic > &
-			( IsPolymorphic extends true ? { as: TT } : {} )
-	): JSX.Element | null;
-	(
-		props: WordPressComponentProps< O, T, IsPolymorphic >
-	): JSX.Element | null;
-	displayName?: string;
-	/**
-	 * A CSS selector used to fake component interpolation in styled components
-	 * for components not generated by `styled`. Anything passed to `contextConnect`
-	 * will get this property.
-	 *
-	 * We restrict it to a class to align with the already existing class names that
-	 * are generated by the context system.
-	 */
-	selector: `.${ string }`;
-};
-
-export type WordPressComponentFromProps<
-	Props,
-	ForwardsRef extends boolean = true
-> = Props extends WordPressComponentProps< infer P, infer T, infer I >
-	? WordPressComponent<
-			T,
-			P & ( ForwardsRef extends true ? React.RefAttributes< any > : {} ),
-			I
-	  >
-	: never;
diff --git a/packages/components/src/ui/control-group/README.md b/packages/components/src/ui/control-group/README.md
deleted file mode 100644
index 122a6a612a32c1..00000000000000
--- a/packages/components/src/ui/control-group/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# ControlGroup
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`ControlGroup` is a layout-based component for rendering a group of control-based components, such as `Button`, `Select` or `TextInput`. Control components that render within `ControlGroup` automatically have their borders offset and border-radii rounded.
-
-## Usage
-
-```jsx
-import { Button, ControlGroup, Select, TextInput } from `@wordpress/components/ui`
-
-function Example() {
-    return (
-        <ControlGroup templateColumns="auto 1fr auto">
-            <Select />
-            <TextInput placeholder="First name" />
-            <Button variant="primary" />
-        </ControlGroup>
-    );
-}
-```
diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js
deleted file mode 100644
index b034f52a0c82ab..00000000000000
--- a/packages/components/src/ui/control-group/component.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-import { Flex } from '../../flex';
-import { Grid } from '../../grid';
-import { useControlGroup } from './hook';
-import { contextConnect } from '../context';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                            forwardedRef
- */
-function ControlGroup( props, forwardedRef ) {
-	const {
-		children,
-		direction = 'row',
-		templateColumns,
-		...otherProps
-	} = useControlGroup( props );
-
-	const isGrid = !! templateColumns;
-
-	if ( isGrid ) {
-		return (
-			<Grid
-				gap={ 0 }
-				templateColumns={ templateColumns }
-				{ ...otherProps }
-				ref={ forwardedRef }
-			>
-				{ children }
-			</Grid>
-		);
-	}
-
-	return (
-		<Flex
-			direction={ direction }
-			gap={ `-1px` }
-			{ ...otherProps }
-			ref={ forwardedRef }
-		>
-			{ children }
-		</Flex>
-	);
-}
-
-/**
- * `ControlGroup` is a layout-based component for rendering a group of
- * control-based components, such as `Button`, `Select` or `TextInput`.
- * Control components that render within `ControlGroup` automatically
- * have their borders offset and border-radii rounded.
- *
- * @example
- * ```jsx
- * import { Button, ControlGroup, Select, TextInput } from `@wordpress/components/ui`;
- *
- * function Example() {
- *   return (
- *     <ControlGroup templateColumns="auto 1fr auto">
- *       <Select />
- *       <TextInput placeholder="First name" />
- *       <Button variant="primary" />
- *     </ControlGroup>
- *   );
- * }
- * ```
- */
-const ConnectedControlGroup = contextConnect( ControlGroup, 'ControlGroup' );
-
-export default ConnectedControlGroup;
diff --git a/packages/components/src/ui/control-group/context.js b/packages/components/src/ui/control-group/context.js
deleted file mode 100644
index 99d9c753222823..00000000000000
--- a/packages/components/src/ui/control-group/context.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/** @type {import('react').Context<import('./types').ControlGroupContext>} */
-export const ControlGroupContext = createContext( {} );
-export const useControlGroupContext = () => useContext( ControlGroupContext );
diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js
deleted file mode 100644
index bc1f5d34c08b37..00000000000000
--- a/packages/components/src/ui/control-group/hook.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getValidChildren } from '../utils/get-valid-children';
-import { useContextSystem } from '../context';
-import { ControlGroupContext } from './context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export function useControlGroup( props ) {
-	const {
-		children,
-		className,
-		direction = 'row',
-		templateColumns,
-		...otherProps
-	} = useContextSystem( props, 'ControlGroup' );
-
-	const validChildren = getValidChildren( children );
-	const isVertical = direction === 'column';
-	const isGrid = !! templateColumns;
-
-	const cx = useCx();
-
-	const classes = cx(
-		styles.itemFocus,
-		isGrid && styles.itemGrid,
-		className
-	);
-
-	const clonedChildren =
-		validChildren &&
-		validChildren.map( ( child, index ) => {
-			const isFirst = index === 0;
-			const isLast = index + 1 === validChildren.length;
-			const isOnly = isFirst && isLast;
-			const isMiddle = ! isFirst && ! isLast;
-
-			// @ts-ignore
-			const _key = child?.key || index;
-
-			/** @type {import('@emotion/react').SerializedStyles | undefined} */
-			let first;
-			if ( isFirst ) {
-				if ( isVertical ) {
-					first = styles.firstRow;
-				} else {
-					first = styles.first;
-				}
-			}
-
-			/** @type {import('@emotion/react').SerializedStyles | undefined} */
-			let last;
-			if ( isLast ) {
-				if ( isVertical ) {
-					last = styles.lastRow;
-				} else {
-					last = styles.last;
-				}
-			}
-
-			const contextStyles = cx( first, isMiddle && styles.middle, last );
-
-			const contextProps = {
-				isFirst,
-				isLast,
-				isMiddle,
-				isOnly,
-				isVertical,
-				styles: contextStyles,
-			};
-
-			return (
-				<ControlGroupContext.Provider
-					key={ _key }
-					value={ contextProps }
-				>
-					{ child }
-				</ControlGroupContext.Provider>
-			);
-		} );
-
-	return {
-		...otherProps,
-		children: clonedChildren,
-		className: classes,
-		direction,
-		templateColumns,
-	};
-}
diff --git a/packages/components/src/ui/control-group/index.js b/packages/components/src/ui/control-group/index.js
deleted file mode 100644
index bb8a730cdacd82..00000000000000
--- a/packages/components/src/ui/control-group/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ControlGroup } from './component';
-export * from './context';
-export * from './hook';
diff --git a/packages/components/src/ui/control-group/styles.js b/packages/components/src/ui/control-group/styles.js
deleted file mode 100644
index 24f13a86ac0a2d..00000000000000
--- a/packages/components/src/ui/control-group/styles.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-export const first = css`
-	border-bottom-right-radius: 0;
-	border-top-right-radius: 0;
-`;
-
-export const middle = css`
-	border-radius: 0;
-`;
-
-export const last = css`
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-`;
-
-export const firstRow = css`
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-`;
-
-export const lastRow = css`
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-`;
-
-export const itemFocus = css`
-	> * {
-		&:focus-within {
-			z-index: 1;
-		}
-	}
-`;
-
-export const itemGrid = css`
-	> * + *:not( marquee ) {
-		margin-left: -1px;
-		width: calc( 100% + 1px );
-	}
-`;
diff --git a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
deleted file mode 100644
index d9f26aa5af8d20..00000000000000
--- a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: -1px;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-0>* {
-  min-width: 0;
-}
-
-.emotion-0>*:focus-within {
-  z-index: 1;
-}
-
-<div>
-  <div
-    class="components-flex components-control-group emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ControlGroup"
-  >
-    <button
-      class="components-button"
-      type="button"
-    >
-      Code is Poetry
-    </button>
-    <button
-      class="components-button"
-      type="button"
-    >
-      WordPress.org
-    </button>
-  </div>
-</div>
-`;
diff --git a/packages/components/src/ui/control-group/test/index.js b/packages/components/src/ui/control-group/test/index.js
deleted file mode 100644
index 0587c329b40569..00000000000000
--- a/packages/components/src/ui/control-group/test/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ControlGroup } from '..';
-import Button from '../../../button';
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render(
-			<ControlGroup>
-				<Button>Code is Poetry</Button>
-				<Button>WordPress.org</Button>
-			</ControlGroup>
-		);
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/ui/control-group/types.ts b/packages/components/src/ui/control-group/types.ts
deleted file mode 100644
index c7211eb35283a5..00000000000000
--- a/packages/components/src/ui/control-group/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { FlexProps } from '../../flex/types';
-
-export type ControlGroupContext = {
-	isFirst?: boolean;
-	isLast?: boolean;
-	isMiddle?: boolean;
-	isOnly?: boolean;
-	isVertical?: boolean;
-	styles?: string;
-};
-
-export type Props = Pick< FlexProps, 'direction' > & {
-	/**
-	 * Adjust the layout (width) of content using CSS grid (`grid-template-columns`).
-	 */
-	templateColumns?: CSSProperties[ 'gridTemplateColumns' ];
-	/**
-	 * The children elements.
-	 */
-	children: React.ReactNode;
-};
diff --git a/packages/components/src/ui/control-label/README.md b/packages/components/src/ui/control-label/README.md
deleted file mode 100644
index d4e31e034dfd80..00000000000000
--- a/packages/components/src/ui/control-label/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# ControlLabel
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`ControlLabel` is a form component that works with `FormGroup` to provide a label for form elements (e.g. `Switch` or `TextInput`).
-
-## Usage
-
-```jsx
-import { ControlLabel, FormGroup, TextInput } from '@wordpress/components/ui';
-
-function Example() {
-	return (
-		<FormGroup>
-			<ControlLabel>First Name</ControlLabel>
-			<TextInput />
-		</FormGroup>
-	);
-}
-```
diff --git a/packages/components/src/ui/control-label/component.js b/packages/components/src/ui/control-label/component.js
deleted file mode 100644
index 62a3e8a790c68b..00000000000000
--- a/packages/components/src/ui/control-label/component.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../context';
-import { View } from '../../view';
-import { useControlLabel } from './hook';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label', false>} props
- * @param {import('react').ForwardedRef<any>}                                                     forwardedRef
- */
-function ControlLabel( props, forwardedRef ) {
-	const controlLabelProps = useControlLabel( props );
-
-	return <View as="label" { ...controlLabelProps } ref={ forwardedRef } />;
-}
-
-/**
- * `ControlLabel` is a form component that works with `FormGroup` to provide a
- * label for form elements (e.g. `Switch` or `TextInput`).
- *
- * ```jsx
- * import { ControlLabel, FormGroup, TextInput } from '@wordpress/components/ui';
- *
- * function Example() {
- * 	return (
- * 		<FormGroup>
- * 			<ControlLabel>First Name</ControlLabel>
- * 			<TextInput />
- * 		</FormGroup>
- * 	);
- * }
- * ```
- */
-const ConnectedControlLabel = contextConnect( ControlLabel, 'ControlLabel' );
-
-export default ConnectedControlLabel;
diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js
deleted file mode 100644
index dcdd5bb7e7effc..00000000000000
--- a/packages/components/src/ui/control-label/hook.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useContextSystem } from '../context';
-import { useFormGroupContextId } from '../form-group';
-import { useText } from '../../text';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'label', false>} props
- */
-export function useControlLabel( props ) {
-	const {
-		htmlFor: htmlForProp,
-		isBlock = false,
-		size = 'medium',
-		truncate = true,
-		...otherProps
-	} = useContextSystem( props, 'ControlLabel' );
-
-	const { className, ...textProps } = useText( {
-		...otherProps,
-		isBlock,
-		truncate,
-	} );
-
-	const cx = useCx();
-
-	const htmlFor = useFormGroupContextId( htmlForProp );
-	const classes = cx(
-		styles.ControlLabel,
-		styles[ /** @type {'small' | 'medium' | 'large'} */ ( size ) ],
-		className,
-		isBlock ? styles.block : styles.inline
-	);
-
-	return {
-		...textProps,
-		className: classes,
-		htmlFor,
-	};
-}
diff --git a/packages/components/src/ui/control-label/index.js b/packages/components/src/ui/control-label/index.js
deleted file mode 100644
index c73e0027014e24..00000000000000
--- a/packages/components/src/ui/control-label/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ControlLabel } from './component';
-export * from './hook';
diff --git a/packages/components/src/ui/control-label/stories/index.js b/packages/components/src/ui/control-label/stories/index.js
deleted file mode 100644
index e22d46cbf70198..00000000000000
--- a/packages/components/src/ui/control-label/stories/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Internal dependencies
- */
-import { ControlLabel } from '../index';
-
-export default {
-	component: ControlLabel,
-	title: 'Components (Experimental)/ControlLabel',
-};
-
-export const _default = () => {
-	return <ControlLabel>Label</ControlLabel>;
-};
diff --git a/packages/components/src/ui/control-label/styles.js b/packages/components/src/ui/control-label/styles.js
deleted file mode 100644
index 8f96e91d0ef3fb..00000000000000
--- a/packages/components/src/ui/control-label/styles.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import CONFIG from '../../utils/config-values';
-import { getHighDpi } from '../utils/get-high-dpi';
-
-const lineHeight = `calc(${ CONFIG.fontSize } * 1.2)`;
-
-/**
- * @param {keyof CONFIG} size The padding size.
- */
-function getPadding( size ) {
-	return `calc((${ CONFIG[ size ] } - ${ lineHeight }) / 2)`;
-}
-
-const highDpiAdjust = getHighDpi`
-	> * {
-		position: relative;
-		top: 0.5px;
-	}
-`;
-
-export const ControlLabel = css`
-	display: inline-block;
-	line-height: ${ lineHeight };
-	margin: 0;
-	max-width: 100%;
-	padding-bottom: ${ getPadding( 'controlHeight' ) };
-	padding-top: ${ getPadding( 'controlHeight' ) };
-
-	&:active {
-		user-select: none;
-	}
-
-	${ highDpiAdjust };
-`;
-
-export const large = css`
-	padding-bottom: ${ getPadding( 'controlHeightLarge' ) };
-	padding-top: ${ getPadding( 'controlHeightLarge' ) };
-`;
-
-export const medium = css`
-	padding-bottom: ${ getPadding( 'controlHeight' ) };
-	padding-top: ${ getPadding( 'controlHeight' ) };
-`;
-
-export const small = css`
-	padding-bottom: ${ getPadding( 'controlHeightSmall' ) };
-	padding-top: ${ getPadding( 'controlHeightSmall' ) };
-`;
-
-export const inline = css`
-	display: inline-block;
-	vertical-align: middle;
-`;
-
-export const block = css`
-	display: block;
-`;
diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
deleted file mode 100644
index ffe2d42932d002..00000000000000
--- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,141 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: inline-block;
-  line-height: calc(13px * 1.2);
-  margin: 0;
-  max-width: 100%;
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emotion-0:active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
-  .emotion-0>* {
-    position: relative;
-    top: 0.5px;
-  }
-}
-
-<div>
-  <label
-    class="components-truncate components-text components-control-label emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-  >
-    Label
-  </label>
-</div>
-`;
-
-exports[`props should render no truncate 1`] = `
-.emotion-0 {
-  display: inline-block;
-  line-height: calc(13px * 1.2);
-  margin: 0;
-  max-width: 100%;
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emotion-0:active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
-  .emotion-0>* {
-    position: relative;
-    top: 0.5px;
-  }
-}
-
-<div>
-  <label
-    class="components-truncate components-text components-control-label emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-  >
-    Label
-  </label>
-</div>
-`;
-
-exports[`props should render size 1`] = `
-.emotion-0 {
-  display: inline-block;
-  line-height: calc(13px * 1.2);
-  margin: 0;
-  max-width: 100%;
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((calc( 36px * 0.8 ) - calc(13px * 1.2)) / 2);
-  padding-top: calc((calc( 36px * 0.8 ) - calc(13px * 1.2)) / 2);
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emotion-0:active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
-  .emotion-0>* {
-    position: relative;
-    top: 0.5px;
-  }
-}
-
-<div>
-  <label
-    class="components-truncate components-text components-control-label emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-  >
-    Label
-  </label>
-</div>
-`;
diff --git a/packages/components/src/ui/control-label/test/index.js b/packages/components/src/ui/control-label/test/index.js
deleted file mode 100644
index 20a9c99c833b0a..00000000000000
--- a/packages/components/src/ui/control-label/test/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ControlLabel } from '../index';
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render( <ControlLabel>Label</ControlLabel> );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	test( 'should render htmlFor', () => {
-		const { container } = render(
-			<ControlLabel htmlFor="Field">Label</ControlLabel>
-		);
-
-		expect( container.firstChild ).toHaveAttribute( 'for', 'Field' );
-	} );
-
-	test( 'should render size', () => {
-		const { container } = render(
-			<ControlLabel size="small">Label</ControlLabel>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	test( 'should render no truncate', () => {
-		const { container } = render(
-			<ControlLabel truncate={ false }>Label</ControlLabel>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/components/src/ui/control-label/types.ts b/packages/components/src/ui/control-label/types.ts
deleted file mode 100644
index e76b7d3d895e73..00000000000000
--- a/packages/components/src/ui/control-label/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Props as TextProps } from '../../text/types';
-
-export type Props = TextProps & {
-	isBlock?: boolean;
-	size?: 'large' | 'medium' | 'small';
-};
diff --git a/packages/components/src/ui/form-group/README.md b/packages/components/src/ui/form-group/README.md
deleted file mode 100644
index fec4316caf3553..00000000000000
--- a/packages/components/src/ui/form-group/README.md
+++ /dev/null
@@ -1,113 +0,0 @@
-# FormGroup
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`FormGroup` is a form component that groups a label with a form element (e.g. `Switch` or `TextInput`).
-
-## Usage
-
-```jsx
-import { FormGroup, TextInput } from '@wordpress/components/ui';
-
-function Example() {
-	return (
-		<FormGroup label="First name">
-			<TextInput />
-		</FormGroup>
-	);
-}
-```
-
-## Props
-
-##### align
-
-**Type**: `CSS['alignItems']`
-
-Adjusts the block alignment of children.
-
-##### alignLabel
-
-**Type**: `Pick<TextProps, "align">`
-
-Aligns the label within `FormGroup`.
-
-##### alignment
-
-**Type**: `string`
-
-Adjusts the horizontal and vertical alignment of children.
-
-##### columns
-
-**Type**: `number`,`(number`,`null)[]`
-
-Adjusts the number of columns of the `Grid`.
-
-##### gap
-
-**Type**: `number`
-
-Gap between each child.
-
-##### help
-
-**Type**: `React.ReactElement`
-
-Displays help content.
-
-##### horizontal
-
-**Type**: `boolean`
-
-Displays the label and form field horizontally.
-
-##### isInline
-
-**Type**: `boolean`
-
-Changes the CSS display from `grid` to `inline-grid`.
-
-##### justify
-
-**Type**: `CSS['justifyContent']`
-
-Adjusts the inline alignment of children.
-
-##### label
-
-**Type**: `string`
-
-Label of the form field.
-
-##### labelHidden
-
-**Type**: `boolean`
-
-Visually hides the label.
-
-##### rows
-
-**Type**: `number`,`(number`,`null)[]`
-
-Adjusts the number of rows of the `Grid`.
-
-##### templateColumns
-
-**Type**: `CSS['gridTemplateColumns']`
-
-Adjusts the CSS grid `template-columns`.
-
-##### templateRows
-
-**Type**: `CSS['gridTemplateRows']`
-
-Adjusts the CSS grid `template-rows`.
-
-##### truncate
-
-**Type**: `boolean`
-
-Truncates the label text content.
diff --git a/packages/components/src/ui/form-group/form-group-content.js b/packages/components/src/ui/form-group/form-group-content.js
deleted file mode 100644
index a9bdc87ec1b175..00000000000000
--- a/packages/components/src/ui/form-group/form-group-content.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { VStack } from '../../v-stack';
-import { FormGroupContext } from './form-group-context';
-import FormGroupHelp from './form-group-help';
-import FormGroupLabel from './form-group-label';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupContentProps, 'label', false>} props
- */
-function FormGroupContent( {
-	alignLabel,
-	children,
-	help,
-	horizontal = false,
-	id,
-	label,
-	labelHidden,
-	spacing = 2,
-	truncate,
-	...props
-} ) {
-	const contextProps = useMemo(
-		() => ( { id, horizontal } ),
-		[ id, horizontal ]
-	);
-
-	const content = help ? (
-		<VStack expanded={ false } spacing={ spacing }>
-			{ children }
-			<FormGroupHelp>{ help }</FormGroupHelp>
-		</VStack>
-	) : (
-		children
-	);
-
-	return (
-		<FormGroupContext.Provider value={ contextProps }>
-			<FormGroupLabel
-				align={ alignLabel }
-				id={ id }
-				labelHidden={ labelHidden }
-				truncate={ truncate }
-				{ ...props }
-			>
-				{ label }
-			</FormGroupLabel>
-			{ content }
-		</FormGroupContext.Provider>
-	);
-}
-
-export default memo( FormGroupContent );
diff --git a/packages/components/src/ui/form-group/form-group-context.js b/packages/components/src/ui/form-group/form-group-context.js
deleted file mode 100644
index e98f93de5095ac..00000000000000
--- a/packages/components/src/ui/form-group/form-group-context.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * @typedef {{ id?: import('react').ReactText, horizontal: boolean }} FormGroupContext
- */
-
-/**
- * @type {FormGroupContext}
- */
-const initialContext = {
-	id: undefined,
-	horizontal: true,
-};
-
-/**
- * @type {import('react').Context<FormGroupContext>}
- */
-export const FormGroupContext = createContext( initialContext );
-export const useFormGroupContext = () => useContext( FormGroupContext );
-
-/**
- * @param {string | undefined} id The preferred id for the form group element.
- * @return {import('react').ReactText | undefined} The form group context id.
- */
-export const useFormGroupContextId = ( id ) => {
-	const contextId = useFormGroupContext().id;
-	return id || contextId;
-};
diff --git a/packages/components/src/ui/form-group/form-group-help.js b/packages/components/src/ui/form-group/form-group-help.js
deleted file mode 100644
index 456d5325b5cbb0..00000000000000
--- a/packages/components/src/ui/form-group/form-group-help.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ContextSystemProvider } from '../context';
-
-const contextValue = { Text: { variant: 'muted' } };
-
-/**
- * @typedef Props
- * @property {import('react').ReactNode} [children] The content to display within `FormGroupHelp`.
- */
-
-/**
- *
- * @param {Props} props
- */
-function FormGroupHelp( { children } ) {
-	if ( ! children ) return null;
-
-	return (
-		<ContextSystemProvider value={ contextValue }>
-			{ children }
-		</ContextSystemProvider>
-	);
-}
-
-export default memo( FormGroupHelp );
diff --git a/packages/components/src/ui/form-group/form-group-label.js b/packages/components/src/ui/form-group/form-group-label.js
deleted file mode 100644
index 21a4a2dda5b129..00000000000000
--- a/packages/components/src/ui/form-group/form-group-label.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { memo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ControlLabel } from '../control-label';
-import { VisuallyHidden } from '../../visually-hidden';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupLabelProps, 'label', false>} props
- * @return {JSX.Element | null} The form group's label.
- */
-function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {
-	if ( ! children ) return null;
-
-	if ( labelHidden ) {
-		return (
-			<VisuallyHidden as="label" htmlFor={ id?.toString() }>
-				{ children }
-			</VisuallyHidden>
-		);
-	}
-
-	return <ControlLabel { ...props }>{ children }</ControlLabel>;
-}
-
-export default memo( FormGroupLabel );
diff --git a/packages/components/src/ui/form-group/form-group-styles.js b/packages/components/src/ui/form-group/form-group-styles.js
deleted file mode 100644
index b675565d243562..00000000000000
--- a/packages/components/src/ui/form-group/form-group-styles.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-export const FormGroup = css`
-	width: 100%;
-`;
diff --git a/packages/components/src/ui/form-group/form-group.js b/packages/components/src/ui/form-group/form-group.js
deleted file mode 100644
index 79881be46f7116..00000000000000
--- a/packages/components/src/ui/form-group/form-group.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../context';
-import { Grid } from '../../grid';
-import { View } from '../../view';
-import FormGroupContent from './form-group-content';
-import { useFormGroup } from './use-form-group';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                     forwardedRef
- */
-function FormGroup( props, forwardedRef ) {
-	const { contentProps, horizontal, ...otherProps } = useFormGroup( props );
-
-	if ( horizontal ) {
-		return (
-			<Grid
-				templateColumns="minmax(0, 1fr) 2fr"
-				{ ...otherProps }
-				ref={ forwardedRef }
-			>
-				<FormGroupContent { ...contentProps } />
-			</Grid>
-		);
-	}
-
-	return (
-		<View { ...otherProps } ref={ forwardedRef }>
-			<FormGroupContent { ...contentProps } />
-		</View>
-	);
-}
-
-/**
- * `FormGroup` is a form component that groups a label with a form element (e.g. `Switch` or `TextInput`).
- *
- * @example
- * ```jsx
- * import { FormGroup, TextInput } from `@wordpress/components/ui`;
- *
- * function Example() {
- * 	return (
- * 		<FormGroup label="First name">
- * 			<TextInput />
- * 		</FormGroup>
- * 	);
- * }
- * ```
- */
-const ConnectedFormGroup = contextConnect( FormGroup, 'FormGroup' );
-
-export default ConnectedFormGroup;
diff --git a/packages/components/src/ui/form-group/index.js b/packages/components/src/ui/form-group/index.js
deleted file mode 100644
index 64c29381529b28..00000000000000
--- a/packages/components/src/ui/form-group/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as FormGroup } from './form-group';
-
-export * from './use-form-group';
-export * from './form-group-context';
diff --git a/packages/components/src/ui/form-group/stories/index.js b/packages/components/src/ui/form-group/stories/index.js
deleted file mode 100644
index 804a41ad265f26..00000000000000
--- a/packages/components/src/ui/form-group/stories/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Internal dependencies
- */
-import { FormGroup, useFormGroupContextId } from '../index';
-import { Text } from '../../../text';
-
-// @todo: Refactor this after adding next TextInput component.
-const TextInput = ( { id: idProp, ...props } ) => {
-	const id = useFormGroupContextId( idProp );
-	return (
-		<div>
-			<input type="text" id={ id } { ...props } />
-		</div>
-	);
-};
-
-export default {
-	component: FormGroup,
-	title: 'Components (Experimental)/FormGroup',
-};
-
-export const _default = () => {
-	return (
-		<FormGroup label="Form Group">
-			<TextInput />
-		</FormGroup>
-	);
-};
-
-export const _labelHidden = () => {
-	return (
-		<FormGroup label="Form Group" labelHidden>
-			<TextInput />
-		</FormGroup>
-	);
-};
-
-export const _help = () => {
-	return (
-		<FormGroup help={ <Text>Help Text</Text> } label="Form Group">
-			<TextInput />
-		</FormGroup>
-	);
-};
diff --git a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
deleted file mode 100644
index b10a44c09d5d8b..00000000000000
--- a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render alignLabel 1`] = `
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inline-block;
-  line-height: calc(13px * 1.2);
-  margin: 0;
-  max-width: 100%;
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-  text-align: right;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emotion-2:active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
-  .emotion-2>* {
-    position: relative;
-    top: 0.5px;
-  }
-}
-
-<div>
-  <div
-    class="components-form-group emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="FormGroup"
-  >
-    <label
-      class="components-truncate components-text components-control-label emotion-2 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ControlLabel"
-      for="fname"
-    >
-      First name
-    </label>
-    <input
-      id="fname"
-      type="text"
-    />
-  </div>
-</div>
-`;
-
-exports[`props should render vertically 1`] = `
-.emotion-0 {
-  width: 100%;
-}
-
-.emotion-2 {
-  display: inline-block;
-  line-height: calc(13px * 1.2);
-  margin: 0;
-  max-width: 100%;
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((36px - calc(13px * 1.2)) / 2);
-  padding-top: calc((36px - calc(13px * 1.2)) / 2);
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-  text-align: left;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.emotion-2:active {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-@media ( -webkit-min-device-pixel-ratio: 1.25 ), ( min-resolution: 120dpi ) {
-  .emotion-2>* {
-    position: relative;
-    top: 0.5px;
-  }
-}
-
-<div>
-  <div
-    class="components-form-group emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="FormGroup"
-  >
-    <label
-      class="components-truncate components-text components-control-label emotion-2 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ControlLabel"
-      for="fname"
-    >
-      First name
-    </label>
-    <input
-      id="fname"
-      type="text"
-    />
-  </div>
-</div>
-`;
diff --git a/packages/components/src/ui/form-group/test/index.js b/packages/components/src/ui/form-group/test/index.js
deleted file mode 100644
index b6bfcd4d8f2110..00000000000000
--- a/packages/components/src/ui/form-group/test/index.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { ControlLabel } from '../../control-label';
-import { FormGroup, useFormGroupContextId } from '../index';
-
-// @todo: Refactor this after adding next TextInput component.
-const TextInput = ( { id: idProp, ...props } ) => {
-	const id = useFormGroupContextId( idProp );
-	return <input type="text" id={ id } { ...props } />;
-};
-
-// We're intentionally using a string literal for the ID to ensure
-// the htmlFor and id properties of the label and inputs are bound correctly.
-/* eslint-disable no-restricted-syntax */
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		render(
-			<FormGroup id="fname" label="First name">
-				<TextInput />
-			</FormGroup>
-		);
-
-		expect(
-			screen.getByRole( 'textbox', { name: 'First name' } )
-		).toBeVisible();
-	} );
-
-	test( 'should render label without prop correctly', () => {
-		render(
-			<FormGroup id="fname">
-				<ControlLabel htmlFor="fname">First name</ControlLabel>
-				<TextInput />
-			</FormGroup>
-		);
-
-		expect(
-			screen.getByRole( 'textbox', { name: 'First name' } )
-		).toBeVisible();
-	} );
-
-	test( 'should render labelHidden', () => {
-		render(
-			<FormGroup labelHidden id="fname" label="First name">
-				<TextInput />
-			</FormGroup>
-		);
-
-		expect(
-			screen.getByRole( 'textbox', { name: 'First name' } )
-		).toBeVisible();
-		expect( screen.getByText( 'First name' ) ).toHaveClass(
-			'components-visually-hidden'
-		);
-	} );
-
-	test( 'should render alignLabel', () => {
-		const { container } = render(
-			<FormGroup alignLabel="right" id="fname" label="First name">
-				<TextInput />
-			</FormGroup>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	test( 'should render vertically', () => {
-		const { container } = render(
-			<FormGroup horizontal={ false } id="fname" label="First name">
-				<TextInput />
-			</FormGroup>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
-/* eslint-enable no-restricted-syntax */
diff --git a/packages/components/src/ui/form-group/types.ts b/packages/components/src/ui/form-group/types.ts
deleted file mode 100644
index 288acfdba7e171..00000000000000
--- a/packages/components/src/ui/form-group/types.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import type { CSSProperties, ReactNode, ReactText } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { Props as ControlLabelProps } from '../control-label/types';
-import type { GridProps } from '../../grid/types';
-
-export type FormGroupLabelProps = ControlLabelProps & {
-	labelHidden?: boolean;
-	id?: ReactText;
-};
-
-export type FormGroupContentProps = FormGroupLabelProps & {
-	alignLabel?: CSSProperties[ 'textAlign' ];
-	help?: ReactNode;
-	horizontal?: boolean;
-	label?: ReactNode;
-	spacing?: CSSProperties[ 'width' ];
-	truncate?: boolean;
-};
-
-type Horizontal = GridProps & {
-	horizontal: true;
-};
-
-type Vertical = { horizontal: false };
-
-export type FormGroupProps = FormGroupContentProps & ( Horizontal | Vertical );
diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js
deleted file mode 100644
index eebc5ae3506398..00000000000000
--- a/packages/components/src/ui/form-group/use-form-group.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem } from '../context';
-import * as styles from './form-group-styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').FormGroupProps, 'div'>} props
- */
-export function useFormGroup( props ) {
-	const {
-		alignLabel = 'left',
-		children,
-		className,
-		help,
-		horizontal = false,
-		id: idProp,
-		label,
-		labelHidden = false,
-		truncate = false,
-		...otherProps
-	} = useContextSystem( props, 'FormGroup' );
-
-	const id = useInstanceId( useFormGroup, 'form-group', idProp );
-
-	const cx = useCx();
-
-	const classes = cx( styles.FormGroup, className );
-
-	const contentProps = {
-		alignLabel,
-		children,
-		help,
-		id,
-		horizontal,
-		label,
-		labelHidden,
-		truncate,
-	};
-
-	return {
-		...otherProps,
-		className: classes,
-		contentProps,
-		horizontal,
-	};
-}
diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js
deleted file mode 100644
index e8587d84b298ad..00000000000000
--- a/packages/components/src/ui/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './control-group';
-export * from './control-label';
-export * from './form-group';
-export * from './shortcut';
-export * from './spinner';
diff --git a/packages/components/src/ui/shortcut/component.tsx b/packages/components/src/ui/shortcut/component.tsx
deleted file mode 100644
index b48f8d385a3147..00000000000000
--- a/packages/components/src/ui/shortcut/component.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-
-/**
- * Internal dependencies
- */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../context';
-import { View } from '../../view';
-
-export interface ShortcutDescription {
-	display: string;
-	ariaLabel: string;
-}
-
-export interface Props {
-	shortcut?: ShortcutDescription | string;
-	className?: string;
-}
-
-function Shortcut(
-	props: WordPressComponentProps< Props, 'span' >,
-	forwardedRef: ForwardedRef< any >
-): JSX.Element | null {
-	const {
-		as: asProp = 'span',
-		shortcut,
-		className,
-		...otherProps
-	} = useContextSystem( props, 'Shortcut' );
-	if ( ! shortcut ) {
-		return null;
-	}
-
-	let displayText: string;
-	let ariaLabel: string | undefined;
-
-	if ( typeof shortcut === 'string' ) {
-		displayText = shortcut;
-	} else {
-		displayText = shortcut.display;
-		ariaLabel = shortcut.ariaLabel;
-	}
-
-	return (
-		<View
-			as={ asProp }
-			className={ className }
-			aria-label={ ariaLabel }
-			ref={ forwardedRef }
-			{ ...otherProps }
-		>
-			{ displayText }
-		</View>
-	);
-}
-
-const ConnectedShortcut = contextConnect( Shortcut, 'Shortcut' );
-
-export default ConnectedShortcut;
diff --git a/packages/components/src/ui/shortcut/index.ts b/packages/components/src/ui/shortcut/index.ts
deleted file mode 100644
index 6b107e956edb2f..00000000000000
--- a/packages/components/src/ui/shortcut/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Shortcut } from './component';
-export type { Props as ShortcutProps, ShortcutDescription } from './component';
diff --git a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
deleted file mode 100644
index edd4ed91bc3529..00000000000000
--- a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Shortcut should render a span with the shortcut text 1`] = `
-<span
-  class="components-shortcut emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Shortcut"
->
-  meta + P
-</span>
-`;
-
-exports[`Shortcut should render null when no shortcut is provided 1`] = `<div />`;
diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js
deleted file mode 100644
index 7dc49f7b3f6632..00000000000000
--- a/packages/components/src/ui/shortcut/test/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Shortcut } from '..';
-
-describe( 'Shortcut', () => {
-	it( 'should render null when no shortcut is provided', () => {
-		const { container } = render( <Shortcut /> );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'should render a span with the shortcut text', () => {
-		const shortcutText = 'meta + P';
-		render( <Shortcut shortcut={ shortcutText } /> );
-		const shortcut = screen.getByText( shortcutText );
-		expect( shortcut ).toMatchSnapshot();
-	} );
-
-	it( 'should render a span with aria label', () => {
-		const shortcutObject = {
-			display: 'meta + P',
-			ariaLabel: 'print',
-		};
-		render( <Shortcut shortcut={ shortcutObject } /> );
-		const shortcut = screen.getByText( shortcutObject.display );
-		expect( shortcut ).toHaveAttribute(
-			'aria-label',
-			shortcutObject.ariaLabel
-		);
-	} );
-} );
diff --git a/packages/components/src/ui/spinner/README.md b/packages/components/src/ui/spinner/README.md
deleted file mode 100644
index 5e25f9992d0c32..00000000000000
--- a/packages/components/src/ui/spinner/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Spinner
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`Spinner` is a component that notify users that their action is being processed.
-
-## Usage
-
-```jsx
-import { Spinner } from '@wordpress/components/ui';
-
-function Example() {
-	return <Spinner />;
-}
-```
-
-## Props
-
-##### color
-
-**Type**: `CSSProperties['color']`
-
-The color of the `Spinner`.
-
-##### size
-
-**Type**: `number`
-
-The size of the `Spinner`.
diff --git a/packages/components/src/ui/spinner/component.js b/packages/components/src/ui/spinner/component.js
deleted file mode 100644
index d8da4fcf708231..00000000000000
--- a/packages/components/src/ui/spinner/component.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Internal dependencies
- */
-import { BarsView, BarsWrapperView, ContainerView } from './styles';
-import { BASE_SIZE, WRAPPER_SIZE } from './utils';
-import { contextConnect, useContextSystem } from '../context';
-import { COLORS } from '../../utils/colors-values';
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @typedef Props
- * @property {import('react').CSSProperties['color']} [color]   Color of `Spinner`.
- * @property {number}                                 [size=16] Size of `Spinner`.
- */
-/* eslint-enable jsdoc/valid-types */
-
-/**
- *
- * @param {import('../context').WordPressComponentProps<Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                          forwardedRef
- */
-function Spinner( props, forwardedRef ) {
-	const {
-		color = COLORS.gray[ 900 ],
-		size = BASE_SIZE,
-		...otherProps
-	} = useContextSystem( props, 'Spinner' );
-	const ratio = size / BASE_SIZE;
-	const scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;
-	const transform = `scale(${ scale })`;
-
-	const styles = { transform };
-
-	return (
-		<ContainerView
-			{ ...otherProps }
-			aria-busy={ true }
-			ref={ forwardedRef }
-			style={ { height: size, width: size } }
-		>
-			<BarsWrapperView aria-hidden={ true } style={ styles }>
-				<BarsView style={ { color } }>
-					<div className="InnerBar1" />
-					<div className="InnerBar2" />
-					<div className="InnerBar3" />
-					<div className="InnerBar4" />
-					<div className="InnerBar5" />
-					<div className="InnerBar6" />
-					<div className="InnerBar7" />
-					<div className="InnerBar8" />
-					<div className="InnerBar9" />
-					<div className="InnerBar10" />
-					<div className="InnerBar11" />
-					<div className="InnerBar12" />
-				</BarsView>
-			</BarsWrapperView>
-		</ContainerView>
-	);
-}
-
-/**
- * `Spinner` is a component that notify users that their action is being processed.
- *
- * @example
- * ```jsx
- * import { Spinner } from `@wordpress/components/ui`;
- *
- * function Example() {
- * 	return (
- * 		<Spinner />
- * 	);
- * }
- * ```
- */
-export default contextConnect( Spinner, 'Spinner' );
diff --git a/packages/components/src/ui/spinner/index.js b/packages/components/src/ui/spinner/index.js
deleted file mode 100644
index 84ac37f7401d54..00000000000000
--- a/packages/components/src/ui/spinner/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Spinner } from './component';
diff --git a/packages/components/src/ui/spinner/stories/index.js b/packages/components/src/ui/spinner/stories/index.js
deleted file mode 100644
index 9cb006d883c1ee..00000000000000
--- a/packages/components/src/ui/spinner/stories/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Spinner } from '../index';
-
-export default {
-	component: Spinner,
-	title: 'Components (Experimental)/Spinner',
-};
-
-export const _default = () => {
-	return (
-		<>
-			<Spinner />
-			<Spinner size={ 30 } />
-			<Spinner color="blue" size="50" />
-		</>
-	);
-};
diff --git a/packages/components/src/ui/spinner/styles.js b/packages/components/src/ui/spinner/styles.js
deleted file mode 100644
index 057cca34c68460..00000000000000
--- a/packages/components/src/ui/spinner/styles.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { WRAPPER_SIZE } from './utils';
-
-export const ContainerView = styled.div`
-	display: flex;
-	pointer-events: none;
-	position: relative;
-`;
-
-export const BarsWrapperView = styled.div`
-	height: ${ WRAPPER_SIZE }px;
-	left: 0;
-	opacity: 0.6;
-	position: absolute;
-	top: 0;
-	transform-origin: top left;
-	width: ${ WRAPPER_SIZE }px;
-`;
-
-export const BarsView = styled.div`
-	color: currentColor;
-	display: inline-flex;
-	height: 54px;
-	left: 50%;
-	padding: 10px;
-	position: absolute;
-	top: 50%;
-	transform: translate( -50%, -50% );
-	width: 54px;
-
-	> div {
-		animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
-		background: currentColor;
-		border-radius: 50px;
-		height: 16%;
-		left: 49%;
-		opacity: 0;
-		position: absolute;
-		top: 43%;
-		width: 6%;
-	}
-
-	@keyframes ComponentsUISpinnerFadeAnimation {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0.25;
-		}
-	}
-
-	.InnerBar1 {
-		animation-delay: 0s;
-		transform: rotate( 0deg ) translate( 0, -130% );
-	}
-
-	.InnerBar2 {
-		animation-delay: -0.9167s;
-		transform: rotate( 30deg ) translate( 0, -130% );
-	}
-
-	.InnerBar3 {
-		animation-delay: -0.833s;
-		transform: rotate( 60deg ) translate( 0, -130% );
-	}
-	.InnerBar4 {
-		animation-delay: -0.7497s;
-		transform: rotate( 90deg ) translate( 0, -130% );
-	}
-	.InnerBar5 {
-		animation-delay: -0.667s;
-		transform: rotate( 120deg ) translate( 0, -130% );
-	}
-	.InnerBar6 {
-		animation-delay: -0.5837s;
-		transform: rotate( 150deg ) translate( 0, -130% );
-	}
-	.InnerBar7 {
-		animation-delay: -0.5s;
-		transform: rotate( 180deg ) translate( 0, -130% );
-	}
-	.InnerBar8 {
-		animation-delay: -0.4167s;
-		transform: rotate( 210deg ) translate( 0, -130% );
-	}
-	.InnerBar9 {
-		animation-delay: -0.333s;
-		transform: rotate( 240deg ) translate( 0, -130% );
-	}
-	.InnerBar10 {
-		animation-delay: -0.2497s;
-		transform: rotate( 270deg ) translate( 0, -130% );
-	}
-	.InnerBar11 {
-		animation-delay: -0.167s;
-		transform: rotate( 300deg ) translate( 0, -130% );
-	}
-	.InnerBar12 {
-		animation-delay: -0.0833s;
-		transform: rotate( 330deg ) translate( 0, -130% );
-	}
-`;
diff --git a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap b/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap
deleted file mode 100644
index 70fd3df3a5b484..00000000000000
--- a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,265 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render color 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -11,11 +11,11 @@
-        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
-        style="transform: scale(0.4444444444444444);"
-      >
-        <div
-          class="css-tada40-BarsView e1s9yo7h0"
--         style="color: blue;"
-+         style="color: rgb(30, 30, 30);"
-        >
-          <div
-            class="InnerBar1"
-          />
-          <div
-`;
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  pointer-events: none;
-  position: relative;
-}
-
-.emotion-2 {
-  height: 36px;
-  left: 0;
-  opacity: 0.6;
-  position: absolute;
-  top: 0;
-  transform-origin: top left;
-  width: 36px;
-}
-
-.emotion-4 {
-  color: currentColor;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  height: 54px;
-  left: 50%;
-  padding: 10px;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translate( -50%, -50% );
-  -moz-transform: translate( -50%, -50% );
-  -ms-transform: translate( -50%, -50% );
-  transform: translate( -50%, -50% );
-  width: 54px;
-}
-
-.emotion-4>div {
-  -webkit-animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
-  animation: ComponentsUISpinnerFadeAnimation 1000ms linear infinite;
-  background: currentColor;
-  border-radius: 50px;
-  height: 16%;
-  left: 49%;
-  opacity: 0;
-  position: absolute;
-  top: 43%;
-  width: 6%;
-}
-
-.emotion-4 .InnerBar1 {
-  -webkit-animation-delay: 0s;
-  animation-delay: 0s;
-  -webkit-transform: rotate( 0deg ) translate( 0, -130% );
-  -moz-transform: rotate( 0deg ) translate( 0, -130% );
-  -ms-transform: rotate( 0deg ) translate( 0, -130% );
-  transform: rotate( 0deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar2 {
-  -webkit-animation-delay: -0.9167s;
-  animation-delay: -0.9167s;
-  -webkit-transform: rotate( 30deg ) translate( 0, -130% );
-  -moz-transform: rotate( 30deg ) translate( 0, -130% );
-  -ms-transform: rotate( 30deg ) translate( 0, -130% );
-  transform: rotate( 30deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar3 {
-  -webkit-animation-delay: -0.833s;
-  animation-delay: -0.833s;
-  -webkit-transform: rotate( 60deg ) translate( 0, -130% );
-  -moz-transform: rotate( 60deg ) translate( 0, -130% );
-  -ms-transform: rotate( 60deg ) translate( 0, -130% );
-  transform: rotate( 60deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar4 {
-  -webkit-animation-delay: -0.7497s;
-  animation-delay: -0.7497s;
-  -webkit-transform: rotate( 90deg ) translate( 0, -130% );
-  -moz-transform: rotate( 90deg ) translate( 0, -130% );
-  -ms-transform: rotate( 90deg ) translate( 0, -130% );
-  transform: rotate( 90deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar5 {
-  -webkit-animation-delay: -0.667s;
-  animation-delay: -0.667s;
-  -webkit-transform: rotate( 120deg ) translate( 0, -130% );
-  -moz-transform: rotate( 120deg ) translate( 0, -130% );
-  -ms-transform: rotate( 120deg ) translate( 0, -130% );
-  transform: rotate( 120deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar6 {
-  -webkit-animation-delay: -0.5837s;
-  animation-delay: -0.5837s;
-  -webkit-transform: rotate( 150deg ) translate( 0, -130% );
-  -moz-transform: rotate( 150deg ) translate( 0, -130% );
-  -ms-transform: rotate( 150deg ) translate( 0, -130% );
-  transform: rotate( 150deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar7 {
-  -webkit-animation-delay: -0.5s;
-  animation-delay: -0.5s;
-  -webkit-transform: rotate( 180deg ) translate( 0, -130% );
-  -moz-transform: rotate( 180deg ) translate( 0, -130% );
-  -ms-transform: rotate( 180deg ) translate( 0, -130% );
-  transform: rotate( 180deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar8 {
-  -webkit-animation-delay: -0.4167s;
-  animation-delay: -0.4167s;
-  -webkit-transform: rotate( 210deg ) translate( 0, -130% );
-  -moz-transform: rotate( 210deg ) translate( 0, -130% );
-  -ms-transform: rotate( 210deg ) translate( 0, -130% );
-  transform: rotate( 210deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar9 {
-  -webkit-animation-delay: -0.333s;
-  animation-delay: -0.333s;
-  -webkit-transform: rotate( 240deg ) translate( 0, -130% );
-  -moz-transform: rotate( 240deg ) translate( 0, -130% );
-  -ms-transform: rotate( 240deg ) translate( 0, -130% );
-  transform: rotate( 240deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar10 {
-  -webkit-animation-delay: -0.2497s;
-  animation-delay: -0.2497s;
-  -webkit-transform: rotate( 270deg ) translate( 0, -130% );
-  -moz-transform: rotate( 270deg ) translate( 0, -130% );
-  -ms-transform: rotate( 270deg ) translate( 0, -130% );
-  transform: rotate( 270deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar11 {
-  -webkit-animation-delay: -0.167s;
-  animation-delay: -0.167s;
-  -webkit-transform: rotate( 300deg ) translate( 0, -130% );
-  -moz-transform: rotate( 300deg ) translate( 0, -130% );
-  -ms-transform: rotate( 300deg ) translate( 0, -130% );
-  transform: rotate( 300deg ) translate( 0, -130% );
-}
-
-.emotion-4 .InnerBar12 {
-  -webkit-animation-delay: -0.0833s;
-  animation-delay: -0.0833s;
-  -webkit-transform: rotate( 330deg ) translate( 0, -130% );
-  -moz-transform: rotate( 330deg ) translate( 0, -130% );
-  -ms-transform: rotate( 330deg ) translate( 0, -130% );
-  transform: rotate( 330deg ) translate( 0, -130% );
-}
-
-<div>
-  <div
-    aria-busy="true"
-    class="components-spinner emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="Spinner"
-    style="height: 16px; width: 16px;"
-  >
-    <div
-      aria-hidden="true"
-      class="emotion-2 emotion-3"
-      style="transform: scale(0.4444444444444444);"
-    >
-      <div
-        class="emotion-4 emotion-5"
-        style="color: rgb(30, 30, 30);"
-      >
-        <div
-          class="InnerBar1"
-        />
-        <div
-          class="InnerBar2"
-        />
-        <div
-          class="InnerBar3"
-        />
-        <div
-          class="InnerBar4"
-        />
-        <div
-          class="InnerBar5"
-        />
-        <div
-          class="InnerBar6"
-        />
-        <div
-          class="InnerBar7"
-        />
-        <div
-          class="InnerBar8"
-        />
-        <div
-          class="InnerBar9"
-        />
-        <div
-          class="InnerBar10"
-        />
-        <div
-          class="InnerBar11"
-        />
-        <div
-          class="InnerBar12"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`props should render size 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -2,16 +2,16 @@
-    <div
-      aria-busy="true"
-      class="components-spinner css-14ywscc-ContainerView e1s9yo7h2"
-      data-wp-c16t="true"
-      data-wp-component="Spinner"
--     style="height: 31px; width: 31px;"
-+     style="height: 16px; width: 16px;"
-    >
-      <div
-        aria-hidden="true"
-        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
--       style="transform: scale(0.8611111111111112);"
-+       style="transform: scale(0.4444444444444444);"
-      >
-        <div
-          class="css-tada40-BarsView e1s9yo7h0"
-          style="color: rgb(30, 30, 30);"
-        >
-`;
diff --git a/packages/components/src/ui/spinner/test/index.js b/packages/components/src/ui/spinner/test/index.js
deleted file mode 100644
index aa9a4360fedff7..00000000000000
--- a/packages/components/src/ui/spinner/test/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Spinner } from '..';
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render( <Spinner /> );
-		expect( container ).toMatchSnapshot();
-	} );
-
-	test( 'should render color', () => {
-		const { container } = render( <Spinner /> );
-		const { container: secondRenderContainer } = render(
-			<Spinner color="blue" />
-		);
-		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
-	} );
-
-	test( 'should render size', () => {
-		const { container } = render( <Spinner /> );
-		const { container: secondRenderContainer } = render(
-			<Spinner size={ 31 } />
-		);
-		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
-	} );
-} );
diff --git a/packages/components/src/ui/spinner/utils.js b/packages/components/src/ui/spinner/utils.js
deleted file mode 100644
index 843ec1133b953d..00000000000000
--- a/packages/components/src/ui/spinner/utils.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const BASE_SIZE = 16;
-export const WRAPPER_SIZE = 36;
diff --git a/packages/components/src/ui/tooltip/README.md b/packages/components/src/ui/tooltip/README.md
deleted file mode 100644
index 424da79828a487..00000000000000
--- a/packages/components/src/ui/tooltip/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Tooltip
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-`Tooltip` is a component to render floating help text relative to a node when it receives focus or when the user places the mouse cursor atop it.
-
-## Usage
-
-```jsx
-import { Tooltip, Text } from '@wordpress/components/ui';
-
-function Example() {
-	return (
-		<Tooltip content="Code is Poetry">
-			<Text>WordPress.org</Text>
-		</Tooltip>
-	);
-}
-```
diff --git a/packages/components/src/ui/tooltip/component.js b/packages/components/src/ui/tooltip/component.js
deleted file mode 100644
index 33106379140ffb..00000000000000
--- a/packages/components/src/ui/tooltip/component.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { TooltipReference, useTooltipState } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, cloneElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { contextConnect, useContextSystem } from '../context';
-import { TooltipContext } from './context';
-import TooltipContent from './content';
-import { TooltipShortcut } from './styles';
-
-/**
- * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                            forwardedRef
- */
-function Tooltip( props, forwardedRef ) {
-	const {
-		animated = true,
-		animationDuration = 160,
-		baseId,
-		children,
-		content,
-		focusable = true,
-		gutter = 4,
-		id,
-		modal = true,
-		placement,
-		visible = false,
-		shortcut,
-		...otherProps
-	} = useContextSystem( props, 'Tooltip' );
-
-	const tooltip = useTooltipState( {
-		animated: animated ? animationDuration : undefined,
-		baseId: baseId || id,
-		gutter,
-		placement,
-		visible,
-		...otherProps,
-	} );
-
-	const contextProps = useMemo(
-		() => ( {
-			tooltip,
-		} ),
-		[ tooltip ]
-	);
-
-	return (
-		<TooltipContext.Provider value={ contextProps }>
-			{ content && (
-				<TooltipContent unstable_portal={ modal } ref={ forwardedRef }>
-					{ content }
-					{ shortcut && <TooltipShortcut shortcut={ shortcut } /> }
-				</TooltipContent>
-			) }
-			{ children && (
-				<TooltipReference
-					{ ...tooltip }
-					{ ...children.props }
-					// @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things)
-					ref={ children?.ref }
-				>
-					{ ( referenceProps ) => {
-						if ( ! focusable ) {
-							referenceProps.tabIndex = undefined;
-						}
-						return cloneElement( children, referenceProps );
-					} }
-				</TooltipReference>
-			) }
-		</TooltipContext.Provider>
-	);
-}
-
-/**
- * `Tooltip` is a component that provides context for a user interface element.
- *
- * @example
- * ```jsx
- * import { Tooltip, Text } from `@wordpress/components/ui`;
- *
- * function Example() {
- * 	return (
- * 		<Tooltip content="Code is Poetry">
- * 			<Text>WordPress.org</Text>
- * 		</Tooltip>
- * 	)
- * }
- * ```
- */
-const ConnectedTooltip = contextConnect( Tooltip, 'Tooltip' );
-
-export default ConnectedTooltip;
diff --git a/packages/components/src/ui/tooltip/content.js b/packages/components/src/ui/tooltip/content.js
deleted file mode 100644
index 7bbf21b44aea8a..00000000000000
--- a/packages/components/src/ui/tooltip/content.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { Tooltip as ReakitTooltip } from 'reakit';
-
-/**
- * Internal dependencies
- */
-import { contextConnect, useContextSystem } from '../context';
-import { View } from '../../view';
-import { useTooltipContext } from './context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-const { TooltipPopoverView } = styles;
-
-/**
- *
- * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
- */
-function TooltipContent( props, forwardedRef ) {
-	const { children, className, ...otherProps } = useContextSystem(
-		props,
-		'TooltipContent'
-	);
-	const { tooltip } = useTooltipContext();
-	const cx = useCx();
-	const classes = cx( styles.TooltipContent, className );
-
-	return (
-		<ReakitTooltip
-			as={ View }
-			{ ...otherProps }
-			{ ...tooltip }
-			className={ classes }
-			ref={ forwardedRef }
-		>
-			<TooltipPopoverView>{ children }</TooltipPopoverView>
-		</ReakitTooltip>
-	);
-}
-
-export default contextConnect( TooltipContent, 'TooltipContent' );
diff --git a/packages/components/src/ui/tooltip/context.js b/packages/components/src/ui/tooltip/context.js
deleted file mode 100644
index de7f81f9cdeb04..00000000000000
--- a/packages/components/src/ui/tooltip/context.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useContext } from '@wordpress/element';
-
-/**
- * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>}
- */
-export const TooltipContext = createContext( {} );
-export const useTooltipContext = () => useContext( TooltipContext );
diff --git a/packages/components/src/ui/tooltip/index.js b/packages/components/src/ui/tooltip/index.js
deleted file mode 100644
index 96841fe7ff4ed9..00000000000000
--- a/packages/components/src/ui/tooltip/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Tooltip } from './component';
-export * from './context';
diff --git a/packages/components/src/ui/tooltip/stories/index.js b/packages/components/src/ui/tooltip/stories/index.js
deleted file mode 100644
index a0032da0d0ab9b..00000000000000
--- a/packages/components/src/ui/tooltip/stories/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Text } from '../../../text';
-import { Tooltip } from '../index';
-
-export default {
-	component: Tooltip,
-	title: 'Components (Experimental)/Tooltip',
-};
-
-export const _default = () => {
-	return (
-		<Tooltip
-			content="Tooltip"
-			visible
-			gutter={ 10 }
-			shortcut={ {
-				display: 'meta + 1',
-				ariaLabel: 'shortcut-aria-label',
-			} }
-		>
-			<Text>Hello</Text>
-		</Tooltip>
-	);
-};
diff --git a/packages/components/src/ui/tooltip/styles.js b/packages/components/src/ui/tooltip/styles.js
deleted file mode 100644
index fca4875a9d1c17..00000000000000
--- a/packages/components/src/ui/tooltip/styles.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { Shortcut } from '../shortcut';
-import * as ZIndex from '../../utils/z-index';
-import CONFIG from '../../utils/config-values';
-import { space } from '../utils/space';
-import { COLORS } from '../../utils/colors-values';
-
-export const TooltipContent = css`
-	z-index: ${ ZIndex.Tooltip };
-	box-sizing: border-box;
-	opacity: 0;
-	outline: none;
-	transform-origin: top center;
-	transition: opacity ${ CONFIG.transitionDurationFastest } ease;
-	font-size: ${ CONFIG.fontSize };
-
-	&[data-enter] {
-		opacity: 1;
-	}
-`;
-
-export const TooltipPopoverView = styled.div`
-	background: rgba( 0, 0, 0, 0.8 );
-	border-radius: 2px;
-	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
-	color: ${ COLORS.white };
-	padding: 4px 8px;
-`;
-
-export const noOutline = css`
-	outline: none;
-`;
-
-export const TooltipShortcut = styled( Shortcut )`
-	display: inline-block;
-	margin-left: ${ space( 1 ) };
-`;
diff --git a/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap b/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap
deleted file mode 100644
index 60edeba1681a25..00000000000000
--- a/packages/components/src/ui/tooltip/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props should render correctly 1`] = `
-.emotion-0 {
-  z-index: 1000002;
-  box-sizing: border-box;
-  opacity: 0;
-  outline: none;
-  transform-origin: top center;
-  -webkit-transition: opacity 100ms ease;
-  transition: opacity 100ms ease;
-  font-size: 13px;
-}
-
-.emotion-0[data-enter] {
-  opacity: 1;
-}
-
-.emotion-2 {
-  background: rgba( 0, 0, 0, 0.8 );
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.04 );
-  color: #fff;
-  padding: 4px 8px;
-}
-
-<div
-  class="components-tooltip-content emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="TooltipContent"
-  id="base-tooltip"
-  role="tooltip"
-  style="position: fixed; left: 100%; top: 100%; pointer-events: none;"
->
-  <div
-    class="emotion-2 emotion-3"
-  >
-    Code is Poetry
-  </div>
-</div>
-`;
diff --git a/packages/components/src/ui/tooltip/test/index.js b/packages/components/src/ui/tooltip/test/index.js
deleted file mode 100644
index f8f9fb36b4238b..00000000000000
--- a/packages/components/src/ui/tooltip/test/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../../../text';
-import { Tooltip } from '../index';
-
-describe( 'props', () => {
-	const baseTooltipId = 'base-tooltip';
-	const baseTooltipTriggerContent = 'WordPress.org - Base trigger content';
-	const byId = ( id ) => ( t ) => t.id === id;
-	const VisibleTooltip = () => (
-		<Tooltip baseId={ baseTooltipId } content="Code is Poetry" visible>
-			<Text>{ baseTooltipTriggerContent }</Text>
-		</Tooltip>
-	);
-
-	test( 'should render correctly', () => {
-		render( <VisibleTooltip /> );
-		const tooltip = screen.getByRole( /tooltip/i );
-		expect( tooltip ).toMatchSnapshot();
-	} );
-
-	test( 'should render invisible', () => {
-		render( <VisibleTooltip /> );
-		const invisibleTooltipTriggerContent = 'WordPress.org - Invisible';
-		render(
-			<Tooltip
-				baseId="test-tooltip"
-				content="Code is Poetry"
-				visible={ false }
-			>
-				<Text>{ invisibleTooltipTriggerContent }</Text>
-			</Tooltip>
-		);
-		const tooltip = screen.getByRole( /tooltip/i );
-		const invisibleTooltipTrigger = screen.getByText(
-			invisibleTooltipTriggerContent
-		);
-		// The base tooltip should render only; invisible tooltip should not render.
-		expect( tooltip ).toBeInTheDocument();
-		// Assert that the rendered tooltip is indeed the base tooltip.
-		expect( tooltip.id ).toBe( baseTooltipId );
-		// But the invisible tooltip's trigger still should have rendered.
-		expect( invisibleTooltipTrigger ).not.toBeUndefined();
-	} );
-
-	test( 'should render without children', () => {
-		render( <VisibleTooltip /> );
-		const childlessTooltipId = 'tooltip-without-children';
-		render(
-			<Tooltip
-				baseId={ childlessTooltipId }
-				content="Code is Poetry"
-				visible
-			/>
-		);
-		const tooltips = screen.getAllByRole( /tooltip/i );
-		const childlessTooltip = tooltips.find( byId( childlessTooltipId ) );
-		expect( childlessTooltip ).not.toBeUndefined();
-	} );
-
-	test( 'should not render a tooltip without content', () => {
-		render( <VisibleTooltip /> );
-		const contentlessTooltipId = 'contentless-tooltip';
-		render(
-			<Tooltip baseId={ contentlessTooltipId } visible>
-				<Text>WordPress.org</Text>
-			</Tooltip>
-		);
-		const tooltip = screen.getByRole( /tooltip/i );
-		// Assert only the base tooltip rendered.
-		expect( tooltip ).toBeInTheDocument();
-		expect( tooltip.id ).toBe( baseTooltipId );
-	} );
-} );
diff --git a/packages/components/src/ui/tooltip/types.ts b/packages/components/src/ui/tooltip/types.ts
deleted file mode 100644
index 7c50dca3a29371..00000000000000
--- a/packages/components/src/ui/tooltip/types.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import type { TooltipInitialState, TooltipProps } from 'reakit';
-import type { ReactElement, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
-import type { PopperProps } from '../utils/types';
-import type { ShortcutProps } from '../shortcut';
-
-export type Props = TooltipInitialState &
-	PopperProps &
-	Pick< ShortcutProps, 'shortcut' > & {
-		/**
-		 * Determines if `Tooltip` has animations.
-		 */
-		animated?: boolean;
-		/**
-		 * The duration of `Tooltip` animations.
-		 *
-		 * @default 160
-		 */
-		animationDuration?: boolean;
-		/**
-		 * ID that will serve as a base for all the items IDs.
-		 *
-		 * @see https://reakit.io/docs/tooltip/#usetooltipstate
-		 */
-		baseId?: string;
-		/**
-		 * Content to render within the `Tooltip` floating label.
-		 */
-		content?: ReactElement;
-		/**
-		 * Spacing between the `Tooltip` reference and the floating label.
-		 *
-		 * @default 4
-		 *
-		 * @see https://reakit.io/docs/tooltip/#usetooltipstate
-		 */
-		gutter?: number;
-		/**
-		 * Whether or not the dialog should be rendered within `Portal`. It's true by default if modal is true.
-		 *
-		 * @default true
-		 *
-		 * @see https://reakit.io/docs/tooltip/#tooltip
-		 */
-		modal?: boolean;
-		/**
-		 * Whether `Tooltip` is visible.
-		 *
-		 * @default false
-		 *
-		 * @see https://reakit.io/docs/tooltip/#usetooltipstate
-		 */
-		visible?: boolean;
-		children: ReactElement;
-		focusable?: boolean;
-	};
-
-export type ContentProps = TooltipProps & {
-	children: ReactNode;
-};
diff --git a/packages/components/src/ui/utils/colors.js b/packages/components/src/ui/utils/colors.js
deleted file mode 100644
index 32d0d21aef47ec..00000000000000
--- a/packages/components/src/ui/utils/colors.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-/** @type {HTMLDivElement} */
-let colorComputationNode;
-
-extend( [ namesPlugin ] );
-
-/**
- * @return {HTMLDivElement | undefined} The HTML element for color computation.
- */
-function getColorComputationNode() {
-	if ( typeof document === 'undefined' ) return;
-
-	if ( ! colorComputationNode ) {
-		// Create a temporary element for style computation.
-		const el = document.createElement( 'div' );
-		el.setAttribute( 'data-g2-color-computation-node', '' );
-		// Inject for window computed style.
-		document.body.appendChild( el );
-		colorComputationNode = el;
-	}
-
-	return colorComputationNode;
-}
-
-/**
- * @param {string | unknown} value
- *
- * @return {boolean} Whether the value is a valid color.
- */
-function isColor( value ) {
-	if ( typeof value !== 'string' ) return false;
-	const test = colord( value );
-
-	return test.isValid();
-}
-
-/**
- * Retrieves the computed background color. This is useful for getting the
- * value of a CSS variable color.
- *
- * @param {string | unknown} backgroundColor The background color to compute.
- *
- * @return {string} The computed background color.
- */
-function _getComputedBackgroundColor( backgroundColor ) {
-	if ( typeof backgroundColor !== 'string' ) return '';
-
-	if ( isColor( backgroundColor ) ) return backgroundColor;
-
-	if ( ! backgroundColor.includes( 'var(' ) ) return '';
-	if ( typeof document === 'undefined' ) return '';
-
-	// Attempts to gracefully handle CSS variables color values.
-	const el = getColorComputationNode();
-	if ( ! el ) return '';
-
-	el.style.background = backgroundColor;
-	// Grab the style.
-	const computedColor = window?.getComputedStyle( el ).background;
-	// Reset.
-	el.style.background = '';
-
-	return computedColor || '';
-}
-
-const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor The background color.
- *
- * @return {string} The optimized text color (black or white).
- */
-export function getOptimalTextColor( backgroundColor ) {
-	const background = getComputedBackgroundColor( backgroundColor );
-
-	return colord( background ).isLight() ? '#000000' : '#ffffff';
-}
-
-/**
- * Get the text shade optimized for readability, based on a background color.
- *
- * @param {string | unknown} backgroundColor The background color.
- *
- * @return {string} The optimized text shade (dark or light).
- */
-export function getOptimalTextShade( backgroundColor ) {
-	const result = getOptimalTextColor( backgroundColor );
-
-	return result === '#000000' ? 'dark' : 'light';
-}
diff --git a/packages/components/src/ui/utils/get-high-dpi.ts b/packages/components/src/ui/utils/get-high-dpi.ts
deleted file mode 100644
index 17e6ad2a2c0951..00000000000000
--- a/packages/components/src/ui/utils/get-high-dpi.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-// eslint-disable-next-line no-restricted-imports
-import type { CSSInterpolation } from '@emotion/css';
-
-export function getHighDpi(
-	strings: TemplateStringsArray,
-	...interpolations: CSSInterpolation[]
-) {
-	const interpolatedStyles = css( strings, ...interpolations );
-
-	return css`
-		@media ( -webkit-min-device-pixel-ratio: 1.25 ),
-			( min-resolution: 120dpi ) {
-			${ interpolatedStyles }
-		}
-	`;
-}
diff --git a/packages/components/src/ui/utils/index.js b/packages/components/src/ui/utils/index.js
deleted file mode 100644
index c6f4adde96a523..00000000000000
--- a/packages/components/src/ui/utils/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { getOptimalTextShade } from './colors';
diff --git a/packages/components/src/ui/utils/test/colors.js b/packages/components/src/ui/utils/test/colors.js
deleted file mode 100644
index eb52b5dbb223bf..00000000000000
--- a/packages/components/src/ui/utils/test/colors.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getOptimalTextColor, getOptimalTextShade } from '../colors';
-
-describe( 'getOptimalTextColor', () => {
-	test( 'should be white for dark backgrounds', () => {
-		expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' );
-		expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' );
-		expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' );
-		expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' );
-		expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' );
-		expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' );
-	} );
-
-	test( 'should be black for light backgrounds', () => {
-		expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' );
-		expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' );
-		expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' );
-		expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' );
-		expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' );
-	} );
-} );
-
-describe( 'getOptimalTextShade', () => {
-	test( 'should be "light" for dark backgrounds', () => {
-		expect( getOptimalTextShade( 'black' ) ).toBe( 'light' );
-		expect( getOptimalTextShade( '#000' ) ).toBe( 'light' );
-		expect( getOptimalTextShade( '#111' ) ).toBe( 'light' );
-		expect( getOptimalTextShade( '#123' ) ).toBe( 'light' );
-		expect( getOptimalTextShade( '#555' ) ).toBe( 'light' );
-		expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' );
-	} );
-
-	test( 'should be "dark" for light backgrounds', () => {
-		expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' );
-		expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' );
-		expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' );
-		expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' );
-		expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' );
-	} );
-} );
diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/ui/utils/types.ts
deleted file mode 100644
index 538413204f7814..00000000000000
--- a/packages/components/src/ui/utils/types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export type ResponsiveCSSValue< T > = Array< T | undefined > | T;
-
-export type PopperPlacement =
-	| 'auto'
-	| 'auto-start'
-	| 'auto-end'
-	| 'top'
-	| 'top-start'
-	| 'top-end'
-	| 'right'
-	| 'right-start'
-	| 'right-end'
-	| 'bottom'
-	| 'bottom-start'
-	| 'bottom-end'
-	| 'left'
-	| 'left-start'
-	| 'left-end';
-
-export type PopperProps = {
-	/**
-	 * Position of the popover element.
-	 *
-	 * @default 'auto'
-	 *
-	 * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode
-	 */
-	placement?: PopperPlacement;
-};
-
-export type SizeRangeDefault =
-	| 'xLarge'
-	| 'large'
-	| 'medium'
-	| 'small'
-	| 'xSmall';
diff --git a/packages/components/src/unit-control/README.md b/packages/components/src/unit-control/README.md
index 5999d905cb2943..65d9e4b74062dd 100644
--- a/packages/components/src/unit-control/README.md
+++ b/packages/components/src/unit-control/README.md
@@ -9,13 +9,13 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
 
-	return <UnitControl onChange={ setValue } value={ value } />;
+	return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
 };
 ```
 
@@ -67,6 +67,12 @@ Callback invoked when either the quantity or unit inputs fire the `blur` event.
 
 -   Required: No
 
+### `onFocus`: `FocusEventHandler< HTMLInputElement | HTMLSelectElement >`
+
+Callback invoked when either the quantity or unit inputs fire the `focus` event.
+
+-   Required: No
+
 ### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
@@ -109,8 +115,8 @@ Collection of available units.
 Example:
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '10px' );
@@ -121,7 +127,9 @@ const Example = () => {
 		{ value: 'em', label: 'em', default: 0 },
 	];
 
-	return <UnitControl onChange={ setValue } value={ value } units={units} />;
+	return (
+		<UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } units={ units } />
+	);
 };
 ```
 
@@ -135,7 +143,14 @@ For example, a `value` of `50%` will set the current unit to `%`.
 Example:
 
 ```jsx
-<UnitControl value="50%" />
+<UnitControl __next40pxDefaultSize value="50%" />
 ```
 
 -   Required: No
+
+### `__next40pxDefaultSize`: `boolean`
+
+Start opting into the larger default height that will become the default size in a future version.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/unit-control/index.native.js b/packages/components/src/unit-control/index.native.js
index a4c0b913f53432..4aae14de65779e 100644
--- a/packages/components/src/unit-control/index.native.js
+++ b/packages/components/src/unit-control/index.native.js
@@ -47,10 +47,8 @@ function UnitControl( {
 		if ( pickerRef?.current ) {
 			pickerRef.current.presentPicker();
 		}
-		// Disable reason: this should be fixed by the native team.
-		// It would be great if this could be done in the context of
+		// It would be great if the deps could be addressed in the context of
 		// https://github.com/WordPress/gutenberg/pull/39218
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ pickerRef?.current ] );
 
 	const currentInputValue = currentInput === null ? value : currentInput;
@@ -106,10 +104,8 @@ function UnitControl( {
 			anchorNodeRef?.current
 				? findNodeHandle( anchorNodeRef?.current )
 				: undefined,
-		// Disable reason: this should be fixed by the native team.
-		// It would be great if this could be done in the context of
+		// It would be great if the deps could be addressed in the context of
 		// https://github.com/WordPress/gutenberg/pull/39218
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ anchorNodeRef?.current ]
 	);
 
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index 5af79504e66b93..65e1e56cda3b3b 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -1,13 +1,8 @@
 /**
  * External dependencies
  */
-import type {
-	FocusEventHandler,
-	KeyboardEvent,
-	ForwardedRef,
-	SyntheticEvent,
-} from 'react';
-import classnames from 'classnames';
+import type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -19,8 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import * as inputControlActionTypes from '../input-control/reducer/actions';
+import type { WordPressComponentProps } from '../context';
 import { ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
@@ -30,8 +24,10 @@ import {
 	getValidParsedQuantityAndUnit,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
+import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
-import type { StateReducer } from '../input-control/reducer/state';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -42,7 +38,7 @@ function UnforwardedUnitControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
-		__unstableStateReducer: stateReducerProp,
+		__unstableStateReducer,
 		autoComplete = 'off',
 		// @ts-expect-error Ensure that children is omitted from restProps
 		children,
@@ -59,9 +55,17 @@ function UnforwardedUnitControl(
 		unit: unitProp,
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
-		onBlur: onBlurProp,
+		onFocus: onFocusProp,
+		__shouldNotWarnDeprecated36pxSize,
 		...props
-	} = unitControlProps;
+	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
+
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'UnitControl',
+		__next40pxDefaultSize: props.__next40pxDefaultSize,
+		size,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
 
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {
@@ -75,10 +79,24 @@ function UnforwardedUnitControl(
 	// ensures it fallback to `undefined` in case a consumer of `UnitControl`
 	// still passes `null` as a `value`.
 	const nonNullValueProp = valueProp ?? undefined;
-	const units = useMemo(
-		() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),
-		[ nonNullValueProp, unitProp, unitsProp ]
-	);
+	const [ units, reFirstCharacterOfUnits ] = useMemo( () => {
+		const list = getUnitsWithCurrentUnit(
+			nonNullValueProp,
+			unitProp,
+			unitsProp
+		);
+		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
+		const firstCharacters = rest.reduce(
+			( carry, { value } ) => {
+				const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
+				return carry.includes( first )
+					? carry
+					: `${ carry }|${ first }`;
+			},
+			escapeRegExp( firstUnitValue.substring( 0, 1 ) )
+		);
+		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
+	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(
 		nonNullValueProp,
 		unitProp,
@@ -99,10 +117,7 @@ function UnforwardedUnitControl(
 		}
 	}, [ parsedUnit, setUnit ] );
 
-	// Stores parsed value for hand-off in state reducer.
-	const refParsedQuantity = useRef< number | undefined >( undefined );
-
-	const classes = classnames(
+	const classes = clsx(
 		'components-unit-control',
 		// This class is added for legacy purposes to maintain it on the outer
 		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
@@ -157,93 +172,41 @@ function UnforwardedUnitControl(
 		setUnit( nextUnitValue );
 	};
 
-	const mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {
-		if ( ! isNaN( Number( event.currentTarget.value ) ) ) {
-			refParsedQuantity.current = undefined;
-			return;
-		}
-		const [ validParsedQuantity, validParsedUnit ] =
-			getValidParsedQuantityAndUnit(
-				event.currentTarget.value,
-				units,
-				parsedQuantity,
-				unit
-			);
-
-		refParsedQuantity.current = validParsedQuantity;
-
-		if ( isPressEnterToChange && validParsedUnit !== unit ) {
-			const data = Array.isArray( units )
-				? units.find( ( option ) => option.value === validParsedUnit )
-				: undefined;
-			const changeProps = { event, data };
-
-			// The `onChange` callback already gets called, no need to call it explicitly.
-			onUnitChange?.( validParsedUnit, changeProps );
-
-			setUnit( validParsedUnit );
-		}
-	};
-
-	const handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {
-		mayUpdateUnit( event );
-		onBlurProp?.( event );
-	};
-
-	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
-		const { key } = event;
-		if ( key === 'Enter' ) {
-			mayUpdateUnit( event );
-		}
-	};
-
-	/**
-	 * "Middleware" function that intercepts updates from InputControl.
-	 * This allows us to tap into actions to transform the (next) state for
-	 * InputControl.
-	 *
-	 * @param  state  State from InputControl
-	 * @param  action Action triggering state change
-	 * @return The updated state to apply to InputControl
-	 */
-	const unitControlStateReducer: StateReducer = ( state, action ) => {
-		const nextState = { ...state };
-
-		/*
-		 * On commits (when pressing ENTER and on blur if
-		 * isPressEnterToChange is true), if a parse has been performed
-		 * then use that result to update the state.
-		 */
-		if ( action.type === inputControlActionTypes.COMMIT ) {
-			if ( refParsedQuantity.current !== undefined ) {
-				nextState.value = (
-					refParsedQuantity.current ?? ''
-				).toString();
-				refParsedQuantity.current = undefined;
+	let handleOnKeyDown;
+	if ( ! disableUnits && isUnitSelectTabbable && units.length ) {
+		handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
+			props.onKeyDown?.( event );
+			// Unless the meta or ctrl key was pressed (to avoid interfering with
+			// shortcuts, e.g. pastes), move focus to the unit select if a key
+			// matches the first character of a unit.
+			if (
+				! event.metaKey &&
+				! event.ctrlKey &&
+				reFirstCharacterOfUnits.test( event.key )
+			) {
+				refInputSuffix.current?.focus();
 			}
-		}
-
-		return nextState;
-	};
-
-	let stateReducer: StateReducer = unitControlStateReducer;
-	if ( stateReducerProp ) {
-		stateReducer = ( state, action ) => {
-			const baseState = unitControlStateReducer( state, action );
-			return stateReducerProp( baseState, action );
 		};
 	}
 
+	const refInputSuffix = useRef< HTMLSelectElement >( null );
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
+			ref={ refInputSuffix }
 			aria-label={ __( 'Select unit' ) }
 			disabled={ disabled }
 			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
-			size={ size }
+			size={
+				[ 'small', 'compact' ].includes( size ) ||
+				( size === 'default' && ! props.__next40pxDefaultSize )
+					? 'small'
+					: 'default'
+			}
 			unit={ unit }
 			units={ units }
-			onBlur={ onBlurProp }
+			onFocus={ onFocusProp }
+			onBlur={ unitControlProps.onBlur }
 		/>
 	) : null;
 
@@ -260,23 +223,24 @@ function UnforwardedUnitControl(
 
 	return (
 		<ValueInput
-			type={ isPressEnterToChange ? 'text' : 'number' }
 			{ ...props }
+			__shouldNotWarnDeprecated36pxSize
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }
 			spinControls="none"
 			isPressEnterToChange={ isPressEnterToChange }
 			label={ label }
-			onBlur={ handleOnBlur }
 			onKeyDown={ handleOnKeyDown }
 			onChange={ handleOnQuantityChange }
 			ref={ forwardedRef }
 			size={ size }
 			suffix={ inputSuffix }
+			type={ isPressEnterToChange ? 'text' : 'number' }
 			value={ parsedQuantity ?? '' }
 			step={ step }
-			__unstableStateReducer={ stateReducer }
+			onFocus={ onFocusProp }
+			__unstableStateReducer={ __unstableStateReducer }
 		/>
 	);
 }
@@ -285,7 +249,6 @@ function UnforwardedUnitControl(
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
- * @example
  * ```jsx
  * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
@@ -293,7 +256,7 @@ function UnforwardedUnitControl(
  * const Example = () => {
  *   const [ value, setValue ] = useState( '10px' );
  *
- *   return <UnitControl onChange={ setValue } value={ value } />;
+ *   return <UnitControl __next40pxDefaultSize onChange={ setValue } value={ value } />;
  * };
  * ```
  */
diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx
new file mode 100644
index 00000000000000..3a9da70ad5095f
--- /dev/null
+++ b/packages/components/src/unit-control/stories/index.story.tsx
@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { UnitControl } from '../';
+import { CSS_UNITS } from '../utils';
+
+const meta: Meta< typeof UnitControl > = {
+	component: UnitControl,
+	title: 'Components (Experimental)/Selection & Input/UnitControl',
+	id: 'components-experimental-unitcontrol',
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		onUnitChange: { control: false },
+		prefix: { control: { type: 'text' } },
+		value: { control: false },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '10px' );
+
+	return (
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
+	);
+};
+
+export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
+	{}
+);
+Default.args = {
+	label: 'Label',
+	__next40pxDefaultSize: true,
+};
+
+/**
+ * If the `isPressEnterToChange` prop is set to `true`, the `onChange` callback
+ * will not fire while a new value is typed in the input field (you can verify this
+ * behavior by inspecting the console's output).
+ */
+export const PressEnterToChange: StoryFn< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
+PressEnterToChange.args = {
+	...Default.args,
+	isPressEnterToChange: true,
+};
+
+/**
+ * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
+ * affect its numeric input field.
+ */
+export const TweakingTheNumberInput: StoryFn< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
+TweakingTheNumberInput.args = {
+	...Default.args,
+	min: 0,
+	max: 100,
+	step: 'any',
+	label: 'Custom label',
+};
+
+/**
+ * When only one unit is available, the unit selection dropdown becomes static text.
+ */
+export const WithSingleUnit: StoryFn< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
+WithSingleUnit.args = {
+	...Default.args,
+	units: CSS_UNITS.slice( 0, 1 ),
+};
+
+/**
+ * It is possible to pass a custom list of units. Every time the unit changes,
+ * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
+ * reset to the new unit's default value.
+ */
+export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState< string | undefined >( '80km' );
+
+	return (
+		<UnitControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v, extra ) => {
+				setValue( v );
+				onChange?.( v, extra );
+			} }
+		/>
+	);
+};
+WithCustomUnits.args = {
+	...Default.args,
+	isResetValueOnUnitChange: true,
+	min: 0,
+	units: [
+		{
+			value: 'km',
+			label: 'km',
+			default: 1,
+		},
+		{
+			value: 'mi',
+			label: 'mi',
+			default: 1,
+		},
+		{
+			value: 'm',
+			label: 'm',
+			default: 1000,
+		},
+		{
+			value: 'yd',
+			label: 'yd',
+			default: 1760,
+		},
+	],
+};
diff --git a/packages/components/src/unit-control/stories/index.tsx b/packages/components/src/unit-control/stories/index.tsx
deleted file mode 100644
index 6fe4b49a5687db..00000000000000
--- a/packages/components/src/unit-control/stories/index.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { UnitControl } from '../';
-import { CSS_UNITS } from '../utils';
-
-const meta: ComponentMeta< typeof UnitControl > = {
-	component: UnitControl,
-	title: 'Components (Experimental)/UnitControl',
-	argTypes: {
-		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: { type: null } },
-		onChange: { control: { type: null } },
-		onUnitChange: { control: { type: null } },
-		prefix: { control: { type: 'text' } },
-		value: { control: { type: null } },
-	},
-	parameters: {
-		actions: { argTypesRegex: '^on.*' },
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState< string | undefined >( '10px' );
-
-	return (
-		<UnitControl
-			{ ...args }
-			value={ value }
-			onChange={ ( v, extra ) => {
-				setValue( v );
-				onChange?.( v, extra );
-			} }
-		/>
-	);
-};
-
-export const Default: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
-Default.args = {
-	label: 'Label',
-};
-
-/**
- * If the `isPressEnterToChange` prop is set to `true`, the `onChange` callback
- * will not fire while a new value is typed in the input field (you can verify this
- * behavior by inspecting the console's output).
- */
-export const PressEnterToChange: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
-PressEnterToChange.args = {
-	...Default.args,
-	isPressEnterToChange: true,
-	onChange: ( v ) => {
-		// eslint-disable-next-line no-console
-		console.log( v );
-	},
-};
-
-/**
- * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
- * affect its numeric input field.
- */
-export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
-TweakingTheNumberInput.args = {
-	...Default.args,
-	min: 0,
-	max: 100,
-	step: 'any',
-	label: 'Custom label',
-};
-
-/**
- * When only one unit is available, the unit selection dropdown becomes static text.
- */
-export const WithSingleUnit: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
-WithSingleUnit.args = {
-	...Default.args,
-	units: CSS_UNITS.slice( 0, 1 ),
-};
-
-/**
- * It is possible to pass a custom list of units. Every time the unit changes,
- * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
- * reset to the new unit's default value.
- */
-export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ value, setValue ] = useState< string | undefined >( '80km' );
-
-	return (
-		<UnitControl
-			{ ...args }
-			value={ value }
-			onChange={ ( v, extra ) => {
-				setValue( v );
-				onChange?.( v, extra );
-			} }
-		/>
-	);
-};
-WithCustomUnits.args = {
-	...Default.args,
-	isResetValueOnUnitChange: true,
-	min: 0,
-	units: [
-		{
-			value: 'km',
-			label: 'km',
-			default: 1,
-		},
-		{
-			value: 'mi',
-			label: 'mi',
-			default: 1,
-		},
-		{
-			value: 'm',
-			label: 'm',
-			default: 1000,
-		},
-		{
-			value: 'yd',
-			label: 'yd',
-			default: 1760,
-		},
-	],
-};
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index 9cf51b2d3bbdae..8ec575c8499ec2 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -10,7 +10,7 @@ import { COLORS, CONFIG, rtl } from '../../utils';
 import NumberControl from '../../number-control';
 import { BackdropUI } from '../../input-control/styles/input-control-styles';
 import type { SelectSize } from '../types';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 // Using `selectSize` instead of `size` to avoid a type conflict with the
 // `size` HTML attribute of the `select` element.
@@ -36,35 +36,43 @@ export const ValueInput = styled( NumberControl )`
 
 const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
-		default: css`
+		small: css`
 			box-sizing: border-box;
 			padding: 2px 1px;
 			width: 20px;
-			color: ${ COLORS.gray[ 800 ] };
 			font-size: 8px;
 			line-height: 1;
 			letter-spacing: -0.5px;
 			text-transform: uppercase;
 			text-align-last: center;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.gray[ 800 ] };
+			}
 		`,
-		large: css`
+		default: css`
 			box-sizing: border-box;
 			min-width: 24px;
 			max-width: 48px;
 			height: 24px;
 			margin-inline-end: ${ space( 2 ) };
 			padding: ${ space( 1 ) };
-			color: ${ COLORS.ui.theme };
+
 			font-size: 13px;
 			line-height: 1;
 			text-align-last: center;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
+			field-sizing: content;
+
+			&:not( :disabled ) {
+				color: ${ COLORS.theme.accent };
+			}
 		`,
 	};
 
-	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+	return sizes[ selectSize ];
 };
 
 export const UnitLabel = styled.div< SelectProps >`
@@ -79,10 +87,12 @@ export const UnitLabel = styled.div< SelectProps >`
 
 const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
-		default: css`
+		small: css`
 			height: 100%;
 			border: 1px solid transparent;
-			transition: box-shadow 0.1s linear, border 0.1s linear;
+			transition:
+				box-shadow 0.1s linear,
+				border 0.1s linear;
 
 			${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }
 
@@ -99,14 +109,13 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 				z-index: 1;
 			}
 		`,
-		large: css`
+		default: css`
 			display: flex;
 			justify-content: center;
 			align-items: center;
 
-			&:hover {
-				color: ${ COLORS.ui.borderFocus };
-				box-shadow: inset 0 0 0
+			&:where( :not( :disabled ) ):hover {
+				box-shadow: 0 0 0
 					${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };
 				outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode
 			}
@@ -119,7 +128,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 		`,
 	};
 
-	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+	return sizes[ selectSize ];
 };
 
 export const UnitSelect = styled.select< SelectProps >`
@@ -127,7 +136,7 @@ export const UnitSelect = styled.select< SelectProps >`
 	&&& {
 		appearance: none;
 		background: transparent;
-		border-radius: 2px;
+		border-radius: ${ CONFIG.radiusXSmall };
 		border: none;
 		display: block;
 		outline: none;
diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx
index c4b6e80eba3562..ad98d57cae6405 100644
--- a/packages/components/src/unit-control/test/index.tsx
+++ b/packages/components/src/unit-control/test/index.tsx
@@ -12,9 +12,12 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import UnitControl from '..';
-import { parseQuantityAndUnitFromRawValue } from '../utils';
-import type { UnitControlOnChangeCallback } from '../types';
+import _UnitControl from '..';
+import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
+
+const UnitControl = ( props: React.ComponentProps< typeof _UnitControl > ) => (
+	<_UnitControl __next40pxDefaultSize { ...props } />
+);
 
 const getInput = ( {
 	isInputTypeText = false,
@@ -85,15 +88,6 @@ const ControlledSyncUnits = () => {
 };
 
 describe( 'UnitControl', () => {
-	beforeEach( () => {
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
 			render( <UnitControl /> );
@@ -112,9 +106,11 @@ describe( 'UnitControl', () => {
 			);
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 				withClassName.querySelector( '.components-unit-control' )
 			).toHaveClass( 'hello' );
 		} );
@@ -143,14 +139,10 @@ describe( 'UnitControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '50px';
-			const setState = jest.fn( ( value ) => ( state = value ) );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -160,91 +152,85 @@ describe( 'UnitControl', () => {
 			// - 1: clear
 			// - 2: type '6'
 			// - 3: type '62'
-			expect( setState ).toHaveBeenCalledTimes( 3 );
-			expect( state ).toBe( '62px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'62px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should increment value on UP press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | undefined = '50px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
 
-			expect( state ).toBe( '51px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'51px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | undefined = '50px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
 
-			expect( state ).toBe( '60px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'60px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowDown}' );
 
-			expect( state ).toBe( '49px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'49px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
 
-			expect( state ).toBe( '40px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'40px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
+					value={ 50 }
+					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
 			);
@@ -252,35 +238,27 @@ describe( 'UnitControl', () => {
 			// Input type is `text` when the `isPressEnterToChange` prop is passed
 			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
-			await user.type( input, '300px' );
+			await user.type( input, '300' );
 
-			expect( input.value ).toBe( '300px' );
-			expect( state ).toBe( 50 );
+			expect( input.value ).toBe( '300' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
 
 			await user.keyboard( '{Escape}' );
 
 			expect( input.value ).toBe( '50' );
-			expect( state ).toBe( 50 );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
 
-			let state: string | undefined = '33%';
-			const setState: UnitControlOnChangeCallback = ( nextState ) => {
-				onChangeSpy( nextState );
-				state = nextState;
-			};
-
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
+					value="33%"
+					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
 				/>
 			);
@@ -290,7 +268,10 @@ describe( 'UnitControl', () => {
 			await user.type( input, '41' );
 
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
-			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41%' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'41%',
+				expect.anything()
+			);
 
 			// Clicking document.body to trigger a blur event on the input.
 			await user.click( document.body );
@@ -298,25 +279,15 @@ describe( 'UnitControl', () => {
 			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );
 
-		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+		it( 'should invoke onChange when isPressEnterToChange is true and the input is blurred with an uncommitted value', async () => {
+			const user = userEvent.setup();
 
-			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
 
-			let state: string | undefined = '15px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) => {
-				onChangeSpy( nextState );
-				state = nextState;
-			};
-
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
-					onUnitChange={ onUnitChangeSpy }
+					value="15px"
+					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
 			);
@@ -324,29 +295,24 @@ describe( 'UnitControl', () => {
 			// Input type is `text` when the `isPressEnterToChange` prop is passed
 			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
-			await user.type( input, '41vh' );
-
-			// This is because `isPressEnterToChange` is `true`
-			expect( onChangeSpy ).not.toHaveBeenCalled();
-			expect( onUnitChangeSpy ).not.toHaveBeenCalled();
-
-			// Clicking document.body to trigger a blur event on the input.
-			await user.click( document.body );
+			// Typing the first letter of a unit blurs the input.
+			await user.type( input, '41v' );
 
+			// Called only once because `isPressEnterToChange` is `true`.
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41vh' );
 
-			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
-				'vh',
+			// The correct expected behavior would be for the `onChangeSpy` callback
+			// to be called twice, first with `41px` and immediately after with `41vh`,
+			// but the test environment doesn't seem to change values on `select`
+			// elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'41px',
 				expect.anything()
 			);
 		} );
 
 		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onChangeSpy = jest.fn();
 			render(
@@ -380,57 +346,57 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | undefined = '14rem';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			const spy = jest.fn();
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
+			const onUnitChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
-					onUnitChange={ spy }
+					value="14rem"
+					onChange={ onChangeSpy }
+					onUnitChange={ onUnitChangeSpy }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'px' ] );
 
-			expect( spy ).toHaveBeenCalledWith( 'px', expect.anything() );
-			expect( state ).toBe( '14px' );
+			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
+				'px',
+				expect.anything()
+			);
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'14px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should render customized units, if defined', () => {
 			const units = [
 				{ value: 'pt', label: 'pt', default: 0 },
 				{ value: 'vmax', label: 'vmax', default: 10 },
+				// Proves that units with regex control characters don't error.
+				{ value: '+', label: '+', default: 10 },
 			];
 
 			render( <UnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
-			expect( options.length ).toBe( 2 );
+			expect( options.length ).toBe( 3 );
 
-			const [ pt, vmax ] = options;
+			const [ pt, vmax, plus ] = options;
 
 			expect( pt.value ).toBe( 'pt' );
 			expect( vmax.value ).toBe( 'vmax' );
+			expect( plus.value ).toBe( '+' );
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -441,29 +407,32 @@ describe( 'UnitControl', () => {
 				<UnitControl
 					isResetValueOnUnitChange
 					units={ units }
-					onChange={ setState }
-					value={ state }
+					onChange={ onChangeSpy }
+					value={ 50 }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
 
-			expect( state ).toBe( '75vmax' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'75vmax',
+				expect.anything()
+			);
 
 			await user.selectOptions( select, [ 'pt' ] );
 
-			expect( state ).toBe( '25pt' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'25pt',
+				expect.anything()
+			);
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -473,36 +442,39 @@ describe( 'UnitControl', () => {
 			render(
 				<UnitControl
 					isResetValueOnUnitChange={ false }
-					value={ state }
+					value={ 50 }
 					units={ units }
-					onChange={ setState }
+					onChange={ onChangeSpy }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
 
-			expect( state ).toBe( '50vmax' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'50vmax',
+				expect.anything()
+			);
 
 			await user.selectOptions( select, [ 'pt' ] );
 
-			expect( state ).toBe( '50pt' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'50pt',
+				expect.anything()
+			);
 		} );
 
 		it( 'should set correct unit if single units', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state: string | undefined = '50%';
-			const setState: UnitControlOnChangeCallback = ( value ) =>
-				( state = value );
+			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
+					value="50%"
 					units={ [ { value: '%', label: '%' } ] }
-					onChange={ setState }
+					onChange={ onChangeSpy }
 				/>
 			);
 
@@ -510,13 +482,19 @@ describe( 'UnitControl', () => {
 			await user.clear( input );
 			await user.type( input, '62' );
 
-			expect( state ).toBe( '62%' );
+			// 3 times:
+			// - 1: clear
+			// - 2: type '6'
+			// - 3: type '62'
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'62%',
+				expect.anything()
+			);
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <ControlledSyncUnits /> );
 
@@ -546,9 +524,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const units = [
 				{ value: 'pt', label: 'pt' },
@@ -567,9 +543,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when the unit select is blurred', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onUnitChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
@@ -599,145 +573,20 @@ describe( 'UnitControl', () => {
 	} );
 
 	describe( 'Unit Parser', () => {
-		it( 'should parse unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '55 em' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '55em' );
-		} );
-
-		it( 'should parse PX unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '61   PX' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '61px' );
-		} );
-
-		it( 'should parse EM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '55 em' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '55em' );
-		} );
-
-		it( 'should parse % unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '-10  %' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '-10%' );
-		} );
-
-		it( 'should parse REM unit from input', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '123       rEm  ' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '123rem' );
-		} );
-
 		it( 'should update unit after initial render and with new unit prop', async () => {
-			const { rerender } = render( <UnitControl value={ '10%' } /> );
+			const { rerender } = render( <UnitControl value="10%" /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20vh' } /> );
+			rerender( <UnitControl value="20vh" /> );
 
 			expect( select.value ).toBe( 'vh' );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {
-			render( <UnitControl value={ '10null' } /> );
+			render( <UnitControl value="10null" /> );
 
 			expect( getSelect().value ).toBe( 'px' );
 		} );
@@ -745,7 +594,7 @@ describe( 'UnitControl', () => {
 		it( 'should display valid CSS unit when not explicitly included in units list', () => {
 			render(
 				<UnitControl
-					value={ '10%' }
+					value="10%"
 					units={ [
 						{ value: 'px', label: 'px' },
 						{ value: 'em', label: 'em' },
@@ -760,4 +609,41 @@ describe( 'UnitControl', () => {
 			expect( options.length ).toBe( 3 );
 		} );
 	} );
+
+	describe( 'Unit switching convenience', () => {
+		it.each( CSS_UNITS.map( ( { value } ) => value ) )(
+			'should move focus from the input to the unit select when typing the first character of %p',
+			async ( testUnit ) => {
+				const user = userEvent.setup();
+				const onChangeSpy = jest.fn();
+				const onUnitChangeSpy = jest.fn();
+
+				render(
+					<UnitControl
+						value="10%"
+						onChange={ onChangeSpy }
+						onUnitChange={ onUnitChangeSpy }
+					/>
+				);
+
+				const input = getInput();
+				await user.clear( input );
+				await user.type( input, `55${ testUnit }` );
+
+				expect( getSelect() ).toHaveFocus();
+				// The unit character was not entered in the input.
+				expect( input ).toHaveValue( 55 );
+
+				// The correct expected behavior would be for onChangeSpy to be
+				// called 4 times, and for the last value it was called with to be
+				// `55${testUnit}`, but the test environment doesn't seem to change
+				// values on `select` elements when using the keyboard.
+				expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+				expect( onChangeSpy ).toHaveBeenLastCalledWith(
+					'55%',
+					expect.anything()
+				);
+			}
+		);
+	} );
 } );
diff --git a/packages/components/src/unit-control/test/utils.ts b/packages/components/src/unit-control/test/utils.ts
index b843764f4a57ee..c35167ae49243c 100644
--- a/packages/components/src/unit-control/test/utils.ts
+++ b/packages/components/src/unit-control/test/utils.ts
@@ -248,7 +248,7 @@ describe( 'UnitControl utils', () => {
 		const cases: [
 			number | string | undefined,
 			number | undefined,
-			string | undefined
+			string | undefined,
 		][] = [
 			// Test undefined.
 			[ undefined, undefined, undefined ],
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index ecb9950d7167cc..891945b422862a 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -9,11 +9,10 @@ import type { FocusEventHandler } from 'react';
 import type {
 	InputChangeCallback,
 	InputControlProps,
-	Size as InputSize,
 } from '../input-control/types';
 import type { NumberControlProps } from '../number-control/types';
 
-export type SelectSize = InputSize;
+export type SelectSize = 'default' | 'small';
 
 export type WPUnitControlUnit = {
 	/**
@@ -42,7 +41,7 @@ export type UnitControlOnChangeCallback = InputChangeCallback< {
 	data?: WPUnitControlUnit;
 } >;
 
-export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
+export type UnitSelectControlProps = {
 	/**
 	 * Whether the control can be focused via keyboard navigation.
 	 *
@@ -53,6 +52,10 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	 * A callback function invoked when the value is changed.
 	 */
 	onChange?: UnitControlOnChangeCallback;
+	/**
+	 * The size of the unit select.
+	 */
+	size?: SelectSize;
 	/**
 	 * Current unit.
 	 */
@@ -65,7 +68,8 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	units?: WPUnitControlUnit[];
 };
 
-export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
+export type UnitControlProps = Pick< InputControlProps, 'size' > &
+	Omit< UnitSelectControlProps, 'size' | 'unit' > &
 	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
@@ -99,4 +103,15 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * Callback when either the quantity or the unit inputs lose focus.
 		 */
 		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Callback when either the quantity or the unit inputs gains focus.
+		 */
+		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Do not throw a warning for the deprecated 36px default size.
+		 * For internal components of other components that already throw the warning.
+		 *
+		 * @ignore
+		 */
+		__shouldNotWarnDeprecated36pxSize?: boolean;
 	};
diff --git a/packages/components/src/unit-control/unit-select-control.tsx b/packages/components/src/unit-control/unit-select-control.tsx
index 844415fd0e4263..3bd3266a0a9af0 100644
--- a/packages/components/src/unit-control/unit-select-control.tsx
+++ b/packages/components/src/unit-control/unit-select-control.tsx
@@ -1,26 +1,34 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import type { ChangeEvent } from 'react';
+import clsx from 'clsx';
+import type { ChangeEvent, ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
 import { CSS_UNITS, hasUnits } from './utils';
 import type { UnitSelectControlProps } from './types';
 
-export default function UnitSelectControl( {
-	className,
-	isUnitSelectTabbable: isTabbable = true,
-	onChange,
-	size = 'default',
-	unit = 'px',
-	units = CSS_UNITS,
-	...props
-}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {
+function UnitSelectControl(
+	{
+		className,
+		isUnitSelectTabbable: isTabbable = true,
+		onChange,
+		size = 'default',
+		unit = 'px',
+		units = CSS_UNITS,
+		...props
+	}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,
+	ref: ForwardedRef< any >
+) {
 	if ( ! hasUnits( units ) || units?.length === 1 ) {
 		return (
 			<UnitLabel
@@ -39,10 +47,11 @@ export default function UnitSelectControl( {
 		onChange?.( unitValue, { event, data } );
 	};
 
-	const classes = classnames( 'components-unit-control__select', className );
+	const classes = clsx( 'components-unit-control__select', className );
 
 	return (
 		<UnitSelect
+			ref={ ref }
 			className={ classes }
 			onChange={ handleOnChange }
 			selectSize={ size }
@@ -58,3 +67,4 @@ export default function UnitSelectControl( {
 		</UnitSelect>
 	);
 }
+export default forwardRef( UnitSelectControl );
diff --git a/packages/components/src/unit-control/utils.ts b/packages/components/src/unit-control/utils.ts
index 573a6f88665109..c80b34ef3af7b0 100644
--- a/packages/components/src/unit-control/utils.ts
+++ b/packages/components/src/unit-control/utils.ts
@@ -102,6 +102,130 @@ const allUnits: Record< string, WPUnitControlUnit > = {
 		a11yLabel: __( 'Points (pt)' ),
 		step: 1,
 	},
+	svw: {
+		value: 'svw',
+		label: isWeb ? 'svw' : __( 'Small viewport width (svw)' ),
+		a11yLabel: __( 'Small viewport width (svw)' ),
+		step: 0.1,
+	},
+	svh: {
+		value: 'svh',
+		label: isWeb ? 'svh' : __( 'Small viewport height (svh)' ),
+		a11yLabel: __( 'Small viewport height (svh)' ),
+		step: 0.1,
+	},
+	svi: {
+		value: 'svi',
+		label: isWeb
+			? 'svi'
+			: __( 'Viewport smallest size in the inline direction (svi)' ),
+		a11yLabel: __( 'Small viewport width or height (svi)' ),
+		step: 0.1,
+	},
+	svb: {
+		value: 'svb',
+		label: isWeb
+			? 'svb'
+			: __( 'Viewport smallest size in the block direction (svb)' ),
+		a11yLabel: __( 'Small viewport width or height (svb)' ),
+		step: 0.1,
+	},
+	svmin: {
+		value: 'svmin',
+		label: isWeb
+			? 'svmin'
+			: __( 'Small viewport smallest dimension (svmin)' ),
+		a11yLabel: __( 'Small viewport smallest dimension (svmin)' ),
+		step: 0.1,
+	},
+	lvw: {
+		value: 'lvw',
+		label: isWeb ? 'lvw' : __( 'Large viewport width (lvw)' ),
+		a11yLabel: __( 'Large viewport width (lvw)' ),
+		step: 0.1,
+	},
+	lvh: {
+		value: 'lvh',
+		label: isWeb ? 'lvh' : __( 'Large viewport height (lvh)' ),
+		a11yLabel: __( 'Large viewport height (lvh)' ),
+		step: 0.1,
+	},
+	lvi: {
+		value: 'lvi',
+		label: isWeb ? 'lvi' : __( 'Large viewport width or height (lvi)' ),
+		a11yLabel: __( 'Large viewport width or height (lvi)' ),
+		step: 0.1,
+	},
+	lvb: {
+		value: 'lvb',
+		label: isWeb ? 'lvb' : __( 'Large viewport width or height (lvb)' ),
+		a11yLabel: __( 'Large viewport width or height (lvb)' ),
+		step: 0.1,
+	},
+	lvmin: {
+		value: 'lvmin',
+		label: isWeb
+			? 'lvmin'
+			: __( 'Large viewport smallest dimension (lvmin)' ),
+		a11yLabel: __( 'Large viewport smallest dimension (lvmin)' ),
+		step: 0.1,
+	},
+	dvw: {
+		value: 'dvw',
+		label: isWeb ? 'dvw' : __( 'Dynamic viewport width (dvw)' ),
+		a11yLabel: __( 'Dynamic viewport width (dvw)' ),
+		step: 0.1,
+	},
+	dvh: {
+		value: 'dvh',
+		label: isWeb ? 'dvh' : __( 'Dynamic viewport height (dvh)' ),
+		a11yLabel: __( 'Dynamic viewport height (dvh)' ),
+		step: 0.1,
+	},
+	dvi: {
+		value: 'dvi',
+		label: isWeb ? 'dvi' : __( 'Dynamic viewport width or height (dvi)' ),
+		a11yLabel: __( 'Dynamic viewport width or height (dvi)' ),
+		step: 0.1,
+	},
+	dvb: {
+		value: 'dvb',
+		label: isWeb ? 'dvb' : __( 'Dynamic viewport width or height (dvb)' ),
+		a11yLabel: __( 'Dynamic viewport width or height (dvb)' ),
+		step: 0.1,
+	},
+	dvmin: {
+		value: 'dvmin',
+		label: isWeb
+			? 'dvmin'
+			: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		a11yLabel: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		step: 0.1,
+	},
+	dvmax: {
+		value: 'dvmax',
+		label: isWeb
+			? 'dvmax'
+			: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		a11yLabel: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		step: 0.1,
+	},
+	svmax: {
+		value: 'svmax',
+		label: isWeb
+			? 'svmax'
+			: __( 'Small viewport largest dimension (svmax)' ),
+		a11yLabel: __( 'Small viewport largest dimension (svmax)' ),
+		step: 0.1,
+	},
+	lvmax: {
+		value: 'lvmax',
+		label: isWeb
+			? 'lvmax'
+			: __( 'Large viewport largest dimension (lvmax)' ),
+		a11yLabel: __( 'Large viewport largest dimension (lvmax)' ),
+		step: 0.1,
+	},
 };
 
 /**
@@ -130,9 +254,9 @@ export const DEFAULT_UNIT = allUnits.px;
  * Moving forward, ideally the value should be a string that contains both
  * the value and unit, example: '10px'
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value`
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse
  * from the raw value could not be matched against the list of allowed units.
@@ -152,7 +276,7 @@ export function getParsedQuantityAndUnit(
 /**
  * Checks if units are defined.
  *
- * @param  units List of units.
+ * @param units List of units.
  * @return Whether the list actually contains any units.
  */
 export function hasUnits(
@@ -168,8 +292,8 @@ export function hasUnits(
  * Parses a quantity and unit from a raw string value, given a list of allowed
  * units and otherwise falling back to the default unit.
  *
- * @param  rawValue     The raw value as a string (may or may not contain the unit)
- * @param  allowedUnits Units to derive from.
+ * @param rawValue     The raw value as a string (may or may not contain the unit)
+ * @param allowedUnits Units to derive from.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed
  * from the raw value could not be matched against the list of allowed units.
@@ -208,10 +332,10 @@ export function parseQuantityAndUnitFromRawValue(
  * Parses quantity and unit from a raw value. Validates parsed value, using fallback
  * value if invalid.
  *
- * @param  rawValue         The next value.
- * @param  allowedUnits     Units to derive from.
- * @param  fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
- * @param  fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
+ * @param rawValue         The next value.
+ * @param allowedUnits     Units to derive from.
+ * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value.
+ * @param fallbackUnit     The fallback unit, used in case it's not possible to parse a valid unit from the raw value.
  * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value
  * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The
  * unit can be `undefined` only if the unit parsed from the raw value could not be matched against
@@ -248,7 +372,7 @@ export function getValidParsedQuantityAndUnit(
  * Takes a unit value and finds the matching accessibility label for the
  * unit abbreviation.
  *
- * @param  unit Unit value (example: `px`)
+ * @param unit Unit value (example: `px`)
  * @return a11y label for the unit abbreviation
  */
 export function getAccessibleLabelForUnit( unit: string ): string | undefined {
@@ -259,8 +383,8 @@ export function getAccessibleLabelForUnit( unit: string ): string | undefined {
 /**
  * Filters available units based on values defined a list of allowed unit values.
  *
- * @param  allowedUnitValues Collection of allowed unit value strings.
- * @param  availableUnits    Collection of available unit objects.
+ * @param allowedUnitValues Collection of allowed unit value strings.
+ * @param availableUnits    Collection of available unit objects.
  * @return Filtered units.
  */
 export function filterUnitsWithSettings(
@@ -282,10 +406,10 @@ export function filterUnitsWithSettings(
  * TODO: ideally this hook shouldn't be needed
  * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
  *
- * @param  args                An object containing units, settingPath & defaultUnits.
- * @param  args.units          Collection of all potentially available units.
- * @param  args.availableUnits Collection of unit value strings for filtering available units.
- * @param  args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
+ * @param args                An object containing units, settingPath & defaultUnits.
+ * @param args.units          Collection of all potentially available units.
+ * @param args.availableUnits Collection of unit value strings for filtering available units.
+ * @param args.defaultValues  Collection of default values for defined units. Example: `{ px: 350, em: 15 }`.
  *
  * @return Filtered list of units, with their default values updated following the `defaultValues`
  * argument's property.
@@ -327,9 +451,9 @@ export const useCustomUnits = ( {
  * accurately displayed in the UI, even if the intention is to hide
  * the availability of that unit.
  *
- * @param  rawValue   Selected value to parse.
- * @param  legacyUnit Legacy unit value, if rawValue needs it appended.
- * @param  units      List of available units.
+ * @param rawValue   Selected value to parse.
+ * @param legacyUnit Legacy unit value, if rawValue needs it appended.
+ * @param units      List of available units.
  *
  * @return A collection of units containing the unit for the current value.
  */
diff --git a/packages/components/src/utils/browsers.js b/packages/components/src/utils/browsers.js
deleted file mode 100644
index 7c852465d5f1be..00000000000000
--- a/packages/components/src/utils/browsers.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/* eslint-disable jsdoc/no-undefined-types */
-/**
- * @param {TemplateStringsArray}                                      strings
- * @param {import('@emotion/css/create-instance').CSSInterpolation[]} interpolations
- */
-export function firefoxOnly( strings, ...interpolations ) {
-	const interpolatedStyles = css( strings, ...interpolations );
-
-	return css`
-		@-moz-document url-prefix() {
-			${ interpolatedStyles };
-		}
-	`;
-}
-
-/**
- * @param {TemplateStringsArray}                                      strings
- * @param {import('@emotion/css/create-instance').CSSInterpolation[]} interpolations
- */
-export function safariOnly( strings, ...interpolations ) {
-	const interpolatedStyles = css( strings, ...interpolations );
-
-	return css`
-		@media not all and ( min-resolution: 0.001dpcm ) {
-			@supports ( -webkit-appearance: none ) {
-				${ interpolatedStyles }
-			}
-		}
-	`;
-}
-/* eslint-enable jsdoc/no-undefined-types */
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 0055168a003fb1..1ad528d13f0108 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { rgba } from './colors';
-
 const white = '#fff';
 
 // Matches the grays in @wordpress/base-styles
@@ -29,37 +27,65 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches @wordpress/base-styles
-const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
-	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
+// Should match packages/components/src/utils/theme-variables.scss
+const THEME = {
+	accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
+	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
+	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
+	/** Used when placing text on the accent color. */
+	accentInverted: `var(--wp-components-color-accent-inverted, ${ white })`,
+
+	background: `var(--wp-components-color-background, ${ white })`,
+
+	foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+	/** Used when placing text on the foreground color. */
+	foregroundInverted: `var(--wp-components-color-foreground-inverted, ${ white })`,
+
+	gray: {
+		/** @deprecated Use `COLORS.theme.foreground` instead. */
+		900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+		800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`,
+		700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`,
+		600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`,
+		400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`,
+		300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`,
+		200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`,
+		100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`,
+	},
 };
 
 const UI = {
-	theme: ADMIN.theme,
-	themeDark10: ADMIN.themeDark10,
-	background: white,
-	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 700 ],
-	borderHover: GRAY[ 700 ],
-	borderFocus: ADMIN.themeDark10,
-	borderDisabled: GRAY[ 400 ],
-	textDisabled: GRAY[ 600 ],
-	textDark: white,
+	background: THEME.background,
+	backgroundDisabled: THEME.gray[ 100 ],
+	border: THEME.gray[ 600 ],
+	borderHover: THEME.gray[ 700 ],
+	borderFocus: THEME.accent,
+	borderDisabled: THEME.gray[ 400 ],
+	textDisabled: THEME.gray[ 600 ],
 
 	// Matches @wordpress/base-styles
-	darkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),
-	lightGrayPlaceholder: rgba( white, 0.65 ),
+	darkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,
+	lightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,
 };
 
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.
+	 *
+	 * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
 	 */
-	gray: GRAY,
+	gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
 	white,
 	alert: ALERT,
+	/**
+	 * Theme-ready variables with fallbacks.
+	 *
+	 * Prefer semantic aliases in `COLORS.ui` when applicable.
+	 */
+	theme: THEME,
+	/**
+	 * Semantic aliases (prefer these over raw variables when applicable).
+	 */
 	ui: UI,
 } );
 
diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js
index 2a144eef6647f6..cab2202b0ce56c 100644
--- a/packages/components/src/utils/colors.js
+++ b/packages/components/src/utils/colors.js
@@ -1,9 +1,13 @@
 /**
  * External dependencies
  */
+import memoize from 'memize';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
+/** @type {HTMLDivElement} */
+let colorComputationNode;
+
 extend( [ namesPlugin ] );
 
 /**
@@ -20,3 +24,104 @@ extend( [ namesPlugin ] );
 export function rgba( hexValue = '', alpha = 1 ) {
 	return colord( hexValue ).alpha( alpha ).toRgbString();
 }
+
+/**
+ * @return {HTMLDivElement | undefined} The HTML element for color computation.
+ */
+function getColorComputationNode() {
+	if ( typeof document === 'undefined' ) {
+		return;
+	}
+
+	if ( ! colorComputationNode ) {
+		// Create a temporary element for style computation.
+		const el = document.createElement( 'div' );
+		el.setAttribute( 'data-g2-color-computation-node', '' );
+		// Inject for window computed style.
+		document.body.appendChild( el );
+		colorComputationNode = el;
+	}
+
+	return colorComputationNode;
+}
+
+/**
+ * @param {string | unknown} value
+ *
+ * @return {boolean} Whether the value is a valid color.
+ */
+function isColor( value ) {
+	if ( typeof value !== 'string' ) {
+		return false;
+	}
+	const test = colord( value );
+
+	return test.isValid();
+}
+
+/**
+ * Retrieves the computed background color. This is useful for getting the
+ * value of a CSS variable color.
+ *
+ * @param {string | unknown} backgroundColor The background color to compute.
+ *
+ * @return {string} The computed background color.
+ */
+function _getComputedBackgroundColor( backgroundColor ) {
+	if ( typeof backgroundColor !== 'string' ) {
+		return '';
+	}
+
+	if ( isColor( backgroundColor ) ) {
+		return backgroundColor;
+	}
+
+	if ( ! backgroundColor.includes( 'var(' ) ) {
+		return '';
+	}
+	if ( typeof document === 'undefined' ) {
+		return '';
+	}
+
+	// Attempts to gracefully handle CSS variables color values.
+	const el = getColorComputationNode();
+	if ( ! el ) {
+		return '';
+	}
+
+	el.style.background = backgroundColor;
+	// Grab the style.
+	const computedColor = window?.getComputedStyle( el ).background;
+	// Reset.
+	el.style.background = '';
+
+	return computedColor || '';
+}
+
+const getComputedBackgroundColor = memoize( _getComputedBackgroundColor );
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text color (black or white).
+ */
+export function getOptimalTextColor( backgroundColor ) {
+	const background = getComputedBackgroundColor( backgroundColor );
+
+	return colord( background ).isLight() ? '#000000' : '#ffffff';
+}
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text shade (dark or light).
+ */
+export function getOptimalTextShade( backgroundColor ) {
+	const result = getOptimalTextColor( backgroundColor );
+
+	return result === '#000000' ? 'dark' : 'light';
+}
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index ca8c4ee8941761..1bc3945f9b3b16 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -1,25 +1,19 @@
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from './space';
 import { COLORS } from './colors-values';
 
 const CONTROL_HEIGHT = '36px';
-const CONTROL_PADDING_X = '12px';
 
 const CONTROL_PROPS = {
-	controlSurfaceColor: COLORS.white,
-	controlTextActiveColor: COLORS.ui.theme,
-	controlPaddingX: CONTROL_PADDING_X,
-	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
-	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
+	// These values should be shared with TextControl.
+	controlPaddingX: 12,
+	controlPaddingXSmall: 8,
+	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
+
 	controlBackgroundColor: COLORS.white,
-	controlBorderRadius: '2px',
-	controlBorderColor: COLORS.gray[ 700 ],
-	controlBoxShadow: 'transparent',
-	controlBorderColorHover: COLORS.gray[ 700 ],
-	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
-	controlDestructiveBorderColor: COLORS.alert.red,
+	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
 	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
@@ -27,24 +21,20 @@ const CONTROL_PROPS = {
 	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
 
-const TOGGLE_GROUP_CONTROL_PROPS = {
-	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
-	toggleGroupControlBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBackgroundColor:
-		CONTROL_PROPS.controlSurfaceColor,
-	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
-};
-
 // Using Object.assign to avoid creating circular references when emitting
 // TypeScript type declarations.
-export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
+export default Object.assign( {}, CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
 	colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
 	elevationIntensity: 1,
-	radiusBlockUi: '2px',
+	radiusXSmall: '1px',
+	radiusSmall: '2px',
+	radiusMedium: '4px',
+	radiusLarge: '8px',
+	radiusFull: '9999px',
+	radiusRound: '50%',
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
@@ -60,15 +50,18 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	fontSizeMobile: '15px',
 	fontSizeSmall: 'calc(0.92 * 13px)',
 	fontSizeXSmall: 'calc(0.75 * 13px)',
-	fontLineHeightBase: '1.2',
+	fontLineHeightBase: '1.4',
 	fontWeight: 'normal',
 	fontWeightHeading: '600',
 	gridBase: '4px',
-	cardBorderRadius: '2px',
 	cardPaddingXSmall: `${ space( 2 ) }`,
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',
diff --git a/packages/components/src/utils/deprecated-36px-size.ts b/packages/components/src/utils/deprecated-36px-size.ts
new file mode 100644
index 00000000000000..0f87c2cd270c73
--- /dev/null
+++ b/packages/components/src/utils/deprecated-36px-size.ts
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function maybeWarnDeprecated36pxSize( {
+	componentName,
+	__next40pxDefaultSize,
+	size,
+	__shouldNotWarnDeprecated36pxSize,
+}: {
+	componentName: string;
+	__next40pxDefaultSize: boolean | undefined;
+	size: string | undefined;
+	__shouldNotWarnDeprecated36pxSize?: boolean;
+} ) {
+	if (
+		__shouldNotWarnDeprecated36pxSize ||
+		__next40pxDefaultSize ||
+		( size !== undefined && size !== 'default' )
+	) {
+		return;
+	}
+
+	deprecated( `36px default size for wp.components.${ componentName }`, {
+		since: '6.8',
+		version: '7.1',
+		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+	} );
+}
diff --git a/packages/components/src/utils/element-rect.ts b/packages/components/src/utils/element-rect.ts
new file mode 100644
index 00000000000000..0f58ea6d7caf54
--- /dev/null
+++ b/packages/components/src/utils/element-rect.ts
@@ -0,0 +1,189 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
+
+/**
+ * The position and dimensions of an element, relative to its offset parent.
+ */
+export type ElementOffsetRect = {
+	/**
+	 * The element the rect belongs to.
+	 */
+	element: HTMLElement | undefined;
+	/**
+	 * The distance from the top edge of the offset parent to the top edge of
+	 * the element.
+	 */
+	top: number;
+	/**
+	 * The distance from the right edge of the offset parent to the right edge
+	 * of the element.
+	 */
+	right: number;
+	/**
+	 * The distance from the bottom edge of the offset parent to the bottom edge
+	 * of the element.
+	 */
+	bottom: number;
+	/**
+	 * The distance from the left edge of the offset parent to the left edge of
+	 * the element.
+	 */
+	left: number;
+	/**
+	 * The width of the element.
+	 */
+	width: number;
+	/**
+	 * The height of the element.
+	 */
+	height: number;
+};
+
+/**
+ * An `ElementOffsetRect` object with all values set to zero.
+ */
+export const NULL_ELEMENT_OFFSET_RECT = {
+	element: undefined,
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	width: 0,
+	height: 0,
+} satisfies ElementOffsetRect;
+
+/**
+ * Returns the position and dimensions of an element, relative to its offset
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
+ *
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
+ */
+export function getElementOffsetRect(
+	element: HTMLElement
+): ElementOffsetRect | undefined {
+	// Position and dimension values computed with `getBoundingClientRect` have
+	// subpixel precision, but are affected by distortions since they represent
+	// the "real" measures, or in other words, the actual final values as rendered
+	// by the browser.
+	const rect = element.getBoundingClientRect();
+	if ( rect.width === 0 || rect.height === 0 ) {
+		return;
+	}
+	const offsetParent = element.offsetParent;
+	const offsetParentRect =
+		offsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;
+	const offsetParentScrollX = offsetParent?.scrollLeft ?? 0;
+	const offsetParentScrollY = offsetParent?.scrollTop ?? 0;
+
+	// Computed widths and heights have subpixel precision, and are not affected
+	// by distortions.
+	const computedWidth = parseFloat( getComputedStyle( element ).width );
+	const computedHeight = parseFloat( getComputedStyle( element ).height );
+
+	// We can obtain the current scale factor for the element by comparing "computed"
+	// dimensions with the "real" ones.
+	const scaleX = computedWidth / rect.width;
+	const scaleY = computedHeight / rect.height;
+
+	return {
+		element,
+		// To obtain the adjusted values for the position:
+		// 1. Compute the element's position relative to the offset parent.
+		// 2. Correct for the scale factor.
+		// 3. Adjust for the scroll position of the offset parent.
+		top:
+			( rect.top - offsetParentRect?.top ) * scaleY + offsetParentScrollY,
+		right:
+			( offsetParentRect?.right - rect.right ) * scaleX -
+			offsetParentScrollX,
+		bottom:
+			( offsetParentRect?.bottom - rect.bottom ) * scaleY -
+			offsetParentScrollY,
+		left:
+			( rect.left - offsetParentRect?.left ) * scaleX +
+			offsetParentScrollX,
+		// Computed dimensions don't need any adjustments.
+		width: computedWidth,
+		height: computedHeight,
+	};
+}
+
+const POLL_RATE = 100;
+
+/**
+ * Tracks the position and dimensions of an element, relative to its offset
+ * parent. The element can be changed dynamically.
+ *
+ * When no element is provided (`null` or `undefined`), the hook will return
+ * a "null" rect, in which all values are `0` and `element` is `undefined`.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
+ */
+export function useTrackElementOffsetRect(
+	targetElement: HTMLElement | undefined | null,
+	deps: unknown[] = []
+) {
+	const [ indicatorPosition, setIndicatorPosition ] =
+		useState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );
+	const intervalRef = useRef< ReturnType< typeof setInterval > >();
+
+	const measure = useEvent( () => {
+		// Check that the targetElement is still attached to the DOM, in case
+		// it was removed since the last `measure` call.
+		if ( targetElement && targetElement.isConnected ) {
+			const elementOffsetRect = getElementOffsetRect( targetElement );
+			if ( elementOffsetRect ) {
+				setIndicatorPosition( elementOffsetRect );
+				clearInterval( intervalRef.current );
+				return true;
+			}
+		} else {
+			clearInterval( intervalRef.current );
+		}
+		return false;
+	} );
+
+	const setElement = useResizeObserver( () => {
+		if ( ! measure() ) {
+			requestAnimationFrame( () => {
+				if ( ! measure() ) {
+					intervalRef.current = setInterval( measure, POLL_RATE );
+				}
+			} );
+		}
+	} );
+
+	useLayoutEffect( () => {
+		setElement( targetElement );
+		if ( ! targetElement ) {
+			setIndicatorPosition( NULL_ELEMENT_OFFSET_RECT );
+		}
+	}, [ setElement, targetElement ] );
+
+	// Escape hatch to force a remeasurement when something else changes rather
+	// than the target elements' ref or size (for example, the target element
+	// can change its position within the tablist).
+	useLayoutEffect( () => {
+		measure();
+		// `measure` is a stable function, so it's safe to omit it from the deps array.
+		// deps can't be statically analyzed by ESLint
+	}, deps );
+
+	return indicatorPosition;
+}
+
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/events.ts b/packages/components/src/utils/events.ts
deleted file mode 100644
index 3ecc86eba7a029..00000000000000
--- a/packages/components/src/utils/events.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-type EventHandler< T extends Event > = ( event: T ) => void;
-
-/**
- * Merges event handlers together.
- *
- * @template TEvent
- * @param  handler
- * @param  otherHandler
- */
-function mergeEvent< TEvent extends Event >(
-	handler: EventHandler< TEvent >,
-	otherHandler: EventHandler< TEvent >
-): EventHandler< TEvent > {
-	return ( event: TEvent ) => {
-		if ( typeof handler === 'function' ) {
-			handler( event );
-		}
-		if ( typeof otherHandler === 'function' ) {
-			otherHandler( event );
-		}
-	};
-}
-
-/**
- * Merges two sets of event handlers together.
- *
- * @template TEvent
- * @param  handlers
- * @param  extraHandlers
- */
-export function mergeEventHandlers<
-	TEvent extends Event,
-	TLeft extends Record< string, EventHandler< TEvent > >,
-	TRight extends Record< string, EventHandler< TEvent > >
->( handlers: TLeft, extraHandlers: TRight ): TLeft & TRight {
-	// @ts-ignore We'll fill in all the properties below
-	const mergedHandlers: TLeft & TRight = {
-		...handlers,
-	};
-
-	for ( const [ key, handler ] of Object.entries( extraHandlers ) ) {
-		// @ts-ignore
-		mergedHandlers[ key as keyof typeof mergedHandlers ] =
-			key in mergedHandlers
-				? mergeEvent( mergedHandlers[ key ], handler )
-				: handler;
-	}
-
-	return mergedHandlers;
-}
diff --git a/packages/components/src/ui/utils/font-size.ts b/packages/components/src/utils/font-size.ts
similarity index 93%
rename from packages/components/src/ui/utils/font-size.ts
rename to packages/components/src/utils/font-size.ts
index 1393426991c604..c9a3b044b55a22 100644
--- a/packages/components/src/ui/utils/font-size.ts
+++ b/packages/components/src/utils/font-size.ts
@@ -6,7 +6,7 @@ import type { CSSProperties, ReactText } from 'react';
 /**
  * Internal dependencies
  */
-import CONFIG from '../../utils/config-values';
+import CONFIG from './config-values';
 
 export type HeadingSize =
 	| 1
@@ -51,7 +51,9 @@ export function getFontSize(
 
 	if ( typeof size !== 'number' ) {
 		const parsed = parseFloat( size );
-		if ( Number.isNaN( parsed ) ) return size;
+		if ( Number.isNaN( parsed ) ) {
+			return size;
+		}
 		size = parsed;
 	}
 
diff --git a/packages/components/src/utils/font.js b/packages/components/src/utils/font.js
index dff14e5f03ba38..3e9ca680fca744 100644
--- a/packages/components/src/utils/font.js
+++ b/packages/components/src/utils/font.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -14,5 +9,5 @@ import FONT from './font-values';
  * @return {string} Font rule value
  */
 export function font( value ) {
-	return get( FONT, value, '' );
+	return FONT[ value ] ?? '';
 }
diff --git a/packages/components/src/ui/utils/get-valid-children.ts b/packages/components/src/utils/get-valid-children.ts
similarity index 86%
rename from packages/components/src/ui/utils/get-valid-children.ts
rename to packages/components/src/utils/get-valid-children.ts
index 5b147029a73ee9..07d4aa038e8a27 100644
--- a/packages/components/src/ui/utils/get-valid-children.ts
+++ b/packages/components/src/utils/get-valid-children.ts
@@ -11,14 +11,16 @@ import { Children, isValidElement } from '@wordpress/element';
 /**
  * Gets a collection of available children elements from a React component's children prop.
  *
- * @param  children
+ * @param children
  *
  * @return An array of available children.
  */
 export function getValidChildren(
 	children: ReactNode
 ): Array< ReactChild | ReactFragment | ReactPortal > {
-	if ( typeof children === 'string' ) return [ children ];
+	if ( typeof children === 'string' ) {
+		return [ children ];
+	}
 
 	return Children.toArray( children ).filter( ( child ) =>
 		isValidElement( child )
diff --git a/packages/components/src/utils/hooks/index.js b/packages/components/src/utils/hooks/index.js
index beacf31b7562cd..896f691cdc5427 100644
--- a/packages/components/src/utils/hooks/index.js
+++ b/packages/components/src/utils/hooks/index.js
@@ -2,4 +2,3 @@ export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
-export { useLatestRef } from './use-latest-ref';
diff --git a/packages/components/src/utils/hooks/stories/use-cx.js b/packages/components/src/utils/hooks/stories/use-cx.js
deleted file mode 100644
index e7054a8f53952b..00000000000000
--- a/packages/components/src/utils/hooks/stories/use-cx.js
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * WordPress dependencies
- */
-import { __unstableIframe as Iframe } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useCx } from '..';
-import StyleProvider from '../../../style-provider';
-import {
-	createSlotFill,
-	Provider as SlotFillProvider,
-} from '../../../slot-fill';
-
-export default {
-	title: 'Components (Experimental)/useCx',
-};
-
-const Example = ( { serializedStyles, children } ) => {
-	const cx = useCx();
-	const classes = cx( serializedStyles );
-	return <span className={ classes }>{ children }</span>;
-};
-
-const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
-	const cx = useCx();
-	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
-	const classes = useMemo(
-		() => cx( serializedStyles ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ serializedStyles ]
-	);
-	return <span className={ classes }>{ children }</span>;
-};
-
-const ExampleWithUseMemoRight = ( { serializedStyles, children } ) => {
-	const cx = useCx();
-	// Right: using 'useMemo' with 'cx' listed as a dependency.
-	const classes = useMemo(
-		() => cx( serializedStyles ),
-		[ cx, serializedStyles ]
-	);
-	return <span className={ classes }>{ children }</span>;
-};
-
-export const _slotFill = () => {
-	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlot' );
-
-	const redText = css`
-		color: red;
-	`;
-	const blueText = css`
-		color: blue;
-	`;
-	const greenText = css`
-		color: green;
-	`;
-
-	return (
-		<SlotFillProvider>
-			<StyleProvider document={ document }>
-				<Iframe>
-					<Iframe>
-						<Example serializedStyles={ redText }>
-							This text is inside an iframe and should be red
-						</Example>
-						<Fill name="test-slot">
-							<Example serializedStyles={ blueText }>
-								This text is also inside the iframe, but is
-								relocated by a slot/fill and should be blue
-							</Example>
-						</Fill>
-						<Fill name="outside-frame">
-							<Example serializedStyles={ greenText }>
-								This text is also inside the iframe, but is
-								relocated by a slot/fill and should be green
-							</Example>
-						</Fill>
-					</Iframe>
-					<StyleProvider document={ document }>
-						<Slot bubblesVirtually name="test-slot" />
-					</StyleProvider>
-				</Iframe>
-				<Slot bubblesVirtually name="outside-frame" />
-			</StyleProvider>
-		</SlotFillProvider>
-	);
-};
-
-export const _slotFillSimple = () => {
-	const { Fill, Slot } = createSlotFill( 'UseCxExampleSlotTwo' );
-
-	const redText = css`
-		color: red;
-	`;
-
-	return (
-		<SlotFillProvider>
-			<Iframe>
-				<Fill name="test-slot">
-					<Example serializedStyles={ redText }>
-						This text should be red
-					</Example>
-				</Fill>
-			</Iframe>
-			<Slot bubblesVirtually name="test-slot" />
-		</SlotFillProvider>
-	);
-};
-
-export const _useMemoBadPractices = () => {
-	const redText = css`
-		color: red;
-	`;
-	const blueText = css`
-		color: blue;
-	`;
-
-	return (
-		<>
-			<Example serializedStyles={ redText }>
-				This text should be red
-			</Example>
-			<ExampleWithUseMemoRight serializedStyles={ blueText }>
-				This text should be blue
-			</ExampleWithUseMemoRight>
-			<Iframe>
-				<Example serializedStyles={ redText }>
-					This text should be red
-				</Example>
-				<ExampleWithUseMemoWrong serializedStyles={ blueText }>
-					This text should be blue but it&apos;s not!
-				</ExampleWithUseMemoWrong>
-			</Iframe>
-		</>
-	);
-};
-
-export const _default = () => {
-	const redText = css`
-		color: red;
-	`;
-	return (
-		<Iframe>
-			<Example serializedStyles={ redText }>
-				This text is inside an iframe and is red!
-			</Example>
-		</Iframe>
-	);
-};
diff --git a/packages/components/src/utils/hooks/test/use-latest-ref.js b/packages/components/src/utils/hooks/test/use-latest-ref.js
deleted file mode 100644
index b90b349f25a453..00000000000000
--- a/packages/components/src/utils/hooks/test/use-latest-ref.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useLatestRef } from '..';
-
-function debounce( callback, timeout = 0 ) {
-	let timeoutId = 0;
-	return ( ...args ) => {
-		window.clearTimeout( timeoutId );
-		timeoutId = window.setTimeout( () => callback( ...args ), timeout );
-	};
-}
-
-function useDebounce( callback, timeout = 0 ) {
-	const callbackRef = useLatestRef( callback );
-	return debounce( ( ...args ) => callbackRef.current( ...args ), timeout );
-}
-
-function Example() {
-	const [ count, setCount ] = useState( 0 );
-	const increment = () => setCount( count + 1 );
-	const incrementDebounced = debounce( increment, 50 );
-	const incrementDebouncedWithLatestRef = useDebounce( increment, 50 );
-
-	return (
-		<>
-			<div>Count: { count }</div>
-			<button onClick={ incrementDebounced }>Increment debounced</button>
-			<button onClick={ increment }>Increment immediately</button>
-			<br />
-			<button onClick={ incrementDebouncedWithLatestRef }>
-				Increment debounced with latest ref
-			</button>
-		</>
-	);
-}
-
-function sleep( milliseconds ) {
-	return new Promise( ( resolve ) =>
-		window.setTimeout( resolve, milliseconds )
-	);
-}
-
-function getCount() {
-	return screen.getByText( /Count:/ ).innerHTML;
-}
-
-function incrementCount() {
-	fireEvent.click( screen.getByText( 'Increment immediately' ) );
-}
-
-function incrementCountDebounced() {
-	fireEvent.click( screen.getByText( 'Increment debounced' ) );
-}
-
-function incrementCountDebouncedRef() {
-	fireEvent.click(
-		screen.getByText( 'Increment debounced with latest ref' )
-	);
-}
-
-describe( 'useLatestRef', () => {
-	describe( 'Example', () => {
-		// Prove the example works as expected.
-		it( 'should start at 0', () => {
-			render( <Example /> );
-			expect( getCount() ).toEqual( 'Count: 0' );
-		} );
-
-		it( 'should increment immediately', () => {
-			render( <Example /> );
-			incrementCount();
-			expect( getCount() ).toEqual( 'Count: 1' );
-		} );
-
-		it( 'should increment after debouncing', async () => {
-			render( <Example /> );
-			incrementCountDebounced();
-			expect( getCount() ).toEqual( 'Count: 0' );
-
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
-		} );
-
-		it( 'should increment after debouncing with latest ref', async () => {
-			render( <Example /> );
-			incrementCountDebouncedRef();
-			expect( getCount() ).toEqual( 'Count: 0' );
-
-			await waitFor( () => sleep( 0 ) );
-			expect( getCount() ).toEqual( 'Count: 1' );
-		} );
-	} );
-
-	it( 'should increment to one', async () => {
-		render( <Example /> );
-		incrementCountDebounced();
-		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 1' );
-	} );
-
-	it( 'should increment to two', async () => {
-		render( <Example /> );
-		incrementCountDebouncedRef();
-		incrementCount();
-		await waitFor( () => sleep( 0 ) );
-		expect( getCount() ).toEqual( 'Count: 2' );
-	} );
-} );
diff --git a/packages/components/src/utils/hooks/use-animated-offset-rect.ts b/packages/components/src/utils/hooks/use-animated-offset-rect.ts
new file mode 100644
index 00000000000000..35e2a54aa02f2f
--- /dev/null
+++ b/packages/components/src/utils/hooks/use-animated-offset-rect.ts
@@ -0,0 +1,119 @@
+/* eslint-disable jsdoc/require-param */
+
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { ElementOffsetRect } from '../element-rect';
+import { useOnValueUpdate } from './use-on-value-update';
+
+/**
+ * A utility used to animate something in a container component based on the "offset
+ * rect" (position relative to the container and size) of a subelement. For example,
+ * this is useful to render an indicator for the selected option of a component, and
+ * to animate it when the selected option changes.
+ *
+ * Takes in a container element and the up-to-date "offset rect" of the target
+ * subelement, obtained with `useTrackElementOffsetRect`. Then it does the following:
+ *
+ * - Adds CSS variables with rect information to the container, so that the indicator
+ *   can be rendered and animated with them. These are kept up-to-date, enabling CSS
+ *   transitions on change.
+ * - Sets an attribute (`data-subelement-animated` by default) when the tracked
+ *   element changes, so that the target (e.g. the indicator) can be animated to its
+ *   new size and position.
+ * - Removes the attribute when the animation is done.
+ *
+ * The need for the attribute is due to the fact that the rect might update in
+ * situations other than when the tracked element changes, e.g. the tracked element
+ * might be resized. In such cases, there is no need to animate the indicator, and
+ * the change in size or position of the indicator needs to be reflected immediately.
+ */
+export function useAnimatedOffsetRect(
+	/**
+	 * The container element.
+	 */
+	container: HTMLElement | undefined,
+	/**
+	 * The rect of the tracked element.
+	 */
+	rect: ElementOffsetRect,
+	{
+		prefix = 'subelement',
+		dataAttribute = `${ prefix }-animated`,
+		transitionEndFilter = () => true,
+		roundRect = false,
+	}: {
+		/**
+		 * The prefix used for the CSS variables, e.g. if `prefix` is `selected`, the
+		 * CSS variables will be `--selected-top`, `--selected-left`, etc.
+		 * @default 'subelement'
+		 */
+		prefix?: string;
+		/**
+		 * The name of the data attribute used to indicate that the animation is in
+		 * progress. The `data-` prefix is added automatically.
+		 *
+		 * For example, if `dataAttribute` is `indicator-animated`, the attribute will
+		 * be `data-indicator-animated`.
+		 * @default `${ prefix }-animated`
+		 */
+		dataAttribute?: string;
+		/**
+		 * A function that is called with the transition event and returns a boolean
+		 * indicating whether the animation should be stopped. The default is a function
+		 * that always returns `true`.
+		 *
+		 * For example, if the animated element is the `::before` pseudo-element, the
+		 * function can be written as `( event ) => event.pseudoElement === '::before'`.
+		 * @default () => true
+		 */
+		transitionEndFilter?: ( event: TransitionEvent ) => boolean;
+		/**
+		 * Whether the `rect` measurements should be rounded down when applied
+		 * to the CSS variables. This can be useful to avoid blurry animations or
+		 * to avoid subpixel rendering issues.
+		 * @default false
+		 */
+		roundRect?: boolean;
+	} = {}
+) {
+	const setProperties = useEvent( () => {
+		( Object.keys( rect ) as Array< keyof typeof rect > ).forEach(
+			( property ) =>
+				property !== 'element' &&
+				container?.style.setProperty(
+					`--${ prefix }-${ property }`,
+					String(
+						roundRect
+							? Math.floor( rect[ property ] )
+							: rect[ property ]
+					)
+				)
+		);
+	} );
+	useLayoutEffect( () => {
+		setProperties();
+	}, [ rect, setProperties ] );
+	useOnValueUpdate( rect.element, ( { previousValue } ) => {
+		// Only enable the animation when moving from one element to another.
+		if ( rect.element && previousValue ) {
+			container?.setAttribute( `data-${ dataAttribute }`, '' );
+		}
+	} );
+	useLayoutEffect( () => {
+		function onTransitionEnd( event: TransitionEvent ) {
+			if ( transitionEndFilter( event ) ) {
+				container?.removeAttribute( `data-${ dataAttribute }` );
+			}
+		}
+		container?.addEventListener( 'transitionend', onTransitionEnd );
+		return () =>
+			container?.removeEventListener( 'transitionend', onTransitionEnd );
+	}, [ dataAttribute, container, transitionEndFilter ] );
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-controlled-state.js b/packages/components/src/utils/hooks/use-controlled-state.js
index 6075ad73d463ed..d3e78f112d91e5 100644
--- a/packages/components/src/utils/hooks/use-controlled-state.js
+++ b/packages/components/src/utils/hooks/use-controlled-state.js
@@ -11,8 +11,8 @@ import { isValueDefined, getDefinedValue } from '../values';
 /**
  * @template T
  * @typedef Options
- * @property {T | undefined} initial  Initial value
- * @property {T | ""}        fallback Fallback value
+ * @property {T}      [initial] Initial value
+ * @property {T | ""} fallback  Fallback value
  */
 
 /** @type {Readonly<{ initial: undefined, fallback: '' }>} */
diff --git a/packages/components/src/utils/hooks/use-controlled-value.ts b/packages/components/src/utils/hooks/use-controlled-value.ts
index 5a3824d465c07c..4b172801cf9528 100644
--- a/packages/components/src/utils/hooks/use-controlled-value.ts
+++ b/packages/components/src/utils/hooks/use-controlled-value.ts
@@ -12,17 +12,17 @@ type Props< T > = {
 /**
  * Simplified and improved implementation of useControlledState.
  *
- * @param  props
- * @param  props.defaultValue
- * @param  props.value
- * @param  props.onChange
+ * @param props
+ * @param props.defaultValue
+ * @param props.value
+ * @param props.onChange
  * @return The controlled value and the value setter.
  */
 export function useControlledValue< T >( {
 	defaultValue,
 	onChange,
 	value: valueProp,
-}: Props< T > ): [ T | undefined, ( value: T ) => void ] {
+}: Props< T > ) {
 	const hasValue = typeof valueProp !== 'undefined';
 	const initialValue = hasValue ? valueProp : defaultValue;
 	const [ state, setState ] = useState( initialValue );
@@ -40,5 +40,5 @@ export function useControlledValue< T >( {
 		setValue = setState;
 	}
 
-	return [ value, setValue ];
+	return [ value, setValue as typeof setState ] as const;
 }
diff --git a/packages/components/src/utils/hooks/use-cx.ts b/packages/components/src/utils/hooks/use-cx.ts
index 19bc0a797d1279..409352c26a6e1b 100644
--- a/packages/components/src/utils/hooks/use-cx.ts
+++ b/packages/components/src/utils/hooks/use-cx.ts
@@ -5,7 +5,9 @@ import { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/serialize';
 import { insertStyles } from '@emotion/utils';
 // eslint-disable-next-line no-restricted-imports
-import { cx as innerCx, ClassNamesArg } from '@emotion/css';
+import type { ClassNamesArg } from '@emotion/css';
+// eslint-disable-next-line no-restricted-imports
+import { cx as innerCx } from '@emotion/css';
 
 /**
  * WordPress dependencies
@@ -23,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
- * @example
+ * ```jsx
  * import { css } from '@emotion/react';
  *
  * const styles = css`
@@ -37,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  *
  * 	return <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();
diff --git a/packages/components/src/utils/hooks/use-latest-ref.ts b/packages/components/src/utils/hooks/use-latest-ref.ts
deleted file mode 100644
index d8b4b20fa7e763..00000000000000
--- a/packages/components/src/utils/hooks/use-latest-ref.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import type { RefObject } from 'react';
-
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useIsomorphicLayoutEffect } from '@wordpress/compose';
-
-/**
- * Creates a reference for a prop. This is useful for preserving dependency
- * memoization for hooks like useCallback.
- *
- * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
- *
- * @param  value The value to reference
- * @return The prop reference.
- */
-export function useLatestRef< T >( value: T ): RefObject< T > {
-	const ref = useRef( value );
-
-	useIsomorphicLayoutEffect( () => {
-		ref.current = value;
-	} );
-
-	return ref;
-}
diff --git a/packages/components/src/utils/hooks/use-on-value-update.ts b/packages/components/src/utils/hooks/use-on-value-update.ts
new file mode 100644
index 00000000000000..15cfc321359e7c
--- /dev/null
+++ b/packages/components/src/utils/hooks/use-on-value-update.ts
@@ -0,0 +1,39 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useRef, useLayoutEffect } from '@wordpress/element';
+
+/**
+ * Context object for the `onUpdate` callback of `useOnValueUpdate`.
+ */
+export type ValueUpdateContext< T > = {
+	previousValue: T;
+};
+
+/**
+ * Calls the `onUpdate` callback when the `value` changes.
+ */
+export function useOnValueUpdate< T >(
+	/**
+	 * The value to watch for changes.
+	 */
+	value: T,
+	/**
+	 * Callback to fire when the value changes.
+	 */
+	onUpdate: ( context: ValueUpdateContext< T > ) => void
+) {
+	const previousValueRef = useRef( value );
+	const updateCallbackEvent = useEvent( onUpdate );
+	useLayoutEffect( () => {
+		if ( previousValueRef.current !== value ) {
+			updateCallbackEvent( {
+				previousValue: previousValueRef.current,
+			} );
+			previousValueRef.current = value;
+		}
+	}, [ updateCallbackEvent, value ] );
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-update-effect.js b/packages/components/src/utils/hooks/use-update-effect.js
index ab96caf5799756..e371647f033de6 100644
--- a/packages/components/src/utils/hooks/use-update-effect.js
+++ b/packages/components/src/utils/hooks/use-update-effect.js
@@ -6,25 +6,30 @@ import { useRef, useEffect } from '@wordpress/element';
 /**
  * A `React.useEffect` that will not run on the first render.
  * Source:
- * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts
+ * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts
  *
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps
  */
 function useUpdateEffect( effect, deps ) {
-	const mounted = useRef( false );
+	const mountedRef = useRef( false );
 	useEffect( () => {
-		if ( mounted.current ) {
+		if ( mountedRef.current ) {
 			return effect();
 		}
-		mounted.current = true;
+		mountedRef.current = true;
 		return undefined;
-		// Disable reasons:
 		// 1. This hook needs to pass a dep list that isn't an array literal
 		// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
 		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
+
+	useEffect(
+		() => () => {
+			mountedRef.current = false;
+		},
+		[]
+	);
 }
 
 export default useUpdateEffect;
diff --git a/packages/components/src/utils/input/base.js b/packages/components/src/utils/input/base.js
deleted file mode 100644
index 2c5010fc92737c..00000000000000
--- a/packages/components/src/utils/input/base.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { reduceMotion } from '../reduce-motion';
-import { COLORS } from '../colors-values';
-import { CONFIG } from '../';
-
-export const inputStyleNeutral = css`
-	box-shadow: 0 0 0 transparent;
-	transition: box-shadow 0.1s linear;
-	border-radius: ${ CONFIG.radiusBlockUi };
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border } };
-	${ reduceMotion( 'transition' ) }
-`;
-
-export const inputStyleFocus = css`
-	border-color: ${ COLORS.ui.theme };
-	box-shadow: 0 0 0
-		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		${ COLORS.ui.theme };
-
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	outline: 2px solid transparent;
-`;
diff --git a/packages/components/src/utils/input/index.js b/packages/components/src/utils/input/index.js
deleted file mode 100644
index 23fd731db99d94..00000000000000
--- a/packages/components/src/utils/input/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './input-control';
diff --git a/packages/components/src/utils/input/input-control.js b/packages/components/src/utils/input/input-control.js
deleted file mode 100644
index c550a558d6d4e2..00000000000000
--- a/packages/components/src/utils/input/input-control.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { inputStyleNeutral, inputStyleFocus } from './base';
-import { font } from '../font';
-import { COLORS } from '../colors-values';
-import { breakpoint } from '../breakpoint';
-
-export const inputControl = css`
-	font-family: ${ font( 'default.fontFamily' ) };
-	padding: 6px 8px;
-	${ inputStyleNeutral };
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: ${ font( 'mobileTextMinFontSize' ) };
-	/* Override core line-height. To be reviewed. */
-	line-height: normal;
-
-	${ breakpoint( 'small' ) } {
-		font-size: ${ font( 'default.fontSize' ) };
-		/* Override core line-height. To be reviewed. */
-		line-height: normal;
-	}
-
-	&:focus {
-		${ inputStyleFocus }
-	}
-
-	// Use opacity to work in various editor styles.
-	&::-webkit-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&::-moz-placeholder {
-		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	&:-ms-input-placeholder {
-		color: ${ COLORS.ui.darkGrayPlaceholder };
-	}
-
-	.is-dark-theme & {
-		&::-webkit-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&::-moz-placeholder {
-			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-
-		&:-ms-input-placeholder {
-			color: ${ COLORS.ui.lightGrayPlaceholder };
-		}
-	}
-`;
diff --git a/packages/components/src/utils/math.js b/packages/components/src/utils/math.js
index 5bfb17e700ed39..ffaab4e3bd11ba 100644
--- a/packages/components/src/utils/math.js
+++ b/packages/components/src/utils/math.js
@@ -96,14 +96,3 @@ export function roundClamp(
 		? getNumber( clampedValue.toFixed( precision ) )
 		: clampedValue;
 }
-
-/**
- * Clamps a value based on a min/max range with rounding.
- * Returns a string.
- *
- * @param {Parameters<typeof roundClamp>} args Arguments for roundClamp().
- * @return {string} The rounded and clamped value.
- */
-export function roundClampString( ...args ) {
-	return roundClamp( ...args ).toString();
-}
diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js
deleted file mode 100644
index 761656f5881da0..00000000000000
--- a/packages/components/src/utils/reduce-motion.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- *
- * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
- * @return {string} Generated CSS code for the reduced style
- */
-export function reduceMotion( prop = 'transition' ) {
-	let style;
-
-	switch ( prop ) {
-		case 'transition':
-			style = 'transition-duration: 0ms;';
-			break;
-
-		case 'animation':
-			style = 'animation-duration: 1ms;';
-			break;
-
-		default:
-			style = `
-				animation-duration: 1ms;
-				transition-duration: 0ms;
-			`;
-	}
-
-	return `
-		@media ( prefers-reduced-motion: reduce ) {
-			${ style };
-		}
-	`;
-}
diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/utils/space.ts
similarity index 95%
rename from packages/components/src/ui/utils/space.ts
rename to packages/components/src/utils/space.ts
index a855c85d5408b9..e11dd53e9916d9 100644
--- a/packages/components/src/ui/utils/space.ts
+++ b/packages/components/src/utils/space.ts
@@ -20,7 +20,7 @@ const GRID_BASE = '4px';
  * When given a unit value or one of the named CSS values like `auto`,
  * it will simply return the value back.
  *
- * @param  value A number, numeric string, or a unit value.
+ * @param value A number, numeric string, or a unit value.
  */
 export function space( value?: SpaceInput ): string | undefined {
 	if ( typeof value === 'undefined' ) {
diff --git a/packages/components/src/utils/strings.ts b/packages/components/src/utils/strings.ts
index e4d1d8f73bda1e..e15886da61f5a6 100644
--- a/packages/components/src/utils/strings.ts
+++ b/packages/components/src/utils/strings.ts
@@ -2,67 +2,20 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
+import { paramCase } from 'change-case';
 
+/**
+ * All unicode characters that we consider "dash-like":
+ * - `\u007e`: ~ (tilde)
+ * - `\u00ad`: ­ (soft hyphen)
+ * - `\u2053`: ⁓ (swung dash)
+ * - `\u207b`: ⁻ (superscript minus)
+ * - `\u208b`: ₋ (subscript minus)
+ * - `\u2212`: − (minus sign)
+ * - `\\p{Pd}`: any other Unicode dash character
+ */
 const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
-	`[${ [
-		// - (hyphen-minus)
-		'\u002d',
-		// ~ (tilde)
-		'\u007e',
-		// ­ (soft hyphen)
-		'\u00ad',
-		// ֊ (armenian hyphen)
-		'\u058a',
-		// ־ (hebrew punctuation maqaf)
-		'\u05be',
-		// ᐀ (canadian syllabics hyphen)
-		'\u1400',
-		// ᠆ (mongolian todo soft hyphen)
-		'\u1806',
-		// ‐ (hyphen)
-		'\u2010',
-		// non-breaking hyphen)
-		'\u2011',
-		// ‒ (figure dash)
-		'\u2012',
-		// – (en dash)
-		'\u2013',
-		// — (em dash)
-		'\u2014',
-		// ― (horizontal bar)
-		'\u2015',
-		// ⁓ (swung dash)
-		'\u2053',
-		// superscript minus)
-		'\u207b',
-		// subscript minus)
-		'\u208b',
-		// − (minus sign)
-		'\u2212',
-		// ⸗ (double oblique hyphen)
-		'\u2e17',
-		// ⸺ (two-em dash)
-		'\u2e3a',
-		// ⸻ (three-em dash)
-		'\u2e3b',
-		// 〜 (wave dash)
-		'\u301c',
-		// 〰 (wavy dash)
-		'\u3030',
-		// ゠ (katakana-hiragana double hyphen)
-		'\u30a0',
-		// ︱ (presentation form for vertical em dash)
-		'\ufe31',
-		// ︲ (presentation form for vertical en dash)
-		'\ufe32',
-		// ﹘ (small em dash)
-		'\ufe58',
-		// ﹣ (small hyphen-minus)
-		'\ufe63',
-		// － (fullwidth hyphen-minus)
-		'\uff0d',
-	].join( '' ) }]`,
-	'g'
+	/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu
 );
 
 export const normalizeTextString = ( value: string ): string => {
@@ -71,12 +24,39 @@ export const normalizeTextString = ( value: string ): string => {
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };
 
+/**
+ * Converts any string to kebab case.
+ * Backwards compatible with Lodash's `_.kebabCase()`.
+ * Backwards compatible with `_wp_to_kebab_case()`.
+ *
+ * @see https://lodash.com/docs/4.17.15#kebabCase
+ * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
+ *
+ * @param str String to convert.
+ * @return Kebab-cased string
+ */
+export function kebabCase( str: unknown ) {
+	let input = str?.toString?.() ?? '';
+
+	// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
+	input = input.replace( /['\u2019]/, '' );
+
+	return paramCase( input, {
+		splitRegexp: [
+			/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
+			/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar
+			/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
+			/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
+		],
+	} );
+}
+
 /**
  * Escapes the RegExp special characters.
  *
- * @param {string} string Input string.
+ * @param string Input string.
  *
- * @return {string} Regex-escaped string.
+ * @return Regex-escaped string.
  */
 export function escapeRegExp( string: string ): string {
 	return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' );
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index c858e8731fc523..46ee1183f59698 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -1,6 +1,5 @@
 export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
-export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { font } from './font';
 export { breakpoint } from './breakpoint';
diff --git a/packages/components/src/utils/test/colors.js b/packages/components/src/utils/test/colors.js
index 511e11ad2bfd1b..cc088cb2705bb0 100644
--- a/packages/components/src/utils/test/colors.js
+++ b/packages/components/src/utils/test/colors.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { rgba } from '../colors';
+import { getOptimalTextColor, getOptimalTextShade, rgba } from '../colors';
 
 describe( 'rbga', () => {
 	it( 'should output the expected string', () => {
@@ -9,3 +9,41 @@ describe( 'rbga', () => {
 		expect( rgba( '#f00', 0.2 ) ).toBe( 'rgba(255, 0, 0, 0.2)' );
 	} );
 } );
+
+describe( 'getOptimalTextColor', () => {
+	test( 'should be white for dark backgrounds', () => {
+		expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' );
+		expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' );
+		expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' );
+		expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' );
+		expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' );
+		expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' );
+	} );
+
+	test( 'should be black for light backgrounds', () => {
+		expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' );
+		expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' );
+		expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' );
+		expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' );
+		expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' );
+	} );
+} );
+
+describe( 'getOptimalTextShade', () => {
+	test( 'should be "light" for dark backgrounds', () => {
+		expect( getOptimalTextShade( 'black' ) ).toBe( 'light' );
+		expect( getOptimalTextShade( '#000' ) ).toBe( 'light' );
+		expect( getOptimalTextShade( '#111' ) ).toBe( 'light' );
+		expect( getOptimalTextShade( '#123' ) ).toBe( 'light' );
+		expect( getOptimalTextShade( '#555' ) ).toBe( 'light' );
+		expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' );
+	} );
+
+	test( 'should be "dark" for light backgrounds', () => {
+		expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' );
+		expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' );
+		expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' );
+		expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' );
+		expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' );
+	} );
+} );
diff --git a/packages/components/src/utils/test/events.js b/packages/components/src/utils/test/events.js
deleted file mode 100644
index 75709614b9d072..00000000000000
--- a/packages/components/src/utils/test/events.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Internal dependencies
- */
-import { mergeEventHandlers } from '../events';
-
-describe( 'mergeEventHandlers', () => {
-	it( 'should merge the two event handler objects', () => {
-		const left = {
-			onclick: jest.fn(),
-		};
-
-		const right = {
-			onclick: jest.fn(),
-		};
-
-		const merged = mergeEventHandlers( left, right );
-
-		merged.onclick();
-
-		expect( left.onclick ).toHaveBeenCalled();
-		expect( right.onclick ).toHaveBeenCalled();
-	} );
-
-	it( 'should preserve all handlers from the left hand side that do not overlap with the right', () => {
-		const left = {
-			ArrowUp: jest.fn(),
-			ArrowDown: jest.fn(),
-		};
-
-		const right = {
-			ArrowUp: jest.fn(),
-		};
-
-		const merged = mergeEventHandlers( left, right );
-
-		merged.ArrowUp();
-
-		expect( left.ArrowUp ).toHaveBeenCalled();
-		expect( right.ArrowUp ).toHaveBeenCalled();
-
-		expect( merged.ArrowDown ).toBe( left.ArrowDown );
-	} );
-
-	it( 'should preserve all handlers form the right hand side that do not overlap with the left', () => {
-		const right = {
-			ArrowUp: jest.fn(),
-			ArrowDown: jest.fn(),
-		};
-
-		const left = {
-			ArrowUp: jest.fn(),
-		};
-
-		const merged = mergeEventHandlers( left, right );
-
-		merged.ArrowUp();
-
-		expect( left.ArrowUp ).toHaveBeenCalled();
-		expect( right.ArrowUp ).toHaveBeenCalled();
-
-		expect( merged.ArrowDown ).toBe( right.ArrowDown );
-	} );
-} );
diff --git a/packages/components/src/ui/utils/test/space.js b/packages/components/src/utils/test/space.js
similarity index 100%
rename from packages/components/src/ui/utils/test/space.js
rename to packages/components/src/utils/test/space.js
diff --git a/packages/components/src/utils/test/strings.js b/packages/components/src/utils/test/strings.js
index 43682a0e2853f3..7d03075897318f 100644
--- a/packages/components/src/utils/test/strings.js
+++ b/packages/components/src/utils/test/strings.js
@@ -1,7 +1,102 @@
 /**
  * Internal dependencies
  */
-import { normalizeTextString } from '../strings';
+import { kebabCase, normalizeTextString } from '../strings';
+
+describe( 'kebabCase', () => {
+	it( 'separates lowercase letters, followed by uppercase letters', () => {
+		expect( kebabCase( 'fooBar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'separates numbers, followed by uppercase letters', () => {
+		expect( kebabCase( '123FOO' ) ).toEqual( '123-foo' );
+	} );
+
+	it( 'separates numbers, followed by lowercase characters', () => {
+		expect( kebabCase( '123bar' ) ).toEqual( '123-bar' );
+	} );
+
+	it( 'separates uppercase letters, followed by numbers', () => {
+		expect( kebabCase( 'FOO123' ) ).toEqual( 'foo-123' );
+	} );
+
+	it( 'separates lowercase letters, followed by numbers', () => {
+		expect( kebabCase( 'foo123' ) ).toEqual( 'foo-123' );
+	} );
+
+	it( 'separates uppercase groups from capitalized groups', () => {
+		expect( kebabCase( 'FOOBar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'removes any non-dash special characters', () => {
+		expect(
+			kebabCase( 'foo±§!@#$%^&*()-_=+/?.>,<\\|{}[]`~\'";:bar' )
+		).toEqual( 'foo-bar' );
+	} );
+
+	it( 'removes any spacing characters', () => {
+		expect( kebabCase( ' foo \t \n \r \f \v bar ' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'groups multiple dashes into a single one', () => {
+		expect( kebabCase( 'foo---bar' ) ).toEqual( 'foo-bar' );
+	} );
+
+	it( 'returns an empty string unchanged', () => {
+		expect( kebabCase( '' ) ).toEqual( '' );
+	} );
+
+	it( 'returns an existing kebab case string unchanged', () => {
+		expect( kebabCase( 'foo-123-bar' ) ).toEqual( 'foo-123-bar' );
+	} );
+
+	it( 'returns an empty string if any nullish type is passed', () => {
+		expect( kebabCase( undefined ) ).toEqual( '' );
+		expect( kebabCase( null ) ).toEqual( '' );
+	} );
+
+	it( 'converts any unexpected non-nullish type to a string', () => {
+		expect( kebabCase( 12345 ) ).toEqual( '12345' );
+		expect( kebabCase( [] ) ).toEqual( '' );
+		expect( kebabCase( {} ) ).toEqual( 'object-object' );
+	} );
+
+	/**
+	 * Should cover all test cases of `_wp_to_kebab_case()`.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
+	 * @see https://github.com/WordPress/wordpress-develop/blob/76376fdbc3dc0b3261de377dffc350677345e7ba/tests/phpunit/tests/functions/wpToKebabCase.php#L35-L62
+	 */
+	it.each( [
+		[ 'white', 'white' ],
+		[ 'white+black', 'white-black' ],
+		[ 'white:black', 'white-black' ],
+		[ 'white*black', 'white-black' ],
+		[ 'white.black', 'white-black' ],
+		[ 'white black', 'white-black' ],
+		[ 'white	black', 'white-black' ],
+		[ 'white-to-black', 'white-to-black' ],
+		[ 'white2white', 'white-2-white' ],
+		[ 'white2nd', 'white-2nd' ],
+		[ 'white2ndcolor', 'white-2-ndcolor' ],
+		[ 'white2ndColor', 'white-2nd-color' ],
+		[ 'white2nd_color', 'white-2nd-color' ],
+		[ 'white23color', 'white-23-color' ],
+		[ 'white23', 'white-23' ],
+		[ '23color', '23-color' ],
+		[ 'white4th', 'white-4th' ],
+		[ 'font2xl', 'font-2-xl' ],
+		[ 'whiteToWhite', 'white-to-white' ],
+		[ 'whiteTOwhite', 'white-t-owhite' ],
+		[ 'WHITEtoWHITE', 'whit-eto-white' ],
+		[ 42, '42' ],
+		[ "i've done", 'ive-done' ],
+		[ '#ffffff', 'ffffff' ],
+		[ '$ffffff', 'ffffff' ],
+	] )( 'converts %s properly to %s', ( input, expected ) => {
+		expect( kebabCase( input ) ).toEqual( expected );
+	} );
+} );
 
 describe( 'normalizeTextString', () => {
 	it( 'should normalize hyphen-like characters to hyphens', () => {
@@ -11,5 +106,67 @@ describe( 'normalizeTextString', () => {
 		expect( normalizeTextString( 'foo⸻bar' ) ).toBe( 'foo-bar' );
 		expect( normalizeTextString( 'foo゠bar' ) ).toBe( 'foo-bar' );
 		expect( normalizeTextString( 'foo－bar' ) ).toBe( 'foo-bar' );
+
+		const dashCharacters = [
+			// - (hyphen-minus)
+			'\u002d',
+			// ~ (tilde)
+			'\u007e',
+			// ­ (soft hyphen)
+			'\u00ad',
+			// ֊ (armenian hyphen)
+			'\u058a',
+			// ־ (hebrew punctuation maqaf)
+			'\u05be',
+			// ᐀ (canadian syllabics hyphen)
+			'\u1400',
+			// ᠆ (mongolian todo soft hyphen)
+			'\u1806',
+			// ‐ (hyphen)
+			'\u2010',
+			// non-breaking hyphen)
+			'\u2011',
+			// ‒ (figure dash)
+			'\u2012',
+			// – (en dash)
+			'\u2013',
+			// — (em dash)
+			'\u2014',
+			// ― (horizontal bar)
+			'\u2015',
+			// ⁓ (swung dash)
+			'\u2053',
+			// ⁻ (superscript minus)
+			'\u207b',
+			// ₋ (subscript minus)
+			'\u208b',
+			// − (minus sign)
+			'\u2212',
+			// ⸗ (double oblique hyphen)
+			'\u2e17',
+			// ⸺ (two-em dash)
+			'\u2e3a',
+			// ⸻ (three-em dash)
+			'\u2e3b',
+			// 〜 (wave dash)
+			'\u301c',
+			// 〰 (wavy dash)
+			'\u3030',
+			// ゠ (katakana-hiragana double hyphen)
+			'\u30a0',
+			// ︱ (presentation form for vertical em dash)
+			'\ufe31',
+			// ︲ (presentation form for vertical en dash)
+			'\ufe32',
+			// ﹘ (small em dash)
+			'\ufe58',
+			// ﹣ (small hyphen-minus)
+			'\ufe63',
+			// － (fullwidth hyphen-minus)
+			'\uff0d',
+		];
+		expect( normalizeTextString( dashCharacters.join( '' ) ) ).toBe(
+			'-'.repeat( dashCharacters.length )
+		);
 	} );
 } );
diff --git a/packages/components/src/utils/test/values.js b/packages/components/src/utils/test/values.js
deleted file mode 100644
index 384136949beb3c..00000000000000
--- a/packages/components/src/utils/test/values.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Internal dependencies
- */
-import { isValueNumeric } from '../values';
-
-/**
- * This works because Node 12 ships with `small-icu` instead of `full-icu`
- * meaning it only supports the `en-US` locale. If we test for support of the
- * `pt-BR` locale, we can detect when we're running in a "full-icu" environment
- * i.e., either Node 14+ or previous versions built with the `full-icu` option.
- *
- * Furthermore, this is safe to run in a `jsdom` test environment because, as the
- * issue linked below describes, `jsdom` does not implement the Intl object, instead
- * relying on the relevant Node implementation.
- *
- * @see https://nodejs.org/docs/latest-v12.x/api/intl.html#intl_options_for_building_node_js
- * @see https://nodejs.org/docs/latest-v14.x/api/intl.html#intl_options_for_building_node_js
- * @see https://github.com/jsdom/jsdom/issues/1626
- *
- * @todo Remove when Node 12 is deprecated
- * @param {() => void} testCallback
- */
-function scopeTestToFullICU( testCallback ) {
-	if ( Intl.NumberFormat.supportedLocalesOf( 'pt-BR' ).length === 1 ) {
-		testCallback();
-	}
-}
-
-describe( 'isValueNumeric', () => {
-	it( 'should handle space separated numbers for locales with period decimal delimiters', () => {
-		expect( isValueNumeric( '1 000.1', 'en-US' ) ).toBe( true );
-	} );
-
-	it.each( [
-		'999',
-		'99.33',
-		0.0003,
-		2222,
-		'22,222,222',
-		-888,
-		new Number(),
-	] )(
-		'should return `true` for numeric values %s for locale with comma delimiter',
-		( x ) => {
-			expect( isValueNumeric( x, 'en-US' ) ).toBe( true );
-		}
-	);
-
-	it.each( [ null, , 'Stringy', {}, [] ] )(
-		'should return `false` for non-numeric value %s for locale with comma delimiter',
-		( x ) => {
-			expect( isValueNumeric( x, 'en-US' ) ).toBe( false );
-		}
-	);
-
-	scopeTestToFullICU( () => {
-		it( 'should handle space separated numbers for locales with comma decimal delimiters', () => {
-			expect( isValueNumeric( '1 000,1', 'pt-BR' ) ).toBe( true );
-		} );
-
-		it.each( [
-			'999',
-			'99,33',
-			0.0003,
-			2222,
-			'22.222.222',
-			-888,
-			new Number(),
-		] )(
-			'should return `true` for numeric values %s for locale with period delimiter',
-			( x ) => {
-				expect( isValueNumeric( x, 'pt-BR' ) ).toBe( true );
-			}
-		);
-
-		it.each( [ null, , 'Stringy', {}, [] ] )(
-			'should return `false` for non-numeric value %s for locale with period delimiter',
-			( x ) => {
-				expect( isValueNumeric( x, 'pt-BR' ) ).toBe( false );
-			}
-		);
-
-		it( 'should handle arabic locales with western arabic numerals', () => {
-			expect( isValueNumeric( '1.000,1', 'ar' ) ).toBe( true );
-			expect( isValueNumeric( '1.000,1', 'fa' ) ).toBe( true );
-			expect( isValueNumeric( '1.000,1', 'ur' ) ).toBe( true );
-			expect( isValueNumeric( '1.000,1', 'ckb' ) ).toBe( true );
-			expect( isValueNumeric( '1.000,1', 'ps' ) ).toBe( true );
-			expect( isValueNumeric( '1.000,a', 'ar' ) ).toBe( false );
-		} );
-
-		it( 'should handle arabic locales with eastern arabic numerals', () => {
-			expect( isValueNumeric( '١٬٠٠٠٫١', 'ar' ) ).toBe( true );
-			expect( isValueNumeric( '۴۵۶٫۱', 'fa' ) ).toBe( true );
-			expect( isValueNumeric( '١٬٠٠٠٫١', 'ur' ) ).toBe( true );
-			expect( isValueNumeric( '١٬٠٠٠٫١', 'ckb' ) ).toBe( true );
-			expect( isValueNumeric( '١٬٠٠٠٫١', 'ps' ) ).toBe( true );
-			expect( isValueNumeric( '١٬٠٠٠٫a', 'ar' ) ).toBe( false );
-		} );
-	} );
-} );
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
index 9e25f4a8c20b4b..8c8c2d8a5633f7 100644
--- a/packages/components/src/utils/theme-variables.scss
+++ b/packages/components/src/utils/theme-variables.scss
@@ -2,7 +2,31 @@
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
-// defined, fallback to the default theme color (WP blue).
-$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+// defined, fallback to the default theme color (WP blueberry).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+
+// Define accent color transparent variants.
+$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
+
+// Used when placing text on the accent color.
+$components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);
+
+$components-color-background: var(--wp-components-color-background, $white);
+$components-color-foreground: var(--wp-components-color-foreground, $gray-900);
+
+// Used when placing text on the foreground color.
+$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, $white);
+
+$components-color-gray-100: var(--wp-components-color-gray-100, $gray-100);
+$components-color-gray-200: var(--wp-components-color-gray-200, $gray-200);
+$components-color-gray-300: var(--wp-components-color-gray-300, $gray-300);
+$components-color-gray-400: var(--wp-components-color-gray-400, $gray-400);
+$components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
+$components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
+$components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
+
+// Semantic aliases (prefer these over raw gray values when applicable).
+$components-color-border: #{ $components-color-gray-600 };
diff --git a/packages/components/src/utils/types.ts b/packages/components/src/utils/types.ts
index 54fe75edaa306b..d0ea62501a1f6b 100644
--- a/packages/components/src/utils/types.ts
+++ b/packages/components/src/utils/types.ts
@@ -1,36 +1 @@
-export type SizeRangeDefault =
-	| 'xLarge'
-	| 'large'
-	| 'medium'
-	| 'small'
-	| 'xSmall';
-
-export type SizeRangeReduced = 'large' | 'medium' | 'small';
-
-export type PopperPlacement =
-	| 'auto'
-	| 'auto-start'
-	| 'auto-end'
-	| 'top'
-	| 'top-start'
-	| 'top-end'
-	| 'right'
-	| 'right-start'
-	| 'right-end'
-	| 'bottom'
-	| 'bottom-start'
-	| 'bottom-end'
-	| 'left'
-	| 'left-start'
-	| 'left-end';
-
-export type PopperProps = {
-	/**
-	 * Position of the popover element.
-	 *
-	 * @default 'auto'
-	 *
-	 * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode
-	 */
-	placement?: PopperPlacement;
-};
+export type ResponsiveCSSValue< T > = Array< T | undefined > | T;
diff --git a/packages/components/src/utils/unit-values.ts b/packages/components/src/utils/unit-values.ts
index 96a03641f98d0f..7bd09ab67ec97f 100644
--- a/packages/components/src/utils/unit-values.ts
+++ b/packages/components/src/utils/unit-values.ts
@@ -1,10 +1,10 @@
 const UNITED_VALUE_REGEX =
-	/^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
+	/^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
 
 /**
  * Parses a number and unit from a value.
  *
- * @param  toParse Value to parse
+ * @param toParse Value to parse
  *
  * @return  The extracted number and unit.
  */
@@ -27,8 +27,8 @@ export function parseCSSUnitValue(
 /**
  * Combines a value and a unit into a unit value.
  *
- * @param  value
- * @param  unit
+ * @param value
+ * @param unit
  *
  * @return The unit value.
  */
diff --git a/packages/components/src/utils/use-deprecated-props.ts b/packages/components/src/utils/use-deprecated-props.ts
new file mode 100644
index 00000000000000..856aa2e0d1a2c4
--- /dev/null
+++ b/packages/components/src/utils/use-deprecated-props.ts
@@ -0,0 +1,14 @@
+export function useDeprecated36pxDefaultSizeProp<
+	P extends Record< string, any > & {
+		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
+	},
+>( props: P ) {
+	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
+		props;
+
+	return {
+		...otherProps,
+		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
+	};
+}
diff --git a/packages/components/src/ui/utils/use-responsive-value.ts b/packages/components/src/utils/use-responsive-value.ts
similarity index 99%
rename from packages/components/src/ui/utils/use-responsive-value.ts
rename to packages/components/src/utils/use-responsive-value.ts
index d8b324b097a525..be986cb4fe3c02 100644
--- a/packages/components/src/ui/utils/use-responsive-value.ts
+++ b/packages/components/src/utils/use-responsive-value.ts
@@ -60,8 +60,9 @@ export function useResponsiveValue< T >(
 	const index = useBreakpointIndex( options );
 
 	// Allow calling the function with a "normal" value without having to check on the outside.
-	if ( ! Array.isArray( values ) && typeof values !== 'function' )
+	if ( ! Array.isArray( values ) && typeof values !== 'function' ) {
 		return values;
+	}
 
 	const array = values || [];
 
diff --git a/packages/components/src/utils/values.js b/packages/components/src/utils/values.js
index dacad621cc0e68..b620ebccbdb0ca 100644
--- a/packages/components/src/utils/values.js
+++ b/packages/components/src/utils/values.js
@@ -39,65 +39,6 @@ export function getDefinedValue( values = [], fallbackValue ) {
 	return values.find( isValueDefined ) ?? fallbackValue;
 }
 
-/**
- * @param {string} [locale]
- * @return {[RegExp, RegExp]} The delimiter and decimal regexp
- */
-const getDelimiterAndDecimalRegex = ( locale ) => {
-	const formatted = Intl.NumberFormat( locale ).format( 1000.1 );
-	const delimiter = formatted[ 1 ];
-	const decimal = formatted[ formatted.length - 2 ];
-	return [
-		new RegExp( `\\${ delimiter }`, 'g' ),
-		new RegExp( `\\${ decimal }`, 'g' ),
-	];
-};
-
-// https://en.wikipedia.org/wiki/Decimal_separator#Current_standards
-const INTERNATIONAL_THOUSANDS_DELIMITER = / /g;
-
-const ARABIC_NUMERAL_LOCALES = [ 'ar', 'fa', 'ur', 'ckb', 'ps' ];
-
-const EASTERN_ARABIC_NUMBERS = /([۰-۹]|[٠-٩])/g;
-
-/**
- * Checks to see if a value is a numeric value (`number` or `string`).
- *
- * Intentionally ignores whether the thousands delimiters are only
- * in the thousands marks.
- *
- * @param {any}    value
- * @param {string} [locale]
- * @return {boolean} Whether value is numeric.
- */
-export function isValueNumeric( value, locale = window.navigator.language ) {
-	if ( ARABIC_NUMERAL_LOCALES.some( ( l ) => locale.startsWith( l ) ) ) {
-		locale = 'en-GB';
-		if ( EASTERN_ARABIC_NUMBERS.test( value ) ) {
-			value = value
-				.replace( /[٠-٩]/g, ( /** @type {string} */ d ) =>
-					'٠١٢٣٤٥٦٧٨٩'.indexOf( d )
-				)
-				.replace( /[۰-۹]/g, ( /** @type {string} */ d ) =>
-					'۰۱۲۳۴۵۶۷۸۹'.indexOf( d )
-				)
-				.replace( /٬/g, ',' )
-				.replace( /٫/g, '.' );
-		}
-	}
-
-	const [ delimiterRegexp, decimalRegexp ] =
-		getDelimiterAndDecimalRegex( locale );
-	const valueToCheck =
-		typeof value === 'string'
-			? value
-					.replace( delimiterRegexp, '' )
-					.replace( decimalRegexp, '.' )
-					.replace( INTERNATIONAL_THOUSANDS_DELIMITER, '' )
-			: value;
-	return ! isNaN( parseFloat( valueToCheck ) ) && isFinite( valueToCheck );
-}
-
 /**
  * Converts a string to a number.
  *
@@ -108,16 +49,6 @@ export const stringToNumber = ( value ) => {
 	return parseFloat( value );
 };
 
-/**
- * Converts a number to a string.
- *
- * @param {number} value
- * @return {string} Number as a string.
- */
-export const numberToString = ( value ) => {
-	return `${ value }`;
-};
-
 /**
  * Regardless of the input being a string or a number, returns a number.
  *
@@ -129,15 +60,3 @@ export const numberToString = ( value ) => {
 export const ensureNumber = ( value ) => {
 	return typeof value === 'string' ? stringToNumber( value ) : value;
 };
-
-/**
- * Regardless of the input being a string or a number, returns a number.
- *
- * Returns `undefined` in case the string is `undefined` or not a valid numeric value.
- *
- * @param {string | number} value
- * @return {string} The converted string, or `undefined` in case the input is `undefined` or `NaN`.
- */
-export const ensureString = ( value ) => {
-	return typeof value === 'string' ? value : numberToString( value );
-};
diff --git a/packages/components/src/utils/with-ignore-ime-events.ts b/packages/components/src/utils/with-ignore-ime-events.ts
new file mode 100644
index 00000000000000..26c5cd67b25397
--- /dev/null
+++ b/packages/components/src/utils/with-ignore-ime-events.ts
@@ -0,0 +1,32 @@
+/**
+ * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
+ *
+ * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
+ * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
+ * which are intended to control the IME and not the application.
+ * These events should be ignored by any application logic.
+ *
+ * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
+ *
+ * @return A wrapped version of the given event handler that ignores IME events.
+ */
+export function withIgnoreIMEEvents<
+	E extends React.KeyboardEvent | KeyboardEvent,
+>( keydownHandler: ( event: E ) => void ) {
+	return ( event: E ) => {
+		const { isComposing } =
+			'nativeEvent' in event ? event.nativeEvent : event;
+
+		if (
+			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;
+		}
+
+		keydownHandler( event );
+	};
+}
diff --git a/packages/components/src/utils/z-index.js b/packages/components/src/utils/z-index.js
deleted file mode 100644
index 600f51c673aacf..00000000000000
--- a/packages/components/src/utils/z-index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const Flyout = 10000;
-export const Tooltip = 1000002;
diff --git a/packages/components/src/v-stack/README.md b/packages/components/src/v-stack/README.md
index 4b42ac1eb0a0e2..2f447b18015e51 100644
--- a/packages/components/src/v-stack/README.md
+++ b/packages/components/src/v-stack/README.md
@@ -29,7 +29,7 @@ function Example() {
 
 ## Props
 
-##### `alignment`: `HStackAlignment | CSSProperties['alignItems']`
+### `alignment`: `HStackAlignment | CSSProperties['alignItems']`
 
 Determines how the child elements are aligned.
 
@@ -42,28 +42,28 @@ Determines how the child elements are aligned.
 -   `bottom`: Aligns content to the bottom.
 -   `bottomLeft`: Aligns content to the bottom/left.
 -   `bottomRight`: Aligns content to the bottom/right.
--   `edge`: Aligns content to the edges of the container.
--   `stretch`: Stretches content to the edges of the container.
+-   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+-   `stretch`: Stretches content to the cross axis edges of the container.
 
-##### `direction`: `FlexDirection`
+### `direction`: `FlexDirection`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### `expanded`: `boolean`
+### `expanded`: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### `justify`: `CSSProperties['justifyContent']`
+### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
-##### `spacing`: `CSSProperties['width']`
+### `spacing`: `CSSProperties['width']`
 
 The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
 The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).
 
-##### `wrap`: `boolean`
+### `wrap`: `boolean`
 
 Determines if children should wrap.
 
diff --git a/packages/components/src/v-stack/component.tsx b/packages/components/src/v-stack/component.tsx
index aa24673db1677f..c3ae9fece97dc0 100644
--- a/packages/components/src/v-stack/component.tsx
+++ b/packages/components/src/v-stack/component.tsx
@@ -6,7 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { contextConnect, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useVStack } from './hook';
 import type { VStackProps } from './types';
diff --git a/packages/components/src/v-stack/hook.ts b/packages/components/src/v-stack/hook.ts
index aeeb5d2546d74d..f05a63328f848f 100644
--- a/packages/components/src/v-stack/hook.ts
+++ b/packages/components/src/v-stack/hook.ts
@@ -1,21 +1,24 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import { useHStack } from '../h-stack';
 import type { VStackProps } from './types';
 
 export function useVStack(
 	props: WordPressComponentProps< VStackProps, 'div' >
 ) {
-	const { expanded = false, ...otherProps } = useContextSystem(
-		props,
-		'VStack'
-	);
+	const {
+		expanded = false,
+		alignment = 'stretch',
+		...otherProps
+	} = useContextSystem( props, 'VStack' );
 
 	const hStackProps = useHStack( {
 		direction: 'column',
 		expanded,
+		alignment,
 		...otherProps,
 	} );
 
diff --git a/packages/components/src/v-stack/stories/e2e/index.story.tsx b/packages/components/src/v-stack/stories/e2e/index.story.tsx
new file mode 100644
index 00000000000000..c83402e66a7b46
--- /dev/null
+++ b/packages/components/src/v-stack/stories/e2e/index.story.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../../view';
+import { VStack } from '../..';
+
+const meta: Meta< typeof VStack > = {
+	component: VStack,
+	title: 'Components (Experimental)/VStack',
+};
+export default meta;
+
+const Template: StoryFn< typeof VStack > = ( props ) => {
+	return (
+		<VStack
+			{ ...props }
+			style={ { background: '#eee', minHeight: '3rem' } }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</VStack>
+	);
+};
+
+export const Default: StoryFn< typeof VStack > = Template.bind( {} );
+Default.args = {
+	spacing: 3,
+};
diff --git a/packages/components/src/v-stack/stories/index.story.tsx b/packages/components/src/v-stack/stories/index.story.tsx
new file mode 100644
index 00000000000000..11d6d579abc81e
--- /dev/null
+++ b/packages/components/src/v-stack/stories/index.story.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { VStack } from '..';
+
+const ALIGNMENTS = {
+	top: 'top',
+	topLeft: 'topLeft',
+	topRight: 'topRight',
+	left: 'left',
+	center: 'center',
+	right: 'right',
+	bottom: 'bottom',
+	bottomLeft: 'bottomLeft',
+	bottomRight: 'bottomRight',
+	edge: 'edge',
+	stretch: 'stretch',
+};
+
+const meta: Meta< typeof VStack > = {
+	component: VStack,
+	title: 'Components (Experimental)/Layout/VStack',
+	id: 'components-experimental-vstack',
+	argTypes: {
+		alignment: {
+			control: { type: 'select' },
+			options: Object.keys( ALIGNMENTS ),
+			mapping: ALIGNMENTS,
+		},
+		as: { control: { type: 'text' } },
+		direction: { control: { type: 'text' } },
+		justify: { control: { type: 'text' } },
+		spacing: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof VStack > = ( props ) => {
+	return (
+		<VStack
+			{ ...props }
+			style={ { background: '#eee', minHeight: '200px' } }
+		>
+			{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
+				<View key={ text } style={ { background: '#b9f9ff' } }>
+					{ text }
+				</View>
+			) ) }
+		</VStack>
+	);
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/components/src/v-stack/stories/index.tsx b/packages/components/src/v-stack/stories/index.tsx
deleted file mode 100644
index 46e3100778963e..00000000000000
--- a/packages/components/src/v-stack/stories/index.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { VStack } from '..';
-
-const meta: ComponentMeta< typeof VStack > = {
-	component: VStack,
-	title: 'Components (Experimental)/VStack',
-	argTypes: {
-		alignment: { control: { type: 'text' } },
-		as: { control: { type: 'text' } },
-		direction: { control: { type: 'text' } },
-		justify: { control: { type: 'text' } },
-		spacing: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof VStack > = ( props ) => {
-	return (
-		<VStack { ...props }>
-			<View>One</View>
-			<View>Two</View>
-			<View>Three</View>
-			<View>Four</View>
-			<View>Five</View>
-		</VStack>
-	);
-};
-
-export const Default = Template.bind( {} );
diff --git a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
index 9404cbb976b975..fbac33f7dc72c8 100644
--- a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
@@ -6,10 +6,10 @@ exports[`props should render alignment 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
@@ -46,17 +46,18 @@ exports[`props should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-0>* {
@@ -85,17 +86,18 @@ exports[`props should render spacing 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 5);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-0>* {
diff --git a/packages/components/src/v-stack/test/index.tsx b/packages/components/src/v-stack/test/index.tsx
index cf35691d0858f6..e8ea1ab0ee396f 100644
--- a/packages/components/src/v-stack/test/index.tsx
+++ b/packages/components/src/v-stack/test/index.tsx
@@ -39,4 +39,14 @@ describe( 'props', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	test( 'should not pass through invalid props to the `as` component', () => {
+		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+			return <div { ...props } />;
+		};
+
+		render( <VStack as={ AsComponent }>foobar</VStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );
diff --git a/packages/components/src/v-stack/types.ts b/packages/components/src/v-stack/types.ts
index 00daf1a4222afb..6b1a01a4fd0885 100644
--- a/packages/components/src/v-stack/types.ts
+++ b/packages/components/src/v-stack/types.ts
@@ -8,7 +8,7 @@ import type { CSSProperties } from 'react';
  */
 import type { HStackAlignment, Props as HStackProps } from '../h-stack/types';
 
-export type VStackProps = HStackProps & {
+export type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & {
 	/**
 	 * Determines how the child elements are aligned.
 	 *
@@ -21,8 +21,10 @@ export type VStackProps = HStackProps & {
 	 * -   `bottom`: Aligns content to the bottom.
 	 * -   `bottomLeft`: Aligns content to the bottom/left.
 	 * -   `bottomRight`: Aligns content to the bottom/right.
-	 * -   `edge`: Aligns content to the edges of the container.
-	 * -   `stretch`: Stretches content to the edges of the container.
+	 * -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
+	 * -   `stretch`: Stretches content to the cross axis edges of the container.
+	 *
+	 * @default 'stretch'
 	 */
 	alignment?: HStackAlignment | CSSProperties[ 'alignItems' ];
 	/**
diff --git a/packages/components/src/view/README.md b/packages/components/src/view/README.md
index 794d7b49a0d386..c1e04ebd8cfff4 100644
--- a/packages/components/src/view/README.md
+++ b/packages/components/src/view/README.md
@@ -27,13 +27,13 @@ function Example() {
 
 ## Props
 
-##### as
+### as
 
 **Type**: `string`,`E`
 
 Render the component as another React Component or HTML Element.
 
-##### css
+### css
 
 **Type**: `InterpolatedCSS`
 
diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index 02f79a2673d0e4..6742bd9f52e510 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -2,19 +2,30 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import type { RefAttributes } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { WordPressComponent } from '../ui/context/wordpress-component';
-import type { ViewProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+const PolymorphicDiv = styled.div``;
+
+function UnforwardedView< T extends React.ElementType = 'div' >(
+	{ as, ...restProps }: WordPressComponentProps< {}, T >,
+	ref: React.ForwardedRef< any >
+) {
+	return <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;
+}
 
 /**
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *
@@ -27,13 +38,8 @@ import type { ViewProps } from './types';
  * }
  * ```
  */
-// @ts-expect-error
-export const View: WordPressComponent<
-	'div',
-	ViewProps & RefAttributes< any >
-> = styled.div``;
-
-View.selector = '.components-view';
-View.displayName = 'View';
+export const View = Object.assign( forwardRef( UnforwardedView ), {
+	selector: '.components-view',
+} );
 
 export default View;
diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx
new file mode 100644
index 00000000000000..ee4bb71b8a243f
--- /dev/null
+++ b/packages/components/src/view/stories/index.story.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '..';
+
+const meta: Meta< typeof View > = {
+	component: View,
+	title: 'Components (Experimental)/View',
+	argTypes: {
+		as: { control: false },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof View > = ( args ) => {
+	return <View { ...args } />;
+};
+
+export const Default: StoryFn< typeof View > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};
diff --git a/packages/components/src/view/stories/index.tsx b/packages/components/src/view/stories/index.tsx
deleted file mode 100644
index fb27e29433470a..00000000000000
--- a/packages/components/src/view/stories/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '..';
-
-const meta: ComponentMeta< typeof View > = {
-	component: View,
-	title: 'Components (Experimental)/View',
-	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: { expanded: true },
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Template: ComponentStory< typeof View > = ( args ) => {
-	return <View { ...args } />;
-};
-
-export const Default: ComponentStory< typeof View > = Template.bind( {} );
-Default.args = {
-	children: 'An example tip',
-};
diff --git a/packages/components/src/view/types.ts b/packages/components/src/view/types.ts
deleted file mode 100644
index 6c7e1508812c8c..00000000000000
--- a/packages/components/src/view/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * External dependencies
- */
-import type { ReactNode } from 'react';
-
-export type ViewProps = { children?: ReactNode };
diff --git a/packages/components/src/visually-hidden/component.tsx b/packages/components/src/visually-hidden/component.tsx
index ffaa7f564019b2..ddf697c9373db6 100644
--- a/packages/components/src/visually-hidden/component.tsx
+++ b/packages/components/src/visually-hidden/component.tsx
@@ -6,11 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnect } from '../context';
 import { visuallyHidden } from './styles';
 import { View } from '../view';
 import type { VisuallyHiddenProps } from './types';
diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx
new file mode 100644
index 00000000000000..1c79718ddf6e04
--- /dev/null
+++ b/packages/components/src/visually-hidden/stories/index.story.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { VisuallyHidden } from '..';
+
+const meta: Meta< typeof VisuallyHidden > = {
+	component: VisuallyHidden,
+	title: 'Components/Typography/VisuallyHidden',
+	id: 'components-visuallyhidden',
+	argTypes: {
+		children: { control: false },
+		as: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof VisuallyHidden > = ( args ) => (
+	<>
+		<VisuallyHidden as="span" { ...args }>
+			This should not show.
+		</VisuallyHidden>
+		<div>
+			This text will{ ' ' }
+			<VisuallyHidden as="span" { ...args }>
+				but not inline{ ' ' }
+			</VisuallyHidden>{ ' ' }
+			always show.
+		</div>
+	</>
+);
+
+export const WithForwardedProps: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
+	<>
+		Additional props can be passed to VisuallyHidden and are forwarded to
+		the rendered element.{ ' ' }
+		<VisuallyHidden as="span" data-id="test" { ...args }>
+			Check out my data attribute!{ ' ' }
+		</VisuallyHidden>
+		Inspect the HTML to see!
+	</>
+);
+
+export const WithAdditionalClassNames: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
+	<>
+		Additional class names passed to VisuallyHidden extend the component
+		class name.{ ' ' }
+		<VisuallyHidden as="label" className="test-input" { ...args }>
+			Check out my class!{ ' ' }
+		</VisuallyHidden>
+		Inspect the HTML to see!
+	</>
+);
diff --git a/packages/components/src/visually-hidden/stories/index.tsx b/packages/components/src/visually-hidden/stories/index.tsx
deleted file mode 100644
index 7ed337b5bac9f3..00000000000000
--- a/packages/components/src/visually-hidden/stories/index.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '..';
-
-const meta: ComponentMeta< typeof VisuallyHidden > = {
-	component: VisuallyHidden,
-	title: 'Components/VisuallyHidden',
-	argTypes: {
-		children: { control: { type: null } },
-		as: { control: { type: 'text' } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
-	<>
-		<VisuallyHidden as="span" { ...args }>
-			This should not show.
-		</VisuallyHidden>
-		<div>
-			This text will{ ' ' }
-			<VisuallyHidden as="span" { ...args }>
-				but not inline{ ' ' }
-			</VisuallyHidden>{ ' ' }
-			always show.
-		</div>
-	</>
-);
-
-export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
-	args
-) => (
-	<>
-		Additional props can be passed to VisuallyHidden and are forwarded to
-		the rendered element.{ ' ' }
-		<VisuallyHidden as="span" data-id="test" { ...args }>
-			Check out my data attribute!{ ' ' }
-		</VisuallyHidden>
-		Inspect the HTML to see!
-	</>
-);
-
-export const WithAdditionalClassNames: ComponentStory<
-	typeof VisuallyHidden
-> = ( args ) => (
-	<>
-		Additional class names passed to VisuallyHidden extend the component
-		class name.{ ' ' }
-		<VisuallyHidden as="label" className="test-input" { ...args }>
-			Check out my class!{ ' ' }
-		</VisuallyHidden>
-		Inspect the HTML to see!
-	</>
-);
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 1cbcac56e4fb70..411ef13c7085e3 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -11,11 +11,11 @@ import { isValidElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValidChildren } from '../ui/utils/get-valid-children';
-import { contextConnect, useContextSystem } from '../ui/context';
+import { getValidChildren } from '../utils/get-valid-children';
+import { contextConnect, useContextSystem } from '../context';
 import { ZStackView, ZStackChildView } from './styles';
 import type { ZStackProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnconnectedZStack(
 	props: WordPressComponentProps< ZStackProps, 'div' >,
@@ -35,13 +35,14 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied by
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
 			<ZStackChildView
-				isLayered={ isLayered }
 				offsetAmount={ offsetAmount }
 				zIndex={ zIndex }
 				key={ key }
@@ -55,6 +56,7 @@ function UnconnectedZStack(
 		<ZStackView
 			{ ...otherProps }
 			className={ className }
+			isLayered={ isLayered }
 			ref={ forwardedRef }
 		>
 			{ clonedChildren }
diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx
new file mode 100644
index 00000000000000..53c7d950e75b1b
--- /dev/null
+++ b/packages/components/src/z-stack/stories/index.story.tsx
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '../../elevation';
+import { View } from '../../view';
+import { ZStack } from '..';
+
+const meta: Meta< typeof ZStack > = {
+	component: ZStack,
+	title: 'Components (Experimental)/ZStack',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: { control: false },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Avatar = ( {
+	backgroundColor,
+}: {
+	backgroundColor: CSSProperties[ 'backgroundColor' ];
+} ) => {
+	return (
+		<View>
+			<View
+				style={ {
+					border: '3px solid black',
+					borderRadius: '9999px',
+					height: '48px',
+					width: '48px',
+					backgroundColor,
+				} }
+			/>
+			<Elevation
+				borderRadius={ 9999 }
+				isInteractive={ false }
+				value={ 3 }
+			/>
+		</View>
+	);
+};
+
+const Template: StoryFn< typeof ZStack > = ( args ) => {
+	return (
+		<ZStack { ...args }>
+			<Avatar backgroundColor="#444" />
+			<Avatar backgroundColor="#777" />
+			<Avatar backgroundColor="#aaa" />
+			<Avatar backgroundColor="#fff" />
+		</ZStack>
+	);
+};
+
+export const Default: StoryFn< typeof ZStack > = Template.bind( {} );
+Default.args = {
+	offset: 20,
+};
diff --git a/packages/components/src/z-stack/stories/index.tsx b/packages/components/src/z-stack/stories/index.tsx
deleted file mode 100644
index b04e19962aed15..00000000000000
--- a/packages/components/src/z-stack/stories/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
-import { View } from '../../view';
-import { ZStack } from '..';
-
-const meta: ComponentMeta< typeof ZStack > = {
-	component: ZStack,
-	title: 'Components (Experimental)/ZStack',
-	argTypes: {
-		as: { control: { type: 'text' } },
-		children: { control: { type: null } },
-	},
-	parameters: {
-		controls: {
-			expanded: true,
-		},
-		docs: { source: { state: 'open' } },
-	},
-};
-export default meta;
-
-const Avatar = ( {
-	backgroundColor,
-}: {
-	backgroundColor: CSSProperties[ 'backgroundColor' ];
-} ) => {
-	return (
-		<View>
-			<View
-				style={ {
-					border: '3px solid black',
-					borderRadius: '9999px',
-					height: '48px',
-					width: '48px',
-					backgroundColor,
-				} }
-			/>
-			<Elevation
-				borderRadius={ 9999 }
-				isInteractive={ false }
-				value={ 3 }
-			/>
-		</View>
-	);
-};
-
-const Template: ComponentStory< typeof ZStack > = ( args ) => {
-	return (
-		<View>
-			<HStack>
-				<View>
-					<ZStack { ...args }>
-						<Avatar backgroundColor="#444" />
-						<Avatar backgroundColor="#777" />
-						<Avatar backgroundColor="#aaa" />
-						<Avatar backgroundColor="#fff" />
-					</ZStack>
-				</View>
-			</HStack>
-		</View>
-	);
-};
-
-export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
-Default.args = {
-	offset: 20,
-};
diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index d0bf20d38b1f4c..186f268e643663 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -4,36 +4,35 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { rtl } from '../utils';
-
-export const ZStackView = styled.div`
-	display: flex;
-	position: relative;
-`;
-
 export const ZStackChildView = styled.div< {
-	isLayered: boolean;
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	${ ( { isLayered, offsetAmount } ) =>
-		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+	&:not( :first-of-type ) {
+		${ ( { offsetAmount } ) =>
+			css( {
+				marginInlineStart: offsetAmount,
+			} ) };
+	}
 
-	${ ( { isLayered } ) =>
-		isLayered ? positionAbsolute : positionRelative }
-
-	${ ( { zIndex } ) => css( { zIndex } ) }
-`;
-
-const positionAbsolute = css`
-	position: absolute;
+	${ ( { zIndex } ) => css( { zIndex } ) };
 `;
 
-const positionRelative = css`
+export const ZStackView = styled.div< {
+	isLayered: boolean;
+} >`
+	display: inline-grid;
+	grid-auto-flow: column;
 	position: relative;
+
+	& > ${ ZStackChildView } {
+		position: relative;
+		justify-self: start;
+
+		${ ( { isLayered } ) =>
+			isLayered
+				? // When `isLayered` is true, all items overlap in the same grid cell
+				  css( { gridRowStart: 1, gridColumnStart: 1 } )
+				: undefined };
+	}
 `;
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 04a8eaa8d4d9ec..2033a6f43fede6 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
@@ -6,16 +7,9 @@
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
-			"dom-scroll-into-view",
 			"jest",
-			"@testing-library/jest-dom",
-			"snapshot-diff",
-			"@wordpress/jest-console"
-		],
-		// Some errors in Reakit types with TypeScript 4.3
-		// Remove the following line when they've been addressed.
-		"skipLibCheck": true,
-		"strictNullChecks": true
+			"@testing-library/jest-dom"
+		]
 	},
 	"references": [
 		{ "path": "../a11y" },
@@ -24,11 +18,17 @@
 		{ "path": "../deprecated" },
 		{ "path": "../dom" },
 		{ "path": "../element" },
+		{ "path": "../escape-html" },
 		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../is-shallow-equal" },
+		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
 		{ "path": "../react-i18n" },
+		{ "path": "../rich-text" },
 		{ "path": "../warning" }
 	],
 	"include": [ "src/**/*" ],
@@ -38,39 +38,6 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
-		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
-		"src/index.js",
-		"src/alignment-matrix-control",
-		"src/angle-picker-control",
-		"src/autocomplete",
-		"src/box-control",
-		"src/color-list-picker",
-		"src/combobox-control",
-		"src/custom-gradient-picker",
-		"src/dimension-control",
-		"src/duotone-picker",
-		"src/gradient-picker",
-		"src/guide",
-		"src/higher-order/navigate-regions",
-		"src/higher-order/with-fallback-styles",
-		"src/higher-order/with-filters",
-		"src/higher-order/with-focus-return",
-		"src/higher-order/with-notices",
-		"src/keyboard-shortcuts",
-		"src/menu-items-choice",
-		"src/navigation",
-		"src/notice",
-		"src/palette-edit",
-		"src/panel",
-		"src/query-controls",
-		"src/responsive-wrapper",
-		"src/sandbox",
-		"src/toolbar",
-		"src/toolbar-button",
-		"src/toolbar-context",
-		"src/toolbar-dropdown-menu",
-		"src/toolbar-group",
-		"src/toolbar-item",
-		"src/tree-grid"
+		"src/**/test/**/*.js" // only exclude js files, ts{x} files should be checked
 	]
 }
diff --git a/packages/compose/.npmrc b/packages/compose/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/compose/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index d362e7a6e5ce30..739a5f8831cb35 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,137 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+### Bug Fixes
+
+-   `useResizeObserver`: export legacy API at top-level for React Native ([#65588](https://github.com/WordPress/gutenberg/pull/65588)).
+
+## 7.8.0 (2024-09-19)
+
+### New Features
+
+-   `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
+-   `useResizeObserver`: new and improved version of the utility (legacy API is still supported) ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+### Internal
+
+-   Method style type signatures have been changed to function style ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
+## 6.34.0 (2024-05-02)
+
+-   Added new `observableMap` data structure and `useObservableValue` React hook ([#60945](https://github.com/WordPress/gutenberg/pull/60945)).
+
+## 6.33.0 (2024-04-19)
+
+## 6.32.0 (2024-04-03)
+
+## 6.31.0 (2024-03-21)
+
+## 6.30.0 (2024-03-06)
+
+## 6.29.0 (2024-02-21)
+
+## 6.28.0 (2024-02-09)
+
+## 6.27.0 (2024-01-24)
+
+### Deprecations
+
+-   The `pure` HoC has been deprecated. Use `memo` or `PureComponent` instead ([#57173](https://github.com/WordPress/gutenberg/pull/57173)).
+
+## 6.26.0 (2024-01-10)
+
+## 6.25.0 (2023-12-13)
+
+## 6.24.0 (2023-11-29)
+
+## 6.23.0 (2023-11-16)
+
+## 6.22.0 (2023-11-02)
+
+## 6.21.0 (2023-10-18)
+
+## 6.20.0 (2023-10-05)
+
+## 6.19.0 (2023-09-20)
+
+### New Features
+
+-   `useStateWithHistory`: Add a new hook to manage state with undo/redo support.
+
+## 6.18.0 (2023-08-31)
+
+## 6.17.0 (2023-08-16)
+
+## 6.16.0 (2023-08-10)
+
+## 6.15.0 (2023-07-20)
+
+## 6.14.0 (2023-07-05)
+
+## 6.13.0 (2023-06-23)
+
+## 6.12.0 (2023-06-07)
+
+## 6.11.0 (2023-05-24)
+
+## 6.10.0 (2023-05-10)
+
+## 6.9.0 (2023-04-26)
+
+## 6.8.0 (2023-04-12)
+
+## 6.7.0 (2023-03-29)
+
+## 6.6.0 (2023-03-15)
+
+## 6.5.0 (2023-03-01)
+
+## 6.4.0 (2023-02-15)
+
+## 6.3.0 (2023-02-01)
+
+## 6.2.0 (2023-01-11)
+
+## 6.1.0 (2023-01-02)
+
+## 6.0.0 (2022-12-14)
+
+### 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)
@@ -49,7 +180,7 @@
 
 ## 5.7.0 (2022-05-18)
 
-### Bug Fix
+### Bug Fixes
 
 -   `useRefEffect`: Allow `void` as a valid callback return type ([#40798](https://github.com/WordPress/gutenberg/pull/40798)).
 
@@ -75,7 +206,7 @@
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -95,8 +226,8 @@
 
 ### 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/.
+-   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)
 
@@ -124,7 +255,7 @@
 
 ## 2.1.0 (2018-10-29)
 
-### Deprecation
+### Deprecations
 
 -   `remountOnPropChange` has been deprecated.
 
@@ -134,6 +265,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/compose/README.md b/packages/compose/README.md
index 51897ce7905c17..b4e20a79bab0cc 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -1,6 +1,6 @@
 # Compose
 
-The `compose` package is a collection of handy [Hooks](https://reactjs.org/docs/hooks-intro.html) and [Higher Order Components](https://facebook.github.io/react/docs/higher-order-components.html) (HOCs) you can use to wrap your WordPress components and provide some basic features like: state, instance id, pure...
+The `compose` package is a collection of handy [Hooks](https://react.dev/reference/react/hooks) and [Higher Order Components](https://legacy.reactjs.org/docs/higher-order-components.html) (HOCs) you can use to wrap your WordPress components and provide some basic features like: state, instance id, pure...
 
 The `compose` function is inspired by [flowRight](https://lodash.com/docs/#flowRight) from Lodash and works the same way. It comes from functional programming, and allows you to compose any number of functions. You might also think of this as layering functions; `compose` will execute the last function first, then sequentially move back through the previous functions passing the result of each function upward.
 
@@ -11,7 +11,7 @@ const compose = ( f, g ) => x
     => f( g( x ) );
 ```
 
-Here's a simplified example of **compose** in use from Gutenberg's [`PluginSidebar` component](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js):
+Here's a simplified example of **compose** in use from Gutenberg's [`PluginSidebar` component](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-sidebar/index.js):
 
 Using compose:
 
@@ -63,19 +63,17 @@ For more details, you can refer to each Higher Order Component's README file. [A
 
 ### compose
 
-Composes multiple higher-order components into a single higher-order component. Performs right-to-left function
-composition, where each successive invocation is supplied the return value of the previous.
+Composes multiple higher-order components into a single higher-order component. Performs right-to-left function composition, where each successive invocation is supplied the return value of the previous.
 
 This is inspired by `lodash`'s `flowRight` function.
 
 _Related_
 
--   <https://docs-lodash.com/v4/flow-right/>
+-   <https://lodash.com/docs/4#flow-right>
 
 ### createHigherOrderComponent
 
-Given a function mapping a component to an enhanced component and modifier
-name, returns the enhanced component augmented with a generated displayName.
+Given a function mapping a component to an enhanced component and modifier name, returns the enhanced component augmented with a generated displayName.
 
 _Parameters_
 
@@ -88,24 +86,13 @@ _Returns_
 
 ### debounce
 
-A simplified and properly typed version of lodash's `debounce`, that
-always uses timers instead of sometimes using rAF.
+A simplified and properly typed version of lodash's `debounce`, that always uses timers instead of sometimes using rAF.
 
-Creates a debounced function that delays invoking `func` until after `wait`
-milliseconds have elapsed since the last time the debounced function was
-invoked. The debounced function comes with a `cancel` method to cancel delayed
-`func` invocations and a `flush` method to immediately invoke them. Provide
-`options` to indicate whether `func` should be invoked on the leading and/or
-trailing edge of the `wait` timeout. The `func` is invoked with the last
-arguments provided to the debounced function. Subsequent calls to the debounced
-function return the result of the last `func` invocation.
+Creates a debounced function that delays invoking `func` until after `wait` milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a `cancel` method to cancel delayed `func` invocations and a `flush` method to immediately invoke them. Provide `options` to indicate whether `func` should be invoked on the leading and/or trailing edge of the `wait` timeout. The `func` is invoked with the last arguments provided to the debounced function. Subsequent calls to the debounced function return the result of the last `func` invocation.
 
-**Note:** If `leading` and `trailing` options are `true`, `func` is
-invoked on the trailing edge of the timeout only if the debounced function
-is invoked more than once during the `wait` timeout.
+**Note:** If `leading` and `trailing` options are `true`, `func` is invoked on the trailing edge of the timeout only if the debounced function is invoked more than once during the `wait` timeout.
 
-If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-until the next tick, similar to `setTimeout` with a timeout of `0`.
+If `wait` is `0` and `leading` is `false`, `func` invocation is deferred until the next tick, similar to `setTimeout` with a timeout of `0`.
 
 _Parameters_
 
@@ -122,17 +109,14 @@ _Returns_
 
 ### ifCondition
 
-Higher-order component creator, creating a new component which renders if
-the given condition is satisfied or with the given optional prop name.
+Higher-order component creator, creating a new component which renders if the given condition is satisfied or with the given optional prop name.
 
 _Usage_
 
 ```ts
 type Props = { foo: string };
 const Component = ( props: Props ) => <div>{ props.foo }</div>;
-const ConditionalComponent = ifCondition(
-	( props: Props ) => props.foo.length !== 0
-)( Component );
+const ConditionalComponent = ifCondition( ( props: Props ) => props.foo.length !== 0 )( Component );
 <ConditionalComponent foo="" />; // => null
 <ConditionalComponent foo="bar" />; // => <div>bar</div>;
 ```
@@ -145,42 +129,39 @@ _Returns_
 
 -   Higher-order component.
 
+### observableMap
+
+A constructor (factory) for `ObservableMap`, a map-like key/value data structure where the individual entries are observable: using the `subscribe` method, you can subscribe to updates for a particular keys. Each subscriber always observes one specific key and is not notified about any unrelated changes (for different keys) in the `ObservableMap`.
+
+_Returns_
+
+-   `ObservableMap< K, V >`: A new instance of the `ObservableMap` type.
+
 ### pipe
 
-Composes multiple higher-order components into a single higher-order component. Performs left-to-right function
-composition, where each successive invocation is supplied the return value of the previous.
+Composes multiple higher-order components into a single higher-order component. Performs left-to-right function composition, where each successive invocation is supplied the return value of the previous.
 
 This is inspired by `lodash`'s `flow` function.
 
 _Related_
 
--   <https://docs-lodash.com/v4/flow/>
+-   <https://lodash.com/docs/4#flow>
 
 ### pure
 
-Given a component returns the enhanced component augmented with a component
-only re-rendering when its props/state change
+> **Deprecated** Use `memo` or `PureComponent` instead.
+
+Given a component returns the enhanced component augmented with a component only re-rendering when its props/state change
 
 ### throttle
 
-A simplified and properly typed version of lodash's `throttle`, that
-always uses timers instead of sometimes using rAF.
+A simplified and properly typed version of lodash's `throttle`, that always uses timers instead of sometimes using rAF.
 
-Creates a throttled function that only invokes `func` at most once per
-every `wait` milliseconds. The throttled function comes with a `cancel`
-method to cancel delayed `func` invocations and a `flush` method to
-immediately invoke them. Provide `options` to indicate whether `func`
-should be invoked on the leading and/or trailing edge of the `wait`
-timeout. The `func` is invoked with the last arguments provided to the
-throttled function. Subsequent calls to the throttled function return
-the result of the last `func` invocation.
+Creates a throttled function that only invokes `func` at most once per every `wait` milliseconds. The throttled function comes with a `cancel` method to cancel delayed `func` invocations and a `flush` method to immediately invoke them. Provide `options` to indicate whether `func` should be invoked on the leading and/or trailing edge of the `wait` timeout. The `func` is invoked with the last arguments provided to the throttled function. Subsequent calls to the throttled function return the result of the last `func` invocation.
 
-**Note:** If `leading` and `trailing` options are `true`, `func` is
-invoked on the trailing edge of the timeout only if the throttled function
-is invoked more than once during the `wait` timeout.
+**Note:** If `leading` and `trailing` options are `true`, `func` is invoked on the trailing edge of the timeout only if the throttled function is invoked more than once during the `wait` timeout.
 
-If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-until the next tick, similar to `setTimeout` with a timeout of `0`.
+If `wait` is `0` and `leading` is `false`, `func` invocation is deferred until the next tick, similar to `setTimeout` with a timeout of `0`.
 
 _Parameters_
 
@@ -196,8 +177,7 @@ _Returns_
 
 ### useAsyncList
 
-React hook returns an array which items get asynchronously appended from a source array.
-This behavior is useful if we want to render a list of items asynchronously for performance reasons.
+React hook returns an array which items get asynchronously appended from a source array. This behavior is useful if we want to render a list of items asynchronously for performance reasons.
 
 _Parameters_
 
@@ -210,8 +190,7 @@ _Returns_
 
 ### useConstrainedTabbing
 
-In Dialogs/modals, the tabbing must be constrained to the content of
-the wrapper element. This hook adds the behavior to the returned ref.
+In Dialogs/modals, the tabbing must be constrained to the content of the wrapper element. This hook adds the behavior to the returned ref.
 
 _Usage_
 
@@ -264,14 +243,11 @@ _Returns_
 
 ### useDebounce
 
-Debounces a function similar to Lodash's `debounce`. A new debounced function will
-be returned and any scheduled calls cancelled if any of the arguments change,
-including the function to debounce, so please wrap functions created on
-render in components in `useCallback`.
+Debounces a function similar to Lodash's `debounce`. A new debounced function will be returned and any scheduled calls cancelled if any of the arguments change, including the function to debounce, so please wrap functions created on render in components in `useCallback`.
 
 _Related_
 
--   <https://docs-lodash.com/v4/debounce/>
+-   <https://lodash.com/docs/4#debounce>
 
 _Parameters_
 
@@ -283,11 +259,21 @@ _Returns_
 
 -   `import('../../utils/debounce').DebouncedFunc<TFunc>`: Debounced function.
 
+### useDebouncedInput
+
+Helper hook for input fields that need to debounce the value before using it.
+
+_Parameters_
+
+-   _defaultValue_ The default value to use.
+
+_Returns_
+
+-   `[ string, ( value: string ) => void, string ]`: The input value, the setter and the debounced input value.
+
 ### useDisabled
 
-In some circumstances, such as block previews, all focusable DOM elements
-(input fields, links, buttons, etc.) need to be disabled. This hook adds the
-behavior to disable nested DOM elements to the returned ref.
+In some circumstances, such as block previews, all focusable DOM elements (input fields, links, buttons, etc.) need to be disabled. This hook adds the behavior to disable nested DOM elements to the returned ref.
 
 If you can, prefer the use of the inert HTML attribute.
 
@@ -319,10 +305,32 @@ _Returns_
 
 -   `import('react').RefCallback<HTMLElement>`: Element Ref.
 
+### useEvent
+
+Creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks. Throws when used in the render phase.
+
+_Usage_
+
+```tsx
+function Component( props ) {
+	const onClick = useEvent( props.onClick );
+	useEffect( () => {
+		onClick();
+		// Won't trigger the effect again when props.onClick is updated.
+	}, [ onClick ] );
+	// Won't re-render Button when props.onClick is updated (if `Button` is
+	// wrapped in `React.memo`).
+	return <Button onClick={ onClick } />;
+}
+```
+
+_Parameters_
+
+-   _callback_ `T`: The callback function to wrap.
+
 ### useFocusableIframe
 
-Dispatches a bubbling focus event when the iframe receives focus. Use
-`onFocus` as usual on the iframe or a parent element.
+Dispatches a bubbling focus event when the iframe receives focus. Use `onFocus` as usual on the iframe or a parent element.
 
 _Returns_
 
@@ -358,10 +366,7 @@ _Returns_
 
 ### useFocusReturn
 
-When opening modals/sidebars/dialogs, the focus
-must move to the opened area and return to the
-previously focused element when closed.
-The current hook implements the returning behavior.
+Adds the unmount behavior of returning focus to the element which had it previously as is expected for roles like menus or dialogs.
 
 _Usage_
 
@@ -403,9 +408,7 @@ _Returns_
 
 ### useIsomorphicLayoutEffect
 
-Preferred over direct usage of `useLayoutEffect` when supporting
-server rendered components (SSR) because currently React
-throws a warning when using useLayoutEffect in that environment.
+Preferred over direct usage of `useLayoutEffect` when supporting server rendered components (SSR) because currently React throws a warning when using useLayoutEffect in that environment.
 
 ### useKeyboardShortcut
 
@@ -437,25 +440,15 @@ _Returns_
 
 Merges refs into one ref callback.
 
-It also ensures that the merged ref callbacks are only called when they
-change (as a result of a `useCallback` dependency update) OR when the ref
-value changes, just as React does when passing a single ref callback to the
-component.
+It also ensures that the merged ref callbacks are only called when they change (as a result of a `useCallback` dependency update) OR when the ref value changes, just as React does when passing a single ref callback to the component.
 
-As expected, if you pass a new function on every render, the ref callback
-will be called after every render.
+As expected, if you pass a new function on every render, the ref callback will be called after every render.
 
-If you don't wish a ref callback to be called after every render, wrap it
-with `useCallback( callback, dependencies )`. When a dependency changes, the
-old ref callback will be called with `null` and the new ref callback will be
-called with the same value.
+If you don't wish a ref callback to be called after every render, wrap it with `useCallback( callback, dependencies )`. When a dependency changes, the old ref callback will be called with `null` and the new ref callback will be called with the same value.
 
-To make ref callbacks easier to use, you can also pass the result of
-`useRefEffect`, which makes cleanup easier by allowing you to return a
-cleanup function instead of handling `null`.
+To make ref callbacks easier to use, you can also pass the result of `useRefEffect`, which makes cleanup easier by allowing you to return a cleanup function instead of handling `null`.
 
-It's also possible to _disable_ a ref (and its behaviour) by simply not
-passing the ref.
+It's also possible to _disable_ a ref (and its behaviour) by simply not passing the ref.
 
 ```jsx
 const ref = useRefEffect( ( node ) => {
@@ -480,10 +473,22 @@ _Returns_
 
 -   `import('react').RefCallback<TypeFromRef<TRef>>`: The merged ref callback.
 
+### useObservableValue
+
+React hook that lets you observe an entry in an `ObservableMap`. The hook returns the current value corresponding to the key, or `undefined` when there is no value stored. It also observes changes to the value and triggers an update of the calling component in case the value changes.
+
+_Parameters_
+
+-   _map_ `ObservableMap< K, V >`: The `ObservableMap` to observe.
+-   _name_ `K`: The map key to observe.
+
+_Returns_
+
+-   `V | undefined`: The value corresponding to the map key requested.
+
 ### usePrevious
 
-Use something's value from the previous render.
-Based on <https://usehooks.com/usePrevious/>.
+Use something's value from the previous render. Based on <https://usehooks.com/usePrevious/>.
 
 _Parameters_
 
@@ -503,18 +508,9 @@ _Returns_
 
 ### useRefEffect
 
-Effect-like ref callback. Just like with `useEffect`, this allows you to
-return a cleanup function to be run if the ref changes or one of the
-dependencies changes. The ref is provided as an argument to the callback
-functions. The main difference between this and `useEffect` is that
-the `useEffect` callback is not called when the ref changes, but this is.
-Pass the returned ref callback as the component's ref and merge multiple refs
-with `useMergeRefs`.
+Effect-like ref callback. Just like with `useEffect`, this allows you to return a cleanup function to be run if the ref changes or one of the dependencies changes. The ref is provided as an argument to the callback functions. The main difference between this and `useEffect` is that the `useEffect` callback is not called when the ref changes, but this is. Pass the returned ref callback as the component's ref and merge multiple refs with `useMergeRefs`.
 
-It's worth noting that if the dependencies array is empty, there's not
-strictly a need to clean up event handlers for example, because the node is
-to be removed. It _is_ necessary if you add dependencies because the ref
-callback will be called multiple times for the same node.
+It's worth noting that if the dependencies array is empty, there's not strictly a need to clean up event handlers for example, because the node is to be removed. It _is_ necessary if you add dependencies because the ref callback will be called multiple times for the same node.
 
 _Parameters_
 
@@ -527,34 +523,49 @@ _Returns_
 
 ### useResizeObserver
 
-Hook which allows to listen the resize event of any target element when it changes sizes.
-\_Note: `useResizeObserver` will report `null` until after first render.
+Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) for an HTML or SVG element.
+
+Pass the returned setter as a callback ref to the React element you want to observe, or use it in layout effects for advanced use cases.
 
 _Usage_
 
-```js
-const App = () => {
-	const [ resizeListener, sizes ] = useResizeObserver();
+```tsx
+const setElement = useResizeObserver(
+	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+	{ box: 'border-box' }
+);
+<div ref={ setElement } />;
 
-	return (
-		<div>
-			{ resizeListener }
-			Your content here
-		</div>
-	);
-};
+// The setter can be used in other ways, for example:
+useLayoutEffect( () => {
+	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+}, [ elementId ] );
 ```
 
+_Parameters_
+
+-   _callback_ `ResizeObserverCallback`: The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+-   _options_ `ResizeObserverOptions`: Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+
+### useStateWithHistory
+
+useState with undo/redo history.
+
+_Parameters_
+
+-   _initialValue_ `T`: Initial value.
+
+_Returns_
+
+-   Value, setValue, hasUndo, hasRedo, undo, redo.
+
 ### useThrottle
 
-Throttles a function similar to Lodash's `throttle`. A new throttled function will
-be returned and any scheduled calls cancelled if any of the arguments change,
-including the function to throttle, so please wrap functions created on
-render in components in `useCallback`.
+Throttles a function similar to Lodash's `throttle`. A new throttled function will be returned and any scheduled calls cancelled if any of the arguments change, including the function to throttle, so please wrap functions created on render in components in `useCallback`.
 
 _Related_
 
--   <https://docs-lodash.com/v4/throttle/>
+-   <https://lodash.com/docs/4#throttle>
 
 _Parameters_
 
@@ -588,9 +599,7 @@ _Returns_
 
 ### useWarnOnChange
 
-Hook that performs a shallow comparison between the preview value of an object
-and the new one, if there's a difference, it prints it to the console.
-this is useful in performance related work, to check why a component re-renders.
+Hook that performs a shallow comparison between the preview value of an object and the new one, if there's a difference, it prints it to the console. this is useful in performance related work, to check why a component re-renders.
 
 _Usage_
 
@@ -611,12 +620,7 @@ _Parameters_
 
 > **Deprecated**
 
-Higher-order component creator which, given an object of DOM event types and
-values corresponding to a callback function name on the component, will
-create or update a window event handler to invoke the callback when an event
-occurs. On behalf of the consuming developer, the higher-order component
-manages unbinding when the component unmounts, and binding at most a single
-event handler for the entire application.
+Higher-order component creator which, given an object of DOM event types and values corresponding to a callback function name on the component, will create or update a window event handler to invoke the callback when an event occurs. On behalf of the consuming developer, the higher-order component manages unbinding when the component unmounts, and binding at most a single event handler for the entire application.
 
 _Parameters_
 
@@ -628,20 +632,17 @@ _Returns_
 
 ### withInstanceId
 
-A Higher Order Component used to be provide a unique instance ID by
-component.
+A Higher Order Component used to provide a unique instance ID by component.
 
 ### withSafeTimeout
 
-A higher-order component used to provide and manage delayed function calls
-that ought to be bound to a component's lifecycle.
+A higher-order component used to provide and manage delayed function calls that ought to be bound to a component's lifecycle.
 
 ### withState
 
 > **Deprecated** Use `useState` instead.
 
-A Higher Order Component used to provide and manage internal component state
-via props.
+A Higher Order Component used to provide and manage internal component state via props.
 
 _Parameters_
 
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 75933796a395f9..72c31dc744057e 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.20.0",
+	"version": "7.13.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,29 +21,32 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/priority-queue": "file:../priority-queue",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/undo-manager": "*",
 		"change-case": "^4.1.2",
-		"clipboard": "^2.0.8",
+		"clipboard": "^2.0.11",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/compose/src/higher-order/compose.ts b/packages/compose/src/higher-order/compose.ts
index 2b7b598c70c958..1fcaa55eb4512b 100644
--- a/packages/compose/src/higher-order/compose.ts
+++ b/packages/compose/src/higher-order/compose.ts
@@ -9,7 +9,7 @@ import { basePipe } from './pipe';
  *
  * This is inspired by `lodash`'s `flowRight` function.
  *
- * @see https://docs-lodash.com/v4/flow-right/
+ * @see https://lodash.com/docs/4#flow-right
  */
 const compose = basePipe( true );
 
diff --git a/packages/compose/src/higher-order/if-condition/index.tsx b/packages/compose/src/higher-order/if-condition/index.tsx
index a315b2251da1c4..4bfacfd9569b73 100644
--- a/packages/compose/src/higher-order/if-condition/index.tsx
+++ b/packages/compose/src/higher-order/if-condition/index.tsx
@@ -21,11 +21,13 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
  * <ConditionalComponent foo="bar" />; // => <div>bar</div>;
  * ```
  *
- * @param  predicate Function to test condition.
+ * @param predicate Function to test condition.
  *
  * @return Higher-order component.
  */
-function ifCondition< Props >( predicate: ( props: Props ) => boolean ) {
+function ifCondition< Props extends {} >(
+	predicate: ( props: Props ) => boolean
+) {
 	return createHigherOrderComponent(
 		( WrappedComponent: ComponentType< Props > ) => ( props: Props ) => {
 			if ( ! predicate( props ) ) {
diff --git a/packages/compose/src/higher-order/pipe.ts b/packages/compose/src/higher-order/pipe.ts
index ced7618ad81bfd..29003d818ccc3a 100644
--- a/packages/compose/src/higher-order/pipe.ts
+++ b/packages/compose/src/higher-order/pipe.ts
@@ -43,7 +43,7 @@
  *
  * Allows to choose whether to perform left-to-right or right-to-left composition.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  *
  * @param {boolean} reverse True if right-to-left, false for left-to-right composition.
  */
@@ -67,7 +67,7 @@ const basePipe =
  *
  * This is inspired by `lodash`'s `flow` function.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  */
 const pipe = basePipe();
 
diff --git a/packages/compose/src/higher-order/pure/index.tsx b/packages/compose/src/higher-order/pure/index.tsx
index 457d70aa8e471b..38a85a5eebe9ab 100644
--- a/packages/compose/src/higher-order/pure/index.tsx
+++ b/packages/compose/src/higher-order/pure/index.tsx
@@ -17,8 +17,10 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 /**
  * Given a component returns the enhanced component augmented with a component
  * only re-rendering when its props/state change
+ *
+ * @deprecated Use `memo` or `PureComponent` instead.
  */
-const pure = createHigherOrderComponent( function < Props >(
+const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >
 ): ComponentType< Props > {
 	if ( WrappedComponent.prototype instanceof Component ) {
@@ -41,7 +43,6 @@ const pure = createHigherOrderComponent( function < Props >(
 			return <WrappedComponent { ...this.props } />;
 		}
 	};
-},
-'pure' );
+}, 'pure' );
 
 export default pure;
diff --git a/packages/compose/src/higher-order/pure/test/index.js b/packages/compose/src/higher-order/pure/test/index.js
index 640b250df98422..4285d9228c45d3 100644
--- a/packages/compose/src/higher-order/pure/test/index.js
+++ b/packages/compose/src/higher-order/pure/test/index.js
@@ -40,9 +40,7 @@ describe( 'pure', () => {
 	} );
 
 	it( 'class component should rerender if the props or state change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		let i = 0;
 		const MyComp = pure(
 			class extends Component {
diff --git a/packages/compose/src/higher-order/test/compose.ts b/packages/compose/src/higher-order/test/compose.ts
index 8c27a0b9b4401d..d53710015b89f4 100644
--- a/packages/compose/src/higher-order/test/compose.ts
+++ b/packages/compose/src/higher-order/test/compose.ts
@@ -30,7 +30,6 @@ describe( 'compose', () => {
 		const c = ( value ) => ( value += 'c' );
 		const d = ( value ) => ( value += 'd' );
 		const e = ( value ) => ( value += 'e' );
-		const f = ( value ) => ( value += 'f' );
 
 		expect( compose( [ a, b ], c, [ d ], e )( 'test' ) ).toBe(
 			'testedcba'
diff --git a/packages/compose/src/higher-order/test/pipe.ts b/packages/compose/src/higher-order/test/pipe.ts
index b15a7a3319128b..2f4119d724dbd2 100644
--- a/packages/compose/src/higher-order/test/pipe.ts
+++ b/packages/compose/src/higher-order/test/pipe.ts
@@ -30,7 +30,6 @@ describe( 'pipe', () => {
 		const c = ( value ) => ( value += 'c' );
 		const d = ( value ) => ( value += 'd' );
 		const e = ( value ) => ( value += 'e' );
-		const f = ( value ) => ( value += 'f' );
 
 		expect( pipe( [ a, b ], c, [ d ], e )( 'test' ) ).toBe( 'testabcde' );
 	} );
diff --git a/packages/compose/src/higher-order/with-global-events/test/index.js b/packages/compose/src/higher-order/with-global-events/test/index.js
index 2a7cce35ea7345..af41beec7cf48d 100644
--- a/packages/compose/src/higher-order/with-global-events/test/index.js
+++ b/packages/compose/src/higher-order/with-global-events/test/index.js
@@ -36,7 +36,8 @@ describe( 'withGlobalEvents', () => {
 		}
 
 		render() {
-			return <div>{ this.props.children }</div>;
+			const { children } = this.props;
+			return <div>{ children }</div>;
 		}
 	}
 
diff --git a/packages/compose/src/higher-order/with-instance-id/index.tsx b/packages/compose/src/higher-order/with-instance-id/index.tsx
index d4802f66b56d0c..3b4131930bf1bf 100644
--- a/packages/compose/src/higher-order/with-instance-id/index.tsx
+++ b/packages/compose/src/higher-order/with-instance-id/index.tsx
@@ -1,18 +1,17 @@
 /**
  * Internal dependencies
  */
-import {
-	createHigherOrderComponent,
+import type {
 	WithInjectedProps,
 	WithoutInjectedProps,
 } from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 import useInstanceId from '../../hooks/use-instance-id';
 
 type InstanceIdProps = { instanceId: string | number };
 
 /**
- * A Higher Order Component used to be provide a unique instance ID by
- * component.
+ * A Higher Order Component used to provide a unique instance ID by component.
  */
 const withInstanceId = createHigherOrderComponent(
 	< C extends WithInjectedProps< C, InstanceIdProps > >(
diff --git a/packages/compose/src/higher-order/with-network-connectivity/README.md b/packages/compose/src/higher-order/with-network-connectivity/README.md
new file mode 100644
index 00000000000000..7ae64c09499737
--- /dev/null
+++ b/packages/compose/src/higher-order/with-network-connectivity/README.md
@@ -0,0 +1,20 @@
+# withNetworkConnectivity
+
+`withNetworkConnectivity` provides a true/false mobile connectivity status based on the `useNetworkConnectivity` hook.
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import { withNetworkConnectivity } from '@wordpress/compose';
+
+export class MyComponent extends Component {
+	if ( this.props.isConnected !== true ) {
+		console.log( 'You are currently offline.' )
+	}
+}
+
+export default withNetworkConnectivity( MyComponent )
+```
diff --git a/packages/compose/src/higher-order/with-network-connectivity/index.native.js b/packages/compose/src/higher-order/with-network-connectivity/index.native.js
new file mode 100644
index 00000000000000..1a416966d45be9
--- /dev/null
+++ b/packages/compose/src/higher-order/with-network-connectivity/index.native.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
+import useNetworkConnectivity from '../../hooks/use-network-connectivity';
+
+const withNetworkConnectivity = createHigherOrderComponent(
+	( WrappedComponent ) => {
+		return ( props ) => {
+			const { isConnected } = useNetworkConnectivity();
+			return (
+				<WrappedComponent { ...props } isConnected={ isConnected } />
+			);
+		};
+	},
+	'withNetworkConnectivity'
+);
+
+export default withNetworkConnectivity;
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..73e8faec6c1011 100644
--- a/packages/compose/src/higher-order/with-safe-timeout/index.tsx
+++ b/packages/compose/src/higher-order/with-safe-timeout/index.tsx
@@ -6,11 +6,11 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	createHigherOrderComponent,
+import type {
 	WithInjectedProps,
 	WithoutInjectedProps,
 } from '../../utils/create-higher-order-component';
+import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
 
 /**
  * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
@@ -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() {
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..addda442e7ea86 100644
--- a/packages/compose/src/higher-order/with-state/test/index.js
+++ b/packages/compose/src/higher-order/with-state/test/index.js
@@ -11,9 +11,7 @@ import withState from '../';
 
 describe( 'withState', () => {
 	it( 'should pass initial state and allow updates', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const EnhancedComponent = withState( {
 			count: 0,
 		} )( ( { count, setState } ) => (
diff --git a/packages/compose/src/hooks/use-async-list/index.ts b/packages/compose/src/hooks/use-async-list/index.ts
index 732f9d92c8e971..ff53bc7b9eb99d 100644
--- a/packages/compose/src/hooks/use-async-list/index.ts
+++ b/packages/compose/src/hooks/use-async-list/index.ts
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { flushSync, useEffect, useState } from '@wordpress/element';
 import { createQueue } from '@wordpress/priority-queue';
 
 type AsyncListConfig = {
@@ -11,8 +11,8 @@ type AsyncListConfig = {
 /**
  * Returns the first items from list that are present on state.
  *
- * @param  list  New array.
- * @param  state Current state.
+ * @param list  New array.
+ * @param state Current state.
  * @return First items present iin state.
  */
 function getFirstItemsPresentInState< T >( list: T[], state: T[] ): T[] {
@@ -34,8 +34,8 @@ function getFirstItemsPresentInState< T >( list: T[], state: T[] ): T[] {
  * React hook returns an array which items get asynchronously appended from a source array.
  * This behavior is useful if we want to render a list of items asynchronously for performance reasons.
  *
- * @param  list   Source array.
- * @param  config Configuration object.
+ * @param list   Source array.
+ * @param config Configuration object.
  *
  * @return Async array.
  */
@@ -44,7 +44,7 @@ function useAsyncList< T >(
 	config: AsyncListConfig = { step: 1 }
 ): T[] {
 	const { step = 1 } = config;
-	const [ current, setCurrent ] = useState( [] as T[] );
+	const [ current, setCurrent ] = useState< T[] >( [] );
 
 	useEffect( () => {
 		// On reset, we keep the first items that were previously rendered.
@@ -55,21 +55,18 @@ function useAsyncList< T >(
 			);
 		}
 		setCurrent( firstItems );
-		let nextIndex = firstItems.length;
 
 		const asyncQueue = createQueue();
-		const append = () => {
-			if ( list.length <= nextIndex ) {
-				return;
-			}
-			setCurrent( ( state ) => [
-				...state,
-				...list.slice( nextIndex, nextIndex + step ),
-			] );
-			nextIndex += step;
-			asyncQueue.add( {}, append );
-		};
-		asyncQueue.add( {}, append );
+		for ( let i = firstItems.length; i < list.length; i += step ) {
+			asyncQueue.add( {}, () => {
+				flushSync( () => {
+					setCurrent( ( state ) => [
+						...state,
+						...list.slice( i, i + step ),
+					] );
+				} );
+			} );
+		}
 
 		return () => asyncQueue.reset();
 	}, [ list ] );
diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js
index ecbc7db5a1c0f5..b9aca94222db6a 100644
--- a/packages/compose/src/hooks/use-constrained-tabbing/index.js
+++ b/packages/compose/src/hooks/use-constrained-tabbing/index.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { TAB } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -32,13 +31,10 @@ import useRefEffect from '../use-ref-effect';
  */
 function useConstrainedTabbing() {
 	return useRefEffect( ( /** @type {HTMLElement} */ node ) => {
-		/** @type {number|undefined} */
-		let timeoutId;
-
 		function onKeyDown( /** @type {KeyboardEvent} */ event ) {
-			const { keyCode, shiftKey, target } = event;
+			const { key, shiftKey, target } = event;
 
-			if ( keyCode !== TAB ) {
+			if ( key !== 'Tab' ) {
 				return;
 			}
 
@@ -48,29 +44,47 @@ function useConstrainedTabbing() {
 					/** @type {HTMLElement} */ ( target )
 				) || null;
 
-			// If the element that is about to receive focus is outside the
-			// area, move focus to a div and insert it at the start or end of
-			// the area, depending on the direction. Without preventing default
-			// behaviour, the browser will then move focus to the next element.
+			// When the target element contains the element that is about to
+			// receive focus, for example when the target is a tabbable
+			// container, browsers may disagree on where to move focus next.
+			// In this case we can't rely on native browsers behavior. We need
+			// to manage focus instead.
+			// See https://github.com/WordPress/gutenberg/issues/46041.
+			if (
+				/** @type {HTMLElement} */ ( target ).contains( nextElement )
+			) {
+				event.preventDefault();
+				nextElement?.focus();
+				return;
+			}
+
+			// If the element that is about to receive focus is inside the
+			// area, rely on native browsers behavior and let tabbing follow
+			// the native tab sequence.
 			if ( node.contains( nextElement ) ) {
 				return;
 			}
 
+			// If the element that is about to receive focus is outside the
+			// area, move focus to a div and insert it at the start or end of
+			// the area, depending on the direction. Without preventing default
+			// behaviour, the browser will then move focus to the next element.
 			const domAction = shiftKey ? 'append' : 'prepend';
 			const { ownerDocument } = node;
 			const trap = ownerDocument.createElement( 'div' );
 
 			trap.tabIndex = -1;
 			node[ domAction ]( trap );
+
+			// Remove itself when the trap loses focus.
+			trap.addEventListener( 'blur', () => node.removeChild( trap ) );
+
 			trap.focus();
-			// Remove after the browser moves focus to the next element.
-			timeoutId = setTimeout( () => node.removeChild( trap ) );
 		}
 
 		node.addEventListener( 'keydown', onKeyDown );
 		return () => {
 			node.removeEventListener( 'keydown', onKeyDown );
-			clearTimeout( timeoutId );
 		};
 	}, [] );
 }
diff --git a/packages/compose/src/hooks/use-copy-on-click/index.js b/packages/compose/src/hooks/use-copy-on-click/index.js
index 383be2b957342c..eab34045f3c21a 100644
--- a/packages/compose/src/hooks/use-copy-on-click/index.js
+++ b/packages/compose/src/hooks/use-copy-on-click/index.js
@@ -31,7 +31,7 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 	} );
 
 	/** @type {import('react').MutableRefObject<Clipboard | undefined>} */
-	const clipboard = useRef();
+	const clipboardRef = useRef();
 	const [ hasCopied, setHasCopied ] = useState( false );
 
 	useEffect( () => {
@@ -43,11 +43,11 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 		}
 
 		// Clipboard listens to click events.
-		clipboard.current = new Clipboard( ref.current, {
+		clipboardRef.current = new Clipboard( ref.current, {
 			text: () => ( typeof text === 'function' ? text() : text ),
 		} );
 
-		clipboard.current.on( 'success', ( { clearSelection, trigger } ) => {
+		clipboardRef.current.on( 'success', ( { clearSelection, trigger } ) => {
 			// Clearing selection will move focus back to the triggering button,
 			// ensuring that it is not reset to the body, and further that it is
 			// kept within the rendered node.
@@ -66,8 +66,8 @@ export default function useCopyOnClick( ref, text, timeout = 4000 ) {
 		} );
 
 		return () => {
-			if ( clipboard.current ) {
-				clipboard.current.destroy();
+			if ( clipboardRef.current ) {
+				clipboardRef.current.destroy();
 			}
 			clearTimeout( timeoutId );
 		};
diff --git a/packages/compose/src/hooks/use-copy-to-clipboard/index.js b/packages/compose/src/hooks/use-copy-to-clipboard/index.js
index 1d838a1158ecfb..fbd7b77fecc4ce 100644
--- a/packages/compose/src/hooks/use-copy-to-clipboard/index.js
+++ b/packages/compose/src/hooks/use-copy-to-clipboard/index.js
@@ -6,7 +6,7 @@ import Clipboard from 'clipboard';
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useRef, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,7 +20,9 @@ import useRefEffect from '../use-ref-effect';
  */
 function useUpdatedRef( value ) {
 	const ref = useRef( value );
-	ref.current = value;
+	useLayoutEffect( () => {
+		ref.current = value;
+	}, [ value ] );
 	return ref;
 }
 
@@ -54,9 +56,6 @@ export default function useCopyToClipboard( text, onSuccess ) {
 			// button, ensuring that it is not reset to the body, and
 			// further that it is kept within the rendered node.
 			clearSelection();
-			// Handle ClipboardJS focus bug, see
-			// https://github.com/zenorocha/clipboard.js/issues/680
-			node.focus();
 
 			if ( onSuccessRef.current ) {
 				onSuccessRef.current();
diff --git a/packages/compose/src/hooks/use-debounce/index.js b/packages/compose/src/hooks/use-debounce/index.js
index 5d48dba91bde6e..6da42f159a8640 100644
--- a/packages/compose/src/hooks/use-debounce/index.js
+++ b/packages/compose/src/hooks/use-debounce/index.js
@@ -19,7 +19,7 @@ import { debounce } from '../../utils/debounce';
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/debounce/
+ * @see https://lodash.com/docs/4#debounce
  *
  * @template {(...args: any[]) => void} TFunc
  *
diff --git a/packages/compose/src/hooks/use-debounced-input/index.ts b/packages/compose/src/hooks/use-debounced-input/index.ts
new file mode 100644
index 00000000000000..643b0ba68026c3
--- /dev/null
+++ b/packages/compose/src/hooks/use-debounced-input/index.ts
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useDebounce from '../use-debounce';
+
+/**
+ * Helper hook for input fields that need to debounce the value before using it.
+ *
+ * @param defaultValue The default value to use.
+ * @return The input value, the setter and the debounced input value.
+ */
+export default function useDebouncedInput(
+	defaultValue = ''
+): [ string, ( value: string ) => void, string ] {
+	const [ input, setInput ] = useState< string >( defaultValue );
+	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
+
+	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
+
+	useEffect( () => {
+		setDebouncedInput( input );
+	}, [ input, setDebouncedInput ] );
+
+	return [ input, setInput, debouncedInput ];
+}
diff --git a/packages/compose/src/hooks/use-dialog/index.ts b/packages/compose/src/hooks/use-dialog/index.ts
index bac94602489e67..1b517478fa0bd2 100644
--- a/packages/compose/src/hooks/use-dialog/index.ts
+++ b/packages/compose/src/hooks/use-dialog/index.ts
@@ -19,7 +19,26 @@ import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
 
 type DialogOptions = {
+	/**
+	 * Determines whether focus should be automatically moved to the popover
+	 * when it mounts. `false` causes no focus shift, `true` causes the popover
+	 * itself to gain focus, and `firstElement` focuses the first focusable
+	 * element within the popover.
+	 *
+	 * @default 'firstElement'
+	 */
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
+	/**
+	 * Determines whether tabbing is constrained to within the popover,
+	 * preventing keyboard focus from leaving the popover content without
+	 * explicit focus elsewhere, or whether the popover remains part of the
+	 * wider tab order.
+	 * If no value is passed, it will be derived from `focusOnMount`.
+	 *
+	 * @see focusOnMount
+	 * @default `focusOnMount` !== false
+	 */
+	constrainTabbing?: boolean;
 	onClose?: () => void;
 	/**
 	 * Use the `onClose` prop instead.
@@ -34,7 +53,7 @@ type DialogOptions = {
 
 type useDialogReturn = [
 	RefCallback< HTMLElement >,
-	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >
+	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,
 ];
 
 /**
@@ -44,10 +63,11 @@ type useDialogReturn = [
  *  - return focus on unmount.
  *  - focus outside.
  *
- * @param  options Dialog Options.
+ * @param options Dialog Options.
  */
 function useDialog( options: DialogOptions ): useDialogReturn {
 	const currentOptions = useRef< DialogOptions | undefined >();
+	const { constrainTabbing = options.focusOnMount !== false } = options;
 	useEffect( () => {
 		currentOptions.current = options;
 	}, Object.values( options ) );
@@ -83,7 +103,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 
 	return [
 		useMergeRefs( [
-			options.focusOnMount !== false ? constrainedTabbingRef : null,
+			constrainTabbing ? constrainedTabbingRef : null,
 			options.focusOnMount !== false ? focusReturnRef : null,
 			options.focusOnMount !== false ? focusOnMountRef : null,
 			closeOnEscapeRef,
diff --git a/packages/compose/src/hooks/use-disabled/index.ts b/packages/compose/src/hooks/use-disabled/index.ts
index 7a384cbcc546f7..64b56b1f9a8682 100644
--- a/packages/compose/src/hooks/use-disabled/index.ts
+++ b/packages/compose/src/hooks/use-disabled/index.ts
@@ -39,11 +39,16 @@ export default function useDisabled( {
 				return;
 			}
 
+			const defaultView = node?.ownerDocument?.defaultView;
+			if ( ! defaultView ) {
+				return;
+			}
+
 			/** A variable keeping track of the previous updates in order to restore them. */
 			const updates: Function[] = [];
 			const disable = () => {
 				node.childNodes.forEach( ( child ) => {
-					if ( ! ( child instanceof HTMLElement ) ) {
+					if ( ! ( child instanceof defaultView.HTMLElement ) ) {
 						return;
 					}
 					if ( ! child.getAttribute( 'inert' ) ) {
diff --git a/packages/compose/src/hooks/use-disabled/test/index.js b/packages/compose/src/hooks/use-disabled/test/index.js
index 491d4a6cd12f62..d51b2d5bf2d6e6 100644
--- a/packages/compose/src/hooks/use-disabled/test/index.js
+++ b/packages/compose/src/hooks/use-disabled/test/index.js
@@ -13,15 +13,13 @@ import { forwardRef } from '@wordpress/element';
  */
 import useDisabled from '../';
 
-jest.useRealTimers();
-
 describe( 'useDisabled', () => {
 	const Form = forwardRef( ( { showButton }, ref ) => {
 		return (
 			<form ref={ ref }>
 				<input />
 				<a href="https://wordpress.org/">A link</a>
-				<p role="document" contentEditable={ true } tabIndex="0"></p>
+				<p role="document" contentEditable tabIndex="0"></p>
 				{ showButton && <button>Button</button> }
 			</form>
 		);
@@ -50,7 +48,7 @@ describe( 'useDisabled', () => {
 		);
 
 		expect( screen.queryByText( 'Button' ) ).not.toBeInTheDocument();
-		rerender( <DisabledComponent showButton={ true } /> );
+		rerender( <DisabledComponent showButton /> );
 
 		const button = screen.getByText( 'Button' );
 		await waitFor( () => {
diff --git a/packages/compose/src/hooks/use-dragging/README.md b/packages/compose/src/hooks/use-dragging/README.md
index d90758ff576693..c941adb8cd5474 100644
--- a/packages/compose/src/hooks/use-dragging/README.md
+++ b/packages/compose/src/hooks/use-dragging/README.md
@@ -57,7 +57,7 @@ The following example allows us to drag & drop a red square around the entire vi
 /**
  * WordPress dependencies
  */
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback } from 'react';
 import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
 
 const UseDraggingExample = () => {
diff --git a/packages/compose/src/hooks/use-drop-zone/README.md b/packages/compose/src/hooks/use-drop-zone/README.md
new file mode 100644
index 00000000000000..7f6f1febc1bb7b
--- /dev/null
+++ b/packages/compose/src/hooks/use-drop-zone/README.md
@@ -0,0 +1,71 @@
+# useDropZone (experimental)
+
+A hook to facilitate drag and drop handling within a designated drop zone area. An optional `dropZoneElement` can be provided, however by default the drop zone is bound by the area where the returned `ref` is assigned.
+
+When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendent of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
+
+## Usage
+
+```js
+import { useState } from 'react';
+import { useDropZone } from '@wordpress/compose';
+
+const WithWrapperDropZoneElement = () => {
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+
+	const dropZoneRef = useDropZone(
+		{
+			dropZoneElement,
+			onDrop() => {
+				console.log( 'Dropped within the drop zone.' );
+			},
+			onDragEnter() => {
+				console.log( 'Dragging within the drop zone' );
+			}
+		}
+	)
+
+	return (
+		<div className="outer-wrapper" ref={ setDropZoneElement }>
+			<div ref={ dropZoneRef }>
+				<p>Drop Zone</p>
+			</div>
+		</div>
+	);
+};
+
+const WithoutWrapperDropZoneElement = () => {
+	const dropZoneRef = useDropZone(
+		{
+			onDrop() => {
+				console.log( 'Dropped within the drop zone.' );
+			},
+			onDragEnter() => {
+				console.log( 'Dragging within the drop zone' );
+			}
+		}
+	)
+
+	return (
+		<div ref={ dropZoneRef }>
+			<p>Drop Zone</p>
+		</div>
+	);
+};
+```
+
+## Parameters
+
+-   _props_ `Object`: Named parameters.
+-   _props.dropZoneElement_ `HTMLElement`: Optional element to be used as the drop zone.
+-   _props.isDisabled_ `boolean`: Whether or not to disable the drop zone.
+-   _props.onDragStart_ `( e: DragEvent ) => void`: Called when dragging has started.
+-   _props.onDragEnter_ `( e: DragEvent ) => void`: Called when the zone is entered.
+-   _props.onDragOver_ `( e: DragEvent ) => void`: Called when the zone is moved within.
+-   _props.onDragLeave_ `( e: DragEvent ) => void`: Called when the zone is left.
+-   _props.onDragEnd_ `( e: MouseEvent ) => void`: Called when dragging has ended.
+-   _props.onDrop_ `( e: DragEvent ) => void`: Called when dropping in the zone.
+
+_Returns_
+
+-   `RefCallback< HTMLElement >`: Ref callback to be passed to the drop zone element.
diff --git a/packages/compose/src/hooks/use-drop-zone/index.js b/packages/compose/src/hooks/use-drop-zone/index.js
index d6388e09f0bf08..1bf1b822228273 100644
--- a/packages/compose/src/hooks/use-drop-zone/index.js
+++ b/packages/compose/src/hooks/use-drop-zone/index.js
@@ -1,50 +1,26 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import useRefEffect from '../use-ref-effect';
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * @template T
- * @param {T} value
- * @return {import('react').MutableRefObject<T|null>} A ref with the value.
- */
-function useFreshRef( value ) {
-	/* eslint-enable jsdoc/valid-types */
-	/* eslint-disable jsdoc/no-undefined-types */
-	/** @type {import('react').MutableRefObject<T>} */
-	/* eslint-enable jsdoc/no-undefined-types */
-	// Disable reason: We're doing something pretty JavaScript-y here where the
-	// ref will always have a current value that is not null or undefined but it
-	// needs to start as undefined. We don't want to change the return type so
-	// it's easier to just ts-ignore this specific line that's complaining about
-	// undefined not being part of T.
-	// @ts-ignore
-	const ref = useRef();
-	ref.current = value;
-	return ref;
-}
+import useEvent from '../use-event';
 
 /**
  * A hook to facilitate drag and drop handling.
  *
- * @param {Object}                  props               Named parameters.
- * @param {boolean}                 [props.isDisabled]  Whether or not to disable the drop zone.
- * @param {(e: DragEvent) => void}  [props.onDragStart] Called when dragging has started.
- * @param {(e: DragEvent) => void}  [props.onDragEnter] Called when the zone is entered.
- * @param {(e: DragEvent) => void}  [props.onDragOver]  Called when the zone is moved within.
- * @param {(e: DragEvent) => void}  [props.onDragLeave] Called when the zone is left.
- * @param {(e: MouseEvent) => void} [props.onDragEnd]   Called when dragging has ended.
- * @param {(e: DragEvent) => void}  [props.onDrop]      Called when dropping in the zone.
+ * @param {Object}                  props                   Named parameters.
+ * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.
+ * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.
+ * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.
+ * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.
+ * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.
+ * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.
+ * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.
  *
  * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.
  */
 export default function useDropZone( {
+	dropZoneElement,
 	isDisabled,
 	onDrop: _onDrop,
 	onDragStart: _onDragStart,
@@ -53,19 +29,24 @@ export default function useDropZone( {
 	onDragEnd: _onDragEnd,
 	onDragOver: _onDragOver,
 } ) {
-	const onDropRef = useFreshRef( _onDrop );
-	const onDragStartRef = useFreshRef( _onDragStart );
-	const onDragEnterRef = useFreshRef( _onDragEnter );
-	const onDragLeaveRef = useFreshRef( _onDragLeave );
-	const onDragEndRef = useFreshRef( _onDragEnd );
-	const onDragOverRef = useFreshRef( _onDragOver );
+	const onDropEvent = useEvent( _onDrop );
+	const onDragStartEvent = useEvent( _onDragStart );
+	const onDragEnterEvent = useEvent( _onDragEnter );
+	const onDragLeaveEvent = useEvent( _onDragLeave );
+	const onDragEndEvent = useEvent( _onDragEnd );
+	const onDragOverEvent = useEvent( _onDragOver );
 
 	return useRefEffect(
-		( element ) => {
+		( elem ) => {
 			if ( isDisabled ) {
 				return;
 			}
 
+			// If a custom dropZoneRef is passed, use that instead of the element.
+			// This allows the dropzone to cover an expanded area, rather than
+			// be restricted to the area of the ref returned by this hook.
+			const element = dropZoneElement ?? elem;
+
 			let isDragging = false;
 
 			const { ownerDocument } = element;
@@ -79,6 +60,7 @@ export default function useDropZone( {
 			 */
 			function isElementInZone( targetToCheck ) {
 				const { defaultView } = ownerDocument;
+
 				if (
 					! targetToCheck ||
 					! defaultView ||
@@ -114,8 +96,8 @@ export default function useDropZone( {
 				ownerDocument.addEventListener( 'dragend', maybeDragEnd );
 				ownerDocument.addEventListener( 'mousemove', maybeDragEnd );
 
-				if ( onDragStartRef.current ) {
-					onDragStartRef.current( event );
+				if ( _onDragStart ) {
+					onDragStartEvent( event );
 				}
 			}
 
@@ -134,15 +116,15 @@ export default function useDropZone( {
 					return;
 				}
 
-				if ( onDragEnterRef.current ) {
-					onDragEnterRef.current( event );
+				if ( _onDragEnter ) {
+					onDragEnterEvent( event );
 				}
 			}
 
 			function onDragOver( /** @type {DragEvent} */ event ) {
 				// Only call onDragOver for the innermost hovered drop zones.
-				if ( ! event.defaultPrevented && onDragOverRef.current ) {
-					onDragOverRef.current( event );
+				if ( ! event.defaultPrevented && _onDragOver ) {
+					onDragOverEvent( event );
 				}
 
 				// Prevent the browser default while also signalling to parent
@@ -158,12 +140,13 @@ export default function useDropZone( {
 				// zone.
 				// Note: This is not entirely reliable in Safari due to this bug
 				// https://bugs.webkit.org/show_bug.cgi?id=66547
+
 				if ( isElementInZone( event.relatedTarget ) ) {
 					return;
 				}
 
-				if ( onDragLeaveRef.current ) {
-					onDragLeaveRef.current( event );
+				if ( _onDragLeave ) {
+					onDragLeaveEvent( event );
 				}
 			}
 
@@ -183,8 +166,8 @@ export default function useDropZone( {
 				// eslint-disable-next-line no-unused-expressions
 				event.dataTransfer && event.dataTransfer.files.length;
 
-				if ( onDropRef.current ) {
-					onDropRef.current( event );
+				if ( _onDrop ) {
+					onDropEvent( event );
 				}
 
 				maybeDragEnd( event );
@@ -200,12 +183,12 @@ export default function useDropZone( {
 				ownerDocument.removeEventListener( 'dragend', maybeDragEnd );
 				ownerDocument.removeEventListener( 'mousemove', maybeDragEnd );
 
-				if ( onDragEndRef.current ) {
-					onDragEndRef.current( event );
+				if ( _onDragEnd ) {
+					onDragEndEvent( event );
 				}
 			}
 
-			element.dataset.isDropZone = 'true';
+			element.setAttribute( 'data-is-drop-zone', 'true' );
 			element.addEventListener( 'drop', onDrop );
 			element.addEventListener( 'dragenter', onDragEnter );
 			element.addEventListener( 'dragover', onDragOver );
@@ -215,7 +198,7 @@ export default function useDropZone( {
 			ownerDocument.addEventListener( 'dragenter', maybeDragStart );
 
 			return () => {
-				delete element.dataset.isDropZone;
+				element.removeAttribute( 'data-is-drop-zone' );
 				element.removeEventListener( 'drop', onDrop );
 				element.removeEventListener( 'dragenter', onDragEnter );
 				element.removeEventListener( 'dragover', onDragOver );
@@ -228,6 +211,6 @@ export default function useDropZone( {
 				);
 			};
 		},
-		[ isDisabled ]
+		[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.
 	);
 }
diff --git a/packages/compose/src/hooks/use-drop-zone/test/index.js b/packages/compose/src/hooks/use-drop-zone/test/index.js
new file mode 100644
index 00000000000000..260d5cbbbdceb1
--- /dev/null
+++ b/packages/compose/src/hooks/use-drop-zone/test/index.js
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useDropZone from '../';
+
+describe( 'useDropZone', () => {
+	const ComponentWithWrapperDropZone = () => {
+		const [ dropZoneElement, setDropZoneElement ] = useState( null );
+		const dropZoneRef = useDropZone( {
+			dropZoneElement,
+		} );
+
+		return (
+			<div role="main" ref={ setDropZoneElement }>
+				<div role="region" ref={ dropZoneRef }>
+					<div>Drop Zone</div>
+				</div>
+			</div>
+		);
+	};
+
+	const ComponentWithoutWrapperDropZone = () => {
+		const dropZoneRef = useDropZone( {} );
+
+		return (
+			<div role="main">
+				<div role="region" ref={ dropZoneRef }>
+					<div>Drop Zone</div>
+				</div>
+			</div>
+		);
+	};
+
+	it( 'will attach dropzone to outer wrapper', () => {
+		const { rerender } = render( <ComponentWithWrapperDropZone /> );
+		// Ensure `useEffect` has run.
+		rerender( <ComponentWithWrapperDropZone /> );
+
+		expect( screen.getByRole( 'main' ) ).toHaveAttribute(
+			'data-is-drop-zone'
+		);
+	} );
+
+	it( 'will attach dropzone to element with dropZoneRef attached', () => {
+		const { rerender } = render( <ComponentWithoutWrapperDropZone /> );
+		// Ensure `useEffect` has run.
+		rerender( <ComponentWithoutWrapperDropZone /> );
+
+		expect( screen.getByRole( 'region' ) ).toHaveAttribute(
+			'data-is-drop-zone'
+		);
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-event/index.ts b/packages/compose/src/hooks/use-event/index.ts
new file mode 100644
index 00000000000000..d381bcb595bf65
--- /dev/null
+++ b/packages/compose/src/hooks/use-event/index.ts
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
+
+/**
+ * Any function.
+ */
+export type AnyFunction = ( ...args: any ) => any;
+
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @param callback The callback function to wrap.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component( props ) {
+ *   const onClick = useEvent( props.onClick );
+ *   useEffect( () => {
+ *     onClick();
+ *     // Won't trigger the effect again when props.onClick is updated.
+ *   }, [ onClick ] );
+ *   // Won't re-render Button when props.onClick is updated (if `Button` is
+ *   // wrapped in `React.memo`).
+ *   return <Button onClick={ onClick } />;
+ * }
+ * ```
+ */
+export default function useEvent< T extends AnyFunction >(
+	/**
+	 * The callback function to wrap.
+	 */
+	callback?: T
+) {
+	const ref = useRef< AnyFunction | undefined >( () => {
+		throw new Error(
+			'Callbacks created with `useEvent` cannot be called during rendering.'
+		);
+	} );
+	useInsertionEffect( () => {
+		ref.current = callback;
+	} );
+	return useCallback< AnyFunction >(
+		( ...args ) => ref.current?.( ...args ),
+		[]
+	) as T;
+}
diff --git a/packages/compose/src/hooks/use-fixed-window-list/index.js b/packages/compose/src/hooks/use-fixed-window-list/index.js
index 598a131e33fe16..3ea72c539e2cd3 100644
--- a/packages/compose/src/hooks/use-fixed-window-list/index.js
+++ b/packages/compose/src/hooks/use-fixed-window-list/index.js
@@ -27,6 +27,7 @@ const DEFAULT_INIT_WINDOW_SIZE = 30;
  * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
  * @property {boolean} [useWindowing]   When false avoids calculating the window size
  * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.
+ * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.
  */
 
 /**
@@ -125,7 +126,14 @@ export default function useFixedWindowList(
 				debounceMeasureList
 			);
 		};
-	}, [ itemHeight, elementRef, totalItems ] );
+	}, [
+		itemHeight,
+		elementRef,
+		totalItems,
+		options?.expandedState,
+		options?.windowOverscan,
+		useWindowing,
+	] );
 
 	useLayoutEffect( () => {
 		if ( ! useWindowing ) {
@@ -168,7 +176,14 @@ export default function useFixedWindowList(
 				handleKeyDown
 			);
 		};
-	}, [ totalItems, itemHeight, elementRef, fixedListWindow.visibleItems ] );
+	}, [
+		totalItems,
+		itemHeight,
+		elementRef,
+		fixedListWindow.visibleItems,
+		useWindowing,
+		options?.expandedState,
+	] );
 
 	return [ fixedListWindow, setFixedListWindow ];
 }
diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index cf0e97e661bfc6..bb02eb78e5689a 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useCallback } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
 /**
  * Hook used to focus the first tabbable element on mount.
  *
@@ -27,11 +32,30 @@ import { focus } from '@wordpress/dom';
  */
 export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 	const focusOnMountRef = useRef( focusOnMount );
+
+	/**
+	 * Sets focus on a DOM element.
+	 *
+	 * @param {HTMLElement} target The DOM element to set focus to.
+	 * @return {void}
+	 */
+	const setFocus = ( target ) => {
+		target.focus( {
+			// When focusing newly mounted dialogs,
+			// the position of the popover is often not right on the first render
+			// This prevents the layout shifts when focusing the dialogs.
+			preventScroll: true,
+		} );
+	};
+
+	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
+	const timerIdRef = useRef();
+
 	useEffect( () => {
 		focusOnMountRef.current = focusOnMount;
 	}, [ focusOnMount ] );
 
-	return useCallback( ( node ) => {
+	return useRefEffect( ( node ) => {
 		if ( ! node || focusOnMountRef.current === false ) {
 			return;
 		}
@@ -40,21 +64,22 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 			return;
 		}
 
-		let target = node;
+		if ( focusOnMountRef.current !== 'firstElement' ) {
+			setFocus( node );
+			return;
+		}
 
-		if ( focusOnMountRef.current === 'firstElement' ) {
+		timerIdRef.current = setTimeout( () => {
 			const firstTabbable = focus.tabbable.find( node )[ 0 ];
-
 			if ( firstTabbable ) {
-				target = /** @type {HTMLElement} */ ( firstTabbable );
+				setFocus( firstTabbable );
 			}
-		}
+		}, 0 );
 
-		target.focus( {
-			// When focusing newly mounted dialogs,
-			// the position of the popover is often not right on the first render
-			// This prevents the layout shifts when focusing the dialogs.
-			preventScroll: true,
-		} );
+		return () => {
+			if ( timerIdRef.current ) {
+				clearTimeout( timerIdRef.current );
+			}
+		};
 	}, [] );
 }
diff --git a/packages/compose/src/hooks/use-focus-outside/index.ts b/packages/compose/src/hooks/use-focus-outside/index.ts
index cbf1d45d8c9e47..812621a09d21d0 100644
--- a/packages/compose/src/hooks/use-focus-outside/index.ts
+++ b/packages/compose/src/hooks/use-focus-outside/index.ts
@@ -1,16 +1,3 @@
-/**
- * External dependencies
- */
-import type {
-	FocusEventHandler,
-	EventHandler,
-	MouseEventHandler,
-	TouchEventHandler,
-	FocusEvent,
-	MouseEvent,
-	TouchEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -38,7 +25,7 @@ type FocusNormalizedButton =
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param  eventTarget The target from a mouse or touch event.
+ * @param eventTarget The target from a mouse or touch event.
  *
  * @return Whether the element is a button element subject to focus normalization.
  */
@@ -63,41 +50,41 @@ function isFocusNormalizedButton(
 }
 
 type UseFocusOutsideReturn = {
-	onFocus: FocusEventHandler;
-	onMouseDown: MouseEventHandler;
-	onMouseUp: MouseEventHandler;
-	onTouchStart: TouchEventHandler;
-	onTouchEnd: TouchEventHandler;
-	onBlur: FocusEventHandler;
+	onFocus: React.FocusEventHandler;
+	onMouseDown: React.MouseEventHandler;
+	onMouseUp: React.MouseEventHandler;
+	onTouchStart: React.TouchEventHandler;
+	onTouchEnd: React.TouchEventHandler;
+	onBlur: React.FocusEventHandler;
 };
 
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param  onFocusOutside A callback triggered when focus moves outside
- *                        the element the event handlers are bound to.
+ * @param onFocusOutside A callback triggered when focus moves outside
+ *                       the element the event handlers are bound to.
  *
  * @return An object containing event handlers. Bind the event handlers to a
  * wrapping element element to capture when focus moves outside that element.
  */
 export default function useFocusOutside(
-	onFocusOutside: ( event: FocusEvent ) => void
+	onFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined
 ): UseFocusOutsideReturn {
-	const currentOnFocusOutside = useRef( onFocusOutside );
+	const currentOnFocusOutsideRef = useRef( onFocusOutside );
 	useEffect( () => {
-		currentOnFocusOutside.current = onFocusOutside;
+		currentOnFocusOutsideRef.current = onFocusOutside;
 	}, [ onFocusOutside ] );
 
-	const preventBlurCheck = useRef( false );
+	const preventBlurCheckRef = useRef( false );
 
-	const blurCheckTimeoutId = useRef< number | undefined >();
+	const blurCheckTimeoutIdRef = useRef< number | undefined >();
 
 	/**
 	 * Cancel a blur check timeout.
 	 */
 	const cancelBlurCheck = useCallback( () => {
-		clearTimeout( blurCheckTimeoutId.current );
+		clearTimeout( blurCheckTimeoutIdRef.current );
 	}, [] );
 
 	// Cancel blur checks on unmount.
@@ -119,20 +106,21 @@ export default function useFocusOutside(
 	 * button elements when clicked, while others do. The logic here
 	 * intends to normalize this as treating click on buttons as focus.
 	 *
-	 * @param  event
+	 * @param event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 	 */
-	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
-		useCallback( ( event ) => {
-			const { type, target } = event;
-			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-			if ( isInteractionEnd ) {
-				preventBlurCheck.current = false;
-			} else if ( isFocusNormalizedButton( target ) ) {
-				preventBlurCheck.current = true;
-			}
-		}, [] );
+	const normalizeButtonFocus: React.EventHandler<
+		React.MouseEvent | React.TouchEvent
+	> = useCallback( ( event ) => {
+		const { type, target } = event;
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+		if ( isInteractionEnd ) {
+			preventBlurCheckRef.current = false;
+		} else if ( isFocusNormalizedButton( target ) ) {
+			preventBlurCheckRef.current = true;
+		}
+	}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -141,17 +129,34 @@ export default function useFocusOutside(
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
 	 */
-	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
+	const queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();
 
 		// Skip blur check if clicking button. See `normalizeButtonFocus`.
-		if ( preventBlurCheck.current ) {
+		if ( preventBlurCheckRef.current ) {
+			return;
+		}
+
+		// The usage of this attribute should be avoided. The only use case
+		// would be when we load modals that are not React components and
+		// therefore don't exist in the React tree. An example is opening
+		// the Media Library modal from another dialog.
+		// This attribute should contain a selector of the related target
+		// we want to ignore, because we still need to trigger the blur event
+		// on all other cases.
+		const ignoreForRelatedTarget = event.target.getAttribute(
+			'data-unstable-ignore-focus-outside-for-relatedtarget'
+		);
+		if (
+			ignoreForRelatedTarget &&
+			event.relatedTarget?.closest( ignoreForRelatedTarget )
+		) {
 			return;
 		}
 
-		blurCheckTimeoutId.current = setTimeout( () => {
+		blurCheckTimeoutIdRef.current = setTimeout( () => {
 			// If document is not focused then focus should remain
 			// inside the wrapped component and therefore we cancel
 			// this blur event thereby leaving focus in place.
@@ -161,8 +166,8 @@ export default function useFocusOutside(
 				return;
 			}
 
-			if ( 'function' === typeof currentOnFocusOutside.current ) {
-				currentOnFocusOutside.current( event );
+			if ( 'function' === typeof currentOnFocusOutsideRef.current ) {
+				currentOnFocusOutsideRef.current( event );
 			}
 		}, 0 );
 	}, [] );
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..e809689b226e20 100644
--- a/packages/compose/src/hooks/use-focus-outside/test/index.js
+++ b/packages/compose/src/hooks/use-focus-outside/test/index.js
@@ -27,9 +27,7 @@ const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 describe( 'useFocusOutside', () => {
 	it( 'should not call handler if focus shifts to element within component', async () => {
 		const mockOnFocusOutside = jest.fn();
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
@@ -50,9 +48,7 @@ describe( 'useFocusOutside', () => {
 
 	it( 'should not call handler if focus transitions via click to button', async () => {
 		const mockOnFocusOutside = jest.fn();
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
@@ -69,9 +65,7 @@ describe( 'useFocusOutside', () => {
 
 	it( 'should call handler if focus shifts to element outside component', async () => {
 		const mockOnFocusOutside = jest.fn();
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
@@ -99,9 +93,7 @@ describe( 'useFocusOutside', () => {
 			.spyOn( document, 'hasFocus' )
 			.mockImplementation( () => false );
 		const mockOnFocusOutside = jest.fn();
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render(
 			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
@@ -126,9 +118,7 @@ describe( 'useFocusOutside', () => {
 
 	it( 'should cancel check when unmounting while queued', async () => {
 		const mockOnFocusOutside = jest.fn();
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const { unmount } = render(
 			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
@@ -145,8 +135,6 @@ describe( 'useFocusOutside', () => {
 		button.blur();
 		unmount();
 
-		jest.runAllTimers();
-
 		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js
index 66751b7028d329..2cd93b279cd318 100644
--- a/packages/compose/src/hooks/use-focus-return/index.js
+++ b/packages/compose/src/hooks/use-focus-return/index.js
@@ -3,11 +3,12 @@
  */
 import { useRef, useEffect, useCallback } from '@wordpress/element';
 
+/** @type {Element|null} */
+let origin = null;
+
 /**
- * When opening modals/sidebars/dialogs, the focus
- * must move to the opened area and return to the
- * previously focused element when closed.
- * The current hook implements the returning behavior.
+ * Adds the unmount behavior of returning focus to the element which had it
+ * previously as is expected for roles like menus or dialogs.
  *
  * @param {() => void} [onFocusReturn] Overrides the default return behavior.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
@@ -54,6 +55,7 @@ function useFocusReturn( onFocusReturn ) {
 			);
 
 			if ( ref.current?.isConnected && ! isFocused ) {
+				origin ??= focusedBeforeMount.current;
 				return;
 			}
 
@@ -64,10 +66,13 @@ function useFocusReturn( onFocusReturn ) {
 			if ( onFocusReturnRef.current ) {
 				onFocusReturnRef.current();
 			} else {
-				/** @type {null | HTMLElement} */ (
-					focusedBeforeMount.current
+				/** @type {null|HTMLElement} */ (
+					! focusedBeforeMount.current.isConnected
+						? origin
+						: focusedBeforeMount.current
 				)?.focus();
 			}
+			origin = null;
 		}
 	}, [] );
 }
diff --git a/packages/compose/src/hooks/use-focusable-iframe/index.ts b/packages/compose/src/hooks/use-focusable-iframe/index.ts
index a184bde4045588..31024bd8246d12 100644
--- a/packages/compose/src/hooks/use-focusable-iframe/index.ts
+++ b/packages/compose/src/hooks/use-focusable-iframe/index.ts
@@ -17,9 +17,13 @@ import useRefEffect from '../use-ref-effect';
 export default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {
 	return useRefEffect( ( element ) => {
 		const { ownerDocument } = element;
-		if ( ! ownerDocument ) return;
+		if ( ! ownerDocument ) {
+			return;
+		}
 		const { defaultView } = ownerDocument;
-		if ( ! defaultView ) return;
+		if ( ! defaultView ) {
+			return;
+		}
 
 		/**
 		 * Checks whether the iframe is the activeElement, inferring that it has
diff --git a/packages/compose/src/hooks/use-instance-id/index.ts b/packages/compose/src/hooks/use-instance-id/index.ts
index 96fb07373ac933..65edc2a5d05d0f 100644
--- a/packages/compose/src/hooks/use-instance-id/index.ts
+++ b/packages/compose/src/hooks/use-instance-id/index.ts
@@ -8,7 +8,7 @@ const instanceMap = new WeakMap< object, number >();
 /**
  * Creates a new id for a given object.
  *
- * @param  object Object reference to create an id for.
+ * @param object Object reference to create an id for.
  * @return The instance id (index).
  */
 function createId( object: object ): number {
@@ -26,6 +26,8 @@ function createId( object: object ): number {
  * 1. When only object is given, the returned value is a number
  * 2. When object and prefix is given, the returned value is a string
  * 3. When preferredId is given, the returned value is the type of preferredId
+ *
+ * @param object Object reference to create an id for.
  */
 function useInstanceId( object: object ): number;
 function useInstanceId( object: object, prefix: string ): string;
@@ -38,9 +40,9 @@ function useInstanceId< T extends string | number >(
 /**
  * Provides a unique instance ID.
  *
- * @param  object        Object reference to create an id for.
- * @param  [prefix]      Prefix for the unique id.
- * @param  [preferredId] Default ID to use.
+ * @param object        Object reference to create an id for.
+ * @param [prefix]      Prefix for the unique id.
+ * @param [preferredId] Default ID to use.
  * @return The unique instance id.
  */
 function useInstanceId(
@@ -49,11 +51,13 @@ function useInstanceId(
 	preferredId?: string | number
 ): string | number {
 	return useMemo( () => {
-		if ( preferredId ) return preferredId;
+		if ( preferredId ) {
+			return preferredId;
+		}
 		const id = createId( object );
 
 		return prefix ? `${ prefix }-${ id }` : id;
-	}, [ object ] );
+	}, [ object, preferredId, prefix ] );
 }
 
 export default useInstanceId;
diff --git a/packages/compose/src/hooks/use-keyboard-shortcut/index.js b/packages/compose/src/hooks/use-keyboard-shortcut/index.js
index be27d15864633a..be3f3a2554c7f3 100644
--- a/packages/compose/src/hooks/use-keyboard-shortcut/index.js
+++ b/packages/compose/src/hooks/use-keyboard-shortcut/index.js
@@ -42,9 +42,9 @@ function useKeyboardShortcut(
 		target,
 	} = {}
 ) {
-	const currentCallback = useRef( callback );
+	const currentCallbackRef = useRef( callback );
 	useEffect( () => {
-		currentCallback.current = callback;
+		currentCallbackRef.current = callback;
 	}, [ callback ] );
 
 	useEffect( () => {
@@ -93,7 +93,7 @@ function useKeyboardShortcut(
 					/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args
 				) =>
 					/* eslint-enable jsdoc/valid-types */
-					currentCallback.current( ...args ),
+					currentCallbackRef.current( ...args ),
 				eventName
 			);
 		} );
diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js
index 099845494c7ba9..598ab006ecb747 100644
--- a/packages/compose/src/hooks/use-media-query/index.js
+++ b/packages/compose/src/hooks/use-media-query/index.js
@@ -1,7 +1,38 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+
+const matchMediaCache = new Map();
+
+/**
+ * A new MediaQueryList object for the media query
+ *
+ * @param {string} [query] Media Query.
+ * @return {MediaQueryList|null} A new object for the media query
+ */
+function getMediaQueryList( query ) {
+	if ( ! query ) {
+		return null;
+	}
+
+	let match = matchMediaCache.get( query );
+
+	if ( match ) {
+		return match;
+	}
+
+	if (
+		typeof window !== 'undefined' &&
+		typeof window.matchMedia === 'function'
+	) {
+		match = window.matchMedia( query );
+		matchMediaCache.set( query, match );
+		return match;
+	}
+
+	return null;
+}
 
 /**
  * Runs a media query and returns its value when it changes.
@@ -10,28 +41,34 @@ import { useState, useEffect } from '@wordpress/element';
  * @return {boolean} return value of the media query.
  */
 export default function useMediaQuery( query ) {
-	const [ match, setMatch ] = useState(
-		() =>
-			!! (
-				query &&
-				typeof window !== 'undefined' &&
-				window.matchMedia( query ).matches
-			)
-	);
+	const source = useMemo( () => {
+		const mediaQueryList = getMediaQueryList( query );
+
+		return {
+			/** @type {(onStoreChange: () => void) => () => void} */
+			subscribe( onStoreChange ) {
+				if ( ! mediaQueryList ) {
+					return () => {};
+				}
 
-	useEffect( () => {
-		if ( ! query ) {
-			return;
-		}
-		const updateMatch = () =>
-			setMatch( window.matchMedia( query ).matches );
-		updateMatch();
-		const list = window.matchMedia( query );
-		list.addListener( updateMatch );
-		return () => {
-			list.removeListener( updateMatch );
+				// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.
+				mediaQueryList.addEventListener?.( 'change', onStoreChange );
+				return () => {
+					mediaQueryList.removeEventListener?.(
+						'change',
+						onStoreChange
+					);
+				};
+			},
+			getValue() {
+				return mediaQueryList?.matches ?? false;
+			},
 		};
 	}, [ query ] );
 
-	return !! query && match;
+	return useSyncExternalStore(
+		source.subscribe,
+		source.getValue,
+		() => false
+	);
 }
diff --git a/packages/compose/src/hooks/use-media-query/test/index.js b/packages/compose/src/hooks/use-media-query/test/index.js
index f75ba22a7b3fa1..f8a61a8469c070 100644
--- a/packages/compose/src/hooks/use-media-query/test/index.js
+++ b/packages/compose/src/hooks/use-media-query/test/index.js
@@ -1,125 +1,69 @@
 /**
  * External dependencies
  */
-import { render, act } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { matchMedia, setMedia } from 'mock-match-media';
 
 /**
  * Internal dependencies
  */
 import useMediaQuery from '../';
 
-describe( 'useMediaQuery', () => {
-	let addListener, removeListener;
+const TestComponent = ( { query } ) => {
+	const queryResult = useMediaQuery( query );
+	return `useMediaQuery: ${ queryResult }`;
+};
 
+describe( 'useMediaQuery', () => {
 	beforeAll( () => {
-		jest.spyOn( global, 'matchMedia' );
-
-		addListener = jest.fn();
-		removeListener = jest.fn();
+		window.matchMedia = matchMedia;
 	} );
 
-	afterEach( () => {
-		global.matchMedia.mockClear();
-		addListener.mockClear();
-		removeListener.mockClear();
+	beforeEach( () => {
+		setMedia( {
+			width: '960px',
+		} );
 	} );
 
-	afterAll( () => {
-		global.matchMedia.mockRestore();
+	afterEach( () => {
+		// Do not clean up, this will break our cache. Browsers also do not
+		// reset media queries.
 	} );
 
-	const TestComponent = ( { query } ) => {
-		const queryResult = useMediaQuery( query );
-		return `useMediaQuery: ${ queryResult }`;
-	};
-
-	it( 'should return true when query matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-
-		const { container, unmount } = render(
+	it( 'should return true when the query matches', async () => {
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
 	it( 'should correctly update the value when the query evaluation matches', async () => {
-		// First render.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		// The query within useEffect.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		let updateMatchFunction;
-		await act( async () => {
-			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
-			updateMatchFunction();
+		act( () => {
+			setMedia( {
+				width: '600px',
+			} );
 		} );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalledWith( updateMatchFunction );
 	} );
 
-	it( 'should return false when the query does not matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
-			<TestComponent query="(min-width: 782px)" />
+	it( 'should return false when the query does not match', async () => {
+		const { container } = render(
+			<TestComponent query="(max-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
-	it( 'should not call matchMedia if a query is not passed', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, rerender, unmount } = render( <TestComponent /> );
+	it( 'should return false when a query is not passed', async () => {
+		const { container, rerender } = render( <TestComponent /> );
 
 		// Query will be case to a boolean to simplify the return type.
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
@@ -127,10 +71,5 @@ describe( 'useMediaQuery', () => {
 		rerender( <TestComponent query={ false } /> );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-		expect( global.matchMedia ).not.toHaveBeenCalled();
-		expect( addListener ).not.toHaveBeenCalled();
-		expect( removeListener ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js
index f39160444c5229..ed7f4247018be1 100644
--- a/packages/compose/src/hooks/use-merge-refs/index.js
+++ b/packages/compose/src/hooks/use-merge-refs/index.js
@@ -71,28 +71,28 @@ function assignRef( ref, value ) {
  */
 export default function useMergeRefs( refs ) {
 	const element = useRef();
-	const isAttached = useRef( false );
-	const didElementChange = useRef( false );
+	const isAttachedRef = useRef( false );
+	const didElementChangeRef = useRef( false );
 	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {import('react').MutableRefObject<TRef[]>} */
 	/* eslint-enable jsdoc/no-undefined-types */
-	const previousRefs = useRef( [] );
-	const currentRefs = useRef( refs );
+	const previousRefsRef = useRef( [] );
+	const currentRefsRef = useRef( refs );
 
 	// Update on render before the ref callback is called, so the ref callback
 	// always has access to the current refs.
-	currentRefs.current = refs;
+	currentRefsRef.current = refs;
 
 	// If any of the refs change, call the previous ref with `null` and the new
 	// ref with the node, except when the element changes in the same cycle, in
 	// which case the ref callbacks will already have been called.
 	useLayoutEffect( () => {
 		if (
-			didElementChange.current === false &&
-			isAttached.current === true
+			didElementChangeRef.current === false &&
+			isAttachedRef.current === true
 		) {
 			refs.forEach( ( ref, index ) => {
-				const previousRef = previousRefs.current[ index ];
+				const previousRef = previousRefsRef.current[ index ];
 				if ( ref !== previousRef ) {
 					assignRef( previousRef, null );
 					assignRef( ref, element.current );
@@ -100,13 +100,13 @@ export default function useMergeRefs( refs ) {
 			} );
 		}
 
-		previousRefs.current = refs;
+		previousRefsRef.current = refs;
 	}, refs );
 
 	// No dependencies, must be reset after every render so ref callbacks are
 	// correctly called after a ref change.
 	useLayoutEffect( () => {
-		didElementChange.current = false;
+		didElementChangeRef.current = false;
 	} );
 
 	// There should be no dependencies so that `callback` is only called when
@@ -116,12 +116,14 @@ export default function useMergeRefs( refs ) {
 		// dependency change.
 		assignRef( element, value );
 
-		didElementChange.current = true;
-		isAttached.current = value !== null;
+		didElementChangeRef.current = true;
+		isAttachedRef.current = value !== null;
 
 		// When an element changes, the current ref callback should be called
 		// with the new element and the previous one with `null`.
-		const refsToAssign = value ? currentRefs.current : previousRefs.current;
+		const refsToAssign = value
+			? currentRefsRef.current
+			: previousRefsRef.current;
 
 		// Update the latest refs.
 		for ( const ref of refsToAssign ) {
diff --git a/packages/compose/src/hooks/use-network-connectivity/index.native.js b/packages/compose/src/hooks/use-network-connectivity/index.native.js
new file mode 100644
index 00000000000000..1a806cc99a5a76
--- /dev/null
+++ b/packages/compose/src/hooks/use-network-connectivity/index.native.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import {
+	requestConnectionStatus,
+	subscribeConnectionStatus,
+} from '@wordpress/react-native-bridge';
+
+/**
+ * @typedef {Object} NetworkInformation
+ *
+ * @property {boolean} [isConnected] Whether the device is connected to a network.
+ */
+
+/**
+ * Returns the current network connectivity status provided by the native bridge.
+ *
+ * @example
+ *
+ * ```jsx
+ * const { isConnected } = useNetworkConnectivity();
+ * ```
+ *
+ * @return {NetworkInformation} Network information.
+ */
+export default function useNetworkConnectivity() {
+	const [ isConnected, setIsConnected ] = useState( true );
+
+	useEffect( () => {
+		let isCurrent = true;
+
+		requestConnectionStatus( ( isBridgeConnected ) => {
+			if ( ! isCurrent ) {
+				return;
+			}
+
+			setIsConnected( isBridgeConnected );
+		} );
+
+		return () => {
+			isCurrent = false;
+		};
+	}, [] );
+
+	useEffect( () => {
+		const subscription = subscribeConnectionStatus(
+			( { isConnected: isBridgeConnected } ) => {
+				setIsConnected( isBridgeConnected );
+			}
+		);
+
+		return () => {
+			subscription.remove();
+		};
+	}, [] );
+
+	return { isConnected };
+}
diff --git a/packages/compose/src/hooks/use-network-connectivity/test/index.native.js b/packages/compose/src/hooks/use-network-connectivity/test/index.native.js
new file mode 100644
index 00000000000000..82dce664b8b9cd
--- /dev/null
+++ b/packages/compose/src/hooks/use-network-connectivity/test/index.native.js
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestConnectionStatus,
+	subscribeConnectionStatus,
+} from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import useNetworkConnectivity from '../index';
+
+describe( 'useNetworkConnectivity', () => {
+	it( 'should optimisitically presume network connectivity', () => {
+		const { result } = renderHook( () => useNetworkConnectivity() );
+
+		expect( result.current.isConnected ).toBe( true );
+	} );
+
+	describe( 'when network connectivity is available', () => {
+		beforeAll( () => {
+			requestConnectionStatus.mockImplementation( ( callback ) => {
+				callback( true );
+				return { remove: jest.fn() };
+			} );
+		} );
+
+		it( 'should return true', () => {
+			const { result } = renderHook( () => useNetworkConnectivity() );
+
+			expect( result.current.isConnected ).toBe( true );
+		} );
+
+		it( 'should update the status when network connectivity changes', () => {
+			let subscriptionCallback;
+			subscribeConnectionStatus.mockImplementation( ( callback ) => {
+				subscriptionCallback = callback;
+				return { remove: jest.fn() };
+			} );
+
+			const { result } = renderHook( () => useNetworkConnectivity() );
+
+			expect( result.current.isConnected ).toBe( true );
+
+			act( () => subscriptionCallback( { isConnected: false } ) );
+
+			expect( result.current.isConnected ).toBe( false );
+		} );
+	} );
+
+	describe( 'when network connectivity is unavailable', () => {
+		beforeAll( () => {
+			requestConnectionStatus.mockImplementation( ( callback ) => {
+				callback( false );
+				return { remove: jest.fn() };
+			} );
+		} );
+
+		it( 'should return false', () => {
+			const { result } = renderHook( () => useNetworkConnectivity() );
+
+			expect( result.current.isConnected ).toBe( false );
+		} );
+
+		it( 'should update the status when network connectivity changes', () => {
+			let subscriptionCallback;
+			subscribeConnectionStatus.mockImplementation( ( callback ) => {
+				subscriptionCallback = callback;
+				return { remove: jest.fn() };
+			} );
+
+			const { result } = renderHook( () => useNetworkConnectivity() );
+
+			expect( result.current.isConnected ).toBe( false );
+
+			act( () => subscriptionCallback( { isConnected: true } ) );
+
+			expect( result.current.isConnected ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-observable-value/index.ts b/packages/compose/src/hooks/use-observable-value/index.ts
new file mode 100644
index 00000000000000..b07bf41f9b20b6
--- /dev/null
+++ b/packages/compose/src/hooks/use-observable-value/index.ts
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ObservableMap } from '../../utils/observable-map';
+
+/**
+ * React hook that lets you observe an entry in an `ObservableMap`. The hook returns the
+ * current value corresponding to the key, or `undefined` when there is no value stored.
+ * It also observes changes to the value and triggers an update of the calling component
+ * in case the value changes.
+ *
+ * @template K    The type of the keys in the map.
+ * @template V    The type of the values in the map.
+ * @param    map  The `ObservableMap` to observe.
+ * @param    name The map key to observe.
+ * @return   The value corresponding to the map key requested.
+ */
+export default function useObservableValue< K, V >(
+	map: ObservableMap< K, V >,
+	name: K
+): V | undefined {
+	const [ subscribe, getValue ] = useMemo(
+		() => [
+			( listener: () => void ) => map.subscribe( name, listener ),
+			() => map.get( name ),
+		],
+		[ map, name ]
+	);
+	return useSyncExternalStore( subscribe, getValue, getValue );
+}
diff --git a/packages/compose/src/hooks/use-observable-value/test/index.js b/packages/compose/src/hooks/use-observable-value/test/index.js
new file mode 100644
index 00000000000000..b53adf22f76b1e
--- /dev/null
+++ b/packages/compose/src/hooks/use-observable-value/test/index.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { render, screen, act } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { observableMap } from '../../../utils/observable-map';
+import useObservableValue from '..';
+
+describe( 'useObservableValue', () => {
+	test( 'reacts only to the specified key', () => {
+		const map = observableMap();
+		map.set( 'a', 1 );
+
+		const MapUI = jest.fn( () => {
+			const value = useObservableValue( map, 'a' );
+			return <div>value is { value }</div>;
+		} );
+
+		render( <MapUI /> );
+		expect( screen.getByText( /^value is/ ) ).toHaveTextContent(
+			'value is 1'
+		);
+		expect( MapUI ).toHaveBeenCalledTimes( 1 );
+
+		act( () => {
+			map.set( 'a', 2 );
+		} );
+		expect( screen.getByText( /^value is/ ) ).toHaveTextContent(
+			'value is 2'
+		);
+		expect( MapUI ).toHaveBeenCalledTimes( 2 );
+
+		// check that setting unobserved map key doesn't trigger a render at all
+		act( () => {
+			map.set( 'b', 1 );
+		} );
+		expect( MapUI ).toHaveBeenCalledTimes( 2 );
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-previous/README.md b/packages/compose/src/hooks/use-previous/README.md
index a22dfb69b96e3e..5eeaad52d53279 100644
--- a/packages/compose/src/hooks/use-previous/README.md
+++ b/packages/compose/src/hooks/use-previous/README.md
@@ -8,8 +8,8 @@ Sometimes you need to get the value something had on the previous render. `usePr
 /**
  * WordPress dependencies
  */
+import { useEffect, useState } from 'react';
 import { usePrevious } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
 
 function MyCustomElement() {
 	const [ myNumber, setMyNumber ] = useState( 5 );
diff --git a/packages/compose/src/hooks/use-previous/index.ts b/packages/compose/src/hooks/use-previous/index.ts
index cdc06c37f08fe3..673495320c5040 100644
--- a/packages/compose/src/hooks/use-previous/index.ts
+++ b/packages/compose/src/hooks/use-previous/index.ts
@@ -7,7 +7,7 @@ import { useEffect, useRef } from '@wordpress/element';
  * Use something's value from the previous render.
  * Based on https://usehooks.com/usePrevious/.
  *
- * @param  value The value to track.
+ * @param value The value to track.
  *
  * @return The value from the previous render.
  */
diff --git a/packages/compose/src/hooks/use-ref-effect/index.ts b/packages/compose/src/hooks/use-ref-effect/index.ts
index 5695a8bf6c89b4..89cc3bc2392c21 100644
--- a/packages/compose/src/hooks/use-ref-effect/index.ts
+++ b/packages/compose/src/hooks/use-ref-effect/index.ts
@@ -22,8 +22,8 @@ import { useCallback, useRef } from '@wordpress/element';
  * to be removed. It *is* necessary if you add dependencies because the ref
  * callback will be called multiple times for the same node.
  *
- * @param  callback     Callback with ref as argument.
- * @param  dependencies Dependencies of the callback.
+ * @param callback     Callback with ref as argument.
+ * @param dependencies Dependencies of the callback.
  *
  * @return Ref callback.
  */
@@ -31,12 +31,12 @@ export default function useRefEffect< TElement = Node >(
 	callback: ( node: TElement ) => ( () => void ) | void,
 	dependencies: DependencyList
 ): RefCallback< TElement | null > {
-	const cleanup = useRef< ( () => void ) | void >();
+	const cleanupRef = useRef< ( () => void ) | void >();
 	return useCallback( ( node: TElement | null ) => {
 		if ( node ) {
-			cleanup.current = callback( node );
-		} else if ( cleanup.current ) {
-			cleanup.current();
+			cleanupRef.current = callback( node );
+		} else if ( cleanupRef.current ) {
+			cleanupRef.current();
 		}
 	}, dependencies );
 }
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
index 40ef036a3c6602..79eb3e569e332a 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.native.js
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -1,60 +1 @@
-/**
- * External dependencies
- */
-import { View, StyleSheet } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { useState, useCallback } from '@wordpress/element';
-
-/**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<View>
- * 			{ resizeListener }
- * 			Your content here
- * 		</View>
- * 	);
- * };
- * ```
- *
- */
-const useResizeObserver = () => {
-	const [ measurements, setMeasurements ] = useState( null );
-
-	const onLayout = useCallback( ( { nativeEvent } ) => {
-		const { width, height } = nativeEvent.layout;
-		setMeasurements( ( prevState ) => {
-			if (
-				! prevState ||
-				prevState.width !== width ||
-				prevState.height !== height
-			) {
-				return {
-					width: Math.floor( width ),
-					height: Math.floor( height ),
-				};
-			}
-			return prevState;
-		} );
-	}, [] );
-
-	const observer = (
-		<View
-			testID="resize-observer"
-			style={ StyleSheet.absoluteFill }
-			onLayout={ onLayout }
-		/>
-	);
-
-	return [ observer, measurements ];
-};
-
-export default useResizeObserver;
+export { default } from './legacy/index.native';
diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts
new file mode 100644
index 00000000000000..1bd0f074cc49f2
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.ts
@@ -0,0 +1,80 @@
+/**
+ * Internal dependencies
+ */
+import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
+import type { ObservedSize } from './legacy';
+import _useLegacyResizeObserver from './legacy';
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
+/**
+ * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+ * for an HTML or SVG element.
+ *
+ * Pass the returned setter as a callback ref to the React element you want
+ * to observe, or use it in layout effects for advanced use cases.
+ *
+ * @example
+ *
+ * ```tsx
+ * const setElement = useResizeObserver(
+ * 	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+ * 	{ box: 'border-box' }
+ * );
+ * <div ref={ setElement } />;
+ *
+ * // The setter can be used in other ways, for example:
+ * useLayoutEffect( () => {
+ * 	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+ * }, [ elementId ] );
+ * ```
+ *
+ * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+export default function useResizeObserver< T extends Element >(
+	/**
+	 * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+	 */
+	callback: ResizeObserverCallback,
+	/**
+	 * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+	 */
+	options?: ResizeObserverOptions
+): ( element?: T | null ) => void;
+
+/**
+ * **This is a legacy API and should not be used.**
+ *
+ * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.
+ *
+ * Hook which allows to listen to the resize event of any target element when it changes size.
+ * _Note: `useResizeObserver` will report `null` sizes until after first render.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useResizeObserver(): [ ReactElement, ObservedSize ];
+
+export default function useResizeObserver< T extends HTMLElement >(
+	callback?: ResizeObserverCallback,
+	options: ResizeObserverOptions = {}
+): ( ( element?: T | null ) => void ) | [ ReactElement, ObservedSize ] {
+	return callback
+		? _useResizeObserver( callback, options )
+		: _useLegacyResizeObserver();
+}
diff --git a/packages/compose/src/hooks/use-resize-observer/index.tsx b/packages/compose/src/hooks/use-resize-observer/index.tsx
deleted file mode 100644
index 2e4b60e63a36b5..00000000000000
--- a/packages/compose/src/hooks/use-resize-observer/index.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-/**
- * External dependencies
- */
-import type { RefCallback, RefObject } from 'react';
-
-/**
- * WordPress dependencies
- */
-import {
-	useMemo,
-	useRef,
-	useCallback,
-	useEffect,
-	useState,
-} from '@wordpress/element';
-import type { WPElement } from '@wordpress/element';
-
-type SubscriberCleanup = () => void;
-type SubscriberResponse = SubscriberCleanup | void;
-
-// This of course could've been more streamlined with internal state instead of
-// refs, but then host hooks / components could not opt out of renders.
-// This could've been exported to its own module, but the current build doesn't
-// seem to work with module imports and I had no more time to spend on this...
-function useResolvedElement< T extends HTMLElement >(
-	subscriber: ( element: T ) => SubscriberResponse,
-	refOrElement?: T | RefObject< T > | null
-): RefCallback< T > {
-	const callbackRefElement = useRef< T | null >( null );
-	const lastReportRef = useRef< {
-		reporter: () => void;
-		element: T | null;
-	} | null >( null );
-	const cleanupRef = useRef< SubscriberResponse | null >();
-
-	const callSubscriber = useCallback( () => {
-		let element = null;
-		if ( callbackRefElement.current ) {
-			element = callbackRefElement.current;
-		} else if ( refOrElement ) {
-			if ( refOrElement instanceof HTMLElement ) {
-				element = refOrElement;
-			} else {
-				element = refOrElement.current;
-			}
-		}
-
-		if (
-			lastReportRef.current &&
-			lastReportRef.current.element === element &&
-			lastReportRef.current.reporter === callSubscriber
-		) {
-			return;
-		}
-
-		if ( cleanupRef.current ) {
-			cleanupRef.current();
-			// Making sure the cleanup is not called accidentally multiple times.
-			cleanupRef.current = null;
-		}
-		lastReportRef.current = {
-			reporter: callSubscriber,
-			element,
-		};
-
-		// Only calling the subscriber, if there's an actual element to report.
-		if ( element ) {
-			cleanupRef.current = subscriber( element );
-		}
-	}, [ refOrElement, subscriber ] );
-
-	// On each render, we check whether a ref changed, or if we got a new raw
-	// element.
-	useEffect( () => {
-		// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
-		// render accompanying that change as well.
-		// To guarantee we always have the right element, one must use the ref callback provided instead, but we support
-		// RefObjects to make the hook API more convenient in certain cases.
-		callSubscriber();
-	}, [ callSubscriber ] );
-
-	return useCallback< RefCallback< T > >(
-		( element ) => {
-			callbackRefElement.current = element;
-			callSubscriber();
-		},
-		[ callSubscriber ]
-	);
-}
-
-type ObservedSize = {
-	width: number | undefined;
-	height: number | undefined;
-};
-
-type ResizeHandler = ( size: ObservedSize ) => void;
-
-type HookResponse< T extends HTMLElement > = {
-	ref: RefCallback< T >;
-} & ObservedSize;
-
-// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
-// forcing consumers to use a specific TS version.
-type ResizeObserverBoxOptions =
-	| 'border-box'
-	| 'content-box'
-	| 'device-pixel-content-box';
-
-declare global {
-	interface ResizeObserverEntry {
-		readonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;
-	}
-}
-
-// We're only using the first element of the size sequences, until future versions of the spec solidify on how
-// exactly it'll be used for fragments in multi-column scenarios:
-// From the spec:
-// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
-// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
-// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
-// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
-// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
-//
-// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
-// regardless of the "box" option.
-// The spec states the following on this:
-// > This does not have any impact on which box dimensions are returned to the defined callback when the event
-// > is fired, it solely defines which box the author wishes to observe layout changes on.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
-// > This section is non-normative. An author may desire to observe more than one CSS box.
-// > In this case, author will need to use multiple ResizeObservers.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
-// For this reason I decided to only return the requested size,
-// even though it seems we have access to results for all box types.
-// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
-// regardless of box option.
-const extractSize = (
-	entry: ResizeObserverEntry,
-	boxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',
-	sizeType: keyof ResizeObserverSize
-): number | undefined => {
-	if ( ! entry[ boxProp ] ) {
-		if ( boxProp === 'contentBoxSize' ) {
-			// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
-			// See the 6th step in the description for the RO algorithm:
-			// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
-			// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
-			// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
-			return entry.contentRect[
-				sizeType === 'inlineSize' ? 'width' : 'height'
-			];
-		}
-
-		return undefined;
-	}
-
-	// A couple bytes smaller than calling Array.isArray() and just as effective here.
-	return entry[ boxProp ][ 0 ]
-		? entry[ boxProp ][ 0 ][ sizeType ]
-		: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
-		  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-		  // @ts-ignore
-		  entry[ boxProp ][ sizeType ];
-};
-
-type RoundingFunction = ( n: number ) => number;
-
-function useResizeObserver< T extends HTMLElement >(
-	opts: {
-		ref?: RefObject< T > | T | null | undefined;
-		onResize?: ResizeHandler;
-		box?: ResizeObserverBoxOptions;
-		round?: RoundingFunction;
-	} = {}
-): HookResponse< T > {
-	// Saving the callback as a ref. With this, I don't need to put onResize in the
-	// effect dep array, and just passing in an anonymous function without memoising
-	// will not reinstantiate the hook's ResizeObserver.
-	const onResize = opts.onResize;
-	const onResizeRef = useRef< ResizeHandler | undefined >( undefined );
-	onResizeRef.current = onResize;
-	const round = opts.round || Math.round;
-
-	// Using a single instance throughout the hook's lifetime
-	const resizeObserverRef = useRef< {
-		box?: ResizeObserverBoxOptions;
-		round?: RoundingFunction;
-		instance: ResizeObserver;
-	} >();
-
-	const [ size, setSize ] = useState< {
-		width?: number;
-		height?: number;
-	} >( {
-		width: undefined,
-		height: undefined,
-	} );
-
-	// In certain edge cases the RO might want to report a size change just after
-	// the component unmounted.
-	const didUnmount = useRef( false );
-	useEffect( () => {
-		return () => {
-			didUnmount.current = true;
-		};
-	}, [] );
-
-	// Using a ref to track the previous width / height to avoid unnecessary renders.
-	const previous: {
-		current: {
-			width?: number;
-			height?: number;
-		};
-	} = useRef( {
-		width: undefined,
-		height: undefined,
-	} );
-
-	// This block is kinda like a useEffect, only it's called whenever a new
-	// element could be resolved based on the ref option. It also has a cleanup
-	// function.
-	const refCallback = useResolvedElement< T >(
-		useCallback(
-			( element ) => {
-				// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
-				// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
-				if (
-					! resizeObserverRef.current ||
-					resizeObserverRef.current.box !== opts.box ||
-					resizeObserverRef.current.round !== round
-				) {
-					resizeObserverRef.current = {
-						box: opts.box,
-						round,
-						instance: new ResizeObserver( ( entries ) => {
-							const entry = entries[ 0 ];
-
-							let boxProp:
-								| 'borderBoxSize'
-								| 'contentBoxSize'
-								| 'devicePixelContentBoxSize' = 'borderBoxSize';
-							if ( opts.box === 'border-box' ) {
-								boxProp = 'borderBoxSize';
-							} else {
-								boxProp =
-									opts.box === 'device-pixel-content-box'
-										? 'devicePixelContentBoxSize'
-										: 'contentBoxSize';
-							}
-
-							const reportedWidth = extractSize(
-								entry,
-								boxProp,
-								'inlineSize'
-							);
-							const reportedHeight = extractSize(
-								entry,
-								boxProp,
-								'blockSize'
-							);
-
-							const newWidth = reportedWidth
-								? round( reportedWidth )
-								: undefined;
-							const newHeight = reportedHeight
-								? round( reportedHeight )
-								: undefined;
-
-							if (
-								previous.current.width !== newWidth ||
-								previous.current.height !== newHeight
-							) {
-								const newSize = {
-									width: newWidth,
-									height: newHeight,
-								};
-								previous.current.width = newWidth;
-								previous.current.height = newHeight;
-								if ( onResizeRef.current ) {
-									onResizeRef.current( newSize );
-								} else if ( ! didUnmount.current ) {
-									setSize( newSize );
-								}
-							}
-						} ),
-					};
-				}
-
-				resizeObserverRef.current.instance.observe( element, {
-					box: opts.box,
-				} );
-
-				return () => {
-					if ( resizeObserverRef.current ) {
-						resizeObserverRef.current.instance.unobserve( element );
-					}
-				};
-			},
-			[ opts.box, round ]
-		),
-		opts.ref
-	);
-
-	return useMemo(
-		() => ( {
-			ref: refCallback,
-			width: size.width,
-			height: size.height,
-		} ),
-		[ refCallback, size ? size.width : null, size ? size.height : null ]
-	);
-}
-
-/**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render.
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<div>
- * 			{ resizeListener }
- * 			Your content here
- * 		</div>
- * 	);
- * };
- * ```
- */
-export default function useResizeAware(): [
-	WPElement,
-	{ width: number | null; height: number | null }
-] {
-	const { ref, width, height } = useResizeObserver();
-	const sizes = useMemo( () => {
-		return { width: width ?? null, height: height ?? null };
-	}, [ width, height ] );
-	const resizeListener = (
-		<div
-			style={ {
-				position: 'absolute',
-				top: 0,
-				left: 0,
-				right: 0,
-				bottom: 0,
-				pointerEvents: 'none',
-				opacity: 0,
-				overflow: 'hidden',
-				zIndex: -1,
-			} }
-			aria-hidden="true"
-			ref={ ref }
-		/>
-	);
-	return [ resizeListener, sizes ];
-}
diff --git a/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
new file mode 100644
index 00000000000000..3b171ee00bf47c
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { View, StyleSheet } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Hook which allows to listen the resize event of any target element when it changes sizes.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<View>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</View>
+ * 	);
+ * };
+ * ```
+ */
+const useResizeObserver = () => {
+	const [ measurements, setMeasurements ] = useState( null );
+
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		const { width, height } = nativeEvent.layout;
+		setMeasurements( ( prevState ) => {
+			if (
+				! prevState ||
+				prevState.width !== width ||
+				prevState.height !== height
+			) {
+				return {
+					width: Math.floor( width ),
+					height: Math.floor( height ),
+				};
+			}
+			return prevState;
+		} );
+	}, [] );
+
+	const observer = (
+		<View
+			testID="resize-observer"
+			style={ StyleSheet.absoluteFill }
+			onLayout={ onLayout }
+		/>
+	);
+
+	return [ observer, measurements ];
+};
+
+export default useResizeObserver;
diff --git a/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
new file mode 100644
index 00000000000000..fe765810982226
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { useResizeObserver } from '../use-resize-observer';
+
+export type ObservedSize = {
+	width: number | null;
+	height: number | null;
+};
+
+// We're only using the first element of the size sequences, until future versions of the spec solidify on how
+// exactly it'll be used for fragments in multi-column scenarios:
+// From the spec:
+// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
+// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
+// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
+// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
+// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
+//
+// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
+// regardless of the "box" option.
+// The spec states the following on this:
+// > This does not have any impact on which box dimensions are returned to the defined callback when the event
+// > is fired, it solely defines which box the author wishes to observe layout changes on.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
+// > This section is non-normative. An author may desire to observe more than one CSS box.
+// > In this case, author will need to use multiple ResizeObservers.
+// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
+// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
+// For this reason I decided to only return the requested size,
+// even though it seems we have access to results for all box types.
+// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
+// regardless of box option.
+const extractSize = ( entry: ResizeObserverEntry ): ObservedSize => {
+	let entrySize;
+	if ( ! entry.contentBoxSize ) {
+		// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
+		// See the 6th step in the description for the RO algorithm:
+		// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
+		// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
+		// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
+		entrySize = [ entry.contentRect.width, entry.contentRect.height ];
+	} else if ( entry.contentBoxSize[ 0 ] ) {
+		const contentBoxSize = entry.contentBoxSize[ 0 ];
+		entrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];
+	} else {
+		// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy
+		// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+		const contentBoxSize =
+			entry.contentBoxSize as unknown as ResizeObserverSize;
+		entrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];
+	}
+
+	const [ width, height ] = entrySize.map( ( d ) => Math.round( d ) );
+	return { width, height };
+};
+
+const RESIZE_ELEMENT_STYLES = {
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	right: 0,
+	bottom: 0,
+	pointerEvents: 'none',
+	opacity: 0,
+	overflow: 'hidden',
+	zIndex: -1,
+} as const;
+
+type ResizeElementProps = {
+	onResize: ( s: ObservedSize ) => void;
+};
+
+function ResizeElement( { onResize }: ResizeElementProps ) {
+	const resizeElementRef = useResizeObserver( ( entries ) => {
+		const newSize = extractSize( entries.at( -1 )! ); // Entries are never empty.
+		onResize( newSize );
+	} );
+
+	return (
+		<div
+			ref={ resizeElementRef }
+			style={ RESIZE_ELEMENT_STYLES }
+			aria-hidden="true"
+		/>
+	);
+}
+
+function sizeEquals( a: ObservedSize, b: ObservedSize ) {
+	return a.width === b.width && a.height === b.height;
+}
+
+const NULL_SIZE: ObservedSize = { width: null, height: null };
+
+/**
+ * Hook which allows to listen to the resize event of any target element when it changes size.
+ * _Note: `useResizeObserver` will report `null` sizes until after first render.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useLegacyResizeObserver(): [
+	ReactElement,
+	ObservedSize,
+] {
+	const [ size, setSize ] = useState( NULL_SIZE );
+
+	// Using a ref to track the previous width / height to avoid unnecessary renders.
+	const previousSizeRef = useRef( NULL_SIZE );
+
+	const handleResize = useCallback( ( newSize: ObservedSize ) => {
+		if ( ! sizeEquals( previousSizeRef.current, newSize ) ) {
+			previousSizeRef.current = newSize;
+			setSize( newSize );
+		}
+	}, [] );
+
+	const resizeElement = <ResizeElement onResize={ handleResize } />;
+	return [ resizeElement, size ];
+}
diff --git a/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
new file mode 100644
index 00000000000000..8ff90d0c778fd4
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from 'test/helpers';
+import { View } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import useResizeObserver from '..';
+
+const TestComponent = ( { onLayout } ) => {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+
+	return (
+		<View testID="test-component" sizes={ sizes } onLayout={ onLayout }>
+			{ resizeObserver }
+		</View>
+	);
+};
+
+describe( 'useResizeObserver()', () => {
+	it( 'should return "{ width: 300, height: 500 }"', () => {
+		const mockNativeEvent = {
+			nativeEvent: {
+				layout: {
+					width: 300,
+					height: 500,
+				},
+			},
+		};
+
+		const { getByTestId } = render(
+			<TestComponent onLayout={ mockNativeEvent } />
+		);
+
+		const resizeObserver = getByTestId( 'resize-observer' );
+		fireEvent( resizeObserver, 'layout', mockNativeEvent );
+
+		const testComponent = getByTestId( 'test-component' );
+		expect( testComponent.props.sizes ).toMatchObject( {
+			width: 300,
+			height: 500,
+		} );
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-resize-observer/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/test/index.native.js
deleted file mode 100644
index 6370b3f9cd054b..00000000000000
--- a/packages/compose/src/hooks/use-resize-observer/test/index.native.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import { render, fireEvent } from 'test/helpers';
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import useResizeObserver from '../';
-
-const TestComponent = ( { onLayout } ) => {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-
-	return (
-		<View testID="test-component" sizes={ sizes } onLayout={ onLayout }>
-			{ resizeObserver }
-		</View>
-	);
-};
-
-describe( 'useResizeObserver()', () => {
-	it( 'should return "{ width: 300, height: 500 }"', () => {
-		const mockNativeEvent = {
-			nativeEvent: {
-				layout: {
-					width: 300,
-					height: 500,
-				},
-			},
-		};
-
-		const { getByTestId } = render(
-			<TestComponent onLayout={ mockNativeEvent } />
-		);
-
-		const resizeObserver = getByTestId( 'resize-observer' );
-		fireEvent( resizeObserver, 'layout', mockNativeEvent );
-
-		const testComponent = getByTestId( 'test-component' );
-		expect( testComponent.props.sizes ).toMatchObject( {
-			width: 300,
-			height: 500,
-		} );
-	} );
-} );
diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
new file mode 100644
index 00000000000000..4c1031b9839dc3
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import useEvent from '../use-event';
+
+// This is the current implementation of `useResizeObserver`.
+//
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+export function useResizeObserver< T extends HTMLElement >(
+	callback: ResizeObserverCallback,
+	resizeObserverOptions: ResizeObserverOptions = {}
+): ( element?: T | null ) => void {
+	const callbackEvent = useEvent( callback );
+
+	const observedElementRef = useRef< T | null >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	return useEvent( ( element?: T | null ) => {
+		if ( element === observedElementRef.current ) {
+			return;
+		}
+
+		// Set up `ResizeObserver`.
+		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Unobserve previous element.
+		if ( observedElementRef.current ) {
+			resizeObserver.unobserve( observedElementRef.current );
+		}
+
+		// Observe new element.
+		observedElementRef.current = element;
+		if ( element ) {
+			resizeObserver.observe( element, resizeObserverOptions );
+		}
+	} );
+}
diff --git a/packages/compose/src/hooks/use-state-with-history/index.ts b/packages/compose/src/hooks/use-state-with-history/index.ts
new file mode 100644
index 00000000000000..39aeab6a944b8f
--- /dev/null
+++ b/packages/compose/src/hooks/use-state-with-history/index.ts
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { createUndoManager } from '@wordpress/undo-manager';
+import { useCallback, useReducer } from '@wordpress/element';
+import type { UndoManager } from '@wordpress/undo-manager';
+
+type UndoRedoState< T > = {
+	manager: UndoManager;
+	value: T;
+};
+
+function undoRedoReducer< T >(
+	state: UndoRedoState< T >,
+	action:
+		| { type: 'UNDO' }
+		| { type: 'REDO' }
+		| { type: 'RECORD'; value: T; isStaged: boolean }
+): UndoRedoState< T > {
+	switch ( action.type ) {
+		case 'UNDO': {
+			const undoRecord = state.manager.undo();
+			if ( undoRecord ) {
+				return {
+					...state,
+					value: undoRecord[ 0 ].changes.prop.from,
+				};
+			}
+			return state;
+		}
+		case 'REDO': {
+			const redoRecord = state.manager.redo();
+			if ( redoRecord ) {
+				return {
+					...state,
+					value: redoRecord[ 0 ].changes.prop.to,
+				};
+			}
+			return state;
+		}
+		case 'RECORD': {
+			state.manager.addRecord(
+				[
+					{
+						id: 'object',
+						changes: {
+							prop: { from: state.value, to: action.value },
+						},
+					},
+				],
+				action.isStaged
+			);
+			return {
+				...state,
+				value: action.value,
+			};
+		}
+	}
+
+	return state;
+}
+
+function initReducer< T >( value: T ) {
+	return {
+		manager: createUndoManager(),
+		value,
+	};
+}
+
+/**
+ * useState with undo/redo history.
+ *
+ * @param initialValue Initial value.
+ * @return Value, setValue, hasUndo, hasRedo, undo, redo.
+ */
+export default function useStateWithHistory< T >( initialValue: T ) {
+	const [ state, dispatch ] = useReducer(
+		undoRedoReducer,
+		initialValue,
+		initReducer
+	);
+
+	return {
+		value: state.value,
+		setValue: useCallback( ( newValue: T, isStaged: boolean ) => {
+			dispatch( {
+				type: 'RECORD',
+				value: newValue,
+				isStaged,
+			} );
+		}, [] ),
+		hasUndo: state.manager.hasUndo(),
+		hasRedo: state.manager.hasRedo(),
+		undo: useCallback( () => {
+			dispatch( { type: 'UNDO' } );
+		}, [] ),
+		redo: useCallback( () => {
+			dispatch( { type: 'REDO' } );
+		}, [] ),
+	};
+}
diff --git a/packages/compose/src/hooks/use-state-with-history/test/index.js b/packages/compose/src/hooks/use-state-with-history/test/index.js
new file mode 100644
index 00000000000000..93db929f7e316f
--- /dev/null
+++ b/packages/compose/src/hooks/use-state-with-history/test/index.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { screen, render, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import useStateWithHistory from '../';
+
+const TestComponent = () => {
+	const { value, setValue, hasUndo, hasRedo, undo, redo } =
+		useStateWithHistory( 'foo' );
+
+	return (
+		<div>
+			<input
+				value={ value }
+				onChange={ ( event ) => setValue( event.target.value ) }
+			/>
+			<button className="undo" onClick={ undo } disabled={ ! hasUndo }>
+				Undo
+			</button>
+			<button className="redo" onClick={ redo } disabled={ ! hasRedo }>
+				Redo
+			</button>
+		</div>
+	);
+};
+
+describe( 'useStateWithHistory', () => {
+	it( 'should allow undo/redo', async () => {
+		render( <TestComponent /> );
+		const input = screen.getByRole( 'textbox' );
+		expect( input ).toHaveValue( 'foo' );
+		const buttonUndo = screen.getByRole( 'button', { name: 'Undo' } );
+		const buttonRedo = screen.getByRole( 'button', { name: 'Redo' } );
+		expect( buttonUndo ).toBeDisabled();
+		expect( buttonRedo ).toBeDisabled();
+
+		// Make a change
+		fireEvent.change( input, { target: { value: 'bar' } } );
+		expect( input ).toHaveValue( 'bar' );
+		expect( buttonUndo ).toBeEnabled();
+		expect( buttonRedo ).toBeDisabled();
+
+		// Undo the change
+		fireEvent.click( buttonUndo );
+		expect( input ).toHaveValue( 'foo' );
+		expect( buttonUndo ).toBeDisabled();
+		expect( buttonRedo ).toBeEnabled();
+
+		// Redo the change
+		fireEvent.click( buttonRedo );
+		expect( input ).toHaveValue( 'bar' );
+		expect( buttonUndo ).toBeEnabled();
+		expect( buttonRedo ).toBeDisabled();
+	} );
+} );
diff --git a/packages/compose/src/hooks/use-throttle/index.js b/packages/compose/src/hooks/use-throttle/index.js
index 8cade9a8442ac8..4bf6cc6e85555a 100644
--- a/packages/compose/src/hooks/use-throttle/index.js
+++ b/packages/compose/src/hooks/use-throttle/index.js
@@ -19,7 +19,7 @@ import { throttle } from '../../utils/throttle';
  * including the function to throttle, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/throttle/
+ * @see https://lodash.com/docs/4#throttle
  *
  * @template {(...args: any[]) => void} TFunc
  *
diff --git a/packages/compose/src/hooks/use-viewport-match/index.js b/packages/compose/src/hooks/use-viewport-match/index.js
index ebec934b480123..4186045f7d08c4 100644
--- a/packages/compose/src/hooks/use-viewport-match/index.js
+++ b/packages/compose/src/hooks/use-viewport-match/index.js
@@ -9,7 +9,7 @@ import { createContext, useContext } from '@wordpress/element';
 import useMediaQuery from '../use-media-query';
 
 /**
- * @typedef {"huge" | "wide" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
+ * @typedef {"xhuge" | "huge" | "wide" | "xlarge" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
  */
 
 /**
@@ -20,8 +20,10 @@ import useMediaQuery from '../use-media-query';
  * @type {Record<WPBreakpoint, number>}
  */
 const BREAKPOINTS = {
+	xhuge: 1920,
 	huge: 1440,
 	wide: 1280,
+	xlarge: 1080,
 	large: 960,
 	medium: 782,
 	small: 600,
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index 01b08000bee205..29a9aa61737440 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -4,6 +4,8 @@ export * from './utils/create-higher-order-component';
 export * from './utils/debounce';
 // The `throttle` helper and its types.
 export * from './utils/throttle';
+// The `ObservableMap` data structure
+export * from './utils/observable-map';
 
 // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';
@@ -23,6 +25,7 @@ export { default as useCopyOnClick } from './hooks/use-copy-on-click';
 export { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';
 export { default as __experimentalUseDialog } from './hooks/use-dialog';
 export { default as useDisabled } from './hooks/use-disabled';
+export { default as useEvent } from './hooks/use-event';
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
 export { default as useFocusOnMount } from './hooks/use-focus-on-mount';
 export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';
@@ -33,14 +36,17 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as usePrevious } from './hooks/use-previous';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
+export { default as useStateWithHistory } from './hooks/use-state-with-history';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useAsyncList } from './hooks/use-async-list';
 export { default as useWarnOnChange } from './hooks/use-warn-on-change';
 export { default as useDebounce } from './hooks/use-debounce';
+export { default as useDebouncedInput } from './hooks/use-debounced-input';
 export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';
 export { default as __experimentalUseDropZone } from './hooks/use-drop-zone';
 export { default as useFocusableIframe } from './hooks/use-focusable-iframe';
 export { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';
+export { default as useObservableValue } from './hooks/use-observable-value';
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
index c495c394a6897a..4f3bf5f7603816 100644
--- a/packages/compose/src/index.native.js
+++ b/packages/compose/src/index.native.js
@@ -4,6 +4,8 @@ export * from './utils/create-higher-order-component';
 export * from './utils/debounce';
 // The `throttle` helper and its types.
 export * from './utils/throttle';
+// The `ObservableMap` data structure
+export * from './utils/observable-map';
 
 // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';
@@ -17,6 +19,7 @@ export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
 export { default as withState } from './higher-order/with-state';
 export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';
+export { default as withNetworkConnectivity } from './higher-order/with-network-connectivity';
 
 // Hooks.
 export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';
@@ -29,11 +32,13 @@ export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as usePrevious } from './hooks/use-previous';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
-export { default as useAsyncList } from './hooks/use-async-list';
 export { default as usePreferredColorScheme } from './hooks/use-preferred-color-scheme';
 export { default as usePreferredColorSchemeStyle } from './hooks/use-preferred-color-scheme-style';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useDebounce } from './hooks/use-debounce';
+export { default as useDebouncedInput } from './hooks/use-debounced-input';
 export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
 export { default as useRefEffect } from './hooks/use-ref-effect';
+export { default as useNetworkConnectivity } from './hooks/use-network-connectivity';
+export { default as useObservableValue } from './hooks/use-observable-value';
diff --git a/packages/compose/src/utils/create-higher-order-component/index.ts b/packages/compose/src/utils/create-higher-order-component/index.ts
index 90f9787f3149ee..7c297b18ab2125 100644
--- a/packages/compose/src/utils/create-higher-order-component/index.ts
+++ b/packages/compose/src/utils/create-higher-order-component/index.ts
@@ -16,14 +16,14 @@ export type WithInjectedProps< C, I > = ComponentType<
  * Given a function mapping a component to an enhanced component and modifier
  * name, returns the enhanced component augmented with a generated displayName.
  *
- * @param  mapComponent Function mapping component to enhanced component.
- * @param  modifierName Seed name from which to generated display name.
+ * @param mapComponent Function mapping component to enhanced component.
+ * @param modifierName Seed name from which to generated display name.
  *
  * @return Component class with generated display name assigned.
  */
 export function createHigherOrderComponent<
 	TInner extends ComponentType< any >,
-	TOuter extends ComponentType< any >
+	TOuter extends ComponentType< any >,
 >( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {
 	return ( Inner: TInner ) => {
 		const Outer = mapComponent( Inner );
@@ -39,8 +39,8 @@ export function createHigherOrderComponent<
  *     hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';
  *     hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';
  *
- * @param  name  Name assigned to higher-order component's wrapper component.
- * @param  Inner Wrapped component inside higher-order component.
+ * @param name  Name assigned to higher-order component's wrapper component.
+ * @param Inner Wrapped component inside higher-order component.
  * @return       Wrapped name of higher-order component.
  */
 const hocName = ( name: string, Inner: ComponentType< any > ) => {
diff --git a/packages/compose/src/utils/debounce/index.ts b/packages/compose/src/utils/debounce/index.ts
index ea9d97050baa4a..d86fefeea8791c 100644
--- a/packages/compose/src/utils/debounce/index.ts
+++ b/packages/compose/src/utils/debounce/index.ts
@@ -59,7 +59,7 @@ export interface DebouncedFunc< T extends ( ...args: any[] ) => any > {
 	/**
 	 * Throw away any pending invocation of the debounced function.
 	 */
-	cancel(): void;
+	cancel: () => void;
 
 	/**
 	 * If there is a pending invocation of the debounced function, invoke it immediately and return
@@ -68,7 +68,7 @@ export interface DebouncedFunc< T extends ( ...args: any[] ) => any > {
 	 * Otherwise, return the value from the last invocation, or undefined if the debounced function
 	 * was never invoked.
 	 */
-	flush(): ReturnType< T > | undefined;
+	flush: () => ReturnType< T > | undefined;
 }
 
 /**
diff --git a/packages/compose/src/utils/debounce/test/index.ts b/packages/compose/src/utils/debounce/test/index.ts
index c50a1611906f38..abffc6f0e9843a 100644
--- a/packages/compose/src/utils/debounce/test/index.ts
+++ b/packages/compose/src/utils/debounce/test/index.ts
@@ -5,14 +5,6 @@ import { debounce } from '../index';
 
 const identity = ( value ) => value;
 
-beforeAll( () => {
-	jest.useRealTimers();
-} );
-
-afterAll( () => {
-	jest.useFakeTimers();
-} );
-
 describe( 'debounce', () => {
 	it( 'should debounce a function', () => {
 		return new Promise( ( done ) => {
diff --git a/packages/compose/src/utils/observable-map/index.ts b/packages/compose/src/utils/observable-map/index.ts
new file mode 100644
index 00000000000000..904b8df7ec670c
--- /dev/null
+++ b/packages/compose/src/utils/observable-map/index.ts
@@ -0,0 +1,61 @@
+export type ObservableMap< K, V > = {
+	get: ( name: K ) => V | undefined;
+	set: ( name: K, value: V ) => void;
+	delete: ( name: K ) => void;
+	subscribe: ( name: K, listener: () => void ) => () => void;
+};
+
+/**
+ * A constructor (factory) for `ObservableMap`, a map-like key/value data structure
+ * where the individual entries are observable: using the `subscribe` method, you can
+ * subscribe to updates for a particular keys. Each subscriber always observes one
+ * specific key and is not notified about any unrelated changes (for different keys)
+ * in the `ObservableMap`.
+ *
+ * @template K The type of the keys in the map.
+ * @template V The type of the values in the map.
+ * @return   A new instance of the `ObservableMap` type.
+ */
+export function observableMap< K, V >(): ObservableMap< K, V > {
+	const map = new Map< K, V >();
+	const listeners = new Map< K, Set< () => void > >();
+
+	function callListeners( name: K ) {
+		const list = listeners.get( name );
+		if ( ! list ) {
+			return;
+		}
+		for ( const listener of list ) {
+			listener();
+		}
+	}
+
+	return {
+		get( name ) {
+			return map.get( name );
+		},
+		set( name, value ) {
+			map.set( name, value );
+			callListeners( name );
+		},
+		delete( name ) {
+			map.delete( name );
+			callListeners( name );
+		},
+		subscribe( name, listener ) {
+			let list = listeners.get( name );
+			if ( ! list ) {
+				list = new Set();
+				listeners.set( name, list );
+			}
+			list.add( listener );
+
+			return () => {
+				list.delete( listener );
+				if ( list.size === 0 ) {
+					listeners.delete( name );
+				}
+			};
+		},
+	};
+}
diff --git a/packages/compose/src/utils/observable-map/test/index.js b/packages/compose/src/utils/observable-map/test/index.js
new file mode 100644
index 00000000000000..5383189c106306
--- /dev/null
+++ b/packages/compose/src/utils/observable-map/test/index.js
@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import { observableMap } from '..';
+
+describe( 'ObservableMap', () => {
+	test( 'should observe individual values', () => {
+		const map = observableMap();
+
+		const listenerA = jest.fn();
+		const listenerB = jest.fn();
+
+		const unsubA = map.subscribe( 'a', listenerA );
+		const unsubB = map.subscribe( 'b', listenerB );
+
+		// check that setting `a` doesn't notify the `b` listener
+		map.set( 'a', 1 );
+		expect( listenerA ).toHaveBeenCalledTimes( 1 );
+		expect( listenerB ).toHaveBeenCalledTimes( 0 );
+
+		// check that setting `b` doesn't notify the `a` listener
+		map.set( 'b', 2 );
+		expect( listenerA ).toHaveBeenCalledTimes( 1 );
+		expect( listenerB ).toHaveBeenCalledTimes( 1 );
+
+		// check that `delete` triggers notifications, too
+		map.delete( 'a' );
+		expect( listenerA ).toHaveBeenCalledTimes( 2 );
+		expect( listenerB ).toHaveBeenCalledTimes( 1 );
+
+		// check that the subscription survived the `delete`
+		map.set( 'a', 2 );
+		expect( listenerA ).toHaveBeenCalledTimes( 3 );
+		expect( listenerB ).toHaveBeenCalledTimes( 1 );
+
+		// check that unsubscription really works
+		unsubA();
+		unsubB();
+		map.set( 'a', 3 );
+		expect( listenerA ).toHaveBeenCalledTimes( 3 );
+		expect( listenerB ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json
index cb702233837ff2..90ab223f044987 100644
--- a/packages/compose/tsconfig.json
+++ b/packages/compose/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
@@ -6,11 +7,13 @@
 		"types": [ "gutenberg-env" ]
 	},
 	"references": [
-		{ "path": "../element" },
-		{ "path": "../priority-queue" },
+		{ "path": "../deprecated" },
 		{ "path": "../dom" },
+		{ "path": "../element" },
 		{ "path": "../is-shallow-equal" },
-		{ "path": "../keycodes" }
+		{ "path": "../keycodes" },
+		{ "path": "../priority-queue" },
+		{ "path": "../undo-manager" }
 	],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
new file mode 100644
index 00000000000000..af0a385fa6275c
--- /dev/null
+++ b/packages/core-commands/CHANGELOG.md
@@ -0,0 +1,89 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.27.0 (2024-05-16)
+
+## 0.26.0 (2024-05-02)
+
+## 0.25.0 (2024-04-19)
+
+## 0.24.0 (2024-04-03)
+
+## 0.23.0 (2024-03-21)
+
+## 0.22.0 (2024-03-06)
+
+## 0.21.0 (2024-02-21)
+
+## 0.20.0 (2024-02-09)
+
+## 0.19.0 (2024-01-24)
+
+## 0.18.0 (2024-01-10)
+
+## 0.17.0 (2023-12-13)
+
+## 0.16.0 (2023-11-29)
+
+## 0.15.0 (2023-11-16)
+
+## 0.14.0 (2023-11-02)
+
+## 0.13.0 (2023-10-18)
+
+## 0.12.0 (2023-10-05)
+
+## 0.11.0 (2023-09-20)
+
+## 0.10.0 (2023-08-31)
+
+## 0.9.0 (2023-08-16)
+
+## 0.8.0 (2023-08-10)
+
+## 0.7.0 (2023-07-20)
+
+## 0.6.0 (2023-07-05)
+
+## 0.5.0 (2023-06-23)
+
+## 0.4.0 (2023-06-07)
+
+## 0.3.0 (2023-05-24)
+
+## 0.2.0 (2023-05-10)
+
+Initial release.
diff --git a/packages/core-commands/README.md b/packages/core-commands/README.md
new file mode 100644
index 00000000000000..a7f8073c1f1dec
--- /dev/null
+++ b/packages/core-commands/README.md
@@ -0,0 +1,31 @@
+# Core Commands
+
+This package includes a list of reusable WordPress Admin commands. These commands can be used in multiple WP Admin pages.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/core-commands --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._
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### privateApis
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/core-commands/package.json b/packages/core-commands/package.json
new file mode 100644
index 00000000000000..2f2f4b0ffeb7fb
--- /dev/null
+++ b/packages/core-commands/package.json
@@ -0,0 +1,53 @@
+{
+	"name": "@wordpress/core-commands",
+	"version": "1.13.0",
+	"description": "WordPress core reusable commands.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"commands"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/core-commands/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/core-commands"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/block-editor": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/router": "*",
+		"@wordpress/url": "*"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
new file mode 100644
index 00000000000000..f82faa05baae4c
--- /dev/null
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { useCommand, useCommandLoader } from '@wordpress/commands';
+import { __ } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+import { getPath } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const getAddNewPageCommand = () =>
+	function useAddNewPageCommand() {
+		const isSiteEditor = getPath( window.location.href )?.includes(
+			'site-editor.php'
+		);
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme()?.is_block_theme;
+		}, [] );
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createErrorNotice } = useDispatch( noticesStore );
+
+		const createPageEntity = useCallback(
+			async ( { close } ) => {
+				try {
+					const page = await saveEntityRecord(
+						'postType',
+						'page',
+						{
+							status: 'draft',
+						},
+						{
+							throwOnError: true,
+						}
+					);
+					if ( page?.id ) {
+						history.navigate( `/page/${ page.id }?canvas=edit` );
+					}
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while creating the item.'
+							  );
+
+					createErrorNotice( errorMessage, {
+						type: 'snackbar',
+					} );
+				} finally {
+					close();
+				}
+			},
+			[ createErrorNotice, history, saveEntityRecord ]
+		);
+
+		const commands = useMemo( () => {
+			const addNewPage =
+				isSiteEditor && isBlockBasedTheme
+					? createPageEntity
+					: () =>
+							( document.location.href =
+								'post-new.php?post_type=page' );
+			return [
+				{
+					name: 'core/add-new-page',
+					label: __( 'Add new page' ),
+					icon: plus,
+					callback: addNewPage,
+				},
+			];
+		}, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+export function useAdminNavigationCommands() {
+	useCommand( {
+		name: 'core/add-new-post',
+		label: __( 'Add new post' ),
+		icon: plus,
+		callback: () => {
+			document.location.assign( 'post-new.php' );
+		},
+	} );
+
+	useCommandLoader( {
+		name: 'core/add-new-page',
+		hook: getAddNewPageCommand(),
+	} );
+}
diff --git a/packages/core-commands/src/index.js b/packages/core-commands/src/index.js
new file mode 100644
index 00000000000000..94878a556278a4
--- /dev/null
+++ b/packages/core-commands/src/index.js
@@ -0,0 +1 @@
+export { privateApis } from './private-apis';
diff --git a/packages/core-commands/src/lock-unlock.js b/packages/core-commands/src/lock-unlock.js
new file mode 100644
index 00000000000000..de47c0eeb81552
--- /dev/null
+++ b/packages/core-commands/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/core-commands'
+	);
diff --git a/packages/core-commands/src/private-apis.js b/packages/core-commands/src/private-apis.js
new file mode 100644
index 00000000000000..de5b0de197600f
--- /dev/null
+++ b/packages/core-commands/src/private-apis.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { useAdminNavigationCommands } from './admin-navigation-commands';
+import { useSiteEditorNavigationCommands } from './site-editor-navigation-commands';
+import { lock } from './lock-unlock';
+
+function useCommands() {
+	useAdminNavigationCommands();
+	useSiteEditorNavigationCommands();
+}
+
+export const privateApis = {};
+lock( privateApis, {
+	useCommands,
+} );
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
new file mode 100644
index 00000000000000..c1b12a84d4d61a
--- /dev/null
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -0,0 +1,432 @@
+/**
+ * WordPress dependencies
+ */
+import { useCommandLoader } from '@wordpress/commands';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	post,
+	page,
+	layout,
+	symbol,
+	symbolFilled,
+	styles,
+	navigation,
+} from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs, getPath } from '@wordpress/url';
+import { useDebounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+import { orderEntityRecordsBySearch } from './utils/order-entity-records-by-search';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const icons = {
+	post,
+	page,
+	wp_template: layout,
+	wp_template_part: symbolFilled,
+};
+
+function useDebouncedValue( value ) {
+	const [ debouncedValue, setDebouncedValue ] = useState( '' );
+	const debounced = useDebounce( setDebouncedValue, 250 );
+
+	useEffect( () => {
+		debounced( value );
+		return () => debounced.cancel();
+	}, [ debounced, value ] );
+
+	return debouncedValue;
+}
+
+const getNavigationCommandLoaderPerPostType = ( postType ) =>
+	function useNavigationCommandLoader( { search } ) {
+		const history = useHistory();
+		const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+			( select ) => {
+				return {
+					isBlockBasedTheme:
+						select( coreStore ).getCurrentTheme()?.is_block_theme,
+					canCreateTemplate: select( coreStore ).canUser( 'create', {
+						kind: 'postType',
+						name: 'wp_template',
+					} ),
+				};
+			},
+			[]
+		);
+		const delayedSearch = useDebouncedValue( search );
+		const { records, isLoading } = useSelect(
+			( select ) => {
+				if ( ! delayedSearch ) {
+					return {
+						isLoading: false,
+					};
+				}
+
+				const query = {
+					search: delayedSearch,
+					per_page: 10,
+					orderby: 'relevance',
+					status: [
+						'publish',
+						'future',
+						'draft',
+						'pending',
+						'private',
+					],
+				};
+				return {
+					records: select( coreStore ).getEntityRecords(
+						'postType',
+						postType,
+						query
+					),
+					isLoading: ! select( coreStore ).hasFinishedResolution(
+						'getEntityRecords',
+						[ 'postType', postType, query ]
+					),
+				};
+			},
+			[ delayedSearch ]
+		);
+
+		const commands = useMemo( () => {
+			return ( records ?? [] ).map( ( record ) => {
+				const command = {
+					name: postType + '-' + record.id,
+					searchLabel: record.title?.rendered + ' ' + record.id,
+					label: record.title?.rendered
+						? decodeEntities( record.title?.rendered )
+						: __( '(no title)' ),
+					icon: icons[ postType ],
+				};
+
+				if (
+					! canCreateTemplate ||
+					postType === 'post' ||
+					( postType === 'page' && ! isBlockBasedTheme )
+				) {
+					return {
+						...command,
+						callback: ( { close } ) => {
+							const args = {
+								post: record.id,
+								action: 'edit',
+							};
+							const targetUrl = addQueryArgs( 'post.php', args );
+							document.location = targetUrl;
+							close();
+						},
+					};
+				}
+
+				const isSiteEditor = getPath( window.location.href )?.includes(
+					'site-editor.php'
+				);
+
+				return {
+					...command,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate(
+								`/${ postType }/${ record.id }?canvas=edit`
+							);
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: `/${ postType }/${ record.id }`,
+									canvas: 'edit',
+								}
+							);
+						}
+						close();
+					},
+				};
+			} );
+		}, [ canCreateTemplate, records, isBlockBasedTheme, history ] );
+
+		return {
+			commands,
+			isLoading,
+		};
+	};
+
+const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
+	function useNavigationCommandLoader( { search } ) {
+		const history = useHistory();
+		const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+			( select ) => {
+				return {
+					isBlockBasedTheme:
+						select( coreStore ).getCurrentTheme()?.is_block_theme,
+					canCreateTemplate: select( coreStore ).canUser( 'create', {
+						kind: 'postType',
+						name: templateType,
+					} ),
+				};
+			},
+			[]
+		);
+		const { records, isLoading } = useSelect( ( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const query = { per_page: -1 };
+			return {
+				records: getEntityRecords( 'postType', templateType, query ),
+				isLoading: ! select( coreStore ).hasFinishedResolution(
+					'getEntityRecords',
+					[ 'postType', templateType, query ]
+				),
+			};
+		}, [] );
+
+		/*
+		 * wp_template and wp_template_part endpoints do not support per_page or orderby parameters.
+		 * We need to sort the results based on the search query to avoid removing relevant
+		 * records below using .slice().
+		 */
+		const orderedRecords = useMemo( () => {
+			return orderEntityRecordsBySearch( records, search ).slice( 0, 10 );
+		}, [ records, search ] );
+
+		const commands = useMemo( () => {
+			if (
+				! canCreateTemplate ||
+				( ! isBlockBasedTheme && ! templateType === 'wp_template_part' )
+			) {
+				return [];
+			}
+			const isSiteEditor = getPath( window.location.href )?.includes(
+				'site-editor.php'
+			);
+			const result = [];
+			result.push(
+				...orderedRecords.map( ( record ) => {
+					return {
+						name: templateType + '-' + record.id,
+						searchLabel: record.title?.rendered + ' ' + record.id,
+						label: record.title?.rendered
+							? record.title?.rendered
+							: __( '(no title)' ),
+						icon: icons[ templateType ],
+						callback: ( { close } ) => {
+							if ( isSiteEditor ) {
+								history.navigate(
+									`/${ templateType }/${ record.id }?canvas=edit`
+								);
+							} else {
+								document.location = addQueryArgs(
+									'site-editor.php',
+									{
+										p: `/${ templateType }/${ record.id }`,
+										canvas: 'edit',
+									}
+								);
+							}
+							close();
+						},
+					};
+				} )
+			);
+
+			if (
+				orderedRecords?.length > 0 &&
+				templateType === 'wp_template_part'
+			) {
+				result.push( {
+					name: 'core/edit-site/open-template-parts',
+					label: __( 'Template parts' ),
+					icon: symbolFilled,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate(
+								'/pattern?postType=wp_template_part&categoryId=all-parts'
+							);
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/pattern',
+									postType: 'wp_template_part',
+									categoryId: 'all-parts',
+								}
+							);
+						}
+						close();
+					},
+				} );
+			}
+			return result;
+		}, [ canCreateTemplate, isBlockBasedTheme, orderedRecords, history ] );
+
+		return {
+			commands,
+			isLoading,
+		};
+	};
+
+const getSiteEditorBasicNavigationCommands = () =>
+	function useSiteEditorBasicNavigationCommands() {
+		const history = useHistory();
+		const isSiteEditor = getPath( window.location.href )?.includes(
+			'site-editor.php'
+		);
+		const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+			( select ) => {
+				return {
+					isBlockBasedTheme:
+						select( coreStore ).getCurrentTheme()?.is_block_theme,
+					canCreateTemplate: select( coreStore ).canUser( 'create', {
+						kind: 'postType',
+						name: 'wp_template',
+					} ),
+				};
+			},
+			[]
+		);
+		const commands = useMemo( () => {
+			const result = [];
+
+			if ( canCreateTemplate && isBlockBasedTheme ) {
+				result.push( {
+					name: 'core/edit-site/open-navigation',
+					label: __( 'Navigation' ),
+					icon: navigation,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate( '/navigation' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/navigation',
+								}
+							);
+						}
+						close();
+					},
+				} );
+
+				result.push( {
+					name: 'core/edit-site/open-styles',
+					label: __( 'Styles' ),
+					icon: styles,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate( '/styles' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/styles',
+								}
+							);
+						}
+						close();
+					},
+				} );
+
+				result.push( {
+					name: 'core/edit-site/open-pages',
+					label: __( 'Pages' ),
+					icon: page,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate( '/page' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/page',
+								}
+							);
+						}
+						close();
+					},
+				} );
+
+				result.push( {
+					name: 'core/edit-site/open-templates',
+					label: __( 'Templates' ),
+					icon: layout,
+					callback: ( { close } ) => {
+						if ( isSiteEditor ) {
+							history.navigate( '/template' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/template',
+								}
+							);
+						}
+						close();
+					},
+				} );
+			}
+
+			result.push( {
+				name: 'core/edit-site/open-patterns',
+				label: __( 'Patterns' ),
+				icon: symbol,
+				callback: ( { close } ) => {
+					if ( canCreateTemplate ) {
+						if ( isSiteEditor ) {
+							history.navigate( '/pattern' );
+						} else {
+							document.location = addQueryArgs(
+								'site-editor.php',
+								{
+									p: '/pattern',
+								}
+							);
+						}
+						close();
+					} else {
+						// If a user cannot access the site editor
+						document.location.href = 'edit.php?post_type=wp_block';
+					}
+				},
+			} );
+
+			return result;
+		}, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] );
+
+		return {
+			commands,
+			isLoading: false,
+		};
+	};
+
+export function useSiteEditorNavigationCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-pages',
+		hook: getNavigationCommandLoaderPerPostType( 'page' ),
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-posts',
+		hook: getNavigationCommandLoaderPerPostType( 'post' ),
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-templates',
+		hook: getNavigationCommandLoaderPerTemplate( 'wp_template' ),
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/navigate-template-parts',
+		hook: getNavigationCommandLoaderPerTemplate( 'wp_template_part' ),
+	} );
+	useCommandLoader( {
+		name: 'core/edit-site/basic-navigation',
+		hook: getSiteEditorBasicNavigationCommands(),
+		context: 'site-editor',
+	} );
+}
diff --git a/packages/core-commands/src/utils/order-entity-records-by-search.js b/packages/core-commands/src/utils/order-entity-records-by-search.js
new file mode 100644
index 00000000000000..35b29654871504
--- /dev/null
+++ b/packages/core-commands/src/utils/order-entity-records-by-search.js
@@ -0,0 +1,25 @@
+export function orderEntityRecordsBySearch( records = [], search = '' ) {
+	if ( ! Array.isArray( records ) || ! records.length ) {
+		return [];
+	}
+
+	if ( ! search ) {
+		return records;
+	}
+
+	const priority = [];
+	const nonPriority = [];
+
+	for ( let i = 0; i < records.length; i++ ) {
+		const record = records[ i ];
+		if (
+			record?.title?.raw?.toLowerCase()?.includes( search?.toLowerCase() )
+		) {
+			priority.push( record );
+		} else {
+			nonPriority.push( record );
+		}
+	}
+
+	return priority.concat( nonPriority );
+}
diff --git a/packages/core-commands/src/utils/test/order-entity-records-by-search.js b/packages/core-commands/src/utils/test/order-entity-records-by-search.js
new file mode 100644
index 00000000000000..4f869a777beae8
--- /dev/null
+++ b/packages/core-commands/src/utils/test/order-entity-records-by-search.js
@@ -0,0 +1,83 @@
+/**
+ * Internal dependencies
+ */
+import { orderEntityRecordsBySearch } from '../order-entity-records-by-search';
+
+const mockData = [
+	{
+		title: {
+			raw: 'Category',
+		},
+	},
+	{
+		title: {
+			raw: 'Archive',
+		},
+	},
+	{
+		title: {
+			raw: 'Single',
+		},
+	},
+	{
+		title: {
+			raw: 'Single Product',
+		},
+	},
+	{
+		title: {
+			raw: 'Order Confirmation',
+		},
+	},
+];
+
+describe( 'orderEntityRecordsBySearch', () => {
+	it( 'should return an empty array if no records are passed', () => {
+		expect( orderEntityRecordsBySearch( [], '' ) ).toEqual( [] );
+		expect( orderEntityRecordsBySearch( null, '' ) ).toEqual( [] );
+	} );
+
+	it( 'should correctly order records by search', () => {
+		const singleResult = orderEntityRecordsBySearch( mockData, 'Single' );
+		const singleProductResult = orderEntityRecordsBySearch(
+			mockData,
+			'Single Product'
+		);
+		const categoryResult = orderEntityRecordsBySearch(
+			mockData,
+			'Category'
+		);
+		const orderResult = orderEntityRecordsBySearch( mockData, 'Order' );
+
+		expect( singleResult.map( ( { title } ) => title.raw ) ).toEqual( [
+			'Single',
+			'Single Product',
+			'Category',
+			'Archive',
+			'Order Confirmation',
+		] );
+		expect( singleProductResult.map( ( { title } ) => title.raw ) ).toEqual(
+			[
+				'Single Product',
+				'Category',
+				'Archive',
+				'Single',
+				'Order Confirmation',
+			]
+		);
+		expect( categoryResult.map( ( { title } ) => title.raw ) ).toEqual( [
+			'Category',
+			'Archive',
+			'Single',
+			'Single Product',
+			'Order Confirmation',
+		] );
+		expect( orderResult.map( ( { title } ) => title.raw ) ).toEqual( [
+			'Order Confirmation',
+			'Category',
+			'Archive',
+			'Single',
+			'Single Product',
+		] );
+	} );
+} );
diff --git a/packages/core-data/.npmrc b/packages/core-data/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/core-data/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 932645f0a4e4ca..35b1ab8e2957ed 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,120 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+## 7.8.0 (2024-09-19)
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
+## 6.34.0 (2024-05-02)
+
+## 6.33.0 (2024-04-19)
+
+## 6.32.0 (2024-04-03)
+
+## 6.31.0 (2024-03-21)
+
+## 6.30.0 (2024-03-06)
+
+## 6.29.0 (2024-02-21)
+
+## 6.28.0 (2024-02-09)
+
+## 6.27.0 (2024-01-24)
+
+## 6.26.0 (2024-01-10)
+
+## 6.25.0 (2023-12-13)
+
+## 6.24.0 (2023-11-29)
+
+## 6.23.0 (2023-11-16)
+
+## 6.22.0 (2023-11-02)
+
+## 6.21.0 (2023-10-18)
+
+### Enhancements
+
+-   Add `getEntityRecordsTotalItems` and `getEntityRecordsTotalPages` selectors. [#55164](https://github.com/WordPress/gutenberg/pull/55164).
+-   Revisions: add new selectors, `getRevisions` and `getRevision`, to fetch entity revisions. [#54046](https://github.com/WordPress/gutenberg/pull/54046).
+
+## 6.20.0 (2023-10-05)
+
+## 6.19.0 (2023-09-20)
+
+## 6.18.0 (2023-08-31)
+
+## 6.17.0 (2023-08-16)
+
+## 6.16.0 (2023-08-10)
+
+## 6.15.0 (2023-07-20)
+
+## 6.14.0 (2023-07-05)
+
+## 6.13.0 (2023-06-23)
+
+## 6.12.0 (2023-06-07)
+
+## 6.11.0 (2023-05-24)
+
+## 6.10.0 (2023-05-10)
+
+## 6.9.0 (2023-04-26)
+
+## 6.8.0 (2023-04-12)
+
+## 6.7.0 (2023-03-29)
+
+## 6.6.0 (2023-03-15)
+
+## 6.5.0 (2023-03-01)
+
+## 6.4.0 (2023-02-15)
+
+## 6.3.0 (2023-02-01)
+
+## 6.2.0 (2023-01-11)
+
+## 6.1.0 (2023-01-02)
+
+## 6.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 5.5.0 (2022-11-16)
 
 ## 5.4.0 (2022-11-02)
@@ -16,7 +130,7 @@
 
 ### Breaking Changes
 
-–   Add TypeScript types to the built package (via "types": "build-types" in the package.json)
+– Add TypeScript types to the built package (via "types": "build-types" in the package.json)
 
 ## 4.14.0 (2022-08-24)
 
@@ -51,6 +165,7 @@
 ## 4.3.0 (2022-03-23)
 
 ### New Features
+
 -   The saveEntityRecord, saveEditedEntityRecord, and deleteEntityRecord actions now accept an optional throwOnError option (defaults to false). When set to true, any exceptions occurring when the action was executing are re-thrown, causing dispatch().saveEntityRecord() to reject with an error. ([#39258](https://github.com/WordPress/gutenberg/pull/39258))
 -   Added support for fetching block patterns and their categories, with the `getBlockPatterns` and `getBlockPatternCategories` selectors.
 
@@ -70,7 +185,7 @@
 
 ## 4.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -93,13 +208,13 @@
 
 ## 2.25.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the core data namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
 ## 2.21.0 (2020-09-03)
 
-### New Feature
+### New Features
 
 -   The `deleteEntityRecord` and `removeItems` actions have been added.
 -   The `isDeletingEntityRecord` and `getLastEntityDeleteError` selectors have been added.
@@ -107,7 +222,7 @@
 
 ## 2.3.0 (2019-05-21)
 
-### New features
+### New Features
 
 -   The `getAutosave`, `getAutosaves` and `getCurrentUser` selectors have been added.
 -   The `receiveAutosaves` and `receiveCurrentUser` actions have been added.
@@ -142,7 +257,7 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   `dispatch("core").receiveTerms` has been deprecated. Please use `dispatch("core").receiveEntityRecords` instead.
 -   `getCategories` resolvers has been deprecated. Please use `getEntityRecords` resolver instead.
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 29057b3abade51..9549e6742d8cd8 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -1,6 +1,6 @@
 # Core Data
 
-Core Data is a [data module](https://github.com/WordPress/gutenberg/tree/HEAD/packages/data/README.md) intended to simplify access to and manipulation of core WordPress entities. It registers its own store and provides a number of selectors which resolve data from the WordPress REST API automatically, along with dispatching action creators to manipulate data. Core data is shipped with [`TypeScript definitions for WordPress data types`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/core-data/src/types/README.md).
+Core Data is a [data module](https://github.com/WordPress/gutenberg/tree/HEAD/packages/data/README.md) intended to simplify access to and manipulation of core WordPress entities. It registers its own store and provides a number of selectors which resolve data from the WordPress REST API automatically, along with dispatching action creators to manipulate data. Core data is shipped with [`TypeScript definitions for WordPress data types`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/core-data/src/entity-types/README.md).
 
 Used in combination with features of the data module such as [`subscribe`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/data/README.md#subscribe-function) or [higher-order components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/data/README.md#higher-order-components), it enables a developer to easily add data into the logic and display of their plugin.
 
@@ -40,6 +40,122 @@ function MyAuthorsListBase() {
 }
 ```
 
+## What's an entity?
+
+An entity represents a data source. Each item within the entity is called an entity record. Available entities are defined in `rootEntitiesConfig` at ./src/entities.js.
+
+As of right now, the default entities defined by this package map to the [REST API handbook](https://developer.wordpress.org/rest-api/reference/), though there is nothing in the design that prevents it from being used to interact with any other API.
+
+What follows is a description of some of the properties of `rootEntitiesConfig`.
+
+### Connecting the entity with the data source
+
+#### baseURL
+
+-   Type: string.
+-   Example: `'/wp/v2/users'`.
+
+This property maps the entity to a given endpoint, taking its relative URL as value.
+
+#### baseURLParams
+
+-   Type: `object`.
+-   Example: `{ context: 'edit' }`.
+
+Additional parameters to the request, added as a query string. Each property will be converted into a field/value pair. For example, given the `baseURL: '/wp/v2/users'` and the `baseURLParams: { context: 'edit' }` the URL would be `/wp/v2/users?context=edit`.
+
+#### key
+
+-   Type: `string`.
+-   Example: `'slug'`.
+
+The entity engine aims to convert the API response into a number of entity records. Responses can come in different shapes, which are processed differently.
+
+Responses that represent a single object map to a single entity record. For example:
+
+```json
+{
+	"title": "...",
+	"description": "...",
+	"...": "..."
+}
+```
+
+Responses that represent a collection shaped as an array, map to as many entity records as elements of the array. For example:
+
+```json
+[
+	{ "id": 1, "name": "...", "...": "..." },
+	{ "id": 2, "name": "...", "...": "..." },
+	{ "id": 3, "name": "...", "...": "..." }
+]
+```
+
+There are also cases in which a response represents a collection shaped as an object, whose key is one of the property's values. Each of the nested objects should be its own entity record. For this case not to be confused with single object/entities, the entity configuration must provide the property key that holds the value acting as the object key. In the following example, the `slug` property's value is acting as the object key, hence the entity config must declare `key: 'slug'` for each nested object to be processed as an individual entity record:
+
+```json
+{
+	"publish": { "slug": "publish", "name": "Published", "...": "..." },
+	"draft": { "slug": "draft", "name": "Draft", "...": "..." },
+	"future": { "slug": "future", "name": "Future", "...": "..." }
+}
+```
+
+### Interacting with entity records
+
+Entity records are unique. For entities that are collections, it's assumed that each record has an `id` property which serves as an identifier to manage it. If the entity defines a `key`, that property would be used as its identifier instead of the assumed `id`.
+
+#### name
+
+-   Type: `string`.
+-   Example: `user`.
+
+The name of the entity. To be used in the utilities that interact with it (selectors, actions, hooks).
+
+#### kind
+
+-   Type: `string`.
+-   Example: `root`.
+
+Entities can be grouped by `kind`. To be used in the utilities that interact with them (selectors, actions, hooks).
+
+The package provides general methods to interact with the entities (`getEntityRecords`, `getEntityRecord`, etc.) by leveraging the `kind` and `name` properties:
+
+```js
+// Get the record collection for the user entity.
+wp.data.select( 'core' ).getEntityRecords( 'root', 'user' );
+
+// Get a single record for the user entity.
+wp.data.select( 'core' ).getEntityRecord( 'root', 'user', recordId );
+```
+
+#### plural
+
+-   Type: `string`.
+-   Example: `statuses`.
+
+In addition to the general utilities (`getEntityRecords`, `getEntityRecord`, etc.), the package dynamically creates nicer-looking methods to interact with the entity records of the `root` kind, both the collection and single records. Compare the general and nicer-looking methods as follows:
+
+```js
+// Collection
+wp.data.select( 'core' ).getEntityRecords( 'root', 'user' );
+wp.data.select( 'core' ).getUsers();
+
+// Single record
+wp.data.select( 'core' ).getEntityRecord( 'root', 'user', recordId );
+wp.data.select( 'core' ).getUser( recordId );
+```
+
+Sometimes, the pluralized form of an entity is not regular (it is not formed by adding a `-s` suffix). The `plural` property of the entity config allows to declare an alternative pluralized form for the dynamic methods created for the entity. For example, given the `status` entity that declares the `statuses` plural, there are the following methods created for it:
+
+```js
+// Collection
+wp.data.select( 'core' ).getStatuses();
+
+// Single record
+wp.data.select( 'core' ).getStatus( recordId );
+```
+
 ## Actions
 
 The following set of dispatching action creators are available on the object returned by `wp.data.dispatch( 'core' )`:
@@ -66,7 +182,7 @@ _Parameters_
 
 -   _kind_ `string`: Kind of the deleted entity.
 -   _name_ `string`: Name of the deleted entity.
--   _recordId_ `string`: Record ID of the deleted entity.
+-   _recordId_ `number|string`: Record ID of the deleted entity.
 -   _query_ `?Object`: Special query parameters for the DELETE API call.
 -   _options_ `[Object]`: Delete options.
 -   _options.\_\_unstableFetch_ `[Function]`: Internal use only. Function to call instead of `apiFetch()`. Must return a promise.
@@ -74,14 +190,13 @@ _Parameters_
 
 ### editEntityRecord
 
-Returns an action object that triggers an
-edit to an entity record.
+Returns an action object that triggers an edit to an entity record.
 
 _Parameters_
 
 -   _kind_ `string`: Kind of the edited entity record.
 -   _name_ `string`: Name of the edited entity record.
--   _recordId_ `number`: Record ID of the edited entity record.
+-   _recordId_ `number|string`: Record ID of the edited entity record.
 -   _edits_ `Object`: The edits.
 -   _options_ `Object`: Options for the edit.
 -   _options.undoIgnore_ `[boolean]`: Whether to ignore the edit in undo history or not.
@@ -90,6 +205,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.
@@ -102,14 +230,41 @@ _Parameters_
 -   _query_ `?Object`: Query Object.
 -   _invalidateCache_ `?boolean`: Should invalidate query caches.
 -   _edits_ `?Object`: Edits to reset.
+-   _meta_ `?Object`: Meta information about pagination.
 
 _Returns_
 
 -   `Object`: Action object.
 
+### receiveNavigationFallbackId
+
+Returns an action object signalling that the fallback Navigation Menu id has been received.
+
+_Parameters_
+
+-   _fallbackId_ `integer`: the id of the fallback Navigation Menu
+
+_Returns_
+
+-   `Object`: Action object.
+
+### receiveRevisions
+
+Action triggered to receive revision items.
+
+_Parameters_
+
+-   _kind_ `string`: Kind of the received entity record revisions.
+-   _name_ `string`: Name of the received entity record revisions.
+-   _recordKey_ `number|string`: The key of the entity record whose revisions you want to fetch.
+-   _records_ `Array|Object`: Revisions received.
+-   _query_ `?Object`: Query Object.
+-   _invalidateCache_ `?boolean`: Should invalidate query caches.
+-   _meta_ `?Object`: Meta information about pagination.
+
 ### receiveThemeSupports
 
-> **Deprecated** since WP 5.9, this is not useful anymore, use the selector direclty.
+> **Deprecated** since WP 5.9, this is not useful anymore, use the selector directly.
 
 Returns an action object used in signalling that the index has been received.
 
@@ -133,8 +288,7 @@ _Returns_
 
 ### redo
 
-Action triggered to redo the last undoed
-edit to an entity record, if any.
+Action triggered to redo the last undoed edit to an entity record, if any.
 
 ### saveEditedEntityRecord
 
@@ -145,7 +299,7 @@ _Parameters_
 -   _kind_ `string`: Kind of the entity.
 -   _name_ `string`: Name of the entity.
 -   _recordId_ `Object`: ID of the record.
--   _options_ `Object`: Saving options.
+-   _options_ `Object=`: Saving options.
 
 ### saveEntityRecord
 
@@ -163,8 +317,7 @@ _Parameters_
 
 ### undo
 
-Action triggered to undo the last edit to
-an entity record, if any.
+Action triggered to undo the last edit to an entity record, if any.
 
 <!-- END TOKEN(Autogenerated actions|src/actions.js) -->
 
@@ -176,11 +329,9 @@ The following selectors are available on the object returned by `wp.data.select(
 
 ### canUser
 
-Returns whether the current user can perform the given action on the given
-REST resource.
+Returns whether the current user can perform the given action on the given REST resource.
 
-Calling this may trigger an OPTIONS request to the REST API via the
-`canUser()` resolver.
+Calling this may trigger an OPTIONS request to the REST API via the `canUser()` resolver.
 
 <https://developer.wordpress.org/rest-api/reference/>
 
@@ -188,7 +339,7 @@ _Parameters_
 
 -   _state_ `State`: Data state.
 -   _action_ `string`: Action to check. One of: 'create', 'read', 'update', 'delete'.
--   _resource_ `string`: REST resource to check, e.g. 'media' or 'posts'.
+-   _resource_ `string | EntityResource`: Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }` or REST base as a string - `media`.
 -   _id_ `EntityRecordKey`: Optional ID of the rest resource to check.
 
 _Returns_
@@ -199,8 +350,7 @@ _Returns_
 
 Returns whether the current user can edit the given entity.
 
-Calling this may trigger an OPTIONS request to the REST API via the
-`canUser()` resolver.
+Calling this may trigger an OPTIONS request to the REST API via the `canUser()` resolver.
 
 <https://developer.wordpress.org/rest-api/reference/>
 
@@ -224,7 +374,7 @@ Returns all available authors.
 _Parameters_
 
 -   _state_ `State`: Data state.
--   _query_ `GetRecordsHttpQuery`: Optional object of query parameters to include with request.
+-   _query_ `GetRecordsHttpQuery`: Optional object of query parameters to include with request. For valid query parameters see the [Users page](https://developer.wordpress.org/rest-api/reference/users/) in the REST API Handbook and see the arguments for [List Users](https://developer.wordpress.org/rest-api/reference/users/#list-users) and [Retrieve a User](https://developer.wordpress.org/rest-api/reference/users/#retrieve-a-user).
 
 _Returns_
 
@@ -249,8 +399,7 @@ _Returns_
 
 Returns the latest autosaves for the post.
 
-May return multiple autosaves since the backend stores one autosave per
-author for each post.
+May return multiple autosaves since the backend stores one autosave per author for each post.
 
 _Parameters_
 
@@ -298,6 +447,20 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+> **Deprecated** since WordPress 6.5.0. Callers should use `select( 'core' ).getRevisions( 'root', 'globalStyles', ${ recordKey } )` instead, where `recordKey` is the id of the global styles parent post.
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Array< object > | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.
@@ -308,7 +471,20 @@ _Parameters_
 
 _Returns_
 
--   `undefined< 'edit' >`: Current user object.
+-   `ET.User< 'edit' >`: Current user object.
+
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
 
 ### getEditedEntityRecord
 
@@ -323,7 +499,7 @@ _Parameters_
 
 _Returns_
 
--   `undefined< EntityRecord > | undefined`: The entity record, merged with its edits.
+-   `ET.Updatable< EntityRecord > | false`: The entity record, merged with its edits.
 
 ### getEmbedPreview
 
@@ -398,17 +574,15 @@ _Returns_
 
 ### getEntityRecord
 
-Returns the Entity's record object by key. Returns `null` if the value is not
-yet received, undefined if the value entity is known to not exist, or the
-entity object if it exists and is received.
+Returns the Entity's record object by key. Returns `null` if the value is not yet received, undefined if the value entity is known to not exist, or the entity object if it exists and is received.
 
 _Parameters_
 
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _key_ `EntityRecordKey`: Record's key
--   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID.
+-   _key_ `EntityRecordKey`: Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
 
 _Returns_
 
@@ -433,9 +607,7 @@ _Returns_
 
 Returns the specified entity record's non transient edits.
 
-Transient edits don't create an undo level, and
-are not considered for change detection.
-They are defined in the entity's config.
+Transient edits don't create an undo level, and are not considered for change detection. They are defined in the entity's config.
 
 _Parameters_
 
@@ -457,12 +629,42 @@ _Parameters_
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
 
 _Returns_
 
 -   `EntityRecord[] | null`: Records.
 
+### getEntityRecordsTotalItems
+
+Returns the Entity's total available records for a given query (ignoring pagination).
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `number | null`: number | null.
+
+### getEntityRecordsTotalPages
+
+Returns the number of available pages for the given query.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. If requesting specific fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+
+_Returns_
+
+-   `number | null`: number | null.
+
 ### getLastEntityDeleteError
 
 Returns the specified entity record's last delete error.
@@ -495,8 +697,7 @@ _Returns_
 
 ### getRawEntityRecord
 
-Returns the entity's record object by key,
-with its attributes mapped to their raw values.
+Returns the entity's record object by key, with its attributes mapped to their raw values.
 
 _Parameters_
 
@@ -511,8 +712,9 @@ _Returns_
 
 ### getRedoEdit
 
-Returns the next edit from the current undo offset
-for the entity records edits history, if any.
+> **Deprecated** since 6.3
+
+Returns the next edit from the current undo offset for the entity records edits history, if any.
 
 _Parameters_
 
@@ -524,9 +726,7 @@ _Returns_
 
 ### getReferenceByDistinctEdits
 
-Returns a new reference when edited values have changed. This is useful in
-inferring where an edit has been made between states by comparison of the
-return values using strict equality.
+Returns a new reference when edited values have changed. This is useful in inferring where an edit has been made between states by comparison of the return values using strict equality.
 
 _Usage_
 
@@ -537,12 +737,45 @@ _Usage_
 
 _Parameters_
 
--   _state_ `State`: Editor state.
+-   _state_ Editor state.
 
 _Returns_
 
 -   A value whose reference will change only when an edit occurs.
 
+### getRevision
+
+Returns a single, specific revision of a parent entity.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _revisionKey_ `EntityRecordKey`: The revision's key.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [entity kind]".
+
+_Returns_
+
+-   `RevisionRecord | Record< PropertyKey, never > | undefined`: Record.
+
+### getRevisions
+
+Returns an entity's revisions.
+
+_Parameters_
+
+-   _state_ `State`: State tree
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _recordKey_ `EntityRecordKey`: The key of the entity record whose revisions you want to fetch.
+-   _query_ `GetRecordsHttpQuery`: Optional query. If requesting specific fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [Entity kind]".
+
+_Returns_
+
+-   `RevisionRecord[] | null`: Record.
+
 ### getThemeSupports
 
 Return theme supports data in the index.
@@ -557,8 +790,9 @@ _Returns_
 
 ### getUndoEdit
 
-Returns the previous edit from the current undo offset
-for the entity records edits history, if any.
+> **Deprecated** since 6.3
+
+Returns the previous edit from the current undo offset for the entity records edits history, if any.
 
 _Parameters_
 
@@ -568,6 +802,18 @@ _Returns_
 
 -   `Optional< any >`: The edit.
 
+### getUserPatternCategories
+
+Retrieve the registered user pattern categories.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Array< UserPatternCategory >`: User patterns category array.
+
 ### getUserQueryResults
 
 Returns all the users returned by a query ID.
@@ -579,12 +825,11 @@ _Parameters_
 
 _Returns_
 
--   `undefined< 'edit' >[]`: Users list.
+-   `ET.User< 'edit' >[]`: Users list.
 
 ### hasEditsForEntityRecord
 
-Returns true if the specified entity record has edits,
-and false otherwise.
+Returns true if the specified entity record has edits, and false otherwise.
 
 _Parameters_
 
@@ -599,15 +844,14 @@ _Returns_
 
 ### hasEntityRecords
 
-Returns true if records have been received for the given set of parameters,
-or false otherwise.
+Returns true if records have been received for the given set of parameters, or false otherwise.
 
 _Parameters_
 
 -   _state_ `State`: State tree
 -   _kind_ `string`: Entity kind.
 -   _name_ `string`: Entity name.
--   _query_ `GetRecordsHttpQuery`: Optional terms query.
+-   _query_ `GetRecordsHttpQuery`: Optional terms query. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
 
 _Returns_
 
@@ -629,8 +873,7 @@ _Returns_
 
 ### hasRedo
 
-Returns true if there is a next edit from the current undo offset
-for the entity records edits history, and false otherwise.
+Returns true if there is a next edit from the current undo offset for the entity records edits history, and false otherwise.
 
 _Parameters_
 
@@ -642,8 +885,7 @@ _Returns_
 
 ### hasUndo
 
-Returns true if there is a previous edit from the current undo offset
-for the entity records edits history, and false otherwise.
+Returns true if there is a previous edit from the current undo offset for the entity records edits history, and false otherwise.
 
 _Parameters_
 
@@ -687,9 +929,7 @@ _Returns_
 
 Determines if the returned preview is an oEmbed link fallback.
 
-WordPress can be configured to return a simple link to a URL if it is not embeddable.
-We need to be able to determine if a URL is embeddable or not, based on what we
-get back from the oEmbed preview API.
+WordPress can be configured to return a simple link to a URL if it is not embeddable. We need to be able to determine if a URL is embeddable or not, based on what we get back from the oEmbed preview API.
 
 _Parameters_
 
@@ -702,8 +942,7 @@ _Returns_
 
 ### isRequestingEmbedPreview
 
-Returns true if a request is in progress for embed preview data, or false
-otherwise.
+Returns true if a request is in progress for embed preview data, or false otherwise.
 
 _Parameters_
 
@@ -737,6 +976,47 @@ The following set of react hooks available to import from the `@wordpress/core-d
 
 <!-- START TOKEN(Autogenerated hooks|src/hooks/index.ts) -->
 
+### useEntityBlockEditor
+
+Hook that returns block content getters and setters for the nearest provided entity of the specified type.
+
+The return value has the shape `[ blocks, onInput, onChange ]`. `onInput` is for block changes that don't create undo levels or dirty the post, non-persistent changes, and `onChange` is for persistent changes. They map directly to the props of a `BlockEditorProvider` and are intended to be used with it, or similar components or hooks.
+
+_Parameters_
+
+-   _kind_ `string`: The entity kind.
+-   _name_ `string`: The entity name.
+-   _options_ `Object`:
+-   _options.id_ `[string]`: An entity ID to use instead of the context-provided one.
+
+_Returns_
+
+-   `[unknown[], Function, Function]`: The block array and setters.
+
+### useEntityId
+
+Hook that returns the ID for the nearest provided entity of the specified type.
+
+_Parameters_
+
+-   _kind_ `string`: The entity kind.
+-   _name_ `string`: The entity name.
+
+### useEntityProp
+
+Hook that returns the value and a setter for the specified property of the nearest provided entity of the specified type.
+
+_Parameters_
+
+-   _kind_ `string`: The entity kind.
+-   _name_ `string`: The entity name.
+-   _prop_ `string`: The property name.
+-   _\_id_ `[number|string]`: An entity ID to use instead of the context-provided one.
+
+_Returns_
+
+-   `[*, Function, *]`: An array where the first item is the property value, the second is the setter and the third is the full value object from REST API containing more information like `raw`, `rendered` and `protected` props.
+
 ### useEntityRecord
 
 Resolves the specified entity record.
@@ -765,8 +1045,8 @@ application, the page and the resolution details will be retrieved from
 the store state using `getEntityRecord()`, or resolved if missing.
 
 ```js
+import { useCallback } from 'react';
 import { useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { store as noticeStore } from '@wordpress/notices';
@@ -803,6 +1083,8 @@ function PageRenameForm( { id } ) {
 	return (
 		<form onSubmit={ onRename }>
 			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'Name' ) }
 				value={ page.editedRecord.title }
 				onChange={ setTitle }
@@ -842,7 +1124,7 @@ Resolves the specified entity records.
 _Usage_
 
 ```js
-import { useEntityRecord } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 
 function PageTitlesList() {
 	const { records, isResolving } = useEntityRecords( 'postType', 'page' );
@@ -893,7 +1175,10 @@ _Usage_
 import { useResourcePermissions } from '@wordpress/core-data';
 
 function PagesList() {
-	const { canCreate, isResolving } = useResourcePermissions( 'pages' );
+	const { canCreate, isResolving } = useResourcePermissions( {
+		kind: 'postType',
+		name: 'page',
+	} );
 
 	if ( isResolving ) {
 		return 'Loading ...';
@@ -916,7 +1201,11 @@ import { useResourcePermissions } from '@wordpress/core-data';
 
 function Page( { pageId } ) {
 	const { canCreate, canUpdate, canDelete, isResolving } =
-		useResourcePermissions( 'pages', pageId );
+		useResourcePermissions( {
+			kind: 'postType',
+			name: 'page',
+			id: pageId,
+		} );
 
 	if ( isResolving ) {
 		return 'Loading ...';
@@ -942,8 +1231,8 @@ the store state using `canUser()`, or resolved if missing.
 
 _Parameters_
 
--   _resource_ `string`: The resource in question, e.g. media.
--   _id_ `IdType`: ID of a specific resource entry, if needed, e.g. 10.
+-   _resource_ `string | EntityResource`: Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }` or REST base as a string - `media`.
+-   _id_ `IdType`: Optional ID of the resource to check, e.g. 10. Note: This argument is discouraged when using an entity object as a resource to check permissions and will be ignored.
 
 _Returns_
 
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index f4f8c6dc351839..fe428aeb87288f 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "5.5.0",
+	"version": "7.13.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,36 +20,44 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": [
 		"{src,build,build-module}/index.js"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/element": "file:../element",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/url": "file:../url",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/sync": "*",
+		"@wordpress/undo-manager": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
 		"change-case": "^4.1.2",
 		"equivalent-key-map": "^0.2.2",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
-		"rememo": "^4.0.0",
-		"uuid": "^8.3.0"
+		"fast-deep-equal": "^3.1.3",
+		"memize": "^2.1.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 97fc0b41ddaf52..13cbba39e11765 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual, find } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -14,10 +14,12 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
+import { getNestedValue, setNestedValue } from './utils';
 import { receiveItems, removeItems, receiveQueriedItems } from './queried-data';
-import { getOrLoadEntitiesConfig, DEFAULT_ENTITY_KEY } from './entities';
+import { DEFAULT_ENTITY_KEY } from './entities';
 import { createBatch } from './batch';
 import { STORE_NAME } from './name';
+import { getSyncProvider } from './sync';
 
 /**
  * Returns an action object used in signalling that authors have been received.
@@ -78,6 +80,7 @@ export function addEntities( entities ) {
  * @param {?Object}      query           Query Object.
  * @param {?boolean}     invalidateCache Should invalidate query caches.
  * @param {?Object}      edits           Edits to reset.
+ * @param {?Object}      meta            Meta information about pagination.
  * @return {Object} Action object.
  */
 export function receiveEntityRecords(
@@ -86,7 +89,8 @@ export function receiveEntityRecords(
 	records,
 	query,
 	invalidateCache = false,
-	edits
+	edits,
+	meta
 ) {
 	// Auto drafts should not have titles, but some plugins rely on them so we can't filter this
 	// on the server.
@@ -100,9 +104,9 @@ export function receiveEntityRecords(
 	}
 	let action;
 	if ( query ) {
-		action = receiveQueriedItems( records, query, edits );
+		action = receiveQueriedItems( records, query, edits, meta );
 	} else {
-		action = receiveItems( records, edits );
+		action = receiveItems( records, edits, meta );
 	}
 
 	return {
@@ -196,7 +200,7 @@ export function __experimentalReceiveThemeGlobalStyleVariations(
 /**
  * Returns an action object used in signalling that the index has been received.
  *
- * @deprecated since WP 5.9, this is not useful anymore, use the selector direclty.
+ * @deprecated since WP 5.9, this is not useful anymore, use the selector directly.
  *
  * @return {Object} Action object.
  */
@@ -210,6 +214,34 @@ export function receiveThemeSupports() {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the theme global styles CPT post revisions have been received.
+ * Ignored from documentation as it's internal to the data store.
+ *
+ * @deprecated since WordPress 6.5.0. Callers should use `dispatch( 'core' ).receiveRevision` instead.
+ *
+ * @ignore
+ *
+ * @param {number} currentId The post id.
+ * @param {Array}  revisions The global styles revisions.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveThemeGlobalStyleRevisions( currentId, revisions ) {
+	deprecated(
+		"wp.data.dispatch( 'core' ).receiveThemeGlobalStyleRevisions()",
+		{
+			since: '6.5.0',
+			alternative: "wp.data.dispatch( 'core' ).receiveRevisions",
+		}
+	);
+	return {
+		type: 'RECEIVE_THEME_GLOBAL_STYLE_REVISIONS',
+		currentId,
+		revisions,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the preview data for
  * a given URl has been received.
@@ -233,17 +265,17 @@ export function receiveEmbedPreview( url, preview ) {
 /**
  * Action triggered to delete an entity record.
  *
- * @param {string}   kind                         Kind of the deleted entity.
- * @param {string}   name                         Name of the deleted entity.
- * @param {string}   recordId                     Record ID of the deleted entity.
- * @param {?Object}  query                        Special query parameters for the
- *                                                DELETE API call.
- * @param {Object}   [options]                    Delete options.
- * @param {Function} [options.__unstableFetch]    Internal use only. Function to
- *                                                call instead of `apiFetch()`.
- *                                                Must return a promise.
- * @param {boolean}  [options.throwOnError=false] If false, this action suppresses all
- *                                                the exceptions. Defaults to false.
+ * @param {string}        kind                         Kind of the deleted entity.
+ * @param {string}        name                         Name of the deleted entity.
+ * @param {number|string} recordId                     Record ID of the deleted entity.
+ * @param {?Object}       query                        Special query parameters for the
+ *                                                     DELETE API call.
+ * @param {Object}        [options]                    Delete options.
+ * @param {Function}      [options.__unstableFetch]    Internal use only. Function to
+ *                                                     call instead of `apiFetch()`.
+ *                                                     Must return a promise.
+ * @param {boolean}       [options.throwOnError=false] If false, this action suppresses all
+ *                                                     the exceptions. Defaults to false.
  */
 export const deleteEntityRecord =
 	(
@@ -253,12 +285,14 @@ export const deleteEntityRecord =
 		query,
 		{ __unstableFetch = apiFetch, throwOnError = false } = {}
 	) =>
-	async ( { dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+	async ( { dispatch, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
 		let error;
 		let deletedRecord = false;
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -317,12 +351,12 @@ export const deleteEntityRecord =
  * Returns an action object that triggers an
  * edit to an entity record.
  *
- * @param {string}  kind                 Kind of the edited entity record.
- * @param {string}  name                 Name of the edited entity record.
- * @param {number}  recordId             Record ID of the edited entity record.
- * @param {Object}  edits                The edits.
- * @param {Object}  options              Options for the edit.
- * @param {boolean} [options.undoIgnore] Whether to ignore the edit in undo history or not.
+ * @param {string}        kind                 Kind of the edited entity record.
+ * @param {string}        name                 Name of the edited entity record.
+ * @param {number|string} recordId             Record ID of the edited entity record.
+ * @param {Object}        edits                The edits.
+ * @param {Object}        options              Options for the edit.
+ * @param {boolean}       [options.undoIgnore] Whether to ignore the edit in undo history or not.
  *
  * @return {Object} Action object.
  */
@@ -335,7 +369,7 @@ export const editEntityRecord =
 				`The entity being edited (${ kind }, ${ name }) does not have a loaded config.`
 			);
 		}
-		const { transientEdits = {}, mergedEdits = {} } = entityConfig;
+		const { mergedEdits = {} } = entityConfig;
 		const record = select.getRawEntityRecord( kind, name, recordId );
 		const editedRecord = select.getEditedEntityRecord(
 			kind,
@@ -355,25 +389,47 @@ export const editEntityRecord =
 				const value = mergedEdits[ key ]
 					? { ...editedRecordValue, ...edits[ key ] }
 					: edits[ key ];
-				acc[ key ] = isEqual( recordValue, value ) ? undefined : value;
+				acc[ key ] = fastDeepEqual( recordValue, value )
+					? undefined
+					: value;
 				return acc;
 			}, {} ),
-			transientEdits,
 		};
-		dispatch( {
-			type: 'EDIT_ENTITY_RECORD',
-			...edit,
-			meta: {
-				undo: ! options.undoIgnore && {
-					...edit,
-					// Send the current values for things like the first undo stack entry.
-					edits: Object.keys( edits ).reduce( ( acc, key ) => {
-						acc[ key ] = editedRecord[ key ];
-						return acc;
-					}, {} ),
-				},
-			},
-		} );
+		if ( window.__experimentalEnableSync && entityConfig.syncConfig ) {
+			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+				const objectId = entityConfig.getSyncObjectId( recordId );
+				getSyncProvider().update(
+					entityConfig.syncObjectType + '--edit',
+					objectId,
+					edit.edits
+				);
+			}
+		} else {
+			if ( ! options.undoIgnore ) {
+				select.getUndoManager().addRecord(
+					[
+						{
+							id: { kind, name, recordId },
+							changes: Object.keys( edits ).reduce(
+								( acc, key ) => {
+									acc[ key ] = {
+										from: editedRecord[ key ],
+										to: edits[ key ],
+									};
+									return acc;
+								},
+								{}
+							),
+						},
+					],
+					options.isCached
+				);
+			}
+			dispatch( {
+				type: 'EDIT_ENTITY_RECORD',
+				...edit,
+			} );
+		}
 	};
 
 /**
@@ -383,14 +439,13 @@ export const editEntityRecord =
 export const undo =
 	() =>
 	( { select, dispatch } ) => {
-		const undoEdit = select.getUndoEdit();
-		if ( ! undoEdit ) {
+		const undoRecord = select.getUndoManager().undo();
+		if ( ! undoRecord ) {
 			return;
 		}
 		dispatch( {
-			type: 'EDIT_ENTITY_RECORD',
-			...undoEdit,
-			meta: { isUndo: true },
+			type: 'UNDO',
+			record: undoRecord,
 		} );
 	};
 
@@ -401,14 +456,13 @@ export const undo =
 export const redo =
 	() =>
 	( { select, dispatch } ) => {
-		const redoEdit = select.getRedoEdit();
-		if ( ! redoEdit ) {
+		const redoRecord = select.getUndoManager().redo();
+		if ( ! redoRecord ) {
 			return;
 		}
 		dispatch( {
-			type: 'EDIT_ENTITY_RECORD',
-			...redoEdit,
-			meta: { isRedo: true },
+			type: 'REDO',
+			record: redoRecord,
 		} );
 	};
 
@@ -417,9 +471,11 @@ export const redo =
  *
  * @return {Object} Action object.
  */
-export function __unstableCreateUndoLevel() {
-	return { type: 'CREATE_UNDO_LEVEL' };
-}
+export const __unstableCreateUndoLevel =
+	() =>
+	( { select } ) => {
+		select.getUndoManager().addRecord();
+	};
 
 /**
  * Action triggered to save an entity record.
@@ -447,9 +503,11 @@ export const saveEntityRecord =
 		} = {}
 	) =>
 	async ( { select, resolveSelect, dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
+		if ( ! entityConfig ) {
 			return;
 		}
 		const entityIdKey = entityConfig.key || DEFAULT_ENTITY_KEY;
@@ -528,19 +586,26 @@ export const saveEntityRecord =
 					data = Object.keys( data ).reduce(
 						( acc, key ) => {
 							if (
-								[ 'title', 'excerpt', 'content' ].includes(
-									key
-								)
+								[
+									'title',
+									'excerpt',
+									'content',
+									'meta',
+								].includes( key )
 							) {
 								acc[ key ] = data[ key ];
 							}
 							return acc;
 						},
 						{
+							// Do not update the `status` if we have edited it when auto saving.
+							// It's very important to let the user explicitly save this change,
+							// because it can lead to unexpected results. An example would be to
+							// have a draft post and change the status to publish.
 							status:
 								data.status === 'auto-draft'
 									? 'draft'
-									: data.status,
+									: undefined,
 						}
 					);
 					updatedRecord = await __unstableFetch( {
@@ -708,19 +773,21 @@ export const __experimentalBatch =
 /**
  * Action triggered to save an entity record's edits.
  *
- * @param {string} kind     Kind of the entity.
- * @param {string} name     Name of the entity.
- * @param {Object} recordId ID of the record.
- * @param {Object} options  Saving options.
+ * @param {string}  kind     Kind of the entity.
+ * @param {string}  name     Name of the entity.
+ * @param {Object}  recordId ID of the record.
+ * @param {Object=} options  Saving options.
  */
 export const saveEditedEntityRecord =
 	( kind, name, recordId, options ) =>
-	async ( { select, dispatch } ) => {
+	async ( { select, dispatch, resolveSelect } ) => {
 		if ( ! select.hasEditsForEntityRecord( kind, name, recordId ) ) {
 			return;
 		}
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = find( configs, { kind, name } );
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
 		if ( ! entityConfig ) {
 			return;
 		}
@@ -738,15 +805,15 @@ export const saveEditedEntityRecord =
 /**
  * Action triggered to save only specified properties for the entity.
  *
- * @param {string} kind        Kind of the entity.
- * @param {string} name        Name of the entity.
- * @param {Object} recordId    ID of the record.
- * @param {Array}  itemsToSave List of entity properties to save.
- * @param {Object} options     Saving options.
+ * @param {string}        kind        Kind of the entity.
+ * @param {string}        name        Name of the entity.
+ * @param {number|string} recordId    ID of the record.
+ * @param {Array}         itemsToSave List of entity properties or property paths to save.
+ * @param {Object}        options     Saving options.
  */
 export const __experimentalSaveSpecifiedEntityEdits =
 	( kind, name, recordId, itemsToSave, options ) =>
-	async ( { select, dispatch } ) => {
+	async ( { select, dispatch, resolveSelect } ) => {
 		if ( ! select.hasEditsForEntityRecord( kind, name, recordId ) ) {
 			return;
 		}
@@ -756,10 +823,24 @@ export const __experimentalSaveSpecifiedEntityEdits =
 			recordId
 		);
 		const editsToSave = {};
-		for ( const edit in edits ) {
-			if ( itemsToSave.some( ( item ) => item === edit ) ) {
-				editsToSave[ edit ] = edits[ edit ];
-			}
+
+		for ( const item of itemsToSave ) {
+			setNestedValue( editsToSave, item, getNestedValue( edits, item ) );
+		}
+
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
+
+		const entityIdKey = entityConfig?.key || DEFAULT_ENTITY_KEY;
+
+		// If a record key is provided then update the existing record.
+		// This necessitates providing `recordKey` to saveEntityRecord as part of the
+		// `record` argument (here called `editsToSave`) to stop that action creating
+		// a new record and instead cause it to update the existing record.
+		if ( recordId ) {
+			editsToSave[ entityIdKey ] = recordId;
 		}
 		return await dispatch.saveEntityRecord(
 			kind,
@@ -807,6 +888,28 @@ export function receiveUserPermission( key, isAllowed ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the current user has
+ * permission to perform an action on a REST resource. Ignored from
+ * documentation as it's internal to the data store.
+ *
+ * @ignore
+ *
+ * @param {Object<string, boolean>} permissions An object where keys represent
+ *                                              actions and REST resources, and
+ *                                              values indicate whether the user
+ *                                              is allowed to perform the
+ *                                              action.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveUserPermissions( permissions ) {
+	return {
+		type: 'RECEIVE_USER_PERMISSIONS',
+		permissions,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the autosaves for a
  * post have been received.
@@ -826,3 +929,69 @@ export function receiveAutosaves( postId, autosaves ) {
 		autosaves: Array.isArray( autosaves ) ? autosaves : [ autosaves ],
 	};
 }
+
+/**
+ * Returns an action object signalling that the fallback Navigation
+ * Menu id has been received.
+ *
+ * @param {integer} fallbackId the id of the fallback Navigation Menu
+ * @return {Object} Action object.
+ */
+export function receiveNavigationFallbackId( fallbackId ) {
+	return {
+		type: 'RECEIVE_NAVIGATION_FALLBACK_ID',
+		fallbackId,
+	};
+}
+
+/**
+ * Returns an action object used to set the template for a given query.
+ *
+ * @param {Object} query      The lookup query.
+ * @param {string} templateId The resolved template id.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveDefaultTemplateId( query, templateId ) {
+	return {
+		type: 'RECEIVE_DEFAULT_TEMPLATE',
+		query,
+		templateId,
+	};
+}
+
+/**
+ * Action triggered to receive revision items.
+ *
+ * @param {string}        kind            Kind of the received entity record revisions.
+ * @param {string}        name            Name of the received entity record revisions.
+ * @param {number|string} recordKey       The key of the entity record whose revisions you want to fetch.
+ * @param {Array|Object}  records         Revisions received.
+ * @param {?Object}       query           Query Object.
+ * @param {?boolean}      invalidateCache Should invalidate query caches.
+ * @param {?Object}       meta            Meta information about pagination.
+ */
+export const receiveRevisions =
+	( kind, name, recordKey, records, query, invalidateCache = false, meta ) =>
+	async ( { dispatch, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.kind === kind && config.name === name
+		);
+		const key =
+			entityConfig && entityConfig?.revisionKey
+				? entityConfig.revisionKey
+				: DEFAULT_ENTITY_KEY;
+
+		dispatch( {
+			type: 'RECEIVE_ITEM_REVISIONS',
+			key,
+			items: Array.isArray( records ) ? records : [ records ],
+			recordKey,
+			meta,
+			query,
+			kind,
+			name,
+			invalidateCache,
+		} );
+	};
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index 0b64c3362e8955..2730cdf3d64bf4 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -2,21 +2,15 @@
  * External dependencies
  */
 import { capitalCase, pascalCase } from 'change-case';
-import { map, find, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { addEntities } from './actions';
+import { RichTextData } from '@wordpress/rich-text';
 
 export const DEFAULT_ENTITY_KEY = 'id';
-
 const POST_RAW_ATTRIBUTES = [ 'title', 'excerpt', 'content' ];
 
 export const rootEntitiesConfig = [
@@ -26,6 +20,8 @@ export const rootEntitiesConfig = [
 		name: '__unstableBase',
 		baseURL: '/',
 		baseURLParams: {
+			// Please also change the preload path when changing this.
+			// @see lib/compat/wordpress-6.8/preload.php
 			_fields: [
 				'description',
 				'gmt_offset',
@@ -35,18 +31,32 @@ export const rootEntitiesConfig = [
 				'site_icon_url',
 				'site_logo',
 				'timezone_string',
+				'default_template_part_areas',
+				'default_template_types',
 				'url',
 			].join( ',' ),
 		},
-	},
-	{
-		label: __( 'Site' ),
-		name: 'site',
-		kind: 'root',
-		baseURL: '/wp/v2/settings',
-		getTitle: ( record ) => {
-			return get( record, [ 'title' ], __( 'Site Title' ) );
+		// The entity doesn't support selecting multiple records.
+		// The property is maintained for backward compatibility.
+		plural: '__unstableBases',
+		syncConfig: {
+			fetch: async () => {
+				return apiFetch( { path: '/' } );
+			},
+			applyChangesToDoc: ( doc, changes ) => {
+				const document = doc.getMap( 'document' );
+				Object.entries( changes ).forEach( ( [ key, value ] ) => {
+					if ( document.get( key ) !== value ) {
+						document.set( key, value );
+					}
+				} );
+			},
+			fromCRDTDoc: ( doc ) => {
+				return doc.getMap( 'document' ).toJSON();
+			},
 		},
+		syncObjectType: 'root/base',
+		getSyncObjectId: () => 'index',
 	},
 	{
 		label: __( 'Post Type' ),
@@ -55,6 +65,27 @@ export const rootEntitiesConfig = [
 		key: 'slug',
 		baseURL: '/wp/v2/types',
 		baseURLParams: { context: 'edit' },
+		plural: 'postTypes',
+		syncConfig: {
+			fetch: async ( id ) => {
+				return apiFetch( {
+					path: `/wp/v2/types/${ id }?context=edit`,
+				} );
+			},
+			applyChangesToDoc: ( doc, changes ) => {
+				const document = doc.getMap( 'document' );
+				Object.entries( changes ).forEach( ( [ key, value ] ) => {
+					if ( document.get( key ) !== value ) {
+						document.set( key, value );
+					}
+				} );
+			},
+			fromCRDTDoc: ( doc ) => {
+				return doc.getMap( 'document' ).toJSON();
+			},
+		},
+		syncObjectType: 'root/postType',
+		getSyncObjectId: ( id ) => id,
 	},
 	{
 		name: 'media',
@@ -64,6 +95,7 @@ export const rootEntitiesConfig = [
 		plural: 'mediaItems',
 		label: __( 'Media' ),
 		rawAttributes: [ 'caption', 'title', 'description' ],
+		supportsPagination: true,
 	},
 	{
 		name: 'taxonomy',
@@ -148,8 +180,13 @@ export const rootEntitiesConfig = [
 		kind: 'root',
 		baseURL: '/wp/v2/global-styles',
 		baseURLParams: { context: 'edit' },
-		plural: 'globalStylesVariations', // Should be different than name.
+		plural: 'globalStylesVariations', // Should be different from name.
 		getTitle: ( record ) => record?.title?.rendered || record?.title,
+		getRevisionsUrl: ( parentId, revisionId ) =>
+			`/wp/v2/global-styles/${ parentId }/revisions${
+				revisionId ? '/' + revisionId : ''
+			}`,
+		supportsPagination: true,
 	},
 	{
 		label: __( 'Themes' ),
@@ -157,6 +194,7 @@ export const rootEntitiesConfig = [
 		kind: 'root',
 		baseURL: '/wp/v2/themes',
 		baseURLParams: { context: 'edit' },
+		plural: 'themes',
 		key: 'stylesheet',
 	},
 	{
@@ -165,13 +203,29 @@ export const rootEntitiesConfig = [
 		kind: 'root',
 		baseURL: '/wp/v2/plugins',
 		baseURLParams: { context: 'edit' },
+		plural: 'plugins',
 		key: 'plugin',
 	},
+	{
+		label: __( 'Status' ),
+		name: 'status',
+		kind: 'root',
+		baseURL: '/wp/v2/statuses',
+		baseURLParams: { context: 'edit' },
+		plural: 'statuses',
+		key: 'slug',
+	},
 ];
 
 export const additionalEntityConfigLoaders = [
 	{ kind: 'postType', loadEntities: loadPostTypeEntities },
 	{ kind: 'taxonomy', loadEntities: loadTaxonomyEntities },
+	{
+		kind: 'root',
+		name: 'site',
+		plural: 'sites',
+		loadEntities: loadSiteEntity,
+	},
 ];
 
 /**
@@ -204,6 +258,29 @@ export const prePersistPostType = ( persistedRecord, edits ) => {
 	return newEdits;
 };
 
+const serialisableBlocksCache = new WeakMap();
+
+function makeBlockAttributesSerializable( attributes ) {
+	const newAttributes = { ...attributes };
+	for ( const [ key, value ] of Object.entries( attributes ) ) {
+		if ( value instanceof RichTextData ) {
+			newAttributes[ key ] = value.valueOf();
+		}
+	}
+	return newAttributes;
+}
+
+function makeBlocksSerializable( blocks ) {
+	return blocks.map( ( block ) => {
+		const { innerBlocks, attributes, ...rest } = block;
+		return {
+			...rest,
+			attributes: makeBlockAttributesSerializable( attributes ),
+			innerBlocks: makeBlocksSerializable( innerBlocks ),
+		};
+	} );
+}
+
 /**
  * Returns the list of post type entities.
  *
@@ -213,7 +290,7 @@ async function loadPostTypeEntities() {
 	const postTypes = await apiFetch( {
 		path: '/wp/v2/types?context=view',
 	} );
-	return map( postTypes, ( postType, name ) => {
+	return Object.entries( postTypes ?? {} ).map( ( [ name, postType ] ) => {
 		const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
 			name
 		);
@@ -238,6 +315,48 @@ async function loadPostTypeEntities() {
 					: String( record.id ) ),
 			__unstablePrePersist: isTemplate ? undefined : prePersistPostType,
 			__unstable_rest_base: postType.rest_base,
+			syncConfig: {
+				fetch: async ( id ) => {
+					return apiFetch( {
+						path: `/${ namespace }/${ postType.rest_base }/${ id }?context=edit`,
+					} );
+				},
+				applyChangesToDoc: ( doc, changes ) => {
+					const document = doc.getMap( 'document' );
+
+					Object.entries( changes ).forEach( ( [ key, value ] ) => {
+						if ( typeof value !== 'function' ) {
+							if ( key === 'blocks' ) {
+								if ( ! serialisableBlocksCache.has( value ) ) {
+									serialisableBlocksCache.set(
+										value,
+										makeBlocksSerializable( value )
+									);
+								}
+
+								value = serialisableBlocksCache.get( value );
+							}
+
+							if ( document.get( key ) !== value ) {
+								document.set( key, value );
+							}
+						}
+					} );
+				},
+				fromCRDTDoc: ( doc ) => {
+					return doc.getMap( 'document' ).toJSON();
+				},
+			},
+			syncObjectType: 'postType/' + postType.name,
+			getSyncObjectId: ( id ) => id,
+			supportsPagination: true,
+			getRevisionsUrl: ( parentId, revisionId ) =>
+				`/${ namespace }/${
+					postType.rest_base
+				}/${ parentId }/revisions${
+					revisionId ? '/' + revisionId : ''
+				}`,
+			revisionKey: isTemplate ? 'wp_id' : DEFAULT_ENTITY_KEY,
 		};
 	} );
 }
@@ -251,7 +370,7 @@ async function loadTaxonomyEntities() {
 	const taxonomies = await apiFetch( {
 		path: '/wp/v2/taxonomies?context=view',
 	} );
-	return map( taxonomies, ( taxonomy, name ) => {
+	return Object.entries( taxonomies ?? {} ).map( ( [ name, taxonomy ] ) => {
 		const namespace = taxonomy?.rest_namespace ?? 'wp/v2';
 		return {
 			kind: 'taxonomy',
@@ -264,62 +383,75 @@ async function loadTaxonomyEntities() {
 }
 
 /**
- * Returns the entity's getter method name given its kind and name.
+ * Returns the Site entity.
+ *
+ * @return {Promise} Entity promise
+ */
+async function loadSiteEntity() {
+	const entity = {
+		label: __( 'Site' ),
+		name: 'site',
+		kind: 'root',
+		baseURL: '/wp/v2/settings',
+		syncConfig: {
+			fetch: async () => {
+				return apiFetch( { path: '/wp/v2/settings' } );
+			},
+			applyChangesToDoc: ( doc, changes ) => {
+				const document = doc.getMap( 'document' );
+				Object.entries( changes ).forEach( ( [ key, value ] ) => {
+					if ( document.get( key ) !== value ) {
+						document.set( key, value );
+					}
+				} );
+			},
+			fromCRDTDoc: ( doc ) => {
+				return doc.getMap( 'document' ).toJSON();
+			},
+		},
+		syncObjectType: 'root/site',
+		getSyncObjectId: () => 'index',
+		meta: {},
+	};
+
+	const site = await apiFetch( {
+		path: entity.baseURL,
+		method: 'OPTIONS',
+	} );
+
+	const labels = {};
+	Object.entries( site?.schema?.properties ?? {} ).forEach(
+		( [ key, value ] ) => {
+			// Ignore properties `title` and `type` keys.
+			if ( typeof value === 'object' && value.title ) {
+				labels[ key ] = value.title;
+			}
+		}
+	);
+
+	return [ { ...entity, meta: { labels } } ];
+}
+
+/**
+ * Returns the entity's getter method name given its kind and name or plural name.
  *
  * @example
  * ```js
  * const nameSingular = getMethodName( 'root', 'theme', 'get' );
  * // nameSingular is getRootTheme
  *
- * const namePlural = getMethodName( 'root', 'theme', 'set' );
+ * const namePlural = getMethodName( 'root', 'themes', 'set' );
  * // namePlural is setRootThemes
  * ```
  *
- * @param {string}  kind      Entity kind.
- * @param {string}  name      Entity name.
- * @param {string}  prefix    Function prefix.
- * @param {boolean} usePlural Whether to use the plural form or not.
+ * @param {string} kind   Entity kind.
+ * @param {string} name   Entity name or plural name.
+ * @param {string} prefix Function prefix.
  *
  * @return {string} Method name
  */
-export const getMethodName = (
-	kind,
-	name,
-	prefix = 'get',
-	usePlural = false
-) => {
-	const entityConfig = find( rootEntitiesConfig, { kind, name } );
+export const getMethodName = ( kind, name, prefix = 'get' ) => {
 	const kindPrefix = kind === 'root' ? '' : pascalCase( kind );
-	const nameSuffix = pascalCase( name ) + ( usePlural ? 's' : '' );
-	const suffix =
-		usePlural && 'plural' in entityConfig && entityConfig?.plural
-			? pascalCase( entityConfig.plural )
-			: nameSuffix;
+	const suffix = pascalCase( name );
 	return `${ prefix }${ kindPrefix }${ suffix }`;
 };
-
-/**
- * Loads the kind entities into the store.
- *
- * @param {string} kind Kind
- *
- * @return {(thunkArgs: object) => Promise<Array>} Entities
- */
-export const getOrLoadEntitiesConfig =
-	( kind ) =>
-	async ( { select, dispatch } ) => {
-		let configs = select.getEntitiesConfig( kind );
-		if ( configs && configs.length !== 0 ) {
-			return configs;
-		}
-
-		const loader = find( additionalEntityConfigLoaders, { kind } );
-		if ( ! loader ) {
-			return [];
-		}
-
-		configs = await loader.loadEntities();
-		dispatch( addEntities( configs ) );
-
-		return configs;
-	};
diff --git a/packages/core-data/src/entity-context.js b/packages/core-data/src/entity-context.js
new file mode 100644
index 00000000000000..9a2e597527065a
--- /dev/null
+++ b/packages/core-data/src/entity-context.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const EntityContext = createContext( {} );
diff --git a/packages/core-data/src/entity-provider.js b/packages/core-data/src/entity-provider.js
index f9d61aa413fc23..322d53f7f3a29d 100644
--- a/packages/core-data/src/entity-provider.js
+++ b/packages/core-data/src/entity-provider.js
@@ -1,57 +1,12 @@
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useContext,
-	useCallback,
-	useEffect,
-} from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { STORE_NAME } from './name';
-
-/** @typedef {import('@wordpress/blocks').WPBlock} WPBlock */
-
-const EMPTY_ARRAY = [];
-
-/**
- * Internal dependencies
- */
-import { rootEntitiesConfig, additionalEntityConfigLoaders } from './entities';
-
-const entityContexts = {
-	...rootEntitiesConfig.reduce( ( acc, loader ) => {
-		if ( ! acc[ loader.kind ] ) {
-			acc[ loader.kind ] = {};
-		}
-		acc[ loader.kind ][ loader.name ] = {
-			context: createContext( undefined ),
-		};
-		return acc;
-	}, {} ),
-	...additionalEntityConfigLoaders.reduce( ( acc, loader ) => {
-		acc[ loader.kind ] = {};
-		return acc;
-	}, {} ),
-};
-const getEntityContext = ( kind, name ) => {
-	if ( ! entityContexts[ kind ] ) {
-		throw new Error( `Missing entity config for kind: ${ kind }.` );
-	}
-
-	if ( ! entityContexts[ kind ][ name ] ) {
-		entityContexts[ kind ][ name ] = {
-			context: createContext( undefined ),
-		};
-	}
-
-	return entityContexts[ kind ][ name ].context;
-};
+import { EntityContext } from './entity-context';
 
 /**
  * Context provider component for providing
@@ -67,152 +22,20 @@ const getEntityContext = ( kind, name ) => {
  *                   the entity's context provider.
  */
 export default function EntityProvider( { kind, type: name, id, children } ) {
-	const Provider = getEntityContext( kind, name ).Provider;
-	return <Provider value={ id }>{ children }</Provider>;
-}
-
-/**
- * Hook that returns the ID for the nearest
- * provided entity of the specified type.
- *
- * @param {string} kind The entity kind.
- * @param {string} name The entity name.
- */
-export function useEntityId( kind, name ) {
-	return useContext( getEntityContext( kind, name ) );
-}
-
-/**
- * Hook that returns the value and a setter for the
- * specified property of the nearest provided
- * entity of the specified type.
- *
- * @param {string} kind  The entity kind.
- * @param {string} name  The entity name.
- * @param {string} prop  The property name.
- * @param {string} [_id] An entity ID to use instead of the context-provided one.
- *
- * @return {[*, Function, *]} An array where the first item is the
- *                            property value, the second is the
- *                            setter and the third is the full value
- * 							  object from REST API containing more
- * 							  information like `raw`, `rendered` and
- * 							  `protected` props.
- */
-export function useEntityProp( kind, name, prop, _id ) {
-	const providerId = useEntityId( kind, name );
-	const id = _id ?? providerId;
-
-	const { value, fullValue } = useSelect(
-		( select ) => {
-			const { getEntityRecord, getEditedEntityRecord } =
-				select( STORE_NAME );
-			const record = getEntityRecord( kind, name, id ); // Trigger resolver.
-			const editedRecord = getEditedEntityRecord( kind, name, id );
-			return record && editedRecord
-				? {
-						value: editedRecord[ prop ],
-						fullValue: record[ prop ],
-				  }
-				: {};
-		},
-		[ kind, name, id, prop ]
-	);
-	const { editEntityRecord } = useDispatch( STORE_NAME );
-	const setValue = useCallback(
-		( newValue ) => {
-			editEntityRecord( kind, name, id, {
-				[ prop ]: newValue,
-			} );
-		},
-		[ kind, name, id, prop ]
+	const parent = useContext( EntityContext );
+	const childContext = useMemo(
+		() => ( {
+			...parent,
+			[ kind ]: {
+				...parent?.[ kind ],
+				[ name ]: id,
+			},
+		} ),
+		[ parent, kind, name, id ]
 	);
-
-	return [ value, setValue, fullValue ];
-}
-
-/**
- * Hook that returns block content getters and setters for
- * the nearest provided entity of the specified type.
- *
- * The return value has the shape `[ blocks, onInput, onChange ]`.
- * `onInput` is for block changes that don't create undo levels
- * or dirty the post, non-persistent changes, and `onChange` is for
- * peristent changes. They map directly to the props of a
- * `BlockEditorProvider` and are intended to be used with it,
- * or similar components or hooks.
- *
- * @param {string} kind         The entity kind.
- * @param {string} name         The entity name.
- * @param {Object} options
- * @param {string} [options.id] An entity ID to use instead of the context-provided one.
- *
- * @return {[WPBlock[], Function, Function]} The block array and setters.
- */
-export function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
-	const providerId = useEntityId( kind, name );
-	const id = _id ?? providerId;
-	const { content, blocks } = useSelect(
-		( select ) => {
-			const { getEditedEntityRecord } = select( STORE_NAME );
-			const editedRecord = getEditedEntityRecord( kind, name, id );
-			return {
-				blocks: editedRecord.blocks,
-				content: editedRecord.content,
-			};
-		},
-		[ kind, name, id ]
+	return (
+		<EntityContext.Provider value={ childContext }>
+			{ children }
+		</EntityContext.Provider>
 	);
-	const { __unstableCreateUndoLevel, editEntityRecord } =
-		useDispatch( STORE_NAME );
-
-	useEffect( () => {
-		// Load the blocks from the content if not already in state
-		// Guard against other instances that might have
-		// set content to a function already or the blocks are already in state.
-		if ( content && typeof content !== 'function' && ! blocks ) {
-			const parsedContent = parse( content );
-			editEntityRecord(
-				kind,
-				name,
-				id,
-				{
-					blocks: parsedContent,
-				},
-				{ undoIgnore: true }
-			);
-		}
-	}, [ content ] );
-
-	const onChange = useCallback(
-		( newBlocks, options ) => {
-			const { selection } = options;
-			const edits = { blocks: newBlocks, selection };
-
-			const noChange = blocks === edits.blocks;
-			if ( noChange ) {
-				return __unstableCreateUndoLevel( kind, name, id );
-			}
-
-			// We create a new function here on every persistent edit
-			// to make sure the edit makes the post dirty and creates
-			// a new undo level.
-			edits.content = ( { blocks: blocksForSerialization = [] } ) =>
-				__unstableSerializeAndClean( blocksForSerialization );
-
-			editEntityRecord( kind, name, id, edits );
-		},
-		[ kind, name, id, blocks ]
-	);
-
-	const onInput = useCallback(
-		( newBlocks, options ) => {
-			const { selection } = options;
-			const edits = { blocks: newBlocks, selection };
-			editEntityRecord( kind, name, id, edits );
-		},
-		[ kind, name, id ]
-	);
-
-	return [ blocks ?? EMPTY_ARRAY, onInput, onChange ];
 }
diff --git a/packages/core-data/src/entity-types/attachment.ts b/packages/core-data/src/entity-types/attachment.ts
index 703a08611c0e2b..3d4e6814e29cf6 100644
--- a/packages/core-data/src/entity-types/attachment.ts
+++ b/packages/core-data/src/entity-types/attachment.ts
@@ -14,6 +14,40 @@ import type {
 
 import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-records';
 
+interface MediaDetails {
+	width: number;
+	height: number;
+	file: string;
+	filesize: number;
+	sizes: { [ key: string ]: Size };
+	image_meta: ImageMeta;
+	original_image?: string;
+}
+interface ImageMeta {
+	aperture: string;
+	credit: string;
+	camera: string;
+	caption: string;
+	created_timestamp: string;
+	copyright: string;
+	focal_length: string;
+	iso: string;
+	shutter_speed: string;
+	title: string;
+	orientation: string;
+	keywords: any[];
+}
+
+interface Size {
+	file: string;
+	width: number;
+	height: number;
+	filesize?: number;
+	mime_type: string;
+	source_url: string;
+	uncropped?: boolean;
+}
+
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
 		export interface Attachment< C extends Context > {
@@ -124,7 +158,7 @@ declare module './base-entity-records' {
 			/**
 			 * Details about the media file, specific to its type.
 			 */
-			media_details: Record< string, string >;
+			media_details: MediaDetails;
 			/**
 			 * The ID for the associated post of the attachment.
 			 */
diff --git a/packages/core-data/src/entity-types/global-styles-revision.ts b/packages/core-data/src/entity-types/global-styles-revision.ts
new file mode 100644
index 00000000000000..1a89c164e313b0
--- /dev/null
+++ b/packages/core-data/src/entity-types/global-styles-revision.ts
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import type { Context, ContextualField, OmitNevers } from './helpers';
+
+import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-records';
+
+declare module './base-entity-records' {
+	export namespace BaseEntityRecords {
+		export interface GlobalStylesRevision< C extends Context > {
+			/**
+			 * The ID for the author of the global styles revision.
+			 */
+			author: number;
+			/**
+			 * The date the post global styles revision published, in the site's timezone.
+			 */
+			date: string | null;
+			/**
+			 * The date the global styles revision was published, as GMT.
+			 */
+			date_gmt: ContextualField< string | null, 'view' | 'edit', C >;
+			/**
+			 * Unique identifier for the revision.
+			 */
+			id: number;
+			/**
+			 * The date the global styles revision was last modified, in the site's timezone.
+			 */
+			modified: ContextualField< string, 'view' | 'edit', C >;
+			/**
+			 * The date the global styles revision was last modified, as GMT.
+			 */
+			modified_gmt: ContextualField< string, 'view' | 'edit', C >;
+			/**
+			 * Identifier for the parent of the revision.
+			 */
+			parent: number;
+			styles: Record< string, Object >;
+			settings: Record< string, Object >;
+		}
+	}
+}
+
+export type GlobalStylesRevision< C extends Context = 'view' > = OmitNevers<
+	_BaseEntityRecords.GlobalStylesRevision< C >
+>;
diff --git a/packages/core-data/src/entity-types/helpers.ts b/packages/core-data/src/entity-types/helpers.ts
index 59ed25a72bc8b1..5d5c5b44e64970 100644
--- a/packages/core-data/src/entity-types/helpers.ts
+++ b/packages/core-data/src/entity-types/helpers.ts
@@ -64,7 +64,7 @@ export type Context = 'view' | 'edit' | 'embed';
 export type ContextualField<
 	FieldType,
 	AvailableInContexts extends Context,
-	C extends Context
+	C extends Context,
 > = AvailableInContexts extends C ? FieldType : never;
 
 /**
@@ -93,7 +93,7 @@ export type OmitNevers<
 			: T[ K ] extends Record< string, unknown >
 			? OmitNevers< T[ K ] >
 			: T[ K ];
-	}
+	},
 > = Pick<
 	Nevers,
 	{
@@ -132,7 +132,7 @@ export interface RenderedText< C extends Context > {
  * For example, in the block editor, content.rendered could used as a visual preview, and
  * content.raw could be used to populate the code editor.
  *
- * When updating these rendered fields, Javascript is not be able to properly render arbitrary block
+ * When updating these rendered fields, JavaScript is not be able to properly render arbitrary block
  * markup. Therefore, it stores only the raw markup without the rendered part. And since that's a string,
  * the entire field becomes a string.
  *
diff --git a/packages/core-data/src/entity-types/index.ts b/packages/core-data/src/entity-types/index.ts
index 19d10a28ad698e..0e601137cbcb6c 100644
--- a/packages/core-data/src/entity-types/index.ts
+++ b/packages/core-data/src/entity-types/index.ts
@@ -4,12 +4,14 @@
 import type { Context, Updatable } from './helpers';
 import type { Attachment } from './attachment';
 import type { Comment } from './comment';
+import type { GlobalStylesRevision } from './global-styles-revision';
 import type { MenuLocation } from './menu-location';
 import type { NavMenu } from './nav-menu';
 import type { NavMenuItem } from './nav-menu-item';
 import type { Page } from './page';
 import type { Plugin } from './plugin';
 import type { Post } from './post';
+import type { PostRevision } from './post-revision';
 import type { Settings } from './settings';
 import type { Sidebar } from './sidebar';
 import type { Taxonomy } from './taxonomy';
@@ -27,12 +29,14 @@ export type {
 	Attachment,
 	Comment,
 	Context,
+	GlobalStylesRevision,
 	MenuLocation,
 	NavMenu,
 	NavMenuItem,
 	Page,
 	Plugin,
 	Post,
+	PostRevision,
 	Settings,
 	Sidebar,
 	Taxonomy,
@@ -82,12 +86,14 @@ export interface PerPackageEntityRecords< C extends Context > {
 	core:
 		| Attachment< C >
 		| Comment< C >
+		| GlobalStylesRevision< C >
 		| MenuLocation< C >
 		| NavMenu< C >
 		| NavMenuItem< C >
 		| Page< C >
 		| Plugin< C >
 		| Post< C >
+		| PostRevision< C >
 		| Settings< C >
 		| Sidebar< C >
 		| Taxonomy< C >
diff --git a/packages/core-data/src/entity-types/menu-location.ts b/packages/core-data/src/entity-types/menu-location.ts
index 9bc3e5f7189b0e..d5e01f45738c6d 100644
--- a/packages/core-data/src/entity-types/menu-location.ts
+++ b/packages/core-data/src/entity-types/menu-location.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface MenuLocation< C extends Context > {
 			/**
 			 * The name of the menu location.
diff --git a/packages/core-data/src/entity-types/plugin.ts b/packages/core-data/src/entity-types/plugin.ts
index 61954ec8535310..4ebea97c27996d 100644
--- a/packages/core-data/src/entity-types/plugin.ts
+++ b/packages/core-data/src/entity-types/plugin.ts
@@ -73,7 +73,7 @@ declare module './base-entity-records' {
 	}
 }
 
-export type PluginStatus = 'active' | 'inactive';
+export type PluginStatus = 'active' | 'inactive' | 'network-active';
 export type Plugin< C extends Context = 'edit' > = OmitNevers<
 	_BaseEntityRecords.Plugin< C >
 >;
diff --git a/packages/core-data/src/entity-types/post-revision.ts b/packages/core-data/src/entity-types/post-revision.ts
new file mode 100644
index 00000000000000..354a3fc02af704
--- /dev/null
+++ b/packages/core-data/src/entity-types/post-revision.ts
@@ -0,0 +1,93 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	Context,
+	ContextualField,
+	RenderedText,
+	OmitNevers,
+} from './helpers';
+
+import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-records';
+
+declare module './base-entity-records' {
+	export namespace BaseEntityRecords {
+		export interface PostRevision< C extends Context > {
+			/**
+			 * The ID for the author of the post revision.
+			 */
+			author: number;
+			/**
+			 * The content for the post.
+			 */
+			content: ContextualField<
+				RenderedText< C > & {
+					/**
+					 * Whether the content is protected with a password.
+					 */
+					is_protected: boolean;
+					/**
+					 * Version of the content block format used by the post.
+					 */
+					block_version: ContextualField< string, 'edit', C >;
+				},
+				'view' | 'edit',
+				C
+			>;
+			/**
+			 * The date the post was published, in the site's timezone.
+			 */
+			date: string | null;
+			/**
+			 * The date the post was published, as GMT.
+			 */
+			date_gmt: ContextualField< string | null, 'view' | 'edit', C >;
+			/**
+			 * The excerpt for the post revision.
+			 */
+			excerpt: RenderedText< C > & {
+				protected: boolean;
+			};
+			/**
+			 * The globally unique identifier for the post.
+			 */
+			guid: ContextualField< RenderedText< C >, 'view' | 'edit', C >;
+			/**
+			 * Unique identifier for the revision.
+			 */
+			id: number;
+			/**
+			 * Meta fields.
+			 */
+			meta: ContextualField<
+				Record< string, string >,
+				'view' | 'edit',
+				C
+			>;
+			/**
+			 * The date the post was last modified, in the site's timezone.
+			 */
+			modified: ContextualField< string, 'view' | 'edit', C >;
+			/**
+			 * The date the post revision was last modified, as GMT.
+			 */
+			modified_gmt: ContextualField< string, 'view' | 'edit', C >;
+			/**
+			 * Identifier for the parent of the revision.
+			 */
+			parent: number;
+			/**
+			 * An alphanumeric identifier for the post unique to its type.
+			 */
+			slug: string;
+			/**
+			 * The title for the post revision.
+			 */
+			title: RenderedText< C >;
+		}
+	}
+}
+
+export type PostRevision< C extends Context = 'view' > = OmitNevers<
+	_BaseEntityRecords.PostRevision< C >
+>;
diff --git a/packages/core-data/src/entity-types/settings.ts b/packages/core-data/src/entity-types/settings.ts
index 23bd223571d39e..27e803bc030293 100644
--- a/packages/core-data/src/entity-types/settings.ts
+++ b/packages/core-data/src/entity-types/settings.ts
@@ -12,6 +12,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface Settings< C extends Context > {
 			/**
 			 * What to show on the front page
@@ -21,6 +22,10 @@ declare module './base-entity-records' {
 			 * The ID of the page that should be displayed on the front page
 			 */
 			page_on_front: number;
+			/**
+			 * The ID of the page that should display the latest posts
+			 */
+			page_for_posts: number;
 			/**
 			 * Site title.
 			 */
diff --git a/packages/core-data/src/entity-types/theme.ts b/packages/core-data/src/entity-types/theme.ts
index 04904ae2501f00..87074f674a0b6e 100644
--- a/packages/core-data/src/entity-types/theme.ts
+++ b/packages/core-data/src/entity-types/theme.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface Theme< C extends Context > {
 			/**
 			 * The theme's stylesheet. This uniquely identifies the theme.
@@ -85,6 +86,10 @@ declare module './base-entity-records' {
 			 * Whether posts and comments RSS feed links are added to head.
 			 */
 			'automatic-feed-links': boolean;
+			/**
+			 * Whether border settings are enabled.
+			 */
+			border: boolean;
 			/**
 			 * Custom background if defined by the theme.
 			 */
@@ -125,6 +130,10 @@ declare module './base-entity-records' {
 			 * Custom font sizes if defined by the theme.
 			 */
 			'editor-font-sizes': boolean | FontSize[];
+			/**
+			 * Custom spacing sizes if defined by the theme.
+			 */
+			'editor-spacing-sizes': boolean | SpacingSize[];
 			/**
 			 * Custom gradient presets if defined by the theme.
 			 */
@@ -141,6 +150,10 @@ declare module './base-entity-records' {
 			 * Post formats supported.
 			 */
 			formats: PostFormat[];
+			/**
+			 * Whether link colors are enabled.
+			 */
+			'link-color': boolean;
 			/**
 			 * The post types that support thumbnails or true if all post types are supported.
 			 */
@@ -204,6 +217,12 @@ declare module './base-entity-records' {
 			slug: string;
 		}
 
+		export interface SpacingSize {
+			name: string;
+			size: number;
+			slug: string;
+		}
+
 		export interface GradientPreset {
 			name: string;
 			gradient: string;
diff --git a/packages/core-data/src/entity-types/widget-type.ts b/packages/core-data/src/entity-types/widget-type.ts
index 29c47d5a9635c1..d1f0aa7f72578f 100644
--- a/packages/core-data/src/entity-types/widget-type.ts
+++ b/packages/core-data/src/entity-types/widget-type.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface WidgetType< C extends Context > {
 			/**
 			 * Unique slug identifying the widget type.
diff --git a/packages/core-data/src/entity-types/wp-template.ts b/packages/core-data/src/entity-types/wp-template.ts
index 544476bbb7f36e..70d3e40c295dcf 100644
--- a/packages/core-data/src/entity-types/wp-template.ts
+++ b/packages/core-data/src/entity-types/wp-template.ts
@@ -73,6 +73,10 @@ declare module './base-entity-records' {
 			 * Post ID.
 			 */
 			wp_id: number;
+			/**
+			 * Plugin that registered the template.
+			 */
+			plugin?: string;
 			/**
 			 * Theme file exists.
 			 */
@@ -85,6 +89,10 @@ declare module './base-entity-records' {
 			 * Whether a template is a custom template.
 			 */
 			is_custom: Record< string, string >;
+			/**
+			 * The date the template was last modified, in the site's timezone.
+			 */
+			modified: ContextualField< string, 'view' | 'edit', C >;
 		}
 	}
 }
diff --git a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
deleted file mode 100644
index bb1bf41d9e2cda..00000000000000
--- a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Filters the search by type
- *
- * @typedef { 'attachment' | 'post' | 'term' | 'post-format' } WPLinkSearchType
- */
-
-/**
- * A link with an id may be of kind post-type or taxonomy
- *
- * @typedef { 'post-type' | 'taxonomy' } WPKind
- */
-
-/**
- * @typedef WPLinkSearchOptions
- *
- * @property {boolean}          [isInitialSuggestions] Displays initial search suggestions, when true.
- * @property {WPLinkSearchType} [type]                 Filters by search type.
- * @property {string}           [subtype]              Slug of the post-type or taxonomy.
- * @property {number}           [page]                 Which page of results to return.
- * @property {number}           [perPage]              Search results per page.
- */
-
-/**
- * @typedef WPLinkSearchResult
- *
- * @property {number} id     Post or term id.
- * @property {string} url    Link url.
- * @property {string} title  Title of the link.
- * @property {string} type   The taxonomy or post type slug or type URL.
- * @property {WPKind} [kind] Link kind of post-type or taxonomy
- */
-
-/**
- * @typedef WPLinkSearchResultAugments
- *
- * @property {{kind: WPKind}} [meta]    Contains kind information.
- * @property {WPKind}         [subtype] Optional subtype if it exists.
- */
-
-/**
- * @typedef {WPLinkSearchResult & WPLinkSearchResultAugments} WPLinkSearchResultAugmented
- */
-
-/**
- * @typedef WPEditorSettings
- *
- * @property {boolean} [ disablePostFormats ] Disables post formats, when true.
- */
-
-/**
- * Fetches link suggestions from the API.
- *
- * @async
- * @param {string}              search
- * @param {WPLinkSearchOptions} [searchOptions]
- * @param {WPEditorSettings}    [settings]
- *
- * @example
- * ```js
- * import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wordpress/core-data';
- *
- * //...
- *
- * export function initialize( id, settings ) {
- *
- * settings.__experimentalFetchLinkSuggestions = (
- *     search,
- *     searchOptions
- * ) => fetchLinkSuggestions( search, searchOptions, settings );
- * ```
- * @return {Promise< WPLinkSearchResult[] >} List of search suggestions
- */
-const fetchLinkSuggestions = async (
-	search,
-	searchOptions = {},
-	settings = {}
-) => {
-	const {
-		isInitialSuggestions = false,
-		type = undefined,
-		subtype = undefined,
-		page = undefined,
-		perPage = isInitialSuggestions ? 3 : 20,
-	} = searchOptions;
-
-	const { disablePostFormats = false } = settings;
-
-	/** @type {Promise<WPLinkSearchResult>[]} */
-	const queries = [];
-
-	if ( ! type || type === 'post' ) {
-		queries.push(
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/search', {
-					search,
-					page,
-					per_page: perPage,
-					type: 'post',
-					subtype,
-				} ),
-			} )
-				.then( ( results ) => {
-					return results.map( ( result ) => {
-						return {
-							...result,
-							meta: { kind: 'post-type', subtype },
-						};
-					} );
-				} )
-				.catch( () => [] ) // Fail by returning no results.
-		);
-	}
-
-	if ( ! type || type === 'term' ) {
-		queries.push(
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/search', {
-					search,
-					page,
-					per_page: perPage,
-					type: 'term',
-					subtype,
-				} ),
-			} )
-				.then( ( results ) => {
-					return results.map( ( result ) => {
-						return {
-							...result,
-							meta: { kind: 'taxonomy', subtype },
-						};
-					} );
-				} )
-				.catch( () => [] ) // Fail by returning no results.
-		);
-	}
-
-	if ( ! disablePostFormats && ( ! type || type === 'post-format' ) ) {
-		queries.push(
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/search', {
-					search,
-					page,
-					per_page: perPage,
-					type: 'post-format',
-					subtype,
-				} ),
-			} )
-				.then( ( results ) => {
-					return results.map( ( result ) => {
-						return {
-							...result,
-							meta: { kind: 'taxonomy', subtype },
-						};
-					} );
-				} )
-				.catch( () => [] ) // Fail by returning no results.
-		);
-	}
-
-	if ( ! type || type === 'attachment' ) {
-		queries.push(
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/media', {
-					search,
-					page,
-					per_page: perPage,
-				} ),
-			} )
-				.then( ( results ) => {
-					return results.map( ( result ) => {
-						return {
-							...result,
-							meta: { kind: 'media' },
-						};
-					} );
-				} )
-				.catch( () => [] ) // Fail by returning no results.
-		);
-	}
-
-	return Promise.all( queries ).then( ( results ) => {
-		return results
-			.reduce(
-				( /** @type {WPLinkSearchResult[]} */ accumulator, current ) =>
-					accumulator.concat( current ), // Flatten list.
-				[]
-			)
-			.filter(
-				/**
-				 * @param {{ id: number }} result
-				 */
-				( result ) => {
-					return !! result.id;
-				}
-			)
-			.slice( 0, perPage )
-			.map( ( /** @type {WPLinkSearchResultAugmented} */ result ) => {
-				const isMedia = result.type === 'attachment';
-
-				return {
-					id: result.id,
-					// @ts-ignore fix when we make this a TS file
-					url: isMedia ? result.source_url : result.url,
-					title:
-						decodeEntities(
-							isMedia
-								? // @ts-ignore fix when we make this a TS file
-								  result.title.rendered
-								: result.title || ''
-						) || __( '(no title)' ),
-					type: result.subtype || result.type,
-					kind: result?.meta?.kind,
-				};
-			} );
-	} );
-};
-
-export default fetchLinkSuggestions;
diff --git a/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.ts b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.ts
new file mode 100644
index 00000000000000..29012197589035
--- /dev/null
+++ b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.ts
@@ -0,0 +1,315 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+export type SearchOptions = {
+	/**
+	 * Displays initial search suggestions, when true.
+	 */
+	isInitialSuggestions?: boolean;
+	/**
+	 * Search options for initial suggestions.
+	 */
+	initialSuggestionsSearchOptions?: Omit<
+		SearchOptions,
+		'isInitialSuggestions' | 'initialSuggestionsSearchOptions'
+	>;
+	/**
+	 * Filters by search type.
+	 */
+	type?: 'attachment' | 'post' | 'term' | 'post-format';
+	/**
+	 * Slug of the post-type or taxonomy.
+	 */
+	subtype?: string;
+	/**
+	 * Which page of results to return.
+	 */
+	page?: number;
+	/**
+	 * Search results per page.
+	 */
+	perPage?: number;
+};
+
+export type EditorSettings = {
+	/**
+	 * Disables post formats, when true.
+	 */
+	disablePostFormats?: boolean;
+};
+
+type SearchAPIResult = {
+	id: number;
+	title: string;
+	url: string;
+	type: string;
+	subtype: string;
+};
+
+type MediaAPIResult = {
+	id: number;
+	title: { rendered: string };
+	source_url: string;
+	type: string;
+};
+
+export type SearchResult = {
+	/**
+	 * Post or term id.
+	 */
+	id: number;
+	/**
+	 * Link url.
+	 */
+	url: string;
+	/**
+	 * Title of the link.
+	 */
+	title: string;
+	/**
+	 * The taxonomy or post type slug or type URL.
+	 */
+	type: string;
+	/**
+	 * Link kind of post-type or taxonomy
+	 */
+	kind?: string;
+};
+
+/**
+ * Fetches link suggestions from the WordPress API.
+ *
+ * WordPress does not support searching multiple tables at once, e.g. posts and terms, so we
+ * perform multiple queries at the same time and then merge the results together.
+ *
+ * @param search
+ * @param searchOptions
+ * @param editorSettings
+ *
+ * @example
+ * ```js
+ * import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wordpress/core-data';
+ *
+ * //...
+ *
+ * export function initialize( id, settings ) {
+ *
+ * settings.__experimentalFetchLinkSuggestions = (
+ *     search,
+ *     searchOptions
+ * ) => fetchLinkSuggestions( search, searchOptions, settings );
+ * ```
+ */
+export default async function fetchLinkSuggestions(
+	search: string,
+	searchOptions: SearchOptions = {},
+	editorSettings: EditorSettings = {}
+): Promise< SearchResult[] > {
+	const searchOptionsToUse =
+		searchOptions.isInitialSuggestions &&
+		searchOptions.initialSuggestionsSearchOptions
+			? {
+					...searchOptions,
+					...searchOptions.initialSuggestionsSearchOptions,
+			  }
+			: searchOptions;
+
+	const {
+		type,
+		subtype,
+		page,
+		perPage = searchOptions.isInitialSuggestions ? 3 : 20,
+	} = searchOptionsToUse;
+
+	const { disablePostFormats = false } = editorSettings;
+
+	const queries: Promise< SearchResult[] >[] = [];
+
+	if ( ! type || type === 'post' ) {
+		queries.push(
+			apiFetch< SearchAPIResult[] >( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					page,
+					per_page: perPage,
+					type: 'post',
+					subtype,
+				} ),
+			} )
+				.then( ( results ) => {
+					return results.map( ( result ) => {
+						return {
+							id: result.id,
+							url: result.url,
+							title:
+								decodeEntities( result.title || '' ) ||
+								__( '(no title)' ),
+							type: result.subtype || result.type,
+							kind: 'post-type',
+						};
+					} );
+				} )
+				.catch( () => [] ) // Fail by returning no results.
+		);
+	}
+
+	if ( ! type || type === 'term' ) {
+		queries.push(
+			apiFetch< SearchAPIResult[] >( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					page,
+					per_page: perPage,
+					type: 'term',
+					subtype,
+				} ),
+			} )
+				.then( ( results ) => {
+					return results.map( ( result ) => {
+						return {
+							id: result.id,
+							url: result.url,
+							title:
+								decodeEntities( result.title || '' ) ||
+								__( '(no title)' ),
+							type: result.subtype || result.type,
+							kind: 'taxonomy',
+						};
+					} );
+				} )
+				.catch( () => [] ) // Fail by returning no results.
+		);
+	}
+
+	if ( ! disablePostFormats && ( ! type || type === 'post-format' ) ) {
+		queries.push(
+			apiFetch< SearchAPIResult[] >( {
+				path: addQueryArgs( '/wp/v2/search', {
+					search,
+					page,
+					per_page: perPage,
+					type: 'post-format',
+					subtype,
+				} ),
+			} )
+				.then( ( results ) => {
+					return results.map( ( result ) => {
+						return {
+							id: result.id,
+							url: result.url,
+							title:
+								decodeEntities( result.title || '' ) ||
+								__( '(no title)' ),
+							type: result.subtype || result.type,
+							kind: 'taxonomy',
+						};
+					} );
+				} )
+				.catch( () => [] ) // Fail by returning no results.
+		);
+	}
+
+	if ( ! type || type === 'attachment' ) {
+		queries.push(
+			apiFetch< MediaAPIResult[] >( {
+				path: addQueryArgs( '/wp/v2/media', {
+					search,
+					page,
+					per_page: perPage,
+				} ),
+			} )
+				.then( ( results ) => {
+					return results.map( ( result ) => {
+						return {
+							id: result.id,
+							url: result.source_url,
+							title:
+								decodeEntities( result.title.rendered || '' ) ||
+								__( '(no title)' ),
+							type: result.type,
+							kind: 'media',
+						};
+					} );
+				} )
+				.catch( () => [] ) // Fail by returning no results.
+		);
+	}
+
+	const responses = await Promise.all( queries );
+
+	let results = responses.flat();
+	results = results.filter( ( result ) => !! result.id );
+	results = sortResults( results, search );
+	results = results.slice( 0, perPage );
+	return results;
+}
+
+/**
+ * Sort search results by relevance to the given query.
+ *
+ * Sorting is necessary as we're querying multiple endpoints and merging the results. For example
+ * a taxonomy title might be more relevant than a post title, but by default taxonomy results will
+ * be ordered after all the (potentially irrelevant) post results.
+ *
+ * We sort by scoring each result, where the score is the number of tokens in the title that are
+ * also in the search query, divided by the total number of tokens in the title. This gives us a
+ * score between 0 and 1, where 1 is a perfect match.
+ *
+ * @param results
+ * @param search
+ */
+export function sortResults( results: SearchResult[], search: string ) {
+	const searchTokens = tokenize( search );
+
+	const scores = {};
+	for ( const result of results ) {
+		if ( result.title ) {
+			const titleTokens = tokenize( result.title );
+			const exactMatchingTokens = titleTokens.filter( ( titleToken ) =>
+				searchTokens.some(
+					( searchToken ) => titleToken === searchToken
+				)
+			);
+			const subMatchingTokens = titleTokens.filter( ( titleToken ) =>
+				searchTokens.some(
+					( searchToken ) =>
+						titleToken !== searchToken &&
+						titleToken.includes( searchToken )
+				)
+			);
+
+			// The score is a combination of exact matches and sub-matches.
+			// More weight is given to exact matches, as they are more relevant (e.g. "cat" vs "caterpillar").
+			// Diving by the total number of tokens in the title normalizes the score and skews
+			// the results towards shorter titles.
+			const exactMatchScore =
+				( exactMatchingTokens.length / titleTokens.length ) * 10;
+
+			const subMatchScore = subMatchingTokens.length / titleTokens.length;
+
+			scores[ result.id ] = exactMatchScore + subMatchScore;
+		} else {
+			scores[ result.id ] = 0;
+		}
+	}
+
+	return results.sort( ( a, b ) => scores[ b.id ] - scores[ a.id ] );
+}
+
+/**
+ * Turns text into an array of tokens, with whitespace and punctuation removed.
+ *
+ * For example, `"I'm having a ball."` becomes `[ "im", "having", "a", "ball" ]`.
+ *
+ * @param text
+ */
+export function tokenize( text: string ): string[] {
+	// \p{L} matches any kind of letter from any language.
+	// \p{N} matches any kind of numeric character.
+	return text.toLowerCase().match( /[\p{L}\p{N}]+/gu ) || [];
+}
diff --git a/packages/core-data/src/fetch/index.js b/packages/core-data/src/fetch/index.js
index 8d4d28e3b0db82..de45f3399dac87 100644
--- a/packages/core-data/src/fetch/index.js
+++ b/packages/core-data/src/fetch/index.js
@@ -1,2 +1,29 @@
+/**
+ * External dependencies
+ */
+import { camelCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
 export { default as __experimentalFetchLinkSuggestions } from './__experimental-fetch-link-suggestions';
 export { default as __experimentalFetchUrlData } from './__experimental-fetch-url-data';
+
+export async function fetchBlockPatterns() {
+	const restPatterns = await apiFetch( {
+		path: '/wp/v2/block-patterns/patterns',
+	} );
+	if ( ! restPatterns ) {
+		return [];
+	}
+	return restPatterns.map( ( pattern ) =>
+		Object.fromEntries(
+			Object.entries( pattern ).map( ( [ key, value ] ) => [
+				camelCase( key ),
+				value,
+			] )
+		)
+	);
+}
diff --git a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
index 23e889344c0e45..ad0014ff86ecb8 100644
--- a/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
+++ b/packages/core-data/src/fetch/test/__experimental-fetch-link-suggestions.js
@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import fetchLinkSuggestions from '../__experimental-fetch-link-suggestions';
+import {
+	default as fetchLinkSuggestions,
+	sortResults,
+	tokenize,
+} from '../__experimental-fetch-link-suggestions';
 
 jest.mock( '@wordpress/api-fetch', () =>
 	jest.fn( ( { path } ) => {
@@ -231,22 +235,73 @@ describe( 'fetchLinkSuggestions', () => {
 			] )
 		);
 	} );
-	it( 'initial search suggestions limits results', () => {
-		return fetchLinkSuggestions( '', {
-			type: 'post',
-			subtype: 'page',
-			isInitialSuggestions: true,
-		} ).then( ( suggestions ) =>
-			expect( suggestions ).toEqual( [
-				{
-					id: 11,
-					title: 'Limit Case',
-					url: 'http://wordpress.local/limit-case/',
-					type: 'page',
-					kind: 'post-type',
+	describe( 'Initial search suggestions', () => {
+		it( 'initial search suggestions limits results', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'post',
+				subtype: 'page',
+				isInitialSuggestions: true,
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 11,
+						title: 'Limit Case',
+						url: 'http://wordpress.local/limit-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
+
+		it( 'should allow custom search options for initial suggestions', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'term',
+				subtype: 'category',
+				page: 11,
+				isInitialSuggestions: true,
+				initialSuggestionsSearchOptions: {
+					type: 'post',
+					subtype: 'page',
+					perPage: 20,
+					page: 11,
 				},
-			] )
-		);
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 22,
+						title: 'Page Case',
+						url: 'http://wordpress.local/page-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
+
+		it( 'should default any missing initial search options to those from the main search options', () => {
+			return fetchLinkSuggestions( '', {
+				type: 'post',
+				subtype: 'page',
+				page: 11,
+				perPage: 20,
+				isInitialSuggestions: true,
+				initialSuggestionsSearchOptions: {
+					// intentionally missing.
+					// expected to default to those from the main search options.
+				},
+			} ).then( ( suggestions ) =>
+				expect( suggestions ).toEqual( [
+					{
+						id: 22,
+						title: 'Page Case',
+						url: 'http://wordpress.local/page-case/',
+						type: 'page',
+						kind: 'post-type',
+					},
+				] )
+			);
+		} );
 	} );
 	it( 'allows searching from a page', () => {
 		return fetchLinkSuggestions( '', {
@@ -266,3 +321,130 @@ describe( 'fetchLinkSuggestions', () => {
 		);
 	} );
 } );
+
+describe( 'sortResults', () => {
+	it( 'returns empty array for empty results', () => {
+		expect( sortResults( [], '' ) ).toEqual( [] );
+	} );
+
+	it( 'orders results', () => {
+		const results = [
+			{
+				id: 1,
+				title: 'How to get from Stockholm to Helsinki by boat',
+				url: 'http://wordpress.local/stockholm-helsinki-boat/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 2,
+				title: 'A day trip from Stockholm to Swedish countryside towns',
+				url: 'http://wordpress.local/day-trip-stockholm/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 3,
+				title: 'The art of packing lightly: How to travel with just a cabin bag',
+				url: 'http://wordpress.local/packing-lightly/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 4,
+				title: 'Tips for travel with a young baby',
+				url: 'http://wordpress.local/young-baby-tips/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 5,
+				title: '', // Test that empty titles don't cause an error.
+				url: 'http://wordpress.local/420/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 6,
+				title: 'City Guides',
+				url: 'http://wordpress.local/city-guides/',
+				type: 'category',
+				kind: 'taxonomy',
+			},
+			{
+				id: 7,
+				title: 'Travel Tips',
+				url: 'http://wordpress.local/travel-tips/',
+				type: 'category',
+				kind: 'taxonomy',
+			},
+		];
+		const order = sortResults( results, 'travel tips' ).map(
+			( result ) => result.id
+		);
+		expect( order ).toEqual( [
+			7, // exact match
+			4, // contains: travel, tips
+			3, // contains: travel
+			// same order as input:
+			1,
+			2,
+			5,
+			6,
+		] );
+	} );
+
+	it( 'orders results to prefer direct matches over sub matches', () => {
+		const results = [
+			{
+				id: 1,
+				title: 'News',
+				url: 'http://wordpress.local/news/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 2,
+				title: 'Newspaper',
+				url: 'http://wordpress.local/newspaper/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 3,
+				title: 'News Flash News',
+				url: 'http://wordpress.local/news-flash-news/',
+				type: 'page',
+				kind: 'post-type',
+			},
+			{
+				id: 4,
+				title: 'News',
+				url: 'http://wordpress.local/news-2/',
+				type: 'page',
+				kind: 'post-type',
+			},
+		];
+		const order = sortResults( results, 'News' ).map(
+			( result ) => result.id
+		);
+		expect( order ).toEqual( [ 1, 4, 3, 2 ] );
+	} );
+} );
+
+describe( 'tokenize', () => {
+	it( 'returns empty array for empty string', () => {
+		expect( tokenize( '' ) ).toEqual( [] );
+	} );
+
+	it( 'tokenizes a string', () => {
+		expect( tokenize( 'Hello, world!' ) ).toEqual( [ 'hello', 'world' ] );
+	} );
+
+	it( 'tokenizes non latin languages', () => {
+		expect( tokenize( 'こんにちは、世界！' ) ).toEqual( [
+			'こんにちは',
+			'世界',
+		] );
+	} );
+} );
diff --git a/packages/core-data/src/fetch/test/__experimental-fetch-url-data.js b/packages/core-data/src/fetch/test/__experimental-fetch-url-data.js
index 8eb985cb1aa5da..88b53c4f19f72d 100644
--- a/packages/core-data/src/fetch/test/__experimental-fetch-url-data.js
+++ b/packages/core-data/src/fetch/test/__experimental-fetch-url-data.js
@@ -29,7 +29,7 @@ describe( 'fetchUrlData', () => {
 				fetchUrlData( 'https://www.wordpress.org' )
 			).resolves.toEqual( data );
 
-			expect( apiFetch ).toBeCalledTimes( 1 );
+			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 		} );
 
 		it( 'rejects with error upon fetch failure', async () => {
@@ -49,7 +49,7 @@ describe( 'fetchUrlData', () => {
 				method: 'POST',
 			} );
 
-			expect( apiFetch ).toBeCalledTimes( 1 );
+			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 
 			const argsPassedToFetchApi = apiFetch.mock.calls[ 0 ][ 0 ];
 
@@ -74,7 +74,7 @@ describe( 'fetchUrlData', () => {
 			apiFetch.mockReturnValueOnce( Promise.resolve( data ) );
 
 			await expect( fetchUrlData( targetUrl ) ).resolves.toEqual( data );
-			expect( apiFetch ).toBeCalledTimes( 1 );
+			expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 
 			// Allow us to reassert on calls without it being polluted by first fetch
 			// but retains the mock implementation from earlier.
@@ -84,7 +84,7 @@ describe( 'fetchUrlData', () => {
 			await expect( fetchUrlData( targetUrl ) ).resolves.toEqual( data );
 
 			// Should now be in cache so no need to refetch from API.
-			expect( apiFetch ).toBeCalledTimes( 0 );
+			expect( apiFetch ).toHaveBeenCalledTimes( 0 );
 		} );
 
 		it( 'does not cache failed requests', async () => {
@@ -109,7 +109,7 @@ describe( 'fetchUrlData', () => {
 			// with a new fetch.
 			await expect( fetchUrlData( targetUrl ) ).resolves.toEqual( data );
 
-			expect( apiFetch ).toBeCalledTimes( 2 );
+			expect( apiFetch ).toHaveBeenCalledTimes( 2 );
 		} );
 	} );
 
@@ -117,7 +117,7 @@ describe( 'fetchUrlData', () => {
 		it.each( [ '#internal-link' ] )(
 			'errors when an invalid URL is passed',
 			async ( targetUrl ) => {
-				expect( apiFetch ).toBeCalledTimes( 0 );
+				expect( apiFetch ).toHaveBeenCalledTimes( 0 );
 
 				await expect( fetchUrlData( targetUrl ) ).rejects.toEqual(
 					expect.stringContaining(
@@ -134,7 +134,7 @@ describe( 'fetchUrlData', () => {
 		] )(
 			'errors when a non-http protocol (%s) is passed as part of URL',
 			async ( targetUrl ) => {
-				expect( apiFetch ).toBeCalledTimes( 0 );
+				expect( apiFetch ).toHaveBeenCalledTimes( 0 );
 
 				await expect( fetchUrlData( targetUrl ) ).rejects.toEqual(
 					expect.stringContaining(
diff --git a/packages/core-data/src/footnotes/get-footnotes-order.js b/packages/core-data/src/footnotes/get-footnotes-order.js
new file mode 100644
index 00000000000000..fcaeae660ec1aa
--- /dev/null
+++ b/packages/core-data/src/footnotes/get-footnotes-order.js
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies
+ */
+import getRichTextValuesCached from './get-rich-text-values-cached';
+
+const cache = new WeakMap();
+
+function getBlockFootnotesOrder( block ) {
+	if ( ! cache.has( block ) ) {
+		const order = [];
+		for ( const value of getRichTextValuesCached( block ) ) {
+			if ( ! value ) {
+				continue;
+			}
+
+			// replacements is a sparse array, use forEach to skip empty slots.
+			value.replacements.forEach( ( { type, attributes } ) => {
+				if ( type === 'core/footnote' ) {
+					order.push( attributes[ 'data-fn' ] );
+				}
+			} );
+		}
+		cache.set( block, order );
+	}
+
+	return cache.get( block );
+}
+
+export default function getFootnotesOrder( blocks ) {
+	// We can only separate getting order from blocks at the root level. For
+	// deeper inner blocks, this will not work since it's possible to have both
+	// inner blocks and block attributes, so order needs to be computed from the
+	// Edit functions as a whole.
+	return blocks.flatMap( getBlockFootnotesOrder );
+}
diff --git a/packages/core-data/src/footnotes/get-rich-text-values-cached.js b/packages/core-data/src/footnotes/get-rich-text-values-cached.js
new file mode 100644
index 00000000000000..a5c2d258108612
--- /dev/null
+++ b/packages/core-data/src/footnotes/get-rich-text-values-cached.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+// TODO: The following line should have been:
+//
+//   const unlockedApis = unlock( blockEditorPrivateApis );
+//
+// But there are hidden circular dependencies in RNMobile code, specifically in
+// certain native components in the `components` package that depend on
+// `block-editor`. What follows is a workaround that defers the `unlock` call
+// to prevent native code from failing.
+//
+// Fix once https://github.com/WordPress/gutenberg/issues/52692 is closed.
+let unlockedApis;
+
+const cache = new WeakMap();
+
+export default function getRichTextValuesCached( block ) {
+	if ( ! unlockedApis ) {
+		unlockedApis = unlock( blockEditorPrivateApis );
+	}
+
+	if ( ! cache.has( block ) ) {
+		const values = unlockedApis.getRichTextValues( [ block ] );
+		cache.set( block, values );
+	}
+	return cache.get( block );
+}
diff --git a/packages/core-data/src/footnotes/index.js b/packages/core-data/src/footnotes/index.js
new file mode 100644
index 00000000000000..3c267ae6f92cf2
--- /dev/null
+++ b/packages/core-data/src/footnotes/index.js
@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import { RichTextData, create, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import getFootnotesOrder from './get-footnotes-order';
+
+let oldFootnotes = {};
+
+export function updateFootnotesFromMeta( blocks, meta ) {
+	const output = { blocks };
+	if ( ! meta ) {
+		return output;
+	}
+
+	// If meta.footnotes is empty, it means the meta is not registered.
+	if ( meta.footnotes === undefined ) {
+		return output;
+	}
+
+	const newOrder = getFootnotesOrder( blocks );
+
+	const footnotes = meta.footnotes ? JSON.parse( meta.footnotes ) : [];
+	const currentOrder = footnotes.map( ( fn ) => fn.id );
+
+	if ( currentOrder.join( '' ) === newOrder.join( '' ) ) {
+		return output;
+	}
+
+	const newFootnotes = newOrder.map(
+		( fnId ) =>
+			footnotes.find( ( fn ) => fn.id === fnId ) ||
+			oldFootnotes[ fnId ] || {
+				id: fnId,
+				content: '',
+			}
+	);
+
+	function updateAttributes( attributes ) {
+		// Only attempt to update attributes, if attributes is an object.
+		if (
+			! attributes ||
+			Array.isArray( attributes ) ||
+			typeof attributes !== 'object'
+		) {
+			return attributes;
+		}
+
+		attributes = { ...attributes };
+
+		for ( const key in attributes ) {
+			const value = attributes[ key ];
+
+			if ( Array.isArray( value ) ) {
+				attributes[ key ] = value.map( updateAttributes );
+				continue;
+			}
+
+			// To do, remove support for string values?
+			if (
+				typeof value !== 'string' &&
+				! ( value instanceof RichTextData )
+			) {
+				continue;
+			}
+
+			const richTextValue =
+				typeof value === 'string'
+					? RichTextData.fromHTMLString( value )
+					: new RichTextData( value );
+
+			let hasFootnotes = false;
+
+			richTextValue.replacements.forEach( ( replacement ) => {
+				if ( replacement.type === 'core/footnote' ) {
+					const id = replacement.attributes[ 'data-fn' ];
+					const index = newOrder.indexOf( id );
+					// The innerHTML contains the count wrapped in a link.
+					const countValue = create( {
+						html: replacement.innerHTML,
+					} );
+					countValue.text = String( index + 1 );
+					countValue.formats = Array.from(
+						{ length: countValue.text.length },
+						() => countValue.formats[ 0 ]
+					);
+					countValue.replacements = Array.from(
+						{ length: countValue.text.length },
+						() => countValue.replacements[ 0 ]
+					);
+					replacement.innerHTML = toHTMLString( {
+						value: countValue,
+					} );
+					hasFootnotes = true;
+				}
+			} );
+
+			if ( hasFootnotes ) {
+				attributes[ key ] =
+					typeof value === 'string'
+						? richTextValue.toHTMLString()
+						: richTextValue;
+			}
+		}
+
+		return attributes;
+	}
+
+	function updateBlocksAttributes( __blocks ) {
+		return __blocks.map( ( block ) => {
+			return {
+				...block,
+				attributes: updateAttributes( block.attributes ),
+				innerBlocks: updateBlocksAttributes( block.innerBlocks ),
+			};
+		} );
+	}
+
+	// We need to go through all block attributes deeply and update the
+	// footnote anchor numbering (textContent) to match the new order.
+	const newBlocks = updateBlocksAttributes( blocks );
+
+	oldFootnotes = {
+		...oldFootnotes,
+		...footnotes.reduce( ( acc, fn ) => {
+			if ( ! newOrder.includes( fn.id ) ) {
+				acc[ fn.id ] = fn;
+			}
+			return acc;
+		}, {} ),
+	};
+
+	return {
+		meta: {
+			...meta,
+			footnotes: JSON.stringify( newFootnotes ),
+		},
+		blocks: newBlocks,
+	};
+}
diff --git a/packages/core-data/src/hooks/index.ts b/packages/core-data/src/hooks/index.ts
index a12269616b2f0c..8e5210acdd448c 100644
--- a/packages/core-data/src/hooks/index.ts
+++ b/packages/core-data/src/hooks/index.ts
@@ -10,3 +10,6 @@ export {
 	default as useResourcePermissions,
 	__experimentalUseResourcePermissions,
 } from './use-resource-permissions';
+export { default as useEntityBlockEditor } from './use-entity-block-editor';
+export { default as useEntityId } from './use-entity-id';
+export { default as useEntityProp } from './use-entity-prop';
diff --git a/packages/core-data/src/hooks/test/use-entity-record.js b/packages/core-data/src/hooks/test/use-entity-record.js
index 6bd20f3494b089..ac2b547cd9c61a 100644
--- a/packages/core-data/src/hooks/test/use-entity-record.js
+++ b/packages/core-data/src/hooks/test/use-entity-record.js
@@ -9,7 +9,7 @@ jest.mock( '@wordpress/api-fetch' );
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -21,22 +21,17 @@ describe( 'useEntityRecord', () => {
 	let registry;
 
 	beforeEach( () => {
-		jest.useFakeTimers();
-
 		registry = createRegistry();
 		registry.register( coreDataStore );
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
+		triggerFetch.mockReset();
 	} );
 
 	const TEST_RECORD = { id: 1, hello: 'world' };
+	const TEST_RECORD_RESPONSE = { json: () => Promise.resolve( TEST_RECORD ) };
 
 	it( 'resolves the entity record when missing from the state', async () => {
 		// Provide response
-		triggerFetch.mockImplementation( () => TEST_RECORD );
+		triggerFetch.mockImplementation( () => TEST_RECORD_RESPONSE );
 
 		let data;
 		const TestComponent = () => {
@@ -51,31 +46,34 @@ describe( 'useEntityRecord', () => {
 
 		expect( data ).toEqual( {
 			edit: expect.any( Function ),
-			editedRecord: {},
+			editedRecord: false,
 			hasEdits: false,
+			edits: {},
 			record: undefined,
 			save: expect.any( Function ),
 			hasResolved: false,
+			hasStarted: false,
 			isResolving: false,
 			status: 'IDLE',
 		} );
 
-		await act( async () => {
-			jest.advanceTimersByTime( 1 );
-		} );
-
 		// Fetch request should have been issued
-		expect( triggerFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/widgets/1?context=edit',
-		} );
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: '/wp/v2/widgets/1?context=edit',
+				parse: false,
+			} )
+		);
 
 		expect( data ).toEqual( {
 			edit: expect.any( Function ),
 			editedRecord: { hello: 'world', id: 1 },
 			hasEdits: false,
+			edits: {},
 			record: { hello: 'world', id: 1 },
 			save: expect.any( Function ),
 			hasResolved: true,
+			hasStarted: true,
 			isResolving: false,
 			status: 'SUCCESS',
 		} );
@@ -83,7 +81,7 @@ describe( 'useEntityRecord', () => {
 
 	it( 'applies edits to the entity record', async () => {
 		// Provide response
-		triggerFetch.mockImplementation( () => TEST_RECORD );
+		triggerFetch.mockImplementation( () => TEST_RECORD_RESPONSE );
 
 		let widget;
 		const TestComponent = () => {
@@ -96,28 +94,76 @@ describe( 'useEntityRecord', () => {
 			</RegistryProvider>
 		);
 
+		await waitFor( () =>
+			expect( widget ).toEqual( {
+				edit: expect.any( Function ),
+				editedRecord: { hello: 'world', id: 1 },
+				hasEdits: false,
+				edits: {},
+				record: { hello: 'world', id: 1 },
+				save: expect.any( Function ),
+				hasResolved: true,
+				hasStarted: true,
+				isResolving: false,
+				status: 'SUCCESS',
+			} )
+		);
+
 		await act( async () => {
-			jest.advanceTimersByTime( 1 );
+			widget.edit( { hello: 'foo' } );
 		} );
 
-		expect( widget ).toEqual( {
+		await waitFor( () => expect( widget.hasEdits ).toEqual( true ) );
+
+		expect( widget.record ).toEqual( { hello: 'world', id: 1 } );
+		expect( widget.editedRecord ).toEqual( { hello: 'foo', id: 1 } );
+		expect( widget.edits ).toEqual( { hello: 'foo' } );
+	} );
+
+	it( 'does not resolve entity record when disabled via options', async () => {
+		triggerFetch.mockImplementation( () => TEST_RECORD_RESPONSE );
+
+		let data;
+		const TestComponent = ( { enabled } ) => {
+			data = useEntityRecord( 'root', 'widget', 1, { enabled } );
+			return <div />;
+		};
+		const UI = ( { enabled } ) => (
+			<RegistryProvider value={ registry }>
+				<TestComponent enabled={ enabled } />
+			</RegistryProvider>
+		);
+
+		const { rerender } = render( <UI enabled /> );
+
+		// A minimum delay for a fetch request. The same delay is used again as a control.
+		await act(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 0 ) )
+		);
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: '/wp/v2/widgets/1?context=edit',
+				parse: false,
+			} )
+		);
+		// Clear the fetch call history.
+		triggerFetch.mockReset();
+
+		rerender( <UI enabled={ false } /> );
+
+		expect( data ).toEqual( {
 			edit: expect.any( Function ),
-			editedRecord: { hello: 'world', id: 1 },
+			editedRecord: {},
 			hasEdits: false,
-			record: { hello: 'world', id: 1 },
+			edits: {},
+			record: null,
 			save: expect.any( Function ),
-			hasResolved: true,
-			isResolving: false,
-			status: 'SUCCESS',
 		} );
 
-		await act( async () => {
-			widget.edit( { hello: 'foo' } );
-			jest.advanceTimersByTime( 1 );
-		} );
-
-		expect( widget.hasEdits ).toEqual( true );
-		expect( widget.record ).toEqual( { hello: 'world', id: 1 } );
-		expect( widget.editedRecord ).toEqual( { hello: 'foo', id: 1 } );
+		// The same delay.
+		await act(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 0 ) )
+		);
+		expect( triggerFetch ).toHaveBeenCalledTimes( 0 );
 	} );
 } );
diff --git a/packages/core-data/src/hooks/test/use-entity-records.js b/packages/core-data/src/hooks/test/use-entity-records.js
index e944d260ff574f..f1d69e85a051dc 100644
--- a/packages/core-data/src/hooks/test/use-entity-records.js
+++ b/packages/core-data/src/hooks/test/use-entity-records.js
@@ -9,7 +9,7 @@ jest.mock( '@wordpress/api-fetch' );
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -21,17 +21,10 @@ describe( 'useEntityRecords', () => {
 	let registry;
 
 	beforeEach( () => {
-		jest.useFakeTimers();
-
 		registry = createRegistry();
 		registry.register( coreDataStore );
 	} );
 
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	const TEST_RECORDS = [
 		{ id: 1, hello: 'world1' },
 		{ id: 2, hello: 'world2' },
@@ -56,24 +49,28 @@ describe( 'useEntityRecords', () => {
 		expect( data ).toEqual( {
 			records: null,
 			hasResolved: false,
+			hasStarted: false,
 			isResolving: false,
 			status: 'IDLE',
-		} );
-
-		await act( async () => {
-			jest.advanceTimersByTime( 1 );
+			totalItems: null,
+			totalPages: null,
 		} );
 
 		// Fetch request should have been issued
-		expect( triggerFetch ).toHaveBeenCalledWith( {
-			path: '/wp/v2/widgets?context=edit&status=draft',
-		} );
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: '/wp/v2/widgets?context=edit&status=draft',
+			} )
+		);
 
 		expect( data ).toEqual( {
 			records: TEST_RECORDS,
 			hasResolved: true,
+			hasStarted: true,
 			isResolving: false,
 			status: 'SUCCESS',
+			totalItems: 3,
+			totalPages: 1,
 		} );
 	} );
 } );
diff --git a/packages/core-data/src/hooks/test/use-query-select.js b/packages/core-data/src/hooks/test/use-query-select.js
index 217a76c57f533e..894851f79a9c78 100644
--- a/packages/core-data/src/hooks/test/use-query-select.js
+++ b/packages/core-data/src/hooks/test/use-query-select.js
@@ -10,7 +10,7 @@ import {
 /**
  * External dependencies
  */
-import { act, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -21,8 +21,6 @@ describe( 'useQuerySelect', () => {
 	let registry;
 
 	beforeEach( () => {
-		jest.useFakeTimers();
-
 		registry = createRegistry();
 		registry.registerStore( 'testStore', {
 			reducer: () => ( { foo: 'bar' } ),
@@ -33,11 +31,6 @@ describe( 'useQuerySelect', () => {
 		} );
 	} );
 
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	const getTestComponent = ( mapSelectSpy, dependencyKey ) => ( props ) => {
 		const dependencies = props[ dependencyKey ];
 		mapSelectSpy.mockImplementation( ( select ) => ( {
@@ -57,11 +50,9 @@ describe( 'useQuerySelect', () => {
 				<TestComponent keyName="foo" />
 			</RegistryProvider>
 		);
-		// 2 times expected
-		// - 1 for initial mount
-		// - 1 for after mount before subscription set.
-		expect( selectSpy ).toHaveBeenCalledTimes( 2 );
-		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+
+		expect( selectSpy ).toHaveBeenCalledTimes( 1 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 		// ensure expected state was rendered
 		expect( screen.getByText( 'bar' ) ).toBeInTheDocument();
@@ -88,10 +79,9 @@ describe( 'useQuerySelect', () => {
 		);
 
 		// ensure the selectors were properly memoized
-		expect( selectors ).toHaveLength( 4 );
+		expect( selectors ).toHaveLength( 2 );
 		expect( selectors[ 0 ] ).toHaveProperty( 'testSelector' );
 		expect( selectors[ 0 ] ).toBe( selectors[ 1 ] );
-		expect( selectors[ 1 ] ).toBe( selectors[ 2 ] );
 
 		// Re-render
 		render(
@@ -101,9 +91,10 @@ describe( 'useQuerySelect', () => {
 		);
 
 		// ensure we still got the memoized results after re-rendering
-		expect( selectors ).toHaveLength( 8 );
-		expect( selectors[ 3 ] ).toHaveProperty( 'testSelector' );
-		expect( selectors[ 5 ] ).toBe( selectors[ 6 ] );
+		expect( selectors ).toHaveLength( 4 );
+		expect( selectors[ 2 ] ).toHaveProperty( 'testSelector' );
+		expect( selectors[ 1 ] ).toBe( selectors[ 2 ] );
+		expect( selectors[ 2 ] ).toBe( selectors[ 3 ] );
 	} );
 
 	it( 'returns the expected "response" details – no resolvers and arguments', () => {
@@ -125,6 +116,7 @@ describe( 'useQuerySelect', () => {
 			data: 'bar',
 			isResolving: false,
 			hasResolved: false,
+			hasStarted: false,
 			status: 'IDLE',
 		} );
 	} );
@@ -174,24 +166,25 @@ describe( 'useQuerySelect', () => {
 			data: 10,
 			isResolving: false,
 			hasResolved: false,
+			hasStarted: false,
 			status: 'IDLE',
 		} );
 
-		await act( async () => {
-			jest.advanceTimersToNextTimer();
-		} );
-
 		// Re-render, expect resolved data
 		render(
 			<RegistryProvider value={ registry }>
 				<TestComponent />
 			</RegistryProvider>
 		);
-		expect( querySelectData ).toEqual( {
-			data: 15,
-			isResolving: false,
-			hasResolved: true,
-			status: 'SUCCESS',
-		} );
+
+		await waitFor( () =>
+			expect( querySelectData ).toEqual( {
+				data: 15,
+				isResolving: false,
+				hasResolved: true,
+				hasStarted: true,
+				status: 'SUCCESS',
+			} )
+		);
 	} );
 } );
diff --git a/packages/core-data/src/hooks/test/use-resource-permissions.js b/packages/core-data/src/hooks/test/use-resource-permissions.js
index e36bf61bd1d7f1..b1c43b7947874d 100644
--- a/packages/core-data/src/hooks/test/use-resource-permissions.js
+++ b/packages/core-data/src/hooks/test/use-resource-permissions.js
@@ -9,7 +9,7 @@ jest.mock( '@wordpress/api-fetch' );
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -20,25 +20,16 @@ import useResourcePermissions from '../use-resource-permissions';
 describe( 'useResourcePermissions', () => {
 	let registry;
 	beforeEach( () => {
-		jest.useFakeTimers();
-
 		registry = createRegistry();
 		registry.register( coreDataStore );
 
 		triggerFetch.mockImplementation( () => ( {
-			headers: {
-				get: () => ( {
-					allow: 'POST',
-				} ),
-			},
+			headers: new Headers( {
+				allow: 'POST',
+			} ),
 		} ) );
 	} );
 
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	it( 'retrieves the relevant permissions for a key-less resource', async () => {
 		let data;
 		const TestComponent = () => {
@@ -58,18 +49,15 @@ describe( 'useResourcePermissions', () => {
 			canRead: false,
 		} );
 
-		// Required to make sure no updates happen outside of act()
-		await act( async () => {
-			jest.advanceTimersByTime( 1 );
-		} );
-
-		expect( data ).toEqual( {
-			status: 'SUCCESS',
-			isResolving: false,
-			hasResolved: true,
-			canCreate: true,
-			canRead: false,
-		} );
+		await waitFor( () =>
+			expect( data ).toEqual( {
+				status: 'SUCCESS',
+				isResolving: false,
+				hasResolved: true,
+				canCreate: true,
+				canRead: false,
+			} )
+		);
 	} );
 
 	it( 'retrieves the relevant permissions for a resource with a key', async () => {
@@ -93,19 +81,109 @@ describe( 'useResourcePermissions', () => {
 			canDelete: false,
 		} );
 
-		// Required to make sure no updates happen outside of act()
-		await act( async () => {
-			jest.advanceTimersByTime( 1 );
+		await waitFor( () =>
+			expect( data ).toEqual( {
+				status: 'SUCCESS',
+				isResolving: false,
+				hasResolved: true,
+				canCreate: true,
+				canRead: false,
+				canUpdate: false,
+				canDelete: false,
+			} )
+		);
+	} );
+
+	it( 'retrieves the relevant permissions for a id-less entity', async () => {
+		let data;
+		const TestComponent = () => {
+			data = useResourcePermissions( {
+				kind: 'root',
+				name: 'media',
+			} );
+			return <div />;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+		expect( data ).toEqual( {
+			status: 'IDLE',
+			isResolving: false,
+			hasResolved: false,
+			canCreate: false,
+			canRead: false,
 		} );
 
+		await waitFor( () =>
+			expect( data ).toEqual( {
+				status: 'SUCCESS',
+				isResolving: false,
+				hasResolved: true,
+				canCreate: true,
+				canRead: false,
+			} )
+		);
+	} );
+
+	it( 'retrieves the relevant permissions for an entity', async () => {
+		let data;
+		const TestComponent = () => {
+			data = useResourcePermissions( {
+				kind: 'root',
+				name: 'media',
+				id: 1,
+			} );
+			return <div />;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
 		expect( data ).toEqual( {
-			status: 'SUCCESS',
+			status: 'IDLE',
 			isResolving: false,
-			hasResolved: true,
-			canCreate: true,
+			hasResolved: false,
+			canCreate: false,
 			canRead: false,
 			canUpdate: false,
 			canDelete: false,
 		} );
+
+		await waitFor( () =>
+			expect( data ).toEqual( {
+				status: 'SUCCESS',
+				isResolving: false,
+				hasResolved: true,
+				canCreate: true,
+				canRead: false,
+				canUpdate: false,
+				canDelete: false,
+			} )
+		);
+	} );
+
+	it( 'should warn when called with incorrect arguments signature', () => {
+		const TestComponent = () => {
+			useResourcePermissions(
+				{
+					kind: 'root',
+					name: 'media',
+				},
+				1
+			);
+			return null;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		expect( console ).toHaveWarnedWith(
+			`When 'resource' is an entity object, passing 'id' as a separate argument isn't supported.`
+		);
 	} );
 } );
diff --git a/packages/core-data/src/hooks/use-entity-block-editor.js b/packages/core-data/src/hooks/use-entity-block-editor.js
new file mode 100644
index 00000000000000..df213898659e7d
--- /dev/null
+++ b/packages/core-data/src/hooks/use-entity-block-editor.js
@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../name';
+import useEntityId from './use-entity-id';
+import { updateFootnotesFromMeta } from '../footnotes';
+
+const EMPTY_ARRAY = [];
+const parsedBlocksCache = new WeakMap();
+
+/**
+ * Hook that returns block content getters and setters for
+ * the nearest provided entity of the specified type.
+ *
+ * The return value has the shape `[ blocks, onInput, onChange ]`.
+ * `onInput` is for block changes that don't create undo levels
+ * or dirty the post, non-persistent changes, and `onChange` is for
+ * persistent changes. They map directly to the props of a
+ * `BlockEditorProvider` and are intended to be used with it,
+ * or similar components or hooks.
+ *
+ * @param {string} kind         The entity kind.
+ * @param {string} name         The entity name.
+ * @param {Object} options
+ * @param {string} [options.id] An entity ID to use instead of the context-provided one.
+ *
+ * @return {[unknown[], Function, Function]} The block array and setters.
+ */
+export default function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
+	const providerId = useEntityId( kind, name );
+	const id = _id ?? providerId;
+	const { getEntityRecord, getEntityRecordEdits } = useSelect( STORE_NAME );
+	const { content, editedBlocks, meta } = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return {};
+			}
+			const { getEditedEntityRecord } = select( STORE_NAME );
+			const editedRecord = getEditedEntityRecord( kind, name, id );
+			return {
+				editedBlocks: editedRecord.blocks,
+				content: editedRecord.content,
+				meta: editedRecord.meta,
+			};
+		},
+		[ kind, name, id ]
+	);
+	const { __unstableCreateUndoLevel, editEntityRecord } =
+		useDispatch( STORE_NAME );
+
+	const blocks = useMemo( () => {
+		if ( ! id ) {
+			return undefined;
+		}
+
+		if ( editedBlocks ) {
+			return editedBlocks;
+		}
+
+		if ( ! content || typeof content !== 'string' ) {
+			return EMPTY_ARRAY;
+		}
+
+		// If there's an edit, cache the parsed blocks by the edit.
+		// If not, cache by the original enity record.
+		const edits = getEntityRecordEdits( kind, name, id );
+		const isUnedited = ! edits || ! Object.keys( edits ).length;
+		const cackeKey = isUnedited ? getEntityRecord( kind, name, id ) : edits;
+		let _blocks = parsedBlocksCache.get( cackeKey );
+
+		if ( ! _blocks ) {
+			_blocks = parse( content );
+			parsedBlocksCache.set( cackeKey, _blocks );
+		}
+
+		return _blocks;
+	}, [
+		kind,
+		name,
+		id,
+		editedBlocks,
+		content,
+		getEntityRecord,
+		getEntityRecordEdits,
+	] );
+
+	const onChange = useCallback(
+		( newBlocks, options ) => {
+			const noChange = blocks === newBlocks;
+			if ( noChange ) {
+				return __unstableCreateUndoLevel( kind, name, id );
+			}
+			const { selection, ...rest } = options;
+
+			// We create a new function here on every persistent edit
+			// to make sure the edit makes the post dirty and creates
+			// a new undo level.
+			const edits = {
+				selection,
+				content: ( { blocks: blocksForSerialization = [] } ) =>
+					__unstableSerializeAndClean( blocksForSerialization ),
+				...updateFootnotesFromMeta( newBlocks, meta ),
+			};
+
+			editEntityRecord( kind, name, id, edits, {
+				isCached: false,
+				...rest,
+			} );
+		},
+		[
+			kind,
+			name,
+			id,
+			blocks,
+			meta,
+			__unstableCreateUndoLevel,
+			editEntityRecord,
+		]
+	);
+
+	const onInput = useCallback(
+		( newBlocks, options ) => {
+			const { selection, ...rest } = options;
+			const footnotesChanges = updateFootnotesFromMeta( newBlocks, meta );
+			const edits = { selection, ...footnotesChanges };
+
+			editEntityRecord( kind, name, id, edits, {
+				isCached: true,
+				...rest,
+			} );
+		},
+		[ kind, name, id, meta, editEntityRecord ]
+	);
+
+	return [ blocks, onInput, onChange ];
+}
diff --git a/packages/core-data/src/hooks/use-entity-id.js b/packages/core-data/src/hooks/use-entity-id.js
new file mode 100644
index 00000000000000..7fb9d33fb7bdf3
--- /dev/null
+++ b/packages/core-data/src/hooks/use-entity-id.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { EntityContext } from '../entity-context';
+
+/**
+ * Hook that returns the ID for the nearest
+ * provided entity of the specified type.
+ *
+ * @param {string} kind The entity kind.
+ * @param {string} name The entity name.
+ */
+export default function useEntityId( kind, name ) {
+	const context = useContext( EntityContext );
+	return context?.[ kind ]?.[ name ];
+}
diff --git a/packages/core-data/src/hooks/use-entity-prop.js b/packages/core-data/src/hooks/use-entity-prop.js
new file mode 100644
index 00000000000000..ac2f22ace70792
--- /dev/null
+++ b/packages/core-data/src/hooks/use-entity-prop.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../name';
+import useEntityId from './use-entity-id';
+
+/**
+ * Hook that returns the value and a setter for the
+ * specified property of the nearest provided
+ * entity of the specified type.
+ *
+ * @param {string}        kind  The entity kind.
+ * @param {string}        name  The entity name.
+ * @param {string}        prop  The property name.
+ * @param {number|string} [_id] An entity ID to use instead of the context-provided one.
+ *
+ * @return {[*, Function, *]} An array where the first item is the
+ *                            property value, the second is the
+ *                            setter and the third is the full value
+ * 							  object from REST API containing more
+ * 							  information like `raw`, `rendered` and
+ * 							  `protected` props.
+ */
+export default function useEntityProp( kind, name, prop, _id ) {
+	const providerId = useEntityId( kind, name );
+	const id = _id ?? providerId;
+
+	const { value, fullValue } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord } =
+				select( STORE_NAME );
+			const record = getEntityRecord( kind, name, id ); // Trigger resolver.
+			const editedRecord = getEditedEntityRecord( kind, name, id );
+			return record && editedRecord
+				? {
+						value: editedRecord[ prop ],
+						fullValue: record[ prop ],
+				  }
+				: {};
+		},
+		[ kind, name, id, prop ]
+	);
+	const { editEntityRecord } = useDispatch( STORE_NAME );
+	const setValue = useCallback(
+		( newValue ) => {
+			editEntityRecord( kind, name, id, {
+				[ prop ]: newValue,
+			} );
+		},
+		[ editEntityRecord, kind, name, id, prop ]
+	);
+
+	return [ value, setValue, fullValue ];
+}
diff --git a/packages/core-data/src/hooks/use-entity-record.ts b/packages/core-data/src/hooks/use-entity-record.ts
index 4db789e9d0b91f..e3535f0e982ccd 100644
--- a/packages/core-data/src/hooks/use-entity-record.ts
+++ b/packages/core-data/src/hooks/use-entity-record.ts
@@ -19,6 +19,9 @@ export interface EntityRecordResolution< RecordType > {
 	/** The edited entity record */
 	editedRecord: Partial< RecordType >;
 
+	/** The edits to the edited entity record */
+	edits: Partial< RecordType >;
+
 	/** Apply local (in-browser) edits to the edited entity record */
 	edit: ( diff: Partial< RecordType > ) => void;
 
@@ -53,15 +56,17 @@ export interface Options {
 	enabled: boolean;
 }
 
+const EMPTY_OBJECT = {};
+
 /**
  * Resolves the specified entity record.
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param  kind     Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds.
- * @param  name     Name of the entity, e.g. `plugin` or a `post`. See rootEntitiesConfig in ../entities.ts for a list of available names.
- * @param  recordId ID of the requested entity record.
- * @param  options  Optional hook options.
+ * @param    kind     Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds.
+ * @param    name     Name of the entity, e.g. `plugin` or a `post`. See rootEntitiesConfig in ../entities.ts for a list of available names.
+ * @param    recordId ID of the requested entity record.
+ * @param    options  Optional hook options.
  * @example
  * ```js
  * import { useEntityRecord } from '@wordpress/core-data';
@@ -86,8 +91,8 @@ export interface Options {
  *
  * @example
  * ```js
+ * import { useCallback } from 'react';
  * import { useDispatch } from '@wordpress/data';
- * import { useCallback } from '@wordpress/element';
  * import { __ } from '@wordpress/i18n';
  * import { TextControl } from '@wordpress/components';
  * import { store as noticeStore } from '@wordpress/notices';
@@ -121,6 +126,8 @@ export interface Options {
  * 	return (
  * 		<form onSubmit={ onRename }>
  * 			<TextControl
+ *				__nextHasNoMarginBottom
+ *				__next40pxDefaultSize
  * 				label={ __( 'Name' ) }
  * 				value={ page.editedRecord.title }
  * 				onChange={ setTitle }
@@ -152,37 +159,54 @@ export default function useEntityRecord< RecordType >(
 
 	const mutations = useMemo(
 		() => ( {
-			edit: ( record ) =>
-				editEntityRecord( kind, name, recordId, record ),
+			edit: ( record, editOptions: any = {} ) =>
+				editEntityRecord( kind, name, recordId, record, editOptions ),
 			save: ( saveOptions: any = {} ) =>
 				saveEditedEntityRecord( kind, name, recordId, {
 					throwOnError: true,
 					...saveOptions,
 				} ),
 		} ),
-		[ recordId ]
+		[ editEntityRecord, kind, name, recordId, saveEditedEntityRecord ]
 	);
 
-	const { editedRecord, hasEdits } = useSelect(
-		( select ) => ( {
-			editedRecord: select( coreStore ).getEditedEntityRecord(
-				kind,
-				name,
-				recordId
-			),
-			hasEdits: select( coreStore ).hasEditsForEntityRecord(
-				kind,
-				name,
-				recordId
-			),
-		} ),
-		[ kind, name, recordId ]
+	const { editedRecord, hasEdits, edits } = useSelect(
+		( select ) => {
+			if ( ! options.enabled ) {
+				return {
+					editedRecord: EMPTY_OBJECT,
+					hasEdits: false,
+					edits: EMPTY_OBJECT,
+				};
+			}
+
+			return {
+				editedRecord: select( coreStore ).getEditedEntityRecord(
+					kind,
+					name,
+					recordId
+				),
+				hasEdits: select( coreStore ).hasEditsForEntityRecord(
+					kind,
+					name,
+					recordId
+				),
+				edits: select( coreStore ).getEntityRecordNonTransientEdits(
+					kind,
+					name,
+					recordId
+				),
+			};
+		},
+		[ kind, name, recordId, options.enabled ]
 	);
 
 	const { data: record, ...querySelectRest } = useQuerySelect(
 		( query ) => {
 			if ( ! options.enabled ) {
-				return null;
+				return {
+					data: null,
+				};
 			}
 			return query( coreStore ).getEntityRecord( kind, name, recordId );
 		},
@@ -193,6 +217,7 @@ export default function useEntityRecord< RecordType >(
 		record,
 		editedRecord,
 		hasEdits,
+		edits,
 		...querySelectRest,
 		...mutations,
 	};
diff --git a/packages/core-data/src/hooks/use-entity-records.ts b/packages/core-data/src/hooks/use-entity-records.ts
index b92b38e4182dbe..e2659b88bc0198 100644
--- a/packages/core-data/src/hooks/use-entity-records.ts
+++ b/packages/core-data/src/hooks/use-entity-records.ts
@@ -3,6 +3,8 @@
  */
 import { addQueryArgs } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,6 +13,7 @@ import useQuerySelect from './use-query-select';
 import { store as coreStore } from '../';
 import type { Options } from './use-entity-record';
 import type { Status } from './constants';
+import { unlock } from '../lock-unlock';
 
 interface EntityRecordsResolution< RecordType > {
 	/** The requested entity record */
@@ -28,6 +31,16 @@ interface EntityRecordsResolution< RecordType > {
 
 	/** Resolution status */
 	status: Status;
+
+	/**
+	 * The total number of available items (if not paginated).
+	 */
+	totalItems: number | null;
+
+	/**
+	 * The total number of pages.
+	 */
+	totalPages: number | null;
 }
 
 const EMPTY_ARRAY = [];
@@ -37,13 +50,13 @@ const EMPTY_ARRAY = [];
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param  kind      Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds.
- * @param  name      Name of the entity, e.g. `plugin` or a `post`. See rootEntitiesConfig in ../entities.ts for a list of available names.
- * @param  queryArgs Optional HTTP query description for how to fetch the data, passed to the requested API endpoint.
- * @param  options   Optional hook options.
+ * @param    kind      Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds.
+ * @param    name      Name of the entity, e.g. `plugin` or a `post`. See rootEntitiesConfig in ../entities.ts for a list of available names.
+ * @param    queryArgs Optional HTTP query description for how to fetch the data, passed to the requested API endpoint.
+ * @param    options   Optional hook options.
  * @example
  * ```js
- * import { useEntityRecord } from '@wordpress/core-data';
+ * import { useEntityRecords } from '@wordpress/core-data';
  *
  * function PageTitlesList() {
  *   const { records, isResolving } = useEntityRecords( 'postType', 'page' );
@@ -97,8 +110,34 @@ export default function useEntityRecords< RecordType >(
 		[ kind, name, queryAsString, options.enabled ]
 	);
 
+	const { totalItems, totalPages } = useSelect(
+		( select ) => {
+			if ( ! options.enabled ) {
+				return {
+					totalItems: null,
+					totalPages: null,
+				};
+			}
+			return {
+				totalItems: select( coreStore ).getEntityRecordsTotalItems(
+					kind,
+					name,
+					queryArgs
+				),
+				totalPages: select( coreStore ).getEntityRecordsTotalPages(
+					kind,
+					name,
+					queryArgs
+				),
+			};
+		},
+		[ kind, name, queryAsString, options.enabled ]
+	);
+
 	return {
 		records,
+		totalItems,
+		totalPages,
 		...rest,
 	};
 }
@@ -115,3 +154,51 @@ export function __experimentalUseEntityRecords(
 	} );
 	return useEntityRecords( kind, name, queryArgs, options );
 }
+
+export function useEntityRecordsWithPermissions< RecordType >(
+	kind: string,
+	name: string,
+	queryArgs: Record< string, unknown > = {},
+	options: Options = { enabled: true }
+): EntityRecordsResolution< RecordType > {
+	const entityConfig = useSelect(
+		( select ) => select( coreStore ).getEntityConfig( kind, name ),
+		[ kind, name ]
+	);
+	const { records: data, ...ret } = useEntityRecords(
+		kind,
+		name,
+		queryArgs,
+		options
+	);
+	const ids = useMemo(
+		() =>
+			data?.map(
+				// @ts-ignore
+				( record: RecordType ) => record[ entityConfig?.key ?? 'id' ]
+			) ?? [],
+		[ data, entityConfig?.key ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordsPermissions } = unlock(
+				select( coreStore )
+			);
+			return getEntityRecordsPermissions( kind, name, ids );
+		},
+		[ ids, kind, name ]
+	);
+
+	const dataWithPermissions = useMemo(
+		() =>
+			data?.map( ( record, index ) => ( {
+				// @ts-ignore
+				...record,
+				permissions: permissions[ index ],
+			} ) ) ?? [],
+		[ data, permissions ]
+	);
+
+	return { records: dataWithPermissions, ...ret };
+}
diff --git a/packages/core-data/src/hooks/use-query-select.ts b/packages/core-data/src/hooks/use-query-select.ts
index 401c2e471dc3b2..abee3323895afd 100644
--- a/packages/core-data/src/hooks/use-query-select.ts
+++ b/packages/core-data/src/hooks/use-query-select.ts
@@ -21,7 +21,7 @@ interface QuerySelectResponse< Data > {
 	/** the requested selector return value */
 	data: Data;
 
-	/** is the record still being resolved? Via the `getIsResolving` meta-selector */
+	/** is the record still being resolved? Via the `isResolving` meta-selector */
 	isResolving: boolean;
 
 	/** was the resolution started? Via the `hasStartedResolution` meta-selector */
@@ -108,31 +108,36 @@ const enrichSelectors = memoize( ( ( selectors ) => {
 			get:
 				() =>
 				( ...args: unknown[] ) => {
-					const { getIsResolving, hasFinishedResolution } = selectors;
-					const isResolving = !! getIsResolving( selectorName, args );
-					const hasResolved =
-						! isResolving &&
-						hasFinishedResolution( selectorName, args );
 					const data = selectors[ selectorName ]( ...args );
+					const resolutionStatus = selectors.getResolutionState(
+						selectorName,
+						args
+					)?.status;
 
 					let status;
-					if ( isResolving ) {
-						status = Status.Resolving;
-					} else if ( hasResolved ) {
-						if ( data ) {
+					switch ( resolutionStatus ) {
+						case 'resolving':
+							status = Status.Resolving;
+							break;
+						case 'finished':
 							status = Status.Success;
-						} else {
+							break;
+						case 'error':
 							status = Status.Error;
-						}
-					} else {
-						status = Status.Idle;
+							break;
+						case undefined:
+							status = Status.Idle;
+							break;
 					}
 
 					return {
 						data,
 						status,
-						isResolving,
-						hasResolved,
+						isResolving: status === Status.Resolving,
+						hasStarted: status !== Status.Idle,
+						hasResolved:
+							status === Status.Success ||
+							status === Status.Error,
 					};
 				},
 		} );
diff --git a/packages/core-data/src/hooks/use-resource-permissions.ts b/packages/core-data/src/hooks/use-resource-permissions.ts
index aef636bb538146..38dfc1ed77a3e6 100644
--- a/packages/core-data/src/hooks/use-resource-permissions.ts
+++ b/packages/core-data/src/hooks/use-resource-permissions.ts
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
+import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
@@ -38,23 +39,37 @@ type ResourcePermissionsResolution< IdType > = [
 	HasResolved,
 	ResolutionDetails &
 		GlobalResourcePermissionsResolution &
-		( IdType extends void ? SpecificResourcePermissionsResolution : {} )
+		( IdType extends void ? SpecificResourcePermissionsResolution : {} ),
 ];
 
+type EntityResource = { kind: string; name: string; id?: string | number };
+
+function useResourcePermissions< IdType = void >(
+	resource: string,
+	id?: IdType
+): ResourcePermissionsResolution< IdType >;
+
+function useResourcePermissions< IdType = void >(
+	resource: EntityResource,
+	id?: never
+): ResourcePermissionsResolution< IdType >;
+
 /**
  * Resolves resource permissions.
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param  resource The resource in question, e.g. media.
- * @param  id       ID of a specific resource entry, if needed, e.g. 10.
+ * @param    resource Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }`
+ *                    or REST base as a string - `media`.
+ * @param    id       Optional ID of the resource to check, e.g. 10. Note: This argument is discouraged
+ *                    when using an entity object as a resource to check permissions and will be ignored.
  *
  * @example
  * ```js
  * import { useResourcePermissions } from '@wordpress/core-data';
  *
  * function PagesList() {
- *   const { canCreate, isResolving } = useResourcePermissions( 'pages' );
+ *   const { canCreate, isResolving } = useResourcePermissions( { kind: 'postType', name: 'page' } );
  *
  *   if ( isResolving ) {
  *     return 'Loading ...';
@@ -82,7 +97,7 @@ type ResourcePermissionsResolution< IdType > = [
  *     canUpdate,
  *     canDelete,
  *     isResolving
- *   } = useResourcePermissions( 'pages', pageId );
+ *   } = useResourcePermissions( { kind: 'postType', name: 'page', id: pageId } );
  *
  *   if ( isResolving ) {
  *     return 'Loading ...';
@@ -109,15 +124,35 @@ type ResourcePermissionsResolution< IdType > = [
  * @return Entity records data.
  * @template IdType
  */
-export default function useResourcePermissions< IdType = void >(
-	resource: string,
+function useResourcePermissions< IdType = void >(
+	resource: string | EntityResource,
 	id?: IdType
 ): ResourcePermissionsResolution< IdType > {
+	// Serialize `resource` to a string that can be safely used as a React dep.
+	// We can't just pass `resource` as one of the deps, because if it is passed
+	// as an object literal, then it will be a different object on each call even
+	// if the values remain the same.
+	const isEntity = typeof resource === 'object';
+	const resourceAsString = isEntity ? JSON.stringify( resource ) : resource;
+
+	if ( isEntity && typeof id !== 'undefined' ) {
+		warning(
+			`When 'resource' is an entity object, passing 'id' as a separate argument isn't supported.`
+		);
+	}
+
 	return useQuerySelect(
 		( resolve ) => {
+			const hasId = isEntity ? !! resource.id : !! id;
 			const { canUser } = resolve( coreStore );
-			const create = canUser( 'create', resource );
-			if ( ! id ) {
+			const create = canUser(
+				'create',
+				isEntity
+					? { kind: resource.kind, name: resource.name }
+					: resource
+			);
+
+			if ( ! hasId ) {
 				const read = canUser( 'read', resource );
 
 				const isResolving = create.isResolving || read.isResolving;
@@ -168,10 +203,12 @@ export default function useResourcePermissions< IdType = void >(
 				canDelete: hasResolved && _delete.data,
 			};
 		},
-		[ resource, id ]
+		[ resourceAsString, id ]
 	);
 }
 
+export default useResourcePermissions;
+
 export function __experimentalUseResourcePermissions(
 	resource: string,
 	id?: unknown
diff --git a/packages/core-data/src/index.js b/packages/core-data/src/index.js
index 43fa4a0b3cd074..99507a914f377b 100644
--- a/packages/core-data/src/index.js
+++ b/packages/core-data/src/index.js
@@ -8,44 +8,61 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as resolvers from './resolvers';
 import createLocksActions from './locks/actions';
-import { rootEntitiesConfig, getMethodName } from './entities';
+import {
+	rootEntitiesConfig,
+	additionalEntityConfigLoaders,
+	getMethodName,
+} from './entities';
 import { STORE_NAME } from './name';
+import { unlock } from './lock-unlock';
 
 // The entity selectors/resolvers and actions are shortcuts to their generic equivalents
 // (getEntityRecord, getEntityRecords, updateEntityRecord, updateEntityRecords)
 // Instead of getEntityRecord, the consumer could use more user-friendly named selector: getPostType, getTaxonomy...
 // The "kind" and the "name" of the entity are combined to generate these shortcuts.
+const entitiesConfig = [
+	...rootEntitiesConfig,
+	...additionalEntityConfigLoaders.filter( ( config ) => !! config.name ),
+];
 
-const entitySelectors = rootEntitiesConfig.reduce( ( result, entity ) => {
-	const { kind, name } = entity;
+const entitySelectors = entitiesConfig.reduce( ( result, entity ) => {
+	const { kind, name, plural } = entity;
 	result[ getMethodName( kind, name ) ] = ( state, key, query ) =>
 		selectors.getEntityRecord( state, kind, name, key, query );
-	result[ getMethodName( kind, name, 'get', true ) ] = ( state, query ) =>
-		selectors.getEntityRecords( state, kind, name, query );
+
+	if ( plural ) {
+		result[ getMethodName( kind, plural, 'get' ) ] = ( state, query ) =>
+			selectors.getEntityRecords( state, kind, name, query );
+	}
 	return result;
 }, {} );
 
-const entityResolvers = rootEntitiesConfig.reduce( ( result, entity ) => {
-	const { kind, name } = entity;
+const entityResolvers = entitiesConfig.reduce( ( result, entity ) => {
+	const { kind, name, plural } = entity;
 	result[ getMethodName( kind, name ) ] = ( key, query ) =>
 		resolvers.getEntityRecord( kind, name, key, query );
-	const pluralMethodName = getMethodName( kind, name, 'get', true );
-	result[ pluralMethodName ] = ( ...args ) =>
-		resolvers.getEntityRecords( kind, name, ...args );
-	result[ pluralMethodName ].shouldInvalidate = ( action ) =>
-		resolvers.getEntityRecords.shouldInvalidate( action, kind, name );
+
+	if ( plural ) {
+		const pluralMethodName = getMethodName( kind, plural, 'get' );
+		result[ pluralMethodName ] = ( ...args ) =>
+			resolvers.getEntityRecords( kind, name, ...args );
+		result[ pluralMethodName ].shouldInvalidate = ( action ) =>
+			resolvers.getEntityRecords.shouldInvalidate( action, kind, name );
+	}
 	return result;
 }, {} );
 
-const entityActions = rootEntitiesConfig.reduce( ( result, entity ) => {
+const entityActions = entitiesConfig.reduce( ( result, entity ) => {
 	const { kind, name } = entity;
-	result[ getMethodName( kind, name, 'save' ) ] = ( key ) =>
-		actions.saveEntityRecord( kind, name, key );
-	result[ getMethodName( kind, name, 'delete' ) ] = ( key, query ) =>
-		actions.deleteEntityRecord( kind, name, key, query );
+	result[ getMethodName( kind, name, 'save' ) ] = ( record, options ) =>
+		actions.saveEntityRecord( kind, name, record, options );
+	result[ getMethodName( kind, name, 'delete' ) ] = ( key, query, options ) =>
+		actions.deleteEntityRecord( kind, name, key, query, options );
 	return result;
 }, {} );
 
@@ -62,11 +79,13 @@ const storeConfig = () => ( {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  */
 export const store = createReduxStore( STORE_NAME, storeConfig() );
-
-register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );
+register( store ); // Register store after unlocking private selectors to allow resolvers to use them.
 
 export { default as EntityProvider } from './entity-provider';
 export * from './entity-provider';
 export * from './entity-types';
 export * from './fetch';
 export * from './hooks';
+export * from './private-apis';
diff --git a/packages/core-data/src/lock-unlock.ts b/packages/core-data/src/lock-unlock.ts
new file mode 100644
index 00000000000000..91bf30792c970a
--- /dev/null
+++ b/packages/core-data/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/core-data'
+	);
diff --git a/packages/core-data/src/locks/test/engine.js b/packages/core-data/src/locks/test/engine.js
index 64ec8f62ebbf8a..089065bee86345 100644
--- a/packages/core-data/src/locks/test/engine.js
+++ b/packages/core-data/src/locks/test/engine.js
@@ -3,8 +3,6 @@
  */
 import createLocks from '../engine';
 
-jest.useRealTimers();
-
 // We correctly await all promises with expect calls, but the rule doesn't detect that.
 /* eslint-disable jest/valid-expect-in-promise */
 
diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js
new file mode 100644
index 00000000000000..df76d2693e54f3
--- /dev/null
+++ b/packages/core-data/src/private-actions.js
@@ -0,0 +1,16 @@
+/**
+ * Returns an action object used in signalling that the registered post meta
+ * fields for a post type have been received.
+ *
+ * @param {string} postType           Post type slug.
+ * @param {Object} registeredPostMeta Registered post meta.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveRegisteredPostMeta( postType, registeredPostMeta ) {
+	return {
+		type: 'RECEIVE_REGISTERED_POST_META',
+		postType,
+		registeredPostMeta,
+	};
+}
diff --git a/packages/core-data/src/private-apis.js b/packages/core-data/src/private-apis.js
new file mode 100644
index 00000000000000..e9fcf36f7e6090
--- /dev/null
+++ b/packages/core-data/src/private-apis.js
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { useEntityRecordsWithPermissions } from './hooks/use-entity-records';
+import { RECEIVE_INTERMEDIATE_RESULTS } from './utils';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	useEntityRecordsWithPermissions,
+	RECEIVE_INTERMEDIATE_RESULTS,
+} );
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
new file mode 100644
index 00000000000000..77790512653065
--- /dev/null
+++ b/packages/core-data/src/private-selectors.ts
@@ -0,0 +1,254 @@
+/**
+ * WordPress dependencies
+ */
+import { createSelector, createRegistrySelector } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { getDefaultTemplateId, getEntityRecord, type State } from './selectors';
+import { STORE_NAME } from './name';
+import { unlock } from './lock-unlock';
+
+type EntityRecordKey = string | number;
+
+/**
+ * Returns the previous edit from the current undo offset
+ * for the entity records edits history, if any.
+ *
+ * @param state State tree.
+ *
+ * @return The undo manager.
+ */
+export function getUndoManager( state: State ) {
+	return state.undoManager;
+}
+
+/**
+ * Retrieve the fallback Navigation.
+ *
+ * @param state Data state.
+ * @return The ID for the fallback Navigation post.
+ */
+export function getNavigationFallbackId(
+	state: State
+): EntityRecordKey | undefined {
+	return state.navigationFallbackId;
+}
+
+export const getBlockPatternsForPostType = createRegistrySelector(
+	( select: any ) =>
+		createSelector(
+			( state, postType ) =>
+				select( STORE_NAME )
+					.getBlockPatterns()
+					.filter(
+						( { postTypes } ) =>
+							! postTypes ||
+							( Array.isArray( postTypes ) &&
+								postTypes.includes( postType ) )
+					),
+			() => [ select( STORE_NAME ).getBlockPatterns() ]
+		)
+);
+
+/**
+ * Returns the entity records permissions for the given entity record ids.
+ */
+export const getEntityRecordsPermissions = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state: State, kind: string, name: string, ids: string[] ) => {
+			const normalizedIds = Array.isArray( ids ) ? ids : [ ids ];
+			return normalizedIds.map( ( id ) => ( {
+				delete: select( STORE_NAME ).canUser( 'delete', {
+					kind,
+					name,
+					id,
+				} ),
+				update: select( STORE_NAME ).canUser( 'update', {
+					kind,
+					name,
+					id,
+				} ),
+			} ) );
+		},
+		( state ) => [ state.userPermissions ]
+	)
+);
+
+/**
+ * Returns the entity record permissions for the given entity record id.
+ *
+ * @param state Data state.
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param id    Entity record id.
+ *
+ * @return The entity record permissions.
+ */
+export function getEntityRecordPermissions(
+	state: State,
+	kind: string,
+	name: string,
+	id: string
+) {
+	return getEntityRecordsPermissions( state, kind, name, id )[ 0 ];
+}
+
+/**
+ * Returns the registered post meta fields for a given post type.
+ *
+ * @param state    Data state.
+ * @param postType Post type.
+ *
+ * @return Registered post meta fields.
+ */
+export function getRegisteredPostMeta( state: State, postType: string ) {
+	return state.registeredPostMeta?.[ postType ] ?? {};
+}
+
+function normalizePageId( value: number | string | undefined ): string | null {
+	if ( ! value || ! [ 'number', 'string' ].includes( typeof value ) ) {
+		return null;
+	}
+
+	// We also need to check if it's not zero (`'0'`).
+	if ( Number( value ) === 0 ) {
+		return null;
+	}
+
+	return value.toString();
+}
+
+interface SiteData {
+	show_on_front?: string;
+	page_on_front?: string | number;
+	page_for_posts?: string | number;
+}
+
+export const getHomePage = createRegistrySelector( ( select ) =>
+	createSelector(
+		() => {
+			const siteData = select( STORE_NAME ).getEntityRecord(
+				'root',
+				'site'
+			) as SiteData | undefined;
+			if ( ! siteData ) {
+				return null;
+			}
+			const homepageId =
+				siteData?.show_on_front === 'page'
+					? normalizePageId( siteData.page_on_front )
+					: null;
+			if ( homepageId ) {
+				return { postType: 'page', postId: homepageId };
+			}
+			const frontPageTemplateId = select(
+				STORE_NAME
+			).getDefaultTemplateId( {
+				slug: 'front-page',
+			} );
+			return { postType: 'wp_template', postId: frontPageTemplateId };
+		},
+		( state ) => [
+			getEntityRecord( state, 'root', 'site' ),
+			getDefaultTemplateId( state, {
+				slug: 'front-page',
+			} ),
+		]
+	)
+);
+
+export const getPostsPageId = createRegistrySelector( ( select ) => () => {
+	const siteData = select( STORE_NAME ).getEntityRecord( 'root', 'site' ) as
+		| SiteData
+		| undefined;
+	return siteData?.show_on_front === 'page'
+		? normalizePageId( siteData.page_for_posts )
+		: null;
+} );
+
+export const getTemplateId = createRegistrySelector(
+	( select ) => ( state, postType, postId ) => {
+		const homepage = unlock( select( STORE_NAME ) ).getHomePage();
+
+		if ( ! homepage ) {
+			return;
+		}
+
+		// For the front page, we always use the front page template if existing.
+		if (
+			postType === 'page' &&
+			postType === homepage?.postType &&
+			postId.toString() === homepage?.postId
+		) {
+			// The /lookup endpoint cannot currently handle a lookup
+			// when a page is set as the front page, so specifically in
+			// that case, we want to check if there is a front page
+			// template, and instead of falling back to the home
+			// template, we want to fall back to the page template.
+			const templates = select( STORE_NAME ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{
+					per_page: -1,
+				}
+			);
+			if ( ! templates ) {
+				return;
+			}
+			const id = templates.find( ( { slug } ) => slug === 'front-page' )
+				?.id;
+			if ( id ) {
+				return id;
+			}
+			// If no front page template is found, continue with the
+			// logic below (fetching the page template).
+		}
+
+		const editedEntity = select( STORE_NAME ).getEditedEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
+		if ( ! editedEntity ) {
+			return;
+		}
+		const postsPageId = unlock( select( STORE_NAME ) ).getPostsPageId();
+		// Check if the current page is the posts page.
+		if ( postType === 'page' && postsPageId === postId.toString() ) {
+			return select( STORE_NAME ).getDefaultTemplateId( {
+				slug: 'home',
+			} );
+		}
+		// First see if the post/page has an assigned template and fetch it.
+		const currentTemplateSlug = editedEntity.template;
+		if ( currentTemplateSlug ) {
+			const currentTemplate = select( STORE_NAME )
+				.getEntityRecords( 'postType', 'wp_template', {
+					per_page: -1,
+				} )
+				?.find( ( { slug } ) => slug === currentTemplateSlug );
+			if ( currentTemplate ) {
+				return currentTemplate.id;
+			}
+		}
+		// If no template is assigned, use the default template.
+		let slugToCheck;
+		// In `draft` status we might not have a slug available, so we use the `single`
+		// post type templates slug(ex page, single-post, single-product etc..).
+		// Pages do not need the `single` prefix in the slug to be prioritized
+		// through template hierarchy.
+		if ( editedEntity.slug ) {
+			slugToCheck =
+				postType === 'page'
+					? `${ postType }-${ editedEntity.slug }`
+					: `single-${ postType }-${ editedEntity.slug }`;
+		} else {
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+		}
+		return select( STORE_NAME ).getDefaultTemplateId( {
+			slug: slugToCheck,
+		} );
+	}
+);
diff --git a/packages/core-data/src/queried-data/actions.js b/packages/core-data/src/queried-data/actions.js
index 58416713aebdb4..5a1a1acb48c64c 100644
--- a/packages/core-data/src/queried-data/actions.js
+++ b/packages/core-data/src/queried-data/actions.js
@@ -3,14 +3,16 @@
  *
  * @param {Array}   items Items received.
  * @param {?Object} edits Optional edits to reset.
+ * @param {?Object} meta  Meta information about pagination.
  *
  * @return {Object} Action object.
  */
-export function receiveItems( items, edits ) {
+export function receiveItems( items, edits, meta ) {
 	return {
 		type: 'RECEIVE_ITEMS',
 		items: Array.isArray( items ) ? items : [ items ],
 		persistedEdits: edits,
+		meta,
 	};
 }
 
@@ -41,12 +43,13 @@ export function removeItems( kind, name, records, invalidateCache = false ) {
  * @param {Array}   items Queried items received.
  * @param {?Object} query Optional query object.
  * @param {?Object} edits Optional edits to reset.
+ * @param {?Object} meta  Meta information about pagination.
  *
  * @return {Object} Action object.
  */
-export function receiveQueriedItems( items, query = {}, edits ) {
+export function receiveQueriedItems( items, query = {}, edits, meta ) {
 	return {
-		...receiveItems( items, edits ),
+		...receiveItems( items, edits, meta ),
 		query,
 	};
 }
diff --git a/packages/core-data/src/queried-data/reducer.js b/packages/core-data/src/queried-data/reducer.js
index 9db1b7dad741f8..3a0c8869175c47 100644
--- a/packages/core-data/src/queried-data/reducer.js
+++ b/packages/core-data/src/queried-data/reducer.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map, omit, filter, mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -61,10 +56,10 @@ export function getMergedItemIds( itemIds, nextItemIds, page, perPage ) {
 
 	for ( let i = 0; i < size; i++ ) {
 		// Preserve existing item ID except for subset of range of next items.
+		// We need to check against the possible maximum upper boundary because
+		// a page could receive fewer than what was previously stored.
 		const isInNextItemsRange =
-			i >= nextItemIdsStartIndex &&
-			i < nextItemIdsStartIndex + nextItemIds.length;
-
+			i >= nextItemIdsStartIndex && i < nextItemIdsStartIndex + perPage;
 		mergedItemIds[ i ] = isInNextItemsRange
 			? nextItemIds[ i - nextItemIdsStartIndex ]
 			: itemIds?.[ i ];
@@ -73,6 +68,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.
@@ -92,7 +110,8 @@ export function items( state = {}, action ) {
 				[ context ]: {
 					...state[ context ],
 					...action.items.reduce( ( accumulator, value ) => {
-						const itemId = value[ key ];
+						const itemId = value?.[ key ];
+
 						accumulator[ itemId ] = conservativeMapItem(
 							state?.[ context ]?.[ itemId ],
 							value
@@ -103,8 +122,11 @@ export function items( state = {}, action ) {
 			};
 		}
 		case 'REMOVE_ITEMS':
-			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+			return Object.fromEntries(
+				Object.entries( state ).map( ( [ itemId, contextState ] ) => [
+					itemId,
+					removeEntitiesById( contextState, action.itemIds ),
+				] )
 			);
 	}
 	return state;
@@ -143,7 +165,7 @@ export function itemIsComplete( state = {}, action ) {
 				[ context ]: {
 					...state[ context ],
 					...action.items.reduce( ( result, item ) => {
-						const itemId = item[ key ];
+						const itemId = item?.[ key ];
 
 						// Defer to completeness if already assigned. Technically the
 						// data may be outdated if receiving items for a field subset.
@@ -156,8 +178,11 @@ export function itemIsComplete( state = {}, action ) {
 			};
 		}
 		case 'REMOVE_ITEMS':
-			return mapValues( state, ( contextState ) =>
-				omit( contextState, action.itemIds )
+			return Object.fromEntries(
+				Object.entries( state ).map( ( [ itemId, contextState ] ) => [
+					itemId,
+					removeEntitiesById( contextState, action.itemIds ),
+				] )
 			);
 	}
 
@@ -198,19 +223,22 @@ const receiveQueries = compose( [
 	// Queries shape is shared, but keyed by query `stableKey` part. Original
 	// reducer tracks only a single query object.
 	onSubKey( 'stableKey' ),
-] )( ( state = null, action ) => {
+] )( ( state = {}, action ) => {
 	const { type, page, perPage, key = DEFAULT_ENTITY_KEY } = action;
 
 	if ( type !== 'RECEIVE_ITEMS' ) {
 		return state;
 	}
 
-	return getMergedItemIds(
-		state || [],
-		map( action.items, key ),
-		page,
-		perPage
-	);
+	return {
+		itemIds: getMergedItemIds(
+			state?.itemIds || [],
+			action.items.map( ( item ) => item?.[ key ] ).filter( Boolean ),
+			page,
+			perPage
+		),
+		meta: action.meta,
+	};
 } );
 
 /**
@@ -231,13 +259,27 @@ const queries = ( state = {}, action ) => {
 				return result;
 			}, {} );
 
-			return mapValues( state, ( contextQueries ) => {
-				return mapValues( contextQueries, ( queryItems ) => {
-					return filter( queryItems, ( queryId ) => {
-						return ! removedItems[ queryId ];
-					} );
-				} );
-			} );
+			return Object.fromEntries(
+				Object.entries( state ).map(
+					( [ queryGroup, contextQueries ] ) => [
+						queryGroup,
+						Object.fromEntries(
+							Object.entries( contextQueries ).map(
+								( [ query, queryItems ] ) => [
+									query,
+									{
+										...queryItems,
+										itemIds: queryItems.itemIds.filter(
+											( queryId ) =>
+												! removedItems[ queryId ]
+										),
+									},
+								]
+							)
+						),
+					]
+				)
+			);
 		default:
 			return state;
 	}
diff --git a/packages/core-data/src/queried-data/selectors.js b/packages/core-data/src/queried-data/selectors.js
index e52dab36e61889..6fb213f81c1a92 100644
--- a/packages/core-data/src/queried-data/selectors.js
+++ b/packages/core-data/src/queried-data/selectors.js
@@ -1,14 +1,18 @@
 /**
  * External dependencies
  */
-import createSelector from 'rememo';
 import EquivalentKeyMap from 'equivalent-key-map';
-import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createSelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import getQueryParts from './get-query-parts';
+import { setNestedValue } from '../utils';
 
 /**
  * Cache of state keys to EquivalentKeyMap where the inner map tracks queries
@@ -33,7 +37,7 @@ function getQueriedItemsUncached( state, query ) {
 	let itemIds;
 
 	if ( state.queries?.[ context ]?.[ stableKey ] ) {
-		itemIds = state.queries[ context ][ stableKey ];
+		itemIds = state.queries[ context ][ stableKey ].itemIds;
 	}
 
 	if ( ! itemIds ) {
@@ -52,7 +56,9 @@ function getQueriedItemsUncached( state, query ) {
 		if ( Array.isArray( include ) && ! include.includes( itemId ) ) {
 			continue;
 		}
-
+		if ( itemId === undefined ) {
+			continue;
+		}
 		// Having a target item ID doesn't guarantee that this object has been queried.
 		if ( ! state.items[ context ]?.hasOwnProperty( itemId ) ) {
 			return null;
@@ -66,8 +72,12 @@ function getQueriedItemsUncached( state, query ) {
 
 			for ( let f = 0; f < fields.length; f++ ) {
 				const field = fields[ f ].split( '.' );
-				const value = get( item, field );
-				set( filteredItem, field, value );
+				let value = item;
+				field.forEach( ( fieldName ) => {
+					value = value?.[ fieldName ];
+				} );
+
+				setNestedValue( filteredItem, field, value );
 			}
 		} else {
 			// If expecting a complete item, validate that completeness, or
@@ -114,3 +124,15 @@ export const getQueriedItems = createSelector( ( state, query = {} ) => {
 	queriedItemsCache.set( query, items );
 	return items;
 } );
+
+export function getQueriedTotalItems( state, query = {} ) {
+	const { stableKey, context } = getQueryParts( query );
+
+	return state.queries?.[ context ]?.[ stableKey ]?.meta?.totalItems ?? null;
+}
+
+export function getQueriedTotalPages( state, query = {} ) {
+	const { stableKey, context } = getQueryParts( query );
+
+	return state.queries?.[ context ]?.[ stableKey ]?.meta?.totalPages ?? null;
+}
diff --git a/packages/core-data/src/queried-data/test/reducer.js b/packages/core-data/src/queried-data/test/reducer.js
index 63a4f4bd259ceb..d996f5b07ea22b 100644
--- a/packages/core-data/src/queried-data/test/reducer.js
+++ b/packages/core-data/src/queried-data/test/reducer.js
@@ -64,6 +64,17 @@ describe( 'getMergedItemIds', () => {
 
 		expect( result ).toEqual( [ 1, 3, 4 ] );
 	} );
+	it( 'should update a page properly if less items are provided than previously stored', () => {
+		let original = deepFreeze( [ 1, 2, 3 ] );
+		let result = getMergedItemIds( original, [ 1, 2 ], 1, 3 );
+
+		expect( result ).toEqual( [ 1, 2 ] );
+
+		original = deepFreeze( [ 1, 2, 3, 4, 5, 6 ] );
+		result = getMergedItemIds( original, [ 9 ], 2, 2 );
+
+		expect( result ).toEqual( [ 1, 2, 9, undefined, 5, 6 ] );
+	} );
 } );
 
 describe( 'itemIsComplete', () => {
@@ -159,7 +170,7 @@ describe( 'reducer', () => {
 				default: { 1: true },
 			},
 			queries: {
-				default: { 's=a': [ 1 ] },
+				default: { 's=a': { itemIds: [ 1 ] } },
 			},
 		} );
 	} );
@@ -200,8 +211,8 @@ describe( 'reducer', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2, 3, 4 ],
-					's=a': [ 1, 3 ],
+					'': { itemIds: [ 1, 2, 3, 4 ] },
+					's=a': { itemIds: [ 1, 3 ] },
 				},
 			},
 		} );
@@ -218,8 +229,48 @@ describe( 'reducer', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2, 4 ],
-					's=a': [ 1 ],
+					'': { itemIds: [ 1, 2, 4 ] },
+					's=a': { itemIds: [ 1 ] },
+				},
+			},
+		} );
+	} );
+
+	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: {
+					'': { itemIds: [ 'foo//bar1', 'foo//bar2', 'foo//bar3' ] },
+					's=2': { itemIds: [ '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: {
+					'': { itemIds: [ 'foo//bar1', 'foo//bar3' ] },
+					's=2': { itemIds: [] },
 				},
 			},
 		} );
diff --git a/packages/core-data/src/queried-data/test/selectors.js b/packages/core-data/src/queried-data/test/selectors.js
index f0a38aab2887e1..3ec1e085c47bb2 100644
--- a/packages/core-data/src/queried-data/test/selectors.js
+++ b/packages/core-data/src/queried-data/test/selectors.js
@@ -32,7 +32,7 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2 ],
+					'': { itemIds: [ 1, 2 ] },
 				},
 			},
 		};
@@ -56,7 +56,7 @@ describe( 'getQueriedItems', () => {
 					2: true,
 				},
 			},
-			queries: [ 1, 2 ],
+			queries: { itemIds: [ 1, 2 ] },
 		};
 
 		const resultA = getQueriedItems( state, {} );
@@ -81,8 +81,8 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2 ],
-					'include=1': [ 1 ],
+					'': { itemIds: [ 1, 2 ] },
+					'include=1': { itemIds: [ 1 ] },
 				},
 			},
 		};
@@ -116,7 +116,7 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'_fields=content': [ 1, 2 ],
+					'_fields=content': { itemIds: [ 1, 2 ] },
 				},
 			},
 		};
@@ -161,7 +161,7 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'_fields=content%2Cmeta.template': [ 1, 2 ],
+					'_fields=content%2Cmeta.template': { itemIds: [ 1, 2 ] },
 				},
 			},
 		};
@@ -198,7 +198,7 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2 ],
+					'': { itemIds: [ 1, 2 ] },
 				},
 			},
 		};
@@ -230,7 +230,7 @@ describe( 'getQueriedItems', () => {
 			},
 			queries: {
 				default: {
-					'': [ 1, 2 ],
+					'': { itemIds: [ 1, 2 ] },
 				},
 			},
 		};
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 276c878c926f8f..9748355fc5caf6 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { map, groupBy, isEqual, get } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose';
 import { combineReducers } from '@wordpress/data';
-import isShallowEqual from '@wordpress/is-shallow-equal';
+import { createUndoManager } from '@wordpress/undo-manager';
 
 /**
  * Internal dependencies
@@ -67,10 +67,7 @@ export function users( state = { byId: {}, queries: {} }, action ) {
 				},
 				queries: {
 					...state.queries,
-					[ action.queryID ]: map(
-						action.users,
-						( user ) => user.id
-					),
+					[ action.queryID ]: action.users.map( ( user ) => user.id ),
 				},
 			};
 	}
@@ -186,6 +183,33 @@ export function themeGlobalStyleVariations( state = {}, action ) {
 	return state;
 }
 
+const withMultiEntityRecordEdits = ( reducer ) => ( state, action ) => {
+	if ( action.type === 'UNDO' || action.type === 'REDO' ) {
+		const { record } = action;
+
+		let newState = state;
+		record.forEach( ( { id: { kind, name, recordId }, changes } ) => {
+			newState = reducer( newState, {
+				type: 'EDIT_ENTITY_RECORD',
+				kind,
+				name,
+				recordId,
+				edits: Object.entries( changes ).reduce(
+					( acc, [ key, value ] ) => {
+						acc[ key ] =
+							action.type === 'UNDO' ? value.from : value.to;
+						return acc;
+					},
+					{}
+				),
+			} );
+		} );
+		return newState;
+	}
+
+	return reducer( state, action );
+};
+
 /**
  * Higher Order Reducer for a given entity config. It supports:
  *
@@ -199,6 +223,8 @@ export function themeGlobalStyleVariations( state = {}, action ) {
  */
 function entity( entityConfig ) {
 	return compose( [
+		withMultiEntityRecordEdits,
+
 		// Limit to matching action type so we don't attempt to replace action on
 		// an unhandled action.
 		ifMatchingAction(
@@ -212,14 +238,13 @@ function entity( entityConfig ) {
 		// Inject the entity config into the action.
 		replaceAction( ( action ) => {
 			return {
-				...action,
 				key: entityConfig.key || DEFAULT_ENTITY_KEY,
+				...action,
 			};
 		} ),
 	] )(
 		combineReducers( {
 			queriedData: queriedDataReducer,
-
 			edits: ( state = {}, action ) => {
 				switch ( action.type ) {
 					case 'RECEIVE_ITEMS':
@@ -231,7 +256,7 @@ function entity( entityConfig ) {
 						const nextState = { ...state };
 
 						for ( const record of action.items ) {
-							const recordId = record[ action.key ];
+							const recordId = record?.[ action.key ];
 							const edits = nextState[ recordId ];
 							if ( ! edits ) {
 								continue;
@@ -245,18 +270,14 @@ function entity( entityConfig ) {
 										// Edits are the "raw" attribute values, but records may have
 										// objects with more properties, so we use `get` here for the
 										// comparison.
-										! isEqual(
+										! fastDeepEqual(
 											edits[ key ],
-											get(
-												record[ key ],
-												'raw',
-												record[ key ]
-											)
+											record[ key ]?.raw ?? record[ key ]
 										) &&
 										// Sometimes the server alters the sent value which means
 										// we need to also remove the edits before the api request.
 										( ! action.persistedEdits ||
-											! isEqual(
+											! fastDeepEqual(
 												edits[ key ],
 												action.persistedEdits[ key ]
 											) )
@@ -333,6 +354,38 @@ function entity( entityConfig ) {
 
 				return state;
 			},
+
+			revisions: ( state = {}, action ) => {
+				// Use the same queriedDataReducer shape for revisions.
+				if ( action.type === 'RECEIVE_ITEM_REVISIONS' ) {
+					const recordKey = action.recordKey;
+					delete action.recordKey;
+					const newState = queriedDataReducer( state[ recordKey ], {
+						...action,
+						type: 'RECEIVE_ITEMS',
+					} );
+					return {
+						...state,
+						[ recordKey ]: newState,
+					};
+				}
+
+				if ( action.type === 'REMOVE_ITEMS' ) {
+					return Object.fromEntries(
+						Object.entries( state ).filter(
+							( [ id ] ) =>
+								! action.itemIds.some( ( itemId ) => {
+									if ( Number.isInteger( itemId ) ) {
+										return itemId === +id;
+									}
+									return itemId === id;
+								} )
+						)
+					);
+				}
+
+				return state;
+			},
 		} )
 	);
 }
@@ -368,7 +421,15 @@ export const entities = ( state = {}, action ) => {
 	// Generates a dynamic reducer for the entities.
 	let entitiesDataReducer = state.reducer;
 	if ( ! entitiesDataReducer || newConfig !== state.config ) {
-		const entitiesByKind = groupBy( newConfig, 'kind' );
+		const entitiesByKind = newConfig.reduce( ( acc, record ) => {
+			const { kind } = record;
+			if ( ! acc[ kind ] ) {
+				acc[ kind ] = [];
+			}
+			acc[ kind ].push( record );
+			return acc;
+		}, {} );
+
 		entitiesDataReducer = combineReducers(
 			Object.entries( entitiesByKind ).reduce(
 				( memo, [ kind, subEntities ] ) => {
@@ -408,155 +469,19 @@ export const entities = ( state = {}, action ) => {
 };
 
 /**
- * @typedef {Object} UndoStateMeta
- *
- * @property {number} offset          Where in the undo stack we are.
- * @property {Object} [flattenedUndo] Flattened form of undo stack.
- */
-
-/** @typedef {Array<Object> & UndoStateMeta} UndoState */
-
-/**
- * @type {UndoState}
- *
- * @todo Given how we use this we might want to make a custom class for it.
+ * @type {UndoManager}
  */
-const UNDO_INITIAL_STATE = Object.assign( [], { offset: 0 } );
-
-/** @type {Object} */
-let lastEditAction;
+export function undoManager( state = createUndoManager() ) {
+	return state;
+}
 
-/**
- * Reducer keeping track of entity edit undo history.
- *
- * @param {UndoState} state  Current state.
- * @param {Object}    action Dispatched action.
- *
- * @return {UndoState} Updated state.
- */
-export function undo( state = UNDO_INITIAL_STATE, action ) {
+export function editsReference( state = {}, action ) {
 	switch ( action.type ) {
 		case 'EDIT_ENTITY_RECORD':
-		case 'CREATE_UNDO_LEVEL':
-			let isCreateUndoLevel = action.type === 'CREATE_UNDO_LEVEL';
-			const isUndoOrRedo =
-				! isCreateUndoLevel &&
-				( action.meta.isUndo || action.meta.isRedo );
-			if ( isCreateUndoLevel ) {
-				action = lastEditAction;
-			} else if ( ! isUndoOrRedo ) {
-				// Don't lose the last edit cache if the new one only has transient edits.
-				// Transient edits don't create new levels so updating the cache would make
-				// us skip an edit later when creating levels explicitly.
-				if (
-					Object.keys( action.edits ).some(
-						( key ) => ! action.transientEdits[ key ]
-					)
-				) {
-					lastEditAction = action;
-				} else {
-					lastEditAction = {
-						...action,
-						edits: {
-							...( lastEditAction && lastEditAction.edits ),
-							...action.edits,
-						},
-					};
-				}
-			}
-
-			/** @type {UndoState} */
-			let nextState;
-
-			if ( isUndoOrRedo ) {
-				// @ts-ignore we might consider using Object.assign({}, state)
-				nextState = [ ...state ];
-				nextState.offset =
-					state.offset + ( action.meta.isUndo ? -1 : 1 );
-
-				if ( state.flattenedUndo ) {
-					// The first undo in a sequence of undos might happen while we have
-					// flattened undos in state. If this is the case, we want execution
-					// to continue as if we were creating an explicit undo level. This
-					// will result in an extra undo level being appended with the flattened
-					// undo values.
-					// We also have to take into account if the `lastEditAction` had opted out
-					// of being tracked in undo history, like the action that persists the latest
-					// content right before saving. In that case we have to update the `lastEditAction`
-					// to avoid returning early before applying the existing flattened undos.
-					isCreateUndoLevel = true;
-					if ( ! lastEditAction.meta.undo ) {
-						lastEditAction.meta.undo = {
-							edits: {},
-						};
-					}
-					action = lastEditAction;
-				} else {
-					return nextState;
-				}
-			}
-
-			if ( ! action.meta.undo ) {
-				return state;
-			}
-
-			// Transient edits don't create an undo level, but are
-			// reachable in the next meaningful edit to which they
-			// are merged. They are defined in the entity's config.
-			if (
-				! isCreateUndoLevel &&
-				! Object.keys( action.edits ).some(
-					( key ) => ! action.transientEdits[ key ]
-				)
-			) {
-				// @ts-ignore we might consider using Object.assign({}, state)
-				nextState = [ ...state ];
-				nextState.flattenedUndo = {
-					...state.flattenedUndo,
-					...action.edits,
-				};
-				nextState.offset = state.offset;
-				return nextState;
-			}
-
-			// Clear potential redos, because this only supports linear history.
-			nextState =
-				// @ts-ignore this needs additional cleanup, probably involving code-level changes
-				nextState || state.slice( 0, state.offset || undefined );
-			nextState.offset = nextState.offset || 0;
-			nextState.pop();
-			if ( ! isCreateUndoLevel ) {
-				nextState.push( {
-					kind: action.meta.undo.kind,
-					name: action.meta.undo.name,
-					recordId: action.meta.undo.recordId,
-					edits: {
-						...state.flattenedUndo,
-						...action.meta.undo.edits,
-					},
-				} );
-			}
-			// When an edit is a function it's an optimization to avoid running some expensive operation.
-			// We can't rely on the function references being the same so we opt out of comparing them here.
-			const comparisonUndoEdits = Object.values(
-				action.meta.undo.edits
-			).filter( ( edit ) => typeof edit !== 'function' );
-			const comparisonEdits = Object.values( action.edits ).filter(
-				( edit ) => typeof edit !== 'function'
-			);
-			if ( ! isShallowEqual( comparisonUndoEdits, comparisonEdits ) ) {
-				nextState.push( {
-					kind: action.kind,
-					name: action.name,
-					recordId: action.recordId,
-					edits: isCreateUndoLevel
-						? { ...state.flattenedUndo, ...action.edits }
-						: action.edits,
-				} );
-			}
-			return nextState;
+		case 'UNDO':
+		case 'REDO':
+			return {};
 	}
-
 	return state;
 }
 
@@ -596,6 +521,11 @@ export function userPermissions( state = {}, action ) {
 				...state,
 				[ action.key ]: action.isAllowed,
 			};
+		case 'RECEIVE_USER_PERMISSIONS':
+			return {
+				...state,
+				...action.permissions,
+			};
 	}
 
 	return state;
@@ -641,6 +571,82 @@ export function blockPatternCategories( state = [], action ) {
 	return state;
 }
 
+export function userPatternCategories( state = [], action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_USER_PATTERN_CATEGORIES':
+			return action.patternCategories;
+	}
+	return state;
+}
+
+export function navigationFallbackId( state = null, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_NAVIGATION_FALLBACK_ID':
+			return action.fallbackId;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer managing the theme global styles revisions.
+ *
+ * @param {Record<string, object>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string, object>} Updated state.
+ */
+export function themeGlobalStyleRevisions( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_THEME_GLOBAL_STYLE_REVISIONS':
+			return {
+				...state,
+				[ action.currentId ]: action.revisions,
+			};
+	}
+
+	return state;
+}
+
+/**
+ * Reducer managing the template lookup per query.
+ *
+ * @param {Record<string, string>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string, string>} Updated state.
+ */
+export function defaultTemplates( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_DEFAULT_TEMPLATE':
+			return {
+				...state,
+				[ JSON.stringify( action.query ) ]: action.templateId,
+			};
+	}
+
+	return state;
+}
+
+/**
+ * Reducer returning an object of registered post meta.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function registeredPostMeta( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_REGISTERED_POST_META':
+			return {
+				...state,
+				[ action.postType ]: action.registeredPostMeta,
+			};
+	}
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -649,12 +655,18 @@ export default combineReducers( {
 	currentUser,
 	themeGlobalStyleVariations,
 	themeBaseGlobalStyles,
+	themeGlobalStyleRevisions,
 	taxonomies,
 	entities,
-	undo,
+	editsReference,
+	undoManager,
 	embedPreviews,
 	userPermissions,
 	autosaves,
 	blockPatterns,
 	blockPatternCategories,
+	userPatternCategories,
+	navigationFallbackId,
+	defaultTemplates,
+	registeredPostMeta,
 } );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index b33bb42e653379..a35403c0493460 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -7,14 +7,24 @@ import { camelCase } from 'change-case';
  * WordPress dependencies
  */
 import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
  */
 import { STORE_NAME } from './name';
-import { getOrLoadEntitiesConfig, DEFAULT_ENTITY_KEY } from './entities';
-import { forwardResolver, getNormalizedCommaSeparable } from './utils';
+import { additionalEntityConfigLoaders, DEFAULT_ENTITY_KEY } from './entities';
+import {
+	forwardResolver,
+	getNormalizedCommaSeparable,
+	getUserPermissionCacheKey,
+	getUserPermissionsFromAllowHeader,
+	ALLOWED_RESOURCE_ACTIONS,
+	RECEIVE_INTERMEDIATE_RESULTS,
+} from './utils';
+import { getSyncProvider } from './sync';
+import { fetchBlockPatterns } from './fetch';
 
 /**
  * Requests authors from the REST API.
@@ -55,12 +65,12 @@ export const getCurrentUser =
  */
 export const getEntityRecord =
 	( kind, name, key = '', query ) =>
-	async ( { select, dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
+	async ( { select, dispatch, registry, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
 		const entityConfig = configs.find(
 			( config ) => config.name === name && config.kind === kind
 		);
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -71,51 +81,131 @@ export const getEntityRecord =
 		);
 
 		try {
-			if ( query !== undefined && query._fields ) {
-				// If requesting specific fields, items and query association to said
-				// records are stored by ID reference. Thus, fields must always include
-				// the ID.
-				query = {
-					...query,
-					_fields: [
-						...new Set( [
-							...( getNormalizedCommaSeparable( query._fields ) ||
-								[] ),
-							entityConfig.key || DEFAULT_ENTITY_KEY,
-						] ),
-					].join(),
-				};
-			}
+			// Entity supports configs,
+			// use the sync algorithm instead of the old fetch behavior.
+			if (
+				window.__experimentalEnableSync &&
+				entityConfig.syncConfig &&
+				! query
+			) {
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+					const objectId = entityConfig.getSyncObjectId( key );
 
-			// Disable reason: While true that an early return could leave `path`
-			// unused, it's important that path is derived using the query prior to
-			// additional query modifications in the condition below, since those
-			// modifications are relevant to how the data is tracked in state, and not
-			// for how the request is made to the REST API.
-
-			// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-			const path = addQueryArgs(
-				entityConfig.baseURL + ( key ? '/' + key : '' ),
-				{
-					...entityConfig.baseURLParams,
-					...query,
+					// Loads the persisted document.
+					await getSyncProvider().bootstrap(
+						entityConfig.syncObjectType,
+						objectId,
+						( record ) => {
+							dispatch.receiveEntityRecords(
+								kind,
+								name,
+								record,
+								query
+							);
+						}
+					);
+
+					// Boostraps the edited document as well (and load from peers).
+					await getSyncProvider().bootstrap(
+						entityConfig.syncObjectType + '--edit',
+						objectId,
+						( record ) => {
+							dispatch( {
+								type: 'EDIT_ENTITY_RECORD',
+								kind,
+								name,
+								recordId: key,
+								edits: record,
+								meta: {
+									undo: undefined,
+								},
+							} );
+						}
+					);
 				}
-			);
+			} else {
+				if ( query !== undefined && query._fields ) {
+					// If requesting specific fields, items and query association to said
+					// records are stored by ID reference. Thus, fields must always include
+					// the ID.
+					query = {
+						...query,
+						_fields: [
+							...new Set( [
+								...( getNormalizedCommaSeparable(
+									query._fields
+								) || [] ),
+								entityConfig.key || DEFAULT_ENTITY_KEY,
+							] ),
+						].join(),
+					};
+				}
+
+				// Disable reason: While true that an early return could leave `path`
+				// unused, it's important that path is derived using the query prior to
+				// additional query modifications in the condition below, since those
+				// modifications are relevant to how the data is tracked in state, and not
+				// for how the request is made to the REST API.
+
+				// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+				const path = addQueryArgs(
+					entityConfig.baseURL + ( key ? '/' + key : '' ),
+					{
+						...entityConfig.baseURLParams,
+						...query,
+					}
+				);
 
-			if ( query !== undefined ) {
-				query = { ...query, include: [ key ] };
+				if ( query !== undefined && query._fields ) {
+					query = { ...query, include: [ key ] };
 
-				// The resolution cache won't consider query as reusable based on the
-				// fields, so it's tested here, prior to initiating the REST request,
-				// and without causing `getEntityRecords` resolution to occur.
-				const hasRecords = select.hasEntityRecords( kind, name, query );
-				if ( hasRecords ) {
-					return;
+					// The resolution cache won't consider query as reusable based on the
+					// fields, so it's tested here, prior to initiating the REST request,
+					// and without causing `getEntityRecords` resolution to occur.
+					const hasRecords = select.hasEntityRecords(
+						kind,
+						name,
+						query
+					);
+					if ( hasRecords ) {
+						return;
+					}
 				}
-			}
 
-			const record = await apiFetch( { path } );
-			dispatch.receiveEntityRecords( kind, name, record, query );
+				const response = await apiFetch( { path, parse: false } );
+				const record = await response.json();
+				const permissions = getUserPermissionsFromAllowHeader(
+					response.headers?.get( 'allow' )
+				);
+
+				const canUserResolutionsArgs = [];
+				const receiveUserPermissionArgs = {};
+				for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
+					receiveUserPermissionArgs[
+						getUserPermissionCacheKey( action, {
+							kind,
+							name,
+							id: key,
+						} )
+					] = permissions[ action ];
+
+					canUserResolutionsArgs.push( [
+						action,
+						{ kind, name, id: key },
+					] );
+				}
+
+				registry.batch( () => {
+					dispatch.receiveEntityRecords( kind, name, record, query );
+					dispatch.receiveUserPermissions(
+						receiveUserPermissionArgs
+					);
+					dispatch.finishResolutions(
+						'canUser',
+						canUserResolutionsArgs
+					);
+				} );
+			}
 		} finally {
 			dispatch.__unstableReleaseStoreLock( lock );
 		}
@@ -141,12 +231,12 @@ export const getEditedEntityRecord = forwardResolver( 'getEntityRecord' );
  */
 export const getEntityRecords =
 	( kind, name, query = {} ) =>
-	async ( { dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
+	async ( { dispatch, registry, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
 		const entityConfig = configs.find(
 			( config ) => config.name === name && config.kind === kind
 		);
-		if ( ! entityConfig || entityConfig?.__experimentalNoFetch ) {
+		if ( ! entityConfig ) {
 			return;
 		}
 
@@ -156,6 +246,14 @@ export const getEntityRecords =
 			{ exclusive: false }
 		);
 
+		const key = entityConfig.key || DEFAULT_ENTITY_KEY;
+
+		function getResolutionsArgs( records ) {
+			return records
+				.filter( ( record ) => record?.[ key ] )
+				.map( ( record ) => [ kind, name, record[ key ] ] );
+		}
+
 		try {
 			if ( query._fields ) {
 				// If requesting specific fields, items and query association to said
@@ -178,10 +276,68 @@ export const getEntityRecords =
 				...query,
 			} );
 
-			let records = Object.values( await apiFetch( { path } ) );
+			let records = [],
+				meta;
+			if ( entityConfig.supportsPagination && query.per_page !== -1 ) {
+				const response = await apiFetch( { path, parse: false } );
+				records = Object.values( await response.json() );
+				meta = {
+					totalItems: parseInt(
+						response.headers.get( 'X-WP-Total' )
+					),
+					totalPages: parseInt(
+						response.headers.get( 'X-WP-TotalPages' )
+					),
+				};
+			} else if (
+				query.per_page === -1 &&
+				query[ RECEIVE_INTERMEDIATE_RESULTS ] === true
+			) {
+				let page = 1;
+				let totalPages;
+
+				do {
+					const response = await apiFetch( {
+						path: addQueryArgs( path, { page, per_page: 100 } ),
+						parse: false,
+					} );
+					const pageRecords = Object.values( await response.json() );
+
+					totalPages = parseInt(
+						response.headers.get( 'X-WP-TotalPages' )
+					);
+
+					records.push( ...pageRecords );
+					registry.batch( () => {
+						dispatch.receiveEntityRecords(
+							kind,
+							name,
+							records,
+							query
+						);
+						dispatch.finishResolutions(
+							'getEntityRecord',
+							getResolutionsArgs( pageRecords )
+						);
+					} );
+					page++;
+				} while ( page <= totalPages );
+
+				meta = {
+					totalItems: records.length,
+					totalPages: 1,
+				};
+			} else {
+				records = Object.values( await apiFetch( { path } ) );
+				meta = {
+					totalItems: records.length,
+					totalPages: 1,
+				};
+			}
+
 			// If we request fields but the result doesn't contain the fields,
-			// explicitely set these fields as "undefined"
-			// that way we consider the query "fullfilled".
+			// explicitly set these fields as "undefined"
+			// that way we consider the query "fulfilled".
 			if ( query._fields ) {
 				records = records.map( ( record ) => {
 					query._fields.split( ',' ).forEach( ( field ) => {
@@ -194,29 +350,66 @@ export const getEntityRecords =
 				} );
 			}
 
-			dispatch.receiveEntityRecords( kind, name, records, query );
-
-			// When requesting all fields, the list of results can be used to
-			// resolve the `getEntityRecord` selector in addition to `getEntityRecords`.
-			// See https://github.com/WordPress/gutenberg/pull/26575
-			if ( ! query?._fields && ! query.context ) {
-				const key = entityConfig.key || DEFAULT_ENTITY_KEY;
-				const resolutionsArgs = records
-					.filter( ( record ) => record[ key ] )
-					.map( ( record ) => [ kind, name, record[ key ] ] );
-
-				dispatch( {
-					type: 'START_RESOLUTIONS',
-					selectorName: 'getEntityRecord',
-					args: resolutionsArgs,
-				} );
-				dispatch( {
-					type: 'FINISH_RESOLUTIONS',
-					selectorName: 'getEntityRecord',
-					args: resolutionsArgs,
-				} );
-			}
-		} finally {
+			registry.batch( () => {
+				dispatch.receiveEntityRecords(
+					kind,
+					name,
+					records,
+					query,
+					false,
+					undefined,
+					meta
+				);
+
+				// When requesting all fields, the list of results can be used to resolve
+				// the `getEntityRecord` and `canUser` selectors in addition to `getEntityRecords`.
+				// See https://github.com/WordPress/gutenberg/pull/26575
+				// See https://github.com/WordPress/gutenberg/pull/64504
+				if ( ! query?._fields && ! query.context ) {
+					const targetHints = records
+						.filter( ( record ) => record?.[ key ] )
+						.map( ( record ) => ( {
+							id: record[ key ],
+							permissions: getUserPermissionsFromAllowHeader(
+								record?._links?.self?.[ 0 ].targetHints.allow
+							),
+						} ) );
+
+					const canUserResolutionsArgs = [];
+					const receiveUserPermissionArgs = {};
+					for ( const targetHint of targetHints ) {
+						for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
+							canUserResolutionsArgs.push( [
+								action,
+								{ kind, name, id: targetHint.id },
+							] );
+
+							receiveUserPermissionArgs[
+								getUserPermissionCacheKey( action, {
+									kind,
+									name,
+									id: targetHint.id,
+								} )
+							] = targetHint.permissions[ action ];
+						}
+					}
+
+					dispatch.receiveUserPermissions(
+						receiveUserPermissionArgs
+					);
+					dispatch.finishResolutions(
+						'getEntityRecord',
+						getResolutionsArgs( records )
+					);
+					dispatch.finishResolutions(
+						'canUser',
+						canUserResolutionsArgs
+					);
+				}
+
+				dispatch.__unstableReleaseStoreLock( lock );
+			} );
+		} catch ( e ) {
 			dispatch.__unstableReleaseStoreLock( lock );
 		}
 	};
@@ -251,7 +444,7 @@ export const getCurrentTheme =
 export const getThemeSupports = forwardResolver( 'getCurrentTheme' );
 
 /**
- * Requests a preview from the from the Embed API.
+ * Requests a preview from the Embed API.
  *
  * @param {string} url URL to get the preview for.
  */
@@ -273,25 +466,23 @@ export const getEmbedPreview =
  * Checks whether the current user can perform the given action on the given
  * REST resource.
  *
- * @param {string}  requestedAction Action to check. One of: 'create', 'read', 'update',
- *                                  'delete'.
- * @param {string}  resource        REST resource to check, e.g. 'media' or 'posts'.
- * @param {?string} id              ID of the rest resource to check.
+ * @param {string}        requestedAction Action to check. One of: 'create', 'read', 'update',
+ *                                        'delete'.
+ * @param {string|Object} resource        Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }`
+ *                                        or REST base as a string - `media`.
+ * @param {?string}       id              ID of the rest resource to check.
  */
 export const canUser =
 	( requestedAction, resource, id ) =>
-	async ( { dispatch, registry } ) => {
-		const { hasStartedResolution } = registry.select( STORE_NAME );
-
-		const resourcePath = id ? `${ resource }/${ id }` : resource;
-		const retrievedActions = [ 'create', 'read', 'update', 'delete' ];
-
-		if ( ! retrievedActions.includes( requestedAction ) ) {
+	async ( { dispatch, registry, resolveSelect } ) => {
+		if ( ! ALLOWED_RESOURCE_ACTIONS.includes( requestedAction ) ) {
 			throw new Error( `'${ requestedAction }' is not a valid action.` );
 		}
 
+		const { hasStartedResolution } = registry.select( STORE_NAME );
+
 		// Prevent resolving the same resource twice.
-		for ( const relatedAction of retrievedActions ) {
+		for ( const relatedAction of ALLOWED_RESOURCE_ACTIONS ) {
 			if ( relatedAction === requestedAction ) {
 				continue;
 			}
@@ -305,10 +496,34 @@ export const canUser =
 			}
 		}
 
+		let resourcePath = null;
+		if ( typeof resource === 'object' ) {
+			if ( ! resource.kind || ! resource.name ) {
+				throw new Error( 'The entity resource object is not valid.' );
+			}
+
+			const configs = await resolveSelect.getEntitiesConfig(
+				resource.kind
+			);
+			const entityConfig = configs.find(
+				( config ) =>
+					config.name === resource.name &&
+					config.kind === resource.kind
+			);
+			if ( ! entityConfig ) {
+				return;
+			}
+
+			resourcePath =
+				entityConfig.baseURL + ( resource.id ? '/' + resource.id : '' );
+		} else {
+			resourcePath = `/wp/v2/${ resource }` + ( id ? '/' + id : '' );
+		}
+
 		let response;
 		try {
 			response = await apiFetch( {
-				path: `/wp/v2/${ resourcePath }`,
+				path: resourcePath,
 				method: 'OPTIONS',
 				parse: false,
 			} );
@@ -319,51 +534,41 @@ export const canUser =
 		}
 
 		// Optional chaining operator is used here because the API requests don't
-		// return the expected result in the native version. Instead, API requests
+		// return the expected result in the React native version. Instead, API requests
 		// only return the result, without including response properties like the headers.
-		const allowHeader = response.headers?.get( 'allow' );
-		const allowedMethods = allowHeader?.allow || allowHeader || '';
-
-		const permissions = {};
-		const methods = {
-			create: 'POST',
-			read: 'GET',
-			update: 'PUT',
-			delete: 'DELETE',
-		};
-		for ( const [ actionName, methodName ] of Object.entries( methods ) ) {
-			permissions[ actionName ] = allowedMethods.includes( methodName );
-		}
+		const permissions = getUserPermissionsFromAllowHeader(
+			response.headers?.get( 'allow' )
+		);
+		registry.batch( () => {
+			for ( const action of ALLOWED_RESOURCE_ACTIONS ) {
+				const key = getUserPermissionCacheKey( action, resource, id );
 
-		for ( const action of retrievedActions ) {
-			dispatch.receiveUserPermission(
-				`${ action }/${ resourcePath }`,
-				permissions[ action ]
-			);
-		}
+				dispatch.receiveUserPermission( key, permissions[ action ] );
+
+				// Mark related action resolutions as finished.
+				if ( action !== requestedAction ) {
+					dispatch.finishResolution( 'canUser', [
+						action,
+						resource,
+						id,
+					] );
+				}
+			}
+		} );
 	};
 
 /**
  * Checks whether the current user can perform the given action on the given
  * REST resource.
  *
- * @param {string} kind     Entity kind.
- * @param {string} name     Entity name.
- * @param {string} recordId Record's id.
+ * @param {string}        kind     Entity kind.
+ * @param {string}        name     Entity name.
+ * @param {number|string} recordId Record's id.
  */
 export const canUserEditEntityRecord =
 	( kind, name, recordId ) =>
 	async ( { dispatch } ) => {
-		const configs = await dispatch( getOrLoadEntitiesConfig( kind ) );
-		const entityConfig = configs.find(
-			( config ) => config.name === name && config.kind === kind
-		);
-		if ( ! entityConfig ) {
-			return;
-		}
-
-		const resource = entityConfig.__unstable_rest_base;
-		await dispatch( canUser( 'update', resource, recordId ) );
+		await dispatch( canUser( 'update', { kind, name, id: recordId } ) );
 	};
 
 /**
@@ -401,58 +606,6 @@ export const getAutosave =
 		await resolveSelect.getAutosaves( postType, postId );
 	};
 
-/**
- * Retrieve the frontend template used for a given link.
- *
- * @param {string} link Link.
- */
-export const __experimentalGetTemplateForLink =
-	( link ) =>
-	async ( { dispatch, resolveSelect } ) => {
-		// Ideally this should be using an apiFetch call
-		// We could potentially do so by adding a "filter" to the `wp_template` end point.
-		// Also it seems the returned object is not a regular REST API post type.
-		let template;
-		try {
-			template = await window
-				.fetch( addQueryArgs( link, { '_wp-find-template': true } ) )
-				.then( ( res ) => res.json() )
-				.then( ( { data } ) => data );
-		} catch ( e ) {
-			// For non-FSE themes, it is possible that this request returns an error.
-		}
-
-		if ( ! template ) {
-			return;
-		}
-
-		const record = await resolveSelect.getEntityRecord(
-			'postType',
-			'wp_template',
-			template.id
-		);
-
-		if ( record ) {
-			dispatch.receiveEntityRecords(
-				'postType',
-				'wp_template',
-				[ record ],
-				{
-					'find-template': link,
-				}
-			);
-		}
-	};
-
-__experimentalGetTemplateForLink.shouldInvalidate = ( action ) => {
-	return (
-		( action.type === 'RECEIVE_ITEMS' || action.type === 'REMOVE_ITEMS' ) &&
-		action.invalidateCache &&
-		action.kind === 'postType' &&
-		action.name === 'wp_template'
-	);
-};
-
 export const __experimentalGetCurrentGlobalStylesId =
 	() =>
 	async ( { dispatch, resolveSelect } ) => {
@@ -464,13 +617,17 @@ export const __experimentalGetCurrentGlobalStylesId =
 		const globalStylesURL =
 			activeThemes?.[ 0 ]?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]
 				?.href;
-		if ( globalStylesURL ) {
-			const globalStylesObject = await apiFetch( {
-				url: globalStylesURL,
-			} );
-			dispatch.__experimentalReceiveCurrentGlobalStylesId(
-				globalStylesObject.id
-			);
+		if ( ! globalStylesURL ) {
+			return;
+		}
+
+		// Regex matches the ID at the end of a URL or immediately before
+		// the query string.
+		const matches = globalStylesURL.match( /\/(\d+)(?:\?|$)/ );
+		const id = matches ? Number( matches[ 1 ] ) : null;
+
+		if ( id ) {
+			dispatch.__experimentalReceiveCurrentGlobalStylesId( id );
 		}
 	};
 
@@ -478,8 +635,9 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles =
 	() =>
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
+		// Please adjust the preloaded requests if this changes!
 		const themeGlobalStyles = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeBaseGlobalStyles(
 			currentTheme.stylesheet,
@@ -491,8 +649,9 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 	() =>
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
+		// Please adjust the preloaded requests if this changes!
 		const variations = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeGlobalStyleVariations(
 			currentTheme.stylesheet,
@@ -500,20 +659,55 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 		);
 	};
 
+/**
+ * Fetches and returns the revisions of the current global styles theme.
+ */
+export const getCurrentThemeGlobalStylesRevisions =
+	() =>
+	async ( { resolveSelect, dispatch } ) => {
+		const globalStylesId =
+			await resolveSelect.__experimentalGetCurrentGlobalStylesId();
+		const record = globalStylesId
+			? await resolveSelect.getEntityRecord(
+					'root',
+					'globalStyles',
+					globalStylesId
+			  )
+			: undefined;
+		const revisionsURL = record?._links?.[ 'version-history' ]?.[ 0 ]?.href;
+
+		if ( revisionsURL ) {
+			const resetRevisions = await apiFetch( {
+				url: revisionsURL,
+			} );
+			const revisions = resetRevisions?.map( ( revision ) =>
+				Object.fromEntries(
+					Object.entries( revision ).map( ( [ key, value ] ) => [
+						camelCase( key ),
+						value,
+					] )
+				)
+			);
+			dispatch.receiveThemeGlobalStyleRevisions(
+				globalStylesId,
+				revisions
+			);
+		}
+	};
+
+getCurrentThemeGlobalStylesRevisions.shouldInvalidate = ( action ) => {
+	return (
+		action.type === 'SAVE_ENTITY_RECORD_FINISH' &&
+		action.kind === 'root' &&
+		! action.error &&
+		action.name === 'globalStyles'
+	);
+};
+
 export const getBlockPatterns =
 	() =>
 	async ( { dispatch } ) => {
-		const restPatterns = await apiFetch( {
-			path: '/wp/v2/block-patterns/patterns',
-		} );
-		const patterns = restPatterns?.map( ( pattern ) =>
-			Object.fromEntries(
-				Object.entries( pattern ).map( ( [ key, value ] ) => [
-					camelCase( key ),
-					value,
-				] )
-			)
-		);
+		const patterns = await fetchBlockPatterns();
 		dispatch( { type: 'RECEIVE_BLOCK_PATTERNS', patterns } );
 	};
 
@@ -525,3 +719,334 @@ export const getBlockPatternCategories =
 		} );
 		dispatch( { type: 'RECEIVE_BLOCK_PATTERN_CATEGORIES', categories } );
 	};
+
+export const getUserPatternCategories =
+	() =>
+	async ( { dispatch, resolveSelect } ) => {
+		const patternCategories = await resolveSelect.getEntityRecords(
+			'taxonomy',
+			'wp_pattern_category',
+			{
+				per_page: -1,
+				_fields: 'id,name,description,slug',
+				context: 'view',
+			}
+		);
+
+		const mappedPatternCategories =
+			patternCategories?.map( ( userCategory ) => ( {
+				...userCategory,
+				label: decodeEntities( userCategory.name ),
+				name: userCategory.slug,
+			} ) ) || [];
+
+		dispatch( {
+			type: 'RECEIVE_USER_PATTERN_CATEGORIES',
+			patternCategories: mappedPatternCategories,
+		} );
+	};
+
+export const getNavigationFallbackId =
+	() =>
+	async ( { dispatch, select, registry } ) => {
+		const fallback = await apiFetch( {
+			path: addQueryArgs( '/wp-block-editor/v1/navigation-fallback', {
+				_embed: true,
+			} ),
+		} );
+
+		const record = fallback?._embedded?.self;
+
+		registry.batch( () => {
+			dispatch.receiveNavigationFallbackId( fallback?.id );
+
+			if ( ! record ) {
+				return;
+			}
+
+			// If the fallback is already in the store, don't invalidate navigation queries.
+			// Otherwise, invalidate the cache for the scenario where there were no Navigation
+			// posts in the state and the fallback created one.
+			const existingFallbackEntityRecord = select.getEntityRecord(
+				'postType',
+				'wp_navigation',
+				fallback.id
+			);
+			const invalidateNavigationQueries = ! existingFallbackEntityRecord;
+			dispatch.receiveEntityRecords(
+				'postType',
+				'wp_navigation',
+				record,
+				undefined,
+				invalidateNavigationQueries
+			);
+
+			// Resolve to avoid further network requests.
+			dispatch.finishResolution( 'getEntityRecord', [
+				'postType',
+				'wp_navigation',
+				fallback.id,
+			] );
+		} );
+	};
+
+export const getDefaultTemplateId =
+	( query ) =>
+	async ( { dispatch, registry, resolveSelect } ) => {
+		const template = await apiFetch( {
+			path: addQueryArgs( '/wp/v2/templates/lookup', query ),
+		} );
+		// Wait for the the entities config to be loaded, otherwise receiving
+		// the template as an entity will not work.
+		await resolveSelect.getEntitiesConfig( 'postType' );
+		// Endpoint may return an empty object if no template is found.
+		if ( template?.id ) {
+			registry.batch( () => {
+				dispatch.receiveDefaultTemplateId( query, template.id );
+				dispatch.receiveEntityRecords( 'postType', 'wp_template', [
+					template,
+				] );
+				// Avoid further network requests.
+				dispatch.finishResolution( 'getEntityRecord', [
+					'postType',
+					'wp_template',
+					template.id,
+				] );
+			} );
+		}
+	};
+
+/**
+ * Requests an entity's revisions from the REST API.
+ *
+ * @param {string}           kind      Entity kind.
+ * @param {string}           name      Entity name.
+ * @param {number|string}    recordKey The key of the entity record whose revisions you want to fetch.
+ * @param {Object|undefined} query     Optional object of query parameters to
+ *                                     include with request. If requesting specific
+ *                                     fields, fields must always include the ID.
+ */
+export const getRevisions =
+	( kind, name, recordKey, query = {} ) =>
+	async ( { dispatch, registry, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.name === name && config.kind === kind
+		);
+
+		if ( ! entityConfig ) {
+			return;
+		}
+
+		if ( query._fields ) {
+			// If requesting specific fields, items and query association to said
+			// records are stored by ID reference. Thus, fields must always include
+			// the ID.
+			query = {
+				...query,
+				_fields: [
+					...new Set( [
+						...( getNormalizedCommaSeparable( query._fields ) ||
+							[] ),
+						entityConfig.revisionKey || DEFAULT_ENTITY_KEY,
+					] ),
+				].join(),
+			};
+		}
+
+		const path = addQueryArgs(
+			entityConfig.getRevisionsUrl( recordKey ),
+			query
+		);
+
+		let records, response;
+		const meta = {};
+		const isPaginated =
+			entityConfig.supportsPagination && query.per_page !== -1;
+		try {
+			response = await apiFetch( { path, parse: ! isPaginated } );
+		} catch ( error ) {
+			// Do nothing if our request comes back with an API error.
+			return;
+		}
+
+		if ( response ) {
+			if ( isPaginated ) {
+				records = Object.values( await response.json() );
+				meta.totalItems = parseInt(
+					response.headers.get( 'X-WP-Total' )
+				);
+			} else {
+				records = Object.values( response );
+			}
+
+			// If we request fields but the result doesn't contain the fields,
+			// explicitly set these fields as "undefined"
+			// that way we consider the query "fulfilled".
+			if ( query._fields ) {
+				records = records.map( ( record ) => {
+					query._fields.split( ',' ).forEach( ( field ) => {
+						if ( ! record.hasOwnProperty( field ) ) {
+							record[ field ] = undefined;
+						}
+					} );
+
+					return record;
+				} );
+			}
+
+			registry.batch( () => {
+				dispatch.receiveRevisions(
+					kind,
+					name,
+					recordKey,
+					records,
+					query,
+					false,
+					meta
+				);
+
+				// When requesting all fields, the list of results can be used to
+				// resolve the `getRevision` selector in addition to `getRevisions`.
+				if ( ! query?._fields && ! query.context ) {
+					const key = entityConfig.key || DEFAULT_ENTITY_KEY;
+					const resolutionsArgs = records
+						.filter( ( record ) => record[ key ] )
+						.map( ( record ) => [
+							kind,
+							name,
+							recordKey,
+							record[ key ],
+						] );
+
+					dispatch.finishResolutions(
+						'getRevision',
+						resolutionsArgs
+					);
+				}
+			} );
+		}
+	};
+
+// Invalidate cache when a new revision is created.
+getRevisions.shouldInvalidate = ( action, kind, name, recordKey ) =>
+	action.type === 'SAVE_ENTITY_RECORD_FINISH' &&
+	name === action.name &&
+	kind === action.kind &&
+	! action.error &&
+	recordKey === action.recordId;
+
+/**
+ * Requests a specific Entity revision from the REST API.
+ *
+ * @param {string}           kind        Entity kind.
+ * @param {string}           name        Entity name.
+ * @param {number|string}    recordKey   The key of the entity record whose revisions you want to fetch.
+ * @param {number|string}    revisionKey The revision's key.
+ * @param {Object|undefined} query       Optional object of query parameters to
+ *                                       include with request. If requesting specific
+ *                                       fields, fields must always include the ID.
+ */
+export const getRevision =
+	( kind, name, recordKey, revisionKey, query ) =>
+	async ( { dispatch, resolveSelect } ) => {
+		const configs = await resolveSelect.getEntitiesConfig( kind );
+		const entityConfig = configs.find(
+			( config ) => config.name === name && config.kind === kind
+		);
+
+		if ( ! entityConfig ) {
+			return;
+		}
+
+		if ( query !== undefined && query._fields ) {
+			// If requesting specific fields, items and query association to said
+			// records are stored by ID reference. Thus, fields must always include
+			// the ID.
+			query = {
+				...query,
+				_fields: [
+					...new Set( [
+						...( getNormalizedCommaSeparable( query._fields ) ||
+							[] ),
+						entityConfig.revisionKey || DEFAULT_ENTITY_KEY,
+					] ),
+				].join(),
+			};
+		}
+		const path = addQueryArgs(
+			entityConfig.getRevisionsUrl( recordKey, revisionKey ),
+			query
+		);
+
+		let record;
+		try {
+			record = await apiFetch( { path } );
+		} catch ( error ) {
+			// Do nothing if our request comes back with an API error.
+			return;
+		}
+
+		if ( record ) {
+			dispatch.receiveRevisions( kind, name, recordKey, record, query );
+		}
+	};
+
+/**
+ * Requests a specific post type options from the REST API.
+ *
+ * @param {string} postType Post type slug.
+ */
+export const getRegisteredPostMeta =
+	( postType ) =>
+	async ( { dispatch, resolveSelect } ) => {
+		let options;
+		try {
+			const {
+				rest_namespace: restNamespace = 'wp/v2',
+				rest_base: restBase,
+			} = ( await resolveSelect.getPostType( postType ) ) || {};
+			options = await apiFetch( {
+				path: `${ restNamespace }/${ restBase }/?context=edit`,
+				method: 'OPTIONS',
+			} );
+		} catch ( error ) {
+			// Do nothing if the request comes back with an API error.
+			return;
+		}
+
+		if ( options ) {
+			dispatch.receiveRegisteredPostMeta(
+				postType,
+				options?.schema?.properties?.meta?.properties
+			);
+		}
+	};
+
+/**
+ * Requests entity configs for the given kind from the REST API.
+ *
+ * @param {string} kind Entity kind.
+ */
+export const getEntitiesConfig =
+	( kind ) =>
+	async ( { dispatch } ) => {
+		const loader = additionalEntityConfigLoaders.find(
+			( l ) => l.kind === kind
+		);
+
+		if ( ! loader ) {
+			return;
+		}
+
+		try {
+			const configs = await loader.loadEntities();
+			if ( ! configs.length ) {
+				return;
+			}
+
+			dispatch.addEntities( configs );
+		} catch {
+			// Do nothing if the request comes back with an API error.
+		}
+	};
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index 4151a94824acb5..7f4b0d38846468 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-import { set, map, find, get, filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
 
@@ -15,10 +9,21 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { STORE_NAME } from './name';
-import { getQueriedItems } from './queried-data';
+import {
+	getQueriedItems,
+	getQueriedTotalItems,
+	getQueriedTotalPages,
+} from './queried-data';
 import { DEFAULT_ENTITY_KEY } from './entities';
-import { getNormalizedCommaSeparable, isRawAttribute } from './utils';
+import {
+	getNormalizedCommaSeparable,
+	isRawAttribute,
+	setNestedValue,
+	isNumericID,
+	getUserPermissionCacheKey,
+} from './utils';
 import type * as ET from './entity-types';
+import type { UndoManager } from '@wordpress/undo-manager';
 
 // This is an incomplete, high-level approximation of the State type.
 // It makes the selectors slightly more safe, but is intended to evolve
@@ -35,8 +40,14 @@ export interface State {
 	entities: EntitiesState;
 	themeBaseGlobalStyles: Record< string, Object >;
 	themeGlobalStyleVariations: Record< string, string >;
-	undo: UndoState;
+	themeGlobalStyleRevisions: Record< number, Object >;
+	undoManager: UndoManager;
+	userPermissions: Record< string, boolean >;
 	users: UserState;
+	navigationFallbackId: EntityRecordKey;
+	userPatternCategories: Array< UserPatternCategory >;
+	defaultTemplates: Record< string, string >;
+	registeredPostMeta: Record< string, Object >;
 }
 
 type EntityRecordKey = string | number;
@@ -46,9 +57,31 @@ interface EntitiesState {
 	records: Record< string, Record< string, EntityState< ET.EntityRecord > > >;
 }
 
+interface QueriedData {
+	items: Record< ET.Context, Record< number, ET.EntityRecord > >;
+	itemIsComplete: Record< ET.Context, Record< number, boolean > >;
+	queries: Record< ET.Context, Record< string, Array< number > > >;
+}
+
+type RevisionRecord =
+	| Record< ET.Context, Record< number, ET.PostRevision > >
+	| Record< ET.Context, Record< number, ET.GlobalStylesRevision > >;
+
+interface RevisionsQueriedData {
+	items: RevisionRecord;
+	itemIsComplete: Record< ET.Context, Record< number, boolean > >;
+	queries: Record< ET.Context, Record< string, Array< number > > >;
+}
+
 interface EntityState< EntityRecord extends ET.EntityRecord > {
 	edits: Record< string, Partial< EntityRecord > >;
-	saving: Record< string, { pending: boolean } >;
+	saving: Record<
+		string,
+		Partial< { pending: boolean; isAutosave: boolean; error: Error } >
+	>;
+	deleting: Record< string, Partial< { pending: boolean; error: Error } > >;
+	queriedData: QueriedData;
+	revisions?: RevisionsQueriedData;
 }
 
 interface EntityConfig {
@@ -56,16 +89,25 @@ interface EntityConfig {
 	kind: string;
 }
 
-interface UndoState extends Array< Object > {
-	flattenedUndo: unknown;
-	offset: number;
-}
-
 interface UserState {
 	queries: Record< string, EntityRecordKey[] >;
 	byId: Record< EntityRecordKey, ET.User< 'edit' > >;
 }
 
+type TemplateQuery = {
+	slug?: string;
+	is_custom?: boolean;
+	ignore_empty?: boolean;
+};
+
+export interface UserPatternCategory {
+	id: number;
+	name: string;
+	label: string;
+	slug: string;
+	description: string;
+}
+
 type Optional< T > = T | undefined;
 
 /**
@@ -73,6 +115,15 @@ type Optional< T > = T | undefined;
  */
 type GetRecordsHttpQuery = Record< string, any >;
 
+/**
+ * Arguments for EntityRecord selectors.
+ */
+type EntityRecordArgs =
+	| [ string, string, EntityRecordKey ]
+	| [ string, string, EntityRecordKey, GetRecordsHttpQuery ];
+
+type EntityResource = { kind: string; name: string; id?: EntityRecordKey };
+
 /**
  * Shared reference to an empty object for cases where it is important to avoid
  * returning a new object reference on every invocation, as in a connected or
@@ -86,8 +137,8 @@ const EMPTY_OBJECT = {};
  * Returns true if a request is in progress for embed preview data, or false
  * otherwise.
  *
- * @param  state Data state.
- * @param  url   URL the preview would be for.
+ * @param state Data state.
+ * @param url   URL the preview would be for.
  *
  * @return Whether a request is in progress for an embed preview.
  */
@@ -105,9 +156,9 @@ export const isRequestingEmbedPreview = createRegistrySelector(
  *
  * @deprecated since 11.3. Callers should use `select( 'core' ).getUsers({ who: 'authors' })` instead.
  *
- * @param  state Data state.
- * @param  query Optional object of query parameters to
- *               include with request.
+ * @param      state Data state.
+ * @param      query Optional object of query parameters to
+ *                   include with request. For valid query parameters see the [Users page](https://developer.wordpress.org/rest-api/reference/users/) in the REST API Handbook and see the arguments for [List Users](https://developer.wordpress.org/rest-api/reference/users/#list-users) and [Retrieve a User](https://developer.wordpress.org/rest-api/reference/users/#retrieve-a-user).
  * @return Authors list.
  */
 export function getAuthors(
@@ -129,7 +180,7 @@ export function getAuthors(
 /**
  * Returns the current user.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return Current user object.
  */
@@ -140,16 +191,16 @@ export function getCurrentUser( state: State ): ET.User< 'edit' > {
 /**
  * Returns all the users returned by a query ID.
  *
- * @param  state   Data state.
- * @param  queryID Query ID.
+ * @param state   Data state.
+ * @param queryID Query ID.
  *
  * @return Users list.
  */
 export const getUserQueryResults = createSelector(
 	( state: State, queryID: string ): ET.User< 'edit' >[] => {
-		const queryResults = state.users.queries[ queryID ];
+		const queryResults = state.users.queries[ queryID ] ?? [];
 
-		return map( queryResults, ( id ) => state.users.byId[ id ] );
+		return queryResults.map( ( id ) => state.users.byId[ id ] );
 	},
 	( state: State, queryID: string ) => [
 		state.users.queries[ queryID ],
@@ -161,8 +212,8 @@ export const getUserQueryResults = createSelector(
  * Returns the loaded entities for the given kind.
  *
  * @deprecated since WordPress 6.0. Use getEntitiesConfig instead
- * @param  state Data state.
- * @param  kind  Entity kind.
+ * @param      state Data state.
+ * @param      kind  Entity kind.
  *
  * @return Array of entities with config matching kind.
  */
@@ -177,22 +228,25 @@ export function getEntitiesByKind( state: State, kind: string ): Array< any > {
 /**
  * Returns the loaded entities for the given kind.
  *
- * @param  state Data state.
- * @param  kind  Entity kind.
+ * @param state Data state.
+ * @param kind  Entity kind.
  *
  * @return Array of entities with config matching kind.
  */
-export function getEntitiesConfig( state: State, kind: string ): Array< any > {
-	return filter( state.entities.config, { kind } );
-}
-
+export const getEntitiesConfig = createSelector(
+	( state: State, kind: string ): Array< any > =>
+		state.entities.config.filter( ( entity ) => entity.kind === kind ),
+	/* eslint-disable @typescript-eslint/no-unused-vars */
+	( state: State, kind: string ) => state.entities.config
+	/* eslint-enable @typescript-eslint/no-unused-vars */
+);
 /**
  * Returns the entity config given its kind and name.
  *
  * @deprecated since WordPress 6.0. Use getEntityConfig instead
- * @param  state Data state.
- * @param  kind  Entity kind.
- * @param  name  Entity name.
+ * @param      state Data state.
+ * @param      kind  Entity kind.
+ * @param      name  Entity name.
  *
  * @return Entity config
  */
@@ -207,9 +261,9 @@ export function getEntity( state: State, kind: string, name: string ): any {
 /**
  * Returns the entity config given its kind and name.
  *
- * @param  state Data state.
- * @param  kind  Entity kind.
- * @param  name  Entity name.
+ * @param state Data state.
+ * @param kind  Entity kind.
+ * @param name  Entity name.
  *
  * @return Entity config
  */
@@ -218,7 +272,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
+	);
 }
 
 /**
@@ -249,25 +305,26 @@ export interface GetEntityRecord {
 	<
 		EntityRecord extends
 			| ET.EntityRecord< any >
-			| Partial< ET.EntityRecord< any > >
+			| Partial< ET.EntityRecord< any > >,
 	>(
 		state: State,
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	): EntityRecord | undefined;
 
 	CurriedSignature: <
 		EntityRecord extends
 			| ET.EntityRecord< any >
-			| Partial< ET.EntityRecord< any > >
+			| Partial< ET.EntityRecord< any > >,
 	>(
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	) => EntityRecord | undefined;
+	__unstableNormalizeArgs?: ( args: EntityRecordArgs ) => EntityRecordArgs;
 }
 
 /**
@@ -275,12 +332,12 @@ export interface GetEntityRecord {
  * yet received, undefined if the value entity is known to not exist, or the
  * entity object if it exists and is received.
  *
- * @param  state State tree
- * @param  kind  Entity kind.
- * @param  name  Entity name.
- * @param  key   Record's key
- * @param  query Optional query. If requesting specific
- *               fields, fields must always include the ID.
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param key   Optional record's key. If requesting a global record (e.g. site settings), the key can be omitted. If requesting a specific item, the key must always be included.
+ * @param query Optional query. If requesting specific
+ *              fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available "Retrieve a [Entity kind]".
  *
  * @return Record.
  */
@@ -288,19 +345,16 @@ export const getEntityRecord = createSelector(
 	( <
 		EntityRecord extends
 			| ET.EntityRecord< any >
-			| Partial< ET.EntityRecord< any > >
+			| Partial< ET.EntityRecord< any > >,
 	>(
 		state: State,
 		kind: string,
 		name: string,
-		key: EntityRecordKey,
+		key?: EntityRecordKey,
 		query?: GetRecordsHttpQuery
 	): EntityRecord | undefined => {
-		const queriedState = get( state.entities.records, [
-			kind,
-			name,
-			'queriedData',
-		] );
+		const queriedState =
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData;
 		if ( ! queriedState ) {
 			return undefined;
 		}
@@ -321,8 +375,11 @@ export const getEntityRecord = createSelector(
 			const fields = getNormalizedCommaSeparable( query._fields ) ?? [];
 			for ( let f = 0; f < fields.length; f++ ) {
 				const field = fields[ f ].split( '.' );
-				const value = get( item, field );
-				set( filteredItem, field, value );
+				let value = item;
+				field.forEach( ( fieldName ) => {
+					value = value?.[ fieldName ];
+				} );
+				setNestedValue( filteredItem, field, value );
 			}
 			return filteredItem as EntityRecord;
 		}
@@ -332,38 +389,45 @@ export const getEntityRecord = createSelector(
 	( state: State, kind, name, recordId, query ) => {
 		const context = query?.context ?? 'default';
 		return [
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'items',
-				context,
-				recordId,
-			] ),
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'itemIsComplete',
-				context,
-				recordId,
-			] ),
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData?.items[
+				context
+			]?.[ recordId ],
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData
+				?.itemIsComplete[ context ]?.[ recordId ],
 		];
 	}
 ) as GetEntityRecord;
 
+/**
+ * Normalizes `recordKey`s that look like numeric IDs to numbers.
+ *
+ * @param args EntityRecordArgs the selector arguments.
+ * @return EntityRecordArgs the normalized arguments.
+ */
+getEntityRecord.__unstableNormalizeArgs = (
+	args: EntityRecordArgs
+): EntityRecordArgs => {
+	const newArgs = [ ...args ] as EntityRecordArgs;
+	const recordKey = newArgs?.[ 2 ];
+
+	// If recordKey looks to be a numeric ID then coerce to number.
+	newArgs[ 2 ] = isNumericID( recordKey ) ? Number( recordKey ) : recordKey;
+
+	return newArgs;
+};
+
 /**
  * Returns the Entity's record object by key. Doesn't trigger a resolver nor requests the entity records from the API if the entity record isn't available in the local state.
  *
- * @param  state State tree
- * @param  kind  Entity kind.
- * @param  name  Entity name.
- * @param  key   Record's key
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param key   Record's key
  *
  * @return Record.
  */
 export function __experimentalGetEntityRecordNoResolver<
-	EntityRecord extends ET.EntityRecord< any >
+	EntityRecord extends ET.EntityRecord< any >,
 >( state: State, kind: string, name: string, key: EntityRecordKey ) {
 	return getEntityRecord< EntityRecord >( state, kind, name, key );
 }
@@ -372,10 +436,10 @@ export function __experimentalGetEntityRecordNoResolver<
  * Returns the entity's record object by key,
  * with its attributes mapped to their raw values.
  *
- * @param  state State tree.
- * @param  kind  Entity kind.
- * @param  name  Entity name.
- * @param  key   Record's key.
+ * @param state State tree.
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param key   Record's key.
  *
  * @return Object with the entity's raw attributes.
  */
@@ -401,11 +465,7 @@ export const getRawEntityRecord = createSelector(
 					// Because edits are the "raw" attribute values,
 					// we return those from record selectors to make rendering,
 					// comparisons, and joins with edits easier.
-					accumulator[ _key ] = get(
-						record[ _key ],
-						'raw',
-						record[ _key ]
-					);
+					accumulator[ _key ] = record[ _key ]?.raw ?? record[ _key ];
 				} else {
 					accumulator[ _key ] = record[ _key ];
 				}
@@ -423,22 +483,11 @@ export const getRawEntityRecord = createSelector(
 		const context = query?.context ?? 'default';
 		return [
 			state.entities.config,
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'items',
-				context,
-				recordId,
-			] ),
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'itemIsComplete',
-				context,
-				recordId,
-			] ),
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData?.items[
+				context
+			]?.[ recordId ],
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData
+				?.itemIsComplete[ context ]?.[ recordId ],
 		];
 	}
 );
@@ -447,10 +496,10 @@ export const getRawEntityRecord = createSelector(
  * Returns true if records have been received for the given set of parameters,
  * or false otherwise.
  *
- * @param  state State tree
- * @param  kind  Entity kind.
- * @param  name  Entity name.
- * @param  query Optional terms query.
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param query Optional terms query. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
  *
  * @return  Whether entity records have been received.
  */
@@ -475,7 +524,7 @@ export interface GetEntityRecords {
 	<
 		EntityRecord extends
 			| ET.EntityRecord< any >
-			| Partial< ET.EntityRecord< any > >
+			| Partial< ET.EntityRecord< any > >,
 	>(
 		state: State,
 		kind: string,
@@ -486,7 +535,7 @@ export interface GetEntityRecords {
 	CurriedSignature: <
 		EntityRecord extends
 			| ET.EntityRecord< any >
-			| Partial< ET.EntityRecord< any > >
+			| Partial< ET.EntityRecord< any > >,
 	>(
 		kind: string,
 		name: string,
@@ -497,18 +546,18 @@ export interface GetEntityRecords {
 /**
  * Returns the Entity's records.
  *
- * @param  state State tree
- * @param  kind  Entity kind.
- * @param  name  Entity name.
- * @param  query Optional terms query. If requesting specific
- *               fields, fields must always include the ID.
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param query Optional terms query. If requesting specific
+ *              fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
  *
  * @return Records.
  */
 export const getEntityRecords = ( <
 	EntityRecord extends
 		| ET.EntityRecord< any >
-		| Partial< ET.EntityRecord< any > >
+		| Partial< ET.EntityRecord< any > >,
 >(
 	state: State,
 	kind: string,
@@ -517,17 +566,80 @@ export const getEntityRecords = ( <
 ): EntityRecord[] | null => {
 	// Queried data state is prepopulated for all known entities. If this is not
 	// assigned for the given parameters, then it is known to not exist.
-	const queriedState = get( state.entities.records, [
-		kind,
-		name,
-		'queriedData',
-	] );
+	const queriedState =
+		state.entities.records?.[ kind ]?.[ name ]?.queriedData;
 	if ( ! queriedState ) {
 		return null;
 	}
 	return getQueriedItems( queriedState, query );
 } ) as GetEntityRecords;
 
+/**
+ * Returns the Entity's total available records for a given query (ignoring pagination).
+ *
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param query Optional terms query. If requesting specific
+ *              fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+ *
+ * @return number | null.
+ */
+export const getEntityRecordsTotalItems = (
+	state: State,
+	kind: string,
+	name: string,
+	query: GetRecordsHttpQuery
+): number | null => {
+	// Queried data state is prepopulated for all known entities. If this is not
+	// assigned for the given parameters, then it is known to not exist.
+	const queriedState =
+		state.entities.records?.[ kind ]?.[ name ]?.queriedData;
+	if ( ! queriedState ) {
+		return null;
+	}
+	return getQueriedTotalItems( queriedState, query );
+};
+
+/**
+ * Returns the number of available pages for the given query.
+ *
+ * @param state State tree
+ * @param kind  Entity kind.
+ * @param name  Entity name.
+ * @param query Optional terms query. If requesting specific
+ *              fields, fields must always include the ID. For valid query parameters see the [Reference](https://developer.wordpress.org/rest-api/reference/) in the REST API Handbook and select the entity kind. Then see the arguments available for "List [Entity kind]s".
+ *
+ * @return number | null.
+ */
+export const getEntityRecordsTotalPages = (
+	state: State,
+	kind: string,
+	name: string,
+	query: GetRecordsHttpQuery
+): number | null => {
+	// Queried data state is prepopulated for all known entities. If this is not
+	// assigned for the given parameters, then it is known to not exist.
+	const queriedState =
+		state.entities.records?.[ kind ]?.[ name ]?.queriedData;
+	if ( ! queriedState ) {
+		return null;
+	}
+	if ( query.per_page === -1 ) {
+		return 1;
+	}
+	const totalItems = getQueriedTotalItems( queriedState, query );
+	if ( ! totalItems ) {
+		return totalItems;
+	}
+	// If `per_page` is not set and the query relies on the defaults of the
+	// REST endpoint, get the info from query's meta.
+	if ( ! query.per_page ) {
+		return getQueriedTotalPages( queriedState, query );
+	}
+	return Math.ceil( totalItems / query.per_page );
+};
+
 type DirtyEntityRecord = {
 	title: string;
 	key: EntityRecordKey;
@@ -537,7 +649,7 @@ type DirtyEntityRecord = {
 /**
  * Returns the list of dirty entity records.
  *
- * @param  state State tree.
+ * @param state State tree.
  *
  * @return The list of updated records
  */
@@ -594,7 +706,7 @@ export const __experimentalGetDirtyEntityRecords = createSelector(
 /**
  * Returns the list of entities currently being saved.
  *
- * @param  state State tree.
+ * @param state State tree.
  *
  * @return The list of records being saved.
  */
@@ -646,10 +758,10 @@ export const __experimentalGetEntitiesBeingSaved = createSelector(
 /**
  * Returns the specified entity record's edits.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return The entity record's edits.
  */
@@ -659,12 +771,9 @@ export function getEntityRecordEdits(
 	name: string,
 	recordId: EntityRecordKey
 ): Optional< any > {
-	return get( state.entities.records, [
-		kind,
-		name,
-		'edits',
-		recordId as string | number,
-	] );
+	return state.entities.records?.[ kind ]?.[ name ]?.edits?.[
+		recordId as string | number
+	];
 }
 
 /**
@@ -674,10 +783,10 @@ export function getEntityRecordEdits(
  * are not considered for change detection.
  * They are defined in the entity's config.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return The entity record's non transient edits.
  */
@@ -702,7 +811,7 @@ export const getEntityRecordNonTransientEdits = createSelector(
 	},
 	( state: State, kind: string, name: string, recordId: EntityRecordKey ) => [
 		state.entities.config,
-		get( state.entities.records, [ kind, name, 'edits', recordId ] ),
+		state.entities.records?.[ kind ]?.[ name ]?.edits?.[ recordId ],
 	]
 );
 
@@ -710,10 +819,10 @@ export const getEntityRecordNonTransientEdits = createSelector(
  * Returns true if the specified entity record has edits,
  * and false otherwise.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return Whether the entity record has edits or not.
  */
@@ -734,10 +843,10 @@ export function hasEditsForEntityRecord(
 /**
  * Returns the specified entity record, merged with its edits.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return The entity record, merged with its edits.
  */
@@ -747,10 +856,21 @@ export const getEditedEntityRecord = createSelector(
 		kind: string,
 		name: string,
 		recordId: EntityRecordKey
-	): ET.Updatable< EntityRecord > | undefined => ( {
-		...getRawEntityRecord( state, kind, name, recordId ),
-		...getEntityRecordEdits( state, kind, name, recordId ),
-	} ),
+	): ET.Updatable< EntityRecord > | false => {
+		const raw = getRawEntityRecord( state, kind, name, recordId );
+		const edited = getEntityRecordEdits( state, kind, name, recordId );
+		// Never return a non-falsy empty object. Unfortunately we can't return
+		// undefined or null because we were previously returning an empty
+		// object, so trying to read properties from the result would throw.
+		// Using false here is a workaround to avoid breaking changes.
+		if ( ! raw && ! edited ) {
+			return false;
+		}
+		return {
+			...raw,
+			...edited,
+		};
+	},
 	(
 		state: State,
 		kind: string,
@@ -761,23 +881,12 @@ export const getEditedEntityRecord = createSelector(
 		const context = query?.context ?? 'default';
 		return [
 			state.entities.config,
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'items',
-				context,
-				recordId,
-			] ),
-			get( state.entities.records, [
-				kind,
-				name,
-				'queriedData',
-				'itemIsComplete',
-				context,
-				recordId,
-			] ),
-			get( state.entities.records, [ kind, name, 'edits', recordId ] ),
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData.items[
+				context
+			]?.[ recordId ],
+			state.entities.records?.[ kind ]?.[ name ]?.queriedData
+				.itemIsComplete[ context ]?.[ recordId ],
+			state.entities.records?.[ kind ]?.[ name ]?.edits?.[ recordId ],
 		];
 	}
 );
@@ -785,10 +894,10 @@ export const getEditedEntityRecord = createSelector(
 /**
  * Returns true if the specified entity record is autosaving, and false otherwise.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return Whether the entity record is autosaving or not.
  */
@@ -798,21 +907,18 @@ export function isAutosavingEntityRecord(
 	name: string,
 	recordId: EntityRecordKey
 ): boolean {
-	const { pending, isAutosave } = get(
-		state.entities.records,
-		[ kind, name, 'saving', recordId ],
-		{}
-	);
+	const { pending, isAutosave } =
+		state.entities.records?.[ kind ]?.[ name ]?.saving?.[ recordId ] ?? {};
 	return Boolean( pending && isAutosave );
 }
 
 /**
  * Returns true if the specified entity record is saving, and false otherwise.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return Whether the entity record is saving or not.
  */
@@ -822,20 +928,20 @@ export function isSavingEntityRecord(
 	name: string,
 	recordId: EntityRecordKey
 ): boolean {
-	return get(
-		state.entities.records,
-		[ kind, name, 'saving', recordId as EntityRecordKey, 'pending' ],
-		false
+	return (
+		state.entities.records?.[ kind ]?.[ name ]?.saving?.[
+			recordId as EntityRecordKey
+		]?.pending ?? false
 	);
 }
 
 /**
  * Returns true if the specified entity record is deleting, and false otherwise.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return Whether the entity record is deleting or not.
  */
@@ -845,20 +951,20 @@ export function isDeletingEntityRecord(
 	name: string,
 	recordId: EntityRecordKey
 ): boolean {
-	return get(
-		state.entities.records,
-		[ kind, name, 'deleting', recordId, 'pending' ],
-		false
+	return (
+		state.entities.records?.[ kind ]?.[ name ]?.deleting?.[
+			recordId as EntityRecordKey
+		]?.pending ?? false
 	);
 }
 
 /**
  * Returns the specified entity record's last save error.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return The entity record's save error.
  */
@@ -868,22 +974,17 @@ export function getLastEntitySaveError(
 	name: string,
 	recordId: EntityRecordKey
 ): any {
-	return get( state.entities.records, [
-		kind,
-		name,
-		'saving',
-		recordId,
-		'error',
-	] );
+	return state.entities.records?.[ kind ]?.[ name ]?.saving?.[ recordId ]
+		?.error;
 }
 
 /**
  * Returns the specified entity record's last delete error.
  *
- * @param  state    State tree.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record ID.
+ * @param state    State tree.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record ID.
  *
  * @return The entity record's save error.
  */
@@ -893,93 +994,90 @@ export function getLastEntityDeleteError(
 	name: string,
 	recordId: EntityRecordKey
 ): any {
-	return get( state.entities.records, [
-		kind,
-		name,
-		'deleting',
-		recordId,
-		'error',
-	] );
-}
-
-/**
- * Returns the current undo offset for the
- * entity records edits history. The offset
- * represents how many items from the end
- * of the history stack we are at. 0 is the
- * last edit, -1 is the second last, and so on.
- *
- * @param  state State tree.
- *
- * @return The current undo offset.
- */
-function getCurrentUndoOffset( state: State ): number {
-	return state.undo.offset;
+	return state.entities.records?.[ kind ]?.[ name ]?.deleting?.[ recordId ]
+		?.error;
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Returns the previous edit from the current undo offset
  * for the entity records edits history, if any.
  *
- * @param  state State tree.
+ * @deprecated since 6.3
+ *
+ * @param      state State tree.
  *
  * @return The edit.
  */
 export function getUndoEdit( state: State ): Optional< any > {
-	return state.undo[ state.undo.length - 2 + getCurrentUndoOffset( state ) ];
+	deprecated( "select( 'core' ).getUndoEdit()", {
+		since: '6.3',
+	} );
+	return undefined;
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Returns the next edit from the current undo offset
  * for the entity records edits history, if any.
  *
- * @param  state State tree.
+ * @deprecated since 6.3
+ *
+ * @param      state State tree.
  *
  * @return The edit.
  */
 export function getRedoEdit( state: State ): Optional< any > {
-	return state.undo[ state.undo.length + getCurrentUndoOffset( state ) ];
+	deprecated( "select( 'core' ).getRedoEdit()", {
+		since: '6.3',
+	} );
+	return undefined;
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
 /**
  * Returns true if there is a previous edit from the current undo offset
  * for the entity records edits history, and false otherwise.
  *
- * @param  state State tree.
+ * @param state State tree.
  *
  * @return Whether there is a previous edit or not.
  */
 export function hasUndo( state: State ): boolean {
-	return Boolean( getUndoEdit( state ) );
+	return state.undoManager.hasUndo();
 }
 
 /**
  * Returns true if there is a next edit from the current undo offset
  * for the entity records edits history, and false otherwise.
  *
- * @param  state State tree.
+ * @param state State tree.
  *
  * @return Whether there is a next edit or not.
  */
 export function hasRedo( state: State ): boolean {
-	return Boolean( getRedoEdit( state ) );
+	return state.undoManager.hasRedo();
 }
 
 /**
  * Return the current theme.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return The current theme.
  */
 export function getCurrentTheme( state: State ): any {
+	if ( ! state.currentTheme ) {
+		return null;
+	}
 	return getEntityRecord( state, 'root', 'theme', state.currentTheme );
 }
 
 /**
  * Return the ID of the current global styles object.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return The current global styles ID.
  */
@@ -990,7 +1088,7 @@ export function __experimentalGetCurrentGlobalStylesId( state: State ): string {
 /**
  * Return theme supports data in the index.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return Index data.
  */
@@ -1001,8 +1099,8 @@ export function getThemeSupports( state: State ): any {
 /**
  * Returns the embed preview for the given URL.
  *
- * @param  state Data state.
- * @param  url   Embedded URL.
+ * @param state Data state.
+ * @param url   Embedded URL.
  *
  * @return Undefined if the preview has not been fetched, otherwise, the preview fetched from the embed preview API.
  */
@@ -1017,8 +1115,8 @@ export function getEmbedPreview( state: State, url: string ): any {
  * We need to be able to determine if a URL is embeddable or not, based on what we
  * get back from the oEmbed preview API.
  *
- * @param  state Data state.
- * @param  url   Embedded URL.
+ * @param state Data state.
+ * @param url   Embedded URL.
  *
  * @return Is the preview for the URL an oEmbed link fallback.
  */
@@ -1040,10 +1138,11 @@ export function isPreviewEmbedFallback( state: State, url: string ): boolean {
  *
  * https://developer.wordpress.org/rest-api/reference/
  *
- * @param  state    Data state.
- * @param  action   Action to check. One of: 'create', 'read', 'update', 'delete'.
- * @param  resource REST resource to check, e.g. 'media' or 'posts'.
- * @param  id       Optional ID of the rest resource to check.
+ * @param state    Data state.
+ * @param action   Action to check. One of: 'create', 'read', 'update', 'delete'.
+ * @param resource Entity resource to check. Accepts entity object `{ kind: 'root', name: 'media', id: 1 }`
+ *                 or REST base as a string - `media`.
+ * @param id       Optional ID of the rest resource to check.
  *
  * @return Whether or not the user can perform the action,
  *                             or `undefined` if the OPTIONS request is still being made.
@@ -1051,11 +1150,17 @@ export function isPreviewEmbedFallback( state: State, url: string ): boolean {
 export function canUser(
 	state: State,
 	action: string,
-	resource: string,
+	resource: string | EntityResource,
 	id?: EntityRecordKey
 ): boolean | undefined {
-	const key = [ action, resource, id ].filter( Boolean ).join( '/' );
-	return get( state, [ 'userPermissions', key ] );
+	const isEntity = typeof resource === 'object';
+	if ( isEntity && ( ! resource.kind || ! resource.name ) ) {
+		return false;
+	}
+
+	const key = getUserPermissionCacheKey( action, resource, id );
+
+	return state.userPermissions[ key ];
 }
 
 /**
@@ -1066,10 +1171,10 @@ export function canUser(
  *
  * https://developer.wordpress.org/rest-api/reference/
  *
- * @param  state    Data state.
- * @param  kind     Entity kind.
- * @param  name     Entity name.
- * @param  recordId Record's id.
+ * @param state    Data state.
+ * @param kind     Entity kind.
+ * @param name     Entity name.
+ * @param recordId Record's id.
  * @return Whether or not the user can edit,
  * or `undefined` if the OPTIONS request is still being made.
  */
@@ -1079,13 +1184,12 @@ export function canUserEditEntityRecord(
 	name: string,
 	recordId: EntityRecordKey
 ): boolean | undefined {
-	const entityConfig = getEntityConfig( state, kind, name );
-	if ( ! entityConfig ) {
-		return false;
-	}
-	const resource = entityConfig.__unstable_rest_base;
+	deprecated( `wp.data.select( 'core' ).canUserEditEntityRecord()`, {
+		since: '6.7',
+		alternative: `wp.data.select( 'core' ).canUser( 'update', { kind, name, id } )`,
+	} );
 
-	return canUser( state, 'update', resource, recordId );
+	return canUser( state, 'update', { kind, name, id: recordId } );
 }
 
 /**
@@ -1094,9 +1198,9 @@ export function canUserEditEntityRecord(
  * May return multiple autosaves since the backend stores one autosave per
  * author for each post.
  *
- * @param  state    State tree.
- * @param  postType The type of the parent post.
- * @param  postId   The id of the parent post.
+ * @param state    State tree.
+ * @param postType The type of the parent post.
+ * @param postId   The id of the parent post.
  *
  * @return An array of autosaves for the post, or undefined if there is none.
  */
@@ -1111,10 +1215,10 @@ export function getAutosaves(
 /**
  * Returns the autosave for the post and author.
  *
- * @param  state    State tree.
- * @param  postType The type of the parent post.
- * @param  postId   The id of the parent post.
- * @param  authorId The id of the author.
+ * @param state    State tree.
+ * @param postType The type of the parent post.
+ * @param postId   The id of the parent post.
+ * @param authorId The id of the author.
  *
  * @return The autosave for the post and author.
  */
@@ -1129,15 +1233,18 @@ 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;
 }
 
 /**
  * Returns true if the REST request for autosaves has completed.
  *
- * @param  state    State tree.
- * @param  postType The type of the parent post.
- * @param  postId   The id of the parent post.
+ * @param state    State tree.
+ * @param postType The type of the parent post.
+ * @param postId   The id of the parent post.
  *
  * @return True if the REST request was completed. False otherwise.
  */
@@ -1169,56 +1276,18 @@ export const hasFetchedAutosaves = createRegistrySelector(
  * );
  * ```
  *
- * @param  state Editor state.
+ * @param state Editor state.
  *
  * @return A value whose reference will change only when an edit occurs.
  */
-export const getReferenceByDistinctEdits = createSelector(
-	// This unused state argument is listed here for the documentation generating tool (docgen).
-	( state: State ) => [],
-	( state: State ) => [
-		state.undo.length,
-		state.undo.offset,
-		state.undo.flattenedUndo,
-	]
-);
-
-/**
- * Retrieve the frontend template used for a given link.
- *
- * @param  state Editor state.
- * @param  link  Link.
- *
- * @return The template record.
- */
-export function __experimentalGetTemplateForLink(
-	state: State,
-	link: string
-): Optional< ET.Updatable< ET.WpTemplate > > | null {
-	const records = getEntityRecords< ET.WpTemplate >(
-		state,
-		'postType',
-		'wp_template',
-		{
-			'find-template': link,
-		}
-	);
-
-	if ( records?.length ) {
-		return getEditedEntityRecord< ET.WpTemplate >(
-			state,
-			'postType',
-			'wp_template',
-			records[ 0 ].id
-		);
-	}
-	return null;
+export function getReferenceByDistinctEdits( state ) {
+	return state.editsReference;
 }
 
 /**
  * Retrieve the current theme's base global styles
  *
- * @param  state Editor state.
+ * @param state Editor state.
  *
  * @return The Global Styles object.
  */
@@ -1235,7 +1304,7 @@ export function __experimentalGetCurrentThemeBaseGlobalStyles(
 /**
  * Return the ID of the current global styles object.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return The current global styles ID.
  */
@@ -1252,7 +1321,7 @@ export function __experimentalGetCurrentThemeGlobalStylesVariations(
 /**
  * Retrieve the list of registered block patterns.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return Block pattern list.
  */
@@ -1263,10 +1332,166 @@ export function getBlockPatterns( state: State ): Array< any > {
 /**
  * Retrieve the list of registered block pattern categories.
  *
- * @param  state Data state.
+ * @param state Data state.
  *
  * @return Block pattern category list.
  */
 export function getBlockPatternCategories( state: State ): Array< any > {
 	return state.blockPatternCategories;
 }
+
+/**
+ * Retrieve the registered user pattern categories.
+ *
+ * @param state Data state.
+ *
+ * @return User patterns category array.
+ */
+
+export function getUserPatternCategories(
+	state: State
+): Array< UserPatternCategory > {
+	return state.userPatternCategories;
+}
+
+/**
+ * Returns the revisions of the current global styles theme.
+ *
+ * @deprecated since WordPress 6.5.0. Callers should use `select( 'core' ).getRevisions( 'root', 'globalStyles', ${ recordKey } )` instead, where `recordKey` is the id of the global styles parent post.
+ *
+ * @param      state Data state.
+ *
+ * @return The current global styles.
+ */
+export function getCurrentThemeGlobalStylesRevisions(
+	state: State
+): Array< object > | null {
+	deprecated( "select( 'core' ).getCurrentThemeGlobalStylesRevisions()", {
+		since: '6.5.0',
+		alternative:
+			"select( 'core' ).getRevisions( 'root', 'globalStyles', ${ recordKey } )",
+	} );
+	const currentGlobalStylesId =
+		__experimentalGetCurrentGlobalStylesId( state );
+
+	if ( ! currentGlobalStylesId ) {
+		return null;
+	}
+
+	return state.themeGlobalStyleRevisions[ currentGlobalStylesId ];
+}
+
+/**
+ * Returns the default template use to render a given query.
+ *
+ * @param state Data state.
+ * @param query Query.
+ *
+ * @return The default template id for the given query.
+ */
+export function getDefaultTemplateId(
+	state: State,
+	query: TemplateQuery
+): string {
+	return state.defaultTemplates[ JSON.stringify( query ) ];
+}
+
+/**
+ * Returns an entity's revisions.
+ *
+ * @param state     State tree
+ * @param kind      Entity kind.
+ * @param name      Entity name.
+ * @param recordKey The key of the entity record whose revisions you want to fetch.
+ * @param query     Optional query. If requesting specific
+ *                  fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [Entity kind]".
+ *
+ * @return Record.
+ */
+export const getRevisions = (
+	state: State,
+	kind: string,
+	name: string,
+	recordKey: EntityRecordKey,
+	query?: GetRecordsHttpQuery
+): RevisionRecord[] | null => {
+	const queriedStateRevisions =
+		state.entities.records?.[ kind ]?.[ name ]?.revisions?.[ recordKey ];
+	if ( ! queriedStateRevisions ) {
+		return null;
+	}
+
+	return getQueriedItems( queriedStateRevisions, query );
+};
+
+/**
+ * Returns a single, specific revision of a parent entity.
+ *
+ * @param state       State tree
+ * @param kind        Entity kind.
+ * @param name        Entity name.
+ * @param recordKey   The key of the entity record whose revisions you want to fetch.
+ * @param revisionKey The revision's key.
+ * @param query       Optional query. If requesting specific
+ *                    fields, fields must always include the ID. For valid query parameters see revisions schema in [the REST API Handbook](https://developer.wordpress.org/rest-api/reference/). Then see the arguments available "Retrieve a [entity kind]".
+ *
+ * @return Record.
+ */
+export const getRevision = createSelector(
+	(
+		state: State,
+		kind: string,
+		name: string,
+		recordKey: EntityRecordKey,
+		revisionKey: EntityRecordKey,
+		query?: GetRecordsHttpQuery
+	): RevisionRecord | Record< PropertyKey, never > | undefined => {
+		const queriedState =
+			state.entities.records?.[ kind ]?.[ name ]?.revisions?.[
+				recordKey
+			];
+
+		if ( ! queriedState ) {
+			return undefined;
+		}
+
+		const context = query?.context ?? 'default';
+
+		if ( query === undefined ) {
+			// If expecting a complete item, validate that completeness.
+			if ( ! queriedState.itemIsComplete[ context ]?.[ revisionKey ] ) {
+				return undefined;
+			}
+
+			return queriedState.items[ context ][ revisionKey ];
+		}
+
+		const item = queriedState.items[ context ]?.[ revisionKey ];
+		if ( item && query._fields ) {
+			const filteredItem = {};
+			const fields = getNormalizedCommaSeparable( query._fields ) ?? [];
+
+			for ( let f = 0; f < fields.length; f++ ) {
+				const field = fields[ f ].split( '.' );
+				let value = item;
+				field.forEach( ( fieldName ) => {
+					value = value?.[ fieldName ];
+				} );
+				setNestedValue( filteredItem, field, value );
+			}
+
+			return filteredItem;
+		}
+
+		return item;
+	},
+	( state: State, kind, name, recordKey, revisionKey, query ) => {
+		const context = query?.context ?? 'default';
+		return [
+			state.entities.records?.[ kind ]?.[ name ]?.revisions?.[ recordKey ]
+				?.items?.[ context ]?.[ revisionKey ],
+			state.entities.records?.[ kind ]?.[ name ]?.revisions?.[ recordKey ]
+				?.itemIsComplete?.[ context ]?.[ revisionKey ],
+		];
+	}
+);
diff --git a/packages/core-data/src/sync.js b/packages/core-data/src/sync.js
new file mode 100644
index 00000000000000..fdc421a6bd70e9
--- /dev/null
+++ b/packages/core-data/src/sync.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createSyncProvider,
+	connectIndexDb,
+	createWebRTCConnection,
+} from '@wordpress/sync';
+
+let syncProvider;
+
+export function getSyncProvider() {
+	if ( ! syncProvider ) {
+		syncProvider = createSyncProvider(
+			connectIndexDb,
+			createWebRTCConnection( {
+				signaling: [
+					//'ws://localhost:4444',
+					window?.wp?.ajax?.settings?.url,
+				],
+				password: window?.__experimentalCollaborativeEditingSecret,
+			} )
+		);
+	}
+
+	return syncProvider;
+}
diff --git a/packages/core-data/src/test/actions.js b/packages/core-data/src/test/actions.js
index 8700ef7af78d66..8438d03293c164 100644
--- a/packages/core-data/src/test/actions.js
+++ b/packages/core-data/src/test/actions.js
@@ -55,12 +55,6 @@ describe( 'editEntityRecord', () => {
 describe( 'deleteEntityRecord', () => {
 	beforeEach( async () => {
 		apiFetch.mockReset();
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
 	} );
 
 	it( 'triggers a DELETE request for an existing record', async () => {
@@ -74,8 +68,7 @@ describe( 'deleteEntityRecord', () => {
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => deletedRecord );
@@ -84,7 +77,7 @@ describe( 'deleteEntityRecord', () => {
 			'postType',
 			'post',
 			deletedRecord.id
-		)( { dispatch } );
+		)( { dispatch, resolveSelect } );
 
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 		expect( apiFetch ).toHaveBeenCalledWith( {
@@ -92,7 +85,7 @@ describe( 'deleteEntityRecord', () => {
 			method: 'DELETE',
 		} );
 
-		expect( dispatch ).toHaveBeenCalledTimes( 4 );
+		expect( dispatch ).toHaveBeenCalledTimes( 3 );
 		expect( dispatch ).toHaveBeenCalledWith( {
 			type: 'DELETE_ENTITY_RECORD_START',
 			kind: 'postType',
@@ -126,8 +119,7 @@ describe( 'deleteEntityRecord', () => {
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( entities );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => entities ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => {
@@ -143,7 +135,7 @@ describe( 'deleteEntityRecord', () => {
 				{
 					throwOnError: true,
 				}
-			)( { dispatch } )
+			)( { dispatch, resolveSelect } )
 		).rejects.toEqual( new Error( 'API error' ) );
 	} );
 
@@ -157,8 +149,7 @@ describe( 'deleteEntityRecord', () => {
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( entities );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => entities ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => {
@@ -174,7 +165,7 @@ describe( 'deleteEntityRecord', () => {
 				{
 					throwOnError: false,
 				}
-			)( { dispatch } )
+			)( { dispatch, resolveSelect } )
 		).resolves.toBe( false );
 	} );
 } );
@@ -182,12 +173,6 @@ describe( 'deleteEntityRecord', () => {
 describe( 'saveEditedEntityRecord', () => {
 	beforeEach( async () => {
 		apiFetch.mockReset();
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
 	} );
 
 	it( 'Uses "id" as a key when no entity key is provided', async () => {
@@ -207,8 +192,7 @@ describe( 'saveEditedEntityRecord', () => {
 		const dispatch = Object.assign( jest.fn(), {
 			saveEntityRecord: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		const updatedRecord = { ...item, menu: 10 };
@@ -220,7 +204,7 @@ describe( 'saveEditedEntityRecord', () => {
 			'root',
 			'menuItem',
 			1
-		)( { dispatch, select } );
+		)( { dispatch, select, resolveSelect } );
 
 		expect( dispatch.saveEntityRecord ).toHaveBeenCalledWith(
 			'root',
@@ -248,8 +232,7 @@ describe( 'saveEditedEntityRecord', () => {
 		const dispatch = Object.assign( jest.fn(), {
 			saveEntityRecord: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		const updatedRecord = { ...item, menu: 10 };
@@ -261,7 +244,7 @@ describe( 'saveEditedEntityRecord', () => {
 			'root',
 			'menuLocation',
 			'primary'
-		)( { dispatch, select } );
+		)( { dispatch, select, resolveSelect } );
 
 		expect( dispatch.saveEntityRecord ).toHaveBeenCalledWith(
 			'root',
@@ -277,7 +260,6 @@ describe( 'saveEntityRecord', () => {
 
 	beforeEach( async () => {
 		apiFetch.mockReset();
-		jest.useFakeTimers();
 		dispatch = Object.assign( jest.fn(), {
 			receiveEntityRecords: jest.fn(),
 			__unstableAcquireStoreLock: jest.fn(),
@@ -285,11 +267,6 @@ describe( 'saveEntityRecord', () => {
 		} );
 	} );
 
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
 	it( 'triggers a POST request for a new record', async () => {
 		const post = { title: 'new post' };
 		const configs = [
@@ -298,9 +275,7 @@ describe( 'saveEntityRecord', () => {
 		const select = {
 			getRawEntityRecord: () => post,
 		};
-
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		const updatedRecord = { ...post, id: 10 };
@@ -312,7 +287,7 @@ describe( 'saveEntityRecord', () => {
 			'postType',
 			'post',
 			post
-		)( { select, dispatch } );
+		)( { select, dispatch, resolveSelect } );
 
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 		expect( apiFetch ).toHaveBeenCalledWith( {
@@ -321,7 +296,7 @@ describe( 'saveEntityRecord', () => {
 			data: post,
 		} );
 
-		expect( dispatch ).toHaveBeenCalledTimes( 3 );
+		expect( dispatch ).toHaveBeenCalledTimes( 2 );
 		expect( dispatch ).toHaveBeenCalledWith( {
 			type: 'SAVE_ENTITY_RECORD_START',
 			kind: 'postType',
@@ -365,9 +340,7 @@ describe( 'saveEntityRecord', () => {
 		const select = {
 			getRawEntityRecord: () => post,
 		};
-
-		// Provide entities
-		dispatch.mockReturnValueOnce( entities );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => entities ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => {
@@ -377,7 +350,7 @@ describe( 'saveEntityRecord', () => {
 		await expect(
 			saveEntityRecord( 'postType', 'post', post, {
 				throwOnError: true,
-			} )( { select, dispatch } )
+			} )( { select, dispatch, resolveSelect } )
 		).rejects.toEqual( new Error( 'API error' ) );
 	} );
 
@@ -389,9 +362,7 @@ describe( 'saveEntityRecord', () => {
 		const select = {
 			getRawEntityRecord: () => post,
 		};
-
-		// Provide entities
-		dispatch.mockReturnValueOnce( entities );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => entities ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => {
@@ -401,7 +372,7 @@ describe( 'saveEntityRecord', () => {
 		await expect(
 			saveEntityRecord( 'postType', 'post', post, {
 				throwOnError: false,
-			} )( { select, dispatch } )
+			} )( { select, dispatch, resolveSelect } )
 		).resolves.toEqual( undefined );
 	} );
 
@@ -413,9 +384,7 @@ describe( 'saveEntityRecord', () => {
 		const select = {
 			getRawEntityRecord: () => post,
 		};
-
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		const updatedRecord = { ...post, id: 10 };
@@ -427,7 +396,7 @@ describe( 'saveEntityRecord', () => {
 			'postType',
 			'post',
 			post
-		)( { select, dispatch } );
+		)( { select, dispatch, resolveSelect } );
 
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 		expect( apiFetch ).toHaveBeenCalledWith( {
@@ -436,7 +405,7 @@ describe( 'saveEntityRecord', () => {
 			data: post,
 		} );
 
-		expect( dispatch ).toHaveBeenCalledTimes( 3 );
+		expect( dispatch ).toHaveBeenCalledTimes( 2 );
 		expect( dispatch ).toHaveBeenCalledWith( {
 			type: 'SAVE_ENTITY_RECORD_START',
 			kind: 'postType',
@@ -485,9 +454,7 @@ describe( 'saveEntityRecord', () => {
 		const select = {
 			getRawEntityRecord: () => ( {} ),
 		};
-
-		// Provide entities
-		dispatch.mockReturnValueOnce( configs );
+		const resolveSelect = { getEntitiesConfig: jest.fn( () => configs ) };
 
 		// Provide response
 		apiFetch.mockImplementation( () => postType );
@@ -496,7 +463,7 @@ describe( 'saveEntityRecord', () => {
 			'root',
 			'postType',
 			postType
-		)( { select, dispatch } );
+		)( { select, dispatch, resolveSelect } );
 
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 		expect( apiFetch ).toHaveBeenCalledWith( {
@@ -505,7 +472,7 @@ describe( 'saveEntityRecord', () => {
 			data: postType,
 		} );
 
-		expect( dispatch ).toHaveBeenCalledTimes( 3 );
+		expect( dispatch ).toHaveBeenCalledTimes( 2 );
 		expect( dispatch ).toHaveBeenCalledWith( {
 			type: 'SAVE_ENTITY_RECORD_START',
 			kind: 'root',
diff --git a/packages/core-data/src/test/entities.js b/packages/core-data/src/test/entities.js
index 5fabc5ee9d2db0..294c843fae117e 100644
--- a/packages/core-data/src/test/entities.js
+++ b/packages/core-data/src/test/entities.js
@@ -1,16 +1,9 @@
-/**
- * WordPress dependencies
- */
-import triggerFetch from '@wordpress/api-fetch';
-jest.mock( '@wordpress/api-fetch' );
-
 /**
  * Internal dependencies
  */
 import {
 	getMethodName,
 	rootEntitiesConfig,
-	getOrLoadEntitiesConfig,
 	prePersistPostType,
 } from '../entities';
 
@@ -27,14 +20,8 @@ describe( 'getMethodName', () => {
 		expect( methodName ).toEqual( 'setPostType' );
 	} );
 
-	it( 'should use the plural form', () => {
-		const methodName = getMethodName( 'root', 'postType', 'get', true );
-
-		expect( methodName ).toEqual( 'getPostTypes' );
-	} );
-
 	it( 'should use the given plural form', () => {
-		const methodName = getMethodName( 'root', 'taxonomy', 'get', true );
+		const methodName = getMethodName( 'root', 'taxonomies', 'get' );
 
 		expect( methodName ).toEqual( 'getTaxonomies' );
 	} );
@@ -49,61 +36,6 @@ describe( 'getMethodName', () => {
 	} );
 } );
 
-describe( 'getKindEntities', () => {
-	beforeEach( async () => {
-		triggerFetch.mockReset();
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
-	it( 'shouldn’t do anything if the entities have already been resolved', async () => {
-		const dispatch = jest.fn();
-		const select = {
-			getEntitiesConfig: jest.fn( () => entities ),
-		};
-		const entities = [ { kind: 'postType' } ];
-		await getOrLoadEntitiesConfig( 'postType' )( { dispatch, select } );
-		expect( dispatch ).not.toHaveBeenCalled();
-	} );
-
-	it( 'shouldn’t do anything if there no defined kind config', async () => {
-		const dispatch = jest.fn();
-		const select = {
-			getEntitiesConfig: jest.fn( () => [] ),
-		};
-		await getOrLoadEntitiesConfig( 'unknownKind' )( { dispatch, select } );
-		expect( dispatch ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should fetch and add the entities', async () => {
-		const fetchedEntities = [
-			{
-				rest_base: 'posts',
-				labels: {
-					singular_name: 'post',
-				},
-			},
-		];
-		const dispatch = jest.fn();
-		const select = {
-			getEntitiesConfig: jest.fn( () => [] ),
-		};
-		triggerFetch.mockImplementation( () => fetchedEntities );
-
-		await getOrLoadEntitiesConfig( 'postType' )( { dispatch, select } );
-		expect( dispatch ).toHaveBeenCalledTimes( 1 );
-		expect( dispatch.mock.calls[ 0 ][ 0 ].type ).toBe( 'ADD_ENTITIES' );
-		expect( dispatch.mock.calls[ 0 ][ 0 ].entities.length ).toBe( 1 );
-		expect( dispatch.mock.calls[ 0 ][ 0 ].entities[ 0 ].baseURL ).toBe(
-			'/wp/v2/posts'
-		);
-	} );
-} );
-
 describe( 'prePersistPostType', () => {
 	it( 'set the status to draft and empty the title when saving auto-draft posts', () => {
 		let record = {
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
new file mode 100644
index 00000000000000..4dc0d8a51663e8
--- /dev/null
+++ b/packages/core-data/src/test/entity-provider.js
@@ -0,0 +1,277 @@
+/**
+ * External dependencies
+ */
+import { act, render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createRegistry, RegistryProvider } from '@wordpress/data';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { unregisterFormatType } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreDataStore } from '../index';
+import useEntityBlockEditor from '../hooks/use-entity-block-editor';
+
+const postTypeConfig = {
+	kind: 'postType',
+	name: 'post',
+	baseURL: '/wp/v2/posts',
+	transientEdits: { blocks: true, selection: true },
+	mergedEdits: { meta: true },
+	rawAttributes: [ 'title', 'excerpt', 'content' ],
+};
+
+const postTypeEntity = {
+	slug: 'post',
+	rest_base: 'posts',
+	labels: {
+		item_updated: 'Updated Post',
+		item_published: 'Post published',
+		item_reverted_to_draft: 'Post reverted to draft.',
+	},
+};
+
+const aSinglePost = {
+	id: 1,
+	type: 'post',
+	content: {
+		raw: '<!-- wp:test-block-with-array-of-strings --><div><p>apples</p><p></p><p>oranges</p></div><!-- /wp:test-block-with-array-of-strings --><!-- wp:test-block --><p>A paragraph</p><!-- /wp:test-block -->',
+		rendered: '<p>A paragraph</p>',
+	},
+	meta: {
+		footnotes: '[]',
+	},
+};
+
+function createRegistryWithStores() {
+	// Create a registry.
+	const registry = createRegistry();
+
+	// Register store.
+	registry.register( coreDataStore );
+
+	// Register post type entity.
+	registry.dispatch( coreDataStore ).addEntities( [ postTypeConfig ] );
+
+	// Store post type entity.
+	registry
+		.dispatch( coreDataStore )
+		.receiveEntityRecords( 'root', 'postType', [ postTypeEntity ] );
+
+	// Store a single post for use by the tests.
+	registry
+		.dispatch( coreDataStore )
+		.receiveEntityRecords( 'postType', 'post', [ aSinglePost ] );
+
+	return registry;
+}
+
+describe( 'useEntityBlockEditor', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createRegistryWithStores();
+
+		const edit = ( { children } ) => <>{ children }</>;
+
+		registerBlockType( 'core/test-block', {
+			supports: {
+				className: false,
+			},
+			save: ( { attributes } ) => {
+				const { content } = attributes;
+				return (
+					<p { ...useBlockProps.save() }>
+						<RichText.Content value={ content } />
+					</p>
+				);
+			},
+			category: 'text',
+			attributes: {
+				content: {
+					type: 'string',
+					source: 'html',
+					selector: 'p',
+					default: '',
+					role: 'content',
+				},
+			},
+			title: 'block title',
+			edit,
+		} );
+
+		registerBlockType( 'core/test-block-with-array-of-strings', {
+			supports: {
+				className: false,
+			},
+			save: ( { attributes } ) => {
+				const { items } = attributes;
+				return (
+					<div>
+						{ items.map( ( item, index ) => (
+							<p key={ index }>{ item }</p>
+						) ) }
+					</div>
+				);
+			},
+			category: 'text',
+			attributes: {
+				items: {
+					type: 'array',
+					items: {
+						type: 'string',
+					},
+					default: [ 'apples', null, 'oranges' ],
+				},
+			},
+			title: 'block title',
+			edit,
+		} );
+
+		registerCoreBlocks();
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+		unregisterFormatType( 'core/footnote' );
+	} );
+
+	it( 'does not mutate block attributes that include an array of strings or null values', async () => {
+		let blocks, onChange;
+		const TestComponent = () => {
+			[ blocks, , onChange ] = useEntityBlockEditor( 'postType', 'post', {
+				id: 1,
+			} );
+
+			return <div />;
+		};
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		expect( blocks[ 0 ].name ).toEqual(
+			'core/test-block-with-array-of-strings'
+		);
+		expect( blocks[ 0 ].attributes.items ).toEqual( [
+			'apples',
+			null,
+			'oranges',
+		] );
+
+		// Add a block with content that will match against footnotes logic, causing
+		// `updateFootnotes` to iterate over blocks and their attributes.
+		act( () => {
+			onChange(
+				[
+					...blocks,
+					createBlock( 'core/test-block', {
+						content:
+							'<p><sup data-fn="1234" class="fn"><a href="#1234" id="1234-link">1</a></sup></p>',
+					} ),
+				],
+				{
+					selection: {
+						selectionStart: {},
+						selectionEnd: {},
+						initialPosition: {},
+					},
+				}
+			);
+		} );
+
+		// Ensure the first block remains the same, with unaltered attributes.
+		expect( blocks[ 0 ].name ).toEqual(
+			'core/test-block-with-array-of-strings'
+		);
+		expect( blocks[ 0 ].attributes.items ).toEqual( [
+			'apples',
+			null,
+			'oranges',
+		] );
+	} );
+
+	it( 'updates the order of footnotes when a new footnote is inserted', async () => {
+		// Start with a post containing a block with a single footnote (set to 1).
+		registry
+			.dispatch( coreDataStore )
+			.receiveEntityRecords( 'postType', 'post', [
+				{
+					id: 1,
+					type: 'post',
+					content: {
+						raw: '<!-- wp:test-block --><p>A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">1</a></sup></p><!-- /wp:test-block -->',
+						rendered: '<p>A paragraph</p>',
+					},
+					meta: {
+						footnotes: '[]',
+					},
+				},
+			] );
+
+		let blocks, onChange;
+
+		const TestComponent = () => {
+			[ blocks, , onChange ] = useEntityBlockEditor( 'postType', 'post', {
+				id: 1,
+			} );
+
+			return <div />;
+		};
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		// The first block should have the footnote number 1.
+		expect( blocks[ 0 ].attributes.content ).toEqual(
+			'A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">1</a></sup>'
+		);
+
+		// Add a block with a new footnote with an arbitrary footnote number that will be overwritten after insertion.
+		act( () => {
+			onChange(
+				[
+					createBlock( 'core/test-block', {
+						content:
+							'A new paragraph<sup data-fn="xyz" class="fn"><a href="#xyz" id="xyz-link">999</a></sup>',
+					} ),
+					...blocks,
+				],
+				{
+					selection: {
+						selectionStart: {},
+						selectionEnd: {},
+						initialPosition: {},
+					},
+				}
+			);
+		} );
+
+		// The newly inserted block should have the footnote number 1, and the
+		// existing footnote number 1 should be updated to 2.
+		expect( blocks[ 0 ].attributes.content ).toEqual(
+			'A new paragraph<sup data-fn="xyz" class="fn"><a href="#xyz" id="xyz-link">1</a></sup>'
+		);
+		expect( blocks[ 1 ].attributes.content ).toEqual(
+			'A paragraph<sup data-fn="abcd" class="fn"><a href="#abcd" id="abcd-link">2</a></sup>'
+		);
+	} );
+} );
diff --git a/packages/core-data/src/test/reducer.js b/packages/core-data/src/test/reducer.js
index 63caf5fb83b177..d5d5bc5c8692fa 100644
--- a/packages/core-data/src/test/reducer.js
+++ b/packages/core-data/src/test/reducer.js
@@ -9,7 +9,6 @@ import deepFreeze from 'deep-freeze';
 import {
 	terms,
 	entities,
-	undo,
 	embedPreviews,
 	userPermissions,
 	autosaves,
@@ -140,209 +139,240 @@ describe( 'entities', () => {
 				.map( ( [ , cfg ] ) => cfg )
 		).toEqual( [ { kind: 'postType', name: 'posts' } ] );
 	} );
-} );
 
-describe( 'undo', () => {
-	let lastEdits;
-	let undoState;
-	let expectedUndoState;
-	const createEditActionPart = ( edits ) => ( {
-		kind: 'someKind',
-		name: 'someName',
-		recordId: 'someRecordId',
-		edits,
-	} );
-	const createNextEditAction = ( edits, transientEdits = {} ) => {
-		let action = {
-			...createEditActionPart( edits ),
-			transientEdits,
-		};
-		action = {
-			type: 'EDIT_ENTITY_RECORD',
-			...action,
-			meta: {
-				undo: { ...action, edits: lastEdits },
-			},
-		};
-		lastEdits = { ...lastEdits, ...edits };
-		return action;
-	};
-	const createNextUndoState = ( ...args ) => {
-		let action = {};
-		if ( args[ 0 ] === 'isUndo' || args[ 0 ] === 'isRedo' ) {
-			// We need to "apply" the undo level here and build
-			// the action to move the offset.
-			lastEdits =
-				undoState[
-					undoState.length +
-						undoState.offset -
-						( args[ 0 ] === 'isUndo' ? 2 : 0 )
-				].edits;
-			action = {
-				type: 'EDIT_ENTITY_RECORD',
-				meta: {
-					[ args[ 0 ] ]: true,
+	describe( 'entity revisions', () => {
+		const stateWithConfig = entities( undefined, {
+			type: 'ADD_ENTITIES',
+			entities: [
+				{
+					kind: 'root',
+					name: 'postType',
+					supports: { revisions: true },
 				},
-			};
-		} else if ( args[ 0 ] === 'isCreate' ) {
-			action = { type: 'CREATE_UNDO_LEVEL' };
-		} else if ( args.length ) {
-			action = createNextEditAction( ...args );
-		}
-		return deepFreeze( undo( undoState, action ) );
-	};
-	beforeEach( () => {
-		lastEdits = {};
-		undoState = undefined;
-		expectedUndoState = [];
-		expectedUndoState.offset = 0;
-	} );
-
-	it( 'initializes', () => {
-		expect( createNextUndoState() ).toEqual( expectedUndoState );
-	} );
-
-	it( 'stacks undo levels', () => {
-		undoState = createNextUndoState();
-
-		// Check that the first edit creates an undo level for the current state and
-		// one for the new one.
-		undoState = createNextUndoState( { value: 1 } );
-		expectedUndoState.push(
-			createEditActionPart( {} ),
-			createEditActionPart( { value: 1 } )
-		);
-		expect( undoState ).toEqual( expectedUndoState );
-
-		// Check that the second and third edits just create an undo level for
-		// themselves.
-		undoState = createNextUndoState( { value: 2 } );
-		expectedUndoState.push( createEditActionPart( { value: 2 } ) );
-		expect( undoState ).toEqual( expectedUndoState );
-		undoState = createNextUndoState( { value: 3 } );
-		expectedUndoState.push( createEditActionPart( { value: 3 } ) );
-		expect( undoState ).toEqual( expectedUndoState );
-	} );
-
-	it( 'handles undos/redos', () => {
-		undoState = createNextUndoState();
-		undoState = createNextUndoState( { value: 1 } );
-		undoState = createNextUndoState( { value: 2 } );
-		undoState = createNextUndoState( { value: 3 } );
-		expectedUndoState.push(
-			createEditActionPart( {} ),
-			createEditActionPart( { value: 1 } ),
-			createEditActionPart( { value: 2 } ),
-			createEditActionPart( { value: 3 } )
-		);
-		expect( undoState ).toEqual( expectedUndoState );
-
-		// Check that undoing and redoing an equal
-		// number of steps does not lose edits.
-		undoState = createNextUndoState( 'isUndo' );
-		expectedUndoState.offset--;
-		expect( undoState ).toEqual( expectedUndoState );
-		undoState = createNextUndoState( 'isUndo' );
-		expectedUndoState.offset--;
-		expect( undoState ).toEqual( expectedUndoState );
-		undoState = createNextUndoState( 'isRedo' );
-		expectedUndoState.offset++;
-		expect( undoState ).toEqual( expectedUndoState );
-		undoState = createNextUndoState( 'isRedo' );
-		expectedUndoState.offset++;
-		expect( undoState ).toEqual( expectedUndoState );
-
-		// Check that another edit will go on top when there
-		// is no undo level offset.
-		undoState = createNextUndoState( { value: 4 } );
-		expectedUndoState.push( createEditActionPart( { value: 4 } ) );
-		expect( undoState ).toEqual( expectedUndoState );
-
-		// Check that undoing and editing will slice of
-		// all the levels after the current one.
-		undoState = createNextUndoState( 'isUndo' );
-		undoState = createNextUndoState( 'isUndo' );
-		undoState = createNextUndoState( { value: 5 } );
-		expectedUndoState.pop();
-		expectedUndoState.pop();
-		expectedUndoState.push( createEditActionPart( { value: 5 } ) );
-		expect( undoState ).toEqual( expectedUndoState );
-	} );
-
-	it( 'handles flattened undos/redos', () => {
-		undoState = createNextUndoState();
-		undoState = createNextUndoState( { value: 1 } );
-		undoState = createNextUndoState(
-			{ transientValue: 2 },
-			{ transientValue: true }
-		);
-		undoState = createNextUndoState( { value: 3 } );
-		expectedUndoState.push(
-			createEditActionPart( {} ),
-			createEditActionPart( { value: 1, transientValue: 2 } ),
-			createEditActionPart( { value: 3 } )
-		);
-		expect( undoState ).toEqual( expectedUndoState );
-	} );
-
-	it( 'handles explicit undo level creation', () => {
-		undoState = createNextUndoState();
+			],
+		} );
+		it( 'appends revisions state', () => {
+			expect( stateWithConfig.records.root.postType ).toHaveProperty(
+				'revisions',
+				{}
+			);
+		} );
 
-		// Check that nothing happens if there are no pending
-		// transient edits.
-		undoState = createNextUndoState( { value: 1 } );
-		undoState = createNextUndoState( 'isCreate' );
-		expectedUndoState.push(
-			createEditActionPart( {} ),
-			createEditActionPart( { value: 1 } )
-		);
-		expect( undoState ).toEqual( expectedUndoState );
+		it( 'returns with received revisions', () => {
+			const initialState = deepFreeze( {
+				config: stateWithConfig.config,
+				records: {},
+			} );
+			const state = entities( initialState, {
+				type: 'RECEIVE_ITEM_REVISIONS',
+				items: [ { id: 1, parent: 2 } ],
+				kind: 'root',
+				name: 'postType',
+				recordKey: 2,
+			} );
+			expect( state.records.root.postType.revisions ).toEqual( {
+				2: {
+					items: {
+						default: {
+							1: { id: 1, parent: 2 },
+						},
+					},
+					itemIsComplete: {
+						default: {
+							1: true,
+						},
+					},
+					queries: {},
+				},
+			} );
+		} );
 
-		// Check that transient edits are merged into the last
-		// edits.
-		undoState = createNextUndoState(
-			{ transientValue: 2 },
-			{ transientValue: true }
-		);
-		undoState = createNextUndoState( 'isCreate' );
-		expectedUndoState[
-			expectedUndoState.length - 1
-		].edits.transientValue = 2;
-		expect( undoState ).toEqual( expectedUndoState );
-
-		// Check that undo levels are created with the latest action,
-		// even if undone.
-		undoState = createNextUndoState( { value: 3 } );
-		undoState = createNextUndoState( 'isUndo' );
-		undoState = createNextUndoState( 'isCreate' );
-		expectedUndoState.pop();
-		expectedUndoState.push( createEditActionPart( { value: 3 } ) );
-		expect( undoState ).toEqual( expectedUndoState );
-	} );
+		it( 'returns with appended received revisions at the parent level', () => {
+			const initialState = deepFreeze( {
+				config: stateWithConfig.config,
+				records: {
+					root: {
+						postType: {
+							revisions: {
+								2: {
+									items: {
+										default: {
+											1: { id: 1, parent: 2 },
+										},
+									},
+									itemIsComplete: {
+										default: {
+											1: true,
+										},
+									},
+									queries: {},
+								},
+							},
+						},
+					},
+				},
+			} );
+			const state = entities( initialState, {
+				type: 'RECEIVE_ITEM_REVISIONS',
+				items: [ { id: 3, parent: 4 } ],
+				kind: 'root',
+				name: 'postType',
+				recordKey: 4,
+			} );
+			expect( state.records.root.postType.revisions ).toEqual( {
+				2: {
+					items: {
+						default: {
+							1: { id: 1, parent: 2 },
+						},
+					},
+					itemIsComplete: {
+						default: {
+							1: true,
+						},
+					},
+					queries: {},
+				},
+				4: {
+					items: {
+						default: {
+							3: { id: 3, parent: 4 },
+						},
+					},
+					itemIsComplete: {
+						default: {
+							3: true,
+						},
+					},
+					queries: {},
+				},
+			} );
+		} );
 
-	it( 'explicitly creates an undo level when undoing while there are pending transient edits', () => {
-		undoState = createNextUndoState();
-		undoState = createNextUndoState( { value: 1 } );
-		undoState = createNextUndoState(
-			{ transientValue: 2 },
-			{ transientValue: true }
-		);
-		undoState = createNextUndoState( 'isUndo' );
-		expectedUndoState.push(
-			createEditActionPart( {} ),
-			createEditActionPart( { value: 1, transientValue: 2 } )
-		);
-		expectedUndoState.offset--;
-		expect( undoState ).toEqual( expectedUndoState );
-	} );
+		it( 'returns with appended received revision items', () => {
+			const initialState = deepFreeze( {
+				config: stateWithConfig.config,
+				records: {
+					root: {
+						postType: {
+							revisions: {
+								2: {
+									items: {
+										default: {
+											1: { id: 1, parent: 2 },
+										},
+									},
+									itemIsComplete: {
+										default: {
+											1: true,
+										},
+									},
+									queries: {},
+								},
+							},
+						},
+					},
+				},
+			} );
+			const state = entities( initialState, {
+				type: 'RECEIVE_ITEM_REVISIONS',
+				items: [ { id: 7, parent: 2 } ],
+				kind: 'root',
+				name: 'postType',
+				recordKey: 2,
+			} );
+			expect( state.records.root.postType.revisions ).toEqual( {
+				2: {
+					items: {
+						default: {
+							1: { id: 1, parent: 2 },
+							7: { id: 7, parent: 2 },
+						},
+					},
+					itemIsComplete: {
+						default: {
+							1: true,
+							7: true,
+						},
+					},
+					queries: {},
+				},
+			} );
+		} );
 
-	it( 'does not create new levels for the same function edits', () => {
-		const value = () => {};
-		undoState = createNextUndoState();
-		undoState = createNextUndoState( { value } );
-		undoState = createNextUndoState( { value: () => {} } );
-		expectedUndoState.push( createEditActionPart( { value } ) );
-		expect( undoState ).toEqual( expectedUndoState );
+		it( 'returns with removed revision items', () => {
+			const initialState = deepFreeze( {
+				config: stateWithConfig.config,
+				records: {
+					root: {
+						postType: {
+							revisions: {
+								2: {
+									items: {
+										default: {
+											1: { id: 1, parent: 2 },
+										},
+									},
+									itemIsComplete: {
+										default: {
+											1: true,
+										},
+									},
+									queries: {},
+								},
+								4: {
+									items: {
+										default: {
+											3: { id: 3, parent: 4 },
+										},
+									},
+									itemIsComplete: {
+										default: {
+											3: true,
+										},
+									},
+									queries: {},
+								},
+								6: {
+									items: {
+										default: {
+											9: { id: 11, parent: 6 },
+										},
+									},
+									itemIsComplete: {
+										default: {
+											9: true,
+										},
+									},
+									queries: {},
+								},
+							},
+						},
+					},
+				},
+			} );
+			const state = entities( initialState, {
+				type: 'REMOVE_ITEMS',
+				itemIds: [ 4, 6 ],
+				kind: 'root',
+				name: 'postType',
+			} );
+			expect( state.records.root.postType.revisions ).toEqual( {
+				2: {
+					items: {
+						default: {
+							1: { id: 1, parent: 2 },
+						},
+					},
+					itemIsComplete: {
+						default: {
+							1: true,
+						},
+					},
+					queries: {},
+				},
+			} );
+		} );
 	} );
 } );
 
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index 24269b3c1cb9b7..472056a4dfdc9b 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -19,6 +19,7 @@ import {
 
 describe( 'getEntityRecord', () => {
 	const POST_TYPE = { slug: 'post' };
+	const POST_TYPE_RESPONSE = { json: () => Promise.resolve( POST_TYPE ) };
 	const ENTITIES = [
 		{
 			name: 'postType',
@@ -27,34 +28,35 @@ describe( 'getEntityRecord', () => {
 			baseURLParams: { context: 'edit' },
 		},
 	];
+	const registry = { batch: ( callback ) => callback() };
+	const resolveSelect = { getEntitiesConfig: jest.fn( () => ENTITIES ) };
 
+	let dispatch;
 	beforeEach( async () => {
-		triggerFetch.mockReset();
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	} );
-
-	it( 'yields with requested post type', async () => {
-		const dispatch = Object.assign( jest.fn(), {
+		dispatch = Object.assign( jest.fn(), {
 			receiveEntityRecords: jest.fn(),
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
+			receiveUserPermissions: jest.fn(),
+			finishResolutions: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( ENTITIES );
+		triggerFetch.mockReset();
+	} );
 
+	it( 'yields with requested post type', async () => {
 		// Provide response
-		triggerFetch.mockImplementation( () => POST_TYPE );
+		triggerFetch.mockImplementation( () => POST_TYPE_RESPONSE );
 
-		await getEntityRecord( 'root', 'postType', 'post' )( { dispatch } );
+		await getEntityRecord(
+			'root',
+			'postType',
+			'post'
+		)( { dispatch, registry, resolveSelect } );
 
 		// Fetch request should have been issued.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/types/post?context=edit',
+			parse: false,
 		} );
 
 		// The record should have been received.
@@ -76,40 +78,25 @@ describe( 'getEntityRecord', () => {
 
 	it( 'accepts a query that overrides default api path', async () => {
 		const query = { context: 'view', _envelope: '1' };
-		const queryObj = { include: [ 'post' ], ...query };
 
 		const select = {
 			hasEntityRecords: jest.fn( () => {} ),
 		};
 
-		const dispatch = Object.assign( jest.fn(), {
-			receiveEntityRecords: jest.fn(),
-			__unstableAcquireStoreLock: jest.fn(),
-			__unstableReleaseStoreLock: jest.fn(),
-		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( ENTITIES );
-
 		// Provide response
-		triggerFetch.mockImplementation( () => POST_TYPE );
+		triggerFetch.mockImplementation( () => POST_TYPE_RESPONSE );
 
 		await getEntityRecord(
 			'root',
 			'postType',
 			'post',
 			query
-		)( { dispatch, select } );
-
-		// Check resolution cache for an existing entity that fulfills the request with query.
-		expect( select.hasEntityRecords ).toHaveBeenCalledWith(
-			'root',
-			'postType',
-			queryObj
-		);
+		)( { dispatch, select, registry, resolveSelect } );
 
 		// Trigger apiFetch, test that the query is present in the url.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/types/post?context=view&_envelope=1',
+			parse: false,
 		} );
 
 		// The record should have been received.
@@ -117,7 +104,7 @@ describe( 'getEntityRecord', () => {
 			'root',
 			'postType',
 			POST_TYPE,
-			queryObj
+			query
 		);
 
 		// Locks should have been acquired and released.
@@ -149,15 +136,11 @@ describe( 'getEntityRecords', () => {
 			baseURLParams: { context: 'edit' },
 		},
 	];
+	const registry = { batch: ( callback ) => callback() };
+	const resolveSelect = { getEntitiesConfig: jest.fn( () => ENTITIES ) };
 
 	beforeEach( async () => {
 		triggerFetch.mockReset();
-		jest.useFakeTimers();
-	} );
-
-	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
 	} );
 
 	it( 'dispatches the requested post type', async () => {
@@ -166,13 +149,14 @@ describe( 'getEntityRecords', () => {
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( ENTITIES );
 
 		// Provide response
 		triggerFetch.mockImplementation( () => POST_TYPES );
 
-		await getEntityRecords( 'root', 'postType' )( { dispatch } );
+		await getEntityRecords(
+			'root',
+			'postType'
+		)( { dispatch, registry, resolveSelect } );
 
 		// Fetch request should have been issued.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
@@ -184,7 +168,10 @@ describe( 'getEntityRecords', () => {
 			'root',
 			'postType',
 			Object.values( POST_TYPES ),
-			{}
+			{},
+			false,
+			undefined,
+			{ totalItems: 2, totalPages: 1 }
 		);
 	} );
 
@@ -194,13 +181,14 @@ describe( 'getEntityRecords', () => {
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( ENTITIES );
 
 		// Provide response
 		triggerFetch.mockImplementation( () => POST_TYPES );
 
-		await getEntityRecords( 'root', 'postType' )( { dispatch } );
+		await getEntityRecords(
+			'root',
+			'postType'
+		)( { dispatch, registry, resolveSelect } );
 
 		// Fetch request should have been issued.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
@@ -219,18 +207,22 @@ describe( 'getEntityRecords', () => {
 	} );
 
 	it( 'marks specific entity records as resolved', async () => {
+		const finishResolutions = jest.fn();
 		const dispatch = Object.assign( jest.fn(), {
 			receiveEntityRecords: jest.fn(),
+			receiveUserPermissions: jest.fn(),
 			__unstableAcquireStoreLock: jest.fn(),
 			__unstableReleaseStoreLock: jest.fn(),
+			finishResolutions,
 		} );
-		// Provide entities
-		dispatch.mockReturnValueOnce( ENTITIES );
 
 		// Provide response
 		triggerFetch.mockImplementation( () => POST_TYPES );
 
-		await getEntityRecords( 'root', 'postType' )( { dispatch } );
+		await getEntityRecords(
+			'root',
+			'postType'
+		)( { dispatch, registry, resolveSelect } );
 
 		// Fetch request should have been issued.
 		expect( triggerFetch ).toHaveBeenCalledWith( {
@@ -238,16 +230,9 @@ describe( 'getEntityRecords', () => {
 		} );
 
 		// The record should have been received.
-		expect( dispatch ).toHaveBeenCalledWith( {
-			type: 'START_RESOLUTIONS',
-			selectorName: 'getEntityRecord',
-			args: [ [ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ] ],
-		} );
-		expect( dispatch ).toHaveBeenCalledWith( {
-			type: 'FINISH_RESOLUTIONS',
-			selectorName: 'getEntityRecord',
-			args: [ [ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ] ],
-		} );
+		expect( finishResolutions ).toHaveBeenCalledWith( 'getEntityRecord', [
+			[ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ],
+		] );
 	} );
 } );
 
@@ -291,26 +276,51 @@ describe( 'getEmbedPreview', () => {
 } );
 
 describe( 'canUser', () => {
-	let registry;
+	const ENTITIES = [
+		{
+			name: 'media',
+			kind: 'root',
+			baseURL: '/wp/v2/media',
+			baseURLParams: { context: 'edit' },
+		},
+		{
+			name: 'wp_block',
+			kind: 'postType',
+			baseURL: '/wp/v2/blocks',
+			baseURLParams: { context: 'edit' },
+		},
+	];
+	const resolveSelect = { getEntitiesConfig: jest.fn( () => ENTITIES ) };
+
+	let dispatch, registry;
 	beforeEach( async () => {
 		registry = {
 			select: jest.fn( () => ( {
 				hasStartedResolution: () => false,
 			} ) ),
+			batch: ( callback ) => callback(),
 		};
+		dispatch = Object.assign( jest.fn(), {
+			receiveUserPermission: jest.fn(),
+			finishResolution: jest.fn(),
+		} );
 		triggerFetch.mockReset();
 	} );
 
 	it( 'does nothing when there is an API error', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
-		} );
-
 		triggerFetch.mockImplementation( () =>
 			Promise.reject( { status: 404 } )
 		);
 
-		await canUser( 'create', 'media' )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'media'
+		)( { dispatch, registry, resolveSelect } );
+		await canUser( 'create', { kind: 'root', name: 'media' } )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
 
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/media',
@@ -321,16 +331,25 @@ describe( 'canUser', () => {
 		expect( dispatch.receiveUserPermission ).not.toHaveBeenCalled();
 	} );
 
-	it( 'receives false when the user is not allowed to perform an action', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
-		} );
+	it( 'throws an error when an entity resource object is malformed', async () => {
+		await expect(
+			canUser( 'create', { name: 'wp_block' } )( {
+				dispatch,
+				registry,
+				resolveSelect,
+			} )
+		).rejects.toThrow( 'The entity resource object is not valid.' );
+	} );
 
+	it( 'receives false when the user is not allowed to perform an action', async () => {
 		triggerFetch.mockImplementation( () => ( {
 			headers: new Map( [ [ 'allow', 'GET' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'media' )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'media'
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/media',
@@ -344,16 +363,38 @@ describe( 'canUser', () => {
 		);
 	} );
 
-	it( 'receives true when the user is allowed to perform an action', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
+	it( 'receives false when the user is not allowed to perform an action on entities', async () => {
+		triggerFetch.mockImplementation( () => ( {
+			headers: new Map( [ [ 'allow', 'GET' ] ] ),
+		} ) );
+
+		await canUser( 'create', { kind: 'root', name: 'media' } )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
+
+		expect( triggerFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/media',
+			method: 'OPTIONS',
+			parse: false,
 		} );
 
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'create/root/media',
+			false
+		);
+	} );
+
+	it( 'receives true when the user is allowed to perform an action', async () => {
 		triggerFetch.mockImplementation( () => ( {
 			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'media' )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'media'
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/media',
@@ -367,16 +408,39 @@ describe( 'canUser', () => {
 		);
 	} );
 
-	it( 'receives true when the user is allowed to perform an action on a specific resource', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
+	it( 'receives true when the user is allowed to perform an action on entities', async () => {
+		triggerFetch.mockImplementation( () => ( {
+			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
+		} ) );
+
+		await canUser( 'create', { kind: 'root', name: 'media' } )( {
+			dispatch,
+			registry,
+			resolveSelect,
 		} );
 
+		expect( triggerFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/media',
+			method: 'OPTIONS',
+			parse: false,
+		} );
+
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'create/root/media',
+			true
+		);
+	} );
+
+	it( 'receives true when the user is allowed to perform an action on a specific resource', async () => {
 		triggerFetch.mockImplementation( () => ( {
 			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'blocks', 123 )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'blocks',
+			123
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( triggerFetch ).toHaveBeenCalledWith( {
 			path: '/wp/v2/blocks/123',
@@ -390,12 +454,36 @@ describe( 'canUser', () => {
 		);
 	} );
 
-	it( 'runs apiFetch only once per resource', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
+	it( 'receives true when the user is allowed to perform an action on a specific entity', async () => {
+		triggerFetch.mockImplementation( () => ( {
+			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
+		} ) );
+
+		await canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_block',
+			id: 123,
+		} )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
+
+		expect( triggerFetch ).toHaveBeenCalledWith( {
+			path: '/wp/v2/blocks/123',
+			method: 'OPTIONS',
+			parse: false,
 		} );
 
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'create/postType/wp_block/123',
+			true
+		);
+	} );
+
+	it( 'runs apiFetch only once per resource', async () => {
 		registry = {
+			...registry,
 			select: () => ( {
 				hasStartedResolution: ( _, [ action ] ) => action === 'read',
 			} ),
@@ -405,8 +493,14 @@ describe( 'canUser', () => {
 			headers: new Map( [ [ 'allow', 'POST, GET' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'blocks' )( { dispatch, registry } );
-		await canUser( 'read', 'blocks' )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'read',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
 
@@ -420,12 +514,50 @@ describe( 'canUser', () => {
 		);
 	} );
 
-	it( 'retrieves all permissions even when ID is not given', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
+	it( 'runs apiFetch only once per entity', async () => {
+		registry = {
+			...registry,
+			select: () => ( {
+				hasStartedResolution: ( _, [ action ] ) => action === 'read',
+			} ),
+		};
+
+		triggerFetch.mockImplementation( () => ( {
+			headers: new Map( [ [ 'allow', 'POST, GET' ] ] ),
+		} ) );
+
+		await canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_block',
+		} )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
+		await canUser( 'read', {
+			kind: 'postType',
+			name: 'wp_block',
+		} )( {
+			dispatch,
+			registry,
+			resolveSelect,
 		} );
 
+		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
+
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'create/postType/wp_block',
+			true
+		);
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'read/postType/wp_block',
+			true
+		);
+	} );
+
+	it( 'retrieves all permissions even when ID is not given', async () => {
 		registry = {
+			...registry,
 			select: () => ( {
 				hasStartedResolution: ( _, [ action ] ) => action === 'read',
 			} ),
@@ -435,10 +567,22 @@ describe( 'canUser', () => {
 			headers: new Map( [ [ 'allow', 'POST, GET' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'blocks' )( { dispatch, registry } );
-		await canUser( 'read', 'blocks' )( { dispatch, registry } );
-		await canUser( 'update', 'blocks' )( { dispatch, registry } );
-		await canUser( 'delete', 'blocks' )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'read',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'update',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'delete',
+			'blocks'
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
 			'create/blocks',
@@ -459,11 +603,8 @@ describe( 'canUser', () => {
 	} );
 
 	it( 'runs apiFetch only once per resource ID', async () => {
-		const dispatch = Object.assign( jest.fn(), {
-			receiveUserPermission: jest.fn(),
-		} );
-
 		registry = {
+			...registry,
 			select: () => ( {
 				hasStartedResolution: ( _, [ action ] ) => action === 'create',
 			} ),
@@ -473,10 +614,26 @@ describe( 'canUser', () => {
 			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
 		} ) );
 
-		await canUser( 'create', 'blocks', 123 )( { dispatch, registry } );
-		await canUser( 'read', 'blocks', 123 )( { dispatch, registry } );
-		await canUser( 'update', 'blocks', 123 )( { dispatch, registry } );
-		await canUser( 'delete', 'blocks', 123 )( { dispatch, registry } );
+		await canUser(
+			'create',
+			'blocks',
+			123
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'read',
+			'blocks',
+			123
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'update',
+			'blocks',
+			123
+		)( { dispatch, registry, resolveSelect } );
+		await canUser(
+			'delete',
+			'blocks',
+			123
+		)( { dispatch, registry, resolveSelect } );
 
 		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
 
@@ -497,6 +654,59 @@ describe( 'canUser', () => {
 			true
 		);
 	} );
+
+	it( 'runs apiFetch only once per entity ID', async () => {
+		registry = {
+			...registry,
+			select: () => ( {
+				hasStartedResolution: ( _, [ action ] ) => action === 'create',
+			} ),
+		};
+
+		triggerFetch.mockImplementation( () => ( {
+			headers: new Map( [ [ 'allow', 'POST, GET, PUT, DELETE' ] ] ),
+		} ) );
+
+		await canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_block',
+			id: 123,
+		} )( { dispatch, registry, resolveSelect } );
+		await canUser( 'read', {
+			kind: 'postType',
+			name: 'wp_block',
+			id: 123,
+		} )( { dispatch, registry, resolveSelect } );
+		await canUser( 'update', {
+			kind: 'postType',
+			name: 'wp_block',
+			id: 123,
+		} )( { dispatch, registry, resolveSelect } );
+		await canUser( 'delete', {
+			kind: 'postType',
+			name: 'wp_block',
+			id: 123,
+		} )( { dispatch, registry, resolveSelect } );
+
+		expect( triggerFetch ).toHaveBeenCalledTimes( 1 );
+
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'create/postType/wp_block/123',
+			true
+		);
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'read/postType/wp_block/123',
+			true
+		);
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'update/postType/wp_block/123',
+			true
+		);
+		expect( dispatch.receiveUserPermission ).toHaveBeenCalledWith(
+			'delete/postType/wp_block/123',
+			true
+		);
+	} );
 } );
 
 describe( 'getAutosaves', () => {
diff --git a/packages/core-data/src/test/selectors.js b/packages/core-data/src/test/selectors.js
index 0ea9e26e505437..4b5e8417ad2028 100644
--- a/packages/core-data/src/test/selectors.js
+++ b/packages/core-data/src/test/selectors.js
@@ -18,17 +18,40 @@ import {
 	getEmbedPreview,
 	isPreviewEmbedFallback,
 	canUser,
-	canUserEditEntityRecord,
 	getAutosave,
 	getAutosaves,
 	getCurrentUser,
-	getReferenceByDistinctEdits,
+	getRevisions,
+	getRevision,
 } from '../selectors';
 // getEntityRecord and __experimentalGetEntityRecordNoResolver selectors share the same tests.
 describe.each( [
 	[ getEntityRecord ],
 	[ __experimentalGetEntityRecordNoResolver ],
 ] )( '%p', ( selector ) => {
+	describe( 'normalizing Post ID passed as recordKey', () => {
+		it( 'normalizes any Post ID recordKey argument to a Number via `__unstableNormalizeArgs` method', async () => {
+			const normalized = getEntityRecord.__unstableNormalizeArgs( [
+				'postType',
+				'some_post',
+				'123',
+			] );
+			expect( normalized ).toEqual( [ 'postType', 'some_post', 123 ] );
+		} );
+
+		it( 'does not normalize recordKey argument unless it is a Post ID', async () => {
+			const normalized = getEntityRecord.__unstableNormalizeArgs( [
+				'postType',
+				'some_post',
+				'i-am-a-slug-with-a-number-123',
+			] );
+			expect( normalized ).toEqual( [
+				'postType',
+				'some_post',
+				'i-am-a-slug-with-a-number-123',
+			] );
+		} );
+	} );
 	it( 'should return undefined for unknown entity kind, name', () => {
 		const state = deepFreeze( {
 			entities: {
@@ -136,6 +159,43 @@ describe.each( [
 			} )
 		).toEqual( { content: 'chicken' } );
 	} );
+
+	it( 'should work well for nested fields properties', () => {
+		const state = deepFreeze( {
+			entities: {
+				records: {
+					root: {
+						postType: {
+							queriedData: {
+								items: {
+									default: {
+										post: {
+											foo: undefined,
+										},
+									},
+								},
+								itemIsComplete: {
+									default: {
+										post: true,
+									},
+								},
+								queries: {},
+							},
+						},
+					},
+				},
+			},
+		} );
+		expect(
+			getEntityRecord( state, 'root', 'postType', 'post', {
+				_fields: [ 'foo.bar' ],
+			} )
+		).toEqual( {
+			foo: {
+				bar: undefined,
+			},
+		} );
+	} );
 } );
 
 describe( 'hasEntityRecords', () => {
@@ -190,7 +250,7 @@ describe( 'hasEntityRecords', () => {
 								},
 								queries: {
 									default: {
-										'': [ 'post', 'page' ],
+										'': { itemIds: [ 'post', 'page' ] },
 									},
 								},
 							},
@@ -325,7 +385,7 @@ describe( 'getEntityRecords', () => {
 								},
 								queries: {
 									default: {
-										'': [ 'post', 'page' ],
+										'': { itemIds: [ 'post', 'page' ] },
 									},
 								},
 							},
@@ -363,7 +423,9 @@ describe( 'getEntityRecords', () => {
 								},
 								queries: {
 									default: {
-										'_fields=id%2Ccontent': [ 1 ],
+										'_fields=id%2Ccontent': {
+											itemIds: [ 1 ],
+										},
 									},
 								},
 							},
@@ -627,79 +689,43 @@ describe( 'canUser', () => {
 			userPermissions: {},
 		} );
 		expect( canUser( state, 'create', 'media' ) ).toBe( undefined );
+		expect(
+			canUser( state, 'create', { kind: 'root', name: 'media' } )
+		).toBe( undefined );
+	} );
+
+	it( 'returns null when entity kind or name is missing', () => {
+		const state = deepFreeze( {
+			userPermissions: {},
+		} );
+		expect( canUser( state, 'create', { name: 'media' } ) ).toBe( false );
+		expect( canUser( state, 'create', { kind: 'root' } ) ).toBe( false );
 	} );
 
 	it( 'returns whether an action can be performed', () => {
 		const state = deepFreeze( {
 			userPermissions: {
 				'create/media': false,
+				'create/root/media': false,
 			},
 		} );
 		expect( canUser( state, 'create', 'media' ) ).toBe( false );
+		expect(
+			canUser( state, 'create', { kind: 'root', name: 'media' } )
+		).toBe( false );
 	} );
 
 	it( 'returns whether an action can be performed for a given resource', () => {
 		const state = deepFreeze( {
 			userPermissions: {
 				'create/media/123': false,
+				'create/root/media/123': false,
 			},
 		} );
 		expect( canUser( state, 'create', 'media', 123 ) ).toBe( false );
-	} );
-} );
-
-describe( 'canUserEditEntityRecord', () => {
-	it( 'returns false by default', () => {
-		const state = deepFreeze( {
-			userPermissions: {},
-			entities: { records: {} },
-		} );
-		expect( canUserEditEntityRecord( state, 'postType', 'post' ) ).toBe(
-			false
-		);
-	} );
-
-	it( 'returns whether the user can edit', () => {
-		const state = deepFreeze( {
-			userPermissions: {
-				'create/posts': false,
-				'update/posts/1': true,
-			},
-			entities: {
-				config: [
-					{
-						kind: 'postType',
-						name: 'post',
-						__unstable_rest_base: 'posts',
-					},
-				],
-				records: {
-					root: {
-						postType: {
-							queriedData: {
-								items: {
-									default: {
-										post: {
-											slug: 'post',
-											__unstable: 'posts',
-										},
-									},
-								},
-								itemIsComplete: {
-									default: {
-										post: true,
-									},
-								},
-								queries: {},
-							},
-						},
-					},
-				},
-			},
-		} );
 		expect(
-			canUserEditEntityRecord( state, 'postType', 'post', '1' )
-		).toBe( true );
+			canUser( state, 'create', { kind: 'root', name: 'media', id: 123 } )
+		).toBe( false );
 	} );
 } );
 
@@ -836,55 +862,96 @@ describe( 'getCurrentUser', () => {
 	} );
 } );
 
-describe( 'getReferenceByDistinctEdits', () => {
-	it( 'should return referentially equal values across empty states', () => {
-		const state = { undo: [] };
-		expect( getReferenceByDistinctEdits( state ) ).toBe(
-			getReferenceByDistinctEdits( state )
-		);
-
-		const beforeState = { undo: [] };
-		const afterState = { undo: [] };
-		expect( getReferenceByDistinctEdits( beforeState ) ).toBe(
-			getReferenceByDistinctEdits( afterState )
-		);
-	} );
-
-	it( 'should return referentially equal values across unchanging non-empty state', () => {
-		const undoStates = [ {} ];
-		const state = { undo: undoStates };
-		expect( getReferenceByDistinctEdits( state ) ).toBe(
-			getReferenceByDistinctEdits( state )
-		);
+describe( 'getRevisions', () => {
+	it( 'should return revisions', () => {
+		const state = deepFreeze( {
+			entities: {
+				records: {
+					postType: {
+						post: {
+							revisions: {
+								1: {
+									items: {
+										default: {
+											10: {
+												id: 10,
+												content: 'chicken',
+												author: 'bob',
+												parent: 1,
+											},
+										},
+									},
+									itemIsComplete: {
+										default: {
+											10: true,
+										},
+									},
+									queries: {
+										default: {
+											'': { itemIds: [ 10 ] },
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
+		} );
 
-		const beforeState = { undo: undoStates };
-		const afterState = { undo: undoStates };
-		expect( getReferenceByDistinctEdits( beforeState ) ).toBe(
-			getReferenceByDistinctEdits( afterState )
-		);
+		expect( getRevisions( state, 'postType', 'post', 1 ) ).toEqual( [
+			{
+				id: 10,
+				content: 'chicken',
+				author: 'bob',
+				parent: 1,
+			},
+		] );
 	} );
+} );
 
-	describe( 'when adding edits', () => {
-		it( 'should return referentially different values across changing states', () => {
-			const beforeState = { undo: [ {} ] };
-			beforeState.undo.offset = 0;
-			const afterState = { undo: [ {}, {} ] };
-			afterState.undo.offset = 1;
-			expect( getReferenceByDistinctEdits( beforeState ) ).not.toBe(
-				getReferenceByDistinctEdits( afterState )
-			);
+describe( 'getRevision', () => {
+	it( 'should return a specific revision', () => {
+		const state = deepFreeze( {
+			entities: {
+				records: {
+					postType: {
+						post: {
+							revisions: {
+								1: {
+									items: {
+										default: {
+											10: {
+												id: 10,
+												content: 'chicken',
+												author: 'bob',
+												parent: 1,
+											},
+										},
+									},
+									itemIsComplete: {
+										default: {
+											10: true,
+										},
+									},
+									queries: {
+										default: {
+											'': [ 10 ],
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+			},
 		} );
-	} );
 
-	describe( 'when using undo', () => {
-		it( 'should return referentially different values across changing states', () => {
-			const beforeState = { undo: [ {}, {} ] };
-			beforeState.undo.offset = 1;
-			const afterState = { undo: [ {}, {} ] };
-			afterState.undo.offset = 0;
-			expect( getReferenceByDistinctEdits( beforeState ) ).not.toBe(
-				getReferenceByDistinctEdits( afterState )
-			);
+		expect( getRevision( state, 'postType', 'post', 1, 10 ) ).toEqual( {
+			id: 10,
+			content: 'chicken',
+			author: 'bob',
+			parent: 1,
 		} );
 	} );
 } );
diff --git a/packages/core-data/src/utils/conservative-map-item.js b/packages/core-data/src/utils/conservative-map-item.js
index 133a2e7d8d9d6b..2a3297b5b32ab8 100644
--- a/packages/core-data/src/utils/conservative-map-item.js
+++ b/packages/core-data/src/utils/conservative-map-item.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * Given the current and next item entity record, returns the minimally "modified"
@@ -22,7 +22,7 @@ export default function conservativeMapItem( item, nextItem ) {
 	let hasChanges = false;
 	const result = {};
 	for ( const key in nextItem ) {
-		if ( isEqual( item[ key ], nextItem[ key ] ) ) {
+		if ( fastDeepEqual( item[ key ], nextItem[ key ] ) ) {
 			result[ key ] = item[ key ];
 		} else {
 			hasChanges = true;
diff --git a/packages/core-data/src/utils/get-nested-value.js b/packages/core-data/src/utils/get-nested-value.js
new file mode 100644
index 00000000000000..0fe210159b07b8
--- /dev/null
+++ b/packages/core-data/src/utils/get-nested-value.js
@@ -0,0 +1,27 @@
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ * You can also specify a default value in case the result is nullish.
+ *
+ * @param {Object}       object       Input object.
+ * @param {string|Array} path         Path to the object property.
+ * @param {*}            defaultValue Default value if the value at the specified path is undefined.
+ * @return {*} Value of the object property at the specified path.
+ */
+export default function getNestedValue( object, path, defaultValue ) {
+	if (
+		! object ||
+		typeof object !== 'object' ||
+		( typeof path !== 'string' && ! Array.isArray( path ) )
+	) {
+		return object;
+	}
+	const normalizedPath = Array.isArray( path ) ? path : path.split( '.' );
+	let value = object;
+	normalizedPath.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value !== undefined ? value : defaultValue;
+}
diff --git a/packages/core-data/src/utils/index.js b/packages/core-data/src/utils/index.js
index c17633c6a17d1d..db10359bda07dd 100644
--- a/packages/core-data/src/utils/index.js
+++ b/packages/core-data/src/utils/index.js
@@ -6,3 +6,12 @@ export { default as onSubKey } from './on-sub-key';
 export { default as replaceAction } from './replace-action';
 export { default as withWeakMapCache } from './with-weak-map-cache';
 export { default as isRawAttribute } from './is-raw-attribute';
+export { default as setNestedValue } from './set-nested-value';
+export { default as getNestedValue } from './get-nested-value';
+export { default as isNumericID } from './is-numeric-id';
+export {
+	getUserPermissionCacheKey,
+	getUserPermissionsFromAllowHeader,
+	ALLOWED_RESOURCE_ACTIONS,
+} from './user-permissions';
+export { RECEIVE_INTERMEDIATE_RESULTS } from './receive-intermediate-results';
diff --git a/packages/core-data/src/utils/is-numeric-id.js b/packages/core-data/src/utils/is-numeric-id.js
new file mode 100644
index 00000000000000..1bc05575d0aeda
--- /dev/null
+++ b/packages/core-data/src/utils/is-numeric-id.js
@@ -0,0 +1,10 @@
+/**
+ * Checks argument to determine if it's a numeric ID.
+ * For example, '123' is a numeric ID, but '123abc' is not.
+ *
+ * @param {any} id the argument to determine if it's a numeric ID.
+ * @return {boolean} true if the string is a numeric ID, false otherwise.
+ */
+export default function isNumericID( id ) {
+	return /^\s*\d+\s*$/.test( id );
+}
diff --git a/packages/core-data/src/utils/receive-intermediate-results.js b/packages/core-data/src/utils/receive-intermediate-results.js
new file mode 100644
index 00000000000000..53d2295b28b390
--- /dev/null
+++ b/packages/core-data/src/utils/receive-intermediate-results.js
@@ -0,0 +1,3 @@
+export const RECEIVE_INTERMEDIATE_RESULTS = Symbol(
+	'RECEIVE_INTERMEDIATE_RESULTS'
+);
diff --git a/packages/core-data/src/utils/set-nested-value.js b/packages/core-data/src/utils/set-nested-value.js
new file mode 100644
index 00000000000000..cb2ae788d1c92c
--- /dev/null
+++ b/packages/core-data/src/utils/set-nested-value.js
@@ -0,0 +1,45 @@
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/edit-site`.
+ *
+ * @param {Object}       object Object to modify
+ * @param {Array|string} path   Path of the property to set.
+ * @param {*}            value  Value to set.
+ */
+export default function setNestedValue( object, path, value ) {
+	if ( ! object || typeof object !== 'object' ) {
+		return object;
+	}
+
+	const normalizedPath = Array.isArray( path ) ? path : path.split( '.' );
+
+	normalizedPath.reduce( ( acc, key, idx ) => {
+		if ( acc[ key ] === undefined ) {
+			if ( Number.isInteger( normalizedPath[ idx + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
+		}
+		if ( idx === normalizedPath.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, object );
+
+	return object;
+}
diff --git a/packages/core-data/src/utils/test/get-nested-value.js b/packages/core-data/src/utils/test/get-nested-value.js
new file mode 100644
index 00000000000000..1048885d39c674
--- /dev/null
+++ b/packages/core-data/src/utils/test/get-nested-value.js
@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import getNestedValue from '../get-nested-value';
+
+describe( 'getNestedValue', () => {
+	it( 'should return the same object unmodified if path is an empty array', () => {
+		const input = { x: 'y' };
+		const result = getNestedValue( input, [] );
+		expect( result ).toEqual( input );
+	} );
+
+	it( 'should return the nested value', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = getNestedValue( input, [ 'x', 'y', 'z' ] );
+
+		expect( result ).toEqual( 123 );
+	} );
+
+	it( 'should return the nested value if the path is a string', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = getNestedValue( input, 'x.y.z' );
+
+		expect( result ).toEqual( 123 );
+	} );
+
+	it( 'should return the shallow value', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = getNestedValue( input, 'x' );
+
+		expect( result ).toEqual( { y: { z: 123 } } );
+	} );
+
+	it( 'should return the default value if the nested value is undefined', () => {
+		const input = { x: { y: { z: undefined } } };
+		const result = getNestedValue( input, [ 'x', 'y', 'z' ], 456 );
+
+		expect( result ).toEqual( 456 );
+	} );
+
+	it( 'should return the nested value if it is different to undefined', () => {
+		const input = { x: { y: { z: null } } };
+		const result = getNestedValue( input, 'x.y.z', 456 );
+
+		expect( result ).toBeNull();
+	} );
+
+	it( 'should return the default value if the nested value does not exist', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = getNestedValue( input, [ 'x', 'y', 'z1' ], 456 );
+
+		expect( result ).toEqual( 456 );
+	} );
+
+	it( 'should return undefined if the nested value does not exist', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = getNestedValue( input, [ 'x', 'y', 'z1' ] );
+
+		expect( result ).toBeUndefined();
+	} );
+} );
diff --git a/packages/core-data/src/utils/test/is-numeric-id.js b/packages/core-data/src/utils/test/is-numeric-id.js
new file mode 100644
index 00000000000000..ac879887742561
--- /dev/null
+++ b/packages/core-data/src/utils/test/is-numeric-id.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import isNumericID from '../is-numeric-id';
+
+describe( 'isNumericID', () => {
+	test.each( [
+		[ true, '12345' ],
+		[ true, '42' ],
+		[ true, '   42   ' ],
+		[ false, 'abc123' ],
+		[ false, '123abc' ],
+		[ false, '' ],
+		[ false, '123-abc' ],
+		[ false, 'abc-123' ],
+		[ false, '42-test-123' ],
+		[ false, '3.42' ],
+		[ true, 123 ],
+	] )( `should return %s for input "%s"`, ( expected, input ) => {
+		expect( isNumericID( input ) ).toBe( expected );
+	} );
+} );
diff --git a/packages/core-data/src/utils/test/set-nested-value.js b/packages/core-data/src/utils/test/set-nested-value.js
new file mode 100644
index 00000000000000..7785e94830109a
--- /dev/null
+++ b/packages/core-data/src/utils/test/set-nested-value.js
@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import setNestedValue from '../set-nested-value';
+
+describe( 'setNestedValue', () => {
+	it( 'should return the same object unmodified if path is an empty array', () => {
+		const input = { x: 'y' };
+		const result = setNestedValue( input, [], 123 );
+
+		expect( result ).toBe( input );
+		expect( result ).toEqual( { x: 'y' } );
+	} );
+
+	it( 'should set values at deep level', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = setNestedValue( input, [ 'x', 'y', 'z' ], 456 );
+
+		expect( result ).toEqual( { x: { y: { z: 456 } } } );
+	} );
+
+	it( 'should set values at deep level having a string as path', () => {
+		const input = { x: { y: { z: 123 } } };
+		const result = setNestedValue( input, 'x.y.z', 456 );
+
+		expect( result ).toEqual( { x: { y: { z: 456 } } } );
+	} );
+
+	it( 'should create nested objects if necessary', () => {
+		const result = setNestedValue( {}, [ 'x', 'y', 'z' ], 123 );
+
+		expect( result ).toEqual( { x: { y: { z: 123 } } } );
+	} );
+
+	it( 'should create nested arrays when keys are numeric', () => {
+		const result = setNestedValue( {}, [ 'x', 0, 'z' ], 123 );
+
+		expect( result ).toEqual( { x: [ { z: 123 } ] } );
+	} );
+
+	it( 'should also work with arrays', () => {
+		const result = setNestedValue( [], [ 0, 1, 2 ], 123 );
+
+		expect( result ).toEqual( [ [ , [ , , 123 ] ] ] );
+	} );
+
+	it( 'should keep remaining properties unaffected', () => {
+		const input = { x: { y: { z: 123, z1: 'z1' }, y1: 'y1' }, x1: 'x1' };
+		const result = setNestedValue( input, [ 'x', 'y', 'z' ], 456 );
+
+		expect( result ).toEqual( {
+			x: { y: { z: 456, z1: 'z1' }, y1: 'y1' },
+			x1: 'x1',
+		} );
+	} );
+
+	it( 'should intentionally mutate the original object', () => {
+		const input = { x: 'y' };
+		const result = setNestedValue( input, [ 'x' ], 'z' );
+
+		expect( result ).toBe( input );
+		expect( result ).toEqual( { x: 'z' } );
+	} );
+
+	it.each( [
+		undefined,
+		null,
+		0,
+		5,
+		NaN,
+		Infinity,
+		'test',
+		false,
+		true,
+		Symbol( 'foo' ),
+	] )( 'should return the original input if it is %s', ( value ) => {
+		expect( setNestedValue( value, [ 'x' ], 123 ) ).toBe( value );
+	} );
+} );
diff --git a/packages/core-data/src/utils/user-permissions.js b/packages/core-data/src/utils/user-permissions.js
new file mode 100644
index 00000000000000..f1f02b5f5ba702
--- /dev/null
+++ b/packages/core-data/src/utils/user-permissions.js
@@ -0,0 +1,37 @@
+export const ALLOWED_RESOURCE_ACTIONS = [
+	'create',
+	'read',
+	'update',
+	'delete',
+];
+
+export function getUserPermissionsFromAllowHeader( allowedMethods ) {
+	const permissions = {};
+	if ( ! allowedMethods ) {
+		return permissions;
+	}
+
+	const methods = {
+		create: 'POST',
+		read: 'GET',
+		update: 'PUT',
+		delete: 'DELETE',
+	};
+	for ( const [ actionName, methodName ] of Object.entries( methods ) ) {
+		permissions[ actionName ] = allowedMethods.includes( methodName );
+	}
+
+	return permissions;
+}
+
+export function getUserPermissionCacheKey( action, resource, id ) {
+	const key = (
+		typeof resource === 'object'
+			? [ action, resource.kind, resource.name, resource.id ]
+			: [ action, resource, id ]
+	)
+		.filter( Boolean )
+		.join( '/' );
+
+	return key;
+}
diff --git a/packages/core-data/tsconfig.json b/packages/core-data/tsconfig.json
index 7ff37851b7ab9c..26602d82ab0c01 100644
--- a/packages/core-data/tsconfig.json
+++ b/packages/core-data/tsconfig.json
@@ -1,21 +1,28 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false,
 		"noImplicitAny": false
 	},
 	"references": [
 		{ "path": "../api-fetch" },
+		{ "path": "../compose" },
+		{ "path": "../block-editor" },
 		{ "path": "../data" },
 		{ "path": "../deprecated" },
 		{ "path": "../element" },
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../is-shallow-equal" },
-		{ "path": "../url" }
+		{ "path": "../private-apis" },
+		{ "path": "../rich-text" },
+		{ "path": "../sync" },
+		{ "path": "../undo-manager" },
+		{ "path": "../url" },
+		{ "path": "../warning" }
 	],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
new file mode 100644
index 00000000000000..24dcfd52b7b586
--- /dev/null
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -0,0 +1,94 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## 2.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Added TypeScript variant of the template ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+
+## 2.7.0 (2024-09-05)
+
+### Enhancements
+
+-   Set the minimum supported WordPress version to 6.6 to make it work seamlessly with the latest version of `@wordpress/scripts` package ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.21.0 (2024-05-16)
+
+## 1.20.0 (2024-05-02)
+
+## 1.19.0 (2024-04-19)
+
+## 1.18.0 (2024-04-03)
+
+## 1.17.0 (2024-03-21)
+
+### Enhancements
+
+-   Update the template to use `wp_interactivity_data_wp_context` for the context attribute ([#59995](https://github.com/WordPress/gutenberg/pull/59995)).
+
+## 1.16.0 (2024-03-06)
+
+## 1.15.0 (2024-02-21)
+
+## 1.14.0 (2024-02-09)
+
+## 1.13.0 (2024-01-24)
+
+## 1.12.0 (2024-01-10)
+
+### Enhancements
+
+-   Update the template to use `viewModule` in block.json ([#57712](https://github.com/WordPress/gutenberg/pull/57712)).
+
+## 1.11.0 (2023-12-13)
+
+-   Add all files to the generated plugin zip ([#56943](https://github.com/WordPress/gutenberg/pull/56943)).
+-   Prevent crash when Gutenberg plugin is not installed ([#56941](https://github.com/WordPress/gutenberg/pull/56941)).
+
+## 1.10.1 (2023-12-07)
+
+-   Update template to use modules instead of scripts ([#56694](https://github.com/WordPress/gutenberg/pull/56694)).
+
+## 1.10.0 (2023-11-29)
+
+### Enhancements
+
+-   Update `view.js` and `render.php` templates to the new `store()` API ([#56613](https://github.com/WordPress/gutenberg/pull/56613)).
+
+## 1.9.0 (2023-11-16)
+
+## 1.8.0 (2023-11-02)
+
+## 1.7.0 (2023-10-18)
+
+## 1.6.0 (2023-10-05)
+
+## 1.5.0 (2023-09-20)
+
+## 1.4.0 (2023-08-31)
+
+## 1.3.0 (2023-08-16)
+
+## 1.2.0 (2023-08-10)
+
+### Enhancements
+
+-   Moves the `example` property into block.json by leveraging changes to create-block to now support `example` ([#52801](https://github.com/WordPress/gutenberg/pull/52801)).
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
new file mode 100644
index 00000000000000..b50adb49265245
--- /dev/null
+++ b/packages/create-block-interactive-template/README.md
@@ -0,0 +1,21 @@
+# Create Block Interactive Template
+
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks.
+
+## Usage
+
+This block template can be used by running the following command:
+
+```bash
+npx @wordpress/create-block --template @wordpress/create-block-interactive-template
+```
+
+It requires at least WordPress 6.5 or Gutenberg 17.7.
+
+## 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/create-block-interactive-template/block-templates/README.md.mustache b/packages/create-block-interactive-template/block-templates/README.md.mustache
new file mode 100644
index 00000000000000..4a13743750f748
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/README.md.mustache
@@ -0,0 +1,6 @@
+# Interactive Block
+
+> **Note**
+> Check the [Interactivity API Reference docs in the Block Editor handbook](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) to learn more about the Interactivity API.
+
+This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
diff --git a/packages/create-block-interactive-template/block-templates/edit.js.mustache b/packages/create-block-interactive-template/block-templates/edit.js.mustache
new file mode 100644
index 00000000000000..b7d273cee07b92
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/edit.js.mustache
@@ -0,0 +1,36 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @param {Object}   props               Properties passed to the function.
+ * @param {Object}   props.attributes    Available block attributes.
+ * @param {Function} props.setAttributes Function that updates individual attributes.
+ *
+ * @return {Element} Element to render.
+ */
+export default function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	
+	return (
+		<p { ...blockProps }>
+			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
+		</p>
+	);
+}
diff --git a/packages/create-block-tutorial-template/block-templates/editor.scss.mustache b/packages/create-block-interactive-template/block-templates/editor.scss.mustache
similarity index 82%
rename from packages/create-block-tutorial-template/block-templates/editor.scss.mustache
rename to packages/create-block-interactive-template/block-templates/editor.scss.mustache
index 5d0b2deea6c10e..bdb19abec84212 100644
--- a/packages/create-block-tutorial-template/block-templates/editor.scss.mustache
+++ b/packages/create-block-interactive-template/block-templates/editor.scss.mustache
@@ -5,8 +5,7 @@
  */
 
 .wp-block-{{namespace}}-{{slug}} input[type="text"] {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
+	font-size: 1em;
 	color: inherit;
 	background: inherit;
 	border: 0;
diff --git a/packages/create-block-interactive-template/block-templates/index.js.mustache b/packages/create-block-interactive-template/block-templates/index.js.mustache
new file mode 100644
index 00000000000000..5279d80f5754c8
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/index.js.mustache
@@ -0,0 +1,35 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor. All other files
+ * get applied to the editor only.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+import './editor.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+} );
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
new file mode 100644
index 00000000000000..4f84b30dbcdbdd
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -0,0 +1,56 @@
+<?php
+/**
+ * PHP file to use when rendering the block type on the server to show on the front end.
+ *
+ * The following variables are exposed to the file:
+ *     $attributes (array): The block attributes.
+ *     $content (string): The block default content.
+ *     $block (WP_Block): The block instance.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+
+// Generates a unique id for aria-controls.
+$unique_id = wp_unique_id( 'p-' );
+
+// Adds the global state.
+wp_interactivity_state(
+	'{{namespace}}',
+	array(
+		'isDark'    => false,
+		'darkText'  => esc_html__( 'Switch to Light', '{{textdomain}}' ),
+		'lightText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+		'themeText'	=> esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+	)
+);
+?>
+
+<div
+	<?php echo get_block_wrapper_attributes(); ?>
+	data-wp-interactive="{{namespace}}"
+	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
+	data-wp-watch="callbacks.logIsOpen"
+	data-wp-class--dark-theme="state.isDark"
+>
+	<button
+		data-wp-on--click="actions.toggleTheme"
+		data-wp-text="state.themeText"
+	></button>
+
+	<button
+		data-wp-on--click="actions.toggleOpen"
+		data-wp-bind--aria-expanded="context.isOpen"
+		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
+	>
+		<?php esc_html_e( 'Toggle', '{{textdomain}}' ); ?>
+	</button>
+
+	<p
+		id="<?php echo esc_attr( $unique_id ); ?>"
+		data-wp-bind--hidden="!context.isOpen"
+	>
+		<?php
+			esc_html_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
+		?>
+	</p>
+</div>
diff --git a/packages/create-block-interactive-template/block-templates/style.scss.mustache b/packages/create-block-interactive-template/block-templates/style.scss.mustache
new file mode 100644
index 00000000000000..c8aa9f232136e2
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/style.scss.mustache
@@ -0,0 +1,27 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-{{namespace}}-{{slug}} {
+	font-size: 1em;
+	background: #ffff001a;
+	padding: 1em;
+
+	&.dark-theme {
+		background: #333;
+		color: #fff;
+
+		button {
+			background: #555;
+			color: #fff;
+			border: 1px solid #777;
+		}
+
+		p {
+			color: #ddd;
+		}
+	}
+}
diff --git a/packages/create-block-interactive-template/block-templates/view.js.mustache b/packages/create-block-interactive-template/block-templates/view.js.mustache
new file mode 100644
index 00000000000000..3fcf1ba365d265
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -0,0 +1,30 @@
+{{#isDefaultVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( '{{namespace}}', {
+	state: {
+		get themeText() {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
+	actions: {
+		toggleOpen() {
+			const context = getContext();
+			context.isOpen = ! context.isOpen;
+		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+} );
+{{/isDefaultVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/view.ts.mustache b/packages/create-block-interactive-template/block-templates/view.ts.mustache
new file mode 100644
index 00000000000000..11670442d73704
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/view.ts.mustache
@@ -0,0 +1,46 @@
+{{#isTypescriptVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+type ServerState = {
+	state: {
+		isDark: boolean;
+		darkText: string;
+		lightText: string;
+	};
+};
+
+type Context = {
+	isOpen: boolean;
+};
+
+const storeDef = {
+	state: {
+		get themeText(): string {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
+	actions: {
+		toggleOpen() {
+			const context = getContext< Context >();
+			context.isOpen = ! context.isOpen;
+		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext< Context >();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+};
+
+type Store = ServerState & typeof storeDef;
+
+const { state } = store< Store >( '{{namespace}}', storeDef );
+{{/isTypescriptVariant}}
diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js
new file mode 100644
index 00000000000000..94f615df2747f2
--- /dev/null
+++ b/packages/create-block-interactive-template/index.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+module.exports = {
+	defaultValues: {
+		slug: 'example-interactive',
+		title: 'Example Interactive',
+		description: 'An interactive block with the Interactivity API.',
+		dashicon: 'media-interactive',
+		npmDependencies: [ '@wordpress/interactivity' ],
+		customPackageJSON: { files: [ '[^.]*' ] },
+		supports: {
+			interactivity: true,
+		},
+		viewScript: null,
+		viewScriptModule: 'file:./view.js',
+		render: 'file:./render.php',
+		example: {},
+		customScripts: {
+			build: 'wp-scripts build --experimental-modules',
+			start: 'wp-scripts start --experimental-modules',
+		},
+	},
+	variants: {
+		default: {},
+		typescript: {
+			slug: 'example-interactive-typescript',
+			title: 'Example Interactive TypeScript',
+			description:
+				'An interactive block with the Interactivity API using TypeScript.',
+			viewScriptModule: 'file:./view.ts',
+		},
+	},
+	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
+	blockTemplatesPath: join( __dirname, 'block-templates' ),
+};
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
new file mode 100644
index 00000000000000..8f59d685df91dd
--- /dev/null
+++ b/packages/create-block-interactive-template/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "@wordpress/create-block-interactive-template",
+	"version": "2.13.0",
+	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"create block",
+		"block template",
+		"Interactivity API"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/create-block-interactive-template"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
new file mode 100644
index 00000000000000..48469aa7d0d931
--- /dev/null
+++ b/packages/create-block-interactive-template/plugin-templates/$slug.php.mustache
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Plugin Name:       {{title}}
+{{#pluginURI}}
+ * Plugin URI:        {{{pluginURI}}}
+{{/pluginURI}}
+{{#description}}
+ * Description:       {{description}}
+{{/description}}
+ * Version:           {{version}}
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
+{{#author}}
+ * Author:            {{author}}
+{{/author}}
+{{#license}}
+ * License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:       {{textdomain}}
+{{#domainPath}}
+ * Domain Path:       {{{domainPath}}}
+{{/domainPath}}
+{{#updateURI}}
+ * Update URI:        {{{updateURI}}}
+{{/updateURI}}
+ *
+ * @package           {{namespace}}
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	register_block_type_from_metadata( __DIR__ . '/build' );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
diff --git a/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache b/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache
new file mode 100644
index 00000000000000..c3abf5ae4ec024
--- /dev/null
+++ b/packages/create-block-interactive-template/plugin-templates/readme.txt.mustache
@@ -0,0 +1,61 @@
+=== {{title}} ===
+{{#author}}
+Contributors:      {{author}}
+{{/author}}
+Tags:              block
+Tested up to:      6.6
+Stable tag:        {{version}}
+{{#license}}
+License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+
+{{description}}
+
+== Description ==
+
+This is the long description. No limit, and you can use Markdown (as well as in the following sections).
+
+For backwards compatibility, if this section is missing, the full length of the short description will be used, and
+Markdown parsed.
+
+== Installation ==
+
+This section describes how to install the plugin and get it working.
+
+e.g.
+
+1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly.
+1. Activate the plugin through the 'Plugins' screen in WordPress
+
+
+== Frequently Asked Questions ==
+
+= A question that someone might have =
+
+An answer to that question.
+
+= What about foo bar? =
+
+Answer to foo bar dilemma.
+
+== Screenshots ==
+
+1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
+the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
+directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
+(or jpg, jpeg, gif).
+2. This is the second screen shot
+
+== Changelog ==
+
+= {{version}} =
+* Release
+
+== Arbitrary section ==
+
+You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
+plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
+"installation." Arbitrary sections will be shown below the built-in sections outlined above.
diff --git a/packages/create-block-tutorial-template/.npmrc b/packages/create-block-tutorial-template/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/create-block-tutorial-template/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index e51b8092d2f89a..f219c74dceca6b 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,11 +2,123 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+### Enhancements
+
+-   Set the minimum supported WordPress version to 6.6 to make it work seamlessly with the latest version of `@wordpress/scripts` package ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.12.0 (2024-05-16)
+
+## 3.11.0 (2024-05-02)
+
+## 3.10.0 (2024-04-19)
+
+## 3.9.0 (2024-04-03)
+
+## 3.8.0 (2024-03-21)
+
+## 3.7.0 (2024-03-06)
+
+## 3.6.0 (2024-02-21)
+
+## 3.5.0 (2024-02-09)
+
+## 3.4.0 (2024-01-24)
+
+## 3.3.0 (2024-01-10)
+
+## 3.2.0 (2023-12-13)
+
+## 3.1.0 (2023-11-29)
+
+## 3.0.0 (2023-11-16)
+
+### Breaking Changes
+
+-   Update the block example scaffolded by the template.
+
+## 2.33.0 (2023-11-02)
+
+## 2.32.0 (2023-10-18)
+
+## 2.31.0 (2023-10-05)
+
+## 2.30.0 (2023-09-20)
+
+## 2.29.0 (2023-08-31)
+
+## 2.28.0 (2023-08-16)
+
+## 2.27.0 (2023-08-10)
+
+## 2.26.0 (2023-07-20)
+
+## 2.25.0 (2023-07-05)
+
+## 2.24.0 (2023-06-23)
+
+## 2.23.0 (2023-06-07)
+
+## 2.22.0 (2023-05-24)
+
+## 2.21.0 (2023-05-10)
+
+## 2.20.0 (2023-04-26)
+
+## 2.19.0 (2023-04-12)
+
+## 2.18.0 (2023-03-29)
+
+## 2.17.0 (2023-03-15)
+
+## 2.16.0 (2023-03-01)
+
+## 2.15.0 (2023-02-15)
+
+## 2.14.0 (2023-02-01)
+
+## 2.13.0 (2023-01-11)
+
+## 2.12.0 (2023-01-02)
+
+## 2.11.0 (2022-12-14)
+
 ## 2.10.0 (2022-11-16)
 
 ## 2.9.0 (2022-11-02)
 
-### Enhancement
+### Enhancements
 
 -   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
 
@@ -18,59 +130,59 @@
 
 ## 2.5.0 (2022-08-24)
 
-### Enhancement
+### Enhancements
 
 -   Add support to the `dynamic` variant ([#41289](https://github.com/WordPress/gutenberg/pull/41289), [#43481](https://github.com/WordPress/gutenberg/pull/43481)).
 
 ## 2.3.0 (2022-06-01)
 
-### Enhancement
+### Enhancements
 
 -   Read the block name from `block.json` file in JavaScript files ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the issue with the block wrapper in the editor ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
 
 ## 2.1.0 (2022-04-21)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix some CSS Coding Standards violations in file templates ([#40479](https://github.com/WordPress/gutenberg/pull/40479)).
 
 ## 2.0.0 (2022-03-03)
 
-### Breaking Change
+### Breaking Changes
 
 -   Bring project's template compatibility with `@wordpress/create-block` v3 ([#39049](https://github.com/WordPress/gutenberg/pull/39049)).
 
-### Enhancement
+### Enhancements
 
 -   Update project template configuration and templates to synchronize with the updated [Create a Block Tutorial](https://developer.wordpress.org/block-editor/getting-started/create-block/) ([#39049](https://github.com/WordPress/gutenberg/pull/39049)).
 
 ## 1.4.0 (2022-01-27)
 
-### Enhancement
+### Enhancements
 
 -   Speed up scaffolding process by omitting WordPress dependencies in the template ([#37639](https://github.com/WordPress/gutenberg/pull/37639)).
 -   Update link to block registration reference ([#37674](https://github.com/WordPress/gutenberg/pull/37674))
 
 ## 1.3.0 (2021-07-21)
 
-### Enhancement
+### Enhancements
 
 -   Plugin scaffolded requires WordPress 5.8 now ([#33252](https://github.com/WordPress/gutenberg/pull/33252).
 -   Scaffolded block is now registered from `block.json` with the `register_block_type` helper ([#33252](https://github.com/WordPress/gutenberg/pull/33252)).
 
 ## 1.2.0 (2021-04-06)
 
-### Enhancement
+### Enhancements
 
 -   Scaffolded plugin requires WordPress 5.7 now ([#29757](https://github.com/WordPress/gutenberg/pull/29757).
 
 ## 1.1.0 (2021-03-17)
 
-### Enhancement
+### Enhancements
 
 -   Scaffolded block is now registered from `block.json` with the `register_block_type_from_metadata` helper ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
 
diff --git a/packages/create-block-tutorial-template/README.md b/packages/create-block-tutorial-template/README.md
index a4143312948e50..cf9cfe99a0d376 100644
--- a/packages/create-block-tutorial-template/README.md
+++ b/packages/create-block-tutorial-template/README.md
@@ -1,15 +1,17 @@
 # Create Block Tutorial Template
 
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) that is the finished version of the block in the official [WordPress Tutorial](https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block/README.md) for the block editor.
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) that creates an example "Copyright Date" block. This block is used in the official WordPress block development [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide).
 
 ## Usage
 
 This block template can be used by running the following command:
 
 ```bash
-npx  @wordpress/create-block --template @wordpress/create-block-tutorial-template
+npx @wordpress/create-block --template @wordpress/create-block-tutorial-template
 ```
 
+Use the default options when prompted in the terminal.
+
 ## 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.
diff --git a/packages/create-block-tutorial-template/block-templates/edit.js.mustache b/packages/create-block-tutorial-template/block-templates/edit.js.mustache
index af0cb1629f62f2..69a93b70c35565 100644
--- a/packages/create-block-tutorial-template/block-templates/edit.js.mustache
+++ b/packages/create-block-tutorial-template/block-templates/edit.js.mustache
@@ -1,17 +1,40 @@
 /**
- * WordPress components that create the necessary UI elements for the block
+ * Retrieves the translation of text.
  *
- * @see https://developer.wordpress.org/block-editor/packages/packages-components/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
  */
-import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
- * React hook that is used to mark the block wrapper element.
- * It provides all the necessary props like the class name.
+ * Imports the InspectorControls component, which is used to wrap
+ * the block's custom controls that will appear in in the Settings
+ * Sidebar when the block is selected.
+ * 
+ * Also imports the React hook that is used to mark the block wrapper 
+ * element. It provides all the necessary props like the class name.
  *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#inspectorcontrols
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Imports the necessary components that will be used to create
+ * the user interface for the block's settings.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/text-control/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/
+ */
+import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
+
+/**
+ * Imports the useEffect React Hook. This is used to set an attribute when the
+ * block is loaded in the Editor.
+ *
+ * @see https://react.dev/reference/react/useEffect
+ */
+import { useEffect } from 'react';
 
 /**
  * The edit function describes the structure of your block in the context of the
@@ -23,16 +46,62 @@ import { useBlockProps } from '@wordpress/block-editor';
  * @param {Object}   props.attributes    Available block attributes.
  * @param {Function} props.setAttributes Function that updates individual attributes.
  *
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
  */
 export default function Edit( { attributes, setAttributes } ) {
-	const blockProps = useBlockProps();
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+
+	// Get the current year and make sure it's a string.
+	const currentYear = new Date().getFullYear().toString();
+
+	// When the block loads, set the fallbackCurrentYear attribute to the
+	// current year if it's not already set.
+	useEffect( () => {
+		if ( currentYear !== fallbackCurrentYear ) {
+			setAttributes( { fallbackCurrentYear: currentYear } );
+		}
+	}, [ currentYear, fallbackCurrentYear, setAttributes ] );
+
+	let displayDate;
+
+	// Display the starting year as well if supplied by the user.
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + currentYear;
+	} else {
+		displayDate = currentYear;
+	}
+
 	return (
-		<div { ...blockProps }>
-			<TextControl
-				value={ attributes.message }
-				onChange={ ( val ) => setAttributes( { message: val } ) }
-			/>
-		</div>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', '{{textdomain}}' ) }>
+					<ToggleControl
+						checked={ showStartingYear }
+						label={ __(
+							'Show starting year',
+							'{{textdomain}}'
+						) }
+						onChange={ () =>
+							setAttributes( {
+								showStartingYear: ! showStartingYear,
+							} )
+						}
+					/>
+					{ showStartingYear && (
+						<TextControl
+							label={ __(
+								'Starting year',
+								'{{textdomain}}'
+							) }
+							value={ startingYear }
+							onChange={ ( value ) =>
+								setAttributes( { startingYear: value } )
+							}
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { displayDate }</p>
+		</>
 	);
 }
diff --git a/packages/create-block-tutorial-template/block-templates/index.js.mustache b/packages/create-block-tutorial-template/block-templates/index.js.mustache
index fa35fbf2729220..117d08b8669807 100644
--- a/packages/create-block-tutorial-template/block-templates/index.js.mustache
+++ b/packages/create-block-tutorial-template/block-templates/index.js.mustache
@@ -5,49 +5,41 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * All files containing `style` keyword are bundled together. The code used
- * gets applied both to the front of your site and to the editor. All other files
- * get applied to the editor only.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
-import './style.scss';
-import './editor.scss';
-
 /**
  * Internal dependencies
  */
 import Edit from './edit';
-{{#isStaticVariant}}
 import save from './save';
-{{/isStaticVariant}}
 import metadata from './block.json';
 
+/**
+ * Define a custom SVG icon for the block. This icon will appear in
+ * the Inserter and when the user selects the block in the Editor.
+ */
+const calendarIcon = (
+	<svg
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
+	</svg>
+);
+
 /**
  * Every block starts by registering a new block type definition.
  *
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
 registerBlockType( metadata.name, {
-	/**
-	 * Used to construct a preview for the block to be shown in the block inserter.
-	 */
-	example: {
-		attributes: {
-			message: '{{title}}',
-		},
-	},
+	icon: calendarIcon,
 	/**
 	 * @see ./edit.js
 	 */
 	edit: Edit,
-	{{#isStaticVariant}}
-
 	/**
 	 * @see ./save.js
 	 */
 	save,
-	{{/isStaticVariant}}
 } );
diff --git a/packages/create-block-tutorial-template/block-templates/render.php.mustache b/packages/create-block-tutorial-template/block-templates/render.php.mustache
index bd08be1004a073..1d31cdbed2836b 100644
--- a/packages/create-block-tutorial-template/block-templates/render.php.mustache
+++ b/packages/create-block-tutorial-template/block-templates/render.php.mustache
@@ -1,5 +1,33 @@
-{{#isDynamicVariant}}
-<p <?php echo get_block_wrapper_attributes(); ?>>
-	<?php echo esc_html( $attributes['message'] ); ?>
-</p>
-{{/isDynamicVariant}}
+<?php
+/**
+ * PHP file to use when rendering the block type on the server to show on the front end.
+ *
+ * The following variables are exposed to the file:
+ *     $attributes (array): The block attributes.
+ *     $content (string): The block default content.
+ *     $block (WP_Block): The block instance.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+
+// Get the current year.
+$current_year = date( "Y" );
+
+// Determine which content to display.
+if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
+
+	// The current year is the same as the fallback, so use the block content saved in the database (by the save.js function).
+	$block_content = $content;
+} else {
+
+	// The current year is different from the fallback, so render the updated block content.
+	if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
+		$display_date = $attributes['startingYear'] . '–' . $current_year;
+	} else {
+		$display_date = $current_year;
+	}
+
+	$block_content = '<p ' . get_block_wrapper_attributes() . '>© ' . esc_html( $display_date ) . '</p>';
+}
+
+echo wp_kses_post( $block_content );
diff --git a/packages/create-block-tutorial-template/block-templates/save.js.mustache b/packages/create-block-tutorial-template/block-templates/save.js.mustache
index d390552490a579..944ae4c29254c4 100644
--- a/packages/create-block-tutorial-template/block-templates/save.js.mustache
+++ b/packages/create-block-tutorial-template/block-templates/save.js.mustache
@@ -1,4 +1,3 @@
-{{#isStaticVariant}}
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
@@ -16,10 +15,27 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @param {Object} props            Properties passed to the function.
  * @param {Object} props.attributes Available block attributes.
- * @return {WPElement} Element to render.
+ *
+ * @return {Element} Element to render.
  */
 export default function save( { attributes } ) {
-	const blockProps = useBlockProps.save();
-	return <div { ...blockProps }>{ attributes.message }</div>;
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+	
+	// If there is no fallbackCurrentYear, which could happen if the block
+	// is loaded from a template/pattern, return null. In this case, block
+	// rendering will be handled by the render.php file.
+	if ( ! fallbackCurrentYear ) {
+		return null;
+	}
+	
+	let displayDate;
+
+	// Display the starting year as well if supplied by the user.
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + fallbackCurrentYear;
+	} else {
+		displayDate = fallbackCurrentYear;
+	}
+
+	return <p { ...useBlockProps.save() }>© { displayDate }</p>;
 }
-{{/isStaticVariant}}
diff --git a/packages/create-block-tutorial-template/block-templates/style.scss.mustache b/packages/create-block-tutorial-template/block-templates/style.scss.mustache
deleted file mode 100644
index b1f1241345cbb9..00000000000000
--- a/packages/create-block-tutorial-template/block-templates/style.scss.mustache
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-@font-face {
-	font-family: Gilbert;
-	src: url(../assets/gilbert-color.otf);
-	font-weight: 700;
-}
-
-.wp-block-{{namespace}}-{{slug}} {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
-}
diff --git a/packages/create-block-tutorial-template/index.js b/packages/create-block-tutorial-template/index.js
index 514918e70ad8b9..12c073d841fe55 100644
--- a/packages/create-block-tutorial-template/index.js
+++ b/packages/create-block-tutorial-template/index.js
@@ -5,35 +5,35 @@ const { join } = require( 'path' );
 
 module.exports = {
 	defaultValues: {
-		slug: 'gutenpride',
-		category: 'text',
-		title: 'Gutenpride',
-		description:
-			'A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.',
-		dashicon: 'flag',
+		slug: 'copyright-date-block',
+		title: 'Copyright Date',
+		description: "Display your site's copyright date.",
 		attributes: {
-			message: {
+			fallbackCurrentYear: {
+				type: 'string',
+			},
+			showStartingYear: {
+				type: 'boolean',
+			},
+			startingYear: {
 				type: 'string',
-				source: 'text',
-				selector: 'div',
 			},
 		},
 		supports: {
+			color: {
+				background: false,
+				text: true,
+			},
 			html: false,
-		},
-	},
-	variants: {
-		static: {},
-		dynamic: {
-			attributes: {
-				message: {
-					type: 'string',
-				},
+			typography: {
+				fontSize: true,
 			},
-			render: 'file:./render.php',
 		},
+		editorScript: 'file:./index.js',
+		render: 'file:./render.php',
+		example: {},
+		wpEnv: true,
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
-	assetsPath: join( __dirname, 'assets' ),
 };
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index fa05c06e0671e4..b9f6991c2c153c 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,15 +1,16 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "2.10.0",
-	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
+	"version": "4.13.0",
+	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
 		"wordpress",
 		"create block",
-		"block template"
+		"block template",
+		"quick start"
 	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block",
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/quick-start-guide",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/WordPress/gutenberg.git",
@@ -18,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
index 2322881ab0d710..7ce4be3f7cc739 100644
--- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
+++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
@@ -8,8 +8,8 @@
  * Description:       {{description}}
 {{/description}}
  * Version:           {{version}}
- * Requires at least: 6.1
- * Requires PHP:      7.0
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
 {{#author}}
  * Author:            {{author}}
 {{/author}}
@@ -30,6 +30,10 @@
  * @package           {{namespace}}
  */
 
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
 /**
  * Registers the block using the metadata loaded from the `block.json` file.
  * Behind the scenes, it registers also all assets so they can be enqueued
@@ -37,7 +41,7 @@
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_init() {
 	register_block_type( __DIR__ . '/build' );
 }
-add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_init' );
diff --git a/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache b/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
index f069906fb19fa5..c3abf5ae4ec024 100644
--- a/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
+++ b/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.1
+Tested up to:      6.6
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/.npmrc b/packages/create-block/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/create-block/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index cde32692b80c39..e6c4a2ee166d60 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,17 +2,161 @@
 
 ## Unreleased
 
+## 4.56.0 (2024-11-27)
+
+## 4.55.0 (2024-11-16)
+
+## 4.54.0 (2024-10-30)
+
+### Enhancement
+
+-   Add `--target-dir` flag to allow indicating where resulting files will be scaffolded ([#53781](https://github.com/WordPress/gutenberg/pull/53781))
+
+## 4.53.0 (2024-10-16)
+
+## 4.52.0 (2024-10-03)
+
+## 4.51.0 (2024-09-19)
+
+## 4.50.0 (2024-09-05)
+
+### Enhancements
+
+-   Unpin the `@wordpress/scripts` version and set the minimum supported WordPress version to 6.6 ([#64920](https://github.com/WordPress/gutenberg/pull/64920)).
+
+## 4.49.0 (2024-08-21)
+
+## 4.48.0 (2024-08-07)
+
+## 4.47.0 (2024-07-24)
+
+## 4.46.0 (2024-07-10)
+
+## 4.45.0 (2024-06-26)
+
+## 4.44.0 (2024-06-15)
+
+### Bug fix
+
+-   Pin the `@wordpress/scripts` version to a version supported by WordPress 6.5 ([#62234](https://github.com/WordPress/gutenberg/pull/62234)).
+
+## 4.43.0 (2024-05-31)
+
+## 4.42.0 (2024-05-16)
+
+### Breaking Change
+
+-   Increase the minimum required Node.js version to v20.10.0 matching the support defined for Gutenberg and WordPress core ([#61430](https://github.com/WordPress/gutenberg/pull/61430)).
+
+## 4.41.0 (2024-05-02)
+
+## 4.40.0 (2024-04-19)
+
+## 4.39.0 (2024-04-03)
+
+### New Features
+
+-   Add new `namespacePascalCase` template variable ([#60223](https://github.com/WordPress/gutenberg/pull/60223)).
+
+## 4.38.0 (2024-03-21)
+
+## 4.37.0 (2024-03-06)
+
+## 4.36.0 (2024-02-21)
+
+### Bug Fixes
+
+-   Add missing `viewScriptModule` field ([#59140](https://github.com/WordPress/gutenberg/pull/59140)).
+
+### Internal
+
+-   Remove deprecated `viewModule` field ([#59198](https://github.com/WordPress/gutenberg/pull/59198)).
+
+## 4.35.0 (2024-02-09)
+
+## 4.34.0 (2024-01-24)
+
+## 4.33.0 (2024-01-10)
+
+### New Features
+
+-   Add support for the `viewModule` property ([#57712](https://github.com/WordPress/gutenberg/pull/57712)).
+
+## 4.32.0 (2023-12-13)
+
+## 4.31.0 (2023-11-29)
+
+## 4.30.0 (2023-11-16)
+
+## 4.29.0 (2023-11-02)
+
+## 4.28.0 (2023-10-18)
+
+### New Features
+
+-   Add new `transformer` property to external templates to allow customization of any values being passed from cli or the template.[#55423](https://github.com/WordPress/gutenberg/pull/55423)
+
+## 4.27.0 (2023-10-05)
+
+## 4.26.0 (2023-09-20)
+
+## 4.25.0 (2023-08-31)
+
+## 4.24.0 (2023-08-16)
+
+## 4.23.0 (2023-08-10)
+
+### Enhancements
+
+-   Add support for the `example` property and add it to the default template ([#52803](https://github.com/WordPress/gutenberg/pull/52803)).
+
+## 4.22.0 (2023-07-20)
+
+### Enhancements
+
+-   Add support for the `viewScript` property ([#52612](https://github.com/WordPress/gutenberg/pull/52612)).
+
+## 4.21.0 (2023-07-05)
+
+## 4.20.0 (2023-06-23)
+
+## 4.19.0 (2023-06-07)
+
+## 4.18.0 (2023-05-24)
+
+## 4.17.0 (2023-05-10)
+
+## 4.16.0 (2023-04-26)
+
+## 4.15.0 (2023-04-12)
+
+## 4.14.0 (2023-03-29)
+
+## 4.13.0 (2023-03-15)
+
+## 4.12.0 (2023-03-01)
+
+## 4.11.0 (2023-02-15)
+
+## 4.10.0 (2023-02-01)
+
+## 4.9.0 (2023-01-11)
+
+## 4.8.0 (2023-01-02)
+
+## 4.7.0 (2022-12-14)
+
 ## 4.6.0 (2022-11-16)
 
 ## 4.5.0 (2022-11-02)
 
-### Enhancement
+### Enhancements
 
 -   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
 
 ## 4.4.0 (2022-10-19)
 
-### New Feature
+### New Features
 
 -   Add new `customPackageJSON` and `customBlockJSON` keys to allow templates to define custom keys for the resulting `package.json` and `block.json` files respectively.[#44649](https://github.com/WordPress/gutenberg/pull/44649)
 
@@ -22,30 +166,30 @@
 
 ## 4.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
-### New Feature
+### New Features
 
 -   Add `--no-plugin` flag to allow scaffolding of a block in an existing plugin ([#41642](https://github.com/WordPress/gutenberg/pull/41642))
 -   Introduce the `--variant` flag to allow selection of a variant as defined in the template ([#41289](https://github.com/WordPress/gutenberg/pull/41289), [#43481](https://github.com/WordPress/gutenberg/pull/43481)).
 
 ## 3.6.0 (2022-07-13)
 
-### Enhancement
+### Enhancements
 
 -   Added prompt to continue when minimum system requirements not met ([#42151](https://github.com/WordPress/gutenberg/pull/42151)).
 
 ## 3.3.0 (2022-06-01)
 
-### Enhancement
+### Enhancements
 
 -   Read the block name from `block.json` file in JavaScript files ([#41273](https://github.com/WordPress/gutenberg/pull/41273)).
 
 ## 3.2.0 (2022-05-18)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the `.editorconfig` file include to work correctly with YAML files ([#40994](https://github.com/WordPress/gutenberg/pull/40994)).
 
@@ -94,7 +238,7 @@
 -   Add support for handling block templates with the `blockTemplatesPath` field in the external template configuration ([#37612](https://github.com/WordPress/gutenberg/pull/37612)).
 -   Add a new field `folderName` for setting the location for the `block.json` file and other optional block files generated from block templates included in the folder set with the `blockTemplatesPath` setting ([#37612](https://github.com/WordPress/gutenberg/pull/37612)).
 
-### Enhancement
+### Enhancements
 
 -   Speed up scaffolding process by omitting WordPress dependencies in the template ([#37639](https://github.com/WordPress/gutenberg/pull/37639)).
 -   Update link to block registration reference ([#37674](https://github.com/WordPress/gutenberg/pull/37674))
@@ -124,21 +268,21 @@
 
 ## 2.4.0 (2021-07-21)
 
-### Enhancement
+### Enhancements
 
 -   Plugin scaffolded with the `esnext` template requires WordPress 5.8 now ([#33252](https://github.com/WordPress/gutenberg/pull/33252).
 -   Block scaffolded with the `esnext` template is now registered from `block.json` with the `register_block_type` helper ([#33252](https://github.com/WordPress/gutenberg/pull/33252)).
 
 ## 2.3.0 (2021-04-29)
 
-### Enhancement
+### Enhancements
 
 -   Rename `format:js` script to `format` ([#30240](https://github.com/WordPress/gutenberg/pull/30240)).
 -   Updated `.editorconfig` template files to work with automatic file formatting ([#30794](https://github.com/WordPress/gutenberg/pull/30794)).
 
 ## 2.2.0 (2021-04-06)
 
-### Enhancement
+### Enhancements
 
 -   Scaffolded plugin requires WordPress 5.7 now ([#29757](https://github.com/WordPress/gutenberg/pull/29757)).
 
@@ -152,7 +296,7 @@
 
 -   Add a way to provide a default value in the template for `attributes` and `supports` Block API fields ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
 
-### Enhancement
+### Enhancements
 
 -   Block scaffolded with `esnext` template is now registered from `block.json` with the `register_block_type_from_metadata` helper ([#28883](https://github.com/WordPress/gutenberg/pull/28883)).
 
@@ -163,7 +307,7 @@
 
 ## 2.0.1 (2021-02-01)
 
-### Bug Fix
+### Bug Fixes
 
 -   Extract the package name from the value passed as an external template ([#28383](https://github.com/WordPress/gutenberg/pull/28383)).
 
@@ -185,24 +329,24 @@
 
 ## 1.1.0 (2021-01-05)
 
-### New Feature
+### New Features
 
 -   Adds the `npmDependencies` field to the template configuration. It allows listing remote npm dependencies that will be installed in the scaffolded project ([#27880](https://github.com/WordPress/gutenberg/pull/27880)).
 -   Installs WordPress npm dependencies used in the `esnext` template during the scaffolding process ([#27880](https://github.com/WordPress/gutenberg/pull/27880)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Print the block class name in the `save` method in scaffolded templates ([#27988](https://github.com/WordPress/gutenberg/pull/27988)).
 
 ## 1.0.2 (2020-12-17)
 
-### Bug Fix
+### Bug Fixes
 
 -   Second attempt to fix support for external templates by using a temporary folder when downloading npm package.
 
 ## 1.0.1 (2020-12-17)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix support for external templates hosted on npm.
 
@@ -226,29 +370,29 @@
 
 ## 0.16.0 (2020-06-25)
 
-### New Feature
+### New Features
 
 -   Generate `block.json` file with all metadata necessary for Block Directory ([#23399](https://github.com/WordPress/gutenberg/pull/23399)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the error in the scaffolding process caused by the missing `scripts` section in `package.json` file ([#23443](https://github.com/WordPress/gutenberg/pull/23443)).
 
 ## 0.15.0-rc.0 (2020-06-24)
 
-### New Feature
+### New Features
 
 -   Add new CLI options: `--no-wp-scripts` and `--wp-scripts` to let users override the settings that template defines for supports for `@wordpress/scripts` package integration ([#23195](https://github.com/WordPress/gutenberg/pull/23195)).
 
 ## 0.14.2 (2020-06-16)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix errors reported by CSS linter in ESNext template by using hex colors in CSS files ([#23188](https://github.com/WordPress/gutenberg/pull/23188)).
 
 ## 0.14.1 (2020-06-15)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix an error reported by JavaScript linter by improving JSDoc comment in ESNext template in `src/edit.js` file ([#23164](https://github.com/WordPress/gutenberg/pull/23164)).
 
@@ -328,7 +472,7 @@
 
 ## 0.4.3 (2020-01-08)
 
-### Bug Fix
+### Bug Fixes
 
 -   Print available commands only for ESNext template.
 
@@ -344,7 +488,7 @@
 
 ## 0.3.2 (2019-12-16)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the paths pointing to the JS build file listed in PHP file in the ESNext template.
 
diff --git a/packages/create-block/README.md b/packages/create-block/README.md
index d6e77b9576388b..907121d3d466a7 100644
--- a/packages/create-block/README.md
+++ b/packages/create-block/README.md
@@ -8,31 +8,17 @@ _It is largely inspired by [create-react-app](https://create-react-app.dev/docs/
 
 > _Learn more about the [Block API at the Gutenberg HandBook](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)._
 
-## Table of Contents 
-
-- [Quick start](#quick-start)
-- [Usage](#usage)
-    - [Interactive Mode](#interactive-mode)
-    - [`slug`](#slug)
-    - [`options`](#options)
-- [Available Commands](#available-commands)
-- [External Project Templates](#external-project-templates)
-- [Contributing to this package](#contributing-to-this-package)
-
-
 ## Quick start
 
 ```bash
-$ npx @wordpress/create-block todo-list
+$ npx @wordpress/create-block@latest todo-list
 $ cd todo-list
 $ npm start
 ```
 
-The `slug` provided (`todo-list` in the example) defines the folder name for the scaffolded plugin and the internal block name. The WordPress plugin generated must [be installed manually](https://wordpress.org/support/article/managing-plugins/#manual-plugin-installation).
-
-
-_(requires `node` version `14.0.0` or above, and `npm` version `6.14.4` or above)_
+The `slug` provided (`todo-list` in the example) defines the folder name for the scaffolded plugin and the internal block name. The WordPress plugin generated must [be installed manually](https://wordpress.org/documentation/article/manage-plugins/#manual-plugin-installation-1).
 
+_(requires `node` version `20.10.0` or above, and `npm` version `10.2.3` or above)_
 
 > [Watch a video introduction to create-block on Learn.wordpress.org](https://learn.wordpress.org/tutorial/using-the-create-block-tool/)
 
@@ -41,7 +27,7 @@ _(requires `node` version `14.0.0` or above, and `npm` version `6.14.4` or above
 The `create-block` command generates a project with PHP, JS, and CSS code for registering a block with a WordPress plugin.
 
 ```bash
-$ npx @wordpress/create-block [options] [slug]
+$ npx @wordpress/create-block@latest [options] [slug]
 ```
 
 ![Demo](https://user-images.githubusercontent.com/699132/103872910-4de15f00-50cf-11eb-8c74-67ca91a8c1a4.gif)
@@ -54,25 +40,26 @@ $ npx @wordpress/create-block [options] [slug]
 
 When no `slug` is provided, the script will run in interactive mode and will start prompting for the input required (`slug`, title, namespace...) to scaffold the project.
 
-
 ### `slug`
 
-The use of `slug` is optional. 
+The use of `slug` is optional.
 
 When provided it triggers the _quick mode_, where this `slug` is used:
-- as the block slug (required for its identification)
-- as the output location (folder name) for scaffolded files
-- as the name of the WordPress plugin. 
+
+-   as the block slug (required for its identification)
+-   as the output location (folder name) for scaffolded files
+-   as the name of the WordPress plugin.
 
 The rest of the configuration is set to all default values unless overridden with some options listed below.
 
 ### `options`
 
-
 ```bash
 -V, --version                output the version number
 -t, --template <name>        project template type name; allowed values: "static" (default), "es5", the name of an external npm package, or the path to a local directory
+--variant                    choose a block variant as defined by the template
 --no-plugin                  scaffold block files only
+--target-dir <directory>     the directory where the files will be scaffolded, defaults to the slug
 --namespace <value>          internal namespace for the block name
 --title <value>              display title for the block and the WordPress plugin
 --short-description <value>  short description for the block and the WordPress plugin
@@ -81,7 +68,6 @@ The rest of the configuration is set to all default values unless overridden wit
 --no-wp-scripts              disable integration with `@wordpress/scripts` package
 --wp-env                     enable integration with `@wordpress/env` package
 -h, --help                   output usage information
---variant                    choose a block variant as defined by the template
 ```
 
 #### `--template`
@@ -89,51 +75,52 @@ The rest of the configuration is set to all default values unless overridden wit
 This argument specifies an _external npm package_ as a template.
 
 ```bash
-$ npx @wordpress/create-block --template my-template-package
+$ npx @wordpress/create-block@latest --template my-template-package
 ```
 
 This argument also allows to pick a _local directory_ as a template.
 
 ```bash
-$ npx @wordpress/create-block --template ./path/to/template-directory
+$ npx @wordpress/create-block@latest --template ./path/to/template-directory
 ```
 
 #### `--variant`
 
-With this argument, `create-block` will generate a [dynamic block](https://developer.wordpress.org/block-editor/explanations/glossary/#dynamic-block) based on the built-in template.
+With this argument, `create-block` will generate a [dynamic block](https://developer.wordpress.org/block-editor/getting-started/glossary/#dynamic-block) based on the built-in template.
 
 ```bash
-$ npx @wordpress/create-block --variant dynamic
+$ npx @wordpress/create-block@latest --variant dynamic
 ```
 
-#### `--help`
+#### `--no-plugin`
 
-With this argument, the `create-block` package outputs usage information.
+With this argument, the `create-block` package runs in _No plugin mode_ which only scaffolds block files into the current directory.
 
 ```bash
-$ npx @wordpress/create-block --help
+$ npx @wordpress/create-block@latest --no-plugin
 ```
 
-#### `--no-plugin`
+#### `--wp-env`
 
-With this argument, the `create-block` package runs in _No plugin mode_ which only scaffolds block files into the current directory.
+With this argument, the `create-block` package will add to the generated plugin the configuration and the script to run [`wp-env` package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) within the plugin. This will allow you to easily set up a local WordPress environment (via Docker) for building and testing the generated plugin.
 
 ```bash
-$ npx @wordpress/create-block --no-plugin
+$ npx @wordpress/create-block@latest --wp-env
 ```
-#### `--wp-env`
 
-With this argument, the `create-block` package will add to the generated plugin the configuration and the script to run [`wp-env` package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) within the plugin. This will allow you to easily set up a local WordPress environment (via Docker) for building and testing the generated plugin. 
+#### `--help`
+
+With this argument, the `create-block` package outputs usage information.
 
 ```bash
-$ npx @wordpress/create-block --wp-env
+$ npx @wordpress/create-block@latest --help
 ```
 
 ## Available commands in the scaffolded project
 
-The plugin folder created when executing this command, is a node package with a modern build setup that requires no configuration. 
+The plugin folder created when executing this command, is a node package with a modern build setup that requires no configuration.
 
-A set of scripts is available from inside that folder (provided by the `scripts` package) to make your work easier. [Click here](https://github.com/WordPress/gutenberg/tree/HEAD/packages/scripts#available-scripts) for a full description of these commands. 
+A set of scripts is available from inside that folder (provided by the `scripts` package) to make your work easier. [Click here](https://github.com/WordPress/gutenberg/tree/HEAD/packages/scripts#available-scripts) for a full description of these commands.
 
 _Note: You don’t need to install or configure tools like [webpack](https://webpack.js.org), [Babel](https://babeljs.io) or [ESLint](https://eslint.org) yourself. They are preconfigured and hidden so that you can focus on coding._
 
@@ -141,7 +128,7 @@ For example, running the `start` script from inside the generated folder (`npm s
 
 ## External Project Templates
 
-[Click here](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/docs/external-template.md) for information on External Project Templates
+[Click here](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/packages-create-block-external-template/) for information on External Project Templates
 
 ## Contributing to this package
 
diff --git a/packages/create-block/docs/external-template.md b/packages/create-block/docs/external-template.md
index 3bbd5a1a06ddf9..45c3cba8c9271d 100644
--- a/packages/create-block/docs/external-template.md
+++ b/packages/create-block/docs/external-template.md
@@ -88,7 +88,7 @@ The following configurable variables are used with the template files. Template
 
 **Block metadata** ([learn more](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)):
 
--   `folderName` (default: `.`) – the location for the `block.json` file and other optional block files generated from block templates included in the folder set with the `blockTemplatesPath` setting.
+-   `folderName` (default: `src`) – the location for the `block.json` file and other optional block files generated from block templates included in the folder set with the `blockTemplatesPath` setting.
 -   `$schema` (default: `https://schemas.wp.org/trunk/block.json`) – the schema URL used for block validation.
 -   `apiVersion` (default: `2`) – the block API version ([related dev note](https://make.wordpress.org/core/2020/11/18/block-api-version-2/)).
 -   `slug` (no default) – the block slug used for identification in the block name.
@@ -104,3 +104,67 @@ The following configurable variables are used with the template files. Template
 -   `style` (default: `'file:./style-index.css'`) – a frontend and editor style definition.
 -   `render` (no default) – a path to the PHP file used when rendering the block type on the server before presenting on the front end.
 -   `customBlockJSON` (no default) - allows definition of additional properties for the generated block.json file.
+-   `transformer` (default: `( view ) => view` ) - a function that receives all variables generated by the create-block tool and returns an object of values. This function provides the ability to modify existing values and add new variables.
+
+#### `transformer` examples
+
+This examples adds a generated value to the slug variable.
+
+```js
+transformer: ( view ) => {
+    const hex = getRandomHexCode();
+      return {
+         ...view,
+         slug: `${ view.slug }-${ hex }`,
+      };
+},
+```
+
+This example creates a new custom variable that can be used in the associated mustache templates as `{{customVariable}}`
+
+```js
+transformer: ( view ) => {
+      return {
+         ...view,
+         customVariable: `Custom Value`,
+      };
+},
+```
+
+### `variants`
+
+Variants are used to create variations for a template. Variants can override any `defaultValues` by providing their own.
+
+```js
+module.exports = {
+	defaultValues: {
+		slug: 'my-fantastic-block',
+		title: 'My fantastic block',
+		dashicon: 'palmtree',
+		version: '1.2.3',
+	},
+	variants: {
+		primary: {},
+		secondary: {
+			title: 'My fantastic block - secondary variant',
+		},
+	},
+};
+```
+
+Variants are accessed using the `--variant` flag, i.e`--variant secondary`.
+
+If no variant is provided, the first variant is used if any are defined.
+
+Mustache variables are created for variants that can be used to conditionally output content in files. The format is `{{isVARIANT_NAMEVariant}}`.
+
+```mustache
+{{#isPrimaryVariant}}
+This content is only rendered if `--variant primary` is passed.
+{{/isPrimaryVariant}}
+
+{{#isSecondaryVariant}}
+This content is only rendered if `--variant secondary` is passed.
+{{/isSecondaryVariant}}
+
+```
diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js
index 785e593a379fe6..da08bcd4ab1dc7 100644
--- a/packages/create-block/lib/index.js
+++ b/packages/create-block/lib/index.js
@@ -37,6 +37,12 @@ program
 		'project template type name; allowed values: "standard", "es5", the name of an external npm package, or the path to a local directory',
 		'standard'
 	)
+	.option( '--variant <variant>', 'the variant of the template to use' )
+	.option( '--no-plugin', 'scaffold only block files' )
+	.option(
+		'--target-dir <directory>',
+		'the directory where the files will be scaffolded, defaults to the slug'
+	)
 	.option( '--namespace <value>', 'internal namespace for the block name' )
 	.option(
 		'--title <value>',
@@ -57,8 +63,6 @@ program
 		'disable integration with `@wordpress/scripts` package'
 	)
 	.option( '--wp-env', 'enable integration with `@wordpress/env` package' )
-	.option( '--no-plugin', 'scaffold only block files' )
-	.option( '--variant <variant>', 'the variant of the template to use' )
 	.action(
 		async (
 			slug,
@@ -72,6 +76,7 @@ program
 				wpScripts,
 				wpEnv,
 				variant,
+				targetDir,
 			}
 		) => {
 			await checkSystemRequirements( engines );
@@ -102,6 +107,7 @@ program
 						title,
 						wpScripts,
 						wpEnv,
+						targetDir,
 					} ).filter( ( [ , value ] ) => value !== undefined )
 				);
 
@@ -185,9 +191,8 @@ program
 										],
 										variant
 									).filter( filterOptionsProvided );
-									const result = await inquirer.prompt(
-										pluginPrompts
-									);
+									const result =
+										await inquirer.prompt( pluginPrompts );
 									return result;
 								} )
 						: {};
diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
index 2a83035f9dc6f2..8074ef1c8d953d 100644
--- a/packages/create-block/lib/init-block.js
+++ b/packages/create-block/lib/init-block.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-const { dirname, join } = require( 'path' );
+const { join } = require( 'path' );
 const makeDir = require( 'make-dir' );
 const { writeFile } = require( 'fs' ).promises;
 
@@ -29,18 +29,24 @@ async function initBlockJSON( {
 	editorScript,
 	editorStyle,
 	style,
+	viewStyle,
 	render,
+	viewScriptModule,
+	viewScript,
 	customBlockJSON,
+	example,
+	rootDirectory,
 } ) {
 	info( '' );
 	info( 'Creating a "block.json" file.' );
 
-	const outputFile = plugin
-		? join( process.cwd(), slug, folderName, 'block.json' )
-		: join( process.cwd(), slug, 'block.json' );
-	await makeDir( dirname( outputFile ) );
+	const blockFolderName = plugin
+		? join( rootDirectory, folderName )
+		: rootDirectory;
+	await makeDir( blockFolderName );
+
 	await writeFile(
-		outputFile,
+		join( blockFolderName, 'block.json' ),
 		JSON.stringify(
 			Object.fromEntries(
 				Object.entries( {
@@ -52,13 +58,17 @@ async function initBlockJSON( {
 					category,
 					icon: dashicon,
 					description,
+					example,
 					attributes,
 					supports,
 					textdomain,
 					editorScript,
 					editorStyle,
 					style,
+					viewStyle,
 					render,
+					viewScriptModule,
+					viewScript,
 					...customBlockJSON,
 				} ).filter( ( [ , value ] ) => !! value )
 			),
@@ -71,13 +81,12 @@ async function initBlockJSON( {
 module.exports = async function ( outputTemplates, view ) {
 	await Promise.all(
 		Object.keys( outputTemplates ).map( async ( outputFile ) => {
-			const pathName = view.plugin
-				? join( view.folderName, outputFile )
-				: join( process.cwd(), view.slug, outputFile );
-
 			await writeOutputTemplate(
 				outputTemplates[ outputFile ],
-				pathName,
+				join(
+					view.plugin ? view.folderName : '',
+					outputFile.replace( /\$slug/g, view.slug )
+				),
 				view
 			);
 		} )
diff --git a/packages/create-block/lib/init-package-json.js b/packages/create-block/lib/init-package-json.js
index bbc4436ac1d0e5..7a3765139e39d3 100644
--- a/packages/create-block/lib/init-package-json.js
+++ b/packages/create-block/lib/init-package-json.js
@@ -3,7 +3,6 @@
  */
 const { command } = require( 'execa' );
 const npmPackageArg = require( 'npm-package-arg' );
-const { join } = require( 'path' );
 const writePkg = require( 'write-pkg' );
 
 /**
@@ -25,14 +24,13 @@ module.exports = async ( {
 	customScripts,
 	isDynamicVariant,
 	customPackageJSON,
+	rootDirectory,
 } ) => {
-	const cwd = join( process.cwd(), slug );
-
 	info( '' );
 	info( 'Creating a "package.json" file.' );
 
 	await writePkg(
-		cwd,
+		rootDirectory,
 		Object.fromEntries(
 			Object.entries( {
 				name: slug,
@@ -92,7 +90,7 @@ module.exports = async ( {
 					info( '' );
 					info( `Installing "${ packageArg }".` );
 					await command( `npm install ${ packageArg }`, {
-						cwd,
+						cwd: rootDirectory,
 					} );
 				} catch ( { message } ) {
 					info( '' );
@@ -115,7 +113,7 @@ module.exports = async ( {
 					info( '' );
 					info( `Installing "${ packageArg }".` );
 					await command( `npm install ${ packageArg } --save-dev`, {
-						cwd,
+						cwd: rootDirectory,
 					} );
 				} catch ( { message } ) {
 					info( '' );
diff --git a/packages/create-block/lib/init-wp-env.js b/packages/create-block/lib/init-wp-env.js
index 19fd01646cf041..419e8c0991d44c 100644
--- a/packages/create-block/lib/init-wp-env.js
+++ b/packages/create-block/lib/init-wp-env.js
@@ -10,21 +10,19 @@ const { writeFile } = require( 'fs' ).promises;
  */
 const { info } = require( './log' );
 
-module.exports = async ( { slug } ) => {
-	const cwd = join( process.cwd(), slug );
-
+module.exports = async ( { rootDirectory } ) => {
 	info( '' );
 	info(
 		'Installing `@wordpress/env` package. It might take a couple of minutes...'
 	);
 	await command( 'npm install @wordpress/env --save-dev', {
-		cwd,
+		cwd: rootDirectory,
 	} );
 
 	info( '' );
 	info( 'Configuring `@wordpress/env`...' );
 	await writeFile(
-		join( cwd, '.wp-env.json' ),
+		join( rootDirectory, '.wp-env.json' ),
 		JSON.stringify(
 			{
 				core: 'WordPress/WordPress',
diff --git a/packages/create-block/lib/init-wp-scripts.js b/packages/create-block/lib/init-wp-scripts.js
index ca0101957f47f1..dbd33ba45187c8 100644
--- a/packages/create-block/lib/init-wp-scripts.js
+++ b/packages/create-block/lib/init-wp-scripts.js
@@ -2,33 +2,30 @@
  * External dependencies
  */
 const { command } = require( 'execa' );
-const { join } = require( 'path' );
 
 /**
  * Internal dependencies
  */
 const { info } = require( './log' );
 
-module.exports = async ( { slug } ) => {
-	const cwd = join( process.cwd(), slug );
-
+module.exports = async ( { rootDirectory } ) => {
 	info( '' );
 	info(
 		'Installing `@wordpress/scripts` package. It might take a couple of minutes...'
 	);
 	await command( 'npm install @wordpress/scripts --save-dev', {
-		cwd,
+		cwd: rootDirectory,
 	} );
 
 	info( '' );
 	info( 'Formatting JavaScript files.' );
 	await command( 'npm run format', {
-		cwd,
+		cwd: rootDirectory,
 	} );
 
 	info( '' );
 	info( 'Compiling block.' );
 	await command( 'npm run build', {
-		cwd,
+		cwd: rootDirectory,
 	} );
 };
diff --git a/packages/create-block/lib/output.js b/packages/create-block/lib/output.js
index dd442b17ae0511..609a028aa8034e 100644
--- a/packages/create-block/lib/output.js
+++ b/packages/create-block/lib/output.js
@@ -7,20 +7,21 @@ const { render } = require( 'mustache' );
 const { writeFile } = require( 'fs' ).promises;
 
 const writeOutputAsset = async ( inputFile, outputFile, view ) => {
-	const outputFilePath = join( view.slug, 'assets', outputFile );
+	const outputFilePath = join( view.rootDirectory, 'assets', outputFile );
 	await makeDir( dirname( outputFilePath ) );
 	writeFile( outputFilePath, inputFile );
 };
 
 const writeOutputTemplate = async ( inputFile, outputFile, view ) => {
-	const outputFilePath = view.plugin
-		? join( view.slug, outputFile.replace( /\$slug/g, view.slug ) )
-		: outputFile;
-	await makeDir( dirname( outputFilePath ) );
 	// If the rendered template is empty, don't write it. This is how we can conditionally add template files.
 	const renderedFile = render( inputFile, view );
 	if ( renderedFile.trim().length ) {
-		writeFile( outputFilePath, renderedFile );
+		const outputFilePath = join( view.rootDirectory, outputFile );
+		await makeDir( dirname( outputFilePath ) );
+		writeFile(
+			outputFilePath.replace( /\$slug/g, view.slug ),
+			renderedFile
+		);
 	}
 };
 
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index cdeaf85a97bb4a..73b9f549908867 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/packages/create-block/lib/scaffold.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 const { pascalCase, snakeCase } = require( 'change-case' );
+const { join } = require( 'path' );
 
 /**
  * Internal dependencies
@@ -40,59 +41,43 @@ module.exports = async (
 		npmDevDependencies,
 		customScripts,
 		folderName,
+		targetDir,
 		editorScript,
 		editorStyle,
 		style,
+		viewStyle,
 		render,
+		viewScriptModule,
+		viewScript,
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
+		example,
+		transformer,
 	}
 ) => {
 	slug = slug.toLowerCase();
 	namespace = namespace.toLowerCase();
-	/**
-	 * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath).
-	 * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that
-	 * doesn't support it.
-	 */
-	if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) {
-		error(
-			'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.'
-		);
-		return;
-	}
-
-	info( '' );
-	info(
-		plugin
-			? `Creating a new WordPress plugin in the ${ slug } directory.`
-			: `Creating a new block in the ${ slug } directory.`
-	);
-
-	const view = {
+	const rootDirectory = join( process.cwd(), targetDir || slug );
+	const transformedValues = transformer( {
 		$schema,
 		apiVersion,
 		plugin,
 		namespace,
-		namespaceSnakeCase: snakeCase( namespace ),
 		slug,
-		slugSnakeCase: snakeCase( slug ),
-		slugPascalCase: pascalCase( slug ),
 		title,
 		description,
 		dashicon,
 		category,
 		attributes,
 		supports,
-		version,
 		author,
 		pluginURI,
 		license,
 		licenseURI,
-		textdomain: slug,
 		domainPath,
 		updateURI,
+		version,
 		wpScripts,
 		wpEnv,
 		npmDependencies,
@@ -102,12 +87,45 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		viewStyle,
 		render,
+		viewScriptModule,
+		viewScript,
+		variantVars,
 		customPackageJSON,
 		customBlockJSON,
+		example,
+		textdomain: slug,
+		rootDirectory,
+	} );
+
+	const view = {
+		...transformedValues,
+		namespaceSnakeCase: snakeCase( transformedValues.namespace ),
+		namespacePascalCase: pascalCase( transformedValues.namespace ),
+		slugSnakeCase: snakeCase( transformedValues.slug ),
+		slugPascalCase: pascalCase( transformedValues.slug ),
 		...variantVars,
 	};
 
+	/**
+	 * --no-plugin relies on the used template supporting the [blockTemplatesPath property](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/#blocktemplatespath).
+	 * If the blockOutputTemplates object has no properties, we can assume that there was a custom --template passed that
+	 * doesn't support it.
+	 */
+	if ( ! plugin && Object.keys( blockOutputTemplates ) < 1 ) {
+		error(
+			'No block files found in the template. Please ensure that the template supports the blockTemplatesPath property.'
+		);
+		return;
+	}
+
+	const projectType = plugin ? 'plugin' : 'block';
+	info( '' );
+	info(
+		`Creating a new WordPress ${ projectType } in the ${ rootDirectory } directory.`
+	);
+
 	if ( plugin ) {
 		await Promise.all(
 			Object.keys( pluginOutputTemplates ).map(
@@ -148,9 +166,7 @@ module.exports = async (
 	info( '' );
 
 	success(
-		plugin
-			? `Done: WordPress plugin ${ title } bootstrapped in the ${ slug } directory.`
-			: `Done: Block "${ title }" bootstrapped in the ${ slug } directory.`
+		`Done: WordPress ${ projectType } ${ title } bootstrapped in the ${ rootDirectory } directory.`
 	);
 
 	if ( plugin && wpScripts ) {
diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
index 48649527ecc842..4e70ee66fd3a40 100644
--- a/packages/create-block/lib/templates.js
+++ b/packages/create-block/lib/templates.js
@@ -33,6 +33,9 @@ const predefinedPluginTemplates = {
 			editorScript: null,
 			editorStyle: null,
 			style: null,
+			viewStyle: null,
+			viewScript: 'file:./view.js',
+			example: {},
 		},
 		templatesPath: join( __dirname, 'templates', 'es5' ),
 		variants: {
@@ -53,6 +56,8 @@ const predefinedPluginTemplates = {
 			supports: {
 				html: false,
 			},
+			viewScript: 'file:./view.js',
+			example: {},
 		},
 		variants: {
 			static: {},
@@ -198,9 +203,11 @@ const getPluginTemplate = async ( templateName ) => {
 
 		const { name } = npmPackageArg( templateName );
 		return await configToTemplate(
-			require( require.resolve( name, {
-				paths: [ tempCwd ],
-			} ) )
+			require(
+				require.resolve( name, {
+					paths: [ tempCwd ],
+				} )
+			)
 		);
 	} catch ( error ) {
 		if ( error instanceof CLIError ) {
@@ -220,7 +227,7 @@ const getPluginTemplate = async ( templateName ) => {
 const getDefaultValues = ( pluginTemplate, variant ) => {
 	return {
 		$schema: 'https://schemas.wp.org/trunk/block.json',
-		apiVersion: 2,
+		apiVersion: 3,
 		namespace: 'create-block',
 		category: 'widgets',
 		author: 'The WordPress Contributors',
@@ -235,6 +242,7 @@ const getDefaultValues = ( pluginTemplate, variant ) => {
 		editorScript: 'file:./index.js',
 		editorStyle: 'file:./index.css',
 		style: 'file:./style-index.css',
+		transformer: ( view ) => view,
 		...pluginTemplate.defaultValues,
 		...pluginTemplate.variants?.[ variant ],
 		variantVars: getVariantVars( pluginTemplate.variants, variant ),
@@ -262,8 +270,7 @@ const getVariantVars = ( variants, variant ) => {
 	for ( const variantName of variantNames ) {
 		const key =
 			variantName.charAt( 0 ).toUpperCase() + variantName.slice( 1 );
-		variantVars[ `is${ key }Variant` ] =
-			currentVariant === variantName ?? false;
+		variantVars[ `is${ key }Variant` ] = currentVariant === variantName;
 	}
 
 	return variantVars;
diff --git a/packages/create-block/lib/templates/block/edit.js.mustache b/packages/create-block/lib/templates/block/edit.js.mustache
index 89574380a3c2e3..1824892f3e282d 100644
--- a/packages/create-block/lib/templates/block/edit.js.mustache
+++ b/packages/create-block/lib/templates/block/edit.js.mustache
@@ -27,7 +27,7 @@ import './editor.scss';
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
  *
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
  */
 export default function Edit() {
 	return (
diff --git a/packages/create-block/lib/templates/block/render.php.mustache b/packages/create-block/lib/templates/block/render.php.mustache
index 39ccdaa2b67470..43ba65e0790561 100644
--- a/packages/create-block/lib/templates/block/render.php.mustache
+++ b/packages/create-block/lib/templates/block/render.php.mustache
@@ -1,4 +1,9 @@
 {{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
 <p <?php echo get_block_wrapper_attributes(); ?>>
 	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
diff --git a/packages/create-block/lib/templates/block/save.js.mustache b/packages/create-block/lib/templates/block/save.js.mustache
index 70452e60a6a4fa..285931becea2a6 100644
--- a/packages/create-block/lib/templates/block/save.js.mustache
+++ b/packages/create-block/lib/templates/block/save.js.mustache
@@ -14,7 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
  *
- * @return {WPElement} Element to render.
+ * @return {Element} Element to render.
  */
 export default function save() {
 	return (
diff --git a/packages/create-block/lib/templates/block/view.js.mustache b/packages/create-block/lib/templates/block/view.js.mustache
new file mode 100644
index 00000000000000..5f22d9e792a3e2
--- /dev/null
+++ b/packages/create-block/lib/templates/block/view.js.mustache
@@ -0,0 +1,25 @@
+/**
+ * Use this file for JavaScript code that you want to run in the front-end 
+ * on posts/pages that contain this block.
+ *
+ * When this file is defined as the value of the `viewScript` property
+ * in `block.json` it will be enqueued on the front end of the site.
+ *
+ * Example:
+ *
+ * ```js
+ * {
+ *   "viewScript": "file:./view.js"
+ * }
+ * ```
+ *
+ * If you're not making any changes to this file because your project doesn't need any 
+ * JavaScript running in the front-end, then you should delete this file and remove 
+ * the `viewScript` property from `block.json`. 
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
+ */
+ 
+/* eslint-disable no-console */
+console.log("Hello World! (from {{namespace}}-{{slug}} block)");
+/* eslint-enable no-console */
diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache
index a04553af1e7d8b..825fd1bfd8b5aa 100644
--- a/packages/create-block/lib/templates/es5/$slug.php.mustache
+++ b/packages/create-block/lib/templates/es5/$slug.php.mustache
@@ -7,8 +7,8 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 6.1
- * Requires PHP:      7.0
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
  * Version:           {{version}}
 {{#author}}
  * Author:            {{author}}
@@ -30,6 +30,10 @@
  * @package           {{namespace}}
  */
 
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
 /**
  * Registers all block assets so that they can be enqueued through the block editor
  * in the corresponding context.
diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache
index 9738885ac87421..10370672295cb3 100644
--- a/packages/create-block/lib/templates/es5/index.js.mustache
+++ b/packages/create-block/lib/templates/es5/index.js.mustache
@@ -39,7 +39,7 @@
 		 *
 		 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 		 *
-		 * @return {WPElement} Element to render.
+		 * @return {Element} Element to render.
 		 */
 		edit: function() {
 			return el(
@@ -56,7 +56,7 @@
 		 *
 		 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 		 *
-		 * @return {WPElement} Element to render.
+		 * @return {Element} Element to render.
 		 */
 		save: function() {
 			return el(
diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.mustache
index f069906fb19fa5..c3abf5ae4ec024 100644
--- a/packages/create-block/lib/templates/es5/readme.txt.mustache
+++ b/packages/create-block/lib/templates/es5/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.1
+Tested up to:      6.6
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/lib/templates/es5/render.php.mustache b/packages/create-block/lib/templates/es5/render.php.mustache
index 39ccdaa2b67470..43ba65e0790561 100644
--- a/packages/create-block/lib/templates/es5/render.php.mustache
+++ b/packages/create-block/lib/templates/es5/render.php.mustache
@@ -1,4 +1,9 @@
 {{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
 <p <?php echo get_block_wrapper_attributes(); ?>>
 	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache
index 2ed0354314cc47..75666af3a850b2 100644
--- a/packages/create-block/lib/templates/plugin/$slug.php.mustache
+++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache
@@ -7,8 +7,8 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 6.1
- * Requires PHP:      7.0
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
  * Version:           {{version}}
 {{#author}}
  * Author:            {{author}}
@@ -27,9 +27,13 @@
  * Update URI:        {{{updateURI}}}
 {{/updateURI}}
  *
- * @package           {{namespace}}
+ * @package {{namespacePascalCase}}
  */
 
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
 /**
  * Registers the block using the metadata loaded from the `block.json` file.
  * Behind the scenes, it registers also all assets so they can be enqueued
diff --git a/packages/create-block/lib/templates/plugin/readme.txt.mustache b/packages/create-block/lib/templates/plugin/readme.txt.mustache
index f069906fb19fa5..c3abf5ae4ec024 100644
--- a/packages/create-block/lib/templates/plugin/readme.txt.mustache
+++ b/packages/create-block/lib/templates/plugin/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.1
+Tested up to:      6.6
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 2d2109379af280..881ece8e138191 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.6.0",
+	"version": "4.56.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.14.4"
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
 	},
 	"files": [
 		"lib"
@@ -31,7 +31,7 @@
 		"wp-create-block": "./index.js"
 	},
 	"dependencies": {
-		"@wordpress/lazy-import": "file:../lazy-import",
+		"@wordpress/lazy-import": "*",
 		"chalk": "^4.0.0",
 		"change-case": "^4.1.2",
 		"check-node-version": "^4.1.0",
diff --git a/packages/custom-templated-path-webpack-plugin/.npmrc b/packages/custom-templated-path-webpack-plugin/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/custom-templated-path-webpack-plugin/CHANGELOG.md b/packages/custom-templated-path-webpack-plugin/CHANGELOG.md
deleted file mode 100644
index dccc47dc71aebb..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/CHANGELOG.md
+++ /dev/null
@@ -1,41 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-## 2.6.0 (2022-11-16)
-
-## 2.5.0 (2022-11-02)
-
-## 2.4.0 (2022-10-19)
-
-## 2.3.0 (2022-10-05)
-
-## 2.2.0 (2022-09-21)
-
-## 2.0.0 (2021-01-21)
-
-### Breaking Changes
-
--   Increase the minimum Node.js version to 12 ([#27934](https://github.com/WordPress/gutenberg/pull/27934)).
-
-## 1.4.0 (2019-06-12)
-
-### Bug Fixes
-
--   Resolved an issue where only the value of the first matched tag would be produced.
-
-### Internal
-
--   The module is no longer transpiled as part of a build process, and instead exposes its source directly as the `main` file.
-
-## 1.1.0 (2018-07-12)
-
-### Internal
-
--   Moved `@WordPress/packages` repository to `@WordPress/gutenberg` ([#7805](https://github.com/WordPress/gutenberg/pull/7805))
-
-## 1.0.2 (2018-05-18)
-
-### Polish
-
--   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/custom-templated-path-webpack-plugin/README.md b/packages/custom-templated-path-webpack-plugin/README.md
deleted file mode 100644
index 05e8f70c62da18..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/README.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Custom Templated Path Webpack Plugin
-
-Webpack plugin for creating custom path template tags. Extend the [default set of template tags](https://webpack.js.org/configuration/output/#output-filename) with your own custom behavior. Hooks into Webpack's compilation process to allow you to replace tags with a substitute value.
-
-## Installation
-
-Install the module
-
-```bash
-npm install @wordpress/custom-templated-path-webpack-plugin --save-dev
-```
-
-**Note**: This package requires Node.js 12.0.0 or later. It targets Webpack 4.0 and newer. It is not compatible with older versions.
-
-## Usage
-
-Construct an instance of `CustomTemplatedPathPlugin` in your Webpack configurations `plugins` entry, passing an object where keys correspond to the template tag name. The value for each key is a function passed the original intended path and data corresponding to the asset.
-
-The following example creates a new `basename` tag to substitute the basename of each entry file in the build output file. When compiled, the built file will be output as `build-entry.js`.
-
-```js
-const { basename } = require( 'path' );
-const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
-
-module.exports = {
-	// ...
-
-	entry: './entry',
-
-	output: {
-		filename: 'build-[basename].js',
-	},
-
-	plugins: [
-		new CustomTemplatedPathPlugin( {
-			basename( path, data ) {
-				let rawRequest;
-
-				const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
-				switch ( entryModule.type ) {
-					case 'javascript/auto':
-						rawRequest = entryModule.rawRequest;
-						break;
-
-					case 'javascript/esm':
-						rawRequest = entryModule.rootModule.rawRequest;
-						break;
-				}
-
-				if ( rawRequest ) {
-					return basename( rawRequest );
-				}
-
-				return path;
-			},
-		} ),
-	],
-};
-```
-
-For more examples, refer to Webpack's own [`TemplatedPathPlugin.js`](https://github.com/webpack/webpack/blob/v4.1.1/lib/TemplatedPathPlugin.js), which implements the base set of template tags.
-
-## 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/custom-templated-path-webpack-plugin/index.js b/packages/custom-templated-path-webpack-plugin/index.js
deleted file mode 100644
index 7d7bd317aa48bf..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * External dependencies
- */
-const escapeStringRegexp = require( 'escape-string-regexp' );
-
-/**
- * Webpack plugin for handling specific template tags in Webpack configuration
- * values like those supported in the base Webpack functionality (e.g. `name`).
- *
- * @see webpack.TemplatedPathPlugin
- */
-class CustomTemplatedPathPlugin {
-	/**
-	 * CustomTemplatedPathPlugin constructor. Initializes handlers as a tuple
-	 * set of RegExp, handler, where the regular expression is used in matching
-	 * a Webpack asset path.
-	 *
-	 * @param {Object.<string,Function>} handlers Object keyed by tag to match,
-	 *                                            with function value returning
-	 *                                            replacement string.
-	 */
-	constructor( handlers ) {
-		this.handlers = [];
-
-		for ( const [ key, handler ] of Object.entries( handlers ) ) {
-			const regexp = new RegExp(
-				`\\[${ escapeStringRegexp( key ) }\\]`,
-				'gi'
-			);
-			this.handlers.push( [ regexp, handler ] );
-		}
-	}
-
-	/**
-	 * Webpack plugin application logic.
-	 *
-	 * @param {Object} compiler Webpack compiler
-	 */
-	apply( compiler ) {
-		compiler.hooks.compilation.tap(
-			'CustomTemplatedPathPlugin',
-			( compilation ) => {
-				compilation.mainTemplate.hooks.assetPath.tap(
-					'CustomTemplatedPathPlugin',
-					( path, data ) => {
-						for ( let i = 0; i < this.handlers.length; i++ ) {
-							const [ regexp, handler ] = this.handlers[ i ];
-							if ( regexp.test( path ) ) {
-								path = path.replace(
-									regexp,
-									handler( path, data )
-								);
-							}
-						}
-
-						return path;
-					}
-				);
-			}
-		);
-	}
-}
-
-module.exports = CustomTemplatedPathPlugin;
diff --git a/packages/custom-templated-path-webpack-plugin/package.json b/packages/custom-templated-path-webpack-plugin/package.json
deleted file mode 100644
index 72ba2f95143239..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-	"name": "@wordpress/custom-templated-path-webpack-plugin",
-	"version": "2.6.0",
-	"description": "Webpack plugin for creating custom path template tags.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"webpack",
-		"plugin",
-		"webpack-plugin"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/blob/HEAD/packages/custom-templated-path-webpack-plugin/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/custom-templated-path-webpack-plugin"
-	},
-	"bugs": {
-		"url": "https://github.com/WordPress/gutenberg/issues"
-	},
-	"engines": {
-		"node": ">=12"
-	},
-	"files": [
-		"index.js"
-	],
-	"main": "index.js",
-	"dependencies": {
-		"escape-string-regexp": "^1.0.5"
-	},
-	"peerDependencies": {
-		"webpack": "^4.0.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/custom-templated-path-webpack-plugin/test/fixtures/entry/index.js b/packages/custom-templated-path-webpack-plugin/test/fixtures/entry/index.js
deleted file mode 100644
index b894a23a24d56c..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/test/fixtures/entry/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = null;
diff --git a/packages/custom-templated-path-webpack-plugin/test/fixtures/webpack.config.js b/packages/custom-templated-path-webpack-plugin/test/fixtures/webpack.config.js
deleted file mode 100644
index 0e9c46cb63c320..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/test/fixtures/webpack.config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-const { basename } = require( 'path' );
-
-/**
- * Internal dependencies
- */
-const CustomTemplatedPathPlugin = require( '../../' );
-
-module.exports = {
-	mode: 'development',
-	context: __dirname,
-	entry: './entry',
-	output: {
-		filename: 'build/[basename]-[theanswertolife].js',
-		path: __dirname,
-	},
-	plugins: [
-		new CustomTemplatedPathPlugin( {
-			basename( path, data ) {
-				let rawRequest;
-				if ( data && data.chunk && data.chunk.entryModule ) {
-					rawRequest = data.chunk.entryModule.rawRequest;
-				}
-
-				if ( rawRequest ) {
-					return basename( rawRequest );
-				}
-
-				return path;
-			},
-			theanswertolife() {
-				return 42;
-			},
-		} ),
-	],
-};
diff --git a/packages/custom-templated-path-webpack-plugin/test/index.js b/packages/custom-templated-path-webpack-plugin/test/index.js
deleted file mode 100644
index f80d0389bd4230..00000000000000
--- a/packages/custom-templated-path-webpack-plugin/test/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { access, unlink } from 'fs';
-import path from 'path';
-import { promisify } from 'util';
-import webpack from 'webpack';
-
-/**
- * Internal dependencies
- */
-import config from './fixtures/webpack.config.js';
-
-/**
- * Local variables
- */
-const accessAsync = promisify( access );
-const unlinkAsync = promisify( unlink );
-const webpackAsync = promisify( webpack );
-
-jest.useRealTimers();
-
-describe( 'CustomTemplatedPathPlugin', () => {
-	const outputFile = path.join( __dirname, '/fixtures/build/entry-42.js' );
-
-	beforeAll( async () => {
-		// Remove output file so as not to report false positive from previous
-		// test. Absorb error since the file may not exist (unlink will throw).
-		try {
-			await unlinkAsync( outputFile );
-		} catch ( error ) {}
-	} );
-
-	it( 'should resolve with basename output', async () => {
-		await webpackAsync( config );
-		await accessAsync( outputFile );
-	} );
-} );
diff --git a/packages/customize-widgets/.npmrc b/packages/customize-widgets/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/customize-widgets/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index e637b6f50449e7..6b6735c6fadd9c 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,115 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.19.0 (2022-11-16)
 
 ## 3.18.0 (2022-11-02)
@@ -42,11 +151,11 @@
 
 ## 3.0.0 (2022-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `GUTENBERG_PHASE` environment variable has been renamed to `IS_GUTENBERG_PLUGIN` and is now a boolean ([#38202](https://github.com/WordPress/gutenberg/pull/38202)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/a11y` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -54,7 +163,7 @@
 
 ## 2.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 6ddbccc02e2756..10c3b2dfb510d9 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "3.19.0",
+	"version": "5.13.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -17,38 +17,41 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1",
-		"lodash": "^4.17.21"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/interface": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/widgets": "*",
+		"clsx": "^2.1.1",
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/customize-widgets/src/components/customize-widgets/index.js b/packages/customize-widgets/src/components/customize-widgets/index.js
index 3306e438f80e94..d206108398283a 100644
--- a/packages/customize-widgets/src/components/customize-widgets/index.js
+++ b/packages/customize-widgets/src/components/customize-widgets/index.js
@@ -3,7 +3,6 @@
  */
 import { useState, useEffect, useRef, createPortal } from '@wordpress/element';
 import { SlotFillProvider, Popover } from '@wordpress/components';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 /**
  * Internal dependencies
@@ -68,21 +67,16 @@ export default function CustomizeWidgets( {
 		);
 
 	return (
-		<ShortcutProvider>
-			<SlotFillProvider>
-				<SidebarControls
-					sidebarControls={ sidebarControls }
-					activeSidebarControl={ activeSidebarControl }
-				>
-					<FocusControl
-						api={ api }
-						sidebarControls={ sidebarControls }
-					>
-						{ activeSidebar }
-						{ popover }
-					</FocusControl>
-				</SidebarControls>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<SlotFillProvider>
+			<SidebarControls
+				sidebarControls={ sidebarControls }
+				activeSidebarControl={ activeSidebarControl }
+			>
+				<FocusControl api={ api } sidebarControls={ sidebarControls }>
+					{ activeSidebar }
+					{ popover }
+				</FocusControl>
+			</SidebarControls>
+		</SlotFillProvider>
 	);
 }
diff --git a/packages/customize-widgets/src/components/error-boundary/index.js b/packages/customize-widgets/src/components/error-boundary/index.js
index d1aece49b91736..0fff18a616d11c 100644
--- a/packages/customize-widgets/src/components/error-boundary/index.js
+++ b/packages/customize-widgets/src/components/error-boundary/index.js
@@ -11,7 +11,7 @@ import { doAction } from '@wordpress/hooks';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button size="compact" variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/customize-widgets/src/components/error-boundary/test/error-boundary.js b/packages/customize-widgets/src/components/error-boundary/test/error-boundary.js
new file mode 100644
index 00000000000000..27ec4c80419676
--- /dev/null
+++ b/packages/customize-widgets/src/components/error-boundary/test/error-boundary.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../index';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );
diff --git a/packages/customize-widgets/src/components/focus-control/index.js b/packages/customize-widgets/src/components/focus-control/index.js
index b449edb651137c..682f3b2a20b662 100644
--- a/packages/customize-widgets/src/components/focus-control/index.js
+++ b/packages/customize-widgets/src/components/focus-control/index.js
@@ -52,21 +52,26 @@ export default function FocusControl( { api, sidebarControls, children } ) {
 			focusWidget( widgetId );
 		}
 
+		let previewBound = false;
+
 		function handleReady() {
 			api.previewer.preview.bind(
 				'focus-control-for-setting',
 				handleFocus
 			);
+			previewBound = true;
 		}
 
 		api.previewer.bind( 'ready', handleReady );
 
 		return () => {
 			api.previewer.unbind( 'ready', handleReady );
-			api.previewer.preview.unbind(
-				'focus-control-for-setting',
-				handleFocus
-			);
+			if ( previewBound ) {
+				api.previewer.preview.unbind(
+					'focus-control-for-setting',
+					handleFocus
+				);
+			}
 		};
 	}, [ api, focusWidget ] );
 
diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js
index 201831b90cd78a..3ba81a2589fdd5 100644
--- a/packages/customize-widgets/src/components/header/index.js
+++ b/packages/customize-widgets/src/components/header/index.js
@@ -1,16 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { createPortal, useState, useEffect } from '@wordpress/element';
-import { __, _x, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { NavigableToolbar } from '@wordpress/block-editor';
+import { createPortal, useEffect, useState } from '@wordpress/element';
 import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 
 /**
@@ -44,7 +44,7 @@ function Header( {
 	return (
 		<>
 			<div
-				className={ classnames( 'customize-widgets-header', {
+				className={ clsx( 'customize-widgets-header', {
 					'is-fixed-toolbar-active': isFixedToolbarActive,
 				} ) }
 			>
@@ -57,10 +57,7 @@ function Header( {
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'Undo' ) }
 						shortcut={ displayShortcut.primary( 'z' ) }
-						// If there are no undo levels we don't want to actually disable this
-						// button, because it will remove focus for keyboard users.
-						// See: https://github.com/WordPress/gutenberg/issues/3486
-						aria-disabled={ ! hasUndo }
+						disabled={ ! hasUndo }
 						onClick={ sidebar.undo }
 						className="customize-widgets-editor-history-button undo-button"
 					/>
@@ -69,10 +66,7 @@ function Header( {
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'Redo' ) }
 						shortcut={ shortcut }
-						// If there are no undo levels we don't want to actually disable this
-						// button, because it will remove focus for keyboard users.
-						// See: https://github.com/WordPress/gutenberg/issues/3486
-						aria-disabled={ ! hasRedo }
+						disabled={ ! hasRedo }
 						onClick={ sidebar.redo }
 						className="customize-widgets-editor-history-button redo-button"
 					/>
diff --git a/packages/customize-widgets/src/components/header/style.scss b/packages/customize-widgets/src/components/header/style.scss
index d9d4a487e647c1..5c3f37a0bf0d42 100644
--- a/packages/customize-widgets/src/components/header/style.scss
+++ b/packages/customize-widgets/src/components/header/style.scss
@@ -1,5 +1,5 @@
 .customize-widgets-header {
-	@include break-medium() {
+	@include break-small() {
 		// Make space for the floating toolbar.
 		margin-bottom: $grid-unit-20 + $default-block-margin;
 	}
@@ -30,7 +30,7 @@
 	align-items: center;
 
 	.customize-widgets-header-toolbar__inserter-toggle.components-button.has-icon {
-		border-radius: 2px;
+		border-radius: $radius-small;
 		color: $white;
 		padding: 0;
 		min-width: $grid-unit-30;
diff --git a/packages/customize-widgets/src/components/inserter/index.js b/packages/customize-widgets/src/components/inserter/index.js
index c0156cf774ddc6..4f271bef9e9a3f 100644
--- a/packages/customize-widgets/src/components/inserter/index.js
+++ b/packages/customize-widgets/src/components/inserter/index.js
@@ -37,7 +37,7 @@ function Inserter( { setIsOpened } ) {
 					{ __( 'Add a block' ) }
 				</h2>
 				<Button
-					className="customize-widgets-layout__inserter-panel-header-close-button"
+					size="small"
 					icon={ closeSmall }
 					onClick={ () => setIsOpened( false ) }
 					aria-label={ __( 'Close inserter' ) }
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
index 7e098a87be2cd9..0380028aa100c0 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
@@ -22,7 +22,7 @@ export const textFormattingShortcuts = [
 	},
 	{
 		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
+		description: __( 'Insert a link to a post or page.' ),
 	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
@@ -36,4 +36,27 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
 ];
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
index 5739af79abcf7f..b4c7a1bcd46d01 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'customize-widgets-keyboard-shortcut-help-modal__section',
 			className
 		) }
@@ -110,7 +110,6 @@ export default function KeyboardShortcutHelpModal( {
 		<Modal
 			className="customize-widgets-keyboard-shortcut-help-modal"
 			title={ __( 'Keyboard shortcuts' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ toggleModal }
 		>
 			<ShortcutSection
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss
index f26955fe3a497e..638b8e7b422191 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/style.scss
@@ -33,9 +33,6 @@
 	&__shortcut-description {
 		flex: 1;
 		margin: 0;
-
-		// IE 11 flex item fix - ensure the item does not collapse.
-		flex-basis: auto;
 	}
 
 	&__shortcut-key-combination {
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/customize-widgets/src/components/more-menu/index.js b/packages/customize-widgets/src/components/more-menu/index.js
index f2384d8073b9c3..a0fb374057ec3d 100644
--- a/packages/customize-widgets/src/components/more-menu/index.js
+++ b/packages/customize-widgets/src/components/more-menu/index.js
@@ -9,10 +9,9 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { external } from '@wordpress/icons';
+import { external, moreVertical } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { MoreMenuDropdown } from '@wordpress/interface';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
@@ -35,7 +34,18 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown as={ ToolbarDropdownMenu }>
+			<ToolbarDropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
 				{ () => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
@@ -72,7 +82,7 @@ export default function MoreMenu() {
 								role="menuitem"
 								icon={ external }
 								href={ __(
-									'https://wordpress.org/support/article/block-based-widgets-editor/'
+									'https://wordpress.org/documentation/article/block-based-widgets-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"
@@ -106,7 +116,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</ToolbarDropdownMenu>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isKeyboardShortcutsModalActive }
 				toggleModal={ toggleKeyboardShortcutsModal }
diff --git a/packages/customize-widgets/src/components/more-menu/style.scss b/packages/customize-widgets/src/components/more-menu/style.scss
new file mode 100644
index 00000000000000..e618ba729c1ab5
--- /dev/null
+++ b/packages/customize-widgets/src/components/more-menu/style.scss
@@ -0,0 +1,3 @@
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 6a5a734bef9db1..be132e9cedd82e 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -1,23 +1,20 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo, createPortal } from '@wordpress/element';
 import {
 	BlockList,
-	BlockTools,
-	BlockSelectionClearer,
+	BlockToolbar,
 	BlockInspector,
-	CopyHandler,
-	ObserveTyping,
-	WritingFlow,
-	BlockEditorKeyboardShortcuts,
+	privateApis as blockEditorPrivateApis,
 	__unstableBlockSettingsMenuFirstItem,
-	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -29,6 +26,13 @@ import SidebarEditorProvider from './sidebar-editor-provider';
 import WelcomeGuide from '../welcome-guide';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import BlockAppender from '../block-appender';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
+	blockEditorPrivateApis
+);
+
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
 export default function SidebarBlockEditor( {
 	blockEditorSettings,
@@ -37,6 +41,7 @@ export default function SidebarBlockEditor( {
 	inspector,
 } ) {
 	const [ isInserterOpened, setIsInserterOpened ] = useInserter( inserter );
+	const isMediumViewport = useViewportMatch( 'small' );
 	const {
 		hasUploadPermissions,
 		isFixedToolbarActive,
@@ -46,7 +51,10 @@ export default function SidebarBlockEditor( {
 		const { get } = select( preferencesStore );
 		return {
 			hasUploadPermissions:
-				select( coreStore ).canUser( 'create', 'media' ) ?? true,
+				select( coreStore ).canUser( 'create', {
+					kind: 'root',
+					name: 'media',
+				} ) ?? true,
 			isFixedToolbarActive: !! get(
 				'core/customize-widgets',
 				'fixedToolbar'
@@ -77,14 +85,16 @@ export default function SidebarBlockEditor( {
 			...blockEditorSettings,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			mediaUpload: mediaUploadBlockEditor,
-			hasFixedToolbar: isFixedToolbarActive,
+			hasFixedToolbar: isFixedToolbarActive || ! isMediumViewport,
 			keepCaretInsideBlock,
+			editorTool: 'edit',
 			__unstableHasCustomAppender: true,
 		};
 	}, [
 		hasUploadPermissions,
 		blockEditorSettings,
 		isFixedToolbarActive,
+		isMediumViewport,
 		keepCaretInsideBlock,
 		setIsInserterOpened,
 	] );
@@ -95,8 +105,8 @@ export default function SidebarBlockEditor( {
 
 	return (
 		<>
-			<BlockEditorKeyboardShortcuts.Register />
 			<KeyboardShortcuts.Register />
+			<BlockKeyboardShortcuts />
 
 			<SidebarEditorProvider sidebar={ sidebar } settings={ settings }>
 				<KeyboardShortcuts
@@ -110,23 +120,20 @@ export default function SidebarBlockEditor( {
 					inserter={ inserter }
 					isInserterOpened={ isInserterOpened }
 					setIsInserterOpened={ setIsInserterOpened }
-					isFixedToolbarActive={ isFixedToolbarActive }
+					isFixedToolbarActive={
+						isFixedToolbarActive || ! isMediumViewport
+					}
 				/>
-
-				<CopyHandler>
-					<BlockTools>
-						<EditorStyles styles={ settings.defaultEditorStyles } />
-						<BlockSelectionClearer>
-							<WritingFlow className="editor-styles-wrapper">
-								<ObserveTyping>
-									<BlockList
-										renderAppender={ BlockAppender }
-									/>
-								</ObserveTyping>
-							</WritingFlow>
-						</BlockSelectionClearer>
-					</BlockTools>
-				</CopyHandler>
+				{ ( isFixedToolbarActive || ! isMediumViewport ) && (
+					<BlockToolbar hideDragHandle />
+				) }
+				<BlockCanvas
+					shouldIframe={ false }
+					styles={ settings.defaultEditorStyles }
+					height="100%"
+				>
+					<BlockList renderAppender={ BlockAppender } />
+				</BlockCanvas>
 
 				{ createPortal(
 					// This is a temporary hack to prevent button component inside <BlockInspector>
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js
index 95f6259de16bd2..bbdf1ce70a15bf 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-editor-provider.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { BlockEditorProvider } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -9,6 +9,10 @@ import { BlockEditorProvider } from '@wordpress/block-editor';
 import useSidebarBlockEditor from './use-sidebar-block-editor';
 import useBlocksFocusControl from '../focus-control/use-blocks-focus-control';
 
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+
 export default function SidebarEditorProvider( {
 	sidebar,
 	settings,
@@ -19,7 +23,7 @@ export default function SidebarEditorProvider( {
 	useBlocksFocusControl( blocks );
 
 	return (
-		<BlockEditorProvider
+		<ExperimentalBlockEditorProvider
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
@@ -27,6 +31,6 @@ export default function SidebarEditorProvider( {
 			useSubRegistry={ false }
 		>
 			{ children }
-		</BlockEditorProvider>
+		</ExperimentalBlockEditorProvider>
 	);
 }
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
index 7f46a73c4ee133..1aa62ed32e847c 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/style.scss
@@ -1,17 +1,3 @@
-.block-editor-block-contextual-toolbar.is-fixed {
-	// The top position used for the 'sticky' positioning.
-	top: 0;
-
-	// Offset the customizer's sidebar padding.
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	width: calc(100% + #{ $grid-unit-30 });
-
-	// Scroll sideways.
-	overflow-y: auto;
-	z-index: z-index(".customize-widgets__block-toolbar");
-}
-
 .customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
 	// FloatingUI library used in Popover component forces us to have an "absolute" inline style.
 	// We need to override this in the customizer.
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
index d91ec2ac092ca0..7d6856004982b8 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -82,7 +82,10 @@ export default function useSidebarBlockEditor( sidebar ) {
 
 						// Bail out updates by returning the previous widgets.
 						// Deep equality is necessary until the block editor's internals changes.
-						if ( isEqual( nextBlock, prevBlock ) && prevWidget ) {
+						if (
+							fastDeepEqual( nextBlock, prevBlock ) &&
+							prevWidget
+						) {
 							return prevWidget;
 						}
 
diff --git a/packages/customize-widgets/src/components/test/error-boundary.js b/packages/customize-widgets/src/components/test/error-boundary.js
deleted file mode 100644
index 7b9977e10f1315..00000000000000
--- a/packages/customize-widgets/src/components/test/error-boundary.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import * as wpHooks from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import ErrorBoundary from '../error-boundary';
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-const theError = new Error( 'Kaboom' );
-
-const ChildComponent = () => {
-	throw theError;
-};
-
-describe( 'Error Boundary', () => {
-	describe( 'when error is thrown from a Child component', () => {
-		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
-			const doAction = jest.spyOn( wpHooks, 'doAction' );
-
-			render(
-				<ErrorBoundary>
-					<ChildComponent />
-				</ErrorBoundary>
-			);
-
-			expect( doAction ).toHaveBeenCalledWith(
-				'editor.ErrorBoundary.errorLogged',
-				theError
-			);
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );
diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index 28826cae2cc722..3f7b2f45d86b7a 100644
--- a/packages/customize-widgets/src/components/welcome-guide/index.js
+++ b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -43,7 +43,7 @@ export default function WelcomeGuide( { sidebar } ) {
 					  ) }
 			</p>
 			<Button
-				className="customize-widgets-welcome-guide__button"
+				size="compact"
 				variant="primary"
 				onClick={ () =>
 					toggle( 'core/customize-widgets', 'welcomeGuide' )
@@ -70,7 +70,7 @@ export default function WelcomeGuide( { sidebar } ) {
 				<br />
 				<ExternalLink
 					href={ __(
-						'https://wordpress.org/support/article/wordpress-editor/'
+						'https://wordpress.org/documentation/article/wordpress-block-editor/'
 					) }
 				>
 					{ __( "Here's a detailed guide." ) }
diff --git a/packages/customize-widgets/src/filters/move-to-sidebar.js b/packages/customize-widgets/src/filters/move-to-sidebar.js
index 7677a5e1726cfe..4562afb3817c64 100644
--- a/packages/customize-widgets/src/filters/move-to-sidebar.js
+++ b/packages/customize-widgets/src/filters/move-to-sidebar.js
@@ -83,7 +83,7 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent(
 
 		return (
 			<>
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 				{ hasMultipleSidebars && canInsertBlockInSidebar && (
 					<BlockControls>
 						<MoveToWidgetArea
diff --git a/packages/customize-widgets/src/filters/wide-widget-display.js b/packages/customize-widgets/src/filters/wide-widget-display.js
index abcaa3514b640e..2d3052822e19fc 100644
--- a/packages/customize-widgets/src/filters/wide-widget-display.js
+++ b/packages/customize-widgets/src/filters/wide-widget-display.js
@@ -14,7 +14,7 @@ const withWideWidgetDisplay = createHigherOrderComponent(
 				( widget ) => widget.id_base === idBase
 			)?.is_wide ?? false;
 
-		return <BlockEdit { ...props } isWide={ isWide } />;
+		return <BlockEdit key="edit" { ...props } isWide={ isWide } />;
 	},
 	'withWideWidgetDisplay'
 );
diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js
index 8ec1447306d2de..5de010fa8bd37e 100644
--- a/packages/customize-widgets/src/index.js
+++ b/packages/customize-widgets/src/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { render } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -49,7 +49,7 @@ export function initialize( editorName, blockEditorSettings ) {
 		welcomeGuide: true,
 	} );
 
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			DISABLED_BLOCKS.includes( block.name ) ||
@@ -61,7 +61,7 @@ export function initialize( editorName, blockEditorSettings ) {
 	} );
 	registerCoreBlocks( coreBlocks );
 	registerLegacyWidgetBlock();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS,
 		} );
@@ -91,13 +91,15 @@ export function initialize( editorName, blockEditorSettings ) {
 			}
 		} );
 
-		render(
-			<CustomizeWidgets
-				api={ wp.customize }
-				sidebarControls={ sidebarControls }
-				blockEditorSettings={ blockEditorSettings }
-			/>,
-			container
+		createRoot( container ).render(
+			<StrictMode>
+				<CustomizeWidgets
+					api={ wp.customize }
+					sidebarControls={ sidebarControls }
+					blockEditorSettings={ blockEditorSettings }
+				/>
+			</StrictMode>
 		);
 	} );
 }
+export { store } from './store';
diff --git a/packages/customize-widgets/src/lock-unlock.js b/packages/customize-widgets/src/lock-unlock.js
new file mode 100644
index 00000000000000..92ef5147b1713e
--- /dev/null
+++ b/packages/customize-widgets/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/customize-widgets'
+	);
diff --git a/packages/customize-widgets/src/store/actions.js b/packages/customize-widgets/src/store/actions.js
index 30926701e1f26f..8656ef8854c9f5 100644
--- a/packages/customize-widgets/src/store/actions.js
+++ b/packages/customize-widgets/src/store/actions.js
@@ -8,6 +8,31 @@
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
  *
+ * @example
+ * ```js
+ * import { useState } from 'react';
+ * import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+ * import { __ } from '@wordpress/i18n';
+ * import { useDispatch } from '@wordpress/data';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *   const { setIsInserterOpened } = useDispatch( customizeWidgetsStore );
+ *   const [ isOpen, setIsOpen ] = useState( false );
+ *
+ *    return (
+ *        <Button
+ *            onClick={ () => {
+ *                setIsInserterOpened( ! isOpen );
+ *                setIsOpen( ! isOpen );
+ *            } }
+ *        >
+ *            { __( 'Open/close inserter' ) }
+ *        </Button>
+ *    );
+ * };
+ * ```
+ *
  * @return {Object} Action object.
  */
 export function setIsInserterOpened( value ) {
diff --git a/packages/customize-widgets/src/store/selectors.js b/packages/customize-widgets/src/store/selectors.js
index 63962af151d15d..5b1fe1aa4898f7 100644
--- a/packages/customize-widgets/src/store/selectors.js
+++ b/packages/customize-widgets/src/store/selectors.js
@@ -1,8 +1,31 @@
+const EMPTY_INSERTION_POINT = {
+	rootClientId: undefined,
+	insertionIndex: undefined,
+};
+
 /**
  * Returns true if the inserter is opened.
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ * ```js
+ * import { store as customizeWidgetsStore } from '@wordpress/customize-widgets';
+ * import { __ } from '@wordpress/i18n';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { isInserterOpened } = useSelect(
+ *        ( select ) => select( customizeWidgetsStore ),
+ *        []
+ *    );
+ *
+ *    return isInserterOpened()
+ *        ? __( 'Inserter is open' )
+ *        : __( 'Inserter is closed.' );
+ * };
+ * ```
+ *
  * @return {boolean} Whether the inserter is opened.
  */
 export function isInserterOpened( state ) {
@@ -17,6 +40,9 @@ export function isInserterOpened( state ) {
  * @return {Object} The root client ID and index to insert at.
  */
 export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex } = state.blockInserterPanel;
-	return { rootClientId, insertionIndex };
+	if ( typeof state.blockInserterPanel === 'boolean' ) {
+		return EMPTY_INSERTION_POINT;
+	}
+
+	return state.blockInserterPanel;
 }
diff --git a/packages/customize-widgets/src/style.scss b/packages/customize-widgets/src/style.scss
index 3bf341c34c0eb1..9596237895953f 100644
--- a/packages/customize-widgets/src/style.scss
+++ b/packages/customize-widgets/src/style.scss
@@ -2,6 +2,7 @@
 @import "./components/header/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/more-menu/style.scss";
 @import "./components/sidebar-block-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./controls/style.scss";
@@ -13,7 +14,6 @@
 
 // Include reset CSS for the customizer.
 .customize-control-sidebar_block_editor,
-.customize-widgets-layout__inspector,
-.customize-widgets-popover {
+.customize-widgets-layout__inspector {
 	@include reset;
 }
diff --git a/packages/customize-widgets/src/utils.js b/packages/customize-widgets/src/utils.js
index f2f254b5ae6af6..9c3622a3ea8a5c 100644
--- a/packages/customize-widgets/src/utils.js
+++ b/packages/customize-widgets/src/utils.js
@@ -103,7 +103,7 @@ export function widgetToBlock( { id, idBase, number, instance } ) {
 	} = instance;
 
 	if ( idBase === 'block' ) {
-		const parsedBlocks = parse( raw.content, {
+		const parsedBlocks = parse( raw.content ?? '', {
 			__unstableSkipAutop: true,
 		} );
 		block = parsedBlocks.length
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index 6e2a6dc610e116..92eb6f83394213 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.27.0 (2024-05-16)
+
+## 3.26.0 (2024-05-02)
+
+## 3.25.0 (2024-04-19)
+
+## 3.24.0 (2024-04-03)
+
+## 3.23.0 (2024-03-21)
+
+## 3.22.0 (2024-03-06)
+
+## 3.21.0 (2024-02-21)
+
+## 3.20.0 (2024-02-09)
+
+## 3.19.0 (2024-01-24)
+
+## 3.18.0 (2024-01-10)
+
+## 3.17.0 (2023-12-13)
+
+## 3.16.0 (2023-11-29)
+
+## 3.15.0 (2023-11-16)
+
+## 3.14.0 (2023-11-02)
+
+## 3.13.0 (2023-10-18)
+
+## 3.12.0 (2023-10-05)
+
+## 3.11.0 (2023-09-20)
+
+## 3.10.0 (2023-08-31)
+
+## 3.9.0 (2023-08-16)
+
+## 3.8.0 (2023-08-10)
+
+## 3.7.0 (2023-07-20)
+
+## 3.6.0 (2023-07-05)
+
+## 3.5.0 (2023-06-23)
+
+## 3.4.0 (2023-06-07)
+
+## 3.3.0 (2023-05-24)
+
+## 3.2.0 (2023-05-10)
+
+## 3.1.0 (2023-04-26)
+
+## 3.0.0 (2023-04-12)
+
+### Breaking Changes
+
+-   Publish Typescript build types to npm. ([#49647](https://github.com/WordPress/gutenberg/pull/49647))
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -57,7 +165,7 @@
 
 ## 1.18.0 (2020-10-06)
 
-### New Feature
+### New Features
 
 -   Expose the `syncSelect` control for synchronous calls of registry selectors
 
diff --git a/packages/data-controls/README.md b/packages/data-controls/README.md
index d8263d148c8d66..fdcc66fc403ea2 100644
--- a/packages/data-controls/README.md
+++ b/packages/data-controls/README.md
@@ -47,8 +47,7 @@ _Returns_
 
 ### controls
 
-The default export is what you use to register the controls with your custom
-store.
+The default export is what you use to register the controls with your custom store.
 
 _Usage_
 
@@ -78,30 +77,33 @@ _Returns_
 
 ### dispatch
 
-Control for dispatching an action in a registered data store.
-Alias for the `dispatch` control in the `@wordpress/data` package.
+Control for dispatching an action in a registered data store. Alias for the `dispatch` control in the `@wordpress/data` package.
 
 _Parameters_
 
--   _args_ `Array`: Arguments passed without change to the `@wordpress/data` control.
+-   _storeNameOrDescriptor_ `string | StoreDescriptor`: The store object or identifier.
+-   _actionName_ `string`: The action name.
+-   _args_ `any[]`: Arguments passed without change to the `@wordpress/data` control.
 
 ### select
 
-Control for resolving a selector in a registered data store.
-Alias for the `resolveSelect` built-in control in the `@wordpress/data` package.
+Control for resolving a selector in a registered data store. Alias for the `resolveSelect` built-in control in the `@wordpress/data` package.
 
 _Parameters_
 
--   _args_ `Array`: Arguments passed without change to the `@wordpress/data` control.
+-   _storeNameOrDescriptor_ `string | StoreDescriptor`: The store object or identifier.
+-   _selectorName_ `string`: The selector name.
+-   _args_ `any[]`: Arguments passed without change to the `@wordpress/data` control.
 
 ### syncSelect
 
-Control for calling a selector in a registered data store.
-Alias for the `select` built-in control in the `@wordpress/data` package.
+Control for calling a selector in a registered data store. Alias for the `select` built-in control in the `@wordpress/data` package.
 
 _Parameters_
 
--   _args_ `Array`: Arguments passed without change to the `@wordpress/data` control.
+-   _storeNameOrDescriptor_ `string | StoreDescriptor`: The store object or identifier.
+-   _selectorName_ `string`: The selector name.
+-   _args_ `any[]`: Arguments passed without change to the `@wordpress/data` control.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index c8f930fdda7201..6c4703321c6020 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "2.22.0",
+	"version": "4.13.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,19 +20,22 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/data-controls/src/index.js b/packages/data-controls/src/index.js
deleted file mode 100644
index 62671b41f139ff..00000000000000
--- a/packages/data-controls/src/index.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * WordPress dependencies
- */
-import triggerFetch from '@wordpress/api-fetch';
-import { controls as dataControls } from '@wordpress/data';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Dispatches a control action for triggering an api fetch call.
- *
- * @param {Object} request Arguments for the fetch request.
- *
- * @example
- * ```js
- * import { apiFetch } from '@wordpress/data-controls';
- *
- * // Action generator using apiFetch
- * export function* myAction() {
- * 	const path = '/v2/my-api/items';
- * 	const items = yield apiFetch( { path } );
- * 	// do something with the items.
- * }
- * ```
- *
- * @return {Object} The control descriptor.
- */
-export function apiFetch( request ) {
-	return {
-		type: 'API_FETCH',
-		request,
-	};
-}
-
-/**
- * Control for resolving a selector in a registered data store.
- * Alias for the `resolveSelect` built-in control in the `@wordpress/data` package.
- *
- * @param {Array} args Arguments passed without change to the `@wordpress/data` control.
- */
-export function select( ...args ) {
-	deprecated( '`select` control in `@wordpress/data-controls`', {
-		since: '5.7',
-		alternative: 'built-in `resolveSelect` control in `@wordpress/data`',
-	} );
-
-	return dataControls.resolveSelect( ...args );
-}
-
-/**
- * Control for calling a selector in a registered data store.
- * Alias for the `select` built-in control in the `@wordpress/data` package.
- *
- * @param {Array} args Arguments passed without change to the `@wordpress/data` control.
- */
-export function syncSelect( ...args ) {
-	deprecated( '`syncSelect` control in `@wordpress/data-controls`', {
-		since: '5.7',
-		alternative: 'built-in `select` control in `@wordpress/data`',
-	} );
-
-	return dataControls.select( ...args );
-}
-
-/**
- * Control for dispatching an action in a registered data store.
- * Alias for the `dispatch` control in the `@wordpress/data` package.
- *
- * @param {Array} args Arguments passed without change to the `@wordpress/data` control.
- */
-export function dispatch( ...args ) {
-	deprecated( '`dispatch` control in `@wordpress/data-controls`', {
-		since: '5.7',
-		alternative: 'built-in `dispatch` control in `@wordpress/data`',
-	} );
-
-	return dataControls.dispatch( ...args );
-}
-
-/**
- * Dispatches a control action for awaiting on a promise to be resolved.
- *
- * @param {Object} promise Promise to wait for.
- *
- * @example
- * ```js
- * import { __unstableAwaitPromise } from '@wordpress/data-controls';
- *
- * // Action generator using apiFetch
- * export function* myAction() {
- * 	const promise = getItemsAsync();
- * 	const items = yield __unstableAwaitPromise( promise );
- * 	// do something with the items.
- * }
- * ```
- *
- * @return {Object} The control descriptor.
- */
-export const __unstableAwaitPromise = function ( promise ) {
-	return {
-		type: 'AWAIT_PROMISE',
-		promise,
-	};
-};
-
-/**
- * The default export is what you use to register the controls with your custom
- * store.
- *
- * @example
- * ```js
- * // WordPress dependencies
- * import { controls } from '@wordpress/data-controls';
- * import { registerStore } from '@wordpress/data';
- *
- * // Internal dependencies
- * import reducer from './reducer';
- * import * as selectors from './selectors';
- * import * as actions from './actions';
- * import * as resolvers from './resolvers';
- *
- * registerStore( 'my-custom-store', {
- * reducer,
- * controls,
- * actions,
- * selectors,
- * resolvers,
- * } );
- * ```
- * @return {Object} An object for registering the default controls with the
- * store.
- */
-export const controls = {
-	AWAIT_PROMISE: ( { promise } ) => promise,
-	API_FETCH( { request } ) {
-		return triggerFetch( request );
-	},
-};
diff --git a/packages/data-controls/src/index.ts b/packages/data-controls/src/index.ts
new file mode 100644
index 00000000000000..c0898d214224f5
--- /dev/null
+++ b/packages/data-controls/src/index.ts
@@ -0,0 +1,163 @@
+/**
+ * WordPress dependencies
+ */
+import triggerFetch from '@wordpress/api-fetch';
+import { controls as dataControls } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+import type { StoreDescriptor } from '@wordpress/data';
+import type { APIFetchOptions } from '@wordpress/api-fetch';
+
+/**
+ * Dispatches a control action for triggering an api fetch call.
+ *
+ * @param {Object} request Arguments for the fetch request.
+ *
+ * @example
+ * ```js
+ * import { apiFetch } from '@wordpress/data-controls';
+ *
+ * // Action generator using apiFetch
+ * export function* myAction() {
+ * 	const path = '/v2/my-api/items';
+ * 	const items = yield apiFetch( { path } );
+ * 	// do something with the items.
+ * }
+ * ```
+ *
+ * @return {Object} The control descriptor.
+ */
+export function apiFetch( request: APIFetchOptions ) {
+	return {
+		type: 'API_FETCH',
+		request,
+	};
+}
+
+/**
+ * Control for resolving a selector in a registered data store.
+ * Alias for the `resolveSelect` built-in control in the `@wordpress/data` package.
+ *
+ * @param storeNameOrDescriptor The store object or identifier.
+ * @param selectorName          The selector name.
+ * @param args                  Arguments passed without change to the `@wordpress/data` control.
+ */
+export function select(
+	storeNameOrDescriptor: string | StoreDescriptor,
+	selectorName: string,
+	...args: any[]
+) {
+	deprecated( '`select` control in `@wordpress/data-controls`', {
+		since: '5.7',
+		alternative: 'built-in `resolveSelect` control in `@wordpress/data`',
+	} );
+
+	return dataControls.resolveSelect(
+		storeNameOrDescriptor,
+		selectorName,
+		...args
+	);
+}
+
+/**
+ * Control for calling a selector in a registered data store.
+ * Alias for the `select` built-in control in the `@wordpress/data` package.
+ *
+ * @param storeNameOrDescriptor The store object or identifier.
+ * @param selectorName          The selector name.
+ * @param args                  Arguments passed without change to the `@wordpress/data` control.
+ */
+export function syncSelect(
+	storeNameOrDescriptor: string | StoreDescriptor,
+	selectorName: string,
+	...args: any[]
+) {
+	deprecated( '`syncSelect` control in `@wordpress/data-controls`', {
+		since: '5.7',
+		alternative: 'built-in `select` control in `@wordpress/data`',
+	} );
+
+	return dataControls.select( storeNameOrDescriptor, selectorName, ...args );
+}
+
+/**
+ * Control for dispatching an action in a registered data store.
+ * Alias for the `dispatch` control in the `@wordpress/data` package.
+ *
+ * @param storeNameOrDescriptor The store object or identifier.
+ * @param actionName            The action name.
+ * @param args                  Arguments passed without change to the `@wordpress/data` control.
+ */
+export function dispatch(
+	storeNameOrDescriptor: string | StoreDescriptor,
+	actionName: string,
+	...args: any[]
+) {
+	deprecated( '`dispatch` control in `@wordpress/data-controls`', {
+		since: '5.7',
+		alternative: 'built-in `dispatch` control in `@wordpress/data`',
+	} );
+
+	return dataControls.dispatch( storeNameOrDescriptor, actionName, ...args );
+}
+
+/**
+ * Dispatches a control action for awaiting on a promise to be resolved.
+ *
+ * @param {Object} promise Promise to wait for.
+ *
+ * @example
+ * ```js
+ * import { __unstableAwaitPromise } from '@wordpress/data-controls';
+ *
+ * // Action generator using apiFetch
+ * export function* myAction() {
+ * 	const promise = getItemsAsync();
+ * 	const items = yield __unstableAwaitPromise( promise );
+ * 	// do something with the items.
+ * }
+ * ```
+ *
+ * @return {Object} The control descriptor.
+ */
+export const __unstableAwaitPromise = function < T >( promise: Promise< T > ) {
+	return {
+		type: 'AWAIT_PROMISE',
+		promise,
+	};
+};
+
+/**
+ * The default export is what you use to register the controls with your custom
+ * store.
+ *
+ * @example
+ * ```js
+ * // WordPress dependencies
+ * import { controls } from '@wordpress/data-controls';
+ * import { registerStore } from '@wordpress/data';
+ *
+ * // Internal dependencies
+ * import reducer from './reducer';
+ * import * as selectors from './selectors';
+ * import * as actions from './actions';
+ * import * as resolvers from './resolvers';
+ *
+ * registerStore( 'my-custom-store', {
+ * reducer,
+ * controls,
+ * actions,
+ * selectors,
+ * resolvers,
+ * } );
+ * ```
+ * @return {Object} An object for registering the default controls with the
+ * store.
+ */
+export const controls = {
+	AWAIT_PROMISE< T >( { promise }: { promise: Promise< T > } ) {
+		return promise;
+	},
+	API_FETCH( { request }: { request: APIFetchOptions } ) {
+		return triggerFetch( request );
+	},
+};
diff --git a/packages/data-controls/tsconfig.json b/packages/data-controls/tsconfig.json
new file mode 100644
index 00000000000000..5ccc6045880d4a
--- /dev/null
+++ b/packages/data-controls/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ]
+	},
+	"references": [
+		{ "path": "../api-fetch" },
+		{ "path": "../data" },
+		{ "path": "../deprecated" }
+	],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/data/.npmrc b/packages/data/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/data/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index cba47ff4275804..89bee010837e26 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,149 @@
 
 ## Unreleased
 
+## 10.13.0 (2024-11-27)
+
+### Enhancements
+
+-   Upgrade `redux` dependency to `^5.0.1` ([#66966](https://github.com/WordPress/gutenberg/pull/66966))
+
+## 10.12.0 (2024-11-16)
+
+## 10.11.0 (2024-10-30)
+
+## 10.10.0 (2024-10-16)
+
+## 10.9.0 (2024-10-03)
+
+## 10.8.0 (2024-09-19)
+
+## 10.7.0 (2024-09-05)
+
+## 10.6.0 (2024-08-21)
+
+## 10.5.0 (2024-08-07)
+
+## 10.4.0 (2024-07-24)
+
+## 10.3.0 (2024-07-10)
+
+## 10.2.0 (2024-06-26)
+
+## 10.1.0 (2024-06-15)
+
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.28.0 (2024-05-16)
+
+## 9.27.0 (2024-05-02)
+
+## 9.26.0 (2024-04-19)
+
+-   Add new `createSelector` function for creating memoized store selectors ([#60370](https://github.com/WordPress/gutenberg/pull/60370)).
+
+## 9.25.0 (2024-04-03)
+
+## 9.24.0 (2024-03-21)
+
+-   Deprecate the `getIsResolved` meta-selector ([#59679](https://github.com/WordPress/gutenberg/pull/59679)).
+
+## 9.23.0 (2024-03-06)
+
+## 9.22.0 (2024-02-21)
+
+## 9.21.0 (2024-02-09)
+
+## 9.20.0 (2024-01-24)
+
+## 9.19.0 (2024-01-10)
+
+## 9.18.0 (2023-12-13)
+
+## 9.17.0 (2023-11-29)
+
+## 9.16.0 (2023-11-16)
+
+## 9.15.0 (2023-11-02)
+
+## 9.14.0 (2023-10-18)
+
+## 9.13.1 (2023-10-12)
+
+### Bug Fixes
+
+-   Fix `combineReducers()` types ([#55321](https://github.com/WordPress/gutenberg/pull/55321)).
+
+## 9.13.0 (2023-10-05)
+
+### Enhancements
+
+-   Change implementation of `combineReducers` so that it doesn't use `eval` internally, and can run with a CSP policy that doesn't allow `unsafe-eval` ([#54606](https://github.com/WordPress/gutenberg/pull/54606)).
+
+## 9.12.0 (2023-09-20)
+
+## 9.11.0 (2023-08-31)
+
+## 9.10.0 (2023-08-16)
+
+### Enhancements
+
+-   Warn if the `useSelect` hook returns different values when called with the same state and parameters ([#53666](https://github.com/WordPress/gutenberg/pull/53666)).
+
+## 9.9.0 (2023-08-10)
+
+### Bug Fixes
+
+-   Update the type definitions for dispatched actions by accounting for Promisified return values and thunks. Previously, a dispatched action's return type was the same as the return type of the original action creator, which did not account for how dispatch works internally. (Plain actions get wrapped in a Promise, and thunk actions ultimately resolve to the innermost function's return type).
+-   Update the type definition for dispatch() to handle string store descriptors correctly.
+
+## 9.8.0 (2023-07-20)
+
+## 9.7.0 (2023-07-05)
+
+## 9.6.0 (2023-06-23)
+
+## 9.5.0 (2023-06-07)
+
+## 9.4.0 (2023-05-24)
+
+## 9.3.0 (2023-05-10)
+
+## 9.2.0 (2023-04-26)
+
+## 9.1.0 (2023-04-12)
+
+## 9.0.0 (2023-03-29)
+
+### Breaking Changes
+
+-   The `registry.register` function will no longer register a store if another instance is registered with the same name.
+
+## 8.6.0 (2023-03-15)
+
+## 8.5.0 (2023-03-01)
+
+## 8.4.0 (2023-02-15)
+
+## 8.3.0 (2023-02-01)
+
+## 8.2.0 (2023-01-11)
+
+## 8.1.0 (2023-01-02)
+
+## 8.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
+### Enhancements
+
+-   The `registry.subscribe` function can now subscribe to updates only from one specific store, with a new optional parameter.
+
 ## 7.6.0 (2022-11-16)
 
 ## 7.5.0 (2022-11-02)
@@ -18,9 +161,9 @@
 
 ### Breaking Changes
 
-–   Add TypeScript types to the built package (via "types": "build-types" in the package.json)
+– Add TypeScript types to the built package (via "types": "build-types" in the package.json)
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
@@ -56,19 +199,19 @@
 
 ### New Features
 
-- Enabled thunks by default for all stores and removed the `__experimentalUseThunks` flag.
-- Store the resolution errors in store metadata and expose them using `hasResolutionFailed` the `getResolutionError` meta-selectors ([#38669](https://github.com/WordPress/gutenberg/pull/38669)).
-- Expose the resolution status (undefined, resolving, finished, error) via the `getResolutionState` meta-selector ([#38669](https://github.com/WordPress/gutenberg/pull/38669)).
+-   Enabled thunks by default for all stores and removed the `__experimentalUseThunks` flag.
+-   Store the resolution errors in store metadata and expose them using `hasResolutionFailed` the `getResolutionError` meta-selectors ([#38669](https://github.com/WordPress/gutenberg/pull/38669)).
+-   Expose the resolution status (undefined, resolving, finished, error) via the `getResolutionState` meta-selector ([#38669](https://github.com/WordPress/gutenberg/pull/38669)).
 
 ## 6.2.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `memize` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
 ## 6.2.0 (2022-01-27)
 
-### Bug Fix
+### Bug Fixes
 
 -   Corrected expect type of action creators and selectors in Redux store configuration type
 -   Move `redux` to regular dependencies and update it to version `^4.1.2`.
@@ -88,7 +231,7 @@
 
 ## 6.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -133,7 +276,7 @@
 
 ## 4.6.0 (2019-06-12)
 
-### New Feature
+### New Features
 
 -   Expose `useSelect` hook for usage in functional components. ([#15737](https://github.com/WordPress/gutenberg/pull/15737))
 -   Expose `useDispatch` hook for usage in functional components. ([#15896](https://github.com/WordPress/gutenberg/pull/15896))
@@ -145,7 +288,7 @@
 
 ## 4.5.0 (2019-05-21)
 
-### Bug Fix
+### Bug Fixes
 
 -   Restore functionality of action-generators returning a Promise. Clarify intent and behaviour for `dispatch` behaviour. Dispatch actions now always
     return a promise ([#14830](https://github.com/WordPress/gutenberg/pull/14830)
@@ -162,7 +305,7 @@
 -   Introduce new `invalidateResolutionForStore` dispatch action for signalling to invalidate the resolution cache for an entire given store.
 -   Introduce new `invalidateResolutionForStoreSelector` dispatch action for signalling to invalidate the resolution cache for a store selector (and all variations of arguments on that selector).
 
-### Bug Fix
+### Bug Fixes
 
 -   Resolves issue in the persistence plugin where passing `persist` as an array of reducer keys would wrongly replace state values for the unpersisted reducer keys.
 -   Restores a behavior in the persistence plugin where a default state provided as an object will be deeply merged as a base for the persisted value. This allows for a developer to include additional new keys in a persisted value default in future iterations of their store.
@@ -175,7 +318,7 @@
 
 ## 4.1.0 (2018-12-12)
 
-### New Feature
+### New Features
 
 -   `withDispatch`'s `mapDispatchToProps` function takes the `registry` object as the 3rd param ([#11851](https://github.com/WordPress/gutenberg/pull/11851)).
 -   `withSelect`'s `mapSelectToProps` function takes the `registry` object as the 3rd param ([#11851](https://github.com/WordPress/gutenberg/pull/11851)).
@@ -191,7 +334,7 @@
 -   `registry.registerActions` has been removed. Use `registry.registerStore` instead.
 -   `registry.registerResolvers` has been removed. Use `registry.registerStore` instead.
 
-### Bug Fix
+### Bug Fixes
 
 -   Resolve an issue where `withSelect`'s `mapSelectToProps` would not be rerun if the wrapped component had incurred a store change during its mount lifecycle.
 
@@ -234,7 +377,7 @@
 
 -   Adding support for using controls in resolvers using the controls plugin.
 
-### Polish
+### Internal
 
 -   Updated `redux` dependency to the latest version.
 
@@ -248,7 +391,7 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `withRehdyration` function is removed. Use the persistence plugin instead.
 -   The `loadAndPersist` function is removed. Use the persistence plugin instead.
diff --git a/packages/data/README.md b/packages/data/README.md
index d45a71d3fa6031..b6e0e03b1d8b72 100644
--- a/packages/data/README.md
+++ b/packages/data/README.md
@@ -42,13 +42,6 @@ const actions = {
 			discountPercent,
 		};
 	},
-
-	fetchFromAPI( path ) {
-		return {
-			type: 'FETCH_FROM_API',
-			path,
-		};
-	},
 };
 
 const store = createReduxStore( 'my-shop', {
@@ -84,17 +77,11 @@ const store = createReduxStore( 'my-shop', {
 		},
 	},
 
-	controls: {
-		FETCH_FROM_API( action ) {
-			return apiFetch( { path: action.path } );
-		},
-	},
-
 	resolvers: {
-		*getPrice( item ) {
+		getPrice: ( item ) => async ({ dispatch }) => { {
 			const path = '/wp/v2/prices/' + item;
-			const price = yield actions.fetchFromAPI( path );
-			return actions.setPrice( item, price );
+			const price = await apiFetch( { path } );
+			dispatch.setPrice( item, price );
 		},
 	},
 } );
@@ -133,13 +120,21 @@ A **resolver** is a side-effect for a selector. If your selector result may need
 
 The `resolvers` option should be passed as an object where each key is the name of the selector to act upon, the value a function which receives the same arguments passed to the selector, excluding the state argument. It can then dispatch as necessary to fulfill the requirements of the selector, taking advantage of the fact that most data consumers will subscribe to subsequent state changes (by `subscribe` or `withSelect`).
 
-#### `controls`
+Resolvers, in combination with [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async), can be used to implement asynchronous data flows for your store.
 
-A **control** defines the execution flow behavior associated with a specific action type. This can be particularly useful in implementing asynchronous data flows for your store. By defining your action creator or resolvers as a generator which yields specific controlled action types, the execution will proceed as defined by the control handler.
+#### `controls` (deprecated)
 
-The `controls` option should be passed as an object where each key is the name of the action type to act upon, the value a function which receives the original action object. It should returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued.
+To handle asynchronous data flows, it is recommended to use [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async) instead of `controls`.
 
-Refer to the [documentation of `@wordpress/redux-routine`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/redux-routine/README.md) for more information.
+<details>
+  <summary>View <em>controls</em> explanation</summary>
+<br>
+A <em>control</em> defines the execution flow behavior associated with a specific action type. Before <a href="https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async">thunks</a>, controls were used to implement asynchronous data flows for your store. By defining your action creator or resolvers as a generator which yields specific controlled action types, the execution will proceed as defined by the control handler.
+<br><br>
+The <em>controls</em> option should be passed as an object where each key is the name of the action type to act upon, the value a function which receives the original action object. It should returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued.
+<br><br>
+Refer to the <a href="https://github.com/WordPress/gutenberg/tree/HEAD/packages/redux-routine/README.md">documentation of <em>@wordpress/redux-routine</em></a> for more information.
+</details>
 
 #### `initialState`
 
@@ -164,7 +159,6 @@ Integrating an existing redux store with its own reducers, store enhancers and m
 _Example:_
 
 ```js
-import { mapValues } from 'lodash';
 import { register } from '@wordpress/data';
 import existingSelectors from './existing-app/selectors';
 import existingActions from './existing-app/actions';
@@ -172,6 +166,15 @@ import createStore from './existing-app/store';
 
 const reduxStore = createStore();
 
+const mapValues = ( obj, callback ) =>
+	Object.entries( obj ).reduce(
+		( acc, [ key, value ] ) => ( {
+			...acc,
+			[ key ]: callback( value ),
+		} ),
+		{}
+	);
+
 const boundSelectors = mapValues(
 	existingSelectors,
 	( selector ) =>
@@ -254,7 +257,7 @@ The data module shares many of the same [core principles](https://redux.js.org/i
 
 The [higher-order components](#higher-order-components) were created to complement this distinction. The intention with splitting `withSelect` and `withDispatch` — where in React Redux they are combined under `connect` as `mapStateToProps` and `mapDispatchToProps` arguments — is to more accurately reflect that dispatch is not dependent upon a subscription to state changes, and to allow for state-derived values to be used in `withDispatch` (via [higher-order component composition](https://github.com/WordPress/gutenberg/tree/HEAD/packages/compose/README.md)).
 
-The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [controls](#controls). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/).
+The data module also has built-in solutions for handling asynchronous side-effects, through [resolvers](#resolvers) and [thunks](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/thunks.md#thunks-can-be-async). These differ slightly from [standard redux async solutions](https://redux.js.org/advanced/async-actions) like [`redux-thunk`](https://github.com/gaearon/redux-thunk) or [`redux-saga`](https://redux-saga.js.org/).
 
 Specific implementation differences from Redux and React Redux:
 
@@ -271,8 +274,7 @@ Specific implementation differences from Redux and React Redux:
 
 ### AsyncModeProvider
 
-Context Provider Component used to switch the data module component rerendering
-between Sync and Async modes.
+Context Provider Component used to switch the data module component rerendering between Sync and Async modes.
 
 _Usage_
 
@@ -308,12 +310,11 @@ _Parameters_
 
 _Returns_
 
--   `WPComponent`: The component to be rendered.
+-   `Component`: The component to be rendered.
 
 ### combineReducers
 
-The combineReducers helper function turns an object whose values are different
-reducing functions into a single reducing function you can pass to registerReducer.
+The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to registerReducer.
 
 _Usage_
 
@@ -360,8 +361,7 @@ Undocumented declaration.
 
 ### createReduxStore
 
-Creates a data store descriptor for the provided Redux store configuration containing
-properties describing reducer, actions, selectors, controls and resolvers.
+Creates a data store descriptor for the provided Redux store configuration containing properties describing reducer, actions, selectors, controls and resolvers.
 
 _Usage_
 
@@ -387,8 +387,7 @@ _Returns_
 
 ### createRegistry
 
-Creates a new store registry, given an optional object of initial store
-configurations.
+Creates a new store registry, given an optional object of initial store configurations.
 
 _Parameters_
 
@@ -401,8 +400,7 @@ _Returns_
 
 ### createRegistryControl
 
-Creates a control function that takes additional curried argument with the `registry` object.
-While a regular control has signature
+Creates a control function that takes additional curried argument with the `registry` object. While a regular control has signature
 
 ```js
 ( action ) => iteratorOrPromise;
@@ -414,11 +412,9 @@ where the control works with the `action` that it's bound to, a registry control
 ( registry ) => ( action ) => iteratorOrPromise;
 ```
 
-A registry control is typically used to select data or dispatch an action to a registered
-store.
+A registry control is typically used to select data or dispatch an action to a registered store.
 
-When registering a control created with `createRegistryControl` with a store, the store
-knows which calling convention to use when executing the control.
+When registering a control created with `createRegistryControl` with a store, the store knows which calling convention to use when executing the control.
 
 _Parameters_
 
@@ -430,15 +426,13 @@ _Returns_
 
 ### createRegistrySelector
 
-Creates a selector function that takes additional curried argument with the
-registry `select` function. While a regular selector has signature
+Creates a selector function that takes additional curried argument with the registry `select` function. While a regular selector has signature
 
 ```js
 ( state, ...selectorArgs ) => result;
 ```
 
-that allows to select data from the store's `state`, a registry selector
-has signature:
+that allows to select data from the store's `state`, a registry selector has signature:
 
 ```js
 ( select ) =>
@@ -483,13 +477,28 @@ _Returns_
 
 -   `Function`: Registry selector that can be registered with a store.
 
+### createSelector
+
+Creates a memoized selector that caches the computed values according to the array of "dependants" and the selector parameters, and recomputes the values only when any of them changes.
+
+_Related_
+
+-   The documentation for the `rememo` package from which the `createSelector` function is reexported.
+
+_Parameters_
+
+-   _selector_ `Function`: Selector function that calculates a value from state and parameters.
+-   _getDependants_ `Function`: Function that returns an array of "dependant" objects.
+
+_Returns_
+
+-   `Function`: A memoized version of `selector` that caches the calculated return values.
+
 ### dispatch
 
-Given a store descriptor, returns an object of the store's action creators.
-Calling an action creator will cause it to be dispatched, updating the state value accordingly.
+Given a store descriptor, returns an object of the store's action creators. Calling an action creator will cause it to be dispatched, updating the state value accordingly.
 
-Note: Action creators returned by the dispatch will return a promise when
-they are called.
+Note: Action creators returned by the dispatch will return a promise when they are called.
 
 _Usage_
 
@@ -502,11 +511,11 @@ dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
+-   _storeNameOrDescriptor_ `StoreNameOrDescriptor`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
--   `Object`: Object containing the action creators.
+-   `DispatchReturn< StoreNameOrDescriptor >`: Object containing the action creators.
 
 ### plugins
 
@@ -570,11 +579,9 @@ _Returns_
 
 ### RegistryConsumer
 
-A custom react Context consumer exposing the provided `registry` to
-children components. Used along with the RegistryProvider.
+A custom react Context consumer exposing the provided `registry` to children components. Used along with the RegistryProvider.
 
-You can read more about the react context api here:
-<https://reactjs.org/docs/context.html#contextprovider>
+You can read more about the react context api here: <https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context>
 
 _Usage_
 
@@ -603,17 +610,13 @@ const App = ( { props } ) => {
 
 ### RegistryProvider
 
-A custom Context provider for exposing the provided `registry` to children
-components via a consumer.
+A custom Context provider for exposing the provided `registry` to children components via a consumer.
 
-See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for
-example.
+See <a name="#RegistryConsumer">RegistryConsumer</a> documentation for example.
 
 ### resolveSelect
 
-Given a store descriptor, returns an object containing the store's selectors pre-bound to state
-so that you only need to supply additional arguments, and modified so that they return promises
-that resolve to their eventual values, after any resolvers have ran.
+Given a store descriptor, returns an object containing the store's selectors pre-bound to state so that you only need to supply additional arguments, and modified so that they return promises that resolve to their eventual values, after any resolvers have ran.
 
 _Usage_
 
@@ -634,9 +637,7 @@ _Returns_
 
 ### select
 
-Given a store descriptor, returns an object of the store's selectors.
-The selector functions are been pre-bound to pass the current state automatically.
-As a consumer, you need only pass arguments of the selector, if applicable.
+Given a store descriptor, returns an object of the store's selectors. The selector functions are been pre-bound to pass the current state automatically. As a consumer, you need only pass arguments of the selector, if applicable.
 
 _Usage_
 
@@ -649,17 +650,17 @@ select( myCustomStore ).getPrice( 'hammer' );
 
 _Parameters_
 
--   _storeNameOrDescriptor_ `StoreDescriptor|string`: The store descriptor. The legacy calling convention of passing the store name is also supported.
+-   _storeNameOrDescriptor_ `string | T`: The store descriptor. The legacy calling convention of passing the store name is also supported.
 
 _Returns_
 
--   `Object`: Object containing the store's selectors.
+-   `CurriedSelectorsOf< T >`: Object containing the store's selectors.
 
 ### subscribe
 
-Given a listener function, the function will be called any time the state value
-of one of the registered stores has changed. This function returns a `unsubscribe`
-function used to stop the subscription.
+Given a listener function, the function will be called any time the state value of one of the registered stores has changed. If you specify the optional `storeNameOrDescriptor` parameter, the listener function will be called only on updates on that one specific registered store.
+
+This function returns an `unsubscribe` function used to stop the subscription.
 
 _Usage_
 
@@ -678,12 +679,11 @@ unsubscribe();
 _Parameters_
 
 -   _listener_ `Function`: Callback function.
+-   _storeNameOrDescriptor_ `string|StoreDescriptor?`: Optional store name.
 
 ### suspendSelect
 
-Given a store descriptor, returns an object containing the store's selectors pre-bound to state
-so that you only need to supply additional arguments, and modified so that they throw promises
-in case the selector is not resolved yet.
+Given a store descriptor, returns an object containing the store's selectors pre-bound to state so that you only need to supply additional arguments, and modified so that they throw promises in case the selector is not resolved yet.
 
 _Parameters_
 
@@ -695,9 +695,7 @@ _Returns_
 
 ### use
 
-Extends a registry to inherit functionality provided by a given plugin. A
-plugin is an object with properties aligning to that of a registry, merged
-to extend the default registry behavior.
+Extends a registry to inherit functionality provided by a given plugin. A plugin is an object with properties aligning to that of a registry, merged to extend the default registry behavior.
 
 _Parameters_
 
@@ -707,8 +705,7 @@ _Parameters_
 
 A custom react hook returning the current registry dispatch actions creators.
 
-Note: The component using this hook must be within the context of a
-RegistryProvider.
+Note: The component using this hook must be within the context of a RegistryProvider.
 
 _Usage_
 
@@ -717,8 +714,8 @@ the server via the `useSelect` hook to use in combination with the dispatch
 action.
 
 ```jsx
+import { useCallback } from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
 import { store as myCustomStore } from 'my-custom-store';
 
 function Button( { onClick, children } ) {
@@ -759,16 +756,11 @@ _Returns_
 
 A custom react hook exposing the registry context for use.
 
-This exposes the `registry` value provided via the
-<a href="#RegistryProvider">Registry Provider</a> to a component implementing
-this hook.
+This exposes the `registry` value provided via the <a href="#RegistryProvider">Registry Provider</a> to a component implementing this hook.
 
 It acts similarly to the `useContext` react hook.
 
-Note: Generally speaking, `useRegistry` is a low level hook that in most cases
-won't be needed for implementation. Most interactions with the `@wordpress/data`
-API can be performed via the `useSelect` hook, or the `withSelect` and
-`withDispatch` higher order components.
+Note: Generally speaking, `useRegistry` is a low level hook that in most cases won't be needed for implementation. Most interactions with the `@wordpress/data` API can be performed via the `useSelect` hook, or the `withSelect` and `withDispatch` higher order components.
 
 _Usage_
 
@@ -799,8 +791,7 @@ _Returns_
 
 Custom react hook for retrieving props from registered selectors.
 
-In general, this custom React hook follows the
-[rules of hooks](https://reactjs.org/docs/hooks-rules.html).
+In general, this custom React hook follows the [rules of hooks](https://react.dev/reference/rules/rules-of-hooks).
 
 _Usage_
 
@@ -863,22 +854,20 @@ _Returns_
 
 ### useSuspenseSelect
 
-A variant of the `useSelect` hook that has the same API, but will throw a
-suspense Promise if any of the called selectors is in an unresolved state.
+A variant of the `useSelect` hook that has the same API, but is a compatible Suspense-enabled data source.
 
 _Parameters_
 
--   _mapSelect_ `Function`: Function called on every state change. The returned value is exposed to the component using this hook. The function receives the `registry.suspendSelect` method as the first argument and the `registry` as the second one.
+-   _mapSelect_ `T`: Function called on every state change. The returned value is exposed to the component using this hook. The function receives the `registry.suspendSelect` method as the first argument and the `registry` as the second one.
 -   _deps_ `Array`: A dependency array used to memoize the `mapSelect` so that the same `mapSelect` is invoked on every state change unless the dependencies change.
 
 _Returns_
 
--   `Object`: Data object returned by the `mapSelect` function.
+-   `ReturnType<T>`: Data object returned by the `mapSelect` function.
 
 ### withDispatch
 
-Higher-order component used to add dispatch props using registered action
-creators.
+Higher-order component used to add dispatch props using registered action creators.
 
 _Usage_
 
@@ -962,25 +951,23 @@ _Parameters_
 
 _Returns_
 
--   `WPComponent`: Enhanced component with merged dispatcher props.
+-   `ComponentType`: Enhanced component with merged dispatcher props.
 
 ### withRegistry
 
-Higher-order component which renders the original component with the current
-registry context passed as its `registry` prop.
+Higher-order component which renders the original component with the current registry context passed as its `registry` prop.
 
 _Parameters_
 
--   _OriginalComponent_ `WPComponent`: Original component.
+-   _OriginalComponent_ `Component`: Original component.
 
 _Returns_
 
--   `WPComponent`: Enhanced component.
+-   `Component`: Enhanced component.
 
 ### withSelect
 
-Higher-order component used to inject state-derived props using registered
-selectors.
+Higher-order component used to inject state-derived props using registered selectors.
 
 _Usage_
 
@@ -1020,7 +1007,7 @@ _Parameters_
 
 _Returns_
 
--   `WPComponent`: Enhanced component with merged state data props.
+-   `ComponentType`: Enhanced component with merged state data props.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
@@ -1031,7 +1018,7 @@ As a response of `dispatch` calls, WordPress data based applications updates the
 -   The selectors are called with the update state.
 -   If the selectors return values that are different than the previous (strict equality), the component rerenders.
 
-As the application grows, this can become costful, so it's important to ensure that we avoid running both these if possible. One of these situations happen when an interaction requires multiple consisecutive `dispatch` calls in order to update the state properly. To avoid rerendering the components each time we call `dispatch`, we can wrap the sequential dispatch calls in `batch` which will ensure that the components only call selectors and rerender once at the end of the sequence.
+As the application grows, this can become costful, so it's important to ensure that we avoid running both these if possible. One of these situations happen when an interaction requires multiple consecutive `dispatch` calls in order to update the state properly. To avoid rerendering the components each time we call `dispatch`, we can wrap the sequential dispatch calls in `batch` which will ensure that the components only call selectors and rerender once at the end of the sequence.
 
 _Usage_
 
@@ -1053,6 +1040,185 @@ function Component() {
 }
 ```
 
+## Selectors
+
+The following selectors are available on the object returned by `wp.data.select( 'core' )`.
+
+_Example_
+
+```js
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+function Component() {
+	const result = useSelect( ( select ) => {
+		const query = { per_page: 20 };
+		const selectorArgs = [ 'postType', 'page', query ];
+
+		return {
+			pages: select( coreDataStore ).getEntityRecords( ...selectorArgs ),
+			hasStartedResolution: select( coreDataStore ).hasStartedResolution(
+				'getEntityRecords', // _selectorName_
+				selectorArgs
+			),
+			hasFinishedResolution: select(
+				coreDataStore
+			).hasFinishedResolution( 'getEntityRecords', selectorArgs ),
+			isResolving: select( coreDataStore ).isResolving(
+				'getEntityRecords',
+				selectorArgs
+			),
+		};
+	} );
+
+	if ( result.hasStartedResolution ) {
+		return <>Fetching data...</>;
+	}
+
+	if ( result.isResolving ) {
+		return (
+			<>
+				{
+					// show a spinner
+				 }
+			</>
+		);
+	}
+
+	if ( result.hasFinishedResolution ) {
+		return (
+			<>
+				{
+					// data is ready
+				 }
+			</>
+		);
+	}
+}
+```
+
+### hasFinishedResolution
+
+Returns true if resolution has completed for a given selector name, and arguments set.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _selectorName_ `string`: Selector name.
+-   _args_ `unknown[]?`: Arguments passed to selector.
+
+_Returns_
+
+-   `boolean`: Whether resolution has completed.
+
+### hasStartedResolution
+
+Returns true if resolution has already been triggered for a given selector name, and arguments set.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _selectorName_ `string`: Selector name.
+-   _args_ `unknown[]?`: Arguments passed to selector.
+
+_Returns_
+
+-   `boolean`: Whether resolution has been triggered.
+
+### isResolving
+
+Returns true if resolution has been triggered but has not yet completed for a given selector name, and arguments set.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _selectorName_ `string`: Selector name.
+-   _args_ `unknown[]?`: Arguments passed to selector.
+
+_Returns_
+
+-   `boolean`: Whether resolution is in progress.
+
+### Normalizing Selector Arguments
+
+In specific circumstances it may be necessary to normalize the arguments passed to a given _call_ of a selector/resolver pairing.
+
+Each resolver has [its resolution status cached in an internal state](https://github.com/WordPress/gutenberg/blob/e244388d8669618b76c966cc33d48df9156c2db6/packages/data/src/redux-store/metadata/reducer.ts#L39) where the [key is the arguments supplied to the selector](https://github.com/WordPress/gutenberg/blob/e244388d8669618b76c966cc33d48df9156c2db6/packages/data/src/redux-store/metadata/utils.ts#L48) at _call_ time.
+
+For example for a selector with a single argument, the related resolver would generate a cache key of: `[ 123 ]`.
+
+[This cache is used to determine the resolution status of a given resolver](https://github.com/WordPress/gutenberg/blob/e244388d8669618b76c966cc33d48df9156c2db6/packages/data/src/redux-store/metadata/selectors.js#L22-L29) which is used to [avoid unwanted additional invocations of resolvers](https://github.com/WordPress/gutenberg/blob/e244388d8669618b76c966cc33d48df9156c2db6/packages/data/src/redux-store/index.js#L469-L474) (which often undertake "expensive" operations such as network requests).
+
+As a result it's important that arguments remain _consistent_ when calling the selector. For example, by _default_ these two calls will not be cached using the same key, even though they are likely identical:
+
+```js
+// Arg as number
+getSomeDataById( 123 );
+
+// Arg as string
+getSomeDataById( '123' );
+```
+
+This is an opportunity to utilize the `__unstableNormalizeArgs` property to guarantee consistency by protecting callers from passing incorrect types.
+
+#### Example
+
+The _3rd_ argument of the following selector is intended to be a `Number`:
+
+```js
+const getItemsSelector = ( name, type, id ) => {
+	return state.items[ name ][ type ][ id ] || null;
+};
+```
+
+However, it is possible that the `id` parameter will be passed as a `String`. In this case, the `__unstableNormalizeArgs` method (property) can be defined on the _selector_ to coerce the arguments to the desired type even if they are provided "incorrectly":
+
+```js
+// Define normalization method.
+getItemsSelector.__unstableNormalizeArgs = ( args ) {
+	// "id" argument at the 2nd index
+	if (args[2] && typeof args[2] === 'string' ) {
+		args[2] === Number(args[2]);
+	}
+
+	return args;
+}
+```
+
+With this in place the following code will behave consistently:
+
+```js
+const getItemsSelector = ( name, type, id ) => {
+	// here 'id' is now guaranteed to be a number.
+	return state.items[ name ][ type ][ id ] || null;
+};
+
+const getItemsResolver = ( name, type, id ) => {
+	// 'id' is also guaranteed to be a number in the resolver.
+	return {};
+};
+
+registry.registerStore( 'store', {
+	// ...
+	selectors: {
+		getItems: getItemsSelector,
+	},
+	resolvers: {
+		getItems: getItemsResolver,
+	},
+} );
+
+// Call with correct number type.
+registry.select( 'store' ).getItems( 'foo', 'bar', 54 );
+
+// Call with the wrong string type, **but** here we have avoided an
+// wanted resolver call because '54' is guaranteed to have been
+// coerced to a number by the `__unstableNormalizeArgs` method.
+registry.select( 'store' ).getItems( 'foo', 'bar', '54' );
+```
+
+Ensuring consistency of arguments for a given selector call is [an important optimization to help improve performance in the data layer](https://github.com/WordPress/gutenberg/pull/52120). However, this type of problem can be usually be avoided by ensuring selectors don't use variable types for their arguments.
+
 ## Going further
 
 -   [What is WordPress Data?](https://unfoldingneurons.com/2020/what-is-wordpress-data/)
diff --git a/packages/data/package.json b/packages/data/package.json
index 8b14c1f75a6c72..ccb8f8591c0179 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "7.6.0",
+	"version": "10.13.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,31 +20,34 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/element": "file:../element",
-		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/priority-queue": "file:../priority-queue",
-		"@wordpress/redux-routine": "file:../redux-routine",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/compose": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"@wordpress/priority-queue": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/redux-routine": "*",
+		"deepmerge": "^4.3.0",
 		"equivalent-key-map": "^0.2.2",
 		"is-plain-object": "^5.0.0",
 		"is-promise": "^4.0.0",
-		"lodash": "^4.17.21",
-		"redux": "^4.1.2",
-		"turbo-combine-reducers": "^1.0.2",
+		"redux": "^5.0.1",
+		"rememo": "^4.0.2",
 		"use-memo-one": "^1.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/data/src/components/async-mode-provider/context.js b/packages/data/src/components/async-mode-provider/context.js
index fdaa203b1afb6e..fe0c8acc99333b 100644
--- a/packages/data/src/components/async-mode-provider/context.js
+++ b/packages/data/src/components/async-mode-provider/context.js
@@ -42,6 +42,6 @@ export const AsyncModeConsumer = Consumer;
  * It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
  *
  * @param {boolean} props.value Enable Async Mode.
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default Provider;
diff --git a/packages/data/src/components/registry-provider/context.js b/packages/data/src/components/registry-provider/context.js
index e784f4fd5c2810..04a24974a6ff25 100644
--- a/packages/data/src/components/registry-provider/context.js
+++ b/packages/data/src/components/registry-provider/context.js
@@ -17,7 +17,7 @@ const { Consumer, Provider } = Context;
  * children components. Used along with the RegistryProvider.
  *
  * You can read more about the react context api here:
- * https://reactjs.org/docs/context.html#contextprovider
+ * https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context
  *
  * @example
  * ```js
diff --git a/packages/data/src/components/use-dispatch/test/use-dispatch.js b/packages/data/src/components/use-dispatch/test/use-dispatch.js
index 24bf29c75ba9b9..c47339c94e0dd6 100644
--- a/packages/data/src/components/use-dispatch/test/use-dispatch.js
+++ b/packages/data/src/components/use-dispatch/test/use-dispatch.js
@@ -12,8 +12,6 @@ import createReduxStore from '../../../redux-store';
 import { createRegistry } from '../../../registry';
 import { RegistryProvider } from '../../registry-provider';
 
-jest.useRealTimers();
-
 describe( 'useDispatch', () => {
 	const counterStore = {
 		reducer: ( state = 0, action ) => {
diff --git a/packages/data/src/components/use-dispatch/use-dispatch-with-map.js b/packages/data/src/components/use-dispatch/use-dispatch-with-map.js
index e8ed87827206db..f6fce490a68871 100644
--- a/packages/data/src/components/use-dispatch/use-dispatch-with-map.js
+++ b/packages/data/src/components/use-dispatch/use-dispatch-with-map.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,29 +25,36 @@ import useRegistry from '../registry-provider/use-registry';
  */
 const useDispatchWithMap = ( dispatchMap, deps ) => {
 	const registry = useRegistry();
-	const currentDispatchMap = useRef( dispatchMap );
+	const currentDispatchMapRef = useRef( dispatchMap );
 
 	useIsomorphicLayoutEffect( () => {
-		currentDispatchMap.current = dispatchMap;
+		currentDispatchMapRef.current = dispatchMap;
 	} );
 
 	return useMemo( () => {
-		const currentDispatchProps = currentDispatchMap.current(
+		const currentDispatchProps = currentDispatchMapRef.current(
 			registry.dispatch,
 			registry
 		);
-		return mapValues( currentDispatchProps, ( dispatcher, propName ) => {
-			if ( typeof dispatcher !== 'function' ) {
-				// eslint-disable-next-line no-console
-				console.warn(
-					`Property ${ propName } returned from dispatchMap in useDispatchWithMap must be a function.`
-				);
-			}
-			return ( ...args ) =>
-				currentDispatchMap
-					.current( registry.dispatch, registry )
-					[ propName ]( ...args );
-		} );
+		return Object.fromEntries(
+			Object.entries( currentDispatchProps ).map(
+				( [ propName, dispatcher ] ) => {
+					if ( typeof dispatcher !== 'function' ) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`Property ${ propName } returned from dispatchMap in useDispatchWithMap must be a function.`
+						);
+					}
+					return [
+						propName,
+						( ...args ) =>
+							currentDispatchMapRef
+								.current( registry.dispatch, registry )
+								[ propName ]( ...args ),
+					];
+				}
+			)
+		);
 	}, [ registry, ...deps ] );
 };
 
diff --git a/packages/data/src/components/use-dispatch/use-dispatch.js b/packages/data/src/components/use-dispatch/use-dispatch.js
index 306939307be8ab..742fdc2a6e9654 100644
--- a/packages/data/src/components/use-dispatch/use-dispatch.js
+++ b/packages/data/src/components/use-dispatch/use-dispatch.js
@@ -5,7 +5,7 @@ import useRegistry from '../registry-provider/use-registry';
 
 /**
  * @typedef {import('../../types').StoreDescriptor<StoreConfig>} StoreDescriptor
- * @template StoreConfig
+ * @template {import('../../types').AnyConfig} StoreConfig
  */
 /**
  * @typedef {import('../../types').UseDispatchReturn<StoreNameOrDescriptor>} UseDispatchReturn
@@ -18,7 +18,7 @@ import useRegistry from '../registry-provider/use-registry';
  * Note: The component using this hook must be within the context of a
  * RegistryProvider.
  *
- * @template {undefined | string | StoreDescriptor<any>} [StoreNameOrDescriptor=undefined]
+ * @template {undefined | string | StoreDescriptor<any>} StoreNameOrDescriptor
  * @param {StoreNameOrDescriptor} [storeNameOrDescriptor] Optionally provide the name of the
  *                                                        store or its descriptor from which to
  *                                                        retrieve action creators. If not
@@ -31,8 +31,8 @@ import useRegistry from '../registry-provider/use-registry';
  * action.
  *
  * ```jsx
+ * import { useCallback } from 'react';
  * import { useDispatch, useSelect } from '@wordpress/data';
- * import { useCallback } from '@wordpress/element';
  * import { store as myCustomStore } from 'my-custom-store';
  *
  * function Button( { onClick, children } ) {
diff --git a/packages/data/src/components/use-select/index.js b/packages/data/src/components/use-select/index.js
index bc9d2f71bdedda..15a3c88d2d5543 100644
--- a/packages/data/src/components/use-select/index.js
+++ b/packages/data/src/components/use-select/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { useMemoOne } from 'use-memo-one';
-
 /**
  * WordPress dependencies
  */
@@ -11,11 +6,10 @@ import {
 	useRef,
 	useCallback,
 	useMemo,
-	useReducer,
+	useSyncExternalStore,
 	useDebugValue,
 } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { useIsomorphicLayoutEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -23,28 +17,224 @@ import { useIsomorphicLayoutEffect } from '@wordpress/compose';
 import useRegistry from '../registry-provider/use-registry';
 import useAsyncMode from '../async-mode-provider/use-async-mode';
 
-const noop = () => {};
 const renderQueue = createQueue();
 
 /**
  * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
- * @template C
+ * @template {import('../../types').AnyConfig} C
  */
 /**
  * @typedef {import('../../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
- * @template State,Actions,Selectors
+ * @template State
+ * @template {Record<string,import('../../types').ActionCreator>} Actions
+ * @template Selectors
  */
+/** @typedef {import('../../types').MapSelect} MapSelect */
 /**
  * @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
- * @template T
+ * @template {MapSelect|StoreDescriptor<any>} T
  */
-/** @typedef {import('../../types').MapSelect} MapSelect */
+
+function Store( registry, suspense ) {
+	const select = suspense ? registry.suspendSelect : registry.select;
+	const queueContext = {};
+	let lastMapSelect;
+	let lastMapResult;
+	let lastMapResultValid = false;
+	let lastIsAsync;
+	let subscriber;
+	let didWarnUnstableReference;
+	const storeStatesOnMount = new Map();
+
+	function getStoreState( name ) {
+		// If there's no store property (custom generic store), return an empty
+		// object. When comparing the state, the empty objects will cause the
+		// equality check to fail, setting `lastMapResultValid` to false.
+		return registry.stores[ name ]?.store?.getState?.() ?? {};
+	}
+
+	const createSubscriber = ( stores ) => {
+		// The set of stores the `subscribe` function is supposed to subscribe to. Here it is
+		// initialized, and then the `updateStores` function can add new stores to it.
+		const activeStores = [ ...stores ];
+
+		// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could
+		// be called multiple times to establish multiple subscriptions. That's why we need to
+		// keep a set of active subscriptions;
+		const activeSubscriptions = new Set();
+
+		function subscribe( listener ) {
+			// Maybe invalidate the value right after subscription was created.
+			// React will call `getValue` after subscribing, to detect store
+			// updates that happened in the interval between the `getValue` call
+			// during render and creating the subscription, which is slightly
+			// delayed. We need to ensure that this second `getValue` call will
+			// compute a fresh value only if any of the store states have
+			// changed in the meantime.
+			if ( lastMapResultValid ) {
+				for ( const name of activeStores ) {
+					if (
+						storeStatesOnMount.get( name ) !== getStoreState( name )
+					) {
+						lastMapResultValid = false;
+					}
+				}
+			}
+
+			storeStatesOnMount.clear();
+
+			const onStoreChange = () => {
+				// Invalidate the value on store update, so that a fresh value is computed.
+				lastMapResultValid = false;
+				listener();
+			};
+
+			const onChange = () => {
+				if ( lastIsAsync ) {
+					renderQueue.add( queueContext, onStoreChange );
+				} else {
+					onStoreChange();
+				}
+			};
+
+			const unsubs = [];
+			function subscribeStore( storeName ) {
+				unsubs.push( registry.subscribe( onChange, storeName ) );
+			}
+
+			for ( const storeName of activeStores ) {
+				subscribeStore( storeName );
+			}
+
+			activeSubscriptions.add( subscribeStore );
+
+			return () => {
+				activeSubscriptions.delete( subscribeStore );
+
+				for ( const unsub of unsubs.values() ) {
+					// The return value of the subscribe function could be undefined if the store is a custom generic store.
+					unsub?.();
+				}
+				// Cancel existing store updates that were already scheduled.
+				renderQueue.cancel( queueContext );
+			};
+		}
+
+		// Check if `newStores` contains some stores we're not subscribed to yet, and add them.
+		function updateStores( newStores ) {
+			for ( const newStore of newStores ) {
+				if ( activeStores.includes( newStore ) ) {
+					continue;
+				}
+
+				// New `subscribe` calls will subscribe to `newStore`, too.
+				activeStores.push( newStore );
+
+				// Add `newStore` to existing subscriptions.
+				for ( const subscription of activeSubscriptions ) {
+					subscription( newStore );
+				}
+			}
+		}
+
+		return { subscribe, updateStores };
+	};
+
+	return ( mapSelect, isAsync ) => {
+		function updateValue() {
+			// If the last value is valid, and the `mapSelect` callback hasn't changed,
+			// then we can safely return the cached value. The value can change only on
+			// store update, and in that case value will be invalidated by the listener.
+			if ( lastMapResultValid && mapSelect === lastMapSelect ) {
+				return lastMapResult;
+			}
+
+			const listeningStores = { current: null };
+			const mapResult = registry.__unstableMarkListeningStores(
+				() => mapSelect( select, registry ),
+				listeningStores
+			);
+
+			if ( process.env.NODE_ENV === 'development' ) {
+				if ( ! didWarnUnstableReference ) {
+					const secondMapResult = mapSelect( select, registry );
+					if ( ! isShallowEqual( mapResult, secondMapResult ) ) {
+						// eslint-disable-next-line no-console
+						console.warn(
+							`The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.`
+						);
+						didWarnUnstableReference = true;
+					}
+				}
+			}
+
+			if ( ! subscriber ) {
+				for ( const name of listeningStores.current ) {
+					storeStatesOnMount.set( name, getStoreState( name ) );
+				}
+				subscriber = createSubscriber( listeningStores.current );
+			} else {
+				subscriber.updateStores( listeningStores.current );
+			}
+
+			// If the new value is shallow-equal to the old one, keep the old one so
+			// that we don't trigger unwanted updates that do a `===` check.
+			if ( ! isShallowEqual( lastMapResult, mapResult ) ) {
+				lastMapResult = mapResult;
+			}
+			lastMapSelect = mapSelect;
+			lastMapResultValid = true;
+		}
+
+		function getValue() {
+			// Update the value in case it's been invalidated or `mapSelect` has changed.
+			updateValue();
+			return lastMapResult;
+		}
+
+		// When transitioning from async to sync mode, cancel existing store updates
+		// that have been scheduled, and invalidate the value so that it's freshly
+		// computed. It might have been changed by the update we just cancelled.
+		if ( lastIsAsync && ! isAsync ) {
+			lastMapResultValid = false;
+			renderQueue.cancel( queueContext );
+		}
+
+		updateValue();
+
+		lastIsAsync = isAsync;
+
+		// Return a pair of functions that can be passed to `useSyncExternalStore`.
+		return { subscribe: subscriber.subscribe, getValue };
+	};
+}
+
+function _useStaticSelect( storeName ) {
+	return useRegistry().select( storeName );
+}
+
+function _useMappingSelect( suspense, mapSelect, deps ) {
+	const registry = useRegistry();
+	const isAsync = useAsyncMode();
+	const store = useMemo(
+		() => Store( registry, suspense ),
+		[ registry, suspense ]
+	);
+
+	// These are "pass-through" dependencies from the parent hook,
+	// and the parent should catch any hook rule violations.
+	const selector = useCallback( mapSelect, deps );
+	const { subscribe, getValue } = store( selector, isAsync );
+	const result = useSyncExternalStore( subscribe, getValue, getValue );
+	useDebugValue( result );
+	return result;
+}
 
 /**
  * Custom react hook for retrieving props from registered selectors.
  *
  * In general, this custom React hook follows the
- * [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
+ * [rules of hooks](https://react.dev/reference/rules/rules-of-hooks).
  *
  * @template {MapSelect | StoreDescriptor<any>} T
  * @param {T}         mapSelect Function called on every state change. The returned value is
@@ -105,291 +295,45 @@ const renderQueue = createQueue();
  * @return {UseSelectReturn<T>} A custom react hook.
  */
 export default function useSelect( mapSelect, deps ) {
-	const hasMappingFunction = 'function' === typeof mapSelect;
-
-	// If we're recalling a store by its name or by
-	// its descriptor then we won't be caching the
-	// calls to `mapSelect` because we won't be calling it.
-	if ( ! hasMappingFunction ) {
-		deps = [];
-	}
-
-	// Because of the "rule of hooks" we have to call `useCallback`
-	// on every invocation whether or not we have a real function
-	// for `mapSelect`. we'll create this intermediate variable to
-	// fulfill that need and then reference it with our "real"
-	// `_mapSelect` if we can.
-	const callbackMapper = useCallback(
-		hasMappingFunction ? mapSelect : noop,
-		deps
-	);
-	const _mapSelect = hasMappingFunction ? callbackMapper : null;
-
-	const registry = useRegistry();
-	const isAsync = useAsyncMode();
-
-	const latestRegistry = useRef( registry );
-	const latestMapSelect = useRef();
-	const latestIsAsync = useRef( isAsync );
-	const latestMapOutput = useRef();
-	const latestMapOutputError = useRef();
-
-	// Keep track of the stores being selected in the _mapSelect function,
-	// and only subscribe to those stores later.
-	const listeningStores = useRef( [] );
-	const wrapSelect = useCallback(
-		( callback ) =>
-			registry.__unstableMarkListeningStores(
-				() => callback( registry.select, registry ),
-				listeningStores
-			),
-		[ registry ]
-	);
-
-	// Generate a "flag" for used in the effect dependency array.
-	// It's different than just using `mapSelect` since deps could be undefined,
-	// in that case, we would still want to memoize it.
-	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
-
-	let mapOutput;
-
-	let selectorRan = false;
-	if ( _mapSelect ) {
-		mapOutput = latestMapOutput.current;
-		const hasReplacedRegistry = latestRegistry.current !== registry;
-		const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
-		const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
-		const lastMapSelectFailed = !! latestMapOutputError.current;
-
-		if (
-			hasReplacedRegistry ||
-			hasReplacedMapSelect ||
-			hasLeftAsyncMode ||
-			lastMapSelectFailed
-		) {
-			try {
-				mapOutput = wrapSelect( _mapSelect );
-				selectorRan = true;
-			} catch ( error ) {
-				let errorMessage = `An error occurred while running 'mapSelect': ${ error.message }`;
-
-				if ( latestMapOutputError.current ) {
-					errorMessage += `\nThe error may be correlated with this previous error:\n`;
-					errorMessage += `${ latestMapOutputError.current.stack }\n\n`;
-					errorMessage += 'Original stack trace:';
-				}
-
-				// eslint-disable-next-line no-console
-				console.error( errorMessage );
-			}
-		}
-	}
-
-	useIsomorphicLayoutEffect( () => {
-		if ( ! hasMappingFunction ) {
-			return;
-		}
-
-		latestRegistry.current = registry;
-		latestMapSelect.current = _mapSelect;
-		latestIsAsync.current = isAsync;
-		if ( selectorRan ) {
-			latestMapOutput.current = mapOutput;
-		}
-		latestMapOutputError.current = undefined;
-	} );
-
-	// React can sometimes clear the `useMemo` cache.
-	// We use the cache-stable `useMemoOne` to avoid
-	// losing queues.
-	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
-	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
-	const isMounted = useRef( false );
-
-	useIsomorphicLayoutEffect( () => {
-		if ( ! hasMappingFunction ) {
-			return;
-		}
-
-		const onStoreChange = () => {
-			try {
-				const newMapOutput = wrapSelect( latestMapSelect.current );
-
-				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
-					return;
-				}
-				latestMapOutput.current = newMapOutput;
-			} catch ( error ) {
-				latestMapOutputError.current = error;
-			}
-			forceRender();
-		};
-
-		const onChange = () => {
-			if ( ! isMounted.current ) {
-				return;
-			}
-
-			if ( latestIsAsync.current ) {
-				renderQueue.add( queueContext, onStoreChange );
-			} else {
-				onStoreChange();
-			}
-		};
-
-		// Catch any possible state changes during mount before the subscription
-		// could be set.
-		onStoreChange();
-
-		const unsubscribers = listeningStores.current.map( ( storeName ) =>
-			registry.__unstableSubscribeStore( storeName, onChange )
+	// On initial call, on mount, determine the mode of this `useSelect` call
+	// and then never allow it to change on subsequent updates.
+	const staticSelectMode = typeof mapSelect !== 'function';
+	const staticSelectModeRef = useRef( staticSelectMode );
+
+	if ( staticSelectMode !== staticSelectModeRef.current ) {
+		const prevMode = staticSelectModeRef.current ? 'static' : 'mapping';
+		const nextMode = staticSelectMode ? 'static' : 'mapping';
+		throw new Error(
+			`Switching useSelect from ${ prevMode } to ${ nextMode } is not allowed`
 		);
+	}
 
-		isMounted.current = true;
-
-		return () => {
-			// The return value of the subscribe function could be undefined if the store is a custom generic store.
-			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
-			renderQueue.cancel( queueContext );
-			isMounted.current = false;
-		};
-		// If you're tempted to eliminate the spread dependencies below don't do it!
-		// We're passing these in from the calling function and want to make sure we're
-		// examining every individual value inside the `deps` array.
-	}, [ registry, wrapSelect, hasMappingFunction, depsChangedFlag ] );
-
-	useDebugValue( mapOutput );
-
-	return hasMappingFunction ? mapOutput : registry.select( mapSelect );
+	// `staticSelectMode` is not allowed to change during the hook instance's,
+	// lifetime, so the rules of hooks are not really violated.
+	return staticSelectMode
+		? _useStaticSelect( mapSelect )
+		: _useMappingSelect( false, mapSelect, deps );
 }
 
 /**
- * A variant of the `useSelect` hook that has the same API, but will throw a
- * suspense Promise if any of the called selectors is in an unresolved state.
+ * A variant of the `useSelect` hook that has the same API, but is a compatible
+ * Suspense-enabled data source.
  *
- * @param {Function} mapSelect Function called on every state change. The
- *                             returned value is exposed to the component
- *                             using this hook. The function receives the
- *                             `registry.suspendSelect` method as the first
- *                             argument and the `registry` as the second one.
- * @param {Array}    deps      A dependency array used to memoize the `mapSelect`
- *                             so that the same `mapSelect` is invoked on every
- *                             state change unless the dependencies change.
+ * @template {MapSelect} T
+ * @param {T}     mapSelect Function called on every state change. The
+ *                          returned value is exposed to the component
+ *                          using this hook. The function receives the
+ *                          `registry.suspendSelect` method as the first
+ *                          argument and the `registry` as the second one.
+ * @param {Array} deps      A dependency array used to memoize the `mapSelect`
+ *                          so that the same `mapSelect` is invoked on every
+ *                          state change unless the dependencies change.
  *
- * @return {Object} Data object returned by the `mapSelect` function.
+ * @throws {Promise} A suspense Promise that is thrown if any of the called
+ * selectors is in an unresolved state.
+ *
+ * @return {ReturnType<T>} Data object returned by the `mapSelect` function.
  */
 export function useSuspenseSelect( mapSelect, deps ) {
-	const _mapSelect = useCallback( mapSelect, deps );
-
-	const registry = useRegistry();
-	const isAsync = useAsyncMode();
-
-	const latestRegistry = useRef( registry );
-	const latestMapSelect = useRef();
-	const latestIsAsync = useRef( isAsync );
-	const latestMapOutput = useRef();
-	const latestMapOutputError = useRef();
-
-	// Keep track of the stores being selected in the `mapSelect` function,
-	// and only subscribe to those stores later.
-	const listeningStores = useRef( [] );
-	const wrapSelect = useCallback(
-		( callback ) =>
-			registry.__unstableMarkListeningStores(
-				() => callback( registry.suspendSelect, registry ),
-				listeningStores
-			),
-		[ registry ]
-	);
-
-	// Generate a "flag" for used in the effect dependency array.
-	// It's different than just using `mapSelect` since deps could be undefined,
-	// in that case, we would still want to memoize it.
-	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
-
-	let mapOutput = latestMapOutput.current;
-	let mapOutputError = latestMapOutputError.current;
-
-	const hasReplacedRegistry = latestRegistry.current !== registry;
-	const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
-	const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
-
-	let selectorRan = false;
-	if ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {
-		try {
-			mapOutput = wrapSelect( _mapSelect );
-			selectorRan = true;
-		} catch ( error ) {
-			mapOutputError = error;
-		}
-	}
-
-	useIsomorphicLayoutEffect( () => {
-		latestRegistry.current = registry;
-		latestMapSelect.current = _mapSelect;
-		latestIsAsync.current = isAsync;
-		if ( selectorRan ) {
-			latestMapOutput.current = mapOutput;
-		}
-		latestMapOutputError.current = mapOutputError;
-	} );
-
-	// React can sometimes clear the `useMemo` cache.
-	// We use the cache-stable `useMemoOne` to avoid
-	// losing queues.
-	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
-	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
-	const isMounted = useRef( false );
-
-	useIsomorphicLayoutEffect( () => {
-		const onStoreChange = () => {
-			try {
-				const newMapOutput = wrapSelect( latestMapSelect.current );
-
-				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
-					return;
-				}
-				latestMapOutput.current = newMapOutput;
-			} catch ( error ) {
-				latestMapOutputError.current = error;
-			}
-
-			forceRender();
-		};
-
-		const onChange = () => {
-			if ( ! isMounted.current ) {
-				return;
-			}
-
-			if ( latestIsAsync.current ) {
-				renderQueue.add( queueContext, onStoreChange );
-			} else {
-				onStoreChange();
-			}
-		};
-
-		// catch any possible state changes during mount before the subscription
-		// could be set.
-		onStoreChange();
-
-		const unsubscribers = listeningStores.current.map( ( storeName ) =>
-			registry.__unstableSubscribeStore( storeName, onChange )
-		);
-
-		isMounted.current = true;
-
-		return () => {
-			// The return value of the subscribe function could be undefined if the store is a custom generic store.
-			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
-			renderQueue.cancel( queueContext );
-			isMounted.current = false;
-		};
-	}, [ registry, wrapSelect, depsChangedFlag ] );
-
-	if ( mapOutputError ) {
-		throw mapOutputError;
-	}
-
-	return mapOutput;
+	return _useMappingSelect( true, mapSelect, deps );
 }
diff --git a/packages/data/src/components/use-select/test/index.js b/packages/data/src/components/use-select/test/index.js
index 511e05c3829dcd..3320f7d4638a59 100644
--- a/packages/data/src/components/use-select/test/index.js
+++ b/packages/data/src/components/use-select/test/index.js
@@ -6,7 +6,7 @@ import { act, render, fireEvent, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { Component, useState, useReducer } from '@wordpress/element';
+import { useLayoutEffect, useState, useReducer } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,7 +19,18 @@ import {
 } from '../../..';
 import useSelect from '..';
 
-jest.useRealTimers();
+function counterStore( initialCount = 0, step = 1 ) {
+	return {
+		reducer: ( state = initialCount, action ) =>
+			action.type === 'INC' ? state + step : state,
+		actions: {
+			inc: () => ( { type: 'INC' } ),
+		},
+		selectors: {
+			get: ( state ) => state,
+		},
+	};
+}
 
 describe( 'useSelect', () => {
 	let registry;
@@ -50,10 +61,7 @@ describe( 'useSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times expected
-		// - 1 for initial mount
-		// - 1 for after mount before subscription set.
-		expect( selectSpy ).toHaveBeenCalledTimes( 2 );
+		expect( selectSpy ).toHaveBeenCalledTimes( 1 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 		// Ensure expected state was rendered.
@@ -78,11 +86,11 @@ describe( 'useSelect', () => {
 
 		const { rerender } = render(
 			<RegistryProvider value={ registry }>
-				<TestComponent keyName="foo" change={ true } />
+				<TestComponent keyName="foo" change />
 			</RegistryProvider>
 		);
 
-		expect( selectSpyFoo ).toHaveBeenCalledTimes( 2 );
+		expect( selectSpyFoo ).toHaveBeenCalledTimes( 1 );
 		expect( selectSpyBar ).toHaveBeenCalledTimes( 0 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
@@ -96,7 +104,7 @@ describe( 'useSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( selectSpyFoo ).toHaveBeenCalledTimes( 2 );
+		expect( selectSpyFoo ).toHaveBeenCalledTimes( 1 );
 		expect( selectSpyBar ).toHaveBeenCalledTimes( 0 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 
@@ -110,15 +118,15 @@ describe( 'useSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( selectSpyFoo ).toHaveBeenCalledTimes( 2 );
-		expect( selectSpyBar ).toHaveBeenCalledTimes( 2 );
+		expect( selectSpyFoo ).toHaveBeenCalledTimes( 1 );
+		expect( selectSpyBar ).toHaveBeenCalledTimes( 1 );
 		expect( TestComponent ).toHaveBeenCalledTimes( 3 );
 
 		// Ensure expected state was rendered.
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'bar' );
 	} );
 
-	it( 'avoid calling nested listener after unmounted', async () => {
+	it( 'does not rerender a nested component that is to be unmounted', () => {
 		registry.registerStore( 'toggler', {
 			reducer: ( state = false, action ) =>
 				action.type === 'TOGGLE' ? ! state : state,
@@ -133,16 +141,16 @@ describe( 'useSelect', () => {
 		const mapSelect = ( select ) => select( 'toggler' ).get();
 
 		const mapSelectChild = jest.fn( mapSelect );
-		function Child() {
+		const Child = jest.fn( () => {
 			const show = useSelect( mapSelectChild, [] );
 			return show ? 'yes' : 'no';
-		}
+		} );
 
 		const mapSelectParent = jest.fn( mapSelect );
-		function Parent() {
+		const Parent = jest.fn( () => {
 			const show = useSelect( mapSelectParent, [] );
 			return show ? <Child /> : 'none';
-		}
+		} );
 
 		render(
 			<RegistryProvider value={ registry }>
@@ -152,35 +160,109 @@ describe( 'useSelect', () => {
 
 		// Initial render renders only parent and subscribes the parent to store.
 		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
-		expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 1 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 0 );
+		expect( Parent ).toHaveBeenCalledTimes( 1 );
+		expect( Child ).toHaveBeenCalledTimes( 0 );
 
-		// act() does batched updates internally, i.e., any scheduled setStates or effects
-		// will be executed only after the dispatch finishes. But we want to opt out of
-		// batched updates here. We want all the setStates to be done synchronously, as the
-		// store listeners are called. The async/await code is a trick to do it: do the
-		// dispatch in a different event loop tick, where the batched updates are no longer active.
-		await act( async () => {
-			await Promise.resolve();
+		act( () => {
 			registry.dispatch( 'toggler' ).toggle();
 		} );
 
 		// Child was rendered and subscribed to the store, as the _second_ subscription.
 		expect( screen.getByText( 'yes' ) ).toBeInTheDocument();
-		expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
-		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectChild ).toHaveBeenCalledTimes( 1 );
+		expect( Parent ).toHaveBeenCalledTimes( 2 );
+		expect( Child ).toHaveBeenCalledTimes( 1 );
 
-		await act( async () => {
-			await Promise.resolve();
+		act( () => {
 			registry.dispatch( 'toggler' ).toggle();
 		} );
 
 		// Check that child was unmounted without any extra state update being performed on it.
-		// I.e., `mapSelectChild` was never called again, and no "state update on an unmounted
-		// component" warning was triggered.
+		// I.e., `mapSelectChild` was called again, and state update was scheduled, we cannot
+		// avoid that, but the state update is never executed and doesn't do a rerender.
 		expect( screen.getByText( 'none' ) ).toBeInTheDocument();
-		expect( mapSelectParent ).toHaveBeenCalledTimes( 4 );
+		expect( mapSelectParent ).toHaveBeenCalledTimes( 3 );
 		expect( mapSelectChild ).toHaveBeenCalledTimes( 2 );
+		expect( Parent ).toHaveBeenCalledTimes( 3 );
+		expect( Child ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'incrementally subscribes to newly selected stores', () => {
+		registry.registerStore( 'store-main', counterStore() );
+		registry.registerStore( 'store-even', counterStore( 0, 2 ) );
+		registry.registerStore( 'store-odd', counterStore( 1, 2 ) );
+
+		const mapSelect = jest.fn( ( select ) => {
+			const first = select( 'store-main' ).get();
+			// select from other stores depending on whether main value is even or odd
+			const secondStore = first % 2 === 1 ? 'store-odd' : 'store-even';
+			const second = select( secondStore ).get();
+			return first + ':' + second;
+		} );
+
+		const TestComponent = jest.fn( () => {
+			const data = useSelect( mapSelect, [] );
+			return <div role="status">{ data }</div>;
+		} );
+
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 1 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 1 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:0' );
+
+		// check that increment in store-even triggers a render
+		act( () => {
+			registry.dispatch( 'store-even' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 2 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:2' );
+
+		// check that increment in store-odd doesn't trigger a render (not listening yet)
+		act( () => {
+			registry.dispatch( 'store-odd' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 2 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0:2' );
+
+		// check that increment in main store switches to store-odd
+		act( () => {
+			registry.dispatch( 'store-main' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 3 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 3 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:3' );
+
+		// check that increment in store-odd triggers a render
+		act( () => {
+			registry.dispatch( 'store-odd' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 4 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 4 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:5' );
+
+		// check that increment in store-even triggers a mapSelect call (still listening)
+		// but not a render (not used for selected value which doesn't change)
+		act( () => {
+			registry.dispatch( 'store-even' ).inc();
+		} );
+
+		expect( mapSelect ).toHaveBeenCalledTimes( 5 );
+		expect( TestComponent ).toHaveBeenCalledTimes( 4 );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1:5' );
 	} );
 
 	describe( 'rerenders as expected with various mapSelect return types', () => {
@@ -251,46 +333,26 @@ describe( 'useSelect', () => {
 				expect( screen.getByRole( 'status' ).dataset.d ).toBe(
 					JSON.stringify( valueB )
 				);
-				expect( mapSelectSpy ).toHaveBeenCalledTimes( 3 );
+				expect( mapSelectSpy ).toHaveBeenCalledTimes( 2 );
 			}
 		);
 	} );
 
 	describe( 're-calls the selector as few times as possible', () => {
-		const counterStore = {
-			actions: {
-				increment: () => ( { type: 'INCREMENT' } ),
-			},
-			reducer: ( state, action ) => {
-				if ( ! state ) {
-					return { counter: 0 };
-				}
-				if ( action?.type === 'INCREMENT' ) {
-					return { counter: state.counter + 1 };
-				}
-				return state;
-			},
-			selectors: {
-				getCounter: ( state ) => state.counter,
-			},
-		};
-
 		it( 'only calls the selectors it has selected', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1 = jest.fn();
 			const selectCount2 = jest.fn();
 
 			const TestComponent = jest.fn( () => {
 				const count1 = useSelect(
-					( select ) =>
-						selectCount1() || select( 'store-1' ).getCounter(),
+					( select ) => selectCount1() || select( 'store-1' ).get(),
 					[]
 				);
 				useSelect(
-					( select ) =>
-						selectCount2() || select( 'store-2' ).getCounter(),
+					( select ) => selectCount2() || select( 'store-2' ).get(),
 					[]
 				);
 
@@ -303,26 +365,26 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
-			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount1 ).toHaveBeenCalledTimes( 1 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 1 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
-			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
-			expect( selectCount2 ).toHaveBeenCalledTimes( 3 );
+			expect( selectCount1 ).toHaveBeenCalledTimes( 1 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
-			expect( selectCount1 ).toHaveBeenCalledTimes( 3 );
-			expect( selectCount2 ).toHaveBeenCalledTimes( 3 );
+			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 3 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
@@ -331,9 +393,9 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 'can subscribe to multiple stores at once', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
-			registry.registerStore( 'store-3', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
+			registry.registerStore( 'store-3', counterStore() );
 
 			const selectCount1And2 = jest.fn();
 
@@ -341,8 +403,8 @@ describe( 'useSelect', () => {
 				const { count1, count2 } = useSelect(
 					( select ) =>
 						selectCount1And2() || {
-							count1: select( 'store-1' ).getCounter(),
-							count2: select( 'store-2' ).getCounter(),
+							count1: select( 'store-1' ).get(),
+							count2: select( 'store-2' ).get(),
 						},
 					[]
 				);
@@ -360,28 +422,28 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount1And2 ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,0' );
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
-			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
+			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
 
 			act( () => {
-				registry.dispatch( 'store-3' ).increment();
+				registry.dispatch( 'store-3' ).inc();
 			} );
 
-			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
+			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0,1' );
 		} );
 
 		it( 're-calls the selector when deps changed', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
-			registry.registerStore( 'store-3', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
+			registry.registerStore( 'store-3', counterStore() );
 
 			let dep, setDep;
 			const selectCount1AndDep = jest.fn();
@@ -391,7 +453,7 @@ describe( 'useSelect', () => {
 				const state = useSelect(
 					( select ) =>
 						selectCount1AndDep() || {
-							count1: select( 'store-1' ).getCounter(),
+							count1: select( 'store-1' ).get(),
 							dep,
 						},
 					[ dep ]
@@ -410,7 +472,7 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:0,dep:0'
 			);
@@ -419,63 +481,40 @@ describe( 'useSelect', () => {
 				setDep( 1 );
 			} );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 4 );
+			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:0,dep:1'
 			);
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 5 );
+			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count:1,dep:1'
 			);
 		} );
 
-		it( 'captures state changes scheduled between render and effect', () => {
-			registry.registerStore( 'store-1', counterStore );
-
-			class ChildComponent extends Component {
-				componentDidUpdate( prevProps ) {
-					if (
-						this.props.childShouldDispatch &&
-						this.props.childShouldDispatch !==
-							prevProps.childShouldDispatch
-					) {
-						registry.dispatch( 'store-1' ).increment();
-					}
-				}
+		it( 'captures state changes scheduled between render and subscription', () => {
+			registry.registerStore( 'store-1', counterStore() );
 
-				render() {
-					return null;
-				}
-			}
-
-			const selectCount1AndDep = jest.fn( ( select ) => ( {
-				count1: select( 'store-1' ).getCounter(),
+			const selectCount1 = jest.fn( ( select ) => ( {
+				count1: select( 'store-1' ).get(),
 			} ) );
 
-			const TestComponent = () => {
-				const [ childShouldDispatch, setChildShouldDispatch ] =
-					useState( false );
-				const state = useSelect( selectCount1AndDep, [] );
+			const TestComponent = jest.fn( () => {
+				const { count1 } = useSelect( selectCount1, [] );
 
-				return (
-					<>
-						<div role="status">count1:{ state.count1 }</div>
-						<ChildComponent
-							childShouldDispatch={ childShouldDispatch }
-						/>
-						<button
-							onClick={ () => setChildShouldDispatch( true ) }
-						>
-							triggerChildDispatch
-						</button>
-					</>
-				);
-			};
+				// Increment the store value from 0 to 1 after render and before subscription
+				useLayoutEffect( () => {
+					if ( count1 === 0 ) {
+						registry.dispatch( 'store-1' ).inc();
+					}
+				}, [ count1 ] );
+
+				return <div role="status">count1:{ count1 }</div>;
+			} );
 
 			render(
 				<RegistryProvider value={ registry }>
@@ -483,30 +522,93 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			fireEvent.click( screen.getByText( 'triggerChildDispatch' ) );
+			// One select on initial render.
+			// There's a second selector call on the second render, but that one returns a memoized value.
+			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
 
-			expect( selectCount1AndDep ).toHaveBeenCalledTimes( 3 );
+			// Initial render and second render after counter increment (which is expected to be detected).
+			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
+
+			// Finally rendered with the incremented counter's value.
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:1'
 			);
 		} );
 
+		it( 'captures state changes scheduled between render and effect after selector change', () => {
+			registry.registerStore( 'names', {
+				reducer: ( state = {}, action ) => {
+					if ( action.type === 'SET_NAME' ) {
+						return {
+							...state,
+							[ action.id ]: action.name,
+						};
+					}
+					return state;
+				},
+				actions: {
+					setName: ( id, name ) => ( { type: 'SET_NAME', id, name } ),
+				},
+				selectors: {
+					getName: ( state, id ) => state[ id ] ?? 'null',
+				},
+			} );
+
+			const renderedItems = [];
+
+			function TestComponent() {
+				const [ blockId, setBlockId ] = useState( 1 );
+
+				const name = useSelect(
+					( select ) => select( 'names' ).getName( blockId ),
+					[ blockId ]
+				);
+
+				// Change name of block 2. The store listener will still use the old selector
+				// for block 1, because a new one will be stored by an effect a moment later,
+				// but we're testing that it still won't miss the update, because one more check
+				// will happen in that effect.
+				useLayoutEffect( () => {
+					if ( blockId === 2 ) {
+						registry.dispatch( 'names' ).setName( 2, 'new2' );
+					}
+				}, [ blockId ] );
+
+				renderedItems.push( name );
+
+				return (
+					<button onClick={ () => setBlockId( 2 ) }>
+						change-block
+					</button>
+				);
+			}
+
+			render(
+				<RegistryProvider value={ registry }>
+					<TestComponent />
+				</RegistryProvider>
+			);
+			expect( renderedItems ).toEqual( [ 'null' ] );
+
+			fireEvent.click( screen.getByRole( 'button' ) );
+			// After click, there are two new renders:
+			// 1. With of block 2, after state update of `blockId` from 1 to 2
+			// 2. After dispatching an action to change 2's name to `new2`
+			expect( renderedItems ).toEqual( [ 'null', 'null', 'new2' ] );
+		} );
+
 		it( 'handles registry selectors', () => {
 			const getCount1And2 = createRegistrySelector(
 				( select ) => ( state ) => ( {
-					count1: state.counter,
-					count2: select( 'store-2' ).getCounter(),
+					count1: state,
+					count2: select( 'store-2' ).get(),
 				} )
 			);
 
-			registry.registerStore( 'store-1', {
-				...counterStore,
-				selectors: {
-					...counterStore.selectors,
-					getCount1And2,
-				},
-			} );
-			registry.registerStore( 'store-2', counterStore );
+			const store1Spec = counterStore();
+			Object.assign( store1Spec.selectors, { getCount1And2 } );
+			registry.registerStore( 'store-1', store1Spec );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1And2 = jest.fn();
 
@@ -531,24 +633,24 @@ describe( 'useSelect', () => {
 				</RegistryProvider>
 			);
 
-			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount1And2 ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:0,count2:0'
 			);
 
 			act( () => {
-				registry.dispatch( 'store-2' ).increment();
+				registry.dispatch( 'store-2' ).inc();
 			} );
 
-			expect( selectCount1And2 ).toHaveBeenCalledTimes( 3 );
+			expect( selectCount1And2 ).toHaveBeenCalledTimes( 2 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 				'count1:0,count2:1'
 			);
 		} );
 
 		it( 'handles conditional statements in selectors', () => {
-			registry.registerStore( 'store-1', counterStore );
-			registry.registerStore( 'store-2', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
+			registry.registerStore( 'store-2', counterStore() );
 
 			const selectCount1 = jest.fn();
 			const selectCount2 = jest.fn();
@@ -562,13 +664,11 @@ describe( 'useSelect', () => {
 					( select ) => {
 						if ( shouldSelectCount1 ) {
 							selectCount1();
-							select( 'store-1' ).getCounter();
-							return 'count1';
+							return 'count1:' + select( 'store-1' ).get();
 						}
 
 						selectCount2();
-						select( 'store-2' ).getCounter();
-						return 'count2';
+						return 'count2:' + select( 'store-2' ).get();
 					},
 					[ shouldSelectCount1 ]
 				);
@@ -576,7 +676,7 @@ describe( 'useSelect', () => {
 				return (
 					<>
 						<div role="status">{ state }</div>
-						<button onClick={ toggle }>Toggle</button>
+						<button onClick={ toggle }>Open</button>
 					</>
 				);
 			} );
@@ -588,31 +688,42 @@ describe( 'useSelect', () => {
 			);
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 0 );
-			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
-				'count2'
+				'count2:0'
 			);
 
-			screen.getByText( 'Toggle' ).click();
+			act( () => screen.getByText( 'Open' ).click() );
+
+			expect( selectCount1 ).toHaveBeenCalledTimes( 1 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 1 );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
+				'count1:0'
+			);
+
+			// Verify that the component subscribed to store-1 after selected from
+			act( () => {
+				registry.dispatch( 'store-1' ).inc();
+			} );
 
 			expect( selectCount1 ).toHaveBeenCalledTimes( 2 );
-			expect( selectCount2 ).toHaveBeenCalledTimes( 2 );
+			expect( selectCount2 ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
-				'count1'
+				'count1:1'
 			);
 		} );
 
 		it( "handles subscriptions to the parent's stores", () => {
-			registry.registerStore( 'parent-store', counterStore );
+			registry.registerStore( 'parent-store', counterStore() );
 
 			const subRegistry = createRegistry( {}, registry );
-			subRegistry.registerStore( 'child-store', counterStore );
+			subRegistry.registerStore( 'child-store', counterStore() );
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) => ( {
-						parentCount: select( 'parent-store' ).getCounter(),
-						childCount: select( 'child-store' ).getCounter(),
+						parentCount: select( 'parent-store' ).get(),
+						childCount: select( 'child-store' ).get(),
 					} ),
 					[]
 				);
@@ -637,7 +748,7 @@ describe( 'useSelect', () => {
 			);
 
 			act( () => {
-				registry.dispatch( 'parent-store' ).increment();
+				registry.dispatch( 'parent-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
@@ -646,13 +757,13 @@ describe( 'useSelect', () => {
 		} );
 
 		it( 'handles non-existing stores', () => {
-			registry.registerStore( 'store-1', counterStore );
+			registry.registerStore( 'store-1', counterStore() );
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) => ( {
-						count1: select( 'store-1' ).getCounter(),
-						count2: select( 'store-2' )?.getCounter() ?? 'blank',
+						count1: select( 'store-1' ).get(),
+						count2: select( 'store-2' )?.get() ?? 'blank',
 					} ),
 					[]
 				);
@@ -675,7 +786,7 @@ describe( 'useSelect', () => {
 			);
 
 			act( () => {
-				registry.dispatch( 'store-1' ).increment();
+				registry.dispatch( 'store-1' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent(
@@ -690,8 +801,7 @@ describe( 'useSelect', () => {
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) =>
-						select( 'not-yet-registered-store' )?.getCounter() ??
-						'blank',
+						select( 'not-yet-registered-store' )?.get() ?? 'blank',
 					[]
 				);
 
@@ -709,7 +819,7 @@ describe( 'useSelect', () => {
 			act( () => {
 				registry.registerStore(
 					'not-yet-registered-store',
-					counterStore
+					counterStore()
 				);
 			} );
 
@@ -717,7 +827,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
-				registry.dispatch( 'not-yet-registered-store' ).increment();
+				registry.dispatch( 'not-yet-registered-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -732,9 +842,8 @@ describe( 'useSelect', () => {
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
 					( select ) =>
-						select(
-							'not-yet-registered-child-store'
-						)?.getCounter() ?? 'blank',
+						select( 'not-yet-registered-child-store' )?.get() ??
+						'blank',
 					[]
 				);
 
@@ -754,7 +863,7 @@ describe( 'useSelect', () => {
 			act( () => {
 				registry.registerStore(
 					'not-yet-registered-child-store',
-					counterStore
+					counterStore()
 				);
 			} );
 
@@ -762,9 +871,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'blank' );
 
 			act( () => {
-				registry
-					.dispatch( 'not-yet-registered-child-store' )
-					.increment();
+				registry.dispatch( 'not-yet-registered-child-store' ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -781,11 +888,11 @@ describe( 'useSelect', () => {
 					let counter = 0;
 
 					const selectors = {
-						getCounter: () => counter,
+						get: () => counter,
 					};
 
 					const actions = {
-						increment: () => {
+						inc: () => {
 							counter += 1;
 							storeChanged();
 						},
@@ -809,7 +916,7 @@ describe( 'useSelect', () => {
 
 			const TestComponent = jest.fn( () => {
 				const state = useSelect(
-					( select ) => select( customStore ).getCounter(),
+					( select ) => select( customStore ).get(),
 					[]
 				);
 
@@ -825,7 +932,7 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			act( () => {
-				registry.dispatch( customStore ).increment();
+				registry.dispatch( customStore ).inc();
 			} );
 
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
@@ -835,25 +942,8 @@ describe( 'useSelect', () => {
 	} );
 
 	describe( 'async mode', () => {
-		function registerCounterStore( reg, initialCount = 0 ) {
-			reg.registerStore( 'counter', {
-				reducer: ( state = initialCount, action ) => {
-					if ( action.type === 'INCREMENT' ) {
-						return state + 1;
-					}
-					return state;
-				},
-				actions: {
-					inc: () => ( { type: 'INCREMENT' } ),
-				},
-				selectors: {
-					get: ( state ) => state,
-				},
-			} );
-		}
-
 		beforeEach( () => {
-			registerCounterStore( registry );
+			registry.registerStore( 'counter', counterStore() );
 		} );
 
 		it( 'renders with async mode', async () => {
@@ -867,15 +957,15 @@ describe( 'useSelect', () => {
 			} );
 
 			render(
-				<AsyncModeProvider value={ true }>
+				<AsyncModeProvider value>
 					<RegistryProvider value={ registry }>
 						<TestComponent />
 					</RegistryProvider>
 				</AsyncModeProvider>
 			);
 
-			// initial render + missed update catcher in subscribing effect
-			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
+			// initial render
+			expect( selectSpy ).toHaveBeenCalledTimes( 1 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 
 			// Ensure expected state was rendered.
@@ -886,12 +976,12 @@ describe( 'useSelect', () => {
 			} );
 
 			// still not called right after increment
-			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
+			expect( selectSpy ).toHaveBeenCalledTimes( 1 );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
 
 			expect( await screen.findByText( 1 ) ).toBeInTheDocument();
 
-			expect( selectSpy ).toHaveBeenCalledTimes( 3 );
+			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 
@@ -914,7 +1004,7 @@ describe( 'useSelect', () => {
 				</AsyncModeProvider>
 			);
 
-			const { rerender } = render( <App async={ true } /> );
+			const { rerender } = render( <App async /> );
 
 			// Ensure expected state was rendered.
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '0' );
@@ -933,9 +1023,8 @@ describe( 'useSelect', () => {
 			// Ensure the async update was flushed during the rerender.
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '1' );
 
-			// initial render + subscription check + rerender with isAsync=false
-			expect( selectSpy ).toHaveBeenCalledTimes( 3 );
 			// initial render + rerender with isAsync=false
+			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 
@@ -955,7 +1044,7 @@ describe( 'useSelect', () => {
 			} );
 
 			const App = ( { variant } ) => (
-				<AsyncModeProvider value={ true }>
+				<AsyncModeProvider value>
 					<RegistryProvider value={ registry }>
 						<TestComponent variant={ variant } />
 					</RegistryProvider>
@@ -984,7 +1073,7 @@ describe( 'useSelect', () => {
 			// Give the async update time to run in case it wasn't cancelled
 			await new Promise( setImmediate );
 
-			expect( selectA ).toHaveBeenCalledTimes( 2 );
+			expect( selectA ).toHaveBeenCalledTimes( 1 );
 			expect( selectB ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
@@ -1000,7 +1089,7 @@ describe( 'useSelect', () => {
 			} );
 
 			const App = () => (
-				<AsyncModeProvider value={ true }>
+				<AsyncModeProvider value>
 					<RegistryProvider value={ registry }>
 						<TestComponent />
 					</RegistryProvider>
@@ -1027,13 +1116,13 @@ describe( 'useSelect', () => {
 			await new Promise( setImmediate );
 
 			// only the initial render, no state updates
-			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
+			expect( selectSpy ).toHaveBeenCalledTimes( 1 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 1 );
 		} );
 
 		it( 'cancels scheduled updates when registry changes', async () => {
 			const registry2 = createRegistry();
-			registerCounterStore( registry2, 100 );
+			registry2.registerStore( 'counter', counterStore( 100 ) );
 
 			const selectSpy = jest.fn( ( select ) =>
 				select( 'counter' ).get()
@@ -1045,7 +1134,7 @@ describe( 'useSelect', () => {
 			} );
 
 			const App = ( { reg } ) => (
-				<AsyncModeProvider value={ true }>
+				<AsyncModeProvider value>
 					<RegistryProvider value={ reg }>
 						<TestComponent />
 					</RegistryProvider>
@@ -1070,22 +1159,14 @@ describe( 'useSelect', () => {
 			await new Promise( setImmediate );
 
 			// initial render + registry change rerender, no state updates
-			expect( selectSpy ).toHaveBeenCalledTimes( 4 );
+			expect( selectSpy ).toHaveBeenCalledTimes( 2 );
 			expect( TestComponent ).toHaveBeenCalledTimes( 2 );
 		} );
 	} );
 
 	describe( 'usage without dependencies array', () => {
-		function registerStore( name, initial ) {
-			registry.registerStore( name, {
-				reducer: ( s = initial, a ) => ( a.type === 'inc' ? s + 1 : s ),
-				actions: { inc: () => ( { type: 'inc' } ) },
-				selectors: { get: ( s ) => s },
-			} );
-		}
-
 		it( 'does not memoize the callback when there are no deps', () => {
-			registerStore( 'store', 1 );
+			registry.registerStore( 'store', counterStore( 1 ) );
 
 			const Status = ( { multiple } ) => {
 				const count = useSelect(
@@ -1109,9 +1190,9 @@ describe( 'useSelect', () => {
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '2' );
 		} );
 
-		it( 'subscribes only stores used by the initial callback', () => {
-			registerStore( 'counter-1', 1 );
-			registerStore( 'counter-2', 10 );
+		it( 'resubscribes when the set of selected stores changes', () => {
+			registry.registerStore( 'counter-1', counterStore( 1 ) );
+			registry.registerStore( 'counter-2', counterStore( 10 ) );
 
 			const Status = ( { store } ) => {
 				const count = useSelect( ( select ) => select( store ).get() );
@@ -1138,11 +1219,41 @@ describe( 'useSelect', () => {
 			rerender( <App store="counter-2" /> );
 			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
 
-			// update from counter-2 is ignored because component is subcribed only to counter-1
+			// update from counter-2 is processed because component has subscribed to counter-2
 			act( () => {
 				registry.dispatch( 'counter-2' ).inc();
 			} );
-			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
+			expect( screen.getByRole( 'status' ) ).toHaveTextContent( '11' );
+		} );
+	} );
+
+	describe( 'static store selection mode', () => {
+		it( 'can read the current value from store', () => {
+			registry.registerStore( 'testStore', counterStore() );
+
+			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 );
 		} );
 	} );
 } );
diff --git a/packages/data/src/components/use-select/test/suspense.js b/packages/data/src/components/use-select/test/suspense.js
index 032db07bdd1bdb..de215c297df018 100644
--- a/packages/data/src/components/use-select/test/suspense.js
+++ b/packages/data/src/components/use-select/test/suspense.js
@@ -14,8 +14,6 @@ import {
 } from '@wordpress/data';
 import { Component, Suspense } from '@wordpress/element';
 
-jest.useRealTimers();
-
 function createRegistryWithStore() {
 	const initialState = {
 		prefix: 'pre-',
@@ -139,10 +137,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;
 			}
 		}
 
@@ -161,4 +160,76 @@ describe( 'useSuspenseSelect', () => {
 		expect( label ).toHaveTextContent( 'resolution failed' );
 		expect( console ).toHaveErrored();
 	} );
+
+	it( 'independent resolutions do not cause unrelated rerenders', async () => {
+		const store = createReduxStore( 'test', {
+			reducer: ( state = {}, action ) => {
+				switch ( action.type ) {
+					case 'RECEIVE':
+						return { ...state, [ action.endpoint ]: action.data };
+					default:
+						return state;
+				}
+			},
+			selectors: {
+				getData: ( state, endpoint ) => state[ endpoint ],
+			},
+			resolvers: {
+				getData:
+					( endpoint ) =>
+					async ( { dispatch } ) => {
+						const delay = endpoint === 'slow' ? 30 : 10;
+						await new Promise( ( r ) =>
+							setTimeout( () => r(), delay )
+						);
+						dispatch( {
+							type: 'RECEIVE',
+							endpoint,
+							data: endpoint,
+						} );
+					},
+			},
+		} );
+
+		const registry = createRegistry();
+		registry.register( store );
+
+		const FastUI = jest.fn( () => {
+			const data = useSuspenseSelect(
+				( select ) => select( store ).getData( 'fast' ),
+				[]
+			);
+			return <div aria-label="fast loaded">{ data }</div>;
+		} );
+
+		const SlowUI = jest.fn( () => {
+			const data = useSuspenseSelect(
+				( select ) => select( store ).getData( 'slow' ),
+				[]
+			);
+			return <div aria-label="slow loaded">{ data }</div>;
+		} );
+
+		const App = () => (
+			<RegistryProvider value={ registry }>
+				<Suspense fallback="fast loading">
+					<FastUI />
+				</Suspense>
+				<Suspense fallback="slow loading">
+					<SlowUI />
+				</Suspense>
+			</RegistryProvider>
+		);
+
+		render( <App /> );
+
+		const fastLabel = await screen.findByLabelText( 'fast loaded' );
+		expect( fastLabel ).toHaveTextContent( 'fast' );
+
+		const slowLabel = await screen.findByLabelText( 'slow loaded' );
+		expect( slowLabel ).toHaveTextContent( 'slow' );
+
+		expect( FastUI ).toHaveBeenCalledTimes( 2 );
+		expect( SlowUI ).toHaveBeenCalledTimes( 2 );
+	} );
 } );
diff --git a/packages/data/src/components/with-dispatch/index.js b/packages/data/src/components/with-dispatch/index.js
index 4df2fd1b518486..cc67c8d9806375 100644
--- a/packages/data/src/components/with-dispatch/index.js
+++ b/packages/data/src/components/with-dispatch/index.js
@@ -8,6 +8,8 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  */
 import { useDispatchWithMap } from '../use-dispatch';
 
+/** @typedef {import('react').ComponentType} ComponentType */
+
 /**
  * Higher-order component used to add dispatch props using registered action
  * creators.
@@ -87,7 +89,7 @@ import { useDispatchWithMap } from '../use-dispatch';
  * returns an object with the same keys. For example, it should not contain
  * conditions under which a different value would be returned.
  *
- * @return {WPComponent} Enhanced component with merged dispatcher props.
+ * @return {ComponentType} Enhanced component with merged dispatcher props.
  */
 const withDispatch = ( mapDispatchToProps ) =>
 	createHigherOrderComponent(
diff --git a/packages/data/src/components/with-dispatch/test/index.js b/packages/data/src/components/with-dispatch/test/index.js
index ebdba658caf820..6bcda99ba9c0f0 100644
--- a/packages/data/src/components/with-dispatch/test/index.js
+++ b/packages/data/src/components/with-dispatch/test/index.js
@@ -16,8 +16,6 @@ import withDispatch from '../';
 import { createRegistry } from '../../../registry';
 import { RegistryProvider } from '../../registry-provider';
 
-jest.useRealTimers();
-
 describe( 'withDispatch', () => {
 	const storeOptions = {
 		reducer: ( state = 0, action ) => {
@@ -60,7 +58,9 @@ describe( 'withDispatch', () => {
 					} );
 				},
 			};
-		} )( ( props ) => <Button onClick={ props.increment } /> );
+		} )( ( props ) => (
+			<Button __next40pxDefaultSize onClick={ props.increment } />
+		) );
 
 		const { rerender } = render(
 			<RegistryProvider value={ registry }>
@@ -78,7 +78,7 @@ describe( 'withDispatch', () => {
 
 		// Function value reference should not have changed in props update.
 		// The spy method is only called during inital render.
-		expect( ButtonSpy ).toBeCalledTimes( 1 );
+		expect( ButtonSpy ).toHaveBeenCalledTimes( 1 );
 
 		await user.click( screen.getByRole( 'button' ) );
 		expect( registry.select( 'counter' ).getCount() ).toBe( 2 );
diff --git a/packages/data/src/components/with-registry/index.js b/packages/data/src/components/with-registry/index.js
index a5a6ce9503f885..4ccd38ed398d73 100644
--- a/packages/data/src/components/with-registry/index.js
+++ b/packages/data/src/components/with-registry/index.js
@@ -12,19 +12,18 @@ import { RegistryConsumer } from '../registry-provider';
  * Higher-order component which renders the original component with the current
  * registry context passed as its `registry` prop.
  *
- * @param {WPComponent} OriginalComponent Original component.
+ * @param {Component} OriginalComponent Original component.
  *
- * @return {WPComponent} Enhanced component.
+ * @return {Component} Enhanced component.
  */
 const withRegistry = createHigherOrderComponent(
-	( OriginalComponent ) => ( props ) =>
-		(
-			<RegistryConsumer>
-				{ ( registry ) => (
-					<OriginalComponent { ...props } registry={ registry } />
-				) }
-			</RegistryConsumer>
-		),
+	( OriginalComponent ) => ( props ) => (
+		<RegistryConsumer>
+			{ ( registry ) => (
+				<OriginalComponent { ...props } registry={ registry } />
+			) }
+		</RegistryConsumer>
+	),
 	'withRegistry'
 );
 
diff --git a/packages/data/src/components/with-select/index.js b/packages/data/src/components/with-select/index.js
index cf59ec86f5d1a8..12a56b70da2b65 100644
--- a/packages/data/src/components/with-select/index.js
+++ b/packages/data/src/components/with-select/index.js
@@ -8,6 +8,8 @@ import { createHigherOrderComponent, pure } from '@wordpress/compose';
  */
 import useSelect from '../use-select';
 
+/** @typedef {import('react').ComponentType} ComponentType */
+
 /**
  * Higher-order component used to inject state-derived props using registered
  * selectors.
@@ -46,7 +48,7 @@ import useSelect from '../use-select';
  * component and update automatically if the price of a hammer ever changes in
  * the store.
  *
- * @return {WPComponent} Enhanced component with merged state data props.
+ * @return {ComponentType} Enhanced component with merged state data props.
  */
 const withSelect = ( mapSelectToProps ) =>
 	createHigherOrderComponent(
diff --git a/packages/data/src/components/with-select/test/index.js b/packages/data/src/components/with-select/test/index.js
index 491be6ddfcd5fc..fe798354cba20d 100644
--- a/packages/data/src/components/with-select/test/index.js
+++ b/packages/data/src/components/with-select/test/index.js
@@ -18,8 +18,6 @@ import withDispatch from '../../with-dispatch';
 import { createRegistry } from '../../../registry';
 import { RegistryProvider } from '../../registry-provider';
 
-jest.useRealTimers();
-
 describe( 'withSelect', () => {
 	it( 'passes the relevant data to the component', () => {
 		const registry = createRegistry();
@@ -54,10 +52,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// Expected two times:
-		// - Once on initial render.
-		// - Once on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		// Wrapper is the enhanced component.
@@ -109,10 +104,7 @@ describe( 'withSelect', () => {
 		);
 
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( mapDispatchToProps ).toHaveBeenCalledTimes( 1 );
 
 		// Simulate a click on the button.
@@ -121,16 +113,14 @@ describe( 'withSelect', () => {
 		await user.click( button );
 
 		expect( button ).toHaveTextContent( '1' );
-		// 2 times =
-		//  1. Initial mount
+		// 1. Initial mount
 		// 2. When click handler is called.
 		expect( mapDispatchToProps ).toHaveBeenCalledTimes( 2 );
-		// 4 times
+		// 3 times
 		// - 1 on initial render
-		// - 1 on effect before subscription set.
 		// - 1 on click triggering subscription firing.
 		// - 1 on rerender.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 4 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		// Verifies component only renders twice.
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
@@ -153,7 +143,7 @@ describe( 'withSelect', () => {
 			},
 		} );
 
-		// @todo, Should we allow this behaviour? Side-effects
+		// @todo Should we allow this behaviour? Side-effects
 		// on mount are discouraged in React (breaks Suspense and React Async Mode)
 		// leaving in place for now under the assumption there's current usage
 		// of withSelect in GB that expects support.
@@ -255,10 +245,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		rerender(
@@ -268,7 +255,7 @@ describe( 'withSelect', () => {
 		);
 
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
 
@@ -298,10 +285,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		rerender(
@@ -310,7 +294,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
@@ -341,15 +325,12 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		await act( async () => registry.dispatch( 'demo' ).update() );
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
@@ -375,10 +356,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		rerender(
@@ -387,7 +365,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
 
@@ -413,15 +391,12 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		await act( async () => store.dispatch( { type: 'dummy' } ) );
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 	} );
 
@@ -453,10 +428,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent(
@@ -472,7 +444,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent(
 			JSON.stringify( {
@@ -512,10 +484,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Unknown' );
 
@@ -525,7 +494,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'OK' );
 
@@ -535,7 +504,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 4 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 3 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'Unknown' );
 	} );
@@ -576,11 +545,8 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( childMapSelectToProps ).toHaveBeenCalledTimes( 2 );
-		expect( parentMapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( childMapSelectToProps ).toHaveBeenCalledTimes( 1 );
+		expect( parentMapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( ChildOriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( ParentOriginalComponent ).toHaveBeenCalledTimes( 1 );
 
@@ -590,8 +556,8 @@ describe( 'withSelect', () => {
 			registry.dispatch( 'childRender' ).toggleRender();
 		} );
 
-		expect( childMapSelectToProps ).toHaveBeenCalledTimes( 2 );
-		expect( parentMapSelectToProps ).toHaveBeenCalledTimes( 4 );
+		expect( childMapSelectToProps ).toHaveBeenCalledTimes( 1 );
+		expect( parentMapSelectToProps ).toHaveBeenCalledTimes( 3 );
 		expect( ChildOriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( ParentOriginalComponent ).toHaveBeenCalledTimes( 2 );
 	} );
@@ -622,10 +588,7 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 2 times:
-		// - 1 on initial render
-		// - 1 on effect before subscription set.
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 1 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 1 );
 
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'first' );
@@ -644,12 +607,10 @@ describe( 'withSelect', () => {
 			</RegistryProvider>
 		);
 
-		// 4 times:
+		// 2 times:
 		// - 1 on initial render
-		// - 1 on effect before subscription set.
 		// - 1 on re-render
-		// - 1 on effect before new subscription set (because registry has changed)
-		expect( mapSelectToProps ).toHaveBeenCalledTimes( 4 );
+		expect( mapSelectToProps ).toHaveBeenCalledTimes( 2 );
 		expect( OriginalComponent ).toHaveBeenCalledTimes( 2 );
 		expect( screen.getByRole( 'status' ) ).toHaveTextContent( 'second' );
 	} );
diff --git a/packages/data/src/controls.js b/packages/data/src/controls.js
index 508dba8e50c40d..8e2795b516e0ed 100644
--- a/packages/data/src/controls.js
+++ b/packages/data/src/controls.js
@@ -95,7 +95,7 @@ function resolveSelect( storeNameOrDescriptor, selectorName, ...args ) {
  *
  * // Action generator using dispatch
  * export function* myAction() {
- *   yield controls.dispatch( 'core/edit-post', 'togglePublishSidebar' );
+ *   yield controls.dispatch( 'core/editor', 'togglePublishSidebar' );
  *   // do some other things.
  * }
  * ```
diff --git a/packages/data/src/create-selector.js b/packages/data/src/create-selector.js
new file mode 100644
index 00000000000000..069932e8007e28
--- /dev/null
+++ b/packages/data/src/create-selector.js
@@ -0,0 +1,11 @@
+/**
+ * Creates a memoized selector that caches the computed values according to the array of "dependants"
+ * and the selector parameters, and recomputes the values only when any of them changes.
+ *
+ * @see The documentation for the `rememo` package from which the `createSelector` function is reexported.
+ *
+ * @param {Function} selector      Selector function that calculates a value from state and parameters.
+ * @param {Function} getDependants Function that returns an array of "dependant" objects.
+ * @return {Function} A memoized version of `selector` that caches the calculated return values.
+ */
+export { default as createSelector } from 'rememo';
diff --git a/packages/data/src/dispatch.ts b/packages/data/src/dispatch.ts
new file mode 100644
index 00000000000000..348865112a59c6
--- /dev/null
+++ b/packages/data/src/dispatch.ts
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import type { AnyConfig, StoreDescriptor, DispatchReturn } from './types';
+import defaultRegistry from './default-registry';
+
+/**
+ * Given a store descriptor, returns an object of the store's action creators.
+ * Calling an action creator will cause it to be dispatched, updating the state value accordingly.
+ *
+ * Note: Action creators returned by the dispatch will return a promise when
+ * they are called.
+ *
+ * @param storeNameOrDescriptor The store descriptor. The legacy calling convention of passing
+ *                              the store name is also supported.
+ *
+ * @example
+ * ```js
+ * import { dispatch } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
+ *
+ * dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
+ * ```
+ * @return Object containing the action creators.
+ */
+export function dispatch<
+	StoreNameOrDescriptor extends StoreDescriptor< AnyConfig > | string,
+>(
+	storeNameOrDescriptor: StoreNameOrDescriptor
+): DispatchReturn< StoreNameOrDescriptor > {
+	return defaultRegistry.dispatch( storeNameOrDescriptor );
+}
diff --git a/packages/data/src/factory.js b/packages/data/src/factory.js
index 046836dd6d0332..be4ef8cf673c5e 100644
--- a/packages/data/src/factory.js
+++ b/packages/data/src/factory.js
@@ -39,22 +39,33 @@
  * @return {Function} Registry selector that can be registered with a store.
  */
 export function createRegistrySelector( registrySelector ) {
+	const selectorsByRegistry = new WeakMap();
 	// Create a selector function that is bound to the registry referenced by `selector.registry`
 	// and that has the same API as a regular selector. Binding it in such a way makes it
 	// possible to call the selector directly from another selector.
-	const selector = ( ...args ) =>
-		registrySelector( selector.registry.select )( ...args );
+	const wrappedSelector = ( ...args ) => {
+		let selector = selectorsByRegistry.get( wrappedSelector.registry );
+		// We want to make sure the cache persists even when new registry
+		// instances are created. For example patterns create their own editors
+		// with their own core/block-editor stores, so we should keep track of
+		// the cache for each registry instance.
+		if ( ! selector ) {
+			selector = registrySelector( wrappedSelector.registry.select );
+			selectorsByRegistry.set( wrappedSelector.registry, selector );
+		}
+		return selector( ...args );
+	};
 
 	/**
 	 * Flag indicating that the selector is a registry selector that needs the correct registry
-	 * reference to be assigned to `selecto.registry` to make it work correctly.
+	 * reference to be assigned to `selector.registry` to make it work correctly.
 	 * be mapped as a registry selector.
 	 *
 	 * @type {boolean}
 	 */
-	selector.isRegistrySelector = true;
+	wrappedSelector.isRegistrySelector = true;
 
-	return selector;
+	return wrappedSelector;
 }
 
 /**
diff --git a/packages/data/src/index.js b/packages/data/src/index.js
index 91675d48c0354d..43ea843d1a64a5 100644
--- a/packages/data/src/index.js
+++ b/packages/data/src/index.js
@@ -1,13 +1,9 @@
-/**
- * External dependencies
- */
-import turboCombineReducers from 'turbo-combine-reducers';
-
 /**
  * Internal dependencies
  */
 import defaultRegistry from './default-registry';
 import * as plugins from './plugins';
+import { combineReducers as combineReducersModule } from './redux-store';
 
 /** @typedef {import('./types').StoreDescriptor} StoreDescriptor */
 
@@ -27,8 +23,11 @@ export { useDispatch } from './components/use-dispatch';
 export { AsyncModeProvider } from './components/async-mode-provider';
 export { createRegistry } from './registry';
 export { createRegistrySelector, createRegistryControl } from './factory';
+export { createSelector } from './create-selector';
 export { controls } from './controls';
 export { default as createReduxStore } from './redux-store';
+export { dispatch } from './dispatch';
+export { select } from './select';
 
 /**
  * Object of available plugins to use with a registry.
@@ -78,28 +77,7 @@ export { plugins };
  * @return {Function} A reducer that invokes every reducer inside the reducers
  *                    object, and constructs a state object with the same shape.
  */
-export const combineReducers = turboCombineReducers;
-
-/**
- * Given a store descriptor, returns an object of the store's selectors.
- * The selector functions are been pre-bound to pass the current state automatically.
- * As a consumer, you need only pass arguments of the selector, if applicable.
- *
- * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
- *                                                       convention of passing the store name is
- *                                                       also supported.
- *
- * @example
- * ```js
- * import { select } from '@wordpress/data';
- * import { store as myCustomStore } from 'my-custom-store';
- *
- * select( myCustomStore ).getPrice( 'hammer' );
- * ```
- *
- * @return {Object} Object containing the store's selectors.
- */
-export const select = defaultRegistry.select;
+export const combineReducers = combineReducersModule;
 
 /**
  * Given a store descriptor, returns an object containing the store's selectors pre-bound to state
@@ -135,34 +113,16 @@ export const resolveSelect = defaultRegistry.resolveSelect;
  */
 export const suspendSelect = defaultRegistry.suspendSelect;
 
-/**
- * Given a store descriptor, returns an object of the store's action creators.
- * Calling an action creator will cause it to be dispatched, updating the state value accordingly.
- *
- * Note: Action creators returned by the dispatch will return a promise when
- * they are called.
- *
- * @param {StoreDescriptor|string} storeNameOrDescriptor The store descriptor. The legacy calling
- *                                                       convention of passing the store name is
- *                                                       also supported.
- *
- * @example
- * ```js
- * import { dispatch } from '@wordpress/data';
- * import { store as myCustomStore } from 'my-custom-store';
- *
- * dispatch( myCustomStore ).setPrice( 'hammer', 9.75 );
- * ```
- * @return {Object} Object containing the action creators.
- */
-export const dispatch = defaultRegistry.dispatch;
-
 /**
  * Given a listener function, the function will be called any time the state value
- * of one of the registered stores has changed. This function returns a `unsubscribe`
- * function used to stop the subscription.
+ * of one of the registered stores has changed. If you specify the optional
+ * `storeNameOrDescriptor` parameter, the listener function will be called only
+ * on updates on that one specific registered store.
+ *
+ * This function returns an `unsubscribe` function used to stop the subscription.
  *
- * @param {Function} listener Callback function.
+ * @param {Function}                listener              Callback function.
+ * @param {string|StoreDescriptor?} storeNameOrDescriptor Optional store name.
  *
  * @example
  * ```js
diff --git a/packages/data/src/lock-unlock.ts b/packages/data/src/lock-unlock.ts
new file mode 100644
index 00000000000000..99596d756f66e7
--- /dev/null
+++ b/packages/data/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/data'
+	);
diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
index a013f2417d9698..a1bf44a7aff696 100644
--- a/packages/data/src/plugins/persistence/index.js
+++ b/packages/data/src/plugins/persistence/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { isPlainObject } from 'is-plain-object';
-import { merge } from 'lodash';
+import deepmerge from 'deepmerge';
 
 /**
  * Internal dependencies
@@ -21,7 +21,6 @@ import { combineReducers } from '../../';
  *                                at least implement `getItem` and `setItem` of
  *                                the Web Storage API.
  * @property {string}  storageKey Key on which to set in persistent storage.
- *
  */
 
 /**
@@ -193,7 +192,9 @@ function persistencePlugin( registry, pluginOptions ) {
 					//   subset of keys.
 					// - New keys in what would otherwise be used as initial
 					//   state are deeply merged as base for persisted value.
-					initialState = merge( {}, initialState, persistedState );
+					initialState = deepmerge( initialState, persistedState, {
+						isMergeableObject: isPlainObject,
+					} );
 				} else {
 					// If there is a mismatch in object-likeness of default
 					// initial or persisted state, defer to persisted value.
diff --git a/packages/data/src/plugins/persistence/test/index.js b/packages/data/src/plugins/persistence/test/index.js
index 818f075640ae56..edc2742467a43e 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.toThrow( /object is not extensible/ );
 	} );
 
 	it( 'should load a persisted value as initialState', () => {
diff --git a/packages/data/src/redux-store/combine-reducers.js b/packages/data/src/redux-store/combine-reducers.js
new file mode 100644
index 00000000000000..0fdcdae58a6c73
--- /dev/null
+++ b/packages/data/src/redux-store/combine-reducers.js
@@ -0,0 +1,17 @@
+export function combineReducers( reducers ) {
+	const keys = Object.keys( reducers );
+
+	return function combinedReducer( state = {}, action ) {
+		const nextState = {};
+		let hasChanged = false;
+		for ( const key of keys ) {
+			const reducer = reducers[ key ];
+			const prevStateForKey = state[ key ];
+			const nextStateForKey = reducer( prevStateForKey, action );
+			nextState[ key ] = nextStateForKey;
+			hasChanged = hasChanged || nextStateForKey !== prevStateForKey;
+		}
+
+		return hasChanged ? nextState : state;
+	};
+}
diff --git a/packages/data/src/redux-store/index.js b/packages/data/src/redux-store/index.js
index 90e270d56c91ce..979c3127b9ed52 100644
--- a/packages/data/src/redux-store/index.js
+++ b/packages/data/src/redux-store/index.js
@@ -2,8 +2,6 @@
  * External dependencies
  */
 import { createStore, applyMiddleware } from 'redux';
-import { get, mapValues } from 'lodash';
-import combineReducers from 'turbo-combine-reducers';
 import EquivalentKeyMap from 'equivalent-key-map';
 
 /**
@@ -15,7 +13,9 @@ import { compose } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { combineReducers } from './combine-reducers';
 import { builtinControls } from '../controls';
+import { lock } from '../lock-unlock';
 import promise from '../promise-middleware';
 import createResolversCacheMiddleware from '../resolvers-cache-middleware';
 import createThunkMiddleware from './thunk-middleware';
@@ -23,14 +23,19 @@ import metadataReducer from './metadata/reducer';
 import * as metadataSelectors from './metadata/selectors';
 import * as metadataActions from './metadata/actions';
 
+export { combineReducers };
+
 /** @typedef {import('../types').DataRegistry} DataRegistry */
+/** @typedef {import('../types').ListenerFunction} ListenerFunction */
 /**
  * @typedef {import('../types').StoreDescriptor<C>} StoreDescriptor
- * @template C
+ * @template {import('../types').AnyConfig} C
  */
 /**
  * @typedef {import('../types').ReduxStoreConfig<State,Actions,Selectors>} ReduxStoreConfig
- * @template State,Actions,Selectors
+ * @template State
+ * @template {Record<string,import('../types').ActionCreator>} Actions
+ * @template Selectors
  */
 
 const trimUndefinedValues = ( array ) => {
@@ -43,6 +48,35 @@ const trimUndefinedValues = ( array ) => {
 	return result;
 };
 
+/**
+ * Creates a new object with the same keys, but with `callback()` called as
+ * a transformer function on each of the values.
+ *
+ * @param {Object}   obj      The object to transform.
+ * @param {Function} callback The function to transform each object value.
+ * @return {Array} Transformed object.
+ */
+const mapValues = ( obj, callback ) =>
+	Object.fromEntries(
+		Object.entries( obj ?? {} ).map( ( [ key, value ] ) => [
+			key,
+			callback( value, key ),
+		] )
+	);
+
+// Convert  non serializable types to plain objects
+const devToolsReplacer = ( key, state ) => {
+	if ( state instanceof Map ) {
+		return Object.fromEntries( state );
+	}
+
+	if ( state instanceof window.HTMLElement ) {
+		return null;
+	}
+
+	return state;
+};
+
 /**
  * Create a cache to track whether resolvers started running or not.
  *
@@ -74,6 +108,21 @@ function createResolversCache() {
 	};
 }
 
+function createBindingCache( bind ) {
+	const cache = new WeakMap();
+
+	return {
+		get( item, itemName ) {
+			let boundItem = cache.get( item );
+			if ( ! boundItem ) {
+				boundItem = bind( item, itemName );
+				cache.set( item, boundItem );
+			}
+			return boundItem;
+		},
+	};
+}
+
 /**
  * Creates a data store descriptor for the provided Redux store configuration containing
  * properties describing reducer, actions, selectors, controls and resolvers.
@@ -90,7 +139,9 @@ function createResolversCache() {
  * } );
  * ```
  *
- * @template State,Actions,Selectors
+ * @template State
+ * @template {Record<string,import('../types').ActionCreator>} Actions
+ * @template Selectors
  * @param {string}                                    key     Unique namespace identifier.
  * @param {ReduxStoreConfig<State,Actions,Selectors>} options Registered store options, with properties
  *                                                            describing reducer, actions, selectors,
@@ -99,24 +150,42 @@ function createResolversCache() {
  * @return   {StoreDescriptor<ReduxStoreConfig<State,Actions,Selectors>>} Store Object.
  */
 export default function createReduxStore( key, options ) {
-	return {
+	const privateActions = {};
+	const privateSelectors = {};
+	const privateRegistrationFunctions = {
+		privateActions,
+		registerPrivateActions: ( actions ) => {
+			Object.assign( privateActions, actions );
+		},
+		privateSelectors,
+		registerPrivateSelectors: ( selectors ) => {
+			Object.assign( privateSelectors, selectors );
+		},
+	};
+	const storeDescriptor = {
 		name: key,
 		instantiate: ( registry ) => {
+			/**
+			 * Stores listener functions registered with `subscribe()`.
+			 *
+			 * When functions register to listen to store changes with
+			 * `subscribe()` they get added here. Although Redux offers
+			 * its own `subscribe()` function directly, by wrapping the
+			 * subscription in this store instance it's possible to
+			 * optimize checking if the state has changed before calling
+			 * each listener.
+			 *
+			 * @type {Set<ListenerFunction>}
+			 */
+			const listeners = new Set();
 			const reducer = options.reducer;
 			const thunkArgs = {
 				registry,
 				get dispatch() {
-					return Object.assign(
-						( action ) => store.dispatch( action ),
-						getActions()
-					);
+					return thunkActions;
 				},
 				get select() {
-					return Object.assign(
-						( selector ) =>
-							selector( store.__unstableOriginalGetState() ),
-						getSelectors()
-					);
+					return thunkSelectors;
 				},
 				get resolveSelect() {
 					return getResolveSelectors();
@@ -129,47 +198,133 @@ export default function createReduxStore( key, options ) {
 				registry,
 				thunkArgs
 			);
+			// Expose the private registration functions on the store
+			// so they can be copied to a sub registry in registry.js.
+			lock( store, privateRegistrationFunctions );
 			const resolversCache = createResolversCache();
 
-			let resolvers;
-			const actions = mapActions(
-				{
-					...metadataActions,
-					...options.actions,
-				},
-				store
-			);
+			function bindAction( action ) {
+				return ( ...args ) =>
+					Promise.resolve( store.dispatch( action( ...args ) ) );
+			}
+
+			const actions = {
+				...mapValues( metadataActions, bindAction ),
+				...mapValues( options.actions, bindAction ),
+			};
 
-			let selectors = mapSelectors(
-				{
-					...mapValues(
-						metadataSelectors,
-						( selector ) =>
-							( state, ...args ) =>
-								selector( state.metadata, ...args )
-					),
-					...mapValues( options.selectors, ( selector ) => {
-						if ( selector.isRegistrySelector ) {
-							selector.registry = registry;
-						}
-
-						return ( state, ...args ) =>
-							selector( state.root, ...args );
-					} ),
+			const boundPrivateActions = createBindingCache( bindAction );
+			const allActions = new Proxy( () => {}, {
+				get: ( target, prop ) => {
+					const privateAction = privateActions[ prop ];
+					return privateAction
+						? boundPrivateActions.get( privateAction, prop )
+						: actions[ prop ];
 				},
-				store
-			);
-			if ( options.resolvers ) {
-				const result = mapResolvers(
-					options.resolvers,
-					selectors,
+			} );
+
+			const thunkActions = new Proxy( allActions, {
+				apply: ( target, thisArg, [ action ] ) =>
+					store.dispatch( action ),
+			} );
+
+			lock( actions, allActions );
+
+			const resolvers = options.resolvers
+				? mapResolvers( options.resolvers )
+				: {};
+
+			function bindSelector( selector, selectorName ) {
+				if ( selector.isRegistrySelector ) {
+					selector.registry = registry;
+				}
+				const boundSelector = ( ...args ) => {
+					args = normalize( selector, args );
+					const state = store.__unstableOriginalGetState();
+					// Before calling the selector, switch to the correct
+					// registry.
+					if ( selector.isRegistrySelector ) {
+						selector.registry = registry;
+					}
+					return selector( state.root, ...args );
+				};
+
+				// Expose normalization method on the bound selector
+				// in order that it can be called when fullfilling
+				// the resolver.
+				boundSelector.__unstableNormalizeArgs =
+					selector.__unstableNormalizeArgs;
+
+				const resolver = resolvers[ selectorName ];
+
+				if ( ! resolver ) {
+					boundSelector.hasResolver = false;
+					return boundSelector;
+				}
+
+				return mapSelectorWithResolver(
+					boundSelector,
+					selectorName,
+					resolver,
 					store,
 					resolversCache
 				);
-				resolvers = result.resolvers;
-				selectors = result.selectors;
 			}
 
+			function bindMetadataSelector( metaDataSelector ) {
+				const boundSelector = ( ...args ) => {
+					const state = store.__unstableOriginalGetState();
+
+					const originalSelectorName = args && args[ 0 ];
+					const originalSelectorArgs = args && args[ 1 ];
+					const targetSelector =
+						options?.selectors?.[ originalSelectorName ];
+
+					// Normalize the arguments passed to the target selector.
+					if ( originalSelectorName && targetSelector ) {
+						args[ 1 ] = normalize(
+							targetSelector,
+							originalSelectorArgs
+						);
+					}
+
+					return metaDataSelector( state.metadata, ...args );
+				};
+				boundSelector.hasResolver = false;
+				return boundSelector;
+			}
+
+			const selectors = {
+				...mapValues( metadataSelectors, bindMetadataSelector ),
+				...mapValues( options.selectors, bindSelector ),
+			};
+
+			const boundPrivateSelectors = createBindingCache( bindSelector );
+
+			// Pre-bind the private selectors that have been registered by the time of
+			// instantiation, so that registry selectors are bound to the registry.
+			for ( const [ selectorName, selector ] of Object.entries(
+				privateSelectors
+			) ) {
+				boundPrivateSelectors.get( selector, selectorName );
+			}
+
+			const allSelectors = new Proxy( () => {}, {
+				get: ( target, prop ) => {
+					const privateSelector = privateSelectors[ prop ];
+					return privateSelector
+						? boundPrivateSelectors.get( privateSelector, prop )
+						: selectors[ prop ];
+				},
+			} );
+
+			const thunkSelectors = new Proxy( allSelectors, {
+				apply: ( target, thisArg, [ selector ] ) =>
+					selector( store.__unstableOriginalGetState() ),
+			} );
+
+			lock( selectors, allSelectors );
+
 			const resolveSelectors = mapResolveSelectors( selectors, store );
 			const suspendSelectors = mapSuspendSelectors( selectors, store );
 
@@ -189,18 +344,24 @@ export default function createReduxStore( key, options ) {
 			const subscribe =
 				store &&
 				( ( listener ) => {
-					let lastState = store.__unstableOriginalGetState();
-					return store.subscribe( () => {
-						const state = store.__unstableOriginalGetState();
-						const hasChanged = state !== lastState;
-						lastState = state;
-
-						if ( hasChanged ) {
-							listener();
-						}
-					} );
+					listeners.add( listener );
+
+					return () => listeners.delete( listener );
 				} );
 
+			let lastState = store.__unstableOriginalGetState();
+			store.subscribe( () => {
+				const state = store.__unstableOriginalGetState();
+				const hasChanged = state !== lastState;
+				lastState = state;
+
+				if ( hasChanged ) {
+					for ( const listener of listeners ) {
+						listener();
+					}
+				}
+			} );
+
 			// This can be simplified to just { subscribe, getSelectors, getActions }
 			// Once we remove the use function.
 			return {
@@ -217,6 +378,13 @@ export default function createReduxStore( key, options ) {
 			};
 		},
 	};
+
+	// Expose the private registration functions on the store
+	// descriptor. That's a natural choice since that's where the
+	// public actions and selectors are stored .
+	lock( storeDescriptor, privateRegistrationFunctions );
+
+	return storeDescriptor;
 }
 
 /**
@@ -256,6 +424,9 @@ function instantiateReduxStore( key, options, registry, thunkArgs ) {
 			window.__REDUX_DEVTOOLS_EXTENSION__( {
 				name: key,
 				instanceId: key,
+				serialize: {
+					replacer: devToolsReplacer,
+				},
 			} )
 		);
 	}
@@ -273,59 +444,6 @@ function instantiateReduxStore( key, options, registry, thunkArgs ) {
 	);
 }
 
-/**
- * Maps selectors to a store.
- *
- * @param {Object} selectors Selectors to register. Keys will be used as the
- *                           public facing API. Selectors will get passed the
- *                           state as first argument.
- * @param {Object} store     The store to which the selectors should be mapped.
- * @return {Object} Selectors mapped to the provided store.
- */
-function mapSelectors( selectors, store ) {
-	const createStateSelector = ( registrySelector ) => {
-		const selector = function runSelector() {
-			// This function is an optimized implementation of:
-			//
-			//   selector( store.getState(), ...arguments )
-			//
-			// Where the above would incur an `Array#concat` in its application,
-			// the logic here instead efficiently constructs an arguments array via
-			// direct assignment.
-			const argsLength = arguments.length;
-			const args = new Array( argsLength + 1 );
-			args[ 0 ] = store.__unstableOriginalGetState();
-			for ( let i = 0; i < argsLength; i++ ) {
-				args[ i + 1 ] = arguments[ i ];
-			}
-
-			return registrySelector( ...args );
-		};
-		selector.hasResolver = false;
-		return selector;
-	};
-
-	return mapValues( selectors, createStateSelector );
-}
-
-/**
- * Maps actions to dispatch from a given store.
- *
- * @param {Object} actions Actions to register.
- * @param {Object} store   The redux store to which the actions should be mapped.
- *
- * @return {Object} Actions mapped to the redux store provided.
- */
-function mapActions( actions, store ) {
-	const createBoundAction =
-		( action ) =>
-		( ...args ) => {
-			return Promise.resolve( store.dispatch( action( ...args ) ) );
-		};
-
-	return mapValues( actions, createBoundAction );
-}
-
 /**
  * Maps selectors to functions that return a resolution promise for them
  *
@@ -344,6 +462,8 @@ function mapResolveSelectors( selectors, store ) {
 		getCachedResolvers,
 		getResolutionState,
 		getResolutionError,
+		hasResolvingSelectors,
+		countSelectorsByStatus,
 		...storeSelectors
 	} = selectors;
 
@@ -432,20 +552,13 @@ function mapSuspendSelectors( selectors, store ) {
 }
 
 /**
- * Returns resolvers with matched selectors for a given namespace.
- * Resolvers are side effects invoked once per argument set of a given selector call,
- * used in ensuring that the data needs for the selector are satisfied.
+ * Convert resolvers to a normalized form, an object with `fulfill` method and
+ * optional methods like `isFulfilled`.
  *
- * @param {Object} resolvers      Resolvers to register.
- * @param {Object} selectors      The current selectors to be modified.
- * @param {Object} store          The redux store to which the resolvers should be mapped.
- * @param {Object} resolversCache Resolvers Cache.
+ * @param {Object} resolvers Resolver to convert
  */
-function mapResolvers( resolvers, selectors, store, resolversCache ) {
-	// The `resolver` can be either a function that does the resolution, or, in more advanced
-	// cases, an object with a `fullfill` method and other optional methods like `isFulfilled`.
-	// Here we normalize the `resolver` function to an object with `fulfill` method.
-	const mappedResolvers = mapValues( resolvers, ( resolver ) => {
+function mapResolvers( resolvers ) {
+	return mapValues( resolvers, ( resolver ) => {
 		if ( resolver.fulfill ) {
 			return resolver;
 		}
@@ -455,99 +568,96 @@ function mapResolvers( resolvers, selectors, store, resolversCache ) {
 			fulfill: resolver, // Add the fulfill method.
 		};
 	} );
+}
 
-	const mapSelector = ( selector, selectorName ) => {
-		const resolver = resolvers[ selectorName ];
-		if ( ! resolver ) {
-			selector.hasResolver = false;
-			return selector;
+/**
+ * Returns a selector with a matched resolver.
+ * Resolvers are side effects invoked once per argument set of a given selector call,
+ * used in ensuring that the data needs for the selector are satisfied.
+ *
+ * @param {Object} selector       The selector function to be bound.
+ * @param {string} selectorName   The selector name.
+ * @param {Object} resolver       Resolver to call.
+ * @param {Object} store          The redux store to which the resolvers should be mapped.
+ * @param {Object} resolversCache Resolvers Cache.
+ */
+function mapSelectorWithResolver(
+	selector,
+	selectorName,
+	resolver,
+	store,
+	resolversCache
+) {
+	function fulfillSelector( args ) {
+		const state = store.getState();
+
+		if (
+			resolversCache.isRunning( selectorName, args ) ||
+			( typeof resolver.isFulfilled === 'function' &&
+				resolver.isFulfilled( state, ...args ) )
+		) {
+			return;
 		}
 
-		const selectorResolver = ( ...args ) => {
-			async function fulfillSelector() {
-				const state = store.getState();
+		const { metadata } = store.__unstableOriginalGetState();
 
-				if (
-					resolversCache.isRunning( selectorName, args ) ||
-					( typeof resolver.isFulfilled === 'function' &&
-						resolver.isFulfilled( state, ...args ) )
-				) {
-					return;
-				}
+		if (
+			metadataSelectors.hasStartedResolution(
+				metadata,
+				selectorName,
+				args
+			)
+		) {
+			return;
+		}
 
-				const { metadata } = store.__unstableOriginalGetState();
+		resolversCache.markAsRunning( selectorName, args );
 
-				if (
-					metadataSelectors.hasStartedResolution(
-						metadata,
-						selectorName,
-						args
-					)
-				) {
-					return;
+		setTimeout( async () => {
+			resolversCache.clear( selectorName, args );
+			store.dispatch(
+				metadataActions.startResolution( selectorName, args )
+			);
+			try {
+				const action = resolver.fulfill( ...args );
+				if ( action ) {
+					await store.dispatch( action );
 				}
-
-				resolversCache.markAsRunning( selectorName, args );
-
-				setTimeout( async () => {
-					resolversCache.clear( selectorName, args );
-					store.dispatch(
-						metadataActions.startResolution( selectorName, args )
-					);
-					try {
-						await fulfillResolver(
-							store,
-							mappedResolvers,
-							selectorName,
-							...args
-						);
-						store.dispatch(
-							metadataActions.finishResolution(
-								selectorName,
-								args
-							)
-						);
-					} catch ( error ) {
-						store.dispatch(
-							metadataActions.failResolution(
-								selectorName,
-								args,
-								error
-							)
-						);
-					}
-				} );
+				store.dispatch(
+					metadataActions.finishResolution( selectorName, args )
+				);
+			} catch ( error ) {
+				store.dispatch(
+					metadataActions.failResolution( selectorName, args, error )
+				);
 			}
+		}, 0 );
+	}
 
-			fulfillSelector( ...args );
-			return selector( ...args );
-		};
-		selectorResolver.hasResolver = true;
-		return selectorResolver;
-	};
-
-	return {
-		resolvers: mappedResolvers,
-		selectors: mapValues( selectors, mapSelector ),
+	const selectorResolver = ( ...args ) => {
+		args = normalize( selector, args );
+		fulfillSelector( args );
+		return selector( ...args );
 	};
+	selectorResolver.hasResolver = true;
+	return selectorResolver;
 }
 
 /**
- * Calls a resolver given arguments
+ * Applies selector's normalization function to the given arguments
+ * if it exists.
  *
- * @param {Object} store        Store reference, for fulfilling via resolvers
- * @param {Object} resolvers    Store Resolvers
- * @param {string} selectorName Selector name to fulfill.
- * @param {Array}  args         Selector Arguments.
+ * @param {Object} selector The selector potentially with a normalization method property.
+ * @param {Array}  args     selector arguments to normalize.
+ * @return {Array} Potentially normalized arguments.
  */
-async function fulfillResolver( store, resolvers, selectorName, ...args ) {
-	const resolver = get( resolvers, [ selectorName ] );
-	if ( ! resolver ) {
-		return;
-	}
-
-	const action = resolver.fulfill( ...args );
-	if ( action ) {
-		await store.dispatch( action );
+function normalize( selector, args ) {
+	if (
+		selector.__unstableNormalizeArgs &&
+		typeof selector.__unstableNormalizeArgs === 'function' &&
+		args?.length
+	) {
+		return selector.__unstableNormalizeArgs( args );
 	}
+	return args;
 }
diff --git a/packages/data/src/redux-store/metadata/reducer.ts b/packages/data/src/redux-store/metadata/reducer.ts
index 33503381979ac6..905d798ca64258 100644
--- a/packages/data/src/redux-store/metadata/reducer.ts
+++ b/packages/data/src/redux-store/metadata/reducer.ts
@@ -115,8 +115,8 @@ const subKeysIsResolved: Reducer< Record< string, State >, Action > = onSubKey<
  *
  *   selectorName -> EquivalentKeyMap<Array, boolean>
  *
- * @param  state  Current state.
- * @param  action Dispatched action.
+ * @param state  Current state.
+ * @param action Dispatched action.
  *
  * @return Next state.
  */
diff --git a/packages/data/src/redux-store/metadata/selectors.js b/packages/data/src/redux-store/metadata/selectors.js
index 5f05374d866cc6..306bb89977d2dc 100644
--- a/packages/data/src/redux-store/metadata/selectors.js
+++ b/packages/data/src/redux-store/metadata/selectors.js
@@ -1,11 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { get } from 'lodash';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { createSelector } from '../../create-selector';
 import { selectorArgsToStateKey } from './utils';
 
 /** @typedef {Record<string, import('./reducer').State>} State */
@@ -25,7 +26,7 @@ import { selectorArgsToStateKey } from './utils';
  * @return {StateValue|undefined} isResolving value.
  */
 export function getResolutionState( state, selectorName, args ) {
-	const map = get( state, [ selectorName ] );
+	const map = state[ selectorName ];
 	if ( ! map ) {
 		return;
 	}
@@ -34,10 +35,16 @@ export function getResolutionState( state, selectorName, args ) {
 }
 
 /**
- * Returns the raw `isResolving` value for a given selector name,
- * and arguments set. May be undefined if the selector has never been resolved
- * or not resolved for the given set of arguments, otherwise true or false for
- * resolution started and completed respectively.
+ * Returns an `isResolving`-like value for a given selector name and arguments set.
+ * Its value is either `undefined` if the selector has never been resolved or has been
+ * invalidated, or a `true`/`false` boolean value if the resolution is in progress or
+ * has finished, respectively.
+ *
+ * This is a legacy selector that was implemented when the "raw" internal data had
+ * this `undefined | boolean` format. Nowadays the internal value is an object that
+ * can be retrieved with `getResolutionState`.
+ *
+ * @deprecated
  *
  * @param {State}      state        Data state.
  * @param {string}     selectorName Selector name.
@@ -46,8 +53,13 @@ export function getResolutionState( state, selectorName, args ) {
  * @return {boolean | undefined} isResolving value.
  */
 export function getIsResolving( state, selectorName, args ) {
-	const resolutionState = getResolutionState( state, selectorName, args );
+	deprecated( 'wp.data.select( store ).getIsResolving', {
+		since: '6.6',
+		version: '6.8',
+		alternative: 'wp.data.select( store ).getResolutionState',
+	} );
 
+	const resolutionState = getResolutionState( state, selectorName, args );
 	return resolutionState && resolutionState.status === 'resolving';
 }
 
@@ -136,3 +148,60 @@ export function isResolving( state, selectorName, args ) {
 export function getCachedResolvers( state ) {
 	return state;
 }
+
+/**
+ * Whether the store has any currently resolving selectors.
+ *
+ * @param {State} state Data state.
+ *
+ * @return {boolean} True if one or more selectors are resolving, false otherwise.
+ */
+export function hasResolvingSelectors( state ) {
+	return Object.values( state ).some( ( selectorState ) =>
+		/**
+		 * This uses the internal `_map` property of `EquivalentKeyMap` for
+		 * optimization purposes, since the `EquivalentKeyMap` implementation
+		 * does not support a `.values()` implementation.
+		 *
+		 * @see https://github.com/aduth/equivalent-key-map
+		 */
+		Array.from( selectorState._map.values() ).some(
+			( resolution ) => resolution[ 1 ]?.status === 'resolving'
+		)
+	);
+}
+
+/**
+ * Retrieves the total number of selectors, grouped per status.
+ *
+ * @param {State} state Data state.
+ *
+ * @return {Object} Object, containing selector totals by status.
+ */
+export const countSelectorsByStatus = createSelector(
+	( state ) => {
+		const selectorsByStatus = {};
+
+		Object.values( state ).forEach( ( selectorState ) =>
+			/**
+			 * This uses the internal `_map` property of `EquivalentKeyMap` for
+			 * optimization purposes, since the `EquivalentKeyMap` implementation
+			 * does not support a `.values()` implementation.
+			 *
+			 * @see https://github.com/aduth/equivalent-key-map
+			 */
+			Array.from( selectorState._map.values() ).forEach(
+				( resolution ) => {
+					const currentStatus = resolution[ 1 ]?.status ?? 'error';
+					if ( ! selectorsByStatus[ currentStatus ] ) {
+						selectorsByStatus[ currentStatus ] = 0;
+					}
+					selectorsByStatus[ currentStatus ]++;
+				}
+			)
+		);
+
+		return selectorsByStatus;
+	},
+	( state ) => [ state ]
+);
diff --git a/packages/data/src/redux-store/metadata/test/selectors.js b/packages/data/src/redux-store/metadata/test/selectors.js
index c2c7ed8d03eb63..37eb820889cc15 100644
--- a/packages/data/src/redux-store/metadata/test/selectors.js
+++ b/packages/data/src/redux-store/metadata/test/selectors.js
@@ -3,7 +3,8 @@
  */
 import { createRegistry } from '@wordpress/data';
 
-jest.useRealTimers();
+const getFooSelector = ( state ) => state;
+
 const testStore = {
 	reducer: ( state = null, action ) => {
 		if ( action.type === 'RECEIVE' ) {
@@ -13,7 +14,7 @@ const testStore = {
 		return state;
 	},
 	selectors: {
-		getFoo: ( state ) => state,
+		getFoo: getFooSelector,
 	},
 };
 
@@ -30,12 +31,16 @@ describe( 'getIsResolving', () => {
 		registry.registerStore( 'testStore', testStore );
 	} );
 
+	const DEPRECATION_MESSAGE =
+		'wp.data.select( store ).getIsResolving is deprecated since version 6.6 and will be removed in version 6.8. Please use wp.data.select( store ).getResolutionState instead.';
+
 	it( 'should return undefined if no state by reducerKey, selectorName', () => {
 		const result = registry
 			.select( 'testStore' )
 			.getIsResolving( 'getFoo', [] );
 
 		expect( result ).toBe( undefined );
+		expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
 	} );
 
 	it( 'should return undefined if state by reducerKey, selectorName, but not args', () => {
@@ -56,7 +61,7 @@ describe( 'getIsResolving', () => {
 		expect( result ).toBe( true );
 	} );
 
-	it( 'should normalize args ard return the right value', () => {
+	it( 'should normalize args and return the right value', () => {
 		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [] );
 		const { getIsResolving } = registry.select( 'testStore' );
 
@@ -325,3 +330,156 @@ describe( 'getResolutionError', () => {
 		).toBeFalsy();
 	} );
 } );
+
+describe( 'hasResolvingSelectors', () => {
+	let registry;
+	beforeEach( () => {
+		registry = createRegistry();
+		registry.registerStore( 'testStore', testStore );
+	} );
+
+	it( 'returns false if no requests have started', () => {
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'returns false if all requests have finished', () => {
+		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [] );
+		registry.dispatch( 'testStore' ).finishResolution( 'getFoo', [] );
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'returns true if has started but not finished', () => {
+		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [] );
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( true );
+	} );
+} );
+
+describe( 'countSelectorsByStatus', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createRegistry();
+		registry.registerStore( 'store', {
+			reducer: ( state = null, action ) => {
+				if ( action.type === 'RECEIVE' ) {
+					return action.items;
+				}
+
+				return state;
+			},
+			selectors: {
+				getFoo: ( state ) => state,
+				getBar: ( state ) => state,
+				getBaz: ( state ) => state,
+				getFailingFoo: ( state ) => state,
+				getFailingBar: ( state ) => state,
+			},
+			resolvers: {
+				getFailingFoo: () => {
+					throw new Error( 'error fetching' );
+				},
+				getFailingBar: () => {
+					throw new Error( 'error fetching' );
+				},
+			},
+		} );
+	} );
+
+	it( 'counts selectors properly by status, excluding missing statuses', () => {
+		registry.dispatch( 'store' ).startResolution( 'getFoo', [] );
+		registry.dispatch( 'store' ).startResolution( 'getBar', [] );
+		registry.dispatch( 'store' ).startResolution( 'getBaz', [] );
+		registry.dispatch( 'store' ).finishResolution( 'getFoo', [] );
+		registry.dispatch( 'store' ).finishResolution( 'getBaz', [] );
+
+		const { countSelectorsByStatus } = registry.select( 'store' );
+		const result = countSelectorsByStatus();
+
+		expect( result ).toEqual( {
+			finished: 2,
+			resolving: 1,
+		} );
+	} );
+
+	it( 'counts errors properly', async () => {
+		registry.dispatch( 'store' ).startResolution( 'getFoo', [] );
+		await resolve( registry, 'getFailingFoo' );
+		await resolve( registry, 'getFailingBar' );
+		registry.dispatch( 'store' ).finishResolution( 'getFoo', [] );
+
+		const { countSelectorsByStatus } = registry.select( 'store' );
+		const result = countSelectorsByStatus();
+
+		expect( result ).toEqual( {
+			finished: 1,
+			error: 2,
+		} );
+	} );
+
+	it( 'applies memoization and returns the same object for the same state', () => {
+		const { countSelectorsByStatus } = registry.select( 'store' );
+
+		expect( countSelectorsByStatus() ).toBe( countSelectorsByStatus() );
+
+		registry.dispatch( 'store' ).startResolution( 'getFoo', [] );
+		registry.dispatch( 'store' ).finishResolution( 'getFoo', [] );
+
+		expect( countSelectorsByStatus() ).toBe( countSelectorsByStatus() );
+	} );
+
+	it( 'returns a new object when different state is provided', () => {
+		const { countSelectorsByStatus } = registry.select( 'store' );
+
+		const result1 = countSelectorsByStatus();
+
+		registry.dispatch( 'store' ).startResolution( 'getFoo', [] );
+		registry.dispatch( 'store' ).finishResolution( 'getFoo', [] );
+
+		const result2 = countSelectorsByStatus();
+
+		expect( result1 ).not.toBe( result2 );
+	} );
+} );
+
+describe( 'Selector arguments normalization', () => {
+	let registry;
+	beforeEach( () => {
+		registry = createRegistry();
+		registry.registerStore( 'testStore', testStore );
+	} );
+
+	it( 'should call normalization method on target selector if exists', () => {
+		const normalizationFunction = jest.fn( ( args ) => {
+			return args.map( Number );
+		} );
+		getFooSelector.__unstableNormalizeArgs = normalizationFunction;
+
+		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [ 123 ] );
+		const { getIsResolving, hasStartedResolution, hasFinishedResolution } =
+			registry.select( 'testStore' );
+
+		expect( getIsResolving( 'getFoo', [ '123' ] ) ).toBe( true );
+		expect( normalizationFunction ).toHaveBeenCalledWith( [ '123' ] );
+
+		expect( hasStartedResolution( 'getFoo', [ '123' ] ) ).toBe( true );
+		expect( normalizationFunction ).toHaveBeenCalledWith( [ '123' ] );
+
+		expect( normalizationFunction ).toHaveBeenCalledTimes( 2 );
+
+		registry.dispatch( 'testStore' ).finishResolution( 'getFoo', [ 123 ] );
+
+		expect( hasFinishedResolution( 'getFoo', [ '123' ] ) ).toBe( true );
+		expect( normalizationFunction ).toHaveBeenCalledWith( [ '123' ] );
+
+		getFooSelector.__unstableNormalizeArgs = undefined;
+	} );
+} );
diff --git a/packages/data/src/redux-store/metadata/utils.ts b/packages/data/src/redux-store/metadata/utils.ts
index c08226f97af952..a6e7babca76cb9 100644
--- a/packages/data/src/redux-store/metadata/utils.ts
+++ b/packages/data/src/redux-store/metadata/utils.ts
@@ -7,7 +7,7 @@ import type { AnyAction, Reducer } from 'redux';
  * Higher-order reducer creator which creates a combined reducer object, keyed
  * by a property on the action object.
  *
- * @param  actionProperty Action property by which to key object.
+ * @param actionProperty Action property by which to key object.
  * @return Higher-order reducer.
  */
 export const onSubKey =
@@ -42,7 +42,7 @@ export const onSubKey =
  * Normalize selector argument array by defaulting `undefined` value to an empty array
  * and removing trailing `undefined` values.
  *
- * @param  args Selector argument array
+ * @param args Selector argument array
  * @return Normalized state key array
  */
 export function selectorArgsToStateKey( args: unknown[] | null | undefined ) {
diff --git a/packages/data/src/redux-store/test/combine-reducers.js b/packages/data/src/redux-store/test/combine-reducers.js
new file mode 100644
index 00000000000000..d7673cf95664fd
--- /dev/null
+++ b/packages/data/src/redux-store/test/combine-reducers.js
@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { combineReducers } from '../combine-reducers';
+
+function counterReducer( count = 0, action ) {
+	if ( action.type === 'INC' ) {
+		return count + 1;
+	}
+	return count;
+}
+
+describe( 'combineReducers', () => {
+	it( 'initializes state', () => {
+		const reducer = combineReducers( { foo: counterReducer } );
+		expect( reducer( undefined, { type: 'INIT' } ) ).toEqual( { foo: 0 } );
+	} );
+
+	it( 'dispatches actions to subreducers', () => {
+		const reducer = combineReducers( { foo: counterReducer } );
+		expect( reducer( { foo: 1 }, { type: 'INC' } ) ).toEqual( { foo: 2 } );
+	} );
+
+	it( 'returns identical state when there is no change', () => {
+		const reducer = combineReducers( { foo: counterReducer } );
+		const state = { foo: 1 };
+		expect( reducer( state, { type: 'NOOP' } ) ).toBe( state );
+	} );
+
+	it( 'returns identical substate when there is no change', () => {
+		const reducer = combineReducers( {
+			foo: counterReducer,
+			bar: combineReducers( { baz: ( s ) => s } ),
+		} );
+		const prevState = { foo: 1, bar: { baz: 1 } };
+		const nextState = reducer( prevState, { type: 'INC' } );
+		expect( nextState.foo ).toBe( 2 ); // changed
+		expect( nextState.bar ).toBe( prevState.bar ); // not changed
+	} );
+
+	it( 'does not mind undefined state', () => {
+		const reducer = combineReducers( { foo: ( s ) => s } );
+		// combineReducers from Redux would throw an exception when a reducer returns
+		// `undefined` state, but we don't mind and treat is as any other value.
+		expect( reducer( undefined, { type: 'INIT' } ) ).toEqual( {
+			foo: undefined,
+		} );
+	} );
+
+	it( 'does not mind unknown state keys', () => {
+		const reducer = combineReducers( { foo: counterReducer } );
+		// combineReducers from Redux would warn about the unknown `bar` key as
+		// there is no reducer for it, but we don't mind and just ignore it.
+		expect( reducer( { foo: 1, bar: 1 }, { type: 'INC' } ) ).toEqual( {
+			foo: 2,
+		} );
+	} );
+
+	it( 'supports a "unit" reducer with no subreducers', () => {
+		const reducer = combineReducers( {} );
+		const initialState = reducer( undefined, { type: 'INIT' } );
+		expect( initialState ).toEqual( {} );
+		const nextState = reducer( initialState, { type: 'INC' } );
+		expect( nextState ).toBe( initialState );
+	} );
+} );
diff --git a/packages/data/src/redux-store/test/index.js b/packages/data/src/redux-store/test/index.js
index 1d36daababaa36..1251051c4c9d9a 100644
--- a/packages/data/src/redux-store/test/index.js
+++ b/packages/data/src/redux-store/test/index.js
@@ -4,8 +4,6 @@
 import { createRegistry } from '../../registry';
 import { createRegistryControl } from '../../factory';
 
-jest.useRealTimers();
-
 describe( 'controls', () => {
 	let registry;
 
@@ -288,3 +286,75 @@ describe( 'resolveSelect', () => {
 		] );
 	} );
 } );
+
+describe( 'normalizing args', () => {
+	it( 'should call the __unstableNormalizeArgs method of the selector for both the selector and the resolver', async () => {
+		const registry = createRegistry();
+		const selector = () => {};
+
+		const normalizingFunction = jest.fn( ( ...args ) => args );
+
+		selector.__unstableNormalizeArgs = normalizingFunction;
+
+		registry.registerStore( 'store', {
+			reducer: () => {},
+			selectors: {
+				getItems: selector,
+			},
+			resolvers: {
+				getItems: () => 'items',
+			},
+		} );
+		registry.select( 'store' ).getItems( 'foo', 'bar' );
+
+		expect( normalizingFunction ).toHaveBeenCalledWith( [ 'foo', 'bar' ] );
+
+		// Needs to be called twice:
+		// 1. When the selector is called.
+		// 2. When the resolver is fullfilled.
+		expect( normalizingFunction ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'should not call the __unstableNormalizeArgs method if there are no arguments passed to the selector (and thus the resolver)', async () => {
+		const registry = createRegistry();
+		const selector = () => {};
+
+		selector.__unstableNormalizeArgs = jest.fn( ( ...args ) => args );
+
+		registry.registerStore( 'store', {
+			reducer: () => {},
+			selectors: {
+				getItems: selector,
+			},
+			resolvers: {
+				getItems: () => 'items',
+			},
+		} );
+
+		// Called with no args so the __unstableNormalizeArgs method should not be called.
+		registry.select( 'store' ).getItems();
+
+		expect( selector.__unstableNormalizeArgs ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should call the __unstableNormalizeArgs method on the selectors without resolvers', async () => {
+		const registry = createRegistry();
+		const selector = () => {};
+
+		selector.__unstableNormalizeArgs = jest.fn( ( ...args ) => args );
+
+		registry.registerStore( 'store', {
+			reducer: () => {},
+			selectors: {
+				getItems: selector,
+			},
+		} );
+
+		registry.select( 'store' ).getItems( 'foo', 'bar' );
+
+		expect( selector.__unstableNormalizeArgs ).toHaveBeenCalledWith( [
+			'foo',
+			'bar',
+		] );
+	} );
+} );
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index 92638b02768db9..3e7a8fdd8b5a07 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,7 @@ import deprecated from '@wordpress/deprecated';
 import createReduxStore from './redux-store';
 import coreDataStore from './store';
 import { createEmitter } from './utils/emitter';
+import { lock, unlock } from './lock-unlock';
 
 /** @typedef {import('./types').StoreDescriptor} StoreDescriptor */
 
@@ -43,10 +39,11 @@ import { createEmitter } from './utils/emitter';
  * @property {Function} registerStore registers store.
  */
 
-function isObject( object ) {
-	return object !== null && typeof object === 'object';
+function getStoreName( storeNameOrDescriptor ) {
+	return typeof storeNameOrDescriptor === 'string'
+		? storeNameOrDescriptor
+		: storeNameOrDescriptor.name;
 }
-
 /**
  * Creates a new store registry, given an optional object of initial store
  * configurations.
@@ -59,7 +56,7 @@ function isObject( object ) {
 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.
@@ -69,14 +66,36 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	}
 
 	/**
-	 * Subscribe to changes to any data.
+	 * Subscribe to changes to any data, either in all stores in registry, or
+	 * in one specific store.
 	 *
-	 * @param {Function} listener Listener function.
+	 * @param {Function}                listener              Listener function.
+	 * @param {string|StoreDescriptor?} storeNameOrDescriptor Optional store name.
 	 *
 	 * @return {Function} Unsubscribe function.
 	 */
-	const subscribe = ( listener ) => {
-		return emitter.subscribe( listener );
+	const subscribe = ( listener, storeNameOrDescriptor ) => {
+		// subscribe to all stores
+		if ( ! storeNameOrDescriptor ) {
+			return emitter.subscribe( listener );
+		}
+
+		// subscribe to one store
+		const storeName = getStoreName( storeNameOrDescriptor );
+		const store = stores[ storeName ];
+		if ( store ) {
+			return store.subscribe( listener );
+		}
+
+		// Trying to access a store that hasn't been registered,
+		// this is a pattern rarely used but seen in some places.
+		// We fallback to global `subscribe` here for backward-compatibility for now.
+		// See https://github.com/WordPress/gutenberg/pull/27466 for more info.
+		if ( ! parent ) {
+			return emitter.subscribe( listener );
+		}
+
+		return parent.subscribe( listener, storeNameOrDescriptor );
 	};
 
 	/**
@@ -88,10 +107,8 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {*} The selector's returned value.
 	 */
 	function select( storeNameOrDescriptor ) {
-		const storeName = isObject( storeNameOrDescriptor )
-			? storeNameOrDescriptor.name
-			: storeNameOrDescriptor;
-		listeningStores.add( storeName );
+		const storeName = getStoreName( storeNameOrDescriptor );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSelectors();
@@ -101,11 +118,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;
 		}
 	}
 
@@ -121,10 +139,8 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {Object} Each key of the object matches the name of a selector.
 	 */
 	function resolveSelect( storeNameOrDescriptor ) {
-		const storeName = isObject( storeNameOrDescriptor )
-			? storeNameOrDescriptor.name
-			: storeNameOrDescriptor;
-		listeningStores.add( storeName );
+		const storeName = getStoreName( storeNameOrDescriptor );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getResolveSelectors();
@@ -145,10 +161,8 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {Object} Object containing the store's suspense-wrapped selectors.
 	 */
 	function suspendSelect( storeNameOrDescriptor ) {
-		const storeName = isObject( storeNameOrDescriptor )
-			? storeNameOrDescriptor.name
-			: storeNameOrDescriptor;
-		listeningStores.add( storeName );
+		const storeName = getStoreName( storeNameOrDescriptor );
+		listeningStores?.add( storeName );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getSuspendSelectors();
@@ -166,9 +180,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @return {*} The action's returned value.
 	 */
 	function dispatch( storeNameOrDescriptor ) {
-		const storeName = isObject( storeNameOrDescriptor )
-			? storeNameOrDescriptor.name
-			: storeNameOrDescriptor;
+		const storeName = getStoreName( storeNameOrDescriptor );
 		const store = stores[ storeName ];
 		if ( store ) {
 			return store.getActions();
@@ -181,23 +193,36 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	// Deprecated
 	// TODO: Remove this after `use()` is removed.
 	function withPlugins( attributes ) {
-		return mapValues( attributes, ( attribute, key ) => {
-			if ( typeof attribute !== 'function' ) {
-				return attribute;
-			}
-			return function () {
-				return registry[ key ].apply( null, arguments );
-			};
-		} );
+		return Object.fromEntries(
+			Object.entries( attributes ).map( ( [ key, attribute ] ) => {
+				if ( typeof attribute !== 'function' ) {
+					return [ key, attribute ];
+				}
+				return [
+					key,
+					function () {
+						return registry[ key ].apply( null, arguments );
+					},
+				];
+			} )
+		);
 	}
 
 	/**
 	 * Registers a store instance.
 	 *
-	 * @param {string} name  Store registry name.
-	 * @param {Object} store Store instance object (getSelectors, getActions, subscribe).
+	 * @param {string}   name        Store registry name.
+	 * @param {Function} createStore Function that creates a store object (getSelectors, getActions, subscribe).
 	 */
-	function registerStoreInstance( name, store ) {
+	function registerStoreInstance( name, createStore ) {
+		if ( stores[ name ] ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Store "' + name + '" is already registered.' );
+			return stores[ name ];
+		}
+
+		const store = createStore();
+
 		if ( typeof store.getSelectors !== 'function' ) {
 			throw new TypeError( 'store.getSelectors must be a function' );
 		}
@@ -229,6 +254,24 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		};
 		stores[ name ] = store;
 		store.subscribe( globalListener );
+
+		// Copy private actions and selectors from the parent store.
+		if ( parent ) {
+			try {
+				unlock( store.store ).registerPrivateActions(
+					unlock( parent ).privateActionsOf( name )
+				);
+				unlock( store.store ).registerPrivateSelectors(
+					unlock( parent ).privateSelectorsOf( name )
+				);
+			} catch ( e ) {
+				// unlock() throws if store.store was not locked.
+				// The error indicates there's nothing to do here so let's
+				// ignore it.
+			}
+		}
+
+		return store;
 	}
 
 	/**
@@ -237,7 +280,9 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 	 * @param {StoreDescriptor} store Store descriptor.
 	 */
 	function register( store ) {
-		registerStoreInstance( store.name, store.instantiate( registry ) );
+		registerStoreInstance( store.name, () =>
+			store.instantiate( registry )
+		);
 	}
 
 	function registerGenericStore( name, store ) {
@@ -245,7 +290,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			since: '5.9',
 			alternative: 'wp.data.register( storeDescriptor )',
 		} );
-		registerStoreInstance( name, store );
+		registerStoreInstance( name, () => store );
 	}
 
 	/**
@@ -261,50 +306,30 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 			throw new TypeError( 'Must specify store reducer' );
 		}
 
-		const store = createReduxStore( storeName, options ).instantiate(
-			registry
+		const store = registerStoreInstance( storeName, () =>
+			createReduxStore( storeName, options ).instantiate( registry )
 		);
-		registerStoreInstance( storeName, store );
+
 		return store.store;
 	}
 
-	/**
-	 * Subscribe handler to a store.
-	 *
-	 * @param {string|StoreDescriptor} storeNameOrDescriptor The store name.
-	 * @param {Function}               handler               The function subscribed to the store.
-	 * @return {Function} A function to unsubscribe the handler.
-	 */
-	function __unstableSubscribeStore( storeNameOrDescriptor, handler ) {
-		const storeName = isObject( storeNameOrDescriptor )
-			? storeNameOrDescriptor.name
-			: storeNameOrDescriptor;
-
-		const store = stores[ storeName ];
-		if ( store ) {
-			return store.subscribe( handler );
-		}
-
-		// Trying to access a store that hasn't been registered,
-		// this is a pattern rarely used but seen in some places.
-		// We fallback to regular `subscribe` here for backward-compatibility for now.
-		// See https://github.com/WordPress/gutenberg/pull/27466 for more info.
-		if ( ! parent ) {
-			return subscribe( handler );
+	function batch( callback ) {
+		// If we're already batching, just call the callback.
+		if ( emitter.isPaused ) {
+			callback();
+			return;
 		}
 
-		return parent.__unstableSubscribeStore(
-			storeNameOrDescriptor,
-			handler
-		);
-	}
-
-	function batch( callback ) {
 		emitter.pause();
 		Object.values( stores ).forEach( ( store ) => store.emitter.pause() );
-		callback();
-		emitter.resume();
-		Object.values( stores ).forEach( ( store ) => store.emitter.resume() );
+		try {
+			callback();
+		} finally {
+			emitter.resume();
+			Object.values( stores ).forEach( ( store ) =>
+				store.emitter.resume()
+			);
+		}
 	}
 
 	let registry = {
@@ -321,7 +346,6 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		registerGenericStore,
 		registerStore,
 		__unstableMarkListeningStores,
-		__unstableSubscribeStore,
 	};
 
 	//
@@ -350,5 +374,24 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
 		parent.subscribe( globalListener );
 	}
 
-	return withPlugins( registry );
+	const registryWithPlugins = withPlugins( registry );
+	lock( registryWithPlugins, {
+		privateActionsOf: ( name ) => {
+			try {
+				return unlock( stores[ name ].store ).privateActions;
+			} catch ( e ) {
+				// unlock() throws an error the store was not locked – this means
+				// there no private actions are available
+				return {};
+			}
+		},
+		privateSelectorsOf: ( name ) => {
+			try {
+				return unlock( stores[ name ].store ).privateSelectors;
+			} catch ( e ) {
+				return {};
+			}
+		},
+	} );
+	return registryWithPlugins;
 }
diff --git a/packages/data/src/resolvers-cache-middleware.js b/packages/data/src/resolvers-cache-middleware.js
index 1bb0fbaec98a4e..13a0214a8bc930 100644
--- a/packages/data/src/resolvers-cache-middleware.js
+++ b/packages/data/src/resolvers-cache-middleware.js
@@ -1,59 +1,47 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import coreDataStore from './store';
-
 /** @typedef {import('./registry').WPDataRegistry} WPDataRegistry */
 
 /**
  * Creates a middleware handling resolvers cache invalidation.
  *
- * @param {WPDataRegistry} registry   The registry reference for which to create
- *                                    the middleware.
- * @param {string}         reducerKey The namespace for which to create the
- *                                    middleware.
+ * @param {WPDataRegistry} registry  Registry for which to create the middleware.
+ * @param {string}         storeName Name of the store for which to create the middleware.
  *
  * @return {Function} Middleware function.
  */
 const createResolversCacheMiddleware =
-	( registry, reducerKey ) => () => ( next ) => ( action ) => {
-		const resolvers = registry
-			.select( coreDataStore )
-			.getCachedResolvers( reducerKey );
-		Object.entries( resolvers ).forEach(
-			( [ selectorName, resolversByArgs ] ) => {
-				const resolver = get( registry.stores, [
-					reducerKey,
-					'resolvers',
-					selectorName,
-				] );
-				if ( ! resolver || ! resolver.shouldInvalidate ) {
+	( registry, storeName ) => () => ( next ) => ( action ) => {
+		const resolvers = registry.select( storeName ).getCachedResolvers();
+		const resolverEntries = Object.entries( resolvers );
+		resolverEntries.forEach( ( [ selectorName, resolversByArgs ] ) => {
+			const resolver =
+				registry.stores[ storeName ]?.resolvers?.[ selectorName ];
+			if ( ! resolver || ! resolver.shouldInvalidate ) {
+				return;
+			}
+			resolversByArgs.forEach( ( value, args ) => {
+				// Works around a bug in `EquivalentKeyMap` where `map.delete` merely sets an entry value
+				// to `undefined` and `map.forEach` then iterates also over these orphaned entries.
+				if ( value === undefined ) {
 					return;
 				}
-				resolversByArgs.forEach( ( value, args ) => {
-					// resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
-					// If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
-					// to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
-					if (
-						( value?.status !== 'finished' &&
-							value?.status !== 'error' ) ||
-						! resolver.shouldInvalidate( action, ...args )
-					) {
-						return;
-					}
 
-					// Trigger cache invalidation
-					registry
-						.dispatch( coreDataStore )
-						.invalidateResolution( reducerKey, selectorName, args );
-				} );
-			}
-		);
+				// resolversByArgs is the map Map([ args ] => boolean) storing the cache resolution status for a given selector.
+				// If the value is "finished" or "error" it means this resolver has finished its resolution which means we need
+				// to invalidate it, if it's true it means it's inflight and the invalidation is not necessary.
+				if ( value.status !== 'finished' && value.status !== 'error' ) {
+					return;
+				}
+
+				if ( ! resolver.shouldInvalidate( action, ...args ) ) {
+					return;
+				}
+
+				// Trigger cache invalidation
+				registry
+					.dispatch( storeName )
+					.invalidateResolution( selectorName, args );
+			} );
+		} );
 		return next( action );
 	};
 
diff --git a/packages/data/src/select.ts b/packages/data/src/select.ts
new file mode 100644
index 00000000000000..263502a5a1fba2
--- /dev/null
+++ b/packages/data/src/select.ts
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import type { AnyConfig, CurriedSelectorsOf, StoreDescriptor } from './types';
+import defaultRegistry from './default-registry';
+
+/**
+ * Given a store descriptor, returns an object of the store's selectors.
+ * The selector functions are been pre-bound to pass the current state automatically.
+ * As a consumer, you need only pass arguments of the selector, if applicable.
+ *
+ *
+ * @param storeNameOrDescriptor The store descriptor. The legacy calling convention
+ *                              of passing the store name is also supported.
+ *
+ * @example
+ * ```js
+ * import { select } from '@wordpress/data';
+ * import { store as myCustomStore } from 'my-custom-store';
+ *
+ * select( myCustomStore ).getPrice( 'hammer' );
+ * ```
+ *
+ * @return Object containing the store's selectors.
+ */
+export function select< T extends StoreDescriptor< AnyConfig > >(
+	storeNameOrDescriptor: string | T
+): CurriedSelectorsOf< T > {
+	return defaultRegistry.select( storeNameOrDescriptor );
+}
diff --git a/packages/data/src/test/controls.js b/packages/data/src/test/controls.js
index adcaccf06dae5d..97c503b92c0c4d 100644
--- a/packages/data/src/test/controls.js
+++ b/packages/data/src/test/controls.js
@@ -3,8 +3,6 @@
  */
 import { createRegistry, controls } from '..';
 
-jest.useRealTimers();
-
 describe( 'controls', () => {
 	// Create a registry with store to test select controls.
 	function createSelectTestRegistry() {
diff --git a/packages/data/src/test/privateAPIs.js b/packages/data/src/test/privateAPIs.js
new file mode 100644
index 00000000000000..22118ec58caa1d
--- /dev/null
+++ b/packages/data/src/test/privateAPIs.js
@@ -0,0 +1,420 @@
+/**
+ * Internal dependencies
+ */
+import { createRegistry } from '../registry';
+import createReduxStore from '../redux-store';
+import { unlock } from '../lock-unlock';
+import { createRegistrySelector } from '../factory';
+
+describe( 'Private data APIs', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createRegistry();
+	} );
+
+	function getPublicPrice( state ) {
+		return state.price;
+	}
+	function getSecretDiscount( state ) {
+		return state.secretDiscount;
+	}
+	function setSecretDiscount( price ) {
+		return { type: 'SET_PRIVATE_PRICE', price };
+	}
+
+	function setPublicPrice( price ) {
+		return { type: 'SET_PUBLIC_PRICE', price };
+	}
+	const storeName = 'grocer';
+	const storeDescriptor = {
+		selectors: {
+			getPublicPrice,
+			getState: ( state ) => state,
+		},
+		actions: { setPublicPrice },
+		reducer: ( state = { price: 1000, secretDiscount: 800 }, action ) => {
+			if ( action.type === 'SET_PRIVATE_PRICE' ) {
+				return {
+					...state,
+					secretDiscount: action.price,
+				};
+			} else if ( action.type === 'SET_PUBLIC_PRICE' ) {
+				return {
+					...state,
+					price: action.price,
+				};
+			}
+			return state;
+		},
+	};
+	function createStore() {
+		const groceryStore = createReduxStore( storeName, storeDescriptor );
+		registry.register( groceryStore );
+		return groceryStore;
+	}
+
+	describe( 'private selectors', () => {
+		it( 'should expose public selectors by default', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( groceryStore, {
+				getSecretDiscount,
+			} );
+
+			const publicSelectors = registry.select( groceryStore );
+			expect( publicSelectors.getPublicPrice ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'should not expose private selectors by default', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const publicSelectors = registry.select( groceryStore );
+			expect( publicSelectors.getSecretDiscount ).toEqual( undefined );
+		} );
+
+		it( 'should make private selectors available via unlock()', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const privateSelectors = unlock( registry.select( groceryStore ) );
+			expect( privateSelectors.getSecretDiscount ).toEqual(
+				expect.any( Function )
+			);
+			// The public selector is still accessible:
+			expect( privateSelectors.getPublicPrice ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'should support combination of private selectors and resolvers', async () => {
+			const testStore = createReduxStore( 'test', {
+				reducer: ( state = {}, action ) => {
+					if ( action.type === 'RECEIVE' ) {
+						return { ...state, [ action.key ]: action.value };
+					}
+					return state;
+				},
+				selectors: {
+					get: ( state, key ) => state[ key ],
+				},
+				resolvers: {
+					get:
+						( key ) =>
+						async ( { dispatch } ) => {
+							const value = await ( 'resolved-' + key );
+							dispatch( { type: 'RECEIVE', key, value } );
+						},
+				},
+			} );
+			unlock( testStore ).registerPrivateSelectors( {
+				peek: ( state, key ) => state[ key ],
+			} );
+			registry.register( testStore );
+
+			await registry.resolveSelect( testStore ).get( 'x' );
+			expect( unlock( registry.select( testStore ) ).peek( 'x' ) ).toBe(
+				'resolved-x'
+			);
+		} );
+
+		it( 'should give private selectors access to the state', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const privateSelectors = unlock( registry.select( groceryStore ) );
+			expect( privateSelectors.getSecretDiscount() ).toEqual( 800 );
+		} );
+
+		it( 'should support public selectors accessed via unlock()', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const unlockedSelectors = unlock( registry.select( groceryStore ) );
+			expect( unlockedSelectors.getPublicPrice() ).toEqual( 1000 );
+		} );
+
+		it( 'should return stable references to selectors', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			const select = unlock( registry.select( groceryStore ) );
+			expect( select.getPublicPrice ).toBe( select.getPublicPrice );
+			expect( select.getSecretDiscount ).toBe( select.getSecretDiscount );
+		} );
+
+		it( 'should support registerStore', () => {
+			const groceryStore = registry.registerStore(
+				storeName,
+				storeDescriptor
+			);
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const privateSelectors = unlock( registry.select( storeName ) );
+			expect( privateSelectors.getSecretDiscount() ).toEqual( 800 );
+		} );
+
+		it( 'should support mixing createReduxStore and registerStore', () => {
+			createReduxStore( storeName, storeDescriptor );
+			const groceryStore2 = registry.registerStore(
+				storeName,
+				storeDescriptor
+			);
+			unlock( groceryStore2 ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+
+			const privateSelectors = unlock( registry.select( storeName ) );
+			expect( privateSelectors.getSecretDiscount() ).toEqual( 800 );
+		} );
+
+		it( 'should support sub registries', () => {
+			const groceryStore = registry.registerStore(
+				storeName,
+				storeDescriptor
+			);
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			const subRegistry = createRegistry( {}, registry );
+			subRegistry.registerStore( storeName, storeDescriptor );
+
+			const parentPrivateSelectors = unlock(
+				registry.select( storeName )
+			);
+			expect( parentPrivateSelectors.getSecretDiscount() ).toEqual( 800 );
+
+			const subPrivateSelectors = unlock(
+				subRegistry.select( storeName )
+			);
+			expect( subPrivateSelectors.getSecretDiscount() ).toEqual( 800 );
+		} );
+
+		it( 'should support private registry selectors', () => {
+			const groceryStore = createStore();
+			const otherStore = createReduxStore( 'other', {
+				reducer: ( state = {} ) => state,
+			} );
+			unlock( otherStore ).registerPrivateSelectors( {
+				getPrice: createRegistrySelector(
+					( select ) => () => select( groceryStore ).getPublicPrice()
+				),
+			} );
+			registry.register( otherStore );
+			const privateSelectors = unlock( registry.select( otherStore ) );
+			expect( privateSelectors.getPrice() ).toEqual( 1000 );
+		} );
+
+		it( 'should support calling a private registry selector from a public selector', () => {
+			const groceryStore = createStore();
+			const getPriceWithShipping = createRegistrySelector(
+				( select ) => () => select( groceryStore ).getPublicPrice() + 5
+			);
+			const store = createReduxStore( 'a', {
+				reducer: ( state = {} ) => state,
+				selectors: {
+					getPriceWithShippingAndTax: ( state ) =>
+						getPriceWithShipping( state ) * 1.1,
+				},
+			} );
+			unlock( store ).registerPrivateSelectors( {
+				getPriceWithShipping,
+			} );
+			registry.register( store );
+			expect(
+				registry.select( store ).getPriceWithShippingAndTax()
+			).toEqual( 1105.5 );
+		} );
+	} );
+
+	describe( 'private actions', () => {
+		it( 'should expose public actions by default', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( groceryStore, {
+				setSecretDiscount,
+			} );
+			const publicActions = registry.dispatch( groceryStore );
+			expect( publicActions.setPublicPrice ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'should not expose private actions by default', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const publicActions = registry.dispatch( groceryStore );
+			expect( publicActions.setSecretDiscount ).toEqual( undefined );
+		} );
+
+		it( 'should make private actions available via unlock)', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			expect( privateActions.setSecretDiscount ).toEqual(
+				expect.any( Function )
+			);
+			// The public action is still accessible:
+			expect( privateActions.setPublicPrice ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'should work with both private actions and private selectors at the same time', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			const privateSelectors = unlock( registry.select( groceryStore ) );
+			expect( privateActions.setSecretDiscount ).toEqual(
+				expect.any( Function )
+			);
+			expect( privateSelectors.getSecretDiscount ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'should dispatch private actions like regular actions', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			privateActions.setSecretDiscount( 400 );
+			expect(
+				registry.select( groceryStore ).getState().secretDiscount
+			).toEqual( 400 );
+		} );
+
+		it( 'should return stable references to actions', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const disp = unlock( registry.dispatch( groceryStore ) );
+			expect( disp.setPublicPrice ).toBe( disp.setPublicPrice );
+			expect( disp.setSecretDiscount ).toBe( disp.setSecretDiscount );
+		} );
+
+		it( 'should dispatch public actions on the unlocked store', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			privateActions.setPublicPrice( 400 );
+			expect( registry.select( groceryStore ).getState().price ).toEqual(
+				400
+			);
+		} );
+
+		it( 'should dispatch private action thunks like regular actions', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscountThunk:
+					( price ) =>
+					( { dispatch } ) => {
+						dispatch( { type: 'SET_PRIVATE_PRICE', price } );
+					},
+			} );
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			privateActions.setSecretDiscountThunk( 100 );
+			expect(
+				unlock( registry.select( groceryStore ) ).getSecretDiscount()
+			).toEqual( 100 );
+		} );
+
+		it( 'should expose unlocked private selectors and actions to thunks', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+				doubleSecretDiscount() {
+					return ( { dispatch, select } ) => {
+						dispatch.setSecretDiscount(
+							select.getSecretDiscount() * 2
+						);
+					};
+				},
+			} );
+			const privateActions = unlock( registry.dispatch( groceryStore ) );
+			privateActions.setSecretDiscount( 100 );
+			privateActions.doubleSecretDiscount();
+			expect(
+				unlock( registry.select( groceryStore ) ).getSecretDiscount()
+			).toEqual( 200 );
+		} );
+
+		it( 'should support registerStore', () => {
+			const groceryStore = registry.registerStore(
+				storeName,
+				storeDescriptor
+			);
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const privateActions = unlock( registry.dispatch( storeName ) );
+			privateActions.setSecretDiscount( 400 );
+			expect(
+				registry.select( storeName ).getState().secretDiscount
+			).toEqual( 400 );
+		} );
+
+		it( 'should support sub registries', () => {
+			const groceryStore = createStore();
+			unlock( groceryStore ).registerPrivateSelectors( {
+				getSecretDiscount,
+			} );
+			unlock( groceryStore ).registerPrivateActions( {
+				setSecretDiscount,
+			} );
+			const subRegistry = createRegistry( {}, registry );
+			subRegistry.registerStore( storeName, storeDescriptor );
+
+			const parentPrivateActions = unlock(
+				registry.dispatch( storeName )
+			);
+			const parentPrivateSelectors = unlock(
+				registry.select( storeName )
+			);
+
+			const subPrivateActions = unlock(
+				subRegistry.dispatch( storeName )
+			);
+			const subPrivateSelectors = unlock(
+				subRegistry.select( storeName )
+			);
+
+			parentPrivateActions.setSecretDiscount( 400 );
+			subPrivateActions.setSecretDiscount( 478 );
+
+			expect( parentPrivateSelectors.getSecretDiscount() ).toEqual( 400 );
+			expect( subPrivateSelectors.getSecretDiscount() ).toEqual( 478 );
+		} );
+	} );
+} );
diff --git a/packages/data/src/test/registry-selectors.js b/packages/data/src/test/registry-selectors.js
new file mode 100644
index 00000000000000..b9e8e61a90a647
--- /dev/null
+++ b/packages/data/src/test/registry-selectors.js
@@ -0,0 +1,150 @@
+/**
+ * Internal dependencies
+ */
+import { createRegistry } from '../registry';
+import { createRegistrySelector } from '../factory';
+import { createSelector } from '..';
+import createReduxStore from '../redux-store';
+
+const getElementCount = createRegistrySelector( ( select ) => () => {
+	return select( 'elements' ).getElements().length;
+} );
+
+const getFilterValue = ( state ) => state;
+
+const getFilteredElements = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			const filter = getFilterValue( state );
+			const elements = select( 'elements' ).getElements();
+			if ( ! filter ) {
+				return elements;
+			}
+			return elements.filter( ( el ) => el.startsWith( filter ) );
+		},
+		( state ) => [
+			select( 'elements' ).getElements(),
+			getFilterValue( state ),
+		]
+	)
+);
+
+const elementsStore = createReduxStore( 'elements', {
+	reducer( state = [], action ) {
+		if ( action.type === 'ADD' ) {
+			return [ ...state, ...action.elements ];
+		}
+		return state;
+	},
+	actions: {
+		add: ( ...elements ) => ( { type: 'ADD', elements } ),
+	},
+	selectors: {
+		getElements: ( state ) => state,
+	},
+} );
+
+const uiStore = createReduxStore( 'ui', {
+	reducer( state = '', action ) {
+		if ( action.type === 'FILTER' ) {
+			return action.value;
+		}
+		return state;
+	},
+	actions: {
+		filter: ( value ) => ( { type: 'FILTER', value } ),
+	},
+	selectors: {
+		getFilterValue,
+		getElementCount,
+		getFilteredElements,
+	},
+} );
+
+describe( 'createRegistrySelector', () => {
+	it( 'can bind one selector to a registry', () => {
+		const registry = createRegistry();
+		registry.register( elementsStore );
+		registry.register( uiStore );
+
+		expect( registry.select( uiStore ).getElementCount() ).toBe( 0 );
+
+		registry.dispatch( elementsStore ).add( 'Carbon' );
+
+		expect( registry.select( uiStore ).getElementCount() ).toBe( 1 );
+	} );
+
+	it( 'can bind one selector to multiple registries (createRegistrySelector)', () => {
+		const registry1 = createRegistry();
+		const registry2 = createRegistry();
+
+		registry1.register( elementsStore );
+		registry1.register( uiStore );
+		registry2.register( elementsStore );
+		registry2.register( uiStore );
+
+		expect( registry1.select( uiStore ).getElementCount() ).toBe( 0 );
+		expect( registry2.select( uiStore ).getElementCount() ).toBe( 0 );
+
+		registry1.dispatch( elementsStore ).add( 'Carbon' );
+
+		expect( registry1.select( uiStore ).getElementCount() ).toBe( 1 );
+		expect( registry2.select( uiStore ).getElementCount() ).toBe( 0 );
+
+		registry2.dispatch( elementsStore ).add( 'Helium' );
+
+		expect( registry1.select( uiStore ).getElementCount() ).toBe( 1 );
+		expect( registry2.select( uiStore ).getElementCount() ).toBe( 1 );
+	} );
+
+	it( 'can bind one selector to multiple registries (createRegistrySelector + createSelector)', () => {
+		const registry1 = createRegistry();
+		registry1.register( elementsStore );
+		registry1.register( uiStore );
+		registry1.dispatch( elementsStore ).add( 'Carbon' );
+
+		const registry2 = createRegistry();
+		registry2.register( elementsStore );
+		registry2.register( uiStore );
+		registry2.dispatch( elementsStore ).add( 'Helium' );
+
+		// Expects the `getFilteredElements` to be bound separately and independently to the two registries
+		expect( registry1.select( uiStore ).getFilteredElements() ).toEqual( [
+			'Carbon',
+		] );
+		expect( registry2.select( uiStore ).getFilteredElements() ).toEqual( [
+			'Helium',
+		] );
+	} );
+
+	it( 'can bind a memoized selector to a registry', () => {
+		const registry = createRegistry();
+		registry.register( elementsStore );
+		registry.register( uiStore );
+
+		registry.dispatch( elementsStore ).add( 'Carbon', 'Nitrogen' );
+		registry.dispatch( uiStore ).filter( 'Ca' );
+
+		// check that `getFilteredElements` return value is a memoized array
+		const elements1 = registry.select( uiStore ).getFilteredElements();
+		expect( elements1 ).toEqual( [ 'Carbon' ] );
+		const elements2 = registry.select( uiStore ).getFilteredElements();
+		expect( elements2 ).toBe( elements1 ); // memoized
+
+		// check that adding a new element triggers recalculation
+		registry.dispatch( elementsStore ).add( 'Calcium' );
+
+		const elements3 = registry.select( uiStore ).getFilteredElements();
+		expect( elements3 ).toEqual( [ 'Carbon', 'Calcium' ] );
+		const elements4 = registry.select( uiStore ).getFilteredElements();
+		expect( elements4 ).toBe( elements3 ); // memoized
+
+		// check that changing the filter triggers recalculation
+		registry.dispatch( uiStore ).filter( 'Ni' );
+
+		const elements5 = registry.select( uiStore ).getFilteredElements();
+		expect( elements5 ).toEqual( [ 'Nitrogen' ] );
+		const elements6 = registry.select( uiStore ).getFilteredElements();
+		expect( elements6 ).toBe( elements5 ); // memoized
+	} );
+} );
diff --git a/packages/data/src/test/registry.js b/packages/data/src/test/registry.js
index 6a26e57c618dba..46b914d776f132 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
  */
@@ -6,14 +8,7 @@ import { createRegistrySelector } from '../factory';
 import createReduxStore from '../redux-store';
 import coreDataStore from '../store';
 
-beforeEach( () => {
-	jest.useFakeTimers( 'legacy' );
-} );
-
-afterEach( () => {
-	jest.runOnlyPendingTimers();
-	jest.useRealTimers();
-} );
+jest.useFakeTimers( { legacyFakeTimers: true } );
 
 describe( 'createRegistry', () => {
 	let registry;
@@ -486,41 +481,50 @@ describe( 'createRegistry', () => {
 	} );
 
 	describe( 'register', () => {
+		const store = createReduxStore( 'demo', {
+			reducer( state = 'OK', action ) {
+				if ( action.type === 'UPDATE' ) {
+					return 'UPDATED';
+				}
+				return state;
+			},
+			actions: {
+				update: () => ( { type: 'UPDATE' } ),
+			},
+			selectors: {
+				getValue: ( state ) => state,
+			},
+		} );
+
 		it( 'should work with the store descriptor as param for select', () => {
-			const store = createReduxStore( 'demo', {
-				reducer: ( state = 'OK' ) => state,
-				selectors: {
-					getValue: ( state ) => state,
-				},
-			} );
 			registry.register( store );
 
 			expect( registry.select( store ).getValue() ).toBe( 'OK' );
 		} );
 
 		it( 'should work with the store descriptor as param for dispatch', async () => {
-			const store = createReduxStore( 'demo', {
-				reducer( state = 'OK', action ) {
-					if ( action.type === 'UPDATE' ) {
-						return 'UPDATED';
-					}
-					return state;
-				},
-				actions: {
-					update() {
-						return { type: 'UPDATE' };
-					},
-				},
-				selectors: {
-					getValue: ( state ) => state,
-				},
-			} );
 			registry.register( store );
 
 			expect( registry.select( store ).getValue() ).toBe( 'OK' );
 			await registry.dispatch( store ).update();
 			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
 		} );
+
+		it( 'should keep the existing store instance on duplicate registration', async () => {
+			registry.register( store );
+
+			await registry.dispatch( store ).update();
+			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
+
+			registry.register( store );
+
+			// check that the state hasn't been reset back to `OK`, as a re-registration would do
+			expect( registry.select( store ).getValue() ).toBe( 'UPDATED' );
+
+			expect( console ).toHaveErroredWith(
+				'Store "demo" is already registered.'
+			);
+		} );
 	} );
 
 	describe( 'select', () => {
@@ -719,23 +723,66 @@ describe( 'createRegistry', () => {
 			const listener2 = jest.fn();
 			// useSelect subscribes to the stores differently,
 			// This test ensures batching works in this case as well.
-			const unsubscribe = registry.__unstableSubscribeStore(
-				'myAwesomeReducer',
-				listener2
+			const unsubscribe = registry.subscribe(
+				listener2,
+				'myAwesomeReducer'
 			);
 			registry.batch( () => {
 				store.dispatch( { type: 'dummy' } );
 				store.dispatch( { type: 'dummy' } );
 			} );
 			unsubscribe();
-
 			expect( listener2 ).toHaveBeenCalledTimes( 1 );
 		} );
+
+		it( 'should support nested batches', () => {
+			const store = registry.registerStore( 'myAwesomeReducer', {
+				reducer: ( state = 0 ) => state + 1,
+			} );
+			const listener = jest.fn();
+			subscribeWithUnsubscribe( listener );
+
+			registry.batch( () => {} );
+			expect( listener ).not.toHaveBeenCalled();
+
+			registry.batch( () => {
+				store.dispatch( { type: 'dummy' } );
+				registry.batch( () => {
+					store.dispatch( { type: 'dummy' } );
+					store.dispatch( { type: 'dummy' } );
+				} );
+				store.dispatch( { type: 'dummy' } );
+			} );
+			expect( listener ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should handle errors', () => {
+			const store = registry.registerStore( 'myAwesomeReducer', {
+				reducer: ( state = 0 ) => state + 1,
+			} );
+			const listener = jest.fn();
+			const error = new Error( 'Whoops' );
+			subscribeWithUnsubscribe( listener );
+
+			expect( () => {
+				registry.batch( () => {
+					throw error;
+				} );
+			} ).toThrow( error );
+			expect( listener ).not.toHaveBeenCalled();
+
+			registry.batch( () => {
+				store.dispatch( { type: 'dummy' } );
+				store.dispatch( { type: 'dummy' } );
+			} );
+			expect( listener ).toHaveBeenCalledTimes( 1 );
+		} );
 	} );
 
 	describe( 'use', () => {
 		it( 'should pass through options object to plugin', () => {
 			const expectedOptions = {};
+			const anyObject = expect.any( Object );
 			let actualOptions;
 
 			function plugin( _registry, options ) {
@@ -747,7 +794,7 @@ describe( 'createRegistry', () => {
 					Object.fromEntries(
 						Object.entries( registry ).map( ( [ key ] ) => {
 							if ( key === 'stores' ) {
-								return [ key, expect.any( Object ) ];
+								return [ key, anyObject ];
 							}
 							// TODO: Remove this after namsespaces is removed.
 							if ( key === 'namespaces' ) {
diff --git a/packages/data/src/types.ts b/packages/data/src/types.ts
index fe7d9061d3c5d8..8d69bf3e0eb728 100644
--- a/packages/data/src/types.ts
+++ b/packages/data/src/types.ts
@@ -6,7 +6,7 @@ import type { combineReducers as reduxCombineReducers } from 'redux';
 
 type MapOf< T > = { [ name: string ]: T };
 
-export type ActionCreator = Function | Generator;
+export type ActionCreator = ( ...args: any[] ) => any | Generator;
 export type Resolver = Function | Generator;
 export type Selector = Function;
 
@@ -33,7 +33,7 @@ export interface StoreDescriptor< Config extends AnyConfig > {
 export interface ReduxStoreConfig<
 	State,
 	ActionCreators extends MapOf< ActionCreator >,
-	Selectors
+	Selectors,
 > {
 	initialState?: State;
 	reducer: ( state: any, action: any ) => any;
@@ -43,6 +43,7 @@ export interface ReduxStoreConfig<
 	controls?: MapOf< Function >;
 }
 
+// Return type for the useSelect() hook.
 export type UseSelectReturn< F extends MapSelect | StoreDescriptor< any > > =
 	F extends MapSelect
 		? ReturnType< F >
@@ -50,6 +51,7 @@ export type UseSelectReturn< F extends MapSelect | StoreDescriptor< any > > =
 		? CurriedSelectorsOf< F >
 		: never;
 
+// Return type for the useDispatch() hook.
 export type UseDispatchReturn< StoreNameOrDescriptor > =
 	StoreNameOrDescriptor extends StoreDescriptor< any >
 		? ActionCreatorsOf< ConfigOf< StoreNameOrDescriptor > >
@@ -59,9 +61,12 @@ export type UseDispatchReturn< StoreNameOrDescriptor > =
 
 export type DispatchFunction = < StoreNameOrDescriptor >(
 	store: StoreNameOrDescriptor
-) => StoreNameOrDescriptor extends StoreDescriptor< any >
-	? ActionCreatorsOf< ConfigOf< StoreNameOrDescriptor > >
-	: any;
+) => DispatchReturn< StoreNameOrDescriptor >;
+
+export type DispatchReturn< StoreNameOrDescriptor > =
+	StoreNameOrDescriptor extends StoreDescriptor< any >
+		? ActionCreatorsOf< ConfigOf< StoreNameOrDescriptor > >
+		: unknown;
 
 export type MapSelect = (
 	select: SelectFunction,
@@ -70,6 +75,12 @@ export type MapSelect = (
 
 export type SelectFunction = < S >( store: S ) => CurriedSelectorsOf< S >;
 
+/**
+ * Callback for store's `subscribe()` method that
+ * runs when the store data has changed.
+ */
+export type ListenerFunction = () => void;
+
 export type CurriedSelectorsOf< S > = S extends StoreDescriptor<
 	ReduxStoreConfig< any, any, infer Selectors >
 >
@@ -150,23 +161,43 @@ export interface DataRegistry {
 	register: ( store: StoreDescriptor< any > ) => void;
 }
 
-export interface DataEmitter {
-	emit: () => void;
-	subscribe: ( listener: () => void ) => () => void;
-	pause: () => void;
-	resume: () => void;
-	isPaused: boolean;
-}
-
 // Type Helpers.
 
 export type ConfigOf< S > = S extends StoreDescriptor< infer C > ? C : never;
 
 export type ActionCreatorsOf< Config extends AnyConfig > =
 	Config extends ReduxStoreConfig< any, infer ActionCreators, any >
-		? ActionCreators
+		? PromisifiedActionCreators< ActionCreators >
 		: never;
 
+// Takes an object containing all action creators for a store and updates the
+// return type of each action creator to account for internal registry details --
+// for example, dispatched actions are wrapped with a Promise.
+export type PromisifiedActionCreators<
+	ActionCreators extends MapOf< ActionCreator >,
+> = {
+	[ Action in keyof ActionCreators ]: PromisifyActionCreator<
+		ActionCreators[ Action ]
+	>;
+};
+
+// Wraps action creator return types with a Promise and handles thunks.
+export type PromisifyActionCreator< Action extends ActionCreator > = (
+	...args: Parameters< Action >
+) => Promise<
+	ReturnType< Action > extends ( ..._args: any[] ) => any
+		? ThunkReturnType< Action >
+		: ReturnType< Action >
+>;
+
+// A thunk is an action creator which returns a function, which can optionally
+// return a Promise. The double ReturnType unwraps the innermost function's
+// return type, and Awaited gets the type the Promise resolves to. If the return
+// type is not a Promise, Awaited returns that original type.
+export type ThunkReturnType< Action extends ActionCreator > = Awaited<
+	ReturnType< ReturnType< Action > >
+>;
+
 type SelectorsOf< Config extends AnyConfig > = Config extends ReduxStoreConfig<
 	any,
 	any,
diff --git a/packages/data/src/utils/emitter.js b/packages/data/src/utils/emitter.js
deleted file mode 100644
index 883b4d83c1e748..00000000000000
--- a/packages/data/src/utils/emitter.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Create an event emitter.
- *
- * @return {import("../types").DataEmitter} Emitter.
- */
-export function createEmitter() {
-	let isPaused = false;
-	let isPending = false;
-	const listeners = new Set();
-	const notifyListeners = () =>
-		// We use Array.from to clone the listeners Set
-		// This ensures that we don't run a listener
-		// that was added as a response to another listener.
-		Array.from( listeners ).forEach( ( listener ) => listener() );
-
-	return {
-		get isPaused() {
-			return isPaused;
-		},
-
-		subscribe( listener ) {
-			listeners.add( listener );
-			return () => listeners.delete( listener );
-		},
-
-		pause() {
-			isPaused = true;
-		},
-
-		resume() {
-			isPaused = false;
-			if ( isPending ) {
-				isPending = false;
-				notifyListeners();
-			}
-		},
-
-		emit() {
-			if ( isPaused ) {
-				isPending = true;
-				return;
-			}
-			notifyListeners();
-		},
-	};
-}
diff --git a/packages/data/src/utils/emitter.ts b/packages/data/src/utils/emitter.ts
new file mode 100644
index 00000000000000..b01f1f965f5e70
--- /dev/null
+++ b/packages/data/src/utils/emitter.ts
@@ -0,0 +1,54 @@
+export interface DataEmitter {
+	emit: VoidFunction;
+	subscribe: ( listener: VoidFunction ) => VoidFunction;
+	pause: VoidFunction;
+	resume: VoidFunction;
+	isPaused: boolean;
+}
+
+/**
+ * Create an event emitter.
+ *
+ * @return The event emitter.
+ */
+export function createEmitter(): DataEmitter {
+	let isPaused = false;
+	let isPending = false;
+	const listeners = new Set< VoidFunction >();
+	const notifyListeners = () =>
+		// We use Array.from to clone the listeners Set
+		// This ensures that we don't run a listener
+		// that was added as a response to another listener.
+		Array.from( listeners ).forEach( ( listener ) => listener() );
+
+	return {
+		get isPaused() {
+			return isPaused;
+		},
+
+		subscribe( listener ) {
+			listeners.add( listener );
+			return () => listeners.delete( listener );
+		},
+
+		pause() {
+			isPaused = true;
+		},
+
+		resume() {
+			isPaused = false;
+			if ( isPending ) {
+				isPending = false;
+				notifyListeners();
+			}
+		},
+
+		emit() {
+			if ( isPaused ) {
+				isPending = true;
+				return;
+			}
+			notifyListeners();
+		},
+	};
+}
diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json
index c604c1785853c0..2bfc881dc6216e 100644
--- a/packages/data/tsconfig.json
+++ b/packages/data/tsconfig.json
@@ -1,15 +1,16 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false
 	},
 	"references": [
 		{ "path": "../compose" },
 		{ "path": "../deprecated" },
 		{ "path": "../element" },
+		{ "path": "../private-apis" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../priority-queue" },
 		{ "path": "../redux-routine" }
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
new file mode 100644
index 00000000000000..6b6f8ef6b54e11
--- /dev/null
+++ b/packages/dataviews/CHANGELOG.md
@@ -0,0 +1,157 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## Breaking Changes
+
+-   Support showing or hiding title, media and description fields ([#67477](https://github.com/WordPress/gutenberg/pull/67477)).
+-   Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): 
+
+```js
+const view = {
+    type: 'table',
+    titleField: 'title',
+    mediaField: 'media',
+    descriptionField: 'description',
+    fields: [ 'author', 'date' ],
+}
+```
+
+## Internal
+
+-   Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).
+-   Upgraded `@ariakit/react` (v0.4.15) and `@ariakit/test` (v0.4.7) ([#67404](https://github.com/WordPress/gutenberg/pull/67404)).
+
+## 4.9.0 (2024-11-27)
+
+### Bug Fixes
+
+-   Fix focus loss when removing all filters or resetting ([#67003](https://github.com/WordPress/gutenberg/pull/67003)).
+
+## 4.8.0 (2024-11-16)
+
+## 4.7.0 (2024-10-30)
+
+## 4.6.0 (2024-10-16)
+
+-   Invert the logic for which icon to show in `DataViews` when using the filter view. Icons now match the action of the button label. ([#65914](https://github.com/WordPress/gutenberg/pull/65914)).
+
+## 4.5.0 (2024-10-03)
+
+## 4.4.0 (2024-09-19)
+
+## 4.3.0 (2024-09-05)
+
+## 4.2.0 (2024-08-21)
+
+## New features
+
+-   Support using a component for field headers or names by providing a `header` property in the field object. The string `label` property (or `id`) is still mandatory. ([#64642](https://github.com/WordPress/gutenberg/pull/64642)).
+
+## Internal
+
+-   The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
+-   Filters no longer display the elements' description. ([#64674](https://github.com/WordPress/gutenberg/pull/64674))
+
+## Enhancements
+
+-   Adjust layout of filter / actions row, increase width of search control when the container is narrower. ([#64681](https://github.com/WordPress/gutenberg/pull/64681)).
+
+## 4.1.0 (2024-08-07)
+
+## Internal
+
+-   Upgraded `@ariakit/react` (v0.4.7) ([#64066](https://github.com/WordPress/gutenberg/pull/64066)).
+
+## 4.0.0 (2024-07-24)
+
+### Breaking Changes
+
+-   `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids.
+-   `setSelection` prop has been removed. Please use `onChangeSelection` instead.
+-   `header` field property has been renamed to `label`.
+-   `DataForm`'s `visibleFields` prop has been renamed to `fields`.
+-   `DataForm`'s `onChange` prop has been update to receive as argument only the fields that have changed.
+
+### New features
+
+-   Support multiple layouts in `DataForm` component and introduce the `panel` layout.
+
+## 3.0.0 (2024-07-10)
+
+### Breaking Changes
+
+-   Replace the `hiddenFields` property in the view prop of `DataViews` with a `fields` property that accepts an array of visible fields instead.
+-   Replace the `supportedLayouts` prop in the `DataViews` component with a `defaultLayouts` prop that accepts an object whose keys are the layout names and values are the default view objects for these layouts.
+
+### New features
+
+-   Added a new `DataForm` component to render controls from a given configuration (fields, form), and data.
+
+### Internal
+
+-   Method style type signatures have been changed to function style ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Legacy support for `in` and `notIn` operators introduced in 0.8 .0 has been removed and they no longer work. Please, convert them to `is` and `isNot` respectively.
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Internal
+
+-   Remove some unused dependencies ([#62010](https://github.com/WordPress/gutenberg/pull/62010)).
+
+### Enhancements
+
+-   `label` prop in Actions API can be either a `string` value or a `function`, in case we want to use information from the selected items. ([#61942](https://github.com/WordPress/gutenberg/pull/61942)).
+-   Add `registry` argument to the callback of the actions API. ([#62505](https://github.com/WordPress/gutenberg/pull/62505)).
+
+## 1.2.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 1.1.0 (2024-05-02)
+
+## 1.0.0 (2024-04-19)
+
+### Breaking Changes
+
+-   Removed the `onDetailsChange` event only available for the list layout. We are looking into adding actions to the list layout, including primary ones.
+
+## 0.9.0 (2024-04-03)
+
+### Enhancements
+
+-   The `enumeration` type has been removed and we'll introduce new field types soon. The existing filters will still work as before given they checked for field.elements, which is still a condition filters should have.
+
+## 0.8.0 (2024-03-21)
+
+### Enhancements
+
+-   Two new operators have been added: `isAll` and `isNotAll`. These are meant to represent `AND` operations. For example, `Category is all: Book, Review, Science Fiction` would represent all items that have all three categories selected.
+-   DataViews now supports multi-selection. A new set of filter operators has been introduced: `is`, `isNot`, `isAny`, `isNone`. Single-selection operators are `is` and `isNot`, and multi-selection operators are `isAny` and `isNone`. If no operators are declared for a filter, it will support multi-selection. Additionally, the old filter operators `in` and `notIn` operators have been deprecated and will work as `is` and `isNot` respectively. Please, migrate to the new operators as they'll be removed soon.
+
+### Breaking Changes
+
+-   Removed the `getPaginationResults` and `sortByTextFields` utils and replaced them with a unique `filterSortAndPaginate` function.
+
+## 0.7.0 (2024-03-06)
+
+## 0.6.0 (2024-02-21)
+
+## 0.5.0 (2024-02-09)
+
+## 0.4.0 (2024-01-24)
+
+## 0.3.0 (2024-01-10)
+
+## 0.2.0 (2023-12-13)
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
new file mode 100644
index 00000000000000..651d87268c28e1
--- /dev/null
+++ b/packages/dataviews/README.md
@@ -0,0 +1,1060 @@
+# The `@wordpress/dataviews` package
+
+The DataViews package offers two React components and a few utilites to work with a list of data:
+
+- `DataViews`: to render the dataset using different types of layouts (table, grid, list) and interaction capabilities (search, filters, sorting, etc.).
+- `DataForm`: to edit the items of the dataset.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/dataviews --save
+```
+
+## `DataViews`
+
+<div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataviews--docs">example implementation of the Dataviews component</a>.</div>
+
+**Important note** If you're trying to use the `DataViews` component in a WordPress plugin or theme and you're building your scripts using the `@wordpress/scripts` package, you need to import the components from `@wordpress/dataviews/wp` instead of `@wordpress/dataviews`.
+
+### Usage
+
+The `DataViews` component receives data and some other configuration to render the dataset. It'll call the `onChangeView` callback every time the user has interacted with the dataset in some way (sorted, filtered, changed layout, etc.):
+
+![DataViews flow](https://developer.wordpress.org/files/2024/09/368600071-20aa078f-7c3d-406d-8dd0-8b764addd22a.png "DataViews flow")
+
+Example:
+
+```jsx
+const Example = () => {
+	const onChangeView = () => { /* React to user changes. */ }
+
+	return (
+		<DataViews
+			data={ data }
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+			defaultLayouts={ defaultLayouts }
+			actions={ actions }
+			paginationInfo={ paginationInfo }
+		/>
+	);
+};
+```
+
+
+### Properties
+
+#### `data`: `Object[]`
+
+A one-dimensional array of objects.
+
+Example:
+
+```js
+const data = [
+	{
+		id: 1,
+		title: 'Title',
+		author: 'Admin',
+		date: '2012-04-23T18:25:43.511Z',
+	},
+	{
+		/* ... */
+	},
+];
+```
+
+The data can come from anywhere, from a static JSON file to a dynamic source like a HTTP Request. It's the consumer's responsiblity to query the data source appropiately and update the dataset based on the user's choices for sorting, filtering, etc.
+
+Each record should have an `id` that identifies them uniquely. If they don't, the consumer should provide the `getItemId` property to `DataViews`: a function that returns an unique identifier for the record.
+
+#### `getItemId`: `function`
+
+Function that receives an item and returns an unique identifier for it.
+
+It's optional. The field will get a default implementation by `DataViews` that returns the value of the `item[ id ]`.
+
+Example:
+
+```js
+// Custom getItemId function.
+{
+	getItemId={ ( item ) => item.name ?? item.id }
+}
+```
+
+#### `fields`: `Object[]`
+
+The fields describe the visible items for each record in the dataset and how they behave (how to sort them, display them, etc.). See "Fields API" for a description of every property.
+
+Example:
+
+```js
+const STATUSES = [
+	{ value: 'draft', label: __( 'Draft' ) },
+	{ value: 'future', label: __( 'Scheduled' ) },
+	{ value: 'pending', label: __( 'Pending Review' ) },
+	{ value: 'private', label: __( 'Private' ) },
+	{ value: 'publish', label: __( 'Published' ) },
+	{ value: 'trash', label: __( 'Trash' ) },
+];
+const fields = [
+	{
+		id: 'title',
+		label: 'Title',
+		enableHiding: false,
+	},
+	{
+		id: 'date',
+		label: 'Date',
+		render: ( { item } ) => {
+			return <time>{ getFormattedDate( item.date ) }</time>;
+		},
+	},
+	{
+		id: 'author',
+		label: 'Author',
+		render: ( { item } ) => {
+			return <a href="...">{ item.author }</a>;
+		},
+		elements: [
+			{ value: 1, label: 'Admin' },
+			{ value: 2, label: 'User' },
+		],
+		filterBy: {
+			operators: [ 'is', 'isNot' ],
+		},
+		enableSorting: false,
+	},
+	{
+		id: 'status',
+		label: 'Status',
+		getValue: ( { item } ) =>
+			STATUSES.find( ( { value } ) => value === item.status )?.label ??
+			item.status,
+		elements: STATUSES,
+		filterBy: {
+			operators: [ 'isAny' ],
+		},
+		enableSorting: false,
+	},
+];
+```
+
+#### `view`: `Object`
+
+The view object configures how the dataset is visible to the user.
+
+Example:
+
+```js
+const view = {
+	type: 'table',
+	search: '',
+	filters: [
+		{ field: 'author', operator: 'is', value: 2 },
+		{ field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] },
+	],
+	page: 1,
+	perPage: 5,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	titleField: 'title',
+	fields: [ 'author', 'status' ],
+	layout: {},
+};
+```
+
+Properties:
+
+-   `type`: view type, one of `table`, `grid`, `list`. See "Layout types".
+-   `search`: the text search applied to the dataset.
+-   `filters`: the filters applied to the dataset. Each item describes:
+    -   `field`: which field this filter is bound to.
+    -   `operator`: which type of filter it is. See "Operator types".
+    -   `value`: the actual value selected by the user.
+-   `perPage`: number of records to show per page.
+-   `page`: the page that is visible.
+-   `sort`:
+
+    -   `field`: the field used for sorting the dataset.
+    -   `direction`: the direction to use for sorting, one of `asc` or `desc`.
+-   `titleField`: The id of the field reprensenting the title of the record.
+-   `mediaField`: The id of the field reprensenting the media of the record.
+-   `descriptionField`: The id of field the reprensenting the description of the record.
+-   `showTitle`: Whether the title should be shown in the UI. `true` by default.
+-   `showMedia`: Whether the media should be shown in the UI. `true` by default.
+-   `showDescription`: Whether the description should be shown in the UI. `true` by default.
+-   `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed.
+-   `layout`: config that is specific to a particular layout type.
+
+##### Properties of `layout`
+
+| Properties of `layout`                                                                                          | Table | Grid | List |
+| --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- |
+| `badgeFields`: a list of field's `id` to render without label and styled as badges.                             |       | ✓    |      |
+| `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column.                              | ✓     |      |      |
+
+#### `onChangeView`: `function`
+
+Callback executed when the view has changed. It receives the new view object as a parameter.
+
+The view is a representation of the visible state of the dataset: what type of layout is used to display it (table, grid, etc.), how the dataset is filtered, how it is sorted or paginated. It's the consumer's responsibility to use the view config to query the data provider and make sure the user decisions (sort, pagination, filters, etc.) are respected.
+
+The following example shows how a view object is used to query the WordPress REST API via the entities abstraction. The same can be done with any other data provider.
+
+```js
+function MyCustomPageTable() {
+	const [ view, setView ] = useState( {
+		type: 'table',
+		perPage: 5,
+		page: 1,
+		sort: {
+			field: 'date',
+			direction: 'desc',
+		},
+		search: '',
+		filters: [
+			{ field: 'author', operator: 'is', value: 2 },
+			{
+				field: 'status',
+				operator: 'isAny',
+				value: [ 'publish', 'draft' ],
+			},
+		],
+		titleField: 'title',
+		fields: [ 'author', 'status' ],
+		layout: {},
+	} );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters.forEach( ( filter ) => {
+			if ( filter.field === 'status' && filter.operator === 'isAny' ) {
+				filters.status = filter.value;
+			}
+			if ( filter.field === 'author' && filter.operator === 'is' ) {
+				filters.author = filter.value;
+			}
+		} );
+		return {
+			per_page: view.perPage,
+			page: view.page,
+			_embed: 'author',
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
+			search: view.search,
+			...filters,
+		};
+	}, [ view ] );
+
+	const { records } = useEntityRecords( 'postType', 'page', queryArgs );
+
+	return (
+		<DataViews
+			data={ records }
+			view={ view }
+			onChangeView={ setView }
+			// ...
+		/>
+	);
+}
+```
+
+#### `actions`: `Object[]`
+
+A list of actions that can be performed on the dataset. See "Actions API" for more details.
+
+Example:
+
+```js
+const actions = [
+	{
+		id: 'view',
+		label: 'View',
+		isPrimary: true,
+		icon: <Icon icon={ view } />,
+		isEligible: ( item ) => item.status === 'published'
+		callback: ( items ) => {
+			console.log( 'Viewing item:', items[0] );
+		},
+	},
+	{
+		id: 'edit',
+		label: 'Edit',
+		icon: <Icon icon={ edit } />,
+		supportsBulk: true,
+		callback: ( items ) => {
+			console.log( 'Editing items:', items );
+		}
+	},
+	{
+		id: 'delete',
+		label: 'Delete',
+		isDestructive: true,
+		supportsBulk: true,
+		RenderModal: ( { items, closeModal, onActionPerformed } ) => (
+			<div>
+				<p>Are you sure you want to delete { items.length } item(s)?</p>
+				<Button 
+					variant="primary" 
+					onClick={() => {
+						console.log( 'Deleting items:', items );
+						onActionPerformed();
+						closeModal();
+					}}
+				>
+					Confirm Delete
+				</Button>
+			</div>
+		)
+	}
+];
+```
+
+#### `paginationInfo`: `Object`
+
+-   `totalItems`: the total number of items in the datasets.
+-   `totalPages`: the total number of pages, taking into account the total items in the dataset and the number of items per page provided by the user.
+
+#### `search`: `boolean`
+
+Whether the search input is enabled. `true` by default.
+
+#### `searchLabel`: `string`
+
+What text to show in the search input. "Search" by default.
+
+#### `isLoading`: `boolean`
+
+Whether the data is loading. `false` by default.
+
+#### `defaultLayouts`: `Record< string, view >`
+
+This property provides layout information about the view types that are active. If empty, enables all layout types (see "Layout Types") with empty layout data.
+
+For example, this is how you'd enable only the table view type:
+
+```js
+const defaultLayouts = {
+	table: {
+		showMedia: false,
+	},
+	grid: {
+		showMedia: true,
+	}
+};
+```
+
+The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. These properties are applied to the view object each time the user switches to the corresponding layout.
+
+#### `selection`: `string[]`
+
+The list of selected items' ids.
+
+If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component.
+
+#### `onChangeSelection`: `function`
+
+Callback that signals the user selected one of more items. It receives the list of selected items' ids as a parameter.
+
+If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component.
+
+### `isItemClickable`: `function`
+
+A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked.
+
+### `onClickItem`: `function`
+
+A callback function that is triggered when a user clicks on a media field or primary field. This function is currently implemented only in the `grid` and `list` views.
+
+#### `header`: React component
+
+React component to be rendered next to the view config button.
+
+## `DataForm`
+
+<div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataform--docs">example implementation of the DataForm component</a>.</div>
+
+### Usage
+
+```jsx
+const Example = () => {
+	// Declare data, fields, etc.
+
+	return (
+		<DataForm
+			data={ data }
+			fields={ fields }
+			form={ form }
+			onChange={ onChange }
+		/>
+	)
+}
+```
+
+### Properties
+
+#### `data`: `Object`
+
+A single item to be edited.
+
+It can be think of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing.
+
+#### `fields`: `Object[]`
+
+The fields describe which parts of the data are visible and how they behave (how to edit them, validate them, etc.). See "Fields API" for a description of every property.
+
+Example:
+
+```js
+const fields = [
+	{
+		id: 'title',
+		type: 'text',
+		label: 'Title',
+	},
+	{
+		id: 'date',
+		type: 'datetime',
+		label: 'Date',
+	},
+	{
+		id: 'author',
+		type: 'text'
+		label: 'Author',
+		elements: [
+			{ value: 1, label: 'Admin' },
+			{ value: 2, label: 'User' },
+		],
+	},
+];
+```
+
+#### `form`: `Object[]`
+
+- `type`: either `regular` or `panel`.
+- `fields`: a list of fields ids that should be rendered.
+
+#### `onChange`: `function`
+
+Callback function that receives an object with the edits done by the user.
+
+Example:
+
+```js
+const data = {
+	id: 1,
+	title: 'Title',
+	author: 'Admin',
+	date: '2012-04-23T18:25:43.511Z',
+};
+
+const onChange = ( edits ) => {
+	/*
+	 * edits will contain user edits.
+	 * For example, if the user edited the title
+	 * edits will be:
+	 *
+	 * {
+	 *   title: 'New title'
+	 * }
+	 *
+	 */
+};
+
+return (
+	<DataForm
+		data={data}
+		fields={fields}
+		form={form}
+		onChange={onChange}
+	/>
+);
+```
+
+## Utilities
+
+### `filterSortAndPaginate`
+
+Utility to apply the view config (filters, search, sorting, and pagination) to a dataset client-side.
+
+Parameters:
+
+- `data`: the dataset, as described in the "data" property of DataViews.
+- `view`: the view config, as described in the "view" property of DataViews.
+- `fields`: the fields config, as described in the "fields" property of DataViews.
+
+Returns an object containing:
+
+- `data`: the new dataset, with the view config applied.
+- `paginationInfo`: object containing the following properties:
+	- `totalItems`: total number of items for the current view config.
+	- `totalPages`: total number of pages for the current view config.
+
+### `isItemValid`
+
+Utility to determine whether or not the given item's value is valid according to the current fields and form config.
+
+Parameters:
+
+- `item`: the item, as described in the "data" property of DataForm.
+- `fields`: the fields config, as described in the "fields" property of DataForm.
+- `form`: the form config, as described in the "form" property of DataForm.
+
+Returns a boolean indicating if the item is valid (true) or not (false).
+
+## Actions API
+
+### `id`
+
+The unique identifier of the action.
+
+- Type: `string`
+- Required
+- Example: `move-to-trash`
+
+### `label` 
+
+The user facing description of the action.
+
+- Type: `string | function`
+- Required
+- Example:
+
+```js
+{
+	label: Move to Trash
+}
+```
+
+or
+
+```js
+{
+	label: ( items ) => items.length > 1 ? 'Delete items' : 'Delete item'
+}
+```
+
+### `isPrimary`
+
+Whether the action should be displayed inline (primary) or only displayed in the "More actions" menu (secondary).
+
+- Type: `boolean`
+- Optional
+
+### `icon`
+
+Icon to show for primary actions.
+
+- Type: SVG element
+- Required for primary actions, optional for secondary actions.
+
+### `isEligible`
+
+Function that determines whether the action can be performed for a given record.
+
+- Type: `function`
+- Optional. If not present, action is considered eligible for all items.
+- Example:
+
+```js
+{
+	isEligible: ( item ) => item.status === 'published'
+}
+```
+
+### `isDestructive`
+
+Whether the action can delete data, in which case the UI communicates it via a red color.
+
+- Type: `boolean`
+- Optional
+
+### `supportsBulk`
+
+Whether the action can operate over multiple items at once.
+
+- Type: `boolean`
+- Optional
+- Default: `false`
+
+### `disabled`
+
+Whether the action is disabled.
+
+- Type: `boolean`
+- Optional
+- Default: `false`
+
+### `context`
+
+Where this action would be visible.
+
+- Type: `string`
+- Optional
+- One of: `list`, `single`
+
+### `callback`
+
+Function that performs the required action.
+
+- Type: `function`
+- Either `callback` or `RenderModal` must be provided. If `RenderModal` is provided, `callback` will be ignored
+- Example:
+
+```js
+{
+	callback: ( items, { onActionPerformed } ) => {
+		// Perform action.
+		onActionPerformed?.( items );
+	}
+}
+```
+
+### `RenderModal`
+
+Component to render UI in a modal for the action.
+
+- Type: `ReactElement`
+- Either `callback` or `RenderModal` must be provided. If `RenderModal` is provided, `callback` will be ignored.
+- Example:
+
+```jsx
+{
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const onSubmit = ( event ) => {
+			event.preventDefault();
+			// Perform action.
+			closeModal?.();
+			onActionPerformed?.( items );
+		};
+		return (
+			<form onSubmit={ onSubmit }>
+				<p>Modal UI</p>
+				<HStack>
+					<Button variant="tertiary" onClick={ closeModal }>
+						Cancel
+					</Button>
+					<Button variant="primary" type="submit">
+						Submit
+					</Button>
+				</HStack>
+			</form>
+		);
+	}
+}
+```
+
+### `hideModalHeader`
+
+Controls visibility of the modal's header when using `RenderModal`.
+
+- Type: `boolean`
+- Optional
+- When false and using `RenderModal`, the action's label is used in modal header
+
+### `modalHeader`
+
+The header text to show in the modal.
+
+- Type: `string`
+- Optional
+
+
+## Fields API
+
+### `id`
+
+The unique identifier of the field.
+
+- Type: `string`.
+- Required.
+
+Example:
+
+```js
+{ id: 'field_id' }
+```
+
+### `type`
+
+Field type. One of `text`, `integer`, `datetime`.
+
+If a field declares a `type`, it gets default implementations for the `sort`, `isValid`, and `Edit` functions. They will overriden if the field provides its own.
+
+- Type: `string`.
+- Optional.
+
+Example:
+
+```js
+{ type: 'text' }
+```
+
+### `label`
+
+The field's name. This will be used across the UI.
+
+- Type: `string`.
+- Optional.
+- Defaults to the `id` value.
+
+Example:
+
+```js
+{ label: 'Title' }
+```
+
+### `header`
+
+React component used by the layouts to display the field name — useful to add icons, etc. It's complementary to the `label` property.
+
+- Type: React component.
+- Optional.
+- Defaults to the `label` value.
+- Props: none.
+- Returns a React element that represents the field's name.
+
+Example:
+
+```js
+{
+	header: () => { /* Returns a react element. */ }
+}
+```
+
+### `getValue`
+
+React component that returns the value of a field. This value is used in sorting the fields, or when filtering.
+
+- Type: React component.
+- Optional.
+- Defaults to `item[ id ]`.
+- Props:
+  - `item` value to be processed.
+- Returns a value that represents the field.
+
+Example:
+
+```js
+{
+	getValue: ( { item } ) => { /* The field's value.  */ };
+}
+```
+
+### `render`
+
+React component that renders the field. This is used by the layouts.
+
+- Type: React component.
+- Optional.
+- Defaults to `getValue`.
+- Props
+  - `item` value to be processed.
+- Returns a React element that represents the field's value.
+
+Example:
+
+```js
+{
+	render: ( { item} ) => { /* React element to be displayed. */ }
+}
+```
+
+### `Edit`
+
+React component that renders the control to edit the field.
+
+- Type: React component | `string`. If it's a string, it needs to be one of `text`, `integer`, `datetime`, `radio`, `select`.
+- Required by DataForm. Optional if the field provided a `type`.
+- Props:
+  - `data`: the item to be processed
+  - `field`: the field definition
+  - `onChange`: the callback with the updates
+  - `hideLabelFromVision`: boolean representing if the label should be hidden
+- Returns a React element to edit the field's value.
+
+Example:
+
+```js
+// A custom control defined by the field.
+{
+	Edit: ( {
+		data,
+		field,
+		onChange,
+		hideLabelFromVision
+	} ) => {
+		const value = field.getValue( { item: data } );
+
+		return (
+			<CustomTimePicker
+				value={ value }
+				onChange={ onChange }
+				hideLabelFromVision
+			/>
+		);
+	}
+}
+```
+
+```js
+// Use one of the core controls.
+{
+	Edit: 'radio'
+}
+```
+
+```js
+// Edit is optional when field's type is present.
+// The field will use the default Edit function for text.
+{
+	type: 'text'
+}
+```
+
+```js
+// Edit can be provided even if field's type is present.
+// The field will use its own custom control.
+{
+	type: 'text',
+	Edit: 'radio'
+}
+```
+
+### `sort`
+
+Function to sort the records.
+
+- Type: `function`.
+- Optional.
+- Args
+  - `a`: the first item to compare
+  - `b`: the second item to compare
+  - `direction`: either `asc` (ascending) or `desc` (descending)
+- Returns a number where:
+  - a negative value indicates that `a` should come before `b`
+  - a positive value indicates that `a` should come after `b`
+  - 0 indicates that `a` and `b` are considered equal
+
+Example:
+
+```js
+// A custom sort function defined by the field.
+{
+	sort: ( a, b, direction ) => {
+		return direction === 'asc'
+			? a.localeCompare( b )
+			: b.localeCompare( a );
+	}
+}
+```
+
+```js
+// If field type is provided,
+// the field gets a default sort function.
+{
+	type: 'number'
+}
+```
+
+```js
+// Even if a field type is provided,
+// fields can override the default sort function assigned for that type.
+{
+	type: 'number'
+	sort: ( a, b, direction ) => { /* Custom sort */ }
+}
+```
+
+### `isValid`
+
+Function to validate a field's value.
+
+- Type: function.
+- Optional.
+- Args
+  - `item`: the data to validate
+  - `context`: an object containing the following props:
+    - `elements`: the elements defined by the field
+- Returns a boolean, indicating if the field is valid or not.
+
+Example:
+
+```js
+// Custom isValid function.
+{
+	isValid: ( item, context ) => {
+		return !! item;
+	}
+}
+```
+
+```js
+// If the field defines a type,
+// it'll get a default isValid function for the type.
+{
+	type: 'number',
+}
+```
+
+```js
+// Even if the field provides a type,
+// the field can override the default isValid function.
+{
+	type: 'number',
+	isValid: ( item, context ) => { /* Custom function. */ }
+}
+```
+
+### `isVisible`
+
+Function that indicates if the field should be visible.
+
+- Type: `function`.
+- Optional.
+- Args
+  - `item`: the data to be processed
+- Returns a `boolean` indicating if the field should be visible (`true`) or not (`false`).
+
+Example:
+
+```js
+// Custom isVisible function.
+{
+	isVisible: ( item ) => { /* Custom implementation. */ }
+}
+```
+
+### `enableSorting`
+
+Boolean indicating if the field is sortable.
+
+- Type: `boolean`.
+- Optional.
+- Defaults to `true`.
+
+Example:
+
+```js
+{ enableSorting: true }
+```
+
+### `enableHiding`
+
+Boolean indicating if the field can be hidden.
+
+- Type: `boolean`.
+- Optional.
+- Defaults to `true`.
+
+Example:
+
+```js
+{ enableHiding: true }
+```
+
+### `enableGlobalSearch`
+
+Boolean indicating if the field is searchable.
+
+- Type: `boolean`.
+- Optional.
+- Defaults to `false`.
+
+Example:
+
+```js
+{ enableGlobalSearch: true }
+```
+
+### `elements`
+
+List of valid values for a field. If provided, it creates a DataViews' filter for the field. DataForm's edit control will use these values as well (see `Edit` field property).
+
+- Type: `array` of objects.
+- Optional.
+- Each object can have the following properties:
+  - `value`: required, the value to match against the field's value.
+  - `label`: required, the name to display to users.
+  - `description`: optional, a longer description of the item.
+
+Example:
+
+```js
+{
+	elements: [
+		{ value: '1', label: 'Product A' },
+		{ value: '2', label: 'Product B' },
+		{ value: '3', label: 'Product C' },
+		{ value: '4', label: 'Product D' },
+	]
+}
+```
+
+### `filterBy`
+
+Configuration of the filters.
+
+- Type: `object`.
+- Optional.
+- Properties:
+  - `operators`: the list of operators supported by the field. See "operators" below. By default, a filter will support the `isAny` and `isNone` multi-selection operators.
+  - `isPrimary`: boolean, optional. Indicates if the filter is primary. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+
+Operators:
+
+| Operator   | Selection      | Description                                                             | Example                                            |
+| ---------- | -------------- | ----------------------------------------------------------------------- | -------------------------------------------------- |
+| `is`       | Single item    | `EQUAL TO`. The item's field is equal to a single value.                | Author is Admin                                    |
+| `isNot`    | Single item    | `NOT EQUAL TO`. The item's field is not equal to a single value.        | Author is not Admin                                |
+| `isAny`    | Multiple items | `OR`. The item's field is present in a list of values.                  | Author is any: Admin, Editor                       |
+| `isNone`   | Multiple items | `NOT OR`. The item's field is not present in a list of values.          | Author is none: Admin, Editor                      |
+| `isAll`    | Multiple items | `AND`. The item's field has all of the values in the list.              | Category is all: Book, Review, Science Fiction     |
+| `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction |
+
+`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. By default, a filter with no operators declared will support the `isAny` and `isNone` multi-selection operators. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded and the filter won't allow selecting more than one item.
+
+Example:
+
+```js
+// Set a filter as primary.
+{
+	filterBy: {
+		isPrimary: true
+	}
+}
+```
+
+```js
+// Configure a filter as single-selection.
+{
+	filterBy: {
+		operators: [ `is`, `isNot` ]
+	}
+}
+```
+
+```js
+// Configure a filter as multi-selection with all the options.
+{
+	filterBy: {
+		operators: [ `isAny`, `isNone`, `isAll`, `isNotAll` ]
+	}
+}
+```
+
+## 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/dataviews/build.js b/packages/dataviews/build.js
new file mode 100644
index 00000000000000..16146632d0359e
--- /dev/null
+++ b/packages/dataviews/build.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-extraneous-dependencies
+const esbuild = require( 'esbuild' );
+
+const wpExternals = {
+	name: 'wordpress-externals',
+	setup( build ) {
+		build.onResolve(
+			{ filter: /^@wordpress\/(data|hooks|i18n|date)(\/|$)/ },
+			( args ) => {
+				// Don't bundle WordPress signleton packages
+				return { path: args.path, external: true };
+			}
+		);
+		build.onResolve( { filter: /^@wordpress\// }, () => {
+			// Bundle WordPress packages
+			return { external: false };
+		} );
+		build.onResolve( { filter: /^\.[\.\/]/ }, () => {
+			// Bundle relative paths
+			return { external: false };
+		} );
+		build.onResolve( { filter: /.+/ }, ( args ) => {
+			// Mark everything else as external
+			return { path: args.path, external: true };
+		} );
+	},
+};
+
+esbuild.build( {
+	entryPoints: [ 'src/index.ts' ],
+	bundle: true,
+	outdir: 'build-wp',
+	plugins: [ wpExternals ],
+	jsx: 'automatic',
+	logLevel: 'info',
+	format: 'esm',
+} );
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
new file mode 100644
index 00000000000000..c2d16b664c9040
--- /dev/null
+++ b/packages/dataviews/package.json
@@ -0,0 +1,69 @@
+{
+	"name": "@wordpress/dataviews",
+	"version": "4.9.0",
+	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/dataviews/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/dataviews"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js"
+		},
+		"./wp": {
+			"types": "./build-types/index.d.ts",
+			"default": "./build-wp/index.js"
+		},
+		"./package.json": {
+			"default": "./package.json"
+		},
+		"./build-style/": "./build-style/"
+	},
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@ariakit/react": "^0.4.15",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/warning": "*",
+		"clsx": "^2.1.1",
+		"remove-accents": "^0.5.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build:wp": "node build"
+	}
+}
diff --git a/packages/dataviews/src/components/dataform-context/index.tsx b/packages/dataviews/src/components/dataform-context/index.tsx
new file mode 100644
index 00000000000000..72fbf7e0f42ab6
--- /dev/null
+++ b/packages/dataviews/src/components/dataform-context/index.tsx
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type DataFormContextType< Item > = {
+	fields: NormalizedField< Item >[];
+};
+
+const DataFormContext = createContext< DataFormContextType< any > >( {
+	fields: [],
+} );
+
+export function DataFormProvider< Item >( {
+	fields,
+	children,
+}: React.PropsWithChildren< { fields: NormalizedField< Item >[] } > ) {
+	return (
+		<DataFormContext.Provider value={ { fields } }>
+			{ children }
+		</DataFormContext.Provider>
+	);
+}
+
+export default DataFormContext;
diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
new file mode 100644
index 00000000000000..b359ddba74381e
--- /dev/null
+++ b/packages/dataviews/src/components/dataform/index.tsx
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormProps } from '../../types';
+import { DataFormProvider } from '../dataform-context';
+import { normalizeFields } from '../../normalize-fields';
+import { DataFormLayout } from '../../dataforms-layouts/data-form-layout';
+
+export default function DataForm< Item >( {
+	data,
+	form,
+	fields,
+	onChange,
+}: DataFormProps< Item > ) {
+	const normalizedFields = useMemo(
+		() => normalizeFields( fields ),
+		[ fields ]
+	);
+
+	if ( ! form.fields ) {
+		return null;
+	}
+
+	return (
+		<DataFormProvider fields={ normalizedFields }>
+			<DataFormLayout data={ data } form={ form } onChange={ onChange } />
+		</DataFormProvider>
+	);
+}
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
new file mode 100644
index 00000000000000..ecad2af43fb84b
--- /dev/null
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -0,0 +1,240 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DataForm from '../index';
+import type { Field, Form } from '../../../types';
+
+type SamplePost = {
+	title: string;
+	order: number;
+	author: number;
+	status: string;
+	reviewer: string;
+	date: string;
+	birthdate: string;
+	password?: string;
+};
+
+const meta = {
+	title: 'DataViews/DataForm',
+	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the default layout of each field. "regular" is the default layout.',
+			options: [ 'default', 'regular', 'panel' ],
+		},
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position of the layout.',
+			options: [ 'default', 'top', 'side', 'none' ],
+		},
+	},
+};
+export default meta;
+
+const fields = [
+	{
+		id: 'title',
+		label: 'Title',
+		type: 'text' as const,
+	},
+	{
+		id: 'order',
+		label: 'Order',
+		type: 'integer' as const,
+	},
+	{
+		id: 'date',
+		label: 'Date',
+		type: 'datetime' as const,
+	},
+	{
+		id: 'birthdate',
+		label: 'Date as options',
+		type: 'datetime' as const,
+		elements: [
+			{ value: '1970-02-23T12:00:00', label: "Jane's birth date" },
+			{ value: '1950-02-23T12:00:00', label: "John's birth date" },
+		],
+	},
+	{
+		id: 'author',
+		label: 'Author',
+		type: 'integer' as const,
+		elements: [
+			{ value: 1, label: 'Jane' },
+			{ value: 2, label: 'John' },
+		],
+	},
+	{
+		id: 'reviewer',
+		label: 'Reviewer',
+		type: 'text' as const,
+		Edit: 'radio' as const,
+		elements: [
+			{ value: 'fulano', label: 'Fulano' },
+			{ value: 'mengano', label: 'Mengano' },
+			{ value: 'zutano', label: 'Zutano' },
+		],
+	},
+	{
+		id: 'status',
+		label: 'Status',
+		type: 'text' as const,
+		elements: [
+			{ value: 'draft', label: 'Draft' },
+			{ value: 'published', label: 'Published' },
+			{ value: 'private', label: 'Private' },
+		],
+	},
+	{
+		id: 'password',
+		label: 'Password',
+		type: 'text' as const,
+		isVisible: ( item: SamplePost ) => {
+			return item.status !== 'private';
+		},
+	},
+	{
+		id: 'sticky',
+		label: 'Sticky',
+		type: 'integer',
+		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
+			const { id, getValue } = field;
+			return (
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ hideLabelFromVision ? '' : field.label }
+					checked={ getValue( { item: data } ) }
+					onChange={ () =>
+						onChange( { [ id ]: ! getValue( { item: data } ) } )
+					}
+				/>
+			);
+		},
+	},
+] as Field< SamplePost >[];
+
+export const Default = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const [ post, setPost ] = useState( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+		reviewer: 'fulano',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
+		sticky: false,
+	} );
+
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				'order',
+				{
+					id: 'sticky',
+					layout: 'regular',
+					labelPosition: 'side',
+				},
+				'author',
+				'reviewer',
+				'password',
+				'date',
+				'birthdate',
+			],
+		} ),
+		[ type, labelPosition ]
+	) as Form;
+
+	return (
+		<DataForm< SamplePost >
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+const CombinedFieldsComponent = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const [ post, setPost ] = useState< SamplePost >( {
+		title: 'Hello, World!',
+		order: 2,
+		author: 1,
+		status: 'draft',
+		reviewer: 'fulano',
+		date: '2021-01-01T12:00:00',
+		birthdate: '1950-02-23T12:00:00',
+	} );
+
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: [
+				'title',
+				{
+					id: 'status',
+					label: 'Status & Visibility',
+					children: [ 'status', 'password' ],
+				},
+				'order',
+				'author',
+			],
+		} ),
+		[ type, labelPosition ]
+	) as Form;
+
+	return (
+		<DataForm< SamplePost >
+			data={ post }
+			fields={ fields }
+			form={ form }
+			onChange={ ( edits ) =>
+				setPost( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) )
+			}
+		/>
+	);
+};
+
+export const CombinedFields = {
+	title: 'DataViews/CombinedFields',
+	render: CombinedFieldsComponent,
+	argTypes: {
+		...meta.argTypes,
+	},
+	args: {
+		type: 'panel',
+	},
+};
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
new file mode 100644
index 00000000000000..92a3fe85f67e74
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -0,0 +1,356 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	CheckboxControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __, sprintf, _n } from '@wordpress/i18n';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { ActionWithModal } from '../dataviews-item-actions';
+import type { Action } from '../../types';
+import type { SetSelection } from '../../private-types';
+import type { ActionTriggerProps } from '../dataviews-item-actions';
+
+export function useHasAPossibleBulkAction< Item >(
+	actions: Action< Item >[],
+	item: Item
+) {
+	return useMemo( () => {
+		return actions.some( ( action ) => {
+			return (
+				action.supportsBulk &&
+				( ! action.isEligible || action.isEligible( item ) )
+			);
+		} );
+	}, [ actions, item ] );
+}
+
+export function useSomeItemHasAPossibleBulkAction< Item >(
+	actions: Action< Item >[],
+	data: Item[]
+) {
+	return useMemo( () => {
+		return data.some( ( item ) => {
+			return actions.some( ( action ) => {
+				return (
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+				);
+			} );
+		} );
+	}, [ actions, data ] );
+}
+
+interface BulkSelectionCheckboxProps< Item > {
+	selection: string[];
+	onChangeSelection: SetSelection;
+	data: Item[];
+	actions: Action< Item >[];
+	getItemId: ( item: Item ) => string;
+}
+
+export function BulkSelectionCheckbox< Item >( {
+	selection,
+	onChangeSelection,
+	data,
+	actions,
+	getItemId,
+}: BulkSelectionCheckboxProps< Item > ) {
+	const selectableItems = useMemo( () => {
+		return data.filter( ( item ) => {
+			return actions.some(
+				( action ) =>
+					action.supportsBulk &&
+					( ! action.isEligible || action.isEligible( item ) )
+			);
+		} );
+	}, [ data, actions ] );
+	const selectedItems = data.filter(
+		( item ) =>
+			selection.includes( getItemId( item ) ) &&
+			selectableItems.includes( item )
+	);
+	const areAllSelected = selectedItems.length === selectableItems.length;
+	return (
+		<CheckboxControl
+			className="dataviews-view-table-selection-checkbox"
+			__nextHasNoMarginBottom
+			checked={ areAllSelected }
+			indeterminate={ ! areAllSelected && !! selectedItems.length }
+			onChange={ () => {
+				if ( areAllSelected ) {
+					onChangeSelection( [] );
+				} else {
+					onChangeSelection(
+						selectableItems.map( ( item ) => getItemId( item ) )
+					);
+				}
+			} }
+			aria-label={
+				areAllSelected ? __( 'Deselect all' ) : __( 'Select all' )
+			}
+		/>
+	);
+}
+
+interface ActionButtonProps< Item > {
+	action: Action< Item >;
+	selectedItems: Item[];
+	actionInProgress: string | null;
+	setActionInProgress: ( actionId: string | null ) => void;
+}
+
+interface ToolbarContentProps< Item > {
+	selection: string[];
+	onChangeSelection: SetSelection;
+	data: Item[];
+	actions: Action< Item >[];
+	getItemId: ( item: Item ) => string;
+}
+
+function ActionTrigger< Item >( {
+	action,
+	onClick,
+	isBusy,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Button
+			disabled={ isBusy }
+			accessibleWhenDisabled
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+			isBusy={ isBusy }
+			tooltipPosition="top"
+		/>
+	);
+}
+
+const EMPTY_ARRAY: [] = [];
+
+function ActionButton< Item >( {
+	action,
+	selectedItems,
+	actionInProgress,
+	setActionInProgress,
+}: ActionButtonProps< Item > ) {
+	const registry = useRegistry();
+	const selectedEligibleItems = useMemo( () => {
+		return selectedItems.filter( ( item ) => {
+			return ! action.isEligible || action.isEligible( item );
+		} );
+	}, [ action, selectedItems ] );
+	if ( 'RenderModal' in action ) {
+		return (
+			<ActionWithModal
+				key={ action.id }
+				action={ action }
+				items={ selectedEligibleItems }
+				ActionTrigger={ ActionTrigger }
+			/>
+		);
+	}
+	return (
+		<ActionTrigger
+			key={ action.id }
+			action={ action }
+			onClick={ async () => {
+				setActionInProgress( action.id );
+				await action.callback( selectedItems, {
+					registry,
+				} );
+				setActionInProgress( null );
+			} }
+			items={ selectedEligibleItems }
+			isBusy={ actionInProgress === action.id }
+		/>
+	);
+}
+
+function renderFooterContent< Item >(
+	data: Item[],
+	actions: Action< Item >[],
+	getItemId: ( item: Item ) => string,
+	selection: string[],
+	actionsToShow: Action< Item >[],
+	selectedItems: Item[],
+	actionInProgress: string | null,
+	setActionInProgress: ( actionId: string | null ) => void,
+	onChangeSelection: SetSelection
+) {
+	const message =
+		selectedItems.length > 0
+			? sprintf(
+					/* translators: %d: number of items. */
+					_n(
+						'%d Item selected',
+						'%d Items selected',
+						selectedItems.length
+					),
+					selectedItems.length
+			  )
+			: sprintf(
+					/* translators: %d: number of items. */
+					_n( '%d Item', '%d Items', data.length ),
+					data.length
+			  );
+	return (
+		<HStack
+			expanded={ false }
+			className="dataviews-bulk-actions-footer__container"
+			spacing={ 3 }
+		>
+			<BulkSelectionCheckbox
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				data={ data }
+				actions={ actions }
+				getItemId={ getItemId }
+			/>
+			<span className="dataviews-bulk-actions-footer__item-count">
+				{ message }
+			</span>
+			<HStack
+				className="dataviews-bulk-actions-footer__action-buttons"
+				expanded={ false }
+				spacing={ 1 }
+			>
+				{ actionsToShow.map( ( action ) => {
+					return (
+						<ActionButton
+							key={ action.id }
+							action={ action }
+							selectedItems={ selectedItems }
+							actionInProgress={ actionInProgress }
+							setActionInProgress={ setActionInProgress }
+						/>
+					);
+				} ) }
+				{ selectedItems.length > 0 && (
+					<Button
+						icon={ closeSmall }
+						showTooltip
+						tooltipPosition="top"
+						size="compact"
+						label={ __( 'Cancel' ) }
+						disabled={ !! actionInProgress }
+						accessibleWhenDisabled={ false }
+						onClick={ () => {
+							onChangeSelection( EMPTY_ARRAY );
+						} }
+					/>
+				) }
+			</HStack>
+		</HStack>
+	);
+}
+
+function FooterContent< Item >( {
+	selection,
+	actions,
+	onChangeSelection,
+	data,
+	getItemId,
+}: ToolbarContentProps< Item > ) {
+	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
+		null
+	);
+	const footerContentRef = useRef< JSX.Element | null >( null );
+
+	const bulkActions = useMemo(
+		() => actions.filter( ( action ) => action.supportsBulk ),
+		[ actions ]
+	);
+	const selectableItems = useMemo( () => {
+		return data.filter( ( item ) => {
+			return bulkActions.some(
+				( action ) => ! action.isEligible || action.isEligible( item )
+			);
+		} );
+	}, [ data, bulkActions ] );
+
+	const selectedItems = useMemo( () => {
+		return data.filter(
+			( item ) =>
+				selection.includes( getItemId( item ) ) &&
+				selectableItems.includes( item )
+		);
+	}, [ selection, data, getItemId, selectableItems ] );
+
+	const actionsToShow = useMemo(
+		() =>
+			actions.filter( ( action ) => {
+				return (
+					action.supportsBulk &&
+					action.icon &&
+					selectedItems.some(
+						( item ) =>
+							! action.isEligible || action.isEligible( item )
+					)
+				);
+			} ),
+		[ actions, selectedItems ]
+	);
+	if ( ! actionInProgress ) {
+		if ( footerContentRef.current ) {
+			footerContentRef.current = null;
+		}
+		return renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	} else if ( ! footerContentRef.current ) {
+		footerContentRef.current = renderFooterContent(
+			data,
+			actions,
+			getItemId,
+			selection,
+			actionsToShow,
+			selectedItems,
+			actionInProgress,
+			setActionInProgress,
+			onChangeSelection
+		);
+	}
+	return footerContentRef.current;
+}
+
+export function BulkActionsFooter() {
+	const {
+		data,
+		selection,
+		actions = EMPTY_ARRAY,
+		onChangeSelection,
+		getItemId,
+	} = useContext( DataViewsContext );
+	return (
+		<FooterContent
+			selection={ selection }
+			onChangeSelection={ onChangeSelection }
+			data={ data }
+			actions={ actions }
+			getItemId={ getItemId }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/style.scss b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
new file mode 100644
index 00000000000000..b2e946aa202abe
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/style.scss
@@ -0,0 +1,12 @@
+
+.dataviews-bulk-actions-footer__item-count {
+	color: $gray-900;
+	font-weight: 500;
+	font-size: 11px;
+	text-transform: uppercase;
+}
+
+.dataviews-bulk-actions-footer__container {
+	margin-right: auto;
+	min-height: $grid-unit-40;
+}
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
new file mode 100644
index 00000000000000..4bef3ecdbcbb4a
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { View, Action, NormalizedField } from '../../types';
+import type { SetSelection } from '../../private-types';
+import { LAYOUT_TABLE } from '../../constants';
+
+type DataViewsContextType< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	selection: string[];
+	onChangeSelection: SetSelection;
+	openedFilter: string | null;
+	setOpenedFilter: ( openedFilter: string | null ) => void;
+	getItemId: ( item: Item ) => string;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+};
+
+const DataViewsContext = createContext< DataViewsContextType< any > >( {
+	view: { type: LAYOUT_TABLE },
+	onChangeView: () => {},
+	fields: [],
+	data: [],
+	paginationInfo: {
+		totalItems: 0,
+		totalPages: 0,
+	},
+	selection: [],
+	onChangeSelection: () => {},
+	setOpenedFilter: () => {},
+	openedFilter: null,
+	getItemId: ( item ) => item.id,
+	isItemClickable: () => true,
+} );
+
+export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews-filters/add-filter.tsx b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
new file mode 100644
index 00000000000000..94aebb71ea5874
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/add-filter.tsx
@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import type { Ref } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import type { NormalizedFilter, View } from '../../types';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+interface AddFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+}
+
+export function AddFilterMenu( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	trigger,
+}: AddFilterProps & {
+	trigger: React.ReactNode;
+} ) {
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<Menu trigger={ trigger }>
+			{ inactiveFilters.map( ( filter ) => {
+				return (
+					<Menu.Item
+						key={ filter.field }
+						onClick={ () => {
+							setOpenedFilter( filter.field );
+							onChangeView( {
+								...view,
+								page: 1,
+								filters: [
+									...( view.filters || [] ),
+									{
+										field: filter.field,
+										value: undefined,
+										operator: filter.operators[ 0 ],
+									},
+								],
+							} );
+						} }
+					>
+						<Menu.ItemLabel>{ filter.name }</Menu.ItemLabel>
+					</Menu.Item>
+				);
+			} ) }
+		</Menu>
+	);
+}
+
+function AddFilter(
+	{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,
+	ref: Ref< HTMLButtonElement >
+) {
+	if ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {
+		return null;
+	}
+	const inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );
+	return (
+		<AddFilterMenu
+			trigger={
+				<Button
+					accessibleWhenDisabled
+					size="compact"
+					className="dataviews-filters-button"
+					variant="tertiary"
+					disabled={ ! inactiveFilters.length }
+					ref={ ref }
+				>
+					{ __( 'Add filter' ) }
+				</Button>
+			}
+			{ ...{ filters, view, onChangeView, setOpenedFilter } }
+		/>
+	);
+}
+
+export default forwardRef( AddFilter );
diff --git a/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx b/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
new file mode 100644
index 00000000000000..7e4c7db9a29aa9
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
@@ -0,0 +1,338 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { RefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Dropdown,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+	SelectControl,
+	Tooltip,
+	Icon,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef, createInterpolateElement } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+const ENTER = 'Enter';
+const SPACE = ' ';
+
+/**
+ * Internal dependencies
+ */
+import SearchWidget from './search-widget';
+import {
+	OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from '../../constants';
+import type {
+	Filter,
+	NormalizedFilter,
+	Operator,
+	Option,
+	View,
+} from '../../types';
+
+interface FilterTextProps {
+	activeElements: Option[];
+	filterInView?: Filter;
+	filter: NormalizedFilter;
+}
+
+interface OperatorSelectorProps {
+	filter: NormalizedFilter;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FilterSummaryProps extends OperatorSelectorProps {
+	addFilterRef: RefObject< HTMLButtonElement >;
+	openedFilter: string | null;
+}
+
+const FilterText = ( {
+	activeElements,
+	filterInView,
+	filter,
+}: FilterTextProps ) => {
+	if ( activeElements === undefined || activeElements.length === 0 ) {
+		return filter.name;
+	}
+
+	const filterTextWrappers = {
+		Name: <span className="dataviews-filters__summary-filter-text-name" />,
+		Value: (
+			<span className="dataviews-filters__summary-filter-text-value" />
+		),
+	};
+
+	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is any: Admin, Editor". */
+				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is none: Admin, Editor". */
+				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is all: Admin, Editor". */
+				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not all: Admin, Editor". */
+				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is: Admin". */
+				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not: Admin". */
+				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	return sprintf(
+		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
+		__( 'Unknown status for %1$s' ),
+		filter.name
+	);
+};
+
+function OperatorSelector( {
+	filter,
+	view,
+	onChangeView,
+}: OperatorSelectorProps ) {
+	const operatorOptions = filter.operators?.map( ( operator ) => ( {
+		value: operator,
+		label: OPERATORS[ operator ]?.label,
+	} ) );
+	const currentFilter = view.filters?.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const value = currentFilter?.operator || filter.operators[ 0 ];
+	return (
+		operatorOptions.length > 1 && (
+			<HStack
+				spacing={ 2 }
+				justify="flex-start"
+				className="dataviews-filters__summary-operators-container"
+			>
+				<FlexItem className="dataviews-filters__summary-operators-filter-name">
+					{ filter.name }
+				</FlexItem>
+
+				<SelectControl
+					label={ __( 'Conditions' ) }
+					value={ value }
+					options={ operatorOptions }
+					onChange={ ( newValue ) => {
+						const operator = newValue as Operator;
+						const newFilters = currentFilter
+							? [
+									...( view.filters ?? [] ).map(
+										( _filter ) => {
+											if (
+												_filter.field === filter.field
+											) {
+												return {
+													..._filter,
+													operator,
+												};
+											}
+											return _filter;
+										}
+									),
+							  ]
+							: [
+									...( view.filters ?? [] ),
+									{
+										field: filter.field,
+										operator,
+										value: undefined,
+									},
+							  ];
+						onChangeView( {
+							...view,
+							page: 1,
+							filters: newFilters,
+						} );
+					} }
+					size="small"
+					__nextHasNoMarginBottom
+					hideLabelFromVision
+				/>
+			</HStack>
+		)
+	);
+}
+
+export default function FilterSummary( {
+	addFilterRef,
+	openedFilter,
+	...commonProps
+}: FilterSummaryProps ) {
+	const toggleRef = useRef< HTMLDivElement >( null );
+	const { filter, view, onChangeView } = commonProps;
+	const filterInView = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+	const activeElements = filter.elements.filter( ( element ) => {
+		if ( filter.singleSelection ) {
+			return element.value === filterInView?.value;
+		}
+		return filterInView?.value?.includes( element.value );
+	} );
+	const isPrimary = filter.isPrimary;
+	const hasValues = filterInView?.value !== undefined;
+	const canResetOrRemove = ! isPrimary || hasValues;
+	return (
+		<Dropdown
+			defaultOpen={ openedFilter === filter.field }
+			contentClassName="dataviews-filters__summary-popover"
+			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
+			onClose={ () => {
+				toggleRef.current?.focus();
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<div className="dataviews-filters__summary-chip-container">
+					<Tooltip
+						text={ sprintf(
+							/* translators: 1: Filter name. */
+							__( 'Filter by: %1$s' ),
+							filter.name.toLowerCase()
+						) }
+						placement="top"
+					>
+						<div
+							className={ clsx(
+								'dataviews-filters__summary-chip',
+								{
+									'has-reset': canResetOrRemove,
+									'has-values': hasValues,
+								}
+							) }
+							role="button"
+							tabIndex={ 0 }
+							onClick={ onToggle }
+							onKeyDown={ ( event ) => {
+								if ( [ ENTER, SPACE ].includes( event.key ) ) {
+									onToggle();
+									event.preventDefault();
+								}
+							} }
+							aria-pressed={ isOpen }
+							aria-expanded={ isOpen }
+							ref={ toggleRef }
+						>
+							<FilterText
+								activeElements={ activeElements }
+								filterInView={ filterInView }
+								filter={ filter }
+							/>
+						</div>
+					</Tooltip>
+					{ canResetOrRemove && (
+						<Tooltip
+							text={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }
+							placement="top"
+						>
+							<button
+								className={ clsx(
+									'dataviews-filters__summary-chip-remove',
+									{ 'has-values': hasValues }
+								) }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										page: 1,
+										filters: view.filters?.filter(
+											( _filter ) =>
+												_filter.field !== filter.field
+										),
+									} );
+									// If the filter is not primary and can be removed, it will be added
+									// back to the available filters from `Add filter` component.
+									if ( ! isPrimary ) {
+										addFilterRef.current?.focus();
+									} else {
+										// If is primary, focus the toggle button.
+										toggleRef.current?.focus();
+									}
+								} }
+							>
+								<Icon icon={ closeSmall } />
+							</button>
+						</Tooltip>
+					) }
+				</div>
+			) }
+			renderContent={ () => {
+				return (
+					<VStack spacing={ 0 } justify="flex-start">
+						<OperatorSelector { ...commonProps } />
+						<SearchWidget { ...commonProps } />
+					</VStack>
+				);
+			} }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
new file mode 100644
index 00000000000000..440df4f17310d6
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -0,0 +1,237 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	memo,
+	useContext,
+	useRef,
+	useMemo,
+	useCallback,
+	useEffect,
+} from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import FilterSummary from './filter-summary';
+import { default as AddFilter, AddFilterMenu } from './add-filter';
+import ResetFilters from './reset-filters';
+import DataViewsContext from '../dataviews-context';
+import { sanitizeOperators } from '../../utils';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
+import type { NormalizedFilter, NormalizedField, View } from '../../types';
+
+export function useFilters( fields: NormalizedField< any >[], view: View ) {
+	return useMemo( () => {
+		const filters: NormalizedFilter[] = [];
+		fields.forEach( ( field ) => {
+			if ( ! field.elements?.length ) {
+				return;
+			}
+
+			const operators = sanitizeOperators( field );
+			if ( operators.length === 0 ) {
+				return;
+			}
+
+			const isPrimary = !! field.filterBy?.isPrimary;
+			filters.push( {
+				field: field.id,
+				name: field.label,
+				elements: field.elements,
+				singleSelection: operators.some( ( op ) =>
+					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
+				),
+				operators,
+				isVisible:
+					isPrimary ||
+					!! view.filters?.some(
+						( f ) =>
+							f.field === field.id &&
+							ALL_OPERATORS.includes( f.operator )
+					),
+				isPrimary,
+			} );
+		} );
+		// Sort filters by primary property. We need the primary filters to be first.
+		// Then we sort by name.
+		filters.sort( ( a, b ) => {
+			if ( a.isPrimary && ! b.isPrimary ) {
+				return -1;
+			}
+			if ( ! a.isPrimary && b.isPrimary ) {
+				return 1;
+			}
+			return a.name.localeCompare( b.name );
+		} );
+		return filters;
+	}, [ fields, view ] );
+}
+
+export function FiltersToggle( {
+	filters,
+	view,
+	onChangeView,
+	setOpenedFilter,
+	isShowingFilter,
+	setIsShowingFilter,
+}: {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	setOpenedFilter: ( filter: string | null ) => void;
+	isShowingFilter: boolean;
+	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
+} ) {
+	const buttonRef = useRef< HTMLButtonElement >( null );
+	const onChangeViewWithFilterVisibility = useCallback(
+		( _view: View ) => {
+			onChangeView( _view );
+			setIsShowingFilter( true );
+		},
+		[ onChangeView, setIsShowingFilter ]
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+
+	const hasVisibleFilters = !! visibleFilters.length;
+	if ( filters.length === 0 ) {
+		return null;
+	}
+
+	const addFilterButtonProps = {
+		label: __( 'Add filter' ),
+		'aria-expanded': false,
+		isPressed: false,
+	};
+	const toggleFiltersButtonProps = {
+		label: _x( 'Filter', 'verb' ),
+		'aria-expanded': isShowingFilter,
+		isPressed: isShowingFilter,
+		onClick: () => {
+			if ( ! isShowingFilter ) {
+				setOpenedFilter( null );
+			}
+			setIsShowingFilter( ! isShowingFilter );
+		},
+	};
+	const buttonComponent = (
+		<Button
+			ref={ buttonRef }
+			className="dataviews-filters__visibility-toggle"
+			size="compact"
+			icon={ funnel }
+			{ ...( hasVisibleFilters
+				? toggleFiltersButtonProps
+				: addFilterButtonProps ) }
+		/>
+	);
+	return (
+		<div className="dataviews-filters__container-visibility-toggle">
+			{ ! hasVisibleFilters ? (
+				<AddFilterMenu
+					filters={ filters }
+					view={ view }
+					onChangeView={ onChangeViewWithFilterVisibility }
+					setOpenedFilter={ setOpenedFilter }
+					trigger={ buttonComponent }
+				/>
+			) : (
+				<FilterVisibilityToggle
+					buttonRef={ buttonRef }
+					filtersCount={ view.filters?.length }
+				>
+					{ buttonComponent }
+				</FilterVisibilityToggle>
+			) }
+		</div>
+	);
+}
+
+function FilterVisibilityToggle( {
+	buttonRef,
+	filtersCount,
+	children,
+}: {
+	buttonRef: React.RefObject< HTMLButtonElement >;
+	filtersCount?: number;
+	children: React.ReactNode;
+} ) {
+	// Focus the `add filter` button when unmounts.
+	useEffect(
+		() => () => {
+			buttonRef.current?.focus();
+		},
+		[ buttonRef ]
+	);
+	return (
+		<>
+			{ children }
+			{ !! filtersCount && (
+				<span className="dataviews-filters-toggle__count">
+					{ filtersCount }
+				</span>
+			) }
+		</>
+	);
+}
+
+function Filters() {
+	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
+		useContext( DataViewsContext );
+	const addFilterRef = useRef< HTMLButtonElement >( null );
+	const filters = useFilters( fields, view );
+	const addFilter = (
+		<AddFilter
+			key="add-filter"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+			ref={ addFilterRef }
+			setOpenedFilter={ setOpenedFilter }
+		/>
+	);
+	const visibleFilters = filters.filter( ( filter ) => filter.isVisible );
+	if ( visibleFilters.length === 0 ) {
+		return null;
+	}
+	const filterComponents = [
+		...visibleFilters.map( ( filter ) => {
+			return (
+				<FilterSummary
+					key={ filter.field }
+					filter={ filter }
+					view={ view }
+					onChangeView={ onChangeView }
+					addFilterRef={ addFilterRef }
+					openedFilter={ openedFilter }
+				/>
+			);
+		} ),
+		addFilter,
+	];
+
+	filterComponents.push(
+		<ResetFilters
+			key="reset-filters"
+			filters={ filters }
+			view={ view }
+			onChangeView={ onChangeView }
+		/>
+	);
+
+	return (
+		<HStack
+			justify="flex-start"
+			style={ { width: 'fit-content' } }
+			className="dataviews-filters__container"
+			wrap
+		>
+			{ filterComponents }
+		</HStack>
+	);
+}
+
+export default memo( Filters );
diff --git a/packages/dataviews/src/components/dataviews-filters/reset-filters.tsx b/packages/dataviews/src/components/dataviews-filters/reset-filters.tsx
new file mode 100644
index 00000000000000..4e4c44d8a1c311
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/reset-filters.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedFilter, View } from '../../types';
+
+interface ResetFilterProps {
+	filters: NormalizedFilter[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+export default function ResetFilter( {
+	filters,
+	view,
+	onChangeView,
+}: ResetFilterProps ) {
+	const isPrimary = ( field: string ) =>
+		filters.some(
+			( _filter ) => _filter.field === field && _filter.isPrimary
+		);
+	const isDisabled =
+		! view.search &&
+		! view.filters?.some(
+			( _filter ) =>
+				_filter.value !== undefined || ! isPrimary( _filter.field )
+		);
+	return (
+		<Button
+			disabled={ isDisabled }
+			accessibleWhenDisabled
+			size="compact"
+			variant="tertiary"
+			className="dataviews-filters__reset-button"
+			onClick={ () => {
+				onChangeView( {
+					...view,
+					page: 1,
+					search: '',
+					filters: [],
+				} );
+			} }
+		>
+			{ __( 'Reset' ) }
+		</Button>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
new file mode 100644
index 00000000000000..459b68990753c1
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
@@ -0,0 +1,324 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useMemo, useDeferredValue } from '@wordpress/element';
+import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
+import { search, check } from '@wordpress/icons';
+import { SVG, Circle } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import type { Filter, NormalizedFilter, View } from '../../types';
+
+interface SearchWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+}
+
+const radioCheck = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
+	</SVG>
+);
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+const EMPTY_ARRAY: [] = [];
+const getCurrentValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter?: Filter
+) => {
+	if ( filterDefinition.singleSelection ) {
+		return currentFilter?.value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value;
+	}
+
+	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
+		return [ currentFilter.value ];
+	}
+
+	return EMPTY_ARRAY;
+};
+
+const getNewValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter: Filter | undefined,
+	value: any
+) => {
+	if ( filterDefinition.singleSelection ) {
+		return value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value.includes( value )
+			? currentFilter.value.filter( ( v ) => v !== value )
+			: [ ...currentFilter.value, value ];
+	}
+
+	return [ value ];
+};
+
+function generateFilterElementCompositeItemId(
+	prefix: string,
+	filterElementValue: string
+) {
+	return `${ prefix }-${ filterElementValue }`;
+}
+
+function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
+	const baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );
+
+	const [ activeCompositeId, setActiveCompositeId ] = useState<
+		string | null | undefined
+	>(
+		// When there are one or less operators, the first item is set as active
+		// (by setting the initial `activeId` to `undefined`).
+		// With 2 or more operators, the focus is moved on the operators control
+		// (by setting the initial `activeId` to `null`), meaning that there won't
+		// be an active item initially. Focus is then managed via the
+		// `onFocusVisible` callback.
+		filter.operators?.length === 1 ? undefined : null
+	);
+	const currentFilter = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+	const currentValue = getCurrentValue( filter, currentFilter );
+	return (
+		<Composite
+			virtualFocus
+			focusLoop
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
+			role="listbox"
+			className="dataviews-filters__search-widget-listbox"
+			aria-label={ sprintf(
+				/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
+				__( 'List of: %1$s' ),
+				filter.name
+			) }
+			onFocusVisible={ () => {
+				// `onFocusVisible` needs the `Composite` component to be focusable,
+				// which is implicitly achieved via the `virtualFocus` prop.
+				if ( ! activeCompositeId && filter.elements.length ) {
+					setActiveCompositeId(
+						generateFilterElementCompositeItemId(
+							baseId,
+							filter.elements[ 0 ].value
+						)
+					);
+				}
+			} }
+			render={ <Composite.Typeahead /> }
+		>
+			{ filter.elements.map( ( element ) => (
+				<Composite.Hover
+					key={ element.value }
+					render={
+						<Composite.Item
+							id={ generateFilterElementCompositeItemId(
+								baseId,
+								element.value
+							) }
+							render={
+								<div
+									aria-label={ element.label }
+									role="option"
+									className="dataviews-filters__search-widget-listitem"
+								/>
+							}
+							onClick={ () => {
+								const newFilters = currentFilter
+									? [
+											...( view.filters ?? [] ).map(
+												( _filter ) => {
+													if (
+														_filter.field ===
+														filter.field
+													) {
+														return {
+															..._filter,
+															operator:
+																currentFilter.operator ||
+																filter
+																	.operators[ 0 ],
+															value: getNewValue(
+																filter,
+																currentFilter,
+																element.value
+															),
+														};
+													}
+													return _filter;
+												}
+											),
+									  ]
+									: [
+											...( view.filters ?? [] ),
+											{
+												field: filter.field,
+												operator: filter.operators[ 0 ],
+												value: getNewValue(
+													filter,
+													currentFilter,
+													element.value
+												),
+											},
+									  ];
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: newFilters,
+								} );
+							} }
+						/>
+					}
+				>
+					<span className="dataviews-filters__search-widget-listitem-check">
+						{ filter.singleSelection &&
+							currentValue === element.value && (
+								<Icon icon={ radioCheck } />
+							) }
+						{ ! filter.singleSelection &&
+							currentValue.includes( element.value ) && (
+								<Icon icon={ check } />
+							) }
+					</span>
+					<span>{ element.label }</span>
+				</Composite.Hover>
+			) ) }
+		</Composite>
+	);
+}
+
+function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const deferredSearchValue = useDeferredValue( searchValue );
+	const currentFilter = view.filters?.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const currentValue = getCurrentValue( filter, currentFilter );
+	const matches = useMemo( () => {
+		const normalizedSearch = normalizeSearchInput( deferredSearchValue );
+		return filter.elements.filter( ( item ) =>
+			normalizeSearchInput( item.label ).includes( normalizedSearch )
+		);
+	}, [ filter.elements, deferredSearchValue ] );
+	return (
+		<Ariakit.ComboboxProvider
+			selectedValue={ currentValue }
+			setSelectedValue={ ( value ) => {
+				const newFilters = currentFilter
+					? [
+							...( view.filters ?? [] ).map( ( _filter ) => {
+								if ( _filter.field === filter.field ) {
+									return {
+										..._filter,
+										operator:
+											currentFilter.operator ||
+											filter.operators[ 0 ],
+										value,
+									};
+								}
+								return _filter;
+							} ),
+					  ]
+					: [
+							...( view.filters ?? [] ),
+							{
+								field: filter.field,
+								operator: filter.operators[ 0 ],
+								value,
+							},
+					  ];
+				onChangeView( {
+					...view,
+					page: 1,
+					filters: newFilters,
+				} );
+			} }
+			setValue={ setSearchValue }
+		>
+			<div className="dataviews-filters__search-widget-filter-combobox__wrapper">
+				<Ariakit.ComboboxLabel
+					render={
+						<VisuallyHidden>
+							{ __( 'Search items' ) }
+						</VisuallyHidden>
+					}
+				>
+					{ __( 'Search items' ) }
+				</Ariakit.ComboboxLabel>
+				<Ariakit.Combobox
+					autoSelect="always"
+					placeholder={ __( 'Search' ) }
+					className="dataviews-filters__search-widget-filter-combobox__input"
+				/>
+				<div className="dataviews-filters__search-widget-filter-combobox__icon">
+					<Icon icon={ search } />
+				</div>
+			</div>
+			<Ariakit.ComboboxList
+				className="dataviews-filters__search-widget-filter-combobox-list"
+				alwaysVisible
+			>
+				{ matches.map( ( element ) => {
+					return (
+						<Ariakit.ComboboxItem
+							resetValueOnSelect={ false }
+							key={ element.value }
+							value={ element.value }
+							className="dataviews-filters__search-widget-listitem"
+							hideOnClick={ false }
+							setValueOnClick={ false }
+							focusOnHover
+						>
+							<span className="dataviews-filters__search-widget-listitem-check">
+								{ filter.singleSelection &&
+									currentValue === element.value && (
+										<Icon icon={ radioCheck } />
+									) }
+								{ ! filter.singleSelection &&
+									currentValue.includes( element.value ) && (
+										<Icon icon={ check } />
+									) }
+							</span>
+							<span>
+								<Ariakit.ComboboxItemValue
+									className="dataviews-filters__search-widget-filter-combobox-item-value"
+									value={ element.label }
+								/>
+								{ !! element.description && (
+									<span className="dataviews-filters__search-widget-listitem-description">
+										{ element.description }
+									</span>
+								) }
+							</span>
+						</Ariakit.ComboboxItem>
+					);
+				} ) }
+				{ ! matches.length && <p>{ __( 'No results found' ) }</p> }
+			</Ariakit.ComboboxList>
+		</Ariakit.ComboboxProvider>
+	);
+}
+
+export default function SearchWidget( props: SearchWidgetProps ) {
+	const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
+	return <Widget { ...props } />;
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
new file mode 100644
index 00000000000000..130ef8872615a5
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -0,0 +1,291 @@
+.dataviews-filters__button {
+	position: relative;
+}
+
+.dataviews-filters__container {
+	padding-top: 0;
+}
+
+.dataviews-filters__reset-button.dataviews-filters__reset-button[aria-disabled="true"] {
+	&,
+	&:hover {
+		opacity: 0;
+	}
+
+	&:focus {
+		opacity: 1;
+	}
+}
+
+.dataviews-filters__summary-popover {
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+
+	.components-popover__content {
+		width: 230px;
+		border-radius: $grid-unit-05;
+	}
+
+	&.components-dropdown__content {
+		.components-popover__content {
+			padding: 0;
+		}
+	}
+}
+
+.dataviews-filters__summary-operators-container {
+	padding: $grid-unit-10 $grid-unit-10 0;
+
+	&:has(+ .dataviews-filters__search-widget-listbox) {
+		border-bottom: 1px solid $gray-200;
+		padding-bottom: $grid-unit-10;
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.dataviews-filters__summary-operators-filter-name {
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__summary-chip-container {
+	position: relative;
+	white-space: pre-wrap;
+
+	.dataviews-filters__summary-chip {
+		border-radius: $grid-unit-20;
+		border: $border-width solid transparent;
+		cursor: pointer;
+		padding: $grid-unit-05 $grid-unit-15;
+		min-height: $grid-unit-40;
+		background: $gray-100;
+		color: $gray-800;
+		position: relative;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+
+		&.has-reset {
+			padding-inline-end: $button-size-small + $grid-unit-05;
+		}
+
+		&:hover,
+		&:focus-visible,
+		&[aria-expanded="true"] {
+			background: $gray-200;
+			color: $gray-900;
+		}
+
+		&.has-values {
+			color: var(--wp-admin-theme-color);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+			&:hover,
+			&[aria-expanded="true"] {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		.dataviews-filters-__summary-filter-text-name {
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-filters__summary-chip-remove {
+		width: $icon-size;
+		height: $icon-size;
+		border-radius: 50%;
+		border: 0;
+		padding: 0;
+		position: absolute;
+		right: $grid-unit-05;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		cursor: pointer;
+
+		svg {
+			fill: $gray-700;
+		}
+
+		&:hover,
+		&:focus {
+			background: $gray-200;
+			svg {
+				fill: $gray-900;
+			}
+		}
+
+		&.has-values {
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+
+		&:focus-visible {
+			outline: none;
+			box-shadow:
+				0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox-list {
+	max-height: $grid-unit * 23;
+	padding: $grid-unit-05;
+	overflow: auto;
+	border-top: 1px solid $gray-200;
+
+	.dataviews-filters__search-widget-filter-combobox-item-value {
+		[data-user-value] {
+			font-weight: 600;
+		}
+	}
+}
+
+.dataviews-filters__search-widget-listbox {
+	padding: $grid-unit-05;
+	overflow: auto;
+}
+
+.dataviews-filters__search-widget-listitem {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	border-radius: $radius-small;
+	box-sizing: border-box;
+	padding: $grid-unit-10 $grid-unit-15;
+	cursor: default;
+	margin-block-end: 2px;
+
+	&:last-child {
+		margin-block-end: 0;
+	}
+
+	&:hover,
+	&[data-active-item],
+	&:focus {
+		background-color: var(--wp-admin-theme-color);
+		color: $white;
+
+		.dataviews-filters__search-widget-listitem-check {
+			fill: $white;
+		}
+
+		.dataviews-filters__search-widget-listitem-description {
+			color: $white;
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-check {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+	}
+
+	.dataviews-filters__search-widget-listitem-description {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: $helptext-font-size;
+		line-height: 16px;
+		color: $gray-700;
+	}
+}
+
+.dataviews-filters__search-widget-filter-combobox__wrapper {
+	position: relative;
+	padding: $grid-unit-10;
+
+	.dataviews-filters__search-widget-filter-combobox__input {
+		@include input-control;
+		display: block;
+		padding: 0 $grid-unit-40 0 $grid-unit-10;
+		background: $gray-100;
+		border: none;
+		width: 100%;
+		height: $grid-unit-40;
+
+		// Unset inherited values.
+		margin-left: 0;
+		margin-right: 0;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
+		&:focus {
+			background: $white;
+			box-shadow:
+				inset 0 0 0 var(--wp-admin-border-width-focus)
+				var(--wp-admin-theme-color);
+		}
+
+		&::placeholder {
+			color: $gray-700;
+		}
+
+		&::-webkit-search-decoration,
+		&::-webkit-search-cancel-button,
+		&::-webkit-search-results-button,
+		&::-webkit-search-results-decoration {
+			-webkit-appearance: none;
+		}
+	}
+
+	.dataviews-filters__search-widget-filter-combobox__icon {
+		position: absolute;
+		right: $grid-unit-15;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: $icon-size;
+	}
+}
+
+.dataviews-filters__container-visibility-toggle {
+	position: relative;
+	flex-shrink: 0;
+}
+
+.dataviews-filters-toggle__count {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(50%, -50%);
+	background: var(--wp-admin-theme-color, #3858e9);
+	height: $grid-unit-20;
+	min-width: $grid-unit-20;
+	line-height: $grid-unit-20;
+	padding: 0 $grid-unit-05;
+	text-align: center;
+	border-radius: $grid-unit-10;
+	font-size: 11px;
+	outline: var(--wp-admin-border-width-focus) solid $white;
+	color: $white;
+	box-sizing: border-box;
+}
+
+.dataviews-search {
+	width: fit-content;
+}
diff --git a/packages/dataviews/src/components/dataviews-footer/index.tsx b/packages/dataviews/src/components/dataviews-footer/index.tsx
new file mode 100644
index 00000000000000..191e16f47e2c96
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-footer/index.tsx
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import DataViewsPagination from '../dataviews-pagination';
+import {
+	BulkActionsFooter,
+	useSomeItemHasAPossibleBulkAction,
+} from '../dataviews-bulk-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
+
+const EMPTY_ARRAY: [] = [];
+
+export default function DataViewsFooter() {
+	const {
+		view,
+		paginationInfo: { totalItems = 0, totalPages },
+		data,
+		actions = EMPTY_ARRAY,
+	} = useContext( DataViewsContext );
+	const hasBulkActions =
+		useSomeItemHasAPossibleBulkAction( actions, data ) &&
+		[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type );
+
+	if (
+		! totalItems ||
+		! totalPages ||
+		( totalPages <= 1 && ! hasBulkActions )
+	) {
+		return null;
+	}
+	return (
+		!! totalItems && (
+			<HStack
+				expanded={ false }
+				justify="end"
+				className="dataviews-footer"
+			>
+				{ hasBulkActions && <BulkActionsFooter /> }
+				<DataViewsPagination />
+			</HStack>
+		)
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss
new file mode 100644
index 00000000000000..cdb1359ccee393
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-footer/style.scss
@@ -0,0 +1,40 @@
+.dataviews-footer {
+	position: sticky;
+	bottom: 0;
+	left: 0;
+	background-color: $white;
+	padding: $grid-unit-15 $grid-unit-60;
+	border-top: $border-width solid $gray-100;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+	z-index: z-index(".dataviews-footer");
+}
+
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-footer {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 560px) {
+	.dataviews-footer {
+		flex-direction: column !important;
+
+		.dataviews-bulk-actions-footer__container {
+			width: 100%;
+		}
+
+		.dataviews-bulk-actions-footer__item-count {
+			flex-grow: 1;
+		}
+
+		.dataviews-pagination {
+			width: 100%;
+			justify-content: space-between;
+		}
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
new file mode 100644
index 00000000000000..c5e1cb09adf15f
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -0,0 +1,317 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactElement } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import type { Action, ActionModal as ActionModalType } from '../../types';
+
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
+
+export interface ActionTriggerProps< Item > {
+	action: Action< Item >;
+	onClick: MouseEventHandler;
+	isBusy?: boolean;
+	items: Item[];
+}
+
+interface ActionModalProps< Item > {
+	action: ActionModalType< Item >;
+	items: Item[];
+	closeModal?: () => void;
+}
+
+interface ActionWithModalProps< Item > extends ActionModalProps< Item > {
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
+	isBusy?: boolean;
+}
+
+interface ActionsMenuGroupProps< Item > {
+	actions: Action< Item >[];
+	item: Item;
+}
+
+interface ItemActionsProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	isCompact?: boolean;
+}
+
+interface CompactItemActionsProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	isSmall?: boolean;
+}
+
+interface PrimaryActionsProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	registry: ReturnType< typeof useRegistry >;
+}
+interface ActionsListProps< Item > {
+	item: Item;
+	actions: Action< Item >[];
+	registry: ReturnType< typeof useRegistry >;
+	ActionTrigger: ( props: ActionTriggerProps< Item > ) => ReactElement;
+}
+
+function ButtonTrigger< Item >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Button
+			label={ label }
+			icon={ action.icon }
+			isDestructive={ action.isDestructive }
+			size="compact"
+			onClick={ onClick }
+		/>
+	);
+}
+
+function MenuItemTrigger< Item >( {
+	action,
+	onClick,
+	items,
+}: ActionTriggerProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Menu.Item
+			onClick={ onClick }
+			hideOnClick={ ! ( 'RenderModal' in action ) }
+		>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
+	);
+}
+
+export function ActionModal< Item >( {
+	action,
+	items,
+	closeModal,
+}: ActionModalProps< Item > ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Modal
+			title={ action.modalHeader || label }
+			__experimentalHideHeader={ !! action.hideModalHeader }
+			onRequestClose={ closeModal ?? ( () => {} ) }
+			focusOnMount="firstContentElement"
+			size="medium"
+			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
+				action.id
+			) }` }
+		>
+			<action.RenderModal items={ items } closeModal={ closeModal } />
+		</Modal>
+	);
+}
+
+export function ActionWithModal< Item >( {
+	action,
+	items,
+	ActionTrigger,
+	isBusy,
+}: ActionWithModalProps< Item > ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => {
+			setIsModalOpen( true );
+		},
+		items,
+		isBusy,
+	};
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<ActionModal
+					action={ action }
+					items={ items }
+					closeModal={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}
+
+export function ActionsMenuGroup< Item >( {
+	actions,
+	item,
+}: ActionsMenuGroupProps< Item > ) {
+	const registry = useRegistry();
+	return (
+		<Menu.Group>
+			<ActionsList
+				actions={ actions }
+				item={ item }
+				registry={ registry }
+				ActionTrigger={ MenuItemTrigger }
+			/>
+		</Menu.Group>
+	);
+}
+
+function hasOnlyOneActionAndIsPrimary< Item >(
+	primaryActions: Action< Item >[],
+	actions: Action< Item >[]
+) {
+	return primaryActions.length === 1 && actions.length === 1;
+}
+
+export default function ItemActions< Item >( {
+	item,
+	actions,
+	isCompact,
+}: ItemActionsProps< Item > ) {
+	const registry = useRegistry();
+	const { primaryActions, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryActions: _primaryActions,
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+
+	if ( isCompact ) {
+		return (
+			<CompactItemActions
+				item={ item }
+				actions={ eligibleActions }
+				isSmall
+			/>
+		);
+	}
+
+	if ( hasOnlyOneActionAndIsPrimary( primaryActions, actions ) ) {
+		return (
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
+		);
+	}
+
+	return (
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			className="dataviews-item-actions"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
+			<PrimaryActions
+				item={ item }
+				actions={ primaryActions }
+				registry={ registry }
+			/>
+			<CompactItemActions item={ item } actions={ eligibleActions } />
+		</HStack>
+	);
+}
+
+function CompactItemActions< Item >( {
+	item,
+	actions,
+	isSmall,
+}: CompactItemActionsProps< Item > ) {
+	return (
+		<Menu
+			trigger={
+				<Button
+					size={ isSmall ? 'small' : 'compact' }
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					accessibleWhenDisabled
+					disabled={ ! actions.length }
+					className="dataviews-all-actions-button"
+				/>
+			}
+			placement="bottom-end"
+		>
+			<ActionsMenuGroup actions={ actions } item={ item } />
+		</Menu>
+	);
+}
+
+function PrimaryActions< Item >( {
+	item,
+	actions,
+	registry,
+}: PrimaryActionsProps< Item > ) {
+	if ( ! Array.isArray( actions ) || actions.length === 0 ) {
+		return null;
+	}
+	return (
+		<ActionsList
+			actions={ actions }
+			item={ item }
+			registry={ registry }
+			ActionTrigger={ ButtonTrigger }
+		/>
+	);
+}
+
+function ActionsList< Item >( {
+	item,
+	actions,
+	registry,
+	ActionTrigger,
+}: ActionsListProps< Item > ) {
+	return actions.map( ( action ) => {
+		if ( 'RenderModal' in action ) {
+			return (
+				<ActionWithModal
+					key={ action.id }
+					action={ action }
+					items={ [ item ] }
+					ActionTrigger={ ActionTrigger }
+				/>
+			);
+		}
+		return (
+			<ActionTrigger
+				key={ action.id }
+				action={ action }
+				onClick={ () => {
+					action.callback( [ item ], { registry } );
+				} }
+				items={ [ item ] }
+			/>
+		);
+	} );
+}
diff --git a/packages/dataviews/src/components/dataviews-item-actions/style.scss b/packages/dataviews/src/components/dataviews-item-actions/style.scss
new file mode 100644
index 00000000000000..9a0327ccb673ff
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-item-actions/style.scss
@@ -0,0 +1,3 @@
+.dataviews-action-modal {
+	z-index: z-index(".dataviews-action-modal");
+}
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
new file mode 100644
index 00000000000000..ebc251eae36a7a
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import type { ViewBaseProps } from '../../types';
+
+export default function DataViewsLayout() {
+	const {
+		actions = [],
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		view,
+		onChangeView,
+		selection,
+		onChangeSelection,
+		setOpenedFilter,
+		onClickItem,
+		isItemClickable,
+	} = useContext( DataViewsContext );
+
+	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
+		?.component as ComponentType< ViewBaseProps< any > >;
+
+	return (
+		<ViewComponent
+			actions={ actions }
+			data={ data }
+			fields={ fields }
+			getItemId={ getItemId }
+			isLoading={ isLoading }
+			onChangeView={ onChangeView }
+			onChangeSelection={ onChangeSelection }
+			selection={ selection }
+			setOpenedFilter={ setOpenedFilter }
+			onClickItem={ onClickItem }
+			isItemClickable={ isItemClickable }
+			view={ view }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
new file mode 100644
index 00000000000000..08a25ea01224e0
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalHStack as HStack,
+	SelectControl,
+} from '@wordpress/components';
+import { createInterpolateElement, memo, useContext } from '@wordpress/element';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+
+function DataViewsPagination() {
+	const {
+		view,
+		onChangeView,
+		paginationInfo: { totalItems = 0, totalPages },
+	} = useContext( DataViewsContext );
+
+	if ( ! totalItems || ! totalPages ) {
+		return null;
+	}
+
+	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label: page.toString(),
+				'aria-label':
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
+	return (
+		!! totalItems &&
+		totalPages !== 1 && (
+			<HStack
+				expanded={ false }
+				className="dataviews-pagination"
+				justify="end"
+				spacing={ 6 }
+			>
+				<HStack
+					justify="flex-start"
+					expanded={ false }
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
+				>
+					{ createInterpolateElement(
+						sprintf(
+							// translators: 1: Current page number, 2: Total number of pages.
+							_x(
+								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'paging'
+							),
+							'<CurrentPage />',
+							totalPages
+						),
+						{
+							div: <div aria-hidden />,
+							CurrentPage: (
+								<SelectControl
+									aria-label={ __( 'Current page' ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
+									onChange={ ( newValue ) => {
+										onChangeView( {
+											...view,
+											page: +newValue,
+										} );
+									} }
+									size="small"
+									__nextHasNoMarginBottom
+									variant="minimal"
+								/>
+							),
+						}
+					) }
+				</HStack>
+				<HStack expanded={ false } spacing={ 1 }>
+					<Button
+						onClick={ () =>
+							onChangeView( {
+								...view,
+								page: currentPage - 1,
+							} )
+						}
+						disabled={ currentPage === 1 }
+						accessibleWhenDisabled
+						label={ __( 'Previous page' ) }
+						icon={ isRTL() ? next : previous }
+						showTooltip
+						size="compact"
+						tooltipPosition="top"
+					/>
+					<Button
+						onClick={ () =>
+							onChangeView( { ...view, page: currentPage + 1 } )
+						}
+						disabled={ currentPage >= totalPages }
+						accessibleWhenDisabled
+						label={ __( 'Next page' ) }
+						icon={ isRTL() ? previous : next }
+						showTooltip
+						size="compact"
+						tooltipPosition="top"
+					/>
+				</HStack>
+			</HStack>
+		)
+	);
+}
+
+export default memo( DataViewsPagination );
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
new file mode 100644
index 00000000000000..c8079c6b3ee828
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -0,0 +1,12 @@
+.dataviews-pagination__page-select {
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews-search/index.tsx b/packages/dataviews/src/components/dataviews-search/index.tsx
new file mode 100644
index 00000000000000..1aef99872960be
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-search/index.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, memo, useContext } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+import { useDebouncedInput } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+
+interface SearchProps {
+	label?: string;
+}
+
+const DataViewsSearch = memo( function Search( { label }: SearchProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
+		view.search
+	);
+	useEffect( () => {
+		setSearch( view.search ?? '' );
+	}, [ view.search, setSearch ] );
+	const onChangeViewRef = useRef( onChangeView );
+	const viewRef = useRef( view );
+	useEffect( () => {
+		onChangeViewRef.current = onChangeView;
+		viewRef.current = view;
+	}, [ onChangeView, view ] );
+	useEffect( () => {
+		if ( debouncedSearch !== viewRef.current?.search ) {
+			onChangeViewRef.current( {
+				...viewRef.current,
+				page: 1,
+				search: debouncedSearch,
+			} );
+		}
+	}, [ debouncedSearch ] );
+	const searchLabel = label || __( 'Search' );
+	return (
+		<SearchControl
+			className="dataviews-search"
+			__nextHasNoMarginBottom
+			onChange={ setSearch }
+			value={ search }
+			label={ searchLabel }
+			placeholder={ searchLabel }
+			size="compact"
+		/>
+	);
+} );
+
+export default DataViewsSearch;
diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
new file mode 100644
index 00000000000000..827f061976443e
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { Field } from '../../types';
+import type { SetSelection } from '../../private-types';
+
+interface DataViewsSelectionCheckboxProps< Item > {
+	selection: string[];
+	onChangeSelection: SetSelection;
+	item: Item;
+	getItemId: ( item: Item ) => string;
+	titleField?: Field< Item >;
+	disabled: boolean;
+}
+
+export default function DataViewsSelectionCheckbox< Item >( {
+	selection,
+	onChangeSelection,
+	item,
+	getItemId,
+	titleField,
+	disabled,
+}: DataViewsSelectionCheckboxProps< Item > ) {
+	const id = getItemId( item );
+	const checked = ! disabled && selection.includes( id );
+	let selectionLabel;
+	if ( titleField?.getValue && item ) {
+		// eslint-disable-next-line @wordpress/valid-sprintf
+		selectionLabel = sprintf(
+			checked
+				? /* translators: %s: item title. */ __( 'Deselect item: %s' )
+				: /* translators: %s: item title. */ __( 'Select item: %s' ),
+			titleField.getValue( { item } )
+		);
+	} else {
+		selectionLabel = checked
+			? __( 'Select a new item' )
+			: __( 'Deselect item' );
+	}
+	return (
+		<CheckboxControl
+			className="dataviews-selection-checkbox"
+			__nextHasNoMarginBottom
+			aria-label={ selectionLabel }
+			aria-disabled={ disabled }
+			checked={ checked }
+			onChange={ () => {
+				if ( disabled ) {
+					return;
+				}
+
+				onChangeSelection(
+					selection.includes( id )
+						? selection.filter( ( itemId ) => id !== itemId )
+						: [ ...selection, id ]
+				);
+			} }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss b/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss
new file mode 100644
index 00000000000000..d2724cae3feb9b
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/style.scss
@@ -0,0 +1,14 @@
+.dataviews-selection-checkbox {
+	// Experimental override for CheckboxControl size (fragile)
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+
+	line-height: 0;
+	flex-shrink: 0;
+
+	.components-checkbox-control__input-container {
+		margin: 0;
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
new file mode 100644
index 00000000000000..28e48525ffa73b
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -0,0 +1,676 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Dropdown,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	SelectControl,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
+	BaseControl,
+	Icon,
+} from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { memo, useContext, useMemo } from '@wordpress/element';
+import {
+	chevronDown,
+	chevronUp,
+	cog,
+	seen,
+	unseen,
+	lock,
+} from '@wordpress/icons';
+import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import type { NormalizedField, SupportedLayouts, View } from '../../types';
+import DataViewsContext from '../dataviews-context';
+import { unlock } from '../../lock-unlock';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+interface ViewTypeMenuProps {
+	defaultLayouts?: SupportedLayouts;
+}
+
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
+function ViewTypeMenu( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: ViewTypeMenuProps ) {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	const availableLayouts = Object.keys( defaultLayouts );
+	if ( availableLayouts.length <= 1 ) {
+		return null;
+	}
+	const activeView = VIEW_LAYOUTS.find( ( v ) => view.type === v.type );
+	return (
+		<Menu
+			trigger={
+				<Button
+					size="compact"
+					icon={ activeView?.icon }
+					label={ __( 'Layout' ) }
+				/>
+			}
+		>
+			{ availableLayouts.map( ( layout ) => {
+				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
+				if ( ! config ) {
+					return null;
+				}
+				return (
+					<Menu.RadioItem
+						key={ layout }
+						value={ layout }
+						name="view-actions-available-view"
+						checked={ layout === view.type }
+						hideOnClick
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									const viewWithoutLayout = { ...view };
+									if ( 'layout' in viewWithoutLayout ) {
+										delete viewWithoutLayout.layout;
+									}
+									// @ts-expect-error
+									return onChangeView( {
+										...viewWithoutLayout,
+										type: e.target.value,
+										...defaultLayouts[ e.target.value ],
+									} );
+							}
+							warning( 'Invalid dataview' );
+						} }
+					>
+						<Menu.ItemLabel>{ config.label }</Menu.ItemLabel>
+					</Menu.RadioItem>
+				);
+			} ) }
+		</Menu>
+	);
+}
+
+function SortFieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+	const orderOptions = useMemo( () => {
+		const sortableFields = fields.filter(
+			( field ) => field.enableSorting !== false
+		);
+		return sortableFields.map( ( field ) => {
+			return {
+				label: field.label,
+				value: field.id,
+			};
+		} );
+	}, [ fields ] );
+
+	return (
+		<SelectControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Sort by' ) }
+			value={ view.sort?.field }
+			options={ orderOptions }
+			onChange={ ( value: string ) => {
+				onChangeView( {
+					...view,
+					sort: {
+						direction: view?.sort?.direction || 'desc',
+						field: value,
+					},
+				} );
+			} }
+		/>
+	);
+}
+
+function SortDirectionControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const sortableFields = fields.filter(
+		( field ) => field.enableSorting !== false
+	);
+	if ( sortableFields.length === 0 ) {
+		return null;
+	}
+
+	let value = view.sort?.direction;
+	if ( ! value && view.sort?.field ) {
+		value = 'desc';
+	}
+	return (
+		<ToggleGroupControl
+			className="dataviews-view-config__sort-direction"
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Order' ) }
+			value={ value }
+			onChange={ ( newDirection ) => {
+				if ( newDirection === 'asc' || newDirection === 'desc' ) {
+					onChangeView( {
+						...view,
+						sort: {
+							direction: newDirection,
+							field:
+								view.sort?.field ||
+								// If there is no field assigned as the sorting field assign the first sortable field.
+								fields.find(
+									( field ) => field.enableSorting !== false
+								)?.id ||
+								'',
+						},
+					} );
+					return;
+				}
+				warning( 'Invalid direction' );
+			} }
+		>
+			{ SORTING_DIRECTIONS.map( ( direction ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ direction }
+						value={ direction }
+						icon={ sortIcons[ direction ] }
+						label={ sortLabels[ direction ] }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
+function ItemsPerPageControl() {
+	const { view, onChangeView } = useContext( DataViewsContext );
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Items per page' ) }
+			value={ view.perPage || 10 }
+			disabled={ ! view?.sort?.field }
+			onChange={ ( newItemsPerPage ) => {
+				const newItemsPerPageNumber =
+					typeof newItemsPerPage === 'number' ||
+					newItemsPerPage === undefined
+						? newItemsPerPage
+						: parseInt( newItemsPerPage, 10 );
+				onChangeView( {
+					...view,
+					perPage: newItemsPerPageNumber,
+					page: 1,
+				} );
+			} }
+		>
+			{ PAGE_SIZE_VALUES.map( ( value ) => {
+				return (
+					<ToggleGroupControlOption
+						key={ value }
+						value={ value }
+						label={ value.toString() }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
+	);
+}
+
+function FieldItem( {
+	field,
+	isVisible,
+	isFirst,
+	isLast,
+	canMove = true,
+	onToggleVisibility,
+	onMoveUp,
+	onMoveDown,
+}: {
+	field: NormalizedField< any >;
+	isVisible: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+	canMove?: boolean;
+	onToggleVisibility?: () => void;
+	onMoveUp?: () => void;
+	onMoveDown?: () => void;
+} ) {
+	const focusVisibilityField = () => {
+		// Focus the visibility button to avoid focus loss.
+		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			const element = document.querySelector(
+				`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
+			);
+			if ( element instanceof HTMLElement ) {
+				element.focus();
+			}
+		}, 50 );
+	};
+
+	return (
+		<Item>
+			<HStack
+				expanded
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
+				justify="flex-start"
+			>
+				<span className="dataviews-field-control__icon">
+					{ ! canMove && ! field.enableHiding && (
+						<Icon icon={ lock } />
+					) }
+				</span>
+				<span className="dataviews-field-control__label">
+					{ field.label }
+				</span>
+				<HStack
+					justify="flex-end"
+					expanded={ false }
+					className="dataviews-field-control__actions"
+				>
+					{ isVisible && (
+						<>
+							<Button
+								disabled={ isFirst || ! canMove }
+								accessibleWhenDisabled
+								size="compact"
+								onClick={ onMoveUp }
+								icon={ chevronUp }
+								label={
+									isFirst || ! canMove
+										? __( "This field can't be moved up" )
+										: sprintf(
+												/* translators: %s: field label */
+												__( 'Move %s up' ),
+												field.label
+										  )
+								}
+							/>
+							<Button
+								disabled={ isLast || ! canMove }
+								accessibleWhenDisabled
+								size="compact"
+								onClick={ onMoveDown }
+								icon={ chevronDown }
+								label={
+									isLast || ! canMove
+										? __( "This field can't be moved down" )
+										: sprintf(
+												/* translators: %s: field label */
+												__( 'Move %s down' ),
+												field.label
+										  )
+								}
+							/>
+						</>
+					) }
+					{ onToggleVisibility && (
+						<Button
+							className="dataviews-field-control__field-visibility-button"
+							disabled={ ! field.enableHiding }
+							accessibleWhenDisabled
+							size="compact"
+							onClick={ () => {
+								onToggleVisibility();
+								focusVisibilityField();
+							} }
+							icon={ isVisible ? unseen : seen }
+							label={
+								isVisible
+									? sprintf(
+											/* translators: %s: field label */
+											_x( 'Hide %s', 'field' ),
+											field.label
+									  )
+									: sprintf(
+											/* translators: %s: field label */
+											_x( 'Show %s', 'field' ),
+											field.label
+									  )
+							}
+						/>
+					) }
+				</HStack>
+			</HStack>
+		</Item>
+	);
+}
+
+function RegularFieldItem( {
+	index,
+	field,
+	view,
+	onChangeView,
+}: {
+	index?: number;
+	field: NormalizedField< any >;
+	view: View;
+	onChangeView: ( view: View ) => void;
+} ) {
+	const visibleFieldIds = view.fields ?? [];
+	const isVisible =
+		index !== undefined && visibleFieldIds.includes( field.id );
+
+	return (
+		<FieldItem
+			field={ field }
+			isVisible={ isVisible }
+			isFirst={ index !== undefined && index < 1 }
+			isLast={
+				index !== undefined && index === visibleFieldIds.length - 1
+			}
+			onToggleVisibility={ () => {
+				onChangeView( {
+					...view,
+					fields: isVisible
+						? visibleFieldIds.filter(
+								( fieldId ) => fieldId !== field.id
+						  )
+						: [ ...visibleFieldIds, field.id ],
+				} );
+			} }
+			onMoveUp={
+				index !== undefined
+					? () => {
+							onChangeView( {
+								...view,
+								fields: [
+									...( visibleFieldIds.slice(
+										0,
+										index - 1
+									) ?? [] ),
+									field.id,
+									visibleFieldIds[ index - 1 ],
+									...visibleFieldIds.slice( index + 1 ),
+								],
+							} );
+					  }
+					: undefined
+			}
+			onMoveDown={
+				index !== undefined
+					? () => {
+							onChangeView( {
+								...view,
+								fields: [
+									...( visibleFieldIds.slice( 0, index ) ??
+										[] ),
+									visibleFieldIds[ index + 1 ],
+									field.id,
+									...visibleFieldIds.slice( index + 2 ),
+								],
+							} );
+					  }
+					: undefined
+			}
+		/>
+	);
+}
+
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
+function FieldControl() {
+	const { view, fields, onChangeView } = useContext( DataViewsContext );
+
+	const togglableFields = [
+		view?.titleField,
+		view?.mediaField,
+		view?.descriptionField,
+	].filter( Boolean );
+	const visibleFieldIds = view.fields ?? [];
+	const hiddenFields = fields.filter(
+		( f ) =>
+			! visibleFieldIds.includes( f.id ) &&
+			! togglableFields.includes( f.id )
+	);
+	const visibleFields = visibleFieldIds
+		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
+		.filter( isDefined );
+
+	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
+		return null;
+	}
+	const titleField = fields.find( ( f ) => f.id === view.titleField );
+	const mediaField = fields.find( ( f ) => f.id === view.mediaField );
+	const descriptionField = fields.find(
+		( f ) => f.id === view.descriptionField
+	);
+	const lockedFields = [
+		{
+			field: titleField,
+			isVisibleFlag: 'showTitle',
+		},
+		{
+			field: mediaField,
+			isVisibleFlag: 'showMedia',
+		},
+		{
+			field: descriptionField,
+			isVisibleFlag: 'showDescription',
+		},
+	].filter( ( { field } ) => isDefined( field ) );
+	const visibleLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
+	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	const hiddenLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
+	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+
+	return (
+		<VStack className="dataviews-field-control" spacing={ 6 }>
+			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
+				{ ( visibleLockedFields.length > 0 ||
+					!! visibleFields?.length ) && (
+					<ItemGroup isBordered isSeparated>
+						{ visibleLockedFields.map(
+							( { field, isVisibleFlag } ) => {
+								return (
+									<FieldItem
+										key={ field.id }
+										field={ field }
+										isVisible
+										onToggleVisibility={ () => {
+											onChangeView( {
+												...view,
+												[ isVisibleFlag ]: false,
+											} );
+										} }
+										canMove={ false }
+									/>
+								);
+							}
+						) }
+
+						{ visibleFields.map( ( field, index ) => (
+							<RegularFieldItem
+								key={ field.id }
+								field={ field }
+								view={ view }
+								onChangeView={ onChangeView }
+								index={ index }
+							/>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+
+			{ ( !! hiddenFields?.length || !! hiddenLockedFields.length ) && (
+				<VStack spacing={ 4 }>
+					<BaseControl.VisualLabel style={ { margin: 0 } }>
+						{ __( 'Hidden' ) }
+					</BaseControl.VisualLabel>
+					<VStack
+						className="dataviews-view-config__properties"
+						spacing={ 0 }
+					>
+						<ItemGroup isBordered isSeparated>
+							{ hiddenLockedFields.length > 0 &&
+								hiddenLockedFields.map(
+									( { field, isVisibleFlag } ) => {
+										return (
+											<FieldItem
+												key={ field.id }
+												field={ field }
+												isVisible={ false }
+												onToggleVisibility={ () => {
+													onChangeView( {
+														...view,
+														[ isVisibleFlag ]: true,
+													} );
+												} }
+												canMove={ false }
+											/>
+										);
+									}
+								) }
+							{ hiddenFields.map( ( field ) => (
+								<RegularFieldItem
+									key={ field.id }
+									field={ field }
+									view={ view }
+									onChangeView={ onChangeView }
+								/>
+							) ) }
+						</ItemGroup>
+					</VStack>
+				</VStack>
+			) }
+		</VStack>
+	);
+}
+
+function SettingsSection( {
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children: React.ReactNode;
+} ) {
+	return (
+		<Grid columns={ 12 } className="dataviews-settings-section" gap={ 4 }>
+			<div className="dataviews-settings-section__sidebar">
+				<Heading
+					level={ 2 }
+					className="dataviews-settings-section__title"
+				>
+					{ title }
+				</Heading>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
+					>
+						{ description }
+					</Text>
+				) }
+			</div>
+			<Grid
+				columns={ 8 }
+				gap={ 4 }
+				className="dataviews-settings-section__content"
+			>
+				{ children }
+			</Grid>
+		</Grid>
+	);
+}
+
+function DataviewsViewConfigDropdown() {
+	const { view } = useContext( DataViewsContext );
+	const popoverId = useInstanceId(
+		_DataViewsViewConfig,
+		'dataviews-view-config-dropdown'
+	);
+	const activeLayout = VIEW_LAYOUTS.find(
+		( layout ) => layout.type === view.type
+	);
+	return (
+		<Dropdown
+			popoverProps={ {
+				...DATAVIEWS_CONFIG_POPOVER_PROPS,
+				id: popoverId,
+			} }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<Button
+						size="compact"
+						icon={ cog }
+						label={ _x( 'View options', 'View is used as a noun' ) }
+						onClick={ onToggle }
+						aria-expanded={ isOpen ? 'true' : 'false' }
+						aria-controls={ popoverId }
+					/>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<VStack className="dataviews-view-config" spacing={ 6 }>
+						<SettingsSection title={ __( 'Appearance' ) }>
+							<HStack expanded className="is-divided-in-two">
+								<SortFieldControl />
+								<SortDirectionControl />
+							</HStack>
+							{ !! activeLayout?.viewConfigOptions && (
+								<activeLayout.viewConfigOptions />
+							) }
+							<ItemsPerPageControl />
+						</SettingsSection>
+						<SettingsSection title={ __( 'Properties' ) }>
+							<FieldControl />
+						</SettingsSection>
+					</VStack>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function _DataViewsViewConfig( {
+	defaultLayouts = { list: {}, grid: {}, table: {} },
+}: {
+	defaultLayouts?: SupportedLayouts;
+} ) {
+	return (
+		<>
+			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<DataviewsViewConfigDropdown />
+		</>
+	);
+}
+
+const DataViewsViewConfig = memo( _DataViewsViewConfig );
+
+export default DataViewsViewConfig;
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
new file mode 100644
index 00000000000000..8427796b6e15ed
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -0,0 +1,78 @@
+.dataviews-view-config {
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+}
+
+.dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
+	text-transform: uppercase;
+}
+
+.dataviews-settings-section__title.dataviews-settings-section__title {
+	line-height: $grid-unit-30;
+	font-size: 15px;
+}
+
+.dataviews-settings-section__sidebar {
+	grid-column: span 4;
+}
+
+.dataviews-settings-section__content,
+.dataviews-settings-section__content > * {
+	grid-column: span 8;
+}
+
+.dataviews-settings-section__content .is-divided-in-two {
+	display: contents;
+	& > * {
+		grid-column: span 4;
+	}
+}
+
+.dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
+	display: none;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 500px) {
+	.dataviews-settings-section.dataviews-settings-section {
+		grid-template-columns: repeat(2, 1fr);
+		.dataviews-settings-section__sidebar {
+			grid-column: span 2;
+		}
+
+		.dataviews-settings-section__content {
+			grid-column: span 2;
+		}
+	}
+}
+.dataviews-field-control__field {
+	height: $grid-unit-40;
+}
+
+.dataviews-field-control__actions {
+	position: absolute;
+	top: -9999em;
+}
+.dataviews-field-control__actions.dataviews-field-control__actions {
+	gap: $grid-unit-05;
+}
+
+.dataviews-field-control__field:hover,
+.dataviews-field-control__field:focus-within {
+	.dataviews-field-control__actions {
+		position: unset;
+		top: unset;
+	}
+}
+
+.dataviews-field-control__icon {
+	display: flex;
+	width: $icon-size;
+}
+
+.dataviews-field-control__label {
+	flex-grow: 1;
+}
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
new file mode 100644
index 00000000000000..99d9b6d684b08c
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -0,0 +1,161 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../dataviews-context';
+import {
+	default as DataViewsFilters,
+	useFilters,
+	FiltersToggle,
+} from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import DataViewsFooter from '../dataviews-footer';
+import DataViewsSearch from '../dataviews-search';
+import DataViewsViewConfig from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import type { Action, Field, View, SupportedLayouts } from '../../types';
+import type { SelectionOrUpdater } from '../../private-types';
+
+type ItemWithId = { id: string };
+
+type DataViewsProps< Item > = {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: Field< Item >[];
+	search?: boolean;
+	searchLabel?: string;
+	actions?: Action< Item >[];
+	data: Item[];
+	isLoading?: boolean;
+	paginationInfo: {
+		totalItems: number;
+		totalPages: number;
+	};
+	defaultLayouts: SupportedLayouts;
+	selection?: string[];
+	onChangeSelection?: ( items: string[] ) => void;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable?: ( item: Item ) => boolean;
+	header?: ReactNode;
+} & ( Item extends ItemWithId
+	? { getItemId?: ( item: Item ) => string }
+	: { getItemId: ( item: Item ) => string } );
+
+const defaultGetItemId = ( item: ItemWithId ) => item.id;
+const defaultIsItemClickable = () => true;
+const EMPTY_ARRAY: any[] = [];
+
+export default function DataViews< Item >( {
+	view,
+	onChangeView,
+	fields,
+	search = true,
+	searchLabel = undefined,
+	actions = EMPTY_ARRAY,
+	data,
+	getItemId = defaultGetItemId,
+	isLoading = false,
+	paginationInfo,
+	defaultLayouts,
+	selection: selectionProperty,
+	onChangeSelection,
+	onClickItem,
+	isItemClickable = defaultIsItemClickable,
+	header,
+}: DataViewsProps< Item > ) {
+	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
+	const isUncontrolled =
+		selectionProperty === undefined || onChangeSelection === undefined;
+	const selection = isUncontrolled ? selectionState : selectionProperty;
+	const [ openedFilter, setOpenedFilter ] = useState< string | null >( null );
+	function setSelectionWithChange( value: SelectionOrUpdater ) {
+		const newValue =
+			typeof value === 'function' ? value( selection ) : value;
+		if ( isUncontrolled ) {
+			setSelectionState( newValue );
+		}
+		if ( onChangeSelection ) {
+			onChangeSelection( newValue );
+		}
+	}
+	const _fields = useMemo( () => normalizeFields( fields ), [ fields ] );
+	const _selection = useMemo( () => {
+		return selection.filter( ( id ) =>
+			data.some( ( item ) => getItemId( item ) === id )
+		);
+	}, [ selection, data, getItemId ] );
+
+	const filters = useFilters( _fields, view );
+	const [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>
+		( filters || [] ).some( ( filter ) => filter.isPrimary )
+	);
+
+	return (
+		<DataViewsContext.Provider
+			value={ {
+				view,
+				onChangeView,
+				fields: _fields,
+				actions,
+				data,
+				isLoading,
+				paginationInfo,
+				selection: _selection,
+				onChangeSelection: setSelectionWithChange,
+				openedFilter,
+				setOpenedFilter,
+				getItemId,
+				isItemClickable,
+				onClickItem,
+			} }
+		>
+			<div className="dataviews-wrapper">
+				<HStack
+					alignment="top"
+					justify="space-between"
+					className="dataviews__view-actions"
+					spacing={ 1 }
+				>
+					<HStack
+						justify="start"
+						expanded={ false }
+						className="dataviews__search"
+					>
+						{ search && <DataViewsSearch label={ searchLabel } /> }
+						<FiltersToggle
+							filters={ filters }
+							view={ view }
+							onChangeView={ onChangeView }
+							setOpenedFilter={ setOpenedFilter }
+							setIsShowingFilter={ setIsShowingFilter }
+							isShowingFilter={ isShowingFilter }
+						/>
+					</HStack>
+					<HStack
+						spacing={ 1 }
+						expanded={ false }
+						style={ { flexShrink: 0 } }
+					>
+						<DataViewsViewConfig
+							defaultLayouts={ defaultLayouts }
+						/>
+						{ header }
+					</HStack>
+				</HStack>
+				{ isShowingFilter && <DataViewsFilters /> }
+				<DataViewsLayout />
+				<DataViewsFooter />
+			</div>
+		</DataViewsContext.Provider>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
new file mode 100644
index 00000000000000..cd4d3b97e65311
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -0,0 +1,696 @@
+/**
+ * WordPress dependencies
+ */
+import { trash, image, Icon, category } from '@wordpress/icons';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { Field, Action } from '../../../types';
+
+export type Theme = {
+	slug: string;
+	name: string;
+	description: string;
+	requires: string;
+	tested: string;
+	tags: string[];
+};
+
+export type SpaceObject = {
+	id: number;
+	title: string;
+	description: string;
+	image: string;
+	type: string;
+	categories: string[];
+	satellites: number;
+	date: string;
+};
+
+export const data: SpaceObject[] = [
+	{
+		id: 1,
+		title: 'Apollo',
+		description: 'Apollo description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'Space', 'NASA' ],
+		satellites: 0,
+		date: '2021-01-01T00:00:00Z',
+	},
+	{
+		id: 2,
+		title: 'Space',
+		description: 'Space description',
+		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'Space' ],
+		satellites: 0,
+		date: '2019-01-02T00:00:00Z',
+	},
+	{
+		id: 3,
+		title: 'NASA',
+		description: 'NASA photo',
+		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
+		type: 'Not a planet',
+		categories: [ 'NASA' ],
+		satellites: 0,
+		date: '2025-01-03T00:00:00Z',
+	},
+	{
+		id: 4,
+		title: 'Neptune',
+		description: 'Neptune description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 14,
+		date: '2020-01-01T00:00:00Z',
+	},
+	{
+		id: 5,
+		title: 'Mercury',
+		description: 'Mercury description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
+		date: '2020-01-02T01:00:00Z',
+	},
+	{
+		id: 6,
+		title: 'Venus',
+		description: 'La planète Vénus',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 0,
+		date: '2020-01-02T00:00:00Z',
+	},
+	{
+		id: 7,
+		title: 'Earth',
+		description: 'Earth description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 1,
+		date: '2023-01-03T00:00:00Z',
+	},
+	{
+		id: 8,
+		title: 'Mars',
+		description: 'Mars description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Terrestrial',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 2,
+		date: '2020-01-01T00:00:00Z',
+	},
+	{
+		id: 9,
+		title: 'Jupiter',
+		description: 'Jupiter description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 95,
+		date: '2017-01-01T00:01:00Z',
+	},
+	{
+		id: 10,
+		title: 'Saturn',
+		description: 'Saturn description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Gas giant',
+		categories: [ 'Space', 'Planet', 'Solar system' ],
+		satellites: 146,
+		date: '2020-02-01T00:02:00Z',
+	},
+	{
+		id: 11,
+		title: 'Uranus',
+		description: 'Uranus description',
+		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		type: 'Ice giant',
+		categories: [ 'Space', 'Ice giant', 'Solar system' ],
+		satellites: 28,
+		date: '2020-03-01T00:00:00Z',
+	},
+];
+
+export const themeData: Theme[] = [
+	{
+		slug: 'twentyeleven',
+		name: 'Twenty Eleven',
+		description:
+			'The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.',
+		requires: '3.2',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'one-column',
+			'two-columns',
+			'left-sidebar',
+			'right-sidebar',
+			'custom-background',
+			'custom-colors',
+			'custom-header',
+			'custom-menu',
+			'editor-style',
+			'featured-image-header',
+			'featured-images',
+			'flexible-header',
+			'footer-widgets',
+			'full-width-template',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'theme-options',
+			'translation-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentyfifteen',
+		name: 'Twenty Fifteen',
+		description:
+			"Our 2015 default theme is clean, blog-focused, and designed for clarity. Twenty Fifteen's simple, straightforward typography is readable on a wide variety of screen sizes, and suitable for multiple languages. We designed it using a mobile-first approach, meaning your content takes center-stage, regardless of whether your visitors arrive by smartphone, tablet, laptop, or desktop computer.",
+		requires: '4.1',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'two-columns',
+			'left-sidebar',
+			'accessibility-ready',
+			'custom-background',
+			'custom-colors',
+			'custom-header',
+			'custom-logo',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentyfourteen',
+		name: 'Twenty Fourteen',
+		description:
+			"In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.",
+		requires: '3.6',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'news',
+			'two-columns',
+			'three-columns',
+			'left-sidebar',
+			'right-sidebar',
+			'custom-background',
+			'custom-header',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'flexible-header',
+			'footer-widgets',
+			'full-width-template',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'theme-options',
+			'translation-ready',
+			'accessibility-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentynineteen',
+		name: 'Twenty Nineteen',
+		description:
+			"Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.",
+		requires: '4.7',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'accessibility-ready',
+			'custom-colors',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'footer-widgets',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentyseventeen',
+		name: 'Twenty Seventeen',
+		description:
+			'Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.',
+		requires: '4.7',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'two-columns',
+			'right-sidebar',
+			'flexible-header',
+			'accessibility-ready',
+			'custom-colors',
+			'custom-header',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'footer-widgets',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'theme-options',
+			'threaded-comments',
+			'translation-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentysixteen',
+		name: 'Twenty Sixteen',
+		description:
+			'Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.',
+		requires: '4.4',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'two-columns',
+			'right-sidebar',
+			'accessibility-ready',
+			'custom-background',
+			'custom-colors',
+			'custom-header',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'flexible-header',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'blog',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentyten',
+		name: 'Twenty Ten',
+		description:
+			'The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.',
+		requires: '5.6',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'two-columns',
+			'custom-header',
+			'custom-background',
+			'threaded-comments',
+			'sticky-post',
+			'translation-ready',
+			'microformats',
+			'rtl-language-support',
+			'editor-style',
+			'custom-menu',
+			'flexible-header',
+			'featured-images',
+			'footer-widgets',
+			'featured-image-header',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentythirteen',
+		name: 'Twenty Thirteen',
+		description:
+			'The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.',
+		requires: '3.6',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'one-column',
+			'two-columns',
+			'right-sidebar',
+			'custom-header',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'footer-widgets',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'translation-ready',
+			'accessibility-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentytwelve',
+		name: 'Twenty Twelve',
+		description:
+			'The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.',
+		requires: '3.5',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'one-column',
+			'two-columns',
+			'right-sidebar',
+			'custom-background',
+			'custom-header',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'flexible-header',
+			'footer-widgets',
+			'full-width-template',
+			'microformats',
+			'post-formats',
+			'rtl-language-support',
+			'sticky-post',
+			'theme-options',
+			'translation-ready',
+			'block-patterns',
+		],
+	},
+	{
+		slug: 'twentytwenty',
+		name: 'Twenty Twenty',
+		description:
+			'Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.',
+		requires: '4.7',
+		tested: '6.6',
+		tags: [
+			'blog',
+			'one-column',
+			'custom-background',
+			'custom-colors',
+			'custom-logo',
+			'custom-menu',
+			'editor-style',
+			'featured-images',
+			'footer-widgets',
+			'full-width-template',
+			'rtl-language-support',
+			'sticky-post',
+			'theme-options',
+			'threaded-comments',
+			'translation-ready',
+			'block-patterns',
+			'block-styles',
+			'wide-blocks',
+			'accessibility-ready',
+		],
+	},
+	{
+		slug: 'twentytwentyfour',
+		name: 'Twenty Twenty-Four',
+		description:
+			'Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.',
+		requires: '6.4',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'custom-colors',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'full-site-editing',
+			'block-patterns',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'wide-blocks',
+			'block-styles',
+			'style-variations',
+			'accessibility-ready',
+			'blog',
+			'portfolio',
+			'news',
+		],
+	},
+	{
+		slug: 'twentytwentyone',
+		name: 'Twenty Twenty-One',
+		description:
+			'Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.',
+		requires: '5.3',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'accessibility-ready',
+			'custom-colors',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'footer-widgets',
+			'block-patterns',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'blog',
+			'portfolio',
+		],
+	},
+	{
+		slug: 'twentytwentythree',
+		name: 'Twenty Twenty-Three',
+		description:
+			'Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.',
+		requires: '6.1',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'custom-colors',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'full-site-editing',
+			'block-patterns',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'translation-ready',
+			'wide-blocks',
+			'block-styles',
+			'style-variations',
+			'accessibility-ready',
+			'blog',
+			'portfolio',
+			'news',
+		],
+	},
+	{
+		slug: 'twentytwentytwo',
+		name: 'Twenty Twenty-Two',
+		description:
+			'Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.',
+		requires: '5.9',
+		tested: '6.6',
+		tags: [
+			'one-column',
+			'custom-colors',
+			'custom-menu',
+			'custom-logo',
+			'editor-style',
+			'featured-images',
+			'full-site-editing',
+			'block-patterns',
+			'rtl-language-support',
+			'sticky-post',
+			'threaded-comments',
+			'style-variations',
+			'wide-blocks',
+			'block-styles',
+			'accessibility-ready',
+			'blog',
+			'portfolio',
+			'news',
+		],
+	},
+];
+
+export const themeFields: Field< Theme >[] = [
+	{ id: 'slug', label: 'Slug' },
+	{ id: 'name', label: 'Name' },
+	{
+		id: 'description',
+		label: 'Description',
+		render: ( { item } ) => (
+			<span className="theme-field-description">
+				{ item.description }
+			</span>
+		),
+	},
+	{ id: 'requires', label: 'Requires at least' },
+	{ id: 'tested', label: 'Tested up to' },
+	{ id: 'icon', label: 'Icon', render: () => <Icon icon={ image } /> },
+	{
+		id: 'tags',
+		label: 'Tags',
+		render: ( { item } ) => item.tags.join( ', ' ),
+	},
+];
+
+export const DEFAULT_VIEW = {
+	type: 'table' as const,
+	search: '',
+	page: 1,
+	perPage: 10,
+	layout: {},
+	filters: [],
+};
+
+export const actions: Action< SpaceObject >[] = [
+	{
+		id: 'delete',
+		label: 'Delete item',
+		isPrimary: true,
+		icon: trash,
+		hideModalHeader: true,
+		RenderModal: ( { items, closeModal } ) => {
+			return (
+				<VStack spacing="5">
+					<Text>
+						{ `Are you sure you want to delete "${ items[ 0 ].title }"?` }
+					</Text>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ closeModal }
+						>
+							Cancel
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ closeModal }
+						>
+							Delete
+						</Button>
+					</HStack>
+				</VStack>
+			);
+		},
+	},
+	{
+		id: 'secondary',
+		label: 'Secondary action',
+		callback() {},
+	},
+];
+
+export const fields: Field< SpaceObject >[] = [
+	{
+		label: 'Image',
+		id: 'image',
+		header: (
+			<HStack spacing={ 1 } justify="start">
+				<Icon icon={ image } />
+				<span>Image</span>
+			</HStack>
+		),
+		render: ( { item } ) => {
+			return (
+				<img src={ item.image } alt="" style={ { width: '100%' } } />
+			);
+		},
+		enableSorting: false,
+	},
+	{
+		label: 'Title',
+		id: 'title',
+		enableHiding: false,
+		enableGlobalSearch: true,
+	},
+	{
+		id: 'date',
+		label: 'Date',
+		type: 'datetime',
+	},
+	{
+		label: 'Type',
+		id: 'type',
+		enableHiding: false,
+		elements: [
+			{ value: 'Not a planet', label: 'Not a planet' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+			{ value: 'Terrestrial', label: 'Terrestrial' },
+			{ value: 'Gas giant', label: 'Gas giant' },
+		],
+	},
+	{
+		label: 'Satellites',
+		id: 'satellites',
+		type: 'integer',
+		enableSorting: true,
+	},
+	{
+		label: 'Description',
+		id: 'description',
+		enableSorting: false,
+		enableGlobalSearch: true,
+	},
+	{
+		label: 'Categories',
+		id: 'categories',
+		header: (
+			<HStack spacing={ 1 } justify="start">
+				<Icon icon={ category } />
+				<span>Categories</span>
+			</HStack>
+		),
+		elements: [
+			{ value: 'Space', label: 'Space' },
+			{ value: 'NASA', label: 'NASA' },
+			{ value: 'Planet', label: 'Planet' },
+			{ value: 'Solar system', label: 'Solar system' },
+			{ value: 'Ice giant', label: 'Ice giant' },
+		],
+		filterBy: {
+			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
+		},
+		getValue: ( { item } ) => {
+			return item.categories;
+		},
+		render: ( { item } ) => {
+			return item.categories.join( ',' );
+		},
+		enableSorting: false,
+	},
+];
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
new file mode 100644
index 00000000000000..1e96ba92a0bea9
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../index';
+import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
+import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
+import type { View } from '../../../types';
+
+import './style.css';
+
+const meta = {
+	title: 'DataViews/DataViews',
+	component: DataViews,
+};
+export default meta;
+
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
+};
+
+export const Default = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions }
+			onClickItem={ ( item ) => {
+				// eslint-disable-next-line no-alert
+				alert( 'Clicked: ' + item.title );
+			} }
+			isItemClickable={ () => true }
+			defaultLayouts={ defaultLayouts }
+		/>
+	);
+};
+
+export const Empty = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ { totalItems: 0, totalPages: 0 } }
+			data={ [] }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions }
+			defaultLayouts={ defaultLayouts }
+		/>
+	);
+};
+
+export const FieldsNoSortableNoHidable = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'title', 'description', 'categories' ],
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+
+	const _fields = fields.map( ( field ) => ( {
+		...field,
+		enableSorting: false,
+		enableHiding: false,
+	} ) );
+
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ _fields }
+			onChangeView={ setView }
+			defaultLayouts={ {
+				table: {},
+			} }
+		/>
+	);
+};
diff --git a/packages/dataviews/src/components/dataviews/stories/style.css b/packages/dataviews/src/components/dataviews/stories/style.css
new file mode 100644
index 00000000000000..7c0c6565a6edf4
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/stories/style.css
@@ -0,0 +1,4 @@
+.theme-field-description {
+    text-wrap: balance;
+    text-wrap: pretty;
+}
\ No newline at end of file
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
new file mode 100644
index 00000000000000..b38447094c99a9
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -0,0 +1,95 @@
+.dataviews-wrapper {
+	height: 100%;
+	overflow: auto;
+	box-sizing: border-box;
+	scroll-padding-bottom: $grid-unit-80;
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: dataviews-wrapper / inline-size;
+	display: flex;
+	flex-direction: column;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+}
+
+.dataviews__view-actions,
+.dataviews-filters__container {
+	box-sizing: border-box;
+	padding: $grid-unit-20 $grid-unit-60;
+	flex-shrink: 0;
+	position: sticky;
+	left: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion( "transition" );
+}
+
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion( "transition" );
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-title-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-800;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		flex-grow: 0;
+		color: $gray-800;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+		@include link-reset();
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+		color: $gray-900;
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.dataviews-title-field--clickable {
+	cursor: pointer;
+	color: $gray-800;
+	&:hover {
+		color: var(--wp-admin-theme-color);
+	}
+	@include link-reset();
+}
diff --git a/packages/dataviews/src/components/form-field-visibility/index.tsx b/packages/dataviews/src/components/form-field-visibility/index.tsx
new file mode 100644
index 00000000000000..8cea59f11b7aea
--- /dev/null
+++ b/packages/dataviews/src/components/form-field-visibility/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type FormFieldVisibilityProps< Item > = React.PropsWithChildren< {
+	field: NormalizedField< Item >;
+	data: Item;
+} >;
+
+export default function FormFieldVisibility< Item >( {
+	data,
+	field,
+	children,
+}: FormFieldVisibilityProps< Item > ) {
+	const isVisible = useMemo( () => {
+		if ( field.isVisible ) {
+			return field.isVisible( data );
+		}
+		return true;
+	}, [ field.isVisible, data ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return children;
+}
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
new file mode 100644
index 00000000000000..5ae94c7eb4a135
--- /dev/null
+++ b/packages/dataviews/src/constants.ts
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { Operator } from './types';
+
+// Filter operators.
+export const OPERATOR_IS = 'is';
+export const OPERATOR_IS_NOT = 'isNot';
+export const OPERATOR_IS_ANY = 'isAny';
+export const OPERATOR_IS_NONE = 'isNone';
+export const OPERATOR_IS_ALL = 'isAll';
+export const OPERATOR_IS_NOT_ALL = 'isNotAll';
+
+export const ALL_OPERATORS = [
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+];
+export const OPERATORS: Record< Operator, { key: string; label: string } > = {
+	[ OPERATOR_IS ]: {
+		key: 'is-filter',
+		label: __( 'Is' ),
+	},
+	[ OPERATOR_IS_NOT ]: {
+		key: 'is-not-filter',
+		label: __( 'Is not' ),
+	},
+	[ OPERATOR_IS_ANY ]: {
+		key: 'is-any-filter',
+		label: __( 'Is any' ),
+	},
+	[ OPERATOR_IS_NONE ]: {
+		key: 'is-none-filter',
+		label: __( 'Is none' ),
+	},
+	[ OPERATOR_IS_ALL ]: {
+		key: 'is-all-filter',
+		label: __( 'Is all' ),
+	},
+	[ OPERATOR_IS_NOT_ALL ]: {
+		key: 'is-not-all-filter',
+		label: __( 'Is not all' ),
+	},
+};
+
+export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
+export const sortArrows = { asc: '↑', desc: '↓' };
+export const sortValues = { asc: 'ascending', desc: 'descending' } as const;
+export const sortLabels = {
+	asc: __( 'Sort ascending' ),
+	desc: __( 'Sort descending' ),
+};
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
+};
+
+// View layouts.
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_LIST = 'list';
diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
new file mode 100644
index 00000000000000..b31c5c60bb9c6e
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function DateTime< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | null ) => onChange( { [ id ]: newValue } ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="dataviews-controls__datetime">
+			{ ! hideLabelFromVision && (
+				<BaseControl.VisualLabel as="legend">
+					{ label }
+				</BaseControl.VisualLabel>
+			) }
+			{ hideLabelFromVision && (
+				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
+			) }
+			<TimePicker
+				currentTime={ value }
+				onChange={ onChangeControl }
+				hideLabelFromVision
+			/>
+		</fieldset>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/index.tsx b/packages/dataviews/src/dataform-controls/index.tsx
new file mode 100644
index 00000000000000..297e73c28f837c
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/index.tsx
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataFormControlProps,
+	Field,
+	FieldTypeDefinition,
+} from '../types';
+import datetime from './datetime';
+import integer from './integer';
+import radio from './radio';
+import select from './select';
+import text from './text';
+
+interface FormControls {
+	[ key: string ]: ComponentType< DataFormControlProps< any > >;
+}
+
+const FORM_CONTROLS: FormControls = {
+	datetime,
+	integer,
+	radio,
+	select,
+	text,
+};
+
+export function getControl< Item >(
+	field: Field< Item >,
+	fieldTypeDefinition: FieldTypeDefinition< Item >
+) {
+	if ( typeof field.Edit === 'function' ) {
+		return field.Edit;
+	}
+
+	if ( typeof field.Edit === 'string' ) {
+		return getControlByType( field.Edit );
+	}
+
+	if ( field.elements ) {
+		return getControlByType( 'select' );
+	}
+
+	if ( typeof fieldTypeDefinition.Edit === 'string' ) {
+		return getControlByType( fieldTypeDefinition.Edit );
+	}
+
+	return fieldTypeDefinition.Edit;
+}
+
+export function getControlByType( type: string ) {
+	if ( Object.keys( FORM_CONTROLS ).includes( type ) ) {
+		return FORM_CONTROLS[ type ];
+	}
+
+	throw 'Control ' + type + ' not found';
+}
diff --git a/packages/dataviews/src/dataform-controls/integer.tsx b/packages/dataviews/src/dataform-controls/integer.tsx
new file mode 100644
index 00000000000000..f70a90ffe15239
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/integer.tsx
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Integer< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, description } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: Number( newValue ),
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<NumberControl
+			label={ label }
+			help={ description }
+			value={ value }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/radio.tsx b/packages/dataviews/src/dataform-controls/radio.tsx
new file mode 100644
index 00000000000000..3d616404e0c053
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/radio.tsx
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { RadioControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Radio< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		return (
+			<RadioControl
+				label={ label }
+				onChange={ onChangeControl }
+				options={ field.elements }
+				selected={ value }
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
+	return null;
+}
diff --git a/packages/dataviews/src/dataform-controls/select.tsx b/packages/dataviews/src/dataform-controls/select.tsx
new file mode 100644
index 00000000000000..2b3bd9373fc155
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/select.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Select< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label } = field;
+	const value = field.getValue( { item: data } ) ?? '';
+	const onChangeControl = useCallback(
+		( newValue: any ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const elements = [
+		/*
+		 * Value can be undefined when:
+		 *
+		 * - the field is not required
+		 * - in bulk editing
+		 *
+		 */
+		{ label: __( 'Select item' ), value: '' },
+		...( field?.elements ?? [] ),
+	];
+
+	return (
+		<SelectControl
+			label={ label }
+			value={ value }
+			options={ elements }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/style.scss b/packages/dataviews/src/dataform-controls/style.scss
new file mode 100644
index 00000000000000..230826c0adf823
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/style.scss
@@ -0,0 +1,4 @@
+.dataviews-controls__datetime {
+	border: none;
+	padding: 0;
+}
diff --git a/packages/dataviews/src/dataform-controls/text.tsx b/packages/dataviews/src/dataform-controls/text.tsx
new file mode 100644
index 00000000000000..7ac095f4abede7
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/text.tsx
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Text< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
new file mode 100644
index 00000000000000..08cc47f569eafe
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, FormField, SimpleFormField } from '../types';
+import { getFormFieldLayout } from './index';
+import DataFormContext from '../components/dataform-context';
+import { isCombinedField } from './is-combined-field';
+import normalizeFormFields from '../normalize-form-fields';
+
+export function DataFormLayout< Item >( {
+	data,
+	form,
+	onChange,
+	children,
+}: {
+	data: Item;
+	form: Form;
+	onChange: ( value: any ) => void;
+	children?: (
+		FieldLayout: ( props: {
+			data: Item;
+			field: FormField;
+			onChange: ( value: any ) => void;
+			hideLabelFromVision?: boolean;
+		} ) => React.JSX.Element | null,
+		field: FormField
+	) => React.JSX.Element;
+} ) {
+	const { fields: fieldDefinitions } = useContext( DataFormContext );
+
+	function getFieldDefinition( field: SimpleFormField | string ) {
+		const fieldId = typeof field === 'string' ? field : field.id;
+
+		return fieldDefinitions.find(
+			( fieldDefinition ) => fieldDefinition.id === fieldId
+		);
+	}
+
+	const normalizedFormFields = useMemo(
+		() => normalizeFormFields( form ),
+		[ form ]
+	);
+
+	return (
+		<VStack spacing={ 2 }>
+			{ normalizedFormFields.map( ( formField ) => {
+				const FieldLayout = getFormFieldLayout( formField.layout )
+					?.component;
+
+				if ( ! FieldLayout ) {
+					return null;
+				}
+
+				const fieldDefinition = ! isCombinedField( formField )
+					? getFieldDefinition( formField )
+					: undefined;
+
+				if (
+					fieldDefinition &&
+					fieldDefinition.isVisible &&
+					! fieldDefinition.isVisible( data )
+				) {
+					return null;
+				}
+
+				if ( children ) {
+					return children( FieldLayout, formField );
+				}
+
+				return (
+					<FieldLayout
+						key={ formField.id }
+						data={ data }
+						field={ formField }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/index.tsx b/packages/dataviews/src/dataforms-layouts/index.tsx
new file mode 100644
index 00000000000000..5e4f3617d9c7dd
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/index.tsx
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import FormRegularField from './regular';
+import FormPanelField from './panel';
+
+const FORM_FIELD_LAYOUTS = [
+	{
+		type: 'regular',
+		component: FormRegularField,
+	},
+	{
+		type: 'panel',
+		component: FormPanelField,
+	},
+];
+
+export function getFormFieldLayout( type: string ) {
+	return FORM_FIELD_LAYOUTS.find( ( layout ) => layout.type === type );
+}
diff --git a/packages/dataviews/src/dataforms-layouts/is-combined-field.ts b/packages/dataviews/src/dataforms-layouts/is-combined-field.ts
new file mode 100644
index 00000000000000..3df6fdc60f906e
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/is-combined-field.ts
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { FormField, CombinedFormField } from '../types';
+
+export function isCombinedField(
+	field: FormField
+): field is CombinedFormField {
+	return ( field as CombinedFormField ).children !== undefined;
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
new file mode 100644
index 00000000000000..269b2bb418a856
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -0,0 +1,266 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { useState, useMemo, useContext } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	Form,
+	FormField,
+	FieldLayoutProps,
+	NormalizedField,
+	SimpleFormField,
+} from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+
+function DropdownHeader( {
+	title,
+	onClose,
+}: {
+	title?: string;
+	onClose: () => void;
+} ) {
+	return (
+		<VStack
+			className="dataforms-layouts-panel__dropdown-header"
+			spacing={ 4 }
+		>
+			<HStack alignment="center">
+				{ title && (
+					<Heading level={ 2 } size={ 13 }>
+						{ title }
+					</Heading>
+				) }
+				<Spacer />
+				{ onClose && (
+					<Button
+						label={ __( 'Close' ) }
+						icon={ closeSmall }
+						onClick={ onClose }
+						size="small"
+					/>
+				) }
+			</HStack>
+		</VStack>
+	);
+}
+
+function PanelDropdown< Item >( {
+	fieldDefinition,
+	popoverAnchor,
+	labelPosition = 'side',
+	data,
+	onChange,
+	field,
+}: {
+	fieldDefinition: NormalizedField< Item >;
+	popoverAnchor: HTMLElement | null;
+	labelPosition: 'side' | 'top' | 'none';
+	data: Item;
+	onChange: ( value: any ) => void;
+	field: FormField;
+} ) {
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+	const form = useMemo( () => {
+		if ( isCombinedField( field ) ) {
+			return {
+				type: 'regular' as const,
+				fields: field.children.map( ( child ) => {
+					if ( typeof child === 'string' ) {
+						return {
+							id: child,
+						};
+					}
+					return child;
+				} ),
+			};
+		}
+		// If not explicit children return the field id itself.
+		return {
+			type: 'regular' as const,
+			fields: [ { id: field.id } ],
+		};
+	}, [ field ] );
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	return (
+		<Dropdown
+			contentClassName="dataforms-layouts-panel__field-dropdown"
+			popoverProps={ popoverProps }
+			focusOnMount
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				tooltipPosition: 'middle left',
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					className="dataforms-layouts-panel__field-control"
+					size="compact"
+					variant={
+						[ 'none', 'top' ].includes( labelPosition )
+							? 'link'
+							: 'tertiary'
+					}
+					aria-expanded={ isOpen }
+					aria-label={ sprintf(
+						// translators: %s: Field name.
+						_x( 'Edit %s', 'field' ),
+						fieldLabel
+					) }
+					onClick={ onToggle }
+				>
+					<fieldDefinition.render item={ data } />
+				</Button>
+			) }
+			renderContent={ ( { onClose } ) => (
+				<>
+					<DropdownHeader title={ fieldLabel } onClose={ onClose } />
+					<DataFormLayout
+						data={ data }
+						form={ form as Form }
+						onChange={ onChange }
+					>
+						{ ( FieldLayout, nestedField ) => (
+							<FieldLayout
+								key={ nestedField.id }
+								data={ data }
+								field={ nestedField }
+								onChange={ onChange }
+								hideLabelFromVision={
+									( form?.fields ?? [] ).length < 2
+								}
+							/>
+						) }
+					</DataFormLayout>
+				</>
+			) }
+		/>
+	);
+}
+
+export default function FormPanelField< Item >( {
+	data,
+	field,
+	onChange,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+	const fieldDefinition = fields.find( ( fieldDef ) => {
+		// Default to the first child if it is a combined field.
+		if ( isCombinedField( field ) ) {
+			const children = field.children.filter(
+				( child ): child is string | SimpleFormField =>
+					typeof child === 'string' || ! isCombinedField( child )
+			);
+			const firstChildFieldId =
+				typeof children[ 0 ] === 'string'
+					? children[ 0 ]
+					: children[ 0 ].id;
+			return fieldDef.id === firstChildFieldId;
+		}
+		return fieldDef.id === field.id;
+	} );
+	const labelPosition = field.labelPosition ?? 'side';
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
+		null
+	);
+
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+
+	const fieldLabel = isCombinedField( field )
+		? field.label
+		: fieldDefinition?.label;
+
+	if ( labelPosition === 'top' ) {
+		return (
+			<VStack className="dataforms-layouts-panel__field" spacing={ 0 }>
+				<div
+					className="dataforms-layouts-panel__field-label"
+					style={ { paddingBottom: 0 } }
+				>
+					{ fieldLabel }
+				</div>
+				<div className="dataforms-layouts-panel__field-control">
+					<PanelDropdown
+						field={ field }
+						popoverAnchor={ popoverAnchor }
+						fieldDefinition={ fieldDefinition }
+						data={ data }
+						onChange={ onChange }
+						labelPosition={ labelPosition }
+					/>
+				</div>
+			</VStack>
+		);
+	}
+
+	if ( labelPosition === 'none' ) {
+		return (
+			<div className="dataforms-layouts-panel__field">
+				<PanelDropdown
+					field={ field }
+					popoverAnchor={ popoverAnchor }
+					fieldDefinition={ fieldDefinition }
+					data={ data }
+					onChange={ onChange }
+					labelPosition={ labelPosition }
+				/>
+			</div>
+		);
+	}
+
+	// Defaults to label position side.
+	return (
+		<HStack
+			ref={ setPopoverAnchor }
+			className="dataforms-layouts-panel__field"
+		>
+			<div className="dataforms-layouts-panel__field-label">
+				{ fieldLabel }
+			</div>
+			<div className="dataforms-layouts-panel__field-control">
+				<PanelDropdown
+					field={ field }
+					popoverAnchor={ popoverAnchor }
+					fieldDefinition={ fieldDefinition }
+					data={ data }
+					onChange={ onChange }
+					labelPosition={ labelPosition }
+				/>
+			</div>
+		</HStack>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
new file mode 100644
index 00000000000000..c7058f6366b3b6
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -0,0 +1,50 @@
+.dataforms-layouts-panel__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.dataforms-layouts-panel__field-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-panel__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		white-space: normal;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
+}
+
+.dataforms-layouts-panel__field-dropdown .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
+
+.dataforms-layouts-panel__dropdown-header {
+	margin-bottom: $grid-unit-20;
+}
+
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}
diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
new file mode 100644
index 00000000000000..a3d90b807b5cd4
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { Form, FieldLayoutProps } from '../../types';
+import DataFormContext from '../../components/dataform-context';
+import { DataFormLayout } from '../data-form-layout';
+import { isCombinedField } from '../is-combined-field';
+
+function Header( { title }: { title: string } ) {
+	return (
+		<VStack className="dataforms-layouts-regular__header" spacing={ 4 }>
+			<HStack alignment="center">
+				<Heading level={ 2 } size={ 13 }>
+					{ title }
+				</Heading>
+				<Spacer />
+			</HStack>
+		</VStack>
+	);
+}
+
+export default function FormRegularField< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: FieldLayoutProps< Item > ) {
+	const { fields } = useContext( DataFormContext );
+
+	const form = useMemo( () => {
+		if ( isCombinedField( field ) ) {
+			return {
+				fields: field.children.map( ( child ) => {
+					if ( typeof child === 'string' ) {
+						return {
+							id: child,
+						};
+					}
+					return child;
+				} ),
+				type: 'regular' as const,
+			};
+		}
+
+		return {
+			type: 'regular' as const,
+			fields: [],
+		};
+	}, [ field ] );
+
+	if ( isCombinedField( field ) ) {
+		return (
+			<>
+				{ ! hideLabelFromVision && field.label && (
+					<Header title={ field.label } />
+				) }
+				<DataFormLayout
+					data={ data }
+					form={ form as Form }
+					onChange={ onChange }
+				/>
+			</>
+		);
+	}
+
+	const labelPosition = field.labelPosition ?? 'top';
+	const fieldDefinition = fields.find(
+		( fieldDef ) => fieldDef.id === field.id
+	);
+
+	if ( ! fieldDefinition ) {
+		return null;
+	}
+	if ( labelPosition === 'side' ) {
+		return (
+			<HStack className="dataforms-layouts-regular__field">
+				<div className="dataforms-layouts-regular__field-label">
+					{ fieldDefinition.label }
+				</div>
+				<div className="dataforms-layouts-regular__field-control">
+					<fieldDefinition.Edit
+						key={ fieldDefinition.id }
+						data={ data }
+						field={ fieldDefinition }
+						onChange={ onChange }
+						hideLabelFromVision
+					/>
+				</div>
+			</HStack>
+		);
+	}
+
+	return (
+		<div className="dataforms-layouts-regular__field">
+			<fieldDefinition.Edit
+				data={ data }
+				field={ fieldDefinition }
+				onChange={ onChange }
+				hideLabelFromVision={
+					labelPosition === 'none' ? true : hideLabelFromVision
+				}
+			/>
+		</div>
+	);
+}
diff --git a/packages/dataviews/src/dataforms-layouts/regular/style.scss b/packages/dataviews/src/dataforms-layouts/regular/style.scss
new file mode 100644
index 00000000000000..d94b804fdf1fe5
--- /dev/null
+++ b/packages/dataviews/src/dataforms-layouts/regular/style.scss
@@ -0,0 +1,30 @@
+.dataforms-layouts-regular__field {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.dataforms-layouts-regular__field .components-base-control__label {
+	font-size: inherit;
+	font-weight: normal;
+	text-transform: none;
+}
+
+.dataforms-layouts-regular__field-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.dataforms-layouts-regular__field-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
new file mode 100644
index 00000000000000..4a016095702026
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -0,0 +1,294 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Spinner,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ItemActions from '../../components/dataviews-item-actions';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
+import type {
+	Action,
+	NormalizedField,
+	ViewGrid as ViewGridType,
+	ViewGridProps,
+} from '../../types';
+import type { SetSelection } from '../../private-types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
+
+interface GridItemProps< Item > {
+	view: ViewGridType;
+	selection: string[];
+	onChangeSelection: SetSelection;
+	getItemId: ( item: Item ) => string;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+	item: Item;
+	actions: Action< Item >[];
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	regularFields: NormalizedField< Item >[];
+	badgeFields: NormalizedField< Item >[];
+}
+
+function GridItem< Item >( {
+	view,
+	selection,
+	onChangeSelection,
+	onClickItem,
+	isItemClickable,
+	getItemId,
+	item,
+	actions,
+	mediaField,
+	titleField,
+	descriptionField,
+	regularFields,
+	badgeFields,
+}: GridItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
+	const id = getItemId( item );
+	const isSelected = selection.includes( id );
+	const renderedMediaField = mediaField?.render ? (
+		<mediaField.render item={ item } />
+	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
+
+	const clickableMediaItemProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className: 'dataviews-view-grid__media',
+	} );
+
+	const clickablePrimaryItemProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className: 'dataviews-view-grid__primary-field dataviews-title-field',
+	} );
+
+	return (
+		<VStack
+			spacing={ 0 }
+			key={ id }
+			className={ clsx( 'dataviews-view-grid__card', {
+				'is-selected': hasBulkAction && isSelected,
+			} ) }
+			onClickCapture={ ( event ) => {
+				if ( event.ctrlKey || event.metaKey ) {
+					event.stopPropagation();
+					event.preventDefault();
+					if ( ! hasBulkAction ) {
+						return;
+					}
+					onChangeSelection(
+						selection.includes( id )
+							? selection.filter( ( itemId ) => id !== itemId )
+							: [ ...selection, id ]
+					);
+				}
+			} }
+		>
+			{ showMedia && renderedMediaField && (
+				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
+			) }
+			{ showMedia && renderedMediaField && (
+				<DataViewsSelectionCheckbox
+					item={ item }
+					selection={ selection }
+					onChangeSelection={ onChangeSelection }
+					getItemId={ getItemId }
+					titleField={ titleField }
+					disabled={ ! hasBulkAction }
+				/>
+			) }
+			<HStack
+				justify="space-between"
+				className="dataviews-view-grid__title-actions"
+			>
+				<div { ...clickablePrimaryItemProps }>
+					{ renderedTitleField }
+				</div>
+				<ItemActions item={ item } actions={ actions } isCompact />
+			</HStack>
+			<VStack spacing={ 1 }>
+				{ showDescription && descriptionField?.render && (
+					<descriptionField.render item={ item } />
+				) }
+				{ !! badgeFields?.length && (
+					<HStack
+						className="dataviews-view-grid__badge-fields"
+						spacing={ 2 }
+						wrap
+						alignment="top"
+						justify="flex-start"
+					>
+						{ badgeFields.map( ( field ) => {
+							return (
+								<FlexItem
+									key={ field.id }
+									className="dataviews-view-grid__field-value"
+								>
+									<field.render item={ item } />
+								</FlexItem>
+							);
+						} ) }
+					</HStack>
+				) }
+				{ !! regularFields?.length && (
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 1 }
+					>
+						{ regularFields.map( ( field ) => {
+							return (
+								<Flex
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									gap={ 1 }
+									justify="flex-start"
+									expanded
+									style={ { height: 'auto' } }
+									direction="row"
+								>
+									<>
+										<FlexItem className="dataviews-view-grid__field-name">
+											{ field.header }
+										</FlexItem>
+										<FlexItem
+											className="dataviews-view-grid__field-value"
+											style={ { maxHeight: 'none' } }
+										>
+											<field.render item={ item } />
+										</FlexItem>
+									</>
+								</Flex>
+							);
+						} ) }
+					</VStack>
+				) }
+			</VStack>
+		</VStack>
+	);
+}
+
+export default function ViewGrid< Item >( {
+	actions,
+	data,
+	fields,
+	getItemId,
+	isLoading,
+	onChangeSelection,
+	onClickItem,
+	isItemClickable,
+	selection,
+	view,
+}: ViewGridProps< Item > ) {
+	const titleField = fields.find(
+		( field ) => field.id === view?.titleField
+	);
+	const mediaField = fields.find(
+		( field ) => field.id === view?.mediaField
+	);
+	const descriptionField = fields.find(
+		( field ) => field.id === view?.descriptionField
+	);
+	const otherFields = view.fields ?? [];
+	const { regularFields, badgeFields } = fields.reduce(
+		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
+			if (
+				! otherFields.includes( field.id ) ||
+				[
+					view?.mediaField,
+					view?.titleField,
+					view?.descriptionField,
+				].includes( field.id )
+			) {
+				return accumulator;
+			}
+			// If the field is a badge field, add it to the badgeFields array
+			// otherwise add it to the rest visibleFields array.
+			const key = view.layout?.badgeFields?.includes( field.id )
+				? 'badgeFields'
+				: 'regularFields';
+			accumulator[ key ].push( field );
+			return accumulator;
+		},
+		{ regularFields: [], badgeFields: [] }
+	);
+	const hasData = !! data?.length;
+	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
+	const usedPreviewSize = updatedPreviewSize || view.layout?.previewSize;
+	const gridStyle = usedPreviewSize
+		? {
+				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
+		  }
+		: {};
+	return (
+		<>
+			{ hasData && (
+				<Grid
+					gap={ 8 }
+					columns={ 2 }
+					alignment="top"
+					className="dataviews-view-grid"
+					style={ gridStyle }
+					aria-busy={ isLoading }
+				>
+					{ data.map( ( item ) => {
+						return (
+							<GridItem
+								key={ getItemId( item ) }
+								view={ view }
+								selection={ selection }
+								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
+								getItemId={ getItemId }
+								item={ item }
+								actions={ actions }
+								mediaField={ mediaField }
+								titleField={ titleField }
+								descriptionField={ descriptionField }
+								regularFields={ regularFields }
+								badgeFields={ badgeFields }
+							/>
+						);
+					} ) }
+				</Grid>
+			) }
+			{ ! hasData && (
+				<div
+					className={ clsx( {
+						'dataviews-loading': isLoading,
+						'dataviews-no-results': ! isLoading,
+					} ) }
+				>
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+				</div>
+			) }
+		</>
+	);
+}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
new file mode 100644
index 00000000000000..b48c6422bd6b37
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/grid/preview-size-picker.tsx
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { useMemo, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewGrid } from '../../types';
+
+const viewportBreaks = {
+	xhuge: { min: 3, max: 6, default: 5 },
+	huge: { min: 2, max: 4, default: 4 },
+	xlarge: { min: 2, max: 3, default: 3 },
+	large: { min: 1, max: 2, default: 2 },
+	mobile: { min: 1, max: 2, default: 2 },
+};
+
+function useViewPortBreakpoint() {
+	const isXHuge = useViewportMatch( 'xhuge', '>=' );
+	const isHuge = useViewportMatch( 'huge', '>=' );
+	const isXlarge = useViewportMatch( 'xlarge', '>=' );
+	const isLarge = useViewportMatch( 'large', '>=' );
+	const isMobile = useViewportMatch( 'mobile', '>=' );
+
+	if ( isXHuge ) {
+		return 'xhuge';
+	}
+	if ( isHuge ) {
+		return 'huge';
+	}
+	if ( isXlarge ) {
+		return 'xlarge';
+	}
+	if ( isLarge ) {
+		return 'large';
+	}
+	if ( isMobile ) {
+		return 'mobile';
+	}
+	return null;
+}
+
+export function useUpdatedPreviewSizeOnViewportChange() {
+	const viewport = useViewPortBreakpoint();
+	const view = useContext( DataViewsContext ).view as ViewGrid;
+	return useMemo( () => {
+		const previewSize = view.layout?.previewSize;
+		let newPreviewSize;
+		if ( ! viewport || ! previewSize ) {
+			return;
+		}
+		const breakValues = viewportBreaks[ viewport ];
+		if ( previewSize < breakValues.min ) {
+			newPreviewSize = breakValues.min;
+		}
+		if ( previewSize > breakValues.max ) {
+			newPreviewSize = breakValues.max;
+		}
+		return newPreviewSize;
+	}, [ viewport, view ] );
+}
+
+export default function PreviewSizePicker() {
+	const viewport = useViewPortBreakpoint();
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewGrid;
+	const breakValues = viewportBreaks[ viewport || 'mobile' ];
+	const previewSizeToUse = view.layout?.previewSize || breakValues.default;
+
+	const marks = useMemo(
+		() =>
+			Array.from(
+				{ length: breakValues.max - breakValues.min + 1 },
+				( _, i ) => {
+					return {
+						value: breakValues.min + i,
+					};
+				}
+			),
+		[ breakValues ]
+	);
+
+	if ( ! viewport ) {
+		return null;
+	}
+
+	return (
+		<RangeControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			showTooltip={ false }
+			label={ __( 'Preview size' ) }
+			value={ breakValues.max + breakValues.min - previewSizeToUse }
+			marks={ marks }
+			min={ breakValues.min }
+			max={ breakValues.max }
+			withInputField={ false }
+			onChange={ ( value = 0 ) => {
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						previewSize: breakValues.max + breakValues.min - value,
+					},
+				} );
+			} }
+			step={ 1 }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
new file mode 100644
index 00000000000000..70c94653371d16
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -0,0 +1,171 @@
+.dataviews-view-grid {
+	margin-bottom: auto;
+	grid-template-rows: max-content;
+	padding: 0 $grid-unit-60 $grid-unit-30;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+
+	.dataviews-view-grid__card {
+		height: 100%;
+		justify-content: flex-start;
+		position: relative;
+
+		.dataviews-view-grid__title-actions {
+			padding: $grid-unit-10 0 $grid-unit-05;
+		}
+
+		.dataviews-view-grid__primary-field {
+			min-height: $grid-unit-30; // Preserve layout when there is no ellipsis button
+			display: flex;
+			align-items: center;
+
+			&--clickable {
+				width: fit-content;
+			}
+		}
+
+
+		&.is-selected {
+			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+
+			.dataviews-view-grid__media::after {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+		position: relative;
+
+		img {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+			pointer-events: none;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		&:not(:empty) {
+			padding: 0 0 $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field-value:not(:empty) {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			padding-top: math.div($grid-unit-05, 2);
+		}
+
+		.dataviews-view-grid__field {
+			min-height: $grid-unit-30;
+			align-items: center;
+
+			.dataviews-view-grid__field-name {
+				width: 35%;
+				color: $gray-700;
+			}
+
+			.dataviews-view-grid__field-value {
+				width: 65%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
+			}
+		}
+	}
+
+	.dataviews-view-grid__badge-fields {
+		&:not(:empty) {
+			padding-bottom: $grid-unit-15;
+		}
+
+		.dataviews-view-grid__field-value {
+			width: fit-content;
+			background: $gray-100;
+			padding: 0 $grid-unit-10;
+			min-height: $grid-unit-30;
+			border-radius: $radius-small;
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+		}
+	}
+}
+
+.dataviews-view-grid.dataviews-view-grid {
+	grid-template-columns: repeat(1, minmax(0, 1fr));
+
+	@include break-mobile() {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+
+	@include break-xhuge() {
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+}
+
+.dataviews-view-grid__field-value:empty,
+.dataviews-view-grid__field:empty {
+	display: none;
+}
+
+.dataviews-view-grid__card .dataviews-selection-checkbox {
+	position: absolute;
+	top: -9999em;
+	left: $grid-unit-10;
+	z-index: z-index(".dataviews-view-grid__card .dataviews-selection-checkbox");
+}
+
+.dataviews-view-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+	top: $grid-unit-10;
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-view-grid__media--clickable {
+	cursor: pointer;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
new file mode 100644
index 00000000000000..f2455f81f1560c
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	blockTable,
+	category,
+	formatListBullets,
+	formatListBulletsRTL,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ViewTable from './table';
+import ViewGrid from './grid';
+import ViewList from './list';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
+import PreviewSizePicker from './grid/preview-size-picker';
+import DensityPicker from './table/density-picker';
+
+export const VIEW_LAYOUTS = [
+	{
+		type: LAYOUT_TABLE,
+		label: __( 'Table' ),
+		component: ViewTable,
+		icon: blockTable,
+		viewConfigOptions: DensityPicker,
+	},
+	{
+		type: LAYOUT_GRID,
+		label: __( 'Grid' ),
+		component: ViewGrid,
+		icon: category,
+		viewConfigOptions: PreviewSizePicker,
+	},
+	{
+		type: LAYOUT_LIST,
+		label: __( 'List' ),
+		component: ViewList,
+		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
+	},
+];
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
new file mode 100644
index 00000000000000..d400cc62741699
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -0,0 +1,500 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId, usePrevious } from '@wordpress/compose';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	privateApis as componentsPrivateApis,
+	Spinner,
+	VisuallyHidden,
+	Composite,
+} from '@wordpress/components';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import {
+	ActionsMenuGroup,
+	ActionModal,
+} from '../../components/dataviews-item-actions';
+import type {
+	Action,
+	NormalizedField,
+	ViewList as ViewListType,
+	ViewListProps,
+} from '../../types';
+
+interface ListViewItemProps< Item > {
+	view: ViewListType;
+	actions: Action< Item >[];
+	idPrefix: string;
+	isSelected: boolean;
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	onSelect: ( item: Item ) => void;
+	otherFields: NormalizedField< Item >[];
+	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
+}
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function generateItemWrapperCompositeId( idPrefix: string ) {
+	return `${ idPrefix }-item-wrapper`;
+}
+function generatePrimaryActionCompositeId(
+	idPrefix: string,
+	primaryActionId: string
+) {
+	return `${ idPrefix }-primary-action-${ primaryActionId }`;
+}
+function generateDropdownTriggerCompositeId( idPrefix: string ) {
+	return `${ idPrefix }-dropdown`;
+}
+
+function PrimaryActionGridCell< Item >( {
+	idPrefix,
+	primaryAction,
+	item,
+}: {
+	idPrefix: string;
+	primaryAction: Action< Item >;
+	item: Item;
+} ) {
+	const registry = useRegistry();
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const compositeItemId = generatePrimaryActionCompositeId(
+		idPrefix,
+		primaryAction.id
+	);
+
+	const label =
+		typeof primaryAction.label === 'string'
+			? primaryAction.label
+			: primaryAction.label( [ item ] );
+
+	return 'RenderModal' in primaryAction ? (
+		<div role="gridcell" key={ primaryAction.id }>
+			<Composite.Item
+				id={ compositeItemId }
+				render={
+					<Button
+						label={ label }
+						icon={ primaryAction.icon }
+						isDestructive={ primaryAction.isDestructive }
+						size="small"
+						onClick={ () => setIsModalOpen( true ) }
+					/>
+				}
+			>
+				{ isModalOpen && (
+					<ActionModal< Item >
+						action={ primaryAction }
+						items={ [ item ] }
+						closeModal={ () => setIsModalOpen( false ) }
+					/>
+				) }
+			</Composite.Item>
+		</div>
+	) : (
+		<div role="gridcell" key={ primaryAction.id }>
+			<Composite.Item
+				id={ compositeItemId }
+				render={
+					<Button
+						label={ label }
+						icon={ primaryAction.icon }
+						isDestructive={ primaryAction.isDestructive }
+						size="small"
+						onClick={ () => {
+							primaryAction.callback( [ item ], { registry } );
+						} }
+					/>
+				}
+			/>
+		</div>
+	);
+}
+
+function ListItem< Item >( {
+	view,
+	actions,
+	idPrefix,
+	isSelected,
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	onSelect,
+	otherFields,
+	onDropdownTriggerKeyDown,
+}: ListViewItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const itemRef = useRef< HTMLDivElement >( null );
+	const labelId = `${ idPrefix }-label`;
+	const descriptionId = `${ idPrefix }-description`;
+
+	const [ isHovered, setIsHovered ] = useState( false );
+	const handleHover: React.MouseEventHandler = ( { type } ) => {
+		const isHover = type === 'mouseenter';
+		setIsHovered( isHover );
+	};
+
+	useEffect( () => {
+		if ( isSelected ) {
+			itemRef.current?.scrollIntoView( {
+				behavior: 'auto',
+				block: 'nearest',
+				inline: 'nearest',
+			} );
+		}
+	}, [ isSelected ] );
+
+	const { primaryAction, eligibleActions } = useMemo( () => {
+		// If an action is eligible for all items, doesn't need
+		// to provide the `isEligible` function.
+		const _eligibleActions = actions.filter(
+			( action ) => ! action.isEligible || action.isEligible( item )
+		);
+		const _primaryActions = _eligibleActions.filter(
+			( action ) => action.isPrimary && !! action.icon
+		);
+		return {
+			primaryAction: _primaryActions[ 0 ],
+			eligibleActions: _eligibleActions,
+		};
+	}, [ actions, item ] );
+
+	const hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;
+
+	const renderedMediaField =
+		showMedia && mediaField?.render ? (
+			<div className="dataviews-view-list__media-wrapper">
+				<mediaField.render item={ item } />
+			</div>
+		) : null;
+
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
+
+	const usedActions = eligibleActions?.length > 0 && (
+		<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
+			{ primaryAction && (
+				<PrimaryActionGridCell
+					idPrefix={ idPrefix }
+					primaryAction={ primaryAction }
+					item={ item }
+				/>
+			) }
+			{ ! hasOnlyOnePrimaryAction && (
+				<div role="gridcell">
+					<Menu
+						trigger={
+							<Composite.Item
+								id={ generateDropdownTriggerCompositeId(
+									idPrefix
+								) }
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Actions' ) }
+										accessibleWhenDisabled
+										disabled={ ! actions.length }
+										onKeyDown={ onDropdownTriggerKeyDown }
+									/>
+								}
+							/>
+						}
+						placement="bottom-end"
+					>
+						<ActionsMenuGroup
+							actions={ eligibleActions }
+							item={ item }
+						/>
+					</Menu>
+				</div>
+			) }
+		</HStack>
+	);
+
+	return (
+		<Composite.Row
+			ref={ itemRef }
+			render={ <li /> }
+			role="row"
+			className={ clsx( {
+				'is-selected': isSelected,
+				'is-hovered': isHovered,
+			} ) }
+			onMouseEnter={ handleHover }
+			onMouseLeave={ handleHover }
+		>
+			<HStack className="dataviews-view-list__item-wrapper" spacing={ 0 }>
+				<div role="gridcell">
+					<Composite.Item
+						id={ generateItemWrapperCompositeId( idPrefix ) }
+						aria-pressed={ isSelected }
+						aria-labelledby={ labelId }
+						aria-describedby={ descriptionId }
+						className="dataviews-view-list__item"
+						onClick={ () => onSelect( item ) }
+					/>
+				</div>
+				<HStack spacing={ 3 } justify="start" alignment="flex-start">
+					{ renderedMediaField }
+					<VStack
+						spacing={ 1 }
+						className="dataviews-view-list__field-wrapper"
+					>
+						<HStack spacing={ 0 }>
+							<div
+								className="dataviews-title-field"
+								id={ labelId }
+							>
+								{ renderedTitleField }
+							</div>
+							{ usedActions }
+						</HStack>
+						{ showDescription && descriptionField?.render && (
+							<div className="dataviews-view-list__field">
+								<descriptionField.render item={ item } />
+							</div>
+						) }
+						<div
+							className="dataviews-view-list__fields"
+							id={ descriptionId }
+						>
+							{ otherFields.map( ( field ) => (
+								<div
+									key={ field.id }
+									className="dataviews-view-list__field"
+								>
+									<VisuallyHidden
+										as="span"
+										className="dataviews-view-list__field-label"
+									>
+										{ field.label }
+									</VisuallyHidden>
+									<span className="dataviews-view-list__field-value">
+										<field.render item={ item } />
+									</span>
+								</div>
+							) ) }
+						</div>
+					</VStack>
+				</HStack>
+			</HStack>
+		</Composite.Row>
+	);
+}
+
+export default function ViewList< Item >( props: ViewListProps< Item > ) {
+	const {
+		actions,
+		data,
+		fields,
+		getItemId,
+		isLoading,
+		onChangeSelection,
+		selection,
+		view,
+	} = props;
+	const baseId = useInstanceId( ViewList, 'view-list' );
+
+	const selectedItem = data?.findLast( ( item ) =>
+		selection.includes( getItemId( item ) )
+	);
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
+	);
+	const otherFields = fields.filter(
+		( field ) =>
+			( view.fields ?? [] ).includes( field.id ) &&
+			! [
+				view.titleField,
+				view.mediaField,
+				view.descriptionField,
+			].includes( field.id )
+	);
+
+	const onSelect = ( item: Item ) =>
+		onChangeSelection( [ getItemId( item ) ] );
+
+	const generateCompositeItemIdPrefix = useCallback(
+		( item: Item ) => `${ baseId }-${ getItemId( item ) }`,
+		[ baseId, getItemId ]
+	);
+
+	const isActiveCompositeItem = useCallback(
+		( item: Item, idToCheck: string ) => {
+			// All composite items use the same prefix in their IDs.
+			return idToCheck.startsWith(
+				generateCompositeItemIdPrefix( item )
+			);
+		},
+		[ generateCompositeItemIdPrefix ]
+	);
+
+	// Controlled state for the active composite item.
+	const [ activeCompositeId, setActiveCompositeId ] = useState<
+		string | null | undefined
+	>( undefined );
+
+	// Update the active composite item when the selected item changes.
+	useEffect( () => {
+		if ( selectedItem ) {
+			setActiveCompositeId(
+				generateItemWrapperCompositeId(
+					generateCompositeItemIdPrefix( selectedItem )
+				)
+			);
+		}
+	}, [ selectedItem, generateCompositeItemIdPrefix ] );
+
+	const activeItemIndex = data.findIndex( ( item ) =>
+		isActiveCompositeItem( item, activeCompositeId ?? '' )
+	);
+	const previousActiveItemIndex = usePrevious( activeItemIndex );
+	const isActiveIdInList = activeItemIndex !== -1;
+
+	const selectCompositeItem = useCallback(
+		(
+			targetIndex: number,
+			// Allows invokers to specify a custom function to generate the
+			// target composite item ID
+			generateCompositeId: ( idPrefix: string ) => string
+		) => {
+			// Clamping between 0 and data.length - 1 to avoid out of bounds.
+			const clampedIndex = Math.min(
+				data.length - 1,
+				Math.max( 0, targetIndex )
+			);
+			if ( ! data[ clampedIndex ] ) {
+				return;
+			}
+			const itemIdPrefix = generateCompositeItemIdPrefix(
+				data[ clampedIndex ]
+			);
+			const targetCompositeItemId = generateCompositeId( itemIdPrefix );
+
+			setActiveCompositeId( targetCompositeItemId );
+			document.getElementById( targetCompositeItemId )?.focus();
+		},
+		[ data, generateCompositeItemIdPrefix ]
+	);
+
+	// Select a new active composite item when the current active item
+	// is removed from the list.
+	useEffect( () => {
+		const wasActiveIdInList =
+			previousActiveItemIndex !== undefined &&
+			previousActiveItemIndex !== -1;
+		if ( ! isActiveIdInList && wasActiveIdInList ) {
+			// By picking `previousActiveItemIndex` as the next item index, we are
+			// basically picking the item that would have been after the deleted one.
+			// If the previously active (and removed) item was the last of the list,
+			// we will select the item before it — which is the new last item.
+			selectCompositeItem(
+				previousActiveItemIndex,
+				generateItemWrapperCompositeId
+			);
+		}
+	}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );
+
+	// Prevent the default behavior (open dropdown menu) and instead select the
+	// dropdown menu trigger on the previous/next row.
+	// https://github.com/ariakit/ariakit/issues/3768
+	const onDropdownTriggerKeyDown = useCallback(
+		( event: React.KeyboardEvent< HTMLButtonElement > ) => {
+			if ( event.key === 'ArrowDown' ) {
+				// Select the dropdown menu trigger item in the next row.
+				event.preventDefault();
+				selectCompositeItem(
+					activeItemIndex + 1,
+					generateDropdownTriggerCompositeId
+				);
+			}
+			if ( event.key === 'ArrowUp' ) {
+				// Select the dropdown menu trigger item in the previous row.
+				event.preventDefault();
+				selectCompositeItem(
+					activeItemIndex - 1,
+					generateDropdownTriggerCompositeId
+				);
+			}
+		},
+		[ selectCompositeItem, activeItemIndex ]
+	);
+
+	const hasData = data?.length;
+	if ( ! hasData ) {
+		return (
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+			>
+				{ ! hasData && (
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<Composite
+			id={ baseId }
+			render={ <ul /> }
+			className="dataviews-view-list"
+			role="grid"
+			activeId={ activeCompositeId }
+			setActiveId={ setActiveCompositeId }
+		>
+			{ data.map( ( item ) => {
+				const id = generateCompositeItemIdPrefix( item );
+				return (
+					<ListItem
+						key={ id }
+						view={ view }
+						idPrefix={ id }
+						actions={ actions }
+						item={ item }
+						isSelected={ item === selectedItem }
+						onSelect={ onSelect }
+						mediaField={ mediaField }
+						titleField={ titleField }
+						descriptionField={ descriptionField }
+						otherFields={ otherFields }
+						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
+					/>
+				);
+			} ) }
+		</Composite>
+	);
+}
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
new file mode 100644
index 00000000000000..8fe048cab77b51
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -0,0 +1,181 @@
+ul.dataviews-view-list {
+	list-style-type: none;
+}
+
+.dataviews-view-list {
+	margin: 0 0 auto;
+
+	li {
+		margin: 0;
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-list__item-wrapper {
+			position: relative;
+			padding: $grid-unit-20 $grid-unit-30;
+		}
+
+		.dataviews-view-list__item-actions {
+			flex: 0;
+			overflow: hidden;
+
+			> div {
+				height: $button-size-small;
+			}
+
+			.components-button {
+				position: relative;
+				z-index: 1;
+				opacity: 0;
+			}
+		}
+
+		&:where(.is-selected, .is-hovered, :focus-within) {
+			.dataviews-view-list__item-actions {
+				flex-basis: min-content;
+				overflow: unset;
+				padding-inline-end: $grid-unit-05;
+
+				.components-button {
+					opacity: 1;
+				}
+			}
+		}
+
+		&.is-selected.is-selected {
+			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+
+			& + li {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
+		&:not(.is-selected) {
+			.dataviews-view-list__primary-field {
+				color: $gray-900;
+			}
+			&:hover,
+			&.is-hovered,
+			&:focus-within {
+				color: var(--wp-admin-theme-color);
+				background-color: #f8f8f8;
+
+				.dataviews-view-list__primary-field,
+				.dataviews-view-list__fields {
+					color: var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+	}
+
+	li.is-selected,
+	li.is-selected:focus-within {
+		.dataviews-view-list__item-wrapper {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-900;
+
+			.dataviews-view-list__primary-field,
+			.dataviews-view-list__fields {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.dataviews-view-list__item {
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		scroll-margin: $grid-unit-10 0;
+		appearance: none;
+		border: none;
+		background: none;
+		padding: 0;
+		cursor: pointer;
+
+		&:focus-visible {
+			outline: none;
+
+			&::before {
+				position: absolute;
+				content: "";
+				inset: var(--wp-admin-border-width-focus);
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-radius: $radius-small;
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+		}
+	}
+	.dataviews-view-list__primary-field {
+		flex: 1;
+		min-height: $grid-unit-30;
+		line-height: $grid-unit-30;
+		overflow: hidden;
+		// The field should be in front of the main button in case it has a link/button.
+		&:has(a, button) {
+			z-index: 1;
+		}
+	}
+
+	.dataviews-view-list__media-wrapper {
+		width: $grid-unit-05 * 13;
+		height: $grid-unit-05 * 13;
+		overflow: hidden;
+		position: relative;
+		flex-shrink: 0;
+		background-color: $gray-100;
+		border-radius: $grid-unit-05;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+			border-radius: $grid-unit-05;
+		}
+	}
+
+	.dataviews-view-list__field-wrapper {
+		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
+		flex-grow: 1;
+	}
+
+	.dataviews-view-list__fields {
+		color: $gray-700;
+		display: flex;
+		gap: $grid-unit-15;
+		row-gap: $grid-unit-05;
+		flex-wrap: wrap;
+		font-size: 12px;
+
+		&:empty {
+			display: none;
+		}
+
+		.dataviews-view-list__field {
+			&:has(.dataviews-view-list__field-value:empty) {
+				display: none;
+			}
+		}
+
+		.dataviews-view-list__field-value {
+			min-height: $grid-unit-30;
+			line-height: $grid-unit-05 * 5;
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	& + .dataviews-pagination {
+		justify-content: space-between;
+	}
+}
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
new file mode 100644
index 00000000000000..763cf83b5c2f93
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -0,0 +1,268 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, Ref, PropsWithoutRef, RefAttributes } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { arrowLeft, arrowRight, unseen, funnel } from '@wordpress/icons';
+import {
+	Button,
+	Icon,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef, Children, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { sanitizeOperators } from '../../utils';
+import { SORTING_DIRECTIONS, sortArrows, sortLabels } from '../../constants';
+import type {
+	NormalizedField,
+	SortDirection,
+	ViewTable as ViewTableType,
+	Operator,
+} from '../../types';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+interface HeaderMenuProps< Item > {
+	fieldId: string;
+	view: ViewTableType;
+	fields: NormalizedField< Item >[];
+	onChangeView: ( view: ViewTableType ) => void;
+	onHide: ( field: NormalizedField< Item > ) => void;
+	setOpenedFilter: ( fieldId: string ) => void;
+	canMove?: boolean;
+}
+
+function WithMenuSeparators( { children }: { children: ReactNode } ) {
+	return Children.toArray( children )
+		.filter( Boolean )
+		.map( ( child, i ) => (
+			<Fragment key={ i }>
+				{ i > 0 && <Menu.Separator /> }
+				{ child }
+			</Fragment>
+		) );
+}
+
+const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
+	{
+		fieldId,
+		view,
+		fields,
+		onChangeView,
+		onHide,
+		setOpenedFilter,
+		canMove = true,
+	}: HeaderMenuProps< Item >,
+	ref: Ref< HTMLButtonElement >
+) {
+	const visibleFieldIds = view.fields ?? [];
+	const index = visibleFieldIds?.indexOf( fieldId ) as number;
+	const isSorted = view.sort?.field === fieldId;
+	let isHidable = false;
+	let isSortable = false;
+	let canAddFilter = false;
+	let operators: Operator[] = [];
+	const field = fields.find( ( f ) => f.id === fieldId );
+
+	if ( ! field ) {
+		// No combined or regular field found.
+		return null;
+	}
+
+	isHidable = field.enableHiding !== false;
+	isSortable = field.enableSorting !== false;
+	const header = field.header;
+
+	operators = sanitizeOperators( field );
+	// Filter can be added:
+	// 1. If the field is not already part of a view's filters.
+	// 2. If the field meets the type and operator requirements.
+	// 3. If it's not primary. If it is, it should be already visible.
+	canAddFilter =
+		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+		!! field.elements?.length &&
+		!! operators.length &&
+		! field.filterBy?.isPrimary;
+
+	return (
+		<Menu
+			align="start"
+			trigger={
+				<Button
+					size="compact"
+					className="dataviews-view-table-header-button"
+					ref={ ref }
+					variant="tertiary"
+				>
+					{ header }
+					{ view.sort && isSorted && (
+						<span aria-hidden="true">
+							{ sortArrows[ view.sort.direction ] }
+						</span>
+					) }
+				</Button>
+			}
+			style={ { minWidth: '240px' } }
+		>
+			<WithMenuSeparators>
+				{ isSortable && (
+					<Menu.Group>
+						{ SORTING_DIRECTIONS.map(
+							( direction: SortDirection ) => {
+								const isChecked =
+									view.sort &&
+									isSorted &&
+									view.sort.direction === direction;
+
+								const value = `${ fieldId }-${ direction }`;
+
+								return (
+									<Menu.RadioItem
+										key={ value }
+										// All sorting radio items share the same name, so that
+										// selecting a sorting option automatically deselects the
+										// previously selected one, even if it is displayed in
+										// another submenu. The field and direction are passed via
+										// the `value` prop.
+										name="view-table-sorting"
+										value={ value }
+										checked={ isChecked }
+										onChange={ () => {
+											onChangeView( {
+												...view,
+												sort: {
+													field: fieldId,
+													direction,
+												},
+											} );
+										} }
+									>
+										<Menu.ItemLabel>
+											{ sortLabels[ direction ] }
+										</Menu.ItemLabel>
+									</Menu.RadioItem>
+								);
+							}
+						) }
+					</Menu.Group>
+				) }
+				{ canAddFilter && (
+					<Menu.Group>
+						<Menu.Item
+							prefix={ <Icon icon={ funnel } /> }
+							onClick={ () => {
+								setOpenedFilter( fieldId );
+								onChangeView( {
+									...view,
+									page: 1,
+									filters: [
+										...( view.filters || [] ),
+										{
+											field: fieldId,
+											value: undefined,
+											operator: operators[ 0 ],
+										},
+									],
+								} );
+							} }
+						>
+							<Menu.ItemLabel>
+								{ __( 'Add filter' ) }
+							</Menu.ItemLabel>
+						</Menu.Item>
+					</Menu.Group>
+				) }
+				{ ( canMove || isHidable ) && field && (
+					<Menu.Group>
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowLeft } /> }
+								disabled={ index < 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											fieldId,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move left' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowRight } /> }
+								disabled={ index >= visibleFieldIds.length - 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index
+											) ?? [] ),
+											visibleFieldIds[ index + 1 ],
+											fieldId,
+											...visibleFieldIds.slice(
+												index + 2
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move right' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ isHidable && field && (
+							<Menu.Item
+								prefix={ <Icon icon={ unseen } /> }
+								onClick={ () => {
+									onHide( field );
+									onChangeView( {
+										...view,
+										fields: visibleFieldIds.filter(
+											( id ) => id !== fieldId
+										),
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Hide column' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+					</Menu.Group>
+				) }
+			</WithMenuSeparators>
+		</Menu>
+	);
+} );
+
+// @ts-expect-error Lift the `Item` type argument through the forwardRef.
+const ColumnHeaderMenu: < Item >(
+	props: PropsWithoutRef< HeaderMenuProps< Item > > &
+		RefAttributes< HTMLButtonElement >
+) => ReturnType< typeof _HeaderMenu > = _HeaderMenu;
+
+export default ColumnHeaderMenu;
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
new file mode 100644
index 00000000000000..6db65be72bdd4c
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+
+function ColumnPrimary< Item >( {
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	onClickItem,
+	isItemClickable,
+}: {
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+} ) {
+	const clickableProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className:
+			'dataviews-view-table__cell-content-wrapper dataviews-title-field',
+	} );
+	return (
+		<HStack spacing={ 3 } justify="flex-start">
+			{ mediaField && (
+				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
+					<mediaField.render item={ item } />
+				</div>
+			) }
+			<VStack spacing={ 0 }>
+				{ titleField && (
+					<div { ...clickableProps }>
+						<titleField.render item={ item } />
+					</div>
+				) }
+				{ descriptionField && (
+					<descriptionField.render item={ item } />
+				) }
+			</VStack>
+		</HStack>
+	);
+}
+
+export default ColumnPrimary;
diff --git a/packages/dataviews/src/dataviews-layouts/table/density-picker.tsx b/packages/dataviews/src/dataviews-layouts/table/density-picker.tsx
new file mode 100644
index 00000000000000..6d3d31aeb7345e
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/density-picker.tsx
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsContext from '../../components/dataviews-context';
+import type { ViewTable, Density } from '../../types';
+
+export default function DensityPicker() {
+	const context = useContext( DataViewsContext );
+	const view = context.view as ViewTable;
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			size="__unstable-large"
+			label={ __( 'Density' ) }
+			value={ view.layout?.density || 'balanced' }
+			onChange={ ( value ) => {
+				context.onChangeView( {
+					...view,
+					layout: {
+						...view.layout,
+						density: value as Density,
+					},
+				} );
+			} }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				key="comfortable"
+				value="comfortable"
+				label={ _x(
+					'Comfortable',
+					'Density option for DataView layout'
+				) }
+			/>
+			<ToggleGroupControlOption
+				key="balanced"
+				value="balanced"
+				label={ _x( 'Balanced', 'Density option for DataView layout' ) }
+			/>
+			<ToggleGroupControlOption
+				key="compact"
+				value="compact"
+				label={ _x( 'Compact', 'Density option for DataView layout' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
new file mode 100644
index 00000000000000..b010b3ff154fbb
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -0,0 +1,410 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Spinner } from '@wordpress/components';
+import { useEffect, useId, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import ItemActions from '../../components/dataviews-item-actions';
+import { sortValues } from '../../constants';
+import {
+	useSomeItemHasAPossibleBulkAction,
+	useHasAPossibleBulkAction,
+	BulkSelectionCheckbox,
+} from '../../components/dataviews-bulk-actions';
+import type {
+	Action,
+	NormalizedField,
+	ViewTable as ViewTableType,
+	ViewTableProps,
+} from '../../types';
+import type { SetSelection } from '../../private-types';
+import ColumnHeaderMenu from './column-header-menu';
+import ColumnPrimary from './column-primary';
+
+interface TableColumnFieldProps< Item > {
+	fields: NormalizedField< Item >[];
+	column: string;
+	item: Item;
+}
+
+interface TableRowProps< Item > {
+	hasBulkActions: boolean;
+	item: Item;
+	actions: Action< Item >[];
+	fields: NormalizedField< Item >[];
+	id: string;
+	view: ViewTableType;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	selection: string[];
+	getItemId: ( item: Item ) => string;
+	onChangeSelection: SetSelection;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+}
+
+function TableColumnField< Item >( {
+	item,
+	fields,
+	column,
+}: TableColumnFieldProps< Item > ) {
+	const field = fields.find( ( f ) => f.id === column );
+
+	if ( ! field ) {
+		return null;
+	}
+
+	return (
+		<div className="dataviews-view-table__cell-content-wrapper">
+			<field.render { ...{ item } } />
+		</div>
+	);
+}
+
+function TableRow< Item >( {
+	hasBulkActions,
+	item,
+	actions,
+	fields,
+	id,
+	view,
+	titleField,
+	mediaField,
+	descriptionField,
+	selection,
+	getItemId,
+	isItemClickable,
+	onClickItem,
+	onChangeSelection,
+}: TableRowProps< Item > ) {
+	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
+	const isSelected = hasPossibleBulkAction && selection.includes( id );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const handleMouseEnter = () => {
+		setIsHovered( true );
+	};
+	const handleMouseLeave = () => {
+		setIsHovered( false );
+	};
+
+	// Will be set to true if `onTouchStart` fires. This happens before
+	// `onClick` and can be used to exclude touchscreen devices from certain
+	// behaviours.
+	const isTouchDeviceRef = useRef( false );
+	const columns = view.fields ?? [];
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
+
+	return (
+		<tr
+			className={ clsx( 'dataviews-view-table__row', {
+				'is-selected': hasPossibleBulkAction && isSelected,
+				'is-hovered': isHovered,
+				'has-bulk-actions': hasPossibleBulkAction,
+			} ) }
+			onMouseEnter={ handleMouseEnter }
+			onMouseLeave={ handleMouseLeave }
+			onTouchStart={ () => {
+				isTouchDeviceRef.current = true;
+			} }
+			onClick={ () => {
+				if ( ! hasPossibleBulkAction ) {
+					return;
+				}
+				if (
+					! isTouchDeviceRef.current &&
+					document.getSelection()?.type !== 'Range'
+				) {
+					onChangeSelection(
+						selection.includes( id )
+							? selection.filter( ( itemId ) => id !== itemId )
+							: [ id ]
+					);
+				}
+			} }
+		>
+			{ hasBulkActions && (
+				<td
+					className="dataviews-view-table__checkbox-column"
+					style={ {
+						width: '1%',
+					} }
+				>
+					<div className="dataviews-view-table__cell-content-wrapper">
+						<DataViewsSelectionCheckbox
+							item={ item }
+							selection={ selection }
+							onChangeSelection={ onChangeSelection }
+							getItemId={ getItemId }
+							titleField={ titleField }
+							disabled={ ! hasPossibleBulkAction }
+						/>
+					</div>
+				</td>
+			) }
+			{ hasPrimaryColumn && (
+				<td>
+					<ColumnPrimary
+						item={ item }
+						titleField={ showTitle ? titleField : undefined }
+						mediaField={ showMedia ? mediaField : undefined }
+						descriptionField={
+							showDescription ? descriptionField : undefined
+						}
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+					/>
+				</td>
+			) }
+			{ columns.map( ( column: string ) => {
+				// Explicits picks the supported styles.
+				const { width, maxWidth, minWidth } =
+					view.layout?.styles?.[ column ] ?? {};
+
+				return (
+					<td key={ column } style={ { width, maxWidth, minWidth } }>
+						<TableColumnField
+							fields={ fields }
+							item={ item }
+							column={ column }
+						/>
+					</td>
+				);
+			} ) }
+			{ !! actions?.length && (
+				// Disable reason: we are not making the element interactive,
+				// but preventing any click events from bubbling up to the
+				// table row. This allows us to add a click handler to the row
+				// itself (to toggle row selection) without erroneously
+				// intercepting click events from ItemActions.
+
+				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+				<td
+					className="dataviews-view-table__actions-column"
+					onClick={ ( e ) => e.stopPropagation() }
+				>
+					<ItemActions item={ item } actions={ actions } />
+				</td>
+				/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+			) }
+		</tr>
+	);
+}
+
+function ViewTable< Item >( {
+	actions,
+	data,
+	fields,
+	getItemId,
+	isLoading = false,
+	onChangeView,
+	onChangeSelection,
+	selection,
+	setOpenedFilter,
+	onClickItem,
+	isItemClickable,
+	view,
+}: ViewTableProps< Item > ) {
+	const headerMenuRefs = useRef<
+		Map< string, { node: HTMLButtonElement; fallback: string } >
+	>( new Map() );
+	const headerMenuToFocusRef = useRef< HTMLButtonElement >();
+	const [ nextHeaderMenuToFocus, setNextHeaderMenuToFocus ] =
+		useState< HTMLButtonElement >();
+	const hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );
+
+	useEffect( () => {
+		if ( headerMenuToFocusRef.current ) {
+			headerMenuToFocusRef.current.focus();
+			headerMenuToFocusRef.current = undefined;
+		}
+	} );
+
+	const tableNoticeId = useId();
+
+	if ( nextHeaderMenuToFocus ) {
+		// If we need to force focus, we short-circuit rendering here
+		// to prevent any additional work while we handle that.
+		// Clearing out the focus directive is necessary to make sure
+		// future renders don't cause unexpected focus jumps.
+		headerMenuToFocusRef.current = nextHeaderMenuToFocus;
+		setNextHeaderMenuToFocus( undefined );
+		return;
+	}
+
+	const onHide = ( field: NormalizedField< Item > ) => {
+		const hidden = headerMenuRefs.current.get( field.id );
+		const fallback = hidden
+			? headerMenuRefs.current.get( hidden.fallback )
+			: undefined;
+		setNextHeaderMenuToFocus( fallback?.node );
+	};
+
+	const hasData = !! data?.length;
+
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
+	);
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
+	const columns = view.fields ?? [];
+	const headerMenuRef =
+		( column: string, index: number ) => ( node: HTMLButtonElement ) => {
+			if ( node ) {
+				headerMenuRefs.current.set( column, {
+					node,
+					fallback: columns[ index > 0 ? index - 1 : 1 ],
+				} );
+			} else {
+				headerMenuRefs.current.delete( column );
+			}
+		};
+
+	return (
+		<>
+			<table
+				className={ clsx( 'dataviews-view-table', {
+					[ `has-${ view.layout?.density }-density` ]:
+						view.layout?.density &&
+						[ 'compact', 'comfortable' ].includes(
+							view.layout.density
+						),
+				} ) }
+				aria-busy={ isLoading }
+				aria-describedby={ tableNoticeId }
+			>
+				<thead>
+					<tr className="dataviews-view-table__row">
+						{ hasBulkActions && (
+							<th
+								className="dataviews-view-table__checkbox-column"
+								style={ {
+									width: '1%',
+								} }
+								scope="col"
+							>
+								<BulkSelectionCheckbox
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									data={ data }
+									actions={ actions }
+									getItemId={ getItemId }
+								/>
+							</th>
+						) }
+						{ hasPrimaryColumn && (
+							<th scope="col">
+								<span className="dataviews-view-table-header">
+									{ titleField && (
+										<ColumnHeaderMenu
+											ref={ headerMenuRef(
+												titleField.id,
+												0
+											) }
+											fieldId={ titleField.id }
+											view={ view }
+											fields={ fields }
+											onChangeView={ onChangeView }
+											onHide={ onHide }
+											setOpenedFilter={ setOpenedFilter }
+											canMove={ false }
+										/>
+									) }
+								</span>
+							</th>
+						) }
+						{ columns.map( ( column, index ) => {
+							// Explicits picks the supported styles.
+							const { width, maxWidth, minWidth } =
+								view.layout?.styles?.[ column ] ?? {};
+							return (
+								<th
+									key={ column }
+									style={ { width, maxWidth, minWidth } }
+									aria-sort={
+										view.sort?.direction &&
+										view.sort?.field === column
+											? sortValues[ view.sort.direction ]
+											: undefined
+									}
+									scope="col"
+								>
+									<ColumnHeaderMenu
+										ref={ headerMenuRef( column, index ) }
+										fieldId={ column }
+										view={ view }
+										fields={ fields }
+										onChangeView={ onChangeView }
+										onHide={ onHide }
+										setOpenedFilter={ setOpenedFilter }
+									/>
+								</th>
+							);
+						} ) }
+						{ !! actions?.length && (
+							<th className="dataviews-view-table__actions-column">
+								<span className="dataviews-view-table-header">
+									{ __( 'Actions' ) }
+								</span>
+							</th>
+						) }
+					</tr>
+				</thead>
+				<tbody>
+					{ hasData &&
+						data.map( ( item, index ) => (
+							<TableRow
+								key={ getItemId( item ) }
+								item={ item }
+								hasBulkActions={ hasBulkActions }
+								actions={ actions }
+								fields={ fields }
+								id={ getItemId( item ) || index.toString() }
+								view={ view }
+								titleField={ titleField }
+								mediaField={ mediaField }
+								descriptionField={ descriptionField }
+								selection={ selection }
+								getItemId={ getItemId }
+								onChangeSelection={ onChangeSelection }
+								onClickItem={ onClickItem }
+								isItemClickable={ isItemClickable }
+							/>
+						) ) }
+				</tbody>
+			</table>
+			<div
+				className={ clsx( {
+					'dataviews-loading': isLoading,
+					'dataviews-no-results': ! hasData && ! isLoading,
+				} ) }
+				id={ tableNoticeId }
+			>
+				{ ! hasData && (
+					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+				) }
+			</div>
+		</>
+	);
+}
+
+export default ViewTable;
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
new file mode 100644
index 00000000000000..5a713dd428c127
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -0,0 +1,228 @@
+.dataviews-view-table {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	color: $gray-700;
+	margin-bottom: auto;
+
+	th {
+		text-align: left;
+		color: $gray-900;
+		font-weight: normal;
+		font-size: $default-font-size;
+	}
+	td,
+	th {
+		padding: $grid-unit-15;
+		white-space: nowrap;
+
+		&.dataviews-view-table__actions-column {
+			text-align: right;
+		}
+
+		&.dataviews-view-table__checkbox-column {
+			padding-right: 0;
+		}
+	}
+	tr {
+		border-top: 1px solid $gray-100;
+
+		.dataviews-view-table-header-button {
+			gap: $grid-unit-05;
+		}
+
+		td:first-child,
+		th:first-child {
+			padding-left: $grid-unit-60;
+
+			.dataviews-view-table-header-button,
+			.dataviews-view-table-header {
+				margin-left: - #{$grid-unit-10};
+			}
+		}
+
+		td:last-child,
+		th:last-child {
+			padding-right: $grid-unit-60;
+		}
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		&.is-hovered {
+			background-color: #f8f8f8;
+		}
+
+		.components-checkbox-control__input.components-checkbox-control__input {
+			opacity: 0;
+
+			&:checked,
+			&:indeterminate,
+			&:focus {
+				opacity: 1;
+			}
+		}
+
+		.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+			opacity: 0;
+		}
+
+		&:focus-within,
+		&.is-hovered,
+		&:hover {
+			.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
+		@media (hover: none) {
+			// Show checkboxes and quick-actions on devices that do not support hover.
+			.components-checkbox-control__input.components-checkbox-control__input,
+			.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+				opacity: 1;
+			}
+		}
+
+		&.is-selected {
+			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			color: $gray-700;
+
+			&,
+			& + tr {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+
+			&:hover {
+				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+			}
+		}
+	}
+	thead {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: z-index(".dataviews-view-table thead");
+
+		tr {
+			border: 0;
+		}
+		th {
+			background-color: $white;
+			padding-top: $grid-unit-10;
+			padding-bottom: $grid-unit-10;
+			padding-left: $grid-unit-15;
+			font-size: 11px;
+			text-transform: uppercase;
+			font-weight: 500;
+
+			&:has(.dataviews-view-table-header-button):not(:first-child) {
+				padding-left: $grid-unit-05;
+			}
+		}
+	}
+	tbody {
+		td {
+			vertical-align: top;
+		}
+		.dataviews-view-table__cell-content-wrapper {
+			min-height: $grid-unit-40;
+			display: flex;
+			align-items: center;
+		}
+
+		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
+			min-height: 0;
+		}
+	}
+	.dataviews-view-table-header-button {
+		padding: $grid-unit-05 $grid-unit-10;
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+
+		&:not(:hover) {
+			color: $gray-900;
+		}
+
+		span {
+			speak: none;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+
+	.dataviews-view-table-header {
+		padding-left: $grid-unit-05;
+	}
+
+	.dataviews-view-table__actions-column {
+		width: 1%;
+	}
+
+	&:has(tr.is-selected) {
+		.components-checkbox-control__input {
+			opacity: 1;
+		}
+	}
+
+	// Density style overrides.
+	&.has-compact-density {
+		thead {
+			th {
+				&:has(.dataviews-view-table-header-button):not(:first-child) {
+					padding-left: 0;
+				}
+			}
+		}
+		td,
+		th {
+			padding: $grid-unit-05 $grid-unit-10;
+		}
+	}
+
+	&.has-comfortable-density {
+		td,
+		th {
+			padding: $grid-unit-20 $grid-unit-15;
+		}
+	}
+
+	&.has-compact-density,
+	&.has-comfortable-density {
+		td,
+		th {
+			&.dataviews-view-table__checkbox-column {
+				padding-right: 0;
+			}
+		}
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-left: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-view-table-selection-checkbox {
+	--checkbox-input-size: 24px;
+	@include break-small() {
+		--checkbox-input-size: 16px;
+	}
+}
+
+.dataviews-column-primary__media {
+	max-width: 60px;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
new file mode 100644
index 00000000000000..e03e3a6351ec15
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
@@ -0,0 +1,35 @@
+export default function getClickableItemProps< Item >( {
+	item,
+	isItemClickable,
+	onClickItem,
+	className,
+}: {
+	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+	className?: string;
+} ) {
+	if ( ! isItemClickable( item ) || ! onClickItem ) {
+		return { className };
+	}
+
+	return {
+		className: className
+			? `${ className } ${ className }--clickable`
+			: undefined,
+		role: 'button',
+		tabIndex: 0,
+		onClick: ( event: React.MouseEvent ) => {
+			// Prevents onChangeSelection from triggering.
+			event.stopPropagation();
+			onClickItem( item );
+		},
+		onKeyDown: ( event: React.KeyboardEvent ) => {
+			if ( event.key === 'Enter' || event.key === '' ) {
+				// Prevents onChangeSelection from triggering.
+				event.stopPropagation();
+				onClickItem( item );
+			}
+		},
+	};
+}
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
new file mode 100644
index 00000000000000..aa97fc86c318c2
--- /dev/null
+++ b/packages/dataviews/src/field-types/datetime.tsx
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'datetime',
+};
diff --git a/packages/dataviews/src/field-types/index.tsx b/packages/dataviews/src/field-types/index.tsx
new file mode 100644
index 00000000000000..eb9dada479c6bf
--- /dev/null
+++ b/packages/dataviews/src/field-types/index.tsx
@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import type { FieldType, SortDirection, ValidationContext } from '../types';
+import { default as integer } from './integer';
+import { default as text } from './text';
+import { default as datetime } from './datetime';
+
+/**
+ *
+ * @param {FieldType} type The field type definition to get.
+ *
+ * @return A field type definition.
+ */
+export default function getFieldTypeDefinition( type?: FieldType ) {
+	if ( 'integer' === type ) {
+		return integer;
+	}
+
+	if ( 'text' === type ) {
+		return text;
+	}
+
+	if ( 'datetime' === type ) {
+		return datetime;
+	}
+
+	return {
+		sort: ( a: any, b: any, direction: SortDirection ) => {
+			if ( typeof a === 'number' && typeof b === 'number' ) {
+				return direction === 'asc' ? a - b : b - a;
+			}
+
+			return direction === 'asc'
+				? a.localeCompare( b )
+				: b.localeCompare( a );
+		},
+		isValid: ( value: any, context?: ValidationContext ) => {
+			if ( context?.elements ) {
+				const validValues = context?.elements?.map( ( f ) => f.value );
+				if ( ! validValues.includes( value ) ) {
+					return false;
+				}
+			}
+
+			return true;
+		},
+		Edit: () => null,
+	};
+}
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
new file mode 100644
index 00000000000000..f57c8e382db816
--- /dev/null
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	return direction === 'asc' ? a - b : b - a;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitely means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! Number.isInteger( Number( value ) ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( Number( value ) ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'integer',
+};
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
new file mode 100644
index 00000000000000..76ff699d0848c4
--- /dev/null
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection, ValidationContext } from '../types';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'text',
+};
diff --git a/packages/dataviews/src/filter-and-sort-data-view.ts b/packages/dataviews/src/filter-and-sort-data-view.ts
new file mode 100644
index 00000000000000..da2e9915d515ba
--- /dev/null
+++ b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -0,0 +1,165 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Internal dependencies
+ */
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+} from './constants';
+import { normalizeFields } from './normalize-fields';
+import type { Field, View } from './types';
+
+function normalizeSearchInput( input = '' ) {
+	return removeAccents( input.trim().toLowerCase() );
+}
+
+const EMPTY_ARRAY: [] = [];
+
+/**
+ * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
+ *
+ * @param data   Raw data.
+ * @param view   View config.
+ * @param fields Fields config.
+ *
+ * @return Filtered, sorted and paginated data.
+ */
+export function filterSortAndPaginate< Item >(
+	data: Item[],
+	view: View,
+	fields: Field< Item >[]
+): {
+	data: Item[];
+	paginationInfo: { totalItems: number; totalPages: number };
+} {
+	if ( ! data ) {
+		return {
+			data: EMPTY_ARRAY,
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		};
+	}
+	const _fields = normalizeFields( fields );
+	let filteredData = [ ...data ];
+	// Handle global search.
+	if ( view.search ) {
+		const normalizedSearch = normalizeSearchInput( view.search );
+		filteredData = filteredData.filter( ( item ) => {
+			return _fields
+				.filter( ( field ) => field.enableGlobalSearch )
+				.map( ( field ) => {
+					return normalizeSearchInput( field.getValue( { item } ) );
+				} )
+				.some( ( field ) => field.includes( normalizedSearch ) );
+		} );
+	}
+
+	if ( view.filters && view.filters?.length > 0 ) {
+		view.filters.forEach( ( filter ) => {
+			const field = _fields.find(
+				( _field ) => _field.id === filter.field
+			);
+			if ( field ) {
+				if (
+					filter.operator === OPERATOR_IS_ANY &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if ( Array.isArray( fieldValue ) ) {
+							return filter.value.some( ( filterValue: any ) =>
+								fieldValue.includes( filterValue )
+							);
+						} else if ( typeof fieldValue === 'string' ) {
+							return filter.value.includes( fieldValue );
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_NONE &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if ( Array.isArray( fieldValue ) ) {
+							return ! filter.value.some( ( filterValue: any ) =>
+								fieldValue.includes( filterValue )
+							);
+						} else if ( typeof fieldValue === 'string' ) {
+							return ! filter.value.includes( fieldValue );
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_ALL &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.every( ( value: any ) => {
+							return field
+								.getValue( { item } )
+								?.includes( value );
+						} );
+					} );
+				} else if (
+					filter.operator === OPERATOR_IS_NOT_ALL &&
+					filter?.value?.length > 0
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value.every( ( value: any ) => {
+							return ! field
+								.getValue( { item } )
+								?.includes( value );
+						} );
+					} );
+				} else if ( filter.operator === OPERATOR_IS ) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value === field.getValue( { item } );
+					} );
+				} else if ( filter.operator === OPERATOR_IS_NOT ) {
+					filteredData = filteredData.filter( ( item ) => {
+						return filter.value !== field.getValue( { item } );
+					} );
+				}
+			}
+		} );
+	}
+
+	// Handle sorting.
+	if ( view.sort ) {
+		const fieldId = view.sort.field;
+		const fieldToSort = _fields.find( ( field ) => {
+			return field.id === fieldId;
+		} );
+		if ( fieldToSort ) {
+			filteredData.sort( ( a, b ) => {
+				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
+			} );
+		}
+	}
+
+	// Handle pagination.
+	let totalItems = filteredData.length;
+	let totalPages = 1;
+	if ( view.page !== undefined && view.perPage !== undefined ) {
+		const start = ( view.page - 1 ) * view.perPage;
+		totalItems = filteredData?.length || 0;
+		totalPages = Math.ceil( totalItems / view.perPage );
+		filteredData = filteredData?.slice( start, start + view.perPage );
+	}
+
+	return {
+		data: filteredData,
+		paginationInfo: {
+			totalItems,
+			totalPages,
+		},
+	};
+}
diff --git a/packages/dataviews/src/index.ts b/packages/dataviews/src/index.ts
new file mode 100644
index 00000000000000..4ca0cf3db0bd3f
--- /dev/null
+++ b/packages/dataviews/src/index.ts
@@ -0,0 +1,6 @@
+export { default as DataViews } from './components/dataviews';
+export { default as DataForm } from './components/dataform';
+export { VIEW_LAYOUTS } from './dataviews-layouts';
+export { filterSortAndPaginate } from './filter-and-sort-data-view';
+export type * from './types';
+export { isItemValid } from './validation';
diff --git a/packages/dataviews/src/lock-unlock.ts b/packages/dataviews/src/lock-unlock.ts
new file mode 100644
index 00000000000000..d1533da413cfc3
--- /dev/null
+++ b/packages/dataviews/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/dataviews'
+	);
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
new file mode 100644
index 00000000000000..2ed87cbe112229
--- /dev/null
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -0,0 +1,83 @@
+/**
+ * Internal dependencies
+ */
+import getFieldTypeDefinition from './field-types';
+import type { Field, NormalizedField } from './types';
+import { getControl } from './dataform-controls';
+
+const getValueFromId =
+	( id: string ) =>
+	( { item }: { item: any } ) => {
+		const path = id.split( '.' );
+		let value = item;
+		for ( const segment of path ) {
+			if ( value.hasOwnProperty( segment ) ) {
+				value = value[ segment ];
+			} else {
+				value = undefined;
+			}
+		}
+
+		return value;
+	};
+
+/**
+ * Apply default values and normalize the fields config.
+ *
+ * @param fields Fields config.
+ * @return Normalized fields config.
+ */
+export function normalizeFields< Item >(
+	fields: Field< Item >[]
+): NormalizedField< Item >[] {
+	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
+		const getValue = field.getValue || getValueFromId( field.id );
+
+		const sort =
+			field.sort ??
+			function sort( a, b, direction ) {
+				return fieldTypeDefinition.sort(
+					getValue( { item: a } ),
+					getValue( { item: b } ),
+					direction
+				);
+			};
+
+		const isValid =
+			field.isValid ??
+			function isValid( item, context ) {
+				return fieldTypeDefinition.isValid(
+					getValue( { item } ),
+					context
+				);
+			};
+
+		const Edit = getControl( field, fieldTypeDefinition );
+
+		const renderFromElements = ( { item }: { item: Item } ) => {
+			const value = getValue( { item } );
+			return (
+				field?.elements?.find( ( element ) => element.value === value )
+					?.label || getValue( { item } )
+			);
+		};
+
+		const render =
+			field.render || ( field.elements ? renderFromElements : getValue );
+
+		return {
+			...field,
+			label: field.label || field.id,
+			header: field.header || field.label || field.id,
+			getValue,
+			render,
+			sort,
+			isValid,
+			Edit,
+			enableHiding: field.enableHiding ?? true,
+			enableSorting: field.enableSorting ?? true,
+		};
+	} );
+}
diff --git a/packages/dataviews/src/normalize-form-fields.ts b/packages/dataviews/src/normalize-form-fields.ts
new file mode 100644
index 00000000000000..3cd5f67564d7ce
--- /dev/null
+++ b/packages/dataviews/src/normalize-form-fields.ts
@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import type { Form } from './types';
+
+interface NormalizedFormField {
+	id: string;
+	layout: 'regular' | 'panel';
+	labelPosition: 'side' | 'top' | 'none';
+}
+
+export default function normalizeFormFields(
+	form: Form
+): NormalizedFormField[] {
+	let layout: 'regular' | 'panel' = 'regular';
+	if ( [ 'regular', 'panel' ].includes( form.type ?? '' ) ) {
+		layout = form.type as 'regular' | 'panel';
+	}
+
+	const labelPosition =
+		form.labelPosition ?? ( layout === 'regular' ? 'top' : 'side' );
+
+	return ( form.fields ?? [] ).map( ( field ) => {
+		if ( typeof field === 'string' ) {
+			return {
+				id: field,
+				layout,
+				labelPosition,
+			};
+		}
+
+		const fieldLayout = field.layout ?? layout;
+		const fieldLabelPosition =
+			field.labelPosition ??
+			( fieldLayout === 'regular' ? 'top' : 'side' );
+		return {
+			...field,
+			layout: fieldLayout,
+			labelPosition: fieldLabelPosition,
+		};
+	} );
+}
diff --git a/packages/dataviews/src/private-types.tsx b/packages/dataviews/src/private-types.tsx
new file mode 100644
index 00000000000000..d2d453e63599c9
--- /dev/null
+++ b/packages/dataviews/src/private-types.tsx
@@ -0,0 +1,2 @@
+export type SelectionOrUpdater = string[] | ( ( prev: string[] ) => string[] );
+export type SetSelection = ( selection: SelectionOrUpdater ) => void;
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
new file mode 100644
index 00000000000000..5639f3cac0da51
--- /dev/null
+++ b/packages/dataviews/src/style.scss
@@ -0,0 +1,16 @@
+@import "./components/dataviews/style.scss";
+@import "./components/dataviews-bulk-actions/style.scss";
+@import "./components/dataviews-filters/style.scss";
+@import "./components/dataviews-footer/style.scss";
+@import "./components/dataviews-pagination/style.scss";
+@import "./components/dataviews-item-actions/style.scss";
+@import "./components/dataviews-selection-checkbox/style.scss";
+@import "./components/dataviews-view-config/style.scss";
+
+@import "./dataviews-layouts/grid/style.scss";
+@import "./dataviews-layouts/list/style.scss";
+@import "./dataviews-layouts/table/style.scss";
+
+@import "./dataform-controls/style.scss";
+@import "./dataforms-layouts/panel/style.scss";
+@import "./dataforms-layouts/regular/style.scss";
diff --git a/packages/dataviews/src/test/filter-and-sort-data-view.js b/packages/dataviews/src/test/filter-and-sort-data-view.js
new file mode 100644
index 00000000000000..7f0b3a30e8587c
--- /dev/null
+++ b/packages/dataviews/src/test/filter-and-sort-data-view.js
@@ -0,0 +1,362 @@
+/**
+ * Internal dependencies
+ */
+import { filterSortAndPaginate } from '../filter-and-sort-data-view';
+import { data, fields } from '../components/dataviews/stories/fixtures';
+
+describe( 'filters', () => {
+	it( 'should return empty if the data is empty', () => {
+		expect( filterSortAndPaginate( null, {}, [] ) ).toStrictEqual( {
+			data: [],
+			paginationInfo: { totalItems: 0, totalPages: 0 },
+		} );
+	} );
+
+	it( 'should return the same data if no filters are applied', () => {
+		expect(
+			filterSortAndPaginate(
+				data,
+				{
+					filters: [],
+				},
+				[]
+			)
+		).toStrictEqual( {
+			data,
+			paginationInfo: { totalItems: data.length, totalPages: 1 },
+		} );
+	} );
+
+	it( 'should search using searchable fields (title)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Neptu',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should search using searchable fields (description)', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'photo',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'NASA photo' );
+	} );
+
+	it( 'should perform case-insensitive and accent-insensitive search', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'nete ven',
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
+	} );
+
+	it( 'should search using IS filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'is',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NOT filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNot',
+						value: 'Ice giant',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 9 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 3 ].title ).toBe( 'Mercury' );
+		expect( result[ 4 ].title ).toBe( 'Venus' );
+		expect( result[ 5 ].title ).toBe( 'Earth' );
+		expect( result[ 6 ].title ).toBe( 'Mars' );
+		expect( result[ 7 ].title ).toBe( 'Jupiter' );
+		expect( result[ 8 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS ANY filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should search using IS NONE filter for STRING values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'isNone',
+						value: [ 'Ice giant', 'Gas giant', 'Terrestrial' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ANY filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAny',
+						value: [ 'NASA' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS NONE filter for ARRAY values', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNone',
+						value: [ 'Space' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should search using IS ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 7 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+		expect( result[ 1 ].title ).toBe( 'Mercury' );
+		expect( result[ 2 ].title ).toBe( 'Venus' );
+		expect( result[ 3 ].title ).toBe( 'Earth' );
+		expect( result[ 4 ].title ).toBe( 'Mars' );
+		expect( result[ 5 ].title ).toBe( 'Jupiter' );
+		expect( result[ 6 ].title ).toBe( 'Saturn' );
+	} );
+
+	it( 'should search using IS NOT ALL filter', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'categories',
+						operator: 'isNotAll',
+						value: [ 'Planet', 'Solar system' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 3 );
+		expect( result[ 0 ].title ).toBe( 'Apollo' );
+		expect( result[ 1 ].title ).toBe( 'Space' );
+		expect( result[ 2 ].title ).toBe( 'NASA' );
+	} );
+} );
+
+describe( 'sorting', () => {
+	it( 'should sort integer field types', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites', direction: 'desc' },
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should sort text field types', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should sort datetime field types', () => {
+		const { data: resultDesc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'desc' },
+			},
+			fields
+		);
+		expect( resultDesc ).toHaveLength( 11 );
+		expect( resultDesc[ 0 ].title ).toBe( 'NASA' );
+		expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
+		expect( resultDesc[ 9 ].title ).toBe( 'Space' );
+		expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
+
+		const { data: resultAsc } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'date', direction: 'asc' },
+			},
+			fields
+		);
+		expect( resultAsc ).toHaveLength( 11 );
+		expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
+		expect( resultAsc[ 1 ].title ).toBe( 'Space' );
+		expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
+		expect( resultAsc[ 10 ].title ).toBe( 'NASA' );
+	} );
+
+	it( 'should sort untyped fields if the value is a number', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites', direction: 'desc' },
+			},
+			// Remove type information for satellites field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'satellites'
+					? { ...field, type: undefined }
+					: field
+			)
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should sort untyped fields if the value is string', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				filters: [
+					{
+						field: 'type',
+						operator: 'isAny',
+						value: [ 'Ice giant' ],
+					},
+				],
+			},
+			// Remove type information for the title field to test sorting untyped fields.
+			fields.map( ( field ) =>
+				field.id === 'title' ? { ...field, type: undefined } : field
+			)
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'Uranus' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+	} );
+} );
+
+describe( 'pagination', () => {
+	it( 'should paginate', () => {
+		const { data: result, paginationInfo } = filterSortAndPaginate(
+			data,
+			{
+				perPage: 2,
+				page: 2,
+				filters: [],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result[ 1 ].title ).toBe( 'Neptune' );
+		expect( paginationInfo ).toStrictEqual( {
+			totalItems: data.length,
+			totalPages: 6,
+		} );
+	} );
+} );
diff --git a/packages/dataviews/src/test/normalize-fields.ts b/packages/dataviews/src/test/normalize-fields.ts
new file mode 100644
index 00000000000000..dce6a19766dcaa
--- /dev/null
+++ b/packages/dataviews/src/test/normalize-fields.ts
@@ -0,0 +1,45 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from '../normalize-fields';
+import type { Field } from '../types';
+
+describe( 'normalizeFields: default getValue', () => {
+	describe( 'getValue from ID', () => {
+		it( 'user', () => {
+			const item = { user: 'value' };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+
+		it( 'user.name', () => {
+			const item = { user: { name: 'value' } };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user.name',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+
+		it( 'user.name.first', () => {
+			const item = { user: { name: { first: 'value' } } };
+			const fields: Field< {} >[] = [
+				{
+					id: 'user.name.first',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].getValue( { item } );
+			expect( result ).toBe( 'value' );
+		} );
+	} );
+} );
diff --git a/packages/dataviews/src/test/validation.ts b/packages/dataviews/src/test/validation.ts
new file mode 100644
index 00000000000000..6a81ba16425f85
--- /dev/null
+++ b/packages/dataviews/src/test/validation.ts
@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { isItemValid } from '../validation';
+import type { Field } from '../types';
+
+describe( 'validation', () => {
+	it( 'fields not visible in form are not validated', () => {
+		const item = { id: 1, valid_order: 2, invalid_order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'valid_order',
+				type: 'integer',
+			},
+			{
+				id: 'invalid_order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'valid_order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is valid if value is integer', () => {
+		const item = { id: 1, order: 2, title: 'hi' };
+		const fields: Field< {} >[] = [
+			{
+				type: 'integer',
+				id: 'order',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+
+	it( 'integer field is invalid if value is not integer', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is empty', () => {
+		const item = { id: 1, order: '' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'integer field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 3 };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'integer',
+				elements: [
+					{ value: 1, label: 'Jane' },
+					{ value: 2, label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'text field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				type: 'text',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'untyped field is invalid if value is not one of the elements', () => {
+		const item = { id: 1, author: 'not-in-elements' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'author',
+				elements: [
+					{ value: 'jane', label: 'Jane' },
+					{ value: 'john', label: 'John' },
+				],
+			},
+		];
+		const form = { fields: [ 'author' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( false );
+	} );
+
+	it( 'fields can provide its own isValid function', () => {
+		const item = { id: 1, order: 'd' };
+		const fields: Field< {} >[] = [
+			{
+				id: 'order',
+				type: 'integer',
+				elements: [
+					{ value: 'a', label: 'A' },
+					{ value: 'b', label: 'B' },
+				],
+				isValid: () => true, // Overrides the validation provided for integer types.
+			},
+		];
+		const form = { fields: [ 'order' ] };
+		const result = isItemValid( item, fields, form );
+		expect( result ).toBe( true );
+	} );
+} );
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
new file mode 100644
index 00000000000000..96fd4a8cd01afc
--- /dev/null
+++ b/packages/dataviews/src/types.ts
@@ -0,0 +1,553 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement, ComponentType } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { SetSelection } from './private-types';
+
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * Generic option type.
+ */
+export interface Option< Value extends any = any > {
+	value: Value;
+	label: string;
+	description?: string;
+}
+
+interface FilterByConfig {
+	/**
+	 * The list of operators supported by the field.
+	 */
+	operators?: Operator[];
+
+	/**
+	 * Whether it is a primary filter.
+	 *
+	 * A primary filter is always visible and is not listed in the "Add filter" component,
+	 * except for the list layout where it behaves like a secondary filter.
+	 */
+	isPrimary?: boolean;
+}
+
+export type Operator =
+	| 'is'
+	| 'isNot'
+	| 'isAny'
+	| 'isNone'
+	| 'isAll'
+	| 'isNotAll';
+
+export type FieldType = 'text' | 'integer' | 'datetime';
+
+export type ValidationContext = {
+	elements?: Option[];
+};
+
+/**
+ * An abstract interface for Field based on the field type.
+ */
+export type FieldTypeDefinition< Item > = {
+	/**
+	 * Callback used to sort the field.
+	 */
+	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
+
+	/**
+	 * Callback used to validate the field.
+	 */
+	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+
+	/**
+	 * Callback used to render an edit control for the field or control name.
+	 */
+	Edit: ComponentType< DataFormControlProps< Item > > | string;
+};
+
+/**
+ * A dataview field for a specific property of a data type.
+ */
+export type Field< Item > = {
+	/**
+	 * Type of the fields.
+	 */
+	type?: FieldType;
+
+	/**
+	 * The unique identifier of the field.
+	 */
+	id: string;
+
+	/**
+	 * The label of the field. Defaults to the id.
+	 */
+	label?: string;
+
+	/**
+	 * The header of the field. Defaults to the label.
+	 * It allows the usage of a React Element to render the field labels.
+	 */
+	header?: string | ReactElement;
+
+	/**
+	 * A description of the field.
+	 */
+	description?: string;
+
+	/**
+	 * Placeholder for the field.
+	 */
+	placeholder?: string;
+
+	/**
+	 * Callback used to render the field. Defaults to `field.getValue`.
+	 */
+	render?: ComponentType< DataViewRenderFieldProps< Item > >;
+
+	/**
+	 * Callback used to render an edit control for the field.
+	 */
+	Edit?: ComponentType< DataFormControlProps< Item > > | string;
+
+	/**
+	 * Callback used to sort the field.
+	 */
+	sort?: ( a: Item, b: Item, direction: SortDirection ) => number;
+
+	/**
+	 * Callback used to validate the field.
+	 */
+	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
+
+	/**
+	 * Callback used to decide if a field should be displayed.
+	 */
+	isVisible?: ( item: Item ) => boolean;
+
+	/**
+	 * Whether the field is sortable.
+	 */
+	enableSorting?: boolean;
+
+	/**
+	 * Whether the field is searchable.
+	 */
+	enableGlobalSearch?: boolean;
+
+	/**
+	 * Whether the field is filterable.
+	 */
+	enableHiding?: boolean;
+
+	/**
+	 * The list of options to pick from when using the field as a filter.
+	 */
+	elements?: Option[];
+
+	/**
+	 * Filter config for the field.
+	 */
+	filterBy?: FilterByConfig | undefined;
+
+	/**
+	 * Callback used to retrieve the value of the field from the item.
+	 * Defaults to `item[ field.id ]`.
+	 */
+	getValue?: ( args: { item: Item } ) => any;
+};
+
+export type NormalizedField< Item > = Field< Item > & {
+	label: string;
+	header: string | ReactElement;
+	getValue: ( args: { item: Item } ) => any;
+	render: ComponentType< DataViewRenderFieldProps< Item > >;
+	Edit: ComponentType< DataFormControlProps< Item > >;
+	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
+	isValid: ( item: Item, context?: ValidationContext ) => boolean;
+	enableHiding: boolean;
+	enableSorting: boolean;
+};
+
+/**
+ * A collection of dataview fields for a data type.
+ */
+export type Fields< Item > = Field< Item >[];
+
+export type Data< Item > = Item[];
+
+export type DataFormControlProps< Item > = {
+	data: Item;
+	field: NormalizedField< Item >;
+	onChange: ( value: Record< string, any > ) => void;
+	hideLabelFromVision?: boolean;
+};
+
+export type DataViewRenderFieldProps< Item > = {
+	item: Item;
+};
+
+/**
+ * The filters applied to the dataset.
+ */
+export interface Filter {
+	/**
+	 * The field to filter by.
+	 */
+	field: string;
+
+	/**
+	 * The operator to use.
+	 */
+	operator: Operator;
+
+	/**
+	 * The value to filter by.
+	 */
+	value: any;
+}
+
+export interface NormalizedFilter {
+	/**
+	 * The field to filter by.
+	 */
+	field: string;
+
+	/**
+	 * The field name.
+	 */
+	name: string;
+
+	/**
+	 * The list of options to pick from when using the field as a filter.
+	 */
+	elements: Option[];
+
+	/**
+	 * Is a single selection filter.
+	 */
+	singleSelection: boolean;
+
+	/**
+	 * The list of operators supported by the field.
+	 */
+	operators: Operator[];
+
+	/**
+	 * Whether the filter is visible.
+	 */
+	isVisible: boolean;
+
+	/**
+	 * Whether it is a primary filter.
+	 */
+	isPrimary: boolean;
+}
+
+interface ViewBase {
+	/**
+	 * The layout of the view.
+	 */
+	type: string;
+
+	/**
+	 * The global search term.
+	 */
+	search?: string;
+
+	/**
+	 * The filters to apply.
+	 */
+	filters?: Filter[];
+
+	/**
+	 * The sorting configuration.
+	 */
+	sort?: {
+		/**
+		 * The field to sort by.
+		 */
+		field: string;
+
+		/**
+		 * The direction to sort by.
+		 */
+		direction: SortDirection;
+	};
+
+	/**
+	 * The active page
+	 */
+	page?: number;
+
+	/**
+	 * The number of items per page
+	 */
+	perPage?: number;
+
+	/**
+	 * The fields to render
+	 */
+	fields?: string[];
+
+	/**
+	 * Title field
+	 */
+	titleField?: string;
+
+	/**
+	 * Media field
+	 */
+	mediaField?: string;
+
+	/**
+	 * Description field
+	 */
+	descriptionField?: string;
+
+	/**
+	 * Whether to show the title
+	 */
+	showTitle?: boolean;
+
+	/**
+	 * Whether to show the media
+	 */
+	showMedia?: boolean;
+
+	/**
+	 * Whether to show the description
+	 */
+	showDescription?: boolean;
+}
+
+export interface ColumnStyle {
+	/**
+	 * The width of the field column.
+	 */
+	width?: string | number;
+
+	/**
+	 * The minimum width of the field column.
+	 */
+	maxWidth?: string | number;
+
+	/**
+	 * The maximum width of the field column.
+	 */
+	minWidth?: string | number;
+}
+
+export type Density = 'compact' | 'balanced' | 'comfortable';
+
+export interface ViewTable extends ViewBase {
+	type: 'table';
+
+	layout?: {
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
+
+		/**
+		 * The density of the view.
+		 */
+		density?: Density;
+	};
+}
+
+export interface ViewList extends ViewBase {
+	type: 'list';
+}
+
+export interface ViewGrid extends ViewBase {
+	type: 'grid';
+
+	layout?: {
+		/**
+		 * The fields to use as badge fields.
+		 */
+		badgeFields?: string[];
+
+		/**
+		 * The preview size of the grid.
+		 */
+		previewSize?: number;
+	};
+}
+
+export type View = ViewList | ViewGrid | ViewTable;
+
+interface ActionBase< Item > {
+	/**
+	 * The unique identifier of the action.
+	 */
+	id: string;
+
+	/**
+	 * The label of the action.
+	 * In case we want to adjust the label based on the selected items,
+	 * a function can be provided.
+	 */
+	label: string | ( ( items: Item[] ) => string );
+
+	/**
+	 * The icon of the action. (Either a string or an SVG element)
+	 * This should be IconType from the components package
+	 * but that import is breaking typescript build for the moment.
+	 */
+	icon?: any;
+
+	/**
+	 * Whether the action is disabled.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether the action is destructive.
+	 */
+	isDestructive?: boolean;
+
+	/**
+	 * Whether the action is a primary action.
+	 */
+	isPrimary?: boolean;
+
+	/**
+	 * Whether the item passed as an argument supports the current action.
+	 */
+	isEligible?: ( item: Item ) => boolean;
+
+	/**
+	 * Whether the action can be used as a bulk action.
+	 */
+	supportsBulk?: boolean;
+
+	/**
+	 * The context in which the action is visible.
+	 * This is only a "meta" information for now.
+	 */
+	context?: 'list' | 'single';
+}
+
+export interface RenderModalProps< Item > {
+	items: Item[];
+	closeModal?: () => void;
+	onActionPerformed?: ( items: Item[] ) => void;
+}
+
+export interface ActionModal< Item > extends ActionBase< Item > {
+	/**
+	 * Modal to render when the action is triggered.
+	 */
+	RenderModal: ( {
+		items,
+		closeModal,
+		onActionPerformed,
+	}: RenderModalProps< Item > ) => ReactElement;
+
+	/**
+	 * Whether to hide the modal header.
+	 */
+	hideModalHeader?: boolean;
+
+	/**
+	 * The header of the modal.
+	 */
+	modalHeader?: string;
+}
+
+export interface ActionButton< Item > extends ActionBase< Item > {
+	/**
+	 * The callback to execute when the action is triggered.
+	 */
+	callback: (
+		items: Item[],
+		context: {
+			registry: any;
+			onActionPerformed?: ( items: Item[] ) => void;
+		}
+	) => void;
+}
+
+export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
+
+export interface ViewBaseProps< Item > {
+	actions: Action< Item >[];
+	data: Item[];
+	fields: NormalizedField< Item >[];
+	getItemId: ( item: Item ) => string;
+	isLoading?: boolean;
+	onChangeView: ( view: View ) => void;
+	onChangeSelection: SetSelection;
+	selection: string[];
+	setOpenedFilter: ( fieldId: string ) => void;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+	view: View;
+}
+
+export interface ViewTableProps< Item > extends ViewBaseProps< Item > {
+	view: ViewTable;
+}
+
+export interface ViewListProps< Item > extends ViewBaseProps< Item > {
+	view: ViewList;
+}
+
+export interface ViewGridProps< Item > extends ViewBaseProps< Item > {
+	view: ViewGrid;
+}
+
+export type ViewProps< Item > =
+	| ViewTableProps< Item >
+	| ViewGridProps< Item >
+	| ViewListProps< Item >;
+
+export interface SupportedLayouts {
+	list?: Omit< ViewList, 'type' >;
+	grid?: Omit< ViewGrid, 'type' >;
+	table?: Omit< ViewTable, 'type' >;
+}
+
+export type SimpleFormField = {
+	id: string;
+	layout?: 'regular' | 'panel';
+	labelPosition?: 'side' | 'top' | 'none';
+};
+
+export type CombinedFormField = {
+	id: string;
+	label?: string;
+	layout?: 'regular' | 'panel';
+	labelPosition?: 'side' | 'top' | 'none';
+	children: Array< FormField | string >;
+};
+
+export type FormField = SimpleFormField | CombinedFormField;
+
+/**
+ * The form configuration.
+ */
+export type Form = {
+	type?: 'regular' | 'panel';
+	fields?: Array< FormField | string >;
+	labelPosition?: 'side' | 'top' | 'none';
+};
+
+export interface DataFormProps< Item > {
+	data: Item;
+	fields: Field< Item >[];
+	form: Form;
+	onChange: ( value: Record< string, any > ) => void;
+}
+
+export interface FieldLayoutProps< Item > {
+	data: Item;
+	field: FormField;
+	onChange: ( value: any ) => void;
+	hideLabelFromVision?: boolean;
+}
diff --git a/packages/dataviews/src/utils.ts b/packages/dataviews/src/utils.ts
new file mode 100644
index 00000000000000..408288c5174897
--- /dev/null
+++ b/packages/dataviews/src/utils.ts
@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import {
+	ALL_OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+} from './constants';
+import type { NormalizedField } from './types';
+
+export function sanitizeOperators< Item >( field: NormalizedField< Item > ) {
+	let operators = field.filterBy?.operators;
+
+	// Assign default values.
+	if ( ! operators || ! Array.isArray( operators ) ) {
+		operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
+	}
+
+	// Make sure only valid operators are used.
+	operators = operators.filter( ( operator ) =>
+		ALL_OPERATORS.includes( operator )
+	);
+
+	// Do not allow mixing single & multiselection operators.
+	// Remove multiselection operators if any of the single selection ones is present.
+	if (
+		operators.includes( OPERATOR_IS ) ||
+		operators.includes( OPERATOR_IS_NOT )
+	) {
+		operators = operators.filter( ( operator ) =>
+			[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )
+		);
+	}
+
+	return operators;
+}
diff --git a/packages/dataviews/src/validation.ts b/packages/dataviews/src/validation.ts
new file mode 100644
index 00000000000000..bcc9a15908ff59
--- /dev/null
+++ b/packages/dataviews/src/validation.ts
@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { normalizeFields } from './normalize-fields';
+import type { Field, Form } from './types';
+
+/**
+ * Whether or not the given item's value is valid according to the fields and form config.
+ *
+ * @param item   The item to validate.
+ * @param fields Fields config.
+ * @param form   Form config.
+ *
+ * @return A boolean indicating if the item is valid (true) or not (false).
+ */
+export function isItemValid< Item >(
+	item: Item,
+	fields: Field< Item >[],
+	form: Form
+): boolean {
+	const _fields = normalizeFields(
+		fields.filter( ( { id } ) => !! form.fields?.includes( id ) )
+	);
+	return _fields.every( ( field ) => {
+		return field.isValid( item, { elements: field.elements } );
+	} );
+}
diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
new file mode 100644
index 00000000000000..78e68b5a7c98b4
--- /dev/null
+++ b/packages/dataviews/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../data" },
+		{ "path": "../element" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
+		{ "path": "../warning" }
+	],
+	"include": [ "src" ]
+}
diff --git a/packages/date/.npmrc b/packages/date/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/date/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index b3d9bb64e5216c..21ddf975064034 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 4.17.0 (2022-09-13)
 
-## Deprecations
+### Deprecations
 
 -   `__experimentalGetSettings` has been renamed to `getSettings`.
 
@@ -59,7 +163,7 @@
 
 ## 3.15.0 (2021-04-06)
 
-### New Feature
+### New Features
 
 -   Bundle type definitions.
 
@@ -84,7 +188,7 @@
 
 ## 2.1.0 (2018-10-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   Marked getSettings as experimental
 
@@ -96,6 +200,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/date/README.md b/packages/date/README.md
index 1f43162b538f2e..4f0a64c24aa713 100644
--- a/packages/date/README.md
+++ b/packages/date/README.md
@@ -39,8 +39,7 @@ _Returns_
 
 Formats a date (like `wp_date()` in PHP), translating it into site's locale.
 
-Backward Compatibility Notice: if `timezone` is set to `true`, the function
-behaves like `gmdateI18n`.
+Backward Compatibility Notice: if `timezone` is set to `true`, the function behaves like `gmdateI18n`.
 
 _Related_
 
@@ -51,7 +50,7 @@ _Parameters_
 
 -   _dateFormat_ `string`: PHP-style formatting string. See php.net/date.
 -   _dateValue_ `Moment | Date | string | undefined`: Date object or string, parsable by moment.js.
--   _timezone_ `string | number | boolean | undefined`: Timezone to output result in or a UTC offset. Defaults to timezone from site. Notice: `boolean` is effectively deprecated, but still supported for backward compatibility reasons.
+-   _timezone_ `string | number | boolean | undefined=`: Timezone to output result in or a UTC offset. Defaults to timezone from site. Notice: `boolean` is effectively deprecated, but still supported for backward compatibility reasons.
 
 _Returns_
 
@@ -76,7 +75,7 @@ Create and return a JavaScript Date Object from a date string in the WP timezone
 
 _Parameters_
 
--   _dateString_ `string?`: Date formatted in the WP timezone.
+-   _dateString_ `?string`: Date formatted in the WP timezone.
 
 _Returns_
 
@@ -105,8 +104,7 @@ _Returns_
 
 ### gmdateI18n
 
-Formats a date (like `wp_date()` in PHP), translating it into site's locale
-and using the UTC timezone.
+Formats a date (like `wp_date()` in PHP), translating it into site's locale and using the UTC timezone.
 
 _Parameters_
 
@@ -117,6 +115,19 @@ _Returns_
 
 -   `string`: Formatted date.
 
+### humanTimeDiff
+
+Returns a human-readable time difference between two dates, like human_time_diff() in PHP.
+
+_Parameters_
+
+-   _from_ `Moment | Date | string`: From date, in the WP timezone.
+-   _to_ `Moment | Date | string | undefined`: To date, formatted in the WP timezone.
+
+_Returns_
+
+-   `string`: Human-readable time difference.
+
 ### isInTheFuture
 
 Check whether a date is considered in the future according to the WordPress settings.
diff --git a/packages/date/package.json b/packages/date/package.json
index ca3fff1e009119..0a1052f13d95fc 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,17 +19,19 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/deprecated": "file:../deprecated",
-		"moment": "^2.22.1",
-		"moment-timezone": "^0.5.31"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/deprecated": "*",
+		"moment": "^2.29.4",
+		"moment-timezone": "^0.5.40"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/date/src/index.js b/packages/date/src/index.js
index 2417d1b5edf853..8d8f53fd8bc10f 100644
--- a/packages/date/src/index.js
+++ b/packages/date/src/index.js
@@ -31,9 +31,10 @@ import deprecated from '@wordpress/deprecated';
 
 /**
  * @typedef TimezoneConfig
- * @property {string} offset Offset setting.
- * @property {string} string The timezone as a string (e.g., `'America/Los_Angeles'`).
- * @property {string} abbr   Abbreviation for the timezone.
+ * @property {string} offset          Offset setting.
+ * @property {string} offsetFormatted Offset setting with decimals formatted to minutes.
+ * @property {string} string          The timezone as a string (e.g., `'America/Los_Angeles'`).
+ * @property {string} abbr            Abbreviation for the timezone.
  */
 
 /* eslint-disable jsdoc/valid-types */
@@ -63,8 +64,8 @@ const WP_ZONE = 'WP';
 // See: https://en.wikipedia.org/wiki/ISO_8601#Time_offsets_from_UTC
 const VALID_UTC_OFFSET = /^[+-][0-1][0-9](:?[0-9][0-9])?$/;
 
-// Changes made here will likely need to be made in `lib/client-assets.php` as
-// well because it uses the `setSettings()` function to change these settings.
+// Changes made here will likely need to be synced with Core in the file
+// src/wp-includes/script-loader.php in `wp_default_packages_inline_scripts()`.
 /** @type {DateSettings} */
 let settings = {
 	l10n: {
@@ -132,7 +133,7 @@ let settings = {
 		datetime: 'F j, Y g: i a',
 		datetimeAbbreviated: 'M j, Y g: i a',
 	},
-	timezone: { offset: '0', string: '', abbr: '' },
+	timezone: { offset: '0', offsetFormatted: '0', string: '', abbr: '' },
 };
 
 /**
@@ -226,15 +227,33 @@ export function __experimentalGetSettings() {
 }
 
 function setupWPTimezone() {
-	// Create WP timezone based off dateSettings.
-	momentLib.tz.add(
-		momentLib.tz.pack( {
-			name: WP_ZONE,
-			abbrs: [ WP_ZONE ],
-			untils: [ null ],
-			offsets: [ -settings.timezone.offset * 60 || 0 ],
-		} )
-	);
+	// Get the current timezone settings from the WP timezone string.
+	const currentTimezone = momentLib.tz.zone( settings.timezone.string );
+
+	// Check to see if we have a valid TZ data, if so, use it for the custom WP_ZONE timezone, otherwise just use the offset.
+	if ( currentTimezone ) {
+		// Create WP timezone based off settings.timezone.string.  We need to include the additional data so that we
+		// don't lose information about daylight savings time and other items.
+		// See https://github.com/WordPress/gutenberg/pull/48083
+		momentLib.tz.add(
+			momentLib.tz.pack( {
+				name: WP_ZONE,
+				abbrs: currentTimezone.abbrs,
+				untils: currentTimezone.untils,
+				offsets: currentTimezone.offsets,
+			} )
+		);
+	} else {
+		// Create WP timezone based off dateSettings.
+		momentLib.tz.add(
+			momentLib.tz.pack( {
+				name: WP_ZONE,
+				abbrs: [ WP_ZONE ],
+				untils: [ null ],
+				offsets: [ -settings.timezone.offset * 60 || 0 ],
+			} )
+		);
+	}
 }
 
 // Date constants.
@@ -506,15 +525,15 @@ export function gmdate( dateFormat, dateValue = new Date() ) {
  * Backward Compatibility Notice: if `timezone` is set to `true`, the function
  * behaves like `gmdateI18n`.
  *
- * @param {string}                                dateFormat PHP-style formatting string.
- *                                                           See php.net/date.
- * @param {Moment | Date | string | undefined}    dateValue  Date object or string, parsable by
- *                                                           moment.js.
- * @param {string | number | boolean | undefined} timezone   Timezone to output result in or a
- *                                                           UTC offset. Defaults to timezone from
- *                                                           site. Notice: `boolean` is effectively
- *                                                           deprecated, but still supported for
- *                                                           backward compatibility reasons.
+ * @param {string}                                 dateFormat PHP-style formatting string.
+ *                                                            See php.net/date.
+ * @param {Moment | Date | string | undefined}     dateValue  Date object or string, parsable by
+ *                                                            moment.js.
+ * @param {string | number | boolean | undefined=} timezone   Timezone to output result in or a
+ *                                                            UTC offset. Defaults to timezone from
+ *                                                            site. Notice: `boolean` is effectively
+ *                                                            deprecated, but still supported for
+ *                                                            backward compatibility reasons.
  *
  * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
  * @see https://en.wikipedia.org/wiki/ISO_8601#Time_offsets_from_UTC
@@ -569,7 +588,7 @@ export function isInTheFuture( dateValue ) {
 /**
  * Create and return a JavaScript Date Object from a date string in the WP timezone.
  *
- * @param {string?} dateString Date formatted in the WP timezone.
+ * @param {?string} dateString Date formatted in the WP timezone.
  *
  * @return {Date} Date
  */
@@ -581,6 +600,20 @@ export function getDate( dateString ) {
 	return momentLib.tz( dateString, WP_ZONE ).toDate();
 }
 
+/**
+ * Returns a human-readable time difference between two dates, like human_time_diff() in PHP.
+ *
+ * @param {Moment | Date | string}             from From date, in the WP timezone.
+ * @param {Moment | Date | string | undefined} to   To date, formatted in the WP timezone.
+ *
+ * @return {string} Human-readable time difference.
+ */
+export function humanTimeDiff( from, to ) {
+	const fromMoment = momentLib.tz( from, WP_ZONE );
+	const toMoment = to ? momentLib.tz( to, WP_ZONE ) : momentLib.tz( WP_ZONE );
+	return fromMoment.from( toMoment );
+}
+
 /**
  * Creates a moment instance using the given timezone or, if none is provided, using global settings.
  *
diff --git a/packages/date/src/test/index.js b/packages/date/src/test/index.js
index 36414949af16a8..3c52aae1fbd0df 100644
--- a/packages/date/src/test/index.js
+++ b/packages/date/src/test/index.js
@@ -10,6 +10,7 @@ import {
 	gmdateI18n,
 	isInTheFuture,
 	setSettings,
+	humanTimeDiff,
 } from '../';
 
 describe( 'isInTheFuture', () => {
@@ -620,4 +621,42 @@ describe( 'Moment.js Localization', () => {
 		// Restore default settings.
 		setSettings( settings );
 	} );
+
+	describe( 'humanTimeDiff', () => {
+		it( 'should return human readable time differences in the past', () => {
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-28T12:00:00.000Z'
+				)
+			).toBe( 'an hour ago' );
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-28T13:00:00.000Z'
+				)
+			).toBe( '2 hours ago' );
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-30T13:00:00.000Z'
+				)
+			).toBe( '2 days ago' );
+		} );
+
+		it( 'should return human readable time differences in the future', () => {
+			// Future.
+			const now = new Date();
+			const twoHoursLater = new Date(
+				now.getTime() + 2 * 60 * 60 * 1000
+			);
+			expect( humanTimeDiff( twoHoursLater ) ).toBe( 'in 2 hours' );
+
+			const twoDaysLater = new Date(
+				now.getTime() + 2 * 24 * 60 * 60 * 1000
+			); // Adding 2 days in milliseconds
+
+			expect( humanTimeDiff( twoDaysLater ) ).toBe( 'in 2 days' );
+		} );
+	} );
 } );
diff --git a/packages/date/tsconfig.json b/packages/date/tsconfig.json
index f108b30216124f..0c9e6d5ed02b0b 100644
--- a/packages/date/tsconfig.json
+++ b/packages/date/tsconfig.json
@@ -1,9 +1,10 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types",
-		"noUnusedParameters": false
+		"declarationDir": "build-types"
 	},
+	"references": [ { "path": "../deprecated" } ],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index cda2cb942b6ebe..4784e2105f6fb1 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,138 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+### Enhancements
+
+-   Detection of magic comments is now done before minification ([#65582](https://github.com/WordPress/gutenberg/pull/65582)).
+
+### Bug Fixes
+
+-   Fix a bug where cycles in dependent modules could enter infinite recursion ([#65291](https://github.com/WordPress/gutenberg/pull/65291)).
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/dependency-extraction-webpack-plugin@5.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.9.0 (2024-05-16)
+
+## 5.8.0 (2024-05-02)
+
+## 5.7.0 (2024-04-19)
+
+## 5.6.0 (2024-04-03)
+
+## 5.5.0 (2024-03-21)
+
+## 5.4.0 (2024-03-06)
+
+## 5.3.0 (2024-02-21)
+
+## 5.2.0 (2024-02-09)
+
+### Bug Fixes
+
+-   Fix import type field in script module asset files ([#58770](https://github.com/WordPress/gutenberg/pull/58770)).
+
+## 5.1.0 (2024-01-24)
+
+## 5.0.0 (2024-01-10)
+
+### Breaking Changes
+
+-   Drop support for webpack 4.
+-   Drop support for Node.js versions < 18.
+
+### New Features
+
+-   Add support for producing module-compatible asset files ([#57199](https://github.com/WordPress/gutenberg/pull/57199)).
+
+## 4.31.0 (2023-12-13)
+
+## 4.30.0 (2023-11-29)
+
+## 4.29.0 (2023-11-16)
+
+## 4.28.0 (2023-11-02)
+
+## 4.27.0 (2023-10-18)
+
+## 4.26.0 (2023-10-05)
+
+## 4.25.0 (2023-09-20)
+
+## 4.24.0 (2023-08-31)
+
+## 4.23.0 (2023-08-16)
+
+## 4.22.0 (2023-08-10)
+
+## 4.21.0 (2023-07-20)
+
+## 4.20.0 (2023-07-05)
+
+## 4.19.0 (2023-06-23)
+
+## 4.18.0 (2023-06-07)
+
+## 4.17.0 (2023-05-24)
+
+## 4.16.0 (2023-05-10)
+
+## 4.15.0 (2023-04-26)
+
+## 4.14.0 (2023-04-12)
+
+## 4.13.0 (2023-03-29)
+
+## 4.12.0 (2023-03-15)
+
+## 4.11.0 (2023-03-01)
+
+## 4.10.0 (2023-02-15)
+
+### Bug Fixes
+
+-   The bundled `json2php` dependency has been upgraded from requiring `^0.0.5` to `^0.0.7` ([#47831](https://github.com/WordPress/gutenberg/pull/47831)).
+
+## 4.9.0 (2023-02-01)
+
+## 4.8.0 (2023-01-11)
+
+## 4.7.0 (2023-01-02)
+
+## 4.6.0 (2022-12-14)
+
 ## 4.5.0 (2022-11-16)
 
 ## 4.4.0 (2022-11-02)
@@ -18,7 +150,7 @@
 
 ## 4.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -30,7 +162,7 @@
 
 ## 3.5.0 (2022-05-18)
 
-### Bug Fix
+### Bug Fixes
 
 -   Use OpenSSL provider supported in Node 17+ when calling `crypto.createHash` ([#40503](https://github.com/WordPress/gutenberg/pull/40503)).
 -   Add new line at the end of generated `*.asset.php` files ([#40753](https://github.com/WordPress/gutenberg/pull/40753)).
@@ -48,13 +180,13 @@
 
 ## 2.9.0 (2020-12-17)
 
-### New feature
+### New Features
 
 -   Make the plugin compatible with webpack 5.
 
 ## 2.7.0 (2020-06-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#22498](https://github.com/WordPress/gutenberg/pull/22498))
 
@@ -84,6 +216,6 @@
 
 ## 1.0.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Introduce the `@wordpress/dependency-extraction-webpack-plugin` package.
diff --git a/packages/dependency-extraction-webpack-plugin/README.md b/packages/dependency-extraction-webpack-plugin/README.md
index 0885a38e1c8251..9e6b183672f86d 100644
--- a/packages/dependency-extraction-webpack-plugin/README.md
+++ b/packages/dependency-extraction-webpack-plugin/README.md
@@ -2,11 +2,15 @@
 
 This webpack plugin serves two purposes:
 
--   Externalize dependencies that are available as script dependencies on modern WordPress sites.
--   Add an asset file for each entry point that declares an object with the list of WordPress script dependencies for the entry point. The asset file also contains the current version calculated for the current source code.
+-   Externalize dependencies that are available as shared scripts or modules on WordPress sites.
+-   Add an asset file for each entry point that declares an object with the list of WordPress script or module dependencies for the entry point. The asset file also contains the current version calculated for the current source code.
 
 This allows JavaScript bundles produced by webpack to leverage WordPress style dependency sharing without an error-prone process of manually maintaining a dependency list.
 
+Version 5 of this plugin adds support for module bundling. [Webpack's `output.module` option](https://webpack.js.org/configuration/output/#outputmodule) should
+be used to opt-in to this behavior. This plugin will adapt it's behavior based on the
+`output.module` option, producing an asset file suitable for use with the WordPress Module API.
+
 Consult the [webpack website](https://webpack.js.org) for additional information on webpack concepts.
 
 ## Installation
@@ -17,7 +21,7 @@ Install the module
 npm install @wordpress/dependency-extraction-webpack-plugin --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It also requires webpack 4.8.3 and newer. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It also requires webpack 5.0.0 or newer. It is not compatible with older versions.
 
 ## Usage
 
@@ -39,7 +43,7 @@ module.exports = {
 
 ```js
 const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
-const config = {
+const webpackConfig = {
 	...defaultConfig,
 	plugins: [
 		...defaultConfig.plugins.filter(
@@ -56,19 +60,21 @@ const config = {
 };
 ```
 
-Each entry point in the webpack bundle will include an asset file that declares the WordPress script dependencies that should be enqueued. Such file also contains the unique version hash calculated based on the file content.
+### Behavior with scripts
+
+Each entry point in the webpack bundle will include an asset file that declares the WordPress script dependencies that should be enqueued. This file also contains the unique version hash calculated based on the file content.
 
 For example:
 
 ```
 // Source file entrypoint.js
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
 
 // Webpack will produce the output output/entrypoint.js
 /* bundled JavaScript output */
 
 // Webpack will also produce output/entrypoint.asset.php declaring script dependencies
-<?php return array('dependencies' => array('wp-element'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
+<?php return array('dependencies' => array('react'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
 ```
 
 By default, the following module requests are handled:
@@ -88,6 +94,68 @@ By default, the following module requests are handled:
 
 This plugin is compatible with `externals`, but they may conflict. For example, adding `{ externals: { '@wordpress/blob': 'wp.blob' } }` to webpack configuration will effectively hide the `@wordpress/blob` module from the plugin and it will not be included in dependency lists.
 
+### Behavior with script modules
+
+**Warning:** Script modules support is considered experimental at this time.
+
+This section describes the behavior of this package to bundle ECMAScript modules and generate asset
+files suitable for use with the WordPress Script Modules API.
+
+Some of this plugin's options change, and webpack requires configuration to output script modules. Refer to
+[webpack's documentation](https://webpack.js.org/configuration/output/#outputmodule) for up-to-date details.
+
+```js
+const webpackConfig = {
+	...defaultConfig,
+
+	// These lines are necessary to enable module compilation at time-of-writing:
+	output: { module: true },
+	experiments: { outputModule: true },
+
+	plugins: [
+		...defaultConfig.plugins.filter(
+			( plugin ) =>
+				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
+		),
+		new DependencyExtractionWebpackPlugin( {
+			// With modules, use `requestToExternalModule`:
+			requestToExternalModule( request ) {
+				if ( request === 'my-registered-module' ) {
+					return request;
+				}
+			},
+		} ),
+	],
+};
+```
+
+Each entry point in the webpack bundle will include an asset file that declares the WordPress script module dependencies that should be enqueued. This file also contains the unique version hash calculated based on the file content.
+
+For example:
+
+```
+// Source file entrypoint.js
+import { store, getContext } from '@wordpress/interactivity';
+
+// Webpack will produce the output output/entrypoint.js
+/* bundled JavaScript output */
+
+// Webpack will also produce output/entrypoint.asset.php declaring script dependencies
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
+```
+
+By default, the following script module requests are handled:
+
+| Request                      |
+| ---------------------------- |
+| `@wordpress/interactivity  ` |
+
+(`@wordpress/interactivity` is currently the only available WordPress script module.)
+
+**Note:** This plugin overlaps with the functionality provided by [webpack `externals`](https://webpack.js.org/configuration/externals). This plugin is intended to extract script module identifiers from bundle compilation so that a list of script module dependencies does not need to be manually maintained. If you don't need to extract a list of script module dependencies, use the `externals` option directly.
+
+This plugin is compatible with `externals`, but they may conflict. For example, adding `{ externals: { '@wordpress/blob': 'wp.blob' } }` to webpack configuration will effectively hide the `@wordpress/blob` module from the plugin and it will not be included in dependency lists.
+
 #### Options
 
 An object can be passed to the constructor to customize the behavior, for example:
@@ -142,6 +210,8 @@ Pass `useDefaults: false` to disable the default request handling.
 
 Force `wp-polyfill` to be included in each entry point's dependency list. This would be the same as adding `import '@wordpress/polyfill';` to each entry point.
 
+**Note**: This option is not available with script modules.
+
 ##### `externalizedReport`
 
 -   Type: boolean | string
@@ -152,6 +222,8 @@ You can provide a filename, or set it to `true` to report to a default `external
 
 ##### `requestToExternal`
 
+**Note**: This option is not available with script modules. See [`requestToExternalModule`](#requestToExternalModule) for module usage.
+
 -   Type: function
 
 `requestToExternal` allows the module handling to be customized. The function should accept a module request string and may return a string representing the global variable to use. An array of strings may be used to access globals via an object path, e.g. `wp.i18n` may be represented as `[ 'wp', 'i18n' ]`.
@@ -179,8 +251,46 @@ module.exports = {
 };
 ```
 
+##### `requestToExternalModule`
+
+**Note**: This option is only available with script modules. See [`requestToExternal`](#requestToExternal) for script usage.
+
+-   Type: function
+
+`requestToExternalModule` allows the script module handling to be customized. The function should accept a script module request string and may return a string representing the script module to use. Often, the script module will have the same name.
+
+`requestToExternalModule` provided via configuration has precedence over default external handling. Unhandled requests will be handled by the default unless `useDefaults` is set to `false`.
+
+```js
+/**
+ * Externalize 'my-module'
+ *
+ * @param {string} request Requested script module
+ *
+ * @return {(string|boolean|undefined)} Script module ID
+ */
+function requestToExternalModule( request ) {
+	// Handle imports like `import myModule from 'my-module'`
+	if ( request === 'my-module' ) {
+		// Import should be of the form `import { something } from "myModule";` in the final bundle.
+		return 'myModule';
+	}
+
+	// If the script module ID in source is the same as the external script module, `true` can be returned.
+	return request === 'external-module-id-no-change-required';
+}
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( { requestToExternalModule } ),
+	],
+};
+```
+
 ##### `requestToHandle`
 
+**Note**: This option is not available with script modules. It has no corresponding module configuration.
+
 -   Type: function
 
 All of the external modules handled by the plugin are expected to be WordPress script dependencies
@@ -207,7 +317,7 @@ function requestToHandle( request ) {
 }
 
 module.exports = {
-	plugins: [ new DependencyExtractionWebpackPlugin( { requestToExternal } ) ],
+	plugins: [ new DependencyExtractionWebpackPlugin( { requestToHandle } ) ],
 };
 ```
 
@@ -233,6 +343,19 @@ $script_url = plugins_url( $script_path, __FILE__ );
 wp_enqueue_script( 'script', $script_url, $script_asset['dependencies'], $script_asset['version'] );
 ```
 
+Or with modules (the Script Module API is only available in WordPress > 6.5):
+
+```php
+$module_path       = 'path/to/module.js';
+$module_asset_path = 'path/to/module.asset.php';
+$module_asset      = file_exists( $module_asset_path )
+	? require( $module_asset_path )
+	: array( 'dependencies' => array(), 'version' => filemtime( $module_path ) );
+$module_url = plugins_url( $module_path, __FILE__ );
+wp_register_script_module( 'my-module', $module_url, $module_asset['dependencies'], $module_asset['version'] );
+wp_enqueue_script_module( 'my-module' );
+```
+
 ## 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.
diff --git a/packages/dependency-extraction-webpack-plugin/lib/.eslintrc.json b/packages/dependency-extraction-webpack-plugin/lib/.eslintrc.json
index 305ba4347aedd3..5e1457134b16a7 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/.eslintrc.json
+++ b/packages/dependency-extraction-webpack-plugin/lib/.eslintrc.json
@@ -1,6 +1,4 @@
 {
-	// Use the default eslint parser. Prevent babel transforms.
-	"parser": "espree",
 	"env": {
 		"node": true
 	}
diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
index 581274c3684f93..8bc7cb29312161 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -3,10 +3,7 @@
  */
 const path = require( 'path' );
 const webpack = require( 'webpack' );
-// In webpack 5 there is a `webpack.sources` field but for webpack 4 we have to fallback to the `webpack-sources` package.
-const { RawSource } = webpack.sources || require( 'webpack-sources' );
 const json2php = require( 'json2php' );
-const isWebpack4 = webpack.version.startsWith( '4.' );
 const { createHash } = webpack.util;
 
 /**
@@ -14,9 +11,13 @@ const { createHash } = webpack.util;
  */
 const {
 	defaultRequestToExternal,
+	defaultRequestToExternalModule,
 	defaultRequestToHandle,
 } = require( './util' );
 
+const { RawSource } = webpack.sources;
+const { AsyncDependenciesBlock } = webpack;
+
 const defaultExternalizedReportFileName = 'externalized-dependencies.json';
 
 class DependencyExtractionWebpackPlugin {
@@ -34,38 +35,65 @@ class DependencyExtractionWebpackPlugin {
 			options
 		);
 
-		/*
+		/**
 		 * Track requests that are externalized.
 		 *
 		 * Because we don't have a closed set of dependencies, we need to track what has
 		 * been externalized so we can recognize them in a later phase when the dependency
 		 * lists are generated.
+		 *
+		 * @type {Set<string>}
 		 */
 		this.externalizedDeps = new Set();
 
-		// Offload externalization work to the ExternalsPlugin.
-		this.externalsPlugin = new webpack.ExternalsPlugin(
-			'window',
-			isWebpack4
-				? this.externalizeWpDeps.bind( this )
-				: this.externalizeWpDepsV5.bind( this )
-		);
+		/**
+		 * Should we use modules. This will be set later to match webpack's
+		 * output.module option.
+		 *
+		 * @type {boolean}
+		 */
+		this.useModules = false;
 	}
 
-	externalizeWpDeps( _context, request, callback ) {
+	/**
+	 * @param {webpack.ExternalItemFunctionData}                             data
+	 * @param { ( err?: null | Error, result?: string | string[] ) => void } callback
+	 */
+	externalizeWpDeps( { request }, callback ) {
 		let externalRequest;
 
-		// Handle via options.requestToExternal first.
-		if ( typeof this.options.requestToExternal === 'function' ) {
-			externalRequest = this.options.requestToExternal( request );
-		}
+		try {
+			// Handle via options.requestToExternal(Module)  first.
+			if ( this.useModules ) {
+				if (
+					typeof this.options.requestToExternalModule === 'function'
+				) {
+					externalRequest =
+						this.options.requestToExternalModule( request );
+
+					// requestToExternalModule allows a boolean shorthand
+					if ( externalRequest === false ) {
+						externalRequest = undefined;
+					}
+					if ( externalRequest === true ) {
+						externalRequest = request;
+					}
+				}
+			} else if ( typeof this.options.requestToExternal === 'function' ) {
+				externalRequest = this.options.requestToExternal( request );
+			}
 
-		// Cascade to default if unhandled and enabled.
-		if (
-			typeof externalRequest === 'undefined' &&
-			this.options.useDefaults
-		) {
-			externalRequest = defaultRequestToExternal( request );
+			// Cascade to default if unhandled and enabled.
+			if (
+				typeof externalRequest === 'undefined' &&
+				this.options.useDefaults
+			) {
+				externalRequest = this.useModules
+					? defaultRequestToExternalModule( request )
+					: defaultRequestToExternal( request );
+			}
+		} catch ( err ) {
+			return callback( err );
 		}
 
 		if ( externalRequest ) {
@@ -77,10 +105,10 @@ class DependencyExtractionWebpackPlugin {
 		return callback();
 	}
 
-	externalizeWpDepsV5( { context, request }, callback ) {
-		return this.externalizeWpDeps( context, request, callback );
-	}
-
+	/**
+	 * @param {string} request
+	 * @return {string} Mapped dependency name
+	 */
 	mapRequestToDependency( request ) {
 		// Handle via options.requestToHandle first.
 		if ( typeof this.options.requestToHandle === 'function' ) {
@@ -102,6 +130,10 @@ class DependencyExtractionWebpackPlugin {
 		return request;
 	}
 
+	/**
+	 * @param {any} asset Asset Data
+	 * @return {string} Stringified asset data suitable for output
+	 */
 	stringify( asset ) {
 		if ( this.options.outputFormat === 'php' ) {
 			return `<?php return ${ json2php(
@@ -112,30 +144,99 @@ class DependencyExtractionWebpackPlugin {
 		return JSON.stringify( asset );
 	}
 
+	/** @type {webpack.WebpackPluginInstance['apply']} */
 	apply( compiler ) {
+		this.useModules = Boolean( compiler.options.output?.module );
+
+		/**
+		 * Offload externalization work to the ExternalsPlugin.
+		 * @type {webpack.ExternalsPlugin}
+		 */
+		this.externalsPlugin = new webpack.ExternalsPlugin(
+			this.useModules ? 'import' : 'window',
+			this.externalizeWpDeps.bind( this )
+		);
+
 		this.externalsPlugin.apply( compiler );
 
-		if ( isWebpack4 ) {
-			compiler.hooks.emit.tap( this.constructor.name, ( compilation ) =>
-				this.addAssets( compilation )
+		compiler.hooks.thisCompilation.tap(
+			this.constructor.name,
+			( compilation ) => {
+				compilation.hooks.processAssets.tap(
+					{
+						name: this.constructor.name,
+						stage: compiler.webpack.Compilation
+							.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY,
+					},
+					() => this.checkForMagicComments( compilation )
+				);
+				compilation.hooks.processAssets.tap(
+					{
+						name: this.constructor.name,
+						stage: compiler.webpack.Compilation
+							.PROCESS_ASSETS_STAGE_ANALYSE,
+					},
+					() => this.addAssets( compilation )
+				);
+			}
+		);
+	}
+
+	/**
+	 * Check for magic comments before minification, so minification doesn't have to preserve them.
+	 * @param {webpack.Compilation} compilation
+	 */
+	checkForMagicComments( compilation ) {
+		// Accumulate all entrypoint chunks, some of them shared
+		const entrypointChunks = new Set();
+		for ( const entrypoint of compilation.entrypoints.values() ) {
+			for ( const chunk of entrypoint.chunks ) {
+				entrypointChunks.add( chunk );
+			}
+		}
+
+		// Process each entrypoint chunk independently
+		for ( const chunk of entrypointChunks ) {
+			const chunkFiles = Array.from( chunk.files );
+
+			const jsExtensionRegExp = this.useModules ? /\.m?js$/i : /\.js$/i;
+
+			const chunkJSFile = chunkFiles.find( ( f ) =>
+				jsExtensionRegExp.test( f )
 			);
-		} else {
-			compiler.hooks.thisCompilation.tap(
-				this.constructor.name,
-				( compilation ) => {
-					compilation.hooks.processAssets.tap(
-						{
-							name: this.constructor.name,
-							stage: compiler.webpack.Compilation
-								.PROCESS_ASSETS_STAGE_ANALYSE,
-						},
-						() => this.addAssets( compilation )
-					);
+			if ( ! chunkJSFile ) {
+				// There's no JS file in this chunk, no work for us. Typically a `style.css` from cache group.
+				continue;
+			}
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const processContentsForMagicComments = ( content ) => {
+				const magicComments = [];
+
+				if ( content.includes( '/* wp:polyfill */' ) ) {
+					magicComments.push( 'wp-polyfill' );
 				}
-			);
+
+				return magicComments;
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				const wpMagicComments =
+					processContentsForMagicComments( content );
+				compilation.updateAsset( filename, ( v ) => v, {
+					wpMagicComments,
+				} );
+			} );
 		}
 	}
 
+	/** @param {webpack.Compilation} compilation */
 	addAssets( compilation ) {
 		const {
 			combineAssets,
@@ -174,28 +275,53 @@ class DependencyExtractionWebpackPlugin {
 		for ( const chunk of entrypointChunks ) {
 			const chunkFiles = Array.from( chunk.files );
 
-			const chunkJSFile = chunkFiles.find( ( f ) => /\.js$/i.test( f ) );
+			const jsExtensionRegExp = this.useModules ? /\.m?js$/i : /\.js$/i;
+
+			const chunkJSFile = chunkFiles.find( ( f ) =>
+				jsExtensionRegExp.test( f )
+			);
 			if ( ! chunkJSFile ) {
 				// There's no JS file in this chunk, no work for us. Typically a `style.css` from cache group.
 				continue;
 			}
 
-			const chunkDeps = new Set();
+			/** @type {Set<string>} */
+			const chunkStaticDeps = new Set();
+			/** @type {Set<string>} */
+			const chunkDynamicDeps = new Set();
+
 			if ( injectPolyfill ) {
-				chunkDeps.add( 'wp-polyfill' );
+				chunkStaticDeps.add( 'wp-polyfill' );
 			}
 
-			const processModule = ( { userRequest } ) => {
+			/**
+			 * @param {webpack.Module} m
+			 */
+			const processModule = ( m ) => {
+				const { userRequest } = m;
 				if ( this.externalizedDeps.has( userRequest ) ) {
-					chunkDeps.add( this.mapRequestToDependency( userRequest ) );
+					if ( this.useModules ) {
+						const isStatic =
+							DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
+								compilation,
+								m
+							);
+
+						( isStatic ? chunkStaticDeps : chunkDynamicDeps ).add(
+							m.request
+						);
+					} else {
+						chunkStaticDeps.add(
+							this.mapRequestToDependency( userRequest )
+						);
+					}
 				}
 			};
 
 			// Search for externalized modules in all chunks.
-			const modulesIterable = isWebpack4
-				? chunk.modulesIterable
-				: compilation.chunkGraph.getChunkModules( chunk );
-			for ( const chunkModule of modulesIterable ) {
+			for ( const chunkModule of compilation.chunkGraph.getChunkModulesIterable(
+				chunk
+			) ) {
 				processModule( chunkModule );
 				// Loop through submodules of ConcatenatedModule.
 				if ( chunkModule.modules ) {
@@ -205,7 +331,7 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
-			// Go through the assets and hash the sources. We can't just use
+			// Prepare to hash the sources. We can't just use
 			// `chunk.contentHash` because that's not updated when
 			// assets are minified. In practice the hash is updated by
 			// `RealContentHashPlugin` after minification, but it only modifies
@@ -214,21 +340,63 @@ class DependencyExtractionWebpackPlugin {
 			const { hashFunction, hashDigest, hashDigestLength } =
 				compilation.outputOptions;
 
-			const contentHash = chunkFiles
-				.sort()
-				.reduce( ( hash, filename ) => {
-					const asset = compilation.getAsset( filename );
-					return hash.update( asset.source.buffer() );
-				}, createHash( hashFunction ) )
+			const hashBuilder = createHash( hashFunction );
+
+			const processContentsForHash = ( content ) => {
+				hashBuilder.update( content );
+			};
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const handleMagicComments = ( info ) => {
+				if ( ! info ) {
+					return;
+				}
+				if ( info.includes( 'wp-polyfill' ) ) {
+					chunkStaticDeps.add( 'wp-polyfill' );
+				}
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to generate hashes, as well as look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				processContentsForHash( content );
+				handleMagicComments( asset.info.wpMagicComments );
+			} );
+
+			// Finalise hash.
+			const contentHash = hashBuilder
 				.digest( hashDigest )
 				.slice( 0, hashDigestLength );
 
 			const assetData = {
-				// Get a sorted array so we can produce a stable, stringified representation.
-				dependencies: Array.from( chunkDeps ).sort(),
+				dependencies: [
+					// Sort these so we can produce a stable, stringified representation.
+					...Array.from( chunkStaticDeps ).sort(),
+					...Array.from( chunkDynamicDeps )
+						.sort()
+						.map( ( id ) => ( { id, import: 'dynamic' } ) ),
+				],
 				version: contentHash,
 			};
 
+			if ( this.useModules ) {
+				assetData.type = 'module';
+			}
+
+			if ( compilation.options?.optimization?.runtimeChunk !== false ) {
+				// Sets the script handle for the shared runtime file so WordPress registers it only once when using the asset file.
+				assetData.handle =
+					compilation.name +
+					'-' +
+					chunkJSFile
+						.replace( /\\/g, '/' )
+						.replace( jsExtensionRegExp, '' );
+			}
+
 			if ( combineAssets ) {
 				combinedAssetsData[ chunkJSFile ] = assetData;
 				continue;
@@ -246,14 +414,14 @@ class DependencyExtractionWebpackPlugin {
 					'.asset.' + ( outputFormat === 'php' ? 'php' : 'json' );
 				assetFilename = compilation
 					.getPath( '[file]', { filename: chunkJSFile } )
-					.replace( /\.js$/i, suffix );
+					.replace( /\.m?js$/i, suffix );
 			}
 
 			// Add source and file into compilation for webpack to output.
 			compilation.assets[ assetFilename ] = new RawSource(
 				this.stringify( assetData )
 			);
-			chunk.files[ isWebpack4 ? 'push' : 'add' ]( assetFilename );
+			chunk.files.add( assetFilename );
 		}
 
 		if ( combineAssets ) {
@@ -275,6 +443,94 @@ class DependencyExtractionWebpackPlugin {
 			);
 		}
 	}
+
+	static #staticDepsCurrent = new WeakSet();
+	static #staticDepsCache = new WeakMap();
+
+	/**
+	 * Can we trace a line of static dependencies from an entry to a module
+	 *
+	 * @param {webpack.Compilation}       compilation
+	 * @param {webpack.DependenciesBlock} block
+	 *
+	 * @return {boolean} True if there is a static import path to the root
+	 */
+	static hasStaticDependencyPathToRoot( compilation, block ) {
+		if ( DependencyExtractionWebpackPlugin.#staticDepsCache.has( block ) ) {
+			return DependencyExtractionWebpackPlugin.#staticDepsCache.get(
+				block
+			);
+		}
+
+		if (
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.has( block )
+		) {
+			return false;
+		}
+
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.add( block );
+
+		const incomingConnections = [
+			...compilation.moduleGraph.getIncomingConnections( block ),
+		].filter(
+			( connection ) =>
+				// Library connections don't have a dependency, this is a root
+				connection.dependency &&
+				// Entry dependencies are another root
+				connection.dependency.constructor.name !== 'EntryDependency'
+		);
+
+		// If we don't have non-entry, non-library incoming connections,
+		// we've reached a root of
+		if ( ! incomingConnections.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				true
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
+			return true;
+		}
+
+		const staticDependentModules = incomingConnections.flatMap(
+			( connection ) => {
+				const { dependency } = connection;
+				const parentBlock =
+					compilation.moduleGraph.getParentBlock( dependency );
+
+				return parentBlock.constructor.name !==
+					AsyncDependenciesBlock.name
+					? [ compilation.moduleGraph.getParentModule( dependency ) ]
+					: [];
+			}
+		);
+
+		// All the dependencies were Async, the module was reached via a dynamic import
+		if ( ! staticDependentModules.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				false
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
+			return false;
+		}
+
+		// Continue to explore any static dependencies
+		const result = staticDependentModules.some(
+			( parentStaticDependentModule ) =>
+				DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
+					compilation,
+					parentStaticDependentModule
+				)
+		);
+
+		DependencyExtractionWebpackPlugin.#staticDepsCache.set( block, result );
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete( block );
+		return result;
+	}
 }
 
 module.exports = DependencyExtractionWebpackPlugin;
diff --git a/packages/dependency-extraction-webpack-plugin/lib/types.d.ts b/packages/dependency-extraction-webpack-plugin/lib/types.d.ts
index 179b4dab593bd6..5a1bff90aa49ad 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/types.d.ts
+++ b/packages/dependency-extraction-webpack-plugin/lib/types.d.ts
@@ -13,6 +13,9 @@ declare interface DependencyExtractionWebpackPluginOptions {
 	outputFormat?: 'php' | 'json';
 	outputFilename?: string | Function;
 	requestToExternal?: ( request: string ) => string | string[] | undefined;
+	requestToExternalModule?: (
+		request: string
+	) => string | boolean | undefined;
 	requestToHandle?: ( request: string ) => string | undefined;
 	combinedOutputFile?: string | null;
 	combineAssets?: boolean;
diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
index a22837af6a72e9..49b16986cda814 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/util.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -1,5 +1,17 @@
 const WORDPRESS_NAMESPACE = '@wordpress/';
-const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
+
+// !!
+// This list must be kept in sync with the same list in tools/webpack/packages.js
+// !!
+const BUNDLED_PACKAGES = [
+	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
+	'@wordpress/icons',
+	'@wordpress/interface',
+	'@wordpress/sync',
+	'@wordpress/undo-manager',
+	'@wordpress/fields',
+];
 
 /**
  * Default request to global transformation
@@ -32,6 +44,10 @@ function defaultRequestToExternal( request ) {
 
 		case 'react-dom':
 			return 'ReactDOM';
+
+		case 'react/jsx-runtime':
+		case 'react/jsx-dev-runtime':
+			return 'ReactJSXRuntime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -50,6 +66,46 @@ function defaultRequestToExternal( request ) {
 	}
 }
 
+/**
+ * Default request to external module transformation
+ *
+ * Currently only @wordpress/interactivity and `@wordpress/interactivity-router`
+ * are supported.
+ *
+ * Do not use the boolean shorthand here, it's only handled for the
+ * `requestToExternalModule` option.
+ *
+ * @param {string} request Module request (the module name in `import from`) to be transformed
+ * @return {string|Error|undefined} The resulting external definition.
+ *   - Return `undefined` to ignore the request (do not externalize).
+ *   - Return `string` to map the request to an external.
+ *   - Return `Error` to emit an error.
+ */
+function defaultRequestToExternalModule( request ) {
+	if ( request === '@wordpress/interactivity' ) {
+		// This is a special case. Interactivity does not support dynamic imports at
+		// this time. We add the external "module" type to indicate that webpack
+		// should externalize this as a module (instead of our default `import()`
+		// external type) which forces @wordpress/interactivity imports to be
+		// hoisted to static imports.
+		return `module ${ request }`;
+	}
+
+	switch ( request ) {
+		case '@wordpress/interactivity-router':
+		case '@wordpress/a11y':
+			return `import ${ request }`;
+	}
+
+	const isWordPressScript = Boolean( defaultRequestToExternal( request ) );
+
+	if ( isWordPressScript ) {
+		throw new Error(
+			`Attempted to use WordPress script in a module: ${ request }, which is not supported yet.`
+		);
+	}
+}
+
 /**
  * Default request to WordPress script handle transformation
  *
@@ -64,10 +120,13 @@ function defaultRequestToExternal( request ) {
 function defaultRequestToHandle( request ) {
 	switch ( request ) {
 		case '@babel/runtime/regenerator':
-			return 'wp-polyfill';
+			return 'regenerator-runtime';
 
 		case 'lodash-es':
 			return 'lodash';
+
+		case 'react/jsx-runtime':
+			return 'react-jsx-runtime';
 	}
 
 	if ( request.includes( 'react-refresh/runtime' ) ) {
@@ -95,5 +154,6 @@ function camelCaseDash( string ) {
 module.exports = {
 	camelCaseDash,
 	defaultRequestToExternal,
+	defaultRequestToExternalModule,
 	defaultRequestToHandle,
 };
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index 4195444b4e1076..5738c18f55fff5 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "4.5.0",
+	"version": "6.13.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib",
@@ -29,11 +30,10 @@
 	"main": "lib/index.js",
 	"types": "lib/types.d.ts",
 	"dependencies": {
-		"json2php": "^0.0.5",
-		"webpack-sources": "^3.2.2"
+		"json2php": "^0.0.7"
 	},
 	"peerDependencies": {
-		"webpack": "^4.8.3 || ^5.0.0"
+		"webpack": "^5.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
index 3feaba84de0338..be69ee891743da 100644
--- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
@@ -1,28 +1,402 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`combine-assets\` should produce expected output: Asset file 'assets.php' should match snapshot 1`] = `
-"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'cf268e19006bef774112'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '7f3970305cf0aecb54ab'));
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`combine-assets\` should produce expected output: Asset file 'assets.php' should match snapshot 1`] = `
+"<?php return array('fileA.mjs' => array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => '4ab8cc4b6b7619053443', 'type' => 'module'), 'fileB.mjs' => array('dependencies' => array('@wordpress/token-list'), 'version' => '5c4197fd48811f25807f', 'type' => 'module'));
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`combine-assets\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`combine-assets\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "@wordpress/token-list",
+    "userRequest": "@wordpress/token-list",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '1e02dcb4017382a2799f', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => '3ca651be783423315165', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => '095eb9129a2ad858900d', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(array('id' => '@wordpress/blob', 'import' => 'dynamic')), 'version' => 'fbb215dc4902543bce35', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`dynamic-import\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`error\` should produce expected output 1`] = `
+"ERROR in ./index.js 5:0-23
+Module not found: Error: Attempted to use WordPress script in a module: jquery, which is not supported yet.
+
+ERROR in ./index.js 6:23-55
+Module not found: Error: Attempted to use WordPress script in a module: @wordpress/api-fetch, which is not supported yet.
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => 'e325da3aa7dbb0c0c151', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`has-extension-suffix\` should produce expected output: Asset file 'index.min.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => '8308f1ac78c21f09c721', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`has-extension-suffix\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`module-renames\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('renamed--@my/module', 'renamed--other-module'), 'version' => '91070a8471d11e83a5f6', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`module-renames\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "renamed--@my/module",
+    "userRequest": "@my/module",
+  },
+  {
+    "externalType": "import",
+    "request": "renamed--other-module",
+    "userRequest": "other-module",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => 'fcac76462c8a830d8d92', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`no-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => 'e37fbd452a6188261d74', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`option-function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => 'e325da3aa7dbb0c0c151', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`option-function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`option-output-filename\` should produce expected output: Asset file 'main-foo.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => 'e325da3aa7dbb0c0c151', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`option-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{"dependencies":["lodash"],"version":"4e62c01516f9dab8041f","type":"module"}"`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`overrides\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', '@wordpress/url', 'rxjs', 'rxjs/operators'), 'version' => '259fc706528651fc00c1', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "@wordpress/url",
+    "userRequest": "@wordpress/url",
+  },
+  {
+    "externalType": "import",
+    "request": "rxjs",
+    "userRequest": "rxjs",
+  },
+  {
+    "externalType": "import",
+    "request": "rxjs/operators",
+    "userRequest": "rxjs/operators",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '9725ab782f6b09598d3d', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment-minified\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '31d6cfe0d16ae931b73c', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment-minified\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob'), 'version' => 'ab7fa97b1381e41e0f70', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-a');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => '498fd24026d68fa84ba9', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-b');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'runtime.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => '5ac0d6987a8e7fe809a3', 'type' => 'module', 'handle' => 'runtime-chunk-single-modules-runtime');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`style-imports\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => '22d18a3461df47fbaa79', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`style-imports\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => 'e325da3aa7dbb0c0c151', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-interactivity\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => '363140026eaa9abcaf33', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-interactivity\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-require\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('@wordpress/blob', 'lodash'), 'version' => 'ee5a6866beeb5643397c', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "import",
+    "request": "@wordpress/blob",
+    "userRequest": "@wordpress/blob",
+  },
+  {
+    "externalType": "import",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`combine-assets\` should produce expected output: Asset file 'assets.php' should match snapshot 1`] = `
+"<?php return array('fileA.js' => array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'e1840d27f0719ffa42d3'), 'fileB.js' => array('dependencies' => array('wp-token-list'), 'version' => '1e60e007d6496c9b46cf'));
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`combine-assets\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
     "userRequest": "@wordpress/blob",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "tokenList",
     ],
@@ -31,16 +405,70 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob'), 'version' => 'c8be4fceac30d1d00ca7');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-interactivity'), 'version' => '82601013091064d44360');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`dynamic-import\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-interactivity'), 'version' => '162f4d352c99e6c37be1');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dynamic-dependency-graph\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-interactivity'), 'version' => '4c336c2cbbbff439b43e');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-blob'), 'version' => '29070464c1c503708675');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`dynamic-import\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
       "wp",
       "blob",
     ],
@@ -49,21 +477,27 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9b7ebe61044661fdabda');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`error\` should produce expected output 1`] = `
+"ERROR in main
+Module not found: Error: Ensure error in script build.
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '0633d70f7567175ad0d5');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -72,21 +506,21 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`has-extension-suffix\` should produce expected output: Asset file 'index.min.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '49dba68ef238f954b358');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`has-extension-suffix\` should produce expected output: Asset file 'index.min.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '91d6fc79d8288f1bd30f');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`has-extension-suffix\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`has-extension-suffix\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -95,35 +529,61 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => 'f7e2cb527e601f74f8bd');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`module-renames\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('renamed--@my/module', 'renamed--other-module'), 'version' => '728ec64636a1f078764f');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`module-renames\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
+      "my-namespace",
+      "renamed--@my/module",
+    ],
+    "userRequest": "@my/module",
+  },
+  {
+    "externalType": "window",
+    "request": [
+      "my-namespace",
+      "renamed--other-module",
+    ],
+    "userRequest": "other-module",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`no-default\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => 'be8b28b738de0d6b883a');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`no-default\` should produce expected output: External modules should match snapshot 1`] = `[]`;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '143ed23d4b8be5611fcb');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`no-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => 'b922a4320dd8b7a352f4');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `Array []`;
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`no-deps\` should produce expected output: External modules should match snapshot 1`] = `[]`;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`option-function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9b7ebe61044661fdabda');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`option-function-output-filename\` should produce expected output: Asset file 'chunk--main--main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '0633d70f7567175ad0d5');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`option-function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`option-function-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -132,21 +592,21 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`option-output-filename\` should produce expected output: Asset file 'main-foo.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9b7ebe61044661fdabda');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`option-output-filename\` should produce expected output: Asset file 'main-foo.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '0633d70f7567175ad0d5');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`option-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`option-output-filename\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -155,11 +615,11 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{\\"dependencies\\":[\\"lodash\\"],\\"version\\":\\"4c42b9646049ad2e9438\\"}"`;
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`output-format-json\` should produce expected output: Asset file 'main.asset.json' should match snapshot 1`] = `"{"dependencies":["lodash"],"version":"b36983b739da7af0ccd4"}"`;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`output-format-json\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
@@ -167,37 +627,37 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`overrides\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '708c71445153f1d07e4a');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`overrides\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-blob', 'wp-script-handle-for-rxjs', 'wp-url'), 'version' => '35e570db18559a76b3e6');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`overrides\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "rxjs",
     "userRequest": "rxjs",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "rxjs",
       "operators",
     ],
     "userRequest": "rxjs/operators",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
     "userRequest": "@wordpress/blob",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "url",
     ],
@@ -206,31 +666,45 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('wp-blob'), 'version' => '09a0c551770a351c5ca7');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '48f720dd907eea75c1fd');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment-minified\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '31d6cfe0d16ae931b73c');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment-minified\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-blob'), 'version' => 'd091f1cbbf7603d6e12c', 'handle' => 'runtime-chunk-single-scripts-a');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'c9f00d690a9f72438910');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'b.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '845bc6d4ffbdb9419ebd', 'handle' => 'runtime-chunk-single-scripts-b');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'runtime.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array(), 'version' => '46ea0ff11ac53fa5e88b');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'runtime.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(), 'version' => '717eb779e609d175a7dd', 'handle' => 'runtime-chunk-single-scripts-runtime');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`runtime-chunk-single\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -239,21 +713,21 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`style-imports\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => 'd8c0ee89d933a3809c0e');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`style-imports\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '041fb611b5192ffe83f9');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`style-imports\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`style-imports\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -262,21 +736,21 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '9b7ebe61044661fdabda');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '0633d70f7567175ad0d5');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
@@ -285,21 +759,44 @@ Array [
 ]
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress-require\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
-"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '40370eb4ce6428562da6');
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress-interactivity\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-interactivity'), 'version' => 'b16015e38aea0509f75f');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress-interactivity\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": "lodash",
+    "userRequest": "lodash",
+  },
+  {
+    "externalType": "window",
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress-require\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('lodash', 'wp-blob'), 'version' => '7087050d1490e856fec8');
 "
 `;
 
-exports[`DependencyExtractionWebpackPlugin Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
-Array [
-  Object {
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`wordpress-require\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
     "externalType": "window",
     "request": "lodash",
     "userRequest": "lodash",
   },
-  Object {
+  {
     "externalType": "window",
-    "request": Array [
+    "request": [
       "wp",
       "blob",
     ],
diff --git a/packages/dependency-extraction-webpack-plugin/test/build.js b/packages/dependency-extraction-webpack-plugin/test/build.js
index b749b66f1e74bd..050b816ded3432 100644
--- a/packages/dependency-extraction-webpack-plugin/test/build.js
+++ b/packages/dependency-extraction-webpack-plugin/test/build.js
@@ -3,7 +3,7 @@
  */
 const fs = require( 'fs' );
 const glob = require( 'glob' ).sync;
-const mkdirp = require( 'mkdirp' ).sync;
+const mkdirp = require( 'mkdirp' ).mkdirp.sync;
 const path = require( 'path' );
 const rimraf = require( 'rimraf' ).sync;
 const webpack = require( 'webpack' );
@@ -11,27 +11,33 @@ const webpack = require( 'webpack' );
 const fixturesPath = path.join( __dirname, 'fixtures' );
 const configFixtures = fs.readdirSync( fixturesPath ).sort();
 
-jest.useRealTimers();
+afterAll( () => rimraf( path.join( __dirname, 'build' ) ) );
 
-describe( 'DependencyExtractionWebpackPlugin', () => {
-	afterAll( () => rimraf( path.join( __dirname, 'build' ) ) );
+describe.each( /** @type {const} */ ( [ 'scripts', 'modules' ] ) )(
+	'DependencyExtractionWebpackPlugin %s',
+	( moduleMode ) => {
+		describe.each( configFixtures )( 'Webpack `%s`', ( configCase ) => {
+			const testDirectory = path.join( fixturesPath, configCase );
+			const outputDirectory = path.join(
+				__dirname,
+				'build',
+				moduleMode,
+				configCase
+			);
 
-	describe.each( configFixtures )( 'Webpack `%s`', ( configCase ) => {
-		const testDirectory = path.join( fixturesPath, configCase );
-		const outputDirectory = path.join( __dirname, 'build', configCase );
+			beforeEach( () => {
+				rimraf( outputDirectory );
+				mkdirp( outputDirectory );
+			} );
 
-		beforeEach( () => {
-			rimraf( outputDirectory );
-			mkdirp( outputDirectory );
-		} );
-
-		// This afterEach is necessary to prevent watched tests from retriggering on every run.
-		afterEach( () => rimraf( outputDirectory ) );
+			// This afterEach is necessary to prevent watched tests from retriggering on every run.
+			afterEach( () => rimraf( outputDirectory ) );
 
-		test( 'should produce expected output', () =>
-			new Promise( ( resolve ) => {
+			test( 'should produce expected output', async () => {
 				const options = Object.assign(
 					{
+						name: `${ configCase }-${ moduleMode }`,
+						target: 'web',
 						context: testDirectory,
 						entry: './index.js',
 						mode: 'production',
@@ -41,56 +47,89 @@ describe( 'DependencyExtractionWebpackPlugin', () => {
 							moduleIds: 'named',
 						},
 						output: {},
+						experiments: {},
 					},
 					require( path.join( testDirectory, 'webpack.config.js' ) )
 				);
 				options.output.path = outputDirectory;
 
-				webpack( options, ( err, stats ) => {
-					expect( err ).toBeNull();
+				if ( moduleMode === 'modules' ) {
+					options.target = 'es2024';
+					options.output.module = true;
+					options.output.chunkFormat = 'module';
+					options.output.library = options.output.library || {};
+					options.output.library.type = 'module';
+					options.experiments.outputModule = true;
+				}
 
-					const assetFiles = glob(
-						`${ outputDirectory }/+(*.asset|assets).@(json|php)`
-					);
+				/** @type {webpack.Stats} */
+				const stats = await new Promise( ( resolve, reject ) =>
+					webpack( options, ( err, _stats ) => {
+						if ( err ) {
+							return reject( err );
+						}
+						resolve( _stats );
+					} )
+				);
 
-					expect( assetFiles.length ).toBeGreaterThan( 0 );
-
-					// Asset files should match.
-					assetFiles.forEach( ( assetFile ) => {
-						const assetBasename = path.basename( assetFile );
-
-						expect(
-							fs.readFileSync( assetFile, 'utf-8' )
-						).toMatchSnapshot(
-							`Asset file '${ assetBasename }' should match snapshot`
-						);
-					} );
-
-					const compareByModuleIdentifier = ( m1, m2 ) => {
-						const i1 = m1.identifier();
-						const i2 = m2.identifier();
-						if ( i1 < i2 ) return -1;
-						if ( i1 > i2 ) return 1;
-						return 0;
-					};
-
-					// Webpack stats external modules should match.
-					const externalModules = Array.from(
-						stats.compilation.modules
-					)
-						.filter( ( { externalType } ) => externalType )
-						.sort( compareByModuleIdentifier )
-						.map( ( module ) => ( {
-							externalType: module.externalType,
-							request: module.request,
-							userRequest: module.userRequest,
-						} ) );
-					expect( externalModules ).toMatchSnapshot(
-						'External modules should match snapshot'
+				/* eslint-disable jest/no-conditional-expect */
+				if ( configCase.includes( 'error' ) ) {
+					expect( stats.hasErrors() ).toBe( true );
+					expect(
+						stats.toString( { errors: true, all: false } )
+					).toMatchSnapshot();
+					return;
+				}
+				/* eslint-enable jest/no-conditional-expect */
+
+				if ( stats.hasErrors() ) {
+					throw new Error(
+						stats.toString( { errors: true, all: false } )
 					);
+				}
+
+				const assetFiles = glob(
+					`${ outputDirectory }/+(*.asset|assets).@(json|php)`
+				);
 
-					resolve();
+				expect( assetFiles.length ).toBeGreaterThan( 0 );
+
+				// Asset files should match.
+				assetFiles.forEach( ( assetFile ) => {
+					const assetBasename = path.basename( assetFile );
+
+					expect(
+						fs.readFileSync( assetFile, 'utf-8' )
+					).toMatchSnapshot(
+						`Asset file '${ assetBasename }' should match snapshot`
+					);
 				} );
-			} ) );
-	} );
-} );
+
+				const compareByModuleIdentifier = ( m1, m2 ) => {
+					const i1 = m1.identifier();
+					const i2 = m2.identifier();
+					if ( i1 < i2 ) {
+						return -1;
+					}
+					if ( i1 > i2 ) {
+						return 1;
+					}
+					return 0;
+				};
+
+				// Webpack stats external modules should match.
+				const externalModules = Array.from( stats.compilation.modules )
+					.filter( ( { externalType } ) => externalType )
+					.sort( compareByModuleIdentifier )
+					.map( ( module ) => ( {
+						externalType: module.externalType,
+						request: module.request,
+						userRequest: module.userRequest,
+					} ) );
+				expect( externalModules ).toMatchSnapshot(
+					'External modules should match snapshot'
+				);
+			} );
+		} );
+	}
+);
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/file-a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/file-a.js
index aa683b111a5ab2..52384ea4de1a47 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/file-a.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/file-a.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import { isEmpty } from 'lodash';
 
 /**
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/webpack.config.js
index 2ce7ba1be98e25..ab407815bbee48 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/combine-assets/webpack.config.js
@@ -11,6 +11,11 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			combineAssets: true,
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
 		} ),
 	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/a.js
new file mode 100644
index 00000000000000..11dd7764ad5f92
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/a.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * Internal dependencies
+ */
+import { identity } from './b.js';
+
+identity( 1 );
+
+export { identity, store };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/b.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/b.js
new file mode 100644
index 00000000000000..ce109acccbd370
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/b.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { store } from './a.js';
+
+export function identity( x ) {
+	return x;
+}
+
+export { store };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/index.js
new file mode 100644
index 00000000000000..13b17a73ad4af8
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/index.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { identity as aIdentity, store as aStore } from './a.js';
+import { identity as bIdentity, store as bStore } from './b.js';
+
+aStore( aIdentity( 'a' ), { a: aIdentity( 'a' ) } );
+bStore( bIdentity( 'b' ), { b: bIdentity( 'b' ) } );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dependency-graph/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/a.js
new file mode 100644
index 00000000000000..11dd7764ad5f92
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/a.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * Internal dependencies
+ */
+import { identity } from './b.js';
+
+identity( 1 );
+
+export { identity, store };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/b.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/b.js
new file mode 100644
index 00000000000000..25a6aa127d26fd
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/b.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+const { store } = import( './a.js' );
+
+export function identity( x ) {
+	return x;
+}
+
+export { store };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/index.js
new file mode 100644
index 00000000000000..073b4244dcea26
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/index.js
@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { identity as bIdentity, store as bStore } from './b.js';
+
+const { identity: aIdentity, store: aStore } = await import( './a.js' );
+
+aStore( aIdentity( 'a' ), { a: aIdentity( 'a' ) } );
+bStore( bIdentity( 'b' ), { b: bIdentity( 'b' ) } );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-dynamic-dependency-graph/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
new file mode 100644
index 00000000000000..1f0edffe27efd3
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { someFunction } from '.';
+
+someFunction();
+
+export const a = 'test';
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
new file mode 100644
index 00000000000000..01d7eff466bfbd
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { a } from './a';
+
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+export const someFunction = () => {
+	store( 'test', {
+		state: {
+			a,
+		},
+	} );
+	return a;
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/dynamic-import/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/dynamic-import/webpack.config.js
index bfffff3ae78319..59d4c5d2ead3ab 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/dynamic-import/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/dynamic-import/webpack.config.js
@@ -4,5 +4,11 @@
 const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return request.startsWith( '@wordpress/' );
+			},
+		} ),
+	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/error/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/error/index.js
new file mode 100644
index 00000000000000..388963c34de897
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/error/index.js
@@ -0,0 +1,10 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+
+import $ from 'jquery';
+const apiFetch = await import( '@wordpress/api-fetch' );
+
+$( () => {
+	apiFetch( { path: '/' } );
+} );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/error/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/error/webpack.config.js
new file mode 100644
index 00000000000000..5f2e5f899237c2
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/error/webpack.config.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			// eslint-disable-next-line no-unused-vars
+			requestToExternal( request ) {
+				throw new Error( 'Ensure error in script build.' );
+			},
+		} ),
+	],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/index.js
index 917b4cd7e204bf..4545bcd0c19bc6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/index.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.isEmpty( isBlobURL( '' ) );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/webpack.config.js
index 2d5b2e43b735ec..7ec1c7ce8a5de1 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/function-output-filename/webpack.config.js
@@ -9,5 +9,13 @@ module.exports = {
 			return `chunk--${ chunkData.chunk.name }--[name].js`;
 		},
 	},
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
+	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/index.js
index aa683b111a5ab2..52384ea4de1a47 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import { isEmpty } from 'lodash';
 
 /**
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/webpack.config.js
index d814beacdf4dc3..4816746976c5b6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/has-extension-suffix/webpack.config.js
@@ -7,5 +7,13 @@ module.exports = {
 	output: {
 		filename: 'index.min.js',
 	},
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
+	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/index.js
new file mode 100644
index 00000000000000..dc3702922c6ff4
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/index.js
@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import * as m from '@my/module';
+import { other } from 'other-module';
+
+m.load( other );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/webpack.config.js
new file mode 100644
index 00000000000000..8b78e1fdea1505
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/module-renames/webpack.config.js
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternal( request ) {
+				switch ( request ) {
+					case '@my/module':
+					case 'other-module':
+						return [ 'my-namespace', `renamed--${ request }` ];
+				}
+			},
+			requestToHandle( request ) {
+				switch ( request ) {
+					case '@my/module':
+					case 'other-module':
+						return `renamed--${ request }`;
+				}
+			},
+			requestToExternalModule( request ) {
+				switch ( request ) {
+					case '@my/module':
+					case 'other-module':
+						return `renamed--${ request }`;
+				}
+			},
+		} ),
+	],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/no-default/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/no-default/index.js
index 612e420c2a6c4d..f9eb6f42f0a2dc 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/no-default/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/no-default/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.map( [], _.identity );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/index.js
index 917b4cd7e204bf..4545bcd0c19bc6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/index.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.isEmpty( isBlobURL( '' ) );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js
index e328c817851ce1..f65d51ffa5152f 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-function-output-filename/webpack.config.js
@@ -9,6 +9,11 @@ module.exports = {
 			outputFilename( chunkData ) {
 				return `chunk--${ chunkData.chunk.name }--[name].asset.php`;
 			},
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
 		} ),
 	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/index.js
index 917b4cd7e204bf..4545bcd0c19bc6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/index.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.isEmpty( isBlobURL( '' ) );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js
index 9ec78f6437a18b..30aa1f0233e93e 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/option-output-filename/webpack.config.js
@@ -7,6 +7,11 @@ module.exports = {
 	plugins: [
 		new DependencyExtractionWebpackPlugin( {
 			outputFilename: '[name]-foo.asset.php',
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
 		} ),
 	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/index.js
index 612e420c2a6c4d..f9eb6f42f0a2dc 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.map( [], _.identity );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/webpack.config.js
index b82f422f949f81..3a6099354c86bb 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/output-format-json/webpack.config.js
@@ -5,6 +5,11 @@ const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
 	plugins: [
-		new DependencyExtractionWebpackPlugin( { outputFormat: 'json' } ),
+		new DependencyExtractionWebpackPlugin( {
+			outputFormat: 'json',
+			requestToExternalModule( request ) {
+				return request === 'lodash';
+			},
+		} ),
 	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/overrides/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/overrides/webpack.config.js
index 9885e5cade7e96..5e28a677f1d5b0 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/overrides/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/overrides/webpack.config.js
@@ -15,6 +15,16 @@ module.exports = {
 					return [ 'rxjs', 'operators' ];
 				}
 			},
+			requestToExternalModule( request ) {
+				if ( request === 'rxjs' ) {
+					return request;
+				}
+
+				if ( request === 'rxjs/operators' ) {
+					return request;
+				}
+				return request.startsWith( '@wordpress/' );
+			},
 			requestToHandle( request ) {
 				if ( request === 'rxjs' || request === 'rxjs/operators' ) {
 					return 'wp-script-handle-for-rxjs';
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js
new file mode 100644
index 00000000000000..d98678f44cb697
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js
@@ -0,0 +1,3 @@
+/* wp:polyfill */
+
+// Nothing else, really.
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js
new file mode 100644
index 00000000000000..be01328d675d0a
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	optimization: {
+		minimize: true,
+	},
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
new file mode 100644
index 00000000000000..d98678f44cb697
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
@@ -0,0 +1,3 @@
+/* wp:polyfill */
+
+// Nothing else, really.
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/b.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/b.js
index 917b4cd7e204bf..4545bcd0c19bc6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/b.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/b.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.isEmpty( isBlobURL( '' ) );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/webpack.config.js
index e16f6b6b0fe70a..0c6608a814b45e 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/runtime-chunk-single/webpack.config.js
@@ -8,7 +8,15 @@ module.exports = {
 		a: './a',
 		b: './b',
 	},
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
+	],
 	optimization: {
 		runtimeChunk: 'single',
 	},
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/index.js
index df02e0b35e6f8e..b4e8cb76d1fa56 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/index.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 /**
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/webpack.config.js
index 52cb718a579de4..0f5ac2b955538a 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/style-imports/webpack.config.js
@@ -10,7 +10,13 @@ const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
 	plugins: [
-		new DependencyExtractionWebpackPlugin(),
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
 		new MiniCSSExtractPlugin(),
 	],
 	module: {
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/index.js
new file mode 100644
index 00000000000000..b4dd2f288661ea
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/index.js
@@ -0,0 +1,12 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+
+import _ from 'lodash';
+
+// This module should be externalized
+const { store, getContext } = await import( '@wordpress/interactivity' );
+
+store( _.identity( 'my-namespace' ), { state: 'is great' } );
+
+getContext();
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/webpack.config.js
new file mode 100644
index 00000000000000..7d18e80a8d4ea3
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-interactivity/webpack.config.js
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return request === 'lodash';
+			},
+		} ),
+	],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-require/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-require/webpack.config.js
index bfffff3ae78319..bf6cb387dbd18f 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-require/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress-require/webpack.config.js
@@ -4,5 +4,13 @@
 const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
+	],
 };
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/index.js
index 917b4cd7e204bf..4545bcd0c19bc6 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/index.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/index.js
@@ -6,6 +6,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * External dependencies
  */
+// eslint-disable-next-line no-restricted-imports
 import _ from 'lodash';
 
 _.isEmpty( isBlobURL( '' ) );
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/webpack.config.js
index bfffff3ae78319..bf6cb387dbd18f 100644
--- a/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/webpack.config.js
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/wordpress/webpack.config.js
@@ -4,5 +4,13 @@
 const DependencyExtractionWebpackPlugin = require( '../../..' );
 
 module.exports = {
-	plugins: [ new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		new DependencyExtractionWebpackPlugin( {
+			requestToExternalModule( request ) {
+				return (
+					request.startsWith( '@wordpress/' ) || request === 'lodash'
+				);
+			},
+		} ),
+	],
 };
diff --git a/packages/deprecated/.npmrc b/packages/deprecated/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/deprecated/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 72d28c32120d68..3ec1c350bc2d0d 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,13 +161,13 @@
 
 ## 2.11.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#26429](https://github.com/WordPress/gutenberg/pull/26429))
 
 ## 2.6.0 (2019-08-29)
 
-### Bug Fix
+### Bug Fixes
 
 -   When there is no `options.version` param provided `deprecated` method warns with more relaxed tone.
 
@@ -71,10 +175,10 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
-### New Feature
+### New Features
 
 -   Call `doAction` hook when a deprecated feature is encountered ([#8110](https://github.com/WordPress/gutenberg/pull/8110))
diff --git a/packages/deprecated/README.md b/packages/deprecated/README.md
index af92d7ed91bb64..039629f17940a1 100644
--- a/packages/deprecated/README.md
+++ b/packages/deprecated/README.md
@@ -69,8 +69,7 @@ _Parameters_
 
 ### logged
 
-Object map tracking messages which have been logged, for use in ensuring a
-message is only logged once.
+Object map tracking messages which have been logged, for use in ensuring a message is only logged once.
 
 _Type_
 
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index e4df5b62c67475..0da22c081e83d4 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,16 +19,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/hooks": "file:../hooks"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/hooks": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/deprecated/tsconfig.json b/packages/deprecated/tsconfig.json
index 9d3c2f54d7b7e6..f90e327f124d7e 100644
--- a/packages/deprecated/tsconfig.json
+++ b/packages/deprecated/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/docgen/.npmrc b/packages/docgen/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/docgen/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 3a8ec6ba1891ca..ea879d77247ac2 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+### Bug Fixes
+
+-   Fix getting param annotations for exported variables assigned to function expressions ([#tbd](https://github.com/WordPress/gutenberg/pull/tbd)).
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.67.0 (2024-05-16)
+
+## 1.66.0 (2024-05-02)
+
+## 1.65.0 (2024-04-19)
+
+## 1.64.0 (2024-04-03)
+
+## 1.63.0 (2024-03-21)
+
+## 1.62.0 (2024-03-06)
+
+## 1.61.0 (2024-02-21)
+
+## 1.60.0 (2024-02-09)
+
+## 1.59.0 (2024-01-24)
+
+## 1.58.0 (2024-01-10)
+
+## 1.57.0 (2023-12-13)
+
+## 1.56.0 (2023-11-29)
+
+## 1.55.0 (2023-11-16)
+
+## 1.54.0 (2023-11-02)
+
+## 1.53.0 (2023-10-18)
+
+## 1.52.0 (2023-10-05)
+
+## 1.51.0 (2023-09-20)
+
+## 1.50.0 (2023-08-31)
+
+## 1.49.0 (2023-08-16)
+
+## 1.48.0 (2023-08-10)
+
+## 1.47.0 (2023-07-20)
+
+## 1.46.0 (2023-07-05)
+
+## 1.45.0 (2023-06-23)
+
+## 1.44.0 (2023-06-07)
+
+## 1.43.0 (2023-05-24)
+
+## 1.42.0 (2023-05-10)
+
+## 1.41.0 (2023-04-26)
+
+## 1.40.0 (2023-04-12)
+
+## 1.39.0 (2023-03-29)
+
+## 1.38.0 (2023-03-15)
+
+## 1.37.0 (2023-03-01)
+
+## 1.36.0 (2023-02-15)
+
+## 1.35.0 (2023-02-01)
+
+## 1.34.0 (2023-01-11)
+
+## 1.33.0 (2023-01-02)
+
+## 1.32.0 (2022-12-14)
+
 ## 1.31.0 (2022-11-16)
 
 ## 1.30.0 (2022-11-02)
@@ -16,7 +124,7 @@
 
 ### Bug Fixes
 
--	Fix getting param annotations for default exported functions. ([#31603](https://github.com/WordPress/gutenberg/pull/31603))
+-   Fix getting param annotations for default exported functions ([#31603](https://github.com/WordPress/gutenberg/pull/31603)).
 
 ## 1.17.0 (2021-04-29)
 
@@ -45,7 +153,7 @@
 
 ## 1.2.0 (2019-05-21)
 
-### Enhancement
+### Enhancements
 
 -   Docblocks including a `@private` tag will be omitted from the generated result.
 
diff --git a/packages/docgen/README.md b/packages/docgen/README.md
index f54cd6b9e5773d..4f60d0a3c7a26a 100644
--- a/packages/docgen/README.md
+++ b/packages/docgen/README.md
@@ -16,6 +16,8 @@ Install the module
 npm install @wordpress/docgen --save-dev
 ```
 
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
+
 ## Usage
 
 ```bash
diff --git a/packages/docgen/lib/get-intermediate-representation.js b/packages/docgen/lib/get-intermediate-representation.js
index 2f8e155c575650..9f49fc4d4f93a2 100644
--- a/packages/docgen/lib/get-intermediate-representation.js
+++ b/packages/docgen/lib/get-intermediate-representation.js
@@ -20,7 +20,9 @@ const hasVariableWithName = ( node, name ) =>
 	node.declarations.some( ( declaration ) => {
 		if ( declaration.id.type === 'ObjectPattern' ) {
 			return declaration.id.properties.some(
-				( property ) => property.key.name === name
+				( property ) =>
+					property.key?.name === name ||
+					property.argument?.name === name
 			);
 		}
 		return declaration.id.name === name;
diff --git a/packages/docgen/lib/get-jsdoc-from-token.js b/packages/docgen/lib/get-jsdoc-from-token.js
index 98882affaabd7f..4b364c9a561b08 100644
--- a/packages/docgen/lib/get-jsdoc-from-token.js
+++ b/packages/docgen/lib/get-jsdoc-from-token.js
@@ -28,9 +28,19 @@ module.exports = ( token ) => {
 			let paramCount = 0;
 
 			jsdoc.tags = jsdoc.tags.map( ( tag ) => {
+				const isParam = tag.tag === 'param';
 				const isUnqualifiedParam =
-					tag.tag === 'param' && ! tag.name.includes( '.' );
-				const index = isUnqualifiedParam ? paramCount++ : paramCount;
+					isParam && ! tag.name.includes( '.' );
+				let index = isUnqualifiedParam ? paramCount++ : paramCount;
+
+				// Qualified parameters come after an unqualified parameter. When
+				// the paramCount is incremented for an unqualified parameter, we
+				// still need to access that previous index. In other words, the
+				// qualified parameter types exist at the index of the previous
+				// unqualified parameter. As a result, the index is actually less.
+				if ( isParam && index > 0 && ! isUnqualifiedParam ) {
+					index -= 1;
+				}
 
 				return {
 					...tag,
diff --git a/packages/docgen/lib/get-type-annotation.js b/packages/docgen/lib/get-type-annotation.js
index 6bf65cc27465a3..5e72724952f29e 100644
--- a/packages/docgen/lib/get-type-annotation.js
+++ b/packages/docgen/lib/get-type-annotation.js
@@ -237,16 +237,20 @@ function getMappedTypeAnnotation( typeAnnotation ) {
  * @param {babelTypes.TSTypeReference} typeAnnotation
  */
 function getTypeReferenceTypeAnnotation( typeAnnotation ) {
-	if ( ! typeAnnotation.typeParameters ) {
-		if ( babelTypes.isTSQualifiedName( typeAnnotation.typeName ) ) {
-			return unifyQualifiedName( typeAnnotation.typeName );
-		}
-		return typeAnnotation.typeName.name;
+	let typeName;
+	if ( babelTypes.isTSQualifiedName( typeAnnotation.typeName ) ) {
+		typeName = unifyQualifiedName( typeAnnotation.typeName );
+	} else {
+		typeName = typeAnnotation.typeName.name;
 	}
-	const typeParams = typeAnnotation.typeParameters.params
-		.map( getTypeAnnotation )
-		.join( ', ' );
-	return `${ typeAnnotation.typeName.name }< ${ typeParams } >`;
+
+	if ( typeAnnotation.typeParameters ) {
+		const typeParams = typeAnnotation.typeParameters.params
+			.map( getTypeAnnotation )
+			.join( ', ' );
+		typeName = `${ typeName }< ${ typeParams } >`;
+	}
+	return typeName;
 }
 
 /**
@@ -397,10 +401,18 @@ function getTypeAnnotation( typeAnnotation ) {
  *                        TODO: Remove the special-casing here once we're able to infer the types from TypeScript itself.
  */
 function unwrapWrappedSelectors( token ) {
+	if ( babelTypes.isTSDeclareFunction( token ) ) {
+		return token;
+	}
+
 	if ( babelTypes.isFunctionDeclaration( token ) ) {
 		return token;
 	}
 
+	if ( babelTypes.isFunctionExpression( token ) ) {
+		return token;
+	}
+
 	if ( babelTypes.isArrowFunctionExpression( token ) ) {
 		return token;
 	}
@@ -429,7 +441,7 @@ function unwrapWrappedSelectors( token ) {
 
 /**
  * @param {ASTNode} token
- * @return {babelTypes.ArrowFunctionExpression | babelTypes.FunctionDeclaration} The function token.
+ * @return {babelTypes.ArrowFunctionExpression | babelTypes.FunctionDeclaration | babelTypes.FunctionExpression} The function token.
  */
 function getFunctionToken( token ) {
 	let resolvedToken = token;
@@ -508,13 +520,12 @@ function getQualifiedObjectPatternTypeAnnotation( tag, paramType ) {
  * @param {CommentTag} tag              The documented parameter.
  * @param {ASTNode}    declarationToken The function the parameter is documented on.
  * @param {number}     paramIndex       The parameter index.
- * @return {string?} The parameter's type annotation.
+ * @return {string | undefined} The parameter's type annotation.
  */
 function getParamTypeAnnotation( tag, declarationToken, paramIndex ) {
 	const functionToken = getFunctionToken( declarationToken );
 
-	// Otherwise find the corresponding parameter token for the documented parameter.
-	let paramToken = functionToken.params[ paramIndex ];
+	let paramToken = functionToken?.params[ paramIndex ];
 
 	// This shouldn't happen due to our ESLint enforcing correctly documented parameter names but just in case
 	// we'll give a descriptive error so that it's easy to diagnose the issue.
@@ -557,7 +568,7 @@ function getParamTypeAnnotation( tag, declarationToken, paramIndex ) {
 
 /**
  * @param {ASTNode} declarationToken A function token.
- * @return {string?} The function's return type annotation.
+ * @return {string | undefined} The function's return type annotation.
  */
 function getReturnTypeAnnotation( declarationToken ) {
 	const functionToken = getFunctionToken( declarationToken );
@@ -570,7 +581,7 @@ function getReturnTypeAnnotation( declarationToken ) {
 
 /**
  * @param {ASTNode} declarationToken
- * @return {string?} The type annotation for the variable.
+ * @return {string | undefined} The type annotation for the variable.
  */
 function getVariableTypeAnnotation( declarationToken ) {
 	let resolvedToken = declarationToken;
diff --git a/packages/docgen/lib/index.js b/packages/docgen/lib/index.js
index 42416d9b452388..86c230f1e901aa 100644
--- a/packages/docgen/lib/index.js
+++ b/packages/docgen/lib/index.js
@@ -106,7 +106,7 @@ module.exports = ( sourceFile, options ) => {
 	}
 	sourceFile = path.join( processDir, sourceFile );
 
-	const debugMode = options.debug ? true : false;
+	const debugMode = options.debug;
 
 	const inputBase = path.join(
 		path.dirname( sourceFile ),
diff --git a/packages/docgen/lib/markdown/formatter.js b/packages/docgen/lib/markdown/formatter.js
index 8e45086e0d7e94..ef8d99047c26a4 100644
--- a/packages/docgen/lib/markdown/formatter.js
+++ b/packages/docgen/lib/markdown/formatter.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+const remark = require( 'remark' );
+
 /**
  * Internal dependencies
  */
@@ -68,9 +73,26 @@ const formatDeprecated = ( tags, docs ) => {
 };
 
 const formatDescription = ( description, docs ) => {
+	const processor = remark().use( () => {
+		return function transformer( tree ) {
+			tree.children.forEach( function ( node ) {
+				if ( node.children ) {
+					transformer( node );
+				}
+				if ( node.type === 'text' && node.value ) {
+					// Replace line breaks with spaces and remove line-ending hyphens.
+					node.value = node.value
+						.replace( /([A-Za-z])-\n([A-Za-z])/g, '$1$2' )
+						.replace( /\n/g, ' ' );
+				}
+			} );
+		};
+	} );
+	const processedDescription = processor.processSync( description );
+
 	docs.push( '\n' );
 	docs.push( '\n' );
-	docs.push( description );
+	docs.push( processedDescription );
 };
 
 const getHeading = ( index, text ) => {
@@ -185,8 +207,10 @@ module.exports = (
 				( tag ) => {
 					const name = tag.name;
 					const type = getTypeOutput( tag );
-
-					return `- *${ name }* ${ type }`;
+					const desc = cleanSpaces( tag.description );
+					return `- *${ name }* ${ type }${
+						desc ? `: ${ desc }` : ''
+					}`;
 				},
 				docs
 			);
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 75fa5b1735dc9e..4b7c5e25efe15c 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "1.31.0",
+	"version": "2.13.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"files": [
 		"bin",
 		"lib"
@@ -27,7 +31,7 @@
 		"docgen": "./bin/cli.js"
 	},
 	"dependencies": {
-		"@babel/core": "^7.16.0",
+		"@babel/core": "7.25.7",
 		"comment-parser": "^1.1.1",
 		"mdast-util-inject": "1.1.0",
 		"optionator": "0.8.2",
diff --git a/packages/docgen/test/formatter-markdown.js b/packages/docgen/test/formatter-markdown.js
index b2904d4247e822..326db0bd614392 100644
--- a/packages/docgen/test/formatter-markdown.js
+++ b/packages/docgen/test/formatter-markdown.js
@@ -13,7 +13,28 @@ describe( 'Formatter', () => {
 			[
 				{
 					path: docPath + '-code.js',
-					description: 'My declaration example.',
+					description: `My declaration example.
+Client-side hyphen-
+ation.
+
+Code:
+
+\`\`\`js
+const myCode = 'code';
+\`\`\`
+
+Unordered Lists:
+
+-   List Item.
+-   List Item.
+    List Item.
+
+Ordered Lists:
+
+1.  List Item.
+2.  List Item.
+    List Item.
+`,
 					tags: [
 						{
 							tag: 'param',
@@ -36,7 +57,37 @@ describe( 'Formatter', () => {
 			'API docs'
 		);
 		expect( docs ).toBe(
-			'# API docs\n\n## myDeclaration\n\nMy declaration example.\n\n*Parameters*\n\n- *firstParam* `number`: First declaration parameter.\n\n*Returns*\n\n- `number`: The result of the declaration.\n'
+			`# API docs
+
+## myDeclaration
+
+My declaration example. Client-side hyphenation.
+
+Code:
+
+\`\`\`js
+const myCode = 'code';
+\`\`\`
+
+Unordered Lists:
+
+-   List Item.
+-   List Item. List Item.
+
+Ordered Lists:
+
+1.  List Item.
+2.  List Item. List Item.
+
+
+*Parameters*
+
+- *firstParam* \`number\`: First declaration parameter.
+
+*Returns*
+
+- \`number\`: The result of the declaration.
+`
 		);
 	} );
 } );
diff --git a/packages/docgen/test/get-intermediate-representation.js b/packages/docgen/test/get-intermediate-representation.js
index 43001aaedeeae3..e61f3101ad8438 100644
--- a/packages/docgen/test/get-intermediate-representation.js
+++ b/packages/docgen/test/get-intermediate-representation.js
@@ -284,6 +284,47 @@ describe( 'Intermediate Representation', () => {
 					} ),
 				] ) );
 
+			it( 'named identifier with RestElements', () => {
+				expect(
+					parse( `
+						/**
+						 * RestElement example.
+						 */
+						const { someKey, ...someApi } = { someKey: 2, restOne: 1, restTwo: 2 };
+
+						export {someApi};
+					` )
+				).toEqual( [
+					{
+						description: 'RestElement example.',
+						lineEnd: 6,
+						lineStart: 6,
+						name: 'someApi',
+						path: 'test-code.ts',
+						tags: [],
+					},
+				] );
+			} );
+
+			it( 'named identifier with undocumented RestElement', () => {
+				expect(
+					parse( `
+						const { someKey, ...otherKeys } = { someKey: 2, restOne: 1, restTwo: 2 };
+
+						export const someApi = {};
+					` )
+				).toEqual( [
+					{
+						description: 'Undocumented declaration.',
+						lineEnd: 3,
+						lineStart: 3,
+						name: 'someApi',
+						path: 'test-code.ts',
+						tags: [],
+					},
+				] );
+			} );
+
 			it( 'named identifier with destructuring', () =>
 				expect(
 					parse( `
diff --git a/packages/docgen/test/get-jsdoc-from-token.js b/packages/docgen/test/get-jsdoc-from-token.js
index 6a6d396e26d4e3..09fde0fb5e75b6 100644
--- a/packages/docgen/test/get-jsdoc-from-token.js
+++ b/packages/docgen/test/get-jsdoc-from-token.js
@@ -2,6 +2,14 @@
  * Internal dependencies
  */
 const getJSDocFromToken = require( '../lib/get-jsdoc-from-token' );
+const engine = require( '../lib/engine' );
+
+/**
+ * Generate the AST necessary to assert inferred types.
+ *
+ * @param {string} code - Actual source code to parse.
+ */
+const parse = ( code ) => engine( 'test-code.ts', code ).ast.body[ 0 ];
 
 describe( 'JSDoc', () => {
 	it( 'extracts description and tags', () => {
@@ -107,4 +115,41 @@ describe( 'JSDoc', () => {
 			getJSDocFromToken( { leadingComments: [ { value: '' } ] } )
 		).toBeUndefined();
 	} );
+
+	it( 'correctly matches qualified tags to unqualified tag types', () => {
+		const token = parse( `
+			/**
+			 * @param props Component props.
+			 * @param props.foo A property of props.
+			 * @param props.bar A second property of props.
+			 * @param baz A second parameter
+			 * @param test0 A third parameter
+			 * @param props2 A fourth parameter
+			 * @param props2.test A property of props2.
+			 * @param props2.test1 A second property of props2.
+			 * @param test3 A fifth parameter
+			 * @return A component.
+			 */
+			function fn( { foo, bar }: { foo: string, bar: number }, baz: FooType, test0: TestType, { test, test1 }: { test: number, test1: string }, test3: BarType ): string {
+				return foo;
+			}
+		` );
+
+		const tags = getJSDocFromToken( token ).tags;
+		// Finds the parsed type of a tag by name.
+		const expectType = ( name, type ) => {
+			expect( tags.find( ( t ) => t.name === name ).type ).toBe( type );
+		};
+
+		// Verifies that the logic for indexing unqualified/qualified tags works
+		// correctly -- that the function signature TS types are associated
+		// correctly with the JSDoc params.
+		expectType( 'props.foo', 'string' );
+		expectType( 'props.bar', 'number' );
+		expectType( 'baz', 'FooType' );
+		expectType( 'test0', 'TestType' );
+		expectType( 'props2.test', 'number' );
+		expectType( 'props2.test1', 'string' );
+		expectType( 'test3', 'BarType' );
+	} );
 } );
diff --git a/packages/docgen/test/get-type-annotation.js b/packages/docgen/test/get-type-annotation.js
index fdf114dfd1f674..4c9a74efe06b45 100644
--- a/packages/docgen/test/get-type-annotation.js
+++ b/packages/docgen/test/get-type-annotation.js
@@ -31,12 +31,12 @@ describe( 'Type annotations', () => {
 		expect( result ).toBeFalsy();
 	} );
 
-	const paramTag = {
+	const paramTag = /** @type {const} */ ( {
 		tag: 'param',
 		type: '',
 		name: 'foo',
 		description: 'A foo parameter',
-	};
+	} );
 
 	describe( 'simple types', () => {
 		const keywordTypes = [
@@ -100,6 +100,26 @@ describe( 'Type annotations', () => {
 		} );
 	} );
 
+	describe( 'qualified types', () => {
+		const node = parse( `
+			function fn( foo: My.Foo< string >, bar: My.Bar ) {
+				return 0;
+			}
+		` );
+
+		it( 'should get the qualified param type with type parameters', () => {
+			expect(
+				getTypeAnnotation( { tag: 'param', name: 'foo' }, node, 0 )
+			).toBe( 'My.Foo< string >' );
+		} );
+
+		it( 'should get the qualified param type without type parameters', () => {
+			expect(
+				getTypeAnnotation( { tag: 'param', name: 'bar' }, node, 1 )
+			).toBe( 'My.Bar' );
+		} );
+	} );
+
 	describe( 'literal values', () => {
 		it.each( [ "'a-string-literal'", '1000n', 'true', '1000' ] )(
 			'should handle %s',
@@ -443,4 +463,22 @@ describe( 'Type annotations', () => {
 			expect( getStateArgType( code ) ).toBe( 'number' );
 		} );
 	} );
+
+	it( 'should find types in a constant function expression assignment', () => {
+		const node = parse( `
+				export const __unstableAwaitPromise = function < T >( promise: Promise< T > ): {
+					type: 'AWAIT_PROMISE';
+					promise: Promise< T >;
+				} {
+					return {
+						type: 'AWAIT_PROMISE',
+						promise,
+					};
+				};
+			 ` );
+
+		expect(
+			getTypeAnnotation( { tag: 'param', name: 'promise' }, node, 0 )
+		).toBe( 'Promise< T >' );
+	} );
 } );
diff --git a/packages/docgen/tsconfig.json b/packages/docgen/tsconfig.json
index 7dd12ba6ccf829..df0072645c53ba 100644
--- a/packages/docgen/tsconfig.json
+++ b/packages/docgen/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "lib",
diff --git a/packages/dom-ready/.npmrc b/packages/dom-ready/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/dom-ready/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index 0d47dbe8b43a2b..27499bdb048a1c 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,22 +161,22 @@
 
 ## 2.9.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.1.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
-### Polish
+### Internal
 
 -   Moved `@WordPress/packages` repository to `@WordPress/gutenberg` ([#7805](https://github.com/WordPress/gutenberg/pull/7805))
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 0ca5ded23b414f..d3aa36e6c6efe5 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,15 +19,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/dom-ready/tsconfig.json b/packages/dom-ready/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/dom-ready/tsconfig.json
+++ b/packages/dom-ready/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/dom/.npmrc b/packages/dom/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/dom/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index c25df5fa9bb1ac..0ce2a24565d0d5 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,112 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+-   fix return types of `focus.tabbable` methods to be `HTMLElement` instead of `Element`.
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -20,7 +126,7 @@
 
 ## 3.14.0 (2022-07-27)
 
-- `getRectangleFromRange` may now return `null`.
+-   `getRectangleFromRange` may now return `null`.
 
 ## 3.13.0 (2022-07-13)
 
@@ -32,9 +138,9 @@
 
 ## 3.9.0 (2022-05-18)
 
-### Deprecation
+### Deprecations
 
-- Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)).
+-   Deprecate `isNumberInput`, as it is no longer used internally ([#40896](https://github.com/WordPress/gutenberg/pull/40896)).
 
 ## 3.8.0 (2022-05-04)
 
@@ -61,7 +167,7 @@
 
 ## 2.18.0 (2021-04-29)
 
-### New Feature
+### New Features
 
 -   Export type definitions.
 
@@ -69,19 +175,19 @@
 
 ## 2.11.0 (2020-06-15)
 
-### New Feature
+### New Features
 
 -   Add `documentHasUncollapsedSelection` to inquire about ranges of selected text in the document, including the separately managed selections inside <input> and <textarea> elements.
 
 ## 2.10.0 (2020-05-28)
 
-### New Feature
+### New Features
 
 -   Add `documentHasTextSelection` to inquire specifically about ranges of selected text, in addition to the existing `documentHasSelection`.
 
 ## 2.1.0 (2019-03-06)
 
-### Bug Fix
+### Bug Fixes
 
 -   Update `isHorizontalEdge` to account for empty text nodes.
 -   `tabbables.find` considers at most a single radio input for a given name. The checked input is given priority, falling back to the first in the tabindex-sorted set if there is no checked input.
@@ -100,6 +206,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/dom/README.md b/packages/dom/README.md
index 3241ab46479ece..26740c74e8561e 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -28,8 +28,7 @@ _Returns_
 
 ### documentHasSelection
 
-Check whether the current document has a selection. This includes focus in
-input fields, textareas, and general rich-text selection.
+Check whether the current document has a selection. This includes focus in input fields, textareas, and general rich-text selection.
 
 _Parameters_
 
@@ -41,9 +40,7 @@ _Returns_
 
 ### documentHasTextSelection
 
-Check whether the current document has selected text. This applies to ranges
-of text in the document, and not selection inside `<input>` and `<textarea>`
-elements.
+Check whether the current document has selected text. This applies to ranges of text in the document, and not selection inside `<input>` and `<textarea>` elements.
 
 See: <https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection#Related_objects>.
 
@@ -57,9 +54,7 @@ _Returns_
 
 ### documentHasUncollapsedSelection
 
-Check whether the current document has any sort of (uncollapsed) selection.
-This includes ranges of text across elements and any selection inside
-textual `<input>` and `<textarea>` elements.
+Check whether the current document has any sort of (uncollapsed) selection. This includes ranges of text across elements and any selection inside textual `<input>` and `<textarea>` elements.
 
 _Parameters_
 
@@ -71,8 +66,7 @@ _Returns_
 
 ### focus
 
-Object grouping `focusable` and `tabbable` utils
-under the keys with the same name.
+Object grouping `focusable` and `tabbable` utils under the keys with the same name.
 
 ### getFilesFromDataTransfer
 
@@ -88,9 +82,7 @@ _Returns_
 
 ### getOffsetParent
 
-Returns the closest positioned element, or null under any of the conditions
-of the offsetParent specification. Unlike offsetParent, this function is not
-limited to HTMLElement and accepts any Node (e.g. Node.TEXT_NODE).
+Returns the closest positioned element, or null under any of the conditions of the offsetParent specification. Unlike offsetParent, this function is not limited to HTMLElement and accepts any Node (e.g. Node.TEXT_NODE).
 
 _Related_
 
@@ -122,8 +114,7 @@ _Returns_
 
 ### getRectangleFromRange
 
-Get the rectangle of a given Range. Returns `null` if no suitable rectangle
-can be found.
+Get the rectangle of a given Range. Returns `null` if no suitable rectangle can be found.
 
 _Parameters_
 
@@ -135,11 +126,12 @@ _Returns_
 
 ### getScrollContainer
 
-Given a DOM node, finds the closest scrollable container node.
+Given a DOM node, finds the closest scrollable container node or the node itself, if scrollable.
 
 _Parameters_
 
 -   _node_ `Element | null`: Node from which to start.
+-   _direction_ `?string`: Direction of scrollable container to search for ('vertical', 'horizontal', 'all'). Defaults to 'vertical'.
 
 _Returns_
 
@@ -147,8 +139,7 @@ _Returns_
 
 ### insertAfter
 
-Given two DOM nodes, inserts the former in the DOM as the next sibling of
-the latter.
+Given two DOM nodes, inserts the former in the DOM as the next sibling of the latter.
 
 _Parameters_
 
@@ -161,8 +152,7 @@ _Returns_
 
 ### isEmpty
 
-Recursively checks if an element is empty. An element is not empty if it
-contains text or contains elements with attributes such as images.
+Recursively checks if an element is empty. An element is not empty if it contains text or contains elements with attributes such as images.
 
 _Parameters_
 
@@ -174,8 +164,7 @@ _Returns_
 
 ### isEntirelySelected
 
-Check whether the contents of the element have been entirely selected.
-Returns true if there is no possibility of selection.
+Check whether the contents of the element have been entirely selected. Returns true if there is no possibility of selection.
 
 _Parameters_
 
@@ -203,7 +192,7 @@ Check whether the selection is horizontally at the edge of the container.
 
 _Parameters_
 
--   _container_ `Element`: Focusable element.
+-   _container_ `HTMLElement`: Focusable element.
 -   _isReverse_ `boolean`: Set to true to check left, false for right.
 
 _Returns_
@@ -250,6 +239,22 @@ _Returns_
 
 -   `boolean`: True if rtl, false if ltr.
 
+### isSelectionForward
+
+Returns true if the given selection object is in the forward direction, or false otherwise.
+
+_Related_
+
+-   <https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition>
+
+_Parameters_
+
+-   _selection_ `Selection`: Selection object to check.
+
+_Returns_
+
+-   `boolean`: Whether the selection is forward.
+
 ### isTextContent
 
 _Parameters_
@@ -262,8 +267,7 @@ _Returns_
 
 ### isTextField
 
-Check whether the given element is a text field, where text field is defined
-by the ability to select within the input, or that it is contenteditable.
+Check whether the given element is a text field, where text field is defined by the ability to select within the input, or that it is contenteditable.
 
 See: <https://html.spec.whatwg.org/#textFieldSelection>
 
@@ -281,7 +285,7 @@ Check whether the selection is vertically at the edge of the container.
 
 _Parameters_
 
--   _container_ `Element`: Focusable element.
+-   _container_ `HTMLElement`: Focusable element.
 -   _isReverse_ `boolean`: Set to true to check top, false for bottom.
 
 _Returns_
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 2aebde2b1de841..f2b96de10b5b61 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,16 +20,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/deprecated": "file:../deprecated"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/deprecated": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/dom/src/dom/get-rectangle-from-range.js b/packages/dom/src/dom/get-rectangle-from-range.js
index 7674b4b27c600e..12946c753b43f5 100644
--- a/packages/dom/src/dom/get-rectangle-from-range.js
+++ b/packages/dom/src/dom/get-rectangle-from-range.js
@@ -43,10 +43,18 @@ export default function getRectangleFromRange( range ) {
 		} = filteredRects[ 0 ];
 
 		for ( const { top, bottom, left, right } of filteredRects ) {
-			if ( top < furthestTop ) furthestTop = top;
-			if ( bottom > furthestBottom ) furthestBottom = bottom;
-			if ( left < furthestLeft ) furthestLeft = left;
-			if ( right > furthestRight ) furthestRight = right;
+			if ( top < furthestTop ) {
+				furthestTop = top;
+			}
+			if ( bottom > furthestBottom ) {
+				furthestBottom = bottom;
+			}
+			if ( left < furthestLeft ) {
+				furthestLeft = left;
+			}
+			if ( right > furthestRight ) {
+				furthestRight = right;
+			}
 		}
 
 		return new window.DOMRect(
@@ -89,7 +97,7 @@ export default function getRectangleFromRange( range ) {
 	// by adding a temporary text node with zero-width space to the range.
 	//
 	// See: https://stackoverflow.com/a/6847328/995445
-	if ( ! rect ) {
+	if ( ! rect || rect.height === 0 ) {
 		assertIsDefined( ownerDocument, 'ownerDocument' );
 		const padNode = ownerDocument.createTextNode( '\u200b' );
 		// Do not modify the live range.
diff --git a/packages/dom/src/dom/get-scroll-container.js b/packages/dom/src/dom/get-scroll-container.js
index 3646572503e2f5..da46f23c660ba2 100644
--- a/packages/dom/src/dom/get-scroll-container.js
+++ b/packages/dom/src/dom/get-scroll-container.js
@@ -4,24 +4,40 @@
 import getComputedStyle from './get-computed-style';
 
 /**
- * Given a DOM node, finds the closest scrollable container node.
- *
- * @param {Element | null} node Node from which to start.
+ * Given a DOM node, finds the closest scrollable container node or the node
+ * itself, if scrollable.
  *
+ * @param {Element | null} node      Node from which to start.
+ * @param {?string}        direction Direction of scrollable container to search for ('vertical', 'horizontal', 'all').
+ *                                   Defaults to 'vertical'.
  * @return {Element | undefined} Scrollable container node, if found.
  */
-export default function getScrollContainer( node ) {
+export default function getScrollContainer( node, direction = 'vertical' ) {
 	if ( ! node ) {
 		return undefined;
 	}
 
-	// Scrollable if scrollable height exceeds displayed...
-	if ( node.scrollHeight > node.clientHeight ) {
-		// ...except when overflow is defined to be hidden or visible
-		const { overflowY } = getComputedStyle( node );
+	if ( direction === 'vertical' || direction === 'all' ) {
+		// Scrollable if scrollable height exceeds displayed...
+		if ( node.scrollHeight > node.clientHeight ) {
+			// ...except when overflow is defined to be hidden or visible
+			const { overflowY } = getComputedStyle( node );
+
+			if ( /(auto|scroll)/.test( overflowY ) ) {
+				return node;
+			}
+		}
+	}
+
+	if ( direction === 'horizontal' || direction === 'all' ) {
+		// Scrollable if scrollable width exceeds displayed...
+		if ( node.scrollWidth > node.clientWidth ) {
+			// ...except when overflow is defined to be hidden or visible
+			const { overflowX } = getComputedStyle( node );
 
-		if ( /(auto|scroll)/.test( overflowY ) ) {
-			return node;
+			if ( /(auto|scroll)/.test( overflowX ) ) {
+				return node;
+			}
 		}
 	}
 
@@ -30,5 +46,8 @@ export default function getScrollContainer( node ) {
 	}
 
 	// Continue traversing.
-	return getScrollContainer( /** @type {Element} */ ( node.parentNode ) );
+	return getScrollContainer(
+		/** @type {Element} */ ( node.parentNode ),
+		direction
+	);
 }
diff --git a/packages/dom/src/dom/index.js b/packages/dom/src/dom/index.js
index f21ec1e4e85e66..4522ac1fd1b89c 100644
--- a/packages/dom/src/dom/index.js
+++ b/packages/dom/src/dom/index.js
@@ -24,3 +24,4 @@ export { default as isEmpty } from './is-empty';
 export { default as removeInvalidHTML } from './remove-invalid-html';
 export { default as isRTL } from './is-rtl';
 export { default as safeHTML } from './safe-html';
+export { default as isSelectionForward } from './is-selection-forward';
diff --git a/packages/dom/src/dom/is-edge.js b/packages/dom/src/dom/is-edge.js
index 51c160f915d58d..366c5b8155c8dd 100644
--- a/packages/dom/src/dom/is-edge.js
+++ b/packages/dom/src/dom/is-edge.js
@@ -8,15 +8,16 @@ import isSelectionForward from './is-selection-forward';
 import hiddenCaretRangeFromPoint from './hidden-caret-range-from-point';
 import { assertIsDefined } from '../utils/assert-is-defined';
 import isInputOrTextArea from './is-input-or-text-area';
+import { scrollIfNoRange } from './scroll-if-no-range';
 
 /**
  * Check whether the selection is at the edge of the container. Checks for
  * horizontal position by default. Set `onlyVertical` to true to check only
  * vertically.
  *
- * @param {Element} container            Focusable element.
- * @param {boolean} isReverse            Set to true to check left, false to check right.
- * @param {boolean} [onlyVertical=false] Set to true to check only vertical position.
+ * @param {HTMLElement} container            Focusable element.
+ * @param {boolean}     isReverse            Set to true to check left, false to check right.
+ * @param {boolean}     [onlyVertical=false] Set to true to check only vertical position.
  *
  * @return {boolean} True if at the edge, false if not.
  */
@@ -36,7 +37,7 @@ export default function isEdge( container, isReverse, onlyVertical = false ) {
 		return container.value.length === container.selectionStart;
 	}
 
-	if ( ! ( /** @type {HTMLElement} */ ( container ).isContentEditable ) ) {
+	if ( ! container.isContentEditable ) {
 		return true;
 	}
 
@@ -96,11 +97,8 @@ export default function isEdge( container, isReverse, onlyVertical = false ) {
 	// pixels. `getComputedStyle` may return a value with different units.
 	const x = isReverseDir ? containerRect.left + 1 : containerRect.right - 1;
 	const y = isReverse ? containerRect.top + 1 : containerRect.bottom - 1;
-	const testRange = hiddenCaretRangeFromPoint(
-		ownerDocument,
-		x,
-		y,
-		/** @type {HTMLElement} */ ( container )
+	const testRange = scrollIfNoRange( container, isReverse, () =>
+		hiddenCaretRangeFromPoint( ownerDocument, x, y, container )
 	);
 
 	if ( ! testRange ) {
diff --git a/packages/dom/src/dom/is-horizontal-edge.js b/packages/dom/src/dom/is-horizontal-edge.js
index a9b947d1b8643d..b767c2af5fb3c6 100644
--- a/packages/dom/src/dom/is-horizontal-edge.js
+++ b/packages/dom/src/dom/is-horizontal-edge.js
@@ -6,8 +6,8 @@ import isEdge from './is-edge';
 /**
  * Check whether the selection is horizontally at the edge of the container.
  *
- * @param {Element} container Focusable element.
- * @param {boolean} isReverse Set to true to check left, false for right.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse Set to true to check left, false for right.
  *
  * @return {boolean} True if at the horizontal edge, false if not.
  */
diff --git a/packages/dom/src/dom/is-vertical-edge.js b/packages/dom/src/dom/is-vertical-edge.js
index d1b74e4cb13755..814eb46c8c0850 100644
--- a/packages/dom/src/dom/is-vertical-edge.js
+++ b/packages/dom/src/dom/is-vertical-edge.js
@@ -6,8 +6,8 @@ import isEdge from './is-edge';
 /**
  * Check whether the selection is vertically at the edge of the container.
  *
- * @param {Element} container Focusable element.
- * @param {boolean} isReverse Set to true to check top, false for bottom.
+ * @param {HTMLElement} container Focusable element.
+ * @param {boolean}     isReverse Set to true to check top, false for bottom.
  *
  * @return {boolean} True if at the vertical edge, false if not.
  */
diff --git a/packages/dom/src/dom/place-caret-at-edge.js b/packages/dom/src/dom/place-caret-at-edge.js
index adb69567e759a7..4075fc7c439586 100644
--- a/packages/dom/src/dom/place-caret-at-edge.js
+++ b/packages/dom/src/dom/place-caret-at-edge.js
@@ -5,6 +5,7 @@ import hiddenCaretRangeFromPoint from './hidden-caret-range-from-point';
 import { assertIsDefined } from '../utils/assert-is-defined';
 import isInputOrTextArea from './is-input-or-text-area';
 import isRTL from './is-rtl';
+import { scrollIfNoRange } from './scroll-if-no-range';
 
 /**
  * Gets the range to place.
@@ -70,25 +71,12 @@ export default function placeCaretAtEdge( container, isReverse, x ) {
 		return;
 	}
 
-	let range = getRange( container, isReverse, x );
+	const range = scrollIfNoRange( container, isReverse, () =>
+		getRange( container, isReverse, x )
+	);
 
-	// If no range range can be created or it is outside the container, the
-	// element may be out of view.
-	if (
-		! range ||
-		! range.startContainer ||
-		! container.contains( range.startContainer )
-	) {
-		container.scrollIntoView( isReverse );
-		range = range = getRange( container, isReverse, x );
-
-		if (
-			! range ||
-			! range.startContainer ||
-			! container.contains( range.startContainer )
-		) {
-			return;
-		}
+	if ( ! range ) {
+		return;
 	}
 
 	const { ownerDocument } = container;
diff --git a/packages/dom/src/dom/scroll-if-no-range.js b/packages/dom/src/dom/scroll-if-no-range.js
new file mode 100644
index 00000000000000..13f5c4d86769e8
--- /dev/null
+++ b/packages/dom/src/dom/scroll-if-no-range.js
@@ -0,0 +1,34 @@
+/**
+ * If no range range can be created or it is outside the container, the element
+ * may be out of view, so scroll it into view and try again.
+ *
+ * @param {HTMLElement} container  The container to scroll.
+ * @param {boolean}     alignToTop True to align to top, false to bottom.
+ * @param {Function}    callback   The callback to create the range.
+ *
+ * @return {?Range} The range returned by the callback.
+ */
+export function scrollIfNoRange( container, alignToTop, callback ) {
+	let range = callback();
+
+	// If no range range can be created or it is outside the container, the
+	// element may be out of view.
+	if (
+		! range ||
+		! range.startContainer ||
+		! container.contains( range.startContainer )
+	) {
+		container.scrollIntoView( alignToTop );
+		range = callback();
+
+		if (
+			! range ||
+			! range.startContainer ||
+			! container.contains( range.startContainer )
+		) {
+			return null;
+		}
+	}
+
+	return range;
+}
diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js
index 75e4f72f0c1f77..ed0326fd264139 100644
--- a/packages/dom/src/focusable.js
+++ b/packages/dom/src/focusable.js
@@ -87,7 +87,7 @@ function isValidFocusableArea( element ) {
  * Returns all focusable elements within a given context.
  *
  * @param {Element} context              Element in which to search.
- * @param {Object}  [options]
+ * @param {Object}  options
  * @param {boolean} [options.sequential] If set, only return elements that are
  *                                       sequentially focusable.
  *                                       Non-interactive elements with a
@@ -95,12 +95,10 @@ function isValidFocusableArea( element ) {
  *                                       not sequentially focusable.
  *                                       https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute
  *
- * @return {Element[]} Focusable elements.
+ * @return {HTMLElement[]} Focusable elements.
  */
 export function find( context, { sequential = false } = {} ) {
-	/* eslint-disable jsdoc/no-undefined-types */
 	/** @type {NodeListOf<HTMLElement>} */
-	/* eslint-enable jsdoc/no-undefined-types */
 	const elements = context.querySelectorAll( buildSelector( sequential ) );
 
 	return Array.from( elements ).filter( ( element ) => {
diff --git a/packages/dom/src/phrasing-content.js b/packages/dom/src/phrasing-content.js
index 571d081c2843a1..c9ed0981629747 100644
--- a/packages/dom/src/phrasing-content.js
+++ b/packages/dom/src/phrasing-content.js
@@ -114,6 +114,7 @@ const embeddedContentSchema = {
 			'src',
 			'poster',
 			'preload',
+			'playsinline',
 			'autoplay',
 			'mediagroup',
 			'loop',
diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js
index 66ae1ee7d4fd46..29447150423248 100644
--- a/packages/dom/src/tabbable.js
+++ b/packages/dom/src/tabbable.js
@@ -31,7 +31,7 @@ export function isTabbableIndex( element ) {
 	return getTabIndex( element ) !== -1;
 }
 
-/** @typedef {Element & { type?: string, checked?: boolean, name?: string }} MaybeHTMLInputElement */
+/** @typedef {HTMLElement & { type?: string, checked?: boolean, name?: string }} MaybeHTMLInputElement */
 
 /**
  * Returns a stateful reducer function which constructs a filtered array of
@@ -84,10 +84,10 @@ function createStatefulCollapseRadioGroup() {
  * sort where equal tabIndex should be left in order of their occurrence in the
  * document.
  *
- * @param {Element} element Element.
- * @param {number}  index   Array index of element.
+ * @param {HTMLElement} element Element.
+ * @param {number}      index   Array index of element.
  *
- * @return {{ element: Element, index: number }} Mapped object with element, index.
+ * @return {{ element: HTMLElement, index: number }} Mapped object with element, index.
  */
 function mapElementToObjectTabbable( element, index ) {
 	return { element, index };
@@ -97,9 +97,9 @@ function mapElementToObjectTabbable( element, index ) {
  * An array map callback, returning an element of the given mapped object's
  * element value.
  *
- * @param {{ element: Element }} object Mapped object with element.
+ * @param {{ element: HTMLElement }} object Mapped object with element.
  *
- * @return {Element} Mapped object element.
+ * @return {HTMLElement} Mapped object element.
  */
 function mapObjectTabbableToElement( object ) {
 	return object.element;
@@ -110,8 +110,8 @@ function mapObjectTabbableToElement( object ) {
  *
  * @see mapElementToObjectTabbable
  *
- * @param {{ element: Element, index: number }} a First object to compare.
- * @param {{ element: Element, index: number }} b Second object to compare.
+ * @param {{ element: HTMLElement, index: number }} a First object to compare.
+ * @param {{ element: HTMLElement, index: number }} b Second object to compare.
  *
  * @return {number} Comparator result.
  */
@@ -129,9 +129,9 @@ function compareObjectTabbables( a, b ) {
 /**
  * Givin focusable elements, filters out tabbable element.
  *
- * @param {Element[]} focusables Focusable elements to filter.
+ * @param {HTMLElement[]} focusables Focusable elements to filter.
  *
- * @return {Element[]} Tabbable elements.
+ * @return {HTMLElement[]} Tabbable elements.
  */
 function filterTabbable( focusables ) {
 	return focusables
@@ -144,7 +144,7 @@ function filterTabbable( focusables ) {
 
 /**
  * @param {Element} context
- * @return {Element[]} Tabbable elements within the context.
+ * @return {HTMLElement[]} Tabbable elements within the context.
  */
 export function find( context ) {
 	return filterTabbable( findFocusable( context ) );
@@ -156,21 +156,17 @@ export function find( context ) {
  * @param {Element} element The focusable element before which to look. Defaults
  *                          to the active element.
  *
- * @return {Element|undefined} Preceding tabbable element.
+ * @return {HTMLElement|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 ) =>
+				// eslint-disable-next-line no-bitwise
+				element.compareDocumentPosition( focusable ) &
+				element.DOCUMENT_POSITION_PRECEDING
+		);
 }
 
 /**
@@ -179,14 +175,13 @@ export function findPrevious( element ) {
  * @param {Element} element The focusable element after which to look. Defaults
  *                          to the active element.
  *
- * @return {Element|undefined} Next tabbable element.
+ * @return {HTMLElement|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 ) =>
+			// eslint-disable-next-line no-bitwise
+			element.compareDocumentPosition( focusable ) &
+			element.DOCUMENT_POSITION_FOLLOWING
+	);
 }
diff --git a/packages/dom/tsconfig.json b/packages/dom/tsconfig.json
index a12c83344f044b..7cdff6c141151b 100644
--- a/packages/dom/tsconfig.json
+++ b/packages/dom/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/e2e-test-utils-playwright/.npmrc b/packages/e2e-test-utils-playwright/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/e2e-test-utils-playwright/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index 34c83ae9061ba8..b1a35757f7496a 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,4 +2,88 @@
 
 ## Unreleased
 
--- Initial version of the package.
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.26.0 (2024-05-16)
+
+## 0.25.0 (2024-05-02)
+
+## 0.24.0 (2024-04-19)
+
+## 0.23.0 (2024-04-03)
+
+## 0.22.0 (2024-03-21)
+
+## 0.21.0 (2024-03-06)
+
+## 0.20.0 (2024-02-21)
+
+## 0.19.0 (2024-02-09)
+
+## 0.18.0 (2024-01-24)
+
+## 0.17.0 (2024-01-10)
+
+## 0.16.0 (2023-12-13)
+
+## 0.15.0 (2023-11-29)
+
+## 0.14.0 (2023-11-16)
+
+## 0.13.0 (2023-11-02)
+
+## 0.12.0 (2023-10-18)
+
+## 0.11.0 (2023-10-05)
+
+## 0.10.0 (2023-09-20)
+
+## 0.9.0 (2023-08-31)
+
+## 0.8.0 (2023-08-16)
+
+## 0.7.0 (2023-08-10)
+
+## 0.6.0 (2023-07-20)
+
+## 0.5.0 (2023-07-05)
+
+## 0.4.0 (2023-06-23)
+
+## 0.3.0 (2023-06-07)
+
+## 0.2.0 (2023-05-24)
+
+## 0.1.0 (2023-05-10)
+
+-   Initial version of the package.
diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md
index 216509721e44b8..883bd87fb9c3c6 100644
--- a/packages/e2e-test-utils-playwright/README.md
+++ b/packages/e2e-test-utils-playwright/README.md
@@ -4,6 +4,10 @@ End-To-End (E2E) Playwright test utils for WordPress.
 
 _It works properly with the minimum version of Gutenberg `9.2.0` or the minimum version of WordPress `5.6.0`._
 
+<div class="callout callout-alert">
+This package is still under active development. Documentation might not be up-to-date, and the <code>v0.x</code> version can introduce breaking changes without a detailed migration guide. Early adopters are encouraged to use a <a href="https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json">lock file</a> to prevent unexpected breakages.
+</div>
+
 ## Installation
 
 Install the module
@@ -12,7 +16,7 @@ Install the module
 npm install @wordpress/e2e-test-utils-playwright --save-dev
 ```
 
-**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## API
 
@@ -38,20 +42,19 @@ await admin.visitAdminPage( 'options-general.php' );
 End to end test utilities for the WordPress Block Editor.
 
 To use these utilities, instantiate them within each test file:
+
 ```js
 test.use( {
 	editor: async ( { page }, use ) => {
-		await use( new Editor( { page, hasIframe: true } ) );
+		await use( new Editor( { page } ) );
 	},
 } );
 ```
 
-The `hasIframe` property denotes whether the editor canvas uses an Iframe, as the site editor currently does. Omit this for non-iframe editors.
-
 Within a test or test utility, use the `canvas` property to select elements within the iframe canvas:
 
 ```js
-await editor.canvas.locator( 'role=document[name="Paragraph block"i]' )
+await editor.canvas.locator( 'role=document[name="Paragraph block"i]' );
 ```
 
 ### PageUtils
@@ -60,7 +63,7 @@ Generic Playwright utilities for interacting with web pages.
 
 ```js
 const pageUtils = new PageUtils( { page } );
-await pageUtils.pressKeyWithModifier( 'primary', 'a' );
+await pageUtils.pressKeys( 'primary+a' );
 ```
 
 ### RequestUtils
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index d168c7d70afbc4..ae91fa25e882d8 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "0.0.0",
-	"private": true,
+	"version": "1.13.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -31,12 +31,12 @@
 	"main": "./build/index.js",
 	"types": "./build-types",
 	"dependencies": {
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/url": "file:../url",
 		"change-case": "^4.1.2",
 		"form-data": "^4.0.0",
-		"mime": "^3.0.0"
+		"get-port": "^5.1.1",
+		"lighthouse": "^10.4.0",
+		"mime": "^3.0.0",
+		"web-vitals": "^4.2.1"
 	},
 	"peerDependencies": {
 		"@playwright/test": ">=1"
diff --git a/packages/e2e-test-utils-playwright/src/admin/create-new-post.js b/packages/e2e-test-utils-playwright/src/admin/create-new-post.js
deleted file mode 100644
index fe748929561114..00000000000000
--- a/packages/e2e-test-utils-playwright/src/admin/create-new-post.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Creates new post.
- *
- * @this {import('.').Editor}
- * @param {Object}  object                    Object to create new post, along with tips enabling option.
- * @param {string}  [object.postType]         Post type of the new post.
- * @param {string}  [object.title]            Title of the new post.
- * @param {string}  [object.content]          Content of the new post.
- * @param {string}  [object.excerpt]          Excerpt of the new post.
- * @param {boolean} [object.showWelcomeGuide] Whether to show the welcome guide.
- */
-export async function createNewPost( {
-	postType,
-	title,
-	content,
-	excerpt,
-	showWelcomeGuide = false,
-} = {} ) {
-	const query = addQueryArgs( '', {
-		post_type: postType,
-		post_title: title,
-		content,
-		excerpt,
-	} ).slice( 1 );
-
-	await this.visitAdminPage( 'post-new.php', query );
-
-	await this.page.waitForSelector( '.edit-post-layout' );
-
-	const isWelcomeGuideActive = await this.page.evaluate( () =>
-		window.wp.data
-			.select( 'core/edit-post' )
-			.isFeatureActive( 'welcomeGuide' )
-	);
-	const isFullscreenMode = await this.page.evaluate( () =>
-		window.wp.data
-			.select( 'core/edit-post' )
-			.isFeatureActive( 'fullscreenMode' )
-	);
-
-	if ( showWelcomeGuide !== isWelcomeGuideActive ) {
-		await this.page.evaluate( () =>
-			window.wp.data
-				.dispatch( 'core/edit-post' )
-				.toggleFeature( 'welcomeGuide' )
-		);
-
-		await this.page.reload();
-		await this.page.waitForSelector( '.edit-post-layout' );
-	}
-
-	if ( isFullscreenMode ) {
-		await this.page.evaluate( () =>
-			window.wp.data
-				.dispatch( 'core/edit-post' )
-				.toggleFeature( 'fullscreenMode' )
-		);
-
-		await this.page.waitForSelector( 'body:not(.is-fullscreen-mode)' );
-	}
-}
diff --git a/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts
new file mode 100644
index 00000000000000..a5d6617946ae31
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/admin/create-new-post.ts
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from './';
+
+interface NewPostOptions {
+	postType?: string;
+	title?: string;
+	content?: string;
+	excerpt?: string;
+	showWelcomeGuide?: boolean;
+	fullscreenMode?: boolean;
+}
+
+/**
+ * Creates new post.
+ *
+ * @param this
+ * @param options Options to create new post.
+ */
+export async function createNewPost(
+	this: Admin,
+	options: NewPostOptions = {}
+) {
+	const query = new URLSearchParams();
+	const { postType, title, content, excerpt } = options;
+
+	if ( postType ) {
+		query.set( 'post_type', postType );
+	}
+	if ( title ) {
+		query.set( 'post_title', title );
+	}
+	if ( content ) {
+		query.set( 'content', content );
+	}
+	if ( excerpt ) {
+		query.set( 'excerpt', excerpt );
+	}
+
+	await this.visitAdminPage( 'post-new.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: options.showWelcomeGuide ?? false,
+		fullscreenMode: options.fullscreenMode ?? false,
+	} );
+}
diff --git a/packages/e2e-test-utils-playwright/src/admin/edit-post.ts b/packages/e2e-test-utils-playwright/src/admin/edit-post.ts
new file mode 100644
index 00000000000000..77cf390d02aa01
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/admin/edit-post.ts
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import type { Admin } from '.';
+
+/**
+ * Open the post with given ID in the editor.
+ *
+ * @param this
+ * @param postId Post ID to visit.
+ */
+export async function editPost( this: Admin, postId: string | number ) {
+	const query = new URLSearchParams();
+
+	query.set( 'post', String( postId ) );
+	query.set( 'action', 'edit' );
+
+	await this.visitAdminPage( 'post.php', query.toString() );
+
+	await this.editor.setPreferences( 'core/edit-post', {
+		welcomeGuide: false,
+		fullscreenMode: false,
+	} );
+}
diff --git a/packages/e2e-test-utils-playwright/src/admin/get-page-error.ts b/packages/e2e-test-utils-playwright/src/admin/get-page-error.ts
index 310461da84a10b..cbb345e2dd177b 100644
--- a/packages/e2e-test-utils-playwright/src/admin/get-page-error.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/get-page-error.ts
@@ -7,8 +7,6 @@ import type { Admin } from './';
  * Regular expression matching a displayed PHP error within a markup string.
  *
  * @see https://github.com/php/php-src/blob/598175e/main/main.c#L1257-L1297
- *
- * @type {RegExp}
  */
 const REGEXP_PHP_ERROR =
 	/(<b>)?(Fatal error|Recoverable fatal error|Warning|Parse error|Notice|Strict Standards|Deprecated|Unknown error)(<\/b>)?: (.*?) in (.*?) on line (<b>)?\d+(<\/b>)?/;
@@ -21,10 +19,8 @@ const REGEXP_PHP_ERROR =
  *
  * @see http://php.net/manual/en/function.error-reporting.php
  *
- * @param {Admin} this
- *
- * @return {Promise<?string>} Promise resolving to a string or null, depending
- *                            whether a page error is present.
+ * @param this
+ * @return Promise resolving to a string or null, depending whether a page error is present.
  */
 export async function getPageError( this: Admin ) {
 	const content = await this.page.content();
diff --git a/packages/e2e-test-utils-playwright/src/admin/index.ts b/packages/e2e-test-utils-playwright/src/admin/index.ts
index 5597e1fddc18c3..08d2baf4b6520d 100644
--- a/packages/e2e-test-utils-playwright/src/admin/index.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/index.ts
@@ -9,29 +9,40 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
 import { createNewPost } from './create-new-post';
 import { getPageError } from './get-page-error';
 import { visitAdminPage } from './visit-admin-page';
+import { editPost } from './edit-post';
 import { visitSiteEditor } from './visit-site-editor';
 import type { PageUtils } from '../page-utils';
+import type { Editor } from '../editor';
 
 type AdminConstructorProps = {
 	page: Page;
 	pageUtils: PageUtils;
+	editor: Editor;
 };
 
 export class Admin {
-	browser: Browser;
 	page: Page;
-	pageUtils: PageUtils;
 	context: BrowserContext;
+	browser: Browser;
+	pageUtils: PageUtils;
+	editor: Editor;
 
-	constructor( { page, pageUtils }: AdminConstructorProps ) {
+	constructor( { page, pageUtils, editor }: AdminConstructorProps ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
 		this.pageUtils = pageUtils;
+		this.editor = editor;
 	}
 
-	createNewPost = createNewPost.bind( this );
-	getPageError = getPageError.bind( this );
-	visitAdminPage = visitAdminPage.bind( this );
-	visitSiteEditor = visitSiteEditor.bind( this );
+	/** @borrows createNewPost as this.createNewPost */
+	createNewPost: typeof createNewPost = createNewPost.bind( this );
+	/** @borrows editPost as this.editPost */
+	editPost: typeof editPost = editPost.bind( this );
+	/** @borrows getPageError as this.getPageError */
+	getPageError: typeof getPageError = getPageError.bind( this );
+	/** @borrows visitAdminPage as this.visitAdminPage */
+	visitAdminPage: typeof visitAdminPage = visitAdminPage.bind( this );
+	/** @borrows visitSiteEditor as this.visitSiteEditor */
+	visitSiteEditor: typeof visitSiteEditor = visitSiteEditor.bind( this );
 }
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-admin-page.ts b/packages/e2e-test-utils-playwright/src/admin/visit-admin-page.ts
index 348ce7e075bf65..1ffb20c6cc3f86 100644
--- a/packages/e2e-test-utils-playwright/src/admin/visit-admin-page.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/visit-admin-page.ts
@@ -11,14 +11,14 @@ import type { Admin } from './';
 /**
  * Visits admin page and handle errors.
  *
- * @param {Admin}  this
- * @param {string} adminPath String to be serialized as pathname.
- * @param {string} query     String to be serialized as query portion of URL.
+ * @param this
+ * @param adminPath String to be serialized as pathname.
+ * @param query     String to be serialized as query portion of URL.
  */
 export async function visitAdminPage(
 	this: Admin,
 	adminPath: string,
-	query: string
+	query?: string
 ) {
 	await this.page.goto(
 		join( 'wp-admin', adminPath ) + ( query ? `?${ query }` : '' )
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
index 278bc341d096ee..f0a7db5ad966ff 100644
--- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
@@ -1,50 +1,75 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-
 /**
  * Internal dependencies
  */
 import type { Admin } from './';
 
-export interface SiteEditorQueryParams {
-	postId: string | number;
-	postType: string;
+interface SiteEditorOptions {
+	postId?: string | number;
+	postType?: string;
+	path?: string;
+	canvas?: string;
+	showWelcomeGuide?: boolean;
 }
 
-const CANVAS_SELECTOR = 'iframe[title="Editor canvas"i]';
-
 /**
- * Visits the Site Editor main page
+ * Visits the Site Editor main page.
  *
- * By default, it also skips the welcome guide. The option can be disabled if need be.
- *
- * @param {Admin}                 this
- * @param {SiteEditorQueryParams} query            Query params to be serialized as query portion of URL.
- * @param {boolean}               skipWelcomeGuide Whether to skip the welcome guide as part of the navigation.
+ * @param this
+ * @param options Options to visit the site editor.
  */
 export async function visitSiteEditor(
 	this: Admin,
-	query: SiteEditorQueryParams,
-	skipWelcomeGuide = true
+	options: SiteEditorOptions = {}
 ) {
-	const path = addQueryArgs( '', {
-		...query,
-	} ).slice( 1 );
+	const { postId, postType, path, canvas } = options;
+	const query = new URLSearchParams();
 
-	await this.visitAdminPage( 'site-editor.php', path );
-	await this.page.waitForSelector( CANVAS_SELECTOR );
+	if ( postId ) {
+		query.set( 'postId', String( postId ) );
+	}
+	if ( postType ) {
+		query.set( 'postType', postType );
+	}
+	if ( path ) {
+		query.set( 'path', path );
+	}
+	if ( canvas ) {
+		query.set( 'canvas', canvas );
+	}
+
+	await this.visitAdminPage( 'site-editor.php', query.toString() );
 
-	if ( skipWelcomeGuide ) {
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuide', false );
+	/**
+	 * @todo This is a workaround for the fact that the editor canvas is seen as
+	 * ready and visible before the loading spinner is hidden. Ideally, the
+	 * content underneath the loading overlay should be marked inert until the
+	 * loading is done.
+	 */
+	if ( ! query.size || postId || canvas === 'edit' ) {
+		const canvasLoader = this.page.locator(
+			// Spinner was used instead of the progress bar in an earlier
+			// version of the site editor.
+			'.edit-site-canvas-loader, .edit-site-canvas-spinner'
+		);
+
+		// Wait for the canvas loader to appear first, so that the locator that
+		// waits for the hidden state doesn't resolve prematurely.
+		await canvasLoader.waitFor( { state: 'visible' } );
+		await canvasLoader.waitFor( {
+			state: 'hidden',
+			// Bigger timeout is needed for larger entities, like the Large Post
+			// HTML fixture that we load for performance tests, which often
+			// doesn't make it under the default timeout value.
+			timeout: 60_000,
+		} );
+	}
 
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.toggle( 'core/edit-site', 'welcomeGuideStyles', false );
+	if ( ! options.showWelcomeGuide ) {
+		await this.editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+			welcomeGuideStyles: false,
+			welcomeGuidePage: false,
+			welcomeGuideTemplate: false,
 		} );
 	}
 }
diff --git a/packages/e2e-test-utils-playwright/src/config.ts b/packages/e2e-test-utils-playwright/src/config.ts
index 87c905d43f5457..664f0dbf6fa9c2 100644
--- a/packages/e2e-test-utils-playwright/src/config.ts
+++ b/packages/e2e-test-utils-playwright/src/config.ts
@@ -1,12 +1,12 @@
-const WP_ADMIN_USER = {
-	username: 'admin',
-	password: 'password',
-} as const;
-
 const {
-	WP_USERNAME = WP_ADMIN_USER.username,
-	WP_PASSWORD = WP_ADMIN_USER.password,
+	WP_USERNAME = 'admin',
+	WP_PASSWORD = 'password',
 	WP_BASE_URL = 'http://localhost:8889',
 } = process.env;
 
+const WP_ADMIN_USER = {
+	username: WP_USERNAME,
+	password: WP_PASSWORD,
+} as const;
+
 export { WP_ADMIN_USER, WP_USERNAME, WP_PASSWORD, WP_BASE_URL };
diff --git a/packages/e2e-test-utils-playwright/src/editor/click-block-options-menu-item.ts b/packages/e2e-test-utils-playwright/src/editor/click-block-options-menu-item.ts
index ca1cf82a8c8cc4..e8c02fb11dcb71 100644
--- a/packages/e2e-test-utils-playwright/src/editor/click-block-options-menu-item.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/click-block-options-menu-item.ts
@@ -6,14 +6,13 @@ import type { Editor } from './index';
 /**
  * Clicks a block toolbar button.
  *
- * @param {Editor} this
- * @param {string} label The text string of the button label.
+ * @param this
+ * @param label The text string of the button label.
  */
 export async function clickBlockOptionsMenuItem( this: Editor, label: string ) {
 	await this.clickBlockToolbarButton( 'Options' );
 	await this.page
-		.locator(
-			`role=menu[name="Options"i] >> role=menuitem[name="${ label }"i]`
-		)
+		.getByRole( 'menu', { name: 'Options' } )
+		.getByRole( 'menuitem', { name: label } )
 		.click();
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts b/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts
index 60eec9bfcaf065..3fae09d53454a3 100644
--- a/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/click-block-toolbar-button.ts
@@ -6,8 +6,8 @@ import type { Editor } from './index';
 /**
  * Clicks a block toolbar button.
  *
- * @param {Editor} this
- * @param {string} label The text string of the button label.
+ * @param this
+ * @param label The text string of the button label.
  */
 export async function clickBlockToolbarButton( this: Editor, label: string ) {
 	await this.showBlockToolbar();
diff --git a/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
new file mode 100644
index 00000000000000..36e4e23e587f9d
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/get-blocks.ts
@@ -0,0 +1,76 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks: Block[];
+};
+
+/**
+ * Returns the edited blocks.
+ *
+ * @param this
+ * @param options
+ * @param options.clientId Limit the results to be only under a partial tree of the specified clientId.
+ * @param options.full     Whether to return the full block data or just the name and attributes.
+ *
+ * @return  The blocks.
+ */
+export async function getBlocks(
+	this: Editor,
+	{ clientId, full = false }: { clientId?: string; full?: boolean } = {}
+) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
+	return await this.page.evaluate(
+		( [ _full, _clientId ] ) => {
+			// Serialize serializable attributes of blocks.
+			function serializeAttributes(
+				attributes: Record< string, unknown >
+			) {
+				return Object.fromEntries(
+					Object.entries( attributes ).map( ( [ key, value ] ) => {
+						// Serialize RichTextData to string.
+						if (
+							value instanceof window.wp.richText.RichTextData
+						) {
+							return [ key, ( value as string ).toString() ];
+						}
+						return [ key, value ];
+					} )
+				);
+			}
+
+			// Remove other unpredictable properties like clientId from blocks for testing purposes.
+			function recursivelyTransformBlocks( blocks: Block[] ): Block[] {
+				return blocks.map( ( block ) => ( {
+					name: block.name,
+					attributes: serializeAttributes( block.attributes ),
+					innerBlocks: recursivelyTransformBlocks(
+						block.innerBlocks
+					),
+				} ) );
+			}
+
+			const blocks = window.wp.data
+				.select( 'core/block-editor' )
+				.getBlocks( _clientId ) as Block[];
+
+			// The editor might still contain an unmodified empty block even when it's technically "empty".
+			if (
+				blocks.length === 1 &&
+				window.wp.blocks.isUnmodifiedDefaultBlock( blocks[ 0 ] )
+			) {
+				return [];
+			}
+
+			return _full ? blocks : recursivelyTransformBlocks( blocks );
+		},
+		[ full, clientId ]
+	);
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts b/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts
index 1fa73270132e9f..a0f14d70a2e83e 100644
--- a/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts
@@ -6,11 +6,13 @@ import type { Editor } from './index';
 /**
  * Returns a promise which resolves with the edited post content (HTML string).
  *
- * @param {Editor} this
+ * @param this
  *
- * @return {Promise} Promise resolving with post content markup.
+ * @return Promise resolving with post content markup.
  */
 export async function getEditedPostContent( this: Editor ) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
 	return await this.page.evaluate( () =>
 		window.wp.data.select( 'core/editor' ).getEditedPostContent()
 	);
diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts
index 32d4dff80d6aa4..4ed32134f0979a 100644
--- a/packages/e2e-test-utils-playwright/src/editor/index.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/index.ts
@@ -1,69 +1,95 @@
 /**
  * External dependencies
  */
-import type { Browser, Page, BrowserContext, Frame } from '@playwright/test';
+import type {
+	Browser,
+	Page,
+	BrowserContext,
+	FrameLocator,
+} from '@playwright/test';
 
 /**
  * Internal dependencies
  */
 import { clickBlockOptionsMenuItem } from './click-block-options-menu-item';
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
+import { getBlocks } from './get-blocks';
 import { getEditedPostContent } from './get-edited-post-content';
 import { insertBlock } from './insert-block';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 import { openPreviewPage } from './preview';
 import { publishPost } from './publish-post';
+import { saveDraft } from './save-draft';
 import { selectBlocks } from './select-blocks';
 import { setContent } from './set-content';
+import { setPreferences } from './set-preferences';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
+import { setIsFixedToolbar } from './set-is-fixed-toolbar';
+import { switchToLegacyCanvas } from './switch-to-legacy-canvas';
 import { transformBlockTo } from './transform-block-to';
+import { switchEditorTool } from './switch-editor-tool';
 
 type EditorConstructorProps = {
 	page: Page;
-	hasIframe?: boolean;
 };
 
 export class Editor {
 	browser: Browser;
 	page: Page;
 	context: BrowserContext;
-	#hasIframe: boolean;
 
-	constructor( { page, hasIframe = false }: EditorConstructorProps ) {
+	constructor( { page }: EditorConstructorProps ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
-		this.#hasIframe = hasIframe;
 	}
 
-	get canvas(): Frame | Page {
-		let frame;
-
-		if ( this.#hasIframe ) {
-			frame = this.page.frame( 'editor-canvas' );
-		} else {
-			frame = this.page;
-		}
-
-		if ( ! frame ) {
-			throw new Error(
-				'EditorUtils: unable to find editor canvas iframe or page'
-			);
-		}
-
-		return frame;
+	get canvas(): FrameLocator {
+		return this.page.frameLocator( '[name="editor-canvas"]' );
 	}
-	clickBlockOptionsMenuItem = clickBlockOptionsMenuItem.bind( this );
-	clickBlockToolbarButton = clickBlockToolbarButton.bind( this );
-	getEditedPostContent = getEditedPostContent.bind( this );
-	insertBlock = insertBlock.bind( this );
-	openDocumentSettingsSidebar = openDocumentSettingsSidebar.bind( this );
-	openPreviewPage = openPreviewPage.bind( this );
-	publishPost = publishPost.bind( this );
-	saveSiteEditorEntities = saveSiteEditorEntities.bind( this );
-	selectBlocks = selectBlocks.bind( this );
-	setContent = setContent.bind( this );
-	showBlockToolbar = showBlockToolbar.bind( this );
-	transformBlockTo = transformBlockTo.bind( this );
+
+	/** @borrows clickBlockOptionsMenuItem as this.clickBlockOptionsMenuItem */
+	clickBlockOptionsMenuItem: typeof clickBlockOptionsMenuItem =
+		clickBlockOptionsMenuItem.bind( this );
+	/** @borrows clickBlockToolbarButton as this.clickBlockToolbarButton */
+	clickBlockToolbarButton: typeof clickBlockToolbarButton =
+		clickBlockToolbarButton.bind( this );
+	/** @borrows getBlocks as this.getBlocks */
+	getBlocks: typeof getBlocks = getBlocks.bind( this );
+	/** @borrows getEditedPostContent as this.getEditedPostContent */
+	getEditedPostContent: typeof getEditedPostContent =
+		getEditedPostContent.bind( this );
+	/** @borrows insertBlock as this.insertBlock */
+	insertBlock: typeof insertBlock = insertBlock.bind( this );
+	/** @borrows openDocumentSettingsSidebar as this.openDocumentSettingsSidebar */
+	openDocumentSettingsSidebar: typeof openDocumentSettingsSidebar =
+		openDocumentSettingsSidebar.bind( this );
+	/** @borrows openPreviewPage as this.openPreviewPage */
+	openPreviewPage: typeof openPreviewPage = openPreviewPage.bind( this );
+	/** @borrows publishPost as this.publishPost */
+	publishPost: typeof publishPost = publishPost.bind( this );
+	/** @borrows saveDraft as this.saveDraft */
+	saveDraft: typeof saveDraft = saveDraft.bind( this );
+	/** @borrows saveSiteEditorEntities as this.saveSiteEditorEntities */
+	saveSiteEditorEntities: typeof saveSiteEditorEntities =
+		saveSiteEditorEntities.bind( this );
+	/** @borrows selectBlocks as this.selectBlocks */
+	selectBlocks: typeof selectBlocks = selectBlocks.bind( this );
+	/** @borrows setContent as this.setContent */
+	setContent: typeof setContent = setContent.bind( this );
+	/** @borrows setPreferences as this.setPreferences */
+	setPreferences: typeof setPreferences = setPreferences.bind( this );
+	/** @borrows showBlockToolbar as this.showBlockToolbar */
+	showBlockToolbar: typeof showBlockToolbar = showBlockToolbar.bind( this );
+	/** @borrows setIsFixedToolbar as this.setIsFixedToolbar */
+	setIsFixedToolbar: typeof setIsFixedToolbar =
+		setIsFixedToolbar.bind( this );
+	/** @borrows switchEditorTool as this.switchEditorTool */
+	switchEditorTool: typeof switchEditorTool = switchEditorTool.bind( this );
+	/** @borrows switchToLegacyCanvas as this.switchToLegacyCanvas */
+	switchToLegacyCanvas: typeof switchToLegacyCanvas =
+		switchToLegacyCanvas.bind( this );
+	/** @borrows transformBlockTo as this.transformBlockTo */
+	transformBlockTo: typeof transformBlockTo = transformBlockTo.bind( this );
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts
index 30860dd5764af1..a0a08ac6f847a9 100644
--- a/packages/e2e-test-utils-playwright/src/editor/insert-block.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/insert-block.ts
@@ -12,31 +12,43 @@ interface BlockRepresentation {
 /**
  * Insert a block.
  *
- * @param {Editor}              this
- * @param {BlockRepresentation} blockRepresentation Inserted block representation.
+ * @param this
+ * @param blockRepresentation Inserted block representation.
+ * @param options
+ * @param options.clientId    Client ID of the parent block to insert into.
  */
 async function insertBlock(
 	this: Editor,
-	blockRepresentation: BlockRepresentation
+	blockRepresentation: BlockRepresentation,
+	{ clientId }: { clientId?: string } = {}
 ) {
-	await this.page.evaluate( ( _blockRepresentation ) => {
-		function recursiveCreateBlock( {
-			name,
-			attributes = {},
-			innerBlocks = [],
-		}: BlockRepresentation ): Object {
-			return window.wp.blocks.createBlock(
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
+	await this.page.evaluate(
+		( [ _blockRepresentation, _clientId ] ) => {
+			function recursiveCreateBlock( {
 				name,
-				attributes,
-				innerBlocks.map( ( innerBlock ) =>
-					recursiveCreateBlock( innerBlock )
-				)
-			);
-		}
-		const block = recursiveCreateBlock( _blockRepresentation );
+				attributes = {},
+				innerBlocks = [],
+			}: BlockRepresentation ): Object {
+				return window.wp.blocks.createBlock(
+					name,
+					attributes,
+					innerBlocks.map( ( innerBlock ) =>
+						recursiveCreateBlock( innerBlock )
+					)
+				);
+			}
+			const block = recursiveCreateBlock( _blockRepresentation );
 
-		window.wp.data.dispatch( 'core/block-editor' ).insertBlock( block );
-	}, blockRepresentation );
+			window.wp.data
+				.dispatch( 'core/block-editor' )
+				.insertBlock( block, undefined, _clientId );
+		},
+		[ blockRepresentation, clientId ] as const
+	);
 }
 
 export type { BlockRepresentation };
diff --git a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
index 0cb27c33c6c882..a9ddffcd6cd5e3 100644
--- a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
@@ -2,29 +2,29 @@
  * Internal dependencies
  */
 import type { Editor } from './index';
-import { expect } from '../test';
 
 /**
- * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
+ * Clicks on the button in the header which opens Document Settings sidebar when
+ * it is closed.
  *
- * @param {Editor} this
+ * @param this
  */
 export async function openDocumentSettingsSidebar( this: Editor ) {
-	const editorSettingsButton = this.page.locator(
-		'role=region[name="Editor top bar"i] >> role=button[name="Settings"i]'
-	);
+	const toggleButton = this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', {
+			name: 'Settings',
+			disabled: false,
+		} );
 
-	const isEditorSettingsOpened =
-		( await editorSettingsButton.getAttribute( 'aria-expanded' ) ) ===
-		'true';
+	const isClosed =
+		( await toggleButton.getAttribute( 'aria-expanded' ) ) === 'false';
 
-	if ( ! isEditorSettingsOpened ) {
-		await editorSettingsButton.click();
-
-		await expect(
-			this.page.locator(
-				'role=region[name="Editor settings"i] >> role=button[name^="Close settings"i]'
-			)
-		).toBeVisible();
+	if ( isClosed ) {
+		await toggleButton.click();
+		await this.page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.waitFor();
 	}
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/preview.ts b/packages/e2e-test-utils-playwright/src/editor/preview.ts
index e3aef98ca9c81e..c697ca714fe969 100644
--- a/packages/e2e-test-utils-playwright/src/editor/preview.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/preview.ts
@@ -11,17 +11,15 @@ import type { Editor } from './index';
 /**
  * Opens the preview page of an edited post.
  *
- * @param {Editor} this
+ * @param this
  *
- * @return {Promise<Page>} preview page.
+ * @return preview page.
  */
 export async function openPreviewPage( this: Editor ): Promise< Page > {
 	const editorTopBar = this.page.locator(
 		'role=region[name="Editor top bar"i]'
 	);
-	const previewButton = editorTopBar.locator(
-		'role=button[name="Preview"i]'
-	);
+	const previewButton = editorTopBar.locator( 'role=button[name="View"i]' );
 
 	await previewButton.click();
 
diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
index 552a0cef37233e..81451cd516f0ed 100644
--- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -7,22 +7,30 @@ import type { Editor } from './index';
  * Publishes the post, resolving once the request is complete (once a notice
  * is displayed).
  *
- * @param {Editor} this
+ * @param this
  */
 export async function publishPost( this: Editor ) {
-	await this.page.click( 'role=button[name="Publish"i]' );
-	const publishEditorPanel = this.page.locator(
-		'role=region[name="Editor publish"i]'
-	);
+	// If we have changes in other entities, the label is `Save` instead of `Publish`.
+	const saveButton = this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', { name: 'Save', exact: true } );
+	const publishButton = this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', { name: 'Publish', exact: true } );
+	const buttonToClick = ( await saveButton.isVisible() )
+		? saveButton
+		: publishButton;
+	await buttonToClick.click();
 
-	const isPublishEditorVisible = await publishEditorPanel.isVisible();
+	const entitiesSaveButton = this.page
+		.getByRole( 'region', { name: 'Editor publish' } )
+		.getByRole( 'button', { name: 'Save', exact: true } );
+	const isEntitiesSavePanelVisible = await entitiesSaveButton.isVisible();
 
 	// Save any entities.
-	if ( isPublishEditorVisible ) {
+	if ( isEntitiesSavePanelVisible ) {
 		// Handle saving entities.
-		await this.page.click(
-			'role=region[name="Editor publish"i] >> role=button[name="Save"i]'
-		);
+		await entitiesSaveButton.click();
 	}
 
 	// Handle saving just the post.
@@ -30,11 +38,11 @@ export async function publishPost( this: Editor ) {
 		'role=region[name="Editor publish"i] >> role=button[name="Publish"i]'
 	);
 
-	const urlString = await this.page.inputValue(
-		'role=textbox[name="Post address"i]'
-	);
-	const url = new URL( urlString );
-	const postId = url.searchParams.get( 'p' );
+	await this.page
+		.getByRole( 'button', { name: 'Dismiss this notice' } )
+		.filter( { hasText: 'published' } )
+		.waitFor();
+	const postId = new URL( this.page.url() ).searchParams.get( 'post' );
 
 	return typeof postId === 'string' ? parseInt( postId, 10 ) : null;
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/save-draft.ts b/packages/e2e-test-utils-playwright/src/editor/save-draft.ts
new file mode 100644
index 00000000000000..319cded7a8012e
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/save-draft.ts
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Saves the post as a draft, resolving once the request is complete (once a notice
+ * is displayed).
+ */
+export async function saveDraft( this: Editor ) {
+	await this.page
+		.getByRole( 'region', { name: 'Editor top bar' } )
+		.getByRole( 'button', { name: 'Save draft' } )
+		.click();
+
+	await this.page
+		.getByRole( 'button', { name: 'Dismiss this notice' } )
+		.filter( { hasText: 'Draft saved' } )
+		.waitFor();
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/set-content.ts b/packages/e2e-test-utils-playwright/src/editor/set-content.ts
index 790a39ddcd2d00..d44d22f74d049d 100644
--- a/packages/e2e-test-utils-playwright/src/editor/set-content.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/set-content.ts
@@ -6,10 +6,14 @@ import type { Editor } from './index';
 /**
  * Set the content of the editor.
  *
- * @param  this
- * @param  html Serialized block HTML.
+ * @param this
+ * @param html Serialized block HTML.
  */
 async function setContent( this: Editor, html: string ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	await this.page.evaluate( ( _html ) => {
 		const blocks = window.wp.blocks.parse( _html );
 
diff --git a/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts b/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts
new file mode 100644
index 00000000000000..ab7baef5967f0f
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Toggles the fixed toolbar option.
+ *
+ * @param this
+ * @param isFixed Boolean value true/false for on/off.
+ */
+export async function setIsFixedToolbar( this: Editor, isFixed: boolean ) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
+	await this.page.evaluate( ( _isFixed ) => {
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core', 'fixedToolbar', _isFixed );
+	}, isFixed );
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts b/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts
new file mode 100644
index 00000000000000..9e5345db4b9e39
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/set-preferences.ts
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+type PreferencesContext =
+	| 'core/edit-post'
+	| 'core/edit-site'
+	| 'core/customize-widgets';
+
+/**
+ * Set the preferences of the editor.
+ *
+ * @param this
+ * @param context     Context to set preferences for.
+ * @param preferences Preferences to set.
+ */
+export async function setPreferences(
+	this: Editor,
+	context: PreferencesContext,
+	preferences: Record< string, any >
+) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
+	await this.page.evaluate(
+		async ( props ) => {
+			for ( const [ key, value ] of Object.entries(
+				props.preferences
+			) ) {
+				await window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( props.context, key, value );
+			}
+		},
+		{ context, preferences }
+	);
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/show-block-toolbar.ts b/packages/e2e-test-utils-playwright/src/editor/show-block-toolbar.ts
index c6b6d4073174f2..50238530087782 100644
--- a/packages/e2e-test-utils-playwright/src/editor/show-block-toolbar.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/show-block-toolbar.ts
@@ -7,7 +7,7 @@ import type { Editor } from './index';
  * The block toolbar is not always visible while typing.
  * Call this function to reveal it.
  *
- * @param {Editor} this
+ * @param this
  */
 export async function showBlockToolbar( this: Editor ) {
 	// Move the mouse to disable the isTyping mode. We need at least three
diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
index 8bcf96138d396b..02723a60ed0dba 100644
--- a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
@@ -3,20 +3,52 @@
  */
 import type { Editor } from './index';
 
+interface Options {
+	// If the only dirty entity is the current one, skip opening the save panel.
+	isOnlyCurrentEntityDirty?: boolean;
+}
+
 /**
  * Save entities in the site editor. Assumes the editor is in a dirty state.
  *
- * @param {Editor} this
+ * @param this
+ * @param options
  */
-export async function saveSiteEditorEntities( this: Editor ) {
-	await this.page.click(
-		'role=region[name="Editor top bar"i] >> role=button[name="Save"i]'
-	);
-	// Second Save button in the entities panel.
-	await this.page.click(
-		'role=region[name="Editor publish"i] >> role=button[name="Save"i]'
-	);
-	await this.page.waitForSelector(
-		'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]'
-	);
+export async function saveSiteEditorEntities(
+	this: Editor,
+	options: Options = {}
+) {
+	const editorTopBar = this.page.getByRole( 'region', {
+		name: 'Editor top bar',
+	} );
+
+	// If we have changes in a single entity which can be published the label is `Publish`.
+	const saveButton = editorTopBar.getByRole( 'button', {
+		name: 'Save',
+		exact: true,
+	} );
+	const publishButton = editorTopBar.getByRole( 'button', {
+		name: 'Publish',
+	} );
+	const publishButtonIsVisible = ! ( await saveButton.isVisible() );
+	// First Save button in the top bar.
+	const buttonToClick = publishButtonIsVisible ? publishButton : saveButton;
+	await buttonToClick.click();
+
+	if ( ! options.isOnlyCurrentEntityDirty ) {
+		// Second Save button in the entities panel.
+		await this.page
+			.getByRole( 'region', {
+				name: /(Editor publish|Save panel)/,
+			} )
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
+	}
+	// The text in the notice can be different based on the edited entity, whether
+	// we are saving multiple entities and whether we publish or update. So for now,
+	// we locate it based on the last part.
+	await this.page
+		.getByRole( 'button', { name: 'Dismiss this notice' } )
+		.getByText( /(updated|published)\./ )
+		.waitFor();
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts
new file mode 100644
index 00000000000000..67894abe0dcf7f
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/switch-editor-tool.ts
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Switch the editor tool being used.
+ *
+ * @param this
+ * @param label The text string of the button label.
+ */
+export async function switchEditorTool( this: Editor, label: string ) {
+	const toolsToolbar = this.page.getByRole( 'toolbar', {
+		name: 'Document tools',
+	} );
+	await toolsToolbar
+		.getByRole( 'button', {
+			name: 'Tools',
+		} )
+		.click();
+	const menu = this.page.getByRole( 'menu', {
+		name: 'Tools',
+	} );
+	await menu
+		.getByRole( 'menuitemradio', {
+			name: label,
+		} )
+		.click();
+	await toolsToolbar
+		.getByRole( 'button', {
+			name: 'Tools',
+		} )
+		.click();
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts b/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts
new file mode 100644
index 00000000000000..b7c4c84487dbbf
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts
@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Switches to legacy (non-iframed) canvas.
+ *
+ * @param this
+ */
+export async function switchToLegacyCanvas( this: Editor ) {
+	await this.page.waitForFunction( () => window?.wp?.blocks );
+
+	await this.page.evaluate( () => {
+		window.wp.blocks.registerBlockType( 'test/v2', {
+			apiVersion: '2',
+			title: 'test',
+		} );
+	} );
+}
diff --git a/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts b/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts
index dab77b852f8a77..75102983069d4a 100644
--- a/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts
@@ -6,10 +6,14 @@ import type { Editor } from './index';
 /**
  * Clicks the default block appender.
  *
- * @param {Editor} this
- * @param {string} name Block name.
+ * @param this
+ * @param name Block name.
  */
 export async function transformBlockTo( this: Editor, name: string ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	await this.page.evaluate(
 		( [ blockName ] ) => {
 			const clientIds = window.wp.data
diff --git a/packages/e2e-test-utils-playwright/src/index.ts b/packages/e2e-test-utils-playwright/src/index.ts
index 9f283017f10161..9b099711634d93 100644
--- a/packages/e2e-test-utils-playwright/src/index.ts
+++ b/packages/e2e-test-utils-playwright/src/index.ts
@@ -3,4 +3,6 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
+export { Metrics } from './metrics';
+export { Lighthouse } from './lighthouse';
 export { test, expect } from './test';
diff --git a/packages/e2e-test-utils-playwright/src/lighthouse/index.ts b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
new file mode 100644
index 00000000000000..0ba2c8e67ba610
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/lighthouse/index.ts
@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+import * as lighthouse from 'lighthouse/core/index.cjs';
+
+type LighthouseConstructorProps = {
+	page: Page;
+	port: number;
+};
+
+export class Lighthouse {
+	page: Page;
+	port: number;
+
+	constructor( { page, port }: LighthouseConstructorProps ) {
+		this.page = page;
+		this.port = port;
+	}
+
+	/**
+	 * Returns the Lighthouse report for the current URL.
+	 *
+	 * Runs several Lighthouse audits in a separate browser window and returns
+	 * the summary.
+	 */
+	async getReport() {
+		// From https://github.com/GoogleChrome/lighthouse/blob/d149e9c1b628d5881ca9ca451278d99ff1b31d9a/core/config/default-config.js#L433-L503
+		const audits = {
+			'largest-contentful-paint': 'LCP',
+			'total-blocking-time': 'TBT',
+			interactive: 'TTI',
+			'cumulative-layout-shift': 'CLS',
+			'experimental-interaction-to-next-paint': 'INP',
+		};
+
+		const report = await lighthouse(
+			this.page.url(),
+			{ port: this.port },
+			{
+				extends: 'lighthouse:default',
+				settings: {
+					// "provided" means no throttling.
+					// TODO: Make configurable.
+					throttlingMethod: 'provided',
+					// Default is "mobile".
+					// See https://github.com/GoogleChrome/lighthouse/blob/main/docs/emulation.md
+					// TODO: Make configurable.
+					formFactor: 'desktop',
+					screenEmulation: {
+						disabled: true,
+					},
+					// Speeds up the report.
+					disableFullPageScreenshot: true,
+					// Only run certain audits to speed things up.
+					onlyAudits: Object.keys( audits ),
+				},
+			}
+		);
+
+		const result: Record< string, number > = {};
+
+		if ( ! report ) {
+			return result;
+		}
+
+		const { lhr } = report;
+
+		for ( const [ audit, acronym ] of Object.entries( audits ) ) {
+			result[ acronym ] = lhr.audits[ audit ]?.numericValue || 0;
+		}
+
+		return result;
+	}
+}
diff --git a/packages/e2e-test-utils-playwright/src/metrics/index.ts b/packages/e2e-test-utils-playwright/src/metrics/index.ts
new file mode 100644
index 00000000000000..9a9513d4bea510
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/metrics/index.ts
@@ -0,0 +1,384 @@
+/**
+ * External dependencies
+ */
+import type { Page, Browser } from '@playwright/test';
+import { join } from 'path';
+// resolution-mode support in TypeScript 5.3 will resolve this.
+// See https://devblogs.microsoft.com/typescript/announcing-typescript-5-3-beta/
+// @ts-expect-error
+import type { Metric } from 'web-vitals';
+
+type EventType =
+	| 'click'
+	| 'focus'
+	| 'focusin'
+	| 'keydown'
+	| 'keypress'
+	| 'keyup'
+	| 'mouseout'
+	| 'mouseover';
+
+interface TraceEvent {
+	cat: string;
+	name: string;
+	dur?: number;
+	args: {
+		data?: {
+			type: EventType;
+		};
+	};
+}
+
+interface Trace {
+	traceEvents: TraceEvent[];
+}
+
+type MetricsConstructorProps = {
+	page: Page;
+};
+
+interface WebVitalsMeasurements {
+	CLS?: number;
+	FCP?: number;
+	FID?: number;
+	INP?: number;
+	LCP?: number;
+	TTFB?: number;
+}
+
+export class Metrics {
+	browser: Browser;
+	page: Page;
+	trace: Trace;
+
+	webVitals: WebVitalsMeasurements = {};
+
+	constructor( { page }: MetricsConstructorProps ) {
+		this.page = page;
+		this.browser = page.context().browser()!;
+		this.trace = { traceEvents: [] };
+	}
+
+	/**
+	 * Returns durations from the Server-Timing header.
+	 *
+	 * @param fields Optional fields to filter.
+	 */
+	async getServerTiming( fields: string[] = [] ) {
+		return this.page.evaluate< Record< string, number >, string[] >(
+			( f: string[] ) =>
+				(
+					performance.getEntriesByType(
+						'navigation'
+					) as PerformanceNavigationTiming[]
+				 )[ 0 ].serverTiming.reduce(
+					( acc, entry ) => {
+						if ( f.length === 0 || f.includes( entry.name ) ) {
+							acc[ entry.name ] = entry.duration;
+						}
+						return acc;
+					},
+					{} as Record< string, number >
+				),
+			fields
+		);
+	}
+
+	/**
+	 * Returns time to first byte (TTFB) using the Navigation Timing API.
+	 *
+	 * @see https://web.dev/ttfb/#measure-ttfb-in-javascript
+	 *
+	 * @return TTFB value.
+	 */
+	async getTimeToFirstByte() {
+		return await this.page.evaluate< number >( () => {
+			const { responseStart, startTime } = (
+				performance.getEntriesByType(
+					'navigation'
+				) as PerformanceNavigationTiming[]
+			 )[ 0 ];
+			return responseStart - startTime;
+		} );
+	}
+
+	/**
+	 * Returns the Largest Contentful Paint (LCP) value using the dedicated API.
+	 *
+	 * @see https://w3c.github.io/largest-contentful-paint/
+	 * @see https://web.dev/lcp/#measure-lcp-in-javascript
+	 *
+	 * @return LCP value.
+	 */
+	async getLargestContentfulPaint() {
+		return await this.page.evaluate< number >(
+			() =>
+				new Promise( ( resolve ) => {
+					new PerformanceObserver( ( entryList ) => {
+						const entries = entryList.getEntries();
+						// The last entry is the largest contentful paint.
+						const largestPaintEntry = entries.at( -1 );
+
+						resolve( largestPaintEntry?.startTime || 0 );
+					} ).observe( {
+						type: 'largest-contentful-paint',
+						buffered: true,
+					} );
+				} )
+		);
+	}
+
+	/**
+	 * Returns the Cumulative Layout Shift (CLS) value using the dedicated API.
+	 *
+	 * @see https://github.com/WICG/layout-instability
+	 * @see https://web.dev/cls/#measure-layout-shifts-in-javascript
+	 *
+	 * @return CLS value.
+	 */
+	async getCumulativeLayoutShift() {
+		return await this.page.evaluate< number >(
+			() =>
+				new Promise( ( resolve ) => {
+					let CLS = 0;
+
+					new PerformanceObserver( ( l ) => {
+						const entries = l.getEntries() as LayoutShift[];
+
+						entries.forEach( ( entry ) => {
+							if ( ! entry.hadRecentInput ) {
+								CLS += entry.value;
+							}
+						} );
+
+						resolve( CLS );
+					} ).observe( {
+						type: 'layout-shift',
+						buffered: true,
+					} );
+				} )
+		);
+	}
+
+	/**
+	 * Returns the loading durations using the Navigation Timing API. All the
+	 * durations exclude the server response time.
+	 *
+	 * @return Object with loading metrics durations.
+	 */
+	async getLoadingDurations() {
+		return await this.page.evaluate( () => {
+			const [
+				{
+					requestStart,
+					responseStart,
+					responseEnd,
+					domContentLoadedEventEnd,
+					loadEventEnd,
+				},
+			] = performance.getEntriesByType(
+				'navigation'
+			) as PerformanceNavigationTiming[];
+			const paintTimings = performance.getEntriesByType(
+				'paint'
+			) as PerformancePaintTiming[];
+
+			const firstPaintStartTime = paintTimings.find(
+				( { name } ) => name === 'first-paint'
+			)!.startTime;
+
+			const firstContentfulPaintStartTime = paintTimings.find(
+				( { name } ) => name === 'first-contentful-paint'
+			)!.startTime;
+
+			return {
+				// Server side metric.
+				serverResponse: responseStart - requestStart,
+				// For client side metrics, consider the end of the response (the
+				// browser receives the HTML) as the start time (0).
+				firstPaint: firstPaintStartTime - responseEnd,
+				domContentLoaded: domContentLoadedEventEnd - responseEnd,
+				loaded: loadEventEnd - responseEnd,
+				firstContentfulPaint:
+					firstContentfulPaintStartTime - responseEnd,
+				timeSinceResponseEnd: performance.now() - responseEnd,
+			};
+		} );
+	}
+
+	/**
+	 * Starts Chromium tracing with predefined options for performance testing.
+	 *
+	 * @param options Options to pass to `browser.startTracing()`.
+	 */
+	async startTracing( options = {} ) {
+		return await this.browser.startTracing( this.page, {
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+			...options,
+		} );
+	}
+
+	/**
+	 * Stops Chromium tracing and saves the trace.
+	 */
+	async stopTracing() {
+		const traceBuffer = await this.browser.stopTracing();
+		const traceJSON = JSON.parse( traceBuffer.toString() );
+
+		this.trace = traceJSON;
+	}
+
+	/**
+	 * @return Durations of all traced `keydown`, `keypress`, and `keyup`
+	 * events.
+	 */
+	getTypingEventDurations() {
+		return [
+			this.getEventDurations( 'keydown' ),
+			this.getEventDurations( 'keypress' ),
+			this.getEventDurations( 'keyup' ),
+		];
+	}
+
+	/**
+	 * @return Durations of all traced `focus` and `focusin` events.
+	 */
+	getSelectionEventDurations() {
+		return [
+			this.getEventDurations( 'focus' ),
+			this.getEventDurations( 'focusin' ),
+		];
+	}
+
+	/**
+	 * @return Durations of all traced `click` events.
+	 */
+	getClickEventDurations() {
+		return [ this.getEventDurations( 'click' ) ];
+	}
+
+	/**
+	 * @return Durations of all traced `mouseover` and `mouseout` events.
+	 */
+	getHoverEventDurations() {
+		return [
+			this.getEventDurations( 'mouseover' ),
+			this.getEventDurations( 'mouseout' ),
+		];
+	}
+
+	/**
+	 * @param eventType Type of event to filter.
+	 * @return Durations of all events of a given type.
+	 */
+	getEventDurations( eventType: EventType ) {
+		if ( this.trace.traceEvents.length === 0 ) {
+			throw new Error(
+				'No trace events found. Did you forget to call stopTracing()?'
+			);
+		}
+
+		return this.trace.traceEvents
+			.filter(
+				( item: TraceEvent ): boolean =>
+					item.cat === 'devtools.timeline' &&
+					item.name === 'EventDispatch' &&
+					item?.args?.data?.type === eventType &&
+					!! item.dur
+			)
+			.map( ( item ) => ( item.dur ? item.dur / 1000 : 0 ) );
+	}
+
+	/**
+	 * Initializes the web-vitals library upon next page navigation.
+	 *
+	 * Defaults to automatically triggering the navigation,
+	 * but it can also be done manually.
+	 *
+	 * @example
+	 * ```js
+	 * await metrics.initWebVitals();
+	 * console.log( await metrics.getWebVitals() );
+	 * ```
+	 *
+	 * @example
+	 * ```js
+	 * await metrics.initWebVitals( false );
+	 * await page.goto( '/some-other-page' );
+	 * console.log( await metrics.getWebVitals() );
+	 * ```
+	 *
+	 * @param reload Whether to force navigation by reloading the current page.
+	 */
+	async initWebVitals( reload = true ) {
+		await this.page.addInitScript( {
+			path: join(
+				__dirname,
+				'../../../../node_modules/web-vitals/dist/web-vitals.umd.cjs'
+			),
+		} );
+
+		await this.page.exposeFunction(
+			'__reportVitals__',
+			( data: string ) => {
+				const measurement: Metric = JSON.parse( data );
+				this.webVitals[ measurement.name ] = measurement.value;
+			}
+		);
+
+		await this.page.addInitScript( () => {
+			const reportVitals = ( measurement: unknown ) =>
+				window.__reportVitals__( JSON.stringify( measurement ) );
+
+			window.addEventListener( 'DOMContentLoaded', () => {
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onCLS( reportVitals );
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onFCP( reportVitals );
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onFID( reportVitals );
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onINP( reportVitals );
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onLCP( reportVitals );
+				// @ts-expect-error This is valid but web-vitals does not register the global types.
+				window.webVitals.onTTFB( reportVitals );
+			} );
+		} );
+
+		if ( reload ) {
+			// By reloading the page the script will be applied.
+			await this.page.reload();
+		}
+	}
+
+	/**
+	 * Returns web vitals as collected by the web-vitals library.
+	 *
+	 * If the web-vitals library hasn't been loaded on the current page yet,
+	 * it will be initialized with a page reload.
+	 *
+	 * Reloads the page to force web-vitals to report all collected metrics.
+	 *
+	 * @return {WebVitalsMeasurements} Web vitals measurements.
+	 */
+	async getWebVitals() {
+		// Reset values.
+		this.webVitals = {};
+
+		const hasScript = await this.page.evaluate(
+			// @ts-expect-error This is valid but web-vitals does not register the global types.
+			() => typeof window.webVitals !== 'undefined'
+		);
+
+		if ( ! hasScript ) {
+			await this.initWebVitals();
+		}
+
+		// Trigger navigation so the web-vitals library reports values on unload.
+		await this.page.reload();
+
+		return this.webVitals;
+	}
+}
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts
index da61143196ae1c..d0af0b499f286b 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts
@@ -24,8 +24,8 @@ type Options = {
 /**
  * Simulate dragging files from outside the current page.
  *
- * @param  this
- * @param  files The files to be dragged.
+ * @param this
+ * @param files The files to be dragged.
  * @return The methods of the drag operation.
  */
 async function dragFiles(
@@ -54,29 +54,6 @@ async function dragFiles(
 		} )
 	);
 
-	const dataTransfer = await this.page.evaluateHandle(
-		async ( _fileObjects ) => {
-			const dt = new DataTransfer();
-			const fileInstances = await Promise.all(
-				_fileObjects.map( async ( fileObject ) => {
-					const blob = await fetch(
-						`data:${ fileObject.mimeType };base64,${ fileObject.base64 }`
-					).then( ( res ) => res.blob() );
-					return new File( [ blob ], fileObject.name, {
-						type: fileObject.mimeType ?? undefined,
-					} );
-				} )
-			);
-
-			fileInstances.forEach( ( file ) => {
-				dt.items.add( file );
-			} );
-
-			return dt;
-		},
-		fileObjects
-	);
-
 	// CDP doesn't actually support dragging files, this is only a _good enough_
 	// dummy data so that it will correctly send the relevant events.
 	const dragData = {
@@ -100,9 +77,9 @@ async function dragFiles(
 		/**
 		 * Drag the files over an element (fires `dragenter` and `dragover` events).
 		 *
-		 * @param  selectorOrLocator A selector or a locator to search for an element.
-		 * @param  options           The optional options.
-		 * @param  options.position  A point to use relative to the top-left corner of element padding box. If not specified, uses some visible point of the element.
+		 * @param selectorOrLocator A selector or a locator to search for an element.
+		 * @param options           The optional options.
+		 * @param options.position  A point to use relative to the top-left corner of element padding box. If not specified, uses some visible point of the element.
 		 */
 		dragOver: async (
 			selectorOrLocator: string | Locator,
@@ -145,7 +122,15 @@ async function dragFiles(
 		drop: async () => {
 			const topMostElement = await this.page.evaluateHandle(
 				( { x, y } ) => {
-					return document.elementFromPoint( x, y );
+					const element = document.elementFromPoint( x, y );
+					if ( element instanceof HTMLIFrameElement ) {
+						const offsetBox = element.getBoundingClientRect();
+						return element.contentDocument!.elementFromPoint(
+							x - offsetBox.x,
+							y - offsetBox.y
+						);
+					}
+					return element;
 				},
 				position
 			);
@@ -155,6 +140,29 @@ async function dragFiles(
 				throw new Error( 'Element not found.' );
 			}
 
+			const dataTransfer = await elementHandle.evaluateHandle(
+				async ( _node, _fileObjects ) => {
+					const dt = new DataTransfer();
+					const fileInstances = await Promise.all(
+						_fileObjects.map( async ( fileObject: any ) => {
+							const blob = await fetch(
+								`data:${ fileObject.mimeType };base64,${ fileObject.base64 }`
+							).then( ( res ) => res.blob() );
+							return new File( [ blob ], fileObject.name, {
+								type: fileObject.mimeType ?? undefined,
+							} );
+						} )
+					);
+
+					fileInstances.forEach( ( file ) => {
+						dt.items.add( file );
+					} );
+
+					return dt;
+				},
+				fileObjects
+			);
+
 			await elementHandle.dispatchEvent( 'drop', { dataTransfer } );
 
 			await cdpSession.detach();
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/index.ts b/packages/e2e-test-utils-playwright/src/page-utils/index.ts
index 95d64a022e22e2..50dbe71033fc6b 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/index.ts
@@ -8,11 +8,7 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
  */
 import { dragFiles } from './drag-files';
 import { isCurrentURL } from './is-current-url';
-import {
-	setClipboardData,
-	pressKeyWithModifier,
-} from './press-key-with-modifier';
-import { pressKeyTimes } from './press-key-times';
+import { setClipboardData, pressKeys } from './press-keys';
 import { setBrowserViewport } from './set-browser-viewport';
 
 type PageUtilConstructorParams = {
@@ -30,12 +26,17 @@ class PageUtils {
 		this.browser = this.context.browser()!;
 	}
 
-	dragFiles = dragFiles.bind( this );
-	isCurrentURL = isCurrentURL.bind( this );
-	pressKeyTimes = pressKeyTimes.bind( this );
-	pressKeyWithModifier = pressKeyWithModifier.bind( this );
-	setBrowserViewport = setBrowserViewport.bind( this );
-	setClipboardData = setClipboardData.bind( this );
+	/** @borrows dragFiles as this.dragFiles */
+	dragFiles: typeof dragFiles = dragFiles.bind( this );
+	/** @borrows isCurrentURL as this.isCurrentURL */
+	isCurrentURL: typeof isCurrentURL = isCurrentURL.bind( this );
+	/** @borrows pressKeys as this.pressKeys */
+	pressKeys: typeof pressKeys = pressKeys.bind( this );
+	/** @borrows setBrowserViewport as this.setBrowserViewport */
+	setBrowserViewport: typeof setBrowserViewport =
+		setBrowserViewport.bind( this );
+	/** @borrows setClipboardData as this.setClipboardData */
+	setClipboardData: typeof setClipboardData = setClipboardData.bind( this );
 }
 
 export { PageUtils };
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/is-current-url.ts b/packages/e2e-test-utils-playwright/src/page-utils/is-current-url.ts
index 0a43fcfb422c9a..ee6dfe799d850f 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/is-current-url.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/is-current-url.ts
@@ -7,10 +7,10 @@ import type { PageUtils } from './';
 /**
  * Checks if current path of the URL matches the provided path.
  *
- * @param {PageUtils} this
- * @param {string}    path String to be serialized as pathname.
+ * @param this
+ * @param path String to be serialized as pathname.
  *
- * @return {boolean} Boolean represents whether current URL is or not a WordPress path.
+ * @return Boolean represents whether current URL is or not a WordPress path.
  */
 export function isCurrentURL( this: PageUtils, path: string ) {
 	const currentURL = new URL( this.page.url() );
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/keycodes.ts b/packages/e2e-test-utils-playwright/src/page-utils/keycodes.ts
new file mode 100644
index 00000000000000..3a848ac8fb7667
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/page-utils/keycodes.ts
@@ -0,0 +1,48 @@
+/**
+ * This filed is partially copied from @wordpress/keycodes to keep the package
+ * (internal-)dependencies free.
+ */
+
+/**
+ * Keycode for ALT key.
+ */
+export const ALT = 'alt';
+
+/**
+ * Keycode for CTRL key.
+ */
+export const CTRL = 'ctrl';
+
+/**
+ * Keycode for COMMAND key.
+ */
+export const COMMAND = 'meta';
+
+/**
+ * Keycode for SHIFT key.
+ */
+export const SHIFT = 'shift';
+
+/**
+ * Object that contains functions that return the available modifier
+ * depending on platform.
+ */
+export const modifiers: Record<
+	string,
+	( _isApple: () => boolean ) => string[]
+> = {
+	primary: ( _isApple ) => ( _isApple() ? [ COMMAND ] : [ CTRL ] ),
+	primaryShift: ( _isApple ) =>
+		_isApple() ? [ SHIFT, COMMAND ] : [ CTRL, SHIFT ],
+	primaryAlt: ( _isApple ) =>
+		_isApple() ? [ ALT, COMMAND ] : [ CTRL, ALT ],
+	secondary: ( _isApple ) =>
+		_isApple() ? [ SHIFT, ALT, COMMAND ] : [ CTRL, SHIFT, ALT ],
+	access: ( _isApple ) => ( _isApple() ? [ CTRL, ALT ] : [ SHIFT, ALT ] ),
+	ctrl: () => [ CTRL ],
+	alt: () => [ ALT ],
+	ctrlShift: () => [ CTRL, SHIFT ],
+	shift: () => [ SHIFT ],
+	shiftAlt: () => [ SHIFT, ALT ],
+	undefined: () => [],
+};
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js b/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js
deleted file mode 100644
index 5e8f3ea65b99c5..00000000000000
--- a/packages/e2e-test-utils-playwright/src/page-utils/press-key-times.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Presses the given keyboard key a number of times in sequence.
- *
- * @param {string} key   Key to press.
- * @param {number} count Number of times to press.
- */
-export async function pressKeyTimes( key, count ) {
-	while ( count-- ) {
-		await this.page.keyboard.press( key );
-	}
-}
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts
deleted file mode 100644
index 1d68ca21392267..00000000000000
--- a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * External dependencies
- */
-import { capitalCase } from 'change-case';
-import type { Page } from '@playwright/test';
-
-/**
- * WordPress dependencies
- */
-import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes';
-import type { WPKeycodeModifier } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import type { PageUtils } from './index';
-
-let clipboardDataHolder: {
-	plainText: string;
-	html: string;
-} = {
-	plainText: '',
-	html: '',
-};
-
-/**
- * Sets the clipboard data that can be pasted with
- * `pressKeyWithModifier( 'primary', 'v' )`.
- *
- * @param  this
- * @param  clipboardData
- * @param  clipboardData.plainText
- * @param  clipboardData.html
- */
-export function setClipboardData(
-	this: PageUtils,
-	{ plainText = '', html = '' }: typeof clipboardDataHolder
-) {
-	clipboardDataHolder = {
-		plainText,
-		html,
-	};
-}
-
-async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
-	clipboardDataHolder = await page.evaluate(
-		( [ _type, _clipboardData ] ) => {
-			const clipboardDataTransfer = new DataTransfer();
-
-			if ( _type === 'paste' ) {
-				clipboardDataTransfer.setData(
-					'text/plain',
-					_clipboardData.plainText
-				);
-				clipboardDataTransfer.setData(
-					'text/html',
-					_clipboardData.html
-				);
-			} else {
-				const selection = window.getSelection()!;
-				const plainText = selection.toString();
-				let html = plainText;
-				if ( selection.rangeCount ) {
-					const range = selection.getRangeAt( 0 );
-					const fragment = range.cloneContents();
-					html = Array.from( fragment.childNodes )
-						.map(
-							( node ) =>
-								( node as Element ).outerHTML ?? node.nodeValue
-						)
-						.join( '' );
-				}
-				clipboardDataTransfer.setData( 'text/plain', plainText );
-				clipboardDataTransfer.setData( 'text/html', html );
-			}
-
-			document.activeElement?.dispatchEvent(
-				new ClipboardEvent( _type, {
-					bubbles: true,
-					cancelable: true,
-					clipboardData: clipboardDataTransfer,
-				} )
-			);
-
-			return {
-				plainText: clipboardDataTransfer.getData( 'text/plain' ),
-				html: clipboardDataTransfer.getData( 'text/html' ),
-			};
-		},
-		[ type, clipboardDataHolder ] as const
-	);
-}
-
-/**
- * Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier
- * is normalized to platform-specific modifier.
- *
- * @param  this
- * @param  modifier
- * @param  key
- */
-export async function pressKeyWithModifier(
-	this: PageUtils,
-	modifier: WPKeycodeModifier,
-	key: string
-) {
-	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'c' ) {
-		return await emulateClipboard( this.page, 'copy' );
-	}
-
-	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'x' ) {
-		return await emulateClipboard( this.page, 'cut' );
-	}
-
-	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'v' ) {
-		return await emulateClipboard( this.page, 'paste' );
-	}
-
-	const isAppleOS = () => process.platform === 'darwin';
-	const overWrittenModifiers = {
-		...modifiers,
-		shiftAlt: ( _isApple: () => boolean ) =>
-			_isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
-	};
-	const mappedModifiers = overWrittenModifiers[ modifier ]( isAppleOS ).map(
-		( keycode ) => ( keycode === CTRL ? 'Control' : capitalCase( keycode ) )
-	);
-
-	await this.page.keyboard.press(
-		`${ mappedModifiers.join( '+' ) }+${ key }`
-	);
-}
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
new file mode 100644
index 00000000000000..f3ab7503a8f98a
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/page-utils/press-keys.ts
@@ -0,0 +1,196 @@
+/**
+ * External dependencies
+ */
+import { capitalCase } from 'change-case';
+import type { Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import type { PageUtils } from './';
+import { modifiers as baseModifiers, SHIFT, ALT, CTRL } from './keycodes';
+
+let clipboardDataHolder: {
+	'text/plain': string;
+	'text/html': string;
+	'rich-text': string;
+} = {
+	'text/plain': '',
+	'text/html': '',
+	'rich-text': '',
+};
+
+/**
+ * Sets the clipboard data that can be pasted with
+ * `pressKeys( 'primary+v' )`.
+ *
+ * @param this
+ * @param clipboardData
+ * @param clipboardData.plainText
+ * @param clipboardData.html
+ */
+export function setClipboardData(
+	this: PageUtils,
+	{ plainText = '', html = '' }
+) {
+	clipboardDataHolder = {
+		'text/plain': plainText,
+		'text/html': html,
+		'rich-text': '',
+	};
+}
+
+async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
+	const output = await page.evaluate(
+		( [ _type, _clipboardData ] ) => {
+			const canvasDoc =
+				// @ts-ignore
+				document.activeElement?.contentDocument ?? document;
+			const event = new ClipboardEvent( _type, {
+				bubbles: true,
+				cancelable: true,
+				clipboardData: new DataTransfer(),
+			} );
+
+			if ( ! event.clipboardData ) {
+				throw new Error( 'ClipboardEvent.clipboardData is null' );
+			}
+
+			if ( _type === 'paste' ) {
+				event.clipboardData.setData(
+					'text/plain',
+					_clipboardData[ 'text/plain' ]
+				);
+				event.clipboardData.setData(
+					'text/html',
+					_clipboardData[ 'text/html' ]
+				);
+				event.clipboardData.setData(
+					'rich-text',
+					_clipboardData[ 'rich-text' ]
+				);
+			} else {
+				const selection = canvasDoc.defaultView.getSelection()!;
+				const plainText = selection.toString();
+				let html = plainText;
+				if ( selection.rangeCount ) {
+					const range = selection.getRangeAt( 0 );
+					const fragment = range.cloneContents();
+					html = Array.from( fragment.childNodes )
+						.map(
+							( node ) =>
+								( node as Element ).outerHTML ??
+								( node as Element ).nodeValue
+						)
+						.join( '' );
+				}
+				event.clipboardData.setData( 'text/plain', plainText );
+				event.clipboardData.setData( 'text/html', html );
+			}
+
+			canvasDoc.activeElement.dispatchEvent( event );
+
+			if ( _type === 'paste' ) {
+				return event.defaultPrevented;
+			}
+
+			return {
+				'text/plain': event.clipboardData.getData( 'text/plain' ),
+				'text/html': event.clipboardData.getData( 'text/html' ),
+				'rich-text': event.clipboardData.getData( 'rich-text' ),
+			};
+		},
+		[ type, clipboardDataHolder ] as const
+	);
+
+	if ( typeof output === 'object' ) {
+		clipboardDataHolder = output;
+	}
+
+	if ( output === false ) {
+		// Emulate paste by typing the clipboard content, which works across all
+		// elements and documents (keyboard.type does uses the nested active
+		// element automatically).
+		await page.keyboard.type( clipboardDataHolder[ 'text/plain' ] );
+	}
+}
+
+const isAppleOS = () => process.platform === 'darwin';
+
+const isWebkit = ( page: Page ) =>
+	page.context().browser()!.browserType().name() === 'webkit';
+
+const browserCache = new WeakMap();
+const getHasNaturalTabNavigation = async ( page: Page ) => {
+	if ( ! isAppleOS() || ! isWebkit( page ) ) {
+		return true;
+	}
+	if ( browserCache.has( page.context().browser()! ) ) {
+		return browserCache.get( page.context().browser()! );
+	}
+	const testPage = await page.context().newPage();
+	await testPage.setContent( `<button>1</button><button>2</button>` );
+	await testPage.getByText( '1' ).focus();
+	await testPage.keyboard.press( 'Tab' );
+	const featureDetected = await testPage
+		.getByText( '2' )
+		.evaluate( ( node ) => node === document.activeElement );
+	browserCache.set( page.context().browser()!, featureDetected );
+	await testPage.close();
+	return featureDetected;
+};
+
+type Options = {
+	times?: number;
+	delay?: number;
+};
+
+const modifiers = {
+	...baseModifiers,
+	shiftAlt: ( _isApple: () => boolean ) =>
+		_isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
+};
+
+export async function pressKeys(
+	this: PageUtils,
+	key: string,
+	{ times, ...pressOptions }: Options = {}
+) {
+	const hasNaturalTabNavigation = await getHasNaturalTabNavigation(
+		this.page
+	);
+
+	let command: () => Promise< void >;
+
+	if ( key.toLowerCase() === 'primary+c' ) {
+		command = () => emulateClipboard( this.page, 'copy' );
+	} else if ( key.toLowerCase() === 'primary+x' ) {
+		command = () => emulateClipboard( this.page, 'cut' );
+	} else if ( key.toLowerCase() === 'primary+v' ) {
+		command = () => emulateClipboard( this.page, 'paste' );
+	} else {
+		const keys = key.split( '+' ).flatMap( ( keyCode ) => {
+			if ( Object.prototype.hasOwnProperty.call( modifiers, keyCode ) ) {
+				return modifiers[ keyCode as keyof typeof modifiers ](
+					isAppleOS
+				).map( ( modifier ) =>
+					modifier === CTRL ? 'Control' : capitalCase( modifier )
+				);
+			} else if ( keyCode === 'Tab' && ! hasNaturalTabNavigation ) {
+				return [ 'Alt', 'Tab' ];
+			}
+			return keyCode;
+		} );
+		const normalizedKeys = keys.join( '+' );
+		command = () => this.page.keyboard.press( normalizedKeys );
+	}
+
+	times = times ?? 1;
+	for ( let i = 0; i < times; i += 1 ) {
+		await command();
+
+		if ( times > 1 && pressOptions.delay ) {
+			await this.page.waitForTimeout( pressOptions.delay );
+		}
+	}
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/blocks.js b/packages/e2e-test-utils-playwright/src/request-utils/blocks.js
deleted file mode 100644
index 82f011c3f750e3..00000000000000
--- a/packages/e2e-test-utils-playwright/src/request-utils/blocks.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Delete all blocks using REST API.
- *
- * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
- * @this {import('./index').RequestUtils}
- */
-export async function deleteAllBlocks() {
-	// List all blocks.
-	// https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
-	const blocks = await this.rest( {
-		path: '/wp/v2/blocks',
-		params: {
-			per_page: 100,
-			// All possible statuses.
-			status: 'publish,future,draft,pending,private,trash',
-		},
-	} );
-
-	// Delete blocks.
-	// https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
-	// "/wp/v2/posts" not yet supports batch requests.
-	await this.batchRest(
-		blocks.map( ( block ) => ( {
-			method: 'DELETE',
-			path: `/wp/v2/blocks/${ block.id }?force=true`,
-		} ) )
-	);
-}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts b/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts
new file mode 100644
index 00000000000000..e954703578f00e
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts
@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+type CreateBlockPayload = {
+	date?: string;
+	date_gmt?: string;
+	slug?: string;
+	title: string;
+	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+	content?: string;
+	meta?: unknown;
+	wp_pattern_category?: number[];
+};
+
+/**
+ * Delete all blocks using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+ * @param this
+ */
+export async function deleteAllBlocks( this: RequestUtils ) {
+	// List all blocks.
+	// https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
+	const blocks = await this.rest( {
+		path: '/wp/v2/blocks',
+		params: {
+			per_page: 100,
+			// All possible statuses.
+			status: 'publish,future,draft,pending,private,trash',
+		},
+	} );
+
+	// Delete blocks.
+	// https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
+	// "/wp/v2/posts" not yet supports batch requests.
+	await this.batchRest(
+		blocks.map( ( block: { id: number } ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/blocks/${ block.id }?force=true`,
+		} ) )
+	);
+}
+
+/**
+ * Creates a new block using the REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/blocks/#create-a-editor-block.
+ * @param this
+ * @param payload Block payload.
+ */
+export async function createBlock(
+	this: RequestUtils,
+	payload: CreateBlockPayload
+) {
+	const block = await this.rest( {
+		path: '/wp/v2/blocks',
+		method: 'POST',
+		data: { ...payload },
+	} );
+
+	return block;
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/comments.ts b/packages/e2e-test-utils-playwright/src/request-utils/comments.ts
index e5b668aff0dde5..dc117679247f96 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/comments.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/comments.ts
@@ -22,8 +22,8 @@ export interface User {
 /**
  * Create new comment using the REST API.
  *
- * @param {} this    RequestUtils.
- * @param {} payload CreateCommentPayload.
+ * @param this
+ * @param payload
  */
 export async function createComment(
 	this: RequestUtils,
@@ -48,7 +48,7 @@ export async function createComment(
 /**
  * Delete all comments using the REST API.
  *
- * @param {} this RequestUtils.
+ * @param this
  */
 export async function deleteAllComments( this: RequestUtils ) {
 	// List all comments.
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/gutenberg-experiments.ts b/packages/e2e-test-utils-playwright/src/request-utils/gutenberg-experiments.ts
new file mode 100644
index 00000000000000..6a21ba7d90aec6
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/gutenberg-experiments.ts
@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Sets the Gutenberg experiments.
+ *
+ * @param this
+ * @param experiments Array of experimental flags to enable. Pass in an empty array to disable all experiments.
+ */
+async function setGutenbergExperiments(
+	this: RequestUtils,
+	experiments: string[]
+) {
+	const response = await this.request.get(
+		'/wp-admin/admin.php?page=gutenberg-experiments'
+	);
+	const html = await response.text();
+	const nonce = html.match( /name="_wpnonce" value="([^"]+)"/ )![ 1 ];
+
+	await this.request.post( '/wp-admin/options.php', {
+		form: {
+			option_page: 'gutenberg-experiments',
+			action: 'update',
+			_wpnonce: nonce,
+			_wp_http_referer: '/wp-admin/admin.php?page=gutenberg-experiments',
+			...Object.fromEntries(
+				experiments.map( ( experiment ) => [
+					`gutenberg-experiments[${ experiment }]`,
+					1,
+				] )
+			),
+			submit: 'Save Changes',
+		},
+		failOnStatusCode: true,
+	} );
+}
+
+export { setGutenbergExperiments };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
index 5c6f849f867514..f6818945e16936 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
@@ -16,14 +16,27 @@ import { listMedia, uploadMedia, deleteMedia, deleteAllMedia } from './media';
 import { createUser, deleteAllUsers } from './users';
 import { setupRest, rest, getMaxBatchSize, batchRest } from './rest';
 import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins';
-import { deleteAllTemplates } from './templates';
-import { activateTheme } from './themes';
-import { deleteAllBlocks } from './blocks';
+import { deleteAllTemplates, createTemplate } from './templates';
+import {
+	activateTheme,
+	getCurrentThemeGlobalStylesPostId,
+	getThemeGlobalStylesRevisions,
+} from './themes';
+import { createBlock, deleteAllBlocks } from './blocks';
 import { createComment, deleteAllComments } from './comments';
 import { createPost, deleteAllPosts } from './posts';
+import {
+	createClassicMenu,
+	createNavigationMenu,
+	deleteAllMenus,
+	getNavigationMenus,
+} from './menus';
+import { deleteAllPages, createPage } from './pages';
 import { resetPreferences } from './preferences';
 import { getSiteSettings, updateSiteSettings } from './site-settings';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
+import { deleteAllPatternCategories } from './patterns';
+import { setGutenbergExperiments } from './gutenberg-experiments';
 
 interface StorageState {
 	cookies: Cookie[];
@@ -80,7 +93,7 @@ class RequestUtils {
 			},
 		} );
 
-		const requestUtils = new RequestUtils( requestContext, {
+		const requestUtils = new this( requestContext, {
 			user,
 			storageState,
 			storageStatePath,
@@ -111,34 +124,91 @@ class RequestUtils {
 		this.baseURL = baseURL;
 	}
 
-	login = login.bind( this );
-	setupRest = setupRest.bind( this );
+	/** @borrows login as this.login */
+	login: typeof login = login.bind( this );
+	/** @borrows setupRest as this.setupRest */
+	setupRest: typeof setupRest = setupRest.bind( this );
 	// .bind() drops the generic types. Re-casting it to keep the type signature.
-	rest = rest.bind( this ) as typeof rest;
-	getMaxBatchSize = getMaxBatchSize.bind( this );
+	rest: typeof rest = rest.bind( this ) as typeof rest;
+	/** @borrows getMaxBatchSize as this.getMaxBatchSize */
+	getMaxBatchSize: typeof getMaxBatchSize = getMaxBatchSize.bind( this );
 	// .bind() drops the generic types. Re-casting it to keep the type signature.
-	batchRest = batchRest.bind( this ) as typeof batchRest;
-	getPluginsMap = getPluginsMap.bind( this );
-	activatePlugin = activatePlugin.bind( this );
-	deactivatePlugin = deactivatePlugin.bind( this );
-	activateTheme = activateTheme.bind( this );
-	deleteAllBlocks = deleteAllBlocks;
-	createPost = createPost.bind( this );
-	deleteAllPosts = deleteAllPosts.bind( this );
-	createComment = createComment.bind( this );
-	deleteAllComments = deleteAllComments.bind( this );
-	deleteAllWidgets = deleteAllWidgets.bind( this );
-	addWidgetBlock = addWidgetBlock.bind( this );
-	deleteAllTemplates = deleteAllTemplates.bind( this );
-	resetPreferences = resetPreferences.bind( this );
-	listMedia = listMedia.bind( this );
-	uploadMedia = uploadMedia.bind( this );
-	deleteMedia = deleteMedia.bind( this );
-	deleteAllMedia = deleteAllMedia.bind( this );
-	createUser = createUser.bind( this );
-	deleteAllUsers = deleteAllUsers.bind( this );
-	getSiteSettings = getSiteSettings.bind( this );
-	updateSiteSettings = updateSiteSettings.bind( this );
+	batchRest: typeof batchRest = batchRest.bind( this ) as typeof batchRest;
+	/** @borrows getPluginsMap as this.getPluginsMap */
+	getPluginsMap: typeof getPluginsMap = getPluginsMap.bind( this );
+	/** @borrows activatePlugin as this.activatePlugin */
+	activatePlugin: typeof activatePlugin = activatePlugin.bind( this );
+	/** @borrows deactivatePlugin as this.deactivatePlugin */
+	deactivatePlugin: typeof deactivatePlugin = deactivatePlugin.bind( this );
+	/** @borrows activateTheme as this.activateTheme */
+	activateTheme: typeof activateTheme = activateTheme.bind( this );
+	/** @borrows createBlock as this.createBlock */
+	createBlock: typeof createBlock = createBlock.bind( this );
+	/** @borrows deleteAllBlocks as this.deleteAllBlocks */
+	deleteAllBlocks = deleteAllBlocks.bind( this );
+	/** @borrows createPost as this.createPost */
+	createPost: typeof createPost = createPost.bind( this );
+	/** @borrows deleteAllPosts as this.deleteAllPosts */
+	deleteAllPosts: typeof deleteAllPosts = deleteAllPosts.bind( this );
+	/** @borrows createClassicMenu as this.createClassicMenu */
+	createClassicMenu: typeof createClassicMenu =
+		createClassicMenu.bind( this );
+	/** @borrows createNavigationMenu as this.createNavigationMenu */
+	createNavigationMenu: typeof createNavigationMenu =
+		createNavigationMenu.bind( this );
+	/** @borrows deleteAllMenus as this.deleteAllMenus */
+	deleteAllMenus: typeof deleteAllMenus = deleteAllMenus.bind( this );
+	/** @borrows getNavigationMenus as this.getNavigationMenus */
+	getNavigationMenus: typeof getNavigationMenus =
+		getNavigationMenus.bind( this );
+	/** @borrows createComment as this.createComment */
+	createComment: typeof createComment = createComment.bind( this );
+	/** @borrows deleteAllComments as this.deleteAllComments */
+	deleteAllComments: typeof deleteAllComments =
+		deleteAllComments.bind( this );
+	/** @borrows deleteAllWidgets as this.deleteAllWidgets */
+	deleteAllWidgets: typeof deleteAllWidgets = deleteAllWidgets.bind( this );
+	/** @borrows addWidgetBlock as this.addWidgetBlock */
+	addWidgetBlock: typeof addWidgetBlock = addWidgetBlock.bind( this );
+	/** @borrows deleteAllTemplates as this.deleteAllTemplates */
+	deleteAllTemplates: typeof deleteAllTemplates =
+		deleteAllTemplates.bind( this );
+	/** @borrows createTemplate as this.createTemplate */
+	createTemplate: typeof createTemplate = createTemplate.bind( this );
+	/** @borrows resetPreferences as this.resetPreferences */
+	resetPreferences: typeof resetPreferences = resetPreferences.bind( this );
+	/** @borrows listMedia as this.listMedia */
+	listMedia: typeof listMedia = listMedia.bind( this );
+	/** @borrows uploadMedia as this.uploadMedia */
+	uploadMedia: typeof uploadMedia = uploadMedia.bind( this );
+	/** @borrows deleteMedia as this.deleteMedia */
+	deleteMedia: typeof deleteMedia = deleteMedia.bind( this );
+	/** @borrows deleteAllMedia as this.deleteAllMedia */
+	deleteAllMedia: typeof deleteAllMedia = deleteAllMedia.bind( this );
+	/** @borrows createUser as this.createUser */
+	createUser: typeof createUser = createUser.bind( this );
+	/** @borrows deleteAllUsers as this.deleteAllUsers */
+	deleteAllUsers: typeof deleteAllUsers = deleteAllUsers.bind( this );
+	/** @borrows getSiteSettings as this.getSiteSettings */
+	getSiteSettings: typeof getSiteSettings = getSiteSettings.bind( this );
+	/** @borrows updateSiteSettings as this.updateSiteSettings */
+	updateSiteSettings: typeof updateSiteSettings =
+		updateSiteSettings.bind( this );
+	/** @borrows deleteAllPages as this.deleteAllPages */
+	deleteAllPages: typeof deleteAllPages = deleteAllPages.bind( this );
+	/** @borrows createPage as this.createPage */
+	createPage: typeof createPage = createPage.bind( this );
+	/** @borrows getCurrentThemeGlobalStylesPostId as this.getCurrentThemeGlobalStylesPostId */
+	getCurrentThemeGlobalStylesPostId: typeof getCurrentThemeGlobalStylesPostId =
+		getCurrentThemeGlobalStylesPostId.bind( this );
+	/** @borrows getThemeGlobalStylesRevisions as this.getThemeGlobalStylesRevisions */
+	getThemeGlobalStylesRevisions: typeof getThemeGlobalStylesRevisions =
+		getThemeGlobalStylesRevisions.bind( this );
+	/** @borrows deleteAllPatternCategories as this.deleteAllPatternCategories */
+	deleteAllPatternCategories = deleteAllPatternCategories.bind( this );
+	/** @borrows setGutenbergExperiments as this.setGutenbergExperiments */
+	setGutenbergExperiments: typeof setGutenbergExperiments =
+		setGutenbergExperiments.bind( this );
 }
 
 export type { StorageState };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/media.ts b/packages/e2e-test-utils-playwright/src/request-utils/media.ts
index ac4fb0827b92a5..5b016779b7aa95 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/media.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/media.ts
@@ -25,7 +25,7 @@ export interface Media {
  * List all media files.
  *
  * @see https://developer.wordpress.org/rest-api/reference/media/#list-media
- * @param  this
+ * @param this
  */
 async function listMedia( this: RequestUtils ) {
 	const response = await this.rest< Media[] >( {
@@ -43,8 +43,8 @@ async function listMedia( this: RequestUtils ) {
  * Upload a media file.
  *
  * @see https://developer.wordpress.org/rest-api/reference/media/#create-a-media-item
- * @param  this
- * @param  filePathOrData The path or data of the file being uploaded.
+ * @param this
+ * @param filePathOrData The path or data of the file being uploaded.
  */
 async function uploadMedia(
 	this: RequestUtils,
@@ -70,8 +70,8 @@ async function uploadMedia(
  * delete a media file.
  *
  * @see https://developer.wordpress.org/rest-api/reference/media/#delete-a-media-item
- * @param  this
- * @param  mediaId The ID of the media file.
+ * @param this
+ * @param mediaId The ID of the media file.
  */
 async function deleteMedia( this: RequestUtils, mediaId: number ) {
 	const response = await this.rest( {
@@ -86,7 +86,7 @@ async function deleteMedia( this: RequestUtils, mediaId: number ) {
 /**
  * delete all media files.
  *
- * @param  this
+ * @param this
  */
 async function deleteAllMedia( this: RequestUtils ) {
 	const files = await this.listMedia();
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/menus.ts b/packages/e2e-test-utils-playwright/src/request-utils/menus.ts
new file mode 100644
index 00000000000000..419d85762c9cd0
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/menus.ts
@@ -0,0 +1,149 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+export interface MenuData {
+	title: string;
+	content: string;
+}
+export interface NavigationMenu {
+	id: number;
+	content: string;
+	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+}
+
+/**
+ * Create a classic menu
+ *
+ * @param name Menu name.
+ * @return Menu content.
+ */
+export async function createClassicMenu( this: RequestUtils, name: string ) {
+	const menuItems = [
+		{
+			title: 'Custom link',
+			url: 'http://localhost:8889/',
+			type: 'custom',
+			menu_order: 1,
+		},
+	];
+
+	const menu = await this.rest< NavigationMenu >( {
+		method: 'POST',
+		path: `/wp/v2/menus/`,
+		data: {
+			name,
+		},
+	} );
+
+	await this.batchRest(
+		menuItems.map( ( menuItem ) => ( {
+			method: 'POST',
+			path: `/wp/v2/menu-items`,
+			body: {
+				menus: menu.id,
+				object_id: undefined,
+				...menuItem,
+				parent: undefined,
+			},
+		} ) )
+	);
+
+	return menu;
+}
+
+/**
+ * Create a navigation menu
+ *
+ * @param menuData navigation menu post data.
+ * @return Menu content.
+ */
+export async function createNavigationMenu(
+	this: RequestUtils,
+	menuData: MenuData
+) {
+	return this.rest( {
+		method: 'POST',
+		path: `/wp/v2/navigation/`,
+		data: {
+			status: 'publish',
+			...menuData,
+		},
+	} );
+}
+
+/**
+ * Delete all navigation and classic menus
+ *
+ */
+export async function deleteAllMenus( this: RequestUtils ) {
+	const navMenus = await this.rest< NavigationMenu[] >( {
+		path: `/wp/v2/navigation/`,
+		data: {
+			status: [
+				'publish',
+				'pending',
+				'draft',
+				'auto-draft',
+				'future',
+				'private',
+				'inherit',
+				'trash',
+			],
+		},
+	} );
+
+	if ( navMenus.length ) {
+		await this.batchRest(
+			navMenus.map( ( menu ) => ( {
+				method: 'DELETE',
+				path: `/wp/v2/navigation/${ menu.id }?force=true`,
+			} ) )
+		);
+	}
+
+	const classicMenus = await this.rest< NavigationMenu[] >( {
+		path: `/wp/v2/menus/`,
+		data: {
+			status: [
+				'publish',
+				'pending',
+				'draft',
+				'auto-draft',
+				'future',
+				'private',
+				'inherit',
+				'trash',
+			],
+		},
+	} );
+
+	if ( classicMenus.length ) {
+		await this.batchRest(
+			classicMenus.map( ( menu ) => ( {
+				method: 'DELETE',
+				path: `/wp/v2/menus/${ menu.id }?force=true`,
+			} ) )
+		);
+	}
+}
+
+/**
+ * Get latest navigation menus
+ *
+ * @param  args
+ * @param  args.status
+ * @return {string} Menu content.
+ */
+export async function getNavigationMenus(
+	this: RequestUtils,
+	args: { status: 'publish' }
+) {
+	const navigationMenus = await this.rest< NavigationMenu[] >( {
+		method: 'GET',
+		path: `/wp/v2/navigation/`,
+		data: args,
+	} );
+	return navigationMenus;
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/pages.ts b/packages/e2e-test-utils-playwright/src/request-utils/pages.ts
new file mode 100644
index 00000000000000..6fe70ef3cb3fde
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/pages.ts
@@ -0,0 +1,81 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+const PAGE_STATUS = [
+	'publish',
+	'future',
+	'draft',
+	'pending',
+	'private',
+	'trash',
+] as const;
+
+export type Page = {
+	id: number;
+	status: ( typeof PAGE_STATUS )[ number ];
+};
+
+export type CreatePagePayload = {
+	title?: string;
+	content?: string;
+	status: ( typeof PAGE_STATUS )[ number ];
+	date?: string;
+	date_gmt?: string;
+};
+
+export async function deletePage( this: RequestUtils, id: number ) {
+	// https://developer.wordpress.org/rest-api/reference/pages/#delete-a-page
+	return await this.rest( {
+		method: 'DELETE',
+		path: `/wp/v2/pages/${ id }`,
+		params: {
+			force: true,
+		},
+	} );
+}
+
+/**
+ * Delete all pages using REST API.
+ *
+ * @param this
+ */
+export async function deleteAllPages( this: RequestUtils ) {
+	// List all pages.
+	// https://developer.wordpress.org/rest-api/reference/pages/#list-pages
+	const pages = await this.rest< Page[] >( {
+		path: '/wp/v2/pages',
+		params: {
+			per_page: 100,
+
+			status: PAGE_STATUS.join( ',' ),
+		},
+	} );
+
+	// Delete all pages one by one.
+	// "/wp/v2/pages" not yet supports batch requests.
+	await Promise.all(
+		pages.map( ( page ) => deletePage.call( this, page.id ) )
+	);
+}
+
+/**
+ * Create a new page.
+ *
+ * @param this
+ * @param payload The page payload.
+ */
+export async function createPage(
+	this: RequestUtils,
+	payload: CreatePagePayload
+) {
+	// https://developer.wordpress.org/rest-api/reference/pages/#create-a-page
+	const page = await this.rest< Page >( {
+		method: 'POST',
+		path: `/wp/v2/pages`,
+		params: payload,
+	} );
+
+	return page;
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts b/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts
new file mode 100644
index 00000000000000..ea1e24c9c7aeaf
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/patterns.ts
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+/**
+ * Delete all pattern categories using REST API.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+ * @param this
+ */
+export async function deleteAllPatternCategories( this: RequestUtils ) {
+	// List all pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#list-categories
+	const categories = await this.rest( {
+		path: '/wp/v2/wp_pattern_category',
+		params: {
+			per_page: 100,
+		},
+	} );
+
+	// Delete pattern categories.
+	// https://developer.wordpress.org/rest-api/reference/categories/#delete-a-category
+	// "/wp/v2/category" does not yet supports batch requests.
+	await this.batchRest(
+		categories.map( ( category: { id: number } ) => ( {
+			method: 'DELETE',
+			path: `/wp/v2/wp_pattern_category/${ category.id }?force=true`,
+		} ) )
+	);
+}
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/plugins.ts b/packages/e2e-test-utils-playwright/src/request-utils/plugins.ts
index 846e08e3fac9a0..f018d7d9f3903b 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/plugins.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/plugins.ts
@@ -12,8 +12,8 @@ import type { RequestUtils } from './index';
  * Fetch the plugins from API and cache them in memory,
  * since they are unlikely to change during testing.
  *
- * @param {} this           RequestUtils.
- * @param {} [forceRefetch] Force refetch the installed plugins to update the cache.
+ * @param this
+ * @param forceRefetch Force refetch the installed plugins to update the cache.
  */
 async function getPluginsMap( this: RequestUtils, forceRefetch = false ) {
 	if ( ! forceRefetch && this.pluginsMap ) {
@@ -27,25 +27,55 @@ async function getPluginsMap( this: RequestUtils, forceRefetch = false ) {
 	for ( const plugin of plugins ) {
 		// Ideally, we should be using sanitize_title() in PHP rather than kebabCase(),
 		// but we don't have the exact port of it in JS.
-		this.pluginsMap[ kebabCase( plugin.name ) ] = plugin.plugin;
+		// This is a good approximation though.
+		const slug = kebabCase( plugin.name.toLowerCase() );
+		this.pluginsMap[ slug ] = plugin.plugin;
 	}
 	return this.pluginsMap;
 }
 
 /**
- * Activates an installed plugin.
+ * Finds a plugin in the plugin map.
+ *
+ * Attempts to provide a helpful error message if not found.
  *
- * @param {this}   this RequestUtils.
- * @param {string} slug Plugin slug.
+ * @param slug       Plugin slug.
+ * @param pluginsMap Plugins map.
  */
-async function activatePlugin( this: RequestUtils, slug: string ) {
-	const pluginsMap = await this.getPluginsMap();
+function getPluginFromMap(
+	slug: string,
+	pluginsMap: Record< string, string >
+) {
 	const plugin = pluginsMap[ slug ];
 
 	if ( ! plugin ) {
+		for ( const key of Object.keys( pluginsMap ) ) {
+			if (
+				key.toLowerCase().replace( /-/g, '' ) ===
+				slug.toLowerCase().replace( /-/g, '' )
+			) {
+				throw new Error(
+					`The plugin "${ slug }" isn't installed. Did you perhaps mean "${ key }"?`
+				);
+			}
+		}
+
 		throw new Error( `The plugin "${ slug }" isn't installed` );
 	}
 
+	return plugin;
+}
+
+/**
+ * Activates an installed plugin.
+ *
+ * @param this RequestUtils.
+ * @param slug Plugin slug.
+ */
+async function activatePlugin( this: RequestUtils, slug: string ) {
+	const pluginsMap = await this.getPluginsMap();
+	const plugin = getPluginFromMap( slug, pluginsMap );
+
 	await this.rest( {
 		method: 'PUT',
 		path: `/wp/v2/plugins/${ plugin }`,
@@ -56,16 +86,12 @@ async function activatePlugin( this: RequestUtils, slug: string ) {
 /**
  * Deactivates an active plugin.
  *
- * @param {this}   this RequestUtils.
- * @param {string} slug Plugin slug.
+ * @param this RequestUtils.
+ * @param slug Plugin slug.
  */
 async function deactivatePlugin( this: RequestUtils, slug: string ) {
 	const pluginsMap = await this.getPluginsMap();
-	const plugin = pluginsMap[ slug ];
-
-	if ( ! plugin ) {
-		throw new Error( `The plugin "${ slug }" isn't installed` );
-	}
+	const plugin = getPluginFromMap( slug, pluginsMap );
 
 	await this.rest( {
 		method: 'PUT',
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/posts.ts b/packages/e2e-test-utils-playwright/src/request-utils/posts.ts
index 8c94e368545dab..3b1231619df6e9 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/posts.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/posts.ts
@@ -7,17 +7,21 @@ export interface Post {
 	id: number;
 	content: string;
 	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+	link: string;
 }
 
 export interface CreatePostPayload {
-	content: string;
+	title?: string;
+	content?: string;
 	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
+	date?: string;
+	date_gmt: string;
 }
 
 /**
  * Delete all posts using REST API.
  *
- * @param {} this RequestUtils.
+ * @param this
  */
 export async function deleteAllPosts( this: RequestUtils ) {
 	// List all posts.
@@ -50,8 +54,8 @@ export async function deleteAllPosts( this: RequestUtils ) {
 /**
  * Creates a new post using the REST API.
  *
- * @param {} this    RequestUtils.
- * @param {} payload Post attributes.
+ * @param this
+ * @param payload Post attributes.
  */
 export async function createPost(
 	this: RequestUtils,
@@ -60,7 +64,7 @@ export async function createPost(
 	const post = await this.rest< Post >( {
 		method: 'POST',
 		path: `/wp/v2/posts`,
-		params: { ...payload },
+		data: { ...payload },
 	} );
 
 	return post;
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/preferences.ts b/packages/e2e-test-utils-playwright/src/request-utils/preferences.ts
index 9696803a6beab5..0adec0ba0e36c4 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/preferences.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/preferences.ts
@@ -6,7 +6,7 @@ import type { RequestUtils } from './index';
 /**
  * Reset user preferences
  *
- * @param {this} this Request utils.
+ * @param this Request utils.
  */
 export async function resetPreferences( this: RequestUtils ) {
 	await this.rest( {
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/rest.ts b/packages/e2e-test-utils-playwright/src/request-utils/rest.ts
index 6fa0467c303d5b..45032947d7cc52 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/rest.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/rest.ts
@@ -3,6 +3,7 @@
  */
 import * as fs from 'fs/promises';
 import { dirname } from 'path';
+import { expect } from '@playwright/test';
 import type { APIRequestContext } from '@playwright/test';
 
 /**
@@ -39,10 +40,32 @@ async function getAPIRootURL( request: APIRequestContext ) {
 }
 
 async function setupRest( this: RequestUtils ): Promise< StorageState > {
-	const [ nonce, rootURL ] = await Promise.all( [
-		this.login(),
-		getAPIRootURL( this.request ),
-	] );
+	let nonce = '';
+	let rootURL = '';
+
+	// Poll until the REST API is discovered.
+	// See https://github.com/WordPress/gutenberg/issues/61627
+	await expect
+		.poll(
+			async () => {
+				try {
+					[ nonce, rootURL ] = await Promise.all( [
+						this.login(),
+						getAPIRootURL( this.request ),
+					] );
+				} catch ( error ) {
+					// Prints the error if the timeout is reached.
+					return error;
+				}
+
+				return !! ( nonce && rootURL );
+			},
+			{
+				message: 'Failed to setup REST API.',
+				timeout: 60_000, // 1 minute.
+			}
+		)
+		.toBe( true );
 
 	const { cookies } = await this.request.storageState();
 
@@ -128,8 +151,8 @@ async function rest< RestResponse = any >(
 /**
  * Get the maximum batch size for the REST API.
  *
- * @param {} this         RequestUtils.
- * @param {} forceRefetch Force revalidate the cached max batch size.
+ * @param this
+ * @param forceRefetch Force revalidate the cached max batch size.
  */
 async function getMaxBatchSize( this: RequestUtils, forceRefetch = false ) {
 	if ( ! forceRefetch && this.maxBatchSize ) {
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts b/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts
index ec76b20adfc473..d655f23c4f487c 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts
@@ -19,6 +19,9 @@ type SiteSettings = {
 	posts_per_page: number;
 	default_ping_status: 'open' | 'closed';
 	default_comment_status: 'open' | 'closed';
+	show_on_front: 'posts' | 'page';
+	page_on_front: number;
+	page_for_posts: number;
 };
 
 /**
@@ -26,7 +29,7 @@ type SiteSettings = {
  *
  * @see https://developer.wordpress.org/rest-api/reference/settings/#retrieve-a-site-setting
  *
- * @param  this RequestUtils.
+ * @param this RequestUtils.
  */
 export async function getSiteSettings( this: RequestUtils ) {
 	return await this.rest< SiteSettings >( {
@@ -40,8 +43,8 @@ export async function getSiteSettings( this: RequestUtils ) {
  *
  * @see https://developer.wordpress.org/rest-api/reference/settings/#update-a-site-setting
  *
- * @param  this         RequestUtils.
- * @param  siteSettings The partial settings payload to update.
+ * @param this         RequestUtils.
+ * @param siteSettings The partial settings payload to update.
  */
 export async function updateSiteSettings(
 	this: RequestUtils,
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/templates.ts b/packages/e2e-test-utils-playwright/src/request-utils/templates.ts
index 1d9fdd93833002..76ae7022e9b7a2 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/templates.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/templates.ts
@@ -10,6 +10,13 @@ interface Template {
 	id: string;
 }
 
+interface CreateTemplatePayload {
+	slug: string;
+	title?: string;
+	content?: string;
+	description?: string;
+}
+
 const PATH_MAPPING = {
 	wp_template: '/wp/v2/templates',
 	wp_template_part: '/wp/v2/template-parts',
@@ -18,8 +25,8 @@ const PATH_MAPPING = {
 /**
  * Delete all the templates of given type.
  *
- * @param  this
- * @param  type - Template type to delete.
+ * @param this
+ * @param type - Template type to delete.
  */
 async function deleteAllTemplates( this: RequestUtils, type: TemplateType ) {
 	const path = PATH_MAPPING[ type ];
@@ -35,10 +42,8 @@ async function deleteAllTemplates( this: RequestUtils, type: TemplateType ) {
 			continue;
 		}
 
-		let response;
-
 		try {
-			response = await this.rest( {
+			await this.rest( {
 				method: 'DELETE',
 				path: `${ path }/${ template.id }`,
 				params: { force: true },
@@ -51,16 +56,28 @@ async function deleteAllTemplates( this: RequestUtils, type: TemplateType ) {
 				responseError
 			);
 		}
-
-		if ( ! response.deleted ) {
-			// Disable reason - the error provides valuable feedback about issues with tests.
-			// eslint-disable-next-line no-console
-			console.warn(
-				`deleteAllTemplates failed to delete template (id: ${ template.wp_id }) with the following response`,
-				response
-			);
-		}
 	}
 }
 
-export { deleteAllTemplates };
+/**
+ * Creates a new template using the REST API.
+ *
+ * @param this
+ * @param type    Template type to delete.
+ * @param payload Template attributes.
+ */
+async function createTemplate(
+	this: RequestUtils,
+	type: TemplateType,
+	payload: CreateTemplatePayload
+) {
+	const template = await this.rest< Template >( {
+		method: 'POST',
+		path: PATH_MAPPING[ type ],
+		params: { ...payload, type, status: 'publish', is_wp_suggestion: true },
+	} );
+
+	return template;
+}
+
+export { deleteAllTemplates, createTemplate };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/themes.ts b/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
index bb2fbd89781595..1f56814346d6ed 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
@@ -4,7 +4,7 @@
 import type { RequestUtils } from './index';
 import { WP_BASE_URL } from '../config';
 
-const THEMES_URL = new URL( '/wp-admin/themes.php', WP_BASE_URL ).href;
+const THEMES_URL = new URL( 'wp-admin/themes.php', WP_BASE_URL ).href;
 
 async function activateTheme(
 	this: RequestUtils,
@@ -12,12 +12,26 @@ async function activateTheme(
 ): Promise< void > {
 	let response = await this.request.get( THEMES_URL );
 	const html = await response.text();
-	const matchGroup = html.match(
+	const optionalFolder = '([a-z0-9-]+%2F)?';
+
+	// The `optionalFolder` regex part matches paths with a folder,
+	// so it will return the first match, which might contain a folder.
+	// First try to honor the included theme slug, that is, without a folder.
+	let matchGroup = html.match(
 		`action=activate&amp;stylesheet=${ encodeURIComponent(
 			themeSlug
 		) }&amp;_wpnonce=[a-z0-9]+`
 	);
 
+	// If the theme is not found, try to match the theme slug with a folder.
+	if ( ! matchGroup ) {
+		matchGroup = html.match(
+			`action=activate&amp;stylesheet=${ optionalFolder }${ encodeURIComponent(
+				themeSlug
+			) }&amp;_wpnonce=[a-z0-9]+`
+		);
+	}
+
 	if ( ! matchGroup ) {
 		if ( html.includes( `data-slug="${ themeSlug }"` ) ) {
 			// The theme is already activated.
@@ -36,4 +50,54 @@ async function activateTheme(
 	await response.dispose();
 }
 
-export { activateTheme };
+// https://developer.wordpress.org/rest-api/reference/themes/#definition
+async function getCurrentThemeGlobalStylesPostId( this: RequestUtils ) {
+	type ThemeItem = {
+		stylesheet: string;
+		status: string;
+		_links: { 'wp:user-global-styles': { href: string }[] };
+	};
+	const themes = await this.rest< ThemeItem[] >( {
+		path: '/wp/v2/themes',
+	} );
+	let themeGlobalStylesId: string = '';
+	if ( themes && themes.length ) {
+		const currentTheme: ThemeItem | undefined = themes.find(
+			( { status } ) => status === 'active'
+		);
+
+		const globalStylesURL =
+			currentTheme?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href;
+		if ( globalStylesURL ) {
+			themeGlobalStylesId = globalStylesURL?.split(
+				'rest_route=/wp/v2/global-styles/'
+			)[ 1 ];
+		}
+	}
+	return themeGlobalStylesId;
+}
+
+/**
+ * Deletes all post revisions using the REST API.
+ *
+ * @param {}              this     RequestUtils.
+ * @param {string|number} parentId Post attributes.
+ */
+async function getThemeGlobalStylesRevisions(
+	this: RequestUtils,
+	parentId: number | string
+) {
+	// Lists all global styles revisions.
+	return await this.rest< Record< string, Object >[] >( {
+		path: `/wp/v2/global-styles/${ parentId }/revisions`,
+		params: {
+			per_page: 100,
+		},
+	} );
+}
+
+export {
+	activateTheme,
+	getCurrentThemeGlobalStylesPostId,
+	getThemeGlobalStylesRevisions,
+};
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/users.ts b/packages/e2e-test-utils-playwright/src/request-utils/users.ts
index c790ec9e3a9897..11df5f37468ca6 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/users.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/users.ts
@@ -5,6 +5,7 @@ import type { RequestUtils } from './index';
 
 export interface User {
 	id: number;
+	name: string;
 	email: string;
 }
 
@@ -30,7 +31,7 @@ export interface UserRequestData {
  * List all users.
  *
  * @see https://developer.wordpress.org/rest-api/reference/users/#list-users
- * @param  this
+ * @param this
  */
 async function listUsers( this: RequestUtils ) {
 	const response = await this.rest< User[] >( {
@@ -48,8 +49,8 @@ async function listUsers( this: RequestUtils ) {
  * Add a test user.
  *
  * @see https://developer.wordpress.org/rest-api/reference/users/#create-a-user
- * @param  this
- * @param  user User data to create.
+ * @param this
+ * @param user User data to create.
  */
 async function createUser( this: RequestUtils, user: UserData ) {
 	const userData: UserRequestData = {
@@ -86,8 +87,8 @@ async function createUser( this: RequestUtils, user: UserData ) {
  * Delete a user.
  *
  * @see https://developer.wordpress.org/rest-api/reference/users/#delete-a-user
- * @param  this
- * @param  userId The ID of the user.
+ * @param this
+ * @param userId The ID of the user.
  */
 async function deleteUser( this: RequestUtils, userId: number ) {
 	const response = await this.rest( {
@@ -102,7 +103,7 @@ async function deleteUser( this: RequestUtils, userId: number ) {
 /**
  * Delete all users except main root user.
  *
- * @param  this
+ * @param this
  */
 async function deleteAllUsers( this: RequestUtils ) {
 	const users = await listUsers.bind( this )();
@@ -110,8 +111,11 @@ async function deleteAllUsers( this: RequestUtils ) {
 	// The users endpoint doesn't support batch request yet.
 	const responses = await Promise.all(
 		users
-			// Do not delete root user.
-			.filter( ( user: User ) => user.id !== 1 )
+			// Do not delete neither root user nor the current user.
+			.filter(
+				( user: User ) =>
+					user.id !== 1 && user.name !== this.user.username
+			)
 			.map( ( user: User ) => deleteUser.bind( this )( user.id ) )
 	);
 
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index ac68ae7630e314..6ef614024d7d97 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -2,13 +2,21 @@
  * External dependencies
  */
 import * as path from 'path';
-import { test as base, expect } from '@playwright/test';
+import { test as base, expect, chromium } from '@playwright/test';
 import type { ConsoleMessage } from '@playwright/test';
+import * as getPort from 'get-port';
 
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils } from './index';
+import {
+	Admin,
+	Editor,
+	PageUtils,
+	RequestUtils,
+	Metrics,
+	Lighthouse,
+} from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -26,13 +34,13 @@ const OBSERVED_CONSOLE_MESSAGE_TYPES = [ 'warn', 'error' ] as const;
  * Adds a page event handler to emit uncaught exception to process if one of
  * the observed console logging types is encountered.
  *
- * @param  message The console message.
+ * @param message The console message.
  */
 function observeConsoleLogging( message: ConsoleMessage ) {
 	const type = message.type();
 	if (
 		! OBSERVED_CONSOLE_MESSAGE_TYPES.includes(
-			type as typeof OBSERVED_CONSOLE_MESSAGE_TYPES[ number ]
+			type as ( typeof OBSERVED_CONSOLE_MESSAGE_TYPES )[ number ]
 		)
 	) {
 		return;
@@ -52,7 +60,12 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 	// See: https://core.trac.wordpress.org/ticket/37000
 	// See: https://www.chromestatus.com/feature/5088147346030592
 	// See: https://www.chromestatus.com/feature/5633521622188032
-	if ( text.includes( 'A cookie associated with a cross-site resource' ) ) {
+	if (
+		text.includes( 'A cookie associated with a cross-site resource' ) ||
+		text.includes(
+			'https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite'
+		)
+	) {
 		return;
 	}
 
@@ -85,13 +98,25 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 		return;
 	}
 
-	const logFunction = type as typeof OBSERVED_CONSOLE_MESSAGE_TYPES[ number ];
+	// https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
+	if (
+		text.includes( 'Layout was forced before the page was fully loaded' )
+	) {
+		return;
+	}
+
+	// Deprecated warnings coming from the third-party libraries.
+	if ( text.includes( 'MouseEvent.moz' ) ) {
+		return;
+	}
+
+	const logFunction =
+		type as ( typeof OBSERVED_CONSOLE_MESSAGE_TYPES )[ number ];
 
 	// Disable reason: We intentionally bubble up the console message
 	// which, unless the test explicitly anticipates the logging via
 	// @wordpress/jest-console matchers, will cause the intended test
 	// failure.
-
 	// eslint-disable-next-line no-console
 	console[ logFunction ]( text );
 }
@@ -102,13 +127,16 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
+		metrics: Metrics;
+		lighthouse: Lighthouse;
 	},
 	{
 		requestUtils: RequestUtils;
+		lighthousePort: number;
 	}
 >( {
-	admin: async ( { page, pageUtils }, use ) => {
-		await use( new Admin( { page, pageUtils } ) );
+	admin: async ( { page, pageUtils, editor }, use ) => {
+		await use( new Admin( { page, pageUtils, editor } ) );
 	},
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );
@@ -119,9 +147,15 @@ const test = base.extend<
 		await use( page );
 
 		// Clear local storage after each test.
-		await page.evaluate( () => {
-			window.localStorage.clear();
-		} );
+		// This needs to be wrapped with a try/catch because it can fail when
+		// the test is skipped (e.g. via fixme).
+		try {
+			await page.evaluate( () => {
+				window.localStorage.clear();
+			} );
+		} catch ( error ) {
+			// noop.
+		}
 
 		await page.close();
 	},
@@ -135,40 +169,34 @@ const test = base.extend<
 				storageStatePath: STORAGE_STATE_PATH,
 			} );
 
-			await Promise.all( [
-				requestUtils.activateTheme( 'twentytwentyone' ),
-				// Disable this test plugin as it's conflicting with some of the tests.
-				// We already have reduced motion enabled and Playwright will wait for most of the animations anyway.
-				requestUtils.deactivatePlugin(
-					'gutenberg-test-plugin-disables-the-css-animations'
-				),
-				requestUtils.deleteAllPosts(),
-				requestUtils.deleteAllBlocks(),
-				requestUtils.resetPreferences(),
-			] );
-
 			await use( requestUtils );
 		},
-		{ scope: 'worker' },
+		{ scope: 'worker', auto: true },
 	],
-	// An automatic fixture to configure snapshot settings globally.
-	snapshotConfig: [
-		async ( {}, use, testInfo ) => {
-			// A work-around to remove the default snapshot suffix.
-			// See https://github.com/microsoft/playwright/issues/11134
-			testInfo.snapshotSuffix = '';
-			// Normalize snapshots into the same `__snapshots__` folder to minimize
-			// the file name length on Windows.
-			// See https://github.com/WordPress/gutenberg/issues/40291
-			testInfo.snapshotDir = path.join(
-				path.dirname( testInfo.file ),
-				'__snapshots__'
-			);
-
-			await use();
+	// Spins up a new browser for use by the Lighthouse fixture
+	// so that Lighthouse can connect to the debugging port.
+	// As a worker-scoped fixture, this will only launch 1
+	// instance for the whole test worker, so multiple tests
+	// will share the same instance with the same port.
+	lighthousePort: [
+		async ( {}, use ) => {
+			const port = await getPort();
+			const browser = await chromium.launch( {
+				args: [ `--remote-debugging-port=${ port }` ],
+			} );
+
+			await use( port );
+
+			await browser.close();
 		},
-		{ auto: true },
+		{ scope: 'worker' },
 	],
+	lighthouse: async ( { page, lighthousePort }, use ) => {
+		await use( new Lighthouse( { page, port: lighthousePort } ) );
+	},
+	metrics: async ( { page }, use ) => {
+		await use( new Metrics( { page } ) );
+	},
 } );
 
 export { test, expect };
diff --git a/packages/e2e-test-utils-playwright/src/types.ts b/packages/e2e-test-utils-playwright/src/types.ts
index b642c6bd7fca73..3dd6b0683aa33c 100644
--- a/packages/e2e-test-utils-playwright/src/types.ts
+++ b/packages/e2e-test-utils-playwright/src/types.ts
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
 declare global {
 	interface Window {
 		// Silence the warning for `window.wp` in Playwright's evaluate functions.
 		wp: any;
+		// Helper function added by Metrics fixture for web-vitals.js.
+		__reportVitals__: ( data: string ) => void;
 	}
 }
 
diff --git a/packages/e2e-test-utils-playwright/tsconfig.json b/packages/e2e-test-utils-playwright/tsconfig.json
index ec8df8e1766f09..5e52bb94f706d9 100644
--- a/packages/e2e-test-utils-playwright/tsconfig.json
+++ b/packages/e2e-test-utils-playwright/tsconfig.json
@@ -1,9 +1,11 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"incremental": false,
 		"composite": false,
-		"module": "CommonJS",
+		"module": "Node16",
+		"moduleResolution": "node16",
 		"types": [ "node" ],
 		"rootDir": "src",
 		"noEmit": false,
diff --git a/packages/e2e-test-utils/.npmrc b/packages/e2e-test-utils/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/e2e-test-utils/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 99b59e330ec3cd..24f73664bd7dcc 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,124 @@
 
 ## Unreleased
 
+## 11.13.0 (2024-11-27)
+
+## 11.12.0 (2024-11-16)
+
+## 11.11.0 (2024-10-30)
+
+## 11.10.0 (2024-10-16)
+
+## 11.9.0 (2024-10-03)
+
+## 11.8.0 (2024-09-19)
+
+## 11.7.0 (2024-09-05)
+
+## 11.6.0 (2024-08-21)
+
+## 11.5.0 (2024-08-07)
+
+## 11.4.0 (2024-07-24)
+
+## 11.3.0 (2024-07-10)
+
+## 11.2.0 (2024-06-26)
+
+## 11.1.0 (2024-06-15)
+
+## 11.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 10.29.0 (2024-05-16)
+
+## 10.28.0 (2024-05-02)
+
+## 10.27.0 (2024-04-19)
+
+## 10.26.0 (2024-04-03)
+
+## 10.25.0 (2024-03-21)
+
+## 10.24.0 (2024-03-06)
+
+## 10.23.0 (2024-02-21)
+
+## 10.22.0 (2024-02-09)
+
+## 10.21.0 (2024-01-24)
+
+## 10.20.0 (2024-01-10)
+
+## 10.19.0 (2023-12-13)
+
+## 10.18.0 (2023-11-29)
+
+## 10.17.0 (2023-11-16)
+
+## 10.16.0 (2023-11-02)
+
+## 10.15.0 (2023-10-18)
+
+## 10.14.0 (2023-10-05)
+
+## 10.13.0 (2023-09-20)
+
+### Enhancements
+
+-   Update promise order in `loginUser` to avoid any flakiness in the tests.
+-   Update `activateTheme` to redirect to `themes.php` after theme activation, if theme redirects to some other page.
+-   Update `activatePlugin` to redirect to `plugins.php` after plugin activation, if plugin redirects to some other page.
+
+## 10.12.0 (2023-08-31)
+
+## 10.11.0 (2023-08-16)
+
+## 10.10.0 (2023-08-10)
+
+## 10.9.0 (2023-07-20)
+
+## 10.8.0 (2023-07-05)
+
+## 10.7.0 (2023-06-23)
+
+## 10.6.0 (2023-06-07)
+
+## 10.5.0 (2023-05-24)
+
+## 10.4.0 (2023-05-10)
+
+## 10.3.0 (2023-04-26)
+
+## 10.2.0 (2023-04-12)
+
+## 10.1.0 (2023-03-29)
+
+## 10.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 9.5.0 (2023-03-01)
+
+## 9.4.0 (2023-02-15)
+
+## 9.3.0 (2023-02-01)
+
+## 9.2.0 (2023-01-11)
+
+## 9.1.0 (2023-01-02)
+
+## 9.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Remove all the site editor navigation panel related utils: getSiteEditorMenuItem, isSiteEditorRoot, navigateSiteEditorBack, navigateSiteEditorBackToRoot, openSiteEditorNavigationPanel, siteEditorNavigateSequence, clickSiteEditorMenuItem, closeSiteEditorNavigationPanel.
+
 ## 8.6.0 (2022-11-16)
 
 ## 8.5.0 (2022-11-02)
@@ -18,13 +136,13 @@
 
 ## 8.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
 ## 7.2.0 (2022-04-08)
 
-### Enhancement
+### Enhancements
 
 -   Changed `setOption` to use `options.php`, to allow setting any option (and to be more consistent with `getOption`). [#39502](https://github.com/WordPress/gutenberg/pull/39502)
 -   Changed `setOption` to return the changed setting's previous value (to make restoring it easier). [#39502](https://github.com/WordPress/gutenberg/pull/39502)
@@ -36,7 +154,7 @@
 
 -   Updated `clickMenuItem` method to use exact label matching instead of partial [#39274](https://github.com/WordPress/gutenberg/pull/39274).
 
-### Enhancement
+### Enhancements
 
 -   The `toggleMoreMenu` and `clickMoreMenuItem` utilities no longer require a second 'context' parameter.
 
@@ -101,7 +219,7 @@
 
 -   The disableNavigationMode utility was removed. By default, the editor is in edit mode now.
 
-### Improvements
+### Enhancements
 
 -   `setBrowserViewport` accepts an object of `width`, `height` values, to assign a viewport of arbitrary size.
 
@@ -113,7 +231,7 @@
 
 ## 2.0.0 (2019-05-21)
 
-### Requirements
+### Breaking Changes
 
 -   The minimum version of Gutenberg `5.6.0` or the minimum version of WordPress `5.2.0`.
 
@@ -130,7 +248,7 @@
 -   New Function: `openAllBlockInserterCategories` - Opens all block inserter categories.
 -   New Function: `getAllBlockInserterItemTitles` - Opens the global block inserter.
 
-### Requirements
+### Breaking Changes
 
 -   The minimum version of Gutenberg `5.3.0` or the minimum version of WordPress `5.2.0`.
 
@@ -138,8 +256,4 @@
 
 ### New Features
 
--   Initial release.
-
-### Requirements
-
--   The minimum version of Gutenberg `5.2.0` or the minimum version of WordPress `5.2.0`.
+-   Initial release. The minimum version of Gutenberg `5.2.0` or the minimum version of WordPress `5.2.0`.
diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md
index 5d62602743afe0..30548961db26a4 100644
--- a/packages/e2e-test-utils/README.md
+++ b/packages/e2e-test-utils/README.md
@@ -14,7 +14,7 @@ Install the module
 npm install @wordpress/e2e-test-utils --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## API
 
@@ -109,26 +109,14 @@ _Parameters_
 
 -   _buttonLabel_ `string`: The label to search the button for.
 
-### clickSiteEditorMenuItem
-
-Searches for an item in the navigation panel with the label provided and clicks it.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
 ### closeGlobalBlockInserter
 
-Undocumented declaration.
+Closes the global inserter.
 
 ### closeListView
 
 Closes list view
 
-### closeSiteEditorNavigationPanel
-
-Closes the site editor navigation panel if open
-
 ### createEmbeddingMatcher
 
 Creates a function to determine if a request is embedding a certain URL.
@@ -265,8 +253,8 @@ _Parameters_
 
 -   _slug_ `string`: Theme slug.
 -   _settings_ `Object?`: Optional settings object.
--   _settings.newThemeSlug_ `string?`: A theme to switch to if the theme to delete is active. Required if the theme to delete is active.
--   _settings.newThemeSearchTerm_ `string?`: A search term to use if the new theme is not findable by its slug.
+-   _settings.newThemeSlug_ `?string`: A theme to switch to if the theme to delete is active. Required if the theme to delete is active.
+-   _settings.newThemeSearchTerm_ `?string`: A search term to use if the new theme is not findable by its slug.
 
 ### deleteUser
 
@@ -309,8 +297,7 @@ _Returns_
 
 ### enableFocusLossObservation
 
-Adds an event listener to the document which throws an error if there is a
-loss of focus.
+Adds an event listener to the document which throws an error if there is a loss of focus.
 
 ### enablePageDialogAccept
 
@@ -328,6 +315,10 @@ _Returns_
 
 -   `Promise`: Promise resolving once the sidebar is opened.
 
+### enterEditMode
+
+Enters edit mode.
+
 ### findSidebarPanelToggleButtonWithTitle
 
 Finds a sidebar panel with the provided title.
@@ -370,8 +361,7 @@ _Returns_
 
 ### getAvailableBlockTransforms
 
-Returns an array of strings with all block titles,
-that the current selected block can be transformed into.
+Returns an array of strings with all block titles, that the current selected block can be transformed into.
 
 _Returns_
 
@@ -440,10 +430,7 @@ _Returns_
 
 ### getPageError
 
-Returns a promise resolving to one of either a string or null. A string will
-be resolved if an error message is present in the contents of the page. If no
-error is present, a null value will be resolved instead. This requires the
-environment be configured to display errors.
+Returns a promise resolving to one of either a string or null. A string will be resolved if an error message is present in the contents of the page. If no error is present, a null value will be resolved instead. This requires the environment be configured to display errors.
 
 _Related_
 
@@ -453,18 +440,6 @@ _Returns_
 
 -   `Promise<?string>`: Promise resolving to a string or null, depending whether a page error is present.
 
-### getSiteEditorMenuItem
-
-Searches for an item in the site editor navigation menu with the provided label.
-
-_Parameters_
-
--   _label_ `string`: The label to search the menu item for.
-
-_Returns_
-
--   `Promise<?ElementHandle>`: The menu item handle or `null`
-
 ### hasBlockSwitcher
 
 Returns a boolean indicating if the current selected block has a block switcher or not.
@@ -475,41 +450,27 @@ _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.
-
-_Parameters_
-
--   _searchTerm_ `string`: The text to search the inserter for.
-
-### 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 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.
 
 ### installPlugin
 
@@ -518,7 +479,7 @@ Installs a plugin from the WP.org repository.
 _Parameters_
 
 -   _slug_ `string`: Plugin slug.
--   _searchTerm_ `string?`: If the plugin is not findable by its slug use an alternative term to search.
+-   _searchTerm_ `?string`: If the plugin is not findable by its slug use an alternative term to search.
 
 ### installTheme
 
@@ -528,7 +489,7 @@ _Parameters_
 
 -   _slug_ `string`: Theme slug.
 -   _settings_ `Object?`: Optional settings object.
--   _settings.searchTerm_ `string?`: Search term to use if the theme is not findable by its slug.
+-   _settings.searchTerm_ `?string`: Search term to use if the theme is not findable by its slug.
 
 ### isCurrentURL
 
@@ -551,20 +512,13 @@ _Returns_
 
 -   `Promise`: Promise resolving with a boolean indicating if the focused block is the default block.
 
-### isOfflineMode
+### isListViewOpen
 
 Undocumented declaration.
 
-### isSiteEditorRoot
-
-Returns `true` if in the site editor navigation root
-
-Checks whether the “Back to dashboard” button is visible. If
-not in the root, a “Back” button would be visible instead.
-
-_Returns_
+### isOfflineMode
 
--   `Promise<boolean>`: Whether it currently is the navigation root or not
+Undocumented declaration.
 
 ### isThemeInstalled
 
@@ -587,10 +541,13 @@ _Parameters_
 -   _username_ `?string`: String to be used as user credential.
 -   _password_ `?string`: String to be used as user credential.
 
+### logout
+
+Performs log out.
+
 ### mockOrTransform
 
-Mocks a request with the supplied mock object, or allows it to run with an optional transform, based on the
-deserialised JSON response for the request.
+Mocks a request with the supplied mock object, or allows it to run with an optional transform, based on the deserialised JSON response for the request.
 
 _Parameters_
 
@@ -602,21 +559,13 @@ _Returns_
 
 -   `Promise`: Promise that uses `mockCheck` to see if a request should be mocked with `mock`, and optionally transforms the response with `responseObjectTransform`.
 
-### navigateSiteEditorBack
-
-Navigates the site editor back
-
-### navigateSiteEditorBackToRoot
-
-Goes back until it gets to the root
-
 ### openDocumentSettingsSidebar
 
 Clicks on the button in the header which opens Document Settings sidebar when it is closed.
 
 ### openGlobalBlockInserter
 
-Opens the global block inserter.
+Opens the global inserter.
 
 ### openGlobalStylesPanel
 
@@ -650,10 +599,6 @@ Opens the previous global styles panel.
 
 Opens the publish panel.
 
-### openSiteEditorNavigationPanel
-
-Opens the site editor navigation panel if closed
-
 ### openTypographyToolsPanelMenu
 
 Opens the Typography tools panel menu provided via block supports.
@@ -669,8 +614,7 @@ _Parameters_
 
 ### pressKeyWithModifier
 
-Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier
-is normalized to platform-specific modifier.
+Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier is normalized to platform-specific modifier.
 
 _Parameters_
 
@@ -679,8 +623,7 @@ _Parameters_
 
 ### publishPost
 
-Publishes the post, resolving once the request is complete (once a notice
-is displayed).
+Publishes the post, resolving once the request is complete (once a notice is displayed).
 
 _Returns_
 
@@ -688,8 +631,7 @@ _Returns_
 
 ### publishPostWithPrePublishChecksDisabled
 
-Publishes the post without the pre-publish checks,
-resolving once the request is complete (once a notice is displayed).
+Publishes the post without the pre-publish checks, resolving once the request is complete (once a notice is displayed).
 
 _Returns_
 
@@ -701,8 +643,7 @@ Clears all user meta preferences.
 
 ### saveDraft
 
-Saves the post as a draft, resolving once the request is complete (once the
-"Saved" indicator is displayed).
+Saves the post as a draft, resolving once the request is complete (once the "Saved" indicator is displayed).
 
 _Returns_
 
@@ -710,27 +651,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
 
@@ -750,8 +715,7 @@ _Parameters_
 
 ### setClipboardData
 
-Sets the clipboard data that can be pasted with
-`pressKeyWithModifier( 'primary', 'v' )`.
+Sets the clipboard data that can be pasted with `pressKeyWithModifier( 'primary', 'v' )`.
 
 _Parameters_
 
@@ -817,16 +781,15 @@ _Parameters_
 
 ### showBlockToolbar
 
-The block toolbar is not always visible while typing.
-Call this function to reveal it.
+The block toolbar is not always visible while typing. Call this function to reveal it.
 
-### siteEditorNavigateSequence
+### switchBlockInspectorTab
 
-Navigates through a sequence of links in the site editor navigation panel
+Clicks on the block inspector tab button with the supplied label and waits for the tab switch.
 
 _Parameters_
 
--   _labels_ `string[] | string`: Labels to navigate through
+-   _label_ `string`: Aria label to find tab button by.
 
 ### switchEditorModeTo
 
@@ -838,13 +801,11 @@ _Parameters_
 
 ### switchUserToAdmin
 
-Switches the current user to the admin user (if the user
-running the test is not already the admin user).
+Switches the current user to the admin user (if the user running the test is not already the admin user).
 
 ### switchUserToTest
 
-Switches the current user to whichever user we should be
-running the tests as (if we're not already that user).
+Switches the current user to whichever user we should be running the tests as (if we're not already that user).
 
 ### toggleGlobalBlockInserter
 
@@ -939,10 +900,7 @@ _Parameters_
 
 ### waitForWindowDimensions
 
-Function that waits until the page viewport has the required dimensions.
-It is being used to address a problem where after using setViewport the execution may continue,
-without the new dimensions being applied.
-<https://github.com/GoogleChrome/puppeteer/issues/1751>
+Function that waits until the page viewport has the required dimensions. It is being used to address a problem where after using setViewport the execution may continue, without the new dimensions being applied. <https://github.com/GoogleChrome/puppeteer/issues/1751>
 
 _Parameters_
 
@@ -953,13 +911,7 @@ _Parameters_
 
 Queries the WordPress data module.
 
-`page.evaluate` - used in the function - returns `undefined`
-when it encounters a non-serializable value.
-Since we store many different values in the data module,
-you can end up with an `undefined` result. Before using
-this function, make sure the data you are querying
-doesn't contain non-serializable values, for example,
-functions, DOM element handles, etc.
+`page.evaluate` - used in the function - returns `undefined` when it encounters a non-serializable value. Since we store many different values in the data module, you can end up with an `undefined` result. Before using this function, make sure the data you are querying doesn't contain non-serializable values, for example, functions, DOM element handles, etc.
 
 _Related_
 
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index c6d8937ff03a42..9fcb70294e852d 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "8.6.0",
+	"version": "11.13.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -29,16 +30,16 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/url": "file:../url",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/url": "*",
 		"change-case": "^4.1.2",
 		"form-data": "^4.0.0",
-		"node-fetch": "^2.6.0"
+		"node-fetch": "2.7.0"
 	},
 	"peerDependencies": {
-		"jest": ">=27",
+		"jest": ">=29",
 		"puppeteer-core": ">=11"
 	},
 	"publishConfig": {
diff --git a/packages/e2e-test-utils/src/activate-plugin.js b/packages/e2e-test-utils/src/activate-plugin.js
index 694321c1193bac..1873363ef196d7 100644
--- a/packages/e2e-test-utils/src/activate-plugin.js
+++ b/packages/e2e-test-utils/src/activate-plugin.js
@@ -4,6 +4,7 @@
 import { switchUserToAdmin } from './switch-user-to-admin';
 import { switchUserToTest } from './switch-user-to-test';
 import { visitAdminPage } from './visit-admin-page';
+import { isCurrentURL } from './is-current-url';
 
 /**
  * Activates an installed plugin.
@@ -21,6 +22,10 @@ export async function activatePlugin( slug ) {
 		return;
 	}
 	await page.click( `tr[data-slug="${ slug }"] .activate a` );
+
+	if ( ! isCurrentURL( 'plugins.php' ) ) {
+		await visitAdminPage( 'plugins.php' );
+	}
 	await page.waitForSelector( `tr[data-slug="${ slug }"] .deactivate a` );
 	await switchUserToTest();
 }
diff --git a/packages/e2e-test-utils/src/activate-theme.js b/packages/e2e-test-utils/src/activate-theme.js
index 038f6ebe310718..e01bf48cfb5d63 100644
--- a/packages/e2e-test-utils/src/activate-theme.js
+++ b/packages/e2e-test-utils/src/activate-theme.js
@@ -4,6 +4,7 @@
 import { switchUserToAdmin } from './switch-user-to-admin';
 import { switchUserToTest } from './switch-user-to-test';
 import { visitAdminPage } from './visit-admin-page';
+import { isCurrentURL } from './is-current-url';
 
 /**
  * Activates an installed theme.
@@ -23,6 +24,10 @@ export async function activateTheme( slug ) {
 	}
 
 	await page.click( `div[data-slug="${ slug }"] .button.activate` );
+
+	if ( ! isCurrentURL( 'themes.php' ) ) {
+		await visitAdminPage( 'themes.php' );
+	}
 	await page.waitForSelector( `div[data-slug="${ slug }"].active` );
 	await switchUserToTest();
 }
diff --git a/packages/e2e-test-utils/src/are-pre-publish-checks-enabled.js b/packages/e2e-test-utils/src/are-pre-publish-checks-enabled.js
index 9d8eaf38f3ffd6..0b0d18042aa6ce 100644
--- a/packages/e2e-test-utils/src/are-pre-publish-checks-enabled.js
+++ b/packages/e2e-test-utils/src/are-pre-publish-checks-enabled.js
@@ -9,5 +9,5 @@ import { wpDataSelect } from './wp-data-select';
  * @return {Promise<boolean>} Boolean which represents the state of prepublish checks.
  */
 export async function arePrePublishChecksEnabled() {
-	return wpDataSelect( 'core/editor', 'isPublishSidebarEnabled' );
+	return wpDataSelect( 'core', 'isPublishSidebarEnabled' );
 }
diff --git a/packages/e2e-test-utils/src/click-block-appender.js b/packages/e2e-test-utils/src/click-block-appender.js
index caae3dbf11dc79..b1c69789544c78 100644
--- a/packages/e2e-test-utils/src/click-block-appender.js
+++ b/packages/e2e-test-utils/src/click-block-appender.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { canvas } from './canvas';
+
 /**
  * Clicks the default block appender.
  */
@@ -6,7 +11,7 @@ export async function clickBlockAppender() {
 	await page.evaluate( () =>
 		window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
 	);
-	const appender = await page.waitForSelector(
+	const appender = await canvas().waitForSelector(
 		'.block-editor-default-block-appender__content'
 	);
 	await appender.click();
diff --git a/packages/e2e-test-utils/src/click-menu-item.js b/packages/e2e-test-utils/src/click-menu-item.js
index b43629217c1c5f..f0a5f0d3258674 100644
--- a/packages/e2e-test-utils/src/click-menu-item.js
+++ b/packages/e2e-test-utils/src/click-menu-item.js
@@ -4,8 +4,8 @@
  * @param {string} label The label to search the menu item for.
  */
 export async function clickMenuItem( label ) {
-	const menuItems = await page.$x(
+	const menuItem = await page.waitForXPath(
 		`//*[@role="menu"]//*[text()="${ label }"]`
 	);
-	await menuItems[ 0 ].click();
+	await menuItem.click();
 }
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index 3bf2e33aeb34f3..0b2e327a5c05c2 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.
@@ -13,27 +14,31 @@ import { clickBlockToolbarButton } from './click-block-toolbar-button';
  */
 export const createReusableBlock = async ( content, title ) => {
 	const reusableBlockNameInputSelector =
-		'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
+		'.patterns-menu-items__convert-modal .components-text-control__input';
+	const syncToggleSelectorChecked =
+		'.patterns-menu-items__convert-modal .components-form-toggle.is-checked';
 	// Insert a paragraph block
 	await insertBlock( 'Paragraph' );
 	await page.keyboard.type( content );
 
 	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Create Reusable block' );
+	await clickMenuItem( 'Create pattern' );
 	const nameInput = await page.waitForSelector(
 		reusableBlockNameInputSelector
 	);
 	await nameInput.click();
 	await page.keyboard.type( title );
+
+	await page.waitForSelector( syncToggleSelectorChecked );
 	await page.keyboard.press( 'Enter' );
 
 	// Wait for creation to finish
 	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+		'//*[contains(@class, "components-snackbar")]/*[contains(text(),"pattern created:")]'
 	);
 
 	// 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-test-utils/src/delete-theme.js b/packages/e2e-test-utils/src/delete-theme.js
index 98b7e2b4589234..8b59c9f1e7a112 100644
--- a/packages/e2e-test-utils/src/delete-theme.js
+++ b/packages/e2e-test-utils/src/delete-theme.js
@@ -13,8 +13,8 @@ import { isThemeInstalled } from './theme-installed';
  *
  * @param {string}  slug                        Theme slug.
  * @param {Object?} settings                    Optional settings object.
- * @param {string?} settings.newThemeSlug       A theme to switch to if the theme to delete is active. Required if the theme to delete is active.
- * @param {string?} settings.newThemeSearchTerm A search term to use if the new theme is not findable by its slug.
+ * @param {?string} settings.newThemeSlug       A theme to switch to if the theme to delete is active. Required if the theme to delete is active.
+ * @param {?string} settings.newThemeSearchTerm A search term to use if the new theme is not findable by its slug.
  */
 export async function deleteTheme(
 	slug,
diff --git a/packages/e2e-test-utils/src/disable-pre-publish-checks.js b/packages/e2e-test-utils/src/disable-pre-publish-checks.js
index 2c12a0aaaa99e4..a3a80effbde643 100644
--- a/packages/e2e-test-utils/src/disable-pre-publish-checks.js
+++ b/packages/e2e-test-utils/src/disable-pre-publish-checks.js
@@ -10,7 +10,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
 export async function disablePrePublishChecks() {
 	await togglePreferencesOption(
 		'General',
-		'Include pre-publish checklist',
+		'Enable pre-publish checks',
 		false
 	);
 	await toggleMoreMenu( 'close' );
diff --git a/packages/e2e-test-utils/src/enable-pre-publish-checks.js b/packages/e2e-test-utils/src/enable-pre-publish-checks.js
index a9c8b572302b15..817e2414b09405 100644
--- a/packages/e2e-test-utils/src/enable-pre-publish-checks.js
+++ b/packages/e2e-test-utils/src/enable-pre-publish-checks.js
@@ -10,7 +10,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
 export async function enablePrePublishChecks() {
 	await togglePreferencesOption(
 		'General',
-		'Include pre-publish checklist',
+		'Enable pre-publish checks',
 		true
 	);
 	await toggleMoreMenu( 'close' );
diff --git a/packages/e2e-test-utils/src/ensure-sidebar-opened.js b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
index 5ea99c629c15ef..95c674e980643a 100644
--- a/packages/e2e-test-utils/src/ensure-sidebar-opened.js
+++ b/packages/e2e-test-utils/src/ensure-sidebar-opened.js
@@ -8,7 +8,8 @@ export async function ensureSidebarOpened() {
 		'.edit-post-header__settings [aria-label="Settings"][aria-expanded="false"],' +
 			'.edit-site-header__actions [aria-label="Settings"][aria-expanded="false"],' +
 			'.edit-widgets-header__actions [aria-label="Settings"][aria-expanded="false"],' +
-			'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"]'
+			'.edit-site-header-edit-mode__actions [aria-label="Settings"][aria-expanded="false"],' +
+			'.editor-header__settings [aria-label="Settings"][aria-expanded="false"]'
 	);
 
 	if ( toggleSidebarButton ) {
diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js
index 3faff193ba7ece..bbd838c0cc583f 100644
--- a/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js
+++ b/packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js
@@ -9,7 +9,7 @@
  */
 export async function findSidebarPanelToggleButtonWithTitle( panelTitle ) {
 	const buttons = await page.$x(
-		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]`
+		`//div[contains(@class,"editor-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]`
 	);
 	return buttons[ 0 ];
 }
diff --git a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
index 9c29081260a008..989912c6851252 100644
--- a/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
+++ b/packages/e2e-test-utils/src/find-sidebar-panel-with-title.js
@@ -8,7 +8,7 @@
  * @return {Promise<ElementHandle|undefined>} Object that represents an in-page DOM element.
  */
 export async function findSidebarPanelWithTitle( panelTitle ) {
-	const panelToggleSelector = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
+	const panelToggleSelector = `//div[contains(@class, "editor-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
 	const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`;
 	return await page.waitForXPath( panelSelector );
 }
diff --git a/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js b/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js
index d9d27541ac6ef6..5c0525c80b2b8c 100644
--- a/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js
+++ b/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js
@@ -20,5 +20,5 @@ export async function getAllBlockInserterItemTitles() {
 			return inserterItem.innerText;
 		} );
 	} );
-	return [ ...new Set( inserterItemTitles ) ].sort();
+	return [ ...new Set( inserterItemTitles ) ];
 }
diff --git a/packages/e2e-test-utils/src/get-current-user.js b/packages/e2e-test-utils/src/get-current-user.js
index d59ec0da2dd5da..6777c842be01f1 100644
--- a/packages/e2e-test-utils/src/get-current-user.js
+++ b/packages/e2e-test-utils/src/get-current-user.js
@@ -1,7 +1,7 @@
 /**
  * Get the username of the user that's currently logged into WordPress (if any).
  *
- * @return {string?} username The user that's currently logged into WordPress (if any).
+ * @return {?string} username The user that's currently logged into WordPress (if any).
  */
 export async function getCurrentUser() {
 	const cookies = await page.cookies();
diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
index 5efee6abcc4808..e2db1884a27387 100644
--- a/packages/e2e-test-utils/src/index.js
+++ b/packages/e2e-test-utils/src/index.js
@@ -42,22 +42,23 @@ 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,
 	insertBlockDirectoryBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	toggleGlobalBlockInserter,
 } from './inserter';
 export { installPlugin } from './install-plugin';
 export { installTheme } from './install-theme';
 export { isCurrentURL } from './is-current-url';
 export { isInDefaultBlock } from './is-in-default-block';
 export { loginUser } from './login-user';
+export { logout } from './logout';
 export { createMenu, deleteAllMenus } from './menus';
 export {
 	enableFocusLossObservation,
@@ -80,6 +81,7 @@ export { selectBlockByClientId } from './select-block-by-client-id';
 export { setBrowserViewport } from './set-browser-viewport';
 export { setOption } from './set-option';
 export { setPostContent } from './set-post-content';
+export { switchBlockInspectorTab } from './switch-block-inspector-tab.js';
 export { switchEditorModeTo } from './switch-editor-mode-to';
 export { switchUserToAdmin } from './switch-user-to-admin';
 export { switchUserToTest } from './switch-user-to-test';
@@ -101,20 +103,13 @@ export {
 	rest as __experimentalRest,
 	batch as __experimentalBatch,
 } from './rest-api';
-export { openListView, closeListView } from './list-view';
+export { isListViewOpen, openListView, closeListView } from './list-view';
 export {
-	clickSiteEditorMenuItem,
-	closeSiteEditorNavigationPanel,
 	disableSiteEditorWelcomeGuide,
 	getCurrentSiteEditorContent,
-	getSiteEditorMenuItem,
-	isSiteEditorRoot,
-	navigateSiteEditorBack,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
 	visitSiteEditor,
 	toggleGlobalStyles,
+	enterEditMode,
 	openGlobalStylesPanel,
 	openPreviousGlobalStylesPanel,
 } from './site-editor';
diff --git a/packages/e2e-test-utils/src/inserter.js b/packages/e2e-test-utils/src/inserter.js
index 58e86cd0cf8f7e..90ea39b49f00d6 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,46 +15,46 @@ 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,' +
-				'.edit-post-header [aria-label="Toggle block inserter"].is-pressed,' +
-				'.edit-site-header [aria-label="Toggle block inserter"].is-pressed,' +
-				'.edit-widgets-header [aria-label="Toggle block inserter"].is-pressed,' +
+				'.edit-post-header [aria-label="Block Inserter"].is-pressed,' +
+				'.edit-site-header [aria-label="Block Inserter"].is-pressed,' +
+				'.edit-widgets-header [aria-label="Block Inserter"].is-pressed,' +
 				'.edit-widgets-header [aria-label="Add block"].is-pressed,' +
-				'.edit-site-header-edit-mode__inserter-toggle.is-pressed'
+				'.edit-site-header-edit-mode__inserter-toggle.is-pressed,' +
+				'.editor-header [aria-label="Block Inserter"].is-pressed'
 		);
 	} );
 }
@@ -60,21 +65,70 @@ export async function toggleGlobalBlockInserter() {
 	// "Add block" selector is required to make sure performance comparison
 	// doesn't fail on older branches where we still had "Add block" as label.
 	await page.click(
-		'.edit-post-header [aria-label="Add block"],' +
+		'.editor-document-tools__inserter-toggle,' +
+			'.edit-post-header [aria-label="Add block"],' +
 			'.edit-site-header [aria-label="Add block"],' +
-			'.edit-post-header [aria-label="Toggle block inserter"],' +
-			'.edit-site-header [aria-label="Toggle block inserter"],' +
+			'.edit-post-header [aria-label="Block Inserter"],' +
+			'.edit-site-header [aria-label="Block Inserter"],' +
 			'.edit-widgets-header [aria-label="Add block"],' +
-			'.edit-widgets-header [aria-label="Toggle block inserter"],' +
+			'.edit-widgets-header [aria-label="Block Inserter"],' +
 			'.edit-site-header-edit-mode__inserter-toggle'
 	);
 }
 
+/**
+ * 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(
+		// Targeting a class name is necessary here, because there are likely
+		// two implementations of the `Tabs` component visible to this test, and
+		// we want to confirm that it's waiting for the correct one.
+		'.block-editor-inserter__tabs [role="tab"][aria-selected="true"]'
+	);
+
+	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 'Synced patterns':
+			// Synced patterns 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 +142,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,140 +155,202 @@ async function waitForInserterCloseAndContentFocus() {
 }
 
 /**
- * Search for block in the global inserter
+ * Searches for an entity matching given category and term via the global
+ * inserter. If nothing is found, null will be returned.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * 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 searchForBlock( searchTerm ) {
+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 'Synced patterns': {
+			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() ] );
 }
 
 /**
- * Search for pattern in the global inserter
+ * 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, Synced patterns and Block Directory.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string} category   The category to insert from.
+ * @param {string} searchTerm The term by which to find the entity to insert.
  */
-export async function searchForPattern( searchTerm ) {
+export async function insertFromGlobalInserter( category, 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 selectGlobalInserterTab( category );
+
+	let insertButton;
+
+	if ( [ 'Blocks', 'Synced patterns' ].includes( category ) ) {
+		// If it's a block, see if 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 === 'Synced patterns' ) {
+		await canvas().waitForSelector(
+			'.block-library-block__reusable-block-container'
+		);
+	}
+
+	// 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 reusable 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 searchForReusableBlock( searchTerm ) {
-	await openGlobalBlockInserter();
+export async function searchForBlock( searchTerm ) {
+	return await searchGlobalInserter( 'Blocks', searchTerm );
+}
 
-	// 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"]'
-	);
+/**
+ * Searches for a pattern via the global inserter.
+ *
+ * @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 ) {
+	return await searchGlobalInserter( 'Patterns', 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 );
+/**
+ * Searches for a reusable block via the global inserter.
+ *
+ * @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 ) {
+	return await searchGlobalInserter( 'Reusable', 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.
+ * Searches for a Block Directory 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 Block Directory block
+ * to be inserted or null if nothing was found.
  */
-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();
+export async function searchForBlockDirectoryBlock( searchTerm ) {
+	return await searchGlobalInserter( 'Block Directory', 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 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 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();
+export async function insertBlock( searchTerm ) {
+	await insertFromGlobalInserter( 'Blocks', 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 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 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")]'
-	);
+export async function insertPattern( searchTerm ) {
+	await insertFromGlobalInserter( 'Patterns', 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-test-utils/src/install-plugin.js b/packages/e2e-test-utils/src/install-plugin.js
index a2f8e493294196..239909953d518f 100644
--- a/packages/e2e-test-utils/src/install-plugin.js
+++ b/packages/e2e-test-utils/src/install-plugin.js
@@ -9,7 +9,7 @@ import { visitAdminPage } from './visit-admin-page';
  * Installs a plugin from the WP.org repository.
  *
  * @param {string}  slug       Plugin slug.
- * @param {string?} searchTerm If the plugin is not findable by its slug use an alternative term to search.
+ * @param {?string} searchTerm If the plugin is not findable by its slug use an alternative term to search.
  */
 export async function installPlugin( slug, searchTerm ) {
 	await switchUserToAdmin();
@@ -20,6 +20,8 @@ export async function installPlugin( slug, searchTerm ) {
 			'&tab=search&type=term'
 	);
 	await page.click( `.install-now[data-slug="${ slug }"]` );
-	await page.waitForSelector( `.activate-now[data-slug="${ slug }"]` );
+	await page.waitForSelector( `.activate-now[data-slug="${ slug }"]`, {
+		timeout: 60000,
+	} );
 	await switchUserToTest();
 }
diff --git a/packages/e2e-test-utils/src/install-theme.js b/packages/e2e-test-utils/src/install-theme.js
index d030165c7cb97c..7f11e5da88ef83 100644
--- a/packages/e2e-test-utils/src/install-theme.js
+++ b/packages/e2e-test-utils/src/install-theme.js
@@ -11,7 +11,7 @@ import { isThemeInstalled } from './theme-installed';
  *
  * @param {string}  slug                Theme slug.
  * @param {Object?} settings            Optional settings object.
- * @param {string?} settings.searchTerm Search term to use if the theme is not findable by its slug.
+ * @param {?string} settings.searchTerm Search term to use if the theme is not findable by its slug.
  */
 export async function installTheme( slug, { searchTerm } = {} ) {
 	await switchUserToAdmin();
@@ -37,6 +37,8 @@ export async function installTheme( slug, { searchTerm } = {} ) {
 
 	await page.waitForSelector( `.theme-install[data-slug="${ slug }"]` );
 	await page.click( `.theme-install[data-slug="${ slug }"]` );
-	await page.waitForSelector( `.theme[data-slug="${ slug }"] .activate` );
+	await page.waitForSelector( `.theme[data-slug="${ slug }"] .activate`, {
+		timeout: 60000,
+	} );
 	await switchUserToTest();
 }
diff --git a/packages/e2e-test-utils/src/list-view.js b/packages/e2e-test-utils/src/list-view.js
index 58b857652f5899..21861d023a9f90 100644
--- a/packages/e2e-test-utils/src/list-view.js
+++ b/packages/e2e-test-utils/src/list-view.js
@@ -1,15 +1,15 @@
 async function toggleListView() {
 	// selector .edit-post-header-toolbar__list-view-toggle is still required because the performance tests also execute against older versions that still use that selector.
 	await page.click(
-		'.edit-post-header-toolbar__document-overview-toggle, .edit-post-header-toolbar__list-view-toggle, .edit-site-header-edit-mode__list-view-toggle, .edit-widgets-header-toolbar__list-view-toggle'
+		'.edit-post-header-toolbar__document-overview-toggle, .edit-post-header-toolbar__list-view-toggle, .edit-site-header-edit-mode__list-view-toggle, .edit-widgets-header-toolbar__list-view-toggle, editor-document-tools__document-overview-toggle'
 	);
 }
 
-async function isListViewOpen() {
+export async function isListViewOpen() {
 	return await page.evaluate( () => {
 		// selector .edit-post-header-toolbar__list-view-toggle is still required because the performance tests also execute against older versions that still use that selector.
 		return !! document.querySelector(
-			'.edit-post-header-toolbar__document-overview-toggle.is-pressed, .edit-post-header-toolbar__list-view-toggle.is-pressed, .edit-site-header-edit-mode__list-view-toggle.is-pressed, .edit-widgets-header-toolbar__list-view-toggle.is-pressed'
+			'.edit-post-header-toolbar__document-overview-toggle.is-pressed, .edit-post-header-toolbar__list-view-toggle.is-pressed, .edit-site-header-edit-mode__list-view-toggle.is-pressed, .edit-widgets-header-toolbar__list-view-toggle.is-pressed, editor-document-tools__document-overview-toggle.is-pressed'
 		);
 	} );
 }
diff --git a/packages/e2e-test-utils/src/login-user.js b/packages/e2e-test-utils/src/login-user.js
index aeecfd9d5cc612..468f164b1306bc 100644
--- a/packages/e2e-test-utils/src/login-user.js
+++ b/packages/e2e-test-utils/src/login-user.js
@@ -17,7 +17,9 @@ export async function loginUser(
 	password = WP_PASSWORD
 ) {
 	if ( ! isCurrentURL( 'wp-login.php' ) ) {
+		const waitForLoginPageNavigation = page.waitForNavigation();
 		await page.goto( createURL( 'wp-login.php' ) );
+		await waitForLoginPageNavigation;
 	}
 
 	await page.focus( '#user_login' );
@@ -28,7 +30,7 @@ export async function loginUser(
 	await page.type( '#user_pass', password );
 
 	await Promise.all( [
-		page.waitForNavigation(),
 		page.click( '#wp-submit' ),
+		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
 	] );
 }
diff --git a/packages/e2e-test-utils/src/logout.js b/packages/e2e-test-utils/src/logout.js
new file mode 100644
index 00000000000000..6612389893d92d
--- /dev/null
+++ b/packages/e2e-test-utils/src/logout.js
@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { createURL } from './create-url';
+import { isCurrentURL } from './is-current-url';
+
+/**
+ * Performs log out.
+ *
+ */
+export async function logout() {
+	// If it is logged and in a page different than the dashboard,
+	// move to the dashboard. Some pages may be in full-screen mode,
+	// so they won't have the log-out button available.
+	if ( ! isCurrentURL( 'wp-login.php' ) && ! isCurrentURL( 'wp-admin' ) ) {
+		await page.goto( createURL( 'wp-admin' ) );
+	}
+
+	await Promise.all( [
+		page.hover( '#wp-admin-bar-my-account' ),
+		page.waitForSelector( '#wp-admin-bar-logout', { visible: true } ),
+	] );
+
+	await page.click( '#wp-admin-bar-logout' );
+}
diff --git a/packages/e2e-test-utils/src/open-document-settings-sidebar.js b/packages/e2e-test-utils/src/open-document-settings-sidebar.js
index 2ab5f773c3715f..3e607897af6930 100644
--- a/packages/e2e-test-utils/src/open-document-settings-sidebar.js
+++ b/packages/e2e-test-utils/src/open-document-settings-sidebar.js
@@ -2,12 +2,17 @@
  * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
  */
 export async function openDocumentSettingsSidebar() {
-	const openButton = await page.$(
-		'.edit-post-header__settings button[aria-label="Settings"][aria-expanded="false"]'
+	const toggleButton = await page.waitForSelector(
+		'.edit-post-header__settings button[aria-label="Settings"][aria-disabled="false"]'
 	);
 
-	if ( openButton ) {
-		await openButton.click();
-		await page.waitForSelector( '.edit-post-sidebar' );
+	const isClosed = await page.evaluate(
+		( element ) => element.getAttribute( 'aria-expanded' ) === 'false',
+		toggleButton
+	);
+
+	if ( isClosed ) {
+		await toggleButton.click();
+		await page.waitForSelector( '.editor-sidebar' );
 	}
 }
diff --git a/packages/e2e-test-utils/src/posts.js b/packages/e2e-test-utils/src/posts.js
index 722dd77f9939ad..751a6d13fcf9d5 100644
--- a/packages/e2e-test-utils/src/posts.js
+++ b/packages/e2e-test-utils/src/posts.js
@@ -41,7 +41,7 @@ export async function trashAllPosts( postType = 'post', postStatus ) {
 	// Submit the form to send all draft/scheduled/published posts to the trash.
 	await page.click( '#doaction' );
 	await page.waitForXPath(
-		'//*[contains(@class, "updated notice")]/p[contains(text(), "moved to the Trash.")]'
+		'//*[contains(@class, "notice")]/p[contains(text(), "moved to the Trash.")]'
 	);
 	await switchUserToTest();
 }
diff --git a/packages/e2e-test-utils/src/press-key-with-modifier.js b/packages/e2e-test-utils/src/press-key-with-modifier.js
index 265c186752f8dd..71d8ed72e8de75 100644
--- a/packages/e2e-test-utils/src/press-key-with-modifier.js
+++ b/packages/e2e-test-utils/src/press-key-with-modifier.js
@@ -24,8 +24,9 @@ import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes';
 async function emulateSelectAll() {
 	await page.evaluate( () => {
 		const isMac = /Mac|iPod|iPhone|iPad/.test( window.navigator.platform );
+		const canvasDoc = document.activeElement.contentDocument ?? document;
 
-		document.activeElement.dispatchEvent(
+		canvasDoc.activeElement.dispatchEvent(
 			new KeyboardEvent( 'keydown', {
 				bubbles: true,
 				cancelable: true,
@@ -58,14 +59,14 @@ async function emulateSelectAll() {
 		} );
 
 		const wasPrevented =
-			! document.activeElement.dispatchEvent( preventableEvent ) ||
+			! canvasDoc.activeElement.dispatchEvent( preventableEvent ) ||
 			preventableEvent.defaultPrevented;
 
 		if ( ! wasPrevented ) {
-			document.execCommand( 'selectall', false, null );
+			canvasDoc.execCommand( 'selectall', false, null );
 		}
 
-		document.activeElement.dispatchEvent(
+		canvasDoc.activeElement.dispatchEvent(
 			new KeyboardEvent( 'keyup', {
 				bubbles: true,
 				cancelable: true,
@@ -103,10 +104,12 @@ export async function setClipboardData( { plainText = '', html = '' } ) {
 
 async function emulateClipboard( type ) {
 	await page.evaluate( ( _type ) => {
+		const canvasDoc = document.activeElement.contentDocument ?? document;
+
 		if ( _type !== 'paste' ) {
 			window._clipboardData = new DataTransfer();
 
-			const selection = window.getSelection();
+			const selection = canvasDoc.defaultView.getSelection();
 			const plainText = selection.toString();
 			let html = plainText;
 
@@ -123,7 +126,7 @@ async function emulateClipboard( type ) {
 			window._clipboardData.setData( 'text/html', html );
 		}
 
-		document.activeElement.dispatchEvent(
+		canvasDoc.activeElement.dispatchEvent(
 			new ClipboardEvent( _type, {
 				bubbles: true,
 				cancelable: true,
diff --git a/packages/e2e-test-utils/src/preview.js b/packages/e2e-test-utils/src/preview.js
index 1d96eda1766751..24c5dc69dd0e2e 100644
--- a/packages/e2e-test-utils/src/preview.js
+++ b/packages/e2e-test-utils/src/preview.js
@@ -10,13 +10,13 @@ export async function openPreviewPage( editorPage = page ) {
 	let openTabs = await browser.pages();
 	const expectedTabsCount = openTabs.length + 1;
 	await page.waitForSelector(
-		'.block-editor-post-preview__button-toggle:not([disabled])'
+		'.editor-preview-dropdown__toggle:not([disabled])'
 	);
-	await editorPage.click( '.block-editor-post-preview__button-toggle' );
+	await editorPage.click( '.editor-preview-dropdown__toggle' );
 	await editorPage.waitForSelector(
-		'.edit-post-header-preview__button-external'
+		'.editor-preview-dropdown__button-external'
 	);
-	await editorPage.click( '.edit-post-header-preview__button-external' );
+	await editorPage.click( '.editor-preview-dropdown__button-external' );
 
 	// Wait for the new tab to open.
 	while ( openTabs.length < expectedTabsCount ) {
diff --git a/packages/e2e-test-utils/src/set-option.js b/packages/e2e-test-utils/src/set-option.js
index 0f1abbc9fd6c5b..e008fa7394b73e 100644
--- a/packages/e2e-test-utils/src/set-option.js
+++ b/packages/e2e-test-utils/src/set-option.js
@@ -13,7 +13,6 @@ import { pressKeyWithModifier } from './press-key-with-modifier';
  * @param {string} value   The value to set the option to.
  *
  * @return {string} The previous value of the option.
- *
  */
 export async function setOption( setting, value ) {
 	await switchUserToAdmin();
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index fbaa99f1926639..d3717982ba3a54 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
+import { canvas, visitAdminPage } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -9,118 +9,31 @@ import { addQueryArgs } from '@wordpress/url';
  */
 
 const SELECTORS = {
-	navigationPanel: {
-		backToDashboard:
-			'.edit-site-navigation-panel .edit-site-navigation-panel__back-to-dashboard',
-		goBack: '.components-navigation__back-button',
-		isOpenState: '.edit-site-navigation-toggle.is-open',
-		menuItem: ( label ) =>
-			`//div[contains(@class, "edit-site-navigation-panel")]//button[.//*[text()="${ label }"]]`,
-		open: '.edit-site-navigation-toggle__button',
-		panelContainer: '.edit-site-navigation-panel',
-	},
 	visualEditor: '.edit-site-visual-editor iframe',
+	canvasLoader: '.edit-site-canvas-loader',
 };
 
-/**
- * Searches for an item in the navigation panel with the label provided and clicks it.
- *
- * @param {string} label The label to search the menu item for.
- */
-export async function clickSiteEditorMenuItem( label ) {
-	const item = await getSiteEditorMenuItem( label );
-
-	if ( item ) {
-		await item.click();
-	} else {
-		throw new Error(
-			`Navigation item with label ${ label } was not found.`
-		);
-	}
-}
-
-/**
- * Closes the site editor navigation panel if open
- */
-export async function closeSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer, {
-			hidden: true,
-		} );
-	}
-}
-
 /**
  * Skips the welcome guide popping up to first time users of the site editor
  */
 export async function disableSiteEditorWelcomeGuide() {
-	// This code prioritizes using the preferences store. However, performance
-	// tests run on older versions of the codebase where the preferences store
-	// doesn't exist. Some backwards compatibility has been built-in so that
-	// those tests continue to work there. This can be removed once WordPress
-	// 6.0 is released, as the older version used by the performance tests will
-	// then include the preferences store.
-	// See https://github.com/WordPress/gutenberg/pull/39300.
-	const isWelcomeGuideActive = await page.evaluate( () => {
-		// TODO - remove if statement after WordPress 6.0 is released.
-		if ( ! wp.data.select( 'core/preferences' ) ) {
-			return wp.data
-				.select( 'core/edit-site' )
-				.isFeatureActive( 'welcomeGuide' );
-		}
-
-		return !! wp.data
-			.select( 'core/preferences' )
-			?.get( 'core/edit-site', 'welcomeGuide' );
-	} );
-	const isWelcomeGuideStyesActive = await page.evaluate( () => {
-		// TODO - remove if statement after WordPress 6.0 is released.
-		if ( ! wp.data.select( 'core/preferences' ) ) {
-			return wp.data
-				.select( 'core/edit-site' )
-				.isFeatureActive( 'welcomeGuideStyles' );
-		}
-
-		return !! wp.data
-			.select( 'core/preferences' )
-			?.get( 'core/edit-site', 'welcomeGuideStyles' );
+	await page.evaluate( () => {
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuide', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuideStyles', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuidePage', false );
+
+		window.wp.data
+			.dispatch( 'core/preferences' )
+			.set( 'core/edit-site', 'welcomeGuideTemplate', false );
 	} );
-
-	if ( isWelcomeGuideActive ) {
-		await page.evaluate( () => {
-			// TODO - remove if statement after WordPress 6.0 is released.
-			if ( ! wp.data.dispatch( 'core/preferences' ) ) {
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuide' );
-				return;
-			}
-
-			wp.data
-				.dispatch( 'core/preferences' )
-				.toggle( 'core/edit-site', 'welcomeGuide' );
-		} );
-	}
-
-	if ( isWelcomeGuideStyesActive ) {
-		await page.evaluate( () => {
-			// TODO - remove if statement after WordPress 6.0 is released.
-			if ( ! wp.data.dispatch( 'core/preferences' ) ) {
-				wp.data
-					.dispatch( 'core/edit-site' )
-					.toggleFeature( 'welcomeGuideStyles' );
-				return;
-			}
-			wp.data
-				.dispatch( 'core/preferences' )
-				.toggle( 'core/edit-site', 'welcomeGuideStyles' );
-		} );
-	}
 }
 
 /**
@@ -131,11 +44,11 @@ export async function disableSiteEditorWelcomeGuide() {
 export function getCurrentSiteEditorContent() {
 	return page.evaluate( () => {
 		const postId = window.wp.data
-			.select( 'core/edit-site' )
-			.getEditedPostId();
+			.select( 'core/editor' )
+			.getCurrentPostId();
 		const postType = window.wp.data
-			.select( 'core/edit-site' )
-			.getEditedPostType();
+			.select( 'core/editor' )
+			.getCurrentPostType();
 		const record = window.wp.data
 			.select( 'core' )
 			.getEditedEntityRecord( 'postType', postType, postId );
@@ -154,88 +67,6 @@ export function getCurrentSiteEditorContent() {
 	} );
 }
 
-/**
- * Searches for an item in the site editor navigation menu with the provided label.
- *
- * @param {string} label The label to search the menu item for.
- *
- * @return {Promise<?ElementHandle>} The menu item handle or `null`
- */
-export async function getSiteEditorMenuItem( label ) {
-	const { navigationPanel } = SELECTORS;
-
-	const item = await page.waitForXPath( navigationPanel.menuItem( label ), {
-		visible: true,
-	} );
-
-	return item;
-}
-
-/**
- * Returns `true` if in the site editor navigation root
- *
- * Checks whether the “Back to dashboard” button is visible. If
- * not in the root, a “Back” button would be visible instead.
- *
- * @return {Promise<boolean>} Whether it currently is the navigation root or not
- */
-export async function isSiteEditorRoot() {
-	const { navigationPanel } = SELECTORS;
-
-	const isBackToDashboardButtonVisible = !! ( await page.$(
-		navigationPanel.backToDashboard
-	) );
-
-	return isBackToDashboardButtonVisible;
-}
-
-/**
- * Navigates the site editor back
- */
-export async function navigateSiteEditorBack() {
-	const { navigationPanel } = SELECTORS;
-
-	await page.click( navigationPanel.goBack );
-}
-
-/**
- * Goes back until it gets to the root
- */
-export async function navigateSiteEditorBackToRoot() {
-	while ( ! ( await isSiteEditorRoot() ) ) {
-		await navigateSiteEditorBack();
-	}
-}
-
-/**
- * Opens the site editor navigation panel if closed
- */
-export async function openSiteEditorNavigationPanel() {
-	const { navigationPanel } = SELECTORS;
-
-	const isOpen = !! ( await page.$( navigationPanel.isOpenState ) );
-
-	if ( ! isOpen ) {
-		await page.click( navigationPanel.open );
-		await page.waitForSelector( navigationPanel.panelContainer );
-	}
-}
-
-/**
- * Navigates through a sequence of links in the site editor navigation panel
- *
- * @param {string[] | string} labels Labels to navigate through
- */
-export async function siteEditorNavigateSequence( labels ) {
-	if ( ! Array.isArray( labels ) ) {
-		labels = [ labels ];
-	}
-
-	for ( const label of labels ) {
-		await clickSiteEditorMenuItem( label );
-	}
-}
-
 /**
  * Visits the Site Editor main page
  *
@@ -253,6 +84,9 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
 
 	await visitAdminPage( 'site-editor.php', query );
 	await page.waitForSelector( SELECTORS.visualEditor );
+	await page.waitForSelector( SELECTORS.canvasLoader, {
+		hidden: true,
+	} );
 
 	if ( skipWelcomeGuide ) {
 		await disableSiteEditorWelcomeGuide();
@@ -263,9 +97,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
  * Toggles the global styles sidebar (opens it if closed and closes it if open).
  */
 export async function toggleGlobalStyles() {
-	await page.click(
-		'.edit-site-header-edit-mode__actions button[aria-label="Styles"]'
-	);
+	await page.click( '.editor-header__settings button[aria-label="Styles"]' );
 }
 
 /**
@@ -283,6 +115,23 @@ export async function openGlobalStylesPanel( panelName ) {
  */
 export async function openPreviousGlobalStylesPanel() {
 	await page.click(
-		'div[aria-label="Editor settings"] button[aria-label="Navigate to the previous view"]'
+		'div[aria-label="Editor settings"] button[aria-label="Back"]'
 	);
 }
+
+/**
+ * Enters edit mode.
+ */
+export async function enterEditMode() {
+	try {
+		await page.waitForSelector(
+			'.edit-site-visual-editor__editor-canvas[role="button"]',
+			{ timeout: 3000 }
+		);
+
+		await canvas().click( 'body' );
+	} catch {
+		// This catch is necessary for the performance tests in old branches
+		// where the site editor toggle was not implemented yet.
+	}
+}
diff --git a/packages/e2e-test-utils/src/switch-block-inspector-tab.js b/packages/e2e-test-utils/src/switch-block-inspector-tab.js
new file mode 100644
index 00000000000000..b8227d9780bf52
--- /dev/null
+++ b/packages/e2e-test-utils/src/switch-block-inspector-tab.js
@@ -0,0 +1,21 @@
+/**
+ * Clicks on the block inspector tab button with the supplied label and waits
+ * for the tab switch.
+ *
+ * @param { string } label Aria label to find tab button by.
+ */
+export async function switchBlockInspectorTab( label ) {
+	const tabButton = await page.$(
+		`.block-editor-block-inspector__tabs button[aria-label="${ label }"]`
+	);
+
+	if ( ! tabButton ) {
+		throw new Error( `Missing block inspector tab: ${ label }.` );
+	}
+
+	const id = await ( await tabButton.getProperty( 'id' ) ).jsonValue();
+	await tabButton.click();
+	await page.waitForSelector(
+		`div[role="tabpanel"][aria-labelledby="${ id }"]`
+	);
+}
diff --git a/packages/e2e-test-utils/src/templates.js b/packages/e2e-test-utils/src/templates.js
index 96debfd809492a..a0c4c99f4b6e09 100644
--- a/packages/e2e-test-utils/src/templates.js
+++ b/packages/e2e-test-utils/src/templates.js
@@ -31,10 +31,8 @@ export async function deleteAllTemplates( type ) {
 			continue;
 		}
 
-		let response;
-
 		try {
-			response = await rest( {
+			await rest( {
 				path: `${ path }/${ template.id }?force=true`,
 				method: 'DELETE',
 			} );
@@ -46,14 +44,5 @@ export async function deleteAllTemplates( type ) {
 				responseError
 			);
 		}
-
-		if ( ! response.deleted ) {
-			// Disable reason - the error provides valuable feedback about issues with tests.
-			// eslint-disable-next-line no-console
-			console.warn(
-				`deleteAllTemplates failed to delete template (id: ${ template.wp_id }) with the following response`,
-				response
-			);
-		}
 	}
 }
diff --git a/packages/e2e-test-utils/src/toggle-more-menu.js b/packages/e2e-test-utils/src/toggle-more-menu.js
index fb7849c7990c91..67346e96cd21fa 100644
--- a/packages/e2e-test-utils/src/toggle-more-menu.js
+++ b/packages/e2e-test-utils/src/toggle-more-menu.js
@@ -6,6 +6,22 @@
 export async function toggleMoreMenu( waitFor ) {
 	const menuSelector = '.interface-more-menu-dropdown [aria-label="Options"]';
 
+	const menuToggle = await page.waitForSelector( menuSelector );
+
+	const isOpen = await menuToggle.evaluate( ( el ) =>
+		el.getAttribute( 'aria-expanded' )
+	);
+
+	// If opening and it's already open then exit early.
+	if ( isOpen === 'true' && waitFor === 'open' ) {
+		return;
+	}
+
+	// If closing and it's already closed then exit early.
+	if ( isOpen === 'false' && waitFor === 'close' ) {
+		return;
+	}
+
 	await page.click( menuSelector );
 
 	if ( waitFor ) {
diff --git a/packages/e2e-test-utils/src/trash-all-comments.js b/packages/e2e-test-utils/src/trash-all-comments.js
index 97169e994d3ed7..44c44b740be875 100644
--- a/packages/e2e-test-utils/src/trash-all-comments.js
+++ b/packages/e2e-test-utils/src/trash-all-comments.js
@@ -29,7 +29,7 @@ export async function trashAllComments() {
 	// Submit the form to send all mine/pendings/approved/spam comments to the trash.
 	await page.click( '#doaction' );
 	await page.waitForXPath(
-		'//*[contains(@class, "updated notice")]/p[contains(text(), "moved to the Trash.")]'
+		'//*[contains(@class, "notice")]/p[contains(text(), "moved to the Trash.")]'
 	);
 	await switchUserToTest();
 }
diff --git a/packages/e2e-tests/.npmrc b/packages/e2e-tests/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/e2e-tests/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index c6543ac2c332ae..0148f8b0a51ddb 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,119 @@
 
 ## Unreleased
 
+## 8.13.0 (2024-11-27)
+
+## 8.12.0 (2024-11-16)
+
+## 8.11.0 (2024-10-30)
+
+## 8.10.0 (2024-10-16)
+
+## 8.9.0 (2024-10-03)
+
+## 8.8.0 (2024-09-19)
+
+## 8.7.0 (2024-09-05)
+
+## 8.6.0 (2024-08-21)
+
+## 8.5.0 (2024-08-07)
+
+## 8.4.0 (2024-07-24)
+
+## 8.3.0 (2024-07-10)
+
+## 8.2.0 (2024-06-26)
+
+## 8.1.0 (2024-06-15)
+
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.29.0 (2024-05-16)
+
+## 7.28.0 (2024-05-02)
+
+## 7.27.0 (2024-04-19)
+
+## 7.26.0 (2024-04-03)
+
+## 7.25.0 (2024-03-21)
+
+## 7.24.0 (2024-03-06)
+
+## 7.23.0 (2024-02-21)
+
+## 7.22.0 (2024-02-09)
+
+## 7.21.0 (2024-01-24)
+
+## 7.20.0 (2024-01-10)
+
+## 7.19.0 (2023-12-13)
+
+## 7.18.0 (2023-11-29)
+
+## 7.17.0 (2023-11-16)
+
+## 7.16.0 (2023-11-02)
+
+## 7.15.0 (2023-10-18)
+
+## 7.14.0 (2023-10-05)
+
+## 7.13.0 (2023-09-20)
+
+## 7.12.0 (2023-08-31)
+
+## 7.11.0 (2023-08-16)
+
+## 7.10.0 (2023-08-10)
+
+## 7.9.0 (2023-07-20)
+
+## 7.8.0 (2023-07-05)
+
+## 7.7.0 (2023-06-23)
+
+## 7.6.0 (2023-06-07)
+
+## 7.5.0 (2023-05-24)
+
+## 7.4.0 (2023-05-10)
+
+## 7.3.0 (2023-04-26)
+
+## 7.2.0 (2023-04-12)
+
+## 7.1.0 (2023-03-29)
+
+## 7.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 6.5.0 (2023-03-01)
+
+## 6.4.0 (2023-02-15)
+
+## 6.3.0 (2023-02-01)
+
+## 6.2.0 (2023-01-11)
+
+## 6.1.0 (2023-01-02)
+
+## 6.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 5.6.0 (2022-11-16)
 
 ## 5.5.0 (2022-11-02)
@@ -10,7 +123,7 @@
 
 ## 5.3.0 (2022-10-05)
 
-### New features
+### New Features
 
 -   Added Autocomplete Component e2e test suite. [#42905](https://github.com/WordPress/gutenberg/pull/42905).
 
@@ -18,7 +131,7 @@
 
 ## 5.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -69,7 +182,7 @@
 
 ## 1.2.0 (2019-05-21)
 
-### New features
+### New Features
 
 -   Added Axe (the Accessibility Engine) API integration with e2e tests suite.
 
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
index 8629700263ebe7..75283a3d9ecc82 100644
--- a/packages/e2e-tests/README.md
+++ b/packages/e2e-tests/README.md
@@ -80,7 +80,7 @@ Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding
 
 This will run jest, targetting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/e2e-tests/babel.config.js b/packages/e2e-tests/babel.config.js
new file mode 100644
index 00000000000000..e562e3d9ea27fb
--- /dev/null
+++ b/packages/e2e-tests/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+	};
+};
diff --git a/packages/e2e-tests/config/is-gutenberg-plugin.js b/packages/e2e-tests/config/is-gutenberg-plugin.js
index d03b70b3ec11a3..5cfe3ada705df2 100644
--- a/packages/e2e-tests/config/is-gutenberg-plugin.js
+++ b/packages/e2e-tests/config/is-gutenberg-plugin.js
@@ -1,6 +1,3 @@
-global.process.env = {
-	...global.process.env,
-	// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-	// eslint-disable-next-line @wordpress/is-gutenberg-plugin
-	IS_GUTENBERG_PLUGIN: process.env.npm_package_config_IS_GUTENBERG_PLUGIN,
-};
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_GUTENBERG_PLUGIN =
+	process.env.npm_package_config_IS_GUTENBERG_PLUGIN === 'true';
diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js
deleted file mode 100644
index 549855bf297135..00000000000000
--- a/packages/e2e-tests/config/performance-reporter.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * External dependencies
- */
-const { readFileSync, existsSync } = require( 'fs' );
-const path = require( 'path' );
-const chalk = require( 'chalk' );
-
-function average( array ) {
-	return array.reduce( ( a, b ) => a + b ) / array.length;
-}
-
-function round( number, decimalPlaces = 2 ) {
-	const factor = Math.pow( 10, decimalPlaces );
-	return Math.round( number * factor ) / factor;
-}
-
-const title = chalk.bold;
-const success = chalk.bold.green;
-
-class PerformanceReporter {
-	onTestResult( test ) {
-		const dirname = path.dirname( test.path );
-		const basename = path.basename( test.path, '.js' );
-		const filepath = path.join( dirname, basename + '.results.json' );
-
-		if ( ! existsSync( filepath ) ) {
-			return;
-		}
-
-		const results = readFileSync( filepath, 'utf8' );
-		const {
-			serverResponse,
-			firstPaint,
-			domContentLoaded,
-			loaded,
-			firstContentfulPaint,
-			firstBlock,
-			type,
-			focus,
-			listViewOpen,
-			inserterOpen,
-			inserterHover,
-			inserterSearch,
-		} = JSON.parse( results );
-
-		if ( serverResponse && serverResponse.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Loading Time:' ) }
-Average time to server response (subtracted from client side metrics): ${ success(
-				round( average( serverResponse ) ) + 'ms'
-			) }
-Average time to first paint: ${ success(
-				round( average( firstPaint ) ) + 'ms'
-			) }
-Average time to DOM content load: ${ success(
-				round( average( domContentLoaded ) ) + 'ms'
-			) }
-Average time to load: ${ success( round( average( loaded ) ) + 'ms' ) }
-Average time to first contentful paint: ${ success(
-				round( average( firstContentfulPaint ) ) + 'ms'
-			) }
-Average time to first block: ${ success(
-				round( average( firstBlock ) ) + 'ms'
-			) }` );
-		}
-
-		if ( type && type.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Typing Performance:' ) }
-Average time to type character: ${ success( round( average( type ) ) + 'ms' ) }
-Slowest time to type character: ${ success(
-				round( Math.max( ...type ) ) + 'ms'
-			) }
-Fastest time to type character: ${ success(
-				round( Math.min( ...type ) ) + 'ms'
-			) }` );
-		}
-
-		if ( focus && focus.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Block Selection Performance:' ) }
-Average time to select a block: ${ success( round( average( focus ) ) + 'ms' ) }
-Slowest time to select a block: ${ success(
-				round( Math.max( ...focus ) ) + 'ms'
-			) }
-Fastest time to select a block: ${ success(
-				round( Math.min( ...focus ) ) + 'ms'
-			) }` );
-		}
-
-		if ( listViewOpen && listViewOpen.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Opening List View Performance:' ) }
-Average time to open list view: ${ success(
-				round( average( listViewOpen ) ) + 'ms'
-			) }
-Slowest time to open list view: ${ success(
-				round( Math.max( ...listViewOpen ) ) + 'ms'
-			) }
-Fastest time to open list view: ${ success(
-				round( Math.min( ...listViewOpen ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterOpen && inserterOpen.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Opening Global Inserter Performance:' ) }
-Average time to open global inserter: ${ success(
-				round( average( inserterOpen ) ) + 'ms'
-			) }
-Slowest time to open global inserter: ${ success(
-				round( Math.max( ...inserterOpen ) ) + 'ms'
-			) }
-Fastest time to open global inserter: ${ success(
-				round( Math.min( ...inserterOpen ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterSearch && inserterSearch.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Inserter Search Performance:' ) }
-Average time to type the inserter search input: ${ success(
-				round( average( inserterSearch ) ) + 'ms'
-			) }
-Slowest time to type the inserter search input: ${ success(
-				round( Math.max( ...inserterSearch ) ) + 'ms'
-			) }
-Fastest time to type the inserter search input: ${ success(
-				round( Math.min( ...inserterSearch ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterHover && inserterHover.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Inserter Block Item Hover Performance:' ) }
-Average time to move mouse between two block item in the inserter: ${ success(
-				round( average( inserterHover ) ) + 'ms'
-			) }
-Slowest time to move mouse between two block item in the inserter: ${ success(
-				round( Math.max( ...inserterHover ) ) + 'ms'
-			) }
-Fastest time to move mouse between two block item in the inserter: ${ success(
-				round( Math.min( ...inserterHover ) ) + 'ms'
-			) }` );
-		}
-
-		// eslint-disable-next-line no-console
-		console.log( '' );
-	}
-}
-
-module.exports = PerformanceReporter;
diff --git a/packages/e2e-tests/config/setup-performance-test.js b/packages/e2e-tests/config/setup-performance-test.js
deleted file mode 100644
index ae2b347b99d183..00000000000000
--- a/packages/e2e-tests/config/setup-performance-test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clearLocalStorage,
-	enablePageDialogAccept,
-	setBrowserViewport,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Timeout, in seconds, that the test should be allowed to run.
- *
- * @type {string|undefined}
- */
-const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
-
-// The Jest timeout is increased because these tests are a bit slow.
-jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
-
-async function setupBrowser() {
-	await clearLocalStorage();
-	await setBrowserViewport( 'large' );
-}
-
-// Before every test suite run, delete all content created by the test. This ensures
-// other posts/comments/etc. aren't dirtying tests and tests don't depend on
-// each other's side-effects.
-beforeAll( async () => {
-	enablePageDialogAccept();
-
-	await trashAllPosts();
-	await trashAllPosts( 'wp_block' );
-	await setupBrowser();
-	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
-} );
-
-afterEach( async () => {
-	await setupBrowser();
-} );
diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js
index ed1d92f67bf197..631aa1f7f5b0e2 100644
--- a/packages/e2e-tests/config/setup-test-framework.js
+++ b/packages/e2e-tests/config/setup-test-framework.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { toMatchInlineSnapshot, toMatchSnapshot } from 'jest-snapshot';
 
 /**
@@ -159,6 +158,15 @@ function observeConsoleLogging() {
 			return;
 		}
 
+		// Ignore framer-motion warnings about reduced motion.
+		if (
+			text.includes(
+				'You have Reduced Motion enabled on your device. Animations may not appear as expected.'
+			)
+		) {
+			return;
+		}
+
 		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
 
 		// As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of
@@ -172,11 +180,7 @@ function observeConsoleLogging() {
 		// correctly. Instead, the logic here synchronously inspects the
 		// internal object shape of the JSHandle to find the error text. If it
 		// cannot be found, the default text value is used instead.
-		text = get(
-			message.args(),
-			[ 0, '_remoteObject', 'description' ],
-			text
-		);
+		text = message.args()[ 0 ]?._remoteObject?.description ?? text;
 
 		// Disable reason: We intentionally bubble up the console message
 		// which, unless the test explicitly anticipates the logging via
diff --git a/packages/e2e-tests/jest.config.js b/packages/e2e-tests/jest.config.js
index 5f9d5b75b24ef7..c20e9ba7bcda11 100644
--- a/packages/e2e-tests/jest.config.js
+++ b/packages/e2e-tests/jest.config.js
@@ -12,12 +12,12 @@ module.exports = {
 		'@wordpress/jest-console',
 		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
-		'puppeteer-testing-library/extend-expect',
-	],
-	testPathIgnorePatterns: [
-		'/node_modules/',
-		'e2e-tests/specs/performance/',
 	],
+	testPathIgnorePatterns: [ '/node_modules/' ],
+	snapshotFormat: {
+		escapeString: false,
+		printBasicPrototype: false,
+	},
 	reporters: [
 		...baseConfig.reporters,
 		// Report flaky tests results into artifacts for used in `report-flaky-tests` action.
diff --git a/packages/e2e-tests/jest.performance.config.js b/packages/e2e-tests/jest.performance.config.js
deleted file mode 100644
index 743836ee2e82fe..00000000000000
--- a/packages/e2e-tests/jest.performance.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
-	...require( '@wordpress/scripts/config/jest-e2e.config' ),
-	testMatch: [ '**/performance/*.test.js' ],
-	setupFiles: [ '<rootDir>/config/is-gutenberg-plugin.js' ],
-	setupFilesAfterEnv: [
-		'<rootDir>/config/setup-performance-test.js',
-		'@wordpress/jest-console',
-		'@wordpress/jest-puppeteer-axe',
-		'expect-puppeteer',
-	],
-	transformIgnorePatterns: [
-		'node_modules',
-		'scripts/config/puppeteer.config.js',
-	],
-	reporters: [ 'default', '<rootDir>/config/performance-reporter.js' ],
-};
diff --git a/packages/e2e-tests/mu-plugins/enable-templates-ui.php b/packages/e2e-tests/mu-plugins/enable-templates-ui.php
index 0fe1056d4624b0..70b70af7048f85 100644
--- a/packages/e2e-tests/mu-plugins/enable-templates-ui.php
+++ b/packages/e2e-tests/mu-plugins/enable-templates-ui.php
@@ -12,7 +12,7 @@
  */
 add_filter(
 	'register_post_type_args',
-	static function( $args, $name ) {
+	static function ( $args, $name ) {
 		if ( in_array( $name, array( 'wp_template', 'wp_template_part' ), true ) ) {
 			$args['show_ui'] = wp_is_block_theme();
 		}
diff --git a/packages/e2e-tests/mu-plugins/nocache-headers.php b/packages/e2e-tests/mu-plugins/nocache-headers.php
new file mode 100644
index 00000000000000..7b66b4eea336ca
--- /dev/null
+++ b/packages/e2e-tests/mu-plugins/nocache-headers.php
@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, No-cache Headers
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-nocache-headers
+ */
+
+// Remove 'no-store' from the Cache-Control header set by WordPress when running
+// E2E tests. This is a workaround for an issue where E2E tests time out waiting
+// for 'networkidle'.
+add_filter(
+	'nocache_headers',
+	static function ( $headers ) {
+		$cache_control_parts      = explode( ', ', $headers['Cache-Control'] );
+		$cache_control_parts      = array_diff( $cache_control_parts, array( 'no-store' ) );
+		$headers['Cache-Control'] = implode( ', ', $cache_control_parts );
+		return $headers;
+	}
+);
diff --git a/packages/e2e-tests/mu-plugins/server-timing.php b/packages/e2e-tests/mu-plugins/server-timing.php
new file mode 100644
index 00000000000000..84771f980ff7fc
--- /dev/null
+++ b/packages/e2e-tests/mu-plugins/server-timing.php
@@ -0,0 +1,91 @@
+<?php
+
+add_filter(
+	'template_include',
+	static function ( $template ) {
+
+		global $timestart, $wpdb;
+
+		$server_timing_values = array();
+		$template_start       = microtime( true );
+
+		$server_timing_values['wpBeforeTemplate'] = $template_start - $timestart;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $server_timing_values, $template_start, $wpdb ) {
+				$output = ob_get_clean();
+
+				$server_timing_values['wpTemplate'] = microtime( true ) - $template_start;
+
+				$server_timing_values['wpTotal'] = $server_timing_values['wpBeforeTemplate'] + $server_timing_values['wpTemplate'];
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+
+		return $template;
+	},
+	PHP_INT_MAX
+);
+
+add_action(
+	'admin_init',
+	static function () {
+		global $timestart, $wpdb;
+
+		ob_start();
+
+		add_action(
+			'shutdown',
+			static function () use ( $wpdb, $timestart ) {
+				$output = ob_get_clean();
+
+				$server_timing_values = array();
+
+				$server_timing_values['wpTotal'] = microtime( true ) - $timestart;
+
+				/*
+				 * While values passed via Server-Timing are intended to be durations,
+				 * any numeric value can actually be passed.
+				 * This is a nice little trick as it allows to easily get this information in JS.
+				 */
+				$server_timing_values['wpMemoryUsage'] = memory_get_usage();
+				$server_timing_values['wpDbQueries']   = $wpdb->num_queries;
+
+				$header_values = array();
+				foreach ( $server_timing_values as $slug => $value ) {
+					if ( is_float( $value ) ) {
+						$value = round( $value * 1000.0, 2 );
+					}
+					$header_values[] = sprintf( '%1$s;dur=%2$s', $slug, $value );
+				}
+				header( 'Server-Timing: ' . implode( ', ', $header_values ) );
+
+				echo $output;
+			},
+			PHP_INT_MIN
+		);
+	},
+	PHP_INT_MAX
+);
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index f7d93448d2bbba..62008860a8b290 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "5.6.0",
+	"version": "8.13.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,28 +20,29 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
-		"@wordpress/jest-console": "file:../jest-console",
-		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
-		"@wordpress/scripts": "file:../scripts",
-		"@wordpress/url": "file:../url",
+		"@wordpress/e2e-test-utils": "*",
+		"@wordpress/interactivity": "*",
+		"@wordpress/interactivity-router": "*",
+		"@wordpress/jest-console": "*",
+		"@wordpress/jest-puppeteer-axe": "*",
+		"@wordpress/scripts": "*",
+		"@wordpress/url": "*",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
-		"jest-message-util": "^27.4.2",
-		"jest-snapshot": "^27.4.5",
-		"lodash": "^4.17.21",
-		"puppeteer-testing-library": "^0.5.0",
-		"uuid": "^8.3.0"
+		"jest-message-util": "^29.6.2",
+		"jest-snapshot": "^29.6.2",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"jest": ">=27",
+		"jest": ">=29",
 		"puppeteer-core": ">=11",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/e2e-tests/plugins/block-api.php b/packages/e2e-tests/plugins/block-api.php
index e0609f7adc0ffc..265ada8ab8ed94 100644
--- a/packages/e2e-tests/plugins/block-api.php
+++ b/packages/e2e-tests/plugins/block-api.php
@@ -16,6 +16,8 @@ function enqueue_block_api_plugin_script() {
 		plugins_url( 'block-api/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
 			'wp-hooks',
 		),
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-api/index.js' ),
diff --git a/packages/e2e-tests/plugins/block-api/index.js b/packages/e2e-tests/plugins/block-api/index.js
index 99a6ab3cdcc838..cb171ab1b442bd 100644
--- a/packages/e2e-tests/plugins/block-api/index.js
+++ b/packages/e2e-tests/plugins/block-api/index.js
@@ -1,13 +1,16 @@
 ( function () {
 	const { registerBlockType } = wp.blocks;
+	const { useBlockProps } = wp.blockEditor;
+	const { createElement: el } = wp.element;
 	const { addFilter } = wp.hooks;
 
 	registerBlockType( 'e2e-tests/hello-world', {
+		apiVersion: 3,
 		title: 'Hello World',
 		description: 'Hello World test block.',
 		category: 'widgets',
-		edit() {
-			return 'Hello Editor!';
+		edit: function Edit() {
+			return el( 'p', useBlockProps(), 'Hello Editor!' );
 		},
 		save() {
 			return 'Hello Frontend!';
diff --git a/packages/e2e-tests/plugins/block-bindings.php b/packages/e2e-tests/plugins/block-bindings.php
new file mode 100644
index 00000000000000..b86673c2c523d0
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-bindings.php
@@ -0,0 +1,252 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Bindings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-bindings
+ */
+
+/**
+ * Code necessary for testing block bindings:
+ * - Enqueues a custom script to register sources in the client.
+ * - Registers sources in the server.
+ * - Registers a custom post type and custom fields.
+ */
+function gutenberg_test_block_bindings_registration() {
+	// Define fields list.
+	$upload_dir  = wp_upload_dir();
+	$testing_url = $upload_dir['url'] . '/1024x768_e2e_test_image_size.jpeg';
+	$fields_list = array(
+		'text_field'  => array(
+			'label' => 'Text Field Label',
+			'value' => 'Text Field Value',
+			'type'  => 'string',
+		),
+		'url_field'   => array(
+			'label' => 'URL Field Label',
+			'value' => $testing_url,
+			'type'  => 'string',
+		),
+		'empty_field' => array(
+			'label' => 'Empty Field Label',
+			'value' => '',
+			'type'  => 'string',
+		),
+	);
+
+	// Enqueue a custom script for the plugin.
+	wp_enqueue_script(
+		'gutenberg-test-block-bindings',
+		plugins_url( 'block-bindings/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-private-apis',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings/index.js' ),
+		true
+	);
+
+	// Pass data to the script.
+	wp_localize_script(
+		'gutenberg-test-block-bindings',
+		'testingBindings',
+		array(
+			'fieldsList' => $fields_list,
+		)
+	);
+
+	// Register custom block bindings sources.
+	register_block_bindings_source(
+		'testing/complete-source',
+		array(
+			'label'              => 'Complete Source',
+			'get_value_callback' => function ( $source_args ) use ( $fields_list ) {
+				if ( ! isset( $source_args['key'] ) || ! isset( $fields_list[ $source_args['key'] ] ) ) {
+					return null;
+				}
+				return $fields_list[ $source_args['key'] ]['value']; },
+		)
+	);
+	register_block_bindings_source(
+		'testing/server-only-source',
+		array(
+			'label'              => 'Server Source',
+			'get_value_callback' => function () {},
+		)
+	);
+
+	// Register "movie" custom post type.
+	register_post_type(
+		'movie',
+		array(
+			'label'        => 'Movie',
+			'public'       => true,
+			'supports'     => array( 'title', 'editor', 'comments', 'revisions', 'trackbacks', 'author', 'excerpt', 'page-attributes', 'thumbnail', 'custom-fields', 'post-formats' ),
+			'has_archive'  => true,
+			'show_in_rest' => true,
+		)
+	);
+
+	// Register global custom fields.
+	register_meta(
+		'post',
+		'text_custom_field',
+		array(
+			'default'      => 'Value of the text custom field',
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'url_custom_field',
+		array(
+			'default'      => '#url-custom-field',
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'string',
+		)
+	);
+	// Register different types of custom fields for testing.
+	register_meta(
+		'post',
+		'string_custom_field',
+		array(
+			'label'        => 'String custom field',
+			'default'      => '',
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'object_custom_field',
+		array(
+			'label'        => 'Object custom field',
+			'show_in_rest' => array(
+				'schema' => array(
+					'type'       => 'object',
+					'properties' => array(
+						'foo' => array(
+							'type' => 'string',
+						),
+					),
+				),
+			),
+			'single'       => true,
+			'type'         => 'object',
+		)
+	);
+	register_meta(
+		'post',
+		'array_custom_field',
+		array(
+			'label'        => 'Array custom field',
+			'show_in_rest' => array(
+				'schema' => array(
+					'type'  => 'array',
+					'items' => array(
+						'type' => 'string',
+					),
+				),
+			),
+			'single'       => true,
+			'type'         => 'array',
+			'default'      => array(),
+		)
+	);
+	register_meta(
+		'post',
+		'number',
+		array(
+			'label'        => 'Number custom field',
+			'type'         => 'number',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => 5.5,
+		)
+	);
+	register_meta(
+		'post',
+		'integer',
+		array(
+			'label'        => 'Integer custom field',
+			'type'         => 'integer',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => 5,
+		)
+	);
+	register_meta(
+		'post',
+		'boolean',
+		array(
+			'label'        => 'Boolean custom field',
+			'type'         => 'boolean',
+			'show_in_rest' => true,
+			'single'       => true,
+			'default'      => true,
+		)
+	);
+
+	// Register CPT custom fields.
+	register_meta(
+		'post',
+		'movie_field',
+		array(
+			'label'          => 'Movie field label',
+			'default'        => 'Movie field default value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'field_with_only_label',
+		array(
+			'label'          => 'Field with only label',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'field_without_label_or_default',
+		array(
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'_protected_field',
+		array(
+			'default'        => 'Protected field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'show_in_rest_false_field',
+		array(
+			'default'        => 'show_in_rest false field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => false,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+}
+add_action( 'init', 'gutenberg_test_block_bindings_registration' );
diff --git a/packages/e2e-tests/plugins/block-bindings/index.js b/packages/e2e-tests/plugins/block-bindings/index.js
new file mode 100644
index 00000000000000..5c364257caed19
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-bindings/index.js
@@ -0,0 +1,48 @@
+const { registerBlockBindingsSource } = wp.blocks;
+const { fieldsList } = window.testingBindings || {};
+
+const getValues = ( { bindings } ) => {
+	const newValues = {};
+	for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
+		newValues[ attributeName ] = fieldsList[ source.args.key ]?.value;
+	}
+	return newValues;
+};
+const setValues = ( { dispatch, bindings } ) => {
+	Object.values( bindings ).forEach( ( { args, newValue } ) => {
+		// Example of what could be done.
+		dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, {
+			meta: { [ args?.key ]: newValue },
+		} );
+	} );
+};
+
+registerBlockBindingsSource( {
+	name: 'testing/complete-source',
+	getValues,
+	setValues,
+	canUserEditValue: () => true,
+	getFieldsList: () => fieldsList,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/can-user-edit-false',
+	label: 'Can User Edit: False',
+	getValues,
+	setValues,
+	canUserEditValue: () => false,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/can-user-edit-undefined',
+	label: 'Can User Edit: Undefined',
+	getValues,
+	setValues,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/set-values-undefined',
+	label: 'Set Values: Undefined',
+	getValues,
+	canUserEditValue: () => true,
+} );
diff --git a/packages/e2e-tests/plugins/block-context.php b/packages/e2e-tests/plugins/block-context.php
index d1cc347640718b..a251e9763e5253 100644
--- a/packages/e2e-tests/plugins/block-context.php
+++ b/packages/e2e-tests/plugins/block-context.php
@@ -8,10 +8,10 @@
  */
 
 /**
- * Enqueues a custom script for the plugin.
+ * Registers plugin test context blocks.
  */
-function gutenberg_test_enqueue_block_context_script() {
-	wp_enqueue_script(
+function gutenberg_test_register_context_blocks() {
+	wp_register_script(
 		'gutenberg-test-block-context',
 		plugins_url( 'block-context/index.js', __FILE__ ),
 		array(
@@ -22,45 +22,41 @@ function gutenberg_test_enqueue_block_context_script() {
 		filemtime( plugin_dir_path( __FILE__ ) . 'block-context/index.js' ),
 		true
 	);
-}
-add_action( 'init', 'gutenberg_test_enqueue_block_context_script' );
 
-/**
- * Registers plugin test context blocks.
- */
-function gutenberg_test_register_context_blocks() {
 	register_block_type(
 		'gutenberg/test-context-provider',
 		array(
-			'attributes'       => array(
+			'attributes'            => array(
 				'recordId' => array(
 					'type'    => 'number',
 					'default' => 0,
 				),
 			),
-			'provides_context' => array(
+			'provides_context'      => array(
 				'gutenberg/recordId' => 'recordId',
 			),
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 
 	register_block_type(
 		'gutenberg/test-context-consumer',
 		array(
-			'uses_context'    => array(
+			'uses_context'          => array(
 				'gutenberg/recordId',
 				'postId',
 				'postType',
 			),
-			'render_callback' => function( $attributes, $content, $block ) {
+			'render_callback'       => static function ( $attributes, $content, $block ) {
 				$ordered_context = array(
 					$block->context['gutenberg/recordId'],
 					$block->context['postId'],
 					$block->context['postType'],
 				);
 
-				return implode( ',', $ordered_context );
+				return '<p>' . implode( ',', $ordered_context ) . '</p>';
 			},
+			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
 	);
 }
diff --git a/packages/e2e-tests/plugins/block-icons/index.js b/packages/e2e-tests/plugins/block-icons/index.js
index feb54e794598b7..5525c15179ad37 100644
--- a/packages/e2e-tests/plugins/block-icons/index.js
+++ b/packages/e2e-tests/plugins/block-icons/index.js
@@ -55,7 +55,7 @@
 	} );
 
 	registerBlockType( 'test/test-dash-icon', {
-		title: 'TestDashIcon',
+		title: 'TestSimpleDashIcon',
 		icon: 'cart',
 		category: 'text',
 
diff --git a/packages/e2e-tests/plugins/block-template-registration.php b/packages/e2e-tests/plugins/block-template-registration.php
new file mode 100644
index 00000000000000..f93deb19688c4b
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-template-registration.php
@@ -0,0 +1,72 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Block Template Registration
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-template-registration
+ */
+
+add_action(
+	'init',
+	function () {
+		// Custom template used by most tests.
+		register_block_template(
+			'gutenberg//plugin-template',
+			array(
+				'title'       => 'Plugin Template',
+				'description' => 'A template registered by a plugin.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+		add_action(
+			'category_template_hierarchy',
+			function () {
+				return array( 'plugin-template' );
+			}
+		);
+
+		// Custom template overridden by the theme.
+		register_block_template(
+			'gutenberg//custom-template',
+			array(
+				'title'       => 'Custom Template (overridden by the theme)',
+				'description' => 'A custom template registered by a plugin and overridden by a theme.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template and overridden by a theme.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+				'post_types'  => array( 'post' ),
+			)
+		);
+
+		// Custom template used to test unregistration.
+		register_block_template(
+			'gutenberg//plugin-unregistered-template',
+			array(
+				'title'       => 'Plugin Unregistered Template',
+				'description' => 'A plugin-registered template that is unregistered.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered template that is also unregistered.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+		unregister_block_template( 'gutenberg//plugin-unregistered-template' );
+
+		// Custom template used to test overriding default WP templates.
+		register_block_template(
+			'gutenberg//page',
+			array(
+				'title'       => 'Plugin Page Template',
+				'description' => 'A plugin-registered page template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered page template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+
+		// Custom template used to test overriding default WP templates which can be created by the user.
+		register_block_template(
+			'gutenberg//author-admin',
+			array(
+				'title'       => 'Plugin Author Template',
+				'description' => 'A plugin-registered author template.',
+				'content'     => '<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:group {"tagName":"main","layout":{"inherit":true}} --><main class="wp-block-group"><!-- wp:paragraph --><p>This is a plugin-registered author template.</p><!-- /wp:paragraph --></main><!-- /wp:group -->',
+			)
+		);
+	}
+);
diff --git a/packages/e2e-tests/plugins/class-test-widget.php b/packages/e2e-tests/plugins/class-test-widget.php
index 12b1d2f34a6fa4..450c97b1163967 100644
--- a/packages/e2e-tests/plugins/class-test-widget.php
+++ b/packages/e2e-tests/plugins/class-test-widget.php
@@ -56,12 +56,13 @@ public function form( $instance ) {
 	/**
 	 * Handles updating settings for the current widget instance.
 	 *
+	 * @since 4.8.1
+	 *
 	 * @param array $new_instance New settings for this instance as input by the user via
 	 *                            WP_Widget::form().
 	 * @param array $old_instance Old settings for this instance.
 	 *
 	 * @return array Settings to save or bool false to cancel saving.
-	 * @since 4.8.1
 	 */
 	// @codingStandardsIgnoreStart – to prevent phpcs from complaining about unused function argument.
 	public function update( $new_instance, $old_instance ) {
diff --git a/packages/e2e-tests/plugins/delete-installed-fonts.php b/packages/e2e-tests/plugins/delete-installed-fonts.php
new file mode 100644
index 00000000000000..871d19f82e635e
--- /dev/null
+++ b/packages/e2e-tests/plugins/delete-installed-fonts.php
@@ -0,0 +1,68 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Delete Installed Fonts
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-delete-installed-fonts
+ */
+
+/**
+ * Saves a randomly generated temporary font directory to use for e2e tests.
+ */
+function gutenberg_e2e_set_temp_font_dir() {
+	update_option( 'gutenberg_e2e_font_dir', '/e2e_fonts_' . wp_generate_uuid4() );
+}
+register_activation_hook( __FILE__, 'gutenberg_e2e_set_temp_font_dir' );
+
+/**
+ * Uses the randomly generated font directory for the duration of the font tests.
+ */
+function gutenberg_filter_e2e_font_dir( $font_dir ) {
+	$subdir = get_option( 'gutenberg_e2e_font_dir' );
+
+	$font_dir['path']    .= $subdir;
+	$font_dir['url']     .= $subdir;
+	$font_dir['basedir'] .= $subdir;
+	$font_dir['baseurl'] .= $subdir;
+
+	return $font_dir;
+}
+add_filter( 'font_dir', 'gutenberg_filter_e2e_font_dir' );
+
+/**
+ * Deletes all user installed fonts, associated font files, the fonts directory, and user global styles typography
+ * setings for the current theme so that we can test uploading/installing fonts in a clean environment.
+ */
+function gutenberg_delete_installed_fonts() {
+	$font_family_ids = new WP_Query(
+		array(
+			'post_type'      => 'wp_font_family',
+			'posts_per_page' => -1,
+			'fields'         => 'ids',
+		)
+	);
+
+	// Delete all font families, their child font faces, and associated font files.
+	foreach ( $font_family_ids->posts as $font_family_id ) {
+		wp_delete_post( $font_family_id, true );
+	}
+
+	// Delete the font directory, which should now be empty.
+	$font_path = wp_get_font_dir()['path'];
+
+	if ( is_dir( $font_path ) ) {
+		rmdir( $font_path );
+	}
+
+	// Delete any installed fonts from global styles.
+	$global_styles_post_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+	$request               = new WP_REST_Request( 'POST', '/wp/v2/global-styles/' . $global_styles_post_id );
+	$request->set_body_params( array( 'settings' => array( 'typography' => array( 'fontFamilies' => array() ) ) ) );
+
+	rest_do_request( $request );
+}
+
+// Clean up fonts on plugin activation and deactivation.
+register_activation_hook( __FILE__, 'gutenberg_delete_installed_fonts' );
+register_deactivation_hook( __FILE__, 'gutenberg_delete_installed_fonts' );
diff --git a/packages/e2e-tests/plugins/deprecated-node-matcher.php b/packages/e2e-tests/plugins/deprecated-node-matcher.php
index 7e0a6e3d2c5578..0356718b02e974 100644
--- a/packages/e2e-tests/plugins/deprecated-node-matcher.php
+++ b/packages/e2e-tests/plugins/deprecated-node-matcher.php
@@ -15,7 +15,6 @@ function enqueue_deprecated_node_matcher_plugin_script() {
 		'gutenberg-test-deprecated-node-matcher',
 		plugins_url( 'deprecated-node-matcher/index.js', __FILE__ ),
 		array(
-			'lodash',
 			'wp-blocks',
 			'wp-element',
 			'wp-block-editor',
diff --git a/packages/e2e-tests/plugins/deprecated-node-matcher/index.js b/packages/e2e-tests/plugins/deprecated-node-matcher/index.js
index a7edacf6739b86..3cb1afd56f18ef 100644
--- a/packages/e2e-tests/plugins/deprecated-node-matcher/index.js
+++ b/packages/e2e-tests/plugins/deprecated-node-matcher/index.js
@@ -1,9 +1,10 @@
 ( function () {
 	const registerBlockType = wp.blocks.registerBlockType;
-	const RichText = wp.blockEditor.RichText;
+	const { useBlockProps, RichText } = wp.blockEditor;
 	const el = wp.element.createElement;
 
 	registerBlockType( 'core/deprecated-children-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Children Matcher',
 		attributes: {
 			value: {
@@ -13,40 +14,35 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditChildrenMatcher( { attributes, setAttributes } ) {
 			return el( RichText, {
 				tagName: 'p',
 				value: attributes.value,
 				onChange( nextValue ) {
 					setAttributes( { value: nextValue } );
 				},
+				...useBlockProps(),
 			} );
 		},
 		save( { attributes } ) {
 			return el( RichText.Content, {
 				tagName: 'p',
 				value: attributes.value,
+				...useBlockProps.save(),
 			} );
 		},
 	} );
 
 	function toRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return subValue.children;
-		} );
+		return value?.map( ( { children } ) => children ) ?? [];
 	}
 
 	function fromRichTextValue( value ) {
-		// eslint-disable-next-line no-undef
-		return _.map( value, function ( subValue ) {
-			return {
-				children: subValue,
-			};
-		} );
+		return value.map( ( subValue ) => ( { children: subValue } ) );
 	}
 
 	registerBlockType( 'core/deprecated-node-matcher', {
+		apiVersion: 3,
 		title: 'Deprecated Node Matcher',
 		attributes: {
 			value: {
@@ -61,10 +57,10 @@
 			},
 		},
 		category: 'text',
-		edit( { attributes, setAttributes } ) {
+		edit: function EditNodeMatcher( { attributes, setAttributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps(),
 				el( RichText, {
 					multiline: 'p',
 					value: toRichTextValue( attributes.value ),
@@ -79,7 +75,7 @@
 		save( { attributes } ) {
 			return el(
 				'blockquote',
-				{},
+				useBlockProps.save(),
 				el( RichText.Content, {
 					value: toRichTextValue( attributes.value ),
 				} )
diff --git a/packages/e2e-tests/plugins/hooks-api/index.js b/packages/e2e-tests/plugins/hooks-api/index.js
index 1ace5145e26880..9c8fff9bfa4562 100644
--- a/packages/e2e-tests/plugins/hooks-api/index.js
+++ b/packages/e2e-tests/plugins/hooks-api/index.js
@@ -16,8 +16,7 @@
 				Button,
 				{
 					className: 'e2e-reset-block-button',
-					variant: "secondary",
-					isLarge: true,
+					variant: 'secondary',
 					onClick() {
 						const emptyBlock = createBlock( props.name );
 						props.onReplace( emptyBlock );
diff --git a/packages/e2e-tests/plugins/iframed-block.php b/packages/e2e-tests/plugins/iframed-block.php
index 29e71fa75a2ec8..329f3e26a479cb 100644
--- a/packages/e2e-tests/plugins/iframed-block.php
+++ b/packages/e2e-tests/plugins/iframed-block.php
@@ -9,14 +9,14 @@
 
 add_action(
 	'setup_theme',
-	function() {
+	static function () {
 		add_theme_support( 'block-templates' );
 	}
 );
 
 add_action(
 	'init',
-	function() {
+	static function () {
 		wp_register_script(
 			'iframed-block-jquery-test',
 			plugin_dir_url( __FILE__ ) . 'iframed-block/jquery.test.js',
diff --git a/packages/e2e-tests/plugins/iframed-block/block.json b/packages/e2e-tests/plugins/iframed-block/block.json
index f1110534e27dc1..0665636a253af2 100644
--- a/packages/e2e-tests/plugins/iframed-block/block.json
+++ b/packages/e2e-tests/plugins/iframed-block/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "test/iframed-block",
 	"title": "Iframed Block",
 	"category": "text",
diff --git a/packages/e2e-tests/plugins/iframed-block/jquery.test.js b/packages/e2e-tests/plugins/iframed-block/jquery.test.js
index 901a6f1281927b..03a790d3f3526c 100644
--- a/packages/e2e-tests/plugins/iframed-block/jquery.test.js
+++ b/packages/e2e-tests/plugins/iframed-block/jquery.test.js
@@ -1,6 +1,6 @@
 ( ( $ ) => {
-	$.fn.test = function() {
-		return this.each( function() {
+	$.fn.test = function () {
+		return this.each( function () {
 			$( this ).text( 'Iframed Block (set with jQuery)' );
 		} );
 	};
diff --git a/packages/e2e-tests/plugins/iframed-block/script.js b/packages/e2e-tests/plugins/iframed-block/script.js
index f8872070f682b7..6da6a8487bdb2c 100644
--- a/packages/e2e-tests/plugins/iframed-block/script.js
+++ b/packages/e2e-tests/plugins/iframed-block/script.js
@@ -4,4 +4,3 @@
 		$( '.wp-block-test-iframed-block' ).test();
 	} );
 } )( window );
-
diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php b/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php
new file mode 100644
index 00000000000000..d02bfc6e2d34b7
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue_block_assets
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-assets
+ */
+
+add_action(
+	'enqueue_block_assets',
+	static function () {
+		wp_enqueue_style(
+			'iframed-enqueue-block-assets',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/style.css' )
+		);
+		wp_add_inline_style( 'iframed-enqueue-block-assets', 'body{padding:20px!important}' );
+		wp_enqueue_script(
+			'iframed-enqueue-block-assets-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/script.js',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/script.js' )
+		);
+		wp_localize_script(
+			'iframed-enqueue-block-assets-script',
+			'iframedEnqueueBlockAssetsL10n',
+			array(
+				'test' => 'Iframed Enqueue Block Assets!',
+			)
+		);
+	}
+);
diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-assets/script.js b/packages/e2e-tests/plugins/iframed-enqueue-block-assets/script.js
new file mode 100644
index 00000000000000..4067d55bc5bea9
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-enqueue-block-assets/script.js
@@ -0,0 +1,4 @@
+window.addEventListener( 'load', () => {
+	document.body.dataset.iframedEnqueueBlockAssetsL10n =
+		window.iframedEnqueueBlockAssetsL10n.test;
+} );
diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-assets/style.css b/packages/e2e-tests/plugins/iframed-enqueue-block-assets/style.css
new file mode 100644
index 00000000000000..675944492dd6f9
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-enqueue-block-assets/style.css
@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+body {
+	background-color: rgb(33, 117, 155) !important;
+	color: #fff !important;
+	padding: 2px !important;
+}
diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php b/packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
new file mode 100644
index 00000000000000..ef6361208848d7
--- /dev/null
+++ b/packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
@@ -0,0 +1,19 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue block editor settings
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings
+ */
+
+add_action(
+	'block_editor_settings_all',
+	function ( $settings ) {
+		$settings['styles'][] = array(
+			'css'            => 'p { border: 1px solid red }',
+			'__unstableType' => 'plugin',
+		);
+		return $settings;
+	}
+);
diff --git a/packages/e2e-tests/plugins/iframed-inline-styles.php b/packages/e2e-tests/plugins/iframed-inline-styles.php
index f54c8eb83e6233..ef3484e1a6498f 100644
--- a/packages/e2e-tests/plugins/iframed-inline-styles.php
+++ b/packages/e2e-tests/plugins/iframed-inline-styles.php
@@ -7,16 +7,9 @@
  * @package gutenberg-test-iframed-inline-styles
  */
 
-add_action(
-	'setup_theme',
-	function() {
-		add_theme_support( 'block-templates' );
-	}
-);
-
 add_action(
 	'init',
-	function() {
+	static function () {
 		wp_register_script(
 			'iframed-inline-styles-editor-script',
 			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/editor.js',
@@ -40,7 +33,7 @@ function() {
 
 add_action(
 	'enqueue_block_editor_assets',
-	function() {
+	static function () {
 		wp_enqueue_style(
 			'iframed-inline-styles-compat-style',
 			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css',
diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/block.json b/packages/e2e-tests/plugins/iframed-inline-styles/block.json
index 9e30ecfd6ca544..1231f1d33404bc 100644
--- a/packages/e2e-tests/plugins/iframed-inline-styles/block.json
+++ b/packages/e2e-tests/plugins/iframed-inline-styles/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "test/iframed-inline-styles",
 	"title": "Iframed Inline Styles",
 	"category": "text",
diff --git a/packages/e2e-tests/plugins/iframed-inline-styles/editor.js b/packages/e2e-tests/plugins/iframed-inline-styles/editor.js
index 1898e630758957..719c36a912b5d8 100644
--- a/packages/e2e-tests/plugins/iframed-inline-styles/editor.js
+++ b/packages/e2e-tests/plugins/iframed-inline-styles/editor.js
@@ -4,7 +4,7 @@
 	const { useBlockProps } = blockEditor;
 
 	registerBlockType( 'test/iframed-inline-styles', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			return el( 'div', useBlockProps(), 'Edit' );
 		},
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block.php b/packages/e2e-tests/plugins/iframed-masonry-block.php
index d8d6ea14120f85..51109bbbfb8195 100644
--- a/packages/e2e-tests/plugins/iframed-masonry-block.php
+++ b/packages/e2e-tests/plugins/iframed-masonry-block.php
@@ -7,16 +7,9 @@
  * @package gutenberg-test-iframed-masonry-block
  */
 
-add_action(
-	'setup_theme',
-	function() {
-		add_theme_support( 'block-templates' );
-	}
-);
-
 add_action(
 	'init',
-	function() {
+	static function () {
 		wp_register_script(
 			'iframed-masonry-block-editor',
 			plugin_dir_url( __FILE__ ) . 'iframed-masonry-block/editor.js',
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/block.json b/packages/e2e-tests/plugins/iframed-masonry-block/block.json
index 6b7c995df96494..a77600805752cd 100644
--- a/packages/e2e-tests/plugins/iframed-masonry-block/block.json
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "test/iframed-masonry-block",
 	"title": "Iframed Masonry Block",
 	"category": "text",
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js
index 82b0c8d83a7da6..f481ad54b6ac60 100644
--- a/packages/e2e-tests/plugins/iframed-masonry-block/editor.js
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/editor.js
@@ -6,18 +6,24 @@
 
 	const content = [
 		el( 'div', { className: 'grid-item' } ),
-		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height2' } ),
+		el( 'div', {
+			className: 'grid-item grid-item--width2 grid-item--height2',
+		} ),
 		el( 'div', { className: 'grid-item grid-item--height3' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
 		el( 'div', { className: 'grid-item grid-item--width3' } ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
-		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height3' } ),
+		el( 'div', {
+			className: 'grid-item grid-item--width2 grid-item--height3',
+		} ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
 		el( 'div', { className: 'grid-item' } ),
-		el( 'div', { className: 'grid-item grid-item--width2 grid-item--height2' } ),
+		el( 'div', {
+			className: 'grid-item grid-item--width2 grid-item--height2',
+		} ),
 		el( 'div', { className: 'grid-item grid-item--width2' } ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
@@ -31,7 +37,7 @@
 	];
 
 	registerBlockType( 'test/iframed-masonry-block', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			const ref = useRefEffect( ( node ) => {
 				const { ownerDocument } = node;
diff --git a/packages/e2e-tests/plugins/iframed-masonry-block/script.js b/packages/e2e-tests/plugins/iframed-masonry-block/script.js
index e287e6ec2e9745..0b2ae603fcdc97 100644
--- a/packages/e2e-tests/plugins/iframed-masonry-block/script.js
+++ b/packages/e2e-tests/plugins/iframed-masonry-block/script.js
@@ -10,4 +10,3 @@
 			} );
 	} );
 } )( window );
-
diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php b/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
index 40d7d5040083cf..06e0125e2ac0c9 100644
--- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
+++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets.php
@@ -7,16 +7,9 @@
  * @package gutenberg-test-iframed-multiple-stylesheets
  */
 
-add_action(
-	'setup_theme',
-	function() {
-		add_theme_support( 'block-templates' );
-	}
-);
-
 add_action(
 	'init',
-	function() {
+	static function () {
 		wp_register_script(
 			'iframed-multiple-stylesheets-editor-script',
 			plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/editor.js',
diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json
index fbd2e65e133970..d803e6412ecb00 100644
--- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json
+++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "test/iframed-multiple-stylesheets",
 	"title": "Iframed Multiple Stylesheets",
 	"category": "text",
@@ -11,5 +12,9 @@
 	"textdomain": "iframed-multiple-stylesheets",
 	"editorScript": "iframed-multiple-stylesheets-editor-script",
 	"editorStyle": "file:./editor.css",
-	"style": [ "iframed-multiple-stylesheets-style", "iframed-multiple-stylesheets-style2", "file:./style3.css" ]
+	"style": [
+		"iframed-multiple-stylesheets-style",
+		"iframed-multiple-stylesheets-style2",
+		"file:./style3.css"
+	]
 }
diff --git a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js
index be3ded2d9e2b73..fce08fadff850a 100644
--- a/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js
+++ b/packages/e2e-tests/plugins/iframed-multiple-stylesheets/editor.js
@@ -4,7 +4,7 @@
 	const { useBlockProps } = blockEditor;
 
 	registerBlockType( 'test/iframed-multiple-stylesheets', {
-		apiVersion: 2,
+		apiVersion: 3,
 		edit: function Edit() {
 			return el( 'div', useBlockProps(), 'Edit' );
 		},
diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php
index a8a0e6ee9a254c..0cc7566f3e5f10 100644
--- a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php
+++ b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks.php
@@ -12,7 +12,7 @@
  */
 function enqueue_inner_blocks_allowed_blocks_script() {
 	wp_enqueue_script(
-		'gutenberg-test-block-icons',
+		'gutenberg-test-inner-blocks-allowed-blocks',
 		plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
 		array(
 			'wp-blocks',
@@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
 		true
 	);
 }
-
-add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' );
+add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );
diff --git a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js
index 88585a87a84882..5b382cfa7d6339 100644
--- a/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js
+++ b/packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js
@@ -1,87 +1,57 @@
 ( function () {
-	const { withSelect } = wp.data;
+	const { useSelect } = wp.data;
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
-	const { InnerBlocks } = wp.blockEditor;
-	const __ = wp.i18n.__;
+	const { InnerBlocks, useBlockProps } = wp.blockEditor;
 	const divProps = {
 		className: 'product',
 		style: { outline: '1px solid gray', padding: 5 },
 	};
-	const template = [
-		[ 'core/image' ],
-		[ 'core/paragraph', { placeholder: __( 'Add a description' ) } ],
-		[ 'core/quote' ],
-	];
-	const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
-	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
-
-	const save = function () {
-		return el( 'div', divProps, el( InnerBlocks.Content ) );
-	};
-	registerBlockType( 'test/allowed-blocks-unset', {
-		title: 'Allowed Blocks Unset',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el( 'div', divProps, el( InnerBlocks, { template } ) );
-		},
-
-		save,
-	} );
-
-	registerBlockType( 'test/allowed-blocks-set', {
-		title: 'Allowed Blocks Set',
-		icon: 'carrot',
-		category: 'text',
-
-		edit() {
-			return el(
-				'div',
-				divProps,
-				el( InnerBlocks, {
-					template,
-					allowedBlocks: [
-						'core/button',
-						'core/gallery',
-						'core/list',
-						'core/media-text',
-						'core/quote',
-					],
-				} )
-			);
-		},
 
-		save,
-	} );
+	const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
+	const allowedBlocksWhenTwoChildren = [ 'core/gallery', 'core/video' ];
+	const allowedBlocksWhenTreeOrMoreChildren = [
+		'core/gallery',
+		'core/video',
+		'core/list',
+	];
 
 	registerBlockType( 'test/allowed-blocks-dynamic', {
+		apiVersion: 3,
 		title: 'Allowed Blocks Dynamic',
 		icon: 'carrot',
 		category: 'text',
 
-		edit: withSelect( function ( select, ownProps ) {
-			const getBlockOrder = select( 'core/block-editor' ).getBlockOrder;
-			return {
-				numberOfChildren: getBlockOrder( ownProps.clientId ).length,
-			};
-		} )( function ( props ) {
+		edit: function Edit( props ) {
+			const numberOfChildren = useSelect(
+				( select ) => {
+					const { getBlockCount } = select( 'core/block-editor' );
+					return getBlockCount( props.clientId );
+				},
+				[ props.clientId ]
+			);
+			const blockProps = useBlockProps( {
+				...divProps,
+				'data-number-of-children': numberOfChildren,
+			} );
+
+			let allowedBlocks = allowedBlocksWhenSingleEmptyChild;
+			if ( numberOfChildren === 2 ) {
+				allowedBlocks = allowedBlocksWhenTwoChildren;
+			} else if ( numberOfChildren > 2 ) {
+				allowedBlocks = allowedBlocksWhenTreeOrMoreChildren;
+			}
+
 			return el(
 				'div',
-				{
-					...divProps,
-					'data-number-of-children': props.numberOfChildren,
-				},
+				blockProps,
 				el( InnerBlocks, {
-					allowedBlocks:
-						props.numberOfChildren < 2
-							? allowedBlocksWhenSingleEmptyChild
-							: allowedBlocksWhenMultipleChildren,
+					allowedBlocks,
 				} )
 			);
-		} ),
-
-		save,
+		},
+		save() {
+			return el( 'div', divProps, el( InnerBlocks.Content ) );
+		},
 	} );
 } )();
diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php
new file mode 100644
index 00000000000000..8a2feb9f35a178
--- /dev/null
+++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test InnerBlocks Prioritized Inserter Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-inner-blocks-prioritized-inserter-blocks
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_inner_blocks_prioritized_inserter_blocks_script() {
+	wp_enqueue_script(
+		'gutenberg-test-inner-blocks-prioritized-inserter-blocks',
+		plugins_url( 'inner-blocks-prioritized-inserter-blocks/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-block-editor',
+			'wp-element',
+			'wp-i18n',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'inner-blocks-prioritized-inserter-blocks/index.js' ),
+		true
+	);
+}
+
+add_action( 'init', 'enqueue_inner_blocks_prioritized_inserter_blocks_script' );
diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js
new file mode 100644
index 00000000000000..b5b407a650c7cb
--- /dev/null
+++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js
@@ -0,0 +1,82 @@
+( function () {
+	const { registerBlockType } = wp.blocks;
+	const { createElement: el } = wp.element;
+	const { InnerBlocks } = wp.blockEditor;
+
+	const divProps = {
+		className: 'product',
+		style: { outline: '1px solid gray', padding: 5 },
+	};
+
+	// without a placeholder within the inner blocks it can be difficult to select the block using e2e tests
+	// especially using Puppeteer, so we use an image block which has a placeholder.
+	const template = [ [ 'core/image' ] ];
+
+	const save = function () {
+		return el( 'div', divProps, el( InnerBlocks.Content ) );
+	};
+	registerBlockType( 'test/prioritized-inserter-blocks-unset', {
+		title: 'Prioritized Inserter Blocks Unset',
+		icon: 'carrot',
+		category: 'text',
+
+		edit() {
+			return el( 'div', divProps, el( InnerBlocks, { template } ) );
+		},
+
+		save,
+	} );
+
+	registerBlockType( 'test/prioritized-inserter-blocks-set', {
+		title: 'Prioritized Inserter Blocks Set',
+		icon: 'carrot',
+		category: 'text',
+		edit() {
+			return el(
+				'div',
+				divProps,
+				el( InnerBlocks, {
+					template,
+					prioritizedInserterBlocks: [
+						'core/audio',
+						'core/spacer',
+						'core/code',
+					],
+				} )
+			);
+		},
+
+		save,
+	} );
+
+	registerBlockType(
+		'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks',
+		{
+			title: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks',
+			icon: 'carrot',
+			category: 'text',
+			edit() {
+				return el(
+					'div',
+					divProps,
+					el( InnerBlocks, {
+						template,
+						allowedBlocks: [
+							'core/spacer',
+							'core/code',
+							'core/paragraph',
+							'core/heading',
+						],
+						prioritizedInserterBlocks: [
+							'core/audio', // this is **not** in the allowedBlocks list
+							'core/spacer',
+							'core/code',
+						],
+					} )
+				);
+			},
+
+			save,
+		}
+	);
+} )();
diff --git a/packages/e2e-tests/plugins/inner-blocks-templates/index.js b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
index 3d8630103f16a1..d3d9b3e3097d56 100644
--- a/packages/e2e-tests/plugins/inner-blocks-templates/index.js
+++ b/packages/e2e-tests/plugins/inner-blocks-templates/index.js
@@ -2,7 +2,9 @@
 	const registerBlockType = wp.blocks.registerBlockType;
 	const createBlock = wp.blocks.createBlock;
 	const el = wp.element.createElement;
-	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const { InnerBlocks, useBlockProps } = wp.blockEditor;
+	const useState = window.wp.element.useState;
+
 	const TEMPLATE = [
 		[
 			'core/paragraph',
@@ -45,35 +47,46 @@
 	};
 
 	registerBlockType( 'test/test-inner-blocks-no-locking', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks no locking',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
-				template: TEMPLATE,
-			} );
+		edit: function InnerBlocksNoLockingEdit() {
+			return el(
+				'div',
+				useBlockProps(),
+				el( InnerBlocks, {
+					template: TEMPLATE,
+				} )
+			);
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-locking-all', {
+		apiVersion: 3,
 		title: 'Test InnerBlocks locking all',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
-				template: TEMPLATE,
-				templateLock: 'all',
-			} );
+		edit: function InnerBlocksBlocksLockingAllEdit() {
+			return el(
+				'div',
+				useBlockProps(),
+				el( InnerBlocks, {
+					template: TEMPLATE,
+					templateLock: 'all',
+				} )
+			);
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-update-locked-template', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks update locked template',
 		icon: 'cart',
 		category: 'text',
@@ -85,9 +98,11 @@
 			},
 		},
 
-		edit( props ) {
+		edit: function InnerBlocksUpdateLockedTemplateEdit( props ) {
 			const hasUpdatedTemplated = props.attributes.hasUpdatedTemplate;
-			return el( 'div', null, [
+			return el(
+				'div',
+				null,
 				el(
 					'button',
 					{
@@ -97,34 +112,44 @@
 					},
 					'Update template'
 				),
-				el( InnerBlocks, {
-					template: hasUpdatedTemplated
-						? TEMPLATE_TWO_PARAGRAPHS
-						: TEMPLATE,
-					templateLock: 'all',
-				} ),
-			] );
+				el(
+					'div',
+					useBlockProps(),
+					el( InnerBlocks, {
+						template: hasUpdatedTemplated
+							? TEMPLATE_TWO_PARAGRAPHS
+							: TEMPLATE,
+						templateLock: 'all',
+					} )
+				)
+			);
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-paragraph-placeholder', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks Paragraph Placeholder',
 		icon: 'cart',
 		category: 'text',
 
-		edit() {
-			return el( InnerBlocks, {
-				template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
-				templateInsertUpdatesSelection: true,
-			} );
+		edit: function InnerBlocksParagraphPlaceholderEdit() {
+			return el(
+				'div',
+				useBlockProps(),
+				el( InnerBlocks, {
+					template: TEMPLATE_PARAGRAPH_PLACEHOLDER,
+					templateInsertUpdatesSelection: true,
+				} )
+			);
 		},
 
 		save,
 	} );
 
 	registerBlockType( 'test/test-inner-blocks-transformer-target', {
+		apiVersion: 3,
 		title: 'Test Inner Blocks transformer target',
 		icon: 'cart',
 		category: 'text',
@@ -163,12 +188,42 @@
 			],
 		},
 
-		edit() {
-			return el( InnerBlocks, {
-				template: TEMPLATE,
-			} );
+		edit: function InnerBlocksTransformerTargetEdit() {
+			return el(
+				'div',
+				useBlockProps(),
+				el( InnerBlocks, {
+					template: TEMPLATE,
+				} )
+			);
 		},
 
 		save,
 	} );
+
+	registerBlockType( 'test/test-inner-blocks-async-template', {
+		apiVersion: 3,
+		title: 'Test Inner Blocks Async Template',
+		icon: 'cart',
+		category: 'text',
+
+		edit: function InnerBlocksAsyncTemplateEdit() {
+			const [ template, setTemplate ] = useState( [] );
+
+			setInterval( () => {
+				setTemplate( TEMPLATE_TWO_PARAGRAPHS );
+			}, 1000 );
+
+			return el(
+				'div',
+				useBlockProps(),
+				el( InnerBlocks, {
+					template,
+				} )
+			);
+		},
+
+		// Purposely do not save inner blocks so that it's possible to test template resolution.
+		save() {},
+	} );
 } )();
diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
new file mode 100644
index 00000000000000..54bd4325bb29b1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Interactive Blocks
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+add_action(
+	'init',
+	function () {
+		// Register all blocks found in the `interactive-blocks` folder.
+		if ( file_exists( __DIR__ . '/interactive-blocks/' ) ) {
+			$block_json_files = glob( __DIR__ . '/interactive-blocks/**/block.json' );
+
+			// Auto register all blocks that were found.
+			foreach ( $block_json_files as $block_json_file ) {
+				register_block_type( $block_json_file );
+			}
+		}
+
+		/*
+		 * Disable the server directive processing during E2E testing. This is
+		 * required to ensure that client hydration works even when the rendered
+		 * HTML contains unbalanced tags and it couldn't be processed in the server.
+		 */
+		if ( 'true' === $_GET['disable_server_directive_processing'] ) {
+			// Ensure the interactivity API is loaded.
+			wp_interactivity();
+			// But remove the server directive processing.
+			add_filter( 'interactivity_process_directives', '__return_false' );
+		}
+	}
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json
new file mode 100644
index 00000000000000..088572086f000c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/deferred-store",
+	"title": "E2E Interactivity tests - deferred store",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php
new file mode 100644
index 00000000000000..0d8c2cbeb5125d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * HTML for testing scope restoration with generators.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="test/deferred-store"
+	<?php echo wp_interactivity_data_wp_context( array( 'text' => '!dlrow ,olleH' ) ); ?>
+>
+	<span data-wp-text="state.reversedText" data-testid="result"></span>
+	<span data-wp-text="state.reversedTextGetter" data-testid="result-getter"></span>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
new file mode 100644
index 00000000000000..d3803788c0d1b0
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+window.addEventListener(
+	'_test_proceed_',
+	() => {
+		store( 'test/deferred-store', {
+			state: {
+				reversedText() {
+					return [ ...getContext().text ].reverse().join( '' );
+				},
+
+				get reversedTextGetter() {
+					return [ ...getContext().text ].reverse().join( '' );
+				},
+			},
+		} );
+	},
+	{ once: true }
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/block.json
new file mode 100644
index 00000000000000..e30436b40605f3
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-bind",
+	"title": "E2E Interactivity tests - directive bind",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
new file mode 100644
index 00000000000000..c629e098b6e780
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/render.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-bind">
+	<a
+		data-wp-bind--href="state.url"
+		data-testid="add missing href at hydration"
+	></a>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="change href at hydration"
+	></a>
+
+	<input
+		type="checkbox"
+		data-wp-bind--checked="state.checked"
+		data-testid="add missing checked at hydration"
+	/>
+
+	<input
+		type="checkbox"
+		checked
+		data-wp-bind--checked="!state.checked"
+		data-testid="remove existing checked at hydration"
+	/>
+
+	<a
+		href="/other-url"
+		data-wp-bind--href="state.url"
+		data-testid="nested binds - 1"
+	>
+		<img
+			width="1"
+			data-wp-bind--width="state.width"
+			data-testid="nested binds - 2"
+		/>
+	</a>
+
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Update
+	</button>
+
+	<p
+		data-wp-bind--hidden="!state.show"
+		data-wp-bind--aria-hidden="!state.show"
+		data-wp-bind--aria-expanded="state.show"
+		data-wp-bind--data-some-value="state.show"
+		data-testid="check enumerated attributes with true/false exist and have a string value"
+	>
+		Some Text
+	</p>
+
+	<?php
+	$hydration_cases = array(
+		'false'       => '{ "value": false }',
+		'true'        => '{ "value": true }',
+		'null'        => '{ "value": null }',
+		'undef'       => '{ "__any": "any" }',
+		'emptyString' => '{ "value": "" }',
+		'anyString'   => '{ "value": "any" }',
+		'number'      => '{ "value": 10 }',
+	);
+	?>
+
+	<?php foreach ( $hydration_cases as $type => $context ) : ?>
+	<div
+		data-testid='hydrating <?php echo $type; ?>'
+		data-wp-context='<?php echo $context; ?>'
+	>
+		<img
+			alt="Red dot"
+			data-testid="image"
+			data-wp-bind--width="context.value"
+			src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
+			AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
+			9TXL0Y4OHwAAAABJRU5ErkJggg=="
+		>
+		<input
+			type="text"
+			data-testid="input"
+			data-wp-bind--name="context.value"
+			data-wp-bind--value="context.value"
+			data-wp-bind--disabled="context.value"
+			data-wp-bind--aria-disabled="context.value"
+		>
+		<button
+			data-testid="toggle value"
+			data-wp-on--click="actions.toggleValue"
+			data-wp-bind--data-toggle-count="context.count"
+		>Toggle</button>
+	</div>
+	<?php endforeach; ?>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
new file mode 100644
index 00000000000000..47d1262f37ed20
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-bind/view.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state, foo } = store( 'directive-bind', {
+	state: {
+		url: '/some-url',
+		checked: true,
+		show: false,
+		width: 1,
+	},
+	foo: {
+		bar: 1,
+	},
+	actions: {
+		toggle: () => {
+			state.url = '/some-other-url';
+			state.checked = ! state.checked;
+			state.show = ! state.show;
+			state.width += foo.bar;
+		},
+		toggleValue: () => {
+			const context = getContext();
+			const previousValue =
+				'previousValue' in context
+					? context.previousValue
+					: // Any string works here; we just want to toggle the value
+					  // to ensure Preact renders the same we are hydrating in the
+					  // first place.
+					  'tacocat';
+
+			context.previousValue = context.value;
+			context.value = previousValue;
+			context.count = ( context.count ?? 0 ) + 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-class/block.json
new file mode 100644
index 00000000000000..5af93d526dca13
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-class",
+	"title": "E2E Interactivity tests - directive class",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
new file mode 100644
index 00000000000000..3f03ba210470f0
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -0,0 +1,98 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-class`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive='{"namespace": "directive-class"}'>
+	<button
+		data-wp-on--click="actions.toggleTrueValue"
+		data-testid="toggle trueValue"
+	>
+		Toggle trueValue
+	</button>
+
+	<button
+		data-wp-on--click="actions.toggleFalseValue"
+		data-testid="toggle falseValue"
+	>
+		Toggle falseValue
+	</button>
+
+	<div
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-testid="remove class if callback returns falsy value"
+	></div>
+
+	<div
+		class="foo"
+		data-wp-class--bar="state.trueValue"
+		data-testid="add class if callback returns truthy value"
+	></div>
+
+	<div
+		class="foo bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--bar="state.trueValue"
+		data-wp-class--baz="state.trueValue"
+		data-testid="handles multiple classes and callbacks"
+	></div>
+
+	<div
+		class="foo foo-bar"
+		data-wp-class--foo="state.falseValue"
+		data-wp-class--foo-bar="state.trueValue"
+		data-testid="handles class names that are contained inside other class names"
+	></div>
+
+	<div
+		class="foo bar baz"
+		data-wp-class--bar="state.trueValue"
+		data-testid="can toggle class in the middle"
+	></div>
+
+	<div
+		data-wp-class--foo="state.falseValue"
+		data-testid="can toggle class when class attribute is missing"
+	></div>
+
+	<div data-wp-context='{ "value": false }'>
+		<div
+			class="foo"
+			data-wp-class--foo="context.value"
+			data-testid="can use context values"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContextValue"
+			data-testid="toggle context false value"
+		>
+			Toggle context value
+		</button>
+	</div>
+
+	<div
+		data-wp-class--block__element--modifier="state.trueValue"
+		data-testid="can use BEM notation classes"
+	></div>
+
+	<div
+		data-wp-class--main-bg----color="state.trueValue"
+		data-testid="can use classes with several dashes"
+	></div>
+
+	<div data-wp-context='{ "value": false }'>
+		<div
+			data-wp-class--default="context.value"
+			data-testid="class name default"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContextValue"
+			data-testid="toggle class name default"
+		>
+			Toggle context val
+		</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
new file mode 100644
index 00000000000000..9ae5207c0e05c5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-class', {
+	state: {
+		trueValue: true,
+		falseValue: false,
+	},
+	actions: {
+		toggleTrueValue: () => {
+			state.trueValue = ! state.trueValue;
+		},
+		toggleFalseValue: () => {
+			state.falseValue = ! state.falseValue;
+		},
+		toggleContextValue: () => {
+			const context = getContext();
+			context.value = ! context.value;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-context/block.json
new file mode 100644
index 00000000000000..aaebb9abeff6a3
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-context",
+	"title": "E2E Interactivity tests - directive context",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
new file mode 100644
index 00000000000000..76635e37a26086
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/render.php
@@ -0,0 +1,235 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-context`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive='{"namespace": "directive-context"}'>
+	<div
+		data-wp-context='{ "prop1":"parent","prop2":"parent","obj":{"prop4":"parent","prop5":"parent"},"array":[1,2,3] }'
+	>
+		<pre
+			data-testid="parent context"
+			data-wp-bind--children="state.renderContext"
+		>
+			<!-- rendered during hydration -->
+		</pre>
+		<button data-testid="parent replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
+		<button
+			data-testid="parent prop1"
+			name="prop1"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			prop1
+		</button>
+		<button
+			data-testid="parent prop2"
+			name="prop2"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			prop2
+		</button>
+		<button
+			data-testid="parent obj.prop4"
+			name="obj.prop4"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			obj.prop4
+		</button>
+		<button
+			data-testid="parent obj.prop5"
+			name="obj.prop5"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			obj.prop5
+		</button>
+		<button
+			data-testid="parent new"
+			name="new"
+			value="modifiedFromParent"
+			data-wp-on--click="actions.updateContext"
+		>
+			new
+		</button>
+		<div
+			data-wp-context='{ "prop2":"child","prop3":"child","obj":{"prop5":"child","prop6":"child"},"array":[4,5,6] }'
+		>
+			<pre
+				data-testid="child context"
+				data-wp-bind--children="state.renderContext"
+			>
+				<!-- rendered during hydration -->
+			</pre>
+			<button data-testid="child replace" data-wp-on--click="actions.replaceObj">Replace obj</button>
+			<button
+				data-testid="child prop1"
+				name="prop1"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop1
+			</button>
+			<button
+				data-testid="child prop2"
+				name="prop2"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop2
+			</button>
+			<button
+				data-testid="child prop3"
+				name="prop3"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				prop3
+			</button>
+			<button
+				data-testid="child obj.prop4"
+				name="obj.prop4"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop4
+			</button>
+			<button
+				data-testid="child obj.prop5"
+				name="obj.prop5"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop5
+			</button>
+			<button
+				data-testid="child obj.prop6"
+				name="obj.prop6"
+				value="modifiedFromChild"
+				data-wp-on--click="actions.updateContext"
+			>
+				obj.prop6
+			</button>
+			<button
+				data-testid="child copy obj"
+				data-wp-on--click="actions.copyObj"
+			>
+				Copy obj
+			</button>
+			<div>
+				Is proxy preserved? <span
+					data-testid="is proxy preserved"
+					data-wp-text="state.isProxyPreserved"
+				></span>
+			</div>
+			<div>
+				Is proxy preserved on copy? <span
+					data-testid="is proxy preserved on copy"
+					data-wp-text="state.isProxyPreservedOnCopy"
+				></span>
+			</div>
+		</div>
+		<br />
+
+		<button
+			data-testid="context & other directives"
+			data-wp-context='{ "text": "Text 1" }'
+			data-wp-text="context.text"
+			data-wp-on--click="actions.toggleContextText"
+			data-wp-bind--value="context.text"
+		>
+			Toggle Context Text
+		</button>
+	</div>
+</div>
+
+<div
+	data-wp-interactive='{"namespace": "directive-context-navigate"}'
+	data-wp-router-region="navigation"
+	data-wp-context='{ "text": "first page" }'
+>
+	<div data-wp-context='{}'>
+		<div data-testid="navigation inherited text" data-wp-text="context.text"></div>
+		<div data-testid="navigation inherited text2" data-wp-text="context.text2"></div>
+	</div>
+	<div data-testid="navigation text" data-wp-text="context.text"></div>
+	<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+	<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
+	<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
+	<button data-testid="add text2" data-wp-on--click="actions.addText2">Add Text 2</button>
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+	<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
+</div>
+
+<div
+	data-wp-interactive='{"namespace": "directive-context-non-default"}'
+	data-wp-context--non-default='{ "text": "non default" }'
+	data-wp-context='{ "defaultText": "default" }'
+>
+	<span data-testid="non-default suffix context" data-wp-text="context.text"></span>
+	<span data-testid="default suffix context" data-wp-text="context.defaultText"></span>
+</div>
+
+<div
+	data-wp-interactive='directive-context'
+	data-wp-context='{ "list": [
+		{ "id": 1, "text": "Text 1" },
+		{ "id": 2, "text": "Text 2" }
+	] }'
+>
+	<button data-testid="select 1" data-wp-on--click="actions.selectItem" value=1>Select 1</button>
+	<button data-testid="select 2" data-wp-on--click="actions.selectItem" value=2>Select 2</button>
+	<div data-testid="selected" data-wp-text="state.selected"></div>
+</div>
+
+<div
+	data-wp-interactive="directive-context-watch"
+	data-wp-context='{"counter":0}'
+>
+	<button
+		data-testid="counter parent"
+		data-wp-on--click="actions.increment"
+		data-wp-text="context.counter"
+	></button>
+	<div
+		data-wp-context='{"counter":0, "changes":0}'
+		data-wp-watch="callbacks.countChanges"
+	>
+		<button
+			data-testid="counter child"
+			data-wp-on--click="actions.increment"
+			data-wp-text="context.counter"
+		>
+		</button>
+		<span
+			data-testid="counter changes"
+			data-wp-text="context.changes"
+		></span>
+	</div>
+</div>
+
+
+<div
+	data-testid="inheritance from other namespaces"
+	data-wp-interactive="directive-context/parent"
+	data-wp-context='{ "prop": "fromParentNs" }'
+>
+	<div
+		data-wp-interactive="directive-context/child"
+		data-wp-context='{ "prop": "fromChildNs" }'
+	>
+		<span
+			data-testid="parent"
+			data-wp-text="directive-context/parent::context.prop"
+		></span>
+		<span
+			data-testid="child"
+			data-wp-text="directive-context/child::context.prop"
+		></span>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
new file mode 100644
index 00000000000000..7515ad5ad92266
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-context/view.js
@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'directive-context', {
+	state: {
+		get renderContext() {
+			const ctx = getContext();
+			return JSON.stringify( ctx, undefined, 2 );
+		},
+		get selected() {
+			const { list, selected } = getContext();
+			return list.find( ( obj ) => obj === selected )?.text;
+		},
+		get isProxyPreserved() {
+			const ctx = getContext();
+			const pointer = ctx.obj;
+			return pointer === ctx.obj;
+		},
+		get isProxyPreservedOnCopy() {
+			const { obj, obj2 } = getContext();
+			return obj === obj2;
+		},
+	},
+	actions: {
+		updateContext( event ) {
+			const ctx = getContext();
+			const { name, value } = event.target;
+			const [ key, ...path ] = name.split( '.' ).reverse();
+			const obj = path.reduceRight( ( o, k ) => o[ k ], ctx );
+			obj[ key ] = value;
+		},
+		toggleContextText() {
+			const ctx = getContext();
+			ctx.text = ctx.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+		selectItem( event ) {
+			const ctx = getContext();
+			const value = parseInt( event.target.value );
+			ctx.selected = ctx.list.find( ( { id } ) => id === value );
+		},
+		replaceObj() {
+			const ctx = getContext();
+			ctx.obj = { overwritten: true };
+		},
+		copyObj() {
+			const ctx = getContext();
+			ctx.obj2 = ctx.obj;
+		},
+	},
+} );
+
+const html = `
+		<div
+			data-wp-interactive="directive-context-navigate"
+			data-wp-router-region="navigation"
+			data-wp-context='{ "text": "second page", "text2": "second page" }'
+		>
+			<div data-wp-context='{}'>
+				<div data-testid="navigation inherited text" data-wp-text="context.text"></div>
+				<div data-testid="navigation inherited text2" data-wp-text="context.text2"></div>
+			</div>
+			<div data-testid="navigation text" data-wp-text="context.text"></div>
+			<div data-testid="navigation new text" data-wp-text="context.newText"></div>
+			<button data-testid="toggle text" data-wp-on--click="actions.toggleText">Toggle Text</button>
+			<button data-testid="add new text" data-wp-on--click="actions.addNewText">Add New Text</button>
+			<button data-testid="add text2" data-wp-on--click="actions.addText2">Add Text 2</button>
+			<button data-testid="navigate" data-wp-on--click="actions.navigate">Navigate</button>
+			<button data-testid="async navigate" data-wp-on--click="actions.asyncNavigate">Async Navigate</button>
+		</div>`;
+
+const { actions } = store( 'directive-context-navigate', {
+	actions: {
+		toggleText() {
+			const ctx = getContext();
+			ctx.text = 'changed dynamically';
+		},
+		addNewText() {
+			const ctx = getContext();
+			ctx.newText = 'some new text';
+		},
+		addText2() {
+			const ctx = getContext();
+			ctx.text2 = 'some new text';
+		},
+		navigate() {
+			return import( '@wordpress/interactivity-router' ).then(
+				( { actions: routerActions } ) => {
+					const url = new URL( window.location.href );
+					url.searchParams.set( 'next_page', 'true' );
+					return routerActions.navigate( url, { force: true, html } );
+				}
+			);
+		},
+		*asyncNavigate() {
+			yield actions.navigate();
+			const ctx = getContext();
+			ctx.newText = 'changed from async action';
+		},
+	},
+} );
+
+store( 'directive-context-watch', {
+	actions: {
+		increment: () => {
+			const ctx = getContext();
+			ctx.counter = ctx.counter + 1;
+		},
+	},
+	callbacks: {
+		countChanges: () => {
+			const ctx = getContext();
+			// Subscribe to changes in counter.
+			// eslint-disable-next-line no-unused-expressions
+			ctx.counter;
+			ctx.changes = ctx.changes + 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json
new file mode 100644
index 00000000000000..7a0bd2c9ac5198
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-each",
+	"title": "E2E Interactivity tests - directive each",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
new file mode 100644
index 00000000000000..47eb351d837e78
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/render.php
@@ -0,0 +1,262 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-each`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-each">
+	<div data-testid="letters">
+		<template data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A</p>
+		<p data-testid="item" data-wp-each-child>B</p>
+		<p data-testid="item" data-wp-each-child>C</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="letters-kebab-case">
+		<template data-wp-each--my-item="state.letters">
+			<p data-wp-text="context.myItem" data-testid="item"></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A</p>
+		<p data-testid="item" data-wp-each-child>B</p>
+		<p data-testid="item" data-wp-each-child>C</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="fruits">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addFruit"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceFruit"
+		>Replace</button>
+		<template data-wp-each--fruit="state.fruits">
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-on--click="actions.removeFruit"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="books">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateBooks"
+		>Rotate</button>
+		<button
+			data-testid="add" data-wp-on--click="actions.addBook"
+		>Add</button>
+		<button
+			data-testid="replace" data-wp-on--click="actions.replaceBook"
+		>Replace</button>
+		<button
+			data-testid="modify" data-wp-on--click="actions.modifyBook"
+		>Modify</button>
+		<template
+			data-wp-each--book="state.books"
+			data-wp-each-key="context.book.isbn"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.book.title"
+				data-wp-on--click="actions.removeBook"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>A Game of Thrones</p>
+		<p data-testid="item" data-wp-each-child>A Clash of Kings</p>
+		<p data-testid="item" data-wp-each-child>A Storm of Swords</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="numbers">
+		<button
+			data-testid="shift" data-wp-on--click="actions.shiftNumber"
+		>Shift</button>
+		<button
+			data-testid="unshift" data-wp-on--click="actions.unshiftNumber"
+		>Unshift</button>
+		<template data-wp-each="state.numbers">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>1</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<hr>
+
+	<div data-testid="empty">
+		<button
+			data-testid="add" data-wp-on--click="actions.addItem"
+		>Add</button>
+		<template data-wp-each="state.emptyList">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</template>
+		<p data-testid="item">item X</p>
+	</div>
+
+	<div data-testid="siblings">
+		<button
+			data-testid="unshift"
+			data-wp-on--click="actions.unshiftNumberAndName"
+		>Unshift</button>
+		<template
+			data-wp-each="state.numbersAndNames"
+			data-wp-each-key="context.item.value"
+		>
+			<p data-wp-text="context.item.name" data-testid="item"></p>
+			<p data-wp-text="context.item.value" data-testid="item"></p>
+		</template>
+		<p data-testid="item" data-wp-each-child>two</p>
+		<p data-testid="item" data-wp-each-child>2</p>
+		<p data-testid="item" data-wp-each-child>three</p>
+		<p data-testid="item" data-wp-each-child>3</p>
+		<p data-testid="item">four</p>
+		<p data-testid="item">4</p>
+	</div>
+
+	<div data-testid="nested">
+		<button
+			data-testid="add animal"
+			data-wp-on--click="actions.addAnimal"
+		>Add animal</button>
+		<button
+			data-testid="add breeds"
+			data-wp-on--click="actions.addBreeds"
+		>Add breeds</button>
+
+		<ul>
+			<template
+				data-wp-each--animal="state.animalBreeds"
+				data-wp-each-key="context.animal.name"
+			>
+				<li data-testid="animal">
+					<span
+						data-testid="name"
+						data-wp-text="context.animal.name"
+					></span>
+					<ul>
+						<template data-wp-each--breed="context.animal.breeds">
+							<li data-wp-text="context.breed"></li>
+						</template>
+					</ul>
+				</li>
+			</template>
+			<!-- SSRed elements; they should be removed on hydration -->
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Dog</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Chihuahua</li>
+					<li data-wp-each-child>Rottweiler</li>
+				</ul>
+			</li>
+			<li data-testid="animal" data-wp-each-child>
+				<span data-testid="name">Cat</span>
+				<ul>
+					<template data-wp-each--breed="context.animal.breeds">
+						<li data-wp-text="context.breed"></li>
+					</template>
+					<li data-wp-each-child>Sphynx</li>
+					<li data-wp-each-child>Siamese</li>
+				</ul>
+			</li>
+		</ul>
+	</div>
+
+	<div data-testid="invalid tag">
+		<div data-wp-each="state.letters">
+			<p data-wp-text="context.item" data-testid="item"></p>
+		</div>
+	</div>
+
+
+	<div data-testid="derived state">
+		<button
+			data-testid="rotate" data-wp-on--click="actions.rotateFruits"
+		>Rotate</button>
+		<template
+			data-wp-context='{ "idPrefix": "fruit-" }'
+			data-wp-each--fruit="state.fruits"
+			data-wp-each-key="state.fruitId"
+		>
+			<p
+				data-testid="item"
+				data-wp-text="context.fruit"
+				data-wp-bind--data-fruit-id="state.fruitId"
+			></p>
+		</template>
+		<!-- SSRed elements; they should be removed on hydration -->
+		<p data-testid="item" data-wp-each-child>avocado</p>
+		<p data-testid="item" data-wp-each-child>banana</p>
+		<p data-testid="item" data-wp-each-child>cherimoya</p>
+	</div>
+</div>
+
+<hr>
+
+<div
+	data-wp-interactive="directive-each"
+	data-wp-router-region="navigation-updated list"
+	data-wp-context='{ "b": 2, "c": 3, "d": 4 }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="state.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>
+
+<hr>
+
+<div
+	data-wp-interactive="directive-each"
+	data-wp-context='{ "list": [ "beta" ], "callbackRunCount": 0 }'
+	data-testid="elements with directives"
+>
+	<template data-wp-each="context.list">
+		<div
+			data-testid="item"
+			data-wp-text="context.item"
+			data-wp-priority-2-init="callbacks.updateCallbackRunCount"
+		></div>
+	</template>
+	<div
+		data-wp-each-child
+		data-testid="item"
+		data-wp-text="context.item"
+		data-wp-priority-2-init="callbacks.updateCallbackRunCount"
+	></div>
+	<data
+		data-testid="callbackRunCount"
+		data-wp-text="context.callbackRunCount"
+	></data>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
new file mode 100644
index 00000000000000..6ceef82864d9db
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-each/view.js
@@ -0,0 +1,234 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	getContext,
+	useInit,
+	privateApis,
+} from '@wordpress/interactivity';
+
+const { state } = store( 'directive-each' );
+
+store( 'directive-each', {
+	state: {
+		letters: [ 'A', 'B', 'C' ],
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		fruits: [ 'avocado', 'banana', 'cherimoya' ],
+		get fruitId() {
+			const { idPrefix, fruit } = getContext();
+			return `${ idPrefix }${ fruit }`;
+		},
+	},
+	actions: {
+		removeFruit() {
+			const { fruit } = getContext();
+			state.fruits.splice( state.fruits.indexOf( fruit ), 1 );
+		},
+		rotateFruits() {
+			const fruit = state.fruits.pop();
+			state.fruits.splice( 0, 0, fruit );
+		},
+		addFruit() {
+			state.fruits.splice( 0, 0, 'ananas' );
+		},
+		replaceFruit() {
+			state.fruits.splice( 0, 1, 'ananas' );
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		books: [
+			{
+				title: 'A Game of Thrones',
+				author: 'George R.R. Martin',
+				isbn: '9780553588484',
+			},
+			{
+				title: 'A Clash of Kings',
+				author: 'George R.R. Martin',
+				isbn: '9780553381696',
+			},
+			{
+				title: 'A Storm of Swords',
+				author: 'George R.R. Martin',
+				isbn: '9780553573428',
+			},
+		],
+	},
+	actions: {
+		removeBook() {
+			const { book } = getContext();
+			state.books.splice( state.books.indexOf( book ), 1 );
+		},
+		rotateBooks() {
+			const book = state.books.pop();
+			state.books.splice( 0, 0, book );
+		},
+		addBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: '9780553582024',
+			};
+			state.books.splice( 0, 0, book );
+		},
+		replaceBook() {
+			const book = {
+				title: 'A Feast for Crows',
+				author: 'George R.R. Martin',
+				isbn: '9780553582024',
+			};
+			state.books.splice( 0, 1, book );
+		},
+		modifyBook() {
+			const [ book ] = state.books;
+			book.title = book.title.toUpperCase();
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbers: [ 1, 2, 3 ],
+	},
+	actions: {
+		shiftNumber() {
+			state.numbers.shift();
+		},
+		unshiftNumber() {
+			if ( state.numbers.length > 0 ) {
+				state.numbers.unshift( state.numbers[ 0 ] - 1 );
+			}
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		emptyList: [],
+	},
+	actions: {
+		addItem() {
+			state.emptyList.push( `item ${ state.emptyList.length }` );
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		numbersAndNames: [
+			{ name: 'two', value: 2 },
+			{ name: 'three', value: 3 },
+		],
+	},
+	actions: {
+		unshiftNumberAndName() {
+			state.numbersAndNames.unshift( { name: 'one', value: 1 } );
+		},
+	},
+} );
+
+store( 'directive-each', {
+	state: {
+		animalBreeds: [
+			{ name: 'Dog', breeds: [ 'chihuahua', 'rottweiler' ] },
+			{ name: 'Cat', breeds: [ 'sphynx', 'siamese' ] },
+		],
+	},
+	actions: {
+		addAnimal() {
+			state.animalBreeds.unshift( {
+				name: 'Rat',
+				breeds: [ 'dumbo', 'rex' ],
+			} );
+		},
+		addBreeds() {
+			state.animalBreeds.forEach( ( { name, breeds } ) => {
+				if ( name === 'Dog' ) {
+					breeds.unshift( 'german shepherd' );
+				}
+				if ( name === 'Cat' ) {
+					breeds.unshift( 'maine coon' );
+				}
+				if ( name === 'Rat' ) {
+					breeds.unshift( 'satin' );
+				}
+			} );
+		},
+	},
+} );
+
+const html = `
+<div
+	data-wp-interactive="directive-each"
+	data-wp-router-region="navigation-updated list"
+	data-wp-context='{ "a": 1, "b": 2, "c": 3, "d": 4 }'
+	data-testid="navigation-updated list"
+>
+	<button
+		data-testid="navigate"
+		data-wp-on--click="actions.navigate"
+	>Navigate</button>
+	<template data-wp-each="state.list">
+		<p data-wp-text="context.item" data-testid="item"></p>
+	</template>
+	<p data-testid="item" data-wp-each-child>alpha</p>
+	<p data-testid="item" data-wp-each-child>beta</p>
+	<p data-testid="item" data-wp-each-child>gamma</p>
+	<p data-testid="item" data-wp-each-child>delta</p>
+</div>
+`;
+
+store( 'directive-each', {
+	state: {
+		get list() {
+			const ctx = getContext();
+			return Object.keys( ctx ).sort();
+		},
+	},
+	actions: {
+		*navigate() {
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			return actions.navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	},
+} );
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+/*
+ * This is a high-priority version of the wp-init directive, to test directives
+ * with such priority or lower don't run in elements with wp-each-child.
+ */
+directive(
+	'priority-2-init',
+	( { directives: { 'priority-2-init': init }, evaluate } ) => {
+		init.forEach( ( entry ) => {
+			useInit( () => evaluate( entry ) );
+		} );
+	},
+	{ priority: 2 }
+);
+
+store( 'directive-each', {
+	callbacks: {
+		updateCallbackRunCount() {
+			const ctx = getContext();
+			ctx.callbackRunCount += 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-init/block.json
new file mode 100644
index 00000000000000..dda09ee898276d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-init",
+	"title": "E2E Interactivity tests - directive init",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
new file mode 100644
index 00000000000000..1262c66f386d92
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/render.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-init`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-init">
+	<div
+		data-testid="single init"
+		data-wp-context='{"isReady":[false],"calls":[0]}'
+		data-wp-init="actions.initOne"
+	>
+		<p data-wp-text="state.isReady" data-testid="isReady">false</p>
+		<p data-wp-text="state.calls" data-testid="calls">0</p>
+		<button data-wp-on--click="actions.reset">reset</button>
+	</div>
+	<div
+		data-testid="multiple inits"
+		data-wp-context='{"isReady":[false,false],"calls":[0,0]}'
+		data-wp-init--one="actions.initOne"
+		data-wp-init--two="actions.initTwo"
+	>
+		<p data-wp-text="state.isReady" data-testid="isReady">false,false</p>
+		<p data-wp-text="state.calls" data-testid="calls">0,0</p>
+	</div>
+	<div
+		data-testid="init show"
+		data-wp-context='{"isVisible":true,"isMounted":false}'
+	>
+		<div data-wp-show-mock="context.isVisible" data-testid="show">
+			<span data-wp-init="actions.initMount">Initially visible</span>
+		</div>
+		<button data-wp-on--click="actions.toggle" data-testid="toggle">
+			toggle
+		</button>
+		<p data-wp-text="state.isMounted" data-testid="isMounted">
+			true
+		</p>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
new file mode 100644
index 00000000000000..a8c70a4a907207
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+store( 'directive-init', {
+	state: {
+		get isReady() {
+			const { isReady } = getContext();
+			return isReady.map( ( v ) => ( v ? 'true' : 'false' ) ).join( ',' );
+		},
+		get calls() {
+			const { calls } = getContext();
+			return calls.join( ',' );
+		},
+		get isMounted() {
+			const { isMounted } = getContext();
+			return isMounted ? 'true' : 'false';
+		},
+	},
+	actions: {
+		initOne() {
+			const { isReady, calls } = getContext();
+			isReady[ 0 ] = true;
+			// Subscribe to changes in that prop.
+			calls[ 0 ]++;
+		},
+		initTwo() {
+			const { isReady, calls } = getContext();
+			isReady[ 1 ] = true;
+			calls[ 1 ]++;
+		},
+		initMount() {
+			const ctx = getContext();
+			ctx.isMounted = true;
+			return () => {
+				ctx.isMounted = false;
+			};
+		},
+		reset() {
+			const { isReady } = getContext();
+			isReady.fill( false );
+		},
+		toggle() {
+			const ctx = getContext();
+			ctx.isVisible = ! ctx.isVisible;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-key/block.json
new file mode 100644
index 00000000000000..745e7f9bb3f829
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-key",
+	"title": "E2E Interactivity tests - directive key",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
new file mode 100644
index 00000000000000..7c25ec2649561d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/render.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-key`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="directive-key"
+	data-wp-router-region="some-id"
+>
+	<ul>
+		<li data-wp-key="id-2" data-testid="first-item">2</li>
+		<li data-wp-key="id-3">3</li>
+	</ul>
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">
+		Navigate
+	</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
new file mode 100644
index 00000000000000..2efea222c0faf6
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-key/view.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const html = `
+		<div
+			data-wp-interactive="directive-key"
+			data-wp-router-region="some-id"
+		>
+			<ul>
+				<li data-wp-key="id-1">1</li>
+				<li data-wp-key="id-2" data-testid="second-item">2</li>
+				<li data-wp-key="id-3">3</li>
+			</ul>
+		</div>`;
+
+store( 'directive-key', {
+	actions: {
+		*navigate() {
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			return actions.navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/block.json
new file mode 100644
index 00000000000000..b40fc99a1d4481
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-on-document",
+	"title": "E2E Interactivity tests - directive on document",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
new file mode 100644
index 00000000000000..a491a52161dfb7
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-on-document">
+	<button
+		data-testid="visibility"
+		data-wp-on--click="actions.visibilityHandler"
+	>
+		Switch visibility
+	</button>
+
+	<div data-wp-text="state.isEventAttached" data-testid="isEventAttached">no</div>
+
+	<div data-wp-show-mock="state.isVisible">
+		<div
+			data-wp-on-document--keydown="callbacks.keydownHandler"
+			data-wp-init="callbacks.init"
+		>
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+	<div data-wp-on-document--keydown="actions.keydownHandler" data-wp-on-document--keydown--second="actions.keydownSecondHandler">
+		<p data-wp-text="state.keydownHandler" data-testid="keydownHandler">no</p>
+		<p data-wp-text="state.keydownSecondHandler" data-testid="keydownSecondHandler">no</p>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
new file mode 100644
index 00000000000000..b9689ac978f85f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+const { state } = store( 'directive-on-document', {
+	state: {
+		counter: 0,
+		isVisible: true,
+		isEventAttached: 'no',
+		keydownHandler: 'no',
+		keydownSecondHandler: 'no',
+	},
+	callbacks: {
+		keydownHandler() {
+			state.counter += 1;
+		},
+		init() {
+			state.isEventAttached = 'yes';
+		},
+	},
+	actions: {
+		visibilityHandler: () => {
+			state.isEventAttached = 'no';
+			state.isVisible = ! state.isVisible;
+		},
+		keydownHandler: () => {
+			state.keydownHandler = 'yes';
+		},
+		keydownSecondHandler: () => {
+			state.keydownSecondHandler = 'yes';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/block.json
new file mode 100644
index 00000000000000..993312c44b0648
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-on-window",
+	"title": "E2E Interactivity tests - directive on window",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
new file mode 100644
index 00000000000000..c72d80e892b15a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-on-window">
+	<button
+		data-wp-on--click="actions.visibilityHandler"
+		data-testid="visibility">
+		Switch visibility
+	</button>
+	<div data-wp-text="state.isEventAttached" data-testid="isEventAttached">no</div>
+	<div data-wp-show-mock="state.isVisible">
+		<div
+			data-wp-on-window--resize="callbacks.resizeHandler"
+			data-wp-init="callbacks.init"
+		>
+			<p data-wp-text="state.counter" data-testid="counter">0</p>
+		</div>
+	</div>
+	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
+		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</p>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
new file mode 100644
index 00000000000000..ef72e266e10759
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Mock `data-wp-show` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+const { state } = store( 'directive-on-window', {
+	state: {
+		counter: 0,
+		isVisible: true,
+		isEventAttached: 'no',
+		resizeHandler: 'no',
+		resizeSecondHandler: 'no',
+	},
+	callbacks: {
+		resizeHandler() {
+			state.counter += 1;
+		},
+		init() {
+			state.isEventAttached = 'yes';
+		},
+	},
+	actions: {
+		visibilityHandler: () => {
+			state.isEventAttached = 'no';
+			state.isVisible = ! state.isVisible;
+		},
+		resizeHandler: () => {
+			state.resizeHandler = 'yes';
+		},
+		resizeSecondHandler: () => {
+			state.resizeSecondHandler = 'yes';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-on/block.json
new file mode 100644
index 00000000000000..7502d4fcfdab4c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-on",
+	"title": "E2E Interactivity tests - directive on",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
new file mode 100644
index 00000000000000..127d6080f8f5b3
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/render.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<?php // A wrong directive name like "data-wp-on--" should not kill the interactivity. ?>
+<div data-wp-interactive="directive-on" data-wp-on--="">
+	<div>
+		<p data-wp-text="state.counter" data-testid="counter">0</p>
+		<button
+			data-testid="button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+	<div>
+		<p data-wp-text="state.text" data-testid="text">initial</p>
+		<input
+			type="text"
+			value="initial"
+			data-testid="input"
+			data-wp-on--input="actions.inputHandler"
+		>
+	</div>
+	<div data-wp-context='{"option":"undefined"}'>
+		<p data-wp-text="context.option" data-testid="option">0</p>
+		<select
+			name="pets"
+			value="undefined"
+			data-testid="select"
+			data-wp-on--change="actions.selectHandler"
+		>
+			<option value="undefined">Choose an option...</option>
+			<option value="dog">Dog</option>
+			<option value="cat">Cat</option>
+		</select>
+	</div>
+	<div
+		data-wp-on--customevent="actions.customEventHandler"
+		data-wp-context='{"customEvents":0}'
+	>
+		<p
+			data-wp-text="context.customEvents"
+			data-testid="custom events counter"
+		>0</p>
+		<button
+			data-testid="custom events button"
+			data-wp-on--click="actions.clickHandler"
+		>Click me!</button>
+	</div>
+	<div data-wp-context='{"clicked":false,"clickCount":0,"isOpen":true}'>
+		<p
+			data-wp-text="context.clicked"
+			data-testid="multiple handlers clicked"
+		>false</p>
+		<p
+			data-wp-text="context.clickCount"
+			data-testid="multiple handlers clickCount"
+		>0</p>
+		<p
+			data-wp-text="context.isOpen"
+			data-testid="multiple handlers isOpen"
+		>true</p>
+		<button
+			data-testid="multiple handlers button"
+			data-wp-on--click="actions.setClicked"
+			data-wp-on--click--counter="actions.countClick"
+			data-wp-on--click--toggle="actions.toggle"
+		>Click me!</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js
new file mode 100644
index 00000000000000..8b0bcc0e115eca
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-on/view.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-on', {
+	state: {
+		counter: 0,
+		text: '',
+	},
+	actions: {
+		clickHandler: ( event ) => {
+			state.counter += 1;
+			event.target.dispatchEvent(
+				new CustomEvent( 'customevent', { bubbles: true } )
+			);
+		},
+		inputHandler: ( event ) => {
+			state.text = event.target.value;
+		},
+		selectHandler: ( event ) => {
+			const context = getContext();
+			context.option = event.target.value;
+		},
+		customEventHandler: () => {
+			const context = getContext();
+			context.customEvents += 1;
+		},
+		setClicked: () => {
+			const context = getContext();
+			context.clicked = true;
+		},
+		countClick: () => {
+			const context = getContext();
+			context.clickCount += 1;
+		},
+		toggle: () => {
+			const context = getContext();
+			context.isOpen = ! context.isOpen;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/block.json
new file mode 100644
index 00000000000000..31c7b633d25e3e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-priorities",
+	"title": "E2E Interactivity tests - directive priorities",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
new file mode 100644
index 00000000000000..baadbbe118a81a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/render.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * HTML for testing priorities between directives.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-priorities">
+	<pre data-testid="execution order"></pre>
+
+	<!-- Element with test directives -->
+	<div
+		data-testid="test directives"
+		data-wp-test-attribute
+		data-wp-test-children
+		data-wp-test-text
+		data-wp-test-context
+	></div>
+</div>
+
+<div data-testid="non-existent-directives">
+	<!-- WARNING: the `div` with `data-wp-non-existent-directive` should remain
+		inline (i.e., without new line or blank characters in between) to
+		ensure it is the only child node. Otherwise, tests could fail. -->
+	<div data-wp-interactive="directive-priorities"><div data-wp-non-existent-directive></div></div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
new file mode 100644
index 00000000000000..77f2f25c5f9a41
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	getContext,
+	useEffect,
+	privateApis,
+} from '@wordpress/interactivity';
+
+const { directive, proxifyState, h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+/**
+ * Namespace used in custom directives and store.
+ */
+const namespace = 'directive-priorities';
+
+/**
+ * Util to check that render calls happen in order.
+ *
+ * @param {string} n Name passed from the directive being executed.
+ */
+const executionProof = ( n ) => {
+	const el = document.querySelector( '[data-testid="execution order"]' );
+	if ( ! el.textContent ) {
+		el.textContent = n;
+	} else {
+		el.textContent += `, ${ n }`;
+	}
+};
+
+/**
+ * Simple context directive, just for testing purposes. It provides a deep
+ * signal with these two properties:
+ * - attribute: 'from context'
+ * - text: 'from context'
+ */
+directive(
+	'test-context',
+	( { context: { Provider }, props: { children } } ) => {
+		executionProof( 'context' );
+		const client = {
+			[ namespace ]: proxifyState( namespace, {
+				attribute: 'from context',
+				text: 'from context',
+			} ),
+		};
+		return h( Provider, { value: { client } }, children );
+	},
+	{ priority: 8 }
+);
+
+/**
+ * Simple attribute directive, for testing purposes. It reads the value of
+ * `attribute` from context and populates `data-attribute` with it.
+ */
+directive( 'test-attribute', ( { evaluate, element } ) => {
+	executionProof( 'attribute' );
+	const attributeValue = evaluate( {
+		namespace,
+		value: 'context.attribute',
+	} );
+	useEffect( () => {
+		element.ref.current.setAttribute( 'data-attribute', attributeValue );
+	}, [] );
+	element.props[ 'data-attribute' ] = attributeValue;
+} );
+
+/**
+ * Simple text directive, for testing purposes. It reads the value of
+ * `text` from context and populates `children` with it.
+ */
+directive(
+	'test-text',
+	( { evaluate, element } ) => {
+		executionProof( 'text' );
+		const textValue = evaluate( { namespace, value: 'context.text' } );
+		element.props.children = h( 'p', { 'data-testid': 'text' }, textValue );
+	},
+	{ priority: 12 }
+);
+
+/**
+ * Children directive, for testing purposes. It adds a wrapper around
+ * `children`, including two buttons to modify `text` and `attribute` values
+ * from the received context.
+ */
+directive(
+	'test-children',
+	( { evaluate, element } ) => {
+		executionProof( 'children' );
+		const updateAttribute = () => {
+			evaluate( { namespace, value: 'actions.updateAttribute' } );
+		};
+		const updateText = () => {
+			evaluate( { namespace, value: 'actions.updateText' } );
+		};
+		element.props.children = h(
+			'div',
+			{},
+			element.props.children,
+			h( 'button', { onClick: updateAttribute }, 'Update attribute' ),
+			h( 'button', { onClick: updateText }, 'Update text' )
+		);
+	},
+	{ priority: 14 }
+);
+
+store( 'directive-priorities', {
+	actions: {
+		updateText() {
+			const context = getContext();
+			context.text = 'updated';
+		},
+		updateAttribute() {
+			const context = getContext();
+			context.attribute = 'updated';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-run/block.json
new file mode 100644
index 00000000000000..af266aea8f63b1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-run",
+	"title": "E2E Interactivity tests - directive run",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
new file mode 100644
index 00000000000000..5b37955ca3227b
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/render.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-run`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="directive-run"
+	data-wp-router-region='test-directive-run'
+>
+	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
+	<div data-testid="mounted" data-wp-text="state.isMounted"></div>
+	<div data-testid="renderCount" data-wp-text="state.renderCount"></div>
+	<div data-testid="navigated">no</div>
+
+	<div
+		data-wp-run--hydrated="callbacks.updateIsHydrated"
+		data-wp-run--renderCount="callbacks.updateRenderCount"
+		data-wp-text="state.clickCount"
+	></div>
+</div>
+
+<div data-wp-interactive="directive-run" >
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Toggle
+	</button>
+
+	<button data-testid="increment" data-wp-on--click="actions.increment">
+		Increment
+	</button>
+
+	<button data-testid="navigate" data-wp-on--click="actions.navigate">
+		Navigate
+	</button>
+
+	<!-- Hook execution results are stored in this element as attributes. -->
+	<div
+		data-testid="wp-run hooks results"
+		data-wp-show-children="state.isOpen"
+		data-init=""
+		data-watch=""
+	>
+		<div
+			data-wp-run--mounted="callbacks.updateIsMounted"
+			data-wp-run--hooks="callbacks.useHooks"
+		>
+			Element with wp-run using hooks
+		</div>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
new file mode 100644
index 00000000000000..125ac392042306
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store,
+	useInit,
+	useWatch,
+	getElement,
+	privateApis,
+} from '@wordpress/interactivity';
+
+const { directive, cloneElement } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Custom directive to show hide the content elements in which it is placed.
+directive(
+	'show-children',
+	( {
+		directives: { 'show-children': showChildren },
+		element,
+		evaluate,
+	} ) => {
+		const entry = showChildren.find( ( { suffix } ) => suffix === null );
+		return evaluate( entry )
+			? element
+			: cloneElement( element, { children: null } );
+	},
+	{ priority: 9 }
+);
+
+const html = `
+<div
+	data-wp-interactive="directive-run"
+	data-wp-router-region='test-directive-run'
+>
+	<div data-testid="hydrated" data-wp-text="state.isHydrated"></div>
+	<div data-testid="mounted" data-wp-text="state.isMounted"></div>
+	<div data-testid="renderCount" data-wp-text="state.renderCount"></div>
+	<div data-testid="navigated">yes</div>
+
+	<div
+		data-wp-run--hydrated="callbacks.updateIsHydrated"
+		data-wp-run--renderCount="callbacks.updateRenderCount"
+		data-wp-text="state.clickCount"
+	></div>
+</div>
+`;
+
+const { state } = store( 'directive-run', {
+	state: {
+		isOpen: false,
+		isHydrated: 'no',
+		isMounted: 'no',
+		renderCount: 0,
+		clickCount: 0,
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
+		},
+		increment() {
+			state.clickCount = state.clickCount + 1;
+		},
+		*navigate() {
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			return actions.navigate( window.location, {
+				force: true,
+				html,
+			} );
+		},
+	},
+	callbacks: {
+		updateIsHydrated() {
+			setTimeout( () => ( state.isHydrated = 'yes' ) );
+		},
+		updateIsMounted() {
+			setTimeout( () => ( state.isMounted = 'yes' ) );
+		},
+		updateRenderCount() {
+			setTimeout( () => ( state.renderCount = state.renderCount + 1 ) );
+		},
+		useHooks() {
+			// Runs only on first render.
+			useInit( () => {
+				const { ref } = getElement();
+				ref.closest(
+					'[data-testid="wp-run hooks results"]'
+				).setAttribute( 'data-init', 'initialized' );
+				return () => {
+					ref.closest(
+						'[data-testid="wp-run hooks results"]'
+					).setAttribute( 'data-init', 'cleaned up' );
+				};
+			} );
+
+			// Runs whenever a signal consumed inside updates its value. Also
+			// executes for the first render.
+			useWatch( () => {
+				const { ref } = getElement();
+				const { clickCount } = state;
+				ref.closest(
+					'[data-testid="wp-run hooks results"]'
+				).setAttribute( 'data-watch', clickCount );
+				return () => {
+					ref.closest(
+						'[data-testid="wp-run hooks results"]'
+					).setAttribute( 'data-watch', 'cleaned up' );
+				};
+			} );
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-style/block.json
new file mode 100644
index 00000000000000..a3b1c3fdb999c6
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-style",
+	"title": "E2E Interactivity tests - directive style",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
new file mode 100644
index 00000000000000..a783c5d97c216a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/render.php
@@ -0,0 +1,92 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-style`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-style">
+	<button
+		data-wp-on--click="actions.toggleColor"
+		data-testid="toggle color"
+	>
+		Toggle Color
+	</button>
+
+	<button
+		data-wp-on--click="actions.switchColorToFalse"
+		data-testid="switch color to false"
+	>
+		Switch Color to False
+	</button>
+
+	<div
+		style="color: red; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="dont change style if callback returns same value on hydration"
+	>Don't change style if callback returns same value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.falseValue"
+		data-testid="remove style if callback returns falsy value on hydration"
+	>Remove style if callback returns falsy value on hydration</div>
+
+	<div
+		style="color: blue; background: green;"
+		data-wp-style--color="state.color"
+		data-testid="change style if callback returns a new value on hydration"
+	>Change style if callback returns a new value on hydration</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black"
+		data-wp-style--color="state.falseValue"
+		data-wp-style--background="state.color"
+		data-wp-style--border="state.border"
+		data-testid="handles multiple styles and callbacks on hydration"
+	>Handles multiple styles and callbacks on hydration</div>
+
+	<div
+		data-wp-style--color="state.color"
+		data-testid="can add style when style attribute is missing on hydration"
+	>Can add style when style attribute is missing on hydration</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can toggle style"
+	>Can toggle style</div>
+
+	<div
+		style="color: red;"
+		data-wp-style--color="state.color"
+		data-testid="can remove style"
+	>Can remove style</div>
+
+	<div
+		style="color: blue; background: green; border: 1px solid black;"
+		data-wp-style--background="state.color"
+		data-testid="can toggle style in the middle"
+	>Can toggle style in the middle</div>
+
+	<div
+		style="background-color: green;"
+		data-wp-style--background-color="state.color"
+		data-testid="handles styles names with hyphens"
+	>Handles styles names with hyphens</div>
+
+	<div data-wp-context='{ "color": "blue" }'>
+		<div
+			style="color: blue;"
+			data-wp-style--color="context.color"
+			data-testid="can use context values"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContext"
+			data-testid="toggle context"
+		>
+			Toggle context
+		</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
new file mode 100644
index 00000000000000..ccf366844276ca
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-style/view.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'directive-style', {
+	state: {
+		falseValue: false,
+		color: 'red',
+		border: '2px solid yellow',
+	},
+	actions: {
+		toggleColor() {
+			state.color = state.color === 'red' ? 'blue' : 'red';
+		},
+		switchColorToFalse() {
+			state.color = false;
+		},
+		toggleContext() {
+			const context = getContext();
+			context.color = context.color === 'red' ? 'blue' : 'red';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-text/block.json
new file mode 100644
index 00000000000000..d8541ef3b0560d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-text",
+	"title": "E2E Interactivity tests - directive text",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
new file mode 100644
index 00000000000000..ac1bc8d8e8476a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/render.php
@@ -0,0 +1,49 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-text`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-context">
+	<div>
+		<span
+			data-wp-text="state.text"
+			data-testid="show state text"
+		></span>
+		<button
+			data-wp-on--click="actions.toggleStateText"
+			data-testid="toggle state text"
+		>
+			Toggle State Text
+		</button>
+	</div>
+
+	<div data-wp-context='{ "text": "Text 1" }'>
+		<span
+			data-wp-text="context.text"
+			data-testid="show context text"
+		></span>
+		<button
+			data-wp-on--click="actions.toggleContextText"
+			data-testid="toggle context text"
+		>
+			Toggle Context Text
+		</button>
+	</div>
+	<div>
+		<span
+			data-wp-text="state.component"
+			data-testid="show state component"
+		></span>
+		<span
+			data-wp-text="state.number"
+			data-testid="show state number"
+		></span>
+		<span
+			data-wp-text="state.boolean"
+			data-testid="show state boolean"
+		></span>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
new file mode 100644
index 00000000000000..21ac110bf64395
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-text/view.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, privateApis } from '@wordpress/interactivity';
+
+const { h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+const { state } = store( 'directive-context', {
+	state: {
+		text: 'Text 1',
+		component: () => h( 'div', {}, state.text ),
+		number: 1,
+		boolean: true,
+	},
+	actions: {
+		toggleStateText() {
+			state.text = state.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+		toggleContextText() {
+			const context = getContext();
+			context.text = context.text === 'Text 1' ? 'Text 2' : 'Text 1';
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/block.json b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/block.json
new file mode 100644
index 00000000000000..cea78e32cbdc0b
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/directive-watch",
+	"title": "E2E Interactivity tests - directive watch",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
new file mode 100644
index 00000000000000..a09e9df551e2ad
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/render.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-watch`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="directive-watch">
+	<div data-wp-show-mock="state.isOpen">
+		<input
+			data-testid="input"
+			data-wp-watch="callbacks.elementAddedToTheDOM"
+		/>
+	</div>
+
+	<div
+		data-wp-text="state.elementInTheDOM"
+		data-testid="element in the DOM"
+	></div>
+
+	<div data-wp-watch="callbacks.changeFocus"></div>
+
+	<div
+		data-testid="short-circuit infinite loops"
+		data-wp-watch="callbacks.infiniteLoop"
+		data-wp-text="state.counter"
+	>
+		0
+	</div>
+
+	<button data-testid="toggle" data-wp-on--click="actions.toggle">
+		Update
+	</button>
+
+	<button data-testid="increment" data-wp-on--click="actions.increment">
+		Increment
+	</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
new file mode 100644
index 00000000000000..ad035811a0bcd7
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Fake `data-wp-show-mock` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
+		if ( ! evaluate( entry ) ) {
+			return null;
+		}
+		return element;
+	}
+);
+
+const { state } = store( 'directive-watch', {
+	state: {
+		isOpen: true,
+		isElementInTheDOM: false,
+		counter: 0,
+		get elementInTheDOM() {
+			return state.isElementInTheDOM
+				? 'element is in the DOM'
+				: 'element is not in the DOM';
+		},
+	},
+	actions: {
+		toggle() {
+			state.isOpen = ! state.isOpen;
+		},
+		increment() {
+			state.counter = state.counter + 1;
+		},
+	},
+	callbacks: {
+		elementAddedToTheDOM: () => {
+			state.isElementInTheDOM = true;
+
+			return () => {
+				state.isElementInTheDOM = false;
+			};
+		},
+		changeFocus: () => {
+			if ( state.isOpen ) {
+				document.querySelector( "[data-testid='input']" ).focus();
+			}
+		},
+		infiniteLoop: () => {
+			state.counter = state.counter + 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/block.json b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/block.json
new file mode 100644
index 00000000000000..32388d7a641d60
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/generator-scope",
+	"title": "E2E Interactivity tests - generator scope",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php
new file mode 100644
index 00000000000000..c9991e441627d1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * HTML for testing scope restoration with generators.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div
+	data-wp-interactive="test/generator-scope"
+	<?php echo wp_interactivity_data_wp_context( array( 'result' => '' ) ); ?>
+>
+	<input readonly data-wp-bind--value="context.result" data-testid="result" />
+	<button type="button" data-wp-on--click="callbacks.resolve" data-testid="resolve">Async resolve</button>
+	<button type="button" data-wp-on--click="callbacks.reject" data-testid="reject">Async reject</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js
new file mode 100644
index 00000000000000..26d526263cb462
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+store( 'test/generator-scope', {
+	callbacks: {
+		*resolve() {
+			try {
+				getContext().result = yield Promise.resolve( 'ok' );
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+		*reject() {
+			try {
+				getContext().result = yield Promise.reject( new Error( '😘' ) );
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
new file mode 100644
index 00000000000000..c635846328b9e4
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-context",
+	"title": "E2E Interactivity tests - getServerContext",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
new file mode 100644
index 00000000000000..a71ced20dc46a1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * HTML for testing the getServerContext() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$link1      = $attributes['links']['modified'];
+$link2      = $attributes['links']['newProps'];
+$parent_ctx = $attributes['parentContext'];
+$child_ctx  = $attributes['childContext'];
+?>
+
+<nav
+	data-testid="navigate"
+	data-wp-interactive="test/get-server-context"
+	data-wp-on--click="actions.navigate"
+>
+	<a data-testid="modified" href="<?php echo esc_url( $link1 ); ?>">modified</a>
+	<a data-testid="newProps" href="<?php echo esc_url( $link2 ); ?>">newProps</a>
+</nav>
+
+<div
+	data-wp-interactive="test/get-server-context"
+	data-wp-router-region="server-context"
+	data-wp-watch="callbacks.updateServerContextParent"
+	<?php echo wp_interactivity_data_wp_context( $parent_ctx ); ?>
+>
+	<div
+		data-wp-watch="callbacks.updateServerContextChild"
+		<?php echo wp_interactivity_data_wp_context( $child_ctx ); ?>
+	>
+		<div data-testid="prop" data-wp-text="context.prop"></div>
+		<div data-testid="nested.prop" data-wp-text="context.nested.prop"></div>
+		<div data-testid="newProp" data-wp-text="context.newProp"></div>
+		<div data-testid="nested.newProp" data-wp-text="context.nested.newProp"></div>
+		<div data-testid="inherited.prop" data-wp-text="context.inherited.prop"></div>
+		<div data-testid="inherited.newProp" data-wp-text="context.inherited.newProp"></div>
+
+		<button
+			data-testid="tryToModifyServerContext"
+			<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+			data-wp-on--click="actions.attemptModification"
+			data-wp-text="context.result">
+		>
+			modify
+		</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
new file mode 100644
index 00000000000000..83f016e2eac16a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getServerContext } from '@wordpress/interactivity';
+
+store( 'test/get-server-context', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerContext().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateServerContextParent() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+		updateServerContextChild() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
new file mode 100644
index 00000000000000..abf76eb9beddcc
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-state",
+	"title": "E2E Interactivity tests - getServerState",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
new file mode 100644
index 00000000000000..abc4efd8272d5b
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * HTML for testing the getServerState() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+if ( isset( $attributes['state'] ) ) {
+	wp_interactivity_state( 'test/get-server-state', $attributes['state'] );
+}
+?>
+
+<div
+	data-wp-interactive="test/get-server-state"
+	data-wp-watch="callbacks.updateState"
+>
+	<div data-testid="prop" data-wp-text="state.prop"></div>
+	<div data-testid="nested.prop" data-wp-text="state.nested.prop"></div>
+	<div data-testid="newProp" data-wp-text="state.newProp"></div>
+	<div data-testid="nested.newProp" data-wp-text="state.nested.newProp"></div>
+
+	<button
+		data-testid="tryToModifyServerState"
+		<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+		data-wp-on--click="actions.attemptModification"
+		data-wp-text="context.result">
+	>
+		modify
+	</button>
+
+
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+HTML;
+			}
+		}
+		?>
+	</nav>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
new file mode 100644
index 00000000000000..db2992ec4a5863
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getServerState, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'test/get-server-state', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerState().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateState() {
+			const { prop, newProp, nested } = getServerState();
+			state.prop = prop;
+			state.newProp = newProp;
+			state.nested.prop = nested.prop;
+			state.nested.newProp = nested.newProp;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
new file mode 100644
index 00000000000000..c0382286a16216
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test-namespace/directive-bind",
+	"title": "E2E Interactivity tests - directive bind",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
new file mode 100644
index 00000000000000..0b7e40b6c1653b
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/render.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-bind`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="">
+	<a data-wp-bind--href="state.url" data-testid="empty namespace"></a>
+</div>
+
+<div data-wp-interactive="namespace">
+	<a data-wp-bind--href="state.url" data-testid="correct namespace"></a>
+</div>
+
+<div data-wp-interactive="{}">
+	<a data-wp-bind--href="state.url" data-testid="object namespace"></a>
+</div>
+
+<div data-wp-interactive="null">
+	<a data-wp-bind--href="state.url" data-testid="null namespace"></a>
+</div>
+
+<div data-wp-interactive="2">
+	<a data-wp-bind--href="state.url" data-testid="number namespace"></a>
+</div>
+
+<div data-wp-interactive>
+	<a data-wp-bind--href="other::state.url" data-testid="other namespace"></a>
+</div>
+
+<div data-wp-interactive="true">
+	<a data-wp-bind--href="state.url" data-testid="true namespace"></a>
+</div>
+
+<div data-wp-interactive="false">
+	<a data-wp-bind--href="state.url" data-testid="false namespace"></a>
+</div>
+<div data-wp-interactive="[]">
+	<a data-wp-bind--href="state.url" data-testid="[] namespace"></a>
+</div>
+<div data-wp-interactive='"quoted string"'>
+	<a data-wp-bind--href="state.url" data-testid="quoted namespace"></a>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
new file mode 100644
index 00000000000000..24f61fb03290ad
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/namespace/view.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+store( '', {
+	state: {
+		url: '/empty-string-url',
+	},
+} );
+
+store( 'namespace', {
+	state: {
+		url: '/namespace-url',
+	},
+} );
+
+store( 'other', {
+	state: {
+		url: '/other-store-url',
+	},
+} );
+
+store( 'null', {
+	state: {
+		url: '/null-url',
+	},
+} );
+
+store( '2', {
+	state: {
+		url: '/number-url',
+	},
+} );
+
+store( '{}', {
+	state: {
+		url: '/object-url',
+	},
+} );
+
+store( 'true', {
+	state: {
+		url: '/true-url',
+	},
+} );
+
+store( 'false', {
+	state: {
+		url: '/false-url',
+	},
+} );
+
+store( '[]', {
+	state: {
+		url: '/array-url',
+	},
+} );
+
+store( '"quoted string"', {
+	state: {
+		url: '/quoted-url',
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/block.json b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/block.json
new file mode 100644
index 00000000000000..44ff7fc68c5a3c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/negation-operator",
+	"title": "E2E Interactivity tests - negation operator",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
new file mode 100644
index 00000000000000..2e68c91d39f1e1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/render.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * HTML for testing the negation operator in directives.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="negation-operator">
+	<button
+		data-wp-on--click="actions.toggle"
+		data-testid="toggle active value"
+	>
+		Toggle Active Value
+	</button>
+
+	<div
+		data-wp-bind--hidden="!state.active"
+		data-testid="add hidden attribute if state is not active"
+	></div>
+
+	<div
+		data-wp-bind--hidden="!state.isActive"
+		data-testid="add hidden attribute if selector is not active"
+	></div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js
new file mode 100644
index 00000000000000..7d5e163e7fc7c2
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/negation-operator/view.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'negation-operator', {
+	state: {
+		active: false,
+		get isActive() {
+			return state.active;
+		},
+	},
+	actions: {
+		toggle() {
+			state.active = ! state.active;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/block.json
new file mode 100644
index 00000000000000..40b8739fcb81ad
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-navigate",
+	"title": "E2E Interactivity tests - router navigate",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
new file mode 100644
index 00000000000000..d7264eceda7c9e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/render.php
@@ -0,0 +1,77 @@
+<?php
+/**
+ * HTML for testing the router navigate function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+if ( $attributes['disableNavigation'] ) {
+	wp_interactivity_config(
+		'core/router',
+		array( 'clientNavigationDisabled' => true )
+	);
+}
+
+if ( isset( $attributes['data'] ) ) {
+	wp_interactivity_state(
+		'router',
+		array( 'data' => $attributes['data'] )
+	);
+}
+?>
+
+<div
+	data-wp-interactive="router"
+	data-wp-router-region="region-1"
+>
+	<h2 data-testid="title"><?php echo $attributes['title']; ?></h2>
+
+	<output
+		data-testid="router navigations pending"
+		data-wp-text="state.navigations.pending"
+	>NaN</output>
+	<output
+		data-testid="router navigations count"
+		data-wp-text="state.navigations.count"
+	>NaN</output>
+	<output
+		data-testid="router status"
+		data-wp-text="state.status"
+	>undefined</output>
+
+	<button
+		data-wp-on--click="actions.toggleTimeout"
+		data-testid="toggle timeout"
+	>
+		Timeout <span data-wp-text="state.timeout">NaN</span>
+	</button>
+
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+				<a
+					data-testid="link $i with hash"
+					data-wp-on--click="actions.navigate"
+					data-force-navigation="true"
+					href="$link#link-$i-with-hash"
+				>link $i with hash</a>
+HTML;
+			}
+		}
+		?>
+	</nav>
+	<div data-testid="getterProp" data-wp-text="state.data.getterProp"></div>
+	<div data-testid="prop1" data-wp-text="state.data.prop1"></div>
+	<div data-testid="prop2" data-wp-text="state.data.prop2"></div>
+	<div data-testid="prop3" data-wp-text="state.data.prop3"></div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
new file mode 100644
index 00000000000000..bd1d6e11647799
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-navigate/view.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'router', {
+	state: {
+		status: 'idle',
+		navigations: {
+			pending: 0,
+			count: 0,
+		},
+		timeout: 10000,
+		data: {
+			get getterProp() {
+				return `value from getter (${ state.data.prop1 })`;
+			},
+		},
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+
+			state.navigations.count += 1;
+			state.navigations.pending += 1;
+			state.status = 'busy';
+
+			const force = e.target.dataset.forceNavigation === 'true';
+			const { timeout } = state;
+
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href, { force, timeout } );
+
+			state.navigations.pending -= 1;
+
+			if ( state.navigations.pending === 0 ) {
+				state.status = 'idle';
+			}
+		},
+		toggleTimeout() {
+			state.timeout = state.timeout === 10000 ? 0 : 10000;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-regions/block.json
new file mode 100644
index 00000000000000..453d26d6d792ef
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-regions",
+	"title": "E2E Interactivity tests - router regions",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
new file mode 100644
index 00000000000000..7cdd8f0cccdd35
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
@@ -0,0 +1,98 @@
+<?php
+/**
+ * HTML for testing the hydration of router regions.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+?>
+
+<section>
+	<h2>Region 1</h2>
+	<div
+		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-router-region="region-1"
+	>
+		<p
+			data-testid="region-1-text"
+			data-wp-text="state.region1.text"
+		>not hydrated</p>
+		<p
+			data-testid="region-1-ssr"
+		>content from page <?php echo $attributes['page']; ?></p>
+
+		<button
+			data-testid="state-counter"
+			data-wp-text="state.counter.value"
+			data-wp-on--click="actions.counter.increment"
+		>NaN</button>
+
+		<?php if ( isset( $attributes['next'] ) ) : ?>
+			<a
+				data-testid="next"
+				data-wp-on--click="actions.router.navigate"
+				href="<?php echo $attributes['next']; ?>"
+			>Next</a>
+		<?php else : ?>
+			<a
+				data-testid="back"
+				data-wp-on--click="actions.router.back"
+				href="#"
+			>Back</a>
+		<?php endif; ?>
+	</div>
+</section>
+
+<div>
+	<p
+		data-testid="no-region-text-1"
+		data-wp-text="state.region1.text"
+	>not hydrated</p>
+</div>
+
+
+<section>
+	<h2>Region 2</h2>
+	<div
+		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-router-region="region-2"
+	>
+		<p
+			data-testid="region-2-text"
+			data-wp-text="state.region2.text"
+		>not hydrated</p>
+		<p
+			data-testid="region-2-ssr"
+		>content from page <?php echo $attributes['page']; ?></p>
+
+		<button
+			data-testid="context-counter"
+			data-wp-context='{ "counter": { "initialValue": 0 } }'
+			data-wp-init="actions.counter.init"
+			data-wp-text="context.counter.value"
+			data-wp-on--click="actions.counter.increment"
+		>NaN</button>
+
+		<div data-wp-ignore>
+			<div>
+				<p
+					data-testid="no-region-text-2"
+					data-wp-text="state.region2.text"
+				>not hydrated</p>
+			</div>
+
+			<section>
+				<h2>Nested region</h2>
+				<div
+					data-wp-interactive='{"namespace": "router-regions"}'
+					data-wp-router-region="nested-region"
+				>
+					<p
+						data-testid="nested-region-ssr"
+					>content from page <?php echo $attributes['page']; ?></p>
+				</div>
+			</section>
+		</div>
+	</div>
+</section>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
new file mode 100644
index 00000000000000..f3468eb88aff01
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'router-regions', {
+	state: {
+		region1: {
+			text: 'hydrated',
+		},
+		region2: {
+			text: 'hydrated',
+		},
+		counter: {
+			value: 0,
+		},
+	},
+	actions: {
+		router: {
+			*navigate( e ) {
+				e.preventDefault();
+				const { actions } = yield import(
+					'@wordpress/interactivity-router'
+				);
+				yield actions.navigate( e.target.href );
+			},
+			back() {
+				history.back();
+			},
+		},
+		counter: {
+			increment() {
+				const context = getContext();
+				if ( context?.counter ) {
+					context.counter.value += 1;
+				} else {
+					state.counter.value += 1;
+				}
+			},
+			init() {
+				const context = getContext();
+				if ( context.counter ) {
+					context.counter.value = context.counter.initialValue;
+				}
+			},
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/block.json b/packages/e2e-tests/plugins/interactive-blocks/store-tag/block.json
new file mode 100644
index 00000000000000..6b7fbe48b75aaf
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/store-tag",
+	"title": "E2E Interactivity tests - store tag",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
new file mode 100644
index 00000000000000..73a58042ec7af5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
@@ -0,0 +1,66 @@
+<?php
+/**
+ * HTML for testing the hydration of the serialized store.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+// These variables simulates SSR.
+$test_store_tag_counter = 'ok' === $attributes['condition'] ? 3 : 0;
+$test_store_tag_double  = $test_store_tag_counter * 2;
+?>
+
+<div data-wp-interactive="store-tag">
+	<div>
+		Counter:
+		<span
+			data-wp-bind--children="state.counter.value"
+			data-testid="counter value"
+			><?php echo $test_store_tag_counter; ?></span
+		>
+		<br />
+		Double:
+		<span
+			data-wp-bind--children="state.counter.double"
+			data-testid="counter double"
+			><?php echo $test_store_tag_double; ?></span
+		>
+		<br />
+		<button
+			data-wp-on--click="actions.counter.increment"
+			data-testid="counter button"
+		>
+			+1
+		</button>
+		<span
+			data-wp-bind--children="state.counter.clicks"
+			data-testid="counter clicks"
+			>0</span
+		>
+		clicks
+	</div>
+</div>
+<?php
+
+if ( 'missing' !== $attributes['condition'] ) {
+
+	if ( 'ok' === $attributes['condition'] ) {
+		$test_store_tag_json = '{ "state": { "store-tag": { "counter": { "value": 3 } } } }';
+	}
+
+	if ( 'corrupted-json' === $attributes['condition'] ) {
+		$test_store_tag_json = 'this is not a JSON';
+	}
+
+	if ( 'invalid-state' === $attributes['condition'] ) {
+		$test_store_tag_json = 'null';
+	}
+
+	echo <<<HTML
+	<script type="application/json" id="wp-interactivity-data">
+		$test_store_tag_json
+	</script>
+HTML;
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js
new file mode 100644
index 00000000000000..0faa9625cedd78
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/view.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+const { state } = store( 'store-tag', {
+	state: {
+		counter: {
+			// `value` is defined in the server.
+			get double() {
+				return state.counter.value * 2;
+			},
+			clicks: 0,
+		},
+	},
+	actions: {
+		counter: {
+			increment() {
+				state.counter.value += 1;
+				state.counter.clicks += 1;
+			},
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store/block.json b/packages/e2e-tests/plugins/interactive-blocks/store/block.json
new file mode 100644
index 00000000000000..bbf42f832de29f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/store",
+	"title": "E2E Interactivity tests - store definition",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store/render.php b/packages/e2e-tests/plugins/interactive-blocks/store/render.php
new file mode 100644
index 00000000000000..325d27b9d5aab3
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store/render.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * HTML for testing the `store` function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="test/store">
+	<div data-wp-text="state.0" data-testid="state-0"></div>
+	<div
+		data-testid="non-plain object"
+		data-wp-text="state.isNotProxified"
+		data-wp-init="callbacks.init"
+	></div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/store/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store/view.js b/packages/e2e-tests/plugins/interactive-blocks/store/view.js
new file mode 100644
index 00000000000000..269be9b23bcbbf
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/store/view.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+// A non-object state should never be allowed.
+store( 'test/store', { state: [ 'wrong' ] } );
+
+const { state } = store( 'test/store', {
+	state: {
+		0: 'right',
+		get isNotProxified() {
+			const { ref } = getElement();
+			return state.elementRef === ref;
+		},
+	},
+	callbacks: {
+		init() {
+			const { ref } = getElement();
+			state.elementRef = ref; // HTMLElement
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/block.json b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/block.json
new file mode 100644
index 00000000000000..7885dc4be47903
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/tovdom-islands",
+	"title": "E2E Interactivity tests - tovdom islands",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
new file mode 100644
index 00000000000000..f42dda598c1f6e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/render.php
@@ -0,0 +1,87 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-interactive`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div>
+	<div data-wp-show-mock="state.falseValue">
+		<span data-testid="not inside an island">
+			This should be shown because it is inside an island.
+		</span>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-show-mock="state.falseValue">
+			<span data-testid="inside an island with json object">
+				This should not be shown because it is inside an island.
+			</span>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-show-mock="state.falseValue">
+			<span data-testid="inside an island with string">
+				This should not be shown because it is inside an island.
+			</span>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-ignore>
+			<div data-wp-show-mock="state.falseValue">
+				<span
+					data-testid="inside an inner block of an isolated island"
+				>
+					This should be shown because it is inside an inner
+					block of an isolated island.
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="tovdom-islands">
+			<div
+				data-wp-show-mock="state.falseValue"
+				data-testid="island inside another island"
+			>
+				<span>
+					This should not have two template wrappers because
+					that means we hydrated twice.
+				</span>
+			</div>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div>
+			<div
+				data-wp-interactive="tovdom-islands"
+				data-wp-ignore
+			>
+				<div data-wp-show-mock="state.falseValue">
+					<span
+						data-testid="island inside inner block of isolated island"
+					>
+						This should not be shown because even though it
+						is inside an inner block of an isolated island,
+						it's inside an new island.
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div data-wp-interactive="tovdom-islands">
+		<div data-wp-interactive="something-new"></div>
+		<div data-wp-show-mock="state.falseValue">
+			<span data-testid="directive after different namespace">
+				The directive above should keep the `tovdom-island` namespace,
+				so this message should not be visible.
+			</span>
+		</div>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
new file mode 100644
index 00000000000000..8016e931624a16
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { store, privateApis } from '@wordpress/interactivity';
+
+const { directive, h } = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+// Fake `data-wp-show-mock` directive to test when things are removed from the
+// DOM.  Replace with `data-wp-show` when it's ready.
+directive(
+	'show-mock',
+	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
+
+		if ( ! evaluate( entry ) ) {
+			element.props.children = h(
+				'template',
+				null,
+				element.props.children
+			);
+		}
+	}
+);
+
+store( 'tovdom-islands', {
+	state: {
+		falseValue: false,
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/block.json b/packages/e2e-tests/plugins/interactive-blocks/tovdom/block.json
new file mode 100644
index 00000000000000..00d0c1ac51c375
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/tovdom",
+	"title": "E2E Interactivity tests - tovdom",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/cdata.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom/cdata.js
new file mode 100644
index 00000000000000..ca0f8009d1ae4f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/cdata.js
@@ -0,0 +1,13 @@
+const cdata = `
+	<div>
+		<![CDATA[##1##]]>
+		<div data-testid="it should keep this node between CDATA">
+			<![CDATA[##2##]]>
+		</div>
+	</div>
+	`;
+
+const cdataElement = new DOMParser()
+	.parseFromString( cdata, 'text/xml' )
+	.querySelector( 'div' );
+document.getElementById( 'replace-with-cdata' ).replaceWith( cdataElement );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js
new file mode 100644
index 00000000000000..b65095ef6cde4f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js
@@ -0,0 +1,16 @@
+const processingInstructions = `
+	<div>
+		<?xpacket ##1## ?>
+		<div data-testid="it should keep this node between processing instructions">
+			Processing instructions inner node
+			<?xpacket ##2## ?>
+		</div>
+	</div>
+	`;
+
+const processingInstructionsElement = new DOMParser()
+	.parseFromString( processingInstructions, 'text/xml' )
+	.querySelector( 'div' );
+document
+	.getElementById( 'replace-with-processing-instructions' )
+	.replaceWith( processingInstructionsElement );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
new file mode 100644
index 00000000000000..5dc4e6d30097bd
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * HTML for testing the vDOM generation.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+
+$plugin_url   = plugin_dir_url( __DIR__ );
+$src_proc_ins = $plugin_url . 'tovdom/processing-instructions.js';
+$src_cdata    = $plugin_url . 'tovdom/cdata.js';
+?>
+
+<div data-wp-interactive="tovdom">
+	<div data-testid="it should delete comments">
+		<!-- ##1## -->
+		<div data-testid="it should keep this node between comments">
+			Comments inner node
+			<!-- ##2## -->
+		</div>
+	</div>
+
+	<div data-testid="it should delete processing instructions">
+		<div id="replace-with-processing-instructions"></div>
+	</div>
+
+	<script src="<?php echo $src_proc_ins; ?>"></script>
+
+	<div data-testid="it should replace CDATA with text nodes">
+		<div id="replace-with-cdata"></div>
+	</div>
+
+	<script src="<?php echo $src_cdata; ?>"></script>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js
new file mode 100644
index 00000000000000..75987cf19c5c74
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/view.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+store( 'tovdom', {} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/with-scope/block.json b/packages/e2e-tests/plugins/interactive-blocks/with-scope/block.json
new file mode 100644
index 00000000000000..e73c0c04fa6450
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/with-scope/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/with-scope",
+	"title": "E2E Interactivity tests - with scope",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php b/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
new file mode 100644
index 00000000000000..725bb539a30a6c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/with-scope/render.php
@@ -0,0 +1,12 @@
+<?php
+/**
+ * HTML for testing the directive `data-wp-on`.
+ *
+ * @package gutenberg-test-interactive-blocks
+ */
+?>
+
+<div data-wp-interactive="with-scope" data-wp-context='{"asyncCounter": 0, "syncCounter": 0}' data-wp-init--a='callbacks.asyncInit' data-wp-init--b='callbacks.syncInit'>
+		<p data-wp-text="context.asyncCounter" data-testid="asyncCounter">0</p>
+		<p data-wp-text="context.syncCounter" data-testid="syncCounter">0</p>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.asset.php
@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.js b/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.js
new file mode 100644
index 00000000000000..daa3b824d309ac
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/with-scope/view.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, withScope } from '@wordpress/interactivity';
+
+store( 'with-scope', {
+	callbacks: {
+		asyncInit: () => {
+			setTimeout(
+				withScope( function* () {
+					yield new Promise( ( resolve ) =>
+						setTimeout( resolve, 1 )
+					);
+					const context = getContext();
+					context.asyncCounter += 1;
+				}, 1 )
+			);
+		},
+		syncInit: () => {
+			const context = getContext();
+			context.syncCounter += 1;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php b/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php
new file mode 100644
index 00000000000000..c5197cc7198965
--- /dev/null
+++ b/packages/e2e-tests/plugins/lightbox-allow-editing-false-enabled-false.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Plugin Name: Lightbox Allow Editing False Enabled False
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-lightbox-allow-editing-false-enabled-false
+ */
+
+function filter_theme_json_theme( $theme_json ) {
+	$new_data = array(
+		'version'  => 2,
+		'settings' => array(
+			'blocks' => array(
+				'core/image' => array(
+					'lightbox' => array(
+						'allowEditing' => false,
+						'enabled'      => false,
+					),
+				),
+			),
+		),
+	);
+	return $theme_json->update_with( $new_data );
+}
+add_filter( 'wp_theme_json_data_theme', 'filter_theme_json_theme' );
diff --git a/packages/e2e-tests/plugins/marquee-function-widget.php b/packages/e2e-tests/plugins/marquee-function-widget.php
index dda0c3f9a6e273..389641489af841 100644
--- a/packages/e2e-tests/plugins/marquee-function-widget.php
+++ b/packages/e2e-tests/plugins/marquee-function-widget.php
@@ -14,7 +14,7 @@ function marquee_greeting_init() {
 	wp_register_sidebar_widget(
 		'marquee_greeting',
 		'Marquee Greeting',
-		function() {
+		static function () {
 			$greeting = get_option( 'marquee_greeting', 'Hello!' );
 			printf( '<marquee>%s</marquee>', esc_html( $greeting ) );
 		}
@@ -23,7 +23,7 @@ function() {
 	wp_register_widget_control(
 		'marquee_greeting',
 		'Marquee Greeting',
-		function() {
+		static function () {
 			if ( isset( $_POST['marquee-greeting'] ) ) {
 				update_option(
 					'marquee_greeting',
diff --git a/packages/e2e-tests/plugins/observe-typing.php b/packages/e2e-tests/plugins/observe-typing.php
new file mode 100644
index 00000000000000..a9152bc79684c5
--- /dev/null
+++ b/packages/e2e-tests/plugins/observe-typing.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Observe Typing
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-block-api
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_observe_typing_plugin_script() {
+	wp_enqueue_script(
+		'gutenberg-test-observe-typing',
+		plugins_url( 'observe-typing/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-block-editor',
+			'wp-components',
+			'wp-element',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'observe-typing/index.js' ),
+		true
+	);
+}
+
+add_action( 'init', 'enqueue_observe_typing_plugin_script' );
diff --git a/packages/e2e-tests/plugins/observe-typing/index.js b/packages/e2e-tests/plugins/observe-typing/index.js
new file mode 100644
index 00000000000000..fbfb6a5de757d9
--- /dev/null
+++ b/packages/e2e-tests/plugins/observe-typing/index.js
@@ -0,0 +1,45 @@
+( function () {
+	const { registerBlockType } = wp.blocks;
+	const { useBlockProps, BlockControls } = wp.blockEditor;
+	const { Dropdown, ToolbarButton, TextControl } = wp.components;
+	const { createElement: el, useState } = wp.element;
+
+	registerBlockType( 'e2e-tests/observe-typing', {
+		apiVersion: 3,
+		title: 'Observe Typing',
+		description: 'Observe Typing test block.',
+		category: 'widgets',
+		edit: function Edit() {
+			const [ value, setValue ] = useState( '' );
+			const blockProps = useBlockProps();
+
+			return el(
+				'div',
+				blockProps,
+				el(
+					BlockControls,
+					{ group: 'block' },
+					el( Dropdown, {
+						renderToggle: ( { onToggle } ) =>
+							el(
+								ToolbarButton,
+								{
+									onClick: onToggle,
+								},
+								'Open Dropdown'
+							),
+						renderContent: () =>
+							el( TextControl, {
+								label: 'Dropdown field',
+								value,
+								onChange: setValue,
+								__next40pxDefaultSize: true,
+							} ),
+					} )
+				),
+				el( 'p', {}, 'Hello Editor!' )
+			);
+		},
+		save: () => null,
+	} );
+} )();
diff --git a/packages/e2e-tests/plugins/pattern-recursion.php b/packages/e2e-tests/plugins/pattern-recursion.php
new file mode 100644
index 00000000000000..eb3a2051551a26
--- /dev/null
+++ b/packages/e2e-tests/plugins/pattern-recursion.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Protection Against Recursive Patterns
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-pattern-recursion
+ */
+
+add_filter(
+	'init',
+	function () {
+		register_block_pattern(
+			'evil/recursive',
+			array(
+				'title'       => 'Evil recursive',
+				'description' => 'Evil recursive',
+				'content'     => '<!-- wp:paragraph --><p>Hello</p><!-- /wp:paragraph --><!-- wp:pattern {"slug":"evil/recursive"} /-->',
+			)
+		);
+	}
+);
diff --git a/packages/e2e-tests/plugins/plugins-api.php b/packages/e2e-tests/plugins/plugins-api.php
index 1accfb3fc718da..10e35f16226f2a 100644
--- a/packages/e2e-tests/plugins/plugins-api.php
+++ b/packages/e2e-tests/plugins/plugins-api.php
@@ -15,7 +15,7 @@ function enqueue_plugins_api_plugin_scripts() {
 		'gutenberg-test-plugins-api-post-status-info',
 		plugins_url( 'plugins-api/post-status-info.js', __FILE__ ),
 		array(
-			'wp-edit-post',
+			'wp-editor',
 			'wp-element',
 			'wp-i18n',
 			'wp-plugins',
@@ -28,7 +28,7 @@ function enqueue_plugins_api_plugin_scripts() {
 		'gutenberg-test-plugins-api-publish-pane;',
 		plugins_url( 'plugins-api/publish-panel.js', __FILE__ ),
 		array(
-			'wp-edit-post',
+			'wp-editor',
 			'wp-element',
 			'wp-i18n',
 			'wp-plugins',
@@ -44,7 +44,7 @@ function enqueue_plugins_api_plugin_scripts() {
 			'wp-components',
 			'wp-compose',
 			'wp-data',
-			'wp-edit-post',
+			'wp-editor',
 			'wp-block-editor',
 			'wp-editor',
 			'wp-element',
@@ -63,7 +63,7 @@ function enqueue_plugins_api_plugin_scripts() {
 			'wp-components',
 			'wp-compose',
 			'wp-data',
-			'wp-edit-post',
+			'wp-editor',
 			'wp-block-editor',
 			'wp-element',
 			'wp-i18n',
@@ -78,7 +78,7 @@ function enqueue_plugins_api_plugin_scripts() {
 		'gutenberg-test-plugins-api-document-setting',
 		plugins_url( 'plugins-api/document-setting.js', __FILE__ ),
 		array(
-			'wp-edit-post',
+			'wp-editor',
 			'wp-element',
 			'wp-i18n',
 			'wp-plugins',
@@ -86,6 +86,19 @@ function enqueue_plugins_api_plugin_scripts() {
 		filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/document-setting.js' ),
 		true
 	);
+
+	wp_enqueue_script(
+		'gutenberg-test-plugins-api-preview-menu',
+		plugins_url( 'plugins-api/preview-menu.js', __FILE__ ),
+		array(
+			'wp-editor',
+			'wp-element',
+			'wp-i18n',
+			'wp-plugins',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/preview-menu.js' ),
+		true
+	);
 }
 
 add_action( 'init', 'enqueue_plugins_api_plugin_scripts' );
diff --git a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
index 402f719729928c..87ee3a4f65590c 100644
--- a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
+++ b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
@@ -8,8 +8,8 @@
 	const Component = wp.element.Component;
 	const __ = wp.i18n.__;
 	const registerPlugin = wp.plugins.registerPlugin;
-	const PluginSidebar = wp.editPost.PluginSidebar;
-	const PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+	const PluginSidebar = wp.editor.PluginSidebar;
+	const PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
 
 	class SidebarContents extends Component {
 		constructor( props ) {
@@ -48,15 +48,16 @@
 				el(
 					Button,
 					{
-						variant: "primary",
+						variant: 'primary',
 						onClick: () => {
 							dispatch(
 								'core/annotations'
 							).__experimentalAddAnnotation( {
 								source: 'e2e-tests',
-								blockClientId: select(
-									'core/block-editor'
-								).getBlockOrder()[ 0 ],
+								blockClientId:
+									select(
+										'core/block-editor'
+									).getBlockOrder()[ 0 ],
 								richTextIdentifier: 'content',
 								range: {
 									start: parseInt( this.state.start, 10 ),
@@ -70,7 +71,7 @@
 				el(
 					Button,
 					{
-						variant: "primary",
+						variant: 'primary',
 						onClick: () => {
 							dispatch(
 								'core/annotations'
@@ -94,7 +95,7 @@
 				PluginSidebar,
 				{
 					name: 'annotations-sidebar',
-					title: __( 'Annotations Sidebar' ),
+					title: __( 'Annotations' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -103,7 +104,7 @@
 				{
 					target: 'annotations-sidebar',
 				},
-				__( 'Annotations Sidebar' )
+				__( 'Annotations' )
 			)
 		);
 	}
diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js
index be1aa491244b66..e591d5256207b6 100644
--- a/packages/e2e-tests/plugins/plugins-api/document-setting.js
+++ b/packages/e2e-tests/plugins/plugins-api/document-setting.js
@@ -2,7 +2,7 @@
 	const el = wp.element.createElement;
 	const __ = wp.i18n.__;
 	const registerPlugin = wp.plugins.registerPlugin;
-	const PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+	const PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
 
 	function MyDocumentSettingPlugin() {
 		return el(
diff --git a/packages/e2e-tests/plugins/plugins-api/error-boundary.js b/packages/e2e-tests/plugins/plugins-api/error-boundary.js
index aca34d5c786ca9..5179555967b653 100644
--- a/packages/e2e-tests/plugins/plugins-api/error-boundary.js
+++ b/packages/e2e-tests/plugins/plugins-api/error-boundary.js
@@ -2,7 +2,7 @@
 	const registerPlugin = wp.plugins.registerPlugin;
 
 	function MyErrorPlugin() {
-		throw new Error('Whoops!');
+		throw new Error( 'Whoops!' );
 	}
 
 	registerPlugin( 'my-error-plugin', {
diff --git a/packages/e2e-tests/plugins/plugins-api/post-status-info.js b/packages/e2e-tests/plugins/plugins-api/post-status-info.js
index 9782de8e5c2561..73f4228a9f3171 100644
--- a/packages/e2e-tests/plugins/plugins-api/post-status-info.js
+++ b/packages/e2e-tests/plugins/plugins-api/post-status-info.js
@@ -2,7 +2,7 @@
 	const el = wp.element.createElement;
 	const __ = wp.i18n.__;
 	const registerPlugin = wp.plugins.registerPlugin;
-	const PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
+	const PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;
 
 	function MyPostStatusInfoPlugin() {
 		return el(
diff --git a/packages/e2e-tests/plugins/plugins-api/preview-menu.js b/packages/e2e-tests/plugins/plugins-api/preview-menu.js
new file mode 100644
index 00000000000000..1aa53b2e8509ac
--- /dev/null
+++ b/packages/e2e-tests/plugins/plugins-api/preview-menu.js
@@ -0,0 +1,14 @@
+( function () {
+	const { __ } = wp.i18n;
+	const { registerPlugin } = wp.plugins;
+	const PluginPreviewMenuItem = wp.editor.PluginPreviewMenuItem;
+	const el = wp.element.createElement;
+
+	function CustomPreviewMenuItem() {
+		return el( PluginPreviewMenuItem, {}, __( 'Custom Preview' ) );
+	}
+
+	registerPlugin( 'custom-preview-menu-item', {
+		render: CustomPreviewMenuItem,
+	} );
+} )();
diff --git a/packages/e2e-tests/plugins/plugins-api/publish-panel.js b/packages/e2e-tests/plugins/plugins-api/publish-panel.js
index 9a9df3f8efc7c0..79e44e0af7d573 100644
--- a/packages/e2e-tests/plugins/plugins-api/publish-panel.js
+++ b/packages/e2e-tests/plugins/plugins-api/publish-panel.js
@@ -3,8 +3,8 @@
 	const Fragment = wp.element.Fragment;
 	const __ = wp.i18n.__;
 	const registerPlugin = wp.plugins.registerPlugin;
-	const PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
-	const PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
+	const PluginPostPublishPanel = wp.editor.PluginPostPublishPanel;
+	const PluginPrePublishPanel = wp.editor.PluginPrePublishPanel;
 
 	function PanelContent() {
 		return el( 'p', {}, __( 'Here is the panel content!' ) );
diff --git a/packages/e2e-tests/plugins/plugins-api/sidebar.js b/packages/e2e-tests/plugins/plugins-api/sidebar.js
index a97a940d846b8a..fe7d76126683f6 100644
--- a/packages/e2e-tests/plugins/plugins-api/sidebar.js
+++ b/packages/e2e-tests/plugins/plugins-api/sidebar.js
@@ -10,8 +10,8 @@
 	const el = wp.element.createElement;
 	const __ = wp.i18n.__;
 	const registerPlugin = wp.plugins.registerPlugin;
-	const PluginSidebar = wp.editPost.PluginSidebar;
-	const PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+	const PluginSidebar = wp.editor.PluginSidebar;
+	const PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
 
 	function SidebarContents() {
 		const postTitle = useSelect( ( select ) =>
@@ -70,7 +70,7 @@
 				PluginSidebar,
 				{
 					name: 'title-sidebar',
-					title: __( 'Plugin sidebar title' ),
+					title: __( 'Plugin title' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -79,7 +79,7 @@
 				{
 					target: 'title-sidebar',
 				},
-				__( 'Plugin sidebar more menu title' )
+				__( 'Plugin more menu title' )
 			)
 		);
 	}
diff --git a/packages/e2e-tests/plugins/test-autocompleter/index.js b/packages/e2e-tests/plugins/test-autocompleter/index.js
index 4f294e55b55cd3..738a86e137297e 100644
--- a/packages/e2e-tests/plugins/test-autocompleter/index.js
+++ b/packages/e2e-tests/plugins/test-autocompleter/index.js
@@ -1,4 +1,4 @@
-(function () {
+( function () {
 	const fruits = {
 		name: 'fruit',
 		// The prefix that triggers this completer
@@ -20,9 +20,7 @@
 		// Declares that the Grapes option is disabled
 		isOptionDisabled: ( option ) => option.name === 'Grapes',
 		// Declares completions should be inserted as abbreviations
-		getOptionCompletion: ( option ) => (
-			option.visual 
-		),
+		getOptionCompletion: ( option ) => option.visual,
 	};
 
 	function duplicateUserMentions( completers ) {
@@ -43,7 +41,7 @@
 			? [ ...completers, fruits, copiedUsers ]
 			: completers;
 	}
-	
+
 	// Adding the filter with a priority of 11
 	// to ensure it fires after the default user mentions are added.
 	wp.hooks.addFilter(
@@ -52,4 +50,4 @@
 		appendTestCompleters,
 		11
 	);
-})()
+} )();
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/classic.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/classic.test.js.snap
deleted file mode 100644
index 92fc0cb47b8db6..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/classic.test.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Classic Should not fail after save/reload 1`] = `"test"`;
-
-exports[`Classic should be inserted 1`] = `"test"`;
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
deleted file mode 100644
index b175d82c81d1ff..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
-"<!-- wp:heading {\\"level\\":4} -->
-<h4>4</h4>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading can be created by prefixing number sign and a space 1`] = `
-"<!-- wp:heading {\\"level\\":3} -->
-<h3>3</h3>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should create a paragraph block above when pressing enter at the start 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2>a</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
-"<!-- wp:heading -->
-<h2>a</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Heading should not work with the list input rule 1`] = `
-"<!-- wp:heading -->
-<h2>1. H</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should work with the format input rules 1`] = `
-"<!-- wp:heading -->
-<h2><code>code</code></h2>
-<!-- /wp:heading -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap
deleted file mode 100644
index af00b7f62f19c0..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/navigation.test.js.snap
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation Creating and restarting converts uncontrolled inner blocks to an entity when modifications are made to the blocks 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A Test Page\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->"`;
-
-exports[`Navigation Placeholder menu selector actions allows a navigation block to be created from existing menus 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\"} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Our team\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"Shop\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-submenu {\\"label\\":\\"Winter apparel\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Chunky socks\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Hideous hats\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Glorious gloves\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Jazzy Jumpers\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-<!-- /wp:navigation-submenu -->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-link {\\"label\\":\\"Shipping\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact Us\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\"} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\"} /-->
-<!-- /wp:navigation-submenu -->"
-`;
-
-exports[`Navigation Placeholder menu selector actions creates an empty navigation block when the selected existing menu is also empty 1`] = `""`;
-
-exports[`Navigation allows an empty navigation block to be created and manually populated using a mixture of internal and external links 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"WP\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/get-in-touch\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
-`;
-
-exports[`Navigation allows pages to be created from the navigation block and their links added to menu 1`] = `"<!-- wp:navigation-link {\\"label\\":\\"A really long page name that will not exist\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"http://localhost:8889/?page_id=[number]\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"`;
-
-exports[`Navigation encodes URL when create block if needed 1`] = `
-"<!-- wp:navigation-link {\\"label\\":\\"wordpress.org/шеллы\\",\\"url\\":\\"https://wordpress.org/%D1%88%D0%B5%D0%BB%D0%BB%D1%8B\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"お問い合わせ\\",\\"type\\":\\"page\\",\\"id\\":[number],\\"url\\":\\"https://this/is/a/test/search/%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->"
-`;
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 67f4ef63b49ab5..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>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/classic.test.js b/packages/e2e-tests/specs/editor/blocks/classic.test.js
deleted file mode 100644
index 1ac9544ceddbbd..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/classic.test.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-import os from 'os';
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import {
-	getEditedPostContent,
-	createNewPost,
-	insertBlock,
-	pressKeyWithModifier,
-	clickBlockToolbarButton,
-	saveDraft,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Classic', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should be inserted', async () => {
-		await insertBlock( 'Classic' );
-		// Wait for TinyMCE to initialise.
-		await page.waitForSelector( '.mce-content-body' );
-		// Ensure there is focus.
-		await page.focus( '.mce-content-body' );
-		await page.keyboard.type( 'test' );
-		// Move focus away.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should insert media, convert to blocks, and undo in one step', async () => {
-		await insertBlock( 'Classic' );
-		// Wait for TinyMCE to initialise.
-		await page.waitForSelector( '.mce-content-body' );
-		// Ensure there is focus.
-		await page.focus( '.mce-content-body' );
-		await page.keyboard.type( 'test' );
-
-		// Click the image button.
-		const addMediaButton = await page.waitForSelector(
-			'div[aria-label^="Add Media"]'
-		);
-		await addMediaButton.click();
-
-		await page.click( '.media-menu-item#menu-item-gallery' );
-
-		// Wait for media modal to appear and upload image.
-		const inputElement = await page.waitForSelector(
-			'.media-modal .moxie-shim input[type=file]'
-		);
-		const testImagePath = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'10x10_e2e_test_image_z9T8jK.png'
-		);
-		const filename = uuid();
-		const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
-		fs.copyFileSync( testImagePath, tmpFileName );
-		await inputElement.uploadFile( tmpFileName );
-
-		// Wait for upload.
-		await page.waitForSelector(
-			`.media-modal li[aria-label="${ filename }"]`
-		);
-
-		// Insert the uploaded image.
-		await page.click( '.media-modal button.media-button-gallery' );
-		await page.click( '.media-modal button.media-button-insert' );
-
-		// Wait for image to be inserted.
-		await page.waitForSelector( '.mce-content-body img' );
-
-		// Move focus away and verify gallery was inserted.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		expect( await getEditedPostContent() ).toMatch(
-			/\[gallery ids=\"\d+\"\]/
-		);
-
-		// Convert to blocks and verify it worked correctly.
-		await clickBlockToolbarButton( 'Convert to blocks', 'content' );
-		await page.waitForSelector( '.wp-block[data-type="core/gallery"]' );
-		expect( await getEditedPostContent() ).toMatch( /<!-- wp:gallery/ );
-
-		// Check that you can undo back to a Classic block gallery in one step.
-		await pressKeyWithModifier( 'primary', 'z' );
-		await page.waitForSelector( 'div[aria-label="Block: Classic"]' );
-		expect( await getEditedPostContent() ).toMatch(
-			/\[gallery ids=\"\d+\"\]/
-		);
-
-		// Convert to blocks again and verify it worked correctly.
-		await clickBlockToolbarButton( 'Convert to blocks', 'content' );
-		await page.waitForSelector( '.wp-block[data-type="core/gallery"]' );
-		expect( await getEditedPostContent() ).toMatch( /<!-- wp:gallery/ );
-	} );
-
-	it( 'Should not fail after save/reload', async () => {
-		// Might move to utils if this becomes useful enough for other tests.
-		const runWithoutCache = async ( cb ) => {
-			try {
-				await page.setCacheEnabled( false );
-				await cb();
-			} finally {
-				await page.setCacheEnabled( true );
-			}
-		};
-
-		await insertBlock( 'Classic' );
-
-		// Wait for TinyMCE to initialise.
-		await page.waitForSelector( '.mce-content-body' );
-
-		// Ensure there is focus.
-		await page.focus( '.mce-content-body' );
-		await page.keyboard.type( 'test' );
-
-		// Move focus away.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
-		// Save.
-		await saveDraft();
-
-		// Reload
-		// Disabling the browser disk cache is needed in order to reproduce the issue
-		// in case it regresses. To test this, revert commit 65c9f74, build and run the test.
-		await runWithoutCache( () => page.reload() );
-
-		const classicBlockSelector = 'div[aria-label^="Block: Classic"]';
-		await page.waitForSelector( classicBlockSelector );
-		await page.focus( classicBlockSelector );
-		expect( console ).not.toHaveErrored();
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
deleted file mode 100644
index 4366bad799bc21..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/cover.test.js
+++ /dev/null
@@ -1,222 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-import os from 'os';
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	openDocumentSettingsSidebar,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-async function upload( selector ) {
-	const inputElement = await page.waitForSelector(
-		`${ selector } input[type="file"]`
-	);
-	const testImagePath = path.join(
-		__dirname,
-		'..',
-		'..',
-		'..',
-		'assets',
-		'10x10_e2e_test_image_z9T8jK.png'
-	);
-	const filename = uuid();
-	const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
-	fs.copyFileSync( testImagePath, tmpFileName );
-	await inputElement.uploadFile( tmpFileName );
-	await page.waitForSelector( `${ selector } img[src$="${ filename }.png"]` );
-	return filename;
-}
-
-describe( 'Cover', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can set overlay color using color picker on block placeholder', async () => {
-		await insertBlock( 'Cover' );
-		// Get the first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		// Get the RGB value of the picked color.
-		const pickedColor = await colorPickerButton.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-		// Create the block by clicking selected color button.
-		await colorPickerButton.click();
-		// Get the block's background dim element.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		// Get the RGB value of the background dim.
-		const dimColor = await backgroundDim.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-
-		expect( pickedColor ).toEqual( dimColor );
-	} );
-
-	it( 'can set background image using image upload on block placeholder', async () => {
-		await insertBlock( 'Cover' );
-		// Create the block using uploaded image.
-		const sourceImageFilename = await upload( '.wp-block-cover' );
-		// Get the block's background image URL.
-		const blockImage = await page.waitForSelector( '.wp-block-cover img' );
-		const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
-
-		expect( blockImageUrl ).toContain( sourceImageFilename );
-	} );
-
-	it( 'dims background image down by 50% by default', async () => {
-		await insertBlock( 'Cover' );
-		// Create the block using uploaded image.
-		await upload( '.wp-block-cover' );
-		// Get the block's background dim color and its opacity.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		const [ backgroundDimColor, backgroundDimOpacity ] =
-			await page.evaluate( ( el ) => {
-				const computedStyle = window.getComputedStyle( el );
-				return [ computedStyle.backgroundColor, computedStyle.opacity ];
-			}, backgroundDim );
-
-		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
-		expect( backgroundDimOpacity ).toBe( '0.5' );
-	} );
-
-	it( 'can have the title edited', async () => {
-		await insertBlock( 'Cover' );
-		// Click first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		await colorPickerButton.click();
-		// Click the title placeholder to put the cursor inside.
-		const coverTitle = await page.waitForSelector(
-			'.wp-block-cover .wp-block-paragraph'
-		);
-		await coverTitle.click();
-		// Type the title.
-		await page.keyboard.type( 'foo' );
-		const coverTitleText = await coverTitle.evaluate(
-			( el ) => el.innerText
-		);
-
-		expect( coverTitleText ).toEqual( 'foo' );
-	} );
-
-	it( 'can be resized using drag & drop', async () => {
-		await insertBlock( 'Cover' );
-		// Close the inserter.
-		await page.click( '.edit-post-header-toolbar__inserter-toggle' );
-		// Open the sidebar.
-		await openDocumentSettingsSidebar();
-		// Choose the first solid color as the background of the cover.
-		await page.click(
-			'.components-circular-option-picker__option-wrapper:first-child button'
-		);
-
-		// Select the cover block.By default the child paragraph gets selected.
-		await page.click(
-			'.edit-post-header-toolbar__document-overview-toggle'
-		);
-		await page.click(
-			'.block-editor-list-view-block__contents-container a'
-		);
-
-		const heightInput = (
-			await page.$x(
-				'//div[./label[contains(text(),"Minimum height of cover")]]/following-sibling::div//input'
-			)
-		 )[ 0 ];
-
-		// Verify the height of the cover is not defined.
-		expect(
-			await page.evaluate( ( { value } ) => value, heightInput )
-		).toBeFalsy();
-
-		const resizeButton = await page.$(
-			'.components-resizable-box__handle-bottom'
-		);
-		const boundingBoxResizeButton = await resizeButton.boundingBox();
-		const coordinatesResizeButton = {
-			x: boundingBoxResizeButton.x + boundingBoxResizeButton.width / 2,
-			y: boundingBoxResizeButton.y + boundingBoxResizeButton.height / 2,
-		};
-
-		// Move the  mouse to the position of the resize button.
-		await page.mouse.move(
-			coordinatesResizeButton.x,
-			coordinatesResizeButton.y
-		);
-
-		// Trigger a mousedown event against the resize button.
-		// Using page.mouse.down does not works because it triggers a global event,
-		// not an event for that element.
-		page.evaluate( ( { x, y } ) => {
-			const element = document.querySelector(
-				'.components-resizable-box__handle-bottom'
-			);
-			event = document.createEvent( 'CustomEvent' );
-			event.initCustomEvent( 'mousedown', true, true, null );
-			event.clientX = x;
-			event.clientY = y;
-			element.dispatchEvent( event );
-		}, coordinatesResizeButton );
-
-		// Move the mouse to resize the cover.
-		await page.mouse.move(
-			coordinatesResizeButton.x,
-			coordinatesResizeButton.y + 100,
-			{ steps: 10 }
-		);
-
-		// Release the mouse.
-		await page.mouse.up();
-
-		// Verify the height of the cover has changed.
-		expect(
-			await page.evaluate(
-				( { value } ) => Number.parseInt( value ),
-				heightInput
-			)
-		).toBeGreaterThan( 100 );
-	} );
-
-	it( 'dims the background image down by 50% when transformed from the Image block', async () => {
-		await insertBlock( 'Image' );
-		// Upload image and transform to the Cover block.
-		const filename = await upload( '.wp-block-image' );
-		await page.waitForSelector(
-			`.wp-block-image img[src$="${ filename }.png"]`
-		);
-
-		// Focus the block wrapper before trying to convert to make sure figcaption toolbar is not obscuring
-		// the block toolbar.
-		await page.focus( '.wp-block-image' );
-		await transformBlockTo( 'Cover' );
-
-		// Get the block's background dim color and its opacity.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		const [ backgroundDimColor, backgroundDimOpacity ] =
-			await page.evaluate( ( el ) => {
-				const computedStyle = window.getComputedStyle( el );
-				return [ computedStyle.backgroundColor, computedStyle.opacity ];
-			}, backgroundDim );
-
-		expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
-		expect( backgroundDimOpacity ).toBe( '0.5' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
deleted file mode 100644
index b4181fce6e99d5..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/heading.test.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	getEditedPostContent,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Heading', () => {
-	const COLOR_ITEM_SELECTOR =
-		'.block-editor-panel-color-gradient-settings__dropdown';
-	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
-	const COLOR_INPUT_FIELD_SELECTOR =
-		'.components-color-picker .components-input-control__input';
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by prefixing number sign and a space', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '### 3' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by prefixing existing content with number signs and a space', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '4' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.type( '#### ' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not work with the list input rule', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## 1. H' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should work with the format input rules', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## `code`' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should create a paragraph block above when pressing enter at the start', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '## a' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should create a paragraph block below when pressing enter at the end', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '## a' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should correctly apply custom colors', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '### Heading' );
-
-		const textColorButton = await page.waitForSelector(
-			COLOR_ITEM_SELECTOR
-		);
-		await textColorButton.click();
-
-		const customTextColorButton = await page.waitForSelector(
-			CUSTOM_COLOR_BUTTON_X_SELECTOR
-		);
-
-		await customTextColorButton.click();
-		await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
-		await page.click( COLOR_INPUT_FIELD_SELECTOR );
-		await pressKeyWithModifier( 'primary', 'A' );
-		await page.keyboard.type( '4b7f4d' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
-		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
-		<!-- /wp:heading -->"
-	` );
-	} );
-
-	it( 'should correctly apply named colors', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## Heading' );
-
-		const textColorButton = await page.waitForSelector(
-			COLOR_ITEM_SELECTOR
-		);
-		await textColorButton.click();
-
-		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
-		const [ colorButton ] = await page.$x( colorButtonSelector );
-		await colorButton.click();
-		await page.waitForXPath(
-			`${ colorButtonSelector }[@aria-pressed='true']`
-		);
-		await page.click( 'h2[data-type="core/heading"]' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
deleted file mode 100644
index 55076bd7180de0..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js
+++ /dev/null
@@ -1,1723 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickButton,
-	clickOnMoreMenuItem,
-	createJSONResponse,
-	createNewPost,
-	createMenu as createClassicMenu,
-	deleteAllMenus as deleteAllClassicMenus,
-	insertBlock,
-	setUpResponseMocking,
-	pressKeyWithModifier,
-	saveDraft,
-	showBlockToolbar,
-	openPreviewPage,
-	ensureSidebarOpened,
-	__experimentalRest as rest,
-	__experimentalBatch as batch,
-	publishPost,
-	createUser,
-	loginUser,
-	deleteUser,
-	switchUserToAdmin,
-	clickBlockToolbarButton,
-	openListView,
-	getListViewBlocks,
-} from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import menuItemsFixture from '../fixtures/menu-items-request-fixture.json';
-
-const POSTS_ENDPOINT = '/wp/v2/posts';
-const PAGES_ENDPOINT = '/wp/v2/pages';
-const DRAFT_PAGES_ENDPOINT = [ PAGES_ENDPOINT, { status: 'draft' } ];
-const NAVIGATION_MENUS_ENDPOINT = '/wp/v2/navigation';
-// todo: consolidate with logic found in navigation-editor tests
-// https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-tests/specs/experiments/navigation-editor.test.js#L71
-const REST_PAGES_ROUTES = [
-	'/wp/v2/pages',
-	`rest_route=${ encodeURIComponent( '/wp/v2/pages' ) }`,
-];
-let uniqueId = 0;
-
-/**
- * Determines if a given URL matches any of a given collection of
- * routes (expressed as substrings).
- *
- * @param {string} reqUrl the full URL to be tested for matches.
- * @param {Array}  routes array of strings to match against the URL.
- */
-function matchUrlToRoute( reqUrl, routes ) {
-	return routes.some( ( route ) => reqUrl.includes( route ) );
-}
-
-function getEndpointMocks( matchingRoutes, responsesByMethod ) {
-	return [ 'GET', 'POST', 'DELETE', 'PUT' ].reduce( ( mocks, restMethod ) => {
-		if ( responsesByMethod[ restMethod ] ) {
-			return [
-				...mocks,
-				{
-					match: ( request ) =>
-						matchUrlToRoute( request.url(), matchingRoutes ) &&
-						request.method() === restMethod,
-					onRequestMatch: createJSONResponse(
-						responsesByMethod[ restMethod ]
-					),
-				},
-			];
-		}
-
-		return mocks;
-	}, [] );
-}
-
-function getPagesMocks( responsesByMethod ) {
-	return getEndpointMocks( REST_PAGES_ROUTES, responsesByMethod );
-}
-
-async function mockSearchResponse( items ) {
-	const mappedItems = items.map( ( { title, slug }, index ) => ( {
-		id: index + 1,
-		subtype: 'page',
-		title,
-		type: 'post',
-		url: `https://this/is/a/test/search/${ slug }`,
-	} ) );
-	await setUpResponseMocking( [
-		{
-			match: ( request ) =>
-				request.url().includes( `rest_route` ) &&
-				request.url().includes( `search` ),
-			onRequestMatch: createJSONResponse( mappedItems ),
-		},
-		...getPagesMocks( {
-			GET: [
-				{
-					type: 'page',
-					id: 1,
-					link: 'https://example.com/1',
-					title: {
-						rendered: 'My page',
-					},
-				},
-			],
-		} ),
-	] );
-}
-
-async function forceSelectNavigationBlock() {
-	const navBlock = await waitForBlock( 'Navigation' );
-
-	if ( ! navBlock ) {
-		return;
-	}
-
-	await page.evaluate( () => {
-		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
-		const navigationBlock = blocks.find(
-			( block ) => block.name === 'core/navigation'
-		);
-
-		if ( ! navigationBlock ) {
-			return;
-		}
-
-		return wp.data
-			.dispatch( 'core/block-editor' )
-			.selectBlock( navigationBlock?.clientId, 0 );
-	} );
-}
-
-/**
- * Interacts with the LinkControl to perform a search and select a returned suggestion
- *
- * @param {Object} link       link object to be tested
- * @param {string} link.url   What will be typed in the search input
- * @param {string} link.label What the resulting label will be in the creating Link Block after the block is created.
- * @param {string} link.type  What kind of suggestion should be clicked, ie. 'url', 'create', or 'entity'
- */
-async function updateActiveNavigationLink( { url, label, type } ) {
-	const typeClasses = {
-		create: 'block-editor-link-control__search-create',
-		entity: 'is-entity',
-		url: 'is-url',
-	};
-
-	if ( url ) {
-		const input = await page.waitForSelector(
-			'input[placeholder="Search or type url"]'
-		);
-		await input.type( url );
-
-		const suggestionPath = `//button[contains(@class, 'block-editor-link-control__search-item') and contains(@class, '${ typeClasses[ type ] }') and contains(., "${ url }")]`;
-
-		// Wait for the autocomplete suggestion item to appear.
-		await page.waitForXPath( suggestionPath );
-		// Set the suggestion.
-		const suggestion = await page.waitForXPath( suggestionPath );
-
-		// Select it (so we're clicking the right one, even if it's further down the list).
-		await suggestion.click();
-	}
-
-	if ( label ) {
-		// Wait for rich text editor input to be focused before we start typing the label.
-		await page.waitForSelector( ':focus.rich-text' );
-
-		// With https://github.com/WordPress/gutenberg/pull/19686, we're auto-selecting the label if the label is URL-ish.
-		// In this case, it means we have to select and delete the label if it's _not_ the url.
-		if ( label !== url ) {
-			// Ideally this would be `await pressKeyWithModifier( 'primary', 'a' )`
-			// to select all text like other tests do.
-			// Unfortunately, these tests don't seem to pass on Travis CI when
-			// using that approach, while using `Home` and `End` they do pass.
-			await page.keyboard.press( 'Home' );
-			await pressKeyWithModifier( 'shift', 'End' );
-			await page.keyboard.press( 'Backspace' );
-		}
-
-		await page.keyboard.type( label );
-	}
-}
-
-async function selectClassicMenu( optionText ) {
-	const navigationSelector = await page.waitForXPath(
-		"//button[text()='Select Menu']"
-	);
-	await navigationSelector.click();
-
-	const theOption = await page.waitForXPath(
-		'//button[contains(., "' + optionText + '")]'
-	);
-	await theOption.click();
-
-	await page.waitForResponse(
-		( response ) =>
-			response.url().includes( 'menu-items' ) && response.status() === 200
-	);
-}
-
-/**
- * Delete all items for the given REST resources using the REST API.
- *
- * @param {*} endpoints The endpoints of the resources to delete.
- */
-async function deleteAll( endpoints ) {
-	for ( const endpoint of endpoints ) {
-		const defaultArgs = { per_page: -1 };
-		const isArrayEndpoint = Array.isArray( endpoint );
-		const path = isArrayEndpoint ? endpoint[ 0 ] : endpoint;
-		const args = isArrayEndpoint
-			? { ...defaultArgs, ...endpoint[ 1 ] }
-			: defaultArgs;
-
-		const items = await rest( {
-			path: addQueryArgs( path, args ),
-		} );
-
-		for ( const item of items ) {
-			await rest( {
-				method: 'DELETE',
-				path: `${ path }/${ item.id }?force=true`,
-			} );
-		}
-	}
-}
-
-/**
- * Replace unique ids in nav block content, since these won't be consistent
- * between test runs.
- *
- * @param {string} content HTML block content, either raw or rendered.
- *
- * @return {string} HTML block content with stripped ids
- */
-function stripPageIds( content ) {
-	return content
-		.replace( /page_id=\d+/gm, 'page_id=[number]' )
-		.replace( /"id":\d+/gm, '"id":[number]' );
-}
-
-/**
- * Check navigation block content by fetching the navigation menu.
- *
- * @return {string} Menu content.
- */
-async function getNavigationMenuRawContent() {
-	const menuRef = await page.evaluate( () => {
-		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
-		const navigationBlock = blocks.find(
-			( block ) => block.name === 'core/navigation'
-		);
-
-		return navigationBlock.attributes.ref;
-	} );
-
-	if ( ! menuRef ) {
-		throw 'getNavigationMenuRawContent was unable to find a ref attribute on the first navigation block';
-	}
-
-	const response = await rest( {
-		method: 'GET',
-		path: `/wp/v2/navigation/${ menuRef }?context=edit`,
-	} );
-
-	return stripPageIds( response.content.raw );
-}
-
-async function waitForBlock( blockName ) {
-	const blockSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: ${ blockName }"]`;
-
-	// Wait for a Submenu block before making assertion.
-	return page.waitForSelector( blockSelector );
-}
-
-// Disable reason - these tests are to be re-written.
-// Skipped temporarily due to issues with GH actions: https://wordpress.slack.com/archives/C02QB2JS7/p1661331673166269.
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip( 'Navigation', () => {
-	const contributorUsername = `contributoruser_${ ++uniqueId }`;
-	let contributorPassword;
-
-	beforeAll( async () => {
-		// Creation of the contributor user **MUST** be at the top level describe block
-		// otherwise this test will become unstable. This action only happens once
-		// so there is no huge performance hit.
-		contributorPassword = await createUser( contributorUsername, {
-			role: 'contributor',
-		} );
-	} );
-
-	beforeEach( async () => {
-		await deleteAll( [
-			POSTS_ENDPOINT,
-			PAGES_ENDPOINT,
-			DRAFT_PAGES_ENDPOINT,
-			NAVIGATION_MENUS_ENDPOINT,
-		] );
-		await deleteAllClassicMenus();
-	} );
-
-	afterEach( async () => {
-		await setUpResponseMocking( [] );
-	} );
-
-	afterAll( async () => {
-		await deleteAll( [
-			POSTS_ENDPOINT,
-			PAGES_ENDPOINT,
-			DRAFT_PAGES_ENDPOINT,
-			NAVIGATION_MENUS_ENDPOINT,
-		] );
-		await deleteAllClassicMenus();
-
-		// As per the creation in the beforeAll() above, this
-		// action must be done at the root level describe() block.
-		await deleteUser( contributorUsername );
-	} );
-
-	describe( 'loading states', () => {
-		it( 'does not show a loading indicator if there is no ref to a Navigation post and Nav Menus have loaded', async () => {
-			await createNewPost();
-
-			// Insert an empty block to trigger resolution of Nav Menu items.
-			await insertBlock( 'Navigation' );
-			await waitForBlock( 'Navigation' );
-
-			await page.waitForXPath( "//button[text()='Select Menu']" );
-
-			// Now we have Nav Menu items resolved. Continue to assert.
-			await clickOnMoreMenuItem( 'Code editor' );
-
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-
-			// Simulate block behaviour when loading a page containing an unconfigured Nav block
-			// that is not selected.
-			await codeEditorInput.click();
-			const markup = '<!-- wp:navigation /-->';
-			await page.keyboard.type( markup );
-			await clickButton( 'Exit code editor' );
-
-			// Wait for block to render...
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			// Test specifically for the primary loading indicator because a spinner also exists
-			// in the hidden Placeholder component when it is loading.
-			const loadingSpinner = await navBlock.$(
-				'.wp-block-navigation__loading-indicator.components-spinner'
-			);
-
-			// We should not see the loading state if the block has not been configured and is empty.
-			expect( loadingSpinner ).toBeNull();
-		} );
-
-		// Skip reason: This test is quite flaky recently.
-		// See https://github.com/WordPress/gutenberg/issues/39231.
-		// eslint-disable-next-line jest/no-disabled-tests
-		it.skip( 'shows a loading indicator whilst ref resolves to Navigation post items', async () => {
-			const testNavId = 1;
-
-			let resolveNavigationRequest;
-
-			// Mock the request for the single Navigation post in order to fully
-			// control the resolution of the request. This will enable the ability
-			// to assert on how the UI responds during the API resolution without
-			// relying on variable factors such as network conditions.
-			await setUpResponseMocking( [
-				{
-					match: ( request ) => {
-						return decodeURIComponent( request.url() ).includes(
-							`navigation/`
-						);
-					},
-					onRequestMatch: ( request ) => {
-						// The Promise simulates a REST API request whose resolultion
-						// the test has full control over.
-						return new Promise( ( resolve ) => {
-							// Assign the resolution function to the var in the
-							// upper scope to afford control over resolution.
-							resolveNavigationRequest = resolve;
-
-							// Call request.continue() is required to fully resolve the mock.
-						} ).then( () => request.continue() );
-					},
-				},
-			] );
-			/*
-Expected mock function not to be called but it was called with: ["POST", "http://localhost:8889/wp-admin/admin-ajax.php", "http://localhost:8889/wp-admin/admin-ajax.php"],["GET", "http://localhost:8889/wp-admin/post-new.php", "http://localhost:8889/wp-admin/post-new.php"],["GET", "http://localhost:8889/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.16", "http://localhost:8889/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.16"],["GET", "http://localhost:8889/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=6.1-alpha-53506", "http://localhost:8889/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=6.1-alpha-53506"],["GET", "http://localhost:8889/wp-includes/js/imgareaselect/imgareaselect.css?ver=0.9.8", "http://localhost:8889/wp-includes/js/imgareaselect/imgareaselect.css?ver=0.9.8"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/components/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/components/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-editor/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-editor/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/nux/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/nux/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/reusable-blocks/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/editor/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/editor/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/reset.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/reset.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/edit-post/classic.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/edit-post/classic.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/editor.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/edit-post/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/edit-post/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-directory/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-directory/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/format-library/style.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/format-library/style.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css?ver=1.6", "http://localhost:8889/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css?ver=1.6"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1655290402", "http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1655290402"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/blob/index.min.js?ver=bccaf46e493181a8db9a", "http://localhost:8889/wp-content/plugins/gutenberg/build/blob/index.min.js?ver=bccaf46e493181a8db9a"],["GET", "http://localhost:8889/wp-content/plugins/gutenberg/build/autop/index.min.js?ver=b1a2f86387be4fa46f89", "http://loca
- */
-			await createNewPost();
-			await clickOnMoreMenuItem( 'Code editor' );
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-			await codeEditorInput.click();
-
-			// The ID used in this `ref` is that which we mock in the request
-			// above to ensure we can control the resolution of the Navigation post.
-			const markup = `<!-- wp:navigation {"ref":${ testNavId }} /-->`;
-			await page.keyboard.type( markup );
-			await clickButton( 'Exit code editor' );
-
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			// Check for the spinner to be present whilst loading.
-			await navBlock.waitForSelector( '.components-spinner' );
-
-			// Resolve the controlled mocked API request.
-			if ( typeof resolveNavigationRequest === 'function' ) {
-				resolveNavigationRequest();
-			}
-		} );
-
-		it( 'shows a loading indicator whilst empty Navigation menu is being created', async () => {
-			const testNavId = 1;
-
-			let resolveNavigationRequest;
-
-			// Mock the request for the single Navigation post in order to fully
-			// control the resolution of the request. This will enable the ability
-			// to assert on how the UI responds during the API resolution without
-			// relying on variable factors such as network conditions.
-			await setUpResponseMocking( [
-				{
-					match: ( request ) =>
-						request.url().includes( `rest_route` ) &&
-						request.url().includes( `navigation` ) &&
-						request.url().includes( `${ testNavId }?` ),
-					onRequestMatch: ( request ) => {
-						// The Promise simulates a REST API request whose resolultion
-						// the test has full control over.
-						return new Promise( ( resolve ) => {
-							// Assign the resolution function to the var in the
-							// upper scope to afford control over resolution.
-							resolveNavigationRequest = resolve;
-
-							// Call request.continue() is required to fully resolve the mock.
-						} ).then( () => request.continue() );
-					},
-				},
-			] );
-
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			// Create empty Navigation block with no items
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			// Check for the spinner to be present whilst loading.
-			await navBlock.waitForSelector( '.components-spinner' );
-
-			// Resolve the controlled mocked API request.
-			if ( typeof resolveNavigationRequest === 'function' ) {
-				resolveNavigationRequest();
-			}
-		} );
-	} );
-
-	describe( 'Placeholder', () => {
-		describe( 'fallback states', () => {
-			it( 'shows page list on insertion of block', async () => {
-				await createNewPost();
-				await insertBlock( 'Navigation' );
-				await waitForBlock( 'Page List' );
-			} );
-
-			it( 'shows placeholder preview when block with no menu items is not selected', async () => {
-				await createNewPost();
-				await insertBlock( 'Navigation' );
-
-				const navigationSelector = await page.waitForXPath(
-					"//button[text()='Select Menu']"
-				);
-				await navigationSelector.click();
-
-				const createNewMenuButton = await page.waitForXPath(
-					'//button[contains(., "Create new menu")]'
-				);
-				await createNewMenuButton.click();
-
-				// Wait for Navigation creation to complete.
-				await page.waitForXPath(
-					'//*[contains(@class, "components-snackbar")]/*[text()="Navigation Menu successfully created."]'
-				);
-
-				// Wait for block to resolve
-				let navBlock = await waitForBlock( 'Navigation' );
-
-				// Deselect the Nav block by inserting a new block at the root level
-				// outside of the Nav block.
-				await insertBlock( 'Paragraph' );
-
-				// Acquire fresh reference to block
-				navBlock = await waitForBlock( 'Navigation' );
-
-				// Check Placeholder Preview is visible.
-				await navBlock.waitForSelector(
-					'.wp-block-navigation-placeholder__preview',
-					{ visible: true }
-				);
-
-				// Check the block's appender is not visible.
-				const blockAppender = await navBlock.$(
-					'.block-list-appender'
-				);
-
-				expect( blockAppender ).toBeNull();
-			} );
-		} );
-
-		describe( 'menu selector actions', () => {
-			it( 'allows a navigation block to be created from existing menus', async () => {
-				await createClassicMenu( { name: 'Test Menu 1' } );
-				await createClassicMenu(
-					{ name: 'Test Menu 2' },
-					menuItemsFixture
-				);
-
-				await createNewPost();
-				await insertBlock( 'Navigation' );
-				await selectClassicMenu( 'Test Menu 2' );
-
-				// Wait for a navigation link block before making assertion.
-				await page.waitForSelector(
-					'*[aria-label="Block: Custom Link"]'
-				);
-				expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-			} );
-
-			it( 'creates an empty navigation block when the selected existing menu is also empty', async () => {
-				await createClassicMenu( { name: 'Test Menu 1' } );
-				await createNewPost();
-				await insertBlock( 'Navigation' );
-				await selectClassicMenu( 'Test Menu 1' );
-
-				await page.waitForNetworkIdle();
-
-				// Wait for the appender so that we know the navigation menu was created.
-				await page.waitForSelector(
-					'nav[aria-label="Block: Navigation"] button[aria-label="Add block"]'
-				);
-				expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-			} );
-
-			it( 'does not display the options to create from existing menus if there are no existing menus', async () => {
-				await createNewPost();
-
-				await insertBlock( 'Navigation' );
-
-				const navigationSelector = await page.waitForXPath(
-					"//button[text()='Select Menu']"
-				);
-				await navigationSelector.click();
-
-				await page.waitForXPath(
-					'//button[contains(., "Create new menu")]'
-				);
-
-				await page.waitForSelector( '.components-menu-group' );
-
-				const placeholderActionsLength = await page.$$eval(
-					'.components-menu-group',
-					( els ) => els.length
-				);
-
-				// Should only be showing "Create new menu".
-				expect( placeholderActionsLength ).toEqual( 1 );
-			} );
-		} );
-	} );
-
-	it( 'allows an empty navigation block to be created and manually populated using a mixture of internal and external links', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		await showBlockToolbar();
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Add a link to the Link block.
-		await updateActiveNavigationLink( {
-			url: 'https://wordpress.org',
-			label: 'WP',
-			type: 'url',
-		} );
-
-		// Select the parent navigation block to show the appender.
-		await showBlockToolbar();
-		await page.click( 'button[aria-label="Select Navigation"]' );
-
-		const appenderAgain = await page.waitForSelector(
-			'.wp-block-navigation .block-list-appender'
-		);
-		await appenderAgain.click();
-
-		// After adding a new block, search input should be shown immediately.
-		// Verify that Escape would close the popover.
-		// Regression: https://github.com/WordPress/gutenberg/pull/19885
-		// Wait for URL input to be focused.
-		await page.waitForSelector(
-			'input.block-editor-url-input__input:focus'
-		);
-
-		// After adding a new block, search input should be shown immediately.
-		const isInURLInput = await page.evaluate(
-			() =>
-				!! document.activeElement.matches(
-					'input.block-editor-url-input__input'
-				)
-		);
-		expect( isInURLInput ).toBe( true );
-		await page.keyboard.press( 'Escape' );
-
-		// Click the link placeholder.
-		const placeholder = await page.waitForSelector(
-			'.wp-block-navigation-link__placeholder'
-		);
-		await placeholder.click();
-
-		// For the second nav link block use an existing internal page.
-		// Mock the api response so that it's consistent.
-		await mockSearchResponse( [
-			{ title: 'Get in Touch', slug: 'get-in-touch' },
-		] );
-
-		// Add a link to the default Link block.
-		await updateActiveNavigationLink( {
-			url: 'Get in Touch',
-			label: 'Contact',
-			type: 'entity',
-		} );
-
-		await publishPost();
-
-		// Expect a Navigation Block with two Links in the snapshot.
-		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-	} );
-
-	it( 'encodes URL when create block if needed', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Add a link to the Link block.
-		await updateActiveNavigationLink( {
-			url: 'https://wordpress.org/шеллы',
-			type: 'url',
-		} );
-
-		await showBlockToolbar();
-		await page.click( 'button[aria-label="Select Navigation"]' );
-
-		const appenderAgain = await page.waitForSelector(
-			'.wp-block-navigation .block-list-appender'
-		);
-		await appenderAgain.click();
-
-		// Wait for URL input to be focused.
-		await page.waitForSelector(
-			'input.block-editor-url-input__input:focus'
-		);
-
-		// After adding a new block, search input should be shown immediately.
-		const isInURLInput = await page.evaluate(
-			() =>
-				!! document.activeElement.matches(
-					'input.block-editor-url-input__input'
-				)
-		);
-		expect( isInURLInput ).toBe( true );
-		await page.keyboard.press( 'Escape' );
-
-		// Click the link placeholder.
-		const placeholder = await page.waitForSelector(
-			'.wp-block-navigation-link__placeholder'
-		);
-		await placeholder.click();
-
-		// Mocked response for internal page.
-		// We are encoding the slug/url in order
-		// that we can assert it is not double encoded by the block.
-		await mockSearchResponse( [
-			{ title: 'お問い合わせ', slug: encodeURI( 'お問い合わせ' ) },
-		] );
-
-		// Select the mocked internal page above.
-		await updateActiveNavigationLink( {
-			url: 'お問い合わせ',
-			type: 'entity',
-		} );
-
-		await publishPost();
-
-		// Expect a Navigation Block with two Links in the snapshot.
-		// The 2nd link should not be double encoded.
-		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-	} );
-
-	it( 'allows pages to be created from the navigation block and their links added to menu', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Wait for URL input to be focused
-		// Insert name for the new page.
-		const pageTitle = 'A really long page name that will not exist';
-		const input = await page.waitForSelector(
-			'input.block-editor-url-input__input:focus'
-		);
-		await input.type( pageTitle );
-
-		// When creating a page, the URLControl makes a request to the
-		// url-details endpoint to fetch information about the page.
-		// Because the draft is inaccessible publicly, this request
-		// returns a 404 response. Wait for the response and expect
-		// the error to have occurred.
-		const createPageButton = await page.waitForSelector(
-			'.block-editor-link-control__search-create'
-		);
-		const responsePromise = page.waitForResponse(
-			( response ) =>
-				response.url().includes( 'url-details' ) &&
-				response.status() === 404
-		);
-		const createPagePromise = createPageButton.click();
-		await Promise.all( [ responsePromise, createPagePromise ] );
-
-		// Creating a draft is async, so wait for a sign of completion. In this
-		// case the link that shows in the URL popover once a link is added.
-		await page.waitForXPath(
-			`//a[contains(@class, "block-editor-link-control__search-item-title") and contains(., "${ pageTitle }")]`
-		);
-
-		await publishPost();
-
-		// Expect a Navigation Block with a link for "A really long page name that will not exist".
-		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-		expect( console ).toHaveErroredWith(
-			'Failed to load resource: the server responded with a status of 404 (Not Found)'
-		);
-	} );
-
-	it( 'correctly decodes special characters in the created Page title for display', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Wait for URL input to be focused
-		// Insert name for the new page.
-		const pageTitle = 'This & That & Some < other > chars';
-		const input = await page.waitForSelector(
-			'input.block-editor-url-input__input:focus'
-		);
-		await input.type( pageTitle );
-
-		// When creating a page, the URLControl makes a request to the
-		// url-details endpoint to fetch information about the page.
-		// Because the draft is inaccessible publicly, this request
-		// returns a 404 response. Wait for the response and expect
-		// the error to have occurred.
-		const createPageButton = await page.waitForSelector(
-			'.block-editor-link-control__search-create'
-		);
-		const responsePromise = page.waitForResponse(
-			( response ) =>
-				response.url().includes( 'url-details' ) &&
-				response.status() === 404
-		);
-		const createPagePromise = createPageButton.click();
-		await Promise.all( [ responsePromise, createPagePromise ] );
-
-		await waitForBlock( 'Navigation' );
-
-		const innerLinkBlock = await waitForBlock( 'Custom Link' );
-
-		const linkText = await innerLinkBlock.$eval(
-			'[aria-label="Navigation link text"]',
-			( element ) => {
-				return element.innerText;
-			}
-		);
-
-		expect( linkText ).toContain( pageTitle );
-
-		expect( console ).toHaveErroredWith(
-			'Failed to load resource: the server responded with a status of 404 (Not Found)'
-		);
-	} );
-
-	it( 'renders buttons for the submenu opener elements when the block is set to open on click instead of hover', async () => {
-		await createClassicMenu( { name: 'Test Menu 2' }, menuItemsFixture );
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-		await selectClassicMenu( 'Test Menu 2' );
-
-		await ensureSidebarOpened();
-		const openOnClickButton = await page.waitForXPath(
-			'//label[contains(text(),"Open on click")]'
-		);
-
-		await openOnClickButton.click();
-
-		await saveDraft();
-
-		// Scope element selector to the Editor's "Content" region as otherwise it picks up on
-		// block previews.
-		const navSubmenuSelector =
-			'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
-
-		await page.waitForSelector( navSubmenuSelector );
-
-		const navSubmenusLength = await page.$$eval(
-			navSubmenuSelector,
-			( els ) => els.length
-		);
-
-		const navButtonTogglesSelector =
-			'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"] button.wp-block-navigation-item__content';
-
-		await page.waitForSelector( navButtonTogglesSelector );
-
-		const navButtonTogglesLength = await page.$$eval(
-			navButtonTogglesSelector,
-			( els ) => els.length
-		);
-
-		// Assert the correct number of button toggles are present.
-		expect( navSubmenusLength ).toEqual( navButtonTogglesLength );
-	} );
-
-	it( 'Shows the quick inserter when the block contains non-navigation specific blocks', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Add a link to the Link block.
-		await updateActiveNavigationLink( {
-			url: 'https://wordpress.org',
-			label: 'WP',
-			type: 'url',
-		} );
-
-		// Now add a different block type.
-		await insertBlock( 'Site Title' );
-
-		await showBlockToolbar();
-		await page.click( 'button[aria-label="Select Navigation"]' );
-		const appenderAgain = await page.waitForSelector(
-			'.wp-block-navigation .block-list-appender'
-		);
-		await appenderAgain.click();
-
-		const quickInserter = await page.waitForSelector(
-			'.block-editor-inserter__quick-inserter'
-		);
-
-		// Expect the quick inserter to be truthy, which it will be because we
-		// waited for it. It's nice to end a test with an assertion though.
-		expect( quickInserter ).toBeTruthy();
-	} );
-
-	describe( 'Creating and restarting', () => {
-		const NAV_ENTITY_SELECTOR =
-			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
-
-		it( 'respects the nesting level', async () => {
-			await createNewPost();
-
-			await insertBlock( 'Navigation' );
-
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await appender.click();
-
-			await clickOnMoreMenuItem( 'Code editor' );
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-
-			let code = await codeEditorInput.evaluate( ( el ) => el.value );
-			code = code.replace( '} /-->', ',"maxNestingLevel":0} /-->' );
-			await codeEditorInput.evaluate(
-				( el, newCode ) => ( el.value = newCode ),
-				code
-			);
-			await clickButton( 'Exit code editor' );
-
-			const blockAppender = navBlock.$( '.block-list-appender' );
-
-			expect( blockAppender ).not.toBeNull();
-
-			// Check the Submenu block is no longer present.
-			const navSubmenuSelector =
-				'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
-			const submenuBlock = await page.$( navSubmenuSelector );
-
-			expect( submenuBlock ).toBeFalsy();
-		} );
-
-		it( 'retains initial uncontrolled inner blocks whilst there are no modifications to those blocks', async () => {
-			await createNewPost();
-			await clickOnMoreMenuItem( 'Code editor' );
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-			await codeEditorInput.click();
-
-			const markup =
-				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
-			await page.keyboard.type( markup );
-			await clickButton( 'Exit code editor' );
-
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			// Select the block
-			await navBlock.click();
-
-			const hasUncontrolledInnerBlocks = await page.evaluate( () => {
-				const blocks = wp.data
-					.select( 'core/block-editor' )
-					.getBlocks();
-				return !! blocks[ 0 ]?.innerBlocks?.length;
-			} );
-
-			expect( hasUncontrolledInnerBlocks ).toBe( true );
-		} );
-
-		it( 'converts uncontrolled inner blocks to an entity when modifications are made to the blocks', async () => {
-			await rest( {
-				method: 'POST',
-				path: `/wp/v2/pages/`,
-				data: {
-					status: 'publish',
-					title: 'A Test Page',
-					content: 'Hello world',
-				},
-			} );
-
-			// Insert 'old-school' inner blocks via the code editor.
-			await createNewPost();
-			await clickOnMoreMenuItem( 'Code editor' );
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-			await codeEditorInput.click();
-			const markup =
-				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
-			await page.keyboard.type( markup );
-
-			await clickButton( 'Exit code editor' );
-
-			const navBlock = await waitForBlock( 'Navigation' );
-
-			await navBlock.click();
-
-			// Wait for the Page List to have resolved and render as a `<ul>`.
-			await page.waitForSelector(
-				`[aria-label="Editor content"][role="region"] ul[aria-label="Block: Page List"]`
-			);
-
-			// Select the Page List block.
-			await openListView();
-
-			const navExpander = await page.waitForXPath(
-				`//a[.//span[text()='Navigation']]/span[contains(@class, 'block-editor-list-view__expander')]`
-			);
-
-			await navExpander.click();
-
-			const pageListBlock = (
-				await getListViewBlocks( 'Page List' )
-			 )[ 0 ];
-
-			await pageListBlock.click();
-
-			// Modify the uncontrolled inner blocks by converting Page List.
-			await clickBlockToolbarButton( 'Edit' );
-
-			// Must wait for button to be enabled.
-			const convertButton = await page.waitForXPath(
-				`//button[not(@disabled) and text()="Convert"]`
-			);
-
-			await convertButton.click();
-
-			// Wait for new Nav Menu entity to be created as a result of the modification to inner blocks.
-			await page.waitForXPath(
-				`//*[contains(@class, 'components-snackbar__content')][ text()="New Navigation Menu created." ]`
-			);
-
-			await publishPost();
-
-			// Check that the wp_navigation post exists and has the page list block.
-			expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-		} );
-
-		it( 'only updates a single entity currently linked with the block', async () => {
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await appender.click();
-
-			// Confirm that the menu entity was updated.
-			const publishPanelButton = await page.waitForSelector(
-				'.editor-post-publish-panel__toggle:not([aria-disabled="true"])'
-			);
-			await publishPanelButton.click();
-
-			await page.waitForXPath( NAV_ENTITY_SELECTOR );
-			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
-
-			// Publish the post.
-			const entitySaveButton = await page.waitForSelector(
-				'.editor-entities-saved-states__save-button'
-			);
-			await entitySaveButton.click();
-			const publishButton = await page.waitForSelector(
-				'.editor-post-publish-button:not([aria-disabled="true"])'
-			);
-			await publishButton.click();
-
-			// A success notice should show up.
-			await page.waitForXPath(
-				`//*[contains(@class, 'components-snackbar__content')][ text()="Post published." ]`
-			);
-
-			// Now try inserting another Link block via the quick inserter.
-			// await page.click( 'nav[aria-label="Block: Navigation"]' );
-			await forceSelectNavigationBlock();
-
-			const newNavigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await newNavigationSelector.click();
-
-			const newCreateNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await newCreateNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const newAppender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await newAppender.click();
-
-			// Confirm that only the last menu entity was updated.
-			const publishPanelButton2 = await page.waitForSelector(
-				'.editor-post-publish-button__button:not([aria-disabled="true"])'
-			);
-			await publishPanelButton2.click();
-
-			await page.waitForXPath( NAV_ENTITY_SELECTOR );
-			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
-		} );
-	} );
-
-	it( 'applies accessible label to block element', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const appender = await page.waitForSelector(
-			'.wp-block-navigation .block-editor-button-block-appender'
-		);
-		await appender.click();
-
-		// Add a link to the Link block.
-		await updateActiveNavigationLink( {
-			url: 'https://wordpress.org',
-			label: 'WP',
-			type: 'url',
-		} );
-
-		const previewPage = await openPreviewPage();
-		await previewPage.bringToFront();
-		await previewPage.waitForNetworkIdle();
-
-		const isAccessibleLabelPresent = await previewPage.$(
-			'nav[aria-label="Navigation"]'
-		);
-
-		expect( isAccessibleLabelPresent ).toBeTruthy();
-	} );
-
-	it( 'does not load the frontend script if no navigation blocks are present', async () => {
-		await createNewPost();
-		await insertBlock( 'Paragraph' );
-		await page.waitForSelector( 'p[data-title="Paragraph"]:focus' );
-		await page.keyboard.type( 'Hello' );
-
-		const previewPage = await openPreviewPage();
-		await previewPage.bringToFront();
-		await previewPage.waitForNetworkIdle();
-
-		const isScriptLoaded = await previewPage.evaluate(
-			() =>
-				null !==
-				document.querySelector(
-					'script[src*="navigation/view.min.js"]'
-				)
-		);
-
-		expect( isScriptLoaded ).toBe( false );
-	} );
-
-	it( 'loads the frontend script only once even when multiple navigation blocks are present', async () => {
-		await createNewPost();
-		await insertBlock( 'Navigation' );
-
-		const navigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await navigationSelector.click();
-
-		const createNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await createNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		await insertBlock( 'Navigation' );
-
-		const newNavigationSelector = await page.waitForXPath(
-			"//button[text()='Select Menu']"
-		);
-		await newNavigationSelector.click();
-
-		const newCreateNewMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create new menu")]'
-		);
-		await newCreateNewMenuButton.click();
-
-		await page.waitForNetworkIdle();
-
-		// Await "success" notice.
-		await page.waitForXPath(
-			'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-		);
-
-		const previewPage = await openPreviewPage();
-		await previewPage.bringToFront();
-		await previewPage.waitForNetworkIdle();
-
-		const tagCount = await previewPage.evaluate(
-			() =>
-				document.querySelectorAll(
-					'script[src*="navigation/view.min.js"]'
-				).length
-		);
-
-		expect( tagCount ).toBe( 1 );
-	} );
-
-	describe( 'Submenus', () => {
-		it( 'shows button which converts submenu to link when submenu is not-populated (empty)', async () => {
-			const navSubmenuSelector = `[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]`;
-
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await appender.click();
-
-			await clickBlockToolbarButton( 'Add submenu' );
-
-			await waitForBlock( 'Submenu' );
-
-			// Revert the Submenu back to a Navigation Link block.
-			await clickBlockToolbarButton( 'Convert to Link' );
-
-			// Check the Submenu block is no longer present.
-			const submenuBlock = await page.$( navSubmenuSelector );
-
-			expect( submenuBlock ).toBeFalsy();
-		} );
-
-		it( 'shows button to convert submenu to link in disabled state when submenu is populated', async () => {
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await appender.click();
-
-			await updateActiveNavigationLink( {
-				url: 'https://make.wordpress.org/core/',
-				label: 'Menu item #1',
-				type: 'url',
-			} );
-
-			await clickBlockToolbarButton( 'Add submenu' );
-
-			await waitForBlock( 'Submenu' );
-
-			// Add a Link block first.
-			const SubAppender = await page.waitForSelector(
-				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
-			);
-
-			await SubAppender.click();
-
-			await updateActiveNavigationLink( {
-				url: 'https://make.wordpress.org/core/',
-				label: 'Submenu item #1',
-				type: 'url',
-			} );
-
-			await clickBlockToolbarButton( 'Select Submenu' );
-
-			// Check button exists but is in disabled state.
-			const disabledConvertToLinkButton = await page.$$eval(
-				'[aria-label="Block tools"] [aria-label="Convert to Link"][disabled]',
-				( els ) => els.length
-			);
-
-			expect( disabledConvertToLinkButton ).toEqual( 1 );
-		} );
-
-		it( 'shows button to convert submenu to link when submenu is populated with a single incomplete link item', async () => {
-			// For context on why this test is required please see:
-			// https://github.com/WordPress/gutenberg/pull/38203#issuecomment-1027672948.
-
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			await clickBlockToolbarButton( 'Select Menu' );
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-
-			const appender = await page.waitForSelector(
-				'.wp-block-navigation .block-editor-button-block-appender'
-			);
-			await appender.click();
-
-			await updateActiveNavigationLink( {
-				url: 'https://make.wordpress.org/core/',
-				label: 'Menu item #1',
-				type: 'url',
-			} );
-
-			await clickBlockToolbarButton( 'Add submenu' );
-
-			await waitForBlock( 'Submenu' );
-
-			// Add a Link block first.
-			const subAppender = await page.waitForSelector(
-				'[aria-label="Block: Submenu"] [aria-label="Add block"]'
-			);
-
-			await subAppender.click();
-
-			// Here we intentionally do not populate the inserted Navigation Link block.
-			// Rather we immediaely click away leaving the link in a state where it has
-			// no URL of label and can be considered unpopulated.
-			await clickBlockToolbarButton( 'Select Submenu' );
-
-			// Check for non-disabled Convert to Link button.
-			const convertToLinkButton = await page.$(
-				'[aria-label="Block tools"] [aria-label="Convert to Link"]:not([disabled])'
-			);
-
-			expect( convertToLinkButton ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'Permission based restrictions', () => {
-		afterEach( async () => {
-			await switchUserToAdmin();
-		} );
-
-		it.skip( 'shows a warning if user does not have permission to create navigation menus', async () => {
-			const noticeText =
-				'You do not have permission to create Navigation Menus.';
-
-			// Switch to a Contributor role user - they should not have
-			// permission to update Navigations.
-			await loginUser( contributorUsername, contributorPassword );
-
-			await createNewPost();
-			await insertBlock( 'Navigation' );
-
-			// Make sure the snackbar error shows up.
-			await page.waitForXPath(
-				`//*[contains(@class, 'components-snackbar__content')][ text()="${ noticeText }" ]`
-			);
-
-			// Expect a console 403 for requests to:
-			// * /wp/v2/settings?_locale=user
-			// * /wp/v2/templates?context=edit&post_type=post&per_page=100&_locale=user
-			expect( console ).toHaveErrored();
-		} );
-	} );
-
-	describe( 'Initial block insertion state', () => {
-		async function createNavigationMenu( menu = {} ) {
-			return rest( {
-				method: 'POST',
-				path: '/wp/v2/navigation',
-				data: {
-					status: 'publish',
-					...menu,
-				},
-			} );
-		}
-
-		afterEach( async () => {
-			const navMenusEndpoint = '/wp/v2/navigation';
-			const allNavMenus = await rest( { path: navMenusEndpoint } );
-
-			if ( ! allNavMenus?.length ) {
-				return;
-			}
-
-			return batch(
-				allNavMenus.map( ( menu ) => ( {
-					method: 'DELETE',
-					path: `${ navMenusEndpoint }/${ menu.id }?force=true`,
-				} ) )
-			);
-		} );
-
-		it( 'automatically uses the first Navigation Menu if only one is available', async () => {
-			await createNavigationMenu( {
-				title: 'Example Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			await createNewPost();
-
-			await insertBlock( 'Navigation' );
-
-			await waitForBlock( 'Navigation' );
-
-			const innerLinkBlock = await waitForBlock( 'Custom Link' );
-
-			const linkText = await innerLinkBlock.$eval(
-				'[aria-label="Navigation link text"]',
-				( element ) => {
-					return element.innerText;
-				}
-			);
-
-			expect( linkText ).toBe( 'WordPress' );
-		} );
-
-		it( 'does not automatically use the first Navigation Menu if uncontrolled inner blocks are present', async () => {
-			const pageTitle = 'A Test Page';
-
-			await createNavigationMenu( {
-				title: 'Example Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"First Nav Menu Item","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			await rest( {
-				method: 'POST',
-				path: `/wp/v2/pages/`,
-				data: {
-					status: 'publish',
-					title: pageTitle,
-					content: 'Hello world',
-				},
-			} );
-
-			await createNewPost();
-
-			await clickOnMoreMenuItem( 'Code editor' );
-
-			const codeEditorInput = await page.waitForSelector(
-				'.editor-post-text-editor'
-			);
-			await codeEditorInput.click();
-
-			const markup =
-				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
-			await page.keyboard.type( markup );
-			await clickButton( 'Exit code editor' );
-
-			await waitForBlock( 'Navigation' );
-
-			const hasUncontrolledInnerBlocks = await page.evaluate( () => {
-				const blocks = wp.data
-					.select( 'core/block-editor' )
-					.getBlocks();
-				return !! blocks[ 0 ]?.innerBlocks?.length;
-			} );
-
-			expect( hasUncontrolledInnerBlocks ).toBe( true );
-		} );
-
-		it( 'automatically uses most recent Navigation Menu if more than one exists', async () => {
-			await createNavigationMenu( {
-				title: 'Example Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			await createNavigationMenu( {
-				title: 'Second Example Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			await createNewPost();
-
-			await insertBlock( 'Navigation' );
-
-			await waitForBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			await page.waitForXPath(
-				'//button[@aria-checked="true"][contains(., "Second Example Navigation")]'
-			);
-		} );
-
-		it( 'allows users to manually create new empty menu when block has automatically selected the first available Navigation Menu', async () => {
-			await createNavigationMenu( {
-				title: 'Example Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			await createNewPost();
-
-			await insertBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const createNewMenuButton = await page.waitForXPath(
-				'//button[contains(., "Create new menu")]'
-			);
-			await createNewMenuButton.click();
-
-			await page.waitForNetworkIdle();
-
-			// Await "success" notice.
-			await page.waitForXPath(
-				'//div[@class="components-snackbar__content"][contains(text(), "Navigation Menu successfully created.")]'
-			);
-		} );
-
-		it( 'should always focus select menu button after item selection', async () => {
-			// Create some navigation menus to work with.
-			await createNavigationMenu( {
-				title: 'First navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress Example Navigation","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-			await createNavigationMenu( {
-				title: 'Second Navigation',
-				content:
-					'<!-- wp:navigation-link {"label":"WordPress Second Example Navigation","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
-			} );
-
-			// Create new post.
-			await createNewPost();
-
-			// Insert new block and wait for the insert to complete.
-			await insertBlock( 'Navigation' );
-			await waitForBlock( 'Navigation' );
-
-			const navigationSelector = await page.waitForXPath(
-				"//button[text()='Select Menu']"
-			);
-			await navigationSelector.click();
-
-			const theOption = await page.waitForXPath(
-				"//button[@aria-checked='false'][contains(., 'First navigation')]"
-			);
-			await theOption.click();
-
-			// Once the options are closed, does select menu button receive focus?
-			const selectMenuDropdown2 = await page.$(
-				'[aria-label="Select Menu"]'
-			);
-
-			await expect( selectMenuDropdown2 ).toHaveFocus();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/post-title.test.js b/packages/e2e-tests/specs/editor/blocks/post-title.test.js
deleted file mode 100644
index 621e6815cfba84..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/post-title.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	saveDraft,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Post Title block', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Can edit the post title', async () => {
-		// Create a block with some text that will trigger a list creation.
-		await insertBlock( 'Post Title' );
-		const editablePostTitleSelector =
-			'.wp-block-post-title[contenteditable="true"]';
-		await page.waitForSelector( editablePostTitleSelector );
-		await page.focus( editablePostTitleSelector );
-
-		// Create a second list item.
-		await page.keyboard.type( 'Just tweaking the post title' );
-
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		const title = await page.$eval(
-			'.editor-post-title__input',
-			( element ) => element.textContent
-		);
-		expect( title ).toEqual( 'Just tweaking the post title' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/pullquote.test.js b/packages/e2e-tests/specs/editor/blocks/pullquote.test.js
deleted file mode 100644
index 9c9b9f4513fae6..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/pullquote.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Quote', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by converting a quote and converted back to quote', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p>test</p>
-		<!-- /wp:paragraph --></blockquote>
-		<!-- /wp:quote -->"
-	` );
-
-		await transformBlockTo( 'Pullquote' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:pullquote -->
-		<figure class=\\"wp-block-pullquote\\"><blockquote><p>test</p></blockquote></figure>
-		<!-- /wp:pullquote -->"
-	` );
-
-		await transformBlockTo( 'Quote' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:quote -->
-		<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-		<p>test</p>
-		<!-- /wp:paragraph --></blockquote>
-		<!-- /wp:quote -->"
-	` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/query.test.js b/packages/e2e-tests/specs/editor/blocks/query.test.js
deleted file mode 100644
index e051783ec7ebc0..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/query.test.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	deactivatePlugin,
-	createNewPost,
-	insertBlock,
-	publishPost,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-const createDemoPosts = async () => {
-	await createNewPost( { postType: 'post', title: `Post 1` } );
-	await publishPost();
-};
-
-describe( 'Query block', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-query-block' );
-		await createDemoPosts();
-	} );
-	afterAll( async () => {
-		await trashAllPosts();
-		await deactivatePlugin( 'gutenberg-test-query-block' );
-	} );
-	beforeEach( async () => {
-		await createNewPost( { postType: 'page', title: `Query Page` } );
-	} );
-	afterEach( async () => {
-		await trashAllPosts( 'page' );
-	} );
-	describe( 'Query block insertion', () => {
-		it( 'Carousel', async () => {
-			await insertBlock( 'Query' );
-			// Wait for the choose pattern button
-			const choosePatternButton = await page.waitForSelector(
-				'div[data-type="core/query"] button.is-primary'
-			);
-			await choosePatternButton.click();
-			// Wait for pattern blocks to be loaded.
-			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__container iframe[title="Editor canvas"]'
-			);
-			/**
-			 * Ensure that carousel is working by checking slider css classes
-			 * and navigating to the next pattern.
-			 */
-			await page.waitForSelector(
-				'li.pattern-slide.active-slide[aria-label="Query Test 1"]'
-			);
-			const nextPatternButton = await page.waitForSelector(
-				'.block-editor-block-pattern-setup__navigation button[aria-label="Next pattern"]'
-			);
-			await nextPatternButton.click();
-			await page.waitForSelector(
-				'li.pattern-slide.active-slide[aria-label="Query Test 2"]'
-			);
-			// Choose the selected pattern.
-			const chooseButton = await page.waitForXPath(
-				'//div[contains(@class, "block-editor-block-pattern-setup__actions")]//button[text()="Choose"]'
-			);
-			chooseButton.click();
-			// Wait for pattern setup to go away.
-			await page.waitForSelector( '.block-editor-block-pattern-setup', {
-				hidden: true,
-			} );
-			/**
-			 * We can't use `getEditedPostContent` easily for now because
-			 * `query` makes used of `instanceId` so it's not very reliable.
-			 * This should be revisited.
-			 */
-			await page.waitForSelector( '.wp-block-post-date' );
-			await page.waitForSelector( '.wp-block-post-title' );
-		} );
-		it( 'Grid view', async () => {
-			await insertBlock( 'Query' );
-			// Wait for the choose pattern button
-			const choosePatternButton = await page.waitForSelector(
-				'div[data-type="core/query"] button.is-primary'
-			);
-			await choosePatternButton.click();
-			// Wait for patterns setup to be loaded.
-			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__display-controls'
-			);
-			// Click the Grid view button.
-			const gridViewButton = await page.waitForSelector(
-				'.block-editor-block-pattern-setup__display-controls button[aria-label="Grid view"]'
-			);
-			await gridViewButton.click();
-			// Wait for patterns to be loaded and click the wanted pattern.
-			const gridPattern = await page.waitForSelector(
-				'.block-editor-block-pattern-setup-list__list-item[aria-label="Query Test 2"]'
-			);
-			await gridPattern.click();
-			// Wait for pattern setup to go away.
-			await page.waitForSelector( '.block-editor-block-pattern-setup', {
-				hidden: true,
-			} );
-			/**
-			 * We can't use `getEditedPostContent` easily for now because
-			 * `query` makes used of `instanceId` so it's not very reliable.
-			 * This should be revisited.
-			 */
-			await page.waitForSelector( '.wp-block-post-date' );
-			await page.waitForSelector( '.wp-block-post-title' );
-		} );
-	} );
-} );
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 bb61fc7a5ee0a9..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:paragraph -->
-		<p>2</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/site-title.test.js b/packages/e2e-tests/specs/editor/blocks/site-title.test.js
deleted file mode 100644
index 32428a73c8e206..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/site-title.test.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	getOption,
-	insertBlock,
-	loginUser,
-	pressKeyWithModifier,
-	setOption,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-const saveEntities = async () => {
-	const savePostSelector = '.editor-post-publish-button__button';
-	const savePanelSelector = '.entities-saved-states__panel';
-	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
-	const publishPanelSelector = '.editor-post-publish-panel';
-	const closePanelButtonSelector =
-		'.editor-post-publish-panel__header-cancel-button button';
-
-	await page.click( savePostSelector );
-	await page.waitForSelector( savePanelSelector );
-	await page.click( entitiesSaveSelector );
-	await page.waitForSelector( publishPanelSelector );
-	await page.waitForSelector(
-		'.editor-post-publish-panel__header-cancel-button button:not([disabled])'
-	);
-	await page.click( closePanelButtonSelector );
-};
-
-describe( 'Site Title block', () => {
-	let originalSiteTitle, password;
-	const username = 'testuser';
-	beforeAll( async () => {
-		originalSiteTitle = await getOption( 'blogname' );
-	} );
-
-	afterAll( async () => {
-		await setOption( 'blogname', originalSiteTitle );
-	} );
-
-	it( 'Can edit the site title as admin', async () => {
-		await createNewPost();
-		await insertBlock( 'Site Title' );
-		const editableSiteTitleSelector =
-			'[aria-label="Block: Site Title"] a[contenteditable="true"]';
-		await page.waitForSelector( editableSiteTitleSelector );
-		await page.focus( editableSiteTitleSelector );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.keyboard.type( 'New Site Title' );
-
-		await saveEntities();
-
-		const siteTitle = await getOption( 'blogname' );
-		expect( siteTitle ).toEqual( 'New Site Title' );
-	} );
-
-	// FIXME: Fix https://github.com/WordPress/gutenberg/issues/33003 and enable this test.
-	// I tried adding an `expect( console ).toHaveErroredWith()` as a workaround, but
-	// the error occurs only sporadically (e.g. locally in interactive mode, but not in
-	// headless mode).
-	it.skip( 'Cannot edit the site title as editor', async () => {
-		await loginUser( username, password );
-
-		await createNewPost();
-		await insertBlock( 'Site Title' );
-
-		await openDocumentSettingsSidebar();
-
-		const [ disableLink ] = await page.$x(
-			"//label[contains(text(), 'Make title link to home')]"
-		);
-		await disableLink.click();
-
-		const siteTitleSelector = '[aria-label="Block: Site Title"] span';
-		await page.waitForSelector( siteTitleSelector );
-
-		const editable = await page.$eval(
-			siteTitleSelector,
-			( element ) => element.contentEditable
-		);
-		expect( editable ).toBe( 'inherit' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/fixtures/menu-items-request-fixture.json b/packages/e2e-tests/specs/editor/fixtures/menu-items-request-fixture.json
deleted file mode 100644
index 01b844c45ceee4..00000000000000
--- a/packages/e2e-tests/specs/editor/fixtures/menu-items-request-fixture.json
+++ /dev/null
@@ -1,84 +0,0 @@
-[
-	{
-		"title": "Home",
-		"url": "http://localhost:8889/",
-		"menu_order": 1
-	},
-	{
-		"title": "About",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 2
-	},
-	{
-		"title": "Our team",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 3,
-		"parent": 1
-	},
-	{
-		"title": "Shop",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 4
-	},
-	{
-		"title": "Winter apparel",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 5,
-		"parent": 3
-	},
-	{
-		"title": "Chunky socks",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 6,
-		"parent": 4
-	},
-	{
-		"title": "Hideous hats",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 7,
-		"parent": 4
-	},
-	{
-		"title": "Glorious gloves",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 8,
-		"parent": 4
-	},
-	{
-		"title": "Jazzy Jumpers",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 9,
-		"parent": 4
-	},
-	{
-		"title": "Shipping",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 10
-	},
-	{
-		"title": "Contact Us",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 11
-	},
-	{
-		"title": "WordPress.org",
-		"url": "https://wordpress.org",
-		"menu_order": 12
-	},
-	{
-		"title": "Google",
-		"url": "https://google.com",
-		"menu_order": 13,
-		"parent": 11
-	}
-]
diff --git a/packages/e2e-tests/specs/editor/fixtures/menu-items-response-fixture.json b/packages/e2e-tests/specs/editor/fixtures/menu-items-response-fixture.json
deleted file mode 100644
index 4de75a5c0bacc6..00000000000000
--- a/packages/e2e-tests/specs/editor/fixtures/menu-items-response-fixture.json
+++ /dev/null
@@ -1,1261 +0,0 @@
-[
-	{
-		"id": 94,
-		"title": {
-			"raw": "Home",
-			"rendered": "Home"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/",
-		"attr_title": "",
-		"description": "",
-		"type": "custom",
-		"type_label": "Custom Link",
-		"object": "custom",
-		"object_id": 94,
-		"parent": 0,
-		"menu_order": 1,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/94"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=94"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/94"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/94"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/94"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/94"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 95,
-		"title": {
-			"raw": "",
-			"rendered": "Accusamus quo repellat illum magnam quas"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=41",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 41,
-		"parent": 0,
-		"menu_order": 2,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/95"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=95"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/41"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/95"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/95"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/95"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/95"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 96,
-		"title": {
-			"raw": "",
-			"rendered": "Debitis cum consequatur sit doloremque"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=51",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 51,
-		"parent": 95,
-		"menu_order": 3,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/96"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=96"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/51"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/96"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/96"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/96"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/96"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 97,
-		"title": {
-			"raw": "",
-			"rendered": "Est ea vero non nihil officiis in"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=53",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 53,
-		"parent": 0,
-		"menu_order": 4,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/97"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=97"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/53"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/97"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/97"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/97"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/97"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 98,
-		"title": {
-			"raw": "",
-			"rendered": "Fuga odio quis tempora"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=56",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 56,
-		"parent": 97,
-		"menu_order": 5,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/98"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=98"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/56"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/98"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/98"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/98"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/98"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 99,
-		"title": {
-			"raw": "",
-			"rendered": "In consectetur repellendus eveniet maiores aperiam"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=15",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 15,
-		"parent": 98,
-		"menu_order": 6,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/99"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=99"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/15"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/99"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/99"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/99"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/99"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 100,
-		"title": {
-			"raw": "",
-			"rendered": "Mollitia maiores consequatur ea dolorem blanditiis"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=45",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 45,
-		"parent": 99,
-		"menu_order": 7,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/100"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=100"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/45"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/100"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/100"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/100"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/100"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 101,
-		"title": {
-			"raw": "",
-			"rendered": "Necessitatibus nisi qui qui necessitatibus quaerat possimus"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=27",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 27,
-		"parent": 100,
-		"menu_order": 8,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/101"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=101"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/27"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/101"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/101"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/101"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/101"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 102,
-		"title": {
-			"raw": "",
-			"rendered": "Nulla omnis autem dolores eligendi"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=43",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 43,
-		"parent": 0,
-		"menu_order": 9,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/102"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=102"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/43"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/102"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/102"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/102"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/102"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 103,
-		"title": {
-			"raw": "",
-			"rendered": "Sample Page"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?page_id=2",
-		"attr_title": "",
-		"description": "",
-		"type": "post_type",
-		"type_label": "Page",
-		"object": "page",
-		"object_id": 2,
-		"parent": 0,
-		"menu_order": 10,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/103"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=103"
-				}
-			],
-			"wp:object": [
-				{
-					"post_type": "post_type",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/pages/2"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/103"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/103"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/103"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/103"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 104,
-		"title": {
-			"raw": "",
-			"rendered": "Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?cat=7",
-		"attr_title": "",
-		"description": "Ratione nemo ut aut ullam sed assumenda quis est exercitationem",
-		"type": "taxonomy",
-		"type_label": "Category",
-		"object": "category",
-		"object_id": 7,
-		"parent": 0,
-		"menu_order": 11,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/104"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=104"
-				}
-			],
-			"wp:object": [
-				{
-					"taxonomy": "taxonomy",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/categories/7"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/104"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/104"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/104"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/104"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 105,
-		"title": {
-			"raw": "",
-			"rendered": "Et minus itaque velit tempore hic quisquam saepe quas asperiores"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?cat=19",
-		"attr_title": "",
-		"description": "Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum",
-		"type": "taxonomy",
-		"type_label": "Category",
-		"object": "category",
-		"object_id": 19,
-		"parent": 104,
-		"menu_order": 12,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/105"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=105"
-				}
-			],
-			"wp:object": [
-				{
-					"taxonomy": "taxonomy",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/categories/19"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/105"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/105"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/105"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/105"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 106,
-		"title": {
-			"raw": "",
-			"rendered": "Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?cat=6",
-		"attr_title": "",
-		"description": "Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam",
-		"type": "taxonomy",
-		"type_label": "Category",
-		"object": "category",
-		"object_id": 6,
-		"parent": 105,
-		"menu_order": 13,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/106"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=106"
-				}
-			],
-			"wp:object": [
-				{
-					"taxonomy": "taxonomy",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/categories/6"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/106"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/106"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/106"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/106"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 107,
-		"title": {
-			"raw": "",
-			"rendered": "Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error"
-		},
-		"status": "publish",
-		"url": "http://localhost:8889/?cat=16",
-		"attr_title": "",
-		"description": "Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora",
-		"type": "taxonomy",
-		"type_label": "Category",
-		"object": "category",
-		"object_id": 16,
-		"parent": 106,
-		"menu_order": 14,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/107"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=107"
-				}
-			],
-			"wp:object": [
-				{
-					"taxonomy": "taxonomy",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/categories/16"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/107"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/107"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/107"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/107"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 108,
-		"title": {
-			"raw": "WordPress.org",
-			"rendered": "WordPress.org"
-		},
-		"status": "publish",
-		"url": "https://wordpress.org",
-		"attr_title": "",
-		"description": "",
-		"type": "custom",
-		"type_label": "Custom Link",
-		"object": "custom",
-		"object_id": 108,
-		"parent": 0,
-		"menu_order": 15,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/108"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=108"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/108"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/108"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/108"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/108"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	},
-	{
-		"id": 109,
-		"title": {
-			"raw": "Google",
-			"rendered": "Google"
-		},
-		"status": "publish",
-		"url": "https://google.com",
-		"attr_title": "",
-		"description": "",
-		"type": "custom",
-		"type_label": "Custom Link",
-		"object": "custom",
-		"object_id": 109,
-		"parent": 108,
-		"menu_order": 16,
-		"target": "",
-		"classes": [ "" ],
-		"xfn": [ "" ],
-		"meta": [],
-		"menus": [ 23 ],
-		"_links": {
-			"self": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/109"
-				}
-			],
-			"collection": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items"
-				}
-			],
-			"about": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/types/nav_menu_item"
-				}
-			],
-			"wp:term": [
-				{
-					"taxonomy": "nav_menu",
-					"embeddable": true,
-					"href": "http://localhost:8889/index.php?rest_route=%2Fwp%2Fv2%2Fmenus&post=109"
-				}
-			],
-			"wp:action-publish": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/109"
-				}
-			],
-			"wp:action-unfiltered-html": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/109"
-				}
-			],
-			"wp:action-create-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/109"
-				}
-			],
-			"wp:action-assign-menus": [
-				{
-					"href": "http://localhost:8889/index.php?rest_route=/wp/v2/menu-items/109"
-				}
-			],
-			"curies": [
-				{
-					"name": "wp",
-					"href": "https://api.w.org/{rel}",
-					"templated": true
-				}
-			]
-		}
-	}
-]
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap
deleted file mode 100644
index e0075595e01b08..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/align-hook.test.js.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-align-array {\\"align\\":\\"center\\"} -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-array aligncenter\\">Test Align Hook</div>
-<!-- /wp:test/test-align-array -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align array Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-align-array -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-array\\">Test Align Hook</div>
-<!-- /wp:test/test-align-array -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-align-true {\\"align\\":\\"right\\"} -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-true alignright\\">Test Align Hook</div>
-<!-- /wp:test/test-align-true -->"
-`;
-
-exports[`Align Hook Works As Expected Block with align true Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-align-true -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-align-true\\">Test Align Hook</div>
-<!-- /wp:test/test-align-true -->"
-`;
-
-exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 1`] = `
-"<!-- wp:test/test-default-align {\\"align\\":\\"center\\"} -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-default-align aligncenter\\">Test Align Hook</div>
-<!-- /wp:test/test-default-align -->"
-`;
-
-exports[`Align Hook Works As Expected Block with default align Correctly applies the selected alignment and correctly removes the alignment 2`] = `
-"<!-- wp:test/test-default-align {\\"align\\":\\"\\"} -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-default-align\\">Test Align Hook</div>
-<!-- /wp:test/test-default-align -->"
-`;
-
-exports[`Align Hook Works As Expected Block with no alignment set Does not save any alignment related attribute or class 1`] = `
-"<!-- wp:test/test-no-alignment-set -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-test-no-alignment-set\\">Test Align Hook</div>
-<!-- /wp:test/test-no-alignment-set -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/block-directory-add.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/block-directory-add.test.js.snap
deleted file mode 100644
index 2c06020e52c787..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/block-directory-add.test.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`adding blocks from block directory Should be able to add (the first) block. 1`] = `"<!-- wp:block-directory-test-block/main-block /-->"`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/container-blocks.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/container-blocks.test.js.snap
deleted file mode 100644
index 5eec9e79ced1f6..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/container-blocks.test.js.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Container block without paragraph support ensures we can use the alternative block appender properly 1`] = `
-"<!-- wp:test/container-without-paragraph -->
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-<!-- /wp:test/container-without-paragraph -->"
-`;
-
-exports[`InnerBlocks Template Sync Ensure inner block writing flow works as expected without additional paragraphs added 1`] = `
-"<!-- wp:test/test-inner-blocks-paragraph-placeholder -->
-<!-- wp:paragraph {\\"placeholder\\":\\"Content…\\",\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Test Paragraph</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-paragraph-placeholder -->"
-`;
-
-exports[`InnerBlocks Template Sync Ensures blocks without locking are kept intact even if they do not match the template 1`] = `
-"<!-- wp:test/test-inner-blocks-no-locking -->
-<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Content…</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>added paragraph</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-no-locking -->"
-`;
-
-exports[`InnerBlocks Template Sync Removes blocks that are not expected by the template if a lock all exists 1`] = `
-"<!-- wp:test/test-inner-blocks-locking-all -->
-<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Content…</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-locking-all -->"
-`;
-
-exports[`InnerBlocks Template Sync Synchronizes blocks if lock 'all' is set and the template prop is changed 1`] = `
-"<!-- wp:test/test-inner-blocks-update-locked-template -->
-<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Content…</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-update-locked-template -->"
-`;
-
-exports[`InnerBlocks Template Sync Synchronizes blocks if lock 'all' is set and the template prop is changed 2`] = `
-"<!-- wp:test/test-inner-blocks-update-locked-template {\\"hasUpdatedTemplate\\":true} -->
-<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Content…</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Two</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/test-inner-blocks-update-locked-template -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
deleted file mode 100644
index 0acc31727beeb5..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
+++ /dev/null
@@ -1,147 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`cpt locking template_lock all should insert line breaks when using enter and shift-enter 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p>First line<br>Second line<br>Third line</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`cpt locking template_lock all should not error when deleting the cotents of a paragraph 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p>p1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
-<div class=\\"wp-block-group\\"><!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`cpt locking template_lock false should allow blocks to be inserted 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>List content</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`cpt locking template_lock false should allow blocks to be moved 1`] = `
-"<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p>p1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`cpt locking template_lock false should allow blocks to be removed 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`cpt locking template_lock insert should allow blocks to be moved 1`] = `
-"<!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
-<p>p1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap
deleted file mode 100644
index 46d3e807bff832..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`iframed inline styles should load inline styles in iframe 1`] = `
-"<!-- wp:test/iframed-inline-styles -->
-<div class=\\"wp-block-test-iframed-inline-styles\\">Save</div>
-<!-- /wp:test/iframed-inline-styles -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
deleted file mode 100644
index 0033b3aff44d12..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`iframed masonry block should load script and dependencies in iframe 1`] = `
-"<!-- wp:test/iframed-masonry-block -->
-<div class=\\"wp-block-test-iframed-masonry-block\\"><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div></div>
-<!-- /wp:test/iframed-masonry-block -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/inner-blocks-render-appender.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/inner-blocks-render-appender.test.js.snap
deleted file mode 100644
index 480121a3ceb8f1..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/inner-blocks-render-appender.test.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RenderAppender prop of InnerBlocks Users can customize the appender and can still insert blocks using exposed components 1`] = `
-"<!-- wp:test/inner-blocks-render-appender -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-render-appender\\"><!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote --></div>
-<!-- /wp:test/inner-blocks-render-appender -->"
-`;
-
-exports[`RenderAppender prop of InnerBlocks Users can dynamically customize the appender 1`] = `
-"<!-- wp:test/inner-blocks-render-appender-dynamic -->
-<div style=\\"outline:1px solid gray;padding:5px\\" class=\\"wp-block-test-inner-blocks-render-appender-dynamic\\"><!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:video -->
-<figure class=\\"wp-block-video\\"></figure>
-<!-- /wp:video --></div>
-<!-- /wp:test/inner-blocks-render-appender-dynamic -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/meta-attribute-block.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/meta-attribute-block.test.js.snap
deleted file mode 100644
index 268c8b45d059f2..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/meta-attribute-block.test.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Block with a meta attribute Early Registration Should persist the meta attribute properly 1`] = `"<!-- wp:test/test-meta-attribute-block-early /-->"`;
-
-exports[`Block with a meta attribute Early Registration Should persist the meta attribute properly in a different post type 1`] = `"<!-- wp:test/test-meta-attribute-block-early /-->"`;
-
-exports[`Block with a meta attribute Late Registration Should persist the meta attribute properly 1`] = `"<!-- wp:test/test-meta-attribute-block-late /-->"`;
-
-exports[`Block with a meta attribute Late Registration Should persist the meta attribute properly in a different post type 1`] = `"<!-- wp:test/test-meta-attribute-block-late /-->"`;
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
deleted file mode 100644
index e2d70612669aef..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
-
-exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Plugin sidebar title</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
-
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Plugin sidebar title</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" width=\\"24\\" height=\\"24\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
deleted file mode 100644
index 9246144d810e08..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlocks,
-	getEditedPostContent,
-	insertBlock,
-	selectBlockByClientId,
-	setPostContent,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-const alignLabels = {
-	none: 'None',
-	left: 'Align left',
-	center: 'Align center',
-	right: 'Align right',
-	wide: 'Wide width',
-	full: 'Full width',
-};
-
-/**
- * Helper function to get the `labels` of align control. It actually evaluates the
- * basic label of the button without the `info` text node if exists.
- *
- * @param {Object}  options                               Options for the util function
- * @param {boolean} [options.getActiveButtonLabels=false] Flag for returning the active buttons labels only.
- * @return {string[]} The matched labels.
- */
-const getAlignmentToolbarLabels = async ( {
-	getActiveButtonLabels = false,
-} = {} ) => {
-	const selector = `.components-dropdown-menu__menu button${
-		getActiveButtonLabels ? '.is-active' : ''
-	} .components-menu-item__item`;
-	return page.evaluate( ( _selector ) => {
-		return (
-			Array.from( document.querySelectorAll( _selector ) )
-				/**
-				 * We neede this for now because conditionally there could be two nodes
-				 * with the same class(). This should be removed when the following
-				 * issue is resolved.
-				 *
-				 * @see https://github.com/WordPress/gutenberg/issues/34838
-				 */
-				.filter( ( contentNode ) => ! contentNode.childElementCount )
-				.map( ( contentNode ) => {
-					return contentNode.innerText;
-				} )
-		);
-	}, selector );
-};
-
-const expectActiveButtonLabelToBe = async ( expected ) => {
-	await clickBlockToolbarButton( 'Align' );
-	const activeButtonLabels = await getAlignmentToolbarLabels( {
-		getActiveButtonLabels: true,
-	} );
-	expect( activeButtonLabels ).toHaveLength( 1 );
-	expect( activeButtonLabels[ 0 ] ).toEqual( expected );
-};
-
-const createShowsTheExpectedButtonsTest = ( blockName, buttonLabels ) => {
-	it( 'Shows the expected buttons on the alignment toolbar', async () => {
-		await insertBlock( blockName );
-		await clickBlockToolbarButton( 'Align' );
-		expect( await getAlignmentToolbarLabels() ).toEqual(
-			expect.arrayContaining( buttonLabels )
-		);
-	} );
-};
-
-const createAppliesNoneAlignmentByDefaultTest = ( blockName ) => {
-	it( 'applies none alignment by default', async () => {
-		await insertBlock( blockName );
-		await expectActiveButtonLabelToBe( alignLabels.none );
-	} );
-};
-
-const verifyMarkupIsValid = async ( htmlMarkup ) => {
-	await setPostContent( htmlMarkup );
-	const blocks = await getAllBlocks();
-	expect( blocks ).toHaveLength( 1 );
-	expect( blocks[ 0 ].isValid ).toBeTruthy();
-};
-
-const createCorrectlyAppliesAndRemovesAlignmentTest = (
-	blockName,
-	alignment
-) => {
-	it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => {
-		const BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), '${ alignLabels[ alignment ] }')]`;
-
-		// Set the specified alignment.
-		await insertBlock( blockName );
-		await clickBlockToolbarButton( 'Align' );
-		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
-
-		// Verify the button of the specified alignment is pressed.
-		await expectActiveButtonLabelToBe( alignLabels[ alignment ] );
-
-		let htmlMarkup = await getEditedPostContent();
-
-		// Verify the markup of the selected alignment was generated.
-		expect( htmlMarkup ).toMatchSnapshot();
-
-		// Verify the markup can be correctly parsed.
-		await verifyMarkupIsValid( htmlMarkup );
-
-		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
-
-		// Remove the alignment.
-		await clickBlockToolbarButton( 'Align' );
-		await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click();
-
-		// Verify 'none' alignment button is in pressed state.
-		await expectActiveButtonLabelToBe( alignLabels.none );
-
-		// Verify alignment markup was removed from the block.
-		htmlMarkup = await getEditedPostContent();
-		expect( htmlMarkup ).toMatchSnapshot();
-
-		// verify the markup when no alignment is set is valid
-		await verifyMarkupIsValid( htmlMarkup );
-
-		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
-
-		// Verify alignment `none` button is in pressed state after parsing the block.
-		await expectActiveButtonLabelToBe( alignLabels.none );
-	} );
-};
-
-describe( 'Align Hook Works As Expected', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-align-hook' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-align-hook' );
-	} );
-
-	describe( 'Block with no alignment set', () => {
-		const BLOCK_NAME = 'Test No Alignment Set';
-		it( 'Shows no alignment buttons on the alignment toolbar', async () => {
-			await insertBlock( BLOCK_NAME );
-			const CHANGE_ALIGNMENT_BUTTON_SELECTOR =
-				'.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]';
-			const changeAlignmentButton = await page.$(
-				CHANGE_ALIGNMENT_BUTTON_SELECTOR
-			);
-			expect( changeAlignmentButton ).toBe( null );
-		} );
-
-		it( 'Does not save any alignment related attribute or class', async () => {
-			await insertBlock( BLOCK_NAME );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'Block with align true', () => {
-		const BLOCK_NAME = 'Test Align True';
-
-		createShowsTheExpectedButtonsTest(
-			BLOCK_NAME,
-			Object.values( alignLabels )
-		);
-
-		createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'right' );
-	} );
-
-	describe( 'Block with align array', () => {
-		const BLOCK_NAME = 'Test Align Array';
-
-		createShowsTheExpectedButtonsTest( BLOCK_NAME, [
-			alignLabels.none,
-			alignLabels.left,
-			alignLabels.center,
-		] );
-
-		createAppliesNoneAlignmentByDefaultTest( BLOCK_NAME );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
-	} );
-
-	describe( 'Block with default align', () => {
-		const BLOCK_NAME = 'Test Default Align';
-		const SELECTED_ALIGNMENT_CONTROL_SELECTOR =
-			'//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")]/span[text()="Align right"]';
-		createShowsTheExpectedButtonsTest(
-			BLOCK_NAME,
-			Object.values( alignLabels )
-		);
-
-		it( 'Applies the selected alignment by default', async () => {
-			await insertBlock( BLOCK_NAME );
-			// Verify the correct alignment button is pressed.
-			await clickBlockToolbarButton( 'Align' );
-			const selectedAlignmentControls = await page.$x(
-				SELECTED_ALIGNMENT_CONTROL_SELECTOR
-			);
-			expect( selectedAlignmentControls ).toHaveLength( 1 );
-		} );
-
-		it( 'The default markup does not contain the alignment attribute but contains the alignment class', async () => {
-			await insertBlock( BLOCK_NAME );
-			const markup = await getEditedPostContent();
-			expect( markup ).not.toContain( '"align":"right"' );
-			expect( markup ).toContain( 'alignright' );
-		} );
-
-		it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => {
-			await insertBlock( BLOCK_NAME );
-			// Remove the alignment.
-			await clickBlockToolbarButton( 'Align' );
-			const [ selectedAlignmentControl ] = await page.$x(
-				SELECTED_ALIGNMENT_CONTROL_SELECTOR
-			);
-			await selectedAlignmentControl.click();
-			const markup = await getEditedPostContent();
-			expect( markup ).toContain( '"align":""' );
-		} );
-
-		createCorrectlyAppliesAndRemovesAlignmentTest( BLOCK_NAME, 'center' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js
deleted file mode 100644
index 804e062fa725b8..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickOnMoreMenuItem,
-	createNewPost,
-	deactivatePlugin,
-	searchForBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Allowed Blocks Filter', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-allowed-blocks' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-allowed-blocks' );
-	} );
-
-	it( 'should restrict the allowed blocks in the inserter', async () => {
-		// The paragraph block is available.
-		await searchForBlock( 'Paragraph' );
-		const paragraphBlockButton = (
-			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
-		 )[ 0 ];
-		expect( paragraphBlockButton ).not.toBeNull();
-
-		// The gallery block is not available.
-		await searchForBlock( 'Gallery' );
-
-		const galleryBlockButton = (
-			await page.$x( `//button//span[contains(text(), 'Gallery')]` )
-		 )[ 0 ];
-		expect( galleryBlockButton ).toBeUndefined();
-	} );
-
-	it( 'should remove not allowed blocks from the block manager', async () => {
-		await clickOnMoreMenuItem( 'Preferences' );
-		const [ blocksTab ] = await page.$x(
-			`//button[contains(text(), "Blocks")]`
-		);
-		await blocksTab.click();
-
-		const BLOCK_LABEL_SELECTOR =
-			'.edit-post-block-manager__checklist-item .components-checkbox-control__label';
-		await page.waitForSelector( BLOCK_LABEL_SELECTOR );
-		const blocks = await page.evaluate( ( selector ) => {
-			return Array.from( document.querySelectorAll( selector ) )
-				.map( ( element ) => ( element.innerText || '' ).trim() )
-				.sort();
-		}, BLOCK_LABEL_SELECTOR );
-		expect( blocks ).toEqual( [ 'Image', 'Paragraph' ] );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js
deleted file mode 100644
index 0ab1fc0f99dfff..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	clickOnMoreMenuItem,
-	createNewPost,
-	deactivatePlugin,
-} from '@wordpress/e2e-test-utils';
-
-const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
-	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( buttonLabel );
-};
-
-const ANNOTATIONS_SELECTOR = '.annotation-text-e2e-tests';
-
-describe( 'Annotations', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Annotates the text in the first block from start to end.
-	 *
-	 * @param {number} start Position to start the annotation.
-	 * @param {number} end   Position to end the annotation.
-	 *
-	 * @return {void}
-	 */
-	async function annotateFirstBlock( start, end ) {
-		await page.focus( '#annotations-tests-range-start' );
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.type( start + '' );
-		await page.focus( '#annotations-tests-range-end' );
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.type( end + '' );
-
-		// Click add annotation button.
-		const addAnnotationButton = (
-			await page.$x( "//button[contains(text(), 'Add annotation')]" )
-		 )[ 0 ];
-		await addAnnotationButton.click();
-		await page.evaluate( () =>
-			document.querySelector( '.wp-block-paragraph' ).focus()
-		);
-	}
-
-	/**
-	 * Presses the button that removes all annotations.
-	 *
-	 * @return {void}
-	 */
-	async function removeAnnotations() {
-		// Click remove annotations button.
-		const addAnnotationButton = (
-			await page.$x( "//button[contains(text(), 'Remove annotations')]" )
-		 )[ 0 ];
-		await addAnnotationButton.click();
-		await page.evaluate( () =>
-			document.querySelector( '[contenteditable]' ).focus()
-		);
-	}
-
-	/**
-	 * Returns the inner text of the first text annotation on the page.
-	 *
-	 * @return {Promise<string>} The annotated text.
-	 */
-	async function getAnnotatedText() {
-		const annotations = await page.$$( ANNOTATIONS_SELECTOR );
-
-		const annotation = annotations[ 0 ];
-
-		return await page.evaluate( ( el ) => el.innerText, annotation );
-	}
-
-	/**
-	 * Returns the inner HTML of the first RichText in the page.
-	 *
-	 * @return {Promise<string>} Inner HTML.
-	 */
-	async function getRichTextInnerHTML() {
-		const htmlContent = await page.$$( '.wp-block-paragraph' );
-		return await page.evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-	}
-
-	it( 'allows a block to be annotated', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );
-
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
-
-		let annotations = await page.$$( ANNOTATIONS_SELECTOR );
-		expect( annotations ).toHaveLength( 0 );
-
-		await annotateFirstBlock( 9, 13 );
-
-		annotations = await page.$$( ANNOTATIONS_SELECTOR );
-		expect( annotations ).toHaveLength( 1 );
-
-		const text = await getAnnotatedText();
-		expect( text ).toBe( ' to ' );
-
-		await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
-
-		const htmlContent = await page.$$(
-			'.block-editor-block-list__block-html-textarea'
-		);
-		const html = await page.evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-
-		// There should be no <mark> tags in the raw content.
-		expect( html ).toBe( '&lt;p&gt;Paragraph to annotate&lt;/p&gt;' );
-	} );
-
-	it( 'keeps the cursor in the same location when applying annotation', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		// The selection should still be at the end, so test that by typing:
-		await page.keyboard.type( 'D' );
-
-		await removeAnnotations();
-		const htmlContent = await page.$$( '.wp-block-paragraph' );
-		const html = await page.evaluate( ( el ) => {
-			return el.innerHTML;
-		}, htmlContent[ 0 ] );
-
-		expect( html ).toBe( 'ABCD' );
-	} );
-
-	it( 'moves when typing before it', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Put an 1 after the A, it should not be annotated.
-		await page.keyboard.type( '1' );
-
-		const annotatedText = await getAnnotatedText();
-		expect( annotatedText ).toBe( 'B' );
-
-		await removeAnnotations();
-		const blockText = await getRichTextInnerHTML();
-		expect( blockText ).toBe( 'A1BC' );
-	} );
-
-	it( 'grows when typing inside it', async () => {
-		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
-
-		await annotateFirstBlock( 1, 2 );
-
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Put an 1 after the A, it should not be annotated.
-		await page.keyboard.type( '2' );
-
-		const annotatedText = await getAnnotatedText();
-		expect( annotatedText ).toBe( 'B2' );
-
-		await removeAnnotations();
-		const blockText = await getRichTextInnerHTML();
-		expect( blockText ).toBe( 'AB2C' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/block-context.test.js b/packages/e2e-tests/specs/editor/plugins/block-context.test.js
deleted file mode 100644
index 55b905c190dc98..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/block-context.test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	saveDraft,
-	openPreviewPage,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block context', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-context' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-context' );
-	} );
-
-	test( 'Block context propagates to inner blocks', async () => {
-		await insertBlock( 'Test Context Provider' );
-
-		// Inserting the context provider block should select the first inner
-		// block of the template. Verify the contents of the consumer.
-		let innerBlockText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		expect( innerBlockText ).toBe( 'The record ID is: 0' );
-
-		// Change the attribute value associated with the context.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.type( '123' );
-
-		// Verify propagated context changes.
-		await page.keyboard.press( 'ArrowDown' );
-		innerBlockText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		expect( innerBlockText ).toBe( 'The record ID is: 123' );
-	} );
-
-	test( 'Block context is reflected in the preview', async () => {
-		await insertBlock( 'Test Context Provider' );
-		const editorPage = page;
-		const previewPage = await openPreviewPage( editorPage );
-		await previewPage.waitForSelector( '.entry-content' );
-
-		// Check default context values are populated.
-		let content = await previewPage.$eval(
-			'.entry-content',
-			( contentWrapper ) => contentWrapper.textContent.trim()
-		);
-		expect( content ).toMatch( /^0,\d+,post$/ );
-
-		// Return to editor to change context value to non-default.
-		await editorPage.bringToFront();
-		await editorPage.focus(
-			'[data-type="gutenberg/test-context-provider"] input'
-		);
-		await editorPage.keyboard.press( 'ArrowRight' );
-		await editorPage.keyboard.type( '123' );
-		await editorPage.waitForSelector( '.editor-post-save-draft' ); // Not entirely clear why it's asynchronous, but likely React scheduling prioritizing keyboard event and deferring the UI update.
-		await saveDraft();
-
-		// Check non-default context values are populated.
-		await previewPage.bringToFront();
-		await previewPage.reload();
-		content = await previewPage.$eval(
-			'.entry-content',
-			( contentWrapper ) => contentWrapper.textContent.trim()
-		);
-		expect( content ).toMatch( /^123,\d+,post$/ );
-
-		// Clean up.
-		await editorPage.bringToFront();
-		await previewPage.close();
-	} );
-} );
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
deleted file mode 100644
index d1537263968192..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/block-directory-add.test.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	searchForBlock,
-	insertBlockDirectoryBlock,
-	setUpResponseMocking,
-	getEditedPostContent,
-	createJSONResponse,
-} from '@wordpress/e2e-test-utils';
-
-const BLOCK1_NAME = 'block-directory-test-block/main-block';
-
-// Urls to mock.
-const SEARCH_URLS = [
-	'/wp/v2/block-directory/search',
-	`rest_route=${ encodeURIComponent( '/wp/v2/block-directory/search' ) }`,
-];
-
-const BLOCK_TYPE_URLS = [
-	`/wp/v2/block-types/${ BLOCK1_NAME }`,
-	`rest_route=${ encodeURIComponent(
-		`/wp/v2/block-types/${ BLOCK1_NAME }`
-	) }`,
-];
-
-const INSTALL_URLS = [
-	'/wp/v2/plugins',
-	`rest_route=${ encodeURIComponent( '/wp/v2/plugins' ) }`,
-];
-
-// Example Blocks.
-const MOCK_BLOCK1 = {
-	name: BLOCK1_NAME,
-	title: 'Block Directory Test Block',
-	description: 'This plugin is useful for the block.',
-	id: 'block-directory-test-block',
-	rating: 0,
-	rating_count: 0,
-	active_installs: 0,
-	author_block_rating: 0,
-	author_block_count: 1,
-	author: 'No Author',
-	icon: 'block-default',
-	assets: [
-		'https://fake_url.com/block.js', // We will mock this.
-	],
-	humanized_updated: '5 months ago',
-	links: {},
-};
-
-const MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS = {
-	plugin: 'block-directory-test-block',
-	status: 'active',
-	name: 'Block Directory',
-	plugin_uri: '',
-	author: 'No Author',
-	author_uri: '',
-	description: {
-		raw: 'This plugin is useful for the block.',
-		rendered: 'This plugin is useful for the block.',
-	},
-	version: '1.0',
-	network_only: false,
-	requires_wp: '',
-	requires_php: '',
-	text_domain: 'block-directory-test-block',
-	_links: {
-		self: [
-			{
-				href: '',
-			},
-		],
-	},
-};
-
-const MOCK_BLOCK2 = {
-	...MOCK_BLOCK1,
-	name: 'block-directory-test-block/secondary-block',
-	title: 'Block Directory Test Block - Pt Deux',
-	id: 'block-directory-test-secondary-block',
-};
-
-// Block that will be registered.
-const block = `( function() {
-	var registerBlockType = wp.blocks.registerBlockType;
-	var el = wp.element.createElement;
-
-	registerBlockType( '${ MOCK_BLOCK1.name }', {
-		title: 'Test Block for Block Directory',
-		icon: 'hammer',
-		category: 'text',
-		attributes: {},
-		edit: function( props ) {
-			return el( 'p', null, 'Test Copy' );
-		},
-		save: function() {
-			return null;
-		},
-	} );
-} )();`;
-
-const MOCK_EMPTY_RESPONSES = [
-	{
-		match: ( request ) =>
-			matchUrl( request.url(), SEARCH_URLS ) &&
-			request.method() === 'GET',
-		onRequestMatch: createJSONResponse( [] ),
-	},
-];
-
-const MOCK_BLOCKS_RESPONSES = [
-	{
-		// Mock response for search with the block.
-		match: ( request ) =>
-			matchUrl( request.url(), SEARCH_URLS ) &&
-			request.method() === 'GET',
-		onRequestMatch: createJSONResponse( [ MOCK_BLOCK1, MOCK_BLOCK2 ] ),
-	},
-	{
-		// Mock response for block type.
-		match: ( request ) => matchUrl( request.url(), BLOCK_TYPE_URLS ),
-		onRequestMatch: createJSONResponse( {} ),
-	},
-	{
-		// Mock response for install.
-		match: ( request ) => matchUrl( request.url(), INSTALL_URLS ),
-		onRequestMatch: createJSONResponse(
-			MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS
-		),
-	},
-	{
-		// Mock the response for the js asset once it gets injected.
-		match: ( request ) => request.url().includes( MOCK_BLOCK1.assets[ 0 ] ),
-		onRequestMatch: createResponse(
-			Buffer.from( block, 'utf8' ),
-			'application/javascript; charset=utf-8'
-		),
-	},
-	{
-		// Mock the post-new page as requested via apiFetch for determining new CSS/JS assets.
-		match: ( request ) => request.url().includes( '/post-new.php' ),
-		onRequestMatch: createResponse(
-			`<html><head><script id="mock-block-js" src="${ MOCK_BLOCK1.assets[ 0 ] }"></script></head><body/></html>`,
-			'text/html; charset=UTF-8'
-		),
-	},
-];
-
-function getResponseObject( obj, contentType ) {
-	return {
-		status: 200,
-		contentType,
-		body: obj,
-	};
-}
-
-function createResponse( mockResponse, contentType ) {
-	return async ( request ) =>
-		request.respond( getResponseObject( mockResponse, contentType ) );
-}
-
-const matchUrl = ( reqUrl, urls ) => {
-	return urls.some( ( el ) => reqUrl.indexOf( el ) >= 0 );
-};
-
-describe( 'adding blocks from block directory', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show an empty state when no plugin is found.', async () => {
-		// Be super weird so there won't be a matching block installed.
-		const impossibleBlockName = '@#$@@Dsdsdfw2#$@';
-
-		// Return an empty list of plugins.
-		await setUpResponseMocking( MOCK_EMPTY_RESPONSES );
-
-		// Search for the block via the inserter.
-		await searchForBlock( impossibleBlockName );
-
-		const selectorContent = await page.evaluate(
-			() =>
-				document.querySelector( '.block-editor-inserter__main-area' )
-					.innerHTML
-		);
-		expect( selectorContent ).toContain(
-			'block-editor-inserter__no-results'
-		);
-	} );
-
-	it( 'Should be able to add (the first) block.', async () => {
-		// Setup our mocks.
-		await setUpResponseMocking( MOCK_BLOCKS_RESPONSES );
-
-		// Search for the block via the inserter.
-		await insertBlockDirectoryBlock( MOCK_BLOCK1.title );
-
-		await page.waitForSelector( `div[data-type="${ MOCK_BLOCK1.name }"]` );
-
-		// The block will auto select and get added, make sure we see it in the content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js b/packages/e2e-tests/specs/editor/plugins/block-icons.test.js
deleted file mode 100644
index d70cf0e615753f..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/block-icons.test.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	pressKeyWithModifier,
-	searchForBlock,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-const INSERTER_BUTTON_SELECTOR =
-	'.block-editor-inserter__main-area .block-editor-block-types-list__item';
-const INSERTER_ICON_WRAPPER_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-types-list__item-icon`;
-const INSERTER_ICON_SELECTOR = `${ INSERTER_BUTTON_SELECTOR } .block-editor-block-icon`;
-const INSPECTOR_ICON_SELECTOR = '.edit-post-sidebar .block-editor-block-icon';
-
-async function getInnerHTML( selector ) {
-	return await page.$eval( selector, ( element ) => element.innerHTML );
-}
-
-async function getBackgroundColor( selector ) {
-	return await page.$eval( selector, ( element ) => {
-		return window.getComputedStyle( element ).backgroundColor;
-	} );
-}
-
-async function getColor( selector ) {
-	return await page.$eval( selector, ( element ) => {
-		return window.getComputedStyle( element ).color;
-	} );
-}
-
-async function getFirstInserterIcon() {
-	return await getInnerHTML( INSERTER_ICON_SELECTOR );
-}
-
-async function selectFirstBlock() {
-	await pressKeyWithModifier( 'access', 'o' );
-	const navButtons = await page.$$(
-		'.block-editor-list-view-block-select-button'
-	);
-	await navButtons[ 0 ].click();
-}
-
-describe( 'Correctly Renders Block Icons on Inserter and Inspector', () => {
-	const dashIconRegex = /<span.*?class=".*?dashicons-cart.*?">.*?<\/span>/;
-	const circleString =
-		'<circle cx="10" cy="10" r="10" fill="red" stroke="blue" stroke-width="10"></circle>';
-	const svgIcon = new RegExp(
-		`<svg.*?viewBox="0 0 20 20".*?>${ circleString }</svg>`
-	);
-
-	const validateSvgIcon = ( iconHtml ) => {
-		expect( iconHtml ).toMatch( svgIcon );
-	};
-
-	const validateDashIcon = ( iconHtml ) => {
-		expect( iconHtml ).toMatch( dashIconRegex );
-	};
-
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-icons' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-icons' );
-	} );
-
-	function testIconsOfBlock( blockName, blockTitle, validateIcon ) {
-		it( 'Renders correctly the icon in the inserter', async () => {
-			await searchForBlock( blockTitle );
-			validateIcon( await getFirstInserterIcon() );
-		} );
-
-		it( 'Can insert the block', async () => {
-			await insertBlock( blockTitle );
-			expect(
-				await getInnerHTML(
-					`[data-type="${ blockName }"] [data-type="core/paragraph"]`
-				)
-			).toEqual( blockTitle );
-		} );
-
-		it( 'Renders correctly the icon on the inspector', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			validateIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
-		} );
-	}
-
-	describe( 'Block with svg icon', () => {
-		const blockName = 'test/test-single-svg-icon';
-		const blockTitle = 'TestSimpleSvgIcon';
-		testIconsOfBlock( blockName, blockTitle, validateSvgIcon );
-	} );
-
-	describe( 'Block with dash icon', () => {
-		const blockName = 'test/test-dash-icon';
-		const blockTitle = 'TestDashIcon';
-		testIconsOfBlock( blockName, blockTitle, validateDashIcon );
-	} );
-
-	describe( 'Block with function icon', () => {
-		const blockName = 'test/test-function-icon';
-		const blockTitle = 'TestFunctionIcon';
-		testIconsOfBlock( blockName, blockTitle, validateSvgIcon );
-	} );
-
-	describe( 'Block with dash icon and background and foreground colors', () => {
-		const blockTitle = 'TestDashIconColors';
-		it( 'Renders the icon in the inserter with the correct colors', async () => {
-			await searchForBlock( blockTitle );
-			validateDashIcon( await getFirstInserterIcon() );
-			expect(
-				await getBackgroundColor( INSERTER_ICON_WRAPPER_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual(
-				'rgb(254, 0, 0)'
-			);
-		} );
-
-		it( 'Renders the icon in the inspector with the correct colors', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			validateDashIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
-			expect(
-				await getBackgroundColor( INSPECTOR_ICON_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual(
-				'rgb(254, 0, 0)'
-			);
-		} );
-	} );
-
-	describe( 'Block with svg icon and background color', () => {
-		const blockTitle = 'TestSvgIconBackground';
-		it( 'Renders the icon in the inserter with the correct background color and an automatically compute readable foreground color', async () => {
-			await searchForBlock( blockTitle );
-			validateSvgIcon( await getFirstInserterIcon() );
-			expect(
-				await getBackgroundColor( INSERTER_ICON_WRAPPER_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSERTER_ICON_WRAPPER_SELECTOR ) ).toEqual(
-				'rgb(248, 249, 249)'
-			);
-		} );
-
-		it( 'Renders correctly the icon on the inspector', async () => {
-			await insertBlock( blockTitle );
-			await openDocumentSettingsSidebar();
-			await selectFirstBlock();
-			validateSvgIcon( await getInnerHTML( INSPECTOR_ICON_SELECTOR ) );
-			expect(
-				await getBackgroundColor( INSPECTOR_ICON_SELECTOR )
-			).toEqual( 'rgb(1, 0, 0)' );
-			expect( await getColor( INSPECTOR_ICON_SELECTOR ) ).toEqual(
-				'rgb(248, 249, 249)'
-			);
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js
deleted file mode 100644
index 886382a4667b1e..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	searchForBlock,
-	pressKeyWithModifier,
-	openDocumentSettingsSidebar,
-	togglePreferencesOption,
-	toggleMoreMenu,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block variations', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-variations' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-variations' );
-	} );
-
-	const expectInserterItem = async ( blockTitle ) => {
-		const inserterItem = await page.$x(
-			`//button[contains(@class, 'block-editor-block-types-list__item')]//span[text()="${ blockTitle }"]`
-		);
-		expect( inserterItem ).toBeDefined();
-		expect( inserterItem ).toHaveLength( 1 );
-	};
-
-	test( 'Search for the overridden default Quote block', async () => {
-		await searchForBlock( 'Quote' );
-
-		expect( await page.$( '.editor-block-list-item-quote' ) ).toBeNull();
-		expectInserterItem( 'Large Quote' );
-	} );
-
-	test( 'Insert the overridden default Quote block variation', async () => {
-		await insertBlock( 'Large Quote' );
-
-		expect(
-			await page.$(
-				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
-			)
-		).toBeDefined();
-	} );
-
-	test( 'Insert the Large Quote block variation with slash command', async () => {
-		await insertBlock( 'Paragraph' );
-
-		await page.keyboard.type( '/large' );
-		await page.keyboard.press( 'Enter' );
-
-		expect(
-			await page.$(
-				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
-			)
-		).toBeDefined();
-	} );
-
-	test( 'Search for the Paragraph block with 2 additional variations', async () => {
-		await searchForBlock( 'Paragraph' );
-
-		expectInserterItem( 'Paragraph' );
-		expectInserterItem( 'Success Message' );
-		expectInserterItem( 'Warning Message' );
-	} );
-
-	test( 'Insert the Success Message block variation', async () => {
-		await insertBlock( 'Success Message' );
-
-		const successMessageBlock = await page.$(
-			'.wp-block[data-type="core/paragraph"]'
-		);
-		expect( successMessageBlock ).toBeDefined();
-		expect(
-			await successMessageBlock.evaluate( ( node ) => node.innerText )
-		).toBe( 'This is a success message!' );
-	} );
-	test( 'Pick the additional variation in the inserted Columns block', async () => {
-		await insertBlock( 'Columns' );
-
-		const fourColumnsVariation = await page.waitForSelector(
-			'.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]'
-		);
-		await fourColumnsVariation.click();
-		expect(
-			await page.$$(
-				'.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]'
-			)
-		).toHaveLength( 4 );
-	} );
-	// @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook).
-	describe( 'testing block display information with matching variations', () => {
-		beforeEach( async () => {
-			await togglePreferencesOption(
-				'General',
-				'Display block breadcrumbs',
-				true
-			);
-			await toggleMoreMenu( 'close' );
-		} );
-
-		afterEach( async () => {
-			await togglePreferencesOption(
-				'General',
-				'Display block breadcrumbs',
-				false
-			);
-			await toggleMoreMenu( 'close' );
-		} );
-
-		const getActiveBreadcrumb = async () =>
-			page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-block-breadcrumb__current'
-					).textContent
-			);
-		const getFirstNavigationItem = async () => {
-			await pressKeyWithModifier( 'access', 'o' );
-			// This also returns the visually hidden text `(selected block)`.
-			// For example `Paragraph(selected block)`. In order to hide this
-			// implementation detail and search for childNodes, we choose to
-			// test with `String.prototype.startsWith()`.
-			return page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-list-view-block-select-button'
-					).textContent
-			);
-		};
-		const getBlockCardDescription = async () => {
-			await openDocumentSettingsSidebar();
-			return page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-block-card__description'
-					).textContent
-			);
-		};
-
-		it( 'should show block information when no matching variation is found', async () => {
-			await insertBlock( 'Large Quote' );
-			// Select the quote block.
-			await page.keyboard.press( 'ArrowDown' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Quote' );
-			const navigationItem = await getFirstNavigationItem();
-			expect( navigationItem.startsWith( 'Quote' ) ).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar'
-			);
-		} );
-		it( 'should display variations info if all declared', async () => {
-			await insertBlock( 'Success Message' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Success Message' );
-			const navigationItem = await getFirstNavigationItem();
-			expect(
-				navigationItem.startsWith( 'Success Message' )
-			).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'This block displays a success message. This description overrides the default one provided for the Paragraph block.'
-			);
-		} );
-		it( 'should display mixed block and variation match information', async () => {
-			// Warning Message variation is missing the `description`.
-			await insertBlock( 'Warning Message' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Warning Message' );
-			const navigationItem = await getFirstNavigationItem();
-			expect(
-				navigationItem.startsWith( 'Warning Message' )
-			).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'Start with the basic building block of all narrative.'
-			);
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js
deleted file mode 100644
index 183813a9511362..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	closeGlobalBlockInserter,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlockInserterItemTitles,
-	insertBlock,
-	openGlobalBlockInserter,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Child Blocks', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-child-blocks' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-child-blocks' );
-	} );
-
-	it( 'are hidden from the global block inserter', async () => {
-		await openGlobalBlockInserter();
-		await expect( await getAllBlockInserterItemTitles() ).not.toContain(
-			'Child Blocks Child'
-		);
-	} );
-
-	it( 'shows up in a parent block', async () => {
-		await insertBlock( 'Child Blocks Unrestricted Parent' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector(
-			'[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender'
-		);
-		await page.click(
-			'[data-type="test/child-blocks-unrestricted-parent"] .block-editor-default-block-appender'
-		);
-		await openGlobalBlockInserter();
-		const inserterItemTitles = await getAllBlockInserterItemTitles();
-		expect( inserterItemTitles ).toContain( 'Child Blocks Child' );
-		expect( inserterItemTitles.length ).toBeGreaterThan( 20 );
-	} );
-
-	it( 'display in a parent block with allowedItems', async () => {
-		await insertBlock( 'Child Blocks Restricted Parent' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector(
-			'[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
-		);
-		await page.click(
-			'[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender'
-		);
-		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Child Blocks Child',
-			'Image',
-			'Paragraph',
-		] );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js
deleted file mode 100644
index 4c159571da9fd8..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/container-blocks.test.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	insertBlock,
-	switchEditorModeTo,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'InnerBlocks Template Sync', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-innerblocks-templates' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-innerblocks-templates' );
-	} );
-
-	const insertBlockAndAddParagraphInside = async ( blockName, blockSlug ) => {
-		const paragraphToAdd = `
-			<!-- wp:paragraph -->
-			<p>added paragraph</p>
-			<!-- /wp:paragraph -->
-		`;
-		await insertBlock( blockName );
-		await switchEditorModeTo( 'Code' );
-		await page.$eval(
-			'.editor-post-text-editor',
-			( element, _paragraph, _blockSlug ) => {
-				const blockDelimiter = `<!-- /wp:${ _blockSlug } -->`;
-				element.value = element.value.replace(
-					blockDelimiter,
-					`${ _paragraph }${ blockDelimiter }`
-				);
-			},
-			paragraphToAdd,
-			blockSlug
-		);
-		// Press "Enter" inside the code editor to fire the `onChange` event for the new value.
-		await page.click( '.editor-post-text-editor' );
-		await pressKeyWithModifier( 'primary', 'A' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Enter' );
-		await switchEditorModeTo( 'Visual' );
-	};
-
-	it( 'Ensures blocks without locking are kept intact even if they do not match the template', async () => {
-		await insertBlockAndAddParagraphInside(
-			'Test Inner Blocks no locking',
-			'test/test-inner-blocks-no-locking'
-		);
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'Removes blocks that are not expected by the template if a lock all exists', async () => {
-		await insertBlockAndAddParagraphInside(
-			'Test InnerBlocks locking all',
-			'test/test-inner-blocks-locking-all'
-		);
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/27897.
-	it( `Synchronizes blocks if lock 'all' is set and the template prop is changed`, async () => {
-		// Insert the template and assert that the template has its initial value.
-		await insertBlock( 'Test Inner Blocks update locked template' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Trigger a template update and assert that a second block is now present.
-		const [ button ] = await page.$x(
-			`//button[contains(text(), 'Update template')]`
-		);
-		await button.click();
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'Ensure inner block writing flow works as expected without additional paragraphs added', async () => {
-		const TEST_BLOCK_NAME = 'Test Inner Blocks Paragraph Placeholder';
-
-		await insertBlock( TEST_BLOCK_NAME );
-		await page.keyboard.type( 'Test Paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
-
-describe( 'Container block without paragraph support', () => {
-	beforeAll( async () => {
-		await activatePlugin(
-			'gutenberg-test-container-block-without-paragraph'
-		);
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin(
-			'gutenberg-test-container-block-without-paragraph'
-		);
-	} );
-
-	it( 'ensures we can use the alternative block appender properly', async () => {
-		await insertBlock( 'Container without paragraph' );
-
-		// Open the specific appender used when there's no paragraph support.
-		await page.click(
-			'.block-editor-inner-blocks .block-list-appender .block-list-appender__toggle'
-		);
-
-		// Insert an image block.
-		const insertButton = (
-			await page.$x( `//button//span[contains(text(), 'Image')]` )
-		 )[ 0 ];
-		await insertButton.click();
-
-		// Check the inserted content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
deleted file mode 100644
index 33532f7c43f8bb..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
+++ /dev/null
@@ -1,250 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	insertBlock,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	setPostContent,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'cpt locking', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-cpt-locking' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-cpt-locking' );
-	} );
-
-	const shouldDisableTheInserter = async () => {
-		expect(
-			await page.evaluate( () => {
-				const inserter = document.querySelector(
-					'.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]'
-				);
-				return inserter.getAttribute( 'disabled' );
-			} )
-		).not.toBeNull();
-	};
-
-	const shouldNotAllowBlocksToBeRemoved = async () => {
-		await page.type(
-			'.block-editor-rich-text__editable[data-type="core/paragraph"]',
-			'p1'
-		);
-		await clickBlockToolbarButton( 'Options' );
-		expect(
-			await page.$x(
-				'//button/span[contains(text(), "Remove Paragraph")]'
-			)
-		).toHaveLength( 0 );
-	};
-
-	const shouldAllowBlocksToBeMoved = async () => {
-		await page.click(
-			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]'
-		);
-		expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
-		await page.click( 'button[aria-label="Move up"]' );
-		await page.type(
-			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
-			'p1'
-		);
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	};
-
-	describe( 'template_lock all', () => {
-		beforeEach( async () => {
-			await createNewPost( { postType: 'locked-all-post' } );
-		} );
-
-		it( 'should disable the inserter', shouldDisableTheInserter );
-
-		it(
-			'should not allow blocks to be removed',
-			shouldNotAllowBlocksToBeRemoved
-		);
-
-		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
-				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
-			);
-			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
-		} );
-
-		it( 'should not error when deleting the cotents of a paragraph', async () => {
-			await page.click(
-				'.block-editor-block-list__block[data-type="core/paragraph"]'
-			);
-			const textToType = 'Paragraph';
-			await page.keyboard.type( 'Paragraph' );
-			await pressKeyTimes( 'Backspace', textToType.length + 1 );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should insert line breaks when using enter and shift-enter', async () => {
-			await page.click(
-				'.block-editor-block-list__block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'First line' );
-			await pressKeyTimes( 'Enter', 1 );
-			await page.keyboard.type( 'Second line' );
-			await pressKeyWithModifier( 'shift', 'Enter' );
-			await page.keyboard.type( 'Third line' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should show invalid template notice if the blocks do not match the templte', async () => {
-			const content = await getEditedPostContent();
-			const [ , contentWithoutImage ] =
-				content.split( '<!-- /wp:image -->' );
-			await setPostContent( contentWithoutImage );
-			const noticeContent = await page.waitForSelector(
-				'.editor-template-validation-notice .components-notice__content'
-			);
-			expect(
-				await page.evaluate(
-					( _noticeContent ) => _noticeContent.firstChild.nodeValue,
-					noticeContent
-				)
-			).toEqual(
-				'The content of your post doesn’t match the template assigned to your post type.'
-			);
-		} );
-
-		it( 'should not allow blocks to be inserted in inner blocks', async () => {
-			await page.click( 'button[aria-label="Two columns; equal split"]' );
-			await page.evaluate(
-				() => new Promise( window.requestIdleCallback )
-			);
-			expect(
-				await page.$(
-					'.wp-block-column .block-editor-button-block-appender'
-				)
-			).toBeNull();
-
-			expect(
-				await page.evaluate( () => {
-					const inserter = document.querySelector(
-						'.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]'
-					);
-					return inserter.getAttribute( 'disabled' );
-				} )
-			).not.toBeNull();
-		} );
-	} );
-
-	describe( 'template_lock insert', () => {
-		beforeEach( async () => {
-			await createNewPost( { postType: 'locked-insert-post' } );
-		} );
-
-		it( 'should disable the inserter', shouldDisableTheInserter );
-
-		it(
-			'should not allow blocks to be removed',
-			shouldNotAllowBlocksToBeRemoved
-		);
-
-		it( 'should allow blocks to be moved', shouldAllowBlocksToBeMoved );
-	} );
-
-	describe( 'template_lock false', () => {
-		beforeEach( async () => {
-			await createNewPost( { postType: 'not-locked-post' } );
-		} );
-
-		it( 'should allow blocks to be inserted', async () => {
-			expect(
-				// "Add block" selector is required to make sure performance comparison
-				// doesn't fail on older branches where we still had "Add block" as label.
-				await page.$(
-					'.edit-post-header [aria-label="Add block"], .edit-post-header [aria-label="Toggle block inserter"]'
-				)
-			).not.toBeNull();
-			await insertBlock( 'List' );
-			await page.keyboard.type( 'List content' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should allow blocks to be removed', async () => {
-			await page.type(
-				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
-				'p1'
-			);
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Remove Paragraph' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should allow blocks to be moved', shouldAllowBlocksToBeMoved );
-	} );
-
-	describe( 'template_lock all unlocked group', () => {
-		beforeEach( async () => {
-			await createNewPost( {
-				postType: 'l-post-ul-group',
-			} );
-		} );
-
-		it( 'should allow blocks to be removed', async () => {
-			await page.type(
-				'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
-				'p1'
-			);
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Remove Paragraph' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should allow blocks to be moved', shouldAllowBlocksToBeMoved );
-	} );
-
-	describe( 'template_lock all locked group', () => {
-		beforeEach( async () => {
-			await createNewPost( {
-				postType: 'l-post-l-group',
-			} );
-		} );
-
-		it(
-			'should not allow blocks to be removed',
-			shouldNotAllowBlocksToBeRemoved
-		);
-
-		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
-				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
-			);
-			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
-		} );
-	} );
-
-	describe( 'template_lock all inherited group', () => {
-		beforeEach( async () => {
-			await createNewPost( {
-				postType: 'l-post-i-group',
-			} );
-		} );
-
-		it(
-			'should not allow blocks to be removed',
-			shouldNotAllowBlocksToBeRemoved
-		);
-
-		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
-				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
-			);
-			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js b/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js
deleted file mode 100644
index 61c374ef5e5aef..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/custom-post-types.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-	findSidebarPanelWithTitle,
-	clickBlockAppender,
-} from '@wordpress/e2e-test-utils';
-
-const openPageAttributesPanel = async () => {
-	const openButton = await findSidebarPanelWithTitle( 'Page Attributes' );
-
-	// Get the classes from the panel.
-	const buttonClassName = await (
-		await openButton.getProperty( 'className' )
-	 ).jsonValue();
-
-	// Open the panel if needed.
-	if ( -1 === buttonClassName.indexOf( 'is-opened' ) ) {
-		await openButton.click();
-	}
-};
-
-describe( 'Test Custom Post Types', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	it( 'should be able to create an hierarchical post without title support', async () => {
-		const PARENT_PAGE_INPUT =
-			'.editor-page-attributes__parent input:not([disabled])';
-		const SUGGESTION =
-			'.editor-page-attributes__parent .components-form-token-field__suggestion:first-child';
-
-		// Create a parent post.
-		await createNewPost( { postType: 'hierar-no-title' } );
-		await clickBlockAppender();
-		await page.keyboard.type( 'Parent Post' );
-		await publishPost();
-		// Create a post that is a child of the previously created post.
-		await createNewPost( { postType: 'hierar-no-title' } );
-		await openPageAttributesPanel();
-		await page.waitForSelector( PARENT_PAGE_INPUT );
-		await page.click( PARENT_PAGE_INPUT );
-		await page.waitForSelector( SUGGESTION );
-		const optionToSelect = await page.$( SUGGESTION );
-		const valueToSelect = await page.$eval(
-			SUGGESTION,
-			( element ) => element.textContent
-		);
-		await optionToSelect.click();
-		await clickBlockAppender();
-		await page.keyboard.type( 'Child Post' );
-		await publishPost();
-		// Reload the child post and verify it is still correctly selected as a child post.
-		await page.reload();
-		await page.waitForSelector( PARENT_PAGE_INPUT );
-		// Wait for the list of suggestions to fetch
-		// There should be a better way to do that.
-		await page.waitForFunction(
-			( [ value, inputSelector ] ) =>
-				document.querySelector( inputSelector ).value === value,
-			{},
-			[ valueToSelect, PARENT_PAGE_INPUT ]
-		);
-	} );
-	it( 'should create a cpt with a legacy block in its template without WSOD', async () => {
-		await createNewPost( { postType: 'leg_block_in_tpl' } );
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello there' );
-		await page.waitForSelector( '[data-type="core/embed"]' );
-		await publishPost();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js b/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js
deleted file mode 100644
index 42c476f9cf12a4..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/custom-taxonomies.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	findSidebarPanelWithTitle,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Custom Taxonomies labels are used', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-taxonomies' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-taxonomies' );
-	} );
-
-	it( 'Ensures the custom taxonomy labels are respected', async () => {
-		// Open the Setting sidebar.
-		await openDocumentSettingsSidebar();
-
-		const openButton = await findSidebarPanelWithTitle( 'Model' );
-		expect( openButton ).not.toBeFalsy();
-
-		// Get the classes from the panel.
-		const buttonClassName = await (
-			await openButton.getProperty( 'className' )
-		 ).jsonValue();
-
-		// Open the panel if needed.
-		if ( -1 === buttonClassName.indexOf( 'is-opened' ) ) {
-			await openButton.click();
-		}
-
-		// Check the add new button.
-		const labelNew = await page.$x(
-			"//label[@class='components-form-token-field__label' and contains(text(), 'Add New Model')]"
-		);
-		expect( labelNew ).not.toBeFalsy();
-
-		// Fill with one entry.
-		await page.type(
-			'input.components-form-token-field__input',
-			'Model 1'
-		);
-		await page.keyboard.press( 'Enter' );
-
-		// Check the "Remove Model"
-		const value = await page.$x(
-			"//div[@class='components-form-token-field__input-container']//span//button[@aria-label='Remove Model']"
-		);
-		expect( value ).not.toBeFalsy();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
deleted file mode 100644
index 52b22e550f41ce..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	getEditedPostContent,
-	canvas,
-	createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, property ) {
-	await context.waitForSelector( '.wp-block-test-iframed-inline-styles' );
-	return await context.evaluate( ( prop ) => {
-		const container = document.querySelector(
-			'.wp-block-test-iframed-inline-styles'
-		);
-		return window.getComputedStyle( container )[ prop ];
-	}, property );
-}
-
-describe( 'iframed inline styles', () => {
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-iframed-inline-styles' );
-		await createNewPost( { postType: 'page' } );
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
-	} );
-
-	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
-	it( 'should load inline styles in iframe', async () => {
-		await insertBlock( 'Iframed Inline Styles' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-		expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' );
-		expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' );
-
-		await createNewTemplate( 'Iframed Test' );
-
-		// Inline styles of properly enqueued stylesheet should load.
-		expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
-
-		// Inline styles of stylesheet loaded with the compatibility layer
-		// should load.
-		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
-			'2px'
-		);
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
deleted file mode 100644
index 47767edc8e5d29..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	getEditedPostContent,
-	canvas,
-	createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function didMasonryLoadCorrectly( context ) {
-	return await context.evaluate( () => {
-		const container = document.querySelector(
-			'.wp-block-test-iframed-masonry-block'
-		);
-		return (
-			// Expect Masonry to set a non-zero height.
-			parseInt( container.style.height, 10 ) > 0 &&
-			// Expect Masonry to absolute position items.
-			container.firstElementChild.style.position === 'absolute'
-		);
-	} );
-}
-
-describe( 'iframed masonry block', () => {
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
-		await createNewPost( { postType: 'page' } );
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-iframed-masonry-block' );
-	} );
-
-	it( 'should load script and dependencies in iframe', async () => {
-		await insertBlock( 'Iframed Masonry Block' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-		expect( await didMasonryLoadCorrectly( page ) ).toBe( true );
-
-		await createNewTemplate( 'Iframed Test' );
-		await canvas().waitForSelector( '.grid-item[style]' );
-
-		expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js
deleted file mode 100644
index 9d8e5975d3f2ec..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	canvas,
-	createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-async function getComputedStyle( context, property ) {
-	await context.waitForSelector(
-		'.wp-block-test-iframed-multiple-stylesheets'
-	);
-	return await context.evaluate( ( prop ) => {
-		const container = document.querySelector(
-			'.wp-block-test-iframed-multiple-stylesheets'
-		);
-		return window.getComputedStyle( container )[ prop ];
-	}, property );
-}
-
-describe( 'iframed multiple block stylesheets', () => {
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
-		await createNewPost( { postType: 'page' } );
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-iframed-multiple-stylesheets' );
-	} );
-
-	it( 'should load multiple block stylesheets in iframe', async () => {
-		await insertBlock( 'Iframed Multiple Stylesheets' );
-
-		await page.waitForSelector(
-			'.wp-block-test-iframed-multiple-stylesheets'
-		);
-		await createNewTemplate( 'Iframed Test' );
-
-		// Style loaded from the main stylesheet.
-		expect( await getComputedStyle( canvas(), 'border-style' ) ).toBe(
-			'dashed'
-		);
-
-		// Style loaded from the additional stylesheet.
-		expect( await getComputedStyle( canvas(), 'border-color' ) ).toBe(
-			'rgb(255, 0, 0)'
-		);
-
-		// Style loaded from the a stylesheet using path instead of handle.
-		expect( await getComputedStyle( canvas(), 'background-color' ) ).toBe(
-			'rgb(0, 0, 0)'
-		);
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
deleted file mode 100644
index 3eb1ee4775f74b..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlockInserterItemTitles,
-	insertBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Allowed Blocks Setting on InnerBlocks', () => {
-	const paragraphSelector =
-		'.block-editor-rich-text__editable[data-type="core/paragraph"]';
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-innerblocks-allowed-blocks' );
-	} );
-
-	it( 'allows all blocks if the allowed blocks setting was not set', async () => {
-		const parentBlockSelector = '[data-type="test/allowed-blocks-unset"]';
-		const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`;
-		await insertBlock( 'Allowed Blocks Unset' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector( childParagraphSelector );
-		await page.click( childParagraphSelector );
-		await openGlobalBlockInserter();
-		await expect(
-			(
-				await getAllBlockInserterItemTitles()
-			 ).length
-		).toBeGreaterThan( 20 );
-	} );
-
-	it( 'allows the blocks if the allowed blocks setting was set', async () => {
-		const parentBlockSelector = '[data-type="test/allowed-blocks-set"]';
-		const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`;
-		await insertBlock( 'Allowed Blocks Set' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector( childParagraphSelector );
-		await page.click( childParagraphSelector );
-		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Button',
-			'Gallery',
-			'List',
-			'Media & Text',
-			'Quote',
-		] );
-	} );
-
-	it( 'correctly applies dynamic allowed blocks restrictions', async () => {
-		await insertBlock( 'Allowed Blocks Dynamic' );
-		await closeGlobalBlockInserter();
-		const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]';
-		const blockAppender = '.block-list-appender button';
-		const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`;
-		await page.waitForSelector( appenderSelector );
-		await page.click( appenderSelector );
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Image',
-			'List',
-		] );
-		const insertButton = (
-			await page.$x( `//button//span[contains(text(), 'List')]` )
-		 )[ 0 ];
-		await insertButton.click();
-		// Select the list wrapper so the image is inserable.
-		await page.keyboard.press( 'ArrowUp' );
-		await insertBlock( 'Image' );
-		await closeGlobalBlockInserter();
-		await page.waitForSelector( '.product[data-number-of-children="2"]' );
-		await clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
-		// This focus shouldn't be neessary but there's a bug in trunk right now
-		// Where if you open the inserter, don't do anything and click the "appender" on the canvas
-		// the appender is not opened right away.
-		// It needs to be investigated on its own.
-		await page.focus( appenderSelector );
-		await page.click( appenderSelector );
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Gallery',
-			'Video',
-		] );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-render-appender.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-render-appender.test.js
deleted file mode 100644
index 81a7d943331bb4..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-render-appender.test.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getAllBlockInserterItemTitles,
-	getEditedPostContent,
-	insertBlock,
-	closeGlobalBlockInserter,
-} from '@wordpress/e2e-test-utils';
-
-const INSERTER_RESULTS_SELECTOR =
-	'.block-editor-inserter__quick-inserter-results';
-const QUOTE_INSERT_BUTTON_SELECTOR = '//button[.="Quote"]';
-const APPENDER_SELECTOR = '.my-custom-awesome-appender';
-const DYNAMIC_APPENDER_SELECTOR = 'my-dynamic-blocks-appender';
-
-describe( 'RenderAppender prop of InnerBlocks', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-innerblocks-render-appender' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-innerblocks-render-appender' );
-	} );
-
-	it( 'Users can customize the appender and can still insert blocks using exposed components', async () => {
-		// Insert the InnerBlocks renderAppender block.
-		await insertBlock( 'InnerBlocks renderAppender' );
-		await closeGlobalBlockInserter();
-		// Wait for the custom block appender to appear.
-		await page.waitForSelector( APPENDER_SELECTOR );
-		// Verify if the custom block appender text is the expected one.
-		expect(
-			await page.evaluate(
-				( el ) => el.innerText,
-				await page.$( `${ APPENDER_SELECTOR } > span` )
-			)
-		).toEqual( 'My custom awesome appender' );
-
-		// Open the inserter of our custom block appender and expand all the categories.
-		await page.click(
-			`${ APPENDER_SELECTOR } .block-editor-button-block-appender`
-		);
-		// Verify if the blocks the custom inserter is rendering are the expected ones.
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Quote',
-			'Video',
-		] );
-
-		// Find the quote block insert button option within the inserter popover.
-		const inserterPopover = await page.$( INSERTER_RESULTS_SELECTOR );
-		const quoteButton = (
-			await inserterPopover.$x( QUOTE_INSERT_BUTTON_SELECTOR )
-		 )[ 0 ];
-
-		// Insert a quote block.
-		await quoteButton.click();
-		// Verify if the post content is the expected one e.g: the quote was inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'Users can dynamically customize the appender', async () => {
-		// Insert the InnerBlocks renderAppender dynamic block.
-		await insertBlock( 'InnerBlocks renderAppender dynamic' );
-		await closeGlobalBlockInserter();
-
-		// Wait for the custom dynamic block appender to appear.
-		await page.waitForSelector( '.' + DYNAMIC_APPENDER_SELECTOR );
-
-		// Verify if the custom block appender text is the expected one.
-		await page.waitForXPath(
-			`//*[contains(@class, "${ DYNAMIC_APPENDER_SELECTOR }")]/span[contains(@class, "empty-blocks-appender")][contains(text(), "Empty Blocks Appender")]`
-		);
-
-		// Open the inserter of our custom block appender and expand all the categories.
-		const blockAppenderButtonSelector = `.${ DYNAMIC_APPENDER_SELECTOR } .block-editor-button-block-appender`;
-		await page.click( blockAppenderButtonSelector );
-
-		// Verify if the blocks the custom inserter is rendering are the expected ones.
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
-			'Quote',
-			'Video',
-		] );
-
-		// Find the quote block insert button option within the inserter popover.
-		const inserterPopover = await page.$( INSERTER_RESULTS_SELECTOR );
-		const quoteButton = (
-			await inserterPopover.$x( QUOTE_INSERT_BUTTON_SELECTOR )
-		 )[ 0 ];
-
-		// Insert a quote block.
-		await quoteButton.click();
-
-		// Select the quote block.
-		await page.keyboard.press( 'ArrowDown' );
-
-		// Verify if the custom block appender text changed as expected.
-		await page.waitForXPath(
-			`//*[contains(@class, "${ DYNAMIC_APPENDER_SELECTOR }")]/span[contains(@class, "single-blocks-appender")][contains(text(), "Single Blocks Appender")]`
-		);
-
-		// Verify that the custom appender button is still being rendered.
-		expect( await page.$( blockAppenderButtonSelector ) ).toBeTruthy();
-
-		// Insert a video block.
-		await insertBlock( 'Video' );
-
-		// Verify if the custom block appender text changed as expected.
-		await page.waitForXPath(
-			`//*[contains(@class, "${ DYNAMIC_APPENDER_SELECTOR }")]/span[contains(@class, "multiple-blocks-appender")][contains(text(), "Multiple Blocks Appender")]`
-		);
-
-		// Verify that the custom appender button is now not being rendered.
-		expect( await page.$( blockAppenderButtonSelector ) ).toBeFalsy();
-
-		// Verify that final block markup is the expected one.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js
deleted file mode 100644
index a0a83fbf90e616..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	createEmbeddingMatcher,
-	createJSONResponse,
-	setUpResponseMocking,
-} from '@wordpress/e2e-test-utils';
-
-const MOCK_RESPONSES = [
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/wordpress' ),
-		onRequestMatch: createJSONResponse( {
-			url: 'https://twitter.com/wordpress',
-			html: '<p>Mock success response.</p>',
-			type: 'rich',
-			provider_name: 'Twitter',
-			provider_url: 'https://twitter.com',
-			version: '1.0',
-		} ),
-	},
-];
-
-describe( 'Embed block inside a locked all parent', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-innerblocks-locking-all-embed' );
-	} );
-
-	beforeEach( async () => {
-		await setUpResponseMocking( MOCK_RESPONSES );
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin(
-			'gutenberg-test-innerblocks-locking-all-embed'
-		);
-	} );
-
-	it( 'embed block should be able to embed external content', async () => {
-		await insertBlock( 'Test Inner Blocks Locking All Embed' );
-		const embedInputSelector =
-			'.components-placeholder__input[aria-label="Embed URL"]';
-		await page.waitForSelector( embedInputSelector );
-		await page.click( embedInputSelector );
-		// This URL should not have a trailing slash.
-		await page.keyboard.type( 'https://twitter.com/wordpress' );
-		await page.keyboard.press( 'Enter' );
-		// The twitter block should appear correctly.
-		await page.waitForSelector( 'figure.wp-block-embed' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/meta-attribute-block.test.js b/packages/e2e-tests/specs/editor/plugins/meta-attribute-block.test.js
deleted file mode 100644
index a95d11b4f7dadb..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/meta-attribute-block.test.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	insertBlock,
-	saveDraft,
-	pressKeyTimes,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block with a meta attribute', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-meta-attribute-block' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-meta-attribute-block' );
-	} );
-
-	describe.each( [ [ 'Early Registration' ], [ 'Late Registration' ] ] )(
-		'%s',
-		( variant ) => {
-			it( 'Should persist the meta attribute properly', async () => {
-				await insertBlock( `Test Meta Attribute Block (${ variant })` );
-				await page.keyboard.type( 'Value' );
-
-				// Regression Test: Previously the caret would wrongly reset to the end
-				// of any input for meta-sourced attributes, due to syncing behavior of
-				// meta attribute updates.
-				//
-				// See: https://github.com/WordPress/gutenberg/issues/15739
-				await pressKeyTimes( 'ArrowLeft', 5 );
-				await page.keyboard.type( 'Meta ' );
-
-				await saveDraft();
-				await page.reload();
-				await page.waitForSelector( '.edit-post-layout' );
-
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				const persistedValue = await page.evaluate(
-					() => document.querySelector( '.my-meta-input' ).value
-				);
-				expect( persistedValue ).toBe( 'Meta Value' );
-			} );
-
-			it( 'Should use the same value in all the blocks', async () => {
-				await insertBlock( `Test Meta Attribute Block (${ variant })` );
-				await insertBlock( `Test Meta Attribute Block (${ variant })` );
-				await insertBlock( `Test Meta Attribute Block (${ variant })` );
-				await page.keyboard.type( 'Meta Value' );
-
-				const inputs = await page.$$( '.my-meta-input' );
-				await Promise.all(
-					inputs.map( async ( input ) => {
-						// Clicking the input selects the block,
-						// and selecting the block enables the sync data mode
-						// as otherwise the asynchronous re-rendering of unselected blocks
-						// may cause the input to have not yet been updated for the other blocks.
-						await input.click();
-						const inputValue = await input.getProperty( 'value' );
-						expect( await inputValue.jsonValue() ).toBe(
-							'Meta Value'
-						);
-					} )
-				);
-			} );
-
-			it( 'Should persist the meta attribute properly in a different post type', async () => {
-				await createNewPost( { postType: 'page' } );
-				await insertBlock( `Test Meta Attribute Block (${ variant })` );
-				await page.keyboard.type( 'Value' );
-
-				// Regression Test: Previously the caret would wrongly reset to the end
-				// of any input for meta-sourced attributes, due to syncing behavior of
-				// meta attribute updates.
-				//
-				// See: https://github.com/WordPress/gutenberg/issues/15739
-				await pressKeyTimes( 'ArrowLeft', 5 );
-				await page.keyboard.type( 'Meta ' );
-
-				await saveDraft();
-				await page.reload();
-				await page.waitForSelector( '.edit-post-layout' );
-
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				const persistedValue = await page.evaluate(
-					() => document.querySelector( '.my-meta-input' ).value
-				);
-				expect( persistedValue ).toBe( 'Meta Value' );
-			} );
-		}
-	);
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js b/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js
deleted file mode 100644
index 6b3001c96d80bb..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	findSidebarPanelToggleButtonWithTitle,
-	insertBlock,
-	openDocumentSettingsSidebar,
-	publishPost,
-	saveDraft,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Meta boxes', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-meta-box' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-meta-box' );
-	} );
-
-	it( 'Should save the post', async () => {
-		// Save should not be an option for new empty post.
-		expect( await page.$( '.editor-post-save-draft' ) ).toBe( null );
-
-		// Add title to enable valid non-empty post save.
-		await page.type( '.editor-post-title__input', 'Hello Meta' );
-		expect( await page.$( '.editor-post-save-draft' ) ).not.toBe( null );
-
-		await saveDraft();
-
-		// After saving, affirm that the button returns to Save Draft.
-		await page.waitForSelector( '.editor-post-save-draft' );
-	} );
-
-	it( 'Should render dynamic blocks when the meta box uses the excerpt for front end rendering', async () => {
-		// Publish a post so there's something for the latest posts dynamic block to render.
-		await page.type( '.editor-post-title__input', 'A published post' );
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Hello there!' );
-		await publishPost();
-
-		// Publish a post with the latest posts dynamic block.
-		await createNewPost();
-		await page.type( '.editor-post-title__input', 'Dynamic block test' );
-		await insertBlock( 'Latest Posts' );
-		await publishPost();
-
-		// View the post.
-		const viewPostLinks = await page.$x(
-			"//a[contains(text(), 'View Post')]"
-		);
-		await viewPostLinks[ 0 ].click();
-		await page.waitForNavigation();
-
-		// Check the dynamic block appears.
-		const latestPostsBlock = await page.waitForSelector(
-			'.wp-block-latest-posts'
-		);
-
-		expect(
-			await latestPostsBlock.evaluate( ( block ) => block.textContent )
-		).toContain( 'A published post' );
-
-		expect(
-			await latestPostsBlock.evaluate( ( block ) => block.textContent )
-		).toContain( 'Dynamic block test' );
-	} );
-
-	it( 'Should render the excerpt in meta based on post content if no explicit excerpt exists', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Excerpt from content.' );
-		await page.type( '.editor-post-title__input', 'A published post' );
-		await publishPost();
-
-		// View the post.
-		const viewPostLinks = await page.$x(
-			"//a[contains(text(), 'View Post')]"
-		);
-		await viewPostLinks[ 0 ].click();
-		await page.waitForNavigation();
-
-		// Retrieve the excerpt used as meta.
-		const metaExcerpt = await page.evaluate( () => {
-			return document
-				.querySelector( 'meta[property="gutenberg:hello"]' )
-				.getAttribute( 'content' );
-		} );
-
-		expect( metaExcerpt ).toEqual( 'Excerpt from content.' );
-	} );
-
-	it( 'Should render the explicitly set excerpt in meta instead of the content based one', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Excerpt from content.' );
-		await page.type( '.editor-post-title__input', 'A published post' );
-
-		// Open the excerpt panel.
-		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
-			'Excerpt'
-		);
-		if ( excerptButton ) {
-			await excerptButton.click( 'button' );
-		}
-
-		await page.waitForSelector( '.editor-post-excerpt textarea' );
-
-		await page.type(
-			'.editor-post-excerpt textarea',
-			'Explicitly set excerpt.'
-		);
-
-		await publishPost();
-
-		// View the post.
-		const viewPostLinks = await page.$x(
-			"//a[contains(text(), 'View Post')]"
-		);
-		await viewPostLinks[ 0 ].click();
-		await page.waitForNavigation();
-
-		// Retrieve the excerpt used as meta.
-		const metaExcerpt = await page.evaluate( () => {
-			return document
-				.querySelector( 'meta[property="gutenberg:hello"]' )
-				.getAttribute( 'content' );
-		} );
-
-		expect( metaExcerpt ).toEqual( 'Explicitly set excerpt.' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
deleted file mode 100644
index 2e3f9758dc684a..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clickBlockAppender,
-	clickOnMoreMenuItem,
-	createNewPost,
-	deactivatePlugin,
-	openDocumentSettingsSidebar,
-	openPublishPanel,
-	publishPost,
-	setBrowserViewport,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Using Plugins API', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-plugins-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	describe( 'Post Status Info', () => {
-		it( 'Should render post status info inside Document Setting sidebar', async () => {
-			await openDocumentSettingsSidebar();
-
-			const pluginPostStatusInfoText = await page.$eval(
-				'.edit-post-post-status .my-post-status-info-plugin',
-				( el ) => el.innerText
-			);
-			expect( pluginPostStatusInfoText ).toBe( 'My post status info' );
-		} );
-	} );
-
-	describe( 'Publish Panel', () => {
-		beforeEach( async () => {
-			// Type something first to activate Publish button.
-			await clickBlockAppender();
-			await page.keyboard.type( 'First paragraph' );
-		} );
-
-		it( 'Should render publish panel inside Pre-publish sidebar', async () => {
-			await openPublishPanel();
-
-			const pluginPublishPanelText = await page.$eval(
-				'.editor-post-publish-panel .my-publish-panel-plugin__pre',
-				( el ) => el.innerText
-			);
-			expect( pluginPublishPanelText ).toMatch( 'My pre publish panel' );
-		} );
-
-		it( 'Should render publish panel inside Post-publish sidebar', async () => {
-			await publishPost();
-			const pluginPublishPanel = await page.waitForSelector(
-				'.editor-post-publish-panel .my-publish-panel-plugin__post'
-			);
-			const pluginPublishPanelText = await pluginPublishPanel.evaluate(
-				( node ) => node.innerText
-			);
-			expect( pluginPublishPanelText ).toMatch( 'My post publish panel' );
-		} );
-	} );
-
-	describe( 'Sidebar', () => {
-		const SIDEBAR_PINNED_ITEM_BUTTON =
-			'.interface-pinned-items button[aria-label="Plugin sidebar title"]';
-		const SIDEBAR_PANEL_SELECTOR = '.sidebar-title-plugin-panel';
-		it( 'Should open plugins sidebar using More Menu item and render content', async () => {
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
-
-			const pluginSidebarContent = await page.$eval(
-				'.edit-post-sidebar',
-				( el ) => el.innerHTML
-			);
-			expect( pluginSidebarContent ).toMatchSnapshot();
-		} );
-
-		it( 'Should be pinned by default and can be opened and closed using pinned items', async () => {
-			const sidebarPinnedItem = await page.$(
-				SIDEBAR_PINNED_ITEM_BUTTON
-			);
-			expect( sidebarPinnedItem ).not.toBeNull();
-			await sidebarPinnedItem.click();
-			expect( await page.$( SIDEBAR_PANEL_SELECTOR ) ).not.toBeNull();
-			await sidebarPinnedItem.click();
-			expect( await page.$( SIDEBAR_PANEL_SELECTOR ) ).toBeNull();
-		} );
-
-		it( 'Can be pinned and unpinned', async () => {
-			await ( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).click();
-			const unpinButton = await page.$(
-				'button[aria-label="Unpin from toolbar"]'
-			);
-			await unpinButton.click();
-			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).toBeNull();
-			await page.click(
-				'.interface-complementary-area-header button[aria-label="Close plugin"]'
-			);
-			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
-			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).toBeNull();
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
-			await page.click( 'button[aria-label="Pin to toolbar"]' );
-			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).not.toBeNull();
-			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
-			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).not.toBeNull();
-		} );
-
-		it( 'Should close plugins sidebar using More Menu item', async () => {
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
-
-			const pluginSidebarOpened = await page.$( '.edit-post-sidebar' );
-			expect( pluginSidebarOpened ).not.toBeNull();
-
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
-
-			const pluginSidebarClosed = await page.$( '.edit-post-sidebar' );
-			expect( pluginSidebarClosed ).toBeNull();
-		} );
-
-		describe( 'Medium screen', () => {
-			beforeAll( async () => {
-				await setBrowserViewport( 'medium' );
-			} );
-
-			afterAll( async () => {
-				await setBrowserViewport( 'large' );
-			} );
-
-			it( 'Should open plugins sidebar using More Menu item and render content', async () => {
-				await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
-
-				const pluginSidebarContent = await page.$eval(
-					'.edit-post-sidebar',
-					( el ) => el.innerHTML
-				);
-				expect( pluginSidebarContent ).toMatchSnapshot();
-			} );
-		} );
-	} );
-
-	describe( 'Document Setting Custom Panel', () => {
-		it( 'Should render a custom panel inside Document Setting sidebar', async () => {
-			await openDocumentSettingsSidebar();
-			const pluginDocumentSettingsText = await page.$eval(
-				'.edit-post-sidebar .my-document-setting-plugin',
-				( el ) => el.innerText
-			);
-			expect( pluginDocumentSettingsText ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'Error Boundary', () => {
-		beforeAll( async () => {
-			await activatePlugin(
-				'gutenberg-test-plugin-plugins-error-boundary'
-			);
-		} );
-
-		afterAll( async () => {
-			await deactivatePlugin(
-				'gutenberg-test-plugin-plugins-error-boundary'
-			);
-		} );
-
-		it( 'Should create notice using plugin error boundary callback', async () => {
-			const noticeContent = await page.waitForSelector(
-				'.is-error .components-notice__content'
-			);
-			expect(
-				await page.evaluate(
-					( _noticeContent ) => _noticeContent.firstChild.nodeValue,
-					noticeContent
-				)
-			).toEqual(
-				'The "my-error-plugin" plugin has encountered an error and cannot be rendered.'
-			);
-
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
deleted file mode 100644
index 3b15d7589b63a6..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`adding patterns should insert a block pattern 1`] = `
-"<!-- wp:social-links {\\"customIconColor\\":\\"#ffffff\\",\\"iconColorValue\\":\\"#ffffff\\",\\"customIconBackgroundColor\\":\\"#3962e3\\",\\"iconBackgroundColorValue\\":\\"#3962e3\\",\\"className\\":\\"has-icon-color\\"} -->
-<ul class=\\"wp-block-social-links has-icon-color has-icon-background-color\\"><!-- wp:social-link {\\"url\\":\\"https://wordpress.org\\",\\"service\\":\\"wordpress\\"} /-->
-
-<!-- wp:social-link {\\"url\\":\\"#\\",\\"service\\":\\"chain\\"} /-->
-
-<!-- wp:social-link {\\"url\\":\\"#\\",\\"service\\":\\"mail\\"} /--></ul>
-<!-- /wp:social-links -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-deletion.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-deletion.test.js.snap
deleted file mode 100644
index 8b0dcaec4067f7..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-deletion.test.js.snap
+++ /dev/null
@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>caret was here</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph - caret was here</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph - caret was here</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph - caret was here</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph - caret was here</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap
deleted file mode 100644
index ccce7a2b3c3833..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap
+++ /dev/null
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks down 2`] = `
-"<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks multiple blocks selected should move the blocks up 2`] = `
-"<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks single block selected should move the block down 2`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts move blocks single block selected should move the block up 2`] = `
-"<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should prevent deleting multiple selected blocks from inputs 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should propagate properly and duplicate selected blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1st</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2nd</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3rd</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap
deleted file mode 100644
index 12a32b4e61bd73..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap
+++ /dev/null
@@ -1,115 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p>Some paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via block transforms 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>First Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third Paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Block Grouping Group creation creates a group from multiple blocks of the same type via options toolbar 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>First Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third Paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p>Some paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
-"<!-- wp:heading -->
-<h2>Group Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p>Some paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
-"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:image {\\"align\\":\\"full\\"} -->
-<figure class=\\"wp-block-image alignfull\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:image {\\"align\\":\\"wide\\"} -->
-<figure class=\\"wp-block-image alignwide\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p>Some paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Block Grouping Registering alternative Blocks to handle Grouping interactions should use registered grouping block for grouping interactions 1`] = `
-"<!-- wp:test/alternative-group-block -->
-<!-- wp:paragraph -->
-<p>First Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second Paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third Paragraph</p>
-<!-- /wp:paragraph -->
-<!-- /wp:test/alternative-group-block -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap
deleted file mode 100644
index 7a9abf86fc42b1..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigating the block hierarchy should appear and function even without nested blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>and I say hello</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->"
-`;
-
-exports[`Navigating the block hierarchy should navigate block hierarchy using only the keyboard 1`] = `
-"<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>First column</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>Third column</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Navigating the block hierarchy should navigate using the list view sidebar 1`] = `
-"<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>First column</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>Third column</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Navigating the block hierarchy should select the wrapper div for a group 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>just a paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
-<!-- /wp:separator --></div>
-<!-- /wp:group -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap
deleted file mode 100644
index 8b3d0323430df9..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/embedding.test.js.snap
+++ /dev/null
@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Embedding content should allow the user to convert unembeddable URLs to a paragraph with a link in it 1`] = `
-"<!-- wp:paragraph -->
-<p><a href=\\"https://twitter.com/wooyaygutenberg123454312\\">https://twitter.com/wooyaygutenberg123454312</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Embedding content should allow the user to try embedding a failed URL again 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/wooyaygutenberg123454312\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
-https://twitter.com/wooyaygutenberg123454312
-</div></figure>
-<!-- /wp:embed -->"
-`;
-
-exports[`Embedding content should render embeds in the correct state 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"twitter\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\\"><div class=\\"wp-block-embed__wrapper\\">
-https://twitter.com/notnownikki
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://twitter.com/wooyaygutenberg123454312\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"embed-handler\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\\"><div class=\\"wp-block-embed__wrapper\\">
-https://twitter.com/wooyaygutenberg123454312
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://wordpress.org/gutenberg/handbook/\\"} -->
-<figure class=\\"wp-block-embed\\"><div class=\\"wp-block-embed__wrapper\\">
-https://wordpress.org/gutenberg/handbook/
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://twitter.com/thatbunty\\"} -->
-<figure class=\\"wp-block-embed\\"><div class=\\"wp-block-embed__wrapper\\">
-https://twitter.com/thatbunty
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://wordpress.org/gutenberg/handbook/block-api/attributes/\\",\\"type\\":\\"wp-embed\\",\\"providerNameSlug\\":\\"wordpress\\"} -->
-<figure class=\\"wp-block-embed is-type-wp-embed is-provider-wordpress wp-block-embed-wordpress\\"><div class=\\"wp-block-embed__wrapper\\">
-https://wordpress.org/gutenberg/handbook/block-api/attributes/
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://www.youtube.com/watch?v=lXMskKTw3Bc\\",\\"type\\":\\"video\\",\\"providerNameSlug\\":\\"youtube\\",\\"responsive\\":true,\\"className\\":\\"wp-embed-aspect-16-9 wp-has-aspect-ratio\\"} -->
-<figure class=\\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\\"><div class=\\"wp-block-embed__wrapper\\">
-https://www.youtube.com/watch?v=lXMskKTw3Bc
-</div></figure>
-<!-- /wp:embed -->
-
-<!-- wp:embed {\\"url\\":\\"https://cloudup.com/cQFlxqtY4ob\\",\\"type\\":\\"photo\\",\\"providerNameSlug\\":\\"cloudup\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-photo is-provider-cloudup wp-block-embed-cloudup\\"><div class=\\"wp-block-embed__wrapper\\">
-https://cloudup.com/cQFlxqtY4ob
-</div></figure>
-<!-- /wp:embed -->"
-`;
-
-exports[`Embedding content should retry embeds that could not be embedded with trailing slashes, without the trailing slashes 1`] = `
-"<!-- wp:embed {\\"url\\":\\"https://twitter.com/notnownikki/\\",\\"type\\":\\"rich\\",\\"providerNameSlug\\":\\"embed-handler\\",\\"responsive\\":true} -->
-<figure class=\\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\\"><div class=\\"wp-block-embed__wrapper\\">
-https://twitter.com/notnownikki/
-</div></figure>
-<!-- /wp:embed -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
deleted file mode 100644
index 42789fa8552368..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
+++ /dev/null
@@ -1,118 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 1`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 2`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->"
-`;
-
-exports[`Inserting blocks Should insert content using the placeholder and the regular inserter 3`] = `
-"<!-- wp:paragraph -->
-<p>Paragraph block</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><p>Quote block</p></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">Pre text
-
-Foo</pre>
-<!-- /wp:preformatted -->
-
-<!-- wp:shortcode -->
-[myshortcode]With multiple
-lines preserved[/myshortcode]
-<!-- /wp:shortcode -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from block appender 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Paragraph inside group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
-
-<!-- wp:paragraph -->
-<p>Paragraph after group</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from inline inserter 1`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2>Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts a block in proper place after having clicked \`Browse All\` from inline inserter 2`] = `
-"<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:cover {\\"isDark\\":false} -->
-<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"></div></div>
-<!-- /wp:cover -->
-
-<!-- wp:heading -->
-<h2>Heading</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Third paragraph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Inserting blocks inserts blocks at root level when using the root appender while selection is in an inner block 1`] = `
-"<!-- wp:buttons -->
-<div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">1.1</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap
deleted file mode 100644
index 126fda3cc96e30..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Keep styles on block transforms Should keep colors during a transform 1`] = `
-"<!-- wp:paragraph {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<p class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
-"<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
-<!-- /wp:heading -->
-
-<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
-<!-- /wp:heading -->
-
-<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Keep styles on block transforms Should not include styles in the group block when grouping a block 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"fontSize\\":\\"large\\"} -->
-<p class=\\"has-large-font-size\\">Line 1 to be made large</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap
deleted file mode 100644
index d619d310d5c296..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/keyboard-navigable-blocks.test.js.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Order of block keyboard navigation should navigate correctly with multi selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>4</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap
deleted file mode 100644
index 330dfbbe142b08..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/links.test.js.snap
+++ /dev/null
@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Links allows use of escape key to dismiss the url popover 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created by selecting text and clicking Link 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg\\">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created by selecting text and using keyboard shortcuts 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created instantly when a URL is selected 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg: <a href=\\"https://wordpress.org/gutenberg\\">https://wordpress.org/gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created without any text selected 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg: <a href=\\"https://wordpress.org/gutenberg\\">https://wordpress.org/gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be edited 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg/handbook\\">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be edited with collapsed selection 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg/handbook\\">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be modified using the keyboard once a link has been set 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg\\">Gutenberg</a>.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be removed 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links should contain a label when it should open in a new tab 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"http://w.org\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links should contain a label when it should open in a new tab 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href=\\"http://wordpress.org\\">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/list-view.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/list-view.test.js.snap
deleted file mode 100644
index f0dcd9ca28ff42..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/list-view.test.js.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`List view allows a user to drag a block to a new sibling position 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2></h2>
-<!-- /wp:heading -->
-
-<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
deleted file mode 100644
index 51e7f452082d87..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
+++ /dev/null
@@ -1,347 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Multi-block selection should allow selecting outer edge if there is no sibling block 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should always expand single line selection 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should clear selection when clicking next to blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy and paste 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy and paste 2`] = `""`;
-
-exports[`Multi-block selection should copy and paste 3`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy multiple blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should cut and paste 1`] = `""`;
-
-exports[`Multi-block selection should cut and paste 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should forward delete across blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2>]2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should forward delete across blocks 2`] = `
-"<!-- wp:heading -->
-<h2>1&amp;2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should gradually multi-select 1`] = `
-"<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Multi-block selection should gradually multi-select 2`] = `
-"<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Multi-block selection should handle Enter across blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2>]2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should handle Enter across blocks 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>&amp;</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2>2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should multi-select from within the list block 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`Multi-block selection should not multi select single block 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
-"<!-- wp:paragraph -->
-<p>1.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should partially select with shift + click 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>]2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should partially select with shift + click 2`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>&amp;2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste mid-block) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragr</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>aph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste to empty editor) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (replace) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should preserve dragged selection on move 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should properly select multiple blocks if selected nested blocks belong to different parent 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>first</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
-
-<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>second</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Multi-block selection should return original focus after failed multi selection attempt 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should select all from empty selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should select all from empty selection 2`] = `""`;
-
-exports[`Multi-block selection should select separator (single element block) 1`] = `
-"<!-- wp:paragraph -->
-<p>a</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
-<!-- /wp:separator -->"
-`;
-
-exports[`Multi-block selection should select separator (single element block) 2`] = `
-"<!-- wp:paragraph -->
-<p>&amp;</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should set attributes for multiple paragraphs 1`] = `
-"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
-<p class=\\"has-text-align-center\\">1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
-<p class=\\"has-text-align-center\\">2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should use selection direction to determine vertical edge 1`] = `
-"<!-- wp:paragraph -->
-<p>1<br>2.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should write over selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>]2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should write over selection 2`] = `
-"<!-- wp:paragraph -->
-<p>1...2</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/reusable-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/reusable-blocks.test.js.snap
deleted file mode 100644
index 4ddcd90ded100c..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/reusable-blocks.test.js.snap
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Reusable blocks allows conversion back to blocks when the reusable block has unsaved edits 1`] = `
-"<!-- wp:paragraph -->
-<p>12</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Reusable blocks can be created from multiselection and converted back to regular blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>Hello there!</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap
deleted file mode 100644
index 074158c55f0968..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap
+++ /dev/null
@@ -1,217 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RichText should apply active formatting for inline paste 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>132</strong>3</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should apply formatting when selection is collapsed 1`] = `
-"<!-- wp:paragraph -->
-<p>Some <strong>bold</strong>.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should apply formatting with primary shortcut 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>test</strong></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should apply multiple formats when selection is collapsed 1`] = `
-"<!-- wp:paragraph -->
-<p><strong><em>1</em></strong>.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should handle Home and End keys 1`] = `
-"<!-- wp:paragraph -->
-<p>-<strong>12</strong>+</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should handle change in tag name gracefully 1`] = `
-"<!-- wp:heading {\\"level\\":3} -->
-<h3></h3>
-<!-- /wp:heading -->"
-`;
-
-exports[`RichText should keep internal selection after blur 1`] = `
-"<!-- wp:paragraph -->
-<p>1<strong>2</strong></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should make bold after split and merge 1`] = `
-"<!-- wp:paragraph -->
-<p>1<strong>2</strong></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should navigate arround emoji 1`] = `
-"<!-- wp:paragraph -->
-<p>1🍓</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should navigate consecutive format boundaries 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong><em>2</em></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should navigate consecutive format boundaries 2`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>-<em>2</em></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should not format text after code backtick 1`] = `
-"<!-- wp:paragraph -->
-<p>A <code>backtick</code> and more.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should not lose selection direction 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>2-3</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should not split rich text on inline paste 1`] = `
-"<!-- wp:paragraph -->
-<p>123</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should not split rich text on inline paste with formatting 1`] = `
-"<!-- wp:paragraph -->
-<p>a1<strong>2</strong>3b</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should not undo backtick transform with backspace after selection change 1`] = `""`;
-
-exports[`RichText should not undo backtick transform with backspace after typing 1`] = `""`;
-
-exports[`RichText should only mutate text data on input 1`] = `
-"<!-- wp:paragraph -->
-<p>1<strong>2</strong>34</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should paste list contents into paragraph 1`] = `
-"<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>2</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list --></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>2</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list --></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`RichText should paste paragraph contents into list 1`] = `
-"<!-- wp:paragraph -->
-<p>1<br>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1<br>2</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`RichText should preserve internal formatting 1`] = `
-"<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should preserve internal formatting 2`] = `
-"<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should return focus when pressing formatting button 1`] = `
-"<!-- wp:paragraph -->
-<p>Some <strong>bold</strong>.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should run input rules after composition end 1`] = `
-"<!-- wp:paragraph -->
-<p><code>a</code></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should split rich text on paste 1`] = `
-"<!-- wp:paragraph -->
-<p>a</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>b</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should transform backtick to code 1`] = `
-"<!-- wp:paragraph -->
-<p>A <code>backtick</code></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should transform backtick to code 2`] = `
-"<!-- wp:paragraph -->
-<p>A \`backtick\`</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should transform when typing backtick over selection 1`] = `
-"<!-- wp:paragraph -->
-<p>A <code>selection</code> test.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should transform when typing backtick over selection 2`] = `
-"<!-- wp:paragraph -->
-<p>A \`selection\` test.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should undo backtick transform with backspace 1`] = `
-"<!-- wp:paragraph -->
-<p>\`a\`</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should update internal selection after fresh focus 1`] = `
-"<!-- wp:paragraph -->
-<p>1<strong>2</strong></p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/undo.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/undo.test.js.snap
deleted file mode 100644
index 5d1601b9f0d9a0..00000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/undo.test.js.snap
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`undo should immediately create an undo level on typing 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after a pause 1`] = `
-"<!-- wp:paragraph -->
-<p>before pause after pause</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after a pause 2`] = `
-"<!-- wp:paragraph -->
-<p>before pause</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after non input change 1`] = `
-"<!-- wp:paragraph -->
-<p>before keyboard <strong>after keyboard</strong></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`undo should undo typing after non input change 2`] = `
-"<!-- wp:paragraph -->
-<p>before keyboard </p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/a11y.test.js b/packages/e2e-tests/specs/editor/various/a11y.test.js
deleted file mode 100644
index cb9b62dbcdf634..00000000000000
--- a/packages/e2e-tests/specs/editor/various/a11y.test.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, pressKeyWithModifier } from '@wordpress/e2e-test-utils';
-
-function isCloseButtonFocused() {
-	return page.$eval( ':focus', ( focusedElement ) => {
-		return focusedElement.getAttribute( 'aria-label' ) === 'Close';
-	} );
-}
-
-describe( 'a11y', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'tabs header bar', async () => {
-		await pressKeyWithModifier( 'ctrl', '`' );
-
-		await page.keyboard.press( 'Tab' );
-
-		const isFocusedToggle = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return focusedElement.classList.contains(
-					'edit-post-header-toolbar__inserter-toggle'
-				);
-			}
-		);
-
-		expect( isFocusedToggle ).toBe( true );
-	} );
-
-	it( 'constrains focus to a modal when tabbing', async () => {
-		// Open keyboard help modal.
-		await pressKeyWithModifier( 'access', 'h' );
-
-		// The close button should not be focused by default; this is a strange UX
-		// experience.
-		// See: https://github.com/WordPress/gutenberg/issues/9410
-		expect( await isCloseButtonFocused() ).toBe( false );
-
-		await page.keyboard.press( 'Tab' );
-
-		// Ensure the Close button of the modal is focused after tabbing.
-		expect( await isCloseButtonFocused() ).toBe( true );
-	} );
-
-	it( 'returns focus to the first tabbable in a modal after blurring a tabbable', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-
-		// Click to move focus to an element after the last tabbable within the
-		// modal.
-		await page.click( '.components-modal__content *:last-child' );
-
-		await page.keyboard.press( 'Tab' );
-
-		expect( await isCloseButtonFocused() ).toBe( true );
-	} );
-
-	it( 'returns focus to the last tabbable in a modal after blurring a tabbable and tabbing in reverse direction', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-
-		// Click to move focus to an element before the first tabbable within
-		// the modal.
-		await page.click( '.components-modal__header-heading' );
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
-		expect( await isCloseButtonFocused() ).toBe( true );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
deleted file mode 100644
index 513a9fa7af27bc..00000000000000
--- a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-import os from 'os';
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	clickBlockToolbarButton,
-	clickButton,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'adding inline tokens', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should insert inline image', async () => {
-		// Create a paragraph.
-		await clickBlockAppender();
-		await page.keyboard.type( 'a ' );
-
-		await clickBlockToolbarButton( 'More' );
-		await clickButton( 'Inline image' );
-
-		// Wait for media modal to appear and upload image.
-		// Wait for media modal to appear and upload image.
-		const inputElement = await page.waitForSelector(
-			'.media-modal .moxie-shim input[type=file]'
-		);
-		const testImagePath = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'10x10_e2e_test_image_z9T8jK.png'
-		);
-		const filename = uuid();
-		const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
-		fs.copyFileSync( testImagePath, tmpFileName );
-		await inputElement.uploadFile( tmpFileName );
-
-		// Wait for upload.
-		await page.waitForSelector(
-			`.media-modal li[aria-label="${ filename }"]`
-		);
-
-		// Insert the uploaded image.
-		await page.click( '.media-modal button.media-button-select' );
-
-		// Check the content.
-		const regex = new RegExp(
-			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
-		);
-		expect( await getEditedPostContent() ).toMatch( regex );
-
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await page.waitForSelector(
-			'.block-editor-format-toolbar__image-popover'
-		);
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.type( '20' );
-		await page.keyboard.press( 'Enter' );
-
-		// Check the content.
-		const regex2 = new RegExp(
-			`<!-- wp:paragraph -->\\s*<p>a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->`
-		);
-		expect( await getEditedPostContent() ).toMatch( regex2 );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/adding-patterns.test.js b/packages/e2e-tests/specs/editor/various/adding-patterns.test.js
deleted file mode 100644
index ca1cac98e23165..00000000000000
--- a/packages/e2e-tests/specs/editor/various/adding-patterns.test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertPattern,
-	getEditedPostContent,
-} from '@wordpress/e2e-test-utils';
-
-/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
-
-describe( 'adding patterns', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should insert a block pattern', async () => {
-		await insertPattern( 'Social links with a shared background color' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js b/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js
deleted file mode 100644
index 449306f06d18d2..00000000000000
--- a/packages/e2e-tests/specs/editor/various/allowed-patterns.test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	searchForPattern,
-	toggleGlobalBlockInserter,
-} from '@wordpress/e2e-test-utils';
-
-const checkPatternExistence = async ( name, available = true ) => {
-	await searchForPattern( name );
-	const patternElement = await page.waitForXPath(
-		`//div[@role = 'option']//div[contains(text(), '${ name }')]`,
-		{ timeout: 5000, visible: available, hidden: ! available }
-	);
-	const patternExists = !! patternElement;
-	await toggleGlobalBlockInserter();
-	return patternExists;
-};
-
-const TEST_PATTERNS = [
-	[ 'Test: Single heading', true ],
-	[ 'Test: Single paragraph', false ],
-	[ 'Test: Paragraph inside group', false ],
-];
-
-describe( 'Allowed Patterns', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-allowed-patterns' );
-		await createNewPost();
-	} );
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-allowed-patterns' );
-	} );
-
-	describe( 'Disable blocks plugin disabled', () => {
-		for ( const [ patternName ] of TEST_PATTERNS ) {
-			it( `should show test pattern "${ patternName }"`, async () => {
-				expect( await checkPatternExistence( patternName, true ) ).toBe(
-					true
-				);
-			} );
-		}
-	} );
-
-	describe( 'Disable blocks plugin enabled', () => {
-		beforeAll( async () => {
-			await activatePlugin(
-				'gutenberg-test-allowed-patterns-disable-blocks'
-			);
-			await createNewPost();
-		} );
-		afterAll( async () => {
-			await deactivatePlugin(
-				'gutenberg-test-allowed-patterns-disable-blocks'
-			);
-		} );
-
-		for ( const [ patternName, shouldBeAvailable ] of TEST_PATTERNS ) {
-			it( `should${
-				shouldBeAvailable ? '' : ' not'
-			} show test "pattern ${ patternName }"`, async () => {
-				expect(
-					await checkPatternExistence(
-						patternName,
-						shouldBeAvailable
-					)
-				).toBe( shouldBeAvailable );
-			} );
-		}
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/autosave.test.js b/packages/e2e-tests/specs/editor/various/autosave.test.js
deleted file mode 100644
index abf4ad8b83e68a..00000000000000
--- a/packages/e2e-tests/specs/editor/various/autosave.test.js
+++ /dev/null
@@ -1,345 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	publishPost,
-	saveDraft,
-	toggleOfflineMode,
-} from '@wordpress/e2e-test-utils';
-
-// Constant to override editor preference
-const AUTOSAVE_INTERVAL_SECONDS = 5;
-
-const AUTOSAVE_NOTICE_REMOTE =
-	'There is an autosave of this post that is more recent than the version below.';
-const AUTOSAVE_NOTICE_LOCAL =
-	'The backup of this post in your browser is different from the version below.';
-
-// Save and wait for "Saved" to confirm save complete. Preserves focus in the
-// editing area.
-async function saveDraftWithKeyboard() {
-	await page.waitForSelector( '.editor-post-save-draft' );
-	await Promise.all( [
-		page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		pressKeyWithModifier( 'primary', 'S' ),
-	] );
-}
-
-async function sleep( durationInSeconds ) {
-	// Rule `no-restricted-syntax` recommends `waitForSelector` against
-	// `waitFor`, which isn't apt for the use case, when provided an integer,
-	// of waiting for a given amount of time.
-	// eslint-disable-next-line no-restricted-syntax
-	await page.waitForTimeout( durationInSeconds * 1000 );
-}
-
-async function clearSessionStorage() {
-	await page.evaluate( () => window.sessionStorage.clear() );
-}
-
-async function readSessionStorageAutosave( postId ) {
-	return page.evaluate(
-		( key ) => window.sessionStorage.getItem( key ),
-		`wp-autosave-block-editor-post-${ postId ? postId : 'auto-draft' }`
-	);
-}
-
-async function getCurrentPostId() {
-	return page.evaluate( () =>
-		window.wp.data.select( 'core/editor' ).getCurrentPostId()
-	);
-}
-
-async function setLocalAutosaveInterval( value ) {
-	return page.evaluate( ( _value ) => {
-		window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
-			localAutosaveInterval: _value,
-		} );
-	}, value );
-}
-
-function wrapParagraph( text ) {
-	return `<!-- wp:paragraph -->
-<p>${ text }</p>
-<!-- /wp:paragraph -->`;
-}
-
-describe( 'autosave', () => {
-	beforeEach( async () => {
-		await clearSessionStorage();
-		await createNewPost();
-		await setLocalAutosaveInterval( AUTOSAVE_INTERVAL_SECONDS );
-	} );
-
-	it( 'should save to sessionStorage', async () => {
-		// Wait for the original timeout to kick in, it will schedule
-		// another run using the updated interval length of AUTOSAVE_INTERVAL_SECONDS.
-		await sleep( 15 );
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await sleep( 1 );
-		await page.keyboard.type( ' after save' );
-
-		// Wait long enough for local autosave to kick in.
-		await sleep( AUTOSAVE_INTERVAL_SECONDS + 1 );
-
-		const id = await getCurrentPostId();
-		const autosave = await readSessionStorageAutosave( id );
-		const { content } = JSON.parse( autosave );
-		expect( content ).toBe( wrapParagraph( 'before save after save' ) );
-	} );
-
-	it( 'should recover from sessionStorage', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		// Reload without saving on the server.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain( AUTOSAVE_NOTICE_LOCAL );
-
-		expect( await getEditedPostContent() ).toEqual(
-			wrapParagraph( 'before save' )
-		);
-		await page.click( '.components-notice__action' );
-		expect( await getEditedPostContent() ).toEqual(
-			wrapParagraph( 'before save after save' )
-		);
-	} );
-
-	it( "shouldn't contaminate other posts", async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraft();
-
-		// Fake local autosave.
-		await page.evaluate(
-			( postId ) =>
-				window.sessionStorage.setItem(
-					`wp-autosave-block-editor-post-${ postId }`,
-					JSON.stringify( {
-						post_title: 'A',
-						content: 'B',
-						excerpt: 'C',
-					} )
-				),
-			await getCurrentPostId()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain(
-			'The backup of this post in your browser is different from the version below.'
-		);
-
-		await createNewPost();
-		expect( await page.$( '.components-notice__content' ) ).toBe( null );
-	} );
-
-	it( 'should clear local autosave after successful remote autosave', async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		// Trigger remote autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	it( "shouldn't clear local autosave if remote autosave fails", async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		// Bring network down and attempt to autosave remotely.
-		toggleOfflineMode( true );
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-	} );
-
-	it( 'should clear local autosave after successful save', async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await saveDraftWithKeyboard();
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	it( "shouldn't clear local autosave if save fails", async () => {
-		// Edit, save draft, edit again.
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraftWithKeyboard();
-		await page.keyboard.type( ' after save' );
-
-		// Trigger local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		// Bring network down and attempt to save.
-		toggleOfflineMode( true );
-		saveDraftWithKeyboard();
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-	} );
-
-	it( "shouldn't conflict with server-side autosave", async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before publish' );
-		await publishPost();
-
-		await page.click( '[data-type="core/paragraph"]' );
-		await page.keyboard.type( ' after publish' );
-
-		// Trigger remote autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave()
-		);
-
-		// Force conflicting local autosave.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBeGreaterThanOrEqual( 1 );
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// FIXME: Occasionally, upon reload, there is no server-provided
-		// autosave value available, despite our having previously explicitly
-		// autosaved. The reasons for this are still unknown. Since this is
-		// unrelated to *local* autosave, until we can understand them, we'll
-		// drop this test's expectations if we don't have an autosave object
-		// available.
-		const stillHasRemoteAutosave = await page.evaluate(
-			() =>
-				window.wp.data.select( 'core/editor' ).getEditorSettings()
-					.autosave
-		);
-		if ( ! stillHasRemoteAutosave ) {
-			return;
-		}
-
-		// Only one autosave notice should be displayed.
-		const notices = await page.$$( '.components-notice' );
-		expect( notices.length ).toBe( 1 );
-		const notice = await page.$eval(
-			'.components-notice__content',
-			( element ) => element.innerText
-		);
-		expect( notice ).toContain( AUTOSAVE_NOTICE_REMOTE );
-	} );
-
-	it( 'should clear sessionStorage upon user logout', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'before save' );
-		await saveDraft();
-
-		// Fake local autosave.
-		await page.evaluate(
-			( postId ) =>
-				window.sessionStorage.setItem(
-					`wp-autosave-block-editor-post-${ postId }`,
-					JSON.stringify( {
-						post_title: 'A',
-						content: 'B',
-						excerpt: 'C',
-					} )
-				),
-			await getCurrentPostId()
-		);
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 1 );
-
-		await Promise.all( [
-			page.waitForSelector( '#wp-admin-bar-logout', { visible: true } ),
-			page.hover( '#wp-admin-bar-my-account' ),
-		] );
-		await Promise.all( [
-			page.waitForNavigation(),
-			page.click( '#wp-admin-bar-logout' ),
-		] );
-
-		expect(
-			await page.evaluate( () => window.sessionStorage.length )
-		).toBe( 0 );
-	} );
-
-	afterEach( async () => {
-		toggleOfflineMode( false );
-		await clearSessionStorage();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js
deleted file mode 100644
index e4497d45fbfaf8..00000000000000
--- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	getEditedPostContent,
-	createNewPost,
-	isInDefaultBlock,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-const addThreeParagraphsToNewPost = async () => {
-	await createNewPost();
-
-	// Add demo content.
-	await clickBlockAppender();
-	await page.keyboard.type( 'First paragraph' );
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( 'Second paragraph' );
-	await page.keyboard.press( 'Enter' );
-};
-
-/**
- * Due to an issue with the Popover component not being scrollable
- * under certain conditions, Pupeteer cannot "see" the "Remove Block"
- * button. This is a workaround until that issue is resolved.
- *
- * see: https://github.com/WordPress/gutenberg/pull/14908#discussion_r284725956
- */
-const clickOnBlockSettingsMenuRemoveBlockButton = async () => {
-	await clickBlockToolbarButton( 'Options' );
-
-	let isRemoveButton = false;
-
-	let numButtons = await page.$$eval(
-		'.block-editor-block-settings-menu__content button',
-		( btns ) => btns.length
-	);
-
-	// Limit by the number of buttons available.
-	while ( --numButtons ) {
-		await page.keyboard.press( 'Tab' );
-
-		isRemoveButton = await page.evaluate( () => {
-			return document.activeElement.innerText.includes(
-				'Remove Paragraph'
-			);
-		} );
-
-		// Stop looping once we find the button.
-		if ( isRemoveButton ) {
-			await pressKeyTimes( 'Enter', 1 );
-			break;
-		}
-	}
-
-	// Makes failures more explicit.
-	await expect( isRemoveButton ).toBe( true );
-};
-
-describe( 'block deletion -', () => {
-	beforeEach( addThreeParagraphsToNewPost );
-
-	describe( 'deleting the third block using the Remove Block menu item', () => {
-		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
-			// The blocks can't be empty to trigger the toolbar.
-			await page.keyboard.type( 'Paragraph to remove' );
-			await clickOnBlockSettingsMenuRemoveBlockButton();
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// Type additional text and assert that caret position is correct by comparing to snapshot.
-			await page.keyboard.type( ' - caret was here' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'deleting the third block using the Remove Block shortcut', () => {
-		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
-			// Type some text to assert that the shortcut also deletes block content.
-			await page.keyboard.type( 'this is block 2' );
-			await pressKeyWithModifier( 'access', 'z' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// Type additional text and assert that caret position is correct by comparing to snapshot.
-			await page.keyboard.type( ' - caret was here' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'deleting the third block using backspace in an empty block', () => {
-		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
-			await page.keyboard.press( 'Backspace' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// Type additional text and assert that caret position is correct by comparing to snapshot.
-			await page.keyboard.type( ' - caret was here' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'deleting the third block using backspace with block wrapper selection', () => {
-		it( 'results in three remaining blocks and positions the caret at the end of the third block', async () => {
-			// Add an image block since it's easier to click the wrapper on non-textual blocks.
-			await page.keyboard.type( '/image' );
-			await page.waitForXPath(
-				`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Image')]`
-			);
-			await page.keyboard.press( 'Enter' );
-
-			// Click on something that's not a block.
-			await page.click( '.editor-post-title' );
-
-			// Click on the image block so that its wrapper is selected and backspace to delete it.
-			await page.click(
-				'.wp-block[data-type="core/image"] .components-placeholder__label'
-			);
-			await page.keyboard.press( 'Backspace' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// Type additional text and assert that caret position is correct by comparing to snapshot.
-			await page.keyboard.type( ' - caret was here' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'deleting the third and fourth blocks using backspace with multi-block selection', () => {
-		it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => {
-			// Add a third paragraph for this test.
-			await page.keyboard.type( 'Third paragraph' );
-			await page.keyboard.press( 'Enter' );
-
-			// Press the up arrow once to select the third and fourth blocks.
-			await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-			// Now that the block wrapper is selected, press backspace to delete it.
-			await page.keyboard.press( 'Backspace' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// Type additional text and assert that caret position is correct by comparing to snapshot.
-			await page.keyboard.type( ' - caret was here' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-} );
-
-describe( 'deleting all blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'results in the default block getting selected', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-		await clickOnBlockSettingsMenuRemoveBlockButton();
-
-		// There is a default block and post title:
-		expect(
-			await page.$$( '.block-editor-block-list__block' )
-		).toHaveLength( 2 );
-
-		// But the effective saved content is still empty:
-		expect( await getEditedPostContent() ).toBe( '' );
-
-		// And focus is retained:
-		expect( await isInDefaultBlock() ).toBe( true );
-	} );
-
-	it( 'gracefully removes blocks when the default block is not available', async () => {
-		// Regression Test: Previously, removing a block would not clear
-		// selection state when there were no other blocks to select.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/15458
-		// See: https://github.com/WordPress/gutenberg/pull/15543
-
-		// Unregister default block type. This may happen if the editor is
-		// configured to not allow the default (paragraph) block type, either
-		// by plugin editor settings filtering or user block preferences.
-		await page.evaluate( () => {
-			const defaultBlockName = wp.data
-				.select( 'core/blocks' )
-				.getDefaultBlockName();
-			wp.data
-				.dispatch( 'core/blocks' )
-				.removeBlockTypes( defaultBlockName );
-		} );
-
-		// Add and remove a block.
-		await insertBlock( 'Image' );
-		await page.waitForSelector( 'figure[data-type="core/image"]' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Verify there is no selected block.
-		// TODO: There should be expectations around where focus is placed in
-		// this scenario. Currently, a focus loss occurs (not acceptable).
-		const selectedBlocksCount = await page.evaluate( () => {
-			return wp.data
-				.select( 'core/block-editor' )
-				.getSelectedBlockClientIds().length;
-		} );
-
-		expect( selectedBlocksCount ).toBe( 0 );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
deleted file mode 100644
index 0847f4d45c1dbc..00000000000000
--- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickBlockAppender,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	clickOnCloseModalButton,
-} from '@wordpress/e2e-test-utils';
-
-const createTestParagraphBlocks = async () => {
-	await clickBlockAppender();
-	await page.keyboard.type( '1st' );
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( '2nd' );
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( '3rd' );
-};
-
-describe( 'block editor keyboard shortcuts', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	describe( 'move blocks', () => {
-		const moveUp = async () => pressKeyWithModifier( 'secondary', 't' );
-		const moveDown = async () => pressKeyWithModifier( 'secondary', 'y' );
-		describe( 'single block selected', () => {
-			it( 'should move the block up', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await moveUp();
-				await moveUp();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			it( 'should move the block down', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.press( 'ArrowUp' );
-				await moveDown();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-		} );
-
-		describe( 'multiple blocks selected', () => {
-			it( 'should move the blocks up', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
-				await moveUp();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			it( 'should move the blocks down', async () => {
-				await createTestParagraphBlocks();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
-				await moveDown();
-				expect( await getEditedPostContent() ).toMatchSnapshot();
-			} );
-		} );
-	} );
-	describe( 'test shortcuts handling through portals in the same tree', () => {
-		beforeEach( async () => {
-			await createTestParagraphBlocks();
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-		} );
-		it( 'should propagate properly and duplicate selected blocks', async () => {
-			await clickBlockToolbarButton( 'Options' );
-			const label = 'Duplicate';
-			await page.$x(
-				`//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]`
-			);
-			await pressKeyWithModifier( 'primaryShift', 'd' );
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create Reusable block' );
-			const reusableBlockNameInputSelector =
-				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-			const nameInput = await page.waitForSelector(
-				reusableBlockNameInputSelector
-			);
-			await nameInput.click();
-			await page.keyboard.type( 'hi' );
-			await page.keyboard.press( 'Backspace' );
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'Delete' );
-			await clickOnCloseModalButton(
-				'.reusable-blocks-menu-items__convert-modal'
-			);
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
deleted file mode 100644
index dd51f31016c8d3..00000000000000
--- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	pressKeyWithModifier,
-	getEditedPostContent,
-	transformBlockTo,
-	getAllBlocks,
-	getAvailableBlockTransforms,
-	activatePlugin,
-	deactivatePlugin,
-	createReusableBlock,
-} from '@wordpress/e2e-test-utils';
-
-async function insertBlocksOfSameType() {
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'First Paragraph' );
-
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'Second Paragraph' );
-
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'Third Paragraph' );
-}
-
-async function insertBlocksOfMultipleTypes() {
-	await insertBlock( 'Heading' );
-	await page.keyboard.type( 'Group Heading' );
-
-	await insertBlock( 'Image' );
-
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'Some paragraph' );
-}
-
-describe( 'Block Grouping', () => {
-	beforeEach( async () => {
-		// Posts are auto-removed at the end of each test run.
-		await createNewPost();
-	} );
-
-	describe( 'Group creation', () => {
-		it( 'creates a group from multiple blocks of the same type via block transforms', async () => {
-			// Creating test blocks.
-			await insertBlocksOfSameType();
-
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			await transformBlockTo( 'Group' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'creates a group from multiple blocks of different types via block transforms', async () => {
-			// Creating test blocks.
-			await insertBlocksOfMultipleTypes();
-
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			await transformBlockTo( 'Group' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'creates a group from multiple blocks of the same type via options toolbar', async () => {
-			// Creating test blocks.
-			await insertBlocksOfSameType();
-
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'groups and ungroups multiple blocks of different types via options toolbar', async () => {
-			// Creating test blocks.
-			await insertBlocksOfMultipleTypes();
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			// Group.
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-
-			// UnGroup.
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Ungroup' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'does not allow ungrouping a group block that has no children', async () => {
-			await insertBlock( 'Group' );
-			await clickBlockToolbarButton( 'Options' );
-			const ungroupButtons = await page.$x(
-				'//button/span[text()="Ungroup"]'
-			);
-			expect( ungroupButtons ).toHaveLength( 0 );
-		} );
-		it( 'should group and ungroup a controlled block properly', async () => {
-			const getParagraphText = async () => {
-				const paragraphInReusableSelector =
-					'.block-editor-block-list__block[data-type="core/block"] p';
-				await page.waitForSelector( paragraphInReusableSelector );
-				return page.$eval(
-					paragraphInReusableSelector,
-					( element ) => element.innerText
-				);
-			};
-
-			const paragraphText = 'hi';
-			await createReusableBlock( paragraphText, 'Block' );
-			// Group
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-
-			let group = await page.$$( '[data-type="core/group"]' );
-			expect( group ).toHaveLength( 1 );
-			// Make sure the paragraph in reusable block exists.
-			expect( await getParagraphText() ).toMatch( paragraphText );
-
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Ungroup' );
-			group = await page.$$( '[data-type="core/group"]' );
-			expect( group ).toHaveLength( 0 );
-			// Make sure the paragraph in reusable block exists.
-			expect( await getParagraphText() ).toEqual( paragraphText );
-		} );
-		it( 'should group another Group block via options toolbar', async () => {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( '1' );
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-			<div class=\\"wp-block-group\\"><!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-			<p>1</p>
-			<!-- /wp:paragraph --></div>
-			<!-- /wp:group --></div>
-			<!-- /wp:group -->"
-		` );
-		} );
-	} );
-
-	describe( 'Grouping Block availability', () => {
-		beforeEach( async () => {
-			// Disable the Group block.
-			await page.evaluate( () => {
-				const { dispatch } = wp.data;
-				dispatch( 'core/edit-post' ).hideBlockTypes( [ 'core/group' ] );
-			} );
-
-			// Create a Group.
-			await insertBlocksOfMultipleTypes();
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-		} );
-
-		afterAll( async () => {
-			// Re-enable the Group block.
-			await page.evaluate( () => {
-				const { dispatch } = wp.data;
-				dispatch( 'core/edit-post' ).showBlockTypes( [ 'core/group' ] );
-			} );
-		} );
-
-		it( 'does not show group transform if Grouping block is disabled', async () => {
-			const availableTransforms = await getAvailableBlockTransforms();
-
-			expect( availableTransforms ).not.toContain( 'Group' );
-		} );
-
-		it( 'does not show group option in the options toolbar if Grouping block is disabled', async () => {
-			await clickBlockToolbarButton( 'Options' );
-
-			const blockOptionsDropdownHTML = await page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-block-settings-menu__popover'
-					).innerHTML
-			);
-
-			expect( blockOptionsDropdownHTML ).not.toContain( 'Group' );
-		} );
-	} );
-
-	describe( 'Preserving selected blocks attributes', () => {
-		it( 'preserves width alignment settings of selected blocks', async () => {
-			await insertBlock( 'Heading' );
-			await page.keyboard.type( 'Group Heading' );
-
-			// Full width image.
-			await insertBlock( 'Image' );
-			await clickBlockToolbarButton( 'Align' );
-			const fullButton = await page.waitForXPath(
-				`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Full width')]`
-			);
-			await fullButton.evaluate( ( element ) =>
-				element.scrollIntoView()
-			);
-			await fullButton.click();
-
-			// Wide width image.
-			await insertBlock( 'Image' );
-			await clickBlockToolbarButton( 'Align' );
-			const wideButton = await page.waitForXPath(
-				`//button[contains(@class,'components-dropdown-menu__menu-item')]//span[contains(text(), 'Wide width')]`
-			);
-			await wideButton.evaluate( ( element ) =>
-				element.scrollIntoView()
-			);
-			await wideButton.click();
-
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( 'Some paragraph' );
-
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			await transformBlockTo( 'Group' );
-
-			const allBlocks = await getAllBlocks();
-
-			// We expect Group block align setting to match that
-			// of the widest of it's "child" innerBlocks
-			expect( allBlocks[ 0 ].attributes.align ).toBe( 'full' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'Registering alternative Blocks to handle Grouping interactions', () => {
-		beforeAll( async () => {
-			await activatePlugin( 'gutenberg-test-custom-grouping-block' );
-		} );
-
-		afterAll( async () => {
-			await deactivatePlugin( 'gutenberg-test-custom-grouping-block' );
-		} );
-
-		it( 'should use registered grouping block for grouping interactions', async () => {
-			// Set custom Block as the Block to use for Grouping.
-			await page.evaluate( () => {
-				window.wp.blocks.setGroupingBlockName(
-					'test/alternative-group-block'
-				);
-			} );
-
-			// Creating test blocks.
-			await insertBlocksOfSameType();
-
-			// Multiselect via keyboard.
-			await pressKeyWithModifier( 'primary', 'a' );
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			// Group - this will use whichever Block is registered as the Grouping Block
-			// as opposed to "transformTo()" which uses whatever is passed to it. To
-			// ensure this test is meaningful we must rely on what is registered.
-			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Group' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
deleted file mode 100644
index 6adcfa2d878bc3..00000000000000
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	getEditedPostContent,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	openDocumentSettingsSidebar,
-	getListViewBlocks,
-} from '@wordpress/e2e-test-utils';
-
-async function openListViewSidebar() {
-	await pressKeyWithModifier( 'access', 'o' );
-	await page.waitForSelector( '.block-editor-list-view-leaf.is-selected' );
-}
-
-async function tabToColumnsControl() {
-	let isColumnsControl = false;
-	do {
-		await page.keyboard.press( 'Tab' );
-		isColumnsControl = await page.evaluate( () => {
-			const activeElement = document.activeElement;
-			return (
-				activeElement.tagName === 'INPUT' &&
-				activeElement.attributes.getNamedItem( 'aria-label' ).value ===
-					'Columns'
-			);
-		} );
-	} while ( ! isColumnsControl );
-}
-
-describe( 'Navigating the block hierarchy', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should navigate using the list view sidebar', async () => {
-		await insertBlock( 'Columns' );
-		await page.click( '[aria-label="Two columns; equal split"]' );
-
-		// Add a paragraph in the first column.
-		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
-		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'First column' );
-
-		// Navigate to the columns blocks.
-		await page.click(
-			'.edit-post-header-toolbar__document-overview-toggle'
-		);
-
-		const firstColumnsBlockMenuItem = (
-			await getListViewBlocks( 'Columns' )
-		 )[ 0 ];
-		await firstColumnsBlockMenuItem.click();
-
-		// Tweak the columns count.
-		await openDocumentSettingsSidebar();
-		await page.focus(
-			'.block-editor-block-inspector [aria-label="Columns"][type="number"]'
-		);
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.up( 'Shift' );
-		await page.keyboard.type( '3' );
-
-		// Wait for the new column block to appear in the list view
-		// 5 = Columns, Column, Paragraph, Column, *Column*
-		await page.waitForSelector(
-			'tr.block-editor-list-view-leaf:nth-of-type(5)'
-		);
-
-		// Navigate to the last column block.
-		const lastColumnBlockMenuItem = (
-			await getListViewBlocks( 'Column' )
-		 )[ 2 ];
-		await lastColumnBlockMenuItem.click();
-
-		// Insert text in the last column block.
-		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
-		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'Third column' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should navigate block hierarchy using only the keyboard', async () => {
-		await insertBlock( 'Columns' );
-		await openDocumentSettingsSidebar();
-		await page.click( '[aria-label="Two columns; equal split"]' );
-
-		// Add a paragraph in the first column.
-		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
-		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'First column' );
-
-		// Navigate to the columns blocks using the keyboard.
-		await openListViewSidebar();
-		await pressKeyTimes( 'ArrowUp', 2 );
-		await page.keyboard.press( 'Enter' );
-
-		// Move focus to the sidebar area.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await tabToColumnsControl();
-
-		// Tweak the columns count by increasing it by one.
-		await page.keyboard.press( 'ArrowRight' );
-
-		// Navigate to the third column in the columns block.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyTimes( 'Tab', 4 );
-		await pressKeyTimes( 'ArrowDown', 4 );
-		await page.waitForSelector(
-			'.is-highlighted[aria-label="Block: Column (3 of 3)"]'
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.waitForSelector( '.is-selected[data-type="core/column"]' );
-
-		// Insert text in the last column block.
-		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
-		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
-		await page.keyboard.type( 'Third column' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should appear and function even without nested blocks', async () => {
-		const textString = 'You say goodbye';
-
-		await insertBlock( 'Paragraph' );
-
-		// Add content so there is a block in the hierarchy.
-		await page.keyboard.type( textString );
-
-		// Create an image block too.
-		await page.keyboard.press( 'Enter' );
-		await insertBlock( 'Image' );
-
-		// Return to first block.
-		await openListViewSidebar();
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Space' );
-
-		// Replace its content.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'and I say hello' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should select the wrapper div for a group', async () => {
-		// Insert a group block.
-		await insertBlock( 'Group' );
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		// Insert some random blocks.
-		// The last block shouldn't be a textual block.
-		await page.click( '.block-list-appender .block-editor-inserter' );
-		const paragraphMenuItem = (
-			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
-		 )[ 0 ];
-		await paragraphMenuItem.click();
-		await page.keyboard.type( 'just a paragraph' );
-		await insertBlock( 'Separator' );
-
-		// Check the Group block content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Unselect the blocks.
-		await page.click( '.editor-post-title' );
-
-		// Try selecting the group block using the Outline.
-		await page.click(
-			'.edit-post-header-toolbar__document-overview-toggle'
-		);
-		const groupMenuItem = ( await getListViewBlocks( 'Group' ) )[ 0 ];
-		await groupMenuItem.click();
-
-		// The group block's wrapper should be selected.
-		const isGroupBlockSelected = await page.evaluate(
-			() =>
-				document.activeElement.getAttribute( 'data-type' ) ===
-				'core/group'
-		);
-		expect( isGroupBlockSelected ).toBe( true );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/block-switcher.test.js b/packages/e2e-tests/specs/editor/various/block-switcher.test.js
deleted file mode 100644
index eea665e688888e..00000000000000
--- a/packages/e2e-tests/specs/editor/various/block-switcher.test.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	hasBlockSwitcher,
-	getAvailableBlockTransforms,
-	createNewPost,
-	insertBlock,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block Switcher', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show the expected block transforms on the list block when the blocks are removed', async () => {
-		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
-
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toEqual(
-			expect.arrayContaining( [
-				'Group',
-				'Paragraph',
-				'Heading',
-				'Quote',
-				'Columns',
-			] )
-		);
-	} );
-
-	it( 'Should show the expected block transforms on the list block when the quote block is removed', async () => {
-		// Remove the quote block from the list of registered blocks.
-		await page.evaluate( () => {
-			wp.blocks.unregisterBlockType( 'core/quote' );
-		} );
-
-		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
-
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toEqual(
-			expect.arrayContaining( [
-				'Group',
-				'Paragraph',
-				'Heading',
-				'Columns',
-			] )
-		);
-	} );
-
-	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
-		// Remove the paragraph and quote block from the list of registered blocks.
-		await page.evaluate( () => {
-			[
-				'core/quote',
-				'core/pullquote',
-				'core/paragraph',
-				'core/group',
-				'core/heading',
-				'core/columns',
-			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
-		} );
-
-		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'alt', 'F10' );
-
-		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
-		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toHaveLength( 1 );
-	} );
-
-	describe( 'Conditional tranformation options', () => {
-		describe( 'Columns tranforms', () => {
-			it( 'Should show Columns block only if selected blocks are between limits (1-6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
-				await page.keyboard.press( 'ArrowUp' );
-				await insertBlock( 'Heading' );
-				await page.keyboard.type( 'I am a header' );
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
-				expect( await getAvailableBlockTransforms() ).toEqual(
-					expect.arrayContaining( [ 'Columns' ] )
-				);
-			} );
-			it( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
-				await page.keyboard.press( 'ArrowUp' );
-				await insertBlock( 'Heading' );
-				await page.keyboard.type( 'I am a header' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'First paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Second paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Third paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Fourth paragraph' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'Fifth paragraph' );
-				await pressKeyWithModifier( 'primary', 'a' );
-				await pressKeyWithModifier( 'primary', 'a' );
-				expect( await getAvailableBlockTransforms() ).not.toEqual(
-					expect.arrayContaining( [ 'Columns' ] )
-				);
-			} );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js
deleted file mode 100644
index dab3765ef0d148..00000000000000
--- a/packages/e2e-tests/specs/editor/various/change-detection.test.js
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	pressKeyWithModifier,
-	ensureSidebarOpened,
-	publishPost,
-	saveDraft,
-	openDocumentSettingsSidebar,
-	isCurrentURL,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Change detection', () => {
-	let handleInterceptedRequest, hadInterceptedSave;
-
-	beforeEach( async () => {
-		hadInterceptedSave = false;
-
-		await createNewPost();
-	} );
-
-	afterEach( async () => {
-		if ( handleInterceptedRequest ) {
-			await releaseSaveIntercept();
-		}
-	} );
-
-	async function assertIsDirty( isDirty ) {
-		let hadDialog = false;
-
-		function handleOnDialog() {
-			hadDialog = true;
-		}
-
-		try {
-			page.on( 'dialog', handleOnDialog );
-			await page.reload();
-
-			// Ensure whether it was expected that dialog was encountered.
-			expect( hadDialog ).toBe( isDirty );
-		} catch ( error ) {
-			throw error;
-		} finally {
-			page.removeListener( 'dialog', handleOnDialog );
-		}
-	}
-
-	async function interceptSave() {
-		await page.setRequestInterception( true );
-
-		handleInterceptedRequest = ( interceptedRequest ) => {
-			if ( interceptedRequest.url().includes( '/wp/v2/posts' ) ) {
-				hadInterceptedSave = true;
-			} else {
-				interceptedRequest.continue();
-			}
-		};
-		page.on( 'request', handleInterceptedRequest );
-	}
-
-	async function releaseSaveIntercept() {
-		page.removeListener( 'request', handleInterceptedRequest );
-		await page.setRequestInterception( false );
-		hadInterceptedSave = false;
-		handleInterceptedRequest = null;
-	}
-
-	it( 'Should not save on new unsaved post', async () => {
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		expect( hadInterceptedSave ).toBe( false );
-	} );
-
-	it( 'Should autosave post', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Force autosave to occur immediately.
-		await Promise.all( [
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		] );
-
-		// Autosave draft as same user should do full save, i.e. not dirty.
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Toggle post as needing review (not persisted for autosave).
-		await ensureSidebarOpened();
-
-		const postPendingReviewButton = (
-			await page.$x( "//label[contains(text(), 'Pending review')]" )
-		 )[ 0 ];
-		await postPendingReviewButton.click( 'button' );
-
-		// Force autosave to occur immediately.
-		await Promise.all( [
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-			page.waitForSelector( '.editor-post-saved-state.is-autosaving' ),
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-		] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		await publishPost();
-
-		// Close publish panel.
-		await Promise.all( [
-			page.waitForFunction(
-				() => ! document.querySelector( '.editor-post-publish-panel' )
-			),
-			page.click( '.editor-post-publish-panel__header button' ),
-		] );
-
-		// Should be dirty after autosave change of published post.
-		await page.type( '.editor-post-title__input', '!' );
-
-		await Promise.all( [
-			page.waitForSelector(
-				'.editor-post-publish-button[aria-disabled="true"]'
-			),
-			page.waitForSelector(
-				'.editor-post-publish-button[aria-disabled="false"]'
-			),
-			page.evaluate( () =>
-				window.wp.data.dispatch( 'core/editor' ).autosave()
-			),
-		] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should not prompt to confirm unsaved changes for new post', async () => {
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should prompt to confirm unsaved changes for new post with initial edits', async () => {
-		await createNewPost( {
-			title: 'My New Post',
-			content: 'My content',
-			excerpt: 'My excerpt',
-		} );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if property changed without save', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if content added without save', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should not prompt if changes saved', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		await saveDraft();
-
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should not prompt if changes saved right after typing', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello World' );
-
-		await saveDraft();
-
-		await assertIsDirty( false );
-	} );
-
-	it( 'Should not save if all changes saved', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		await saveDraft();
-
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		expect( hadInterceptedSave ).toBe( false );
-	} );
-
-	it( 'Should prompt if save failed', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		await page.setOfflineMode( true );
-
-		await Promise.all( [
-			// Keyboard shortcut Ctrl+S save.
-			pressKeyWithModifier( 'primary', 'S' ),
-
-			// Ensure save update fails and presents button.
-			page.waitForXPath(
-				'//*[contains(@class, "components-notice") and contains(@class, "is-error")]/*[text()="Updating failed. You are probably offline."]'
-			),
-			page.waitForSelector( '.editor-post-save-draft' ),
-		] );
-
-		// Need to disable offline to allow reload.
-		await page.setOfflineMode( false );
-
-		await assertIsDirty( true );
-
-		expect( console ).toHaveErroredWith(
-			'Failed to load resource: net::ERR_INTERNET_DISCONNECTED'
-		);
-	} );
-
-	it( 'Should prompt if changes and save is in-flight', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early. Other requests should be allowed to continue,
-		// for example the page reload test.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		await assertIsDirty( true );
-
-		await releaseSaveIntercept();
-	} );
-
-	it( 'Should prompt if changes made while save is in-flight', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early. Other requests should be allowed to continue,
-		// for example the page reload test.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		await page.type( '.editor-post-title__input', '!' );
-		await page.waitForSelector( '.editor-post-save-draft' );
-
-		await releaseSaveIntercept();
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		// Start this check immediately after save since dirtying the post will
-		// remove the "Saved" with the Save button.
-		const savedPromise = page.waitForSelector(
-			'.editor-post-saved-state.is-saved'
-		);
-
-		// Dirty post while save is in-flight.
-		await page.type( '.editor-post-title__input', '!' );
-
-		// Allow save to complete. Disabling interception flushes pending.
-		await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Hold the posts request so we don't deal with race conditions of the
-		// save completing early.
-		await interceptSave();
-
-		// Keyboard shortcut Ctrl+S save.
-		await pressKeyWithModifier( 'primary', 'S' );
-
-		// Start this check immediately after save since dirtying the post will
-		// remove the "Saved" with the Save button.
-		const savedPromise = page.waitForSelector(
-			'.editor-post-saved-state.is-saved'
-		);
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		// Allow save to complete. Disabling interception flushes pending.
-		await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
-
-		await assertIsDirty( true );
-	} );
-
-	it( 'should save posts without titles and persist and overwrite the auto draft title', async () => {
-		// Enter content.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Paragraph' );
-
-		// Save.
-		await saveDraft();
-
-		// Verify that the title is empty.
-		const title = await page.$eval(
-			'.editor-post-title__input',
-			// Trim padding non-breaking space.
-			( element ) => element.textContent.trim()
-		);
-		expect( title ).toBe( '' );
-
-		// Verify that the post is not dirty.
-		await assertIsDirty( false );
-	} );
-
-	it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => {
-		// Enter title.
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Save.
-		await saveDraft();
-		const postId = await page.evaluate( () =>
-			window.wp.data.select( 'core/editor' ).getCurrentPostId()
-		);
-
-		// Trash post.
-		await openDocumentSettingsSidebar();
-		await page.click( '.editor-post-trash.components-button' );
-
-		await Promise.all( [
-			// Wait for "Saved" to confirm save complete.
-			await page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-
-			// Make sure redirection happens.
-			await page.waitForNavigation(),
-		] );
-
-		expect(
-			isCurrentURL(
-				'/wp-admin/edit.php',
-				`post_type=post&ids=${ postId }`
-			)
-		).toBe( true );
-	} );
-
-	it( 'consecutive edits to the same attribute should mark the post as dirty after a save', async () => {
-		// Open the sidebar block settings.
-		await openDocumentSettingsSidebar();
-		await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
-
-		// Insert a paragraph.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello, World!' );
-
-		// Save and wait till the post is clean.
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-			pressKeyWithModifier( 'primary', 'S' ),
-		] );
-
-		// Change the paragraph's `drop cap`.
-		await page.click( '[data-type="core/paragraph"]' );
-
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const [ dropCapToggle ] = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-		await dropCapToggle.click();
-		await page.click( '[data-type="core/paragraph"]' );
-
-		// Check that the post is dirty.
-		await page.waitForSelector( '.editor-post-save-draft' );
-
-		// Save and wait till the post is clean.
-		await Promise.all( [
-			page.waitForSelector( '.editor-post-saved-state.is-saved' ),
-			pressKeyWithModifier( 'primary', 'S' ),
-		] );
-
-		// Change the paragraph's `drop cap` again.
-		await page.click( '[data-type="core/paragraph"]' );
-		await dropCapToggle.click();
-
-		// Check that the post is dirty.
-		await page.waitForSelector( '.editor-post-save-draft' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/core-settings.test.js b/packages/e2e-tests/specs/editor/various/core-settings.test.js
deleted file mode 100644
index 0eb98a2de050b4..00000000000000
--- a/packages/e2e-tests/specs/editor/various/core-settings.test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-async function getOptionsValues( selector ) {
-	await visitAdminPage( 'options.php' );
-	return page.evaluate( ( theSelector ) => {
-		const inputs = Array.from( document.querySelectorAll( theSelector ) );
-		return inputs.reduce( ( memo, input ) => {
-			memo[ input.id ] = input.value;
-			return memo;
-		}, {} );
-	}, selector );
-}
-
-// It might make sense to include a similar test in WP core (or move this one over).
-// See discussion here: https://github.com/WordPress/gutenberg/pull/32797#issuecomment-864192088.
-describe( 'Settings', () => {
-	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async () => {
-		// We won't select the option that we updated and will also remove some
-		// _transient options that seem to change at every update.
-		const optionsInputsSelector =
-			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
-		const optionsBefore = await getOptionsValues( optionsInputsSelector );
-
-		await visitAdminPage( 'options-general.php' );
-		await page.type(
-			'input#blogdescription',
-			'Just another Gutenberg site'
-		);
-		await page.click( 'input#submit' );
-
-		const optionsAfter = await getOptionsValues( optionsInputsSelector );
-
-		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
-			const [ id ] = optionBefore;
-			const optionAfter = [ id, optionsAfter[ id ] ];
-			expect( optionAfter ).toStrictEqual( optionBefore );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/datepicker.test.js b/packages/e2e-tests/specs/editor/various/datepicker.test.js
deleted file mode 100644
index b0fc3bf898d4a4..00000000000000
--- a/packages/e2e-tests/specs/editor/various/datepicker.test.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils';
-
-async function getInputValue( selector ) {
-	return page.$eval( selector, ( element ) => element.value );
-}
-
-async function getSelectedOptionLabel( selector ) {
-	return page.$eval(
-		selector,
-		( element ) => element.options[ element.selectedIndex ].text
-	);
-}
-
-async function getDatePickerValues() {
-	const year = await getInputValue(
-		'.components-datetime__time-field-year input'
-	);
-	const month = await getInputValue(
-		'.components-datetime__time-field-month select'
-	);
-	const monthLabel = await getSelectedOptionLabel(
-		'.components-datetime__time-field-month select'
-	);
-	const day = await getInputValue(
-		'.components-datetime__time-field-day input'
-	);
-	const hours = await getInputValue(
-		'.components-datetime__time-field-hours-input input'
-	);
-	const minutes = await getInputValue(
-		'.components-datetime__time-field-minutes-input input'
-	);
-	const amOrPm = await page.$eval(
-		'.components-datetime__time-field-am-pm .is-primary',
-		( element ) => element.innerText.toLowerCase()
-	);
-
-	return { year, month, monthLabel, day, hours, minutes, amOrPm };
-}
-
-function trimLeadingZero( str ) {
-	return str[ 0 ] === '0' ? str.slice( 1 ) : str;
-}
-
-function formatDatePickerValues(
-	{ year, monthLabel, day, hours, minutes, amOrPm },
-	timezone
-) {
-	const dayTrimmed = trimLeadingZero( day );
-	const hoursTrimmed = trimLeadingZero( hours );
-	return `${ monthLabel } ${ dayTrimmed }, ${ year } ${ hoursTrimmed }:${ minutes }\xa0${ amOrPm } ${ timezone }`;
-}
-
-async function getPublishingDate() {
-	return page.$eval(
-		'.edit-post-post-schedule__toggle',
-		( dateLabel ) => dateLabel.textContent
-	);
-}
-
-describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
-	`Datepicker %s`,
-	( timezone ) => {
-		let oldTimezone;
-		beforeEach( async () => {
-			await page.emulateTimezone( 'America/New_York' ); // Set browser to a timezone that's different to `timezone`.
-			oldTimezone = await changeSiteTimezone( timezone );
-			await createNewPost();
-		} );
-		afterEach( async () => {
-			await changeSiteTimezone( oldTimezone );
-			await page.emulateTimezone( null );
-		} );
-
-		it( 'should show the publishing date as "Immediately" if the date is not altered', async () => {
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toEqual( 'Immediately' );
-		} );
-
-		it( 'should show the publishing date if the date is in the past', async () => {
-			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			// Change the publishing date to a year in the past.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowDown' );
-			const datePickerValues = await getDatePickerValues();
-
-			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues, timezone )
-			);
-		} );
-
-		it( 'should show the publishing date if the date is in the future', async () => {
-			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			// Change the publishing date to a year in the future.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowUp' );
-			const datePickerValues = await getDatePickerValues();
-
-			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).not.toEqual( 'Immediately' );
-			// The expected date format will be "Sep 26, 2018 11:52 pm".
-			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues, timezone )
-			);
-		} );
-
-		it( `should show the publishing date as "Immediately" if the date is cleared`, async () => {
-			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			// Change the publishing date to a year in the future.
-			await page.click( '.components-datetime__time-field-year' );
-			await page.keyboard.press( 'ArrowUp' );
-
-			// Close the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			// Open the datepicker.
-			await page.click( '.edit-post-post-schedule__toggle' );
-
-			// Clear the date.
-			await page.click(
-				'.block-editor-publish-date-time-picker button[aria-label="Now"]'
-			);
-
-			const publishingDate = await getPublishingDate();
-
-			expect( publishingDate ).toEqual( 'Immediately' );
-		} );
-	}
-);
diff --git a/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js b/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js
deleted file mode 100644
index 1ab5730ab66777..00000000000000
--- a/packages/e2e-tests/specs/editor/various/dropdown-menu.test.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, pressKeyTimes } from '@wordpress/e2e-test-utils';
-
-const moreMenuButtonSelector = '.components-button[aria-label="Options"]';
-const moreMenuDropdownSelector =
-	'.components-dropdown-menu__menu[aria-label="Options"]';
-const menuItemsSelector = [ 'menuitem', 'menuitemcheckbox', 'menuitemradio' ]
-	.map( ( role ) => `${ moreMenuDropdownSelector } [role="${ role }"]` )
-	.join( ',' );
-
-describe( 'Dropdown Menu', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'allows navigation through each item using arrow keys', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Arrow down to the last item.
-		await pressKeyTimes( 'ArrowDown', menuItems.length - 1 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		const [ lastMenuItem ] = menuItems.slice( -1 );
-		const lastMenuItemText = await lastMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the last menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( lastMenuItemText );
-
-		// Arrow back up to the first item.
-		await pressKeyTimes( 'ArrowUp', menuItems.length - 1 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to be focused again.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-
-	it( 'loops to the beginning and end when navigating past the boundaries of the menu', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Arrow up to the last item.
-		await page.keyboard.press( 'ArrowUp' );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		const [ lastMenuItem ] = menuItems.slice( -1 );
-		const lastMenuItemText = await lastMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the last menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( lastMenuItemText );
-
-		// Arrow back down to the first item.
-		await page.keyboard.press( 'ArrowDown' );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to be focused again.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-
-	it( 'ignores arrow key navigation that is orthogonal to the orientation of the menu, but stays open', async () => {
-		await page.click( moreMenuButtonSelector );
-		const menuItems = await page.$$( menuItemsSelector );
-
-		// Catch any issues with the selector, which could cause a false positive test result.
-		expect( menuItems.length ).toBeGreaterThan( 0 );
-
-		let activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		const [ firstMenuItem ] = menuItems;
-		const firstMenuItemText = await firstMenuItem.evaluate(
-			( element ) => element.textContent
-		);
-
-		// Expect the first menu item to be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-
-		// Press left and right keys an arbitrary (but > 1) number of times.
-		await pressKeyTimes( 'ArrowLeft', 5 );
-		await pressKeyTimes( 'ArrowRight', 5 );
-
-		activeElementText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-
-		// Expect the first menu item to still be focused.
-		expect( activeElementText ).toBeDefined();
-		expect( activeElementText ).toBe( firstMenuItemText );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js
deleted file mode 100644
index 801919aa9d69bb..00000000000000
--- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	createNewPost,
-	getCurrentPostContent,
-	switchEditorModeTo,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	openTypographyToolsPanelMenu,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Editing modes (visual/HTML)', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello world!' );
-	} );
-
-	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'
-		);
-		expect( visualBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as 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'
-		);
-		expect( htmlBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "HTML" back to "Visual".
-		await clickBlockToolbarButton( 'Options' );
-		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'
-		);
-		expect( visualBlock ).toHaveLength( 1 );
-	} );
-
-	it( 'should display sidebar in HTML mode', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// The `drop cap` toggle for the paragraph block should appear, even in
-		// HTML editing mode.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const dropCapToggle = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-
-		expect( dropCapToggle ).toHaveLength( 1 );
-	} );
-
-	it( 'should update HTML in HTML mode when sidebar is used', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Make sure the paragraph content is rendered as expected.
-		let htmlBlockContent = await page.$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
-
-		// Change the `drop cap` using the sidebar.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const [ dropCapToggle ] = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-		await dropCapToggle.click();
-
-		// Make sure the HTML content updated.
-		htmlBlockContent = await page.$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual(
-			'<p class="has-drop-cap">Hello world!</p>'
-		);
-	} );
-
-	it( 'the code editor should unselect blocks and disable the inserter', async () => {
-		// The paragraph block should be selected.
-		const title = await page.$eval(
-			'.block-editor-block-card__title',
-			( element ) => element.innerText
-		);
-		expect( title ).toBe( 'Paragraph' );
-
-		// The Block inspector should be active.
-		let blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
-		);
-		expect( blockInspectorTab ).not.toBeNull();
-
-		await switchEditorModeTo( 'Code' );
-
-		// The Block inspector should not be active anymore.
-		blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
-		);
-		expect( blockInspectorTab ).toBeNull();
-
-		// No block is selected.
-		await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
-		const noBlocksElement = await page.$(
-			'.block-editor-block-inspector__no-blocks'
-		);
-		expect( noBlocksElement ).not.toBeNull();
-
-		// The inserter is disabled.
-		const disabledInserter = await page.$(
-			'.edit-post-header-toolbar__inserter-toggle:disabled, .edit-post-header-toolbar__inserter-toggle[aria-disabled="true"]'
-		);
-		expect( disabledInserter ).not.toBeNull();
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/24054.
-	it( 'saves content when using the shortcut in the Code Editor', async () => {
-		await switchEditorModeTo( 'Code' );
-
-		const textContent = await page.evaluate(
-			() => document.querySelector( '.editor-post-text-editor' ).value
-		);
-		const editPosition = textContent.indexOf( 'Hello' );
-
-		// Replace the word 'Hello' with 'Hi'.
-		await page.click( '.editor-post-title__input' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyTimes( 'ArrowRight', editPosition );
-		await pressKeyTimes( 'Delete', 5 );
-		await page.keyboard.type( 'Hi' );
-
-		// Save the post using the shortcut.
-		await pressKeyWithModifier( 'primary', 's' );
-		await page.waitForSelector( '.editor-post-saved-state.is-saved' );
-
-		await switchEditorModeTo( 'Visual' );
-
-		expect( await getCurrentPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>Hi world!</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js
deleted file mode 100644
index a7522b88e7729f..00000000000000
--- a/packages/e2e-tests/specs/editor/various/embedding.test.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickButton,
-	createEmbeddingMatcher,
-	createJSONResponse,
-	createNewPost,
-	createURLMatcher,
-	getEditedPostContent,
-	insertBlock,
-	publishPost,
-	setUpResponseMocking,
-} from '@wordpress/e2e-test-utils';
-
-const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
-	url: 'https://wordpress.org/gutenberg/handbook/block-api/attributes/',
-	html: '<div class="wp-embedded-content" data-secret="shhhh it is a secret"></div>',
-	type: 'rich',
-	provider_name: 'WordPress',
-	provider_url: 'https://wordpress.org',
-	version: '1.0',
-};
-
-const MOCK_EMBED_RICH_SUCCESS_RESPONSE = {
-	url: 'https://twitter.com/notnownikki',
-	html: '<p>Mock success response.</p>',
-	type: 'rich',
-	provider_name: 'Twitter',
-	provider_url: 'https://twitter.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_PHOTO_SUCCESS_RESPONSE = {
-	url: 'https://cloudup.com/cQFlxqtY4ob',
-	html: '<p>Mock success response.</p>',
-	type: 'photo',
-	provider_name: 'Cloudup',
-	provider_url: 'https://cloudup.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_VIDEO_SUCCESS_RESPONSE = {
-	url: 'https://www.youtube.com/watch?v=lXMskKTw3Bc',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'video',
-	provider_name: 'YouTube',
-	provider_url: 'https://youtube.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_AUDIO_SUCCESS_RESPONSE = {
-	url: 'https://soundcloud.com/a-boogie-wit-da-hoodie/swervin',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'audio',
-	provider_name: 'SoundCloud',
-	provider_url: 'https://soundcloud.com',
-	version: '1.0',
-};
-
-const MOCK_EMBED_IMAGE_SUCCESS_RESPONSE = {
-	url: 'https://www.instagram.com/p/Bvl97o2AK6x/',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'video',
-	provider_name: 'Instagram',
-	provider_url: 'https://www.instagram.com',
-	version: '1.0',
-};
-
-const MOCK_BAD_EMBED_PROVIDER_RESPONSE = {
-	url: 'https://twitter.com/thatbunty',
-	html: false,
-	provider_name: 'Embed Provider',
-	version: '1.0',
-};
-
-const MOCK_CANT_EMBED_RESPONSE = {
-	provider_name: 'Embed Handler',
-	html: '<a href="https://twitter.com/wooyaygutenberg123454312">https://twitter.com/wooyaygutenberg123454312</a>',
-};
-
-const MOCK_BAD_WORDPRESS_RESPONSE = {
-	code: 'oembed_invalid_url',
-	message: 'Not Found',
-	data: {
-		status: 404,
-	},
-	html: false,
-};
-
-const MOCK_RESPONSES = [
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook'
-		),
-		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook/'
-		),
-		onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
-		),
-		onRequestMatch: createJSONResponse(
-			MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE
-		),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://www.youtube.com/watch?v=lXMskKTw3Bc'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_VIDEO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://soundcloud.com/a-boogie-wit-da-hoodie/swervin'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_AUDIO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://www.instagram.com/p/Bvl97o2AK6x/'
-		),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_IMAGE_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://cloudup.com/cQFlxqtY4ob' ),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_PHOTO_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki' ),
-		onRequestMatch: createJSONResponse( MOCK_EMBED_RICH_SUCCESS_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/notnownikki/' ),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher( 'https://twitter.com/thatbunty' ),
-		onRequestMatch: createJSONResponse( MOCK_BAD_EMBED_PROVIDER_RESPONSE ),
-	},
-	{
-		match: createEmbeddingMatcher(
-			'https://twitter.com/wooyaygutenberg123454312'
-		),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-	// Respond to the instagram URL with a non-image response, doesn't matter what it is,
-	// just make sure the image errors.
-	{
-		match: createURLMatcher( 'https://www.instagram.com/p/Bvl97o2AK6x/' ),
-		onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ),
-	},
-];
-
-async function insertEmbed( URL ) {
-	await clickBlockAppender();
-	await page.keyboard.type( '/embed' );
-	await page.waitForXPath(
-		`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Embed')]`
-	);
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type( URL );
-	await page.keyboard.press( 'Enter' );
-}
-
-describe( 'Embedding content', () => {
-	beforeEach( async () => {
-		await setUpResponseMocking( MOCK_RESPONSES );
-		await createNewPost();
-	} );
-
-	it( 'should render embeds in the correct state', async () => {
-		// Valid embed. Should render valid figure element.
-		await insertEmbed( 'https://twitter.com/notnownikki' );
-		await page.waitForSelector( 'figure.wp-block-embed' );
-
-		// Valid provider; invalid content. Should render failed, edit state.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-		await page.waitForSelector(
-			'input[value="https://twitter.com/wooyaygutenberg123454312"]'
-		);
-
-		// WordPress invalid content. Should render failed, edit state.
-		await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
-		await page.waitForSelector(
-			'input[value="https://wordpress.org/gutenberg/handbook/"]'
-		);
-
-		// Provider whose oembed API has gone wrong. Should render failed, edit
-		// state.
-		await insertEmbed( 'https://twitter.com/thatbunty' );
-		await page.waitForSelector(
-			'input[value="https://twitter.com/thatbunty"]'
-		);
-
-		// WordPress content that can be embedded. Should render valid figure
-		// element.
-		await insertEmbed(
-			'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
-		);
-		await page.waitForSelector( 'figure.wp-block-embed' );
-
-		// Video content. Should render valid figure element, and include the
-		// aspect ratio class.
-		await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
-		await page.waitForSelector(
-			'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9'
-		);
-
-		// Photo content. Should render valid figure element.
-		await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
-		await page.waitForSelector(
-			'iframe[title="Embedded content from cloudup"'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => {
-		// URL that can't be embedded.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
-		);
-
-		await clickButton( 'Convert to link' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
-		await insertEmbed( 'https://twitter.com/notnownikki/' );
-		// The twitter block should appear correctly.
-		await page.waitForSelector( 'figure.wp-block-embed' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should allow the user to try embedding a failed URL again', async () => {
-		// URL that can't be embedded.
-		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
-		);
-
-		// Set up a different mock to make sure that try again actually does make the request again.
-		await setUpResponseMocking( [
-			{
-				match: createEmbeddingMatcher(
-					'https://twitter.com/wooyaygutenberg123454312'
-				),
-				onRequestMatch: createJSONResponse(
-					MOCK_EMBED_RICH_SUCCESS_RESPONSE
-				),
-			},
-		] );
-		await clickButton( 'Try again' );
-		await page.waitForSelector( 'figure.wp-block-embed' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should switch to the WordPress block correctly', async () => {
-		// This test is to make sure that WordPress embeds are detected correctly,
-		// because the HTML can vary, and the block is detected by looking for
-		// classes in the HTML, so we need to flag up if the HTML changes.
-
-		// Publish a post to embed.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Hello there!' );
-		await publishPost();
-		const postUrl = await page.$eval(
-			'.editor-post-publish-panel [id^=inspector-text-control-]',
-			( el ) => el.value
-		);
-
-		// Start a new post, embed the previous post.
-		await createNewPost();
-		await insertEmbed( postUrl );
-
-		// Check the block has become a WordPress block.
-		await page.waitForSelector( 'figure.wp-block-embed' );
-	} );
-} );
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/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap b/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap
deleted file mode 100644
index 05823957322a11..00000000000000
--- a/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RichText should remove highlighting element 1`] = `
-"<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0)\\" class=\\"has-inline-color has-cyan-bluish-gray-color\\">1</mark></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should remove highlighting element 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js b/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js
deleted file mode 100644
index ba6a8bda061806..00000000000000
--- a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	getEditedPostContent,
-	clickBlockAppender,
-	pressKeyWithModifier,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'RichText', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should remove highlighting element', async () => {
-		await clickBlockAppender();
-
-		// Add text and select to color.
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await clickBlockToolbarButton( 'More' );
-
-		const button = await page.waitForXPath(
-			`//button[text()='Highlight']`
-		);
-		// Clicks may fail if the button is out of view. Assure it is before click.
-		await button.evaluate( ( element ) => element.scrollIntoView() );
-		await button.click();
-
-		// Use a color name with multiple words to ensure that it becomes
-		// active. Previously we had a broken regular expression.
-		const option = await page.waitForSelector(
-			'[aria-label="Color: Cyan bluish gray"]'
-		);
-
-		await option.click();
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await option.click();
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
deleted file mode 100644
index e1f6b0985e3750..00000000000000
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ /dev/null
@@ -1,383 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	closeGlobalBlockInserter,
-	createNewPost,
-	getEditedPostContent,
-	insertBlock,
-	openGlobalBlockInserter,
-	pressKeyTimes,
-	searchForBlock,
-	setBrowserViewport,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-/** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
-
-/**
- * Waits for all patterns in the inserter to have a height, which should
- * indicate they've been parsed and are visible.
- *
- * This allows a test to wait for the layout in the inserter menu to stabilize
- * before attempting to interact with the menu contents.
- */
-async function waitForInserterPatternLoad() {
-	await page.waitForFunction( () => {
-		const previewElements = document.querySelectorAll(
-			'.block-editor-block-preview__container'
-		);
-
-		if ( ! previewElements.length ) {
-			return true;
-		}
-
-		return Array.from( previewElements ).every(
-			( previewElement ) => previewElement.offsetHeight > 0
-		);
-	} );
-}
-
-describe( 'Inserting blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Given a Puppeteer ElementHandle, clicks below its bounding box.
-	 *
-	 * @param {ElementHandle} elementHandle Element handle.
-	 *
-	 * @return {Promise} Promise resolving when click occurs.
-	 */
-	async function clickAtBottom( elementHandle ) {
-		const box = await elementHandle.boundingBox();
-		const x = box.x + box.width / 2;
-		const y = box.y + box.height - 50;
-		return page.mouse.click( x, y );
-	}
-
-	it.skip( 'Should insert content using the placeholder and the regular inserter', async () => {
-		// This ensures the editor is loaded in navigation mode.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Set a tall viewport. The typewriter's intrinsic height can be enough
-		// to scroll the page on a shorter viewport, thus obscuring the presence
-		// of any potential buggy behavior with the "stretched" click redirect.
-		await setBrowserViewport( { width: 960, height: 1400 } );
-
-		// Click below editor to focus last field (block appender)
-		await clickAtBottom(
-			await page.$( '.interface-interface-skeleton__content' )
-		);
-		expect(
-			await page.waitForSelector( '[data-type="core/paragraph"]' )
-		).not.toBeNull();
-		await page.keyboard.type( 'Paragraph block' );
-
-		// Using the slash command.
-		await page.keyboard.press( 'Enter' );
-		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( 'Quote block' );
-
-		// Arrow down into default appender.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'ArrowDown' );
-
-		// Focus should be moved to block focus boundary on a block which does
-		// not have its own inputs (e.g. image). Proceeding to press enter will
-		// append the default block. Pressing backspace on the focused block
-		// will remove it.
-		await page.keyboard.type( '/image' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Image')]`
-		);
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.press( 'Backspace' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Using the regular inserter.
-		await insertBlock( 'Preformatted' );
-		await page.keyboard.type( 'Pre block' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-
-		// Verify vertical traversal at offset. This has been buggy in the past
-		// where verticality on a blank newline would skip into previous block.
-		await page.keyboard.type( 'Foo' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyTimes( 'Delete', 6 );
-		await page.keyboard.type( ' text' );
-
-		// Ensure newline preservation in shortcode block.
-		// See: https://github.com/WordPress/gutenberg/issues/4456
-		await insertBlock( 'Shortcode' );
-		await page.keyboard.type( '[myshortcode]With multiple' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'lines preserved[/myshortcode]' );
-
-		// Unselect blocks to avoid conflicts with the inbetween inserter
-		await page.click( '.editor-post-title__input' );
-		await closeGlobalBlockInserter();
-
-		// Using the between inserter.
-		const insertionPoint = await page.$( '[data-type="core/quote"]' );
-		const rect = await insertionPoint.boundingBox();
-		await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, {
-			steps: 10,
-		} );
-		const lineInserter = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point .block-editor-inserter__toggle'
-		);
-		await lineInserter.click();
-		// [TODO]: Search input should be focused immediately. It shouldn't be
-		// necessary to have `waitForFunction`.
-		await page.waitForFunction(
-			() =>
-				document.activeElement &&
-				document.activeElement.classList.contains(
-					'components-search-control__input'
-				)
-		);
-		await page.keyboard.type( 'para' );
-		await pressKeyTimes( 'Tab', 2 );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should insert block with the slash inserter when using multiple words', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '/tag cloud' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Tag Cloud')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect(
-			await page.waitForSelector( '[data-type="core/tag-cloud"]' )
-		).not.toBeNull();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/23263
-	it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => {
-		await insertBlock( 'Buttons' );
-		await page.keyboard.type( '1.1' );
-
-		// After inserting the Buttons block the inner button block should be selected.
-		const selectedButtonBlocks = await page.$$(
-			'.wp-block-button.is-selected'
-		);
-		expect( selectedButtonBlocks.length ).toBe( 1 );
-
-		// The block appender is only visible when there's no selection.
-		await page.evaluate( () =>
-			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
-		);
-		// Specifically click the root container appender.
-		await page.click(
-			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'
-		);
-
-		// Insert a paragraph block.
-		await page.waitForSelector( '.block-editor-inserter__search input' );
-
-		// Search for the paragraph block if it's not in the list of blocks shown.
-		if ( ! page.$( '.editor-block-list-item-paragraph' ) ) {
-			await page.keyboard.type( 'Paragraph' );
-			await page.waitForSelector( '.editor-block-list-item-paragraph' );
-			await waitForInserterPatternLoad();
-		}
-
-		// Add the block.
-		await page.click( '.editor-block-list-item-paragraph' );
-		await page.keyboard.type( '2' );
-
-		// The snapshot should show a buttons block followed by a paragraph.
-		// The buttons block should contain a single button.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/24262
-	it( 'inserts a block in proper place after having clicked `Browse All` from inline inserter', async () => {
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First paragraph' );
-		await insertBlock( 'Heading' );
-		await page.keyboard.type( 'Heading' );
-		await page.keyboard.press( 'Enter' );
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Second paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Third paragraph' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Using the between inserter.
-		const insertionPoint = await page.$( '[data-type="core/heading"]' );
-		const rect = await insertionPoint.boundingBox();
-		await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, {
-			steps: 10,
-		} );
-		const insertionLine = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point .block-editor-inserter__toggle'
-		);
-		await insertionLine.click();
-		const browseAll = await page.waitForSelector(
-			'button.block-editor-inserter__quick-inserter-expand'
-		);
-		await browseAll.click();
-		// `insertBlock` uses the currently open panel.
-		await insertBlock( 'Cover' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/25785
-	it( 'inserts a block should show a blue line indicator', async () => {
-		// First insert a random Paragraph.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First paragraph' );
-		await insertBlock( 'Image' );
-		const paragraphBlock = await page.$(
-			'p[aria-label="Paragraph block"]'
-		);
-		paragraphBlock.click();
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		// Open the global inserter and search for the Heading block.
-		await searchForBlock( 'Heading' );
-
-		const headingButton = (
-			await page.$x( `//button//span[contains(text(), 'Heading')]` )
-		 )[ 0 ];
-		// Hover over the block should show the blue line indicator.
-		await headingButton.hover();
-
-		// Should show the blue line indicator somewhere.
-		const indicator = await page.waitForSelector(
-			'.block-editor-block-list__insertion-point-indicator'
-		);
-		const indicatorRect = await indicator.boundingBox();
-		const paragraphRect = await paragraphBlock.boundingBox();
-
-		// The blue line indicator should be below the last block.
-		expect( indicatorRect.x ).toBe( paragraphRect.x );
-		expect( indicatorRect.y > paragraphRect.y ).toBe( true );
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
-	it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
-		await insertBlock( 'Group' );
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph after group' );
-		// Click the Group first to make the appender inside it clickable.
-		await page.click( '[data-type="core/group"]' );
-		await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
-		const browseAll = await page.waitForXPath(
-			'//button[text()="Browse all"]'
-		);
-		await browseAll.click();
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Paragraph inside group' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'passes the search value in the main inserter when clicking `Browse all`', async () => {
-		const INSERTER_SEARCH_SELECTOR =
-			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
-		await insertBlock( 'Group' );
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Text' );
-		// Click the Group first to make the appender inside it clickable.
-		await page.click( '[data-type="core/group"]' );
-		await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
-		await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
-		await page.focus( INSERTER_SEARCH_SELECTOR );
-		await pressKeyWithModifier( 'primary', 'a' );
-		const searchTerm = 'Verse';
-		await page.keyboard.type( searchTerm );
-		const browseAll = await page.waitForXPath(
-			'//button[text()="Browse all"]'
-		);
-		await browseAll.click();
-		const availableBlocks = await page.$$(
-			'.block-editor-block-types-list__list-item'
-		);
-		expect( availableBlocks ).toHaveLength( 1 );
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/27586
-	it( 'closes the main inserter after inserting a single-use block, like the More block', async () => {
-		await insertBlock( 'More' );
-		await page.waitForSelector(
-			'.edit-post-header-toolbar__inserter-toggle:not(.is-pressed)'
-		);
-
-		// The inserter panel should've closed.
-		const inserterPanels = await page.$$(
-			'.edit-post-editor__inserter-panel'
-		);
-		expect( inserterPanels.length ).toBe( 0 );
-
-		// The editable 'Read More' text should be focused.
-		const isFocusInBlock = await page.evaluate( () =>
-			document
-				.querySelector( '[data-type="core/more"]' )
-				.contains( document.activeElement )
-		);
-		expect( isFocusInBlock ).toBe( true );
-	} );
-
-	it( 'shows block preview when hovering over block in inserter', async () => {
-		await openGlobalBlockInserter();
-		await page.waitForSelector( '.editor-block-list-item-paragraph' );
-		await page.focus( '.editor-block-list-item-paragraph' );
-		const preview = await page.waitForSelector(
-			'.block-editor-inserter__preview',
-			{
-				visible: true,
-			}
-		);
-		const isPreviewVisible = await preview.isIntersectingViewport();
-		expect( isPreviewVisible ).toBe( true );
-	} );
-
-	it.each( [ 'large', 'small' ] )(
-		'last-inserted block should be given and keep the focus (%s viewport)',
-		async ( viewport ) => {
-			await setBrowserViewport( viewport );
-
-			await page.type(
-				'.block-editor-default-block-appender__content',
-				'Testing inserted block focus'
-			);
-
-			await insertBlock( 'Image' );
-
-			await page.waitForSelector( 'figure[data-type="core/image"]' );
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-
-			expect( selectedBlock.name ).toBe( 'core/image' );
-		}
-	);
-} );
diff --git a/packages/e2e-tests/specs/editor/various/invalid-block.test.js b/packages/e2e-tests/specs/editor/various/invalid-block.test.js
deleted file mode 100644
index ad08ac2f4c6b44..00000000000000
--- a/packages/e2e-tests/specs/editor/various/invalid-block.test.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickMenuItem,
-	createNewPost,
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	setPostContent,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'invalid blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show an invalid block message with clickable options', async () => {
-		// Create an empty paragraph with the focus in the block.
-		await clickBlockAppender();
-		await page.keyboard.type( 'hello' );
-
-		await clickBlockToolbarButton( 'Options' );
-
-		// Change to HTML mode and close the options.
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Focus on the textarea and enter an invalid paragraph
-		await page.click(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
-		);
-		await page.keyboard.type( '<p>invalid paragraph' );
-
-		// Takes the focus away from the block so the invalid warning is triggered
-		await page.click( '.editor-post-save-draft' );
-
-		// Click on the 'three-dots' menu toggle.
-		await page.click(
-			'.block-editor-warning__actions button[aria-label="More options"]'
-		);
-
-		await clickMenuItem( 'Resolve' );
-
-		// Check we get the resolve modal with the appropriate contents.
-		const htmlBlockContent = await page.$eval(
-			'.block-editor-block-compare__html',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual(
-			'<p>hello</p><p>invalid paragraph'
-		);
-	} );
-
-	it( 'should strip potentially malicious on* attributes', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		// The paragraph block contains invalid HTML, which causes it to be an
-		// invalid block.
-		await setPostContent(
-			`
-			<!-- wp:paragraph -->
-			<p>aaaa <img src onerror=alert(1)></x dde></x>1
-			<!-- /wp:paragraph -->
-			`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( console ).toHaveWarned();
-		expect( console ).toHaveErrored();
-		expect( hasAlert ).toBe( false );
-	} );
-
-	it( 'should strip potentially malicious script tags', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		// The shortcode block contains invalid HTML, which causes it to be an
-		// invalid block.
-		await setPostContent(
-			`
-			<!-- wp:shortcode -->
-			<animate onbegin=alert(1) attributeName=x dur=1s><script>alert("EVIL");</script><style>@keyframes x{}</style><a style="animation-name:x" onanimationstart="alert(2)"></a>
-			<!-- /wp:shortcode -->
-			`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( console ).toHaveWarned();
-		expect( console ).toHaveErrored();
-		expect( hasAlert ).toBe( false );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/packages/e2e-tests/specs/editor/various/is-typing.test.js
deleted file mode 100644
index c6208470ffb8e5..00000000000000
--- a/packages/e2e-tests/specs/editor/various/is-typing.test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	showBlockToolbar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'isTyping', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should hide the toolbar when typing', async () => {
-		const blockToolbarSelector = '.block-editor-block-toolbar';
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Toolbar is hidden
-		let blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-
-		// Moving the mouse shows the toolbar.
-		await showBlockToolbar();
-
-		// Toolbar is visible.
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).not.toBe( null );
-
-		// Typing again hides the toolbar
-		await page.keyboard.type( ' and continue' );
-
-		// Toolbar is hidden again
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-	} );
-
-	it( 'should not close the dropdown when typing in it', async () => {
-		// Adds a Dropdown with an input to all blocks.
-		await page.evaluate( () => {
-			const { Dropdown, ToolbarButton, Fill } = wp.components;
-			const { createElement: el, Fragment } = wp.element;
-			function AddDropdown( BlockListBlock ) {
-				return ( props ) => {
-					return el(
-						Fragment,
-						{},
-						el(
-							Fill,
-							{ name: 'BlockControls' },
-							el( Dropdown, {
-								renderToggle: ( { onToggle } ) =>
-									el(
-										ToolbarButton,
-										{
-											onClick: onToggle,
-											className: 'dropdown-open',
-										},
-										'Open Dropdown'
-									),
-								renderContent: () =>
-									el( 'input', {
-										className: 'dropdown-input',
-									} ),
-							} )
-						),
-						el( BlockListBlock, props )
-					);
-				};
-			}
-
-			wp.hooks.addFilter(
-				'editor.BlockListBlock',
-				'e2e-test/add-dropdown',
-				AddDropdown
-			);
-		} );
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Show Toolbar.
-		await showBlockToolbar();
-
-		// Open the dropdown.
-		await page.click( '.dropdown-open' );
-
-		// Type inside the dropdown's input
-		await page.type( '.dropdown-input', 'Random' );
-
-		// The input should still be visible.
-		const input = await page.$( '.dropdown-input' );
-		expect( input ).not.toBe( null );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js b/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js
deleted file mode 100644
index 56b2ea6263d92c..00000000000000
--- a/packages/e2e-tests/specs/editor/various/keep-styles-on-block-transforms.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Keep styles on block transforms', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should keep colors during a transform', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## Heading' );
-
-		const textColorButton = await page.waitForSelector(
-			'.block-editor-panel-color-gradient-settings__dropdown'
-		);
-		await textColorButton.click();
-
-		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
-		const [ colorButton ] = await page.$x( colorButtonSelector );
-		await colorButton.click();
-		await page.waitForXPath(
-			`${ colorButtonSelector }[@aria-pressed='true']`
-		);
-		await page.click( 'h2[data-type="core/heading"]' );
-		await transformBlockTo( 'Paragraph' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async () => {
-		// Create a paragraph block with some content.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Line 1 to be made large' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Line 2 to be made large' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Line 3 to be made large' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await page.click(
-			'[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
-		);
-		await transformBlockTo( 'Heading' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'Should not include styles in the group block when grouping a block', async () => {
-		// Create a paragraph block with some content.
-		await clickBlockAppender();
-		await page.keyboard.type( 'Line 1 to be made large' );
-		await page.click(
-			'[role="radiogroup"][aria-label="Font size"] [aria-label="Large"]'
-		);
-		await transformBlockTo( 'Group' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
deleted file mode 100644
index 9a6a432d465a6f..00000000000000
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	pressKeyWithModifier,
-	clickBlockAppender,
-	getEditedPostContent,
-	showBlockToolbar,
-} from '@wordpress/e2e-test-utils';
-
-async function getActiveLabel() {
-	return await page.evaluate( () => {
-		return (
-			document.activeElement.getAttribute( 'aria-label' ) ||
-			document.activeElement.innerHTML
-		);
-	} );
-}
-
-const navigateToContentEditorTop = async () => {
-	// Use 'Ctrl+`' to return to the top of the editor.
-	await pressKeyWithModifier( 'ctrl', '`' );
-	await pressKeyWithModifier( 'ctrl', '`' );
-};
-
-const tabThroughParagraphBlock = async ( paragraphText ) => {
-	await tabThroughBlockToolbar();
-
-	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
-	await expect(
-		await page.evaluate( () => document.activeElement.innerHTML )
-	).toBe( paragraphText );
-
-	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Open document settings' );
-};
-
-const tabThroughBlockToolbar = async () => {
-	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Move up' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Move down' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Align' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Bold' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Italic' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Link' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'More' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Options' );
-
-	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Paragraph' );
-};
-
-describe( 'Order of block keyboard navigation', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'permits tabbing through paragraph blocks in the expected order', async () => {
-		const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
-		// Create 3 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Select the middle block.
-		await page.keyboard.press( 'ArrowUp' );
-		await showBlockToolbar();
-		await navigateToContentEditorTop();
-		await tabThroughParagraphBlock( 'Paragraph 1' );
-
-		// Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
-		// This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
-		await navigateToContentEditorTop();
-		await tabThroughParagraphBlock( 'Paragraph 1' );
-	} );
-
-	it( 'allows tabbing in navigation mode if no block is selected', async () => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		await page.keyboard.press( 'Tab' );
-		await expect(
-			await page.evaluate( () => {
-				return document.activeElement.getAttribute( 'aria-label' );
-			} )
-		).toBe( 'Add title' );
-
-		await page.keyboard.press( 'Tab' );
-		await expect( await getActiveLabel() ).toBe(
-			'Paragraph Block. Row 1. 0'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await expect( await getActiveLabel() ).toBe(
-			'Paragraph Block. Row 2. 1'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await expect( await getActiveLabel() ).toBe( 'Open document settings' );
-	} );
-
-	it( 'allows tabbing in navigation mode if no block is selected (reverse)', async () => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		// Put focus behind the block list.
-		await page.evaluate( () => {
-			document
-				.querySelector( '.interface-interface-skeleton__sidebar' )
-				.focus();
-		} );
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect( await getActiveLabel() ).toBe( 'Add block' );
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect( await getActiveLabel() ).toBe( 'Add default block' );
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect( await getActiveLabel() ).toBe(
-			'Paragraph Block. Row 2. 1'
-		);
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect( await getActiveLabel() ).toBe(
-			'Paragraph Block. Row 1. 0'
-		);
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect(
-			await page.evaluate( () => {
-				return document.activeElement.getAttribute( 'aria-label' );
-			} )
-		).toBe( 'Add title' );
-	} );
-
-	it( 'should navigate correctly with multi selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '4' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		expect( await getActiveLabel() ).toBe( 'Multiple selected blocks' );
-
-		await page.keyboard.press( 'Tab' );
-		await expect( await getActiveLabel() ).toBe( 'Post' );
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect( await getActiveLabel() ).toBe(
-			'Multiple selected blocks'
-		);
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await page.keyboard.press( 'ArrowRight' );
-		await expect( await getActiveLabel() ).toBe( 'Move up' );
-	} );
-
-	it( 'allows the first element within a block to receive focus', async () => {
-		// Insert a image block.
-		await insertBlock( 'Image' );
-
-		// Make sure the upload button has focus.
-		const uploadButton = await page.waitForXPath(
-			'//button[contains( text(), "Upload" ) ]'
-		);
-		await expect( uploadButton ).toHaveFocus();
-
-		// Try to focus the image block wrapper.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect( await getActiveLabel() ).toBe( 'Block: Image' );
-	} );
-
-	it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
-		// Insert a group block.
-		await insertBlock( 'Group' );
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		// If active label matches, that means focus did not change from group block wrapper.
-		await expect( await getActiveLabel() ).toBe( 'Block: Group' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
deleted file mode 100644
index c82e0c78c1dc96..00000000000000
--- a/packages/e2e-tests/specs/editor/various/links.test.js
+++ /dev/null
@@ -1,944 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	showBlockToolbar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Links', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	const waitForURLFieldAutoFocus = async () => {
-		await page.waitForFunction(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
-	};
-
-	it( 'will use Post title as link text if link to existing post is created without any text selected', async () => {
-		const titleText = 'Post to create a link to';
-		await createPostWithTitle( titleText );
-
-		await createNewPost();
-		await clickBlockAppender();
-
-		// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
-		await page.keyboard.type( 'Here comes a link: ' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).not.toBeNull();
-
-		// Trigger the autocomplete suggestion list and select the first suggestion.
-		await page.keyboard.type( titleText.substr( 0, titleText.length - 2 ) );
-		await page.waitForSelector( '.block-editor-link-control__search-item' );
-		await page.keyboard.press( 'ArrowDown' );
-
-		await page.keyboard.press( 'Enter' );
-
-		const actualText = await page.evaluate(
-			() =>
-				document.querySelector( '.block-editor-rich-text__editable a' )
-					.textContent
-		);
-		expect( actualText ).toBe( titleText );
-	} );
-
-	it( 'can be created by selecting text and clicking Link', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Click on the Link button.
-		await page.click( 'button[aria-label="Link"]' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Submit the link.
-		await page.keyboard.press( 'Enter' );
-
-		// The link should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'will not automatically create a link if selected text is not a valid HTTP based URL', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This: is not a link' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Click on the Link button.
-		await page.click( 'button[aria-label="Link"]' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		const urlInputValue = await page.evaluate(
-			() => document.querySelector( '[aria-label="URL"]' ).value
-		);
-
-		expect( urlInputValue ).toBe( '' );
-	} );
-
-	it( 'can be created by selecting text and using keyboard shortcuts', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Toggle should still have focus and be checked.
-		await page.waitForSelector(
-			':focus:checked.components-form-toggle__input'
-		);
-
-		// Ensure that the contents of the post have not been changed, since at
-		// this point the link is still not inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Tab back to the Submit and apply the link.
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// The link should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created without any text selected', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg: ' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Press Enter to apply the link.
-		await page.keyboard.press( 'Enter' );
-
-		// A link with the URL as its text should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created instantly when a URL is selected', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type(
-			'This is Gutenberg: https://wordpress.org/gutenberg'
-		);
-
-		// Select the URL.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Click on the Link button.
-		await page.click( 'button[aria-label="Link"]' );
-
-		// A link with the selected URL as its href should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'is not created when we click away from the link input', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Click on the Link button.
-		await page.click( 'button[aria-label="Link"]' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Click somewhere else - it doesn't really matter where.
-		await page.click( '.editor-post-title' );
-	} );
-
-	const createAndReselectLink = async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Click on the Link button.
-		await page.click( 'button[aria-label="Link"]' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Click on the Submit button.
-		await page.keyboard.press( 'Enter' );
-
-		// Reselect the link.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-	};
-
-	it( 'can be edited', async () => {
-		await createAndReselectLink();
-
-		// Click on the Edit button.
-		const [ editButton ] = await page.$x(
-			'//button[contains(@aria-label, "Edit")]'
-		);
-		await editButton.click();
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Change the URL.
-		await page.keyboard.type( '/handbook' );
-
-		// Submit the link.
-		await page.keyboard.press( 'Enter' );
-
-		// The link should have been updated.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be removed', async () => {
-		await createAndReselectLink();
-
-		// Click on the Unlink button
-		// await page.click( 'button[aria-label="Unlink"]' );
-
-		// Unlick via shortcut
-		// we do this to avoid an layout edge case whereby
-		// the rich link preview popover will obscure the block toolbar
-		// under very specific circumstances and screensizes.
-		await pressKeyWithModifier( 'primaryShift', 'K' );
-
-		// The link should have been removed.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	const toggleFixedToolbar = async ( isFixed ) => {
-		await page.evaluate( ( _isFixed ) => {
-			const { select, dispatch } = wp.data;
-			const isCurrentlyFixed =
-				select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' );
-			if ( isCurrentlyFixed !== _isFixed ) {
-				dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' );
-			}
-		}, isFixed );
-	};
-
-	it( 'allows Left to be pressed during creation when the toolbar is fixed to top', async () => {
-		await toggleFixedToolbar( true );
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'Text' );
-		await page.click( 'button[aria-label="Link"]' );
-
-		// Typing "left" should not close the dialog.
-		await page.keyboard.press( 'ArrowLeft' );
-		let popover = await page.$(
-			'.components-popover__content .block-editor-link-control'
-		);
-		expect( popover ).not.toBeNull();
-
-		// Escape should close the dialog still.
-		await page.keyboard.press( 'Escape' );
-		popover = await page.$(
-			'.components-popover__content .block-editor-link-control'
-		);
-		expect( popover ).toBeNull();
-	} );
-
-	it( 'allows Left to be pressed during creation in "Docked Toolbar" mode', async () => {
-		await toggleFixedToolbar( false );
-
-		await clickBlockAppender();
-		await page.keyboard.type( 'Text' );
-
-		await clickBlockToolbarButton( 'Link' );
-
-		// Typing "left" should not close the dialog.
-		await page.keyboard.press( 'ArrowLeft' );
-		let popover = await page.$(
-			'.components-popover__content .block-editor-link-control'
-		);
-		expect( popover ).not.toBeNull();
-
-		// Escape should close the dialog still.
-		await page.keyboard.press( 'Escape' );
-		popover = await page.$(
-			'.components-popover__content .block-editor-link-control'
-		);
-		expect( popover ).toBeNull();
-	} );
-
-	it( 'can be edited with collapsed selection', async () => {
-		await createAndReselectLink();
-		// Make a collapsed selection inside the link
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowRight' );
-		await showBlockToolbar();
-		const [ editButton ] = await page.$x(
-			'//button[contains(@aria-label, "Edit")]'
-		);
-		await editButton.click();
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( '/handbook' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	const createPostWithTitle = async ( titleText ) => {
-		await createNewPost();
-		await page.type( '.editor-post-title__input', titleText );
-		await page.click( '.editor-post-publish-panel__toggle' );
-
-		// Disable reason: Wait for the animation to complete, since otherwise the
-		// click attempt may occur at the wrong point.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 100 );
-
-		// Publish the post.
-		await page.click( '.editor-post-publish-button' );
-
-		// Return the URL of the new post.
-		await page.waitForSelector(
-			'.post-publish-panel__postpublish-post-address input'
-		);
-		return page.evaluate(
-			() =>
-				document.querySelector(
-					'.post-publish-panel__postpublish-post-address input'
-				).value
-		);
-	};
-
-	it( 'allows use of escape key to dismiss the url popover', async () => {
-		const titleText = 'Test post escape';
-		await createPostWithTitle( titleText );
-
-		await createNewPost();
-		await clickBlockAppender();
-
-		// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
-		await page.keyboard.type( 'This is Gutenberg' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).not.toBeNull();
-
-		// Trigger the autocomplete suggestion list and select the first suggestion.
-		await page.keyboard.type( titleText );
-		await page.waitForSelector( '.block-editor-link-control__search-item' );
-		await page.keyboard.press( 'ArrowDown' );
-
-		// Expect the escape key to dismiss the popover when the autocomplete suggestion list is open.
-		await page.keyboard.press( 'Escape' );
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).toBeNull();
-
-		// Confirm that selection is returned to where it was before launching
-		// the link editor, with "Gutenberg" as an uncollapsed selection.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( '.' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).not.toBeNull();
-
-		// Expect the escape key to dismiss the popover normally.
-		await page.keyboard.press( 'Escape' );
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).toBeNull();
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).not.toBeNull();
-
-		// Tab to the "Open in new tab" toggle.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-
-		// Expect the escape key to dismiss the popover normally.
-		await page.keyboard.press( 'Escape' );
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).toBeNull();
-	} );
-
-	it( 'can be modified using the keyboard once a link has been set', async () => {
-		const URL = 'https://wordpress.org/gutenberg';
-
-		// Create a block with some text and format it as a link.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'K' );
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( URL );
-		await page.keyboard.press( 'Enter' );
-
-		// Deselect the link text by moving the caret to the end of the line
-		// and the link popover should not be displayed.
-		await page.keyboard.press( 'End' );
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).toBeNull();
-
-		// Move the caret back into the link text and the link popover
-		// should be displayed.
-		await page.keyboard.press( 'ArrowLeft' );
-		expect(
-			await page.$(
-				'.components-popover__content .block-editor-link-control'
-			)
-		).not.toBeNull();
-
-		// Press Cmd+K to edit the link and the url-input should become
-		// focused with the value previously inserted.
-		await pressKeyWithModifier( 'primary', 'K' );
-		await waitForURLFieldAutoFocus();
-		const isInURLInput = await page.evaluate(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
-		expect( isInURLInput ).toBe( true );
-		const activeElementValue = await page.evaluate(
-			() => document.activeElement.value
-		);
-		expect( activeElementValue ).toBe( URL );
-
-		// Confirm that submitting the input without any changes keeps the same
-		// value and moves focus back to the paragraph.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.type( '.' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'adds an assertive message for screenreader users when an invalid link is set', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'K' );
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( 'http://#test.com' );
-		await page.keyboard.press( 'Enter' );
-		const assertiveContent = await page.evaluate(
-			() => document.querySelector( '#a11y-speak-assertive' ).textContent
-		);
-		expect( assertiveContent.trim() ).toBe(
-			'Warning: the link has been inserted but may have errors. Please test it.'
-		);
-	} );
-
-	it( 'should contain a label when it should open in a new tab', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is WordPress' );
-		// Select "WordPress".
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( 'w.org' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Confirm that focus was not prematurely returned to the paragraph on
-		// a changing value of the setting.
-		await page.waitForSelector( ':focus.components-form-toggle__input' );
-
-		// Close dialog. Expect that "Open in new tab" would have been applied
-		// immediately.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"w.org") and @target="_blank"]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Regression Test: This verifies that the UI is updated according to
-		// the expected changed values, where previously the value could have
-		// fallen out of sync with how the UI is displayed (specifically for
-		// collapsed selections).
-		//
-		// See: https://github.com/WordPress/gutenberg/pull/15573
-
-		// Move caret back into the link.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Edit link.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'wordpress.org' );
-
-		// Update the link.
-		await page.keyboard.press( 'Enter' );
-
-		// Navigate back to the popover.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Navigate back to inputs to verify appears as changed.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-
-		// Navigate to the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		// Uncheck the checkbox.
-		await page.keyboard.press( 'Space' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"wordpress.org") and not(@target)]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	describe( 'Editing link text', () => {
-		it( 'should not display text input when initially creating the link', async () => {
-			// Create a block with some text.
-			await clickBlockAppender();
-			await page.keyboard.type( 'This is Gutenberg: ' );
-
-			// Press Cmd+K to insert a link.
-			await pressKeyWithModifier( 'primary', 'K' );
-
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
-
-			const textInput = await page
-				.waitForXPath(
-					'//[contains(@class, "block-editor-link-control__search-input-wrapper")]//label[contains(text(), "Text")]',
-					{
-						timeout: 1000,
-					}
-				)
-				.catch( () => false );
-
-			expect( textInput ).toBeFalsy();
-		} );
-
-		it( 'should display text input when the link has a valid URL value', async () => {
-			await createAndReselectLink();
-
-			// Make a collapsed selection inside the link. This is used
-			// as a stress test to ensure we can find the link text from a
-			// collapsed RichTextValue that contains a link format.
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowRight' );
-
-			const [ editButton ] = await page.$x(
-				'//button[contains(@aria-label, "Edit")]'
-			);
-			await editButton.click();
-			await waitForURLFieldAutoFocus();
-
-			await pressKeyWithModifier( 'shift', 'Tab' );
-
-			// Tabbing back should land us in the text input.
-			const { isTextInput, textValue } = await page.evaluate( () => {
-				const el = document.activeElement;
-
-				return {
-					isTextInput: el.matches( 'input[type="text"]' ),
-					textValue: el.value,
-				};
-			} );
-
-			// Let's check we've focused a text input.
-			expect( isTextInput ).toBe( true );
-
-			// Link was created on text value "Gutenberg". We expect
-			// the text input to reflect that value.
-			expect( textValue ).toBe( 'Gutenberg' );
-		} );
-
-		it( 'should preserve trailing/leading whitespace from linked text in text input', async () => {
-			const textToSelect = `         spaces     `;
-			const textWithWhitespace = `Text with leading and trailing${ textToSelect }`;
-
-			// Create a block with some text.
-			await clickBlockAppender();
-			await page.keyboard.type( textWithWhitespace );
-
-			// Use arrow keys to select only the text with the leading
-			// and trailing whitespace.
-			for ( let index = 0; index < textToSelect.length; index++ ) {
-				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-			}
-
-			// Click on the Link button.
-			await page.click( 'button[aria-label="Link"]' );
-
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
-
-			// Type a URL.
-			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-			// Click on the Submit button.
-			await page.keyboard.press( 'Enter' );
-
-			// Reselect the link.
-			await page.keyboard.press( 'ArrowLeft' );
-
-			await showBlockToolbar();
-
-			const [ editButton ] = await page.$x(
-				'//button[contains(@aria-label, "Edit")]'
-			);
-
-			await editButton.click();
-
-			await waitForURLFieldAutoFocus();
-
-			await pressKeyWithModifier( 'shift', 'Tab' );
-
-			// Tabbing back should land us in the text input.
-			const textInputValue = await page.evaluate(
-				() => document.activeElement.value
-			);
-
-			expect( textInputValue ).toBe( textToSelect );
-		} );
-
-		it( 'should allow for modification of link text via Link UI', async () => {
-			const originalLinkText = 'Gutenberg';
-			const changedLinkText =
-				'    link text that was modified via the Link UI to include spaces     ';
-
-			await createAndReselectLink();
-
-			// Make a collapsed selection inside the link. This is used
-			// as a stress test to ensure we can find the link text from a
-			// collapsed RichTextValue that contains a link format.
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowRight' );
-
-			await showBlockToolbar();
-			const [ editButton ] = await page.$x(
-				'//button[contains(@aria-label, "Edit")]'
-			);
-			await editButton.click();
-			await waitForURLFieldAutoFocus();
-
-			await pressKeyWithModifier( 'shift', 'Tab' );
-
-			// Tabbing back should land us in the text input.
-			const textInputValue = await page.evaluate(
-				() => document.activeElement.value
-			);
-
-			// At this point, we still expect the text input
-			// to reflect the original value with no modifications.
-			expect( textInputValue ).toBe( originalLinkText );
-
-			// Select all the link text in the input.
-			await pressKeyWithModifier( 'primary', 'a' );
-
-			// Modify the link text value.
-			await page.keyboard.type( changedLinkText );
-
-			// Submit the change.
-			await page.keyboard.press( 'Enter' );
-
-			// Check the created link reflects the link text.
-			const actualLinkText = await page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-rich-text__editable a'
-					).textContent
-			);
-			expect( actualLinkText ).toBe( changedLinkText );
-		} );
-
-		it( 'should display (capture the) text from the currently active link even if there is a rich text selection', async () => {
-			const originalLinkText = 'Gutenberg';
-
-			await createAndReselectLink();
-
-			// Make a collapsed selection inside the link in order
-			// to activate the Link UI.
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowRight' );
-
-			const [ editButton ] = await page.$x(
-				'//button[contains(@aria-label, "Edit")]'
-			);
-			await editButton.click();
-			await waitForURLFieldAutoFocus();
-
-			// Move focus back to RichText for the underlying link.
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-
-			// Make a selection within the RichText.
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-
-			// Move back to the text input.
-			await page.keyboard.press( 'Tab' );
-
-			// Tabbing back should land us in the text input.
-			const textInputValue = await page.evaluate(
-				() => document.activeElement.value
-			);
-
-			// Making a selection within the link text whilst the Link UI
-			// is open should not alter the value in the Link UI's text
-			// input. It should remain as the full text of the currently
-			// focused link format.
-			expect( textInputValue ).toBe( originalLinkText );
-		} );
-	} );
-
-	describe( 'Disabling Link UI active state', () => {
-		it( 'should not show the Link UI when selection extends beyond link boundary', async () => {
-			const linkedText = `Gutenberg`;
-			const textBeyondLinkedText = ` and more text.`;
-
-			// Create a block with some text.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				`This is ${ linkedText }${ textBeyondLinkedText }`
-			);
-
-			// Move cursor next to end of `linkedText`
-			for (
-				let index = 0;
-				index < textBeyondLinkedText.length;
-				index++
-			) {
-				await page.keyboard.press( 'ArrowLeft' );
-			}
-
-			// Select the linkedText.
-			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-			// Click on the Link button.
-			await page.click( 'button[aria-label="Link"]' );
-
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
-
-			// Type a URL.
-			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-			// Update the link.
-			await page.keyboard.press( 'Enter' );
-
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowLeft' );
-
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).not.toBeNull();
-
-			// Make selection starting within the link and moving beyond boundary to the left.
-			for ( let index = 0; index < linkedText.length; index++ ) {
-				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-			}
-
-			// The Link UI should have disappeared (i.e. be inactive).
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).toBeNull();
-
-			// Cancel selection and move back within the Link.
-			await page.keyboard.press( 'ArrowRight' );
-
-			// We should see the Link UI displayed again.
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).not.toBeNull();
-
-			// Make selection starting within the link and moving beyond boundary to the right.
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-			await pressKeyWithModifier( 'shift', 'ArrowRight' );
-
-			// The Link UI should have disappeared (i.e. be inactive).
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).toBeNull();
-		} );
-
-		it( 'should not show the Link UI when selection extends into another link', async () => {
-			const linkedTextOne = `Gutenberg`;
-			const linkedTextTwo = `Block Editor`;
-			const linkOneURL = 'https://wordpress.org';
-			const linkTwoURL = 'https://wordpress.org/gutenberg';
-
-			// Create a block with some text.
-			await clickBlockAppender();
-			await page.keyboard.type(
-				`This is the ${ linkedTextOne }${ linkedTextTwo }`
-			);
-
-			// Select the linkedTextTwo.
-			for ( let index = 0; index < linkedTextTwo.length; index++ ) {
-				await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-			}
-
-			// Click on the Link button.
-			await page.click( 'button[aria-label="Link"]' );
-
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
-
-			// Type a URL.
-			await page.keyboard.type( linkTwoURL );
-
-			// Update the link.
-			await page.keyboard.press( 'Enter' );
-
-			// Move cursor next to the **end** of `linkTextOne`
-			for ( let index = 0; index < linkedTextTwo.length + 2; index++ ) {
-				await page.keyboard.press( 'ArrowLeft' );
-			}
-
-			// Select `linkTextOne`
-			await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-			// Click on the Link button.
-			await page.click( 'button[aria-label="Link"]' );
-
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
-
-			// Type a URL.
-			await page.keyboard.type( linkOneURL );
-
-			// Update the link.
-			await page.keyboard.press( 'Enter' );
-
-			// Move cursor within `linkTextOne`
-			for ( let index = 0; index < 3; index++ ) {
-				await page.keyboard.press( 'ArrowLeft' );
-			}
-
-			// Link UI should activate for `linkTextOne`
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).not.toBeNull();
-
-			// Expand selection so that it overlaps with `linkTextTwo`
-			for ( let index = 0; index < 3; index++ ) {
-				await pressKeyWithModifier( 'shift', 'ArrowRight' );
-			}
-
-			// Link UI should be inactive.
-			expect(
-				await page.$(
-					'.components-popover__content .block-editor-link-control'
-				)
-			).toBeNull();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/list-view.test.js b/packages/e2e-tests/specs/editor/various/list-view.test.js
deleted file mode 100644
index dfb3caf1d8aa40..00000000000000
--- a/packages/e2e-tests/specs/editor/various/list-view.test.js
+++ /dev/null
@@ -1,330 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	getEditedPostContent,
-	openListView,
-	pressKeyWithModifier,
-	pressKeyTimes,
-} from '@wordpress/e2e-test-utils';
-
-async function dragAndDrop( draggableElement, targetElement, offsetY ) {
-	const draggablePoint = await draggableElement.clickablePoint();
-	const targetClickablePoint = await targetElement.clickablePoint();
-	const targetPoint = {
-		x: targetClickablePoint.x,
-		y: targetClickablePoint.y + offsetY,
-	};
-
-	return await page.mouse.dragAndDrop( draggablePoint, targetPoint );
-}
-
-async function getBlockListLeafNodes() {
-	return await page.$$( '.block-editor-list-view-leaf' );
-}
-
-describe( 'List view', () => {
-	beforeAll( async () => {
-		await page.setDragInterception( true );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await page.setDragInterception( false );
-	} );
-
-	it( 'allows a user to drag a block to a new sibling position', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Heading' );
-		await insertBlock( 'Image' );
-		await insertBlock( 'Paragraph' );
-
-		// Open list view.
-		await pressKeyWithModifier( 'access', 'o' );
-
-		const paragraphBlock = await page.waitForXPath(
-			'//a[contains(., "Paragraph")][@draggable="true"]'
-		);
-
-		// Drag above the heading block.
-		const headingBlock = await page.waitForXPath(
-			'//a[contains(., "Heading")][@draggable="true"]'
-		);
-
-		await dragAndDrop( paragraphBlock, headingBlock, -5 );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38763.
-	it( 'shows the correct amount of blocks after a block is removed in the canvas', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Image' );
-		await insertBlock( 'Heading' );
-		await insertBlock( 'Paragraph' );
-
-		// Open list view.
-		await pressKeyWithModifier( 'access', 'o' );
-
-		// The last inserted paragraph block should be selected in List View.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
-		);
-
-		// Go to the image block in list view.
-		await pressKeyTimes( 'ArrowUp', 2 );
-		const listViewImageBlock = await page.waitForXPath(
-			'//a[contains(., "Image")]'
-		);
-		await expect( listViewImageBlock ).toHaveFocus();
-
-		// Select the image block in the canvas.
-		await page.keyboard.press( 'Enter' );
-
-		const uploadButton = await page.waitForXPath(
-			'//button[contains( text(), "Upload" ) ]'
-		);
-		await expect( uploadButton ).toHaveFocus();
-
-		// Delete the image block in the canvas.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Backspace' );
-
-		// List view should have two rows.
-		const listViewRows = await page.$$( 'tr.block-editor-list-view-leaf' );
-		expect( listViewRows ).toHaveLength( 2 );
-
-		// The console didn't throw an error as reported in
-		// https://github.com/WordPress/gutenberg/issues/38763.
-		expect( console ).not.toHaveErrored();
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/39026
-	it( 'should select previous block after removing selected one', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Image' );
-		await insertBlock( 'Heading' );
-		await insertBlock( 'Paragraph' );
-
-		// Open list view.
-		await openListView();
-
-		// The last inserted paragraph block should be selected in List View.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
-		);
-
-		// Paragraph options button.
-		const paragraphOptionsButton = await page.waitForSelector(
-			'tr.block-editor-list-view-leaf:last-child button[aria-label="Options for Paragraph block"]'
-		);
-
-		await paragraphOptionsButton.click();
-
-		const paragraphRemoveButton = await page.waitForXPath(
-			'//button[contains(., "Remove Paragraph")]'
-		);
-
-		// Remove paragraph.
-		await paragraphRemoveButton.click();
-
-		// Heading block should be selected as previous block.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
-		);
-	} );
-
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/39026
-	it( 'should select next block after removing the very first block', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Image' );
-		await insertBlock( 'Heading' );
-		await insertBlock( 'Paragraph' );
-
-		// Open list view.
-		await openListView();
-
-		// The last inserted paragraph block should be selected in List View.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
-		);
-
-		// Go to the image block in list view.
-		await pressKeyTimes( 'ArrowUp', 2 );
-		await pressKeyTimes( 'Enter', 1 );
-
-		// Image block should have selected.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Image"]'
-		);
-
-		// Image options dropdown.
-		const imageOptionsButton = await page.waitForSelector(
-			'tr.block-editor-list-view-leaf:first-child button[aria-label="Options for Image block"]'
-		);
-
-		await imageOptionsButton.click();
-
-		const imageRemoveButton = await page.waitForXPath(
-			'//button[contains(., "Remove Image")]'
-		);
-
-		// Remove Image block.
-		await imageRemoveButton.click();
-
-		// Heading block should be selected as next block.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
-		);
-	} );
-
-	/**
-	 * When all the blocks gets removed from the editor, it inserts a default paragraph block;
-	 * make sure that paragraph block gets selected after removing blocks from ListView.
-	 */
-	it( 'should select default paragraph block after removing all blocks', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Image' );
-		await insertBlock( 'Heading' );
-
-		// Open list view.
-		await openListView();
-
-		// The last inserted heading block should be selected in List View.
-		const headingBlock = await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
-		);
-
-		await headingBlock.click();
-
-		// Select all two blocks.
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		// Both Image and Heading blocks should have selected.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Heading"]'
-		);
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Image"]'
-		);
-
-		const imageOptionsButton = await page.waitForSelector(
-			'tr.block-editor-list-view-leaf:first-child button[aria-label="Options for Image block"]'
-		);
-
-		// Blocks options dropdown.
-		await imageOptionsButton.click();
-
-		const blocksRemoveButton = await page.waitForXPath(
-			'//button[contains(., "Remove blocks")]'
-		);
-
-		// Remove all blocks.
-		await blocksRemoveButton.click();
-
-		// Newly created default paragraph block should be selected.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Paragraph"]'
-		);
-	} );
-
-	it( 'should expand nested list items', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Cover' );
-
-		// Click first color option from the block placeholder's color picker to make the inner blocks appear.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		await colorPickerButton.click();
-
-		// Open list view.
-		await openListView();
-
-		// Things start off expanded.
-		expect( await getBlockListLeafNodes() ).toHaveLength( 2 );
-
-		const blockListExpanders = await page.$$(
-			'.block-editor-list-view__expander'
-		);
-
-		// Collapse the first block
-		await blockListExpanders[ 0 ].click();
-
-		// Check that we're collapsed
-		expect( await getBlockListLeafNodes() ).toHaveLength( 1 );
-
-		// Focus the cover block. The paragraph is not focussed by default.
-		const coverBlock = await page.waitForSelector( '.wp-block-cover' );
-
-		await coverBlock.focus();
-
-		// Click the cover title placeholder.
-		const coverTitle = await page.waitForSelector(
-			'.wp-block-cover .wp-block-paragraph'
-		);
-
-		await coverTitle.click();
-
-		// The block list should contain two leafs and the second should be selected (and be a paragraph).
-		const selectedElementText = await page.$eval(
-			'.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents',
-			( element ) => element.innerText
-		);
-
-		expect( selectedElementText ).toContain( 'Paragraph' );
-	} );
-
-	// Test keyboard Home/End keys.
-	it( 'ensures the Home/End keyboard keys move focus to start/end of list', async () => {
-		// Insert some blocks of different types.
-		await insertBlock( 'Image' );
-		await insertBlock( 'Heading' );
-		await insertBlock( 'Paragraph' );
-		await insertBlock( 'Columns' );
-		await insertBlock( 'Group' );
-
-		// Open list view.
-		await pressKeyWithModifier( 'access', 'o' );
-
-		// The last inserted group block should be selected in list view.
-		await page.waitForSelector(
-			'.block-editor-list-view-block__contents-cell[aria-selected="true"][aria-label^="Group"]'
-		);
-
-		// Press Home to go to the first inserted block (image).
-		await page.keyboard.press( 'Home' );
-		const listViewImageBlock = await page.waitForXPath(
-			'//a[contains(., "Image")]'
-		);
-		await expect( listViewImageBlock ).toHaveFocus();
-
-		// Press End followed by Arrow Up to go to the second to last block (columns).
-		await page.keyboard.press( 'End' );
-		await page.keyboard.press( 'ArrowUp' );
-		const listViewColumnsBlock = await page.waitForXPath(
-			'//a[contains(., "Columns")]'
-		);
-		await expect( listViewColumnsBlock ).toHaveFocus();
-
-		// Try navigating the right column to image block options button via Home key.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Home' );
-		const listViewImageBlockRight = await page.waitForSelector(
-			'button[aria-label="Options for Image block"]'
-		);
-		await expect( listViewImageBlockRight ).toHaveFocus();
-
-		// Try navigating the right column to group block options button.
-		await page.keyboard.press( 'End' );
-		const listViewGroupBlockRight = await page.waitForSelector(
-			'button[aria-label="Options for Group block"]'
-		);
-		await expect( listViewGroupBlockRight ).toHaveFocus();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js
deleted file mode 100644
index 47c238a430b4f1..00000000000000
--- a/packages/e2e-tests/specs/editor/various/manage-reusable-blocks.test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-
-/**
- * WordPress dependencies
- */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-describe( 'Managing reusable blocks', () => {
-	/**
-	 * Returns a Promise which resolves to the number of post list entries on
-	 * the current page.
-	 *
-	 * @return {Promise} Promise resolving to number of post list entries.
-	 */
-	async function getNumberOfEntries() {
-		return page.evaluate(
-			() => document.querySelectorAll( '.hentry' ).length
-		);
-	}
-
-	beforeAll( async () => {
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-	} );
-
-	it( 'Should import reusable blocks', async () => {
-		const originalEntries = await getNumberOfEntries();
-
-		// Import Reusable block.
-		await page.waitForSelector( '.list-reusable-blocks__container' );
-		const importButton = await page.$(
-			'.list-reusable-blocks__container button'
-		);
-		await importButton.click();
-
-		// Select the file to upload.
-		const testReusableBlockFile = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
-			'greeting-reusable-block.json'
-		);
-		const input = await page.$( '.list-reusable-blocks-import-form input' );
-		await input.uploadFile( testReusableBlockFile );
-
-		// Submit the form.
-		const button = await page.$(
-			'.list-reusable-blocks-import-form__button'
-		);
-		await button.click();
-
-		// Wait for the success notice.
-		await page.waitForSelector( '.notice-success' );
-		const noticeContent = await page.$eval(
-			'.notice-success',
-			( element ) => element.textContent
-		);
-		expect( noticeContent ).toEqual(
-			'Reusable block imported successfully!'
-		);
-
-		// Refresh the page.
-		await visitAdminPage( 'edit.php', 'post_type=wp_block' );
-
-		const expectedEntries = originalEntries + 1;
-		const actualEntries = await getNumberOfEntries();
-
-		expect( actualEntries ).toBe( expectedEntries );
-	} );
-} );
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
deleted file mode 100644
index 3d0db13db8ad02..00000000000000
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ /dev/null
@@ -1,1035 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	pressKeyWithModifier,
-	pressKeyTimes,
-	getEditedPostContent,
-	clickBlockToolbarButton,
-	clickButton,
-	clickMenuItem,
-	insertBlock,
-	openListView,
-	saveDraft,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-async function getSelectedFlatIndices() {
-	return await page.evaluate( () => {
-		const indices = [];
-		let single;
-
-		Array.from(
-			document.querySelectorAll( '.wp-block:not(.editor-post-title)' )
-		).forEach( ( node, index ) => {
-			if ( node.classList.contains( 'is-selected' ) ) {
-				single = index + 1;
-			}
-
-			if ( node.classList.contains( 'is-multi-selected' ) ) {
-				indices.push( index + 1 );
-			}
-		} );
-
-		return single !== undefined ? single : indices;
-	} );
-}
-
-/**
- * Tests if the native selection matches the block selection.
- */
-async function testNativeSelection() {
-	// Wait for the selection to update and async mode to update classes of
-	// deselected blocks.
-	await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-	await page.evaluate( () => {
-		const selection = window.getSelection();
-		const elements = Array.from(
-			document.querySelectorAll( '.is-multi-selected' )
-		);
-
-		if ( ! elements.length ) {
-			const element = document.querySelector( '.is-selected' );
-
-			if ( ! element || ! selection.rangeCount ) {
-				return;
-			}
-
-			const { startContainer, endContainer } = selection.getRangeAt( 0 );
-
-			if ( ! element.contains( startContainer ) ) {
-				throw 'expected selection to start in the selected block';
-			}
-
-			if ( ! element.contains( endContainer ) ) {
-				throw 'expected selection to start in the selected block';
-			}
-
-			return;
-		}
-
-		if ( ! selection.rangeCount === 1 ) {
-			throw 'expected one range';
-		}
-
-		if ( selection.isCollapsed ) {
-			throw 'expected an uncollapsed selection';
-		}
-
-		const firstElement = elements[ 0 ];
-		const lastElement = elements[ elements.length - 1 ];
-
-		if ( ! selection.containsNode( firstElement, true ) ) {
-			throw 'expected selection to include in the first selected block';
-		}
-
-		if ( ! selection.containsNode( lastElement, true ) ) {
-			throw 'expected selection to include in the last selected block';
-		}
-	} );
-}
-
-describe( 'Multi-block selection', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should select with double ctrl+a and speak', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-
-		// Multiselect via keyboard.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2, 3 ] );
-
-		// TODO: It would be great to do this test by spying on `wp.a11y.speak`,
-		// but it's very difficult to do that because `wp.a11y` has
-		// DOM-dependant side-effect setup code and doesn't seem straightforward
-		// to mock. Instead, we check for the DOM node that `wp.a11y.speak()`
-		// inserts text into.
-		const speakTextContent = await page.$eval(
-			'#a11y-speak-assertive',
-			( element ) => element.textContent
-		);
-		expect( speakTextContent.trim() ).toEqual( '3 blocks selected.' );
-	} );
-
-	// See #14448: an incorrect buffer may trigger multi-selection too soon.
-	it( 'should only trigger multi-selection when at the end', async () => {
-		// Create a paragraph with four lines.
-		await clickBlockAppender();
-		await page.keyboard.type( '1.' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.type( '2.' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.type( '3.' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.type( '4.' );
-		// Create a second block.
-		await page.keyboard.press( 'Enter' );
-		// Move to the middle of the first line.
-		await pressKeyTimes( 'ArrowUp', 4 );
-		await page.keyboard.press( 'ArrowRight' );
-		// Select mid line one to mid line four.
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-		// Delete the text to see if the selection was correct.
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should use selection direction to determine vertical edge', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.type( '2' );
-
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		// Should type at the end of the paragraph.
-		await page.keyboard.type( '.' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should always expand single line selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '12' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await testNativeSelection();
-		// This deletes all blocks.
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should allow selecting outer edge if there is no sibling block', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		// This should replace the content.
-		await page.keyboard.type( '2' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should select and deselect with shift and arrow keys', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '4' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '5' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4, 5 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toBe( 3 );
-
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2, 3 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
-
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toBe( 3 );
-	} );
-
-	// Flaky test.
-	it.skip( 'should deselect with Escape', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-
-		await page.keyboard.press( 'Escape' );
-
-		// Wait for blocks to have updated asynchronously.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		expect( await getSelectedFlatIndices() ).toEqual( [] );
-	} );
-
-	it( 'should select with shift + click', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"]' );
-		await page.keyboard.up( 'Shift' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-
-		// Group the blocks and test that multiselection also works for nested
-		// blocks. Checks for regressions of
-		// https://github.com/WordPress/gutenberg/issues/32056
-
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Group' );
-		await page.click( '[data-type="core/paragraph"]' );
-		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"]:nth-child(2)' );
-		await page.keyboard.up( 'Shift' );
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
-	} );
-
-	// @see https://github.com/WordPress/gutenberg/issues/34118
-	it( 'should properly select a single block even if `shift` was held for the selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"]', { visible: true } );
-		await page.keyboard.up( 'Shift' );
-
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'new content' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>new content</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-
-	it( 'should properly select multiple blocks if selected nested blocks belong to different parent', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'first' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'group' );
-		// Multiselect via keyboard.
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.up( 'Shift' );
-		await transformBlockTo( 'Group' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'second' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'group' );
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.up( 'Shift' );
-		await transformBlockTo( 'Group' );
-
-		// Confirm setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Click the first paragraph in the first Group block while pressing `shift` key.
-		const firstParagraph = await page.waitForXPath( "//p[text()='first']" );
-		await page.keyboard.down( 'Shift' );
-		await firstParagraph.click();
-		await page.keyboard.up( 'Shift' );
-
-		await page.waitForSelector( '.is-multi-selected' );
-		const selectedBlocks = await page.$$( '.is-multi-selected' );
-		expect( selectedBlocks ).toHaveLength( 2 );
-	} );
-	it( 'should properly select part of nested rich text block while holding shift', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'rich text in group' );
-		await transformBlockTo( 'Group' );
-		await page.keyboard.press( 'ArrowDown' );
-
-		await page.keyboard.down( 'Shift' );
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const { x, y } = await paragraph.boundingBox();
-		await page.mouse.move( x + 20, y );
-		await page.mouse.down();
-		await page.keyboard.up( 'Shift' );
-		await page.mouse.up();
-		await page.keyboard.type( 'hi' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-		<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-		<p>hih text in group</p>
-		<!-- /wp:paragraph --></div>
-		<!-- /wp:group -->"
-	` );
-	} );
-
-	it( 'should select by dragging', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'ArrowUp' );
-
-		const [ paragraph1, paragraph2 ] = await page.$$(
-			'[data-type="core/paragraph"]'
-		);
-		const coord1 = await paragraph1.clickablePoint();
-		const coord2 = await paragraph2.clickablePoint();
-
-		await page.mouse.move( coord1.x, coord1.y );
-		await page.mouse.down();
-		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
-		await page.mouse.up();
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-	} );
-
-	it( 'should select by dragging into nested block', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '/group' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-
-		const groupAppender = await page.waitForSelector(
-			'.block-editor-button-block-appender'
-		);
-		await groupAppender.click();
-
-		const paragraphBlockButton = await page.waitForSelector(
-			'.editor-block-list-item-paragraph'
-		);
-		await paragraphBlockButton.click();
-
-		await page.keyboard.type( '2' );
-
-		const [ paragraph1, paragraph2 ] = await page.$$(
-			'[data-type="core/paragraph"]'
-		);
-		const coord1 = await paragraph1.clickablePoint();
-		const coord2 = await paragraph2.clickablePoint();
-
-		await page.mouse.move( coord1.x, coord1.y );
-		await page.mouse.down();
-		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
-		await page.mouse.up();
-
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-	} );
-
-	it( 'should cut and paste', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'x' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should copy and paste', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should return original focus after failed multi selection attempt', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		const [ coord1, coord2 ] = await page.evaluate( () => {
-			const selection = window.getSelection();
-
-			if ( ! selection.rangeCount ) {
-				return;
-			}
-
-			const range = selection.getRangeAt( 0 );
-			const rect1 = range.getClientRects()[ 0 ];
-			const element = document.querySelector(
-				'[data-type="core/paragraph"]'
-			);
-			const rect2 = element.getBoundingClientRect();
-
-			return [
-				{
-					x: rect1.x,
-					y: rect1.y + rect1.height / 2,
-				},
-				{
-					// Move a bit outside the paragraph.
-					x: rect2.x - 5,
-					y: rect2.y + rect2.height / 2,
-				},
-			];
-		} );
-
-		await page.mouse.move( coord1.x, coord1.y );
-		await page.mouse.down();
-		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
-		await page.mouse.up();
-
-		// Wait for the selection to update.
-		await page.evaluate(
-			() => new Promise( window.requestAnimationFrame )
-		);
-
-		// Only "1" should be deleted.
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should preserve dragged selection on move', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-
-		const paragraphs = await page.$$( '[data-type="core/paragraph"]' );
-		const coord1 = await paragraphs[ 2 ].clickablePoint();
-		const coord2 = await paragraphs[ 1 ].clickablePoint();
-
-		await page.mouse.move( coord1.x, coord1.y );
-		await page.mouse.down();
-		await page.mouse.move( coord2.x, coord2.y );
-		await page.mouse.up();
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
-
-		await clickBlockToolbarButton( 'Move up' );
-
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should clear selection when clicking next to blocks', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const rect = await paragraph.boundingBox();
-		const coord = {
-			x: rect.x - 1,
-			y: rect.y + rect.height / 2,
-		};
-
-		await page.mouse.click( coord.x, coord.y );
-
-		// Wait for blocks to have updated asynchronously.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		await testNativeSelection();
-		expect( await getSelectedFlatIndices() ).toEqual( [] );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should place the caret at the end of last pasted paragraph (paste to empty editor)', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'first paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'second paragraph' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-		await page.keyboard.press( 'Backspace' );
-		await pressKeyWithModifier( 'primary', 'v' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should place the caret at the end of last pasted paragraph (paste mid-block)', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'first paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'second paragraph' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		await pressKeyWithModifier( 'primary', 'v' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should place the caret at the end of last pasted paragraph (replace)', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'first paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'second paragraph' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-		await pressKeyWithModifier( 'primary', 'v' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should set attributes for multiple paragraphs', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await clickBlockToolbarButton( 'Align' );
-		await clickButton( 'Align text center' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should copy multiple blocks', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Previously we would unexpectedly duplicate the block on Enter.
-	it( 'should not multi select single block', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should gradually multi-select', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '/columns' );
-		await page.keyboard.press( 'Enter' );
-		// Select two columns.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Enter' );
-		// Navigate to appender.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Enter' );
-		// Select a paragraph.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-
-		// Confirm correct setup: two columns with two paragraphs in the first.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.waitForSelector(
-			'[data-type="core/paragraph"].is-multi-selected'
-		);
-
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.waitForSelector( '[data-type="core/column"].is-selected' );
-
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.waitForSelector(
-			'[data-type="core/column"].is-multi-selected'
-		);
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect both columns to be deleted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should multi-select from within the list block', async () => {
-		await clickBlockAppender();
-		// Select a paragraph.
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		// Add a list.
-		await page.keyboard.type( '/list' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '1' );
-
-		// Confirm correct setup: a paragraph and a list.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.waitForSelector(
-			'[data-type="core/paragraph"].is-multi-selected'
-		);
-	} );
-
-	it( 'should select all from empty selection', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-
-		// Confirm setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Clear the selected block.
-		await page.keyboard.press( 'Escape' );
-		await page.keyboard.press( 'Escape' );
-
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect both paragraphs to be deleted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should select title if the cursor is on title', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-
-		await page.type( '.editor-post-title__input', 'Post title' );
-
-		await pressKeyWithModifier( 'primary', 'a' );
-		const selectedText = await page.evaluate( () => {
-			return window.getSelection().toString();
-		} );
-		expect( selectedText ).toEqual( 'Post title' );
-	} );
-
-	it( 'should multi-select in the ListView component with shift + click', async () => {
-		// Create four blocks.
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '4' );
-
-		// Open up the list view, and get a reference to each of the list items.
-		await openListView();
-		const navButtons = await page.$$(
-			'.block-editor-list-view-block-select-button'
-		);
-
-		// Clicking on the second list item should result in the second block being selected.
-		await navButtons[ 1 ].click();
-		expect( await getSelectedFlatIndices() ).toEqual( 2 );
-
-		// Shift clicking the fourth list item should result in blocks 2 through 4 being selected.
-		await page.keyboard.down( 'Shift' );
-		await navButtons[ 3 ].click();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
-
-		// With the shift key still held down, clicking the first block should result in
-		// the first two blocks being selected.
-		await navButtons[ 0 ].click();
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-
-		// With the shift key up, clicking the fourth block should result in only that block
-		// being selected.
-		await page.keyboard.up( 'Shift' );
-		await navButtons[ 3 ].click();
-		expect( await getSelectedFlatIndices() ).toEqual( 4 );
-	} );
-
-	it( 'should multi-select in the ListView component with shift + up and down keys', async () => {
-		// Create four blocks.
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '4' );
-
-		// Open up the list view. The fourth block button will be focused.
-		await openListView();
-
-		// Press Up twice to focus over the second block.
-		await pressKeyTimes( 'ArrowUp', 2 );
-
-		// Shift + press Down to select the 2nd and 3rd blocks.
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowDown' );
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );
-
-		// Press Down once more to also select the 4th block.
-		await page.keyboard.press( 'ArrowDown' );
-		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3, 4 ] );
-
-		// Press Up three times to adjust the selection to only include the first two blocks.
-		await pressKeyTimes( 'ArrowUp', 3 );
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-
-		// Raise the shift key
-		await page.keyboard.up( 'Shift' );
-
-		// Navigate to the bottom of the list of blocks.
-		await pressKeyTimes( 'ArrowDown', 3 );
-
-		// Shift + press UP to select the 3rd and 4th blocks.
-		// This tests that shift selecting blocks by keyboard that are not adjacent
-		// to an existing selection resets the selection.
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.up( 'Shift' );
-		expect( await getSelectedFlatIndices() ).toEqual( [ 3, 4 ] );
-	} );
-
-	it( 'should forward delete across blocks', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1[' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '.' );
-		await page.keyboard.press( 'Enter' );
-		// "## " creates h2.
-		await page.keyboard.type( '## ]2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		// Select everything between [].
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Delete' );
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '&' );
-
-		// Expect a heading with "1&2" as its content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should write over selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1[' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ']2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		// Select everything between [].
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '...' );
-
-		// Expect a heading with "1&2" as its content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should handle Enter across blocks', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1[' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '.' );
-		await page.keyboard.press( 'Enter' );
-		// "## " creates h2.
-		await page.keyboard.type( '## ]2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		// Select everything between [].
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Enter' );
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '&' );
-
-		// Expect two blocks with "&" in between.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should select separator (single element block)', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'a' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '/hr' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowRight' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-		await pressKeyWithModifier( 'shift', 'ArrowDown' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '&' );
-
-		// Expect a paragraph with "&".
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should partially select with shift + click', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '[' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ']2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.down( 'Shift' );
-		await page.click( 'strong' );
-		await page.keyboard.up( 'Shift' );
-
-		// Test setup.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await page.keyboard.press( 'Backspace' );
-
-		// Ensure selection is in the correct place.
-		await page.keyboard.type( '&' );
-
-		// Expect two blocks with "&" in between.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-	describe( 'shift+click multi-selection', () => {
-		it( 'should multi-select block with text selection and a block without text selection', async () => {
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'hi' );
-			await page.keyboard.press( 'Enter' );
-			await insertBlock( 'Spacer' );
-			await page.keyboard.press( 'ArrowUp' );
-
-			const spacerBlock = await page.waitForSelector(
-				'.wp-block.wp-block-spacer'
-			);
-			const boundingBox = await spacerBlock.boundingBox();
-			const mousePosition = {
-				x: boundingBox.x + boundingBox.width / 2,
-				y: boundingBox.y + boundingBox.height / 2,
-			};
-			await page.keyboard.down( 'Shift' );
-			await page.mouse.click( mousePosition.x, mousePosition.y );
-			await page.keyboard.up( 'Shift' );
-
-			const selectedBlocks = await page.$$(
-				'.wp-block.is-multi-selected'
-			);
-			expect( selectedBlocks.length ).toBe( 2 );
-		} );
-		it( 'should multi-select blocks without text selection', async () => {
-			await insertBlock( 'Spacer' );
-			// Get the first spacer block element.
-			const spacerBlock = await page.waitForSelector(
-				'.wp-block.wp-block-spacer'
-			);
-			const boundingBox = await spacerBlock.boundingBox();
-			await page.keyboard.press( 'Enter' );
-			await insertBlock( 'Spacer' );
-			const mousePosition = {
-				x: boundingBox.x + boundingBox.width / 2,
-				y: boundingBox.y + boundingBox.height / 2,
-			};
-			await page.keyboard.down( 'Shift' );
-			await page.mouse.click( mousePosition.x, mousePosition.y );
-			await page.keyboard.up( 'Shift' );
-			const selectedBlocks = await page.$$(
-				'.wp-block.is-multi-selected'
-			);
-			expect( selectedBlocks.length ).toBe( 2 );
-		} );
-	} );
-
-	it( 'should select by dragging into separator', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await insertBlock( 'Separator' );
-		await page.keyboard.press( 'ArrowUp' );
-
-		const [ paragraph, hr ] = await page.$$( '[data-type]' );
-		const coord1 = await paragraph.clickablePoint();
-		const coord2 = await hr.clickablePoint();
-
-		await page.mouse.move( coord1.x, coord1.y );
-		await page.mouse.down();
-		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
-		await page.mouse.up();
-
-		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
deleted file mode 100644
index ec93851707849c..00000000000000
--- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, pressKeyWithModifier } from '@wordpress/e2e-test-utils';
-
-async function isInBlockToolbar() {
-	return await page.evaluate( () => {
-		return !! document.activeElement.closest(
-			'.block-editor-block-toolbar'
-		);
-	} );
-}
-
-describe.each( [
-	[ 'unified', true ],
-	[ 'contextual', false ],
-] )( 'block toolbar (%s: %p)', ( label, isUnifiedToolbar ) => {
-	beforeEach( async () => {
-		await createNewPost();
-
-		await page.evaluate( ( _isUnifiedToolbar ) => {
-			const { select, dispatch } = wp.data;
-			const isCurrentlyUnified =
-				select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' );
-			if ( isCurrentlyUnified !== _isUnifiedToolbar ) {
-				dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' );
-			}
-		}, isUnifiedToolbar );
-	} );
-
-	it( 'navigates in and out of toolbar by keyboard (Alt+F10, Escape)', async () => {
-		// Assumes new post focus starts in title. Create first new
-		// block by Enter.
-		await page.keyboard.press( 'Enter' );
-
-		// [TEMPORARY]: A new paragraph is not technically a block yet
-		// until starting to type within it.
-		await page.keyboard.type( 'Example' );
-
-		// Upward.
-		await pressKeyWithModifier( 'alt', 'F10' );
-		expect( await isInBlockToolbar() ).toBe( true );
-	} );
-
-	if ( ! isUnifiedToolbar ) {
-		it( 'should not scroll page', async () => {
-			while (
-				await page.evaluate( () => {
-					const scrollable = wp.dom.getScrollContainer(
-						document.activeElement
-					);
-					return ! scrollable || scrollable.scrollTop === 0;
-				} )
-			) {
-				await page.keyboard.press( 'Enter' );
-			}
-
-			await page.keyboard.type( 'a' );
-
-			const scrollTopBefore = await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop
-			);
-
-			await pressKeyWithModifier( 'alt', 'F10' );
-			expect( await isInBlockToolbar() ).toBe( true );
-
-			const scrollTopAfter = await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop
-			);
-
-			expect( scrollTopBefore ).toBe( scrollTopAfter );
-		} );
-	}
-} );
diff --git a/packages/e2e-tests/specs/editor/various/nux.test.js b/packages/e2e-tests/specs/editor/various/nux.test.js
deleted file mode 100644
index 22219c925564da..00000000000000
--- a/packages/e2e-tests/specs/editor/various/nux.test.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, clickOnMoreMenuItem } from '@wordpress/e2e-test-utils';
-
-describe( 'New User Experience (NUX)', () => {
-	it( 'should show the guide to first-time users', async () => {
-		let welcomeGuideText, welcomeGuide;
-
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be on page 1 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
-
-		// Click on the 'Next' button.
-		const [ nextButton ] = await page.$x(
-			'//button[contains(text(), "Next")]'
-		);
-		await nextButton.click();
-
-		// Guide should be on page 2 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Make each block your own' );
-
-		// Click on the 'Previous' button.
-		const [ previousButton ] = await page.$x(
-			'//button[contains(text(), "Previous")]'
-		);
-		await previousButton.click();
-
-		// Guide should be on page 1 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
-
-		// Press the button for Page 2.
-		await page.click( 'button[aria-label="Page 2 of 4"]' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Make each block your own")]'
-		);
-		// This shouldn't be necessary
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 500 );
-
-		// Press the right arrow key for Page 3.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Get to know the block library")]'
-		);
-
-		// Press the right arrow key for Page 4.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Learn how to use the block editor")]'
-		);
-
-		// Click on the *visible* 'Get started' button. There are two in the DOM
-		// but only one is shown depending on viewport size.
-		let getStartedButton;
-		for ( const buttonHandle of await page.$x(
-			'//button[contains(text(), "Get started")]'
-		) ) {
-			if (
-				await page.evaluate(
-					( button ) => button.style.display !== 'none',
-					buttonHandle
-				)
-			) {
-				getStartedButton = buttonHandle;
-			}
-		}
-		await getStartedButton.click();
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-
-		// Reload the editor.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-	} );
-
-	it( 'should not show the welcome guide again if it is dismissed', async () => {
-		let welcomeGuide;
-
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be open
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-
-		// Close the guide
-		await page.click( 'button[aria-label="Close dialog"]' );
-
-		// Reload the editor.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-	} );
-
-	it( 'should focus post title field after welcome guide is dismissed and post is empty', async () => {
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be open.
-		const welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-
-		// Close the guide.
-		await page.click( 'button[aria-label="Close dialog"]' );
-
-		// Focus should be in post title field.
-		const postTitle = await page.waitForSelector(
-			'h1[aria-label="Add title"'
-		);
-		await expect( postTitle ).toHaveFocus();
-	} );
-
-	it( 'should show the welcome guide if it is manually opened', async () => {
-		let welcomeGuide;
-
-		// Create a new post as a returning user.
-		await createNewPost();
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-
-		// Manually open the guide
-		await clickOnMoreMenuItem( 'Welcome Guide' );
-
-		// Guide should be open
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/post-visibility.test.js b/packages/e2e-tests/specs/editor/various/post-visibility.test.js
deleted file mode 100644
index 44f3122c7dd95b..00000000000000
--- a/packages/e2e-tests/specs/editor/various/post-visibility.test.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	setBrowserViewport,
-	createNewPost,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Post visibility', () => {
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		it( `can be changed when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-
-			const [ confirmButton ] = await page.$x(
-				'//*[@role="dialog"]//button[text()="OK"]'
-			);
-			await confirmButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( 'private' );
-		} );
-
-		it( `can be canceled when the viewport is ${ viewport }`, async () => {
-			await setBrowserViewport( viewport );
-
-			await createNewPost();
-
-			await openDocumentSettingsSidebar();
-
-			const initialStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			await page.click( '*[aria-label^="Select visibility"]' );
-
-			const [ privateLabel ] = await page.$x(
-				'//label[text()="Private"]'
-			);
-			await privateLabel.click();
-			await page.waitForXPath(
-				'//*[text()="Would you like to privately publish this post now?"]'
-			);
-			const cancelButton = await page.waitForXPath(
-				'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-			);
-			await cancelButton.click();
-
-			const currentStatus = await page.evaluate( () => {
-				return wp.data
-					.select( 'core/editor' )
-					.getEditedPostAttribute( 'status' );
-			} );
-
-			expect( currentStatus ).toBe( initialStatus );
-		} );
-	} );
-
-	it( 'visibility remains private even if the publish date is in the future', async () => {
-		await createNewPost();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', 'Title' );
-
-		await openDocumentSettingsSidebar();
-
-		// Set a publish date for the next month.
-		await page.click( '*[aria-label^="Change date"]' );
-		await page.click( '*[aria-label="View next month"]' );
-		await (
-			await page.$x(
-				'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
-			)
-		 )[ 0 ].click();
-
-		await page.click( '*[aria-label^="Select visibility"]' );
-
-		const [ privateLabel ] = await page.$x( '//label[text()="Private"]' );
-		await privateLabel.click();
-
-		await page.waitForXPath(
-			'//*[text()="Would you like to privately publish this post now?"]'
-		);
-
-		const [ confirmButton ] = await page.$x(
-			'//*[@role="dialog"]//button[text()="OK"]'
-		);
-		await confirmButton.click();
-
-		// Enter a title for this post.
-		await page.type( '.editor-post-title__input', ' Changed' );
-
-		// Wait for the button to be clickable before attempting to click.
-		// This could cause errors when we try to click before changes are registered.
-		await page.waitForSelector(
-			'.editor-post-publish-button[aria-disabled="false"]'
-		);
-		await page.click( '.editor-post-publish-button' );
-
-		const currentStatus = await page.evaluate( () => {
-			return wp.data
-				.select( 'core/editor' )
-				.getEditedPostAttribute( 'status' );
-		} );
-
-		expect( currentStatus ).toBe( 'private' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js
deleted file mode 100644
index 59445ecbe55528..00000000000000
--- a/packages/e2e-tests/specs/editor/various/preferences.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost } from '@wordpress/e2e-test-utils';
-
-describe( 'preferences', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Returns a promise which resolves to the text content of the active
-	 * editor sidebar tab, or null if there is no active sidebar tab (closed).
-	 *
-	 * @return {Promise} Promise resolving to active tab.
-	 */
-	async function getActiveSidebarTabText() {
-		try {
-			return await page.$eval(
-				'.edit-post-sidebar__panel-tab.is-active',
-				( node ) => node.textContent
-			);
-		} catch ( error ) {
-			// page.$eval throws when it does not find the selector, which we
-			// can intentionally intercept and consider as there being no
-			// active sidebar tab (no sidebar).
-			return null;
-		}
-	}
-
-	it( 'remembers sidebar dismissal between sessions', async () => {
-		// Open by default.
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Change to "Block" tab.
-		await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' );
-		expect( await getActiveSidebarTabText() ).toBe( 'Block' );
-
-		// Regression test: Reload resets to document tab.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/6377
-		// See: https://github.com/WordPress/gutenberg/pull/8995
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Dismiss.
-		await page.click(
-			'.edit-post-sidebar__panel-tabs [aria-label="Close settings"]'
-		);
-		expect( await getActiveSidebarTabText() ).toBe( null );
-
-		// Remember after reload.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( null );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/publish-button.test.js b/packages/e2e-tests/specs/editor/various/publish-button.test.js
deleted file mode 100644
index 2db6608331cb33..00000000000000
--- a/packages/e2e-tests/specs/editor/various/publish-button.test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	arePrePublishChecksEnabled,
-	disablePrePublishChecks,
-	enablePrePublishChecks,
-	createNewPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'PostPublishButton', () => {
-	let werePrePublishChecksEnabled;
-	beforeEach( async () => {
-		await createNewPost();
-		werePrePublishChecksEnabled = await arePrePublishChecksEnabled();
-		if ( werePrePublishChecksEnabled ) {
-			await disablePrePublishChecks();
-		}
-	} );
-
-	afterEach( async () => {
-		if ( werePrePublishChecksEnabled ) {
-			await enablePrePublishChecks();
-		}
-	} );
-
-	it( 'should be disabled when post is not saveable', async () => {
-		const publishButton = await page.$(
-			'.editor-post-publish-button[aria-disabled="true"]'
-		);
-		expect( publishButton ).not.toBeNull();
-	} );
-
-	it( 'should be disabled when post is being saved', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).toBeNull();
-
-		await page.click( '.editor-post-save-draft' );
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).not.toBeNull();
-	} );
-
-	it( 'should be disabled when metabox is being saved', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).toBeNull();
-
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/edit-post' ).requestMetaBoxUpdates();
-			return true;
-		} );
-		expect(
-			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
-		).not.toBeNull();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/publish-panel.test.js b/packages/e2e-tests/specs/editor/various/publish-panel.test.js
deleted file mode 100644
index 3a6aefd8f66870..00000000000000
--- a/packages/e2e-tests/specs/editor/various/publish-panel.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	arePrePublishChecksEnabled,
-	disablePrePublishChecks,
-	enablePrePublishChecks,
-	createNewPost,
-	openPublishPanel,
-	pressKeyWithModifier,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'PostPublishPanel', () => {
-	let werePrePublishChecksEnabled;
-	beforeEach( async () => {
-		await createNewPost();
-		werePrePublishChecksEnabled = await arePrePublishChecksEnabled();
-		if ( ! werePrePublishChecksEnabled ) {
-			await enablePrePublishChecks();
-		}
-	} );
-
-	afterEach( async () => {
-		if ( ! werePrePublishChecksEnabled ) {
-			await disablePrePublishChecks();
-		}
-	} );
-
-	it( 'PrePublish: publish button should have the focus', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' );
-		await openPublishPanel();
-
-		const focusedElementClassList = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return Object.values( focusedElement.classList );
-			}
-		);
-		expect( focusedElementClassList ).toContain(
-			'editor-post-publish-button'
-		);
-	} );
-
-	it( 'PostPublish: post link should have the focus', async () => {
-		const postTitle = 'E2E Test Post';
-		await page.type( '.editor-post-title__input', postTitle );
-		await publishPost();
-
-		const focusedElementTag = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return focusedElement.tagName.toLowerCase();
-			}
-		);
-		const focusedElementText = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return focusedElement.text;
-			}
-		);
-		expect( focusedElementTag ).toBe( 'a' );
-		expect( focusedElementText ).toBe( postTitle );
-	} );
-
-	it( 'should retain focus within the panel', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' );
-		await openPublishPanel();
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
-		const focusedElementClassList = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return Object.values( focusedElement.classList );
-			}
-		);
-		expect( focusedElementClassList ).toContain(
-			'components-checkbox-control__input'
-		);
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/publishing.test.js b/packages/e2e-tests/specs/editor/various/publishing.test.js
deleted file mode 100644
index 88c0d2b993db3f..00000000000000
--- a/packages/e2e-tests/specs/editor/various/publishing.test.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	publishPost,
-	publishPostWithPrePublishChecksDisabled,
-	enablePrePublishChecks,
-	disablePrePublishChecks,
-	arePrePublishChecksEnabled,
-	setBrowserViewport,
-	openPublishPanel,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Publishing', () => {
-	describe.each( [ 'post', 'page' ] )(
-		'%s locking prevent saving',
-		( postType ) => {
-			beforeEach( async () => {
-				await createNewPost( postType );
-			} );
-
-			it( `disables the publish button when a ${ postType } is locked`, async () => {
-				await page.type(
-					'.editor-post-title__input',
-					'E2E Test Post lock check publish button'
-				);
-				await page.evaluate( () =>
-					wp.data
-						.dispatch( 'core/editor' )
-						.lockPostSaving( 'futurelock' )
-				);
-
-				await openPublishPanel();
-
-				expect(
-					await page.$(
-						'.editor-post-publish-button[aria-disabled="true"]'
-					)
-				).not.toBeNull();
-			} );
-
-			it( `disables the save shortcut when a ${ postType } is locked`, async () => {
-				await page.type(
-					'.editor-post-title__input',
-					'E2E Test Post check save shortcut'
-				);
-				await page.evaluate( () =>
-					wp.data
-						.dispatch( 'core/editor' )
-						.lockPostSaving( 'futurelock' )
-				);
-				await pressKeyWithModifier( 'primary', 'S' );
-
-				expect( await page.$( '.editor-post-saved-state' ) ).toBeNull();
-				expect(
-					await page.$( '.editor-post-save-draft' )
-				).not.toBeNull();
-			} );
-		}
-	);
-
-	describe.each( [ 'post', 'page' ] )( 'a %s', ( postType ) => {
-		let werePrePublishChecksEnabled;
-
-		beforeEach( async () => {
-			await createNewPost( postType );
-			werePrePublishChecksEnabled = await arePrePublishChecksEnabled();
-			if ( ! werePrePublishChecksEnabled ) {
-				await enablePrePublishChecks();
-			}
-		} );
-
-		afterEach( async () => {
-			if ( ! werePrePublishChecksEnabled ) {
-				await disablePrePublishChecks();
-			}
-		} );
-
-		it( `should publish the ${ postType } and close the panel once we start editing again.`, async () => {
-			await page.type( '.editor-post-title__input', 'E2E Test Post' );
-
-			await publishPost();
-
-			// The post-publishing panel is visible.
-			expect(
-				await page.$( '.editor-post-publish-panel' )
-			).not.toBeNull();
-
-			// Start editing again.
-			await page.type( '.editor-post-title__input', ' (Updated)' );
-
-			// The post-publishing panel is not visible anymore.
-			expect( await page.$( '.editor-post-publish-panel' ) ).toBeNull();
-		} );
-	} );
-
-	describe.each( [ 'post', 'page' ] )(
-		'a %s with pre-publish checks disabled',
-		( postType ) => {
-			let werePrePublishChecksEnabled;
-
-			beforeEach( async () => {
-				await createNewPost( postType );
-				werePrePublishChecksEnabled =
-					await arePrePublishChecksEnabled();
-				if ( werePrePublishChecksEnabled ) {
-					await disablePrePublishChecks();
-				}
-			} );
-
-			afterEach( async () => {
-				if ( werePrePublishChecksEnabled ) {
-					await enablePrePublishChecks();
-				}
-			} );
-
-			it( `should publish the ${ postType } without opening the post-publish sidebar.`, async () => {
-				await page.type( '.editor-post-title__input', 'E2E Test Post' );
-
-				// The "Publish" button should be shown instead of the "Publish..." toggle.
-				expect(
-					await page.$( '.editor-post-publish-panel__toggle' )
-				).toBeNull();
-				expect(
-					await page.$( '.editor-post-publish-button' )
-				).not.toBeNull();
-
-				await publishPostWithPrePublishChecksDisabled();
-
-				// The post-publishing panel should have been not shown.
-				expect(
-					await page.$( '.editor-post-publish-panel' )
-				).toBeNull();
-			} );
-		}
-	);
-
-	describe.each( [ 'post', 'page' ] )(
-		'a %s in small viewports',
-		( postType ) => {
-			let werePrePublishChecksEnabled;
-
-			beforeEach( async () => {
-				await createNewPost( postType );
-				werePrePublishChecksEnabled =
-					await arePrePublishChecksEnabled();
-				if ( werePrePublishChecksEnabled ) {
-					await disablePrePublishChecks();
-				}
-				await setBrowserViewport( 'small' );
-			} );
-
-			afterEach( async () => {
-				await setBrowserViewport( 'large' );
-				if ( werePrePublishChecksEnabled ) {
-					await enablePrePublishChecks();
-				}
-			} );
-
-			it( `should ignore the pre-publish checks and show the Publish... toggle instead of the Publish button`, async () => {
-				expect(
-					await page.$( '.editor-post-publish-panel__toggle' )
-				).not.toBeNull();
-				expect(
-					await page.$( '.editor-post-publish-button' )
-				).toBeNull();
-			} );
-		}
-	);
-} );
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
deleted file mode 100644
index 925d179bc2e1bd..00000000000000
--- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
+++ /dev/null
@@ -1,387 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickMenuItem,
-	insertBlock,
-	insertReusableBlock,
-	createNewPost,
-	clickBlockToolbarButton,
-	pressKeyWithModifier,
-	getEditedPostContent,
-	trashAllPosts,
-	visitAdminPage,
-	toggleGlobalBlockInserter,
-	openDocumentSettingsSidebar,
-	saveDraft,
-	createReusableBlock,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-const reusableBlockNameInputSelector =
-	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
-const reusableBlockInspectorNameInputSelector =
-	'.block-editor-block-inspector .components-text-control__input';
-
-const saveAll = async () => {
-	const publishButtonSelector =
-		'.editor-post-publish-button__button.has-changes-dot';
-	// Wait for the Publish button to become enabled in case the editor is autosaving ATM:.
-	const publishButton = await page.waitForSelector(
-		publishButtonSelector + '[aria-disabled="false"]'
-	);
-	await publishButton.click();
-
-	const saveButtonSelector =
-		'button.editor-entities-saved-states__save-button';
-	const saveButton = await page.waitForSelector( saveButtonSelector );
-	await saveButton.click();
-};
-
-const saveAllButDontPublish = async () => {
-	await saveAll();
-
-	// No need to publish the post.
-	const cancelPublish = await page.waitForSelector(
-		'.editor-post-publish-panel__header-cancel-button button'
-	);
-	await cancelPublish.click();
-};
-
-const clearAllBlocks = async () => {
-	// Remove all blocks from the post so that we're working with a clean slate.
-	await page.evaluate( () => {
-		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
-		const clientIds = blocks.map( ( block ) => block.clientId );
-		wp.data.dispatch( 'core/block-editor' ).removeBlocks( clientIds );
-	} );
-};
-
-describe( 'Reusable blocks', () => {
-	afterAll( async () => {
-		await trashAllPosts( 'wp_block' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created, inserted, edited and converted to a regular block.', async () => {
-		await createReusableBlock( 'Hello there!', 'Greeting block' );
-		await clearAllBlocks();
-
-		// Insert the reusable block we created above.
-		await insertReusableBlock( 'Greeting block' );
-
-		// Change the block's title.
-		await openDocumentSettingsSidebar();
-		const nameInput = await page.waitForSelector(
-			reusableBlockInspectorNameInputSelector
-		);
-		await nameInput.click();
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'Surprised greeting block' );
-
-		// Quickly focus the paragraph block.
-		await page.click(
-			'.block-editor-block-list__block[data-type="core/block"] p'
-		);
-		await page.keyboard.press( 'Escape' ); // Enter navigation mode.
-		await page.keyboard.press( 'Enter' ); // Enter edit mode.
-
-		// Change the block's content.
-		await page.keyboard.type( 'Oh! ' );
-
-		// Save the reusable block.
-		await saveAllButDontPublish();
-
-		// Check that its content is up to date.
-		const text = await page.$eval(
-			'.block-editor-block-list__block[data-type="core/block"] p',
-			( element ) => element.innerText
-		);
-		expect( text ).toMatch( 'Oh! Hello there!' );
-
-		await clearAllBlocks();
-
-		// Insert the reusable block we edited above.
-		await insertReusableBlock( 'Surprised greeting block' );
-
-		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
-
-		// Check that we have a paragraph block on the page.
-		const paragraphBlock = await page.$(
-			'.block-editor-block-list__block[data-type="core/paragraph"]'
-		);
-		expect( paragraphBlock ).not.toBeNull();
-
-		// Check that its content is up to date.
-		const paragraphContent = await page.$eval(
-			'.block-editor-block-list__block[data-type="core/paragraph"]',
-			( element ) => element.innerText
-		);
-		expect( paragraphContent ).toMatch( 'Oh! Hello there!' );
-	} );
-
-	// Check for regressions of https://github.com/WordPress/gutenberg/issues/33072.
-	it( 'can be saved when modified inside of a published post', async () => {
-		await createReusableBlock(
-			'Guten Berg!',
-			'Alternative greeting block'
-		);
-
-		// Make sure the reusable block has loaded properly before attempting to publish the post.
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-
-		await publishPost();
-
-		// Close publish panel.
-		const closePublishPanelSelector =
-			'.editor-post-publish-panel__header button[aria-label="Close panel"]';
-		await page.waitForSelector( closePublishPanelSelector );
-		await page.click( closePublishPanelSelector );
-
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await page.focus( 'p[aria-label="Paragraph block"]' );
-
-		// Change the block's content.
-		await page.keyboard.type( 'Einen ' );
-
-		// Save the reusable block and update the post.
-		await saveAll();
-
-		// Check that its content is up to date.
-		const paragraphContent = await page.$eval(
-			'p[aria-label="Paragraph block"]',
-			( element ) => element.innerText
-		);
-		expect( paragraphContent ).toMatch( 'Einen Guten Berg!' );
-	} );
-
-	it( 'can be inserted after refresh', async () => {
-		await createReusableBlock( 'Awesome Paragraph', 'Awesome block' );
-
-		// Step 2. Create new post.
-		await createNewPost();
-
-		// Step 3. Insert the block created in Step 1.
-		await insertReusableBlock( 'Awesome block' );
-
-		// Check the title.
-		await openDocumentSettingsSidebar();
-		const title = await page.$eval(
-			reusableBlockInspectorNameInputSelector,
-			( element ) => element.value
-		);
-		expect( title ).toBe( 'Awesome block' );
-	} );
-
-	it( 'can be created from multiselection and converted back to regular blocks', async () => {
-		await createNewPost();
-
-		// Insert a Two paragraphs block.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Hello there!' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second paragraph' );
-
-		// Select all the blocks.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-
-		// Convert block to a reusable block.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create Reusable block' );
-
-		// Set title.
-		const nameInput = await page.waitForSelector(
-			reusableBlockNameInputSelector
-		);
-		await nameInput.click();
-		await page.keyboard.type( 'Multi-selection reusable block' );
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for creation to finish.
-		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
-		);
-
-		await clearAllBlocks();
-
-		// Insert the reusable block we edited above.
-		await insertReusableBlock( 'Multi-selection reusable block' );
-
-		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
-
-		// Check that we have two paragraph blocks on the page.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'will not break the editor if empty', async () => {
-		await createReusableBlock(
-			'Awesome Paragraph',
-			'Random reusable block'
-		);
-		await clearAllBlocks();
-		await insertReusableBlock( 'Random reusable block' );
-
-		await visitAdminPage( 'edit.php', [ 'post_type=wp_block' ] );
-
-		const [ editButton ] = await page.$x(
-			`//a[contains(@aria-label, 'Random reusable block')]`
-		);
-		await editButton.click();
-
-		await page.waitForNavigation();
-
-		// Click the block to give it focus.
-		const blockSelector = 'p[data-title="Paragraph"]';
-		await page.waitForSelector( blockSelector );
-		await page.click( blockSelector );
-
-		// Delete the block, leaving the reusable block empty.
-		await clickBlockToolbarButton( 'Options' );
-		const deleteButton = await page.waitForXPath(
-			'//button/span[text()="Remove Paragraph"]'
-		);
-		deleteButton.click();
-
-		// Wait for the Update button to become enabled.
-		const publishButtonSelector = '.editor-post-publish-button__button';
-		await page.waitForSelector(
-			publishButtonSelector + '[aria-disabled="false"]'
-		);
-
-		// Save the reusable block.
-		await page.click( publishButtonSelector );
-		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block updated."]'
-		);
-
-		await createNewPost();
-
-		await toggleGlobalBlockInserter();
-
-		expect( console ).not.toHaveErrored();
-	} );
-
-	it( 'Should show a proper message when the reusable block is missing', async () => {
-		// Insert a non-existant reusable block.
-		await page.evaluate( () => {
-			const { createBlock } = window.wp.blocks;
-			const { dispatch } = window.wp.data;
-			dispatch( 'core/block-editor' ).resetBlocks( [
-				createBlock( 'core/block', { ref: 123456 } ),
-			] );
-		} );
-
-		await page.waitForXPath(
-			'//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]'
-		);
-
-		// This happens when the 404 is returned.
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'should be able to insert a reusable block twice', async () => {
-		await createReusableBlock(
-			'Awesome Paragraph',
-			'Duplicated reusable block'
-		);
-		await clearAllBlocks();
-		await insertReusableBlock( 'Duplicated reusable block' );
-		await insertReusableBlock( 'Duplicated reusable block' );
-		await saveDraft();
-		await page.reload();
-
-		// Wait for the paragraph to be loaded.
-		await page.waitForSelector(
-			'.block-editor-block-list__block[data-type="core/paragraph"]'
-		);
-		// The first click selects the reusable block wrapper.
-		// The second click selects the actual paragraph block.
-		await page.click( '.wp-block-block' );
-		await page.focus(
-			'.block-editor-block-list__block[data-type="core/paragraph"]'
-		);
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.press( 'End' );
-		await page.keyboard.type( ' modified' );
-
-		// Wait for async mode to dispatch the update.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 1000 );
-
-		// Check that the content of the second reusable block has been updated.
-		const reusableBlocks = await page.$$( '.wp-block-block' );
-		await Promise.all(
-			reusableBlocks.map( async ( paragraph ) => {
-				const content = await paragraph.$eval(
-					'p',
-					( element ) => element.textContent
-				);
-				expect( content ).toEqual( 'Awesome Paragraph modified' );
-			} )
-		);
-	} );
-
-	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
-	it( 'allows conversion back to blocks when the reusable block has unsaved edits', async () => {
-		await createReusableBlock( '1', 'Edited block' );
-
-		// Make an edit to the reusable block and assert that there's only a
-		// paragraph in a reusable block.
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await page.click( 'p[aria-label="Paragraph block"]' );
-		await page.keyboard.type( '2' );
-		const selector =
-			'//div[@aria-label="Block: Reusable block"]//p[@aria-label="Paragraph block"][.="12"]';
-		const reusableBlockWithParagraph = await page.$x( selector );
-		expect( reusableBlockWithParagraph ).toBeTruthy();
-
-		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Reusable block' );
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
-		await page.waitForXPath( selector, {
-			hidden: true,
-		} );
-
-		// Check that there's only a paragraph.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/27243.
-	it( 'should allow a block with styles to be converted to a reusable block', async () => {
-		// Insert a quote and reload the page.
-		insertBlock( 'Quote' );
-		await saveDraft();
-		await page.reload();
-
-		// The quote block should have a visible preview in the sidebar for this test to be valid.
-		const quoteBlock = await page.waitForSelector(
-			'.block-editor-block-list__block[aria-label="Block: Quote"]'
-		);
-		// Select the quote block.
-		await quoteBlock.focus();
-		await openDocumentSettingsSidebar();
-		await page.waitForXPath(
-			'//*[@role="region"][@aria-label="Editor settings"]//button[.="Styles"]'
-		);
-
-		// Convert to reusable.
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create Reusable block' );
-		const nameInput = await page.waitForSelector(
-			reusableBlockNameInputSelector
-		);
-		await nameInput.click();
-		await page.keyboard.type( 'Block with styles' );
-		await page.keyboard.press( 'Enter' );
-		const reusableBlock = await page.waitForSelector(
-			'.block-editor-block-list__block[aria-label="Block: Reusable block"]'
-		);
-		expect( reusableBlock ).toBeTruthy();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js
deleted file mode 100644
index f4d8e0d391721a..00000000000000
--- a/packages/e2e-tests/specs/editor/various/rich-text.test.js
+++ /dev/null
@@ -1,550 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	getEditedPostContent,
-	insertBlock,
-	clickBlockAppender,
-	pressKeyWithModifier,
-	showBlockToolbar,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'RichText', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should handle change in tag name gracefully', async () => {
-		// Regression test: The heading block changes the tag name of its
-		// RichText element. Historically this has been prone to breakage,
-		// because the Editable component prevents rerenders, so React cannot
-		// update the element by itself.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/3091
-		await insertBlock( 'Heading' );
-		await page.waitForSelector( '[aria-label="Change heading level"]' );
-		await page.click( '[aria-label="Change heading level"]' );
-		await page.click( '[aria-label="Heading 3"]' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should apply formatting with primary shortcut', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'b' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should apply formatting when selection is collapsed', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Some ' );
-		// All following characters should now be bold.
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( 'bold' );
-		// All following characters should no longer be bold.
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '.' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should apply multiple formats when selection is collapsed', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await pressKeyWithModifier( 'primary', 'i' );
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'i' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '.' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not highlight more than one format', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( ' 2' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'b' );
-
-		const count = await page.evaluate(
-			() =>
-				document.querySelectorAll( '*[data-rich-text-format-boundary]' )
-					.length
-		);
-
-		expect( count ).toBe( 1 );
-	} );
-
-	it( 'should return focus when pressing formatting button', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Some ' );
-		await showBlockToolbar();
-		await page.click( '[aria-label="Bold"]' );
-		await page.keyboard.type( 'bold' );
-		await showBlockToolbar();
-		await page.click( '[aria-label="Bold"]' );
-		await page.keyboard.type( '.' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should transform backtick to code', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'A `backtick`' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should undo backtick transform with backspace', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '`a`' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect "`a`" to be restored.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not undo backtick transform with backspace after typing', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '`a`' );
-		await page.keyboard.type( 'b' );
-		await page.keyboard.press( 'Backspace' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect "a" to be deleted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not undo backtick transform with backspace after selection change', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '`a`' );
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		// Move inside format boundary.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Expect "a" to be deleted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not format text after code backtick', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'A `backtick` and more.' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should transform when typing backtick over selection', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'A selection test.' );
-		await page.keyboard.press( 'Home' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowRight' );
-		await page.keyboard.type( '`' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Should undo the transform.
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should only mutate text data on input', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '3' );
-
-		await page.evaluate( () => {
-			let called;
-			const { body } = document;
-			const config = {
-				attributes: true,
-				childList: true,
-				characterData: true,
-				subtree: true,
-			};
-
-			const mutationObserver = new MutationObserver( ( records ) => {
-				if ( called || records.length > 1 ) {
-					throw new Error( 'Typing should only mutate once.' );
-				}
-
-				records.forEach( ( record ) => {
-					if ( record.type !== 'characterData' ) {
-						throw new Error(
-							`Typing mutated more than character data: ${ record.type }`
-						);
-					}
-				} );
-
-				called = true;
-			} );
-
-			mutationObserver.observe( body, config );
-
-			window.unsubscribes = [ () => mutationObserver.disconnect() ];
-
-			document.addEventListener(
-				'selectionchange',
-				() => {
-					function throwMultipleSelectionChange() {
-						throw new Error(
-							'Typing should only emit one selection change event.'
-						);
-					}
-
-					document.addEventListener(
-						'selectionchange',
-						throwMultipleSelectionChange,
-						{
-							once: true,
-						}
-					);
-
-					window.unsubscribes.push( () => {
-						document.removeEventListener(
-							'selectionchange',
-							throwMultipleSelectionChange
-						);
-					} );
-				},
-				{ once: true }
-			);
-		} );
-
-		await page.keyboard.type( '4' );
-
-		await page.evaluate( () => {
-			// The selection change event should be called once. If there's only
-			// one item in `window.unsubscribes`, it means that only one
-			// function is present to disconnect the `mutationObserver`.
-			if ( window.unsubscribes.length === 1 ) {
-				throw new Error(
-					'The selection change event listener was never called.'
-				);
-			}
-
-			window.unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
-		} );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not lose selection direction', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '23' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.up( 'Shift' );
-
-		// There should be no selection. The following should insert "-" without
-		// deleting the numbers.
-		await page.keyboard.type( '-' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should handle Home and End keys', async () => {
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for rich text editor to load.
-		await page.waitForSelector( '.block-editor-rich-text__editable' );
-
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '12' );
-		await pressKeyWithModifier( 'primary', 'b' );
-
-		await page.keyboard.press( 'Home' );
-		await page.keyboard.type( '-' );
-		await page.keyboard.press( 'End' );
-		await page.keyboard.type( '+' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should update internal selection after fresh focus', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyWithModifier( 'shift', 'Tab' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'b' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should keep internal selection after blur', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '1' );
-		// Simulate moving focus to a different app, then moving focus back,
-		// without selection being changed.
-		await page.evaluate( () => {
-			const activeElement = document.activeElement;
-			activeElement.blur();
-			activeElement.focus();
-		} );
-		// Wait for the next animation frame, see the focus event listener in
-		// RichText.
-		await page.evaluate(
-			() => new Promise( window.requestAnimationFrame )
-		);
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'b' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should split rich text on paste', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'x' );
-		await page.keyboard.type( 'ab' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not split rich text on inline paste', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'x' );
-		await page.keyboard.type( '13' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not split rich text on inline paste with formatting', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '3' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'x' );
-		await page.keyboard.type( 'ab' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should make bold after split and merge', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Backspace' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '2' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should apply active formatting for inline paste', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '3' );
-		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'c' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should preserve internal formatting', async () => {
-		await clickBlockAppender();
-
-		// Add text and select to color.
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await clickBlockToolbarButton( 'More' );
-
-		const button = await page.waitForXPath(
-			`//button[text()='Highlight']`
-		);
-		// Clicks may fail if the button is out of view. Assure it is before click.
-		await button.evaluate( ( element ) => element.scrollIntoView() );
-		await button.click();
-
-		// Tab to the "Text" tab.
-		await page.keyboard.press( 'Tab' );
-		// Tab to black.
-		await page.keyboard.press( 'Tab' );
-		// Select color other than black.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Dismiss color picker popover.
-		await page.keyboard.press( 'Escape' );
-
-		// Navigate to the block.
-		await page.keyboard.press( 'Tab' );
-
-		// Copy the colored text.
-		await pressKeyWithModifier( 'primary', 'c' );
-
-		// Collapse the selection to the end.
-		await page.keyboard.press( 'ArrowRight' );
-
-		// Create a new paragraph.
-		await page.keyboard.press( 'Enter' );
-
-		// Paste the colored text.
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should paste paragraph contents into list', async () => {
-		await clickBlockAppender();
-
-		// Create two lines of text in a paragraph.
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.type( '2' );
-
-		// Select all and copy.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-
-		// Collapse the selection to the end.
-		await page.keyboard.press( 'ArrowRight' );
-
-		// Create a list.
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '* ' );
-
-		// Paste paragraph contents.
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should paste list contents into paragraph', async () => {
-		await clickBlockAppender();
-
-		// Create an indented list of two lines.
-		await page.keyboard.type( '* 1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ' 2' );
-
-		// Select all text.
-		await pressKeyWithModifier( 'primary', 'a' );
-		// Select the nested list.
-		await pressKeyWithModifier( 'primary', 'a' );
-		// Select the parent list item.
-		await pressKeyWithModifier( 'primary', 'a' );
-		// Select all the parent list item text.
-		await pressKeyWithModifier( 'primary', 'a' );
-		// Select the entire list.
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'c' );
-
-		await page.keyboard.press( 'Enter' );
-
-		// Paste paragraph contents.
-		await pressKeyWithModifier( 'primary', 'v' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should navigate arround emoji', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '🍓' );
-		// Only one press on arrow left should be required to move in front of
-		// the emoji.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.type( '1' );
-
-		// Expect '1🍓'.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should run input rules after composition end', async () => {
-		await clickBlockAppender();
-		// Puppeteer doesn't support composition, so emulate it by inserting
-		// text in the DOM directly, setting selection in the right place, and
-		// firing `compositionend`.
-		// See https://github.com/puppeteer/puppeteer/issues/4981.
-		await page.evaluate( () => {
-			document.activeElement.textContent = '`a`';
-			const selection = window.getSelection();
-			selection.selectAllChildren( document.activeElement );
-			selection.collapseToEnd();
-			document.activeElement.dispatchEvent(
-				new CompositionEvent( 'compositionend' )
-			);
-		} );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should navigate consecutive format boundaries', async () => {
-		await clickBlockAppender();
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await pressKeyWithModifier( 'primary', 'i' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'primary', 'i' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Should move into the second format.
-		await page.keyboard.press( 'ArrowLeft' );
-		// Should move to the start of the second format.
-		await page.keyboard.press( 'ArrowLeft' );
-		// Should move between the first and second format.
-		await page.keyboard.press( 'ArrowLeft' );
-
-		await page.keyboard.type( '-' );
-
-		// Expect: <strong>1</strong>-<em>2</em>
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/scheduling.test.js b/packages/e2e-tests/specs/editor/various/scheduling.test.js
deleted file mode 100644
index 61c3541c1f47e5..00000000000000
--- a/packages/e2e-tests/specs/editor/various/scheduling.test.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, changeSiteTimezone } from '@wordpress/e2e-test-utils';
-
-async function getPublishButtonText() {
-	return page.$eval(
-		'.editor-post-publish-button__button',
-		( element ) => element.textContent
-	);
-}
-
-describe( 'Scheduling', () => {
-	const isDateTimeComponentFocused = () => {
-		return page.evaluate( () => {
-			const dateTimeElement = document.querySelector(
-				'.components-datetime__date'
-			);
-			if ( ! dateTimeElement || ! document.activeElement ) {
-				return false;
-			}
-			return dateTimeElement.contains( document.activeElement );
-		} );
-	};
-
-	describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
-		`Timezone %s`,
-		( timezone ) => {
-			let oldTimezone;
-			beforeEach( async () => {
-				oldTimezone = await changeSiteTimezone( timezone );
-				await createNewPost();
-			} );
-			afterEach( async () => {
-				await changeSiteTimezone( oldTimezone );
-			} );
-
-			it( `should change publishing button text from "Publish" to "Schedule"`, async () => {
-				expect( await getPublishButtonText() ).toBe( 'Publish' );
-
-				// Open the datepicker.
-				await page.click( '*[aria-label^="Change date"]' );
-
-				// Change the publishing date to a year in the future.
-				await page.click( '.components-datetime__time-field-year' );
-				await page.keyboard.press( 'ArrowUp' );
-
-				// Close the datepicker.
-				await page.click( '.edit-post-post-schedule__toggle' );
-
-				expect( await getPublishButtonText() ).toBe( 'Schedule…' );
-			} );
-		}
-	);
-
-	it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => {
-		await createNewPost();
-
-		await page.click( '*[aria-label^="Change date"]' );
-		await page.click( '*[aria-label="View previous month"]' );
-		expect( await isDateTimeComponentFocused() ).toBe( true );
-		await page.click( '*[aria-label="View next month"]' );
-		expect( await isDateTimeComponentFocused() ).toBe( true );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/shortcut-help.test.js b/packages/e2e-tests/specs/editor/various/shortcut-help.test.js
deleted file mode 100644
index 838a3edac2a2a4..00000000000000
--- a/packages/e2e-tests/specs/editor/various/shortcut-help.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	clickOnCloseModalButton,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'keyboard shortcut help modal', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'displays the shortcut help modal when opened using the menu item in the more menu', async () => {
-		await clickOnMoreMenuItem( 'Keyboard shortcuts' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the close icon is clicked', async () => {
-		await clickOnCloseModalButton();
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-
-	it( 'displays the shortcut help modal when opened using the shortcut key (access+h)', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the shortcut key (access+h) is pressed again', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js
deleted file mode 100644
index a89ac0469f27ae..00000000000000
--- a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-const urlButtonSelector = '*[aria-label^="Change URL"]';
-
-// This tests are not together with the remaining sidebar tests,
-// because we need to publish/save a post, to correctly test the permalink row.
-// The sidebar test suit enforces that focus is never lost, but during save operations
-// the focus is lost and a new element is focused once the save is completed.
-describe( 'Sidebar Permalink', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-custom-post-types' );
-	} );
-
-	it( 'should not render URL when post is publicly queryable but not public', async () => {
-		await createNewPost( { postType: 'public_q_not_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).toBeNull();
-	} );
-
-	it( 'should not render URL when post is public but not publicly queryable', async () => {
-		await createNewPost( { postType: 'not_public_q_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).toBeNull();
-	} );
-
-	it( 'should render URL when post is public and publicly queryable', async () => {
-		await createNewPost( { postType: 'public_q_public' } );
-		await page.keyboard.type( 'aaaaa' );
-		await publishPost();
-		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
-		expect( await page.$( urlButtonSelector ) ).not.toBeNull();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js
deleted file mode 100644
index 39409b0fbeb7bc..00000000000000
--- a/packages/e2e-tests/specs/editor/various/sidebar.test.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clearLocalStorage,
-	createNewPost,
-	findSidebarPanelWithTitle,
-	enableFocusLossObservation,
-	disableFocusLossObservation,
-	openDocumentSettingsSidebar,
-	pressKeyWithModifier,
-	setBrowserViewport,
-} from '@wordpress/e2e-test-utils';
-
-const SIDEBAR_SELECTOR = '.edit-post-sidebar';
-const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active';
-const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post';
-
-describe( 'Sidebar', () => {
-	afterEach( () => {
-		disableFocusLossObservation();
-	} );
-
-	it( 'should have sidebar visible at the start with document sidebar active on desktop', async () => {
-		await setBrowserViewport( 'large' );
-		await clearLocalStorage();
-		await createNewPost();
-		await enableFocusLossObservation();
-		const { nodesCount, content, height, width } = await page.$$eval(
-			ACTIVE_SIDEBAR_TAB_SELECTOR,
-			( nodes ) => {
-				const firstNode = nodes[ 0 ];
-				return {
-					nodesCount: nodes.length,
-					content: firstNode.innerText,
-					height: firstNode.offsetHeight,
-					width: firstNode.offsetWidth,
-				};
-			}
-		);
-
-		// should have only one active sidebar tab.
-		expect( nodesCount ).toBe( 1 );
-
-		// the active sidebar tab should be document.
-		expect( content ).toBe( ACTIVE_SIDEBAR_BUTTON_TEXT );
-
-		// the active sidebar tab should be visible
-		expect( width ).toBeGreaterThan( 10 );
-		expect( height ).toBeGreaterThan( 10 );
-	} );
-
-	it( 'should have the sidebar closed by default on mobile', async () => {
-		await setBrowserViewport( 'small' );
-		await clearLocalStorage();
-		await createNewPost();
-		await enableFocusLossObservation();
-		const sidebar = await page.$( SIDEBAR_SELECTOR );
-		expect( sidebar ).toBeNull();
-	} );
-
-	it( 'should close the sidebar when resizing from desktop to mobile', async () => {
-		await setBrowserViewport( 'large' );
-		await clearLocalStorage();
-		await createNewPost();
-		await enableFocusLossObservation();
-
-		const sidebars = await page.$$( SIDEBAR_SELECTOR );
-		expect( sidebars ).toHaveLength( 1 );
-
-		await setBrowserViewport( 'small' );
-
-		const sidebarsMobile = await page.$$( SIDEBAR_SELECTOR );
-		// sidebar should be closed when resizing to mobile.
-		expect( sidebarsMobile ).toHaveLength( 0 );
-	} );
-
-	it( 'should reopen sidebar the sidebar when resizing from mobile to desktop if the sidebar was closed automatically', async () => {
-		await setBrowserViewport( 'large' );
-		await clearLocalStorage();
-		await createNewPost();
-		await enableFocusLossObservation();
-		await setBrowserViewport( 'small' );
-
-		const sidebarsMobile = await page.$$( SIDEBAR_SELECTOR );
-		expect( sidebarsMobile ).toHaveLength( 0 );
-
-		await setBrowserViewport( 'large' );
-
-		await page.waitForSelector( SIDEBAR_SELECTOR );
-	} );
-
-	it( 'should preserve tab order while changing active tab', async () => {
-		await createNewPost();
-		await enableFocusLossObservation();
-
-		// Region navigate to Sidebar.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-
-		// Tab lands at first (presumed selected) option "Post".
-		await page.keyboard.press( 'Tab' );
-		const isActiveDocumentTab = await page.evaluate(
-			() =>
-				document.activeElement.textContent === 'Post' &&
-				document.activeElement.classList.contains( 'is-active' )
-		);
-		expect( isActiveDocumentTab ).toBe( true );
-
-		// Tab into and activate "Block".
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-		const isActiveBlockTab = await page.evaluate(
-			() =>
-				document.activeElement.textContent === 'Block' &&
-				document.activeElement.classList.contains( 'is-active' )
-		);
-		expect( isActiveBlockTab ).toBe( true );
-	} );
-
-	it( 'should be possible to programmatically remove Document Settings panels', async () => {
-		await createNewPost();
-		await enableFocusLossObservation();
-		await openDocumentSettingsSidebar();
-
-		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Featured image' )
-		).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined();
-
-		await page.evaluate( () => {
-			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
-
-			removeEditorPanel( 'taxonomy-panel-category' );
-			removeEditorPanel( 'taxonomy-panel-post_tag' );
-			removeEditorPanel( 'featured-image' );
-			removeEditorPanel( 'post-excerpt' );
-			removeEditorPanel( 'discussion-panel' );
-			removeEditorPanel( 'post-status' );
-		} );
-
-		const getPanelToggleSelector = ( panelTitle ) => {
-			return `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
-		};
-
-		expect(
-			await page.$x( getPanelToggleSelector( 'Categories' ) )
-		).toEqual( [] );
-		expect( await page.$x( getPanelToggleSelector( 'Tags' ) ) ).toEqual(
-			[]
-		);
-		expect(
-			await page.$x( getPanelToggleSelector( 'Featured image' ) )
-		).toEqual( [] );
-		expect( await page.$x( getPanelToggleSelector( 'Excerpt' ) ) ).toEqual(
-			[]
-		);
-		expect(
-			await page.$x( getPanelToggleSelector( 'Discussion' ) )
-		).toEqual( [] );
-		expect( await page.$x( getPanelToggleSelector( 'Summary' ) ) ).toEqual(
-			[]
-		);
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/switch-to-draft.test.js b/packages/e2e-tests/specs/editor/various/switch-to-draft.test.js
deleted file mode 100644
index 4f536d204976de..00000000000000
--- a/packages/e2e-tests/specs/editor/various/switch-to-draft.test.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	openDocumentSettingsSidebar,
-	publishPost,
-	setBrowserViewport,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-async function prepTestPost( postType, viewport ) {
-	// Create a post
-	await createNewPost( { postType } );
-
-	await page.type(
-		'.editor-post-title__input',
-		`Switch scheduled ${ postType } to draft`
-	);
-	await page.keyboard.press( 'Enter' );
-	await page.keyboard.type(
-		`This will be a scheduled ${ postType } edited in a ${ viewport } viewport`
-	);
-
-	// Unselect the blocks.
-	await page.evaluate( () => {
-		wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-	} );
-}
-
-async function publishTestPost( postType, viewport ) {
-	// Create a post
-	await prepTestPost( postType, viewport );
-
-	// Publish the post
-	await publishPost();
-
-	const publishedSnackBar = await page.waitForXPath(
-		`//*[@aria-label="Dismiss this notice"][@role="button"]/div[contains(text(),"published")]`
-	);
-
-	const snackBarText = await (
-		await publishedSnackBar.getProperty( 'textContent' )
-	 ).jsonValue();
-
-	expect( snackBarText.toLowerCase() ).toBe(
-		`${ postType } published.view ${ postType }`
-	);
-
-	const closePublishingPanel = await page.waitForXPath(
-		'//button[@aria-label="Close panel"]'
-	);
-	await closePublishingPanel.click();
-}
-
-async function scheduleTestPost( postType, viewport ) {
-	// Create a post
-	await prepTestPost( postType, viewport );
-
-	if ( viewport === 'small' ) {
-		await openDocumentSettingsSidebar();
-	}
-	// Set a publish date for the next month.
-	await page.click( '.edit-post-post-schedule__toggle' );
-	await page.click( '*[aria-label="View next month"]' );
-
-	await (
-		await page.$x(
-			'//*[@role="application"][@aria-label="Calendar"]//button[text()="15"]'
-		)
-	 )[ 0 ].click();
-
-	await page.click( '.edit-post-post-schedule__toggle' );
-
-	if ( viewport === 'small' ) {
-		const closeDocumentSettingsButton = await page.waitForXPath(
-			'//div[@aria-label="Editor settings"]//button[@aria-label="Close settings"]'
-		);
-		await closeDocumentSettingsButton.click();
-	}
-
-	// Important: target an ellipsis (…) and not three dots (...)
-	const scheduleButton = await page.waitForXPath(
-		'//button[text()="Schedule…"]'
-	);
-	await scheduleButton.click();
-	const secondScheduleButton = await page.waitForXPath(
-		'//button[text()="Schedule"]'
-	);
-	await secondScheduleButton.click();
-
-	const closePublishingPanel = await page.waitForXPath(
-		'//button[@aria-label="Close panel"]'
-	);
-	await closePublishingPanel.click();
-}
-
-async function verifyRevertToDraft( postType ) {
-	const revertedSnackBar = await page.waitForXPath(
-		`//*[@aria-label="Dismiss this notice"][@role="button"]/div[contains(text(),"reverted")]`
-	);
-
-	const revertedSnackBarText = await (
-		await revertedSnackBar.getProperty( 'textContent' )
-	 ).jsonValue();
-
-	expect( revertedSnackBarText.toLowerCase() ).toBe(
-		`${ postType } reverted to draft.`
-	);
-}
-
-describe( 'Clicking "Switch to draft" on a published post/page', () => {
-	beforeAll( async () => {
-		await trashAllPosts( 'post' );
-		await trashAllPosts( 'page' );
-	} );
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		describe( `in a ${ viewport } viewport`, () => {
-			[ 'post', 'page' ].forEach( ( postType ) => {
-				const buttonText =
-					viewport === 'large' ? 'Switch to draft' : 'Draft';
-				beforeEach( async () => {
-					await setBrowserViewport( viewport );
-				} );
-
-				it( `should leave a published ${ postType } published if canceled`, async () => {
-					publishTestPost( postType, viewport );
-
-					const switchToDraftButton = await page.waitForXPath(
-						`//button[contains(text(), "${ buttonText }")]`
-					);
-					await switchToDraftButton.click();
-
-					// Process the ConfirmDialog
-					await page.waitForXPath(
-						'//*[text()="Are you sure you want to unpublish this post?"]'
-					);
-					const [ cancelButton ] = await page.$x(
-						'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-					);
-					await cancelButton.click();
-
-					const postStatus = await page.evaluate( () => {
-						return wp.data
-							.select( 'core/editor' )
-							.getEditedPostAttribute( 'status' );
-					} );
-					expect( postStatus ).toBe( 'publish' );
-				} );
-				it( `should revert a published ${ postType } to a draft if confirmed`, async () => {
-					// Switch to draft
-					const switchToDraftButton = await page.waitForXPath(
-						`//button[contains(text(), "${ buttonText }")]`
-					);
-					await switchToDraftButton.click();
-
-					// Process the ConfirmDialog
-					await page.waitForXPath(
-						'//*[text()="Are you sure you want to unpublish this post?"]'
-					);
-					const [ confirmButton ] = await page.$x(
-						'//*[@role="dialog"]//button[text()="OK"]'
-					);
-					await confirmButton.click();
-
-					await verifyRevertToDraft( postType );
-
-					const postStatus = await page.evaluate( () => {
-						return wp.data
-							.select( 'core/editor' )
-							.getEditedPostAttribute( 'status' );
-					} );
-					expect( postStatus ).toBe( 'draft' );
-				} );
-			} );
-		} );
-	} );
-} );
-describe( 'Clicking "Switch to draft" on a scheduled post/page', () => {
-	beforeAll( async () => {
-		await trashAllPosts( 'post' );
-		await trashAllPosts( 'page' );
-	} );
-	afterEach( async () => {
-		await setBrowserViewport( 'large' );
-	} );
-
-	[ 'large', 'small' ].forEach( ( viewport ) => {
-		describe( `in a ${ viewport } viewport`, () => {
-			[ 'post', 'page' ].forEach( ( postType ) => {
-				const buttonText =
-					viewport === 'large' ? 'Switch to draft' : 'Draft';
-				beforeEach( async () => {
-					await setBrowserViewport( viewport );
-				} );
-
-				it( `should leave a scheduled ${ postType } scheduled if canceled`, async () => {
-					scheduleTestPost( postType, viewport );
-
-					const switchToDraftButton = await page.waitForXPath(
-						`//button[contains(text(), "${ buttonText }")]`
-					);
-					await switchToDraftButton.click();
-
-					// Process the ConfirmDialog
-					await page.waitForXPath(
-						'//*[text()="Are you sure you want to unschedule this post?"]'
-					);
-					const [ cancelButton ] = await page.$x(
-						'//*[@role="dialog"][not(@id="wp-link-wrap")]//button[text()="Cancel"]'
-					);
-					await cancelButton.click();
-
-					// Confirm post is still scheduled
-					const postStatus = await page.evaluate( () => {
-						return wp.data
-							.select( 'core/editor' )
-							.getEditedPostAttribute( 'status' );
-					} );
-					expect( postStatus ).toBe( 'future' );
-				} );
-				it( `should revert a scheduled ${ postType } to a draft if confirmed`, async () => {
-					// Switch to draft
-					const switchToDraftButton = await page.waitForXPath(
-						`//button[contains(text(), "${ buttonText }")]`
-					);
-					await switchToDraftButton.click();
-
-					// Process the ConfirmDialog
-					await page.waitForXPath(
-						'//*[text()="Are you sure you want to unschedule this post?"]'
-					);
-					const [ confirmButton ] = await page.$x(
-						'//*[@role="dialog"]//button[text()="OK"]'
-					);
-					await confirmButton.click();
-
-					await verifyRevertToDraft( postType );
-
-					const postStatus = await page.evaluate( () => {
-						return wp.data
-							.select( 'core/editor' )
-							.getEditedPostAttribute( 'status' );
-					} );
-					expect( postStatus ).toBe( 'draft' );
-				} );
-			} );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/taxonomies.test.js b/packages/e2e-tests/specs/editor/various/taxonomies.test.js
deleted file mode 100644
index 551187d654dd93..00000000000000
--- a/packages/e2e-tests/specs/editor/various/taxonomies.test.js
+++ /dev/null
@@ -1,250 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	findSidebarPanelWithTitle,
-	openDocumentSettingsSidebar,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Module constants
- */
-const TAG_TOKEN_SELECTOR =
-	'.components-form-token-field__token-text span:not(.components-visually-hidden)';
-
-function generateRandomNumber() {
-	// Using `Math.random()` directly is fine in this testing context.
-	// eslint-disable-next-line no-restricted-syntax
-	return Math.round( 1 + Math.random() * ( Number.MAX_SAFE_INTEGER - 1 ) );
-}
-
-describe( 'Taxonomies', () => {
-	const canCreatTermInTaxonomy = ( taxonomy ) => {
-		return page.evaluate( ( _taxonomy ) => {
-			const post = wp.data.select( 'core/editor' ).getCurrentPost();
-			if ( ! post._links ) {
-				return false;
-			}
-			return !! post._links[ `wp:action-create-${ _taxonomy }` ];
-		}, taxonomy );
-	};
-
-	const getSelectCategories = () => {
-		return page.evaluate( () => {
-			return Array.from(
-				document.querySelectorAll(
-					'.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked'
-				)
-			).map( ( node ) => {
-				return node.parentElement.nextSibling.innerText;
-			} );
-		} );
-	};
-
-	const getCurrentTags = async () => {
-		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
-		return page.evaluate(
-			( node, selector ) => {
-				return Array.from( node.querySelectorAll( selector ) ).map(
-					( field ) => {
-						return field.innerText;
-					}
-				);
-			},
-			tagsPanel,
-			TAG_TOKEN_SELECTOR
-		);
-	};
-
-	const openSidebarPanelWithTitle = async ( title ) => {
-		const panel = await page.waitForXPath(
-			`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]`
-		);
-		await panel.click();
-	};
-
-	it( 'should be able to open the categories panel and create a new main category if the user has the right capabilities', async () => {
-		await createNewPost();
-
-		await openDocumentSettingsSidebar();
-
-		await openSidebarPanelWithTitle( 'Categories' );
-
-		await page.waitForSelector(
-			'.editor-post-taxonomies__hierarchical-terms-list'
-		);
-
-		// If the user has no permission to add a new category finish the test.
-		if ( ! ( await canCreatTermInTaxonomy( 'categories' ) ) ) {
-			return;
-		}
-
-		await page.waitForSelector(
-			'button.editor-post-taxonomies__hierarchical-terms-add'
-		);
-
-		// Click add new category button.
-		await page.click(
-			'button.editor-post-taxonomies__hierarchical-terms-add'
-		);
-
-		// Type the category name in the field.
-		await page.type(
-			'.editor-post-taxonomies__hierarchical-terms-input input[type=text]',
-			'z rand category 1'
-		);
-
-		// Click the submit button.
-		await page.click(
-			'.editor-post-taxonomies__hierarchical-terms-submit'
-		);
-
-		// Wait for the categories to load.
-		await page.waitForSelector(
-			'.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked'
-		);
-
-		let selectedCategories = await getSelectCategories();
-
-		// The new category is selected.
-		expect( selectedCategories ).toHaveLength( 1 );
-		expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' );
-
-		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Publish the post.
-		await publishPost();
-
-		// Reload the editor.
-		await page.reload();
-
-		// Wait for the categories to load.
-		await page.waitForSelector(
-			'.editor-post-taxonomies__hierarchical-terms-choice .components-checkbox-control__input:checked'
-		);
-
-		selectedCategories = await getSelectCategories();
-
-		// The category selection was persisted after the publish process.
-		expect( selectedCategories ).toHaveLength( 1 );
-		expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' );
-	} );
-
-	it( "should be able to create a new tag with ' on the name", async () => {
-		await createNewPost();
-
-		await openDocumentSettingsSidebar();
-
-		await openSidebarPanelWithTitle( 'Tags' );
-
-		// If the user has no permission to add a new tag finish the test.
-		if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) {
-			return;
-		}
-
-		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
-		const tagInput = await tagsPanel.$(
-			'.components-form-token-field__input'
-		);
-
-		// Click the tag input field.
-		await tagInput.click();
-
-		const tagName = "tag'-" + generateRandomNumber();
-
-		// Type the category name in the field.
-		await tagInput.type( tagName );
-
-		// Press enter to create a new tag.
-		await tagInput.press( 'Enter' );
-
-		await page.waitForSelector( TAG_TOKEN_SELECTOR );
-
-		// Get an array with the tags of the post.
-		let tags = await getCurrentTags();
-
-		// The post should only contain the tag we added.
-		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( tagName );
-
-		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Publish the post.
-		await publishPost();
-
-		// Reload the editor.
-		await page.reload();
-
-		// Wait for the tags to load.
-		await page.waitForSelector( '.components-form-token-field__token' );
-
-		tags = await getCurrentTags();
-
-		// The tag selection was persisted after the publish process.
-		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( tagName );
-	} );
-
-	it( 'should be able to open the tags panel and create a new tag if the user has the right capabilities', async () => {
-		await createNewPost();
-
-		await openDocumentSettingsSidebar();
-
-		await openSidebarPanelWithTitle( 'Tags' );
-
-		// If the user has no permission to add a new tag finish the test.
-		if ( ! ( await canCreatTermInTaxonomy( 'tags' ) ) ) {
-			return;
-		}
-
-		// At the start there are no tag tokens.
-		expect( await page.$$( TAG_TOKEN_SELECTOR ) ).toHaveLength( 0 );
-
-		const tagsPanel = await findSidebarPanelWithTitle( 'Tags' );
-		const tagInput = await tagsPanel.$(
-			'.components-form-token-field__input'
-		);
-
-		// Click the tag input field.
-		await tagInput.click();
-
-		const tagName = 'tag-' + generateRandomNumber();
-
-		// Type the category name in the field.
-		await tagInput.type( tagName );
-
-		// Press enter to create a new tag.
-		await tagInput.press( 'Enter' );
-
-		await page.waitForSelector( TAG_TOKEN_SELECTOR );
-
-		// Get an array with the tags of the post.
-		let tags = await getCurrentTags();
-
-		// The post should only contain the tag we added.
-		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( tagName );
-
-		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
-
-		// Publish the post.
-		await publishPost();
-
-		// Reload the editor.
-		await page.reload();
-
-		// Wait for the tags to load.
-		await page.waitForSelector( '.components-form-token-field__token' );
-
-		tags = await getCurrentTags();
-
-		// The tag selection was persisted after the publish process.
-		expect( tags ).toHaveLength( 1 );
-		expect( tags[ 0 ] ).toEqual( tagName );
-	} );
-} );
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/packages/e2e-tests/specs/editor/various/typewriter.test.js b/packages/e2e-tests/specs/editor/various/typewriter.test.js
deleted file mode 100644
index f1eb0c7b689345..00000000000000
--- a/packages/e2e-tests/specs/editor/various/typewriter.test.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost } from '@wordpress/e2e-test-utils';
-
-describe( 'TypeWriter', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	const getCaretPosition = async () =>
-		await page.evaluate( () => wp.dom.computeCaretRect( window ).y );
-
-	// Allow the scroll position to be 1px off.
-	const BUFFER = 1;
-
-	const getDiff = async ( caretPosition ) =>
-		Math.abs( ( await getCaretPosition() ) - caretPosition );
-
-	it( 'should maintain caret position', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create second block.
-		await page.keyboard.press( 'Enter' );
-
-		const initialPosition = await getCaretPosition();
-
-		// The page shouldn't be scrolled when it's being filled.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getCaretPosition() ).toBeGreaterThan( initialPosition );
-
-		// Create blocks until the typewriter effect kicks in.
-		while (
-			await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop === 0
-			)
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		const newPosition = await getCaretPosition();
-
-		// Now the scroll position should be maintained.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Type until the text wraps.
-		while (
-			await page.evaluate(
-				() =>
-					document.activeElement.clientHeight <=
-					parseInt(
-						getComputedStyle( document.activeElement ).lineHeight,
-						10
-					)
-			)
-		) {
-			await page.keyboard.type( 'a' );
-		}
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Pressing backspace will reposition the caret to the previous line.
-		// Scroll position should be adjusted again.
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getDiff( newPosition ) ).toBeLessThanOrEqual( BUFFER );
-
-		// Should reset scroll position to maintain.
-		await page.keyboard.press( 'ArrowUp' );
-
-		const positionAfterArrowUp = await getCaretPosition();
-
-		expect( positionAfterArrowUp ).toBeLessThanOrEqual( newPosition );
-
-		// Should be scrolled to new position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( positionAfterArrowUp ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-	} );
-
-	it( 'should maintain caret position after scroll', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create zero or more blocks until there is a scrollable container.
-		// No blocks should be created if there's already a scrollbar.
-		while (
-			await page.evaluate(
-				() => ! wp.dom.getScrollContainer( document.activeElement )
-			)
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		const scrollPosition = await page.evaluate(
-			() => wp.dom.getScrollContainer( document.activeElement ).scrollTop
-		);
-		// Expect scrollbar to be at the top.
-		expect( scrollPosition ).toBe( 0 );
-
-		// Move the mouse to the scroll container, and scroll down
-		// a small amount to trigger the typewriter mode.
-		const mouseMovePosition = await page.evaluate( () => {
-			const caretRect = wp.dom.computeCaretRect( window );
-			return [ Math.floor( caretRect.x ), Math.floor( caretRect.y ) ];
-		} );
-		await page.mouse.move( ...mouseMovePosition );
-		await page.mouse.wheel( { deltaY: 2 } );
-		await page.waitForFunction(
-			() =>
-				wp.dom.getScrollContainer( document.activeElement )
-					.scrollTop === 2
-		);
-		// Wait for the caret rectangle to be recalculated.
-		await page.evaluate(
-			() => new Promise( window.requestAnimationFrame )
-		);
-
-		// After hitting Enter to create a new block, the caret screen
-		// coordinates should be the same.
-		const initialPosition = await getCaretPosition();
-		await page.keyboard.press( 'Enter' );
-		await page.waitForFunction(
-			() =>
-				// Wait for the Typewriter to scroll down past the initial position.
-				wp.dom.getScrollContainer( document.activeElement ).scrollTop >
-				2
-		);
-		expect( await getDiff( initialPosition ) ).toBe( 0 );
-	} );
-
-	it( 'should maintain caret position after leaving last editable', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-		// Create second block.
-		await page.keyboard.press( 'Enter' );
-		// Create third block.
-		await page.keyboard.press( 'Enter' );
-		// Move to first block.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-
-		const initialPosition = await getCaretPosition();
-
-		// Should maintain scroll position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( initialPosition ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-	} );
-
-	it( 'should scroll caret into view from the top', async () => {
-		// Create first block.
-		await page.keyboard.press( 'Enter' );
-
-		// Create blocks until there is a scrollable container.
-		while (
-			await page.evaluate(
-				() => ! wp.dom.getScrollContainer( document.activeElement )
-			)
-		) {
-			await page.keyboard.press( 'Enter' );
-		}
-
-		let count = 0;
-
-		// Create blocks until the typewriter effect kicks in, create at
-		// least 10 blocks to properly test the .
-		while (
-			( await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop === 0
-			) ) ||
-			count < 10
-		) {
-			await page.keyboard.press( 'Enter' );
-			count++;
-		}
-
-		// Scroll the active element to the very bottom of the scroll container,
-		// then scroll up, so the caret is partially hidden.
-		await page.evaluate( () => {
-			document.activeElement.scrollIntoView( false );
-			wp.dom.getScrollContainer( document.activeElement ).scrollTop -=
-				document.activeElement.offsetHeight + 10;
-		} );
-
-		const bottomPostition = await getCaretPosition();
-
-		// Should scroll the caret back into view (preserve browser behaviour).
-		await page.keyboard.type( 'a' );
-
-		const newBottomPosition = await getCaretPosition();
-
-		expect( newBottomPosition ).toBeLessThanOrEqual( bottomPostition );
-
-		// Should maintain new caret position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newBottomPosition ) ).toBeLessThanOrEqual(
-			BUFFER
-		);
-
-		await page.keyboard.press( 'Backspace' );
-
-		while ( count-- ) {
-			await page.keyboard.press( 'ArrowUp' );
-		}
-
-		// Scroll the active element to the very top of the scroll container,
-		// then scroll down, so the caret is partially hidden.
-		await page.evaluate( () => {
-			document.activeElement.scrollIntoView();
-			wp.dom.getScrollContainer( document.activeElement ).scrollTop +=
-				document.activeElement.offsetHeight + 10;
-		} );
-
-		const topPostition = await getCaretPosition();
-
-		// Should scroll the caret back into view (preserve browser behaviour).
-		await page.keyboard.type( 'a' );
-
-		const newTopPosition = await getCaretPosition();
-
-		expect( newTopPosition ).toBeGreaterThan( topPostition );
-
-		// Should maintain new caret position.
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getDiff( newTopPosition ) ).toBeLessThanOrEqual( BUFFER );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/undo.test.js b/packages/e2e-tests/specs/editor/various/undo.test.js
deleted file mode 100644
index 9402ce8624c1a1..00000000000000
--- a/packages/e2e-tests/specs/editor/various/undo.test.js
+++ /dev/null
@@ -1,444 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	selectBlockByClientId,
-	getAllBlocks,
-	saveDraft,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-const getSelection = async () => {
-	return await page.evaluate( () => {
-		const selectedBlock = document.activeElement.closest( '.wp-block' );
-		const blocks = Array.from( document.querySelectorAll( '.wp-block' ) );
-		const blockIndex = blocks.indexOf( selectedBlock );
-
-		if ( blockIndex === -1 ) {
-			return {};
-		}
-
-		let editables;
-
-		if ( selectedBlock.getAttribute( 'contenteditable' ) ) {
-			editables = [ selectedBlock ];
-		} else {
-			editables = Array.from(
-				selectedBlock.querySelectorAll( '[contenteditable]' )
-			);
-		}
-
-		const editableIndex = editables.indexOf( document.activeElement );
-		const selection = window.getSelection();
-
-		if ( editableIndex === -1 || ! selection.rangeCount ) {
-			return { blockIndex };
-		}
-
-		const range = selection.getRangeAt( 0 );
-		const cloneStart = range.cloneRange();
-		const cloneEnd = range.cloneRange();
-
-		cloneStart.setStart( document.activeElement, 0 );
-		cloneEnd.setStart( document.activeElement, 0 );
-
-		/**
-		 * Zero width non-breaking space, used as padding in the editable DOM
-		 * tree when it is empty otherwise.
-		 */
-		const ZWNBSP = '\ufeff';
-
-		return {
-			blockIndex,
-			editableIndex,
-			startOffset: cloneStart.toString().replace( ZWNBSP, '' ).length,
-			endOffset: cloneEnd.toString().replace( ZWNBSP, '' ).length,
-		};
-	} );
-};
-
-describe( 'undo', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should undo typing after a pause', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( 'before pause' );
-		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
-		await page.keyboard.type( ' after pause' );
-
-		const after = await getEditedPostContent();
-
-		expect( after ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		const before = await getEditedPostContent();
-
-		expect( before ).toMatchSnapshot();
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before pause'.length,
-			endOffset: 'before pause'.length,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( '' );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( before );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before pause'.length,
-			endOffset: 'before pause'.length,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( after );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before pause after pause'.length,
-			endOffset: 'before pause after pause'.length,
-		} );
-	} );
-
-	it( 'should undo typing after non input change', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( 'before keyboard ' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( 'after keyboard' );
-
-		const after = await getEditedPostContent();
-
-		expect( after ).toMatchSnapshot();
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		const before = await getEditedPostContent();
-
-		expect( before ).toMatchSnapshot();
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before keyboard '.length,
-			endOffset: 'before keyboard '.length,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( '' );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( before );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before keyboard '.length,
-			endOffset: 'before keyboard '.length,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( after );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'before keyboard after keyboard'.length,
-			endOffset: 'before keyboard after keyboard'.length,
-		} );
-	} );
-
-	it( 'should undo bold', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'test' );
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		await page.click( '[data-type="core/paragraph"]' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		const visibleResult = await page.evaluate(
-			() => document.activeElement.innerHTML
-		);
-		expect( visibleResult ).toBe( 'test' );
-	} );
-
-	it( 'Should undo/redo to expected level intervals', async () => {
-		await clickBlockAppender();
-
-		const firstBlock = await getEditedPostContent();
-
-		await page.keyboard.type( 'This' );
-
-		const firstText = await getEditedPostContent();
-
-		await page.keyboard.press( 'Enter' );
-
-		const secondBlock = await getEditedPostContent();
-
-		await page.keyboard.type( 'is' );
-
-		const secondText = await getEditedPostContent();
-
-		await page.keyboard.press( 'Enter' );
-
-		const thirdBlock = await getEditedPostContent();
-
-		await page.keyboard.type( 'test' );
-
-		const thirdText = await getEditedPostContent();
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 3rd paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( thirdBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 3,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 3rd block.
-
-		expect( await getEditedPostContent() ).toBe( secondText );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 2,
-			editableIndex: 0,
-			startOffset: 'is'.length,
-			endOffset: 'is'.length,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 2nd paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( secondBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 2,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 2nd block.
-
-		expect( await getEditedPostContent() ).toBe( firstText );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'This'.length,
-			endOffset: 'This'.length,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 1st paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( firstBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primary', 'z' ); // Undo 1st block.
-
-		expect( await getEditedPostContent() ).toBe( '' );
-		expect( await getSelection() ).toEqual( {} );
-		// After undoing every action, there should be no more undo history.
-		expect(
-			await page.$( '.editor-history__undo[aria-disabled="true"]' )
-		).not.toBeNull();
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 1st block.
-
-		expect( await getEditedPostContent() ).toBe( firstBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-		// After redoing one change, the undo button should be enabled again.
-		expect(
-			await page.$( '.editor-history__undo[aria-disabled="true"]' )
-		).toBeNull();
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 1st paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( firstText );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 1,
-			editableIndex: 0,
-			startOffset: 'This'.length,
-			endOffset: 'This'.length,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 2nd block.
-
-		expect( await getEditedPostContent() ).toBe( secondBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 2,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 2nd paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( secondText );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 2,
-			editableIndex: 0,
-			startOffset: 'is'.length,
-			endOffset: 'is'.length,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 3rd block.
-
-		expect( await getEditedPostContent() ).toBe( thirdBlock );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 3,
-			editableIndex: 0,
-			startOffset: 0,
-			endOffset: 0,
-		} );
-
-		await pressKeyWithModifier( 'primaryShift', 'z' ); // Redo 3rd paragraph text.
-
-		expect( await getEditedPostContent() ).toBe( thirdText );
-		expect( await getSelection() ).toEqual( {
-			blockIndex: 3,
-			editableIndex: 0,
-			startOffset: 'test'.length,
-			endOffset: 'test'.length,
-		} );
-	} );
-
-	it( 'should undo for explicit persistence editing post', async () => {
-		// Regression test: An issue had occurred where the creation of an
-		// explicit undo level would interfere with blocks values being synced
-		// correctly to the block editor.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/14950
-
-		// Issue is demonstrated from an edited post: create, save, and reload.
-		await clickBlockAppender();
-		await page.keyboard.type( 'original' );
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Issue is demonstrated by forcing state merges (multiple inputs) on
-		// an existing text after a fresh reload.
-		await selectBlockByClientId( ( await getAllBlocks() )[ 0 ].clientId );
-		await page.keyboard.type( 'modified' );
-
-		// The issue is demonstrated after the one second delay to trigger the
-		// creation of an explicit undo persistence level.
-		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		// Assert against the _visible_ content. Since editor state with the
-		// regression present was accurate, it would produce the correct
-		// content. The issue had manifested in the form of what was shown to
-		// the user since the blocks state failed to sync to block editor.
-		const visibleContent = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		expect( visibleContent ).toBe( 'original' );
-	} );
-
-	it( 'should not create undo levels when saving', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await saveDraft();
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( '' );
-	} );
-
-	it( 'should not create undo levels when publishing', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await publishPost();
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toBe( '' );
-	} );
-
-	it( 'should immediately create an undo level on typing', async () => {
-		await clickBlockAppender();
-
-		await page.keyboard.type( '1' );
-		await saveDraft();
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Expect undo button to be disabled.
-		expect(
-			await page.$( '.editor-history__undo[aria-disabled="true"]' )
-		).not.toBeNull();
-
-		await page.click( '[data-type="core/paragraph"]' );
-
-		await page.keyboard.type( '2' );
-
-		// Expect undo button to be enabled.
-		expect(
-			await page.$( '.editor-history__undo[aria-disabled="true"]' )
-		).toBeNull();
-
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		// Expect "1".
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should be able to undo and redo when transient changes have been made and we update/publish', async () => {
-		// Typing consecutive characters in a `Paragraph` block updates the same
-		// block attribute as in the previous action and results in transient edits
-		// and skipping `undo` history steps.
-		const text = 'tonis';
-		await clickBlockAppender();
-		await page.keyboard.type( text );
-		await publishPost();
-		await pressKeyWithModifier( 'primary', 'z' );
-		expect( await getEditedPostContent() ).toBe( '' );
-		await page.waitForSelector(
-			'.editor-history__redo[aria-disabled="false"]'
-		);
-		await page.click( '.editor-history__redo[aria-disabled="false"]' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>tonis</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
deleted file mode 100644
index bee7b0da9d1bec..00000000000000
--- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Navigation editor allows creation of a menu when there are existing menu items 1`] = `"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} /-->"`;
-
-exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"My page\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"isTopLevelLink\\":true} /-->
-<!-- /wp:navigation -->"
-`;
-
-exports[`Navigation editor displays the first created menu when at least one menu exists 1`] = `
-"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
-<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"About\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Our team\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"Shop\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
-<!-- wp:navigation-submenu {\\"label\\":\\"Winter apparel\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
-<!-- wp:navigation-link {\\"label\\":\\"Chunky socks\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Hideous hats\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Glorious gloves\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Jazzy Jumpers\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-submenu -->
-<!-- /wp:navigation-submenu -->
-
-<!-- wp:navigation-link {\\"label\\":\\"Shipping\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-link {\\"label\\":\\"Contact Us\\",\\"type\\":\\"page\\",\\"id\\":\\"number\\",\\"url\\":\\"string\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->
-
-<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelItem\\":true} -->
-<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"string\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
-<!-- /wp:navigation-submenu -->
-<!-- /wp:navigation -->"
-`;
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
deleted file mode 100644
index 0ba5eb72e59158..00000000000000
--- a/packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	activateTheme,
-	setOption,
-	visitSiteEditor,
-	openSiteEditorNavigationPanel,
-	navigateSiteEditorBackToRoot,
-	deleteAllTemplates,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Post Comments Form', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-	} );
-
-	describe( 'placeholder', () => {
-		it( 'displays in site editor even when comments are closed by default', async () => {
-			await setOption( 'default_comment_status', 'closed' );
-
-			// Navigate to "Singular" post template
-			await visitSiteEditor();
-			await openSiteEditorNavigationPanel();
-			await navigateSiteEditorBackToRoot();
-			await expect( page ).toClick(
-				'.components-navigation__item-title',
-				{ text: /templates/i }
-			);
-			await expect( page ).toClick( '.components-heading > a', {
-				text: /singular/i,
-			} );
-
-			// Insert post comments form
-			await insertBlock( 'Post Comments Form' );
-
-			// Ensure the placeholder is there
-			await expect( canvas() ).toMatchElement(
-				'.wp-block-post-comments-form .comment-form'
-			);
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/experiments/experimental-features.js b/packages/e2e-tests/specs/experiments/experimental-features.js
deleted file mode 100644
index 3c33f930012dde..00000000000000
--- a/packages/e2e-tests/specs/experiments/experimental-features.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
-
-async function setExperimentalFeaturesState( features, enable ) {
-	const query = addQueryArgs( '', {
-		page: 'gutenberg-experiments',
-	} );
-	await visitAdminPage( '/admin.php', query );
-
-	await Promise.all(
-		features.map( async ( feature ) => {
-			await page.waitForSelector( feature );
-			const checkedSelector = `${ feature }[checked=checked]`;
-			const isChecked = !! ( await page.$( checkedSelector ) );
-			if ( ( ! isChecked && enable ) || ( isChecked && ! enable ) ) {
-				await page.click( feature );
-			}
-		} )
-	);
-	await Promise.all( [
-		page.waitForNavigation( { waitUntil: 'networkidle0' } ),
-		page.click( '#submit' ),
-	] );
-}
-
-/**
- * Establishes test lifecycle to enable experimental feature for the duration of
- * the grouped test block.
- *
- * @param {Array} features Array of {string} selectors of settings to enable.
- *                         Assumes they can be enabled with one click.
- */
-export function useExperimentalFeatures( features ) {
-	beforeAll( () => setExperimentalFeaturesState( features, true ) );
-	afterAll( () => setExperimentalFeaturesState( features, false ) );
-}
diff --git a/packages/e2e-tests/specs/experiments/fixtures/menu-items-request-fixture.json b/packages/e2e-tests/specs/experiments/fixtures/menu-items-request-fixture.json
deleted file mode 100644
index 01b844c45ceee4..00000000000000
--- a/packages/e2e-tests/specs/experiments/fixtures/menu-items-request-fixture.json
+++ /dev/null
@@ -1,84 +0,0 @@
-[
-	{
-		"title": "Home",
-		"url": "http://localhost:8889/",
-		"menu_order": 1
-	},
-	{
-		"title": "About",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 2
-	},
-	{
-		"title": "Our team",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 3,
-		"parent": 1
-	},
-	{
-		"title": "Shop",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 4
-	},
-	{
-		"title": "Winter apparel",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 5,
-		"parent": 3
-	},
-	{
-		"title": "Chunky socks",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 6,
-		"parent": 4
-	},
-	{
-		"title": "Hideous hats",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 7,
-		"parent": 4
-	},
-	{
-		"title": "Glorious gloves",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 8,
-		"parent": 4
-	},
-	{
-		"title": "Jazzy Jumpers",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 9,
-		"parent": 4
-	},
-	{
-		"title": "Shipping",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 10
-	},
-	{
-		"title": "Contact Us",
-		"type": "post_type",
-		"object": "page",
-		"menu_order": 11
-	},
-	{
-		"title": "WordPress.org",
-		"url": "https://wordpress.org",
-		"menu_order": 12
-	},
-	{
-		"title": "Google",
-		"url": "https://google.com",
-		"menu_order": 13,
-		"parent": 11
-	}
-]
diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js
deleted file mode 100644
index be8d9c9a2bdb30..00000000000000
--- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js
+++ /dev/null
@@ -1,850 +0,0 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { find, findAll } from 'puppeteer-testing-library';
-
-/**
- * WordPress dependencies
- */
-import {
-	createJSONResponse,
-	createMenu,
-	deleteAllMenus,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	setBrowserViewport,
-	setUpResponseMocking,
-	visitAdminPage,
-	__experimentalRest as rest,
-} from '@wordpress/e2e-test-utils';
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { useExperimentalFeatures } from './experimental-features';
-import menuItemsFixture from './fixtures/menu-items-request-fixture.json';
-
-const TYPE_NAMES = {
-	post: 'post',
-	page: 'page',
-	post_tag: 'tag',
-	category: 'category',
-};
-
-const searchFixture = [
-	{
-		id: 300,
-		title: 'Home',
-		url: 'https://example.com/home',
-		type: 'post',
-		subtype: 'page',
-	},
-	{
-		id: 301,
-		title: 'About',
-		url: 'https://example.com/about',
-		type: 'post',
-		subtype: 'page',
-	},
-	{
-		id: 302,
-		title: 'Boats',
-		url: 'https://example.com/?cat=123',
-		type: 'category',
-	},
-	{
-		id: 303,
-		title: 'Faves',
-		url: 'https://example.com/?tag=456',
-		type: 'post_tag',
-	},
-];
-
-// Matching against variations of the same URL encoded and non-encoded
-// produces the most reliable mocking.
-const REST_SEARCH_ROUTES = [
-	'/wp/v2/search',
-	`rest_route=${ encodeURIComponent( '/wp/v2/search' ) }`,
-];
-
-const REST_PAGES_ROUTES = [
-	'/wp/v2/pages',
-	`rest_route=${ encodeURIComponent( '/wp/v2/pages' ) }`,
-];
-
-/**
- * Determines if a given URL matches any of a given collection of
- * routes (expressed as substrings).
- *
- * @param {string} reqUrl the full URL to be tested for matches.
- * @param {Array}  routes array of strings to match against the URL.
- */
-function matchUrlToRoute( reqUrl, routes ) {
-	return routes.some( ( route ) => reqUrl.includes( route ) );
-}
-
-function getEndpointMocks( matchingRoutes, responsesByMethod ) {
-	return [ 'GET', 'POST', 'DELETE', 'PUT' ].reduce( ( mocks, restMethod ) => {
-		if ( responsesByMethod[ restMethod ] ) {
-			return [
-				...mocks,
-				{
-					match: ( request ) =>
-						matchUrlToRoute( request.url(), matchingRoutes ) &&
-						request.method() === restMethod,
-					onRequestMatch: createJSONResponse(
-						responsesByMethod[ restMethod ]
-					),
-				},
-			];
-		}
-
-		return mocks;
-	}, [] );
-}
-
-function getSearchMocks( responsesByMethod ) {
-	return getEndpointMocks( REST_SEARCH_ROUTES, responsesByMethod );
-}
-
-function getPagesMocks( responsesByMethod ) {
-	return getEndpointMocks( REST_PAGES_ROUTES, responsesByMethod );
-}
-
-async function visitNavigationEditor() {
-	const query = addQueryArgs( '', {
-		page: 'gutenberg-navigation',
-	} );
-	await visitAdminPage( '/admin.php', query );
-}
-
-/**
- * Get a list of the editor's current blocks for use in a snapshot.
- *
- * @return {string} Block HTML.
- */
-async function getSerializedBlocks() {
-	const blocks = await page.evaluate( () =>
-		wp.data.select( 'core/block-editor' ).getBlocks()
-	);
-	const safeBlocks = replaceUnstableBlockAttributes( blocks );
-	return page.evaluate(
-		( blocksToSerialize ) => wp.blocks.serialize( blocksToSerialize ),
-		safeBlocks
-	);
-}
-
-/**
- * Some block attributes contain values that are not stable from test run to
- * test run and can't be compared with a snapshot. These are typically the
- * ids of posts or pages that are created prior to each test run. Replace those
- * values with their types before serializing to a snapshot.
- *
- * @param {Array} blocks The array of block data.
- *
- * @return {Array} Updated array of block data.
- */
-function replaceUnstableBlockAttributes( blocks ) {
-	return blocks?.map( ( block ) => {
-		const id = block.attributes.id ? typeof block.attributes.id : undefined;
-		const url = block.attributes.url
-			? typeof block.attributes.url
-			: undefined;
-
-		return {
-			...block,
-			attributes: {
-				...block.attributes,
-				id,
-				url,
-			},
-			innerBlocks: replaceUnstableBlockAttributes( block.innerBlocks ),
-		};
-	} );
-}
-
-async function deleteAllLinkedResources() {
-	[ '/wp/v2/posts', '/wp/v2/pages' ].forEach( async ( path ) => {
-		const items = await rest( { path } );
-
-		for ( const item of items ) {
-			await rest( {
-				method: 'DELETE',
-				path: `${ path }/${ item.id }?force=true`,
-			} );
-		}
-	} );
-}
-
-async function openMenuActionsDropdown() {
-	const menuActionsDropdown = await page.waitForXPath(
-		'//*[@role="region"][@aria-label="Navigation top bar"]//*[@class="edit-navigation-menu-actions"]//button[@aria-expanded="false"]'
-	);
-	await menuActionsDropdown.click();
-}
-
-async function getMenuItem( menuItemName ) {
-	return await page
-		.waitForXPath(
-			`//*[@role="group"]//*[@role="menuitemradio"]/span[text()="${ menuItemName }"]`
-		)
-		.catch( ( error ) => {
-			if ( error.name !== 'TimeoutError' ) {
-				throw error;
-			} else {
-				return null;
-			}
-		} );
-}
-
-describe.skip( 'Navigation editor', () => {
-	useExperimentalFeatures( [ '#gutenberg-navigation' ] );
-
-	beforeAll( async () => {
-		await deleteAllMenus();
-		await deleteAllLinkedResources();
-	} );
-
-	afterEach( async () => {
-		await deleteAllMenus();
-		await deleteAllLinkedResources();
-		await setUpResponseMocking( [] );
-	} );
-
-	it( 'allows creation of a menu when there are no current menu items', async () => {
-		await visitNavigationEditor();
-		await setUpResponseMocking( [
-			...getPagesMocks( {
-				GET: [
-					{
-						type: 'page',
-						id: 1,
-						link: 'https://example.com/1',
-						title: {
-							rendered: 'My page',
-						},
-					},
-				],
-			} ),
-		] );
-
-		// Wait for the header to show that no menus are available.
-		await page.waitForXPath( '//h3[.="Create your first menu"]', {
-			visible: true,
-		} );
-
-		await page.keyboard.type( 'Main Menu' );
-		const createMenuButton = await page.waitForXPath(
-			'//button[contains(., "Create menu")]'
-		);
-		await createMenuButton.click();
-
-		// A snackbar will appear when menu creation has completed.
-		await page.waitForXPath( '//div[contains(., "Menu created")]' );
-
-		// Select the navigation block and create a block from existing pages.
-		const navigationBlock = await page.waitForSelector(
-			'div[aria-label="Block: Navigation"]'
-		);
-		await navigationBlock.click();
-
-		const addAllPagesButton = await page.waitForXPath(
-			'//button[contains(., "Add all pages")]'
-		);
-		await addAllPagesButton.click();
-
-		// When the block is created the root element changes from a div (for the placeholder)
-		// to a nav (for the navigation itself). Wait for this to happen.
-		await page.waitForSelector( 'nav[aria-label="Block: Navigation"]' );
-
-		expect( await getSerializedBlocks() ).toMatchSnapshot();
-	} );
-
-	it( 'allows creation of a menu when there are existing menu items', async () => {
-		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
-		await createMenu( { name: 'Test Menu 2' }, menuItemsFixture );
-		await visitNavigationEditor();
-
-		// Wait for the header to show the menu name.
-		await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', {
-			visible: true,
-		} );
-
-		const createMenuButton = await page.waitForXPath(
-			'//button[.="New menu"]'
-		);
-		await createMenuButton.click();
-
-		const menuNameInputLabel = await page.waitForXPath(
-			'//form//label[.="Menu name"]'
-		);
-		await menuNameInputLabel.click();
-
-		await page.keyboard.type( 'New menu' );
-		await page.keyboard.press( 'Enter' );
-
-		// A snackbar will appear when menu creation has completed.
-		await page.waitForXPath( '//div[contains(., "Menu created")]' );
-
-		// An empty navigation block will appear.
-		await page.waitForSelector( 'div[aria-label="Block: Navigation"]' );
-
-		expect( await getSerializedBlocks() ).toMatchSnapshot();
-	} );
-
-	it( 'displays the first created menu when at least one menu exists', async () => {
-		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
-		await createMenu( { name: 'Test Menu 2' }, menuItemsFixture );
-
-		await visitNavigationEditor();
-
-		// Wait for the header to show the menu name.
-		await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', {
-			visible: true,
-		} );
-
-		// Wait for the block to be present.
-		await page.waitForSelector( 'nav[aria-label="Block: Navigation"]' );
-
-		expect( await getSerializedBlocks() ).toMatchSnapshot();
-	} );
-
-	it( 'shows the trailing block appender within the navigation block when no blocks are selected', async () => {
-		// The test requires the presence of existing menus.
-		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
-		await visitNavigationEditor();
-
-		// Wait for at least one block to be present on the page.
-		await page.waitForSelector( '.wp-block' );
-
-		// And for this test to be valid, no blocks should be selected, which
-		// should be the case when the editor loads.
-		const selectedBlocks = await page.$$( '.wp-block.is-selected' );
-		expect( selectedBlocks.length ).toBe( 0 );
-
-		// And when no blocks are selected, the trailing appender is present.
-		const blockListAppender = await page.waitForSelector(
-			'.block-list-appender button[aria-label="Add block"]'
-		);
-		expect( blockListAppender ).toBeTruthy();
-	} );
-
-	it( 'has a disabled undo button when an existing menu is loaded', async () => {
-		// The test requires the presence of existing menus.
-		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
-		await visitNavigationEditor();
-
-		// Wait for at least one block to be present on the page.
-		await page.waitForSelector( '.wp-block' );
-
-		// Check whether there's a disabled undo button.
-		const disabledUndoButton = await page.waitForSelector(
-			'button[aria-label="Undo"][aria-disabled="true"]'
-		);
-		expect( disabledUndoButton ).toBeTruthy();
-	} );
-
-	it( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
-		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
-		await visitNavigationEditor();
-
-		// Select a submenu block with nested links in a submenu.
-		const parentLinkXPath =
-			'//div[@aria-label="Block: Submenu" and contains(.,"WordPress.org")]';
-		const linkBlock = await page.waitForXPath( parentLinkXPath );
-		await linkBlock.click();
-
-		// There should be a submenu link visible.
-		//
-		// Submenus are hidden using `visibility: hidden` and shown using
-		// `visibility: visible` so the visible/hidden options must be used
-		// when selecting the elements.
-		const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`;
-		const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, {
-			visible: true,
-		} );
-		expect( submenuLinkVisible ).toBeDefined();
-
-		// Click in the top left corner of the canvas.
-		const canvas = await page.$( '.edit-navigation-layout__content-area' );
-		const boundingBox = await canvas.boundingBox();
-		await page.mouse.click( boundingBox.x + 5, boundingBox.y + 5 );
-
-		// There should be a submenu in the DOM, but it should be hidden.
-		const submenuLinkHidden = await page.waitForXPath( submenuLinkXPath, {
-			hidden: true,
-		} );
-		expect( submenuLinkHidden ).toBeDefined();
-	} );
-
-	it( 'displays suggestions when adding a link', async () => {
-		await createMenu( { name: 'Test Menu 1' } );
-		await setUpResponseMocking( [
-			...getSearchMocks( { GET: searchFixture } ),
-		] );
-
-		await visitNavigationEditor();
-
-		// Wait for the block to be present and start an empty block.
-		const navBlock = await page.waitForSelector(
-			'div[aria-label="Block: Navigation"]'
-		);
-		await navBlock.click();
-		const startEmptyButton = await page.waitForXPath(
-			'//button[.="Start blank"]'
-		);
-		await startEmptyButton.click();
-
-		const appender = await page.waitForSelector(
-			'button[aria-label="Add block"]'
-		);
-		await appender.click();
-
-		await page.waitForSelector( 'input[aria-label="URL"]' );
-
-		// The link suggestions should be searchable.
-		for ( let i = 0; i < searchFixture.length; i++ ) {
-			const { title, type, subtype, url } = searchFixture[ i ];
-			const expectedURL = url.replace( 'https://', '' );
-			const expectedType = TYPE_NAMES[ subtype || type ];
-
-			await page.keyboard.type( title );
-			const suggestionTitle = await page.waitForXPath(
-				`//button[@role="option"]//span[.="${ title }"]`
-			);
-			const suggestionType = await page.waitForXPath(
-				`//button[@role="option"]//span[.="${ expectedType }"]`
-			);
-			const suggestionURL = await page.waitForXPath(
-				`//button[@role="option"]//span[.="${ expectedURL }"]`
-			);
-			expect( suggestionTitle ).toBeTruthy();
-			expect( suggestionType ).toBeTruthy();
-			expect( suggestionURL ).toBeTruthy();
-			await pressKeyWithModifier( 'primary', 'A' );
-		}
-	} );
-
-	describe( 'Menu name editor', () => {
-		const initialMenuName = 'Main Menu';
-		const nameEditorSelector = '.edit-navigation-name-editor__text-control';
-		const inputSelector = `${ nameEditorSelector } input`;
-
-		it( 'saves menu name changes', async () => {
-			await createMenu( { name: initialMenuName } );
-			await visitNavigationEditor();
-
-			// Rename the menu and save it.
-			const newName = 'New menu';
-			await page.waitForSelector( inputSelector );
-			await page.click( inputSelector );
-			await pressKeyTimes( 'Backspace', initialMenuName.length );
-			await page.keyboard.type( newName );
-			await page.click( '.edit-navigation-toolbar__save-button' );
-			await page.waitForSelector( '.components-snackbar' );
-			await page.reload();
-
-			// Expect the header to have the new name.
-			const headerSubtitle = await page.waitForSelector(
-				'.edit-navigation-menu-actions__subtitle'
-			);
-			const headerSubtitleText = await headerSubtitle.evaluate(
-				( element ) => element.innerText
-			);
-			expect( headerSubtitleText ).toBe( newName );
-		} );
-
-		// Flaky test, see https://github.com/WordPress/gutenberg/pull/34869#issuecomment-922711557.
-		it.skip( 'does not save a menu name upon clicking save button when name is empty', async () => {
-			await createMenu( { name: initialMenuName } );
-			await visitNavigationEditor();
-
-			// Try saving a menu with an empty name.
-			await page.waitForSelector( inputSelector );
-			await page.click( inputSelector );
-			await pressKeyTimes( 'Backspace', initialMenuName.length );
-			await page.click( '.edit-navigation-toolbar__save-button' );
-			const snackbar = await page.waitForSelector(
-				'.components-snackbar',
-				{ visible: true }
-			);
-			const snackbarText = await snackbar.evaluate(
-				( element ) => element.innerText
-			);
-			expect( snackbarText ).toBe(
-				"Unable to save: 'A name is required for this term.'"
-			);
-			expect( console ).toHaveErrored(
-				'Failed to load resource: the server responded with a status of 500 (Internal Server Error)'
-			);
-			await page.reload();
-
-			// Expect the header to have the old name.
-			const headerSubtitle = await page.waitForSelector(
-				'.edit-navigation-menu-actions__subtitle'
-			);
-			const headerSubtitleText = await headerSubtitle.evaluate(
-				( element ) => element.innerText
-			);
-			expect( headerSubtitleText ).toBe( initialMenuName );
-		} );
-	} );
-
-	describe( 'Change detections', () => {
-		beforeEach( async () => {
-			await createMenu( { name: 'Main' } );
-			await visitNavigationEditor();
-		} );
-
-		async function assertIsDirty( isDirty ) {
-			let hadDialog = false;
-
-			function handleOnDialog() {
-				hadDialog = true;
-			}
-
-			try {
-				page.on( 'dialog', handleOnDialog );
-				await page.reload();
-
-				// Ensure whether it was expected that dialog was encountered.
-				expect( hadDialog ).toBe( isDirty );
-			} catch ( error ) {
-				throw error;
-			} finally {
-				page.removeListener( 'dialog', handleOnDialog );
-			}
-		}
-
-		// eslint-disable-next-line jest/no-disabled-tests
-		it.skip( 'should not prompt to confirm unsaved changes for the newly selected menu', async () => {
-			await assertIsDirty( false );
-		} );
-
-		// eslint-disable-next-line jest/no-disabled-tests
-		it.skip( 'should prompt to confirm unsaved changes when menu name is edited', async () => {
-			await page.type(
-				'.edit-navigation-name-editor__text-control input',
-				' Menu'
-			);
-
-			await assertIsDirty( true );
-		} );
-	} );
-
-	describe( 'Sidebar inserter', () => {
-		it( 'disables inserter toggle when Navigation block is in placeholder state', async () => {
-			await createMenu( { name: 'Main Menu' } );
-			await visitNavigationEditor();
-
-			// Wait for the block to be present.
-			await expect( {
-				role: 'document',
-				name: 'Block: Navigation',
-			} ).toBeFound();
-
-			// Check for the placeholder state.
-			await expect( {
-				role: 'button',
-				name: 'Start blank',
-			} ).toBeFound();
-
-			// Expect the block inserter to be disabled.
-			await expect( {
-				name: 'Toggle block inserter',
-				disabled: true,
-				role: 'button',
-			} ).toBeFound();
-		} );
-
-		it( 'enables inserter toggle when Navigation block is in editable state', async () => {
-			await createMenu( { name: 'Main Menu' }, menuItemsFixture );
-			await visitNavigationEditor();
-
-			// Wait for the block to be present.
-			await expect( {
-				role: 'document',
-				name: 'Block: Navigation',
-			} ).toBeFound();
-
-			// Expect the block inserter to be found.
-			await expect( {
-				name: 'Toggle block inserter',
-				role: 'button',
-			} ).toBeFound();
-
-			// Work around bug where `find` with `disabled=false` doesn't return anything.
-			const isEnabled = await page.$eval(
-				'[aria-label="Toggle block inserter"]',
-				( element ) => ! element.disabled
-			);
-
-			expect( isEnabled ).toBeTruthy();
-		} );
-
-		it( 'toggles the inserter sidebar open and closed', async () => {
-			await createMenu( { name: 'Main Menu' }, menuItemsFixture );
-			await visitNavigationEditor();
-
-			// Wait for the block to be present.
-			await expect( {
-				role: 'document',
-				name: 'Block: Navigation',
-			} ).toBeFound();
-
-			// Expect inserter sidebar to **not** be in the DOM.
-			await expect( {
-				role: 'region',
-				name: 'Block library',
-			} ).not.toBeFound();
-
-			const inserterToggle = await find( {
-				name: 'Toggle block inserter',
-				role: 'button',
-			} );
-
-			await inserterToggle.click();
-
-			// Expect the inserter sidebar to be present in the DOM.
-			await expect( {
-				role: 'region',
-				name: 'Block library',
-			} ).toBeFound();
-
-			// Expect block search input to be focused.
-			await expect( {
-				role: 'searchbox',
-				name: 'Search for blocks and patterns',
-				focused: true,
-			} ).toBeFound();
-		} );
-
-		it( 'inserts items at end of Navigation block by default', async () => {
-			await setUpResponseMocking( [
-				...getSearchMocks( { GET: searchFixture } ),
-			] );
-			await createMenu( { name: 'Main Menu' }, menuItemsFixture );
-
-			await visitNavigationEditor();
-
-			// Wait for the block to be present.
-			await expect( {
-				role: 'document',
-				name: 'Block: Navigation',
-			} ).toBeFound();
-
-			const inserterToggle = await find( {
-				name: 'Toggle block inserter',
-				role: 'button',
-			} );
-
-			await inserterToggle.click();
-
-			// Expect the inserter sidebar to be present in the DOM.
-			await expect( {
-				role: 'region',
-				name: 'Block library',
-			} ).toBeFound();
-
-			// Add Custom Link item.
-			const customLinkOption = await find( {
-				name: 'Custom Link',
-				role: 'option',
-			} );
-
-			customLinkOption.click();
-
-			// Expect that inserter is auto-closed.
-			await expect( {
-				role: 'region',
-				name: 'Block library',
-			} ).not.toBeFound();
-
-			// Expect to be focused inside the Link UI search input.
-			await expect( {
-				role: 'combobox',
-				name: 'URL',
-				focused: true,
-			} ).toBeFound();
-
-			const [ itemToSelect ] = searchFixture;
-
-			// Add Custom Link item.
-			const [ firstSearchSuggestion ] = await findAll( {
-				role: 'option',
-				name: `${ itemToSelect.title } ${ itemToSelect.subtype }`,
-			} );
-
-			await firstSearchSuggestion.click();
-
-			// Get the title/label of the last Nav item inside the Nav block.
-			const lastItemAttributes = await page.evaluate( () => {
-				const { getBlockOrder, getBlocks } =
-					wp.data.select( 'core/block-editor' );
-
-				const lockedNavigationBlock = getBlockOrder()[ 0 ];
-
-				const navItemBlocks = getBlocks( lockedNavigationBlock );
-
-				const { attributes } =
-					navItemBlocks[ navItemBlocks.length - 1 ];
-
-				return attributes;
-			} );
-
-			// Check the last item is the one we just inserted.
-			expect( lastItemAttributes.label ).toEqual( itemToSelect.title );
-			expect( lastItemAttributes.isTopLevelLink ).toBeTruthy();
-		} );
-	} );
-
-	describe( 'Delete menu button', () => {
-		useExperimentalFeatures( [ '#gutenberg-navigation' ] );
-
-		beforeAll( async () => {
-			await deleteAllMenus();
-			await deleteAllLinkedResources();
-		} );
-
-		afterEach( async () => {
-			await deleteAllMenus();
-			await deleteAllLinkedResources();
-		} );
-
-		afterEach( async () => {
-			await setBrowserViewport( 'large' );
-		} );
-		it.each( [ 'large', 'small' ] )(
-			`should retain menu when confirmation is canceled and the viewport is %s`,
-			async ( viewport ) => {
-				const menuName = 'Menu delete test';
-				await createMenu( { name: menuName }, menuItemsFixture );
-				await visitNavigationEditor();
-				await setBrowserViewport( viewport );
-				// Wait for the header to show the menu name.
-				await page.waitForXPath(
-					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-				);
-
-				if ( viewport === 'small' ) {
-					const openSettingsSidebar = await page.waitForXPath(
-						'//button[@aria-label="Settings"][@aria-expanded="false"]'
-					);
-					await openSettingsSidebar.click();
-				}
-
-				const deleteMenuButton = await page.waitForXPath(
-					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-				);
-				await deleteMenuButton.click();
-
-				const cancelButton = await page.waitForXPath(
-					'//*[@role="dialog"]//button[text()="Cancel"]'
-				);
-				await cancelButton.click();
-
-				const menuActionsDropdown = await page.waitForXPath(
-					`//*[contains(@class,"edit-navigation-menu-actions")]//h2[text()="${ menuName }"]`
-				);
-				const currentSelectedMenu = await page.evaluate(
-					( el ) => el.textContent,
-					menuActionsDropdown
-				);
-
-				expect( currentSelectedMenu ).toBe( menuName );
-			}
-		);
-		it.each( [ 'large', 'small' ] )(
-			`should delete menu when confirmation is confirmed and there are no other menus and the viewport is %s`,
-			async ( viewport ) => {
-				const menuName = 'Menu delete test';
-				await createMenu( { name: menuName }, menuItemsFixture );
-				await visitNavigationEditor();
-				await setBrowserViewport( viewport );
-				// Wait for the header to show the menu name.
-				await page.waitForXPath(
-					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-				);
-				if ( viewport === 'small' ) {
-					const openSettingsSidebar = await page.waitForXPath(
-						'//button[@aria-label="Settings"][@aria-expanded="false"]'
-					);
-					await openSettingsSidebar.click();
-				}
-
-				const deleteMenuButton = await page.waitForXPath(
-					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-				);
-				await deleteMenuButton.click();
-
-				const confirmButton = await page.waitForXPath(
-					'//*[@role="dialog"]//button[text()="OK"]'
-				);
-				await confirmButton.click();
-
-				await page.waitForXPath(
-					`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
-				);
-
-				// If the "Create your first menu" prompt appears, we know there are no remaining menus,
-				// so our test menu must have been deleted successfully.
-				const createFirstMenuPrompt = await page.waitForXPath(
-					'//h3[.="Create your first menu"]',
-					{
-						visible: true,
-					}
-				);
-				const noMenusRemaining = createFirstMenuPrompt ? true : false;
-				expect( noMenusRemaining ).toBe( true );
-			}
-		);
-
-		it.each( [ 'large', 'small' ] )(
-			`should delete menu when confirmation is confirmed and there are other existing menus and the viewport is %s`,
-			async () => {
-				const menuName = 'Menu delete test';
-				await createMenu( { name: menuName }, menuItemsFixture );
-				await createMenu(
-					{ name: `${ menuName } 2` },
-					menuItemsFixture
-				);
-				await visitNavigationEditor();
-				// Wait for the header to show the menu name
-				await page.waitForXPath(
-					`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
-				);
-
-				// Confirm both test menus are present
-				openMenuActionsDropdown();
-				const firstTestMenuItem = await getMenuItem( menuName );
-				const secondTestMenuItem = await getMenuItem(
-					`${ menuName } 2`
-				);
-
-				expect( firstTestMenuItem ).not.toBeNull();
-				expect( secondTestMenuItem ).not.toBeNull();
-
-				// Delete the first test menu
-				const deleteMenuButton = await page.waitForXPath(
-					'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
-				);
-				await deleteMenuButton.click();
-
-				const confirmButton = await page.waitForXPath(
-					'//*[@role="dialog"]//button[text()="OK"]'
-				);
-				await confirmButton.click();
-
-				await page.waitForXPath(
-					`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
-				);
-
-				openMenuActionsDropdown();
-				const deletedTestMenuItem = await getMenuItem( menuName );
-				expect( deletedTestMenuItem ).toBeNull();
-			}
-		);
-	} );
-} );
diff --git a/packages/e2e-tests/specs/local/demo.test.js b/packages/e2e-tests/specs/local/demo.test.js
deleted file mode 100644
index f3a1433d720888..00000000000000
--- a/packages/e2e-tests/specs/local/demo.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createEmbeddingMatcher,
-	createJSONResponse,
-	createNewPost,
-	setUpResponseMocking,
-	visitAdminPage,
-} from '@wordpress/e2e-test-utils';
-
-const MOCK_VIMEO_RESPONSE = {
-	url: 'https://vimeo.com/22439234',
-	html: '<iframe width="16" height="9"></iframe>',
-	type: 'video',
-	provider_name: 'Vimeo',
-	provider_url: 'https://vimeo.com',
-	version: '1.0',
-};
-
-describe( 'new editor state', () => {
-	beforeAll( async () => {
-		// First, make sure that the block editor is properly configured.
-		await createNewPost();
-
-		await setUpResponseMocking( [
-			{
-				match: createEmbeddingMatcher( 'https://vimeo.com/22439234' ),
-				onRequestMatch: createJSONResponse( MOCK_VIMEO_RESPONSE ),
-			},
-		] );
-
-		await Promise.all( [
-			visitAdminPage( 'post-new.php', 'gutenberg-demo' ),
-			page.waitForNavigation( { waitUntil: 'networkidle0' } ),
-		] );
-	} );
-
-	it( 'content should load, making the post dirty', async () => {
-		const isDirty = await page.evaluate( () => {
-			const { select } = window.wp.data;
-			return select( 'core/editor' ).isEditedPostDirty();
-		} );
-		expect( isDirty ).toBeTruthy();
-
-		await page.waitForSelector( 'button.editor-post-save-draft' );
-
-		expect( await page.$( 'button.editor-post-save-draft' ) ).toBeTruthy();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/performance/.gitignore b/packages/e2e-tests/specs/performance/.gitignore
deleted file mode 100644
index a6c57f5fb2ffba..00000000000000
--- a/packages/e2e-tests/specs/performance/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-*.json
diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
deleted file mode 100644
index 933b4973fb055e..00000000000000
--- a/packages/e2e-tests/specs/performance/post-editor.test.js
+++ /dev/null
@@ -1,294 +0,0 @@
-/**
- * External dependencies
- */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
-
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	saveDraft,
-	insertBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	openListView,
-	closeListView,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import {
-	readFile,
-	deleteFile,
-	getTypingEventDurations,
-	getClickEventDurations,
-	getHoverEventDurations,
-	getSelectionEventDurations,
-	getLoadingDurations,
-} from './utils';
-
-jest.setTimeout( 1000000 );
-
-describe( 'Post Editor Performance', () => {
-	const results = {
-		serverResponse: [],
-		firstPaint: [],
-		domContentLoaded: [],
-		loaded: [],
-		firstContentfulPaint: [],
-		firstBlock: [],
-		type: [],
-		focus: [],
-		listViewOpen: [],
-		inserterOpen: [],
-		inserterHover: [],
-		inserterSearch: [],
-	};
-	const traceFile = __dirname + '/trace.json';
-	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 saveDraft();
-	} );
-
-	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-		deleteFile( traceFile );
-	} );
-
-	beforeEach( async () => {
-		// Disable auto-save to avoid impacting the metrics.
-		await page.evaluate( () => {
-			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
-				autosaveInterval: 100000000000,
-				localAutosaveInterval: 100000000000,
-			} );
-		} );
-	} );
-
-	it( 'Loading', async () => {
-		// Measuring loading time.
-		let i = 5;
-		while ( i-- ) {
-			await page.reload();
-			await page.waitForSelector( '.wp-block' );
-			const {
-				serverResponse,
-				firstPaint,
-				domContentLoaded,
-				loaded,
-				firstContentfulPaint,
-				firstBlock,
-			} = await getLoadingDurations();
-
-			results.serverResponse.push( serverResponse );
-			results.firstPaint.push( firstPaint );
-			results.domContentLoaded.push( domContentLoaded );
-			results.loaded.push( loaded );
-			results.firstContentfulPaint.push( firstContentfulPaint );
-			results.firstBlock.push( firstBlock );
-		}
-	} );
-
-	it( 'Typing', async () => {
-		// Measuring typing performance.
-		await insertBlock( 'Paragraph' );
-		let i = 20;
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		while ( i-- ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// The timeout should be big enough to allow all async tasks tor run.
-			// And also to allow Rich Text to mark the change as persistent.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 2000 );
-			await page.keyboard.type( 'x' );
-		}
-		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.type.push(
-					keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
-				);
-			}
-		}
-	} );
-
-	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 );
-		} );
-		const paragraphs = await page.$$( '.wp-block' );
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		await paragraphs[ 0 ].click();
-		for ( let j = 1; j <= 10; j++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 1000 );
-			await paragraphs[ j ].click();
-		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [ focusEvents ] = getSelectionEventDurations( traceResults );
-		results.focus = focusEvents;
-	} );
-
-	it( 'Opening persistent list view', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
-		for ( let j = 0; j < 10; j++ ) {
-			await page.tracing.start( {
-				path: traceFile,
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
-			} );
-			await openListView();
-			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
-			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
-			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
-				results.listViewOpen.push( mouseClickEvents[ k ] );
-			}
-			await closeListView();
-		}
-	} );
-
-	it( 'Opening the inserter', async () => {
-		// Measure time to open inserter.
-		await page.waitForSelector( '.edit-post-layout' );
-		for ( let j = 0; j < 10; j++ ) {
-			await page.tracing.start( {
-				path: traceFile,
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
-			} );
-			await openGlobalBlockInserter();
-			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
-			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
-			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
-				results.inserterOpen.push( mouseClickEvents[ k ] );
-			}
-			await closeGlobalBlockInserter();
-		}
-	} );
-
-	it( 'Searching the inserter', async () => {
-		function sum( arr ) {
-			return arr.reduce( ( a, b ) => a + b, 0 );
-		}
-
-		// Measure time to search the inserter and get results.
-		await openGlobalBlockInserter();
-		for ( let j = 0; j < 10; j++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 500 );
-			await page.tracing.start( {
-				path: traceFile,
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
-			} );
-			await page.keyboard.type( 'p' );
-			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
-			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-				getTypingEventDurations( traceResults );
-			if (
-				keyDownEvents.length === keyPressEvents.length &&
-				keyPressEvents.length === keyUpEvents.length
-			) {
-				results.inserterSearch.push(
-					sum( keyDownEvents ) +
-						sum( keyPressEvents ) +
-						sum( keyUpEvents )
-				);
-			}
-			await page.keyboard.press( 'Backspace' );
-		}
-		await closeGlobalBlockInserter();
-	} );
-
-	it( 'Hovering Inserter Items', async () => {
-		// Measure inserter hover performance.
-		const paragraphBlockItem =
-			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
-		const headingBlockItem =
-			'.block-editor-inserter__menu .editor-block-list-item-heading';
-		await openGlobalBlockInserter();
-		await page.waitForSelector( paragraphBlockItem );
-		await page.hover( paragraphBlockItem );
-		await page.hover( headingBlockItem );
-		for ( let j = 0; j < 10; j++ ) {
-			// Wait for the browser to be idle before starting the monitoring.
-			// eslint-disable-next-line no-restricted-syntax
-			await page.waitForTimeout( 200 );
-			await page.tracing.start( {
-				path: traceFile,
-				screenshots: false,
-				categories: [ 'devtools.timeline' ],
-			} );
-			await page.hover( paragraphBlockItem );
-			await page.hover( headingBlockItem );
-			await page.tracing.stop();
-
-			traceResults = JSON.parse( readFile( traceFile ) );
-			const [ mouseOverEvents, mouseOutEvents ] =
-				getHoverEventDurations( traceResults );
-			for ( let k = 0; k < mouseOverEvents.length; k++ ) {
-				results.inserterHover.push(
-					mouseOverEvents[ k ] + mouseOutEvents[ k ]
-				);
-			}
-		}
-		await closeGlobalBlockInserter();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
deleted file mode 100644
index 3b7774ac57935f..00000000000000
--- a/packages/e2e-tests/specs/performance/site-editor.test.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/**
- * External dependencies
- */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
-
-/**
- * WordPress dependencies
- */
-import {
-	activateTheme,
-	canvas,
-	createNewPost,
-	visitSiteEditor,
-	saveDraft,
-	insertBlock,
-	deleteAllTemplates,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import {
-	readFile,
-	deleteFile,
-	getTypingEventDurations,
-	getLoadingDurations,
-} from './utils';
-
-jest.setTimeout( 1000000 );
-
-describe( 'Site Editor Performance', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'Loading', async () => {
-		const results = {
-			serverResponse: [],
-			firstPaint: [],
-			domContentLoaded: [],
-			loaded: [],
-			firstContentfulPaint: [],
-			firstBlock: [],
-			type: [],
-			focus: [],
-			inserterOpen: [],
-			inserterHover: [],
-			inserterSearch: [],
-			listViewOpen: [],
-		};
-
-		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
-		);
-
-		await createNewPost( { postType: 'page' } );
-		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 saveDraft();
-
-		const id = await page.evaluate( () =>
-			new URL( document.location ).searchParams.get( 'post' )
-		);
-
-		await visitSiteEditor( { postId: id, postType: 'page' } );
-
-		let i = 3;
-
-		// Measuring loading time.
-		while ( i-- ) {
-			await page.reload();
-			await page.waitForSelector( '.edit-site-visual-editor', {
-				timeout: 120000,
-			} );
-			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
-			const {
-				serverResponse,
-				firstPaint,
-				domContentLoaded,
-				loaded,
-				firstContentfulPaint,
-				firstBlock,
-			} = await getLoadingDurations();
-
-			results.serverResponse.push( serverResponse );
-			results.firstPaint.push( firstPaint );
-			results.domContentLoaded.push( domContentLoaded );
-			results.loaded.push( loaded );
-			results.firstContentfulPaint.push( firstContentfulPaint );
-			results.firstBlock.push( firstBlock );
-		}
-
-		// Measuring typing performance inside the post content.
-		await canvas().waitForSelector(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
-		await canvas().click(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
-		await insertBlock( 'Paragraph' );
-		i = 200;
-		const traceFile = __dirname + '/trace.json';
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		while ( i-- ) {
-			await page.keyboard.type( 'x' );
-		}
-		await page.tracing.stop();
-		const traceResults = JSON.parse( readFile( traceFile ) );
-		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-			getTypingEventDurations( traceResults );
-
-		for ( let j = 0; j < keyDownEvents.length; j++ ) {
-			results.type.push(
-				keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
-			);
-		}
-
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-
-		deleteFile( traceFile );
-
-		expect( true ).toBe( true );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/performance/utils.js b/packages/e2e-tests/specs/performance/utils.js
deleted file mode 100644
index 1ffee009827ac4..00000000000000
--- a/packages/e2e-tests/specs/performance/utils.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import { existsSync, readFileSync, unlinkSync } from 'fs';
-
-export function readFile( filePath ) {
-	return existsSync( filePath )
-		? readFileSync( filePath, 'utf8' ).trim()
-		: '';
-}
-
-export function deleteFile( filePath ) {
-	if ( existsSync( filePath ) ) {
-		unlinkSync( filePath );
-	}
-}
-
-function isEvent( item ) {
-	return (
-		item.cat === 'devtools.timeline' &&
-		item.name === 'EventDispatch' &&
-		item.dur &&
-		item.args &&
-		item.args.data
-	);
-}
-
-function isKeyDownEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keydown';
-}
-
-function isKeyPressEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keypress';
-}
-
-function isKeyUpEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'keyup';
-}
-
-function isFocusEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'focus';
-}
-
-function isClickEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'click';
-}
-
-function isMouseOverEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'mouseover';
-}
-
-function isMouseOutEvent( item ) {
-	return isEvent( item ) && item.args.data.type === 'mouseout';
-}
-
-function getEventDurationsForType( trace, filterFunction ) {
-	return trace.traceEvents
-		.filter( filterFunction )
-		.map( ( item ) => item.dur / 1000 );
-}
-
-export function getTypingEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isKeyDownEvent ),
-		getEventDurationsForType( trace, isKeyPressEvent ),
-		getEventDurationsForType( trace, isKeyUpEvent ),
-	];
-}
-
-export function getSelectionEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isFocusEvent ) ];
-}
-
-export function getClickEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isClickEvent ) ];
-}
-
-export function getHoverEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isMouseOverEvent ),
-		getEventDurationsForType( trace, isMouseOutEvent ),
-	];
-}
-
-export async function getLoadingDurations() {
-	return await page.evaluate( () => {
-		const [
-			{
-				requestStart,
-				responseStart,
-				responseEnd,
-				domContentLoadedEventEnd,
-				loadEventEnd,
-			},
-		] = performance.getEntriesByType( 'navigation' );
-		const paintTimings = performance.getEntriesByType( 'paint' );
-		return {
-			// Server side metric.
-			serverResponse: responseStart - requestStart,
-			// For client side metrics, consider the end of the response (the
-			// browser receives the HTML) as the start time (0).
-			firstPaint:
-				paintTimings.find( ( { name } ) => name === 'first-paint' )
-					.startTime - responseEnd,
-			domContentLoaded: domContentLoadedEventEnd - responseEnd,
-			loaded: loadEventEnd - responseEnd,
-			firstContentfulPaint:
-				paintTimings.find(
-					( { name } ) => name === 'first-contentful-paint'
-				).startTime - responseEnd,
-			// This is evaluated right after Puppeteer found the block selector.
-			firstBlock: performance.now() - responseEnd,
-		};
-	} );
-}
diff --git a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js b/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
deleted file mode 100644
index bcc81670ce8f0c..00000000000000
--- a/packages/e2e-tests/specs/site-editor/global-styles-sidebar.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	visitSiteEditor,
-	toggleGlobalStyles,
-	openGlobalStylesPanel,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Global styles sidebar', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await Promise.all( [
-			deleteAllTemplates( 'wp_template' ),
-			deleteAllTemplates( 'wp_template_part' ),
-		] );
-	} );
-	afterAll( async () => {
-		await Promise.all( [
-			deleteAllTemplates( 'wp_template' ),
-			deleteAllTemplates( 'wp_template_part' ),
-		] );
-		await activateTheme( 'twentytwentyone' );
-	} );
-	beforeEach( async () => {
-		await visitSiteEditor();
-	} );
-	describe( 'blocks list', () => {
-		it( 'should filter results properly', async () => {
-			await toggleGlobalStyles();
-			await openGlobalStylesPanel( 'Blocks' );
-			await page.focus( '.edit-site-block-types-search input' );
-			await page.keyboard.type( 'heading' );
-			const results = await page.$$(
-				'.edit-site-block-types-item-list div[role="listitem"]'
-			);
-			// Matches both Heading and Table of Contents blocks. (The latter contains "heading" in its description.)
-			expect( results.length ).toEqual( 2 );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js
deleted file mode 100644
index 18af53555216af..00000000000000
--- a/packages/e2e-tests/specs/site-editor/multi-entity-editing.test.js
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	publishPost,
-	deleteAllTemplates,
-	activateTheme,
-	canvas,
-	openDocumentSettingsSidebar,
-	pressKeyWithModifier,
-	selectBlockByClientId,
-	visitSiteEditor,
-	clickSiteEditorMenuItem,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
-} from '@wordpress/e2e-test-utils';
-
-const clickTemplateItem = async ( menus, itemName ) => {
-	await openSiteEditorNavigationPanel();
-	await navigateSiteEditorBackToRoot();
-	await siteEditorNavigateSequence( menus );
-	await clickSiteEditorMenuItem( itemName );
-};
-
-const createTemplatePart = async (
-	templatePartName = 'test-template-part',
-	isNested = false
-) => {
-	// Create new template part.
-	await insertBlock( 'Template Part' );
-	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "New template part")]'
-	);
-	await createNewButton.click();
-	await page.waitForSelector(
-		isNested
-			? '.wp-block-template-part .wp-block-template-part.block-editor-block-list__layout'
-			: '.wp-block-template-part.block-editor-block-list__layout'
-	);
-	await openDocumentSettingsSidebar();
-
-	const advancedPanelXPath = `//div[contains(@class,"interface-interface-skeleton__sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"Advanced")]`;
-	const advancedPanel = await page.waitForXPath( advancedPanelXPath );
-	await advancedPanel.click();
-
-	const nameInputXPath = `${ advancedPanelXPath }/ancestor::div[contains(@class, "components-panel__body")]//div[contains(@class,"components-base-control__field")]//label[contains(text(), "Title")]/following-sibling::input`;
-	const nameInput = await page.waitForXPath( nameInputXPath );
-	await nameInput.click();
-
-	// Select all of the text in the title field.
-	await pressKeyWithModifier( 'primary', 'a' );
-
-	// Give the reusable block a title.
-	await page.keyboard.type( templatePartName );
-};
-
-const editTemplatePart = async ( textToAdd, isNested = false ) => {
-	await page.click(
-		`${
-			isNested
-				? '.wp-block-template-part .wp-block-template-part'
-				: '.wp-block-template-part'
-		} .block-editor-button-block-appender`
-	);
-	await page.click( '.editor-block-list-item-paragraph' );
-	for ( const text of textToAdd ) {
-		await page.keyboard.type( text );
-		await page.keyboard.press( 'Enter' );
-	}
-};
-
-const saveAllEntities = async () => {
-	if ( await openEntitySavePanel() ) {
-		await page.click( 'button.editor-entities-saved-states__save-button' );
-	}
-};
-
-const openEntitySavePanel = async () => {
-	// Open the entity save panel if it is not already open.
-	try {
-		await page.waitForSelector( '.entities-saved-states__panel', {
-			timeout: 500,
-		} );
-	} catch {
-		try {
-			await page.click(
-				'.edit-site-save-button__button[aria-disabled=false]',
-				{ timeout: 500 }
-			);
-		} catch {
-			try {
-				await page.click(
-					'.editor-post-publish-button__button.has-changes-dot',
-					{ timeout: 500 }
-				);
-			} catch {
-				return false; // Not dirty because the button is disabled.
-			}
-		}
-		await page.waitForSelector( '.entities-saved-states__panel' );
-	}
-	// If we made it this far, the panel is opened.
-
-	return true;
-};
-
-const isEntityDirty = async ( name ) => {
-	const isOpen = await openEntitySavePanel();
-	if ( ! isOpen ) {
-		return false;
-	}
-	try {
-		await page.waitForXPath(
-			`//label[@class="components-checkbox-control__label"]//strong[contains(text(),"${ name }")]`,
-			{ timeout: 1000 }
-		);
-		return true;
-	} catch {}
-	return false;
-};
-
-const removeErrorMocks = () => {
-	// TODO: Add back console mocks when
-	// https://github.com/WordPress/gutenberg/issues/17355 is fixed.
-	/* eslint-disable no-console */
-	console.warn.mockReset();
-	console.error.mockReset();
-	console.info.mockReset();
-	/* eslint-enable no-console */
-};
-
-describe( 'Multi-entity editor states', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await visitSiteEditor();
-		expect( await openEntitySavePanel() ).toBe( false );
-	} );
-
-	// Skip reason: This should be rewritten to use other methods to switching to different templates.
-	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-
-		// Wait for blocks to load.
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		// Switch back and make sure it is still clean.
-		await clickTemplateItem( 'Templates', 'Index' );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		removeErrorMocks();
-	} );
-
-	describe( 'Multi-entity edit', () => {
-		const templatePartName = 'Test Template Part Name Edit';
-		const nestedTPName = 'Test Nested Template Part Name Edit';
-		const templateName = 'Custom Template';
-
-		beforeAll( async () => {
-			await deleteAllTemplates( 'wp_template' );
-			await deleteAllTemplates( 'wp_template_part' );
-			await createNewPost( {
-				postType: 'wp_template',
-				title: templateName,
-			} );
-			await publishPost();
-			await createTemplatePart( templatePartName );
-			await editTemplatePart( [
-				'Default template part test text.',
-				'Second paragraph test.',
-			] );
-			await createTemplatePart( nestedTPName, true );
-			await editTemplatePart(
-				[ 'Nested Template Part Text.', 'Second Nested test.' ],
-				true
-			);
-			await saveAllEntities();
-			await visitSiteEditor();
-
-			// Wait for site editor to load.
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
-
-			// Our custom template shows up in the "Templates > General" menu; let's use it.
-			await clickTemplateItem(
-				[ 'Templates', 'General templates' ],
-				templateName
-			);
-			await page.waitForXPath(
-				`//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
-			);
-
-			removeErrorMocks();
-		} );
-
-		const saveAndWaitResponse = async () => {
-			await Promise.all( [
-				saveAllEntities(),
-
-				// Wait for the save request and the subsequent query to be
-				// fulfilled - both are requests made to /index.php route.
-				// Without that, clicked elements can lose focus sometimes
-				// when the response is received.
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'POST'
-					);
-				} ),
-
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'GET'
-					);
-				} ),
-			] );
-			removeErrorMocks();
-		};
-
-		it.skip( 'should only dirty the parent entity when editing the parent', async () => {
-			// Clear selection so that the block is not added to the template part.
-			await insertBlock( 'Paragraph' );
-
-			// Add changes to the main parent entity.
-			await page.keyboard.type( 'Test.' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( true );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the child when editing the child', async () => {
-			// Select parent TP to unlock selecting content.
-			await canvas().click( '.wp-block-template-part' );
-			await canvas().click(
-				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Some more test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( true );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the nested entity when editing the nested entity', async () => {
-			// Select parent TP to unlock selecting child.
-			await canvas().click( '.wp-block-template-part' );
-			// Select child TP to unlock selecting content.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part'
-			);
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Nested test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should not allow selecting template part content without parent selected', async () => {
-			// Unselect blocks.
-			await selectBlockByClientId();
-			// Try to select a child block of a template part.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-			expect( selectedBlock?.name ).toBe( 'core/template-part' );
-		} );
-	} );
-} );
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
deleted file mode 100644
index 5f70bb21183d57..00000000000000
--- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
+++ /dev/null
@@ -1,331 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	disablePrePublishChecks,
-	getOption,
-	insertBlock,
-	publishPost,
-	setOption,
-	trashAllPosts,
-	activateTheme,
-	clickButton,
-	createReusableBlock,
-	visitSiteEditor,
-	deleteAllTemplates,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Multi-entity save flow', () => {
-	// Selectors - usable between Post/Site editors.
-	const checkedBoxSelector = '.components-checkbox-control__checked';
-	const checkboxInputSelector = '.components-checkbox-control__input';
-	const entitiesSaveSelector = '.editor-entities-saved-states__save-button';
-	const savePanelSelector = '.entities-saved-states__panel';
-	const closePanelButtonSelector =
-		'.editor-post-publish-panel__header-cancel-button button:not(:disabled)';
-
-	// Reusable assertions across Post/Site editors.
-	const assertAllBoxesChecked = async () => {
-		const checkedBoxes = await page.$$( checkedBoxSelector );
-		const checkboxInputs = await page.$$( checkboxInputSelector );
-		expect( checkedBoxes.length - checkboxInputs.length ).toBe( 0 );
-	};
-	const assertExistence = async ( selector, shouldBePresent ) => {
-		const element = await page.$( selector );
-		if ( shouldBePresent ) {
-			expect( element ).not.toBeNull();
-		} else {
-			expect( element ).toBeNull();
-		}
-	};
-
-	let originalSiteTitle, originalBlogDescription;
-
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await trashAllPosts( 'wp_block' );
-
-		// Get the current Site Title and Site Tagline, so that we can reset
-		// them back to the original values once the test suite has finished.
-		originalSiteTitle = await getOption( 'blogname' );
-		originalBlogDescription = await getOption( 'blogdescription' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-
-		// Reset the Site Title and Site Tagline back to their original values.
-		await setOption( 'blogname', originalSiteTitle );
-		await setOption( 'blogdescription', originalBlogDescription );
-	} );
-
-	describe( 'Post Editor', () => {
-		// Selectors - Post editor specific.
-		const draftSavedSelector = '.editor-post-saved-state.is-saved';
-		const multiSaveSelector =
-			'.editor-post-publish-button__button.has-changes-dot';
-		const savePostSelector = '.editor-post-publish-button__button';
-		const enabledSavePostSelector = `${ savePostSelector }[aria-disabled=false]`;
-		const publishA11ySelector =
-			'.edit-post-layout__toggle-publish-panel-button';
-		const saveA11ySelector =
-			'.edit-post-layout__toggle-entities-saved-states-panel-button';
-		const publishPanelSelector = '.editor-post-publish-panel';
-
-		// Reusable assertions inside Post editor.
-		const assertMultiSaveEnabled = async () => {
-			const multiSaveButton = await page.waitForSelector(
-				multiSaveSelector
-			);
-			expect( multiSaveButton ).not.toBeNull();
-		};
-		const assertMultiSaveDisabled = async () => {
-			const multiSaveButton = await page.waitForSelector(
-				multiSaveSelector,
-				{ hidden: true }
-			);
-			expect( multiSaveButton ).toBeNull();
-		};
-
-		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 page.keyboard.type( 'Test Post...' );
-			await page.keyboard.press( 'Enter' );
-
-			// Should not trigger multi-entity save button with only post edited.
-			await assertMultiSaveDisabled();
-
-			// Should only have publish panel a11y button active with only post edited.
-			await assertExistence( publishA11ySelector, true );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( publishPanelSelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// 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 page.keyboard.type( 'Oh!' );
-
-			// Should trigger multi-entity save button once template part edited.
-			await assertMultiSaveEnabled();
-
-			// Should only have save panel a11y button active after child entities edited.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, true );
-			await assertExistence( publishPanelSelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// Opening panel has boxes checked by default.
-			await page.click( savePostSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
-
-			// Should not show other panels (or their a11y buttons) while save panel opened.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( publishPanelSelector, false );
-
-			// Publish panel should open after saving.
-			await page.click( entitiesSaveSelector );
-			await page.waitForSelector( publishPanelSelector );
-
-			// No other panels (or their a11y buttons) should be present with publish panel open.
-			await assertExistence( publishA11ySelector, false );
-			await assertExistence( saveA11ySelector, false );
-			await assertExistence( savePanelSelector, false );
-
-			// Close publish panel.
-			const closePanelButton = await page.waitForSelector(
-				closePanelButtonSelector
-			);
-			await closePanelButton.click();
-
-			// Verify saving is disabled.
-			const draftSaved = await page.waitForSelector( draftSavedSelector );
-			expect( draftSaved ).not.toBeNull();
-			await assertMultiSaveDisabled();
-			await assertExistence( saveA11ySelector, false );
-
-			await publishPost();
-			// Wait for the success notice specifically for the published post.
-			// `publishPost()` has a similar check but it only checks for the
-			// existence of any snackbars. In this case, there's another "Site updated"
-			// notice which will be sufficient for that and thus creating a false-positive.
-			await page.waitForXPath(
-				'//*[@id="a11y-speak-polite"][contains(text(), "Post published")]'
-			);
-
-			// Unselect the blocks to avoid clicking the block toolbar.
-			await page.evaluate( () => {
-				wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-			} );
-
-			// Update the post.
-			await page.click( '.editor-post-title' );
-			await page.keyboard.type( '...more title!' );
-
-			// Verify update button is enabled.
-			const enabledSaveButton = await page.waitForSelector(
-				enabledSavePostSelector
-			);
-			expect( enabledSaveButton ).not.toBeNull();
-			// Verify multi-entity saving not enabled.
-			await assertMultiSaveDisabled();
-			await assertExistence( saveA11ySelector, false );
-
-			// Update reusable block again.
-			await page.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 page.keyboard.type( 'R!' );
-
-			// Multi-entity saving should be enabled.
-			await assertMultiSaveEnabled();
-			await assertExistence( saveA11ySelector, true );
-		} );
-
-		it( 'Site blocks should save individually', async () => {
-			await createNewPost();
-			await disablePrePublishChecks();
-
-			await insertBlock( 'Site Title' );
-			// Ensure title is retrieved before typing.
-			await page.waitForXPath(
-				`//a[contains(text(), "${ originalSiteTitle }")]`
-			);
-			const editableSiteTitleSelector =
-				'.wp-block-site-title a[contenteditable="true"]';
-			await page.waitForSelector( editableSiteTitleSelector );
-			await page.focus( editableSiteTitleSelector );
-			await page.keyboard.type( '...' );
-
-			await insertBlock( 'Site Tagline' );
-			// Wait for the placeholder.
-			await page.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 page.keyboard.type( 'Just another WordPress site' );
-
-			await clickButton( 'Publish' );
-			await page.waitForSelector( savePanelSelector );
-			let checkboxInputs = await page.$$( checkboxInputSelector );
-			expect( checkboxInputs ).toHaveLength( 3 );
-
-			await checkboxInputs[ 1 ].click();
-			await page.click( entitiesSaveSelector );
-
-			// Wait for the snackbar notice that the post has been published.
-			await page.waitForSelector( '.components-snackbar' );
-
-			await clickButton( 'Update…' );
-			await page.waitForSelector( savePanelSelector );
-
-			await page.waitForSelector( checkboxInputSelector );
-			checkboxInputs = await page.$$( checkboxInputSelector );
-
-			expect( checkboxInputs ).toHaveLength( 1 );
-		} );
-	} );
-
-	describe( 'Site Editor', () => {
-		// Selectors - Site editor specific.
-		const saveSiteSelector = '.edit-site-save-button__button';
-		const activeSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=false]`;
-		const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
-		const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
-
-		const saveAllChanges = async () => {
-			// Clicking button should open panel with boxes checked.
-			await page.click( activeSaveSiteSelector );
-			await page.waitForSelector( savePanelSelector );
-			await assertAllBoxesChecked();
-
-			// Save a11y button should not be present with save panel open.
-			await assertExistence( saveA11ySelector, false );
-
-			// Saving should result in items being saved.
-			await page.click( entitiesSaveSelector );
-		};
-
-		it( 'Save flow should work as expected', async () => {
-			// Navigate to site editor.
-			await visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-
-			// Select the header template part via list view.
-			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
-			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]'
-			);
-			headerTemplatePartListViewButton.click();
-			await page.click( 'button[aria-label="Close List View Sidebar"]' );
-
-			// Insert something to dirty the editor.
-			await insertBlock( 'Paragraph' );
-
-			const enabledButton = await page.waitForSelector(
-				activeSaveSiteSelector
-			);
-
-			// Should be enabled after edits.
-			expect( enabledButton ).not.toBeNull();
-
-			// Save a11y button should be present.
-			await assertExistence( saveA11ySelector, true );
-
-			// Save all changes.
-			await saveAllChanges();
-
-			const disabledButton = await page.waitForSelector(
-				disabledSaveSiteSelector
-			);
-			expect( disabledButton ).not.toBeNull();
-		} );
-
-		it( 'Save flow should allow re-saving after changing the same block attribute', async () => {
-			// Navigate to site editor.
-			await visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-			} );
-
-			// Insert a paragraph at the bottom.
-			await insertBlock( 'Paragraph' );
-
-			// Open the block settings.
-			await page.click( 'button[aria-label="Settings"]' );
-
-			// Change the font size
-			await page.click(
-				'.components-font-size-picker__controls button[aria-label="Small"]'
-			);
-
-			// Save all changes.
-			await saveAllChanges();
-
-			// Change the font size
-			await page.click(
-				'.components-font-size-picker__controls button[aria-label="Medium"]'
-			);
-
-			// Assert that the save button has been re-enabled.
-			const saveButton = await page.waitForSelector(
-				activeSaveSiteSelector
-			);
-			expect( saveButton ).not.toBeNull();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js b/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
deleted file mode 100644
index 5ad50ff58b5542..00000000000000
--- a/packages/e2e-tests/specs/site-editor/settings-sidebar.test.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	getAllBlocks,
-	selectBlockByClientId,
-	insertBlock,
-	visitSiteEditor,
-} from '@wordpress/e2e-test-utils';
-
-async function toggleSidebar() {
-	await page.click(
-		'.edit-site-header-edit-mode__actions button[aria-label="Settings"]'
-	);
-}
-
-async function getActiveTabLabel() {
-	return await page.$eval(
-		'.edit-site-sidebar-edit-mode__panel-tab.is-active',
-		( element ) => element.getAttribute( 'aria-label' )
-	);
-}
-
-async function getTemplateCard() {
-	return {
-		title: await page.$eval(
-			'.edit-site-template-card__title',
-			( element ) => element.innerText
-		),
-		description: await page.$eval(
-			'.edit-site-template-card__description',
-			( element ) => element.innerText
-		),
-	};
-}
-
-describe( 'Settings sidebar', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-	beforeEach( async () => {
-		await visitSiteEditor();
-	} );
-
-	describe( 'Template tab', () => {
-		it( 'should open template tab by default if no block is selected', async () => {
-			await toggleSidebar();
-
-			expect( await getActiveTabLabel() ).toEqual(
-				'Template (selected)'
-			);
-		} );
-
-		it( "should show the currently selected template's title and description", async () => {
-			await toggleSidebar();
-
-			const templateCardBeforeNavigation = await getTemplateCard();
-			await visitSiteEditor( {
-				postId: 'emptytheme//singular',
-				postType: 'wp_template',
-			} );
-			const templateCardAfterNavigation = await getTemplateCard();
-
-			expect( templateCardBeforeNavigation ).toMatchObject( {
-				title: 'Index',
-				description: 'Displays posts.',
-			} );
-			expect( templateCardAfterNavigation ).toMatchObject( {
-				title: 'Singular',
-				description: 'Displays a single post or page.',
-			} );
-		} );
-	} );
-
-	describe( 'Block tab', () => {
-		it( 'should open block tab by default if a block is selected', async () => {
-			const allBlocks = await getAllBlocks();
-			await selectBlockByClientId( allBlocks[ 0 ].clientId );
-
-			await toggleSidebar();
-
-			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
-		} );
-	} );
-
-	describe( 'Tab switch based on selection', () => {
-		it( 'should switch to block tab if we select a block, when Template is selected', async () => {
-			await toggleSidebar();
-			expect( await getActiveTabLabel() ).toEqual(
-				'Template (selected)'
-			);
-			// By inserting the block is also selected.
-			await insertBlock( 'Heading' );
-			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
-		} );
-		it( 'should switch to Template tab when a block was selected and we select the Template', async () => {
-			await insertBlock( 'Heading' );
-			await toggleSidebar();
-			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
-			await page.evaluate( () => {
-				wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
-			} );
-			expect( await getActiveTabLabel() ).toEqual(
-				'Template (selected)'
-			);
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/site-editor-export.test.js b/packages/e2e-tests/specs/site-editor/site-editor-export.test.js
deleted file mode 100644
index cb457fffcfc0b6..00000000000000
--- a/packages/e2e-tests/specs/site-editor/site-editor-export.test.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import fs from 'fs';
-import path from 'path';
-import os from 'os';
-
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	visitSiteEditor,
-	clickOnMoreMenuItem,
-} from '@wordpress/e2e-test-utils';
-
-async function waitForFileExists( filePath, timeout = 10000 ) {
-	const start = Date.now();
-	while ( ! fs.existsSync( filePath ) ) {
-		// Puppeteer doesn't have an API for managing file downloads.
-		// We are using `waitForTimeout` to add delays between check of file existence.
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 1000 );
-		if ( Date.now() - start > timeout ) {
-			throw Error( 'waitForFileExists timeout' );
-		}
-	}
-}
-
-describe( 'Site Editor Templates Export', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	beforeEach( async () => {
-		await visitSiteEditor();
-	} );
-
-	it( 'clicking export should download emptytheme.zip file', async () => {
-		const directory = fs.mkdtempSync(
-			path.join( os.tmpdir(), 'test-edit-site-export-' )
-		);
-		await page._client.send( 'Page.setDownloadBehavior', {
-			behavior: 'allow',
-			downloadPath: directory,
-		} );
-
-		await clickOnMoreMenuItem( 'Export', 'site-editor' );
-		const filePath = path.join( directory, 'emptytheme.zip' );
-		await waitForFileExists( filePath );
-		expect( fs.existsSync( filePath ) ).toBe( true );
-		fs.unlinkSync( filePath );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
deleted file mode 100644
index bfd7b6b6a6c862..00000000000000
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ /dev/null
@@ -1,953 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalActivatePlugin as activatePlugin,
-	activateTheme,
-	clickBlockToolbarButton,
-	__experimentalDeactivatePlugin as deactivatePlugin,
-	showBlockToolbar,
-	visitAdminPage,
-	deleteAllWidgets,
-	pressKeyWithModifier,
-	__experimentalRest as rest,
-	openListView,
-	closeListView,
-	openGlobalBlockInserter,
-	searchForBlock,
-	closeGlobalBlockInserter,
-	setBrowserViewport,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { find, findAll } from 'puppeteer-testing-library';
-import { groupBy, mapValues } from 'lodash';
-
-describe( 'Widgets screen', () => {
-	beforeEach( async () => {
-		await visitWidgetsScreen();
-
-		// Disable welcome guide if it is enabled.
-		const isWelcomeGuideActive = await page.evaluate(
-			() =>
-				!! wp.data
-					.select( 'core/preferences' )
-					.get( 'core/edit-widgets', 'welcomeGuide' )
-		);
-		if ( isWelcomeGuideActive ) {
-			await page.evaluate( () =>
-				wp.data
-					.dispatch( 'core/preferences' )
-					.toggle( 'core/edit-widgets', 'welcomeGuide' )
-			);
-		}
-
-		// Wait for the widget areas to load.
-		await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-	} );
-
-	afterEach( async () => {
-		await deleteAllWidgets();
-	} );
-
-	beforeAll( async () => {
-		// TODO: Ideally we can bundle our test theme directly in the repo.
-		await activateTheme( 'twentytwenty' );
-		await deleteAllWidgets();
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	async function getBlockInGlobalInserter( blockName ) {
-		await openGlobalBlockInserter();
-
-		const blockLibrary = await find( {
-			role: 'region',
-			name: 'Block Library',
-		} );
-
-		// Check that there are categorizations in the inserter (#26329).
-		const categoryHeaders = await findAll(
-			{
-				role: 'heading',
-				level: 2,
-			},
-			{
-				root: blockLibrary,
-			}
-		);
-		expect( categoryHeaders.length > 0 ).toBe( true );
-
-		const searchBox = await find( {
-			role: 'searchbox',
-			name: 'Search for blocks and patterns',
-		} );
-		await searchBox.type( blockName );
-
-		await searchForBlock( blockName );
-
-		return await page.waitForXPath(
-			`//button//span[contains(text(), '${ blockName }')]`
-		);
-	}
-
-	async function expectInsertionPointIndicatorToBeBelowLastBlock(
-		widgetArea
-	) {
-		const childBlocks = await findAll(
-			{ selector: '[data-block]' },
-			{ root: widgetArea }
-		);
-		// The initial block appender also has the [data-block] property, adding to the count.
-		const lastBlock = childBlocks[ childBlocks.length - 2 ];
-		const lastBlockBoundingBox = await lastBlock.boundingBox();
-
-		const insertionPointIndicator = await page.$(
-			'.block-editor-block-list__insertion-point-indicator'
-		);
-		const insertionPointIndicatorBoundingBox =
-			await insertionPointIndicator.boundingBox();
-
-		expect(
-			insertionPointIndicatorBoundingBox.y > lastBlockBoundingBox.y
-		).toBe( true );
-	}
-
-	it.skip( 'Should insert content using the global inserter', async () => {
-		const updateButton = await find( {
-			role: 'button',
-			name: 'Update',
-		} );
-
-		// Update button should start out disabled.
-		expect(
-			await updateButton.evaluate( ( button ) => button.disabled )
-		).toBe( true );
-
-		const widgetAreas = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-		const [ firstWidgetArea, secondWidgetArea ] = widgetAreas;
-
-		let addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.hover();
-
-		// FIXME: The insertion point indicator is not showing when the widget area has no blocks.
-		// await expectInsertionPointIndicatorToBeBelowLastBlock(
-		// 	firstWidgetArea
-		// );
-
-		await addParagraphBlock.click();
-
-		// Adding content should enable the Update button.
-		expect(
-			await updateButton.evaluate( ( button ) => button.disabled )
-		).toBe( false );
-
-		let addedParagraphBlockInFirstWidgetArea = await find(
-			{
-				name: /^Empty block/,
-				selector: '[data-block][data-type="core/paragraph"]',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-
-		await addedParagraphBlockInFirstWidgetArea.focus();
-
-		await page.keyboard.type( 'First Paragraph' );
-
-		addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-
-		await expectInsertionPointIndicatorToBeBelowLastBlock(
-			firstWidgetArea
-		);
-		await addParagraphBlock.focus();
-		await addParagraphBlock.click();
-
-		addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
-		);
-		await addedParagraphBlockInFirstWidgetArea.focus();
-		await page.keyboard.type( 'Second Paragraph' );
-
-		const addShortCodeBlock = await getBlockInGlobalInserter( 'Shortcode' );
-		await addShortCodeBlock.click();
-
-		const shortCodeInput = await page.waitForSelector(
-			'textarea[aria-label="Shortcode text"]'
-		);
-		await shortCodeInput.focus();
-		// The famous Big Buck Bunny video.
-		await shortCodeInput.type(
-			'[video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"]'
-		);
-
-		// Add to the second widget area.
-		await secondWidgetArea.click();
-
-		addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.click();
-
-		const addedParagraphBlockInSecondWidgetArea = await secondWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
-		);
-		await addedParagraphBlockInSecondWidgetArea.focus();
-		await page.keyboard.type( 'Third Paragraph' );
-
-		await saveWidgets();
-
-		// The Update button should be disabled again after saving.
-		expect(
-			await updateButton.evaluate( ( button ) => button.disabled )
-		).toBe( true );
-
-		const serializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>
-		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>Second Paragraph</p>
-		</div></div>
-		<div class=\\"widget widget_block\\"><div class=\\"widget-content\\"><p><div style=\\"width: 580px;\\" class=\\"wp-video\\"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
-		<video class=\\"wp-video-shortcode\\" id=\\"video-0-1\\" width=\\"580\\" height=\\"326\\" preload=\\"metadata\\" controls=\\"controls\\"><source type=\\"video/mp4\\" src=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4?_=1\\" /><a href=\\"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\\">http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4</a></video></div></p>
-		</div></div>",
-		  "sidebar-2": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>Third Paragraph</p>
-		</div></div>",
-		}
-	` );
-	} );
-
-	it.skip( 'Should insert content using the inline inserter', async () => {
-		const [ firstWidgetArea ] = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-
-		// Scroll to the end of the first widget area.
-		await firstWidgetArea.evaluate( ( node ) =>
-			node.scrollIntoView( { block: 'end' } )
-		);
-
-		const firstWidgetAreaBoundingBox = await firstWidgetArea.boundingBox();
-
-		// Click near the end of the widget area to select it.
-		await page.mouse.click(
-			firstWidgetAreaBoundingBox.x + firstWidgetAreaBoundingBox.width / 2,
-			firstWidgetAreaBoundingBox.y +
-				firstWidgetAreaBoundingBox.height -
-				10
-		);
-
-		let inlineInserterButton = await find( {
-			role: 'combobox',
-			name: 'Add block',
-		} );
-		await inlineInserterButton.click();
-
-		let inlineQuickInserter = await find( {
-			role: 'listbox',
-			name: 'Blocks',
-		} );
-
-		const paragraphBlock = await find(
-			{
-				role: 'option',
-				name: 'Paragraph',
-			},
-			{
-				root: inlineQuickInserter,
-			}
-		);
-		await paragraphBlock.click();
-
-		const firstParagraphBlock = await find(
-			{
-				name: /^Empty block/,
-				selector: '[data-block][data-type="core/paragraph"]',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-
-		await firstParagraphBlock.focus();
-		await page.keyboard.type( 'First Paragraph' );
-
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second Paragraph' );
-
-		const secondParagraphBlock = await page.evaluateHandle(
-			() => document.activeElement
-		);
-		await expect( secondParagraphBlock ).not.toBeElement(
-			firstParagraphBlock
-		);
-
-		const secondParagraphBlockBoundingBox =
-			await secondParagraphBlock.boundingBox();
-
-		// Click outside the block to move the focus back to the widget area.
-		await page.mouse.click(
-			secondParagraphBlockBoundingBox.x +
-				firstWidgetAreaBoundingBox.width / 2,
-			secondParagraphBlockBoundingBox.y +
-				secondParagraphBlockBoundingBox.height +
-				10
-		);
-
-		// Hover above the last block to trigger the inline inserter between blocks.
-		await page.mouse.move(
-			secondParagraphBlockBoundingBox.x +
-				secondParagraphBlockBoundingBox.width / 2,
-			secondParagraphBlockBoundingBox.y - 10
-		);
-
-		// There will be 2 matches here.
-		// One is the in-between inserter,
-		// and the other one is the button block appender.
-		[ inlineInserterButton ] = await findAll( {
-			role: 'combobox',
-			name: 'Add block',
-		} );
-		await inlineInserterButton.click();
-
-		const inserterSearchBox = await find( {
-			role: 'searchbox',
-			name: 'Search for blocks and patterns',
-		} );
-		await expect( inserterSearchBox ).toHaveFocus();
-
-		await page.keyboard.type( 'Heading' );
-
-		inlineQuickInserter = await find( {
-			role: 'listbox',
-			name: 'Blocks',
-		} );
-		const headingBlockOption = await find(
-			{
-				role: 'option',
-				name: 'Heading',
-			},
-			{
-				root: inlineQuickInserter,
-			}
-		);
-		await headingBlockOption.click();
-
-		// Get the added heading block as second last block.
-		const addedHeadingBlock = await secondParagraphBlock.evaluateHandle(
-			( node ) => node.previousSibling
-		);
-
-		await expect( addedHeadingBlock ).toHaveFocus();
-
-		await page.keyboard.type( 'My Heading' );
-
-		await expect( addedHeadingBlock ).toMatchQuery( {
-			name: 'Block: Heading',
-			level: 2,
-			value: 'My Heading',
-		} );
-
-		await saveWidgets();
-		const serializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>
-		<div class=\\"widget widget_block\\"><div class=\\"widget-content\\">
-		<h2 id=\\"my-heading\\">My Heading</h2>
-		</div></div>
-		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>Second Paragraph</p>
-		</div></div>",
-		}
-	` );
-	} );
-
-	describe( 'Function widgets', () => {
-		async function addMarquee( nbExpectedMarquees ) {
-			const marqueeBlock = await getBlockInGlobalInserter(
-				'Marquee Greeting'
-			);
-			await marqueeBlock.click();
-			await page.waitForFunction(
-				( expectedMarquees ) => {
-					return (
-						document.querySelectorAll(
-							'[data-testid="marquee-greeting"]'
-						).length === expectedMarquees
-					);
-				},
-				{},
-				nbExpectedMarquees
-			);
-		}
-
-		async function deleteExistingMarquees() {
-			const widgetAreasHoldingMarqueeWidgets = await page.$x(
-				'//input[@data-testid="marquee-greeting"]/ancestor::div[@aria-label="Block: Widget Area"]'
-			);
-			for ( const widgetArea of widgetAreasHoldingMarqueeWidgets ) {
-				const closedPanelBody = await widgetArea.$(
-					'.components-panel__body:not(.is-opened)'
-				);
-				if ( closedPanelBody ) {
-					await closedPanelBody.focus();
-					await closedPanelBody.click();
-				}
-
-				const [ existingMarqueeWidgets ] = await widgetArea.$x(
-					'//input[@data-testid="marquee-greeting"]/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]'
-				);
-				if ( existingMarqueeWidgets ) {
-					await existingMarqueeWidgets.focus();
-					await pressKeyWithModifier( 'access', 'z' );
-				}
-			}
-		}
-
-		beforeAll( async () => {
-			await activatePlugin( 'gutenberg-test-marquee-widget' );
-		} );
-
-		beforeEach( async () => {
-			await deleteExistingMarquees();
-		} );
-
-		afterAll( async () => {
-			await deactivatePlugin( 'gutenberg-test-marquee-widget' );
-		} );
-
-		it( 'Should add and save the marquee widget', async () => {
-			await addMarquee( 1 );
-
-			// Use find because the input might not be visible at first.
-			const marqueeInput = await find( {
-				selector: '[data-testid="marquee-greeting"]',
-			} );
-			// Clear the input.
-			await marqueeInput.evaluate( ( input ) => {
-				input.value = '';
-			} );
-			await marqueeInput.type( 'Howdy' );
-
-			// The first marquee is saved after clicking the form save button.
-			const marqueeSaveButton = await marqueeInput.evaluateHandle(
-				( input ) =>
-					input
-						// Get the parent block element.
-						.closest( '[data-block]' )
-						// Get the save button.
-						.querySelector( 'button[type="submit"]' )
-			);
-			await marqueeSaveButton.click();
-
-			await saveWidgets();
-			let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
-
-			await page.reload();
-
-			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
-
-			await addMarquee( 2 );
-
-			const marqueeInputs = await page.$$(
-				'[data-testid="marquee-greeting"]'
-			);
-
-			expect( marqueeInputs ).toHaveLength( 2 );
-			await marqueeInputs[ 0 ].type( 'first ' );
-			await marqueeInputs[ 1 ].type( 'Second ' );
-
-			// No marquee should be changed without clicking on their "save" button.
-			// The second marquee shouldn't be stored as a widget.
-			// See #32978 for more info.
-			await saveWidgets();
-			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-						Object {
-						  "sidebar-1": "<marquee>Howdy</marquee>",
-						}
-					` );
-
-			await page.reload();
-			const marqueesAfter = await findAll( {
-				selector: '[data-testid="marquee-greeting"]',
-			} );
-			expect( marqueesAfter ).toHaveLength( 1 );
-		} );
-	} );
-
-	it.skip( 'Should duplicate the widgets', async () => {
-		let [ firstWidgetArea ] = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-
-		const addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.click();
-
-		let firstParagraphBlock = await find(
-			{
-				role: 'document',
-				name: /^Empty block/,
-			},
-			{ root: firstWidgetArea }
-		);
-		await firstParagraphBlock.focus();
-		await page.keyboard.type( 'First Paragraph' );
-
-		await saveWidgets();
-		await page.reload();
-		// Wait for the widget areas to load.
-		[ firstWidgetArea ] = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-
-		const initialSerializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( initialSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>",
-		}
-	` );
-
-		firstParagraphBlock = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"]'
-		);
-		await firstParagraphBlock.focus();
-
-		await showBlockToolbar();
-		await clickBlockToolbarButton( 'Options' );
-		const duplicateButton = await find( {
-			role: 'menuitem',
-			name: /^Duplicate/,
-		} );
-		await duplicateButton.click();
-
-		await page.waitForFunction(
-			( paragraph ) =>
-				paragraph.nextSibling &&
-				paragraph.nextSibling.matches( '[data-block]' ),
-			{},
-			firstParagraphBlock
-		);
-		const duplicatedParagraphBlock =
-			await firstParagraphBlock.evaluateHandle(
-				( paragraph ) => paragraph.nextSibling
-			);
-
-		const firstParagraphBlockClientId = await firstParagraphBlock.evaluate(
-			( node ) => node.dataset.block
-		);
-		const duplicatedParagraphBlockClientId =
-			await duplicatedParagraphBlock.evaluate(
-				( node ) => node.dataset.block
-			);
-
-		expect( firstParagraphBlockClientId ).not.toBe(
-			duplicatedParagraphBlockClientId
-		);
-		await expect( duplicatedParagraphBlock ).toMatchQuery( {
-			text: 'First Paragraph',
-		} );
-		await expect( duplicatedParagraphBlock ).toHaveFocus();
-
-		await saveWidgets();
-		const editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>
-		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>",
-		}
-	` );
-		expect( editedSerializedWidgetAreas[ 'sidebar-1' ] ).toBe(
-			[
-				initialSerializedWidgetAreas[ 'sidebar-1' ],
-				initialSerializedWidgetAreas[ 'sidebar-1' ],
-			].join( '\n' )
-		);
-	} );
-
-	it.skip( 'Should display legacy widgets', async () => {
-		// Get the default empty instance of a legacy search widget.
-		const { instance: defaultSearchInstance } = await rest( {
-			method: 'POST',
-			path: '/wp/v2/widget-types/search/encode',
-			data: { instance: {} },
-		} );
-
-		// Create a search widget in the first sidebar using the default instance.
-		await rest( {
-			method: 'POST',
-			path: '/wp/v2/widgets',
-			data: {
-				id_base: 'search',
-				sidebar: 'sidebar-1',
-				instance: defaultSearchInstance,
-			},
-		} );
-
-		await page.reload();
-
-		// Wait for the Legacy Widget block's preview iframe to load.
-		const frame = await new Promise( ( resolve ) => {
-			const checkFrame = async () => {
-				const frameElement = await page.$(
-					'iframe.wp-block-legacy-widget__edit-preview-iframe'
-				);
-				if ( frameElement ) {
-					page.off( 'frameattached', checkFrame );
-					page.off( 'framenavigated', checkFrame );
-					resolve( frameElement.contentFrame() );
-				}
-			};
-			page.on( 'frameattached', checkFrame );
-			page.on( 'framenavigated', checkFrame );
-		} );
-
-		// Expect to have search input.
-		await find(
-			{
-				role: 'searchbox',
-			},
-			{
-				page: frame,
-			}
-		);
-
-		// Focus the Legacy Widget block.
-		const legacyWidget = await find( {
-			role: 'document',
-			name: 'Block: Legacy Widget',
-		} );
-		await legacyWidget.focus();
-
-		// There should be a title at the top of the widget form.
-		const legacyWidgetName = await find(
-			{
-				role: 'heading',
-				level: 3,
-			},
-			{
-				root: legacyWidget,
-			}
-		);
-		expect( legacyWidgetName ).toMatchQuery( { text: 'Search' } );
-
-		// Update the widget form.
-		// TODO: Convert to find() API from puppeteer-testing-library.
-		const titleInput = await page.waitForSelector(
-			`#widget-search-1-title`
-		);
-		await titleInput.type( 'Search Title' );
-
-		// Switch to Navigation mode.
-		await page.keyboard.press( 'Escape' );
-
-		// Wait for the preview to update.
-		await frame.waitForNavigation();
-
-		// Expect to have search title.
-		await find(
-			{
-				role: 'heading',
-				name: 'Search Title',
-			},
-			{
-				page: frame,
-			}
-		);
-
-		await saveWidgets();
-		const serializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_search\\"><div class=\\"widget-content\\"><h2 class=\\"widget-title subheading heading-size-3\\">Search Title</h2><form role=\\"search\\"  method=\\"get\\" class=\\"search-form\\" action=\\"http://localhost:8889/\\">
-			<label for=\\"search-form-1\\">
-				<span class=\\"screen-reader-text\\">Search for:</span>
-				<input type=\\"search\\" id=\\"search-form-1\\" class=\\"search-field\\" placeholder=\\"Search &hellip;\\" value=\\"\\" name=\\"s\\" />
-			</label>
-			<input type=\\"submit\\" class=\\"search-submit\\" value=\\"Search\\" />
-		</form>
-		</div></div>",
-		}
-	` );
-	} );
-
-	it.skip( 'allows widgets to be moved between widget areas using the dropdown in the block toolbar', async () => {
-		const widgetAreas = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-		const [ firstWidgetArea, secondWidgetArea ] = widgetAreas;
-
-		// Insert a paragraph it should be in the first widget area.
-		const inserterParagraphBlock = await getBlockInGlobalInserter(
-			'Paragraph'
-		);
-		await inserterParagraphBlock.hover();
-		await inserterParagraphBlock.click();
-		const addedParagraphBlockInFirstWidgetArea = await find(
-			{
-				role: 'document',
-				name: /^Empty block/,
-			},
-			{ root: firstWidgetArea }
-		);
-		await addedParagraphBlockInFirstWidgetArea.focus();
-		await page.keyboard.type( 'First Paragraph' );
-
-		// Check that the block exists in the first widget area.
-		await find(
-			{
-				role: 'document',
-				name: 'Paragraph block',
-				value: 'First Paragraph',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-
-		// Move the block to the second widget area.
-		await showBlockToolbar();
-		await clickBlockToolbarButton( 'Move to widget area' );
-		const widgetAreaButton = await find( {
-			role: 'menuitemradio',
-			name: /^Footer #2/,
-		} );
-		await widgetAreaButton.click();
-
-		// Check that the block exists in the second widget area.
-		await find(
-			{
-				role: 'document',
-				name: 'Paragraph block',
-				value: 'First Paragraph',
-			},
-			{
-				root: secondWidgetArea,
-			}
-		);
-
-		// Assert that the serialized widget areas shows the block as in the second widget area.
-		await saveWidgets();
-		const serializedWidgetAreas2 = await getSerializedWidgetAreas();
-		expect( serializedWidgetAreas2 ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-2": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>",
-		}
-	` );
-	} );
-
-	it( 'Allows widget deletion to be undone', async () => {
-		const [ firstWidgetArea ] = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-
-		let addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.click();
-
-		let addedParagraphBlockInFirstWidgetArea = await find(
-			{
-				name: /^Empty block/,
-				selector: '[data-block][data-type="core/paragraph"]',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-		await addedParagraphBlockInFirstWidgetArea.focus();
-		await page.keyboard.type( 'First Paragraph' );
-
-		addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.click();
-
-		addedParagraphBlockInFirstWidgetArea = await firstWidgetArea.$(
-			'[data-block][data-type="core/paragraph"][aria-label^="Empty block"]'
-		);
-		await addedParagraphBlockInFirstWidgetArea.focus();
-		await page.keyboard.type( 'Second Paragraph' );
-
-		await saveWidgets();
-		await page.focus( '.block-editor-writing-flow' );
-
-		// Delete the last block and save again.
-		await pressKeyWithModifier( 'access', 'z' );
-		await saveWidgets();
-		// To do: clicking on the Snackbar causes focus loss.
-		await page.focus( '.block-editor-writing-flow' );
-
-		// Undo block deletion and save again.
-		await pressKeyWithModifier( 'primary', 'z' );
-		await saveWidgets();
-
-		// Reload the page to make sure changes were actually saved.
-		await page.reload();
-
-		const serializedWidgetAreas = await getSerializedWidgetAreas();
-		expect( serializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>First Paragraph</p>
-		</div></div>
-		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
-		<p>Second Paragraph</p>
-		</div></div>",
-		}
-	` );
-	} );
-
-	it( 'can toggle sidebar list view', async () => {
-		const widgetAreas = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-		await openListView();
-		const listItems = await page.$$(
-			'.edit-widgets-editor__list-view-panel .block-editor-list-view-leaf'
-		);
-		expect( listItems.length >= widgetAreas.length ).toEqual( true );
-		await closeListView();
-	} );
-
-	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38002.
-	it( 'allows blocks to be added on mobile viewports', async () => {
-		await setBrowserViewport( 'small' );
-		const [ firstWidgetArea ] = await findAll( {
-			role: 'document',
-			name: 'Block: Widget Area',
-		} );
-
-		const addParagraphBlock = await getBlockInGlobalInserter( 'Paragraph' );
-		await addParagraphBlock.click();
-
-		const addedParagraphBlockInFirstWidgetArea = await find(
-			{
-				name: /^Empty block/,
-				selector: '[data-block][data-type="core/paragraph"]',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-		await addedParagraphBlockInFirstWidgetArea.focus();
-		await page.keyboard.type( 'First Paragraph' );
-		const updatedParagraphBlockInFirstWidgetArea = await find(
-			{
-				name: 'Paragraph block',
-				value: 'First Paragraph',
-			},
-			{
-				root: firstWidgetArea,
-			}
-		);
-
-		expect( updatedParagraphBlockInFirstWidgetArea ).toBeTruthy();
-	} );
-} );
-
-/**
- * Visit the widgets screen via link clicking. The widgets screen currently
- * has different URLs during the integration to core.
- * We should be able to refactor it once it's fully merged into core.
- */
-async function visitWidgetsScreen() {
-	// Visit the Appearance page.
-	await visitAdminPage( 'themes.php' );
-
-	// Go to the Widgets page.
-	const appearanceMenu = await page.$( '#menu-appearance' );
-	await appearanceMenu.hover();
-	const widgetsLink = await find(
-		{ role: 'link', name: 'Widgets' },
-		{ root: appearanceMenu }
-	);
-	await Promise.all( [
-		page.waitForNavigation(),
-		// Click on the link no matter if it's visible or not.
-		widgetsLink.evaluate( ( link ) => {
-			link.click();
-		} ),
-	] );
-}
-
-async function saveWidgets() {
-	await closeListView();
-	await closeGlobalBlockInserter();
-	const updateButton = await find( {
-		role: 'button',
-		name: 'Update',
-	} );
-	await updateButton.click();
-
-	// Expect the "Widgets saved." snackbar to appear.
-	const savedSnackbarQuery = {
-		role: 'button',
-		name: 'Dismiss this notice',
-		text: 'Widgets saved.',
-	};
-	await expect( savedSnackbarQuery ).toBeFound();
-
-	// Close the snackbar.
-	const savedSnackbar = await find( savedSnackbarQuery );
-	await savedSnackbar.click();
-	// Expect focus not to be lost.
-	await expect(
-		await page.evaluate( () => document.activeElement.className )
-	).toBe( 'components-snackbar-list edit-widgets-notices__snackbar' );
-	await expect( savedSnackbarQuery ).not.toBeFound();
-}
-
-async function getSerializedWidgetAreas() {
-	const widgets = await rest( { path: '/wp/v2/widgets' } );
-
-	const serializedWidgetAreas = mapValues(
-		groupBy( widgets, 'sidebar' ),
-		( sidebarWidgets ) =>
-			sidebarWidgets
-				.map( ( widget ) => widget.rendered )
-				.filter( Boolean )
-				.join( '\n' )
-	);
-
-	return serializedWidgetAreas;
-}
diff --git a/packages/edit-navigation/.npmrc b/packages/edit-navigation/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/edit-navigation/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/edit-navigation/CHANGELOG.md b/packages/edit-navigation/CHANGELOG.md
deleted file mode 100644
index 660506373402d7..00000000000000
--- a/packages/edit-navigation/CHANGELOG.md
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-### Bug Fix
-
--   Removed unused `@wordpress/dom-ready`, `@wordpress/media-util`, `rememo` and `uuid` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
-
-### Internal
-
--   Removed `getStablePath` function. Please use `normalizePath` from `@wordpress/url` package instead ([#35992](https://github.com/WordPress/gutenberg/pull/35992)).
-
-## 1.0.0
-
--   Initial version of the package.
diff --git a/packages/edit-navigation/README.md b/packages/edit-navigation/README.md
deleted file mode 100644
index 0f0fd254bb966a..00000000000000
--- a/packages/edit-navigation/README.md
+++ /dev/null
@@ -1,188 +0,0 @@
-# Edit navigation
-
-Edit Navigation page module for WordPress - a Gutenberg-based UI for editing navigation menus.
-
-> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented.
-
-## Usage
-
-```js
-/**
- * WordPress dependencies
- */
-import { initialize } from '@wordpress/edit-navigation';
-
-/**
- * Internal dependencies
- */
-import blockEditorSettings from './block-editor-settings';
-
-initialize( '#navigation-editor-root', blockEditorSettings );
-```
-
-## Purpose
-
-By default, the Navigation Editor screen allows users to create and edit complex navigations using a block-based UI. The aim is to supersede [the current Menus screen](https://codex.wordpress.org/WordPress_Menu_User_Guide) by providing a superior experience whilst retaining backwards compatibility.
-
-The editing experience is provided as a block editor wrapper around the core functionality of the **Navigation _block_**. Features of the block are disabled/enhanced as necessary to provide an experience appropriate to editing a navigation outside of a Full Site Editing context.
-
-## Modes
-
-The Navigation Editor has two "modes" for _persistence_ ("saving" navigations) and _rendering_:
-
-1. **Classic (default)** - navigations are saved to the _existing_ (post type powered) Menus system and rendered using standard Walker classes.
-2. **Block-based** (opt _in_) - navigations continue to be _saved_ using the existing post type system, but:
-    - the [navigation is _rendered_ using the `core/navigation` block](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/lib/navigation.php#L228) (as opposed to Walker) to provide access to the full power of blocks (with some tradeoffs in terms of backwards compatibility).
-    - non-link blocks (anything that is not `core/navigation-link`) are saved as _blocks_.
-
-### Classic Mode
-
-In this mode, navigations created in the Navigation Editor are stored using the _existing Menu post type_ (`nav_menu_item`) system. As this method matches that used in the _existing_ Menus screen, there is a smooth upgrade path to using new Navigation Editor screen to edit navigations.
-
-Moreover, when the navigation is rendered on the front of the site the system continues to use [the classic Navigation "Walker" class](https://developer.wordpress.org/reference/classes/walker_nav_menu/), thereby ensuring the HTML markup remains the same when using a classic Theme.
-
-### Block-based Mode
-
-**Important**: block-based mode has been temporarily **_disabled_** until it becomes stable. So, if a theme declares support for the `block-nav-menus` feature it will not affect the frontend.
-
-If desired, themes are able to opt into [_rendering_ complete block-based menus](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/lib/navigation.php#L228) using the Navigation Editor. This allows for arbitrarily complex navigation block structures to be used in an existing theme whilst still ensuring the navigation data is still _saved_ to the existing (post type powered) Menus system.
-
-Themes can opt into this behaviour by declaring:
-
-```php
-add_theme_support( 'block-nav-menus' );
-```
-
-This unlocks significant additional capabilities in the Navigation Editor. For example, by default, [the Navigation Editor screen only allows _link_ (`core/navigation-link`) blocks to be inserted into a navigation](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js). When a theme opts into `block-nav-menus` however, users are able to add non-link blocks to a navigation using the Navigation Editor screen, including:
-
--   `core/navigation-link`.
--   `core/social`.
--   `core/search`.
-
-As these items are still saved to `nav_menu_items` this ensures if we ever revert to classic (Walker-based) rendering, these items will still be rendered (as blocks).
-
-## Backwards compatibility
-
-By design the underlying systems of the Nav Editor screen should be largely backwards compatible with the existing Menus screen. Therefore any navigations created or edited using the new Navigation Editor screen should continue to work in the existing classic Menus screen.
-
-Currently, the only exception to this would be any custom functionality added (by Plugins or otherwise) to the existing Menus screen would not be replicated in the new Navigation Editor screen. In this scenario there might be danger of some data loss.
-
-### Downgrading from block-based to classic Themes
-
-If the user switches to a theme that does not support block menus, or disables this functionality, ~non-link blocks are no longer rendered on the frontend~ [block-based links will still be rendered on the front end](https://github.com/WordPress/gutenberg/blob/7310097da5e16159b79e6e039a2cb3812cb9055e/lib/navigation.php#L104-L135). Care is also taken to ensure that users can still see their data on the existing Menus screen.
-
-## Block to Menu Item mapping
-
-The Navigation Editor needs to be able to map navigation items in two directions:
-
-1. `nav_menu_item`s to Blocks - when displaying an existing navigation.
-2. Blocks to `nav_menu_item`s - when _saving_ an navigation being editing in the Navigation screen.
-
-The Navigation Editor has two dedicated methods for handling mapping between these two expressions of the data:
-
--   [`menuItemToBlockAttributes()`](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/store/utils.js#L261-L313).
--   [`blockAttributestoMenuItem()`](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/store/utils.js#L184-L253)
-
-To understand these fully, one must appreciate that WordPress maps raw `nav_menu_item` posts to [Menu item _objects_](https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L786). These have various properties which map as follows:
-
-| Menu Item object property |               Equivalent Block Attribute               |                                                Description                                                |
-| :------------------------ | :----------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: |
-| `ID`                      |                      Not mapped.                       |                         The term_id if the menu item represents a taxonomy term.                          |
-| `attr_title`              |                        `title`                         |                        The title attribute of the link element for this menu item.                        |
-| `classes`                 |                      `classNames`                      |                The array of class attribute values for the link element of this menu item.                |
-| `db_id`                   |                      Not mapped.                       |          The DB ID of this item as a nav_menu_item object, if it exists (0 if it doesn't exist).          |
-| `description`             |                     `description`                      |                                    The description of this menu item.                                     |
-| `menu_item_parent`        | Not mapped.<sup>[1](#menu_item_menu_item_parent)</sup> |           The DB ID of the nav_menu_item that is this item's menu parent, if any. 0 otherwise.            |
-| `object`                  |                         `type`                         |          The type of object originally represented, such as 'category', 'post', or 'attachment'.          |
-| `object_id`               |                          `id`                          | The DB ID of the original object this menu item represents, e.g. ID for posts and term_id for categories. |
-| `post_parent`             |                      Not mapped.                       |                  The DB ID of the original object's parent object, if any (0 otherwise).                  |
-| `post_title`              |                      Not mapped.                       |                   A "no title" label if menu item represents a post that lacks a title.                   |
-| `target`                  |    `opensInNewTab`<sup>[2](#menu_item_target)</sup>    |                       The target attribute of the link element for this menu item.                        |
-| `title`                   |                        `label`                         |                                       The title of this menu item.                                        |
-| `type`                    |                         `kind`                         |             The family of objects originally represented, such as 'post_type' or 'taxonomy'.              |
-| `type_label`              |                      Not mapped.                       |                        The singular label used to describe this type of menu item.                        |
-| `url`                     |                         `url`                          |                                  The URL to which this menu item points.                                  |
-| `xfn`                     |                         `rel`                          |                       The XFN relationship expressed in the link of this menu item.                       |
-| `\_invalid`               |                      Not mapped.                       |                     Whether the menu item represents an object that no longer exists.                     |
-
--   [<a name="menu_item_menu_item_parent">1</a>] - the parent -> child relationship is expressed in block via the `innerBlocks` attribute and is therefore not required as a explicit block attribute.
--   [<a name="menu_item_target">2</a>] - applies only if the value of the `target` field is `_blank`.
-
-### Inconsistencies
-
-#### Mapping
-
-For historical reasons, the following properties display some inconsistency in their mapping from Menu Item Object to Block attribute:
-
--   `type` -> `kind` - the family of objects is stored as `kind` on the block and so must be mapped accordingly.
--   `object` -> `type` - the type of object is stored as `type` on the block and so must be mapped accordingly.
--   `object_id` -> `id` - the block stores a reference to the original object's ID as the `id` _attribute_. This should not be confused with the block's `clientId` which is unrelated.
--   `attr_title` -> `title` - the HTML `title` attribute is stored as `title` on the block and so must be mapped accordingly.
-
-#### Object Types
-
--   Menu Item objects which represent "Tags" are stored in WordPress as `post_tag` but the block expects their `type` attribute to be `tag` (omiting the `post_` suffix). This inconsistency is accounted for in [the mapping utilities methods](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/store/utils.js#L279-L281).
-
-## Hooks
-
-The `useNavigationEditor` and `useEntityBlockEditor` hooks are the central part of this package. They bridge the gap between the API and the block editor interface:
-
-```jsx
-// Data from API:
-const {
-	menus,
-	hasLoadedMenus,
-	selectedMenuId,
-	navigationPost,
-} = useNavigationEditor();
-
-// Working state:
-const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-	NAVIGATION_POST_KIND,
-	NAVIGATION_POST_POST_TYPE,
-	{
-		id: navigationPost?.id,
-	}
-);
-
-const isBlockEditorReady = !! (
-	menus?.length &&
-	navigationPost &&
-	selectedMenuId
-);
-
-return (
-	<BlockEditorProvider
-		value={ blocks }
-		onInput={ onInput }
-		onChange={ onChange }
-		settings={ blockEditorSettings }
-	>
-		{ isBlockEditorReady && (
-			<div className="edit-navigation-layout__content-area">
-				<BlockTools>
-					<Editor isPending={ ! hasLoadedMenus } />
-				</BlockTools>
-			</div>
-		) }
-	</BlockEditorProvider>
-);
-```
-
-## Glossary
-
--   **(Navigation) link** - the basic `core/navigation-link` block which is the standard block used to add links within navigations.
--   **Block-based link** - any navigation item that is _not_ a `core/navigation-link` block. These are persisted as blocks but still utilise the existing Menus post type system.
--   **Navigation block** - the root `core/navigation` block which can be used both with the Navigation Editor and outside (eg: Post / Site Editor).
--   **Navigation editor / screen** - the new screen provided by Gutenberg to allow the user to edit navigations using a block-based UI.
--   **Menus screen** - the current/existing [interface/screen for managing Menus](https://codex.wordpress.org/WordPress_Menu_User_Guide) in WordPress WPAdmin.
-
-_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._
-
-## 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/edit-navigation/docs/README.md b/packages/edit-navigation/docs/README.md
deleted file mode 100644
index f55b91dc44a7b8..00000000000000
--- a/packages/edit-navigation/docs/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Documentation
-
-This folder contains documentations for the Navigation Editor.
-
-1. [User Documentation](./user-documentation.md)
diff --git a/packages/edit-navigation/docs/user-documentation.md b/packages/edit-navigation/docs/user-documentation.md
deleted file mode 100644
index d12a1bb78cb2dc..00000000000000
--- a/packages/edit-navigation/docs/user-documentation.md
+++ /dev/null
@@ -1,86 +0,0 @@
-Note: this documentation is a work in progress.
-
-# Block-based navigation editor
-
-The Block-based Navigation Editor brings the power of blocks to the Appearance > Navigation section in the WordPress Administration Screens allowing you use blocks to create menus.
-
-## How to use the editor
-
-The interface replicates the Post Editor experience, allowing you to use similar workflows like drag and drop.
-
-The editor provides access to any menus created using the previous Menus screen in WordPress.
-
-New menus can easily be created, options are provided to do so in a few different ways:
-* from an existing page hierarchy
-* by copying an existing menu
-* by creating a blank menu
-
-
-Rather than the paragraph being the go-to block, the Navigation Editor provides a link block for creating links to different types of items. Page, post, tag, category and custom links can all be created. Links can be nested to create sub-menus.
-
-### How to create a menu
-
-1. At the top of the editor select 'New menu'.
-2. Type the name of your menu.
-3. Choose a starting option of either 'Start blank', 'Add all pages', or 'Copy existing menu'.
-
-### How to insert a link
-
-If you'd like to link to a page, post, tag, or category:
-
-1. Click one of the `+` buttons.
-2. Select the type of link you want to add.
-3. Use the dialog to search for the item you want to link to.
-
-For a custom link:
-
-1. Click one of the `+` buttons.
-2. Select the 'Custom Link' block.
-3. Using the dialog that appears, type in a URL and press 'Enter'.
-
-### How to insert a submenu
-
-There are two ways to insert a submenu.
-
-The first option is to create a new submenu from scratch:
-
-1. Click one of the `+` buttons.
-2. Select the 'Submenu' block.
-3. (Optional) Add a URL for the submenu.
-4. Use the nested `+` button in the submenu to add blocks in the submenu
-
-Alternatively, an existing link can be converted into a submenu:
-
-1. Select an existing link block.
-2. From the toolbar, select the 'Add submenu' button.
-
-### How to rename a menu
-
-1. If the settings sidebar isn't visible, click the 'Settings' button in the top-right corner of the screen.
-2. Select the 'Menu' tab.
-3. Use the name field at the top of the sidebar to rename a menu.
-4. Save any changes.
-
-### Assigning a menu to a theme location
-
-A theme location designates the part of your site that a menu is displayed. To assign, change or unassign a theme location.
-
-1. If the settings sidebar isn't visible, click the 'Settings' button in the top-right corner of the screen.
-2. Select the 'Menu' tab.
-3. Use the Theme Locations panel to select which locations the menu should be assigned to.
-4. Save any changes.
-
-For an overview of which menus are assigned to which locations, use the 'Manage locations' button in the same part of the screen.
-
-### Deleting a menu
-
-1. Choose a menu to delete using the menu selector in the middle of the editor's header.
-2. If the settings sidebar isn't visible, click the 'Settings' button in the top-right corner of the screen.
-3. Select the 'Menu' tab.
-4. Click the 'Delete menu' button.
-
-### How to opt-in or out of using the block-based navigation editor
-
-1. From WordPress admin, select the Gutenberg > Experiments option.
-2. Uncheck the tickbox to disable the editor or check it to enable it.
-3. Save changes.
diff --git a/packages/edit-navigation/package.json b/packages/edit-navigation/package.json
deleted file mode 100644
index ea504ea09bd069..00000000000000
--- a/packages/edit-navigation/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-	"name": "@wordpress/edit-navigation",
-	"version": "1.9.22",
-	"private": true,
-	"description": "Module for the Navigation page in WordPress.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"editor",
-		"navigation"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-navigation/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/edit-navigation"
-	},
-	"bugs": {
-		"url": "https://github.com/WordPress/gutenberg/issues"
-	},
-	"engines": {
-		"node": ">=12"
-	},
-	"main": "build/index.js",
-	"module": "build-module/index.js",
-	"react-native": "src/index",
-	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/url": "file:../url",
-		"classnames": "^2.3.1",
-		"lodash": "^4.17.21"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/edit-navigation/src/components/add-menu/index.js b/packages/edit-navigation/src/components/add-menu/index.js
deleted file mode 100644
index 936aed5d9b3b5b..00000000000000
--- a/packages/edit-navigation/src/components/add-menu/index.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, TextControl, withNotices } from '@wordpress/components';
-import { useFocusOnMount } from '@wordpress/compose';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { MENU_POST_TYPE, MENU_KIND } from '../../constants';
-
-function AddMenu( {
-	className,
-	onCreate,
-	titleText,
-	helpText,
-	focusInputOnMount = false,
-	noticeUI,
-	noticeOperations,
-} ) {
-	const inputRef = useFocusOnMount( focusInputOnMount );
-	const [ menuName, setMenuName ] = useState( '' );
-	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
-	const { createInfoNotice } = useDispatch( noticesStore );
-	const { saveMenu } = useDispatch( coreStore );
-
-	const { createErrorNotice, removeAllNotices } = noticeOperations;
-
-	const lastSaveError = useSelect( ( select ) => {
-		return select( coreStore ).getLastEntitySaveError(
-			MENU_KIND,
-			MENU_POST_TYPE
-		);
-	}, [] );
-
-	useEffect( () => {
-		if ( lastSaveError ) {
-			createErrorNotice( stripHTML( lastSaveError?.message ) );
-		}
-	}, [ lastSaveError ] );
-
-	const createMenu = async ( event ) => {
-		event.preventDefault();
-
-		if ( ! menuName.length || isCreatingMenu ) {
-			return;
-		}
-
-		setIsCreatingMenu( true );
-
-		// Remove any existing notices.
-		removeAllNotices();
-
-		const menu = await saveMenu( { name: menuName } );
-
-		setIsCreatingMenu( false );
-
-		if ( menu ) {
-			createInfoNotice( __( 'Menu created' ), {
-				type: 'snackbar',
-				isDismissible: true,
-			} );
-			if ( onCreate ) {
-				onCreate( menu.id );
-			}
-		}
-	};
-
-	return (
-		<form
-			className={ classnames( 'edit-navigation-add-menu', className ) }
-			onSubmit={ createMenu }
-		>
-			{ noticeUI }
-			{ titleText && (
-				<h3 className="edit-navigation-add-menu__title">
-					{ titleText }
-				</h3>
-			) }
-			<TextControl
-				ref={ inputRef }
-				label={ __( 'Menu name' ) }
-				value={ menuName }
-				onChange={ setMenuName }
-				help={ helpText }
-			/>
-
-			<Button
-				className="edit-navigation-add-menu__create-menu-button"
-				type="submit"
-				variant="primary"
-				disabled={ ! menuName.length }
-				isBusy={ isCreatingMenu }
-				/* Button is disabled but still focusable. */
-				aria-disabled={ ! menuName.length || isCreatingMenu }
-			>
-				{ __( 'Create menu' ) }
-			</Button>
-		</form>
-	);
-}
-
-export default withNotices( AddMenu );
diff --git a/packages/edit-navigation/src/components/add-menu/style.scss b/packages/edit-navigation/src/components/add-menu/style.scss
deleted file mode 100644
index 835fb912545a02..00000000000000
--- a/packages/edit-navigation/src/components/add-menu/style.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.edit-navigation-add-menu {
-	display: flex;
-	flex-direction: column;
-
-	// Notices.
-	.components-with-notices-ui {
-		margin-bottom: $grid-unit-20;
-
-		// Notice is too big with default styles.
-		.components-notice {
-			margin: 0;
-			padding: $grid-unit-10 $grid-unit-15;
-		}
-
-		.components-notice__content {
-			margin: 0;
-		}
-	}
-}
-
-.edit-navigation-add-menu__title {
-	margin-top: 0;
-}
-
-.edit-navigation-add-menu__create-menu-button {
-	align-self: flex-end;
-}
diff --git a/packages/edit-navigation/src/components/block-placeholder/index.js b/packages/edit-navigation/src/components/block-placeholder/index.js
deleted file mode 100644
index 48c2171dd49163..00000000000000
--- a/packages/edit-navigation/src/components/block-placeholder/index.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import {
-	Placeholder,
-	Button,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	Spinner,
-} from '@wordpress/components';
-import {
-	forwardRef,
-	useCallback,
-	useState,
-	useEffect,
-} from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { useMenuEntityProp, useSelectedMenuId } from '../../hooks';
-import useNavigationEntities from './use-navigation-entities';
-import { menuItemsToBlocks } from '../../store/transform';
-
-/**
- * Convert pages to blocks.
- *
- * @param {Object[]} pages An array of pages.
- *
- * @return {WPBlock[]} An array of blocks.
- */
-function convertPagesToBlocks( pages ) {
-	if ( ! pages?.length ) {
-		return null;
-	}
-
-	return pages.map( ( { title, type, link: url, id } ) =>
-		createBlock( 'core/navigation-link', {
-			type,
-			id,
-			url,
-			label: ! title.rendered ? __( '(no title)' ) : title.rendered,
-			opensInNewTab: false,
-		} )
-	);
-}
-
-const TOGGLE_PROPS = { variant: 'tertiary' };
-const POPOVER_PROPS = { position: 'bottom center' };
-
-function BlockPlaceholder( { onCreate }, ref ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-
-	const [ selectedMenuId ] = useSelectedMenuId();
-	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
-
-	const {
-		isResolvingPages,
-		menus,
-		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
-		pages,
-		hasPages,
-		hasMenus,
-	} = useNavigationEntities( selectedMenu );
-
-	const isLoading = isResolvingPages || isResolvingMenus;
-
-	const createFromMenu = useCallback( () => {
-		const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-		const selectNavigationBlock = true;
-		onCreate( blocks, selectNavigationBlock );
-	}, [ menuItems, menuItemsToBlocks, onCreate ] );
-
-	const onCreateFromMenu = () => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu();
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-	};
-
-	const onCreateEmptyMenu = () => {
-		onCreate( [] );
-	};
-
-	const onCreateAllPages = () => {
-		const blocks = convertPagesToBlocks( pages );
-		const selectNavigationBlock = true;
-		onCreate( blocks, selectNavigationBlock );
-	};
-
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu();
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems ] );
-
-	const selectableMenus = menus?.filter(
-		( menu ) => menu.id !== selectedMenuId
-	);
-
-	const hasSelectableMenus = !! selectableMenus?.length;
-
-	return (
-		<Placeholder
-			className="edit-navigation-block-placeholder"
-			label={ menuName }
-			instructions={ __(
-				'This menu is empty. You can start blank and choose what to add,' +
-					' add your existing pages, or add the content of another menu.'
-			) }
-		>
-			<div className="edit-navigation-block-placeholder__controls">
-				{ isLoading && (
-					<div ref={ ref }>
-						<Spinner />
-					</div>
-				) }
-				{ ! isLoading && (
-					<div
-						ref={ ref }
-						className="edit-navigation-block-placeholder__actions"
-					>
-						<Button
-							variant="tertiary"
-							onClick={ onCreateEmptyMenu }
-						>
-							{ __( 'Start blank' ) }
-						</Button>
-						{ hasPages ? (
-							<Button
-								variant={ hasMenus ? 'tertiary' : 'primary' }
-								onClick={ onCreateAllPages }
-							>
-								{ __( 'Add all pages' ) }
-							</Button>
-						) : undefined }
-						{ hasSelectableMenus ? (
-							<DropdownMenu
-								text={ __( 'Copy existing menu' ) }
-								icon={ chevronDown }
-								toggleProps={ TOGGLE_PROPS }
-								popoverProps={ POPOVER_PROPS }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										{ selectableMenus.map( ( menu ) => {
-											return (
-												<MenuItem
-													onClick={ () => {
-														setSelectedMenu(
-															menu.id
-														);
-														onCreateFromMenu();
-													} }
-													onClose={ onClose }
-													key={ menu.id }
-												>
-													{ menu.name }
-												</MenuItem>
-											);
-										} ) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) : undefined }
-					</div>
-				) }
-			</div>
-		</Placeholder>
-	);
-}
-
-export default forwardRef( BlockPlaceholder );
diff --git a/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js b/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js
deleted file mode 100644
index e16d1e38cba58d..00000000000000
--- a/packages/edit-navigation/src/components/block-placeholder/menu-items-to-blocks.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { menuItemToBlockAttributes } from '../../store/transform';
-
-/**
- * Convert a flat menu item structure to a nested blocks structure.
- *
- * @param {Object[]} menuItems An array of menu items.
- *
- * @return {WPBlock[]} An array of blocks.
- */
-export default function menuItemsToBlocks( menuItems ) {
-	if ( ! menuItems ) {
-		return null;
-	}
-
-	const menuTree = createDataTree( menuItems );
-	return mapMenuItemsToBlocks( menuTree );
-}
-
-/** @typedef {import('../..store/utils').WPNavMenuItem} WPNavMenuItem */
-
-/**
- * A recursive function that maps menu item nodes to blocks.
- *
- * @param {WPNavMenuItem[]} menuItems An array of WPNavMenuItem items.
- * @return {Object} Object containing innerBlocks and mapping.
- */
-function mapMenuItemsToBlocks( menuItems ) {
-	let mapping = {};
-
-	// The menuItem should be in menu_order sort order.
-	const sortedItems = [ ...menuItems ].sort(
-		( a, b ) => a.menu_order - b.menu_order
-	);
-
-	const innerBlocks = sortedItems.map( ( menuItem ) => {
-		const attributes = menuItemToBlockAttributes( menuItem );
-
-		// If there are children recurse to build those nested blocks.
-		const {
-			innerBlocks: nestedBlocks = [], // alias to avoid shadowing
-			mapping: nestedMapping = {}, // alias to avoid shadowing
-		} = menuItem.children?.length
-			? mapMenuItemsToBlocks( menuItem.children )
-			: {};
-
-		// Update parent mapping with nested mapping.
-		mapping = {
-			...mapping,
-			...nestedMapping,
-		};
-
-		// Create block with nested "innerBlocks".
-		const block = createBlock(
-			'core/navigation-link',
-			attributes,
-			nestedBlocks
-		);
-
-		// Create mapping for menuItem -> block.
-		mapping[ menuItem.id ] = block.clientId;
-
-		return block;
-	} );
-
-	return {
-		innerBlocks,
-		mapping,
-	};
-}
-
-/**
- * Creates a nested, hierarchical tree representation from unstructured data that
- * has an inherent relationship defined between individual items.
- *
- * For example, by default, each element in the dataset should have an `id` and
- * `parent` property where the `parent` property indicates a relationship between
- * the current item and another item with a matching `id` properties.
- *
- * This is useful for building linked lists of data from flat data structures.
- *
- * @param {Array}  dataset  linked data to be rearranged into a hierarchical tree based on relational fields.
- * @param {string} id       the property which uniquely identifies each entry within the array.
- * @param {*}      relation the property which identifies how the current item is related to other items in the data (if at all).
- * @return {Array} a nested array of parent/child relationships
- */
-function createDataTree( dataset, id = 'id', relation = 'parent' ) {
-	const hashTable = Object.create( null );
-	const dataTree = [];
-
-	for ( const data of dataset ) {
-		hashTable[ data[ id ] ] = {
-			...data,
-			children: [],
-		};
-		if ( data[ relation ] ) {
-			hashTable[ data[ relation ] ] = hashTable[ data[ relation ] ] || {};
-			hashTable[ data[ relation ] ].children =
-				hashTable[ data[ relation ] ].children || [];
-			hashTable[ data[ relation ] ].children.push(
-				hashTable[ data[ id ] ]
-			);
-		} else {
-			dataTree.push( hashTable[ data[ id ] ] );
-		}
-	}
-
-	return dataTree;
-}
diff --git a/packages/edit-navigation/src/components/block-placeholder/style.scss b/packages/edit-navigation/src/components/block-placeholder/style.scss
deleted file mode 100644
index bd9b6eab7c9a93..00000000000000
--- a/packages/edit-navigation/src/components/block-placeholder/style.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.edit-navigation-block-placeholder {
-	// The navigation editor already has a border around content.
-	// Hide the placeholder's border. Requires extra specificity.
-	&.edit-navigation-block-placeholder {
-		box-shadow: none;
-		background: transparent;
-
-		@include break-medium() {
-			margin: -$grid-unit-20 0;
-		}
-	}
-
-	// Show placeholder instructions when it's a medium size.
-	&.is-medium .components-placeholder__instructions {
-		display: block;
-	}
-
-	// Display buttons in a column when placeholder is small.
-	.edit-navigation-block-placeholder__actions {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-
-		.components-button {
-			margin-bottom: $grid-unit-05;
-			margin-right: 0;
-
-			// Avoid bottom margin on the dropdown since it makes the
-			// menu anchor itself too far away from the button.
-			&.components-dropdown-menu__toggle {
-				margin-bottom: 0;
-
-				svg {
-					// Make the spacing inside the left of the button match the
-					// spacing inside the right of the button.
-					margin-left: -6px;
-				}
-			}
-		}
-	}
-
-	@include break-medium() {
-		.edit-navigation-block-placeholder__actions {
-			flex-direction: row;
-		}
-
-		// Change the default button margin. Again use extra specificity.
-		&.edit-navigation-block-placeholder.is-medium .components-button {
-			margin-bottom: 0;
-			margin-right: $grid-unit-15;
-		}
-	}
-
-}
diff --git a/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js b/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js
deleted file mode 100644
index 4271877b8d0dbf..00000000000000
--- a/packages/edit-navigation/src/components/block-placeholder/use-navigation-entities.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-
-/**
- * @typedef {Object} NavigationEntitiesData
- * @property {Array|undefined} pages                - a collection of WP Post entity objects of post type "Page".
- * @property {boolean}         isResolvingPages     - indicates whether the request to fetch pages is currently resolving.
- * @property {boolean}         hasResolvedPages     - indicates whether the request to fetch pages has finished resolving.
- * @property {Array|undefined} menus                - a collection of Menu entity objects.
- * @property {boolean}         isResolvingMenus     - indicates whether the request to fetch menus is currently resolving.
- * @property {boolean}         hasResolvedMenus     - indicates whether the request to fetch menus has finished resolving.
- * @property {Array|undefined} menusItems           - a collection of Menu Item entity objects for the current menuId.
- * @property {boolean}         hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.
- * @property {boolean}         hasPages             - indicates whether there is currently any data for pages.
- * @property {boolean}         hasMenus             - indicates whether there is currently any data for menus.
- */
-
-/**
- * Manages fetching and resolution state for all entities required
- * for the Navigation block.
- *
- * @param {number} menuId the menu for which to retrieve menuItem data.
- * @return { NavigationEntitiesData } the entity data.
- */
-export default function useNavigationEntities( menuId ) {
-	const {
-		records: menus,
-		isResolving: isResolvingMenus,
-		hasResolved: hasResolvedMenus,
-	} = useEntityRecords( 'root', 'menu', [ { per_page: -1 } ] );
-
-	const {
-		records: pages,
-		isResolving: isResolvingPages,
-		hasResolved: hasResolvedPages,
-	} = useEntityRecords( 'postType', 'page', {
-		parent: 0,
-		order: 'asc',
-		orderby: 'id',
-		per_page: -1,
-	} );
-
-	return {
-		pages,
-		isResolvingPages,
-		hasResolvedPages,
-		hasPages: !! ( hasResolvedPages && pages?.length ),
-
-		menus,
-		isResolvingMenus,
-		hasResolvedMenus,
-		hasMenus: !! ( hasResolvedMenus && menus?.length ),
-		...useMenuItemEntities( menuId ),
-	};
-}
-
-function useMenuItemEntities( menuId ) {
-	const { menuItems, hasResolvedMenuItems = false } = useSelect(
-		( select ) => {
-			if ( ! menuId ) {
-				return {};
-			}
-
-			const { getMenuItems, hasFinishedResolution } = select( coreStore );
-			const query = {
-				menus: menuId,
-				per_page: -1,
-			};
-			return {
-				menuItems: getMenuItems( query ),
-				hasResolvedMenuItems: hasFinishedResolution( 'getMenuItems', [
-					query,
-				] ),
-			};
-		},
-		[ menuId ]
-	);
-
-	return {
-		menuItems,
-		hasResolvedMenuItems,
-	};
-}
diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js
deleted file mode 100644
index 2596e368532b30..00000000000000
--- a/packages/edit-navigation/src/components/editor/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockList, ObserveTyping, WritingFlow } from '@wordpress/block-editor';
-import { Spinner } from '@wordpress/components';
-
-export default function Editor( { isPending } ) {
-	return (
-		<div className="edit-navigation-editor">
-			{ isPending ? (
-				<Spinner />
-			) : (
-				<div className="editor-styles-wrapper">
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
-					</WritingFlow>
-				</div>
-			) }
-		</div>
-	);
-}
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
deleted file mode 100644
index 7c1c631a436616..00000000000000
--- a/packages/edit-navigation/src/components/editor/style.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-.edit-navigation-editor {
-	background: $white;
-	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
-	max-width: $navigation-editor-width;
-	margin: $grid-unit-40 auto 0 auto;
-
-	@include break-medium() {
-		// Provide space for the floating block toolbar.
-		margin-top: $grid-unit-50 * 2;
-	}
-
-	.editor-styles-wrapper {
-		padding: 0;
-	}
-
-	.components-spinner {
-		display: block;
-		margin: $grid-unit-15 auto;
-	}
-
-	// Adapt the layout of the Navigation and Link blocks.
-	// to work better in the context of the Navigation Screen.
-	.wp-block-navigation {
-		margin: 0;
-		font-size: 15px;
-		padding: $grid-unit-15;
-
-		// This is the default font that is going to be used in the content of the areas (blocks).
-		font-family: $default-font;
-
-		// Customize/zero out the gap.
-		.wp-block-navigation__container {
-			// This unsets flex.
-			display: block;
-		}
-
-		// Increase specificity.
-		.wp-block-navigation-item {
-			display: block;
-			margin: $grid-unit-10 0;
-
-			// Show submenus on click.
-			> .wp-block-navigation__submenu-container {
-				// This unsets some styles inherited from the block, meant to only show submenus on click, not hover, when inside the editor.
-				opacity: 1;
-				visibility: visible;
-				display: none;
-				right: auto;
-				box-sizing: border-box;
-				width: auto;
-				height: auto;
-				overflow: initial;
-				min-width: initial;
-			}
-
-			// Fix focus outlines.
-			&.is-selected > .wp-block-navigation-item__content,
-			&.is-selected:hover > .wp-block-navigation-item__content {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
-
-			&.block-editor-block-list__block:not([contenteditable]):focus::after {
-				display: none;
-			}
-
-			.wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
-				padding: 0.5em 1em;
-				margin-right: 0;
-				border-radius: $radius-block-ui;
-
-				&:hover {
-					box-shadow: 0 0 0 $border-width $gray-300;
-				}
-			}
-
-			.wp-block-navigation-item__label,
-			.wp-block-navigation-link__placeholder-text {
-				padding: $grid-unit-05;
-				padding-left: $grid-unit-10;
-				line-height: 1;
-			}
-
-			.wp-block-navigation-item__label {
-				// Without this Links with submenus display a pointer.
-				cursor: text;
-			}
-		}
-
-		// Basic Page List support.
-		ul.wp-block-page-list {
-			// Make it inert.
-			background: $gray-100;
-			border-radius: $radius-block-ui;
-			pointer-events: none;
-			margin-right: 0;
-
-			.wp-block-navigation-item {
-				color: $gray-700;
-				margin-bottom: 6px;
-				border-radius: $radius-block-ui;
-				padding: $grid-unit-05;
-				padding-left: $grid-unit-10;
-			}
-		}
-
-		// Submenu icon indicator.
-		.wp-block-navigation__submenu-icon {
-			position: absolute;
-			top: 15px;
-			left: 0;
-			padding: 0;
-			pointer-events: none;
-
-			svg {
-				// Point rightwards.
-				transform: rotate(-90deg);
-				transition: transform 0.2s ease;
-				@include reduce-motion("transition");
-			}
-		}
-
-		// Point downwards when open.
-		.wp-block-navigation-submenu.is-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg,
-		.wp-block-navigation-submenu.has-child-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg {
-			transform: rotate(0deg);
-		}
-
-		// Override inherited values to optimize menu items for the screen context.
-		.wp-block-navigation-submenu.has-child,
-		.wp-block-navigation-item.has-child {
-			cursor: default;
-			border-radius: $radius-block-ui;
-		}
-
-		// Override for deeply nested submenus.
-		.has-child .wp-block-navigation__container .wp-block-navigation__submenu-container {
-			left: auto;
-		}
-
-		// When editing a submenu with children, highlight the parent
-		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-submenu.is-editing {
-			> .wp-block-navigation__submenu-container {
-				opacity: 1;
-				visibility: visible;
-				position: relative;
-				background: transparent;
-				top: auto;
-				left: auto;
-				padding-left: $grid-unit-20 + $grid-unit-05;
-				min-width: auto;
-				width: 100%;
-				border: none;
-				display: block;
-
-				&::before {
-					display: none;
-				}
-			}
-		}
-
-		// Appender styles
-		.block-list-appender {
-			// Make appender rows the same height as items and center the button vertically.
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			height: $grid-unit-50;
-			margin: $grid-unit-10 auto $grid-unit-10 0;
-		}
-
-		.block-editor-button-block-appender.block-list-appender__toggle {
-			margin-left: $grid-unit-30;
-		}
-	}
-
-	// Override behavior that hides the navigation block's appender when it's deselected.
-	.block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) {
-		.block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
-			opacity: unset;
-			transform: unset;
-		}
-	}
-}
diff --git a/packages/edit-navigation/src/components/error-boundary/index.js b/packages/edit-navigation/src/components/error-boundary/index.js
deleted file mode 100644
index bea03d909c380d..00000000000000
--- a/packages/edit-navigation/src/components/error-boundary/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-
-class ErrorBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.reboot = this.reboot.bind( this );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	componentDidCatch( error ) {
-		this.setState( { error } );
-	}
-
-	reboot() {
-		if ( this.props.onError ) {
-			this.props.onError();
-		}
-	}
-
-	render() {
-		const { error } = this.state;
-		if ( ! error ) {
-			return this.props.children;
-		}
-
-		return (
-			<Warning
-				className="navigation-editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-				] }
-			>
-				{ __(
-					'The navigation editor has encountered an unexpected error.'
-				) }
-			</Warning>
-		);
-	}
-}
-
-export default ErrorBoundary;
diff --git a/packages/edit-navigation/src/components/error-boundary/style.scss b/packages/edit-navigation/src/components/error-boundary/style.scss
deleted file mode 100644
index 4f8b095dc6e892..00000000000000
--- a/packages/edit-navigation/src/components/error-boundary/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.navigation-editor-error-boundary {
-	margin: auto;
-	max-width: 780px;
-	padding: 20px;
-	margin-top: 60px;
-	box-shadow: $shadow-modal;
-}
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
deleted file mode 100644
index 6dbaaa8f90c12f..00000000000000
--- a/packages/edit-navigation/src/components/header/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { NavigableToolbar } from '@wordpress/block-editor';
-import { useViewportMatch } from '@wordpress/compose';
-import { PinnedItems } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import MenuActions from './menu-actions';
-import NewButton from './new-button';
-import SaveButton from './save-button';
-import UndoButton from './undo-button';
-import RedoButton from './redo-button';
-import InserterToggle from './inserter-toggle';
-import MoreMenu from './more-menu';
-
-export default function Header( {
-	isMenuSelected,
-	menus,
-	isPending,
-	navigationPost,
-} ) {
-	const isMediumViewport = useViewportMatch( 'medium' );
-
-	if ( ! isMenuSelected ) {
-		return (
-			<div className="edit-navigation-header">
-				<div className="edit-navigation-header__toolbar-wrapper">
-					<h1 className="edit-navigation-header__title">
-						{ __( 'Navigation' ) }
-					</h1>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="edit-navigation-header">
-			<div className="edit-navigation-header__toolbar-wrapper">
-				{ isMediumViewport && (
-					<h1 className="edit-navigation-header__title">
-						{ __( 'Navigation' ) }
-					</h1>
-				) }
-
-				<NavigableToolbar
-					className="edit-navigation-header__toolbar"
-					aria-label={ __( 'Document tools' ) }
-				>
-					<InserterToggle />
-					{ isMediumViewport && (
-						<>
-							<UndoButton />
-							<RedoButton />
-						</>
-					) }
-				</NavigableToolbar>
-			</div>
-
-			<MenuActions menus={ menus } isLoading={ isPending } />
-
-			<div className="edit-navigation-header__actions">
-				{ isMediumViewport && <NewButton /> }
-				<SaveButton navigationPost={ navigationPost } />
-				<PinnedItems.Slot scope="core/edit-navigation" />
-				<MoreMenu />
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/inserter-toggle.js b/packages/edit-navigation/src/components/header/inserter-toggle.js
deleted file mode 100644
index 5c0bdaffa7905a..00000000000000
--- a/packages/edit-navigation/src/components/header/inserter-toggle.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { Button, ToolbarItem } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { plus } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { useNavigationEditorRootBlock } from '../../hooks';
-import { store as editNavigationStore } from '../../store';
-
-function InserterToggle() {
-	const { navBlockClientId } = useNavigationEditorRootBlock();
-
-	const { isInserterOpened, hasInserterItems } = useSelect(
-		( select ) => {
-			return {
-				hasInserterItems:
-					select( blockEditorStore ).hasInserterItems(
-						navBlockClientId
-					),
-				isInserterOpened:
-					select( editNavigationStore ).isInserterOpened(),
-			};
-		},
-		[ navBlockClientId ]
-	);
-
-	const { setIsInserterOpened } = useDispatch( editNavigationStore );
-
-	return (
-		<ToolbarItem
-			as={ Button }
-			className="edit-navigation-header-inserter-toggle"
-			variant="primary"
-			isPressed={ isInserterOpened }
-			onMouseDown={ ( event ) => {
-				event.preventDefault();
-			} }
-			onClick={ () => setIsInserterOpened( ! isInserterOpened ) }
-			icon={ plus }
-			/* translators: button label text should, if possible, be under 16
-					characters. */
-			label={ _x(
-				'Toggle block inserter',
-				'Generic label for block inserter button'
-			) }
-			disabled={ ! hasInserterItems }
-		/>
-	);
-}
-
-export default InserterToggle;
diff --git a/packages/edit-navigation/src/components/header/menu-actions.js b/packages/edit-navigation/src/components/header/menu-actions.js
deleted file mode 100644
index be9871a775a60a..00000000000000
--- a/packages/edit-navigation/src/components/header/menu-actions.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	DropdownMenu,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import { useMemo, useState } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import MenuSwitcher from '../menu-switcher';
-import { useMenuEntityProp, useSelectedMenuId } from '../../hooks';
-
-export default function MenuActions( { menus, isLoading } ) {
-	const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId();
-	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
-
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			className: 'edit-navigation-menu-actions__switcher-dropdown',
-			position: 'bottom center',
-			// Use the title ref as the popover's anchor so that the dropdown is
-			// centered over the whole title area rather than just on part of it.
-			anchor: popoverAnchor,
-		} ),
-		[ popoverAnchor ]
-	);
-
-	if ( isLoading ) {
-		return (
-			<div className="edit-navigation-menu-actions">
-				{ __( 'Loading…' ) }
-			</div>
-		);
-	}
-
-	return (
-		<div className="edit-navigation-menu-actions">
-			<div
-				ref={ setPopoverAnchor }
-				className="edit-navigation-menu-actions__subtitle-wrapper"
-			>
-				<Text
-					size="body"
-					className="edit-navigation-menu-actions__subtitle"
-					as="h2"
-					limit={ 24 }
-					ellipsizeMode="tail"
-					truncate
-				>
-					{ decodeEntities( menuName ) }
-				</Text>
-
-				<DropdownMenu
-					icon={ chevronDown }
-					toggleProps={ {
-						label: __( 'Switch menu' ),
-						className:
-							'edit-navigation-menu-actions__switcher-toggle',
-						showTooltip: false,
-						__experimentalIsFocusable: true,
-					} }
-					popoverProps={ popoverProps }
-				>
-					{ ( { onClose } ) => (
-						<MenuSwitcher
-							menus={ menus }
-							selectedMenuId={ selectedMenuId }
-							onSelectMenu={ ( menuId ) => {
-								setSelectedMenuId( menuId );
-								onClose();
-							} }
-						/>
-					) }
-				</DropdownMenu>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/more-menu.js b/packages/edit-navigation/src/components/header/more-menu.js
deleted file mode 100644
index a75e60c1766e6f..00000000000000
--- a/packages/edit-navigation/src/components/header/more-menu.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
-import { external } from '@wordpress/icons';
-import { MoreMenuDropdown } from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import ToolsMoreMenuGroup from './tools-more-menu-group';
-
-export default function MoreMenu() {
-	return (
-		<MoreMenuDropdown>
-			{ ( onClose ) => (
-				<MenuGroup label={ __( 'Tools' ) }>
-					<MenuItem
-						role="menuitem"
-						icon={ external }
-						href="https://github.com/WordPress/gutenberg/tree/trunk/packages/edit-navigation/docs/user-documentation.md"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						{ __( 'Help' ) }
-						<VisuallyHidden as="span">
-							{
-								/* translators: accessibility text */
-								__( '(opens in a new tab)' )
-							}
-						</VisuallyHidden>
-					</MenuItem>
-					<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-				</MenuGroup>
-			) }
-		</MoreMenuDropdown>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/new-button.js b/packages/edit-navigation/src/components/header/new-button.js
deleted file mode 100644
index 6993ddca1d2f78..00000000000000
--- a/packages/edit-navigation/src/components/header/new-button.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button, Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import AddMenu from '../add-menu';
-import { useSelectedMenuId } from '../../hooks';
-
-export default function NewButton() {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ , setSelectedMenuId ] = useSelectedMenuId();
-
-	return (
-		<>
-			<Button variant="tertiary" onClick={ () => setIsModalOpen( true ) }>
-				{ __( 'New menu' ) }
-			</Button>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Create a new menu' ) }
-					className="edit-navigation-menu-switcher__modal"
-					onRequestClose={ () => setIsModalOpen( false ) }
-				>
-					<AddMenu
-						helpText={ __(
-							'A short descriptive name for your menu.'
-						) }
-						onCreate={ ( menuId ) => {
-							setIsModalOpen( false );
-							setSelectedMenuId( menuId );
-						} }
-					/>
-				</Modal>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/redo-button.js b/packages/edit-navigation/src/components/header/redo-button.js
deleted file mode 100644
index c4f4e6df37b915..00000000000000
--- a/packages/edit-navigation/src/components/header/redo-button.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-
-export default function RedoButton() {
-	const shortcut = isAppleOS()
-		? displayShortcut.primaryShift( 'z' )
-		: displayShortcut.primary( 'y' );
-
-	const hasRedo = useSelect(
-		( select ) => select( coreStore ).hasRedo(),
-		[]
-	);
-	const { redo } = useDispatch( coreStore );
-	return (
-		<ToolbarButton
-			icon={ ! isRTL() ? redoIcon : undoIcon }
-			label={ __( 'Redo' ) }
-			shortcut={ shortcut }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasRedo }
-			onClick={ hasRedo ? redo : undefined }
-		/>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/save-button.js b/packages/edit-navigation/src/components/header/save-button.js
deleted file mode 100644
index ed255851a22ef1..00000000000000
--- a/packages/edit-navigation/src/components/header/save-button.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editNavigationStore } from '../../store';
-
-export default function SaveButton( { navigationPost } ) {
-	const { isDirty } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-		};
-	}, [] );
-
-	const { saveNavigationPost } = useDispatch( editNavigationStore );
-
-	const disabled = ! isDirty || ! navigationPost;
-
-	return (
-		<Button
-			className="edit-navigation-toolbar__save-button"
-			variant="primary"
-			onClick={ () => {
-				saveNavigationPost( navigationPost );
-			} }
-			disabled={ disabled }
-		>
-			{ __( 'Save' ) }
-		</Button>
-	);
-}
diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
deleted file mode 100644
index a01c3dda0de2e2..00000000000000
--- a/packages/edit-navigation/src/components/header/style.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-.edit-navigation-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: $grid-unit-15 $grid-unit-30 $grid-unit-15 20px;
-}
-
-.edit-navigation-header__toolbar-wrapper {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.edit-navigation-header__title {
-	font-size: 20px;
-	padding: 0;
-	margin: 0 20px 0 0;
-}
-
-.edit-navigation-header__toolbar {
-	align-items: center;
-	border: none;
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
-	> .components-button.has-icon.has-icon.has-icon,
-	> .components-dropdown > .components-button.has-icon.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-
-	> .edit-navigation-header-inserter-toggle.has-icon.has-icon.has-icon {
-		margin-right: $grid-unit-10;
-		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-	}
-}
-
-.edit-navigation-menu-actions {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-
-	.edit-navigation-menu-actions__subtitle-wrapper {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.components-dropdown {
-		margin-left: $grid-unit-05;
-	}
-
-	.edit-navigation-menu-actions__switcher-toggle {
-		padding: 0;
-		min-width: 0;
-	}
-}
-
-.edit-navigation-menu-actions__switcher-dropdown {
-	// Appear below the modal overlay.
-	z-index: z-index(".components-popover.edit-navigation-menu-actions__switcher-dropdown");
-
-	// Resetting MenuItemGroup padding so button can take full space.
-	.components-menu-group.has-hidden-separator {
-		padding: 0;
-	}
-
-	.edit-navigation-menu-switcher__new-button.components-button {
-		justify-content: center;
-		background: $gray-900;
-		color: $white;
-		height: ($button-size + $grid-unit-10);
-		border-radius: 0;
-
-		&:hover {
-			color: $white;
-		}
-
-		&:active {
-			color: $gray-400;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
-		}
-
-		// This is needed to center the button text.
-		.components-menu-item__item {
-			min-width: 0;
-			margin: 0;
-		}
-	}
-}
-
-.edit-navigation-header__actions {
-	display: flex;
-
-	> .components-dropdown,
-	> .components-button,
-	> .interface-pinned-items .components-button {
-		&:not(:last-child) {
-			margin-right: $grid-unit-15;
-		}
-	}
-}
-
-// Hide notices.
-.gutenberg_page_gutenberg-navigation {
-	.notice,
-	#wpfooter {
-		display: none;
-	}
-}
-
-
-// INSERTER TOGGLE
-.edit-navigation-header-inserter-toggle {
-
-	svg {
-		transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-		@include reduce-motion("transition");
-	}
-
-	// Make the button appear like a "X" close button.
-	&.is-pressed {
-		svg {
-			transform: rotate(45deg);
-		}
-	}
-}
-
-// INSERTER PANEL
-.edit-navigation-layout__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-
-	// Hide close button within panel on larger screens as this
-	// action is provided by the inserter toggle or ESC key.
-	@include break-medium() {
-		display: none;
-	}
-}
diff --git a/packages/edit-navigation/src/components/header/tools-more-menu-group.js b/packages/edit-navigation/src/components/header/tools-more-menu-group.js
deleted file mode 100644
index bfcbb39d18459f..00000000000000
--- a/packages/edit-navigation/src/components/header/tools-more-menu-group.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createSlotFill } from '@wordpress/components';
-
-const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
-	'EditNavigationToolsMoreMenuGroup'
-);
-
-ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
-	<Slot fillProps={ fillProps }>{ ( fills ) => fills }</Slot>
-);
-
-export default ToolsMoreMenuGroup;
diff --git a/packages/edit-navigation/src/components/header/undo-button.js b/packages/edit-navigation/src/components/header/undo-button.js
deleted file mode 100644
index 827ed1a415d74b..00000000000000
--- a/packages/edit-navigation/src/components/header/undo-button.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-
-export default function UndoButton() {
-	const hasUndo = useSelect(
-		( select ) => select( coreStore ).hasUndo(),
-		[]
-	);
-	const { undo } = useDispatch( coreStore );
-	return (
-		<ToolbarButton
-			icon={ ! isRTL() ? undoIcon : redoIcon }
-			label={ __( 'Undo' ) }
-			shortcut={ displayShortcut.primary( 'z' ) }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasUndo }
-			onClick={ hasUndo ? undo : undefined }
-		/>
-	);
-}
diff --git a/packages/edit-navigation/src/components/inserter-sidebar/index.js b/packages/edit-navigation/src/components/inserter-sidebar/index.js
deleted file mode 100644
index 7c0bbe9e874090..00000000000000
--- a/packages/edit-navigation/src/components/inserter-sidebar/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { close } from '@wordpress/icons';
-import {
-	__experimentalLibrary as Library,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editNavigationStore } from '../../store';
-import { useNavigationEditorRootBlock } from '../../hooks';
-
-const SHOW_PREVIEWS = false;
-
-function InserterSidebar() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
-	const { navBlockClientId, lastNavBlockItemIndex } =
-		useNavigationEditorRootBlock();
-
-	const { hasInserterItems, selectedBlockClientId } = useSelect(
-		( select ) => {
-			return {
-				hasInserterItems:
-					select( blockEditorStore ).hasInserterItems(
-						navBlockClientId
-					),
-				selectedBlockClientId:
-					select( blockEditorStore ).getSelectedBlock()?.clientId,
-			};
-		},
-		[ navBlockClientId ]
-	);
-
-	const { setIsInserterOpened } = useDispatch( editNavigationStore );
-
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-	} );
-
-	// Only concerned with whether there are items to display. If not then
-	// we shouldn't render.
-	if ( ! hasInserterItems ) {
-		return null;
-	}
-
-	const shouldInsertInNavBlock =
-		! selectedBlockClientId || navBlockClientId === selectedBlockClientId;
-
-	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-navigation-layout__inserter-panel"
-		>
-			<div className="edit-navigation-layout__inserter-panel-header">
-				<Button
-					icon={ close }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</div>
-			<div className="edit-navigation-layout__inserter-panel-content">
-				<Library
-					// If the root Nav block is selected then any items inserted by the
-					// global inserter should append after the last nav item. Otherwise
-					// simply allow default Gutenberg behaviour.
-					rootClientId={
-						shouldInsertInNavBlock ? navBlockClientId : undefined
-					} // If set, insertion will be into the block with this ID.
-					__experimentalInsertionIndex={
-						// If set, insertion will be into this explicit position.
-						shouldInsertInNavBlock
-							? lastNavBlockItemIndex
-							: undefined
-					}
-					shouldFocusBlock={ isMobileViewport }
-					showInserterHelpPanel={ SHOW_PREVIEWS }
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default InserterSidebar;
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
deleted file mode 100644
index 18884ce25fe21f..00000000000000
--- a/packages/edit-navigation/src/components/layout/index.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockEditorKeyboardShortcuts,
-	BlockEditorProvider,
-	BlockTools,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
-} from '@wordpress/block-editor';
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { Popover, SlotFillProvider, Spinner } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import {
-	InterfaceSkeleton,
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import { __ } from '@wordpress/i18n';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-import { PluginArea } from '@wordpress/plugins';
-
-/**
- * Internal dependencies
- */
-import UnselectedMenuState from './unselected-menu-state';
-import {
-	IsMenuNameControlFocusedContext,
-	useNavigationEditor,
-	useMenuNotifications,
-} from '../../hooks';
-import ErrorBoundary from '../error-boundary';
-import NavigationEditorShortcuts from './shortcuts';
-import Sidebar from '../sidebar';
-import Header from '../header';
-import Notices from '../notices';
-import Editor from '../editor';
-import InserterSidebar from '../inserter-sidebar';
-import UnsavedChangesWarning from './unsaved-changes-warning';
-import { store as editNavigationStore } from '../../store';
-import {
-	NAVIGATION_POST_KIND,
-	NAVIGATION_POST_POST_TYPE,
-} from '../../constants';
-
-const interfaceLabels = {
-	/* translators: accessibility text for the navigation screen top bar landmark region. */
-	header: __( 'Navigation top bar' ),
-	/* translators: accessibility text for the navigation screen content landmark region. */
-	body: __( 'Navigation menu blocks' ),
-	/* translators: accessibility text for the navigation screen settings landmark region. */
-	sidebar: __( 'Navigation settings' ),
-	secondarySidebar: __( 'Block library' ),
-};
-
-export default function Layout( { blockEditorSettings } ) {
-	const contentAreaRef = useBlockSelectionClearer();
-	const [ isMenuNameControlFocused, setIsMenuNameControlFocused ] =
-		useState( false );
-	const { saveNavigationPost } = useDispatch( editNavigationStore );
-	const savePost = () => saveNavigationPost( navigationPost );
-
-	const {
-		menus,
-		hasLoadedMenus,
-		hasFinishedInitialLoad,
-		selectedMenuId,
-		navigationPost,
-		isMenuBeingDeleted,
-		selectMenu,
-		deleteMenu,
-		isMenuSelected,
-	} = useNavigationEditor();
-
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		NAVIGATION_POST_KIND,
-		NAVIGATION_POST_POST_TYPE,
-		{
-			id: navigationPost?.id,
-		}
-	);
-
-	const { hasSidebarEnabled, isInserterOpened } = useSelect(
-		( select ) => ( {
-			hasSidebarEnabled: !! select(
-				interfaceStore
-			).getActiveComplementaryArea( 'core/edit-navigation' ),
-			isInserterOpened: select( editNavigationStore ).isInserterOpened(),
-		} ),
-		[]
-	);
-
-	useEffect( () => {
-		if ( ! selectedMenuId && menus?.length ) {
-			selectMenu( menus[ 0 ].id );
-		}
-	}, [ selectedMenuId, menus ] );
-
-	useMenuNotifications( selectedMenuId );
-
-	const hasMenus = !! menus?.length;
-
-	const isBlockEditorReady = !! (
-		hasMenus &&
-		navigationPost &&
-		isMenuSelected
-	);
-
-	return (
-		<ErrorBoundary>
-			<ShortcutProvider>
-				<div
-					hidden={ ! isMenuBeingDeleted }
-					className={ 'edit-navigation-layout__overlay' }
-				/>
-				<SlotFillProvider>
-					<BlockEditorKeyboardShortcuts.Register />
-					<NavigationEditorShortcuts.Register />
-					<NavigationEditorShortcuts saveBlocks={ savePost } />
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ onInput }
-						onChange={ onChange }
-						settings={ {
-							...blockEditorSettings,
-							templateLock: 'all',
-						} }
-						useSubRegistry={ false }
-					>
-						<IsMenuNameControlFocusedContext.Provider
-							value={ useMemo(
-								() => [
-									isMenuNameControlFocused,
-									setIsMenuNameControlFocused,
-								],
-								[ isMenuNameControlFocused ]
-							) }
-						>
-							<InterfaceSkeleton
-								className="edit-navigation-layout"
-								labels={ interfaceLabels }
-								header={
-									<Header
-										isMenuSelected={ isMenuSelected }
-										isPending={ ! hasLoadedMenus }
-										menus={ menus }
-										navigationPost={ navigationPost }
-									/>
-								}
-								content={
-									<>
-										<Notices />
-										{ ! hasFinishedInitialLoad && (
-											<Spinner />
-										) }
-
-										{ ! isMenuSelected &&
-											hasFinishedInitialLoad && (
-												<UnselectedMenuState
-													onSelectMenu={ selectMenu }
-													onCreate={ selectMenu }
-													menus={ menus }
-												/>
-											) }
-										{ isBlockEditorReady && (
-											<div
-												className="edit-navigation-layout__content-area"
-												ref={ contentAreaRef }
-											>
-												<BlockTools>
-													<Editor
-														isPending={
-															! hasLoadedMenus
-														}
-													/>
-												</BlockTools>
-											</div>
-										) }
-									</>
-								}
-								sidebar={
-									hasSidebarEnabled && (
-										<ComplementaryArea.Slot scope="core/edit-navigation" />
-									)
-								}
-								secondarySidebar={
-									isInserterOpened && <InserterSidebar />
-								}
-							/>
-							{ isMenuSelected && (
-								<Sidebar
-									menus={ menus }
-									menuId={ selectedMenuId }
-									onSelectMenu={ selectMenu }
-									onDeleteMenu={ deleteMenu }
-									isMenuBeingDeleted={ isMenuBeingDeleted }
-								/>
-							) }
-						</IsMenuNameControlFocusedContext.Provider>
-						<UnsavedChangesWarning />
-					</BlockEditorProvider>
-					<Popover.Slot />
-					<PluginArea />
-				</SlotFillProvider>
-			</ShortcutProvider>
-		</ErrorBoundary>
-	);
-}
diff --git a/packages/edit-navigation/src/components/layout/shortcuts.js b/packages/edit-navigation/src/components/layout/shortcuts.js
deleted file mode 100644
index 1ced3ba2183fee..00000000000000
--- a/packages/edit-navigation/src/components/layout/shortcuts.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-
-function NavigationEditorShortcuts( { saveBlocks } ) {
-	useShortcut( 'core/edit-navigation/save-menu', ( event ) => {
-		event.preventDefault();
-		saveBlocks();
-	} );
-
-	const { redo, undo } = useDispatch( coreStore );
-	useShortcut( 'core/edit-navigation/undo', ( event ) => {
-		undo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/edit-navigation/redo', ( event ) => {
-		redo();
-		event.preventDefault();
-	} );
-
-	return null;
-}
-
-function RegisterNavigationEditorShortcuts() {
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-navigation/save-menu',
-			category: 'global',
-			description: __( 'Save the navigation currently being edited.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 's',
-			},
-		} );
-		registerShortcut( {
-			name: 'core/edit-navigation/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-		registerShortcut( {
-			name: 'core/edit-navigation/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-		} );
-	}, [ registerShortcut ] );
-
-	return null;
-}
-
-NavigationEditorShortcuts.Register = RegisterNavigationEditorShortcuts;
-
-export default NavigationEditorShortcuts;
diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
deleted file mode 100644
index 0d84561fc19a8c..00000000000000
--- a/packages/edit-navigation/src/components/layout/style.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-// Overriding the wp-admin background and padding
-// to give the navigation editor more room to breathe.
-.gutenberg_page_gutenberg-navigation {
-	#wpcontent {
-		padding-left: 0;
-	}
-
-	// Ensure the entire layout is full-height, the background
-	// of the editing canvas needs to be full-height for block
-	// deselection to work.
-	#wpwrap,
-	#wpcontent,
-	#wpbody,
-	#wpbody-content,
-	.edit-navigation,
-	.components-drop-zone__provider,
-	.edit-navigation-layout {
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-	}
-}
-
-.edit-navigation-layout {
-	&.has-permanent-sidebar {
-		margin-right: $sidebar-width;
-	}
-
-	> .components-spinner {
-		margin: $navigation-editor-spacing-top auto 0;
-	}
-
-	.edit-navigation-layout__content-area {
-		// Reference element for the block popover position.
-		position: relative;
-
-		// Ensure the entire layout is full-height, the background
-		// of the editing canvas needs to be full-height for block
-		// deselection to work.
-		flex-grow: 1;
-	}
-
-	.edit-navigation-header {
-		background: $white;
-	}
-}
-
-.edit-navigation-empty-state {
-	max-width: $navigation-editor-width;
-	margin-left: auto;
-	margin-right: auto;
-	@include break-medium() {
-		// Match the padding top of the editor canvas.
-		margin-top: $navigation-editor-spacing-top;
-	}
-}
-
-.edit-navigation-layout__overlay {
-	z-index: z-index(".edit-navigation-layout__overlay");
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background: rgba(86, 85, 85, 0.5);
-}
diff --git a/packages/edit-navigation/src/components/layout/unsaved-changes-warning.js b/packages/edit-navigation/src/components/layout/unsaved-changes-warning.js
deleted file mode 100644
index 0e9f1ee6f3b3fe..00000000000000
--- a/packages/edit-navigation/src/components/layout/unsaved-changes-warning.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Warns the user if there are unsaved changes before leaving the editor.
- *
- * This is a duplicate of the component implemented in the editor package.
- * Duplicated here as edit-navigation doesn't depend on editor.
- *
- * @return {WPComponent} The component.
- */
-export default function UnsavedChangesWarning() {
-	const isDirty = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords } = select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		return dirtyEntityRecords.length > 0;
-	}, [] );
-
-	useEffect( () => {
-		/**
-		 * Warns the user if there are unsaved changes before leaving the editor.
-		 *
-		 * @param {Event} event `beforeunload` event.
-		 *
-		 * @return {?string} Warning prompt message, if unsaved changes exist.
-		 */
-		const warnIfUnsavedChanges = ( event ) => {
-			if ( isDirty ) {
-				event.returnValue = __(
-					'You have unsaved changes. If you proceed, they will be lost.'
-				);
-				return event.returnValue;
-			}
-		};
-
-		window.addEventListener( 'beforeunload', warnIfUnsavedChanges );
-
-		return () => {
-			window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
-		};
-	}, [ isDirty ] );
-
-	return null;
-}
diff --git a/packages/edit-navigation/src/components/layout/unselected-menu-state.js b/packages/edit-navigation/src/components/layout/unselected-menu-state.js
deleted file mode 100644
index b559ad6636a382..00000000000000
--- a/packages/edit-navigation/src/components/layout/unselected-menu-state.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Card, CardBody, NavigableMenu } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import AddMenu from '../add-menu';
-import MenuSwitcher from '../menu-switcher';
-
-export default function UnselectedMenuState( {
-	onCreate,
-	onSelectMenu,
-	menus,
-} ) {
-	const showMenuSwitcher = menus?.length > 0;
-	return (
-		<div className="edit-navigation-empty-state">
-			{ showMenuSwitcher && <h4>{ __( 'Choose a menu to edit:' ) }</h4> }
-			<Card>
-				<CardBody>
-					{ showMenuSwitcher ? (
-						<NavigableMenu>
-							<MenuSwitcher
-								onSelectMenu={ onSelectMenu }
-								menus={ menus }
-							/>
-						</NavigableMenu>
-					) : (
-						<AddMenu
-							onCreate={ onCreate }
-							titleText={ __( 'Create your first menu' ) }
-							helpText={ __(
-								'A short descriptive name for your menu.'
-							) }
-							focusInputOnMount
-						/>
-					) }
-				</CardBody>
-			</Card>
-		</div>
-	);
-}
diff --git a/packages/edit-navigation/src/components/menu-switcher/index.js b/packages/edit-navigation/src/components/menu-switcher/index.js
deleted file mode 100644
index ef13c1dcc47b5f..00000000000000
--- a/packages/edit-navigation/src/components/menu-switcher/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	MenuGroup,
-	MenuItemsChoice,
-	MenuItem,
-	Modal,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import AddMenu from '../add-menu';
-
-const noop = () => {};
-
-export default function MenuSwitcher( {
-	menus,
-	selectedMenuId,
-	onSelectMenu = noop,
-} ) {
-	const [ isModalVisible, setIsModalVisible ] = useState( false );
-	const openModal = () => setIsModalVisible( true );
-	const closeModal = () => setIsModalVisible( false );
-
-	return (
-		<>
-			<MenuGroup>
-				<MenuItemsChoice
-					value={ selectedMenuId }
-					onSelect={ onSelectMenu }
-					choices={ menus.map( ( { id, name } ) => ( {
-						value: id,
-						label: decodeEntities( name ),
-						'aria-label': sprintf(
-							/* translators: %s: The name of a menu. */
-							__( "Switch to '%s'" ),
-							name
-						),
-					} ) ) }
-				/>
-			</MenuGroup>
-			<MenuGroup hideSeparator>
-				<MenuItem
-					className="edit-navigation-menu-switcher__new-button"
-					onClick={ openModal }
-				>
-					{ __( 'Create a new menu' ) }
-				</MenuItem>
-				{ isModalVisible && (
-					<Modal
-						title={ __( 'Create a new menu' ) }
-						className="edit-navigation-menu-switcher__modal"
-						onRequestClose={ closeModal }
-					>
-						<AddMenu
-							onCreate={ ( menuId ) => {
-								closeModal();
-								onSelectMenu( menuId );
-							} }
-							helpText={ __(
-								'A short descriptive name for your menu.'
-							) }
-						/>
-					</Modal>
-				) }
-			</MenuGroup>
-		</>
-	);
-}
diff --git a/packages/edit-navigation/src/components/menu-switcher/style.scss b/packages/edit-navigation/src/components/menu-switcher/style.scss
deleted file mode 100644
index bddb5d9a23ae8c..00000000000000
--- a/packages/edit-navigation/src/components/menu-switcher/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.edit-navigation-menu-switcher__modal {
-	max-width: 400px;
-}
diff --git a/packages/edit-navigation/src/components/name-display/index.js b/packages/edit-navigation/src/components/name-display/index.js
deleted file mode 100644
index ebfde94fe21725..00000000000000
--- a/packages/edit-navigation/src/components/name-display/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	ToolbarGroup,
-	ToolbarButton,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { BlockControls } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-import { sprintf, __ } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import {
-	untitledMenu,
-	useSelectedMenuId,
-	useMenuEntityProp,
-	IsMenuNameControlFocusedContext,
-} from '../../hooks';
-import { SIDEBAR_SCOPE, SIDEBAR_MENU } from '../../constants';
-
-export default function NameDisplay() {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const [ menuId ] = useSelectedMenuId();
-	const [ name ] = useMenuEntityProp( 'name', menuId );
-	const [ , setIsMenuNameEditFocused ] = useContext(
-		IsMenuNameControlFocusedContext
-	);
-
-	const menuName = decodeEntities( name ?? untitledMenu );
-
-	return (
-		<BlockControls>
-			<ToolbarGroup>
-				<ToolbarButton
-					aria-label={ sprintf(
-						// translators: %s: the name of a menu.
-						__( `Edit menu name: %s` ),
-						menuName
-					) }
-					onClick={ () => {
-						enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU );
-						setIsMenuNameEditFocused( true );
-					} }
-				>
-					<Text limit={ 24 } ellipsizeMode="tail" truncate>
-						{ menuName }
-					</Text>
-				</ToolbarButton>
-			</ToolbarGroup>
-		</BlockControls>
-	);
-}
diff --git a/packages/edit-navigation/src/components/name-editor/index.js b/packages/edit-navigation/src/components/name-editor/index.js
deleted file mode 100644
index a1c46345f23758..00000000000000
--- a/packages/edit-navigation/src/components/name-editor/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { useEffect, useRef, useContext } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import {
-	IsMenuNameControlFocusedContext,
-	useMenuEntityProp,
-	useSelectedMenuId,
-} from '../../hooks';
-
-export function NameEditor() {
-	const [ isMenuNameEditFocused, setIsMenuNameEditFocused ] = useContext(
-		IsMenuNameControlFocusedContext
-	);
-
-	const [ menuId ] = useSelectedMenuId();
-	const [ name, setName ] = useMenuEntityProp( 'name', menuId );
-
-	const inputRef = useRef();
-	useEffect( () => {
-		if ( isMenuNameEditFocused ) inputRef.current.focus();
-	}, [ isMenuNameEditFocused ] );
-
-	return (
-		<TextControl
-			ref={ inputRef }
-			help={ __(
-				'A short, descriptive name used to refer to this menu elsewhere.'
-			) }
-			label={ __( 'Name' ) }
-			onBlur={ () => setIsMenuNameEditFocused( false ) }
-			className="edit-navigation-name-editor__text-control"
-			value={ decodeEntities( name || '' ) }
-			onChange={ setName }
-		/>
-	);
-}
diff --git a/packages/edit-navigation/src/components/name-editor/style.scss b/packages/edit-navigation/src/components/name-editor/style.scss
deleted file mode 100644
index 206c60f92fb8bd..00000000000000
--- a/packages/edit-navigation/src/components/name-editor/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-navigation-name-editor__text-control {
-	.components-base-control {
-		border: none;
-	}
-}
diff --git a/packages/edit-navigation/src/components/notices/index.js b/packages/edit-navigation/src/components/notices/index.js
deleted file mode 100644
index 21e15fde348d38..00000000000000
--- a/packages/edit-navigation/src/components/notices/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { NoticeList, SnackbarList } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function EditNavigationNotices() {
-	const { removeNotice } = useDispatch( noticesStore );
-	const notices = useSelect(
-		( select ) => select( noticesStore ).getNotices(),
-		[]
-	);
-	const dismissibleNotices = filter( notices, {
-		isDismissible: true,
-		type: 'default',
-	} );
-	const nonDismissibleNotices = filter( notices, {
-		isDismissible: false,
-		type: 'default',
-	} );
-	const snackbarNotices = filter( notices, {
-		type: 'snackbar',
-	} );
-
-	return (
-		<>
-			<NoticeList
-				notices={ nonDismissibleNotices }
-				className="edit-navigation-notices__notice-list"
-			/>
-			<NoticeList
-				notices={ dismissibleNotices }
-				className="edit-navigation-notices__notice-list"
-				onRemove={ removeNotice }
-			/>
-			<SnackbarList
-				notices={ snackbarNotices }
-				className="edit-navigation-notices__snackbar-list"
-				onRemove={ removeNotice }
-			/>
-		</>
-	);
-}
diff --git a/packages/edit-navigation/src/components/notices/style.scss b/packages/edit-navigation/src/components/notices/style.scss
deleted file mode 100644
index aacfa197cd422f..00000000000000
--- a/packages/edit-navigation/src/components/notices/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.edit-navigation-notices__snackbar-list {
-	position: fixed;
-	bottom: 0;
-	padding: 20px;
-}
-
-.edit-navigation-notices__notice-list {
-	// Notices have some unusual margin and padding by default, reset that.
-	.components-notice {
-		box-sizing: border-box;
-		margin: 0;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-		padding: 0 12px;
-		min-height: 60px;
-
-		// Make sure the close button is centered.
-		.components-button {
-			align-self: initial;
-		}
-	}
-}
diff --git a/packages/edit-navigation/src/components/sidebar/auto-add-pages.js b/packages/edit-navigation/src/components/sidebar/auto-add-pages.js
deleted file mode 100644
index e09c505b3c617f..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/auto-add-pages.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useMenuEntityProp } from '../../hooks';
-
-export default function AutoAddPages( { menuId } ) {
-	const [ autoAddPages, setAutoAddPages ] = useMenuEntityProp(
-		'auto_add',
-		menuId
-	);
-
-	return (
-		<ToggleControl
-			label={ __( 'Add new pages' ) }
-			help={ __(
-				'Automatically add published top-level pages to this menu.'
-			) }
-			checked={ autoAddPages ?? false }
-			onChange={ setAutoAddPages }
-		/>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/delete-menu.js b/packages/edit-navigation/src/components/sidebar/delete-menu.js
deleted file mode 100644
index de5685a27f247f..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/delete-menu.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	PanelBody,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-export default function DeleteMenu( { onDeleteMenu, isMenuBeingDeleted } ) {
-	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
-
-	const handleConfirm = () => {
-		setShowConfirmDialog( false );
-		onDeleteMenu();
-	};
-
-	return (
-		<PanelBody>
-			<>
-				<Button
-					className="edit-navigation-inspector-additions__delete-menu-button"
-					variant="secondary"
-					isDestructive
-					isBusy={ isMenuBeingDeleted }
-					onClick={ () => {
-						setShowConfirmDialog( true );
-					} }
-				>
-					{ __( 'Delete menu' ) }
-				</Button>
-				<ConfirmDialog
-					isOpen={ showConfirmDialog }
-					onConfirm={ handleConfirm }
-					onCancel={ () => setShowConfirmDialog( false ) }
-				>
-					{ __(
-						'Are you sure you want to delete this navigation? This action cannot be undone.'
-					) }
-				</ConfirmDialog>
-			</>
-		</PanelBody>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/index.js b/packages/edit-navigation/src/components/sidebar/index.js
deleted file mode 100644
index 7cd30fdb3a095a..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { cog } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockInspector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SidebarHeader from './sidebar-header';
-import MenuSettings from './menu-settings';
-import ManageLocations from './manage-locations';
-import DeleteMenu from './delete-menu';
-import { SIDEBAR_BLOCK, SIDEBAR_MENU, SIDEBAR_SCOPE } from '../../constants';
-
-export default function Sidebar( {
-	menuId,
-	menus,
-	isMenuBeingDeleted,
-	onDeleteMenu,
-	onSelectMenu,
-} ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { sidebar, hasBlockSelection, hasSidebarEnabled } = useSelect(
-		( select ) => {
-			const _sidebar =
-				select( interfaceStore ).getActiveComplementaryArea(
-					SIDEBAR_SCOPE
-				);
-
-			const _hasSidebarEnabled = [ SIDEBAR_MENU, SIDEBAR_BLOCK ].includes(
-				_sidebar
-			);
-
-			return {
-				sidebar: _sidebar,
-				hasBlockSelection:
-					!! select( blockEditorStore ).getBlockSelectionStart(),
-				hasSidebarEnabled: _hasSidebarEnabled,
-			};
-		},
-		[]
-	);
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	useEffect( () => {
-		if ( ! hasSidebarEnabled ) {
-			return;
-		}
-
-		if ( hasBlockSelection ) {
-			enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_BLOCK );
-		} else {
-			enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU );
-		}
-	}, [ hasBlockSelection, hasSidebarEnabled ] );
-
-	let sidebarName = sidebar;
-	if ( ! hasSidebarEnabled ) {
-		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_MENU;
-	}
-
-	return (
-		<ComplementaryArea
-			className="edit-navigation-sidebar"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
-			closeLabel={ __( 'Close settings' ) }
-			scope={ SIDEBAR_SCOPE }
-			identifier={ sidebarName }
-			icon={ cog }
-			isActiveByDefault={ isLargeViewport }
-			header={ <SidebarHeader sidebarName={ sidebarName } /> }
-			headerClassName="edit-navigation-sidebar__panel-tabs"
-			isPinnable
-		>
-			{ sidebarName === SIDEBAR_MENU && (
-				<>
-					<MenuSettings menuId={ menuId } />
-					<ManageLocations
-						menus={ menus }
-						selectedMenuId={ menuId }
-						onSelectMenu={ onSelectMenu }
-					/>
-					<DeleteMenu
-						onDeleteMenu={ onDeleteMenu }
-						isMenuBeingDeleted={ isMenuBeingDeleted }
-					/>
-				</>
-			) }
-			{ sidebarName === SIDEBAR_BLOCK && <BlockInspector /> }
-		</ComplementaryArea>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/manage-locations.js b/packages/edit-navigation/src/components/sidebar/manage-locations.js
deleted file mode 100644
index cd2f13b77fe4ad..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/manage-locations.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import {
-	Button,
-	CheckboxControl,
-	Modal,
-	PanelBody,
-	Spinner,
-	SelectControl,
-} from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-import apiFetch from '@wordpress/api-fetch';
-import { useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { useMenuLocations } from '../../hooks';
-
-export default function ManageLocations( {
-	menus,
-	selectedMenuId,
-	onSelectMenu,
-} ) {
-	const {
-		menuLocations,
-		assignMenuToLocation,
-		toggleMenuLocationAssignment,
-	} = useMenuLocations();
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const openModal = () => setIsModalOpen( true );
-	const closeModal = () => setIsModalOpen( false );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	const validateBatchResponse = ( batchResponse ) => {
-		if ( batchResponse.failed ) {
-			return false;
-		}
-
-		const errorResponses = batchResponse.responses.filter( ( response ) => {
-			return 200 > response.status || 300 <= response.status;
-		} );
-
-		return 1 > errorResponses.length;
-	};
-
-	const handleUpdateMenuLocations = async () => {
-		const method = 'POST';
-		const batchRequests = menus.map( ( { id } ) => {
-			const locations = menuLocations
-				.filter( ( menuLocation ) => menuLocation.menu === id )
-				.map( ( menuLocation ) => menuLocation.name );
-
-			return {
-				path: `/wp/v2/menus/${ id }`,
-				body: {
-					locations,
-				},
-				method,
-			};
-		} );
-
-		const batchResponse = await apiFetch( {
-			path: 'batch/v1',
-			data: {
-				validation: 'require-all-validate',
-				requests: batchRequests,
-			},
-			method,
-		} );
-
-		const isSuccess = validateBatchResponse( batchResponse );
-
-		if ( isSuccess ) {
-			createSuccessNotice( __( 'Menu locations have been updated.' ), {
-				type: 'snackbar',
-			} );
-			closeModal();
-			return;
-		}
-
-		createErrorNotice(
-			__( 'An error occurred while trying to update menu locations.' ),
-			{ type: 'snackbar' }
-		);
-	};
-
-	if ( ! menuLocations || ! menus?.length ) {
-		return <Spinner />;
-	}
-
-	if ( ! menuLocations.length ) {
-		return (
-			<PanelBody title={ __( 'Theme locations' ) }>
-				<p>{ __( 'There are no available menu locations.' ) }</p>
-			</PanelBody>
-		);
-	}
-
-	const themeLocationCountTextMain = sprintf(
-		// translators: Number of available theme locations.
-		__(
-			'Your current theme provides %d different locations to place menu.'
-		),
-		menuLocations.length
-	);
-
-	const themeLocationCountTextModal = sprintf(
-		// translators: Number of available theme locations.
-		__(
-			'Your current theme supports %d different locations. Select which menu appears in each location.'
-		),
-		menuLocations.length
-	);
-
-	const menusWithSelection = menuLocations.map(
-		( { name, description, menu } ) => {
-			const menuOnLocation = menus
-				.filter( ( { id } ) => ! [ 0, selectedMenuId ].includes( id ) )
-				.find( ( { id } ) => id === menu );
-
-			return (
-				<li
-					key={ name }
-					className="edit-navigation-manage-locations__checklist-item"
-				>
-					<CheckboxControl
-						className="edit-navigation-manage-locations__menu-location-checkbox"
-						checked={ menu === selectedMenuId }
-						onChange={ () =>
-							toggleMenuLocationAssignment( name, selectedMenuId )
-						}
-						label={ description }
-						help={
-							menuOnLocation &&
-							sprintf(
-								// translators: menu name.
-								__( 'Currently using %s' ),
-								decodeEntities( menuOnLocation.name )
-							)
-						}
-					/>
-				</li>
-			);
-		}
-	);
-
-	const menuLocationCard = menuLocations.map( ( menuLocation ) => (
-		<div
-			key={ menuLocation.name }
-			className="edit-navigation-manage-locations__menu-entry"
-		>
-			<SelectControl
-				key={ menuLocation.name }
-				className="edit-navigation-manage-locations__select-menu"
-				label={ menuLocation.description }
-				labelPosition="top"
-				value={ decodeEntities( menuLocation.menu ) }
-				options={ [
-					{ value: 0, label: __( 'Select a Menu' ), key: 0 },
-					...menus.map( ( { id, name } ) => ( {
-						key: id,
-						value: id,
-						label: decodeEntities( name ),
-					} ) ),
-				] }
-				onChange={ ( menuId ) => {
-					assignMenuToLocation( menuLocation.name, Number( menuId ) );
-				} }
-			/>
-			<Button
-				variant="secondary"
-				style={ {
-					visibility: !! menuLocation.menu ? 'visible' : 'hidden',
-				} }
-				className="edit-navigation-manage-locations__edit-button"
-				onClick={ () => (
-					closeModal(), onSelectMenu( menuLocation.menu )
-				) }
-			>
-				{ __( 'Edit' ) }
-			</Button>
-		</div>
-	) );
-
-	return (
-		<PanelBody title={ __( 'Theme locations' ) }>
-			<div className="edit-navigation-manage-locations__theme-location-text-main">
-				{ themeLocationCountTextMain }
-			</div>
-			<ul className="edit-navigation-manage-locations__checklist">
-				{ menusWithSelection }
-			</ul>
-			<Button
-				variant="secondary"
-				className="edit-navigation-manage-locations__open-menu-locations-modal-button"
-				aria-expanded={ isModalOpen }
-				onClick={ openModal }
-			>
-				{ __( 'Manage locations' ) }
-			</Button>
-			{ isModalOpen && (
-				<Modal
-					className="edit-navigation-manage-locations__modal"
-					title={ __( 'Manage locations' ) }
-					onRequestClose={ closeModal }
-				>
-					<div className="edit-navigation-manage-locations__theme-location-text-modal">
-						{ themeLocationCountTextModal }
-					</div>
-					{ menuLocationCard }
-					<Button
-						className="edit-navigation-manage-locations__save-button"
-						variant="primary"
-						onClick={ handleUpdateMenuLocations }
-					>
-						{ __( 'Update' ) }
-					</Button>
-				</Modal>
-			) }
-		</PanelBody>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/menu-settings.js b/packages/edit-navigation/src/components/sidebar/menu-settings.js
deleted file mode 100644
index b07bfd2062302f..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/menu-settings.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { NameEditor } from '../name-editor';
-import AutoAddPages from './auto-add-pages';
-
-export default function MenuSettings( { menuId } ) {
-	return (
-		<PanelBody title={ __( 'Menu settings' ) }>
-			<NameEditor />
-			<AutoAddPages menuId={ menuId } />
-		</PanelBody>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/sidebar-header.js b/packages/edit-navigation/src/components/sidebar/sidebar-header.js
deleted file mode 100644
index c41f3f5076377a..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/sidebar-header.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { SIDEBAR_BLOCK, SIDEBAR_MENU, SIDEBAR_SCOPE } from '../../constants';
-
-export default function SidebarHeader( { sidebarName } ) {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const openMenuSettings = () =>
-		enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_MENU );
-	const openBlockSettings = () =>
-		enableComplementaryArea( SIDEBAR_SCOPE, SIDEBAR_BLOCK );
-
-	const [ menuAriaLabel, menuActiveClass ] =
-		sidebarName === SIDEBAR_MENU
-			? // translators: ARIA label for the Menu sidebar tab, selected.
-			  [ __( 'Menu (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Menu Settings Sidebar tab, not selected.
-			  [ __( 'Menu' ), '' ];
-
-	const [ blockAriaLabel, blockActiveClass ] =
-		sidebarName === SIDEBAR_BLOCK
-			? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-			  [ __( 'Block (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-			  [ __( 'Block' ), '' ];
-
-	/* Use a list so screen readers will announce how many tabs there are. */
-	return (
-		<ul>
-			<li>
-				<Button
-					onClick={ openMenuSettings }
-					className={ `edit-navigation-sidebar__panel-tab ${ menuActiveClass }` }
-					aria-label={ menuAriaLabel }
-					// translators: Data label for the Menu Settings Sidebar tab.
-					data-label={ __( 'Menu' ) }
-				>
-					{
-						// translators: Text label for the Menu Settings Sidebar tab.
-						__( 'Menu' )
-					}
-				</Button>
-			</li>
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ `edit-navigation-sidebar__panel-tab ${ blockActiveClass }` }
-					aria-label={ blockAriaLabel }
-					// translators: Data label for the Block Settings Sidebar tab.
-					data-label={ __( 'Block' ) }
-				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
-					}
-				</Button>
-			</li>
-		</ul>
-	);
-}
diff --git a/packages/edit-navigation/src/components/sidebar/style.scss b/packages/edit-navigation/src/components/sidebar/style.scss
deleted file mode 100644
index 55ca7f363fa215..00000000000000
--- a/packages/edit-navigation/src/components/sidebar/style.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-.components-panel__header.edit-navigation-sidebar__panel-tabs {
-	justify-content: flex-start;
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-	border-top: 0;
-	margin-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
-
-	.components-button.has-icon {
-		display: none;
-		margin: 0 0 0 auto;
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}
-
-.components-button.edit-navigation-sidebar__panel-tab {
-	border-radius: 0;
-	height: $grid-unit-60;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 500;
-
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
-	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
-	}
-
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-	}
-
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-	}
-}
-
-.edit-navigation-inspector-additions__delete-menu-button {
-	width: 100%;
-	justify-content: center;
-}
-
-.edit-navigation-manage-locations__modal {
-	max-width: 360px;
-}
-
-.edit-navigation-manage-locations__delete-menu-panel {
-	text-align: center;
-}
-
-.edit-navigation-manage-locations__menu-entry .components-base-control {
-	width: 100%;
-}
-
-.edit-navigation-manage-locations__edit-button {
-	flex: 1;
-}
-
-.edit-navigation-manage-locations__menu-entry {
-	display: flex;
-	align-items: flex-end;
-	margin-bottom: $grid-unit-15;
-	margin-top: $grid-unit-15;
-
-	button {
-		height: 100%;
-		margin-bottom: 8px;
-	}
-}
-
-.edit-navigation-manage-locations__select-menu {
-	padding-right: $grid-unit-10;
-}
-
-.edit-navigation-manage-locations__open-menu-locations-modal-button {
-	width: 100%;
-	justify-content: center;
-}
-
-.edit-navigation-manage-locations__theme-location-text-main,
-.edit-navigation-manage-locations__theme-location-text-modal {
-	margin-bottom: $grid-unit-30;
-}
-
-.edit-navigation-manage-locations__save-button {
-	float: right;
-}
diff --git a/packages/edit-navigation/src/constants/index.js b/packages/edit-navigation/src/constants/index.js
deleted file mode 100644
index d15d67576f798b..00000000000000
--- a/packages/edit-navigation/src/constants/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * "Kind" of the menu post.
- *
- * @type {string}
- */
-export const MENU_KIND = 'root';
-
-/**
- * "post type" of the menu post.
- *
- * @type {string}
- */
-export const MENU_POST_TYPE = 'menu';
-
-/**
- * "Kind" of the navigation post.
- *
- * @type {string}
- */
-export const NAVIGATION_POST_KIND = 'root';
-
-/**
- * "post type" of the navigation post.
- *
- * @type {string}
- */
-export const NAVIGATION_POST_POST_TYPE = 'navigationPost';
-
-/**
- * The scope name of the editor's complementary area.
- *
- * @type {string}
- */
-export const SIDEBAR_SCOPE = 'core/edit-navigation';
-
-/**
- * The identifier of the editor's menu complementary area.
- *
- * @type {string}
- */
-export const SIDEBAR_MENU = 'edit-navigation/menu';
-
-/**
- * The identifier of the editor's block complementary area.
- *
- * @type {string}
- */
-export const SIDEBAR_BLOCK = 'edit-navigation/block-inspector';
-
-/**
- * The string identifier for the menu item's "target" attribute indicating
- * the menu item link should open in a new tab.
- *
- * @type {string}
- */
-export const NEW_TAB_TARGET_ATTRIBUTE = '_blank';
diff --git a/packages/edit-navigation/src/filters/add-menu-name-editor.js b/packages/edit-navigation/src/filters/add-menu-name-editor.js
deleted file mode 100644
index f69df77f8080fc..00000000000000
--- a/packages/edit-navigation/src/filters/add-menu-name-editor.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import NameDisplay from '../components/name-display';
-
-const addMenuNameEditor = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( props.name !== 'core/navigation' ) {
-			return <BlockEdit { ...props } />;
-		}
-		return (
-			<>
-				<NameDisplay />
-				<BlockEdit { ...props } />
-			</>
-		);
-	},
-	'withMenuName'
-);
-
-export default () =>
-	addFilter(
-		'editor.BlockEdit',
-		'core/edit-navigation/with-menu-name',
-		addMenuNameEditor
-	);
diff --git a/packages/edit-navigation/src/filters/add-navigation-editor-custom-appender.js b/packages/edit-navigation/src/filters/add-navigation-editor-custom-appender.js
deleted file mode 100644
index bedc05b3694512..00000000000000
--- a/packages/edit-navigation/src/filters/add-navigation-editor-custom-appender.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import {
-	InnerBlocks,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-function CustomAppender() {
-	return <InnerBlocks.ButtonBlockAppender isToggle />;
-}
-
-function EnhancedNavigationBlock( { blockEdit: BlockEdit, ...props } ) {
-	const clientId = props.clientId;
-	const {
-		noBlockSelected,
-		isSelected,
-		isImmediateParentOfSelectedBlock,
-		selectedBlockHasDescendants,
-	} = useSelect(
-		( select ) => {
-			const {
-				getClientIdsOfDescendants,
-				hasSelectedInnerBlock,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
-			const _isImmediateParentOfSelectedBlock = hasSelectedInnerBlock(
-				clientId,
-				false
-			);
-			const selectedBlockId = getSelectedBlockClientId();
-			const _selectedBlockHasDescendants = !! getClientIdsOfDescendants( [
-				selectedBlockId,
-			] )?.length;
-
-			return {
-				isSelected: selectedBlockId === clientId,
-				noBlockSelected: ! selectedBlockId,
-				isImmediateParentOfSelectedBlock:
-					_isImmediateParentOfSelectedBlock,
-				selectedBlockHasDescendants: _selectedBlockHasDescendants,
-			};
-		},
-		[ clientId ]
-	);
-
-	const customAppender =
-		noBlockSelected ||
-		isSelected ||
-		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants )
-			? CustomAppender
-			: false;
-
-	return <BlockEdit { ...props } customAppender={ customAppender } />;
-}
-
-const addNavigationEditorCustomAppender = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( props.name !== 'core/navigation' ) {
-			return <BlockEdit { ...props } />;
-		}
-
-		// Use a separate component so that `useSelect` only run on the navigation block.
-		return <EnhancedNavigationBlock blockEdit={ BlockEdit } { ...props } />;
-	},
-	'withNavigationEditorCustomAppender'
-);
-
-export default () =>
-	addFilter(
-		'editor.BlockEdit',
-		'core/edit-navigation/with-navigation-editor-custom-appender',
-		addNavigationEditorCustomAppender
-	);
diff --git a/packages/edit-navigation/src/filters/add-navigation-editor-placeholder.js b/packages/edit-navigation/src/filters/add-navigation-editor-placeholder.js
deleted file mode 100644
index 94b62fea180572..00000000000000
--- a/packages/edit-navigation/src/filters/add-navigation-editor-placeholder.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BlockPlaceholder from '../components/block-placeholder';
-
-const addNavigationEditorPlaceholder = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( props.name !== 'core/navigation' ) {
-			return <BlockEdit { ...props } />;
-		}
-		return (
-			<BlockEdit { ...props } customPlaceholder={ BlockPlaceholder } />
-		);
-	},
-	'withNavigationEditorPlaceholder'
-);
-
-export default () =>
-	addFilter(
-		'editor.BlockEdit',
-		'core/edit-navigation/with-navigation-editor-placeholder',
-		addNavigationEditorPlaceholder
-	);
diff --git a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js b/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
deleted file mode 100644
index f8426c7dd9137d..00000000000000
--- a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-/**
- * External dependencies
- */
-import { set } from 'lodash';
-
-function disableInsertingNonNavigationBlocks( settings, name ) {
-	if (
-		! [
-			'core/navigation',
-			'core/navigation-link',
-			'core/navigation-submenu',
-		].includes( name )
-	) {
-		set( settings, [ 'supports', 'inserter' ], false );
-	}
-	return settings;
-}
-
-export default () =>
-	addFilter(
-		'blocks.registerBlockType',
-		'core/edit-navigation/disable-inserting-non-navigation-blocks',
-		disableInsertingNonNavigationBlocks
-	);
diff --git a/packages/edit-navigation/src/filters/index.js b/packages/edit-navigation/src/filters/index.js
deleted file mode 100644
index 17074eb87c6603..00000000000000
--- a/packages/edit-navigation/src/filters/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import addNavigationEditorCustomAppender from './add-navigation-editor-custom-appender';
-import addNavigationEditorPlaceholder from './add-navigation-editor-placeholder';
-import addMenuNameEditor from './add-menu-name-editor';
-import disableInsertingNonNavigationBlocks from './disable-inserting-non-navigation-blocks';
-import removeEditUnsupportedFeatures from './remove-edit-unsupported-features';
-import removeSettingsUnsupportedFeatures from './remove-settings-unsupported-features';
-
-export const addFilters = (
-	shouldAddDisableInsertingNonNavigationBlocksFilter
-) => {
-	addNavigationEditorCustomAppender();
-	addNavigationEditorPlaceholder();
-	addMenuNameEditor();
-	if ( shouldAddDisableInsertingNonNavigationBlocksFilter ) {
-		disableInsertingNonNavigationBlocks();
-	}
-	removeEditUnsupportedFeatures();
-	removeSettingsUnsupportedFeatures();
-};
diff --git a/packages/edit-navigation/src/filters/remove-edit-unsupported-features.js b/packages/edit-navigation/src/filters/remove-edit-unsupported-features.js
deleted file mode 100644
index 2c58b995158d4d..00000000000000
--- a/packages/edit-navigation/src/filters/remove-edit-unsupported-features.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-const removeNavigationBlockEditUnsupportedFeatures = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( props.name !== 'core/navigation' ) {
-			return <BlockEdit { ...props } />;
-		}
-
-		return (
-			<BlockEdit
-				{ ...props }
-				hasSubmenuIndicatorSetting={ false }
-				hasItemJustificationControls={ false }
-				hasColorSettings={ false }
-			/>
-		);
-	},
-	'removeNavigationBlockEditUnsupportedFeatures'
-);
-
-export default () =>
-	addFilter(
-		'editor.BlockEdit',
-		'core/edit-navigation/remove-navigation-block-edit-unsupported-features',
-		removeNavigationBlockEditUnsupportedFeatures
-	);
diff --git a/packages/edit-navigation/src/filters/remove-settings-unsupported-features.js b/packages/edit-navigation/src/filters/remove-settings-unsupported-features.js
deleted file mode 100644
index 26d62f9ec6448c..00000000000000
--- a/packages/edit-navigation/src/filters/remove-settings-unsupported-features.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-
-function removeNavigationBlockSettingsUnsupportedFeatures( settings, name ) {
-	if ( name !== 'core/navigation' ) {
-		return settings;
-	}
-
-	return {
-		...settings,
-		supports: {
-			customClassName: false,
-			html: false,
-			inserter: true,
-		},
-		// Remove any block variations.
-		variations: undefined,
-	};
-}
-
-export default () =>
-	addFilter(
-		'blocks.registerBlockType',
-		'core/edit-navigation/remove-navigation-block-settings-unsupported-features',
-		removeNavigationBlockSettingsUnsupportedFeatures
-	);
diff --git a/packages/edit-navigation/src/hooks/index.js b/packages/edit-navigation/src/hooks/index.js
deleted file mode 100644
index 45b10d609a457d..00000000000000
--- a/packages/edit-navigation/src/hooks/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { createContext } from '@wordpress/element';
-
-export const untitledMenu = __( '(untitled menu)' );
-export const IsMenuNameControlFocusedContext = createContext();
-
-export { default as useMenuEntity } from './use-menu-entity';
-export { default as useMenuEntityProp } from './use-menu-entity-prop';
-export { default as useNavigationEditor } from './use-navigation-editor';
-export { default as useMenuNotifications } from './use-menu-notifications';
-export { default as useSelectedMenuId } from './use-selected-menu-id';
-export { default as useMenuLocations } from './use-menu-locations';
-export { default as useNavigationEditorRootBlock } from './use-navigation-editor-root-block';
diff --git a/packages/edit-navigation/src/hooks/use-menu-entity-prop.js b/packages/edit-navigation/src/hooks/use-menu-entity-prop.js
deleted file mode 100644
index 50bb2c13ae730a..00000000000000
--- a/packages/edit-navigation/src/hooks/use-menu-entity-prop.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { MENU_KIND, MENU_POST_TYPE } from '../constants';
-
-/**
- * Returns the value and setter for the specified
- * property of the menu.
- *
- * @param {string} prop   A Property name.
- * @param {string} menuId A menu ID.
- *
- * @return {[*, Function]} A tuple where the first item is the
- *                         property value and the second is the
- *                         setter.
- */
-export default function useMenuEntityProp( prop, menuId ) {
-	return useEntityProp( MENU_KIND, MENU_POST_TYPE, prop, menuId );
-}
diff --git a/packages/edit-navigation/src/hooks/use-menu-entity.js b/packages/edit-navigation/src/hooks/use-menu-entity.js
deleted file mode 100644
index 183b793ca8dcfb..00000000000000
--- a/packages/edit-navigation/src/hooks/use-menu-entity.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-/**
- * Internal dependencies
- */
-import { MENU_KIND, MENU_POST_TYPE } from '../constants';
-
-export default function useMenuEntity( menuId ) {
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	const menuEntityData = [ MENU_KIND, MENU_POST_TYPE, menuId ];
-	const { editedMenu, hasLoadedEditedMenu } = useSelect(
-		( select ) => {
-			return {
-				editedMenu:
-					menuId &&
-					select( coreStore ).getEditedEntityRecord(
-						...menuEntityData
-					),
-				hasLoadedEditedMenu: select( coreStore ).hasFinishedResolution(
-					'getEditedEntityRecord',
-					[ ...menuEntityData ]
-				),
-			};
-		},
-		[ menuId ]
-	);
-
-	return {
-		editedMenu,
-		menuEntityData,
-		editMenuEntityRecord: editEntityRecord,
-		hasLoadedEditedMenu,
-	};
-}
diff --git a/packages/edit-navigation/src/hooks/use-menu-locations.js b/packages/edit-navigation/src/hooks/use-menu-locations.js
deleted file mode 100644
index a60b57c9ad852b..00000000000000
--- a/packages/edit-navigation/src/hooks/use-menu-locations.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * External dependencies
- */
-import { merge } from 'lodash';
-/**
- * Internal dependencies
- */
-import { useMenuEntity, useSelectedMenuId } from './index';
-
-const locationsForMenuId = ( menuLocationsByName, id ) =>
-	Object.values( menuLocationsByName )
-		.filter( ( { menu } ) => menu === id )
-		.map( ( { name } ) => name );
-
-export default function useMenuLocations() {
-	const [ menuLocationsByName, setMenuLocationsByName ] = useState( null );
-
-	const [ menuId ] = useSelectedMenuId();
-	const { editMenuEntityRecord, menuEntityData } = useMenuEntity( menuId );
-	useEffect( () => {
-		let isMounted = true;
-
-		const fetchMenuLocationsByName = async () => {
-			const newMenuLocationsByName = await apiFetch( {
-				method: 'GET',
-				path: '/wp/v2/menu-locations',
-			} );
-
-			if ( isMounted ) {
-				setMenuLocationsByName( newMenuLocationsByName );
-			}
-		};
-
-		fetchMenuLocationsByName();
-		return () => ( isMounted = false );
-	}, [] );
-
-	const assignMenuToLocation = useCallback(
-		async ( locationName, newMenuId ) => {
-			const oldMenuId = menuLocationsByName[ locationName ].menu;
-
-			const newMenuLocationsByName = merge( menuLocationsByName, {
-				[ locationName ]: { menu: newMenuId },
-			} );
-
-			setMenuLocationsByName( newMenuLocationsByName );
-
-			const activeMenuId = newMenuId || oldMenuId;
-			editMenuEntityRecord( ...menuEntityData, {
-				locations: locationsForMenuId(
-					newMenuLocationsByName,
-					activeMenuId
-				),
-			} );
-		},
-		[ menuLocationsByName ]
-	);
-
-	const toggleMenuLocationAssignment = ( locationName, newMenuId ) => {
-		const idToSet =
-			menuLocationsByName[ locationName ].menu === newMenuId
-				? 0
-				: newMenuId;
-		assignMenuToLocation( locationName, idToSet );
-	};
-
-	const menuLocations = useMemo(
-		() => Object.values( menuLocationsByName || {} ),
-		[ menuLocationsByName ]
-	);
-
-	return {
-		menuLocations,
-		assignMenuToLocation,
-		toggleMenuLocationAssignment,
-	};
-}
diff --git a/packages/edit-navigation/src/hooks/use-menu-notifications.js b/packages/edit-navigation/src/hooks/use-menu-notifications.js
deleted file mode 100644
index 11238d9c921d2f..00000000000000
--- a/packages/edit-navigation/src/hooks/use-menu-notifications.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { MENU_POST_TYPE, MENU_KIND } from '../constants';
-
-export default function useMenuNotifications( menuId ) {
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const lastDeleteError = useSelect(
-		( select ) => {
-			return select( coreStore ).getLastEntityDeleteError(
-				MENU_KIND,
-				MENU_POST_TYPE,
-				menuId
-			);
-		},
-		[ menuId ]
-	);
-
-	useEffect( () => {
-		if ( lastDeleteError ) {
-			createErrorNotice( stripHTML( lastDeleteError?.message ), {
-				id: 'edit-navigation-error',
-			} );
-		}
-	}, [ lastDeleteError ] );
-}
diff --git a/packages/edit-navigation/src/hooks/use-navigation-editor-root-block.js b/packages/edit-navigation/src/hooks/use-navigation-editor-root-block.js
deleted file mode 100644
index 61ccf0751fbcce..00000000000000
--- a/packages/edit-navigation/src/hooks/use-navigation-editor-root-block.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-
-const useNavigationEditorRootBlock = () => {
-	return useSelect( ( select ) => {
-		const { getBlockOrder } = select( blockEditorStore );
-
-		const lockedNavigationBlock = getBlockOrder()[ 0 ];
-
-		return {
-			navBlockClientId: lockedNavigationBlock,
-			lastNavBlockItemIndex: getBlockOrder( lockedNavigationBlock )
-				.length,
-		};
-	}, [] );
-};
-
-export default useNavigationEditorRootBlock;
diff --git a/packages/edit-navigation/src/hooks/use-navigation-editor.js b/packages/edit-navigation/src/hooks/use-navigation-editor.js
deleted file mode 100644
index 209c314face92a..00000000000000
--- a/packages/edit-navigation/src/hooks/use-navigation-editor.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editNavigationStore } from '../store';
-import { useSelectedMenuId } from './index';
-import useMenuEntity from './use-menu-entity';
-
-const getMenusData = ( select ) => {
-	const selectors = select( 'core' );
-	const params = { per_page: -1 };
-	return {
-		menus: selectors.getMenus( params ),
-		hasLoadedMenus: selectors.hasFinishedResolution( 'getMenus', [
-			params,
-		] ),
-	};
-};
-export default function useNavigationEditor() {
-	const { deleteMenu: _deleteMenu } = useDispatch( coreStore );
-	const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId();
-	const [ hasFinishedInitialLoad, setHasFinishedInitialLoad ] =
-		useState( false );
-	const { editedMenu, hasLoadedEditedMenu } = useMenuEntity( selectedMenuId );
-	const { menus, hasLoadedMenus } = useSelect( getMenusData, [] );
-
-	/**
-	 * If the Menu being edited has been requested from API and it has
-	 * no values then it has been deleted so reset the selected menu ID.
-	 */
-	useEffect( () => {
-		if ( hasLoadedEditedMenu && ! Object.keys( editedMenu )?.length ) {
-			setSelectedMenuId( null );
-		}
-	}, [ hasLoadedEditedMenu, editedMenu ] );
-
-	const { createErrorNotice, createInfoNotice } = useDispatch( noticesStore );
-	const isMenuBeingDeleted = useSelect(
-		( select ) =>
-			select( coreStore ).isDeletingEntityRecord(
-				'root',
-				'menu',
-				selectedMenuId
-			),
-		[ selectedMenuId ]
-	);
-	const selectedMenuName =
-		menus?.find( ( { id } ) => id === selectedMenuId )?.name || '';
-
-	useEffect( () => {
-		if ( hasLoadedMenus ) {
-			setHasFinishedInitialLoad( true );
-		}
-	}, [ hasLoadedMenus ] );
-
-	const navigationPost = useSelect(
-		( select ) => {
-			if ( ! selectedMenuId ) {
-				return;
-			}
-			return select( editNavigationStore ).getNavigationPostForMenu(
-				selectedMenuId
-			);
-		},
-		[ selectedMenuId ]
-	);
-
-	const deleteMenu = async () => {
-		const didDeleteMenu = await _deleteMenu( selectedMenuId, {
-			force: true,
-		} );
-		if ( didDeleteMenu ) {
-			setSelectedMenuId( null );
-			createInfoNotice(
-				sprintf(
-					// translators: %s: the name of a menu.
-					__( '"%s" menu has been deleted' ),
-					selectedMenuName
-				),
-				{
-					type: 'snackbar',
-					isDismissible: true,
-				}
-			);
-		} else {
-			createErrorNotice( __( 'Menu deletion unsuccessful' ) );
-		}
-	};
-
-	return {
-		menus,
-		hasLoadedMenus,
-		hasFinishedInitialLoad,
-		selectedMenuId,
-		navigationPost,
-		isMenuBeingDeleted,
-		selectMenu: setSelectedMenuId,
-		deleteMenu,
-		isMenuSelected: !! selectedMenuId,
-	};
-}
diff --git a/packages/edit-navigation/src/hooks/use-selected-menu-id.js b/packages/edit-navigation/src/hooks/use-selected-menu-id.js
deleted file mode 100644
index c15bdced2e875a..00000000000000
--- a/packages/edit-navigation/src/hooks/use-selected-menu-id.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Returns selected menu ID and the setter.
- *
- * @return {[number, Function]} A tuple where first item is the
- *                              selected menu ID and second is
- *                              the setter.
- */
-export default function useSelectedMenuId() {
-	const selectedMenuId =
-		useSelect(
-			( select ) =>
-				select( preferencesStore ).get(
-					'core/edit-navigation',
-					'selectedMenuId'
-				),
-			[]
-		) ?? null;
-
-	const { set } = useDispatch( preferencesStore );
-	const setSelectedMenuId = useCallback(
-		( menuId ) => set( 'core/edit-navigation', 'selectedMenuId', menuId ),
-		[ set ]
-	);
-
-	return [ selectedMenuId, setSelectedMenuId ];
-}
diff --git a/packages/edit-navigation/src/index.js b/packages/edit-navigation/src/index.js
deleted file mode 100644
index d37cb03181d984..00000000000000
--- a/packages/edit-navigation/src/index.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import {
-	registerCoreBlocks,
-	__experimentalRegisterExperimentalCoreBlocks,
-} from '@wordpress/block-library';
-import { dispatch, useDispatch } from '@wordpress/data';
-import { render, useMemo } from '@wordpress/element';
-import {
-	__experimentalFetchUrlData,
-	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { NAVIGATION_POST_KIND, NAVIGATION_POST_POST_TYPE } from './constants';
-import { store as editNavigationStore } from './store';
-import { addFilters } from './filters';
-import Layout from './components/layout';
-
-function NavEditor( { settings } ) {
-	const { setIsInserterOpened } = useDispatch( editNavigationStore );
-
-	// Allows the QuickInserter to toggle the sidebar inserter.
-	// This is marked as experimental to give time for the quick inserter to mature.
-	const __experimentalSetIsInserterOpened = setIsInserterOpened;
-
-	// Provide link suggestions handler to fetch search results for Link UI.
-	const __experimentalFetchLinkSuggestions = ( search, searchOptions ) => {
-		// Bump the default number of suggestions.
-		// See https://github.com/WordPress/gutenberg/issues/34283.
-		searchOptions.perPage = 10;
-		return fetchLinkSuggestions( search, searchOptions, settings );
-	};
-
-	const editorSettings = useMemo( () => {
-		return {
-			...settings,
-			__experimentalFetchLinkSuggestions,
-			__experimentalSetIsInserterOpened,
-			__experimentalFetchRichUrlData: __experimentalFetchUrlData,
-		};
-	}, [
-		settings,
-		__experimentalFetchLinkSuggestions,
-		__experimentalSetIsInserterOpened,
-	] );
-
-	return <Layout blockEditorSettings={ editorSettings } />;
-}
-
-/**
- * Setup and registration of editor.
- *
- * @param {Object} settings blockEditor settings.
- */
-function setUpEditor( settings ) {
-	addFilters( ! settings.blockNavMenus );
-
-	// Set up the navigation post entity.
-	dispatch( coreStore ).addEntities( [
-		{
-			kind: NAVIGATION_POST_KIND,
-			name: NAVIGATION_POST_POST_TYPE,
-			transientEdits: { blocks: true, selection: true },
-			label: __( 'Navigation Post' ),
-			__experimentalNoFetch: true,
-		},
-	] );
-
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
-	registerCoreBlocks();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		__experimentalRegisterExperimentalCoreBlocks();
-	}
-}
-
-/**
- * Initalise and render editor into DOM.
- *
- * @param {string} id       ID of HTML element into which the editor will be rendered.
- * @param {Object} settings blockEditor settings.
- */
-export function initialize( id, settings ) {
-	setUpEditor( settings );
-
-	render(
-		<NavEditor settings={ settings } />,
-		document.getElementById( id )
-	);
-}
-
-export { createMenuPreloadingMiddleware as __unstableCreateMenuPreloadingMiddleware } from './utils';
diff --git a/packages/edit-navigation/src/store/actions.js b/packages/edit-navigation/src/store/actions.js
deleted file mode 100644
index e7a6c20c5447e7..00000000000000
--- a/packages/edit-navigation/src/store/actions.js
+++ /dev/null
@@ -1,377 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreDataStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { STORE_NAME } from './constants';
-import {
-	addRecordIdToBlock,
-	getRecordIdFromBlock,
-	isBlockSupportedInNav,
-} from './utils';
-import { blockToMenuItem, menuItemToBlockAttributes } from './transform';
-import { NAVIGATION_POST_KIND, NAVIGATION_POST_POST_TYPE } from '../constants';
-
-/**
- * Converts all the blocks into menu items and submits a batch request to save everything at once.
- *
- * @param {Object} post A navigation post to process
- * @return {Function} An action creator
- */
-export const saveNavigationPost =
-	( post ) =>
-	async ( { registry, dispatch } ) => {
-		const lock = await registry
-			.dispatch( coreDataStore )
-			.__unstableAcquireStoreLock( STORE_NAME, [ 'savingMenu' ], {
-				exclusive: true,
-			} );
-		try {
-			const menuId = post.meta.menuId;
-
-			// Save menu.
-			await registry
-				.dispatch( coreDataStore )
-				.saveEditedEntityRecord( 'root', 'menu', menuId, {
-					throwOnError: true,
-				} );
-
-			// Save menu items.
-			const updatedBlocks = await dispatch(
-				batchSaveMenuItems( post.blocks[ 0 ], menuId )
-			);
-
-			// Clear "stub" navigation post edits to avoid a false "dirty" state.
-			registry
-				.dispatch( coreDataStore )
-				.receiveEntityRecords(
-					NAVIGATION_POST_KIND,
-					NAVIGATION_POST_POST_TYPE,
-					post,
-					undefined
-				);
-
-			const updatedPost = {
-				...post,
-				blocks: [ updatedBlocks ],
-			};
-			registry
-				.dispatch( coreDataStore )
-				.receiveEntityRecords(
-					NAVIGATION_POST_KIND,
-					NAVIGATION_POST_POST_TYPE,
-					updatedPost,
-					undefined
-				);
-
-			registry
-				.dispatch( noticesStore )
-				.createSuccessNotice( __( 'Navigation saved.' ), {
-					type: 'snackbar',
-				} );
-		} catch ( saveError ) {
-			const errorMessage = saveError
-				? sprintf(
-						/* translators: %s: The text of an error message (potentially untranslated). */
-						__( "Unable to save: '%s'" ),
-						saveError.message
-				  )
-				: __( 'Unable to save: An error occurred.' );
-			registry.dispatch( noticesStore ).createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		} finally {
-			registry
-				.dispatch( coreDataStore )
-				.__unstableReleaseStoreLock( lock );
-		}
-	};
-
-/**
- * Executes appropriate insert, update, and delete operations to turn the current
- * menu (with id=menuId) into one represented by the passed navigation block.
- *
- * @param {Object} navigationBlock The navigation block representing the desired state of the menu.
- * @param {number} menuId          Menu Id to process.
- * @return {Function} An action creator
- */
-const batchSaveMenuItems =
-	( navigationBlock, menuId ) =>
-	async ( { dispatch, registry } ) => {
-		// Make sure all the existing menu items are available before proceeding.
-		const oldMenuItems = await registry
-			.resolveSelect( coreDataStore )
-			.getMenuItems( { menus: menuId, per_page: -1 } );
-
-		// Insert placeholders for new menu items to have an ID to work with.
-		// We need that in case these new items have any children. If so,
-		// we need to provide a parent id that we don't have yet.
-		const navBlockWithRecordIds = await dispatch(
-			batchInsertPlaceholderMenuItems( navigationBlock )
-		);
-
-		// Update menu items. This is separate from deleting, because there
-		// are no consistency guarantees and we don't want to delete something
-		// that was a parent node before another node takes it place.
-		const navBlockAfterUpdates = await dispatch(
-			batchUpdateMenuItems( navBlockWithRecordIds, menuId )
-		);
-
-		// Delete menu items.
-		const deletedIds = oldMenuItems
-			.map( ( { id } ) => id )
-			.filter(
-				( id ) =>
-					! blocksTreeToList( navBlockAfterUpdates )
-						.map( getRecordIdFromBlock )
-						.includes( id )
-			);
-
-		await dispatch( batchDeleteMenuItems( deletedIds ) );
-
-		return navBlockAfterUpdates;
-	};
-
-/**
- * Creates a menu item for every block that doesn't have an associated menuItem.
- * Sends a batch request with one POST /wp/v2/menu-items for every created menu item.
- *
- * @param {Object} navigationBlock A navigation block to find created menu items in.
- * @return {Function} An action creator
- */
-const batchInsertPlaceholderMenuItems =
-	( navigationBlock ) =>
-	async ( { registry } ) => {
-		const blocksWithoutRecordId = blocksTreeToList(
-			navigationBlock
-		).filter(
-			( block ) =>
-				isBlockSupportedInNav( block ) &&
-				! getRecordIdFromBlock( block )
-		);
-
-		const tasks = blocksWithoutRecordId.map(
-			() =>
-				( { saveEntityRecord } ) =>
-					saveEntityRecord( 'root', 'menuItem', {
-						title: __( 'Menu item' ),
-						url: '#placeholder',
-						menu_order: 1,
-					} )
-		);
-
-		const results = await registry
-			.dispatch( coreDataStore )
-			.__experimentalBatch( tasks );
-
-		// Return an updated navigation block with all the IDs in.
-		const blockToResult = new Map(
-			blocksWithoutRecordId.map( ( block, index ) => [
-				block,
-				results[ index ],
-			] )
-		);
-		return mapBlocksTree( navigationBlock, ( block ) => {
-			if ( ! blockToResult.has( block ) ) {
-				return block;
-			}
-			return addRecordIdToBlock( block, blockToResult.get( block ).id );
-		} );
-	};
-
-/**
- * Updates every menu item where a related block has changed.
- * Sends a batch request with one PUT /wp/v2/menu-items for every updated menu item.
- *
- * @param {Object} navigationBlock A navigation block to find updated menu items in.
- * @param {number} menuId          Menu ID.
- * @return {Function} An action creator
- */
-const batchUpdateMenuItems =
-	( navigationBlock, menuId ) =>
-	async ( { registry } ) => {
-		const allMenuItems = blocksTreeToAnnotatedList( navigationBlock );
-		const unsupportedMenuItems = allMenuItems
-			.filter( ( { block } ) => ! isBlockSupportedInNav( block ) )
-			.map( ( { block } ) => block.name );
-		if ( unsupportedMenuItems.length ) {
-			window.console.warn(
-				sprintf(
-					// translators: %s: Name of block (i.e. core/legacy-widget)
-					__(
-						'The following blocks haven\'t been saved because they are not supported: "%s".'
-					),
-					unsupportedMenuItems.join( '", "' )
-				)
-			);
-		}
-		const updatedMenuItems = allMenuItems
-			// Filter out unsupported blocks.
-			.filter( ( { block } ) => isBlockSupportedInNav( block ) )
-			// Transform the blocks into menu items.
-			.map( ( { block, parentBlock, childIndex } ) =>
-				blockToMenuItem(
-					block,
-					registry
-						.select( coreDataStore )
-						.getMenuItem( getRecordIdFromBlock( block ) ),
-					getRecordIdFromBlock( parentBlock ),
-					childIndex,
-					menuId
-				)
-			)
-			// Filter out menu items without any edits.
-			.filter( ( menuItem ) => {
-				// Update an existing entity record.
-				registry
-					.dispatch( coreDataStore )
-					.editEntityRecord(
-						'root',
-						'menuItem',
-						menuItem.id,
-						menuItem,
-						{
-							undoIgnore: true,
-						}
-					);
-
-				return registry
-					.select( coreDataStore )
-					.hasEditsForEntityRecord( 'root', 'menuItem', menuItem.id );
-			} );
-
-		// Map the edited menu items to batch tasks.
-		const tasks = updatedMenuItems.map(
-			( menuItem ) =>
-				( { saveEditedEntityRecord } ) =>
-					saveEditedEntityRecord( 'root', 'menuItem', menuItem.id )
-		);
-
-		await registry.dispatch( coreDataStore ).__experimentalBatch( tasks );
-
-		// Throw on failure. @TODO failures should be thrown in core-data
-		updatedMenuItems.forEach( ( menuItem ) => {
-			const failure = registry
-				.select( coreDataStore )
-				.getLastEntitySaveError( 'root', 'menuItem', menuItem.id );
-			if ( failure ) {
-				throw new Error( failure.message );
-			}
-		} );
-
-		// Return an updated navigation block reflecting the changes persisted in the batch update.
-		return mapBlocksTree( navigationBlock, ( block ) => {
-			if ( ! isBlockSupportedInNav( block ) ) {
-				return block;
-			}
-			const updatedMenuItem = registry
-				.select( coreDataStore )
-				.getMenuItem( getRecordIdFromBlock( block ) );
-
-			return addRecordIdToBlock(
-				{
-					...block,
-					attributes: menuItemToBlockAttributes( updatedMenuItem ),
-				},
-				updatedMenuItem.id
-			);
-		} );
-	};
-
-/**
- * Deletes multiple menu items.
- * Sends a batch request with one DELETE /wp/v2/menu-items for every deleted menu item.
- *
- * @param {Object} deletedIds A list of menu item ids to delete
- * @return {Function} An action creator
- */
-const batchDeleteMenuItems =
-	( deletedIds ) =>
-	async ( { registry } ) => {
-		const deleteBatch = deletedIds.map(
-			( id ) =>
-				async ( { deleteEntityRecord } ) => {
-					const success = await deleteEntityRecord(
-						'root',
-						'menuItem',
-						id,
-						{
-							force: true,
-						}
-					);
-					// @TODO failures should be thrown in core-data
-					if ( ! success ) {
-						throw new Error( id );
-					}
-					return success;
-				}
-		);
-
-		return await registry
-			.dispatch( coreDataStore )
-			.__experimentalBatch( deleteBatch );
-	};
-
-/**
- * Turns a recursive list of blocks into a flat list of blocks annotated with
- * their child index and parent block.
- *
- * @param {Object} parentBlock A parent block to flatten
- * @return {Object} A flat list of blocks, annotated by their index and parent ID, consisting
- * 							    of all the input blocks and all the inner blocks in the tree.
- */
-function blocksTreeToAnnotatedList( parentBlock ) {
-	return ( parentBlock.innerBlocks || [] ).flatMap( ( innerBlock, index ) =>
-		[ { block: innerBlock, parentBlock, childIndex: index } ].concat(
-			blocksTreeToAnnotatedList( innerBlock )
-		)
-	);
-}
-
-function blocksTreeToList( parentBlock ) {
-	return blocksTreeToAnnotatedList( parentBlock ).map(
-		( { block } ) => block
-	);
-}
-
-/**
- * Maps one tree of blocks into another tree by invoking a callback on every node.
- *
- * @param {Object}   block       The root of the mapped tree.
- * @param {Function} callback    The callback to invoke.
- * @param {Object}   parentBlock Internal. The current parent block.
- * @param {number}   idx         Internal. The current child index.
- * @return {Object} A mapped tree.
- */
-function mapBlocksTree( block, callback, parentBlock = null, idx = 0 ) {
-	return {
-		...callback( block, parentBlock, idx ),
-		innerBlocks: ( block.innerBlocks || [] ).map( ( innerBlock, index ) =>
-			mapBlocksTree( innerBlock, callback, block, index )
-		),
-	};
-}
-
-/**
- * Returns an action object used to open/close the inserter.
- *
- * @param {boolean|Object} value                Whether the inserter should be
- *                                              opened (true) or closed (false).
- *                                              To specify an insertion point,
- *                                              use an object.
- * @param {string}         value.rootClientId   The root client ID to insert at.
- * @param {number}         value.insertionIndex The index to insert at.
- *
- * @return {Object} Action object.
- */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
-	};
-}
diff --git a/packages/edit-navigation/src/store/constants.js b/packages/edit-navigation/src/store/constants.js
deleted file mode 100644
index 8617d69ab054c5..00000000000000
--- a/packages/edit-navigation/src/store/constants.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Module Constants
- */
-export const STORE_NAME = 'core/edit-navigation';
diff --git a/packages/edit-navigation/src/store/index.js b/packages/edit-navigation/src/store/index.js
deleted file mode 100644
index 866ed731fc8a8f..00000000000000
--- a/packages/edit-navigation/src/store/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createReduxStore, register } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import reducer from './reducer';
-import * as resolvers from './resolvers';
-import * as selectors from './selectors';
-import * as actions from './actions';
-import { STORE_NAME } from './constants';
-
-/**
- * Store definition for the edit navigation namespace.
- *
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
- */
-export const store = createReduxStore( STORE_NAME, {
-	reducer,
-	selectors,
-	resolvers,
-	actions,
-} );
-
-register( store );
diff --git a/packages/edit-navigation/src/store/reducer.js b/packages/edit-navigation/src/store/reducer.js
deleted file mode 100644
index 22dd6d8fa71949..00000000000000
--- a/packages/edit-navigation/src/store/reducer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { combineReducers } from '@wordpress/data';
-
-/**
- * Reducer tracking whether the inserter is open.
- *
- * @param {boolean|Object} state        Current state.
- * @param {Object}         action       Dispatched action.
- * @param {string}         action.type  String indicating action type.
- * @param {boolean}        action.value Flag indicating whether the panel should be open/close.
- */
-function blockInserterPanel( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_INSERTER_OPENED':
-			return action.value;
-	}
-	return state;
-}
-
-export default combineReducers( {
-	blockInserterPanel,
-} );
diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
deleted file mode 100644
index e022fe04326c62..00000000000000
--- a/packages/edit-navigation/src/store/resolvers.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { NAVIGATION_POST_KIND, NAVIGATION_POST_POST_TYPE } from '../constants';
-import { buildNavigationPostId, menuItemsQuery } from './utils';
-import { menuItemsToBlocks } from './transform';
-
-/**
- * Creates a "stub" navigation post reflecting the contents of menu with id=menuId. The
- * post is meant as a convenient to only exists in runtime and should never be saved. It
- * enables a convenient way of editing the navigation by using a regular post editor.
- *
- * Fetches all menu items, converts them into blocks, and hydrates a new post with them.
- *
- * @param {number} menuId The id of menu to create a post from
- * @return {void}
- */
-export const getNavigationPostForMenu =
-	( menuId ) =>
-	async ( { registry, dispatch } ) => {
-		if ( ! menuId ) {
-			return;
-		}
-
-		const stubPost = createStubPost( menuId );
-		// Persist an empty post to warm up the state.
-		dispatch( persistPost( stubPost ) );
-
-		// Dispatch startResolution to skip the execution of the real getEntityRecord resolver - it would
-		// issue an http request and fail.
-		const args = [
-			NAVIGATION_POST_KIND,
-			NAVIGATION_POST_POST_TYPE,
-			stubPost.id,
-		];
-		registry
-			.dispatch( coreStore )
-			.startResolution( 'getEntityRecord', args );
-
-		// Now let's create a proper one hydrated using actual menu items.
-		const menuItems = await registry
-			.resolveSelect( coreStore )
-			.getMenuItems( menuItemsQuery( menuId ) );
-
-		const navigationBlock = createNavigationBlock( menuItems );
-		// Persist the actual post containing the navigation block.
-		const builtPost = createStubPost( menuId, navigationBlock );
-		dispatch( persistPost( builtPost ) );
-
-		// Dispatch finishResolution to conclude startResolution dispatched earlier.
-		registry
-			.dispatch( coreStore )
-			.finishResolution( 'getEntityRecord', args );
-	};
-
-const createStubPost = ( menuId, navigationBlock = null ) => {
-	const id = buildNavigationPostId( menuId );
-	return {
-		id,
-		slug: id,
-		status: 'draft',
-		type: 'page',
-		blocks: navigationBlock ? [ navigationBlock ] : [],
-		meta: {
-			menuId,
-		},
-	};
-};
-
-const persistPost =
-	( post ) =>
-	( { registry } ) => {
-		registry
-			.dispatch( coreStore )
-			.receiveEntityRecords(
-				NAVIGATION_POST_KIND,
-				NAVIGATION_POST_POST_TYPE,
-				post,
-				{ id: post.id },
-				false
-			);
-	};
-
-/**
- * Converts an adjacency list of menuItems into a navigation block.
- *
- * @param {Array} menuItems a list of menu items
- * @return {Object} Navigation block
- */
-function createNavigationBlock( menuItems ) {
-	const innerBlocks = menuItemsToBlocks( menuItems );
-
-	return createBlock(
-		'core/navigation',
-		{
-			orientation: 'vertical',
-		},
-		innerBlocks
-	);
-}
diff --git a/packages/edit-navigation/src/store/selectors.js b/packages/edit-navigation/src/store/selectors.js
deleted file mode 100644
index 824f6845a0f50e..00000000000000
--- a/packages/edit-navigation/src/store/selectors.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createRegistrySelector } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { NAVIGATION_POST_KIND, NAVIGATION_POST_POST_TYPE } from '../constants';
-import { buildNavigationPostId } from './utils';
-
-/**
- * Returns a "stub" navigation post reflecting the contents of menu with id=menuId. The
- * post is meant as a convenient to only exists in runtime and should never be saved. It
- * enables a convenient way of editing the navigation by using a regular post editor.
- *
- * Related resolver fetches all menu items, converts them into blocks, and hydrates a new post with them.
- *
- * @param {number} menuId The id of menu to create a post from.
- * @return {null|Object} Post once the resolver fetches it, otherwise null
- */
-export const getNavigationPostForMenu = createRegistrySelector(
-	( select ) => ( state, menuId ) => {
-		// When the record is unavailable, calling getEditedEntityRecord triggers a http
-		// request via it's related resolver. Let's return nothing until getNavigationPostForMenu
-		// resolver marks the record as resolved.
-		if ( ! hasResolvedNavigationPost( state, menuId ) ) {
-			return null;
-		}
-		return select( coreStore ).getEditedEntityRecord(
-			NAVIGATION_POST_KIND,
-			NAVIGATION_POST_POST_TYPE,
-			buildNavigationPostId( menuId )
-		);
-	}
-);
-
-/**
- * Returns true if the navigation post related to menuId was already resolved.
- *
- * @param {number} menuId The id of menu.
- * @return {boolean} True if the navigation post related to menuId was already resolved, false otherwise.
- */
-export const hasResolvedNavigationPost = createRegistrySelector(
-	( select ) => ( state, menuId ) => {
-		return select( coreStore ).hasFinishedResolution( 'getEntityRecord', [
-			NAVIGATION_POST_KIND,
-			NAVIGATION_POST_POST_TYPE,
-			buildNavigationPostId( menuId ),
-		] );
-	}
-);
-
-/**
- * Returns true if the inserter is opened.
- *
- * @param {Object} state Global application state.
- * @return {boolean} Whether the inserter is opened.
- */
-export function isInserterOpened( state = false ) {
-	return !! state?.blockInserterPanel;
-}
diff --git a/packages/edit-navigation/src/store/test/__snapshots__/resolvers.js.snap b/packages/edit-navigation/src/store/test/__snapshots__/resolvers.js.snap
deleted file mode 100644
index af8bbfcbdd09ad..00000000000000
--- a/packages/edit-navigation/src/store/test/__snapshots__/resolvers.js.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`getNavigationPostForMenu creates a stub navigation post for menu id 1`] = `
-Object {
-  "blocks": Array [
-    Object {
-      "attributes": Object {
-        "orientation": "vertical",
-      },
-      "clientId": "client-id-3",
-      "innerBlocks": Array [
-        Object {
-          "attributes": Object {
-            "__internalRecordId": 100,
-            "className": "menu classes",
-            "description": "description",
-            "id": 123,
-            "kind": "custom",
-            "label": "wp.com",
-            "rel": "nofollow",
-            "title": "link title",
-            "type": "post",
-            "url": "http://wp.com",
-          },
-          "clientId": "client-id-0",
-          "innerBlocks": Array [],
-          "name": "core/navigation-link",
-        },
-        Object {
-          "attributes": Object {
-            "__internalRecordId": 101,
-            "id": 456,
-            "kind": "custom",
-            "label": "wp.org",
-            "opensInNewTab": true,
-            "type": "page",
-            "url": "http://wp.org",
-          },
-          "clientId": "client-id-1",
-          "innerBlocks": Array [],
-          "name": "core/navigation-link",
-        },
-        Object {
-          "attributes": Object {
-            "__internalRecordId": 102,
-            "kind": "post-type",
-            "label": "My Example Page",
-            "opensInNewTab": true,
-            "type": "custom",
-            "url": "/my-example-page/",
-          },
-          "clientId": "client-id-2",
-          "innerBlocks": Array [],
-          "name": "core/navigation-link",
-        },
-      ],
-      "name": "core/navigation",
-    },
-  ],
-  "id": "navigation-post-123",
-  "meta": Object {
-    "menuId": 123,
-  },
-  "slug": "navigation-post-123",
-  "status": "draft",
-  "type": "page",
-}
-`;
diff --git a/packages/edit-navigation/src/store/test/resolvers.js b/packages/edit-navigation/src/store/test/resolvers.js
deleted file mode 100644
index e4fcb87db1ffbe..00000000000000
--- a/packages/edit-navigation/src/store/test/resolvers.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createRegistry } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import {
-	NAVIGATION_POST_KIND,
-	NAVIGATION_POST_POST_TYPE,
-} from '../../constants';
-import { store as editNavigationStore } from '..';
-
-jest.mock( '@wordpress/api-fetch', () => ( {
-	__esModule: true,
-	default: jest.fn(),
-} ) );
-
-// Mock createBlock to avoid creating block in test environment
-jest.mock( '@wordpress/blocks', () => {
-	const blocks = jest.requireActual( '@wordpress/blocks' );
-	let id = 0;
-
-	return {
-		...blocks,
-		createBlock( name, attributes, innerBlocks ) {
-			return {
-				clientId: `client-id-${ id++ }`,
-				name,
-				attributes,
-				innerBlocks,
-			};
-		},
-	};
-} );
-
-function createRegistryWithStores() {
-	// Create a registry and register stores.
-	const registry = createRegistry();
-
-	registry.register( editNavigationStore );
-	registry.register( coreStore );
-
-	// Set up the navigation post entity.
-	registry.dispatch( coreStore ).addEntities( [
-		{
-			kind: NAVIGATION_POST_KIND,
-			name: NAVIGATION_POST_POST_TYPE,
-			transientEdits: { blocks: true, selection: true },
-			label: 'Navigation Post',
-			__experimentalNoFetch: true,
-		},
-	] );
-
-	return registry;
-}
-
-const mockMenuItems = [
-	{
-		id: 100,
-		title: {
-			raw: 'wp.com',
-			rendered: 'wp.com',
-		},
-		url: 'http://wp.com',
-		menu_order: 1,
-		menus: 1,
-		parent: 0,
-		object_id: 123,
-		object: 'post',
-		classes: [ 'menu', 'classes' ],
-		xfn: [ 'nofollow' ],
-		description: 'description',
-		attr_title: 'link title',
-	},
-	{
-		id: 101,
-		title: {
-			raw: 'wp.org',
-			rendered: 'wp.org',
-		},
-		url: 'http://wp.org',
-		menu_order: 2,
-		menus: 1,
-		parent: 0,
-		object_id: 456,
-		object: 'page',
-		classes: [],
-		xfn: [],
-		description: '',
-		attr_title: '',
-		target: '_blank',
-	},
-	{
-		id: 102,
-		title: {
-			raw: 'My Example Page',
-			rendered: 'My Example Page',
-		},
-		url: '/my-example-page/',
-		object_id: 56789,
-		type: 'post-type',
-		menu_order: 3,
-		menus: 1,
-		parent: 0,
-		classes: [],
-		object: 'custom',
-		xfn: [],
-		description: '',
-		attr_title: '',
-		target: '_blank',
-	},
-];
-
-describe( 'getNavigationPostForMenu', () => {
-	jest.useRealTimers();
-
-	apiFetch.mockImplementation( async ( { path, method = 'GET' } ) => {
-		if ( ! path.startsWith( '/wp/v2/menu-items?' ) ) {
-			throw new Error( `unexpected API endpoint: ${ path }` );
-		}
-
-		if ( method === 'GET' ) {
-			return mockMenuItems;
-		}
-
-		throw new Error( `unexpected API endpoint method: ${ method }` );
-	} );
-
-	it( 'returns early when a menuId is not provided', async () => {
-		const menuId = null;
-
-		const registry = createRegistryWithStores();
-		await registry
-			.resolveSelect( editNavigationStore )
-			.getNavigationPostForMenu( menuId );
-
-		const stubPost = registry
-			.select( coreStore )
-			.getEntityRecord( 'root', 'postType', menuId );
-
-		expect( stubPost ).toBeFalsy();
-	} );
-
-	it( 'creates a stub navigation post for menu id', async () => {
-		const menuId = 123;
-
-		const registry = createRegistryWithStores();
-		const stubPost = await registry
-			.resolveSelect( editNavigationStore )
-			.getNavigationPostForMenu( menuId );
-
-		expect( stubPost ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/edit-navigation/src/store/test/selectors.js b/packages/edit-navigation/src/store/test/selectors.js
deleted file mode 100644
index 6cc082a51932e8..00000000000000
--- a/packages/edit-navigation/src/store/test/selectors.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as coreDataStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
-	getNavigationPostForMenu,
-	hasResolvedNavigationPost,
-} from '../selectors';
-import {
-	NAVIGATION_POST_KIND,
-	NAVIGATION_POST_POST_TYPE,
-} from '../../constants';
-
-import { buildNavigationPostId } from '../utils';
-
-describe( 'getNavigationPostForMenu', () => {
-	it( 'gets navigation post for menu', () => {
-		const getEditedEntityRecord = jest.fn( () => 'record' );
-		const hasFinishedResolution = jest.fn( () => true );
-		const registry = {
-			select: jest.fn( () => ( {
-				getEditedEntityRecord,
-				hasFinishedResolution,
-			} ) ),
-		};
-
-		const menuId = 123;
-
-		const defaultRegistry = getNavigationPostForMenu.registry;
-		getNavigationPostForMenu.registry = registry;
-		hasResolvedNavigationPost.registry = registry;
-
-		expect( getNavigationPostForMenu( 'state', menuId ) ).toBe( 'record' );
-
-		expect( registry.select ).toHaveBeenCalledWith( coreDataStore );
-		expect( getEditedEntityRecord ).toHaveBeenCalledWith(
-			NAVIGATION_POST_KIND,
-			NAVIGATION_POST_POST_TYPE,
-			buildNavigationPostId( menuId )
-		);
-
-		getNavigationPostForMenu.registry = defaultRegistry;
-		hasResolvedNavigationPost.registry = defaultRegistry;
-	} );
-
-	it( 'returns null if has not resolved navigation post yet', () => {
-		const getEditedEntityRecord = jest.fn( () => 'record' );
-		const hasFinishedResolution = jest.fn( () => false );
-		const registry = {
-			select: jest.fn( () => ( {
-				getEditedEntityRecord,
-				hasFinishedResolution,
-			} ) ),
-		};
-
-		const menuId = 123;
-
-		const defaultRegistry = getNavigationPostForMenu.registry;
-		getNavigationPostForMenu.registry = registry;
-		hasResolvedNavigationPost.registry = registry;
-
-		expect( getNavigationPostForMenu( 'state', menuId ) ).toBe( null );
-
-		expect( registry.select ).toHaveBeenCalledWith( coreDataStore );
-		expect( getEditedEntityRecord ).not.toHaveBeenCalled();
-
-		getNavigationPostForMenu.registry = defaultRegistry;
-		hasResolvedNavigationPost.registry = defaultRegistry;
-	} );
-} );
-
-describe( 'hasResolvedNavigationPost', () => {
-	it( 'returns if it has resolved navigation post yet', () => {
-		const hasFinishedResolution = jest.fn( () => true );
-		const registry = {
-			select: jest.fn( () => ( {
-				hasFinishedResolution,
-			} ) ),
-		};
-
-		const menuId = 123;
-
-		const defaultRegistry = getNavigationPostForMenu.registry;
-		hasResolvedNavigationPost.registry = registry;
-
-		expect( hasResolvedNavigationPost( 'state', menuId ) ).toBe( true );
-
-		expect( registry.select ).toHaveBeenCalledWith( coreDataStore );
-		expect( hasFinishedResolution ).toHaveBeenCalledWith(
-			'getEntityRecord',
-			[
-				NAVIGATION_POST_KIND,
-				NAVIGATION_POST_POST_TYPE,
-				buildNavigationPostId( menuId ),
-			]
-		);
-
-		hasResolvedNavigationPost.registry = defaultRegistry;
-	} );
-} );
diff --git a/packages/edit-navigation/src/store/test/transform.js b/packages/edit-navigation/src/store/test/transform.js
deleted file mode 100644
index 3b8ad244cda244..00000000000000
--- a/packages/edit-navigation/src/store/test/transform.js
+++ /dev/null
@@ -1,887 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	menuItemsToBlocks,
-	blockAttributesToMenuItem,
-	menuItemToBlockAttributes,
-} from '../transform';
-
-// Mock createBlock to avoid creating the blocks in test environment.
-jest.mock( '@wordpress/blocks', () => {
-	const blocks = jest.requireActual( '@wordpress/blocks' );
-
-	return {
-		...blocks,
-		createBlock( name, attributes, innerBlocks ) {
-			return {
-				name,
-				attributes,
-				innerBlocks,
-			};
-		},
-	};
-} );
-
-describe( 'converting menu items to blocks', () => {
-	it( 'converts an flat structure of menu item objects to blocks', () => {
-		const actual = menuItemsToBlocks( [
-			{
-				id: 1,
-				title: {
-					raw: 'Item 1',
-					rendered: 'Item 1',
-				},
-				url: 'http://localhost:8889/item-1/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 1,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 2,
-				title: {
-					raw: 'Item 2',
-					rendered: 'Item 2',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 2,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-		] );
-
-		expect( actual ).toEqual( [
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				innerBlocks: [],
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				innerBlocks: [],
-			} ),
-		] );
-	} );
-
-	it( 'converts an nested structure of menu item objects to nested blocks', () => {
-		const actual = menuItemsToBlocks( [
-			{
-				id: 1,
-				title: {
-					raw: 'Top Level',
-					rendered: 'Top Level',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 1,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 2,
-				title: {
-					raw: 'Child 1',
-					rendered: 'Child 1',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 1,
-				menu_order: 1,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 3,
-				title: {
-					raw: 'Child 2',
-					rendered: 'Child 2',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 1,
-				menu_order: 2,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 4,
-				title: {
-					raw: 'Sub Child',
-					rendered: 'Sub Child',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 3,
-				menu_order: 1,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 5,
-				title: {
-					raw: 'Sub Sub Child',
-					rendered: 'Sub Sub Child',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 4,
-				menu_order: 1,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 6,
-				title: {
-					raw: 'Top Level 2',
-					rendered: 'Top Level 2',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 2,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-		] );
-
-		expect( actual ).toEqual( [
-			expect.objectContaining( {
-				name: 'core/navigation-submenu',
-				attributes: expect.objectContaining( {
-					label: 'Top Level',
-				} ),
-				innerBlocks: [
-					expect.objectContaining( {
-						name: 'core/navigation-link',
-						attributes: expect.objectContaining( {
-							label: 'Child 1',
-						} ),
-						innerBlocks: [],
-					} ),
-					expect.objectContaining( {
-						name: 'core/navigation-submenu',
-						attributes: expect.objectContaining( {
-							label: 'Child 2',
-						} ),
-						innerBlocks: [
-							expect.objectContaining( {
-								name: 'core/navigation-submenu',
-								attributes: expect.objectContaining( {
-									label: 'Sub Child',
-								} ),
-								innerBlocks: [
-									expect.objectContaining( {
-										name: 'core/navigation-link',
-										attributes: expect.objectContaining( {
-											label: 'Sub Sub Child',
-										} ),
-										innerBlocks: [],
-									} ),
-								],
-							} ),
-						],
-					} ),
-				],
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Top Level 2',
-				} ),
-				innerBlocks: [],
-			} ),
-		] );
-	} );
-
-	it( 'respects menu order when converting to blocks', () => {
-		const actual = menuItemsToBlocks( [
-			{
-				id: 1,
-				title: {
-					raw: 'Ordered 5th',
-					rendered: 'Ordered 5th',
-				},
-				url: 'http://localhost:8889/item-1/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 100,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 2,
-				title: {
-					raw: 'Ordered 2nd',
-					rendered: 'Ordered 2nd',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 10,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 3,
-				title: {
-					raw: 'Ordered 4th',
-					rendered: 'Ordered 4th',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 30,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 4,
-				title: {
-					raw: 'Ordered 3rd',
-					rendered: 'Ordered 3rd',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 20,
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-			{
-				id: 5,
-				title: {
-					raw: 'Ordered 1st',
-					rendered: 'Ordered 1st',
-				},
-				url: 'http://localhost:8889/',
-				attr_title: '',
-				description: '',
-				type: 'custom',
-				type_label: 'Custom Link',
-				object: 'custom',
-				parent: 0,
-				menu_order: 0, // Capturing 0 edge case.
-				target: '',
-				classes: [ '' ],
-				xfn: [ '' ],
-			},
-		] );
-
-		expect( actual ).toEqual( [
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Ordered 1st',
-				} ),
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Ordered 2nd',
-				} ),
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Ordered 3rd',
-				} ),
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Ordered 4th',
-				} ),
-			} ),
-			expect.objectContaining( {
-				name: 'core/navigation-link',
-				attributes: expect.objectContaining( {
-					label: 'Ordered 5th',
-				} ),
-			} ),
-		] );
-	} );
-
-	it( 'returns an empty array when menu items argument is an empty array', () => {
-		const actual = menuItemsToBlocks( [] );
-		expect( actual ).toEqual( [] );
-	} );
-} );
-
-describe( 'Mapping block attributes and menu item fields', () => {
-	const blocksToMenuItems = [
-		{
-			block: {
-				attributes: {
-					label: 'Example Page',
-					url: '/example-page/',
-					description: 'Lorem ipsum dolor sit amet.',
-					rel: 'friend met',
-					className: 'my-custom-class-one my-custom-class-two',
-					title: 'Example page link title attribute',
-					id: 100,
-					type: 'page',
-					kind: 'post-type',
-					opensInNewTab: true,
-				},
-				clientId: 'navigation-link-block-client-id-1',
-				innerBlocks: [],
-				isValid: true,
-				name: 'core/navigation-link',
-			},
-			menuItem: {
-				title: 'Example Page',
-				url: '/example-page/',
-				description: 'Lorem ipsum dolor sit amet.',
-				xfn: [ 'friend', 'met' ],
-				classes: [ 'my-custom-class-one', 'my-custom-class-two' ],
-				attr_title: 'Example page link title attribute',
-				object_id: 100,
-				object: 'page',
-				type: 'post_type',
-				target: '_blank',
-			},
-		},
-		{
-			block: {
-				attributes: {
-					label: 'Example Post',
-					url: '/example-post/',
-					description: 'Consectetur adipiscing elit.',
-					rel: 'friend',
-					className: 'my-custom-class-one',
-					title: 'Example post link title attribute',
-					id: 101,
-					type: 'post',
-					kind: 'post-type',
-					opensInNewTab: false,
-				},
-				clientId: 'navigation-link-block-client-id-2',
-				innerBlocks: [],
-				isValid: true,
-				name: 'core/navigation-link',
-			},
-			menuItem: {
-				title: 'Example Post',
-				url: '/example-post/',
-				description: 'Consectetur adipiscing elit.',
-				xfn: [ 'friend' ],
-				classes: [ 'my-custom-class-one' ],
-				attr_title: 'Example post link title attribute',
-				object_id: 101,
-				object: 'post',
-				type: 'post_type',
-				target: '',
-			},
-		},
-		{
-			block: {
-				attributes: {
-					label: 'Example Category',
-					url: '/example-category/',
-					description:
-						'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-					rel: '',
-					className: '',
-					title: '',
-					id: 102,
-					type: 'category',
-					kind: 'taxonomy',
-					opensInNewTab: true,
-				},
-				clientId: 'navigation-link-block-client-id-3',
-				innerBlocks: [],
-				isValid: true,
-				name: 'core/navigation-link',
-			},
-			menuItem: {
-				title: 'Example Category',
-				url: '/example-category/',
-				description:
-					'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-				object_id: 102,
-				object: 'category',
-				type: 'taxonomy',
-				target: '_blank',
-			},
-		},
-		{
-			block: {
-				attributes: {
-					label: 'Example Tag',
-					url: '/example-tag/',
-					description: '',
-					rel: '',
-					className: '',
-					title: '',
-					id: 103,
-					type: 'tag',
-					kind: 'taxonomy',
-					opensInNewTab: false,
-				},
-				clientId: 'navigation-link-block-client-id-4',
-				innerBlocks: [],
-				isValid: true,
-				name: 'core/navigation-link',
-			},
-			menuItem: {
-				title: 'Example Tag',
-				url: '/example-tag/',
-				object_id: 103,
-				object: 'post_tag',
-				type: 'taxonomy',
-				target: '',
-			},
-		},
-		{
-			block: {
-				attributes: {
-					label: 'Example Custom Link',
-					url: 'https://wordpress.org',
-					description: '',
-					rel: '',
-					className: '',
-					title: '',
-					type: 'custom',
-					kind: 'custom',
-					opensInNewTab: true,
-				},
-				clientId: 'navigation-link-block-client-id-5',
-				innerBlocks: [],
-				isValid: true,
-				name: 'core/navigation-link',
-			},
-			menuItem: {
-				title: 'Example Custom Link',
-				url: 'https://wordpress.org',
-				object: 'custom',
-				type: 'custom',
-				target: '_blank',
-			},
-		},
-	];
-
-	const menuItemsToBlockAttrs = [
-		{
-			menuItem: {
-				title: {
-					raw: 'Example Page',
-					rendered: 'Example Page',
-				},
-				url: '/example-page/',
-				description: 'Lorem ipsum dolor sit amet.',
-				xfn: [ 'friend', 'met' ],
-				classes: [ 'my-custom-class-one', 'my-custom-class-two' ],
-				attr_title: 'Example page link title attribute',
-				object_id: 100,
-				object: 'page',
-				type: 'post_type',
-				target: '_blank',
-			},
-			blockAttrs: {
-				label: 'Example Page',
-				url: '/example-page/',
-				description: 'Lorem ipsum dolor sit amet.',
-				rel: 'friend met',
-				className: 'my-custom-class-one my-custom-class-two',
-				title: 'Example page link title attribute',
-				id: 100,
-				type: 'page',
-				kind: 'post-type',
-				opensInNewTab: true,
-			},
-		},
-		{
-			menuItem: {
-				title: {
-					raw: 'Example Post',
-					rendered: 'Example Post',
-				},
-				url: '/example-post/',
-				description: 'Consectetur adipiscing elit.',
-				xfn: [ 'friend' ],
-				classes: [ 'my-custom-class-one' ],
-				attr_title: 'Example post link title attribute',
-				object_id: 101,
-				object: 'post',
-				type: 'post_type',
-				target: '',
-			},
-			blockAttrs: {
-				label: 'Example Post',
-				url: '/example-post/',
-				description: 'Consectetur adipiscing elit.',
-				rel: 'friend',
-				className: 'my-custom-class-one',
-				title: 'Example post link title attribute',
-				id: 101,
-				type: 'post',
-				kind: 'post-type',
-			},
-		},
-		{
-			menuItem: {
-				title: {
-					raw: 'Example Category',
-					rendered: 'Example Category',
-				},
-				url: '/example-category/',
-				description:
-					'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-				xfn: [ '   ', '   ' ],
-				classes: [ '   ', ' ' ],
-				attr_title: '',
-				object_id: 102,
-				object: 'category',
-				type: 'taxonomy',
-				target: '_blank',
-			},
-			blockAttrs: {
-				label: 'Example Category',
-				url: '/example-category/',
-				description:
-					'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-				id: 102,
-				type: 'category',
-				kind: 'taxonomy',
-				opensInNewTab: true,
-			},
-		},
-		{
-			menuItem: {
-				title: {
-					raw: 'Example Tag',
-					rendered: 'Example Tag',
-				},
-				url: '/example-tag/',
-				description: '',
-				xfn: [ '' ],
-				classes: [ '' ],
-				attr_title: '',
-				object_id: 103,
-				object: 'tag',
-				type: 'taxonomy',
-				target: '',
-			},
-			blockAttrs: {
-				label: 'Example Tag',
-				url: '/example-tag/',
-				id: 103,
-				type: 'tag',
-				kind: 'taxonomy',
-			},
-		},
-		{
-			menuItem: {
-				title: {
-					raw: 'Example Custom Link',
-					rendered: 'Example Custom Link',
-				},
-				url: 'https://wordpress.org',
-				description: '',
-				xfn: [ '' ],
-				classes: [ '' ],
-				attr_title: '',
-				object: 'custom',
-				type: 'custom',
-				target: '_blank',
-			},
-			blockAttrs: {
-				label: 'Example Custom Link',
-				url: 'https://wordpress.org',
-				type: 'custom',
-				kind: 'custom',
-				opensInNewTab: true,
-			},
-		},
-	];
-
-	describe( 'mapping block attributes to menu item fields', () => {
-		it( 'maps block attributes to equivalent menu item fields', () => {
-			const [ actual, expected ] = blocksToMenuItems.reduce(
-				( acc, item ) => {
-					acc[ 0 ].push(
-						blockAttributesToMenuItem( item.block.attributes )
-					);
-					acc[ 1 ].push( item.menuItem );
-					return acc;
-				},
-				[ [], [] ]
-			);
-
-			expect( actual ).toEqual( expected );
-		} );
-
-		it( 'does not map block attribute "id" to menu item "object_id" field for custom (non-entity) links', () => {
-			const customLinkBlockAttributes = {
-				id: 12345, // Added for test purposes only - should't exist.
-				type: 'custom', // custom type indicates we shouldn't need an `id` field.
-				kind: 'custom', // custom type indicates we shouldn't need an `id` field.
-				label: 'Example Custom Link',
-				url: 'https://wordpress.org',
-				description: '',
-				rel: '',
-				className: '',
-				title: '',
-				opensInNewTab: true,
-			};
-
-			const actual = blockAttributesToMenuItem(
-				customLinkBlockAttributes
-			);
-
-			// Check the basic conversion to menuItem happened successfully.
-			expect( actual ).toEqual( {
-				title: 'Example Custom Link',
-				url: 'https://wordpress.org',
-				object: 'custom',
-				type: 'custom',
-				target: '_blank',
-			} );
-
-			// Assert `id` attr has NOT been converted to a `object_id` field for a "custom" type even if present.
-			expect( actual.object_id ).toBeUndefined();
-		} );
-
-		it( 'correctly maps "tag" block type variation to "post_tag" value as expected in "object" type field', () => {
-			const tagLinkBlockVariation = {
-				id: 12345, // Added for test purposes only - should't exist.
-				type: 'tag', // custom type indicates we shouldn't need an `id` field.
-				kind: 'taxonomy', // custom type indicates we shouldn't need an `id` field.
-				label: 'Example Tag',
-				url: '/example-tag/',
-			};
-
-			const actual = blockAttributesToMenuItem( tagLinkBlockVariation );
-
-			expect( actual.object ).toBe( 'post_tag' );
-		} );
-
-		it( 'gracefully handles undefined values by falling back to menu item defaults', () => {
-			const blockAttrsWithUndefinedValues = {
-				id: undefined,
-				type: undefined,
-				kind: undefined,
-				label: undefined,
-				url: undefined,
-				description: undefined,
-				rel: undefined,
-				className: undefined,
-				title: undefined,
-				opensInNewTab: undefined,
-			};
-
-			const actual = blockAttributesToMenuItem(
-				blockAttrsWithUndefinedValues
-			);
-
-			// Defaults are taken from https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L438.
-			expect( actual ).toEqual(
-				expect.objectContaining( {
-					title: '',
-					url: '',
-				} )
-			);
-
-			// Remaining values should not be present.
-			expect( Object.keys( actual ) ).not.toEqual(
-				expect.arrayContaining( [
-					'description',
-					'xfn',
-					'classes',
-					'attr_title',
-					'object',
-					'type',
-					'object_id',
-					'target',
-				] )
-			);
-
-			expect( Object.values( actual ) ).not.toContain( undefined );
-		} );
-
-		it( 'allows for setting and unsetting of target property based on opensInNewTab arttribute boolean', () => {
-			const shared = {
-				id: 12345, // Added for test purposes only - should't exist.
-				type: 'custom', // custom type indicates we shouldn't need an `id` field.
-				kind: 'custom', // custom type indicates we shouldn't need an `id` field.
-				label: 'Example',
-				url: '/example/',
-			};
-
-			const openInNewTabBlock = {
-				...shared,
-				opensInNewTab: true,
-			};
-
-			const doNotOpenInNewTabBlock = {
-				...shared,
-				opensInNewTab: false,
-			};
-
-			const shouldOpenInNewTab =
-				blockAttributesToMenuItem( openInNewTabBlock );
-
-			const shouldNotOpenInNewTab = blockAttributesToMenuItem(
-				doNotOpenInNewTabBlock
-			);
-
-			expect( shouldOpenInNewTab.target ).toBe( '_blank' );
-
-			// Should also allow unsetting of an existing value.
-			expect( shouldNotOpenInNewTab.target ).toBe( '' );
-		} );
-	} );
-
-	describe( 'mapping menu item fields to block attributes', () => {
-		it( 'maps menu item fields to equivalent block attributes', () => {
-			const [ actual, expected ] = menuItemsToBlockAttrs.reduce(
-				( acc, item ) => {
-					acc[ 0 ].push( menuItemToBlockAttributes( item.menuItem ) );
-					acc[ 1 ].push( item.blockAttrs );
-					return acc;
-				},
-				[ [], [] ]
-			);
-
-			expect( actual ).toEqual( expected );
-		} );
-
-		it( 'does not map menu item "object_id" field to block attribute "id" for custom (non-entity) links', () => {
-			const customLinkMenuItem = {
-				title: 'Example Custom Link',
-				url: 'https://wordpress.org',
-				description: '',
-				xfn: [ '' ],
-				classes: [ '' ],
-				attr_title: '',
-				object_id: 123456, // Added for test purposes.
-				object: 'custom',
-				type: 'custom',
-				target: '_blank',
-			};
-			const actual = menuItemToBlockAttributes( customLinkMenuItem );
-
-			expect( actual.id ).toBeUndefined();
-		} );
-
-		it( 'correctly maps "post_tag" menu item object type to "tag" block type variation', () => {
-			const tagMenuItem = {
-				title: 'Example Tag',
-				url: '/example-tag/',
-				object_id: 123456,
-				object: 'post_tag',
-				type: 'taxonomy',
-			};
-
-			const actual = menuItemToBlockAttributes( tagMenuItem );
-
-			expect( actual.type ).toBe( 'tag' );
-		} );
-
-		it( 'gracefully handles undefined values by falling back to block attribute defaults', () => {
-			// Note that whilst Core provides default values for nav_menu_item's it is possible that these
-			// values could be manipulated via Plugins. As such we must account for unexpected values.
-			const menuItemsWithUndefinedValues = {
-				title: undefined,
-				url: undefined,
-				description: undefined,
-				xfn: undefined,
-				classes: undefined,
-				attr_title: undefined,
-				object_id: undefined,
-				object: undefined,
-				type: undefined,
-				target: undefined,
-			};
-
-			const actual = menuItemToBlockAttributes(
-				menuItemsWithUndefinedValues
-			);
-
-			expect( actual ).toEqual(
-				expect.objectContaining( {
-					label: '',
-					url: '',
-					kind: 'custom',
-				} )
-			);
-
-			expect( Object.keys( actual ) ).not.toEqual(
-				expect.arrayContaining( [
-					'rel',
-					'className',
-					'title',
-					'id',
-					'description',
-					'opensInNewTab',
-				] )
-			);
-
-			expect( Object.values( actual ) ).not.toContain( undefined );
-		} );
-	} );
-} );
diff --git a/packages/edit-navigation/src/store/test/utils.js b/packages/edit-navigation/src/store/test/utils.js
deleted file mode 100644
index d839116ab92e30..00000000000000
--- a/packages/edit-navigation/src/store/test/utils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { buildNavigationPostId, menuItemsQuery } from '../utils';
-
-describe( 'buildNavigationPostId', () => {
-	it( 'build navigation post id', () => {
-		expect( buildNavigationPostId( 123 ) ).toBe( 'navigation-post-123' );
-	} );
-} );
-
-describe( 'menuItemsQuery', () => {
-	it( 'build menu items query', () => {
-		expect( menuItemsQuery( 123 ) ).toEqual( { menus: 123, per_page: -1 } );
-	} );
-} );
diff --git a/packages/edit-navigation/src/store/transform.js b/packages/edit-navigation/src/store/transform.js
deleted file mode 100644
index 842e91a93a529f..00000000000000
--- a/packages/edit-navigation/src/store/transform.js
+++ /dev/null
@@ -1,309 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { serialize, createBlock, parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { NEW_TAB_TARGET_ATTRIBUTE } from '../constants';
-import {
-	addRecordIdToBlock,
-	getRecordIdFromBlock,
-	isBlockSupportedInNav,
-} from './utils';
-
-/**
- * A WP nav_menu_item object.
- * For more documentation on the individual fields present on a menu item please see:
- * https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L789
- *
- * Changes made here should also be mirrored in packages/edit-navigation/src/store/utils.js.
- *
- * @typedef WPNavMenuItem
- *
- * @property {Object} title       stores the raw and rendered versions of the title/label for this menu item.
- * @property {Array}  xfn         the XFN relationships expressed in the link of this menu item.
- * @property {Array}  classes     the HTML class attributes for this menu item.
- * @property {string} attr_title  the HTML title attribute for this menu item.
- * @property {string} object      The type of object originally represented, such as 'category', 'post', or 'attachment'.
- * @property {string} object_id   The DB ID of the original object this menu item represents, e.g. ID for posts and term_id for categories.
- * @property {string} description The description of this menu item.
- * @property {string} url         The URL to which this menu item points.
- * @property {string} type        The family of objects originally represented, such as 'post_type' or 'taxonomy'.
- * @property {string} target      The target attribute of the link element for this menu item.
- */
-
-export function blockToMenuItem(
-	block,
-	menuItem,
-	parentId,
-	blockPosition,
-	menuId
-) {
-	const { menus, meta, _links, ...restMenuItem } = menuItem;
-	menuItem = restMenuItem;
-	menuItem.content = get( menuItem.content, 'raw', menuItem.content );
-
-	let attributes;
-
-	if ( isBlockSupportedInNav( block ) ) {
-		attributes = blockAttributesToMenuItem( block.attributes );
-	} else {
-		attributes = {
-			type: 'block',
-			content: serialize( block ),
-		};
-	}
-
-	return {
-		...menuItem,
-		...attributes,
-		content: attributes.content || '',
-		id: getRecordIdFromBlock( block ),
-		menu_order: blockPosition + 1,
-		menus: menuId,
-		parent: ! parentId ? 0 : parentId,
-		status: 'publish',
-	};
-}
-
-/**
- * Convert block attributes to menu item fields.
- *
- * Note that nav_menu_item has defaults provided in Core so in the case of undefined Block attributes
- * we need only include a subset of values in the knowledge that the defaults will be provided in Core.
- *
- * See: https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L438.
- *
- * @param {Object}  blockAttributes               the block attributes of the block to be converted into menu item fields.
- * @param {string}  blockAttributes.label         the visual name of the block shown in the UI.
- * @param {string}  blockAttributes.url           the URL for the link.
- * @param {string}  blockAttributes.description   a link description.
- * @param {string}  blockAttributes.rel           the XFN relationship expressed in the link of this menu item.
- * @param {string}  blockAttributes.className     the custom CSS classname attributes for this block.
- * @param {string}  blockAttributes.title         the HTML title attribute for the block's link.
- * @param {string}  blockAttributes.type          the type of variation of the block used (eg: 'Post', 'Custom', 'Category'...etc).
- * @param {number}  blockAttributes.id            the ID of the entity optionally associated with the block's link (eg: the Post ID).
- * @param {string}  blockAttributes.kind          the family of objects originally represented, such as 'post-type' or 'taxonomy'.
- * @param {boolean} blockAttributes.opensInNewTab whether or not the block's link should open in a new tab.
- * @return {WPNavMenuItem} the menu item (converted from block attributes).
- */
-export const blockAttributesToMenuItem = ( {
-	label = '',
-	url = '',
-	description,
-	rel,
-	className,
-	title: blockTitleAttr,
-	type,
-	id,
-	kind,
-	opensInNewTab,
-} ) => {
-	// For historical reasons, the `core/navigation-link` variation type is `tag`
-	// whereas WP Core expects `post_tag` as the `object` type.
-	// To avoid writing a block migration we perform a conversion here.
-	// See also inverse equivalent in `menuItemToBlockAttributes`.
-	if ( type && type === 'tag' ) {
-		type = 'post_tag';
-	}
-
-	return {
-		title: label,
-		url,
-		...( description?.length && {
-			description,
-		} ),
-		...( rel?.length && {
-			xfn: rel?.trim().split( ' ' ),
-		} ),
-		...( className?.length && {
-			classes: className?.trim().split( ' ' ),
-		} ),
-		...( blockTitleAttr?.length && {
-			attr_title: blockTitleAttr,
-		} ),
-		...( type?.length && {
-			object: type,
-		} ),
-		...( kind?.length && {
-			type: kind?.replace( '-', '_' ),
-		} ),
-		// Only assign object_id if it's a entity type (ie: not "custom").
-		...( id &&
-			'custom' !== type && {
-				object_id: id,
-			} ),
-		target: opensInNewTab ? NEW_TAB_TARGET_ATTRIBUTE : '',
-	};
-};
-
-/**
- * Convert a flat menu item structure to a nested blocks structure.
- *
- * @param {Object[]} menuItems An array of menu items.
- *
- * @return {WPBlock[]} An array of blocks.
- */
-export function menuItemsToBlocks( menuItems ) {
-	if ( ! menuItems ) {
-		return null;
-	}
-
-	const menuTree = createDataTree( menuItems );
-
-	return mapMenuItemsToBlocks( menuTree );
-}
-
-/**
- * A recursive function that maps menu item nodes to blocks.
- *
- * @param {WPNavMenuItem[]} menuItems An array of WPNavMenuItem items.
- * @return {Object} Object containing innerBlocks and mapping.
- */
-function mapMenuItemsToBlocks( menuItems ) {
-	// The menuItem should be in menu_order sort order.
-	const sortedItems = [ ...menuItems ].sort(
-		( a, b ) => a.menu_order - b.menu_order
-	);
-
-	const blocks = sortedItems.map( ( menuItem ) => {
-		if ( menuItem.type === 'block' ) {
-			const [ block ] = parse( menuItem.content.raw );
-
-			if ( ! block ) {
-				return createBlock( 'core/freeform', {
-					content: menuItem.content,
-				} );
-			}
-
-			return block;
-		}
-		const attributes = menuItemToBlockAttributes( menuItem );
-
-		// If there are children recurse to build those nested blocks.
-		const nestedBlocks = menuItem.children?.length
-			? mapMenuItemsToBlocks( menuItem.children )
-			: [];
-
-		// Create a submenu block when there are inner blocks, or just a link
-		// for a standalone item.
-		const itemBlockName = nestedBlocks?.length
-			? 'core/navigation-submenu'
-			: 'core/navigation-link';
-
-		// Create block with nested "innerBlocks".
-		return createBlock( itemBlockName, attributes, nestedBlocks );
-	} );
-
-	return blocks.map( ( block, blockIndex ) =>
-		addRecordIdToBlock( block, sortedItems[ blockIndex ].id )
-	);
-}
-
-// A few parameters are using snake case, let's embrace that for convenience:
-/* eslint-disable camelcase */
-/**
- * Convert block attributes to menu item.
- *
- * @param {WPNavMenuItem} menuItem the menu item to be converted to block attributes.
- * @return {Object} the block attributes converted from the WPNavMenuItem item.
- */
-export function menuItemToBlockAttributes( {
-	title: menuItemTitleField,
-	xfn,
-	classes,
-	attr_title,
-	object,
-	object_id,
-	description,
-	url,
-	type: menuItemTypeField,
-	target,
-} ) {
-	// For historical reasons, the `core/navigation-link` variation type is `tag`
-	// whereas WP Core expects `post_tag` as the `object` type.
-	// To avoid writing a block migration we perform a conversion here.
-	// See also inverse equivalent in `blockAttributesToMenuItem`.
-	if ( object && object === 'post_tag' ) {
-		object = 'tag';
-	}
-
-	return {
-		label: menuItemTitleField?.rendered || '',
-		...( object?.length && {
-			type: object,
-		} ),
-		kind: menuItemTypeField?.replace( '_', '-' ) || 'custom',
-		url: url || '',
-		...( xfn?.length &&
-			xfn.join( ' ' ).trim() && {
-				rel: xfn.join( ' ' ).trim(),
-			} ),
-		...( classes?.length &&
-			classes.join( ' ' ).trim() && {
-				className: classes.join( ' ' ).trim(),
-			} ),
-		...( attr_title?.length && {
-			title: attr_title,
-		} ),
-		...( object_id &&
-			'custom' !== object && {
-				id: object_id,
-			} ),
-		...( description?.length && {
-			description,
-		} ),
-		...( target === NEW_TAB_TARGET_ATTRIBUTE && {
-			opensInNewTab: true,
-		} ),
-	};
-}
-/* eslint-enable camelcase */
-
-/**
- * Creates a nested, hierarchical tree representation from unstructured data that
- * has an inherent relationship defined between individual items.
- *
- * For example, by default, each element in the dataset should have an `id` and
- * `parent` property where the `parent` property indicates a relationship between
- * the current item and another item with a matching `id` properties.
- *
- * This is useful for building linked lists of data from flat data structures.
- *
- * @param {Array}  dataset  linked data to be rearranged into a hierarchical tree based on relational fields.
- * @param {string} id       the property which uniquely identifies each entry within the array.
- * @param {*}      relation the property which identifies how the current item is related to other items in the data (if at all).
- * @return {Array} a nested array of parent/child relationships
- */
-function createDataTree( dataset, id = 'id', relation = 'parent' ) {
-	const hashTable = Object.create( null );
-	const dataTree = [];
-
-	for ( const data of dataset ) {
-		hashTable[ data[ id ] ] = {
-			...data,
-			children: [],
-		};
-	}
-	for ( const data of dataset ) {
-		if ( data[ relation ] ) {
-			hashTable[ data[ relation ] ] = hashTable[ data[ relation ] ] || {};
-			hashTable[ data[ relation ] ].children =
-				hashTable[ data[ relation ] ].children || [];
-			hashTable[ data[ relation ] ].children.push(
-				hashTable[ data[ id ] ]
-			);
-		} else {
-			dataTree.push( hashTable[ data[ id ] ] );
-		}
-	}
-
-	return dataTree;
-}
diff --git a/packages/edit-navigation/src/store/utils.js b/packages/edit-navigation/src/store/utils.js
deleted file mode 100644
index 37a63b717d1f62..00000000000000
--- a/packages/edit-navigation/src/store/utils.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * A WP nav_menu_item object.
- * For more documentation on the individual fields present on a menu item please see:
- * https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L789
- *
- * Changes made here should also be mirrored in packages/block-library/src/navigation/map-menu-items-to-blocks.js.
- *
- * @typedef WPNavMenuItem
- *
- * @property {Object} title       stores the raw and rendered versions of the title/label for this menu item.
- * @property {Array}  xfn         the XFN relationships expressed in the link of this menu item.
- * @property {Array}  classes     the HTML class attributes for this menu item.
- * @property {string} attr_title  the HTML title attribute for this menu item.
- * @property {string} object      The type of object originally represented, such as 'category', 'post', or 'attachment'.
- * @property {string} object_id   The DB ID of the original object this menu item represents, e.g. ID for posts and term_id for categories.
- * @property {string} description The description of this menu item.
- * @property {string} url         The URL to which this menu item points.
- * @property {string} type        The family of objects originally represented, such as 'post_type' or 'taxonomy'.
- * @property {string} target      The target attribute of the link element for this menu item.
- */
-
-/**
- * Builds an ID for a new navigation post.
- *
- * @param {number} menuId Menu id.
- * @return {string} An ID.
- */
-export const buildNavigationPostId = ( menuId ) =>
-	`navigation-post-${ menuId }`;
-
-/**
- * Builds a query to resolve menu items.
- *
- * @param {number} menuId Menu id.
- * @return {Object} Query.
- */
-export function menuItemsQuery( menuId ) {
-	return { menus: menuId, per_page: -1 };
-}
-
-/**
- * Get the internal record id from block.
- *
- * @typedef  {Object} Attributes
- * @property {string}     __internalRecordId The internal record id.
- * @typedef  {Object} Block
- * @property {Attributes} attributes         The attributes of the block.
- *
- * @param    {Block}      block              The block.
- * @return {string} The internal record id.
- */
-export function getRecordIdFromBlock( block ) {
-	return block.attributes.__internalRecordId;
-}
-
-/**
- * Add internal record id to block's attributes.
- *
- * @param {Block}  block    The block.
- * @param {string} recordId The record id.
- * @return {Block} The updated block.
- */
-export function addRecordIdToBlock( block, recordId ) {
-	return {
-		...block,
-		attributes: {
-			...( block.attributes || {} ),
-			__internalRecordId: recordId,
-		},
-	};
-}
-
-/**
- * Checks if a given block should be persisted as a menu item.
- *
- * @param {Object} block Block to check.
- * @return {boolean} True if a given block should be persisted as a menu item, false otherwise.
- */
-export const isBlockSupportedInNav = ( block ) =>
-	[ 'core/navigation-link', 'core/navigation-submenu' ].includes(
-		block.name
-	);
diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss
deleted file mode 100644
index ef8c1bdea66467..00000000000000
--- a/packages/edit-navigation/src/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$navigation-editor-width: 420px;
-$navigation-editor-spacing-top: $grid-unit-50 * 2;
-
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-@import "./components/add-menu/style.scss";
-@import "./components/block-placeholder/style.scss";
-@import "../../interface/src/style.scss";
-@import "./components/editor/style.scss";
-@import "./components/error-boundary/style.scss";
-@import "./components/header/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/layout/style.scss";
-@import "./components/menu-switcher/style.scss";
-@import "./components/notices/style.scss";
diff --git a/packages/edit-navigation/src/utils/index.js b/packages/edit-navigation/src/utils/index.js
deleted file mode 100644
index 64ea780ba2a296..00000000000000
--- a/packages/edit-navigation/src/utils/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { normalizePath } from '@wordpress/url';
-
-/**
- * The purpose of this function is to create a middleware that is responsible for preloading menu-related data.
- * It uses data that is returned from the /wp/v2/menus endpoint for requests
- * to the /wp/v2/menu/<menuId> endpoint, because the data is the same.
- * This way, we can avoid making additional REST API requests.
- * This middleware can be removed if/when we implement caching at the wordpress/core-data level.
- *
- * @param {Object} preloadedData
- * @return {Function} Preloading middleware.
- */
-export function createMenuPreloadingMiddleware( preloadedData ) {
-	const cache = Object.keys( preloadedData ).reduce( ( result, path ) => {
-		result[ normalizePath( path ) ] = preloadedData[ path ];
-		return result;
-	}, /** @type {Record<string, any>} */ ( {} ) );
-
-	let menusDataLoaded = false;
-	let menuDataLoaded = false;
-
-	return ( options, next ) => {
-		const { parse = true } = options;
-		if ( 'string' !== typeof options.path ) {
-			return next( options );
-		}
-
-		const method = options.method || 'GET';
-		if ( 'GET' !== method ) {
-			return next( options );
-		}
-
-		const path = normalizePath( options.path );
-		if ( ! menusDataLoaded && cache[ path ] ) {
-			menusDataLoaded = true;
-			return sendSuccessResponse( cache[ path ], parse );
-		}
-
-		if ( menuDataLoaded ) {
-			return next( options );
-		}
-
-		const matches = path.match( /^\/wp\/v2\/menus\/(\d+)\?context=edit$/ );
-		if ( ! matches ) {
-			return next( options );
-		}
-
-		const key = Object.keys( cache )?.[ 0 ];
-		const menuData = cache[ key ]?.body;
-		if ( ! menuData ) {
-			return next( options );
-		}
-
-		const menuId = parseInt( matches[ 1 ] );
-		const menu = menuData.filter( ( { id } ) => id === menuId );
-
-		if ( menu.length > 0 ) {
-			menuDataLoaded = true;
-			// We don't have headers because we "emulate" this request.
-			return sendSuccessResponse(
-				{ body: menu[ 0 ], headers: {} },
-				parse
-			);
-		}
-
-		return next( options );
-	};
-}
-
-/**
- * This is a helper function that sends a success response.
- *
- * @param {Object}  responseData An object with the menu data
- * @param {boolean} parse        A boolean that controls whether to send a response or just the response data
- * @return {Object} Resolved promise
- */
-function sendSuccessResponse( responseData, parse ) {
-	return Promise.resolve(
-		parse
-			? responseData.body
-			: new window.Response( JSON.stringify( responseData.body ), {
-					status: 200,
-					statusText: 'OK',
-					headers: responseData.headers,
-			  } )
-	);
-}
diff --git a/packages/edit-post/.npmrc b/packages/edit-post/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/edit-post/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 4546c0f6b8c886..47933552311d10 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,9 +2,130 @@
 
 ## Unreleased
 
+## 8.13.0 (2024-11-27)
+
+## 8.12.0 (2024-11-16)
+
+## 8.11.0 (2024-10-30)
+
+## 8.10.0 (2024-10-16)
+
+## 8.9.0 (2024-10-03)
+
+## 8.8.0 (2024-09-19)
+
+## 8.7.0 (2024-09-05)
+
+## 8.6.0 (2024-08-21)
+
+## 8.5.0 (2024-08-07)
+
+## 8.4.0 (2024-07-24)
+
+## 8.3.0 (2024-07-10)
+
+## 8.2.0 (2024-06-26)
+
+## 8.1.0 (2024-06-15)
+
+### Bug Fixes
+
+-   Add ´@wordpress/html-entities´ package to the list of dependencies in package.json. ([#62313](https://github.com/WordPress/gutenberg/pull/62313))
+
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 7.34.0 (2024-05-02)
+
+## 7.33.0 (2024-04-19)
+
+## 7.32.0 (2024-04-03)
+
+## 7.31.0 (2024-03-21)
+
+## 7.30.0 (2024-03-06)
+
+## 7.29.0 (2024-02-21)
+
+## 7.28.0 (2024-02-09)
+
+## 7.27.0 (2024-01-24)
+
+## 7.26.0 (2024-01-10)
+
+### Deprecations
+
+-   Move the panels visibility actions and selectors to the editor package deprecating `toggleEditorPanelEnabled`, `toggleEditorPanelOpened`, `removeEditorPanel`, `isEditorPanelRemoved`, `isEditorPanelOpened` and `isEditorPanelEnabled`.
+
+## 7.25.0 (2023-12-13)
+
+## 7.24.0 (2023-11-29)
+
+## 7.23.0 (2023-11-16)
+
+## 7.22.0 (2023-11-02)
+
+## 7.21.0 (2023-10-18)
+
+## 7.20.0 (2023-10-05)
+
+## 7.19.0 (2023-09-20)
+
+## 7.18.0 (2023-08-31)
+
+## 7.17.0 (2023-08-16)
+
+## 7.16.0 (2023-08-10)
+
+## 7.15.0 (2023-07-20)
+
+## 7.14.0 (2023-07-05)
+
+## 7.13.0 (2023-06-23)
+
+## 7.12.0 (2023-06-07)
+
+## 7.11.0 (2023-05-24)
+
+## 7.10.0 (2023-05-10)
+
+## 7.9.0 (2023-04-26)
+
+## 7.8.0 (2023-04-12)
+
+## 7.7.0 (2023-03-29)
+
+## 7.6.0 (2023-03-15)
+
+## 7.5.0 (2023-03-01)
+
+## 7.4.0 (2023-02-15)
+
+## 7.3.0 (2023-02-01)
+
+## 7.2.0 (2023-01-11)
+
+## 7.1.0 (2023-01-02)
+
+## 7.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 6.19.0 (2022-11-16)
 
-### Enhancement
+### Enhancements
 
 -   ` BlockTypesChecklist`: Move BlockIcon component out of CheckboxControl label ([#45535](https://github.com/WordPress/gutenberg/pull/45535))
 
@@ -46,11 +167,11 @@
 
 ## 6.0.0 (2022-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `GUTENBERG_PHASE` environment variable has been renamed to `IS_GUTENBERG_PLUGIN` and is now a boolean ([#38202](https://github.com/WordPress/gutenberg/pull/38202)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/api-fetch`, `@wordpress/primitives` and `uuid` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -58,7 +179,7 @@
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -70,8 +191,8 @@
 
 ### 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/.
+-   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.27.0 (2021-03-17)
 
@@ -93,23 +214,23 @@
 
 ## 3.6.0 (2019-08-05)
 
-### Refactor
+### Internal
 
 -   Create EditorInitializer component and implement for various things to initialize as the editor is loaded. This replaces the `__unstableInitialize` refactor done in #14740. ([#15444](https://github.com/WordPress/gutenberg/pull/15444))
 
 ## 3.4.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Implement the `addToGallery` option in the `MediaUpload` hook. The option allows users to open the media modal in the `gallery-library`instead of `gallery-edit` state.
 
-### Refactor
+### Internal
 
 -   convert `INIT` effect to controls & actions [#14740](https://github.com/WordPress/gutenberg/pull/14740)
 
 ## 3.2.0 (2019-03-06)
 
-### Polish
+### Internal
 
 -   Expose the `className` property to style the `PluginSidebar` component.
 
@@ -138,7 +259,7 @@
 
 ## 3.1.0 (2018-11-20)
 
-### New Feature
+### New Features
 
 -   The new `AdminNotices` component will transparently upgrade any `.notice` elements on the page to the equivalent `@wordpress/notices` module notice state.
 
@@ -148,7 +269,7 @@
 
 ## 3.0.0 (2018-11-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   `isEditorSidebarPanelOpened` selector (`core/edit-post`) has been removed. Please use `isEditorPanelEnabled` instead.
 -   `toggleGeneralSidebarEditorPanel` action (`core/edit-post`) has been removed. Please use `toggleEditorPanelOpened` instead.
@@ -179,7 +300,7 @@
 -   `getMetaBoxes` selector (`core/edit-post`) has been removed. Use `getActiveMetaBoxLocations` selector (`core/edit-post`) instead.
 -   `getMetaBox` selector (`core/edit-post`) has been removed. Use `isMetaBoxLocationActive` selector (`core/edit-post`) instead.
 
-### Polish
+### Internal
 
 -   Add the editor styles support's wrapper className.
 
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index 048db51d88cee7..82b106daaf6b6c 100644
--- a/packages/edit-post/README.md
+++ b/packages/edit-post/README.md
@@ -41,454 +41,55 @@ _Parameters_
 
 ### PluginBlockSettingsMenuItem
 
-Renders a new item in the block settings menu.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginBlockSettingsMenuItem = wp.editPost.PluginBlockSettingsMenuItem;
-
-function doOnClick() {
-	// To be called when the user clicks the menu item.
-}
-
-function MyPluginBlockSettingsMenuItem() {
-	return wp.element.createElement( PluginBlockSettingsMenuItem, {
-		allowedBlocks: [ 'core/paragraph' ],
-		icon: 'dashicon-name',
-		label: __( 'Menu item text' ),
-		onClick: doOnClick,
-	} );
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post';
-
-const doOnClick = () => {
-	// To be called when the user clicks the menu item.
-};
-
-const MyPluginBlockSettingsMenuItem = () => (
-	<PluginBlockSettingsMenuItem
-		allowedBlocks={ [ 'core/paragraph' ] }
-		icon="dashicon-name"
-		label={ __( 'Menu item text' ) }
-		onClick={ doOnClick }
-	/>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component props.
--   _props.allowedBlocks_ `[Array]`: An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.
--   _props.label_ `string`: The menu item text.
--   _props.onClick_ `Function`: Callback function to be executed when the user click the menu item.
--   _props.small_ `[boolean]`: Whether to render the label or not.
--   _props.role_ `[string]`: The ARIA role for the menu item.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginBlockSettingsMenuItem in @wordpress/editor package.
 
 ### PluginDocumentSettingPanel
 
-Renders items below the Status & Availability panel in the Document Sidebar.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var el = wp.element.createElement;
-var __ = wp.i18n.__;
-var registerPlugin = wp.plugins.registerPlugin;
-var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
-
-function MyDocumentSettingPlugin() {
-	return el(
-		PluginDocumentSettingPanel,
-		{
-			className: 'my-document-setting-plugin',
-			title: 'My Panel',
-		},
-		__( 'My Document Setting Panel' )
-	);
-}
-
-registerPlugin( 'my-document-setting-plugin', {
-	render: MyDocumentSettingPlugin,
-} );
-```
-
-```jsx
-// Using ESNext syntax
-import { registerPlugin } from '@wordpress/plugins';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
-
-const MyDocumentSettingTest = () => (
-	<PluginDocumentSettingPanel
-		className="my-document-setting-plugin"
-		title="My Panel"
-	>
-		<p>My Document Setting Panel</p>
-	</PluginDocumentSettingPanel>
-);
-
-registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
-```
-
-_Parameters_
-
--   _props_ `Object`: Component properties.
--   _props.name_ `[string]`: The machine-friendly name for the panel.
--   _props.className_ `[string]`: An optional class name added to the row.
--   _props.title_ `[string]`: The title of the panel
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginDocumentSettingPanel in @wordpress/editor package.
 
 ### PluginMoreMenuItem
 
-Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
-The text within the component appears as the menu item label.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
-
-function onButtonClick() {
-	alert( 'Button clicked.' );
-}
-
-function MyButtonMoreMenuItem() {
-	return wp.element.createElement(
-		PluginMoreMenuItem,
-		{
-			icon: moreIcon,
-			onClick: onButtonClick,
-		},
-		__( 'My button title' )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginMoreMenuItem } from '@wordpress/edit-post';
-import { more } from '@wordpress/icons';
-
-function onButtonClick() {
-	alert( 'Button clicked.' );
-}
-
-const MyButtonMoreMenuItem = () => (
-	<PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
-		{ __( 'My button title' ) }
-	</PluginMoreMenuItem>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component properties.
--   _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
--   _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item.
--   _props.other_ `[...*]`: Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginMoreMenuItem in @wordpress/editor package.
 
 ### PluginPostPublishPanel
 
-Renders provided content to the post-publish panel in the publish flow
-(side panel that opens after a user publishes the post).
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
-
-function MyPluginPostPublishPanel() {
-	return wp.element.createElement(
-		PluginPostPublishPanel,
-		{
-			className: 'my-plugin-post-publish-panel',
-			title: __( 'My panel title' ),
-			initialOpen: true,
-		},
-		__( 'My panel content' )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginPostPublishPanel } from '@wordpress/edit-post';
-
-const MyPluginPostPublishPanel = () => (
-	<PluginPostPublishPanel
-		className="my-plugin-post-publish-panel"
-		title={ __( 'My panel title' ) }
-		initialOpen={ true }
-	>
-		{ __( 'My panel content' ) }
-	</PluginPostPublishPanel>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component properties.
--   _props.className_ `[string]`: An optional class name added to the panel.
--   _props.title_ `[string]`: Title displayed at the top of the panel.
--   _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginPostPublishPanel in @wordpress/editor package.
 
 ### PluginPostStatusInfo
 
-Renders a row in the Summary panel of the Document sidebar.
-It should be noted that this is named and implemented around the function it serves
-and not its location, which may change in future iterations.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
-
-function MyPluginPostStatusInfo() {
-	return wp.element.createElement(
-		PluginPostStatusInfo,
-		{
-			className: 'my-plugin-post-status-info',
-		},
-		__( 'My post status info' )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginPostStatusInfo } from '@wordpress/edit-post';
-
-const MyPluginPostStatusInfo = () => (
-	<PluginPostStatusInfo className="my-plugin-post-status-info">
-		{ __( 'My post status info' ) }
-	</PluginPostStatusInfo>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component properties.
--   _props.className_ `[string]`: An optional class name added to the row.
--   _props.children_ `WPElement`: Children to be rendered.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginPostStatusInfo in @wordpress/editor package.
 
 ### PluginPrePublishPanel
 
-Renders provided content to the pre-publish side panel in the publish flow
-(side panel that opens when a user first pushes "Publish" from the main editor).
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
-
-function MyPluginPrePublishPanel() {
-	return wp.element.createElement(
-		PluginPrePublishPanel,
-		{
-			className: 'my-plugin-pre-publish-panel',
-			title: __( 'My panel title' ),
-			initialOpen: true,
-		},
-		__( 'My panel content' )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
-
-const MyPluginPrePublishPanel = () => (
-	<PluginPrePublishPanel
-		className="my-plugin-pre-publish-panel"
-		title={ __( 'My panel title' ) }
-		initialOpen={ true }
-	>
-		{ __( 'My panel content' ) }
-	</PluginPrePublishPanel>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component props.
--   _props.className_ `[string]`: An optional class name added to the panel.
--   _props.title_ `[string]`: Title displayed at the top of the panel.
--   _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginPrePublishPanel in @wordpress/editor package.
 
 ### PluginSidebar
 
-Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
-It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
-If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
-
-```js
-wp.data
-	.dispatch( 'core/edit-post' )
-	.openGeneralSidebar( 'plugin-name/sidebar-name' );
-```
-
 _Related_
 
--   PluginSidebarMoreMenuItem
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var el = wp.element.createElement;
-var PanelBody = wp.components.PanelBody;
-var PluginSidebar = wp.editPost.PluginSidebar;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
-
-function MyPluginSidebar() {
-	return el(
-		PluginSidebar,
-		{
-			name: 'my-sidebar',
-			title: 'My sidebar title',
-			icon: moreIcon,
-		},
-		el( PanelBody, {}, __( 'My sidebar content' ) )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import { PluginSidebar } from '@wordpress/edit-post';
-import { more } from '@wordpress/icons';
-
-const MyPluginSidebar = () => (
-	<PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }>
-		<PanelBody>{ __( 'My sidebar content' ) }</PanelBody>
-	</PluginSidebar>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Element props.
--   _props.name_ `string`: A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
--   _props.className_ `[string]`: An optional class name added to the sidebar body.
--   _props.title_ `string`: Title displayed at the top of the sidebar.
--   _props.isPinnable_ `[boolean]`: Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+-   PluginSidebar in @wordpress/editor package.
 
 ### PluginSidebarMoreMenuItem
 
-Renders a menu item in `Plugins` group in `More Menu` drop down,
-and can be used to activate the corresponding `PluginSidebar` component.
-The text within the component appears as the menu item label.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
-
-function MySidebarMoreMenuItem() {
-	return wp.element.createElement(
-		PluginSidebarMoreMenuItem,
-		{
-			target: 'my-sidebar',
-			icon: moreIcon,
-		},
-		__( 'My sidebar title' )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
-import { more } from '@wordpress/icons';
-
-const MySidebarMoreMenuItem = () => (
-	<PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }>
-		{ __( 'My sidebar title' ) }
-	</PluginSidebarMoreMenuItem>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Component props.
--   _props.target_ `string`: A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
--   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
-
-_Returns_
+_Related_
 
--   `WPComponent`: The component to be rendered.
+-   PluginSidebarMoreMenuItem in @wordpress/editor package.
 
 ### reinitializeEditor
 
-Reinitializes the editor after the user chooses to reboot the editor after
-an unhandled error occurs, replacing previously mounted editor element using
-an initial state from prior to the crash.
-
-_Parameters_
-
--   _postType_ `Object`: Post type of the post to edit.
--   _postId_ `Object`: ID of the post to edit.
--   _target_ `Element`: DOM node in which editor is rendered.
--   _settings_ `?Object`: Editor settings object.
--   _initialEdits_ `Object`: Programmatic edits to apply initially, to be considered as non-user-initiated (bypass for unsaved changes prompt).
+Used to reinitialize the editor after an error. Now it's a deprecated noop function.
 
 ### store
 
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 7450114a0b2654..aea81f0568fbe2 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.19.0",
+	"version": "8.13.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,46 +20,50 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/editor": "file:../editor",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/url": "file:../url",
-		"@wordpress/viewport": "file:../viewport",
-		"@wordpress/warning": "file:../warning",
-		"classnames": "^2.3.1",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
-		"rememo": "^4.0.0"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-commands": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/editor": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/widgets": "*",
+		"clsx": "^2.1.1",
+		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/edit-post/src/classic.scss b/packages/edit-post/src/classic.scss
index 8cba8020e0b912..263315ab18f084 100644
--- a/packages/edit-post/src/classic.scss
+++ b/packages/edit-post/src/classic.scss
@@ -1,7 +1,8 @@
 // Provide baseline auto margin for centering blocks.
 // Specificity is kept at this level as many classic themes output
 // rules like figure { margin: 0; } which would break centering.
-.editor-styles-wrapper .wp-block {
+// These rules should also not apply to direct children of flex layout blocks.
+.editor-styles-wrapper :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block {
 	margin-left: auto;
 	margin-right: auto;
 }
diff --git a/packages/edit-post/src/commands/use-commands.js b/packages/edit-post/src/commands/use-commands.js
new file mode 100644
index 00000000000000..edd2a6a5b84042
--- /dev/null
+++ b/packages/edit-post/src/commands/use-commands.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { fullscreen } from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useCommands() {
+	const { isFullscreen } = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+
+		return {
+			isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
+		};
+	}, [] );
+	const { toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	useCommand( {
+		name: 'core/toggle-fullscreen-mode',
+		label: isFullscreen
+			? __( 'Exit fullscreen' )
+			: __( 'Enter fullscreen' ),
+		icon: fullscreen,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-post', 'fullscreenMode' );
+			close();
+			createInfoNotice(
+				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core/edit-post', 'fullscreenMode' );
+							},
+						},
+					],
+				}
+			);
+		},
+	} );
+}
diff --git a/packages/edit-post/src/components/back-button/fullscreen-mode-close.js b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
new file mode 100644
index 00000000000000..ffb64a8ba07035
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/fullscreen-mode-close.js
@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	Icon,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import { wordpress } from '@wordpress/icons';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useReducedMotion } from '@wordpress/compose';
+
+function FullscreenModeClose( { showTooltip, icon, href, initialPost } ) {
+	const { isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
+		( select ) => {
+			const { getCurrentPostType } = select( editorStore );
+			const { getEntityRecord, getPostType, isResolving } =
+				select( coreStore );
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+			const _postType = initialPost?.type || getCurrentPostType();
+			return {
+				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
+					'root',
+					'__unstableBase',
+					undefined,
+				] ),
+				postType: getPostType( _postType ),
+				siteIconUrl: siteData.site_icon_url,
+			};
+		},
+		[]
+	);
+
+	const disableMotion = useReducedMotion();
+
+	if ( ! postType ) {
+		return null;
+	}
+
+	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
+
+	const effect = {
+		expand: {
+			scale: 1.25,
+			transition: { type: 'tween', duration: '0.3' },
+		},
+	};
+
+	if ( siteIconUrl ) {
+		buttonIcon = (
+			<motion.img
+				variants={ ! disableMotion && effect }
+				alt={ __( 'Site Icon' ) }
+				className="edit-post-fullscreen-mode-close_site-icon"
+				src={ siteIconUrl }
+			/>
+		);
+	}
+
+	if ( isRequestingSiteIcon ) {
+		buttonIcon = null;
+	}
+
+	// Override default icon if custom icon is provided via props.
+	if ( icon ) {
+		buttonIcon = <Icon size="36px" icon={ icon } />;
+	}
+
+	const classes = clsx( 'edit-post-fullscreen-mode-close', {
+		'has-icon': siteIconUrl,
+	} );
+
+	const buttonHref =
+		href ??
+		addQueryArgs( 'edit.php', {
+			post_type: postType.slug,
+		} );
+
+	const buttonLabel = postType?.labels?.view_items ?? __( 'Back' );
+
+	return (
+		<motion.div whileHover="expand">
+			<Button
+				__next40pxDefaultSize
+				className={ classes }
+				href={ buttonHref }
+				label={ buttonLabel }
+				showTooltip={ showTooltip }
+			>
+				{ buttonIcon }
+			</Button>
+		</motion.div>
+	);
+}
+
+export default FullscreenModeClose;
diff --git a/packages/edit-post/src/components/back-button/index.js b/packages/edit-post/src/components/back-button/index.js
new file mode 100644
index 00000000000000..04e1b205051767
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/index.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from './fullscreen-mode-close';
+import { unlock } from '../../lock-unlock';
+
+const { BackButton: BackButtonFill } = unlock( editorPrivateApis );
+
+const slideX = {
+	hidden: { x: '-100%' },
+	distractionFreeInactive: { x: 0 },
+	hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function BackButton( { initialPost } ) {
+	return (
+		<BackButtonFill>
+			{ ( { length } ) =>
+				length <= 1 && (
+					<motion.div
+						variants={ slideX }
+						transition={ { type: 'tween', delay: 0.8 } }
+					>
+						<FullscreenModeClose
+							showTooltip
+							initialPost={ initialPost }
+						/>
+					</motion.div>
+				)
+			}
+		</BackButtonFill>
+	);
+}
+
+export default BackButton;
diff --git a/packages/edit-post/src/components/back-button/style.scss b/packages/edit-post/src/components/back-button/style.scss
new file mode 100644
index 00000000000000..aced752bfedfae
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/style.scss
@@ -0,0 +1,77 @@
+// Developer notes: these rules are duplicated for the site editor.
+// They need to be updated in both places.
+
+.edit-post-fullscreen-mode-close.components-button {
+	@include break-medium() {
+		display: flex;
+		align-items: center;
+		align-self: stretch;
+		border: none;
+		background: $gray-900;
+		color: $white;
+		border-radius: 0;
+		height: $header-height;
+		width: $header-height;
+		position: relative;
+
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+
+		&::before {
+			transition: box-shadow 0.1s ease;
+			@include reduce-motion("transition");
+			content: "";
+			display: block;
+			position: absolute;
+			top: 9px;
+			right: 9px;
+			bottom: 9px + $border-width; // Height of toolbar in edit-post (not edit-site) is 61px tall.
+			left: 9px;
+			border-radius: $radius-small + $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;
+		}
+
+		// Lightened spot color focus.
+		&:focus::before {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.edit-post-fullscreen-mode-close_site-icon {
+		width: $button-size;
+		height: $button-size;
+		border-radius: $radius-small;
+		object-fit: cover;
+		// Compensate for the top-bar border.
+		margin-top: -($border-width);
+	}
+}
+
+/**
+ *  Show icon label overrides.
+ */
+.show-icon-labels .editor-header {
+	.edit-post-fullscreen-mode-close.has-icon {
+		width: $header-height;
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+}
diff --git a/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap b/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
new file mode 100644
index 00000000000000..4f6d298952e70a
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/test/__snapshots__/fullscreen-mode-close.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullscreenModeClose when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
+<div>
+  <div>
+    <a
+      aria-label="Back"
+      class="components-button edit-post-fullscreen-mode-close is-next-40px-default-size"
+      href="edit.php?"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="36px"
+        viewBox="-2 -2 24 24"
+        width="36px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
+`;
diff --git a/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
new file mode 100644
index 00000000000000..4a549370d0f056
--- /dev/null
+++ b/packages/edit-post/src/components/back-button/test/fullscreen-mode-close.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from '../fullscreen-mode-close';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	return jest.fn();
+} );
+
+jest.mock( '@wordpress/core-data' );
+
+describe( 'FullscreenModeClose', () => {
+	describe( 'when in full screen mode', () => {
+		it( 'should display a user uploaded site icon if it exists', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => true,
+					getEntityRecord: () => ( {
+						site_icon_url: 'https://fakeUrl.com',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			render( <FullscreenModeClose /> );
+			const siteIcon = screen.getByAltText( 'Site Icon' );
+
+			expect( siteIcon ).toBeVisible();
+		} );
+
+		it( 'should display a default site icon if no user uploaded site icon exists', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => true,
+					getEntityRecord: () => ( {
+						site_icon_url: '',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			const { container } = render( <FullscreenModeClose /> );
+
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
+		} );
+
+		it( 'should add correct href using post type from initialPost props', () => {
+			useSelect.mockImplementation( ( cb ) => {
+				return cb( () => ( {
+					isResolving: () => false,
+					isFeatureActive: () => true,
+					getPostType: () => {
+						return {
+							slug: 'page',
+							labels: {
+								view_items: 'View Pages',
+							},
+						};
+					},
+					getEntityRecord: () => ( {
+						site_icon_url: '',
+					} ),
+					getCurrentPostType: () => 'post',
+				} ) );
+			} );
+
+			render( <FullscreenModeClose initialPost={ { type: 'page' } } /> );
+
+			const button = screen.getByLabelText( 'View Pages' );
+			expect( button.href ).toBe(
+				'http://localhost/edit.php?post_type=page'
+			);
+		} );
+	} );
+} );
diff --git a/packages/edit-post/src/components/block-manager/category.js b/packages/edit-post/src/components/block-manager/category.js
deleted file mode 100644
index 32adcc305be14a..00000000000000
--- a/packages/edit-post/src/components/block-manager/category.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useCallback } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useInstanceId } from '@wordpress/compose';
-import { CheckboxControl } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import BlockTypesChecklist from './checklist';
-import { store as editPostStore } from '../../store';
-
-function BlockManagerCategory( { title, blockTypes } ) {
-	const instanceId = useInstanceId( BlockManagerCategory );
-	const { defaultAllowedBlockTypes, hiddenBlockTypes } = useSelect(
-		( select ) => {
-			const { getEditorSettings } = select( editorStore );
-			const { getHiddenBlockTypes } = select( editPostStore );
-			return {
-				defaultAllowedBlockTypes:
-					getEditorSettings().defaultAllowedBlockTypes,
-				hiddenBlockTypes: getHiddenBlockTypes(),
-			};
-		},
-		[]
-	);
-	const filteredBlockTypes = useMemo( () => {
-		if ( defaultAllowedBlockTypes === true ) {
-			return blockTypes;
-		}
-		return blockTypes.filter( ( { name } ) => {
-			return defaultAllowedBlockTypes?.includes( name );
-		} );
-	}, [ defaultAllowedBlockTypes, blockTypes ] );
-	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
-	const toggleVisible = useCallback( ( blockName, nextIsChecked ) => {
-		if ( nextIsChecked ) {
-			showBlockTypes( blockName );
-		} else {
-			hideBlockTypes( blockName );
-		}
-	}, [] );
-	const toggleAllVisible = useCallback(
-		( nextIsChecked ) => {
-			const blockNames = map( blockTypes, 'name' );
-			if ( nextIsChecked ) {
-				showBlockTypes( blockNames );
-			} else {
-				hideBlockTypes( blockNames );
-			}
-		},
-		[ blockTypes ]
-	);
-
-	if ( ! filteredBlockTypes.length ) {
-		return null;
-	}
-
-	const checkedBlockNames = map( filteredBlockTypes, 'name' ).filter(
-		( type ) => ! hiddenBlockTypes.includes( type )
-	);
-
-	const titleId = 'edit-post-block-manager__category-title-' + instanceId;
-
-	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
-	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
-
-	return (
-		<div
-			role="group"
-			aria-labelledby={ titleId }
-			className="edit-post-block-manager__category"
-		>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				checked={ isAllChecked }
-				onChange={ toggleAllVisible }
-				className="edit-post-block-manager__category-title"
-				indeterminate={ isIndeterminate }
-				label={ <span id={ titleId }>{ title }</span> }
-			/>
-			<BlockTypesChecklist
-				blockTypes={ filteredBlockTypes }
-				value={ checkedBlockNames }
-				onItemChange={ toggleVisible }
-			/>
-		</div>
-	);
-}
-
-export default BlockManagerCategory;
diff --git a/packages/edit-post/src/components/block-manager/checklist.js b/packages/edit-post/src/components/block-manager/checklist.js
deleted file mode 100644
index aa21fefb1c8180..00000000000000
--- a/packages/edit-post/src/components/block-manager/checklist.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockIcon } from '@wordpress/block-editor';
-import { CheckboxControl } from '@wordpress/components';
-
-function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
-	return (
-		<ul className="edit-post-block-manager__checklist">
-			{ blockTypes.map( ( blockType ) => (
-				<li
-					key={ blockType.name }
-					className="edit-post-block-manager__checklist-item"
-				>
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						label={ blockType.title }
-						checked={ value.includes( blockType.name ) }
-						onChange={ ( ...args ) =>
-							onItemChange( blockType.name, ...args )
-						}
-					/>
-					<BlockIcon icon={ blockType.icon } />
-				</li>
-			) ) }
-		</ul>
-	);
-}
-
-export default BlockTypesChecklist;
diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js
deleted file mode 100644
index bc141500390ad7..00000000000000
--- a/packages/edit-post/src/components/block-manager/index.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { withSelect } from '@wordpress/data';
-import { SearchControl } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import BlockManagerCategory from './category';
-import { store as editPostStore } from '../../store';
-
-function BlockManager( {
-	blockTypes,
-	categories,
-	hasBlockSupport,
-	isMatchingSearchTerm,
-	numberOfHiddenBlocks,
-} ) {
-	const debouncedSpeak = useDebounce( speak, 500 );
-	const [ search, setSearch ] = useState( '' );
-
-	// Filtering occurs here (as opposed to `withSelect`) to avoid
-	// wasted renders by consequence of `Array#filter` producing
-	// a new value reference on each call.
-	blockTypes = blockTypes.filter(
-		( blockType ) =>
-			hasBlockSupport( blockType, 'inserter', true ) &&
-			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
-			( ! blockType.parent ||
-				blockType.parent.includes( 'core/post-content' ) )
-	);
-
-	// Announce search results on change
-	useEffect( () => {
-		if ( ! search ) {
-			return;
-		}
-		const count = blockTypes.length;
-		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results. */
-			_n( '%d result found.', '%d results found.', count ),
-			count
-		);
-		debouncedSpeak( resultsFoundMessage );
-	}, [ blockTypes.length, search, debouncedSpeak ] );
-
-	return (
-		<div className="edit-post-block-manager__content">
-			{ !! numberOfHiddenBlocks && (
-				<div className="edit-post-block-manager__disabled-blocks-count">
-					{ sprintf(
-						/* translators: %d: number of blocks. */
-						_n(
-							'%d block is hidden.',
-							'%d blocks are hidden.',
-							numberOfHiddenBlocks
-						),
-						numberOfHiddenBlocks
-					) }
-				</div>
-			) }
-			<SearchControl
-				label={ __( 'Search for a block' ) }
-				placeholder={ __( 'Search for a block' ) }
-				value={ search }
-				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="edit-post-block-manager__search"
-			/>
-			<div
-				tabIndex="0"
-				role="region"
-				aria-label={ __( 'Available block types' ) }
-				className="edit-post-block-manager__results"
-			>
-				{ blockTypes.length === 0 && (
-					<p className="edit-post-block-manager__no-results">
-						{ __( 'No blocks found.' ) }
-					</p>
-				) }
-				{ categories.map( ( category ) => (
-					<BlockManagerCategory
-						key={ category.slug }
-						title={ category.title }
-						blockTypes={ filter( blockTypes, {
-							category: category.slug,
-						} ) }
-					/>
-				) ) }
-				<BlockManagerCategory
-					title={ __( 'Uncategorized' ) }
-					blockTypes={ filter(
-						blockTypes,
-						( { category } ) => ! category
-					) }
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default withSelect( ( select ) => {
-	const {
-		getBlockTypes,
-		getCategories,
-		hasBlockSupport,
-		isMatchingSearchTerm,
-	} = select( blocksStore );
-	const { getHiddenBlockTypes } = select( editPostStore );
-
-	// Some hidden blocks become unregistered
-	// by removing for instance the plugin that registered them, yet
-	// they're still remain as hidden by the user's action.
-	// We consider "hidden", blocks which were hidden and
-	// are still registered.
-	const blockTypes = getBlockTypes();
-	const hiddenBlockTypes = getHiddenBlockTypes().filter( ( hiddenBlock ) => {
-		return blockTypes.some(
-			( registeredBlock ) => registeredBlock.name === hiddenBlock
-		);
-	} );
-	const numberOfHiddenBlocks =
-		Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
-
-	return {
-		blockTypes,
-		categories: getCategories(),
-		hasBlockSupport,
-		isMatchingSearchTerm,
-		numberOfHiddenBlocks,
-	};
-} )( BlockManager );
diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
deleted file mode 100644
index d8f9b78fe5a391..00000000000000
--- a/packages/edit-post/src/components/block-manager/style.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.edit-post-block-manager__no-results {
-	font-style: italic;
-	padding: $grid-unit-30 0;
-	text-align: center;
-}
-
-.edit-post-block-manager__search {
-	margin: $grid-unit-20 0;
-}
-
-.edit-post-block-manager__disabled-blocks-count {
-	border: 1px solid $gray-300;
-	border-width: 1px 0;
-	// Cover up horizontal areas off the sides of the box rectangle
-	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
-	padding: $grid-unit-10;
-	background-color: $white;
-	text-align: center;
-	font-style: italic;
-	position: sticky;
-	// When sticking, tuck the top border beneath the modal header border
-	top: -1px;
-	z-index: z-index(".edit-post-block-manager__disabled-blocks-count");
-
-	// Stick the category titles to the bottom
-	~ .edit-post-block-manager__results .edit-post-block-manager__category-title {
-		top: 35px;
-	}
-}
-
-.edit-post-block-manager__category {
-	margin: 0 0 $grid-unit-30 0;
-}
-
-.edit-post-block-manager__category-title {
-	position: sticky;
-	top: 0;
-	padding: $grid-unit-20 0;
-	background-color: $white;
-	z-index: z-index(".edit-post-block-manager__category-title");
-
-	.components-checkbox-control__label {
-		font-weight: 600;
-	}
-}
-
-.edit-post-block-manager__checklist {
-	margin-top: 0;
-}
-
-.edit-post-block-manager__category-title,
-.edit-post-block-manager__checklist-item {
-	border-bottom: 1px solid $gray-300;
-}
-
-.edit-post-block-manager__checklist-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 0;
-	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
-
-	.components-modal__content &.components-checkbox-control__input-container {
-		margin: 0 $grid-unit-10;
-	}
-
-	.block-editor-block-icon {
-		margin-right: 10px;
-		fill: $gray-900;
-	}
-}
-
-.edit-post-block-manager__results {
-	border-top: $border-width solid $gray-300;
-}
-
-// Remove the top border from results when adjacent to the disabled block count
-.edit-post-block-manager__disabled-blocks-count + .edit-post-block-manager__results {
-	border-top-width: 0;
-}
diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js
index 798753cfea357a..00492afbdc2624 100644
--- a/packages/edit-post/src/components/browser-url/index.js
+++ b/packages/edit-post/src/components/browser-url/index.js
@@ -17,22 +17,6 @@ export function getPostEditURL( postId ) {
 	return addQueryArgs( 'post.php', { post: postId, action: 'edit' } );
 }
 
-/**
- * Returns the Post's Trashed URL.
- *
- * @param {number} postId   Post ID.
- * @param {string} postType Post Type.
- *
- * @return {string} Post trashed URL.
- */
-export function getPostTrashedURL( postId, postType ) {
-	return addQueryArgs( 'edit.php', {
-		trashed: 1,
-		post_type: postType,
-		ids: postId,
-	} );
-}
-
 export class BrowserURL extends Component {
 	constructor() {
 		super( ...arguments );
@@ -43,16 +27,9 @@ export class BrowserURL extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { postId, postStatus, postType, isSavingPost } = this.props;
+		const { postId, postStatus } = this.props;
 		const { historyId } = this.state;
 
-		// Posts are still dirty while saving so wait for saving to finish
-		// to avoid the unsaved changes warning when trashing posts.
-		if ( postStatus === 'trash' && ! isSavingPost ) {
-			this.setTrashURL( postId, postType );
-			return;
-		}
-
 		if (
 			( postId !== prevProps.postId || postId !== historyId ) &&
 			postStatus !== 'auto-draft' &&
@@ -62,16 +39,6 @@ export class BrowserURL extends Component {
 		}
 	}
 
-	/**
-	 * Navigates the browser to the post trashed URL to show a notice about the trashed post.
-	 *
-	 * @param {number} postId   Post ID.
-	 * @param {string} postType Post Type.
-	 */
-	setTrashURL( postId, postType ) {
-		window.location.href = getPostTrashedURL( postId, postType );
-	}
-
 	/**
 	 * Replaces the browser URL with a post editor link for the given post ID.
 	 *
@@ -99,7 +66,7 @@ export class BrowserURL extends Component {
 }
 
 export default withSelect( ( select ) => {
-	const { getCurrentPost, isSavingPost } = select( editorStore );
+	const { getCurrentPost } = select( editorStore );
 	const post = getCurrentPost();
 	let { id, status, type } = post;
 	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes( type );
@@ -110,7 +77,5 @@ export default withSelect( ( select ) => {
 	return {
 		postId: id,
 		postStatus: status,
-		postType: type,
-		isSavingPost: isSavingPost(),
 	};
 } )( BrowserURL );
diff --git a/packages/edit-post/src/components/browser-url/test/index.js b/packages/edit-post/src/components/browser-url/test/index.js
index d4b09fc29d7eff..01522680419fe2 100644
--- a/packages/edit-post/src/components/browser-url/test/index.js
+++ b/packages/edit-post/src/components/browser-url/test/index.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { getPostEditURL, getPostTrashedURL, BrowserURL } from '../';
+import { getPostEditURL, BrowserURL } from '../';
 
 describe( 'getPostEditURL', () => {
 	it( 'should generate relative path with post and action arguments', () => {
@@ -16,14 +16,6 @@ describe( 'getPostEditURL', () => {
 	} );
 } );
 
-describe( 'getPostTrashedURL', () => {
-	it( 'should generate relative path with post and action arguments', () => {
-		const url = getPostTrashedURL( 1, 'page' );
-
-		expect( url ).toBe( 'edit.php?trashed=1&post_type=page&ids=1' );
-	} );
-} );
-
 describe( 'BrowserURL', () => {
 	let replaceStateSpy;
 
diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js
deleted file mode 100644
index adf1b9608d6a14..00000000000000
--- a/packages/edit-post/src/components/device-preview/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Icon, MenuGroup } from '@wordpress/components';
-import { PostPreviewButton, store as editorStore } from '@wordpress/editor';
-import { external } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function DevicePreview() {
-	const {
-		hasActiveMetaboxes,
-		isPostSaveable,
-		isSaving,
-		isViewable,
-		deviceType,
-	} = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
-			isViewable: get( postType, [ 'viewable' ], false ),
-			deviceType:
-				select( editPostStore ).__experimentalGetPreviewDeviceType(),
-		};
-	}, [] );
-	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
-		useDispatch( editPostStore );
-
-	return (
-		<PreviewOptions
-			isEnabled={ isPostSaveable }
-			className="edit-post-post-preview-dropdown"
-			deviceType={ deviceType }
-			setDeviceType={ setPreviewDeviceType }
-			/* translators: button label text should, if possible, be under 16 characters. */
-			viewLabel={ __( 'Preview' ) }
-		>
-			{ isViewable && (
-				<MenuGroup>
-					<div className="edit-post-header-preview__grouping-external">
-						<PostPreviewButton
-							className={
-								'edit-post-header-preview__button-external'
-							}
-							role="menuitem"
-							forceIsAutosaveable={ hasActiveMetaboxes }
-							forcePreviewLink={ isSaving ? null : undefined }
-							textContent={
-								<>
-									{ __( 'Preview in new tab' ) }
-									<Icon icon={ external } />
-								</>
-							}
-						/>
-					</div>
-				</MenuGroup>
-			) }
-		</PreviewOptions>
-	);
-}
diff --git a/packages/edit-post/src/components/editor-initialization/index.js b/packages/edit-post/src/components/editor-initialization/index.js
index 0ba9cc863f473f..b240ca245827c9 100644
--- a/packages/edit-post/src/components/editor-initialization/index.js
+++ b/packages/edit-post/src/components/editor-initialization/index.js
@@ -1,20 +1,15 @@
 /**
  * Internal dependencies
  */
-import {
-	useBlockSelectionListener,
-	useUpdatePostLinkListener,
-} from './listener-hooks';
+import { useUpdatePostLinkListener } from './listener-hooks';
 
 /**
  * Data component used for initializing the editor and re-initializes
  * when postId changes or on unmount.
  *
- * @param {number} postId The id of the post.
  * @return {null} This is a data component so does not render any ui.
  */
-export default function EditorInitialization( { postId } ) {
-	useBlockSelectionListener( postId );
-	useUpdatePostLinkListener( postId );
+export default function EditorInitialization() {
+	useUpdatePostLinkListener();
 	return null;
 }
diff --git a/packages/edit-post/src/components/editor-initialization/listener-hooks.js b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
index 57f5f67721ba72..968031d59adbc3 100644
--- a/packages/edit-post/src/components/editor-initialization/listener-hooks.js
+++ b/packages/edit-post/src/components/editor-initialization/listener-hooks.js
@@ -1,75 +1,41 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import {
-	STORE_NAME,
 	VIEW_AS_LINK_SELECTOR,
 	VIEW_AS_PREVIEW_LINK_SELECTOR,
 } from '../../store/constants';
 
-/**
- * This listener hook monitors for block selection and triggers the appropriate
- * sidebar state.
- *
- * @param {number} postId The current post id.
- */
-export const useBlockSelectionListener = ( postId ) => {
-	const { hasBlockSelection, isEditorSidebarOpened } = useSelect(
-		( select ) => ( {
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			isEditorSidebarOpened: select( STORE_NAME ).isEditorSidebarOpened(),
-		} ),
-		[ postId ]
-	);
-
-	const { openGeneralSidebar } = useDispatch( STORE_NAME );
-
-	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) {
-			return;
-		}
-		if ( hasBlockSelection ) {
-			openGeneralSidebar( 'edit-post/block' );
-		} else {
-			openGeneralSidebar( 'edit-post/document' );
-		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
-};
-
 /**
  * This listener hook monitors any change in permalink and updates the view
  * post link in the admin bar.
- *
- * @param {number} postId
  */
-export const useUpdatePostLinkListener = ( postId ) => {
+export const useUpdatePostLinkListener = () => {
 	const { newPermalink } = useSelect(
 		( select ) => ( {
 			newPermalink: select( editorStore ).getCurrentPost().link,
 		} ),
-		[ postId ]
+		[]
 	);
-	const nodeToUpdate = useRef();
+	const nodeToUpdateRef = useRef();
 
 	useEffect( () => {
-		nodeToUpdate.current =
+		nodeToUpdateRef.current =
 			document.querySelector( VIEW_AS_PREVIEW_LINK_SELECTOR ) ||
 			document.querySelector( VIEW_AS_LINK_SELECTOR );
-	}, [ postId ] );
+	}, [] );
 
 	useEffect( () => {
-		if ( ! newPermalink || ! nodeToUpdate.current ) {
+		if ( ! newPermalink || ! nodeToUpdateRef.current ) {
 			return;
 		}
-		nodeToUpdate.current.setAttribute( 'href', newPermalink );
+		nodeToUpdateRef.current.setAttribute( 'href', newPermalink );
 	}, [ newPermalink ] );
 };
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..21b7a045a0dd53 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
@@ -11,10 +11,7 @@ import { RegistryProvider, createRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import {
-	useBlockSelectionListener,
-	useUpdatePostLinkListener,
-} from '../listener-hooks';
+import { useUpdatePostLinkListener } from '../listener-hooks';
 import { STORE_NAME } from '../../../store/constants';
 
 describe( 'listener hook tests', () => {
@@ -44,6 +41,12 @@ describe( 'listener hook tests', () => {
 				isViewportMatch: jest.fn(),
 			},
 		},
+		'core/preferences': {
+			...storeConfig,
+			selectors: {
+				get: jest.fn(),
+			},
+		},
 		[ STORE_NAME ]: {
 			...storeConfig,
 			actions: {
@@ -65,10 +68,6 @@ describe( 'listener hook tests', () => {
 	const setMockReturnValue = ( store, functionName, value ) => {
 		mockStores[ store ].selectors[ functionName ].mockReturnValue( value );
 	};
-	const getSpyedFunction = ( store, functionName ) =>
-		mockStores[ store ].selectors[ functionName ];
-	const getSpyedAction = ( store, actionName ) =>
-		mockStores[ store ].actions[ actionName ];
 
 	afterEach( () => {
 		Object.values( mockStores ).forEach( ( storeMocks ) => {
@@ -80,71 +79,17 @@ describe( 'listener hook tests', () => {
 			} );
 		} );
 	} );
-	describe( 'useBlockSelectionListener', () => {
-		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useBlockSelectionListener( postId );
-			return null;
-		};
-		const TestedOutput = () => {
-			return (
-				<RegistryProvider value={ registry }>
-					<TestComponent postId={ 10 } />
-				</RegistryProvider>
-			);
-		};
-
-		it( 'does nothing when editor sidebar is not open', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', false );
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedFunction( STORE_NAME, 'isEditorSidebarOpened' )
-			).toHaveBeenCalled();
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).not.toHaveBeenCalled();
-		} );
-		it( 'opens block sidebar if block is selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				true
-			);
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/block' );
-		} );
-		it( 'opens document sidebar if block is not selected', () => {
-			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
-			setMockReturnValue(
-				'core/block-editor',
-				'getBlockSelectionStart',
-				false
-			);
-
-			render( <TestedOutput /> );
-
-			expect(
-				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledWith( 'edit-post/document' );
-		} );
-	} );
 
 	describe( 'useUpdatePostLinkListener', () => {
 		const registry = createRegistry( mockStores );
-		const TestComponent = ( { postId } ) => {
-			useUpdatePostLinkListener( postId );
+		const TestComponent = () => {
+			useUpdatePostLinkListener();
 			return null;
 		};
-		const TestedOutput = ( { postId = 10 } ) => {
+		const TestedOutput = () => {
 			return (
 				<RegistryProvider value={ registry }>
-					<TestComponent postId={ postId } />
+					<TestComponent />
 				</RegistryProvider>
 			);
 		};
@@ -152,6 +97,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,
 			} );
@@ -181,7 +127,7 @@ describe( 'listener hook tests', () => {
 			} );
 			const { rerender } = render( <TestedOutput /> );
 
-			rerender( <TestedOutput id={ 20 } /> );
+			rerender( <TestedOutput /> );
 
 			expect( mockSelector ).toHaveBeenCalledTimes( 1 );
 			act( () => {
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
deleted file mode 100644
index be6b355d1c8939..00000000000000
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { addQueryArgs } from '@wordpress/url';
-import { wordpress } from '@wordpress/icons';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-function FullscreenModeClose( { showTooltip, icon, href } ) {
-	const { isActive, isRequestingSiteIcon, postType, siteIconUrl } = useSelect(
-		( select ) => {
-			const { getCurrentPostType } = select( editorStore );
-			const { isFeatureActive } = select( editPostStore );
-			const { getEntityRecord, getPostType, isResolving } =
-				select( coreStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-			return {
-				isActive: isFeatureActive( 'fullscreenMode' ),
-				isRequestingSiteIcon: isResolving( 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				postType: getPostType( getCurrentPostType() ),
-				siteIconUrl: siteData.site_icon_url,
-			};
-		},
-		[]
-	);
-
-	const disableMotion = useReducedMotion();
-
-	if ( ! isActive || ! postType ) {
-		return null;
-	}
-
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
-
-	const effect = {
-		expand: {
-			scale: 1.25,
-			transition: { type: 'tween', duration: '0.3' },
-		},
-	};
-
-	if ( siteIconUrl ) {
-		buttonIcon = (
-			<motion.img
-				variants={ ! disableMotion && effect }
-				alt={ __( 'Site Icon' ) }
-				className="edit-post-fullscreen-mode-close_site-icon"
-				src={ siteIconUrl }
-			/>
-		);
-	}
-
-	if ( isRequestingSiteIcon ) {
-		buttonIcon = null;
-	}
-
-	// Override default icon if custom icon is provided via props.
-	if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
-	}
-
-	const classes = classnames( {
-		'edit-post-fullscreen-mode-close': true,
-		'has-icon': siteIconUrl,
-	} );
-
-	return (
-		<motion.div whileHover="expand">
-			<Button
-				className={ classes }
-				href={
-					href ??
-					addQueryArgs( 'edit.php', {
-						post_type: postType.slug,
-					} )
-				}
-				label={ get(
-					postType,
-					[ 'labels', 'view_items' ],
-					__( 'Back' )
-				) }
-				showTooltip={ showTooltip }
-			>
-				{ buttonIcon }
-			</Button>
-		</motion.div>
-	);
-}
-
-export default FullscreenModeClose;
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
deleted file mode 100644
index 31289443436923..00000000000000
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-// Developer notes: these rules are duplicated for the site editor.
-// They need to be updated in both places.
-
-.edit-post-fullscreen-mode-close.components-button {
-	// Do not show the toolbar icon on small screens,
-	// when Fullscreen Mode is not an option in the "More" menu.
-	display: none;
-
-	@include break-medium() {
-		display: flex;
-		align-items: center;
-		align-self: stretch;
-		border: none;
-		background: $gray-900;
-		color: $white;
-		border-radius: 0;
-		height: $header-height + $border-width;
-		width: $header-height;
-		position: relative;
-		margin-bottom: - $border-width;
-
-		&:active {
-			color: $white;
-		}
-
-		&:focus {
-			box-shadow: none;
-		}
-
-		&::before {
-			transition: box-shadow 0.1s ease;
-			@include reduce-motion("transition");
-			content: "";
-			display: block;
-			position: absolute;
-			top: 9px;
-			right: 9px;
-			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;
-		}
-
-		// Lightened spot color focus.
-		&:focus::before {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-
-	.edit-post-fullscreen-mode-close_site-icon {
-		width: $button-size;
-		height: $button-size;
-		border-radius: $radius-block-ui;
-		object-fit: cover;
-		// Compensate for the top-bar border.
-		margin-top: -($border-width);
-	}
-}
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
deleted file mode 100644
index 900d822cdcc050..00000000000000
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FullscreenModeClose when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
-<div>
-  <div>
-    <a
-      aria-label="Back"
-      class="components-button edit-post-fullscreen-mode-close"
-      href="edit.php?"
-    >
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        height="36px"
-        viewBox="-2 -2 24 24"
-        width="36px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
-        />
-      </svg>
-    </a>
-  </div>
-</div>
-`;
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
deleted file mode 100644
index 59088779a5241e..00000000000000
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from '../';
-
-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/core-data' );
-
-describe( 'FullscreenModeClose', () => {
-	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					isResolving: () => false,
-					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
-					getPostType: () => true,
-					getEntityRecord: () => ( {
-						site_icon_url: 'https://fakeUrl.com',
-					} ),
-				} ) );
-			} );
-
-			render( <FullscreenModeClose /> );
-
-			const siteIcon = screen.getByAltText( 'Site Icon' );
-
-			expect( siteIcon ).toBeVisible();
-		} );
-
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					isResolving: () => false,
-					isFeatureActive: () => true,
-					getCurrentPostType: () => {},
-					getPostType: () => true,
-					getEntityRecord: () => ( {
-						site_icon_url: '',
-					} ),
-				} ) );
-			} );
-
-			const { container } = render( <FullscreenModeClose /> );
-
-			expect(
-				screen.queryByAltText( 'Site Icon' )
-			).not.toBeInTheDocument();
-
-			expect( container ).toMatchSnapshot();
-		} );
-	} );
-} );
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
deleted file mode 100644
index b4d30adc20244a..00000000000000
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	ToolSelector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	EditorHistoryRedo,
-	EditorHistoryUndo,
-	store as editorStore,
-} from '@wordpress/editor';
-import { Button, ToolbarItem } from '@wordpress/components';
-import { listView, plus } from '@wordpress/icons';
-import { useRef, useCallback } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
-function HeaderToolbar() {
-	const inserterButton = useRef();
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editPostStore );
-	const {
-		isInserterEnabled,
-		isInserterOpened,
-		isTextModeEnabled,
-		showIconLabels,
-		isListViewOpen,
-		listViewShortcut,
-	} = useSelect( ( select ) => {
-		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
-			select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
-		const { getEditorMode, isFeatureActive, isListViewOpened } =
-			select( editPostStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-
-		return {
-			// This setting (richEditingEnabled) should not live in the block editor's setting.
-			isInserterEnabled:
-				getEditorMode() === 'visual' &&
-				getEditorSettings().richEditingEnabled &&
-				hasInserterItems(
-					getBlockRootClientId( getBlockSelectionEnd() )
-				),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isTextModeEnabled: getEditorMode() === 'text',
-			showIconLabels: isFeatureActive( 'showIconLabels' ),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-post/toggle-list-view'
-			),
-		};
-	}, [] );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideViewport = useViewportMatch( 'wide' );
-
-	/* translators: accessibility text for the editor toolbar */
-	const toolbarAriaLabel = __( 'Document tools' );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-	const overflowItems = (
-		<>
-			<ToolbarItem
-				as={ Button }
-				className="edit-post-header-toolbar__document-overview-toggle"
-				icon={ listView }
-				disabled={ isTextModeEnabled }
-				isPressed={ isListViewOpen }
-				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'Document Overview' ) }
-				onClick={ toggleListView }
-				shortcut={ listViewShortcut }
-				showTooltip={ ! showIconLabels }
-				variant={ showIconLabels ? 'tertiary' : undefined }
-			/>
-		</>
-	);
-	const openInserter = useCallback( () => {
-		if ( isInserterOpened ) {
-			// Focusing the inserter button closes the inserter popover.
-			inserterButton.current.focus();
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpened, setIsInserterOpened ] );
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
-
-	return (
-		<NavigableToolbar
-			className="edit-post-header-toolbar"
-			aria-label={ toolbarAriaLabel }
-		>
-			<div className="edit-post-header-toolbar__left">
-				<ToolbarItem
-					ref={ inserterButton }
-					as={ Button }
-					className="edit-post-header-toolbar__inserter-toggle"
-					variant="primary"
-					isPressed={ isInserterOpened }
-					onMouseDown={ preventDefault }
-					onClick={ openInserter }
-					disabled={ ! isInserterEnabled }
-					icon={ plus }
-					label={ showIconLabels ? shortLabel : longLabel }
-					showTooltip={ ! showIconLabels }
-				/>
-				{ ( isWideViewport || ! showIconLabels ) && (
-					<>
-						{ isLargeViewport && (
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ isTextModeEnabled }
-							/>
-						) }
-						<ToolbarItem
-							as={ EditorHistoryUndo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						<ToolbarItem
-							as={ EditorHistoryRedo }
-							showTooltip={ ! showIconLabels }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-						/>
-						{ overflowItems }
-					</>
-				) }
-			</div>
-		</NavigableToolbar>
-	);
-}
-
-export default HeaderToolbar;
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js
index 26ab309d2e7a07..dc256c87053dfa 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.native.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Platform, ScrollView, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef, useState } from '@wordpress/element';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { useCallback, useRef, useEffect, Platform } from '@wordpress/element';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
 import { __ } from '@wordpress/i18n';
@@ -19,10 +19,19 @@ import {
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import {
 	keyboardClose,
-	undo as undoIcon,
-	redo as redoIcon,
+	audio as audioIcon,
+	media as imageIcon,
+	video as videoIcon,
+	gallery as galleryIcon,
 } from '@wordpress/icons';
 import { store as editorStore } from '@wordpress/editor';
+import { createBlock } from '@wordpress/blocks';
+import {
+	toggleUndoButton,
+	toggleRedoButton,
+	subscribeOnUndoPressed,
+	subscribeOnRedoPressed,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -30,6 +39,13 @@ import { store as editorStore } from '@wordpress/editor';
 import styles from './style.scss';
 import { store as editPostStore } from '../../../store';
 
+const shadowStyle = {
+	shadowOffset: { width: 2, height: 2 },
+	shadowOpacity: 1,
+	shadowRadius: 6,
+	elevation: 18,
+};
+
 function HeaderToolbar( {
 	hasRedo,
 	hasUndo,
@@ -37,83 +53,135 @@ function HeaderToolbar( {
 	undo,
 	showInserter,
 	showKeyboardHideButton,
-	getStylesFromColorScheme,
+	insertBlock,
 	onHideKeyboard,
 	isRTL,
 	noContentSelected,
 } ) {
-	const wasNoContentSelected = useRef( noContentSelected );
-	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+	const anchorNodeRef = useRef();
+
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'header-toolbar__container' ],
+			styles[ 'header-toolbar__container--dark' ]
+		),
+		{ borderTopWidth: StyleSheet.hairlineWidth },
+	];
+
+	useEffect( () => {
+		const onUndoSubscription = subscribeOnUndoPressed( undo );
+		const onRedoSubscription = subscribeOnRedoPressed( redo );
+
+		return () => {
+			onUndoSubscription?.remove();
+			onRedoSubscription?.remove();
+		};
+	}, [ undo, redo ] );
+
+	useEffect( () => {
+		toggleUndoButton( ! hasUndo );
+	}, [ hasUndo ] );
+
+	useEffect( () => {
+		toggleRedoButton( ! hasRedo );
+	}, [ hasRedo ] );
 
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
 		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
-		const isAndroid = Platform.OS === 'android';
-		if ( isAndroid && isRTL ) {
+		if ( Platform.isAndroid && isRTL ) {
 			scrollViewRef.current.scrollToEnd();
 		} else {
 			scrollViewRef.current.scrollTo( { x: 0 } );
 		}
 	};
-	const renderHistoryButtons = () => {
-		const buttons = [
-			/* TODO: replace with EditorHistoryRedo and EditorHistoryUndo. */
+
+	const onInsertBlock = useCallback(
+		( blockType ) => () => {
+			insertBlock( createBlock( blockType ), undefined, undefined, true, {
+				source: 'inserter_menu',
+				inserterMethod: 'quick-inserter',
+			} );
+		},
+		[ insertBlock ]
+	);
+
+	const renderMediaButtons = (
+		<ToolbarGroup>
 			<ToolbarButton
-				key="undoButton"
-				title={ __( 'Undo' ) }
-				icon={ ! isRTL ? undoIcon : redoIcon }
-				isDisabled={ ! hasUndo }
-				onClick={ undo }
+				key="imageButton"
+				title={ __( 'Image' ) }
+				icon={ imageIcon }
+				onClick={ onInsertBlock( 'core/image' ) }
+				testID="insert-image-button"
 				extraProps={ {
-					hint: __( 'Double tap to undo last change' ),
+					hint: __( 'Insert Image Block' ),
 				} }
-			/>,
+			/>
 			<ToolbarButton
-				key="redoButton"
-				title={ __( 'Redo' ) }
-				icon={ ! isRTL ? redoIcon : undoIcon }
-				isDisabled={ ! hasRedo }
-				onClick={ redo }
+				key="videoButton"
+				title={ __( 'Video' ) }
+				icon={ videoIcon }
+				onClick={ onInsertBlock( 'core/video' ) }
+				testID="insert-video-button"
 				extraProps={ {
-					hint: __( 'Double tap to redo last change' ),
+					hint: __( 'Insert Video Block' ),
 				} }
-			/>,
-		];
+			/>
+			<ToolbarButton
+				key="galleryButton"
+				title={ __( 'Gallery' ) }
+				icon={ galleryIcon }
+				onClick={ onInsertBlock( 'core/gallery' ) }
+				testID="insert-gallery-button"
+				extraProps={ {
+					hint: __( 'Insert Gallery Block' ),
+				} }
+			/>
+			<ToolbarButton
+				key="audioButton"
+				title={ __( 'Audio' ) }
+				icon={ audioIcon }
+				onClick={ onInsertBlock( 'core/audio' ) }
+				testID="insert-audio-button"
+				extraProps={ {
+					hint: __( 'Insert Audio Block' ),
+				} }
+			/>
+		</ToolbarGroup>
+	);
 
-		return isRTL ? buttons.reverse() : buttons;
-	};
+	/* translators: accessibility text for the editor toolbar */
+	const toolbarAriaLabel = __( 'Document tools' );
 
-	const onToggleInserter = useCallback(
-		( isOpen ) => {
-			if ( isOpen ) {
-				wasNoContentSelected.current = noContentSelected;
-			}
-			setIsInserterOpen( isOpen );
-		},
-		[ noContentSelected ]
+	const shadowColor = usePreferredColorSchemeStyle(
+		styles[ 'header-toolbar__keyboard-hide-shadow--light' ],
+		styles[ 'header-toolbar__keyboard-hide-shadow--dark' ]
 	);
-
-	// Expanded mode should be preserved while the inserter is open.
-	// This way we prevent style updates during the opening transition.
-	const useExpandedMode = isInserterOpen
-		? wasNoContentSelected.current
-		: noContentSelected;
+	const showKeyboardButtonStyles = [
+		usePreferredColorSchemeStyle(
+			styles[ 'header-toolbar__keyboard-hide-container' ],
+			styles[ 'header-toolbar__keyboard-hide-container--dark' ]
+		),
+		shadowStyle,
+		{
+			shadowColor: Platform.isAndroid
+				? styles[ 'header-toolbar__keyboard-hide-shadow--solid' ].color
+				: shadowColor.color,
+		},
+	];
 
 	return (
 		<View
-			style={ [
-				getStylesFromColorScheme(
-					styles[ 'header-toolbar__container' ],
-					styles[ 'header-toolbar__container--dark' ]
-				),
-				useExpandedMode &&
-					styles[ 'header-toolbar__container--expanded' ],
-			] }
+			ref={ anchorNodeRef }
+			testID={ toolbarAriaLabel }
+			accessibilityLabel={ toolbarAriaLabel }
+			style={ containerStyle }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
 				onContentSizeChange={ scrollToStart }
-				horizontal={ true }
+				horizontal
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }
@@ -121,20 +189,13 @@ function HeaderToolbar( {
 					styles[ 'header-toolbar__scrollable-content' ]
 				}
 			>
-				<Inserter
-					disabled={ ! showInserter }
-					useExpandedMode={ useExpandedMode }
-					onToggle={ onToggleInserter }
-				/>
-				{ renderHistoryButtons() }
-				<BlockToolbar />
+				<Inserter disabled={ ! showInserter } />
+
+				{ noContentSelected && renderMediaButtons }
+				<BlockToolbar anchorNodeRef={ anchorNodeRef.current } />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<ToolbarGroup
-					passedStyle={
-						styles[ 'header-toolbar__keyboard-hide-container' ]
-					}
-				>
+				<ToolbarGroup passedStyle={ showKeyboardButtonStyles }>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -176,7 +237,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { clearSelectedBlock } = dispatch( blockEditorStore );
+		const { clearSelectedBlock, insertBlock } =
+			dispatch( blockEditorStore );
 		const { togglePostTitleSelection } = dispatch( editorStore );
 
 		return {
@@ -186,8 +248,8 @@ export default compose( [
 				clearSelectedBlock();
 				togglePostTitleSelection( false );
 			},
+			insertBlock,
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withPreferredColorScheme,
 ] )( HeaderToolbar );
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.native.scss b/packages/edit-post/src/components/header/header-toolbar/style.native.scss
index 031d082706656a..751f83d3dc63e6 100644
--- a/packages/edit-post/src/components/header/header-toolbar/style.native.scss
+++ b/packages/edit-post/src/components/header/header-toolbar/style.native.scss
@@ -3,13 +3,13 @@
 	height: $mobile-header-toolbar-height;
 	flex-direction: row;
 	background-color: $app-background;
-	border-top-color: #e9eff3;
-	border-top-width: 1px;
+	border-top-color: $light-quaternary;
+	overflow: hidden;
 }
 
 .header-toolbar__container--dark {
-	background-color: $app-background-dark-alt;
-	border-top-color: $background-dark-elevated;
+	background-color: $app-safe-area-background-dark;
+	border-top-color: $dark-quaternary;
 }
 
 .header-toolbar__container--expanded {
@@ -18,6 +18,7 @@
 
 .header-toolbar__scrollable-content {
 	flex-grow: 1; // Fixes RTL issue on Android.
+	padding-right: 8px;
 }
 
 .header-toolbar__keyboard-hide-container {
@@ -27,4 +28,22 @@
 	width: 44px;
 	justify-content: center;
 	align-items: center;
+	border-color: transparent;
+	background-color: $app-background;
+}
+
+.header-toolbar__keyboard-hide-container--dark {
+	background-color: $app-background-dark-alt;
+}
+
+.header-toolbar__keyboard-hide-shadow--solid {
+	color: $black;
+}
+
+.header-toolbar__keyboard-hide-shadow--light {
+	color: $light-quaternary;
+}
+
+.header-toolbar__keyboard-hide-shadow--dark {
+	color: $light-primary;
 }
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
deleted file mode 100644
index 87aec00004c02b..00000000000000
--- a/packages/edit-post/src/components/header/header-toolbar/style.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-.edit-post-header-toolbar {
-	display: inline-flex;
-	flex-grow: 1;
-	align-items: center;
-	border: none;
-
-	// Hide all action buttons except the inserter on mobile.
-	.edit-post-header-toolbar__left > .components-button {
-		display: none;
-
-		@include break-small() {
-			display: inline-flex;
-		}
-	}
-
-	.edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
-		display: inline-flex;
-
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-
-	// Hide table of contents and list view on mobile.
-	.block-editor-list-view {
-		display: none;
-
-		@include break-small() {
-			display: flex;
-		}
-	}
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-post-header-toolbar__left > .components-button.has-icon,
-	.edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-}
-
-// Reduced UI.
-.edit-post-header.has-reduced-ui {
-	@include break-small () {
-		// Apply transition to every button but the first one.
-		.edit-post-header-toolbar__left > * + .components-button,
-		.edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
-			transition: opacity 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		// Zero out opacity unless hovered.
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-button,
-		&:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded="false"] {
-			opacity: 0;
-		}
-	}
-}
-
-.edit-post-header-toolbar__left {
-	display: inline-flex;
-	align-items: center;
-	padding-left: $grid-unit-10;
-
-	@include break-small() {
-		padding-left: $grid-unit-30;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-}
-
-.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
-	margin-right: $grid-unit-10;
-	// Special dimensions for this button.
-	min-width: 32px;
-	width: 32px;
-	height: 32px;
-	padding: 0;
-
-	.show-icon-labels & {
-		width: auto;
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-}
-
-.show-icon-labels .edit-post-header-toolbar__left > * + * {
-	margin-left: $grid-unit-10;
-}
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
deleted file mode 100644
index fb98f05970bb09..00000000000000
--- a/packages/edit-post/src/components/header/index.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-import { PinnedItems } from '@wordpress/interface';
-import { useViewportMatch } from '@wordpress/compose';
-import { __unstableMotion as motion } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from './fullscreen-mode-close';
-import HeaderToolbar from './header-toolbar';
-import MoreMenu from './more-menu';
-import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
-import { default as DevicePreview } from '../device-preview';
-import MainDashboardButton from './main-dashboard-button';
-import { store as editPostStore } from '../../store';
-import TemplateTitle from './template-title';
-
-function Header( { setEntitiesSavedStatesCallback } ) {
-	const isLargeViewport = useViewportMatch( 'large' );
-	const {
-		hasActiveMetaboxes,
-		isPublishSidebarOpened,
-		isSaving,
-		showIconLabels,
-		isDistractionFree,
-	} = useSelect(
-		( select ) => ( {
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isPublishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
-			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
-				isLargeViewport,
-		} ),
-		[]
-	);
-
-	const classes = classnames( 'edit-post-header' );
-
-	const slideY = {
-		hidden: isDistractionFree ? { y: '-50' } : { y: 0 },
-		hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
-	};
-
-	const slideX = {
-		hidden: isDistractionFree ? { x: '-100%' } : { x: 0 },
-		hover: { x: 0, transition: { type: 'tween', delay: 0.2 } },
-	};
-
-	return (
-		<div className={ classes }>
-			<MainDashboardButton.Slot>
-				<motion.div
-					variants={ slideX }
-					transition={ { type: 'tween', delay: 0.8 } }
-				>
-					<FullscreenModeClose showTooltip />
-				</motion.div>
-			</MainDashboardButton.Slot>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__toolbar"
-			>
-				<HeaderToolbar />
-				<TemplateTitle />
-			</motion.div>
-			<motion.div
-				variants={ slideY }
-				transition={ { type: 'tween', delay: 0.8 } }
-				className="edit-post-header__settings"
-			>
-				{ ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
-					<PostSavedState
-						forceIsDirty={ hasActiveMetaboxes }
-						forceIsSaving={ isSaving }
-						showIconLabels={ showIconLabels }
-					/>
-				) }
-				<DevicePreview />
-				<PostPreviewButton
-					forceIsAutosaveable={ hasActiveMetaboxes }
-					forcePreviewLink={ isSaving ? null : undefined }
-				/>
-				<PostPublishButtonOrToggle
-					forceIsDirty={ hasActiveMetaboxes }
-					forceIsSaving={ isSaving }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-				/>
-				{ ( isLargeViewport || ! showIconLabels ) && (
-					<>
-						<PinnedItems.Slot scope="core/edit-post" />
-						<MoreMenu showIconLabels={ showIconLabels } />
-					</>
-				) }
-				{ showIconLabels && ! isLargeViewport && (
-					<MoreMenu showIconLabels={ showIconLabels } />
-				) }
-			</motion.div>
-		</div>
-	);
-}
-
-export default Header;
diff --git a/packages/edit-post/src/components/header/index.native.js b/packages/edit-post/src/components/header/index.native.js
index aada04e264490a..ff892dd6916606 100644
--- a/packages/edit-post/src/components/header/index.native.js
+++ b/packages/edit-post/src/components/header/index.native.js
@@ -7,7 +7,7 @@ import { Keyboard } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import '@wordpress/interface';
+import '@wordpress/editor';
 
 /**
  * Internal dependencies
diff --git a/packages/edit-post/src/components/header/main-dashboard-button/index.js b/packages/edit-post/src/components/header/main-dashboard-button/index.js
deleted file mode 100644
index 0878a7cce49012..00000000000000
--- a/packages/edit-post/src/components/header/main-dashboard-button/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalUseSlotFills as useSlotFills,
-	createSlotFill,
-} from '@wordpress/components';
-
-const slotName = '__experimentalMainDashboardButton';
-
-const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
-
-const MainDashboardButton = Fill;
-
-const Slot = ( { children } ) => {
-	const fills = useSlotFills( slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return children;
-	}
-
-	return <MainDashboardButtonSlot bubblesVirtually />;
-};
-
-MainDashboardButton.Slot = Slot;
-
-export default MainDashboardButton;
diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js
deleted file mode 100644
index 2b5344d930048a..00000000000000
--- a/packages/edit-post/src/components/header/mode-switcher/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Set of available mode options.
- *
- * @type {Array}
- */
-const MODES = [
-	{
-		value: 'visual',
-		label: __( 'Visual editor' ),
-	},
-	{
-		value: 'text',
-		label: __( 'Code editor' ),
-	},
-];
-
-function ModeSwitcher() {
-	const {
-		shortcut,
-		isRichEditingEnabled,
-		isCodeEditingEnabled,
-		isEditingTemplate,
-		mode,
-	} = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
-			isRichEditingEnabled:
-				select( editorStore ).getEditorSettings().richEditingEnabled,
-			isCodeEditingEnabled:
-				select( editorStore ).getEditorSettings().codeEditingEnabled,
-			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
-			mode: select( editPostStore ).getEditorMode(),
-		} ),
-		[]
-	);
-	const { switchEditorMode } = useDispatch( editPostStore );
-
-	if ( isEditingTemplate ) {
-		return null;
-	}
-
-	if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) {
-		return null;
-	}
-
-	const choices = MODES.map( ( choice ) => {
-		if ( choice.value !== mode ) {
-			return { ...choice, shortcut };
-		}
-		return choice;
-	} );
-
-	return (
-		<MenuGroup label={ __( 'Editor' ) }>
-			<MenuItemsChoice
-				choices={ choices }
-				value={ mode }
-				onSelect={ switchEditorMode }
-			/>
-		</MenuGroup>
-	);
-}
-
-export default ModeSwitcher;
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
deleted file mode 100644
index 6085ce65e51e5e..00000000000000
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuGroup } from '@wordpress/components';
-import {
-	ActionItem,
-	MoreMenuDropdown,
-	PinnedItems,
-} from '@wordpress/interface';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import ModeSwitcher from '../mode-switcher';
-import PreferencesMenuItem from '../preferences-menu-item';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import WritingMenu from '../writing-menu';
-
-const MoreMenu = ( { showIconLabels } ) => {
-	const isLargeViewport = useViewportMatch( 'large' );
-
-	return (
-		<MoreMenuDropdown
-			toggleProps={ {
-				showTooltip: ! showIconLabels,
-				...( showIconLabels && { variant: 'tertiary' } ),
-			} }
-		>
-			{ ( { onClose } ) => (
-				<>
-					{ showIconLabels && ! isLargeViewport && (
-						<PinnedItems.Slot
-							className={ showIconLabels && 'show-icon-labels' }
-							scope="core/edit-post"
-						/>
-					) }
-					<WritingMenu />
-					<ModeSwitcher />
-					<ActionItem.Slot
-						name="core/edit-post/plugin-more-menu"
-						label={ __( 'Plugins' ) }
-						as={ MenuGroup }
-						fillProps={ { onClick: onClose } }
-					/>
-					<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-					<MenuGroup>
-						<PreferencesMenuItem />
-					</MenuGroup>
-				</>
-			) }
-		</MoreMenuDropdown>
-	);
-};
-
-export default MoreMenu;
diff --git a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
deleted file mode 100644
index 6e8c4daa24d461..00000000000000
--- a/packages/edit-post/src/components/header/plugin-more-menu-item/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ActionItem } from '@wordpress/interface';
-import { compose } from '@wordpress/compose';
-import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
-
-/**
- * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
- * The text within the component appears as the menu item label.
- *
- * @param {Object}                props                                 Component properties.
- * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
- * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
- * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function onButtonClick() {
- * 	alert( 'Button clicked.' );
- * }
- *
- * function MyButtonMoreMenuItem() {
- * 	return wp.element.createElement(
- * 		PluginMoreMenuItem,
- * 		{
- * 			icon: moreIcon,
- * 			onClick: onButtonClick,
- * 		},
- * 		__( 'My button title' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginMoreMenuItem } from '@wordpress/edit-post';
- * import { more } from '@wordpress/icons';
- *
- * function onButtonClick() {
- * 	alert( 'Button clicked.' );
- * }
- *
- * const MyButtonMoreMenuItem = () => (
- * 	<PluginMoreMenuItem
- * 		icon={ more }
- * 		onClick={ onButtonClick }
- * 	>
- * 		{ __( 'My button title' ) }
- * 	</PluginMoreMenuItem>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/edit-post/plugin-more-menu',
-		};
-	} )
-)( ActionItem );
diff --git a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
deleted file mode 100644
index 1bb1a5e43153e7..00000000000000
--- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
-
-/**
- * Renders a menu item in `Plugins` group in `More Menu` drop down,
- * and can be used to activate the corresponding `PluginSidebar` component.
- * The text within the component appears as the menu item label.
- *
- * @param {Object}                props                                 Component props.
- * @param {string}                props.target                          A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function MySidebarMoreMenuItem() {
- * 	return wp.element.createElement(
- * 		PluginSidebarMoreMenuItem,
- * 		{
- * 			target: 'my-sidebar',
- * 			icon: moreIcon,
- * 		},
- * 		__( 'My sidebar title' )
- * 	)
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
- * import { more } from '@wordpress/icons';
- *
- * const MySidebarMoreMenuItem = () => (
- * 	<PluginSidebarMoreMenuItem
- * 		target="my-sidebar"
- * 		icon={ more }
- * 	>
- * 		{ __( 'My sidebar title' ) }
- * 	</PluginSidebarMoreMenuItem>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-
-export default function PluginSidebarMoreMenuItem( props ) {
-	return (
-		<ComplementaryAreaMoreMenuItem
-			// Menu item is marked with unstable prop for backward compatibility.
-			// @see https://github.com/WordPress/gutenberg/issues/14457
-			__unstableExplicitMenuItem
-			scope="core/edit-post"
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js b/packages/edit-post/src/components/header/post-publish-button-or-toggle.js
deleted file mode 100644
index dd2eeaf3be927d..00000000000000
--- a/packages/edit-post/src/components/header/post-publish-button-or-toggle.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useViewportMatch, compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { PostPublishButton, store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export function PostPublishButtonOrToggle( {
-	forceIsDirty,
-	forceIsSaving,
-	hasPublishAction,
-	isBeingScheduled,
-	isPending,
-	isPublished,
-	isPublishSidebarEnabled,
-	isPublishSidebarOpened,
-	isScheduled,
-	togglePublishSidebar,
-	setEntitiesSavedStatesCallback,
-} ) {
-	const IS_TOGGLE = 'toggle';
-	const IS_BUTTON = 'button';
-	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
-	let component;
-
-	/**
-	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
-	 *
-	 * 1) We want to show a BUTTON when the post status is at the _final stage_
-	 * for a particular role (see https://wordpress.org/support/article/post-status/):
-	 *
-	 * - is published
-	 * - is scheduled to be published
-	 * - is pending and can't be published (but only for viewports >= medium).
-	 * 	 Originally, we considered showing a button for pending posts that couldn't be published
-	 * 	 (for example, for an author with the contributor role). Some languages can have
-	 * 	 long translations for "Submit for review", so given the lack of UI real estate available
-	 * 	 we decided to take into account the viewport in that case.
-	 *  	 See: https://github.com/WordPress/gutenberg/issues/10475
-	 *
-	 * 2) Then, in small viewports, we'll show a TOGGLE.
-	 *
-	 * 3) Finally, we'll use the publish sidebar status to decide:
-	 *
-	 * - if it is enabled, we show a TOGGLE
-	 * - if it is disabled, we show a BUTTON
-	 */
-	if (
-		isPublished ||
-		( isScheduled && isBeingScheduled ) ||
-		( isPending && ! hasPublishAction && ! isSmallerThanMediumViewport )
-	) {
-		component = IS_BUTTON;
-	} else if ( isSmallerThanMediumViewport ) {
-		component = IS_TOGGLE;
-	} else if ( isPublishSidebarEnabled ) {
-		component = IS_TOGGLE;
-	} else {
-		component = IS_BUTTON;
-	}
-
-	return (
-		<PostPublishButton
-			forceIsDirty={ forceIsDirty }
-			forceIsSaving={ forceIsSaving }
-			isOpen={ isPublishSidebarOpened }
-			isToggle={ component === IS_TOGGLE }
-			onToggle={ togglePublishSidebar }
-			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
-		/>
-	);
-}
-
-export default compose(
-	withSelect( ( select ) => ( {
-		hasPublishAction: get(
-			select( editorStore ).getCurrentPost(),
-			[ '_links', 'wp:action-publish' ],
-			false
-		),
-		isBeingScheduled: select( editorStore ).isEditedPostBeingScheduled(),
-		isPending: select( editorStore ).isCurrentPostPending(),
-		isPublished: select( editorStore ).isCurrentPostPublished(),
-		isPublishSidebarEnabled:
-			select( editorStore ).isPublishSidebarEnabled(),
-		isPublishSidebarOpened:
-			select( editPostStore ).isPublishSidebarOpened(),
-		isScheduled: select( editorStore ).isCurrentPostScheduled(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { togglePublishSidebar } = dispatch( editPostStore );
-		return {
-			togglePublishSidebar,
-		};
-	} )
-)( PostPublishButtonOrToggle );
diff --git a/packages/edit-post/src/components/header/preferences-menu-item/index.js b/packages/edit-post/src/components/header/preferences-menu-item/index.js
deleted file mode 100644
index bc747ca0afde88..00000000000000
--- a/packages/edit-post/src/components/header/preferences-menu-item/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function PreferencesMenuItem() {
-	const { openModal } = useDispatch( editPostStore );
-	return (
-		<MenuItem
-			onClick={ () => {
-				openModal( 'edit-post/preferences' );
-			} }
-		>
-			{ __( 'Preferences' ) }
-		</MenuItem>
-	);
-}
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
deleted file mode 100644
index 160543684a702e..00000000000000
--- a/packages/edit-post/src/components/header/style.scss
+++ /dev/null
@@ -1,240 +0,0 @@
-.edit-post-header {
-	height: $header-height;
-	background: $white;
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
-	max-width: 100vw;
-
-	// Make toolbar sticky on larger breakpoints
-	@include break-zoomed-in {
-		flex-wrap: nowrap;
-	}
-
-	// Some browsers, most notably IE11, honor an older version of the flexbox spec
-	// which takes absolutely positioned items into account when calculating `space-between`.
-	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
-	//
-	// This difference is causing our header layout to break when focused in IE11.
-	// Our focused region styles use an absolutely positioned :after pseudo element to draw an outline,
-	// and IE11 is adding space between it and our last real child, shifting righthand UI elements
-	// to the left. For a workaround, we change the flex order to move the undesired spacing to the middle
-	// where it is no longer noticeable.
-	> .edit-post-header__settings {
-		order: 1;
-
-		// Restore default order for all other browsers
-		@supports (position: sticky) {
-			order: initial;
-		}
-	}
-}
-
-.edit-post-header__toolbar {
-	display: flex;
-	flex-grow: 1;
-
-	.table-of-contents {
-		display: none;
-
-		@include break-small() {
-			display: block;
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-post-header__settings {
-	display: inline-flex;
-	align-items: center;
-	flex-wrap: wrap;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
-}
-
-.edit-post-header-preview__grouping-external {
-	display: flex;
-	position: relative;
-	padding-bottom: 0;
-}
-
-.edit-post-header-preview__button-external {
-	padding-left: $grid-unit-10;
-
-	margin-right: auto;
-	width: 100%;
-	display: flex;
-	justify-content: flex-start;
-
-	svg {
-		margin-left: auto;
-	}
-}
-
-.edit-post-post-preview-dropdown .components-popover__content {
-	padding-bottom: 0;
-}
-
-/**
- * Show icon labels.
- */
-
-.show-icon-labels.interface-pinned-items,
-.show-icon-labels .edit-post-header,
-.edit-post-header__dropdown {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Exception for drodpdown toggle buttons.
-	// Exception for the fullscreen mode button.
-	.edit-post-fullscreen-mode-close.has-icon,
-	.components-button.has-icon.button-toggle {
-		svg {
-			display: block;
-		}
-		&::after {
-			content: none;
-		}
-	}
-	// Undo the width override for fullscreen mode button.
-	.edit-post-fullscreen-mode-close.has-icon {
-		width: $header-height;
-	}
-	// Don't hide MenuItemsChoice check icons
-	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
-		display: block;
-	}
-	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
-	.interface-pinned-items .components-button {
-		padding-left: $grid-unit;
-		padding-right: $grid-unit;
-
-		@include break-small {
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-		}
-	}
-
-	.editor-post-save-draft.editor-post-save-draft,
-	.editor-post-saved-state.editor-post-saved-state {
-		&::after {
-			content: none;
-		}
-	}
-}
-
-.edit-post-header__dropdown {
-	.components-menu-item__button.components-menu-item__button,
-	.components-button.editor-history__undo,
-	.components-button.editor-history__redo,
-	.table-of-contents .components-button,
-	.components-button.block-editor-list-view {
-		margin: 0;
-		padding: 6px 6px 6px $grid-unit-50;
-		width: 14.625rem;
-		text-align: left;
-		justify-content: flex-start;
-	}
-}
-
-.show-icon-labels.interface-pinned-items {
-	padding: 6px $grid-unit-15 $grid-unit-15;
-	margin-top: 0;
-	margin-bottom: 0;
-	margin-left: -$grid-unit-15;
-	margin-right: -$grid-unit-15;
-	border-bottom: 1px solid $gray-400;
-	display: block;
-
-	> .components-button.has-icon {
-		margin: 0;
-		padding: 6px 6px 6px $grid-unit;
-		width: 14.625rem;
-		justify-content: flex-start;
-
-		&[aria-expanded="true"] svg {
-			display: block;
-			max-width: $grid-unit-30;
-		}
-		&[aria-expanded="false"] {
-			padding-left: $grid-unit-50;
-		}
-		svg {
-			margin-right: 8px;
-		}
-	}
-}
-
-.is-distraction-free {
-	.interface-interface-skeleton__header {
-		border-bottom: none;
-	}
-
-	.edit-post-header {
-		backdrop-filter: blur(20px) !important;
-		background-color: rgba(255, 255, 255, 0.9);
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
-		width: 100%;
-
-
-		// hide some parts
-		& > .edit-post-header__settings > .editor-post-preview {
-			visibility: hidden;
-		}
-
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
-		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
-		& > .edit-post-header__settings > .interface-pinned-items {
-			display: none;
-		}
-
-	}
-
-	// We need ! important because we override inline styles
-	// set by the motion component.
-	.interface-interface-skeleton__header:focus-within {
-		opacity: 1 !important;
-		div {
-			transform: translateX(0) translateZ(0) !important;
-		}
-
-	}
-
-	.components-editor-notices__dismissible {
-		position: absolute;
-		z-index: 35;
-	}
-}
diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
deleted file mode 100644
index 9e0ac957b3dbd8..00000000000000
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import { pickBy } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuGroup,
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function DeleteTemplate() {
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-	const { getEditorSettings } = useSelect( editorStore );
-	const { updateEditorSettings, editPost } = useDispatch( editorStore );
-	const { deleteEntityRecord } = useDispatch( coreStore );
-	const { template } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const _isEditing = isEditingTemplate();
-		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-		};
-	}, [] );
-	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
-
-	if ( ! template || ! template.wp_id ) {
-		return null;
-	}
-	let templateTitle = template.slug;
-	if ( template?.title ) {
-		templateTitle = template.title;
-	}
-
-	const isRevertable = template?.has_theme_file;
-
-	const onDelete = () => {
-		clearSelectedBlock();
-		setIsEditingTemplate( false );
-		setShowConfirmDialog( false );
-
-		editPost( {
-			template: '',
-		} );
-		const settings = getEditorSettings();
-		const newAvailableTemplates = pickBy(
-			settings.availableTemplates,
-			( _title, id ) => {
-				return id !== template.slug;
-			}
-		);
-		updateEditorSettings( {
-			...settings,
-			availableTemplates: newAvailableTemplates,
-		} );
-		deleteEntityRecord( 'postType', 'wp_template', template.id, {
-			throwOnError: true,
-		} );
-	};
-
-	return (
-		<MenuGroup className="edit-post-template-top-area__second-menu-group">
-			<>
-				<MenuItem
-					className="edit-post-template-top-area__delete-template-button"
-					isDestructive={ ! isRevertable }
-					onClick={ () => {
-						setShowConfirmDialog( true );
-					} }
-					info={
-						isRevertable
-							? __( 'Use the template as supplied by the theme.' )
-							: undefined
-					}
-				>
-					{ isRevertable
-						? __( 'Clear customizations' )
-						: __( 'Delete template' ) }
-				</MenuItem>
-				<ConfirmDialog
-					isOpen={ showConfirmDialog }
-					onConfirm={ onDelete }
-					onCancel={ () => {
-						setShowConfirmDialog( false );
-					} }
-				>
-					{ sprintf(
-						/* translators: %s: template name */
-						__(
-							'Are you sure you want to delete the %s template? It may be used by other pages or posts.'
-						),
-						templateTitle
-					) }
-				</ConfirmDialog>
-			</>
-		</MenuGroup>
-	);
-}
diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js
deleted file mode 100644
index 5ad4c58d544e42..00000000000000
--- a/packages/edit-post/src/components/header/template-title/edit-template-title.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function EditTemplateTitle() {
-	const [ forceEmpty, setForceEmpty ] = useState( false );
-	const { template } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return {
-			template: getEditedPostTemplate(),
-		};
-	}, [] );
-
-	const { editEntityRecord } = useDispatch( coreStore );
-	const { getEditorSettings } = useSelect( editorStore );
-	const { updateEditorSettings } = useDispatch( editorStore );
-
-	// Only user-created and non-default templates can change the name.
-	if ( ! template.is_custom || template.has_theme_file ) {
-		return null;
-	}
-
-	let templateTitle = __( 'Default' );
-	if ( template?.title ) {
-		templateTitle = template.title;
-	} else if ( !! template ) {
-		templateTitle = template.slug;
-	}
-
-	return (
-		<div className="edit-site-template-details__group">
-			<TextControl
-				label={ __( 'Title' ) }
-				value={ forceEmpty ? '' : templateTitle }
-				help={ __(
-					'Give the template a title that indicates its purpose, e.g. "Full Width".'
-				) }
-				onChange={ ( newTitle ) => {
-					// Allow having the field temporarily empty while typing.
-					if ( ! newTitle && ! forceEmpty ) {
-						setForceEmpty( true );
-						return;
-					}
-					setForceEmpty( false );
-
-					const settings = getEditorSettings();
-					const newAvailableTemplates = mapValues(
-						settings.availableTemplates,
-						( existingTitle, id ) => {
-							if ( id !== template.slug ) {
-								return existingTitle;
-							}
-							return newTitle;
-						}
-					);
-					updateEditorSettings( {
-						...settings,
-						availableTemplates: newAvailableTemplates,
-					} );
-					editEntityRecord( 'postType', 'wp_template', template.id, {
-						title: newTitle,
-					} );
-				} }
-				onBlur={ () => setForceEmpty( false ) }
-			/>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/header/template-title/index.js b/packages/edit-post/src/components/header/template-title/index.js
deleted file mode 100644
index adfceb88553452..00000000000000
--- a/packages/edit-post/src/components/header/template-title/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
-import DeleteTemplate from './delete-template';
-import EditTemplateTitle from './edit-template-title';
-import TemplateDescription from './template-description';
-
-function TemplateTitle() {
-	const { template, isEditing, title } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } =
-			select( editPostStore );
-		const { getEditedPostAttribute } = select( editorStore );
-
-		const _isEditing = isEditingTemplate();
-
-		return {
-			template: _isEditing ? getEditedPostTemplate() : null,
-			isEditing: _isEditing,
-			title: getEditedPostAttribute( 'title' )
-				? getEditedPostAttribute( 'title' )
-				: __( 'Untitled' ),
-		};
-	}, [] );
-
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-
-	if ( ! isEditing || ! template ) {
-		return null;
-	}
-
-	let templateTitle = __( 'Default' );
-	if ( template?.title ) {
-		templateTitle = template.title;
-	} else if ( !! template ) {
-		templateTitle = template.slug;
-	}
-
-	const hasOptions = !! (
-		template.custom ||
-		template.wp_id ||
-		template.description
-	);
-
-	return (
-		<div className="edit-post-template-top-area">
-			<Button
-				className="edit-post-template-post-title"
-				isLink
-				showTooltip
-				label={ sprintf(
-					/* translators: %s: Title of the referring post, e.g: "Hello World!" */
-					__( 'Edit %s' ),
-					title
-				) }
-				onClick={ () => {
-					clearSelectedBlock();
-					setIsEditingTemplate( false );
-				} }
-			>
-				{ title }
-			</Button>
-			{ hasOptions ? (
-				<Dropdown
-					position="bottom center"
-					contentClassName="edit-post-template-top-area__popover"
-					renderToggle={ ( { onToggle } ) => (
-						<Button
-							className="edit-post-template-title"
-							isLink
-							icon={ chevronDown }
-							showTooltip
-							onClick={ onToggle }
-							label={ __( 'Template Options' ) }
-						>
-							{ templateTitle }
-						</Button>
-					) }
-					renderContent={ () => (
-						<>
-							<EditTemplateTitle />
-							<TemplateDescription />
-							<DeleteTemplate />
-						</>
-					) }
-				/>
-			) : (
-				<Text
-					className="edit-post-template-title"
-					size="body"
-					style={ { lineHeight: '24px' } }
-				>
-					{ templateTitle }
-				</Text>
-			) }
-		</div>
-	);
-}
-
-export default TemplateTitle;
diff --git a/packages/edit-post/src/components/header/template-title/style.scss b/packages/edit-post/src/components/header/template-title/style.scss
deleted file mode 100644
index bf8d6d7703a923..00000000000000
--- a/packages/edit-post/src/components/header/template-title/style.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-.edit-post-template-top-area {
-	display: flex;
-	flex-direction: column;
-	align-content: space-between;
-	width: 100%;
-	align-items: center;
-
-	.edit-post-template-title,
-	.edit-post-template-post-title {
-		padding: 0;
-		text-decoration: none;
-		height: auto;
-
-		&::before {
-			height: 100%;
-		}
-
-		&.has-icon {
-			svg {
-				order: 1;
-				margin-right: 0;
-			}
-		}
-	}
-
-	.edit-post-template-title {
-		color: $gray-900;
-	}
-
-	.edit-post-template-post-title {
-		margin-top: $grid-unit-05;
-		max-width: 160px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: block;
-
-		&::before {
-			left: 0;
-			right: 0;
-		}
-
-		@include break-xlarge() {
-			max-width: 400px;
-		}
-	}
-}
-
-.edit-post-template-top-area__popover {
-	.components-popover__content {
-		min-width: 280px;
-
-		> div {
-			padding: 0;
-		}
-	}
-
-	.edit-site-template-details__group {
-		padding: $grid-unit-20;
-
-		.components-base-control__help {
-			margin-bottom: 0;
-		}
-	}
-
-	.edit-post-template-details__description {
-		color: $gray-700;
-	}
-}
-
-.edit-post-template-top-area__second-menu-group {
-	border-top: $border-width solid $gray-300;
-	padding: $grid-unit-20 $grid-unit-10;
-
-	.edit-post-template-top-area__delete-template-button {
-		display: flex;
-		justify-content: center;
-		padding: $grid-unit-05 $grid-unit;
-
-		&.is-destructive {
-			padding: inherit;
-			margin-left: $grid-unit-10;
-			margin-right: $grid-unit-10;
-			width: calc(100% - #{($grid-unit * 2)});
-
-			.components-menu-item__item {
-				width: auto;
-			}
-		}
-
-		.components-menu-item__item {
-			margin-right: 0;
-			min-width: 0;
-			width: 100%;
-		}
-	}
-}
diff --git a/packages/edit-post/src/components/header/template-title/template-description.js b/packages/edit-post/src/components/header/template-title/template-description.js
deleted file mode 100644
index 3513496852c339..00000000000000
--- a/packages/edit-post/src/components/header/template-title/template-description.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default function TemplateDescription() {
-	const { description, title } = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return {
-			title: getEditedPostTemplate().title,
-			description: getEditedPostTemplate().description,
-		};
-	}, [] );
-	if ( ! description ) {
-		return null;
-	}
-
-	return (
-		<div className="edit-site-template-details__group">
-			<Heading level={ 4 } weight={ 600 }>
-				{ title }
-			</Heading>
-			<Text
-				className="edit-post-template-details__description"
-				size="body"
-				as="p"
-				style={ { marginTop: '12px' } }
-			>
-				{ description }
-			</Text>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/header/test/index.js b/packages/edit-post/src/components/header/test/index.js
deleted file mode 100644
index 8dc1178c5b4fb4..00000000000000
--- a/packages/edit-post/src/components/header/test/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { PostPublishButtonOrToggle } from '../post-publish-button-or-toggle';
-
-describe( 'PostPublishButtonOrToggle should render a', () => {
-	it( 'button when the post is published (1)', () => {
-		render( <PostPublishButtonOrToggle isPublished={ true } /> );
-		expect(
-			screen.getByRole( 'button', { name: 'Submit for Review' } )
-		).toBeVisible();
-	} );
-
-	it( 'button when the post is scheduled (2)', () => {
-		render(
-			<PostPublishButtonOrToggle
-				isScheduled={ true }
-				isBeingScheduled={ true }
-			/>
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Submit for Review' } )
-		).toBeVisible();
-	} );
-
-	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
-		render(
-			<PostPublishButtonOrToggle
-				isPending={ true }
-				hasPublishAction={ false }
-			/>
-		);
-
-		expect(
-			screen.getByRole( 'button', { name: 'Submit for Review' } )
-		).toBeVisible();
-	} );
-
-	it( 'toggle when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is enabled', () => {
-		render(
-			<PostPublishButtonOrToggle isPublishSidebarEnabled={ true } />
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Publish' } )
-		).toBeVisible();
-	} );
-
-	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
-		render(
-			<PostPublishButtonOrToggle isPublishSidebarEnabled={ false } />
-		);
-		expect(
-			screen.getByRole( 'button', { name: 'Submit for Review' } )
-		).toBeVisible();
-	} );
-} );
diff --git a/packages/edit-post/src/components/header/tools-more-menu-group/index.js b/packages/edit-post/src/components/header/tools-more-menu-group/index.js
deleted file mode 100644
index aac3dba2088700..00000000000000
--- a/packages/edit-post/src/components/header/tools-more-menu-group/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill, MenuGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-const { Fill: ToolsMoreMenuGroup, Slot } =
-	createSlotFill( 'ToolsMoreMenuGroup' );
-
-ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
-	<Slot fillProps={ fillProps }>
-		{ ( fills ) =>
-			! isEmpty( fills ) && (
-				<MenuGroup label={ __( 'Tools' ) }>{ fills }</MenuGroup>
-			)
-		}
-	</Slot>
-);
-
-export default ToolsMoreMenuGroup;
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
deleted file mode 100644
index 6cea56392381e1..00000000000000
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import { MenuGroup } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-import { displayShortcut } from '@wordpress/keycodes';
-import {
-	PreferenceToggleMenuItem,
-	store as preferencesStore,
-} from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { store as postEditorStore } from '../../../store';
-
-function WritingMenu() {
-	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().isDistractionFree,
-		[]
-	);
-
-	const blocks = useSelect(
-		( select ) => select( blockEditorStore ).getBlocks(),
-		[]
-	);
-
-	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
-		useDispatch( postEditorStore );
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core/edit-post', 'fixedToolbar', false );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-			if ( ! isDistractionFree && !! blocks.length ) {
-				selectBlock( blocks[ 0 ].clientId );
-			}
-		} );
-	};
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	if ( ! isLargeViewport ) {
-		return null;
-	}
-
-	return (
-		<MenuGroup label={ _x( 'View', 'noun' ) }>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				disabled={ isDistractionFree }
-				name="fixedToolbar"
-				label={ __( 'Top toolbar' ) }
-				info={ __(
-					'Access all block and document tools in a single place'
-				) }
-				messageActivated={ __( 'Top toolbar activated' ) }
-				messageDeactivated={ __( 'Top toolbar deactivated' ) }
-			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="focusMode"
-				label={ __( 'Spotlight mode' ) }
-				info={ __( 'Focus on one block at a time' ) }
-				messageActivated={ __( 'Spotlight mode activated' ) }
-				messageDeactivated={ __( 'Spotlight mode deactivated' ) }
-			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="fullscreenMode"
-				label={ __( 'Fullscreen mode' ) }
-				info={ __( 'Show and hide admin UI' ) }
-				messageActivated={ __( 'Fullscreen mode activated' ) }
-				messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
-				shortcut={ displayShortcut.secondary( 'f' ) }
-			/>
-			<PreferenceToggleMenuItem
-				scope="core/edit-post"
-				name="distractionFree"
-				onToggle={ toggleDistractionFree }
-				label={ __( 'Distraction free' ) }
-				info={ __( 'Write with calmness' ) }
-				messageActivated={ __( 'Distraction free mode activated' ) }
-				messageDeactivated={ __( 'Distraction free mode deactivated' ) }
-				shortcut={ displayShortcut.primaryShift( '\\' ) }
-			/>
-		</MenuGroup>
-	);
-}
-
-export default WritingMenu;
diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
new file mode 100644
index 00000000000000..1bfeadd73f94a6
--- /dev/null
+++ b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import {
+	Modal,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+	TextControl,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function InitPatternModal() {
+	const { editPost } = useDispatch( editorStore );
+	const [ syncType, setSyncType ] = useState( undefined );
+	const [ title, setTitle ] = useState( '' );
+
+	const { postType, isNewPost } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isCleanNewPost } =
+			select( editorStore );
+		return {
+			postType: getEditedPostAttribute( 'type' ),
+			isNewPost: isCleanNewPost(),
+		};
+	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState(
+		() => isNewPost && postType === 'wp_block'
+	);
+
+	if ( postType !== 'wp_block' || ! isNewPost ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Create pattern' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							editPost( {
+								title,
+								meta: {
+									wp_pattern_sync_status: syncType,
+								},
+							} );
+						} }
+					>
+						<VStack spacing="5">
+							<TextControl
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								placeholder={ __( 'My pattern' ) }
+								className="patterns-create-modal__name-input"
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ _x( 'Synced', 'pattern (singular)' ) }
+								help={ __(
+									'Sync this pattern across multiple locations.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
+									disabled={ ! title }
+									accessibleWhenDisabled
+								>
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js
deleted file mode 100644
index fd11d14e08cde0..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const textFormattingShortcuts = [
-	{
-		keyCombination: { modifier: 'primary', character: 'b' },
-		description: __( 'Make the selected text bold.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'i' },
-		description: __( 'Make the selected text italic.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'k' },
-		description: __( 'Convert the selected text into a link.' ),
-	},
-	{
-		keyCombination: { modifier: 'primaryShift', character: 'k' },
-		description: __( 'Remove a link.' ),
-	},
-	{
-		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'u' },
-		description: __( 'Underline the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'd' },
-		description: __( 'Strikethrough the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'x' },
-		description: __( 'Make the selected text inline code.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: '0' },
-		description: __( 'Convert the current heading to a paragraph.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: '1-6' },
-		description: __(
-			'Convert the current paragraph or heading to a heading of level 1 to 6.'
-		),
-	},
-];
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
deleted file mode 100644
index 54565bb5dcd5b5..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { withSelect, withDispatch, useSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { textFormattingShortcuts } from './config';
-import Shortcut from './shortcut';
-import DynamicShortcut from './dynamic-shortcut';
-import { store as editPostStore } from '../../store';
-
-const MODAL_NAME = 'edit-post/keyboard-shortcut-help';
-
-const ShortcutList = ( { shortcuts } ) => (
-	/*
-	 * Disable reason: The `list` ARIA role is redundant but
-	 * Safari+VoiceOver won't announce the list otherwise.
-	 */
-	/* eslint-disable jsx-a11y/no-redundant-roles */
-	<ul
-		className="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-		role="list"
-	>
-		{ shortcuts.map( ( shortcut, index ) => (
-			<li
-				className="edit-post-keyboard-shortcut-help-modal__shortcut"
-				key={ index }
-			>
-				{ typeof shortcut === 'string' ? (
-					<DynamicShortcut name={ shortcut } />
-				) : (
-					<Shortcut { ...shortcut } />
-				) }
-			</li>
-		) ) }
-	</ul>
-	/* eslint-enable jsx-a11y/no-redundant-roles */
-);
-
-const ShortcutSection = ( { title, shortcuts, className } ) => (
-	<section
-		className={ classnames(
-			'edit-post-keyboard-shortcut-help-modal__section',
-			className
-		) }
-	>
-		{ !! title && (
-			<h2 className="edit-post-keyboard-shortcut-help-modal__section-title">
-				{ title }
-			</h2>
-		) }
-		<ShortcutList shortcuts={ shortcuts } />
-	</section>
-);
-
-const ShortcutCategorySection = ( {
-	title,
-	categoryName,
-	additionalShortcuts = [],
-} ) => {
-	const categoryShortcuts = useSelect(
-		( select ) => {
-			return select( keyboardShortcutsStore ).getCategoryShortcuts(
-				categoryName
-			);
-		},
-		[ categoryName ]
-	);
-
-	return (
-		<ShortcutSection
-			title={ title }
-			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
-		/>
-	);
-};
-
-export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
-	useShortcut( 'core/edit-post/keyboard-shortcuts', toggleModal );
-
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className="edit-post-keyboard-shortcut-help-modal"
-			title={ __( 'Keyboard shortcuts' ) }
-			closeButtonLabel={ __( 'Close' ) }
-			onRequestClose={ toggleModal }
-		>
-			<ShortcutSection
-				className="edit-post-keyboard-shortcut-help-modal__main-shortcuts"
-				shortcuts={ [ 'core/edit-post/keyboard-shortcuts' ] }
-			/>
-			<ShortcutCategorySection
-				title={ __( 'Global shortcuts' ) }
-				categoryName="global"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Selection shortcuts' ) }
-				categoryName="selection"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Block shortcuts' ) }
-				categoryName="block"
-				additionalShortcuts={ [
-					{
-						keyCombination: { character: '/' },
-						description: __(
-							'Change the block type after adding a new paragraph.'
-						),
-						/* translators: The forward-slash character. e.g. '/'. */
-						ariaLabel: __( 'Forward-slash' ),
-					},
-				] }
-			/>
-			<ShortcutSection
-				title={ __( 'Text formatting' ) }
-				shortcuts={ textFormattingShortcuts }
-			/>
-		</Modal>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => ( {
-		isModalActive: select( editPostStore ).isModalActive( MODAL_NAME ),
-	} ) ),
-	withDispatch( ( dispatch, { isModalActive } ) => {
-		const { openModal, closeModal } = dispatch( editPostStore );
-
-		return {
-			toggleModal: () =>
-				isModalActive ? closeModal() : openModal( MODAL_NAME ),
-		};
-	} ),
-] )( KeyboardShortcutHelpModal );
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js
deleted file mode 100644
index 2b18cd099a3388..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
-
-function KeyCombination( { keyCombination, forceAriaLabel } ) {
-	const shortcut = keyCombination.modifier
-		? displayShortcutList[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-	const ariaLabel = keyCombination.modifier
-		? shortcutAriaLabel[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-
-	return (
-		<kbd
-			className="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-			aria-label={ forceAriaLabel || ariaLabel }
-		>
-			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
-				( character, index ) => {
-					if ( character === '+' ) {
-						return <Fragment key={ index }>{ character }</Fragment>;
-					}
-
-					return (
-						<kbd
-							key={ index }
-							className="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-						>
-							{ character }
-						</kbd>
-					);
-				}
-			) }
-		</kbd>
-	);
-}
-
-function Shortcut( { description, keyCombination, aliases = [], ariaLabel } ) {
-	return (
-		<>
-			<div className="edit-post-keyboard-shortcut-help-modal__shortcut-description">
-				{ description }
-			</div>
-			<div className="edit-post-keyboard-shortcut-help-modal__shortcut-term">
-				<KeyCombination
-					keyCombination={ keyCombination }
-					forceAriaLabel={ ariaLabel }
-				/>
-				{ aliases.map( ( alias, index ) => (
-					<KeyCombination
-						keyCombination={ alias }
-						forceAriaLabel={ ariaLabel }
-						key={ index }
-					/>
-				) ) }
-			</div>
-		</>
-	);
-}
-
-export default Shortcut;
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
deleted file mode 100644
index c21c5a5fc7db2f..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.edit-post-keyboard-shortcut-help-modal {
-	&__section {
-		margin: 0 0 2rem 0;
-	}
-
-	&__section-title {
-		font-size: 0.9rem;
-		font-weight: 600;
-	}
-
-	&__shortcut {
-		display: flex;
-		align-items: baseline;
-		padding: 0.6rem 0;
-		border-top: 1px solid $gray-300;
-		margin-bottom: 0;
-
-		&:last-child {
-			border-bottom: 1px solid $gray-300;
-		}
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&__shortcut-term {
-		font-weight: 600;
-		margin: 0 0 0 1rem;
-		text-align: right;
-	}
-
-	&__shortcut-description {
-		flex: 1;
-		margin: 0;
-
-		// IE 11 flex item fix - ensure the item does not collapse.
-		flex-basis: auto;
-	}
-
-	&__shortcut-key-combination {
-		display: block;
-		background: none;
-		margin: 0;
-		padding: 0;
-
-		& + .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination {
-			margin-top: 10px;
-		}
-	}
-
-	&__shortcut-key {
-		padding: 0.25rem 0.5rem;
-		border-radius: 8%;
-		margin: 0 0.2rem 0 0.2rem;
-
-		&:last-child {
-			margin: 0 0 0 0.2rem;
-		}
-	}
-}
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
deleted file mode 100644
index 7b2ba852ad5aab..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,898 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`KeyboardShortcutHelpModal should match snapshot when the modal is active 1`] = `
-<div
-  aria-labelledby="components-modal-header-0"
-  class="components-modal__frame edit-post-keyboard-shortcut-help-modal"
-  role="dialog"
-  tabindex="-1"
->
-  <div
-    class="components-modal__content"
-    role="document"
-  >
-    <div
-      class="components-modal__header"
-    >
-      <div
-        class="components-modal__header-heading-container"
-      >
-        <h1
-          class="components-modal__header-heading"
-          id="components-modal-header-0"
-        >
-          Keyboard shortcuts
-        </h1>
-      </div>
-      <button
-        aria-label="Close"
-        class="components-button 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>
-    <section
-      class="edit-post-keyboard-shortcut-help-modal__section edit-post-keyboard-shortcut-help-modal__main-shortcuts"
-    >
-      <ul
-        class="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-        role="list"
-      >
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        />
-      </ul>
-    </section>
-    <section
-      class="edit-post-keyboard-shortcut-help-modal__section"
-    >
-      <h2
-        class="edit-post-keyboard-shortcut-help-modal__section-title"
-      >
-        Global shortcuts
-      </h2>
-      <ul
-        class="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-        role="list"
-      >
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Navigate to the nearest toolbar.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Alt + F10"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                F10
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Save your changes.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + S"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                S
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Undo your last changes.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Z"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Z
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Redo your last undo.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Shift + Z"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Z
-              </kbd>
-            </kbd>
-            <kbd
-              aria-label="Control + Y"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Y
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-      </ul>
-    </section>
-    <section
-      class="edit-post-keyboard-shortcut-help-modal__section"
-    >
-      <h2
-        class="edit-post-keyboard-shortcut-help-modal__section-title"
-      >
-        Selection shortcuts
-      </h2>
-      <ul
-        class="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-        role="list"
-      >
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Select all text when typing. Press again to select all blocks.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + A"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                A
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Clear selection.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="escape"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                escape
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-      </ul>
-    </section>
-    <section
-      class="edit-post-keyboard-shortcut-help-modal__section"
-    >
-      <h2
-        class="edit-post-keyboard-shortcut-help-modal__section-title"
-      >
-        Block shortcuts
-      </h2>
-      <ul
-        class="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-        role="list"
-      >
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Duplicate the selected block(s).
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Shift + D"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                D
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Remove the selected block(s).
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Shift + Alt + Z"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Z
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Insert a new block before the selected block(s).
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Alt + T"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                T
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Insert a new block after the selected block(s).
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Alt + Y"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Y
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Delete selection.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="del"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                del
-              </kbd>
-            </kbd>
-            <kbd
-              aria-label="backspace"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                backspace
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Move the selected block(s) up.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Shift + Alt + T"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                T
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Move the selected block(s) down.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Shift + Alt + Y"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Y
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Change the block type after adding a new paragraph.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Forward-slash"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                /
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-      </ul>
-    </section>
-    <section
-      class="edit-post-keyboard-shortcut-help-modal__section"
-    >
-      <h2
-        class="edit-post-keyboard-shortcut-help-modal__section-title"
-      >
-        Text formatting
-      </h2>
-      <ul
-        class="edit-post-keyboard-shortcut-help-modal__shortcut-list"
-        role="list"
-      >
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Make the selected text bold.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + B"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                B
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Make the selected text italic.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + I"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                I
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Convert the selected text into a link.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + K"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                K
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Remove a link.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + Shift + K"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                K
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Insert a link to a post or page
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="[["
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                [[
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Underline the selected text.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Control + U"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Ctrl
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                U
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Strikethrough the selected text.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Shift + Alt + D"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                D
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Make the selected text inline code.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Shift + Alt + X"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                X
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Convert the current heading to a paragraph.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Shift + Alt + 0"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                0
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-        <li
-          class="edit-post-keyboard-shortcut-help-modal__shortcut"
-        >
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
-          >
-            Convert the current paragraph or heading to a heading of level 1 to 6.
-          </div>
-          <div
-            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
-          >
-            <kbd
-              aria-label="Shift + Alt + 1 6"
-              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
-            >
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Shift
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                Alt
-              </kbd>
-              +
-              <kbd
-                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-              >
-                1-6
-              </kbd>
-            </kbd>
-          </div>
-        </li>
-      </ul>
-    </section>
-  </div>
-</div>
-`;
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/index.js
deleted file mode 100644
index 6d8982501d1376..00000000000000
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { EditorKeyboardShortcutsRegister } from '@wordpress/editor';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { KeyboardShortcutHelpModal } from '../index';
-
-const noop = () => {};
-
-describe( 'KeyboardShortcutHelpModal', () => {
-	it( 'should match snapshot when the modal is active', () => {
-		render(
-			<ShortcutProvider>
-				<EditorKeyboardShortcutsRegister />
-				<KeyboardShortcutHelpModal isModalActive toggleModal={ noop } />
-			</ShortcutProvider>
-		);
-
-		expect(
-			screen.getByRole( 'dialog', {
-				name: 'Keyboard shortcuts',
-			} )
-		).toMatchSnapshot();
-	} );
-
-	it( 'should not render the modal when inactive', () => {
-		render(
-			<ShortcutProvider>
-				<EditorKeyboardShortcutsRegister />
-				<KeyboardShortcutHelpModal
-					isModalActive={ false }
-					toggleModal={ noop }
-				/>
-			</ShortcutProvider>
-		);
-
-		expect(
-			screen.queryByRole( 'dialog', {
-				name: 'Keyboard shortcuts',
-			} )
-		).not.toBeInTheDocument();
-	} );
-} );
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
index d3d6569e398a45..8567b541d03ab6 100644
--- a/packages/edit-post/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -2,17 +2,12 @@
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,253 +15,23 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
-	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const {
-		getEditorMode,
-		isEditorSidebarOpened,
-		isListViewOpened,
-		isFeatureActive,
-	} = useSelect( editPostStore );
-	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } =
-			select( editorStore ).getEditorSettings();
-		return ! richEditingEnabled || ! codeEditingEnabled;
-	}, [] );
-
-	const { createInfoNotice } = useDispatch( noticesStore );
-
-	const {
-		switchEditorMode,
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		toggleFeature,
-		setIsListViewOpened,
-		setIsInserterOpened,
-	} = useDispatch( editPostStore );
+	const { toggleFullscreenMode } = useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-	};
-
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
-		useSelect( blockEditorStore );
-
-	const handleTextLevelShortcut = ( event, level ) => {
-		event.preventDefault();
-		const destinationBlockName =
-			level === 0 ? 'core/paragraph' : 'core/heading';
-		const currentClientId = getSelectedBlockClientId();
-		if ( currentClientId === null ) {
-			return;
-		}
-		const blockName = getBlockName( currentClientId );
-		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
-			return;
-		}
-		const currentAttributes = getBlockAttributes( currentClientId );
-		const { content: currentContent, align: currentAlign } =
-			currentAttributes;
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: currentContent,
-				align: currentAlign,
-			} )
-		);
-	};
-
 	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-post/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
-
 		registerShortcut( {
 			name: 'core/edit-post/toggle-fullscreen',
 			category: 'global',
-			description: __( 'Toggle fullscreen mode.' ),
+			description: __( 'Enable or disable fullscreen mode.' ),
 			keyCombination: {
 				modifier: 'secondary',
 				character: 'f',
 			},
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/toggle-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: `core/block-editor/transform-heading-to-paragraph`,
-			category: 'block-library',
-			description: __( 'Transform heading to paragraph.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: `0`,
-			},
-		} );
-
-		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-			registerShortcut( {
-				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
 	}, [] );
 
-	useShortcut(
-		'core/edit-post/toggle-mode',
-		() => {
-			switchEditorMode(
-				getEditorMode() === 'visual' ? 'text' : 'visual'
-			);
-		},
-		{
-			isDisabled: isModeToggleDisabled,
-		}
-	);
-
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
-		toggleFeature( 'fullscreenMode' );
-	} );
-
-	useShortcut( 'core/edit-post/toggle-distraction-free', () => {
-		closeGeneralSidebar();
-		setIsListViewOpened( false );
-		toggleDistractionFree();
-		toggleFeature( 'distractionFree' );
-		createInfoNotice(
-			isFeatureActive( 'distractionFree' )
-				? __( 'Distraction free mode turned on.' )
-				: __( 'Distraction free mode turned off.' ),
-			{
-				id: 'core/edit-post/distraction-free-mode/notice',
-				type: 'snackbar',
-			}
-		);
-	} );
-
-	useShortcut( 'core/edit-post/toggle-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isEditorSidebarOpened() ) {
-			closeGeneralSidebar();
-		} else {
-			const sidebarToOpen = getBlockSelectionStart()
-				? 'edit-post/block'
-				: 'edit-post/document';
-			openGeneralSidebar( sidebarToOpen );
-		}
-	} );
-
-	useShortcut( 'core/edit-post/toggle-list-view', () =>
-		setIsListViewOpened( ! isListViewOpened() )
-	);
-
-	useShortcut(
-		'core/block-editor/transform-heading-to-paragraph',
-		( event ) => handleTextLevelShortcut( event, 0 )
-	);
-
-	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-		//the loop is based off on a constant therefore
-		//the hook will execute the same way every time
-		//eslint-disable-next-line react-hooks/rules-of-hooks
-		useShortcut(
-			`core/block-editor/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
+		toggleFullscreenMode();
 	} );
 
 	return null;
diff --git a/packages/edit-post/src/components/layout/actions-panel.js b/packages/edit-post/src/components/layout/actions-panel.js
deleted file mode 100644
index 3381dc13b9ad8b..00000000000000
--- a/packages/edit-post/src/components/layout/actions-panel.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	EntitiesSavedStates,
-	PostPublishPanel,
-	store as editorStore,
-} from '@wordpress/editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, createSlotFill } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
-import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
-import { store as editPostStore } from '../../store';
-
-const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
-
-export const ActionsPanelFill = Fill;
-
-export default function ActionsPanel( {
-	setEntitiesSavedStatesCallback,
-	closeEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-} ) {
-	const { closePublishSidebar, togglePublishSidebar } =
-		useDispatch( editPostStore );
-	const {
-		publishSidebarOpened,
-		hasActiveMetaboxes,
-		isSavingMetaBoxes,
-		hasNonPostEntityChanges,
-	} = useSelect( ( select ) => {
-		return {
-			publishSidebarOpened:
-				select( editPostStore ).isPublishSidebarOpened(),
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isSavingMetaBoxes: select( editPostStore ).isSavingMetaBoxes(),
-			hasNonPostEntityChanges:
-				select( editorStore ).hasNonPostEntityChanges(),
-		};
-	}, [] );
-
-	const openEntitiesSavedStates = useCallback(
-		() => setEntitiesSavedStatesCallback( true ),
-		[]
-	);
-
-	// It is ok for these components to be unmounted when not in visual use.
-	// We don't want more than one present at a time, decide which to render.
-	let unmountableContent;
-	if ( publishSidebarOpened ) {
-		unmountableContent = (
-			<PostPublishPanel
-				onClose={ closePublishSidebar }
-				forceIsDirty={ hasActiveMetaboxes }
-				forceIsSaving={ isSavingMetaBoxes }
-				PrePublishExtension={ PluginPrePublishPanel.Slot }
-				PostPublishExtension={ PluginPostPublishPanel.Slot }
-			/>
-		);
-	} else if ( hasNonPostEntityChanges ) {
-		unmountableContent = (
-			<div className="edit-post-layout__toggle-entities-saved-states-panel">
-				<Button
-					variant="secondary"
-					className="edit-post-layout__toggle-entities-saved-states-panel-button"
-					onClick={ openEntitiesSavedStates }
-					aria-expanded={ false }
-				>
-					{ __( 'Open save panel' ) }
-				</Button>
-			</div>
-		);
-	} else {
-		unmountableContent = (
-			<div className="edit-post-layout__toggle-publish-panel">
-				<Button
-					variant="secondary"
-					className="edit-post-layout__toggle-publish-panel-button"
-					onClick={ togglePublishSidebar }
-					aria-expanded={ false }
-				>
-					{ __( 'Open publish panel' ) }
-				</Button>
-			</div>
-		);
-	}
-
-	// Since EntitiesSavedStates controls its own panel, we can keep it
-	// always mounted to retain its own component state (such as checkboxes).
-	return (
-		<>
-			{ isEntitiesSavedStatesOpen && (
-				<EntitiesSavedStates close={ closeEntitiesSavedStates } />
-			) }
-			<Slot bubblesVirtually />
-			{ ! isEntitiesSavedStatesOpen && unmountableContent }
-		</>
-	);
-}
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index c4eaf068da5a56..b0a2b3f7d76b81 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,175 +10,465 @@ import {
 	AutosaveMonitor,
 	LocalAutosaveMonitor,
 	UnsavedChangesWarning,
-	EditorNotices,
 	EditorKeyboardShortcutsRegister,
 	EditorSnackbars,
+	ErrorBoundary,
+	PostLockedModal,
 	store as editorStore,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockBreadcrumb } from '@wordpress/block-editor';
-import { Button, ScrollLock, Popover } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { PluginArea } from '@wordpress/plugins';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
-	ComplementaryArea,
-	FullscreenMode,
-	InterfaceSkeleton,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import { useState, useEffect, useCallback } from '@wordpress/element';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+	useCallback,
+	useMemo,
+	useId,
+	useRef,
+	useState,
+} from '@wordpress/element';
+import { chevronDown, chevronUp } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	CommandMenu,
+	privateApis as commandsPrivateApis,
+} from '@wordpress/commands';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Icon,
+	ResizableBox,
+	SlotFillProvider,
+	Tooltip,
+	VisuallyHidden,
+	__unstableUseNavigateRegions as useNavigateRegions,
+} from '@wordpress/components';
+import {
+	useMediaQuery,
+	useRefEffect,
+	useViewportMatch,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import TextEditor from '../text-editor';
-import VisualEditor from '../visual-editor';
+import BackButton from '../back-button';
+import EditorInitialization from '../editor-initialization';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
-import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
-import EditPostPreferencesModal from '../preferences-modal';
+import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
-import Header from '../header';
-import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
-import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
+import PostEditorMoreMenu from '../more-menu';
 import WelcomeGuide from '../welcome-guide';
-import ActionsPanel from './actions-panel';
-import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import useEditPostCommands from '../../commands/use-commands';
+import { usePaddingAppender } from './use-padding-appender';
+import { useShouldIframe } from './use-should-iframe';
+import useNavigateToEntityRecord from '../../hooks/use-navigate-to-entity-record';
+import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initialization';
 
-const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-};
-
-function Layout( { styles } ) {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const isLargeViewport = useViewportMatch( 'large' );
-	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
-		useDispatch( editPostStore );
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const {
-		mode,
-		isFullscreenActive,
-		isRichEditingEnabled,
-		sidebarIsOpened,
-		hasActiveMetaboxes,
-		hasFixedToolbar,
-		previousShortcut,
-		nextShortcut,
-		hasBlockSelected,
-		isInserterOpened,
-		isListViewOpened,
-		showIconLabels,
-		isDistractionFree,
-		showBlockBreadcrumbs,
-		isTemplateMode,
-		documentLabel,
-	} = useSelect( ( select ) => {
-		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
-		const editorSettings = getEditorSettings();
-		const postTypeLabel = getPostTypeLabel();
+const { getLayoutStyles } = unlock( blockEditorPrivateApis );
+const { useCommands } = unlock( coreCommandsPrivateApis );
+const { useCommandContext } = unlock( commandsPrivateApis );
+const { Editor, FullscreenMode, NavigableRegion } = unlock( editorPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+const DESIGN_POST_TYPES = [
+	'wp_template',
+	'wp_template_part',
+	'wp_block',
+	'wp_navigation',
+];
 
+function useEditorStyles( ...additionalStyles ) {
+	const { hasThemeStyleSupport, editorSettings } = useSelect( ( select ) => {
 		return {
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			hasFixedToolbar:
-				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
-			sidebarIsOpened: !! (
-				select( interfaceStore ).getActiveComplementaryArea(
-					editPostStore.name
-				) || select( editPostStore ).isPublishSidebarOpened()
-			),
-			isFullscreenActive:
-				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
-			isInserterOpened: select( editPostStore ).isInserterOpened(),
-			isListViewOpened: select( editPostStore ).isListViewOpened(),
-			mode: select( editPostStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
-			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-post/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-			isDistractionFree:
-				select( editPostStore ).isFeatureActive( 'distractionFree' ) &&
-				isLargeViewport,
-			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
-				'showBlockBreadcrumbs'
-			),
-			// translators: Default label for the Document in the Block Breadcrumb.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
+			hasThemeStyleSupport:
+				select( editPostStore ).isFeatureActive( 'themeStyles' ),
+			editorSettings: select( editorStore ).getEditorSettings(),
 		};
 	}, [] );
 
-	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
-		'is-sidebar-opened': sidebarIsOpened,
-		'has-fixed-toolbar': hasFixedToolbar,
-		'has-metaboxes': hasActiveMetaboxes,
-		'show-icon-labels': showIconLabels,
-		'is-distraction-free': isDistractionFree,
-	} );
-	const openSidebarPanel = () =>
-		openGeneralSidebar(
-			hasBlockSelected ? 'edit-post/block' : 'edit-post/document'
-		);
+	const addedStyles = additionalStyles.join( '\n' );
+
+	// Compute the default styles.
+	return useMemo( () => {
+		const presetStyles =
+			editorSettings.styles?.filter(
+				( style ) =>
+					style.__unstableType && style.__unstableType !== 'theme'
+			) ?? [];
 
-	// Inserter and Sidebars are mutually exclusive
-	useEffect( () => {
-		if ( sidebarIsOpened && ! isHugeViewport ) {
-			setIsInserterOpened( false );
+		const defaultEditorStyles = [
+			...( editorSettings?.defaultEditorStyles ?? [] ),
+			...presetStyles,
+		];
+
+		// Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles).
+		const hasThemeStyles =
+			hasThemeStyleSupport &&
+			presetStyles.length !== ( editorSettings.styles?.length ?? 0 );
+
+		// If theme styles are not present or displayed, ensure that
+		// base layout styles are still present in the editor.
+		if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) {
+			defaultEditorStyles.push( {
+				css: getLayoutStyles( {
+					style: {},
+					selector: 'body',
+					hasBlockGapSupport: false,
+					hasFallbackGapSupport: true,
+					fallbackGapValue: '0.5em',
+				} ),
+			} );
 		}
-	}, [ sidebarIsOpened, isHugeViewport ] );
-	useEffect( () => {
-		if ( isInserterOpened && ! isHugeViewport ) {
-			closeGeneralSidebar();
+
+		const baseStyles = hasThemeStyles
+			? editorSettings.styles ?? []
+			: defaultEditorStyles;
+
+		if ( addedStyles ) {
+			return [ ...baseStyles, { css: addedStyles } ];
 		}
-	}, [ isInserterOpened, isHugeViewport ] );
-
-	// Local state for save panel.
-	// Note 'truthy' callback implies an open panel.
-	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
-		useState( false );
-	const closeEntitiesSavedStates = useCallback(
-		( arg ) => {
-			if ( typeof entitiesSavedStatesCallback === 'function' ) {
-				entitiesSavedStatesCallback( arg );
+
+		return baseStyles;
+	}, [
+		editorSettings.defaultEditorStyles,
+		editorSettings.disableLayoutStyles,
+		editorSettings.styles,
+		hasThemeStyleSupport,
+		addedStyles,
+	] );
+}
+
+function MetaBoxesMain() {
+	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { isMetaBoxLocationVisible } = select( editPostStore );
+		return [
+			get( 'core/edit-post', 'metaBoxesMainIsOpen' ),
+			get( 'core/edit-post', 'metaBoxesMainOpenHeight' ),
+			isMetaBoxLocationVisible( 'normal' ) ||
+				isMetaBoxLocationVisible( 'advanced' ) ||
+				isMetaBoxLocationVisible( 'side' ),
+		];
+	}, [] );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const metaBoxesMainRef = useRef();
+	const isShort = useMediaQuery( '(max-height: 549px)' );
+
+	const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
+	// Keeps the resizable area’s size constraints updated taking into account
+	// editor notices. The constraints are also used to derive the value for the
+	// aria-valuenow attribute on the seperator.
+	const effectSizeConstraints = useRefEffect( ( node ) => {
+		const container = node.closest(
+			'.interface-interface-skeleton__content'
+		);
+		const noticeLists = container.querySelectorAll(
+			':scope > .components-notice-list'
+		);
+		const resizeHandle = container.querySelector(
+			'.edit-post-meta-boxes-main__presenter'
+		);
+		const deriveConstraints = () => {
+			const fullHeight = container.offsetHeight;
+			let nextMax = fullHeight;
+			for ( const element of noticeLists ) {
+				nextMax -= element.offsetHeight;
 			}
-			setEntitiesSavedStatesCallback( false );
-		},
-		[ entitiesSavedStatesCallback ]
-	);
+			const nextMin = resizeHandle.offsetHeight;
+			setHeightConstraints( { min: nextMin, max: nextMax } );
+		};
+		const observer = new window.ResizeObserver( deriveConstraints );
+		observer.observe( container );
+		for ( const element of noticeLists ) {
+			observer.observe( element );
+		}
+		return () => observer.disconnect();
+	}, [] );
 
-	const secondarySidebarLabel = isListViewOpened
-		? __( 'Document Overview' )
-		: __( 'Block Library' );
+	const separatorRef = useRef();
+	const separatorHelpId = useId();
 
-	const secondarySidebar = () => {
-		if ( mode === 'visual' && isInserterOpened ) {
-			return <InserterSidebar />;
+	const [ isUntouched, setIsUntouched ] = useState( true );
+	const applyHeight = ( candidateHeight, isPersistent, isInstant ) => {
+		const nextHeight = Math.min( max, Math.max( min, candidateHeight ) );
+		if ( isPersistent ) {
+			setPreference(
+				'core/edit-post',
+				'metaBoxesMainOpenHeight',
+				nextHeight
+			);
+		} else {
+			separatorRef.current.ariaValueNow = getAriaValueNow( nextHeight );
 		}
-		if ( mode === 'visual' && isListViewOpened ) {
-			return <ListViewSidebar />;
+		if ( isInstant ) {
+			metaBoxesMainRef.current.updateSize( {
+				height: nextHeight,
+				// Oddly, when the event that triggered this was not from the mouse (e.g. keydown),
+				// if `width` is left unspecified a subsequent drag gesture applies a fixed
+				// width and the pane fails to widen/narrow with parent width changes from
+				// sidebars opening/closing or window resizes.
+				width: 'auto',
+			} );
 		}
+	};
+
+	if ( ! hasAnyVisible ) {
+		return;
+	}
+
+	const contents = (
+		<div
+			// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
+			className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
+			hidden={ isShort && ! isOpen }
+		>
+			<MetaBoxes location="normal" />
+			<MetaBoxes location="advanced" />
+		</div>
+	);
+
+	const isAutoHeight = openHeight === undefined;
+	let usedMax = '50%'; // Approximation before max has a value.
+	if ( max !== undefined ) {
+		// Halves the available max height until a user height is set.
+		usedMax = isAutoHeight && isUntouched ? max / 2 : max;
+	}
 
-		return null;
+	const getAriaValueNow = ( height ) =>
+		Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
+	const usedAriaValueNow =
+		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
+
+	const toggle = () =>
+		setPreference( 'core/edit-post', 'metaBoxesMainIsOpen', ! isOpen );
+
+	// TODO: Support more/all keyboard interactions from the window splitter pattern:
+	// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+	const onSeparatorKeyDown = ( event ) => {
+		const delta = { ArrowUp: 20, ArrowDown: -20 }[ event.key ];
+		if ( delta ) {
+			const pane = metaBoxesMainRef.current.resizable;
+			const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
+			const nextHeight = delta + fromHeight;
+			applyHeight( nextHeight, true, true );
+			event.preventDefault();
+		}
 	};
+	const className = 'edit-post-meta-boxes-main';
+	const paneLabel = __( 'Meta Boxes' );
+	let Pane, paneProps;
+	if ( isShort ) {
+		Pane = NavigableRegion;
+		paneProps = {
+			className: clsx( className, 'is-toggle-only' ),
+		};
+	} else {
+		Pane = ResizableBox;
+		paneProps = /** @type {Parameters<typeof ResizableBox>[0]} */ ( {
+			as: NavigableRegion,
+			ref: metaBoxesMainRef,
+			className: clsx( className, 'is-resizable' ),
+			defaultSize: { height: openHeight },
+			minHeight: min,
+			maxHeight: usedMax,
+			enable: {
+				top: true,
+				right: false,
+				bottom: false,
+				left: false,
+				topLeft: false,
+				topRight: false,
+				bottomRight: false,
+				bottomLeft: false,
+			},
+			handleClasses: { top: 'edit-post-meta-boxes-main__presenter' },
+			handleComponent: {
+				top: (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							<button // eslint-disable-line jsx-a11y/role-supports-aria-props
+								ref={ separatorRef }
+								role="separator" // eslint-disable-line jsx-a11y/no-interactive-element-to-noninteractive-role
+								aria-valuenow={ usedAriaValueNow }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ separatorHelpId }
+								onKeyDown={ onSeparatorKeyDown }
+							/>
+						</Tooltip>
+						<VisuallyHidden id={ separatorHelpId }>
+							{ __(
+								'Use up and down arrow keys to resize the meta box panel.'
+							) }
+						</VisuallyHidden>
+					</>
+				),
+			},
+			// Avoids hiccups while dragging over objects like iframes and ensures that
+			// the event to end the drag is captured by the target (resize handle)
+			// whether or not it’s under the pointer.
+			onPointerDown: ( { pointerId, target } ) => {
+				target.setPointerCapture( pointerId );
+			},
+			onResizeStart: ( event, direction, elementRef ) => {
+				if ( isAutoHeight ) {
+					// Sets the starting height to avoid visual jumps in height and
+					// aria-valuenow being `NaN` for the first (few) resize events.
+					applyHeight( elementRef.offsetHeight, false, true );
+					setIsUntouched( false );
+				}
+			},
+			onResize: () =>
+				applyHeight( metaBoxesMainRef.current.state.height ),
+			onResizeStop: () =>
+				applyHeight( metaBoxesMainRef.current.state.height, true ),
+		} );
+	}
+
+	return (
+		<Pane aria-label={ paneLabel } { ...paneProps }>
+			{ isShort ? (
+				<button
+					aria-expanded={ isOpen }
+					className="edit-post-meta-boxes-main__presenter"
+					onClick={ toggle }
+				>
+					{ paneLabel }
+					<Icon icon={ isOpen ? chevronUp : chevronDown } />
+				</button>
+			) : (
+				<meta ref={ effectSizeConstraints } />
+			) }
+			{ contents }
+		</Pane>
+	);
+}
+
+function Layout( {
+	postId: initialPostId,
+	postType: initialPostType,
+	settings,
+	initialEdits,
+} ) {
+	useCommands();
+	useEditPostCommands();
+	const shouldIframe = useShouldIframe();
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const {
+		currentPost: { postId: currentPostId, postType: currentPostType },
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
+	} = useNavigateToEntityRecord(
+		initialPostId,
+		initialPostType,
+		'post-only'
+	);
+	const isEditingTemplate = currentPostType === 'wp_template';
+	const {
+		mode,
+		isFullscreenActive,
+		hasActiveMetaboxes,
+		hasBlockSelected,
+		showIconLabels,
+		isDistractionFree,
+		showMetaBoxes,
+		isWelcomeGuideVisible,
+		templateId,
+		enablePaddingAppender,
+	} = useSelect(
+		( select ) => {
+			const { get } = select( preferencesStore );
+			const { isFeatureActive } = select( editPostStore );
+			const { canUser, getPostType, getTemplateId } = unlock(
+				select( coreStore )
+			);
+
+			const supportsTemplateMode = settings.supportsTemplateMode;
+			const isViewable =
+				getPostType( currentPostType )?.viewable ?? false;
+			const canViewTemplate = canUser( 'read', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			const { isZoomOut } = unlock( select( blockEditorStore ) );
+			const { getEditorMode, getRenderingMode } = select( editorStore );
+			const isRenderingPostOnly = getRenderingMode() === 'post-only';
+			const isNotDesignPostType =
+				! DESIGN_POST_TYPES.includes( currentPostType );
+
+			return {
+				mode: getEditorMode(),
+				isFullscreenActive:
+					select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
+				hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
+				hasBlockSelected:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
+				showIconLabels: get( 'core', 'showIconLabels' ),
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				showMetaBoxes: isNotDesignPostType && ! isZoomOut(),
+				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
+				templateId:
+					supportsTemplateMode &&
+					isViewable &&
+					canViewTemplate &&
+					! isEditingTemplate
+						? getTemplateId( currentPostType, currentPostId )
+						: null,
+				enablePaddingAppender:
+					! isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
+			};
+		},
+		[
+			currentPostType,
+			currentPostId,
+			isEditingTemplate,
+			settings.supportsTemplateMode,
+		]
+	);
+	useMetaBoxInitialization( hasActiveMetaboxes );
+
+	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
+		enablePaddingAppender
+	);
+
+	// Set the right context for the command palette
+	const commandContext = hasBlockSelected
+		? 'block-selection-edit'
+		: 'entity-edit';
+	useCommandContext( commandContext );
+	const editorSettings = useMemo(
+		() => ( {
+			...settings,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+			defaultRenderingMode: 'post-only',
+		} ),
+		[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
+	);
+	const styles = useEditorStyles( paddingStyle );
+
+	// We need to add the show-icon-labels class to the body element so it is applied to modals.
+	if ( showIconLabels ) {
+		document.body.classList.add( 'show-icon-labels' );
+	} else {
+		document.body.classList.remove( 'show-icon-labels' );
+	}
+
+	const navigateRegionsProps = useNavigateRegions();
+
+	const className = clsx( 'edit-post-layout', 'is-mode-' + mode, {
+		'has-metaboxes': hasActiveMetaboxes,
+	} );
 
 	function onPluginAreaError( name ) {
 		createErrorNotice(
@@ -192,108 +482,122 @@ function Layout( { styles } ) {
 		);
 	}
 
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+					{
+						document.location.href = addQueryArgs( 'edit.php', {
+							trashed: 1,
+							post_type: items[ 0 ].type,
+							ids: items[ 0 ].id,
+						} );
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post or template, e.g: "Hello world".
+								__( '"%s" successfully created.' ),
+								decodeEntities( title )
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											const postId = newItem.id;
+											document.location.href =
+												addQueryArgs( 'post.php', {
+													post: postId,
+													action: 'edit',
+												} );
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
+			}
+		},
+		[ createSuccessNotice ]
+	);
+
+	const initialPost = useMemo( () => {
+		return {
+			type: initialPostType,
+			id: initialPostId,
+		};
+	}, [ initialPostType, initialPostId ] );
+
+	const backButton =
+		useViewportMatch( 'medium' ) && isFullscreenActive ? (
+			<BackButton initialPost={ initialPost } />
+		) : null;
+
 	return (
-		<>
-			<FullscreenMode isActive={ isFullscreenActive } />
-			<BrowserURL />
-			<UnsavedChangesWarning />
-			<AutosaveMonitor />
-			<LocalAutosaveMonitor />
-			<EditPostKeyboardShortcuts />
-			<EditorKeyboardShortcutsRegister />
-			<SettingsSidebar />
-			<InterfaceSkeleton
-				isDistractionFree={ isDistractionFree }
-				className={ className }
-				labels={ {
-					...interfaceLabels,
-					secondarySidebar: secondarySidebarLabel,
-				} }
-				header={
-					<Header
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
-						}
-					/>
-				}
-				editorNotices={ <EditorNotices /> }
-				secondarySidebar={ secondarySidebar() }
-				sidebar={
-					( ! isMobileViewport || sidebarIsOpened ) && (
-						<>
-							{ ! isMobileViewport && ! sidebarIsOpened && (
-								<div className="edit-post-layout__toggle-sidebar-panel">
-									<Button
-										variant="secondary"
-										className="edit-post-layout__toggle-sidebar-panel-button"
-										onClick={ openSidebarPanel }
-										aria-expanded={ false }
-									>
-										{ hasBlockSelected
-											? __( 'Open block settings' )
-											: __( 'Open document settings' ) }
-									</Button>
-								</div>
-							) }
-							<ComplementaryArea.Slot scope="core/edit-post" />
-						</>
-					)
-				}
-				notices={ <EditorSnackbars /> }
-				content={
-					<>
-						{ ! isDistractionFree && <EditorNotices /> }
-						{ ( mode === 'text' || ! isRichEditingEnabled ) && (
-							<TextEditor />
-						) }
-						{ isRichEditingEnabled && mode === 'visual' && (
-							<VisualEditor styles={ styles } />
-						) }
-						{ ! isTemplateMode && (
-							<div className="edit-post-layout__metaboxes">
-								<MetaBoxes location="normal" />
-								<MetaBoxes location="advanced" />
-							</div>
-						) }
-						{ isMobileViewport && sidebarIsOpened && (
-							<ScrollLock />
-						) }
-					</>
-				}
-				footer={
-					! isDistractionFree &&
-					showBlockBreadcrumbs &&
-					! isMobileViewport &&
-					isRichEditingEnabled &&
-					mode === 'visual' && (
-						<div className="edit-post-layout__footer">
-							<BlockBreadcrumb rootLabelText={ documentLabel } />
-						</div>
-					)
-				}
-				actions={
-					<ActionsPanel
-						closeEntitiesSavedStates={ closeEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={
-							entitiesSavedStatesCallback
+		<SlotFillProvider>
+			<ErrorBoundary canCopyContent>
+				<CommandMenu />
+				<WelcomeGuide postType={ currentPostType } />
+				<div
+					className={ navigateRegionsProps.className }
+					{ ...navigateRegionsProps }
+					ref={ navigateRegionsProps.ref }
+				>
+					<Editor
+						settings={ editorSettings }
+						initialEdits={ initialEdits }
+						postType={ currentPostType }
+						postId={ currentPostId }
+						templateId={ templateId }
+						className={ className }
+						styles={ styles }
+						forceIsDirty={ hasActiveMetaboxes }
+						contentRef={ paddingAppenderRef }
+						disableIframe={ ! shouldIframe }
+						// We should auto-focus the canvas (title) on load.
+						// eslint-disable-next-line jsx-a11y/no-autofocus
+						autoFocus={ ! isWelcomeGuideVisible }
+						onActionPerformed={ onActionPerformed }
+						extraSidebarPanels={
+							showMetaBoxes && <MetaBoxes location="side" />
 						}
-						setEntitiesSavedStatesCallback={
-							setEntitiesSavedStatesCallback
+						extraContent={
+							! isDistractionFree &&
+							showMetaBoxes && <MetaBoxesMain />
 						}
-					/>
-				}
-				shortcuts={ {
-					previous: previousShortcut,
-					next: nextShortcut,
-				} }
-			/>
-			<EditPostPreferencesModal />
-			<KeyboardShortcutHelpModal />
-			<WelcomeGuide />
-			<StartPageOptions />
-			<Popover.Slot />
-			<PluginArea onError={ onPluginAreaError } />
-		</>
+					>
+						<PostLockedModal />
+						<EditorInitialization />
+						<FullscreenMode isActive={ isFullscreenActive } />
+						<BrowserURL />
+						<UnsavedChangesWarning />
+						<AutosaveMonitor />
+						<LocalAutosaveMonitor />
+						<EditPostKeyboardShortcuts />
+						<EditorKeyboardShortcutsRegister />
+						<BlockKeyboardShortcuts />
+						<InitPatternModal />
+						<PluginArea onError={ onPluginAreaError } />
+						<PostEditorMoreMenu />
+						{ backButton }
+						<EditorSnackbars />
+					</Editor>
+				</div>
+			</ErrorBoundary>
+		</SlotFillProvider>
 	);
 }
 
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index a9c38ee1ccb8d5..a3943f30597870 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -22,7 +22,11 @@ import {
 	Tooltip,
 	__unstableAutocompletionItemsSlot as AutocompletionItemsSlot,
 } from '@wordpress/components';
-import { AutosaveMonitor, store as editorStore } from '@wordpress/editor';
+import {
+	AutosaveMonitor,
+	OfflineStatus,
+	store as editorStore,
+} from '@wordpress/editor';
 import { sendNativeEditorDidLayout } from '@wordpress/react-native-bridge';
 
 /**
@@ -32,7 +36,6 @@ import styles from './style.scss';
 import headerToolbarStyles from '../header/header-toolbar/style.scss';
 import Header from '../header';
 import VisualEditor from '../visual-editor';
-import { store as editPostStore } from '../../store';
 
 class Layout extends Component {
 	constructor() {
@@ -148,6 +151,7 @@ class Layout extends Component {
 					onLayout={ this.onRootViewLayout }
 				>
 					<AutosaveMonitor disableIntervalChecks />
+					<OfflineStatus />
 					<View style={ editorStyles }>
 						{ isHtmlView ? this.renderHTML() : this.renderVisual() }
 						{ ! isHtmlView && Platform.OS === 'android' && (
@@ -187,9 +191,8 @@ class Layout extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady } =
+		const { __unstableIsEditorReady: isEditorReady, getEditorMode } =
 			select( editorStore );
-		const { getEditorMode } = select( editPostStore );
 		const { getSettings } = select( blockEditorStore );
 		const globalStyles =
 			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
diff --git a/packages/edit-post/src/components/layout/style.native.scss b/packages/edit-post/src/components/layout/style.native.scss
index faee2799e54eb8..765314bf15955c 100644
--- a/packages/edit-post/src/components/layout/style.native.scss
+++ b/packages/edit-post/src/components/layout/style.native.scss
@@ -6,7 +6,7 @@
 }
 
 .containerDark {
-	background-color: $app-background-dark-alt;
+	background-color: $app-safe-area-background-dark;
 }
 
 .background {
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 473dae279473e9..7a7f13382661ac 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,97 +1,124 @@
-.edit-post-layout__metaboxes {
-	flex-shrink: 0;
-	clear: both;
-}
+.edit-post-meta-boxes-main {
+	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
+	// Windows High Contrast mode will show this outline, but not the shadow.
+	outline: 1px solid transparent;
+	background-color: $white;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 
-// Adjust the position of the notices
-.edit-post-layout .components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 40px;
-	padding-left: 16px;
-	padding-right: 16px;
+	&.is-resizable {
+		padding-block-start: $grid-unit-30;
+	}
 }
 
-.is-distraction-free {
-	.components-editor-notices__snackbar {
-		bottom: 20px;
+.edit-post-meta-boxes-main__presenter {
+	display: flex;
+	box-shadow: 0 $border-width $gray-300;
+	// Windows High Contrast mode will show this outline, but not the shadow.
+	outline: 1px solid transparent;
+	position: relative;
+	z-index: 1;
+
+	// Button style reset for both toggle or resizable.
+	.is-toggle-only > &,
+	.is-resizable.edit-post-meta-boxes-main & > button {
+		appearance: none;
+		padding: 0;
+		border: none;
+		outline: none;
+		background-color: transparent;
 	}
-}
 
-@include editor-left(".edit-post-layout .components-editor-notices__snackbar");
+	.is-toggle-only > & {
+		flex-shrink: 0;
+		cursor: pointer;
+		height: $button-size-compact;
+		justify-content: space-between;
+		align-items: center;
+		padding-inline: $grid-unit-30 $grid-unit-15;
 
-.edit-post-layout .editor-post-publish-panel {
-	position: fixed;
-	z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-	top: $admin-bar-height-big;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	overflow: auto;
+		&:is(:hover, :focus-visible) {
+			color: var(--wp-admin-theme-color);
+		}
+		&:focus-visible::after {
+			content: "";
+			position: absolute;
+			inset: var(--wp-admin-border-width-focus);
+			@include button-style__focus();
+		}
+		> svg {
+			fill: currentColor;
+		}
+	}
+
+	.is-resizable.edit-post-meta-boxes-main & {
+		inset: 0 0 auto;
+
+		> button {
+			cursor: inherit;
+			width: $grid-unit-80;
+			height: $grid-unit-30;
+			margin: auto;
 
-	@include break-medium() {
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-		top: $admin-bar-height;
-		left: auto;
-		width: $sidebar-width + $border-width;
-		border-left: $border-width solid $gray-300;
-		transform: translateX(+100%);
-		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
-		@include reduce-motion("animation");
-
-		body.is-fullscreen-mode & {
-			top: 0;
+			&::before {
+				content: "";
+				background-color: $gray-300;
+				// Windows High Contrast mode will show this outline, but not the background-color.
+				outline: 2px solid transparent;
+				outline-offset: -2px;
+				position: absolute;
+				inset-block: calc(50% - #{$grid-unit-05} / 2) auto;
+				transform: translateX(-50%);
+				width: inherit;
+				height: $grid-unit-05;
+				border-radius: $radius-small;
+				transition: width 0.3s ease-out;
+				@include reduce-motion("transition");
+			}
 		}
 
-		// Keep it open on focus to avoid conflict with navigate-regions animation.
-		[role="region"]:focus & {
-			transform: translateX(0%);
+		&:is(:hover, :focus-within) > button::before {
+			background-color: var(--wp-admin-theme-color);
+			width: $grid-unit-80 + $grid-unit-20;
 		}
 	}
 }
 
-@keyframes edit-post-post-publish-panel__slide-in-animation {
-	100% {
-		transform: translateX(0%);
+@media (pointer: coarse) {
+	.is-resizable.edit-post-meta-boxes-main {
+		padding-block-start: $button-size-compact;
+
+		.edit-post-meta-boxes-main__presenter > button {
+			height: $button-size-compact;
+		}
 	}
 }
 
-.edit-post-layout .editor-post-publish-panel__header-publish-button {
-	justify-content: center;
+.edit-post-meta-boxes-main__liner {
+	overflow: auto;
+	// Keep the contents behind the resize handle or details summary.
+	isolation: isolate;
 }
 
-.edit-post-layout__toggle-publish-panel,
-.edit-post-layout__toggle-sidebar-panel,
-.edit-post-layout__toggle-entities-saved-states-panel {
-	z-index: z-index(".edit-post-layout__toggle-sidebar-panel");
-	position: fixed !important; // Need to override the default relative positionning
-	top: -9999em;
-	bottom: auto;
-	left: auto;
-	right: 0;
-	box-sizing: border-box;
-	width: $sidebar-width;
-	background-color: $white;
-	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positionnings
-	padding: $grid-unit-30;
-	display: flex;
-	justify-content: center;
+// In case the canvas is not iframe’d.
+.edit-post-layout__metaboxes {
+	clear: both;
 }
 
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
+.has-metaboxes .editor-visual-editor {
+	// Contains z-indexes of children so that the block toolbar will appear behind
+	// the drop shadow of the meta box pane.
+	isolation: isolate;
 }
 
-.edit-post-layout__toggle-entities-saved-states-panel,
-.edit-post-layout__toggle-publish-panel {
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
+// Adjust the position of the notices
+.components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 24px;
+	padding-left: 24px;
+	padding-right: 24px;
 }
+
+@include editor-left(".edit-post-layout .components-editor-notices__snackbar");
diff --git a/packages/edit-post/src/components/layout/use-padding-appender.js b/packages/edit-post/src/components/layout/use-padding-appender.js
new file mode 100644
index 00000000000000..ee1484f518d7a0
--- /dev/null
+++ b/packages/edit-post/src/components/layout/use-padding-appender.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+// Ruleset to add space for the typewriter effect. When typing in the last
+// block, there needs to be room to scroll up.
+const CSS =
+	':root :where(.editor-styles-wrapper)::after {content: ""; display: block; height: 40vh;}';
+
+export function usePaddingAppender( enabled ) {
+	const registry = useRegistry();
+	const effect = useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				if (
+					event.target !== node &&
+					// Tests for the parent element because in the iframed editor if the click is
+					// below the padding the target will be the parent element (html) and should
+					// still be treated as intent to append.
+					event.target !== node.parentElement
+				) {
+					return;
+				}
+
+				// Only handle clicks under the last child.
+				const lastChild = node.lastElementChild;
+				if ( ! lastChild ) {
+					return;
+				}
+
+				const lastChildRect = lastChild.getBoundingClientRect();
+				if ( event.clientY < lastChildRect.bottom ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				const blockOrder = registry
+					.select( blockEditorStore )
+					.getBlockOrder( '' );
+				const lastBlockClientId = blockOrder[ blockOrder.length - 1 ];
+
+				const lastBlock = registry
+					.select( blockEditorStore )
+					.getBlock( lastBlockClientId );
+				const { selectBlock, insertDefaultBlock } =
+					registry.dispatch( blockEditorStore );
+
+				if ( lastBlock && isUnmodifiedDefaultBlock( lastBlock ) ) {
+					selectBlock( lastBlockClientId );
+				} else {
+					insertDefaultBlock();
+				}
+			}
+			const { ownerDocument } = node;
+			// Adds the listener on the document so that in the iframed editor clicks below the
+			// padding can be handled as they too should be treated as intent to append.
+			ownerDocument.addEventListener( 'mousedown', onMouseDown );
+			return () => {
+				ownerDocument.removeEventListener( 'mousedown', onMouseDown );
+			};
+		},
+		[ registry ]
+	);
+	return enabled ? [ effect, CSS ] : [];
+}
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
new file mode 100644
index 00000000000000..cd2a893d8d1cd0
--- /dev/null
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+export function useShouldIframe() {
+	return useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentPostType, getDeviceType } =
+			select( editorStore );
+		return (
+			// If the theme is block based, we ALWAYS use the iframe for
+			// consistency across the post and site editor. The iframe was
+			// introduced long before the sited editor and block themes, so
+			// these themes are expecting it.
+			getEditorSettings().__unstableIsBlockBasedTheme ||
+			// For classic themes, we also still want to iframe all the special
+			// editor features and modes such as device previews, zoom out, and
+			// template/pattern editing.
+			getDeviceType() !== 'Desktop' ||
+			[ 'wp_template', 'wp_block' ].includes( getCurrentPostType() ) ||
+			unlock( select( blockEditorStore ) ).isZoomOut() ||
+			// Finally, still iframe the editor for classic themes if all blocks
+			// are v3 (which means they are marked as iframe-compatible).
+			select( blocksStore )
+				.getBlockTypes()
+				.every( ( type ) => type.apiVersion >= 3 )
+		);
+	}, [] );
+}
diff --git a/packages/edit-post/src/components/meta-boxes/index.js b/packages/edit-post/src/components/meta-boxes/index.js
index 81e69db6db0adb..21416ee43ae240 100644
--- a/packages/edit-post/src/components/meta-boxes/index.js
+++ b/packages/edit-post/src/components/meta-boxes/index.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useSelect, useRegistry } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,39 +11,14 @@ import MetaBoxVisibility from './meta-box-visibility';
 import { store as editPostStore } from '../../store';
 
 export default function MetaBoxes( { location } ) {
-	const registry = useRegistry();
-	const { metaBoxes, areMetaBoxesInitialized, isEditorReady } = useSelect(
-		( select ) => {
-			const { __unstableIsEditorReady } = select( editorStore );
-			const {
-				getMetaBoxesPerLocation,
-				areMetaBoxesInitialized: _areMetaBoxesInitialized,
-			} = select( editPostStore );
-			return {
-				metaBoxes: getMetaBoxesPerLocation( location ),
-				areMetaBoxesInitialized: _areMetaBoxesInitialized(),
-				isEditorReady: __unstableIsEditorReady(),
-			};
-		},
+	const metaBoxes = useSelect(
+		( select ) =>
+			select( editPostStore ).getMetaBoxesPerLocation( location ),
 		[ location ]
 	);
-
-	// When editor is ready, initialize postboxes (wp core script) and metabox
-	// saving. This initializes all meta box locations, not just this specific
-	// one.
-	useEffect( () => {
-		if ( isEditorReady && ! areMetaBoxesInitialized ) {
-			registry.dispatch( editPostStore ).initializeMetaBoxes();
-		}
-	}, [ isEditorReady, areMetaBoxesInitialized ] );
-
-	if ( ! areMetaBoxesInitialized ) {
-		return null;
-	}
-
 	return (
 		<>
-			{ map( metaBoxes, ( { id } ) => (
+			{ ( metaBoxes ?? [] ).map( ( { id } ) => (
 				<MetaBoxVisibility key={ id } id={ id } />
 			) ) }
 			<MetaBoxesArea location={ location } />
diff --git a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
index 488d73e1a76e03..07060afa31dea5 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
+++ b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js
@@ -1,28 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-class MetaBoxVisibility extends Component {
-	componentDidMount() {
-		this.updateDOM();
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.isVisible !== prevProps.isVisible ) {
-			this.updateDOM();
-		}
-	}
-
-	updateDOM() {
-		const { id, isVisible } = this.props;
-
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function MetaBoxVisibility( { id } ) {
+	const isVisible = useSelect(
+		( select ) => {
+			return select( editorStore ).isEditorPanelEnabled(
+				`meta-box-${ id }`
+			);
+		},
+		[ id ]
+	);
+
+	useEffect( () => {
 		const element = document.getElementById( id );
 		if ( ! element ) {
 			return;
@@ -33,15 +26,7 @@ class MetaBoxVisibility extends Component {
 		} else {
 			element.classList.add( 'is-hidden' );
 		}
-	}
+	}, [ id, isVisible ] );
 
-	render() {
-		return null;
-	}
+	return null;
 }
-
-export default withSelect( ( select, { id } ) => ( {
-	isVisible: select( editPostStore ).isEditorPanelEnabled(
-		`meta-box-${ id }`
-	),
-} ) )( MetaBoxVisibility );
diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
index 33baf50f0f6618..908c4b5a6f6696 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
+++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import { store as editPostStore } from '../../../store';
  *
  * @param {Object} props          Component props.
  * @param {string} props.location metabox location.
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 function MetaBoxesArea( { location } ) {
 	const container = useRef( null );
@@ -48,13 +48,9 @@ function MetaBoxesArea( { location } ) {
 		return select( editPostStore ).isSavingMetaBoxes();
 	}, [] );
 
-	const classes = classnames(
-		'edit-post-meta-boxes-area',
-		`is-${ location }`,
-		{
-			'is-loading': isSaving,
-		}
-	);
+	const classes = clsx( 'edit-post-meta-boxes-area', `is-${ location }`, {
+		'is-loading': isSaving,
+	} );
 
 	return (
 		<div className={ classes }>
diff --git a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss
index a77adb1c8d354d..6637cdcaf17f4c 100644
--- a/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss
+++ b/packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss
@@ -88,7 +88,7 @@
 
 	// Until checkboxes WordPress-wide are updated to match the new style,
 	// checkboxes used in metaboxes have to be slightly unstyled here.
-	// @todo: remove this entire rule once checkboxes are the same everywhere.
+	// @todo remove this entire rule once checkboxes are the same everywhere.
 	// See: https://github.com/WordPress/gutenberg/issues/18053
 	.metabox-location-side .postbox input[type="checkbox"] {
 		border: $border-width solid $gray-700;
diff --git a/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js
new file mode 100644
index 00000000000000..4309d85e3c22bf
--- /dev/null
+++ b/packages/edit-post/src/components/meta-boxes/use-meta-box-initialization.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+/**
+ * Initializes WordPress `postboxes` script and the logic for saving meta boxes.
+ *
+ * @param { boolean } enabled
+ */
+export const useMetaBoxInitialization = ( enabled ) => {
+	const isEnabledAndEditorReady = useSelect(
+		( select ) =>
+			enabled && select( editorStore ).__unstableIsEditorReady(),
+		[ enabled ]
+	);
+	const { initializeMetaBoxes } = useDispatch( editPostStore );
+	// The effect has to rerun when the editor is ready because initializeMetaBoxes
+	// will noop until then.
+	useEffect( () => {
+		if ( isEnabledAndEditorReady ) {
+			initializeMetaBoxes();
+		}
+	}, [ isEnabledAndEditorReady, initializeMetaBoxes ] );
+};
diff --git a/packages/edit-post/src/components/more-menu/index.js b/packages/edit-post/src/components/more-menu/index.js
new file mode 100644
index 00000000000000..026354e6813494
--- /dev/null
+++ b/packages/edit-post/src/components/more-menu/index.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { displayShortcut } from '@wordpress/keycodes';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import ManagePatternsMenuItem from './manage-patterns-menu-item';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import EditPostPreferencesModal from '../preferences-modal';
+
+const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
+
+const MoreMenu = () => {
+	const isLargeViewport = useViewportMatch( 'large' );
+
+	return (
+		<>
+			{ isLargeViewport && (
+				<ViewMoreMenuGroup>
+					<PreferenceToggleMenuItem
+						scope="core/edit-post"
+						name="fullscreenMode"
+						label={ __( 'Fullscreen mode' ) }
+						info={ __( 'Show and hide the admin user interface' ) }
+						messageActivated={ __( 'Fullscreen mode activated.' ) }
+						messageDeactivated={ __(
+							'Fullscreen mode deactivated.'
+						) }
+						shortcut={ displayShortcut.secondary( 'f' ) }
+					/>
+				</ViewMoreMenuGroup>
+			) }
+			<ToolsMoreMenuGroup>
+				<ManagePatternsMenuItem />
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<EditPostPreferencesModal />
+		</>
+	);
+};
+
+export default MoreMenu;
diff --git a/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
new file mode 100644
index 00000000000000..786ba91f5e04a3
--- /dev/null
+++ b/packages/edit-post/src/components/more-menu/manage-patterns-menu-item.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+function ManagePatternsMenuItem() {
+	const url = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		const defaultUrl = addQueryArgs( 'edit.php', {
+			post_type: 'wp_block',
+		} );
+		const patternsUrl = addQueryArgs( 'site-editor.php', {
+			path: '/patterns',
+		} );
+
+		// The site editor and templates both check whether the user has
+		// edit_theme_options capabilities. We can leverage that here and not
+		// display the manage patterns link if the user can't access it.
+		return canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_template',
+		} )
+			? patternsUrl
+			: defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
+export default ManagePatternsMenuItem;
diff --git a/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js b/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
new file mode 100644
index 00000000000000..c454fee8588dbd
--- /dev/null
+++ b/packages/edit-post/src/components/more-menu/welcome-guide-menu-item.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function WelcomeGuideMenuItem() {
+	const isEditingTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getCurrentPostType() === 'wp_template',
+		[]
+	);
+
+	return (
+		<PreferenceToggleMenuItem
+			scope="core/edit-post"
+			name={ isEditingTemplate ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			label={ __( 'Welcome Guide' ) }
+		/>
+	);
+}
diff --git a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
new file mode 100644
index 00000000000000..f3db9d123f9d71
--- /dev/null
+++ b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+import { getPathAndQueryString } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+function submitCustomFieldsForm() {
+	const customFieldsForm = document.getElementById(
+		'toggle-custom-fields-form'
+	);
+
+	// Ensure the referrer values is up to update with any
+	customFieldsForm
+		.querySelector( '[name="_wp_http_referer"]' )
+		.setAttribute( 'value', getPathAndQueryString( window.location.href ) );
+
+	customFieldsForm.submit();
+}
+
+export function CustomFieldsConfirmation( { willEnable } ) {
+	const [ isReloading, setIsReloading ] = useState( false );
+	return (
+		<>
+			<p className="edit-post-preferences-modal__custom-fields-confirmation-message">
+				{ __(
+					'A page reload is required for this change. Make sure your content is saved before reloading.'
+				) }
+			</p>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				isBusy={ isReloading }
+				accessibleWhenDisabled
+				disabled={ isReloading }
+				onClick={ () => {
+					setIsReloading( true );
+					submitCustomFieldsForm();
+				} }
+			>
+				{ willEnable
+					? __( 'Show & Reload Page' )
+					: __( 'Hide & Reload Page' ) }
+			</Button>
+		</>
+	);
+}
+
+export default function EnableCustomFieldsOption( { label } ) {
+	const areCustomFieldsEnabled = useSelect( ( select ) => {
+		return !! select( editorStore ).getEditorSettings().enableCustomFields;
+	}, [] );
+	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
+
+	return (
+		<PreferenceBaseOption
+			label={ label }
+			isChecked={ isChecked }
+			onChange={ setIsChecked }
+		>
+			{ isChecked !== areCustomFieldsEnabled && (
+				<CustomFieldsConfirmation willEnable={ isChecked } />
+			) }
+		</PreferenceBaseOption>
+	);
+}
diff --git a/packages/edit-post/src/components/preferences-modal/enable-panel.js b/packages/edit-post/src/components/preferences-modal/enable-panel.js
new file mode 100644
index 00000000000000..9053b74a695d6d
--- /dev/null
+++ b/packages/edit-post/src/components/preferences-modal/enable-panel.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index cbed0ece079823..9ed517cc76d283 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -1,273 +1,32 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 
 import { __ } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import {
-	PostTaxonomies,
-	PostExcerptCheck,
-	PageAttributesCheck,
-	PostFeaturedImageCheck,
-	PostTypeSupportCheck,
-	store as editorStore,
-} from '@wordpress/editor';
-import {
-	PreferencesModal,
-	PreferencesModalTabs,
-	PreferencesModalSection,
-} from '@wordpress/interface';
-import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-
-import {
-	EnablePluginDocumentSettingPanelOption,
-	EnablePublishSidebarOption,
-	EnablePanelOption,
-	EnableFeature,
-} from './options';
+import { unlock } from '../../lock-unlock';
 import MetaBoxesSection from './meta-boxes-section';
-import { store as editPostStore } from '../../store';
-import BlockManager from '../block-manager';
 
-const MODAL_NAME = 'edit-post/preferences';
+const { PreferenceToggleControl } = unlock( preferencesPrivateApis );
+const { PreferencesModal } = unlock( editorPrivateApis );
 
 export default function EditPostPreferencesModal() {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { closeModal } = useDispatch( editPostStore );
-	const [ isModalActive, showBlockBreadcrumbsOption ] = useSelect(
-		( select ) => {
-			const { getEditorSettings } = select( editorStore );
-			const { getEditorMode, isFeatureActive } = select( editPostStore );
-			const modalActive =
-				select( editPostStore ).isModalActive( MODAL_NAME );
-			const mode = getEditorMode();
-			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
-			const isDistractionFreeEnabled =
-				isFeatureActive( 'distractionFree' );
-			return [
-				modalActive,
-				! isDistractionFreeEnabled &&
-					isLargeViewport &&
-					isRichEditingEnabled &&
-					mode === 'visual',
-				isDistractionFreeEnabled,
-			];
-		},
-		[ isLargeViewport ]
-	);
-
-	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editPostStore );
-
-	const { set: setPreference } = useDispatch( preferencesStore );
-
-	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
+	const extraSections = {
+		general: <MetaBoxesSection title={ __( 'Advanced' ) } />,
+		appearance: (
+			<PreferenceToggleControl
+				scope="core/edit-post"
+				featureName="themeStyles"
+				help={ __( 'Make the editor look like your theme.' ) }
+				label={ __( 'Use theme styles' ) }
+			/>
+		),
 	};
 
-	const sections = useMemo(
-		() => [
-			{
-				name: 'general',
-				tabLabel: __( 'General' ),
-				content: (
-					<>
-						{ isLargeViewport && (
-							<PreferencesModalSection
-								title={ __( 'Publishing' ) }
-								description={ __(
-									'Change options related to publishing.'
-								) }
-							>
-								<EnablePublishSidebarOption
-									help={ __(
-										'Review settings, such as visibility and tags.'
-									) }
-									label={ __(
-										'Include pre-publish checklist'
-									) }
-								/>
-							</PreferencesModalSection>
-						) }
-
-						<PreferencesModalSection
-							title={ __( 'Appearance' ) }
-							description={ __(
-								'Customize options related to the block editor interface and editing flow.'
-							) }
-						>
-							<EnableFeature
-								featureName="distractionFree"
-								onToggle={ toggleDistractionFree }
-								help={ __(
-									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
-								) }
-								label={ __( 'Distraction free' ) }
-							/>
-							<EnableFeature
-								featureName="focusMode"
-								help={ __(
-									'Highlights the current block and fades other content.'
-								) }
-								label={ __( 'Spotlight mode' ) }
-							/>
-							<EnableFeature
-								featureName="showIconLabels"
-								label={ __( 'Show button text labels' ) }
-								help={ __(
-									'Show text instead of icons on buttons.'
-								) }
-							/>
-							<EnableFeature
-								featureName="showListViewByDefault"
-								help={ __(
-									'Opens the block list view sidebar by default.'
-								) }
-								label={ __( 'Always open list view' ) }
-							/>
-							<EnableFeature
-								featureName="themeStyles"
-								help={ __(
-									'Make the editor look like your theme.'
-								) }
-								label={ __( 'Use theme styles' ) }
-							/>
-							{ showBlockBreadcrumbsOption && (
-								<EnableFeature
-									featureName="showBlockBreadcrumbs"
-									help={ __(
-										'Shows block breadcrumbs at the bottom of the editor.'
-									) }
-									label={ __( 'Display block breadcrumbs' ) }
-								/>
-							) }
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'blocks',
-				tabLabel: __( 'Blocks' ),
-				content: (
-					<>
-						<PreferencesModalSection
-							title={ __( 'Block interactions' ) }
-							description={ __(
-								'Customize how you interact with blocks in the block library and editing canvas.'
-							) }
-						>
-							<EnableFeature
-								featureName="mostUsedBlocks"
-								help={ __(
-									'Places the most frequent blocks in the block library.'
-								) }
-								label={ __( 'Show most used blocks' ) }
-							/>
-							<EnableFeature
-								featureName="keepCaretInsideBlock"
-								help={ __(
-									'Aids screen readers by stopping text caret from leaving blocks.'
-								) }
-								label={ __(
-									'Contain text cursor inside block'
-								) }
-							/>
-						</PreferencesModalSection>
-						<PreferencesModalSection
-							title={ __( 'Visible blocks' ) }
-							description={ __(
-								"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
-							) }
-						>
-							<BlockManager />
-						</PreferencesModalSection>
-					</>
-				),
-			},
-			{
-				name: 'panels',
-				tabLabel: __( 'Panels' ),
-				content: (
-					<>
-						<PreferencesModalSection
-							title={ __( 'Document settings' ) }
-							description={ __(
-								'Choose what displays in the panel.'
-							) }
-						>
-							<EnablePluginDocumentSettingPanelOption.Slot />
-							<PostTaxonomies
-								taxonomyWrapper={ ( content, taxonomy ) => (
-									<EnablePanelOption
-										label={ get( taxonomy, [
-											'labels',
-											'menu_name',
-										] ) }
-										panelName={ `taxonomy-panel-${ taxonomy.slug }` }
-									/>
-								) }
-							/>
-							<PostFeaturedImageCheck>
-								<EnablePanelOption
-									label={ __( 'Featured image' ) }
-									panelName="featured-image"
-								/>
-							</PostFeaturedImageCheck>
-							<PostExcerptCheck>
-								<EnablePanelOption
-									label={ __( 'Excerpt' ) }
-									panelName="post-excerpt"
-								/>
-							</PostExcerptCheck>
-							<PostTypeSupportCheck
-								supportKeys={ [ 'comments', 'trackbacks' ] }
-							>
-								<EnablePanelOption
-									label={ __( 'Discussion' ) }
-									panelName="discussion-panel"
-								/>
-							</PostTypeSupportCheck>
-							<PageAttributesCheck>
-								<EnablePanelOption
-									label={ __( 'Page attributes' ) }
-									panelName="page-attributes"
-								/>
-							</PageAttributesCheck>
-						</PreferencesModalSection>
-						<MetaBoxesSection
-							title={ __( 'Additional' ) }
-							description={ __(
-								'Add extra areas to the editor.'
-							) }
-						/>
-					</>
-				),
-			},
-		],
-		[ isLargeViewport, showBlockBreadcrumbsOption ]
-	);
-
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
-	);
+	return <PreferencesModal extraSections={ extraSections } />;
 }
diff --git a/packages/edit-post/src/components/preferences-modal/meta-boxes-section.js b/packages/edit-post/src/components/preferences-modal/meta-boxes-section.js
index 857eb27910bed6..2974e81547dbd6 100644
--- a/packages/edit-post/src/components/preferences-modal/meta-boxes-section.js
+++ b/packages/edit-post/src/components/preferences-modal/meta-boxes-section.js
@@ -1,21 +1,20 @@
-/**
- * External dependencies
- */
-import { filter, map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { PreferencesModalSection } from '@wordpress/interface';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { EnableCustomFieldsOption, EnablePanelOption } from './options';
+import EnableCustomFieldsOption from './enable-custom-fields';
+import EnablePanelOption from './enable-panel';
 import { store as editPostStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { PreferencesModalSection } = unlock( preferencesPrivateApis );
 
 export function MetaBoxesSection( {
 	areCustomFieldsRegistered,
@@ -23,8 +22,7 @@ export function MetaBoxesSection( {
 	...sectionProps
 } ) {
 	// The 'Custom Fields' meta box is a special case that we handle separately.
-	const thirdPartyMetaBoxes = filter(
-		metaBoxes,
+	const thirdPartyMetaBoxes = metaBoxes.filter(
 		( { id } ) => id !== 'postcustom'
 	);
 
@@ -37,7 +35,7 @@ export function MetaBoxesSection( {
 			{ areCustomFieldsRegistered && (
 				<EnableCustomFieldsOption label={ __( 'Custom fields' ) } />
 			) }
-			{ map( thirdPartyMetaBoxes, ( { id, title } ) => (
+			{ thirdPartyMetaBoxes.map( ( { id, title } ) => (
 				<EnablePanelOption
 					key={ id }
 					label={ title }
diff --git a/packages/edit-post/src/components/preferences-modal/options/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/options/enable-custom-fields.js
deleted file mode 100644
index 063875786c3aff..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/enable-custom-fields.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-
-export function CustomFieldsConfirmation( { willEnable } ) {
-	const [ isReloading, setIsReloading ] = useState( false );
-
-	return (
-		<>
-			<p className="edit-post-preferences-modal__custom-fields-confirmation-message">
-				{ __(
-					'A page reload is required for this change. Make sure your content is saved before reloading.'
-				) }
-			</p>
-			<Button
-				className="edit-post-preferences-modal__custom-fields-confirmation-button"
-				variant="secondary"
-				isBusy={ isReloading }
-				disabled={ isReloading }
-				onClick={ () => {
-					setIsReloading( true );
-					document
-						.getElementById( 'toggle-custom-fields-form' )
-						.submit();
-				} }
-			>
-				{ willEnable
-					? __( 'Enable & Reload' )
-					: __( 'Disable & Reload' ) }
-			</Button>
-		</>
-	);
-}
-
-export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
-	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
-
-	return (
-		<BaseOption
-			label={ label }
-			isChecked={ isChecked }
-			onChange={ setIsChecked }
-		>
-			{ isChecked !== areCustomFieldsEnabled && (
-				<CustomFieldsConfirmation willEnable={ isChecked } />
-			) }
-		</BaseOption>
-	);
-}
-
-export default withSelect( ( select ) => ( {
-	areCustomFieldsEnabled:
-		!! select( editorStore ).getEditorSettings().enableCustomFields,
-} ) )( EnableCustomFieldsOption );
diff --git a/packages/edit-post/src/components/preferences-modal/options/enable-feature.js b/packages/edit-post/src/components/preferences-modal/options/enable-feature.js
deleted file mode 100644
index a92407c00d4167..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/enable-feature.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default compose(
-	withSelect( ( select, { featureName } ) => {
-		const { isFeatureActive } = select( editPostStore );
-		return {
-			isChecked: isFeatureActive( featureName ),
-		};
-	} ),
-	withDispatch( ( dispatch, { featureName, onToggle = () => {} } ) => ( {
-		onChange: () => {
-			onToggle();
-			dispatch( editPostStore ).toggleFeature( featureName );
-		},
-	} ) )
-)( BaseOption );
diff --git a/packages/edit-post/src/components/preferences-modal/options/enable-panel.js b/packages/edit-post/src/components/preferences-modal/options/enable-panel.js
deleted file mode 100644
index bbde5c80eedfd4..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/enable-panel.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editPostStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editPostStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( BaseOption );
diff --git a/packages/edit-post/src/components/preferences-modal/options/enable-publish-sidebar.js b/packages/edit-post/src/components/preferences-modal/options/enable-publish-sidebar.js
deleted file mode 100644
index fa309bedf24616..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/enable-publish-sidebar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ifViewportMatches } from '@wordpress/viewport';
-import { store as editorStore } from '@wordpress/editor';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-
-export default compose(
-	withSelect( ( select ) => ( {
-		isChecked: select( editorStore ).isPublishSidebarEnabled(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { enablePublishSidebar, disablePublishSidebar } =
-			dispatch( editorStore );
-		return {
-			onChange: ( isEnabled ) =>
-				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),
-		};
-	} ),
-	// In < medium viewports we override this option and always show the publish sidebar.
-	// See the edit-post's header component for the specific logic.
-	ifViewportMatches( 'medium' )
-)( BaseOption );
diff --git a/packages/edit-post/src/components/preferences-modal/options/index.js b/packages/edit-post/src/components/preferences-modal/options/index.js
deleted file mode 100644
index b5cb1c6c4fe1b7..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as EnableCustomFieldsOption } from './enable-custom-fields';
-export { default as EnablePanelOption } from './enable-panel';
-export { default as EnablePluginDocumentSettingPanelOption } from './enable-plugin-document-setting-panel';
-export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
-export { default as EnableFeature } from './enable-feature';
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
deleted file mode 100644
index d1bb19cf8dd5dc..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/options/test/enable-custom-fields.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import {
-	EnableCustomFieldsOption,
-	CustomFieldsConfirmation,
-} from '../enable-custom-fields';
-
-describe( 'EnableCustomFieldsOption', () => {
-	it( 'renders a checked checkbox when custom fields are enabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
-
-		await user.click( screen.getByRole( 'checkbox' ) );
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
-
-		await user.click( screen.getByRole( 'checkbox' ) );
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
-
-describe( 'CustomFieldsConfirmation', () => {
-	it( 'submits the toggle-custom-fields-form', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const submit = jest.fn();
-		const getElementById = jest
-			.spyOn( document, 'getElementById' )
-			.mockImplementation( () => ( {
-				submit,
-			} ) );
-
-		render( <CustomFieldsConfirmation /> );
-
-		await user.click( screen.getByRole( 'button' ) );
-
-		expect( getElementById ).toHaveBeenCalledWith(
-			'toggle-custom-fields-form'
-		);
-		expect( submit ).toHaveBeenCalled();
-
-		getElementById.mockRestore();
-	} );
-} );
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap
similarity index 81%
rename from packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
rename to packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap
index 2485d91e9fdb9d..bf12d7d0d8facc 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/enable-custom-fields.js.snap
@@ -29,7 +29,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -41,9 +41,20 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -72,7 +83,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-3"
           />
         </div>
@@ -84,10 +97,10 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
-      Enable & Reload
+      Show & Reload Page
     </button>
   </div>
 </div>
@@ -122,7 +135,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -134,9 +147,20 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -166,7 +190,9 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-0"
           />
         </div>
@@ -205,7 +231,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -217,9 +243,20 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -249,7 +286,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-2"
           />
         </div>
@@ -261,10 +300,10 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
       A page reload is required for this change. Make sure your content is saved before reloading.
     </p>
     <button
-      class="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
+      class="components-button is-next-40px-default-size is-secondary"
       type="button"
     >
-      Disable & Reload
+      Hide & Reload Page
     </button>
   </div>
 </div>
@@ -299,7 +338,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -311,9 +350,20 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <div>
   <div
-    class="interface-preferences-modal__option"
+    class="preference-base-option"
   >
     <div
       class="components-base-control components-toggle-control emotion-0 emotion-1"
@@ -342,7 +392,9 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
             />
           </span>
           <label
-            class="components-toggle-control__label"
+            class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="FlexBlock"
             for="inspector-toggle-control-1"
           />
         </div>
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
deleted file mode 100644
index f9f7be89c82a0c..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,895 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditPostPreferencesModal should match snapshot when the modal is active large viewports 1`] = `
-.emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-.emotion-0 *,
-.emotion-0 *::before,
-.emotion-0 *::after {
-  box-sizing: inherit;
-}
-
-.components-panel__row .emotion-2 {
-  margin-bottom: inherit;
-}
-
-.emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 3);
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-}
-
-.emotion-4>* {
-  min-width: 0;
-}
-
-.emotion-6 {
-  margin-top: calc(4px * 2);
-  margin-bottom: 0;
-  font-size: 12px;
-  font-style: normal;
-  color: #757575;
-}
-
-<div
-  aria-labelledby="components-modal-header-0"
-  class="components-modal__frame interface-preferences-modal"
-  role="dialog"
-  tabindex="-1"
->
-  <div
-    class="components-modal__content"
-    role="document"
-  >
-    <div
-      class="components-modal__header"
-    >
-      <div
-        class="components-modal__header-heading-container"
-      >
-        <h1
-          class="components-modal__header-heading"
-          id="components-modal-header-0"
-        >
-          Preferences
-        </h1>
-      </div>
-      <button
-        aria-label="Close dialog"
-        class="components-button 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
-      class="interface-preferences__tabs"
-    >
-      <div
-        aria-orientation="vertical"
-        class="components-tab-panel__tabs"
-        role="tablist"
-      >
-        <button
-          aria-controls="tab-panel-0-general-view"
-          aria-selected="true"
-          class="components-button components-tab-panel__tabs-item is-active"
-          id="tab-panel-0-general"
-          role="tab"
-          type="button"
-        >
-          General
-        </button>
-        <button
-          aria-controls="tab-panel-0-blocks-view"
-          aria-selected="false"
-          class="components-button components-tab-panel__tabs-item"
-          id="tab-panel-0-blocks"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          Blocks
-        </button>
-        <button
-          aria-controls="tab-panel-0-panels-view"
-          aria-selected="false"
-          class="components-button components-tab-panel__tabs-item"
-          id="tab-panel-0-panels"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          Panels
-        </button>
-      </div>
-      <div
-        aria-labelledby="tab-panel-0-general"
-        class="components-tab-panel__tab-content"
-        id="tab-panel-0-general-view"
-        role="tabpanel"
-      >
-        <fieldset
-          class="interface-preferences-modal__section"
-        >
-          <legend
-            class="interface-preferences-modal__section-legend"
-          >
-            <h2
-              class="interface-preferences-modal__section-title"
-            >
-              Publishing
-            </h2>
-            <p
-              class="interface-preferences-modal__section-description"
-            >
-              Change options related to publishing.
-            </p>
-          </legend>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-0__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-0"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-0"
-                  >
-                    Include pre-publish checklist
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-0__help"
-              >
-                Review settings, such as visibility and tags.
-              </p>
-            </div>
-          </div>
-        </fieldset>
-        <fieldset
-          class="interface-preferences-modal__section"
-        >
-          <legend
-            class="interface-preferences-modal__section-legend"
-          >
-            <h2
-              class="interface-preferences-modal__section-title"
-            >
-              Appearance
-            </h2>
-            <p
-              class="interface-preferences-modal__section-description"
-            >
-              Customize options related to the block editor interface and editing flow.
-            </p>
-          </legend>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-1__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-1"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-1"
-                  >
-                    Distraction free
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-1__help"
-              >
-                Reduce visual distractions by hiding the toolbar and other elements to focus on writing.
-              </p>
-            </div>
-          </div>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-2__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-2"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-2"
-                  >
-                    Spotlight mode
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-2__help"
-              >
-                Highlights the current block and fades other content.
-              </p>
-            </div>
-          </div>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-3__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-3"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-3"
-                  >
-                    Show button text labels
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-3__help"
-              >
-                Show text instead of icons on buttons.
-              </p>
-            </div>
-          </div>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-4__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-4"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-4"
-                  >
-                    Always open list view
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-4__help"
-              >
-                Opens the block list view sidebar by default.
-              </p>
-            </div>
-          </div>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-5__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-5"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-5"
-                  >
-                    Use theme styles
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-5__help"
-              >
-                Make the editor look like your theme.
-              </p>
-            </div>
-          </div>
-          <div
-            class="interface-preferences-modal__option"
-          >
-            <div
-              class="components-base-control components-toggle-control emotion-0 emotion-1"
-            >
-              <div
-                class="components-base-control__field emotion-2 emotion-3"
-              >
-                <div
-                  class="components-flex components-h-stack emotion-4 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="HStack"
-                >
-                  <span
-                    class="components-form-toggle"
-                  >
-                    <input
-                      aria-describedby="inspector-toggle-control-6__help"
-                      class="components-form-toggle__input"
-                      id="inspector-toggle-control-6"
-                      type="checkbox"
-                    />
-                    <span
-                      class="components-form-toggle__track"
-                    />
-                    <span
-                      class="components-form-toggle__thumb"
-                    />
-                  </span>
-                  <label
-                    class="components-toggle-control__label"
-                    for="inspector-toggle-control-6"
-                  >
-                    Display block breadcrumbs
-                  </label>
-                </div>
-              </div>
-              <p
-                class="components-base-control__help emotion-6 emotion-7"
-                id="inspector-toggle-control-6__help"
-              >
-                Shows block breadcrumbs at the bottom of the editor.
-              </p>
-            </div>
-          </div>
-        </fieldset>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EditPostPreferencesModal should match snapshot when the modal is active small viewports 1`] = `
-.emotion-0 {
-  overflow-x: hidden;
-}
-
-.emotion-2 {
-  overflow-x: auto;
-  max-height: 100%;
-}
-
-.emotion-3 {
-  background-color: #fff;
-  color: #1e1e1e;
-  position: relative;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  outline: none;
-  box-shadow: none;
-  border-radius: calc(2px - 1px);
-}
-
-.emotion-5 {
-  height: 100%;
-}
-
-.emotion-7 {
-  box-sizing: border-box;
-  height: auto;
-  max-height: 100%;
-  padding: calc(4px * 4);
-}
-
-.emotion-7:first-of-type {
-  border-top-left-radius: calc(2px - 1px);
-  border-top-right-radius: calc(2px - 1px);
-}
-
-.emotion-7:last-of-type {
-  border-bottom-left-radius: calc(2px - 1px);
-  border-bottom-right-radius: calc(2px - 1px);
-}
-
-.emotion-9 {
-  border-radius: 2px;
-}
-
-.emotion-9>*:first-of-type>* {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
-.emotion-9>*:last-of-type>* {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.emotion-11 {
-  width: 100%;
-  display: block;
-}
-
-.emotion-13 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  border: 1px solid transparent;
-  cursor: pointer;
-  background: none;
-  text-align: start;
-  padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
-  width: 100%;
-  display: block;
-  margin: 0;
-  color: inherit;
-  border-radius: 2px;
-}
-
-.emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-}
-
-.emotion-13:focus {
-  background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  outline: 3px solid transparent;
-}
-
-.emotion-15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-15>* {
-  min-width: 0;
-}
-
-.emotion-17 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-.emotion-19 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-47 {
-  background: transparent;
-  display: block;
-  margin: 0!important;
-  pointer-events: none;
-  position: absolute;
-  will-change: box-shadow;
-  border-radius: inherit;
-  bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
-  opacity: 1;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  border-radius: 2px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-47 {
-    transition-duration: 0ms;
-  }
-}
-
-<div
-  aria-labelledby="components-modal-header-1"
-  class="components-modal__frame interface-preferences-modal"
-  role="dialog"
-  tabindex="-1"
->
-  <div
-    class="components-modal__content"
-    role="document"
-  >
-    <div
-      class="components-modal__header"
-    >
-      <div
-        class="components-modal__header-heading-container"
-      >
-        <h1
-          class="components-modal__header-heading"
-          id="components-modal-header-1"
-        >
-          Preferences
-        </h1>
-      </div>
-      <button
-        aria-label="Close dialog"
-        class="components-button 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
-      class="components-navigator-provider interface-preferences__provider emotion-0 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="NavigatorProvider"
-    >
-      <div
-        class="emotion-2 components-navigator-screen"
-        data-wp-c16t="true"
-        data-wp-component="NavigatorScreen"
-        style="opacity: 0; transform: translateX(50px) translateZ(0);"
-      >
-        <div
-          class="components-surface components-card emotion-3 emotion-1"
-          data-wp-c16t="true"
-          data-wp-component="Card"
-        >
-          <div
-            class="emotion-5 emotion-1"
-          >
-            <div
-              class="components-card__body components-card-body emotion-7 emotion-1"
-              data-wp-c16t="true"
-              data-wp-component="CardBody"
-            >
-              <div
-                class="components-item-group emotion-9 emotion-1"
-                data-wp-c16t="true"
-                data-wp-component="ItemGroup"
-                role="list"
-              >
-                <div
-                  class="emotion-11"
-                  role="listitem"
-                >
-                  <button
-                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
-                    data-wp-c16t="true"
-                    data-wp-component="NavigatorButton"
-                    id="general"
-                  >
-                    <div
-                      class="components-flex components-h-stack emotion-15 emotion-1"
-                      data-wp-c16t="true"
-                      data-wp-component="HStack"
-                    >
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <span
-                          class="components-truncate emotion-19 emotion-1"
-                          data-wp-c16t="true"
-                          data-wp-component="Truncate"
-                        >
-                          General
-                        </span>
-                      </div>
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-                <div
-                  class="emotion-11"
-                  role="listitem"
-                >
-                  <button
-                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
-                    data-wp-c16t="true"
-                    data-wp-component="NavigatorButton"
-                    id="blocks"
-                  >
-                    <div
-                      class="components-flex components-h-stack emotion-15 emotion-1"
-                      data-wp-c16t="true"
-                      data-wp-component="HStack"
-                    >
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <span
-                          class="components-truncate emotion-19 emotion-1"
-                          data-wp-c16t="true"
-                          data-wp-component="Truncate"
-                        >
-                          Blocks
-                        </span>
-                      </div>
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-                <div
-                  class="emotion-11"
-                  role="listitem"
-                >
-                  <button
-                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
-                    data-wp-c16t="true"
-                    data-wp-component="NavigatorButton"
-                    id="panels"
-                  >
-                    <div
-                      class="components-flex components-h-stack emotion-15 emotion-1"
-                      data-wp-c16t="true"
-                      data-wp-component="HStack"
-                    >
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <span
-                          class="components-truncate emotion-19 emotion-1"
-                          data-wp-c16t="true"
-                          data-wp-component="Truncate"
-                        >
-                          Panels
-                        </span>
-                      </div>
-                      <div
-                        class="components-flex-item emotion-17 emotion-1"
-                        data-wp-c16t="true"
-                        data-wp-component="FlexItem"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          focusable="false"
-                          height="24"
-                          viewBox="0 0 24 24"
-                          width="24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-hidden="true"
-            class="components-elevation emotion-47 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="Elevation"
-          />
-          <div
-            aria-hidden="true"
-            class="components-elevation emotion-47 emotion-1"
-            data-wp-c16t="true"
-            data-wp-component="Elevation"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
index 087120098c5831..f9fb99199a3197 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
@@ -29,7 +29,7 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -41,53 +41,70 @@ exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-0"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-0"
-          >
-            Custom fields
-          </label>
+              class="components-form-toggle"
+            >
+              <input
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-0"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-0"
+            >
+              Custom fields
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -124,7 +141,7 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -136,133 +153,154 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-3"
-              type="checkbox"
-            />
             <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-3"
-          >
-            Custom fields
-          </label>
+              class="components-form-toggle"
+            >
+              <input
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-3"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-3"
+            >
+              Custom fields
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-4"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-4"
-          >
-            Meta Box 1
-          </label>
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-4"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-4"
+            >
+              Meta Box 1
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-5"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-5"
-          >
-            Meta Box 2
-          </label>
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-5"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-5"
+            >
+              Meta Box 2
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -299,7 +337,7 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  gap: calc(4px * 3);
+  gap: calc(4px * 2);
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -311,94 +349,113 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
   min-width: 0;
 }
 
+.emotion-6 {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 <fieldset
-  class="interface-preferences-modal__section"
+  class="preferences-modal__section"
 >
   <legend
-    class="interface-preferences-modal__section-legend"
+    class="preferences-modal__section-legend"
   >
     <h2
-      class="interface-preferences-modal__section-title"
+      class="preferences-modal__section-title"
     >
       Advanced panels
     </h2>
   </legend>
   <div
-    class="interface-preferences-modal__option"
+    class="preferences-modal__section-content"
   >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-1"
-              type="checkbox"
-            />
             <span
-              class="components-form-toggle__track"
-            />
-            <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-1"
-          >
-            Meta Box 1
-          </label>
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-1"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-1"
+            >
+              Meta Box 1
+            </label>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="interface-preferences-modal__option"
-  >
     <div
-      class="components-base-control components-toggle-control emotion-0 emotion-1"
+      class="preference-base-option"
     >
       <div
-        class="components-base-control__field emotion-2 emotion-3"
+        class="components-base-control components-toggle-control emotion-0 emotion-1"
       >
         <div
-          class="components-flex components-h-stack emotion-4 emotion-5"
-          data-wp-c16t="true"
-          data-wp-component="HStack"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-form-toggle is-checked"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            <input
-              checked=""
-              class="components-form-toggle__input"
-              id="inspector-toggle-control-2"
-              type="checkbox"
-            />
-            <span
-              class="components-form-toggle__track"
-            />
             <span
-              class="components-form-toggle__thumb"
-            />
-          </span>
-          <label
-            class="components-toggle-control__label"
-            for="inspector-toggle-control-2"
-          >
-            Meta Box 2
-          </label>
+              class="components-form-toggle is-checked"
+            >
+              <input
+                checked=""
+                class="components-form-toggle__input"
+                id="inspector-toggle-control-2"
+                type="checkbox"
+              />
+              <span
+                class="components-form-toggle__track"
+              />
+              <span
+                class="components-form-toggle__thumb"
+              />
+            </span>
+            <label
+              class="components-flex-item components-flex-block components-toggle-control__label emotion-6 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="FlexBlock"
+              for="inspector-toggle-control-2"
+            >
+              Meta Box 2
+            </label>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js
new file mode 100644
index 00000000000000..adfa4a3df391da
--- /dev/null
+++ b/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	default as EnableCustomFieldsOption,
+	CustomFieldsConfirmation,
+} from '../enable-custom-fields';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( areCustomFieldsEnabled ) {
+	useSelect.mockImplementation( () => {
+		return areCustomFieldsEnabled;
+	} );
+}
+
+describe( 'EnableCustomFieldsOption', () => {
+	it( 'renders a checked checkbox when custom fields are enabled', () => {
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
+		const user = userEvent.setup();
+
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
+
+		await user.click( screen.getByRole( 'checkbox' ) );
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
+		const user = userEvent.setup();
+
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
+
+		await user.click( screen.getByRole( 'checkbox' ) );
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
+
+describe( 'CustomFieldsConfirmation', () => {
+	it( 'submits the toggle-custom-fields-form', async () => {
+		const user = userEvent.setup();
+		const submit = jest.fn();
+		const setAttribute = jest.fn();
+		const getElementById = jest
+			.spyOn( document, 'getElementById' )
+			.mockImplementation( () => ( {
+				submit,
+				querySelector: () => ( { setAttribute } ),
+			} ) );
+		render( <CustomFieldsConfirmation /> );
+
+		await user.click( screen.getByRole( 'button' ) );
+
+		expect( getElementById ).toHaveBeenCalledWith(
+			'toggle-custom-fields-form'
+		);
+		expect( setAttribute ).toHaveBeenCalledWith(
+			'value',
+			'/' // This is the path returned by getPathAndQueryString.
+		);
+		expect( submit ).toHaveBeenCalled();
+
+		getElementById.mockRestore();
+	} );
+} );
diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js
deleted file mode 100644
index d1ff306488cb9d..00000000000000
--- a/packages/edit-post/src/components/preferences-modal/test/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import EditPostPreferencesModal from '../';
-
-// This allows us to tweak the returned value on each test.
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
-
-describe( 'EditPostPreferencesModal', () => {
-	describe( 'should match snapshot when the modal is active', () => {
-		it( 'large viewports', () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => true );
-			render( <EditPostPreferencesModal /> );
-			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
-		} );
-		it( 'small viewports', () => {
-			useSelect.mockImplementation( () => [ true, true, false ] );
-			useViewportMatch.mockImplementation( () => false );
-			render( <EditPostPreferencesModal /> );
-			expect(
-				screen.getByRole( 'dialog', { name: 'Preferences' } )
-			).toMatchSnapshot();
-		} );
-	} );
-
-	it( 'should not render when the modal is not active', () => {
-		useSelect.mockImplementation( () => [ false, false, false ] );
-		render( <EditPostPreferencesModal /> );
-		expect(
-			screen.queryByRole( 'dialog', { name: 'Preferences' } )
-		).not.toBeInTheDocument();
-	} );
-} );
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
deleted file mode 100644
index e87488ffa6e656..00000000000000
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function InserterSidebar() {
-	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { isFeatureActive, __experimentalGetInsertionPoint } =
-			select( editPostStore );
-		return {
-			insertionPoint: __experimentalGetInsertionPoint(),
-			showMostUsedBlocks: isFeatureActive( 'mostUsedBlocks' ),
-		};
-	}, [] );
-	const { setIsInserterOpened } = useDispatch( editPostStore );
-
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
-	} );
-
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
-	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-post-editor__inserter-panel"
-		>
-			<TagName className="edit-post-editor__inserter-panel-header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="edit-post-editor__inserter-panel-content">
-				<Library
-					showMostUsedBlocks={ showMostUsedBlocks }
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobileViewport }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					ref={ libraryRef }
-				/>
-			</div>
-		</div>
-	);
-}
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
deleted file mode 100644
index ed15a7eaa5e596..00000000000000
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	DocumentOutline,
-	WordCount,
-	TimeToRead,
-	CharacterCount,
-} from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import {
-	__experimentalText as Text,
-	Path,
-	SVG,
-	Line,
-	Rect,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-function EmptyOutlineIllustration() {
-	return (
-		<SVG
-			width="138"
-			height="148"
-			viewBox="0 0 138 148"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<Rect width="138" height="148" rx="4" fill="#F0F6FC" />
-			<Line x1="44" y1="28" x2="24" y2="28" stroke="#DDDDDD" />
-			<Rect x="48" y="16" width="27" height="23" rx="4" fill="#DDDDDD" />
-			<Path
-				d="M54.7585 32V23.2727H56.6037V26.8736H60.3494V23.2727H62.1903V32H60.3494V28.3949H56.6037V32H54.7585ZM67.4574 23.2727V32H65.6122V25.0241H65.5611L63.5625 26.277V24.6406L65.723 23.2727H67.4574Z"
-				fill="black"
-			/>
-			<Line x1="55" y1="59" x2="24" y2="59" stroke="#DDDDDD" />
-			<Rect x="59" y="47" width="29" height="23" rx="4" fill="#DDDDDD" />
-			<Path
-				d="M65.7585 63V54.2727H67.6037V57.8736H71.3494V54.2727H73.1903V63H71.3494V59.3949H67.6037V63H65.7585ZM74.6605 63V61.6705L77.767 58.794C78.0313 58.5384 78.2528 58.3082 78.4318 58.1037C78.6136 57.8991 78.7514 57.6989 78.8452 57.5028C78.9389 57.304 78.9858 57.0895 78.9858 56.8594C78.9858 56.6037 78.9276 56.3835 78.8111 56.1989C78.6946 56.0114 78.5355 55.8679 78.3338 55.7685C78.1321 55.6662 77.9034 55.6151 77.6477 55.6151C77.3807 55.6151 77.1477 55.669 76.9489 55.777C76.75 55.8849 76.5966 56.0398 76.4886 56.2415C76.3807 56.4432 76.3267 56.6832 76.3267 56.9616H74.5753C74.5753 56.3906 74.7045 55.8949 74.9631 55.4744C75.2216 55.054 75.5838 54.7287 76.0497 54.4986C76.5156 54.2685 77.0526 54.1534 77.6605 54.1534C78.2855 54.1534 78.8295 54.2642 79.2926 54.4858C79.7585 54.7045 80.1207 55.0085 80.3793 55.3977C80.6378 55.7869 80.767 56.233 80.767 56.7358C80.767 57.0653 80.7017 57.3906 80.571 57.7116C80.4432 58.0327 80.2145 58.3892 79.8849 58.7812C79.5554 59.1705 79.0909 59.6378 78.4915 60.1832L77.2173 61.4318V61.4915H80.8821V63H74.6605Z"
-				fill="black"
-			/>
-			<Line x1="80" y1="90" x2="24" y2="90" stroke="#DDDDDD" />
-			<Rect x="84" y="78" width="30" height="23" rx="4" fill="#F0B849" />
-			<Path
-				d="M90.7585 94V85.2727H92.6037V88.8736H96.3494V85.2727H98.1903V94H96.3494V90.3949H92.6037V94H90.7585ZM99.5284 92.4659V91.0128L103.172 85.2727H104.425V87.2841H103.683L101.386 90.919V90.9872H106.564V92.4659H99.5284ZM103.717 94V92.0227L103.751 91.3793V85.2727H105.482V94H103.717Z"
-				fill="black"
-			/>
-			<Line x1="66" y1="121" x2="24" y2="121" stroke="#DDDDDD" />
-			<Rect x="70" y="109" width="29" height="23" rx="4" fill="#DDDDDD" />
-			<Path
-				d="M76.7585 125V116.273H78.6037V119.874H82.3494V116.273H84.1903V125H82.3494V121.395H78.6037V125H76.7585ZM88.8864 125.119C88.25 125.119 87.6832 125.01 87.1861 124.791C86.6918 124.57 86.3011 124.266 86.0142 123.879C85.7301 123.49 85.5838 123.041 85.5753 122.533H87.4332C87.4446 122.746 87.5142 122.933 87.642 123.095C87.7727 123.254 87.946 123.378 88.1619 123.466C88.3778 123.554 88.6207 123.598 88.8906 123.598C89.1719 123.598 89.4205 123.548 89.6364 123.449C89.8523 123.349 90.0213 123.212 90.1435 123.036C90.2656 122.859 90.3267 122.656 90.3267 122.426C90.3267 122.193 90.2614 121.987 90.1307 121.808C90.0028 121.626 89.8182 121.484 89.5767 121.382C89.3381 121.28 89.054 121.229 88.7244 121.229H87.9105V119.874H88.7244C89.0028 119.874 89.2486 119.825 89.4616 119.729C89.6776 119.632 89.8452 119.499 89.9645 119.328C90.0838 119.155 90.1435 118.953 90.1435 118.723C90.1435 118.504 90.0909 118.312 89.9858 118.148C89.8835 117.98 89.7386 117.849 89.5511 117.756C89.3665 117.662 89.1506 117.615 88.9034 117.615C88.6534 117.615 88.4247 117.661 88.2173 117.751C88.0099 117.839 87.8438 117.966 87.7188 118.131C87.5938 118.295 87.527 118.489 87.5185 118.71H85.75C85.7585 118.207 85.902 117.764 86.1804 117.381C86.4588 116.997 86.8338 116.697 87.3054 116.482C87.7798 116.263 88.3153 116.153 88.9119 116.153C89.5142 116.153 90.0412 116.263 90.4929 116.482C90.9446 116.7 91.2955 116.996 91.5455 117.368C91.7983 117.737 91.9233 118.152 91.9205 118.612C91.9233 119.101 91.7713 119.509 91.4645 119.835C91.1605 120.162 90.7642 120.369 90.2756 120.457V120.526C90.9176 120.608 91.4063 120.831 91.7415 121.195C92.0795 121.555 92.2472 122.007 92.2443 122.55C92.2472 123.047 92.1037 123.489 91.8139 123.875C91.527 124.261 91.1307 124.565 90.625 124.787C90.1193 125.009 89.5398 125.119 88.8864 125.119Z"
-				fill="black"
-			/>
-		</SVG>
-	);
-}
-
-export default function ListViewOutline() {
-	const { headingCount } = useSelect( ( select ) => {
-		const { getGlobalBlockCount } = select( blockEditorStore );
-		return {
-			headingCount: getGlobalBlockCount( 'core/heading' ),
-		};
-	}, [] );
-	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>
-					<Text>
-						<CharacterCount />
-					</Text>
-				</div>
-				<div>
-					<Text>{ __( 'Words:' ) }</Text>
-					<WordCount />
-				</div>
-				<div>
-					<Text>{ __( 'Time to read:' ) }</Text>
-					<TimeToRead />
-				</div>
-			</div>
-		</>
-	);
-}
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
deleted file mode 100644
index 447fcbd1a70db2..00000000000000
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { ESCAPE } from '@wordpress/keycodes';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-import ListViewOutline from './list-view-outline';
-
-export default function ListViewSidebar() {
-	const { setIsListViewOpened } = useDispatch( editPostStore );
-
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
-		}
-	}
-
-	const [ tab, setTab ] = useState( 'list-view' );
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			aria-label={ __( 'Document Overview' ) }
-			className="edit-post-editor__document-overview-panel"
-			onKeyDown={ closeOnEscape }
-		>
-			<div
-				className="edit-post-editor__document-overview-panel-header components-panel__header edit-post-sidebar__panel-tabs"
-				ref={ headerFocusReturnRef }
-			>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close Document Overview Sidebar' ) }
-					onClick={ () => setIsListViewOpened( false ) }
-				/>
-				<ul>
-					<li>
-						<Button
-							onClick={ () => {
-								setTab( 'list-view' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'list-view' }
-							) }
-							aria-current={ tab === 'list-view' }
-						>
-							{ __( 'List View' ) }
-						</Button>
-					</li>
-					<li>
-						<Button
-							onClick={ () => {
-								setTab( 'outline' );
-							} }
-							className={ classnames(
-								'edit-post-sidebar__panel-tab',
-								{ 'is-active': tab === 'outline' }
-							) }
-							aria-current={ tab === 'outline' }
-						>
-							{ __( 'Outline' ) }
-						</Button>
-					</li>
-				</ul>
-			</div>
-			<div
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-				] ) }
-				className="edit-post-editor__list-view-container"
-			>
-				{ tab === 'list-view' && (
-					<div className="edit-post-editor__list-view-panel-content">
-						<ListView />
-					</div>
-				) }
-				{ tab === 'outline' && <ListViewOutline /> }
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
deleted file mode 100644
index 01b17beb4c8b82..00000000000000
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.edit-post-editor__inserter-panel,
-.edit-post-editor__document-overview-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.edit-post-editor__document-overview-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	// Width of the list view panel.
-	width: 350px;
-
-	.edit-post-sidebar__panel-tabs {
-		flex-direction: row-reverse;
-	}
-}
-
-.edit-post-editor__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.edit-post-editor__inserter-panel-content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-	@include break-medium() {
-		height: 100%;
-	}
-}
-
-.edit-post-editor__document-overview-panel-header {
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-	ul {
-		width: calc(100% - #{ $grid-unit-50 });
-	}
-	li {
-		width: 50%;
-		button {
-			width: 100%;
-			text-align: initial;
-		}
-	}
-	li:only-child {
-		width: 100%;
-	}
-}
-
-.edit-post-editor__list-view-panel-content,
-.edit-post-editor__list-view-container > .document-outline,
-.edit-post-editor__list-view-empty-headings {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: 100%;
-	// The table cells use an extra pixels of space left and right. We compensate for that here.
-	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
-}
-
-.edit-post-editor__list-view-empty-headings {
-	& > svg {
-		margin-top: $grid-unit-30 + $grid-unit-05;
-	}
-	& > p {
-		padding-left: $grid-unit-40;
-		padding-right: $grid-unit-40;
-	}
-	text-align: center;
-	color: $gray-700;
-}
-
-.edit-post-editor__list-view-overview {
-	& > 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;
-		}
-	}
-	// Height of the overview container.
-	height: 72px;
-}
-
-.edit-post-editor__list-view-container {
-	display: flex;
-	flex-direction: column;
-	height: calc(100% - #{$grid-unit-60});
-}
diff --git a/packages/edit-post/src/components/sidebar/discussion-panel/index.js b/packages/edit-post/src/components/sidebar/discussion-panel/index.js
deleted file mode 100644
index f6f416ddebd8ce..00000000000000
--- a/packages/edit-post/src/components/sidebar/discussion-panel/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import {
-	PostComments,
-	PostPingbacks,
-	PostTypeSupportCheck,
-} from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'discussion-panel';
-
-function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	return (
-		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
-			<PanelBody
-				title={ __( 'Discussion' ) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostTypeSupportCheck supportKeys="comments">
-					<PanelRow>
-						<PostComments />
-					</PanelRow>
-				</PostTypeSupportCheck>
-
-				<PostTypeSupportCheck supportKeys="trackbacks">
-					<PanelRow>
-						<PostPingbacks />
-					</PanelRow>
-				</PostTypeSupportCheck>
-			</PanelBody>
-		</PostTypeSupportCheck>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( DiscussionPanel );
diff --git a/packages/edit-post/src/components/sidebar/featured-image/index.js b/packages/edit-post/src/components/sidebar/featured-image/index.js
deleted file mode 100644
index 4463bf8e51404a..00000000000000
--- a/packages/edit-post/src/components/sidebar/featured-image/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import {
-	PostFeaturedImage,
-	PostFeaturedImageCheck,
-	store as editorStore,
-} from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'featured-image';
-
-function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	return (
-		<PostFeaturedImageCheck>
-			<PanelBody
-				title={ get(
-					postType,
-					[ 'labels', 'featured_image' ],
-					__( 'Featured image' )
-				) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostFeaturedImage />
-			</PanelBody>
-		</PostFeaturedImageCheck>
-	);
-}
-
-const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( editorStore );
-	const { getPostType } = select( coreStore );
-	const { isEditorPanelEnabled, isEditorPanelOpened } =
-		select( editPostStore );
-
-	return {
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-		isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-		isOpened: isEditorPanelOpened( PANEL_NAME ),
-	};
-} );
-
-const applyWithDispatch = withDispatch( ( dispatch ) => {
-	const { toggleEditorPanelOpened } = dispatch( editPostStore );
-
-	return {
-		onTogglePanel: ( ...args ) =>
-			toggleEditorPanelOpened( PANEL_NAME, ...args ),
-	};
-} );
-
-export default compose( applyWithSelect, applyWithDispatch )( FeaturedImage );
diff --git a/packages/edit-post/src/components/sidebar/last-revision/index.js b/packages/edit-post/src/components/sidebar/last-revision/index.js
deleted file mode 100644
index 354d1104302889..00000000000000
--- a/packages/edit-post/src/components/sidebar/last-revision/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelBody } from '@wordpress/components';
-import { PostLastRevision, PostLastRevisionCheck } from '@wordpress/editor';
-
-function LastRevision() {
-	return (
-		<PostLastRevisionCheck>
-			<PanelBody className="edit-post-last-revision__panel">
-				<PostLastRevision />
-			</PanelBody>
-		</PostLastRevisionCheck>
-	);
-}
-
-export default LastRevision;
diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss
deleted file mode 100644
index c3068746b419bb..00000000000000
--- a/packages/edit-post/src/components/sidebar/last-revision/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Needs specificity, because this panel is just a button
-.components-panel__body.is-opened.edit-post-last-revision__panel {
-	padding: 0;
-	height: $grid-unit-60;
-}
-
-.editor-post-last-revision__title.components-button {
-	padding: $grid-unit-20;
-}
diff --git a/packages/edit-post/src/components/sidebar/page-attributes/index.js b/packages/edit-post/src/components/sidebar/page-attributes/index.js
deleted file mode 100644
index 84980e99aa3b99..00000000000000
--- a/packages/edit-post/src/components/sidebar/page-attributes/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import {
-	store as editorStore,
-	PageAttributesCheck,
-	PageAttributesOrder,
-	PageAttributesParent,
-} from '@wordpress/editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'page-attributes';
-
-export function PageAttributes() {
-	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
-		const { isEditorPanelEnabled, isEditorPanelOpened } =
-			select( editPostStore );
-		const { getPostType } = select( coreStore );
-		return {
-			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-			postType: getPostType( getEditedPostAttribute( 'type' ) ),
-		};
-	}, [] );
-
-	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
-
-	if ( ! isEnabled || ! postType ) {
-		return null;
-	}
-
-	const onTogglePanel = ( ...args ) =>
-		toggleEditorPanelOpened( PANEL_NAME, ...args );
-
-	return (
-		<PageAttributesCheck>
-			<PanelBody
-				title={ get(
-					postType,
-					[ 'labels', 'attributes' ],
-					__( 'Page attributes' )
-				) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PageAttributesParent />
-				<PanelRow>
-					<PageAttributesOrder />
-				</PanelRow>
-			</PanelBody>
-		</PageAttributesCheck>
-	);
-}
-
-export default PageAttributes;
diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
deleted file mode 100644
index a875c1b19e503d..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Defines as extensibility slot for the Settings sidebar
- */
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-import { withDispatch, withSelect } from '@wordpress/data';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
-import { store as editPostStore } from '../../../store';
-
-export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
-
-const PluginDocumentSettingFill = ( {
-	isEnabled,
-	panelName,
-	opened,
-	onToggle,
-	className,
-	title,
-	icon,
-	children,
-} ) => {
-	return (
-		<>
-			<EnablePluginDocumentSettingPanelOption
-				label={ title }
-				panelName={ panelName }
-			/>
-			<Fill>
-				{ isEnabled && (
-					<PanelBody
-						className={ className }
-						title={ title }
-						icon={ icon }
-						opened={ opened }
-						onToggle={ onToggle }
-					>
-						{ children }
-					</PanelBody>
-				) }
-			</Fill>
-		</>
-	);
-};
-
-/**
- * Renders items below the Status & Availability panel in the Document Sidebar.
- *
- * @param {Object}                props                                 Component properties.
- * @param {string}                [props.name]                          The machine-friendly name for the panel.
- * @param {string}                [props.className]                     An optional class name added to the row.
- * @param {string}                [props.title]                         The title of the panel
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var el = wp.element.createElement;
- * var __ = wp.i18n.__;
- * var registerPlugin = wp.plugins.registerPlugin;
- * var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
- *
- * function MyDocumentSettingPlugin() {
- * 	return el(
- * 		PluginDocumentSettingPanel,
- * 		{
- * 			className: 'my-document-setting-plugin',
- * 			title: 'My Panel',
- * 		},
- * 		__( 'My Document Setting Panel' )
- * 	);
- * }
- *
- * registerPlugin( 'my-document-setting-plugin', {
- * 		render: MyDocumentSettingPlugin
- * } );
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { registerPlugin } from '@wordpress/plugins';
- * import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
- *
- * const MyDocumentSettingTest = () => (
- * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel">
- *			<p>My Document Setting Panel</p>
- *		</PluginDocumentSettingPanel>
- *	);
- *
- *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-const PluginDocumentSettingPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		if ( undefined === ownProps.name ) {
-			warning( 'PluginDocumentSettingPanel requires a name property.' );
-		}
-		return {
-			panelName: `${ context.name }/${ ownProps.name }`,
-		};
-	} ),
-	withSelect( ( select, { panelName } ) => {
-		return {
-			opened: select( editPostStore ).isEditorPanelOpened( panelName ),
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onToggle() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				panelName
-			);
-		},
-	} ) )
-)( PluginDocumentSettingFill );
-
-PluginDocumentSettingPanel.Slot = Slot;
-
-export default PluginDocumentSettingPanel;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
deleted file mode 100644
index aa697e32cf96ec..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-import { createSlotFill, PanelBody } from '@wordpress/components';
-
-const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
-
-const PluginPostPublishPanelFill = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => (
-	<Fill>
-		<PanelBody
-			className={ className }
-			initialOpen={ initialOpen || ! title }
-			title={ title }
-			icon={ icon }
-		>
-			{ children }
-		</PanelBody>
-	</Fill>
-);
-/**
- * Renders provided content to the post-publish panel in the publish flow
- * (side panel that opens after a user publishes the post).
- *
- * @param {Object}                props                                 Component properties.
- * @param {string}                [props.className]                     An optional class name added to the panel.
- * @param {string}                [props.title]                         Title displayed at the top of the panel.
- * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
- *
- * function MyPluginPostPublishPanel() {
- * 	return wp.element.createElement(
- * 		PluginPostPublishPanel,
- * 		{
- * 			className: 'my-plugin-post-publish-panel',
- * 			title: __( 'My panel title' ),
- * 			initialOpen: true,
- * 		},
- * 		__( 'My panel content' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPostPublishPanel } from '@wordpress/edit-post';
- *
- * const MyPluginPostPublishPanel = () => (
- * 	<PluginPostPublishPanel
- * 		className="my-plugin-post-publish-panel"
- * 		title={ __( 'My panel title' ) }
- * 		initialOpen={ true }
- * 	>
- *         { __( 'My panel content' ) }
- * 	</PluginPostPublishPanel>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-
-const PluginPostPublishPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			icon: ownProps.icon || context.icon,
-		};
-	} )
-)( PluginPostPublishPanelFill );
-
-PluginPostPublishPanel.Slot = Slot;
-
-export default PluginPostPublishPanel;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
deleted file mode 100644
index 5a057456d06aca..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PluginPostPublishPanel renders fill properly 1`] = `
-<div>
-  <div
-    class="components-panel__body my-plugin-post-publish-panel is-opened"
-  >
-    <h2
-      class="components-panel__body-title"
-    >
-      <button
-        aria-expanded="true"
-        class="components-button components-panel__body-toggle"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-        >
-          <svg
-            aria-hidden="true"
-            class="components-panel__arrow"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
-            />
-          </svg>
-        </span>
-        My panel title
-      </button>
-    </h2>
-    My panel content
-  </div>
-</div>
-`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js
deleted file mode 100644
index 7f650eeff3818c..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-publish-panel/test/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PluginPostPublishPanel from '../';
-
-describe( 'PluginPostPublishPanel', () => {
-	test( 'renders fill properly', () => {
-		const { container } = render(
-			<SlotFillProvider>
-				<PluginPostPublishPanel
-					className="my-plugin-post-publish-panel"
-					title="My panel title"
-					initialOpen={ true }
-				>
-					My panel content
-				</PluginPostPublishPanel>
-				<PluginPostPublishPanel.Slot />
-			</SlotFillProvider>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
deleted file mode 100644
index 0e79742f3048d6..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Defines as extensibility slot for the Summary panel.
- */
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelRow } from '@wordpress/components';
-
-export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
-
-/**
- * Renders a row in the Summary panel of the Document sidebar.
- * It should be noted that this is named and implemented around the function it serves
- * and not its location, which may change in future iterations.
- *
- * @param {Object}    props             Component properties.
- * @param {string}    [props.className] An optional class name added to the row.
- * @param {WPElement} props.children    Children to be rendered.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
- *
- * function MyPluginPostStatusInfo() {
- * 	return wp.element.createElement(
- * 		PluginPostStatusInfo,
- * 		{
- * 			className: 'my-plugin-post-status-info',
- * 		},
- * 		__( 'My post status info' )
- * 	)
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPostStatusInfo } from '@wordpress/edit-post';
- *
- * const MyPluginPostStatusInfo = () => (
- * 	<PluginPostStatusInfo
- * 		className="my-plugin-post-status-info"
- * 	>
- * 		{ __( 'My post status info' ) }
- * 	</PluginPostStatusInfo>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-const PluginPostStatusInfo = ( { children, className } ) => (
-	<Fill>
-		<PanelRow className={ className }>{ children }</PanelRow>
-	</Fill>
-);
-
-PluginPostStatusInfo.Slot = Slot;
-
-export default PluginPostStatusInfo;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
deleted file mode 100644
index f4861349d4434e..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PluginPostStatusInfo renders fill properly 1`] = `
-<div>
-  <div
-    class="components-panel__row my-plugin-post-status-info"
-  >
-    My plugin post status info
-  </div>
-</div>
-`;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js
deleted file mode 100644
index f989a162a559fa..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { SlotFillProvider } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PluginPostStatusInfo from '../';
-
-describe( 'PluginPostStatusInfo', () => {
-	test( 'renders fill properly', () => {
-		const { container } = render(
-			<SlotFillProvider>
-				<PluginPostStatusInfo className="my-plugin-post-status-info">
-					My plugin post status info
-				</PluginPostStatusInfo>
-				<PluginPostStatusInfo.Slot />
-			</SlotFillProvider>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
deleted file mode 100644
index b5912df3d498c9..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelBody } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withPluginContext } from '@wordpress/plugins';
-const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
-
-const PluginPrePublishPanelFill = ( {
-	children,
-	className,
-	title,
-	initialOpen = false,
-	icon,
-} ) => (
-	<Fill>
-		<PanelBody
-			className={ className }
-			initialOpen={ initialOpen || ! title }
-			title={ title }
-			icon={ icon }
-		>
-			{ children }
-		</PanelBody>
-	</Fill>
-);
-
-/**
- * Renders provided content to the pre-publish side panel in the publish flow
- * (side panel that opens when a user first pushes "Publish" from the main editor).
- *
- * @param {Object}                props                                 Component props.
- * @param {string}                [props.className]                     An optional class name added to the panel.
- * @param {string}                [props.title]                         Title displayed at the top of the panel.
- * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened.
- *                                                                      When no title is provided it is always opened.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/)
- *                                                                      icon slug string, or an SVG WP element, to be rendered when
- *                                                                      the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
- *
- * function MyPluginPrePublishPanel() {
- * 	return wp.element.createElement(
- * 		PluginPrePublishPanel,
- * 		{
- * 			className: 'my-plugin-pre-publish-panel',
- * 			title: __( 'My panel title' ),
- * 			initialOpen: true,
- * 		},
- * 		__( 'My panel content' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginPrePublishPanel } from '@wordpress/edit-post';
- *
- * const MyPluginPrePublishPanel = () => (
- * 	<PluginPrePublishPanel
- * 		className="my-plugin-pre-publish-panel"
- * 		title={ __( 'My panel title' ) }
- * 		initialOpen={ true }
- * 	>
- * 	    { __( 'My panel content' ) }
- * 	</PluginPrePublishPanel>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-const PluginPrePublishPanel = compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			icon: ownProps.icon || context.icon,
-		};
-	} )
-)( PluginPrePublishPanelFill );
-
-PluginPrePublishPanel.Slot = Slot;
-
-export default PluginPrePublishPanel;
diff --git a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
deleted file mode 100644
index c6b09f0343a00b..00000000000000
--- a/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
- * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
- * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
- *
- * ```js
- * wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
- * ```
- *
- * @see PluginSidebarMoreMenuItem
- *
- * @param {Object}                props                                 Element props.
- * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
- * @param {string}                [props.className]                     An optional class name added to the sidebar body.
- * @param {string}                props.title                           Title displayed at the top of the sidebar.
- * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var el = wp.element.createElement;
- * var PanelBody = wp.components.PanelBody;
- * var PluginSidebar = wp.editPost.PluginSidebar;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function MyPluginSidebar() {
- * 	return el(
- * 			PluginSidebar,
- * 			{
- * 				name: 'my-sidebar',
- * 				title: 'My sidebar title',
- * 				icon: moreIcon,
- * 			},
- * 			el(
- * 				PanelBody,
- * 				{},
- * 				__( 'My sidebar content' )
- * 			)
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PanelBody } from '@wordpress/components';
- * import { PluginSidebar } from '@wordpress/edit-post';
- * import { more } from '@wordpress/icons';
- *
- * const MyPluginSidebar = () => (
- * 	<PluginSidebar
- * 		name="my-sidebar"
- * 		title="My sidebar title"
- * 		icon={ more }
- * 	>
- * 		<PanelBody>
- * 			{ __( 'My sidebar content' ) }
- * 		</PanelBody>
- * 	</PluginSidebar>
- * );
- * ```
- */
-export default function PluginSidebarEditPost( { className, ...props } ) {
-	const { postTitle, shortcut, showIconLabels } = useSelect( ( select ) => {
-		return {
-			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			showIconLabels:
-				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
-		};
-	}, [] );
-	return (
-		<ComplementaryArea
-			panelClassName={ className }
-			className="edit-post-sidebar"
-			smallScreenTitle={ postTitle || __( '(no title)' ) }
-			scope="core/edit-post"
-			toggleShortcut={ shortcut }
-			showIconLabels={ showIconLabels }
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-author/index.js b/packages/edit-post/src/components/sidebar/post-author/index.js
deleted file mode 100644
index 8f5eca9aea46b4..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-author/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import {
-	PostAuthor as PostAuthorForm,
-	PostAuthorCheck,
-} from '@wordpress/editor';
-
-export function PostAuthor() {
-	return (
-		<PostAuthorCheck>
-			<PanelRow className="edit-post-post-author">
-				<PostAuthorForm />
-			</PanelRow>
-		</PostAuthorCheck>
-	);
-}
-
-export default PostAuthor;
diff --git a/packages/edit-post/src/components/sidebar/post-author/style.scss b/packages/edit-post/src/components/sidebar/post-author/style.scss
deleted file mode 100644
index bfc80bdd2cf702..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-author/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-author {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
deleted file mode 100644
index b2d56808d64c79..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-excerpt/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import {
-	PostExcerpt as PostExcerptForm,
-	PostExcerptCheck,
-} from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-excerpt';
-
-function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	return (
-		<PostExcerptCheck>
-			<PanelBody
-				title={ __( 'Excerpt' ) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostExcerptForm />
-			</PanelBody>
-		</PostExcerptCheck>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled:
-				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostExcerpt );
diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/edit-post/src/components/sidebar/post-format/index.js
deleted file mode 100644
index 5127fa0930f3fc..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-format/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import {
-	PostFormat as PostFormatForm,
-	PostFormatCheck,
-} from '@wordpress/editor';
-
-export function PostFormat() {
-	return (
-		<PostFormatCheck>
-			<PanelRow className="edit-post-post-format">
-				<PostFormatForm />
-			</PanelRow>
-		</PostFormatCheck>
-	);
-}
-
-export default PostFormat;
diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss
deleted file mode 100644
index 53d68ea219743d..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-format/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-format {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js
deleted file mode 100644
index 739aff6034b509..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-pending-status/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import {
-	PostPendingStatus as PostPendingStatusForm,
-	PostPendingStatusCheck,
-} from '@wordpress/editor';
-
-export function PostPendingStatus() {
-	return (
-		<PostPendingStatusCheck>
-			<PanelRow>
-				<PostPendingStatusForm />
-			</PanelRow>
-		</PostPendingStatusCheck>
-	);
-}
-
-export default PostPendingStatus;
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js
deleted file mode 100644
index 8ef3291e6096c7..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-schedule/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	PostSchedule as PostScheduleForm,
-	PostScheduleCheck,
-	usePostScheduleLabel,
-} from '@wordpress/editor';
-
-export default function PostSchedule() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<PostScheduleCheck>
-			<PanelRow
-				className="edit-post-post-schedule"
-				ref={ setPopoverAnchor }
-			>
-				<span>{ __( 'Publish' ) }</span>
-				<Dropdown
-					popoverProps={ popoverProps }
-					position="bottom left"
-					contentClassName="edit-post-post-schedule__dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostScheduleToggle
-							isOpen={ isOpen }
-							onClick={ onToggle }
-						/>
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostScheduleForm onClose={ onClose } />
-					) }
-				/>
-			</PanelRow>
-		</PostScheduleCheck>
-	);
-}
-
-function PostScheduleToggle( { isOpen, onClick } ) {
-	const label = usePostScheduleLabel();
-	const fullLabel = usePostScheduleLabel( { full: true } );
-	return (
-		<Button
-			className="edit-post-post-schedule__toggle"
-			variant="tertiary"
-			label={ fullLabel }
-			showTooltip
-			aria-expanded={ isOpen }
-			// translators: %s: Current post date.
-			aria-label={ sprintf( __( 'Change date: %s' ), label ) }
-			onClick={ onClick }
-		>
-			{ label }
-		</Button>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss
deleted file mode 100644
index e1d6c4cd09f950..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.edit-post-post-schedule {
-	width: 100%;
-	position: relative;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-		flex-shrink: 0;
-	}
-}
-
-.components-button.edit-post-post-schedule__toggle {
-	text-align: left;
-	white-space: normal;
-	height: auto;
-
-	// This span is added by the Popover in Tooltip when no anchor is
-	// provided. We set its width to 0 so that it does not cause the button text
-	// to wrap to a new line when displaying the tooltip. A better fix would be
-	// to pass anchorRef and avoid the need for a span alltogether, which is
-	// what this PR allows us to do:
-	// https://github.com/WordPress/gutenberg/pull/41268.
-	span {
-		width: 0;
-	}
-}
-
-.edit-post-post-schedule__dialog .block-editor-publish-date-time-picker {
-	margin: $grid-unit-10;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/edit-post/src/components/sidebar/post-slug/index.js
deleted file mode 100644
index 8b52f94bd33f5d..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-slug/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
-
-export function PostSlug() {
-	return (
-		<PostSlugCheck>
-			<PanelRow className="edit-post-post-slug">
-				<PostSlugForm />
-			</PanelRow>
-		</PostSlugCheck>
-	);
-}
-
-export default PostSlug;
diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/edit-post/src/components/sidebar/post-slug/style.scss
deleted file mode 100644
index 067dfcb08d6f06..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-slug/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-slug {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
deleted file mode 100644
index 7470cf76ce7ddf..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-status/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import PostVisibility from '../post-visibility';
-import PostTrash from '../post-trash';
-import PostSchedule from '../post-schedule';
-import PostSticky from '../post-sticky';
-import PostAuthor from '../post-author';
-import PostSlug from '../post-slug';
-import PostFormat from '../post-format';
-import PostPendingStatus from '../post-pending-status';
-import PluginPostStatusInfo from '../plugin-post-status-info';
-import { store as editPostStore } from '../../../store';
-import PostTemplate from '../post-template';
-import PostURL from '../post-url';
-
-/**
- * Module Constants
- */
-const PANEL_NAME = 'post-status';
-
-function PostStatus( { isOpened, onTogglePanel } ) {
-	return (
-		<PanelBody
-			className="edit-post-post-status"
-			title={ __( 'Summary' ) }
-			opened={ isOpened }
-			onToggle={ onTogglePanel }
-		>
-			<PluginPostStatusInfo.Slot>
-				{ ( fills ) => (
-					<>
-						<PostVisibility />
-						<PostSchedule />
-						<PostURL />
-						<PostTemplate />
-						<PostSticky />
-						<PostPendingStatus />
-						<PostFormat />
-						<PostSlug />
-						<PostAuthor />
-						{ fills }
-						<PostTrash />
-					</>
-				) }
-			</PluginPostStatusInfo.Slot>
-		</PanelBody>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editPostStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostStatus );
diff --git a/packages/edit-post/src/components/sidebar/post-status/style.scss b/packages/edit-post/src/components/sidebar/post-status/style.scss
deleted file mode 100644
index 381c0744967962..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-status/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
-	margin-top: 15px;
-	width: 100%;
-	text-align: center;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js
deleted file mode 100644
index 971428fcd23181..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-sticky/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import {
-	PostSticky as PostStickyForm,
-	PostStickyCheck,
-} from '@wordpress/editor';
-
-export function PostSticky() {
-	return (
-		<PostStickyCheck>
-			<PanelRow>
-				<PostStickyForm />
-			</PanelRow>
-		</PostStickyCheck>
-	);
-}
-
-export default PostSticky;
diff --git a/packages/edit-post/src/components/sidebar/post-taxonomies/index.js b/packages/edit-post/src/components/sidebar/post-taxonomies/index.js
deleted file mode 100644
index d44815ee98b71b..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-taxonomies/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostTaxonomies as PostTaxonomiesForm,
-	PostTaxonomiesCheck,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import TaxonomyPanel from './taxonomy-panel';
-
-function PostTaxonomies() {
-	return (
-		<PostTaxonomiesCheck>
-			<PostTaxonomiesForm
-				taxonomyWrapper={ ( content, taxonomy ) => {
-					return (
-						<TaxonomyPanel taxonomy={ taxonomy }>
-							{ content }
-						</TaxonomyPanel>
-					);
-				} }
-			/>
-		</PostTaxonomiesCheck>
-	);
-}
-
-export default PostTaxonomies;
diff --git a/packages/edit-post/src/components/sidebar/post-taxonomies/taxonomy-panel.js b/packages/edit-post/src/components/sidebar/post-taxonomies/taxonomy-panel.js
deleted file mode 100644
index aaa92ae63bcfba..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-taxonomies/taxonomy-panel.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { PanelBody } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-function TaxonomyPanel( {
-	isEnabled,
-	taxonomy,
-	isOpened,
-	onTogglePanel,
-	children,
-} ) {
-	if ( ! isEnabled ) {
-		return null;
-	}
-
-	const taxonomyMenuName = get( taxonomy, [ 'labels', 'menu_name' ] );
-	if ( ! taxonomyMenuName ) {
-		return null;
-	}
-
-	return (
-		<PanelBody
-			title={ taxonomyMenuName }
-			opened={ isOpened }
-			onToggle={ onTogglePanel }
-		>
-			{ children }
-		</PanelBody>
-	);
-}
-
-export default compose(
-	withSelect( ( select, ownProps ) => {
-		const slug = get( ownProps.taxonomy, [ 'slug' ] );
-		const panelName = slug ? `taxonomy-panel-${ slug }` : '';
-		return {
-			panelName,
-			isEnabled: slug
-				? select( editPostStore ).isEditorPanelEnabled( panelName )
-				: false,
-			isOpened: slug
-				? select( editPostStore ).isEditorPanelOpened( panelName )
-				: false,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		onTogglePanel: () => {
-			dispatch( editPostStore ).toggleEditorPanelOpened(
-				ownProps.panelName
-			);
-		},
-	} ) )
-)( TaxonomyPanel );
diff --git a/packages/edit-post/src/components/sidebar/post-template/create-modal.js b/packages/edit-post/src/components/sidebar/post-template/create-modal.js
deleted file mode 100644
index 259c64ba0b7357..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-template/create-modal.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { useState } from '@wordpress/element';
-import { serialize, createBlock } from '@wordpress/blocks';
-import {
-	Modal,
-	Flex,
-	FlexItem,
-	TextControl,
-	Button,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { cleanForSlug } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-const DEFAULT_TITLE = __( 'Custom Template' );
-
-export default function PostTemplateCreateModal( { onClose } ) {
-	const defaultBlockTemplate = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().defaultBlockTemplate,
-		[]
-	);
-
-	const { __unstableCreateTemplate, __unstableSwitchToTemplateMode } =
-		useDispatch( editPostStore );
-
-	const [ title, setTitle ] = useState( '' );
-
-	const [ isBusy, setIsBusy ] = useState( false );
-
-	const cancel = () => {
-		setTitle( '' );
-		onClose();
-	};
-
-	const submit = async ( event ) => {
-		event.preventDefault();
-
-		if ( isBusy ) {
-			return;
-		}
-
-		setIsBusy( true );
-
-		const newTemplateContent =
-			defaultBlockTemplate ??
-			serialize( [
-				createBlock(
-					'core/group',
-					{
-						tagName: 'header',
-						layout: { inherit: true },
-					},
-					[
-						createBlock( 'core/site-title' ),
-						createBlock( 'core/site-tagline' ),
-					]
-				),
-				createBlock( 'core/separator' ),
-				createBlock(
-					'core/group',
-					{
-						tagName: 'main',
-					},
-					[
-						createBlock(
-							'core/group',
-							{
-								layout: { inherit: true },
-							},
-							[ createBlock( 'core/post-title' ) ]
-						),
-						createBlock( 'core/post-content', {
-							layout: { inherit: true },
-						} ),
-					]
-				),
-			] );
-
-		await __unstableCreateTemplate( {
-			slug: cleanForSlug( title || DEFAULT_TITLE ),
-			content: newTemplateContent,
-			title: title || DEFAULT_TITLE,
-		} );
-
-		setIsBusy( false );
-		cancel();
-
-		__unstableSwitchToTemplateMode( true );
-	};
-
-	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ cancel }
-			className="edit-post-post-template__create-modal"
-		>
-			<form
-				className="edit-post-post-template__create-form"
-				onSubmit={ submit }
-			>
-				<Flex align="flex-start" gap={ 8 }>
-					<FlexItem>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-							placeholder={ DEFAULT_TITLE }
-							disabled={ isBusy }
-							help={ __(
-								'Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.'
-							) }
-						/>
-					</FlexItem>
-				</Flex>
-
-				<Flex justify="flex-end" expanded={ false }>
-					<FlexItem>
-						<Button variant="tertiary" onClick={ cancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</FlexItem>
-				</Flex>
-			</form>
-		</Modal>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-template/form.js b/packages/edit-post/src/components/sidebar/post-template/form.js
deleted file mode 100644
index 763ab229556661..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-template/form.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { addTemplate } from '@wordpress/icons';
-import { Notice, SelectControl, Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-import PostTemplateCreateModal from './create-modal';
-
-export default function PostTemplateForm( { onClose } ) {
-	const {
-		isPostsPage,
-		availableTemplates,
-		fetchedTemplates,
-		selectedTemplateSlug,
-		canCreate,
-		canEdit,
-	} = useSelect( ( select ) => {
-		const { canUser, getEntityRecord, getEntityRecords } =
-			select( coreStore );
-		const editorSettings = select( editorStore ).getEditorSettings();
-		const siteSettings = canUser( 'read', 'settings' )
-			? getEntityRecord( 'root', 'site' )
-			: undefined;
-		const _isPostsPage =
-			select( editorStore ).getCurrentPostId() ===
-			siteSettings?.page_for_posts;
-		const canCreateTemplates = canUser( 'create', 'templates' );
-
-		return {
-			isPostsPage: _isPostsPage,
-			availableTemplates: editorSettings.availableTemplates,
-			fetchedTemplates: canCreateTemplates
-				? getEntityRecords( 'postType', 'wp_template', {
-						post_type: select( editorStore ).getCurrentPostType(),
-						per_page: -1,
-				  } )
-				: undefined,
-			selectedTemplateSlug:
-				select( editorStore ).getEditedPostAttribute( 'template' ),
-			canCreate:
-				canCreateTemplates &&
-				! _isPostsPage &&
-				editorSettings.supportsTemplateMode,
-			canEdit:
-				canCreateTemplates &&
-				editorSettings.supportsTemplateMode &&
-				!! select( editPostStore ).getEditedPostTemplate(),
-		};
-	}, [] );
-
-	const options = useMemo(
-		() =>
-			Object.entries( {
-				...availableTemplates,
-				...Object.fromEntries(
-					( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
-						slug,
-						title.rendered,
-					] )
-				),
-			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
-		[ availableTemplates, fetchedTemplates ]
-	);
-
-	const selectedOption =
-		options.find( ( option ) => option.value === selectedTemplateSlug ) ??
-		options.find( ( option ) => ! option.value ); // The default option has '' value.
-
-	const { editPost } = useDispatch( editorStore );
-	const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
-
-	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
-
-	return (
-		<div className="edit-post-post-template__form">
-			<InspectorPopoverHeader
-				title={ __( 'Template' ) }
-				help={ __(
-					'Templates define the way content is displayed when viewing your site.'
-				) }
-				actions={
-					canCreate
-						? [
-								{
-									icon: addTemplate,
-									label: __( 'Add template' ),
-									onClick: () => setIsCreateModalOpen( true ),
-								},
-						  ]
-						: []
-				}
-				onClose={ onClose }
-			/>
-			{ isPostsPage ? (
-				<Notice
-					className="edit-post-post-template__notice"
-					status="warning"
-					isDismissible={ false }
-				>
-					{ __( 'The posts page template cannot be changed.' ) }
-				</Notice>
-			) : (
-				<SelectControl
-					hideLabelFromVision
-					label={ __( 'Template' ) }
-					value={ selectedOption?.value ?? '' }
-					options={ options }
-					onChange={ ( slug ) =>
-						editPost( { template: slug || '' } )
-					}
-				/>
-			) }
-			{ canEdit && (
-				<p>
-					<Button
-						variant="link"
-						onClick={ () => __unstableSwitchToTemplateMode() }
-					>
-						{ __( 'Edit template' ) }
-					</Button>
-				</p>
-			) }
-			{ isCreateModalOpen && (
-				<PostTemplateCreateModal
-					onClose={ () => setIsCreateModalOpen( false ) }
-				/>
-			) }
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
deleted file mode 100644
index 469f9319bee51a..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-template/index.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo } from '@wordpress/element';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import PostTemplateForm from './form';
-import { store as editPostStore } from '../../../store';
-
-export default function PostTemplate() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
-		[ popoverAnchor ]
-	);
-
-	const isVisible = useSelect( ( select ) => {
-		const postTypeSlug = select( editorStore ).getCurrentPostType();
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		if ( ! postType?.viewable ) {
-			return false;
-		}
-
-		const settings = select( editorStore ).getEditorSettings();
-		const hasTemplates =
-			!! settings.availableTemplates &&
-			Object.keys( settings.availableTemplates ).length > 0;
-		if ( hasTemplates ) {
-			return true;
-		}
-
-		if ( ! settings.supportsTemplateMode ) {
-			return false;
-		}
-
-		const canCreateTemplates =
-			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
-		return canCreateTemplates;
-	}, [] );
-
-	if ( ! isVisible ) {
-		return null;
-	}
-
-	return (
-		<PanelRow className="edit-post-post-template" ref={ setPopoverAnchor }>
-			<span>{ __( 'Template' ) }</span>
-			<Dropdown
-				popoverProps={ popoverProps }
-				position="bottom left"
-				className="edit-post-post-template__dropdown"
-				contentClassName="edit-post-post-template__dialog"
-				focusOnMount
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<PostTemplateToggle
-						isOpen={ isOpen }
-						onClick={ onToggle }
-					/>
-				) }
-				renderContent={ ( { onClose } ) => (
-					<PostTemplateForm onClose={ onClose } />
-				) }
-			/>
-		</PanelRow>
-	);
-}
-
-function PostTemplateToggle( { isOpen, onClick } ) {
-	const templateTitle = useSelect( ( select ) => {
-		const templateSlug =
-			select( editorStore ).getEditedPostAttribute( 'template' );
-
-		const { supportsTemplateMode, availableTemplates } =
-			select( editorStore ).getEditorSettings();
-		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
-			return availableTemplates[ templateSlug ];
-		}
-
-		const template = select( editPostStore ).getEditedPostTemplate();
-		return template?.title ?? template?.slug;
-	}, [] );
-
-	return (
-		<Button
-			className="edit-post-post-template__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			aria-label={
-				templateTitle
-					? sprintf(
-							// translators: %s: Name of the currently selected template.
-							__( 'Select template: %s' ),
-							templateTitle
-					  )
-					: __( 'Select template' )
-			}
-			onClick={ onClick }
-		>
-			{ templateTitle ?? __( 'Default template' ) }
-		</Button>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss
deleted file mode 100644
index 0cff4fdd96c22e..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-template/style.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.edit-post-post-template {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-	}
-}
-
-.edit-post-post-template__dropdown {
-	max-width: 55%;
-}
-
-.components-button.edit-post-post-template__toggle {
-	display: inline-block;
-	width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.edit-post-post-template__dialog {
-	z-index: z-index(".edit-post-post-template__dialog");
-}
-
-.edit-post-post-template__form {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}
-
-.edit-post-post-template__create-form {
-	@include break-medium() {
-		width: $grid-unit * 40;
-	}
-}
diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js
deleted file mode 100644
index a7094385c0265d..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-trash/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { PanelRow } from '@wordpress/components';
-import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor';
-
-export default function PostTrash() {
-	return (
-		<PostTrashCheck>
-			<PanelRow>
-				<PostTrashLink />
-			</PanelRow>
-		</PostTrashCheck>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-url/index.js b/packages/edit-post/src/components/sidebar/post-url/index.js
deleted file mode 100644
index 46b592c82b4964..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-url/index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMemo, useState } from '@wordpress/element';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	PostURLCheck,
-	PostURL as PostURLForm,
-	usePostURLLabel,
-} from '@wordpress/editor';
-
-export default function PostURL() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( { anchor: popoverAnchor } ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<PostURLCheck>
-			<PanelRow className="edit-post-post-url" ref={ setPopoverAnchor }>
-				<span>{ __( 'URL' ) }</span>
-				<Dropdown
-					popoverProps={ popoverProps }
-					position="bottom left"
-					className="edit-post-post-url__dropdown"
-					contentClassName="edit-post-post-url__dialog"
-					focusOnMount
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
-					) }
-					renderContent={ ( { onClose } ) => (
-						<PostURLForm onClose={ onClose } />
-					) }
-				/>
-			</PanelRow>
-		</PostURLCheck>
-	);
-}
-
-function PostURLToggle( { isOpen, onClick } ) {
-	const label = usePostURLLabel();
-	return (
-		<Button
-			className="edit-post-post-url__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			// translators: %s: Current post URL.
-			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
-			onClick={ onClick }
-		>
-			{ label }
-		</Button>
-	);
-}
diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss
deleted file mode 100644
index dbe6d983efc64e..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-url/style.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.edit-post-post-url {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-		flex-shrink: 0;
-	}
-}
-
-.components-button.edit-post-post-url__toggle {
-	text-align: left;
-	white-space: normal;
-	height: auto;
-	word-break: break-word;
-}
-
-.edit-post-post-url__dialog .editor-post-url {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js
deleted file mode 100644
index 43d9e6ab4264b9..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-visibility/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
-import {
-	PostVisibility as PostVisibilityForm,
-	PostVisibilityLabel,
-	PostVisibilityCheck,
-	usePostVisibilityLabel,
-} from '@wordpress/editor';
-import { useMemo, useState } from '@wordpress/element';
-
-export function PostVisibility() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Anchor the popover to the middle of the entire row so that it doesn't
-			// move around when the label changes.
-			anchor: popoverAnchor,
-		} ),
-		[ popoverAnchor ]
-	);
-
-	return (
-		<PostVisibilityCheck
-			render={ ( { canEdit } ) => (
-				<PanelRow
-					ref={ setPopoverAnchor }
-					className="edit-post-post-visibility"
-				>
-					<span>{ __( 'Visibility' ) }</span>
-					{ ! canEdit && (
-						<span>
-							<PostVisibilityLabel />
-						</span>
-					) }
-					{ canEdit && (
-						<Dropdown
-							position="bottom left"
-							contentClassName="edit-post-post-visibility__dialog"
-							popoverProps={ popoverProps }
-							focusOnMount
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<PostVisibilityToggle
-									isOpen={ isOpen }
-									onClick={ onToggle }
-								/>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<PostVisibilityForm onClose={ onClose } />
-							) }
-						/>
-					) }
-				</PanelRow>
-			) }
-		/>
-	);
-}
-
-function PostVisibilityToggle( { isOpen, onClick } ) {
-	const label = usePostVisibilityLabel();
-	return (
-		<Button
-			className="edit-post-post-visibility__toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			// translators: %s: Current post visibility.
-			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
-			onClick={ onClick }
-		>
-			{ label }
-		</Button>
-	);
-}
-
-export default PostVisibility;
diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss
deleted file mode 100644
index 82c89688fca757..00000000000000
--- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.edit-post-post-visibility {
-	width: 100%;
-	justify-content: flex-start;
-
-	span {
-		display: block;
-		width: 45%;
-	}
-}
-
-.edit-post-post-visibility__dialog .editor-post-visibility {
-	// sidebar width - popover padding - form margin
-	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
-	margin: $grid-unit-10;
-}
diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js
deleted file mode 100644
index f4f7a34db0bc3d..00000000000000
--- a/packages/edit-post/src/components/sidebar/settings-header/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-const SettingsHeader = ( { sidebarName } ) => {
-	const { openGeneralSidebar } = useDispatch( editPostStore );
-	const openDocumentSettings = () =>
-		openGeneralSidebar( 'edit-post/document' );
-	const openBlockSettings = () => openGeneralSidebar( 'edit-post/block' );
-
-	const { documentLabel, isTemplateMode } = useSelect( ( select ) => {
-		const postTypeLabel = select( editorStore ).getPostTypeLabel();
-
-		return {
-			// translators: Default label for the Document sidebar tab, not selected.
-			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-		};
-	}, [] );
-
-	const [ documentAriaLabel, documentActiveClass ] =
-		sidebarName === 'edit-post/document'
-			? // translators: ARIA label for the Document sidebar tab, selected. %s: Document label.
-			  [ sprintf( __( '%s (selected)' ), documentLabel ), 'is-active' ]
-			: [ documentLabel, '' ];
-
-	const [ blockAriaLabel, blockActiveClass ] =
-		sidebarName === 'edit-post/block'
-			? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-			  [ __( 'Block (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-			  [ __( 'Block' ), '' ];
-
-	const [ templateAriaLabel, templateActiveClass ] =
-		sidebarName === 'edit-post/document'
-			? [ __( 'Template (selected)' ), 'is-active' ]
-			: [ __( 'Template' ), '' ];
-
-	/* Use a list so screen readers will announce how many tabs there are. */
-	return (
-		<ul>
-			{ ! isTemplateMode && (
-				<li>
-					<Button
-						onClick={ openDocumentSettings }
-						className={ `edit-post-sidebar__panel-tab ${ documentActiveClass }` }
-						aria-label={ documentAriaLabel }
-						data-label={ documentLabel }
-					>
-						{ documentLabel }
-					</Button>
-				</li>
-			) }
-			{ isTemplateMode && (
-				<li>
-					<Button
-						onClick={ openDocumentSettings }
-						className={ `edit-post-sidebar__panel-tab ${ templateActiveClass }` }
-						aria-label={ templateAriaLabel }
-						data-label={ __( 'Template' ) }
-					>
-						{ __( 'Template' ) }
-					</Button>
-				</li>
-			) }
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ `edit-post-sidebar__panel-tab ${ blockActiveClass }` }
-					aria-label={ blockAriaLabel }
-					// translators: Data label for the Block Settings Sidebar tab.
-					data-label={ __( 'Block' ) }
-				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
-					}
-				</Button>
-			</li>
-		</ul>
-	);
-};
-
-export default SettingsHeader;
diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss
deleted file mode 100644
index eefbb56ca24172..00000000000000
--- a/packages/edit-post/src/components/sidebar/settings-header/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.components-button.edit-post-sidebar__panel-tab {
-	border-radius: 0;
-	height: $grid-unit-60;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 500;
-
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
-	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
-	}
-
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-	}
-
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
-	}
-}
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
deleted file mode 100644
index 677161c6b5a383..00000000000000
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	BlockInspector,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { Platform } from '@wordpress/element';
-import { isRTL, __ } from '@wordpress/i18n';
-import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import SettingsHeader from '../settings-header';
-import PostStatus from '../post-status';
-import LastRevision from '../last-revision';
-import PostTaxonomies from '../post-taxonomies';
-import FeaturedImage from '../featured-image';
-import PostExcerpt from '../post-excerpt';
-import DiscussionPanel from '../discussion-panel';
-import PageAttributes from '../page-attributes';
-import MetaBoxes from '../../meta-boxes';
-import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
-import PluginSidebarEditPost from '../plugin-sidebar';
-import TemplateSummary from '../template-summary';
-import { store as editPostStore } from '../../../store';
-
-const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
-	web: true,
-	native: false,
-} );
-
-const SettingsSidebar = () => {
-	const { sidebarName, keyboardShortcut, isTemplateMode } = useSelect(
-		( select ) => {
-			// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
-			// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
-			// If one of the two sidebars is active the component will contain the content of that sidebar.
-			// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
-			// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
-			// should contain the sidebar that will be active when the toggle button is pressed. If a block
-			// is selected, that should be edit-post/block otherwise it's edit-post/document.
-			let sidebar = select( interfaceStore ).getActiveComplementaryArea(
-				editPostStore.name
-			);
-			if (
-				! [ 'edit-post/document', 'edit-post/block' ].includes(
-					sidebar
-				)
-			) {
-				if ( select( blockEditorStore ).getBlockSelectionStart() ) {
-					sidebar = 'edit-post/block';
-				}
-				sidebar = 'edit-post/document';
-			}
-			const shortcut = select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );
-			return {
-				sidebarName: sidebar,
-				keyboardShortcut: shortcut,
-				isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			};
-		},
-		[]
-	);
-
-	return (
-		<PluginSidebarEditPost
-			identifier={ sidebarName }
-			header={ <SettingsHeader sidebarName={ sidebarName } /> }
-			closeLabel={ __( 'Close settings' ) }
-			headerClassName="edit-post-sidebar__panel-tabs"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
-			toggleShortcut={ keyboardShortcut }
-			icon={ isRTL() ? drawerLeft : drawerRight }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
-		>
-			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
-				<>
-					<PostStatus />
-					<PluginDocumentSettingPanel.Slot />
-					<LastRevision />
-					<PostTaxonomies />
-					<FeaturedImage />
-					<PostExcerpt />
-					<DiscussionPanel />
-					<PageAttributes />
-					<MetaBoxes location="side" />
-				</>
-			) }
-			{ isTemplateMode && sidebarName === 'edit-post/document' && (
-				<TemplateSummary />
-			) }
-			{ sidebarName === 'edit-post/block' && <BlockInspector /> }
-		</PluginSidebarEditPost>
-	);
-};
-
-export default SettingsSidebar;
diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss
deleted file mode 100644
index 7b10eaec0d2248..00000000000000
--- a/packages/edit-post/src/components/sidebar/style.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.components-panel__header.edit-post-sidebar__panel-tabs {
-	justify-content: flex-start;
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-	border-top: 0;
-	margin-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
-
-	.components-button.has-icon {
-		display: none;
-		margin: 0 0 0 auto;
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}
diff --git a/packages/edit-post/src/components/sidebar/template-summary/index.js b/packages/edit-post/src/components/sidebar/template-summary/index.js
deleted file mode 100644
index 30358038ffb5b6..00000000000000
--- a/packages/edit-post/src/components/sidebar/template-summary/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon, layout } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { Flex, FlexItem, FlexBlock, PanelBody } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../../store';
-
-function TemplateSummary() {
-	const template = useSelect( ( select ) => {
-		const { getEditedPostTemplate } = select( editPostStore );
-		return getEditedPostTemplate();
-	}, [] );
-
-	if ( ! template ) {
-		return null;
-	}
-
-	return (
-		<PanelBody>
-			<Flex align="flex-start" gap="3">
-				<FlexItem>
-					<Icon icon={ layout } />
-				</FlexItem>
-
-				<FlexBlock>
-					<h2 className="edit-post-template-summary__title">
-						{ template?.title || template?.slug }
-					</h2>
-					<p>{ template?.description }</p>
-				</FlexBlock>
-			</Flex>
-		</PanelBody>
-	);
-}
-
-export default TemplateSummary;
diff --git a/packages/edit-post/src/components/sidebar/template-summary/style.scss b/packages/edit-post/src/components/sidebar/template-summary/style.scss
deleted file mode 100644
index bfec3bc7b32461..00000000000000
--- a/packages/edit-post/src/components/sidebar/template-summary/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-h2.edit-post-template-summary__title {
-	line-height: $icon-size;
-	margin: 0 0 $grid-unit-05;
-	font-weight: 500;
-}
diff --git a/packages/edit-post/src/components/sidebar/template/style.scss b/packages/edit-post/src/components/sidebar/template/style.scss
deleted file mode 100644
index 38d593f44d76dc..00000000000000
--- a/packages/edit-post/src/components/sidebar/template/style.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.edit-post-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-}
-
-.edit-post-template__modal-actions {
-	margin-top: $grid-unit-15;
-}
-
-.edit-post-template-modal__tip {
-	padding: $grid-unit-20 $grid-unit-30;
-	background: $gray-100;
-	border-radius: $radius-block-ui;
-
-	@include break-medium() {
-		width: $grid-unit * 30;
-	}
-}
-
-.edit-post-template__notice {
-	margin: 0 0 $grid-unit-10 0;
-
-	.components-notice__content {
-		margin: 0;
-	}
-}
-
-.edit-post-template__actions {
-	button:not(:last-child) {
-		margin-right: $grid-unit-10;
-	}
-}
diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js
deleted file mode 100644
index ce86984e032c2a..00000000000000
--- a/packages/edit-post/src/components/start-page-options/index.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	__experimentalBlockPatternsList as BlockPatternsList,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-function useStartPatterns() {
-	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
-	// and it has no postTypes declares and the current post type is page or if
-	// the current post type is part of the postTypes declared.
-	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
-		( select ) => {
-			const { __experimentalGetPatternsByBlockTypes } =
-				select( blockEditorStore );
-			const { getCurrentPostType } = select( editorStore );
-			return {
-				// get pa
-				blockPatternsWithPostContentBlockType:
-					__experimentalGetPatternsByBlockTypes(
-						'core/post-content'
-					),
-				postType: getCurrentPostType(),
-			};
-		},
-		[]
-	);
-
-	return useMemo( () => {
-		// filter patterns without postTypes declared if the current postType is page
-		// or patterns that declare the current postType in its post type array.
-		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
-			return (
-				( postType === 'page' && ! pattern.postTypes ) ||
-				( Array.isArray( pattern.postTypes ) &&
-					pattern.postTypes.includes( postType ) )
-			);
-		} );
-	}, [ postType, blockPatternsWithPostContentBlockType ] );
-}
-
-function PatternSelection( { onChoosePattern } ) {
-	const blockPatterns = useStartPatterns();
-	const shownBlockPatterns = useAsyncList( blockPatterns );
-	const { resetEditorBlocks } = useDispatch( editorStore );
-	return (
-		<BlockPatternsList
-			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
-			onClickPattern={ ( _pattern, blocks ) => {
-				resetEditorBlocks( blocks );
-				onChoosePattern();
-			} }
-		/>
-	);
-}
-
-const START_PAGE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	PATTERN: 'PATTERN',
-	CLOSED: 'CLOSED',
-};
-
-export default function StartPageOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_PAGE_MODAL_STATES.INITIAL
-	);
-	const blockPatterns = useStartPatterns();
-	const hasStartPattern = blockPatterns.length > 0;
-	const shouldOpenModel = useSelect(
-		( select ) => {
-			if (
-				! hasStartPattern ||
-				modalState !== START_PAGE_MODAL_STATES.INITIAL
-			) {
-				return false;
-			}
-			const { getEditedPostContent, isEditedPostSaveable } =
-				select( editorStore );
-			const { isEditingTemplate, isFeatureActive } =
-				select( editPostStore );
-			return (
-				! isEditedPostSaveable() &&
-				'' === getEditedPostContent() &&
-				! isEditingTemplate() &&
-				! isFeatureActive( 'welcomeGuide' )
-			);
-		},
-		[ modalState, hasStartPattern ]
-	);
-
-	useEffect( () => {
-		if ( shouldOpenModel ) {
-			setModalState( START_PAGE_MODAL_STATES.PATTERN );
-		}
-	}, [ shouldOpenModel ] );
-
-	if (
-		modalState === START_PAGE_MODAL_STATES.INITIAL ||
-		modalState === START_PAGE_MODAL_STATES.CLOSED
-	) {
-		return null;
-	}
-	return (
-		<Modal
-			className="edit-post-start-page-options__modal"
-			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
-			onRequestClose={ () => {
-				setModalState( START_PAGE_MODAL_STATES.CLOSED );
-			} }
-		>
-			<div className="edit-post-start-page-options__modal-content">
-				{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
-					<PatternSelection
-						onChoosePattern={ () => {
-							setModalState( START_PAGE_MODAL_STATES.CLOSED );
-						} }
-					/>
-				) }
-			</div>
-		</Modal>
-	);
-}
diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/edit-post/src/components/start-page-options/style.scss
deleted file mode 100644
index e3e0c0155ed714..00000000000000
--- a/packages/edit-post/src/components/start-page-options/style.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.edit-post-start-page-options__modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
-	}
-}
-
-// 2 column masonry layout.
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
-	column-count: 2;
-	column-gap: $grid-unit-30;
-
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-		margin-bottom: $grid-unit-30;
-
-		.block-editor-block-preview__container {
-			min-height: 100px;
-		}
-
-		.block-editor-block-preview__content {
-			width: 100%;
-		}
-	}
-}
diff --git a/packages/edit-post/src/components/text-editor/index.js b/packages/edit-post/src/components/text-editor/index.js
deleted file mode 100644
index 9c9b3c29e99481..00000000000000
--- a/packages/edit-post/src/components/text-editor/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PostTextEditor,
-	PostTitle,
-	TextEditorGlobalKeyboardShortcuts,
-	store as editorStore,
-} from '@wordpress/editor';
-import { Button } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function TextEditor() {
-	const isRichEditingEnabled = useSelect( ( select ) => {
-		return select( editorStore ).getEditorSettings().richEditingEnabled;
-	}, [] );
-	const { switchEditorMode } = useDispatch( editPostStore );
-
-	return (
-		<div className="edit-post-text-editor">
-			<TextEditorGlobalKeyboardShortcuts />
-			{ isRichEditingEnabled && (
-				<div className="edit-post-text-editor__toolbar">
-					<h2>{ __( 'Editing code' ) }</h2>
-					<Button
-						variant="tertiary"
-						onClick={ () => switchEditorMode( 'visual' ) }
-						shortcut={ displayShortcut.secondary( 'm' ) }
-					>
-						{ __( 'Exit code editor' ) }
-					</Button>
-				</div>
-			) }
-			<div className="edit-post-text-editor__body">
-				<PostTitle />
-				<PostTextEditor />
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss
deleted file mode 100644
index 925e88df27180b..00000000000000
--- a/packages/edit-post/src/components/text-editor/style.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.edit-post-text-editor {
-	position: relative;
-	width: 100%;
-	background-color: $white;
-	flex-grow: 1;
-
-	// Post title.
-	.editor-post-title {
-		max-width: none;
-		line-height: $default-line-height;
-
-		font-family: $editor-html-font;
-		font-size: 2.5em;
-		font-weight: normal;
-
-		border: $border-width solid $gray-600;
-
-		// Same padding as body.
-		padding: $grid-unit-20;
-
-		@include break-small() {
-			padding: $grid-unit-30;
-		}
-
-		&:focus {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-}
-
-.edit-post-text-editor__body {
-	width: 100%;
-	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
-	max-width: $break-xlarge;
-	margin-left: auto;
-	margin-right: auto;
-
-	@include break-large() {
-		padding: $grid-unit-20 $grid-unit-30 #{ $grid-unit-60 * 2 } $grid-unit-30;
-		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
-	}
-
-}
-
-// Exit code editor toolbar.
-.edit-post-text-editor__toolbar {
-	position: sticky;
-	z-index: z-index(".edit-post-text-editor__toolbar");
-	top: 0;
-	left: 0;
-	right: 0;
-	display: flex;
-	background: rgba($white, 0.8);
-	padding: $grid-unit-05 $grid-unit-15;
-
-	@include break-small() {
-		padding: $grid-unit-15;
-	}
-
-	@include break-large() {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	h2 {
-		line-height: $button-size;
-		margin: 0 auto 0 0;
-		font-size: $default-font-size;
-		color: $gray-900;
-	}
-
-	.components-button svg {
-		order: 1;
-	}
-}
diff --git a/packages/edit-post/src/components/visual-editor/block-inspector-button.js b/packages/edit-post/src/components/visual-editor/block-inspector-button.js
deleted file mode 100644
index 271580b7ea7cad..00000000000000
--- a/packages/edit-post/src/components/visual-editor/block-inspector-button.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { speak } from '@wordpress/a11y';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-const noop = () => {};
-
-export function BlockInspectorButton( { onClick = noop, small = false } ) {
-	const { shortcut, areAdvancedSettingsOpened } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			areAdvancedSettingsOpened:
-				select( editPostStore ).getActiveGeneralSidebarName() ===
-				'edit-post/block',
-		} ),
-		[]
-	);
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editPostStore );
-
-	const label = areAdvancedSettingsOpened
-		? __( 'Hide more settings' )
-		: __( 'Show more settings' );
-
-	return (
-		<MenuItem
-			onClick={ () => {
-				if ( areAdvancedSettingsOpened ) {
-					closeGeneralSidebar();
-					speak( __( 'Block settings closed' ) );
-				} else {
-					openGeneralSidebar( 'edit-post/block' );
-					speak(
-						__(
-							'Additional settings are now available in the Editor block settings sidebar'
-						)
-					);
-				}
-				onClick();
-			} }
-			shortcut={ shortcut }
-		>
-			{ ! small && label }
-		</MenuItem>
-	);
-}
-
-export default BlockInspectorButton;
diff --git a/packages/edit-post/src/components/visual-editor/header.native.js b/packages/edit-post/src/components/visual-editor/header.native.js
index fb52d0b79eb28c..f7679e531ec9ea 100644
--- a/packages/edit-post/src/components/visual-editor/header.native.js
+++ b/packages/edit-post/src/components/visual-editor/header.native.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
 /**
  * WordPress dependencies
  */
@@ -6,37 +11,24 @@ import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { PostTitle } from '@wordpress/editor';
-import { ReadableContentView } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
+import {
+	store as blockEditorStore,
+	useEditorWrapperStyles,
+} from '@wordpress/block-editor';
 
 const Header = memo(
-	function EditorHeader( {
-		editTitle,
-		setTitleRef,
-		title,
-		getStylesFromColorScheme,
-	} ) {
-		const blockHolderFocusedStyle = getStylesFromColorScheme(
-			styles.blockHolderFocused,
-			styles.blockHolderFocusedDark
-		);
+	function EditorHeader( { editTitle, setTitleRef, title } ) {
+		const [ wrapperStyles ] = useEditorWrapperStyles();
 		return (
-			<ReadableContentView>
+			<View style={ wrapperStyles }>
 				<PostTitle
 					innerRef={ setTitleRef }
 					title={ title }
 					onUpdate={ editTitle }
 					placeholder={ __( 'Add title' ) }
-					borderStyle={ styles.blockHolderFullBordered }
-					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
-			</ReadableContentView>
+			</View>
 		);
 	},
 	( prevProps, nextProps ) => prevProps.title === nextProps.title
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
deleted file mode 100644
index 8062e9d51dada3..00000000000000
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ /dev/null
@@ -1,406 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	VisualEditorGlobalKeyboardShortcuts,
-	PostTitle,
-	store as editorStore,
-} from '@wordpress/editor';
-import {
-	WritingFlow,
-	BlockList,
-	BlockTools,
-	store as blockEditorStore,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
-	__unstableUseTypewriter as useTypewriter,
-	__unstableUseClipboardHandler as useClipboardHandler,
-	__unstableUseTypingObserver as useTypingObserver,
-	__unstableBlockSettingsMenuFirstItem,
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
-	useSetting,
-	__experimentalLayoutStyle as LayoutStyle,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
-	__unstableIframe as Iframe,
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentaluseLayoutClasses as useLayoutClasses,
-	__experimentaluseLayoutStyles as useLayoutStyles,
-} from '@wordpress/block-editor';
-import { useEffect, useRef, useMemo } from '@wordpress/element';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
-import { arrowLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { parse } from '@wordpress/blocks';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import BlockInspectorButton from './block-inspector-button';
-import { store as editPostStore } from '../../store';
-
-function MaybeIframe( {
-	children,
-	contentRef,
-	shouldIframe,
-	styles,
-	assets,
-	style,
-} ) {
-	const ref = useMouseMoveTypingReset();
-
-	if ( ! shouldIframe ) {
-		return (
-			<>
-				<EditorStyles styles={ styles } />
-				<WritingFlow
-					ref={ contentRef }
-					className="editor-styles-wrapper"
-					style={ { flex: '1', ...style } }
-					tabIndex={ -1 }
-				>
-					{ children }
-				</WritingFlow>
-			</>
-		);
-	}
-
-	return (
-		<Iframe
-			head={ <EditorStyles styles={ styles } /> }
-			assets={ assets }
-			ref={ ref }
-			contentRef={ contentRef }
-			style={ { width: '100%', height: '100%', display: 'block' } }
-			name="editor-canvas"
-		>
-			{ children }
-		</Iframe>
-	);
-}
-
-/**
- * Given an array of nested blocks, find the first Post Content
- * block inside it, recursing through any nesting levels.
- *
- * @param {Array} blocks A list of blocks.
- *
- * @return {Object} The Post Content block.
- */
-function findPostContent( blocks ) {
-	for ( let i = 0; i < blocks.length; i++ ) {
-		if ( blocks[ i ].name === 'core/post-content' ) {
-			return blocks[ i ];
-		}
-		if ( blocks[ i ].innerBlocks.length ) {
-			const nestedPostContent = findPostContent(
-				blocks[ i ].innerBlocks
-			);
-
-			if ( nestedPostContent ) {
-				return nestedPostContent;
-			}
-		}
-	}
-}
-
-export default function VisualEditor( { styles } ) {
-	const {
-		deviceType,
-		isWelcomeGuideVisible,
-		isTemplateMode,
-		editedPostTemplate = {},
-		wrapperBlockName,
-		wrapperUniqueId,
-	} = useSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			isEditingTemplate,
-			__experimentalGetPreviewDeviceType,
-			getEditedPostTemplate,
-		} = select( editPostStore );
-		const { getCurrentPostId, getCurrentPostType, getEditorSettings } =
-			select( editorStore );
-		const _isTemplateMode = isEditingTemplate();
-		let _wrapperBlockName;
-
-		if ( getCurrentPostType() === 'wp_block' ) {
-			_wrapperBlockName = 'core/block';
-		} else if ( ! _isTemplateMode ) {
-			_wrapperBlockName = 'core/post-content';
-		}
-
-		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
-		const canEditTemplate = select( coreStore ).canUser(
-			'create',
-			'templates'
-		);
-
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
-			isTemplateMode: _isTemplateMode,
-			// Post template fetch returns a 404 on classic themes, which
-			// messes with e2e tests, so we check it's a block theme first.
-			editedPostTemplate:
-				supportsTemplateMode && canEditTemplate
-					? getEditedPostTemplate()
-					: undefined,
-			wrapperBlockName: _wrapperBlockName,
-			wrapperUniqueId: getCurrentPostId(),
-		};
-	}, [] );
-	const { isCleanNewPost } = useSelect( editorStore );
-	const hasMetaBoxes = useSelect(
-		( select ) => select( editPostStore ).hasMetaBoxes(),
-		[]
-	);
-	const {
-		themeHasDisabledLayoutStyles,
-		themeSupportsLayout,
-		assets,
-		isFocusMode,
-	} = useSelect( ( select ) => {
-		const _settings = select( blockEditorStore ).getSettings();
-		return {
-			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
-			themeSupportsLayout: _settings.supportsLayout,
-			assets: _settings.__unstableResolvedAssets,
-			isFocusMode: _settings.focusMode,
-		};
-	}, [] );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const { setIsEditingTemplate } = useDispatch( editPostStore );
-	const desktopCanvasStyles = {
-		height: '100%',
-		width: '100%',
-		margin: 0,
-		display: 'flex',
-		flexFlow: 'column',
-		// Default background color so that grey
-		// .edit-post-editor-regions__content color doesn't show through.
-		background: 'white',
-	};
-	const templateModeStyles = {
-		...desktopCanvasStyles,
-		borderRadius: '2px 2px 0 0',
-		border: '1px solid #ddd',
-		borderBottom: 0,
-	};
-	const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
-	const globalLayoutSettings = useSetting( 'layout' );
-	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
-
-	let animatedStyles = isTemplateMode
-		? templateModeStyles
-		: desktopCanvasStyles;
-	if ( resizedCanvasStyles ) {
-		animatedStyles = resizedCanvasStyles;
-	}
-
-	let paddingBottom;
-
-	// Add a constant padding for the typewritter effect. When typing at the
-	// bottom, there needs to be room to scroll up.
-	if ( ! hasMetaBoxes && ! resizedCanvasStyles && ! isTemplateMode ) {
-		paddingBottom = '40vh';
-	}
-
-	const ref = useRef();
-	const contentRef = useMergeRefs( [
-		ref,
-		useClipboardHandler(),
-		useTypewriter(),
-		useTypingObserver(),
-		useBlockSelectionClearer(),
-	] );
-
-	const blockSelectionClearerRef = useBlockSelectionClearer();
-
-	// fallbackLayout is used if there is no Post Content,
-	// and for Post Title.
-	const fallbackLayout = useMemo( () => {
-		if ( isTemplateMode ) {
-			return { type: 'default' };
-		}
-
-		if ( themeSupportsLayout ) {
-			// We need to ensure support for wide and full alignments,
-			// so we add the constrained type.
-			return { ...globalLayoutSettings, type: 'constrained' };
-		}
-		// Set default layout for classic themes so all alignments are supported.
-		return { type: 'default' };
-	}, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] );
-
-	const postContentBlock = useMemo( () => {
-		// When in template editing mode, we can access the blocks directly.
-		if ( editedPostTemplate?.blocks ) {
-			return findPostContent( editedPostTemplate?.blocks );
-		}
-		// If there are no blocks, we have to parse the content string.
-		// Best double-check it's a string otherwise the parse function gets unhappy.
-		const parseableContent =
-			typeof editedPostTemplate?.content === 'string'
-				? editedPostTemplate?.content
-				: '';
-
-		return findPostContent( parse( parseableContent ) ) || {};
-	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
-
-	const postContentLayoutClasses = useLayoutClasses( postContentBlock );
-
-	const blockListLayoutClass = classnames(
-		{
-			'is-layout-flow': ! themeSupportsLayout,
-		},
-		themeSupportsLayout && postContentLayoutClasses
-	);
-
-	const postContentLayoutStyles = useLayoutStyles(
-		postContentBlock,
-		'.block-editor-block-list__layout.is-root-container'
-	);
-
-	const layout = postContentBlock?.attributes?.layout || {};
-
-	// Update type for blocks using legacy layouts.
-	const postContentLayout = useMemo( () => {
-		return layout &&
-			( layout?.type === 'constrained' ||
-				layout?.inherit ||
-				layout?.contentSize ||
-				layout?.wideSize )
-			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
-			: { ...globalLayoutSettings, ...layout, type: 'default' };
-	}, [
-		layout?.type,
-		layout?.inherit,
-		layout?.contentSize,
-		layout?.wideSize,
-		globalLayoutSettings,
-	] );
-
-	// If there is a Post Content block we use its layout for the block list;
-	// if not, this must be a classic theme, in which case we use the fallback layout.
-	const blockListLayout = postContentBlock
-		? postContentLayout
-		: fallbackLayout;
-
-	const titleRef = useRef();
-	useEffect( () => {
-		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
-			return;
-		}
-		titleRef?.current?.focus();
-	}, [ isWelcomeGuideVisible, isCleanNewPost ] );
-
-	return (
-		<BlockTools
-			__unstableContentRef={ ref }
-			className={ classnames( 'edit-post-visual-editor', {
-				'is-template-mode': isTemplateMode,
-			} ) }
-		>
-			<VisualEditorGlobalKeyboardShortcuts />
-			<motion.div
-				className="edit-post-visual-editor__content-area"
-				animate={ {
-					padding: isTemplateMode ? '48px 48px 0' : '0',
-				} }
-				ref={ blockSelectionClearerRef }
-			>
-				{ isTemplateMode && (
-					<Button
-						className="edit-post-visual-editor__exit-template-mode"
-						icon={ arrowLeft }
-						onClick={ () => {
-							clearSelectedBlock();
-							setIsEditingTemplate( false );
-						} }
-					>
-						{ __( 'Back' ) }
-					</Button>
-				) }
-				<motion.div
-					animate={ animatedStyles }
-					initial={ desktopCanvasStyles }
-					className={ previewMode }
-				>
-					<MaybeIframe
-						shouldIframe={
-							isTemplateMode ||
-							deviceType === 'Tablet' ||
-							deviceType === 'Mobile'
-						}
-						contentRef={ contentRef }
-						styles={ styles }
-						assets={ assets }
-						style={ { paddingBottom } }
-					>
-						{ themeSupportsLayout &&
-							! themeHasDisabledLayoutStyles &&
-							! isTemplateMode && (
-								<>
-									<LayoutStyle
-										selector=".edit-post-visual-editor__post-title-wrapper, .block-editor-block-list__layout.is-root-container"
-										layout={ fallbackLayout }
-										layoutDefinitions={
-											globalLayoutSettings?.definitions
-										}
-									/>
-									{ postContentLayoutStyles && (
-										<LayoutStyle
-											layout={ postContentLayout }
-											css={ postContentLayoutStyles }
-											layoutDefinitions={
-												globalLayoutSettings?.definitions
-											}
-										/>
-									) }
-								</>
-							) }
-						{ ! isTemplateMode && (
-							<div
-								className={ classnames(
-									'edit-post-visual-editor__post-title-wrapper',
-									{
-										'is-focus-mode': isFocusMode,
-									}
-								) }
-								contentEditable={ false }
-							>
-								<PostTitle ref={ titleRef } />
-							</div>
-						) }
-						<RecursionProvider
-							blockName={ wrapperBlockName }
-							uniqueId={ wrapperUniqueId }
-						>
-							<BlockList
-								className={
-									isTemplateMode
-										? 'wp-site-blocks'
-										: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
-								}
-								__experimentalLayout={ blockListLayout }
-							/>
-						</RecursionProvider>
-					</MaybeIframe>
-				</motion.div>
-			</motion.div>
-			<__unstableBlockSettingsMenuFirstItem>
-				{ ( { onClose } ) => (
-					<BlockInspectorButton onClick={ onClose } />
-				) }
-			</__unstableBlockSettingsMenuFirstItem>
-		</BlockTools>
-	);
-}
diff --git a/packages/edit-post/src/components/visual-editor/index.native.js b/packages/edit-post/src/components/visual-editor/index.native.js
index 886e56e493938b..b23b73c334e75a 100644
--- a/packages/edit-post/src/components/visual-editor/index.native.js
+++ b/packages/edit-post/src/components/visual-editor/index.native.js
@@ -3,10 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 import { BlockList } from '@wordpress/block-editor';
-/**
- * External dependencies
- */
-import { Keyboard } from 'react-native';
+
 /**
  * Internal dependencies
  */
@@ -16,36 +13,6 @@ export default class VisualEditor extends Component {
 	constructor( props ) {
 		super( props );
 		this.renderHeader = this.renderHeader.bind( this );
-		this.keyboardDidShow = this.keyboardDidShow.bind( this );
-		this.keyboardDidHide = this.keyboardDidHide.bind( this );
-
-		this.state = {
-			isAutoScrollEnabled: true,
-		};
-	}
-
-	componentDidMount() {
-		this.keyboardDidShow = Keyboard.addListener(
-			'keyboardDidShow',
-			this.keyboardDidShow
-		);
-		this.keyboardDidHideListener = Keyboard.addListener(
-			'keyboardDidHide',
-			this.keyboardDidHide
-		);
-	}
-
-	componentWillUnmount() {
-		this.keyboardDidShow.remove();
-		this.keyboardDidHideListener.remove();
-	}
-
-	keyboardDidShow() {
-		this.setState( { isAutoScrollEnabled: false } );
-	}
-
-	keyboardDidHide() {
-		this.setState( { isAutoScrollEnabled: true } );
 	}
 
 	renderHeader() {
@@ -55,13 +22,11 @@ export default class VisualEditor extends Component {
 
 	render() {
 		const { safeAreaBottomInset } = this.props;
-		const { isAutoScrollEnabled } = this.state;
 
 		return (
 			<BlockList
 				header={ this.renderHeader }
 				safeAreaBottomInset={ safeAreaBottomInset }
-				autoScroll={ isAutoScrollEnabled }
 			/>
 		);
 	}
diff --git a/packages/edit-post/src/components/visual-editor/style.native.scss b/packages/edit-post/src/components/visual-editor/style.native.scss
deleted file mode 100644
index 7475caa801a2b6..00000000000000
--- a/packages/edit-post/src/components/visual-editor/style.native.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.blockHolderFullBordered {
-	border-top-width: $block-selected-border-width;
-	border-bottom-width: $block-selected-border-width;
-	border-left-width: $block-selected-border-width;
-	border-right-width: $block-selected-border-width;
-	border-radius: 4px;
-	border-style: solid;
-	margin-left: 4px;
-	margin-right: 4px;
-}
-
-.blockHolderFocused {
-	border-color: $blue-wordpress;
-}
-
-.blockHolderFocusedDark {
-	border-color: $blue-30;
-}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
deleted file mode 100644
index a9ce377b76ba41..00000000000000
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-.edit-post-visual-editor {
-	position: relative;
-	display: flex;
-	flex-flow: column;
-
-	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
-	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
-	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-800;
-
-	// The button element easily inherits styles that are meant for the editor style.
-	// These rules enhance the specificity to reduce that inheritance.
-	// This is duplicated in edit-site.
-	& .components-button {
-		font-family: $default-font;
-		font-size: $default-font-size;
-		padding: 6px 12px;
-
-		&.is-tertiary,
-		&.has-icon {
-			padding: 6px;
-		}
-	}
-
-	// The following flex rule is important for the canvas layout, please be careful when refactoring,
-	// as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
-	// The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
-	// We set the canvas to be allowed to grow (vertically), but not shrink.
-	flex: 1 0 auto;
-
-	// Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
-	// as align-items: stretch is inherited by default.Additionally due to older browser's flex height
-	// interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
-}
-
-// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
-// .block-editor-block-list__layout and block-editor-block-list__block
-// We need to have two DOM elements.
-.edit-post-visual-editor__post-title-wrapper {
-	.editor-post-title {
-		// Center.
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	// Add extra margin at the top, to push down the Title area in the post editor.
-	margin-top: 4rem;
-	margin-bottom: var(--wp--style--block-gap);
-}
-
-.edit-post-visual-editor__exit-template-mode {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-.edit-post-visual-editor__content-area {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-
-	// This is necessary for older browsers due to their flex height interpretation.
-	// These browsers (including Safari 13) ignore the percentage value entirely.
-	// By setting flex-grow, the element stretches to fill the parent.
-	// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
-	flex-grow: 1;
-}
diff --git a/packages/edit-post/src/components/visual-editor/test/__snapshots__/index.native.js.snap b/packages/edit-post/src/components/visual-editor/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..de7091fa947357
--- /dev/null
+++ b/packages/edit-post/src/components/visual-editor/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when nothing is selected media buttons and picker display correctly 1`] = `
+"<!-- wp:paragraph -->
+<p>First example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second example paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;
diff --git a/packages/edit-post/src/components/visual-editor/test/index.native.js b/packages/edit-post/src/components/visual-editor/test/index.native.js
index 5c527d22bc5b38..8c6e041880a830 100644
--- a/packages/edit-post/src/components/visual-editor/test/index.native.js
+++ b/packages/edit-post/src/components/visual-editor/test/index.native.js
@@ -1,11 +1,12 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent } from 'test/helpers';
+import { initializeEditor, getEditorHtml, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
+import { Platform } from '@wordpress/element';
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
@@ -21,6 +22,12 @@ afterAll( () => {
 	} );
 } );
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'WordPress Media Library',
+];
+
 const initialHtml = `
 <!-- wp:paragraph -->
 <p>First example paragraph.</p>
@@ -38,7 +45,9 @@ describe( 'when title is focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
 
 		// Focus title
 		fireEvent(
@@ -50,14 +59,49 @@ describe( 'when title is focused', () => {
 		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
-		expect( screen.getByLabelText( /Heading Block. Row 1/ ) ).toBeDefined();
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 2/ )
+			screen.getAllByLabelText( /Heading Block. Row 1/ )[ 0 ]
 		).toBeDefined();
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 3/ )
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
+		).toBeDefined();
+
+		expect(
+			screen.getAllByLabelText( /Paragraph Block. Row 3/ )[ 0 ]
 		).toBeDefined();
 	} );
+
+	it( 'media blocks should be displayed', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
+
+		// Focus title
+		fireEvent(
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Assert that the media buttons are visible
+		const imageButton = await screen.findByTestId( 'insert-image-button' );
+		expect( imageButton ).toBeVisible();
+
+		const videoButton = await screen.findByTestId( 'insert-video-button' );
+		expect( videoButton ).toBeVisible();
+
+		const galleryButton = await screen.findByTestId(
+			'insert-gallery-button'
+		);
+		expect( galleryButton ).toBeVisible();
+
+		const audioButton = await screen.findByTestId( 'insert-audio-button' );
+		expect( audioButton ).toBeVisible();
+	} );
 } );
 
 describe( 'when title is no longer focused', () => {
@@ -67,7 +111,9 @@ describe( 'when title is no longer focused', () => {
 		} );
 
 		// Focus first block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 1/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
 
 		// Focus title
 		fireEvent(
@@ -76,18 +122,100 @@ describe( 'when title is no longer focused', () => {
 		);
 
 		// Focus last block
-		fireEvent.press( screen.getByLabelText( /Paragraph Block. Row 2/ ) );
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
+		);
 
 		// Add new Heading block
 		fireEvent.press( screen.getByLabelText( 'Add block' ) );
 		fireEvent.press( screen.getByText( 'Heading' ) );
 
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 1/ )
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
 		).toBeDefined();
 		expect(
-			screen.getByLabelText( /Paragraph Block. Row 2/ )
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
 		).toBeDefined();
-		expect( screen.getByLabelText( /Heading Block. Row 3/ ) ).toBeDefined();
+		expect(
+			screen.getAllByLabelText( /Heading Block. Row 3/ )[ 0 ]
+		).toBeDefined();
+	} );
+
+	it( 'media blocks should not be displayed', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Focus first block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 1/ )[ 0 ]
+		);
+
+		// Focus title
+		fireEvent(
+			screen.getAllByLabelText( 'Post title. test' )[ 0 ],
+			'select'
+		);
+
+		// Focus last block
+		fireEvent.press(
+			screen.getAllByLabelText( /Paragraph Block. Row 2/ )[ 0 ]
+		);
+
+		// Assert that the media buttons are not visible
+		const imageButton = screen.queryByTestId( 'insert-image-button' );
+		expect( imageButton ).toBeNull();
+
+		const videoButton = screen.queryByTestId( 'insert-video-button' );
+		expect( videoButton ).toBeNull();
+
+		const galleryButton = screen.queryByTestId( 'insert-gallery-button' );
+		expect( galleryButton ).toBeNull();
+
+		const audioButton = screen.queryByTestId( 'insert-audio-button' );
+		expect( audioButton ).toBeNull();
+	} );
+} );
+
+describe( 'when nothing is selected', () => {
+	it( 'media buttons and picker display correctly', async () => {
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const { getByText, getByTestId } = screen;
+
+		// Check that the gallery button is visible within the toolbar
+		const galleryButton = await screen.queryByTestId(
+			'insert-gallery-button'
+		);
+		expect( galleryButton ).toBeVisible();
+
+		// Press the toolbar Gallery button
+		fireEvent.press( galleryButton );
+
+		// Expect the block to be created
+		expect(
+			screen.getAllByLabelText( /Gallery Block. Row 3/ )[ 0 ]
+		).toBeDefined();
+
+		expect( getByText( 'Choose images' ) ).toBeVisible();
+		MEDIA_OPTIONS.forEach( ( option ) =>
+			expect( getByText( option ) ).toBeVisible()
+		);
+
+		// Dismiss the picker
+		if ( Platform.isIOS ) {
+			fireEvent.press( getByText( 'Cancel' ) );
+		} else {
+			fireEvent( getByTestId( 'media-options-picker' ), 'backdropPress' );
+		}
+
+		// Expect the Gallery block to remain
+		expect(
+			screen.getAllByLabelText( /Gallery Block. Row 3/ )[ 0 ]
+		).toBeDefined();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/edit-post/src/components/welcome-guide/default.js b/packages/edit-post/src/components/welcome-guide/default.js
index d83eab0fa13ddb..deb4b70c3ad529 100644
--- a/packages/edit-post/src/components/welcome-guide/default.js
+++ b/packages/edit-post/src/components/welcome-guide/default.js
@@ -18,7 +18,7 @@ export default function WelcomeGuideDefault() {
 	return (
 		<Guide
 			className="edit-post-welcome-guide"
-			contentLabel={ __( 'Welcome to the block editor' ) }
+			contentLabel={ __( 'Welcome to the editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
 			pages={ [
@@ -32,7 +32,7 @@ export default function WelcomeGuideDefault() {
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
-								{ __( 'Welcome to the block editor' ) }
+								{ __( 'Welcome to the editor' ) }
 							</h1>
 							<p className="edit-post-welcome-guide__text">
 								{ __(
@@ -52,7 +52,7 @@ export default function WelcomeGuideDefault() {
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
-								{ __( 'Make each block your own' ) }
+								{ __( 'Customize each block' ) }
 							</h1>
 							<p className="edit-post-welcome-guide__text">
 								{ __(
@@ -72,7 +72,7 @@ export default function WelcomeGuideDefault() {
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
-								{ __( 'Get to know the block library' ) }
+								{ __( 'Explore all blocks' ) }
 							</h1>
 							<p className="edit-post-welcome-guide__text">
 								{ createInterpolateElement(
@@ -102,19 +102,23 @@ export default function WelcomeGuideDefault() {
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
-								{ __( 'Learn how to use the block editor' ) }
+								{ __( 'Learn more' ) }
 							</h1>
 							<p className="edit-post-welcome-guide__text">
-								{ __(
-									'New to the block editor? Want to learn more about using it? '
+								{ createInterpolateElement(
+									__(
+										"New to the block editor? Want to learn more about using it? <a>Here's a detailed guide.</a>"
+									),
+									{
+										a: (
+											<ExternalLink
+												href={ __(
+													'https://wordpress.org/documentation/article/wordpress-block-editor/'
+												) }
+											/>
+										),
+									}
 								) }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/support/article/wordpress-editor/'
-									) }
-								>
-									{ __( "Here's a detailed guide." ) }
-								</ExternalLink>
 							</p>
 						</>
 					),
diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js
index 3be635c81e316e..fc7039fd7a87a3 100644
--- a/packages/edit-post/src/components/welcome-guide/index.js
+++ b/packages/edit-post/src/components/welcome-guide/index.js
@@ -10,23 +10,30 @@ import WelcomeGuideDefault from './default';
 import WelcomeGuideTemplate from './template';
 import { store as editPostStore } from '../../store';
 
-export default function WelcomeGuide() {
-	const { isActive, isTemplateMode } = useSelect( ( select ) => {
-		const { isFeatureActive, isEditingTemplate } = select( editPostStore );
-		const _isTemplateMode = isEditingTemplate();
-		const feature = _isTemplateMode
-			? 'welcomeGuideTemplate'
-			: 'welcomeGuide';
+export default function WelcomeGuide( { postType } ) {
+	const { isActive, isEditingTemplate } = useSelect(
+		( select ) => {
+			const { isFeatureActive } = select( editPostStore );
+			const _isEditingTemplate = postType === 'wp_template';
+			const feature = _isEditingTemplate
+				? 'welcomeGuideTemplate'
+				: 'welcomeGuide';
 
-		return {
-			isActive: isFeatureActive( feature ),
-			isTemplateMode: _isTemplateMode,
-		};
-	}, [] );
+			return {
+				isActive: isFeatureActive( feature ),
+				isEditingTemplate: _isEditingTemplate,
+			};
+		},
+		[ postType ]
+	);
 
 	if ( ! isActive ) {
 		return null;
 	}
 
-	return isTemplateMode ? <WelcomeGuideTemplate /> : <WelcomeGuideDefault />;
+	return isEditingTemplate ? (
+		<WelcomeGuideTemplate />
+	) : (
+		<WelcomeGuideDefault />
+	);
 }
diff --git a/packages/edit-post/src/deprecated.js b/packages/edit-post/src/deprecated.js
new file mode 100644
index 00000000000000..0e736cb2459ea8
--- /dev/null
+++ b/packages/edit-post/src/deprecated.js
@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as editorPrivateApis,
+	PluginBlockSettingsMenuItem as EditorPluginBlockSettingsMenuItem,
+	PluginDocumentSettingPanel as EditorPluginDocumentSettingPanel,
+	PluginMoreMenuItem as EditorPluginMoreMenuItem,
+	PluginPrePublishPanel as EditorPluginPrePublishPanel,
+	PluginPostPublishPanel as EditorPluginPostPublishPanel,
+	PluginPostStatusInfo as EditorPluginPostStatusInfo,
+	PluginSidebar as EditorPluginSidebar,
+	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
+} from '@wordpress/editor';
+import { getPath } from '@wordpress/url';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+const { PluginPostExcerpt } = unlock( editorPrivateApis );
+
+const isSiteEditor = getPath( window.location.href )?.includes(
+	'site-editor.php'
+);
+
+const deprecateSlot = ( name ) => {
+	deprecated( `wp.editPost.${ name }`, {
+		since: '6.6',
+		alternative: `wp.editor.${ name }`,
+	} );
+};
+
+/* eslint-disable jsdoc/require-param */
+/**
+ * @see PluginBlockSettingsMenuItem in @wordpress/editor package.
+ */
+export function PluginBlockSettingsMenuItem( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginBlockSettingsMenuItem' );
+	return <EditorPluginBlockSettingsMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginDocumentSettingPanel in @wordpress/editor package.
+ */
+export function PluginDocumentSettingPanel( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginDocumentSettingPanel' );
+	return <EditorPluginDocumentSettingPanel { ...props } />;
+}
+
+/**
+ * @see PluginMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginMoreMenuItem( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginMoreMenuItem' );
+	return <EditorPluginMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginPrePublishPanel in @wordpress/editor package.
+ */
+export function PluginPrePublishPanel( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginPrePublishPanel' );
+	return <EditorPluginPrePublishPanel { ...props } />;
+}
+
+/**
+ * @see PluginPostPublishPanel in @wordpress/editor package.
+ */
+export function PluginPostPublishPanel( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginPostPublishPanel' );
+	return <EditorPluginPostPublishPanel { ...props } />;
+}
+
+/**
+ * @see PluginPostStatusInfo in @wordpress/editor package.
+ */
+export function PluginPostStatusInfo( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginPostStatusInfo' );
+	return <EditorPluginPostStatusInfo { ...props } />;
+}
+
+/**
+ * @see PluginSidebar in @wordpress/editor package.
+ */
+export function PluginSidebar( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginSidebar' );
+	return <EditorPluginSidebar { ...props } />;
+}
+
+/**
+ * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginSidebarMoreMenuItem( props ) {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginSidebarMoreMenuItem' );
+	return <EditorPluginSidebarMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginPostExcerpt in @wordpress/editor package.
+ */
+export function __experimentalPluginPostExcerpt() {
+	if ( isSiteEditor ) {
+		return null;
+	}
+	deprecated( 'wp.editPost.__experimentalPluginPostExcerpt', {
+		since: '6.6',
+		hint: 'Core and custom panels can be access programmatically using their panel name.',
+		link: 'https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-document-setting-panel/#accessing-a-panel-programmatically',
+	} );
+	return PluginPostExcerpt;
+}
+
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
deleted file mode 100644
index 9c0a4880344897..00000000000000
--- a/packages/edit-post/src/editor.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	EditorProvider,
-	ErrorBoundary,
-	PostLockedModal,
-	store as editorStore,
-} from '@wordpress/editor';
-import { StrictMode, useMemo } from '@wordpress/element';
-import { SlotFillProvider } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import Layout from './components/layout';
-import EditorInitialization from './components/editor-initialization';
-import { store as editPostStore } from './store';
-
-function Editor( {
-	postId,
-	postType,
-	settings,
-	initialEdits,
-	onError,
-	...props
-} ) {
-	const {
-		hasFixedToolbar,
-		focusMode,
-		isDistractionFree,
-		hasInlineToolbar,
-		hasThemeStyles,
-		post,
-		preferredStyleVariations,
-		hiddenBlockTypes,
-		blockTypes,
-		keepCaretInsideBlock,
-		isTemplateMode,
-		template,
-	} = useSelect(
-		( select ) => {
-			const {
-				isFeatureActive,
-				__experimentalGetPreviewDeviceType,
-				isEditingTemplate,
-				getEditedPostTemplate,
-				getHiddenBlockTypes,
-			} = select( editPostStore );
-			const { getEntityRecord, getPostType, getEntityRecords, canUser } =
-				select( coreStore );
-			const { getEditorSettings } = select( editorStore );
-			const { getBlockTypes } = select( blocksStore );
-			const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
-				postType
-			);
-			// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
-			// to avoid the special case.
-			let postObject;
-			if ( isTemplate ) {
-				const posts = getEntityRecords( 'postType', postType, {
-					wp_id: postId,
-				} );
-				postObject = posts?.[ 0 ];
-			} else {
-				postObject = getEntityRecord( 'postType', postType, postId );
-			}
-			const supportsTemplateMode =
-				getEditorSettings().supportsTemplateMode;
-			const isViewable = getPostType( postType )?.viewable ?? false;
-			const canEditTemplate = canUser( 'create', 'templates' );
-
-			return {
-				hasFixedToolbar:
-					isFeatureActive( 'fixedToolbar' ) ||
-					__experimentalGetPreviewDeviceType() !== 'Desktop',
-				focusMode: isFeatureActive( 'focusMode' ),
-				isDistractionFree: isFeatureActive( 'distractionFree' ),
-				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
-				hasThemeStyles: isFeatureActive( 'themeStyles' ),
-				preferredStyleVariations: select( preferencesStore ).get(
-					'core/edit-post',
-					'preferredStyleVariations'
-				),
-				hiddenBlockTypes: getHiddenBlockTypes(),
-				blockTypes: getBlockTypes(),
-				keepCaretInsideBlock: isFeatureActive( 'keepCaretInsideBlock' ),
-				isTemplateMode: isEditingTemplate(),
-				template:
-					supportsTemplateMode && isViewable && canEditTemplate
-						? getEditedPostTemplate()
-						: null,
-				post: postObject,
-			};
-		},
-		[ postType, postId ]
-	);
-
-	const { updatePreferredStyleVariations, setIsInserterOpened } =
-		useDispatch( editPostStore );
-
-	const editorSettings = useMemo( () => {
-		const result = {
-			...settings,
-			__experimentalPreferredStyleVariations: {
-				value: preferredStyleVariations,
-				onChange: updatePreferredStyleVariations,
-			},
-			hasFixedToolbar,
-			focusMode,
-			isDistractionFree,
-			hasInlineToolbar,
-
-			// This is marked as experimental to give time for the quick inserter to mature.
-			__experimentalSetIsInserterOpened: setIsInserterOpened,
-			keepCaretInsideBlock,
-			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
-			// where we need to differentiate if a block is disabled by the user or some plugin.
-			defaultAllowedBlockTypes: settings.allowedBlockTypes,
-		};
-
-		// Omit hidden block types if exists and non-empty.
-		if ( hiddenBlockTypes.length > 0 ) {
-			// Defer to passed setting for `allowedBlockTypes` if provided as
-			// anything other than `true` (where `true` is equivalent to allow
-			// all block types).
-			const defaultAllowedBlockTypes =
-				true === settings.allowedBlockTypes
-					? map( blockTypes, 'name' )
-					: settings.allowedBlockTypes || [];
-
-			result.allowedBlockTypes = defaultAllowedBlockTypes.filter(
-				( type ) => ! hiddenBlockTypes.includes( type )
-			);
-		}
-
-		return result;
-	}, [
-		settings,
-		hasFixedToolbar,
-		focusMode,
-		isDistractionFree,
-		hiddenBlockTypes,
-		blockTypes,
-		preferredStyleVariations,
-		setIsInserterOpened,
-		updatePreferredStyleVariations,
-		keepCaretInsideBlock,
-	] );
-
-	const styles = useMemo( () => {
-		const themeStyles = [];
-		const presetStyles = [];
-		settings.styles?.forEach( ( style ) => {
-			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
-				themeStyles.push( style );
-			} else {
-				presetStyles.push( style );
-			}
-		} );
-		const defaultEditorStyles = [
-			...settings.defaultEditorStyles,
-			...presetStyles,
-		];
-		return hasThemeStyles && themeStyles.length
-			? settings.styles
-			: defaultEditorStyles;
-	}, [ settings, hasThemeStyles ] );
-
-	if ( ! post ) {
-		return null;
-	}
-
-	return (
-		<StrictMode>
-			<ShortcutProvider>
-				<SlotFillProvider>
-					<EditorProvider
-						settings={ editorSettings }
-						post={ post }
-						initialEdits={ initialEdits }
-						useSubRegistry={ false }
-						__unstableTemplate={
-							isTemplateMode ? template : undefined
-						}
-						{ ...props }
-					>
-						<ErrorBoundary onError={ onError }>
-							<EditorInitialization postId={ postId } />
-							<Layout styles={ styles } />
-						</ErrorBoundary>
-						<PostLockedModal />
-					</EditorProvider>
-				</SlotFillProvider>
-			</ShortcutProvider>
-		</StrictMode>
-	);
-}
-
-export default Editor;
diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
index 51e0ed6764db01..69185a5f3073e6 100644
--- a/packages/edit-post/src/editor.native.js
+++ b/packages/edit-post/src/editor.native.js
@@ -2,15 +2,19 @@
  * External dependencies
  */
 import memize from 'memize';
-import { map } from 'lodash';
 import { I18nManager } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider } from '@wordpress/editor';
-import { parse, serialize, store as blocksStore } from '@wordpress/blocks';
+import {
+	EditorProvider,
+	ErrorBoundary,
+	store as editorStore,
+} from '@wordpress/editor';
+import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import {
@@ -24,17 +28,11 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import Layout from './components/layout';
-import { store as editPostStore } from './store';
 
 class Editor extends Component {
 	constructor( props ) {
 		super( ...arguments );
 
-		// need to set this globally to avoid race with deprecations
-		// defaulting to true to avoid issues with a not-yet-cached value
-		const { galleryWithImageBlocks = true } = props;
-		window.wp.galleryBlockV2Enabled = galleryWithImageBlocks;
-
 		if ( props.initialHtmlModeEnabled && props.mode === 'visual' ) {
 			// Enable html mode if the initial mode the parent wants it but we're not already in it.
 			this.props.switchEditorMode( 'text' );
@@ -47,40 +45,12 @@ class Editor extends Component {
 		this.setTitleRef = this.setTitleRef.bind( this );
 	}
 
-	getEditorSettings(
-		settings,
-		hasFixedToolbar,
-		focusMode,
-		hiddenBlockTypes,
-		blockTypes
-	) {
+	getEditorSettings( settings ) {
 		settings = {
 			...settings,
 			isRTL: I18nManager.isRTL,
-			hasFixedToolbar,
-			focusMode,
 		};
 
-		// Omit hidden block types if exists and non-empty.
-		if ( hiddenBlockTypes.length > 0 ) {
-			if ( settings.allowedBlockTypes === undefined ) {
-				// If no specific flags for allowedBlockTypes are set, assume `true`
-				// meaning allow all block types.
-				settings.allowedBlockTypes = true;
-			}
-			// Defer to passed setting for `allowedBlockTypes` if provided as
-			// anything other than `true` (where `true` is equivalent to allow
-			// all block types).
-			const defaultAllowedBlockTypes =
-				true === settings.allowedBlockTypes
-					? map( blockTypes, 'name' )
-					: settings.allowedBlockTypes || [];
-
-			settings.allowedBlockTypes = defaultAllowedBlockTypes.filter(
-				( type ) => ! hiddenBlockTypes.includes( type )
-			);
-		}
-
 		return settings;
 	}
 
@@ -134,11 +104,7 @@ class Editor extends Component {
 	render() {
 		const {
 			settings,
-			hasFixedToolbar,
-			focusMode,
 			initialEdits,
-			hiddenBlockTypes,
-			blockTypes,
 			post,
 			postId,
 			postType,
@@ -147,13 +113,7 @@ class Editor extends Component {
 			...props
 		} = this.props;
 
-		const editorSettings = this.getEditorSettings(
-			settings,
-			hasFixedToolbar,
-			focusMode,
-			hiddenBlockTypes,
-			blockTypes
-		);
+		const editorSettings = this.getEditorSettings( settings );
 
 		const normalizedPost = post || {
 			id: postId,
@@ -173,43 +133,35 @@ class Editor extends Component {
 		};
 
 		return (
-			<SlotFillProvider>
-				<EditorProvider
-					settings={ editorSettings }
-					post={ normalizedPost }
-					initialEdits={ initialEdits }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<Layout setTitleRef={ this.setTitleRef } />
-				</EditorProvider>
-			</SlotFillProvider>
+			<GestureHandlerRootView style={ { flex: 1 } }>
+				<SlotFillProvider>
+					<EditorProvider
+						settings={ editorSettings }
+						post={ normalizedPost }
+						initialEdits={ initialEdits }
+						useSubRegistry={ false }
+						{ ...props }
+					>
+						<ErrorBoundary>
+							<Layout setTitleRef={ this.setTitleRef } />
+						</ErrorBoundary>
+					</EditorProvider>
+				</SlotFillProvider>
+			</GestureHandlerRootView>
 		);
 	}
 }
 
 export default compose( [
 	withSelect( ( select ) => {
-		const {
-			isFeatureActive,
-			getEditorMode,
-			__experimentalGetPreviewDeviceType,
-			getHiddenBlockTypes,
-		} = select( editPostStore );
-		const { getBlockTypes } = select( blocksStore );
+		const { getEditorMode } = select( editorStore );
 
 		return {
-			hasFixedToolbar:
-				isFeatureActive( 'fixedToolbar' ) ||
-				__experimentalGetPreviewDeviceType() !== 'Desktop',
-			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
-			hiddenBlockTypes: getHiddenBlockTypes(),
-			blockTypes: getBlockTypes(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { switchEditorMode } = dispatch( editPostStore );
+		const { switchEditorMode } = dispatch( editorStore );
 		const { editEntityRecord } = dispatch( coreStore );
 		return {
 			switchEditorMode,
diff --git a/packages/edit-post/src/hooks/components/index.js b/packages/edit-post/src/hooks/components/index.js
deleted file mode 100644
index 709d89d013ed5a..00000000000000
--- a/packages/edit-post/src/hooks/components/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { MediaUpload } from '@wordpress/media-utils';
-
-const replaceMediaUpload = () => MediaUpload;
-
-addFilter(
-	'editor.MediaUpload',
-	'core/edit-post/replace-media-upload',
-	replaceMediaUpload
-);
diff --git a/packages/edit-post/src/hooks/index.js b/packages/edit-post/src/hooks/index.js
deleted file mode 100644
index dc90f62760a7d1..00000000000000
--- a/packages/edit-post/src/hooks/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/**
- * Internal dependencies
- */
-import './components';
-import './validate-multiple-use';
diff --git a/packages/edit-post/src/hooks/use-navigate-to-entity-record.js b/packages/edit-post/src/hooks/use-navigate-to-entity-record.js
new file mode 100644
index 00000000000000..b8c39865ecee8a
--- /dev/null
+++ b/packages/edit-post/src/hooks/use-navigate-to-entity-record.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useReducer } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * A hook that records the 'entity' history in the post editor as a user
+ * navigates between editing a post and editing the post template or patterns.
+ *
+ * Implemented as a stack, so a little similar to the browser history API.
+ *
+ * Used to control displaying UI elements like the back button.
+ *
+ * @param {number} initialPostId        The post id of the post when the editor loaded.
+ * @param {string} initialPostType      The post type of the post when the editor loaded.
+ * @param {string} defaultRenderingMode The rendering mode to switch to when navigating.
+ *
+ * @return {Object} An object containing the `currentPost` variable and
+ *                 `onNavigateToEntityRecord` and `onNavigateToPreviousEntityRecord` functions.
+ */
+export default function useNavigateToEntityRecord(
+	initialPostId,
+	initialPostType,
+	defaultRenderingMode
+) {
+	const [ postHistory, dispatch ] = useReducer(
+		( historyState, { type, post, previousRenderingMode } ) => {
+			if ( type === 'push' ) {
+				return [ ...historyState, { post, previousRenderingMode } ];
+			}
+			if ( type === 'pop' ) {
+				// Try to leave one item in the history.
+				if ( historyState.length > 1 ) {
+					return historyState.slice( 0, -1 );
+				}
+			}
+			return historyState;
+		},
+		[
+			{
+				post: { postId: initialPostId, postType: initialPostType },
+			},
+		]
+	);
+
+	const { post, previousRenderingMode } =
+		postHistory[ postHistory.length - 1 ];
+
+	const { getRenderingMode } = useSelect( editorStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	const onNavigateToEntityRecord = useCallback(
+		( params ) => {
+			dispatch( {
+				type: 'push',
+				post: { postId: params.postId, postType: params.postType },
+				// Save the current rendering mode so we can restore it when navigating back.
+				previousRenderingMode: getRenderingMode(),
+			} );
+			setRenderingMode( defaultRenderingMode );
+		},
+		[ getRenderingMode, setRenderingMode, defaultRenderingMode ]
+	);
+
+	const onNavigateToPreviousEntityRecord = useCallback( () => {
+		dispatch( { type: 'pop' } );
+		if ( previousRenderingMode ) {
+			setRenderingMode( previousRenderingMode );
+		}
+	}, [ setRenderingMode, previousRenderingMode ] );
+
+	return {
+		currentPost: post,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord:
+			postHistory.length > 1
+				? onNavigateToPreviousEntityRecord
+				: undefined,
+	};
+}
diff --git a/packages/edit-post/src/hooks/validate-multiple-use/index.js b/packages/edit-post/src/hooks/validate-multiple-use/index.js
deleted file mode 100644
index 9507f56cf085f1..00000000000000
--- a/packages/edit-post/src/hooks/validate-multiple-use/index.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	findTransform,
-	getBlockTransforms,
-	getBlockType,
-	hasBlockSupport,
-} from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { Warning, store as blockEditorStore } from '@wordpress/block-editor';
-import { addFilter } from '@wordpress/hooks';
-import { __ } from '@wordpress/i18n';
-import { compose, createHigherOrderComponent } from '@wordpress/compose';
-
-const enhance = compose(
-	/**
-	 * For blocks whose block type doesn't support `multiple`, provides the
-	 * wrapped component with `originalBlockClientId` -- a reference to the
-	 * first block of the same type in the content -- if and only if that
-	 * "original" block is not the current one. Thus, an inexisting
-	 * `originalBlockClientId` prop signals that the block is valid.
-	 *
-	 * @param {WPComponent} WrappedBlockEdit A filtered BlockEdit instance.
-	 *
-	 * @return {WPComponent} Enhanced component with merged state data props.
-	 */
-	withSelect( ( select, block ) => {
-		const multiple = hasBlockSupport( block.name, 'multiple', true );
-
-		// For block types with `multiple` support, there is no "original
-		// block" to be found in the content, as the block itself is valid.
-		if ( multiple ) {
-			return {};
-		}
-
-		// Otherwise, only pass `originalBlockClientId` if it refers to a different
-		// block from the current one.
-		const blocks = select( blockEditorStore ).getBlocks();
-		const firstOfSameType = find(
-			blocks,
-			( { name } ) => block.name === name
-		);
-		const isInvalid =
-			firstOfSameType && firstOfSameType.clientId !== block.clientId;
-		return {
-			originalBlockClientId: isInvalid && firstOfSameType.clientId,
-		};
-	} ),
-	withDispatch( ( dispatch, { originalBlockClientId } ) => ( {
-		selectFirst: () =>
-			dispatch( blockEditorStore ).selectBlock( originalBlockClientId ),
-	} ) )
-);
-
-const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
-	return enhance( ( { originalBlockClientId, selectFirst, ...props } ) => {
-		if ( ! originalBlockClientId ) {
-			return <BlockEdit { ...props } />;
-		}
-
-		const blockType = getBlockType( props.name );
-		const outboundType = getOutboundType( props.name );
-
-		return [
-			<div key="invalid-preview" style={ { minHeight: '60px' } }>
-				<BlockEdit key="block-edit" { ...props } />
-			</div>,
-			<Warning
-				key="multiple-use-warning"
-				actions={ [
-					<Button
-						key="find-original"
-						variant="secondary"
-						onClick={ selectFirst }
-					>
-						{ __( 'Find original' ) }
-					</Button>,
-					<Button
-						key="remove"
-						variant="secondary"
-						onClick={ () => props.onReplace( [] ) }
-					>
-						{ __( 'Remove' ) }
-					</Button>,
-					outboundType && (
-						<Button
-							key="transform"
-							variant="secondary"
-							onClick={ () =>
-								props.onReplace(
-									createBlock(
-										outboundType.name,
-										props.attributes
-									)
-								)
-							}
-						>
-							{ __( 'Transform into:' ) } { outboundType.title }
-						</Button>
-					),
-				] }
-			>
-				<strong>{ blockType?.title }: </strong>
-				{ __( 'This block can only be used once.' ) }
-			</Warning>,
-		];
-	} );
-}, 'withMultipleValidation' );
-
-/**
- * Given a base block name, returns the default block type to which to offer
- * transforms.
- *
- * @param {string} blockName Base block name.
- *
- * @return {?Object} The chosen default block type.
- */
-function getOutboundType( blockName ) {
-	// Grab the first outbound transform.
-	const transform = findTransform(
-		getBlockTransforms( 'to', blockName ),
-		( { type, blocks } ) => type === 'block' && blocks.length === 1 // What about when .length > 1?
-	);
-
-	if ( ! transform ) {
-		return null;
-	}
-
-	return getBlockType( transform.blocks[ 0 ] );
-}
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-post/validate-multiple-use/with-multiple-validation',
-	withMultipleValidation
-);
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 5b7c4e01ead7b1..b01fa693ed5a7c 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -6,61 +6,29 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	registerLegacyWidgetBlock,
+	registerWidgetGroupBlock,
+} from '@wordpress/widgets';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import './hooks';
-import './plugins';
-import Editor from './editor';
-import { store as editPostStore } from './store';
-
-/**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
- *
- * @param {Object}  postType     Post type of the post to edit.
- * @param {Object}  postId       ID of the post to edit.
- * @param {Element} target       DOM node in which editor is rendered.
- * @param {?Object} settings     Editor settings object.
- * @param {Object}  initialEdits Programmatic edits to apply initially, to be
- *                               considered as non-user-initiated (bypass for
- *                               unsaved changes prompt).
- */
-export function reinitializeEditor(
-	postType,
-	postId,
-	target,
-	settings,
-	initialEdits
-) {
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
+import Layout from './components/layout';
+import { unlock } from './lock-unlock';
 
-	render(
-		<Editor
-			settings={ settings }
-			onError={ reboot }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-			recovery
-		/>,
-		target
-	);
-}
+const {
+	BackButton: __experimentalMainDashboardButton,
+	registerCoreBlockBindingsSources,
+} = unlock( editorPrivateApis );
 
 /**
  * Initializes and returns an instance of Editor.
@@ -80,67 +48,62 @@ export function initializeEditor(
 	settings,
 	initialEdits
 ) {
+	const isMediumOrBigger = window.matchMedia( '(min-width: 782px)' ).matches;
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
+	const root = createRoot( target );
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
+		fullscreenMode: true,
+		themeStyles: true,
+		welcomeGuide: true,
+		welcomeGuideTemplate: true,
+	} );
+
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
 		editorMode: 'visual',
+		editorTool: 'edit',
 		fixedToolbar: false,
-		fullscreenMode: true,
 		hiddenBlockTypes: [],
 		inactivePanels: [],
-		isPublishSidebarEnabled: true,
 		openPanels: [ 'post-status' ],
-		preferredStyleVariations: {},
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		showListViewByDefault: false,
-		themeStyles: true,
-		welcomeGuide: true,
-		welcomeGuideTemplate: true,
+		enableChoosePatternModal: true,
+		isPublishSidebarEnabled: true,
 	} );
 
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	if ( window.__experimentalMediaProcessing ) {
+		dispatch( preferencesStore ).setDefaults( 'core/media', {
+			requireApproval: true,
+			optimizeOnUpload: true,
+		} );
+	}
+
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
 
 	// Check if the block list view should be open by default.
-	if ( select( editPostStore ).isFeatureActive( 'showListViewByDefault' ) ) {
-		dispatch( editPostStore ).setIsListViewOpened( true );
+	// If `distractionFree` mode is enabled, the block list view should not be open.
+	// This behavior is disabled for small viewports.
+	if (
+		isMediumOrBigger &&
+		select( preferencesStore ).get( 'core', 'showListViewByDefault' ) &&
+		! select( preferencesStore ).get( 'core', 'distractionFree' )
+	) {
+		dispatch( editorStore ).setIsListViewOpened( true );
 	}
 
 	registerCoreBlocks();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	registerCoreBlockBindingsSources();
+	registerLegacyWidgetBlock( { inserter: false } );
+	registerWidgetGroupBlock( { inserter: false } );
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: settings.__unstableEnableFullSiteEditingBlocks,
 		} );
 	}
 
-	/*
-	 * Prevent adding template part in the post editor.
-	 * Only add the filter when the post editor is initialized, not imported.
-	 * Also only add the filter(s) after registerCoreBlocks()
-	 * so that common filters in the block library are not overwritten.
-	 */
-	addFilter(
-		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromInserter',
-		( canInsert, blockType ) => {
-			if (
-				! select( editPostStore ).isEditingTemplate() &&
-				blockType.name === 'core/template-part'
-			) {
-				return false;
-			}
-			return canInsert;
-		}
-	);
-
 	// Show a console log warning if the browser is not in Standards rendering mode.
 	const documentMode =
 		document.compatMode === 'CSS1Compat' ? 'Standards' : 'Quirks';
@@ -185,26 +148,31 @@ export function initializeEditor(
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
-		<Editor
-			settings={ settings }
-			onError={ reboot }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-		/>,
-		target
+	root.render(
+		<StrictMode>
+			<Layout
+				settings={ settings }
+				postId={ postId }
+				postType={ postType }
+				initialEdits={ initialEdits }
+			/>
+		</StrictMode>
 	);
+
+	return root;
+}
+
+/**
+ * Used to reinitialize the editor after an error. Now it's a deprecated noop function.
+ */
+export function reinitializeEditor() {
+	deprecated( 'wp.editPost.reinitializeEditor', {
+		since: '6.2',
+		version: '6.3',
+	} );
 }
 
-export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
-export { default as PluginDocumentSettingPanel } from './components/sidebar/plugin-document-setting-panel';
-export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
-export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
-export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
-export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
-export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
-export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
-export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
+export { default as __experimentalFullscreenModeClose } from './components/back-button/fullscreen-mode-close';
+export { __experimentalMainDashboardButton };
 export { store } from './store';
+export * from './deprecated';
diff --git a/packages/edit-post/src/index.native.js b/packages/edit-post/src/index.native.js
index b825d50ace0c01..d26ddf7b8a25cf 100644
--- a/packages/edit-post/src/index.native.js
+++ b/packages/edit-post/src/index.native.js
@@ -23,15 +23,19 @@ import Editor from './editor';
 export function initializeEditor( id, postType, postId ) {
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		editorMode: 'visual',
-		fixedToolbar: false,
 		fullscreenMode: true,
-		hiddenBlockTypes: [],
 		inactivePanels: [],
-		isPublishSidebarEnabled: true,
 		openPanels: [ 'post-status' ],
-		preferredStyleVariations: {},
 		welcomeGuide: true,
 	} );
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		editorTool: 'edit',
+		hiddenBlockTypes: [],
+		inactivePanels: [],
+		openPanels: [ 'post-status' ],
+		isPublishSidebarEnabled: true,
+		fixedToolbar: false,
+	} );
 
 	return <Editor postId={ postId } postType={ postType } />;
 }
diff --git a/packages/edit-post/src/lock-unlock.js b/packages/edit-post/src/lock-unlock.js
new file mode 100644
index 00000000000000..6ef97785cd0a67
--- /dev/null
+++ b/packages/edit-post/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/edit-post'
+	);
diff --git a/packages/edit-post/src/plugins/copy-content-menu-item/index.js b/packages/edit-post/src/plugins/copy-content-menu-item/index.js
deleted file mode 100644
index 3cbaf8697cd36d..00000000000000
--- a/packages/edit-post/src/plugins/copy-content-menu-item/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as editorStore } from '@wordpress/editor';
-
-export default function CopyContentMenuItem() {
-	const { createNotice } = useDispatch( noticesStore );
-	const getText = useSelect(
-		( select ) => () =>
-			select( editorStore ).getEditedPostAttribute( 'content' ),
-		[]
-	);
-
-	function onSuccess() {
-		createNotice( 'info', __( 'All content copied.' ), {
-			isDismissible: true,
-			type: 'snackbar',
-		} );
-	}
-
-	const ref = useCopyToClipboard( getText, onSuccess );
-
-	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
-}
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
deleted file mode 100644
index 94a5d4c98396cf..00000000000000
--- a/packages/edit-post/src/plugins/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem, VisuallyHidden } from '@wordpress/components';
-import { external } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { registerPlugin } from '@wordpress/plugins';
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-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';
-
-registerPlugin( 'edit-post', {
-	render() {
-		return (
-			<>
-				<ToolsMoreMenuGroup>
-					{ ( { onClose } ) => (
-						<>
-							<MenuItem
-								role="menuitem"
-								href={ addQueryArgs( 'edit.php', {
-									post_type: 'wp_block',
-								} ) }
-							>
-								{ __( 'Manage Reusable blocks' ) }
-							</MenuItem>
-							<KeyboardShortcutsHelpMenuItem
-								onSelect={ onClose }
-							/>
-							<WelcomeGuideMenuItem />
-							<CopyContentMenuItem />
-							<MenuItem
-								role="menuitem"
-								icon={ external }
-								href={ __(
-									'https://wordpress.org/support/article/wordpress-editor/'
-								) }
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								{ __( 'Help' ) }
-								<VisuallyHidden as="span">
-									{
-										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</VisuallyHidden>
-							</MenuItem>
-						</>
-					) }
-				</ToolsMoreMenuGroup>
-			</>
-		);
-	},
-} );
diff --git a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js b/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
deleted file mode 100644
index 69f7b35c3f1167..00000000000000
--- a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { withDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { displayShortcut } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export function KeyboardShortcutsHelpMenuItem( { openModal } ) {
-	return (
-		<MenuItem
-			onClick={ () => {
-				openModal( 'edit-post/keyboard-shortcut-help' );
-			} }
-			shortcut={ displayShortcut.access( 'h' ) }
-		>
-			{ __( 'Keyboard shortcuts' ) }
-		</MenuItem>
-	);
-}
-
-export default withDispatch( ( dispatch ) => {
-	const { openModal } = dispatch( editPostStore );
-
-	return {
-		openModal,
-	};
-} )( KeyboardShortcutsHelpMenuItem );
diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
deleted file mode 100644
index 24eec1114a0a7d..00000000000000
--- a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export default function WelcomeGuideMenuItem() {
-	const isTemplateMode = useSelect(
-		( select ) => select( editPostStore ).isEditingTemplate(),
-		[]
-	);
-
-	return (
-		<PreferenceToggleMenuItem
-			scope="core/edit-post"
-			name={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
-			label={ __( 'Welcome Guide' ) }
-		/>
-	);
-}
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d5d7056a0b7c24..85702ae1622851 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -1,21 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { speak } from '@wordpress/a11y';
-import { store as noticesStore } from '@wordpress/notices';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import deprecated from '@wordpress/deprecated';
+import { addAction } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getMetaBoxContainer } from '../utils/meta-boxes';
-import { store as editPostStore } from '.';
+import { unlock } from '../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
@@ -24,10 +28,11 @@ import { store as editPostStore } from '.';
  */
 export const openGeneralSidebar =
 	( name ) =>
-	( { registry } ) =>
+	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
-			.enableComplementaryArea( editPostStore.name, name );
+			.enableComplementaryArea( 'core', name );
+	};
 
 /**
  * Returns an action object signalling that the user closed the sidebar.
@@ -35,73 +40,100 @@ export const openGeneralSidebar =
 export const closeGeneralSidebar =
 	() =>
 	( { registry } ) =>
-		registry
-			.dispatch( interfaceStore )
-			.disableComplementaryArea( editPostStore.name );
+		registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );
 
 /**
  * Returns an action object used in signalling that the user opened a modal.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's action with the same name instead.
+ *
+ *
  * @param {string} name A string that uniquely identifies the modal.
  *
  * @return {Object} Action object.
  */
-export function openModal( name ) {
-	return {
-		type: 'OPEN_MODAL',
-		name,
+export const openModal =
+	( name ) =>
+	( { registry } ) => {
+		deprecated( "select( 'core/edit-post' ).openModal( name )", {
+			since: '6.3',
+			alternative: "select( 'core/interface').openModal( name )",
+		} );
+		return registry.dispatch( interfaceStore ).openModal( name );
 	};
-}
 
 /**
  * Returns an action object signalling that the user closed a modal.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's action with the same name instead.
+ *
  * @return {Object} Action object.
  */
-export function closeModal() {
-	return {
-		type: 'CLOSE_MODAL',
+export const closeModal =
+	() =>
+	( { registry } ) => {
+		deprecated( "select( 'core/edit-post' ).closeModal()", {
+			since: '6.3',
+			alternative: "select( 'core/interface').closeModal()",
+		} );
+		return registry.dispatch( interfaceStore ).closeModal();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user opened the publish
  * sidebar.
+ * @deprecated
  *
  * @return {Object} Action object
  */
-export function openPublishSidebar() {
-	return {
-		type: 'OPEN_PUBLISH_SIDEBAR',
+export const openPublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).openPublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').openPublishSidebar",
+		} );
+		registry.dispatch( editorStore ).openPublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user closed the
  * publish sidebar.
+ * @deprecated
  *
  * @return {Object} Action object.
  */
-export function closePublishSidebar() {
-	return {
-		type: 'CLOSE_PUBLISH_SIDEBAR',
+export const closePublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).closePublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').closePublishSidebar",
+		} );
+		registry.dispatch( editorStore ).closePublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used in signalling that the user toggles the publish sidebar.
+ * @deprecated
  *
  * @return {Object} Action object
  */
-export function togglePublishSidebar() {
-	return {
-		type: 'TOGGLE_PUBLISH_SIDEBAR',
+export const togglePublishSidebar =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).togglePublishSidebar", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').togglePublishSidebar",
+		} );
+		registry.dispatch( editorStore ).togglePublishSidebar();
 	};
-}
 
 /**
  * Returns an action object used to enable or disable a panel in the editor.
  *
+ * @deprecated
+ *
  * @param {string} panelName A string that identifies the panel to enable or disable.
  *
  * @return {Object} Action object.
@@ -109,73 +141,48 @@ export function togglePublishSidebar() {
 export const toggleEditorPanelEnabled =
 	( panelName ) =>
 	( { registry } ) => {
-		const inactivePanels =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'inactivePanels' ) ?? [];
-
-		const isPanelInactive = !! inactivePanels?.includes( panelName );
-
-		// If the panel is inactive, remove it to enable it, else add it to
-		// make it inactive.
-		let updatedInactivePanels;
-		if ( isPanelInactive ) {
-			updatedInactivePanels = inactivePanels.filter(
-				( invactivePanelName ) => invactivePanelName !== panelName
-			);
-		} else {
-			updatedInactivePanels = [ ...inactivePanels, panelName ];
-		}
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'inactivePanels', updatedInactivePanels );
+		deprecated( "dispatch( 'core/edit-post' ).toggleEditorPanelEnabled", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').toggleEditorPanelEnabled",
+		} );
+		registry.dispatch( editorStore ).toggleEditorPanelEnabled( panelName );
 	};
 
 /**
  * Opens a closed panel and closes an open panel.
  *
+ * @deprecated
+ *
  * @param {string} panelName A string that identifies the panel to open or close.
  */
 export const toggleEditorPanelOpened =
 	( panelName ) =>
 	( { registry } ) => {
-		const openPanels =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'openPanels' ) ?? [];
-
-		const isPanelOpen = !! openPanels?.includes( panelName );
-
-		// If the panel is open, remove it to close it, else add it to
-		// make it open.
-		let updatedOpenPanels;
-		if ( isPanelOpen ) {
-			updatedOpenPanels = openPanels.filter(
-				( openPanelName ) => openPanelName !== panelName
-			);
-		} else {
-			updatedOpenPanels = [ ...openPanels, panelName ];
-		}
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'openPanels', updatedOpenPanels );
+		deprecated( "dispatch( 'core/edit-post' ).toggleEditorPanelOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').toggleEditorPanelOpened",
+		} );
+		registry.dispatch( editorStore ).toggleEditorPanelOpened( panelName );
 	};
 
 /**
  * Returns an action object used to remove a panel from the editor.
  *
+ * @deprecated
+ *
  * @param {string} panelName A string that identifies the panel to remove.
  *
  * @return {Object} Action object.
  */
-export function removeEditorPanel( panelName ) {
-	return {
-		type: 'REMOVE_PANEL',
-		panelName,
+export const removeEditorPanel =
+	( panelName ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).removeEditorPanel", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').removeEditorPanel",
+		} );
+		registry.dispatch( editorStore ).removeEditorPanel( panelName );
 	};
-}
 
 /**
  * Triggers an action used to toggle a feature flag.
@@ -192,25 +199,18 @@ export const toggleFeature =
 /**
  * Triggers an action used to switch editor mode.
  *
+ * @deprecated
+ *
  * @param {string} mode The editor mode.
  */
 export const switchEditorMode =
 	( mode ) =>
 	( { registry } ) => {
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'editorMode', mode );
-
-		// Unselect blocks when we switch to the code editor.
-		if ( mode !== 'visual' ) {
-			registry.dispatch( blockEditorStore ).clearSelectedBlock();
-		}
-
-		const message =
-			mode === 'visual'
-				? __( 'Visual editor selected' )
-				: __( 'Code editor selected' );
-		speak( message, 'assertive' );
+		deprecated( "dispatch( 'core/edit-post' ).switchEditorMode", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').switchEditorMode",
+		} );
+		registry.dispatch( editorStore ).switchEditorMode( mode );
 	};
 
 /**
@@ -223,59 +223,25 @@ export const togglePinnedPluginItem =
 	( { registry } ) => {
 		const isPinned = registry
 			.select( interfaceStore )
-			.isItemPinned( 'core/edit-post', pluginName );
+			.isItemPinned( 'core', pluginName );
 
 		registry
 			.dispatch( interfaceStore )
-			[ isPinned ? 'unpinItem' : 'pinItem' ](
-				'core/edit-post',
-				pluginName
-			);
+			[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core', pluginName );
 	};
 
 /**
  * Returns an action object used in signaling that a style should be auto-applied when a block is created.
  *
- * @param {string}  blockName  Name of the block.
- * @param {?string} blockStyle Name of the style that should be auto applied. If undefined, the "auto apply" setting of the block is removed.
+ * @deprecated
  */
-export const updatePreferredStyleVariations =
-	( blockName, blockStyle ) =>
-	( { registry } ) => {
-		if ( ! blockName ) {
-			return;
-		}
-
-		const existingVariations =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'preferredStyleVariations' ) ?? {};
-
-		// When the blockStyle is omitted, remove the block's preferred variation.
-		if ( ! blockStyle ) {
-			const updatedVariations = {
-				...existingVariations,
-			};
-
-			delete updatedVariations[ blockName ];
-
-			registry
-				.dispatch( preferencesStore )
-				.set(
-					'core/edit-post',
-					'preferredStyleVariations',
-					updatedVariations
-				);
-		} else {
-			// Else add the variation.
-			registry
-				.dispatch( preferencesStore )
-				.set( 'core/edit-post', 'preferredStyleVariations', {
-					...existingVariations,
-					[ blockName ]: blockStyle,
-				} );
-		}
-	};
+export function updatePreferredStyleVariations() {
+	deprecated( "dispatch( 'core/edit-post' ).updatePreferredStyleVariations", {
+		since: '6.6',
+		hint: 'Preferred Style Variations are not supported anymore.',
+	} );
+	return { type: 'NOTHING' };
+}
 
 /**
  * Update the provided block types to be visible.
@@ -285,21 +251,7 @@ export const updatePreferredStyleVariations =
 export const showBlockTypes =
 	( blockNames ) =>
 	( { registry } ) => {
-		const existingBlockNames =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
-
-		const newBlockNames = existingBlockNames.filter(
-			( type ) =>
-				! (
-					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
-				 ).includes( type )
-		);
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'hiddenBlockTypes', newBlockNames );
+		unlock( registry.dispatch( editorStore ) ).showBlockTypes( blockNames );
 	};
 
 /**
@@ -310,21 +262,7 @@ export const showBlockTypes =
 export const hideBlockTypes =
 	( blockNames ) =>
 	( { registry } ) => {
-		const existingBlockNames =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
-
-		const mergedBlockNames = new Set( [
-			...existingBlockNames,
-			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
-		] );
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'hiddenBlockTypes', [
-				...mergedBlockNames,
-			] );
+		unlock( registry.dispatch( editorStore ) ).hideBlockTypes( blockNames );
 	};
 
 /**
@@ -354,9 +292,21 @@ export const requestMetaBoxUpdates =
 			window.tinyMCE.triggerSave();
 		}
 
+		// We gather the base form data.
+		const baseFormData = new window.FormData(
+			document.querySelector( '.metabox-base-form' )
+		);
+
+		const postId = baseFormData.get( 'post_ID' );
+		const postType = baseFormData.get( 'post_type' );
+
 		// Additional data needed for backward compatibility.
 		// If we do not provide this data, the post will be overridden with the default values.
-		const post = registry.select( editorStore ).getCurrentPost();
+		// We cannot rely on getCurrentPost because right now on the editor we may be editing a pattern or a template.
+		// We need to retrieve the post that the base form data is referring to.
+		const post = registry
+			.select( coreStore )
+			.getEditedEntityRecord( 'postType', postType, postId );
 		const additionalData = [
 			post.comment_status
 				? [ 'comment_status', post.comment_status ]
@@ -366,10 +316,7 @@ export const requestMetaBoxUpdates =
 			post.author ? [ 'post_author', post.author ] : false,
 		].filter( Boolean );
 
-		// We gather all the metaboxes locations data and the base form data.
-		const baseFormData = new window.FormData(
-			document.querySelector( '.metabox-base-form' )
-		);
+		// We gather all the metaboxes locations.
 		const activeMetaBoxLocations = select.getActiveMetaBoxLocations();
 		const formDataToMerge = [
 			baseFormData,
@@ -427,106 +374,84 @@ export function metaBoxUpdatesFailure() {
 }
 
 /**
- * Returns an action object used to toggle the width of the editing canvas.
+ * Action that changes the width of the editing canvas.
  *
- * @param {string} deviceType
+ * @deprecated
  *
- * @return {Object} Action object.
+ * @param {string} deviceType
  */
-export function __experimentalSetPreviewDeviceType( deviceType ) {
-	return {
-		type: 'SET_PREVIEW_DEVICE_TYPE',
-		deviceType,
+export const __experimentalSetPreviewDeviceType =
+	( deviceType ) =>
+	( { registry } ) => {
+		deprecated(
+			"dispatch( 'core/edit-post' ).__experimentalSetPreviewDeviceType",
+			{
+				since: '6.5',
+				version: '6.7',
+				hint: 'registry.dispatch( editorStore ).setDeviceType',
+			}
+		);
+		registry.dispatch( editorStore ).setDeviceType( deviceType );
 	};
-}
 
 /**
  * Returns an action object used to open/close the inserter.
  *
- * @param {boolean|Object} value                Whether the inserter should be
- *                                              opened (true) or closed (false).
- *                                              To specify an insertion point,
- *                                              use an object.
- * @param {string}         value.rootClientId   The root client ID to insert at.
- * @param {number}         value.insertionIndex The index to insert at.
+ * @deprecated
  *
- * @return {Object} Action object.
+ * @param {boolean|Object} value Whether the inserter should be opened (true) or closed (false).
  */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+export const setIsInserterOpened =
+	( value ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).setIsInserterOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsInserterOpened",
+		} );
+		registry.dispatch( editorStore ).setIsInserterOpened( value );
 	};
-}
 
 /**
  * Returns an action object used to open/close the list view.
  *
+ * @deprecated
+ *
  * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
- * @return {Object} Action object.
  */
-export function setIsListViewOpened( isOpen ) {
-	return {
-		type: 'SET_IS_LIST_VIEW_OPENED',
-		isOpen,
+export const setIsListViewOpened =
+	( isOpen ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).setIsListViewOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsListViewOpened",
+		} );
+		registry.dispatch( editorStore ).setIsListViewOpened( isOpen );
 	};
-}
 
 /**
  * Returns an action object used to switch to template editing.
  *
- * @param {boolean} value Is editing template.
- * @return {Object} Action object.
+ * @deprecated
  */
-export function setIsEditingTemplate( value ) {
-	return {
-		type: 'SET_IS_EDITING_TEMPLATE',
-		value,
-	};
+export function setIsEditingTemplate() {
+	deprecated( "dispatch( 'core/edit-post' ).setIsEditingTemplate", {
+		since: '6.5',
+		alternative: "dispatch( 'core/editor').setRenderingMode",
+	} );
+	return { type: 'NOTHING' };
 }
 
-/**
- * Switches to the template mode.
- *
- * @param {boolean} newTemplate Is new template.
- */
-export const __unstableSwitchToTemplateMode =
-	( newTemplate = false ) =>
-	( { registry, select, dispatch } ) => {
-		dispatch( setIsEditingTemplate( true ) );
-		const isWelcomeGuideActive = select.isFeatureActive(
-			'welcomeGuideTemplate'
-		);
-		if ( ! isWelcomeGuideActive ) {
-			const message = newTemplate
-				? __( "Custom template created. You're in template mode now." )
-				: __(
-						'Editing template. Changes made here affect all posts and pages that use the template.'
-				  );
-			registry.dispatch( noticesStore ).createSuccessNotice( message, {
-				type: 'snackbar',
-			} );
-		}
-	};
-
 /**
  * Create a block based template.
  *
- * @param {Object?} template Template to create and assign.
+ * @deprecated
  */
-export const __unstableCreateTemplate =
-	( template ) =>
-	async ( { registry } ) => {
-		const savedTemplate = await registry
-			.dispatch( coreStore )
-			.saveEntityRecord( 'postType', 'wp_template', template );
-		const post = registry.select( editorStore ).getCurrentPost();
-		registry
-			.dispatch( coreStore )
-			.editEntityRecord( 'postType', post.type, post.id, {
-				template: savedTemplate.slug,
-			} );
-	};
+export function __unstableCreateTemplate() {
+	deprecated( "dispatch( 'core/edit-post' ).__unstableCreateTemplate", {
+		since: '6.5',
+	} );
+	return { type: 'NOTHING' };
+}
 
 let metaBoxesInitialized = false;
 
@@ -554,35 +479,76 @@ export const initializeMetaBoxes =
 
 		metaBoxesInitialized = true;
 
-		let wasSavingPost = registry.select( editorStore ).isSavingPost();
-		let wasAutosavingPost = registry
-			.select( editorStore )
-			.isAutosavingPost();
-
-		// Save metaboxes when performing a full save on the post.
-		registry.subscribe( async () => {
-			const isSavingPost = registry.select( editorStore ).isSavingPost();
-			const isAutosavingPost = registry
-				.select( editorStore )
-				.isAutosavingPost();
-
-			// Save metaboxes on save completion, except for autosaves.
-			const shouldTriggerMetaboxesSave =
-				wasSavingPost &&
-				! wasAutosavingPost &&
-				! isSavingPost &&
-				select.hasMetaBoxes();
-
-			// Save current state for next inspection.
-			wasSavingPost = isSavingPost;
-			wasAutosavingPost = isAutosavingPost;
-
-			if ( shouldTriggerMetaboxesSave ) {
-				await dispatch.requestMetaBoxUpdates();
+		// Save metaboxes on save completion, except for autosaves.
+		addAction(
+			'editor.savePost',
+			'core/edit-post/save-metaboxes',
+			async ( post, options ) => {
+				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
+					await dispatch.requestMetaBoxUpdates();
+				}
 			}
-		} );
+		);
 
 		dispatch( {
 			type: 'META_BOXES_INITIALIZED',
 		} );
 	};
+
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ *
+ * @deprecated
+ */
+export const toggleDistractionFree =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-post' ).toggleDistractionFree", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').toggleDistractionFree",
+		} );
+		registry.dispatch( editorStore ).toggleDistractionFree();
+	};
+
+/**
+ * Action that toggles the Fullscreen Mode view option.
+ */
+export const toggleFullscreenMode =
+	() =>
+	( { registry } ) => {
+		const isFullscreen = registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'fullscreenMode' );
+
+		registry
+			.dispatch( preferencesStore )
+			.toggle( 'core/edit-post', 'fullscreenMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFullscreen
+					? __( 'Fullscreen mode activated.' )
+					: __( 'Fullscreen mode deactivated.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle(
+										'core/edit-post',
+										'fullscreenMode'
+									);
+							},
+						},
+					],
+				}
+			);
+	};
diff --git a/packages/edit-post/src/store/index.js b/packages/edit-post/src/store/index.js
index 567c022d2eb71b..93dae7606d0e3c 100644
--- a/packages/edit-post/src/store/index.js
+++ b/packages/edit-post/src/store/index.js
@@ -23,5 +23,4 @@ export const store = createReduxStore( STORE_NAME, {
 	actions,
 	selectors,
 } );
-
 register( store );
diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js
index 8a4031ecf9b098..edd316854fb576 100644
--- a/packages/edit-post/src/store/reducer.js
+++ b/packages/edit-post/src/store/reducer.js
@@ -3,56 +3,6 @@
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Reducer storing the list of all programmatically removed panels.
- *
- * @param {Array}  state  Current state.
- * @param {Object} action Action object.
- *
- * @return {Array} Updated state.
- */
-export function removedPanels( state = [], action ) {
-	switch ( action.type ) {
-		case 'REMOVE_PANEL':
-			if ( ! state.includes( action.panelName ) ) {
-				return [ ...state, action.panelName ];
-			}
-	}
-
-	return state;
-}
-
-/**
- * Reducer for storing the name of the open modal, or null if no modal is open.
- *
- * @param {Object} state  Previous state.
- * @param {Object} action Action object containing the `name` of the modal
- *
- * @return {Object} Updated state
- */
-export function activeModal( state = null, action ) {
-	switch ( action.type ) {
-		case 'OPEN_MODAL':
-			return action.name;
-		case 'CLOSE_MODAL':
-			return null;
-	}
-
-	return state;
-}
-
-export function publishSidebarActive( state = false, action ) {
-	switch ( action.type ) {
-		case 'OPEN_PUBLISH_SIDEBAR':
-			return true;
-		case 'CLOSE_PUBLISH_SIDEBAR':
-			return false;
-		case 'TOGGLE_PUBLISH_SIDEBAR':
-			return ! state;
-	}
-	return state;
-}
-
 /**
  * Reducer keeping track of the meta boxes isSaving state.
  * A "true" value means the meta boxes saving request is in-flight.
@@ -117,75 +67,6 @@ export function metaBoxLocations( state = {}, action ) {
 	return state;
 }
 
-/**
- * Reducer returning the editing canvas device type.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function deviceType( state = 'Desktop', action ) {
-	switch ( action.type ) {
-		case 'SET_PREVIEW_DEVICE_TYPE':
-			return action.deviceType;
-	}
-
-	return state;
-}
-
-/**
- * Reducer to set the block inserter panel open or closed.
- *
- * Note: this reducer interacts with the list view panel reducer
- * to make sure that only one of the two panels is open at the same time.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-export function blockInserterPanel( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return action.isOpen ? false : state;
-		case 'SET_IS_INSERTER_OPENED':
-			return action.value;
-	}
-	return state;
-}
-
-/**
- * Reducer to set the list view panel open or closed.
- *
- * Note: this reducer interacts with the inserter panel reducer
- * to make sure that only one of the two panels is open at the same time.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-export function listViewPanel( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_INSERTER_OPENED':
-			return action.value ? false : state;
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return action.isOpen;
-	}
-	return state;
-}
-
-/**
- * Reducer tracking whether template editing is on or off.
- *
- * @param {boolean} state
- * @param {Object}  action
- */
-function isEditingTemplate( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_IS_EDITING_TEMPLATE':
-			return action.value;
-	}
-	return state;
-}
-
 /**
  * Reducer tracking whether meta boxes are initialized.
  *
@@ -209,12 +90,5 @@ const metaBoxes = combineReducers( {
 } );
 
 export default combineReducers( {
-	activeModal,
 	metaBoxes,
-	publishSidebarActive,
-	removedPanels,
-	deviceType,
-	blockInserterPanel,
-	listViewPanel,
-	isEditingTemplate,
 } );
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index b84e2b6887431a..f6516dd0206c00 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -1,18 +1,20 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
 
@@ -25,8 +27,7 @@ const EMPTY_OBJECT = {};
  */
 export const getEditorMode = createRegistrySelector(
 	( select ) => () =>
-		select( preferencesStore ).get( 'core/edit-post', 'editorMode' ) ??
-		'visual'
+		select( preferencesStore ).get( 'core', 'editorMode' ) ?? 'visual'
 );
 
 /**
@@ -39,9 +40,7 @@ export const getEditorMode = createRegistrySelector(
 export const isEditorSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return [ 'edit-post/document', 'edit-post/block' ].includes(
 			activeGeneralSidebar
 		);
@@ -58,9 +57,7 @@ export const isEditorSidebarOpened = createRegistrySelector(
 export const isPluginSidebarOpened = createRegistrySelector(
 	( select ) => () => {
 		const activeGeneralSidebar =
-			select( interfaceStore ).getActiveComplementaryArea(
-				'core/edit-post'
-			);
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 		return (
 			!! activeGeneralSidebar &&
 			! [ 'edit-post/document', 'edit-post/block' ].includes(
@@ -86,9 +83,7 @@ export const isPluginSidebarOpened = createRegistrySelector(
  */
 export const getActiveGeneralSidebarName = createRegistrySelector(
 	( select ) => () => {
-		return select( interfaceStore ).getActiveComplementaryArea(
-			'core/edit-post'
-		);
+		return select( interfaceStore ).getActiveComplementaryArea( 'core' );
 	}
 );
 
@@ -157,41 +152,34 @@ export const getPreferences = createRegistrySelector( ( select ) => () => {
 		alternative: `select( 'core/preferences' ).get`,
 	} );
 
-	// These preferences now exist in the preferences store.
-	// Fetch them so that they can be merged into the post
-	// editor preferences.
-	const preferences = [
-		'hiddenBlockTypes',
-		'editorMode',
-		'preferredStyleVariations',
-	].reduce( ( accumulatedPrefs, preferenceKey ) => {
-		const value = select( preferencesStore ).get(
-			'core/edit-post',
-			preferenceKey
-		);
+	const corePreferences = [ 'editorMode', 'hiddenBlockTypes' ].reduce(
+		( accumulatedPrefs, preferenceKey ) => {
+			const value = select( preferencesStore ).get(
+				'core',
+				preferenceKey
+			);
 
-		return {
-			...accumulatedPrefs,
-			[ preferenceKey ]: value,
-		};
-	}, {} );
+			return {
+				...accumulatedPrefs,
+				[ preferenceKey ]: value,
+			};
+		},
+		{}
+	);
 
 	// Panels were a preference, but the data structure changed when the state
 	// was migrated to the preferences store. They need to be converted from
 	// the new preferences store format to old format to ensure no breaking
 	// changes for plugins.
 	const inactivePanels = select( preferencesStore ).get(
-		'core/edit-post',
+		'core',
 		'inactivePanels'
 	);
-	const openPanels = select( preferencesStore ).get(
-		'core/edit-post',
-		'openPanels'
-	);
+	const openPanels = select( preferencesStore ).get( 'core', 'openPanels' );
 	const panels = convertPanelsToOldFormat( inactivePanels, openPanels );
 
 	return {
-		...preferences,
+		...corePreferences,
 		panels,
 	};
 } );
@@ -223,41 +211,57 @@ export function getPreference( state, preferenceKey, defaultValue ) {
  */
 export const getHiddenBlockTypes = createRegistrySelector( ( select ) => () => {
 	return (
-		select( preferencesStore ).get(
-			'core/edit-post',
-			'hiddenBlockTypes'
-		) ?? EMPTY_ARRAY
+		select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
+		EMPTY_ARRAY
 	);
 } );
 
 /**
  * Returns true if the publish sidebar is opened.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state
  *
  * @return {boolean} Whether the publish sidebar is open.
  */
-export function isPublishSidebarOpened( state ) {
-	return state.publishSidebarActive;
-}
+export const isPublishSidebarOpened = createRegistrySelector(
+	( select ) => () => {
+		deprecated( `select( 'core/edit-post' ).isPublishSidebarOpened`, {
+			since: '6.6',
+			alternative: `select( 'core/editor' ).isPublishSidebarOpened`,
+		} );
+		return select( editorStore ).isPublishSidebarOpened();
+	}
+);
 
 /**
  * Returns true if the given panel was programmatically removed, or false otherwise.
  * All panels are not removed by default.
  *
+ * @deprecated
+ *
  * @param {Object} state     Global application state.
  * @param {string} panelName A string that identifies the panel.
  *
  * @return {boolean} Whether or not the panel is removed.
  */
-export function isEditorPanelRemoved( state, panelName ) {
-	return state.removedPanels.includes( panelName );
-}
+export const isEditorPanelRemoved = createRegistrySelector(
+	( select ) => ( state, panelName ) => {
+		deprecated( `select( 'core/edit-post' ).isEditorPanelRemoved`, {
+			since: '6.5',
+			alternative: `select( 'core/editor' ).isEditorPanelRemoved`,
+		} );
+		return select( editorStore ).isEditorPanelRemoved( panelName );
+	}
+);
 
 /**
  * Returns true if the given panel is enabled, or false otherwise. Panels are
  * enabled by default.
  *
+ * @deprecated
+ *
  * @param {Object} state     Global application state.
  * @param {string} panelName A string that identifies the panel.
  *
@@ -265,14 +269,11 @@ export function isEditorPanelRemoved( state, panelName ) {
  */
 export const isEditorPanelEnabled = createRegistrySelector(
 	( select ) => ( state, panelName ) => {
-		const inactivePanels = select( preferencesStore ).get(
-			'core/edit-post',
-			'inactivePanels'
-		);
-		return (
-			! isEditorPanelRemoved( state, panelName ) &&
-			! inactivePanels?.includes( panelName )
-		);
+		deprecated( `select( 'core/edit-post' ).isEditorPanelEnabled`, {
+			since: '6.5',
+			alternative: `select( 'core/editor' ).isEditorPanelEnabled`,
+		} );
+		return select( editorStore ).isEditorPanelEnabled( panelName );
 	}
 );
 
@@ -280,6 +281,8 @@ export const isEditorPanelEnabled = createRegistrySelector(
  * Returns true if the given panel is open, or false otherwise. Panels are
  * closed by default.
  *
+ * @deprecated
+ *
  * @param {Object} state     Global application state.
  * @param {string} panelName A string that identifies the panel.
  *
@@ -287,25 +290,33 @@ export const isEditorPanelEnabled = createRegistrySelector(
  */
 export const isEditorPanelOpened = createRegistrySelector(
 	( select ) => ( state, panelName ) => {
-		const openPanels = select( preferencesStore ).get(
-			'core/edit-post',
-			'openPanels'
-		);
-		return !! openPanels?.includes( panelName );
+		deprecated( `select( 'core/edit-post' ).isEditorPanelOpened`, {
+			since: '6.5',
+			alternative: `select( 'core/editor' ).isEditorPanelOpened`,
+		} );
+		return select( editorStore ).isEditorPanelOpened( panelName );
 	}
 );
 
 /**
  * Returns true if a modal is active, or false otherwise.
  *
+ * @deprecated since WP 6.3 use `core/interface` store's selector with the same name instead.
+ *
  * @param {Object} state     Global application state.
  * @param {string} modalName A string that uniquely identifies the modal.
  *
  * @return {boolean} Whether the modal is active.
  */
-export function isModalActive( state, modalName ) {
-	return state.activeModal === modalName;
-}
+export const isModalActive = createRegistrySelector(
+	( select ) => ( state, modalName ) => {
+		deprecated( `select( 'core/edit-post' ).isModalActive`, {
+			since: '6.3',
+			alternative: `select( 'core/interface' ).isModalActive`,
+		} );
+		return !! select( interfaceStore ).isModalActive( modalName );
+	}
+);
 
 /**
  * Returns whether the given feature is enabled or not.
@@ -332,10 +343,7 @@ export const isFeatureActive = createRegistrySelector(
  */
 export const isPluginItemPinned = createRegistrySelector(
 	( select ) => ( state, pluginName ) => {
-		return select( interfaceStore ).isItemPinned(
-			'core/edit-post',
-			pluginName
-		);
+		return select( interfaceStore ).isItemPinned( 'core', pluginName );
 	}
 );
 
@@ -363,14 +371,18 @@ export const getActiveMetaBoxLocations = createSelector(
  *
  * @return {boolean} Whether the meta box location is active and visible.
  */
-export function isMetaBoxLocationVisible( state, location ) {
-	return (
-		isMetaBoxLocationActive( state, location ) &&
-		getMetaBoxesPerLocation( state, location )?.some( ( { id } ) => {
-			return isEditorPanelEnabled( state, `meta-box-${ id }` );
-		} )
-	);
-}
+export const isMetaBoxLocationVisible = createRegistrySelector(
+	( select ) => ( state, location ) => {
+		return (
+			isMetaBoxLocationActive( state, location ) &&
+			getMetaBoxesPerLocation( state, location )?.some( ( { id } ) => {
+				return select( editorStore ).isEditorPanelEnabled(
+					`meta-box-${ id }`
+				);
+			} )
+		);
+	}
+);
 
 /**
  * Returns true if there is an active meta box in the given location, or false
@@ -437,37 +449,64 @@ export function isSavingMetaBoxes( state ) {
 /**
  * Returns the current editing canvas device type.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {string} Device type.
  */
-export function __experimentalGetPreviewDeviceType( state ) {
-	return state.deviceType;
-}
+export const __experimentalGetPreviewDeviceType = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			`select( 'core/edit-site' ).__experimentalGetPreviewDeviceType`,
+			{
+				since: '6.5',
+				version: '6.7',
+				alternative: `select( 'core/editor' ).getDeviceType`,
+			}
+		);
+		return select( editorStore ).getDeviceType();
+	}
+);
 
 /**
  * Returns true if the inserter is opened.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {boolean} Whether the inserter is opened.
  */
-export function isInserterOpened( state ) {
-	return !! state.blockInserterPanel;
-}
+export const isInserterOpened = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-post' ).isInserterOpened`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).isInserterOpened`,
+	} );
+	return select( editorStore ).isInserterOpened();
+} );
 
 /**
  * Get the insertion point for the inserter.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex, filterValue } =
-		state.blockInserterPanel;
-	return { rootClientId, insertionIndex, filterValue };
-}
+export const __experimentalGetInsertionPoint = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			`select( 'core/edit-post' ).__experimentalGetInsertionPoint`,
+			{
+				since: '6.5',
+				version: '6.7',
+			}
+		);
+		return unlock( select( editorStore ) ).getInserter();
+	}
+);
 
 /**
  * Returns true if the list view is opened.
@@ -476,20 +515,26 @@ export function __experimentalGetInsertionPoint( state ) {
  *
  * @return {boolean} Whether the list view is opened.
  */
-export function isListViewOpened( state ) {
-	return state.listViewPanel;
-}
+export const isListViewOpened = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-post' ).isListViewOpened`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).isListViewOpened`,
+	} );
+	return select( editorStore ).isListViewOpened();
+} );
 
 /**
  * Returns true if the template editing mode is enabled.
  *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether we're editing the template.
+ * @deprecated
  */
-export function isEditingTemplate( state ) {
-	return state.isEditingTemplate;
-}
+export const isEditingTemplate = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-post' ).isEditingTemplate`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).getRenderingMode`,
+	} );
+	return select( editorStore ).getCurrentPostType() === 'wp_template';
+} );
 
 /**
  * Returns true if meta boxes are initialized.
@@ -509,29 +554,19 @@ export function areMetaBoxesInitialized( state ) {
  */
 export const getEditedPostTemplate = createRegistrySelector(
 	( select ) => () => {
-		const currentTemplate =
-			select( editorStore ).getEditedPostAttribute( 'template' );
-		if ( currentTemplate ) {
-			const templateWithSameSlug = select( coreStore )
-				.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-				?.find( ( template ) => template.slug === currentTemplate );
-			if ( ! templateWithSameSlug ) {
-				return templateWithSameSlug;
-			}
-			return select( coreStore ).getEditedEntityRecord(
-				'postType',
-				'wp_template',
-				templateWithSameSlug.id
-			);
-		}
-
-		const post = select( editorStore ).getCurrentPost();
-		if ( post.link ) {
-			return select( coreStore ).__experimentalGetTemplateForLink(
-				post.link
-			);
+		const { id: postId, type: postType } =
+			select( editorStore ).getCurrentPost();
+		const templateId = unlock( select( coreStore ) ).getTemplateId(
+			postType,
+			postId
+		);
+		if ( ! templateId ) {
+			return undefined;
 		}
-
-		return null;
+		return select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_template',
+			templateId
+		);
 	}
 );
diff --git a/packages/edit-post/src/store/test/actions.js b/packages/edit-post/src/store/test/actions.js
index 97494e03afca6b..73918dabb93b97 100644
--- a/packages/edit-post/src/store/test/actions.js
+++ b/packages/edit-post/src/store/test/actions.js
@@ -2,17 +2,22 @@
  * WordPress dependencies
  */
 import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '..';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function createRegistryWithStores() {
 	// Create a registry and register used stores.
@@ -40,7 +45,7 @@ describe( 'actions', () => {
 		expect(
 			registry
 				.select( interfaceStore )
-				.getActiveComplementaryArea( 'core/edit-post' )
+				.getActiveComplementaryArea( 'core' )
 		).toBe( 'test/sidebar' );
 
 		registry
@@ -49,7 +54,7 @@ describe( 'actions', () => {
 		expect(
 			registry
 				.select( interfaceStore )
-				.getActiveComplementaryArea( 'core/edit-post' )
+				.getActiveComplementaryArea( 'core' )
 		).toBeNull();
 	} );
 
@@ -69,86 +74,19 @@ describe( 'actions', () => {
 		).toBe( false );
 	} );
 
-	describe( 'switchEditorMode', () => {
-		it( 'to visual', () => {
-			// Switch to text first, since the default is visual.
-			registry.dispatch( editPostStore ).switchEditorMode( 'text' );
-			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
-				'text'
-			);
-			registry.dispatch( editPostStore ).switchEditorMode( 'visual' );
-			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
-				'visual'
-			);
-		} );
-
-		it( 'to text', () => {
-			// It defaults to visual.
-			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
-				'visual'
-			);
-			// Add a selected client id and make sure it's there.
-			const clientId = 'clientId_1';
-			registry.dispatch( blockEditorStore ).selectionChange( clientId );
-			expect(
-				registry.select( blockEditorStore ).getSelectedBlockClientId()
-			).toEqual( clientId );
-
-			registry.dispatch( editPostStore ).switchEditorMode( 'text' );
-			expect(
-				registry.select( blockEditorStore ).getSelectedBlockClientId()
-			).toBeNull();
-			expect( registry.select( editPostStore ).getEditorMode() ).toEqual(
-				'text'
-			);
-		} );
-	} );
-
 	it( 'togglePinnedPluginItem', () => {
 		registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' );
 		// Sidebars are pinned by default.
 		// @See https://github.com/WordPress/gutenberg/pull/21645
 		expect(
-			registry
-				.select( interfaceStore )
-				.isItemPinned( editPostStore.name, 'rigatoni' )
+			registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
 		).toBe( false );
 		registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' );
 		expect(
-			registry
-				.select( interfaceStore )
-				.isItemPinned( editPostStore.name, 'rigatoni' )
+			registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
 		).toBe( true );
 	} );
 
-	describe( '__unstableSwitchToTemplateMode', () => {
-		it( 'welcome guide is active', () => {
-			// Activate `welcomeGuideTemplate` feature.
-			registry
-				.dispatch( editPostStore )
-				.toggleFeature( 'welcomeGuideTemplate' );
-			registry.dispatch( editPostStore ).__unstableSwitchToTemplateMode();
-			expect(
-				registry.select( editPostStore ).isEditingTemplate()
-			).toBeTruthy();
-			const notices = registry.select( noticesStore ).getNotices();
-			expect( notices ).toHaveLength( 0 );
-		} );
-
-		it( 'welcome guide is inactive', () => {
-			expect(
-				registry.select( editPostStore ).isEditingTemplate()
-			).toBeFalsy();
-			registry.dispatch( editPostStore ).__unstableSwitchToTemplateMode();
-			expect(
-				registry.select( editPostStore ).isEditingTemplate()
-			).toBeTruthy();
-			const notices = registry.select( noticesStore ).getNotices();
-			expect( notices ).toHaveLength( 1 );
-			expect( notices[ 0 ].content ).toMatch( 'template' );
-		} );
-	} );
-
 	describe( 'hideBlockTypes', () => {
 		it( 'adds the hidden block type to the preferences', () => {
 			registry
@@ -159,16 +97,13 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expected );
 
 			expect(
 				registry.select( editPostStore ).getHiddenBlockTypes()
 			).toEqual( expected );
-
-			// Expect a deprecation message for `getPreference`.
-			expect( console ).toHaveWarned();
 		} );
 	} );
 
@@ -182,8 +117,8 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expectedA );
 
 			expect(
@@ -198,8 +133,8 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expectedB );
 
 			expect(
@@ -207,130 +142,4 @@ describe( 'actions', () => {
 			).toEqual( expectedB );
 		} );
 	} );
-
-	describe( 'toggleEditorPanelEnabled', () => {
-		it( 'toggles panels to be enabled and not enabled', () => {
-			// This will switch it off, since the default is on.
-			registry
-				.dispatch( editPostStore )
-				.toggleEditorPanelEnabled( 'control-panel' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.isEditorPanelEnabled( 'control-panel' )
-			).toBe( false );
-
-			// Also check that the `getPreference` selector includes panels.
-			expect(
-				registry.select( editPostStore ).getPreference( 'panels' )
-			).toEqual( {
-				'control-panel': {
-					enabled: false,
-				},
-			} );
-
-			// Switch it on again.
-			registry
-				.dispatch( editPostStore )
-				.toggleEditorPanelEnabled( 'control-panel' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.isEditorPanelEnabled( 'control-panel' )
-			).toBe( true );
-
-			expect(
-				registry.select( editPostStore ).getPreference( 'panels' )
-			).toEqual( {} );
-		} );
-	} );
-
-	describe( 'toggleEditorPanelOpened', () => {
-		it( 'toggles panels open and closed', () => {
-			// This will open it, since the default is closed.
-			registry
-				.dispatch( editPostStore )
-				.toggleEditorPanelOpened( 'control-panel' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.isEditorPanelOpened( 'control-panel' )
-			).toBe( true );
-
-			expect(
-				registry.select( editPostStore ).getPreference( 'panels' )
-			).toEqual( {
-				'control-panel': {
-					opened: true,
-				},
-			} );
-
-			// Close it.
-			registry
-				.dispatch( editPostStore )
-				.toggleEditorPanelOpened( 'control-panel' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.isEditorPanelOpened( 'control-panel' )
-			).toBe( false );
-
-			expect(
-				registry.select( editPostStore ).getPreference( 'panels' )
-			).toEqual( {} );
-		} );
-	} );
-
-	describe( 'updatePreferredStyleVariations', () => {
-		it( 'sets a preferred style variation for a block when a style name is passed', () => {
-			registry
-				.dispatch( 'core/edit-post' )
-				.updatePreferredStyleVariations( 'core/paragraph', 'fancy' );
-			registry
-				.dispatch( 'core/edit-post' )
-				.updatePreferredStyleVariations( 'core/quote', 'posh' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.getPreference( 'preferredStyleVariations' )
-			).toEqual( {
-				'core/paragraph': 'fancy',
-				'core/quote': 'posh',
-			} );
-		} );
-
-		it( 'removes a preferred style variation for a block when a style name is omitted', () => {
-			registry
-				.dispatch( 'core/edit-post' )
-				.updatePreferredStyleVariations( 'core/paragraph', 'fancy' );
-			registry
-				.dispatch( 'core/edit-post' )
-				.updatePreferredStyleVariations( 'core/quote', 'posh' );
-			expect(
-				registry
-					.select( editPostStore )
-					.getPreference( 'preferredStyleVariations' )
-			).toEqual( {
-				'core/paragraph': 'fancy',
-				'core/quote': 'posh',
-			} );
-
-			registry
-				.dispatch( 'core/edit-post' )
-				.updatePreferredStyleVariations( 'core/paragraph' );
-
-			expect(
-				registry
-					.select( editPostStore )
-					.getPreference( 'preferredStyleVariations' )
-			).toEqual( {
-				'core/quote': 'posh',
-			} );
-		} );
-	} );
 } );
diff --git a/packages/edit-post/src/store/test/reducer.js b/packages/edit-post/src/store/test/reducer.js
index 4be7c7cb3ffd80..6e4055b2998022 100644
--- a/packages/edit-post/src/store/test/reducer.js
+++ b/packages/edit-post/src/store/test/reducer.js
@@ -1,47 +1,9 @@
-/**
- * External dependencies
- */
-import deepFreeze from 'deep-freeze';
-
 /**
  * Internal dependencies
  */
-import {
-	activeModal,
-	isSavingMetaBoxes,
-	metaBoxLocations,
-	removedPanels,
-	blockInserterPanel,
-	listViewPanel,
-} from '../reducer';
-
-import { setIsInserterOpened, setIsListViewOpened } from '../actions';
+import { isSavingMetaBoxes, metaBoxLocations } from '../reducer';
 
 describe( 'state', () => {
-	describe( 'activeModal', () => {
-		it( 'should default to null', () => {
-			const state = activeModal( undefined, {} );
-			expect( state ).toBeNull();
-		} );
-
-		it( 'should set the activeModal to the provided name', () => {
-			const state = activeModal( null, {
-				type: 'OPEN_MODAL',
-				name: 'test-modal',
-			} );
-
-			expect( state ).toEqual( 'test-modal' );
-		} );
-
-		it( 'should set the activeModal to null', () => {
-			const state = activeModal( 'test-modal', {
-				type: 'CLOSE_MODAL',
-			} );
-
-			expect( state ).toBeNull();
-		} );
-	} );
-
 	describe( 'isSavingMetaBoxes', () => {
 		it( 'should return default state', () => {
 			const actual = isSavingMetaBoxes( undefined, {} );
@@ -119,86 +81,4 @@ describe( 'state', () => {
 			} );
 		} );
 	} );
-
-	describe( 'removedPanels', () => {
-		it( 'should remove panel', () => {
-			const original = deepFreeze( [] );
-			const state = removedPanels( original, {
-				type: 'REMOVE_PANEL',
-				panelName: 'post-status',
-			} );
-			expect( state ).toEqual( [ 'post-status' ] );
-		} );
-
-		it( 'should not remove already removed panel', () => {
-			const original = deepFreeze( [ 'post-status' ] );
-			const state = removedPanels( original, {
-				type: 'REMOVE_PANEL',
-				panelName: 'post-status',
-			} );
-			expect( state ).toBe( original );
-		} );
-	} );
-
-	describe( 'blockInserterPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( blockInserterPanel( undefined, {} ) ).toEqual( false );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			expect( blockInserterPanel( true, {} ) ).toBe( true );
-		} );
-
-		it( 'should set the open state of the inserter panel', () => {
-			expect(
-				blockInserterPanel( false, setIsInserterOpened( true ) )
-			).toBe( true );
-			expect(
-				blockInserterPanel( true, setIsInserterOpened( false ) )
-			).toBe( false );
-		} );
-
-		it( 'should close the inserter when opening the list view panel', () => {
-			expect(
-				blockInserterPanel( true, setIsListViewOpened( true ) )
-			).toBe( false );
-		} );
-
-		it( 'should not change the state when closing the list view panel', () => {
-			expect(
-				blockInserterPanel( true, setIsListViewOpened( false ) )
-			).toBe( true );
-		} );
-	} );
-
-	describe( 'listViewPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( listViewPanel( undefined, {} ) ).toEqual( false );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			expect( listViewPanel( true, {} ) ).toBe( true );
-		} );
-
-		it( 'should set the open state of the list view panel', () => {
-			expect( listViewPanel( false, setIsListViewOpened( true ) ) ).toBe(
-				true
-			);
-			expect( listViewPanel( true, setIsListViewOpened( false ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should close the list view when opening the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should not change the state when closing the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
-				true
-			);
-		} );
-	} );
 } );
diff --git a/packages/edit-post/src/store/test/selectors.js b/packages/edit-post/src/store/test/selectors.js
index 5df8456dd8534d..5098c6f95ad221 100644
--- a/packages/edit-post/src/store/test/selectors.js
+++ b/packages/edit-post/src/store/test/selectors.js
@@ -1,69 +1,14 @@
-/**
- * External dependencies
- */
-import deepFreeze from 'deep-freeze';
-
 /**
  * Internal dependencies
  */
 import {
-	isModalActive,
 	hasMetaBoxes,
 	isSavingMetaBoxes,
 	getActiveMetaBoxLocations,
 	isMetaBoxLocationActive,
-	isEditorPanelRemoved,
-	isInserterOpened,
-	isListViewOpened,
 } from '../selectors';
 
 describe( 'selectors', () => {
-	describe( 'isModalActive', () => {
-		it( 'returns true if the provided name matches the value in the preferences activeModal property', () => {
-			const state = {
-				activeModal: 'test-modal',
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( true );
-		} );
-
-		it( 'returns false if the provided name does not match the preferences activeModal property', () => {
-			const state = {
-				activeModal: 'something-else',
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
-		} );
-
-		it( 'returns false if the preferences activeModal property is null', () => {
-			const state = {
-				activeModal: null,
-			};
-
-			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'isEditorPanelRemoved', () => {
-		it( 'should return false by default', () => {
-			const state = deepFreeze( {
-				removedPanels: [],
-			} );
-
-			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should return true when panel was removed', () => {
-			const state = deepFreeze( {
-				removedPanels: [ 'post-status' ],
-			} );
-
-			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe( true );
-		} );
-	} );
-
 	describe( 'hasMetaBoxes', () => {
 		it( 'should return true if there are active meta boxes', () => {
 			const state = {
@@ -160,26 +105,4 @@ describe( 'selectors', () => {
 			expect( result ).toBe( true );
 		} );
 	} );
-
-	describe( 'isInserterOpened', () => {
-		it( 'returns the block inserter panel isOpened state', () => {
-			const state = {
-				blockInserterPanel: true,
-			};
-			expect( isInserterOpened( state ) ).toBe( true );
-			state.blockInserterPanel = false;
-			expect( isInserterOpened( state ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'isListViewOpened', () => {
-		it( 'returns the list view panel isOpened state', () => {
-			const state = {
-				listViewPanel: true,
-			};
-			expect( isListViewOpened( state ) ).toBe( true );
-			state.listViewPanel = false;
-			expect( isListViewOpened( state ) ).toBe( false );
-		} );
-	} );
 } );
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index fdb4b0c136abf0..7230d7b2b15e66 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,53 +1,9 @@
-@import "../../interface/src/style.scss";
-@import "./components/header/style.scss";
-@import "./components/header/fullscreen-mode-close/style.scss";
-@import "./components/header/header-toolbar/style.scss";
-@import "./components/header/template-title/style.scss";
-@import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/back-button/style.scss";
 @import "./components/layout/style.scss";
-@import "./components/block-manager/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/secondary-sidebar/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/sidebar/last-revision/style.scss";
-@import "./components/sidebar/post-author/style.scss";
-@import "./components/sidebar/post-format/style.scss";
-@import "./components/sidebar/post-schedule/style.scss";
-@import "./components/sidebar/post-slug/style.scss";
-@import "./components/sidebar/post-status/style.scss";
-@import "./components/sidebar/post-template/style.scss";
-@import "./components/sidebar/post-url/style.scss";
-@import "./components/sidebar/post-visibility/style.scss";
-@import "./components/sidebar/settings-header/style.scss";
-@import "./components/sidebar/template-summary/style.scss";
-@import "./components/text-editor/style.scss";
-@import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-page-options/style.scss";
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
-html.wp-toolbar {
-	background: $white;
-}
-
-body.block-editor-page {
+body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }
 
@@ -59,14 +15,13 @@ body.block-editor-page {
 	}
 }
 
-// Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
-.edit-post-header,
-.edit-post-text-editor,
-.edit-post-sidebar,
+// Target the editor UI excluding the non-iframed visual editor contents, metaboxes
+//  and custom fields areas.
+.editor-header,
+.editor-text-editor,
+.editor-sidebar,
 .editor-post-publish-panel,
-.components-popover,
-.components-modal__frame,
-.edit-post-editor__inserter-panel {
+.edit-post-visual-editor.is-iframed {
 	@include reset;
 }
 
@@ -98,17 +53,3 @@ body.block-editor-page {
 }
 
 @include wordpress-admin-schemes();
-
-// The edit-site package adds or removes the sidebar when it's opened or closed.
-// The edit-post package, however, always has the sidebar in the canvas.
-// These edit-post specific rules ensures there isn't a border on the right of
-// the canvas when a sidebar is visually closed.
-.interface-interface-skeleton__sidebar {
-	border-left: none;
-
-	.is-sidebar-opened & {
-		@include break-medium() {
-			border-left: $border-width solid $gray-200;
-		}
-	}
-}
diff --git a/packages/edit-post/src/test/__snapshots__/editor.native.js.snap b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
new file mode 100644
index 00000000000000..4a88b249a1db66
--- /dev/null
+++ b/packages/edit-post/src/test/__snapshots__/editor.native.js.snap
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor adds empty image block when pasting unsupported HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor adds image block when pasting HTML local image path 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="file:///path/to/file.png" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor appends media correctly for allowed types 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:image -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-3.jpeg" alt=""/></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`Editor appends media correctly for allowed types and skips unsupported ones 1`] = `
+"<!-- wp:image -->
+<figure class="wp-block-image"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:video -->
+<figure class="wp-block-video"><video controls src="file:///local-video-4.mp4"></video></figure>
+<!-- /wp:video -->"
+`;
+
+exports[`Editor on content update parses markdown into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Overview</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Consectetur adipiscing<br>elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Details</h2>
+<!-- /wp:heading -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Duis sagittis ipsum <code>## Mixed Lists</code></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Key Points:</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
+<li>Lorem ipsum dolor sit amet</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><br>Consectetur adipiscing elit</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Integer nec odio</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Additional Info:<br>-<br>Sed cursus ante dapibus diam</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Nulla quis sem at nibh elementum imperdiet</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
index c3e35e92598988..8fe116758608b5 100644
--- a/packages/edit-post/src/test/editor.native.js
+++ b/packages/edit-post/src/test/editor.native.js
@@ -1,72 +1,263 @@
 /**
  * External dependencies
  */
-import { act, render } from 'test/helpers';
+import {
+	act,
+	addBlock,
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	getEditorTitle,
+	initializeEditor,
+	pasteIntoRichText,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+import { BackHandler } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { registerCoreBlocks } from '@wordpress/block-library';
-import RNReactNativeGutenbergBridge from '@wordpress/react-native-bridge';
-// Force register 'core/editor' store.
-import { store } from '@wordpress/editor'; // eslint-disable-line no-unused-vars
+import {
+	requestMediaImport,
+	subscribeMediaAppend,
+	subscribeParentToggleHTMLMode,
+	subscribeToContentUpdate,
+} from '@wordpress/react-native-bridge';
 
-jest.mock( '../components/layout', () => () => 'Layout' );
+setupCoreBlocks();
 
-/**
- * Internal dependencies
- */
-import '..';
-import Editor from '../editor';
-
-const unsupportedBlock = `
-<!-- wp:notablock -->
-<p>Not supported</p>
-<!-- /wp:notablock -->
-`;
+let toggleModeCallback;
+subscribeParentToggleHTMLMode.mockImplementation( ( callback ) => {
+	toggleModeCallback = callback;
+} );
 
-beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+let mediaAppendCallback;
+subscribeMediaAppend.mockImplementation( ( callback ) => {
+	mediaAppendCallback = callback;
 } );
 
-afterAll( () => {
-	jest.runOnlyPendingTimers();
-	jest.useRealTimers();
+let onContentUpdateCallback;
+subscribeToContentUpdate.mockImplementation( ( callback ) => {
+	onContentUpdateCallback = callback;
 } );
 
+const MEDIA = [
+	{
+		localId: 1,
+		mediaUrl: 'file:///local-image-1.jpeg',
+		mediaType: 'image',
+		serverId: 2000,
+		serverUrl: 'https://test-site.files.wordpress.com/local-image-1.jpeg',
+	},
+	{
+		localId: 2,
+		mediaUrl: 'file:///local-file-1.pdf',
+		mediaType: 'other',
+		serverId: 2001,
+		serverUrl: 'https://test-site.files.wordpress.com/local-file-1.pdf',
+	},
+	{
+		localId: 3,
+		mediaUrl: 'file:///local-image-3.jpeg',
+		mediaType: 'image',
+		serverId: 2002,
+		serverUrl: 'https://test-site.files.wordpress.com/local-image-3.jpeg',
+	},
+	{
+		localId: 4,
+		mediaUrl: 'file:///local-video-4.mp4',
+		mediaType: 'video',
+		serverId: 2003,
+		serverUrl: 'https://test-site.files.wordpress.com/local-video-4.mp4',
+	},
+];
+
 describe( 'Editor', () => {
-	beforeAll( () => {
-		registerCoreBlocks();
+	afterEach( () => {
+		jest.clearAllMocks();
 	} );
 
-	it( 'detects unsupported block and sends hasUnsupportedBlocks true to native', () => {
-		RNReactNativeGutenbergBridge.editorDidMount = jest.fn();
+	it( 'toggles the editor from Visual to HTML mode', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
 
-		const appContainer = renderEditorWith( unsupportedBlock );
-		// For some reason resetEditorBlocks() is asynchronous when dispatching editEntityRecord.
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
 		act( () => {
-			jest.runAllTicks();
+			toggleModeCallback();
+		} );
+
+		// Assert
+		const htmlEditor = screen.getByLabelText( 'html-view-content' );
+		expect( htmlEditor ).toBeVisible();
+
+		act( () => {
+			toggleModeCallback();
 		} );
-		appContainer.unmount();
-
-		expect(
-			RNReactNativeGutenbergBridge.editorDidMount
-		).toHaveBeenCalledTimes( 1 );
-		expect(
-			RNReactNativeGutenbergBridge.editorDidMount
-		).toHaveBeenCalledWith( [ 'core/notablock' ] );
 	} );
-} );
 
-// Utilities.
-const renderEditorWith = ( content ) => {
-	return render(
-		<Editor
-			initialHtml={ content }
-			initialHtmlModeEnabled={ false }
-			initialTitle={ '' }
-			postType="post"
-			postId="1"
-		/>
-	);
-};
+	it( 'adds empty image block when pasting unsupported HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			text: '<div><img src="file:LOW-RES.png"></div>',
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds image block when pasting HTML local image path', async () => {
+		await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+
+		pasteIntoRichText( paragraphTextInput, {
+			files: [ 'file:///path/to/file.png' ],
+		} );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'appends media correctly for allowed types', async () => {
+		// Arrange
+		requestMediaImport
+			.mockImplementationOnce( ( _, callback ) =>
+				callback( MEDIA[ 0 ].id, MEDIA[ 0 ].serverUrl )
+			)
+			.mockImplementationOnce( ( _, callback ) =>
+				callback( MEDIA[ 2 ].id, MEDIA[ 2 ].serverUrl )
+			);
+		await initializeEditor();
+
+		// Act
+		act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 2 ] ) );
+		await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` );
+		await screen.findByTestId( `network-image-${ MEDIA[ 2 ].serverUrl }` );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'appends media correctly for allowed types and skips unsupported ones', async () => {
+		// Arrange
+		requestMediaImport
+			.mockImplementationOnce( ( _, callback ) =>
+				callback( MEDIA[ 0 ].id, MEDIA[ 0 ].serverUrl )
+			)
+			.mockImplementationOnce( ( _, callback ) =>
+				callback( MEDIA[ 3 ].id, MEDIA[ 3 ].serverUrl )
+			);
+		await initializeEditor();
+
+		// Act
+		act( () => mediaAppendCallback( MEDIA[ 0 ] ) );
+		// Unsupported type (PDF file)
+		act( () => mediaAppendCallback( MEDIA[ 1 ] ) );
+		act( () => mediaAppendCallback( MEDIA[ 3 ] ) );
+		await screen.findByTestId( `network-image-${ MEDIA[ 0 ].serverUrl }` );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'unselects current block when tapping on the hardware back button', async () => {
+		// Arrange
+		await initializeEditor();
+		await addBlock( screen, 'Spacer' );
+
+		// Act
+		act( () => {
+			BackHandler.mockPressBack();
+		} );
+
+		// Assert
+		const openBlockSettingsButton =
+			screen.queryAllByLabelText( 'Open Settings' );
+		expect( openBlockSettingsButton.length ).toBe( 0 );
+	} );
+
+	describe( 'on content update', () => {
+		const MARKDOWN = `# Sample Document\nLorem ipsum dolor sit amet, consectetur adipiscing 
+						elit.\n## Overview\n- Lorem ipsum dolor sit amet\n- Consectetur adipiscing
+						 elit\n- Integer nec odio\n## Details\n1. Sed cursus ante dapibus diam\n2. 
+						 Nulla quis sem at nibh elementum imperdiet\n3. Duis sagittis ipsum\n
+						 ## Mixed Lists\n- Key Points:\n 1. Lorem ipsum dolor sit amet\n 2. 
+						 Consectetur adipiscing elit\n 3. Integer nec odio\n- Additional Info:\n -
+						  Sed cursus ante dapibus diam\n - Nulla quis sem at nibh elementum imperdiet\n`;
+
+		it( 'parses markdown into blocks', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: MARKDOWN,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Sample Document' );
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'parses a markdown heading into a title', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: `# Sample Document`,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Sample Document' );
+			expect( getEditorHtml() ).toBe( '' );
+		} );
+
+		it( 'parses standard text into blocks', async () => {
+			// Arrange
+			await initializeEditor( {
+				initialTitle: null,
+			} );
+
+			// Act
+			act( () => {
+				onContentUpdateCallback( {
+					content: `Lorem ipsum dolor sit amet`,
+				} );
+			} );
+
+			// Assert
+			// Needed to for the "Processed HTML piece" log.
+			expect( console ).toHaveLogged();
+			expect( getEditorTitle() ).toBe( 'Lorem ipsum dolor sit amet' );
+			expect( getEditorHtml() ).toBe( '' );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/.npmrc b/packages/edit-site/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/edit-site/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 9e2d49b48ba4c6..7143b40a59a1b4 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,138 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 5.34.0 (2024-05-02)
+
+## 5.33.0 (2024-04-19)
+
+## 5.32.0 (2024-04-03)
+
+## 5.31.0 (2024-03-21)
+
+## 5.30.0 (2024-03-06)
+
+## 5.29.0 (2024-02-21)
+
+## 5.28.0 (2024-02-09)
+
+## 5.27.0 (2024-01-24)
+
+## 5.26.0 (2024-01-10)
+
+## 5.25.0 (2023-12-13)
+
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
+## 5.22.0 (2023-11-02)
+
+## 5.21.0 (2023-10-18)
+
+## 5.20.0 (2023-10-05)
+
+## 5.19.0 (2023-09-20)
+
+## 5.18.0 (2023-08-31)
+
+## 5.17.0 (2023-08-16)
+
+## 5.16.0 (2023-08-10)
+
+## 5.15.0 (2023-07-20)
+
+## 5.14.0 (2023-07-05)
+
+## 5.13.0 (2023-06-23)
+
+### Enhancements
+
+-   Site editor sidebar: add home template details and controls [#51223](https://github.com/WordPress/gutenberg/pull/51223).
+-   Site editor sidebar: add footer to template part and ensure nested template areas display [#51669](https://github.com/WordPress/gutenberg/pull/51669).
+-   Global styles: split styles menus into revisions and other styles actions ([#51318](https://github.com/WordPress/gutenberg/pull/51318)).
+
+## 5.12.0 (2023-06-07)
+
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
+## 5.9.0 (2023-04-26)
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+### Bug Fixes
+
+-   Force visual editor in browse mode ([#47329](https://github.com/WordPress/gutenberg/pull/47329)).
+-   Style Book: Exclude blocks that are not allowed to insert ([#47461](https://github.com/WordPress/gutenberg/pull/47461)).
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   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)).
+
+### Bug Fixes
+
+-   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)
@@ -42,11 +174,11 @@
 
 ## 4.0.0 (2022-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `GUTENBERG_PHASE` environment variable has been renamed to `IS_GUTENBERG_PLUGIN` and is now a boolean ([#38202](https://github.com/WordPress/gutenberg/pull/38202)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/primitives`, `file-saver` and `jszip` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -54,7 +186,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -66,13 +198,13 @@
 
 ### 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/.
+-   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/>.
 
 ## 1.17.0 (2021-03-17)
 
 ## 1.0.0 (2020-01-13)
 
-### New Feature
+### New Features
 
 -   Initial version of the package.
diff --git a/packages/edit-site/lib/inflate.js b/packages/edit-site/lib/inflate.js
new file mode 100644
index 00000000000000..596d1cb5b8013c
--- /dev/null
+++ b/packages/edit-site/lib/inflate.js
@@ -0,0 +1,3333 @@
+/**
+ * Credits:
+ *
+ * lib-font
+ * https://github.com/Pomax/lib-font
+ * https://github.com/Pomax/lib-font/blob/master/lib/inflate.js
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 pomax@nihongoresources.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/* eslint eslint-comments/no-unlimited-disable: 0 */
+/* eslint-disable */
+/* pako 1.0.10 nodeca/pako */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.pako = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+  'use strict';
+
+
+  var TYPED_OK =  (typeof Uint8Array !== 'undefined') &&
+                  (typeof Uint16Array !== 'undefined') &&
+                  (typeof Int32Array !== 'undefined');
+
+  function _has(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+  }
+
+  exports.assign = function (obj /*from1, from2, from3, ...*/) {
+    var sources = Array.prototype.slice.call(arguments, 1);
+    while (sources.length) {
+      var source = sources.shift();
+      if (!source) { continue; }
+
+      if (typeof source !== 'object') {
+        throw new TypeError(source + 'must be non-object');
+      }
+
+      for (var p in source) {
+        if (_has(source, p)) {
+          obj[p] = source[p];
+        }
+      }
+    }
+
+    return obj;
+  };
+
+
+  // reduce buffer size, avoiding mem copy
+  exports.shrinkBuf = function (buf, size) {
+    if (buf.length === size) { return buf; }
+    if (buf.subarray) { return buf.subarray(0, size); }
+    buf.length = size;
+    return buf;
+  };
+
+
+  var fnTyped = {
+    arraySet: function (dest, src, src_offs, len, dest_offs) {
+      if (src.subarray && dest.subarray) {
+        dest.set(src.subarray(src_offs, src_offs + len), dest_offs);
+        return;
+      }
+      // Fallback to ordinary array
+      for (var i = 0; i < len; i++) {
+        dest[dest_offs + i] = src[src_offs + i];
+      }
+    },
+    // Join array of chunks to single array.
+    flattenChunks: function (chunks) {
+      var i, l, len, pos, chunk, result;
+
+      // calculate data length
+      len = 0;
+      for (i = 0, l = chunks.length; i < l; i++) {
+        len += chunks[i].length;
+      }
+
+      // join chunks
+      result = new Uint8Array(len);
+      pos = 0;
+      for (i = 0, l = chunks.length; i < l; i++) {
+        chunk = chunks[i];
+        result.set(chunk, pos);
+        pos += chunk.length;
+      }
+
+      return result;
+    }
+  };
+
+  var fnUntyped = {
+    arraySet: function (dest, src, src_offs, len, dest_offs) {
+      for (var i = 0; i < len; i++) {
+        dest[dest_offs + i] = src[src_offs + i];
+      }
+    },
+    // Join array of chunks to single array.
+    flattenChunks: function (chunks) {
+      return [].concat.apply([], chunks);
+    }
+  };
+
+
+  // Enable/Disable typed arrays use, for testing
+  //
+  exports.setTyped = function (on) {
+    if (on) {
+      exports.Buf8  = Uint8Array;
+      exports.Buf16 = Uint16Array;
+      exports.Buf32 = Int32Array;
+      exports.assign(exports, fnTyped);
+    } else {
+      exports.Buf8  = Array;
+      exports.Buf16 = Array;
+      exports.Buf32 = Array;
+      exports.assign(exports, fnUntyped);
+    }
+  };
+
+  exports.setTyped(TYPED_OK);
+
+  },{}],2:[function(require,module,exports){
+  // String encode/decode helpers
+  'use strict';
+
+
+  var utils = require('./common');
+
+
+  // Quick check if we can use fast array to bin string conversion
+  //
+  // - apply(Array) can fail on Android 2.2
+  // - apply(Uint8Array) can fail on iOS 5.1 Safari
+  //
+  var STR_APPLY_OK = true;
+  var STR_APPLY_UIA_OK = true;
+
+  try { String.fromCharCode.apply(null, [ 0 ]); } catch (__) { STR_APPLY_OK = false; }
+  try { String.fromCharCode.apply(null, new Uint8Array(1)); } catch (__) { STR_APPLY_UIA_OK = false; }
+
+
+  // Table with utf8 lengths (calculated by first byte of sequence)
+  // Note, that 5 & 6-byte values and some 4-byte values can not be represented in JS,
+  // because max possible codepoint is 0x10ffff
+  var _utf8len = new utils.Buf8(256);
+  for (var q = 0; q < 256; q++) {
+    _utf8len[q] = (q >= 252 ? 6 : q >= 248 ? 5 : q >= 240 ? 4 : q >= 224 ? 3 : q >= 192 ? 2 : 1);
+  }
+  _utf8len[254] = _utf8len[254] = 1; // Invalid sequence start
+
+
+  // convert string to array (typed, when possible)
+  exports.string2buf = function (str) {
+    var buf, c, c2, m_pos, i, str_len = str.length, buf_len = 0;
+
+    // count binary size
+    for (m_pos = 0; m_pos < str_len; m_pos++) {
+      c = str.charCodeAt(m_pos);
+      if ((c & 0xfc00) === 0xd800 && (m_pos + 1 < str_len)) {
+        c2 = str.charCodeAt(m_pos + 1);
+        if ((c2 & 0xfc00) === 0xdc00) {
+          c = 0x10000 + ((c - 0xd800) << 10) + (c2 - 0xdc00);
+          m_pos++;
+        }
+      }
+      buf_len += c < 0x80 ? 1 : c < 0x800 ? 2 : c < 0x10000 ? 3 : 4;
+    }
+
+    // allocate buffer
+    buf = new utils.Buf8(buf_len);
+
+    // convert
+    for (i = 0, m_pos = 0; i < buf_len; m_pos++) {
+      c = str.charCodeAt(m_pos);
+      if ((c & 0xfc00) === 0xd800 && (m_pos + 1 < str_len)) {
+        c2 = str.charCodeAt(m_pos + 1);
+        if ((c2 & 0xfc00) === 0xdc00) {
+          c = 0x10000 + ((c - 0xd800) << 10) + (c2 - 0xdc00);
+          m_pos++;
+        }
+      }
+      if (c < 0x80) {
+        /* one byte */
+        buf[i++] = c;
+      } else if (c < 0x800) {
+        /* two bytes */
+        buf[i++] = 0xC0 | (c >>> 6);
+        buf[i++] = 0x80 | (c & 0x3f);
+      } else if (c < 0x10000) {
+        /* three bytes */
+        buf[i++] = 0xE0 | (c >>> 12);
+        buf[i++] = 0x80 | (c >>> 6 & 0x3f);
+        buf[i++] = 0x80 | (c & 0x3f);
+      } else {
+        /* four bytes */
+        buf[i++] = 0xf0 | (c >>> 18);
+        buf[i++] = 0x80 | (c >>> 12 & 0x3f);
+        buf[i++] = 0x80 | (c >>> 6 & 0x3f);
+        buf[i++] = 0x80 | (c & 0x3f);
+      }
+    }
+
+    return buf;
+  };
+
+  // Helper (used in 2 places)
+  function buf2binstring(buf, len) {
+    // On Chrome, the arguments in a function call that are allowed is `65534`.
+    // If the length of the buffer is smaller than that, we can use this optimization,
+    // otherwise we will take a slower path.
+    if (len < 65534) {
+      if ((buf.subarray && STR_APPLY_UIA_OK) || (!buf.subarray && STR_APPLY_OK)) {
+        return String.fromCharCode.apply(null, utils.shrinkBuf(buf, len));
+      }
+    }
+
+    var result = '';
+    for (var i = 0; i < len; i++) {
+      result += String.fromCharCode(buf[i]);
+    }
+    return result;
+  }
+
+
+  // Convert byte array to binary string
+  exports.buf2binstring = function (buf) {
+    return buf2binstring(buf, buf.length);
+  };
+
+
+  // Convert binary string (typed, when possible)
+  exports.binstring2buf = function (str) {
+    var buf = new utils.Buf8(str.length);
+    for (var i = 0, len = buf.length; i < len; i++) {
+      buf[i] = str.charCodeAt(i);
+    }
+    return buf;
+  };
+
+
+  // convert array to string
+  exports.buf2string = function (buf, max) {
+    var i, out, c, c_len;
+    var len = max || buf.length;
+
+    // Reserve max possible length (2 words per char)
+    // NB: by unknown reasons, Array is significantly faster for
+    //     String.fromCharCode.apply than Uint16Array.
+    var utf16buf = new Array(len * 2);
+
+    for (out = 0, i = 0; i < len;) {
+      c = buf[i++];
+      // quick process ascii
+      if (c < 0x80) { utf16buf[out++] = c; continue; }
+
+      c_len = _utf8len[c];
+      // skip 5 & 6 byte codes
+      if (c_len > 4) { utf16buf[out++] = 0xfffd; i += c_len - 1; continue; }
+
+      // apply mask on first byte
+      c &= c_len === 2 ? 0x1f : c_len === 3 ? 0x0f : 0x07;
+      // join the rest
+      while (c_len > 1 && i < len) {
+        c = (c << 6) | (buf[i++] & 0x3f);
+        c_len--;
+      }
+
+      // terminated by end of string?
+      if (c_len > 1) { utf16buf[out++] = 0xfffd; continue; }
+
+      if (c < 0x10000) {
+        utf16buf[out++] = c;
+      } else {
+        c -= 0x10000;
+        utf16buf[out++] = 0xd800 | ((c >> 10) & 0x3ff);
+        utf16buf[out++] = 0xdc00 | (c & 0x3ff);
+      }
+    }
+
+    return buf2binstring(utf16buf, out);
+  };
+
+
+  // Calculate max possible position in utf8 buffer,
+  // that will not break sequence. If that's not possible
+  // - (very small limits) return max size as is.
+  //
+  // buf[] - utf8 bytes array
+  // max   - length limit (mandatory);
+  exports.utf8border = function (buf, max) {
+    var pos;
+
+    max = max || buf.length;
+    if (max > buf.length) { max = buf.length; }
+
+    // go back from last position, until start of sequence found
+    pos = max - 1;
+    while (pos >= 0 && (buf[pos] & 0xC0) === 0x80) { pos--; }
+
+    // Very small and broken sequence,
+    // return max, because we should return something anyway.
+    if (pos < 0) { return max; }
+
+    // If we came to start of buffer - that means buffer is too small,
+    // return max too.
+    if (pos === 0) { return max; }
+
+    return (pos + _utf8len[buf[pos]] > max) ? pos : max;
+  };
+
+  },{"./common":1}],3:[function(require,module,exports){
+  'use strict';
+
+  // Note: adler32 takes 12% for level 0 and 2% for level 6.
+  // It isn't worth it to make additional optimizations as in original.
+  // Small size is preferable.
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  function adler32(adler, buf, len, pos) {
+    var s1 = (adler & 0xffff) |0,
+        s2 = ((adler >>> 16) & 0xffff) |0,
+        n = 0;
+
+    while (len !== 0) {
+      // Set limit ~ twice less than 5552, to keep
+      // s2 in 31-bits, because we force signed ints.
+      // in other case %= will fail.
+      n = len > 2000 ? 2000 : len;
+      len -= n;
+
+      do {
+        s1 = (s1 + buf[pos++]) |0;
+        s2 = (s2 + s1) |0;
+      } while (--n);
+
+      s1 %= 65521;
+      s2 %= 65521;
+    }
+
+    return (s1 | (s2 << 16)) |0;
+  }
+
+
+  module.exports = adler32;
+
+  },{}],4:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  module.exports = {
+
+    /* Allowed flush values; see deflate() and inflate() below for details */
+    Z_NO_FLUSH:         0,
+    Z_PARTIAL_FLUSH:    1,
+    Z_SYNC_FLUSH:       2,
+    Z_FULL_FLUSH:       3,
+    Z_FINISH:           4,
+    Z_BLOCK:            5,
+    Z_TREES:            6,
+
+    /* Return codes for the compression/decompression functions. Negative values
+    * are errors, positive values are used for special but normal events.
+    */
+    Z_OK:               0,
+    Z_STREAM_END:       1,
+    Z_NEED_DICT:        2,
+    Z_ERRNO:           -1,
+    Z_STREAM_ERROR:    -2,
+    Z_DATA_ERROR:      -3,
+    //Z_MEM_ERROR:     -4,
+    Z_BUF_ERROR:       -5,
+    //Z_VERSION_ERROR: -6,
+
+    /* compression levels */
+    Z_NO_COMPRESSION:         0,
+    Z_BEST_SPEED:             1,
+    Z_BEST_COMPRESSION:       9,
+    Z_DEFAULT_COMPRESSION:   -1,
+
+
+    Z_FILTERED:               1,
+    Z_HUFFMAN_ONLY:           2,
+    Z_RLE:                    3,
+    Z_FIXED:                  4,
+    Z_DEFAULT_STRATEGY:       0,
+
+    /* Possible values of the data_type field (though see inflate()) */
+    Z_BINARY:                 0,
+    Z_TEXT:                   1,
+    //Z_ASCII:                1, // = Z_TEXT (deprecated)
+    Z_UNKNOWN:                2,
+
+    /* The deflate compression method */
+    Z_DEFLATED:               8
+    //Z_NULL:                 null // Use -1 or null inline, depending on var type
+  };
+
+  },{}],5:[function(require,module,exports){
+  'use strict';
+
+  // Note: we can't get significant speed boost here.
+  // So write code to minimize size - no pregenerated tables
+  // and array tools dependencies.
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  // Use ordinary array, since untyped makes no boost here
+  function makeTable() {
+    var c, table = [];
+
+    for (var n = 0; n < 256; n++) {
+      c = n;
+      for (var k = 0; k < 8; k++) {
+        c = ((c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1));
+      }
+      table[n] = c;
+    }
+
+    return table;
+  }
+
+  // Create table on load. Just 255 signed longs. Not a problem.
+  var crcTable = makeTable();
+
+
+  function crc32(crc, buf, len, pos) {
+    var t = crcTable,
+        end = pos + len;
+
+    crc ^= -1;
+
+    for (var i = pos; i < end; i++) {
+      crc = (crc >>> 8) ^ t[(crc ^ buf[i]) & 0xFF];
+    }
+
+    return (crc ^ (-1)); // >>> 0;
+  }
+
+
+  module.exports = crc32;
+
+  },{}],6:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  function GZheader() {
+    /* true if compressed data believed to be text */
+    this.text       = 0;
+    /* modification time */
+    this.time       = 0;
+    /* extra flags (not used when writing a gzip file) */
+    this.xflags     = 0;
+    /* operating system */
+    this.os         = 0;
+    /* pointer to extra field or Z_NULL if none */
+    this.extra      = null;
+    /* extra field length (valid if extra != Z_NULL) */
+    this.extra_len  = 0; // Actually, we don't need it in JS,
+                         // but leave for few code modifications
+
+    //
+    // Setup limits is not necessary because in js we should not preallocate memory
+    // for inflate use constant limit in 65536 bytes
+    //
+
+    /* space at extra (only when reading header) */
+    // this.extra_max  = 0;
+    /* pointer to zero-terminated file name or Z_NULL */
+    this.name       = '';
+    /* space at name (only when reading header) */
+    // this.name_max   = 0;
+    /* pointer to zero-terminated comment or Z_NULL */
+    this.comment    = '';
+    /* space at comment (only when reading header) */
+    // this.comm_max   = 0;
+    /* true if there was or will be a header crc */
+    this.hcrc       = 0;
+    /* true when done reading gzip header (not used when writing a gzip file) */
+    this.done       = false;
+  }
+
+  module.exports = GZheader;
+
+  },{}],7:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  // See state defs from inflate.js
+  var BAD = 30;       /* got a data error -- remain here until reset */
+  var TYPE = 12;      /* i: waiting for type bits, including last-flag bit */
+
+  /*
+     Decode literal, length, and distance codes and write out the resulting
+     literal and match bytes until either not enough input or output is
+     available, an end-of-block is encountered, or a data error is encountered.
+     When large enough input and output buffers are supplied to inflate(), for
+     example, a 16K input buffer and a 64K output buffer, more than 95% of the
+     inflate execution time is spent in this routine.
+
+     Entry assumptions:
+
+          state.mode === LEN
+          strm.avail_in >= 6
+          strm.avail_out >= 258
+          start >= strm.avail_out
+          state.bits < 8
+
+     On return, state.mode is one of:
+
+          LEN -- ran out of enough output space or enough available input
+          TYPE -- reached end of block code, inflate() to interpret next block
+          BAD -- error in block data
+
+     Notes:
+
+      - The maximum input bits used by a length/distance pair is 15 bits for the
+        length code, 5 bits for the length extra, 15 bits for the distance code,
+        and 13 bits for the distance extra.  This totals 48 bits, or six bytes.
+        Therefore if strm.avail_in >= 6, then there is enough input to avoid
+        checking for available input while decoding.
+
+      - The maximum bytes that a single length/distance pair can output is 258
+        bytes, which is the maximum length that can be coded.  inflate_fast()
+        requires strm.avail_out >= 258 for each loop to avoid checking for
+        output space.
+   */
+  module.exports = function inflate_fast(strm, start) {
+    var state;
+    var _in;                    /* local strm.input */
+    var last;                   /* have enough input while in < last */
+    var _out;                   /* local strm.output */
+    var beg;                    /* inflate()'s initial strm.output */
+    var end;                    /* while out < end, enough space available */
+  //#ifdef INFLATE_STRICT
+    var dmax;                   /* maximum distance from zlib header */
+  //#endif
+    var wsize;                  /* window size or zero if not using window */
+    var whave;                  /* valid bytes in the window */
+    var wnext;                  /* window write index */
+    // Use `s_window` instead `window`, avoid conflict with instrumentation tools
+    var s_window;               /* allocated sliding window, if wsize != 0 */
+    var hold;                   /* local strm.hold */
+    var bits;                   /* local strm.bits */
+    var lcode;                  /* local strm.lencode */
+    var dcode;                  /* local strm.distcode */
+    var lmask;                  /* mask for first level of length codes */
+    var dmask;                  /* mask for first level of distance codes */
+    var here;                   /* retrieved table entry */
+    var op;                     /* code bits, operation, extra bits, or */
+                                /*  window position, window bytes to copy */
+    var len;                    /* match length, unused bytes */
+    var dist;                   /* match distance */
+    var from;                   /* where to copy match from */
+    var from_source;
+
+
+    var input, output; // JS specific, because we have no pointers
+
+    /* copy state to local variables */
+    state = strm.state;
+    //here = state.here;
+    _in = strm.next_in;
+    input = strm.input;
+    last = _in + (strm.avail_in - 5);
+    _out = strm.next_out;
+    output = strm.output;
+    beg = _out - (start - strm.avail_out);
+    end = _out + (strm.avail_out - 257);
+  //#ifdef INFLATE_STRICT
+    dmax = state.dmax;
+  //#endif
+    wsize = state.wsize;
+    whave = state.whave;
+    wnext = state.wnext;
+    s_window = state.window;
+    hold = state.hold;
+    bits = state.bits;
+    lcode = state.lencode;
+    dcode = state.distcode;
+    lmask = (1 << state.lenbits) - 1;
+    dmask = (1 << state.distbits) - 1;
+
+
+    /* decode literals and length/distances until end-of-block or not enough
+       input data or output space */
+
+    top:
+    do {
+      if (bits < 15) {
+        hold += input[_in++] << bits;
+        bits += 8;
+        hold += input[_in++] << bits;
+        bits += 8;
+      }
+
+      here = lcode[hold & lmask];
+
+      dolen:
+      for (;;) { // Goto emulation
+        op = here >>> 24/*here.bits*/;
+        hold >>>= op;
+        bits -= op;
+        op = (here >>> 16) & 0xff/*here.op*/;
+        if (op === 0) {                          /* literal */
+          //Tracevv((stderr, here.val >= 0x20 && here.val < 0x7f ?
+          //        "inflate:         literal '%c'\n" :
+          //        "inflate:         literal 0x%02x\n", here.val));
+          output[_out++] = here & 0xffff/*here.val*/;
+        }
+        else if (op & 16) {                     /* length base */
+          len = here & 0xffff/*here.val*/;
+          op &= 15;                           /* number of extra bits */
+          if (op) {
+            if (bits < op) {
+              hold += input[_in++] << bits;
+              bits += 8;
+            }
+            len += hold & ((1 << op) - 1);
+            hold >>>= op;
+            bits -= op;
+          }
+          //Tracevv((stderr, "inflate:         length %u\n", len));
+          if (bits < 15) {
+            hold += input[_in++] << bits;
+            bits += 8;
+            hold += input[_in++] << bits;
+            bits += 8;
+          }
+          here = dcode[hold & dmask];
+
+          dodist:
+          for (;;) { // goto emulation
+            op = here >>> 24/*here.bits*/;
+            hold >>>= op;
+            bits -= op;
+            op = (here >>> 16) & 0xff/*here.op*/;
+
+            if (op & 16) {                      /* distance base */
+              dist = here & 0xffff/*here.val*/;
+              op &= 15;                       /* number of extra bits */
+              if (bits < op) {
+                hold += input[_in++] << bits;
+                bits += 8;
+                if (bits < op) {
+                  hold += input[_in++] << bits;
+                  bits += 8;
+                }
+              }
+              dist += hold & ((1 << op) - 1);
+  //#ifdef INFLATE_STRICT
+              if (dist > dmax) {
+                strm.msg = 'invalid distance too far back';
+                state.mode = BAD;
+                break top;
+              }
+  //#endif
+              hold >>>= op;
+              bits -= op;
+              //Tracevv((stderr, "inflate:         distance %u\n", dist));
+              op = _out - beg;                /* max distance in output */
+              if (dist > op) {                /* see if copy from window */
+                op = dist - op;               /* distance back in window */
+                if (op > whave) {
+                  if (state.sane) {
+                    strm.msg = 'invalid distance too far back';
+                    state.mode = BAD;
+                    break top;
+                  }
+
+  // (!) This block is disabled in zlib defaults,
+  // don't enable it for binary compatibility
+  //#ifdef INFLATE_ALLOW_INVALID_DISTANCE_TOOFAR_ARRR
+  //                if (len <= op - whave) {
+  //                  do {
+  //                    output[_out++] = 0;
+  //                  } while (--len);
+  //                  continue top;
+  //                }
+  //                len -= op - whave;
+  //                do {
+  //                  output[_out++] = 0;
+  //                } while (--op > whave);
+  //                if (op === 0) {
+  //                  from = _out - dist;
+  //                  do {
+  //                    output[_out++] = output[from++];
+  //                  } while (--len);
+  //                  continue top;
+  //                }
+  //#endif
+                }
+                from = 0; // window index
+                from_source = s_window;
+                if (wnext === 0) {           /* very common case */
+                  from += wsize - op;
+                  if (op < len) {         /* some from window */
+                    len -= op;
+                    do {
+                      output[_out++] = s_window[from++];
+                    } while (--op);
+                    from = _out - dist;  /* rest from output */
+                    from_source = output;
+                  }
+                }
+                else if (wnext < op) {      /* wrap around window */
+                  from += wsize + wnext - op;
+                  op -= wnext;
+                  if (op < len) {         /* some from end of window */
+                    len -= op;
+                    do {
+                      output[_out++] = s_window[from++];
+                    } while (--op);
+                    from = 0;
+                    if (wnext < len) {  /* some from start of window */
+                      op = wnext;
+                      len -= op;
+                      do {
+                        output[_out++] = s_window[from++];
+                      } while (--op);
+                      from = _out - dist;      /* rest from output */
+                      from_source = output;
+                    }
+                  }
+                }
+                else {                      /* contiguous in window */
+                  from += wnext - op;
+                  if (op < len) {         /* some from window */
+                    len -= op;
+                    do {
+                      output[_out++] = s_window[from++];
+                    } while (--op);
+                    from = _out - dist;  /* rest from output */
+                    from_source = output;
+                  }
+                }
+                while (len > 2) {
+                  output[_out++] = from_source[from++];
+                  output[_out++] = from_source[from++];
+                  output[_out++] = from_source[from++];
+                  len -= 3;
+                }
+                if (len) {
+                  output[_out++] = from_source[from++];
+                  if (len > 1) {
+                    output[_out++] = from_source[from++];
+                  }
+                }
+              }
+              else {
+                from = _out - dist;          /* copy direct from output */
+                do {                        /* minimum length is three */
+                  output[_out++] = output[from++];
+                  output[_out++] = output[from++];
+                  output[_out++] = output[from++];
+                  len -= 3;
+                } while (len > 2);
+                if (len) {
+                  output[_out++] = output[from++];
+                  if (len > 1) {
+                    output[_out++] = output[from++];
+                  }
+                }
+              }
+            }
+            else if ((op & 64) === 0) {          /* 2nd level distance code */
+              here = dcode[(here & 0xffff)/*here.val*/ + (hold & ((1 << op) - 1))];
+              continue dodist;
+            }
+            else {
+              strm.msg = 'invalid distance code';
+              state.mode = BAD;
+              break top;
+            }
+
+            break; // need to emulate goto via "continue"
+          }
+        }
+        else if ((op & 64) === 0) {              /* 2nd level length code */
+          here = lcode[(here & 0xffff)/*here.val*/ + (hold & ((1 << op) - 1))];
+          continue dolen;
+        }
+        else if (op & 32) {                     /* end-of-block */
+          //Tracevv((stderr, "inflate:         end of block\n"));
+          state.mode = TYPE;
+          break top;
+        }
+        else {
+          strm.msg = 'invalid literal/length code';
+          state.mode = BAD;
+          break top;
+        }
+
+        break; // need to emulate goto via "continue"
+      }
+    } while (_in < last && _out < end);
+
+    /* return unused bytes (on entry, bits < 8, so in won't go too far back) */
+    len = bits >> 3;
+    _in -= len;
+    bits -= len << 3;
+    hold &= (1 << bits) - 1;
+
+    /* update state and return */
+    strm.next_in = _in;
+    strm.next_out = _out;
+    strm.avail_in = (_in < last ? 5 + (last - _in) : 5 - (_in - last));
+    strm.avail_out = (_out < end ? 257 + (end - _out) : 257 - (_out - end));
+    state.hold = hold;
+    state.bits = bits;
+    return;
+  };
+
+  },{}],8:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  var utils         = require('../utils/common');
+  var adler32       = require('./adler32');
+  var crc32         = require('./crc32');
+  var inflate_fast  = require('./inffast');
+  var inflate_table = require('./inftrees');
+
+  var CODES = 0;
+  var LENS = 1;
+  var DISTS = 2;
+
+  /* Public constants ==========================================================*/
+  /* ===========================================================================*/
+
+
+  /* Allowed flush values; see deflate() and inflate() below for details */
+  //var Z_NO_FLUSH      = 0;
+  //var Z_PARTIAL_FLUSH = 1;
+  //var Z_SYNC_FLUSH    = 2;
+  //var Z_FULL_FLUSH    = 3;
+  var Z_FINISH        = 4;
+  var Z_BLOCK         = 5;
+  var Z_TREES         = 6;
+
+
+  /* Return codes for the compression/decompression functions. Negative values
+   * are errors, positive values are used for special but normal events.
+   */
+  var Z_OK            = 0;
+  var Z_STREAM_END    = 1;
+  var Z_NEED_DICT     = 2;
+  //var Z_ERRNO         = -1;
+  var Z_STREAM_ERROR  = -2;
+  var Z_DATA_ERROR    = -3;
+  var Z_MEM_ERROR     = -4;
+  var Z_BUF_ERROR     = -5;
+  //var Z_VERSION_ERROR = -6;
+
+  /* The deflate compression method */
+  var Z_DEFLATED  = 8;
+
+
+  /* STATES ====================================================================*/
+  /* ===========================================================================*/
+
+
+  var    HEAD = 1;       /* i: waiting for magic header */
+  var    FLAGS = 2;      /* i: waiting for method and flags (gzip) */
+  var    TIME = 3;       /* i: waiting for modification time (gzip) */
+  var    OS = 4;         /* i: waiting for extra flags and operating system (gzip) */
+  var    EXLEN = 5;      /* i: waiting for extra length (gzip) */
+  var    EXTRA = 6;      /* i: waiting for extra bytes (gzip) */
+  var    NAME = 7;       /* i: waiting for end of file name (gzip) */
+  var    COMMENT = 8;    /* i: waiting for end of comment (gzip) */
+  var    HCRC = 9;       /* i: waiting for header crc (gzip) */
+  var    DICTID = 10;    /* i: waiting for dictionary check value */
+  var    DICT = 11;      /* waiting for inflateSetDictionary() call */
+  var        TYPE = 12;      /* i: waiting for type bits, including last-flag bit */
+  var        TYPEDO = 13;    /* i: same, but skip check to exit inflate on new block */
+  var        STORED = 14;    /* i: waiting for stored size (length and complement) */
+  var        COPY_ = 15;     /* i/o: same as COPY below, but only first time in */
+  var        COPY = 16;      /* i/o: waiting for input or output to copy stored block */
+  var        TABLE = 17;     /* i: waiting for dynamic block table lengths */
+  var        LENLENS = 18;   /* i: waiting for code length code lengths */
+  var        CODELENS = 19;  /* i: waiting for length/lit and distance code lengths */
+  var            LEN_ = 20;      /* i: same as LEN below, but only first time in */
+  var            LEN = 21;       /* i: waiting for length/lit/eob code */
+  var            LENEXT = 22;    /* i: waiting for length extra bits */
+  var            DIST = 23;      /* i: waiting for distance code */
+  var            DISTEXT = 24;   /* i: waiting for distance extra bits */
+  var            MATCH = 25;     /* o: waiting for output space to copy string */
+  var            LIT = 26;       /* o: waiting for output space to write literal */
+  var    CHECK = 27;     /* i: waiting for 32-bit check value */
+  var    LENGTH = 28;    /* i: waiting for 32-bit length (gzip) */
+  var    DONE = 29;      /* finished check, done -- remain here until reset */
+  var    BAD = 30;       /* got a data error -- remain here until reset */
+  var    MEM = 31;       /* got an inflate() memory error -- remain here until reset */
+  var    SYNC = 32;      /* looking for synchronization bytes to restart inflate() */
+
+  /* ===========================================================================*/
+
+
+
+  var ENOUGH_LENS = 852;
+  var ENOUGH_DISTS = 592;
+  //var ENOUGH =  (ENOUGH_LENS+ENOUGH_DISTS);
+
+  var MAX_WBITS = 15;
+  /* 32K LZ77 window */
+  var DEF_WBITS = MAX_WBITS;
+
+
+  function zswap32(q) {
+    return  (((q >>> 24) & 0xff) +
+            ((q >>> 8) & 0xff00) +
+            ((q & 0xff00) << 8) +
+            ((q & 0xff) << 24));
+  }
+
+
+  function InflateState() {
+    this.mode = 0;             /* current inflate mode */
+    this.last = false;          /* true if processing last block */
+    this.wrap = 0;              /* bit 0 true for zlib, bit 1 true for gzip */
+    this.havedict = false;      /* true if dictionary provided */
+    this.flags = 0;             /* gzip header method and flags (0 if zlib) */
+    this.dmax = 0;              /* zlib header max distance (INFLATE_STRICT) */
+    this.check = 0;             /* protected copy of check value */
+    this.total = 0;             /* protected copy of output count */
+    // TODO: may be {}
+    this.head = null;           /* where to save gzip header information */
+
+    /* sliding window */
+    this.wbits = 0;             /* log base 2 of requested window size */
+    this.wsize = 0;             /* window size or zero if not using window */
+    this.whave = 0;             /* valid bytes in the window */
+    this.wnext = 0;             /* window write index */
+    this.window = null;         /* allocated sliding window, if needed */
+
+    /* bit accumulator */
+    this.hold = 0;              /* input bit accumulator */
+    this.bits = 0;              /* number of bits in "in" */
+
+    /* for string and stored block copying */
+    this.length = 0;            /* literal or length of data to copy */
+    this.offset = 0;            /* distance back to copy string from */
+
+    /* for table and code decoding */
+    this.extra = 0;             /* extra bits needed */
+
+    /* fixed and dynamic code tables */
+    this.lencode = null;          /* starting table for length/literal codes */
+    this.distcode = null;         /* starting table for distance codes */
+    this.lenbits = 0;           /* index bits for lencode */
+    this.distbits = 0;          /* index bits for distcode */
+
+    /* dynamic table building */
+    this.ncode = 0;             /* number of code length code lengths */
+    this.nlen = 0;              /* number of length code lengths */
+    this.ndist = 0;             /* number of distance code lengths */
+    this.have = 0;              /* number of code lengths in lens[] */
+    this.next = null;              /* next available space in codes[] */
+
+    this.lens = new utils.Buf16(320); /* temporary storage for code lengths */
+    this.work = new utils.Buf16(288); /* work area for code table building */
+
+    /*
+     because we don't have pointers in js, we use lencode and distcode directly
+     as buffers so we don't need codes
+    */
+    //this.codes = new utils.Buf32(ENOUGH);       /* space for code tables */
+    this.lendyn = null;              /* dynamic table for length/literal codes (JS specific) */
+    this.distdyn = null;             /* dynamic table for distance codes (JS specific) */
+    this.sane = 0;                   /* if false, allow invalid distance too far */
+    this.back = 0;                   /* bits back of last unprocessed length/lit */
+    this.was = 0;                    /* initial length of match */
+  }
+
+  function inflateResetKeep(strm) {
+    var state;
+
+    if (!strm || !strm.state) { return Z_STREAM_ERROR; }
+    state = strm.state;
+    strm.total_in = strm.total_out = state.total = 0;
+    strm.msg = ''; /*Z_NULL*/
+    if (state.wrap) {       /* to support ill-conceived Java test suite */
+      strm.adler = state.wrap & 1;
+    }
+    state.mode = HEAD;
+    state.last = 0;
+    state.havedict = 0;
+    state.dmax = 32768;
+    state.head = null/*Z_NULL*/;
+    state.hold = 0;
+    state.bits = 0;
+    //state.lencode = state.distcode = state.next = state.codes;
+    state.lencode = state.lendyn = new utils.Buf32(ENOUGH_LENS);
+    state.distcode = state.distdyn = new utils.Buf32(ENOUGH_DISTS);
+
+    state.sane = 1;
+    state.back = -1;
+    //Tracev((stderr, "inflate: reset\n"));
+    return Z_OK;
+  }
+
+  function inflateReset(strm) {
+    var state;
+
+    if (!strm || !strm.state) { return Z_STREAM_ERROR; }
+    state = strm.state;
+    state.wsize = 0;
+    state.whave = 0;
+    state.wnext = 0;
+    return inflateResetKeep(strm);
+
+  }
+
+  function inflateReset2(strm, windowBits) {
+    var wrap;
+    var state;
+
+    /* get the state */
+    if (!strm || !strm.state) { return Z_STREAM_ERROR; }
+    state = strm.state;
+
+    /* extract wrap request from windowBits parameter */
+    if (windowBits < 0) {
+      wrap = 0;
+      windowBits = -windowBits;
+    }
+    else {
+      wrap = (windowBits >> 4) + 1;
+      if (windowBits < 48) {
+        windowBits &= 15;
+      }
+    }
+
+    /* set number of window bits, free window if different */
+    if (windowBits && (windowBits < 8 || windowBits > 15)) {
+      return Z_STREAM_ERROR;
+    }
+    if (state.window !== null && state.wbits !== windowBits) {
+      state.window = null;
+    }
+
+    /* update state and reset the rest of it */
+    state.wrap = wrap;
+    state.wbits = windowBits;
+    return inflateReset(strm);
+  }
+
+  function inflateInit2(strm, windowBits) {
+    var ret;
+    var state;
+
+    if (!strm) { return Z_STREAM_ERROR; }
+    //strm.msg = Z_NULL;                 /* in case we return an error */
+
+    state = new InflateState();
+
+    //if (state === Z_NULL) return Z_MEM_ERROR;
+    //Tracev((stderr, "inflate: allocated\n"));
+    strm.state = state;
+    state.window = null/*Z_NULL*/;
+    ret = inflateReset2(strm, windowBits);
+    if (ret !== Z_OK) {
+      strm.state = null/*Z_NULL*/;
+    }
+    return ret;
+  }
+
+  function inflateInit(strm) {
+    return inflateInit2(strm, DEF_WBITS);
+  }
+
+
+  /*
+   Return state with length and distance decoding tables and index sizes set to
+   fixed code decoding.  Normally this returns fixed tables from inffixed.h.
+   If BUILDFIXED is defined, then instead this routine builds the tables the
+   first time it's called, and returns those tables the first time and
+   thereafter.  This reduces the size of the code by about 2K bytes, in
+   exchange for a little execution time.  However, BUILDFIXED should not be
+   used for threaded applications, since the rewriting of the tables and virgin
+   may not be thread-safe.
+   */
+  var virgin = true;
+
+  var lenfix, distfix; // We have no pointers in JS, so keep tables separate
+
+  function fixedtables(state) {
+    /* build fixed huffman tables if first call (may not be thread safe) */
+    if (virgin) {
+      var sym;
+
+      lenfix = new utils.Buf32(512);
+      distfix = new utils.Buf32(32);
+
+      /* literal/length table */
+      sym = 0;
+      while (sym < 144) { state.lens[sym++] = 8; }
+      while (sym < 256) { state.lens[sym++] = 9; }
+      while (sym < 280) { state.lens[sym++] = 7; }
+      while (sym < 288) { state.lens[sym++] = 8; }
+
+      inflate_table(LENS,  state.lens, 0, 288, lenfix,   0, state.work, { bits: 9 });
+
+      /* distance table */
+      sym = 0;
+      while (sym < 32) { state.lens[sym++] = 5; }
+
+      inflate_table(DISTS, state.lens, 0, 32,   distfix, 0, state.work, { bits: 5 });
+
+      /* do this just once */
+      virgin = false;
+    }
+
+    state.lencode = lenfix;
+    state.lenbits = 9;
+    state.distcode = distfix;
+    state.distbits = 5;
+  }
+
+
+  /*
+   Update the window with the last wsize (normally 32K) bytes written before
+   returning.  If window does not exist yet, create it.  This is only called
+   when a window is already in use, or when output has been written during this
+   inflate call, but the end of the deflate stream has not been reached yet.
+   It is also called to create a window for dictionary data when a dictionary
+   is loaded.
+
+   Providing output buffers larger than 32K to inflate() should provide a speed
+   advantage, since only the last 32K of output is copied to the sliding window
+   upon return from inflate(), and since all distances after the first 32K of
+   output will fall in the output data, making match copies simpler and faster.
+   The advantage may be dependent on the size of the processor's data caches.
+   */
+  function updatewindow(strm, src, end, copy) {
+    var dist;
+    var state = strm.state;
+
+    /* if it hasn't been done already, allocate space for the window */
+    if (state.window === null) {
+      state.wsize = 1 << state.wbits;
+      state.wnext = 0;
+      state.whave = 0;
+
+      state.window = new utils.Buf8(state.wsize);
+    }
+
+    /* copy state->wsize or less output bytes into the circular window */
+    if (copy >= state.wsize) {
+      utils.arraySet(state.window, src, end - state.wsize, state.wsize, 0);
+      state.wnext = 0;
+      state.whave = state.wsize;
+    }
+    else {
+      dist = state.wsize - state.wnext;
+      if (dist > copy) {
+        dist = copy;
+      }
+      //zmemcpy(state->window + state->wnext, end - copy, dist);
+      utils.arraySet(state.window, src, end - copy, dist, state.wnext);
+      copy -= dist;
+      if (copy) {
+        //zmemcpy(state->window, end - copy, copy);
+        utils.arraySet(state.window, src, end - copy, copy, 0);
+        state.wnext = copy;
+        state.whave = state.wsize;
+      }
+      else {
+        state.wnext += dist;
+        if (state.wnext === state.wsize) { state.wnext = 0; }
+        if (state.whave < state.wsize) { state.whave += dist; }
+      }
+    }
+    return 0;
+  }
+
+  function inflate(strm, flush) {
+    var state;
+    var input, output;          // input/output buffers
+    var next;                   /* next input INDEX */
+    var put;                    /* next output INDEX */
+    var have, left;             /* available input and output */
+    var hold;                   /* bit buffer */
+    var bits;                   /* bits in bit buffer */
+    var _in, _out;              /* save starting available input and output */
+    var copy;                   /* number of stored or match bytes to copy */
+    var from;                   /* where to copy match bytes from */
+    var from_source;
+    var here = 0;               /* current decoding table entry */
+    var here_bits, here_op, here_val; // paked "here" denormalized (JS specific)
+    //var last;                   /* parent table entry */
+    var last_bits, last_op, last_val; // paked "last" denormalized (JS specific)
+    var len;                    /* length to copy for repeats, bits to drop */
+    var ret;                    /* return code */
+    var hbuf = new utils.Buf8(4);    /* buffer for gzip header crc calculation */
+    var opts;
+
+    var n; // temporary var for NEED_BITS
+
+    var order = /* permutation of code lengths */
+      [ 16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15 ];
+
+
+    if (!strm || !strm.state || !strm.output ||
+        (!strm.input && strm.avail_in !== 0)) {
+      return Z_STREAM_ERROR;
+    }
+
+    state = strm.state;
+    if (state.mode === TYPE) { state.mode = TYPEDO; }    /* skip check */
+
+
+    //--- LOAD() ---
+    put = strm.next_out;
+    output = strm.output;
+    left = strm.avail_out;
+    next = strm.next_in;
+    input = strm.input;
+    have = strm.avail_in;
+    hold = state.hold;
+    bits = state.bits;
+    //---
+
+    _in = have;
+    _out = left;
+    ret = Z_OK;
+
+    inf_leave: // goto emulation
+    for (;;) {
+      switch (state.mode) {
+        case HEAD:
+          if (state.wrap === 0) {
+            state.mode = TYPEDO;
+            break;
+          }
+          //=== NEEDBITS(16);
+          while (bits < 16) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          if ((state.wrap & 2) && hold === 0x8b1f) {  /* gzip header */
+            state.check = 0/*crc32(0L, Z_NULL, 0)*/;
+            //=== CRC2(state.check, hold);
+            hbuf[0] = hold & 0xff;
+            hbuf[1] = (hold >>> 8) & 0xff;
+            state.check = crc32(state.check, hbuf, 2, 0);
+            //===//
+
+            //=== INITBITS();
+            hold = 0;
+            bits = 0;
+            //===//
+            state.mode = FLAGS;
+            break;
+          }
+          state.flags = 0;           /* expect zlib header */
+          if (state.head) {
+            state.head.done = false;
+          }
+          if (!(state.wrap & 1) ||   /* check if zlib header allowed */
+            (((hold & 0xff)/*BITS(8)*/ << 8) + (hold >> 8)) % 31) {
+            strm.msg = 'incorrect header check';
+            state.mode = BAD;
+            break;
+          }
+          if ((hold & 0x0f)/*BITS(4)*/ !== Z_DEFLATED) {
+            strm.msg = 'unknown compression method';
+            state.mode = BAD;
+            break;
+          }
+          //--- DROPBITS(4) ---//
+          hold >>>= 4;
+          bits -= 4;
+          //---//
+          len = (hold & 0x0f)/*BITS(4)*/ + 8;
+          if (state.wbits === 0) {
+            state.wbits = len;
+          }
+          else if (len > state.wbits) {
+            strm.msg = 'invalid window size';
+            state.mode = BAD;
+            break;
+          }
+          state.dmax = 1 << len;
+          //Tracev((stderr, "inflate:   zlib header ok\n"));
+          strm.adler = state.check = 1/*adler32(0L, Z_NULL, 0)*/;
+          state.mode = hold & 0x200 ? DICTID : TYPE;
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          break;
+        case FLAGS:
+          //=== NEEDBITS(16); */
+          while (bits < 16) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          state.flags = hold;
+          if ((state.flags & 0xff) !== Z_DEFLATED) {
+            strm.msg = 'unknown compression method';
+            state.mode = BAD;
+            break;
+          }
+          if (state.flags & 0xe000) {
+            strm.msg = 'unknown header flags set';
+            state.mode = BAD;
+            break;
+          }
+          if (state.head) {
+            state.head.text = ((hold >> 8) & 1);
+          }
+          if (state.flags & 0x0200) {
+            //=== CRC2(state.check, hold);
+            hbuf[0] = hold & 0xff;
+            hbuf[1] = (hold >>> 8) & 0xff;
+            state.check = crc32(state.check, hbuf, 2, 0);
+            //===//
+          }
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          state.mode = TIME;
+          /* falls through */
+        case TIME:
+          //=== NEEDBITS(32); */
+          while (bits < 32) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          if (state.head) {
+            state.head.time = hold;
+          }
+          if (state.flags & 0x0200) {
+            //=== CRC4(state.check, hold)
+            hbuf[0] = hold & 0xff;
+            hbuf[1] = (hold >>> 8) & 0xff;
+            hbuf[2] = (hold >>> 16) & 0xff;
+            hbuf[3] = (hold >>> 24) & 0xff;
+            state.check = crc32(state.check, hbuf, 4, 0);
+            //===
+          }
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          state.mode = OS;
+          /* falls through */
+        case OS:
+          //=== NEEDBITS(16); */
+          while (bits < 16) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          if (state.head) {
+            state.head.xflags = (hold & 0xff);
+            state.head.os = (hold >> 8);
+          }
+          if (state.flags & 0x0200) {
+            //=== CRC2(state.check, hold);
+            hbuf[0] = hold & 0xff;
+            hbuf[1] = (hold >>> 8) & 0xff;
+            state.check = crc32(state.check, hbuf, 2, 0);
+            //===//
+          }
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          state.mode = EXLEN;
+          /* falls through */
+        case EXLEN:
+          if (state.flags & 0x0400) {
+            //=== NEEDBITS(16); */
+            while (bits < 16) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            state.length = hold;
+            if (state.head) {
+              state.head.extra_len = hold;
+            }
+            if (state.flags & 0x0200) {
+              //=== CRC2(state.check, hold);
+              hbuf[0] = hold & 0xff;
+              hbuf[1] = (hold >>> 8) & 0xff;
+              state.check = crc32(state.check, hbuf, 2, 0);
+              //===//
+            }
+            //=== INITBITS();
+            hold = 0;
+            bits = 0;
+            //===//
+          }
+          else if (state.head) {
+            state.head.extra = null/*Z_NULL*/;
+          }
+          state.mode = EXTRA;
+          /* falls through */
+        case EXTRA:
+          if (state.flags & 0x0400) {
+            copy = state.length;
+            if (copy > have) { copy = have; }
+            if (copy) {
+              if (state.head) {
+                len = state.head.extra_len - state.length;
+                if (!state.head.extra) {
+                  // Use untyped array for more convenient processing later
+                  state.head.extra = new Array(state.head.extra_len);
+                }
+                utils.arraySet(
+                  state.head.extra,
+                  input,
+                  next,
+                  // extra field is limited to 65536 bytes
+                  // - no need for additional size check
+                  copy,
+                  /*len + copy > state.head.extra_max - len ? state.head.extra_max : copy,*/
+                  len
+                );
+                //zmemcpy(state.head.extra + len, next,
+                //        len + copy > state.head.extra_max ?
+                //        state.head.extra_max - len : copy);
+              }
+              if (state.flags & 0x0200) {
+                state.check = crc32(state.check, input, copy, next);
+              }
+              have -= copy;
+              next += copy;
+              state.length -= copy;
+            }
+            if (state.length) { break inf_leave; }
+          }
+          state.length = 0;
+          state.mode = NAME;
+          /* falls through */
+        case NAME:
+          if (state.flags & 0x0800) {
+            if (have === 0) { break inf_leave; }
+            copy = 0;
+            do {
+              // TODO: 2 or 1 bytes?
+              len = input[next + copy++];
+              /* use constant limit because in js we should not preallocate memory */
+              if (state.head && len &&
+                  (state.length < 65536 /*state.head.name_max*/)) {
+                state.head.name += String.fromCharCode(len);
+              }
+            } while (len && copy < have);
+
+            if (state.flags & 0x0200) {
+              state.check = crc32(state.check, input, copy, next);
+            }
+            have -= copy;
+            next += copy;
+            if (len) { break inf_leave; }
+          }
+          else if (state.head) {
+            state.head.name = null;
+          }
+          state.length = 0;
+          state.mode = COMMENT;
+          /* falls through */
+        case COMMENT:
+          if (state.flags & 0x1000) {
+            if (have === 0) { break inf_leave; }
+            copy = 0;
+            do {
+              len = input[next + copy++];
+              /* use constant limit because in js we should not preallocate memory */
+              if (state.head && len &&
+                  (state.length < 65536 /*state.head.comm_max*/)) {
+                state.head.comment += String.fromCharCode(len);
+              }
+            } while (len && copy < have);
+            if (state.flags & 0x0200) {
+              state.check = crc32(state.check, input, copy, next);
+            }
+            have -= copy;
+            next += copy;
+            if (len) { break inf_leave; }
+          }
+          else if (state.head) {
+            state.head.comment = null;
+          }
+          state.mode = HCRC;
+          /* falls through */
+        case HCRC:
+          if (state.flags & 0x0200) {
+            //=== NEEDBITS(16); */
+            while (bits < 16) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            if (hold !== (state.check & 0xffff)) {
+              strm.msg = 'header crc mismatch';
+              state.mode = BAD;
+              break;
+            }
+            //=== INITBITS();
+            hold = 0;
+            bits = 0;
+            //===//
+          }
+          if (state.head) {
+            state.head.hcrc = ((state.flags >> 9) & 1);
+            state.head.done = true;
+          }
+          strm.adler = state.check = 0;
+          state.mode = TYPE;
+          break;
+        case DICTID:
+          //=== NEEDBITS(32); */
+          while (bits < 32) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          strm.adler = state.check = zswap32(hold);
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          state.mode = DICT;
+          /* falls through */
+        case DICT:
+          if (state.havedict === 0) {
+            //--- RESTORE() ---
+            strm.next_out = put;
+            strm.avail_out = left;
+            strm.next_in = next;
+            strm.avail_in = have;
+            state.hold = hold;
+            state.bits = bits;
+            //---
+            return Z_NEED_DICT;
+          }
+          strm.adler = state.check = 1/*adler32(0L, Z_NULL, 0)*/;
+          state.mode = TYPE;
+          /* falls through */
+        case TYPE:
+          if (flush === Z_BLOCK || flush === Z_TREES) { break inf_leave; }
+          /* falls through */
+        case TYPEDO:
+          if (state.last) {
+            //--- BYTEBITS() ---//
+            hold >>>= bits & 7;
+            bits -= bits & 7;
+            //---//
+            state.mode = CHECK;
+            break;
+          }
+          //=== NEEDBITS(3); */
+          while (bits < 3) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          state.last = (hold & 0x01)/*BITS(1)*/;
+          //--- DROPBITS(1) ---//
+          hold >>>= 1;
+          bits -= 1;
+          //---//
+
+          switch ((hold & 0x03)/*BITS(2)*/) {
+            case 0:                             /* stored block */
+              //Tracev((stderr, "inflate:     stored block%s\n",
+              //        state.last ? " (last)" : ""));
+              state.mode = STORED;
+              break;
+            case 1:                             /* fixed block */
+              fixedtables(state);
+              //Tracev((stderr, "inflate:     fixed codes block%s\n",
+              //        state.last ? " (last)" : ""));
+              state.mode = LEN_;             /* decode codes */
+              if (flush === Z_TREES) {
+                //--- DROPBITS(2) ---//
+                hold >>>= 2;
+                bits -= 2;
+                //---//
+                break inf_leave;
+              }
+              break;
+            case 2:                             /* dynamic block */
+              //Tracev((stderr, "inflate:     dynamic codes block%s\n",
+              //        state.last ? " (last)" : ""));
+              state.mode = TABLE;
+              break;
+            case 3:
+              strm.msg = 'invalid block type';
+              state.mode = BAD;
+          }
+          //--- DROPBITS(2) ---//
+          hold >>>= 2;
+          bits -= 2;
+          //---//
+          break;
+        case STORED:
+          //--- BYTEBITS() ---// /* go to byte boundary */
+          hold >>>= bits & 7;
+          bits -= bits & 7;
+          //---//
+          //=== NEEDBITS(32); */
+          while (bits < 32) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          if ((hold & 0xffff) !== ((hold >>> 16) ^ 0xffff)) {
+            strm.msg = 'invalid stored block lengths';
+            state.mode = BAD;
+            break;
+          }
+          state.length = hold & 0xffff;
+          //Tracev((stderr, "inflate:       stored length %u\n",
+          //        state.length));
+          //=== INITBITS();
+          hold = 0;
+          bits = 0;
+          //===//
+          state.mode = COPY_;
+          if (flush === Z_TREES) { break inf_leave; }
+          /* falls through */
+        case COPY_:
+          state.mode = COPY;
+          /* falls through */
+        case COPY:
+          copy = state.length;
+          if (copy) {
+            if (copy > have) { copy = have; }
+            if (copy > left) { copy = left; }
+            if (copy === 0) { break inf_leave; }
+            //--- zmemcpy(put, next, copy); ---
+            utils.arraySet(output, input, next, copy, put);
+            //---//
+            have -= copy;
+            next += copy;
+            left -= copy;
+            put += copy;
+            state.length -= copy;
+            break;
+          }
+          //Tracev((stderr, "inflate:       stored end\n"));
+          state.mode = TYPE;
+          break;
+        case TABLE:
+          //=== NEEDBITS(14); */
+          while (bits < 14) {
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+          }
+          //===//
+          state.nlen = (hold & 0x1f)/*BITS(5)*/ + 257;
+          //--- DROPBITS(5) ---//
+          hold >>>= 5;
+          bits -= 5;
+          //---//
+          state.ndist = (hold & 0x1f)/*BITS(5)*/ + 1;
+          //--- DROPBITS(5) ---//
+          hold >>>= 5;
+          bits -= 5;
+          //---//
+          state.ncode = (hold & 0x0f)/*BITS(4)*/ + 4;
+          //--- DROPBITS(4) ---//
+          hold >>>= 4;
+          bits -= 4;
+          //---//
+  //#ifndef PKZIP_BUG_WORKAROUND
+          if (state.nlen > 286 || state.ndist > 30) {
+            strm.msg = 'too many length or distance symbols';
+            state.mode = BAD;
+            break;
+          }
+  //#endif
+          //Tracev((stderr, "inflate:       table sizes ok\n"));
+          state.have = 0;
+          state.mode = LENLENS;
+          /* falls through */
+        case LENLENS:
+          while (state.have < state.ncode) {
+            //=== NEEDBITS(3);
+            while (bits < 3) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            state.lens[order[state.have++]] = (hold & 0x07);//BITS(3);
+            //--- DROPBITS(3) ---//
+            hold >>>= 3;
+            bits -= 3;
+            //---//
+          }
+          while (state.have < 19) {
+            state.lens[order[state.have++]] = 0;
+          }
+          // We have separate tables & no pointers. 2 commented lines below not needed.
+          //state.next = state.codes;
+          //state.lencode = state.next;
+          // Switch to use dynamic table
+          state.lencode = state.lendyn;
+          state.lenbits = 7;
+
+          opts = { bits: state.lenbits };
+          ret = inflate_table(CODES, state.lens, 0, 19, state.lencode, 0, state.work, opts);
+          state.lenbits = opts.bits;
+
+          if (ret) {
+            strm.msg = 'invalid code lengths set';
+            state.mode = BAD;
+            break;
+          }
+          //Tracev((stderr, "inflate:       code lengths ok\n"));
+          state.have = 0;
+          state.mode = CODELENS;
+          /* falls through */
+        case CODELENS:
+          while (state.have < state.nlen + state.ndist) {
+            for (;;) {
+              here = state.lencode[hold & ((1 << state.lenbits) - 1)];/*BITS(state.lenbits)*/
+              here_bits = here >>> 24;
+              here_op = (here >>> 16) & 0xff;
+              here_val = here & 0xffff;
+
+              if ((here_bits) <= bits) { break; }
+              //--- PULLBYTE() ---//
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+              //---//
+            }
+            if (here_val < 16) {
+              //--- DROPBITS(here.bits) ---//
+              hold >>>= here_bits;
+              bits -= here_bits;
+              //---//
+              state.lens[state.have++] = here_val;
+            }
+            else {
+              if (here_val === 16) {
+                //=== NEEDBITS(here.bits + 2);
+                n = here_bits + 2;
+                while (bits < n) {
+                  if (have === 0) { break inf_leave; }
+                  have--;
+                  hold += input[next++] << bits;
+                  bits += 8;
+                }
+                //===//
+                //--- DROPBITS(here.bits) ---//
+                hold >>>= here_bits;
+                bits -= here_bits;
+                //---//
+                if (state.have === 0) {
+                  strm.msg = 'invalid bit length repeat';
+                  state.mode = BAD;
+                  break;
+                }
+                len = state.lens[state.have - 1];
+                copy = 3 + (hold & 0x03);//BITS(2);
+                //--- DROPBITS(2) ---//
+                hold >>>= 2;
+                bits -= 2;
+                //---//
+              }
+              else if (here_val === 17) {
+                //=== NEEDBITS(here.bits + 3);
+                n = here_bits + 3;
+                while (bits < n) {
+                  if (have === 0) { break inf_leave; }
+                  have--;
+                  hold += input[next++] << bits;
+                  bits += 8;
+                }
+                //===//
+                //--- DROPBITS(here.bits) ---//
+                hold >>>= here_bits;
+                bits -= here_bits;
+                //---//
+                len = 0;
+                copy = 3 + (hold & 0x07);//BITS(3);
+                //--- DROPBITS(3) ---//
+                hold >>>= 3;
+                bits -= 3;
+                //---//
+              }
+              else {
+                //=== NEEDBITS(here.bits + 7);
+                n = here_bits + 7;
+                while (bits < n) {
+                  if (have === 0) { break inf_leave; }
+                  have--;
+                  hold += input[next++] << bits;
+                  bits += 8;
+                }
+                //===//
+                //--- DROPBITS(here.bits) ---//
+                hold >>>= here_bits;
+                bits -= here_bits;
+                //---//
+                len = 0;
+                copy = 11 + (hold & 0x7f);//BITS(7);
+                //--- DROPBITS(7) ---//
+                hold >>>= 7;
+                bits -= 7;
+                //---//
+              }
+              if (state.have + copy > state.nlen + state.ndist) {
+                strm.msg = 'invalid bit length repeat';
+                state.mode = BAD;
+                break;
+              }
+              while (copy--) {
+                state.lens[state.have++] = len;
+              }
+            }
+          }
+
+          /* handle error breaks in while */
+          if (state.mode === BAD) { break; }
+
+          /* check for end-of-block code (better have one) */
+          if (state.lens[256] === 0) {
+            strm.msg = 'invalid code -- missing end-of-block';
+            state.mode = BAD;
+            break;
+          }
+
+          /* build code tables -- note: do not change the lenbits or distbits
+             values here (9 and 6) without reading the comments in inftrees.h
+             concerning the ENOUGH constants, which depend on those values */
+          state.lenbits = 9;
+
+          opts = { bits: state.lenbits };
+          ret = inflate_table(LENS, state.lens, 0, state.nlen, state.lencode, 0, state.work, opts);
+          // We have separate tables & no pointers. 2 commented lines below not needed.
+          // state.next_index = opts.table_index;
+          state.lenbits = opts.bits;
+          // state.lencode = state.next;
+
+          if (ret) {
+            strm.msg = 'invalid literal/lengths set';
+            state.mode = BAD;
+            break;
+          }
+
+          state.distbits = 6;
+          //state.distcode.copy(state.codes);
+          // Switch to use dynamic table
+          state.distcode = state.distdyn;
+          opts = { bits: state.distbits };
+          ret = inflate_table(DISTS, state.lens, state.nlen, state.ndist, state.distcode, 0, state.work, opts);
+          // We have separate tables & no pointers. 2 commented lines below not needed.
+          // state.next_index = opts.table_index;
+          state.distbits = opts.bits;
+          // state.distcode = state.next;
+
+          if (ret) {
+            strm.msg = 'invalid distances set';
+            state.mode = BAD;
+            break;
+          }
+          //Tracev((stderr, 'inflate:       codes ok\n'));
+          state.mode = LEN_;
+          if (flush === Z_TREES) { break inf_leave; }
+          /* falls through */
+        case LEN_:
+          state.mode = LEN;
+          /* falls through */
+        case LEN:
+          if (have >= 6 && left >= 258) {
+            //--- RESTORE() ---
+            strm.next_out = put;
+            strm.avail_out = left;
+            strm.next_in = next;
+            strm.avail_in = have;
+            state.hold = hold;
+            state.bits = bits;
+            //---
+            inflate_fast(strm, _out);
+            //--- LOAD() ---
+            put = strm.next_out;
+            output = strm.output;
+            left = strm.avail_out;
+            next = strm.next_in;
+            input = strm.input;
+            have = strm.avail_in;
+            hold = state.hold;
+            bits = state.bits;
+            //---
+
+            if (state.mode === TYPE) {
+              state.back = -1;
+            }
+            break;
+          }
+          state.back = 0;
+          for (;;) {
+            here = state.lencode[hold & ((1 << state.lenbits) - 1)];  /*BITS(state.lenbits)*/
+            here_bits = here >>> 24;
+            here_op = (here >>> 16) & 0xff;
+            here_val = here & 0xffff;
+
+            if (here_bits <= bits) { break; }
+            //--- PULLBYTE() ---//
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+            //---//
+          }
+          if (here_op && (here_op & 0xf0) === 0) {
+            last_bits = here_bits;
+            last_op = here_op;
+            last_val = here_val;
+            for (;;) {
+              here = state.lencode[last_val +
+                      ((hold & ((1 << (last_bits + last_op)) - 1))/*BITS(last.bits + last.op)*/ >> last_bits)];
+              here_bits = here >>> 24;
+              here_op = (here >>> 16) & 0xff;
+              here_val = here & 0xffff;
+
+              if ((last_bits + here_bits) <= bits) { break; }
+              //--- PULLBYTE() ---//
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+              //---//
+            }
+            //--- DROPBITS(last.bits) ---//
+            hold >>>= last_bits;
+            bits -= last_bits;
+            //---//
+            state.back += last_bits;
+          }
+          //--- DROPBITS(here.bits) ---//
+          hold >>>= here_bits;
+          bits -= here_bits;
+          //---//
+          state.back += here_bits;
+          state.length = here_val;
+          if (here_op === 0) {
+            //Tracevv((stderr, here.val >= 0x20 && here.val < 0x7f ?
+            //        "inflate:         literal '%c'\n" :
+            //        "inflate:         literal 0x%02x\n", here.val));
+            state.mode = LIT;
+            break;
+          }
+          if (here_op & 32) {
+            //Tracevv((stderr, "inflate:         end of block\n"));
+            state.back = -1;
+            state.mode = TYPE;
+            break;
+          }
+          if (here_op & 64) {
+            strm.msg = 'invalid literal/length code';
+            state.mode = BAD;
+            break;
+          }
+          state.extra = here_op & 15;
+          state.mode = LENEXT;
+          /* falls through */
+        case LENEXT:
+          if (state.extra) {
+            //=== NEEDBITS(state.extra);
+            n = state.extra;
+            while (bits < n) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            state.length += hold & ((1 << state.extra) - 1)/*BITS(state.extra)*/;
+            //--- DROPBITS(state.extra) ---//
+            hold >>>= state.extra;
+            bits -= state.extra;
+            //---//
+            state.back += state.extra;
+          }
+          //Tracevv((stderr, "inflate:         length %u\n", state.length));
+          state.was = state.length;
+          state.mode = DIST;
+          /* falls through */
+        case DIST:
+          for (;;) {
+            here = state.distcode[hold & ((1 << state.distbits) - 1)];/*BITS(state.distbits)*/
+            here_bits = here >>> 24;
+            here_op = (here >>> 16) & 0xff;
+            here_val = here & 0xffff;
+
+            if ((here_bits) <= bits) { break; }
+            //--- PULLBYTE() ---//
+            if (have === 0) { break inf_leave; }
+            have--;
+            hold += input[next++] << bits;
+            bits += 8;
+            //---//
+          }
+          if ((here_op & 0xf0) === 0) {
+            last_bits = here_bits;
+            last_op = here_op;
+            last_val = here_val;
+            for (;;) {
+              here = state.distcode[last_val +
+                      ((hold & ((1 << (last_bits + last_op)) - 1))/*BITS(last.bits + last.op)*/ >> last_bits)];
+              here_bits = here >>> 24;
+              here_op = (here >>> 16) & 0xff;
+              here_val = here & 0xffff;
+
+              if ((last_bits + here_bits) <= bits) { break; }
+              //--- PULLBYTE() ---//
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+              //---//
+            }
+            //--- DROPBITS(last.bits) ---//
+            hold >>>= last_bits;
+            bits -= last_bits;
+            //---//
+            state.back += last_bits;
+          }
+          //--- DROPBITS(here.bits) ---//
+          hold >>>= here_bits;
+          bits -= here_bits;
+          //---//
+          state.back += here_bits;
+          if (here_op & 64) {
+            strm.msg = 'invalid distance code';
+            state.mode = BAD;
+            break;
+          }
+          state.offset = here_val;
+          state.extra = (here_op) & 15;
+          state.mode = DISTEXT;
+          /* falls through */
+        case DISTEXT:
+          if (state.extra) {
+            //=== NEEDBITS(state.extra);
+            n = state.extra;
+            while (bits < n) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            state.offset += hold & ((1 << state.extra) - 1)/*BITS(state.extra)*/;
+            //--- DROPBITS(state.extra) ---//
+            hold >>>= state.extra;
+            bits -= state.extra;
+            //---//
+            state.back += state.extra;
+          }
+  //#ifdef INFLATE_STRICT
+          if (state.offset > state.dmax) {
+            strm.msg = 'invalid distance too far back';
+            state.mode = BAD;
+            break;
+          }
+  //#endif
+          //Tracevv((stderr, "inflate:         distance %u\n", state.offset));
+          state.mode = MATCH;
+          /* falls through */
+        case MATCH:
+          if (left === 0) { break inf_leave; }
+          copy = _out - left;
+          if (state.offset > copy) {         /* copy from window */
+            copy = state.offset - copy;
+            if (copy > state.whave) {
+              if (state.sane) {
+                strm.msg = 'invalid distance too far back';
+                state.mode = BAD;
+                break;
+              }
+  // (!) This block is disabled in zlib defaults,
+  // don't enable it for binary compatibility
+  //#ifdef INFLATE_ALLOW_INVALID_DISTANCE_TOOFAR_ARRR
+  //          Trace((stderr, "inflate.c too far\n"));
+  //          copy -= state.whave;
+  //          if (copy > state.length) { copy = state.length; }
+  //          if (copy > left) { copy = left; }
+  //          left -= copy;
+  //          state.length -= copy;
+  //          do {
+  //            output[put++] = 0;
+  //          } while (--copy);
+  //          if (state.length === 0) { state.mode = LEN; }
+  //          break;
+  //#endif
+            }
+            if (copy > state.wnext) {
+              copy -= state.wnext;
+              from = state.wsize - copy;
+            }
+            else {
+              from = state.wnext - copy;
+            }
+            if (copy > state.length) { copy = state.length; }
+            from_source = state.window;
+          }
+          else {                              /* copy from output */
+            from_source = output;
+            from = put - state.offset;
+            copy = state.length;
+          }
+          if (copy > left) { copy = left; }
+          left -= copy;
+          state.length -= copy;
+          do {
+            output[put++] = from_source[from++];
+          } while (--copy);
+          if (state.length === 0) { state.mode = LEN; }
+          break;
+        case LIT:
+          if (left === 0) { break inf_leave; }
+          output[put++] = state.length;
+          left--;
+          state.mode = LEN;
+          break;
+        case CHECK:
+          if (state.wrap) {
+            //=== NEEDBITS(32);
+            while (bits < 32) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              // Use '|' instead of '+' to make sure that result is signed
+              hold |= input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            _out -= left;
+            strm.total_out += _out;
+            state.total += _out;
+            if (_out) {
+              strm.adler = state.check =
+                  /*UPDATE(state.check, put - _out, _out);*/
+                  (state.flags ? crc32(state.check, output, _out, put - _out) : adler32(state.check, output, _out, put - _out));
+
+            }
+            _out = left;
+            // NB: crc32 stored as signed 32-bit int, zswap32 returns signed too
+            if ((state.flags ? hold : zswap32(hold)) !== state.check) {
+              strm.msg = 'incorrect data check';
+              state.mode = BAD;
+              break;
+            }
+            //=== INITBITS();
+            hold = 0;
+            bits = 0;
+            //===//
+            //Tracev((stderr, "inflate:   check matches trailer\n"));
+          }
+          state.mode = LENGTH;
+          /* falls through */
+        case LENGTH:
+          if (state.wrap && state.flags) {
+            //=== NEEDBITS(32);
+            while (bits < 32) {
+              if (have === 0) { break inf_leave; }
+              have--;
+              hold += input[next++] << bits;
+              bits += 8;
+            }
+            //===//
+            if (hold !== (state.total & 0xffffffff)) {
+              strm.msg = 'incorrect length check';
+              state.mode = BAD;
+              break;
+            }
+            //=== INITBITS();
+            hold = 0;
+            bits = 0;
+            //===//
+            //Tracev((stderr, "inflate:   length matches trailer\n"));
+          }
+          state.mode = DONE;
+          /* falls through */
+        case DONE:
+          ret = Z_STREAM_END;
+          break inf_leave;
+        case BAD:
+          ret = Z_DATA_ERROR;
+          break inf_leave;
+        case MEM:
+          return Z_MEM_ERROR;
+        case SYNC:
+          /* falls through */
+        default:
+          return Z_STREAM_ERROR;
+      }
+    }
+
+    // inf_leave <- here is real place for "goto inf_leave", emulated via "break inf_leave"
+
+    /*
+       Return from inflate(), updating the total counts and the check value.
+       If there was no progress during the inflate() call, return a buffer
+       error.  Call updatewindow() to create and/or update the window state.
+       Note: a memory error from inflate() is non-recoverable.
+     */
+
+    //--- RESTORE() ---
+    strm.next_out = put;
+    strm.avail_out = left;
+    strm.next_in = next;
+    strm.avail_in = have;
+    state.hold = hold;
+    state.bits = bits;
+    //---
+
+    if (state.wsize || (_out !== strm.avail_out && state.mode < BAD &&
+                        (state.mode < CHECK || flush !== Z_FINISH))) {
+      if (updatewindow(strm, strm.output, strm.next_out, _out - strm.avail_out)) {
+        state.mode = MEM;
+        return Z_MEM_ERROR;
+      }
+    }
+    _in -= strm.avail_in;
+    _out -= strm.avail_out;
+    strm.total_in += _in;
+    strm.total_out += _out;
+    state.total += _out;
+    if (state.wrap && _out) {
+      strm.adler = state.check = /*UPDATE(state.check, strm.next_out - _out, _out);*/
+        (state.flags ? crc32(state.check, output, _out, strm.next_out - _out) : adler32(state.check, output, _out, strm.next_out - _out));
+    }
+    strm.data_type = state.bits + (state.last ? 64 : 0) +
+                      (state.mode === TYPE ? 128 : 0) +
+                      (state.mode === LEN_ || state.mode === COPY_ ? 256 : 0);
+    if (((_in === 0 && _out === 0) || flush === Z_FINISH) && ret === Z_OK) {
+      ret = Z_BUF_ERROR;
+    }
+    return ret;
+  }
+
+  function inflateEnd(strm) {
+
+    if (!strm || !strm.state /*|| strm->zfree == (free_func)0*/) {
+      return Z_STREAM_ERROR;
+    }
+
+    var state = strm.state;
+    if (state.window) {
+      state.window = null;
+    }
+    strm.state = null;
+    return Z_OK;
+  }
+
+  function inflateGetHeader(strm, head) {
+    var state;
+
+    /* check state */
+    if (!strm || !strm.state) { return Z_STREAM_ERROR; }
+    state = strm.state;
+    if ((state.wrap & 2) === 0) { return Z_STREAM_ERROR; }
+
+    /* save header structure */
+    state.head = head;
+    head.done = false;
+    return Z_OK;
+  }
+
+  function inflateSetDictionary(strm, dictionary) {
+    var dictLength = dictionary.length;
+
+    var state;
+    var dictid;
+    var ret;
+
+    /* check state */
+    if (!strm /* == Z_NULL */ || !strm.state /* == Z_NULL */) { return Z_STREAM_ERROR; }
+    state = strm.state;
+
+    if (state.wrap !== 0 && state.mode !== DICT) {
+      return Z_STREAM_ERROR;
+    }
+
+    /* check for correct dictionary identifier */
+    if (state.mode === DICT) {
+      dictid = 1; /* adler32(0, null, 0)*/
+      /* dictid = adler32(dictid, dictionary, dictLength); */
+      dictid = adler32(dictid, dictionary, dictLength, 0);
+      if (dictid !== state.check) {
+        return Z_DATA_ERROR;
+      }
+    }
+    /* copy dictionary to window using updatewindow(), which will amend the
+     existing dictionary if appropriate */
+    ret = updatewindow(strm, dictionary, dictLength, dictLength);
+    if (ret) {
+      state.mode = MEM;
+      return Z_MEM_ERROR;
+    }
+    state.havedict = 1;
+    // Tracev((stderr, "inflate:   dictionary set\n"));
+    return Z_OK;
+  }
+
+  exports.inflateReset = inflateReset;
+  exports.inflateReset2 = inflateReset2;
+  exports.inflateResetKeep = inflateResetKeep;
+  exports.inflateInit = inflateInit;
+  exports.inflateInit2 = inflateInit2;
+  exports.inflate = inflate;
+  exports.inflateEnd = inflateEnd;
+  exports.inflateGetHeader = inflateGetHeader;
+  exports.inflateSetDictionary = inflateSetDictionary;
+  exports.inflateInfo = 'pako inflate (from Nodeca project)';
+
+  /* Not implemented
+  exports.inflateCopy = inflateCopy;
+  exports.inflateGetDictionary = inflateGetDictionary;
+  exports.inflateMark = inflateMark;
+  exports.inflatePrime = inflatePrime;
+  exports.inflateSync = inflateSync;
+  exports.inflateSyncPoint = inflateSyncPoint;
+  exports.inflateUndermine = inflateUndermine;
+  */
+
+  },{"../utils/common":1,"./adler32":3,"./crc32":5,"./inffast":7,"./inftrees":9}],9:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  var utils = require('../utils/common');
+
+  var MAXBITS = 15;
+  var ENOUGH_LENS = 852;
+  var ENOUGH_DISTS = 592;
+  //var ENOUGH = (ENOUGH_LENS+ENOUGH_DISTS);
+
+  var CODES = 0;
+  var LENS = 1;
+  var DISTS = 2;
+
+  var lbase = [ /* Length codes 257..285 base */
+    3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 15, 17, 19, 23, 27, 31,
+    35, 43, 51, 59, 67, 83, 99, 115, 131, 163, 195, 227, 258, 0, 0
+  ];
+
+  var lext = [ /* Length codes 257..285 extra */
+    16, 16, 16, 16, 16, 16, 16, 16, 17, 17, 17, 17, 18, 18, 18, 18,
+    19, 19, 19, 19, 20, 20, 20, 20, 21, 21, 21, 21, 16, 72, 78
+  ];
+
+  var dbase = [ /* Distance codes 0..29 base */
+    1, 2, 3, 4, 5, 7, 9, 13, 17, 25, 33, 49, 65, 97, 129, 193,
+    257, 385, 513, 769, 1025, 1537, 2049, 3073, 4097, 6145,
+    8193, 12289, 16385, 24577, 0, 0
+  ];
+
+  var dext = [ /* Distance codes 0..29 extra */
+    16, 16, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 22,
+    23, 23, 24, 24, 25, 25, 26, 26, 27, 27,
+    28, 28, 29, 29, 64, 64
+  ];
+
+  module.exports = function inflate_table(type, lens, lens_index, codes, table, table_index, work, opts)
+  {
+    var bits = opts.bits;
+        //here = opts.here; /* table entry for duplication */
+
+    var len = 0;               /* a code's length in bits */
+    var sym = 0;               /* index of code symbols */
+    var min = 0, max = 0;          /* minimum and maximum code lengths */
+    var root = 0;              /* number of index bits for root table */
+    var curr = 0;              /* number of index bits for current table */
+    var drop = 0;              /* code bits to drop for sub-table */
+    var left = 0;                   /* number of prefix codes available */
+    var used = 0;              /* code entries in table used */
+    var huff = 0;              /* Huffman code */
+    var incr;              /* for incrementing code, index */
+    var fill;              /* index for replicating entries */
+    var low;               /* low bits for current root entry */
+    var mask;              /* mask for low root bits */
+    var next;             /* next available space in table */
+    var base = null;     /* base value table to use */
+    var base_index = 0;
+  //  var shoextra;    /* extra bits table to use */
+    var end;                    /* use base and extra for symbol > end */
+    var count = new utils.Buf16(MAXBITS + 1); //[MAXBITS+1];    /* number of codes of each length */
+    var offs = new utils.Buf16(MAXBITS + 1); //[MAXBITS+1];     /* offsets in table for each length */
+    var extra = null;
+    var extra_index = 0;
+
+    var here_bits, here_op, here_val;
+
+    /*
+     Process a set of code lengths to create a canonical Huffman code.  The
+     code lengths are lens[0..codes-1].  Each length corresponds to the
+     symbols 0..codes-1.  The Huffman code is generated by first sorting the
+     symbols by length from short to long, and retaining the symbol order
+     for codes with equal lengths.  Then the code starts with all zero bits
+     for the first code of the shortest length, and the codes are integer
+     increments for the same length, and zeros are appended as the length
+     increases.  For the deflate format, these bits are stored backwards
+     from their more natural integer increment ordering, and so when the
+     decoding tables are built in the large loop below, the integer codes
+     are incremented backwards.
+
+     This routine assumes, but does not check, that all of the entries in
+     lens[] are in the range 0..MAXBITS.  The caller must assure this.
+     1..MAXBITS is interpreted as that code length.  zero means that that
+     symbol does not occur in this code.
+
+     The codes are sorted by computing a count of codes for each length,
+     creating from that a table of starting indices for each length in the
+     sorted table, and then entering the symbols in order in the sorted
+     table.  The sorted table is work[], with that space being provided by
+     the caller.
+
+     The length counts are used for other purposes as well, i.e. finding
+     the minimum and maximum length codes, determining if there are any
+     codes at all, checking for a valid set of lengths, and looking ahead
+     at length counts to determine sub-table sizes when building the
+     decoding tables.
+     */
+
+    /* accumulate lengths for codes (assumes lens[] all in 0..MAXBITS) */
+    for (len = 0; len <= MAXBITS; len++) {
+      count[len] = 0;
+    }
+    for (sym = 0; sym < codes; sym++) {
+      count[lens[lens_index + sym]]++;
+    }
+
+    /* bound code lengths, force root to be within code lengths */
+    root = bits;
+    for (max = MAXBITS; max >= 1; max--) {
+      if (count[max] !== 0) { break; }
+    }
+    if (root > max) {
+      root = max;
+    }
+    if (max === 0) {                     /* no symbols to code at all */
+      //table.op[opts.table_index] = 64;  //here.op = (var char)64;    /* invalid code marker */
+      //table.bits[opts.table_index] = 1;   //here.bits = (var char)1;
+      //table.val[opts.table_index++] = 0;   //here.val = (var short)0;
+      table[table_index++] = (1 << 24) | (64 << 16) | 0;
+
+
+      //table.op[opts.table_index] = 64;
+      //table.bits[opts.table_index] = 1;
+      //table.val[opts.table_index++] = 0;
+      table[table_index++] = (1 << 24) | (64 << 16) | 0;
+
+      opts.bits = 1;
+      return 0;     /* no symbols, but wait for decoding to report error */
+    }
+    for (min = 1; min < max; min++) {
+      if (count[min] !== 0) { break; }
+    }
+    if (root < min) {
+      root = min;
+    }
+
+    /* check for an over-subscribed or incomplete set of lengths */
+    left = 1;
+    for (len = 1; len <= MAXBITS; len++) {
+      left <<= 1;
+      left -= count[len];
+      if (left < 0) {
+        return -1;
+      }        /* over-subscribed */
+    }
+    if (left > 0 && (type === CODES || max !== 1)) {
+      return -1;                      /* incomplete set */
+    }
+
+    /* generate offsets into symbol table for each length for sorting */
+    offs[1] = 0;
+    for (len = 1; len < MAXBITS; len++) {
+      offs[len + 1] = offs[len] + count[len];
+    }
+
+    /* sort symbols by length, by symbol order within each length */
+    for (sym = 0; sym < codes; sym++) {
+      if (lens[lens_index + sym] !== 0) {
+        work[offs[lens[lens_index + sym]]++] = sym;
+      }
+    }
+
+    /*
+     Create and fill in decoding tables.  In this loop, the table being
+     filled is at next and has curr index bits.  The code being used is huff
+     with length len.  That code is converted to an index by dropping drop
+     bits off of the bottom.  For codes where len is less than drop + curr,
+     those top drop + curr - len bits are incremented through all values to
+     fill the table with replicated entries.
+
+     root is the number of index bits for the root table.  When len exceeds
+     root, sub-tables are created pointed to by the root entry with an index
+     of the low root bits of huff.  This is saved in low to check for when a
+     new sub-table should be started.  drop is zero when the root table is
+     being filled, and drop is root when sub-tables are being filled.
+
+     When a new sub-table is needed, it is necessary to look ahead in the
+     code lengths to determine what size sub-table is needed.  The length
+     counts are used for this, and so count[] is decremented as codes are
+     entered in the tables.
+
+     used keeps track of how many table entries have been allocated from the
+     provided *table space.  It is checked for LENS and DIST tables against
+     the constants ENOUGH_LENS and ENOUGH_DISTS to guard against changes in
+     the initial root table size constants.  See the comments in inftrees.h
+     for more information.
+
+     sym increments through all symbols, and the loop terminates when
+     all codes of length max, i.e. all codes, have been processed.  This
+     routine permits incomplete codes, so another loop after this one fills
+     in the rest of the decoding tables with invalid code markers.
+     */
+
+    /* set up for code type */
+    // poor man optimization - use if-else instead of switch,
+    // to avoid deopts in old v8
+    if (type === CODES) {
+      base = extra = work;    /* dummy value--not used */
+      end = 19;
+
+    } else if (type === LENS) {
+      base = lbase;
+      base_index -= 257;
+      extra = lext;
+      extra_index -= 257;
+      end = 256;
+
+    } else {                    /* DISTS */
+      base = dbase;
+      extra = dext;
+      end = -1;
+    }
+
+    /* initialize opts for loop */
+    huff = 0;                   /* starting code */
+    sym = 0;                    /* starting code symbol */
+    len = min;                  /* starting code length */
+    next = table_index;              /* current table to fill in */
+    curr = root;                /* current table index bits */
+    drop = 0;                   /* current bits to drop from code for index */
+    low = -1;                   /* trigger new sub-table when len > root */
+    used = 1 << root;          /* use root table entries */
+    mask = used - 1;            /* mask for comparing low */
+
+    /* check available table space */
+    if ((type === LENS && used > ENOUGH_LENS) ||
+      (type === DISTS && used > ENOUGH_DISTS)) {
+      return 1;
+    }
+
+    /* process all codes and make table entries */
+    for (;;) {
+      /* create table entry */
+      here_bits = len - drop;
+      if (work[sym] < end) {
+        here_op = 0;
+        here_val = work[sym];
+      }
+      else if (work[sym] > end) {
+        here_op = extra[extra_index + work[sym]];
+        here_val = base[base_index + work[sym]];
+      }
+      else {
+        here_op = 32 + 64;         /* end of block */
+        here_val = 0;
+      }
+
+      /* replicate for those indices with low len bits equal to huff */
+      incr = 1 << (len - drop);
+      fill = 1 << curr;
+      min = fill;                 /* save offset to next table */
+      do {
+        fill -= incr;
+        table[next + (huff >> drop) + fill] = (here_bits << 24) | (here_op << 16) | here_val |0;
+      } while (fill !== 0);
+
+      /* backwards increment the len-bit code huff */
+      incr = 1 << (len - 1);
+      while (huff & incr) {
+        incr >>= 1;
+      }
+      if (incr !== 0) {
+        huff &= incr - 1;
+        huff += incr;
+      } else {
+        huff = 0;
+      }
+
+      /* go to next symbol, update count, len */
+      sym++;
+      if (--count[len] === 0) {
+        if (len === max) { break; }
+        len = lens[lens_index + work[sym]];
+      }
+
+      /* create new sub-table if needed */
+      if (len > root && (huff & mask) !== low) {
+        /* if first time, transition to sub-tables */
+        if (drop === 0) {
+          drop = root;
+        }
+
+        /* increment past last table */
+        next += min;            /* here min is 1 << curr */
+
+        /* determine length of next table */
+        curr = len - drop;
+        left = 1 << curr;
+        while (curr + drop < max) {
+          left -= count[curr + drop];
+          if (left <= 0) { break; }
+          curr++;
+          left <<= 1;
+        }
+
+        /* check for enough space */
+        used += 1 << curr;
+        if ((type === LENS && used > ENOUGH_LENS) ||
+          (type === DISTS && used > ENOUGH_DISTS)) {
+          return 1;
+        }
+
+        /* point entry in root table to sub-table */
+        low = huff & mask;
+        /*table.op[low] = curr;
+        table.bits[low] = root;
+        table.val[low] = next - opts.table_index;*/
+        table[low] = (root << 24) | (curr << 16) | (next - table_index) |0;
+      }
+    }
+
+    /* fill in remaining table entry if code is incomplete (guaranteed to have
+     at most one remaining entry, since if the code is incomplete, the
+     maximum code length that was allowed to get this far is one bit) */
+    if (huff !== 0) {
+      //table.op[next + huff] = 64;            /* invalid code marker */
+      //table.bits[next + huff] = len - drop;
+      //table.val[next + huff] = 0;
+      table[next + huff] = ((len - drop) << 24) | (64 << 16) |0;
+    }
+
+    /* set return parameters */
+    //opts.table_index += used;
+    opts.bits = root;
+    return 0;
+  };
+
+  },{"../utils/common":1}],10:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  module.exports = {
+    2:      'need dictionary',     /* Z_NEED_DICT       2  */
+    1:      'stream end',          /* Z_STREAM_END      1  */
+    0:      '',                    /* Z_OK              0  */
+    '-1':   'file error',          /* Z_ERRNO         (-1) */
+    '-2':   'stream error',        /* Z_STREAM_ERROR  (-2) */
+    '-3':   'data error',          /* Z_DATA_ERROR    (-3) */
+    '-4':   'insufficient memory', /* Z_MEM_ERROR     (-4) */
+    '-5':   'buffer error',        /* Z_BUF_ERROR     (-5) */
+    '-6':   'incompatible version' /* Z_VERSION_ERROR (-6) */
+  };
+
+  },{}],11:[function(require,module,exports){
+  'use strict';
+
+  // (C) 1995-2013 Jean-loup Gailly and Mark Adler
+  // (C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
+  //
+  // This software is provided 'as-is', without any express or implied
+  // warranty. In no event will the authors be held liable for any damages
+  // arising from the use of this software.
+  //
+  // Permission is granted to anyone to use this software for any purpose,
+  // including commercial applications, and to alter it and redistribute it
+  // freely, subject to the following restrictions:
+  //
+  // 1. The origin of this software must not be misrepresented; you must not
+  //   claim that you wrote the original software. If you use this software
+  //   in a product, an acknowledgment in the product documentation would be
+  //   appreciated but is not required.
+  // 2. Altered source versions must be plainly marked as such, and must not be
+  //   misrepresented as being the original software.
+  // 3. This notice may not be removed or altered from any source distribution.
+
+  function ZStream() {
+    /* next input byte */
+    this.input = null; // JS specific, because we have no pointers
+    this.next_in = 0;
+    /* number of bytes available at input */
+    this.avail_in = 0;
+    /* total number of input bytes read so far */
+    this.total_in = 0;
+    /* next output byte should be put there */
+    this.output = null; // JS specific, because we have no pointers
+    this.next_out = 0;
+    /* remaining free space at output */
+    this.avail_out = 0;
+    /* total number of bytes output so far */
+    this.total_out = 0;
+    /* last error message, NULL if no error */
+    this.msg = ''/*Z_NULL*/;
+    /* not visible by applications */
+    this.state = null;
+    /* best guess about the data type: binary or text */
+    this.data_type = 2/*Z_UNKNOWN*/;
+    /* adler32 value of the uncompressed data */
+    this.adler = 0;
+  }
+
+  module.exports = ZStream;
+
+  },{}],"/lib/inflate.js":[function(require,module,exports){
+  'use strict';
+
+
+  var zlib_inflate = require('./zlib/inflate');
+  var utils        = require('./utils/common');
+  var strings      = require('./utils/strings');
+  var c            = require('./zlib/constants');
+  var msg          = require('./zlib/messages');
+  var ZStream      = require('./zlib/zstream');
+  var GZheader     = require('./zlib/gzheader');
+
+  var toString = Object.prototype.toString;
+
+  /**
+   * class Inflate
+   *
+   * Generic JS-style wrapper for zlib calls. If you don't need
+   * streaming behaviour - use more simple functions: [[inflate]]
+   * and [[inflateRaw]].
+   **/
+
+  /* internal
+   * inflate.chunks -> Array
+   *
+   * Chunks of output data, if [[Inflate#onData]] not overridden.
+   **/
+
+  /**
+   * Inflate.result -> Uint8Array|Array|String
+   *
+   * Uncompressed result, generated by default [[Inflate#onData]]
+   * and [[Inflate#onEnd]] handlers. Filled after you push last chunk
+   * (call [[Inflate#push]] with `Z_FINISH` / `true` param) or if you
+   * push a chunk with explicit flush (call [[Inflate#push]] with
+   * `Z_SYNC_FLUSH` param).
+   **/
+
+  /**
+   * Inflate.err -> Number
+   *
+   * Error code after inflate finished. 0 (Z_OK) on success.
+   * Should be checked if broken data possible.
+   **/
+
+  /**
+   * Inflate.msg -> String
+   *
+   * Error message, if [[Inflate.err]] != 0
+   **/
+
+
+  /**
+   * new Inflate(options)
+   * - options (Object): zlib inflate options.
+   *
+   * Creates new inflator instance with specified params. Throws exception
+   * on bad params. Supported options:
+   *
+   * - `windowBits`
+   * - `dictionary`
+   *
+   * [http://zlib.net/manual.html#Advanced](http://zlib.net/manual.html#Advanced)
+   * for more information on these.
+   *
+   * Additional options, for internal needs:
+   *
+   * - `chunkSize` - size of generated data chunks (16K by default)
+   * - `raw` (Boolean) - do raw inflate
+   * - `to` (String) - if equal to 'string', then result will be converted
+   *   from utf8 to utf16 (javascript) string. When string output requested,
+   *   chunk length can differ from `chunkSize`, depending on content.
+   *
+   * By default, when no options set, autodetect deflate/gzip data format via
+   * wrapper header.
+   *
+   * ##### Example:
+   *
+   * ```javascript
+   * var pako = require('pako')
+   *   , chunk1 = Uint8Array([1,2,3,4,5,6,7,8,9])
+   *   , chunk2 = Uint8Array([10,11,12,13,14,15,16,17,18,19]);
+   *
+   * var inflate = new pako.Inflate({ level: 3});
+   *
+   * inflate.push(chunk1, false);
+   * inflate.push(chunk2, true);  // true -> last chunk
+   *
+   * if (inflate.err) { throw new Error(inflate.err); }
+   *
+   * console.log(inflate.result);
+   * ```
+   **/
+  function Inflate(options) {
+    if (!(this instanceof Inflate)) return new Inflate(options);
+
+    this.options = utils.assign({
+      chunkSize: 16384,
+      windowBits: 0,
+      to: ''
+    }, options || {});
+
+    var opt = this.options;
+
+    // Force window size for `raw` data, if not set directly,
+    // because we have no header for autodetect.
+    if (opt.raw && (opt.windowBits >= 0) && (opt.windowBits < 16)) {
+      opt.windowBits = -opt.windowBits;
+      if (opt.windowBits === 0) { opt.windowBits = -15; }
+    }
+
+    // If `windowBits` not defined (and mode not raw) - set autodetect flag for gzip/deflate
+    if ((opt.windowBits >= 0) && (opt.windowBits < 16) &&
+        !(options && options.windowBits)) {
+      opt.windowBits += 32;
+    }
+
+    // Gzip header has no info about windows size, we can do autodetect only
+    // for deflate. So, if window size not set, force it to max when gzip possible
+    if ((opt.windowBits > 15) && (opt.windowBits < 48)) {
+      // bit 3 (16) -> gzipped data
+      // bit 4 (32) -> autodetect gzip/deflate
+      if ((opt.windowBits & 15) === 0) {
+        opt.windowBits |= 15;
+      }
+    }
+
+    this.err    = 0;      // error code, if happens (0 = Z_OK)
+    this.msg    = '';     // error message
+    this.ended  = false;  // used to avoid multiple onEnd() calls
+    this.chunks = [];     // chunks of compressed data
+
+    this.strm   = new ZStream();
+    this.strm.avail_out = 0;
+
+    var status  = zlib_inflate.inflateInit2(
+      this.strm,
+      opt.windowBits
+    );
+
+    if (status !== c.Z_OK) {
+      throw new Error(msg[status]);
+    }
+
+    this.header = new GZheader();
+
+    zlib_inflate.inflateGetHeader(this.strm, this.header);
+
+    // Setup dictionary
+    if (opt.dictionary) {
+      // Convert data if needed
+      if (typeof opt.dictionary === 'string') {
+        opt.dictionary = strings.string2buf(opt.dictionary);
+      } else if (toString.call(opt.dictionary) === '[object ArrayBuffer]') {
+        opt.dictionary = new Uint8Array(opt.dictionary);
+      }
+      if (opt.raw) { //In raw mode we need to set the dictionary early
+        status = zlib_inflate.inflateSetDictionary(this.strm, opt.dictionary);
+        if (status !== c.Z_OK) {
+          throw new Error(msg[status]);
+        }
+      }
+    }
+  }
+
+  /**
+   * Inflate#push(data[, mode]) -> Boolean
+   * - data (Uint8Array|Array|ArrayBuffer|String): input data
+   * - mode (Number|Boolean): 0..6 for corresponding Z_NO_FLUSH..Z_TREE modes.
+   *   See constants. Skipped or `false` means Z_NO_FLUSH, `true` means Z_FINISH.
+   *
+   * Sends input data to inflate pipe, generating [[Inflate#onData]] calls with
+   * new output chunks. Returns `true` on success. The last data block must have
+   * mode Z_FINISH (or `true`). That will flush internal pending buffers and call
+   * [[Inflate#onEnd]]. For interim explicit flushes (without ending the stream) you
+   * can use mode Z_SYNC_FLUSH, keeping the decompression context.
+   *
+   * On fail call [[Inflate#onEnd]] with error code and return false.
+   *
+   * We strongly recommend to use `Uint8Array` on input for best speed (output
+   * format is detected automatically). Also, don't skip last param and always
+   * use the same type in your code (boolean or number). That will improve JS speed.
+   *
+   * For regular `Array`-s make sure all elements are [0..255].
+   *
+   * ##### Example
+   *
+   * ```javascript
+   * push(chunk, false); // push one of data chunks
+   * ...
+   * push(chunk, true);  // push last chunk
+   * ```
+   **/
+  Inflate.prototype.push = function (data, mode) {
+    var strm = this.strm;
+    var chunkSize = this.options.chunkSize;
+    var dictionary = this.options.dictionary;
+    var status, _mode;
+    var next_out_utf8, tail, utf8str;
+
+    // Flag to properly process Z_BUF_ERROR on testing inflate call
+    // when we check that all output data was flushed.
+    var allowBufError = false;
+
+    if (this.ended) { return false; }
+    _mode = (mode === ~~mode) ? mode : ((mode === true) ? c.Z_FINISH : c.Z_NO_FLUSH);
+
+    // Convert data if needed
+    if (typeof data === 'string') {
+      // Only binary strings can be decompressed on practice
+      strm.input = strings.binstring2buf(data);
+    } else if (toString.call(data) === '[object ArrayBuffer]') {
+      strm.input = new Uint8Array(data);
+    } else {
+      strm.input = data;
+    }
+
+    strm.next_in = 0;
+    strm.avail_in = strm.input.length;
+
+    do {
+      if (strm.avail_out === 0) {
+        strm.output = new utils.Buf8(chunkSize);
+        strm.next_out = 0;
+        strm.avail_out = chunkSize;
+      }
+
+      status = zlib_inflate.inflate(strm, c.Z_NO_FLUSH);    /* no bad return value */
+
+      if (status === c.Z_NEED_DICT && dictionary) {
+        status = zlib_inflate.inflateSetDictionary(this.strm, dictionary);
+      }
+
+      if (status === c.Z_BUF_ERROR && allowBufError === true) {
+        status = c.Z_OK;
+        allowBufError = false;
+      }
+
+      if (status !== c.Z_STREAM_END && status !== c.Z_OK) {
+        this.onEnd(status);
+        this.ended = true;
+        return false;
+      }
+
+      if (strm.next_out) {
+        if (strm.avail_out === 0 || status === c.Z_STREAM_END || (strm.avail_in === 0 && (_mode === c.Z_FINISH || _mode === c.Z_SYNC_FLUSH))) {
+
+          if (this.options.to === 'string') {
+
+            next_out_utf8 = strings.utf8border(strm.output, strm.next_out);
+
+            tail = strm.next_out - next_out_utf8;
+            utf8str = strings.buf2string(strm.output, next_out_utf8);
+
+            // move tail
+            strm.next_out = tail;
+            strm.avail_out = chunkSize - tail;
+            if (tail) { utils.arraySet(strm.output, strm.output, next_out_utf8, tail, 0); }
+
+            this.onData(utf8str);
+
+          } else {
+            this.onData(utils.shrinkBuf(strm.output, strm.next_out));
+          }
+        }
+      }
+
+      // When no more input data, we should check that internal inflate buffers
+      // are flushed. The only way to do it when avail_out = 0 - run one more
+      // inflate pass. But if output data not exists, inflate return Z_BUF_ERROR.
+      // Here we set flag to process this error properly.
+      //
+      // NOTE. Deflate does not return error in this case and does not needs such
+      // logic.
+      if (strm.avail_in === 0 && strm.avail_out === 0) {
+        allowBufError = true;
+      }
+
+    } while ((strm.avail_in > 0 || strm.avail_out === 0) && status !== c.Z_STREAM_END);
+
+    if (status === c.Z_STREAM_END) {
+      _mode = c.Z_FINISH;
+    }
+
+    // Finalize on the last chunk.
+    if (_mode === c.Z_FINISH) {
+      status = zlib_inflate.inflateEnd(this.strm);
+      this.onEnd(status);
+      this.ended = true;
+      return status === c.Z_OK;
+    }
+
+    // callback interim results if Z_SYNC_FLUSH.
+    if (_mode === c.Z_SYNC_FLUSH) {
+      this.onEnd(c.Z_OK);
+      strm.avail_out = 0;
+      return true;
+    }
+
+    return true;
+  };
+
+
+  /**
+   * Inflate#onData(chunk) -> Void
+   * - chunk (Uint8Array|Array|String): output data. Type of array depends
+   *   on js engine support. When string output requested, each chunk
+   *   will be string.
+   *
+   * By default, stores data blocks in `chunks[]` property and glue
+   * those in `onEnd`. Override this handler, if you need another behaviour.
+   **/
+  Inflate.prototype.onData = function (chunk) {
+    this.chunks.push(chunk);
+  };
+
+
+  /**
+   * Inflate#onEnd(status) -> Void
+   * - status (Number): inflate status. 0 (Z_OK) on success,
+   *   other if not.
+   *
+   * Called either after you tell inflate that the input stream is
+   * complete (Z_FINISH) or should be flushed (Z_SYNC_FLUSH)
+   * or if an error happened. By default - join collected chunks,
+   * free memory and fill `results` / `err` properties.
+   **/
+  Inflate.prototype.onEnd = function (status) {
+    // On success - join
+    if (status === c.Z_OK) {
+      if (this.options.to === 'string') {
+        // Glue & convert here, until we teach pako to send
+        // utf8 aligned strings to onData
+        this.result = this.chunks.join('');
+      } else {
+        this.result = utils.flattenChunks(this.chunks);
+      }
+    }
+    this.chunks = [];
+    this.err = status;
+    this.msg = this.strm.msg;
+  };
+
+
+  /**
+   * inflate(data[, options]) -> Uint8Array|Array|String
+   * - data (Uint8Array|Array|String): input data to decompress.
+   * - options (Object): zlib inflate options.
+   *
+   * Decompress `data` with inflate/ungzip and `options`. Autodetect
+   * format via wrapper header by default. That's why we don't provide
+   * separate `ungzip` method.
+   *
+   * Supported options are:
+   *
+   * - windowBits
+   *
+   * [http://zlib.net/manual.html#Advanced](http://zlib.net/manual.html#Advanced)
+   * for more information.
+   *
+   * Sugar (options):
+   *
+   * - `raw` (Boolean) - say that we work with raw stream, if you don't wish to specify
+   *   negative windowBits implicitly.
+   * - `to` (String) - if equal to 'string', then result will be converted
+   *   from utf8 to utf16 (javascript) string. When string output requested,
+   *   chunk length can differ from `chunkSize`, depending on content.
+   *
+   *
+   * ##### Example:
+   *
+   * ```javascript
+   * var pako = require('pako')
+   *   , input = pako.deflate([1,2,3,4,5,6,7,8,9])
+   *   , output;
+   *
+   * try {
+   *   output = pako.inflate(input);
+   * } catch (err)
+   *   console.log(err);
+   * }
+   * ```
+   **/
+  function inflate(input, options) {
+    var inflator = new Inflate(options);
+
+    inflator.push(input, true);
+
+    // That will never happens, if you don't cheat with options :)
+    if (inflator.err) { throw inflator.msg || msg[inflator.err]; }
+
+    return inflator.result;
+  }
+
+
+  /**
+   * inflateRaw(data[, options]) -> Uint8Array|Array|String
+   * - data (Uint8Array|Array|String): input data to decompress.
+   * - options (Object): zlib inflate options.
+   *
+   * The same as [[inflate]], but creates raw data, without wrapper
+   * (header and adler32 crc).
+   **/
+  function inflateRaw(input, options) {
+    options = options || {};
+    options.raw = true;
+    return inflate(input, options);
+  }
+
+
+  /**
+   * ungzip(data[, options]) -> Uint8Array|Array|String
+   * - data (Uint8Array|Array|String): input data to decompress.
+   * - options (Object): zlib inflate options.
+   *
+   * Just shortcut to [[inflate]], because it autodetects format
+   * by header.content. Done for convenience.
+   **/
+
+
+  exports.Inflate = Inflate;
+  exports.inflate = inflate;
+  exports.inflateRaw = inflateRaw;
+  exports.ungzip  = inflate;
+
+  },{"./utils/common":1,"./utils/strings":2,"./zlib/constants":4,"./zlib/gzheader":6,"./zlib/inflate":8,"./zlib/messages":10,"./zlib/zstream":11}]},{},[])("/lib/inflate.js")
+  });
+/* eslint-enable */
diff --git a/packages/edit-site/lib/lib-font.browser.js b/packages/edit-site/lib/lib-font.browser.js
new file mode 100644
index 00000000000000..a39901c377e42b
--- /dev/null
+++ b/packages/edit-site/lib/lib-font.browser.js
@@ -0,0 +1,3861 @@
+/**
+ * Credits:
+ *
+ * lib-font
+ * https://github.com/Pomax/lib-font
+ * https://github.com/Pomax/lib-font/blob/master/lib-font.browser.js
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 pomax@nihongoresources.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/* eslint eslint-comments/no-unlimited-disable: 0 */
+/* eslint-disable */
+// import pako from 'pako';
+import unbrotli from "./unbrotli";
+import GzipDecode from "./inflate";
+
+let fetchFunction = globalThis.fetch;
+// if ( ! fetchFunction ) {
+// 	let backlog = [];
+// 	fetchFunction = globalThis.fetch = ( ...args ) =>
+// 		new Promise( ( resolve, reject ) => {
+// 			backlog.push( { args: args, resolve: resolve, reject: reject } );
+// 		} );
+// 	import( 'fs' )
+// 		.then( ( fs ) => {
+// 			fetchFunction = globalThis.fetch = async function ( path ) {
+// 				return new Promise( ( resolve, reject ) => {
+// 					fs.readFile( path, ( err, data ) => {
+// 						if ( err ) return reject( err );
+// 						resolve( { ok: true, arrayBuffer: () => data.buffer } );
+// 					} );
+// 				} );
+// 			};
+// 			while ( backlog.length ) {
+// 				let instruction = backlog.shift();
+// 				fetchFunction( ...instruction.args )
+// 					.then( ( data ) => instruction.resolve( data ) )
+// 					.catch( ( err ) => instruction.reject( err ) );
+// 			}
+// 		} )
+// 		.catch( ( err ) => {
+// 			console.error( err );
+// 			throw new Error(
+// 				`lib-font cannot run unless either the Fetch API or Node's filesystem module is available.`
+// 			);
+// 		} );
+// }
+class Event {
+	constructor( type, detail = {}, msg ) {
+		this.type = type;
+		this.detail = detail;
+		this.msg = msg;
+		Object.defineProperty( this, `__mayPropagate`, {
+			enumerable: false,
+			writable: true,
+		} );
+		this.__mayPropagate = true;
+	}
+	preventDefault() {}
+	stopPropagation() {
+		this.__mayPropagate = false;
+	}
+	valueOf() {
+		return this;
+	}
+	toString() {
+		return this.msg
+			? `[${ this.type } event]: ${ this.msg }`
+			: `[${ this.type } event]`;
+	}
+}
+class EventManager {
+	constructor() {
+		this.listeners = {};
+	}
+	addEventListener( type, listener, useCapture ) {
+		let bin = this.listeners[ type ] || [];
+		if ( useCapture ) bin.unshift( listener );
+		else bin.push( listener );
+		this.listeners[ type ] = bin;
+	}
+	removeEventListener( type, listener ) {
+		let bin = this.listeners[ type ] || [];
+		let pos = bin.findIndex( ( e ) => e === listener );
+		if ( pos > -1 ) {
+			bin.splice( pos, 1 );
+			this.listeners[ type ] = bin;
+		}
+	}
+	dispatch( event ) {
+		let bin = this.listeners[ event.type ];
+		if ( bin ) {
+			for ( let l = 0, e = bin.length; l < e; l++ ) {
+				if ( ! event.__mayPropagate ) break;
+				bin[ l ]( event );
+			}
+		}
+	}
+}
+const startDate = new Date( `1904-01-01T00:00:00+0000` ).getTime();
+function asText( data ) {
+	return Array.from( data )
+		.map( ( v ) => String.fromCharCode( v ) )
+		.join( `` );
+}
+class Parser {
+	constructor( dict, dataview, name ) {
+		this.name = ( name || dict.tag || `` ).trim();
+		this.length = dict.length;
+		this.start = dict.offset;
+		this.offset = 0;
+		this.data = dataview;
+		[
+			`getInt8`,
+			`getUint8`,
+			`getInt16`,
+			`getUint16`,
+			`getInt32`,
+			`getUint32`,
+			`getBigInt64`,
+			`getBigUint64`,
+		].forEach( ( name ) => {
+			let fn = name.replace( /get(Big)?/, '' ).toLowerCase();
+			let increment = parseInt( name.replace( /[^\d]/g, '' ) ) / 8;
+			Object.defineProperty( this, fn, {
+				get: () => this.getValue( name, increment ),
+			} );
+		} );
+	}
+	get currentPosition() {
+		return this.start + this.offset;
+	}
+	set currentPosition( position ) {
+		this.start = position;
+		this.offset = 0;
+	}
+	skip( n = 0, bits = 8 ) {
+		this.offset += ( n * bits ) / 8;
+	}
+	getValue( type, increment ) {
+		let pos = this.start + this.offset;
+		this.offset += increment;
+		try {
+			return this.data[ type ]( pos );
+		} catch ( e ) {
+			console.error( `parser`, type, increment, this );
+			console.error( `parser`, this.start, this.offset );
+			throw e;
+		}
+	}
+	flags( n ) {
+		if ( n === 8 || n === 16 || n === 32 || n === 64 ) {
+			return this[ `uint${ n }` ]
+				.toString( 2 )
+				.padStart( n, 0 )
+				.split( `` )
+				.map( ( v ) => v === '1' );
+		}
+		console.error(
+			`Error parsing flags: flag types can only be 1, 2, 4, or 8 bytes long`
+		);
+		console.trace();
+	}
+	get tag() {
+		const t = this.uint32;
+		return asText( [
+			( t >> 24 ) & 255,
+			( t >> 16 ) & 255,
+			( t >> 8 ) & 255,
+			t & 255,
+		] );
+	}
+	get fixed() {
+		let major = this.int16;
+		let minor = Math.round( ( 1e3 * this.uint16 ) / 65356 );
+		return major + minor / 1e3;
+	}
+	get legacyFixed() {
+		let major = this.uint16;
+		let minor = this.uint16.toString( 16 ).padStart( 4, 0 );
+		return parseFloat( `${ major }.${ minor }` );
+	}
+	get uint24() {
+		return ( this.uint8 << 16 ) + ( this.uint8 << 8 ) + this.uint8;
+	}
+	get uint128() {
+		let value = 0;
+		for ( let i = 0; i < 5; i++ ) {
+			let byte = this.uint8;
+			value = value * 128 + ( byte & 127 );
+			if ( byte < 128 ) break;
+		}
+		return value;
+	}
+	get longdatetime() {
+		return new Date( startDate + 1e3 * parseInt( this.int64.toString() ) );
+	}
+	get fword() {
+		return this.int16;
+	}
+	get ufword() {
+		return this.uint16;
+	}
+	get Offset16() {
+		return this.uint16;
+	}
+	get Offset32() {
+		return this.uint32;
+	}
+	get F2DOT14() {
+		const bits = p.uint16;
+		const integer = [ 0, 1, -2, -1 ][ bits >> 14 ];
+		const fraction = bits & 16383;
+		return integer + fraction / 16384;
+	}
+	verifyLength() {
+		if ( this.offset != this.length ) {
+			console.error(
+				`unexpected parsed table size (${ this.offset }) for "${ this.name }" (expected ${ this.length })`
+			);
+		}
+	}
+	readBytes( n = 0, position = 0, bits = 8, signed = false ) {
+		n = n || this.length;
+		if ( n === 0 ) return [];
+		if ( position ) this.currentPosition = position;
+		const fn = `${ signed ? `` : `u` }int${ bits }`,
+			slice = [];
+		while ( n-- ) slice.push( this[ fn ] );
+		return slice;
+	}
+}
+class ParsedData {
+	constructor( parser ) {
+		const pGetter = { enumerable: false, get: () => parser };
+		Object.defineProperty( this, `parser`, pGetter );
+		const start = parser.currentPosition;
+		const startGetter = { enumerable: false, get: () => start };
+		Object.defineProperty( this, `start`, startGetter );
+	}
+	load( struct ) {
+		Object.keys( struct ).forEach( ( p ) => {
+			let props = Object.getOwnPropertyDescriptor( struct, p );
+			if ( props.get ) {
+				this[ p ] = props.get.bind( this );
+			} else if ( props.value !== undefined ) {
+				this[ p ] = props.value;
+			}
+		} );
+		if ( this.parser.length ) {
+			this.parser.verifyLength();
+		}
+	}
+}
+class SimpleTable extends ParsedData {
+	constructor( dict, dataview, name ) {
+		const { parser: parser, start: start } = super(
+			new Parser( dict, dataview, name )
+		);
+		const pGetter = { enumerable: false, get: () => parser };
+		Object.defineProperty( this, `p`, pGetter );
+		const startGetter = { enumerable: false, get: () => start };
+		Object.defineProperty( this, `tableStart`, startGetter );
+	}
+}
+function lazy$1( object, property, getter ) {
+	let val;
+	Object.defineProperty( object, property, {
+		get: () => {
+			if ( val ) return val;
+			val = getter();
+			return val;
+		},
+		enumerable: true,
+	} );
+}
+class SFNT extends SimpleTable {
+	constructor( font, dataview, createTable ) {
+		const { p: p } = super( { offset: 0, length: 12 }, dataview, `sfnt` );
+		this.version = p.uint32;
+		this.numTables = p.uint16;
+		this.searchRange = p.uint16;
+		this.entrySelector = p.uint16;
+		this.rangeShift = p.uint16;
+		p.verifyLength();
+		this.directory = [ ...new Array( this.numTables ) ].map(
+			( _ ) => new TableRecord( p )
+		);
+		this.tables = {};
+		this.directory.forEach( ( entry ) => {
+			const getter = () =>
+				createTable(
+					this.tables,
+					{
+						tag: entry.tag,
+						offset: entry.offset,
+						length: entry.length,
+					},
+					dataview
+				);
+			lazy$1( this.tables, entry.tag.trim(), getter );
+		} );
+	}
+}
+class TableRecord {
+	constructor( p ) {
+		this.tag = p.tag;
+		this.checksum = p.uint32;
+		this.offset = p.uint32;
+		this.length = p.uint32;
+	}
+}
+const gzipDecode = GzipDecode.inflate || undefined;
+let nativeGzipDecode = undefined;
+// if ( ! gzipDecode ) {
+// 	import( 'zlib' ).then( ( zlib ) => {
+// 		nativeGzipDecode = ( buffer ) => zlib.unzipSync( buffer );
+// 	} );
+// }
+class WOFF$1 extends SimpleTable {
+	constructor( font, dataview, createTable ) {
+		const { p: p } = super( { offset: 0, length: 44 }, dataview, `woff` );
+		this.signature = p.tag;
+		this.flavor = p.uint32;
+		this.length = p.uint32;
+		this.numTables = p.uint16;
+		p.uint16;
+		this.totalSfntSize = p.uint32;
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.metaOffset = p.uint32;
+		this.metaLength = p.uint32;
+		this.metaOrigLength = p.uint32;
+		this.privOffset = p.uint32;
+		this.privLength = p.uint32;
+		p.verifyLength();
+		this.directory = [ ...new Array( this.numTables ) ].map(
+			( _ ) => new WoffTableDirectoryEntry( p )
+		);
+		buildWoffLazyLookups( this, dataview, createTable );
+	}
+}
+class WoffTableDirectoryEntry {
+	constructor( p ) {
+		this.tag = p.tag;
+		this.offset = p.uint32;
+		this.compLength = p.uint32;
+		this.origLength = p.uint32;
+		this.origChecksum = p.uint32;
+	}
+}
+function buildWoffLazyLookups( woff, dataview, createTable ) {
+	woff.tables = {};
+	woff.directory.forEach( ( entry ) => {
+		lazy$1( woff.tables, entry.tag.trim(), () => {
+			let offset = 0;
+			let view = dataview;
+			if ( entry.compLength !== entry.origLength ) {
+				const data = dataview.buffer.slice(
+					entry.offset,
+					entry.offset + entry.compLength
+				);
+				let unpacked;
+				if ( gzipDecode ) {
+					unpacked = gzipDecode( new Uint8Array( data ) );
+				} else if ( nativeGzipDecode ) {
+					unpacked = nativeGzipDecode( new Uint8Array( data ) );
+				} else {
+					const msg = `no brotli decoder available to decode WOFF2 font`;
+					if ( font.onerror ) font.onerror( msg );
+					throw new Error( msg );
+				}
+				view = new DataView( unpacked.buffer );
+			} else {
+				offset = entry.offset;
+			}
+			return createTable(
+				woff.tables,
+				{ tag: entry.tag, offset: offset, length: entry.origLength },
+				view
+			);
+		} );
+	} );
+}
+const brotliDecode = unbrotli;
+let nativeBrotliDecode = undefined;
+// if ( ! brotliDecode ) {
+// 	import( 'zlib' ).then( ( zlib ) => {
+// 		nativeBrotliDecode = ( buffer ) => zlib.brotliDecompressSync( buffer );
+// 	} );
+// }
+class WOFF2$1 extends SimpleTable {
+	constructor( font, dataview, createTable ) {
+		const { p: p } = super( { offset: 0, length: 48 }, dataview, `woff2` );
+		this.signature = p.tag;
+		this.flavor = p.uint32;
+		this.length = p.uint32;
+		this.numTables = p.uint16;
+		p.uint16;
+		this.totalSfntSize = p.uint32;
+		this.totalCompressedSize = p.uint32;
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.metaOffset = p.uint32;
+		this.metaLength = p.uint32;
+		this.metaOrigLength = p.uint32;
+		this.privOffset = p.uint32;
+		this.privLength = p.uint32;
+		p.verifyLength();
+		this.directory = [ ...new Array( this.numTables ) ].map(
+			( _ ) => new Woff2TableDirectoryEntry( p )
+		);
+		let dictOffset = p.currentPosition;
+		this.directory[ 0 ].offset = 0;
+		this.directory.forEach( ( e, i ) => {
+			let next = this.directory[ i + 1 ];
+			if ( next ) {
+				next.offset =
+					e.offset +
+					( e.transformLength !== undefined
+						? e.transformLength
+						: e.origLength );
+			}
+		} );
+		let decoded;
+		let buffer = dataview.buffer.slice( dictOffset );
+		if ( brotliDecode ) {
+			decoded = brotliDecode( new Uint8Array( buffer ) );
+		} else if ( nativeBrotliDecode ) {
+			decoded = new Uint8Array( nativeBrotliDecode( buffer ) );
+		} else {
+			const msg = `no brotli decoder available to decode WOFF2 font`;
+			if ( font.onerror ) font.onerror( msg );
+			throw new Error( msg );
+		}
+		buildWoff2LazyLookups( this, decoded, createTable );
+	}
+}
+class Woff2TableDirectoryEntry {
+	constructor( p ) {
+		this.flags = p.uint8;
+		const tagNumber = ( this.tagNumber = this.flags & 63 );
+		if ( tagNumber === 63 ) {
+			this.tag = p.tag;
+		} else {
+			this.tag = getWOFF2Tag( tagNumber );
+		}
+		const transformVersion = ( this.transformVersion =
+			( this.flags & 192 ) >> 6 );
+		let hasTransforms = transformVersion !== 0;
+		if ( this.tag === `glyf` || this.tag === `loca` ) {
+			hasTransforms = this.transformVersion !== 3;
+		}
+		this.origLength = p.uint128;
+		if ( hasTransforms ) {
+			this.transformLength = p.uint128;
+		}
+	}
+}
+function buildWoff2LazyLookups( woff2, decoded, createTable ) {
+	woff2.tables = {};
+	woff2.directory.forEach( ( entry ) => {
+		lazy$1( woff2.tables, entry.tag.trim(), () => {
+			const start = entry.offset;
+			const end =
+				start +
+				( entry.transformLength
+					? entry.transformLength
+					: entry.origLength );
+			const data = new DataView( decoded.slice( start, end ).buffer );
+			try {
+				return createTable(
+					woff2.tables,
+					{ tag: entry.tag, offset: 0, length: entry.origLength },
+					data
+				);
+			} catch ( e ) {
+				console.error( e );
+			}
+		} );
+	} );
+}
+function getWOFF2Tag( flag ) {
+	return [
+		`cmap`,
+		`head`,
+		`hhea`,
+		`hmtx`,
+		`maxp`,
+		`name`,
+		`OS/2`,
+		`post`,
+		`cvt `,
+		`fpgm`,
+		`glyf`,
+		`loca`,
+		`prep`,
+		`CFF `,
+		`VORG`,
+		`EBDT`,
+		`EBLC`,
+		`gasp`,
+		`hdmx`,
+		`kern`,
+		`LTSH`,
+		`PCLT`,
+		`VDMX`,
+		`vhea`,
+		`vmtx`,
+		`BASE`,
+		`GDEF`,
+		`GPOS`,
+		`GSUB`,
+		`EBSC`,
+		`JSTF`,
+		`MATH`,
+		`CBDT`,
+		`CBLC`,
+		`COLR`,
+		`CPAL`,
+		`SVG `,
+		`sbix`,
+		`acnt`,
+		`avar`,
+		`bdat`,
+		`bloc`,
+		`bsln`,
+		`cvar`,
+		`fdsc`,
+		`feat`,
+		`fmtx`,
+		`fvar`,
+		`gvar`,
+		`hsty`,
+		`just`,
+		`lcar`,
+		`mort`,
+		`morx`,
+		`opbd`,
+		`prop`,
+		`trak`,
+		`Zapf`,
+		`Silf`,
+		`Glat`,
+		`Gloc`,
+		`Feat`,
+		`Sill`,
+	][ flag & 63 ];
+}
+const tableClasses = {};
+let tableClassesLoaded = false;
+Promise.all( [
+	Promise.resolve().then( function () {
+		return cmap$1;
+	} ),
+	Promise.resolve().then( function () {
+		return head$1;
+	} ),
+	Promise.resolve().then( function () {
+		return hhea$1;
+	} ),
+	Promise.resolve().then( function () {
+		return hmtx$1;
+	} ),
+	Promise.resolve().then( function () {
+		return maxp$1;
+	} ),
+	Promise.resolve().then( function () {
+		return name$1;
+	} ),
+	Promise.resolve().then( function () {
+		return OS2$1;
+	} ),
+	Promise.resolve().then( function () {
+		return post$1;
+	} ),
+	Promise.resolve().then( function () {
+		return BASE$1;
+	} ),
+	Promise.resolve().then( function () {
+		return GDEF$1;
+	} ),
+	Promise.resolve().then( function () {
+		return GSUB$1;
+	} ),
+	Promise.resolve().then( function () {
+		return GPOS$1;
+	} ),
+	Promise.resolve().then( function () {
+		return SVG$1;
+	} ),
+	Promise.resolve().then( function () {
+		return fvar$1;
+	} ),
+	Promise.resolve().then( function () {
+		return cvt$1;
+	} ),
+	Promise.resolve().then( function () {
+		return fpgm$1;
+	} ),
+	Promise.resolve().then( function () {
+		return gasp$1;
+	} ),
+	Promise.resolve().then( function () {
+		return glyf$1;
+	} ),
+	Promise.resolve().then( function () {
+		return loca$1;
+	} ),
+	Promise.resolve().then( function () {
+		return prep$1;
+	} ),
+	Promise.resolve().then( function () {
+		return CFF$1;
+	} ),
+	Promise.resolve().then( function () {
+		return CFF2$1;
+	} ),
+	Promise.resolve().then( function () {
+		return VORG$1;
+	} ),
+	Promise.resolve().then( function () {
+		return EBLC$1;
+	} ),
+	Promise.resolve().then( function () {
+		return EBDT$1;
+	} ),
+	Promise.resolve().then( function () {
+		return EBSC$1;
+	} ),
+	Promise.resolve().then( function () {
+		return CBLC$1;
+	} ),
+	Promise.resolve().then( function () {
+		return CBDT$1;
+	} ),
+	Promise.resolve().then( function () {
+		return sbix$1;
+	} ),
+	Promise.resolve().then( function () {
+		return COLR$1;
+	} ),
+	Promise.resolve().then( function () {
+		return CPAL$1;
+	} ),
+	Promise.resolve().then( function () {
+		return DSIG$1;
+	} ),
+	Promise.resolve().then( function () {
+		return hdmx$1;
+	} ),
+	Promise.resolve().then( function () {
+		return kern$1;
+	} ),
+	Promise.resolve().then( function () {
+		return LTSH$1;
+	} ),
+	Promise.resolve().then( function () {
+		return MERG$1;
+	} ),
+	Promise.resolve().then( function () {
+		return meta$1;
+	} ),
+	Promise.resolve().then( function () {
+		return PCLT$1;
+	} ),
+	Promise.resolve().then( function () {
+		return VDMX$1;
+	} ),
+	Promise.resolve().then( function () {
+		return vhea$1;
+	} ),
+	Promise.resolve().then( function () {
+		return vmtx$1;
+	} ),
+] ).then( ( data ) => {
+	data.forEach( ( e ) => {
+		let name = Object.keys( e )[ 0 ];
+		tableClasses[ name ] = e[ name ];
+	} );
+	tableClassesLoaded = true;
+} );
+function createTable( tables, dict, dataview ) {
+	let name = dict.tag.replace( /[^\w\d]/g, `` );
+	let Type = tableClasses[ name ];
+	if ( Type ) return new Type( dict, dataview, tables );
+	console.warn(
+		`lib-font has no definition for ${ name }. The table was skipped.`
+	);
+	return {};
+}
+function loadTableClasses() {
+	let count = 0;
+	function checkLoaded( resolve, reject ) {
+		if ( ! tableClassesLoaded ) {
+			if ( count > 10 ) {
+				return reject( new Error( `loading took too long` ) );
+			}
+			count++;
+			return setTimeout( () => checkLoaded( resolve ), 250 );
+		}
+		resolve( createTable );
+	}
+	return new Promise( ( resolve, reject ) => checkLoaded( resolve ) );
+}
+function getFontCSSFormat( path, errorOnStyle ) {
+	let pos = path.lastIndexOf( `.` );
+	let ext = ( path.substring( pos + 1 ) || `` ).toLowerCase();
+	let format = {
+		ttf: `truetype`,
+		otf: `opentype`,
+		woff: `woff`,
+		woff2: `woff2`,
+	}[ ext ];
+	if ( format ) return format;
+	let msg = {
+		eot: `The .eot format is not supported: it died in January 12, 2016, when Microsoft retired all versions of IE that didn't already support WOFF.`,
+		svg: `The .svg format is not supported: SVG fonts (not to be confused with OpenType with embedded SVG) were so bad we took the entire fonts chapter out of the SVG specification again.`,
+		fon: `The .fon format is not supported: this is an ancient Windows bitmap font format.`,
+		ttc: `Based on the current CSS specification, font collections are not (yet?) supported.`,
+	}[ ext ];
+	if ( ! msg ) msg = `${ path } is not a known webfont format.`;
+	if ( errorOnStyle ) {
+		throw new Error( msg );
+	} else {
+		console.warn( `Could not load font: ${ msg }` );
+	}
+}
+async function setupFontFace( name, url, options = {} ) {
+	if ( ! globalThis.document ) return;
+	let format = getFontCSSFormat( url, options.errorOnStyle );
+	if ( ! format ) return;
+	let style = document.createElement( `style` );
+	style.className = `injected-by-Font-js`;
+	let rules = [];
+	if ( options.styleRules ) {
+		rules = Object.entries( options.styleRules ).map(
+			( [ key, value ] ) => `${ key }: ${ value };`
+		);
+	}
+	style.textContent = `\n@font-face {\n    font-family: "${ name }";\n    ${ rules.join(
+		`\n\t`
+	) }\n    src: url("${ url }") format("${ format }");\n}`;
+	globalThis.document.head.appendChild( style );
+	return style;
+}
+const TTF = [ 0, 1, 0, 0 ];
+const OTF = [ 79, 84, 84, 79 ];
+const WOFF = [ 119, 79, 70, 70 ];
+const WOFF2 = [ 119, 79, 70, 50 ];
+function match( ar1, ar2 ) {
+	if ( ar1.length !== ar2.length ) return;
+	for ( let i = 0; i < ar1.length; i++ ) {
+		if ( ar1[ i ] !== ar2[ i ] ) return;
+	}
+	return true;
+}
+function validFontFormat( dataview ) {
+	const LEAD_BYTES = [
+		dataview.getUint8( 0 ),
+		dataview.getUint8( 1 ),
+		dataview.getUint8( 2 ),
+		dataview.getUint8( 3 ),
+	];
+	if ( match( LEAD_BYTES, TTF ) || match( LEAD_BYTES, OTF ) ) return `SFNT`;
+	if ( match( LEAD_BYTES, WOFF ) ) return `WOFF`;
+	if ( match( LEAD_BYTES, WOFF2 ) ) return `WOFF2`;
+}
+function checkFetchResponseStatus( response ) {
+	if ( ! response.ok ) {
+		throw new Error(
+			`HTTP ${ response.status } - ${ response.statusText }`
+		);
+	}
+	return response;
+}
+class Font extends EventManager {
+	constructor( name, options = {} ) {
+		super();
+		this.name = name;
+		this.options = options;
+		this.metrics = false;
+	}
+	get src() {
+		return this.__src;
+	}
+	set src( src ) {
+		this.__src = src;
+		( async () => {
+			if ( globalThis.document && ! this.options.skipStyleSheet ) {
+				await setupFontFace( this.name, src, this.options );
+			}
+			this.loadFont( src );
+		} )();
+	}
+	async loadFont( url, filename ) {
+		fetch( url )
+			.then(
+				( response ) =>
+					checkFetchResponseStatus( response ) &&
+					response.arrayBuffer()
+			)
+			.then( ( buffer ) =>
+				this.fromDataBuffer( buffer, filename || url )
+			)
+			.catch( ( err ) => {
+				const evt = new Event(
+					`error`,
+					err,
+					`Failed to load font at ${ filename || url }`
+				);
+				this.dispatch( evt );
+				if ( this.onerror ) this.onerror( evt );
+			} );
+	}
+	async fromDataBuffer( buffer, filenameOrUrL ) {
+		this.fontData = new DataView( buffer );
+		let type = validFontFormat( this.fontData );
+		if ( ! type ) {
+			throw new Error(
+				`${ filenameOrUrL } is either an unsupported font format, or not a font at all.`
+			);
+		}
+		await this.parseBasicData( type );
+		const evt = new Event( 'load', { font: this } );
+		this.dispatch( evt );
+		if ( this.onload ) this.onload( evt );
+	}
+	async parseBasicData( type ) {
+		return loadTableClasses().then( ( createTable ) => {
+			if ( type === `SFNT` ) {
+				this.opentype = new SFNT( this, this.fontData, createTable );
+			}
+			if ( type === `WOFF` ) {
+				this.opentype = new WOFF$1( this, this.fontData, createTable );
+			}
+			if ( type === `WOFF2` ) {
+				this.opentype = new WOFF2$1( this, this.fontData, createTable );
+			}
+			return this.opentype;
+		} );
+	}
+	getGlyphId( char ) {
+		return this.opentype.tables.cmap.getGlyphId( char );
+	}
+	reverse( glyphid ) {
+		return this.opentype.tables.cmap.reverse( glyphid );
+	}
+	supports( char ) {
+		return this.getGlyphId( char ) !== 0;
+	}
+	supportsVariation( variation ) {
+		return (
+			this.opentype.tables.cmap.supportsVariation( variation ) !== false
+		);
+	}
+	measureText( text, size = 16 ) {
+		if ( this.__unloaded )
+			throw new Error(
+				'Cannot measure text: font was unloaded. Please reload before calling measureText()'
+			);
+		let d = document.createElement( 'div' );
+		d.textContent = text;
+		d.style.fontFamily = this.name;
+		d.style.fontSize = `${ size }px`;
+		d.style.color = `transparent`;
+		d.style.background = `transparent`;
+		d.style.top = `0`;
+		d.style.left = `0`;
+		d.style.position = `absolute`;
+		document.body.appendChild( d );
+		let bbox = d.getBoundingClientRect();
+		document.body.removeChild( d );
+		const OS2 = this.opentype.tables[ 'OS/2' ];
+		bbox.fontSize = size;
+		bbox.ascender = OS2.sTypoAscender;
+		bbox.descender = OS2.sTypoDescender;
+		return bbox;
+	}
+	unload() {
+		if ( this.styleElement.parentNode ) {
+			this.styleElement.parentNode.removeElement( this.styleElement );
+			const evt = new Event( 'unload', { font: this } );
+			this.dispatch( evt );
+			if ( this.onunload ) this.onunload( evt );
+		}
+		this._unloaded = true;
+	}
+	load() {
+		if ( this.__unloaded ) {
+			delete this.__unloaded;
+			document.head.appendChild( this.styleElement );
+			const evt = new Event( 'load', { font: this } );
+			this.dispatch( evt );
+			if ( this.onload ) this.onload( evt );
+		}
+	}
+}
+globalThis.Font = Font;
+class Subtable extends ParsedData {
+	constructor( p, plaformID, encodingID ) {
+		super( p );
+		this.plaformID = plaformID;
+		this.encodingID = encodingID;
+	}
+}
+class Format0 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 0;
+		this.length = p.uint16;
+		this.language = p.uint16;
+		this.glyphIdArray = [ ...new Array( 256 ) ].map( ( _ ) => p.uint8 );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) {
+			charCode = -1;
+			console.warn(
+				`supports(character) not implemented for cmap subtable format 0. only supports(id) is implemented.`
+			);
+		}
+		return 0 <= charCode && charCode <= 255;
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 0` );
+		return {};
+	}
+	getSupportedCharCodes() {
+		return [ { start: 1, end: 256 } ];
+	}
+}
+class Format2 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 2;
+		this.length = p.uint16;
+		this.language = p.uint16;
+		this.subHeaderKeys = [ ...new Array( 256 ) ].map( ( _ ) => p.uint16 );
+		const subHeaderCount = Math.max( ...this.subHeaderKeys );
+		const subHeaderOffset = p.currentPosition;
+		lazy$1( this, `subHeaders`, () => {
+			p.currentPosition = subHeaderOffset;
+			return [ ...new Array( subHeaderCount ) ].map(
+				( _ ) => new SubHeader( p )
+			);
+		} );
+		const glyphIndexOffset = subHeaderOffset + subHeaderCount * 8;
+		lazy$1( this, `glyphIndexArray`, () => {
+			p.currentPosition = glyphIndexOffset;
+			return [ ...new Array( subHeaderCount ) ].map( ( _ ) => p.uint16 );
+		} );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) {
+			charCode = -1;
+			console.warn(
+				`supports(character) not implemented for cmap subtable format 2. only supports(id) is implemented.`
+			);
+		}
+		const low = charCode && 255;
+		const high = charCode && 65280;
+		const subHeaderKey = this.subHeaders[ high ];
+		const subheader = this.subHeaders[ subHeaderKey ];
+		const first = subheader.firstCode;
+		const last = first + subheader.entryCount;
+		return first <= low && low <= last;
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 2` );
+		return {};
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) {
+			return this.subHeaders.map( ( h ) => ( {
+				firstCode: h.firstCode,
+				lastCode: h.lastCode,
+			} ) );
+		}
+		return this.subHeaders.map( ( h ) => ( {
+			start: h.firstCode,
+			end: h.lastCode,
+		} ) );
+	}
+}
+class SubHeader {
+	constructor( p ) {
+		this.firstCode = p.uint16;
+		this.entryCount = p.uint16;
+		this.lastCode = this.first + this.entryCount;
+		this.idDelta = p.int16;
+		this.idRangeOffset = p.uint16;
+	}
+}
+class Format4 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 4;
+		this.length = p.uint16;
+		this.language = p.uint16;
+		this.segCountX2 = p.uint16;
+		this.segCount = this.segCountX2 / 2;
+		this.searchRange = p.uint16;
+		this.entrySelector = p.uint16;
+		this.rangeShift = p.uint16;
+		const endCodePosition = p.currentPosition;
+		lazy$1( this, `endCode`, () =>
+			p.readBytes( this.segCount, endCodePosition, 16 )
+		);
+		const startCodePosition = endCodePosition + 2 + this.segCountX2;
+		lazy$1( this, `startCode`, () =>
+			p.readBytes( this.segCount, startCodePosition, 16 )
+		);
+		const idDeltaPosition = startCodePosition + this.segCountX2;
+		lazy$1( this, `idDelta`, () =>
+			p.readBytes( this.segCount, idDeltaPosition, 16, true )
+		);
+		const idRangePosition = idDeltaPosition + this.segCountX2;
+		lazy$1( this, `idRangeOffset`, () =>
+			p.readBytes( this.segCount, idRangePosition, 16 )
+		);
+		const glyphIdArrayPosition = idRangePosition + this.segCountX2;
+		const glyphIdArrayLength =
+			this.length - ( glyphIdArrayPosition - this.tableStart );
+		lazy$1( this, `glyphIdArray`, () =>
+			p.readBytes( glyphIdArrayLength, glyphIdArrayPosition, 16 )
+		);
+		lazy$1( this, `segments`, () =>
+			this.buildSegments( idRangePosition, glyphIdArrayPosition, p )
+		);
+	}
+	buildSegments( idRangePosition, glyphIdArrayPosition, p ) {
+		const build = ( _, i ) => {
+			let startCode = this.startCode[ i ],
+				endCode = this.endCode[ i ],
+				idDelta = this.idDelta[ i ],
+				idRangeOffset = this.idRangeOffset[ i ],
+				idRangeOffsetPointer = idRangePosition + 2 * i,
+				glyphIDs = [];
+			if ( idRangeOffset === 0 ) {
+				for (
+					let i = startCode + idDelta, e = endCode + idDelta;
+					i <= e;
+					i++
+				) {
+					glyphIDs.push( i );
+				}
+			} else {
+				for ( let i = 0, e = endCode - startCode; i <= e; i++ ) {
+					p.currentPosition =
+						idRangeOffsetPointer + idRangeOffset + i * 2;
+					glyphIDs.push( p.uint16 );
+				}
+			}
+			return {
+				startCode: startCode,
+				endCode: endCode,
+				idDelta: idDelta,
+				idRangeOffset: idRangeOffset,
+				glyphIDs: glyphIDs,
+			};
+		};
+		return [ ...new Array( this.segCount ) ].map( build );
+	}
+	reverse( glyphID ) {
+		let s = this.segments.find( ( v ) => v.glyphIDs.includes( glyphID ) );
+		if ( ! s ) return {};
+		const code = s.startCode + s.glyphIDs.indexOf( glyphID );
+		return { code: code, unicode: String.fromCodePoint( code ) };
+	}
+	getGlyphId( charCode ) {
+		if ( charCode.charCodeAt ) charCode = charCode.charCodeAt( 0 );
+		if ( 55296 <= charCode && charCode <= 57343 ) return 0;
+		if ( ( charCode & 65534 ) === 65534 || ( charCode & 65535 ) === 65535 )
+			return 0;
+		let segment = this.segments.find(
+			( s ) => s.startCode <= charCode && charCode <= s.endCode
+		);
+		if ( ! segment ) return 0;
+		return segment.glyphIDs[ charCode - segment.startCode ];
+	}
+	supports( charCode ) {
+		return this.getGlyphId( charCode ) !== 0;
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) return this.segments;
+		return this.segments.map( ( v ) => ( {
+			start: v.startCode,
+			end: v.endCode,
+		} ) );
+	}
+}
+class Format6 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 6;
+		this.length = p.uint16;
+		this.language = p.uint16;
+		this.firstCode = p.uint16;
+		this.entryCount = p.uint16;
+		this.lastCode = this.firstCode + this.entryCount - 1;
+		const getter = () =>
+			[ ...new Array( this.entryCount ) ].map( ( _ ) => p.uint16 );
+		lazy$1( this, `glyphIdArray`, getter );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) {
+			charCode = -1;
+			console.warn(
+				`supports(character) not implemented for cmap subtable format 6. only supports(id) is implemented.`
+			);
+		}
+		if ( charCode < this.firstCode ) return {};
+		if ( charCode > this.firstCode + this.entryCount ) return {};
+		const code = charCode - this.firstCode;
+		return { code: code, unicode: String.fromCodePoint( code ) };
+	}
+	reverse( glyphID ) {
+		let pos = this.glyphIdArray.indexOf( glyphID );
+		if ( pos > -1 ) return this.firstCode + pos;
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) {
+			return [ { firstCode: this.firstCode, lastCode: this.lastCode } ];
+		}
+		return [ { start: this.firstCode, end: this.lastCode } ];
+	}
+}
+class Format8 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 8;
+		p.uint16;
+		this.length = p.uint32;
+		this.language = p.uint32;
+		this.is32 = [ ...new Array( 8192 ) ].map( ( _ ) => p.uint8 );
+		this.numGroups = p.uint32;
+		const getter = () =>
+			[ ...new Array( this.numGroups ) ].map(
+				( _ ) => new SequentialMapGroup$1( p )
+			);
+		lazy$1( this, `groups`, getter );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) {
+			charCode = -1;
+			console.warn(
+				`supports(character) not implemented for cmap subtable format 8. only supports(id) is implemented.`
+			);
+		}
+		return (
+			this.groups.findIndex(
+				( s ) =>
+					s.startcharCode <= charCode && charCode <= s.endcharCode
+			) !== -1
+		);
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 8` );
+		return {};
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) return this.groups;
+		return this.groups.map( ( v ) => ( {
+			start: v.startcharCode,
+			end: v.endcharCode,
+		} ) );
+	}
+}
+class SequentialMapGroup$1 {
+	constructor( p ) {
+		this.startcharCode = p.uint32;
+		this.endcharCode = p.uint32;
+		this.startGlyphID = p.uint32;
+	}
+}
+class Format10 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 10;
+		p.uint16;
+		this.length = p.uint32;
+		this.language = p.uint32;
+		this.startCharCode = p.uint32;
+		this.numChars = p.uint32;
+		this.endCharCode = this.startCharCode + this.numChars;
+		const getter = () =>
+			[ ...new Array( this.numChars ) ].map( ( _ ) => p.uint16 );
+		lazy$1( this, `glyphs`, getter );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) {
+			charCode = -1;
+			console.warn(
+				`supports(character) not implemented for cmap subtable format 10. only supports(id) is implemented.`
+			);
+		}
+		if ( charCode < this.startCharCode ) return false;
+		if ( charCode > this.startCharCode + this.numChars ) return false;
+		return charCode - this.startCharCode;
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 10` );
+		return {};
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) {
+			return [
+				{
+					startCharCode: this.startCharCode,
+					endCharCode: this.endCharCode,
+				},
+			];
+		}
+		return [ { start: this.startCharCode, end: this.endCharCode } ];
+	}
+}
+class Format12 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 12;
+		p.uint16;
+		this.length = p.uint32;
+		this.language = p.uint32;
+		this.numGroups = p.uint32;
+		const getter = () =>
+			[ ...new Array( this.numGroups ) ].map(
+				( _ ) => new SequentialMapGroup( p )
+			);
+		lazy$1( this, `groups`, getter );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) charCode = charCode.charCodeAt( 0 );
+		if ( 55296 <= charCode && charCode <= 57343 ) return 0;
+		if ( ( charCode & 65534 ) === 65534 || ( charCode & 65535 ) === 65535 )
+			return 0;
+		return (
+			this.groups.findIndex(
+				( s ) =>
+					s.startCharCode <= charCode && charCode <= s.endCharCode
+			) !== -1
+		);
+	}
+	reverse( glyphID ) {
+		for ( let group of this.groups ) {
+			let start = group.startGlyphID;
+			if ( start > glyphID ) continue;
+			if ( start === glyphID ) return group.startCharCode;
+			let end = start + ( group.endCharCode - group.startCharCode );
+			if ( end < glyphID ) continue;
+			const code = group.startCharCode + ( glyphID - start );
+			return { code: code, unicode: String.fromCodePoint( code ) };
+		}
+		return {};
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) return this.groups;
+		return this.groups.map( ( v ) => ( {
+			start: v.startCharCode,
+			end: v.endCharCode,
+		} ) );
+	}
+}
+class SequentialMapGroup {
+	constructor( p ) {
+		this.startCharCode = p.uint32;
+		this.endCharCode = p.uint32;
+		this.startGlyphID = p.uint32;
+	}
+}
+class Format13 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.format = 13;
+		p.uint16;
+		this.length = p.uint32;
+		this.language = p.uint32;
+		this.numGroups = p.uint32;
+		const getter = [ ...new Array( this.numGroups ) ].map(
+			( _ ) => new ConstantMapGroup( p )
+		);
+		lazy$1( this, `groups`, getter );
+	}
+	supports( charCode ) {
+		if ( charCode.charCodeAt ) charCode = charCode.charCodeAt( 0 );
+		return (
+			this.groups.findIndex(
+				( s ) =>
+					s.startCharCode <= charCode && charCode <= s.endCharCode
+			) !== -1
+		);
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 13` );
+		return {};
+	}
+	getSupportedCharCodes( preservePropNames = false ) {
+		if ( preservePropNames ) return this.groups;
+		return this.groups.map( ( v ) => ( {
+			start: v.startCharCode,
+			end: v.endCharCode,
+		} ) );
+	}
+}
+class ConstantMapGroup {
+	constructor( p ) {
+		this.startCharCode = p.uint32;
+		this.endCharCode = p.uint32;
+		this.glyphID = p.uint32;
+	}
+}
+class Format14 extends Subtable {
+	constructor( p, platformID, encodingID ) {
+		super( p, platformID, encodingID );
+		this.subTableStart = p.currentPosition;
+		this.format = 14;
+		this.length = p.uint32;
+		this.numVarSelectorRecords = p.uint32;
+		lazy$1( this, `varSelectors`, () =>
+			[ ...new Array( this.numVarSelectorRecords ) ].map(
+				( _ ) => new VariationSelector( p )
+			)
+		);
+	}
+	supports() {
+		console.warn( `supports not implemented for cmap subtable format 14` );
+		return 0;
+	}
+	getSupportedCharCodes() {
+		console.warn(
+			`getSupportedCharCodes not implemented for cmap subtable format 14`
+		);
+		return [];
+	}
+	reverse( glyphID ) {
+		console.warn( `reverse not implemented for cmap subtable format 14` );
+		return {};
+	}
+	supportsVariation( variation ) {
+		let v = this.varSelector.find(
+			( uvs ) => uvs.varSelector === variation
+		);
+		return v ? v : false;
+	}
+	getSupportedVariations() {
+		return this.varSelectors.map( ( v ) => v.varSelector );
+	}
+}
+class VariationSelector {
+	constructor( p ) {
+		this.varSelector = p.uint24;
+		this.defaultUVSOffset = p.Offset32;
+		this.nonDefaultUVSOffset = p.Offset32;
+	}
+}
+function createSubTable( parser, platformID, encodingID ) {
+	const format = parser.uint16;
+	if ( format === 0 ) return new Format0( parser, platformID, encodingID );
+	if ( format === 2 ) return new Format2( parser, platformID, encodingID );
+	if ( format === 4 ) return new Format4( parser, platformID, encodingID );
+	if ( format === 6 ) return new Format6( parser, platformID, encodingID );
+	if ( format === 8 ) return new Format8( parser, platformID, encodingID );
+	if ( format === 10 ) return new Format10( parser, platformID, encodingID );
+	if ( format === 12 ) return new Format12( parser, platformID, encodingID );
+	if ( format === 13 ) return new Format13( parser, platformID, encodingID );
+	if ( format === 14 ) return new Format14( parser, platformID, encodingID );
+	return {};
+}
+class cmap extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numTables = p.uint16;
+		this.encodingRecords = [ ...new Array( this.numTables ) ].map(
+			( _ ) => new EncodingRecord( p, this.tableStart )
+		);
+	}
+	getSubTable( tableID ) {
+		return this.encodingRecords[ tableID ].table;
+	}
+	getSupportedEncodings() {
+		return this.encodingRecords.map( ( r ) => ( {
+			platformID: r.platformID,
+			encodingId: r.encodingID,
+		} ) );
+	}
+	getSupportedCharCodes( platformID, encodingID ) {
+		const recordID = this.encodingRecords.findIndex(
+			( r ) => r.platformID === platformID && r.encodingID === encodingID
+		);
+		if ( recordID === -1 ) return false;
+		const subtable = this.getSubTable( recordID );
+		return subtable.getSupportedCharCodes();
+	}
+	reverse( glyphid ) {
+		for ( let i = 0; i < this.numTables; i++ ) {
+			let code = this.getSubTable( i ).reverse( glyphid );
+			if ( code ) return code;
+		}
+	}
+	getGlyphId( char ) {
+		let last = 0;
+		this.encodingRecords.some( ( _, tableID ) => {
+			let t = this.getSubTable( tableID );
+			if ( ! t.getGlyphId ) return false;
+			last = t.getGlyphId( char );
+			return last !== 0;
+		} );
+		return last;
+	}
+	supports( char ) {
+		return this.encodingRecords.some( ( _, tableID ) => {
+			const t = this.getSubTable( tableID );
+			return t.supports && t.supports( char ) !== false;
+		} );
+	}
+	supportsVariation( variation ) {
+		return this.encodingRecords.some( ( _, tableID ) => {
+			const t = this.getSubTable( tableID );
+			return (
+				t.supportsVariation &&
+				t.supportsVariation( variation ) !== false
+			);
+		} );
+	}
+}
+class EncodingRecord {
+	constructor( p, tableStart ) {
+		const platformID = ( this.platformID = p.uint16 );
+		const encodingID = ( this.encodingID = p.uint16 );
+		const offset = ( this.offset = p.Offset32 );
+		lazy$1( this, `table`, () => {
+			p.currentPosition = tableStart + offset;
+			return createSubTable( p, platformID, encodingID );
+		} );
+	}
+}
+var cmap$1 = Object.freeze( { __proto__: null, cmap: cmap } );
+class head extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.load( {
+			majorVersion: p.uint16,
+			minorVersion: p.uint16,
+			fontRevision: p.fixed,
+			checkSumAdjustment: p.uint32,
+			magicNumber: p.uint32,
+			flags: p.flags( 16 ),
+			unitsPerEm: p.uint16,
+			created: p.longdatetime,
+			modified: p.longdatetime,
+			xMin: p.int16,
+			yMin: p.int16,
+			xMax: p.int16,
+			yMax: p.int16,
+			macStyle: p.flags( 16 ),
+			lowestRecPPEM: p.uint16,
+			fontDirectionHint: p.uint16,
+			indexToLocFormat: p.uint16,
+			glyphDataFormat: p.uint16,
+		} );
+	}
+}
+var head$1 = Object.freeze( { __proto__: null, head: head } );
+class hhea extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.ascender = p.fword;
+		this.descender = p.fword;
+		this.lineGap = p.fword;
+		this.advanceWidthMax = p.ufword;
+		this.minLeftSideBearing = p.fword;
+		this.minRightSideBearing = p.fword;
+		this.xMaxExtent = p.fword;
+		this.caretSlopeRise = p.int16;
+		this.caretSlopeRun = p.int16;
+		this.caretOffset = p.int16;
+		p.int16;
+		p.int16;
+		p.int16;
+		p.int16;
+		this.metricDataFormat = p.int16;
+		this.numberOfHMetrics = p.uint16;
+		p.verifyLength();
+	}
+}
+var hhea$1 = Object.freeze( { __proto__: null, hhea: hhea } );
+class hmtx extends SimpleTable {
+	constructor( dict, dataview, tables ) {
+		const { p: p } = super( dict, dataview );
+		const numberOfHMetrics = tables.hhea.numberOfHMetrics;
+		const numGlyphs = tables.maxp.numGlyphs;
+		const metricsStart = p.currentPosition;
+		lazy$1( this, `hMetrics`, () => {
+			p.currentPosition = metricsStart;
+			return [ ...new Array( numberOfHMetrics ) ].map(
+				( _ ) => new LongHorMetric( p.uint16, p.int16 )
+			);
+		} );
+		if ( numberOfHMetrics < numGlyphs ) {
+			const lsbStart = metricsStart + numberOfHMetrics * 4;
+			lazy$1( this, `leftSideBearings`, () => {
+				p.currentPosition = lsbStart;
+				return [ ...new Array( numGlyphs - numberOfHMetrics ) ].map(
+					( _ ) => p.int16
+				);
+			} );
+		}
+	}
+}
+class LongHorMetric {
+	constructor( w, b ) {
+		this.advanceWidth = w;
+		this.lsb = b;
+	}
+}
+var hmtx$1 = Object.freeze( { __proto__: null, hmtx: hmtx } );
+class maxp extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.legacyFixed;
+		this.numGlyphs = p.uint16;
+		if ( this.version === 1 ) {
+			this.maxPoints = p.uint16;
+			this.maxContours = p.uint16;
+			this.maxCompositePoints = p.uint16;
+			this.maxCompositeContours = p.uint16;
+			this.maxZones = p.uint16;
+			this.maxTwilightPoints = p.uint16;
+			this.maxStorage = p.uint16;
+			this.maxFunctionDefs = p.uint16;
+			this.maxInstructionDefs = p.uint16;
+			this.maxStackElements = p.uint16;
+			this.maxSizeOfInstructions = p.uint16;
+			this.maxComponentElements = p.uint16;
+			this.maxComponentDepth = p.uint16;
+		}
+		p.verifyLength();
+	}
+}
+var maxp$1 = Object.freeze( { __proto__: null, maxp: maxp } );
+class name extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.format = p.uint16;
+		this.count = p.uint16;
+		this.stringOffset = p.Offset16;
+		this.nameRecords = [ ...new Array( this.count ) ].map(
+			( _ ) => new NameRecord( p, this )
+		);
+		if ( this.format === 1 ) {
+			this.langTagCount = p.uint16;
+			this.langTagRecords = [ ...new Array( this.langTagCount ) ].map(
+				( _ ) => new LangTagRecord( p.uint16, p.Offset16 )
+			);
+		}
+		this.stringStart = this.tableStart + this.stringOffset;
+	}
+	get( nameID ) {
+		let record = this.nameRecords.find(
+			( record ) => record.nameID === nameID
+		);
+		if ( record ) return record.string;
+	}
+}
+class LangTagRecord {
+	constructor( length, offset ) {
+		this.length = length;
+		this.offset = offset;
+	}
+}
+class NameRecord {
+	constructor( p, nameTable ) {
+		this.platformID = p.uint16;
+		this.encodingID = p.uint16;
+		this.languageID = p.uint16;
+		this.nameID = p.uint16;
+		this.length = p.uint16;
+		this.offset = p.Offset16;
+		lazy$1( this, `string`, () => {
+			p.currentPosition = nameTable.stringStart + this.offset;
+			return decodeString( p, this );
+		} );
+	}
+}
+function decodeString( p, record ) {
+	const { platformID: platformID, length: length } = record;
+	if ( length === 0 ) return ``;
+	if ( platformID === 0 || platformID === 3 ) {
+		const str = [];
+		for ( let i = 0, e = length / 2; i < e; i++ )
+			str[ i ] = String.fromCharCode( p.uint16 );
+		return str.join( `` );
+	}
+	const bytes = p.readBytes( length );
+	const str = [];
+	bytes.forEach( function ( b, i ) {
+		str[ i ] = String.fromCharCode( b );
+	} );
+	return str.join( `` );
+}
+var name$1 = Object.freeze( { __proto__: null, name: name } );
+class OS2 extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.xAvgCharWidth = p.int16;
+		this.usWeightClass = p.uint16;
+		this.usWidthClass = p.uint16;
+		this.fsType = p.uint16;
+		this.ySubscriptXSize = p.int16;
+		this.ySubscriptYSize = p.int16;
+		this.ySubscriptXOffset = p.int16;
+		this.ySubscriptYOffset = p.int16;
+		this.ySuperscriptXSize = p.int16;
+		this.ySuperscriptYSize = p.int16;
+		this.ySuperscriptXOffset = p.int16;
+		this.ySuperscriptYOffset = p.int16;
+		this.yStrikeoutSize = p.int16;
+		this.yStrikeoutPosition = p.int16;
+		this.sFamilyClass = p.int16;
+		this.panose = [ ...new Array( 10 ) ].map( ( _ ) => p.uint8 );
+		this.ulUnicodeRange1 = p.flags( 32 );
+		this.ulUnicodeRange2 = p.flags( 32 );
+		this.ulUnicodeRange3 = p.flags( 32 );
+		this.ulUnicodeRange4 = p.flags( 32 );
+		this.achVendID = p.tag;
+		this.fsSelection = p.uint16;
+		this.usFirstCharIndex = p.uint16;
+		this.usLastCharIndex = p.uint16;
+		this.sTypoAscender = p.int16;
+		this.sTypoDescender = p.int16;
+		this.sTypoLineGap = p.int16;
+		this.usWinAscent = p.uint16;
+		this.usWinDescent = p.uint16;
+		if ( this.version === 0 ) return p.verifyLength();
+		this.ulCodePageRange1 = p.flags( 32 );
+		this.ulCodePageRange2 = p.flags( 32 );
+		if ( this.version === 1 ) return p.verifyLength();
+		this.sxHeight = p.int16;
+		this.sCapHeight = p.int16;
+		this.usDefaultChar = p.uint16;
+		this.usBreakChar = p.uint16;
+		this.usMaxContext = p.uint16;
+		if ( this.version <= 4 ) return p.verifyLength();
+		this.usLowerOpticalPointSize = p.uint16;
+		this.usUpperOpticalPointSize = p.uint16;
+		if ( this.version === 5 ) return p.verifyLength();
+	}
+}
+var OS2$1 = Object.freeze( { __proto__: null, OS2: OS2 } );
+class post extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.legacyFixed;
+		this.italicAngle = p.fixed;
+		this.underlinePosition = p.fword;
+		this.underlineThickness = p.fword;
+		this.isFixedPitch = p.uint32;
+		this.minMemType42 = p.uint32;
+		this.maxMemType42 = p.uint32;
+		this.minMemType1 = p.uint32;
+		this.maxMemType1 = p.uint32;
+		if ( this.version === 1 || this.version === 3 ) return p.verifyLength();
+		this.numGlyphs = p.uint16;
+		if ( this.version === 2 ) {
+			this.glyphNameIndex = [ ...new Array( this.numGlyphs ) ].map(
+				( _ ) => p.uint16
+			);
+			this.namesOffset = p.currentPosition;
+			this.glyphNameOffsets = [ 1 ];
+			for ( let i = 0; i < this.numGlyphs; i++ ) {
+				let index = this.glyphNameIndex[ i ];
+				if ( index < macStrings.length ) {
+					this.glyphNameOffsets.push( this.glyphNameOffsets[ i ] );
+					continue;
+				}
+				let bytelength = p.int8;
+				p.skip( bytelength );
+				this.glyphNameOffsets.push(
+					this.glyphNameOffsets[ i ] + bytelength + 1
+				);
+			}
+		}
+		if ( this.version === 2.5 ) {
+			this.offset = [ ...new Array( this.numGlyphs ) ].map(
+				( _ ) => p.int8
+			);
+		}
+	}
+	getGlyphName( glyphid ) {
+		if ( this.version !== 2 ) {
+			console.warn(
+				`post table version ${ this.version } does not support glyph name lookups`
+			);
+			return ``;
+		}
+		let index = this.glyphNameIndex[ glyphid ];
+		if ( index < 258 ) return macStrings[ index ];
+		let offset = this.glyphNameOffsets[ glyphid ];
+		let next = this.glyphNameOffsets[ glyphid + 1 ];
+		let len = next - offset - 1;
+		if ( len === 0 ) return `.notdef.`;
+		this.parser.currentPosition = this.namesOffset + offset;
+		const data = this.parser.readBytes(
+			len,
+			this.namesOffset + offset,
+			8,
+			true
+		);
+		return data.map( ( b ) => String.fromCharCode( b ) ).join( `` );
+	}
+}
+const macStrings = [
+	`.notdef`,
+	`.null`,
+	`nonmarkingreturn`,
+	`space`,
+	`exclam`,
+	`quotedbl`,
+	`numbersign`,
+	`dollar`,
+	`percent`,
+	`ampersand`,
+	`quotesingle`,
+	`parenleft`,
+	`parenright`,
+	`asterisk`,
+	`plus`,
+	`comma`,
+	`hyphen`,
+	`period`,
+	`slash`,
+	`zero`,
+	`one`,
+	`two`,
+	`three`,
+	`four`,
+	`five`,
+	`six`,
+	`seven`,
+	`eight`,
+	`nine`,
+	`colon`,
+	`semicolon`,
+	`less`,
+	`equal`,
+	`greater`,
+	`question`,
+	`at`,
+	`A`,
+	`B`,
+	`C`,
+	`D`,
+	`E`,
+	`F`,
+	`G`,
+	`H`,
+	`I`,
+	`J`,
+	`K`,
+	`L`,
+	`M`,
+	`N`,
+	`O`,
+	`P`,
+	`Q`,
+	`R`,
+	`S`,
+	`T`,
+	`U`,
+	`V`,
+	`W`,
+	`X`,
+	`Y`,
+	`Z`,
+	`bracketleft`,
+	`backslash`,
+	`bracketright`,
+	`asciicircum`,
+	`underscore`,
+	`grave`,
+	`a`,
+	`b`,
+	`c`,
+	`d`,
+	`e`,
+	`f`,
+	`g`,
+	`h`,
+	`i`,
+	`j`,
+	`k`,
+	`l`,
+	`m`,
+	`n`,
+	`o`,
+	`p`,
+	`q`,
+	`r`,
+	`s`,
+	`t`,
+	`u`,
+	`v`,
+	`w`,
+	`x`,
+	`y`,
+	`z`,
+	`braceleft`,
+	`bar`,
+	`braceright`,
+	`asciitilde`,
+	`Adieresis`,
+	`Aring`,
+	`Ccedilla`,
+	`Eacute`,
+	`Ntilde`,
+	`Odieresis`,
+	`Udieresis`,
+	`aacute`,
+	`agrave`,
+	`acircumflex`,
+	`adieresis`,
+	`atilde`,
+	`aring`,
+	`ccedilla`,
+	`eacute`,
+	`egrave`,
+	`ecircumflex`,
+	`edieresis`,
+	`iacute`,
+	`igrave`,
+	`icircumflex`,
+	`idieresis`,
+	`ntilde`,
+	`oacute`,
+	`ograve`,
+	`ocircumflex`,
+	`odieresis`,
+	`otilde`,
+	`uacute`,
+	`ugrave`,
+	`ucircumflex`,
+	`udieresis`,
+	`dagger`,
+	`degree`,
+	`cent`,
+	`sterling`,
+	`section`,
+	`bullet`,
+	`paragraph`,
+	`germandbls`,
+	`registered`,
+	`copyright`,
+	`trademark`,
+	`acute`,
+	`dieresis`,
+	`notequal`,
+	`AE`,
+	`Oslash`,
+	`infinity`,
+	`plusminus`,
+	`lessequal`,
+	`greaterequal`,
+	`yen`,
+	`mu`,
+	`partialdiff`,
+	`summation`,
+	`product`,
+	`pi`,
+	`integral`,
+	`ordfeminine`,
+	`ordmasculine`,
+	`Omega`,
+	`ae`,
+	`oslash`,
+	`questiondown`,
+	`exclamdown`,
+	`logicalnot`,
+	`radical`,
+	`florin`,
+	`approxequal`,
+	`Delta`,
+	`guillemotleft`,
+	`guillemotright`,
+	`ellipsis`,
+	`nonbreakingspace`,
+	`Agrave`,
+	`Atilde`,
+	`Otilde`,
+	`OE`,
+	`oe`,
+	`endash`,
+	`emdash`,
+	`quotedblleft`,
+	`quotedblright`,
+	`quoteleft`,
+	`quoteright`,
+	`divide`,
+	`lozenge`,
+	`ydieresis`,
+	`Ydieresis`,
+	`fraction`,
+	`currency`,
+	`guilsinglleft`,
+	`guilsinglright`,
+	`fi`,
+	`fl`,
+	`daggerdbl`,
+	`periodcentered`,
+	`quotesinglbase`,
+	`quotedblbase`,
+	`perthousand`,
+	`Acircumflex`,
+	`Ecircumflex`,
+	`Aacute`,
+	`Edieresis`,
+	`Egrave`,
+	`Iacute`,
+	`Icircumflex`,
+	`Idieresis`,
+	`Igrave`,
+	`Oacute`,
+	`Ocircumflex`,
+	`apple`,
+	`Ograve`,
+	`Uacute`,
+	`Ucircumflex`,
+	`Ugrave`,
+	`dotlessi`,
+	`circumflex`,
+	`tilde`,
+	`macron`,
+	`breve`,
+	`dotaccent`,
+	`ring`,
+	`cedilla`,
+	`hungarumlaut`,
+	`ogonek`,
+	`caron`,
+	`Lslash`,
+	`lslash`,
+	`Scaron`,
+	`scaron`,
+	`Zcaron`,
+	`zcaron`,
+	`brokenbar`,
+	`Eth`,
+	`eth`,
+	`Yacute`,
+	`yacute`,
+	`Thorn`,
+	`thorn`,
+	`minus`,
+	`multiply`,
+	`onesuperior`,
+	`twosuperior`,
+	`threesuperior`,
+	`onehalf`,
+	`onequarter`,
+	`threequarters`,
+	`franc`,
+	`Gbreve`,
+	`gbreve`,
+	`Idotaccent`,
+	`Scedilla`,
+	`scedilla`,
+	`Cacute`,
+	`cacute`,
+	`Ccaron`,
+	`ccaron`,
+	`dcroat`,
+];
+var post$1 = Object.freeze( { __proto__: null, post: post } );
+class BASE extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.horizAxisOffset = p.Offset16;
+		this.vertAxisOffset = p.Offset16;
+		lazy$1(
+			this,
+			`horizAxis`,
+			() =>
+				new AxisTable(
+					{ offset: dict.offset + this.horizAxisOffset },
+					dataview
+				)
+		);
+		lazy$1(
+			this,
+			`vertAxis`,
+			() =>
+				new AxisTable(
+					{ offset: dict.offset + this.vertAxisOffset },
+					dataview
+				)
+		);
+		if ( this.majorVersion === 1 && this.minorVersion === 1 ) {
+			this.itemVarStoreOffset = p.Offset32;
+			lazy$1(
+				this,
+				`itemVarStore`,
+				() =>
+					new AxisTable(
+						{ offset: dict.offset + this.itemVarStoreOffset },
+						dataview
+					)
+			);
+		}
+	}
+}
+class AxisTable extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview, `AxisTable` );
+		this.baseTagListOffset = p.Offset16;
+		this.baseScriptListOffset = p.Offset16;
+		lazy$1(
+			this,
+			`baseTagList`,
+			() =>
+				new BaseTagListTable(
+					{ offset: dict.offset + this.baseTagListOffset },
+					dataview
+				)
+		);
+		lazy$1(
+			this,
+			`baseScriptList`,
+			() =>
+				new BaseScriptListTable(
+					{ offset: dict.offset + this.baseScriptListOffset },
+					dataview
+				)
+		);
+	}
+}
+class BaseTagListTable extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview, `BaseTagListTable` );
+		this.baseTagCount = p.uint16;
+		this.baselineTags = [ ...new Array( this.baseTagCount ) ].map(
+			( _ ) => p.tag
+		);
+	}
+}
+class BaseScriptListTable extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview, `BaseScriptListTable` );
+		this.baseScriptCount = p.uint16;
+		const recordStart = p.currentPosition;
+		lazy$1( this, `baseScriptRecords`, () => {
+			p.currentPosition = recordStart;
+			return [ ...new Array( this.baseScriptCount ) ].map(
+				( _ ) => new BaseScriptRecord( this.start, p )
+			);
+		} );
+	}
+}
+class BaseScriptRecord {
+	constructor( baseScriptListTableStart, p ) {
+		this.baseScriptTag = p.tag;
+		this.baseScriptOffset = p.Offset16;
+		lazy$1( this, `baseScriptTable`, () => {
+			p.currentPosition =
+				baseScriptListTableStart + this.baseScriptOffset;
+			return new BaseScriptTable( p );
+		} );
+	}
+}
+class BaseScriptTable {
+	constructor( p ) {
+		this.start = p.currentPosition;
+		this.baseValuesOffset = p.Offset16;
+		this.defaultMinMaxOffset = p.Offset16;
+		this.baseLangSysCount = p.uint16;
+		this.baseLangSysRecords = [ ...new Array( this.baseLangSysCount ) ].map(
+			( _ ) => new BaseLangSysRecord( this.start, p )
+		);
+		lazy$1( this, `baseValues`, () => {
+			p.currentPosition = this.start + this.baseValuesOffset;
+			return new BaseValuesTable( p );
+		} );
+		lazy$1( this, `defaultMinMax`, () => {
+			p.currentPosition = this.start + this.defaultMinMaxOffset;
+			return new MinMaxTable( p );
+		} );
+	}
+}
+class BaseLangSysRecord {
+	constructor( baseScriptTableStart, p ) {
+		this.baseLangSysTag = p.tag;
+		this.minMaxOffset = p.Offset16;
+		lazy$1( this, `minMax`, () => {
+			p.currentPosition = baseScriptTableStart + this.minMaxOffset;
+			return new MinMaxTable( p );
+		} );
+	}
+}
+class BaseValuesTable {
+	constructor( p ) {
+		this.parser = p;
+		this.start = p.currentPosition;
+		this.defaultBaselineIndex = p.uint16;
+		this.baseCoordCount = p.uint16;
+		this.baseCoords = [ ...new Array( this.baseCoordCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getTable( id ) {
+		this.parser.currentPosition = this.start + this.baseCoords[ id ];
+		return new BaseCoordTable( this.parser );
+	}
+}
+class MinMaxTable {
+	constructor( p ) {
+		this.minCoord = p.Offset16;
+		this.maxCoord = p.Offset16;
+		this.featMinMaxCount = p.uint16;
+		const recordStart = p.currentPosition;
+		lazy$1( this, `featMinMaxRecords`, () => {
+			p.currentPosition = recordStart;
+			return [ ...new Array( this.featMinMaxCount ) ].map(
+				( _ ) => new FeatMinMaxRecord( p )
+			);
+		} );
+	}
+}
+class FeatMinMaxRecord {
+	constructor( p ) {
+		this.featureTableTag = p.tag;
+		this.minCoord = p.Offset16;
+		this.maxCoord = p.Offset16;
+	}
+}
+class BaseCoordTable {
+	constructor( p ) {
+		this.baseCoordFormat = p.uint16;
+		this.coordinate = p.int16;
+		if ( this.baseCoordFormat === 2 ) {
+			this.referenceGlyph = p.uint16;
+			this.baseCoordPoint = p.uint16;
+		}
+		if ( this.baseCoordFormat === 3 ) {
+			this.deviceTable = p.Offset16;
+		}
+	}
+}
+var BASE$1 = Object.freeze( { __proto__: null, BASE: BASE } );
+class ClassDefinition {
+	constructor( p ) {
+		this.classFormat = p.uint16;
+		if ( this.classFormat === 1 ) {
+			this.startGlyphID = p.uint16;
+			this.glyphCount = p.uint16;
+			this.classValueArray = [ ...new Array( this.glyphCount ) ].map(
+				( _ ) => p.uint16
+			);
+		}
+		if ( this.classFormat === 2 ) {
+			this.classRangeCount = p.uint16;
+			this.classRangeRecords = [
+				...new Array( this.classRangeCount ),
+			].map( ( _ ) => new ClassRangeRecord( p ) );
+		}
+	}
+}
+class ClassRangeRecord {
+	constructor( p ) {
+		this.startGlyphID = p.uint16;
+		this.endGlyphID = p.uint16;
+		this.class = p.uint16;
+	}
+}
+class CoverageTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.coverageFormat = p.uint16;
+		if ( this.coverageFormat === 1 ) {
+			this.glyphCount = p.uint16;
+			this.glyphArray = [ ...new Array( this.glyphCount ) ].map(
+				( _ ) => p.uint16
+			);
+		}
+		if ( this.coverageFormat === 2 ) {
+			this.rangeCount = p.uint16;
+			this.rangeRecords = [ ...new Array( this.rangeCount ) ].map(
+				( _ ) => new CoverageRangeRecord( p )
+			);
+		}
+	}
+}
+class CoverageRangeRecord {
+	constructor( p ) {
+		this.startGlyphID = p.uint16;
+		this.endGlyphID = p.uint16;
+		this.startCoverageIndex = p.uint16;
+	}
+}
+class ItemVariationStoreTable {
+	constructor( table, p ) {
+		this.table = table;
+		this.parser = p;
+		this.start = p.currentPosition;
+		this.format = p.uint16;
+		this.variationRegionListOffset = p.Offset32;
+		this.itemVariationDataCount = p.uint16;
+		this.itemVariationDataOffsets = [
+			...new Array( this.itemVariationDataCount ),
+		].map( ( _ ) => p.Offset32 );
+	}
+}
+class GDEF extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.glyphClassDefOffset = p.Offset16;
+		lazy$1( this, `glyphClassDefs`, () => {
+			if ( this.glyphClassDefOffset === 0 ) return undefined;
+			p.currentPosition = this.tableStart + this.glyphClassDefOffset;
+			return new ClassDefinition( p );
+		} );
+		this.attachListOffset = p.Offset16;
+		lazy$1( this, `attachList`, () => {
+			if ( this.attachListOffset === 0 ) return undefined;
+			p.currentPosition = this.tableStart + this.attachListOffset;
+			return new AttachList( p );
+		} );
+		this.ligCaretListOffset = p.Offset16;
+		lazy$1( this, `ligCaretList`, () => {
+			if ( this.ligCaretListOffset === 0 ) return undefined;
+			p.currentPosition = this.tableStart + this.ligCaretListOffset;
+			return new LigCaretList( p );
+		} );
+		this.markAttachClassDefOffset = p.Offset16;
+		lazy$1( this, `markAttachClassDef`, () => {
+			if ( this.markAttachClassDefOffset === 0 ) return undefined;
+			p.currentPosition = this.tableStart + this.markAttachClassDefOffset;
+			return new ClassDefinition( p );
+		} );
+		if ( this.minorVersion >= 2 ) {
+			this.markGlyphSetsDefOffset = p.Offset16;
+			lazy$1( this, `markGlyphSetsDef`, () => {
+				if ( this.markGlyphSetsDefOffset === 0 ) return undefined;
+				p.currentPosition =
+					this.tableStart + this.markGlyphSetsDefOffset;
+				return new MarkGlyphSetsTable( p );
+			} );
+		}
+		if ( this.minorVersion === 3 ) {
+			this.itemVarStoreOffset = p.Offset32;
+			lazy$1( this, `itemVarStore`, () => {
+				if ( this.itemVarStoreOffset === 0 ) return undefined;
+				p.currentPosition = this.tableStart + this.itemVarStoreOffset;
+				return new ItemVariationStoreTable( p );
+			} );
+		}
+	}
+}
+class AttachList extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.coverageOffset = p.Offset16;
+		this.glyphCount = p.uint16;
+		this.attachPointOffsets = [ ...new Array( this.glyphCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getPoint( pointID ) {
+		this.parser.currentPosition =
+			this.start + this.attachPointOffsets[ pointID ];
+		return new AttachPoint( this.parser );
+	}
+}
+class AttachPoint {
+	constructor( p ) {
+		this.pointCount = p.uint16;
+		this.pointIndices = [ ...new Array( this.pointCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+class LigCaretList extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.coverageOffset = p.Offset16;
+		lazy$1( this, `coverage`, () => {
+			p.currentPosition = this.start + this.coverageOffset;
+			return new CoverageTable( p );
+		} );
+		this.ligGlyphCount = p.uint16;
+		this.ligGlyphOffsets = [ ...new Array( this.ligGlyphCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getLigGlyph( ligGlyphID ) {
+		this.parser.currentPosition =
+			this.start + this.ligGlyphOffsets[ ligGlyphID ];
+		return new LigGlyph( this.parser );
+	}
+}
+class LigGlyph extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.caretCount = p.uint16;
+		this.caretValueOffsets = [ ...new Array( this.caretCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getCaretValue( caretID ) {
+		this.parser.currentPosition =
+			this.start + this.caretValueOffsets[ caretID ];
+		return new CaretValue( this.parser );
+	}
+}
+class CaretValue {
+	constructor( p ) {
+		this.caretValueFormat = p.uint16;
+		if ( this.caretValueFormat === 1 ) {
+			this.coordinate = p.int16;
+		}
+		if ( this.caretValueFormat === 2 ) {
+			this.caretValuePointIndex = p.uint16;
+		}
+		if ( this.caretValueFormat === 3 ) {
+			this.coordinate = p.int16;
+			this.deviceOffset = p.Offset16;
+		}
+	}
+}
+class MarkGlyphSetsTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.markGlyphSetTableFormat = p.uint16;
+		this.markGlyphSetCount = p.uint16;
+		this.coverageOffsets = [ ...new Array( this.markGlyphSetCount ) ].map(
+			( _ ) => p.Offset32
+		);
+	}
+	getMarkGlyphSet( markGlyphSetID ) {
+		this.parser.currentPosition =
+			this.start + this.coverageOffsets[ markGlyphSetID ];
+		return new CoverageTable( this.parser );
+	}
+}
+var GDEF$1 = Object.freeze( { __proto__: null, GDEF: GDEF } );
+class ScriptList extends ParsedData {
+	static EMPTY = { scriptCount: 0, scriptRecords: [] };
+	constructor( p ) {
+		super( p );
+		this.scriptCount = p.uint16;
+		this.scriptRecords = [ ...new Array( this.scriptCount ) ].map(
+			( _ ) => new ScriptRecord( p )
+		);
+	}
+}
+class ScriptRecord {
+	constructor( p ) {
+		this.scriptTag = p.tag;
+		this.scriptOffset = p.Offset16;
+	}
+}
+class ScriptTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.defaultLangSys = p.Offset16;
+		this.langSysCount = p.uint16;
+		this.langSysRecords = [ ...new Array( this.langSysCount ) ].map(
+			( _ ) => new LangSysRecord( p )
+		);
+	}
+}
+class LangSysRecord {
+	constructor( p ) {
+		this.langSysTag = p.tag;
+		this.langSysOffset = p.Offset16;
+	}
+}
+class LangSysTable {
+	constructor( p ) {
+		this.lookupOrder = p.Offset16;
+		this.requiredFeatureIndex = p.uint16;
+		this.featureIndexCount = p.uint16;
+		this.featureIndices = [ ...new Array( this.featureIndexCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+class FeatureList extends ParsedData {
+	static EMPTY = { featureCount: 0, featureRecords: [] };
+	constructor( p ) {
+		super( p );
+		this.featureCount = p.uint16;
+		this.featureRecords = [ ...new Array( this.featureCount ) ].map(
+			( _ ) => new FeatureRecord( p )
+		);
+	}
+}
+class FeatureRecord {
+	constructor( p ) {
+		this.featureTag = p.tag;
+		this.featureOffset = p.Offset16;
+	}
+}
+class FeatureTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.featureParams = p.Offset16;
+		this.lookupIndexCount = p.uint16;
+		this.lookupListIndices = [ ...new Array( this.lookupIndexCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+	getFeatureParams() {
+		if ( this.featureParams > 0 ) {
+			const p = this.parser;
+			p.currentPosition = this.start + this.featureParams;
+			const tag = this.featureTag;
+			if ( tag === `size` ) return new Size( p );
+			if ( tag.startsWith( `cc` ) ) return new CharacterVariant( p );
+			if ( tag.startsWith( `ss` ) ) return new StylisticSet( p );
+		}
+	}
+}
+class CharacterVariant {
+	constructor( p ) {
+		this.format = p.uint16;
+		this.featUiLabelNameId = p.uint16;
+		this.featUiTooltipTextNameId = p.uint16;
+		this.sampleTextNameId = p.uint16;
+		this.numNamedParameters = p.uint16;
+		this.firstParamUiLabelNameId = p.uint16;
+		this.charCount = p.uint16;
+		this.character = [ ...new Array( this.charCount ) ].map(
+			( _ ) => p.uint24
+		);
+	}
+}
+class Size {
+	constructor( p ) {
+		this.designSize = p.uint16;
+		this.subfamilyIdentifier = p.uint16;
+		this.subfamilyNameID = p.uint16;
+		this.smallEnd = p.uint16;
+		this.largeEnd = p.uint16;
+	}
+}
+class StylisticSet {
+	constructor( p ) {
+		this.version = p.uint16;
+		this.UINameID = p.uint16;
+	}
+}
+function undoCoverageOffsetParsing( instance ) {
+	instance.parser.currentPosition -= 2;
+	delete instance.coverageOffset;
+	delete instance.getCoverageTable;
+}
+class LookupType$1 extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.substFormat = p.uint16;
+		this.coverageOffset = p.Offset16;
+	}
+	getCoverageTable() {
+		let p = this.parser;
+		p.currentPosition = this.start + this.coverageOffset;
+		return new CoverageTable( p );
+	}
+}
+class SubstLookupRecord {
+	constructor( p ) {
+		this.glyphSequenceIndex = p.uint16;
+		this.lookupListIndex = p.uint16;
+	}
+}
+class LookupType1$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		this.deltaGlyphID = p.int16;
+	}
+}
+class LookupType2$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		this.sequenceCount = p.uint16;
+		this.sequenceOffsets = [ ...new Array( this.sequenceCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getSequence( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.sequenceOffsets[ index ];
+		return new SequenceTable( p );
+	}
+}
+class SequenceTable {
+	constructor( p ) {
+		this.glyphCount = p.uint16;
+		this.substituteGlyphIDs = [ ...new Array( this.glyphCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+class LookupType3$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		this.alternateSetCount = p.uint16;
+		this.alternateSetOffsets = [
+			...new Array( this.alternateSetCount ),
+		].map( ( _ ) => p.Offset16 );
+	}
+	getAlternateSet( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.alternateSetOffsets[ index ];
+		return new AlternateSetTable( p );
+	}
+}
+class AlternateSetTable {
+	constructor( p ) {
+		this.glyphCount = p.uint16;
+		this.alternateGlyphIDs = [ ...new Array( this.glyphCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+class LookupType4$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		this.ligatureSetCount = p.uint16;
+		this.ligatureSetOffsets = [ ...new Array( this.ligatureSetCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getLigatureSet( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.ligatureSetOffsets[ index ];
+		return new LigatureSetTable( p );
+	}
+}
+class LigatureSetTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.ligatureCount = p.uint16;
+		this.ligatureOffsets = [ ...new Array( this.ligatureCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getLigature( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.ligatureOffsets[ index ];
+		return new LigatureTable( p );
+	}
+}
+class LigatureTable {
+	constructor( p ) {
+		this.ligatureGlyph = p.uint16;
+		this.componentCount = p.uint16;
+		this.componentGlyphIDs = [
+			...new Array( this.componentCount - 1 ),
+		].map( ( _ ) => p.uint16 );
+	}
+}
+class LookupType5$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		if ( this.substFormat === 1 ) {
+			this.subRuleSetCount = p.uint16;
+			this.subRuleSetOffsets = [
+				...new Array( this.subRuleSetCount ),
+			].map( ( _ ) => p.Offset16 );
+		}
+		if ( this.substFormat === 2 ) {
+			this.classDefOffset = p.Offset16;
+			this.subClassSetCount = p.uint16;
+			this.subClassSetOffsets = [
+				...new Array( this.subClassSetCount ),
+			].map( ( _ ) => p.Offset16 );
+		}
+		if ( this.substFormat === 3 ) {
+			undoCoverageOffsetParsing( this );
+			this.glyphCount = p.uint16;
+			this.substitutionCount = p.uint16;
+			this.coverageOffsets = [ ...new Array( this.glyphCount ) ].map(
+				( _ ) => p.Offset16
+			);
+			this.substLookupRecords = [
+				...new Array( this.substitutionCount ),
+			].map( ( _ ) => new SubstLookupRecord( p ) );
+		}
+	}
+	getSubRuleSet( index ) {
+		if ( this.substFormat !== 1 )
+			throw new Error(
+				`lookup type 5.${ this.substFormat } has no subrule sets.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + this.subRuleSetOffsets[ index ];
+		return new SubRuleSetTable( p );
+	}
+	getSubClassSet( index ) {
+		if ( this.substFormat !== 2 )
+			throw new Error(
+				`lookup type 5.${ this.substFormat } has no subclass sets.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + this.subClassSetOffsets[ index ];
+		return new SubClassSetTable( p );
+	}
+	getCoverageTable( index ) {
+		if ( this.substFormat !== 3 && ! index )
+			return super.getCoverageTable();
+		if ( ! index )
+			throw new Error(
+				`lookup type 5.${ this.substFormat } requires an coverage table index.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + this.coverageOffsets[ index ];
+		return new CoverageTable( p );
+	}
+}
+class SubRuleSetTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.subRuleCount = p.uint16;
+		this.subRuleOffsets = [ ...new Array( this.subRuleCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+	getSubRule( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.subRuleOffsets[ index ];
+		return new SubRuleTable( p );
+	}
+}
+class SubRuleTable {
+	constructor( p ) {
+		this.glyphCount = p.uint16;
+		this.substitutionCount = p.uint16;
+		this.inputSequence = [ ...new Array( this.glyphCount - 1 ) ].map(
+			( _ ) => p.uint16
+		);
+		this.substLookupRecords = [
+			...new Array( this.substitutionCount ),
+		].map( ( _ ) => new SubstLookupRecord( p ) );
+	}
+}
+class SubClassSetTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.subClassRuleCount = p.uint16;
+		this.subClassRuleOffsets = [
+			...new Array( this.subClassRuleCount ),
+		].map( ( _ ) => p.Offset16 );
+	}
+	getSubClass( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.subClassRuleOffsets[ index ];
+		return new SubClassRuleTable( p );
+	}
+}
+class SubClassRuleTable extends SubRuleTable {
+	constructor( p ) {
+		super( p );
+	}
+}
+class LookupType6$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		if ( this.substFormat === 1 ) {
+			this.chainSubRuleSetCount = p.uint16;
+			this.chainSubRuleSetOffsets = [
+				...new Array( this.chainSubRuleSetCount ),
+			].map( ( _ ) => p.Offset16 );
+		}
+		if ( this.substFormat === 2 ) {
+			this.backtrackClassDefOffset = p.Offset16;
+			this.inputClassDefOffset = p.Offset16;
+			this.lookaheadClassDefOffset = p.Offset16;
+			this.chainSubClassSetCount = p.uint16;
+			this.chainSubClassSetOffsets = [
+				...new Array( this.chainSubClassSetCount ),
+			].map( ( _ ) => p.Offset16 );
+		}
+		if ( this.substFormat === 3 ) {
+			undoCoverageOffsetParsing( this );
+			this.backtrackGlyphCount = p.uint16;
+			this.backtrackCoverageOffsets = [
+				...new Array( this.backtrackGlyphCount ),
+			].map( ( _ ) => p.Offset16 );
+			this.inputGlyphCount = p.uint16;
+			this.inputCoverageOffsets = [
+				...new Array( this.inputGlyphCount ),
+			].map( ( _ ) => p.Offset16 );
+			this.lookaheadGlyphCount = p.uint16;
+			this.lookaheadCoverageOffsets = [
+				...new Array( this.lookaheadGlyphCount ),
+			].map( ( _ ) => p.Offset16 );
+			this.seqLookupCount = p.uint16;
+			this.seqLookupRecords = [
+				...new Array( this.substitutionCount ),
+			].map( ( _ ) => new SequenceLookupRecord( p ) );
+		}
+	}
+	getChainSubRuleSet( index ) {
+		if ( this.substFormat !== 1 )
+			throw new Error(
+				`lookup type 6.${ this.substFormat } has no chainsubrule sets.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + this.chainSubRuleSetOffsets[ index ];
+		return new ChainSubRuleSetTable( p );
+	}
+	getChainSubClassSet( index ) {
+		if ( this.substFormat !== 2 )
+			throw new Error(
+				`lookup type 6.${ this.substFormat } has no chainsubclass sets.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + this.chainSubClassSetOffsets[ index ];
+		return new ChainSubClassSetTable( p );
+	}
+	getCoverageFromOffset( offset ) {
+		if ( this.substFormat !== 3 )
+			throw new Error(
+				`lookup type 6.${ this.substFormat } does not use contextual coverage offsets.`
+			);
+		let p = this.parser;
+		p.currentPosition = this.start + offset;
+		return new CoverageTable( p );
+	}
+}
+class ChainSubRuleSetTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.chainSubRuleCount = p.uint16;
+		this.chainSubRuleOffsets = [
+			...new Array( this.chainSubRuleCount ),
+		].map( ( _ ) => p.Offset16 );
+	}
+	getSubRule( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.chainSubRuleOffsets[ index ];
+		return new ChainSubRuleTable( p );
+	}
+}
+class ChainSubRuleTable {
+	constructor( p ) {
+		this.backtrackGlyphCount = p.uint16;
+		this.backtrackSequence = [
+			...new Array( this.backtrackGlyphCount ),
+		].map( ( _ ) => p.uint16 );
+		this.inputGlyphCount = p.uint16;
+		this.inputSequence = [ ...new Array( this.inputGlyphCount - 1 ) ].map(
+			( _ ) => p.uint16
+		);
+		this.lookaheadGlyphCount = p.uint16;
+		this.lookAheadSequence = [
+			...new Array( this.lookAheadGlyphCount ),
+		].map( ( _ ) => p.uint16 );
+		this.substitutionCount = p.uint16;
+		this.substLookupRecords = [ ...new Array( this.SubstCount ) ].map(
+			( _ ) => new SubstLookupRecord( p )
+		);
+	}
+}
+class ChainSubClassSetTable extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.chainSubClassRuleCount = p.uint16;
+		this.chainSubClassRuleOffsets = [
+			...new Array( this.chainSubClassRuleCount ),
+		].map( ( _ ) => p.Offset16 );
+	}
+	getSubClass( index ) {
+		let p = this.parser;
+		p.currentPosition = this.start + this.chainSubRuleOffsets[ index ];
+		return new ChainSubClassRuleTable( p );
+	}
+}
+class ChainSubClassRuleTable {
+	constructor( p ) {
+		this.backtrackGlyphCount = p.uint16;
+		this.backtrackSequence = [
+			...new Array( this.backtrackGlyphCount ),
+		].map( ( _ ) => p.uint16 );
+		this.inputGlyphCount = p.uint16;
+		this.inputSequence = [ ...new Array( this.inputGlyphCount - 1 ) ].map(
+			( _ ) => p.uint16
+		);
+		this.lookaheadGlyphCount = p.uint16;
+		this.lookAheadSequence = [
+			...new Array( this.lookAheadGlyphCount ),
+		].map( ( _ ) => p.uint16 );
+		this.substitutionCount = p.uint16;
+		this.substLookupRecords = [
+			...new Array( this.substitutionCount ),
+		].map( ( _ ) => new SequenceLookupRecord( p ) );
+	}
+}
+class SequenceLookupRecord extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.sequenceIndex = p.uint16;
+		this.lookupListIndex = p.uint16;
+	}
+}
+class LookupType7$1 extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.substFormat = p.uint16;
+		this.extensionLookupType = p.uint16;
+		this.extensionOffset = p.Offset32;
+	}
+}
+class LookupType8$1 extends LookupType$1 {
+	constructor( p ) {
+		super( p );
+		this.backtrackGlyphCount = p.uint16;
+		this.backtrackCoverageOffsets = [
+			...new Array( this.backtrackGlyphCount ),
+		].map( ( _ ) => p.Offset16 );
+		this.lookaheadGlyphCount = p.uint16;
+		this.lookaheadCoverageOffsets = [
+			new Array( this.lookaheadGlyphCount ),
+		].map( ( _ ) => p.Offset16 );
+		this.glyphCount = p.uint16;
+		this.substituteGlyphIDs = [ ...new Array( this.glyphCount ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+var GSUBtables = {
+	buildSubtable: function ( type, p ) {
+		const subtable = new [
+			undefined,
+			LookupType1$1,
+			LookupType2$1,
+			LookupType3$1,
+			LookupType4$1,
+			LookupType5$1,
+			LookupType6$1,
+			LookupType7$1,
+			LookupType8$1,
+		][ type ]( p );
+		subtable.type = type;
+		return subtable;
+	},
+};
+class LookupType extends ParsedData {
+	constructor( p ) {
+		super( p );
+	}
+}
+class LookupType1 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 1` );
+	}
+}
+class LookupType2 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 2` );
+	}
+}
+class LookupType3 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 3` );
+	}
+}
+class LookupType4 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 4` );
+	}
+}
+class LookupType5 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 5` );
+	}
+}
+class LookupType6 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 6` );
+	}
+}
+class LookupType7 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 7` );
+	}
+}
+class LookupType8 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 8` );
+	}
+}
+class LookupType9 extends LookupType {
+	constructor( p ) {
+		super( p );
+		console.log( `lookup type 9` );
+	}
+}
+var GPOStables = {
+	buildSubtable: function ( type, p ) {
+		const subtable = new [
+			undefined,
+			LookupType1,
+			LookupType2,
+			LookupType3,
+			LookupType4,
+			LookupType5,
+			LookupType6,
+			LookupType7,
+			LookupType8,
+			LookupType9,
+		][ type ]( p );
+		subtable.type = type;
+		return subtable;
+	},
+};
+class LookupList extends ParsedData {
+	static EMPTY = { lookupCount: 0, lookups: [] };
+	constructor( p ) {
+		super( p );
+		this.lookupCount = p.uint16;
+		this.lookups = [ ...new Array( this.lookupCount ) ].map(
+			( _ ) => p.Offset16
+		);
+	}
+}
+class LookupTable extends ParsedData {
+	constructor( p, type ) {
+		super( p );
+		this.ctType = type;
+		this.lookupType = p.uint16;
+		this.lookupFlag = p.uint16;
+		this.subTableCount = p.uint16;
+		this.subtableOffsets = [ ...new Array( this.subTableCount ) ].map(
+			( _ ) => p.Offset16
+		);
+		this.markFilteringSet = p.uint16;
+	}
+	get rightToLeft() {
+		return this.lookupFlag & ( 1 === 1 );
+	}
+	get ignoreBaseGlyphs() {
+		return this.lookupFlag & ( 2 === 2 );
+	}
+	get ignoreLigatures() {
+		return this.lookupFlag & ( 4 === 4 );
+	}
+	get ignoreMarks() {
+		return this.lookupFlag & ( 8 === 8 );
+	}
+	get useMarkFilteringSet() {
+		return this.lookupFlag & ( 16 === 16 );
+	}
+	get markAttachmentType() {
+		return this.lookupFlag & ( 65280 === 65280 );
+	}
+	getSubTable( index ) {
+		const builder = this.ctType === `GSUB` ? GSUBtables : GPOStables;
+		this.parser.currentPosition =
+			this.start + this.subtableOffsets[ index ];
+		return builder.buildSubtable( this.lookupType, this.parser );
+	}
+}
+class CommonLayoutTable extends SimpleTable {
+	constructor( dict, dataview, name ) {
+		const { p: p, tableStart: tableStart } = super( dict, dataview, name );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.scriptListOffset = p.Offset16;
+		this.featureListOffset = p.Offset16;
+		this.lookupListOffset = p.Offset16;
+		if ( this.majorVersion === 1 && this.minorVersion === 1 ) {
+			this.featureVariationsOffset = p.Offset32;
+		}
+		const no_content = ! (
+			this.scriptListOffset ||
+			this.featureListOffset ||
+			this.lookupListOffset
+		);
+		lazy$1( this, `scriptList`, () => {
+			if ( no_content ) return ScriptList.EMPTY;
+			p.currentPosition = tableStart + this.scriptListOffset;
+			return new ScriptList( p );
+		} );
+		lazy$1( this, `featureList`, () => {
+			if ( no_content ) return FeatureList.EMPTY;
+			p.currentPosition = tableStart + this.featureListOffset;
+			return new FeatureList( p );
+		} );
+		lazy$1( this, `lookupList`, () => {
+			if ( no_content ) return LookupList.EMPTY;
+			p.currentPosition = tableStart + this.lookupListOffset;
+			return new LookupList( p );
+		} );
+		if ( this.featureVariationsOffset ) {
+			lazy$1( this, `featureVariations`, () => {
+				if ( no_content ) return FeatureVariations.EMPTY;
+				p.currentPosition = tableStart + this.featureVariationsOffset;
+				return new FeatureVariations( p );
+			} );
+		}
+	}
+	getSupportedScripts() {
+		return this.scriptList.scriptRecords.map( ( r ) => r.scriptTag );
+	}
+	getScriptTable( scriptTag ) {
+		let record = this.scriptList.scriptRecords.find(
+			( r ) => r.scriptTag === scriptTag
+		);
+		this.parser.currentPosition =
+			this.scriptList.start + record.scriptOffset;
+		let table = new ScriptTable( this.parser );
+		table.scriptTag = scriptTag;
+		return table;
+	}
+	ensureScriptTable( arg ) {
+		if ( typeof arg === 'string' ) {
+			return this.getScriptTable( arg );
+		}
+		return arg;
+	}
+	getSupportedLangSys( scriptTable ) {
+		scriptTable = this.ensureScriptTable( scriptTable );
+		const hasDefault = scriptTable.defaultLangSys !== 0;
+		const supported = scriptTable.langSysRecords.map(
+			( l ) => l.langSysTag
+		);
+		if ( hasDefault ) supported.unshift( `dflt` );
+		return supported;
+	}
+	getDefaultLangSysTable( scriptTable ) {
+		scriptTable = this.ensureScriptTable( scriptTable );
+		let offset = scriptTable.defaultLangSys;
+		if ( offset !== 0 ) {
+			this.parser.currentPosition = scriptTable.start + offset;
+			let table = new LangSysTable( this.parser );
+			table.langSysTag = ``;
+			table.defaultForScript = scriptTable.scriptTag;
+			return table;
+		}
+	}
+	getLangSysTable( scriptTable, langSysTag = `dflt` ) {
+		if ( langSysTag === `dflt` )
+			return this.getDefaultLangSysTable( scriptTable );
+		scriptTable = this.ensureScriptTable( scriptTable );
+		let record = scriptTable.langSysRecords.find(
+			( l ) => l.langSysTag === langSysTag
+		);
+		this.parser.currentPosition = scriptTable.start + record.langSysOffset;
+		let table = new LangSysTable( this.parser );
+		table.langSysTag = langSysTag;
+		return table;
+	}
+	getFeatures( langSysTable ) {
+		return langSysTable.featureIndices.map( ( index ) =>
+			this.getFeature( index )
+		);
+	}
+	getFeature( indexOrTag ) {
+		let record;
+		if ( parseInt( indexOrTag ) == indexOrTag ) {
+			record = this.featureList.featureRecords[ indexOrTag ];
+		} else {
+			record = this.featureList.featureRecords.find(
+				( f ) => f.featureTag === indexOrTag
+			);
+		}
+		if ( ! record ) return;
+		this.parser.currentPosition =
+			this.featureList.start + record.featureOffset;
+		let table = new FeatureTable( this.parser );
+		table.featureTag = record.featureTag;
+		return table;
+	}
+	getLookups( featureTable ) {
+		return featureTable.lookupListIndices.map( ( index ) =>
+			this.getLookup( index )
+		);
+	}
+	getLookup( lookupIndex, type ) {
+		let lookupOffset = this.lookupList.lookups[ lookupIndex ];
+		this.parser.currentPosition = this.lookupList.start + lookupOffset;
+		return new LookupTable( this.parser, type );
+	}
+}
+class GSUB extends CommonLayoutTable {
+	constructor( dict, dataview ) {
+		super( dict, dataview, `GSUB` );
+	}
+	getLookup( lookupIndex ) {
+		return super.getLookup( lookupIndex, `GSUB` );
+	}
+}
+var GSUB$1 = Object.freeze( { __proto__: null, GSUB: GSUB } );
+class GPOS extends CommonLayoutTable {
+	constructor( dict, dataview ) {
+		super( dict, dataview, `GPOS` );
+	}
+	getLookup( lookupIndex ) {
+		return super.getLookup( lookupIndex, `GPOS` );
+	}
+}
+var GPOS$1 = Object.freeze( { __proto__: null, GPOS: GPOS } );
+class SVG extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.offsetToSVGDocumentList = p.Offset32;
+		p.currentPosition = this.tableStart + this.offsetToSVGDocumentList;
+		this.documentList = new SVGDocumentList( p );
+	}
+}
+class SVGDocumentList extends ParsedData {
+	constructor( p ) {
+		super( p );
+		this.numEntries = p.uint16;
+		this.documentRecords = [ ...new Array( this.numEntries ) ].map(
+			( _ ) => new SVGDocumentRecord( p )
+		);
+	}
+	getDocument( documentID ) {
+		let record = this.documentRecords[ documentID ];
+		if ( ! record ) return '';
+		let offset = this.start + record.svgDocOffset;
+		this.parser.currentPosition = offset;
+		return this.parser.readBytes( record.svgDocLength );
+	}
+	getDocumentForGlyph( glyphID ) {
+		let id = this.documentRecords.findIndex(
+			( d ) => d.startGlyphID <= glyphID && glyphID <= d.endGlyphID
+		);
+		if ( id === -1 ) return '';
+		return this.getDocument( id );
+	}
+}
+class SVGDocumentRecord {
+	constructor( p ) {
+		this.startGlyphID = p.uint16;
+		this.endGlyphID = p.uint16;
+		this.svgDocOffset = p.Offset32;
+		this.svgDocLength = p.uint32;
+	}
+}
+var SVG$1 = Object.freeze( { __proto__: null, SVG: SVG } );
+class fvar extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.axesArrayOffset = p.Offset16;
+		p.uint16;
+		this.axisCount = p.uint16;
+		this.axisSize = p.uint16;
+		this.instanceCount = p.uint16;
+		this.instanceSize = p.uint16;
+		const axisStart = this.tableStart + this.axesArrayOffset;
+		lazy$1( this, `axes`, () => {
+			p.currentPosition = axisStart;
+			return [ ...new Array( this.axisCount ) ].map(
+				( _ ) => new VariationAxisRecord( p )
+			);
+		} );
+		const instanceStart = axisStart + this.axisCount * this.axisSize;
+		lazy$1( this, `instances`, () => {
+			let instances = [];
+			for ( let i = 0; i < this.instanceCount; i++ ) {
+				p.currentPosition = instanceStart + i * this.instanceSize;
+				instances.push(
+					new InstanceRecord( p, this.axisCount, this.instanceSize )
+				);
+			}
+			return instances;
+		} );
+	}
+	getSupportedAxes() {
+		return this.axes.map( ( a ) => a.tag );
+	}
+	getAxis( name ) {
+		return this.axes.find( ( a ) => a.tag === name );
+	}
+}
+class VariationAxisRecord {
+	constructor( p ) {
+		this.tag = p.tag;
+		this.minValue = p.fixed;
+		this.defaultValue = p.fixed;
+		this.maxValue = p.fixed;
+		this.flags = p.flags( 16 );
+		this.axisNameID = p.uint16;
+	}
+}
+class InstanceRecord {
+	constructor( p, axisCount, size ) {
+		let start = p.currentPosition;
+		this.subfamilyNameID = p.uint16;
+		p.uint16;
+		this.coordinates = [ ...new Array( axisCount ) ].map(
+			( _ ) => p.fixed
+		);
+		if ( p.currentPosition - start < size ) {
+			this.postScriptNameID = p.uint16;
+		}
+	}
+}
+var fvar$1 = Object.freeze( { __proto__: null, fvar: fvar } );
+class cvt extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		const n = dict.length / 2;
+		lazy$1( this, `items`, () =>
+			[ ...new Array( n ) ].map( ( _ ) => p.fword )
+		);
+	}
+}
+var cvt$1 = Object.freeze( { __proto__: null, cvt: cvt } );
+class fpgm extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		lazy$1( this, `instructions`, () =>
+			[ ...new Array( dict.length ) ].map( ( _ ) => p.uint8 )
+		);
+	}
+}
+var fpgm$1 = Object.freeze( { __proto__: null, fpgm: fpgm } );
+class gasp extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numRanges = p.uint16;
+		const getter = () =>
+			[ ...new Array( this.numRanges ) ].map(
+				( _ ) => new GASPRange( p )
+			);
+		lazy$1( this, `gaspRanges`, getter );
+	}
+}
+class GASPRange {
+	constructor( p ) {
+		this.rangeMaxPPEM = p.uint16;
+		this.rangeGaspBehavior = p.uint16;
+	}
+}
+var gasp$1 = Object.freeze( { __proto__: null, gasp: gasp } );
+class glyf extends SimpleTable {
+	constructor( dict, dataview ) {
+		super( dict, dataview );
+	}
+	getGlyphData( offset, length ) {
+		this.parser.currentPosition = this.tableStart + offset;
+		return this.parser.readBytes( length );
+	}
+}
+var glyf$1 = Object.freeze( { __proto__: null, glyf: glyf } );
+class loca extends SimpleTable {
+	constructor( dict, dataview, tables ) {
+		const { p: p } = super( dict, dataview );
+		const n = tables.maxp.numGlyphs + 1;
+		if ( tables.head.indexToLocFormat === 0 ) {
+			this.x2 = true;
+			lazy$1( this, `offsets`, () =>
+				[ ...new Array( n ) ].map( ( _ ) => p.Offset16 )
+			);
+		} else {
+			lazy$1( this, `offsets`, () =>
+				[ ...new Array( n ) ].map( ( _ ) => p.Offset32 )
+			);
+		}
+	}
+	getGlyphDataOffsetAndLength( glyphID ) {
+		let offset = this.offsets[ glyphID ] * this.x2 ? 2 : 1;
+		let nextOffset = this.offsets[ glyphID + 1 ] * this.x2 ? 2 : 1;
+		return { offset: offset, length: nextOffset - offset };
+	}
+}
+var loca$1 = Object.freeze( { __proto__: null, loca: loca } );
+class prep extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		lazy$1( this, `instructions`, () =>
+			[ ...new Array( dict.length ) ].map( ( _ ) => p.uint8 )
+		);
+	}
+}
+var prep$1 = Object.freeze( { __proto__: null, prep: prep } );
+class CFF extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		lazy$1( this, `data`, () => p.readBytes() );
+	}
+}
+var CFF$1 = Object.freeze( { __proto__: null, CFF: CFF } );
+class CFF2 extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		lazy$1( this, `data`, () => p.readBytes() );
+	}
+}
+var CFF2$1 = Object.freeze( { __proto__: null, CFF2: CFF2 } );
+class VORG extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.defaultVertOriginY = p.int16;
+		this.numVertOriginYMetrics = p.uint16;
+		lazy$1( this, `vertORiginYMetrics`, () =>
+			[ ...new Array( this.numVertOriginYMetrics ) ].map(
+				( _ ) => new VertOriginYMetric( p )
+			)
+		);
+	}
+}
+class VertOriginYMetric {
+	constructor( p ) {
+		this.glyphIndex = p.uint16;
+		this.vertOriginY = p.int16;
+	}
+}
+var VORG$1 = Object.freeze( { __proto__: null, VORG: VORG } );
+class BitmapSize {
+	constructor( p ) {
+		this.indexSubTableArrayOffset = p.Offset32;
+		this.indexTablesSize = p.uint32;
+		this.numberofIndexSubTables = p.uint32;
+		this.colorRef = p.uint32;
+		this.hori = new SbitLineMetrics( p );
+		this.vert = new SbitLineMetrics( p );
+		this.startGlyphIndex = p.uint16;
+		this.endGlyphIndex = p.uint16;
+		this.ppemX = p.uint8;
+		this.ppemY = p.uint8;
+		this.bitDepth = p.uint8;
+		this.flags = p.int8;
+	}
+}
+class BitmapScale {
+	constructor( p ) {
+		this.hori = new SbitLineMetrics( p );
+		this.vert = new SbitLineMetrics( p );
+		this.ppemX = p.uint8;
+		this.ppemY = p.uint8;
+		this.substitutePpemX = p.uint8;
+		this.substitutePpemY = p.uint8;
+	}
+}
+class SbitLineMetrics {
+	constructor( p ) {
+		this.ascender = p.int8;
+		this.descender = p.int8;
+		this.widthMax = p.uint8;
+		this.caretSlopeNumerator = p.int8;
+		this.caretSlopeDenominator = p.int8;
+		this.caretOffset = p.int8;
+		this.minOriginSB = p.int8;
+		this.minAdvanceSB = p.int8;
+		this.maxBeforeBL = p.int8;
+		this.minAfterBL = p.int8;
+		this.pad1 = p.int8;
+		this.pad2 = p.int8;
+	}
+}
+class EBLC extends SimpleTable {
+	constructor( dict, dataview, name ) {
+		const { p: p } = super( dict, dataview, name );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.numSizes = p.uint32;
+		lazy$1( this, `bitMapSizes`, () =>
+			[ ...new Array( this.numSizes ) ].map(
+				( _ ) => new BitmapSize( p )
+			)
+		);
+	}
+}
+var EBLC$1 = Object.freeze( { __proto__: null, EBLC: EBLC } );
+class EBDT extends SimpleTable {
+	constructor( dict, dataview, name ) {
+		const { p: p } = super( dict, dataview, name );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+	}
+}
+var EBDT$1 = Object.freeze( { __proto__: null, EBDT: EBDT } );
+class EBSC extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.majorVersion = p.uint16;
+		this.minorVersion = p.uint16;
+		this.numSizes = p.uint32;
+		lazy$1( this, `bitmapScales`, () =>
+			[ ...new Array( this.numSizes ) ].map(
+				( _ ) => new BitmapScale( p )
+			)
+		);
+	}
+}
+var EBSC$1 = Object.freeze( { __proto__: null, EBSC: EBSC } );
+class CBLC extends EBLC {
+	constructor( dict, dataview ) {
+		super( dict, dataview, `CBLC` );
+	}
+}
+var CBLC$1 = Object.freeze( { __proto__: null, CBLC: CBLC } );
+class CBDT extends EBDT {
+	constructor( dict, dataview ) {
+		super( dict, dataview, `CBDT` );
+	}
+}
+var CBDT$1 = Object.freeze( { __proto__: null, CBDT: CBDT } );
+class sbix extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.flags = p.flags( 16 );
+		this.numStrikes = p.uint32;
+		lazy$1( this, `strikeOffsets`, () =>
+			[ ...new Array( this.numStrikes ) ].map( ( _ ) => p.Offset32 )
+		);
+	}
+}
+var sbix$1 = Object.freeze( { __proto__: null, sbix: sbix } );
+class COLR extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numBaseGlyphRecords = p.uint16;
+		this.baseGlyphRecordsOffset = p.Offset32;
+		this.layerRecordsOffset = p.Offset32;
+		this.numLayerRecords = p.uint16;
+	}
+	getBaseGlyphRecord( glyphID ) {
+		let start = this.tableStart + this.baseGlyphRecordsOffset;
+		this.parser.currentPosition = start;
+		let first = new BaseGlyphRecord( this.parser );
+		let firstID = first.gID;
+		let end = this.tableStart + this.layerRecordsOffset - 6;
+		this.parser.currentPosition = end;
+		let last = new BaseGlyphRecord( this.parser );
+		let lastID = last.gID;
+		if ( firstID === glyphID ) return first;
+		if ( lastID === glyphID ) return last;
+		while ( true ) {
+			if ( start === end ) break;
+			let mid = start + ( end - start ) / 12;
+			this.parser.currentPosition = mid;
+			let middle = new BaseGlyphRecord( this.parser );
+			let midID = middle.gID;
+			if ( midID === glyphID ) return middle;
+			else if ( midID > glyphID ) {
+				end = mid;
+			} else if ( midID < glyphID ) {
+				start = mid;
+			}
+		}
+		return false;
+	}
+	getLayers( glyphID ) {
+		let record = this.getBaseGlyphRecord( glyphID );
+		this.parser.currentPosition =
+			this.tableStart +
+			this.layerRecordsOffset +
+			4 * record.firstLayerIndex;
+		return [ ...new Array( record.numLayers ) ].map(
+			( _ ) => new LayerRecord( p )
+		);
+	}
+}
+class BaseGlyphRecord {
+	constructor( p ) {
+		this.gID = p.uint16;
+		this.firstLayerIndex = p.uint16;
+		this.numLayers = p.uint16;
+	}
+}
+class LayerRecord {
+	constructor( p ) {
+		this.gID = p.uint16;
+		this.paletteIndex = p.uint16;
+	}
+}
+var COLR$1 = Object.freeze( { __proto__: null, COLR: COLR } );
+class CPAL extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numPaletteEntries = p.uint16;
+		const numPalettes = ( this.numPalettes = p.uint16 );
+		this.numColorRecords = p.uint16;
+		this.offsetFirstColorRecord = p.Offset32;
+		this.colorRecordIndices = [ ...new Array( this.numPalettes ) ].map(
+			( _ ) => p.uint16
+		);
+		lazy$1( this, `colorRecords`, () => {
+			p.currentPosition = this.tableStart + this.offsetFirstColorRecord;
+			return [ ...new Array( this.numColorRecords ) ].map(
+				( _ ) => new ColorRecord( p )
+			);
+		} );
+		if ( this.version === 1 ) {
+			this.offsetPaletteTypeArray = p.Offset32;
+			this.offsetPaletteLabelArray = p.Offset32;
+			this.offsetPaletteEntryLabelArray = p.Offset32;
+			lazy$1( this, `paletteTypeArray`, () => {
+				p.currentPosition =
+					this.tableStart + this.offsetPaletteTypeArray;
+				return new PaletteTypeArray( p, numPalettes );
+			} );
+			lazy$1( this, `paletteLabelArray`, () => {
+				p.currentPosition =
+					this.tableStart + this.offsetPaletteLabelArray;
+				return new PaletteLabelsArray( p, numPalettes );
+			} );
+			lazy$1( this, `paletteEntryLabelArray`, () => {
+				p.currentPosition =
+					this.tableStart + this.offsetPaletteEntryLabelArray;
+				return new PaletteEntryLabelArray( p, numPalettes );
+			} );
+		}
+	}
+}
+class ColorRecord {
+	constructor( p ) {
+		this.blue = p.uint8;
+		this.green = p.uint8;
+		this.red = p.uint8;
+		this.alpha = p.uint8;
+	}
+}
+class PaletteTypeArray {
+	constructor( p, numPalettes ) {
+		this.paletteTypes = [ ...new Array( numPalettes ) ].map(
+			( _ ) => p.uint32
+		);
+	}
+}
+class PaletteLabelsArray {
+	constructor( p, numPalettes ) {
+		this.paletteLabels = [ ...new Array( numPalettes ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+class PaletteEntryLabelArray {
+	constructor( p, numPalettes ) {
+		this.paletteEntryLabels = [ ...new Array( numPalettes ) ].map(
+			( _ ) => p.uint16
+		);
+	}
+}
+var CPAL$1 = Object.freeze( { __proto__: null, CPAL: CPAL } );
+class DSIG extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint32;
+		this.numSignatures = p.uint16;
+		this.flags = p.uint16;
+		this.signatureRecords = [ ...new Array( this.numSignatures ) ].map(
+			( _ ) => new SignatureRecord( p )
+		);
+	}
+	getData( signatureID ) {
+		const record = this.signatureRecords[ signatureID ];
+		this.parser.currentPosition = this.tableStart + record.offset;
+		return new SignatureBlockFormat1( this.parser );
+	}
+}
+class SignatureRecord {
+	constructor( p ) {
+		this.format = p.uint32;
+		this.length = p.uint32;
+		this.offset = p.Offset32;
+	}
+}
+class SignatureBlockFormat1 {
+	constructor( p ) {
+		p.uint16;
+		p.uint16;
+		this.signatureLength = p.uint32;
+		this.signature = p.readBytes( this.signatureLength );
+	}
+}
+var DSIG$1 = Object.freeze( { __proto__: null, DSIG: DSIG } );
+class hdmx extends SimpleTable {
+	constructor( dict, dataview, tables ) {
+		const { p: p } = super( dict, dataview );
+		const numGlyphs = tables.hmtx.numGlyphs;
+		this.version = p.uint16;
+		this.numRecords = p.int16;
+		this.sizeDeviceRecord = p.int32;
+		this.records = [ ...new Array( numRecords ) ].map(
+			( _ ) => new DeviceRecord( p, numGlyphs )
+		);
+	}
+}
+class DeviceRecord {
+	constructor( p, numGlyphs ) {
+		this.pixelSize = p.uint8;
+		this.maxWidth = p.uint8;
+		this.widths = p.readBytes( numGlyphs );
+	}
+}
+var hdmx$1 = Object.freeze( { __proto__: null, hdmx: hdmx } );
+class kern extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.nTables = p.uint16;
+		lazy$1( this, `tables`, () => {
+			let offset = this.tableStart + 4;
+			const tables = [];
+			for ( let i = 0; i < this.nTables; i++ ) {
+				p.currentPosition = offset;
+				let subtable = new KernSubTable( p );
+				tables.push( subtable );
+				offset += subtable;
+			}
+			return tables;
+		} );
+	}
+}
+class KernSubTable {
+	constructor( p ) {
+		this.version = p.uint16;
+		this.length = p.uint16;
+		this.coverage = p.flags( 8 );
+		this.format = p.uint8;
+		if ( this.format === 0 ) {
+			this.nPairs = p.uint16;
+			this.searchRange = p.uint16;
+			this.entrySelector = p.uint16;
+			this.rangeShift = p.uint16;
+			lazy$1( this, `pairs`, () =>
+				[ ...new Array( this.nPairs ) ].map( ( _ ) => new Pair( p ) )
+			);
+		}
+		if ( this.format === 2 ) {
+			console.warn(
+				`Kern subtable format 2 is not supported: this parser currently only parses universal table data.`
+			);
+		}
+	}
+	get horizontal() {
+		return this.coverage[ 0 ];
+	}
+	get minimum() {
+		return this.coverage[ 1 ];
+	}
+	get crossstream() {
+		return this.coverage[ 2 ];
+	}
+	get override() {
+		return this.coverage[ 3 ];
+	}
+}
+class Pair {
+	constructor( p ) {
+		this.left = p.uint16;
+		this.right = p.uint16;
+		this.value = p.fword;
+	}
+}
+var kern$1 = Object.freeze( { __proto__: null, kern: kern } );
+class LTSH extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numGlyphs = p.uint16;
+		this.yPels = p.readBytes( this.numGlyphs );
+	}
+}
+var LTSH$1 = Object.freeze( { __proto__: null, LTSH: LTSH } );
+class MERG extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.mergeClassCount = p.uint16;
+		this.mergeDataOffset = p.Offset16;
+		this.classDefCount = p.uint16;
+		this.offsetToClassDefOffsets = p.Offset16;
+		lazy$1( this, `mergeEntryMatrix`, () =>
+			[ ...new Array( this.mergeClassCount ) ].map( ( _ ) =>
+				p.readBytes( this.mergeClassCount )
+			)
+		);
+		console.warn( `Full MERG parsing is currently not supported.` );
+		console.warn(
+			`If you need this table parsed, please file an issue, or better yet, a PR.`
+		);
+	}
+}
+var MERG$1 = Object.freeze( { __proto__: null, MERG: MERG } );
+class meta extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint32;
+		this.flags = p.uint32;
+		p.uint32;
+		this.dataMapsCount = p.uint32;
+		this.dataMaps = [ ...new Array( this.dataMapsCount ) ].map(
+			( _ ) => new DataMap( this.tableStart, p )
+		);
+	}
+}
+class DataMap {
+	constructor( tableStart, p ) {
+		this.tableStart = tableStart;
+		this.parser = p;
+		this.tag = p.tag;
+		this.dataOffset = p.Offset32;
+		this.dataLength = p.uint32;
+	}
+	getData() {
+		this.parser.currentField = this.tableStart + this.dataOffset;
+		return this.parser.readBytes( this.dataLength );
+	}
+}
+var meta$1 = Object.freeze( { __proto__: null, meta: meta } );
+class PCLT extends SimpleTable {
+	constructor( dict, dataview ) {
+		super( dict, dataview );
+		console.warn(
+			`This font uses a PCLT table, which is currently not supported by this parser.`
+		);
+		console.warn(
+			`If you need this table parsed, please file an issue, or better yet, a PR.`
+		);
+	}
+}
+var PCLT$1 = Object.freeze( { __proto__: null, PCLT: PCLT } );
+class VDMX extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.uint16;
+		this.numRecs = p.uint16;
+		this.numRatios = p.uint16;
+		this.ratRanges = [ ...new Array( this.numRatios ) ].map(
+			( _ ) => new RatioRange( p )
+		);
+		this.offsets = [ ...new Array( this.numRatios ) ].map(
+			( _ ) => p.Offset16
+		);
+		this.VDMXGroups = [ ...new Array( this.numRecs ) ].map(
+			( _ ) => new VDMXGroup( p )
+		);
+	}
+}
+class RatioRange {
+	constructor( p ) {
+		this.bCharSet = p.uint8;
+		this.xRatio = p.uint8;
+		this.yStartRatio = p.uint8;
+		this.yEndRatio = p.uint8;
+	}
+}
+class VDMXGroup {
+	constructor( p ) {
+		this.recs = p.uint16;
+		this.startsz = p.uint8;
+		this.endsz = p.uint8;
+		this.records = [ ...new Array( this.recs ) ].map(
+			( _ ) => new vTable( p )
+		);
+	}
+}
+class vTable {
+	constructor( p ) {
+		this.yPelHeight = p.uint16;
+		this.yMax = p.int16;
+		this.yMin = p.int16;
+	}
+}
+var VDMX$1 = Object.freeze( { __proto__: null, VDMX: VDMX } );
+class vhea extends SimpleTable {
+	constructor( dict, dataview ) {
+		const { p: p } = super( dict, dataview );
+		this.version = p.fixed;
+		this.ascent = this.vertTypoAscender = p.int16;
+		this.descent = this.vertTypoDescender = p.int16;
+		this.lineGap = this.vertTypoLineGap = p.int16;
+		this.advanceHeightMax = p.int16;
+		this.minTopSideBearing = p.int16;
+		this.minBottomSideBearing = p.int16;
+		this.yMaxExtent = p.int16;
+		this.caretSlopeRise = p.int16;
+		this.caretSlopeRun = p.int16;
+		this.caretOffset = p.int16;
+		this.reserved = p.int16;
+		this.reserved = p.int16;
+		this.reserved = p.int16;
+		this.reserved = p.int16;
+		this.metricDataFormat = p.int16;
+		this.numOfLongVerMetrics = p.uint16;
+		p.verifyLength();
+	}
+}
+var vhea$1 = Object.freeze( { __proto__: null, vhea: vhea } );
+class vmtx extends SimpleTable {
+	constructor( dict, dataview, tables ) {
+		super( dict, dataview );
+		const numOfLongVerMetrics = tables.vhea.numOfLongVerMetrics;
+		const numGlyphs = tables.maxp.numGlyphs;
+		const metricsStart = p.currentPosition;
+		lazy( this, `vMetrics`, () => {
+			p.currentPosition = metricsStart;
+			return [ ...new Array( numOfLongVerMetrics ) ].map(
+				( _ ) => new LongVertMetric( p.uint16, p.int16 )
+			);
+		} );
+		if ( numOfLongVerMetrics < numGlyphs ) {
+			const tsbStart = metricsStart + numOfLongVerMetrics * 4;
+			lazy( this, `topSideBearings`, () => {
+				p.currentPosition = tsbStart;
+				return [ ...new Array( numGlyphs - numOfLongVerMetrics ) ].map(
+					( _ ) => p.int16
+				);
+			} );
+		}
+	}
+}
+class LongVertMetric {
+	constructor( h, b ) {
+		this.advanceHeight = h;
+		this.topSideBearing = b;
+	}
+}
+var vmtx$1 = Object.freeze( { __proto__: null, vmtx: vmtx } );
+export { Font };
+/* eslint-enable */
diff --git a/packages/edit-site/lib/unbrotli.js b/packages/edit-site/lib/unbrotli.js
new file mode 100644
index 00000000000000..63293e6cc473cf
--- /dev/null
+++ b/packages/edit-site/lib/unbrotli.js
@@ -0,0 +1,2039 @@
+/**
+ * Credits:
+ *
+ * lib-font
+ * https://github.com/Pomax/lib-font
+ * https://github.com/Pomax/lib-font/blob/master/lib/unbrotli.js
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 pomax@nihongoresources.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/* eslint eslint-comments/no-unlimited-disable: 0 */
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.unbrotli = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+   Bit reading helpers
+*/
+
+var BROTLI_READ_SIZE = 4096;
+var BROTLI_IBUF_SIZE =  (2 * BROTLI_READ_SIZE + 32);
+var BROTLI_IBUF_MASK =  (2 * BROTLI_READ_SIZE - 1);
+
+var kBitMask = new Uint32Array([
+  0, 1, 3, 7, 15, 31, 63, 127, 255, 511, 1023, 2047, 4095, 8191, 16383, 32767,
+  65535, 131071, 262143, 524287, 1048575, 2097151, 4194303, 8388607, 16777215
+]);
+
+/* Input byte buffer, consist of a ringbuffer and a "slack" region where */
+/* bytes from the start of the ringbuffer are copied. */
+function BrotliBitReader(input) {
+  this.buf_ = new Uint8Array(BROTLI_IBUF_SIZE);
+  this.input_ = input;    /* input callback */
+
+  this.reset();
+}
+
+BrotliBitReader.READ_SIZE = BROTLI_READ_SIZE;
+BrotliBitReader.IBUF_MASK = BROTLI_IBUF_MASK;
+
+BrotliBitReader.prototype.reset = function() {
+  this.buf_ptr_ = 0;      /* next input will write here */
+  this.val_ = 0;          /* pre-fetched bits */
+  this.pos_ = 0;          /* byte position in stream */
+  this.bit_pos_ = 0;      /* current bit-reading position in val_ */
+  this.bit_end_pos_ = 0;  /* bit-reading end position from LSB of val_ */
+  this.eos_ = 0;          /* input stream is finished */
+
+  this.readMoreInput();
+  for (var i = 0; i < 4; i++) {
+    this.val_ |= this.buf_[this.pos_] << (8 * i);
+    ++this.pos_;
+  }
+
+  return this.bit_end_pos_ > 0;
+};
+
+/* Fills up the input ringbuffer by calling the input callback.
+
+   Does nothing if there are at least 32 bytes present after current position.
+
+   Returns 0 if either:
+    - the input callback returned an error, or
+    - there is no more input and the position is past the end of the stream.
+
+   After encountering the end of the input stream, 32 additional zero bytes are
+   copied to the ringbuffer, therefore it is safe to call this function after
+   every 32 bytes of input is read.
+*/
+BrotliBitReader.prototype.readMoreInput = function() {
+  if (this.bit_end_pos_ > 256) {
+    return;
+  } else if (this.eos_) {
+    if (this.bit_pos_ > this.bit_end_pos_)
+      throw new Error('Unexpected end of input ' + this.bit_pos_ + ' ' + this.bit_end_pos_);
+  } else {
+    var dst = this.buf_ptr_;
+    var bytes_read = this.input_.read(this.buf_, dst, BROTLI_READ_SIZE);
+    if (bytes_read < 0) {
+      throw new Error('Unexpected end of input');
+    }
+
+    if (bytes_read < BROTLI_READ_SIZE) {
+      this.eos_ = 1;
+      /* Store 32 bytes of zero after the stream end. */
+      for (var p = 0; p < 32; p++)
+        this.buf_[dst + bytes_read + p] = 0;
+    }
+
+    if (dst === 0) {
+      /* Copy the head of the ringbuffer to the slack region. */
+      for (var p = 0; p < 32; p++)
+        this.buf_[(BROTLI_READ_SIZE << 1) + p] = this.buf_[p];
+
+      this.buf_ptr_ = BROTLI_READ_SIZE;
+    } else {
+      this.buf_ptr_ = 0;
+    }
+
+    this.bit_end_pos_ += bytes_read << 3;
+  }
+};
+
+/* Guarantees that there are at least 24 bits in the buffer. */
+BrotliBitReader.prototype.fillBitWindow = function() {
+  while (this.bit_pos_ >= 8) {
+    this.val_ >>>= 8;
+    this.val_ |= this.buf_[this.pos_ & BROTLI_IBUF_MASK] << 24;
+    ++this.pos_;
+    this.bit_pos_ = this.bit_pos_ - 8 >>> 0;
+    this.bit_end_pos_ = this.bit_end_pos_ - 8 >>> 0;
+  }
+};
+
+/* Reads the specified number of bits from Read Buffer. */
+BrotliBitReader.prototype.readBits = function(n_bits) {
+  if (32 - this.bit_pos_ < n_bits) {
+    this.fillBitWindow();
+  }
+
+  var val = ((this.val_ >>> this.bit_pos_) & kBitMask[n_bits]);
+  this.bit_pos_ += n_bits;
+  return val;
+};
+
+module.exports = BrotliBitReader;
+
+},{}],2:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+   Lookup table to map the previous two bytes to a context id.
+
+   There are four different context modeling modes defined here:
+     CONTEXT_LSB6: context id is the least significant 6 bits of the last byte,
+     CONTEXT_MSB6: context id is the most significant 6 bits of the last byte,
+     CONTEXT_UTF8: second-order context model tuned for UTF8-encoded text,
+     CONTEXT_SIGNED: second-order context model tuned for signed integers.
+
+   The context id for the UTF8 context model is calculated as follows. If p1
+   and p2 are the previous two bytes, we calcualte the context as
+
+     context = kContextLookup[p1] | kContextLookup[p2 + 256].
+
+   If the previous two bytes are ASCII characters (i.e. < 128), this will be
+   equivalent to
+
+     context = 4 * context1(p1) + context2(p2),
+
+   where context1 is based on the previous byte in the following way:
+
+     0  : non-ASCII control
+     1  : \t, \n, \r
+     2  : space
+     3  : other punctuation
+     4  : " '
+     5  : %
+     6  : ( < [ {
+     7  : ) > ] }
+     8  : , ; :
+     9  : .
+     10 : =
+     11 : number
+     12 : upper-case vowel
+     13 : upper-case consonant
+     14 : lower-case vowel
+     15 : lower-case consonant
+
+   and context2 is based on the second last byte:
+
+     0 : control, space
+     1 : punctuation
+     2 : upper-case letter, number
+     3 : lower-case letter
+
+   If the last byte is ASCII, and the second last byte is not (in a valid UTF8
+   stream it will be a continuation byte, value between 128 and 191), the
+   context is the same as if the second last byte was an ASCII control or space.
+
+   If the last byte is a UTF8 lead byte (value >= 192), then the next byte will
+   be a continuation byte and the context id is 2 or 3 depending on the LSB of
+   the last byte and to a lesser extent on the second last byte if it is ASCII.
+
+   If the last byte is a UTF8 continuation byte, the second last byte can be:
+     - continuation byte: the next byte is probably ASCII or lead byte (assuming
+       4-byte UTF8 characters are rare) and the context id is 0 or 1.
+     - lead byte (192 - 207): next byte is ASCII or lead byte, context is 0 or 1
+     - lead byte (208 - 255): next byte is continuation byte, context is 2 or 3
+
+   The possible value combinations of the previous two bytes, the range of
+   context ids and the type of the next byte is summarized in the table below:
+
+   |--------\-----------------------------------------------------------------|
+   |         \                         Last byte                              |
+   | Second   \---------------------------------------------------------------|
+   | last byte \    ASCII            |   cont. byte        |   lead byte      |
+   |            \   (0-127)          |   (128-191)         |   (192-)         |
+   |=============|===================|=====================|==================|
+   |  ASCII      | next: ASCII/lead  |  not valid          |  next: cont.     |
+   |  (0-127)    | context: 4 - 63   |                     |  context: 2 - 3  |
+   |-------------|-------------------|---------------------|------------------|
+   |  cont. byte | next: ASCII/lead  |  next: ASCII/lead   |  next: cont.     |
+   |  (128-191)  | context: 4 - 63   |  context: 0 - 1     |  context: 2 - 3  |
+   |-------------|-------------------|---------------------|------------------|
+   |  lead byte  | not valid         |  next: ASCII/lead   |  not valid       |
+   |  (192-207)  |                   |  context: 0 - 1     |                  |
+   |-------------|-------------------|---------------------|------------------|
+   |  lead byte  | not valid         |  next: cont.        |  not valid       |
+   |  (208-)     |                   |  context: 2 - 3     |                  |
+   |-------------|-------------------|---------------------|------------------|
+
+   The context id for the signed context mode is calculated as:
+
+     context = (kContextLookup[512 + p1] << 3) | kContextLookup[512 + p2].
+
+   For any context modeling modes, the context ids can be calculated by |-ing
+   together two lookups from one table using context model dependent offsets:
+
+     context = kContextLookup[offset1 + p1] | kContextLookup[offset2 + p2].
+
+   where offset1 and offset2 are dependent on the context mode.
+*/
+
+var CONTEXT_LSB6         = 0;
+var CONTEXT_MSB6         = 1;
+var CONTEXT_UTF8         = 2;
+var CONTEXT_SIGNED       = 3;
+
+/* Common context lookup table for all context modes. */
+exports.lookup = new Uint8Array([
+  /* CONTEXT_UTF8, last byte. */
+  /* ASCII range. */
+   0,  0,  0,  0,  0,  0,  0,  0,  0,  4,  4,  0,  0,  4,  0,  0,
+   0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,
+   8, 12, 16, 12, 12, 20, 12, 16, 24, 28, 12, 12, 32, 12, 36, 12,
+  44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 32, 32, 24, 40, 28, 12,
+  12, 48, 52, 52, 52, 48, 52, 52, 52, 48, 52, 52, 52, 52, 52, 48,
+  52, 52, 52, 52, 52, 48, 52, 52, 52, 52, 52, 24, 12, 28, 12, 12,
+  12, 56, 60, 60, 60, 56, 60, 60, 60, 56, 60, 60, 60, 60, 60, 56,
+  60, 60, 60, 60, 60, 56, 60, 60, 60, 60, 60, 24, 12, 28, 12,  0,
+  /* UTF8 continuation byte range. */
+  0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
+  0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
+  0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
+  0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
+  /* UTF8 lead byte range. */
+  2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3,
+  2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3,
+  2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3,
+  2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3,
+  /* CONTEXT_UTF8 second last byte. */
+  /* ASCII range. */
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1,
+  1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1,
+  1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
+  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 1, 1, 1, 0,
+  /* UTF8 continuation byte range. */
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  /* UTF8 lead byte range. */
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  /* CONTEXT_SIGNED, second last byte. */
+  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
+  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
+  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
+  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
+  3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3,
+  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
+  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
+  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
+  4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
+  5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+  5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+  5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
+  6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7,
+  /* CONTEXT_SIGNED, last byte, same as the above values shifted by 3 bits. */
+   0, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8,
+  16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
+  16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
+  16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
+  24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+  24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+  24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+  24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+  32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
+  32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
+  32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
+  32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
+  40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40,
+  40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40,
+  40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40,
+  48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 48, 56,
+  /* CONTEXT_LSB6, last byte. */
+   0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15,
+  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
+  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63,
+   0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15,
+  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
+  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63,
+   0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15,
+  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
+  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63,
+   0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14, 15,
+  16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+  32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,
+  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63,
+  /* CONTEXT_MSB6, last byte. */
+   0,  0,  0,  0,  1,  1,  1,  1,  2,  2,  2,  2,  3,  3,  3,  3,
+   4,  4,  4,  4,  5,  5,  5,  5,  6,  6,  6,  6,  7,  7,  7,  7,
+   8,  8,  8,  8,  9,  9,  9,  9, 10, 10, 10, 10, 11, 11, 11, 11,
+  12, 12, 12, 12, 13, 13, 13, 13, 14, 14, 14, 14, 15, 15, 15, 15,
+  16, 16, 16, 16, 17, 17, 17, 17, 18, 18, 18, 18, 19, 19, 19, 19,
+  20, 20, 20, 20, 21, 21, 21, 21, 22, 22, 22, 22, 23, 23, 23, 23,
+  24, 24, 24, 24, 25, 25, 25, 25, 26, 26, 26, 26, 27, 27, 27, 27,
+  28, 28, 28, 28, 29, 29, 29, 29, 30, 30, 30, 30, 31, 31, 31, 31,
+  32, 32, 32, 32, 33, 33, 33, 33, 34, 34, 34, 34, 35, 35, 35, 35,
+  36, 36, 36, 36, 37, 37, 37, 37, 38, 38, 38, 38, 39, 39, 39, 39,
+  40, 40, 40, 40, 41, 41, 41, 41, 42, 42, 42, 42, 43, 43, 43, 43,
+  44, 44, 44, 44, 45, 45, 45, 45, 46, 46, 46, 46, 47, 47, 47, 47,
+  48, 48, 48, 48, 49, 49, 49, 49, 50, 50, 50, 50, 51, 51, 51, 51,
+  52, 52, 52, 52, 53, 53, 53, 53, 54, 54, 54, 54, 55, 55, 55, 55,
+  56, 56, 56, 56, 57, 57, 57, 57, 58, 58, 58, 58, 59, 59, 59, 59,
+  60, 60, 60, 60, 61, 61, 61, 61, 62, 62, 62, 62, 63, 63, 63, 63,
+  /* CONTEXT_{M,L}SB6, second last byte, */
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+]);
+
+exports.lookupOffsets = new Uint16Array([
+  /* CONTEXT_LSB6 */
+  1024, 1536,
+  /* CONTEXT_MSB6 */
+  1280, 1536,
+  /* CONTEXT_UTF8 */
+  0, 256,
+  /* CONTEXT_SIGNED */
+  768, 512,
+]);
+
+},{}],3:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+var BrotliInput = require('./streams').BrotliInput;
+var BrotliOutput = require('./streams').BrotliOutput;
+var BrotliBitReader = require('./bit_reader');
+var BrotliDictionary = require('./dictionary');
+var HuffmanCode = require('./huffman').HuffmanCode;
+var BrotliBuildHuffmanTable = require('./huffman').BrotliBuildHuffmanTable;
+var Context = require('./context');
+var Prefix = require('./prefix');
+var Transform = require('./transform');
+
+var kDefaultCodeLength = 8;
+var kCodeLengthRepeatCode = 16;
+var kNumLiteralCodes = 256;
+var kNumInsertAndCopyCodes = 704;
+var kNumBlockLengthCodes = 26;
+var kLiteralContextBits = 6;
+var kDistanceContextBits = 2;
+
+var HUFFMAN_TABLE_BITS = 8;
+var HUFFMAN_TABLE_MASK = 0xff;
+/* Maximum possible Huffman table size for an alphabet size of 704, max code
+ * length 15 and root table bits 8. */
+var HUFFMAN_MAX_TABLE_SIZE = 1080;
+
+var CODE_LENGTH_CODES = 18;
+var kCodeLengthCodeOrder = new Uint8Array([
+  1, 2, 3, 4, 0, 5, 17, 6, 16, 7, 8, 9, 10, 11, 12, 13, 14, 15,
+]);
+
+var NUM_DISTANCE_SHORT_CODES = 16;
+var kDistanceShortCodeIndexOffset = new Uint8Array([
+  3, 2, 1, 0, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2
+]);
+
+var kDistanceShortCodeValueOffset = new Int8Array([
+  0, 0, 0, 0, -1, 1, -2, 2, -3, 3, -1, 1, -2, 2, -3, 3
+]);
+
+var kMaxHuffmanTableSize = new Uint16Array([
+  256, 402, 436, 468, 500, 534, 566, 598, 630, 662, 694, 726, 758, 790, 822,
+  854, 886, 920, 952, 984, 1016, 1048, 1080
+]);
+
+function DecodeWindowBits(br) {
+  var n;
+  if (br.readBits(1) === 0) {
+    return 16;
+  }
+
+  n = br.readBits(3);
+  if (n > 0) {
+    return 17 + n;
+  }
+
+  n = br.readBits(3);
+  if (n > 0) {
+    return 8 + n;
+  }
+
+  return 17;
+}
+
+/* Decodes a number in the range [0..255], by reading 1 - 11 bits. */
+function DecodeVarLenUint8(br) {
+  if (br.readBits(1)) {
+    var nbits = br.readBits(3);
+    if (nbits === 0) {
+      return 1;
+    } else {
+      return br.readBits(nbits) + (1 << nbits);
+    }
+  }
+  return 0;
+}
+
+function MetaBlockLength() {
+  this.meta_block_length = 0;
+  this.input_end = 0;
+  this.is_uncompressed = 0;
+  this.is_metadata = false;
+}
+
+function DecodeMetaBlockLength(br) {
+  var out = new MetaBlockLength;
+  var size_nibbles;
+  var size_bytes;
+  var i;
+
+  out.input_end = br.readBits(1);
+  if (out.input_end && br.readBits(1)) {
+    return out;
+  }
+
+  size_nibbles = br.readBits(2) + 4;
+  if (size_nibbles === 7) {
+    out.is_metadata = true;
+
+    if (br.readBits(1) !== 0)
+      throw new Error('Invalid reserved bit');
+
+    size_bytes = br.readBits(2);
+    if (size_bytes === 0)
+      return out;
+
+    for (i = 0; i < size_bytes; i++) {
+      var next_byte = br.readBits(8);
+      if (i + 1 === size_bytes && size_bytes > 1 && next_byte === 0)
+        throw new Error('Invalid size byte');
+
+      out.meta_block_length |= next_byte << (i * 8);
+    }
+  } else {
+    for (i = 0; i < size_nibbles; ++i) {
+      var next_nibble = br.readBits(4);
+      if (i + 1 === size_nibbles && size_nibbles > 4 && next_nibble === 0)
+        throw new Error('Invalid size nibble');
+
+      out.meta_block_length |= next_nibble << (i * 4);
+    }
+  }
+
+  ++out.meta_block_length;
+
+  if (!out.input_end && !out.is_metadata) {
+    out.is_uncompressed = br.readBits(1);
+  }
+
+  return out;
+}
+
+/* Decodes the next Huffman code from bit-stream. */
+function ReadSymbol(table, index, br) {
+  var start_index = index;
+
+  var nbits;
+  br.fillBitWindow();
+  index += (br.val_ >>> br.bit_pos_) & HUFFMAN_TABLE_MASK;
+  nbits = table[index].bits - HUFFMAN_TABLE_BITS;
+  if (nbits > 0) {
+    br.bit_pos_ += HUFFMAN_TABLE_BITS;
+    index += table[index].value;
+    index += (br.val_ >>> br.bit_pos_) & ((1 << nbits) - 1);
+  }
+  br.bit_pos_ += table[index].bits;
+  return table[index].value;
+}
+
+function ReadHuffmanCodeLengths(code_length_code_lengths, num_symbols, code_lengths, br) {
+  var symbol = 0;
+  var prev_code_len = kDefaultCodeLength;
+  var repeat = 0;
+  var repeat_code_len = 0;
+  var space = 32768;
+
+  var table = [];
+  for (var i = 0; i < 32; i++)
+    table.push(new HuffmanCode(0, 0));
+
+  BrotliBuildHuffmanTable(table, 0, 5, code_length_code_lengths, CODE_LENGTH_CODES);
+
+  while (symbol < num_symbols && space > 0) {
+    var p = 0;
+    var code_len;
+
+    br.readMoreInput();
+    br.fillBitWindow();
+    p += (br.val_ >>> br.bit_pos_) & 31;
+    br.bit_pos_ += table[p].bits;
+    code_len = table[p].value & 0xff;
+    if (code_len < kCodeLengthRepeatCode) {
+      repeat = 0;
+      code_lengths[symbol++] = code_len;
+      if (code_len !== 0) {
+        prev_code_len = code_len;
+        space -= 32768 >> code_len;
+      }
+    } else {
+      var extra_bits = code_len - 14;
+      var old_repeat;
+      var repeat_delta;
+      var new_len = 0;
+      if (code_len === kCodeLengthRepeatCode) {
+        new_len = prev_code_len;
+      }
+      if (repeat_code_len !== new_len) {
+        repeat = 0;
+        repeat_code_len = new_len;
+      }
+      old_repeat = repeat;
+      if (repeat > 0) {
+        repeat -= 2;
+        repeat <<= extra_bits;
+      }
+      repeat += br.readBits(extra_bits) + 3;
+      repeat_delta = repeat - old_repeat;
+      if (symbol + repeat_delta > num_symbols) {
+        throw new Error('[ReadHuffmanCodeLengths] symbol + repeat_delta > num_symbols');
+      }
+
+      for (var x = 0; x < repeat_delta; x++)
+        code_lengths[symbol + x] = repeat_code_len;
+
+      symbol += repeat_delta;
+
+      if (repeat_code_len !== 0) {
+        space -= repeat_delta << (15 - repeat_code_len);
+      }
+    }
+  }
+  if (space !== 0) {
+    throw new Error("[ReadHuffmanCodeLengths] space = " + space);
+  }
+
+  for (; symbol < num_symbols; symbol++)
+    code_lengths[symbol] = 0;
+}
+
+function ReadHuffmanCode(alphabet_size, tables, table, br) {
+  var table_size = 0;
+  var simple_code_or_skip;
+  var code_lengths = new Uint8Array(alphabet_size);
+
+  br.readMoreInput();
+
+  /* simple_code_or_skip is used as follows:
+     1 for simple code;
+     0 for no skipping, 2 skips 2 code lengths, 3 skips 3 code lengths */
+  simple_code_or_skip = br.readBits(2);
+  if (simple_code_or_skip === 1) {
+    /* Read symbols, codes & code lengths directly. */
+    var i;
+    var max_bits_counter = alphabet_size - 1;
+    var max_bits = 0;
+    var symbols = new Int32Array(4);
+    var num_symbols = br.readBits(2) + 1;
+    while (max_bits_counter) {
+      max_bits_counter >>= 1;
+      ++max_bits;
+    }
+
+    for (i = 0; i < num_symbols; ++i) {
+      symbols[i] = br.readBits(max_bits) % alphabet_size;
+      code_lengths[symbols[i]] = 2;
+    }
+    code_lengths[symbols[0]] = 1;
+    switch (num_symbols) {
+      case 1:
+        break;
+      case 3:
+        if ((symbols[0] === symbols[1]) ||
+            (symbols[0] === symbols[2]) ||
+            (symbols[1] === symbols[2])) {
+          throw new Error('[ReadHuffmanCode] invalid symbols');
+        }
+        break;
+      case 2:
+        if (symbols[0] === symbols[1]) {
+          throw new Error('[ReadHuffmanCode] invalid symbols');
+        }
+
+        code_lengths[symbols[1]] = 1;
+        break;
+      case 4:
+        if ((symbols[0] === symbols[1]) ||
+            (symbols[0] === symbols[2]) ||
+            (symbols[0] === symbols[3]) ||
+            (symbols[1] === symbols[2]) ||
+            (symbols[1] === symbols[3]) ||
+            (symbols[2] === symbols[3])) {
+          throw new Error('[ReadHuffmanCode] invalid symbols');
+        }
+
+        if (br.readBits(1)) {
+          code_lengths[symbols[2]] = 3;
+          code_lengths[symbols[3]] = 3;
+        } else {
+          code_lengths[symbols[0]] = 2;
+        }
+        break;
+    }
+  } else {  /* Decode Huffman-coded code lengths. */
+    var i;
+    var code_length_code_lengths = new Uint8Array(CODE_LENGTH_CODES);
+    var space = 32;
+    var num_codes = 0;
+    /* Static Huffman code for the code length code lengths */
+    var huff = [
+      new HuffmanCode(2, 0), new HuffmanCode(2, 4), new HuffmanCode(2, 3), new HuffmanCode(3, 2),
+      new HuffmanCode(2, 0), new HuffmanCode(2, 4), new HuffmanCode(2, 3), new HuffmanCode(4, 1),
+      new HuffmanCode(2, 0), new HuffmanCode(2, 4), new HuffmanCode(2, 3), new HuffmanCode(3, 2),
+      new HuffmanCode(2, 0), new HuffmanCode(2, 4), new HuffmanCode(2, 3), new HuffmanCode(4, 5)
+    ];
+    for (i = simple_code_or_skip; i < CODE_LENGTH_CODES && space > 0; ++i) {
+      var code_len_idx = kCodeLengthCodeOrder[i];
+      var p = 0;
+      var v;
+      br.fillBitWindow();
+      p += (br.val_ >>> br.bit_pos_) & 15;
+      br.bit_pos_ += huff[p].bits;
+      v = huff[p].value;
+      code_length_code_lengths[code_len_idx] = v;
+      if (v !== 0) {
+        space -= (32 >> v);
+        ++num_codes;
+      }
+    }
+
+    if (!(num_codes === 1 || space === 0))
+      throw new Error('[ReadHuffmanCode] invalid num_codes or space');
+
+    ReadHuffmanCodeLengths(code_length_code_lengths, alphabet_size, code_lengths, br);
+  }
+
+  table_size = BrotliBuildHuffmanTable(tables, table, HUFFMAN_TABLE_BITS, code_lengths, alphabet_size);
+
+  if (table_size === 0) {
+    throw new Error("[ReadHuffmanCode] BuildHuffmanTable failed: ");
+  }
+
+  return table_size;
+}
+
+function ReadBlockLength(table, index, br) {
+  var code;
+  var nbits;
+  code = ReadSymbol(table, index, br);
+  nbits = Prefix.kBlockLengthPrefixCode[code].nbits;
+  return Prefix.kBlockLengthPrefixCode[code].offset + br.readBits(nbits);
+}
+
+function TranslateShortCodes(code, ringbuffer, index) {
+  var val;
+  if (code < NUM_DISTANCE_SHORT_CODES) {
+    index += kDistanceShortCodeIndexOffset[code];
+    index &= 3;
+    val = ringbuffer[index] + kDistanceShortCodeValueOffset[code];
+  } else {
+    val = code - NUM_DISTANCE_SHORT_CODES + 1;
+  }
+  return val;
+}
+
+function MoveToFront(v, index) {
+  var value = v[index];
+  var i = index;
+  for (; i; --i) v[i] = v[i - 1];
+  v[0] = value;
+}
+
+function InverseMoveToFrontTransform(v, v_len) {
+  var mtf = new Uint8Array(256);
+  var i;
+  for (i = 0; i < 256; ++i) {
+    mtf[i] = i;
+  }
+  for (i = 0; i < v_len; ++i) {
+    var index = v[i];
+    v[i] = mtf[index];
+    if (index) MoveToFront(mtf, index);
+  }
+}
+
+/* Contains a collection of huffman trees with the same alphabet size. */
+function HuffmanTreeGroup(alphabet_size, num_htrees) {
+  this.alphabet_size = alphabet_size;
+  this.num_htrees = num_htrees;
+  this.codes = new Array(num_htrees + num_htrees * kMaxHuffmanTableSize[(alphabet_size + 31) >>> 5]);
+  this.htrees = new Uint32Array(num_htrees);
+}
+
+HuffmanTreeGroup.prototype.decode = function(br) {
+  var i;
+  var table_size;
+  var next = 0;
+  for (i = 0; i < this.num_htrees; ++i) {
+    this.htrees[i] = next;
+    table_size = ReadHuffmanCode(this.alphabet_size, this.codes, next, br);
+    next += table_size;
+  }
+};
+
+function DecodeContextMap(context_map_size, br) {
+  var out = { num_htrees: null, context_map: null };
+  var use_rle_for_zeros;
+  var max_run_length_prefix = 0;
+  var table;
+  var i;
+
+  br.readMoreInput();
+  var num_htrees = out.num_htrees = DecodeVarLenUint8(br) + 1;
+
+  var context_map = out.context_map = new Uint8Array(context_map_size);
+  if (num_htrees <= 1) {
+    return out;
+  }
+
+  use_rle_for_zeros = br.readBits(1);
+  if (use_rle_for_zeros) {
+    max_run_length_prefix = br.readBits(4) + 1;
+  }
+
+  table = [];
+  for (i = 0; i < HUFFMAN_MAX_TABLE_SIZE; i++) {
+    table[i] = new HuffmanCode(0, 0);
+  }
+
+  ReadHuffmanCode(num_htrees + max_run_length_prefix, table, 0, br);
+
+  for (i = 0; i < context_map_size;) {
+    var code;
+
+    br.readMoreInput();
+    code = ReadSymbol(table, 0, br);
+    if (code === 0) {
+      context_map[i] = 0;
+      ++i;
+    } else if (code <= max_run_length_prefix) {
+      var reps = 1 + (1 << code) + br.readBits(code);
+      while (--reps) {
+        if (i >= context_map_size) {
+          throw new Error("[DecodeContextMap] i >= context_map_size");
+        }
+        context_map[i] = 0;
+        ++i;
+      }
+    } else {
+      context_map[i] = code - max_run_length_prefix;
+      ++i;
+    }
+  }
+  if (br.readBits(1)) {
+    InverseMoveToFrontTransform(context_map, context_map_size);
+  }
+
+  return out;
+}
+
+function DecodeBlockType(max_block_type, trees, tree_type, block_types, ringbuffers, indexes, br) {
+  var ringbuffer = tree_type * 2;
+  var index = tree_type;
+  var type_code = ReadSymbol(trees, tree_type * HUFFMAN_MAX_TABLE_SIZE, br);
+  var block_type;
+  if (type_code === 0) {
+    block_type = ringbuffers[ringbuffer + (indexes[index] & 1)];
+  } else if (type_code === 1) {
+    block_type = ringbuffers[ringbuffer + ((indexes[index] - 1) & 1)] + 1;
+  } else {
+    block_type = type_code - 2;
+  }
+  if (block_type >= max_block_type) {
+    block_type -= max_block_type;
+  }
+  block_types[tree_type] = block_type;
+  ringbuffers[ringbuffer + (indexes[index] & 1)] = block_type;
+  ++indexes[index];
+}
+
+function CopyUncompressedBlockToOutput(output, len, pos, ringbuffer, ringbuffer_mask, br) {
+  var rb_size = ringbuffer_mask + 1;
+  var rb_pos = pos & ringbuffer_mask;
+  var br_pos = br.pos_ & BrotliBitReader.IBUF_MASK;
+  var nbytes;
+
+  /* For short lengths copy byte-by-byte */
+  if (len < 8 || br.bit_pos_ + (len << 3) < br.bit_end_pos_) {
+    while (len-- > 0) {
+      br.readMoreInput();
+      ringbuffer[rb_pos++] = br.readBits(8);
+      if (rb_pos === rb_size) {
+        output.write(ringbuffer, rb_size);
+        rb_pos = 0;
+      }
+    }
+    return;
+  }
+
+  if (br.bit_end_pos_ < 32) {
+    throw new Error('[CopyUncompressedBlockToOutput] br.bit_end_pos_ < 32');
+  }
+
+  /* Copy remaining 0-4 bytes from br.val_ to ringbuffer. */
+  while (br.bit_pos_ < 32) {
+    ringbuffer[rb_pos] = (br.val_ >>> br.bit_pos_);
+    br.bit_pos_ += 8;
+    ++rb_pos;
+    --len;
+  }
+
+  /* Copy remaining bytes from br.buf_ to ringbuffer. */
+  nbytes = (br.bit_end_pos_ - br.bit_pos_) >> 3;
+  if (br_pos + nbytes > BrotliBitReader.IBUF_MASK) {
+    var tail = BrotliBitReader.IBUF_MASK + 1 - br_pos;
+    for (var x = 0; x < tail; x++)
+      ringbuffer[rb_pos + x] = br.buf_[br_pos + x];
+
+    nbytes -= tail;
+    rb_pos += tail;
+    len -= tail;
+    br_pos = 0;
+  }
+
+  for (var x = 0; x < nbytes; x++)
+    ringbuffer[rb_pos + x] = br.buf_[br_pos + x];
+
+  rb_pos += nbytes;
+  len -= nbytes;
+
+  /* If we wrote past the logical end of the ringbuffer, copy the tail of the
+     ringbuffer to its beginning and flush the ringbuffer to the output. */
+  if (rb_pos >= rb_size) {
+    output.write(ringbuffer, rb_size);
+    rb_pos -= rb_size;
+    for (var x = 0; x < rb_pos; x++)
+      ringbuffer[x] = ringbuffer[rb_size + x];
+  }
+
+  /* If we have more to copy than the remaining size of the ringbuffer, then we
+     first fill the ringbuffer from the input and then flush the ringbuffer to
+     the output */
+  while (rb_pos + len >= rb_size) {
+    nbytes = rb_size - rb_pos;
+    if (br.input_.read(ringbuffer, rb_pos, nbytes) < nbytes) {
+      throw new Error('[CopyUncompressedBlockToOutput] not enough bytes');
+    }
+    output.write(ringbuffer, rb_size);
+    len -= nbytes;
+    rb_pos = 0;
+  }
+
+  /* Copy straight from the input onto the ringbuffer. The ringbuffer will be
+     flushed to the output at a later time. */
+  if (br.input_.read(ringbuffer, rb_pos, len) < len) {
+    throw new Error('[CopyUncompressedBlockToOutput] not enough bytes');
+  }
+
+  /* Restore the state of the bit reader. */
+  br.reset();
+}
+
+/* Advances the bit reader position to the next byte boundary and verifies
+   that any skipped bits are set to zero. */
+function JumpToByteBoundary(br) {
+  var new_bit_pos = (br.bit_pos_ + 7) & ~7;
+  var pad_bits = br.readBits(new_bit_pos - br.bit_pos_);
+  return pad_bits == 0;
+}
+
+function BrotliDecompressedSize(buffer) {
+  var input = new BrotliInput(buffer);
+  var br = new BrotliBitReader(input);
+  DecodeWindowBits(br);
+  var out = DecodeMetaBlockLength(br);
+  return out.meta_block_length;
+}
+
+exports.BrotliDecompressedSize = BrotliDecompressedSize;
+
+function BrotliDecompressBuffer(buffer, output_size) {
+  var input = new BrotliInput(buffer);
+
+  if (output_size == null) {
+    output_size = BrotliDecompressedSize(buffer);
+  }
+
+  var output_buffer = new Uint8Array(output_size);
+  var output = new BrotliOutput(output_buffer);
+
+  BrotliDecompress(input, output);
+
+  if (output.pos < output.buffer.length) {
+    output.buffer = output.buffer.subarray(0, output.pos);
+  }
+
+  return output.buffer;
+}
+
+exports.BrotliDecompressBuffer = BrotliDecompressBuffer;
+
+function BrotliDecompress(input, output) {
+  var i;
+  var pos = 0;
+  var input_end = 0;
+  var window_bits = 0;
+  var max_backward_distance;
+  var max_distance = 0;
+  var ringbuffer_size;
+  var ringbuffer_mask;
+  var ringbuffer;
+  var ringbuffer_end;
+  /* This ring buffer holds a few past copy distances that will be used by */
+  /* some special distance codes. */
+  var dist_rb = [ 16, 15, 11, 4 ];
+  var dist_rb_idx = 0;
+  /* The previous 2 bytes used for context. */
+  var prev_byte1 = 0;
+  var prev_byte2 = 0;
+  var hgroup = [new HuffmanTreeGroup(0, 0), new HuffmanTreeGroup(0, 0), new HuffmanTreeGroup(0, 0)];
+  var block_type_trees;
+  var block_len_trees;
+  var br;
+
+  /* We need the slack region for the following reasons:
+       - always doing two 8-byte copies for fast backward copying
+       - transforms
+       - flushing the input ringbuffer when decoding uncompressed blocks */
+  var kRingBufferWriteAheadSlack = 128 + BrotliBitReader.READ_SIZE;
+
+  br = new BrotliBitReader(input);
+
+  /* Decode window size. */
+  window_bits = DecodeWindowBits(br);
+  max_backward_distance = (1 << window_bits) - 16;
+
+  ringbuffer_size = 1 << window_bits;
+  ringbuffer_mask = ringbuffer_size - 1;
+  ringbuffer = new Uint8Array(ringbuffer_size + kRingBufferWriteAheadSlack + BrotliDictionary.maxDictionaryWordLength);
+  ringbuffer_end = ringbuffer_size;
+
+  block_type_trees = [];
+  block_len_trees = [];
+  for (var x = 0; x < 3 * HUFFMAN_MAX_TABLE_SIZE; x++) {
+    block_type_trees[x] = new HuffmanCode(0, 0);
+    block_len_trees[x] = new HuffmanCode(0, 0);
+  }
+
+  while (!input_end) {
+    var meta_block_remaining_len = 0;
+    var is_uncompressed;
+    var block_length = [ 1 << 28, 1 << 28, 1 << 28 ];
+    var block_type = [ 0 ];
+    var num_block_types = [ 1, 1, 1 ];
+    var block_type_rb = [ 0, 1, 0, 1, 0, 1 ];
+    var block_type_rb_index = [ 0 ];
+    var distance_postfix_bits;
+    var num_direct_distance_codes;
+    var distance_postfix_mask;
+    var num_distance_codes;
+    var context_map = null;
+    var context_modes = null;
+    var num_literal_htrees;
+    var dist_context_map = null;
+    var num_dist_htrees;
+    var context_offset = 0;
+    var context_map_slice = null;
+    var literal_htree_index = 0;
+    var dist_context_offset = 0;
+    var dist_context_map_slice = null;
+    var dist_htree_index = 0;
+    var context_lookup_offset1 = 0;
+    var context_lookup_offset2 = 0;
+    var context_mode;
+    var htree_command;
+
+    for (i = 0; i < 3; ++i) {
+      hgroup[i].codes = null;
+      hgroup[i].htrees = null;
+    }
+
+    br.readMoreInput();
+
+    var _out = DecodeMetaBlockLength(br);
+    meta_block_remaining_len = _out.meta_block_length;
+    if (pos + meta_block_remaining_len > output.buffer.length) {
+      /* We need to grow the output buffer to fit the additional data. */
+      var tmp = new Uint8Array( pos + meta_block_remaining_len );
+      tmp.set( output.buffer );
+      output.buffer = tmp;
+    }
+    input_end = _out.input_end;
+    is_uncompressed = _out.is_uncompressed;
+
+    if (_out.is_metadata) {
+      JumpToByteBoundary(br);
+
+      for (; meta_block_remaining_len > 0; --meta_block_remaining_len) {
+        br.readMoreInput();
+        /* Read one byte and ignore it. */
+        br.readBits(8);
+      }
+
+      continue;
+    }
+
+    if (meta_block_remaining_len === 0) {
+      continue;
+    }
+
+    if (is_uncompressed) {
+      br.bit_pos_ = (br.bit_pos_ + 7) & ~7;
+      CopyUncompressedBlockToOutput(output, meta_block_remaining_len, pos,
+                                    ringbuffer, ringbuffer_mask, br);
+      pos += meta_block_remaining_len;
+      continue;
+    }
+
+    for (i = 0; i < 3; ++i) {
+      num_block_types[i] = DecodeVarLenUint8(br) + 1;
+      if (num_block_types[i] >= 2) {
+        ReadHuffmanCode(num_block_types[i] + 2, block_type_trees, i * HUFFMAN_MAX_TABLE_SIZE, br);
+        ReadHuffmanCode(kNumBlockLengthCodes, block_len_trees, i * HUFFMAN_MAX_TABLE_SIZE, br);
+        block_length[i] = ReadBlockLength(block_len_trees, i * HUFFMAN_MAX_TABLE_SIZE, br);
+        block_type_rb_index[i] = 1;
+      }
+    }
+
+    br.readMoreInput();
+
+    distance_postfix_bits = br.readBits(2);
+    num_direct_distance_codes = NUM_DISTANCE_SHORT_CODES + (br.readBits(4) << distance_postfix_bits);
+    distance_postfix_mask = (1 << distance_postfix_bits) - 1;
+    num_distance_codes = (num_direct_distance_codes + (48 << distance_postfix_bits));
+    context_modes = new Uint8Array(num_block_types[0]);
+
+    for (i = 0; i < num_block_types[0]; ++i) {
+       br.readMoreInput();
+       context_modes[i] = (br.readBits(2) << 1);
+    }
+
+    var _o1 = DecodeContextMap(num_block_types[0] << kLiteralContextBits, br);
+    num_literal_htrees = _o1.num_htrees;
+    context_map = _o1.context_map;
+
+    var _o2 = DecodeContextMap(num_block_types[2] << kDistanceContextBits, br);
+    num_dist_htrees = _o2.num_htrees;
+    dist_context_map = _o2.context_map;
+
+    hgroup[0] = new HuffmanTreeGroup(kNumLiteralCodes, num_literal_htrees);
+    hgroup[1] = new HuffmanTreeGroup(kNumInsertAndCopyCodes, num_block_types[1]);
+    hgroup[2] = new HuffmanTreeGroup(num_distance_codes, num_dist_htrees);
+
+    for (i = 0; i < 3; ++i) {
+      hgroup[i].decode(br);
+    }
+
+    context_map_slice = 0;
+    dist_context_map_slice = 0;
+    context_mode = context_modes[block_type[0]];
+    context_lookup_offset1 = Context.lookupOffsets[context_mode];
+    context_lookup_offset2 = Context.lookupOffsets[context_mode + 1];
+    htree_command = hgroup[1].htrees[0];
+
+    while (meta_block_remaining_len > 0) {
+      var cmd_code;
+      var range_idx;
+      var insert_code;
+      var copy_code;
+      var insert_length;
+      var copy_length;
+      var distance_code;
+      var distance;
+      var context;
+      var j;
+      var copy_dst;
+
+      br.readMoreInput();
+
+      if (block_length[1] === 0) {
+        DecodeBlockType(num_block_types[1],
+                        block_type_trees, 1, block_type, block_type_rb,
+                        block_type_rb_index, br);
+        block_length[1] = ReadBlockLength(block_len_trees, HUFFMAN_MAX_TABLE_SIZE, br);
+        htree_command = hgroup[1].htrees[block_type[1]];
+      }
+      --block_length[1];
+      cmd_code = ReadSymbol(hgroup[1].codes, htree_command, br);
+      range_idx = cmd_code >> 6;
+      if (range_idx >= 2) {
+        range_idx -= 2;
+        distance_code = -1;
+      } else {
+        distance_code = 0;
+      }
+      insert_code = Prefix.kInsertRangeLut[range_idx] + ((cmd_code >> 3) & 7);
+      copy_code = Prefix.kCopyRangeLut[range_idx] + (cmd_code & 7);
+      insert_length = Prefix.kInsertLengthPrefixCode[insert_code].offset +
+          br.readBits(Prefix.kInsertLengthPrefixCode[insert_code].nbits);
+      copy_length = Prefix.kCopyLengthPrefixCode[copy_code].offset +
+          br.readBits(Prefix.kCopyLengthPrefixCode[copy_code].nbits);
+      prev_byte1 = ringbuffer[pos-1 & ringbuffer_mask];
+      prev_byte2 = ringbuffer[pos-2 & ringbuffer_mask];
+      for (j = 0; j < insert_length; ++j) {
+        br.readMoreInput();
+
+        if (block_length[0] === 0) {
+          DecodeBlockType(num_block_types[0],
+                          block_type_trees, 0, block_type, block_type_rb,
+                          block_type_rb_index, br);
+          block_length[0] = ReadBlockLength(block_len_trees, 0, br);
+          context_offset = block_type[0] << kLiteralContextBits;
+          context_map_slice = context_offset;
+          context_mode = context_modes[block_type[0]];
+          context_lookup_offset1 = Context.lookupOffsets[context_mode];
+          context_lookup_offset2 = Context.lookupOffsets[context_mode + 1];
+        }
+        context = (Context.lookup[context_lookup_offset1 + prev_byte1] |
+                   Context.lookup[context_lookup_offset2 + prev_byte2]);
+        literal_htree_index = context_map[context_map_slice + context];
+        --block_length[0];
+        prev_byte2 = prev_byte1;
+        prev_byte1 = ReadSymbol(hgroup[0].codes, hgroup[0].htrees[literal_htree_index], br);
+        ringbuffer[pos & ringbuffer_mask] = prev_byte1;
+        if ((pos & ringbuffer_mask) === ringbuffer_mask) {
+          output.write(ringbuffer, ringbuffer_size);
+        }
+        ++pos;
+      }
+      meta_block_remaining_len -= insert_length;
+      if (meta_block_remaining_len <= 0) break;
+
+      if (distance_code < 0) {
+        var context;
+
+        br.readMoreInput();
+        if (block_length[2] === 0) {
+          DecodeBlockType(num_block_types[2],
+                          block_type_trees, 2, block_type, block_type_rb,
+                          block_type_rb_index, br);
+          block_length[2] = ReadBlockLength(block_len_trees, 2 * HUFFMAN_MAX_TABLE_SIZE, br);
+          dist_context_offset = block_type[2] << kDistanceContextBits;
+          dist_context_map_slice = dist_context_offset;
+        }
+        --block_length[2];
+        context = (copy_length > 4 ? 3 : copy_length - 2) & 0xff;
+        dist_htree_index = dist_context_map[dist_context_map_slice + context];
+        distance_code = ReadSymbol(hgroup[2].codes, hgroup[2].htrees[dist_htree_index], br);
+        if (distance_code >= num_direct_distance_codes) {
+          var nbits;
+          var postfix;
+          var offset;
+          distance_code -= num_direct_distance_codes;
+          postfix = distance_code & distance_postfix_mask;
+          distance_code >>= distance_postfix_bits;
+          nbits = (distance_code >> 1) + 1;
+          offset = ((2 + (distance_code & 1)) << nbits) - 4;
+          distance_code = num_direct_distance_codes +
+              ((offset + br.readBits(nbits)) <<
+               distance_postfix_bits) + postfix;
+        }
+      }
+
+      /* Convert the distance code to the actual distance by possibly looking */
+      /* up past distnaces from the ringbuffer. */
+      distance = TranslateShortCodes(distance_code, dist_rb, dist_rb_idx);
+      if (distance < 0) {
+        throw new Error('[BrotliDecompress] invalid distance');
+      }
+
+      if (pos < max_backward_distance &&
+          max_distance !== max_backward_distance) {
+        max_distance = pos;
+      } else {
+        max_distance = max_backward_distance;
+      }
+
+      copy_dst = pos & ringbuffer_mask;
+
+      if (distance > max_distance) {
+        if (copy_length >= BrotliDictionary.minDictionaryWordLength &&
+            copy_length <= BrotliDictionary.maxDictionaryWordLength) {
+          var offset = BrotliDictionary.offsetsByLength[copy_length];
+          var word_id = distance - max_distance - 1;
+          var shift = BrotliDictionary.sizeBitsByLength[copy_length];
+          var mask = (1 << shift) - 1;
+          var word_idx = word_id & mask;
+          var transform_idx = word_id >> shift;
+          offset += word_idx * copy_length;
+          if (transform_idx < Transform.kNumTransforms) {
+            var len = Transform.transformDictionaryWord(ringbuffer, copy_dst, offset, copy_length, transform_idx);
+            copy_dst += len;
+            pos += len;
+            meta_block_remaining_len -= len;
+            if (copy_dst >= ringbuffer_end) {
+              output.write(ringbuffer, ringbuffer_size);
+
+              for (var _x = 0; _x < (copy_dst - ringbuffer_end); _x++)
+                ringbuffer[_x] = ringbuffer[ringbuffer_end + _x];
+            }
+          } else {
+            throw new Error("Invalid backward reference. pos: " + pos + " distance: " + distance +
+              " len: " + copy_length + " bytes left: " + meta_block_remaining_len);
+          }
+        } else {
+          throw new Error("Invalid backward reference. pos: " + pos + " distance: " + distance +
+            " len: " + copy_length + " bytes left: " + meta_block_remaining_len);
+        }
+      } else {
+        if (distance_code > 0) {
+          dist_rb[dist_rb_idx & 3] = distance;
+          ++dist_rb_idx;
+        }
+
+        if (copy_length > meta_block_remaining_len) {
+          throw new Error("Invalid backward reference. pos: " + pos + " distance: " + distance +
+            " len: " + copy_length + " bytes left: " + meta_block_remaining_len);
+        }
+
+        for (j = 0; j < copy_length; ++j) {
+          ringbuffer[pos & ringbuffer_mask] = ringbuffer[(pos - distance) & ringbuffer_mask];
+          if ((pos & ringbuffer_mask) === ringbuffer_mask) {
+            output.write(ringbuffer, ringbuffer_size);
+          }
+          ++pos;
+          --meta_block_remaining_len;
+        }
+      }
+
+      /* When we get here, we must have inserted at least one literal and */
+      /* made a copy of at least length two, therefore accessing the last 2 */
+      /* bytes is valid. */
+      prev_byte1 = ringbuffer[(pos - 1) & ringbuffer_mask];
+      prev_byte2 = ringbuffer[(pos - 2) & ringbuffer_mask];
+    }
+
+    /* Protect pos from overflow, wrap it around at every GB of input data */
+    pos &= 0x3fffffff;
+  }
+
+  output.write(ringbuffer, pos & ringbuffer_mask);
+}
+
+exports.BrotliDecompress = BrotliDecompress;
+
+BrotliDictionary.init();
+
+},{"./bit_reader":1,"./context":2,"./dictionary":6,"./huffman":7,"./prefix":9,"./streams":10,"./transform":11}],4:[function(require,module,exports){
+var base64 = require('base64-js');
+//var fs = require('fs');
+
+/**
+ * The normal dictionary-data.js is quite large, which makes it
+ * unsuitable for browser usage. In order to make it smaller,
+ * we read dictionary.bin, which is a compressed version of
+ * the dictionary, and on initial load, Brotli decompresses
+ * it's own dictionary. 😜
+ */
+exports.init = function() {
+  var BrotliDecompressBuffer = require('./decode').BrotliDecompressBuffer;
+  var compressed = base64.toByteArray(require('./dictionary.bin.js'));
+  return BrotliDecompressBuffer(compressed);
+};
+
+},{"./decode":3,"./dictionary.bin.js":5,"base64-js":8}],5:[function(require,module,exports){
+module.exports="W5/fcQLn5gKf2XUbAiQ1XULX+TZz6ADToDsgqk6qVfeC0e4m6OO2wcQ1J76ZBVRV1fRkEsdu//62zQsFEZWSTCnMhcsQKlS2qOhuVYYMGCkV0fXWEoMFbESXrKEZ9wdUEsyw9g4bJlEt1Y6oVMxMRTEVbCIwZzJzboK5j8m4YH02qgXYhv1V+PM435sLVxyHJihaJREEhZGqL03txGFQLm76caGO/ovxKvzCby/3vMTtX/459f0igi7WutnKiMQ6wODSoRh/8Lx1V3Q99MvKtwB6bHdERYRY0hStJoMjNeTsNX7bn+Y7e4EQ3bf8xBc7L0BsyfFPK43dGSXpL6clYC/I328h54/VYrQ5i0648FgbGtl837svJ35L3Mot/+nPlNpWgKx1gGXQYqX6n+bbZ7wuyCHKcUok12Xjqub7NXZGzqBx0SD+uziNf87t7ve42jxSKQoW3nyxVrWIGlFShhCKxjpZZ5MeGna0+lBkk+kaN8F9qFBAFgEogyMBdcX/T1W/WnMOi/7ycWUQloEBKGeC48MkiwqJkJO+12eQiOFHMmck6q/IjWW3RZlany23TBm+cNr/84/oi5GGmGBZWrZ6j+zykVozz5fT/QH/Da6WTbZYYPynVNO7kxzuNN2kxKKWche5WveitPKAecB8YcAHz/+zXLjcLzkdDSktNIDwZE9J9X+tto43oJy65wApM3mDzYtCwX9lM+N5VR3kXYo0Z3t0TtXfgBFg7gU8oN0Dgl7fZlUbhNll+0uuohRVKjrEd8egrSndy5/Tgd2gqjA4CAVuC7ESUmL3DZoGnfhQV8uwnpi8EGvAVVsowNRxPudck7+oqAUDkwZopWqFnW1riss0t1z6iCISVKreYGNvQcXv+1L9+jbP8cd/dPUiqBso2q+7ZyFBvENCkkVr44iyPbtOoOoCecWsiuqMSML5lv+vN5MzUr+Dnh73G7Q1YnRYJVYXHRJaNAOByiaK6CusgFdBPE40r0rvqXV7tksKO2DrHYXBTv8P5ysqxEx8VDXUDDqkPH6NNOV/a2WH8zlkXRELSa8P+heNyJBBP7PgsG1EtWtNef6/i+lcayzQwQCsduidpbKfhWUDgAEmyhGu/zVTacI6RS0zTABrOYueemnVa19u9fT23N/Ta6RvTpof5DWygqreCqrDAgM4LID1+1T/taU6yTFVLqXOv+/MuQOFnaF8vLMKD7tKWDoBdALgxF33zQccCcdHx8fKIVdW69O7qHtXpeGr9jbbpFA+qRMWr5hp0s67FPc7HAiLV0g0/peZlW7hJPYEhZyhpSwahnf93/tZgfqZWXFdmdXBzqxGHLrQKxoAY6fRoBhgCRPmmGueYZ5JexTVDKUIXzkG/fqp/0U3hAgQdJ9zumutK6nqWbaqvm1pgu03IYR+G+8s0jDBBz8cApZFSBeuWasyqo2OMDKAZCozS+GWSvL/HsE9rHxooe17U3s/lTE+VZAk4j3dp6uIGaC0JMiqR5CUsabPyM0dOYDR7Ea7ip4USZlya38YfPtvrX/tBlhHilj55nZ1nfN24AOAi9BVtz/Mbn8AEDJCqJgsVUa6nQnSxv2Fs7l/NlCzpfYEjmPrNyib/+t0ei2eEMjvNhLkHCZlci4WhBe7ePZTmzYqlY9+1pxtS4GB+5lM1BHT9tS270EWUDYFq1I0yY/fNiAk4bk9yBgmef/f2k6AlYQZHsNFnW8wBQxCd68iWv7/35bXfz3JZmfGligWAKRjIs3IpzxQ27vAglHSiOzCYzJ9L9A1CdiyFvyR66ucA4jKifu5ehwER26yV7HjKqn5Mfozo7Coxxt8LWWPT47BeMxX8p0Pjb7hZn+6bw7z3Lw+7653j5sI8CLu5kThpMlj1m4c2ch3jGcP1FsT13vuK3qjecKTZk2kHcOZY40UX+qdaxstZqsqQqgXz+QGF99ZJLqr3VYu4aecl1Ab5GmqS8k/GV5b95zxQ5d4EfXUJ6kTS/CXF/aiqKDOT1T7Jz5z0PwDUcwr9clLN1OJGCiKfqvah+h3XzrBOiLOW8wvn8gW6qE8vPxi+Efv+UH55T7PQFVMh6cZ1pZQlzJpKZ7P7uWvwPGJ6DTlR6wbyj3Iv2HyefnRo/dv7dNx+qaa0N38iBsR++Uil7Wd4afwDNsrzDAK4fXZwvEY/jdKuIKXlfrQd2C39dW7ntnRbIp9OtGy9pPBn/V2ASoi/2UJZfS+xuGLH8bnLuPlzdTNS6zdyk8Dt/h6sfOW5myxh1f+zf3zZ3MX/mO9cQPp5pOx967ZA6/pqHvclNfnUFF+rq+Vd7alKr6KWPcIDhpn6v2K6NlUu6LrKo8b/pYpU/Gazfvtwhn7tEOUuXht5rUJdSf6sLjYf0VTYDgwJ81yaqKTUYej/tbHckSRb/HZicwGJqh1mAHB/IuNs9dc9yuvF3D5Xocm3elWFdq5oEy70dYFit79yaLiNjPj5UUcVmZUVhQEhW5V2Z6Cm4HVH/R8qlamRYwBileuh07CbEce3TXa2JmXWBf+ozt319psboobeZhVnwhMZzOeQJzhpTDbP71Tv8HuZxxUI/+ma3XW6DFDDs4+qmpERwHGBd2edxwUKlODRdUWZ/g0GOezrbzOZauFMai4QU6GVHV6aPNBiBndHSsV4IzpvUiiYyg6OyyrL4Dj5q/Lw3N5kAwftEVl9rNd7Jk5PDij2hTH6wIXnsyXkKePxbmHYgC8A6an5Fob/KH5GtC0l4eFso+VpxedtJHdHpNm+Bvy4C79yVOkrZsLrQ3OHCeB0Ra+kBIRldUGlDCEmq2RwXnfyh6Dz+alk6eftI2n6sastRrGwbwszBeDRS/Fa/KwRJkCzTsLr/JCs5hOPE/MPLYdZ1F1fv7D+VmysX6NpOC8aU9F4Qs6HvDyUy9PvFGDKZ/P5101TYHFl8pjj6wm/qyS75etZhhfg0UEL4OYmHk6m6dO192AzoIyPSV9QedDA4Ml23rRbqxMPMxf7FJnDc5FTElVS/PyqgePzmwVZ26NWhRDQ+oaT7ly7ell4s3DypS1s0g+tOr7XHrrkZj9+x/mJBttrLx98lFIaRZzHz4aC7r52/JQ4VjHahY2/YVXZn/QC2ztQb/sY3uRlyc5vQS8nLPGT/n27495i8HPA152z7Fh5aFpyn1GPJKHuPL8Iw94DuW3KjkURAWZXn4EQy89xiKEHN1mk/tkM4gYDBxwNoYvRfE6LFqsxWJtPrDGbsnLMap3Ka3MUoytW0cvieozOmdERmhcqzG+3HmZv2yZeiIeQTKGdRT4HHNxekm1tY+/n06rGmFleqLscSERzctTKM6G9P0Pc1RmVvrascIxaO1CQCiYPE15bD7c3xSeW7gXxYjgxcrUlcbIvO0r+Yplhx0kTt3qafDOmFyMjgGxXu73rddMHpV1wMubyAGcf/v5dLr5P72Ta9lBF+fzMJrMycwv+9vnU3ANIl1cH9tfW7af8u0/HG0vV47jNFXzFTtaha1xvze/s8KMtCYucXc1nzfd/MQydUXn/b72RBt5wO/3jRcMH9BdhC/yctKBIveRYPrNpDWqBsO8VMmP+WvRaOcA4zRMR1PvSoO92rS7pYEv+fZfEfTMzEdM+6X5tLlyxExhqLRkms5EuLovLfx66de5fL2/yX02H52FPVwahrPqmN/E0oVXnsCKhbi/yRxX83nRbUKWhzYceXOntfuXn51NszJ6MO73pQf5Pl4in3ec4JU8hF7ppV34+mm9r1LY0ee/i1O1wpd8+zfLztE0cqBxggiBi5Bu95v9l3r9r/U5hweLn+TbfxowrWDqdJauKd8+q/dH8sbPkc9ttuyO94f7/XK/nHX46MPFLEb5qQlNPvhJ50/59t9ft3LXu7uVaWaO2bDrDCnRSzZyWvFKxO1+vT8MwwunR3bX0CkfPjqb4K9O19tn5X50PvmYpEwHtiW9WtzuV/s76B1zvLLNkViNd8ySxIl/3orfqP90TyTGaf7/rx8jQzeHJXdmh/N6YDvbvmTBwCdxfEQ1NcL6wNMdSIXNq7b1EUzRy1/Axsyk5p22GMG1b+GxFgbHErZh92wuvco0AuOLXct9hvw2nw/LqIcDRRmJmmZzcgUa7JpM/WV/S9IUfbF56TL2orzqwebdRD8nIYNJ41D/hz37Fo11p2Y21wzPcn713qVGhqtevStYfGH4n69OEJtPvbbLYWvscDqc3Hgnu166+tAyLnxrX0Y5zoYjV++1sI7t5kMr02KT/+uwtkc+rZLOf/qn/s3nYCf13Dg8/sB2diJgjGqjQ+TLhxbzyue2Ob7X6/9lUwW7a+lbznHzOYy8LKW1C/uRPbQY3KW/0gO9LXunHLvPL97afba9bFtc9hmz7GAttjVYlCvQAiOwAk/gC5+hkLEs6tr3AZKxLJtOEwk2dLxTYWsIB/j/ToWtIWzo906FrSG8iaqqqqqqiIiIiAgzMzMzNz+AyK+01/zi8n8S+Y1MjoRaQ80WU/G8MBlO+53VPXANrWm4wzGUVZUjjBJZVdhpcfkjsmcWaO+UEldXi1e+zq+HOsCpknYshuh8pOLISJun7TN0EIGW2xTnlOImeecnoGW4raxe2G1T3HEvfYUYMhG+gAFOAwh5nK8mZhwJMmN7r224QVsNFvZ87Z0qatvknklyPDK3Hy45PgVKXji52Wen4d4PlFVVYGnNap+fSpFbK90rYnhUc6n91Q3AY9E0tJOFrcfZtm/491XbcG/jsViUPPX76qmeuiz+qY1Hk7/1VPM405zWVuoheLUimpWYdVzCmUdKHebMdzgrYrb8mL2eeLSnRWHdonfZa8RsOU9F37w+591l5FLYHiOqWeHtE/lWrBHcRKp3uhtr8yXm8LU/5ms+NM6ZKsqu90cFZ4o58+k4rdrtB97NADFbwmEG7lXqvirhOTOqU14xuUF2myIjURcPHrPOQ4lmM3PeMg7bUuk0nnZi67bXsU6H8lhqIo8TaOrEafCO1ARK9PjC0QOoq2BxmMdgYB9G/lIb9++fqNJ2s7BHGFyBNmZAR8J3KCo012ikaSP8BCrf6VI0X5xdnbhHIO+B5rbOyB54zXkzfObyJ4ecwxfqBJMLFc7m59rNcw7hoHnFZ0b00zee+gTqvjm61Pb4xn0kcDX4jvHM0rBXZypG3DCKnD/Waa/ZtHmtFPgO5eETx+k7RrVg3aSwm2YoNXnCs3XPQDhNn+Fia6IlOOuIG6VJH7TP6ava26ehKHQa2T4N0tcZ9dPCGo3ZdnNltsHQbeYt5vPnJezV/cAeNypdml1vCHI8M81nSRP5Qi2+mI8v/sxiZru9187nRtp3f/42NemcONa+4eVC3PCZzc88aZh851CqSsshe70uPxeN/dmYwlwb3trwMrN1Gq8jbnApcVDx/yDPeYs5/7r62tsQ6lLg+DiFXTEhzR9dHqv0iT4tgj825W+H3XiRUNUZT2kR9Ri0+lp+UM3iQtS8uOE23Ly4KYtvqH13jghUntJRAewuzNLDXp8RxdcaA3cMY6TO2IeSFRXezeWIjCqyhsUdMYuCgYTZSKpBype1zRfq8FshvfBPc6BAQWl7/QxIDp3VGo1J3vn42OEs3qznws+YLRXbymyB19a9XBx6n/owcyxlEYyFWCi+kG9F+EyD/4yn80+agaZ9P7ay2Dny99aK2o91FkfEOY8hBwyfi5uwx2y5SaHmG+oq/zl1FX/8irOf8Y3vAcX/6uLP6A6nvMO24edSGPjQc827Rw2atX+z2bKq0CmW9mOtYnr5/AfDa1ZfPaXnKtlWborup7QYx+Or2uWb+N3N//2+yDcXMqIJdf55xl7/vsj4WoPPlxLxtVrkJ4w/tTe3mLdATOOYwxcq52w5Wxz5MbPdVs5O8/lhfE7dPj0bIiPQ3QV0iqm4m3YX8hRfc6jQ3fWepevMqUDJd86Z4vwM40CWHnn+WphsGHfieF02D3tmZvpWD+kBpNCFcLnZhcmmrhpGzzbdA+sQ1ar18OJD87IOKOFoRNznaHPNHUfUNhvY1iU+uhvEvpKHaUn3qK3exVVyX4joipp3um7FmYJWmA+WbIDshRpbVRx5/nqstCgy87FGbfVB8yDGCqS+2qCsnRwnSAN6zgzxfdB2nBT/vZ4/6uxb6oH8b4VBRxiIB93wLa47hG3w2SL/2Z27yOXJFwZpSJaBYyvajA7vRRYNKqljXKpt/CFD/tSMr18DKKbwB0xggBePatl1nki0yvqW5zchlyZmJ0OTxJ3D+fsYJs/mxYN5+Le5oagtcl+YsVvy8kSjI2YGvGjvmpkRS9W2dtXqWnVuxUhURm1lKtou/hdEq19VBp9OjGvHEQSmrpuf2R24mXGheil8KeiANY8fW1VERUfBImb64j12caBZmRViZHbeVMjCrPDg9A90IXrtnsYCuZtRQ0PyrKDjBNOsPfKsg1pA02gHlVr0OXiFhtp6nJqXVzcbfM0KnzC3ggOENPE9VBdmHKN6LYaijb4wXxJn5A0FSDF5j+h1ooZx885Jt3ZKzO5n7Z5WfNEOtyyPqQEnn7WLv5Fis3PdgMshjF1FRydbNyeBbyKI1oN1TRVrVK7kgsb/zjX4NDPIRMctVeaxVB38Vh1x5KbeJbU138AM5KzmZu3uny0ErygxiJF7GVXUrPzFxrlx1uFdAaZFDN9cvIb74qD9tzBMo7L7WIEYK+sla1DVMHpF0F7b3+Y6S+zjvLeDMCpapmJo1weBWuxKF3rOocih1gun4BoJh1kWnV/Jmiq6uOhK3VfKxEHEkafjLgK3oujaPzY6SXg8phhL4TNR1xvJd1Wa0aYFfPUMLrNBDCh4AuGRTbtKMc6Z1Udj8evY/ZpCuMAUefdo69DZUngoqE1P9A3PJfOf7WixCEj+Y6t7fYeHbbxUAoFV3M89cCKfma3fc1+jKRe7MFWEbQqEfyzO2x/wrO2VYH7iYdQ9BkPyI8/3kXBpLaCpU7eC0Yv/am/tEDu7HZpqg0EvHo0nf/R/gRzUWy33/HXMJQeu1GylKmOkXzlCfGFruAcPPhaGqZOtu19zsJ1SO2Jz4Ztth5cBX6mRQwWmDwryG9FUMlZzNckMdK+IoMJv1rOWnBamS2w2KHiaPMPLC15hCZm4KTpoZyj4E2TqC/P6r7/EhnDMhKicZZ1ZwxuC7DPzDGs53q8gXaI9kFTK+2LTq7bhwsTbrMV8Rsfua5lMS0FwbTitUVnVa1yTb5IX51mmYnUcP9wPr8Ji1tiYJeJV9GZTrQhF7vvdU2OTU42ogJ9FDwhmycI2LIg++03C6scYhUyUuMV5tkw6kGUoL+mjNC38+wMdWNljn6tGPpRES7veqrSn5TRuv+dh6JVL/iDHU1db4c9WK3++OrH3PqziF916UMUKn8G67nN60GfWiHrXYhUG3yVWmyYak59NHj8t1smG4UDiWz2rPHNrKnN4Zo1LBbr2/eF9YZ0n0blx2nG4X+EKFxvS3W28JESD+FWk61VCD3z/URGHiJl++7TdBwkCj6tGOH3qDb0QqcOF9Kzpj0HUb/KyFW3Yhj2VMKJqGZleFBH7vqvf7WqLC3XMuHV8q8a4sTFuxUtkD/6JIBvKaVjv96ndgruKZ1k/BHzqf2K9fLk7HGXANyLDd1vxkK/i055pnzl+zw6zLnwXlVYVtfmacJgEpRP1hbGgrYPVN6v2lG+idQNGmwcKXu/8xEj/P6qe/sB2WmwNp6pp8jaISMkwdleFXYK55NHWLTTbutSUqjBfDGWo/Yg918qQ+8BRZSAHZbfuNZz2O0sov1Ue4CWlVg3rFhM3Kljj9ksGd/NUhk4nH+a5UN2+1i8+NM3vRNp7uQ6sqexSCukEVlVZriHNqFi5rLm9TMWa4qm3idJqppQACol2l4VSuvWLfta4JcXy3bROPNbXOgdOhG47LC0CwW/dMlSx4Jf17aEU3yA1x9p+Yc0jupXgcMuYNku64iYOkGToVDuJvlbEKlJqsmiHbvNrIVZEH+yFdF8DbleZ6iNiWwMqvtMp/mSpwx5KxRrT9p3MAPTHGtMbfvdFhyj9vhaKcn3At8Lc16Ai+vBcSp1ztXi7rCJZx/ql7TXcclq6Q76UeKWDy9boS0WHIjUuWhPG8LBmW5y2rhuTpM5vsLt+HOLh1Yf0DqXa9tsfC+kaKt2htA0ai/L2i7RKoNjEwztkmRU0GfgW1TxUvPFhg0V7DdfWJk5gfrccpYv+MA9M0dkGTLECeYwUixRzjRFdmjG7zdZIl3XKB9YliNKI31lfa7i2JG5C8Ss+rHe0D7Z696/V3DEAOWHnQ9yNahMUl5kENWS6pHKKp2D1BaSrrHdE1w2qNxIztpXgUIrF0bm15YML4b6V1k+GpNysTahKMVrrS85lTVo9OGJ96I47eAy5rYWpRf/mIzeoYU1DKaQCTUVwrhHeyNoDqHel+lLxr9WKzhSYw7vrR6+V5q0pfi2k3L1zqkubY6rrd9ZLvSuWNf0uqnkY+FpTvFzSW9Fp0b9l8JA7THV9eCi/PY/SCZIUYx3BU2alj7Cm3VV6eYpios4b6WuNOJdYXUK3zTqj5CVG2FqYM4Z7CuIU0qO05XR0d71FHM0YhZmJmTRfLlXEumN82BGtzdX0S19t1e+bUieK8zRmqpa4Qc5TSjifmaQsY2ETLjhI36gMR1+7qpjdXXHiceUekfBaucHShAOiFXmv3sNmGQyU5iVgnoocuonQXEPTFwslHtS8R+A47StI9wj0iSrtbi5rMysczFiImsQ+bdFClnFjjpXXwMy6O7qfjOr8Fb0a7ODItisjnn3EQO16+ypd1cwyaAW5Yzxz5QknfMO7643fXW/I9y3U2xH27Oapqr56Z/tEzglj6IbT6HEHjopiXqeRbe5mQQvxtcbDOVverN0ZgMdzqRYRjaXtMRd56Q4cZSmdPvZJdSrhJ1D9zNXPqAEqPIavPdfubt5oke2kmv0dztIszSv2VYuoyf1UuopbsYb+uX9h6WpwjpgtZ6fNNawNJ4q8O3CFoSbioAaOSZMx2GYaPYB+rEb6qjQiNRFQ76TvwNFVKD+BhH9VhcKGsXzmMI7BptU/CNWolM7YzROvpFAntsiWJp6eR2d3GarcYShVYSUqhmYOWj5E96NK2WvmYNTeY7Zs4RUEdv9h9QT4EseKt6LzLrqEOs3hxAY1MaNWpSa6zZx8F3YOVeCYMS88W+CYHDuWe4yoc6YK+djDuEOrBR5lvh0r+Q9uM88lrjx9x9AtgpQVNE8r+3O6Gvw59D+kBF/UMXyhliYUtPjmvXGY6Dk3x+kEOW+GtdMVC4EZTqoS/jmR0P0LS75DOc/w2vnri97M4SdbZ8qeU7gg8DVbERkU5geaMQO3mYrSYyAngeUQqrN0C0/vsFmcgWNXNeidsTAj7/4MncJR0caaBUpbLK1yBCBNRjEv6KvuVSdpPnEMJdsRRtqJ+U8tN1gXA4ePHc6ZT0eviI73UOJF0fEZ8YaneAQqQdGphNvwM4nIqPnXxV0xA0fnCT+oAhJuyw/q8jO0y8CjSteZExwBpIN6SvNp6A5G/abi6egeND/1GTguhuNjaUbbnSbGd4L8937Ezm34Eyi6n1maeOBxh3PI0jzJDf5mh/BsLD7F2GOKvlA/5gtvxI3/eV4sLfKW5Wy+oio+es/u6T8UU+nsofy57Icb/JlZHPFtCgd/x+bwt3ZT+xXTtTtTrGAb4QehC6X9G+8YT+ozcLxDsdCjsuOqwPFnrdLYaFc92Ui0m4fr39lYmlCaqTit7G6O/3kWDkgtXjNH4BiEm/+jegQnihOtfffn33WxsFjhfMd48HT+f6o6X65j7XR8WLSHMFkxbvOYsrRsF1bowDuSQ18Mkxk4qz2zoGPL5fu9h2Hqmt1asl3Q3Yu3szOc+spiCmX4AETBM3pLoTYSp3sVxahyhL8eC4mPN9k2x3o0xkiixIzM3CZFzf5oR4mecQ5+ax2wCah3/crmnHoqR0+KMaOPxRif1oEFRFOO/kTPPmtww+NfMXxEK6gn6iU32U6fFruIz8Q4WgljtnaCVTBgWx7diUdshC9ZEa5yKpRBBeW12r/iNc/+EgNqmhswNB8SBoihHXeDF7rrWDLcmt3V8GYYN7pXRy4DZjj4DJuUBL5iC3DQAaoo4vkftqVTYRGLS3mHZ7gdmdTTqbgNN/PTdTCOTgXolc88MhXAEUMdX0iy1JMuk5wLsgeu0QUYlz2S4skTWwJz6pOm/8ihrmgGfFgri+ZWUK2gAPHgbWa8jaocdSuM4FJYoKicYX/ZSENkg9Q1ZzJfwScfVnR2DegOGwCvmogaWJCLQepv9WNlU6QgsmOwICquU28Mlk3d9W5E81lU/5Ez0LcX6lwKMWDNluNKfBDUy/phJgBcMnfkh9iRxrdOzgs08JdPB85Lwo+GUSb4t3nC+0byqMZtO2fQJ4U2zGIr49t/28qmmGv2RanDD7a3FEcdtutkW8twwwlUSpb8QalodddbBfNHKDQ828BdE7OBgFdiKYohLawFYqpybQoxATZrheLhdI7+0Zlu9Q1myRcd15r9UIm8K2LGJxqTegntqNVMKnf1a8zQiyUR1rxoqjiFxeHxqFcYUTHfDu7rhbWng6qOxOsI+5A1p9mRyEPdVkTlE24vY54W7bWc6jMgZvNXdfC9/9q7408KDsbdL7Utz7QFSDetz2picArzrdpL8OaCHC9V26RroemtDZ5yNM/KGkWMyTmfnInEvwtSD23UcFcjhaE3VKzkoaEMKGBft4XbIO6forTY1lmGQwVmKicBCiArDzE+1oIxE08fWeviIOD5TznqH+OoHadvoOP20drMPe5Irg3XBQziW2XDuHYzjqQQ4wySssjXUs5H+t3FWYMHppUnBHMx/nYIT5d7OmjDbgD9F6na3m4l7KdkeSO3kTEPXafiWinogag7b52taiZhL1TSvBFmEZafFq2H8khQaZXuitCewT5FBgVtPK0j4xUHPfUz3Q28eac1Z139DAP23dgki94EC8vbDPTQC97HPPSWjUNG5tWKMsaxAEMKC0665Xvo1Ntd07wCLNf8Q56mrEPVpCxlIMVlQlWRxM3oAfpgIc+8KC3rEXUog5g06vt7zgXY8grH7hhwVSaeuvC06YYRAwpbyk/Unzj9hLEZNs2oxPQB9yc+GnL6zTgq7rI++KDJwX2SP8Sd6YzTuw5lV/kU6eQxRD12omfQAW6caTR4LikYkBB1CMOrvgRr/VY75+NSB40Cni6bADAtaK+vyxVWpf9NeKJxN2KYQ8Q2xPB3K1s7fuhvWbr2XpgW044VD6DRs0qXoqKf1NFsaGvKJc47leUV3pppP/5VTKFhaGuol4Esfjf5zyCyUHmHthChcYh4hYLQF+AFWsuq4t0wJyWgdwQVOZiV0efRHPoK5+E1vjz9wTJmVkITC9oEstAsyZSgE/dbicwKr89YUxKZI+owD205Tm5lnnmDRuP/JnzxX3gMtlrcX0UesZdxyQqYQuEW4R51vmQ5xOZteUd8SJruMlTUzhtVw/Nq7eUBcqN2/HVotgfngif60yKEtoUx3WYOZlVJuJOh8u59fzSDPFYtQgqDUAGyGhQOAvKroXMcOYY0qjnStJR/G3aP+Jt1sLVlGV8POwr/6OGsqetnyF3TmTqZjENfnXh51oxe9qVUw2M78EzAJ+IM8lZ1MBPQ9ZWSVc4J3mWSrLKrMHReA5qdGoz0ODRsaA+vwxXA2cAM4qlfzBJA6581m4hzxItQw5dxrrBL3Y6kCbUcFxo1S8jyV44q//+7ASNNudZ6xeaNOSIUffqMn4A9lIjFctYn2gpEPAb3f7p3iIBN8H14FUGQ9ct2hPsL+cEsTgUrR47uJVN4n4wt/wgfwwHuOnLd4yobkofy8JvxSQTA7rMpDIc608SlZFJfZYcmbT0tAHpPE8MrtQ42siTUNWxqvWZOmvu9f0JPoQmg+6l7sZWwyfi6PXkxJnwBraUG0MYG4zYHQz3igy/XsFkx5tNQxw43qvI9dU3f0DdhOUlHKjmi1VAr2Kiy0HZwD8VeEbhh0OiDdMYspolQsYdSwjCcjeowIXNZVUPmL2wwIkYhmXKhGozdCJ4lRKbsf4NBh/XnQoS92NJEWOVOFs2YhN8c5QZFeK0pRdAG40hqvLbmoSA8xQmzOOEc7wLcme9JOsjPCEgpCwUs9E2DohMHRhUeyGIN6TFvrbny8nDuilsDpzrH5mS76APoIEJmItS67sQJ+nfwddzmjPxcBEBBCw0kWDwd0EZCkNeOD7NNQhtBm7KHL9mRxj6U1yWU2puzlIDtpYxdH4ZPeXBJkTGAJfUr/oTCz/iypY6uXaR2V1doPxJYlrw2ghH0D5gbrhFcIxzYwi4a/4hqVdf2DdxBp6vGYDjavxMAAoy+1+3aiO6S3W/QAKNVXagDtvsNtx7Ks+HKgo6U21B+QSZgIogV5Bt+BnXisdVfy9VyXV+2P5fMuvdpAjM1o/K9Z+XnE4EOCrue+kcdYHqAQ0/Y/OmNlQ6OI33jH/uD1RalPaHpJAm2av0/xtpqdXVKNDrc9F2izo23Wu7firgbURFDNX9eGGeYBhiypyXZft2j3hTvzE6PMWKsod//rEILDkzBXfi7xh0eFkfb3/1zzPK/PI5Nk3FbZyTl4mq5BfBoVoqiPHO4Q4QKZAlrQ3MdNfi3oxIjvsM3kAFv3fdufurqYR3PSwX/mpGy/GFI/B2MNPiNdOppWVbs/gjF3YH+QA9jMhlAbhvasAHstB0IJew09iAkmXHl1/TEj+jvHOpOGrPRQXbPADM+Ig2/OEcUcpgPTItMtW4DdqgfYVI/+4hAFWYjUGpOP/UwNuB7+BbKOcALbjobdgzeBQfjgNSp2GOpxzGLj70Vvq5cw2AoYENwKLUtJUX8sGRox4dVa/TN4xKwaKcl9XawQR/uNus700Hf17pyNnezrUgaY9e4MADhEDBpsJT6y1gDJs1q6wlwGhuUzGR7C8kgpjPyHWwsvrf3yn1zJEIRa5eSxoLAZOCR9xbuztxFRJW9ZmMYfCFJ0evm9F2fVnuje92Rc4Pl6A8bluN8MZyyJGZ0+sNSb//DvAFxC2BqlEsFwccWeAl6CyBcQV1bx4mQMBP1Jxqk1EUADNLeieS2dUFbQ/c/kvwItbZ7tx0st16viqd53WsRmPTKv2AD8CUnhtPWg5aUegNpsYgasaw2+EVooeNKmrW3MFtj76bYHJm5K9gpAXZXsE5U8DM8XmVOSJ1F1WnLy6nQup+jx52bAb+rCq6y9WXl2B2oZDhfDkW7H3oYfT/4xx5VncBuxMXP2lNfhUVQjSSzSRbuZFE4vFawlzveXxaYKVs8LpvAb8IRYF3ZHiRnm0ADeNPWocwxSzNseG7NrSEVZoHdKWqaGEBz1N8Pt7kFbqh3LYmAbm9i1IChIpLpM5AS6mr6OAPHMwwznVy61YpBYX8xZDN/a+lt7n+x5j4bNOVteZ8lj3hpAHSx1VR8vZHec4AHO9XFCdjZ9eRkSV65ljMmZVzaej2qFn/qt1lvWzNZEfHxK3qOJrHL6crr0CRzMox5f2e8ALBB4UGFZKA3tN6F6IXd32GTJXGQ7DTi9j/dNcLF9jCbDcWGKxoKTYblIwbLDReL00LRcDPMcQuXLMh5YzgtfjkFK1DP1iDzzYYVZz5M/kWYRlRpig1htVRjVCknm+h1M5LiEDXOyHREhvzCGpFZjHS0RsK27o2avgdilrJkalWqPW3D9gmwV37HKmfM3F8YZj2ar+vHFvf3B8CRoH4kDHIK9mrAg+owiEwNjjd9V+FsQKYR8czJrUkf7Qoi2YaW6EVDZp5zYlqiYtuXOTHk4fAcZ7qBbdLDiJq0WNV1l2+Hntk1mMWvxrYmc8kIx8G3rW36J6Ra4lLrTOCgiOihmow+YnzUT19jbV2B3RWqSHyxkhmgsBqMYWvOcUom1jDQ436+fcbu3xf2bbeqU/ca+C4DOKE+e3qvmeMqW3AxejfzBRFVcwVYPq4L0APSWWoJu+5UYX4qg5U6YTioqQGPG9XrnuZ/BkxuYpe6Li87+18EskyQW/uA+uk2rpHpr6hut2TlVbKgWkFpx+AZffweiw2+VittkEyf/ifinS/0ItRL2Jq3tQOcxPaWO2xrG68GdFoUpZgFXaP2wYVtRc6xYCfI1CaBqyWpg4bx8OHBQwsV4XWMibZZ0LYjWEy2IxQ1mZrf1/UNbYCJplWu3nZ4WpodIGVA05d+RWSS+ET9tH3RfGGmNI1cIY7evZZq7o+a0bjjygpmR3mVfalkT/SZGT27Q8QGalwGlDOS9VHCyFAIL0a1Q7JiW3saz9gqY8lqKynFrPCzxkU4SIfLc9VfCI5edgRhDXs0edO992nhTKHriREP1NJC6SROMgQ0xO5kNNZOhMOIT99AUElbxqeZF8A3xrfDJsWtDnUenAHdYWSwAbYjFqQZ+D5gi3hNK8CSxU9i6f6ClL9IGlj1OPMQAsr84YG6ijsJpCaGWj75c3yOZKBB9mNpQNPUKkK0D6wgLH8MGoyRxTX6Y05Q4AnYNXMZwXM4eij/9WpsM/9CoRnFQXGR6MEaY+FXvXEO3RO0JaStk6OXuHVATHJE+1W+TU3bSZ2ksMtqjO0zfSJCdBv7y2d8DMx6TfVme3q0ZpTKMMu4YL/t7ciTNtdDkwPogh3Cnjx7qk08SHwf+dksZ7M2vCOlfsF0hQ6J4ehPCaHTNrM/zBSOqD83dBEBCW/F/LEmeh0nOHd7oVl3/Qo/9GUDkkbj7yz+9cvvu+dDAtx8NzCDTP4iKdZvk9MWiizvtILLepysflSvTLFBZ37RLwiriqyRxYv/zrgFd/9XVHh/OmzBvDX4mitMR/lUavs2Vx6cR94lzAkplm3IRNy4TFfu47tuYs9EQPIPVta4P64tV+sZ7n3ued3cgEx2YK+QL5+xms6osk8qQbTyuKVGdaX9FQqk6qfDnT5ykxk0VK7KZ62b6DNDUfQlqGHxSMKv1P0XN5BqMeKG1P4Wp5QfZDUCEldppoX0U6ss2jIko2XpURKCIhfaOqLPfShdtS37ZrT+jFRSH2xYVV1rmT/MBtRQhxiO4MQ3iAGlaZi+9PWBEIXOVnu9jN1f921lWLZky9bqbM3J2MAAI9jmuAx3gyoEUa6P2ivs0EeNv/OR+AX6q5SW6l5HaoFuS6jr6yg9limu+P0KYKzfMXWcQSfTXzpOzKEKpwI3YGXZpSSy2LTlMgfmFA3CF6R5c9xWEtRuCg2ZPUQ2Nb6dRFTNd4TfGHrnEWSKHPuRyiJSDAZ+KX0VxmSHjGPbQTLVpqixia2uyhQ394gBMt7C3ZAmxn/DJS+l1fBsAo2Eir/C0jG9csd4+/tp12pPc/BVJGaK9mfvr7M/CeztrmCO5qY06Edi4xAGtiEhnWAbzLy2VEyazE1J5nPmgU4RpW4Sa0TnOT6w5lgt3/tMpROigHHmexBGAMY0mdcDbDxWIz41NgdD6oxgHsJRgr5RnT6wZAkTOcStU4NMOQNemSO7gxGahdEsC+NRVGxMUhQmmM0llWRbbmFGHzEqLM4Iw0H7577Kyo+Zf+2cUFIOw93gEY171vQaM0HLwpjpdRR6Jz7V0ckE7XzYJ0TmY9znLdzkva0vNrAGGT5SUZ5uaHDkcGvI0ySpwkasEgZPMseYcu85w8HPdSNi+4T6A83iAwDbxgeFcB1ZM2iGXzFcEOUlYVrEckaOyodfvaYSQ7GuB4ISE0nYJc15X/1ciDTPbPCgYJK55VkEor4LvzL9S2WDy4xj+6FOqVyTAC2ZNowheeeSI5hA/02l8UYkv4nk9iaVn+kCVEUstgk5Hyq+gJm6R9vG3rhuM904he/hFmNQaUIATB1y3vw+OmxP4X5Yi6A5I5jJufHCjF9+AGNwnEllZjUco6XhsO5T5+R3yxz5yLVOnAn0zuS+6zdj0nTJbEZCbXJdtpfYZfCeCOqJHoE2vPPFS6eRLjIJlG69X93nfR0mxSFXzp1Zc0lt/VafDaImhUMtbnqWVb9M4nGNQLN68BHP7AR8Il9dkcxzmBv8PCZlw9guY0lurbBsmNYlwJZsA/B15/HfkbjbwPddaVecls/elmDHNW2r4crAx43feNkfRwsaNq/yyJ0d/p5hZ6AZajz7DBfUok0ZU62gCzz7x8eVfJTKA8IWn45vINLSM1q+HF9CV9qF3zP6Ml21kPPL3CXzkuYUlnSqT+Ij4tI/od5KwIs+tDajDs64owN7tOAd6eucGz+KfO26iNcBFpbWA5732bBNWO4kHNpr9D955L61bvHCF/mwSrz6eQaDjfDEANqGMkFc+NGxpKZzCD2sj/JrHd+zlPQ8Iz7Q+2JVIiVCuCKoK/hlAEHzvk/Piq3mRL1rT/fEh9hoT5GJmeYswg1otiKydizJ/fS2SeKHVu6Z3JEHjiW8NaTQgP5xdBli8nC57XiN9hrquBu99hn9zqwo92+PM2JXtpeVZS0PdqR5mDyDreMMtEws+CpwaRyyzoYtfcvt9PJIW0fJVNNi/FFyRsea7peLvJrL+5b4GOXJ8tAr+ATk9f8KmiIsRhqRy0vFzwRV3Z5dZ3QqIU8JQ/uQpkJbjMUMFj2F9sCFeaBjI4+fL/oN3+LQgjI4zuAfQ+3IPIPFQBccf0clJpsfpnBxD84atwtupkGqKvrH7cGNl/QcWcSi6wcVDML6ljOgYbo+2BOAWNNjlUBPiyitUAwbnhFvLbnqw42kR3Yp2kv2dMeDdcGOX5kT4S6M44KHEB/SpCfl7xgsUvs+JNY9G3O2X/6FEt9FyAn57lrbiu+tl83sCymSvq9eZbe9mchL7MTf/Ta78e80zSf0hYY5eUU7+ff14jv7Xy8qjzfzzzvaJnrIdvFb5BLWKcWGy5/w7+vV2cvIfwHqdTB+RuJK5oj9mbt0Hy94AmjMjjwYNZlNS6uiyxNnwNyt3gdreLb64p/3+08nXkb92LTkkRgFOwk1oGEVllcOj5lv1hfAZywDows0944U8vUFw+A/nuVq/UCygsrmWIBnHyU01d0XJPwriEOvx/ISK6Pk4y2w0gmojZs7lU8TtakBAdne4v/aNxmMpK4VcGMp7si0yqsiolXRuOi1Z1P7SqD3Zmp0CWcyK4Ubmp2SXiXuI5nGLCieFHKHNRIlcY3Pys2dwMTYCaqlyWSITwr2oGXvyU3h1Pf8eQ3w1bnD7ilocVjYDkcXR3Oo1BXgMLTUjNw2xMVwjtp99NhSVc5aIWrDQT5DHPKtCtheBP4zHcw4dz2eRdTMamhlHhtfgqJJHI7NGDUw1XL8vsSeSHyKqDtqoAmrQqsYwvwi7HW3ojWyhIa5oz5xJTaq14NAzFLjVLR12rRNUQ6xohDnrWFb5bG9yf8aCD8d5phoackcNJp+Dw3Due3RM+5Rid7EuIgsnwgpX0rUWh/nqPtByMhMZZ69NpgvRTKZ62ViZ+Q7Dp5r4K0d7EfJuiy06KuIYauRh5Ecrhdt2QpTS1k1AscEHvapNbU3HL1F2TFyR33Wxb5MvH5iZsrn3SDcsxlnnshO8PLwmdGN+paWnQuORtZGX37uhFT64SeuPsx8UOokY6ON85WdQ1dki5zErsJGazcBOddWJEKqNPiJpsMD1GrVLrVY+AOdPWQneTyyP1hRX/lMM4ZogGGOhYuAdr7F/DOiAoc++cn5vlf0zkMUJ40Z1rlgv9BelPqVOpxKeOpzKdF8maK+1Vv23MO9k/8+qpLoxrIGH2EDQlnGmH8CD31G8QqlyQIcpmR5bwmSVw9/Ns6IHgulCRehvZ/+VrM60Cu/r3AontFfrljew74skYe2uyn7JKQtFQBQRJ9ryGic/zQOsbS4scUBctA8cPToQ3x6ZBQu6DPu5m1bnCtP8TllLYA0UTQNVqza5nfew3Mopy1GPUwG5jsl0OVXniPmAcmLqO5HG8Hv3nSLecE9oOjPDXcsTxoCBxYyzBdj4wmnyEV4kvFDunipS8SSkvdaMnTBN9brHUR8xdmmEAp/Pdqk9uextp1t+JrtXwpN/MG2w/qhRMpSNxQ1uhg/kKO30eQ/FyHUDkWHT8V6gGRU4DhDMxZu7xXij9Ui6jlpWmQCqJg3FkOTq3WKneCRYZxBXMNAVLQgHXSCGSqNdjebY94oyIpVjMYehAiFx/tqzBXFHZaL5PeeD74rW5OysFoUXY8sebUZleFTUa/+zBKVTFDopTReXNuZq47QjkWnxjirCommO4L/GrFtVV21EpMyw8wyThL5Y59d88xtlx1g1ttSICDwnof6lt/6zliPzgVUL8jWBjC0o2D6Kg+jNuThkAlaDJsq/AG2aKA//A76avw2KNqtv223P+Wq3StRDDNKFFgtsFukYt1GFDWooFVXitaNhb3RCyJi4cMeNjROiPEDb4k+G3+hD8tsg+5hhmSc/8t2JTSwYoCzAI75doq8QTHe+E/Tw0RQSUDlU+6uBeNN3h6jJGX/mH8oj0i3caCNsjvTnoh73BtyZpsflHLq6AfwJNCDX4S98h4+pCOhGKDhV3rtkKHMa3EG4J9y8zFWI4UsfNzC/Rl5midNn7gwoN9j23HGCQQ+OAZpTTPMdiVow740gIyuEtd0qVxMyNXhHcnuXRKdw5wDUSL358ktjMXmAkvIB73BLa1vfF9BAUZInPYJiwxqFWQQBVk7gQH4ojfUQ/KEjn+A/WR6EEe4CtbpoLe1mzHkajgTIoE0SLDHVauKhrq12zrAXBGbPPWKCt4DGedq3JyGRbmPFW32bE7T20+73BatV/qQhhBWfWBFHfhYWXjALts38FemnoT+9bn1jDBMcUMmYgSc0e7GQjv2MUBwLU8ionCpgV+Qrhg7iUIfUY6JFxR0Y+ZTCPM+rVuq0GNLyJXX6nrUTt8HzFBRY1E/FIm2EeVA9NcXrj7S6YYIChVQCWr/m2fYUjC4j0XLkzZ8GCSLfmkW3PB/xq+nlXsKVBOj7vTvqKCOMq7Ztqr3cQ+N8gBnPaAps+oGwWOkbuxnRYj/x/WjiDclVrs22xMK4qArE1Ztk1456kiJriw6abkNeRHogaPRBgbgF9Z8i/tbzWELN4CvbqtrqV9TtGSnmPS2F9kqOIBaazHYaJ9bi3AoDBvlZasMluxt0BDXfhp02Jn411aVt6S4TUB8ZgFDkI6TP6gwPY85w+oUQSsjIeXVminrwIdK2ZAawb8Se6XOJbOaliQxHSrnAeONDLuCnFejIbp4YDtBcQCwMsYiRZfHefuEJqJcwKTTJ8sx5hjHmJI1sPFHOr6W9AhZ2NAod38mnLQk1gOz2LCAohoQbgMbUK9RMEA3LkiF7Sr9tLZp6lkciIGhE2V546w3Mam53VtVkGbB9w0Yk2XiRnCmbpxmHr2k4eSC0RuNbjNsUfDIfc8DZvRvgUDe1IlKdZTzcT4ZGEb53dp8VtsoZlyXzLHOdAbsp1LPTVaHvLA0GYDFMbAW/WUBfUAdHwqLFAV+3uHvYWrCfhUOR2i89qvCBoOb48usAGdcF2M4aKn79k/43WzBZ+xR1L0uZfia70XP9soQReeuhZiUnXFDG1T8/OXNmssTSnYO+3kVLAgeiY719uDwL9FQycgLPessNihMZbAKG7qwPZyG11G1+ZA3jAX2yddpYfmaKBlmfcK/V0mwIRUDC0nJSOPUl2KB8h13F4dlVZiRhdGY5farwN+f9hEb1cRi41ZcGDn6Xe9MMSTOY81ULJyXIHSWFIQHstVYLiJEiUjktlHiGjntN5/btB8Fu+vp28zl2fZXN+dJDyN6EXhS+0yzqpl/LSJNEUVxmu7BsNdjAY0jVsAhkNuuY0E1G48ej25mSt+00yPbQ4SRCVkIwb6ISvYtmJRPz9Zt5dk76blf+lJwAPH5KDF+vHAmACLoCdG2Adii6dOHnNJnTmZtoOGO8Q1jy1veMw6gbLFToQmfJa7nT7Al89mRbRkZZQxJTKgK5Kc9INzmTJFp0tpAPzNmyL/F08bX3nhCumM/cR/2RPn9emZ3VljokttZD1zVWXlUIqEU7SLk5I0lFRU0AcENXBYazNaVzsVHA/sD3o9hm42wbHIRb/BBQTKzAi8s3+bMtpOOZgLdQzCYPfX3UUxKd1WYVkGH7lh/RBBgMZZwXzU9+GYxdBqlGs0LP+DZ5g2BWNh6FAcR944B+K/JTWI3t9YyVyRhlP4CCoUk/mmF7+r2pilVBjxXBHFaBfBtr9hbVn2zDuI0kEOG3kBx8CGdPOjX1ph1POOZJUO1JEGG0jzUy2tK4X0CgVNYhmkqqQysRNtKuPdCJqK3WW57kaV17vXgiyPrl4KEEWgiGF1euI4QkSFHFf0TDroQiLNKJiLbdhH0YBhriRNCHPxSqJmNNoketaioohqMglh6wLtEGWSM1EZbQg72h0UJAIPVFCAJOThpQGGdKfFovcwEeiBuZHN2Ob4uVM7+gwZLz1D9E7ta4RmMZ24OBBAg7Eh6dLXGofZ4U2TFOCQMKjwhVckjrydRS+YaqCw1kYt6UexuzbNEDyYLTZnrY1PzsHZJT4U+awO2xlqTSYu6n/U29O2wPXgGOEKDMSq+zTUtyc8+6iLp0ivav4FKx+xxVy4FxhIF/pucVDqpsVe2jFOfdZhTzLz2QjtzvsTCvDPU7bzDH2eXVKUV9TZ+qFtaSSxnYgYdXKwVreIgvWhT9eGDB2OvnWyPLfIIIfNnfIxU8nW7MbcH05nhlsYtaW9EZRsxWcKdEqInq1DiZPKCz7iGmAU9/ccnnQud2pNgIGFYOTAWjhIrd63aPDgfj8/sdlD4l+UTlcxTI9jbaMqqN0gQxSHs60IAcW3cH4p3V1aSciTKB29L1tz2eUQhRiTgTvmqc+sGtBNh4ky0mQJGsdycBREP+fAaSs1EREDVo5gvgi5+aCN7NECw30owbCc1mSpjiahyNVwJd1jiGgzSwfTpzf2c5XJvG/g1n0fH88KHNnf+u7ZiRMlXueSIsloJBUtW9ezvsx9grfsX/FNxnbxU1Lvg0hLxixypHKGFAaPu0xCD8oDTeFSyfRT6s8109GMUZL8m2xXp8X2dpPCWWdX84iga4BrTlOfqox4shqEgh/Ht4qRst52cA1xOIUuOxgfUivp6v5f8IVyaryEdpVk72ERAwdT4aoY1usBgmP+0m06Q216H/nubtNYxHaOIYjcach3A8Ez/zc0KcShhel0HCYjFsA0FjYqyJ5ZUH1aZw3+zWC0hLpM6GDfcAdn9fq2orPmZbW6XXrf+Krc9RtvII5jeD3dFoT1KwZJwxfUMvc5KLfn8rROW23Jw89sJ2a5dpB3qWDUBWF2iX8OCuKprHosJ2mflBR+Wqs86VvgI/XMnsqb97+VlKdPVysczPj8Jhzf+WCvGBHijAqYlavbF60soMWlHbvKT+ScvhprgeTln51xX0sF+Eadc/l2s2a5BgkVbHYyz0E85p0LstqH+gEGiR84nBRRFIn8hLSZrGwqjZ3E29cuGi+5Z5bp7EM8MWFa9ssS/vy4VrDfECSv7DSU84DaP0sXI3Ap4lWznQ65nQoTKRWU30gd7Nn8ZowUvGIx4aqyXGwmA/PB4qN8msJUODezUHEl0VP9uo+cZ8vPFodSIB4C7lQYjEFj8yu49C2KIV3qxMFYTevG8KqAr0TPlkbzHHnTpDpvpzziAiNFh8xiT7C/TiyH0EguUw4vxAgpnE27WIypV+uFN2zW7xniF/n75trs9IJ5amB1zXXZ1LFkJ6GbS/dFokzl4cc2mamVwhL4XU0Av5gDWAl+aEWhAP7t2VIwU+EpvfOPDcLASX7H7lZpXA2XQfbSlD4qU18NffNPoAKMNSccBfO9YVVgmlW4RydBqfHAV7+hrZ84WJGho6bNT0YMhxxLdOx/dwGj0oyak9aAkNJ8lRJzUuA8sR+fPyiyTgUHio5+Pp+YaKlHrhR41jY5NESPS3x+zTMe0S2HnLOKCOQPpdxKyviBvdHrCDRqO+l96HhhNBLXWv4yEMuEUYo8kXnYJM8oIgVM4XJ+xXOev4YbWeqsvgq0lmw4/PiYr9sYLt+W5EAuYSFnJEan8CwJwbtASBfLBBpJZiRPor/aCJBZsM+MhvS7ZepyHvU8m5WSmaZnxuLts8ojl6KkS8oSAHkq5GWlCB/NgJ5W3rO2Cj1MK7ahxsCrbTT3a0V/QQH+sErxV4XUWDHx0kkFy25bPmBMBQ6BU3HoHhhYcJB9JhP6NXUWKxnE0raXHB6U9KHpWdQCQI72qevp5fMzcm+AvC85rsynVQhruDA9fp9COe7N56cg1UKGSas89vrN+WlGLYTwi5W+0xYdKEGtGCeNJwXKDU0XqU5uQYnWsMwTENLGtbQMvoGjIFIEMzCRal4rnBAg7D/CSn8MsCvS+FDJJAzoiioJEhZJgAp9n2+1Yznr7H+6eT4YkJ9Mpj60ImcW4i4iHDLn9RydB8dx3QYm3rsX6n4VRrZDsYK6DCGwkwd5n3/INFEpk16fYpP6JtMQpqEMzcOfQGAHXBTEGzuLJ03GYQL9bmV2/7ExDlRf+Uvf1sM2frRtCWmal12pMgtonvSCtR4n1CLUZRdTHDHP1Otwqd+rcdlavnKjUB/OYXQHUJzpNyFoKpQK+2OgrEKpGyIgIBgn2y9QHnTJihZOpEvOKIoHAMGAXHmj21Lym39Mbiow4IF+77xNuewziNVBxr6KD5e+9HzZSBIlUa/AmsDFJFXeyrQakR3FwowTGcADJHcEfhGkXYNGSYo4dh4bxwLM+28xjiqkdn0/3R4UEkvcBrBfn/SzBc1XhKM2VPlJgKSorjDac96V2UnQYXl1/yZPT4DVelgO+soMjexXwYO58VLl5xInQUZI8jc3H2CPnCNb9X05nOxIy4MlecasTqGK6s2az4RjpF2cQP2G28R+7wDPsZDZC/kWtjdoHC7SpdPmqQrUAhMwKVuxCmYTiD9q/O7GHtZvPSN0CAUQN/rymXZNniYLlJDE70bsk6Xxsh4kDOdxe7A2wo7P9F5YvqqRDI6brf79yPCSp4I0jVoO4YnLYtX5nzspR5WB4AKOYtR1ujXbOQpPyYDvfRE3FN5zw0i7reehdi7yV0YDRKRllGCGRk5Yz+Uv1fYl2ZwrnGsqsjgAVo0xEUba8ohjaNMJNwTwZA/wBDWFSCpg1eUH8MYL2zdioxRTqgGQrDZxQyNzyBJPXZF0+oxITJAbj7oNC5JwgDMUJaM5GqlGCWc//KCIrI+aclEe4IA0uzv7cuj6GCdaJONpi13O544vbtIHBF+A+JeDFUQNy61Gki3rtyQ4aUywn6ru314/dkGiP8Iwjo0J/2Txs49ZkwEl4mx+iYUUO55I6pJzU4P+7RRs+DXZkyKUYZqVWrPF4I94m4Wx1tXeE74o9GuX977yvJ/jkdak8+AmoHVjI15V+WwBdARFV2IPirJgVMdsg1Pez2VNHqa7EHWdTkl3XTcyjG9BiueWFvQfXI8aWSkuuRmqi/HUuzqyvLJfNfs0txMqldYYflWB1BS31WkuPJGGwXUCpjiQSktkuBMWwHjSkQxeehqw1Kgz0Trzm7QbtgxiEPDVmWCNCAeCfROTphd1ZNOhzLy6XfJyG6Xgd5MCAZw4xie0Sj5AnY1/akDgNS9YFl3Y06vd6FAsg2gVQJtzG7LVq1OH2frbXNHWH/NY89NNZ4QUSJqL2yEcGADbT38X0bGdukqYlSoliKOcsSTuqhcaemUeYLLoI8+MZor2RxXTRThF1LrHfqf/5LcLAjdl4EERgUysYS2geE+yFdasU91UgUDsc2cSQ1ZoT9+uLOwdgAmifwQqF028INc2IQEDfTmUw3eZxvz7Ud1z3xc1PQfeCvfKsB9jOhRj7rFyb9XcDWLcYj0bByosychMezMLVkFiYcdBBQtvI6K0KRuOZQH2kBsYHJaXTkup8F0eIhO1/GcIwWKpr2mouB7g5TUDJNvORXPXa/mU8bh27TAZYBe2sKx4NSv5OjnHIWD2RuysCzBlUfeNXhDd2jxnHoUlheJ3jBApzURy0fwm2FwwsSU0caQGl0Kv8hopRQE211NnvtLRsmCNrhhpEDoNiZEzD2QdJWKbRRWnaFedXHAELSN0t0bfsCsMf0ktfBoXBoNA+nZN9+pSlmuzspFevmsqqcMllzzvkyXrzoA+Ryo1ePXpdGOoJvhyru+EBRsmOp7MXZ0vNUMUqHLUoKglg1p73sWeZmPc+KAw0pE2zIsFFE5H4192KwDvDxdxEYoDBDNZjbg2bmADTeUKK57IPD4fTYF4c6EnXx/teYMORBDtIhPJneiZny7Nv/zG+YmekIKCoxr6kauE2bZtBLufetNG0BtBY7f+/ImUypMBvdWu/Q7vTMRzw5aQGZWuc1V0HEsItFYMIBnoKGZ0xcarba/TYZq50kCaflFysYjA4EDKHqGdpYWdKYmm+a7TADmW35yfnOYpZYrkpVEtiqF0EujI00aeplNs2k+qyFZNeE3CDPL9P6b4PQ/kataHkVpLSEVGK7EX6rAa7IVNrvZtFvOA6okKvBgMtFDAGZOx88MeBcJ8AR3AgUUeIznAN6tjCUipGDZONm1FjWJp4A3QIzSaIOmZ7DvF/ysYYbM/fFDOV0jntAjRdapxJxL0eThpEhKOjCDDq2ks+3GrwxqIFKLe1WdOzII8XIOPGnwy6LKXVfpSDOTEfaRsGujhpS4hBIsMOqHbl16PJxc4EkaVu9wpEYlF/84NSv5Zum4drMfp9yXbzzAOJqqS4YkI4cBrFrC7bMPiCfgI3nNZAqkk3QOZqR+yyqx+nDQKBBBZ7QKrfGMCL+XpqFaBJU0wpkBdAhbR4hJsmT5aynlvkouoxm/NjD5oe6BzVIO9uktM+/5dEC5P7vZvarmuO/lKXz4sBabVPIATuKTrwbJP8XUkdM6uEctHKXICUJGjaZIWRbZp8czquQYfY6ynBUCfIU+gG6wqSIBmYIm9pZpXdaL121V7q0VjDjmQnXvMe7ysoEZnZL15B0SpxS1jjd83uNIOKZwu5MPzg2NhOx3xMOPYwEn2CUzbSrwAs5OAtrz3GAaUkJOU74XwjaYUmGJdZBS1NJVkGYrToINLKDjxcuIlyfVsKQSG/G4DyiO2SlQvJ0d0Ot1uOG5IFSAkq+PRVMgVMDvOIJMdqjeCFKUGRWBW9wigYvcbU7CQL/7meF2KZAaWl+4y9uhowAX7elogAvItAAxo2+SFxGRsHGEW9BnhlTuWigYxRcnVUBRQHV41LV+Fr5CJYV7sHfeywswx4XMtUx6EkBhR+q8AXXUA8uPJ73Pb49i9KG9fOljvXeyFj9ixgbo6CcbAJ7WHWqKHy/h+YjBwp6VcN7M89FGzQ04qbrQtgrOFybg3gQRTYG5xn73ArkfQWjCJROwy3J38Dx/D7jOa6BBNsitEw1wGq780EEioOeD+ZGp2J66ADiVGMayiHYucMk8nTK2zzT9CnEraAk95kQjy4k0GRElLL5YAKLQErJ5rp1eay9O4Fb6yJGm9U4FaMwPGxtKD6odIIHKoWnhKo1U8KIpFC+MVn59ZXmc7ZTBZfsg6FQ8W10YfTr4u0nYrpHZbZ1jXiLmooF0cOm0+mPnJBXQtepc7n0BqOipNCqI6yyloTeRShNKH04FIo0gcMk0H/xThyN4pPAWjDDkEp3lNNPRNVfpMI44CWRlRgViP64eK0JSRp0WUvCWYumlW/c58Vcz/yMwVcW5oYb9+26TEhwvbxiNg48hl1VI1UXTU//Eta+BMKnGUivctfL5wINDD0giQL1ipt6U7C9cd4+lgqY2lMUZ02Uv6Prs+ZEZer7ZfWBXVghlfOOrClwsoOFKzWEfz6RZu1eCs+K8fLvkts5+BX0gyrFYve0C3qHrn5U/Oh6D/CihmWIrY7HUZRhJaxde+tldu6adYJ+LeXupQw0XExC36RETdNFxcq9glMu4cNQSX9cqR/GQYp+IxUkIcNGWVU7ZtGa6P3XAyodRt0XeS3Tp01AnCh0ZbUh4VrSZeV9RWfSoWyxnY3hzcZ30G/InDq4wxRrEejreBxnhIQbkxenxkaxl+k7eLUQkUR6vKJ2iDFNGX3WmVA1yaOH+mvhBd+sE6vacQzFobwY5BqEAFmejwW5ne7HtVNolOUgJc8CsUxmc/LBi8N5mu9VsIA5HyErnS6zeCz7VLI9+n/hbT6hTokMXTVyXJRKSG2hd2labXTbtmK4fNH3IZBPreSA4FMeVouVN3zG5x9CiGpLw/3pceo4qGqp+rVp+z+7yQ98oEf+nyH4F3+J9IheDBa94Wi63zJbLBCIZm7P0asHGpIJt3PzE3m0S4YIWyXBCVXGikj8MudDPB/6Nm2v4IxJ5gU0ii0guy5SUHqGUYzTP0jIJU5E82RHUXtX4lDdrihBLdP1YaG1AGUC12rQKuIaGvCpMjZC9bWSCYnjDlvpWbkdXMTNeBHLKiuoozMGIvkczmP0aRJSJ8PYnLCVNhKHXBNckH79e8Z8Kc2wUej4sQZoH8qDRGkg86maW/ZQWGNnLcXmq3FlXM6ssR/3P6E/bHMvm6HLrv1yRixit25JsH3/IOr2UV4BWJhxXW5BJ6Xdr07n9kF3ZNAk6/Xpc5MSFmYJ2R7bdL8Kk7q1OU9Elg/tCxJ8giT27wSTySF0GOxg4PbYJdi/Nyia9Nn89CGDulfJemm1aiEr/eleGSN+5MRrVJ4K6lgyTTIW3i9cQ0dAi6FHt0YMbH3wDSAtGLSAccezzxHitt1QdhW36CQgPcA8vIIBh3/JNjf/Obmc2yzpk8edSlS4lVdwgW5vzbYEyFoF4GCBBby1keVNueHAH+evi+H7oOVfS3XuPQSNTXOONAbzJeSb5stwdQHl1ZjrGoE49I8+A9j3t+ahhQj74FCSWpZrj7wRSFJJnnwi1T9HL5qrCFW/JZq6P62XkMWTb+u4lGpKfmmwiJWx178GOG7KbrZGqyWwmuyKWPkNswkZ1q8uptUlviIi+AXh2bOOTOLsrtNkfqbQJeh24reebkINLkjut5r4d9GR/r8CBa9SU0UQhsnZp5cP+RqWCixRm7i4YRFbtZ4EAkhtNa6jHb6gPYQv7MKqkPLRmX3dFsK8XsRLVZ6IEVrCbmNDc8o5mqsogjAQfoC9Bc7R6gfw03m+lQpv6kTfhxscDIX6s0w+fBxtkhjXAXr10UouWCx3C/p/FYwJRS/AXRKkjOb5CLmK4XRe0+xeDDwVkJPZau52bzLEDHCqV0f44pPgKOkYKgTZJ33fmk3Tu8SdxJ02SHM8Fem5SMsWqRyi2F1ynfRJszcFKykdWlNqgDA/L9lKYBmc7Zu/q9ii1FPF47VJkqhirUob53zoiJtVVRVwMR34gV9iqcBaHbRu9kkvqk3yMpfRFG49pKKjIiq7h/VpRwPGTHoY4cg05X5028iHsLvUW/uz+kjPyIEhhcKUwCkJAwbR9pIEGOn8z6svAO8i89sJ3dL5qDWFYbS+HGPRMxYwJItFQN86YESeJQhn2urGiLRffQeLptDl8dAgb+Tp47UQPxWOw17OeChLN1WnzlkPL1T5O+O3Menpn4C3IY5LEepHpnPeZHbvuWfeVtPlkH4LZjPbBrkJT3NoRJzBt86CO0Xq59oQ+8dsm0ymRcmQyn8w71mhmcuEI5byuF+C88VPYly2sEzjlzAQ3vdn/1+Hzguw6qFNNbqenhZGbdiG6RwZaTG7jTA2X9RdXjDN9yj1uQpyO4Lx8KRAcZcbZMafp4wPOd5MdXoFY52V1A8M9hi3sso93+uprE0qYNMjkE22CvK4HuUxqN7oIz5pWuETq1lQAjqlSlqdD2Rnr/ggp/TVkQYjn9lMfYelk2sH5HPdopYo7MHwlV1or9Bxf+QCyLzm92vzG2wjiIjC/ZHEJzeroJl6bdFPTpZho5MV2U86fLQqxNlGIMqCGy+9WYhJ8ob1r0+Whxde9L2PdysETv97O+xVw+VNN1TZSQN5I6l9m5Ip6pLIqLm4a1B1ffH6gHyqT9p82NOjntRWGIofO3bJz5GhkvSWbsXueTAMaJDou99kGLqDlhwBZNEQ4mKPuDvVwSK4WmLluHyhA97pZiVe8g+JxmnJF8IkV/tCs4Jq/HgOoAEGR9tCDsDbDmi3OviUQpG5D8XmKcSAUaFLRXb2lmJTNYdhtYyfjBYZQmN5qT5CNuaD3BVnlkCk7bsMW3AtXkNMMTuW4HjUERSJnVQ0vsBGa1wo3Qh7115XGeTF3NTz8w0440AgU7c3bSXO/KMINaIWXd0oLpoq/0/QJxCQSJ9XnYy1W7TYLBJpHsVWD1ahsA7FjNvRd6mxCiHsm8g6Z0pnzqIpF1dHUtP2ITU5Z1hZHbu+L3BEEStBbL9XYvGfEakv1bmf+bOZGnoiuHEdlBnaChxYKNzB23b8sw8YyT7Ajxfk49eJIAvdbVkdFCe2J0gMefhQ0bIZxhx3fzMIysQNiN8PgOUKxOMur10LduigREDRMZyP4oGWrP1GFY4t6groASsZ421os48wAdnrbovNhLt7ScNULkwZ5AIZJTrbaKYTLjA1oJ3sIuN/aYocm/9uoQHEIlacF1s/TM1fLcPTL38O9fOsjMEIwoPKfvt7opuI9G2Hf/PR4aCLDQ7wNmIdEuXJ/QNL72k5q4NejAldPfe3UVVqzkys8YZ/jYOGOp6c+YzRCrCuq0M11y7TiN6qk7YXRMn/gukxrEimbMQjr3jwRM6dKVZ4RUfWQr8noPXLJq6yh5R3EH1IVOHESst/LItbG2D2vRsZRkAObzvQAAD3mb3/G4NzopI0FAiHfbpq0X72adg6SRj+8OHMShtFxxLZlf/nLgRLbClwl5WmaYSs+yEjkq48tY7Z2bE0N91mJwt+ua0NlRJIDh0HikF4UvSVorFj2YVu9YeS5tfvlVjPSoNu/Zu6dEUfBOT555hahBdN3Sa5Xuj2Rvau1lQNIaC944y0RWj9UiNDskAK1WoL+EfXcC6IbBXFRyVfX/WKXxPAwUyIAGW8ggZ08hcijKTt1YKnUO6QPvcrmDVAb0FCLIXn5id4fD/Jx4tw/gbXs7WF9b2RgXtPhLBG9vF5FEkdHAKrQHZAJC/HWvk7nvzzDzIXZlfFTJoC3JpGgLPBY7SQTjGlUvG577yNutZ1hTfs9/1nkSXK9zzKLRZ3VODeKUovJe0WCq1zVMYxCJMenmNzPIU2S8TA4E7wWmbNkxq9rI2dd6v0VpcAPVMxnDsvWTWFayyqvKZO7Z08a62i/oH2/jxf8rpmfO64in3FLiL1GX8IGtVE9M23yGsIqJbxDTy+LtaMWDaPqkymb5VrQdzOvqldeU0SUi6IirG8UZ3jcpRbwHa1C0Dww9G/SFX3gPvTJQE+kyz+g1BeMILKKO+olcHzctOWgzxYHnOD7dpCRtuZEXACjgqesZMasoPgnuDC4nUviAAxDc5pngjoAITIkvhKwg5d608pdrZcA+qn5TMT6Uo/QzBaOxBCLTJX3Mgk85rMfsnWx86oLxf7p2PX5ONqieTa/qM3tPw4ZXvlAp83NSD8F7+ZgctK1TpoYwtiU2h02HCGioH5tkVCqNVTMH5p00sRy2JU1qyDBP2CII/Dg4WDsIl+zgeX7589srx6YORRQMBfKbodbB743Tl4WLKOEnwWUVBsm94SOlCracU72MSyj068wdpYjyz1FwC2bjQnxnB6Mp/pZ+yyZXtguEaYB+kqhjQ6UUmwSFazOb+rhYjLaoiM+aN9/8KKn0zaCTFpN9eKwWy7/u4EHzO46TdFSNjMfn2iPSJwDPCFHc0I1+vjdAZw5ZjqR/uzi9Zn20oAa5JnLEk/EA3VRWE7J/XrupfFJPtCUuqHPpnlL7ISJtRpSVcB8qsZCm2QEkWoROtCKKxUh3yEcMbWYJwk6DlEBG0bZP6eg06FL3v6RPb7odGuwm7FN8fG4woqtB8e7M5klPpo97GoObNwt+ludTAmxyC5hmcFx+dIvEZKI6igFKHqLH01iY1o7903VzG9QGetyVx5RNmBYUU+zIuSva/yIcECUi4pRmE3VkF2avqulQEUY4yZ/wmNboBzPmAPey3+dSYtBZUjeWWT0pPwCz4Vozxp9xeClIU60qvEFMQCaPvPaA70WlOP9f/ey39macvpGCVa+zfa8gO44wbxpJUlC8GN/pRMTQtzY8Z8/hiNrU+Zq64ZfFGIkdj7m7abcK1EBtws1X4J/hnqvasPvvDSDYWN+QcQVGMqXalkDtTad5rYY0TIR1Eqox3czwPMjKPvF5sFv17Thujr1IZ1Ytl4VX1J0vjXKmLY4lmXipRAro0qVGEcXxEVMMEl54jQMd4J7RjgomU0j1ptjyxY+cLiSyXPfiEcIS2lWDK3ISAy6UZ3Hb5vnPncA94411jcy75ay6B6DSTzK6UTCZR9uDANtPBrvIDgjsfarMiwoax2OlLxaSoYn4iRgkpEGqEkwox5tyI8aKkLlfZ12lO11TxsqRMY89j5JaO55XfPJPDL1LGSnC88Re9Ai+Nu5bZjtwRrvFITUFHPR4ZmxGslQMecgbZO7nHk32qHxYkdvWpup07ojcMCaVrpFAyFZJJbNvBpZfdf39Hdo2kPtT7v0/f8R/B5Nz4f1t9/3zNM/7n6SUHfcWk5dfQFJvcJMgPolGCpOFb/WC0FGWU2asuQyT+rm88ZKZ78Cei/CAh939CH0JYbpZIPtxc2ufXqjS3pHH9lnWK4iJ7OjR/EESpCo2R3MYKyE7rHfhTvWho4cL1QdN4jFTyR6syMwFm124TVDDRXMNveI1Dp/ntwdz8k8kxw7iFSx6+Yx6O+1LzMVrN0BBzziZi9kneZSzgollBnVwBh6oSOPHXrglrOj+QmR/AESrhDpKrWT+8/AiMDxS/5wwRNuGQPLlJ9ovomhJWn8sMLVItQ8N/7IXvtD8kdOoHaw+vBSbFImQsv/OCAIui99E+YSIOMlMvBXkAt+NAZK8wB9Jf8CPtB+TOUOR+z71d/AFXpPBT6+A5FLjxMjLIEoJzrQfquvxEIi+WoUzGR1IzQFNvbYOnxb2PyQ0kGdyXKzW2axQL8lNAXPk6NEjqrRD1oZtKLlFoofrXw0dCNWASHzy+7PSzOUJ3XtaPZsxLDjr+o41fKuKWNmjiZtfkOzItvlV2MDGSheGF0ma04qE3TUEfqJMrXFm7DpK+27DSvCUVf7rbNoljPhha5W7KBqVq0ShUSTbRmuqPtQreVWH4JET5yMhuqMoSd4r/N8sDmeQiQQvi1tcZv7Moc7dT5X5AtCD6kNEGZOzVcNYlpX4AbTsLgSYYliiPyVoniuYYySxsBy5cgb3pD+EK0Gpb0wJg031dPgaL8JZt6sIvzNPEHfVPOjXmaXj4bd4voXzpZ5GApMhILgMbCEWZ2zwgdeQgjNHLbPIt+KqxRwWPLTN6HwZ0Ouijj4UF+Sg0Au8XuIKW0WxlexdrFrDcZJ8Shauat3X0XmHygqgL1nAu2hrJFb4wZXkcS+i36KMyU1yFvYv23bQUJi/3yQpqr/naUOoiEWOxckyq/gq43dFou1DVDaYMZK9tho7+IXXokBCs5GRfOcBK7g3A+jXQ39K4YA8PBRW4m5+yR0ZAxWJncjRVbITvIAPHYRt1EJ3YLiUbqIvoKHtzHKtUy1ddRUQ0AUO41vonZDUOW+mrszw+SW/6Q/IUgNpcXFjkM7F4CSSQ2ExZg85otsMs7kqsQD4OxYeBNDcSpifjMoLb7GEbGWTwasVObmB/bfPcUlq0wYhXCYEDWRW02TP5bBrYsKTGWjnWDDJ1F7zWai0zW/2XsCuvBQjPFcTYaQX3tSXRSm8hsAoDdjArK/OFp6vcWYOE7lizP0Yc+8p16i7/NiXIiiQTp7c7Xus925VEtlKAjUdFhyaiLT7VxDagprMFwix4wZ05u0qj7cDWFd0W9OYHIu3JbJKMXRJ1aYNovugg+QqRN7fNHSi26VSgBpn+JfMuPo3aeqPWik/wI5Rz3BWarPQX4i5+dM0npwVOsX+KsOhC7vDg+OJsz4Q5zlnIeflUWL6QYMbf9WDfLmosLF4Qev3mJiOuHjoor/dMeBpA9iKDkMjYBNbRo414HCxjsHrB4EXNbHzNMDHCLuNBG6Sf+J4MZ/ElVsDSLxjIiGsTPhw8BPjxbfQtskj+dyNMKOOcUYIRBEIqbazz3lmjlRQhplxq673VklMMY6597vu+d89ec/zq7Mi4gQvh87ehYbpOuZEXj5g/Q7S7BFDAAB9DzG35SC853xtWVcnZQoH54jeOqYLR9NDuwxsVthTV7V99n/B7HSbAytbEyVTz/5NhJ8gGIjG0E5j3griULUd5Rg7tQR+90hJgNQKQH2btbSfPcaTOfIexc1db1BxUOhM1vWCpLaYuKr3FdNTt/T3PWCpEUWDKEtzYrjpzlL/wri3MITKsFvtF8QVV/NhVo97aKIBgdliNc10dWdXVDpVtsNn+2UIolrgqdWA4EY8so0YvB4a+aLzMXiMAuOHQrXY0tr+CL10JbvZzgjJJuB1cRkdT7DUqTvnswVUp5kkUSFVtIIFYK05+tQxT6992HHNWVhWxUsD1PkceIrlXuUVRogwmfdhyrf6zzaL8+c0L7GXMZOteAhAVQVwdJh+7nrX7x4LaIIfz2F2v7Dg/uDfz2Fa+4gFm2zHAor8UqimJG3VTJtZEoFXhnDYXvxMJFc6ku2bhbCxzij2z5UNuK0jmp1mnvkVNUfR+SEmj1Lr94Lym75PO7Fs0MIr3GdsWXRXSfgLTVY0FLqba97u1In8NAcY7IC6TjWLigwKEIm43NxTdaVTv9mcKkzuzBkKd8x/xt1p/9BbP7Wyb4bpo1K1gnOpbLvKz58pWl3B55RJ/Z5mRDLPtNQg14jdOEs9+h/V5UVpwrAI8kGbX8KPVPDIMfIqKDjJD9UyDOPhjZ3vFAyecwyq4akUE9mDOtJEK1hpDyi6Ae87sWAClXGTiwPwN7PXWwjxaR79ArHRIPeYKTunVW24sPr/3HPz2IwH8oKH4OlWEmt4BLM6W5g4kMcYbLwj2usodD1088stZA7VOsUSpEVl4w7NMb1EUHMRxAxLF0CIV+0L3iZb+ekB1vSDSFjAZ3hfLJf7gFaXrOKn+mhR+rWw/eTXIcAgl4HvFuBg1LOmOAwJH3eoVEjjwheKA4icbrQCmvAtpQ0mXG0agYp5mj4Rb6mdQ+RV4QBPbxMqh9C7o8nP0Wko2ocnCHeRGhN1XVyT2b9ACsL+6ylUy+yC3QEnaKRIJK91YtaoSrcWZMMwxuM0E9J68Z+YyjA0g8p1PfHAAIROy6Sa04VXOuT6A351FOWhKfTGsFJ3RTJGWYPoLk5FVK4OaYR9hkJvezwF9vQN1126r6isMGXWTqFW+3HL3I/jurlIdDWIVvYY+s6yq7lrFSPAGRdnU7PVwY/SvWbZGpXzy3BQ2LmAJlrONUsZs4oGkly0V267xbD5KMY8woNNsmWG1VVgLCra8aQBBcI4DP2BlNwxhiCtHlaz6OWFoCW0vMR3ErrG7JyMjTSCnvRcsEHgmPnwA6iNpJ2DrFb4gLlhKJyZGaWkA97H6FFdwEcLT6DRQQL++fOkVC4cYGW1TG/3iK5dShRSuiBulmihqgjR45Vi03o2RbQbP3sxt90VxQ6vzdlGfkXmmKmjOi080JSHkLntjvsBJnv7gKscOaTOkEaRQqAnCA4HWtB4XnMtOhpRmH2FH8tTXrIjAGNWEmudQLCkcVlGTQ965Kh0H6ixXbgImQP6b42B49sO5C8pc7iRlgyvSYvcnH9FgQ3azLbQG2cUW96SDojTQStxkOJyOuDGTHAnnWkz29aEwN9FT8EJ4yhXOg+jLTrCPKeEoJ9a7lDXOjEr8AgX4BmnMQ668oW0zYPyQiVMPxKRHtpfnEEyaKhdzNVThlxxDQNdrHeZiUFb6NoY2KwvSb7BnRcpJy+/g/zAYx3fYSN5QEaVD2Y1VsNWxB0BSO12MRsRY8JLfAezRMz5lURuLUnG1ToKk6Q30FughqWN6gBNcFxP/nY/iv+iaUQOa+2Nuym46wtI/DvSfzSp1jEi4SdYBE7YhTiVV5cX9gwboVDMVgZp5YBQlHOQvaDNfcCoCJuYhf5kz5kwiIKPjzgpcRJHPbOhJajeoeRL53cuMahhV8Z7IRr6M4hW0JzT7mzaMUzQpm866zwM7Cs07fJYXuWvjAMkbe5O6V4bu71sOG6JQ4oL8zIeXHheFVavzxmlIyBkgc9IZlEDplMPr8xlcyss4pVUdwK1e7CK2kTsSdq7g5SHRAl3pYUB9Ko4fsh4qleOyJv1z3KFSTSvwEcRO/Ew8ozEDYZSqpfoVW9uhJfYrNAXR0Z3VmeoAD+rVWtwP/13sE/3ICX3HhDG3CMc476dEEC0K3umSAD4j+ZQLVdFOsWL2C1TH5+4KiSWH+lMibo+B55hR3Gq40G1n25sGcN0mEcoU2wN9FCVyQLBhYOu9aHVLWjEKx2JIUZi5ySoHUAI9b8hGzaLMxCZDMLhv8MkcpTqEwz9KFDpCpqQhVmsGQN8m24wyB82FAKNmjgfKRsXRmsSESovAwXjBIoMKSG51p6Um8b3i7GISs7kjTq/PZoioCfJzfKdJTN0Q45kQEQuh9H88M3yEs3DbtRTKALraM0YC8laiMiOOe6ADmTcCiREeAWZelBaEXRaSuj2lx0xHaRYqF65O0Lo5OCFU18A8cMDE4MLYm9w2QSr9NgQAIcRxZsNpA7UJR0e71JL+VU+ISWFk5I97lra8uGg7GlQYhGd4Gc6rxsLFRiIeGO4abP4S4ekQ1fiqDCy87GZHd52fn5aaDGuvOmIofrzpVwMvtbreZ/855OaXTRcNiNE0wzGZSxbjg26v8ko8L537v/XCCWP2MFaArJpvnkep0pA+O86MWjRAZPQRfznZiSIaTppy6m3p6HrNSsY7fDtz7Cl4V/DJAjQDoyiL2uwf1UHVd2AIrzBUSlJaTj4k6NL97a/GqhWKU9RUmjnYKpm2r+JYUcrkCuZKvcYvrg8pDoUKQywY9GDWg03DUFSirlUXBS5SWn/KAntnf0IdHGL/7mwXqDG+LZYjbEdQmqUqq4y54TNmWUP7IgcAw5816YBzwiNIJiE9M4lPCzeI/FGBeYy3p6IAmH4AjXXmvQ4Iy0Y82NTobcAggT2Cdqz6Mx4TdGoq9fn2etrWKUNFyatAHydQTVUQ2S5OWVUlugcNvoUrlA8cJJz9MqOa/W3iVno4zDHfE7zhoY5f5lRTVZDhrQbR8LS4eRLz8iPMyBL6o4PiLlp89FjdokQLaSBmKHUwWp0na5fE3v9zny2YcDXG/jfI9sctulHRbdkI5a4GOPJx4oAJQzVZ/yYAado8KNZUdEFs9ZPiBsausotXMNebEgr0dyopuqfScFJ3ODNPHgclACPdccwv0YJGQdsN2lhoV4HVGBxcEUeUX/alr4nqpcc1CCR3vR7g40zteQg/JvWmFlUE4mAiTpHlYGrB7w+U2KdSwQz2QJKBe/5eiixWipmfP15AFWrK8Sh1GBBYLgzki1wTMhGQmagXqJ2+FuqJ8f0XzXCVJFHQdMAw8xco11HhM347alrAu+wmX3pDFABOvkC+WPX0Uhg1Z5MVHKNROxaR84YV3s12UcM+70cJ460SzEaKLyh472vOMD3XnaK7zxZcXlWqenEvcjmgGNR2OKbI1s8U+iwiW+HotHalp3e1MGDy6BMVIvajnAzkFHbeVsgjmJUkrP9OAwnEHYXVBqYx3q7LvXjoVR0mY8h+ZaOnh053pdsGkmbqhyryN01eVHySr+CkDYkSMeZ1xjPNVM+gVLTDKu2VGsMUJqWO4TwPDP0VOg2/8ITbAUaMGb4LjL7L+Pi11lEVMXTYIlAZ/QHmTENjyx3kDkBdfcvvQt6tKk6jYFM4EG5UXDTaF5+1ZjRz6W7MdJPC+wTkbDUim4p5QQH3b9kGk2Bkilyeur8Bc20wm5uJSBO95GfYDI1EZipoRaH7uVveneqz43tlTZGRQ4a7CNmMHgXyOQQOL6WQkgMUTQDT8vh21aSdz7ERiZT1jK9F+v6wgFvuEmGngSvIUR2CJkc5tx1QygfZnAruONobB1idCLB1FCfO7N1ZdRocT8/Wye+EnDiO9pzqIpnLDl4bkaRKW+ekBVwHn46Shw1X0tclt/0ROijuUB4kIInrVJU4buWf4YITJtjOJ6iKdr1u+flgQeFH70GxKjhdgt/MrwfB4K/sXczQ+9zYcrD4dhY6qZhZ010rrxggWA8JaZyg2pYij8ieYEg1aZJkZK9O1Re7sB0iouf60rK0Gd+AYlp7soqCBCDGwfKeUQhCBn0E0o0GS6PdmjLi0TtCYZeqazqwN+yNINIA8Lk3iPDnWUiIPLGNcHmZDxfeK0iAdxm/T7LnN+gemRL61hHIc0NCAZaiYJR+OHnLWSe8sLrK905B5eEJHNlWq4RmEXIaFTmo49f8w61+NwfEUyuJAwVqZCLFcyHBKAcIVj3sNzfEOXzVKIndxHw+AR93owhbCxUZf6Gs8cz6/1VdrFEPrv330+9s6BtMVPJ3zl/Uf9rUi0Z/opexfdL3ykF76e999GPfVv8fJv/Y/+/5hEMon1tqNFyVRevV9y9/uIvsG3dbB8GRRrgaEXfhx+2xeOFt+cEn3RZanNxdEe2+B6MHpNbrRE53PlDifPvFcp4kO78ILR0T4xyW/WGPyBsqGdoA7zJJCu1TKbGfhnqgnRbxbB2B3UZoeQ2bz2sTVnUwokTcTU21RxN1PYPS3Sar7T0eRIsyCNowr9amwoMU/od9s2APtiKNL6ENOlyKADstAEWKA+sdKDhrJ6BOhRJmZ+QJbAaZ3/5Fq0/lumCgEzGEbu3yi0Y4I4EgVAjqxh4HbuQn0GrRhOWyAfsglQJAVL1y/6yezS2k8RE2MstJLh92NOB3GCYgFXznF4d25qiP4ZCyI4RYGesut6FXK6GwPpKK8WHEkhYui0AyEmr5Ml3uBFtPFdnioI8RiCooa7Z1G1WuyIi3nSNglutc+xY8BkeW3JJXPK6jd2VIMpaSxpVtFq+R+ySK9J6WG5Qvt+C+QH1hyYUOVK7857nFmyDBYgZ/o+AnibzNVqyYCJQvyDXDTK+iXdkA71bY7TL3bvuLxLBQ8kbTvTEY9aqkQ3+MiLWbEgjLzOH+lXgco1ERgzd80rDCymlpaRQbOYnKG/ODoFl46lzT0cjM5FYVvv0qLUbD5lyJtMUaC1pFlTkNONx6lliaX9o0i/1vws5bNKn5OuENQEKmLlcP4o2ZmJjD4zzd3Fk32uQ4uRWkPSUqb4LBe3EXHdORNB2BWsws5daRnMfNVX7isPSb1hMQdAJi1/qmDMfRUlCU74pmnzjbXfL8PVG8NsW6IQM2Ne23iCPIpryJjYbVnm5hCvKpMa7HLViNiNc+xTfDIaKm3jctViD8A1M9YPJNk003VVr4Zo2MuGW8vil8SLaGpPXqG7I4DLdtl8a4Rbx1Lt4w5Huqaa1XzZBtj208EJVGcmKYEuaeN27zT9EE6a09JerXdEbpaNgNqYJdhP1NdqiPKsbDRUi86XvvNC7rME5mrSQtrzAZVndtSjCMqd8BmaeGR4l4YFULGRBeXIV9Y4yxLFdyoUNpiy2IhePSWzBofYPP0eIa2q5JP4j9G8at/AqoSsLAUuRXtvgsqX/zYwsE+of6oSDbUOo4RMJw+DOUTJq+hnqwKim9Yy/napyZNTc2rCq6V9jHtJbxGPDwlzWj/Sk3zF/BHOlT/fSjSq7FqlPI1q6J+ru8Aku008SFINXZfOfnZNOvGPMtEmn2gLPt+H4QLA+/SYe4j398auzhKIp2Pok3mPC5q1IN1HgR+mnEfc4NeeHYwd2/kpszR3cBn7ni9NbIqhtSWFW8xbUJuUPVOeeXu3j0IGZmFNiwaNZ6rH4/zQ2ODz6tFxRLsUYZu1bfd1uIvfQDt4YD/efKYv8VF8bHGDgK22w2Wqwpi43vNCOXFJZCGMqWiPbL8mil6tsmOTXAWCyMCw73e2rADZj2IK6rqksM3EXF2cbLb4vjB14wa/yXK5vwU+05MzERJ5nXsXsW21o7M+gO0js2OyKciP5uF2iXyb2DiptwQeHeqygkrNsqVCSlldxBMpwHi1vfc8RKpP/4L3Lmpq6DZcvhDDfxTCE3splacTcOtXdK2g303dIWBVe2wD/Gvja1cClFQ67gw0t1ZUttsUgQ1Veky8oOpS6ksYEc4bqseCbZy766SvL3FodmnahlWJRgVCNjPxhL/fk2wyvlKhITH/VQCipOI0dNcRa5B1M5HmOBjTLeZQJy237e2mobwmDyJNHePhdDmiknvLKaDbShL+Is1XTCJuLQd2wmdJL7+mKvs294whXQD+vtd88KKk0DXP8B1Xu9J+xo69VOuFgexgTrcvI6SyltuLix9OPuE6/iRJYoBMEXxU4shQMf4Fjqwf1PtnJ/wWSZd29rhZjRmTGgiGTAUQqRz+nCdjeMfYhsBD5Lv60KILWEvNEHfmsDs2L0A252351eUoYxAysVaCJVLdH9QFWAmqJDCODUcdoo12+gd6bW2boY0pBVHWL6LQDK5bYWh1V8vFvi0cRpfwv7cJiMX3AZNJuTddHehTIdU0YQ/sQ1dLoF2xQPcCuHKiuCWOY30DHe1OwcClLAhqAKyqlnIbH/8u9ScJpcS4kgp6HKDUdiOgRaRGSiUCRBjzI5gSksMZKqy7Sd51aeg0tgJ+x0TH9YH2Mgsap9N7ENZdEB0bey2DMTrBA1hn56SErNHf3tKtqyL9b6yXEP97/rc+jgD2N1LNUH6RM9AzP3kSipr06RkKOolR7HO768jjWiH1X92jA7dkg7gcNcjqsZCgfqWw0tPXdLg20cF6vnQypg7gLtkazrHAodyYfENPQZsdfnjMZiNu4nJO97D1/sQE+3vNFzrSDOKw+keLECYf7RJwVHeP/j79833oZ0egonYB2FlFE5qj02B/LVOMJQlsB8uNg3Leg4qtZwntsOSNidR0abbZmAK4sCzvt8Yiuz2yrNCJoH5O8XvX/vLeR/BBYTWj0sOPYM/jyxRd5+/JziKAABaPcw/34UA3aj/gLZxZgRCWN6m4m3demanNgsx0P237/Q+Ew5VYnJPkyCY0cIVHoFn2Ay/e7U4P19APbPFXEHX94N6KhEMPG7iwB3+I+O1jd5n6VSgHegxgaSawO6iQCYFgDsPSMsNOcUj4q3sF6KzGaH/0u5PQoAj/8zq6Uc9MoNrGqhYeb2jQo0WlGlXjxtanZLS24/OIN5Gx/2g684BPDQpwlqnkFcxpmP/osnOXrFuu4PqifouQH0eF5qCkvITQbJw/Zvy5mAHWC9oU+cTiYhJmSfKsCyt1cGVxisKu+NymEQIAyaCgud/V09qT3nk/9s/SWsYtha7yNpzBIMM40rCSGaJ9u6lEkl00vXBiEt7p9P5IBCiavynEOv7FgLqPdeqxRiCwuFVMolSIUBcoyfUC2e2FJSAUgYdVGFf0b0Kn2EZlK97yyxrT2MVgvtRikfdaAW8RwEEfN+B7/eK8bBdp7URpbqn1xcrC6d2UjdsKbzCjBFqkKkoZt7Mrhg6YagE7spkqj0jOrWM+UGQ0MUlG2evP1uE1p2xSv4dMK0dna6ENcNUF+xkaJ7B764NdxLCpuvhblltVRAf7vK5qPttJ/9RYFUUSGcLdibnz6mf7WkPO3MkUUhR2mAOuGv8IWw5XG1ZvoVMnjSAZe6T7WYA99GENxoHkMiKxHlCuK5Gd0INrISImHQrQmv6F4mqU/TTQ8nHMDzCRivKySQ8dqkpQgnUMnwIkaAuc6/FGq1hw3b2Sba398BhUwUZSAIO8XZvnuLdY2n6hOXws+gq9BHUKcKFA6kz6FDnpxLPICa3qGhnc97bo1FT/XJk48LrkHJ2CAtBv0RtN97N21plfpXHvZ8gMJb7Zc4cfI6MbPwsW7AilCSXMFIEUEmir8XLEklA0ztYbGpTTGqttp5hpFTTIqUyaAIqvMT9A/x+Ji5ejA4Bhxb/cl1pUdOD6epd3yilIdO6j297xInoiBPuEDW2/UfslDyhGkQs7Wy253bVnlT+SWg89zYIK/9KXFl5fe+jow2rd5FXv8zDPrmfMXiUPt9QBO/iK4QGbX5j/7Rx1c1vzsY8ONbP3lVIaPrhL4+1QrECTN3nyKavGG0gBBtHvTKhGoBHgMXHStFowN+HKrPriYu+OZ05Frn8okQrPaaxoKP1ULCS/cmKFN3gcH7HQlVjraCeQmtjg1pSQxeuqXiSKgLpxc/1OiZsU4+n4lz4hpahGyWBURLi4642n1gn9qz9bIsaCeEPJ0uJmenMWp2tJmIwLQ6VSgDYErOeBCfSj9P4G/vI7oIF+l/n5fp956QgxGvur77ynawAu3G9MdFbJbu49NZnWnnFcQHjxRuhUYvg1U/e84N4JTecciDAKb/KYIFXzloyuE1eYXf54MmhjTq7B/yBToDzzpx3tJCTo3HCmVPYfmtBRe3mPYEE/6RlTIxbf4fSOcaKFGk4gbaUWe44hVk9SZzhW80yfW5QWBHxmtUzvMhfVQli4gZTktIOZd9mjJ5hsbmzttaHQB29Am3dZkmx3g/qvYocyhZ2PXAWsNQiIaf+Q8W/MWPIK7/TjvCx5q2XRp4lVWydMc2wIQkhadDB0xsnw/kSEyGjLKjI4coVIwtubTF3E7MJ6LS6UOsJKj82XVAVPJJcepfewbzE91ivXZvOvYfsmMevwtPpfMzGmC7WJlyW2j0jh7AF1JLmwEJSKYwIvu6DHc3YnyLH9ZdIBnQ+nOVDRiP+REpqv++typYHIvoJyICGA40d8bR7HR2k7do6UQTHF4oriYeIQbxKe4Th6+/l1BjUtS9hqORh3MbgvYrStXTfSwaBOmAVQZzpYNqsAmQyjY56MUqty3c/xH6GuhNvNaG9vGbG6cPtBM8UA3e8r51D0AR9kozKuGGSMgLz3nAHxDNnc7GTwpLj7/6HeWp1iksDeTjwCLpxejuMtpMnGJgsiku1sOACwQ9ukzESiDRN77YNESxR5LphOlcASXA5uIts1LnBIcn1J7BLWs49DMALSnuz95gdOrTZr0u1SeYHinno/pE58xYoXbVO/S+FEMMs5qyWkMnp8Q3ClyTlZP52Y9nq7b8fITPuVXUk9ohG5EFHw4gAEcjFxfKb3xuAsEjx2z1wxNbSZMcgS9GKyW3R6KwJONgtA64LTyxWm8Bvudp0M1FdJPEGopM4Fvg7G/hsptkhCfHFegv4ENwxPeXmYhxwZy7js+BeM27t9ODBMynVCLJ7RWcBMteZJtvjOYHb5lOnCLYWNEMKC59BA7covu1cANa2PXL05iGdufOzkgFqqHBOrgQVUmLEc+Mkz4Rq8O6WkNr7atNkH4M8d+SD1t/tSzt3oFql+neVs+AwEI5JaBJaxARtY2Z4mKoUqxds4UpZ0sv3zIbNoo0J4fihldQTX3XNcuNcZmcrB5LTWMdzeRuAtBk3cZHYQF6gTi3PNuDJ0nmR+4LPLoHvxQIxRgJ9iNNXqf2SYJhcvCtJiVWo85TsyFOuq7EyBPJrAdhEgE0cTq16FQXhYPJFqSfiVn0IQnPOy0LbU4BeG94QjdYNB0CiQ3QaxQqD2ebSMiNjaVaw8WaM4Z5WnzcVDsr4eGweSLa2DE3BWViaxhZFIcSTjgxNCAfelg+hznVOYoe5VqTYs1g7WtfTm3e4/WduC6p+qqAM8H4ZyrJCGpewThTDPe6H7CzX/zQ8Tm+r65HeZn+MsmxUciEWPlAVaK/VBaQBWfoG/aRL/jSZIQfep/89GjasWmbaWzeEZ2R1FOjvyJT37O9B8046SRSKVEnXWlBqbkb5XCS3qFeuE9xb9+frEknxWB5h1D/hruz2iVDEAS7+qkEz5Ot5agHJc7WCdY94Ws61sURcX5nG8UELGBAHZ3i+3VulAyT0nKNNz4K2LBHBWJcTBX1wzf+//u/j/9+//v87+9/l9Lbh/L/uyNYiTsWV2LwsjaA6MxTuzFMqmxW8Jw/+IppdX8t/Clgi1rI1SN0UC/r6tX/4lUc2VV1OQReSeCsjUpKZchw4XUcjHfw6ryCV3R8s6VXm67vp4n+lcPV9gJwmbKQEsmrJi9c2vkwrm8HFbVYNTaRGq8D91t9n5+U+aD/hNtN3HjC/nC/vUoGFSCkXP+NlRcmLUqLbiUBl4LYf1U/CCvwtd3ryCH8gUmGITAxiH1O5rnGTz7y1LuFjmnFGQ1UWuM7HwfXtWl2fPFKklYwNUpF2IL/TmaRETjQiM5SJacI+3Gv5MBU8lP5Io6gWkawpyzNEVGqOdx4YlO1dCvjbWFZWbCmeiFKPSlMKtKcMFLs/KQxtgAHi7NZNCQ32bBAW2mbHflVZ8wXKi1JKVHkW20bnYnl3dKWJeWJOiX3oKPBD6Zbi0ZvSIuWktUHB8qDR8DMMh1ZfkBL9FS9x5r0hBGLJ8pUCJv3NYH+Ae8p40mZWd5m5fhobFjQeQvqTT4VKWIYfRL0tfaXKiVl75hHReuTJEcqVlug+eOIIc4bdIydtn2K0iNZPsYWQvQio2qbO3OqAlPHDDOB7DfjGEfVF51FqqNacd6QmgFKJpMfLp5DHTv4wXlONKVXF9zTJpDV4m1sYZqJPhotcsliZM8yksKkCkzpiXt+EcRQvSQqmBS9WdWkxMTJXPSw94jqI3varCjQxTazjlMH8jTS8ilaW8014/vwA/LNa+YiFoyyx3s/KswP3O8QW1jtq45yTM/DX9a8M4voTVaO2ebvw1EooDw/yg6Y1faY+WwrdVs5Yt0hQ5EwRfYXSFxray1YvSM+kYmlpLG2/9mm1MfmbKHXr44Ih8nVKb1M537ZANUkCtdsPZ80JVKVKabVHCadaLXg+IV8i5GSwpZti0h6diTaKs9sdpUKEpd7jDUpYmHtiX33SKiO3tuydkaxA7pEc9XIQEOfWJlszj5YpL5bKeQyT7aZSBOamvSHl8xsWvgo26IP/bqk+0EJUz+gkkcvlUlyPp2kdKFtt7y5aCdks9ZJJcFp5ZWeaWKgtnXMN3ORwGLBE0PtkEIek5FY2aVssUZHtsWIvnljMVJtuVIjpZup/5VL1yPOHWWHkOMc6YySWMckczD5jUj2mlLVquFaMU8leGVaqeXis+aRRL8zm4WuBk6cyWfGMxgtr8useQEx7k/PvRoZyd9nde1GUCV84gMX8Ogu/BWezYPSR27llzQnA97oo0pYyxobYUJfsj+ysTm9zJ+S4pk0TGo9VTG0KjqYhTmALfoDZVKla2b5yhv241PxFaLJs3i05K0AAIdcGxCJZmT3ZdT7CliR7q+kur7WdQjygYtOWRL9B8E4s4LI8KpAj7bE0dg7DLOaX+MGeAi0hMMSSWZEz+RudXbZCsGYS0QqiXjH9XQbd8sCB+nIVTq7/T/FDS+zWY9q7Z2fdq1tdLb6v3hKKVDAw5gjj6o9r1wHFROdHc18MJp4SJ2Ucvu+iQ9EgkekW8VCM+psM6y+/2SBy8tNN4a3L1MzP+OLsyvESo5gS7IQOnIqMmviJBVc6zbVG1n8eXiA3j46kmvvtJlewwNDrxk4SbJOtP/TV/lIVK9ueShNbbMHfwnLTLLhbZuO79ec5XvfgRwLFK+w1r5ZWW15rVFZrE+wKqNRv5KqsLNfpGgnoUU6Y71NxEmN7MyqwqAQqoIULOw/LbuUB2+uE75gJt+kq1qY4LoxV+qR/zalupea3D5+WMeaRIn0sAI6DDWDh158fqUb4YhAxhREbUN0qyyJYkBU4V2KARXDT65gW3gRsiv7xSPYEKLwzgriWcWgPr0sbZnv7m1XHNFW6xPdGNZUdxFiUYlmXNjDVWuu7LCkX/nVkrXaJhiYktBISC2xgBXQnNEP+cptWl1eG62a7CPXrnrkTQ5BQASbEqUZWMDiZUisKyHDeLFOaJILUo5f6iDt4ZO8MlqaKLto0AmTHVVbkGuyPa1R/ywZsWRoRDoRdNMMHwYTsklMVnlAd2S0282bgMI8fiJpDh69OSL6K3qbo20KfpNMurnYGQSr/stFqZ7hYsxKlLnKAKhsmB8AIpEQ4bd/NrTLTXefsE6ChRmKWjXKVgpGoPs8GAicgKVw4K0qgDgy1A6hFq1WRat3fHF+FkU+b6H4NWpOU3KXTxrIb2qSHAb+qhm8hiSROi/9ofapjxhyKxxntPpge6KL5Z4+WBMYkAcE6+0Hd3Yh2zBsK2MV3iW0Y6cvOCroXlRb2MMJtdWx+3dkFzGh2Pe3DZ9QpSqpaR/rE1ImOrHqYYyccpiLC22amJIjRWVAherTfpQLmo6/K2pna85GrDuQPlH1Tsar8isAJbXLafSwOof4gg9RkAGm/oYpBQQiPUoyDk2BCQ1k+KILq48ErFo4WSRhHLq/y7mgw3+L85PpP6xWr6cgp9sOjYjKagOrxF148uhuaWtjet953fh1IQiEzgC+d2IgBCcUZqgTAICm2bR8oCjDLBsmg+ThyhfD+zBalsKBY1Ce54Y/t9cwfbLu9SFwEgphfopNA3yNxgyDafUM3mYTovZNgPGdd4ZFFOj1vtfFW3u7N+iHEN1HkeesDMXKPyoCDCGVMo4GCCD6PBhQ3dRZIHy0Y/3MaE5zU9mTCrwwnZojtE+qNpMSkJSpmGe0EzLyFelMJqhfFQ7a50uXxZ8pCc2wxtAKWgHoeamR2O7R+bq7IbPYItO0esdRgoTaY38hZLJ5y02oIVwoPokGIzxAMDuanQ1vn2WDQ00Rh6o5QOaCRu99fwDbQcN0XAuqkFpxT/cfz3slGRVokrNU0iqiMAJFEbKScZdmSkTUznC0U+MfwFOGdLgsewRyPKwBZYSmy6U325iUhBQNxbAC3FLKDV9VSOuQpOOukJ/GAmu/tyEbX9DgEp6dv1zoU0IqzpG6gssSjIYRVPGgU1QAQYRgIT8gEV0EXr1sqeh2I6rXjtmoCYyEDCe/PkFEi/Q48FuT29p557iN+LCwk5CK/CZ2WdAdfQZh2Z9QGrzPLSNRj5igUWzl9Vi0rCqH8G1Kp4QMLkuwMCAypdviDXyOIk0AHTM8HBYKh3b0/F+DxoNj4ZdoZfCpQVdnZarqoMaHWnMLNVcyevytGsrXQEoIbubqWYNo7NRHzdc0zvT21fWVirj7g36iy6pxogfvgHp1xH1Turbz8QyyHnXeBJicpYUctbzApwzZ1HT+FPEXMAgUZetgeGMwt4G+DHiDT2Lu+PT21fjJCAfV16a/Wu1PqOkUHSTKYhWW6PhhHUlNtWzFnA7MbY+r64vkwdpfNB2JfWgWXAvkzd42K4lN9x7Wrg4kIKgXCb4mcW595MCPJ/cTfPAMQMFWwnqwde4w8HZYJFpQwcSMhjVz4B8p6ncSCN1X4klxoIH4BN2J6taBMj6lHkAOs8JJAmXq5xsQtrPIPIIp/HG6i21xMGcFgqDXSRF0xQg14d2uy6HgKE13LSvQe52oShF5Jx1R6avyL4thhXQZHfC94oZzuPUBKFYf1VvDaxIrtV6dNGSx7DO0i1p6CzBkuAmEqyWceQY7F9+U0ObYDzoa1iKao/cOD/v6Q9gHrrr1uCeOk8fST9MG23Ul0KmM3r+Wn6Hi6WAcL7gEeaykicvgjzkjSwFsAXIR81Zx4QJ6oosVyJkCcT+4xAldCcihqvTf94HHUPXYp3REIaR4dhpQF6+FK1H0i9i7Pvh8owu3lO4PT1iuqu+DkL2Bj9+kdfGAg2TXw03iNHyobxofLE2ibjsYDPgeEQlRMR7afXbSGQcnPjI2D+sdtmuQ771dbASUsDndU7t58jrrNGRzISvwioAlHs5FA+cBE5Ccznkd8NMV6BR6ksnKLPZnMUawRDU1MZ/ib3xCdkTblHKu4blNiylH5n213yM0zubEie0o4JhzcfAy3H5qh2l17uLooBNLaO+gzonTH2uF8PQu9EyH+pjGsACTMy4cHzsPdymUSXYJOMP3yTkXqvO/lpvt0cX5ekDEu9PUfBeZODkFuAjXCaGdi6ew4qxJ8PmFfwmPpkgQjQlWqomFY6UkjmcnAtJG75EVR+NpzGpP1Ef5qUUbfowrC3zcSLX3BxgWEgEx/v9cP8H8u1Mvt9/rMDYf6sjwU1xSOPBgzFEeJLMRVFtKo5QHsUYT8ZRLCah27599EuqoC9PYjYO6aoAMHB8X1OHwEAYouHfHB3nyb2B+SnZxM/vw/bCtORjLMSy5aZoEpvgdGvlJfNPFUu/p7Z4VVK1hiI0/UTuB3ZPq4ohEbm7Mntgc1evEtknaosgZSwnDC2BdMmibpeg48X8Ixl+/8+xXdbshQXUPPvx8jT3fkELivHSmqbhblfNFShWAyQnJ3WBU6SMYSIpTDmHjdLVAdlADdz9gCplZw6mTiHqDwIsxbm9ErGusiVpg2w8Q3khKV/R9Oj8PFeF43hmW/nSd99nZzhyjCX3QOZkkB6BsH4H866WGyv9E0hVAzPYah2tkRfQZMmP2rinfOeQalge0ovhduBjJs9a1GBwReerceify49ctOh5/65ATYuMsAkVltmvTLBk4oHpdl6i+p8DoNj4Fb2vhdFYer2JSEilEwPd5n5zNoGBXEjreg/wh2NFnNRaIUHSOXa4eJRwygZoX6vnWnqVdCRT1ARxeFrNBJ+tsdooMwqnYhE7zIxnD8pZH+P0Nu1wWxCPTADfNWmqx626IBJJq6NeapcGeOmbtXvl0TeWG0Y7OGGV4+EHTtNBIT5Wd0Bujl7inXgZgfXTM5efD3qDTJ54O9v3Bkv+tdIRlq1kXcVD0BEMirmFxglNPt5pedb1AnxuCYMChUykwsTIWqT23XDpvTiKEru1cTcEMeniB+HQDehxPXNmkotFdwUPnilB/u4Nx5Xc6l8J9jH1EgKZUUt8t8cyoZleDBEt8oibDmJRAoMKJ5Oe9CSWS5ZMEJvacsGVdXDWjp/Ype5x0p9PXB2PAwt2LRD3d+ftNgpuyvxlP8pB84oB1i73vAVpwyrmXW72hfW6Dzn9Jkj4++0VQ4d0KSx1AsDA4OtXXDo63/w+GD+zC7w5SJaxsmnlYRQ4dgdjA7tTl2KNLnpJ+mvkoDxtt1a4oPaX3EVqj96o9sRKBQqU7ZOiupeAIyLMD+Y3YwHx30XWHB5CQiw7q3mj1EDlP2eBsZbz79ayUMbyHQ7s8gu4Lgip1LiGJj7NQj905/+rgUYKAA5qdrlHKIknWmqfuR+PB8RdBkDg/NgnlT89G72h2NvySnj7UyBwD+mi/IWs1xWbxuVwUIVXun5cMqBtFbrccI+DILjsVQg6eeq0itiRfedn89CvyFtpkxaauEvSANuZmB1p8FGPbU94J9medwsZ9HkUYjmI7OH5HuxendLbxTaYrPuIfE2ffXFKhoNBUp33HsFAXmCV/Vxpq5AYgFoRr5Ay93ZLRlgaIPjhZjXZZChT+aE5iWAXMX0oSFQEtwjiuhQQItTQX5IYrKfKB+queTNplR1Hoflo5/I6aPPmACwQCE2jTOYo5Dz1cs7Sod0KTG/3kEDGk3kUaUCON19xSJCab3kNpWZhSWkO8l+SpW70Wn3g0ciOIJO5JXma6dbos6jyisuxXwUUhj2+1uGhcvuliKtWwsUTw4gi1c/diEEpZHoKoxTBeMDmhPhKTx7TXWRakV8imJR355DcIHkR9IREHxohP4TbyR5LtFU24umRPRmEYHbpe1LghyxPx7YgUHjNbbQFRQhh4KeU1EabXx8FS3JAxp2rwRDoeWkJgWRUSKw6gGP5U2PuO9V4ZuiKXGGzFQuRuf+tkSSsbBtRJKhCi3ENuLlXhPbjTKD4djXVnfXFds6Zb+1XiUrRfyayGxJq1+SYBEfbKlgjiSmk0orgTqzSS+DZ5rTqsJbttiNtp+KMqGE2AHGFw6jQqM5vD6vMptmXV9OAjq49Uf/Lx9Opam+Hn5O9p8qoBBAQixzQZ4eNVkO9sPzJAMyR1y4/RCQQ1s0pV5KAU5sKLw3tkcFbI/JqrjCsK4Mw+W8aod4lioYuawUiCyVWBE/qPaFi5bnkgpfu/ae47174rI1fqQoTbW0HrU6FAejq7ByM0V4zkZTg02/YJK2N7hUQRCeZ4BIgSEqgD8XsjzG6LIsSbuHoIdz/LhFzbNn1clci1NHWJ0/6/O8HJMdIpEZbqi1RrrFfoo/rI/7ufm2MPG5lUI0IYJ4MAiHRTSOFJ2oTverFHYXThkYFIoyFx6rMYFgaOKM4xNWdlOnIcKb/suptptgTOTdVIf4YgdaAjJnIAm4qNNHNQqqAzvi53GkyRCEoseUBrHohZsjUbkR8gfKtc/+Oa72lwxJ8Mq6HDfDATbfbJhzeIuFQJSiw1uZprHlzUf90WgqG76zO0eCB1WdPv1IT6sNxxh91GEL2YpgC97ikFHyoaH92ndwduqZ6IYjkg20DX33MWdoZk7QkcKUCgisIYslOaaLyvIIqRKWQj16jE1DlQWJJaPopWTJjXfixEjRJJo8g4++wuQjbq+WVYjsqCuNIQW3YjnxKe2M5ZKEqq+cX7ZVgnkbsU3RWIyXA1rxv4kGersYJjD//auldXGmcEbcfTeF16Y1708FB1HIfmWv6dSFi6oD4E+RIjCsEZ+kY7dKnwReJJw3xCjKvi3kGN42rvyhUlIz0Bp+fNSV5xwFiuBzG296e5s/oHoFtUyUplmPulIPl+e1CQIQVtjlzLzzzbV+D/OVQtYzo5ixtMi5BmHuG4N/uKfJk5UIREp7+12oZlKtPBomXSzAY0KgtbPzzZoHQxujnREUgBU+O/jKKhgxVhRPtbqyHiUaRwRpHv7pgRPyUrnE7fYkVblGmfTY28tFCvlILC04Tz3ivkNWVazA+OsYrxvRM/hiNn8Fc4bQBeUZABGx5S/xFf9Lbbmk298X7iFg2yeimvsQqqJ+hYbt6uq+Zf9jC+Jcwiccd61NKQtFvGWrgJiHB5lwi6fR8KzYS7EaEHf/ka9EC7H8D+WEa3TEACHBkNSj/cXxFeq4RllC+fUFm2xtstYLL2nos1DfzsC9vqDDdRVcPA3Ho95aEQHvExVThXPqym65llkKlfRXbPTRiDepdylHjmV9YTWAEjlD9DdQnCem7Aj/ml58On366392214B5zrmQz/9ySG2mFqEwjq5sFl5tYJPw5hNz8lyZPUTsr5E0F2C9VMPnZckWP7+mbwp/BiN7f4kf7vtGnZF2JGvjK/sDX1RtcFY5oPQnE4lIAYV49U3C9SP0LCY/9i/WIFK9ORjzM9kG/KGrAuwFmgdEpdLaiqQNpCTGZVuAO65afkY1h33hrqyLjZy92JK3/twdj9pafFcwfXONmPQWldPlMe7jlP24Js0v9m8bIJ9TgS2IuRvE9ZVRaCwSJYOtAfL5H/YS4FfzKWKbek+GFulheyKtDNlBtrdmr+KU+ibHTdalzFUmMfxw3f36x+3cQbJLItSilW9cuvZEMjKw987jykZRlsH/UI+HlKfo2tLwemBEeBFtmxF2xmItA/dAIfQ+rXnm88dqvXa+GapOYVt/2waFimXFx3TC2MUiOi5/Ml+3rj/YU6Ihx2hXgiDXFsUeQkRAD6wF3SCPi2flk7XwKAA4zboqynuELD312EJ88lmDEVOMa1W/K/a8tGylZRMrMoILyoMQzzbDJHNZrhH77L9qSC42HVmKiZ5S0016UTp83gOhCwz9XItK9fgXfK3F5d7nZCBUekoLxrutQaPHa16Rjsa0gTrzyjqTnmcIcrxg6X6dkKiucudc0DD5W4pJPf0vuDW8r5/uw24YfMuxFRpD2ovT2mFX79xH6Jf+MVdv2TYqR6/955QgVPe3JCD/WjAYcLA9tpXgFiEjge2J5ljeI/iUzg91KQuHkII4mmHZxC3XQORLAC6G7uFn5LOmlnXkjFdoO976moNTxElS8HdxWoPAkjjocDR136m2l+f5t6xaaNgdodOvTu0rievnhNAB79WNrVs6EsPgkgfahF9gSFzzAd+rJSraw5Mllit7vUP5YxA843lUpu6/5jAR0RvH4rRXkSg3nE+O5GFyfe+L0s5r3k05FyghSFnKo4TTgs07qj4nTLqOYj6qaW9knJTDkF5OFMYbmCP+8H16Ty482OjvERV6OFyw043L9w3hoJi408sR+SGo1WviXUu8d7qS+ehKjpKwxeCthsm2LBFSFeetx0x4AaKPxtp3CxdWqCsLrB1s/j5TAhc1jNZsXWl6tjo/WDoewxzg8T8NnhZ1niUwL/nhfygLanCnRwaFGDyLw+sfZhyZ1UtYTp8TYB6dE7R3VsKKH95CUxJ8u8N+9u2/9HUNKHW3x3w5GQrfOPafk2w5qZq8MaHT0ebeY3wIsp3rN9lrpIsW9c1ws3VNV+JwNz0Lo9+V7zZr6GD56We6gWVIvtmam5GPPkVAbr74r6SwhuL+TRXtW/0pgyX16VNl4/EAD50TnUPuwrW6OcUO2VlWXS0inq872kk7GUlW6o/ozFKq+Sip6LcTtSDfDrPTcCHhx75H8BeRon+KG2wRwzfDgWhALmiWOMO6h3pm1UCZEPEjScyk7tdLx6WrdA2N1QTPENvNnhCQjW6kl057/qv7IwRryHrZBCwVSbLLnFRiHdTwk8mlYixFt1slEcPD7FVht13HyqVeyD55HOXrh2ElAxJyinGeoFzwKA91zfrdLvDxJSjzmImfvTisreI25EDcVfGsmxLVbfU8PGe/7NmWWKjXcdTJ11jAlVIY/Bv/mcxg/Q10vCHwKG1GW/XbJq5nxDhyLqiorn7Wd7VEVL8UgVzpHMjQ+Z8DUgSukiVwWAKkeTlVVeZ7t1DGnCgJVIdBPZAEK5f8CDyDNo7tK4/5DBjdD5MPV86TaEhGsLVFPQSI68KlBYy84FievdU9gWh6XZrugvtCZmi9vfd6db6V7FmoEcRHnG36VZH8N4aZaldq9zZawt1uBFgxYYx+Gs/qW1jwANeFy+LCoymyM6zgG7j8bGzUyLhvrbJkTYAEdICEb4kMKusKT9V3eIwMLsjdUdgijMc+7iKrr+TxrVWG0U+W95SGrxnxGrE4eaJFfgvAjUM4SAy8UaRwE9j6ZQH5qYAWGtXByvDiLSDfOD0yFA3UCMKSyQ30fyy1mIRg4ZcgZHLNHWl+c9SeijOvbOJxoQy7lTN2r3Y8p6ovxvUY74aOYbuVezryqXA6U+fcp6wSV9X5/OZKP18tB56Ua0gMyxJI7XyNT7IrqN8GsB9rL/kP5KMrjXxgqKLDa+V5OCH6a5hmOWemMUsea9vQl9t5Oce76PrTyTv50ExOqngE3PHPfSL//AItPdB7kGnyTRhVUUFNdJJ2z7RtktZwgmQzhBG/G7QsjZmJfCE7k75EmdIKH7xlnmDrNM/XbTT6FzldcH/rcRGxlPrv4qDScqE7JSmQABJWqRT/TUcJSwoQM+1jvDigvrjjH8oeK2in1S+/yO1j8xAws/T5u0VnIvAPqaE1atNuN0cuRliLcH2j0nTL4JpcR7w9Qya0JoaHgsOiALLCCzRkl1UUESz+ze/gIXHGtDwgYrK6pCFKJ1webSDog4zTlPkgXZqxlQDiYMjhDpwTtBW2WxthWbov9dt2X9XFLFmcF+eEc1UaQ74gqZiZsdj63pH1qcv3Vy8JYciogIVKsJ8Yy3J9w/GhjWVSQAmrS0BPOWK+RKV+0lWqXgYMnIFwpcZVD7zPSp547i9HlflB8gVnSTGmmq1ClO081OW/UH11pEQMfkEdDFzjLC1Cdo/BdL3s7cXb8J++Hzz1rhOUVZFIPehRiZ8VYu6+7Er7j5PSZu9g/GBdmNzJmyCD9wiswj9BZw+T3iBrg81re36ihMLjoVLoWc+62a1U/7qVX5CpvTVF7rocSAKwv4cBVqZm7lLDS/qoXs4fMs/VQi6BtVbNA3uSzKpQfjH1o3x4LrvkOn40zhm6hjduDglzJUwA0POabgdXIndp9fzhOo23Pe+Rk9GSLX0d71Poqry8NQDTzNlsa+JTNG9+UrEf+ngxCjGEsDCc0bz+udVRyHQI1jmEO3S+IOQycEq7XwB6z3wfMfa73m8PVRp+iOgtZfeSBl01xn03vMaQJkyj7vnhGCklsCWVRUl4y+5oNUzQ63B2dbjDF3vikd/3RUMifPYnX5Glfuk2FsV/7RqjI9yKTbE8wJY+74p7qXO8+dIYgjtLD/N8TJtRh04N9tXJA4H59IkMmLElgvr0Q5OCeVfdAt+5hkh4pQgfRMHpL74XatLQpPiOyHRs/OdmHtBf8nOZcxVKzdGclIN16lE7kJ+pVMjspOI+5+TqLRO6m0ZpNXJoZRv9MPDRcAfJUtNZHyig/s2wwReakFgPPJwCQmu1I30/tcBbji+Na53i1W1N+BqoY7Zxo+U/M9XyJ4Ok2SSkBtoOrwuhAY3a03Eu6l8wFdIG1cN+e8hopTkiKF093KuH/BcB39rMiGDLn6XVhGKEaaT/vqb/lufuAdpGExevF1+J9itkFhCfymWr9vGb3BTK4j598zRH7+e+MU9maruZqb0pkGxRDRE1CD4Z8LV4vhgPidk5w2Bq816g3nHw1//j3JStz7NR9HIWELO8TMn3QrP/zZp//+Dv9p429/ogv+GATR+n/UdF+ns9xNkXZQJXY4t9jMkJNUFygAtzndXwjss+yWH9HAnLQQfhAskdZS2l01HLWv7L7us5uTH409pqitvfSOQg/c+Zt7k879P3K9+WV68n7+3cZfuRd/dDPP/03rn+d+/nBvWfgDlt8+LzjqJ/vx3CnNOwiXhho778C96iD+1TBvRZYeP+EH81LE0vVwOOrmCLB3iKzI1x+vJEsrPH4uF0UB4TJ4X3uDfOCo3PYpYe0MF4bouh0DQ/l43fxUF7Y+dpWuvTSffB0yO2UQUETI/LwCZE3BvnevJ7c9zUlY3H58xzke6DNFDQG8n0WtDN4LAYN4nogKav1ezOfK/z+t6tsCTp+dhx4ymjWuCJk1dEUifDP+HyS4iP/Vg9B2jTo9L4NbiBuDS4nuuHW6H+JDQn2JtqRKGkEQPEYE7uzazXIkcxIAqUq1esasZBETlEZY7y7Jo+RoV/IsjY9eIMkUvr42Hc0xqtsavZvhz1OLwSxMOTuqzlhb0WbdOwBH9EYiyBjatz40bUxTHbiWxqJ0uma19qhPruvcWJlbiSSH48OLDDpaHPszvyct41ZfTu10+vjox6kOqK6v0K/gEPphEvMl/vwSv+A4Hhm36JSP9IXTyCZDm4kKsqD5ay8b1Sad/vaiyO5N/sDfEV6Z4q95E+yfjxpqBoBETW2C7xl4pIO2bDODDFurUPwE7EWC2Uplq+AHmBHvir2PSgkR12/Ry65O0aZtQPeXi9mTlF/Wj5GQ+vFkYyhXsLTjrBSP9hwk4GPqDP5rBn5/l8b0mLRAvRSzXHc293bs3s8EsdE3m2exxidWVB4joHR+S+dz5/W+v00K3TqN14CDBth8eWcsTbiwXPsygHdGid0PEdy6HHm2v/IUuV5RVapYmzGsX90mpnIdNGcOOq64Dbc5GUbYpD9M7S+6cLY//QmjxFLP5cuTFRm3vA5rkFZroFnO3bjHF35uU3s8mvL7Tp9nyTc4mymTJ5sLIp7umSnGkO23faehtz3mmTS7fbVx5rP7x3HXIjRNeq/A3xCs9JNB08c9S9BF2O3bOur0ItslFxXgRPdaapBIi4dRpKGxVz7ir69t/bc9qTxjvtOyGOfiLGDhR4fYywHv1WdOplxIV87TpLBy3Wc0QP0P9s4G7FBNOdITS/tep3o3h1TEa5XDDii7fWtqRzUEReP2fbxz7bHWWJdbIOxOUJZtItNZpTFRfj6vm9sYjRxQVO+WTdiOhdPeTJ+8YirPvoeL88l5iLYOHd3b/Imkq+1ZN1El3UikhftuteEYxf1Wujof8Pr4ICTu5ezZyZ4tHQMxlzUHLYO2VMOoNMGL/20S5i2o2obfk+8qqdR7xzbRDbgU0lnuIgz4LelQ5XS7xbLuSQtNS95v3ZUOdaUx/Qd8qxCt6xf2E62yb/HukLO6RyorV8KgYl5YNc75y+KvefrxY+lc/64y9kvWP0a0bDz/rojq+RWjO06WeruWqNFU7r3HPIcLWRql8ICZsz2Ls/qOm/CLn6++X+Qf7mGspYCrZod/lpl6Rw4xN/yuq8gqV4B6aHk1hVE1SfILxWu5gvXqbfARYQpspcxKp1F/c8XOPzkZvmoSw+vEqBLdrq1fr3wAPv5NnM9i8F+jdAuxkP5Z71c6uhK3enlnGymr7UsWZKC12qgUiG8XXGQ9mxnqz4GSIlybF9eXmbqj2sHX+a1jf0gRoONHRdRSrIq03Ty89eQ1GbV/Bk+du4+V15zls+vvERvZ4E7ZbnxWTVjDjb4o/k8jlw44pTIrUGxxuJvBeO+heuhOjpFsO6lVJ/aXnJDa/bM0Ql1cLbXE/Pbv3EZ3vj3iVrB5irjupZTzlnv677NrI9UNYNqbPgp/HZXS+lJmk87wec+7YOxTDo2aw2l3NfDr34VNlvqWJBknuK7oSlZ6/T10zuOoPZOeoIk81N+sL843WJ2Q4Z0fZ3scsqC/JV2fuhWi1jGURSKZV637lf53Xnnx16/vKEXY89aVJ0fv91jGdfG+G4+sniwHes4hS+udOr4RfhFhG/F5gUG35QaU+McuLmclb5ZWmR+sG5V6nf+PxYzlrnFGxpZaK8eqqVo0NfmAWoGfXDiT/FnUbWvzGDOTr8aktOZWg4BYvz5YH12ZbfCcGtNk+dDAZNGWvHov+PIOnY9Prjg8h/wLRrT69suaMVZ5bNuK00lSVpnqSX1NON/81FoP92rYndionwgOiA8WMf4vc8l15KqEEG4yAm2+WAN5Brfu1sq9suWYqgoajgOYt/JCk1gC8wPkK+XKCtRX6TAtgvrnuBgNRmn6I8lVDipOVB9kX6Oxkp4ZKyd1M6Gj8/v2U7k+YQBL95Kb9PQENucJb0JlW3b5tObN7m/Z1j1ev388d7o15zgXsI9CikAGAViR6lkJv7nb4Ak40M2G8TJ447kN+pvfHiOFjSUSP6PM+QfbAywKJCBaxSVxpizHseZUyUBhq59vFwrkyGoRiHbo0apweEZeSLuNiQ+HAekOnarFg00dZNXaPeoHPTRR0FmEyqYExOVaaaO8c0uFUh7U4e/UxdBmthlBDgg257Q33j1hA7HTxSeTTSuVnPZbgW1nodwmG16aKBDKxEetv7D9OjO0JhrbJTnoe+kcGoDJazFSO8/fUN9Jy/g4XK5PUkw2dgPDGpJqBfhe7GA+cjzfE/EGsMM+FV9nj9IAhrSfT/J3QE5TEIYyk5UjsI6ZZcCPr6A8FZUF4g9nnpVmjX90MLSQysIPD0nFzqwCcSJmIb5mYv2Cmk+C1MDFkZQyCBq4c/Yai9LJ6xYkGS/x2s5/frIW2vmG2Wrv0APpCdgCA9snFvfpe8uc0OwdRs4G9973PGEBnQB5qKrCQ6m6X/H7NInZ7y/1674/ZXOVp7OeuCRk8JFS516VHrnH1HkIUIlTIljjHaQtEtkJtosYul77cVwjk3gW1Ajaa6zWeyHGLlpk3VHE2VFzT2yI/EvlGUSz2H9zYE1s4nsKMtMqNyKNtL/59CpFJki5Fou6VXGm8vWATEPwrUVOLvoA8jLuwOzVBCgHB2Cr5V6OwEWtJEKokJkfc87h+sNHTvMb0KVTp5284QTPupoWvQVUwUeogZR3kBMESYo0mfukewRVPKh5+rzLQb7HKjFFIgWhj1w3yN/qCNoPI8XFiUgBNT1hCHBsAz8L7Oyt8wQWUFj92ONn/APyJFg8hzueqoJdNj57ROrFbffuS/XxrSXLTRgj5uxZjpgQYceeMc2wJrahReSKpm3QjHfqExTLAB2ipVumE8pqcZv8LYXQiPHHsgb5BMW8zM5pvQit+mQx8XGaVDcfVbLyMTlY8xcfmm/RSAT/H09UQol5gIz7rESDmnrQ4bURIB4iRXMDQwxgex1GgtDxKp2HayIkR+E/aDmCttNm2C6lytWdfOVzD6X2SpDWjQDlMRvAp1symWv4my1bPCD+E1EmGnMGWhNwmycJnDV2WrQNxO45ukEb08AAffizYKVULp15I4vbNK5DzWwCSUADfmKhfGSUqii1L2UsE8rB7mLuHuUJZOx4+WiizHBJ/hwboaBzhpNOVvgFTf5cJsHef7L1HCI9dOUUbb+YxUJWn6dYOLz+THi91kzY5dtO5c+grX7v0jEbsuoOGnoIreDIg/sFMyG+TyCLIcAWd1IZ1UNFxE8Uie13ucm40U2fcxC0u3WLvLOxwu+F7MWUsHsdtFQZ7W+nlfCASiAKyh8rnP3EyDByvtJb6Kax6/HkLzT9SyEyTMVM1zPtM0MJY14DmsWh4MgD15Ea9Hd00AdkTZ0EiG5NAGuIBzQJJ0JR0na+OB7lQA6UKxMfihIQ7GCCnVz694QvykWXTxpS2soDu+smru1UdIxSvAszBFD1c8c6ZOobA8bJiJIvuycgIXBQIXWwhyTgZDQxJTRXgEwRNAawGSXO0a1DKjdihLVNp/taE/xYhsgwe+VpKEEB4LlraQyE84gEihxCnbfoyOuJIEXy2FIYw+JjRusybKlU2g/vhTSGTydvCvXhYBdtAXtS2v7LkHtmXh/8fly1do8FI/D0f8UbzVb5h+KRhMGSAmR2mhi0YG/uj7wgxcfzCrMvdjitUIpXDX8ae2JcF/36qUWIMwN6JsjaRGNj+jEteGDcFyTUb8X/NHSucKMJp7pduxtD6KuxVlyxxwaeiC1FbGBESO84lbyrAugYxdl+2N8/6AgWpo/IeoAOcsG35IA/b3AuSyoa55L7llBLlaWlEWvuCFd8f8NfcTUgzJv6CbB+6ohWwodlk9nGWFpBAOaz5uEW5xBvmjnHFeDsb0mXwayj3mdYq5gxxNf3H3/tnCgHwjSrpSgVxLmiTtuszdRUFIsn6LiMPjL808vL1uQhDbM7aA43mISXReqjSskynIRcHCJ9qeFopJfx9tqyUoGbSwJex/0aDE3plBPGtNBYgWbdLom3+Q/bjdizR2/AS/c/dH/d3G7pyl1qDXgtOFtEqidwLqxPYtrNEveasWq3vPUUtqTeu8gpov4bdOQRI2kneFvRNMrShyVeEupK1PoLDPMSfWMIJcs267mGB8X9CehQCF0gIyhpP10mbyM7lwW1e6TGvHBV1sg/UyTghHPGRqMyaebC6pbB1WKNCQtlai1GGvmq9zUKaUzLaXsXEBYtHxmFbEZ2kJhR164LhWW2Tlp1dhsGE7ZgIWRBOx3Zcu2DxgH+G83WTPceKG0TgQKKiiNNOlWgvqNEbnrk6fVD+AqRam2OguZb0YWSTX88N+i/ELSxbaUUpPx4vJUzYg/WonSeA8xUK6u7DPHgpqWpEe6D4cXg5uK9FIYVba47V/nb+wyOtk+zG8RrS4EA0ouwa04iByRLSvoJA2FzaobbZtXnq8GdbfqEp5I2dpfpj59TCVif6+E75p665faiX8gS213RqBxTZqfHP46nF6NSenOneuT+vgbLUbdTH2/t0REFXZJOEB6DHvx6N6g9956CYrY/AYcm9gELJXYkrSi+0F0geKDZgOCIYkLU/+GOW5aGj8mvLFgtFH5+XC8hvAE3CvHRfl4ofM/Qwk4x2A+R+nyc9gNu/9Tem7XW4XRnyRymf52z09cTOdr+PG6+P/Vb4QiXlwauc5WB1z3o+IJjlbxI8MyWtSzT+k4sKVbhF3xa+vDts3NxXa87iiu+xRH9cAprnOL2h6vV54iQRXuOAj1s8nLFK8gZ70ThIQcWdF19/2xaJmT0efrkNDkWbpAQPdo92Z8+Hn/aLjbOzB9AI/k12fPs9HhUNDJ1u6ax2VxD3R6PywN7BrLJ26z6s3QoMp76qzzwetrDABKSGkfW5PwS1GvYNUbK6uRqxfyVGNyFB0E+OugMM8kKwmJmupuRWO8XkXXXQECyRVw9UyIrtCtcc4oNqXqr7AURBmKn6Khz3eBN96LwIJrAGP9mr/59uTOSx631suyT+QujDd4beUFpZ0kJEEnjlP+X/Kr2kCKhnENTg4BsMTOmMqlj2WMFLRUlVG0fzdCBgUta9odrJfpVdFomTi6ak0tFjXTcdqqvWBAzjY6hVrH9sbt3Z9gn+AVDpTcQImefbB4edirjzrsNievve4ZT4EUZWV3TxEsIW+9MT/RJoKfZZYSRGfC1CwPG/9rdMOM8qR/LUYvw5f/emUSoD7YSFuOoqchdUg2UePd1eCtFSKgxLSZ764oy4lvRCIH6bowPxZWwxNFctksLeil47pfevcBipkkBIc4ngZG+kxGZ71a72KQ7VaZ6MZOZkQJZXM6kb/Ac0/XkJx8dvyfJcWbI3zONEaEPIW8GbkYjsZcwy+eMoKrYjDmvEEixHzkCSCRPRzhOfJZuLdcbx19EL23MA8rnjTZZ787FGMnkqnpuzB5/90w1gtUSRaWcb0eta8198VEeZMUSfIhyuc4/nywFQ9uqn7jdqXh+5wwv+RK9XouNPbYdoEelNGo34KyySwigsrfCe0v/PlWPvQvQg8R0KgHO18mTVThhQrlbEQ0Kp/JxPdjHyR7E1QPw/ut0r+HDDG7BwZFm9IqEUZRpv2WpzlMkOemeLcAt5CsrzskLGaVOAxyySzZV/D2EY7ydNZMf8e8VhHcKGHAWNszf1EOq8fNstijMY4JXyATwTdncFFqcNDfDo+mWFvxJJpc4sEZtjXyBdoFcxbUmniCoKq5jydUHNjYJxMqN1KzYV62MugcELVhS3Bnd+TLLOh7dws/zSXWzxEb4Nj4aFun5x4kDWLK5TUF/yCXB/cZYvI9kPgVsG2jShtXkxfgT+xzjJofXqPEnIXIQ1lnIdmVzBOM90EXvJUW6a0nZ/7XjJGl8ToO3H/fdxnxmTNKBZxnkpXLVgLXCZywGT3YyS75w/PAH5I/jMuRspej8xZObU9kREbRA+kqjmKRFaKGWAmFQspC+QLbKPf0RaK3OXvBSWqo46p70ws/eZpu6jCtZUgQy6r4tHMPUdAgWGGUYNbuv/1a6K+MVFsd3T183+T8capSo6m0+Sh57fEeG/95dykGJBQMj09DSW2bY0mUonDy9a8trLnnL5B5LW3Nl8rJZNysO8Zb+80zXxqUGFpud3Qzwb7bf+8mq6x0TAnJU9pDQR9YQmZhlna2xuxJt0aCO/f1SU8gblOrbIyMsxTlVUW69VJPzYU2HlRXcqE2lLLxnObZuz2tT9CivfTAUYfmzJlt/lOPgsR6VN64/xQd4Jlk/RV7UKVv2Gx/AWsmTAuCWKhdwC+4HmKEKYZh2Xis4KsUR1BeObs1c13wqFRnocdmuheaTV30gvVXZcouzHKK5zwrN52jXJEuX6dGx3BCpV/++4f3hyaW/cQJLFKqasjsMuO3B3WlMq2gyYfdK1e7L2pO/tRye2mwzwZPfdUMrl5wdLqdd2Kv/wVtnpyWYhd49L6rsOV+8HXPrWH2Kup89l2tz6bf80iYSd+V4LROSOHeamvexR524q4r43rTmtFzQvArpvWfLYFZrbFspBsXNUqqenjxNNsFXatZvlIhk7teUPfK+YL32F8McTnjv0BZNppb+vshoCrtLXjIWq3EJXpVXIlG6ZNL0dh6qEm2WMwDjD3LfOfkGh1/czYc/0qhiD2ozNnH4882MVVt3JbVFkbwowNCO3KL5IoYW5wlVeGCViOuv1svZx7FbzxKzA4zGqBlRRaRWCobXaVq4yYCWbZf8eiJwt3OY+MFiSJengcFP2t0JMfzOiJ7cECvpx7neg1Rc5x+7myPJOXt2FohVRyXtD+/rDoTOyGYInJelZMjolecVHUhUNqvdZWg2J2t0jPmiLFeRD/8fOT4o+NGILb+TufCo9ceBBm3JLVn+MO2675n7qiEX/6W+188cYg3Zn5NSTjgOKfWFSAANa6raCxSoVU851oJLY11WIoYK0du0ec5E4tCnAPoKh71riTsjVIp3gKvBbEYQiNYrmH22oLQWA2AdwMnID6PX9b58dR2QKo4qag1D1Z+L/FwEKTR7osOZPWECPJIHQqPUsM5i/CH5YupVPfFA5pHUBcsesh8eO5YhyWnaVRPZn/BmdXVumZWPxMP5e28zm2uqHgFoT9CymHYNNrzrrjlXZM06HnzDxYNlI5b/QosxLmmrqDFqmogQdqk0WLkUceoAvQxHgkIyvWU69BPFr24VB6+lx75Rna6dGtrmOxDnvBojvi1/4dHjVeg8owofPe1cOnxU1ioh016s/Vudv9mhV9f35At+Sh28h1bpp8xhr09+vf47Elx3Ms6hyp6QvB3t0vnLbOhwo660cp7K0vvepabK7YJfxEWWfrC2YzJfYOjygPwfwd/1amTqa0hZ5ueebhWYVMubRTwIjj+0Oq0ohU3zfRfuL8gt59XsHdwKtxTQQ4Y2qz6gisxnm2UdlmpEkgOsZz7iEk6QOt8BuPwr+NR01LTqXmJo1C76o1N274twJvl+I069TiLpenK/miRxhyY8jvYV6W1WuSwhH9q7kuwnJMtm7IWcqs7HsnyHSqWXLSpYtZGaR1V3t0gauninFPZGtWskF65rtti48UV9uV9KM8kfDYs0pgB00S+TlzTXV6P8mxq15b9En8sz3jWSszcifZa/NuufPNnNTb031pptt0+sRSH/7UG8pzbsgtt3OG3ut7B9JzDMt2mTZuyRNIV8D54TuTrpNcHtgmMlYJeiY9XS83NYJicjRjtJSf9BZLsQv629QdDsKQhTK5CnXhpk7vMNkHzPhm0ExW/VCGApHfPyBagtZQTQmPHx7g5IXXsrQDPzIVhv2LB6Ih138iSDww1JNHrDvzUxvp73MsQBVhW8EbrReaVUcLB1R3PUXyaYG4HpJUcLVxMgDxcPkVRQpL7VTAGabDzbKcvg12t5P8TSGQkrj/gOrpnbiDHwluA73xbXts/L7u468cRWSWRtgTwlQnA47EKg0OiZDgFxAKQQUcsbGomITgeXUAAyKe03eA7Mp4gnyKQmm0LXJtEk6ddksMJCuxDmmHzmVhO+XaN2A54MIh3niw5CF7PwiXFZrnA8wOdeHLvvhdoqIDG9PDI7UnWWHq526T8y6ixJPhkuVKZnoUruOpUgOOp3iIKBjk+yi1vHo5cItHXb1PIKzGaZlRS0g5d3MV2pD8FQdGYLZ73aae/eEIUePMc4NFz8pIUfLCrrF4jVWH5gQneN3S8vANBmUXrEcKGn6hIUN95y1vpsvLwbGpzV9L0ZKTan6TDXM05236uLJcIEMKVAxKNT0K8WljuwNny3BNQRfzovA85beI9zr1AGNYnYCVkR1aGngWURUrgqR+gRrQhxW81l3CHevjvGEPzPMTxdsIfB9dfGRbZU0cg/1mcubtECX4tvaedmNAvTxCJtc2QaoUalGfENCGK7IS/O8CRpdOVca8EWCRwv2sSWE8CJPW5PCugjCXPd3h6U60cPD+bdhtXZuYB6stcoveE7Sm5MM2yvfUHXFSW7KzLmi7/EeEWL0wqcOH9MOSKjhCHHmw+JGLcYE/7SBZQCRggox0ZZTAxrlzNNXYXL5fNIjkdT4YMqVUz6p8YDt049v4OXGdg3qTrtLBUXOZf7ahPlZAY/O+7Sp0bvGSHdyQ8B1LOsplqMb9Se8VAE7gIdSZvxbRSrfl+Lk5Qaqi5QJceqjitdErcHXg/3MryljPSIAMaaloFm1cVwBJ8DNmkDqoGROSHFetrgjQ5CahuKkdH5pRPigMrgTtlFI8ufJPJSUlGgTjbBSvpRc0zypiUn6U5KZqcRoyrtzhmJ7/caeZkmVRwJQeLOG8LY6vP5ChpKhc8Js0El+n6FXqbx9ItdtLtYP92kKfaTLtCi8StLZdENJa9Ex1nOoz1kQ7qxoiZFKRyLf4O4CHRT0T/0W9F8epNKVoeyxUXhy3sQMMsJjQJEyMOjmOhMFgOmmlscV4eFi1CldU92yjwleirEKPW3bPAuEhRZV7JsKV3Lr5cETAiFuX5Nw5UlF7d2HZ96Bh0sgFIL5KGaKSoVYVlvdKpZJVP5+NZ7xDEkQhmDgsDKciazJCXJ6ZN2B3FY2f6VZyGl/t4aunGIAk/BHaS+i+SpdRfnB/OktOvyjinWNfM9Ksr6WwtCa1hCmeRI6icpFM4o8quCLsikU0tMoZI/9EqXRMpKGaWzofl4nQuVQm17d5fU5qXCQeCDqVaL9XJ9qJ08n3G3EFZS28SHEb3cdRBdtO0YcTzil3QknNKEe/smQ1fTb0XbpyNB5xAeuIlf+5KWlEY0DqJbsnzJlQxJPOVyHiKMx5Xu9FcEv1Fbg6Fhm4t+Jyy5JC1W3YO8dYLsO0PXPbxodBgttTbH3rt9Cp1lJIk2r3O1Zqu94eRbnIz2f50lWolYzuKsj4PMok4abHLO8NAC884hiXx5Fy5pWKO0bWL7uEGXaJCtznhP67SlQ4xjWIfgq6EpZ28QMtuZK7JC0RGbl9nA4XtFLug/NLMoH1pGt9IonAJqcEDLyH6TDROcbsmGPaGIxMo41IUAnQVPMPGByp4mOmh9ZQMkBAcksUK55LsZj7E5z5XuZoyWCKu6nHmDq22xI/9Z8YdxJy4kWpD16jLVrpwGLWfyOD0Wd+cBzFBxVaGv7S5k9qwh/5t/LQEXsRqI3Q9Rm3QIoaZW9GlsDaKOUyykyWuhNOprSEi0s1G4rgoiX1V743EELti+pJu5og6X0g6oTynUqlhH9k6ezyRi05NGZHz0nvp3HOJr7ebrAUFrDjbkFBObEvdQWkkUbL0pEvMU46X58vF9j9F3j6kpyetNUBItrEubW9ZvMPM4qNqLlsSBJqOH3XbNwv/cXDXNxN8iFLzUhteisYY+RlHYOuP29/Cb+L+xv+35Rv7xudnZ6ohK4cMPfCG8KI7dNmjNk/H4e84pOxn/sZHK9psfvj8ncA8qJz7O8xqbxESDivGJOZzF7o5PJLQ7g34qAWoyuA+x3btU98LT6ZyGyceIXjrqob2CAVql4VOTQPUQYvHV/g4zAuCZGvYQBtf0wmd5lilrvuEn1BXLny01B4h4SMDlYsnNpm9d7m9h578ufpef9Z4WplqWQvqo52fyUA7J24eZD5av6SyGIV9kpmHNqyvdfzcpEMw97BvknV2fq+MFHun9BT3Lsf8pbzvisWiIQvYkng+8Vxk1V+dli1u56kY50LRjaPdotvT5BwqtwyF+emo/z9J3yVUVGfKrxQtJMOAQWoQii/4dp9wgybSa5mkucmRLtEQZ/pz0tL/NVcgWAd95nEQ3Tg6tNbuyn3Iepz65L3huMUUBntllWuu4DbtOFSMSbpILV4fy6wlM0SOvi6CpLh81c1LreIvKd61uEWBcDw1lUBUW1I0Z+m/PaRlX+PQ/oxg0Ye6KUiIiTF4ADNk59Ydpt5/rkxmq9tV5Kcp/eQLUVVmBzQNVuytQCP6Ezd0G8eLxWyHpmZWJ3bAzkWTtg4lZlw42SQezEmiUPaJUuR/qklVA/87S4ArFCpALdY3QRdUw3G3XbWUp6aq9z0zUizcPa7351p9JXOZyfdZBFnqt90VzQndXB/mwf8LC9STj5kenVpNuqOQQP3mIRJj7eV21FxG8VAxKrEn3c+XfmZ800EPb9/5lIlijscUbB6da0RQaMook0zug1G0tKi/JBC4rw7/D3m4ARzAkzMcVrDcT2SyFtUdWAsFlsPDFqV3N+EjyXaoEePwroaZCiLqEzb8MW+PNE9TmTC01EzWli51PzZvUqkmyuROU+V6ik+Le/9qT6nwzUzf9tP68tYei0YaDGx6kAd7jn1cKqOCuYbiELH9zYqcc4MnRJjkeGiqaGwLImhyeKs+xKJMBlOJ05ow9gGCKZ1VpnMKoSCTbMS+X+23y042zOb5MtcY/6oBeAo1Vy89OTyhpavFP78jXCcFH0t7Gx24hMEOm2gsEfGabVpQgvFqbQKMsknFRRmuPHcZu0Su/WMFphZvB2r/EGbG72rpGGho3h+Msz0uGzJ7hNK2uqQiE1qmn0zgacKYYZBCqsxV+sjbpoVdSilW/b94n2xNb648VmNIoizqEWhBnsen+d0kbCPmRItfWqSBeOd9Wne3c6bcd6uvXOJ6WdiSsuXq0ndhqrQ4QoWUjCjYtZ0EAhnSOP1m44xkf0O7jXghrzSJWxP4a/t72jU29Vu2rvu4n7HfHkkmQOMGSS+NPeLGO5I73mC2B7+lMiBQQZRM9/9liLIfowupUFAbPBbR+lxDM6M8Ptgh1paJq5Rvs7yEuLQv/7d1oU2woFSb3FMPWQOKMuCuJ7pDDjpIclus5TeEoMBy2YdVB4fxmesaCeMNsEgTHKS5WDSGyNUOoEpcC2OFWtIRf0w27ck34/DjxRTVIcc9+kqZE6iMSiVDsiKdP/Xz5XfEhm/sBhO50p1rvJDlkyyxuJ9SPgs7YeUJBjXdeAkE+P9OQJm6SZnn1svcduI78dYmbkE2mtziPrcjVisXG78spLvbZaSFx/Rks9zP4LKn0Cdz/3JsetkT06A8f/yCgMO6Mb1Hme0JJ7b2wZz1qleqTuKBGokhPVUZ0dVu+tnQYNEY1fmkZSz6+EGZ5EzL7657mreZGR3jUfaEk458PDniBzsSmBKhDRzfXameryJv9/D5m6HIqZ0R+ouCE54Dzp4IJuuD1e4Dc5i+PpSORJfG23uVgqixAMDvchMR0nZdH5brclYwRoJRWv/rlxGRI5ffD5NPGmIDt7vDE1434pYdVZIFh89Bs94HGGJbTwrN8T6lh1HZFTOB4lWzWj6EVqxSMvC0/ljWBQ3F2kc/mO2b6tWonT2JEqEwFts8rz2h+oWNds9ceR2cb7zZvJTDppHaEhK5avWqsseWa2Dt5BBhabdWSktS80oMQrL4TvAM9b5HMmyDnO+OkkbMXfUJG7eXqTIG6lqSOEbqVR+qYdP7uWb57WEJqzyh411GAVsDinPs7KvUeXItlcMdOUWzXBH6zscymV1LLVCtc8IePojzXHF9m5b5zGwBRdzcyUJkiu938ApmAayRdJrX1PmVguWUvt2ThQ62czItTyWJMW2An/hdDfMK7SiFQlGIdAbltHz3ycoh7j9V7GxNWBpbtcSdqm4XxRwTawc3cbZ+xfSv9qQfEkDKfZTwCkqWGI/ur250ItXlMlh6vUNWEYIg9A3GzbgmbqvTN8js2YMo87CU5y6nZ4dbJLDQJj9fc7yM7tZzJDZFtqOcU8+mZjYlq4VmifI23iHb1ZoT9E+kT2dolnP1AfiOkt7PQCSykBiXy5mv637IegWSKj9IKrYZf4Lu9+I7ub+mkRdlvYzehh/jaJ9n7HUH5b2IbgeNdkY7wx1yVzxS7pbvky6+nmVUtRllEFfweUQ0/nG017WoUYSxs+j2B4FV/F62EtHlMWZXYrjGHpthnNb1x66LKZ0Qe92INWHdfR/vqp02wMS8r1G4dJqHok8KmQ7947G13a4YXbsGgHcBvRuVu1eAi4/A5+ZixmdSXM73LupB/LH7O9yxLTVXJTyBbI1S49TIROrfVCOb/czZ9pM4JsZx8kUz8dQGv7gUWKxXvTH7QM/3J2OuXXgciUhqY+cgtaOliQQVOYthBLV3xpESZT3rmfEYNZxmpBbb24CRao86prn+i9TNOh8VxRJGXJfXHATJHs1T5txgc/opYrY8XjlGQQbRcoxIBcnVsMjmU1ymmIUL4dviJXndMAJ0Yet+c7O52/p98ytlmAsGBaTAmMhimAnvp1TWNGM9BpuitGj+t810CU2UhorrjPKGtThVC8WaXw04WFnT5fTjqmPyrQ0tN3CkLsctVy2xr0ZWgiWVZ1OrlFjjxJYsOiZv2cAoOvE+7sY0I/TwWcZqMoyIKNOftwP7w++Rfg67ljfovKYa50if3fzE/8aPYVey/Nq35+nH2sLPh/fP5TsylSKGOZ4k69d2PnH43+kq++sRXHQqGArWdwhx+hpwQC6JgT2uxehYU4Zbw7oNb6/HLikPyJROGK2ouyr+vzseESp9G50T4AyFrSqOQ0rroCYP4sMDFBrHn342EyZTMlSyk47rHSq89Y9/nI3zG5lX16Z5lxphguLOcZUndL8wNcrkyjH82jqg8Bo8OYkynrxZvbFno5lUS3OPr8Ko3mX9NoRPdYOKKjD07bvgFgpZ/RF+YzkWvJ/Hs/tUbfeGzGWLxNAjfDzHHMVSDwB5SabQLsIZHiBp43FjGkaienYoDd18hu2BGwOK7U3o70K/WY/kuuKdmdrykIBUdG2mvE91L1JtTbh20mOLbk1vCAamu7utlXeGU2ooVikbU/actcgmsC1FKk2qmj3GWeIWbj4tGIxE7BLcBWUvvcnd/lYxsMV4F917fWeFB/XbINN3qGvIyTpCalz1lVewdIGqeAS/gB8Mi+sA+BqDiX3VGD2eUunTRbSY+AuDy4E3Qx3hAhwnSXX+B0zuj3eQ1miS8Vux2z/l6/BkWtjKGU72aJkOCWhGcSf3+kFkkB15vGOsQrSdFr6qTj0gBYiOlnBO41170gOWHSUoBVRU2JjwppYdhIFDfu7tIRHccSNM5KZOFDPz0TGMAjzzEpeLwTWp+kn201kU6NjbiMQJx83+LX1e1tZ10kuChJZ/XBUQ1dwaBHjTDJDqOympEk8X2M3VtVw21JksChA8w1tTefO3RJ1FMbqZ01bHHkudDB/OhLfe7P5GOHaI28ZXKTMuqo0hLWQ4HabBsGG7NbP1RiXtETz074er6w/OerJWEqjmkq2y51q1BVI+JUudnVa3ogBpzdhFE7fC7kybrAt2Z6RqDjATAUEYeYK45WMupBKQRtQlU+uNsjnzj6ZmGrezA+ASrWxQ6LMkHRXqXwNq7ftv28dUx/ZSJciDXP2SWJsWaN0FjPX9Yko6LobZ7aYW/IdUktI9apTLyHS8DyWPyuoZyxN1TK/vtfxk3HwWh6JczZC8Ftn0bIJay2g+n5wd7lm9rEsKO+svqVmi+c1j88hSCxbzrg4+HEP0Nt1/B6YW1XVm09T1CpAKjc9n18hjqsaFGdfyva1ZG0Xu3ip6N6JGpyTSqY5h4BOlpLPaOnyw45PdXTN+DtAKg7DLrLFTnWusoSBHk3s0d7YouJHq85/R09Tfc37ENXZF48eAYLnq9GLioNcwDZrC6FW6godB8JnqYUPvn0pWLfQz0lM0Yy8Mybgn84Ds3Q9bDP10bLyOV+qzxa4Rd9Dhu7cju8mMaONXK3UqmBQ9qIg7etIwEqM/kECk/Dzja4Bs1xR+Q/tCbc8IKrSGsTdJJ0vge7IG20W687uVmK6icWQ6cD3lwFzgNMGtFvO5qyJeKflGLAAcQZOrkxVwy3cWvqlGpvjmf9Qe6Ap20MPbV92DPV0OhFM4kz8Yr0ffC2zLWSQ1kqY6QdQrttR3kh1YLtQd1kCEv5hVoPIRWl5ERcUTttBIrWp6Xs5Ehh5OUUwI5aEBvuiDmUoENmnVw1FohCrbRp1A1E+XSlWVOTi7ADW+5Ohb9z1vK4qx5R5lPdGCPBJZ00mC+Ssp8VUbgpGAvXWMuWQQRbCqI6Rr2jtxZxtfP7W/8onz+yz0Gs76LaT5HX9ecyiZCB/ZR/gFtMxPsDwohoeCRtiuLxE1GM1vUEUgBv86+eehL58/P56QFGQ/MqOe/vC76L63jzmeax4exd/OKTUvkXg+fOJUHych9xt/9goJMrapSgvXrj8+8vk/N80f22Sewj6cyGqt1B6mztoeklVHHraouhvHJaG/OuBz6DHKMpFmQULU1bRWlyYE0RPXYYkUycIemN7TLtgNCJX6BqdyxDKkegO7nJK5xQ7OVYDZTMf9bVHidtk6DQX9Et+V9M7esgbsYBdEeUpsB0Xvw2kd9+rI7V+m47u+O/tq7mw7262HU1WlS9uFzsV6JxIHNmUCy0QS9e077JGRFbG65z3/dOKB/Zk+yDdKpUmdXjn/aS3N5nv4fK7bMHHmPlHd4E2+iTbV5rpzScRnxk6KARuDTJ8Q1LpK2mP8gj1EbuJ9RIyY+EWK4hCiIDBAS1Tm2IEXAFfgKPgdL9O6mAa06wjCcUAL6EsxPQWO9VNegBPm/0GgkZbDxCynxujX/92vmGcjZRMAY45puak2sFLCLSwXpEsyy5fnF0jGJBhm+fNSHKKUUfy+276A7/feLOFxxUuHRNJI2Osenxyvf8DAGObT60pfTTlhEg9u/KKkhJqm5U1/+BEcSkpFDA5XeCqxwXmPac1jcuZ3JWQ+p0NdWzb/5v1ZvF8GtMTFFEdQjpLO0bwPb0BHNWnip3liDXI2fXf05jjvfJ0NpjLCUgfTh9CMFYVFKEd4Z/OG/2C+N435mnK+9t1gvCiVcaaH7rK4+PjCvpVNiz+t2QyqH1O8x3JKZVl6Q+Lp/XK8wMjVMslOq9FdSw5FtUs/CptXH9PW+wbWHgrV17R5jTVOtGtKFu3nb80T+E0tv9QkzW3J2dbaw/8ddAKZ0pxIaEqLjlPrji3VgJ3GvdFvlqD8075woxh4fVt0JZE0KVFsAvqhe0dqN9b35jtSpnYMXkU+vZq+IAHad3IHc2s/LYrnD1anfG46IFiMIr9oNbZDWvwthqYNqOigaKd/XlLU4XHfk/PXIjPsLy/9/kAtQ+/wKH+hI/IROWj5FPvTZAT9f7j4ZXQyG4M0TujMAFXYkKvEHv1xhySekgXGGqNxWeWKlf8dDAlLuB1cb/qOD+rk7cmwt+1yKpk9cudqBanTi6zTbXRtV8qylNtjyOVKy1HTz0GW9rjt6sSjAZcT5R+KdtyYb0zyqG9pSLuCw5WBwAn7fjBjKLLoxLXMI+52L9cLwIR2B6OllJZLHJ8vDxmWdtF+QJnmt1rsHPIWY20lftk8fYePkAIg6Hgn532QoIpegMxiWgAOfe5/U44APR8Ac0NeZrVh3gEhs12W+tVSiWiUQekf/YBECUy5fdYbA08dd7VzPAP9aiVcIB9k6tY7WdJ1wNV+bHeydNtmC6G5ICtFC1ZwmJU/j8hf0I8TRVKSiz5oYIa93EpUI78X8GYIAZabx47/n8LDAAJ0nNtP1rpROprqKMBRecShca6qXuTSI3jZBLOB3Vp381B5rCGhjSvh/NSVkYp2qIdP/Bg=";
+
+},{}],6:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+   Collection of static dictionary words.
+*/
+
+var data = require('./dictionary-browser');
+exports.init = function() {
+  exports.dictionary = data.init();
+};
+
+exports.offsetsByLength = new Uint32Array([
+     0,     0,     0,     0,     0,  4096,  9216, 21504, 35840, 44032,
+ 53248, 63488, 74752, 87040, 93696, 100864, 104704, 106752, 108928, 113536,
+ 115968, 118528, 119872, 121280, 122016,
+]);
+
+exports.sizeBitsByLength = new Uint8Array([
+  0,  0,  0,  0, 10, 10, 11, 11, 10, 10,
+ 10, 10, 10,  9,  9,  8,  7,  7,  8,  7,
+  7,  6,  6,  5,  5,
+]);
+
+exports.minDictionaryWordLength = 4;
+exports.maxDictionaryWordLength = 24;
+
+},{"./dictionary-browser":4}],7:[function(require,module,exports){
+function HuffmanCode(bits, value) {
+  this.bits = bits;   /* number of bits used for this symbol */
+  this.value = value; /* symbol value or table offset */
+}
+
+exports.HuffmanCode = HuffmanCode;
+
+var MAX_LENGTH = 15;
+
+/* Returns reverse(reverse(key, len) + 1, len), where reverse(key, len) is the
+   bit-wise reversal of the len least significant bits of key. */
+function GetNextKey(key, len) {
+  var step = 1 << (len - 1);
+  while (key & step) {
+    step >>= 1;
+  }
+  return (key & (step - 1)) + step;
+}
+
+/* Stores code in table[0], table[step], table[2*step], ..., table[end] */
+/* Assumes that end is an integer multiple of step */
+function ReplicateValue(table, i, step, end, code) {
+  do {
+    end -= step;
+    table[i + end] = new HuffmanCode(code.bits, code.value);
+  } while (end > 0);
+}
+
+/* Returns the table width of the next 2nd level table. count is the histogram
+   of bit lengths for the remaining symbols, len is the code length of the next
+   processed symbol */
+function NextTableBitSize(count, len, root_bits) {
+  var left = 1 << (len - root_bits);
+  while (len < MAX_LENGTH) {
+    left -= count[len];
+    if (left <= 0) break;
+    ++len;
+    left <<= 1;
+  }
+  return len - root_bits;
+}
+
+exports.BrotliBuildHuffmanTable = function(root_table, table, root_bits, code_lengths, code_lengths_size) {
+  var start_table = table;
+  var code;            /* current table entry */
+  var len;             /* current code length */
+  var symbol;          /* symbol index in original or sorted table */
+  var key;             /* reversed prefix code */
+  var step;            /* step size to replicate values in current table */
+  var low;             /* low bits for current root entry */
+  var mask;            /* mask for low bits */
+  var table_bits;      /* key length of current table */
+  var table_size;      /* size of current table */
+  var total_size;      /* sum of root table size and 2nd level table sizes */
+  var sorted;          /* symbols sorted by code length */
+  var count = new Int32Array(MAX_LENGTH + 1);  /* number of codes of each length */
+  var offset = new Int32Array(MAX_LENGTH + 1);  /* offsets in sorted table for each length */
+
+  sorted = new Int32Array(code_lengths_size);
+
+  /* build histogram of code lengths */
+  for (symbol = 0; symbol < code_lengths_size; symbol++) {
+    count[code_lengths[symbol]]++;
+  }
+
+  /* generate offsets into sorted symbol table by code length */
+  offset[1] = 0;
+  for (len = 1; len < MAX_LENGTH; len++) {
+    offset[len + 1] = offset[len] + count[len];
+  }
+
+  /* sort symbols by length, by symbol order within each length */
+  for (symbol = 0; symbol < code_lengths_size; symbol++) {
+    if (code_lengths[symbol] !== 0) {
+      sorted[offset[code_lengths[symbol]]++] = symbol;
+    }
+  }
+
+  table_bits = root_bits;
+  table_size = 1 << table_bits;
+  total_size = table_size;
+
+  /* special case code with only one value */
+  if (offset[MAX_LENGTH] === 1) {
+    for (key = 0; key < total_size; ++key) {
+      root_table[table + key] = new HuffmanCode(0, sorted[0] & 0xffff);
+    }
+
+    return total_size;
+  }
+
+  /* fill in root table */
+  key = 0;
+  symbol = 0;
+  for (len = 1, step = 2; len <= root_bits; ++len, step <<= 1) {
+    for (; count[len] > 0; --count[len]) {
+      code = new HuffmanCode(len & 0xff, sorted[symbol++] & 0xffff);
+      ReplicateValue(root_table, table + key, step, table_size, code);
+      key = GetNextKey(key, len);
+    }
+  }
+
+  /* fill in 2nd level tables and add pointers to root table */
+  mask = total_size - 1;
+  low = -1;
+  for (len = root_bits + 1, step = 2; len <= MAX_LENGTH; ++len, step <<= 1) {
+    for (; count[len] > 0; --count[len]) {
+      if ((key & mask) !== low) {
+        table += table_size;
+        table_bits = NextTableBitSize(count, len, root_bits);
+        table_size = 1 << table_bits;
+        total_size += table_size;
+        low = key & mask;
+        root_table[start_table + low] = new HuffmanCode((table_bits + root_bits) & 0xff, ((table - start_table) - low) & 0xffff);
+      }
+      code = new HuffmanCode((len - root_bits) & 0xff, sorted[symbol++] & 0xffff);
+      ReplicateValue(root_table, table + (key >> root_bits), step, table_size, code);
+      key = GetNextKey(key, len);
+    }
+  }
+
+  return total_size;
+}
+
+},{}],8:[function(require,module,exports){
+'use strict'
+
+exports.byteLength = byteLength
+exports.toByteArray = toByteArray
+exports.fromByteArray = fromByteArray
+
+var lookup = []
+var revLookup = []
+var Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array
+
+var code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
+for (var i = 0, len = code.length; i < len; ++i) {
+  lookup[i] = code[i]
+  revLookup[code.charCodeAt(i)] = i
+}
+
+// Support decoding URL-safe base64 strings, as Node.js does.
+// See: https://en.wikipedia.org/wiki/Base64#URL_applications
+revLookup['-'.charCodeAt(0)] = 62
+revLookup['_'.charCodeAt(0)] = 63
+
+function getLens (b64) {
+  var len = b64.length
+
+  if (len % 4 > 0) {
+    throw new Error('Invalid string. Length must be a multiple of 4')
+  }
+
+  // Trim off extra bytes after placeholder bytes are found
+  // See: https://github.com/beatgammit/base64-js/issues/42
+  var validLen = b64.indexOf('=')
+  if (validLen === -1) validLen = len
+
+  var placeHoldersLen = validLen === len
+    ? 0
+    : 4 - (validLen % 4)
+
+  return [validLen, placeHoldersLen]
+}
+
+// base64 is 4/3 + up to two characters of the original data
+function byteLength (b64) {
+  var lens = getLens(b64)
+  var validLen = lens[0]
+  var placeHoldersLen = lens[1]
+  return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
+}
+
+function _byteLength (b64, validLen, placeHoldersLen) {
+  return ((validLen + placeHoldersLen) * 3 / 4) - placeHoldersLen
+}
+
+function toByteArray (b64) {
+  var tmp
+  var lens = getLens(b64)
+  var validLen = lens[0]
+  var placeHoldersLen = lens[1]
+
+  var arr = new Arr(_byteLength(b64, validLen, placeHoldersLen))
+
+  var curByte = 0
+
+  // if there are placeholders, only get up to the last complete 4 chars
+  var len = placeHoldersLen > 0
+    ? validLen - 4
+    : validLen
+
+  for (var i = 0; i < len; i += 4) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 18) |
+      (revLookup[b64.charCodeAt(i + 1)] << 12) |
+      (revLookup[b64.charCodeAt(i + 2)] << 6) |
+      revLookup[b64.charCodeAt(i + 3)]
+    arr[curByte++] = (tmp >> 16) & 0xFF
+    arr[curByte++] = (tmp >> 8) & 0xFF
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  if (placeHoldersLen === 2) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 2) |
+      (revLookup[b64.charCodeAt(i + 1)] >> 4)
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  if (placeHoldersLen === 1) {
+    tmp =
+      (revLookup[b64.charCodeAt(i)] << 10) |
+      (revLookup[b64.charCodeAt(i + 1)] << 4) |
+      (revLookup[b64.charCodeAt(i + 2)] >> 2)
+    arr[curByte++] = (tmp >> 8) & 0xFF
+    arr[curByte++] = tmp & 0xFF
+  }
+
+  return arr
+}
+
+function tripletToBase64 (num) {
+  return lookup[num >> 18 & 0x3F] +
+    lookup[num >> 12 & 0x3F] +
+    lookup[num >> 6 & 0x3F] +
+    lookup[num & 0x3F]
+}
+
+function encodeChunk (uint8, start, end) {
+  var tmp
+  var output = []
+  for (var i = start; i < end; i += 3) {
+    tmp =
+      ((uint8[i] << 16) & 0xFF0000) +
+      ((uint8[i + 1] << 8) & 0xFF00) +
+      (uint8[i + 2] & 0xFF)
+    output.push(tripletToBase64(tmp))
+  }
+  return output.join('')
+}
+
+function fromByteArray (uint8) {
+  var tmp
+  var len = uint8.length
+  var extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes
+  var parts = []
+  var maxChunkLength = 16383 // must be multiple of 3
+
+  // go through the array every three bytes, we'll deal with trailing stuff later
+  for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
+    parts.push(encodeChunk(
+      uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)
+    ))
+  }
+
+  // pad the end with zeros, but make sure to not forget the extra bytes
+  if (extraBytes === 1) {
+    tmp = uint8[len - 1]
+    parts.push(
+      lookup[tmp >> 2] +
+      lookup[(tmp << 4) & 0x3F] +
+      '=='
+    )
+  } else if (extraBytes === 2) {
+    tmp = (uint8[len - 2] << 8) + uint8[len - 1]
+    parts.push(
+      lookup[tmp >> 10] +
+      lookup[(tmp >> 4) & 0x3F] +
+      lookup[(tmp << 2) & 0x3F] +
+      '='
+    )
+  }
+
+  return parts.join('')
+}
+
+},{}],9:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+   Lookup tables to map prefix codes to value ranges. This is used during
+   decoding of the block lengths, literal insertion lengths and copy lengths.
+*/
+
+/* Represents the range of values belonging to a prefix code: */
+/* [offset, offset + 2^nbits) */
+function PrefixCodeRange(offset, nbits) {
+  this.offset = offset;
+  this.nbits = nbits;
+}
+
+exports.kBlockLengthPrefixCode = [
+  new PrefixCodeRange(1, 2), new PrefixCodeRange(5, 2), new PrefixCodeRange(9, 2), new PrefixCodeRange(13, 2),
+  new PrefixCodeRange(17, 3), new PrefixCodeRange(25, 3), new PrefixCodeRange(33, 3), new PrefixCodeRange(41, 3),
+  new PrefixCodeRange(49, 4), new PrefixCodeRange(65, 4), new PrefixCodeRange(81, 4), new PrefixCodeRange(97, 4),
+  new PrefixCodeRange(113, 5), new PrefixCodeRange(145, 5), new PrefixCodeRange(177, 5), new PrefixCodeRange(209, 5),
+  new PrefixCodeRange(241, 6), new PrefixCodeRange(305, 6), new PrefixCodeRange(369, 7), new PrefixCodeRange(497, 8),
+  new PrefixCodeRange(753, 9), new PrefixCodeRange(1265, 10), new PrefixCodeRange(2289, 11), new PrefixCodeRange(4337, 12),
+  new PrefixCodeRange(8433, 13), new PrefixCodeRange(16625, 24)
+];
+
+exports.kInsertLengthPrefixCode = [
+  new PrefixCodeRange(0, 0), new PrefixCodeRange(1, 0), new PrefixCodeRange(2, 0), new PrefixCodeRange(3, 0),
+  new PrefixCodeRange(4, 0), new PrefixCodeRange(5, 0), new PrefixCodeRange(6, 1), new PrefixCodeRange(8, 1),
+  new PrefixCodeRange(10, 2), new PrefixCodeRange(14, 2), new PrefixCodeRange(18, 3), new PrefixCodeRange(26, 3),
+  new PrefixCodeRange(34, 4), new PrefixCodeRange(50, 4), new PrefixCodeRange(66, 5), new PrefixCodeRange(98, 5),
+  new PrefixCodeRange(130, 6), new PrefixCodeRange(194, 7), new PrefixCodeRange(322, 8), new PrefixCodeRange(578, 9),
+  new PrefixCodeRange(1090, 10), new PrefixCodeRange(2114, 12), new PrefixCodeRange(6210, 14), new PrefixCodeRange(22594, 24),
+];
+
+exports.kCopyLengthPrefixCode = [
+  new PrefixCodeRange(2, 0), new PrefixCodeRange(3, 0), new PrefixCodeRange(4, 0), new PrefixCodeRange(5, 0),
+  new PrefixCodeRange(6, 0), new PrefixCodeRange(7, 0), new PrefixCodeRange(8, 0), new PrefixCodeRange(9, 0),
+  new PrefixCodeRange(10, 1), new PrefixCodeRange(12, 1), new PrefixCodeRange(14, 2), new PrefixCodeRange(18, 2),
+  new PrefixCodeRange(22, 3), new PrefixCodeRange(30, 3), new PrefixCodeRange(38, 4), new PrefixCodeRange(54, 4),
+  new PrefixCodeRange(70, 5), new PrefixCodeRange(102, 5), new PrefixCodeRange(134, 6), new PrefixCodeRange(198, 7),
+  new PrefixCodeRange(326, 8), new PrefixCodeRange(582, 9), new PrefixCodeRange(1094, 10), new PrefixCodeRange(2118, 24),
+];
+
+exports.kInsertRangeLut = [
+  0, 0, 8, 8, 0, 16, 8, 16, 16,
+];
+
+exports.kCopyRangeLut = [
+  0, 8, 0, 8, 16, 0, 16, 8, 16,
+];
+
+},{}],10:[function(require,module,exports){
+function BrotliInput(buffer) {
+  this.buffer = buffer;
+  this.pos = 0;
+}
+
+BrotliInput.prototype.read = function(buf, i, count) {
+  if (this.pos + count > this.buffer.length) {
+    count = this.buffer.length - this.pos;
+  }
+
+  for (var p = 0; p < count; p++)
+    buf[i + p] = this.buffer[this.pos + p];
+
+  this.pos += count;
+  return count;
+}
+
+exports.BrotliInput = BrotliInput;
+
+function BrotliOutput(buf) {
+  this.buffer = buf;
+  this.pos = 0;
+}
+
+BrotliOutput.prototype.write = function(buf, count) {
+  if (this.pos + count > this.buffer.length)
+    throw new Error('Output buffer is not large enough');
+
+  this.buffer.set(buf.subarray(0, count), this.pos);
+  this.pos += count;
+  return count;
+};
+
+exports.BrotliOutput = BrotliOutput;
+
+},{}],11:[function(require,module,exports){
+/* Copyright 2013 Google Inc. All Rights Reserved.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+   Transformations on dictionary words.
+*/
+
+var BrotliDictionary = require('./dictionary');
+
+var kIdentity       = 0;
+var kOmitLast1      = 1;
+var kOmitLast2      = 2;
+var kOmitLast3      = 3;
+var kOmitLast4      = 4;
+var kOmitLast5      = 5;
+var kOmitLast6      = 6;
+var kOmitLast7      = 7;
+var kOmitLast8      = 8;
+var kOmitLast9      = 9;
+var kUppercaseFirst = 10;
+var kUppercaseAll   = 11;
+var kOmitFirst1     = 12;
+var kOmitFirst2     = 13;
+var kOmitFirst3     = 14;
+var kOmitFirst4     = 15;
+var kOmitFirst5     = 16;
+var kOmitFirst6     = 17;
+var kOmitFirst7     = 18;
+var kOmitFirst8     = 19;
+var kOmitFirst9     = 20;
+
+function Transform(prefix, transform, suffix) {
+  this.prefix = new Uint8Array(prefix.length);
+  this.transform = transform;
+  this.suffix = new Uint8Array(suffix.length);
+
+  for (var i = 0; i < prefix.length; i++)
+    this.prefix[i] = prefix.charCodeAt(i);
+
+  for (var i = 0; i < suffix.length; i++)
+    this.suffix[i] = suffix.charCodeAt(i);
+}
+
+var kTransforms = [
+     new Transform(         "", kIdentity,       ""           ),
+     new Transform(         "", kIdentity,       " "          ),
+     new Transform(        " ", kIdentity,       " "          ),
+     new Transform(         "", kOmitFirst1,     ""           ),
+     new Transform(         "", kUppercaseFirst, " "          ),
+     new Transform(         "", kIdentity,       " the "      ),
+     new Transform(        " ", kIdentity,       ""           ),
+     new Transform(       "s ", kIdentity,       " "          ),
+     new Transform(         "", kIdentity,       " of "       ),
+     new Transform(         "", kUppercaseFirst, ""           ),
+     new Transform(         "", kIdentity,       " and "      ),
+     new Transform(         "", kOmitFirst2,     ""           ),
+     new Transform(         "", kOmitLast1,      ""           ),
+     new Transform(       ", ", kIdentity,       " "          ),
+     new Transform(         "", kIdentity,       ", "         ),
+     new Transform(        " ", kUppercaseFirst, " "          ),
+     new Transform(         "", kIdentity,       " in "       ),
+     new Transform(         "", kIdentity,       " to "       ),
+     new Transform(       "e ", kIdentity,       " "          ),
+     new Transform(         "", kIdentity,       "\""         ),
+     new Transform(         "", kIdentity,       "."          ),
+     new Transform(         "", kIdentity,       "\">"        ),
+     new Transform(         "", kIdentity,       "\n"         ),
+     new Transform(         "", kOmitLast3,      ""           ),
+     new Transform(         "", kIdentity,       "]"          ),
+     new Transform(         "", kIdentity,       " for "      ),
+     new Transform(         "", kOmitFirst3,     ""           ),
+     new Transform(         "", kOmitLast2,      ""           ),
+     new Transform(         "", kIdentity,       " a "        ),
+     new Transform(         "", kIdentity,       " that "     ),
+     new Transform(        " ", kUppercaseFirst, ""           ),
+     new Transform(         "", kIdentity,       ". "         ),
+     new Transform(        ".", kIdentity,       ""           ),
+     new Transform(        " ", kIdentity,       ", "         ),
+     new Transform(         "", kOmitFirst4,     ""           ),
+     new Transform(         "", kIdentity,       " with "     ),
+     new Transform(         "", kIdentity,       "'"          ),
+     new Transform(         "", kIdentity,       " from "     ),
+     new Transform(         "", kIdentity,       " by "       ),
+     new Transform(         "", kOmitFirst5,     ""           ),
+     new Transform(         "", kOmitFirst6,     ""           ),
+     new Transform(    " the ", kIdentity,       ""           ),
+     new Transform(         "", kOmitLast4,      ""           ),
+     new Transform(         "", kIdentity,       ". The "     ),
+     new Transform(         "", kUppercaseAll,   ""           ),
+     new Transform(         "", kIdentity,       " on "       ),
+     new Transform(         "", kIdentity,       " as "       ),
+     new Transform(         "", kIdentity,       " is "       ),
+     new Transform(         "", kOmitLast7,      ""           ),
+     new Transform(         "", kOmitLast1,      "ing "       ),
+     new Transform(         "", kIdentity,       "\n\t"       ),
+     new Transform(         "", kIdentity,       ":"          ),
+     new Transform(        " ", kIdentity,       ". "         ),
+     new Transform(         "", kIdentity,       "ed "        ),
+     new Transform(         "", kOmitFirst9,     ""           ),
+     new Transform(         "", kOmitFirst7,     ""           ),
+     new Transform(         "", kOmitLast6,      ""           ),
+     new Transform(         "", kIdentity,       "("          ),
+     new Transform(         "", kUppercaseFirst, ", "         ),
+     new Transform(         "", kOmitLast8,      ""           ),
+     new Transform(         "", kIdentity,       " at "       ),
+     new Transform(         "", kIdentity,       "ly "        ),
+     new Transform(    " the ", kIdentity,       " of "       ),
+     new Transform(         "", kOmitLast5,      ""           ),
+     new Transform(         "", kOmitLast9,      ""           ),
+     new Transform(        " ", kUppercaseFirst, ", "         ),
+     new Transform(         "", kUppercaseFirst, "\""         ),
+     new Transform(        ".", kIdentity,       "("          ),
+     new Transform(         "", kUppercaseAll,   " "          ),
+     new Transform(         "", kUppercaseFirst, "\">"        ),
+     new Transform(         "", kIdentity,       "=\""        ),
+     new Transform(        " ", kIdentity,       "."          ),
+     new Transform(    ".com/", kIdentity,       ""           ),
+     new Transform(    " the ", kIdentity,       " of the "   ),
+     new Transform(         "", kUppercaseFirst, "'"          ),
+     new Transform(         "", kIdentity,       ". This "    ),
+     new Transform(         "", kIdentity,       ","          ),
+     new Transform(        ".", kIdentity,       " "          ),
+     new Transform(         "", kUppercaseFirst, "("          ),
+     new Transform(         "", kUppercaseFirst, "."          ),
+     new Transform(         "", kIdentity,       " not "      ),
+     new Transform(        " ", kIdentity,       "=\""        ),
+     new Transform(         "", kIdentity,       "er "        ),
+     new Transform(        " ", kUppercaseAll,   " "          ),
+     new Transform(         "", kIdentity,       "al "        ),
+     new Transform(        " ", kUppercaseAll,   ""           ),
+     new Transform(         "", kIdentity,       "='"         ),
+     new Transform(         "", kUppercaseAll,   "\""         ),
+     new Transform(         "", kUppercaseFirst, ". "         ),
+     new Transform(        " ", kIdentity,       "("          ),
+     new Transform(         "", kIdentity,       "ful "       ),
+     new Transform(        " ", kUppercaseFirst, ". "         ),
+     new Transform(         "", kIdentity,       "ive "       ),
+     new Transform(         "", kIdentity,       "less "      ),
+     new Transform(         "", kUppercaseAll,   "'"          ),
+     new Transform(         "", kIdentity,       "est "       ),
+     new Transform(        " ", kUppercaseFirst, "."          ),
+     new Transform(         "", kUppercaseAll,   "\">"        ),
+     new Transform(        " ", kIdentity,       "='"         ),
+     new Transform(         "", kUppercaseFirst, ","          ),
+     new Transform(         "", kIdentity,       "ize "       ),
+     new Transform(         "", kUppercaseAll,   "."          ),
+     new Transform( "\xc2\xa0", kIdentity,       ""           ),
+     new Transform(        " ", kIdentity,       ","          ),
+     new Transform(         "", kUppercaseFirst, "=\""        ),
+     new Transform(         "", kUppercaseAll,   "=\""        ),
+     new Transform(         "", kIdentity,       "ous "       ),
+     new Transform(         "", kUppercaseAll,   ", "         ),
+     new Transform(         "", kUppercaseFirst, "='"         ),
+     new Transform(        " ", kUppercaseFirst, ","          ),
+     new Transform(        " ", kUppercaseAll,   "=\""        ),
+     new Transform(        " ", kUppercaseAll,   ", "         ),
+     new Transform(         "", kUppercaseAll,   ","          ),
+     new Transform(         "", kUppercaseAll,   "("          ),
+     new Transform(         "", kUppercaseAll,   ". "         ),
+     new Transform(        " ", kUppercaseAll,   "."          ),
+     new Transform(         "", kUppercaseAll,   "='"         ),
+     new Transform(        " ", kUppercaseAll,   ". "         ),
+     new Transform(        " ", kUppercaseFirst, "=\""        ),
+     new Transform(        " ", kUppercaseAll,   "='"         ),
+     new Transform(        " ", kUppercaseFirst, "='"         )
+];
+
+exports.kTransforms = kTransforms;
+exports.kNumTransforms = kTransforms.length;
+
+function ToUpperCase(p, i) {
+  if (p[i] < 0xc0) {
+    if (p[i] >= 97 && p[i] <= 122) {
+      p[i] ^= 32;
+    }
+    return 1;
+  }
+
+  /* An overly simplified uppercasing model for utf-8. */
+  if (p[i] < 0xe0) {
+    p[i + 1] ^= 32;
+    return 2;
+  }
+
+  /* An arbitrary transform for three byte characters. */
+  p[i + 2] ^= 5;
+  return 3;
+}
+
+exports.transformDictionaryWord = function(dst, idx, word, len, transform) {
+  var prefix = kTransforms[transform].prefix;
+  var suffix = kTransforms[transform].suffix;
+  var t = kTransforms[transform].transform;
+  var skip = t < kOmitFirst1 ? 0 : t - (kOmitFirst1 - 1);
+  var i = 0;
+  var start_idx = idx;
+  var uppercase;
+
+  if (skip > len) {
+    skip = len;
+  }
+
+  var prefix_pos = 0;
+  while (prefix_pos < prefix.length) {
+    dst[idx++] = prefix[prefix_pos++];
+  }
+
+  word += skip;
+  len -= skip;
+
+  if (t <= kOmitLast9) {
+    len -= t;
+  }
+
+  for (i = 0; i < len; i++) {
+    dst[idx++] = BrotliDictionary.dictionary[word + i];
+  }
+
+  uppercase = idx - len;
+
+  if (t === kUppercaseFirst) {
+    ToUpperCase(dst, uppercase);
+  } else if (t === kUppercaseAll) {
+    while (len > 0) {
+      var step = ToUpperCase(dst, uppercase);
+      uppercase += step;
+      len -= step;
+    }
+  }
+
+  var suffix_pos = 0;
+  while (suffix_pos < suffix.length) {
+    dst[idx++] = suffix[suffix_pos++];
+  }
+
+  return idx - start_idx;
+}
+
+},{"./dictionary":6}],12:[function(require,module,exports){
+module.exports = require('./dec/decode').BrotliDecompressBuffer;
+
+},{"./dec/decode":3}]},{},[12])(12)
+});
+/* eslint-enable */
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 467bd3513e4067..81a8164b1e1721 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.19.0",
+	"version": "6.13.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,51 +20,65 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/editor": "file:../editor",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/reusable-blocks": "file:../reusable-blocks",
-		"@wordpress/style-engine": "file:../style-engine",
-		"@wordpress/url": "file:../url",
-		"@wordpress/viewport": "file:../viewport",
-		"classnames": "^2.3.1",
+		"@babel/runtime": "7.25.7",
+		"@react-spring/web": "^9.4.5",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-commands": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/editor": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/fields": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/router": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/widgets": "*",
+		"@wordpress/wordcount": "*",
+		"change-case": "^4.1.2",
+		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
-		"downloadjs": "^1.4.7",
-		"history": "^5.1.0",
-		"lodash": "^4.17.21",
-		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.0"
+		"fast-deep-equal": "^3.1.3",
+		"memize": "^2.1.0",
+		"react-autosize-textarea": "^7.1.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
new file mode 100644
index 00000000000000..63452691c1c373
--- /dev/null
+++ b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -0,0 +1,227 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu } from '@wordpress/components';
+import { useState, useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { symbol, symbolFilled, upload } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	privateApis as editPatternsPrivateApis,
+	store as patternsStore,
+} from '@wordpress/patterns';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+
+const { useHistory } = unlock( routerPrivateApis );
+const { CreatePatternModal, useAddPatternCategory } = unlock(
+	editPatternsPrivateApis
+);
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
+
+export default function AddNewPattern() {
+	const history = useHistory();
+	const [ showPatternModal, setShowPatternModal ] = useState( false );
+	const [ showTemplatePartModal, setShowTemplatePartModal ] =
+		useState( false );
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const patternUploadInputRef = useRef();
+	const {
+		isBlockBasedTheme,
+		addNewPatternLabel,
+		addNewTemplatePartLabel,
+		canCreatePattern,
+		canCreateTemplatePart,
+	} = useSelect( ( select ) => {
+		const { getCurrentTheme, getPostType, canUser } = select( coreStore );
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels
+				?.add_new_item,
+			addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE )
+				?.labels?.add_new_item,
+			// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
+			canCreatePattern: canUser( 'create', {
+				kind: 'postType',
+				name: PATTERN_TYPES.user,
+			} ),
+			canCreateTemplatePart: canUser( 'create', {
+				kind: 'postType',
+				name: TEMPLATE_PART_POST_TYPE,
+			} ),
+		};
+	}, [] );
+
+	function handleCreatePattern( { pattern } ) {
+		setShowPatternModal( false );
+		history.navigate(
+			`/${ PATTERN_TYPES.user }/${ pattern.id }?canvas=edit`
+		);
+	}
+
+	function handleCreateTemplatePart( templatePart ) {
+		setShowTemplatePartModal( false );
+		history.navigate(
+			`/${ TEMPLATE_PART_POST_TYPE }/${ templatePart.id }?canvas=edit`
+		);
+	}
+
+	function handleError() {
+		setShowPatternModal( false );
+		setShowTemplatePartModal( false );
+	}
+
+	const controls = [];
+	if ( canCreatePattern ) {
+		controls.push( {
+			icon: symbol,
+			onClick: () => setShowPatternModal( true ),
+			title: addNewPatternLabel,
+		} );
+	}
+
+	if ( isBlockBasedTheme && canCreateTemplatePart ) {
+		controls.push( {
+			icon: symbolFilled,
+			onClick: () => setShowTemplatePartModal( true ),
+			title: addNewTemplatePartLabel,
+		} );
+	}
+
+	if ( canCreatePattern ) {
+		controls.push( {
+			icon: upload,
+			onClick: () => {
+				patternUploadInputRef.current.click();
+			},
+			title: __( 'Import pattern from JSON' ),
+		} );
+	}
+
+	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
+	if ( controls.length === 0 ) {
+		return null;
+	}
+	return (
+		<>
+			{ addNewPatternLabel && (
+				<DropdownMenu
+					controls={ controls }
+					icon={ null }
+					toggleProps={ {
+						variant: 'primary',
+						showTooltip: false,
+						__next40pxDefaultSize: true,
+					} }
+					text={ addNewPatternLabel }
+					label={ addNewPatternLabel }
+				/>
+			) }
+			{ showPatternModal && (
+				<CreatePatternModal
+					onClose={ () => setShowPatternModal( false ) }
+					onSuccess={ handleCreatePattern }
+					onError={ handleError }
+				/>
+			) }
+			{ showTemplatePartModal && (
+				<CreateTemplatePartModal
+					closeModal={ () => setShowTemplatePartModal( false ) }
+					blocks={ [] }
+					onCreate={ handleCreateTemplatePart }
+					onError={ handleError }
+				/>
+			) }
+
+			<input
+				type="file"
+				accept=".json"
+				hidden
+				ref={ patternUploadInputRef }
+				onChange={ async ( event ) => {
+					const file = event.target.files?.[ 0 ];
+					if ( ! file ) {
+						return;
+					}
+					try {
+						const {
+							params: { postType, categoryId },
+						} = history.getLocationWithParams();
+						let currentCategoryId;
+						// When we're not handling template parts, we should
+						// add or create the proper pattern category.
+						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+							/*
+							 * categoryMap.values() returns an iterator.
+							 * Iterator.prototype.find() is not yet widely supported.
+							 * Convert to array to use the Array.prototype.find method.
+							 */
+							const currentCategory = Array.from(
+								categoryMap.values()
+							).find( ( term ) => term.name === categoryId );
+							if ( currentCategory ) {
+								currentCategoryId =
+									currentCategory.id ||
+									( await findOrCreateTerm(
+										currentCategory.label
+									) );
+							}
+						}
+						const pattern = await createPatternFromFile(
+							file,
+							currentCategoryId
+								? [ currentCategoryId ]
+								: undefined
+						);
+
+						// Navigate to the All patterns category for the newly created pattern
+						// if we're not on that page already and if we're not in the `my-patterns`
+						// category.
+						if (
+							! currentCategoryId &&
+							categoryId !== 'my-patterns'
+						) {
+							history.navigate(
+								`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+							);
+						}
+
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: The imported pattern's title.
+								__( 'Imported "%s" from JSON.' ),
+								pattern.title.raw
+							),
+							{
+								type: 'snackbar',
+								id: 'import-pattern-success',
+							}
+						);
+					} catch ( err ) {
+						createErrorNotice( err.message, {
+							type: 'snackbar',
+							id: 'import-pattern-error',
+						} );
+					} finally {
+						event.target.value = '';
+					}
+				} }
+			/>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/add-new-post/index.js b/packages/edit-site/src/components/add-new-post/index.js
new file mode 100644
index 00000000000000..04e286e3967a44
--- /dev/null
+++ b/packages/edit-site/src/components/add-new-post/index.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+import { serialize, synchronizeBlocksWithTemplate } from '@wordpress/blocks';
+
+export default function AddNewPostModal( { postType, onSave, onClose } ) {
+	const labels = useSelect(
+		( select ) => select( coreStore ).getPostType( postType )?.labels,
+		[ postType ]
+	);
+	const [ isCreatingPost, setIsCreatingPost ] = useState( false );
+	const [ title, setTitle ] = useState( '' );
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+	const { resolveSelect } = useRegistry();
+
+	async function createPost( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPost ) {
+			return;
+		}
+		setIsCreatingPost( true );
+		try {
+			const postTypeObject =
+				await resolveSelect( coreStore ).getPostType( postType );
+			const newPage = await saveEntityRecord(
+				'postType',
+				postType,
+				{
+					status: 'draft',
+					title,
+					slug: title || __( 'No title' ),
+					content:
+						!! postTypeObject.template &&
+						postTypeObject.template.length
+							? serialize(
+									synchronizeBlocksWithTemplate(
+										[],
+										postTypeObject.template
+									)
+							  )
+							: undefined,
+				},
+				{ throwOnError: true }
+			);
+
+			onSave( newPage );
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created post or template, e.g: "Hello world".
+					__( '"%s" successfully created.' ),
+					decodeEntities( newPage.title?.rendered || title )
+				),
+				{ type: 'snackbar' }
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the item.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPost( false );
+		}
+	}
+
+	return (
+		<Modal
+			title={
+				// translators: %s: post type singular_name label e.g: "Page".
+				sprintf( __( 'Draft new: %s' ), labels?.singular_name )
+			}
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form onSubmit={ createPost }>
+				<VStack spacing={ 4 }>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Title' ) }
+						onChange={ setTitle }
+						placeholder={ __( 'No title' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPost }
+							aria-disabled={ isCreatingPost }
+						>
+							{ __( 'Create draft' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
new file mode 100644
index 00000000000000..746fd6c5314c31
--- /dev/null
+++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
+	const [ title, setTitle ] = useState( '' );
+	const defaultTitle = __( 'Custom Template' );
+	const [ isBusy, setIsBusy ] = useState( false );
+	async function onCreateTemplate( event ) {
+		event.preventDefault();
+		if ( isBusy ) {
+			return;
+		}
+		setIsBusy( true );
+		try {
+			await createTemplate(
+				{
+					slug:
+						'wp-custom-template-' +
+						kebabCase( title || defaultTitle ),
+					title: title || defaultTitle,
+				},
+				false
+			);
+		} finally {
+			setIsBusy( false );
+		}
+	}
+	return (
+		<form onSubmit={ onCreateTemplate }>
+			<VStack spacing={ 6 }>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ defaultTitle }
+					disabled={ isBusy }
+					help={ __(
+						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
+					) }
+				/>
+				<HStack
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="right"
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							onClose();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default AddCustomGenericTemplateModalContent;
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
deleted file mode 100644
index 15d81dc6e77287..00000000000000
--- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	Flex,
-	FlexItem,
-	Modal,
-	TextControl,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-
-function AddCustomGenericTemplateModal( {
-	onClose,
-	createTemplate,
-	isCreatingTemplate,
-} ) {
-	const [ title, setTitle ] = useState( '' );
-	const defaultTitle = __( 'Custom Template' );
-	const [ isBusy, setIsBusy ] = useState( false );
-	async function onCreateTemplate( event ) {
-		event.preventDefault();
-		if ( isBusy ) {
-			return;
-		}
-		setIsBusy( true );
-		try {
-			await createTemplate(
-				{
-					slug:
-						'wp-custom-template-' +
-						kebabCase( title || defaultTitle ),
-					title: title || defaultTitle,
-				},
-				false
-			);
-		} finally {
-			setIsBusy( false );
-		}
-	}
-	return (
-		<Modal
-			title={ __( 'Create custom template' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ () => {
-				onClose();
-			} }
-			overlayClassName="edit-site-custom-generic-template__modal"
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
-			<form onSubmit={ onCreateTemplate }>
-				<Flex align="flex-start" gap={ 8 }>
-					<FlexItem>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
-							placeholder={ defaultTitle }
-							disabled={ isBusy }
-							help={ __(
-								'Describe the template, e.g. "Post with sidebar".'
-							) }
-						/>
-					</FlexItem>
-				</Flex>
-
-				<Flex
-					className="edit-site-custom-generic-template__modal-actions"
-					justify="flex-end"
-					expanded={ false }
-				>
-					<FlexItem>
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								onClose();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							isBusy={ isBusy }
-							aria-disabled={ isBusy }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</FlexItem>
-				</Flex>
-			</form>
-		</Modal>
-	);
-}
-
-export default AddCustomGenericTemplateModal;
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
new file mode 100644
index 00000000000000..69f1925c7b0e44
--- /dev/null
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -0,0 +1,269 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	SearchControl,
+	TextHighlight,
+	Composite,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useDebouncedInput } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { mapToIHasNameAndId } from './utils';
+
+const EMPTY_ARRAY = [];
+
+function SuggestionListItem( {
+	suggestion,
+	search,
+	onSelect,
+	entityForSuggestions,
+} ) {
+	const baseCssClass =
+		'edit-site-custom-template-modal__suggestions_list__list-item';
+	return (
+		<Composite.Item
+			render={
+				<Button
+					__next40pxDefaultSize
+					role="option"
+					className={ baseCssClass }
+					onClick={ () =>
+						onSelect(
+							entityForSuggestions.config.getSpecificTemplate(
+								suggestion
+							)
+						)
+					}
+				/>
+			}
+		>
+			<Text
+				size="body"
+				lineHeight={ 1.53846153846 } // 20px
+				weight={ 500 }
+				className={ `${ baseCssClass }__title` }
+			>
+				<TextHighlight
+					text={ decodeEntities( suggestion.name ) }
+					highlight={ search }
+				/>
+			</Text>
+			{ suggestion.link && (
+				<Text
+					size="body"
+					lineHeight={ 1.53846153846 } // 20px
+					className={ `${ baseCssClass }__info` }
+				>
+					{ suggestion.link }
+				</Text>
+			) }
+		</Composite.Item>
+	);
+}
+
+function useSearchSuggestions( entityForSuggestions, search ) {
+	const { config } = entityForSuggestions;
+	const query = useMemo(
+		() => ( {
+			order: 'asc',
+			context: 'view',
+			search,
+			per_page: search ? 20 : 10,
+			...config.queryArgs( search ),
+		} ),
+		[ search, config ]
+	);
+	const { records: searchResults, hasResolved: searchHasResolved } =
+		useEntityRecords(
+			entityForSuggestions.type,
+			entityForSuggestions.slug,
+			query
+		);
+	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
+	useEffect( () => {
+		if ( ! searchHasResolved ) {
+			return;
+		}
+		let newSuggestions = EMPTY_ARRAY;
+		if ( searchResults?.length ) {
+			newSuggestions = searchResults;
+			if ( config.recordNamePath ) {
+				newSuggestions = mapToIHasNameAndId(
+					newSuggestions,
+					config.recordNamePath
+				);
+			}
+		}
+		// Update suggestions only when the query has resolved, so as to keep
+		// the previous results in the UI.
+		setSuggestions( newSuggestions );
+	}, [ searchResults, searchHasResolved ] );
+	return suggestions;
+}
+
+function SuggestionList( { entityForSuggestions, onSelect } ) {
+	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
+	const suggestions = useSearchSuggestions(
+		entityForSuggestions,
+		debouncedSearch
+	);
+	const { labels } = entityForSuggestions;
+	const [ showSearchControl, setShowSearchControl ] = useState( false );
+	if ( ! showSearchControl && suggestions?.length > 9 ) {
+		setShowSearchControl( true );
+	}
+	return (
+		<>
+			{ showSearchControl && (
+				<SearchControl
+					__nextHasNoMarginBottom
+					onChange={ setSearch }
+					value={ search }
+					label={ labels.search_items }
+					placeholder={ labels.search_items }
+				/>
+			) }
+			{ !! suggestions?.length && (
+				<Composite
+					orientation="vertical"
+					role="listbox"
+					className="edit-site-custom-template-modal__suggestions_list"
+					aria-label={ __( 'Suggestions list' ) }
+				>
+					{ suggestions.map( ( suggestion ) => (
+						<SuggestionListItem
+							key={ suggestion.slug }
+							suggestion={ suggestion }
+							search={ debouncedSearch }
+							onSelect={ onSelect }
+							entityForSuggestions={ entityForSuggestions }
+						/>
+					) ) }
+				</Composite>
+			) }
+			{ debouncedSearch && ! suggestions?.length && (
+				<Text
+					as="p"
+					className="edit-site-custom-template-modal__no-results"
+				>
+					{ labels.not_found }
+				</Text>
+			) }
+		</>
+	);
+}
+
+function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
+	const [ showSearchEntities, setShowSearchEntities ] = useState(
+		entityForSuggestions.hasGeneralTemplate
+	);
+	return (
+		<VStack
+			spacing={ 4 }
+			className="edit-site-custom-template-modal__contents-wrapper"
+			alignment="left"
+		>
+			{ ! showSearchEntities && (
+				<>
+					<Text as="p">
+						{ __(
+							'Select whether to create a single template for all items or a specific one.'
+						) }
+					</Text>
+					<Flex
+						className="edit-site-custom-template-modal__contents"
+						gap="4"
+						align="initial"
+					>
+						<FlexItem
+							isBlock
+							as={ Button }
+							onClick={ () => {
+								const {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} = entityForSuggestions.template;
+								onSelect( {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} );
+							} }
+						>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
+								{ entityForSuggestions.labels.all_items }
+							</Text>
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
+								{
+									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
+									__( 'For all items' )
+								}
+							</Text>
+						</FlexItem>
+						<FlexItem
+							isBlock
+							as={ Button }
+							onClick={ () => {
+								setShowSearchEntities( true );
+							} }
+						>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
+								{ entityForSuggestions.labels.singular_name }
+							</Text>
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
+								{
+									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
+									__( 'For a specific item' )
+								}
+							</Text>
+						</FlexItem>
+					</Flex>
+				</>
+			) }
+			{ showSearchEntities && (
+				<>
+					<Text as="p">
+						{ __(
+							'This template will be used only for the specific item chosen.'
+						) }
+					</Text>
+					<SuggestionList
+						entityForSuggestions={ entityForSuggestions }
+						onSelect={ onSelect }
+					/>
+				</>
+			) }
+		</VStack>
+	);
+}
+
+export default AddCustomTemplateModalContent;
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
deleted file mode 100644
index aece3595575f0f..00000000000000
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useMemo, useEffect } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	Button,
-	Flex,
-	FlexItem,
-	Modal,
-	SearchControl,
-	TextHighlight,
-	__experimentalText as Text,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
-} from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { mapToIHasNameAndId } from './utils';
-
-const EMPTY_ARRAY = [];
-
-function SuggestionListItem( {
-	suggestion,
-	search,
-	onSelect,
-	entityForSuggestions,
-	composite,
-} ) {
-	const baseCssClass =
-		'edit-site-custom-template-modal__suggestions_list__list-item';
-	return (
-		<CompositeItem
-			role="option"
-			as={ Button }
-			{ ...composite }
-			className={ baseCssClass }
-			onClick={ () =>
-				onSelect(
-					entityForSuggestions.config.getSpecificTemplate(
-						suggestion
-					)
-				)
-			}
-		>
-			<span className={ `${ baseCssClass }__title` }>
-				<TextHighlight
-					text={ decodeEntities( suggestion.name ) }
-					highlight={ search }
-				/>
-			</span>
-			{ suggestion.link && (
-				<span className={ `${ baseCssClass }__info` }>
-					{ suggestion.link }
-				</span>
-			) }
-		</CompositeItem>
-	);
-}
-
-function useDebouncedInput() {
-	const [ input, setInput ] = useState( '' );
-	const [ debounced, setter ] = useState( '' );
-	const setDebounced = useDebounce( setter, 250 );
-	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
-}
-
-function useSearchSuggestions( entityForSuggestions, search ) {
-	const { config } = entityForSuggestions;
-	const query = useMemo(
-		() => ( {
-			order: 'asc',
-			context: 'view',
-			search,
-			per_page: search ? 20 : 10,
-			...config.queryArgs( search ),
-		} ),
-		[ search, config ]
-	);
-	const { records: searchResults, hasResolved: searchHasResolved } =
-		useEntityRecords(
-			entityForSuggestions.type,
-			entityForSuggestions.slug,
-			query
-		);
-	const [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );
-	useEffect( () => {
-		if ( ! searchHasResolved ) return;
-		let newSuggestions = EMPTY_ARRAY;
-		if ( searchResults?.length ) {
-			newSuggestions = searchResults;
-			if ( config.recordNamePath ) {
-				newSuggestions = mapToIHasNameAndId(
-					newSuggestions,
-					config.recordNamePath
-				);
-			}
-		}
-		// Update suggestions only when the query has resolved, so as to keep
-		// the previous results in the UI.
-		setSuggestions( newSuggestions );
-	}, [ searchResults, searchHasResolved ] );
-	return suggestions;
-}
-
-function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
-	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
-	const suggestions = useSearchSuggestions(
-		entityForSuggestions,
-		debouncedSearch
-	);
-	const { labels } = entityForSuggestions;
-	const [ showSearchControl, setShowSearchControl ] = useState( false );
-	if ( ! showSearchControl && suggestions?.length > 9 ) {
-		setShowSearchControl( true );
-	}
-	return (
-		<>
-			{ showSearchControl && (
-				<SearchControl
-					onChange={ setSearch }
-					value={ search }
-					label={ labels.search_items }
-					placeholder={ labels.search_items }
-				/>
-			) }
-			{ !! suggestions?.length && (
-				<Composite
-					{ ...composite }
-					role="listbox"
-					className="edit-site-custom-template-modal__suggestions_list"
-					aria-label={ __( 'Suggestions list' ) }
-				>
-					{ suggestions.map( ( suggestion ) => (
-						<SuggestionListItem
-							key={ suggestion.slug }
-							suggestion={ suggestion }
-							search={ debouncedSearch }
-							onSelect={ onSelect }
-							entityForSuggestions={ entityForSuggestions }
-							composite={ composite }
-						/>
-					) ) }
-				</Composite>
-			) }
-			{ debouncedSearch && ! suggestions?.length && (
-				<p className="edit-site-custom-template-modal__no-results">
-					{ labels.not_found }
-				</p>
-			) }
-		</>
-	);
-}
-
-function AddCustomTemplateModal( {
-	onClose,
-	onSelect,
-	entityForSuggestions,
-	isCreatingTemplate,
-} ) {
-	const [ showSearchEntities, setShowSearchEntities ] = useState(
-		entityForSuggestions.hasGeneralTemplate
-	);
-	const baseCssClass = 'edit-site-custom-template-modal';
-	return (
-		<Modal
-			title={ sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Add template: %s' ),
-				entityForSuggestions.labels.singular_name
-			) }
-			className={ baseCssClass }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ onClose }
-		>
-			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
-			{ ! showSearchEntities && (
-				<>
-					<p>
-						{ __(
-							'Select whether to create a single template for all items or a specific one.'
-						) }
-					</p>
-					<Flex
-						className={ `${ baseCssClass }__contents` }
-						gap="4"
-						align="initial"
-					>
-						<FlexItem
-							isBlock
-							as={ Button }
-							onClick={ () => {
-								const {
-									slug,
-									title,
-									description,
-									templatePrefix,
-								} = entityForSuggestions.template;
-								onSelect( {
-									slug,
-									title,
-									description,
-									templatePrefix,
-								} );
-							} }
-						>
-							<Text as="span" weight={ 600 }>
-								{ entityForSuggestions.labels.all_items }
-							</Text>
-							<Text as="span">
-								{
-									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
-									__( 'For all items' )
-								}
-							</Text>
-						</FlexItem>
-						<FlexItem
-							isBlock
-							as={ Button }
-							onClick={ () => {
-								setShowSearchEntities( true );
-							} }
-						>
-							<Text as="span" weight={ 600 }>
-								{ entityForSuggestions.labels.singular_name }
-							</Text>
-							<Text as="span">
-								{
-									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
-									__( 'For a specific item' )
-								}
-							</Text>
-						</FlexItem>
-					</Flex>
-				</>
-			) }
-			{ showSearchEntities && (
-				<>
-					<p>
-						{ __(
-							'This template will be used only for the specific item chosen.'
-						) }
-					</p>
-					<SuggestionList
-						entityForSuggestions={ entityForSuggestions }
-						onSelect={ onSelect }
-					/>
-				</>
-			) }
-		</Modal>
-	);
-}
-
-export default AddCustomTemplateModal;
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..5f06ecae6824ae 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -1,30 +1,431 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import {
+	Button,
+	Modal,
+	__experimentalGrid as Grid,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	Icon,
+} from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState, memo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	archive,
+	blockMeta,
+	calendar,
+	category,
+	commentAuthorAvatar,
+	edit,
+	home,
+	layout,
+	list,
+	media,
+	notFound,
+	page,
+	pin,
+	verse,
+	search,
+	tag,
+} from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 /**
  * Internal dependencies
  */
-import NewTemplate from './new-template';
-import NewTemplatePart from './new-template-part';
+import AddCustomTemplateModalContent from './add-custom-template-modal-content';
+import {
+	useExistingTemplates,
+	useDefaultTemplateTypes,
+	useTaxonomiesMenuItems,
+	usePostTypeMenuItems,
+	useAuthorMenuItem,
+	usePostTypeArchiveMenuItems,
+} from './utils';
+import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const DEFAULT_TEMPLATE_SLUGS = [
+	'front-page',
+	'home',
+	'single',
+	'page',
+	'index',
+	'archive',
+	'author',
+	'category',
+	'date',
+	'tag',
+	'search',
+	'404',
+];
+
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	home: verse,
+	single: pin,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: commentAuthorAvatar,
+	taxonomy: blockMeta,
+	date: calendar,
+	tag,
+	attachment: media,
+};
+
+function TemplateListItem( {
+	title,
+	direction,
+	className,
+	description,
+	icon,
+	onClick,
+	children,
+} ) {
+	return (
+		<Button
+			__next40pxDefaultSize
+			className={ className }
+			onClick={ onClick }
+			label={ description }
+			showTooltip={ !! description }
+		>
+			<Flex
+				as="span"
+				spacing={ 2 }
+				align="center"
+				justify="center"
+				style={ { width: '100%' } }
+				direction={ direction }
+			>
+				<div className="edit-site-add-new-template__template-icon">
+					<Icon icon={ icon } />
+				</div>
+				<VStack
+					className="edit-site-add-new-template__template-name"
+					alignment="center"
+					spacing={ 0 }
+				>
+					<Text
+						align="center"
+						weight={ 500 }
+						lineHeight={ 1.53846153846 } // 20px
+					>
+						{ title }
+					</Text>
+					{ children }
+				</VStack>
+			</Flex>
+		</Button>
+	);
+}
+
+const modalContentMap = {
+	templatesList: 1,
+	customTemplate: 2,
+	customGenericTemplate: 3,
+};
+
+function NewTemplateModal( { onClose } ) {
+	const [ modalContent, setModalContent ] = useState(
+		modalContentMap.templatesList
+	);
+	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const missingTemplates = useMissingTemplates( setEntityForSuggestions, () =>
+		setModalContent( modalContentMap.customTemplate )
+	);
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
+	}, [] );
 
-export default function AddNewTemplate( { templateType = 'wp_template' } ) {
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
+	const TEMPLATE_SHORT_DESCRIPTIONS = {
+		'front-page': homeUrl,
+		date: sprintf(
+			// translators: %s: The homepage url.
+			__( 'E.g. %s' ),
+			homeUrl + '/' + new Date().getFullYear()
+		),
+	};
+
+	async function createTemplate( template, isWPSuggestion = true ) {
+		if ( isSubmitting ) {
+			return;
+		}
+		setIsSubmitting( true );
+		try {
+			const { title, description, slug } = template;
+			const newTemplate = await saveEntityRecord(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					description,
+					// Slugs need to be strings, so this is for template `404`
+					slug: slug.toString(),
+					status: 'publish',
+					title,
+					// This adds a post meta field in template that is part of `is_custom` value calculation.
+					is_wp_suggestion: isWPSuggestion,
+				},
+				{ throwOnError: true }
+			);
+
+			// Navigate to the created template editor.
+			history.navigate(
+				`/${ TEMPLATE_POST_TYPE }/${ newTemplate.id }?canvas=edit`
+			);
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created post or template, e.g: "Hello world".
+					__( '"%s" successfully created.' ),
+					decodeEntities( newTemplate.title?.rendered || title )
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the template.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsSubmitting( false );
+		}
+	}
+	const onModalClose = () => {
+		onClose();
+		setModalContent( modalContentMap.templatesList );
+	};
+
+	let modalTitle = __( 'Add template' );
+	if ( modalContent === modalContentMap.customTemplate ) {
+		modalTitle = sprintf(
+			// translators: %s: Name of the post type e.g: "Post".
+			__( 'Add template: %s' ),
+			entityForSuggestions.labels.singular_name
+		);
+	} else if ( modalContent === modalContentMap.customGenericTemplate ) {
+		modalTitle = __( 'Create custom template' );
+	}
+
+	return (
+		<Modal
+			title={ modalTitle }
+			className={ clsx( 'edit-site-add-new-template__modal', {
+				'edit-site-add-new-template__modal_template_list':
+					modalContent === modalContentMap.templatesList,
+				'edit-site-custom-template-modal':
+					modalContent === modalContentMap.customTemplate,
+			} ) }
+			onRequestClose={ onModalClose }
+			overlayClassName={
+				modalContent === modalContentMap.customGenericTemplate
+					? 'edit-site-custom-generic-template__modal'
+					: undefined
+			}
+		>
+			{ modalContent === modalContentMap.templatesList && (
+				<Grid
+					columns={ isMobile ? 2 : 3 }
+					gap={ 4 }
+					align="flex-start"
+					justify="center"
+					className="edit-site-add-new-template__template-list__contents"
+				>
+					<Flex className="edit-site-add-new-template__template-list__prompt">
+						{ __(
+							'Select what the new template should apply to:'
+						) }
+					</Flex>
+					{ missingTemplates.map( ( template ) => {
+						const { title, slug, onClick } = template;
+						return (
+							<TemplateListItem
+								key={ slug }
+								title={ title }
+								direction="column"
+								className="edit-site-add-new-template__template-button"
+								description={
+									TEMPLATE_SHORT_DESCRIPTIONS[ slug ]
+								}
+								icon={ TEMPLATE_ICONS[ slug ] || layout }
+								onClick={ () =>
+									onClick
+										? onClick( template )
+										: createTemplate( template )
+								}
+							/>
+						);
+					} ) }
+					<TemplateListItem
+						title={ __( 'Custom template' ) }
+						direction="row"
+						className="edit-site-add-new-template__custom-template-button"
+						icon={ edit }
+						onClick={ () =>
+							setModalContent(
+								modalContentMap.customGenericTemplate
+							)
+						}
+					>
+						<Text
+							lineHeight={ 1.53846153846 } // 20px
+						>
+							{ __(
+								'A custom template can be manually applied to any post or page.'
+							) }
+						</Text>
+					</TemplateListItem>
+				</Grid>
+			) }
+			{ modalContent === modalContentMap.customTemplate && (
+				<AddCustomTemplateModalContent
+					onSelect={ createTemplate }
+					entityForSuggestions={ entityForSuggestions }
+				/>
+			) }
+			{ modalContent === modalContentMap.customGenericTemplate && (
+				<AddCustomGenericTemplateModalContent
+					onClose={ onModalClose }
+					createTemplate={ createTemplate }
+				/>
+			) }
+		</Modal>
 	);
+}
+
+function NewTemplate() {
+	const [ showModal, setShowModal ] = useState( false );
+
+	const { postType } = useSelect( ( select ) => {
+		const { getPostType } = select( coreStore );
+
+		return {
+			postType: getPostType( TEMPLATE_POST_TYPE ),
+		};
+	}, [] );
 
 	if ( ! postType ) {
 		return null;
 	}
 
-	if ( templateType === 'wp_template' ) {
-		return <NewTemplate postType={ postType } />;
-	} else if ( templateType === 'wp_template_part' ) {
-		return <NewTemplatePart postType={ postType } />;
-	}
+	return (
+		<>
+			<Button
+				variant="primary"
+				onClick={ () => setShowModal( true ) }
+				label={ postType.labels.add_new_item }
+				__next40pxDefaultSize
+			>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ showModal && (
+				<NewTemplateModal onClose={ () => setShowModal( false ) } />
+			) }
+		</>
+	);
+}
 
-	return null;
+function useMissingTemplates( setEntityForSuggestions, onClick ) {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const existingTemplateSlugs = ( existingTemplates || [] ).map(
+		( { slug } ) => slug
+	);
+	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
+		( template ) =>
+			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
+			! existingTemplateSlugs.includes( template.slug )
+	);
+	const onClickMenuItem = ( _entityForSuggestions ) => {
+		onClick?.();
+		setEntityForSuggestions( _entityForSuggestions );
+	};
+	// We need to replace existing default template types with
+	// the create specific template functionality. The original
+	// info (title, description, etc.) is preserved in the
+	// used hooks.
+	const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
+	const { defaultTaxonomiesMenuItems, taxonomiesMenuItems } =
+		useTaxonomiesMenuItems( onClickMenuItem );
+	const { defaultPostTypesMenuItems, postTypesMenuItems } =
+		usePostTypeMenuItems( onClickMenuItem );
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].forEach( ( menuItem ) => {
+		if ( ! menuItem ) {
+			return;
+		}
+		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
+			( template ) => template.slug === menuItem.slug
+		);
+		// Some default template types might have been filtered above from
+		// `missingDefaultTemplates` because they only check for the general
+		// template. So here we either replace or append the item, augmented
+		// with the check if it has available specific item to create a
+		// template for.
+		if ( matchIndex > -1 ) {
+			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
+		} else {
+			enhancedMissingDefaultTemplateTypes.push( menuItem );
+		}
+	} );
+	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
+	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
+		return (
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
+		);
+	} );
+	const missingTemplates = [
+		...enhancedMissingDefaultTemplateTypes,
+		...usePostTypeArchiveMenuItems(),
+		...postTypesMenuItems,
+		...taxonomiesMenuItems,
+	];
+	return missingTemplates;
 }
+
+export default memo( NewTemplate );
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
deleted file mode 100644
index d2e396f6580dbb..00000000000000
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useHistory } from '../routes';
-import CreateTemplatePartModal from '../create-template-part-modal';
-
-export default function NewTemplatePart( { postType } ) {
-	const history = useHistory();
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { createErrorNotice } = useDispatch( noticesStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
-
-	async function createTemplatePart( { title, area } ) {
-		if ( ! title ) {
-			createErrorNotice( __( 'Title is not defined.' ), {
-				type: 'snackbar',
-			} );
-			return;
-		}
-
-		try {
-			// Currently template parts only allow latin chars.
-			// Fallback slug will receive suffix by default.
-			const cleanSlug =
-				kebabCase( title ).replace( /[^\w-]+/g, '' ) ||
-				'wp-custom-part';
-
-			const templatePart = await saveEntityRecord(
-				'postType',
-				'wp_template_part',
-				{
-					slug: cleanSlug,
-					title,
-					content: '',
-					area,
-				},
-				{ throwOnError: true }
-			);
-
-			setIsModalOpen( false );
-
-			// Navigate to the created template part editor.
-			history.push( {
-				postId: templatePart.id,
-				postType: templatePart.type,
-			} );
-
-			// TODO: Add a success notice?
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __(
-							'An error occurred while creating the template part.'
-					  );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-
-			setIsModalOpen( false );
-		}
-	}
-
-	return (
-		<>
-			<Button
-				variant="primary"
-				onClick={ () => {
-					setIsModalOpen( true );
-				} }
-			>
-				{ postType.labels.add_new }
-			</Button>
-			{ isModalOpen && (
-				<CreateTemplatePartModal
-					closeModal={ () => setIsModalOpen( false ) }
-					onCreate={ createTemplatePart }
-				/>
-			) }
-		</>
-	);
-}
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
deleted file mode 100644
index c7372d17d63dd6..00000000000000
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ /dev/null
@@ -1,327 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	NavigableMenu,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	archive,
-	blockMeta,
-	category,
-	home,
-	list,
-	media,
-	notFound,
-	page,
-	post,
-	postAuthor,
-	postDate,
-	search,
-	tag,
-	layout as customGenericTemplateIcon,
-} from '@wordpress/icons';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import AddCustomTemplateModal from './add-custom-template-modal';
-import {
-	useExistingTemplates,
-	useDefaultTemplateTypes,
-	useTaxonomiesMenuItems,
-	usePostTypeMenuItems,
-	useAuthorMenuItem,
-	usePostTypeArchiveMenuItems,
-} from './utils';
-import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
-import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { useHistory } from '../routes';
-import { store as editSiteStore } from '../../store';
-
-const DEFAULT_TEMPLATE_SLUGS = [
-	'front-page',
-	'single',
-	'page',
-	'index',
-	'archive',
-	'author',
-	'category',
-	'date',
-	'tag',
-	'taxonomy',
-	'search',
-	'404',
-];
-
-const TEMPLATE_ICONS = {
-	'front-page': home,
-	single: post,
-	page,
-	archive,
-	search,
-	404: notFound,
-	index: list,
-	category,
-	author: postAuthor,
-	taxonomy: blockMeta,
-	date: postDate,
-	tag,
-	attachment: media,
-};
-
-export default function NewTemplate( { postType } ) {
-	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
-		useState( false );
-	const [
-		showCustomGenericTemplateModal,
-		setShowCustomGenericTemplateModal,
-	] = useState( false );
-	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
-	const [ isCreatingTemplate, setIsCreatingTemplate ] = useState( false );
-
-	const history = useHistory();
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-	const { setTemplate } = useDispatch( editSiteStore );
-
-	async function createTemplate( template, isWPSuggestion = true ) {
-		if ( isCreatingTemplate ) {
-			return;
-		}
-		setIsCreatingTemplate( true );
-		try {
-			const { title, description, slug, templatePrefix } = template;
-			let templateContent = template.content;
-			// Try to find fallback content from existing templates.
-			if ( ! templateContent ) {
-				const fallbackTemplate = await apiFetch( {
-					path: addQueryArgs( '/wp/v2/templates/lookup', {
-						slug,
-						is_custom: ! isWPSuggestion,
-						template_prefix: templatePrefix,
-					} ),
-				} );
-				templateContent = fallbackTemplate.content.raw;
-			}
-			const newTemplate = await saveEntityRecord(
-				'postType',
-				'wp_template',
-				{
-					description,
-					// Slugs need to be strings, so this is for template `404`
-					slug: slug.toString(),
-					status: 'publish',
-					title,
-					content: templateContent,
-					// This adds a post meta field in template that is part of `is_custom` value calculation.
-					is_wp_suggestion: isWPSuggestion,
-				},
-				{ throwOnError: true }
-			);
-
-			// Set template before navigating away to avoid initial stale value.
-			setTemplate( newTemplate.id, newTemplate.slug );
-
-			// Navigate to the created template editor.
-			history.push( {
-				postId: newTemplate.id,
-				postType: newTemplate.type,
-			} );
-			createSuccessNotice(
-				sprintf(
-					// translators: %s: Title of the created template e.g: "Category".
-					__( '"%s" successfully created.' ),
-					title
-				),
-				{
-					type: 'snackbar',
-				}
-			);
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while creating the template.' );
-
-			createErrorNotice( errorMessage, {
-				type: 'snackbar',
-			} );
-		} finally {
-			setIsCreatingTemplate( false );
-		}
-	}
-
-	const missingTemplates = useMissingTemplates(
-		setEntityForSuggestions,
-		setShowCustomTemplateModal
-	);
-	if ( ! missingTemplates.length ) {
-		return null;
-	}
-	return (
-		<>
-			<DropdownMenu
-				className="edit-site-new-template-dropdown"
-				icon={ null }
-				text={ postType.labels.add_new }
-				label={ postType.labels.add_new_item }
-				popoverProps={ {
-					noArrow: false,
-				} }
-				toggleProps={ {
-					variant: 'primary',
-				} }
-			>
-				{ () => (
-					<>
-						{ isCreatingTemplate && (
-							<TemplateActionsLoadingScreen />
-						) }
-						<NavigableMenu className="edit-site-new-template-dropdown__popover">
-							<MenuGroup label={ postType.labels.add_new_item }>
-								{ missingTemplates.map( ( template ) => {
-									const {
-										title,
-										description,
-										slug,
-										onClick,
-										icon,
-									} = template;
-									return (
-										<MenuItem
-											icon={
-												icon ||
-												TEMPLATE_ICONS[ slug ] ||
-												post
-											}
-											iconPosition="left"
-											info={ description }
-											key={ slug }
-											onClick={ () =>
-												onClick
-													? onClick( template )
-													: createTemplate( template )
-											}
-										>
-											{ title }
-										</MenuItem>
-									);
-								} ) }
-							</MenuGroup>
-							<MenuGroup>
-								<MenuItem
-									icon={ customGenericTemplateIcon }
-									iconPosition="left"
-									info={ __(
-										'Custom templates can be applied to any post or page.'
-									) }
-									key="custom-template"
-									onClick={ () =>
-										setShowCustomGenericTemplateModal(
-											true
-										)
-									}
-								>
-									{ __( 'Custom template' ) }
-								</MenuItem>
-							</MenuGroup>
-						</NavigableMenu>
-					</>
-				) }
-			</DropdownMenu>
-			{ showCustomTemplateModal && (
-				<AddCustomTemplateModal
-					onClose={ () => setShowCustomTemplateModal( false ) }
-					onSelect={ createTemplate }
-					entityForSuggestions={ entityForSuggestions }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
-			) }
-			{ showCustomGenericTemplateModal && (
-				<AddCustomGenericTemplateModal
-					onClose={ () => setShowCustomGenericTemplateModal( false ) }
-					createTemplate={ createTemplate }
-					isCreatingTemplate={ isCreatingTemplate }
-				/>
-			) }
-		</>
-	);
-}
-
-function useMissingTemplates(
-	setEntityForSuggestions,
-	setShowCustomTemplateModal
-) {
-	const existingTemplates = useExistingTemplates();
-	const defaultTemplateTypes = useDefaultTemplateTypes();
-	const existingTemplateSlugs = ( existingTemplates || [] ).map(
-		( { slug } ) => slug
-	);
-	const missingDefaultTemplates = ( defaultTemplateTypes || [] ).filter(
-		( template ) =>
-			DEFAULT_TEMPLATE_SLUGS.includes( template.slug ) &&
-			! existingTemplateSlugs.includes( template.slug )
-	);
-	const onClickMenuItem = ( _entityForSuggestions ) => {
-		setShowCustomTemplateModal( true );
-		setEntityForSuggestions( _entityForSuggestions );
-	};
-	// We need to replace existing default template types with
-	// the create specific template functionality. The original
-	// info (title, description, etc.) is preserved in the
-	// used hooks.
-	const enhancedMissingDefaultTemplateTypes = [ ...missingDefaultTemplates ];
-	const { defaultTaxonomiesMenuItems, taxonomiesMenuItems } =
-		useTaxonomiesMenuItems( onClickMenuItem );
-	const { defaultPostTypesMenuItems, postTypesMenuItems } =
-		usePostTypeMenuItems( onClickMenuItem );
-
-	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
-	[
-		...defaultTaxonomiesMenuItems,
-		...defaultPostTypesMenuItems,
-		authorMenuItem,
-	].forEach( ( menuItem ) => {
-		if ( ! menuItem ) {
-			return;
-		}
-		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-			( template ) => template.slug === menuItem.slug
-		);
-		// Some default template types might have been filtered above from
-		// `missingDefaultTemplates` because they only check for the general
-		// template. So here we either replace or append the item, augmented
-		// with the check if it has available specific item to create a
-		// template for.
-		if ( matchIndex > -1 ) {
-			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
-		} else {
-			enhancedMissingDefaultTemplateTypes.push( menuItem );
-		}
-	} );
-	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
-	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
-		return (
-			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
-			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
-		);
-	} );
-	const missingTemplates = [
-		...enhancedMissingDefaultTemplateTypes,
-		...usePostTypeArchiveMenuItems(),
-		...postTypesMenuItems,
-		...taxonomiesMenuItems,
-	];
-	return missingTemplates;
-}
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..a83754ce2e547a 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -1,179 +1,186 @@
-.edit-site-new-template-dropdown {
-	.components-dropdown-menu__toggle {
-		padding: 6px 12px;
-	}
+.edit-site-custom-template-modal {
+	&__contents-wrapper {
+		height: 100%;
+		justify-content: flex-start !important; // Required as topLeft alignment isn't working on VStack
 
-	.edit-site-new-template-dropdown__popover {
-		@include break-small() {
-			min-width: 300px;
+		> * {
+			width: 100%;
+		}
+
+		&__suggestions_list {
+			margin-left: - $grid-unit-15;
+			margin-right: - $grid-unit-15;
+			width: calc(100% + #{$grid-unit-15 * 2});
 		}
 	}
-}
 
-.edit-site-custom-template-modal {
 	&__contents {
 		> .components-button {
-			padding: $grid-unit-30;
-			box-shadow: inset 0 0 0 $border-width $gray-600;
-			border-radius: $radius-block-ui;
-			width: 256px;
 			height: auto;
-			display: flex;
-			flex-direction: column;
-			gap: $grid-unit;
+			justify-content: center;
+		}
+	}
+
+	@include break-medium() {
+		width: 456px;
+	}
 
-			// Show the boundary of the button, in High Contrast Mode.
-			outline: 1px solid transparent;
+	.edit-site-custom-template-modal__suggestions_list {
+		@include break-small() {
+			max-height: $grid-unit-70 * 4; // Height of four buttons
+			overflow-y: auto;
+		}
 
-			span:first-child {
-				color: $gray-900;
-			}
+		&__list-item {
+			display: block;
+			width: 100%;
+			text-align: left;
+			white-space: pre-wrap;
+			overflow-wrap: break-word;
+			height: auto;
+			padding: $grid-unit-10 $grid-unit-15;
 
-			span {
-				color: $gray-700;
+			mark {
+				font-weight: 700;
+				background: none;
 			}
 
 			&:hover {
-				color: var(--wp-admin-theme-color-darker-10);
-				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-				span:first-child {
+				* {
+					color: var(--wp-admin-theme-color);
+				}
+
+				mark {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				background-color: $gray-100;
+			}
 
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 3px solid transparent;
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+			}
 
-				span:first-child {
-					color: var(--wp-admin-theme-color);
-				}
+			&__title,
+			&__info {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: block;
+			}
+
+			&__info {
+				word-break: break-all;
+				color: $gray-700;
 			}
 		}
 	}
+}
 
-	.components-search-control {
-		input[type="search"].components-search-control__input {
-			background: $white;
-			border: 1px solid $gray-300;
+.edit-site-custom-template-modal__no-results {
+	border: $border-width solid $gray-400;
+	border-radius: $radius-small;
+	padding: $grid-unit-20;
+}
 
-			&:focus {
-				border-color: var(--wp-admin-theme-color);
-				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-			}
-		}
+.edit-site-custom-generic-template__modal {
+	.components-modal__header {
+		border-bottom: none;
 	}
 
-	@include break-medium() {
-		width: 456px;
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
 	}
 }
 
-.edit-site-custom-template-modal__suggestions_list {
-	margin-top: $grid-unit-20;
+.edit-site-add-new-template__modal {
 
-	@include break-small() {
-		height: 232px;
-		overflow: scroll;
+	@include break-large() {
+		max-width: $grid-unit-80 * 13;
+		margin-top: $grid-unit-80;
+		width: calc(100% - #{$grid-unit-80 * 2});
+		max-height: calc(100% - #{$grid-unit-80 * 2});
 	}
 
-	&__list-item {
-		display: block;
-		width: 100%;
-		text-align: left;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		height: auto;
-
-		mark {
-			font-weight: 700;
-			background: none;
+	.edit-site-add-new-template__template-button,
+	.edit-site-add-new-template__custom-template-button {
+		svg {
+			fill: var(--wp-admin-theme-color);
 		}
+	}
 
-		&:hover {
-			background-color: $gray-100;
-
-			mark {
-				color: var(--wp-admin-theme-color);
-			}
+	.edit-site-add-new-template__custom-template-button {
+		.edit-site-add-new-template__template-name {
+			flex-grow: 1;
+			align-items: flex-start;
 		}
+	}
 
-		&:focus {
-			background-color: $gray-100;
-		}
+	.edit-site-add-new-template__template-icon {
+		padding: $grid-unit-10;
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		border-radius: 100%;
+		max-height: $grid-unit-50;
+		max-width: $grid-unit-50;
+	}
+}
 
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-		}
+.edit-site-custom-template-modal__contents,
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
+		padding: $grid-unit-40;
+		display: flex;
+		flex-direction: column;
+		border: $border-width solid $gray-300;
+		justify-content: center;
 
-		&__title,
-		&__info {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: block;
-		}
+		// Show the boundary of the button, in High Contrast Mode.
+		outline: 1px solid transparent;
 
-		&__title {
-			font-weight: 500;
-			margin-bottom: 0.2em;
+		span:first-child {
+			color: $gray-900;
 		}
 
-		&__info {
+		span {
 			color: $gray-700;
-			font-size: 0.9em;
-			line-height: 1.3;
-			word-break: break-all;
 		}
-	}
-}
-
-.edit-site-custom-template-modal__no-results {
-	border: 1px solid $gray-400;
-	border-radius: $radius-block-ui;
-	padding: $grid-unit-20;
-	margin-bottom: 0;
-	margin-top: $grid-unit-20;
-}
 
+		&:hover {
+			color: var(--wp-admin-theme-color-darker-10);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			border-color: transparent;
 
-.edit-site-custom-generic-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
+			span {
+				color: var(--wp-admin-theme-color);
+			}
 		}
-	}
-
-	.components-modal__header {
-		border-bottom: none;
-	}
 
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
-}
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-color: transparent;
 
-.edit-site-custom-generic-template__modal-actions {
-	margin-top: $grid-unit-15;
-}
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 3px solid transparent;
 
-.edit-site-template-actions-loading-screen-modal {
-	backdrop-filter: none;
-	background-color: transparent;
+			span:first-child {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
 
-	&.is-full-screen {
-		background-color: $white;
-		box-shadow: 0 0 0 transparent;
-		min-width: 100%;
-		min-height: 100%;
+	.edit-site-add-new-template__custom-template-button,
+	.edit-site-add-new-template__template-list__prompt {
+		grid-column: 1 / -1;
 	}
+}
 
-	&__content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
 		height: 100%;
+		text-align: start;
+		align-items: flex-start;
 	}
 }
diff --git a/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js b/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js
deleted file mode 100644
index a57880d8551f7c..00000000000000
--- a/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Spinner, Modal } from '@wordpress/components';
-
-export default function TemplateActionsLoadingScreen() {
-	const baseCssClass = 'edit-site-template-actions-loading-screen-modal';
-	return (
-		<Modal
-			isFullScreen
-			isDismissible={ false }
-			shouldCloseOnClickOutside={ false }
-			shouldCloseOnEsc={ false }
-			onRequestClose={ () => {} }
-			__experimentalHideHeader
-			className={ baseCssClass }
-		>
-			<div className={ `${ baseCssClass }__content` }>
-				<Spinner />
-			</div>
-		</Modal>
-	);
-}
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
index 7309f2ff711ca9..759f3f478cadaf 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -1,25 +1,34 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * 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';
 import { useMemo, useCallback } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+const EMPTY_OBJECT = {};
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
  * @property {string}        name The entity's name.
  */
 
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.split( '.' ).forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 /**
  * Helper util to map records to add a `name` prop from a
  * provided path, in order to handle all entities in the same
@@ -32,7 +41,7 @@ import { blockMeta, post, archive } from '@wordpress/icons';
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {
 		...entity,
-		name: decodeEntities( get( entity, path ) ),
+		name: decodeEntities( getValueFromObjectPath( entity, path ) ),
 	} ) );
 };
 
@@ -45,9 +54,13 @@ export const mapToIHasNameAndId = ( entities, path ) => {
 export const useExistingTemplates = () => {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-			} ),
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			),
 		[]
 	);
 };
@@ -55,7 +68,8 @@ export const useExistingTemplates = () => {
 export const useDefaultTemplateTypes = () => {
 	return useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplateTypes(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_types || [],
 		[]
 	);
 };
@@ -86,24 +100,6 @@ const usePublicTaxonomies = () => {
 	}, [ taxonomies ] );
 };
 
-function usePostTypeNeedsUniqueIdentifier( publicPostTypes ) {
-	const postTypeLabels = useMemo( () =>
-		publicPostTypes?.reduce( ( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
-			return accumulator;
-		}, {} )
-	);
-	return useCallback(
-		( { labels, slug } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
-		},
-		[ postTypeLabels ]
-	);
-}
-
 export function usePostTypeArchiveMenuItems() {
 	const publicPostTypes = usePublicPostTypes();
 	const postTypesWithArchives = useMemo(
@@ -111,8 +107,24 @@ export function usePostTypeArchiveMenuItems() {
 		[ publicPostTypes ]
 	);
 	const existingTemplates = useExistingTemplates();
-	const needsUniqueIdentifier = usePostTypeNeedsUniqueIdentifier(
-		postTypesWithArchives
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
+	const postTypeLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const singularName = labels.singular_name.toLowerCase();
+				accumulator[ singularName ] =
+					( accumulator[ singularName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
+	);
+	const needsUniqueIdentifier = useCallback(
+		( { labels, slug } ) => {
+			const singularName = labels.singular_name.toLowerCase();
+			return postTypeLabels[ singularName ] > 1 && singularName !== slug;
+		},
+		[ postTypeLabels ]
 	);
 	return useMemo(
 		() =>
@@ -146,7 +158,7 @@ export function usePostTypeArchiveMenuItems() {
 						description: sprintf(
 							// translators: %s: Name of the post type e.g: "Post".
 							__(
-								'Displays an archive with the latests posts of type: %s.'
+								'Displays an archive with the latest posts of type: %s.'
 							),
 							postType.labels.singular_name
 						),
@@ -154,9 +166,11 @@ export function usePostTypeArchiveMenuItems() {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: postType.icon?.startsWith( 'dashicons-' )
-							? postType.icon.slice( 10 )
-							: archive,
+						icon:
+							typeof postType.icon === 'string' &&
+							postType.icon.startsWith( 'dashicons-' )
+								? postType.icon.slice( 10 )
+								: archive,
 						templatePrefix: 'archive',
 					};
 				} ) || [],
@@ -168,8 +182,30 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 	const publicPostTypes = usePublicPostTypes();
 	const existingTemplates = useExistingTemplates();
 	const defaultTemplateTypes = useDefaultTemplateTypes();
-	const needsUniqueIdentifier =
-		usePostTypeNeedsUniqueIdentifier( publicPostTypes );
+	// We need to keep track of naming conflicts. If a conflict
+	// occurs, we need to add slug.
+	const templateLabels = useMemo(
+		() =>
+			publicPostTypes?.reduce( ( accumulator, { labels } ) => {
+				const templateName = (
+					labels.template_name || labels.singular_name
+				).toLowerCase();
+				accumulator[ templateName ] =
+					( accumulator[ templateName ] || 0 ) + 1;
+				return accumulator;
+			}, {} ),
+		[ publicPostTypes ]
+	);
+	const needsUniqueIdentifier = useCallback(
+		( { labels, slug } ) => {
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			return templateLabels[ templateName ] > 1 && templateName !== slug;
+		},
+		[ templateLabels ]
+	);
+
 	// `page`is a special case in template hierarchy.
 	const templatePrefixes = useMemo(
 		() =>
@@ -200,18 +236,30 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 			const hasGeneralTemplate =
 				existingTemplateSlugs?.includes( generalTemplateSlug );
 			const _needsUniqueIdentifier = needsUniqueIdentifier( postType );
-			let menuItemTitle = sprintf(
-				// translators: %s: Name of the post type e.g: "Post".
-				__( 'Single item: %s' ),
-				labels.singular_name
-			);
-			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the post type e.g: "Post"; %2s: Slug of the post type e.g: "book".
-					__( 'Single item: %1$s (%2$s)' ),
-					labels.singular_name,
-					slug
+			let menuItemTitle =
+				labels.template_name ||
+				sprintf(
+					// translators: %s: Name of the post type e.g: "Post".
+					__( 'Single item: %s' ),
+					labels.singular_name
 				);
+			if ( _needsUniqueIdentifier ) {
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: 1: Name of the template e.g: "Single Item: Post". 2: Slug of the post type e.g: "book".
+							_x( '%1$s (%2$s)', 'post type menu label' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: 1: Name of the post type e.g: "Post". 2: Slug of the post type e.g: "book".
+							_x(
+								'Single item: %1$s (%2$s)',
+								'post type menu label'
+							),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {
@@ -229,9 +277,11 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						// `icon` is the `menu_icon` property of a post type. We
 						// only handle `dashicons` for now, even if the `menu_icon`
 						// also supports urls and svg as values.
-						icon: icon?.startsWith( 'dashicons-' )
-							? icon.slice( 10 )
-							: post,
+						icon:
+							typeof icon === 'string' &&
+							icon.startsWith( 'dashicons-' )
+								? icon.slice( 10 )
+								: post,
 						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
@@ -321,9 +371,11 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	// occurs, we need to add slug.
 	const taxonomyLabels = publicTaxonomies?.reduce(
 		( accumulator, { labels } ) => {
-			const singularName = labels.singular_name.toLowerCase();
-			accumulator[ singularName ] =
-				( accumulator[ singularName ] || 0 ) + 1;
+			const templateName = (
+				labels.template_name || labels.singular_name
+			).toLowerCase();
+			accumulator[ templateName ] =
+				( accumulator[ templateName ] || 0 ) + 1;
 			return accumulator;
 		},
 		{}
@@ -332,8 +384,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 		if ( [ 'category', 'post_tag' ].includes( slug ) ) {
 			return false;
 		}
-		const singularName = labels.singular_name.toLowerCase();
-		return taxonomyLabels[ singularName ] > 1 && singularName !== slug;
+		const templateName = (
+			labels.template_name || labels.singular_name
+		).toLowerCase();
+		return taxonomyLabels[ templateName ] > 1 && templateName !== slug;
 	};
 	const taxonomiesInfo = useEntitiesInfo( 'taxonomy', templatePrefixes );
 	const existingTemplateSlugs = ( existingTemplates || [] ).map(
@@ -355,14 +409,21 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				labels,
 				slug
 			);
-			let menuItemTitle = labels.singular_name;
+			let menuItemTitle = labels.template_name || labels.singular_name;
 			if ( _needsUniqueIdentifier ) {
-				menuItemTitle = sprintf(
-					// translators: %1s: Name of the taxonomy e.g: "Category"; %2s: Slug of the taxonomy e.g: "product_cat".
-					__( '%1$s (%2$s)' ),
-					labels.singular_name,
-					slug
-				);
+				menuItemTitle = labels.template_name
+					? sprintf(
+							// translators: 1: Name of the template e.g: "Products by Category". 2s: Slug of the taxonomy e.g: "product_cat".
+							_x( '%1$s (%2$s)', 'taxonomy template menu label' ),
+							labels.template_name,
+							slug
+					  )
+					: sprintf(
+							// translators: 1: Name of the taxonomy e.g: "Category". 2: Slug of the taxonomy e.g: "product_cat".
+							_x( '%1$s (%2$s)', 'taxonomy menu label' ),
+							labels.singular_name,
+							slug
+					  );
 			}
 			const menuItem = defaultTemplateType
 				? {
@@ -610,14 +671,14 @@ const useTemplatesToExclude = (
 const useEntitiesInfo = (
 	entityName,
 	templatePrefixes,
-	additionalQueryParameters = {}
+	additionalQueryParameters = EMPTY_OBJECT
 ) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
 		templatePrefixes,
 		additionalQueryParameters
 	);
-	const entitiesInfo = useSelect(
+	const entitiesHasRecords = useSelect(
 		( select ) => {
 			return Object.keys( templatePrefixes || {} ).reduce(
 				( accumulator, slug ) => {
@@ -625,26 +686,42 @@ const useEntitiesInfo = (
 						recordsToExcludePerEntity?.[ slug ]?.map(
 							( { id } ) => id
 						) || [];
-					accumulator[ slug ] = {
-						hasEntities: !! select( coreStore ).getEntityRecords(
-							entityName,
-							slug,
-							{
-								per_page: 1,
-								_fields: 'id',
-								context: 'view',
-								exclude: existingEntitiesIds,
-								...additionalQueryParameters[ slug ],
-							}
-						)?.length,
-						existingEntitiesIds,
-					};
+					accumulator[ slug ] = !! select(
+						coreStore
+					).getEntityRecords( entityName, slug, {
+						per_page: 1,
+						_fields: 'id',
+						context: 'view',
+						exclude: existingEntitiesIds,
+						...additionalQueryParameters[ slug ],
+					} )?.length;
 					return accumulator;
 				},
 				{}
 			);
 		},
-		[ templatePrefixes, recordsToExcludePerEntity ]
+		[
+			templatePrefixes,
+			recordsToExcludePerEntity,
+			entityName,
+			additionalQueryParameters,
+		]
 	);
+	const entitiesInfo = useMemo( () => {
+		return Object.keys( templatePrefixes || {} ).reduce(
+			( accumulator, slug ) => {
+				const existingEntitiesIds =
+					recordsToExcludePerEntity?.[ slug ]?.map(
+						( { id } ) => id
+					) || [];
+				accumulator[ slug ] = {
+					hasEntities: entitiesHasRecords[ slug ],
+					existingEntitiesIds,
+				};
+				return accumulator;
+			},
+			{}
+		);
+	}, [ templatePrefixes, recordsToExcludePerEntity, entitiesHasRecords ] );
 	return entitiesInfo;
 };
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index 266a1a42f92bf5..744c682dcda5b2 100644
--- a/packages/edit-site/src/components/app/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -1,75 +1,62 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Routes } from '../routes';
-import Editor from '../editor';
-import List from '../list';
-import NavigationSidebar from '../navigation-sidebar';
-import getIsListPage from '../../utils/get-is-list-page';
+import Layout from '../layout';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
+import useSetCommandContext from '../../hooks/commands/use-set-command-context';
+import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
 
-export default function EditSiteApp( { reboot, homeTemplate } ) {
-	const { createErrorNotice } = useDispatch( noticesStore );
+const { RouterProvider } = unlock( routerPrivateApis );
 
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
+function AppLayout() {
+	useCommonCommands();
+	useSetCommandContext();
 
-	return (
-		<SlotFillProvider>
-			<UnsavedChangesWarning />
+	return <Layout />;
+}
 
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
+export default function App() {
+	useRegisterSiteEditorRoutes();
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
+	const beforeNavigate = useCallback( ( { path, query } ) => {
+		if ( ! isPreviewingTheme() ) {
+			return { path, query };
+		}
 
-					// The existence of a 'front-page' supersedes every other setting.
-					const homeTemplateType =
-						params.postId?.includes( 'front-page' ) ||
-						params.postId === homeTemplate?.postId
-							? 'site-editor'
-							: undefined;
+		return {
+			path,
+			query: {
+				...query,
+				wp_theme_preview:
+					'wp_theme_preview' in query
+						? query.wp_theme_preview
+						: currentlyPreviewingTheme(),
+			},
+		};
+	}, [] );
 
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							<PluginArea onError={ onPluginAreaError } />
-							{ /* Keep the instance of the sidebar to ensure focus will not be lost
-							 * when navigating to other pages. */ }
-							<NavigationSidebar
-								// Open the navigation sidebar by default when in the list page.
-								isDefaultOpen={ !! isListPage }
-								activeTemplateType={
-									isListPage
-										? params.postType
-										: homeTemplateType
-								}
-							/>
-						</>
-					);
-				} }
-			</Routes>
-		</SlotFillProvider>
+	return (
+		<RouterProvider
+			routes={ routes }
+			pathArg="p"
+			beforeNavigate={ beforeNavigate }
+		>
+			<AppLayout />
+		</RouterProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js
deleted file mode 100644
index 422f429b8192a0..00000000000000
--- a/packages/edit-site/src/components/block-editor/back-button.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { arrowLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useLocation, useHistory } from '../routes';
-
-function BackButton() {
-	const location = useLocation();
-	const history = useHistory();
-	const isTemplatePart = location.params.postType === 'wp_template_part';
-	const previousTemplateId = location.state?.fromTemplateId;
-
-	if ( ! isTemplatePart || ! previousTemplateId ) {
-		return null;
-	}
-
-	return (
-		<Button
-			className="edit-site-visual-editor__back-button"
-			icon={ arrowLeft }
-			onClick={ () => {
-				history.back();
-			} }
-		>
-			{ __( 'Back' ) }
-		</Button>
-	);
-}
-
-export default BackButton;
diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js
deleted file mode 100644
index 758ca50272adeb..00000000000000
--- a/packages/edit-site/src/components/block-editor/block-inspector-button.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { speak } from '@wordpress/a11y';
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { STORE_NAME } from '../../store/constants';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
-
-export default function BlockInspectorButton( { onClick = () => {} } ) {
-	const { shortcut, isBlockInspectorOpen } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation(
-				'core/edit-site/toggle-block-settings-sidebar'
-			),
-			isBlockInspectorOpen:
-				select( interfaceStore ).getActiveComplementaryArea(
-					editSiteStore.name
-				) === SIDEBAR_BLOCK,
-		} ),
-		[]
-	);
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-
-	const label = isBlockInspectorOpen
-		? __( 'Hide more settings' )
-		: __( 'Show more settings' );
-
-	return (
-		<MenuItem
-			onClick={ () => {
-				if ( isBlockInspectorOpen ) {
-					disableComplementaryArea( STORE_NAME );
-					speak( __( 'Block settings closed' ) );
-				} else {
-					enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-					speak(
-						__(
-							'Additional settings are now available in the Editor block settings sidebar'
-						)
-					);
-				}
-				// Close dropdown menu.
-				onClick();
-			} }
-			shortcut={ shortcut }
-		>
-			{ label }
-		</MenuItem>
-	);
-}
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
deleted file mode 100644
index 0f42214b454421..00000000000000
--- a/packages/edit-site/src/components/block-editor/index.js
+++ /dev/null
@@ -1,260 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
-import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
-import {
-	BlockList,
-	BlockEditorProvider,
-	__experimentalLinkControl,
-	BlockInspector,
-	BlockTools,
-	__unstableBlockToolbarLastItem,
-	__unstableBlockSettingsMenuFirstItem,
-	__unstableUseTypingObserver as useTypingObserver,
-	BlockEditorKeyboardShortcuts,
-	store as blockEditorStore,
-	__unstableBlockNameContext,
-} from '@wordpress/block-editor';
-import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
-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
- */
-import TemplatePartConverter from '../template-part-converter';
-import NavigateToLink from '../navigate-to-link';
-import { SidebarInspectorFill } from '../sidebar-edit-mode';
-import { store as editSiteStore } from '../../store';
-import BlockInspectorButton from './block-inspector-button';
-import BackButton from './back-button';
-import ResizableEditor from './resizable-editor';
-
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
-
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
-export default function BlockEditor( { setIsInserterOpen } ) {
-	const {
-		storedSettings,
-		templateType,
-		templateId,
-		page,
-		isNavigationSidebarOpen,
-	} = useSelect(
-		( select ) => {
-			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
-				select( editSiteStore );
-
-			return {
-				storedSettings: getSettings( setIsInserterOpen ),
-				templateType: getEditedPostType(),
-				templateId: getEditedPostId(),
-				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
-			};
-		},
-		[ setIsInserterOpen ]
-	);
-
-	const settingsBlockPatterns =
-		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
-		storedSettings.__experimentalBlockPatterns; // WP 5.9
-	const settingsBlockPatternCategories =
-		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
-		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
-
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
-
-	const blockPatterns = useMemo(
-		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
-					return (
-						! postTypes ||
-						( Array.isArray( postTypes ) &&
-							postTypes.includes( templateType ) )
-					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, templateType ]
-	);
-
-	const blockPatternCategories = useMemo(
-		() =>
-			[
-				...( settingsBlockPatternCategories || [] ),
-				...( restBlockPatternCategories || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
-		[ settingsBlockPatternCategories, restBlockPatternCategories ]
-	);
-
-	const settings = useMemo( () => {
-		const {
-			__experimentalAdditionalBlockPatterns,
-			__experimentalAdditionalBlockPatternCategories,
-			...restStoredSettings
-		} = storedSettings;
-
-		return {
-			...restStoredSettings,
-			__experimentalBlockPatterns: blockPatterns,
-			__experimentalBlockPatternCategories: blockPatternCategories,
-		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
-
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		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', '<' );
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-
-	const isTemplatePart = templateType === 'wp_template_part';
-	const hasBlocks = blocks.length !== 0;
-
-	const NavMenuSidebarToggle = () => (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
-				}
-				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;
-
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-	}
-
-	return (
-		<BlockEditorProvider
-			settings={ settings }
-			value={ blocks }
-			onInput={ onInput }
-			onChange={ onChange }
-			useSubRegistry={ false }
-		>
-			<TemplatePartConverter />
-			<__experimentalLinkControl.ViewerFill>
-				{ useCallback(
-					( fillProps ) => (
-						<NavigateToLink
-							{ ...fillProps }
-							activePage={ page }
-							onActivePageChange={ setPage }
-						/>
-					),
-					[ page ]
-				) }
-			</__experimentalLinkControl.ViewerFill>
-			<SidebarInspectorFill>
-				<BlockInspector />
-			</SidebarInspectorFill>
-			<BlockTools
-				className={ classnames( 'edit-site-visual-editor', {
-					'is-focus-mode': isTemplatePart,
-				} ) }
-				__unstableContentRef={ contentRef }
-				onClick={ ( event ) => {
-					// Clear selected block when clicking on the gray background.
-					if ( event.target === event.currentTarget ) {
-						clearSelectedBlock();
-					}
-				} }
-			>
-				<BlockEditorKeyboardShortcuts.Register />
-				<BackButton />
-				<ResizableEditor
-					// Reinitialize the editor and reset the states when the template changes.
-					key={ templateId }
-					enableResizing={
-						isTemplatePart &&
-						// Disable resizing in mobile viewport.
-						! isMobileViewport
-					}
-					settings={ settings }
-					contentRef={ mergedRefs }
-				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={
-							isTemplatePart && hasBlocks ? false : undefined
-						}
-					/>
-				</ResizableEditor>
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
-			<ReusableBlocksMenuItems />
-		</BlockEditorProvider>
-	);
-}
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
deleted file mode 100644
index 6dcf434ff06061..00000000000000
--- a/packages/edit-site/src/components/block-editor/resizable-editor.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useCallback } from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
-import {
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
-	__unstableIframe as Iframe,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import ResizeHandle from './resize-handle';
-
-// Removes the inline styles in the drag handles.
-const HANDLE_STYLES_OVERRIDE = {
-	position: undefined,
-	userSelect: undefined,
-	cursor: undefined,
-	width: undefined,
-	height: undefined,
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
-
-function ResizableEditor( { enableResizing, settings, children, ...props } ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { deviceType, isZoomOutMode } = useSelect(
-		( select ) => ( {
-			deviceType:
-				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
-		} ),
-		[]
-	);
-	const deviceStyles = useResizeCanvas( deviceType );
-	const [ width, setWidth ] = useState( '100%' );
-	const iframeRef = useRef();
-	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
-	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
-
-	const resizeWidthBy = useCallback( ( deltaPixels ) => {
-		if ( iframeRef.current ) {
-			setWidth( iframeRef.current.offsetWidth + deltaPixels );
-		}
-	}, [] );
-	return (
-		<ResizableBox
-			size={ {
-				width: enableResizing ? width : '100%',
-				height: enableResizing && sizes.height ? sizes.height : '100%',
-			} }
-			onResizeStop={ ( event, direction, element ) => {
-				setWidth( element.style.width );
-			} }
-			minWidth={ 300 }
-			maxWidth="100%"
-			maxHeight="100%"
-			enable={ {
-				right: enableResizing,
-				left: enableResizing,
-			} }
-			showHandle={ enableResizing }
-			// The editor is centered horizontally, resizing it only
-			// moves half the distance. Hence double the ratio to correctly
-			// align the cursor to the resizer handle.
-			resizeRatio={ 2 }
-			handleComponent={ {
-				left: (
-					<ResizeHandle
-						direction="left"
-						resizeWidthBy={ resizeWidthBy }
-					/>
-				),
-				right: (
-					<ResizeHandle
-						direction="right"
-						resizeWidthBy={ resizeWidthBy }
-					/>
-				),
-			} }
-			handleClasses={ undefined }
-			handleStyles={ {
-				left: HANDLE_STYLES_OVERRIDE,
-				right: HANDLE_STYLES_OVERRIDE,
-			} }
-		>
-			<Iframe
-				isZoomedOut={ isZoomOutMode }
-				style={ enableResizing ? {} : deviceStyles }
-				head={
-					<>
-						<EditorStyles styles={ settings.styles } />
-						<style>{
-							// Forming a "block formatting context" to prevent margin collapsing.
-							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-							`.is-root-container { display: flow-root; }
-							body { position: relative; }`
-						}</style>
-						{ enableResizing && (
-							<style>
-								{
-									// Some themes will have `min-height: 100vh` for the root container,
-									// which isn't a requirement in auto resize mode.
-									`.is-root-container { min-height: 0 !important; }`
-								}
-							</style>
-						) }
-					</>
-				}
-				assets={ settings.__unstableResolvedAssets }
-				ref={ ref }
-				name="editor-canvas"
-				className="edit-site-visual-editor__editor-canvas"
-				{ ...props }
-			>
-				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
-				{ settings.svgFilters }
-				{ resizeObserver }
-				{ children }
-			</Iframe>
-		</ResizableBox>
-	);
-}
-
-export default ResizableEditor;
diff --git a/packages/edit-site/src/components/block-editor/resize-handle.js b/packages/edit-site/src/components/block-editor/resize-handle.js
deleted file mode 100644
index d49bfdf4447b66..00000000000000
--- a/packages/edit-site/src/components/block-editor/resize-handle.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/components';
-
-const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
-
-export default function ResizeHandle( { direction, resizeWidthBy } ) {
-	function handleKeyDown( event ) {
-		const { keyCode } = event;
-
-		if (
-			( direction === 'left' && keyCode === LEFT ) ||
-			( direction === 'right' && keyCode === RIGHT )
-		) {
-			resizeWidthBy( DELTA_DISTANCE );
-		} else if (
-			( direction === 'left' && keyCode === RIGHT ) ||
-			( direction === 'right' && keyCode === LEFT )
-		) {
-			resizeWidthBy( -DELTA_DISTANCE );
-		}
-	}
-
-	return (
-		<>
-			<button
-				className={ `resizable-editor__drag-handle is-${ direction }` }
-				aria-label={ __( 'Drag to resize' ) }
-				aria-describedby={ `resizable-editor__resize-help-${ direction }` }
-				onKeyDown={ handleKeyDown }
-			/>
-			<VisuallyHidden
-				id={ `resizable-editor__resize-help-${ direction }` }
-			>
-				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
-			</VisuallyHidden>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 6f7e27f8a1cc2f..3849eed24a4ea3 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -1,88 +1,6 @@
-// The button element easily inherits styles that are meant for the editor style.
-// These rules enhance the specificity to reduce that inheritance.
-// This is duplicated in visual-editor.
-.edit-site-block-editor__editor-styles-wrapper  .components-button {
-	font-family: $default-font;
-	font-size: $default-font-size;
-	padding: 6px 12px;
-
-	&.is-tertiary,
-	&.has-icon {
-		padding: 6px;
-	}
-}
-
-.edit-site-visual-editor {
-	position: relative;
-	background-color: $gray-800;
-	// Centralize the editor horizontally (flex-direction is column).
-	align-items: center;
-
-	&.is-focus-mode {
-		padding: $grid-unit-60;
-
-		.edit-site-visual-editor__editor-canvas {
-			border-radius: $radius-block-ui;
-			max-height: 100%;
-		}
-
-		// To hide the horizontal scrollbar and show the drag handle on the
-		// left and right of the container.
-		.components-resizable-box__container {
-			overflow: visible;
-		}
-	}
-
-	.components-resizable-box__container {
-		margin: 0 auto;
-		// Removing this will cancel the bottom margins in the iframe.
-		overflow: auto;
-	}
-}
-
-.edit-site-visual-editor__back-button {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-.resizable-editor__drag-handle {
-	$height: 100px;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	padding: 0;
-	margin: auto 0;
-	width: $grid-unit-05;
-	height: $height;
-	appearance: none;
-	cursor: ew-resize;
-	outline: none;
-	background: $gray-600;
-	border-radius: 2px;
-	border: 0;
-
-	&.is-left {
-		left: -$grid-unit-20;
-	}
-
-	&.is-right {
-		right: -$grid-unit-20;
-	}
-
-	&:hover,
-	&:active {
-		background: $gray-400;
-	}
-
-	&:focus {
-		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
+.edit-site-visual-editor__editor-canvas {
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
 	}
 }
diff --git a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js
new file mode 100644
index 00000000000000..1c70c85aed08d3
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+export default function useEditorIframeProps() {
+	const { query, path } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = query;
+	const currentPostIsTrashed = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+			'trash'
+		);
+	}, [] );
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvas === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvas ] );
+
+	// In view mode, make the canvas iframe be perceived and behave as a button
+	// to switch to edit mode, with a meaningful label and no title attribute.
+	const viewModeIframeProps = {
+		'aria-label': __( 'Edit' ),
+		'aria-disabled': currentPostIsTrashed,
+		title: null,
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if (
+				( keyCode === ENTER || keyCode === SPACE ) &&
+				! currentPostIsTrashed
+			) {
+				event.preventDefault();
+				history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
+					transition: 'canvas-mode-edit-transition',
+				} );
+			}
+		},
+		onClick: () =>
+			history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
+				transition: 'canvas-mode-edit-transition',
+			} ),
+		onClickCapture: ( event ) => {
+			if ( currentPostIsTrashed ) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+		readonly: true,
+	};
+
+	return {
+		className: clsx( 'edit-site-visual-editor__editor-canvas', {
+			'is-focused': isFocused && canvas === 'view',
+		} ),
+		...( canvas === 'view' ? viewModeIframeProps : {} ),
+	};
+}
diff --git a/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js
new file mode 100644
index 00000000000000..66be70fcd4e2e2
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function useNavigateToEntityRecord() {
+	const history = useHistory();
+
+	const onNavigateToEntityRecord = useCallback(
+		( params ) => {
+			history.navigate(
+				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+			);
+		},
+		[ history ]
+	);
+
+	return onNavigateToEntityRecord;
+}
diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
new file mode 100644
index 00000000000000..d37987dc3dc420
--- /dev/null
+++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { usePrevious } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import useNavigateToEntityRecord from './use-navigate-to-entity-record';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+function useNavigateToPreviousEntityRecord() {
+	const location = useLocation();
+	const previousLocation = usePrevious( location );
+	const history = useHistory();
+	const goBack = useMemo( () => {
+		const isFocusMode =
+			location.query.focusMode ||
+			( location?.params?.postId &&
+				FOCUSABLE_ENTITIES.includes( location?.params?.postType ) );
+		const didComeFromEditorCanvas =
+			previousLocation?.query.canvas === 'edit';
+		const showBackButton = isFocusMode && didComeFromEditorCanvas;
+		return showBackButton ? () => history.back() : undefined;
+		// `previousLocation` changes when the component updates for any reason, not
+		// just when location changes. Until this is fixed we can't add it to deps. See
+		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
+	}, [ location, history ] );
+	return goBack;
+}
+
+export function useSpecificEditorSettings() {
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
+	const onNavigateToEntityRecord = useNavigateToEntityRecord();
+	const { settings } = useSelect( ( select ) => {
+		const { getSettings } = select( editSiteStore );
+		return {
+			settings: getSettings(),
+		};
+	}, [] );
+
+	const onNavigateToPreviousEntityRecord =
+		useNavigateToPreviousEntityRecord();
+	const defaultEditorSettings = useMemo( () => {
+		return {
+			...settings,
+
+			richEditingEnabled: true,
+			supportsTemplateMode: true,
+			focusMode: canvas !== 'view',
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
+			isPreviewMode: canvas === 'view',
+		};
+	}, [
+		settings,
+		canvas,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
+	] );
+
+	return defaultEditorSettings;
+}
diff --git a/packages/edit-site/src/components/canvas-loader/index.js b/packages/edit-site/src/components/canvas-loader/index.js
new file mode 100644
index 00000000000000..95dd8f24612938
--- /dev/null
+++ b/packages/edit-site/src/components/canvas-loader/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as componentsPrivateApis,
+	ProgressBar,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from '../global-styles/hooks';
+
+const { Theme } = unlock( componentsPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+export default function CanvasLoader( { id } ) {
+	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { highlightedColors } = useStylesPreviewColors();
+	const indicatorColor =
+		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
+	const { elapsed, total } = useSelect( ( select ) => {
+		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
+		const resolving = selectorsByStatus.resolving ?? 0;
+		const finished = selectorsByStatus.finished ?? 0;
+		return {
+			elapsed: finished,
+			total: finished + resolving,
+		};
+	}, [] );
+
+	return (
+		<div className="edit-site-canvas-loader">
+			<Theme accent={ indicatorColor } background={ backgroundColor }>
+				<ProgressBar id={ id } max={ total } value={ elapsed } />
+			</Theme>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/canvas-loader/style.scss b/packages/edit-site/src/components/canvas-loader/style.scss
new file mode 100644
index 00000000000000..3d74d408aeceda
--- /dev/null
+++ b/packages/edit-site/src/components/canvas-loader/style.scss
@@ -0,0 +1,28 @@
+.edit-site-canvas-loader {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	position: absolute;
+	top: 0;
+	left: 0;
+	opacity: 0;
+	align-items: center;
+	justify-content: center;
+
+	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+
+	& > div {
+		width: 160px;
+	}
+}
+
+@keyframes edit-site-canvas-loader__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
diff --git a/packages/edit-site/src/components/code-editor/code-editor-text-area.js b/packages/edit-site/src/components/code-editor/code-editor-text-area.js
deleted file mode 100644
index 1a907ca8e59f68..00000000000000
--- a/packages/edit-site/src/components/code-editor/code-editor-text-area.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import Textarea from 'react-autosize-textarea';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { VisuallyHidden } from '@wordpress/components';
-
-export default function CodeEditorTextArea( { value, onChange, onInput } ) {
-	const [ stateValue, setStateValue ] = useState( value );
-	const [ isDirty, setIsDirty ] = useState( false );
-	const instanceId = useInstanceId( CodeEditorTextArea );
-	const valueRef = useRef();
-
-	if ( ! isDirty && stateValue !== value ) {
-		setStateValue( value );
-	}
-
-	/**
-	 * Handles a textarea change event to notify the onChange prop callback and
-	 * reflect the new value in the component's own state. This marks the start
-	 * of the user's edits, if not already changed, preventing future props
-	 * changes to value from replacing the rendered value. This is expected to
-	 * be followed by a reset to dirty state via `stopEditing`.
-	 *
-	 * @see stopEditing
-	 *
-	 * @param {Event} event Change event.
-	 */
-	const onChangeHandler = ( event ) => {
-		const newValue = event.target.value;
-		onInput( newValue );
-		setStateValue( newValue );
-		setIsDirty( true );
-		valueRef.current = newValue;
-	};
-
-	/**
-	 * Function called when the user has completed their edits, responsible for
-	 * ensuring that changes, if made, are surfaced to the onPersist prop
-	 * callback and resetting dirty state.
-	 */
-	const stopEditing = () => {
-		if ( isDirty ) {
-			onChange( stateValue );
-			setIsDirty( false );
-		}
-	};
-
-	// Ensure changes aren't lost when component unmounts.
-	useEffect( () => {
-		return () => {
-			if ( valueRef.current ) {
-				onChange( valueRef.current );
-			}
-		};
-	}, [] );
-
-	return (
-		<>
-			<VisuallyHidden
-				as="label"
-				htmlFor={ `code-editor-text-area-${ instanceId }` }
-			>
-				{ __( 'Type text or HTML' ) }
-			</VisuallyHidden>
-			<Textarea
-				autoComplete="off"
-				dir="auto"
-				value={ stateValue }
-				onChange={ onChangeHandler }
-				onBlur={ stopEditing }
-				className="edit-site-code-editor-text-area"
-				id={ `code-editor-text-area-${ instanceId }` }
-				placeholder={ __( 'Start writing with text or HTML' ) }
-			/>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/code-editor/index.js b/packages/edit-site/src/components/code-editor/index.js
deleted file mode 100644
index 178ff2e5f7099c..00000000000000
--- a/packages/edit-site/src/components/code-editor/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
-import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import CodeEditorTextArea from './code-editor-text-area';
-
-export default function CodeEditor() {
-	const { templateType, shortcut } = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		return {
-			templateType: getEditedPostType(),
-			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-		};
-	}, [] );
-	const [ contentStructure, setContent ] = useEntityProp(
-		'postType',
-		templateType,
-		'content'
-	);
-	const [ blocks, , onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
-
-	// Replicates the logic found in getEditedPostContent().
-	let content;
-	if ( contentStructure instanceof Function ) {
-		content = contentStructure( { blocks } );
-	} else if ( blocks ) {
-		// If we have parsed blocks already, they should be our source of truth.
-		// Parsing applies block deprecations and legacy block conversions that
-		// unparsed content will not have.
-		content = __unstableSerializeAndClean( blocks );
-	} else {
-		content = contentStructure;
-	}
-
-	const { switchEditorMode } = useDispatch( editSiteStore );
-	return (
-		<div className="edit-site-code-editor">
-			<div className="edit-site-code-editor__toolbar">
-				<h2>{ __( 'Editing code' ) }</h2>
-				<Button
-					variant="tertiary"
-					onClick={ () => switchEditorMode( 'visual' ) }
-					shortcut={ shortcut }
-				>
-					{ __( 'Exit code editor' ) }
-				</Button>
-			</div>
-			<div className="edit-site-code-editor__body">
-				<CodeEditorTextArea
-					value={ content }
-					onChange={ ( newContent ) => {
-						onChange( parse( newContent ), {
-							selection: undefined,
-						} );
-					} }
-					onInput={ setContent }
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/code-editor/style.scss b/packages/edit-site/src/components/code-editor/style.scss
deleted file mode 100644
index f288ddcec86858..00000000000000
--- a/packages/edit-site/src/components/code-editor/style.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-.edit-site-code-editor {
-	position: relative;
-	width: 100%;
-	background-color: $white;
-	flex-grow: 1;
-
-	&__body {
-		width: 100%;
-		padding: $grid-unit-15;
-		max-width: $break-xlarge;
-		margin-left: auto;
-		margin-right: auto;
-
-		@include break-large() {
-			padding: $grid-unit-30;
-		}
-	}
-
-	// Exit code editor toolbar.
-	&__toolbar {
-		position: sticky;
-		z-index: z-index(".edit-site-code-editor__toolbar");
-		top: 0;
-		left: 0;
-		right: 0;
-		display: flex;
-		background: rgba($white, 0.8);
-		padding: $grid-unit-05 $grid-unit-15;
-
-		@include break-small() {
-			padding: $grid-unit-15;
-		}
-
-		@include break-large() {
-			padding: $grid-unit-15 $grid-unit-30;
-		}
-
-		h2 {
-			line-height: $button-size;
-			margin: 0 auto 0 0;
-			font-size: $default-font-size;
-			color: $gray-900;
-		}
-
-		.components-button svg {
-			order: 1;
-		}
-	}
-}
-
-textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
-	border: $border-width solid $gray-600;
-	border-radius: 0;
-	display: block;
-	margin: 0;
-	width: 100%;
-	box-shadow: none;
-	resize: none;
-	overflow: hidden;
-	font-family: $editor-html-font;
-	line-height: 2.4;
-	min-height: 200px;
-	transition: border 0.1s ease-out, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
-
-	// Same padding as title.
-	padding: $grid-unit-20;
-	@include break-small() {
-		padding: $grid-unit-30;
-	}
-
-	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size !important;
-	@include break-small {
-		font-size: $text-editor-font-size !important;
-	}
-
-	&:focus {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Elevate the z-index on focus so the focus style is uncropped.
-		position: relative;
-	}
-
-	&::-webkit-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-
-	&::-moz-placeholder {
-		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
-	}
-
-	&:-ms-input-placeholder {
-		color: $dark-gray-placeholder;
-	}
-}
diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
deleted file mode 100644
index dd02aa8b270a49..00000000000000
--- a/packages/edit-site/src/components/create-template-part-modal/index.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import {
-	Icon,
-	BaseControl,
-	TextControl,
-	Flex,
-	FlexItem,
-	FlexBlock,
-	Button,
-	Modal,
-	__experimentalRadioGroup as RadioGroup,
-	__experimentalRadio as Radio,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useInstanceId } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
-import { check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
-
-export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
-	const [ title, setTitle ] = useState( '' );
-	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
-	const [ isSubmitting, setIsSubmitting ] = useState( false );
-	const instanceId = useInstanceId( CreateTemplatePartModal );
-
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-
-	return (
-		<Modal
-			title={ __( 'Create a template part' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
-		>
-			<form
-				onSubmit={ async ( event ) => {
-					event.preventDefault();
-					if ( ! title ) {
-						return;
-					}
-					setIsSubmitting( true );
-					await onCreate( { title, area } );
-				} }
-			>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-					required
-				/>
-				<BaseControl
-					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
-				>
-					<RadioGroup
-						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
-						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						onChange={ setArea }
-						checked={ area }
-					>
-						{ templatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
-								<Radio
-									key={ label }
-									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
-								>
-									<Flex align="start" justify="start">
-										<FlexItem>
-											<Icon icon={ icon } />
-										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
-										</FlexBlock>
-
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
-											{ area === value && (
-												<Icon icon={ check } />
-											) }
-										</FlexItem>
-									</Flex>
-								</Radio>
-							)
-						) }
-					</RadioGroup>
-				</BaseControl>
-				<Flex
-					className="edit-site-create-template-part-modal__modal-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
-						<Button
-							variant="secondary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							disabled={ ! title }
-							isBusy={ isSubmitting }
-						>
-							{ __( 'Create' ) }
-						</Button>
-					</FlexItem>
-				</Flex>
-			</form>
-		</Modal>
-	);
-}
diff --git a/packages/edit-site/src/components/create-template-part-modal/style.scss b/packages/edit-site/src/components/create-template-part-modal/style.scss
deleted file mode 100644
index 71bba3db9974d1..00000000000000
--- a/packages/edit-site/src/components/create-template-part-modal/style.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.edit-site-create-template-part-modal {
-	z-index: z-index(".edit-site-create-template-part-modal");
-
-	.components-modal__frame {
-		@include break-small {
-			max-width: 500px;
-		}
-	}
-}
-
-
-.edit-site-create-template-part-modal__modal-actions {
-	padding-top: $grid-unit-15;
-}
-
-.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
-	margin: $grid-unit-20 0 $grid-unit-10;
-	cursor: auto;
-}
-
-.edit-site-create-template-part-modal__area-radio-group {
-	width: 100%;
-	border: $border-width solid $gray-700;
-	border-radius: 2px;
-
-	.components-button.edit-site-create-template-part-modal__area-radio {
-		display: block;
-		width: 100%;
-		height: 100%;
-		text-align: left;
-		padding: $grid-unit-15;
-
-		&,
-		&.is-secondary:hover,
-		&.is-primary:hover {
-			margin: 0;
-			background-color: inherit;
-			border-bottom: $border-width solid $gray-700;
-			border-radius: 0;
-
-			&:not(:focus) {
-				box-shadow: none;
-			}
-
-			&:focus {
-				border-bottom: $border-width solid $white;
-			}
-
-			&:last-of-type {
-				border-bottom: none;
-			}
-		}
-
-		&:not(:hover),
-		&[aria-checked="true"] {
-			color: $gray-900;
-			cursor: auto;
-
-			.edit-site-create-template-part-modal__option-label div {
-				color: $gray-600;
-			}
-		}
-
-		.edit-site-create-template-part-modal__option-label {
-			padding-top: $grid-unit-05;
-			white-space: normal;
-
-			div {
-				padding-top: $grid-unit-05;
-				font-size: $helptext-font-size;
-			}
-		}
-
-		.edit-site-create-template-part-modal__checkbox {
-			margin-left: auto;
-			min-width: $grid-unit-30;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
new file mode 100644
index 00000000000000..0a7b20c712c820
--- /dev/null
+++ b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_TYPES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export const useEditPostAction = () => {
+	const history = useHistory();
+	return useMemo(
+		() => ( {
+			id: 'edit-post',
+			label: __( 'Edit' ),
+			isPrimary: true,
+			icon: edit,
+			isEligible( post ) {
+				if ( post.status === 'trash' ) {
+					return false;
+				}
+				// It's eligible for all post types except theme patterns.
+				return post.type !== PATTERN_TYPES.theme;
+			},
+			callback( items ) {
+				const post = items[ 0 ];
+				history.navigate( `/${ post.type }/${ post.id }?canvas=edit` );
+			},
+		} ),
+		[ history ]
+	);
+};
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
new file mode 100644
index 00000000000000..050d2e19585cc4
--- /dev/null
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement, useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalUseSlotFills as useSlotFills,
+} from '@wordpress/components';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
+
+/**
+ * Returns a translated string for the title of the editor canvas container.
+ *
+ * @param {string} view Editor canvas container view.
+ *
+ * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
+ */
+function getEditorCanvasContainerTitle( view ) {
+	switch ( view ) {
+		case 'style-book':
+			return __( 'Style Book' );
+		case 'global-styles-revisions':
+		case 'global-styles-revisions:style-book':
+			return __( 'Style Revisions' );
+		default:
+			return '';
+	}
+}
+
+function EditorCanvasContainer( {
+	children,
+	closeButtonLabel,
+	onClose,
+	enableResizing = false,
+} ) {
+	const { editorCanvasContainerView, showListViewByDefault } = useSelect(
+		( select ) => {
+			const _editorCanvasContainerView = unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView();
+
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core',
+				'showListViewByDefault'
+			);
+
+			return {
+				editorCanvasContainerView: _editorCanvasContainerView,
+				showListViewByDefault: _showListViewByDefault,
+			};
+		},
+		[]
+	);
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+
+	function onCloseContainer() {
+		setIsListViewOpened( showListViewByDefault );
+		setEditorCanvasContainerView( undefined );
+		setIsClosed( true );
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
+	}
+
+	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onCloseContainer();
+		}
+	}
+
+	const childrenWithProps = Array.isArray( children )
+		? Children.map( children, ( child, index ) =>
+				index === 0
+					? cloneElement( child, {
+							ref: sectionFocusReturnRef,
+					  } )
+					: child
+		  )
+		: cloneElement( children, {
+				ref: sectionFocusReturnRef,
+		  } );
+
+	if ( isClosed ) {
+		return null;
+	}
+
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
+	const shouldShowCloseButton = onClose || closeButtonLabel;
+
+	return (
+		<EditorContentSlotFill.Fill>
+			<div className="edit-site-editor-canvas-container">
+				<ResizableEditor enableResizing={ enableResizing }>
+					{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+					<section
+						className="edit-site-editor-canvas-container__section"
+						ref={ shouldShowCloseButton ? focusOnMountRef : null }
+						onKeyDown={ closeOnEscape }
+						aria-label={ title }
+					>
+						{ shouldShowCloseButton && (
+							<Button
+								size="compact"
+								className="edit-site-editor-canvas-container__close-button"
+								icon={ closeSmall }
+								label={ closeButtonLabel || __( 'Close' ) }
+								onClick={ onCloseContainer }
+							/>
+						) }
+						{ childrenWithProps }
+					</section>
+				</ResizableEditor>
+			</div>
+		</EditorContentSlotFill.Fill>
+	);
+}
+
+function useHasEditorCanvasContainer() {
+	const fills = useSlotFills( EditorContentSlotFill.name );
+	return !! fills?.length;
+}
+
+export default EditorCanvasContainer;
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };
diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss
new file mode 100644
index 00000000000000..52ac29da0696f6
--- /dev/null
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -0,0 +1,34 @@
+.edit-site-editor-canvas-container {
+	height: 100%;
+
+	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-editor-canvas-container__section {
+	background: $white; // Fallback color, overridden by JavaScript.
+	border-radius: $radius-large;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+}
+
+.edit-site-editor-canvas-container__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: $grid-unit-10;
+	z-index: 2;
+	background: $white;
+}
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
deleted file mode 100644
index 9af00a7da6775a..00000000000000
--- a/packages/edit-site/src/components/editor/global-styles-renderer.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-/**
- * Internal dependencies
- */
-import { useGlobalStylesOutput } from '../global-styles/use-global-styles-output';
-
-function useGlobalStylesRenderer() {
-	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
-	const { getSettings } = useSelect( editSiteStore );
-	const { updateSettings } = useDispatch( editSiteStore );
-
-	useEffect( () => {
-		if ( ! styles || ! settings ) {
-			return;
-		}
-
-		const currentStoreSettings = getSettings();
-		const nonGlobalStyles = filter(
-			currentStoreSettings.styles,
-			( style ) => ! style.isGlobalStyles
-		);
-		updateSettings( {
-			...currentStoreSettings,
-			styles: [ ...nonGlobalStyles, ...styles ],
-			svgFilters,
-			__experimentalFeatures: settings,
-		} );
-	}, [ styles, settings ] );
-}
-
-export function GlobalStylesRenderer() {
-	useGlobalStylesRenderer();
-
-	return null;
-}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index bdb7563a76db5e..c045bafd8a6839 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -1,342 +1,363 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Popover, Button, Notice } from '@wordpress/components';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
-	BlockContextProvider,
-	BlockBreadcrumb,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	InterfaceSkeleton,
-	ComplementaryArea,
-	store as interfaceStore,
-} from '@wordpress/interface';
-import {
-	EditorNotices,
-	EditorSnackbars,
-	EntitiesSavedStates,
+	EditorKeyboardShortcutsRegister,
+	privateApis as editorPrivateApis,
+	store as editorStore,
 } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
-import {
-	ShortcutProvider,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
+import { Icon, arrowUpLeft } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import Header from '../header-edit-mode';
-import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
-import NavigationSidebar from '../navigation-sidebar';
-import BlockEditor from '../block-editor';
-import CodeEditor from '../code-editor';
-import KeyboardShortcuts from '../keyboard-shortcuts';
-import URLQueryController from '../url-query-controller';
-import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
-import ErrorBoundary from '../error-boundary';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from './global-styles-renderer';
-import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
-import useTitle from '../routes/use-title';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
+import CanvasLoader from '../canvas-loader';
+import { unlock } from '../../lock-unlock';
+import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
+import GlobalStylesSidebar from '../global-styles-sidebar';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+import {
+	getEditorCanvasContainerTitle,
+	useHasEditorCanvasContainer,
+} from '../editor-canvas-container';
+import SaveButton from '../save-button';
+import SavePanel from '../save-panel';
+import SiteEditorMoreMenu from '../more-menu';
+import SiteIcon from '../site-icon';
+import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
+import useEditorTitle from './use-editor-title';
+import { useIsSiteEditorLoading } from '../layout/hooks';
+import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	useResolveEditedEntity,
+	useSyncDeprecatedEntityIntoState,
+} from './use-resolve-edited-entity';
+import { addQueryArgs } from '@wordpress/url';
+
+const { Editor, BackButton } = unlock( editorPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const interfaceLabels = {
-	/* translators: accessibility text for the editor top bar landmark region. */
-	header: __( 'Editor top bar' ),
-	/* translators: accessibility text for the editor content landmark region. */
-	body: __( 'Editor content' ),
-	/* translators: accessibility text for the editor settings landmark region. */
-	sidebar: __( 'Editor settings' ),
-	/* translators: accessibility text for the editor publish landmark region. */
-	actions: __( 'Editor publish' ),
-	/* translators: accessibility text for the editor footer landmark region. */
-	footer: __( 'Editor footer' ),
-	/* translators: accessibility text for the navigation sidebar landmark region. */
-	drawer: __( 'Navigation Sidebar' ),
+const toggleHomeIconVariants = {
+	edit: {
+		opacity: 0,
+		scale: 0.2,
+	},
+	hover: {
+		opacity: 1,
+		scale: 1,
+		clipPath: 'inset( 22% round 2px )',
+	},
 };
 
-function Editor( { onError } ) {
+const siteIconVariants = {
+	edit: {
+		clipPath: 'inset(0% round 0px)',
+	},
+	hover: {
+		clipPath: 'inset( 22% round 2px )',
+	},
+	tap: {
+		clipPath: 'inset(0% round 0px)',
+	},
+};
+
+function getListPathForPostType( postType ) {
+	switch ( postType ) {
+		case 'navigation':
+			return '/navigation';
+		case 'wp_block':
+			return '/pattern?postType=wp_block';
+		case 'wp_template_part':
+			return '/pattern?postType=wp_template_part';
+		case 'wp_template':
+			return '/template';
+		case 'page':
+			return '/page';
+		case 'post':
+			return '/';
+	}
+	throw 'Unknown post type';
+}
+
+function getNavigationPath( location, postType ) {
+	const { path, name } = location;
+	if (
+		[
+			'pattern-item',
+			'template-part-item',
+			'page-item',
+			'template-item',
+			'post-item',
+		].includes( name )
+	) {
+		return getListPathForPostType( postType );
+	}
+	return addQueryArgs( path, { canvas: undefined } );
+}
+
+export default function EditSiteEditor( { isPostsList = false } ) {
+	const disableMotion = useReducedMotion();
+	const location = useLocation();
+	const { canvas = 'view' } = location.query;
+	const isLoading = useIsSiteEditorLoading();
+	useAdaptEditorToCanvas( canvas );
+	const entity = useResolveEditedEntity();
+	// deprecated sync state with url
+	useSyncDeprecatedEntityIntoState( entity );
+	const { postType, postId, context } = entity;
 	const {
-		isInserterOpen,
-		isListViewOpen,
-		isSaveViewOpen,
-		sidebarIsOpened,
-		settings,
-		entityId,
-		templateType,
-		page,
-		template,
-		templateResolved,
-		isNavigationOpen,
-		previousShortcut,
-		nextShortcut,
-		editorMode,
+		supportsGlobalStyles,
 		showIconLabels,
-		blockEditorMode,
+		editorCanvasView,
+		currentPostIsTrashed,
+		hasSiteIcon,
 	} = useSelect( ( select ) => {
-		const {
-			isInserterOpened,
-			isListViewOpened,
-			isSaveViewOpened,
-			getSettings,
-			getEditedPostType,
-			getEditedPostId,
-			getPage,
-			isNavigationOpened,
-			getEditorMode,
-		} = select( editSiteStore );
-		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		const { get } = select( preferencesStore );
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
-		// The currently selected entity to display. Typically template or template part.
 		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			isSaveViewOpen: isSaveViewOpened(),
-			sidebarIsOpened: !! select(
-				interfaceStore
-			).getActiveComplementaryArea( editSiteStore.name ),
-			settings: getSettings(),
-			templateType: postType,
-			page: getPage(),
-			template: postId
-				? getEntityRecord( 'postType', postType, postId )
-				: null,
-			templateResolved: postId
-				? hasFinishedResolution( 'getEntityRecord', [
-						'postType',
-						postType,
-						postId,
-				  ] )
-				: false,
-			entityId: postId,
-			isNavigationOpen: isNavigationOpened(),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-			editorMode: getEditorMode(),
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-			blockEditorMode: __unstableGetEditorMode(),
+			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			editorCanvasView: getEditorCanvasContainerView(),
+			currentPostIsTrashed:
+				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
+				'trash',
+			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
-		useDispatch( editSiteStore );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	const blockContext = useMemo(
-		() => ( {
-			...page?.context,
-			queryContext: [
-				page?.context.queryContext || { page: 1 },
-				( newQueryContext ) =>
-					setPage( {
-						...page,
-						context: {
-							...page?.context,
-							queryContext: {
-								...page?.context.queryContext,
-								...newQueryContext,
-							},
-						},
-					} ),
-			],
-		} ),
-		[ page?.context ]
+	const postWithTemplate = !! context?.postId;
+	useEditorTitle(
+		postWithTemplate ? context.postType : postType,
+		postWithTemplate ? context.postId : postId
+	);
+	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const iframeProps = useEditorIframeProps();
+	const isEditMode = canvas === 'edit';
+	const loadingProgressId = useInstanceId(
+		CanvasLoader,
+		'edit-site-editor__loading-progress'
 	);
 
-	useEffect( () => {
-		if ( isNavigationOpen ) {
-			document.body.classList.add( 'is-navigation-sidebar-open' );
-		} else {
-			document.body.classList.remove( 'is-navigation-sidebar-open' );
-		}
-	}, [ isNavigationOpen ] );
-
-	useEffect(
-		function openGlobalStylesOnLoad() {
-			const searchParams = new URLSearchParams( window.location.search );
-			if ( searchParams.get( 'styles' ) === 'open' ) {
-				enableComplementaryArea(
-					'core/edit-site',
-					'edit-site/global-styles'
-				);
+	const settings = useSpecificEditorSettings();
+	const styles = useMemo(
+		() => [
+			...settings.styles,
+			{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+				css:
+					canvas === 'view'
+						? `body{min-height: 100vh; ${
+								currentPostIsTrashed ? '' : 'cursor: pointer;'
+						  }}`
+						: undefined,
+			},
+		],
+		[ settings.styles, canvas, currentPostIsTrashed ]
+	);
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			switch ( actionId ) {
+				case 'move-to-trash':
+				case 'delete-post':
+					{
+						history.navigate(
+							getListPathForPostType(
+								postWithTemplate ? context.postType : postType
+							)
+						);
+					}
+					break;
+				case 'duplicate-post':
+					{
+						const newItem = items[ 0 ];
+						const _title =
+							typeof newItem.title === 'string'
+								? newItem.title
+								: newItem.title?.rendered;
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: Title of the created post or template, e.g: "Hello world".
+								__( '"%s" successfully created.' ),
+								decodeEntities( _title )
+							),
+							{
+								type: 'snackbar',
+								id: 'duplicate-post-action',
+								actions: [
+									{
+										label: __( 'Edit' ),
+										onClick: () => {
+											history.navigate(
+												`/${ newItem.type }/${ newItem.id }?canvas=edit`
+											);
+										},
+									},
+								],
+							}
+						);
+					}
+					break;
 			}
 		},
-		[ enableComplementaryArea ]
+		[
+			postType,
+			context?.postType,
+			postWithTemplate,
+			history,
+			createSuccessNotice,
+		]
 	);
 
-	// Don't render the Editor until the settings are set and loaded.
-	const isReady =
-		settings?.siteUrl &&
-		templateType !== undefined &&
-		entityId !== undefined;
-
-	const secondarySidebarLabel = isListViewOpen
-		? __( 'List View' )
-		: __( 'Block Library' );
+	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
+	const title = getEditorCanvasContainerTitle( editorCanvasView );
 
-	const secondarySidebar = () => {
-		if ( editorMode === 'visual' && isInserterOpen ) {
-			return <InserterSidebar />;
-		}
-		if ( editorMode === 'visual' && isListViewOpen ) {
-			return <ListViewSidebar />;
-		}
-		return null;
+	const isReady = ! isLoading;
+	const transition = {
+		duration: disableMotion ? 0 : 0.2,
 	};
 
-	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URlQueryController> from double-announcing.
-	useTitle( isReady && __( 'Editor (beta)' ) );
-
 	return (
 		<>
-			<URLQueryController />
+			<GlobalStylesRenderer
+				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
+			/>
+			<EditorKeyboardShortcutsRegister />
+			{ isEditMode && <BlockKeyboardShortcuts /> }
+			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
+			{ isEditMode && (
+				<WelcomeGuide
+					postType={ postWithTemplate ? context.postType : postType }
+				/>
+			) }
 			{ isReady && (
-				<ShortcutProvider>
-					<EntityProvider kind="root" type="site">
-						<EntityProvider
-							kind="postType"
-							type={ templateType }
-							id={ entityId }
-						>
-							<GlobalStylesProvider>
-								<BlockContextProvider value={ blockContext }>
-									<GlobalStylesRenderer />
-									<ErrorBoundary onError={ onError }>
-										<KeyboardShortcuts.Register />
-										<SidebarComplementaryAreaFills />
-										<InterfaceSkeleton
-											labels={ {
-												...interfaceLabels,
-												secondarySidebar:
-													secondarySidebarLabel,
-											} }
-											className={
-												showIconLabels &&
-												'show-icon-labels'
-											}
-											secondarySidebar={ secondarySidebar() }
-											sidebar={
-												sidebarIsOpened && (
-													<ComplementaryArea.Slot scope="core/edit-site" />
-												)
-											}
-											drawer={
-												<NavigationSidebar.Slot />
-											}
-											header={
-												<Header
-													showIconLabels={
-														showIconLabels
-													}
-												/>
-											}
-											notices={ <EditorSnackbars /> }
-											content={
-												<>
-													<EditorNotices />
-													{ editorMode === 'visual' &&
-														template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-													{ editorMode === 'text' &&
-														template && (
-															<CodeEditor />
-														) }
-													{ templateResolved &&
-														! template &&
-														settings?.siteUrl &&
-														entityId && (
-															<Notice
-																status="warning"
-																isDismissible={
-																	false
-																}
-															>
-																{ __(
-																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																) }
-															</Notice>
-														) }
-													<KeyboardShortcuts />
-												</>
-											}
-											actions={
-												<>
-													{ isSaveViewOpen ? (
-														<EntitiesSavedStates
-															close={ () =>
-																setIsSaveViewOpened(
-																	false
-																)
-															}
-														/>
-													) : (
-														<div className="edit-site-editor__toggle-save-panel">
-															<Button
-																variant="secondary"
-																className="edit-site-editor__toggle-save-panel-button"
-																onClick={ () =>
-																	setIsSaveViewOpened(
-																		true
-																	)
-																}
-																aria-expanded={
-																	false
-																}
-															>
-																{ __(
-																	'Open save panel'
-																) }
-															</Button>
-														</div>
-													) }
-												</>
-											}
-											footer={
-												blockEditorMode !==
-												'zoom-out' ? (
-													<BlockBreadcrumb
-														rootLabelText={ __(
-															'Template'
-														) }
-													/>
-												) : undefined
-											}
-											shortcuts={ {
-												previous: previousShortcut,
-												next: nextShortcut,
+				<Editor
+					postType={ postWithTemplate ? context.postType : postType }
+					postId={ postWithTemplate ? context.postId : postId }
+					templateId={ postWithTemplate ? postId : undefined }
+					settings={ settings }
+					className={ clsx( 'edit-site-editor__editor-interface', {
+						'show-icon-labels': showIconLabels,
+					} ) }
+					styles={ styles }
+					customSaveButton={
+						_isPreviewingTheme && <SaveButton size="compact" />
+					}
+					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
+					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+					title={ title }
+					iframeProps={ iframeProps }
+					onActionPerformed={ onActionPerformed }
+					extraSidebarPanels={
+						! postWithTemplate && (
+							<PluginTemplateSettingPanel.Slot />
+						)
+					}
+				>
+					{ isEditMode && (
+						<BackButton>
+							{ ( { length } ) =>
+								length <= 1 && (
+									<motion.div
+										className="edit-site-editor__view-mode-toggle"
+										transition={ transition }
+										animate="edit"
+										initial="edit"
+										whileHover="hover"
+										whileTap="tap"
+									>
+										<Button
+											__next40pxDefaultSize
+											label={ __( 'Open Navigation' ) }
+											showTooltip
+											tooltipPosition="middle right"
+											onClick={ () => {
+												resetZoomLevel();
+
+												// TODO: this is a temporary solution to navigate to the posts list if we are
+												// come here through `posts list` and are in focus mode editing a template, template part etc..
+												if (
+													isPostsList &&
+													location.query?.focusMode
+												) {
+													history.navigate( '/', {
+														transition:
+															'canvas-mode-view-transition',
+													} );
+												} else {
+													history.navigate(
+														getNavigationPath(
+															location,
+															postWithTemplate
+																? context.postType
+																: postType
+														),
+														{
+															transition:
+																'canvas-mode-view-transition',
+														}
+													);
+												}
 											} }
-										/>
-										<WelcomeGuide />
-										<Popover.Slot />
-									</ErrorBoundary>
-								</BlockContextProvider>
-							</GlobalStylesProvider>
-						</EntityProvider>
-					</EntityProvider>
-				</ShortcutProvider>
+										>
+											<motion.div
+												variants={ siteIconVariants }
+											>
+												<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
+											</motion.div>
+										</Button>
+										<motion.div
+											className={ clsx(
+												'edit-site-editor__back-icon',
+												{
+													'has-site-icon':
+														hasSiteIcon,
+												}
+											) }
+											variants={ toggleHomeIconVariants }
+										>
+											<Icon icon={ arrowUpLeft } />
+										</motion.div>
+									</motion.div>
+								)
+							}
+						</BackButton>
+					) }
+					<SiteEditorMoreMenu />
+					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+				</Editor>
 			) }
 		</>
 	);
 }
-export default Editor;
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 80a41bbb30be0d..a6cc5084966947 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -1,47 +1,81 @@
-html #wpadminbar {
-	display: none;
-}
+.edit-site-editor__editor-interface {
+	opacity: 1;
+	transition: opacity 0.1s ease-out;
+	@include reduce-motion( "transition" );
 
-html.wp-toolbar {
-	padding-top: 0;
+	&.is-loading {
+		opacity: 0;
+	}
 }
 
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
-	border: 1px dotted $gray-300;
+	border: $border-width dotted $gray-300;
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.interface-interface-skeleton__actions:focus &,
-	.interface-interface-skeleton__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
-.edit-site-visual-editor {
-	position: relative;
-	height: 100%;
-	display: block;
-	overflow: hidden;
+.edit-site-editor__view-mode-toggle {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable */
+	top: 0;
+	left: 0;
+	height: $header-height;
+	width: $header-height;
+	z-index: 100;
 
-	iframe {
-		display: block;
-		width: 100%;
+	.components-button {
+		color: $white;
 		height: 100%;
-		background-color: $white;
+		width: 100%;
+		border-radius: 0;
+		overflow: hidden;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&:hover,
+		&:active {
+			color: $white;
+		}
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	.edit-site-editor__view-mode-toggle-icon {
+		svg,
+		img {
+			background: $gray-900;
+			display: block;
+		}
 	}
 }
 
-// Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 40px;
-	padding-left: 16px;
-	padding-right: 16px;
+.edit-site-editor__back-icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 60px;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: hsla(0, 0%, 80%);
+	pointer-events: none;
+
+	svg {
+		fill: currentColor;
+	}
+
+	&.has-site-icon {
+		background-color: hsla(0, 0%, 100%, 0.6);
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+	}
 }
-@include editor-left(".edit-site .components-editor-notices__snackbar")
diff --git a/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js b/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js
new file mode 100644
index 00000000000000..a09adfb7a49d53
--- /dev/null
+++ b/packages/edit-site/src/components/editor/use-adapt-editor-to-canvas.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
+import { useLayoutEffect } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export function useAdaptEditorToCanvas( canvas ) {
+	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const {
+		setDeviceType,
+		closePublishSidebar,
+		setIsListViewOpened,
+		setIsInserterOpened,
+	} = useDispatch( editorStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const registry = useRegistry();
+	useLayoutEffect( () => {
+		const isMediumOrBigger =
+			window.matchMedia( '(min-width: 782px)' ).matches;
+		registry.batch( () => {
+			clearSelectedBlock();
+			setDeviceType( 'Desktop' );
+			closePublishSidebar();
+			setIsInserterOpened( false );
+
+			// Check if the block list view should be open by default.
+			// If `distractionFree` mode is enabled, the block list view should not be open.
+			// This behavior is disabled for small viewports.
+			if (
+				isMediumOrBigger &&
+				canvas === 'edit' &&
+				getPreference( 'core', 'showListViewByDefault' ) &&
+				! getPreference( 'core', 'distractionFree' )
+			) {
+				setIsListViewOpened( true );
+			} else {
+				setIsListViewOpened( false );
+			}
+		} );
+	}, [
+		canvas,
+		registry,
+		clearSelectedBlock,
+		setDeviceType,
+		closePublishSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		getPreference,
+	] );
+}
diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js
new file mode 100644
index 00000000000000..6f0b36f8e3b8b6
--- /dev/null
+++ b/packages/edit-site/src/components/editor/use-editor-title.js
@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import useTitle from '../routes/use-title';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { getTemplateInfo } = unlock( editorPrivateApis );
+
+function useEditorTitle( postType, postId ) {
+	const { title, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+
+			if ( ! postId ) {
+				return { isLoaded: false };
+			}
+
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
+			const templateInfo = getTemplateInfo( {
+				template: _record,
+				templateTypes,
+			} );
+
+			const _isLoaded = hasFinishedResolution( 'getEditedEntityRecord', [
+				'postType',
+				postType,
+				postId,
+			] );
+
+			return {
+				title: templateInfo.title,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	let editorTitle;
+	if ( isLoaded ) {
+		editorTitle = sprintf(
+			// translators: A breadcrumb trail for the Admin document title. 1: title of template being edited, 2: type of template (Template or Template Part).
+			_x( '%1$s ‹ %2$s', 'breadcrumb trail' ),
+			decodeEntities( title ),
+			POST_TYPE_LABELS[ postType ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
+		);
+	}
+
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URLQueryController> from double-announcing.
+	useTitle( isLoaded && editorTitle );
+}
+
+export default useEditorTitle;
diff --git a/packages/edit-site/src/components/editor/use-resolve-edited-entity.js b/packages/edit-site/src/components/editor/use-resolve-edited-entity.js
new file mode 100644
index 00000000000000..8da076f9f00b71
--- /dev/null
+++ b/packages/edit-site/src/components/editor/use-resolve-edited-entity.js
@@ -0,0 +1,147 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const postTypesWithoutParentTemplate = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES.user,
+];
+
+const authorizedPostTypes = [ 'page', 'post' ];
+
+export function useResolveEditedEntity() {
+	const { name, params = {}, query } = useLocation();
+	const { postId = query?.postId } = params; // Fallback to query param for postId for list view routes.
+	let postType;
+	if ( name === 'navigation-item' ) {
+		postType = NAVIGATION_POST_TYPE;
+	} else if ( name === 'pattern-item' ) {
+		postType = PATTERN_TYPES.user;
+	} else if ( name === 'template-part-item' ) {
+		postType = TEMPLATE_PART_POST_TYPE;
+	} else if ( name === 'template-item' || name === 'templates' ) {
+		postType = TEMPLATE_POST_TYPE;
+	} else if ( name === 'page-item' || name === 'pages' ) {
+		postType = 'page';
+	} else if ( name === 'post-item' || name === 'posts' ) {
+		postType = 'post';
+	}
+
+	const homePage = useSelect( ( select ) => {
+		const { getHomePage } = unlock( select( coreDataStore ) );
+		return getHomePage();
+	}, [] );
+
+	/**
+	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
+	 * in order to match the frontend as closely as possible in the site editor.
+	 *
+	 * It is not possible to rely on the server logic because there maybe unsaved changes that impact the template resolution.
+	 */
+	const resolvedTemplateId = useSelect(
+		( select ) => {
+			// If we're rendering a post type that doesn't have a template
+			// no need to resolve its template.
+			if (
+				postTypesWithoutParentTemplate.includes( postType ) &&
+				postId
+			) {
+				return;
+			}
+
+			// Don't trigger resolution for multi-selected posts.
+			if ( postId && postId.includes( ',' ) ) {
+				return;
+			}
+
+			const { getTemplateId } = unlock( select( coreDataStore ) );
+
+			// If we're rendering a specific page, we need to resolve its template.
+			// The site editor only supports pages for now, not other CPTs.
+			if (
+				postType &&
+				postId &&
+				authorizedPostTypes.includes( postType )
+			) {
+				return getTemplateId( postType, postId );
+			}
+
+			// If we're rendering the home page, and we have a static home page, resolve its template.
+			if ( homePage?.postType === 'page' ) {
+				return getTemplateId( 'page', homePage?.postId );
+			}
+
+			if ( homePage?.postType === 'wp_template' ) {
+				return homePage?.postId;
+			}
+		},
+		[ homePage, postId, postType ]
+	);
+
+	const context = useMemo( () => {
+		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
+			return {};
+		}
+
+		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
+			return { postType, postId };
+		}
+		// TODO: for post types lists we should probably not render the front page, but maybe a placeholder
+		// with a message like "Select a page" or something similar.
+		if ( homePage?.postType === 'page' ) {
+			return { postType: 'page', postId: homePage?.postId };
+		}
+
+		return {};
+	}, [ homePage, postType, postId ] );
+
+	if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
+		return { isReady: true, postType, postId, context };
+	}
+
+	if ( !! homePage ) {
+		return {
+			isReady: resolvedTemplateId !== undefined,
+			postType: TEMPLATE_POST_TYPE,
+			postId: resolvedTemplateId,
+			context,
+		};
+	}
+
+	return { isReady: false };
+}
+
+export function useSyncDeprecatedEntityIntoState( {
+	postType,
+	postId,
+	context,
+	isReady,
+} ) {
+	const { setEditedEntity } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if ( isReady ) {
+			setEditedEntity( postType, postId, context );
+		}
+	}, [ isReady, postType, postId, context, setEditedEntity ] );
+}
diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js
deleted file mode 100644
index 9e07afafd04a4e..00000000000000
--- a/packages/edit-site/src/components/error-boundary/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { doAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import ErrorBoundaryWarning from './warning';
-
-export default class ErrorBoundary extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.reboot = this.reboot.bind( this );
-
-		this.state = {
-			error: null,
-		};
-	}
-
-	componentDidCatch( error ) {
-		doAction( 'editor.ErrorBoundary.errorLogged', error );
-	}
-
-	static getDerivedStateFromError( error ) {
-		return { error };
-	}
-
-	reboot() {
-		this.props.onError();
-	}
-
-	render() {
-		const { error } = this.state;
-		if ( ! error ) {
-			return this.props.children;
-		}
-
-		return (
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor has encountered an unexpected error.'
-				) }
-				error={ error }
-				reboot={ this.reboot }
-			/>
-		);
-	}
-}
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
deleted file mode 100644
index 4abf84f224c7ab..00000000000000
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { Warning } from '@wordpress/block-editor';
-import { useCopyToClipboard } from '@wordpress/compose';
-
-function CopyButton( { text, children } ) {
-	const ref = useCopyToClipboard( text );
-	return (
-		<Button variant="secondary" ref={ ref }>
-			{ children }
-		</Button>
-	);
-}
-
-export default function ErrorBoundaryWarning( {
-	message,
-	error,
-	reboot,
-	dashboardLink,
-} ) {
-	const actions = [];
-
-	if ( reboot ) {
-		actions.push(
-			<Button key="recovery" onClick={ reboot } variant="secondary">
-				{ __( 'Attempt Recovery' ) }
-			</Button>
-		);
-	}
-
-	if ( error ) {
-		actions.push(
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>
-		);
-	}
-
-	if ( dashboardLink ) {
-		actions.push(
-			<Button
-				key="back-to-dashboard"
-				variant="secondary"
-				href={ dashboardLink }
-			>
-				{ __( 'Back to dashboard' ) }
-			</Button>
-		);
-	}
-
-	return (
-		<Warning className="editor-error-boundary" actions={ actions }>
-			{ message }
-		</Warning>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js
new file mode 100644
index 00000000000000..d3e84ff5390996
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles-renderer/index.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
+
+function useGlobalStylesRenderer( disableRootPadding ) {
+	const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding );
+	const { getSettings } = useSelect( editSiteStore );
+	const { updateSettings } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if ( ! styles || ! settings ) {
+			return;
+		}
+
+		const currentStoreSettings = getSettings();
+		const nonGlobalStyles = Object.values(
+			currentStoreSettings.styles ?? []
+		).filter( ( style ) => ! style.isGlobalStyles );
+		updateSettings( {
+			...currentStoreSettings,
+			styles: [ ...nonGlobalStyles, ...styles ],
+			__experimentalFeatures: settings,
+		} );
+	}, [ styles, settings, updateSettings, getSettings ] );
+}
+
+export function GlobalStylesRenderer( { disableRootPadding } ) {
+	useGlobalStylesRenderer( disableRootPadding );
+
+	return null;
+}
diff --git a/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js b/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
new file mode 100644
index 00000000000000..1f24bb49aa9f80
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ComplementaryArea, ComplementaryAreaMoreMenuItem } =
+	unlock( editorPrivateApis );
+
+export default function DefaultSidebar( {
+	className,
+	identifier,
+	title,
+	icon,
+	children,
+	closeLabel,
+	header,
+	headerClassName,
+	panelClassName,
+	isActiveByDefault,
+} ) {
+	return (
+		<>
+			<ComplementaryArea
+				className={ className }
+				scope="core"
+				identifier={ identifier }
+				title={ title }
+				icon={ icon }
+				closeLabel={ closeLabel }
+				header={ header }
+				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
+				isActiveByDefault={ isActiveByDefault }
+			>
+				{ children }
+			</ComplementaryArea>
+			<ComplementaryAreaMoreMenuItem
+				scope="core"
+				identifier={ identifier }
+				icon={ icon }
+			>
+				{ title }
+			</ComplementaryAreaMoreMenuItem>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
new file mode 100644
index 00000000000000..02a29dac5c0b7d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -0,0 +1,206 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexItem, Flex, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { styles, seen, backup } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesUI } from '../global-styles';
+import { store as editSiteStore } from '../../store';
+import { GlobalStylesMenuSlot } from '../global-styles/ui';
+import { unlock } from '../../lock-unlock';
+import { store as coreStore } from '@wordpress/core-data';
+import DefaultSidebar from './default-sidebar';
+
+const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function GlobalStylesSidebar() {
+	const { query } = useLocation();
+	const { canvas = 'view', name } = query;
+	const {
+		shouldClearCanvasContainerView,
+		isStyleBookOpened,
+		showListViewByDefault,
+		hasRevisions,
+		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
+	} = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const canvasContainerView = getEditorCanvasContainerView();
+			const _isVisualEditorMode =
+				'visual' === select( editorStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === canvas;
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core',
+				'showListViewByDefault'
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+
+			return {
+				isStyleBookOpened: 'style-book' === canvasContainerView,
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+				showListViewByDefault: _showListViewByDefault,
+				hasRevisions:
+					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
+						?.count,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvas ]
+	);
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	useEffect( () => {
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
+		}
+	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
+
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const toggleRevisions = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView( undefined );
+			return;
+		}
+
+		if ( isStyleBookOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		} else {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		}
+	};
+	const toggleStyleBook = () => {
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+			return;
+		}
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+			return;
+		}
+		setIsListViewOpened( isStyleBookOpened && showListViewByDefault );
+		setEditorCanvasContainerView(
+			isStyleBookOpened ? undefined : 'style-book'
+		);
+	};
+
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const previousActiveAreaRef = useRef( null );
+
+	useEffect( () => {
+		if ( name === 'styles' && canvas === 'edit' ) {
+			previousActiveAreaRef.current =
+				getActiveComplementaryArea( 'core' );
+			enableComplementaryArea( 'core', 'edit-site/global-styles' );
+		} else if ( previousActiveAreaRef.current ) {
+			enableComplementaryArea( 'core', previousActiveAreaRef.current );
+		}
+	}, [ name, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+
+	return (
+		<DefaultSidebar
+			className="edit-site-global-styles-sidebar"
+			identifier="edit-site/global-styles"
+			title={ __( 'Styles' ) }
+			icon={ styles }
+			closeLabel={ __( 'Close Styles' ) }
+			panelClassName="edit-site-global-styles-sidebar__panel"
+			header={
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					gap={ 1 }
+				>
+					<FlexItem>
+						<h2 className="edit-site-global-styles-sidebar__header-title">
+							{ __( 'Styles' ) }
+						</h2>
+					</FlexItem>
+					<Flex
+						justify="flex-end"
+						gap={ 1 }
+						className="edit-site-global-styles-sidebar__header-actions"
+					>
+						{ ! isMobileViewport && (
+							<FlexItem>
+								<Button
+									icon={ seen }
+									label={ __( 'Style Book' ) }
+									isPressed={
+										isStyleBookOpened ||
+										isRevisionsStyleBookOpened
+									}
+									accessibleWhenDisabled
+									disabled={ shouldClearCanvasContainerView }
+									onClick={ toggleStyleBook }
+									size="compact"
+								/>
+							</FlexItem>
+						) }
+						<FlexItem>
+							<Button
+								label={ __( 'Revisions' ) }
+								icon={ backup }
+								onClick={ toggleRevisions }
+								accessibleWhenDisabled
+								disabled={ ! hasRevisions }
+								isPressed={
+									isRevisionsOpened ||
+									isRevisionsStyleBookOpened
+								}
+								size="compact"
+							/>
+						</FlexItem>
+						<GlobalStylesMenuSlot />
+					</Flex>
+				</Flex>
+			}
+		>
+			<GlobalStylesUI />
+		</DefaultSidebar>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
new file mode 100644
index 00000000000000..30b1fc597ad707
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -0,0 +1,96 @@
+.editor-sidebar {
+	width: $sidebar-width;
+
+	> .components-panel {
+		border-left: 0;
+		border-right: 0;
+		margin-bottom: -1px;
+		margin-top: -1px;
+
+		> .components-panel__header {
+			background: $gray-100;
+		}
+	}
+
+	.block-editor-block-inspector__card {
+		margin: 0;
+	}
+}
+
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+
+	&__panel {
+		flex: 1;
+	}
+}
+
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title {
+	margin: 0;
+}
+
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
+	font-size: $default-font-size * 1.2;
+	font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .components-navigation__item > button span {
+	font-weight: 500;
+}
+
+.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
+	border: 0;
+}
+
+.edit-site-global-styles-sidebar .single-column {
+	grid-column: span 1;
+}
+
+.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
+	grid-column: 1 / -1;
+}
+
+.edit-site-global-styles-sidebar__blocks-group {
+	padding-top: $grid-unit-30;
+	border-top: $border-width solid $gray-200;
+}
+
+.edit-site-global-styles-sidebar__blocks-group-help {
+	padding: 0 $grid-unit-20;
+}
+
+.edit-site-global-styles-color-palette-panel,
+.edit-site-global-styles-gradient-palette-panel {
+	padding: $grid-unit-20;
+}
+
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.edit-site-global-styles-sidebar hr {
+	margin: 0;
+}
+
+.show-icon-labels {
+	.edit-site-global-styles-sidebar__header {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+				font-size: $helptext-font-size;
+			}
+		}
+	}
+}
+
diff --git a/packages/edit-site/src/components/global-styles/README.md b/packages/edit-site/src/components/global-styles/README.md
index ac728f3eb8bf52..9077b9e468d383 100644
--- a/packages/edit-site/src/components/global-styles/README.md
+++ b/packages/edit-site/src/components/global-styles/README.md
@@ -1,6 +1,6 @@
 # Global Styles
 
-This folder contains all the necessary APIs to render the global styles UI and to manipulate the global styles data. It can be potentially extracted to its own package.
+This folder contains the global styles UI.
 
 # Available public APIs
 
@@ -15,77 +15,3 @@ function MyComponent() {
 	return <GlobalStylesUI />;
 }
 ```
-
-## useGlobalStylesReset
-
-A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
-
-```js
-import { useGlobalStylesReset } from './global-styles';
-
-function MyComponent() {
-	const [ canReset, reset ] = useGlobalStylesReset();
-
-	return canReset 
-		? <Button onClick={ () => reset() }>Reset</Button> 
-		: null;
-}
-```
-
-## useGlobalStylesOutput
-
-A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
-
-```js
-import { useGlobalStylesOutput } from './global-styles';
-import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
-
-function MyComponent() {
-	const [ styles, settings ] = useGlobalStylesOutput();
-
-	return <BlockEditorProvider settings={{
-		styles,
-		__experimentalFeatures: settings
-	}}>
-		<BlockList />
-	</BlockEditorProvider>
-}
-```
-
-## useStyle
-
-A react hook used to retrieve the style applied to a given context.
-
-```js
-import { useStyle } from './global-styles';
-
-function MyComponent() {
-	// Text color for the site root.
-	const [ color, setColor ] = useStyle( 'color.text' ); 
-
-	// The user modified color for the core paragraph block.
-	const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); 
-
-	return "Something";
-}
-```
-
-## useSetting
-
-A react hook used to retrieve the setting applied to a given context.
-
-```js
-import { useSetting } from './global-styles';
-
-function MyComponent() {
-	// The default color palette.
-	const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); 
-
-	// The base (theme + core) color palette for the paragraph block,
-	// ignoring user provided palette.
-	// If the palette is not defined for the paragraph block, the root one is returned.
-	const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); 
-
-	return "Something";
-}
-```
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
new file mode 100644
index 00000000000000..e185079d8cee04
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+// Initial control values where no block style is set.
+const BACKGROUND_DEFAULT_VALUES = {
+	backgroundSize: 'auto',
+};
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	BackgroundPanel: StylesBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue( style ) {
+	return (
+		!! style?.background?.backgroundImage?.id ||
+		!! style?.background?.backgroundImage?.url ||
+		typeof style?.background?.backgroundImage === 'string'
+	);
+}
+
+export default function BackgroundPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ settings ] = useGlobalSetting( '' );
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+		/>
+	);
+}
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
new file mode 100644
index 00000000000000..b796ec6e0cb964
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockPreview } from '@wordpress/block-editor';
+import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getVariationClassName } from './utils';
+
+const BlockPreviewPanel = ( { name, variation = '' } ) => {
+	const blockExample = getBlockType( name )?.example;
+	const blocks = useMemo( () => {
+		if ( ! blockExample ) {
+			return null;
+		}
+
+		const example = {
+			...blockExample,
+			attributes: {
+				...blockExample.attributes,
+				style: undefined,
+				className: variation
+					? getVariationClassName( variation )
+					: blockExample.attributes?.className,
+			},
+		};
+
+		return getBlockFromExample( name, example );
+	}, [ name, blockExample, variation ] );
+
+	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	// Same as height of InserterPreviewPanel.
+	const previewHeight = 144;
+	const sidebarWidth = 235;
+	const scale = sidebarWidth / viewportWidth;
+	const minHeight =
+		scale !== 0 && scale < 1 && previewHeight
+			? previewHeight / scale
+			: previewHeight;
+
+	if ( ! blockExample ) {
+		return null;
+	}
+
+	return (
+		<Spacer marginX={ 4 } marginBottom={ 4 }>
+			<div
+				className="edit-site-global-styles__block-preview-panel"
+				style={ { maxHeight: previewHeight, boxSizing: 'initial' } }
+			>
+				<BlockPreview
+					blocks={ blocks }
+					viewportWidth={ viewportWidth }
+					minHeight={ previewHeight }
+					additionalStyles={
+						//We want this CSS to be in sync with the one in InserterPreviewPanel.
+						[
+							{
+								css: `
+								body{
+									padding: 24px;
+									min-height:${ Math.round( minHeight ) }px;
+									display:flex;
+									align-items:center;
+								}
+								.is-root-container { width: 100%; }
+							`,
+							},
+						]
+					}
+				/>
+			</div>
+		</Spacer>
+	);
+};
+
+export default BlockPreviewPanel;
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
deleted file mode 100644
index 420561207b872d..00000000000000
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
-import {
-	__experimentalBorderBoxControl as BorderBoxControl,
-	__experimentalHasSplitBorders as hasSplitBorders,
-	__experimentalIsDefinedBorder as isDefinedBorder,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	getSupportedGlobalStylesPanels,
-	useColorsPerOrigin,
-	useSetting,
-	useStyle,
-} from './hooks';
-
-export function useHasBorderPanel( name ) {
-	const controls = [
-		useHasBorderColorControl( name ),
-		useHasBorderRadiusControl( name ),
-		useHasBorderStyleControl( name ),
-		useHasBorderWidthControl( name ),
-	];
-
-	return controls.some( Boolean );
-}
-
-function useHasBorderColorControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'border.color', name )[ 0 ] &&
-		supports.includes( 'borderColor' )
-	);
-}
-
-function useHasBorderRadiusControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'border.radius', name )[ 0 ] &&
-		supports.includes( 'borderRadius' )
-	);
-}
-
-function useHasBorderStyleControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'border.style', name )[ 0 ] &&
-		supports.includes( 'borderStyle' )
-	);
-}
-
-function useHasBorderWidthControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'border.width', name )[ 0 ] &&
-		supports.includes( 'borderWidth' )
-	);
-}
-
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
-export default function BorderPanel( { name } ) {
-	// To better reflect if the user has customized a value we need to
-	// ensure the style value being checked is from the `user` origin.
-	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
-	const [ border, setBorder ] = useStyle( 'border', name );
-	const colors = useColorsPerOrigin( name );
-
-	const showBorderColor = useHasBorderColorControl( name );
-	const showBorderStyle = useHasBorderStyleControl( name );
-	const showBorderWidth = useHasBorderWidthControl( name );
-
-	// Border radius.
-	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useStyle(
-		'border.radius',
-		name
-	);
-	const hasBorderRadius = () => {
-		const borderValues = userBorderStyles?.radius;
-		if ( typeof borderValues === 'object' ) {
-			return Object.entries( borderValues ).some( Boolean );
-		}
-		return !! borderValues;
-	};
-
-	const resetBorder = () => {
-		if ( hasBorderRadius() ) {
-			return setBorder( { radius: userBorderStyles.radius } );
-		}
-
-		setBorder( undefined );
-	};
-
-	const resetAll = useCallback( () => setBorder( undefined ), [ setBorder ] );
-	const onBorderChange = useCallback(
-		( newBorder ) => {
-			// Ensure we have a visible border style when a border width or
-			// color is being selected.
-			const newBorderWithStyle = applyAllFallbackStyles( newBorder );
-
-			// As we can't conditionally generate styles based on if other
-			// style properties have been set we need to force split border
-			// definitions for user set border styles. Border radius is derived
-			// from the same property i.e. `border.radius` if it is a string
-			// that is used. The longhand border radii styles are only generated
-			// if that property is an object.
-			//
-			// For borders (color, style, and width) those are all properties on
-			// the `border` style property. This means if the theme.json defined
-			// split borders and the user condenses them into a flat border or
-			// vice-versa we'd get both sets of styles which would conflict.
-			const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-				? {
-						top: newBorderWithStyle,
-						right: newBorderWithStyle,
-						bottom: newBorderWithStyle,
-						left: newBorderWithStyle,
-				  }
-				: {
-						color: null,
-						style: null,
-						width: null,
-						...newBorderWithStyle,
-				  };
-
-			// As radius is maintained separately to color, style, and width
-			// maintain its value. Undefined values here will be cleaned when
-			// global styles are saved.
-			setBorder( { radius: border?.radius, ...updatedBorder } );
-		},
-		[ setBorder ]
-	);
-
-	return (
-		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
-			{ ( showBorderWidth || showBorderColor ) && (
-				<ToolsPanelItem
-					hasValue={ () => isDefinedBorder( userBorderStyles ) }
-					label={ __( 'Border' ) }
-					onDeselect={ () => resetBorder() }
-					isShownByDefault={ true }
-				>
-					<BorderBoxControl
-						colors={ colors }
-						enableAlpha={ true }
-						enableStyle={ showBorderStyle }
-						onChange={ onBorderChange }
-						popoverOffset={ 40 }
-						popoverPlacement="left-start"
-						value={ border }
-						__experimentalHasMultipleOrigins={ true }
-						__experimentalIsRenderedInSidebar={ true }
-						size={ '__unstable-large' }
-					/>
-				</ToolsPanelItem>
-			) }
-			{ showBorderRadius && (
-				<ToolsPanelItem
-					hasValue={ hasBorderRadius }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => setBorderRadius( undefined ) }
-					isShownByDefault={ true }
-				>
-					<BorderRadiusControl
-						values={ borderRadiusValues }
-						onChange={ ( value ) => {
-							setBorderRadius( value || undefined );
-						} }
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
index 9466b2d2282ec0..242a5c77102687 100644
--- a/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
+++ b/packages/edit-site/src/components/global-styles/color-indicator-wrapper.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Flex } from '@wordpress/components';
 function ColorIndicatorWrapper( { className, ...props } ) {
 	return (
 		<Flex
-			className={ classnames(
+			className={ clsx(
 				'edit-site-global-styles__color-indicator-wrapper',
 				className
 			) }
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index fd2c10568de216..0b1d482c0a1b3d 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -1,49 +1,58 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
+import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 export default function ColorPalettePanel( { name } ) {
-	const [ themeColors, setThemeColors ] = useSetting(
+	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name
 	);
-	const [ baseThemeColors ] = useSetting(
+	const [ baseThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name,
 		'base'
 	);
-	const [ defaultColors, setDefaultColors ] = useSetting(
+	const [ defaultColors, setDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name
 	);
-	const [ baseDefaultColors ] = useSetting(
+	const [ baseDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name,
 		'base'
 	);
-	const [ customColors, setCustomColors ] = useSetting(
+	const [ customColors, setCustomColors ] = useGlobalSetting(
 		'color.palette.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultPalette',
 		name
 	);
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeColors && !! themeColors.length && (
 				<PaletteEdit
@@ -52,6 +61,8 @@ export default function ColorPalettePanel( { name } ) {
 					colors={ themeColors }
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -63,17 +74,19 @@ export default function ColorPalettePanel( { name } ) {
 						colors={ defaultColors }
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
-				emptyMessage={ __(
-					'Custom colors are empty! Add some colors to create your own color palette.'
-				) }
+				paletteLabelHeadingLevel={ 3 }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
+			<ColorVariations title={ __( 'Palettes' ) } />
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/color-utils.js b/packages/edit-site/src/components/global-styles/color-utils.js
deleted file mode 100644
index 6ff99bbfe678d8..00000000000000
--- a/packages/edit-site/src/components/global-styles/color-utils.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-
-import { getSupportedGlobalStylesPanels } from './hooks';
-
-export function useHasColorPanel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		supports.includes( 'color' ) ||
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' ) ||
-		supports.includes( 'linkColor' )
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
deleted file mode 100644
index 19a252763ff7ea..00000000000000
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
-import { NavigationButtonAsItem } from './navigation-button';
-
-function ContextMenu( { name, parentMenu = '' } ) {
-	const hasTypographyPanel = useHasTypographyPanel( name );
-	const hasColorPanel = useHasColorPanel( name );
-	const hasBorderPanel = useHasBorderPanel( name );
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
-	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-
-	return (
-		<ItemGroup>
-			{ hasTypographyPanel && (
-				<NavigationButtonAsItem
-					icon={ typography }
-					path={ parentMenu + '/typography' }
-					aria-label={ __( 'Typography styles' ) }
-				>
-					{ __( 'Typography' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasColorPanel && (
-				<NavigationButtonAsItem
-					icon={ color }
-					path={ parentMenu + '/colors' }
-					aria-label={ __( 'Colors styles' ) }
-				>
-					{ __( 'Colors' ) }
-				</NavigationButtonAsItem>
-			) }
-			{ hasLayoutPanel && (
-				<NavigationButtonAsItem
-					icon={ layout }
-					path={ parentMenu + '/layout' }
-					aria-label={ __( 'Layout styles' ) }
-				>
-					{ __( 'Layout' ) }
-				</NavigationButtonAsItem>
-			) }
-		</ItemGroup>
-	);
-}
-
-export default ContextMenu;
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index d27a109e2b752a..d70dd03e603c0f 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -1,577 +1,86 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
-	__experimentalHStack as HStack,
-	__experimentalUnitControl as UnitControl,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalView as View,
-} from '@wordpress/components';
-import {
-	__experimentalUseCustomSides as useCustomSides,
-	__experimentalSpacingSizesControl as SpacingSizesControl,
-} from '@wordpress/block-editor';
-import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
-
-const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
-
-export function useHasDimensionsPanel( name ) {
-	const hasContentSize = useHasContentSize( name );
-	const hasWideSize = useHasWideSize( name );
-	const hasPadding = useHasPadding( name );
-	const hasMargin = useHasMargin( name );
-	const hasGap = useHasGap( name );
-	const hasMinHeight = useHasMinHeight( name );
-
-	return (
-		hasContentSize ||
-		hasWideSize ||
-		hasPadding ||
-		hasMargin ||
-		hasGap ||
-		hasMinHeight
-	);
-}
-
-function useHasContentSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.contentSize', name );
-
-	return settings && supports.includes( 'contentSize' );
-}
-
-function useHasWideSize( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'layout.wideSize', name );
-
-	return settings && supports.includes( 'wideSize' );
-}
-
-function useHasPadding( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.padding', name );
-
-	return settings && supports.includes( 'padding' );
-}
-
-function useHasMargin( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.margin', name );
-
-	return settings && supports.includes( 'margin' );
-}
-
-function useHasGap( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'spacing.blockGap', name );
-
-	return settings && supports.includes( 'blockGap' );
-}
-
-function useHasMinHeight( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ settings ] = useSetting( 'dimensions.minHeight', name );
-
-	return settings && supports.includes( 'minHeight' );
-}
-
-function useHasSpacingPresets() {
-	const [ settings ] = useSetting( 'spacing.spacingSizes' );
-
-	return settings && settings.length > 0;
-}
-
-function filterValuesBySides( values, sides ) {
-	if ( ! sides ) {
-		// If no custom side configuration all sides are opted into by default.
-		return values;
-	}
-
-	// Only include sides opted into within filtered values.
-	const filteredValues = {};
-	sides.forEach( ( side ) => {
-		if ( side === 'vertical' ) {
-			filteredValues.top = values.top;
-			filteredValues.bottom = values.bottom;
-		}
-		if ( side === 'horizontal' ) {
-			filteredValues.left = values.left;
-			filteredValues.right = values.right;
-		}
-		filteredValues[ side ] = values[ side ];
+import { unlock } from '../../lock-unlock';
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	DimensionsPanel: StylesDimensionsPanel,
+} = unlock( blockEditorPrivateApis );
+
+const DEFAULT_CONTROLS = {
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
+	childLayout: false,
+};
+
+export default function DimensionsPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
 	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ userSettings ] = useGlobalSetting( '', undefined, 'user' );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
-	return filteredValues;
-}
-
-function splitStyleValue( value ) {
-	// Check for shorthand value (a string value).
-	if ( value && typeof value === 'string' ) {
-		// Convert to value for individual sides for BoxControl.
-		return {
-			top: value,
-			right: value,
-			bottom: value,
-			left: value,
-		};
-	}
-
-	return value;
-}
-
-function splitGapValue( value ) {
-	// Check for shorthand value (a string value).
-	if ( value && typeof value === 'string' ) {
-		// If the value is a string, treat it as a single side (top) for the spacing controls.
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
 		return {
-			top: value,
+			...inheritedStyle,
+			layout: settings.layout,
 		};
-	}
+	}, [ inheritedStyle, settings.layout ] );
 
-	if ( value ) {
+	const styleWithLayout = useMemo( () => {
 		return {
-			...value,
-			right: value?.left,
-			bottom: value?.top,
+			...style,
+			layout: userSettings.layout,
 		};
-	}
-
-	return value;
-}
-
-// Props for managing `layout.contentSize`.
-function useContentSizeProps( name ) {
-	const [ contentSizeValue, setContentSizeValue ] = useSetting(
-		'layout.contentSize',
-		name
-	);
-	const [ userSetContentSizeValue ] = useSetting(
-		'layout.contentSize',
-		name,
-		'user'
-	);
-	const hasUserSetContentSizeValue = () => !! userSetContentSizeValue;
-	const resetContentSizeValue = () => setContentSizeValue( '' );
-	return {
-		contentSizeValue,
-		setContentSizeValue,
-		hasUserSetContentSizeValue,
-		resetContentSizeValue,
-	};
-}
-
-// Props for managing `layout.wideSize`.
-function useWideSizeProps( name ) {
-	const [ wideSizeValue, setWideSizeValue ] = useSetting(
-		'layout.wideSize',
-		name
-	);
-	const [ userSetWideSizeValue ] = useSetting(
-		'layout.wideSize',
-		name,
-		'user'
-	);
-	const hasUserSetWideSizeValue = () => !! userSetWideSizeValue;
-	const resetWideSizeValue = () => setWideSizeValue( '' );
-	return {
-		wideSizeValue,
-		setWideSizeValue,
-		hasUserSetWideSizeValue,
-		resetWideSizeValue,
-	};
-}
-
-// Props for managing `spacing.padding`.
-function usePaddingProps( name ) {
-	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
-	const paddingValues = splitStyleValue( rawPadding );
-	const paddingSides = useCustomSides( name, 'padding' );
-	const isAxialPadding =
-		paddingSides &&
-		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-
-	const setPaddingValues = ( newPaddingValues ) => {
-		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		setRawPadding( padding );
-	};
-	const resetPaddingValue = () => setPaddingValues( {} );
-	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
-	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
-	const hasPaddingValue = () => !! userSetPaddingValue;
-
-	return {
-		paddingValues,
-		paddingSides,
-		isAxialPadding,
-		setPaddingValues,
-		resetPaddingValue,
-		hasPaddingValue,
-	};
-}
+	}, [ style, userSettings.layout ] );
 
-// Props for managing `spacing.margin`.
-function useMarginProps( name ) {
-	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
-	const marginValues = splitStyleValue( rawMargin );
-	const marginSides = useCustomSides( name, 'margin' );
-	const isAxialMargin =
-		marginSides &&
-		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
+	const onChange = ( newStyle ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
 
-	const setMarginValues = ( newMarginValues ) => {
-		const margin = filterValuesBySides( newMarginValues, marginSides );
-		setRawMargin( margin );
-	};
-	const resetMarginValue = () => setMarginValues( {} );
-	const hasMarginValue = () =>
-		!! marginValues && Object.keys( marginValues ).length;
+		if ( newStyle.layout !== userSettings.layout ) {
+			const updatedSettings = {
+				...userSettings,
+				layout: newStyle.layout,
+			};
 
-	return {
-		marginValues,
-		marginSides,
-		isAxialMargin,
-		setMarginValues,
-		resetMarginValue,
-		hasMarginValue,
-	};
-}
+			// Ensure any changes to layout definitions are not persisted.
+			if ( updatedSettings.layout?.definitions ) {
+				delete updatedSettings.layout.definitions;
+			}
 
-// Props for managing `spacing.blockGap`.
-function useBlockGapProps( name ) {
-	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
-	const gapValues = splitGapValue( gapValue );
-	const gapSides = useCustomSides( name, 'blockGap' );
-	const isAxialGap =
-		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
-	const resetGapValue = () => setGapValue( undefined );
-	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
-	const hasGapValue = () => !! userSetGapValue;
-	const setGapValues = ( nextBoxGapValue ) => {
-		if ( ! nextBoxGapValue ) {
-			setGapValue( null );
+			setSettings( updatedSettings );
 		}
-		// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
-		if ( ! isAxialGap && nextBoxGapValue?.hasOwnProperty( 'top' ) ) {
-			setGapValue( nextBoxGapValue.top );
-		} else {
-			setGapValue( {
-				top: nextBoxGapValue?.top,
-				left: nextBoxGapValue?.left,
-			} );
-		}
-	};
-	return {
-		gapValue,
-		gapValues,
-		gapSides,
-		isAxialGap,
-		setGapValue,
-		setGapValues,
-		resetGapValue,
-		hasGapValue,
-	};
-}
-
-// Props for managing `dimensions.minHeight`.
-function useMinHeightProps( name ) {
-	const [ minHeightValue, setMinHeightValue ] = useStyle(
-		'dimensions.minHeight',
-		name
-	);
-	const resetMinHeightValue = () => setMinHeightValue( undefined );
-	const hasMinHeightValue = () => !! minHeightValue;
-	return {
-		minHeightValue,
-		setMinHeightValue,
-		resetMinHeightValue,
-		hasMinHeightValue,
-	};
-}
-
-export default function DimensionsPanel( { name } ) {
-	const showContentSizeControl = useHasContentSize( name );
-	const showWideSizeControl = useHasWideSize( name );
-	const showPaddingControl = useHasPadding( name );
-	const showMarginControl = useHasMargin( name );
-	const showGapControl = useHasGap( name );
-	const showMinHeightControl = useHasMinHeight( name );
-	const showSpacingPresetsControl = useHasSpacingPresets();
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
-
-	// Props for managing `layout.contentSize`.
-	const {
-		contentSizeValue,
-		setContentSizeValue,
-		hasUserSetContentSizeValue,
-		resetContentSizeValue,
-	} = useContentSizeProps( name );
-
-	// Props for managing `layout.wideSize`.
-	const {
-		wideSizeValue,
-		setWideSizeValue,
-		hasUserSetWideSizeValue,
-		resetWideSizeValue,
-	} = useWideSizeProps( name );
-
-	// Props for managing `spacing.padding`.
-	const {
-		paddingValues,
-		paddingSides,
-		isAxialPadding,
-		setPaddingValues,
-		resetPaddingValue,
-		hasPaddingValue,
-	} = usePaddingProps( name );
-
-	// Props for managing `spacing.margin`.
-	const {
-		marginValues,
-		marginSides,
-		isAxialMargin,
-		setMarginValues,
-		resetMarginValue,
-		hasMarginValue,
-	} = useMarginProps( name );
-
-	// Props for managing `spacing.blockGap`.
-	const {
-		gapValue,
-		gapValues,
-		gapSides,
-		isAxialGap,
-		setGapValue,
-		setGapValues,
-		resetGapValue,
-		hasGapValue,
-	} = useBlockGapProps( name );
-
-	// Props for managing `dimensions.minHeight`.
-	const {
-		minHeightValue,
-		setMinHeightValue,
-		resetMinHeightValue,
-		hasMinHeightValue,
-	} = useMinHeightProps( name );
-
-	const resetAll = () => {
-		resetPaddingValue();
-		resetMarginValue();
-		resetGapValue();
-		resetContentSizeValue();
-		resetWideSizeValue();
 	};
 
 	return (
-		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
-			{ ( showContentSizeControl || showWideSizeControl ) && (
-				<span className="span-columns">
-					{ __( 'Set the width of the main content area.' ) }
-				</span>
-			) }
-			{ showContentSizeControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Content size' ) }
-					hasValue={ hasUserSetContentSizeValue }
-					onDeselect={ resetContentSizeValue }
-					isShownByDefault={ true }
-				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSizeValue || '' }
-							onChange={ ( nextContentSize ) => {
-								setContentSizeValue( nextContentSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ positionCenter } />
-						</View>
-					</HStack>
-				</ToolsPanelItem>
-			) }
-			{ showWideSizeControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Wide size' ) }
-					hasValue={ hasUserSetWideSizeValue }
-					onDeselect={ resetWideSizeValue }
-					isShownByDefault={ true }
-				>
-					<HStack alignment="flex-end" justify="flex-start">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSizeValue || '' }
-							onChange={ ( nextWideSize ) => {
-								setWideSizeValue( nextWideSize );
-							} }
-							units={ units }
-						/>
-						<View>
-							<Icon icon={ stretchWide } />
-						</View>
-					</HStack>
-				</ToolsPanelItem>
-			) }
-			{ showPaddingControl && (
-				<ToolsPanelItem
-					hasValue={ hasPaddingValue }
-					label={ __( 'Padding' ) }
-					onDeselect={ resetPaddingValue }
-					isShownByDefault={ true }
-					className={ classnames( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-					} ) }
-				>
-					{ ! showSpacingPresetsControl && (
-						<BoxControl
-							values={ paddingValues }
-							onChange={ setPaddingValues }
-							label={ __( 'Padding' ) }
-							sides={ paddingSides }
-							units={ units }
-							allowReset={ false }
-							splitOnAxis={ isAxialPadding }
-						/>
-					) }
-					{ showSpacingPresetsControl && (
-						<SpacingSizesControl
-							values={ paddingValues }
-							onChange={ setPaddingValues }
-							label={ __( 'Padding' ) }
-							sides={ paddingSides }
-							units={ units }
-							allowReset={ false }
-							splitOnAxis={ isAxialPadding }
-						/>
-					) }
-				</ToolsPanelItem>
-			) }
-			{ showMarginControl && (
-				<ToolsPanelItem
-					hasValue={ hasMarginValue }
-					label={ __( 'Margin' ) }
-					onDeselect={ resetMarginValue }
-					isShownByDefault={ true }
-					className={ classnames( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-					} ) }
-				>
-					{ ! showSpacingPresetsControl && (
-						<BoxControl
-							values={ marginValues }
-							onChange={ setMarginValues }
-							label={ __( 'Margin' ) }
-							sides={ marginSides }
-							units={ units }
-							allowReset={ false }
-							splitOnAxis={ isAxialMargin }
-						/>
-					) }
-					{ showSpacingPresetsControl && (
-						<SpacingSizesControl
-							values={ marginValues }
-							onChange={ setMarginValues }
-							label={ __( 'Margin' ) }
-							sides={ marginSides }
-							units={ units }
-							allowReset={ false }
-							splitOnAxis={ isAxialMargin }
-						/>
-					) }
-				</ToolsPanelItem>
-			) }
-			{ showGapControl && (
-				<ToolsPanelItem
-					hasValue={ hasGapValue }
-					label={ __( 'Block spacing' ) }
-					onDeselect={ resetGapValue }
-					isShownByDefault={ true }
-					className={ classnames( {
-						'tools-panel-item-spacing': showSpacingPresetsControl,
-					} ) }
-				>
-					{ ! showSpacingPresetsControl &&
-						( isAxialGap ? (
-							<BoxControl
-								label={ __( 'Block spacing' ) }
-								min={ 0 }
-								onChange={ setGapValues }
-								units={ units }
-								sides={ gapSides }
-								values={ gapValues }
-								allowReset={ false }
-								splitOnAxis={ isAxialGap }
-							/>
-						) : (
-							<UnitControl
-								label={ __( 'Block spacing' ) }
-								__unstableInputWidth="80px"
-								min={ 0 }
-								onChange={ setGapValue }
-								units={ units }
-								value={ gapValue }
-							/>
-						) ) }
-					{ showSpacingPresetsControl && (
-						<SpacingSizesControl
-							label={ __( 'Block spacing' ) }
-							min={ 0 }
-							onChange={ setGapValues }
-							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
-							values={ gapValues }
-							allowReset={ false }
-							splitOnAxis={ isAxialGap }
-						/>
-					) }
-				</ToolsPanelItem>
-			) }
-			{ showMinHeightControl && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ hasMinHeightValue }
-					label={ __( 'Min. height' ) }
-					onDeselect={ resetMinHeightValue }
-					isShownByDefault={ true }
-				>
-					<UnitControl
-						label={ __( 'Min. height' ) }
-						value={ minHeightValue }
-						onChange={ setMinHeightValue }
-						units={ units }
-						min={ 0 }
-						size={ '__unstable-large' }
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesDimensionsPanel
+			inheritedValue={ inheritedStyleWithLayout }
+			value={ styleWithLayout }
+			onChange={ onChange }
+			settings={ settings }
+			includeLayoutControls
+			defaultControls={ DEFAULT_CONTROLS }
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
new file mode 100644
index 00000000000000..f3e81efbe597b0
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalText as Text,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { settings } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+import { setUIValuesNeeded } from './font-library-modal/utils';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+/**
+ * Maps the fonts with the source, if available.
+ *
+ * @param {Array}  fonts  The fonts to map.
+ * @param {string} source The source of the fonts.
+ * @return {Array} The mapped fonts.
+ */
+function mapFontsWithSource( fonts, source ) {
+	return fonts
+		? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )
+		: [];
+}
+
+function FontFamilies() {
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
+		useContext( FontLibraryContext );
+	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+	const hasFonts = 0 < activeFonts.length;
+	const hasInstalledFonts =
+		hasFonts ||
+		baseFontFamilies?.theme?.length > 0 ||
+		baseCustomFonts?.length > 0;
+
+	return (
+		<>
+			{ !! modalTabOpen && (
+				<FontLibraryModal
+					onRequestClose={ () => setModalTabOpen( null ) }
+					defaultTabId={ modalTabOpen }
+				/>
+			) }
+
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
+				{ activeFonts.length > 0 && (
+					<>
+						<ItemGroup size="large" isBordered isSeparated>
+							{ activeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+					</>
+				) }
+				{ ! hasFonts && (
+					<>
+						<Text as="p">
+							{ hasInstalledFonts
+								? __( 'No fonts activated.' )
+								: __( 'No fonts installed.' ) }
+						</Text>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () => {
+								setModalTabOpen(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage fonts' )
+								: __( 'Add fonts' ) }
+						</Button>
+					</>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<FontFamilies { ...props } />
+	</FontLibraryProvider>
+);
diff --git a/packages/edit-site/src/components/global-styles/font-family-item.js b/packages/edit-site/src/components/global-styles/font-family-item.js
new file mode 100644
index 00000000000000..b80865fd2e21af
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-family-item.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	FlexItem,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './font-library-modal/context';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+
+function FontFamilyItem( { font } ) {
+	const { handleSetLibraryFontSelected, setModalTabOpen } =
+		useContext( FontLibraryContext );
+
+	const variantsCount = font?.fontFace?.length || 1;
+
+	const handleClick = () => {
+		handleSetLibraryFontSelected( font );
+		setModalTabOpen( 'installed-fonts' );
+	};
+
+	const previewStyle = getFamilyPreviewStyle( font );
+
+	return (
+		<Item onClick={ handleClick }>
+			<HStack justify="space-between">
+				<FlexItem style={ previewStyle }>{ font.name }</FlexItem>
+				<FlexItem className="edit-site-global-styles-screen-typography__font-variants-count">
+					{ sprintf(
+						/* translators: %d: Number of font variants. */
+						_n( '%d variant', '%d variants', variantsCount ),
+						variantsCount
+					) }
+				</FlexItem>
+			</HStack>
+		</Item>
+	);
+}
+
+export default FontFamilyItem;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
new file mode 100644
index 00000000000000..0719cb873f8f78
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+import FontDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
+function CollectionFontVariant( {
+	face,
+	font,
+	handleToggleVariant,
+	selected,
+} ) {
+	const handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			handleToggleVariant( font, face );
+			return;
+		}
+		handleToggleVariant( font );
+	};
+
+	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
+
+	return (
+		<div className="font-library-modal__font-card">
+			<Flex justify="flex-start" align="center" gap="1rem">
+				<CheckboxControl
+					checked={ selected }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom
+					id={ checkboxId }
+				/>
+				<label htmlFor={ checkboxId }>
+					<FontDemo
+						font={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
+			</Flex>
+		</div>
+	);
+}
+
+export default CollectionFontVariant;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
new file mode 100644
index 00000000000000..abfb5484e44bf5
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -0,0 +1,539 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useState, useEffect } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useEntityRecord,
+	useEntityRecords,
+	store as coreStore,
+} from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	fetchGetFontFamilyBySlug,
+	fetchInstallFontFamily,
+	fetchUninstallFontFamily,
+	fetchFontCollections,
+	fetchFontCollection,
+} from './resolvers';
+import { unlock } from '../../../lock-unlock';
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+import {
+	setUIValuesNeeded,
+	mergeFontFamilies,
+	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+	makeFontFacesFormData,
+	makeFontFamilyFormData,
+	batchInstallFontFaces,
+	checkFontFaceInstalled,
+} from './utils';
+import { toggleFont } from './utils/toggleFont';
+import setNestedValue from '../../../utils/set-nested-value';
+
+export const FontLibraryContext = createContext( {} );
+
+function FontLibraryProvider( { children } ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { globalStylesId } = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
+	} );
+
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+
+	const [ isInstalling, setIsInstalling ] = useState( false );
+	const [ refreshKey, setRefreshKey ] = useState( 0 );
+
+	const refreshLibrary = () => {
+		setRefreshKey( Date.now() );
+	};
+
+	const { records: libraryPosts = [], isResolving: isResolvingLibrary } =
+		useEntityRecords( 'postType', 'wp_font_family', {
+			refreshKey,
+			_embed: true,
+		} );
+
+	const libraryFonts =
+		( libraryPosts || [] ).map( ( fontFamilyPost ) => {
+			return {
+				id: fontFamilyPost.id,
+				...fontFamilyPost.font_family_settings,
+				fontFace:
+					fontFamilyPost?._embedded?.font_faces.map(
+						( face ) => face.font_face_settings
+					) || [],
+			};
+		} ) || [];
+
+	// Global Styles (settings) font families
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
+
+	/*
+	 * Save the font families to the database.
+
+	 * This function is called when the user activates or deactivates a font family.
+	 * It only updates the global styles post content in the database for new font families.
+	 * This avoids saving other styles/settings changed by the user using other parts of the editor.
+	 *
+	 * It uses the font families from the param to avoid using the font families from an outdated state.
+	 *
+	 * @param {Array} fonts - The font families that will be saved to the database.
+	 */
+	const saveFontFamilies = async ( fonts ) => {
+		// Gets the global styles database post content.
+		const updatedGlobalStyles = globalStyles.record;
+
+		// Updates the database version of global styles with the edited font families in the client.
+		setNestedValue(
+			updatedGlobalStyles,
+			[ 'settings', 'typography', 'fontFamilies' ],
+			fonts
+		);
+
+		// Saves a new version of the global styles in the database.
+		await saveEntityRecord( 'root', 'globalStyles', updatedGlobalStyles );
+	};
+
+	// Library Fonts
+	const [ modalTabOpen, setModalTabOpen ] = useState( false );
+	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
+
+	// Themes Fonts are the fonts defined in the global styles (database persisted theme.json data).
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	const customFonts = fontFamilies?.custom
+		? fontFamilies.custom
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	const baseCustomFonts = libraryFonts
+		? libraryFonts
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+
+	useEffect( () => {
+		if ( ! modalTabOpen ) {
+			setLibraryFontSelected( null );
+		}
+	}, [ modalTabOpen ] );
+
+	const handleSetLibraryFontSelected = ( font ) => {
+		// If font is null, reset the selected font
+		if ( ! font ) {
+			setLibraryFontSelected( null );
+			return;
+		}
+
+		const fonts = font.source === 'theme' ? themeFonts : baseCustomFonts;
+
+		// Tries to find the font in the installed fonts
+		const fontSelected = fonts.find( ( f ) => f.slug === font.slug );
+		// If the font is not found (it is only defined in custom styles), use the font from custom styles
+		setLibraryFontSelected( {
+			...( fontSelected || font ),
+			source: font.source,
+		} );
+	};
+
+	// Demo
+	const [ loadedFontUrls ] = useState( new Set() );
+
+	const getAvailableFontsOutline = ( availableFontFamilies ) => {
+		const outline = availableFontFamilies.reduce( ( acc, font ) => {
+			const availableFontFaces =
+				font?.fontFace && font.fontFace?.length > 0
+					? font?.fontFace.map(
+							( face ) => `${ face.fontStyle + face.fontWeight }`
+					  )
+					: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
+
+			acc[ font.slug ] = availableFontFaces;
+			return acc;
+		}, {} );
+		return outline;
+	};
+
+	const getActivatedFontsOutline = ( source ) => {
+		switch ( source ) {
+			case 'theme':
+				return getAvailableFontsOutline( themeFonts );
+			case 'custom':
+			default:
+				return getAvailableFontsOutline( customFonts );
+		}
+	};
+
+	const isFontActivated = ( slug, style, weight, source ) => {
+		if ( ! style && ! weight ) {
+			return !! getActivatedFontsOutline( source )[ slug ];
+		}
+		return !! getActivatedFontsOutline( source )[ slug ]?.includes(
+			style + weight
+		);
+	};
+
+	const getFontFacesActivated = ( slug, source ) => {
+		return getActivatedFontsOutline( source )[ slug ] || [];
+	};
+
+	async function installFonts( fontFamiliesToInstall ) {
+		setIsInstalling( true );
+		try {
+			const fontFamiliesToActivate = [];
+			let installationErrors = [];
+
+			for ( const fontFamilyToInstall of fontFamiliesToInstall ) {
+				let isANewFontFamily = false;
+
+				// Get the font family if it already exists.
+				let installedFontFamily = await fetchGetFontFamilyBySlug(
+					fontFamilyToInstall.slug
+				);
+
+				// Otherwise create it.
+				if ( ! installedFontFamily ) {
+					isANewFontFamily = true;
+					// Prepare font family form data to install.
+					installedFontFamily = await fetchInstallFontFamily(
+						makeFontFamilyFormData( fontFamilyToInstall )
+					);
+				}
+
+				// Collect font faces that have already been installed (to be activated later)
+				const alreadyInstalledFontFaces =
+					installedFontFamily.fontFace && fontFamilyToInstall.fontFace
+						? installedFontFamily.fontFace.filter(
+								( fontFaceToInstall ) =>
+									checkFontFaceInstalled(
+										fontFaceToInstall,
+										fontFamilyToInstall.fontFace
+									)
+						  )
+						: [];
+
+				// Filter out Font Faces that have already been installed (so that they are not re-installed)
+				if (
+					installedFontFamily.fontFace &&
+					fontFamilyToInstall.fontFace
+				) {
+					fontFamilyToInstall.fontFace =
+						fontFamilyToInstall.fontFace.filter(
+							( fontFaceToInstall ) =>
+								! checkFontFaceInstalled(
+									fontFaceToInstall,
+									installedFontFamily.fontFace
+								)
+						);
+				}
+
+				// Install the fonts (upload the font files to the server and create the post in the database).
+				let successfullyInstalledFontFaces = [];
+				let unsuccessfullyInstalledFontFaces = [];
+				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
+					const response = await batchInstallFontFaces(
+						installedFontFamily.id,
+						makeFontFacesFormData( fontFamilyToInstall )
+					);
+					successfullyInstalledFontFaces = response?.successes;
+					unsuccessfullyInstalledFontFaces = response?.errors;
+				}
+
+				// Use the successfully installed font faces
+				// As well as any font faces that were already installed (those will be activated)
+				if (
+					successfullyInstalledFontFaces?.length > 0 ||
+					alreadyInstalledFontFaces?.length > 0
+				) {
+					// Use font data from REST API not from client to ensure
+					// correct font information is used.
+					installedFontFamily.fontFace = [
+						...successfullyInstalledFontFaces,
+					];
+
+					fontFamiliesToActivate.push( installedFontFamily );
+				}
+
+				// If it's a system font but was installed successfully, activate it.
+				if (
+					installedFontFamily &&
+					! fontFamilyToInstall?.fontFace?.length
+				) {
+					fontFamiliesToActivate.push( installedFontFamily );
+				}
+
+				// If the font family is new and is not a system font, delete it to avoid having font families without font faces.
+				if (
+					isANewFontFamily &&
+					fontFamilyToInstall?.fontFace?.length > 0 &&
+					successfullyInstalledFontFaces?.length === 0
+				) {
+					await fetchUninstallFontFamily( installedFontFamily.id );
+				}
+
+				installationErrors = installationErrors.concat(
+					unsuccessfullyInstalledFontFaces
+				);
+			}
+
+			installationErrors = installationErrors.reduce(
+				( unique, item ) =>
+					unique.includes( item.message )
+						? unique
+						: [ ...unique, item.message ],
+				[]
+			);
+
+			if ( fontFamiliesToActivate.length > 0 ) {
+				// Activate the font family (add the font family to the global styles).
+				const activeFonts = activateCustomFontFamilies(
+					fontFamiliesToActivate
+				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
+
+				refreshLibrary();
+			}
+
+			if ( installationErrors.length > 0 ) {
+				const installError = new Error(
+					__( 'There was an error installing fonts.' )
+				);
+
+				installError.installationErrors = installationErrors;
+
+				throw installError;
+			}
+		} finally {
+			setIsInstalling( false );
+		}
+	}
+
+	async function uninstallFontFamily( fontFamilyToUninstall ) {
+		try {
+			// Uninstall the font family.
+			// (Removes the font files from the server and the posts from the database).
+			const uninstalledFontFamily = await fetchUninstallFontFamily(
+				fontFamilyToUninstall.id
+			);
+
+			// Deactivate the font family if delete request is successful
+			// (Removes the font family from the global styles).
+			if ( uninstalledFontFamily.deleted ) {
+				const activeFonts = deactivateFontFamily(
+					fontFamilyToUninstall
+				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
+			}
+
+			// Refresh the library (the library font families from database).
+			refreshLibrary();
+
+			return uninstalledFontFamily;
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				`There was an error uninstalling the font family:`,
+				error
+			);
+			throw error;
+		}
+	}
+
+	const deactivateFontFamily = ( font ) => {
+		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+		// We want to save as active all the theme fonts at the beginning
+		const initialCustomFonts = fontFamilies?.[ font.source ] ?? [];
+		const newCustomFonts = initialCustomFonts.filter(
+			( f ) => f.slug !== font.slug
+		);
+		const activeFonts = {
+			...fontFamilies,
+			[ font.source ]: newCustomFonts,
+		};
+		setFontFamilies( activeFonts );
+
+		if ( font.fontFace ) {
+			font.fontFace.forEach( ( face ) => {
+				unloadFontFaceInBrowser( face, 'all' );
+			} );
+		}
+		return activeFonts;
+	};
+
+	const activateCustomFontFamilies = ( fontsToAdd ) => {
+		const fontsToActivate = cleanFontsForSave( fontsToAdd );
+
+		const activeFonts = {
+			...fontFamilies,
+			// Merge the existing custom fonts with the new fonts.
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),
+		};
+
+		// Activate the fonts by set the new custom fonts array.
+		setFontFamilies( activeFonts );
+
+		loadFontsInBrowser( fontsToActivate );
+
+		return activeFonts;
+	};
+
+	// Removes the id from the families and faces to avoid saving that to global styles post content.
+	const cleanFontsForSave = ( fonts ) => {
+		return fonts.map( ( { id: _familyDbId, fontFace, ...font } ) => ( {
+			...font,
+			...( fontFace && fontFace.length > 0
+				? {
+						fontFace: fontFace.map(
+							( { id: _faceDbId, ...face } ) => face
+						),
+				  }
+				: {} ),
+		} ) );
+	};
+
+	const loadFontsInBrowser = ( fonts ) => {
+		// Add custom fonts to the browser.
+		fonts.forEach( ( font ) => {
+			if ( font.fontFace ) {
+				font.fontFace.forEach( ( face ) => {
+					// Load font faces just in the iframe because they already are in the document.
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face.src ),
+						'all'
+					);
+				} );
+			}
+		} );
+	};
+
+	const toggleActivateFont = ( font, face ) => {
+		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
+		// We want to save as active all the theme fonts at the beginning
+		const initialFonts = fontFamilies?.[ font.source ] ?? [];
+		// Toggles the received font family or font face
+		const newFonts = toggleFont( font, face, initialFonts );
+		// Updates the font families activated in global settings:
+		setFontFamilies( {
+			...fontFamilies,
+			[ font.source ]: newFonts,
+		} );
+
+		const isFaceActivated = isFontActivated(
+			font.slug,
+			face?.fontStyle,
+			face?.fontWeight,
+			font.source
+		);
+
+		if ( isFaceActivated ) {
+			unloadFontFaceInBrowser( face, 'all' );
+		} else {
+			loadFontFaceInBrowser(
+				face,
+				getDisplaySrcFromFontFace( face?.src ),
+				'all'
+			);
+		}
+	};
+
+	const loadFontFaceAsset = async ( fontFace ) => {
+		// If the font doesn't have a src, don't load it.
+		if ( ! fontFace.src ) {
+			return;
+		}
+		// Get the src of the font.
+		const src = getDisplaySrcFromFontFace( fontFace.src );
+		// If the font is already loaded, don't load it again.
+		if ( ! src || loadedFontUrls.has( src ) ) {
+			return;
+		}
+		// Load the font in the browser.
+		loadFontFaceInBrowser( fontFace, src, 'document' );
+		// Add the font to the loaded fonts list.
+		loadedFontUrls.add( src );
+	};
+
+	// Font Collections
+	const [ collections, setFontCollections ] = useState( [] );
+	const getFontCollections = async () => {
+		const response = await fetchFontCollections();
+		setFontCollections( response );
+	};
+	const getFontCollection = async ( slug ) => {
+		try {
+			const hasData = !! collections.find(
+				( collection ) => collection.slug === slug
+			)?.font_families;
+			if ( hasData ) {
+				return;
+			}
+			const response = await fetchFontCollection( slug );
+			const updatedCollections = collections.map( ( collection ) =>
+				collection.slug === slug
+					? { ...collection, ...response }
+					: collection
+			);
+			setFontCollections( updatedCollections );
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			throw e;
+		}
+	};
+
+	useEffect( () => {
+		getFontCollections();
+	}, [] );
+
+	return (
+		<FontLibraryContext.Provider
+			value={ {
+				libraryFontSelected,
+				handleSetLibraryFontSelected,
+				fontFamilies,
+				baseCustomFonts,
+				isFontActivated,
+				getFontFacesActivated,
+				loadFontFaceAsset,
+				installFonts,
+				uninstallFontFamily,
+				toggleActivateFont,
+				getAvailableFontsOutline,
+				modalTabOpen,
+				setModalTabOpen,
+				refreshLibrary,
+				saveFontFamilies,
+				isResolvingLibrary,
+				isInstalling,
+				collections,
+				getFontCollection,
+			} }
+		>
+			{ children }
+		</FontLibraryContext.Provider>
+	);
+}
+
+export default FontLibraryProvider;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
new file mode 100644
index 00000000000000..61f8c28c77144f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	useNavigator,
+	__experimentalText as Text,
+	Button,
+	Flex,
+	FlexItem,
+	Icon,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontDemo from './font-demo';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+
+function FontCard( { font, onClick, variantsText, navigatorPath } ) {
+	const variantsCount = font.fontFace?.length || 1;
+
+	const style = {
+		cursor: !! onClick ? 'pointer' : 'default',
+	};
+
+	const navigator = useNavigator();
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			onClick={ () => {
+				onClick();
+				if ( navigatorPath ) {
+					navigator.goTo( navigatorPath );
+				}
+			} }
+			style={ style }
+			className="font-library-modal__font-card"
+		>
+			<Flex justify="space-between" wrap={ false }>
+				<FontDemo font={ font } />
+				<Flex justify="flex-end">
+					<FlexItem>
+						<Text className="font-library-modal__font-card__count">
+							{ variantsText ||
+								sprintf(
+									/* translators: %d: Number of font variants. */
+									_n(
+										'%d variant',
+										'%d variants',
+										variantsCount
+									),
+									variantsCount
+								) }
+						</Text>
+					</FlexItem>
+					<FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+					</FlexItem>
+				</Flex>
+			</Flex>
+		</Button>
+	);
+}
+
+export default FontCard;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
new file mode 100644
index 00000000000000..3aef0171ec358f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -0,0 +1,575 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useContext,
+	useEffect,
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
+import {
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Navigator,
+	__experimentalHeading as Heading,
+	Notice,
+	SelectControl,
+	FlexItem,
+	Flex,
+	Button,
+	DropdownMenu,
+	SearchControl,
+	ProgressBar,
+	CheckboxControl,
+} from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
+import {
+	moreVertical,
+	next,
+	previous,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import filterFonts from './utils/filter-fonts';
+import { toggleFont } from './utils/toggleFont';
+import {
+	getFontsOutline,
+	isFontFontFaceInOutline,
+} from './utils/fonts-outline';
+import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { downloadFontFaceAssets } from './utils';
+import { sortFontFaces } from './utils/sort-font-faces';
+import CollectionFontVariant from './collection-font-variant';
+
+const DEFAULT_CATEGORY = {
+	slug: 'all',
+	name: _x( 'All', 'font categories' ),
+};
+
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
+const MIN_WINDOW_HEIGHT = 500;
+
+function FontCollection( { slug } ) {
+	const requiresPermission = slug === 'google-fonts';
+
+	const getGoogleFontsPermissionFromStorage = () => {
+		return window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';
+	};
+
+	const [ selectedFont, setSelectedFont ] = useState( null );
+	const [ notice, setNotice ] = useState( false );
+	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ page, setPage ] = useState( 1 );
+	const [ filters, setFilters ] = useState( {} );
+	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
+		requiresPermission && ! getGoogleFontsPermissionFromStorage()
+	);
+	const { collections, getFontCollection, installFonts, isInstalling } =
+		useContext( FontLibraryContext );
+	const selectedCollection = collections.find(
+		( collection ) => collection.slug === slug
+	);
+
+	useEffect( () => {
+		const handleStorage = () => {
+			setRenderConfirmDialog(
+				requiresPermission && ! getGoogleFontsPermissionFromStorage()
+			);
+		};
+		handleStorage();
+		window.addEventListener( 'storage', handleStorage );
+		return () => window.removeEventListener( 'storage', handleStorage );
+	}, [ slug, requiresPermission ] );
+
+	const revokeAccess = () => {
+		window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );
+		window.dispatchEvent( new Event( 'storage' ) );
+	};
+
+	useEffect( () => {
+		const fetchFontCollection = async () => {
+			try {
+				await getFontCollection( slug );
+				resetFilters();
+			} catch ( e ) {
+				if ( ! notice ) {
+					setNotice( {
+						type: 'error',
+						message: e?.message,
+					} );
+				}
+			}
+		};
+		fetchFontCollection();
+	}, [ slug, getFontCollection, setNotice, notice ] );
+
+	useEffect( () => {
+		setSelectedFont( null );
+	}, [ slug ] );
+
+	useEffect( () => {
+		// If the selected fonts change, reset the selected fonts to install
+		setFontsToInstall( [] );
+	}, [ selectedFont ] );
+
+	const collectionFonts = useMemo(
+		() => selectedCollection?.font_families ?? [],
+		[ selectedCollection ]
+	);
+	const collectionCategories = selectedCollection?.categories ?? [];
+
+	const categories = [ DEFAULT_CATEGORY, ...collectionCategories ];
+
+	const fonts = useMemo(
+		() => filterFonts( collectionFonts, filters ),
+		[ collectionFonts, filters ]
+	);
+
+	const isLoading = ! selectedCollection?.font_families && ! notice;
+
+	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
+	// The height of each font family item is 61px.
+	const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );
+	const pageSize = Math.floor( ( windowHeight - 417 ) / 61 );
+	const totalPages = Math.ceil( fonts.length / pageSize );
+	const itemsStart = ( page - 1 ) * pageSize;
+	const itemsLimit = page * pageSize;
+	const items = fonts.slice( itemsStart, itemsLimit );
+
+	const handleCategoryFilter = ( category ) => {
+		setFilters( { ...filters, category } );
+		setPage( 1 );
+	};
+
+	const handleUpdateSearchInput = ( value ) => {
+		setFilters( { ...filters, search: value } );
+		setPage( 1 );
+	};
+
+	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
+
+	const resetFilters = () => {
+		setFilters( {} );
+		setPage( 1 );
+	};
+
+	const handleToggleVariant = ( font, face ) => {
+		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
+		setFontsToInstall( newFontsToInstall );
+	};
+
+	const fontToInstallOutline = getFontsOutline( fontsToInstall );
+
+	const resetFontsToInstall = () => {
+		setFontsToInstall( [] );
+	};
+
+	const selectFontCount =
+		fontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;
+
+	// Check if any fonts are selected.
+	const isIndeterminate =
+		selectFontCount > 0 &&
+		selectFontCount !== selectedFont?.fontFace?.length;
+
+	// Check if all fonts are selected.
+	const isSelectAllChecked =
+		selectFontCount === selectedFont?.fontFace?.length;
+
+	// Toggle select all fonts.
+	const toggleSelectAll = () => {
+		const newFonts = isSelectAllChecked ? [] : [ selectedFont ];
+
+		setFontsToInstall( newFonts );
+	};
+
+	const handleInstall = async () => {
+		setNotice( null );
+
+		const fontFamily = fontsToInstall[ 0 ];
+
+		try {
+			if ( fontFamily?.fontFace ) {
+				await Promise.all(
+					fontFamily.fontFace.map( async ( fontFace ) => {
+						if ( fontFace.src ) {
+							fontFace.file = await downloadFontFaceAssets(
+								fontFace.src
+							);
+						}
+					} )
+				);
+			}
+		} catch ( error ) {
+			// If any of the fonts fail to download,
+			// show an error notice and stop the request from being sent.
+			setNotice( {
+				type: 'error',
+				message: __(
+					'Error installing the fonts, could not be downloaded.'
+				),
+			} );
+			return;
+		}
+
+		try {
+			await installFonts( [ fontFamily ] );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: error.message,
+			} );
+		}
+		resetFontsToInstall();
+	};
+
+	const getSortedFontFaces = ( fontFamily ) => {
+		if ( ! fontFamily ) {
+			return [];
+		}
+		if ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {
+			return [
+				{
+					fontFamily: fontFamily.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( fontFamily.fontFace );
+	};
+
+	if ( renderConfirmDialog ) {
+		return <GoogleFontsConfirmDialog />;
+	}
+
+	const ActionsComponent = () => {
+		if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
+			return null;
+		}
+		return (
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Actions' ) }
+				popoverProps={ {
+					position: 'bottom left',
+				} }
+				controls={ [
+					{
+						title: __( 'Revoke access to Google Fonts' ),
+						onClick: revokeAccess,
+					},
+				] }
+			/>
+		);
+	};
+
+	return (
+		<div className="font-library-modal__tabpanel-layout">
+			{ isLoading && (
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
+			) }
+
+			{ ! isLoading && (
+				<>
+					<Navigator
+						initialPath="/"
+						className="font-library-modal__tabpanel-layout"
+					>
+						<Navigator.Screen path="/">
+							<HStack justify="space-between">
+								<VStack>
+									<Heading level={ 2 } size={ 13 }>
+										{ selectedCollection.name }
+									</Heading>
+									<Text>
+										{ selectedCollection.description }
+									</Text>
+								</VStack>
+								<ActionsComponent />
+							</HStack>
+							<Spacer margin={ 4 } />
+							<Flex>
+								<FlexItem>
+									<SearchControl
+										className="font-library-modal__search"
+										value={ filters.search }
+										placeholder={ __( 'Font name…' ) }
+										label={ __( 'Search' ) }
+										onChange={ debouncedUpdateSearchInput }
+										__nextHasNoMarginBottom
+										hideLabelFromVision={ false }
+									/>
+								</FlexItem>
+								<FlexItem>
+									<SelectControl
+										__nextHasNoMarginBottom
+										__next40pxDefaultSize
+										label={ __( 'Category' ) }
+										value={ filters.category }
+										onChange={ handleCategoryFilter }
+									>
+										{ categories &&
+											categories.map( ( category ) => (
+												<option
+													value={ category.slug }
+													key={ category.slug }
+												>
+													{ category.name }
+												</option>
+											) ) }
+									</SelectControl>
+								</FlexItem>
+							</Flex>
+
+							<Spacer margin={ 4 } />
+
+							{ !! selectedCollection?.font_families?.length &&
+								! fonts.length && (
+									<Text>
+										{ __(
+											'No fonts found. Try with a different search term'
+										) }
+									</Text>
+								) }
+
+							<div className="font-library-modal__fonts-grid__main">
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ items.map( ( font ) => (
+										<li
+											key={
+												font.font_family_settings.slug
+											}
+											className="font-library-modal__fonts-list-item"
+										>
+											<FontCard
+												font={
+													font.font_family_settings
+												}
+												navigatorPath="/fontFamily"
+												onClick={ () => {
+													setSelectedFont(
+														font.font_family_settings
+													);
+												} }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+							</div>
+						</Navigator.Screen>
+
+						<Navigator.Screen path="/fontFamily">
+							<Flex justify="flex-start">
+								<Navigator.BackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
+									size="small"
+									onClick={ () => {
+										setSelectedFont( null );
+										setNotice( null );
+									} }
+									label={ __( 'Back' ) }
+								/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ selectedFont?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __( 'Select font variants to install.' ) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<CheckboxControl
+								className="font-library-modal__select-all"
+								label={ __( 'Select all' ) }
+								checked={ isSelectAllChecked }
+								onChange={ toggleSelectAll }
+								indeterminate={ isIndeterminate }
+								__nextHasNoMarginBottom
+							/>
+							<VStack spacing={ 0 }>
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ getSortedFontFaces( selectedFont ).map(
+										( face, i ) => (
+											<li
+												key={ `face${ i }` }
+												className="font-library-modal__fonts-list-item"
+											>
+												<CollectionFontVariant
+													font={ selectedFont }
+													face={ face }
+													handleToggleVariant={
+														handleToggleVariant
+													}
+													selected={ isFontFontFaceInOutline(
+														selectedFont.slug,
+														selectedFont.fontFace
+															? face
+															: null, // If the font has no fontFace, we want to check if the font is in the outline
+														fontToInstallOutline
+													) }
+												/>
+											</li>
+										)
+									) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+							</VStack>
+							<Spacer margin={ 16 } />
+						</Navigator.Screen>
+					</Navigator>
+
+					{ selectedFont && (
+						<Flex
+							justify="flex-end"
+							className="font-library-modal__footer"
+						>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ handleInstall }
+								isBusy={ isInstalling }
+								disabled={
+									fontsToInstall.length === 0 || isInstalling
+								}
+								accessibleWhenDisabled
+							>
+								{ __( 'Install' ) }
+							</Button>
+						</Flex>
+					) }
+
+					{ ! selectedFont && (
+						<HStack
+							expanded={ false }
+							className="font-library-modal__footer"
+							justify="end"
+							spacing={ 6 }
+						>
+							<HStack
+								justify="flex-start"
+								expanded={ false }
+								spacing={ 1 }
+								className="font-library-modal__page-selection"
+							>
+								{ createInterpolateElement(
+									sprintf(
+										// translators: 1: Current page number, 2: Total number of pages.
+										_x(
+											'<div>Page</div>%1$s<div>of %2$s</div>',
+											'paging'
+										),
+										'<CurrentPage />',
+										totalPages
+									),
+									{
+										div: <div aria-hidden />,
+										CurrentPage: (
+											<SelectControl
+												aria-label={ __(
+													'Current page'
+												) }
+												value={ page }
+												options={ [
+													...Array( totalPages ),
+												].map( ( e, i ) => {
+													return {
+														label: i + 1,
+														value: i + 1,
+													};
+												} ) }
+												onChange={ ( newPage ) =>
+													setPage(
+														parseInt( newPage )
+													)
+												}
+												size="small"
+												__nextHasNoMarginBottom
+												variant="minimal"
+											/>
+										),
+									}
+								) }
+							</HStack>
+							<HStack expanded={ false } spacing={ 1 }>
+								<Button
+									onClick={ () => setPage( page - 1 ) }
+									disabled={ page === 1 }
+									accessibleWhenDisabled
+									label={ __( 'Previous page' ) }
+									icon={ isRTL() ? next : previous }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+								<Button
+									onClick={ () => setPage( page + 1 ) }
+									disabled={ page === totalPages }
+									accessibleWhenDisabled
+									label={ __( 'Next page' ) }
+									icon={ isRTL() ? previous : next }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+							</HStack>
+						</HStack>
+					) }
+				</>
+			) }
+		</div>
+	);
+}
+
+export default FontCollection;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
new file mode 100644
index 00000000000000..0320bdd4e4893f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -0,0 +1,116 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useContext, useEffect, useState, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import {
+	getFacePreviewStyle,
+	getFamilyPreviewStyle,
+} from './utils/preview-styles';
+
+function getPreviewUrl( fontFace ) {
+	if ( fontFace.preview ) {
+		return fontFace.preview;
+	}
+	if ( fontFace.src ) {
+		return Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;
+	}
+}
+
+function getDisplayFontFace( font ) {
+	// if this IS a font face return it
+	if ( font.fontStyle || font.fontWeight ) {
+		return font;
+	}
+	// if this is a font family with a collection of font faces
+	// return the first one that is normal and 400 OR just the first one
+	if ( font.fontFace && font.fontFace.length ) {
+		return (
+			font.fontFace.find(
+				( face ) =>
+					face.fontStyle === 'normal' && face.fontWeight === '400'
+			) || font.fontFace[ 0 ]
+		);
+	}
+	// This must be a font family with no font faces
+	// return a fake font face
+	return {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+}
+
+function FontDemo( { font, text } ) {
+	const ref = useRef( null );
+
+	const fontFace = getDisplayFontFace( font );
+	const style = getFamilyPreviewStyle( font );
+	text = text || font.name;
+	const customPreviewUrl = font.preview;
+
+	const [ isIntersecting, setIsIntersecting ] = useState( false );
+	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
+	const { loadFontFaceAsset } = useContext( FontLibraryContext );
+
+	const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
+	const isPreviewImage =
+		previewUrl && previewUrl.match( /\.(png|jpg|jpeg|gif|svg)$/i );
+
+	const faceStyles = getFacePreviewStyle( fontFace );
+	const textDemoStyle = {
+		fontSize: '18px',
+		lineHeight: 1,
+		opacity: isAssetLoaded ? '1' : '0',
+		...style,
+		...faceStyles,
+	};
+
+	useEffect( () => {
+		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
+			setIsIntersecting( entry.isIntersecting );
+		}, {} );
+		observer.observe( ref.current );
+		return () => observer.disconnect();
+	}, [ ref ] );
+
+	useEffect( () => {
+		const loadAsset = async () => {
+			if ( isIntersecting ) {
+				if ( ! isPreviewImage && fontFace.src ) {
+					await loadFontFaceAsset( fontFace );
+				}
+				setIsAssetLoaded( true );
+			}
+		};
+		loadAsset();
+	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
+
+	return (
+		<div ref={ ref }>
+			{ isPreviewImage ? (
+				<img
+					src={ previewUrl }
+					loading="lazy"
+					alt={ text }
+					className="font-library-modal__font-variant_demo-image"
+				/>
+			) : (
+				<Text
+					style={ textDemoStyle }
+					className="font-library-modal__font-variant_demo-text"
+				>
+					{ text }
+				</Text>
+			) }
+		</div>
+	);
+}
+
+export default FontDemo;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js
new file mode 100644
index 00000000000000..369edc6c9ffb42
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Card,
+	CardBody,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+function GoogleFontsConfirmDialog() {
+	const handleConfirm = () => {
+		// eslint-disable-next-line no-undef
+		window.localStorage.setItem(
+			'wp-font-library-google-fonts-permission',
+			'true'
+		);
+		window.dispatchEvent( new Event( 'storage' ) );
+	};
+
+	return (
+		<div className="font-library__google-fonts-confirm">
+			<Card>
+				<CardBody>
+					<Heading level={ 2 }>
+						{ __( 'Connect to Google Fonts' ) }
+					</Heading>
+					<Spacer margin={ 6 } />
+					<Text as="p">
+						{ __(
+							'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'
+						) }
+					</Text>
+					<Spacer margin={ 3 } />
+					<Text as="p">
+						{ __(
+							'You can alternatively upload files directly on the Upload tab.'
+						) }
+					</Text>
+					<Spacer margin={ 6 } />
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ handleConfirm }
+					>
+						{ __( 'Allow access to Google Fonts' ) }
+					</Button>
+				</CardBody>
+			</Card>
+		</div>
+	);
+}
+
+export default GoogleFontsConfirmDialog;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
new file mode 100644
index 00000000000000..27093e0ef1cbba
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InstalledFonts from './installed-fonts';
+import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
+import { FontLibraryContext } from './context';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const DEFAULT_TAB = {
+	id: 'installed-fonts',
+	title: _x( 'Library', 'Font library' ),
+};
+
+const UPLOAD_TAB = {
+	id: 'upload-fonts',
+	title: __( 'Upload' ),
+};
+
+const tabsFromCollections = ( collections ) =>
+	collections.map( ( { slug, name } ) => ( {
+		id: slug,
+		title:
+			collections.length === 1 && slug === 'google-fonts'
+				? __( 'Install Fonts' )
+				: name,
+	} ) );
+
+function FontLibraryModal( {
+	onRequestClose,
+	defaultTabId = 'installed-fonts',
+} ) {
+	const { collections } = useContext( FontLibraryContext );
+	const canUserCreate = useSelect( ( select ) => {
+		return select( coreStore ).canUser( 'create', {
+			kind: 'postType',
+			name: 'wp_font_family',
+		} );
+	}, [] );
+
+	const tabs = [ DEFAULT_TAB ];
+
+	if ( canUserCreate ) {
+		tabs.push( UPLOAD_TAB );
+		tabs.push( ...tabsFromCollections( collections || [] ) );
+	}
+
+	return (
+		<Modal
+			title={ __( 'Fonts' ) }
+			onRequestClose={ onRequestClose }
+			isFullScreen
+			className="font-library-modal"
+		>
+			<Tabs defaultTabId={ defaultTabId }>
+				<div className="font-library-modal__tablist-container">
+					<Tabs.TabList>
+						{ tabs.map( ( { id, title } ) => (
+							<Tabs.Tab key={ id } tabId={ id }>
+								{ title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( { id } ) => {
+					let contents;
+					switch ( id ) {
+						case 'upload-fonts':
+							contents = <UploadFonts />;
+							break;
+						case 'installed-fonts':
+							contents = <InstalledFonts />;
+							break;
+						default:
+							contents = <FontCollection slug={ id } />;
+					}
+					return (
+						<Tabs.TabPanel
+							key={ id }
+							tabId={ id }
+							focusable={ false }
+						>
+							{ contents }
+						</Tabs.TabPanel>
+					);
+				} ) }
+			</Tabs>
+		</Modal>
+	);
+}
+
+export default FontLibraryModal;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
new file mode 100644
index 00000000000000..b7666a66afe0b3
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -0,0 +1,518 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	Navigator,
+	useNavigator,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	Notice,
+	ProgressBar,
+	CheckboxControl,
+} from '@wordpress/components';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
+import {
+	setUIValuesNeeded,
+	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+} from './utils';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+function InstalledFonts() {
+	const {
+		baseCustomFonts,
+		libraryFontSelected,
+		handleSetLibraryFontSelected,
+		refreshLibrary,
+		uninstallFontFamily,
+		isResolvingLibrary,
+		isInstalling,
+		saveFontFamilies,
+		getFontFacesActivated,
+	} = useContext( FontLibraryContext );
+
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
+	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+	const globalStylesId = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return __experimentalGetCurrentGlobalStylesId();
+	} );
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+	const fontFamiliesHasChanges =
+		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+
+	const themeFonts = fontFamilies?.theme
+		? fontFamilies.theme
+				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		: [];
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
+	const customFontFamilyId =
+		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
+
+	const canUserDelete = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			return (
+				customFontFamilyId &&
+				canUser( 'delete', {
+					kind: 'postType',
+					name: 'wp_font_family',
+					id: customFontFamilyId,
+				} )
+			);
+		},
+		[ customFontFamilyId ]
+	);
+
+	const shouldDisplayDeleteButton =
+		!! libraryFontSelected &&
+		libraryFontSelected?.source !== 'theme' &&
+		canUserDelete;
+
+	const handleUninstallClick = () => {
+		setIsConfirmDeleteOpen( true );
+	};
+
+	const handleUpdate = async () => {
+		setNotice( null );
+		try {
+			await saveFontFamilies( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family updated successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: sprintf(
+					/* translators: %s: error message */
+					__( 'There was an error updating the font family. %s' ),
+					error.message
+				),
+			} );
+		}
+	};
+
+	const getFontFacesToDisplay = ( font ) => {
+		if ( ! font ) {
+			return [];
+		}
+		if ( ! font.fontFace || ! font.fontFace.length ) {
+			return [
+				{
+					fontFamily: font.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( font.fontFace );
+	};
+
+	const getFontCardVariantsText = ( font ) => {
+		const variantsInstalled =
+			font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+		const variantsActive = getFontFacesActivated(
+			font.slug,
+			font.source
+		).length;
+		return sprintf(
+			/* translators: 1: Active font variants, 2: Total font variants. */
+			__( '%1$s/%2$s variants active' ),
+			variantsActive,
+			variantsInstalled
+		);
+	};
+
+	useEffect( () => {
+		handleSetLibraryFontSelected( libraryFontSelected );
+		refreshLibrary();
+	}, [] );
+
+	// Get activated fonts count.
+	const activeFontsCount = libraryFontSelected
+		? getFontFacesActivated(
+				libraryFontSelected.slug,
+				libraryFontSelected.source
+		  ).length
+		: 0;
+
+	const selectedFontsCount =
+		libraryFontSelected?.fontFace?.length ??
+		( libraryFontSelected?.fontFamily ? 1 : 0 );
+
+	// Check if any fonts are selected.
+	const isIndeterminate =
+		activeFontsCount > 0 && activeFontsCount !== selectedFontsCount;
+
+	// Check if all fonts are selected.
+	const isSelectAllChecked = activeFontsCount === selectedFontsCount;
+
+	// Toggle select all fonts.
+	const toggleSelectAll = () => {
+		const initialFonts =
+			fontFamilies?.[ libraryFontSelected.source ]?.filter(
+				( f ) => f.slug !== libraryFontSelected.slug
+			) ?? [];
+		const newFonts = isSelectAllChecked
+			? initialFonts
+			: [ ...initialFonts, libraryFontSelected ];
+
+		setFontFamilies( {
+			...fontFamilies,
+			[ libraryFontSelected.source ]: newFonts,
+		} );
+
+		if ( libraryFontSelected.fontFace ) {
+			libraryFontSelected.fontFace.forEach( ( face ) => {
+				if ( isSelectAllChecked ) {
+					unloadFontFaceInBrowser( face, 'all' );
+				} else {
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face?.src ),
+						'all'
+					);
+				}
+			} );
+		}
+	};
+
+	const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
+	return (
+		<div className="font-library-modal__tabpanel-layout">
+			{ isResolvingLibrary && (
+				<div className="font-library-modal__loading">
+					<ProgressBar />
+				</div>
+			) }
+
+			{ ! isResolvingLibrary && (
+				<>
+					<Navigator
+						initialPath={
+							libraryFontSelected ? '/fontFamily' : '/'
+						}
+					>
+						<Navigator.Screen path="/">
+							<VStack spacing="8">
+								{ notice && (
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+								) }
+								{ ! hasFonts && (
+									<Text as="p">
+										{ __( 'No fonts installed.' ) }
+									</Text>
+								) }
+								{ baseThemeFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{
+												/* translators: Heading for a list of fonts provided by the theme. */
+												_x( 'Theme', 'font source' )
+											}
+										</h2>
+										{ /*
+										 * Disable reason: The `list` ARIA role is redundant but
+										 * Safari+VoiceOver won't announce the list otherwise.
+										 */
+										/* eslint-disable jsx-a11y/no-redundant-roles */ }
+										<ul
+											role="list"
+											className="font-library-modal__fonts-list"
+										>
+											{ baseThemeFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath="/fontFamily"
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															setNotice( null );
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+								{ baseCustomFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{
+												/* translators: Heading for a list of fonts installed by the user. */
+												_x( 'Custom', 'font source' )
+											}
+										</h2>
+										{ /*
+										 * Disable reason: The `list` ARIA role is redundant but
+										 * Safari+VoiceOver won't announce the list otherwise.
+										 */
+										/* eslint-disable jsx-a11y/no-redundant-roles */ }
+										<ul
+											role="list"
+											className="font-library-modal__fonts-list"
+										>
+											{ baseCustomFonts.map( ( font ) => (
+												<li
+													key={ font.slug }
+													className="font-library-modal__fonts-list-item"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath="/fontFamily"
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															setNotice( null );
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+							</VStack>
+						</Navigator.Screen>
+
+						<Navigator.Screen path="/fontFamily">
+							<ConfirmDeleteDialog
+								font={ libraryFontSelected }
+								isOpen={ isConfirmDeleteOpen }
+								setIsOpen={ setIsConfirmDeleteOpen }
+								setNotice={ setNotice }
+								uninstallFontFamily={ uninstallFontFamily }
+								handleSetLibraryFontSelected={
+									handleSetLibraryFontSelected
+								}
+							/>
+
+							<Flex justify="flex-start">
+								<Navigator.BackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
+									size="small"
+									onClick={ () => {
+										handleSetLibraryFontSelected( null );
+										setNotice( null );
+									} }
+									label={ __( 'Back' ) }
+								/>
+								<Heading
+									level={ 2 }
+									size={ 13 }
+									className="edit-site-global-styles-header"
+								>
+									{ libraryFontSelected?.name }
+								</Heading>
+							</Flex>
+							{ notice && (
+								<>
+									<Spacer margin={ 1 } />
+									<Notice
+										status={ notice.type }
+										onRemove={ () => setNotice( null ) }
+									>
+										{ notice.message }
+									</Notice>
+									<Spacer margin={ 1 } />
+								</>
+							) }
+							<Spacer margin={ 4 } />
+							<Text>
+								{ __(
+									'Choose font variants. Keep in mind that too many variants could make your site slower.'
+								) }
+							</Text>
+							<Spacer margin={ 4 } />
+							<VStack spacing={ 0 }>
+								<CheckboxControl
+									className="font-library-modal__select-all"
+									label={ __( 'Select all' ) }
+									checked={ isSelectAllChecked }
+									onChange={ toggleSelectAll }
+									indeterminate={ isIndeterminate }
+									__nextHasNoMarginBottom
+								/>
+								<Spacer margin={ 8 } />
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ getFontFacesToDisplay(
+										libraryFontSelected
+									).map( ( face, i ) => (
+										<li
+											key={ `face${ i }` }
+											className="font-library-modal__fonts-list-item"
+										>
+											<LibraryFontVariant
+												font={ libraryFontSelected }
+												face={ face }
+												key={ `face${ i }` }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+							</VStack>
+						</Navigator.Screen>
+					</Navigator>
+
+					<HStack
+						justify="flex-end"
+						className="font-library-modal__footer"
+					>
+						{ isInstalling && <ProgressBar /> }
+						{ shouldDisplayDeleteButton && (
+							<Button
+								__next40pxDefaultSize
+								isDestructive
+								variant="tertiary"
+								onClick={ handleUninstallClick }
+							>
+								{ __( 'Delete' ) }
+							</Button>
+						) }
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ handleUpdate }
+							disabled={ ! fontFamiliesHasChanges }
+							accessibleWhenDisabled
+						>
+							{ __( 'Update' ) }
+						</Button>
+					</HStack>
+				</>
+			) }
+		</div>
+	);
+}
+
+function ConfirmDeleteDialog( {
+	font,
+	isOpen,
+	setIsOpen,
+	setNotice,
+	uninstallFontFamily,
+	handleSetLibraryFontSelected,
+} ) {
+	const navigator = useNavigator();
+
+	const handleConfirmUninstall = async () => {
+		setNotice( null );
+		setIsOpen( false );
+		try {
+			await uninstallFontFamily( font );
+			navigator.goBack();
+			handleSetLibraryFontSelected( null );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family uninstalled successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error uninstalling the font family.' ) +
+					error.message,
+			} );
+		}
+	};
+
+	const handleCancelUninstall = () => {
+		setIsOpen( false );
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+			size="medium"
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Are you sure you want to delete "%s" font and all its variants and assets?'
+					),
+					font.name
+				) }
+		</ConfirmDialog>
+	);
+}
+
+export default InstalledFonts;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js
new file mode 100644
index 00000000000000..57ed50f5bfa240
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-details.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
+
+function LibraryFontDetails( { font } ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? sortFontFaces( font.fontFace )
+			: [
+					{
+						fontFamily: font.fontFamily,
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+			  ];
+
+	return (
+		<>
+			<Spacer margin={ 4 } />
+			<VStack spacing={ 0 }>
+				<Spacer margin={ 8 } />
+				{ fontFaces.map( ( face, i ) => (
+					<LibraryFontVariant
+						font={ font }
+						face={ face }
+						key={ `face${ i }` }
+					/>
+				) ) }
+			</VStack>
+			<Spacer margin={ 8 } />
+		</>
+	);
+}
+
+export default LibraryFontDetails;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
new file mode 100644
index 00000000000000..2f84bd1f2c749c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+import { FontLibraryContext } from './context';
+import FontDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
+function LibraryFontVariant( { face, font } ) {
+	const { isFontActivated, toggleActivateFont } =
+		useContext( FontLibraryContext );
+
+	const isInstalled =
+		font?.fontFace?.length > 0
+			? isFontActivated(
+					font.slug,
+					face.fontStyle,
+					face.fontWeight,
+					font.source
+			  )
+			: isFontActivated( font.slug, null, null, font.source );
+
+	const handleToggleActivation = () => {
+		if ( font?.fontFace?.length > 0 ) {
+			toggleActivateFont( font, face );
+			return;
+		}
+		toggleActivateFont( font );
+	};
+
+	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
+
+	return (
+		<div className="font-library-modal__font-card">
+			<Flex justify="flex-start" align="center" gap="1rem">
+				<CheckboxControl
+					checked={ isInstalled }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom
+					id={ checkboxId }
+				/>
+				<label htmlFor={ checkboxId }>
+					<FontDemo
+						font={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
+			</Flex>
+		</div>
+	);
+}
+
+export default LibraryFontVariant;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
new file mode 100644
index 00000000000000..a114630cfc08d1
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+const FONT_FAMILIES_URL = '/wp/v2/font-families';
+const FONT_COLLECTIONS_URL = '/wp/v2/font-collections';
+
+export async function fetchInstallFontFamily( data ) {
+	const config = {
+		path: FONT_FAMILIES_URL,
+		method: 'POST',
+		body: data,
+	};
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_family_settings,
+		fontFace: [],
+	};
+}
+
+export async function fetchInstallFontFace( fontFamilyId, data ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,
+		method: 'POST',
+		body: data,
+	};
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_face_settings,
+	};
+}
+
+export async function fetchGetFontFamilyBySlug( slug ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,
+		method: 'GET',
+	};
+	const response = await apiFetch( config );
+	if ( ! response || response.length === 0 ) {
+		return null;
+	}
+	const fontFamilyPost = response[ 0 ];
+	return {
+		id: fontFamilyPost.id,
+		...fontFamilyPost.font_family_settings,
+		fontFace:
+			fontFamilyPost?._embedded?.font_faces.map(
+				( face ) => face.font_face_settings
+			) || [],
+	};
+}
+
+export async function fetchUninstallFontFamily( fontFamilyId ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,
+		method: 'DELETE',
+	};
+	return await apiFetch( config );
+}
+
+export async function fetchFontCollections() {
+	const config = {
+		path: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,
+		method: 'GET',
+	};
+	return await apiFetch( config );
+}
+
+export async function fetchFontCollection( id ) {
+	const config = {
+		path: `${ FONT_COLLECTIONS_URL }/${ id }`,
+		method: 'GET',
+	};
+	return await apiFetch( config );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
new file mode 100644
index 00000000000000..7568fea2b6f805
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -0,0 +1,215 @@
+// Fixed height for the modal footer.
+// Ensures that the footer is always visible when the modal content is scrollable.
+$footer-height: 70px;
+
+.font-library-modal {
+	// @todo If a new prop is added to the Modal component that constrains
+	// the content width, we should use that prop instead of this style.
+	// see https://github.com/WordPress/gutenberg/issues/54471.
+	&.font-library-modal {
+		@include break-medium() {
+			width: 65vw;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content {
+		padding-top: 0;
+		margin-bottom: $footer-height;
+	}
+
+	.font-library-modal__subtitle {
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 11px;
+	}
+
+	// Add padding so the focus state outline (box-shadow) of font list items is visible
+	.components-navigator-screen {
+		padding: 3px;
+	}
+}
+
+.font-library-modal__tabpanel-layout {
+	margin-top: $grid-unit-40;
+
+	.font-library-modal__loading {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		position: absolute;
+		left: 0;
+		top: 0;
+		align-items: center;
+		justify-content: center;
+		// Push down so that the progress bar is centered vertically.
+		// It should be 120px (72px modal header height + 48px tab height)
+		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
+	}
+}
+
+.font-library-modal__footer {
+	border-top: 1px solid $gray-300;
+	margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+	padding: $grid-unit-20 $grid-unit-40;
+	position: absolute;
+	bottom: $grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: $white;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
+}
+
+// TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
+.font-library-modal__tabpanel-layout .components-base-control__field {
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-title {
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+	margin-bottom: 0;
+}
+
+.font-library-modal__font-card {
+	border: $border-width solid $gray-200;
+	width: 100%;
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756147260
+	height: auto !important;
+
+	padding: $grid-unit-20;
+	margin-top: -1px; /* To collapse the margin with the previous element */
+
+	&:hover {
+		background-color: $gray-100;
+	}
+
+	.font-library-modal__font-card__name {
+		font-weight: bold;
+	}
+
+	.font-library-modal__font-card__count {
+		color: $gray-700;
+	}
+
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: $grid-unit-30;
+		width: auto;
+	}
+
+	.font-library-modal__font-variant_demo-text {
+		white-space: nowrap;
+		flex-shrink: 0;
+		transition: opacity 0.3s ease-in-out;
+		@include reduce-motion( "transition" );
+	}
+}
+
+.font-library-modal__font-variant {
+	border-bottom: 1px solid $gray-200;
+	padding-bottom: $grid-unit-20;
+}
+
+.font-library-modal__tablist-container {
+	position: sticky;
+	top: 0;
+	border-bottom: 1px solid $gray-300;
+	background: $white;
+	margin: 0 #{$grid-unit-40 * -1};
+	padding: 0 $grid-unit-20;
+	z-index: 1;
+
+	[role="tablist"] {
+		margin-bottom: -1px;
+	}
+}
+
+.font-library-modal__upload-area {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756155039
+	height: $grid-unit-80 * 4 !important; // 256px
+
+	width: 100%;
+}
+
+button.font-library-modal__upload-area {
+	background-color: $gray-100;
+}
+
+.font-library-modal__local-fonts {
+	margin: 0 auto;
+	width: 80%;
+
+	.font-library-modal__upload-area__text {
+		color: $gray-700;
+	}
+}
+
+.font-library__google-fonts-confirm {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: $grid-unit-80;
+
+	p {
+		line-height: $default-line-height;
+	}
+
+	h2 {
+		font-size: 1.2rem;
+		font-weight: 400;
+	}
+
+	.components-card {
+		padding: $grid-unit-20;
+		width: 400px;
+	}
+
+	.components-button {
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+.font-library-modal__select-all {
+	padding:
+		$grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 +
+		$border-width;
+
+	.components-checkbox-control__label {
+		padding-left: $grid-unit-20;
+	}
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
new file mode 100644
index 00000000000000..807f2aa354c25a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -0,0 +1,253 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
+	FormFileUpload,
+	FlexItem,
+	ProgressBar,
+} from '@wordpress/components';
+import { useContext, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+import { FontLibraryContext } from './context';
+import { Font } from '../../../../lib/lib-font.browser';
+import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
+
+function UploadFonts() {
+	const { installFonts } = useContext( FontLibraryContext );
+	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
+
+	const handleDropZone = ( files ) => {
+		handleFilesUpload( files );
+	};
+	const onFilesUpload = ( event ) => {
+		handleFilesUpload( event.target.files );
+	};
+
+	/**
+	 * Filters the selected files to only allow the ones with the allowed extensions
+	 *
+	 * @param {Array} files The files to be filtered
+	 * @return {void}
+	 */
+	const handleFilesUpload = async ( files ) => {
+		setNotice( null );
+		setIsUploading( true );
+		const uniqueFilenames = new Set();
+		const selectedFiles = [ ...files ];
+		let hasInvalidFiles = false;
+
+		// Use map to create a promise for each file check, then filter with Promise.all.
+		const checkFilesPromises = selectedFiles.map( async ( file ) => {
+			const isFont = await isFontFile( file );
+			if ( ! isFont ) {
+				hasInvalidFiles = true;
+				return null; // Return null for invalid files.
+			}
+			// Check for duplicates
+			if ( uniqueFilenames.has( file.name ) ) {
+				return null; // Return null for duplicates.
+			}
+			// Check if the file extension is allowed.
+			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
+			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
+				uniqueFilenames.add( file.name );
+				return file; // Return the file if it passes all checks.
+			}
+			return null; // Return null for disallowed file extensions.
+		} );
+
+		// Filter out the nulls after all promises have resolved.
+		const allowedFiles = ( await Promise.all( checkFilesPromises ) ).filter(
+			( file ) => null !== file
+		);
+
+		if ( allowedFiles.length > 0 ) {
+			loadFiles( allowedFiles );
+		} else {
+			const message = hasInvalidFiles
+				? __( 'Sorry, you are not allowed to upload this file type.' )
+				: __( 'No fonts found to install.' );
+
+			setNotice( {
+				type: 'error',
+				message,
+			} );
+			setIsUploading( false );
+		}
+	};
+
+	/**
+	 * Loads the selected files and reads the font metadata
+	 *
+	 * @param {Array} files The files to be loaded
+	 * @return {void}
+	 */
+	const loadFiles = async ( files ) => {
+		const fontFacesLoaded = await Promise.all(
+			files.map( async ( fontFile ) => {
+				const fontFaceData = await getFontFaceMetadata( fontFile );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
+				return fontFaceData;
+			} )
+		);
+		handleInstall( fontFacesLoaded );
+	};
+
+	/**
+	 * Checks if a file is a valid Font file.
+	 *
+	 * @param {File} file The file to be checked.
+	 * @return {boolean} Whether the file is a valid font file.
+	 */
+	async function isFontFile( file ) {
+		const font = new Font( 'Uploaded Font' );
+		try {
+			const buffer = await readFileAsArrayBuffer( file );
+			await font.fromDataBuffer( buffer, 'font' );
+			return true;
+		} catch ( error ) {
+			return false;
+		}
+	}
+
+	// Create a function to read the file as array buffer
+	async function readFileAsArrayBuffer( file ) {
+		return new Promise( ( resolve, reject ) => {
+			const reader = new window.FileReader();
+			reader.readAsArrayBuffer( file );
+			reader.onload = () => resolve( reader.result );
+			reader.onerror = reject;
+		} );
+	}
+
+	const getFontFaceMetadata = async ( fontFile ) => {
+		const buffer = await readFileAsArrayBuffer( fontFile );
+		const fontObj = new Font( 'Uploaded Font' );
+		fontObj.fromDataBuffer( buffer, fontFile.name );
+		// Assuming that fromDataBuffer triggers onload event and returning a Promise
+		const onloadEvent = await new Promise(
+			( resolve ) => ( fontObj.onload = resolve )
+		);
+		const font = onloadEvent.detail.font;
+		const { name } = font.opentype.tables;
+		const fontName = name.get( 16 ) || name.get( 1 );
+		const isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );
+		const fontWeight =
+			font.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';
+		const isVariable = !! font.opentype.tables.fvar;
+		const weightAxis =
+			isVariable &&
+			font.opentype.tables.fvar.axes.find(
+				( { tag } ) => tag === 'wght'
+			);
+		const weightRange = weightAxis
+			? `${ weightAxis.minValue } ${ weightAxis.maxValue }`
+			: null;
+		return {
+			file: fontFile,
+			fontFamily: fontName,
+			fontStyle: isItalic ? 'italic' : 'normal',
+			fontWeight: weightRange || fontWeight,
+		};
+	};
+
+	/**
+	 * Creates the font family definition and sends it to the server
+	 *
+	 * @param {Array} fontFaces The font faces to be installed
+	 * @return {void}
+	 */
+	const handleInstall = async ( fontFaces ) => {
+		const fontFamilies = makeFamiliesFromFaces( fontFaces );
+
+		try {
+			await installFonts( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: error.message,
+				errors: error?.installationErrors,
+			} );
+		}
+
+		setIsUploading( false );
+	};
+
+	return (
+		<div className="font-library-modal__tabpanel-layout">
+			<DropZone onFilesDrop={ handleDropZone } />
+			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						__unstableHTML
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+						{ notice.errors && (
+							<ul>
+								{ notice.errors.map( ( error, index ) => (
+									<li key={ index }>{ error }</li>
+								) ) }
+							</ul>
+						) }
+					</Notice>
+				) }
+				{ isUploading && (
+					<FlexItem>
+						<div className="font-library-modal__upload-area">
+							<ProgressBar />
+						</div>
+					</FlexItem>
+				) }
+				{ ! isUploading && (
+					<FormFileUpload
+						accept={ ALLOWED_FILE_EXTENSIONS.map(
+							( ext ) => `.${ ext }`
+						).join( ',' ) }
+						multiple
+						onChange={ onFilesUpload }
+						render={ ( { openFileDialog } ) => (
+							<Button
+								__next40pxDefaultSize
+								className="font-library-modal__upload-area"
+								onClick={ openFileDialog }
+							>
+								{ __( 'Upload font' ) }
+							</Button>
+						) }
+					/>
+				) }
+				<Spacer margin={ 2 } />
+				<Text className="font-library-modal__upload-area__text">
+					{ __(
+						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
+					) }
+				</Text>
+			</VStack>
+		</div>
+	);
+}
+
+export default UploadFonts;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js
new file mode 100644
index 00000000000000..4b2b9d1f5fc11e
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/constants.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
+
+export const FONT_WEIGHTS = {
+	100: _x( 'Thin', 'font weight' ),
+	200: _x( 'Extra-light', 'font weight' ),
+	300: _x( 'Light', 'font weight' ),
+	400: _x( 'Normal', 'font weight' ),
+	500: _x( 'Medium', 'font weight' ),
+	600: _x( 'Semi-bold', 'font weight' ),
+	700: _x( 'Bold', 'font weight' ),
+	800: _x( 'Extra-bold', 'font weight' ),
+	900: _x( 'Black', 'font weight' ),
+};
+
+export const FONT_STYLES = {
+	normal: _x( 'Normal', 'font style' ),
+	italic: _x( 'Italic', 'font style' ),
+};
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js
new file mode 100644
index 00000000000000..e493a70197acee
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/filter-fonts.js
@@ -0,0 +1,35 @@
+/**
+ * Filters a list of fonts based on the specified filters.
+ *
+ * This function filters a given array of fonts based on the criteria provided in the filters object.
+ * It supports filtering by category and a search term. If the category is provided and not equal to 'all',
+ * the function filters the fonts array to include only those fonts that belong to the specified category.
+ * Additionally, if a search term is provided, it filters the fonts array to include only those fonts
+ * whose name includes the search term, case-insensitively.
+ *
+ * @param {Array}  fonts   Array of font objects in font-collection schema fashion to be filtered. Each font object should have a 'categories' property and a 'font_family_settings' property with a 'name' key.
+ * @param {Object} filters Object containing the filter criteria. It should have a 'category' key and/or a 'search' key.
+ *                         The 'category' key is a string representing the category to filter by.
+ *                         The 'search' key is a string representing the search term to filter by.
+ * @return {Array} Array of filtered font objects based on the provided criteria.
+ */
+export default function filterFonts( fonts, filters ) {
+	const { category, search } = filters;
+	let filteredFonts = fonts || [];
+
+	if ( category && category !== 'all' ) {
+		filteredFonts = filteredFonts.filter(
+			( font ) => font.categories.indexOf( category ) !== -1
+		);
+	}
+
+	if ( search ) {
+		filteredFonts = filteredFonts.filter( ( font ) =>
+			font.font_family_settings.name
+				.toLowerCase()
+				.includes( search.toLowerCase() )
+		);
+	}
+
+	return filteredFonts;
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
new file mode 100644
index 00000000000000..bef9353e943505
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js
@@ -0,0 +1,22 @@
+export function getFontsOutline( fonts ) {
+	return fonts.reduce(
+		( acc, font ) => ( {
+			...acc,
+			[ font.slug ]: ( font?.fontFace || [] ).reduce(
+				( faces, face ) => ( {
+					...faces,
+					[ `${ face.fontStyle }-${ face.fontWeight }` ]: true,
+				} ),
+				{}
+			),
+		} ),
+		{}
+	);
+}
+
+export function isFontFontFaceInOutline( slug, face, outline ) {
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
new file mode 100644
index 00000000000000..1ca7bb68c87a06
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js
@@ -0,0 +1,333 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { unlock } from '../../../../lock-unlock';
+import { fetchInstallFontFace } from '../resolvers';
+import { formatFontFaceName } from './preview-styles';
+
+/**
+ * Browser dependencies
+ */
+const { File } = window;
+const { kebabCase } = unlock( componentsPrivateApis );
+
+export function setUIValuesNeeded( font, extraValues = {} ) {
+	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
+		font.name = font.fontFamily || font.slug;
+	}
+	return {
+		...font,
+		...extraValues,
+	};
+}
+
+export function isUrlEncoded( url ) {
+	if ( typeof url !== 'string' ) {
+		return false;
+	}
+	return url !== decodeURIComponent( url );
+}
+
+export function getFontFaceVariantName( face ) {
+	const weightName = FONT_WEIGHTS[ face.fontWeight ] || face.fontWeight;
+	const styleName =
+		face.fontStyle === 'normal'
+			? ''
+			: FONT_STYLES[ face.fontStyle ] || face.fontStyle;
+	return `${ weightName } ${ styleName }`;
+}
+
+export function mergeFontFaces( existing = [], incoming = [] ) {
+	const map = new Map();
+	for ( const face of existing ) {
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	for ( const face of incoming ) {
+		// This will overwrite if the src already exists, keeping it unique.
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	return Array.from( map.values() );
+}
+
+export function mergeFontFamilies( existing = [], incoming = [] ) {
+	const map = new Map();
+	// Add the existing array to the map.
+	for ( const font of existing ) {
+		map.set( font.slug, { ...font } );
+	}
+	// Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.
+	for ( const font of incoming ) {
+		if ( map.has( font.slug ) ) {
+			const { fontFace: incomingFontFaces, ...restIncoming } = font;
+			const existingFont = map.get( font.slug );
+			// Merge the fontFaces existing with the incoming fontFaces.
+			const mergedFontFaces = mergeFontFaces(
+				existingFont.fontFace,
+				incomingFontFaces
+			);
+			// Except for the fontFace key all the other keys are overwritten with the incoming values.
+			map.set( font.slug, {
+				...restIncoming,
+				fontFace: mergedFontFaces,
+			} );
+		} else {
+			map.set( font.slug, { ...font } );
+		}
+	}
+	return Array.from( map.values() );
+}
+
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
+	let dataSource;
+
+	if ( typeof source === 'string' ) {
+		dataSource = `url(${ source })`;
+		// eslint-disable-next-line no-undef
+	} else if ( source instanceof File ) {
+		dataSource = await source.arrayBuffer();
+	} else {
+		return;
+	}
+
+	const newFont = new window.FontFace(
+		formatFontFaceName( fontFace.fontFamily ),
+		dataSource,
+		{
+			style: fontFace.fontStyle,
+			weight: fontFace.fontWeight,
+		}
+	);
+
+	const loadedFace = await newFont.load();
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		document.fonts.add( loadedFace );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		iframeDocument.fonts.add( loadedFace );
+	}
+}
+
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser( fontFace, removeFrom = 'all' ) {
+	const unloadFontFace = ( fonts ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === formatFontFaceName( fontFace?.fontFamily ) &&
+				f.weight === fontFace?.fontWeight &&
+				f.style === fontFace?.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( removeFrom === 'document' || removeFrom === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		unloadFontFace( iframeDocument.fonts );
+	}
+}
+
+/**
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace( input ) {
+	if ( ! input ) {
+		return;
+	}
+
+	let src;
+	if ( Array.isArray( input ) ) {
+		src = input[ 0 ];
+	} else {
+		src = input;
+	}
+	// It's expected theme fonts will already be loaded in the browser.
+	if ( src.startsWith( 'file:.' ) ) {
+		return;
+	}
+	if ( ! isUrlEncoded( src ) ) {
+		src = encodeURI( src );
+	}
+	return src;
+}
+
+export function makeFontFamilyFormData( fontFamily ) {
+	const formData = new FormData();
+
+	const { fontFace, category, ...familyWithValidParameters } = fontFamily;
+	const fontFamilySettings = {
+		...familyWithValidParameters,
+		slug: kebabCase( fontFamily.slug ),
+	};
+
+	formData.append(
+		'font_family_settings',
+		JSON.stringify( fontFamilySettings )
+	);
+	return formData;
+}
+
+export function makeFontFacesFormData( font ) {
+	if ( font?.fontFace ) {
+		const fontFacesFormData = font.fontFace.map( ( item, faceIndex ) => {
+			const face = { ...item };
+			const formData = new FormData();
+			if ( face.file ) {
+				// Normalize to an array, since face.file may be a single file or an array of files.
+				const files = Array.isArray( face.file )
+					? face.file
+					: [ face.file ];
+				const src = [];
+
+				files.forEach( ( file, key ) => {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ faceIndex }-${ key }`;
+					// Add the files to the formData
+					formData.append( fileId, file, file.name );
+					src.push( fileId );
+				} );
+
+				face.src = src.length === 1 ? src[ 0 ] : src;
+				delete face.file;
+
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
+			} else {
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
+			}
+			return formData;
+		} );
+
+		return fontFacesFormData;
+	}
+}
+
+export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
+	const responses = [];
+
+	/*
+	 * Uses the same response format as Promise.allSettled, but executes requests in sequence to work
+	 * around a race condition that can cause an error when the fonts directory doesn't exist yet.
+	 */
+	for ( const faceData of fontFacesData ) {
+		try {
+			const response = await fetchInstallFontFace(
+				fontFamilyId,
+				faceData
+			);
+			responses.push( { status: 'fulfilled', value: response } );
+		} catch ( error ) {
+			responses.push( { status: 'rejected', reason: error } );
+		}
+	}
+
+	const results = {
+		errors: [],
+		successes: [],
+	};
+
+	responses.forEach( ( result, index ) => {
+		if ( result.status === 'fulfilled' ) {
+			const response = result.value;
+			if ( response.id ) {
+				results.successes.push( response );
+			} else {
+				results.errors.push( {
+					data: fontFacesData[ index ],
+					message: `Error: ${ response.message }`,
+				} );
+			}
+		} else {
+			// Handle network errors or other fetch-related errors
+			results.errors.push( {
+				data: fontFacesData[ index ],
+				message: result.reason.message,
+			} );
+		}
+	} );
+
+	return results;
+}
+
+/*
+ * Downloads a font face asset from a URL to the client and returns a File object.
+ */
+export async function downloadFontFaceAssets( src ) {
+	// Normalize to an array, since `src` could be a string or array.
+	src = Array.isArray( src ) ? src : [ src ];
+
+	const files = await Promise.all(
+		src.map( async ( url ) => {
+			return fetch( new Request( url ) )
+				.then( ( response ) => {
+					if ( ! response.ok ) {
+						throw new Error(
+							`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
+						);
+					}
+					return response.blob();
+				} )
+				.then( ( blob ) => {
+					const filename = url.split( '/' ).pop();
+					const file = new File( [ blob ], filename, {
+						type: blob.type,
+					} );
+					return file;
+				} );
+		} )
+	);
+
+	// If we only have one file return it (not the array).  Otherwise return all of them in the array.
+	return files.length === 1 ? files[ 0 ] : files;
+}
+
+/*
+ * Determine if a given Font Face is present in a given collection.
+ * We determine that a font face has been installed by comparing the fontWeight and fontStyle
+ *
+ * @param {Object} fontFace The Font Face to seek
+ * @param {Array} collection The Collection to seek in
+ * @returns True if the font face is found in the collection.  Otherwise False.
+ */
+export function checkFontFaceInstalled( fontFace, collection ) {
+	return (
+		-1 !==
+		collection.findIndex( ( collectionFontFace ) => {
+			return (
+				collectionFontFace.fontWeight === fontFace.fontWeight &&
+				collectionFontFace.fontStyle === fontFace.fontStyle
+			);
+		} )
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js
new file mode 100644
index 00000000000000..7cdbf405c0b5bc
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
+export default function makeFamiliesFromFaces( fontFaces ) {
+	const fontFamiliesObject = fontFaces.reduce( ( acc, item ) => {
+		if ( ! acc[ item.fontFamily ] ) {
+			acc[ item.fontFamily ] = {
+				name: item.fontFamily,
+				fontFamily: item.fontFamily,
+				slug: kebabCase( item.fontFamily.toLowerCase() ),
+				fontFace: [],
+			};
+		}
+		acc[ item.fontFamily ].fontFace.push( item );
+		return acc;
+	}, {} );
+	return Object.values( fontFamiliesObject );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js
new file mode 100644
index 00000000000000..d0b5d1389d8019
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js
@@ -0,0 +1,152 @@
+function findNearest( input, numbers ) {
+	// If the numbers array is empty, return null
+	if ( numbers.length === 0 ) {
+		return null;
+	}
+	// Sort the array based on the absolute difference with the input
+	numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
+	// Return the first element (which will be the nearest) from the sorted array
+	return numbers[ 0 ];
+}
+
+function extractFontWeights( fontFaces ) {
+	const result = [];
+
+	fontFaces.forEach( ( face ) => {
+		const weights = String( face.fontWeight ).split( ' ' );
+
+		if ( weights.length === 2 ) {
+			const start = parseInt( weights[ 0 ] );
+			const end = parseInt( weights[ 1 ] );
+
+			for ( let i = start; i <= end; i += 100 ) {
+				result.push( i );
+			}
+		} else if ( weights.length === 1 ) {
+			result.push( parseInt( weights[ 0 ] ) );
+		}
+	} );
+
+	return result;
+}
+
+/*
+ * Format the font family to use in the CSS font-family property of a CSS rule.
+ *
+ * The input can be a string with the font family name or a string with multiple font family names separated by commas.
+ * It follows the recommendations from the CSS Fonts Module Level 4.
+ * https://www.w3.org/TR/css-fonts-4/#font-family-prop
+ *
+ * @param {string} input - The font family.
+ * @return {string} The formatted font family.
+ *
+ * Example:
+ * formatFontFamily( "Open Sans, Font+Name, sans-serif" ) => '"Open Sans", "Font+Name", sans-serif'
+ * formatFontFamily( "'Open Sans', generic(kai), sans-serif" ) => '"Open Sans", sans-serif'
+ * formatFontFamily( "DotGothic16, Slabo 27px, serif" ) => '"DotGothic16","Slabo 27px",serif'
+ * formatFontFamily( "Mine's, Moe's Typography" ) => `"mine's","Moe's Typography"`
+ */
+export function formatFontFamily( input ) {
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+	const output = input.trim();
+
+	const formatItem = ( item ) => {
+		item = item.trim();
+		if ( item.match( regex ) ) {
+			// removes leading and trailing quotes.
+			item = item.replace( /^["']|["']$/g, '' );
+			return `"${ item }"`;
+		}
+		return item;
+	};
+
+	if ( output.includes( ',' ) ) {
+		return output
+			.split( ',' )
+			.map( formatItem )
+			.filter( ( item ) => item !== '' )
+			.join( ', ' );
+	}
+
+	return formatItem( output );
+}
+
+/*
+ * Format the font face name to use in the font-family property of a font face.
+ *
+ * The input can be a string with the font face name or a string with multiple font face names separated by commas.
+ * It removes the leading and trailing quotes from the font face name.
+ *
+ * @param {string} input - The font face name.
+ * @return {string} The formatted font face name.
+ *
+ * Example:
+ * formatFontFaceName("Open Sans") => "Open Sans"
+ * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ */
+export function formatFontFaceName( input ) {
+	if ( ! input ) {
+		return '';
+	}
+
+	let output = input.trim();
+	if ( output.includes( ',' ) ) {
+		output = output
+			.split( ',' )
+			// finds the first item that is not an empty string.
+			.find( ( item ) => item.trim() !== '' )
+			.trim();
+	}
+	// removes leading and trailing quotes.
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
+}
+
+export function getFamilyPreviewStyle( family ) {
+	const style = { fontFamily: formatFontFamily( family.fontFamily ) };
+
+	if ( ! Array.isArray( family.fontFace ) ) {
+		style.fontWeight = '400';
+		style.fontStyle = 'normal';
+		return style;
+	}
+
+	if ( family.fontFace ) {
+		//get all the font faces with normal style
+		const normalFaces = family.fontFace.filter(
+			( face ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
+		);
+		if ( normalFaces.length > 0 ) {
+			style.fontStyle = 'normal';
+			const normalWeights = extractFontWeights( normalFaces );
+			const nearestWeight = findNearest( 400, normalWeights );
+			style.fontWeight = String( nearestWeight ) || '400';
+		} else {
+			style.fontStyle =
+				( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
+				'normal';
+			style.fontWeight =
+				( family.fontFace.length &&
+					String( family.fontFace[ 0 ].fontWeight ) ) ||
+				'400';
+		}
+	}
+
+	return style;
+}
+
+export function getFacePreviewStyle( face ) {
+	return {
+		fontFamily: formatFontFamily( face.fontFamily ),
+		fontStyle: face.fontStyle || 'normal',
+		fontWeight: face.fontWeight || '400',
+	};
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js
new file mode 100644
index 00000000000000..69798112f07d3f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/sort-font-faces.js
@@ -0,0 +1,37 @@
+function getNumericFontWeight( value ) {
+	switch ( value ) {
+		case 'normal':
+			return 400;
+		case 'bold':
+			return 700;
+		case 'bolder':
+			return 500;
+		case 'lighter':
+			return 300;
+		default:
+			return parseInt( value, 10 );
+	}
+}
+
+export function sortFontFaces( faces ) {
+	return faces.sort( ( a, b ) => {
+		// Ensure 'normal' fontStyle is always first
+		if ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) {
+			return -1;
+		}
+		if ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) {
+			return 1;
+		}
+
+		// If both fontStyles are the same, sort by fontWeight
+		if ( a.fontStyle === b.fontStyle ) {
+			return (
+				getNumericFontWeight( a.fontWeight ) -
+				getNumericFontWeight( b.fontWeight )
+			);
+		}
+
+		// Sort other fontStyles alphabetically
+		return a.fontStyle.localeCompare( b.fontStyle );
+	} );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js
new file mode 100644
index 00000000000000..cd32e2b68f9cd1
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js
@@ -0,0 +1,99 @@
+/**
+ * Internal dependencies
+ */
+import filterFonts from '../filter-fonts';
+
+describe( 'filterFonts', () => {
+	const mockFonts = [
+		{
+			font_family_settings: { name: 'Arial' },
+			categories: [ 'sans-serif' ],
+		},
+		{
+			font_family_settings: { name: 'Arial Condensed' },
+			categories: [ 'sans-serif' ],
+		},
+		{
+			font_family_settings: { name: 'Times New Roman' },
+			categories: [ 'serif' ],
+		},
+		{
+			font_family_settings: { name: 'Courier New' },
+			categories: [ 'monospace' ],
+		},
+		{
+			font_family_settings: { name: 'Romantic' },
+			categories: [ 'cursive' ],
+		},
+	];
+
+	it( 'should return all fonts if no filters are provided', () => {
+		const result = filterFonts( mockFonts, {} );
+		expect( result ).toEqual( mockFonts );
+	} );
+
+	it( 'should filter by category', () => {
+		const result = filterFonts( mockFonts, { category: 'serif' } );
+		expect( result ).toEqual( [
+			{
+				font_family_settings: { name: 'Times New Roman' },
+				categories: [ 'serif' ],
+			},
+		] );
+	} );
+
+	it( 'should return all fonts if category is "all"', () => {
+		const result = filterFonts( mockFonts, { category: 'all' } );
+		expect( result ).toEqual( mockFonts );
+	} );
+
+	it( 'should filter by search', () => {
+		const result = filterFonts( mockFonts, { search: 'ari' } );
+		expect( result ).toEqual( [
+			{
+				font_family_settings: { name: 'Arial' },
+				categories: [ 'sans-serif' ],
+			},
+			{
+				font_family_settings: { name: 'Arial Condensed' },
+				categories: [ 'sans-serif' ],
+			},
+		] );
+	} );
+
+	it( 'should be case insensitive when filtering by search', () => {
+		const result = filterFonts( mockFonts, { search: 'RoMANtic' } );
+		expect( result ).toEqual( [
+			{
+				font_family_settings: { name: 'Romantic' },
+				categories: [ 'cursive' ],
+			},
+		] );
+	} );
+
+	it( 'should filter by both category and search', () => {
+		const result = filterFonts( mockFonts, {
+			category: 'serif',
+			search: 'Times',
+		} );
+		expect( result ).toEqual( [
+			{
+				font_family_settings: { name: 'Times New Roman' },
+				categories: [ 'serif' ],
+			},
+		] );
+	} );
+
+	it( 'should return an empty array if no fonts match the filter criteria', () => {
+		const result = filterFonts( mockFonts, {
+			category: 'serif',
+			search: 'Arial',
+		} );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should return an empty array if fonts array is not provided', () => {
+		const result = filterFonts( undefined, { category: 'serif' } );
+		expect( result ).toEqual( [] );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js
new file mode 100644
index 00000000000000..24d9f05d028910
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/fonts-outline.spec.js
@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import { getFontsOutline, isFontFontFaceInOutline } from '../fonts-outline';
+
+describe( 'getFontsOutline', () => {
+	test( 'should return an empty object for an empty fonts array', () => {
+		const fonts = [];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {} );
+	} );
+
+	test( 'should handle fonts with no fontFace property', () => {
+		const fonts = [
+			{ slug: 'font1' },
+			{
+				slug: 'font2',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+			},
+		];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {},
+			font2: { 'normal-400': true },
+		} );
+	} );
+
+	test( 'should handle fonts with an empty fontFace array', () => {
+		const fonts = [ { slug: 'font1', fontFace: [] } ];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {},
+		} );
+	} );
+
+	test( 'should handle fonts with multiple font faces', () => {
+		const fonts = [
+			{
+				slug: 'font1',
+				fontFace: [
+					{ fontStyle: 'normal', fontWeight: '400' },
+					{ fontStyle: 'italic', fontWeight: '700' },
+				],
+			},
+		];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {
+				'normal-400': true,
+				'italic-700': true,
+			},
+		} );
+	} );
+} );
+
+describe( 'isFontFontFaceInOutline', () => {
+	test( 'should return false for an empty outline', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return false when outline has the slug but no matching fontStyle-fontWeight', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font1: {
+				'italic-700': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return false when outline does not have the slug', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font2: {
+				'normal-400': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return true when outline has the slug and the matching fontStyle-fontWeight', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font1: {
+				'normal-400': true,
+				'italic-700': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( true );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js
new file mode 100644
index 00000000000000..3cbdc0283f1a9e
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js
@@ -0,0 +1,42 @@
+/**
+ * Internal dependencies
+ */
+import { getDisplaySrcFromFontFace } from '../index';
+
+describe( 'getDisplaySrcFromFontFace', () => {
+	it( 'returns the first item when input is an array', () => {
+		const input = [
+			'http://example.com/font-asset-1.ttf',
+			'http://example.com/font-asset-2.ttf',
+		];
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'returns the input when it is a string', () => {
+		const input = 'http://example.com/font-asset-1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'return undefined when the url starts with file:', () => {
+		const input = 'file:./theme/assets/font1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe( undefined );
+	} );
+
+	it( 'encodes the URL if it is not encoded', () => {
+		const input = 'https://example.org/font one with spaces.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'https://example.org/font%20one%20with%20spaces.ttf'
+		);
+	} );
+
+	it( 'does not encode the URL if it is already encoded', () => {
+		const input = 'https://example.org/fonts/font%20one.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'https://example.org/fonts/font%20one.ttf'
+		);
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getFontFaceVariantName.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getFontFaceVariantName.spec.js
new file mode 100644
index 00000000000000..21347a342f396a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/getFontFaceVariantName.spec.js
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from '../index';
+
+describe( 'getFontFaceVariantName', () => {
+	it( 'should return "Normal" for fontWeight 400 and fontStyle "normal"', () => {
+		const face = { fontWeight: 400, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal ' );
+	} );
+
+	it( 'should return "Bold Italic" for fontWeight 700 and fontStyle "italic"', () => {
+		const face = { fontWeight: 700, fontStyle: 'italic' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Bold Italic' );
+	} );
+
+	it( 'should return the numerical weight when fontWeight is not recognized', () => {
+		const face = { fontWeight: 150, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( '150 ' );
+	} );
+
+	it( 'should return the raw style when fontStyle is not recognized', () => {
+		const face = { fontWeight: 400, fontStyle: 'oblique' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal oblique' );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/isUrlEncoded.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/isUrlEncoded.spec.js
new file mode 100644
index 00000000000000..797a8c9febd0f8
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/isUrlEncoded.spec.js
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { isUrlEncoded } from '../index';
+
+describe( 'isUrlEncoded', () => {
+	// Test when input is not a string
+	it( 'should return false if the input is not a string', () => {
+		expect( isUrlEncoded( 123 ) ).toBe( false );
+		expect( isUrlEncoded( null ) ).toBe( false );
+		expect( isUrlEncoded( undefined ) ).toBe( false );
+		expect( isUrlEncoded( {} ) ).toBe( false );
+		expect( isUrlEncoded( [] ) ).toBe( false );
+	} );
+
+	// Test when URL is not encoded
+	it( 'should return false for non-encoded URLs', () => {
+		expect( isUrlEncoded( 'http://example.com' ) ).toBe( false );
+		expect( isUrlEncoded( 'https://www.google.com' ) ).toBe( false );
+		expect( isUrlEncoded( '/path/to/resource' ) ).toBe( false );
+		expect( isUrlEncoded( '' ) ).toBe( false );
+	} );
+
+	// Test when URL is encoded
+	it( 'should return true for encoded URLs', () => {
+		expect( isUrlEncoded( 'http%3A%2F%2Fexample.com' ) ).toBe( true );
+		expect( isUrlEncoded( 'https%3A%2F%2Fwww.google.com' ) ).toBe( true );
+		expect( isUrlEncoded( '%2Fpath%2Fto%2Fresource' ) ).toBe( true );
+		expect( isUrlEncoded( '%20' ) ).toBe( true );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFamiliesFromFaces.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFamiliesFromFaces.spec.js
new file mode 100644
index 00000000000000..b8e147116ea6ac
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/makeFamiliesFromFaces.spec.js
@@ -0,0 +1,57 @@
+/**
+ * Internal dependencies
+ */
+import makeFamiliesFromFaces from '../make-families-from-faces';
+
+describe( 'makeFamiliesFromFaces', () => {
+	it( 'handles empty fontFaces list', () => {
+		const result = makeFamiliesFromFaces( [] );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'groups fontFaces by fontFamily', () => {
+		const fontFaces = [
+			{ fontFamily: 'Lobster' },
+			{
+				fontFamily: 'Piazzolla',
+				file: { name: 'piazzolla.ttf' },
+			},
+			{ fontFamily: 'Lobster', file: { name: 'piazzolla.ttf' } },
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+
+		expect( result ).toHaveLength( 2 );
+		expect(
+			result.find( ( family ) => family.name === 'Lobster' ).fontFace
+		).toHaveLength( 2 );
+		expect(
+			result.find( ( family ) => family.name === 'Piazzolla' ).fontFace
+		).toHaveLength( 1 );
+	} );
+
+	it( 'generates correct name for fontFamily names', () => {
+		const fontFaces = [
+			{
+				fontFamily: 'Piazzolla',
+				file: { name: 'piazzolla.ttf' },
+			},
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+		expect( result[ 0 ].name ).toBe( 'Piazzolla' );
+	} );
+
+	it( 'generates correct slug for fontFamily names', () => {
+		const fontFaces = [
+			{
+				fontFamily: 'Times New Roman',
+				file: { name: 'times.ttf' },
+			},
+		];
+
+		const result = makeFamiliesFromFaces( fontFaces );
+
+		expect( result[ 0 ].slug ).toBe( 'times-new-roman' );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFaces.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFaces.spec.js
new file mode 100644
index 00000000000000..ea5f2b0353ee9b
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFaces.spec.js
@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import { mergeFontFaces } from '../index';
+
+describe( 'mergeFontFaces', () => {
+	it( 'should return an empty array when both existing and incoming arrays are empty', () => {
+		expect( mergeFontFaces() ).toEqual( [] );
+	} );
+
+	it( 'should return the existing array when the incoming array is empty', () => {
+		const existing = [ { fontWeight: 'normal', fontStyle: 'italic' } ];
+		expect( mergeFontFaces( existing, [] ) ).toEqual( existing );
+	} );
+
+	it( 'should return the incoming array when the existing array is empty', () => {
+		const incoming = [ { fontWeight: 'bold', fontStyle: 'normal' } ];
+		expect( mergeFontFaces( [], incoming ) ).toEqual( incoming );
+	} );
+
+	it( 'should merge non-overlapping existing and incoming arrays', () => {
+		const existing = [ { fontWeight: 'normal', fontStyle: 'italic' } ];
+		const incoming = [ { fontWeight: 'bold', fontStyle: 'normal' } ];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( [
+			...existing,
+			...incoming,
+		] );
+	} );
+
+	it( 'should overwrite duplicates with the incoming array', () => {
+		const existing = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'old-src' },
+		];
+		const incoming = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-src' },
+		];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( incoming );
+	} );
+
+	it( 'should handle multiple elements in both existing and incoming arrays', () => {
+		const existing = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'old-1' },
+			{ fontWeight: 'bold', fontStyle: 'normal', src: 'old-2' },
+		];
+		const incoming = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-1' },
+			{ fontWeight: 'bold', fontStyle: 'oblique', src: 'new-2' },
+		];
+		const expected = [
+			{ fontWeight: 'normal', fontStyle: 'italic', src: 'new-1' },
+			{ fontWeight: 'bold', fontStyle: 'normal', src: 'old-2' },
+			{ fontWeight: 'bold', fontStyle: 'oblique', src: 'new-2' },
+		];
+		expect( mergeFontFaces( existing, incoming ) ).toEqual( expected );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFamilies.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFamilies.spec.js
new file mode 100644
index 00000000000000..5779534dfa9257
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/mergeFontFamilies.spec.js
@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { mergeFontFamilies } from '../index';
+
+describe( 'mergeFontFamilies', () => {
+	it( 'should return an empty array when both inputs are empty', () => {
+		const result = mergeFontFamilies( [], [] );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should return the existing array when incoming array is empty', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+		];
+		const result = mergeFontFamilies( existing, [] );
+		expect( result ).toEqual( existing );
+	} );
+
+	it( 'should concar non-conflicting arrays', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+		];
+		const incoming = [
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toEqual( [ ...existing, ...incoming ] );
+	} );
+
+	it( 'should merge non-conflicting arrays', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const incoming = [
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toHaveLength( 2 );
+	} );
+
+	it( 'should overwrite existing font family data with incoming data', () => {
+		const existing = [
+			{ slug: 'lobster', name: 'Lobster', fontFamily: 'Lobster' },
+			{ slug: 'piazzola', name: 'Piazzolla', fontFamily: 'Piazzolla' },
+		];
+		const incoming = [
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+			},
+		];
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result[ 1 ].fontFamily ).toBe( 'Piazzolla, serif' );
+	} );
+
+	it( 'should merge fontFaces from incoming array', () => {
+		const existing = [
+			{
+				slug: 'lobster',
+				name: 'Lobster',
+				fontFamily: 'Lobster',
+			},
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla',
+				fontFace: [
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 500, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+		const incoming = [
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+				fontFace: [
+					{ fontWeight: 800, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+		const expected = [
+			{
+				slug: 'lobster',
+				name: 'Lobster',
+				fontFamily: 'Lobster',
+			},
+			{
+				slug: 'piazzola',
+				name: 'Piazzolla',
+				fontFamily: 'Piazzolla, serif',
+				fontFace: [
+					{ fontWeight: 400, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 500, fontStyle: 'normal', src: 'url' },
+					{ fontWeight: 800, fontStyle: 'normal', src: 'url' },
+				],
+			},
+		];
+
+		const result = mergeFontFamilies( existing, incoming );
+		expect( result ).toEqual( expected );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
new file mode 100644
index 00000000000000..7e98b77964f7f2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js
@@ -0,0 +1,216 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getFamilyPreviewStyle,
+	formatFontFamily,
+	formatFontFaceName,
+} from '../preview-styles';
+
+describe( 'getFamilyPreviewStyle', () => {
+	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
+		const family = { fontFamily: 'Rosario' };
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontWeight: '400',
+			fontStyle: 'normal',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "normal" if fontFace contains "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontStyle as "itaic" if fontFace does not contain "normal" style', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'italic', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'italic',
+			fontWeight: '500',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as string', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '700' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '700',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return fontWeight as "400" if fontFace contains "normal" style with "400" weight', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '400' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return the fontWeight of the nearest "normal" style if no "400" weight is found', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '800' },
+				{ fontStyle: 'italic', fontWeight: '500' },
+				{ fontStyle: 'normal', fontWeight: '600' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '600',
+		};
+		expect( result ).toEqual( expected );
+	} );
+
+	it( 'should return 400 or the the nearest "normal" style if it using a variable weight font', () => {
+		const family = {
+			fontFamily: 'Rosario',
+			fontFace: [
+				{ fontStyle: 'normal', fontWeight: '100' },
+				{ fontStyle: 'normal', fontWeight: '200 900' },
+				{ fontStyle: 'italic', fontWeight: '200 900' },
+			],
+		};
+		const result = getFamilyPreviewStyle( family );
+		const expected = {
+			fontFamily: 'Rosario',
+			fontStyle: 'normal',
+			fontWeight: '400',
+		};
+		expect( result ).toEqual( expected );
+	} );
+} );
+
+describe( 'formatFontFamily', () => {
+	it( 'should transform "Baloo 2, system-ui" correctly', () => {
+		expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
+			'"Baloo 2", system-ui'
+		);
+	} );
+
+	it( 'should ignore extra spaces', () => {
+		expect( formatFontFamily( '  Baloo 2   , system-ui' ) ).toBe(
+			'"Baloo 2", system-ui'
+		);
+	} );
+
+	it( 'should keep quoted strings unchanged', () => {
+		expect(
+			formatFontFamily(
+				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			)
+		).toBe(
+			'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'
+		);
+	} );
+
+	it( 'should wrap single font name with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo 2' ) ).toBe( '"Baloo 2"' );
+	} );
+
+	it( 'should wrap multiple font names with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Baloo 2' ) ).toBe(
+			'"Baloo Bhai 2", "Baloo 2"'
+		);
+	} );
+
+	it( 'should wrap names with special characters in quotes', () => {
+		expect(
+			formatFontFamily(
+				'Font+Name, Font*Name, _Font_Name_, generic(kai), sans-serif'
+			)
+		).toBe(
+			'"Font+Name", "Font*Name", "_Font_Name_", generic(kai), sans-serif'
+		);
+	} );
+
+	it( 'should fix empty wrong formatted font family', () => {
+		expect( formatFontFamily( ', Abril Fatface,Times,serif' ) ).toBe(
+			'"Abril Fatface", Times, serif'
+		);
+	} );
+
+	it( 'should not add quotes to generic names', () => {
+		expect(
+			formatFontFamily(
+				'Paren(thesis)Font, generic(kai), generic(fasongsong), generic( abc ), Helvetica Neue'
+			)
+		).toBe(
+			'"Paren(thesis)Font", generic(kai), generic(fasongsong), generic( abc ), "Helvetica Neue"'
+		);
+	} );
+} );
+
+describe( 'formatFontFaceName', () => {
+	it( 'should remove leading and trailing quotes', () => {
+		expect( formatFontFaceName( '"Open Sans"' ) ).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes from multiple font face names', () => {
+		expect(
+			formatFontFaceName( "'Open Sans', 'Helvetica Neue', sans-serif" )
+		).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes even from names with spaces and special characters', () => {
+		expect( formatFontFaceName( "'Font+Name 24', sans-serif" ) ).toBe(
+			'Font+Name 24'
+		);
+	} );
+
+	it( 'should ouput the font face name with quotes on Firefox', () => {
+		const mockUserAgent =
+			'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0';
+
+		// Mock the userAgent for this test
+		Object.defineProperty( window.navigator, 'userAgent', {
+			value: mockUserAgent,
+			configurable: true,
+		} );
+
+		expect( formatFontFaceName( 'Open Sans' ) ).toBe( '"Open Sans"' );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/setUIValuesNeeded.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/setUIValuesNeeded.spec.js
new file mode 100644
index 00000000000000..be167cb3eb34de
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/setUIValuesNeeded.spec.js
@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import { setUIValuesNeeded } from '../index';
+
+describe( 'setUIValuesNeeded function', () => {
+	test( 'Should set name from fontFamily if name is missing', () => {
+		const font = { fontFamily: 'Arial' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'Arial' );
+	} );
+
+	test( 'Should set name from slug if name and fontFamily are missing', () => {
+		const font = { slug: 'arial-slug' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'arial-slug' );
+	} );
+
+	test( 'Should not overwrite name if it exists', () => {
+		const font = { name: 'ExistingName', fontFamily: 'Arial' };
+		const result = setUIValuesNeeded( font );
+		expect( result.name ).toBe( 'ExistingName' );
+	} );
+
+	test( 'Should merge extra values', () => {
+		const font = { name: 'Arial', slug: 'arial' };
+		const extraValues = { source: 'custom' };
+		const result = setUIValuesNeeded( font, extraValues );
+		expect( result ).toEqual( {
+			name: 'Arial',
+			slug: 'arial',
+			source: 'custom',
+		} );
+	} );
+
+	test( 'Should return the same object if no conditions met', () => {
+		const font = { randomProperty: 'randomValue' };
+		const result = setUIValuesNeeded( font );
+		expect( result ).toEqual( font );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js
new file mode 100644
index 00000000000000..7f81b57a77f665
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js
@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { sortFontFaces } from '../sort-font-faces';
+
+describe( 'sortFontFaces', () => {
+	it( 'should prioritize "normal" fontStyle and then sort by numeric fontWeight values', () => {
+		const input = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly sort named fontWeight values within the same fontStyle', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: 'normal' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should prioritize fontStyle "normal" over other styles', () => {
+		const input = [
+			{ fontStyle: 'italic', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '400' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should sort other fontStyles alphabetically after "normal"', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'oblique', fontWeight: '500' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+
+	it( 'should correctly handle multiple test cases', () => {
+		const input = [
+			{ fontStyle: 'oblique', fontWeight: '300' },
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+		];
+		const expected = [
+			{ fontStyle: 'normal', fontWeight: '400' },
+			{ fontStyle: 'normal', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '500' },
+			{ fontStyle: 'italic', fontWeight: '600 900' },
+			{ fontStyle: 'italic', fontWeight: 'bold' },
+			{ fontStyle: 'oblique', fontWeight: '300' },
+		];
+		expect( sortFontFaces( input ) ).toEqual( expected );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/toggleFont.spec.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/toggleFont.spec.js
new file mode 100644
index 00000000000000..509a2145bbc436
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/test/toggleFont.spec.js
@@ -0,0 +1,141 @@
+/**
+ * Internal dependencies
+ */
+import { toggleFont } from '../toggleFont';
+
+describe( 'toggleFont function', () => {
+	const initialCustomFonts = [
+		{
+			slug: 'font1',
+			fontFace: [
+				{ fontWeight: '400', fontStyle: 'normal' },
+				{ fontWeight: '700', fontStyle: 'italic' },
+			],
+		},
+	];
+
+	const newFont = { slug: 'font2', fontFace: [] };
+
+	// Basic Toggles
+	describe( 'Basic Toggles', () => {
+		it( 'should toggle the entire font family on/off', () => {
+			let updatedFonts = toggleFont( newFont, null, initialCustomFonts );
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				newFont,
+			] );
+
+			updatedFonts = toggleFont( newFont, null, updatedFonts );
+			expect( updatedFonts ).toEqual( initialCustomFonts );
+		} );
+
+		it( 'should toggle a specific font face of an activated font family', () => {
+			const face = { fontWeight: '400', fontStyle: 'normal' };
+			let updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
+				{ fontWeight: '700', fontStyle: 'italic' },
+			] );
+
+			updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				updatedFonts
+			);
+			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
+				{ fontWeight: '700', fontStyle: 'italic' },
+				{ fontWeight: '400', fontStyle: 'normal' },
+			] );
+		} );
+
+		it( 'should toggle a specific font face of a non-activated font family', () => {
+			const face = { fontWeight: '500', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				newFont,
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				{ ...newFont, fontFace: [ face ] },
+			] );
+		} );
+	} );
+
+	// Edge Cases
+	describe( 'Edge Cases', () => {
+		it( 'should handle empty initial fonts', () => {
+			const updatedFonts = toggleFont( newFont, null, [] );
+			expect( updatedFonts ).toEqual( [ newFont ] );
+		} );
+
+		it( 'should deactivate font family when all font faces are deactivated', () => {
+			const face1 = { fontWeight: '400', fontStyle: 'normal' };
+			const face2 = { fontWeight: '700', fontStyle: 'italic' };
+			let updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face1,
+				initialCustomFonts
+			);
+			updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face2,
+				updatedFonts
+			);
+
+			expect( updatedFonts ).toEqual( [] );
+		} );
+
+		it( 'should not duplicate an already activated font face', () => {
+			const face = { fontWeight: '400', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				initialCustomFonts
+			);
+			const furtherUpdatedFonts = toggleFont(
+				initialCustomFonts[ 0 ],
+				face,
+				updatedFonts
+			);
+
+			expect( furtherUpdatedFonts ).toHaveLength( 1 );
+			// Sort the font faces by fontWeight to ensure the order is consistent for the toEqual assertion.
+			expect(
+				furtherUpdatedFonts[ 0 ].fontFace.sort(
+					( a, b ) => a.fontWeight - b.fontWeight
+				)
+			).toEqual( initialCustomFonts[ 0 ].fontFace );
+		} );
+
+		it( 'should handle undefined or null fontFace gracefully', () => {
+			const fontWithoutFaces = { slug: 'font3' }; // no fontFace defined
+			const face = { fontWeight: '500', fontStyle: 'normal' };
+			const updatedFonts = toggleFont(
+				fontWithoutFaces,
+				face,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [
+				...initialCustomFonts,
+				{ ...fontWithoutFaces, fontFace: [ face ] },
+			] );
+		} );
+
+		it( 'should handle fonts with the same slug but different properties', () => {
+			const differentFontWithSameSlug = {
+				slug: 'font1',
+				displayName: 'Different Font with Same Slug',
+			};
+			const updatedFonts = toggleFont(
+				differentFontWithSameSlug,
+				null,
+				initialCustomFonts
+			);
+			expect( updatedFonts ).toEqual( [] );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/toggleFont.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/toggleFont.js
new file mode 100644
index 00000000000000..26cd0af9fea8ea
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/toggleFont.js
@@ -0,0 +1,90 @@
+/**
+ * Toggles the activation of a given font or font variant within a list of custom fonts.
+ *
+ * - If only the font is provided (without face), the entire font family's activation is toggled.
+ * - If both font and face are provided, the activation of the specific font variant is toggled.
+ *
+ * @param {Object} font            - The font to be toggled.
+ * @param {string} font.slug       - The unique identifier for the font.
+ * @param {Array}  [font.fontFace] - The list of font variants (faces) associated with the font.
+ *
+ * @param {Object} [face]          - The specific font variant to be toggled.
+ * @param {string} face.fontWeight - The weight of the font variant.
+ * @param {string} face.fontStyle  - The style of the font variant.
+ *
+ * @param {Array}  initialfonts    - The initial list of custom fonts.
+ *
+ * @return {Array} - The updated list of custom fonts with the font/font variant toggled.
+ *
+ * @example
+ * const customFonts = [
+ *     { slug: 'roboto', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * toggleFont({ slug: 'roboto' }, null, customFonts);
+ * // This will remove 'roboto' from customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts);
+ * // This will remove the specified face from 'roboto' in customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts);
+ * // This will add the specified face to 'roboto' in customFonts
+ */
+export function toggleFont( font, face, initialfonts ) {
+	// Helper to check if a font is activated based on its slug
+	const isFontActivated = ( f ) => f.slug === font.slug;
+
+	// Helper to get the activated font from a list of fonts
+	const getActivatedFont = ( fonts ) => fonts.find( isFontActivated );
+
+	// Toggle the activation status of an entire font family
+	const toggleEntireFontFamily = ( activatedFont ) => {
+		if ( ! activatedFont ) {
+			// If the font is not active, activate the entire font family
+			return [ ...initialfonts, font ];
+		}
+		// If the font is already active, deactivate the entire font family
+		return initialfonts.filter( ( f ) => ! isFontActivated( f ) );
+	};
+
+	// Toggle the activation status of a specific font variant
+	const toggleFontVariant = ( activatedFont ) => {
+		const isFaceActivated = ( f ) =>
+			f.fontWeight === face.fontWeight && f.fontStyle === face.fontStyle;
+
+		if ( ! activatedFont ) {
+			// If the font family is not active, activate the font family with the font variant
+			return [ ...initialfonts, { ...font, fontFace: [ face ] } ];
+		}
+
+		let newFontFaces = activatedFont.fontFace || [];
+
+		if ( newFontFaces.find( isFaceActivated ) ) {
+			// If the font variant is active, deactivate it
+			newFontFaces = newFontFaces.filter(
+				( f ) => ! isFaceActivated( f )
+			);
+		} else {
+			// If the font variant is not active, activate it
+			newFontFaces = [ ...newFontFaces, face ];
+		}
+
+		// If there are no more font faces, deactivate the font family
+		if ( newFontFaces.length === 0 ) {
+			return initialfonts.filter( ( f ) => ! isFontActivated( f ) );
+		}
+
+		// Return updated fonts list with toggled font variant
+		return initialfonts.map( ( f ) =>
+			isFontActivated( f ) ? { ...f, fontFace: newFontFaces } : f
+		);
+	};
+
+	const activatedFont = getActivatedFont( initialfonts );
+
+	if ( ! face ) {
+		return toggleEntireFontFamily( activatedFont );
+	}
+
+	return toggleFontVariant( activatedFont );
+}
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js b/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js
new file mode 100644
index 00000000000000..69d561ee0232a8
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+
+function ConfirmDeleteFontSizeDialog( {
+	fontSize,
+	isOpen,
+	toggleOpen,
+	handleRemoveFontSize,
+} ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		handleRemoveFontSize( fontSize );
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ fontSize &&
+				sprintf(
+					/* translators: %s: Name of the font size preset. */
+					__(
+						'Are you sure you want to delete "%s" font size preset?'
+					),
+					fontSize.name
+				) }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmDeleteFontSizeDialog;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js b/packages/edit-site/src/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js
new file mode 100644
index 00000000000000..fb1bd51ba1479a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function ConfirmResetFontSizesDialog( {
+	text,
+	confirmButtonText,
+	isOpen,
+	toggleOpen,
+	onConfirm,
+} ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		onConfirm();
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ confirmButtonText }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ text }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmResetFontSizesDialog;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js
new file mode 100644
index 00000000000000..e49ed0249e65a4
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size-preview.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getComputedFluidTypographyValue,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function FontSizePreview( { fontSize } ) {
+	const [ font ] = useGlobalStyle( 'typography' );
+
+	const input =
+		fontSize?.fluid?.min && fontSize?.fluid?.max
+			? {
+					minimumFontSize: fontSize.fluid.min,
+					maximumFontSize: fontSize.fluid.max,
+			  }
+			: {
+					fontSize: fontSize.size,
+			  };
+
+	const computedFontSize = getComputedFluidTypographyValue( input );
+	return (
+		<div
+			className="edit-site-typography-preview"
+			style={ {
+				fontSize: computedFontSize,
+				fontFamily: font?.fontFamily ?? 'serif',
+			} }
+		>
+			{ __( 'Aa' ) }
+		</div>
+	);
+}
+
+export default FontSizePreview;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
new file mode 100644
index 00000000000000..25dcc69185cae6
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
@@ -0,0 +1,256 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalSpacer as Spacer,
+	useNavigator,
+	__experimentalView as View,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+	Button,
+	FlexItem,
+	ToggleControl,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+import ScreenHeader from '../header';
+import FontSizePreview from './font-size-preview';
+import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';
+import RenameFontSizeDialog from './rename-font-size-dialog';
+import SizeControl from '../size-control';
+
+const { Menu } = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+function FontSize() {
+	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
+	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
+
+	const {
+		params: { origin, slug },
+		goBack,
+	} = useNavigator();
+
+	const [ fontSizes, setFontSizes ] = useGlobalSetting(
+		'typography.fontSizes'
+	);
+
+	const [ globalFluid ] = useGlobalSetting( 'typography.fluid' );
+
+	// Get the font sizes from the origin, default to empty array.
+	const sizes = fontSizes[ origin ] ?? [];
+
+	// Get the font size by slug.
+	const fontSize = sizes.find( ( size ) => size.slug === slug );
+
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( !! slug && ! fontSize ) {
+			goBack();
+		}
+	}, [ slug, fontSize, goBack ] );
+
+	if ( ! origin || ! slug || ! fontSize ) {
+		return null;
+	}
+
+	// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
+	const isFluid =
+		fontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
+
+	// Whether custom fluid values are used.
+	const isCustomFluid = typeof fontSize?.fluid === 'object';
+
+	const handleNameChange = ( value ) => {
+		updateFontSize( 'name', value );
+	};
+
+	const handleFontSizeChange = ( value ) => {
+		updateFontSize( 'size', value );
+	};
+
+	const handleFluidChange = ( value ) => {
+		updateFontSize( 'fluid', value );
+	};
+
+	const handleCustomFluidValues = ( value ) => {
+		if ( value ) {
+			// If custom values are used, init the values with the current ones.
+			updateFontSize( 'fluid', {
+				min: fontSize.size,
+				max: fontSize.size,
+			} );
+		} else {
+			// If custom fluid values are disabled, set fluid to true.
+			updateFontSize( 'fluid', true );
+		}
+	};
+
+	const handleMinChange = ( value ) => {
+		updateFontSize( 'fluid', { ...fontSize.fluid, min: value } );
+	};
+
+	const handleMaxChange = ( value ) => {
+		updateFontSize( 'fluid', { ...fontSize.fluid, max: value } );
+	};
+
+	const updateFontSize = ( key, value ) => {
+		const newFontSizes = sizes.map( ( size ) => {
+			if ( size.slug === slug ) {
+				return { ...size, [ key ]: value }; // Create a new object with updated key
+			}
+			return size;
+		} );
+
+		setFontSizes( {
+			...fontSizes,
+			[ origin ]: newFontSizes,
+		} );
+	};
+
+	const handleRemoveFontSize = () => {
+		const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
+		setFontSizes( {
+			...fontSizes,
+			[ origin ]: newFontSizes,
+		} );
+	};
+
+	const toggleDeleteConfirm = () => {
+		setIsDeleteConfirmOpen( ! isDeleteConfirmOpen );
+	};
+
+	const toggleRenameDialog = () => {
+		setIsRenameDialogOpen( ! isRenameDialogOpen );
+	};
+
+	return (
+		<>
+			<ConfirmDeleteFontSizeDialog
+				fontSize={ fontSize }
+				isOpen={ isDeleteConfirmOpen }
+				toggleOpen={ toggleDeleteConfirm }
+				handleRemoveFontSize={ handleRemoveFontSize }
+			/>
+
+			{ isRenameDialogOpen && (
+				<RenameFontSizeDialog
+					fontSize={ fontSize }
+					toggleOpen={ toggleRenameDialog }
+					handleRename={ handleNameChange }
+				/>
+			) }
+
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between" align="flex-start">
+					<ScreenHeader
+						title={ fontSize.name }
+						description={ sprintf(
+							/* translators: %s: font size preset name. */
+							__( 'Manage the font size %s.' ),
+							fontSize.name
+						) }
+					/>
+					{ origin === 'custom' && (
+						<FlexItem>
+							<Spacer
+								marginTop={ 3 }
+								marginBottom={ 0 }
+								paddingX={ 4 }
+							>
+								<Menu
+									trigger={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __( 'Font size options' ) }
+										/>
+									}
+								>
+									<Menu.Item onClick={ toggleRenameDialog }>
+										<Menu.ItemLabel>
+											{ __( 'Rename' ) }
+										</Menu.ItemLabel>
+									</Menu.Item>
+									<Menu.Item onClick={ toggleDeleteConfirm }>
+										<Menu.ItemLabel>
+											{ __( 'Delete' ) }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								</Menu>
+							</Spacer>
+						</FlexItem>
+					) }
+				</HStack>
+
+				<View>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
+						<VStack spacing={ 4 }>
+							<FlexItem>
+								<FontSizePreview fontSize={ fontSize } />
+							</FlexItem>
+
+							<SizeControl
+								label={ __( 'Size' ) }
+								value={ ! isCustomFluid ? fontSize.size : '' }
+								onChange={ handleFontSizeChange }
+								disabled={ isCustomFluid }
+							/>
+
+							<ToggleControl
+								label={ __( 'Fluid typography' ) }
+								help={ __(
+									'Scale the font size dynamically to fit the screen or viewport.'
+								) }
+								checked={ isFluid }
+								onChange={ handleFluidChange }
+								__nextHasNoMarginBottom
+							/>
+
+							{ isFluid && (
+								<ToggleControl
+									label={ __( 'Custom fluid values' ) }
+									help={ __(
+										'Set custom min and max values for the fluid font size.'
+									) }
+									checked={ isCustomFluid }
+									onChange={ handleCustomFluidValues }
+									__nextHasNoMarginBottom
+								/>
+							) }
+
+							{ isCustomFluid && (
+								<>
+									<SizeControl
+										label={ __( 'Minimum' ) }
+										value={ fontSize.fluid?.min }
+										onChange={ handleMinChange }
+									/>
+									<SizeControl
+										label={ __( 'Maximum' ) }
+										value={ fontSize.fluid?.max }
+										onChange={ handleMaxChange }
+									/>
+								</>
+							) }
+						</VStack>
+					</Spacer>
+				</View>
+			</VStack>
+		</>
+	);
+}
+
+export default FontSize;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js
new file mode 100644
index 00000000000000..fb23a38fe43bc2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes-count.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Subtitle from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+
+function FontSizes() {
+	return (
+		<VStack spacing={ 2 }>
+			<HStack justify="space-between">
+				<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>
+			</HStack>
+			<ItemGroup isBordered isSeparated>
+				<NavigationButtonAsItem path="/typography/font-sizes">
+					<HStack direction="row">
+						<FlexItem>{ __( 'Font size presets' ) }</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+					</HStack>
+				</NavigationButtonAsItem>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default FontSizes;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
new file mode 100644
index 00000000000000..4bda7a7b3266b5
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
@@ -0,0 +1,259 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	__experimentalSpacer as Spacer,
+	__experimentalView as View,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import {
+	Icon,
+	plus,
+	moreVertical,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+const { Menu } = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+import Subtitle from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+import { getNewIndexFromPresets } from '../utils';
+import ScreenHeader from '../header';
+import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
+
+function FontSizeGroup( {
+	label,
+	origin,
+	sizes,
+	handleAddFontSize,
+	handleResetFontSizes,
+} ) {
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
+	const resetDialogText =
+		origin === 'custom'
+			? __(
+					'Are you sure you want to remove all custom font size presets?'
+			  )
+			: __(
+					'Are you sure you want to reset all font size presets to their default values?'
+			  );
+
+	return (
+		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetFontSizesDialog
+					text={ resetDialogText }
+					confirmButtonText={
+						origin === 'custom' ? __( 'Remove' ) : __( 'Reset' )
+					}
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetFontSizes }
+				/>
+			) }
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between" align="center">
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+					<FlexItem>
+						{ origin === 'custom' && (
+							<Button
+								label={ __( 'Add font size' ) }
+								icon={ plus }
+								size="small"
+								onClick={ handleAddFontSize }
+							/>
+						) }
+						{ !! handleResetFontSizes && (
+							<Menu
+								trigger={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __(
+											'Font size presets options'
+										) }
+									/>
+								}
+							>
+								<Menu.Item onClick={ toggleResetDialog }>
+									<Menu.ItemLabel>
+										{ origin === 'custom'
+											? __( 'Remove font size presets' )
+											: __( 'Reset font size presets' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							</Menu>
+						) }
+					</FlexItem>
+				</HStack>
+
+				{ !! sizes.length && (
+					<ItemGroup isBordered isSeparated>
+						{ sizes.map( ( size ) => (
+							<NavigationButtonAsItem
+								key={ size.slug }
+								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
+							>
+								<HStack direction="row">
+									<FlexItem className="edit-site-font-size__item">
+										{ size.name }
+									</FlexItem>
+									<FlexItem>
+										<HStack justify="flex-end">
+											<FlexBlock className="edit-site-font-size__item edit-site-font-size__item-value">
+												{ size.size }
+											</FlexBlock>
+											<Icon
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</FlexItem>
+								</HStack>
+							</NavigationButtonAsItem>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+function FontSizes() {
+	const [ themeFontSizes, setThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme'
+	);
+
+	const [ baseThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme',
+		null,
+		'base'
+	);
+	const [ defaultFontSizes, setDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default'
+	);
+
+	const [ baseDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default',
+		null,
+		'base'
+	);
+
+	const [ customFontSizes = [], setCustomFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.custom'
+	);
+
+	const [ defaultFontSizesEnabled ] = useGlobalSetting(
+		'typography.defaultFontSizes'
+	);
+
+	const handleAddFontSize = () => {
+		const index = getNewIndexFromPresets( customFontSizes, 'custom-' );
+		const newFontSize = {
+			/* translators: %d: font size index */
+			name: sprintf( __( 'New Font Size %d' ), index ),
+			size: '16px',
+			slug: `custom-${ index }`,
+		};
+
+		setCustomFontSizes( [ ...customFontSizes, newFontSize ] );
+	};
+
+	const hasSameSizeValues = ( arr1, arr2 ) =>
+		arr1.map( ( item ) => item.size ).join( '' ) ===
+		arr2.map( ( item ) => item.size ).join( '' );
+
+	return (
+		<VStack spacing={ 2 }>
+			<ScreenHeader
+				title={ __( 'Font size presets' ) }
+				description={ __(
+					'Create and edit the presets used for font sizes across the site.'
+				) }
+			/>
+
+			<View>
+				<Spacer paddingX={ 4 }>
+					<VStack spacing={ 8 }>
+						{ !! themeFontSizes?.length && (
+							<FontSizeGroup
+								label={ __( 'Theme' ) }
+								origin="theme"
+								sizes={ themeFontSizes }
+								baseSizes={ baseThemeFontSizes }
+								handleAddFontSize={ handleAddFontSize }
+								handleResetFontSizes={
+									hasSameSizeValues(
+										themeFontSizes,
+										baseThemeFontSizes
+									)
+										? null
+										: () =>
+												setThemeFontSizes(
+													baseThemeFontSizes
+												)
+								}
+							/>
+						) }
+
+						{ defaultFontSizesEnabled &&
+							!! defaultFontSizes?.length && (
+								<FontSizeGroup
+									label={ __( 'Default' ) }
+									origin="default"
+									sizes={ defaultFontSizes }
+									baseSizes={ baseDefaultFontSizes }
+									handleAddFontSize={ handleAddFontSize }
+									handleResetFontSizes={
+										hasSameSizeValues(
+											defaultFontSizes,
+											baseDefaultFontSizes
+										)
+											? null
+											: () =>
+													setDefaultFontSizes(
+														baseDefaultFontSizes
+													)
+									}
+								/>
+							) }
+
+						<FontSizeGroup
+							label={ __( 'Custom' ) }
+							origin="custom"
+							sizes={ customFontSizes }
+							handleAddFontSize={ handleAddFontSize }
+							handleResetFontSizes={
+								customFontSizes.length > 0
+									? () => setCustomFontSizes( [] )
+									: null
+							}
+						/>
+					</VStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default FontSizes;
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/rename-font-size-dialog.js b/packages/edit-site/src/components/global-styles/font-sizes/rename-font-size-dialog.js
new file mode 100644
index 00000000000000..cb718959c6c27a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/font-sizes/rename-font-size-dialog.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControl as InputControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+function RenameFontSizeDialog( { fontSize, toggleOpen, handleRename } ) {
+	const [ newName, setNewName ] = useState( fontSize.name );
+
+	const handleConfirm = () => {
+		// If the new name is not empty, call the handleRename function
+		if ( newName.trim() ) {
+			handleRename( newName );
+		}
+		toggleOpen();
+	};
+
+	return (
+		<Modal
+			onRequestClose={ toggleOpen }
+			focusOnMount="firstContentElement"
+			title={ __( 'Rename' ) }
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					handleConfirm();
+					toggleOpen();
+				} }
+			>
+				<VStack spacing="3">
+					<InputControl
+						__next40pxDefaultSize
+						autoComplete="off"
+						value={ newName }
+						onChange={ setNewName }
+						label={ __( 'Name' ) }
+						placeholder={ __( 'Font size preset name' ) }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ toggleOpen }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+export default RenameFontSizeDialog;
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
deleted file mode 100644
index a76f018f53be75..00000000000000
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * External dependencies
- */
-import { mergeWith, isEmpty, mapValues } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo, useCallback } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { GlobalStylesContext } from './context';
-
-function mergeTreesCustomizer( _, srcValue ) {
-	// We only pass as arrays the presets,
-	// in which case we want the new array of values
-	// to override the old array (no merging).
-	if ( Array.isArray( srcValue ) ) {
-		return srcValue;
-	}
-}
-
-export function mergeBaseAndUserConfigs( base, user ) {
-	return mergeWith( {}, base, user, mergeTreesCustomizer );
-}
-
-const cleanEmptyObject = ( object ) => {
-	if (
-		object === null ||
-		typeof object !== 'object' ||
-		Array.isArray( object )
-	) {
-		return object;
-	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
-};
-
-function useGlobalStylesUserConfig() {
-	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId =
-			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-		const record = _globalStylesId
-			? select( coreStore ).getEditedEntityRecord(
-					'root',
-					'globalStyles',
-					_globalStylesId
-			  )
-			: undefined;
-		return {
-			globalStylesId: _globalStylesId,
-			settings: record?.settings,
-			styles: record?.styles,
-		};
-	}, [] );
-
-	const { getEditedEntityRecord } = useSelect( coreStore );
-	const { editEntityRecord } = useDispatch( coreStore );
-	const config = useMemo( () => {
-		return {
-			settings: settings ?? {},
-			styles: styles ?? {},
-		};
-	}, [ settings, styles ] );
-
-	const setConfig = useCallback(
-		( callback ) => {
-			const record = getEditedEntityRecord(
-				'root',
-				'globalStyles',
-				globalStylesId
-			);
-			const currentConfig = {
-				styles: record?.styles ?? {},
-				settings: record?.settings ?? {},
-			};
-			const updatedConfig = callback( currentConfig );
-			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
-				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings: cleanEmptyObject( updatedConfig.settings ) || {},
-			} );
-		},
-		[ globalStylesId ]
-	);
-
-	return [ !! settings || !! styles, config, setConfig ];
-}
-
-function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeBaseGlobalStyles();
-	}, [] );
-
-	return [ !! baseConfig, baseConfig ];
-}
-
-function useGlobalStylesContext() {
-	const [ isUserConfigReady, userConfig, setUserConfig ] =
-		useGlobalStylesUserConfig();
-	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
-	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfig ) {
-			return {};
-		}
-		return mergeBaseAndUserConfigs( baseConfig, userConfig );
-	}, [ userConfig, baseConfig ] );
-	const context = useMemo( () => {
-		return {
-			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfig,
-			base: baseConfig,
-			merged: mergedConfig,
-			setUserConfig,
-		};
-	}, [
-		mergedConfig,
-		userConfig,
-		baseConfig,
-		setUserConfig,
-		isUserConfigReady,
-		isBaseConfigReady,
-	] );
-
-	return context;
-}
-
-export function GlobalStylesProvider( { children } ) {
-	const context = useGlobalStylesContext();
-	if ( ! context.isReady ) {
-		return null;
-	}
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			{ children }
-		</GlobalStylesContext.Provider>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index 22cad685a3185d..00eb8db83578db 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
@@ -8,48 +9,55 @@ import {
 	DuotonePicker,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
 import Subtitle from './subtitle';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 const noop = () => {};
 
 export default function GradientPalettePanel( { name } ) {
-	const [ themeGradients, setThemeGradients ] = useSetting(
+	const [ themeGradients, setThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name
 	);
-	const [ baseThemeGradients ] = useSetting(
+	const [ baseThemeGradients ] = useGlobalSetting(
 		'color.gradients.theme',
 		name,
 		'base'
 	);
-	const [ defaultGradients, setDefaultGradients ] = useSetting(
+	const [ defaultGradients, setDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name
 	);
-	const [ baseDefaultGradients ] = useSetting(
+	const [ baseDefaultGradients ] = useGlobalSetting(
 		'color.gradients.default',
 		name,
 		'base'
 	);
-	const [ customGradients, setCustomGradients ] = useSetting(
+	const [ customGradients, setCustomGradients ] = useGlobalSetting(
 		'color.gradients.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultGradients',
 		name
 	);
 
-	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
-	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
-	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
-	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+	const [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] =
+		useGlobalSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useGlobalSetting(
+		'color.defaultDuotone'
+	);
 
 	const duotonePalette = [
 		...( customDuotone || [] ),
@@ -57,10 +65,13 @@ export default function GradientPalettePanel( { name } ) {
 		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
 	];
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
-			spacing={ 10 }
+			spacing={ 8 }
 		>
 			{ !! themeGradients && !! themeGradients.length && (
 				<PaletteEdit
@@ -69,6 +80,8 @@ export default function GradientPalettePanel( { name } ) {
 					gradients={ themeGradients }
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -80,25 +93,26 @@ export default function GradientPalettePanel( { name } ) {
 						gradients={ defaultGradients }
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
 				gradients={ customGradients }
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
-				emptyMessage={ __(
-					'Custom gradients are empty! Add some gradients to create your own palette.'
-				) }
+				paletteLabelLevel={ 3 }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
-					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }
-						disableCustomDuotone={ true }
-						disableCustomColors={ true }
+						disableCustomDuotone
+						disableCustomColors
 						clearable={ false }
 						onChange={ noop }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 8167925098a68d..1bbff8fb3d6a6d 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -7,29 +7,31 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description } ) {
+function ScreenHeader( { title, description, onBack } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorBackButton
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
+						<Navigator.BackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
-							aria-label={ __( 'Navigate to the previous view' ) }
+							size="small"
+							label={ __( 'Back' ) }
+							onClick={ onBack }
 						/>
 						<Spacer>
-							<Heading level={ 5 }>{ title }</Heading>
+							<Heading
+								className="edit-site-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
 						</Spacer>
 					</HStack>
 				</Spacer>
diff --git a/packages/edit-site/src/components/global-styles/highlighted-colors.js b/packages/edit-site/src/components/global-styles/highlighted-colors.js
new file mode 100644
index 00000000000000..c2ffc4bed1d204
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/highlighted-colors.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function HighlightedColors( {
+	normalizedColorSwatchSize,
+	ratio,
+} ) {
+	const { highlightedColors } = useStylesPreviewColors();
+	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+	return highlightedColors.map( ( { slug, color }, index ) => (
+		<motion.div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				height: scaledSwatchSize,
+				width: scaledSwatchSize,
+				background: color,
+				borderRadius: scaledSwatchSize / 2,
+			} }
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: index === 1 ? 0.2 : 0.1,
+			} }
+		/>
+	) );
+}
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 2de36fbb60b728..ccae419be98c00 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -1,336 +1,28 @@
 /**
  * External dependencies
  */
-import { get, set, isEqual } from 'lodash';
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
-import { useContext, useCallback, useMemo } from '@wordpress/element';
-import {
-	getBlockType,
-	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-} from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, getPresetVariableFromValue } from './utils';
-import { GlobalStylesContext } from './context';
+import { unlock } from '../../lock-unlock';
+import { useSelect } from '@wordpress/data';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
-
-export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
-	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
-	return [
-		canReset,
-		useCallback(
-			() => setUserConfig( () => EMPTY_CONFIG ),
-			[ setUserConfig ]
-		),
-	];
-};
-
-export function useSetting( path, blockName, source = 'all' ) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-
-	const fullPath = ! blockName
-		? `settings.${ path }`
-		: `settings.blocks.${ blockName }.${ path }`;
-
-	const setSetting = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			const pathToSet = PATHS_WITH_MERGE[ path ]
-				? fullPath + '.custom'
-				: fullPath;
-			set( newUserConfig, pathToSet, newValue );
-
-			return newUserConfig;
-		} );
-	};
-
-	const getSettingValueForContext = ( name ) => {
-		const currentPath = ! name
-			? `settings.${ path }`
-			: `settings.blocks.${ name }.${ path }`;
-
-		const getSettingValue = ( configToUse ) => {
-			const result = get( configToUse, currentPath );
-			if ( PATHS_WITH_MERGE[ path ] ) {
-				return result?.custom ?? result?.theme ?? result?.default;
-			}
-			return result;
-		};
-
-		let result;
-		switch ( source ) {
-			case 'all':
-				result = getSettingValue( mergedConfig );
-				break;
-			case 'user':
-				result = getSettingValue( userConfig );
-				break;
-			case 'base':
-				result = getSettingValue( baseConfig );
-				break;
-			default:
-				throw 'Unsupported source';
-		}
-
-		return result;
-	};
-
-	// Unlike styles settings get inherited from top level settings.
-	const resultWithFallback =
-		getSettingValueForContext( blockName ) ?? getSettingValueForContext();
-
-	return [ resultWithFallback, setSetting ];
-}
-
-export function useStyle( path, blockName, source = 'all' ) {
-	const {
-		merged: mergedConfig,
-		base: baseConfig,
-		user: userConfig,
-		setUserConfig,
-	} = useContext( GlobalStylesContext );
-	const finalPath = ! blockName
-		? `styles.${ path }`
-		: `styles.blocks.${ blockName }.${ path }`;
-
-	const setStyle = ( newValue ) => {
-		setUserConfig( ( currentConfig ) => {
-			// Deep clone `currentConfig` to avoid mutating it later.
-			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
-			set(
-				newUserConfig,
-				finalPath,
-				getPresetVariableFromValue(
-					mergedConfig.settings,
-					blockName,
-					path,
-					newValue
-				)
-			);
-			return newUserConfig;
-		} );
-	};
-
-	let result;
-	switch ( source ) {
-		case 'all':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
-				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
-			);
-			break;
-		case 'user':
-			result = getValueFromVariable(
-				mergedConfig,
-				blockName,
-				get( userConfig, finalPath )
-			);
-			break;
-		case 'base':
-			result = getValueFromVariable(
-				baseConfig,
-				blockName,
-				get( baseConfig, finalPath )
-			);
-			break;
-		default:
-			throw 'Unsupported source';
-	}
-
-	return [ result, setStyle ];
-}
-
-const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'padding',
-	'contentSize',
-	'wideSize',
-	'blockGap',
-];
-
-export function getSupportedGlobalStylesPanels( name ) {
-	if ( ! name ) {
-		return ROOT_BLOCK_SUPPORTS;
-	}
-
-	const blockType = getBlockType( name );
-
-	if ( ! blockType ) {
-		return [];
-	}
-
-	const supportKeys = [];
-
-	// Check for blockGap support.
-	// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
-	// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
-	if (
-		blockType?.supports?.spacing?.blockGap &&
-		blockType?.supports?.spacing?.__experimentalSkipSerialization !==
-			true &&
-		! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
-			( spacingType ) => spacingType === 'blockGap'
-		)
-	) {
-		supportKeys.push( 'blockGap' );
-	}
-
-	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
-		if ( ! STYLE_PROPERTY[ styleName ].support ) {
-			return;
-		}
-
-		// Opting out means that, for certain support keys like background color,
-		// blocks have to explicitly set the support value false. If the key is
-		// unset, we still enable it.
-		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
-			if (
-				STYLE_PROPERTY[ styleName ].support[ 0 ] in
-					blockType.supports &&
-				get(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support
-				) !== false
-			) {
-				return supportKeys.push( styleName );
-			}
-		}
-
-		if (
-			get(
-				blockType.supports,
-				STYLE_PROPERTY[ styleName ].support,
-				false
-			)
-		) {
-			return supportKeys.push( styleName );
-		}
-	} );
-
-	return supportKeys;
-}
-
-export function useColorsPerOrigin( name ) {
-	const [ customColors ] = useSetting( 'color.palette.custom', name );
-	const [ themeColors ] = useSetting( 'color.palette.theme', name );
-	const [ defaultColors ] = useSetting( 'color.palette.default', name );
-	const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );
-
-	return useMemo( () => {
-		const result = [];
-		if ( themeColors && themeColors.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				colors: themeColors,
-			} );
-		}
-		if (
-			shouldDisplayDefaultColors &&
-			defaultColors &&
-			defaultColors.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				colors: defaultColors,
-			} );
-		}
-		if ( customColors && customColors.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				colors: customColors,
-			} );
-		}
-		return result;
-	}, [ customColors, themeColors, defaultColors ] );
-}
-
-export function useGradientsPerOrigin( name ) {
-	const [ customGradients ] = useSetting( 'color.gradients.custom', name );
-	const [ themeGradients ] = useSetting( 'color.gradients.theme', name );
-	const [ defaultGradients ] = useSetting( 'color.gradients.default', name );
-	const [ shouldDisplayDefaultGradients ] = useSetting(
-		'color.defaultGradients'
-	);
-
-	return useMemo( () => {
-		const result = [];
-		if ( themeGradients && themeGradients.length ) {
-			result.push( {
-				name: _x(
-					'Theme',
-					'Indicates this palette comes from the theme.'
-				),
-				gradients: themeGradients,
-			} );
-		}
-		if (
-			shouldDisplayDefaultGradients &&
-			defaultGradients &&
-			defaultGradients.length
-		) {
-			result.push( {
-				name: _x(
-					'Default',
-					'Indicates this palette comes from WordPress.'
-				),
-				gradients: defaultGradients,
-			} );
-		}
-		if ( customGradients && customGradients.length ) {
-			result.push( {
-				name: _x(
-					'Custom',
-					'Indicates this palette is created by the user.'
-				),
-				gradients: customGradients,
-			} );
-		}
-		return result;
-	}, [ customGradients, themeGradients, defaultGradients ] );
-}
-
 export function useColorRandomizer( name ) {
-	const [ themeColors, setThemeColors ] = useSetting(
+	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name
 	);
@@ -359,3 +51,61 @@ export function useColorRandomizer( name ) {
 		? [ randomizeColors ]
 		: [];
 }
+
+export function useStylesPreviewColors() {
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+	const [ linkColor = headingColor ] = useGlobalStyle(
+		'elements.link.color.text'
+	);
+
+	const [ buttonBackgroundColor = linkColor ] = useGlobalStyle(
+		'elements.button.color.background'
+	);
+	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+
+	const textColorObject = paletteColors.filter(
+		( { color } ) => color === textColor
+	);
+	const buttonBackgroundColorObject = paletteColors.filter(
+		( { color } ) => color === buttonBackgroundColor
+	);
+
+	const highlightedColors = textColorObject
+		.concat( buttonBackgroundColorObject )
+		.concat( paletteColors )
+		.filter(
+			// we exclude these background color because it is already visible in the preview.
+			( { color } ) => color !== backgroundColor
+		)
+		.slice( 0, 2 );
+
+	return {
+		paletteColors,
+		highlightedColors,
+	};
+}
+
+export function useSupportedStyles( name, element ) {
+	const { supportedPanels } = useSelect(
+		( select ) => {
+			return {
+				supportedPanels: unlock(
+					select( blocksStore )
+				).getSupportedStyles( name, element ),
+			};
+		},
+		[ name, element ]
+	);
+
+	return supportedPanels;
+}
diff --git a/packages/edit-site/src/components/global-styles/icon-with-current-color.js b/packages/edit-site/src/components/global-styles/icon-with-current-color.js
index f20289d90363b6..2c6f2245c84259 100644
--- a/packages/edit-site/src/components/global-styles/icon-with-current-color.js
+++ b/packages/edit-site/src/components/global-styles/icon-with-current-color.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { Icon } from '@wordpress/components';
 export function IconWithCurrentColor( { className, ...props } ) {
 	return (
 		<Icon
-			className={ classnames(
+			className={ clsx(
 				className,
 				'edit-site-global-styles-icon-with-current-color'
 			) }
diff --git a/packages/edit-site/src/components/global-styles/index.js b/packages/edit-site/src/components/global-styles/index.js
index 026a4fd759f325..5533852c1ac68b 100644
--- a/packages/edit-site/src/components/global-styles/index.js
+++ b/packages/edit-site/src/components/global-styles/index.js
@@ -1,3 +1 @@
 export { default as GlobalStylesUI } from './ui';
-export { useGlobalStylesReset, useStyle, useSetting } from './hooks';
-export { useGlobalStylesOutput } from './use-global-styles-output';
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 5bc8a50e0e2f45..62af9740e8ae1a 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -29,11 +28,11 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 }
 
 function NavigationButtonAsItem( props ) {
-	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 4d37b234eb9afe..9b8c3f829d2426 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -10,26 +10,30 @@ import {
 	ColorIndicator,
 	Button,
 } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useColorRandomizer, useSetting } from './hooks';
+import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 const EMPTY_COLORS = [];
 
 function Palette( { name } ) {
-	const [ customColors ] = useSetting( 'color.palette.custom' );
-	const [ themeColors ] = useSetting( 'color.palette.theme' );
-	const [ defaultColors ] = useSetting( 'color.palette.default' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ defaultColors ] = useGlobalSetting( 'color.palette.default' );
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultPalette',
 		name
 	);
@@ -49,53 +53,51 @@ function Palette( { name } ) {
 
 	const screenPath = ! name
 		? '/colors/palette'
-		: '/blocks/' + name + '/colors/palette';
-	const paletteButtonText =
-		colors.length > 0
-			? sprintf(
-					// Translators: %d: Number of palette colors.
-					_n( '%d color', '%d colors', colors.length ),
-					colors.length
-			  )
-			: __( 'Add custom colors' );
+		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle>{ __( 'Palette' ) }</Subtitle>
+			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem
-					path={ screenPath }
-					aria-label={ __( 'Color palettes' ) }
-				>
-					<HStack
-						direction={
-							colors.length === 0 ? 'row-reverse' : 'row'
-						}
-					>
-						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors
-								.slice( 0, 5 )
-								.map( ( { color }, index ) => (
-									<ColorIndicatorWrapper
-										key={ `${ color }-${ index }` }
-									>
-										<ColorIndicator colorValue={ color } />
-									</ColorIndicatorWrapper>
-								) ) }
-						</ZStack>
-						<FlexItem>{ paletteButtonText }</FlexItem>
+				<NavigationButtonAsItem path={ screenPath }>
+					<HStack direction="row">
+						{ colors.length > 0 ? (
+							<>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color }, index ) => (
+											<ColorIndicatorWrapper
+												key={ `${ color }-${ index }` }
+											>
+												<ColorIndicator
+													colorValue={ color }
+												/>
+											</ColorIndicatorWrapper>
+										) ) }
+								</ZStack>
+								<FlexItem isBlock>
+									{ __( 'Edit palette' ) }
+								</FlexItem>
+							</>
+						) : (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ randomizeThemeColors && (
-				<Button
-					variant="secondary"
-					icon={ shuffle }
-					onClick={ randomizeThemeColors }
-				>
-					{ __( 'Randomize colors' ) }
-				</Button>
-			) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/preset-colors.js b/packages/edit-site/src/components/global-styles/preset-colors.js
new file mode 100644
index 00000000000000..7977cd88a13c3f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preset-colors.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}
diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
new file mode 100644
index 00000000000000..8c1008330ec068
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PresetColors from './preset-colors';
+import PreviewIframe from './preview-iframe';
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<PresetColors />
+					</HStack>
+				</motion.div>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewColors;
diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-iframe.js
new file mode 100644
index 00000000000000..e830accf6d939b
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preview-iframe.js
@@ -0,0 +1,152 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { __unstableMotion as motion } from '@wordpress/components';
+import {
+	useThrottle,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle, useGlobalStylesOutput } = unlock(
+	blockEditorPrivateApis
+);
+
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+
+// Throttle options for useThrottle. Must be defined outside of the component,
+// so that the object reference is the same on each render.
+const THROTTLE_OPTIONS = {
+	leading: true,
+	trailing: true,
+};
+
+export default function PreviewIframe( {
+	children,
+	label,
+	isFocused,
+	withHoverView,
+} ) {
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const [ styles ] = useGlobalStylesOutput();
+	const disableMotion = useReducedMotion();
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ containerResizeListener, { width } ] = useResizeObserver();
+	const [ throttledWidth, setThrottledWidthState ] = useState( width );
+	const [ ratioState, setRatioState ] = useState();
+
+	const setThrottledWidth = useThrottle(
+		setThrottledWidthState,
+		250,
+		THROTTLE_OPTIONS
+	);
+
+	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		if ( width ) {
+			setThrottledWidth( width );
+		}
+	}, [ width, setThrottledWidth ] );
+
+	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+		const ratioDiff = newRatio - ( ratioState || 0 );
+
+		// Only update the ratio state if the difference is big enough
+		// or if the ratio state is not yet set. This is to avoid an
+		// endless loop of updates at particular viewport heights when the
+		// presence of a scrollbar causes the width to change slightly.
+		const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;
+
+		if ( isRatioDiffBigEnough || ! ratioState ) {
+			setRatioState( newRatio );
+		}
+	}, [ throttledWidth, ratioState ] );
+
+	// Set a fallbackRatio to use before the throttled ratio has been set.
+	const fallbackRatio = width ? width / normalizedWidth : 1;
+	/*
+	 * Use the throttled ratio if it has been calculated, otherwise
+	 * use the fallback ratio. The throttled ratio is used to avoid
+	 * an endless loop of updates at particular viewport heights.
+	 * See: https://github.com/WordPress/gutenberg/issues/55112
+	 */
+	const ratio = ratioState ? ratioState : fallbackRatio;
+
+	/*
+	 * Reset leaked styles from WP common.css and remove main content layout padding and border.
+	 * Add pointer cursor to the body to indicate the iframe is interactive,
+	 * similar to Typography variation previews.
+	 */
+	const editorStyles = useMemo( () => {
+		if ( styles ) {
+			return [
+				...styles,
+				{
+					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',
+					isGlobalStyles: true,
+				},
+			];
+		}
+
+		return styles;
+	}, [ styles ] );
+	const isReady = !! width;
+
+	return (
+		<>
+			<div style={ { position: 'relative' } }>
+				{ containerResizeListener }
+			</div>
+			{ isReady && (
+				<Iframe
+					className="edit-site-global-styles-preview__iframe"
+					style={ {
+						height: normalizedHeight * ratio,
+					} }
+					onMouseEnter={ () => setIsHovered( true ) }
+					onMouseLeave={ () => setIsHovered( false ) }
+					tabIndex={ -1 }
+				>
+					<EditorStyles styles={ editorStyles } />
+					<motion.div
+						style={ {
+							height: normalizedHeight * ratio,
+							width: '100%',
+							background: gradientValue ?? backgroundColor,
+							cursor: withHoverView ? 'pointer' : undefined,
+						} }
+						initial="start"
+						animate={
+							( isHovered || isFocused ) &&
+							! disableMotion &&
+							label
+								? 'hover'
+								: 'start'
+						}
+					>
+						{ []
+							.concat( children ) // This makes sure children is always an array.
+							.map( ( child, key ) => child( { ratio, key } ) ) }
+					</motion.div>
+				</Iframe>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/preview-styles.js b/packages/edit-site/src/components/global-styles/preview-styles.js
new file mode 100644
index 00000000000000..dff1ef5a6f42ba
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preview-styles.js
@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
+import TypographyExample from './typography-example';
+import HighlightedColors from './highlighted-colors';
+import PreviewIframe from './preview-iframe';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const midFrameVariants = {
+	hover: {
+		opacity: 1,
+	},
+	start: {
+		opacity: 0.5,
+	},
+};
+
+const secondFrameVariants = {
+	hover: {
+		scale: 1,
+		opacity: 1,
+	},
+	start: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
+	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
+	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
+	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useGlobalStyle(
+		'elements.h1.typography.fontWeight'
+	);
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+
+	const { paletteColors } = useStylesPreviewColors();
+
+	return (
+		<PreviewIframe
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<TypographyExample
+							fontSize={ 65 * ratio }
+							variation={ variation }
+						/>
+						<VStack spacing={ 4 * ratio }>
+							<HighlightedColors
+								normalizedColorSwatchSize={ 32 }
+								ratio={ ratio }
+							/>
+						</VStack>
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { key } ) => (
+				<motion.div
+					key={ key }
+					variants={ withHoverView && midFrameVariants }
+					style={ {
+						height: '100%',
+						width: '100%',
+						position: 'absolute',
+						top: 0,
+						overflow: 'hidden',
+						filter: 'blur(60px)',
+						opacity: 0.1,
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="flex-start"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ paletteColors
+							.slice( 0, 4 )
+							.map( ( { color }, index ) => (
+								<div
+									key={ index }
+									style={ {
+										height: '100%',
+										background: color,
+										flexGrow: 1,
+									} }
+								/>
+							) ) }
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ secondFrameVariants }
+					style={ {
+						height: '100%',
+						width: '100%',
+						overflow: 'hidden',
+						position: 'absolute',
+						top: 0,
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
+						} }
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 40 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+									textAlign: 'center',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+					</VStack>
+				</motion.div>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default PreviewStyles;
diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js
new file mode 100644
index 00000000000000..26ae13eaa09083
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/preview-typography.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewIframe from './preview-iframe';
+
+const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ variation.title }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<HStack
+					key={ key }
+					spacing={ 10 * ratio }
+					justify="center"
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<TypographyExample
+						variation={ variation }
+						fontSize={ 85 * ratio }
+					/>
+				</HStack>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewTypography;
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
deleted file mode 100644
index 14ade992f0fc7b..00000000000000
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__unstableIframe as Iframe,
-	__unstableEditorStyles as EditorStyles,
-} from '@wordpress/block-editor';
-import {
-	__unstableMotion as motion,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useSetting, useStyle } from './hooks';
-import { useGlobalStylesOutput } from './use-global-styles-output';
-
-const firstFrame = {
-	start: {
-		scale: 1,
-		opacity: 1,
-	},
-	hover: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const midFrame = {
-	hover: {
-		opacity: 1,
-	},
-	start: {
-		opacity: 0.5,
-	},
-};
-
-const secondFrame = {
-	hover: {
-		scale: 1,
-		opacity: 1,
-	},
-	start: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const normalizedWidth = 248;
-const normalizedHeight = 152;
-
-const normalizedColorSwatchSize = 32;
-
-const StylesPreview = ( { label, isFocused, withHoverView } ) => {
-	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
-	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
-	const [ headingFontFamily = fontFamily ] = useStyle(
-		'elements.h1.typography.fontFamily'
-	);
-	const [ headingFontWeight = fontWeight ] = useStyle(
-		'elements.h1.typography.fontWeight'
-	);
-	const [ textColor = 'black' ] = useStyle( 'color.text' );
-	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
-	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
-	const [ gradientValue ] = useStyle( 'color.gradient' );
-	const [ styles ] = useGlobalStylesOutput();
-	const disableMotion = useReducedMotion();
-	const [ coreColors ] = useSetting( 'color.palette.core' );
-	const [ themeColors ] = useSetting( 'color.palette.theme' );
-	const [ customColors ] = useSetting( 'color.palette.custom' );
-	const [ isHovered, setIsHovered ] = useState( false );
-	const [ containerResizeListener, { width } ] = useResizeObserver();
-	const ratio = width ? width / normalizedWidth : 1;
-
-	const paletteColors = ( themeColors ?? [] )
-		.concat( customColors ?? [] )
-		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
-		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
-		)
-		.slice( 0, 2 );
-
-	// Reset leaked styles from WP common.css and remove main content layout padding and border.
-	const editorStyles = useMemo( () => {
-		if ( styles ) {
-			return [
-				...styles,
-				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
-					isGlobalStyles: true,
-				},
-			];
-		}
-
-		return styles;
-	}, [ styles ] );
-
-	return (
-		<Iframe
-			className="edit-site-global-styles-preview__iframe"
-			head={ <EditorStyles styles={ editorStyles } /> }
-			style={ {
-				height: normalizedHeight * ratio,
-				visibility: ! width ? 'hidden' : 'visible',
-			} }
-			onMouseEnter={ () => setIsHovered( true ) }
-			onMouseLeave={ () => setIsHovered( false ) }
-			tabIndex={ -1 }
-		>
-			{ containerResizeListener }
-			<motion.div
-				style={ {
-					height: normalizedHeight * ratio,
-					width: '100%',
-					background: gradientValue ?? backgroundColor,
-					cursor: 'pointer',
-				} }
-				initial="start"
-				animate={
-					( isHovered || isFocused ) && ! disableMotion && label
-						? 'hover'
-						: 'start'
-				}
-			>
-				<motion.div
-					variants={ firstFrame }
-					style={ {
-						height: '100%',
-						overflow: 'hidden',
-					} }
-				>
-					<HStack
-						spacing={ 10 * ratio }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-						} }
-					>
-						<motion.div
-							style={ {
-								fontFamily: headingFontFamily,
-								fontSize: 65 * ratio,
-								color: headingColor,
-								fontWeight: headingFontWeight,
-							} }
-							animate={ { scale: 1, opacity: 1 } }
-							initial={ { scale: 0.1, opacity: 0 } }
-							transition={ { delay: 0.3, type: 'tween' } }
-						>
-							Aa
-						</motion.div>
-						<VStack spacing={ 4 * ratio }>
-							{ highlightedColors.map(
-								( { slug, color }, index ) => (
-									<motion.div
-										key={ slug }
-										style={ {
-											height:
-												normalizedColorSwatchSize *
-												ratio,
-											width:
-												normalizedColorSwatchSize *
-												ratio,
-											background: color,
-											borderRadius:
-												( normalizedColorSwatchSize *
-													ratio ) /
-												2,
-										} }
-										animate={ { scale: 1, opacity: 1 } }
-										initial={ { scale: 0.1, opacity: 0 } }
-										transition={ {
-											delay: index === 1 ? 0.2 : 0.1,
-										} }
-									/>
-								)
-							) }
-						</VStack>
-					</HStack>
-				</motion.div>
-				<motion.div
-					variants={ withHoverView && midFrame }
-					style={ {
-						height: '100%',
-						width: '100%',
-						position: 'absolute',
-						top: 0,
-						overflow: 'hidden',
-						filter: 'blur(60px)',
-						opacity: 0.1,
-					} }
-				>
-					<HStack
-						spacing={ 0 }
-						justify="flex-start"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-						} }
-					>
-						{ paletteColors
-							.slice( 0, 4 )
-							.map( ( { color }, index ) => (
-								<div
-									key={ index }
-									style={ {
-										height: '100%',
-										background: color,
-										flexGrow: 1,
-									} }
-								/>
-							) ) }
-					</HStack>
-				</motion.div>
-				<motion.div
-					variants={ secondFrame }
-					style={ {
-						height: '100%',
-						width: '100%',
-						overflow: 'hidden',
-						position: 'absolute',
-						top: 0,
-					} }
-				>
-					<VStack
-						spacing={ 3 * ratio }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-							padding: 10 * ratio,
-							boxSizing: 'border-box',
-						} }
-					>
-						{ label && (
-							<div
-								style={ {
-									fontSize: 40 * ratio,
-									fontFamily: headingFontFamily,
-									color: headingColor,
-									fontWeight: headingFontWeight,
-									lineHeight: '1em',
-									textAlign: 'center',
-								} }
-							>
-								{ label }
-							</div>
-						) }
-					</VStack>
-				</motion.div>
-			</motion.div>
-		</Iframe>
-	);
-};
-
-export default StylesPreview;
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
new file mode 100644
index 00000000000000..d8e8f5794f9d03
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -0,0 +1,84 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	background,
+	typography,
+	color,
+	layout,
+	shadow as shadowIcon,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../lock-unlock';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasColorPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+function RootMenu() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	/*
+	 * Use the raw settings to determine if the background panel should be displayed,
+	 * as the background panel is not dependent on the block element settings.
+	 */
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasShadowPanel = true; // useHasShadowPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasDimensionsPanel;
+
+	return (
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path="/typography"
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem icon={ color } path="/colors">
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasShadowPanel && (
+					<NavigationButtonAsItem icon={ shadowIcon } path="/shadows">
+						{ __( 'Shadows' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem icon={ layout } path="/layout">
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+export default RootMenu;
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
deleted file mode 100644
index b35b64d03b124e..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-	useSetting,
-	useStyle,
-} from './hooks';
-
-function ScreenBackgroundColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
-		'color.customGradient',
-		name
-	);
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useStyle(
-		'color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
-	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
-
-	if ( ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Background' ) }
-				description={ __(
-					'Set a background color or gradient for the whole site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-background-color__control"
-				colors={ colorsPerOrigin }
-				gradients={ gradientsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				disableCustomGradients={ ! areCustomGradientsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				{ ...controlProps }
-			/>
-		</>
-	);
-}
-
-export default ScreenBackgroundColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-background.js b/packages/edit-site/src/components/global-styles/screen-background.js
new file mode 100644
index 00000000000000..df6492ba892976
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-background.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { useHasBackgroundPanel, useGlobalSetting } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenBackground() {
+	const [ settings ] = useGlobalSetting( '' );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={
+					<Text>
+						{ __( 'Set styles for the site’s background.' ) }
+					</Text>
+				}
+			/>
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;
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 f2d989fc99218d..441c4168f814aa 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
@@ -9,20 +9,36 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
-import { BlockIcon } from '@wordpress/block-editor';
+import {
+	useState,
+	useEffect,
+	useRef,
+	useDeferredValue,
+	memo,
+} from '@wordpress/element';
+import {
+	BlockIcon,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
-import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
-import { useHasTypographyPanel } from './typography-panel';
+import { useBlockVariations } from './variations/variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../lock-unlock';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+} = unlock( blockEditorPrivateApis );
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -47,29 +63,32 @@ function useSortedBlockTypes() {
 	return [ ...coreItems, ...nonCoreItems ];
 }
 
-function BlockMenuItem( { block } ) {
-	const hasTypographyPanel = useHasTypographyPanel( block.name );
-	const hasColorPanel = useHasColorPanel( block.name );
-	const hasBorderPanel = useHasBorderPanel( block.name );
-	const hasDimensionsPanel = useHasDimensionsPanel( block.name );
+export function useBlockHasGlobalStyles( blockName ) {
+	const [ rawSettings ] = useGlobalSetting( '', blockName );
+	const settings = useSettingsForBlockElement( rawSettings, blockName );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasBlockMenuItem =
-		hasTypographyPanel || hasColorPanel || hasLayoutPanel;
+	const hasVariationsPanel = !! useBlockVariations( blockName )?.length;
+	const hasGlobalStyles =
+		hasTypographyPanel ||
+		hasColorPanel ||
+		hasLayoutPanel ||
+		hasVariationsPanel;
+	return hasGlobalStyles;
+}
 
+function BlockMenuItem( { block } ) {
+	const hasBlockMenuItem = useBlockHasGlobalStyles( block.name );
 	if ( ! hasBlockMenuItem ) {
 		return null;
 	}
 
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-		__( '%s block styles' ),
-		block.title
-	);
-
 	return (
 		<NavigationButtonAsItem
-			path={ '/blocks/' + block.name }
-			aria-label={ navigationButtonLabel }
+			path={ '/blocks/' + encodeURIComponent( block.name ) }
 		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
@@ -79,22 +98,16 @@ function BlockMenuItem( { block } ) {
 	);
 }
 
-function ScreenBlockList() {
+function BlockList( { filterValue } ) {
 	const sortedBlockTypes = useSortedBlockTypes();
-	const [ filterValue, setFilterValue ] = useState( '' );
 	const debouncedSpeak = useDebounce( speak, 500 );
-	const isMatchingSearchTerm = useSelect(
-		( select ) => select( blocksStore ).isMatchingSearchTerm,
-		[]
-	);
-	const filteredBlockTypes = useMemo( () => {
-		if ( ! filterValue ) {
-			return sortedBlockTypes;
-		}
-		return sortedBlockTypes.filter( ( blockType ) =>
-			isMatchingSearchTerm( blockType, filterValue )
-		);
-	}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );
+	const { isMatchingSearchTerm } = useSelect( blocksStore );
+
+	const filteredBlockTypes = ! filterValue
+		? sortedBlockTypes
+		: sortedBlockTypes.filter( ( blockType ) =>
+				isMatchingSearchTerm( blockType, filterValue )
+		  );
 
 	const blockTypesListRef = useRef();
 
@@ -120,6 +133,27 @@ function ScreenBlockList() {
 		debouncedSpeak( resultsFoundMessage, count );
 	}, [ filterValue, debouncedSpeak ] );
 
+	return (
+		<div
+			ref={ blockTypesListRef }
+			className="edit-site-block-types-item-list"
+		>
+			{ filteredBlockTypes.map( ( block ) => (
+				<BlockMenuItem
+					block={ block }
+					key={ 'menu-itemblock-' + block.name }
+				/>
+			) ) }
+		</div>
+	);
+}
+
+const MemoizedBlockList = memo( BlockList );
+
+function ScreenBlockList() {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const deferredFilterValue = useDeferredValue( filterValue );
+
 	return (
 		<>
 			<ScreenHeader
@@ -129,23 +163,14 @@ function ScreenBlockList() {
 				) }
 			/>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }
-				label={ __( 'Search for blocks' ) }
+				label={ __( 'Search' ) }
 				placeholder={ __( 'Search' ) }
 			/>
-			<div
-				ref={ blockTypesListRef }
-				className="edit-site-block-types-item-list"
-			>
-				{ filteredBlockTypes.map( ( block ) => (
-					<BlockMenuItem
-						block={ block }
-						key={ 'menu-itemblock-' + block.name }
-					/>
-				) ) }
-			</div>
+			<MemoizedBlockList filterValue={ deferredFilterValue } />
 		</>
 	);
 }
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 10455855d97e58..347d3cd1bc0a73 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,20 +2,354 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+	__experimentalHasSplitBorders as hasSplitBorders,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ContextMenu from './context-menu';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import {
+	useBlockVariations,
+	VariationsPanel,
+} from './variations/variations-panel';
 
-function ScreenBlock( { name } ) {
+// Initial control values.
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
+};
+
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+	useHasFiltersPanel,
+	useHasImageSettingsPanel,
+	useGlobalStyle,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
+	BorderPanel: StylesBorderPanel,
+	ColorPanel: StylesColorPanel,
+	TypographyPanel: StylesTypographyPanel,
+	DimensionsPanel: StylesDimensionsPanel,
+	FiltersPanel: StylesFiltersPanel,
+	ImageSettingsPanel,
+	AdvancedPanel: StylesAdvancedPanel,
+} = unlock( blockEditorPrivateApis );
+
+function ScreenBlock( { name, variation } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ userSettings ] = useGlobalSetting( '', name, 'user' );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
+	const settingsForBlockElement = useSettingsForBlockElement(
+		rawSettings,
+		name
+	);
 	const blockType = getBlockType( name );
 
+	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	let disableBlockGap = false;
+	if (
+		settingsForBlockElement?.spacing?.blockGap &&
+		blockType?.supports?.spacing?.blockGap &&
+		( blockType?.supports?.spacing?.skipSerialization === true ||
+			blockType?.supports?.spacing?.skipSerialization?.some?.(
+				( spacingType ) => spacingType === 'blockGap'
+			) )
+	) {
+		disableBlockGap = true;
+	}
+
+	// Only allow `aspectRatio` support if the block is not the grouping block.
+	// The grouping block allows the user to use Group, Row and Stack variations,
+	// and it is highly likely that the user will not want to set an aspect ratio
+	// for all three at once. Until there is the ability to set a different aspect
+	// ratio for each variation, we disable the aspect ratio controls for the
+	// grouping block in global styles.
+	let disableAspectRatio = false;
+	if (
+		settingsForBlockElement?.dimensions?.aspectRatio &&
+		name === 'core/group'
+	) {
+		disableAspectRatio = true;
+	}
+
+	const settings = useMemo( () => {
+		const updatedSettings = structuredClone( settingsForBlockElement );
+		if ( disableBlockGap ) {
+			updatedSettings.spacing.blockGap = false;
+		}
+		if ( disableAspectRatio ) {
+			updatedSettings.dimensions.aspectRatio = false;
+		}
+		return updatedSettings;
+	}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );
+
+	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasImageSettingsPanel = useHasImageSettingsPanel(
+		name,
+		userSettings,
+		settings
+	);
+	const hasVariationsPanel = !! blockVariations?.length && ! variation;
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+		};
+	}, [] );
+	const currentBlockStyle = variation
+		? blockVariations.find( ( s ) => s.name === variation )
+		: null;
+
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
+		return {
+			...inheritedStyle,
+			layout: settings.layout,
+		};
+	}, [ inheritedStyle, settings.layout ] );
+	const styleWithLayout = useMemo( () => {
+		return {
+			...style,
+			layout: userSettings.layout,
+		};
+	}, [ style, userSettings.layout ] );
+	const onChangeDimensions = ( newStyle ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
+
+		if ( newStyle.layout !== userSettings.layout ) {
+			setSettings( {
+				...userSettings,
+				layout: newStyle.layout,
+			} );
+		}
+	};
+	const onChangeLightbox = ( newSetting ) => {
+		// If the newSetting is undefined, this means that the user has deselected
+		// (reset) the lightbox setting.
+		if ( newSetting === undefined ) {
+			setSettings( {
+				...rawSettings,
+				lightbox: undefined,
+			} );
+
+			// Otherwise, we simply set the lightbox setting to the new value but
+			// taking care of not overriding the other lightbox settings.
+		} else {
+			setSettings( {
+				...rawSettings,
+				lightbox: {
+					...rawSettings.lightbox,
+					...newSetting,
+				},
+			} );
+		}
+	};
+	const onChangeBorders = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
+
 	return (
 		<>
-			<ScreenHeader title={ blockType.title } />
-			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
+			<ScreenHeader
+				title={ variation ? currentBlockStyle?.label : blockType.title }
+			/>
+			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasVariationsPanel && (
+				<div className="edit-site-global-styles-screen-variations">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+						<VariationsPanel name={ name } />
+					</VStack>
+				</div>
+			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+				/>
+			) }
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasDimensionsPanel && (
+				<StylesDimensionsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ onChangeBorders }
+					settings={ settings }
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasImageSettingsPanel && (
+				<ImageSettingsPanel
+					onChange={ onChangeLightbox }
+					value={ userSettings }
+					inheritedValue={ settings }
+				/>
+			) }
+
+			{ canEditCSS && (
+				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
+					<p>
+						{ sprintf(
+							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+							__(
+								'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'
+							),
+							blockType?.title
+						) }
+					</p>
+					<StylesAdvancedPanel
+						value={ style }
+						onChange={ setStyle }
+						inheritedValue={ inheritedStyle }
+					/>
+				</PanelBody>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
deleted file mode 100644
index 22ff1ef1307bed..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenButtonColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
-	const hasButtonColor =
-		supports.includes( 'buttonColor' ) &&
-		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ buttonTextColor, setButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name
-	);
-	const [ userButtonTextColor ] = useStyle(
-		'elements.button.color.text',
-		name,
-		'user'
-	);
-
-	const [ buttonBgColor, setButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name
-	);
-	const [ userButtonBgColor ] = useStyle(
-		'elements.button.color.background',
-		name,
-		'user'
-	);
-
-	if ( ! hasButtonColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Buttons' ) }
-				description={ __(
-					'Set the default colors used for buttons across the site.'
-				) }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Text color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonTextColor }
-				onColorChange={ setButtonTextColor }
-				clearable={ buttonTextColor === userButtonTextColor }
-			/>
-
-			<h4 className="edit-site-global-styles-section-title">
-				{ __( 'Background color' ) }
-			</h4>
-
-			<ColorGradientControl
-				className="edit-site-screen-button-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ buttonBgColor }
-				onColorChange={ setButtonBgColor }
-				clearable={ buttonBgColor === userButtonBgColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenButtonColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index 0e5b9c5d960fc1..6d3bd6b2e130d9 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,41 +10,31 @@ import { TabPanel } from '@wordpress/components';
 import ColorPalettePanel from './color-palette-panel';
 import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 function ScreenColorPalette( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Palette' ) }
+				title={ __( 'Edit palette' ) }
 				description={ __(
-					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
+					'The combination of colors used across the site and in color pickers.'
 				) }
 			/>
-			<TabPanel
-				tabs={ [
-					{
-						name: 'solid',
-						title: 'Solid',
-						value: 'solid',
-					},
-					{
-						name: 'gradient',
-						title: 'Gradient',
-						value: 'gradient',
-					},
-				] }
-			>
-				{ ( tab ) => (
-					<>
-						{ tab.value === 'solid' && (
-							<ColorPalettePanel name={ name } />
-						) }
-						{ tab.value === 'gradient' && (
-							<GradientPalettePanel name={ name } />
-						) }
-					</>
-				) }
-			</TabPanel>
+			<Tabs>
+				<Tabs.TabList>
+					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
+				</Tabs.TabList>
+				<Tabs.TabPanel tabId="color" focusable={ false }>
+					<ColorPalettePanel name={ name } />
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="gradient" focusable={ false }>
+					<GradientPalettePanel name={ name } />
+				</Tabs.TabPanel>
+			</Tabs>
 		</>
 	);
 }
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..2f0aaf2d701014 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -2,218 +2,50 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalZStack as ZStack,
-	FlexItem,
-	ColorIndicator,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import { NavigationButtonAsItem } from './navigation-button';
-import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
-import Subtitle from './subtitle';
-import ColorIndicatorWrapper from './color-indicator-wrapper';
-
-function BackgroundColorItem( { name, parentMenu } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport =
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' );
-	const [ backgroundColor ] = useStyle( 'color.background', name );
-	const [ gradientValue ] = useStyle( 'color.gradient', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/background' }
-			aria-label={ __( 'Colors background styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ gradientValue ?? backgroundColor }
-						data-testid="background-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Background' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function TextColorItem( { name, parentMenu } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/text' }
-			aria-label={ __( 'Colors text styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator
-						colorValue={ color }
-						data-testid="text-color-indicator"
-					/>
-				</ColorIndicatorWrapper>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Text' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function LinkColorItem( { name, parentMenu } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport = supports.includes( 'linkColor' );
-	const [ color ] = useStyle( 'elements.link.color.text', name );
-	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/link' }
-			aria-label={ __( 'Colors link styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ colorHover } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Links' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function HeadingColorItem( { name, parentMenu } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport = supports.includes( 'color' );
-	const [ color ] = useStyle( 'elements.heading.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/colors/heading' }
-			aria-label={ __( 'Colors heading styles' ) }
-		>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem>{ __( 'Headings' ) }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ButtonColorItem( { name, parentMenu } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasSupport = supports.includes( 'buttonColor' );
-	const [ color ] = useStyle( 'elements.button.color.text', name );
-	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
-			<HStack justify="flex-start">
-				<ZStack isLayered={ false } offset={ -8 }>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ bgColor } />
-					</ColorIndicatorWrapper>
-					<ColorIndicatorWrapper expanded={ false }>
-						<ColorIndicator colorValue={ color } />
-					</ColorIndicatorWrapper>
-				</ZStack>
-				<FlexItem className="edit-site-global-styles__color-label">
-					{ __( 'Buttons' ) }
-				</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
-	);
-}
-
-function ScreenColors( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+import { unlock } from '../../lock-unlock';
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	ColorPanel: StylesColorPanel,
+} = unlock( blockEditorPrivateApis );
+
+function ScreenColors() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the site.'
+					'Palette colors and the application of those colors on site elements.'
 				) }
 			/>
-
-			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 10 }>
-					<Palette name={ name } />
-
-					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<BackgroundColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-							<TextColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-							<LinkColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-							<HeadingColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-							<ButtonColorItem
-								name={ name }
-								parentMenu={ parentMenu }
-							/>
-						</ItemGroup>
-					</VStack>
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<Palette />
+					<StylesColorPanel
+						inheritedValue={ inheritedStyle }
+						value={ style }
+						onChange={ setStyle }
+						settings={ settings }
+					/>
 				</VStack>
 			</div>
 		</>
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..7d67bac28824fe
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ExternalLink } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import ScreenHeader from './header';
+
+const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenCSS() {
+	const description = __(
+		'Add your own CSS to customize the appearance and layout of your site.'
+	);
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'CSS' ) }
+				description={
+					<>
+						{ description }
+						<br />
+						<ExternalLink
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
+							className="edit-site-global-styles-screen-css-help-link"
+						>
+							{ __( 'Learn more about CSS' ) }
+						</ExternalLink>
+					</>
+				}
+			/>
+			<div className="edit-site-global-styles-screen-css">
+				<StylesAdvancedPanel
+					value={ style }
+					onChange={ setStyle }
+					inheritedValue={ inheritedStyle }
+				/>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCSS;
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
deleted file mode 100644
index 4a40ebc4d4d80a..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-	useGradientsPerOrigin,
-} from './hooks';
-
-function ScreenHeadingColor( { name } ) {
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
-
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ gradients ] = useSetting( 'color.gradients', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ areCustomGradientsEnabled ] = useSetting(
-		'color.customGradient',
-		name
-	);
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-	const gradientsPerOrigin = useGradientsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const hasBackgroundColor =
-		supports.includes( 'backgroundColor' ) &&
-		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-	const hasGradientColor =
-		supports.includes( 'background' ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
-
-	const [ color, setColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
-		name
-	);
-	const [ userColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.text',
-		name,
-		'user'
-	);
-
-	const [ backgroundColor, setBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
-		name
-	);
-	const [ userBackgroundColor ] = useStyle(
-		'elements.' + selectedLevel + '.color.background',
-		name,
-		'user'
-	);
-	const [ gradient, setGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
-		name
-	);
-	const [ userGradient ] = useStyle(
-		'elements.' + selectedLevel + '.color.gradient',
-		name,
-		'user'
-	);
-
-	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
-		return null;
-	}
-
-	let backgroundSettings = {};
-	if ( hasBackgroundColor ) {
-		backgroundSettings = {
-			colorValue: backgroundColor,
-			onColorChange: setBackgroundColor,
-		};
-		if ( backgroundColor ) {
-			backgroundSettings.clearable =
-				backgroundColor === userBackgroundColor;
-		}
-	}
-
-	let gradientSettings = {};
-	if ( hasGradientColor ) {
-		gradientSettings = {
-			gradientValue: gradient,
-			onGradientChange: setGradient,
-		};
-		if ( gradient ) {
-			gradientSettings.clearable = gradient === userGradient;
-		}
-	}
-
-	const controlProps = {
-		...backgroundSettings,
-		...gradientSettings,
-	};
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Headings' ) }
-				description={ __(
-					'Set the default color used for headings across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen-heading-color">
-				<h4>{ __( 'Select heading level' ) }</h4>
-
-				<ToggleGroupControl
-					label={ __( 'Select heading level' ) }
-					hideLabelFromVision={ true }
-					value={ selectedLevel }
-					onChange={ setCurrentTab }
-					isBlock
-				>
-					<ToggleGroupControlOption
-						value="heading"
-						/* translators: 'All' refers to selecting all heading levels 
-						and applying the same style to h1-h6. */
-						label={ __( 'All' ) }
-					/>
-					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
-					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
-					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
-					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
-					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
-					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
-				</ToggleGroupControl>
-			</div>
-			{ hasTextColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
-						{ selectedLevel === 'heading'
-							? __( 'Text color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Text color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h4>
-					<ColorGradientControl
-						className="edit-site-screen-heading-text-color__control"
-						colors={ colorsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						__experimentalHasMultipleOrigins
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						colorValue={ color }
-						onColorChange={ setColor }
-						clearable={ color === userColor }
-					/>
-				</div>
-			) }
-			{ hasBackgroundColor && (
-				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
-						{ selectedLevel === 'heading'
-							? __( 'Background color for all heading levels' )
-							: sprintf(
-									/* translators: %s: heading level (h1-h6) */
-									__( 'Background color for %s' ),
-									selectedLevel.toUpperCase()
-							  ) }
-					</h4>
-					<ColorGradientControl
-						className="edit-site-screen-heading-background-color__control"
-						colors={ colorsPerOrigin }
-						gradients={ gradientsPerOrigin }
-						disableCustomColors={ ! areCustomSolidsEnabled }
-						disableCustomGradients={ ! areCustomGradientsEnabled }
-						__experimentalHasMultipleOrigins
-						showTitle={ false }
-						enableAlpha
-						__experimentalIsRenderedInSidebar
-						{ ...controlProps }
-					/>
-				</div>
-			) }
-		</>
-	);
-}
-
-export default ScreenHeadingColor;
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 74c7ac1851e1ee..b6fa9f18f18dee 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -2,23 +2,27 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import BorderPanel, { useHasBorderPanel } from './border-panel';
-import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
+import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
 
-function ScreenLayout( { name } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
-	const hasDimensionsPanel = useHasDimensionsPanel( name );
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
+
+function ScreenLayout() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
+			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
deleted file mode 100644
index 2ceb6eee2e5cb8..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-import { TabPanel } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenLinkColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const [ isLinkEnabled ] = useSetting( 'color.link', name );
-
-	const hasLinkColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const pseudoStates = {
-		default: {
-			label: __( 'Default' ),
-			value: useStyle( 'elements.link.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.color.text', name )[ 1 ],
-			userValue: useStyle(
-				'elements.link.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-		hover: {
-			label: __( 'Hover' ),
-			value: useStyle( 'elements.link.:hover.color.text', name )[ 0 ],
-			handler: useStyle( 'elements.link.:hover.color.text', name )[ 1 ],
-			userValue: useStyle(
-				'elements.link.:hover.color.text',
-				name,
-				'user'
-			)[ 0 ],
-		},
-	};
-
-	if ( ! hasLinkColor ) {
-		return null;
-	}
-
-	const tabs = Object.entries( pseudoStates ).map(
-		( [ selector, config ] ) => {
-			return {
-				name: selector,
-				title: config.label,
-				className: `color-text-${ selector }`,
-			};
-		}
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Links' ) }
-				description={ __(
-					'Set the colors used for links across the site.'
-				) }
-			/>
-
-			<TabPanel tabs={ tabs }>
-				{ ( tab ) => {
-					const pseudoSelectorConfig =
-						pseudoStates[ tab.name ] ?? null;
-
-					if ( ! pseudoSelectorConfig ) {
-						return null;
-					}
-
-					return (
-						<>
-							<ColorGradientControl
-								className="edit-site-screen-link-color__control"
-								colors={ colorsPerOrigin }
-								disableCustomColors={ ! areCustomSolidsEnabled }
-								__experimentalHasMultipleOrigins
-								showTitle={ false }
-								enableAlpha
-								__experimentalIsRenderedInSidebar
-								colorValue={ pseudoSelectorConfig.value }
-								onColorChange={ pseudoSelectorConfig.handler }
-								clearable={
-									pseudoSelectorConfig.value ===
-									pseudoSelectorConfig.userValue
-								}
-							/>
-						</>
-					);
-				} }
-			</TabPanel>
-		</>
-	);
-}
-
-export default ScreenLinkColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
new file mode 100644
index 00000000000000..a50b8f13d55cc2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -0,0 +1,202 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalConfirmDialog as ConfirmDialog,
+	Spinner,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useState, useEffect } from '@wordpress/element';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from '../header';
+import { unlock } from '../../../lock-unlock';
+import Revisions from '../../revisions';
+import { store as editSiteStore } from '../../../store';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
+import RevisionsButtons from './revisions-buttons';
+import StyleBook from '../../style-book';
+import Pagination from '../../pagination';
+
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+
+const PAGE_SIZE = 10;
+
+function ScreenRevisions() {
+	const { user: currentEditorGlobalStyles, setUserConfig } =
+		useContext( GlobalStylesContext );
+	const { blocks, editorCanvasContainerView } = useSelect(
+		( select ) => ( {
+			editorCanvasContainerView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			blocks: select( blockEditorStore ).getBlocks(),
+		} ),
+		[]
+	);
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const [ currentRevisions, setCurrentRevisions ] = useState( [] );
+	const { revisions, isLoading, hasUnsavedChanges, revisionsCount } =
+		useGlobalStylesRevisions( {
+			query: {
+				per_page: PAGE_SIZE,
+				page: currentPage,
+			},
+		} );
+
+	const numPages = Math.ceil( revisionsCount / PAGE_SIZE );
+
+	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
+		useState( currentEditorGlobalStyles );
+	const [
+		isLoadingRevisionWithUnsavedChanges,
+		setIsLoadingRevisionWithUnsavedChanges,
+	] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(
+		currentlySelectedRevision,
+		currentEditorGlobalStyles
+	);
+
+	// The actual code that triggers the revisions screen to navigate back
+	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
+	const onCloseRevisions = () => {
+		const canvasContainerView =
+			editorCanvasContainerView === 'global-styles-revisions:style-book'
+				? 'style-book'
+				: undefined;
+		setEditorCanvasContainerView( canvasContainerView );
+	};
+
+	const restoreRevision = ( revision ) => {
+		setUserConfig( () => revision );
+		setIsLoadingRevisionWithUnsavedChanges( false );
+		onCloseRevisions();
+	};
+
+	useEffect( () => {
+		if ( ! isLoading && revisions.length ) {
+			setCurrentRevisions( revisions );
+		}
+	}, [ revisions, isLoading ] );
+
+	const firstRevision = revisions[ 0 ];
+	const currentlySelectedRevisionId = currentlySelectedRevision?.id;
+	const shouldSelectFirstItem =
+		!! firstRevision?.id &&
+		! selectedRevisionMatchesEditorStyles &&
+		! currentlySelectedRevisionId;
+
+	useEffect( () => {
+		/*
+		 * Ensure that the first item is selected and loaded into the preview pane
+		 * when no revision is selected and the selected styles don't match the current editor styles.
+		 * This is required in case editor styles are changed outside the revisions panel,
+		 * e.g., via the reset styles function of useGlobalStylesReset().
+		 * See: https://github.com/WordPress/gutenberg/issues/55866
+		 */
+		if ( shouldSelectFirstItem ) {
+			setCurrentlySelectedRevision( firstRevision );
+		}
+	}, [ shouldSelectFirstItem, firstRevision ] );
+
+	// Only display load button if there is a revision to load,
+	// and it is different from the current editor styles.
+	const isLoadButtonEnabled =
+		!! currentlySelectedRevisionId &&
+		currentlySelectedRevisionId !== 'unsaved' &&
+		! selectedRevisionMatchesEditorStyles;
+	const hasRevisions = !! currentRevisions.length;
+
+	return (
+		<>
+			<ScreenHeader
+				title={
+					revisionsCount &&
+					// translators: %s: number of revisions.
+					sprintf( __( 'Revisions (%s)' ), revisionsCount )
+				}
+				description={ __(
+					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
+				) }
+				onBack={ onCloseRevisions }
+			/>
+			{ ! hasRevisions && (
+				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
+			) }
+			{ hasRevisions &&
+				( editorCanvasContainerView ===
+				'global-styles-revisions:style-book' ? (
+					<StyleBook
+						userConfig={ currentlySelectedRevision }
+						isSelected={ () => {} }
+						onClose={ () => {
+							setEditorCanvasContainerView(
+								'global-styles-revisions'
+							);
+						} }
+					/>
+				) : (
+					<Revisions
+						blocks={ blocks }
+						userConfig={ currentlySelectedRevision }
+						closeButtonLabel={ __( 'Close revisions' ) }
+					/>
+				) ) }
+			<RevisionsButtons
+				onChange={ setCurrentlySelectedRevision }
+				selectedRevisionId={ currentlySelectedRevisionId }
+				userRevisions={ currentRevisions }
+				canApplyRevision={ isLoadButtonEnabled }
+				onApplyRevision={ () =>
+					hasUnsavedChanges
+						? setIsLoadingRevisionWithUnsavedChanges( true )
+						: restoreRevision( currentlySelectedRevision )
+				}
+			/>
+			{ numPages > 1 && (
+				<div className="edit-site-global-styles-screen-revisions__footer">
+					<Pagination
+						className="edit-site-global-styles-screen-revisions__pagination"
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ setCurrentPage }
+						totalItems={ revisionsCount }
+						disabled={ isLoading }
+						label={ __( 'Global Styles pagination navigation' ) }
+					/>
+				</div>
+			) }
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( 'Apply' ) }
+					onConfirm={ () =>
+						restoreRevision( currentlySelectedRevision )
+					}
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+					size="medium"
+				>
+					{ __(
+						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
+					) }
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+export default ScreenRevisions;
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
new file mode 100644
index 00000000000000..d6acd711108b5c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
@@ -0,0 +1,238 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Composite } from '@wordpress/components';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
+const { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );
+
+function ChangesSummary( { revision, previousRevision } ) {
+	const changes = getGlobalStylesChanges( revision, previousRevision, {
+		maxResults: 7,
+	} );
+
+	if ( ! changes.length ) {
+		return null;
+	}
+
+	return (
+		<ul
+			data-testid="global-styles-revision-changes"
+			className="edit-site-global-styles-screen-revisions__changes"
+		>
+			{ changes.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
+	);
+}
+
+/**
+ * Returns a button label for the revision.
+ *
+ * @param {string|number} id                    A revision object.
+ * @param {string}        authorDisplayName     Author name.
+ * @param {string}        formattedModifiedDate Revision modified date formatted.
+ * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.
+ * @return {string} Translated label.
+ */
+function getRevisionLabel(
+	id,
+	authorDisplayName,
+	formattedModifiedDate,
+	areStylesEqual
+) {
+	if ( 'parent' === id ) {
+		return __( 'Reset the styles to the theme defaults' );
+	}
+
+	if ( 'unsaved' === id ) {
+		return sprintf(
+			/* translators: %s: author display name */
+			__( 'Unsaved changes by %s' ),
+			authorDisplayName
+		);
+	}
+
+	return areStylesEqual
+		? sprintf(
+				// translators: 1: author display name. 2: revision creation date.
+				__(
+					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
+				),
+				authorDisplayName,
+				formattedModifiedDate
+		  )
+		: sprintf(
+				// translators: 1: author display name. 2: revision creation date.
+				__( 'Changes saved by %1$s on %2$s' ),
+				authorDisplayName,
+				formattedModifiedDate
+		  );
+}
+
+/**
+ * Returns a rendered list of revisions buttons.
+ *
+ * @typedef {Object} props
+ * @property {Array<Object>} userRevisions      A collection of user revisions.
+ * @property {number}        selectedRevisionId The id of the currently-selected revision.
+ * @property {Function}      onChange           Callback fired when a revision is selected.
+ *
+ * @param    {props}         Component          props.
+ * @return {JSX.Element} The modal component.
+ */
+function RevisionsButtons( {
+	userRevisions,
+	selectedRevisionId,
+	onChange,
+	canApplyRevision,
+	onApplyRevision,
+} ) {
+	const { currentThemeName, currentUser } = useSelect( ( select ) => {
+		const { getCurrentTheme, getCurrentUser } = select( coreStore );
+		const currentTheme = getCurrentTheme();
+		return {
+			currentThemeName:
+				currentTheme?.name?.rendered || currentTheme?.stylesheet,
+			currentUser: getCurrentUser(),
+		};
+	}, [] );
+	const dateNowInMs = getDate().getTime();
+	const { datetimeAbbreviated } = getSettings().formats;
+
+	return (
+		<Composite
+			orientation="vertical"
+			className="edit-site-global-styles-screen-revisions__revisions-list"
+			aria-label={ __( 'Global styles revisions list' ) }
+			role="listbox"
+		>
+			{ userRevisions.map( ( revision, index ) => {
+				const { id, author, modified } = revision;
+				const isUnsaved = 'unsaved' === id;
+				// Unsaved changes are created by the current user.
+				const revisionAuthor = isUnsaved ? currentUser : author;
+				const authorDisplayName = revisionAuthor?.name || __( 'User' );
+				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
+				const isFirstItem = index === 0;
+				const isSelected = selectedRevisionId
+					? selectedRevisionId === id
+					: isFirstItem;
+				const areStylesEqual = ! canApplyRevision && isSelected;
+				const isReset = 'parent' === id;
+				const modifiedDate = getDate( modified );
+				const displayDate =
+					modified &&
+					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
+						? dateI18n( datetimeAbbreviated, modifiedDate )
+						: humanTimeDiff( modified );
+				const revisionLabel = getRevisionLabel(
+					id,
+					authorDisplayName,
+					dateI18n( datetimeAbbreviated, modifiedDate ),
+					areStylesEqual
+				);
+
+				return (
+					<Composite.Item
+						key={ id }
+						className="edit-site-global-styles-screen-revisions__revision-item"
+						aria-current={ isSelected }
+						role="option"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
+								onChange( revision );
+							}
+						} }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onChange( revision );
+						} }
+						aria-selected={ isSelected }
+						aria-label={ revisionLabel }
+						render={ <div /> }
+					>
+						<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
+							{ isReset ? (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									{ __( 'Default styles' ) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										{ currentThemeName }
+									</span>
+								</span>
+							) : (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									{ isUnsaved ? (
+										<span className="edit-site-global-styles-screen-revisions__date">
+											{ __( '(Unsaved)' ) }
+										</span>
+									) : (
+										<time
+											className="edit-site-global-styles-screen-revisions__date"
+											dateTime={ modified }
+										>
+											{ displayDate }
+										</time>
+									) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										<img
+											alt={ authorDisplayName }
+											src={ authorAvatar }
+										/>
+										{ authorDisplayName }
+									</span>
+									{ isSelected && (
+										<ChangesSummary
+											revision={ revision }
+											previousRevision={
+												index < userRevisions.length
+													? userRevisions[ index + 1 ]
+													: {}
+											}
+										/>
+									) }
+								</span>
+							) }
+						</span>
+						{ isSelected &&
+							( areStylesEqual ? (
+								<p className="edit-site-global-styles-screen-revisions__applied-text">
+									{ __(
+										'These styles are already applied to your site.'
+									) }
+								</p>
+							) : (
+								<Button
+									size="compact"
+									variant="primary"
+									className="edit-site-global-styles-screen-revisions__apply-button"
+									onClick={ onApplyRevision }
+									aria-label={ __(
+										'Apply the selected revision to your site.'
+									) }
+								>
+									{ isReset
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
+								</Button>
+							) ) }
+					</Composite.Item>
+				);
+			} ) }
+		</Composite>
+	);
+}
+
+export default RevisionsButtons;
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
new file mode 100644
index 00000000000000..1773d1a179b3dd
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -0,0 +1,190 @@
+.edit-site-global-styles-screen-revisions__revisions-list {
+	list-style: none;
+	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
+	// Forces subsequent flex items to the bottom.
+	flex-grow: 1;
+	li {
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__revision-item {
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+
+	&[role="option"]:active,
+	&[role="option"]:focus {
+		@include button-style__focus();
+	}
+
+	&:hover {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
+	&::before,
+	&::after {
+		position: absolute;
+		content: "\a";
+		display: block;
+	}
+
+	&::before {
+		background: $gray-300;
+		border-radius: 50%;
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		top: $grid-unit-20 + 2;
+		left: $grid-unit-20 + 1; // So the circle is centered on the line.
+		transform: translate(-50%, -50%);
+		z-index: 1;
+
+		// This border serves as a background color in Windows High Contrast mode.
+		border: 4px solid transparent;
+	}
+
+	&[aria-selected="true"] {
+		border-radius: $radius-small;
+
+		// Only visible in Windows High Contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: -2px;
+
+		color: var(--wp-admin-theme-color);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&::before {
+			background: var(--wp-admin-theme-color);
+		}
+
+		.edit-site-global-styles-screen-revisions__changes > li,
+		.edit-site-global-styles-screen-revisions__meta,
+		.edit-site-global-styles-screen-revisions__applied-text {
+			color: $gray-900;
+		}
+	}
+
+	&::after {
+		height: 100%;
+		left: $grid-unit-20;
+		top: 0;
+		width: 0;
+		border: 0.5px solid $gray-300;
+	}
+
+	&:first-child::after {
+		top: $grid-unit-20 + 2;
+	}
+
+	&:last-child::after {
+		height: $grid-unit-20 + 2;
+	}
+}
+.edit-site-global-styles-screen-revisions__revision-item-wrapper {
+	display: block;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
+}
+
+.edit-site-global-styles-screen-revisions__apply-button.is-primary,
+.edit-site-global-styles-screen-revisions__applied-text {
+	align-self: flex-start;
+	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
+	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
+}
+
+.edit-site-global-styles-screen-revisions__changes,
+.edit-site-global-styles-screen-revisions__meta,
+.edit-site-global-styles-screen-revisions__applied-text {
+	color: $gray-700;
+	font-size: 12px;
+}
+
+.edit-site-global-styles-screen-revisions__description {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-10;
+	.edit-site-global-styles-screen-revisions__date {
+		text-transform: uppercase;
+		font-weight: 600;
+		font-size: 12px;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__meta {
+	display: flex;
+	justify-content: start;
+	width: 100%;
+	align-items: flex-start;
+	text-align: left;
+	margin-bottom: $grid-unit-05;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		border-radius: 100%;
+		margin-right: $grid-unit-10;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__loading {
+	margin: $grid-unit-30 auto !important;
+}
+
+.edit-site-global-styles-screen-revisions__changes {
+	text-align: left;
+	line-height: $default-line-height;
+	margin-left: $grid-unit-15;
+	list-style: disc;
+
+	li {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
+	justify-content: space-between;
+	gap: 2px;
+	.edit-site-pagination__total {
+		position: absolute;
+		left: -1000px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+	}
+
+	.components-text {
+		font-size: 12px;
+		// `will-change` is required because something about flex props prevents
+		// Safari from rendering the page / total text.
+		will-change: opacity;
+	}
+
+	.components-button.is-tertiary {
+		color: $gray-900;
+	}
+
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
+		color: $gray-600;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__footer {
+	height: $grid-unit-70;
+	z-index: 1;
+	position: sticky;
+	min-width: 100%;
+	bottom: 0;
+	background: $white;
+	padding: $grid-unit-15;
+	border-top: $border-width solid $gray-300;
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js
new file mode 100644
index 00000000000000..0262086e58b2ad
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js
@@ -0,0 +1,228 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useGlobalStylesRevisions from '../use-global-styles-revisions';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+jest.mock( '@wordpress/element', () => {
+	return {
+		__esModule: true,
+		...jest.requireActual( '@wordpress/element' ),
+		useContext: jest.fn().mockImplementation( () => ( {
+			user: {
+				styles: 'ice-cream',
+				settings: 'cake',
+			},
+		} ) ),
+	};
+} );
+
+describe( 'useGlobalStylesRevisions', () => {
+	const selectValue = {
+		authors: [
+			{
+				id: 4,
+				name: 'sam',
+			},
+		],
+		currentUser: {
+			name: 'fred',
+			avatar_urls: {},
+		},
+		isDirty: false,
+		revisions: [
+			{
+				id: 1,
+				author: 4,
+				settings: {},
+				styles: {},
+			},
+		],
+		isLoadingGlobalStylesRevisions: false,
+		revisionsCount: 1,
+	};
+
+	it( 'returns loaded revisions with no unsaved changes', () => {
+		useSelect.mockImplementation( () => selectValue );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns loaded revisions with saved changes', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isDirty: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( true );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					avatar_urls: {},
+					name: 'fred',
+				},
+				id: 'unsaved',
+				modified: revisions[ 0 ].modified,
+				settings: 'cake',
+				styles: 'ice-cream',
+			},
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns empty revisions', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			revisions: [],
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+
+	it( 'returns loading status when resolving global revisions', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isLoadingGlobalStylesRevisions: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { isLoading } = result.current;
+
+		expect( isLoading ).toBe( true );
+	} );
+
+	it( 'returns empty revisions when authors are not yet available', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			authors: [],
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( true );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+
+	it( 'should prepend unsaved changes item and append reset item to paginated results', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			revisionsCount: 2,
+			isDirty: true,
+		} ) );
+
+		// Prepend unsaved changes item to paginated results.
+		const { result: resultPrepend } = renderHook( () =>
+			useGlobalStylesRevisions( {
+				query: {
+					per_page: 1,
+					page: 1,
+				},
+			} )
+		);
+		expect( resultPrepend.current.revisions ).toEqual( [
+			{
+				author: {
+					avatar_urls: {},
+					name: 'fred',
+				},
+				id: 'unsaved',
+				modified: resultPrepend.current.revisions[ 0 ].modified,
+				settings: 'cake',
+				styles: 'ice-cream',
+			},
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+
+		// Append reset item to paginated results.
+		const { result: resultAppend } = renderHook( () =>
+			useGlobalStylesRevisions( {
+				query: {
+					per_page: 1,
+					page: 2,
+				},
+			} )
+		);
+		expect( resultAppend.current.revisions ).toEqual( [
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				settings: {},
+				styles: {},
+			},
+			{
+				id: 'parent',
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
new file mode 100644
index 00000000000000..024fb74ef97cf2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -0,0 +1,159 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const SITE_EDITOR_AUTHORS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,avatar_urls',
+	context: 'view',
+	capabilities: [ 'edit_theme_options' ],
+};
+const DEFAULT_QUERY = { per_page: 100, page: 1 };
+const EMPTY_ARRAY = [];
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+export default function useGlobalStylesRevisions( { query } = {} ) {
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const _query = { ...DEFAULT_QUERY, ...query };
+	const {
+		authors,
+		currentUser,
+		isDirty,
+		revisions,
+		isLoadingGlobalStylesRevisions,
+		revisionsCount,
+	} = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getCurrentUser,
+				getUsers,
+				getRevisions,
+				__experimentalGetCurrentGlobalStylesId,
+				getEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const _currentUser = getCurrentUser();
+			const _isDirty = dirtyEntityRecords.length > 0;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			const _revisionsCount =
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+			const globalStylesRevisions =
+				getRevisions(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					_query
+				) || EMPTY_ARRAY;
+			const _authors =
+				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
+			const _isResolving = isResolving( 'getRevisions', [
+				'root',
+				'globalStyles',
+				globalStylesId,
+				_query,
+			] );
+			return {
+				authors: _authors,
+				currentUser: _currentUser,
+				isDirty: _isDirty,
+				revisions: globalStylesRevisions,
+				isLoadingGlobalStylesRevisions: _isResolving,
+				revisionsCount: _revisionsCount,
+			};
+		},
+		[ query ]
+	);
+	return useMemo( () => {
+		if ( ! authors.length || isLoadingGlobalStylesRevisions ) {
+			return {
+				revisions: EMPTY_ARRAY,
+				hasUnsavedChanges: isDirty,
+				isLoading: true,
+				revisionsCount,
+			};
+		}
+
+		// Adds author details to each revision.
+		const _modifiedRevisions = revisions.map( ( revision ) => {
+			return {
+				...revision,
+				author: authors.find(
+					( author ) => author.id === revision.author
+				),
+			};
+		} );
+
+		const fetchedRevisionsCount = revisions.length;
+
+		if ( fetchedRevisionsCount ) {
+			// Flags the most current saved revision.
+			if (
+				_modifiedRevisions[ 0 ].id !== 'unsaved' &&
+				_query.page === 1
+			) {
+				_modifiedRevisions[ 0 ].isLatest = true;
+			}
+
+			// Adds an item for unsaved changes.
+			if (
+				isDirty &&
+				userConfig &&
+				Object.keys( userConfig ).length > 0 &&
+				currentUser &&
+				_query.page === 1
+			) {
+				const unsavedRevision = {
+					id: 'unsaved',
+					styles: userConfig?.styles,
+					settings: userConfig?.settings,
+					_links: userConfig?._links,
+					author: {
+						name: currentUser?.name,
+						avatar_urls: currentUser?.avatar_urls,
+					},
+					modified: new Date(),
+				};
+
+				_modifiedRevisions.unshift( unsavedRevision );
+			}
+
+			if (
+				_query.page === Math.ceil( revisionsCount / _query.per_page )
+			) {
+				// Adds an item for the default theme styles.
+				_modifiedRevisions.push( {
+					id: 'parent',
+					styles: {},
+					settings: {},
+				} );
+			}
+		}
+
+		return {
+			revisions: _modifiedRevisions,
+			hasUnsavedChanges: isDirty,
+			isLoading: false,
+			revisionsCount,
+		};
+	}, [
+		isDirty,
+		revisions,
+		currentUser,
+		authors,
+		userConfig,
+		isLoadingGlobalStylesRevisions,
+	] );
+}
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..ffa85b046ead71 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -16,40 +16,58 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
-import StylesPreview from './preview';
+import RootMenu from './root-menu';
+import PreviewStyles from './preview-styles';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function ScreenRoot() {
-	const { variations } = useSelect( ( select ) => {
+	const [ customCSS ] = useGlobalStyle( 'css' );
+
+	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
+		const {
+			getEntityRecord,
+			__experimentalGetCurrentGlobalStylesId,
+			__experimentalGetCurrentThemeGlobalStylesVariations,
+		} = select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
 		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			hasVariations:
+				!! __experimentalGetCurrentThemeGlobalStylesVariations()
+					?.length,
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
 
 	return (
-		<Card size="small">
+		<Card
+			size="small"
+			className="edit-site-global-styles-screen-root"
+			isRounded={ false }
+		>
 			<CardBody>
 				<VStack spacing={ 4 }>
-					<Card>
-						<CardMedia>
-							<StylesPreview />
+					<Card className="edit-site-global-styles-screen-root__active-style-tile">
+						<CardMedia className="edit-site-global-styles-screen-root__active-style-tile-preview">
+							<PreviewStyles />
 						</CardMedia>
 					</Card>
-					{ !! variations?.length && (
+					{ hasVariations && (
 						<ItemGroup>
-							<NavigationButtonAsItem
-								path="/variations"
-								aria-label={ __( 'Browse styles' ) }
-							>
+							<NavigationButtonAsItem path="/variations">
 								<HStack justify="space-between">
 									<FlexItem>
 										{ __( 'Browse styles' ) }
@@ -63,7 +81,7 @@ function ScreenRoot() {
 							</NavigationButtonAsItem>
 						</ItemGroup>
 					) }
-					<ContextMenu />
+					<RootMenu />
 				</VStack>
 			</CardBody>
 
@@ -75,7 +93,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 }
@@ -85,10 +104,7 @@ function ScreenRoot() {
 					) }
 				</Spacer>
 				<ItemGroup>
-					<NavigationButtonAsItem
-						path="/blocks"
-						aria-label={ __( 'Blocks styles' ) }
-					>
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
@@ -98,6 +114,38 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
+
+			{ canEditCSS && !! customCSS && (
+				<>
+					<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">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Additional CSS' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
+					</CardBody>
+				</>
+			) }
 		</Card>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-shadows.js b/packages/edit-site/src/components/global-styles/screen-shadows.js
new file mode 100644
index 00000000000000..3645787f9a77f6
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-shadows.js
@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import ShadowsPanel from './shadows-panel';
+import ShadowsEditPanel from './shadows-edit-panel';
+
+export function ScreenShadows() {
+	return <ShadowsPanel />;
+}
+
+export function ScreenShadowsEdit() {
+	return <ShadowsEditPanel />;
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index dfdc6f67f340cb..f6036aaace4358 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -1,176 +1,54 @@
-/**
- * External dependencies
- */
-import { isEqual } from 'lodash';
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useContext,
-	useState,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
 import {
-	__experimentalGrid as Grid,
-	Card,
-	CardBody,
-} from '@wordpress/components';
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { Card, CardBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import { GlobalStylesContext } from './context';
-import StylesPreview from './preview';
 import ScreenHeader from './header';
+import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
+import { unlock } from '../../lock-unlock';
 
-function compareVariations( a, b ) {
-	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
-}
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
-	}, [ user, variation ] );
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ variation?.title }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
-			>
-				<div className="edit-site-global-styles-variations_item-preview">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+const { useZoomOut } = unlock( blockEditorPrivateApis );
 
 function ScreenStyleVariations() {
-	const { variations, mode } = useSelect( ( select ) => {
-		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
-
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
-		};
+	// Style Variations should only be previewed in with
+	// - a "zoomed out" editor (but not when in preview mode)
+	// - "Desktop" device preview
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
 	}, [] );
-
-	const withEmptyVariation = useMemo( () => {
-		return [
-			{
-				title: __( 'Default' ),
-				settings: {},
-				styles: {},
-			},
-			...variations.map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
-		];
-	}, [ variations ] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
-	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	const { setDeviceType } = useDispatch( editorStore );
+	useZoomOut( ! isPreviewMode );
 	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
-			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
-			};
-		}
-	}, [] );
+		setDeviceType( 'desktop' );
+	}, [ setDeviceType ] );
 
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
 					'Choose a variation to change the look of the site.'
 				) }
 			/>
 
-			<Card size="small" isBorderless>
+			<Card
+				size="small"
+				isBorderless
+				className="edit-site-global-styles-screen-style-variations"
+			>
 				<CardBody>
-					<Grid columns={ 2 }>
-						{ withEmptyVariation?.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation } />
-						) ) }
-					</Grid>
+					<SidebarNavigationScreenGlobalStylesContent />
 				</CardBody>
 			</Card>
 		</>
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
deleted file mode 100644
index 4c212adfe33475..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import {
-	getSupportedGlobalStylesPanels,
-	useSetting,
-	useStyle,
-	useColorsPerOrigin,
-} from './hooks';
-
-function ScreenTextColor( { name } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ solids ] = useSetting( 'color.palette', name );
-	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
-
-	const colorsPerOrigin = useColorsPerOrigin( name );
-
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
-
-	if ( ! hasTextColor ) {
-		return null;
-	}
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Text' ) }
-				description={ __(
-					'Set the default color used for text across the site.'
-				) }
-			/>
-			<ColorGradientControl
-				className="edit-site-screen-text-color__control"
-				colors={ colorsPerOrigin }
-				disableCustomColors={ ! areCustomSolidsEnabled }
-				__experimentalHasMultipleOrigins
-				showTitle={ false }
-				enableAlpha
-				__experimentalIsRenderedInSidebar
-				colorValue={ color }
-				onColorChange={ setColor }
-				clearable={ color === userColor }
-			/>
-		</>
-	);
-}
-
-export default ScreenTextColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 76d7d6de5df90d..8a8150e1578719 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -29,13 +29,17 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on headings.' ),
 		title: __( 'Headings' ),
 	},
+	caption: {
+		description: __( 'Manage the fonts and typography used on captions.' ),
+		title: __( 'Captions' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),
 	},
 };
 
-function ScreenTypographyElement( { name, element } ) {
+function ScreenTypographyElement( { element } ) {
 	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
 
 	return (
@@ -46,7 +50,6 @@ function ScreenTypographyElement( { name, element } ) {
 			/>
 			<Spacer marginX={ 4 }>
 				<TypographyPreview
-					name={ name }
 					element={ element }
 					headingLevel={ headingLevel }
 				/>
@@ -64,39 +67,50 @@ function ScreenTypographyElement( { name, element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
-							/* translators: 'All' refers to selecting all heading levels 
-							and applying the same style to h1-h6. */
-							label={ __( 'All' ) }
+							showTooltip
+							aria-label={ __( 'All headings' ) }
+							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"
+							showTooltip
+							aria-label={ __( 'Heading 1' ) }
 							label={ __( 'H1' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h2"
+							showTooltip
+							aria-label={ __( 'Heading 2' ) }
 							label={ __( 'H2' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h3"
+							showTooltip
+							aria-label={ __( 'Heading 3' ) }
 							label={ __( 'H3' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h4"
+							showTooltip
+							aria-label={ __( 'Heading 4' ) }
 							label={ __( 'H4' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h5"
+							showTooltip
+							aria-label={ __( 'Heading 5' ) }
 							label={ __( 'H5' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h6"
+							showTooltip
+							aria-label={ __( 'Heading 6' ) }
 							label={ __( 'H6' ) }
 						/>
 					</ToggleGroupControl>
 				</Spacer>
 			) }
 			<TypographyPanel
-				name={ name }
 				element={ element }
 				headingLevel={ headingLevel }
 			/>
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..3739e3234258bd 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -1,127 +1,43 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
+import TypographyElements from './typography-elements';
 import ScreenHeader from './header';
-import { NavigationButtonAsItem } from './navigation-button';
-import { useStyle } from './hooks';
-import Subtitle from './subtitle';
-import TypographyPanel from './typography-panel';
-
-function Item( { name, parentMenu, element, label } ) {
-	const hasSupport = ! name;
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
-	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
-	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
-	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
-	const [ letterSpacing ] = useStyle(
-		prefix + 'typography.letterSpacing',
-		name
-	);
-	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
-	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
-	const [ color ] = useStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
-
-	const navigationButtonLabel = sprintf(
-		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
-		__( 'Typography %s styles' ),
-		label
-	);
-
-	return (
-		<NavigationButtonAsItem
-			path={ parentMenu + '/typography/' + element }
-			aria-label={ navigationButtonLabel }
-		>
-			<HStack justify="flex-start">
-				<FlexItem
-					className="edit-site-global-styles-screen-typography__indicator"
-					style={ {
-						fontFamily: fontFamily ?? 'serif',
-						background: gradientValue ?? backgroundColor,
-						color,
-						fontStyle,
-						fontWeight,
-						letterSpacing,
-						...extraStyles,
-					} }
-				>
-					{ __( 'Aa' ) }
-				</FlexItem>
-				<FlexItem>{ label }</FlexItem>
-			</HStack>
-		</NavigationButtonAsItem>
+import TypographyVariations from './variations/variations-typography';
+import FontSizesCount from './font-sizes/font-sizes-count';
+import FontFamilies from './font-families';
+
+function ScreenTypography() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
 	);
-}
-
-function ScreenTypography( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the typography settings for different elements.'
+					'Available fonts, typographic styles, and the application of those styles.'
 				) }
 			/>
-
-			{ ! name && (
-				<div className="edit-site-global-styles-screen-typography">
-					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="text"
-								label={ __( 'Text' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="link"
-								label={ __( 'Links' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="heading"
-								label={ __( 'Headings' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="button"
-								label={ __( 'Buttons' ) }
-							/>
-						</ItemGroup>
-					</VStack>
-				</div>
-			) }
-			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && <TypographyPanel name={ name } element="text" /> }
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations title={ __( 'Typesets' ) } />
+					{ fontLibraryEnabled && <FontFamilies /> }
+					<TypographyElements />
+					<FontSizesCount />
+				</VStack>
+			</div>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/shadow-utils.js b/packages/edit-site/src/components/global-styles/shadow-utils.js
new file mode 100644
index 00000000000000..a98f6306bb3f35
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadow-utils.js
@@ -0,0 +1,158 @@
+export const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 20, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+export function getShadowParts( shadow ) {
+	const shadowValues = shadow.match( /(?:[^,(]|\([^)]*\))+/g ) || [];
+	return shadowValues.map( ( value ) => value.trim() );
+}
+
+export function shadowStringToObject( shadowValue ) {
+	/*
+	 * Shadow spec: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+	 * Shadow string format: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]
+	 *
+	 * A shadow to be valid it must satisfy the following.
+	 *
+	 * 1. Should not contain "none" keyword.
+	 * 2. Values x, y, blur, spread should be in the order. Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	 * 3. Should not contain more than one set of x, y, blur, spread values.
+	 * 4. Should contain at least x and y values. Others are optional.
+	 * 5. Should not contain more than one "inset" (case insensitive) keyword.
+	 * 6. Should not contain more than one color value.
+	 */
+
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	if ( ! shadowValue ) {
+		return defaultShadow;
+	}
+
+	// Rule 1: Should not contain "none" keyword.
+	// if the shadow has "none" keyword, it is not a valid shadow string
+	if ( shadowValue.includes( 'none' ) ) {
+		return defaultShadow;
+	}
+
+	// Rule 2: Values x, y, blur, spread should be in the order.
+	//		   Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	// Extract length values (x, y, blur, spread) from shadow string
+	// Regex match groups of 1 to 4 length values.
+	const lengthsRegex =
+		/((?:^|\s+)(-?\d*\.?\d+(?:px|%|in|cm|mm|em|rem|ex|pt|pc|vh|vw|vmin|vmax|ch|lh)?)(?=\s|$)(?![^(]*\))){1,4}/g;
+	const matches = shadowValue.match( lengthsRegex ) || [];
+
+	// Rule 3: Should not contain more than one set of x, y, blur, spread values.
+	// if the string doesn't contain exactly 1 set of x, y, blur, spread values,
+	// it is not a valid shadow string
+	if ( matches.length !== 1 ) {
+		return defaultShadow;
+	}
+
+	// Extract length values (x, y, blur, spread) from shadow string
+	const lengths = matches[ 0 ]
+		.split( ' ' )
+		.map( ( value ) => value.trim() )
+		.filter( ( value ) => value );
+
+	// Rule 4: Should contain at least x and y values. Others are optional.
+	if ( lengths.length < 2 ) {
+		return defaultShadow;
+	}
+
+	// Rule 5: Should not contain more than one "inset" (case insensitive) keyword.
+	// check if the shadow string contains "inset" keyword
+	const insets = shadowValue.match( /inset/gi ) || [];
+	if ( insets.length > 1 ) {
+		return defaultShadow;
+	}
+
+	// Strip lengths and inset from shadow string, leaving just color.
+	const hasInset = insets.length === 1;
+	let colorString = shadowValue.replace( lengthsRegex, '' ).trim();
+	if ( hasInset ) {
+		colorString = colorString
+			.replace( 'inset', '' )
+			.replace( 'INSET', '' )
+			.trim();
+	}
+
+	// Rule 6: Should not contain more than one color value.
+	// validate color string with regular expression
+	// check if color has matching hex, rgb or hsl values
+	const colorRegex =
+		/^#([0-9a-f]{3}){1,2}$|^#([0-9a-f]{4}){1,2}$|^(?:rgb|hsl)a?\(?[\d*\.?\d+%?,?\/?\s]*\)$/gi;
+	let colorMatches = ( colorString.match( colorRegex ) || [] )
+		.map( ( value ) => value?.trim() )
+		.filter( ( value ) => value );
+
+	// If color string has more than one color values, it is not a valid
+	if ( colorMatches.length > 1 ) {
+		return defaultShadow;
+	} else if ( colorMatches.length === 0 ) {
+		// check if color string has multiple named color values separated by space
+		colorMatches = colorString
+			.trim()
+			.split( ' ' )
+			.filter( ( value ) => value );
+		// If color string has more than one color values, it is not a valid
+		if ( colorMatches.length > 1 ) {
+			return defaultShadow;
+		}
+	}
+
+	// Return parsed shadow object.
+	const [ x, y, blur, spread ] = lengths;
+	return {
+		x,
+		y,
+		blur: blur || defaultShadow.blur,
+		spread: spread || defaultShadow.spread,
+		inset: hasInset,
+		color: colorString || defaultShadow.color,
+	};
+}
+
+export function shadowObjectToString( shadowObj ) {
+	const shadowString = `${ shadowObj.x || '0px' } ${ shadowObj.y || '0px' } ${
+		shadowObj.blur || '0px'
+	} ${ shadowObj.spread || '0px' }`;
+
+	return `${ shadowObj.inset ? 'inset' : '' } ${ shadowString } ${
+		shadowObj.color || ''
+	}`.trim();
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
new file mode 100644
index 00000000000000..f26a8a5ed17436
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -0,0 +1,521 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalInputControl as InputControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalGrid as Grid,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	useNavigator,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalConfirmDialog as ConfirmDialog,
+	Dropdown,
+	Button,
+	Flex,
+	FlexItem,
+	ColorPalette,
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	plus,
+	shadow as shadowIcon,
+	reset,
+	moreVertical,
+} from '@wordpress/icons';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import ScreenHeader from './header';
+import { defaultShadow } from './shadows-panel';
+import {
+	getShadowParts,
+	shadowStringToObject,
+	shadowObjectToString,
+} from './shadow-utils';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
+
+const customShadowMenuItems = [
+	{
+		label: __( 'Rename' ),
+		action: 'rename',
+	},
+	{
+		label: __( 'Delete' ),
+		action: 'delete',
+	},
+];
+
+const presetShadowMenuItems = [
+	{
+		label: __( 'Reset' ),
+		action: 'reset',
+	},
+];
+
+export default function ShadowsEditPanel() {
+	const {
+		goBack,
+		params: { category, slug },
+	} = useNavigator();
+	const [ shadows, setShadows ] = useGlobalSetting(
+		`shadow.presets.${ category }`
+	);
+
+	useEffect( () => {
+		const hasCurrentShadow = shadows?.some(
+			( shadow ) => shadow.slug === slug
+		);
+		// If the shadow being edited doesn't exist anymore in the global styles setting, navigate back
+		// to prevent the user from editing a non-existent shadow entry.
+		// This can happen, for example:
+		// - when the user deletes the shadow
+		// - when the user resets the styles while editing a custom shadow
+		//
+		// The check on the slug is necessary to prevent a double back navigation when the user triggers
+		// a backward navigation by interacting with the screen's UI.
+		if ( !! slug && ! hasCurrentShadow ) {
+			goBack();
+		}
+	}, [ shadows, slug, goBack ] );
+
+	const [ baseShadows ] = useGlobalSetting(
+		`shadow.presets.${ category }`,
+		undefined,
+		'base'
+	);
+	const [ selectedShadow, setSelectedShadow ] = useState( () =>
+		( shadows || [] ).find( ( shadow ) => shadow.slug === slug )
+	);
+	const baseSelectedShadow = useMemo(
+		() => ( baseShadows || [] ).find( ( b ) => b.slug === slug ),
+		[ baseShadows, slug ]
+	);
+	const [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =
+		useState( false );
+	const [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );
+	const [ shadowName, setShadowName ] = useState( selectedShadow.name );
+
+	if ( ! category || ! slug ) {
+		return null;
+	}
+
+	const onShadowChange = ( shadow ) => {
+		setSelectedShadow( { ...selectedShadow, shadow } );
+		const updatedShadows = shadows.map( ( s ) =>
+			s.slug === slug ? { ...selectedShadow, shadow } : s
+		);
+		setShadows( updatedShadows );
+	};
+
+	const onMenuClick = ( action ) => {
+		if ( action === 'reset' ) {
+			const updatedShadows = shadows.map( ( s ) =>
+				s.slug === slug ? baseSelectedShadow : s
+			);
+			setSelectedShadow( baseSelectedShadow );
+			setShadows( updatedShadows );
+		} else if ( action === 'delete' ) {
+			setIsConfirmDialogVisible( true );
+		} else if ( action === 'rename' ) {
+			setIsRenameModalVisible( true );
+		}
+	};
+
+	const handleShadowDelete = () => {
+		setShadows( shadows.filter( ( s ) => s.slug !== slug ) );
+	};
+
+	const handleShadowRename = ( newName ) => {
+		if ( ! newName ) {
+			return;
+		}
+		const updatedShadows = shadows.map( ( s ) =>
+			s.slug === slug ? { ...selectedShadow, name: newName } : s
+		);
+		setSelectedShadow( { ...selectedShadow, name: newName } );
+		setShadows( updatedShadows );
+	};
+
+	return ! selectedShadow ? (
+		<ScreenHeader title="" />
+	) : (
+		<>
+			<HStack justify="space-between">
+				<ScreenHeader title={ selectedShadow.name } />
+				<FlexItem>
+					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
+						<Menu
+							trigger={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Menu' ) }
+								/>
+							}
+						>
+							{ ( category === 'custom'
+								? customShadowMenuItems
+								: presetShadowMenuItems
+							).map( ( item ) => (
+								<Menu.Item
+									key={ item.action }
+									onClick={ () => onMenuClick( item.action ) }
+									disabled={
+										item.action === 'reset' &&
+										selectedShadow.shadow ===
+											baseSelectedShadow.shadow
+									}
+								>
+									<Menu.ItemLabel>
+										{ item.label }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							) ) }
+						</Menu>
+					</Spacer>
+				</FlexItem>
+			</HStack>
+			<div className="edit-site-global-styles-screen">
+				<ShadowsPreview shadow={ selectedShadow.shadow } />
+				<ShadowEditor
+					shadow={ selectedShadow.shadow }
+					onChange={ onShadowChange }
+				/>
+			</div>
+			{ isConfirmDialogVisible && (
+				<ConfirmDialog
+					isOpen
+					onConfirm={ () => {
+						handleShadowDelete();
+						setIsConfirmDialogVisible( false );
+					} }
+					onCancel={ () => {
+						setIsConfirmDialogVisible( false );
+					} }
+					confirmButtonText={ __( 'Delete' ) }
+					size="medium"
+				>
+					{ sprintf(
+						/* translators: %s: Name of the shadow preset. */
+						__(
+							'Are you sure you want to delete "%s" shadow preset?'
+						),
+						selectedShadow.name
+					) }
+				</ConfirmDialog>
+			) }
+			{ isRenameModalVisible && (
+				<Modal
+					title={ __( 'Rename' ) }
+					onRequestClose={ () => setIsRenameModalVisible( false ) }
+					size="small"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							handleShadowRename( shadowName );
+							setIsRenameModalVisible( false );
+						} }
+					>
+						<InputControl
+							__next40pxDefaultSize
+							autoComplete="off"
+							label={ __( 'Name' ) }
+							placeholder={ __( 'Shadow name' ) }
+							value={ shadowName }
+							onChange={ ( value ) => setShadowName( value ) }
+						/>
+						<Spacer marginBottom={ 6 } />
+						<Flex
+							className="block-editor-shadow-edit-modal__actions"
+							justify="flex-end"
+							expanded={ false }
+						>
+							<FlexItem>
+								<Button
+									__next40pxDefaultSize
+									variant="tertiary"
+									onClick={ () =>
+										setIsRenameModalVisible( false )
+									}
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+							</FlexItem>
+							<FlexItem>
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
+								>
+									{ __( 'Save' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function ShadowsPreview( { shadow } ) {
+	const shadowStyle = {
+		boxShadow: shadow,
+	};
+
+	return (
+		<Spacer marginBottom={ 4 } marginTop={ -2 }>
+			<HStack
+				align="center"
+				justify="center"
+				className="edit-site-global-styles__shadow-preview-panel"
+			>
+				<div
+					className="edit-site-global-styles__shadow-preview-block"
+					style={ shadowStyle }
+				/>
+			</HStack>
+		</Spacer>
+	);
+}
+
+function ShadowEditor( { shadow, onChange } ) {
+	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
+
+	const onChangeShadowPart = ( index, part ) => {
+		const newShadowParts = [ ...shadowParts ];
+		newShadowParts[ index ] = part;
+		onChange( newShadowParts.join( ', ' ) );
+	};
+
+	const onAddShadowPart = () => {
+		onChange( [ ...shadowParts, defaultShadow ].join( ', ' ) );
+	};
+
+	const onRemoveShadowPart = ( index ) => {
+		onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );
+	};
+
+	return (
+		<>
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Flex
+						align="center"
+						className="edit-site-global-styles__shadows-panel__title"
+					>
+						<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
+					</Flex>
+					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								onAddShadowPart();
+							} }
+						/>
+					</FlexItem>
+				</HStack>
+			</VStack>
+			<Spacer />
+			<ItemGroup isBordered isSeparated>
+				{ shadowParts.map( ( part, index ) => (
+					<ShadowItem
+						key={ index }
+						shadow={ part }
+						onChange={ ( value ) =>
+							onChangeShadowPart( index, value )
+						}
+						canRemove={ shadowParts.length > 1 }
+						onRemove={ () => onRemoveShadowPart( index ) }
+					/>
+				) ) }
+			</ItemGroup>
+		</>
+	);
+}
+
+function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+	const shadowObj = useMemo(
+		() => shadowStringToObject( shadow ),
+		[ shadow ]
+	);
+	const onShadowChange = ( newShadow ) => {
+		onChange( shadowObjectToString( newShadow ) );
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="edit-site-global-styles__shadow-editor__dropdown"
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				const toggleProps = {
+					onClick: onToggle,
+					className: clsx(
+						'edit-site-global-styles__shadow-editor__dropdown-toggle',
+						{ 'is-open': isOpen }
+					),
+					'aria-expanded': isOpen,
+				};
+				const removeButtonProps = {
+					onClick: onRemove,
+					className: clsx(
+						'edit-site-global-styles__shadow-editor__remove-button',
+						{ 'is-open': isOpen }
+					),
+					label: __( 'Remove shadow' ),
+				};
+
+				return (
+					<HStack align="center" justify="flex-start" spacing={ 0 }>
+						<FlexItem style={ { flexGrow: 1 } }>
+							<Button
+								__next40pxDefaultSize
+								icon={ shadowIcon }
+								{ ...toggleProps }
+							>
+								{ shadowObj.inset
+									? __( 'Inner shadow' )
+									: __( 'Drop shadow' ) }
+							</Button>
+						</FlexItem>
+						{ canRemove && (
+							<FlexItem>
+								<Button
+									__next40pxDefaultSize
+									icon={ reset }
+									{ ...removeButtonProps }
+								/>
+							</FlexItem>
+						) }
+					</HStack>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					paddingSize="medium"
+					className="edit-site-global-styles__shadow-editor__dropdown-content"
+				>
+					<ShadowPopover
+						shadowObj={ shadowObj }
+						onChange={ onShadowChange }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}
+
+function ShadowPopover( { shadowObj, onChange } ) {
+	const __experimentalIsRenderedInSidebar = true;
+	const enableAlpha = true;
+
+	const onShadowChange = ( key, value ) => {
+		const newShadow = {
+			...shadowObj,
+			[ key ]: value,
+		};
+		onChange( newShadow );
+	};
+
+	return (
+		<VStack
+			spacing={ 4 }
+			className="edit-site-global-styles__shadow-editor-panel"
+		>
+			<ColorPalette
+				clearable={ false }
+				enableAlpha={ enableAlpha }
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
+				value={ shadowObj.color }
+				onChange={ ( value ) => onShadowChange( 'color', value ) }
+			/>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				value={ shadowObj.inset ? 'inset' : 'outset' }
+				isBlock
+				onChange={ ( value ) =>
+					onShadowChange( 'inset', value === 'inset' )
+				}
+				hideLabelFromVision
+				__next40pxDefaultSize
+			>
+				<ToggleGroupControlOption
+					value="outset"
+					label={ __( 'Outset' ) }
+				/>
+				<ToggleGroupControlOption
+					value="inset"
+					label={ __( 'Inset' ) }
+				/>
+			</ToggleGroupControl>
+			<Grid columns={ 2 } gap={ 4 }>
+				<ShadowInputControl
+					label={ __( 'X Position' ) }
+					value={ shadowObj.x }
+					onChange={ ( value ) => onShadowChange( 'x', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Y Position' ) }
+					value={ shadowObj.y }
+					onChange={ ( value ) => onShadowChange( 'y', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Blur' ) }
+					value={ shadowObj.blur }
+					onChange={ ( value ) => onShadowChange( 'blur', value ) }
+				/>
+				<ShadowInputControl
+					label={ __( 'Spread' ) }
+					value={ shadowObj.spread }
+					onChange={ ( value ) => onShadowChange( 'spread', value ) }
+				/>
+			</Grid>
+		</VStack>
+	);
+}
+
+function ShadowInputControl( { label, value, onChange } ) {
+	const onValueChange = ( next ) => {
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : '0px';
+		onChange( nextValue );
+	};
+
+	return (
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
new file mode 100644
index 00000000000000..43e0c063f492b8
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalItemGroup as ItemGroup,
+	Button,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { plus, shadow as shadowIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import Subtitle from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import ScreenHeader from './header';
+import { getNewIndexFromPresets } from './utils';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
+
+export default function ShadowsPanel() {
+	const [ defaultShadows ] = useGlobalSetting( 'shadow.presets.default' );
+	const [ defaultShadowsEnabled ] = useGlobalSetting(
+		'shadow.defaultPresets'
+	);
+	const [ themeShadows ] = useGlobalSetting( 'shadow.presets.theme' );
+	const [ customShadows, setCustomShadows ] = useGlobalSetting(
+		'shadow.presets.custom'
+	);
+
+	const onCreateShadow = ( shadow ) => {
+		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Shadows' ) }
+				description={ __(
+					'Manage and create shadow styles for use across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack
+					className="edit-site-global-styles__shadows-panel"
+					spacing={ 7 }
+				>
+					{ defaultShadowsEnabled && (
+						<ShadowList
+							label={ __( 'Default' ) }
+							shadows={ defaultShadows || [] }
+							category="default"
+						/>
+					) }
+					{ themeShadows && themeShadows.length > 0 && (
+						<ShadowList
+							label={ __( 'Theme' ) }
+							shadows={ themeShadows || [] }
+							category="theme"
+						/>
+					) }
+					<ShadowList
+						label={ __( 'Custom' ) }
+						shadows={ customShadows || [] }
+						category="custom"
+						canCreate
+						onCreate={ onCreateShadow }
+					/>
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
+	const handleAddShadow = () => {
+		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
+		onCreate( {
+			name: sprintf(
+				/* translators: %s: is an index for a preset */
+				__( 'Shadow %s' ),
+				newIndex
+			),
+			shadow: defaultShadow,
+			slug: `shadow-${ newIndex }`,
+		} );
+	};
+
+	return (
+		<VStack spacing={ 2 }>
+			<HStack justify="space-between">
+				<Flex
+					align="center"
+					className="edit-site-global-styles__shadows-panel__title"
+				>
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+				</Flex>
+				{ canCreate && (
+					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+						<Button
+							size="small"
+							icon={ plus }
+							label={ __( 'Add shadow' ) }
+							onClick={ () => {
+								handleAddShadow();
+							} }
+						/>
+					</FlexItem>
+				) }
+			</HStack>
+			{ shadows.length > 0 && (
+				<ItemGroup isBordered isSeparated>
+					{ shadows.map( ( shadow ) => (
+						<ShadowItem
+							key={ shadow.slug }
+							shadow={ shadow }
+							category={ category }
+						/>
+					) ) }
+				</ItemGroup>
+			) }
+		</VStack>
+	);
+}
+
+function ShadowItem( { shadow, category } ) {
+	return (
+		<NavigationButtonAsItem
+			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
+			icon={ shadowIcon }
+		>
+			{ shadow.name }
+		</NavigationButtonAsItem>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js
new file mode 100644
index 00000000000000..06ea0bb5617e31
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/size-control/index.js
@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	useBaseControlProps,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalUnitControl as UnitControl,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+} ) {
+	const { baseControlProps } = useBaseControlProps( props );
+	const { value, onChange, fallbackValue, disabled, label } = props;
+
+	const units = useCustomUnits( {
+		availableUnits: DEFAULT_UNITS,
+	} );
+
+	const [ valueQuantity, valueUnit = 'px' ] =
+		parseQuantityAndUnitFromRawValue( value, units );
+
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
+
+	// Receives the new value from the UnitControl component as a string containing the value and unit.
+	const handleUnitControlChange = ( newValue ) => {
+		onChange( newValue );
+	};
+
+	// Receives the new value from the RangeControl component as a number.
+	const handleRangeControlChange = ( newValue ) => {
+		onChange?.( newValue + valueUnit );
+	};
+
+	return (
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ label }
+						hideLabelFromVision
+						value={ value }
+						onChange={ handleUnitControlChange }
+						units={ units }
+						min={ 0 }
+						disabled={ disabled }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ label }
+							hideLabelFromVision
+							value={ valueQuantity }
+							initialPosition={ fallbackValue }
+							withInputField={ false }
+							onChange={ handleRangeControlChange }
+							min={ 0 }
+							max={ isValueUnitRelative ? 10 : 100 }
+							step={ isValueUnitRelative ? 0.1 : 1 }
+							disabled={ disabled }
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</BaseControl>
+	);
+}
+
+export default SizeControl;
diff --git a/packages/edit-site/src/components/global-styles/stories/index.story.js b/packages/edit-site/src/components/global-styles/stories/index.story.js
new file mode 100644
index 00000000000000..66cf468d5e224c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/stories/index.story.js
@@ -0,0 +1,427 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { default as GlobalStylesUIComponent } from '../ui';
+import { unlock } from '../../../lock-unlock';
+
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
+	blockEditorPrivateApis
+);
+
+export default { title: 'EditSite/GlobalStylesUI' };
+
+const BASE_SETTINGS = {
+	settings: {
+		appearanceTools: false,
+		useRootPaddingAwareAlignments: true,
+		border: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+		},
+		color: {
+			background: true,
+			custom: true,
+			customDuotone: true,
+			customGradient: true,
+			defaultDuotone: true,
+			defaultGradients: true,
+			defaultPalette: true,
+			duotone: {
+				default: [
+					{
+						name: 'Dark grayscale',
+						colors: [ '#000000', '#7f7f7f' ],
+						slug: 'dark-grayscale',
+					},
+					{
+						name: 'Grayscale',
+						colors: [ '#000000', '#ffffff' ],
+						slug: 'grayscale',
+					},
+					{
+						name: 'Purple and yellow',
+						colors: [ '#8c00b7', '#fcff41' ],
+						slug: 'purple-yellow',
+					},
+					{
+						name: 'Blue and red',
+						colors: [ '#000097', '#ff4747' ],
+						slug: 'blue-red',
+					},
+					{
+						name: 'Midnight',
+						colors: [ '#000000', '#00a5ff' ],
+						slug: 'midnight',
+					},
+					{
+						name: 'Magenta and yellow',
+						colors: [ '#c7005a', '#fff278' ],
+						slug: 'magenta-yellow',
+					},
+					{
+						name: 'Purple and green',
+						colors: [ '#a60072', '#67ff66' ],
+						slug: 'purple-green',
+					},
+					{
+						name: 'Blue and orange',
+						colors: [ '#1900d8', '#ffa96b' ],
+						slug: 'blue-orange',
+					},
+				],
+			},
+			gradients: {
+				default: [
+					{
+						name: 'Vivid cyan blue to vivid purple',
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						name: 'Light green cyan to vivid green cyan',
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+					{
+						name: 'Luminous vivid amber to luminous vivid orange',
+						gradient:
+							'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
+						slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
+					},
+					{
+						name: 'Luminous vivid orange to vivid red',
+						gradient:
+							'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
+						slug: 'luminous-vivid-orange-to-vivid-red',
+					},
+					{
+						name: 'Very light gray to cyan bluish gray',
+						gradient:
+							'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)',
+						slug: 'very-light-gray-to-cyan-bluish-gray',
+					},
+					{
+						name: 'Cool to warm spectrum',
+						gradient:
+							'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)',
+						slug: 'cool-to-warm-spectrum',
+					},
+					{
+						name: 'Blush light purple',
+						gradient:
+							'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)',
+						slug: 'blush-light-purple',
+					},
+					{
+						name: 'Blush bordeaux',
+						gradient:
+							'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)',
+						slug: 'blush-bordeaux',
+					},
+					{
+						name: 'Luminous dusk',
+						gradient:
+							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)',
+						slug: 'luminous-dusk',
+					},
+					{
+						name: 'Pale ocean',
+						gradient:
+							'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+						slug: 'pale-ocean',
+					},
+					{
+						name: 'Electric grass',
+						gradient:
+							'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)',
+						slug: 'electric-grass',
+					},
+					{
+						name: 'Midnight',
+						gradient:
+							'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+						slug: 'midnight',
+					},
+				],
+			},
+			link: true,
+			palette: {
+				default: [
+					{
+						name: 'Black',
+						slug: 'black',
+						color: '#000000',
+					},
+					{
+						name: 'Cyan bluish gray',
+						slug: 'cyan-bluish-gray',
+						color: '#abb8c3',
+					},
+					{
+						name: 'White',
+						slug: 'white',
+						color: '#ffffff',
+					},
+					{
+						name: 'Pale pink',
+						slug: 'pale-pink',
+						color: '#f78da7',
+					},
+					{
+						name: 'Vivid red',
+						slug: 'vivid-red',
+						color: '#cf2e2e',
+					},
+					{
+						name: 'Luminous vivid orange',
+						slug: 'luminous-vivid-orange',
+						color: '#ff6900',
+					},
+					{
+						name: 'Luminous vivid amber',
+						slug: 'luminous-vivid-amber',
+						color: '#fcb900',
+					},
+					{
+						name: 'Light green cyan',
+						slug: 'light-green-cyan',
+						color: '#7bdcb5',
+					},
+					{
+						name: 'Vivid green cyan',
+						slug: 'vivid-green-cyan',
+						color: '#00d084',
+					},
+					{
+						name: 'Pale cyan blue',
+						slug: 'pale-cyan-blue',
+						color: '#8ed1fc',
+					},
+					{
+						name: 'Vivid cyan blue',
+						slug: 'vivid-cyan-blue',
+						color: '#0693e3',
+					},
+					{
+						name: 'Vivid purple',
+						slug: 'vivid-purple',
+						color: '#9b51e0',
+					},
+				],
+				theme: [
+					{
+						color: '#ffffff',
+						name: 'Base',
+						slug: 'base',
+					},
+					{
+						color: '#000000',
+						name: 'Contrast',
+						slug: 'contrast',
+					},
+					{
+						color: '#9DFF20',
+						name: 'Primary',
+						slug: 'primary',
+					},
+					{
+						color: '#345C00',
+						name: 'Secondary',
+						slug: 'secondary',
+					},
+					{
+						color: '#F6F6F6',
+						name: 'Tertiary',
+						slug: 'tertiary',
+					},
+				],
+			},
+			text: true,
+		},
+		shadow: {
+			defaultPresets: true,
+			presets: {
+				default: [
+					{
+						name: 'Natural',
+						slug: 'natural',
+						shadow: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Deep',
+						slug: 'deep',
+						shadow: '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					},
+					{
+						name: 'Sharp',
+						slug: 'sharp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					},
+					{
+						name: 'Outlined',
+						slug: 'outlined',
+						shadow: '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					},
+					{
+						name: 'Crisp',
+						slug: 'crisp',
+						shadow: '6px 6px 0px rgba(0, 0, 0, 1)',
+					},
+				],
+			},
+		},
+		layout: {
+			contentSize: '650px',
+			wideSize: '1200px',
+		},
+		spacing: {
+			blockGap: true,
+			margin: true,
+			padding: true,
+			customSpacingSize: true,
+			units: [ '%', 'px', 'em', 'rem', 'vh', 'vw' ],
+			spacingScale: {
+				operator: '*',
+				increment: 1.5,
+				steps: 0,
+				mediumStep: 1.5,
+				unit: 'rem',
+			},
+			spacingSizes: {
+				theme: [
+					{
+						size: 'clamp(1.5rem, 5vw, 2rem)',
+						slug: '30',
+						name: '1',
+					},
+					{
+						size: 'clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+						slug: '40',
+						name: '2',
+					},
+					{
+						size: 'clamp(2.5rem, 8vw, 4.5rem)',
+						slug: '50',
+						name: '3',
+					},
+					{
+						size: 'clamp(3.75rem, 10vw, 7rem)',
+						slug: '60',
+						name: '4',
+					},
+					{
+						size: 'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+						slug: '70',
+						name: '5',
+					},
+					{
+						size: 'clamp(7rem, 14vw, 11rem)',
+						slug: '80',
+						name: '6',
+					},
+				],
+			},
+		},
+		typography: {
+			customFontSize: true,
+			dropCap: false,
+			fontSizes: {
+				default: [
+					{
+						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',
+					},
+				],
+			},
+			fontStyle: true,
+			fontWeight: true,
+			letterSpacing: true,
+			lineHeight: true,
+			textColumns: false,
+			textDecoration: true,
+			textTransform: true,
+			writingMode: false,
+			fluid: true,
+			fontFamilies: {
+				theme: [
+					{
+						fontFamily:
+							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+						name: 'System Font',
+						slug: 'system-font',
+					},
+				],
+			},
+		},
+		dimensions: {
+			minHeight: true,
+		},
+		position: {
+			fixed: true,
+			sticky: true,
+		},
+	},
+	styles: {
+		blocks: {},
+		elements: {},
+	},
+};
+
+export const GlobalStylesUI = () => {
+	const [ userGlobalStyles, setUserStyles ] = useState( {
+		settings: {},
+		styles: {},
+	} );
+	const context = useMemo( () => {
+		return {
+			isReady: true,
+			user: userGlobalStyles,
+			base: BASE_SETTINGS,
+			merged: mergeBaseAndUserConfigs( BASE_SETTINGS, userGlobalStyles ),
+			setUserConfig: setUserStyles,
+		};
+	}, [ userGlobalStyles, setUserStyles ] );
+	const wrapperStyle = {
+		width: 280,
+	};
+	return (
+		<ExperimentalBlockEditorProvider>
+			<GlobalStylesContext.Provider value={ context }>
+				<div style={ wrapperStyle }>
+					<GlobalStylesUIComponent
+						isStyleBookOpened={ false }
+						onCloseStyleBook={ () => {} }
+					/>
+				</div>
+			</GlobalStylesContext.Provider>
+		</ExperimentalBlockEditorProvider>
+	);
+};
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
new file mode 100644
index 00000000000000..759303bcf5fa7b
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PreviewStyles from './preview-styles';
+import Variation from './variations/variation';
+import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export default function StyleVariationsContainer( { gap = 2 } ) {
+	const { user } = useContext( GlobalStylesContext );
+	const userStyles = user?.styles;
+
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+
+	// Filter out variations that are color or typography variations.
+	const fullStyleVariations = variations?.filter( ( variation ) => {
+		return (
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [
+				'typography',
+				'spacing',
+			] )
+		);
+	} );
+
+	const themeVariations = useMemo( () => {
+		const withEmptyVariation = [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...( fullStyleVariations ?? [] ),
+		];
+		return [
+			...withEmptyVariation.map( ( variation ) => {
+				const blockStyles = { ...variation?.styles?.blocks } || {};
+
+				// We need to copy any user custom CSS to the variation to prevent it being lost
+				// when switching variations.
+				if ( userStyles?.blocks ) {
+					Object.keys( userStyles.blocks ).forEach( ( blockName ) => {
+						// First get any block specific custom CSS from the current user styles and merge with any custom CSS for
+						// that block in the variation.
+						if ( userStyles.blocks[ blockName ].css ) {
+							const variationBlockStyles =
+								blockStyles[ blockName ] || {};
+							const customCSS = {
+								css: `${
+									blockStyles[ blockName ]?.css || ''
+								} ${
+									userStyles.blocks[ blockName ].css.trim() ||
+									''
+								}`,
+							};
+							blockStyles[ blockName ] = {
+								...variationBlockStyles,
+								...customCSS,
+							};
+						}
+					} );
+				}
+				// Now merge any global custom CSS from current user styles with global custom CSS in the variation.
+				const css =
+					userStyles?.css || variation.styles?.css
+						? {
+								css: `${ variation.styles?.css || '' } ${
+									userStyles?.css || ''
+								}`,
+						  }
+						: {};
+
+				const blocks =
+					Object.keys( blockStyles ).length > 0
+						? { blocks: blockStyles }
+						: {};
+
+				const styles = {
+					...variation.styles,
+					...css,
+					...blocks,
+				};
+				return {
+					...variation,
+					settings: variation.settings ?? {},
+					styles,
+				};
+			} ),
+		];
+	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
+
+	if ( ! fullStyleVariations || fullStyleVariations?.length < 1 ) {
+		return null;
+	}
+
+	return (
+		<Grid
+			columns={ 2 }
+			className="edit-site-global-styles-style-variations-container"
+			gap={ gap }
+		>
+			{ themeVariations.map( ( variation, index ) => (
+				<Variation key={ index } variation={ variation }>
+					{ ( isFocused ) => (
+						<PreviewStyles
+							label={ variation?.title }
+							withHoverView
+							isFocused={ isFocused }
+							variation={ variation }
+						/>
+					) }
+				</Variation>
+			) ) }
+		</Grid>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 3c15ebba159b05..4674b5e5fc3ca4 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -9,6 +9,7 @@
 .edit-site-global-styles-preview__iframe {
 	max-width: 100%;
 	display: block;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -18,18 +19,23 @@
 	min-height: 100px;
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-	grid-column: 1 / -1;
-	max-width: 100%;
+.edit-site-font-size__item {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-break: anywhere;
 }
 
-.edit-site-global-styles-screen-heading-color,
-.edit-site-global-styles-screen-typography {
-	margin: $grid-unit-20;
+.edit-site-font-size__item-value {
+	color: $gray-700;
+}
+
+.edit-site-global-styles-screen {
+	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
 
 .edit-site-global-styles-screen-typography__indicator {
@@ -39,24 +45,39 @@
 	display: flex !important;
 	align-items: center;
 	justify-content: center;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-x-small;
 }
 
-.edit-site-global-styles-screen-colors {
-	margin: $grid-unit-20;
+.edit-site-global-styles-screen-typography__font-variants-count {
+	color: $gray-700;
+}
 
-	.component-color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-		flex-shrink: 0;
-	}
+.edit-site-global-styles-font-families__manage-fonts {
+	justify-content: center;
+}
+
+.edit-site-global-styles-screen .color-block-support-panel {
+	padding-left: 0;
+	padding-right: 0;
+	padding-top: 0;
+	border-top: none;
+	row-gap: calc(#{$grid-unit-05} * 3);
+}
+
+.edit-site-global-styles-header__description {
+	padding: 0 $grid-unit-20;
 }
 
-.edit-site-global-styles-header__description,
 .edit-site-block-types-search {
+	margin-bottom: $grid-unit-10;
 	padding: 0 $grid-unit-20;
 }
 
+.edit-site-global-styles-header {
+	// Need to override the too specific bottom margin for complementary areas.
+	margin-bottom: 0 !important;
+}
+
 .edit-site-global-styles-subtitle {
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;
@@ -69,51 +90,150 @@
 	color: $gray-800;
 	font-weight: 600;
 	line-height: 1.2;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
+	padding: $grid-unit-20 $grid-unit-20 0;
 	margin: 0;
 }
 
-.edit-site-screen-text-color__control,
-.edit-site-screen-link-color__control,
-.edit-site-screen-button-color__control {
-	padding: $grid-unit-20;
+.edit-site-global-styles-icon-with-current-color {
+	fill: currentColor;
 }
 
-.edit-site-global-styles-variations_item {
-	box-sizing: border-box;
+.edit-site-global-styles__color-indicator-wrapper {
+	// Match the height of the rest of the icons (24px).
+	height: $grid-unit * 3;
+	flex-shrink: 0;
+}
 
-	.edit-site-global-styles-variations_item-preview {
-		padding: $border-width * 2;
-		border-radius: $radius-block-ui;
+.edit-site-global-styles__shadows-panel__title,
+.edit-site-global-styles__shadows-panel__options-container {
+	height: $grid-unit * 3;
+}
+
+.edit-site-global-styles__block-preview-panel {
+	position: relative;
+	width: 100%;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-medium;
+	overflow: hidden;
+}
+
+.edit-site-global-styles__shadow-preview-panel {
+	height: $grid-unit-60 * 3;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-medium;
+	overflow: auto;
+	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
+	background-position: 0 0, 8px 8px;
+	background-size: 16px 16px;
+
+	.edit-site-global-styles__shadow-preview-block {
 		border: $gray-200 $border-width solid;
+		border-radius: $radius-small;
+		background-color: $white;
+		width: 60%;
+		height: 60px;
 	}
+}
+
+.edit-site-global-styles__shadow-editor__dropdown-content {
+	width: 280px;
+}
+
+.edit-site-global-styles__shadow-editor-panel {
+	// because tooltip of the range control is too close to the edge and creates overflow
+	margin-bottom: $grid-unit-05;
+}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		border: $gray-900 $border-width solid;
+.edit-site-global-styles__shadow-editor__dropdown {
+	width: 100%;
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle,
+	.edit-site-global-styles__shadow-editor__remove-button {
+		width: 100%;
+		height: auto;
+		padding-top: $grid-unit;
+		padding-bottom: $grid-unit;
+		text-align: left;
+		border-radius: inherit;
+
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
 	}
+}
 
-	&:hover .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+.edit-site-global-styles-screen-css {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	margin: $grid-unit-20;
+
+	.components-v-stack {
+		flex: 1 1 auto;
+
+		.block-editor-global-styles-advanced-panel__custom-css-input {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+
+			.components-base-control__field {
+				flex: 1 1 auto;
+				display: flex;
+				flex-direction: column;
+
+				.components-textarea-control__input {
+					flex: 1 1 auto;
+					// CSS input is always LTR regardless of language.
+					/*rtl:ignore*/
+					direction: ltr;
+				}
+			}
+		}
 	}
+}
 
-	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+.edit-site-global-styles-screen-css-help-link {
+	display: inline-block;
+	margin-top: $grid-unit-10;
+}
+.edit-site-global-styles-screen-variations {
+	margin-top: $grid-unit-20;
+	border-top: 1px solid $gray-300;
+
+	& > * {
+		margin: $grid-unit-30 $grid-unit-20;
 	}
 }
 
-.edit-site-global-styles-icon-with-current-color {
-	fill: currentColor;
+.edit-site-global-styles-sidebar__navigator-screen {
+	display: flex;
+	flex-direction: column;
 }
 
-.edit-site-global-styles__color-indicator-wrapper {
-	// Match the height of the rest of the icons (24px).
-	height: $grid-unit * 3;
-	flex-shrink: 0;
+.edit-site-global-styles-sidebar__navigator-screen .single-column {
+	grid-column: span 1;
 }
 
-.edit-site-global-styles__color-label {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
+.edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
+	background: unset;
+	color: inherit;
+}
+
+.edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
+	fill: currentColor;
+}
+
+.edit-site-global-styles-screen-root__active-style-tile {
+	// Todo: revisit use of Card component and/or remove override
+	// The &#{&} is a workaround for the specificity of the Card component.
+	&#{&},
+	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
+		box-shadow: none;
+		border-radius: $radius-small;
+		.block-editor-iframe__container {
+			border: 1px solid $gray-200;
+		}
+	}
 }
diff --git a/packages/edit-site/src/components/global-styles/subtitle.js b/packages/edit-site/src/components/global-styles/subtitle.js
index 7488f2dd792097..3a8e7ed9cd6f01 100644
--- a/packages/edit-site/src/components/global-styles/subtitle.js
+++ b/packages/edit-site/src/components/global-styles/subtitle.js
@@ -3,9 +3,12 @@
  */
 import { __experimentalHeading as Heading } from '@wordpress/components';
 
-function Subtitle( { children } ) {
+function Subtitle( { children, level } ) {
 	return (
-		<Heading className="edit-site-global-styles-subtitle" level={ 2 }>
+		<Heading
+			className="edit-site-global-styles-subtitle"
+			level={ level ?? 2 }
+		>
 			{ children }
 		</Heading>
 	);
diff --git a/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js b/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js
new file mode 100644
index 00000000000000..05521c78575421
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/test/shadow-utils.spec.js
@@ -0,0 +1,251 @@
+/**
+ * Internal dependencies
+ */
+import { getShadowParts, shadowStringToObject } from '../shadow-utils';
+
+const colorFormats = {
+	named: 'red',
+	hex: '#ff0000',
+	hexAlpha: '#ff000077',
+	rgb: 'rgb(255, 0, 0)',
+	rgbSpaced: 'rgb(255 0 0)',
+	rgbMultiSpaced: 'rgb(255  0   0)',
+	rgba: 'rgba(255, 0, 0, 0.5)',
+	rgbp: 'rgb(255 0 0 / 50%)',
+	hsl: 'hsl(0, 100%, 50%)',
+	hsla: 'hsla(0, 100%, 50%, 0.5)',
+	hslp: 'hsl(0 100% 50% / 50%)',
+	currentcolor: 'currentcolor',
+};
+const validShadowFormats = {
+	xy: '{x} {y}',
+	xyInset: '{x} {y} inset',
+	insetXY: 'inset {x} {y}',
+
+	xyColor: '{x} {y} {color}',
+	xyColorInset: '{x} {y} {color} inset',
+	xyInsetColor: '{x} {y} inset {color}',
+	insetXYColor: 'inset {x} {y} {color}',
+
+	colorXY: '{color} {x} {y}',
+	colorXYInset: '{color} {x} {y} inset',
+	colorInsetXY: '{color} inset {x} {y}',
+	insetColorXY: 'inset {color} {x} {y}',
+
+	xyBlur: '{x} {y} {blur}',
+	xyBlurInset: '{x} {y} {blur} inset',
+	insetXYBlur: 'inset {x} {y} {blur}',
+
+	xyBlurColor: '{x} {y} {blur} {color}',
+	xyBlurColorInset: '{x} {y} {blur} {color} inset',
+	xyBlurInsetColor: '{x} {y} {blur} inset {color}',
+	insetXYBlurColor: 'inset {x} {y} {blur} {color}',
+
+	colorXYBlur: '{color} {x} {y} {blur}',
+	colorXYBlurInset: '{color} {x} {y} {blur} inset',
+	colorInsetXYBlur: '{color} inset {x} {y} {blur}',
+	insetColorXYBlur: 'inset {color} {x} {y} {blur}',
+
+	xyBlurSpread: '{x} {y} {blur} {spread}',
+	xyBlurSpreadInset: '{x} {y} {blur} {spread} inset',
+	insetXYBlurSpread: 'inset {x} {y} {blur} {spread}',
+
+	xyBlurSpreadColor: '{x} {y} {blur} {spread} {color}',
+	xyBlurSpreadColorInset: '{x} {y} {blur} {spread} {color} inset',
+	xyBlurSpreadInsetColor: '{x} {y} {blur} {spread} inset {color}',
+	insetXYBlurSpreadColor: 'inset {x} {y} {blur} {spread} {color}',
+
+	colorXYBlurSpread: '{color} {x} {y} {blur} {spread}',
+	colorXYBlurSpreadInset: '{color} {x} {y} {blur} {spread} inset',
+	colorInsetXYBlurSpread: '{color} inset {x} {y} {blur} {spread}',
+	insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}',
+
+	multipleSpaces: '{x}  {y}   {blur} {spread}',
+	upperInset: 'INSET {x} {y} {blur} {spread} {color}',
+};
+
+const invalidShadowFormats = {
+	oneLength: '{x}',
+	multipleLengthGroups1: '{x} {y} {color} {blur}',
+	multipleLengthGroups2: '{x} {y} {blur} {spread} {color} 5px',
+	multipleInsets: 'inset inset {x} {y} {blur} {spread} {color}',
+	multipleColors: '{x} {y} {blur} {spread} {color} {color}',
+};
+
+const combinedShadows = {
+	onePart: '{1}',
+	twoParts: '{1},{2}',
+	twoPartsSpaced: '{1}, {2}',
+	threeParts: '{1},{2},{3}',
+};
+
+const shadowUnits = {
+	px: '1px',
+	em: '1em',
+	rem: '1rem',
+	halfRem: '0.5rem',
+	percent: '1%',
+	halfPercent: '0.5%',
+	ex: '1ex',
+	inch: '1in',
+	cm: '1cm',
+	mm: '1mm',
+	pt: '1pt',
+	pc: '1pc',
+	vh: '1vh',
+	vw: '1vw',
+	vmin: '1vmin',
+	vmax: '1vmax',
+	ch: '1ch',
+	lh: '1lh',
+	zero: '0',
+};
+
+// Data helper functions
+function getShadowString( formatString, values ) {
+	return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => {
+		if ( values.hasOwnProperty( placeholder ) ) {
+			return values[ placeholder ];
+		}
+		return match;
+	} );
+}
+function getCombinedShadowString( format, parts ) {
+	return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] );
+}
+
+describe( 'getShadowParts', () => {
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				Object.entries( combinedShadows ).forEach(
+					( [ combinedShadowKey, combinedShadow ] ) => {
+						const shadowCount = combinedShadow.split( ',' ).length;
+						const shadowStrings = Array.from(
+							{ length: shadowCount },
+							() =>
+								getShadowString( shadow, {
+									x: '1px',
+									y: '2px',
+									blur: '3px',
+									spread: '4px',
+									color,
+								} )
+						);
+
+						const input = getCombinedShadowString(
+							combinedShadow,
+							shadowStrings
+						);
+						const output = shadowStrings;
+
+						it( `should return shadow parts for ${ colorKey } color and ${ combinedShadowKey } shadow`, () => {
+							const parts = getShadowParts( input );
+							expect( parts ).toEqual( output );
+						} );
+					}
+				);
+			} );
+		} );
+	} );
+} );
+
+describe( 'shadowStringToObject', () => {
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				const hasX = shadow.includes( '{x}' );
+				const hasY = shadow.includes( '{y}' );
+				const hasBlur = shadow.includes( '{blur}' );
+				const hasSpread = shadow.includes( '{spread}' );
+				const hasColor = shadow.includes( '{color}' );
+				const hasInset = shadow.toLowerCase().includes( 'inset' );
+
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = {
+					x: hasX ? '1px' : defaultShadow.x,
+					y: hasY ? '2px' : defaultShadow.y,
+					blur: hasBlur ? '3px' : defaultShadow.blur,
+					spread: hasSpread ? '4px' : defaultShadow.spread,
+					color: hasColor ? color : defaultShadow.color,
+					inset: hasInset,
+				};
+
+				it( `should return shadow object for ${ colorKey } color`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			} );
+		} );
+	} );
+
+	describe( `test invalid shadow formats`, () => {
+		const color = colorFormats.hex;
+		Object.entries( invalidShadowFormats ).forEach(
+			( [ shadowKey, shadow ] ) => {
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = defaultShadow;
+
+				it( `should return default shadow object for ${ shadowKey }`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			}
+		);
+	} );
+
+	describe( `test shadow with all units`, () => {
+		const shadow = validShadowFormats.xyBlurSpreadColor;
+		const color = colorFormats.hex;
+
+		Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => {
+			const shadowString = getShadowString( shadow, {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+			} );
+
+			const input = shadowString;
+			const output = {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+				inset: false,
+			};
+
+			it( `should return shadow object for the unit: ${ unitKey }`, () => {
+				const shadowObj = shadowStringToObject( input );
+				expect( shadowObj ).toEqual( output );
+			} );
+		} );
+	} );
+} );
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
deleted file mode 100644
index 647b02cb4be1fb..00000000000000
--- a/packages/edit-site/src/components/global-styles/test/typography-utils.js
+++ /dev/null
@@ -1,344 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getTypographyFontSizeValue } from '../typography-utils';
-
-describe( 'typography utils', () => {
-	describe( 'getTypographyFontSizeValue', () => {
-		[
-			{
-				message: 'returns value when fluid typography is deactivated',
-				preset: {
-					size: '28px',
-				},
-				typographySettings: undefined,
-				expected: '28px',
-			},
-
-			{
-				message: 'returns value where font size is 0',
-				preset: {
-					size: 0,
-				},
-				typographySettings: undefined,
-				expected: 0,
-			},
-
-			{
-				message: "returns value where font size is '0'",
-				preset: {
-					size: '0',
-				},
-				typographySettings: undefined,
-				expected: '0',
-			},
-
-			{
-				message: 'returns value where `size` is `null`.',
-				preset: {
-					size: null,
-				},
-				typographySettings: null,
-				expected: null,
-			},
-
-			{
-				message: 'returns value when fluid is `false`',
-				preset: {
-					size: '28px',
-					fluid: false,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: '28px',
-			},
-
-			{
-				message: 'returns already clamped value',
-				preset: {
-					size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					fluid: false,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-			},
-
-			{
-				message: 'returns value with unsupported unit',
-				preset: {
-					size: '1000%',
-					fluid: false,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: '1000%',
-			},
-
-			{
-				message: 'returns clamp value with rem min and max units',
-				preset: {
-					size: '1.75rem',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
-			},
-
-			{
-				message: 'returns clamp value with eem min and max units',
-				preset: {
-					size: '1.75em',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
-			},
-
-			{
-				message: 'returns clamp value for floats',
-				preset: {
-					size: '100.175px',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
-			},
-
-			{
-				message: 'coerces integer to `px` and returns clamp value',
-				preset: {
-					size: 33,
-					fluid: true,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
-			},
-
-			{
-				message: 'coerces float to `px` and returns clamp value',
-				preset: {
-					size: 100.23,
-					fluid: true,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
-			},
-
-			{
-				message: 'returns clamp value when `fluid` is empty array',
-				preset: {
-					size: '28px',
-					fluid: [],
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
-			},
-
-			{
-				message: 'returns clamp value when `fluid` is `null`',
-				preset: {
-					size: '28px',
-					fluid: null,
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
-			},
-
-			{
-				message:
-					'returns clamp value if min font size is greater than max',
-				preset: {
-					size: '3rem',
-					fluid: {
-						min: '5rem',
-						max: '32px',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
-			},
-
-			{
-				message: 'returns value with invalid min/max fluid units',
-				preset: {
-					size: '10em',
-					fluid: {
-						min: '20vw',
-						max: '50%',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: '10em',
-			},
-
-			{
-				message:
-					'returns value when size is < lower bounds and no fluid min/max set',
-				preset: {
-					size: '3px',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: '3px',
-			},
-
-			{
-				message:
-					'returns value when size is equal to lower bounds and no fluid min/max set',
-				preset: {
-					size: '14px',
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: '14px',
-			},
-
-			{
-				message: 'returns clamp value with different min max units',
-				preset: {
-					size: '28px',
-					fluid: {
-						min: '20px',
-						max: '50rem',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
-			},
-
-			{
-				message: 'returns clamp value where no fluid max size is set',
-				preset: {
-					size: '28px',
-					fluid: {
-						min: '2.6rem',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
-			},
-
-			{
-				message: 'returns clamp value where no fluid min size is set',
-				preset: {
-					size: '28px',
-					fluid: {
-						max: '80px',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
-			},
-
-			{
-				message:
-					'should not apply lower bound test when fluid values are set',
-				preset: {
-					size: '1.5rem',
-					fluid: {
-						min: '0.5rem',
-						max: '5rem',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
-			},
-
-			{
-				message:
-					'should not apply lower bound test when only fluid min is set',
-				preset: {
-					size: '20px',
-					fluid: {
-						min: '12px',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
-			},
-
-			{
-				message:
-					'should not apply lower bound test when only fluid max is set',
-				preset: {
-					size: '0.875rem',
-					fluid: {
-						max: '20rem',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
-			},
-
-			{
-				message:
-					'returns clamp value when min and max font sizes are equal',
-				preset: {
-					size: '4rem',
-					fluid: {
-						min: '30px',
-						max: '30px',
-					},
-				},
-				typographySettings: {
-					fluid: true,
-				},
-				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
-			},
-		].forEach( ( { message, preset, typographySettings, expected } ) => {
-			it( `should ${ message }`, () => {
-				expect(
-					getTypographyFontSizeValue( preset, typographySettings )
-				).toBe( expected );
-			} );
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
deleted file mode 100644
index a26221247dc9b9..00000000000000
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ /dev/null
@@ -1,814 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __EXPERIMENTAL_ELEMENTS as ELEMENTS } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import {
-	getLayoutStyles,
-	getNodesWithSettings,
-	getNodesWithStyles,
-	getBlockSelectors,
-	toCustomProperties,
-	toStyles,
-	getStylesDeclarations,
-} from '../use-global-styles-output';
-import { ROOT_BLOCK_SELECTOR } from '../utils';
-
-describe( 'global styles renderer', () => {
-	describe( 'getNodesWithStyles', () => {
-		it( 'should return the nodes with styles', () => {
-			const tree = {
-				styles: {
-					color: {
-						background: 'red',
-						text: 'red',
-					},
-					blocks: {
-						'core/heading': {
-							color: {
-								background: 'blue',
-								text: 'blue',
-							},
-							elements: {
-								h1: {
-									typography: {
-										fontSize: '42px',
-									},
-								},
-								h2: {
-									typography: {
-										fontSize: '23px',
-									},
-								},
-								link: {
-									':hover': {
-										color: {
-											background: 'green',
-											text: 'yellow',
-										},
-									},
-									':focus': {
-										color: {
-											background: 'green',
-											text: 'yellow',
-										},
-									},
-								},
-							},
-						},
-						'core/image': {
-							border: {
-								radius: '9999px',
-							},
-						},
-					},
-					elements: {
-						link: {
-							color: {
-								background: 'yellow',
-								text: 'yellow',
-							},
-							':hover': {
-								color: {
-									background: 'hotpink',
-									text: 'black',
-								},
-							},
-							':focus': {
-								color: {
-									background: 'hotpink',
-									text: 'black',
-								},
-							},
-						},
-					},
-				},
-			};
-			const blockSelectors = {
-				'core/heading': {
-					selector: '.my-heading1, .my-heading2',
-				},
-				'core/image': {
-					selector: '.my-image',
-					featureSelectors: '.my-image img, .my-image .crop-area',
-				},
-			};
-
-			expect( getNodesWithStyles( tree, blockSelectors ) ).toEqual( [
-				{
-					styles: {
-						color: {
-							background: 'red',
-							text: 'red',
-						},
-					},
-					selector: ROOT_BLOCK_SELECTOR,
-				},
-				{
-					styles: {
-						color: {
-							background: 'yellow',
-							text: 'yellow',
-						},
-						':hover': {
-							color: {
-								background: 'hotpink',
-								text: 'black',
-							},
-						},
-						':focus': {
-							color: {
-								background: 'hotpink',
-								text: 'black',
-							},
-						},
-					},
-					selector: ELEMENTS.link,
-				},
-				{
-					styles: {
-						color: {
-							background: 'blue',
-							text: 'blue',
-						},
-					},
-					selector: '.my-heading1, .my-heading2',
-				},
-				{
-					styles: {
-						typography: {
-							fontSize: '42px',
-						},
-					},
-					selector: '.my-heading1 h1, .my-heading2 h1',
-				},
-				{
-					styles: {
-						typography: {
-							fontSize: '23px',
-						},
-					},
-					selector: '.my-heading1 h2, .my-heading2 h2',
-				},
-				{
-					styles: {
-						':hover': {
-							color: {
-								background: 'green',
-								text: 'yellow',
-							},
-						},
-						':focus': {
-							color: {
-								background: 'green',
-								text: 'yellow',
-							},
-						},
-					},
-					selector: '.my-heading1 a, .my-heading2 a',
-				},
-				{
-					styles: {
-						border: {
-							radius: '9999px',
-						},
-					},
-					selector: '.my-image',
-					featureSelectors: '.my-image img, .my-image .crop-area',
-				},
-			] );
-		} );
-	} );
-	describe( 'getNodesWithSettings', () => {
-		it( 'should return nodes with settings', () => {
-			const tree = {
-				styles: {
-					color: {
-						background: 'red',
-						text: 'red',
-					},
-				},
-				settings: {
-					color: {
-						palette: [
-							{ name: 'White', slug: 'white', color: 'white' },
-							{ name: 'Black', slug: 'black', color: 'black' },
-						],
-					},
-					blocks: {
-						'core/paragraph': {
-							typography: {
-								fontSizes: [
-									{
-										name: 'small',
-										slug: 'small',
-										size: '12px',
-									},
-									{
-										name: 'medium',
-										slug: 'medium',
-										size: '23px',
-									},
-								],
-							},
-						},
-					},
-				},
-			};
-
-			const blockSelectors = {
-				'core/paragraph': {
-					selector: 'p',
-					elements: {
-						link: 'p a',
-						h1: 'p h1',
-						h2: 'p h2',
-						h3: 'p h3',
-						h4: 'p h4',
-						h5: 'p h5',
-						h6: 'p h6',
-					},
-				},
-			};
-
-			expect( getNodesWithSettings( tree, blockSelectors ) ).toEqual( [
-				{
-					presets: {
-						color: {
-							palette: [
-								{
-									name: 'White',
-									slug: 'white',
-									color: 'white',
-								},
-								{
-									name: 'Black',
-									slug: 'black',
-									color: 'black',
-								},
-							],
-						},
-					},
-					selector: ROOT_BLOCK_SELECTOR,
-				},
-				{
-					presets: {
-						typography: {
-							fontSizes: [
-								{
-									name: 'small',
-									slug: 'small',
-									size: '12px',
-								},
-								{
-									name: 'medium',
-									slug: 'medium',
-									size: '23px',
-								},
-							],
-						},
-					},
-					selector: 'p',
-				},
-			] );
-		} );
-	} );
-
-	describe( 'toCustomProperties', () => {
-		it( 'should return a ruleset', () => {
-			const tree = {
-				settings: {
-					color: {
-						palette: {
-							custom: [
-								{
-									name: 'White',
-									slug: 'white',
-									color: 'white',
-								},
-								{
-									name: 'Black',
-									slug: 'black',
-									color: 'black',
-								},
-								{
-									name: 'White to Black',
-									slug: 'white2black',
-									color: 'value',
-								},
-							],
-						},
-					},
-					custom: {
-						white2black: 'value',
-						'font-primary': 'value',
-						'line-height': {
-							body: 1.7,
-							heading: 1.3,
-						},
-					},
-					blocks: {
-						'core/heading': {
-							typography: {
-								fontSizes: {
-									theme: [
-										{
-											name: 'small',
-											slug: 'small',
-											size: '12px',
-										},
-										{
-											name: 'medium',
-											slug: 'medium',
-											size: '23px',
-										},
-									],
-								},
-							},
-						},
-					},
-				},
-			};
-
-			const blockSelectors = {
-				'core/heading': {
-					selector: 'h1,h2,h3,h4,h5,h6',
-				},
-			};
-
-			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
-				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
-			);
-		} );
-	} );
-
-	describe( 'toStyles', () => {
-		it( 'should return a ruleset', () => {
-			const tree = {
-				settings: {
-					color: {
-						palette: {
-							default: [
-								{
-									name: 'White',
-									slug: 'white',
-									color: 'white',
-								},
-								{
-									name: 'Black',
-									slug: 'black',
-									color: 'black',
-								},
-							],
-						},
-					},
-					blocks: {
-						'core/heading': {
-							color: {
-								palette: {
-									default: [
-										{
-											name: 'Blue',
-											slug: 'blue',
-											color: 'blue',
-										},
-									],
-								},
-							},
-						},
-					},
-				},
-				styles: {
-					spacing: {
-						margin: '10px',
-						padding: '10px',
-					},
-					color: {
-						background: 'red',
-					},
-					elements: {
-						h1: {
-							typography: {
-								fontSize: '42px',
-							},
-						},
-						link: {
-							color: {
-								text: 'blue',
-							},
-							':hover': {
-								color: {
-									text: 'orange',
-								},
-							},
-							':focus': {
-								color: {
-									text: 'orange',
-								},
-							},
-						},
-					},
-					blocks: {
-						'core/group': {
-							spacing: {
-								margin: {
-									top: '10px',
-									right: '20px',
-									bottom: '30px',
-									left: '40px',
-								},
-								padding: {
-									top: '11px',
-									right: '22px',
-									bottom: '33px',
-									left: '44px',
-								},
-							},
-						},
-						'core/heading': {
-							color: {
-								text: 'orange',
-							},
-							elements: {
-								link: {
-									color: {
-										text: 'hotpink',
-									},
-									':hover': {
-										color: {
-											text: 'red',
-										},
-									},
-									':focus': {
-										color: {
-											text: 'red',
-										},
-									},
-								},
-							},
-						},
-						'core/image': {
-							color: {
-								text: 'red',
-							},
-							border: {
-								radius: '9999px',
-							},
-						},
-					},
-				},
-			};
-
-			const blockSelectors = {
-				'core/group': {
-					selector: '.wp-block-group',
-				},
-				'core/heading': {
-					selector: 'h1,h2,h3,h4,h5,h6',
-				},
-				'core/image': {
-					selector: '.wp-block-image',
-					featureSelectors: {
-						border: '.wp-block-image img, .wp-block-image .wp-crop-area',
-					},
-				},
-			};
-
-			expect( toStyles( tree, blockSelectors ) ).toEqual(
-				'body {margin: 0;}' +
-					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
-					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
-			);
-		} );
-		it( 'should output content and wide size variables if values are specified', () => {
-			const tree = {
-				settings: {
-					layout: {
-						contentSize: '840px',
-						wideSize: '1100px',
-					},
-				},
-			};
-			expect( toStyles( tree, 'body' ) ).toEqual(
-				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
-			);
-		} );
-	} );
-
-	describe( 'getLayoutStyles', () => {
-		const layoutDefinitionsTree = {
-			settings: {
-				layout: {
-					definitions: {
-						default: {
-							name: 'default',
-							slug: 'flow',
-							className: 'is-layout-flow',
-							baseStyles: [
-								{
-									selector: ' > .alignleft',
-									rules: {
-										float: 'left',
-										'margin-inline-start': '0',
-										'margin-inline-end': '2em',
-									},
-								},
-								{
-									selector: ' > .alignright',
-									rules: {
-										float: 'right',
-										'margin-inline-start': '2em',
-										'margin-inline-end': '0',
-									},
-								},
-								{
-									selector: ' > .aligncenter',
-									rules: {
-										'margin-left': 'auto !important',
-										'margin-right': 'auto !important',
-									},
-								},
-							],
-							spacingStyles: [
-								{
-									selector: ' > *',
-									rules: {
-										'margin-block-start': '0',
-										'margin-block-end': '0',
-									},
-								},
-								{
-									selector: ' > * + *',
-									rules: {
-										'margin-block-start': null,
-										'margin-block-end': '0',
-									},
-								},
-							],
-						},
-						flex: {
-							name: 'flex',
-							slug: 'flex',
-							className: 'is-layout-flex',
-							displayMode: 'flex',
-							baseStyles: [
-								{
-									selector: '',
-									rules: {
-										'flex-wrap': 'wrap',
-										'align-items': 'center',
-									},
-								},
-								{
-									selector: ' > *',
-									rules: {
-										margin: '0',
-									},
-								},
-							],
-							spacingStyles: [
-								{
-									selector: '',
-									rules: {
-										gap: null,
-									},
-								},
-							],
-						},
-					},
-				},
-			},
-		};
-
-		it( 'should return fallback gap flex layout style, and all base styles, if block styles are enabled and blockGap is disabled', () => {
-			const style = { spacing: { blockGap: '12px' } };
-
-			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
-				style,
-				selector: 'body',
-				hasBlockGapSupport: false,
-				hasFallbackGapSupport: true,
-			} );
-
-			expect( layoutStyles ).toEqual(
-				':where(.is-layout-flex) { gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
-			);
-		} );
-
-		it( 'should return fallback gap layout styles, and base styles, if blockGap is enabled, but there is no blockGap value', () => {
-			const style = {};
-
-			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
-				style,
-				selector: 'body',
-				hasBlockGapSupport: true,
-				hasFallbackGapSupport: true,
-			} );
-
-			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }body .is-layout-flex { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
-			);
-		} );
-
-		it( 'should return real gap layout style if blockGap is enabled, and base styles', () => {
-			const style = { spacing: { blockGap: '12px' } };
-
-			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
-				style,
-				selector: 'body',
-				hasBlockGapSupport: true,
-				hasFallbackGapSupport: true,
-			} );
-
-			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }body .is-layout-flex { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
-			);
-		} );
-
-		it( 'should return real gap layout style if blockGap is enabled', () => {
-			const style = { spacing: { blockGap: '12px' } };
-
-			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
-				style,
-				selector: '.wp-block-group',
-				hasBlockGapSupport: true,
-				hasFallbackGapSupport: true,
-			} );
-
-			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
-			);
-		} );
-
-		it( 'should return fallback gap flex layout style for a block if blockGap is disabled, and a fallback value is provided', () => {
-			const style = { spacing: { blockGap: '12px' } };
-
-			const layoutStyles = getLayoutStyles( {
-				tree: layoutDefinitionsTree,
-				style,
-				selector: '.wp-block-group',
-				hasBlockGapSupport: false, // This means that the fallback value will be used instead of the "real" one.
-				hasFallbackGapSupport: true,
-				fallbackGapValue: '2em',
-			} );
-
-			expect( layoutStyles ).toEqual(
-				':where(.wp-block-group.is-layout-flex) { gap: 2em; }'
-			);
-		} );
-	} );
-
-	describe( 'getBlockSelectors', () => {
-		it( 'should return block selectors data', () => {
-			const imageSupports = {
-				__experimentalBorder: {
-					radius: true,
-					__experimentalSelector: 'img, .crop-area',
-				},
-				color: {
-					__experimentalDuotone: 'img',
-				},
-				__experimentalSelector: '.my-image',
-			};
-			const imageBlock = { name: 'core/image', supports: imageSupports };
-			const blockTypes = [ imageBlock ];
-
-			expect( getBlockSelectors( blockTypes ) ).toEqual( {
-				'core/image': {
-					name: imageBlock.name,
-					selector: imageSupports.__experimentalSelector,
-					duotoneSelector: imageSupports.color.__experimentalDuotone,
-					fallbackGapValue: undefined,
-					featureSelectors: {
-						border: '.my-image img, .my-image .crop-area',
-					},
-					hasLayoutSupport: false,
-				},
-			} );
-		} );
-	} );
-
-	describe( 'getStylesDeclarations', () => {
-		const blockStyles = {
-			spacing: {
-				padding: {
-					top: '33px',
-					right: '33px',
-					bottom: '33px',
-					left: '33px',
-				},
-			},
-			color: {
-				background: 'var:preset|color|light-green-cyan',
-			},
-			typography: {
-				fontFamily: 'sans-serif',
-				fontSize: '15px',
-			},
-		};
-
-		it( 'should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
-			expect(
-				getStylesDeclarations( blockStyles, 'body', true )
-			).toEqual( [
-				'--wp--style--root--padding-top: 33px',
-				'--wp--style--root--padding-right: 33px',
-				'--wp--style--root--padding-bottom: 33px',
-				'--wp--style--root--padding-left: 33px',
-				'background-color: var(--wp--preset--color--light-green-cyan)',
-				'font-family: sans-serif',
-				'font-size: 15px',
-			] );
-		} );
-
-		it( 'should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
-			expect(
-				getStylesDeclarations( blockStyles, 'body', false )
-			).toEqual( [
-				'background-color: var(--wp--preset--color--light-green-cyan)',
-				'padding-top: 33px',
-				'padding-right: 33px',
-				'padding-bottom: 33px',
-				'padding-left: 33px',
-				'font-family: sans-serif',
-				'font-size: 15px',
-			] );
-		} );
-
-		it( 'should not output padding variables if selector is not root', () => {
-			expect(
-				getStylesDeclarations(
-					blockStyles,
-					'.wp-block-button__link',
-					true
-				)
-			).toEqual( [
-				'background-color: var(--wp--preset--color--light-green-cyan)',
-				'padding-top: 33px',
-				'padding-right: 33px',
-				'padding-bottom: 33px',
-				'padding-left: 33px',
-				'font-family: sans-serif',
-				'font-size: 15px',
-			] );
-		} );
-
-		it( 'should output clamp values for font-size when fluid typography is enabled', () => {
-			expect(
-				getStylesDeclarations(
-					blockStyles,
-					'.wp-block-site-title',
-					true,
-					{
-						settings: {
-							typography: {
-								fluid: true,
-							},
-						},
-					}
-				)
-			).toEqual( [
-				'background-color: var(--wp--preset--color--light-green-cyan)',
-				'padding-top: 33px',
-				'padding-right: 33px',
-				'padding-bottom: 33px',
-				'padding-left: 33px',
-				'font-family: sans-serif',
-				'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
-			] );
-		} );
-
-		it( 'should output direct values for font-size when fluid typography is disabled', () => {
-			expect(
-				getStylesDeclarations(
-					blockStyles,
-					'.wp-block-site-title',
-					true,
-					{
-						settings: {
-							typography: {
-								fluid: false,
-							},
-						},
-					}
-				)
-			).toEqual( [
-				'background-color: var(--wp--preset--color--light-green-cyan)',
-				'padding-top: 33px',
-				'padding-right: 33px',
-				'padding-bottom: 33px',
-				'padding-left: 33px',
-				'font-family: sans-serif',
-				'font-size: 15px',
-			] );
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/global-styles/test/utils.js b/packages/edit-site/src/components/global-styles/test/utils.js
deleted file mode 100644
index 7d0e3464557f61..00000000000000
--- a/packages/edit-site/src/components/global-styles/test/utils.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
-
-describe( 'editor utils', () => {
-	const themeJson = {
-		version: 1,
-		settings: {
-			color: {
-				palette: {
-					theme: [
-						{
-							slug: 'primary',
-							color: '#007cba',
-							name: 'Primary',
-						},
-						{
-							slug: 'secondary',
-							color: '#006ba1',
-							name: 'Secondary',
-						},
-					],
-					custom: [
-						{
-							slug: 'primary',
-							color: '#007cba',
-							name: 'Primary',
-						},
-						{
-							slug: 'secondary',
-							color: '#a65555',
-							name: 'Secondary',
-						},
-					],
-				},
-				custom: true,
-				customDuotone: true,
-				customGradient: true,
-				link: true,
-			},
-			custom: {
-				color: {
-					primary: 'var(--wp--preset--color--primary)',
-					secondary: 'var(--wp--preset--color--secondary)',
-				},
-			},
-		},
-		isGlobalStylesUserThemeJSON: true,
-	};
-
-	describe( 'getPresetVariableFromValue', () => {
-		const context = 'root';
-		const propertyName = 'color.text';
-		const value = '#007cba';
-
-		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
-			it( 'returns the originally provided value', () => {
-				const actual = getPresetVariableFromValue(
-					themeJson.settings,
-					context,
-					'fakePropertyName',
-					value
-				);
-				expect( actual ).toBe( value );
-			} );
-		} );
-
-		describe( 'when a global style is cleared by the user', () => {
-			it( 'returns an undefined preset variable', () => {
-				const actual = getPresetVariableFromValue(
-					themeJson.settings,
-					context,
-					propertyName,
-					undefined
-				);
-				expect( actual ).toBe( undefined );
-			} );
-		} );
-
-		describe( 'when a global style is selected by the user', () => {
-			describe( 'and it is not a preset value (e.g. custom color)', () => {
-				it( 'returns the originally provided value', () => {
-					const customValue = '#6e4545';
-					const actual = getPresetVariableFromValue(
-						themeJson.settings,
-						context,
-						propertyName,
-						customValue
-					);
-					expect( actual ).toBe( customValue );
-				} );
-			} );
-
-			describe( 'and it is a preset value', () => {
-				it( 'returns the preset variable', () => {
-					const actual = getPresetVariableFromValue(
-						themeJson.settings,
-						context,
-						propertyName,
-						value
-					);
-					expect( actual ).toBe( 'var:preset|color|primary' );
-				} );
-			} );
-		} );
-	} );
-
-	describe( 'getValueFromVariable', () => {
-		describe( 'when provided an invalid variable', () => {
-			it( 'returns the originally provided value', () => {
-				const actual = getValueFromVariable(
-					themeJson,
-					'root',
-					undefined
-				);
-
-				expect( actual ).toBe( undefined );
-			} );
-		} );
-
-		describe( 'when provided a preset variable', () => {
-			it( 'retrieves the correct preset value', () => {
-				const actual = getValueFromVariable(
-					themeJson,
-					'root',
-					'var:preset|color|primary'
-				);
-
-				expect( actual ).toBe( '#007cba' );
-			} );
-		} );
-
-		describe( 'when provided a custom variable', () => {
-			it( 'retrieves the correct custom value', () => {
-				const actual = getValueFromVariable(
-					themeJson,
-					'root',
-					'var(--wp--custom--color--secondary)'
-				);
-
-				expect( actual ).toBe( '#a65555' );
-			} );
-		} );
-
-		describe( 'when provided a dynamic reference', () => {
-			it( 'retrieves the referenced value', () => {
-				const stylesWithRefs = {
-					...themeJson,
-					styles: {
-						color: {
-							background: {
-								ref: 'styles.color.text',
-							},
-							text: 'purple-rain',
-						},
-					},
-				};
-				const actual = getValueFromVariable( stylesWithRefs, 'root', {
-					ref: 'styles.color.text',
-				} );
-
-				expect( actual ).toBe( stylesWithRefs.styles.color.text );
-			} );
-
-			it( 'returns the originally provided value where value is dynamic reference and reference does not exist', () => {
-				const stylesWithRefs = {
-					...themeJson,
-					styles: {
-						color: {
-							text: {
-								ref: 'styles.background.text',
-							},
-						},
-					},
-				};
-				const actual = getValueFromVariable( stylesWithRefs, 'root', {
-					ref: 'styles.color.text',
-				} );
-
-				expect( actual ).toBe( stylesWithRefs.styles.color.text );
-			} );
-
-			it( 'returns the originally provided value where value is dynamic reference', () => {
-				const stylesWithRefs = {
-					...themeJson,
-					styles: {
-						color: {
-							background: {
-								ref: 'styles.color.text',
-							},
-							text: {
-								ref: 'styles.background.text',
-							},
-						},
-					},
-				};
-				const actual = getValueFromVariable( stylesWithRefs, 'root', {
-					ref: 'styles.color.text',
-				} );
-
-				expect( actual ).toBe( stylesWithRefs.styles.color.text );
-			} );
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/global-styles/test/utils.spec.js b/packages/edit-site/src/components/global-styles/test/utils.spec.js
new file mode 100644
index 00000000000000..6b07fffbb955db
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/test/utils.spec.js
@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { getNewIndexFromPresets } from '../utils';
+
+const validPresets = {
+	single: [ { slug: 'preset-1' } ],
+	multiple: [ { slug: 'preset-1' }, { slug: 'preset-2' } ],
+	withGaps: [ { slug: 'preset-1' }, { slug: 'preset-3' } ],
+	mixedPrefixes: [
+		{ slug: 'preset-1' },
+		{ slug: 'shadow-2' },
+		{ slug: 'preset-3' },
+	],
+	nonStringSlug: [ { slug: 'preset-1' }, { slug: 2 } ],
+	emptyArray: [],
+};
+
+const invalidPresets = {
+	noMatch: [ { slug: 'preset-alpha' }, { slug: 'preset-beta' } ],
+	emptySlug: [ { slug: '' } ],
+	nullSlug: [ { slug: null } ],
+	undefinedSlug: [ { slug: undefined } ],
+	nonObjectElements: [ 'preset-1' ],
+};
+
+const getExpectedIndex = ( presetKey, presets ) => {
+	if ( presetKey === 'withGaps' ) {
+		return 4;
+	}
+	if ( presetKey === 'mixedPrefixes' ) {
+		return 4;
+	}
+	if ( presetKey === 'nonStringSlug' ) {
+		return 2;
+	}
+	return presets.length + 1;
+};
+
+describe( 'getNewIndexFromPresets', () => {
+	Object.entries( validPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test valid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return correct new index for ${ presetKey }`, () => {
+				const expectedIndex = getExpectedIndex( presetKey, presets );
+				expect( newIndex ).toBe( expectedIndex );
+			} );
+		} );
+	} );
+
+	Object.entries( invalidPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test invalid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return 1 for ${ presetKey }`, () => {
+				expect( newIndex ).toBe( 1 );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js
new file mode 100644
index 00000000000000..e99e6a037500ad
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/typeset.js
@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+import { getFontFamilies } from './utils';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function Typesets() {
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const { base } = useContext( GlobalStylesContext );
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const config = mergeBaseAndUserConfigs( base, userConfig );
+	const allFontFamilies = getFontFamilies( config );
+	const hasFonts =
+		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
+
+	return (
+		hasFonts && (
+			<>
+				{ !! modalTabOpen && (
+					<FontLibraryModal
+						onRequestClose={ () => setModalTabOpen( null ) }
+						defaultTabId={ modalTabOpen }
+					/>
+				) }
+
+				<VStack spacing={ 2 }>
+					<HStack justify="space-between">
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					</HStack>
+					<ItemGroup isBordered isSeparated>
+						{ allFontFamilies.map(
+							( font ) =>
+								font && (
+									<FontFamilyItem
+										key={ font.slug }
+										font={ font }
+									/>
+								)
+						) }
+					</ItemGroup>
+				</VStack>
+			</>
+		)
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<Typesets { ...props } />
+	</FontLibraryProvider>
+);
diff --git a/packages/edit-site/src/components/global-styles/typography-elements.js b/packages/edit-site/src/components/global-styles/typography-elements.js
new file mode 100644
index 00000000000000..d087c8df041521
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/typography-elements.js
@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import Subtitle from './subtitle';
+
+import { unlock } from '../../lock-unlock';
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function ElementItem( { parentMenu, element, label } ) {
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
+	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
+	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text' );
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily: fontFamily ?? 'serif',
+						background:
+							gradientValue ??
+							backgroundColor ??
+							fallbackBackgroundColor,
+						color,
+						fontStyle,
+						fontWeight,
+						...extraStyles,
+					} }
+					aria-hidden="true"
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ label }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function TypographyElements() {
+	const parentMenu = '';
+
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+			<ItemGroup isBordered isSeparated>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="text"
+					label={ __( 'Text' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="link"
+					label={ __( 'Links' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="heading"
+					label={ __( 'Headings' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="caption"
+					label={ __( 'Captions' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="button"
+					label={ __( 'Buttons' ) }
+				/>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default TypographyElements;
diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js
new file mode 100644
index 00000000000000..a491ca57bf5be4
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/typography-example.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFontFamilies } from './utils';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+export default function PreviewTypography( { fontSize, variation } ) {
+	const { base } = useContext( GlobalStylesContext );
+	let config = base;
+	if ( variation ) {
+		config = mergeBaseAndUserConfigs( base, variation );
+	}
+	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
+	const bodyPreviewStyle = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
+	const headingPreviewStyle = headingFontFamilies
+		? getFamilyPreviewStyle( headingFontFamilies )
+		: {};
+
+	if ( fontSize ) {
+		bodyPreviewStyle.fontSize = fontSize;
+		headingPreviewStyle.fontSize = fontSize;
+	}
+
+	return (
+		<motion.div
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: 0.3,
+				type: 'tween',
+			} }
+			style={ {
+				textAlign: 'center',
+			} }
+		>
+			<span style={ headingPreviewStyle }>
+				{ _x( 'A', 'Uppercase letter A' ) }
+			</span>
+			<span style={ bodyPreviewStyle }>
+				{ _x( 'a', 'Lowercase letter A' ) }
+			</span>
+		</motion.div>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 82f7dc796d92f1..795a101bed839f 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -1,386 +1,54 @@
 /**
  * WordPress dependencies
  */
-import {
-	LineHeightControl,
-	__experimentalFontFamilyControl as FontFamilyControl,
-	__experimentalFontAppearanceControl as FontAppearanceControl,
-	__experimentalLetterSpacingControl as LetterSpacingControl,
-	__experimentalTextTransformControl as TextTransformControl,
-	__experimentalTextDecorationControl as TextDecorationControl,
-} from '@wordpress/block-editor';
-import {
-	FontSizePicker,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import { unlock } from '../../lock-unlock';
 
-export function useHasTypographyPanel( name ) {
-	const hasFontFamily = useHasFontFamilyControl( name );
-	const hasLineHeight = useHasLineHeightControl( name );
-	const hasFontAppearance = useHasAppearanceControl( name );
-	const hasLetterSpacing = useHasLetterSpacingControl( name );
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		hasFontFamily ||
-		hasLineHeight ||
-		hasFontAppearance ||
-		hasLetterSpacing ||
-		supports.includes( 'fontSize' )
-	);
-}
-
-function useHasFontFamilyControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
-	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
-}
-
-function useHasLineHeightControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		useSetting( 'typography.lineHeight', name )[ 0 ] &&
-		supports.includes( 'lineHeight' )
-	);
-}
-
-function useHasAppearanceControl( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	return hasFontStyles || hasFontWeights;
-}
-
-function useAppearanceControlLabel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	if ( ! hasFontStyles ) {
-		return __( 'Font weight' );
-	}
-	if ( ! hasFontWeights ) {
-		return __( 'Font style' );
-	}
-	return __( 'Appearance' );
-}
-
-function useHasLetterSpacingControl( name, element ) {
-	const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'letterSpacing' );
-}
-
-function useHasTextTransformControl( name, element ) {
-	const setting = useSetting( 'typography.textTransform', name )[ 0 ];
-	if ( ! setting ) {
-		return false;
-	}
-	if ( ! name && element === 'heading' ) {
-		return true;
-	}
-	const supports = getSupportedGlobalStylesPanels( name );
-	return supports.includes( 'textTransform' );
-}
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	TypographyPanel: StylesTypographyPanel,
+} = unlock( blockEditorPrivateApis );
 
-function useHasTextDecorationControl( name, element ) {
-	// This is an exception for link elements.
-	// We shouldn't allow other blocks or elements to set textDecoration
-	// because this will be inherited by their children.
-	return ! name && element === 'link';
-}
-
-function useStyleWithReset( path, blockName ) {
-	const [ style, setStyle ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
-	const hasStyle = () => !! userStyle;
-	const resetStyle = () => setStyle( undefined );
-	return [ style, setStyle, hasStyle, resetStyle ];
-}
-
-function useFontSizeWithReset( path, blockName ) {
-	const [ fontSize, setStyleCallback ] = useStyle( path, blockName );
-	const [ userStyle ] = useStyle( path, blockName, 'user' );
-	const hasFontSize = () => !! userStyle;
-	const resetFontSize = () => setStyleCallback( undefined );
-	const setFontSize = ( newValue, metadata ) => {
-		if ( !! metadata?.slug ) {
-			newValue = `var:preset|font-size|${ metadata?.slug }`;
-		}
-		setStyleCallback( newValue );
-	};
-
-	return {
-		fontSize,
-		setFontSize,
-		hasFontSize,
-		resetFontSize,
-	};
-}
-
-function useFontAppearance( prefix, name ) {
-	const [ fontStyle, setFontStyle ] = useStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ userFontStyle ] = useStyle(
-		prefix + 'typography.fontStyle',
-		name,
-		'user'
-	);
-	const [ fontWeight, setFontWeight ] = useStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
-	const [ userFontWeight ] = useStyle(
-		prefix + 'typography.fontWeight',
-		name,
-		'user'
-	);
-	const hasFontAppearance = () => !! userFontStyle || !! userFontWeight;
-	const resetFontAppearance = () => {
-		setFontStyle( undefined );
-		setFontWeight( undefined );
-	};
-	return {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	};
-}
-
-export default function TypographyPanel( { name, element, headingLevel } ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	let prefix = '';
+export default function TypographyPanel( { element, headingLevel } ) {
+	let prefixParts = [];
 	if ( element === 'heading' ) {
-		prefix = `elements.${ headingLevel }.`;
+		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
-		prefix = `elements.${ element }.`;
-	}
-	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
-
-	const disableCustomFontSizes = ! useSetting(
-		'typography.customFontSize',
-		name
-	)[ 0 ];
-	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
-	const hasFontStyles =
-		useSetting( 'typography.fontStyle', name )[ 0 ] &&
-		supports.includes( 'fontStyle' );
-	const hasFontWeights =
-		useSetting( 'typography.fontWeight', name )[ 0 ] &&
-		supports.includes( 'fontWeight' );
-	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
-	const hasLineHeightEnabled = useHasLineHeightControl( name );
-	const hasAppearanceControl = useHasAppearanceControl( name );
-	const appearanceControlLabel = useAppearanceControlLabel( name );
-	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
-	const hasTextTransformControl = useHasTextTransformControl( name, element );
-	const hasTextDecorationControl = useHasTextDecorationControl(
-		name,
-		element
+		prefixParts = prefixParts.concat( [ 'elements', element ] );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle(
+		prefix,
+		undefined,
+		'all',
+		{
+			shouldDecodeEncode: false,
+		}
+	);
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const usedElement = element === 'heading' ? headingLevel : element;
+	const settings = useSettingsForBlockElement(
+		rawSettings,
+		undefined,
+		usedElement
 	);
-
-	/* Disable font size controls when the option to style all headings is selected. */
-	let hasFontSizeEnabled = supports.includes( 'fontSize' );
-	if ( element === 'heading' && headingLevel === 'heading' ) {
-		hasFontSizeEnabled = false;
-	}
-
-	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
-		useStyleWithReset( prefix + 'typography.fontFamily', name );
-	const { fontSize, setFontSize, hasFontSize, resetFontSize } =
-		useFontSizeWithReset( prefix + 'typography.fontSize', name );
-	const {
-		fontStyle,
-		setFontStyle,
-		fontWeight,
-		setFontWeight,
-		hasFontAppearance,
-		resetFontAppearance,
-	} = useFontAppearance( prefix, name );
-	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
-		useStyleWithReset( prefix + 'typography.lineHeight', name );
-	const [
-		letterSpacing,
-		setLetterSpacing,
-		hasLetterSpacing,
-		resetLetterSpacing,
-	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
-	const [
-		textTransform,
-		setTextTransform,
-		hasTextTransform,
-		resetTextTransform,
-	] = useStyleWithReset( prefix + 'typography.textTransform', name );
-	const [
-		textDecoration,
-		setTextDecoration,
-		hasTextDecoration,
-		resetTextDecoration,
-	] = useStyleWithReset( prefix + 'typography.textDecoration', name );
-
-	const resetAll = () => {
-		resetFontFamily();
-		resetFontSize();
-		resetFontAppearance();
-		resetLineHeight();
-		resetLetterSpacing();
-		resetTextTransform();
-	};
 
 	return (
-		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
-			{ hasFontFamilyEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font family' ) }
-					hasValue={ hasFontFamily }
-					onDeselect={ resetFontFamily }
-					isShownByDefault
-				>
-					<FontFamilyControl
-						fontFamilies={ fontFamilies }
-						value={ fontFamily }
-						onChange={ setFontFamily }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasFontSizeEnabled && (
-				<ToolsPanelItem
-					label={ __( 'Font size' ) }
-					hasValue={ hasFontSize }
-					onDeselect={ resetFontSize }
-					isShownByDefault
-				>
-					<FontSizePicker
-						value={ fontSize }
-						onChange={ setFontSize }
-						fontSizes={ fontSizes }
-						disableCustomFontSizes={ disableCustomFontSizes }
-						withReset={ false }
-						withSlider
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasAppearanceControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ appearanceControlLabel }
-					hasValue={ hasFontAppearance }
-					onDeselect={ resetFontAppearance }
-					isShownByDefault
-				>
-					<FontAppearanceControl
-						value={ {
-							fontStyle,
-							fontWeight,
-						} }
-						onChange={ ( {
-							fontStyle: newFontStyle,
-							fontWeight: newFontWeight,
-						} ) => {
-							setFontStyle( newFontStyle );
-							setFontWeight( newFontWeight );
-						} }
-						hasFontStyles={ hasFontStyles }
-						hasFontWeights={ hasFontWeights }
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLineHeightEnabled && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Line height' ) }
-					hasValue={ hasLineHeight }
-					onDeselect={ resetLineHeight }
-					isShownByDefault
-				>
-					<LineHeightControl
-						__nextHasNoMarginBottom
-						__unstableInputWidth="auto"
-						value={ lineHeight }
-						onChange={ setLineHeight }
-						size="__unstable-large"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasLetterSpacingControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Letter spacing' ) }
-					hasValue={ hasLetterSpacing }
-					onDeselect={ resetLetterSpacing }
-					isShownByDefault
-				>
-					<LetterSpacingControl
-						value={ letterSpacing }
-						onChange={ setLetterSpacing }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextTransformControl && (
-				<ToolsPanelItem
-					label={ __( 'Letter case' ) }
-					hasValue={ hasTextTransform }
-					onDeselect={ resetTextTransform }
-					isShownByDefault
-				>
-					<TextTransformControl
-						value={ textTransform }
-						onChange={ setTextTransform }
-						showNone
-						isBlock
-						size="__unstable-large"
-						__nextHasNoMarginBottom
-					/>
-				</ToolsPanelItem>
-			) }
-			{ hasTextDecorationControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Text decoration' ) }
-					hasValue={ hasTextDecoration }
-					onDeselect={ resetTextDecoration }
-					isShownByDefault
-				>
-					<TextDecorationControl
-						value={ textDecoration }
-						onChange={ setTextDecoration }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-					/>
-				</ToolsPanelItem>
-			) }
-		</ToolsPanel>
+		<StylesTypographyPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/typography-preview.js b/packages/edit-site/src/components/global-styles/typography-preview.js
index b0e134ab0cce59..092f4e4e3b05e9 100644
--- a/packages/edit-site/src/components/global-styles/typography-preview.js
+++ b/packages/edit-site/src/components/global-styles/typography-preview.js
@@ -1,7 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import { useStyle } from './hooks';
+import { unlock } from '../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function TypographyPreview( { name, element, headingLevel } ) {
 	let prefix = '';
@@ -11,14 +18,27 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 		prefix = `elements.${ element }.`;
 	}
 
-	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
-	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
-	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
-	const [ color ] = useStyle( prefix + 'color.text', name );
-	const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );
-	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
-	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
-	const [ letterSpacing ] = useStyle(
+	const [ fontFamily ] = useGlobalStyle(
+		prefix + 'typography.fontFamily',
+		name
+	);
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
+	const [ backgroundColor ] = useGlobalStyle(
+		prefix + 'color.background',
+		name
+	);
+	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
+	const [ fontSize ] = useGlobalStyle( prefix + 'typography.fontSize', name );
+	const [ fontStyle ] = useGlobalStyle(
+		prefix + 'typography.fontStyle',
+		name
+	);
+	const [ fontWeight ] = useGlobalStyle(
+		prefix + 'typography.fontWeight',
+		name
+	);
+	const [ letterSpacing ] = useGlobalStyle(
 		prefix + 'typography.letterSpacing',
 		name
 	);
@@ -34,7 +54,8 @@ export default function TypographyPreview( { name, element, headingLevel } ) {
 			className="edit-site-typography-preview"
 			style={ {
 				fontFamily: fontFamily ?? 'serif',
-				background: gradientValue ?? backgroundColor,
+				background:
+					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
 				color,
 				fontSize,
 				fontStyle,
diff --git a/packages/edit-site/src/components/global-styles/typography-utils.js b/packages/edit-site/src/components/global-styles/typography-utils.js
deleted file mode 100644
index a792d1875005c2..00000000000000
--- a/packages/edit-site/src/components/global-styles/typography-utils.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * The fluid utilities must match the backend equivalent.
- * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
- * ---------------------------------------------------------------
- */
-
-/**
- * WordPress dependencies
- */
-import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
-
-/**
- * @typedef {Object} FluidPreset
- * @property {string|undefined}  max A maximum font size value.
- * @property {?string|undefined} min A minimum font size value.
- */
-
-/**
- * @typedef {Object} Preset
- * @property {?string|?number}               size  A default font size.
- * @property {string}                        name  A font size name, displayed in the UI.
- * @property {string}                        slug  A font size slug
- * @property {boolean|FluidPreset|undefined} fluid A font size slug
- */
-
-/**
- * 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.
- *
- * @return {string|*} A font-size value or the value of preset.size.
- */
-export function getTypographyFontSizeValue( preset, typographySettings ) {
-	const { size: defaultSize } = preset;
-
-	/*
-	 * Catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
-	 */
-	if ( ! defaultSize || '0' === defaultSize ) {
-		return defaultSize;
-	}
-
-	if ( true !== typographySettings?.fluid ) {
-		return defaultSize;
-	}
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === preset?.fluid ) {
-		return defaultSize;
-	}
-
-	const fluidFontSizeValue = getComputedFluidTypographyValue( {
-		minimumFontSize: preset?.fluid?.min,
-		maximumFontSize: preset?.fluid?.max,
-		fontSize: defaultSize,
-	} );
-
-	if ( !! fluidFontSizeValue ) {
-		return fluidFontSizeValue;
-	}
-
-	return defaultSize;
-}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 6eeada1e67c61d..22ebad383884e9 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,32 +2,128 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
+	Navigator,
+	useNavigator,
+	createSlotFill,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
-import { getBlockTypes } from '@wordpress/blocks';
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import {
+	useBlockHasGlobalStyles,
+	default as ScreenBlockList,
+} from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import FontSize from './font-sizes/font-size';
+import FontSizes from './font-sizes/font-sizes';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
-import ScreenBackgroundColor from './screen-background-color';
-import ScreenTextColor from './screen-text-color';
-import ScreenLinkColor from './screen-link-color';
-import ScreenHeadingColor from './screen-heading-color';
-import ScreenButtonColor from './screen-button-color';
+import ScreenBackground from './screen-background';
+import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
+import StyleBook from '../style-book';
+import ScreenCSS from './screen-css';
+import ScreenRevisions from './screen-revisions';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+const SLOT_FILL_NAME = 'GlobalStylesMenu';
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
+const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
+	createSlotFill( SLOT_FILL_NAME );
+
+function GlobalStylesActionMenu() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const { toggle } = useDispatch( preferencesStore );
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+		};
+	}, [] );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const loadCustomCSS = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+	};
+
+	return (
+		<GlobalStylesMenuFill>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More' ) }
+				toggleProps={ { size: 'compact' } }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem onClick={ loadCustomCSS }>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+							<MenuItem
+								onClick={ () => {
+									toggle(
+										'core/edit-site',
+										'welcomeGuideStyles'
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Welcome Guide' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
+							>
+								{ __( 'Reset styles' ) }
+							</MenuItem>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</GlobalStylesMenuFill>
+	);
+}
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
-		<NavigatorScreen
+		<Navigator.Screen
 			className={ [
 				'edit-site-global-styles-sidebar__navigator-screen',
 				className,
@@ -39,106 +135,290 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function ContextScreens( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+function BlockStylesNavigationScreens( {
+	parentMenu,
+	blockStyles,
+	blockName,
+} ) {
+	return blockStyles.map( ( style, index ) => (
+		<GlobalStylesNavigationScreen
+			key={ index }
+			path={ parentMenu + '/variations/' + style.name }
+		>
+			<ScreenBlock name={ blockName } variation={ style.name } />
+		</GlobalStylesNavigationScreen>
+	) );
+}
+
+function ContextScreens( { name, parentMenu = '' } ) {
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
 
 	return (
 		<>
-			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/text' }
+				path={ parentMenu + '/colors/palette' }
 			>
-				<ScreenTypographyElement name={ name } element="text" />
+				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/link' }
-			>
-				<ScreenTypographyElement name={ name } element="link" />
+			{ !! blockStyleVariations?.length && (
+				<BlockStylesNavigationScreens
+					parentMenu={ parentMenu }
+					blockStyles={ blockStyleVariations }
+					blockName={ name }
+				/>
+			) }
+		</>
+	);
+}
+
+function GlobalStylesStyleBook() {
+	const navigator = useNavigator();
+	const { path } = navigator.location;
+	return (
+		<StyleBook
+			isSelected={ ( 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 ) => {
+				if (
+					STYLE_BOOK_COLOR_GROUPS.find(
+						( group ) => group.slug === blockName
+					)
+				) {
+					// Go to color palettes Global Styles.
+					navigator.goTo( '/colors/palette' );
+					return;
+				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					navigator.goTo( '/typography' );
+					return;
+				}
+
+				// Now go to the selected block.
+				navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
+			} }
+		/>
+	);
+}
+
+function GlobalStylesBlockLink() {
+	const navigator = useNavigator();
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
+	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	// When we're in the `Blocks` screen enable deep linking to the selected block.
+	useEffect( () => {
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		const currentPath = navigator.location.path;
+		if (
+			currentPath !== '/blocks' &&
+			! currentPath.startsWith( '/blocks/' )
+		) {
+			return;
+		}
+		const newPath = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( newPath !== currentPath ) {
+			navigator.goTo( newPath, { skipFocus: true } );
+		}
+	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
+}
+
+function GlobalStylesEditorCanvasContainerLink() {
+	const { goTo, location } = useNavigator();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+	const path = location?.path;
+	const isRevisionsOpen = path === '/revisions';
+
+	// If the user switches the editor canvas container view, redirect
+	// to the appropriate screen. This effectively allows deep linking to the
+	// desired screens from outside the global styles navigation provider.
+	useEffect( () => {
+		switch ( editorCanvasContainerView ) {
+			case 'global-styles-revisions':
+			case 'global-styles-revisions:style-book':
+				if ( ! isRevisionsOpen ) {
+					goTo( '/revisions' );
+				}
+				break;
+			case 'global-styles-css':
+				goTo( '/css' );
+				break;
+			// The stand-alone style book is open
+			// and the revisions panel is open,
+			// close the revisions panel.
+			// Otherwise keep the style book open while
+			// browsing global styles panel.
+			//
+			// Falling through as it matches the default scenario.
+			case 'style-book':
+			default:
+				// In general, if the revision screen is in view but the
+				// `editorCanvasContainerView` is not a revision view, close it.
+				// This also includes the scenario when the stand-alone style
+				// book is open, in which case we want the user to close the
+				// revisions screen and browse global styles.
+				if ( isRevisionsOpen ) {
+					goTo( '/', { isBack: true } );
+				}
+				break;
+		}
+	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
+}
+
+function useNavigatorSync( parentPath, onPathChange ) {
+	const navigator = useNavigator();
+	const { path: childPath } = navigator.location;
+	const previousParentPath = usePrevious( parentPath );
+	const previousChildPath = usePrevious( childPath );
+	useEffect( () => {
+		if ( parentPath !== childPath ) {
+			if ( parentPath !== previousParentPath ) {
+				navigator.goTo( parentPath );
+			} else if ( childPath !== previousChildPath ) {
+				onPathChange( childPath );
+			}
+		}
+	}, [
+		onPathChange,
+		parentPath,
+		previousChildPath,
+		previousParentPath,
+		childPath,
+		navigator,
+	] );
+}
+
+// This component is used to wrap the hook in order to conditionally execute it
+// when the parent component is used on controlled mode.
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+	useNavigatorSync( parentPath, onPathChange );
+	return children;
+}
+
+function GlobalStylesUI( { path, onPathChange } ) {
+	const blocks = getBlockTypes();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	return (
+		<Navigator
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			{ path && onPathChange && (
+				<NavigationSync path={ path } onPathChange={ onPathChange } />
+			) }
+			<GlobalStylesNavigationScreen path="/">
+				<ScreenRoot />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/heading' }
-			>
-				<ScreenTypographyElement name={ name } element="heading" />
+			<GlobalStylesNavigationScreen path="/variations">
+				<ScreenStyleVariations />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/button' }
-			>
-				<ScreenTypographyElement name={ name } element="button" />
+			<GlobalStylesNavigationScreen path="/blocks">
+				<ScreenBlockList />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } />
+			<GlobalStylesNavigationScreen path="/typography">
+				<ScreenTypography />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/palette' }
-			>
-				<ScreenColorPalette name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/font-sizes">
+				<FontSizes />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/background' }
-			>
-				<ScreenBackgroundColor name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
+				<FontSize />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/text">
+				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/link">
+				<ScreenTypographyElement element="link" />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/heading' }
-			>
-				<ScreenHeadingColor name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/heading">
+				<ScreenTypographyElement element="heading" />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/button' }
-			>
-				<ScreenButtonColor name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/caption">
+				<ScreenTypographyElement element="caption" />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } />
+			<GlobalStylesNavigationScreen path="/typography/button">
+				<ScreenTypographyElement element="button" />
 			</GlobalStylesNavigationScreen>
-		</>
-	);
-}
 
-function GlobalStylesUI() {
-	const blocks = getBlockTypes();
+			<GlobalStylesNavigationScreen path="/colors">
+				<ScreenColors />
+			</GlobalStylesNavigationScreen>
 
-	return (
-		<NavigatorProvider
-			className="edit-site-global-styles-sidebar__navigator-provider"
-			initialPath="/"
-		>
-			<GlobalStylesNavigationScreen path="/">
-				<ScreenRoot />
+			<GlobalStylesNavigationScreen path="/shadows">
+				<ScreenShadows />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/variations">
-				<ScreenStyleVariations />
+			<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
+				<ScreenShadowsEdit />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/blocks">
-				<ScreenBlockList />
+			<GlobalStylesNavigationScreen path="/layout">
+				<ScreenLayout />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/revisions">
+				<ScreenRevisions />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/background">
+				<ScreenBackground />
 			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
-					path={ '/blocks/' + block.name }
+					path={ '/blocks/' + encodeURIComponent( block.name ) }
 				>
 					<ScreenBlock name={ block.name } />
 				</GlobalStylesNavigationScreen>
@@ -150,10 +430,19 @@ function GlobalStylesUI() {
 				<ContextScreens
 					key={ 'screens-block-' + block.name }
 					name={ block.name }
+					parentMenu={ '/blocks/' + encodeURIComponent( block.name ) }
 				/>
 			) ) }
-		</NavigatorProvider>
+
+			{ 'style-book' === editorCanvasContainerView && (
+				<GlobalStylesStyleBook />
+			) }
+
+			<GlobalStylesActionMenu />
+			<GlobalStylesBlockLink />
+			<GlobalStylesEditorCanvasContainerLink />
+		</Navigator>
 	);
 }
-
+export { GlobalStylesMenuSlot };
 export default GlobalStylesUI;
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
deleted file mode 100644
index b32201fe2d2c22..00000000000000
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ /dev/null
@@ -1,931 +0,0 @@
-/**
- * External dependencies
- */
-import { get, isEmpty, kebabCase, pickBy, set } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
-	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
-	getBlockTypes,
-} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import { useContext, useMemo } from '@wordpress/element';
-import { getCSSRules } from '@wordpress/style-engine';
-import {
-	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
-	__experimentalGetGapCSSValue as getGapCSSValue,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR, scopeSelector } from './utils';
-import { getTypographyFontSizeValue } from './typography-utils';
-import { GlobalStylesContext } from './context';
-import { useSetting } from './hooks';
-
-// 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 = {
-	__experimentalBorder: 'border',
-	color: 'color',
-	spacing: 'spacing',
-	typography: 'typography',
-};
-
-function compileStyleValue( uncompiledValue ) {
-	const VARIABLE_REFERENCE_PREFIX = 'var:';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-
-	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
-/**
- * Transform given preset tree into a set of style declarations.
- *
- * @param {Object} blockPresets
- * @param {Object} mergedSettings Merged theme.json settings.
- *
- * @return {Array<Object>} An array of style declarations.
- */
-function getPresetsDeclarations( blockPresets = {}, mergedSettings ) {
-	return PRESET_METADATA.reduce(
-		( declarations, { path, valueKey, valueFunc, cssVarInfix } ) => {
-			const presetByOrigin = get( blockPresets, path, [] );
-			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
-				if ( presetByOrigin[ origin ] ) {
-					presetByOrigin[ origin ].forEach( ( value ) => {
-						if ( valueKey && ! valueFunc ) {
-							declarations.push(
-								`--wp--preset--${ cssVarInfix }--${ kebabCase(
-									value.slug
-								) }: ${ value[ valueKey ] }`
-							);
-						} else if (
-							valueFunc &&
-							typeof valueFunc === 'function'
-						) {
-							declarations.push(
-								`--wp--preset--${ cssVarInfix }--${ kebabCase(
-									value.slug
-								) }: ${ valueFunc( value, mergedSettings ) }`
-							);
-						}
-					} );
-				}
-			} );
-
-			return declarations;
-		},
-		[]
-	);
-}
-
-/**
- * Transform given preset tree into a set of preset class declarations.
- *
- * @param {string} blockSelector
- * @param {Object} blockPresets
- * @return {string} CSS declarations for the preset classes.
- */
-function getPresetsClasses( blockSelector, blockPresets = {} ) {
-	return PRESET_METADATA.reduce(
-		( declarations, { path, cssVarInfix, classes } ) => {
-			if ( ! classes ) {
-				return declarations;
-			}
-
-			const presetByOrigin = get( blockPresets, path, [] );
-			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
-				if ( presetByOrigin[ origin ] ) {
-					presetByOrigin[ origin ].forEach( ( { slug } ) => {
-						classes.forEach( ( { classSuffix, propertyName } ) => {
-							const classSelectorToUse = `.has-${ kebabCase(
-								slug
-							) }-${ classSuffix }`;
-							const selectorToUse = blockSelector
-								.split( ',' ) // Selector can be "h1, h2, h3"
-								.map(
-									( selector ) =>
-										`${ selector }${ classSelectorToUse }`
-								)
-								.join( ',' );
-							const value = `var(--wp--preset--${ cssVarInfix }--${ kebabCase(
-								slug
-							) })`;
-							declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`;
-						} );
-					} );
-				}
-			} );
-			return declarations;
-		},
-		''
-	);
-}
-
-function getPresetsSvgFilters( blockPresets = {} ) {
-	return PRESET_METADATA.filter(
-		// Duotone are the only type of filters for now.
-		( metadata ) => metadata.path.at( -1 ) === 'duotone'
-	).flatMap( ( metadata ) => {
-		const presetByOrigin = get( blockPresets, metadata.path, {} );
-		return [ 'default', 'theme' ]
-			.filter( ( origin ) => presetByOrigin[ origin ] )
-			.flatMap( ( origin ) =>
-				presetByOrigin[ origin ].map( ( preset ) => (
-					<PresetDuotoneFilter
-						preset={ preset }
-						key={ preset.slug }
-					/>
-				) )
-			);
-	} );
-}
-
-function flattenTree( input = {}, prefix, token ) {
-	let result = [];
-	Object.keys( input ).forEach( ( key ) => {
-		const newKey = prefix + kebabCase( key.replace( '/', '-' ) );
-		const newLeaf = input[ key ];
-
-		if ( newLeaf instanceof Object ) {
-			const newPrefix = newKey + token;
-			result = [ ...result, ...flattenTree( newLeaf, newPrefix, token ) ];
-		} else {
-			result.push( `${ newKey }: ${ newLeaf }` );
-		}
-	} );
-	return result;
-}
-
-/**
- * Transform given style tree into a set of style declarations.
- *
- * @param {Object}  blockStyles         Block styles.
- *
- * @param {string}  selector            The selector these declarations should attach to.
- *
- * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
- *
- * @param {Object}  tree                A theme.json tree containing layout definitions.
- *
- * @return {Array} An array of style declarations.
- */
-export function getStylesDeclarations(
-	blockStyles = {},
-	selector = '',
-	useRootPaddingAlign,
-	tree = {}
-) {
-	const isRoot = ROOT_BLOCK_SELECTOR === selector;
-	const output = Object.entries( STYLE_PROPERTY ).reduce(
-		(
-			declarations,
-			[ key, { value, properties, useEngine, rootOnly } ]
-		) => {
-			if ( rootOnly && ! isRoot ) {
-				return declarations;
-			}
-			const pathToValue = value;
-			if ( pathToValue[ 0 ] === 'elements' || useEngine ) {
-				return declarations;
-			}
-
-			const styleValue = get( blockStyles, pathToValue );
-
-			// Root-level padding styles don't currently support strings with CSS shorthand values.
-			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
-			if (
-				key === '--wp--style--root--padding' &&
-				( typeof styleValue === 'string' || ! useRootPaddingAlign )
-			) {
-				return declarations;
-			}
-
-			if ( !! properties && typeof styleValue !== 'string' ) {
-				Object.entries( properties ).forEach( ( entry ) => {
-					const [ name, prop ] = entry;
-
-					if ( ! get( styleValue, [ prop ], false ) ) {
-						// Do not create a declaration
-						// for sub-properties that don't have any value.
-						return;
-					}
-
-					const cssProperty = name.startsWith( '--' )
-						? name
-						: kebabCase( name );
-					declarations.push(
-						`${ cssProperty }: ${ compileStyleValue(
-							get( styleValue, [ prop ] )
-						) }`
-					);
-				} );
-			} else if ( get( blockStyles, pathToValue, false ) ) {
-				const cssProperty = key.startsWith( '--' )
-					? key
-					: kebabCase( key );
-				declarations.push(
-					`${ cssProperty }: ${ compileStyleValue(
-						get( blockStyles, pathToValue )
-					) }`
-				);
-			}
-
-			return declarations;
-		},
-		[]
-	);
-
-	// The goal is to move everything to server side generated engine styles
-	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( blockStyles );
-	extraRules.forEach( ( rule ) => {
-		// Don't output padding properties if padding variables are set.
-		if (
-			isRoot &&
-			useRootPaddingAlign &&
-			rule.key.startsWith( 'padding' )
-		) {
-			return;
-		}
-		const cssProperty = rule.key.startsWith( '--' )
-			? rule.key
-			: kebabCase( rule.key );
-
-		let ruleValue = rule.value;
-		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = get( tree, refPath );
-			// Presence of another ref indicates a reference to another dynamic value.
-			// Pointing to another dynamic value is not supported.
-			if ( ! ruleValue || !! ruleValue?.ref ) {
-				return;
-			}
-		}
-
-		// Calculate fluid typography rules where available.
-		if ( cssProperty === 'font-size' ) {
-			/*
-			 * getTypographyFontSizeValue() 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.
-			 */
-			ruleValue = getTypographyFontSizeValue(
-				{ size: ruleValue },
-				tree?.settings?.typography
-			);
-		}
-
-		output.push( `${ cssProperty }: ${ ruleValue }` );
-	} );
-
-	return output;
-}
-
-/**
- * Get generated CSS for layout styles by looking up layout definitions provided
- * in theme.json, and outputting common layout styles, and specific blockGap values.
- *
- * @param {Object}  props
- * @param {Object}  props.tree                  A theme.json tree containing layout definitions.
- * @param {Object}  props.style                 A style object containing spacing values.
- * @param {string}  props.selector              Selector used to group together layout styling rules.
- * @param {boolean} props.hasBlockGapSupport    Whether or not the theme opts-in to blockGap support.
- * @param {boolean} props.hasFallbackGapSupport Whether or not the theme allows fallback gap styles.
- * @param {?string} props.fallbackGapValue      An optional fallback gap value if no real gap value is available.
- * @return {string} Generated CSS rules for the layout styles.
- */
-export function getLayoutStyles( {
-	tree,
-	style,
-	selector,
-	hasBlockGapSupport,
-	hasFallbackGapSupport,
-	fallbackGapValue,
-} ) {
-	let ruleset = '';
-	let gapValue = hasBlockGapSupport
-		? getGapCSSValue( style?.spacing?.blockGap )
-		: '';
-
-	// Ensure a fallback gap value for the root layout definitions,
-	// and use a fallback value if one is provided for the current block.
-	if ( hasFallbackGapSupport ) {
-		if ( selector === ROOT_BLOCK_SELECTOR ) {
-			gapValue = ! gapValue ? '0.5em' : gapValue;
-		} else if ( ! hasBlockGapSupport && fallbackGapValue ) {
-			gapValue = fallbackGapValue;
-		}
-	}
-
-	if ( gapValue && tree?.settings?.layout?.definitions ) {
-		Object.values( tree.settings.layout.definitions ).forEach(
-			( { className, name, spacingStyles } ) => {
-				// Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
-				if ( ! hasBlockGapSupport && 'flex' !== name ) {
-					return;
-				}
-
-				if ( spacingStyles?.length ) {
-					spacingStyles.forEach( ( spacingStyle ) => {
-						const declarations = [];
-
-						if ( spacingStyle.rules ) {
-							Object.entries( spacingStyle.rules ).forEach(
-								( [ cssProperty, cssValue ] ) => {
-									declarations.push(
-										`${ cssProperty }: ${
-											cssValue ? cssValue : gapValue
-										}`
-									);
-								}
-							);
-						}
-
-						if ( declarations.length ) {
-							let combinedSelector = '';
-
-							if ( ! hasBlockGapSupport ) {
-								// For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
-								combinedSelector =
-									selector === ROOT_BLOCK_SELECTOR
-										? `:where(.${ className }${
-												spacingStyle?.selector || ''
-										  })`
-										: `:where(${ selector }.${ className }${
-												spacingStyle?.selector || ''
-										  })`;
-							} else {
-								combinedSelector =
-									selector === ROOT_BLOCK_SELECTOR
-										? `${ selector } .${ className }${
-												spacingStyle?.selector || ''
-										  }`
-										: `${ selector }.${ className }${
-												spacingStyle?.selector || ''
-										  }`;
-							}
-							ruleset += `${ combinedSelector } { ${ declarations.join(
-								'; '
-							) }; }`;
-						}
-					} );
-				}
-			}
-		);
-		// For backwards compatibility, ensure the legacy block gap CSS variable is still available.
-		if ( selector === ROOT_BLOCK_SELECTOR && hasBlockGapSupport ) {
-			ruleset += `${ selector } { --wp--style--block-gap: ${ gapValue }; }`;
-		}
-	}
-
-	// Output base styles
-	if (
-		selector === ROOT_BLOCK_SELECTOR &&
-		tree?.settings?.layout?.definitions
-	) {
-		const validDisplayModes = [ 'block', 'flex', 'grid' ];
-		Object.values( tree.settings.layout.definitions ).forEach(
-			( { className, displayMode, baseStyles } ) => {
-				if (
-					displayMode &&
-					validDisplayModes.includes( displayMode )
-				) {
-					ruleset += `${ selector } .${ className } { display:${ displayMode }; }`;
-				}
-
-				if ( baseStyles?.length ) {
-					baseStyles.forEach( ( baseStyle ) => {
-						const declarations = [];
-
-						if ( baseStyle.rules ) {
-							Object.entries( baseStyle.rules ).forEach(
-								( [ cssProperty, cssValue ] ) => {
-									declarations.push(
-										`${ cssProperty }: ${ cssValue }`
-									);
-								}
-							);
-						}
-
-						if ( declarations.length ) {
-							const combinedSelector = `${ selector } .${ className }${
-								baseStyle?.selector || ''
-							}`;
-							ruleset += `${ combinedSelector } { ${ declarations.join(
-								'; '
-							) }; }`;
-						}
-					} );
-				}
-			}
-		);
-	}
-
-	return ruleset;
-}
-
-export const getNodesWithStyles = ( tree, blockSelectors ) => {
-	const nodes = [];
-
-	if ( ! tree?.styles ) {
-		return nodes;
-	}
-
-	const pickStyleKeys = ( treeToPickFrom ) =>
-		pickBy( treeToPickFrom, ( value, key ) =>
-			[
-				'border',
-				'color',
-				'dimensions',
-				'spacing',
-				'typography',
-				'filter',
-				'outline',
-				'shadow',
-			].includes( key )
-		);
-
-	// Top-level.
-	const styles = pickStyleKeys( tree.styles );
-	if ( !! styles ) {
-		nodes.push( {
-			styles,
-			selector: ROOT_BLOCK_SELECTOR,
-		} );
-	}
-
-	Object.entries( ELEMENTS ).forEach( ( [ name, selector ] ) => {
-		if ( !! tree.styles?.elements[ name ] ) {
-			nodes.push( {
-				styles: tree.styles?.elements[ name ],
-				selector,
-			} );
-		}
-	} );
-
-	// Iterate over blocks: they can have styles & elements.
-	Object.entries( tree.styles?.blocks ?? {} ).forEach(
-		( [ blockName, node ] ) => {
-			const blockStyles = pickStyleKeys( node );
-			if (
-				!! blockStyles &&
-				!! blockSelectors?.[ blockName ]?.selector
-			) {
-				nodes.push( {
-					duotoneSelector:
-						blockSelectors[ blockName ].duotoneSelector,
-					fallbackGapValue:
-						blockSelectors[ blockName ].fallbackGapValue,
-					hasLayoutSupport:
-						blockSelectors[ blockName ].hasLayoutSupport,
-					selector: blockSelectors[ blockName ].selector,
-					styles: blockStyles,
-					featureSelectors:
-						blockSelectors[ blockName ].featureSelectors,
-				} );
-			}
-
-			Object.entries( node?.elements ?? {} ).forEach(
-				( [ elementName, value ] ) => {
-					if (
-						!! value &&
-						!! blockSelectors?.[ blockName ] &&
-						!! ELEMENTS?.[ elementName ]
-					) {
-						nodes.push( {
-							styles: value,
-							selector: blockSelectors[ blockName ].selector
-								.split( ',' )
-								.map( ( sel ) => {
-									const elementSelectors =
-										ELEMENTS[ elementName ].split( ',' );
-									return elementSelectors.map(
-										( elementSelector ) =>
-											sel + ' ' + elementSelector
-									);
-								} )
-								.join( ',' ),
-						} );
-					}
-				}
-			);
-		}
-	);
-
-	return nodes;
-};
-
-export const getNodesWithSettings = ( tree, blockSelectors ) => {
-	const nodes = [];
-
-	if ( ! tree?.settings ) {
-		return nodes;
-	}
-
-	const pickPresets = ( treeToPickFrom ) => {
-		const presets = {};
-		PRESET_METADATA.forEach( ( { path } ) => {
-			const value = get( treeToPickFrom, path, false );
-			if ( value !== false ) {
-				set( presets, path, value );
-			}
-		} );
-		return presets;
-	};
-
-	// Top-level.
-	const presets = pickPresets( tree.settings );
-	const custom = tree.settings?.custom;
-	if ( ! isEmpty( presets ) || !! custom ) {
-		nodes.push( {
-			presets,
-			custom,
-			selector: ROOT_BLOCK_SELECTOR,
-		} );
-	}
-
-	// Blocks.
-	Object.entries( tree.settings?.blocks ?? {} ).forEach(
-		( [ blockName, node ] ) => {
-			const blockPresets = pickPresets( node );
-			const blockCustom = node.custom;
-			if ( ! isEmpty( blockPresets ) || !! blockCustom ) {
-				nodes.push( {
-					presets: blockPresets,
-					custom: blockCustom,
-					selector: blockSelectors[ blockName ].selector,
-				} );
-			}
-		}
-	);
-
-	return nodes;
-};
-
-export const toCustomProperties = ( tree, blockSelectors ) => {
-	const settings = getNodesWithSettings( tree, blockSelectors );
-	let ruleset = '';
-	settings.forEach( ( { presets, custom, selector } ) => {
-		const declarations = getPresetsDeclarations( presets, tree?.settings );
-		const customProps = flattenTree( custom, '--wp--custom--', '--' );
-		if ( customProps.length > 0 ) {
-			declarations.push( ...customProps );
-		}
-
-		if ( declarations.length > 0 ) {
-			ruleset = ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
-		}
-	} );
-
-	return ruleset;
-};
-
-export const toStyles = (
-	tree,
-	blockSelectors,
-	hasBlockGapSupport,
-	hasFallbackGapSupport,
-	disableLayoutStyles = false
-) => {
-	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
-	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
-	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
-	const { contentSize, wideSize } = tree?.settings?.layout || {};
-
-	/*
-	 * Reset default browser margin on the root body element.
-	 * This is set on the root selector **before** generating the ruleset
-	 * from the `theme.json`. This is to ensure that if the `theme.json` declares
-	 * `margin` in its `spacing` declaration for the `body` element then these
-	 * user-generated values take precedence in the CSS cascade.
-	 * @link https://github.com/WordPress/gutenberg/issues/36147.
-	 */
-	let ruleset = 'body {margin: 0;';
-
-	if ( contentSize ) {
-		ruleset += ` --wp--style--global--content-size: ${ contentSize };`;
-	}
-
-	if ( wideSize ) {
-		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
-	}
-
-	if ( useRootPaddingAlign ) {
-		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
-			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
-			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
-			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
-			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
-			.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); }
-			.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;`;
-	}
-
-	ruleset += '}';
-
-	nodesWithStyles.forEach(
-		( {
-			selector,
-			duotoneSelector,
-			styles,
-			fallbackGapValue,
-			hasLayoutSupport,
-			featureSelectors,
-		} ) => {
-			// Process styles for block support features with custom feature level
-			// CSS selectors set.
-			if ( featureSelectors ) {
-				Object.entries( featureSelectors ).forEach(
-					( [ featureName, featureSelector ] ) => {
-						if ( styles?.[ featureName ] ) {
-							const featureStyles = {
-								[ featureName ]: styles[ featureName ],
-							};
-							const featureDeclarations =
-								getStylesDeclarations( featureStyles );
-							delete styles[ featureName ];
-
-							if ( !! featureDeclarations.length ) {
-								ruleset =
-									ruleset +
-									`${ featureSelector }{${ featureDeclarations.join(
-										';'
-									) } }`;
-							}
-						}
-					}
-				);
-			}
-
-			const duotoneStyles = {};
-			if ( styles?.filter ) {
-				duotoneStyles.filter = styles.filter;
-				delete styles.filter;
-			}
-
-			// Process duotone styles (they use color.__experimentalDuotone selector).
-			if ( duotoneSelector ) {
-				const duotoneDeclarations =
-					getStylesDeclarations( duotoneStyles );
-				if ( duotoneDeclarations.length > 0 ) {
-					ruleset =
-						ruleset +
-						`${ duotoneSelector }{${ duotoneDeclarations.join(
-							';'
-						) };}`;
-				}
-			}
-
-			// Process blockGap and layout styles.
-			if (
-				! disableLayoutStyles &&
-				( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport )
-			) {
-				ruleset += getLayoutStyles( {
-					tree,
-					style: styles,
-					selector,
-					hasBlockGapSupport,
-					hasFallbackGapSupport,
-					fallbackGapValue,
-				} );
-			}
-
-			// Process the remaining block styles (they use either normal block class or __experimentalSelector).
-			const declarations = getStylesDeclarations(
-				styles,
-				selector,
-				useRootPaddingAlign,
-				tree
-			);
-			if ( declarations?.length ) {
-				ruleset =
-					ruleset + `${ selector }{${ declarations.join( ';' ) };}`;
-			}
-
-			// Check for pseudo selector in `styles` and handle separately.
-			const pseudoSelectorStyles = Object.entries( styles ).filter(
-				( [ key ] ) => key.startsWith( ':' )
-			);
-
-			if ( pseudoSelectorStyles?.length ) {
-				pseudoSelectorStyles.forEach(
-					( [ pseudoKey, pseudoStyle ] ) => {
-						const pseudoDeclarations =
-							getStylesDeclarations( pseudoStyle );
-
-						if ( ! pseudoDeclarations?.length ) {
-							return;
-						}
-
-						// `selector` maybe provided in a form
-						// where block level selectors have sub element
-						// selectors appended to them as a comma separated
-						// string.
-						// e.g. `h1 a,h2 a,h3 a,h4 a,h5 a,h6 a`;
-						// Split and append pseudo selector to create
-						// the proper rules to target the elements.
-						const _selector = selector
-							.split( ',' )
-							.map( ( sel ) => sel + pseudoKey )
-							.join( ',' );
-
-						const pseudoRule = `${ _selector }{${ pseudoDeclarations.join(
-							';'
-						) };}`;
-
-						ruleset = ruleset + pseudoRule;
-					}
-				);
-			}
-		}
-	);
-
-	/* Add alignment / layout styles */
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-	ruleset =
-		ruleset +
-		'.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-	if ( hasBlockGapSupport ) {
-		// Use fallback of `0.5em` just in case, however if there is blockGap support, there should nearly always be a real value.
-		const gapValue =
-			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
-		ruleset =
-			ruleset +
-			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-		ruleset =
-			ruleset +
-			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
-	}
-
-	nodesWithSettings.forEach( ( { selector, presets } ) => {
-		if ( ROOT_BLOCK_SELECTOR === selector ) {
-			// Do not add extra specificity for top-level classes.
-			selector = '';
-		}
-
-		const classes = getPresetsClasses( selector, presets );
-		if ( ! isEmpty( classes ) ) {
-			ruleset = ruleset + classes;
-		}
-	} );
-
-	return ruleset;
-};
-
-export function toSvgFilters( tree, blockSelectors ) {
-	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
-	return nodesWithSettings.flatMap( ( { presets } ) => {
-		return getPresetsSvgFilters( presets );
-	} );
-}
-
-export const getBlockSelectors = ( blockTypes ) => {
-	const result = {};
-	blockTypes.forEach( ( blockType ) => {
-		const name = blockType.name;
-		const selector =
-			blockType?.supports?.__experimentalSelector ??
-			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
-		const duotoneSelector =
-			blockType?.supports?.color?.__experimentalDuotone ?? null;
-		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
-		const fallbackGapValue =
-			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;
-
-		// For each block support feature add any custom selectors.
-		const featureSelectors = {};
-		Object.entries( BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS ).forEach(
-			( [ featureKey, featureName ] ) => {
-				const featureSelector =
-					blockType?.supports?.[ featureKey ]?.__experimentalSelector;
-
-				if ( featureSelector ) {
-					featureSelectors[ featureName ] = scopeSelector(
-						selector,
-						featureSelector
-					);
-				}
-			}
-		);
-
-		result[ name ] = {
-			duotoneSelector,
-			fallbackGapValue,
-			featureSelectors: Object.keys( featureSelectors ).length
-				? featureSelectors
-				: undefined,
-			hasLayoutSupport,
-			name,
-			selector,
-		};
-	} );
-
-	return result;
-};
-
-/**
- * If there is a separator block whose color is defined in theme.json via background,
- * update the separator color to the same value by using border color.
- *
- * @param {Object} config Theme.json configuration file object.
- * @return {Object} configTheme.json configuration file object updated.
- */
-function updateConfigWithSeparator( config ) {
-	const needsSeparatorStyleUpdate =
-		config.styles?.blocks[ 'core/separator' ] &&
-		config.styles?.blocks[ 'core/separator' ].color?.background &&
-		! config.styles?.blocks[ 'core/separator' ].color?.text &&
-		! config.styles?.blocks[ 'core/separator' ].border?.color;
-	if ( needsSeparatorStyleUpdate ) {
-		return {
-			...config,
-			styles: {
-				...config.styles,
-				blocks: {
-					...config.styles.blocks,
-					'core/separator': {
-						...config.styles.blocks[ 'core/separator' ],
-						color: {
-							...config.styles.blocks[ 'core/separator' ].color,
-							text: config.styles?.blocks[ 'core/separator' ]
-								.color.background,
-						},
-					},
-				},
-			},
-		};
-	}
-	return config;
-}
-
-export function useGlobalStylesOutput() {
-	let { merged: mergedConfig } = useContext( GlobalStylesContext );
-
-	const [ blockGap ] = useSetting( 'spacing.blockGap' );
-	const hasBlockGapSupport = blockGap !== null;
-	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
-	const disableLayoutStyles = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return !! getSettings().disableLayoutStyles;
-	} );
-
-	return useMemo( () => {
-		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
-			return [];
-		}
-		mergedConfig = updateConfigWithSeparator( mergedConfig );
-		const blockSelectors = getBlockSelectors( getBlockTypes() );
-		const customProperties = toCustomProperties(
-			mergedConfig,
-			blockSelectors
-		);
-		const globalStyles = toStyles(
-			mergedConfig,
-			blockSelectors,
-			hasBlockGapSupport,
-			hasFallbackGapSupport,
-			disableLayoutStyles
-		);
-		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		const stylesheets = [
-			{
-				css: customProperties,
-				isGlobalStyles: true,
-			},
-			{
-				css: globalStyles,
-				isGlobalStyles: true,
-			},
-		];
-
-		return [ stylesheets, mergedConfig.settings, filters ];
-	}, [
-		hasBlockGapSupport,
-		hasFallbackGapSupport,
-		mergedConfig,
-		disableLayoutStyles,
-	] );
-}
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 4c9d7bae19f7a1..66a25854a06fe1 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -1,323 +1,88 @@
 /**
- * External dependencies
+ *
+ * @param {string} variation The variation name.
+ *
+ * @return {string} The variation class name.
  */
-import { get, find } from 'lodash';
+export function getVariationClassName( variation ) {
+	if ( ! variation ) {
+		return '';
+	}
+	return `is-style-${ variation }`;
+}
 
 /**
- * Internal dependencies
+ * Iterates through the presets array and searches for slugs that start with the specified
+ * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
+ * and returns one greater than the highest found suffix, ensuring that the new index is unique.
+ *
+ * @param {Array}  presets    The array of preset objects, each potentially containing a slug property.
+ * @param {string} slugPrefix The prefix to look for in the preset slugs.
+ *
+ * @return {number} The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
  */
-import { getTypographyFontSizeValue } from './typography-utils';
-
-/* Supporting data. */
-export const ROOT_BLOCK_NAME = 'root';
-export const ROOT_BLOCK_SELECTOR = 'body';
-export const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'textTransform',
-	'padding',
-];
-
-export const PRESET_METADATA = [
-	{
-		path: [ 'color', 'palette' ],
-		valueKey: 'color',
-		cssVarInfix: 'color',
-		classes: [
-			{ classSuffix: 'color', propertyName: 'color' },
-			{
-				classSuffix: 'background-color',
-				propertyName: 'background-color',
-			},
-			{
-				classSuffix: 'border-color',
-				propertyName: 'border-color',
-			},
-		],
-	},
-	{
-		path: [ 'color', 'gradients' ],
-		valueKey: 'gradient',
-		cssVarInfix: 'gradient',
-		classes: [
-			{
-				classSuffix: 'gradient-background',
-				propertyName: 'background',
-			},
-		],
-	},
-	{
-		path: [ 'color', 'duotone' ],
-		cssVarInfix: 'duotone',
-		valueFunc: ( { slug } ) => `url( '#wp-duotone-${ slug }' )`,
-		classes: [],
-	},
-	{
-		path: [ 'typography', 'fontSizes' ],
-		valueFunc: ( preset, { typography: typographySettings } ) =>
-			getTypographyFontSizeValue( preset, typographySettings ),
-		valueKey: 'size',
-		cssVarInfix: 'font-size',
-		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
-	},
-	{
-		path: [ 'typography', 'fontFamilies' ],
-		valueKey: 'fontFamily',
-		cssVarInfix: 'font-family',
-		classes: [
-			{ classSuffix: 'font-family', propertyName: 'font-family' },
-		],
-	},
-	{
-		path: [ 'spacing', 'spacingSizes' ],
-		valueKey: 'size',
-		cssVarInfix: 'spacing',
-		valueFunc: ( { size } ) => size,
-		classes: [],
-	},
-];
-
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
-	'color.background': 'color',
-	'color.text': 'color',
-	'elements.link.color.text': 'color',
-	'elements.button.color.text': 'color',
-	'elements.button.backgroundColor': 'background-color',
-	'elements.heading.color': 'color',
-	'elements.heading.backgroundColor': 'background-color',
-	'elements.heading.gradient': 'gradient',
-	'color.gradient': 'gradient',
-	'typography.fontSize': 'font-size',
-	'typography.fontFamily': 'font-family',
-};
-
-function findInPresetsBy(
-	features,
-	blockName,
-	presetPath,
-	presetProperty,
-	presetValueValue
-) {
-	// Block presets take priority above root level presets.
-	const orderedPresetsByOrigin = [
-		get( features, [ 'blocks', blockName, ...presetPath ] ),
-		get( features, presetPath ),
-	];
-
-	for ( const presetByOrigin of orderedPresetsByOrigin ) {
-		if ( presetByOrigin ) {
-			// Preset origins ordered by priority.
-			const origins = [ 'custom', 'theme', 'default' ];
-			for ( const origin of origins ) {
-				const presets = presetByOrigin[ origin ];
-				if ( presets ) {
-					const presetObject = find(
-						presets,
-						( preset ) =>
-							preset[ presetProperty ] === presetValueValue
-					);
-					if ( presetObject ) {
-						if ( presetProperty === 'slug' ) {
-							return presetObject;
-						}
-						// If there is a highest priority preset with the same slug but different value the preset we found was overwritten and should be ignored.
-						const highestPresetObjectWithSameSlug = findInPresetsBy(
-							features,
-							blockName,
-							presetPath,
-							'slug',
-							presetObject.slug
-						);
-						if (
-							highestPresetObjectWithSameSlug[
-								presetProperty
-							] === presetObject[ presetProperty ]
-						) {
-							return presetObject;
-						}
-						return undefined;
-					}
+export function getNewIndexFromPresets( presets, slugPrefix ) {
+	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
+	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
+		if ( typeof preset?.slug === 'string' ) {
+			const matches = preset?.slug.match( nameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id > currentHighest ) {
+					return id;
 				}
 			}
 		}
-	}
+		return currentHighest;
+	}, 0 );
+	return highestPresetValue + 1;
 }
 
-export function getPresetVariableFromValue(
-	features,
-	blockName,
-	variableStylePath,
-	presetPropertyValue
-) {
-	if ( ! presetPropertyValue ) {
-		return presetPropertyValue;
+function getFontFamilyFromSetting( fontFamilies, setting ) {
+	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
+		return null;
 	}
 
-	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
+	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
+	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
 
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', cssVarInfix ] );
-
-	if ( ! metadata ) {
-		// The property doesn't have preset data
-		// so the value should be returned as it is.
-		return presetPropertyValue;
-	}
-	const { valueKey, path } = metadata;
-
-	const presetObject = findInPresetsBy(
-		features,
-		blockName,
-		path,
-		valueKey,
-		presetPropertyValue
+	return fontFamilies.find(
+		( fontFamily ) => fontFamily.slug === fontFamilySlug
 	);
-
-	if ( ! presetObject ) {
-		// Value wasn't found in the presets,
-		// so it must be a custom value.
-		return presetPropertyValue;
-	}
-
-	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;
 }
 
-function getValueFromPresetVariable(
-	features,
-	blockName,
-	variable,
-	[ presetType, slug ]
-) {
-	const metadata = find( PRESET_METADATA, [ 'cssVarInfix', presetType ] );
-	if ( ! metadata ) {
-		return variable;
+export function getFontFamilies( themeJson ) {
+	const themeFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.theme;
+	const customFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.custom;
+
+	let fontFamilies = [];
+	if ( themeFontFamilies && customFontFamilies ) {
+		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
+	} else if ( themeFontFamilies ) {
+		fontFamilies = themeFontFamilies;
+	} else if ( customFontFamilies ) {
+		fontFamilies = customFontFamilies;
 	}
-
-	const presetObject = findInPresetsBy(
-		features.settings,
-		blockName,
-		metadata.path,
-		'slug',
-		slug
+	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+	const bodyFontFamily = getFontFamilyFromSetting(
+		fontFamilies,
+		bodyFontFamilySetting
 	);
 
-	if ( presetObject ) {
-		const { valueKey } = metadata;
-		const result = presetObject[ valueKey ];
-		return getValueFromVariable( features, blockName, result );
-	}
+	const headingFontFamilySetting =
+		themeJson?.styles?.elements?.heading?.typography?.fontFamily;
 
-	return variable;
-}
-
-function getValueFromCustomVariable( features, blockName, variable, path ) {
-	const result =
-		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
-		get( features.settings, [ 'custom', ...path ] );
-	if ( ! result ) {
-		return variable;
-	}
-	// A variable may reference another variable so we need recursion until we find the value.
-	return getValueFromVariable( features, blockName, result );
-}
-
-/**
- * Attempts to fetch the value of a theme.json CSS variable.
- *
- * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
- * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
- * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
- * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
- */
-export function getValueFromVariable( features, blockName, variable ) {
-	if ( ! variable || typeof variable !== 'string' ) {
-		if ( variable?.ref && typeof variable?.ref === 'string' ) {
-			const refPath = variable.ref.split( '.' );
-			variable = get( features, refPath );
-			// Presence of another ref indicates a reference to another dynamic value.
-			// Pointing to another dynamic value is not supported.
-			if ( ! variable || !! variable?.ref ) {
-				return variable;
-			}
-		} else {
-			return variable;
-		}
-	}
-	const USER_VALUE_PREFIX = 'var:';
-	const THEME_VALUE_PREFIX = 'var(--wp--';
-	const THEME_VALUE_SUFFIX = ')';
-
-	let parsedVar;
-
-	if ( variable.startsWith( USER_VALUE_PREFIX ) ) {
-		parsedVar = variable.slice( USER_VALUE_PREFIX.length ).split( '|' );
-	} else if (
-		variable.startsWith( THEME_VALUE_PREFIX ) &&
-		variable.endsWith( THEME_VALUE_SUFFIX )
-	) {
-		parsedVar = variable
-			.slice( THEME_VALUE_PREFIX.length, -THEME_VALUE_SUFFIX.length )
-			.split( '--' );
+	let headingFontFamily;
+	if ( ! headingFontFamilySetting ) {
+		headingFontFamily = bodyFontFamily;
 	} else {
-		// We don't know how to parse the value: either is raw of uses complex CSS such as `calc(1px * var(--wp--variable) )`
-		return variable;
-	}
-
-	const [ type, ...path ] = parsedVar;
-	if ( type === 'preset' ) {
-		return getValueFromPresetVariable(
-			features,
-			blockName,
-			variable,
-			path
-		);
-	}
-	if ( type === 'custom' ) {
-		return getValueFromCustomVariable(
-			features,
-			blockName,
-			variable,
-			path
+		headingFontFamily = getFontFamilyFromSetting(
+			fontFamilies,
+			themeJson?.styles?.elements?.heading?.typography?.fontFamily
 		);
 	}
-	return variable;
-}
-
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-export function scopeSelector( scope, selector ) {
-	const scopes = scope.split( ',' );
-	const selectors = selector.split( ',' );
-
-	const selectorsScoped = [];
-	scopes.forEach( ( outer ) => {
-		selectors.forEach( ( inner ) => {
-			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
-		} );
-	} );
 
-	return selectorsScoped.join( ', ' );
+	return [ bodyFontFamily, headingFontFamily ];
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
new file mode 100644
index 00000000000000..5f57c72f180b12
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -0,0 +1,39 @@
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	cursor: pointer;
+
+	.edit-site-global-styles-variations_item-preview {
+		border-radius: $radius-small;
+		outline: $border-width solid rgba($black, 0.1);
+		outline-offset: -$border-width;
+		overflow: hidden;
+		position: relative;
+		// Add the same transition that block style variations and other buttons have.
+		transition: outline 0.1s linear;
+		@include reduce-motion("transition");
+
+		&.is-pill {
+			height: $button-size-compact;
+
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
+		}
+	}
+
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($black, 0.3);
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview,
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: $gray-900;
+		outline-offset: $border-width;
+		outline-width: var(--wp-admin-border-width-focus);
+	}
+
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
+	}
+}
diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
new file mode 100644
index 00000000000000..aa936314652885
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { _x, sprintf } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { unlock } from '../../../lock-unlock';
+
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+
+export default function Variation( {
+	variation,
+	children,
+	isPill,
+	properties,
+	showTooltip,
+} ) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
+
+	const context = useMemo( () => {
+		let merged = mergeBaseAndUserConfigs( base, variation );
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
+		}
+		return {
+			user: variation,
+			base,
+			merged,
+			setUserConfig: () => {},
+		};
+	}, [ variation, base, properties ] );
+
+	const selectVariation = () => setUserConfig( variation );
+
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
+	const isActive = useMemo(
+		() => areGlobalStyleConfigsEqual( user, variation ),
+		[ user, variation ]
+	);
+
+	let label = variation?.title;
+	if ( variation?.description ) {
+		label = sprintf(
+			/* translators: 1: variation title. 2: variation description. */
+			_x( '%1$s (%2$s)', 'variation label' ),
+			variation?.title,
+			variation?.description
+		);
+	}
+
+	const content = (
+		<div
+			className={ clsx( 'edit-site-global-styles-variations_item', {
+				'is-active': isActive,
+			} ) }
+			role="button"
+			onClick={ selectVariation }
+			onKeyDown={ selectOnEnter }
+			tabIndex="0"
+			aria-label={ label }
+			aria-current={ isActive }
+			onFocus={ () => setIsFocused( true ) }
+			onBlur={ () => setIsFocused( false ) }
+		>
+			<div
+				className={ clsx(
+					'edit-site-global-styles-variations_item-preview',
+					{ 'is-pill': isPill }
+				) }
+			>
+				{ children( isFocused ) }
+			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
+		</GlobalStylesContext.Provider>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
new file mode 100644
index 00000000000000..5d6852c990f3f2
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreviewColors from '../preview-colors';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import Subtitle from '../subtitle';
+import Variation from './variation';
+
+export default function ColorVariations( { title, gap = 2 } ) {
+	const propertiesToFilter = [ 'color' ];
+	const colorVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
+
+	// Return null if there is only one variation (the default).
+	if ( colorVariations?.length <= 1 ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid spacing={ gap }>
+				{ colorVariations.map( ( variation, index ) => (
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						properties={ propertiesToFilter }
+						showTooltip
+					>
+						{ () => <StylesPreviewColors /> }
+					</Variation>
+				) ) }
+			</Grid>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-panel.js b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
new file mode 100644
index 00000000000000..22f2f50c58e24f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations/variations-panel.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from '../navigation-button';
+import { unlock } from '../../../lock-unlock';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+// Only core block styles (source === block) or block styles with a matching
+// theme.json style variation will be configurable via Global Styles.
+function getFilteredBlockStyles( blockStyles, variations ) {
+	return blockStyles?.filter(
+		( style ) =>
+			style.source === 'block' || variations.includes( style.name )
+	);
+}
+
+export function useBlockVariations( name ) {
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const [ variations ] = useGlobalStyle( 'variations', name );
+	const variationNames = Object.keys( variations ?? {} );
+
+	return getFilteredBlockStyles( blockStyles, variationNames );
+}
+
+export function VariationsPanel( { name } ) {
+	const coreBlockStyles = useBlockVariations( name );
+
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ coreBlockStyles.map( ( style, index ) => {
+				if ( style?.isDefault ) {
+					return null;
+				}
+				return (
+					<NavigationButtonAsItem
+						key={ index }
+						path={
+							'/blocks/' +
+							encodeURIComponent( name ) +
+							'/variations/' +
+							encodeURIComponent( style.name )
+						}
+					>
+						{ style.label }
+					</NavigationButtonAsItem>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
new file mode 100644
index 00000000000000..65e84a9d965ffe
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreviewTypography from '../preview-typography';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import Subtitle from '../subtitle';
+import Variation from './variation';
+
+export default function TypographyVariations( { title, gap = 2 } ) {
+	const propertiesToFilter = [ 'typography' ];
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
+
+	// Return null if there is only one variation (the default).
+	if ( typographyVariations?.length <= 1 ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid
+				columns={ 3 }
+				gap={ gap }
+				className="edit-site-global-styles-style-variations-container"
+			>
+				{ typographyVariations.map( ( variation, index ) => {
+					return (
+						<Variation
+							key={ index }
+							variation={ variation }
+							properties={ propertiesToFilter }
+							showTooltip
+						>
+							{ () => (
+								<StylesPreviewTypography
+									variation={ variation }
+								/>
+							) }
+						</Variation>
+					);
+				} ) }
+			</Grid>
+		</VStack>
+	);
+}
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
deleted file mode 100644
index b829e19f01342a..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import {
-	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
-} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
-import {
-	Dropdown,
-	Button,
-	VisuallyHidden,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { chevronDown } from '@wordpress/icons';
-import { useState, useMemo } from '@wordpress/element';
-import {
-	store as blockEditorStore,
-	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';
-
-function getBlockDisplayText( block ) {
-	if ( block ) {
-		const blockType = getBlockType( block.name );
-		return blockType ? getBlockLabel( blockType, block.attributes ) : null;
-	}
-	return null;
-}
-
-function useSecondaryText() {
-	const { getBlock } = useSelect( blockEditorStore );
-	const activeEntityBlockId = useSelect(
-		( select ) =>
-			select(
-				blockEditorStore
-			).__experimentalGetActiveBlockIdByBlockNames( [
-				'core/template-part',
-			] ),
-		[]
-	);
-
-	const blockInformation = useBlockDisplayInformation( activeEntityBlockId );
-
-	if ( activeEntityBlockId ) {
-		return {
-			label: getBlockDisplayText( getBlock( activeEntityBlockId ) ),
-			isActive: true,
-			icon: blockInformation?.icon,
-		};
-	}
-
-	return {};
-}
-
-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 { label, icon } = useSecondaryText();
-
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-
-	// Memoize popoverProps to avoid returning a new object every time.
-	const popoverProps = useMemo(
-		() => ( {
-			// Use the title wrapper as the popover anchor so that the dropdown is
-			// centered over the whole title area rather than just one part of it.
-			anchor: popoverAnchor,
-		} ),
-		[ popoverAnchor ]
-	);
-
-	// Return a simple loading indicator until we have information to show.
-	if ( ! isLoaded ) {
-		return (
-			<div className="edit-site-document-actions">
-				{ __( 'Loading…' ) }
-			</div>
-		);
-	}
-
-	// Return feedback that the template does not seem to exist.
-	if ( ! entityTitle ) {
-		return (
-			<div className="edit-site-document-actions">
-				{ __( 'Template not found' ) }
-			</div>
-		);
-	}
-
-	return (
-		<div
-			className={ classnames( 'edit-site-document-actions', {
-				'has-secondary-label': !! label,
-			} ) }
-		>
-			<div
-				ref={ setPopoverAnchor }
-				className="edit-site-document-actions__title-wrapper"
-			>
-				<Text
-					size="body"
-					className="edit-site-document-actions__title"
-					as="h1"
-				>
-					<VisuallyHidden as="span">
-						{ sprintf(
-							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s: ' ),
-							entityLabel
-						) }
-					</VisuallyHidden>
-					{ decodeEntities( entityTitle ) }
-				</Text>
-				<div className="edit-site-document-actions__secondary-item">
-					<BlockIcon icon={ icon } showColors />
-					<Text size="body">{ label ?? '' }</Text>
-				</div>
-
-				<Dropdown
-					popoverProps={ popoverProps }
-					position="bottom center"
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Button
-							className="edit-site-document-actions__get-info"
-							icon={ chevronDown }
-							aria-expanded={ isOpen }
-							aria-haspopup="true"
-							onClick={ onToggle }
-							variant={ showIconLabels ? 'tertiary' : undefined }
-							label={ sprintf(
-								/* translators: %s: the entity to see details about, like "template"*/
-								__( 'Show %s details' ),
-								entityLabel
-							) }
-						>
-							{ showIconLabels && __( 'Details' ) }
-						</Button>
-					) }
-					contentClassName="edit-site-document-actions__info-dropdown"
-					renderContent={ ( { onClose } ) => (
-						<TemplateDetails
-							template={ template }
-							onClose={ onClose }
-						/>
-					) }
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
deleted file mode 100644
index 9129a025d52616..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.edit-site-document-actions {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: 0 $grid-unit;
-	height: 100%;
-	// Flex items will, by default, refuse to shrink below a minimum
-	// intrinsic width. In order to shrink this flexbox item, and
-	// subsequently truncate child text, we set an explicit min-width.
-	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-	min-width: 0;
-
-	.edit-site-document-actions__title-wrapper {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-
-		// See comment above about min-width
-		min-width: 0;
-
-		.components-dropdown {
-			display: inline-flex;
-			margin-left: $grid-unit-05;
-
-			.components-button {
-				min-width: 0;
-				padding: 0;
-			}
-		}
-	}
-
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
-
-		// See comment above about min-width
-		min-width: 0;
-	}
-
-	.edit-site-document-actions__title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.edit-site-document-actions__secondary-item {
-		display: flex;
-		align-items: center;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		max-width: 0;
-		opacity: 0;
-		padding: 0;
-		transition: all ease 0.2s;
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		border-radius: 2px;
-		@include reduce-motion(transition);
-
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
-		}
-	}
-
-	&.has-secondary-label {
-		.edit-site-document-actions__secondary-item {
-			opacity: 1;
-			padding: 0 4px;
-			max-width: 180px;
-			margin-left: 6px;
-		}
-	}
-}
-
-.edit-site-document-actions__info-dropdown > .components-popover__content {
-	padding: 0;
-	min-width: 240px;
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
deleted file mode 100644
index a88486a8c5981a..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	ToolSelector,
-	__experimentalPreviewOptions as PreviewOptions,
-	NavigableToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { PinnedItems } from '@wordpress/interface';
-import { _x, __ } from '@wordpress/i18n';
-import { listView, plus, external, chevronUpDown } from '@wordpress/icons';
-import {
-	Button,
-	ToolbarItem,
-	MenuGroup,
-	MenuItem,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import MoreMenu from './more-menu';
-import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-import RedoButton from './undo-redo/redo';
-import DocumentActions from './document-actions';
-import { store as editSiteStore } from '../../store';
-
-const preventDefault = ( event ) => {
-	event.preventDefault();
-};
-
-export default function Header( { showIconLabels } ) {
-	const inserterButton = useRef();
-	const {
-		deviceType,
-		templateType,
-		isInserterOpen,
-		isListViewOpen,
-		listViewShortcut,
-		isVisualMode,
-		blockEditorMode,
-		homeUrl,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			getEditedPostType,
-			isInserterOpened,
-			isListViewOpened,
-			getEditorMode,
-		} = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-
-		const postType = getEditedPostType();
-
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			templateType: postType,
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-site/toggle-list-view'
-			),
-			isVisualMode: getEditorMode() === 'visual',
-			blockEditorMode: __unstableGetEditorMode(),
-			homeUrl: getUnstableBase()?.home,
-		};
-	}, [] );
-
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editSiteStore );
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	const openInserter = useCallback( () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
-			inserterButton.current.focus();
-		} else {
-			setIsInserterOpened( true );
-		}
-	}, [ isInserterOpen, setIsInserterOpened ] );
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
-	);
-
-	const isFocusMode = templateType === 'wp_template_part';
-
-	/* translators: button label text should, if possible, be under 16 characters. */
-	const longLabel = _x(
-		'Toggle block inserter',
-		'Generic label for block inserter button'
-	);
-	const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' );
-
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView && isVisualMode;
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	return (
-		<div className="edit-site-header-edit-mode">
-			<NavigableToolbar
-				className="edit-site-header-edit-mode__start"
-				aria-label={ __( 'Document tools' ) }
-			>
-				<div className="edit-site-header-edit-mode__toolbar">
-					<ToolbarItem
-						ref={ inserterButton }
-						as={ Button }
-						className="edit-site-header-edit-mode__inserter-toggle"
-						variant="primary"
-						isPressed={ isInserterOpen }
-						onMouseDown={ preventDefault }
-						onClick={ openInserter }
-						disabled={ ! isVisualMode }
-						icon={ plus }
-						label={ showIconLabels ? shortLabel : longLabel }
-						showTooltip={ ! showIconLabels }
-					/>
-					{ isLargeViewport && (
-						<>
-							<ToolbarItem
-								as={ ToolSelector }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-								disabled={ ! isVisualMode }
-							/>
-							<ToolbarItem
-								as={ UndoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ RedoButton }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							<ToolbarItem
-								as={ Button }
-								className="edit-site-header-edit-mode__list-view-toggle"
-								disabled={ ! isVisualMode && isZoomedOutView }
-								icon={ listView }
-								isPressed={ isListViewOpen }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								label={ __( 'List View' ) }
-								onClick={ toggleListView }
-								shortcut={ listViewShortcut }
-								showTooltip={ ! showIconLabels }
-								variant={
-									showIconLabels ? 'tertiary' : undefined
-								}
-							/>
-							{ isZoomedOutViewExperimentEnabled && (
-								<ToolbarItem
-									as={ Button }
-									icon={ chevronUpDown }
-									isPressed={ isZoomedOutView }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'Zoom-out View' ) }
-									onClick={ () => {
-										setPreviewDeviceType( 'desktop' );
-										__unstableSetEditorMode(
-											isZoomedOutView
-												? 'edit'
-												: 'zoom-out'
-										);
-									} }
-								/>
-							) }
-						</>
-					) }
-				</div>
-			</NavigableToolbar>
-
-			<div className="edit-site-header-edit-mode__center">
-				<DocumentActions />
-			</div>
-
-			<div className="edit-site-header-edit-mode__end">
-				<div className="edit-site-header-edit-mode__actions">
-					{ ! isFocusMode && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewOptions
-								deviceType={ deviceType }
-								setDeviceType={ setPreviewDeviceType }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								viewLabel={ __( 'View' ) }
-							>
-								<MenuGroup>
-									<MenuItem
-										href={ homeUrl }
-										target="_blank"
-										icon={ external }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
-							</PreviewOptions>
-						</div>
-					) }
-					<SaveButton />
-					<PinnedItems.Slot scope="core/edit-site" />
-					<MoreMenu showIconLabels={ showIconLabels } />
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js b/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
deleted file mode 100644
index f4b63edfae6e80..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/mode-switcher/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-/**
- * Set of available mode options.
- *
- * @type {Array}
- */
-const MODES = [
-	{
-		value: 'visual',
-		label: __( 'Visual editor' ),
-	},
-	{
-		value: 'text',
-		label: __( 'Code editor' ),
-	},
-];
-
-function ModeSwitcher() {
-	const { shortcut, mode } = useSelect(
-		( select ) => ( {
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled:
-				select( editSiteStore ).getSettings().richEditingEnabled,
-			isCodeEditingEnabled:
-				select( editSiteStore ).getSettings().codeEditingEnabled,
-			mode: select( editSiteStore ).getEditorMode(),
-		} ),
-		[]
-	);
-	const { switchEditorMode } = useDispatch( editSiteStore );
-
-	const choices = MODES.map( ( choice ) => {
-		if ( choice.value !== mode ) {
-			return { ...choice, shortcut };
-		}
-		return choice;
-	} );
-
-	return (
-		<MenuGroup label={ __( 'Editor' ) }>
-			<MenuItemsChoice
-				choices={ choices }
-				value={ mode }
-				onSelect={ switchEditorMode }
-			/>
-		</MenuGroup>
-	);
-}
-
-export default ModeSwitcher;
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
deleted file mode 100644
index 87bef35a36cd66..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useCopyToClipboard } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
-import { __unstableSerializeAndClean } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-export default function CopyContentMenuItem() {
-	const { createNotice } = useDispatch( noticesStore );
-	const getText = useSelect( ( select ) => {
-		return () => {
-			const { getEditedPostId, getEditedPostType } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const record = getEditedEntityRecord(
-				'postType',
-				getEditedPostType(),
-				getEditedPostId()
-			);
-			if ( record ) {
-				if ( typeof record.content === 'function' ) {
-					return record.content( record );
-				} else if ( record.blocks ) {
-					return __unstableSerializeAndClean( record.blocks );
-				} else if ( record.content ) {
-					return record.content;
-				}
-			}
-			return '';
-		};
-	}, [] );
-
-	function onSuccess() {
-		createNotice( 'info', __( 'All content copied.' ), {
-			isDismissible: true,
-			type: 'snackbar',
-		} );
-	}
-
-	const ref = useCopyToClipboard( getText, onSuccess );
-
-	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
deleted file mode 100644
index 91182c2a2629e2..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import { useReducer } from '@wordpress/element';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { displayShortcut } from '@wordpress/keycodes';
-import { external } from '@wordpress/icons';
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
-import { ActionItem, MoreMenuDropdown } from '@wordpress/interface';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
-import EditSitePreferencesModal from '../../preferences-modal';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import SiteExport from './site-export';
-import WelcomeGuideMenuItem from './welcome-guide-menu-item';
-import CopyContentMenuItem from './copy-content-menu-item';
-import ModeSwitcher from '../mode-switcher';
-
-export default function MoreMenu( { showIconLabels } ) {
-	const [ isModalActive, toggleModal ] = useReducer(
-		( isActive ) => ! isActive,
-		false
-	);
-
-	const [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(
-		( isActive ) => ! isActive,
-		false
-	);
-
-	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
-
-	return (
-		<>
-			<MoreMenuDropdown
-				toggleProps={ {
-					showTooltip: ! showIconLabels,
-					...( showIconLabels && { variant: 'tertiary' } ),
-				} }
-			>
-				{ ( { onClose } ) => (
-					<>
-						<MenuGroup label={ _x( 'View', 'noun' ) }>
-							<PreferenceToggleMenuItem
-								scope="core/edit-site"
-								name="fixedToolbar"
-								label={ __( 'Top toolbar' ) }
-								info={ __(
-									'Access all block and document tools in a single place'
-								) }
-								messageActivated={ __(
-									'Top toolbar activated'
-								) }
-								messageDeactivated={ __(
-									'Top toolbar deactivated'
-								) }
-							/>
-							<PreferenceToggleMenuItem
-								scope="core/edit-site"
-								name="focusMode"
-								label={ __( 'Spotlight mode' ) }
-								info={ __( 'Focus on one block at a time' ) }
-								messageActivated={ __(
-									'Spotlight mode activated'
-								) }
-								messageDeactivated={ __(
-									'Spotlight mode deactivated'
-								) }
-							/>
-							<ModeSwitcher />
-							<ActionItem.Slot
-								name="core/edit-site/plugin-more-menu"
-								label={ __( 'Plugins' ) }
-								as={ MenuGroup }
-								fillProps={ { onClick: onClose } }
-							/>
-						</MenuGroup>
-						<MenuGroup label={ __( 'Tools' ) }>
-							<SiteExport />
-							<MenuItem
-								onClick={ toggleModal }
-								shortcut={ displayShortcut.access( 'h' ) }
-							>
-								{ __( 'Keyboard shortcuts' ) }
-							</MenuItem>
-							<WelcomeGuideMenuItem />
-							<CopyContentMenuItem />
-							<MenuItem
-								icon={ external }
-								role="menuitem"
-								href={ __(
-									'https://wordpress.org/support/article/site-editor/'
-								) }
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								{ __( 'Help' ) }
-								<VisuallyHidden as="span">
-									{
-										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</VisuallyHidden>
-							</MenuItem>
-							<ToolsMoreMenuGroup.Slot
-								fillProps={ { onClose } }
-							/>
-						</MenuGroup>
-						<MenuGroup>
-							<MenuItem onClick={ togglePreferencesModal }>
-								{ __( 'Preferences' ) }
-							</MenuItem>
-						</MenuGroup>
-					</>
-				) }
-			</MoreMenuDropdown>
-			<KeyboardShortcutHelpModal
-				isModalActive={ isModalActive }
-				toggleModal={ toggleModal }
-			/>
-			<EditSitePreferencesModal
-				isModalActive={ isPreferencesModalActive }
-				toggleModal={ togglePreferencesModal }
-			/>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
deleted file mode 100644
index e507b1bf2fbc59..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/plugin-more-menu-item/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ActionItem } from '@wordpress/interface';
-import { compose } from '@wordpress/compose';
-import { MenuItem } from '@wordpress/components';
-import { withPluginContext } from '@wordpress/plugins';
-
-/**
- * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
- * The text within the component appears as the menu item label.
- *
- * @param {Object}                props                                 Component properties.
- * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
- * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
- * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginMoreMenuItem = wp.editSite.PluginMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function onButtonClick() {
- * 	alert( 'Button clicked.' );
- * }
- *
- * function MyButtonMoreMenuItem() {
- * 	return wp.element.createElement(
- * 		PluginMoreMenuItem,
- * 		{
- * 			icon: moreIcon,
- * 			onClick: onButtonClick,
- * 		},
- * 		__( 'My button title' )
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginMoreMenuItem } from '@wordpress/edit-site';
- * import { more } from '@wordpress/icons';
- *
- * function onButtonClick() {
- * 	alert( 'Button clicked.' );
- * }
- *
- * const MyButtonMoreMenuItem = () => (
- * 	<PluginMoreMenuItem
- * 		icon={ more }
- * 		onClick={ onButtonClick }
- * 	>
- * 		{ __( 'My button title' ) }
- * 	</PluginMoreMenuItem>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-export default compose(
-	withPluginContext( ( context, ownProps ) => {
-		return {
-			as: ownProps.as ?? MenuItem,
-			icon: ownProps.icon || context.icon,
-			name: 'core/edit-site/plugin-more-menu',
-		};
-	} )
-)( ActionItem );
diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
deleted file mode 100644
index 3b9bbd9288142a..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
-
-/**
- * Renders a menu item in `Plugins` group in `More Menu` drop down,
- * and can be used to activate the corresponding `PluginSidebar` component.
- * The text within the component appears as the menu item label.
- *
- * @param {Object}                props                                 Component props.
- * @param {string}                props.target                          A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var PluginSidebarMoreMenuItem = wp.editSite.PluginSidebarMoreMenuItem;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function MySidebarMoreMenuItem() {
- * 	return wp.element.createElement(
- * 		PluginSidebarMoreMenuItem,
- * 		{
- * 			target: 'my-sidebar',
- * 			icon: moreIcon,
- * 		},
- * 		__( 'My sidebar title' )
- * 	)
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PluginSidebarMoreMenuItem } from '@wordpress/edit-site';
- * import { more } from '@wordpress/icons';
- *
- * const MySidebarMoreMenuItem = () => (
- * 	<PluginSidebarMoreMenuItem
- * 		target="my-sidebar"
- * 		icon={ more }
- * 	>
- * 		{ __( 'My sidebar title' ) }
- * 	</PluginSidebarMoreMenuItem>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-
-export default function PluginSidebarMoreMenuItem( props ) {
-	return (
-		<ComplementaryAreaMoreMenuItem
-			// Menu item is marked with unstable prop for backward compatibility.
-			// @see https://github.com/WordPress/gutenberg/issues/14457
-			__unstableExplicitMenuItem
-			scope="core/edit-site"
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
deleted file mode 100644
index 7f3f7d1c421b49..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ /dev/null
@@ -1,224 +0,0 @@
-$header-toolbar-min-width: 335px;
-
-.edit-site-header-edit-mode {
-	align-items: center;
-	background-color: $white;
-	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
-
-	.edit-site-header-edit-mode__start {
-		display: flex;
-		border: none;
-	}
-
-	.edit-site-header-edit-mode__end {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.edit-site-header-edit-mode__center {
-		display: flex;
-		align-items: center;
-		height: 100%;
-		flex-grow: 1;
-		justify-content: center;
-		// Flex items will, by default, refuse to shrink below a minimum
-		// intrinsic width. In order to shrink this flexbox item, and
-		// subsequently truncate child text, we set an explicit min-width.
-		// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
-		min-width: 0;
-	}
-}
-
-// Keeps the document title centered when the sidebar is open
-body.is-navigation-sidebar-open {
-	.edit-site-header-edit-mode {
-		padding-left: 0;
-		transition: padding-left 20ms linear;
-		transition-delay: 0ms;
-		@include reduce-motion("transition");
-	}
-}
-
-// Centred document title on small screens with sidebar open
-@media ( max-width: #{ ($break-large - 1) } ) {
-	body.is-navigation-sidebar-open .edit-site-header-edit-mode {
-		.edit-site-header-edit-mode__inserter-toggle ~ .components-button,
-		.edit-site-header-edit-mode__end .components-button:not(.is-primary) {
-			display: none;
-		}
-		.edit-site-save-button__button {
-			margin-right: 0;
-		}
-	}
-}
-
-.edit-site-header-edit-mode__toolbar {
-	display: flex;
-	align-items: center;
-	padding-left: $grid-unit-10;
-
-	@include break-small() {
-		padding-left: $grid-unit-30;
-	}
-
-	@include break-wide() {
-		padding-right: $grid-unit-10;
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle {
-		margin-right: $grid-unit-10;
-		min-width: $grid-unit-40;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-
-		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
-		}
-
-		&.is-pressed {
-			svg {
-				transform: rotate(45deg);
-			}
-		}
-	}
-}
-
-/**
- * Buttons on the right side
- */
-
-.edit-site-header-edit-mode__actions {
-	display: inline-flex;
-	align-items: center;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
-
-	// Pinned items.
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
-	}
-}
-
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
-.edit-site-header-edit-mode__start {
-	display: flex;
-	border: none;
-
-	// The Toolbar component adds different styles to buttons, so we reset them
-	// here to the original button styles
-	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
-	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
-
-		&.is-pressed {
-			background: $gray-900;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
-		}
-
-		&::before {
-			display: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-		margin-right: $grid-unit-10;
-		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		padding: 0;
-	}
-
-	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
-		width: auto;
-		padding: 0 $grid-unit-10;
-	}
-}
-
-// Button text label styles
-
-.show-icon-labels .edit-site-header-edit-mode {
-	.components-button.has-icon {
-		width: auto;
-
-		// Hide the button icons when labels are set to display...
-		svg {
-			display: none;
-		}
-		// ... and display labels.
-		&::after {
-			content: attr(aria-label);
-		}
-		&[aria-disabled="true"] {
-			background-color: transparent;
-		}
-	}
-	.is-tertiary {
-		&:active {
-			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
-			background-color: transparent;
-		}
-	}
-	// Some margins and padding have to be adjusted so the buttons can still fit on smaller screens.
-	.edit-site-save-button__button {
-		padding-left: 6px;
-		padding-right: 6px;
-	}
-
-	// The template details toggle has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		&::after {
-			content: none;
-		}
-	}
-
-	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
-	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
-		height: 36px;
-		padding: 0 $grid-unit-10;
-	}
-
-	.edit-site-header__start .edit-site-header__toolbar > * + * {
-		margin-left: $grid-unit-10;
-	}
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js b/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js
deleted file mode 100644
index d0f05487716b7e..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { createSlotFill } from '@wordpress/components';
-
-const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
-	'EditSiteToolsMoreMenuGroup'
-);
-
-ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
-	<Slot fillProps={ fillProps }>
-		{ ( fills ) => ! isEmpty( fills ) && fills }
-	</Slot>
-);
-
-export default ToolsMoreMenuGroup;
diff --git a/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
deleted file mode 100644
index 17d0ecb892d0a5..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/undo-redo/redo.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function RedoButton( props, ref ) {
-	const shortcut = isAppleOS()
-		? displayShortcut.primaryShift( 'z' )
-		: displayShortcut.primary( 'y' );
-
-	const hasRedo = useSelect(
-		( select ) => select( coreStore ).hasRedo(),
-		[]
-	);
-	const { redo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? redoIcon : undoIcon }
-			label={ __( 'Redo' ) }
-			shortcut={ shortcut }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasRedo }
-			onClick={ hasRedo ? redo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( RedoButton );
diff --git a/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js b/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
deleted file mode 100644
index 271c73a452d9ea..00000000000000
--- a/packages/edit-site/src/components/header-edit-mode/undo-redo/undo.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, isRTL } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
-import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
-
-function UndoButton( props, ref ) {
-	const hasUndo = useSelect(
-		( select ) => select( coreStore ).hasUndo(),
-		[]
-	);
-	const { undo } = useDispatch( coreStore );
-	return (
-		<Button
-			{ ...props }
-			ref={ ref }
-			icon={ ! isRTL() ? undoIcon : redoIcon }
-			label={ __( 'Undo' ) }
-			shortcut={ displayShortcut.primary( 'z' ) }
-			// If there are no undo levels we don't want to actually disable this
-			// button, because it will remove focus for keyboard users.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			aria-disabled={ ! hasUndo }
-			onClick={ hasUndo ? undo : undefined }
-		/>
-	);
-}
-
-export default forwardRef( UndoButton );
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js
deleted file mode 100644
index 7e098a87be2cd9..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const textFormattingShortcuts = [
-	{
-		keyCombination: { modifier: 'primary', character: 'b' },
-		description: __( 'Make the selected text bold.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'i' },
-		description: __( 'Make the selected text italic.' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'k' },
-		description: __( 'Convert the selected text into a link.' ),
-	},
-	{
-		keyCombination: { modifier: 'primaryShift', character: 'k' },
-		description: __( 'Remove a link.' ),
-	},
-	{
-		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
-	},
-	{
-		keyCombination: { modifier: 'primary', character: 'u' },
-		description: __( 'Underline the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'd' },
-		description: __( 'Strikethrough the selected text.' ),
-	},
-	{
-		keyCombination: { modifier: 'access', character: 'x' },
-		description: __( 'Make the selected text inline code.' ),
-	},
-];
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
deleted file mode 100644
index 5ab83d532ffff7..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import Shortcut from './shortcut';
-
-export default function DynamicShortcut( { name } ) {
-	const { keyCombination, description, aliases } = useSelect(
-		( select ) => {
-			const {
-				getShortcutKeyCombination,
-				getShortcutDescription,
-				getShortcutAliases,
-			} = select( keyboardShortcutsStore );
-
-			return {
-				keyCombination: getShortcutKeyCombination( name ),
-				aliases: getShortcutAliases( name ),
-				description: getShortcutDescription( name ),
-			};
-		},
-		[ name ]
-	);
-
-	if ( ! keyCombination ) {
-		return null;
-	}
-
-	return (
-		<Shortcut
-			keyCombination={ keyCombination }
-			description={ description }
-			aliases={ aliases }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js
deleted file mode 100644
index fc03e16008e30c..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/index.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { textFormattingShortcuts } from './config';
-import Shortcut from './shortcut';
-import DynamicShortcut from './dynamic-shortcut';
-
-const ShortcutList = ( { shortcuts } ) => (
-	/*
-	 * Disable reason: The `list` ARIA role is redundant but
-	 * Safari+VoiceOver won't announce the list otherwise.
-	 */
-	/* eslint-disable jsx-a11y/no-redundant-roles */
-	<ul
-		className="edit-site-keyboard-shortcut-help-modal__shortcut-list"
-		role="list"
-	>
-		{ shortcuts.map( ( shortcut, index ) => (
-			<li
-				className="edit-site-keyboard-shortcut-help-modal__shortcut"
-				key={ index }
-			>
-				{ typeof shortcut === 'string' ? (
-					<DynamicShortcut name={ shortcut } />
-				) : (
-					<Shortcut { ...shortcut } />
-				) }
-			</li>
-		) ) }
-	</ul>
-	/* eslint-enable jsx-a11y/no-redundant-roles */
-);
-
-const ShortcutSection = ( { title, shortcuts, className } ) => (
-	<section
-		className={ classnames(
-			'edit-site-keyboard-shortcut-help-modal__section',
-			className
-		) }
-	>
-		{ !! title && (
-			<h2 className="edit-site-keyboard-shortcut-help-modal__section-title">
-				{ title }
-			</h2>
-		) }
-		<ShortcutList shortcuts={ shortcuts } />
-	</section>
-);
-
-const ShortcutCategorySection = ( {
-	title,
-	categoryName,
-	additionalShortcuts = [],
-} ) => {
-	const categoryShortcuts = useSelect(
-		( select ) => {
-			return select( keyboardShortcutsStore ).getCategoryShortcuts(
-				categoryName
-			);
-		},
-		[ categoryName ]
-	);
-
-	return (
-		<ShortcutSection
-			title={ title }
-			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
-		/>
-	);
-};
-
-export default function KeyboardShortcutHelpModal( {
-	isModalActive,
-	toggleModal,
-} ) {
-	if ( ! isModalActive ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className="edit-site-keyboard-shortcut-help-modal"
-			title={ __( 'Keyboard shortcuts' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ toggleModal }
-		>
-			<ShortcutSection
-				className="edit-site-keyboard-shortcut-help-modal__main-shortcuts"
-				shortcuts={ [ 'core/edit-site/keyboard-shortcuts' ] }
-			/>
-			<ShortcutCategorySection
-				title={ __( 'Global shortcuts' ) }
-				categoryName="global"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Selection shortcuts' ) }
-				categoryName="selection"
-			/>
-
-			<ShortcutCategorySection
-				title={ __( 'Block shortcuts' ) }
-				categoryName="block"
-				additionalShortcuts={ [
-					{
-						keyCombination: { character: '/' },
-						description: __(
-							'Change the block type after adding a new paragraph.'
-						),
-						/* translators: The forward-slash character. e.g. '/'. */
-						ariaLabel: __( 'Forward-slash' ),
-					},
-				] }
-			/>
-			<ShortcutSection
-				title={ __( 'Text formatting' ) }
-				shortcuts={ textFormattingShortcuts }
-			/>
-		</Modal>
-	);
-}
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js
deleted file mode 100644
index 5c8d18242a8e7c..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Fragment } from '@wordpress/element';
-import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
-
-function KeyCombination( { keyCombination, forceAriaLabel } ) {
-	const shortcut = keyCombination.modifier
-		? displayShortcutList[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-	const ariaLabel = keyCombination.modifier
-		? shortcutAriaLabel[ keyCombination.modifier ](
-				keyCombination.character
-		  )
-		: keyCombination.character;
-
-	return (
-		<kbd
-			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
-			aria-label={ forceAriaLabel || ariaLabel }
-		>
-			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
-				( character, index ) => {
-					if ( character === '+' ) {
-						return <Fragment key={ index }>{ character }</Fragment>;
-					}
-
-					return (
-						<kbd
-							key={ index }
-							className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
-						>
-							{ character }
-						</kbd>
-					);
-				}
-			) }
-		</kbd>
-	);
-}
-
-export default function Shortcut( {
-	description,
-	keyCombination,
-	aliases = [],
-	ariaLabel,
-} ) {
-	return (
-		<>
-			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-description">
-				{ description }
-			</div>
-			<div className="edit-site-keyboard-shortcut-help-modal__shortcut-term">
-				<KeyCombination
-					keyCombination={ keyCombination }
-					forceAriaLabel={ ariaLabel }
-				/>
-				{ aliases.map( ( alias, index ) => (
-					<KeyCombination
-						keyCombination={ alias }
-						forceAriaLabel={ ariaLabel }
-						key={ index }
-					/>
-				) ) }
-			</div>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss
deleted file mode 100644
index 6d9376f7cc4086..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.edit-site-keyboard-shortcut-help-modal {
-	&__section {
-		margin: 0 0 2rem 0;
-	}
-
-	&__section-title {
-		font-size: 0.9rem;
-		font-weight: 600;
-	}
-
-	&__shortcut {
-		display: flex;
-		align-items: baseline;
-		padding: 0.6rem 0;
-		border-top: 1px solid $gray-300;
-		margin-bottom: 0;
-
-		&:last-child {
-			border-bottom: 1px solid $gray-300;
-		}
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&__shortcut-term {
-		font-weight: 600;
-		margin: 0 0 0 1rem;
-		text-align: right;
-	}
-
-	&__shortcut-description {
-		flex: 1;
-		margin: 0;
-
-		// IE 11 flex item fix - ensure the item does not collapse.
-		flex-basis: auto;
-	}
-
-	&__shortcut-key-combination {
-		display: block;
-		background: none;
-		margin: 0;
-		padding: 0;
-
-		& + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
-			margin-top: 10px;
-		}
-	}
-
-	&__shortcut-key {
-		padding: 0.25rem 0.5rem;
-		border-radius: 8%;
-		margin: 0 0.2rem 0 0.2rem;
-
-		&:last-child {
-			margin: 0 0 0 0.2rem;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js
deleted file mode 100644
index 96255dd928c600..00000000000000
--- a/packages/edit-site/src/components/keyboard-shortcuts/index.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as interfaceStore } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
-import { STORE_NAME } from '../../store/constants';
-
-function KeyboardShortcuts() {
-	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
-		useSelect( coreStore );
-	const { getEditorMode } = useSelect( editSiteStore );
-	const isListViewOpen = useSelect(
-		( select ) => select( editSiteStore ).isListViewOpened(),
-		[]
-	);
-	const isBlockInspectorOpen = useSelect(
-		( select ) =>
-			select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			) === SIDEBAR_BLOCK,
-		[]
-	);
-	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } =
-		useDispatch( editSiteStore );
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	useShortcut( 'core/edit-site/save', ( event ) => {
-		event.preventDefault();
-
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const isDirty = !! dirtyEntityRecords.length;
-		const isSaving = dirtyEntityRecords.some( ( record ) =>
-			isSavingEntityRecord( record.kind, record.name, record.key )
-		);
-
-		if ( ! isSaving && isDirty ) {
-			setIsSaveViewOpened( true );
-		}
-	} );
-
-	useShortcut( 'core/edit-site/undo', ( event ) => {
-		undo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/edit-site/redo', ( event ) => {
-		redo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		setIsListViewOpened( ! isListViewOpen );
-	} );
-
-	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {
-		// This shortcut has no known clashes, but use preventDefault to prevent any
-		// obscure shortcuts from triggering.
-		event.preventDefault();
-
-		if ( isBlockInspectorOpen ) {
-			disableComplementaryArea( STORE_NAME );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		}
-	} );
-
-	useShortcut( 'core/edit-site/toggle-mode', () => {
-		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
-	} );
-
-	return null;
-}
-
-function KeyboardShortcutsRegister() {
-	// Registering the shortcuts.
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-site/save',
-			category: 'global',
-			description: __( 'Save your changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 's',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
-	}, [ registerShortcut ] );
-
-	return null;
-}
-
-KeyboardShortcuts.Register = KeyboardShortcutsRegister;
-export default KeyboardShortcuts;
diff --git a/packages/edit-site/src/components/layout/animation.js b/packages/edit-site/src/components/layout/animation.js
new file mode 100644
index 00000000000000..00f6eb01a6f1a0
--- /dev/null
+++ b/packages/edit-site/src/components/layout/animation.js
@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import { Controller, easings } from '@react-spring/web';
+
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useMemo, useRef } from '@wordpress/element';
+
+function getAbsolutePosition( element ) {
+	return {
+		top: element.offsetTop,
+		left: element.offsetLeft,
+	};
+}
+
+const ANIMATION_DURATION = 400;
+
+/**
+ * Hook used to compute the styles required to move a div into a new position.
+ *
+ * The way this animation works is the following:
+ *  - It first renders the element as if there was no animation.
+ *  - It takes a snapshot of the position of the block to use it
+ *    as a destination point for the animation.
+ *  - It restores the element to the previous position using a CSS transform
+ *  - It uses the "resetAnimation" flag to reset the animation
+ *    from the beginning in order to animate to the new destination point.
+ *
+ * @param {Object} $1                          Options
+ * @param {*}      $1.triggerAnimationOnChange Variable used to trigger the animation if it changes.
+ */
+function useMovingAnimation( { triggerAnimationOnChange } ) {
+	const ref = useRef();
+
+	// Whenever the trigger changes, we need to take a snapshot of the current
+	// position of the block to use it as a destination point for the animation.
+	const { previous, prevRect } = useMemo(
+		() => ( {
+			previous: ref.current && getAbsolutePosition( ref.current ),
+			prevRect: ref.current && ref.current.getBoundingClientRect(),
+		} ),
+		[ triggerAnimationOnChange ]
+	);
+
+	useLayoutEffect( () => {
+		if ( ! previous || ! ref.current ) {
+			return;
+		}
+
+		// We disable the animation if the user has a preference for reduced
+		// motion.
+		const disableAnimation = window.matchMedia(
+			'(prefers-reduced-motion: reduce)'
+		).matches;
+
+		if ( disableAnimation ) {
+			return;
+		}
+
+		const controller = new Controller( {
+			x: 0,
+			y: 0,
+			width: prevRect.width,
+			height: prevRect.height,
+			config: {
+				duration: ANIMATION_DURATION,
+				easing: easings.easeInOutQuint,
+			},
+			onChange( { value } ) {
+				if ( ! ref.current ) {
+					return;
+				}
+				let { x, y, width, height } = value;
+				x = Math.round( x );
+				y = Math.round( y );
+				width = Math.round( width );
+				height = Math.round( height );
+				const finishedMoving = x === 0 && y === 0;
+				ref.current.style.transformOrigin = 'center center';
+				ref.current.style.transform = finishedMoving
+					? null // Set to `null` to explicitly remove the transform.
+					: `translate3d(${ x }px,${ y }px,0)`;
+				ref.current.style.width = finishedMoving
+					? null
+					: `${ width }px`;
+				ref.current.style.height = finishedMoving
+					? null
+					: `${ height }px`;
+			},
+		} );
+
+		ref.current.style.transform = undefined;
+		const destination = ref.current.getBoundingClientRect();
+
+		const x = Math.round( prevRect.left - destination.left );
+		const y = Math.round( prevRect.top - destination.top );
+		const width = destination.width;
+		const height = destination.height;
+
+		controller.start( {
+			x: 0,
+			y: 0,
+			width,
+			height,
+			from: { x, y, width: prevRect.width, height: prevRect.height },
+		} );
+
+		return () => {
+			controller.stop();
+			controller.set( {
+				x: 0,
+				y: 0,
+				width: prevRect.width,
+				height: prevRect.height,
+			} );
+		};
+	}, [ previous, prevRect ] );
+
+	return ref;
+}
+
+export default useMovingAnimation;
diff --git a/packages/edit-site/src/components/layout/hooks.js b/packages/edit-site/src/components/layout/hooks.js
new file mode 100644
index 00000000000000..490fcf39ea622a
--- /dev/null
+++ b/packages/edit-site/src/components/layout/hooks.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+const MAX_LOADING_TIME = 10000; // 10 seconds
+
+export function useIsSiteEditorLoading() {
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = useSelect(
+		( select ) => {
+			const hasResolvingSelectors =
+				select( coreStore ).hasResolvingSelectors();
+			return ! loaded && ! hasResolvingSelectors;
+		},
+		[ loaded ]
+	);
+
+	/*
+	 * If the maximum expected loading time has passed, we're marking the
+	 * editor as loaded, in order to prevent any failed requests from blocking
+	 * the editor canvas from appearing.
+	 */
+	useEffect( () => {
+		let timeout;
+
+		if ( ! loaded ) {
+			timeout = setTimeout( () => {
+				setLoaded( true );
+			}, MAX_LOADING_TIME );
+		}
+
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [ loaded ] );
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 100ms timeout here to catch brief
+			 * moments without any resolving selectors that would result in
+			 * displaying brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 100ms of artificial delay after loading has finished.
+			 */
+			const ARTIFICIAL_DELAY = 100;
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, ARTIFICIAL_DELAY );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded;
+}
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
new file mode 100644
index 00000000000000..00bc323ea1535c
--- /dev/null
+++ b/packages/edit-site/src/components/layout/index.js
@@ -0,0 +1,265 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+	__unstableUseNavigateRegions as useNavigateRegions,
+	SlotFillProvider,
+} from '@wordpress/components';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+	usePrevious,
+} from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	EditorSnackbars,
+	UnsavedChangesWarning,
+	ErrorBoundary,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { PluginArea } from '@wordpress/plugins';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { default as SiteHub, SiteHubMobile } from '../site-hub';
+import ResizableFrame from '../resizable-frame';
+import { unlock } from '../../lock-unlock';
+import SaveKeyboardShortcut from '../save-keyboard-shortcut';
+import { useIsSiteEditorLoading } from './hooks';
+import useMovingAnimation from './animation';
+import SidebarContent from '../sidebar';
+import SaveHub from '../save-hub';
+import SavePanel from '../save-panel';
+
+const { useCommands } = unlock( coreCommandsPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { NavigableRegion, GlobalStylesProvider } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
+
+const ANIMATION_DURATION = 0.3;
+
+function Layout() {
+	const { query, name: routeKey, areas, widths } = useLocation();
+	const { canvas = 'view' } = query;
+	useCommands();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const toggleRef = useRef();
+	const navigateRegionsProps = useNavigateRegions();
+	const disableMotion = useReducedMotion();
+	const [ canvasResizer, canvasSize ] = useResizeObserver();
+	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
+	const animationRef = useMovingAnimation( {
+		triggerAnimationOnChange: routeKey + '-' + canvas,
+	} );
+
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const previousCanvaMode = usePrevious( canvas );
+	useEffect( () => {
+		if ( previousCanvaMode === 'edit' ) {
+			toggleRef.current?.focus();
+		}
+		// Should not depend on the previous canvas mode value but the next.
+	}, [ canvas ] );
+
+	return (
+		<>
+			<UnsavedChangesWarning />
+			<CommandMenu />
+			{ canvas === 'view' && <SaveKeyboardShortcut /> }
+			<div
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
+				className={ clsx(
+					'edit-site-layout',
+					navigateRegionsProps.className,
+					{
+						'is-full-canvas': canvas === 'edit',
+					}
+				) }
+			>
+				<div className="edit-site-layout__content">
+					{ /*
+						The NavigableRegion must always be rendered and not use
+						`inert` otherwise `useNavigateRegions` will fail.
+					*/ }
+					{ ( ! isMobileViewport || ! areas.mobile ) && (
+						<NavigableRegion
+							ariaLabel={ __( 'Navigation' ) }
+							className="edit-site-layout__sidebar-region"
+						>
+							<AnimatePresence>
+								{ canvas === 'view' && (
+									<motion.div
+										initial={ { opacity: 0 } }
+										animate={ { opacity: 1 } }
+										exit={ { opacity: 0 } }
+										transition={ {
+											type: 'tween',
+											duration:
+												// Disable transition in mobile to emulate a full page transition.
+												disableMotion ||
+												isMobileViewport
+													? 0
+													: ANIMATION_DURATION,
+											ease: 'easeOut',
+										} }
+										className="edit-site-layout__sidebar"
+									>
+										<SiteHub
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
+										<SidebarContent
+											shouldAnimate={
+												routeKey !== 'styles-view'
+											}
+											routeKey={ routeKey }
+										>
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
+										</SidebarContent>
+										<SaveHub />
+										<SavePanel />
+									</motion.div>
+								) }
+							</AnimatePresence>
+						</NavigableRegion>
+					) }
+
+					<EditorSnackbars />
+
+					{ isMobileViewport && areas.mobile && (
+						<div className="edit-site-layout__mobile">
+							{ canvas !== 'edit' && (
+								<SidebarContent routeKey={ routeKey }>
+									<SiteHubMobile
+										ref={ toggleRef }
+										isTransparent={
+											isResizableFrameOversized
+										}
+									/>
+								</SidebarContent>
+							) }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
+						</div>
+					) }
+
+					{ ! isMobileViewport &&
+						areas.content &&
+						canvas !== 'edit' && (
+							<div
+								className="edit-site-layout__area"
+								style={ {
+									maxWidth: widths?.content,
+								} }
+							>
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
+							</div>
+						) }
+
+					{ ! isMobileViewport && areas.edit && canvas !== 'edit' && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.edit,
+							} }
+						>
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
+						</div>
+					) }
+
+					{ ! isMobileViewport && areas.preview && (
+						<div className="edit-site-layout__canvas-container">
+							{ canvasResizer }
+							{ !! canvasSize.width && (
+								<div
+									className={ clsx(
+										'edit-site-layout__canvas',
+										{
+											'is-right-aligned':
+												isResizableFrameOversized,
+										}
+									) }
+									ref={ animationRef }
+								>
+									<ErrorBoundary>
+										<ResizableFrame
+											isReady={ ! isEditorLoading }
+											isFullWidth={ canvas === 'edit' }
+											defaultSize={ {
+												width:
+													canvasSize.width -
+													24 /* $canvas-padding */,
+												height: canvasSize.height,
+											} }
+											isOversized={
+												isResizableFrameOversized
+											}
+											setIsOversized={
+												setIsResizableFrameOversized
+											}
+											innerContentStyle={ {
+												background:
+													gradientValue ??
+													backgroundColor,
+											} }
+										>
+											{ areas.preview }
+										</ResizableFrame>
+									</ErrorBoundary>
+								</div>
+							) }
+						</div>
+					) }
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default function LayoutWithGlobalStylesProvider( props ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
+	return (
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				{ /** This needs to be within the SlotFillProvider */ }
+				<PluginArea onError={ onPluginAreaError } />
+				<Layout { ...props } />
+			</GlobalStylesProvider>
+		</SlotFillProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
new file mode 100644
index 00000000000000..2c7e6ce1b10c8b
--- /dev/null
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -0,0 +1,266 @@
+.edit-site-layout {
+	height: 100%;
+	background: $gray-900;
+	color: $gray-400;
+	display: flex;
+	flex-direction: column;
+
+	// Show a dark background in "frame" mode to avoid edge artifacts.
+	&:not(.is-full-canvas) .editor-visual-editor {
+		background: $gray-900;
+	}
+}
+
+.edit-site-layout__content {
+	height: 100%;
+	flex-grow: 1;
+	display: flex;
+}
+
+.edit-site-layout__sidebar-region {
+	z-index: z-index(".edit-site-layout__sidebar");
+	width: 100vw;
+	flex-shrink: 0;
+
+	@include break-medium {
+		width: $nav-sidebar-width;
+	}
+
+	// This is only necessary for the exit animation
+	.edit-site-layout.is-full-canvas & {
+		position: fixed !important;
+		height: 100vh;
+		left: 0;
+		top: 0;
+	}
+
+	.edit-site-layout__sidebar {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.resizable-editor__drag-handle {
+		right: 0;
+	}
+}
+
+.edit-site-layout__main {
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-layout__mobile {
+	position: relative;
+	width: 100%;
+	z-index: z-index(".edit-site-layout__canvas-container");
+
+	/*
+	 * The SiteHubMobile component is displayed
+	 * for pages that do not have a sidebar,
+	 * yet it needs the Sidebar component for the React context.
+	 *
+	 * This removes the padding in this scenario.
+	 * See https://github.com/WordPress/gutenberg/pull/63118
+	 */
+	.edit-site-sidebar__screen-wrapper {
+		padding: 0;
+	}
+}
+
+.edit-site-layout__canvas-container {
+	position: relative;
+	flex-grow: 1;
+	z-index: z-index(".edit-site-layout__canvas-container");
+	// When animating the frame size can exceed its container size.
+	overflow: visible;
+
+	&.is-resizing::after {
+		// This covers the whole content which ensures mouse up triggers
+		// even if the content is "inert".
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		z-index: z-index(".edit-site-layout__canvas-container.is-resizing::after");
+	}
+}
+
+.edit-site-layout__canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&.is-right-aligned {
+		justify-content: flex-end;
+	}
+
+	.edit-site-resizable-frame__inner {
+		color: $gray-900;
+	}
+
+	@include break-medium {
+		top: $canvas-padding;
+		bottom: $canvas-padding;
+		width: calc(100% - #{$canvas-padding});
+
+		.edit-site-resizable-frame__inner-content {
+			box-shadow: $elevation-x-small;
+			transition: border-radius, box-shadow 0.4s;
+			// This ensure the radius work properly.
+			overflow: hidden;
+
+			.edit-site-layout:not(.is-full-canvas) & {
+				border-radius: $radius-large;
+			}
+
+			&:hover {
+				box-shadow: $elevation-large;
+			}
+		}
+	}
+
+	.edit-site-layout.is-full-canvas & {
+		top: 0;
+		bottom: 0;
+		width: 100%;
+	}
+}
+
+// This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__mobile .interface-interface-skeleton,
+.edit-site-layout__canvas .interface-interface-skeleton,
+.edit-site-template-pages-preview .interface-interface-skeleton {
+	position: relative !important;
+	min-height: 100% !important;
+}
+
+.edit-site-template-pages-preview {
+	height: 100%;
+}
+
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+	animation-delay: 255ms;
+}
+
+@media (prefers-reduced-motion) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
+/* stylelint-enable  */
+
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+	display: none;
+}
+
+.edit-site-layout__view-mode-toggle.components-button {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable  */
+	position: relative;
+	color: $white;
+	height: $header-height;
+	width: $header-height;
+	overflow: hidden;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: $gray-900;
+	border-radius: 0;
+
+	&:hover,
+	&:active {
+		color: $white;
+	}
+
+	&:focus-visible,
+	&:focus {
+		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
+		outline: 4px solid #0000;
+		outline-offset: 4px;
+	}
+
+	&::before {
+		transition: box-shadow 0.1s ease;
+		@include reduce-motion("transition");
+		content: "";
+		display: block;
+		position: absolute;
+		top: 9px;
+		right: 9px;
+		bottom: 9px;
+		left: 9px;
+		border-radius: $radius-medium;
+		box-shadow: none;
+	}
+
+	.edit-site-layout__view-mode-toggle-icon {
+		display: flex;
+		height: $header-height;
+		width: $header-height;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+.edit-site-layout__actions {
+	z-index: z-index(".edit-site-layout__actions");
+	position: fixed !important; // Need to override the default relative positioning
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	width: $sidebar-width;
+	color: $gray-900;
+	background: $white;
+
+	&:focus,
+	&:focus-within {
+		top: auto;
+		bottom: 0;
+	}
+
+	&.is-entity-save-view-open {
+		&:focus,
+		&:focus-within {
+			top: 0;
+		}
+	}
+
+	@include break-medium {
+		border-left: $border-width solid $gray-300;
+	}
+}
+
+.edit-site-layout__area {
+	flex-grow: 1;
+	margin: 0;
+	overflow: hidden;
+	box-shadow: $elevation-x-small;
+	@include break-medium() {
+		border-radius: 8px;
+		margin: $canvas-padding $canvas-padding $canvas-padding 0;
+	}
+}
+
+.edit-site .components-editor-notices__snackbar {
+	position: fixed;
+	right: 0;
+	bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js
deleted file mode 100644
index 74cdb5bc65882b..00000000000000
--- a/packages/edit-site/src/components/list/actions/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import isTemplateRemovable from '../../../utils/is-template-removable';
-import isTemplateRevertable from '../../../utils/is-template-revertable';
-import RenameMenuItem from './rename-menu-item';
-
-export default function Actions( { template } ) {
-	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	const isRemovable = isTemplateRemovable( template );
-	const isRevertable = isTemplateRevertable( template );
-
-	if ( ! isRemovable && ! isRevertable ) {
-		return null;
-	}
-
-	async function revertAndSaveTemplate() {
-		try {
-			await revertTemplate( template, { allowUndo: false } );
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id
-			);
-
-			createSuccessNotice( __( 'Entity reverted.' ), {
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while reverting the entity.' );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className="edit-site-list-table__actions"
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					{ isRemovable && (
-						<>
-							<RenameMenuItem
-								template={ template }
-								onClose={ onClose }
-							/>
-							<MenuItem
-								isDestructive
-								isTertiary
-								onClick={ () => {
-									removeTemplate( template );
-									onClose();
-								} }
-							>
-								{ __( 'Delete' ) }
-							</MenuItem>
-						</>
-					) }
-					{ isRevertable && (
-						<MenuItem
-							info={ __(
-								'Use the template as supplied by the theme.'
-							) }
-							onClick={ () => {
-								revertAndSaveTemplate();
-								onClose();
-							} }
-						>
-							{ __( 'Clear customizations' ) }
-						</MenuItem>
-					) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
diff --git a/packages/edit-site/src/components/list/actions/rename-menu-item.js b/packages/edit-site/src/components/list/actions/rename-menu-item.js
deleted file mode 100644
index 6de56b2b2a28e9..00000000000000
--- a/packages/edit-site/src/components/list/actions/rename-menu-item.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-import {
-	Button,
-	Flex,
-	FlexItem,
-	MenuItem,
-	Modal,
-	TextControl,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export default function RenameMenuItem( { template, onClose } ) {
-	const [ title, setTitle ] = useState( () => template.title.rendered );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	if ( ! template.is_custom ) {
-		return null;
-	}
-
-	async function onTemplateRename( event ) {
-		event.preventDefault();
-
-		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
-				title,
-			} );
-
-			// Update state before saving rerenders the list.
-			setTitle( '' );
-			setIsModalOpen( false );
-			onClose();
-
-			// Persist edited entity.
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id,
-				{ throwOnError: true }
-			);
-
-			createSuccessNotice( __( 'Entity renamed.' ), {
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while renaming the entity.' );
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => {
-					setIsModalOpen( true );
-					setTitle( template.title.rendered );
-				} }
-			>
-				{ __( 'Rename' ) }
-			</MenuItem>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Rename' ) }
-					closeLabel={ __( 'Close' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="edit-site-list__rename-modal"
-				>
-					<form onSubmit={ onTemplateRename }>
-						<Flex align="flex-start" gap={ 8 }>
-							<FlexItem>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-									required
-								/>
-							</FlexItem>
-						</Flex>
-
-						<Flex
-							className="edit-site-list__rename-modal-actions"
-							justify="flex-end"
-							expanded={ false }
-						>
-							<FlexItem>
-								<Button
-									variant="tertiary"
-									onClick={ () => {
-										setIsModalOpen( false );
-									} }
-								>
-									{ __( 'Cancel' ) }
-								</Button>
-							</FlexItem>
-							<FlexItem>
-								<Button variant="primary" type="submit">
-									{ __( 'Save' ) }
-								</Button>
-							</FlexItem>
-						</Flex>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js
deleted file mode 100644
index 5619c66205438c..00000000000000
--- a/packages/edit-site/src/components/list/added-by.js
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	Icon,
-	Tooltip,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import {
-	commentAuthorAvatar as authorIcon,
-	layout as themeIcon,
-	plugins as pluginIcon,
-	globe as globeIcon,
-} from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
-
-function CustomizedTooltip( { isCustomized, children } ) {
-	if ( ! isCustomized ) {
-		return children;
-	}
-
-	return (
-		<Tooltip text={ __( 'This template has been customized' ) }>
-			{ children }
-		</Tooltip>
-	);
-}
-
-function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	return (
-		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				{ imageUrl ? (
-					<div
-						className={ classnames(
-							'edit-site-list-added-by__avatar',
-							{
-								'is-loaded': isImageLoaded,
-							}
-						) }
-					>
-						<img
-							onLoad={ () => setIsImageLoaded( true ) }
-							alt=""
-							src={ imageUrl }
-						/>
-					</div>
-				) : (
-					<div
-						className={ classnames(
-							'edit-site-list-added-by__icon',
-							{
-								'is-customized': isCustomized,
-							}
-						) }
-					>
-						<Icon icon={ icon } />
-					</div>
-				) }
-			</CustomizedTooltip>
-			<span>{ text }</span>
-		</HStack>
-	);
-}
-
-function AddedByTheme( { slug, isCustomized } ) {
-	const theme = useSelect(
-		( select ) => select( coreStore ).getTheme( slug ),
-		[ slug ]
-	);
-
-	return (
-		<BaseAddedBy
-			icon={ themeIcon }
-			text={ theme?.name?.rendered || slug }
-			isCustomized={ isCustomized }
-		/>
-	);
-}
-
-function AddedByPlugin( { slug, isCustomized } ) {
-	const plugin = useSelect(
-		( select ) => select( coreStore ).getPlugin( slug ),
-		[ slug ]
-	);
-
-	return (
-		<BaseAddedBy
-			icon={ pluginIcon }
-			text={ plugin?.name || slug }
-			isCustomized={ isCustomized }
-		/>
-	);
-}
-
-function AddedByAuthor( { id } ) {
-	const user = useSelect(
-		( select ) => select( coreStore ).getUser( id ),
-		[ id ]
-	);
-
-	return (
-		<BaseAddedBy
-			icon={ authorIcon }
-			imageUrl={ user?.avatar_urls?.[ 48 ] }
-			text={ user?.nickname }
-		/>
-	);
-}
-
-function AddedBySite() {
-	const { name, logoURL } = useSelect( ( select ) => {
-		const { getEntityRecord, getMedia } = select( coreStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			name: siteData?.name,
-			logoURL: siteData?.site_logo
-				? getMedia( siteData.site_logo )?.source_url
-				: undefined,
-		};
-	}, [] );
-
-	return (
-		<BaseAddedBy icon={ globeIcon } imageUrl={ logoURL } text={ name } />
-	);
-}
-
-export default function AddedBy( { templateType, template } ) {
-	if ( ! template ) {
-		return;
-	}
-
-	if ( TEMPLATE_POST_TYPE_NAMES.includes( templateType ) ) {
-		// Template originally provided by a theme, but customized by a user.
-		// Templates originally didn't have the 'origin' field so identify
-		// older customized templates by checking for no origin and a 'theme'
-		// or 'custom' source.
-		if (
-			template.has_theme_file &&
-			( template.origin === 'theme' ||
-				( ! template.origin &&
-					[ 'theme', 'custom' ].includes( template.source ) ) )
-		) {
-			return (
-				<AddedByTheme
-					slug={ template.theme }
-					isCustomized={ template.source === 'custom' }
-				/>
-			);
-		}
-
-		// Template originally provided by a plugin, but customized by a user.
-		if ( template.has_theme_file && template.origin === 'plugin' ) {
-			return (
-				<AddedByPlugin
-					slug={ template.theme }
-					isCustomized={ template.source === 'custom' }
-				/>
-			);
-		}
-
-		// Template was created from scratch, but has no author. Author support
-		// was only added to templates in WordPress 5.9. Fallback to showing the
-		// site logo and title.
-		if (
-			! template.has_theme_file &&
-			template.source === 'custom' &&
-			! template.author
-		) {
-			return <AddedBySite />;
-		}
-	}
-
-	// Simply show the author for templates created from scratch that have an
-	// author or for any other post type.
-	return <AddedByAuthor id={ template.author } />;
-}
diff --git a/packages/edit-site/src/components/list/header.js b/packages/edit-site/src/components/list/header.js
deleted file mode 100644
index 91b9a13aeeb9c7..00000000000000
--- a/packages/edit-site/src/components/list/header.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
-
-export default function Header( { templateType } ) {
-	const { canCreate, postType } = useSelect(
-		( select ) => {
-			const { supportsTemplatePartsMode } =
-				select( editSiteStore ).getSettings();
-			return {
-				postType: select( coreStore ).getPostType( templateType ),
-				canCreate: ! supportsTemplatePartsMode,
-			};
-		},
-		[ templateType ]
-	);
-
-	if ( ! postType ) {
-		return null;
-	}
-
-	return (
-		<header className="edit-site-list-header">
-			<Heading level={ 1 } className="edit-site-list-header__title">
-				{ postType.labels?.name }
-			</Heading>
-
-			{ canCreate && (
-				<div className="edit-site-list-header__right">
-					<AddNewTemplate templateType={ templateType } />
-				</div>
-			) }
-		</header>
-	);
-}
diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js
deleted file mode 100644
index 2b56930142ad4a..00000000000000
--- a/packages/edit-site/src/components/list/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { InterfaceSkeleton } from '@wordpress/interface';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { EditorSnackbars } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import useRegisterShortcuts from './use-register-shortcuts';
-import Header from './header';
-import NavigationSidebar from '../navigation-sidebar';
-import Table from './table';
-import { store as editSiteStore } from '../../store';
-import { useLocation } from '../routes';
-import useTitle from '../routes/use-title';
-
-export default function List() {
-	const {
-		params: { postType: templateType },
-	} = useLocation();
-
-	useRegisterShortcuts();
-
-	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
-		( select ) => {
-			return {
-				previousShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: select(
-					keyboardShortcutsStore
-				).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-			};
-		},
-		[]
-	);
-
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
-	);
-
-	useTitle( postType?.labels?.name );
-
-	// `postType` could load in asynchronously. Only provide the detailed region labels if
-	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
-	const itemsListLabel = postType?.labels?.items_list;
-	const detailedRegionLabels = postType
-		? {
-				header: sprintf(
-					// translators: %s - the name of the page, 'Header' as in the header area of that page.
-					__( '%s - Header' ),
-					itemsListLabel
-				),
-				body: sprintf(
-					// translators: %s - the name of the page, 'Content' as in the content area of that page.
-					__( '%s - Content' ),
-					itemsListLabel
-				),
-		  }
-		: undefined;
-
-	return (
-		<InterfaceSkeleton
-			className={ classnames( 'edit-site-list', {
-				'is-navigation-open': isNavigationOpen,
-			} ) }
-			labels={ {
-				drawer: __( 'Navigation Sidebar' ),
-				...detailedRegionLabels,
-			} }
-			header={ <Header templateType={ templateType } /> }
-			drawer={ <NavigationSidebar.Slot /> }
-			notices={ <EditorSnackbars /> }
-			content={ <Table templateType={ templateType } /> }
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
deleted file mode 100644
index f18e90c00fc618..00000000000000
--- a/packages/edit-site/src/components/list/style.scss
+++ /dev/null
@@ -1,199 +0,0 @@
-.edit-site-list-header {
-	position: relative;
-	align-items: center;
-	background-color: $white;
-	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: flex-end;
-	padding-right: $grid-unit-20;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
-
-	.edit-site-list-header__title {
-		position: absolute;
-		left: 0;
-		width: 100%;
-		text-align: center;
-		font-size: 20px;
-		padding: 0;
-		margin: 0;
-	}
-}
-
-.edit-site-list-header__right {
-	// Creating a stacking context so that it won't be covered by title.
-	position: relative;
-}
-
-.edit-site {
-	.edit-site-list {
-		.interface-interface-skeleton__editor {
-			min-width: 100%;
-
-			@include break-medium() {
-				min-width: 0;
-			}
-		}
-
-		.interface-interface-skeleton__content {
-			background: $white;
-			padding: $grid-unit-20;
-
-			.interface-navigable-region__stacker {
-				align-items: center;
-			}
-
-			@include break-medium() {
-				padding: $grid-unit * 9;
-			}
-		}
-	}
-}
-
-.edit-site-list-table {
-	width: 100%;
-	border: $border-width solid $gray-300;
-	border-radius: 2px;
-	margin: 0;
-	overflow: hidden;
-	border-spacing: 0;
-	max-width: 960px;
-
-	tr {
-		display: flex;
-		align-items: center;
-		padding: $grid-unit-20;
-		box-sizing: border-box;
-		border-top: $border-width solid $gray-100;
-		margin: 0;
-
-		&:first-child {
-			border-top: 0;
-		}
-
-		@include break-medium() {
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		// Template.
-		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 18px);
-			padding-right: $grid-unit-30;
-
-			a {
-				display: inline-block;
-				text-decoration: none;
-				font-weight: 500;
-				margin-bottom: $grid-unit-05;
-			}
-		}
-
-		// Added by.
-		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 18px);
-			word-break: break-word;
-		}
-
-		// Actions.
-		.edit-site-list-table-column:nth-child(3) {
-			min-width: $button-size;
-			flex-shrink: 0;
-		}
-	}
-
-	tr.edit-site-list-table-head {
-		font-size: 16px;
-		font-weight: 600;
-		text-align: left;
-		color: $gray-900;
-		border-top: none;
-		border-bottom: $border-width solid $gray-300;
-
-		th {
-			font-weight: inherit;
-		}
-	}
-}
-
-.edit-site-list.is-navigation-open .components-snackbar-list {
-	@include break-medium() {
-		margin-left: $nav-sidebar-width;
-	}
-}
-
-.edit-site-list__rename-modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-}
-
-.edit-site-list__rename-modal-actions {
-	margin-top: $grid-unit-15;
-}
-
-.edit-site-template__actions {
-	button:not(:last-child) {
-		margin-right: $grid-unit-10;
-	}
-}
-
-.edit-site-list-added-by__icon {
-	display: flex;
-	flex-shrink: 0;
-	position: relative;
-	align-items: center;
-	justify-content: center;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	background: $gray-800;
-	border-radius: 100%;
-
-	svg {
-		fill: $white;
-	}
-
-	&.is-customized::after {
-		position: absolute;
-		content: "";
-		background: var(--wp-admin-theme-color);
-		height: $grid-unit-10;
-		width: $grid-unit-10;
-		outline: 2px solid $white;
-		border-radius: 100%;
-		top: -1px;
-		right: -1px;
-	}
-}
-
-.edit-site-list-added-by__avatar {
-	flex-shrink: 0;
-	overflow: hidden;
-	border-radius: 100%;
-	background: $gray-800;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-
-	img {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		object-fit: cover;
-		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
-	&.is-loaded {
-		img {
-			opacity: 1;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
deleted file mode 100644
index d6f2405d76b42c..00000000000000
--- a/packages/edit-site/src/components/list/table.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	VisuallyHidden,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import Link from '../routes/link';
-import Actions from './actions';
-import AddedBy from './added-by';
-
-export default function Table( { templateType } ) {
-	const { records: templates, isResolving: isLoading } = useEntityRecords(
-		'postType',
-		templateType,
-		{
-			per_page: -1,
-		}
-	);
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
-	);
-
-	if ( ! templates || isLoading ) {
-		return null;
-	}
-
-	if ( ! templates.length ) {
-		return (
-			<div>
-				{ sprintf(
-					// translators: The template type name, should be either "templates" or "template parts".
-					__( 'No %s found.' ),
-					postType?.labels?.name?.toLowerCase()
-				) }
-			</div>
-		);
-	}
-
-	return (
-		// These explicit aria roles are needed for Safari.
-		// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
-		<table className="edit-site-list-table" role="table">
-			<thead>
-				<tr className="edit-site-list-table-head" role="row">
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						{ __( 'Template' ) }
-					</th>
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						{ __( 'Added by' ) }
-					</th>
-					<th
-						className="edit-site-list-table-column"
-						role="columnheader"
-					>
-						<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
-					</th>
-				</tr>
-			</thead>
-
-			<tbody>
-				{ templates.map( ( template ) => (
-					<tr
-						key={ template.id }
-						className="edit-site-list-table-row"
-						role="row"
-					>
-						<td className="edit-site-list-table-column" role="cell">
-							<Heading level={ 4 }>
-								<Link
-									params={ {
-										postId: template.id,
-										postType: template.type,
-									} }
-								>
-									{ decodeEntities(
-										template.title?.rendered ||
-											template.slug
-									) }
-								</Link>
-							</Heading>
-							{ decodeEntities( template.description ) }
-						</td>
-
-						<td className="edit-site-list-table-column" role="cell">
-							<AddedBy
-								templateType={ templateType }
-								template={ template }
-							/>
-						</td>
-						<td className="edit-site-list-table-column" role="cell">
-							<Actions template={ template } />
-						</td>
-					</tr>
-				) ) }
-			</tbody>
-		</table>
-	);
-}
diff --git a/packages/edit-site/src/components/list/use-register-shortcuts.js b/packages/edit-site/src/components/list/use-register-shortcuts.js
deleted file mode 100644
index f31b4a3808a22e..00000000000000
--- a/packages/edit-site/src/components/list/use-register-shortcuts.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-
-export default function useRegisterShortcuts() {
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-	}, [] );
-}
diff --git a/packages/edit-site/src/components/media/index.js b/packages/edit-site/src/components/media/index.js
new file mode 100644
index 00000000000000..e103e6bcddb5b2
--- /dev/null
+++ b/packages/edit-site/src/components/media/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord } from '@wordpress/core-data';
+
+function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
+	const { record: media } = useEntityRecord( 'root', 'media', id );
+	const currentSize = size.find(
+		( s ) => !! media?.media_details?.sizes[ s ]
+	);
+
+	const mediaUrl =
+		media?.media_details?.sizes[ currentSize ]?.source_url ||
+		media?.source_url;
+
+	if ( ! mediaUrl ) {
+		return null;
+	}
+
+	return <img { ...props } src={ mediaUrl } alt={ media.alt_text } />;
+}
+
+export default Media;
diff --git a/packages/edit-site/src/components/more-menu/index.js b/packages/edit-site/src/components/more-menu/index.js
new file mode 100644
index 00000000000000..4c4e9bb45c093e
--- /dev/null
+++ b/packages/edit-site/src/components/more-menu/index.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import SiteExport from './site-export';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import { unlock } from '../../lock-unlock';
+
+const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
+
+export default function MoreMenu() {
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
+
+	return (
+		<>
+			<ToolsMoreMenuGroup>
+				{ isBlockBasedTheme && <SiteExport /> }
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<PreferencesModal />
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js b/packages/edit-site/src/components/more-menu/site-export.js
similarity index 92%
rename from packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js
rename to packages/edit-site/src/components/more-menu/site-export.js
index ec9492081a42b3..85ec4f0dd7335e 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/site-export.js
+++ b/packages/edit-site/src/components/more-menu/site-export.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import downloadjs from 'downloadjs';
-
 /**
  * WordPress dependencies
  */
@@ -11,6 +6,7 @@ import { MenuItem } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { download } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { downloadBlob } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
 
 export default function SiteExport() {
@@ -35,7 +31,7 @@ export default function SiteExport() {
 				? contentDispositionMatches[ 1 ]
 				: 'edit-site-export';
 
-			downloadjs( blob, fileName + '.zip', 'application/zip' );
+			downloadBlob( fileName + '.zip', blob, 'application/zip' );
 		} catch ( errorResponse ) {
 			let error = {};
 			try {
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js b/packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js
similarity index 100%
rename from packages/edit-site/src/components/header-edit-mode/more-menu/welcome-guide-menu-item.js
rename to packages/edit-site/src/components/more-menu/welcome-guide-menu-item.js
diff --git a/packages/edit-site/src/components/navigate-to-link/index.js b/packages/edit-site/src/components/navigate-to-link/index.js
deleted file mode 100644
index 77f440abfc78f0..00000000000000
--- a/packages/edit-site/src/components/navigate-to-link/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getPathAndQueryString } from '@wordpress/url';
-import { useMemo } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-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,
-} ) {
-	const post = useSelect(
-		( select ) =>
-			type &&
-			id &&
-			type !== 'URL' &&
-			select( coreStore ).getEntityRecord( 'postType', type, id ),
-		[ type, id ]
-	);
-
-	const onClick = useMemo( () => {
-		if ( ! post?.link ) return null;
-		const path = getPathAndQueryString( post.link );
-		if ( path === activePage?.path ) return null;
-		return () =>
-			onActivePageChange( {
-				type,
-				slug: post.slug,
-				path,
-				context: {
-					postType: post.type,
-					postId: post.id,
-				},
-			} );
-	}, [ post, activePage?.path, onActivePageChange ] );
-
-	return (
-		onClick && (
-			<Button
-				icon={ edit }
-				label={ __( 'Edit Page Template' ) }
-				onClick={ onClick }
-			/>
-		)
-	);
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
deleted file mode 100644
index c76c1047dd776e..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { createSlotFill } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import NavigationPanel from './navigation-panel';
-import NavigationToggle from './navigation-toggle';
-
-export const {
-	Fill: NavigationPanelPreviewFill,
-	Slot: NavigationPanelPreviewSlot,
-} = createSlotFill( 'EditSiteNavigationPanelPreview' );
-
-const { Fill: NavigationSidebarFill, Slot: NavigationSidebarSlot } =
-	createSlotFill( 'EditSiteNavigationSidebar' );
-
-function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
-	const isDesktopViewport = useViewportMatch( 'medium' );
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	useEffect(
-		function autoOpenNavigationPanelOnViewportChange() {
-			setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
-		},
-		[ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
-	);
-
-	return (
-		<NavigationSidebarFill>
-			<NavigationToggle />
-			<NavigationPanel activeItem={ activeTemplateType } />
-			<NavigationPanelPreviewSlot />
-		</NavigationSidebarFill>
-	);
-}
-
-NavigationSidebar.Slot = NavigationSidebarSlot;
-
-export default NavigationSidebar;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
deleted file mode 100644
index 671bf2b8dd3021..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	TEMPLATE_PART_AREA_HEADER,
-	TEMPLATE_PART_AREA_FOOTER,
-	TEMPLATE_PART_AREA_SIDEBAR,
-	TEMPLATE_PART_AREA_GENERAL,
-} from '../../../store/constants';
-
-export const TEMPLATES_PRIMARY = [
-	'index',
-	'singular',
-	'archive',
-	'single',
-	'page',
-	'home',
-	'404',
-	'search',
-];
-
-export const TEMPLATES_SECONDARY = [
-	'author',
-	'category',
-	'taxonomy',
-	'date',
-	'tag',
-	'attachment',
-	'single',
-	'front-page',
-];
-
-export const TEMPLATES_TOP_LEVEL = [
-	...TEMPLATES_PRIMARY,
-	...TEMPLATES_SECONDARY,
-];
-
-export const TEMPLATES_GENERAL = [ 'page-home' ];
-
-export const TEMPLATES_POSTS_PREFIXES = [
-	'post-',
-	'author-',
-	'single-',
-	'tag-',
-];
-
-export const TEMPLATES_PAGES_PREFIXES = [ 'page-' ];
-
-export const TEMPLATE_OVERRIDES = {
-	singular: [ 'single', 'page' ],
-	index: [ 'archive', '404', 'search', 'singular', 'home' ],
-	home: [ 'front-page' ],
-};
-
-export const MENU_ROOT = 'root';
-export const MENU_TEMPLATE_PARTS = 'template-parts';
-export const MENU_TEMPLATES = 'templates';
-export const MENU_TEMPLATES_GENERAL = 'templates-general';
-export const MENU_TEMPLATES_PAGES = 'templates-pages';
-export const MENU_TEMPLATES_POSTS = 'templates-posts';
-export const MENU_TEMPLATES_UNUSED = 'templates-unused';
-
-export const MENU_TEMPLATE_PARTS_HEADERS = 'template-parts-headers';
-export const MENU_TEMPLATE_PARTS_FOOTERS = 'template-parts-footers';
-export const MENU_TEMPLATE_PARTS_SIDEBARS = 'template-parts-sidebars';
-export const MENU_TEMPLATE_PARTS_GENERAL = 'template-parts-general';
-
-export const TEMPLATE_PARTS_SUB_MENUS = [
-	{
-		area: TEMPLATE_PART_AREA_HEADER,
-		menu: MENU_TEMPLATE_PARTS_HEADERS,
-		title: __( 'headers' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_FOOTER,
-		menu: MENU_TEMPLATE_PARTS_FOOTERS,
-		title: __( 'footers' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_SIDEBAR,
-		menu: MENU_TEMPLATE_PARTS_SIDEBARS,
-		title: __( 'sidebars' ),
-	},
-	{
-		area: TEMPLATE_PART_AREA_GENERAL,
-		menu: MENU_TEMPLATE_PARTS_GENERAL,
-		title: __( 'general' ),
-	},
-];
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
deleted file mode 100644
index 8b820c8a13eddc..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ /dev/null
@@ -1,142 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalNavigation as Navigation,
-	__experimentalNavigationBackButton as NavigationBackButton,
-	__experimentalNavigationGroup as NavigationGroup,
-	__experimentalNavigationItem as NavigationItem,
-	__experimentalNavigationMenu as NavigationMenu,
-} from '@wordpress/components';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { ESCAPE } from '@wordpress/keycodes';
-import { decodeEntities } from '@wordpress/html-entities';
-import {
-	home as siteIcon,
-	layout as templateIcon,
-	symbolFilled as templatePartIcon,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { useLink } from '../../routes/link';
-import { store as editSiteStore } from '../../../store';
-
-const SITE_EDITOR_KEY = 'site-editor';
-
-function NavLink( { params, replace, ...props } ) {
-	const linkProps = useLink( params, replace );
-
-	return <NavigationItem { ...linkProps } { ...props } />;
-}
-
-const NavigationPanel = ( { activeItem } ) => {
-	const {
-		homeTemplate,
-		isNavigationOpen,
-		isTemplatePartsMode,
-		siteTitle,
-		dashboardLink,
-	} = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreDataStore );
-		const { getSettings, isNavigationOpened } = select( editSiteStore );
-
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-		const {
-			supportsTemplatePartsMode,
-			__unstableHomeTemplate,
-			__experimentalDashboardLink,
-		} = getSettings();
-
-		return {
-			siteTitle: siteData.name,
-			homeTemplate: __unstableHomeTemplate,
-			dashboardLink: __experimentalDashboardLink,
-			isNavigationOpen: isNavigationOpened(),
-			isTemplatePartsMode: !! supportsTemplatePartsMode,
-		};
-	}, [] );
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	const closeOnEscape = ( event ) => {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsNavigationPanelOpened( false );
-		}
-	};
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className={ classnames( `edit-site-navigation-panel`, {
-				'is-open': isNavigationOpen,
-			} ) }
-			onKeyDown={ closeOnEscape }
-		>
-			<div className="edit-site-navigation-panel__inner">
-				<div className="edit-site-navigation-panel__site-title-container">
-					<div className="edit-site-navigation-panel__site-title">
-						{ decodeEntities( siteTitle ) }
-					</div>
-				</div>
-				<div className="edit-site-navigation-panel__scroll-container">
-					<Navigation activeItem={ activeItem }>
-						<NavigationBackButton
-							backButtonLabel={ __( 'Dashboard' ) }
-							className="edit-site-navigation-panel__back-to-dashboard"
-							href={ dashboardLink ?? 'index.php' }
-						/>
-
-						<NavigationMenu>
-							<NavigationGroup title={ __( 'Editor' ) }>
-								{ ! isTemplatePartsMode && (
-									<>
-										<NavLink
-											icon={ siteIcon }
-											title={ __( 'Site' ) }
-											item={ SITE_EDITOR_KEY }
-											params={ {
-												postId: homeTemplate?.postId,
-												postType:
-													homeTemplate?.postType,
-											} }
-										/>
-										<NavLink
-											icon={ templateIcon }
-											title={ __( 'Templates' ) }
-											item="wp_template"
-											params={ {
-												postId: undefined,
-												postType: 'wp_template',
-											} }
-										/>
-									</>
-								) }
-								<NavLink
-									icon={ templatePartIcon }
-									title={ __( 'Template Parts' ) }
-									item="wp_template_part"
-									params={ {
-										postId: undefined,
-										postType: 'wp_template_part',
-									} }
-								/>
-							</NavigationGroup>
-						</NavigationMenu>
-					</Navigation>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default NavigationPanel;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
deleted file mode 100644
index a66a90876c8d4f..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-.edit-site-navigation-panel {
-	height: 100%;
-	position: relative;
-	width: 0;
-	overflow: hidden;
-	background: $gray-900;
-	color: $white;
-	transition: width 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel__inner {
-	position: relative;
-	width: $nav-sidebar-width;
-	height: 100%;
-	overflow: hidden;
-	// Inner container is hidden to remove menu from the accessibility tree when not visible.
-	// Setting visibility here (rather than on the parent container) preserves the slide transition.
-	visibility: hidden;
-	// Transition settings should match parent container.
-	transition: visibility 100ms linear;
-	@include reduce-motion("transition");
-}
-
-.edit-site-navigation-panel.is-open {
-	width: $nav-sidebar-width;
-
-	.edit-site-navigation-panel__inner {
-		visibility: visible;
-	}
-}
-
-.edit-site-navigation-panel__site-title-container {
-	height: $header-height;
-	padding-left: $header-height;
-	margin: 0 $grid-unit-20 0 $grid-unit-10;
-	display: flex;
-	align-items: center;
-}
-
-.edit-site-navigation-panel__site-title {
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px; /* Matches menu items */
-	line-height: 20px;
-	color: $gray-300;
-
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.edit-site-navigation-panel__scroll-container {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: calc(100% - #{$header-height});
-}
-
-.edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
-	height: $button-size;
-	margin-top: $grid-unit-30;
-	padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit;
-
-	&:focus:not(:disabled) {
-		border-bottom-color: transparent;
-	}
-}
-
-.edit-site-navigation-panel__preview {
-	display: none;
-	border: $border-width solid $gray-400;
-	width: $nav-sidebar-width;
-	padding: $grid-unit-20;
-	background: $white;
-	box-shadow: $shadow-popover;
-	border-radius: $radius-block-ui;
-	position: absolute;
-	top: $header-height + $grid-unit-15 + 1px; // +1px for the header border
-	left: $nav-sidebar-width + $grid-unit-15;
-	color: $gray-900;
-	z-index: z-index(".edit-site-navigation-panel__preview");
-
-	@include break-medium {
-		display: block;
-	}
-}
-
-.edit-site-navigation-panel__template-item {
-	display: block;
-
-	.components-button {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: center;
-		height: auto;
-		min-height: $button-size;
-		text-align: left;
-		padding-left: $grid-unit-20;
-		padding-right: $grid-unit-20;
-		color: inherit;
-	}
-}
-
-.edit-site-navigation-panel__template-item-title {
-	font-size: 14px;
-	line-height: 20px;
-
-	em {
-		margin-right: 1ch;
-	}
-}
-
-.edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading {
-	text-transform: capitalize;
-}
-
-.edit-site-navigation-panel__template-part-item .components-navigation__item-title {
-	text-transform: capitalize;
-}
-
-.components-navigation__item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-20;
-}
-
-.edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item {
-	margin-top: $grid-unit-10;
-}
-
-.edit-site-navigation-panel__info-wrapper {
-	padding: $grid-unit-05 0;
-}
-
-.edit-site-navigation-panel__template-item-description {
-	padding-top: $grid-unit-10;
-	font-size: 12px;
-	line-height: 16px;
-}
-
-.edit-site-navigation-panel__new-template-dropdown {
-	margin: 0 0 0 $grid-unit-15;
-
-	button {
-		margin: 0;
-	}
-}
-.edit-site-navigation-panel__new-template-popover {
-	@include break-small() {
-		min-width: 300px;
-	}
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js
deleted file mode 100644
index 2f8d511ae10eae..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-hierarchy.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import {
-	MENU_TEMPLATES,
-	MENU_TEMPLATES_GENERAL,
-	MENU_TEMPLATES_PAGES,
-	MENU_TEMPLATES_POSTS,
-	TEMPLATE_OVERRIDES,
-	TEMPLATES_GENERAL,
-	TEMPLATES_PAGES_PREFIXES,
-	TEMPLATES_POSTS_PREFIXES,
-	TEMPLATES_TOP_LEVEL,
-} from './constants';
-
-export function isTemplateSuperseded( slug, existingSlugs, showOnFront ) {
-	if ( ! TEMPLATE_OVERRIDES[ slug ] ) {
-		return false;
-	}
-
-	// `home` template is unused if it is superseded by `front-page`
-	// or "show on front" is set to show a page rather than blog posts.
-	if ( slug === 'home' && showOnFront !== 'posts' ) {
-		return true;
-	}
-
-	return TEMPLATE_OVERRIDES[ slug ].every(
-		( overrideSlug ) =>
-			existingSlugs.includes( overrideSlug ) ||
-			isTemplateSuperseded( overrideSlug, existingSlugs, showOnFront )
-	);
-}
-
-export function getTemplateLocation( slug ) {
-	const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes( slug );
-	if ( isTopLevelTemplate ) {
-		return MENU_TEMPLATES;
-	}
-
-	const isGeneralTemplate = TEMPLATES_GENERAL.includes( slug );
-	if ( isGeneralTemplate ) {
-		return MENU_TEMPLATES_GENERAL;
-	}
-
-	const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPostsTemplate ) {
-		return MENU_TEMPLATES_POSTS;
-	}
-
-	const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPagesTemplate ) {
-		return MENU_TEMPLATES_PAGES;
-	}
-
-	return MENU_TEMPLATES_GENERAL;
-}
-
-export function getUnusedTemplates( templates, showOnFront ) {
-	const templateSlugs = map( templates, 'slug' );
-	const supersededTemplates = templates.filter( ( { slug } ) =>
-		isTemplateSuperseded( slug, templateSlugs, showOnFront )
-	);
-
-	return supersededTemplates;
-}
-
-export function getTemplatesLocationMap( templates ) {
-	return templates.reduce( ( obj, template ) => {
-		obj[ template.slug ] = getTemplateLocation( template.slug );
-		return obj;
-	}, {} );
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
deleted file mode 100644
index 2cdc68858e480c..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-import { store as coreDataStore } from '@wordpress/core-data';
-import { useReducedMotion } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function NavigationToggle( { icon } ) {
-	const { isNavigationOpen, isRequestingSiteIcon, siteIconUrl } = useSelect(
-		( select ) => {
-			const { getEntityRecord, isResolving } = select( coreDataStore );
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-
-			return {
-				isNavigationOpen: select( editSiteStore ).isNavigationOpened(),
-				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-					'root',
-					'__unstableBase',
-					undefined,
-				] ),
-				siteIconUrl: siteData.site_icon_url,
-			};
-		},
-		[]
-	);
-	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
-
-	const disableMotion = useReducedMotion();
-
-	const navigationToggleRef = useRef();
-
-	useEffect( () => {
-		// TODO: Remove this effect when alternative solution is merged.
-		// See: https://github.com/WordPress/gutenberg/pull/37314
-		if ( ! isNavigationOpen ) {
-			navigationToggleRef.current.focus();
-		}
-	}, [ isNavigationOpen ] );
-
-	const toggleNavigationPanel = () =>
-		setIsNavigationPanelOpened( ! isNavigationOpen );
-
-	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
-
-	const effect = {
-		expand: {
-			scale: 1.25,
-			transition: { type: 'tween', duration: '0.3' },
-		},
-	};
-
-	if ( siteIconUrl ) {
-		buttonIcon = (
-			<motion.img
-				variants={ ! disableMotion && effect }
-				alt={ __( 'Site Icon' ) }
-				className="edit-site-navigation-toggle__site-icon"
-				src={ siteIconUrl }
-			/>
-		);
-	} else if ( isRequestingSiteIcon ) {
-		buttonIcon = null;
-	} else if ( icon ) {
-		buttonIcon = <Icon size="36px" icon={ icon } />;
-	}
-
-	const classes = classnames( {
-		'edit-site-navigation-toggle__button': true,
-		'has-icon': siteIconUrl,
-	} );
-
-	return (
-		<motion.div
-			className={
-				'edit-site-navigation-toggle' +
-				( isNavigationOpen ? ' is-open' : '' )
-			}
-			whileHover="expand"
-		>
-			<Button
-				className={ classes }
-				label={ __( 'Toggle navigation' ) }
-				ref={ navigationToggleRef }
-				// isPressed will add unwanted styles.
-				aria-pressed={ isNavigationOpen }
-				onClick={ toggleNavigationPanel }
-				showTooltip
-			>
-				{ buttonIcon }
-			</Button>
-		</motion.div>
-	);
-}
-
-export default NavigationToggle;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
deleted file mode 100644
index 39f53df6c94d9b..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-// Developer notes: these rules are duplicated for the post editor.
-// They need to be updated in both places.
-
-.edit-site-navigation-toggle {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	display: flex;
-	position: absolute;
-	z-index: z-index(".edit-site-navigation-toggle");
-	height: $header-height;
-	width: $header-height;
-}
-
-.edit-site-navigation-toggle__button.components-button {
-	align-items: center;
-	background: $gray-900;
-	border-radius: 0;
-	color: $white;
-	height: $header-height + $border-width;
-	width: $header-height;
-	z-index: 1;
-	margin-bottom: - $border-width;
-	min-width: $header-height;
-
-	&:hover,
-	&:active {
-		color: $white;
-	}
-
-	&:focus {
-		box-shadow: none;
-	}
-
-	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
-		content: "";
-		display: block;
-		position: absolute;
-		top: 9px;
-		right: 9px;
-		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;
-	}
-
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	.edit-site-navigation-toggle__site-icon {
-		width: $button-size;
-		height: $button-size;
-		border-radius: $radius-block-ui;
-		object-fit: cover;
-		// Compensate for the top-bar border.
-		margin-top: -($border-width);
-	}
-}
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
deleted file mode 100644
index 9888593a8eca92..00000000000000
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import NavigationToggle from '..';
-
-jest.mock( '@wordpress/data/src/components/use-select', () => {
-	// This allows us to tweak the returned value on each test.
-	return jest.fn();
-} );
-
-describe( 'NavigationToggle', () => {
-	describe( 'when in full screen mode', () => {
-		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: 'https://fakeUrl.com',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.getByAltText( 'Site Icon' );
-			expect( siteIcon ).toBeVisible();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-
-		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) =>
-				cb( () => ( {
-					getEntityRecord: () => ( {
-						site_icon_url: '',
-					} ),
-					isResolving: () => false,
-					isNavigationOpened: () => false,
-				} ) )
-			);
-
-			const { unmount } = render( <NavigationToggle /> );
-
-			const siteIcon = screen.queryByAltText( 'Site Icon' );
-			expect( siteIcon ).not.toBeInTheDocument();
-
-			// Unmount the UI synchronously so that any async effects, like the on-mount focus
-			// that shows and positions a tooltip, are cancelled right away and never run.
-			unmount();
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
new file mode 100644
index 00000000000000..ca7bbf2fa73220
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/delete-category-menu-item.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { PATTERN_TYPES, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function DeleteCategoryMenuItem( { category, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord, invalidateResolution } =
+		useDispatch( coreStore );
+
+	const onDelete = async () => {
+		try {
+			await deleteEntityRecord(
+				'taxonomy',
+				'wp_pattern_category',
+				category.id,
+				{ force: true },
+				{ throwOnError: true }
+			);
+
+			// Prevent the need to refresh the page to get up-to-date categories
+			// and pattern categorization.
+			invalidateResolution( 'getUserPatternCategories' );
+			invalidateResolution( 'getEntityRecords', [
+				'postType',
+				PATTERN_TYPES.user,
+				{ per_page: -1 },
+			] );
+
+			createSuccessNotice(
+				sprintf(
+					/* translators: %s: The pattern category's name */
+					_x( '"%s" deleted.', 'pattern category' ),
+					category.label
+				),
+				{ type: 'snackbar', id: 'pattern-category-delete' }
+			);
+
+			onClose?.();
+			history.navigate(
+				`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while deleting the pattern category.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'pattern-category-delete',
+			} );
+		}
+	};
+
+	return (
+		<>
+			<MenuItem isDestructive onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ onDelete }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
+				className="edit-site-patterns__delete-modal"
+				title={ sprintf(
+					// translators: %s: The pattern category's name.
+					_x( 'Delete "%s"?', 'pattern category' ),
+					decodeEntities( category.label )
+				) }
+				size="medium"
+				__experimentalHideHeader={ false }
+			>
+				{ sprintf(
+					// translators: %s: The pattern category's name.
+					__(
+						'Are you sure you want to delete the category "%s"? The patterns will not be deleted.'
+					),
+					decodeEntities( category.label )
+				) }
+			</ConfirmDialog>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js
new file mode 100644
index 00000000000000..f202664389f0ff
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/fields.js
@@ -0,0 +1,190 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useState, useMemo, useId } from '@wordpress/element';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { Icon } from '@wordpress/icons';
+import { parse } from '@wordpress/blocks';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+	OPERATOR_IS,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { useAddedBy } from '../page-templates/hooks';
+import { defaultGetTitle } from './search-items';
+
+const { useLink } = unlock( routerPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
+	return (
+		<button
+			className="page-patterns-preview-field__button"
+			type="button"
+			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
+			aria-label={ defaultGetTitle( item ) }
+			aria-describedby={ ariaDescribedBy }
+			aria-disabled={ item.type === PATTERN_TYPES.theme }
+		>
+			{ children }
+		</button>
+	);
+}
+
+function PreviewField( { item } ) {
+	const descriptionId = useId();
+	const description = item.description || item?.excerpt?.raw;
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { onClick } = useLink(
+		`/${ item.type }/${
+			isUserPattern || isTemplatePart ? item.id : item.name
+		}?canvas=edit`
+	);
+	const blocks = useMemo( () => {
+		return (
+			item.blocks ??
+			parse( item.content.raw, {
+				__unstableSkipMigrationLogs: true,
+			} )
+		);
+	}, [ item?.content?.raw, item.blocks ] );
+	const isEmpty = ! blocks?.length;
+
+	return (
+		<div
+			className="page-patterns-preview-field"
+			style={ { backgroundColor } }
+		>
+			<PreviewWrapper
+				item={ item }
+				onClick={ onClick }
+				ariaDescribedBy={ !! description ? descriptionId : undefined }
+			>
+				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview
+							blocks={ blocks }
+							viewportWidth={ item.viewportWidth }
+						/>
+					</BlockPreview.Async>
+				) }
+			</PreviewWrapper>
+			{ !! description && (
+				<div hidden id={ descriptionId }>
+					{ description }
+				</div>
+			) }
+		</div>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+const SYNC_FILTERS = [
+	{
+		value: PATTERN_SYNC_TYPES.full,
+		label: _x( 'Synced', 'pattern (singular)' ),
+		description: __( 'Patterns that are kept in sync across the site.' ),
+	},
+	{
+		value: PATTERN_SYNC_TYPES.unsynced,
+		label: _x( 'Not synced', 'pattern (singular)' ),
+		description: __(
+			'Patterns that can be changed freely without affecting the site.'
+		),
+	},
+];
+
+export const patternStatusField = {
+	label: __( 'Sync status' ),
+	id: 'sync-status',
+	render: ( { item } ) => {
+		const syncStatus =
+			'wp_pattern_sync_status' in item
+				? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full
+				: PATTERN_SYNC_TYPES.unsynced;
+		// User patterns can have their sync statuses checked directly.
+		// Non-user patterns are all unsynced for the time being.
+		return (
+			<span
+				className={ `edit-site-patterns__field-sync-status-${ syncStatus }` }
+			>
+				{
+					SYNC_FILTERS.find( ( { value } ) => value === syncStatus )
+						.label
+				}
+			</span>
+		);
+	},
+	elements: SYNC_FILTERS,
+	filterBy: {
+		operators: [ OPERATOR_IS ],
+		isPrimary: true,
+	},
+	enableSorting: false,
+};
+
+function AuthorField( { item } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export const templatePartAuthorField = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: AuthorField,
+	filterBy: {
+		isPrimary: true,
+	},
+};
diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
new file mode 100644
index 00000000000000..0d3763aec62c1a
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/header.js
@@ -0,0 +1,120 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	DropdownMenu,
+	MenuGroup,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import AddNewPattern from '../add-new-pattern';
+import RenameCategoryMenuItem from './rename-category-menu-item';
+import DeleteCategoryMenuItem from './delete-category-menu-item';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+import { TEMPLATE_PART_POST_TYPE, PATTERN_TYPES } from '../../utils/constants';
+
+export default function PatternsHeader( {
+	categoryId,
+	type,
+	titleId,
+	descriptionId,
+} ) {
+	const { patternCategories } = usePatternCategories();
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
+		[]
+	);
+
+	let title, description, patternCategory;
+	if ( type === TEMPLATE_PART_POST_TYPE ) {
+		const templatePartArea = templatePartAreas.find(
+			( area ) => area.area === categoryId
+		);
+		title = templatePartArea?.label || __( 'All Template Parts' );
+		description =
+			templatePartArea?.description ||
+			__( 'Includes every template part defined for any area.' );
+	} else if ( type === PATTERN_TYPES.user && !! categoryId ) {
+		patternCategory = patternCategories.find(
+			( category ) => category.name === categoryId
+		);
+		title = patternCategory?.label;
+		description = patternCategory?.description;
+	}
+
+	if ( ! title ) {
+		return null;
+	}
+
+	return (
+		<VStack className="edit-site-patterns__section-header" spacing={ 1 }>
+			<HStack
+				justify="space-between"
+				className="edit-site-patterns__title"
+			>
+				<Heading
+					as="h2"
+					level={ 3 }
+					id={ titleId }
+					weight={ 500 }
+					truncate
+				>
+					{ title }
+				</Heading>
+				<HStack expanded={ false }>
+					<AddNewPattern />
+					{ !! patternCategory?.id && (
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+							toggleProps={ {
+								className: 'edit-site-patterns__button',
+								description: sprintf(
+									/* translators: %s: pattern category name */
+									__( 'Action menu for %s pattern category' ),
+									title
+								),
+								size: 'compact',
+							} }
+						>
+							{ ( { onClose } ) => (
+								<MenuGroup>
+									<RenameCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+									<DeleteCategoryMenuItem
+										category={ patternCategory }
+										onClose={ onClose }
+									/>
+								</MenuGroup>
+							) }
+						</DropdownMenu>
+					) }
+				</HStack>
+			</HStack>
+			{ description ? (
+				<Text
+					variant="muted"
+					as="p"
+					id={ descriptionId }
+					className="edit-site-patterns__sub-title"
+				>
+					{ description }
+				</Text>
+			) : null }
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
new file mode 100644
index 00000000000000..b23213fa1a6db3
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -0,0 +1,205 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useId, useEffect } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { usePrevious } from '@wordpress/compose';
+import { useEntityRecords } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { patternTitleField } from '@wordpress/fields';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import {
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_DEFAULT_CATEGORY,
+} from '../../utils/constants';
+import usePatternSettings from './use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
+import PatternsHeader from './header';
+import { useEditPostAction } from '../dataviews-actions';
+import {
+	patternStatusField,
+	previewField,
+	templatePartAuthorField,
+} from './fields';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { usePostActions } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+const EMPTY_ARRAY = [];
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {
+		layout: {
+			styles: {
+				author: {
+					width: '1%',
+				},
+			},
+		},
+	},
+	[ LAYOUT_GRID ]: {
+		layout: {
+			badgeFields: [ 'sync-status' ],
+		},
+	},
+};
+const DEFAULT_VIEW = {
+	type: LAYOUT_GRID,
+	search: '',
+	page: 1,
+	perPage: 20,
+	titleField: 'title',
+	mediaField: 'preview',
+	fields: [ 'sync-status' ],
+	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
+};
+
+export default function DataviewsPatterns() {
+	const {
+		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
+	} = useLocation();
+	const history = useHistory();
+	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
+	const [ view, setView ] = useState( DEFAULT_VIEW );
+	const previousCategoryId = usePrevious( categoryId );
+	const previousPostType = usePrevious( postType );
+	const viewSyncStatus = view.filters?.find(
+		( { field } ) => field === 'sync-status'
+	)?.value;
+	const { patterns, isResolving } = usePatterns( postType, categoryId, {
+		search: view.search,
+		syncStatus: viewSyncStatus,
+	} );
+
+	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
+		per_page: -1,
+	} );
+
+	const authors = useMemo( () => {
+		if ( ! records ) {
+			return EMPTY_ARRAY;
+		}
+		const authorsSet = new Set();
+		records.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ records ] );
+
+	const fields = useMemo( () => {
+		const _fields = [ previewField, patternTitleField ];
+
+		if ( postType === PATTERN_TYPES.user ) {
+			_fields.push( patternStatusField );
+		} else if ( postType === TEMPLATE_PART_POST_TYPE ) {
+			_fields.push( {
+				...templatePartAuthorField,
+				elements: authors,
+			} );
+		}
+
+		return _fields;
+	}, [ postType, authors ] );
+
+	// Reset the page number when the category changes.
+	useEffect( () => {
+		if (
+			previousCategoryId !== categoryId ||
+			previousPostType !== postType
+		) {
+			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
+		}
+	}, [ categoryId, previousCategoryId, previousPostType, postType ] );
+	const { data, paginationInfo } = useMemo( () => {
+		// Search is managed server-side as well as filters for patterns.
+		// However, the author filter in template parts is done client-side.
+		const viewWithoutFilters = { ...view };
+		delete viewWithoutFilters.search;
+		if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+			viewWithoutFilters.filters = [];
+		}
+		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
+	}, [ patterns, view, fields, postType ] );
+
+	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
+
+	const templatePartActions = usePostActions( {
+		postType: TEMPLATE_PART_POST_TYPE,
+		context: 'list',
+	} );
+	const patternActions = usePostActions( {
+		postType: PATTERN_TYPES.user,
+		context: 'list',
+	} );
+	const editAction = useEditPostAction();
+
+	const actions = useMemo( () => {
+		if ( postType === TEMPLATE_PART_POST_TYPE ) {
+			return [ editAction, ...templatePartActions ].filter( Boolean );
+		}
+		return [ editAction, ...patternActions ].filter( Boolean );
+	}, [ editAction, postType, templatePartActions, patternActions ] );
+	const id = useId();
+	const settings = usePatternSettings();
+	// Wrap everything in a block editor provider.
+	// This ensures 'styles' that are needed for the previews are synced
+	// from the site editor store to the block editor store.
+	return (
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<Page
+				title={ __( 'Patterns content' ) }
+				className="edit-site-page-patterns-dataviews"
+				hideTitleFromUI
+			>
+				<PatternsHeader
+					categoryId={ categoryId }
+					type={ postType }
+					titleId={ `${ id }-title` }
+					descriptionId={ `${ id }-description` }
+				/>
+				<DataViews
+					key={ categoryId + postType }
+					paginationInfo={ paginationInfo }
+					fields={ fields }
+					actions={ actions }
+					data={ dataWithPermissions || EMPTY_ARRAY }
+					getItemId={ ( item ) => item.name ?? item.id }
+					isLoading={ isResolving }
+					isItemClickable={ ( item ) =>
+						item.type !== PATTERN_TYPES.theme
+					}
+					onClickItem={ ( item ) => {
+						history.navigate(
+							`/${ item.type }/${
+								[
+									PATTERN_TYPES.user,
+									TEMPLATE_PART_POST_TYPE,
+								].includes( item.type )
+									? item.id
+									: item.name
+							}?canvas=edit`
+						);
+					} }
+					view={ view }
+					onChangeView={ setView }
+					defaultLayouts={ defaultLayouts }
+				/>
+			</Page>
+		</ExperimentalBlockEditorProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js b/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js
new file mode 100644
index 00000000000000..997cc63b46fa5d
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/rename-category-menu-item.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+/**
+ * Internal dependencies
+ */
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { RenamePatternCategoryModal } = unlock( patternsPrivateApis );
+
+export default function RenameCategoryMenuItem( { category, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<RenameModal
+					category={ category }
+					onClose={ () => {
+						setIsModalOpen( false );
+						onClose();
+					} }
+				/>
+			) }
+		</>
+	);
+}
+
+function RenameModal( { category, onClose } ) {
+	// User created pattern categories have their properties updated when
+	// retrieved via `getUserPatternCategories`. The rename modal expects an
+	// object that will match the pattern category entity.
+	const normalizedCategory = {
+		id: category.id,
+		slug: category.slug,
+		name: category.label,
+	};
+
+	// Optimization - only use pattern categories when the modal is open.
+	const existingCategories = usePatternCategories();
+
+	return (
+		<RenamePatternCategoryModal
+			category={ normalizedCategory }
+			existingCategories={ existingCategories }
+			onClose={ onClose }
+			overlayClassName="edit-site-list__rename-modal"
+			focusOnMount="firstContentElement"
+			size="small"
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/page-patterns/search-items.js b/packages/edit-site/src/components/page-patterns/search-items.js
new file mode 100644
index 00000000000000..1d03400c86c8cc
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/search-items.js
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
+	blockEditorPrivateApis
+);
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+
+// Default search helpers.
+const defaultGetName = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.slug;
+	}
+
+	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
+		return '';
+	}
+
+	return item.name || '';
+};
+
+export const defaultGetTitle = ( item ) => {
+	if ( typeof item.title === 'string' ) {
+		return item.title;
+	}
+
+	if ( item.title && item.title.rendered ) {
+		return item.title.rendered;
+	}
+
+	if ( item.title && item.title.raw ) {
+		return item.title.raw;
+	}
+
+	return '';
+};
+
+const defaultGetDescription = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.excerpt.raw;
+	}
+
+	return item.description || '';
+};
+
+const defaultGetKeywords = ( item ) => item.keywords || [];
+const defaultHasCategory = () => false;
+
+const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
+	return unmatchedTerms.filter(
+		( term ) =>
+			! getNormalizedSearchTerms( unprocessedTerms ).some(
+				( unprocessedTerm ) => unprocessedTerm.includes( term )
+			)
+	);
+};
+
+/**
+ * Filters an item list given a search term.
+ *
+ * @param {Array}  items       Item list
+ * @param {string} searchInput Search input.
+ * @param {Object} config      Search Config.
+ *
+ * @return {Array} Filtered item list.
+ */
+export const searchItems = ( items = [], searchInput = '', config = {} ) => {
+	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+
+	// Filter patterns by category: the default category indicates that all patterns will be shown.
+	const onlyFilterByCategory =
+		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
+		! normalizedSearchTerms.length;
+	const searchRankConfig = { ...config, onlyFilterByCategory };
+
+	// If we aren't filtering on search terms, matching on category is satisfactory.
+	// If we are, then we need more than a category match.
+	const threshold = onlyFilterByCategory ? 0 : 1;
+
+	const rankedItems = items
+		.map( ( item ) => {
+			return [
+				item,
+				getItemSearchRank( item, searchInput, searchRankConfig ),
+			];
+		} )
+		.filter( ( [ , rank ] ) => rank > threshold );
+
+	// If we didn't have terms to search on, there's no point sorting.
+	if ( normalizedSearchTerms.length === 0 ) {
+		return rankedItems.map( ( [ item ] ) => item );
+	}
+
+	rankedItems.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedItems.map( ( [ item ] ) => item );
+};
+
+/**
+ * Get the search rank for a given item and a specific search term.
+ * The better the match, the higher the rank.
+ * If the rank equals 0, it should be excluded from the results.
+ *
+ * @param {Object} item       Item to filter.
+ * @param {string} searchTerm Search term.
+ * @param {Object} config     Search Config.
+ *
+ * @return {number} Search Rank.
+ */
+function getItemSearchRank( item, searchTerm, config ) {
+	const {
+		categoryId,
+		getName = defaultGetName,
+		getTitle = defaultGetTitle,
+		getDescription = defaultGetDescription,
+		getKeywords = defaultGetKeywords,
+		hasCategory = defaultHasCategory,
+		onlyFilterByCategory,
+	} = config;
+
+	let rank =
+		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		categoryId === TEMPLATE_PART_ALL_AREAS_CATEGORY ||
+		( categoryId === PATTERN_USER_CATEGORY &&
+			item.type === PATTERN_TYPES.user ) ||
+		hasCategory( item, categoryId )
+			? 1
+			: 0;
+
+	// If an item doesn't belong to the current category or we don't have
+	// search terms to filter by, return the initial rank value.
+	if ( ! rank || onlyFilterByCategory ) {
+		return rank;
+	}
+
+	const name = getName( item );
+	const title = getTitle( item );
+	const description = getDescription( item );
+	const keywords = getKeywords( item );
+
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
+
+	// Prefers exact matches
+	// Then prefers if the beginning of the title matches the search term
+	// name, keywords, description matches come later.
+	if ( normalizedSearchInput === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchInput ) ) {
+		rank += 20;
+	} else {
+		const terms = [ name, title, description, ...keywords ].join( ' ' );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const unmatchedTerms = removeMatchingTerms(
+			normalizedSearchTerms,
+			terms
+		);
+
+		if ( unmatchedTerms.length === 0 ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
new file mode 100644
index 00000000000000..72d53c2a721afc
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -0,0 +1,123 @@
+.edit-site-patterns__delete-modal {
+	width: $modal-width-small;
+}
+
+.page-patterns-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: $radius-medium;
+
+	.dataviews-view-table & {
+		width: 96px;
+		flex-grow: 0;
+	}
+
+	.page-patterns-preview-field__button {
+		box-shadow: none;
+		border: none;
+		padding: 0;
+		background-color: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		overflow: hidden;
+		height: 100%;
+		border-radius: $grid-unit-05;
+
+		&:focus-visible {
+			box-shadow: 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;
+		}
+
+		&[aria-disabled="true"] {
+			cursor: default;
+		}
+	}
+}
+
+.edit-site-patterns__pattern-icon {
+	fill: var(--wp-block-synced-color);
+	flex-shrink: 0;
+}
+
+.edit-site-patterns__section-header {
+	border-bottom: 1px solid #f0f0f0;
+	padding: $grid-unit-20 $grid-unit-60;
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	flex-shrink: 0;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+	min-height: $grid-unit-50;
+
+	.edit-site-patterns__title {
+		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
+	}
+
+	.edit-site-patterns__sub-title {
+		margin-bottom: $grid-unit-10;
+	}
+
+	.screen-reader-shortcut:focus {
+		top: 0;
+	}
+}
+
+.edit-site-page-patterns-dataviews {
+	.dataviews-view-grid__badge-fields {
+		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
+			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
+			color: var(--wp-block-synced-color);
+		}
+	}
+}
+
+.dataviews-action-modal__duplicate-pattern {
+	// Fix the modal width to prevent added categories from stretching the modal.
+	[role="dialog"] > [role="document"] {
+		width: 350px;
+	}
+
+	.patterns-menu-items__convert-modal-categories {
+		position: relative;
+	}
+
+	.components-form-token-field__suggestions-list:not(:empty) {
+		position: absolute;
+		border: $border-width solid var(--wp-admin-theme-color);
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
+		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
+		box-sizing: border-box;
+		z-index: 1;
+		background-color: $white;
+		width: calc(100% + 2px); // Account for the border width of the token field.
+		left: -1px;
+		min-width: initial;
+		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
+	}
+}
+
+.dataviews-action-modal__duplicate-template-part {
+	.components-modal__frame {
+		@include break-small {
+			max-width: 500px;
+		}
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
diff --git a/packages/edit-site/src/components/page-patterns/use-pattern-settings.js b/packages/edit-site/src/components/page-patterns/use-pattern-settings.js
new file mode 100644
index 00000000000000..274604395baac5
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/use-pattern-settings.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { filterOutDuplicatesByName } from './utils';
+
+export default function usePatternSettings() {
+	const storedSettings = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		return getSettings();
+	}, [] );
+
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+
+	const restBlockPatterns = useSelect(
+		( select ) => select( coreStore ).getBlockPatterns(),
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			].filter( filterOutDuplicatesByName ),
+		[ settingsBlockPatterns, restBlockPatterns ]
+	);
+
+	const settings = useMemo( () => {
+		const { __experimentalAdditionalBlockPatterns, ...restStoredSettings } =
+			storedSettings;
+
+		return {
+			...restStoredSettings,
+			__experimentalBlockPatterns: blockPatterns,
+			isPreviewMode: true,
+		};
+	}, [ storedSettings, blockPatterns ] );
+
+	return settings;
+}
diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
new file mode 100644
index 00000000000000..3b3e33d5650e63
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -0,0 +1,323 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { useSelect, createSelector } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { filterOutDuplicatesByName } from './utils';
+import {
+	EXCLUDED_PATTERN_SOURCES,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { searchItems } from './search-items';
+import { store as editSiteStore } from '../../store';
+
+const EMPTY_PATTERN_LIST = [];
+
+const selectTemplateParts = createSelector(
+	( select, categoryId, search = '' ) => {
+		const { getEntityRecords, isResolving: isResolvingSelector } =
+			select( coreStore );
+
+		const query = { per_page: -1 };
+		const templateParts =
+			getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
+			EMPTY_PATTERN_LIST;
+
+		// In the case where a custom template part area has been removed we need
+		// the current list of areas to cross check against so orphaned template
+		// parts can be treated as uncategorized.
+		const knownAreas =
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [];
+
+		const templatePartAreas = knownAreas.map( ( area ) => area.area );
+
+		const templatePartHasCategory = ( item, category ) => {
+			if ( category !== TEMPLATE_PART_AREA_DEFAULT_CATEGORY ) {
+				return item.area === category;
+			}
+
+			return (
+				item.area === category ||
+				! templatePartAreas.includes( item.area )
+			);
+		};
+
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			query,
+		] );
+
+		const patterns = searchItems( templateParts, search, {
+			categoryId,
+			hasCategory: templatePartHasCategory,
+		} );
+
+		return { patterns, isResolving };
+	},
+	( select ) => [
+		select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			{
+				per_page: -1,
+			}
+		),
+		select( coreStore ).isResolving( 'getEntityRecords', [
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			{ per_page: -1 },
+		] ),
+		select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.default_template_part_areas,
+	]
+);
+
+const selectThemePatterns = createSelector(
+	( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const { isResolving: isResolvingSelector } = select( coreStore );
+		const settings = getSettings();
+		const blockPatterns =
+			settings.__experimentalAdditionalBlockPatterns ??
+			settings.__experimentalBlockPatterns;
+
+		const restBlockPatterns = select( coreStore ).getBlockPatterns();
+
+		const patterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		]
+			.filter(
+				( pattern ) =>
+					! EXCLUDED_PATTERN_SOURCES.includes( pattern.source )
+			)
+			.filter( filterOutDuplicatesByName )
+			.filter( ( pattern ) => pattern.inserter !== false )
+			.map( ( pattern ) => ( {
+				...pattern,
+				keywords: pattern.keywords || [],
+				type: PATTERN_TYPES.theme,
+				blocks: parse( pattern.content, {
+					__unstableSkipMigrationLogs: true,
+				} ),
+			} ) );
+		return {
+			patterns,
+			isResolving: isResolvingSelector( 'getBlockPatterns' ),
+		};
+	},
+	( select ) => [
+		select( coreStore ).getBlockPatterns(),
+		select( coreStore ).isResolving( 'getBlockPatterns' ),
+		unlock( select( editSiteStore ) ).getSettings(),
+	]
+);
+
+const selectPatterns = createSelector(
+	( select, categoryId, syncStatus, search = '' ) => {
+		const {
+			patterns: themePatterns,
+			isResolving: isResolvingThemePatterns,
+		} = selectThemePatterns( select );
+		const {
+			patterns: userPatterns,
+			isResolving: isResolvingUserPatterns,
+			categories: userPatternCategories,
+		} = selectUserPatterns( select );
+
+		let patterns = [
+			...( themePatterns || [] ),
+			...( userPatterns || [] ),
+		];
+
+		if ( syncStatus ) {
+			// User patterns can have their sync statuses checked directly
+			// Non-user patterns are all unsynced for the time being.
+			patterns = patterns.filter( ( pattern ) => {
+				return pattern.type === PATTERN_TYPES.user
+					? ( pattern.wp_pattern_sync_status ||
+							PATTERN_SYNC_TYPES.full ) === syncStatus
+					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
+			} );
+		}
+
+		if ( categoryId ) {
+			patterns = searchItems( patterns, search, {
+				categoryId,
+				hasCategory: ( item, currentCategory ) => {
+					if ( item.type === PATTERN_TYPES.user ) {
+						return item.wp_pattern_category?.some(
+							( catId ) =>
+								userPatternCategories.find(
+									( cat ) => cat.id === catId
+								)?.slug === currentCategory
+						);
+					}
+					return item.categories?.includes( currentCategory );
+				},
+			} );
+		} else {
+			patterns = searchItems( patterns, search, {
+				hasCategory: ( item ) => {
+					if ( item.type === PATTERN_TYPES.user ) {
+						return (
+							userPatternCategories?.length &&
+							( ! item.wp_pattern_category?.length ||
+								! item.wp_pattern_category?.some( ( catId ) =>
+									userPatternCategories.find(
+										( cat ) => cat.id === catId
+									)
+								) )
+						);
+					}
+
+					return ! item.hasOwnProperty( 'categories' );
+				},
+			} );
+		}
+		return {
+			patterns,
+			isResolving: isResolvingThemePatterns || isResolvingUserPatterns,
+		};
+	},
+	( select ) => [
+		selectThemePatterns( select ),
+		selectUserPatterns( select ),
+	]
+);
+
+const selectUserPatterns = createSelector(
+	( select, syncStatus, search = '' ) => {
+		const {
+			getEntityRecords,
+			isResolving: isResolvingSelector,
+			getUserPatternCategories,
+		} = select( coreStore );
+
+		const query = { per_page: -1 };
+		const patternPosts = getEntityRecords(
+			'postType',
+			PATTERN_TYPES.user,
+			query
+		);
+		const userPatternCategories = getUserPatternCategories();
+		const categories = new Map();
+		userPatternCategories.forEach( ( userCategory ) =>
+			categories.set( userCategory.id, userCategory )
+		);
+		let patterns = patternPosts ?? EMPTY_PATTERN_LIST;
+		const isResolving = isResolvingSelector( 'getEntityRecords', [
+			'postType',
+			PATTERN_TYPES.user,
+			query,
+		] );
+
+		if ( syncStatus ) {
+			patterns = patterns.filter(
+				( pattern ) =>
+					pattern.wp_pattern_sync_status ||
+					PATTERN_SYNC_TYPES.full === syncStatus
+			);
+		}
+
+		patterns = searchItems( patterns, search, {
+			// We exit user pattern retrieval early if we aren't in the
+			// catch-all category for user created patterns, so it has
+			// to be in the category.
+			hasCategory: () => true,
+		} );
+
+		return {
+			patterns,
+			isResolving,
+			categories: userPatternCategories,
+		};
+	},
+	( select ) => [
+		select( coreStore ).getEntityRecords( 'postType', PATTERN_TYPES.user, {
+			per_page: -1,
+		} ),
+		select( coreStore ).isResolving( 'getEntityRecords', [
+			'postType',
+			PATTERN_TYPES.user,
+			{ per_page: -1 },
+		] ),
+		select( coreStore ).getUserPatternCategories(),
+	]
+);
+
+export function useAugmentPatternsWithPermissions( patterns ) {
+	const idsAndTypes = useMemo(
+		() =>
+			patterns
+				?.filter( ( record ) => record.type !== PATTERN_TYPES.theme )
+				.map( ( record ) => [ record.type, record.id ] ) ?? [],
+		[ patterns ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordPermissions } = unlock(
+				select( coreStore )
+			);
+			return idsAndTypes.reduce( ( acc, [ type, id ] ) => {
+				acc[ id ] = getEntityRecordPermissions( 'postType', type, id );
+				return acc;
+			}, {} );
+		},
+		[ idsAndTypes ]
+	);
+
+	return useMemo(
+		() =>
+			patterns?.map( ( record ) => ( {
+				...record,
+				permissions: permissions?.[ record.id ] ?? {},
+			} ) ) ?? [],
+		[ patterns, permissions ]
+	);
+}
+
+export const usePatterns = (
+	postType,
+	categoryId,
+	{ search = '', syncStatus } = {}
+) => {
+	return useSelect(
+		( select ) => {
+			if ( postType === TEMPLATE_PART_POST_TYPE ) {
+				return selectTemplateParts( select, categoryId, search );
+			} else if ( postType === PATTERN_TYPES.user && !! categoryId ) {
+				const appliedCategory =
+					categoryId === 'uncategorized' ? '' : categoryId;
+				return selectPatterns(
+					select,
+					appliedCategory,
+					syncStatus,
+					search
+				);
+			} else if ( postType === PATTERN_TYPES.user ) {
+				return selectUserPatterns( select, syncStatus, search );
+			}
+			return {
+				patterns: EMPTY_PATTERN_LIST,
+				isResolving: false,
+			};
+		},
+		[ categoryId, postType, search, syncStatus ]
+	);
+};
+
+export default usePatterns;
diff --git a/packages/edit-site/src/components/page-patterns/utils.js b/packages/edit-site/src/components/page-patterns/utils.js
new file mode 100644
index 00000000000000..f400d9855c5136
--- /dev/null
+++ b/packages/edit-site/src/components/page-patterns/utils.js
@@ -0,0 +1,2 @@
+export const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+	index === items.findIndex( ( item ) => currentItem.name === item.name );
diff --git a/packages/edit-site/src/components/page-templates/fields.js b/packages/edit-site/src/components/page-templates/fields.js
new file mode 100644
index 00000000000000..88c20ff27ebbce
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/fields.js
@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { EditorProvider } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { useAddedBy } from './hooks';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { unlock } from '../../lock-unlock';
+
+const { useLink } = unlock( routerPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function PreviewField( { item } ) {
+	const settings = usePatternSettings();
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const blocks = useMemo( () => {
+		return parse( item.content.raw );
+	}, [ item.content.raw ] );
+	const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );
+
+	const isEmpty = ! blocks?.length;
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<EditorProvider post={ item } settings={ settings }>
+			<div
+				className="page-templates-preview-field"
+				style={ { backgroundColor } }
+			>
+				<button
+					className="page-templates-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || item.title }
+				>
+					{ isEmpty && __( 'Empty template' ) }
+					{ ! isEmpty && (
+						<BlockPreview.Async>
+							<BlockPreview blocks={ blocks } />
+						</BlockPreview.Async>
+					) }
+				</button>
+			</div>
+		</EditorProvider>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+export const descriptionField = {
+	label: __( 'Description' ),
+	id: 'description',
+	render: ( { item } ) => {
+		return (
+			item.description && (
+				<span className="page-templates-description">
+					{ decodeEntities( item.description ) }
+				</span>
+			)
+		);
+	},
+	enableSorting: false,
+	enableGlobalSearch: true,
+};
+
+function AuthorField( { item } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export const authorField = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: AuthorField,
+};
diff --git a/packages/edit-site/src/components/page-templates/hooks.js b/packages/edit-site/src/components/page-templates/hooks.js
new file mode 100644
index 00000000000000..3cf2d78a59ee99
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/hooks.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	commentAuthorAvatar as authorIcon,
+	layout as themeIcon,
+	plugins as pluginIcon,
+	globe as globeIcon,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from '../../utils/constants';
+
+/** @typedef {'wp_template'|'wp_template_part'} TemplateType */
+
+/**
+ * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
+ *
+ * @typedef AddedByData
+ * @type {Object}
+ * @property {AddedByType}  type         The type of the data.
+ * @property {JSX.Element}  icon         The icon to display.
+ * @property {string}       [imageUrl]   The optional image URL to display.
+ * @property {string}       [text]       The text to display.
+ * @property {boolean}      isCustomized Whether the template has been customized.
+ *
+ * @param    {TemplateType} postType     The template post type.
+ * @param    {number}       postId       The template post id.
+ * @return {AddedByData} The added by object or null.
+ */
+export function useAddedBy( postType, postId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				getMedia,
+				getUser,
+				getEditedEntityRecord,
+			} = select( coreStore );
+			const template = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			const originalSource = template?.original_source;
+			const authorText = template?.author_text;
+
+			switch ( originalSource ) {
+				case 'theme': {
+					return {
+						type: originalSource,
+						icon: themeIcon,
+						text: authorText,
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
+					};
+				}
+				case 'plugin': {
+					return {
+						type: originalSource,
+						icon: pluginIcon,
+						text: authorText,
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
+					};
+				}
+				case 'site': {
+					const siteData = getEntityRecord(
+						'root',
+						'__unstableBase'
+					);
+					return {
+						type: originalSource,
+						icon: globeIcon,
+						imageUrl: siteData?.site_logo
+							? getMedia( siteData.site_logo )?.source_url
+							: undefined,
+						text: authorText,
+						isCustomized: false,
+					};
+				}
+				default: {
+					const user = getUser( template.author );
+					return {
+						type: 'user',
+						icon: authorIcon,
+						imageUrl: user?.avatar_urls?.[ 48 ],
+						text: authorText,
+						isCustomized: false,
+					};
+				}
+			}
+		},
+		[ postType, postId ]
+	);
+}
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
new file mode 100644
index 00000000000000..0c62b9eb450acc
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -0,0 +1,213 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { privateApis as corePrivateApis } from '@wordpress/core-data';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { templateTitleField } from '@wordpress/fields';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import AddNewTemplate from '../add-new-template';
+import {
+	TEMPLATE_POST_TYPE,
+	OPERATOR_IS_ANY,
+	LAYOUT_GRID,
+	LAYOUT_TABLE,
+	LAYOUT_LIST,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
+import { authorField, descriptionField, previewField } from './fields';
+
+const { usePostActions } = unlock( editorPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
+
+const EMPTY_ARRAY = [];
+
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {
+		showMedia: false,
+		layout: {
+			styles: {
+				author: {
+					width: '1%',
+				},
+			},
+		},
+	},
+	[ LAYOUT_GRID ]: {
+		showMedia: true,
+	},
+	[ LAYOUT_LIST ]: {
+		showMedia: false,
+	},
+};
+
+const DEFAULT_VIEW = {
+	type: LAYOUT_GRID,
+	search: '',
+	page: 1,
+	perPage: 20,
+	sort: {
+		field: 'title',
+		direction: 'asc',
+	},
+	titleField: 'title',
+	descriptionField: 'description',
+	mediaField: 'preview',
+	fields: [ 'author' ],
+	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
+};
+
+export default function PageTemplates() {
+	const { path, query } = useLocation();
+	const { activeView = 'all', layout, postId } = query;
+	const [ selection, setSelection ] = useState( [ postId ] );
+
+	const defaultView = useMemo( () => {
+		const usedType = layout ?? DEFAULT_VIEW.type;
+		return {
+			...DEFAULT_VIEW,
+			type: usedType,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: 'isAny',
+								value: [ activeView ],
+							},
+					  ]
+					: [],
+			...defaultLayouts[ usedType ],
+		};
+	}, [ layout, activeView ] );
+	const [ view, setView ] = useState( defaultView );
+	useEffect( () => {
+		const usedType = layout ?? DEFAULT_VIEW.type;
+		setView( ( currentView ) => ( {
+			...currentView,
+			type: usedType,
+			filters:
+				activeView !== 'all'
+					? [
+							{
+								field: 'author',
+								operator: OPERATOR_IS_ANY,
+								value: [ activeView ],
+							},
+					  ]
+					: [],
+		} ) );
+	}, [ activeView, layout ] );
+
+	const { records, isResolving: isLoadingData } =
+		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+	const history = useHistory();
+	const onChangeSelection = useCallback(
+		( items ) => {
+			setSelection( items );
+			if ( view?.type === LAYOUT_LIST ) {
+				history.navigate(
+					addQueryArgs( path, {
+						postId: items.length === 1 ? items[ 0 ] : undefined,
+					} )
+				);
+			}
+		},
+		[ history, path, view?.type ]
+	);
+
+	const authors = useMemo( () => {
+		if ( ! records ) {
+			return EMPTY_ARRAY;
+		}
+		const authorsSet = new Set();
+		records.forEach( ( template ) => {
+			authorsSet.add( template.author_text );
+		} );
+		return Array.from( authorsSet ).map( ( author ) => ( {
+			value: author,
+			label: author,
+		} ) );
+	}, [ records ] );
+
+	const fields = useMemo(
+		() => [
+			previewField,
+			templateTitleField,
+			descriptionField,
+			{
+				...authorField,
+				elements: authors,
+			},
+		],
+		[ authors ]
+	);
+
+	const { data, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( records, view, fields );
+	}, [ records, view, fields ] );
+
+	const postTypeActions = usePostActions( {
+		postType: TEMPLATE_POST_TYPE,
+		context: 'list',
+	} );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
+	);
+
+	const onChangeView = useCallback(
+		( newView ) => {
+			if ( newView.type !== view.type ) {
+				history.navigate(
+					addQueryArgs( path, {
+						layout: newView.type,
+					} )
+				);
+			}
+
+			setView( newView );
+		},
+		[ view.type, setView, history, path ]
+	);
+
+	return (
+		<Page
+			className="edit-site-page-templates"
+			title={ __( 'Templates' ) }
+			actions={ <AddNewTemplate /> }
+		>
+			<DataViews
+				key={ activeView }
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ data }
+				isLoading={ isLoadingData }
+				view={ view }
+				onChangeView={ onChangeView }
+				onChangeSelection={ onChangeSelection }
+				isItemClickable={ () => true }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				} }
+				selection={ selection }
+				defaultLayouts={ defaultLayouts }
+			/>
+		</Page>
+	);
+}
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
new file mode 100644
index 00000000000000..4432cf6bec4923
--- /dev/null
+++ b/packages/edit-site/src/components/page-templates/style.scss
@@ -0,0 +1,125 @@
+.page-templates-preview-field {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	border-radius: $radius-medium;
+
+	.page-templates-preview-field__button {
+		box-shadow: none;
+		border: none;
+		padding: 0;
+		background-color: unset;
+		box-sizing: border-box;
+		cursor: pointer;
+		overflow: hidden;
+		height: 100%;
+		border-radius: $radius-medium;
+
+		&:focus-visible {
+			box-shadow: 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;
+		}
+	}
+
+	.dataviews-view-list & {
+		.block-editor-block-preview__container {
+			height: 120px;
+		}
+	}
+
+	.dataviews-view-grid & {
+		.block-editor-block-preview__container {
+			height: 100%;
+		}
+	}
+
+	.dataviews-view-table & {
+		position: relative;
+		width: 120px;
+		max-height: 160px;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+			border-radius: $radius-medium;
+		}
+	}
+}
+
+.page-templates-description {
+	max-width: 50em;
+	text-wrap: balance; // Fallback for Safari
+	text-wrap: pretty;
+
+	.dataviews-view-table & {
+		margin-bottom: $grid-unit-10;
+		display: block;
+	}
+}
+
+.edit-site-page-templates {
+	.dataviews-pagination {
+		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
+	}
+}
+
+
+.page-templates-author-field__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: left;
+	display: flex;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+		border-radius: 100%;
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.page-templates-author-field__icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		margin-left: -$grid-unit-05;
+		fill: currentColor;
+	}
+}
+
+.page-templates-author-field__name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.edit-site-list__rename-modal {
+	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
+	z-index: z-index(".edit-site-list__rename-modal");
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
new file mode 100644
index 00000000000000..92bf18f96c4966
--- /dev/null
+++ b/packages/edit-site/src/components/page/header.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+export default function Header( { title, subTitle, actions } ) {
+	return (
+		<VStack className="edit-site-page-header" as="header" spacing={ 0 }>
+			<HStack className="edit-site-page-header__page-title">
+				<Heading
+					as="h2"
+					level={ 3 }
+					weight={ 500 }
+					className="edit-site-page-header__title"
+					truncate
+				>
+					{ title }
+				</Heading>
+				<FlexItem className="edit-site-page-header__actions">
+					{ actions }
+				</FlexItem>
+			</HStack>
+			{ subTitle && (
+				<Text
+					variant="muted"
+					as="p"
+					className="edit-site-page-header__sub-title"
+				>
+					{ subTitle }
+				</Text>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js
new file mode 100644
index 00000000000000..6609abb8f52449
--- /dev/null
+++ b/packages/edit-site/src/components/page/index.js
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+import { unlock } from '../../lock-unlock';
+
+const { NavigableRegion } = unlock( editorPrivateApis );
+
+export default function Page( {
+	title,
+	subTitle,
+	actions,
+	children,
+	className,
+	hideTitleFromUI = false,
+} ) {
+	const classes = clsx( 'edit-site-page', className );
+
+	return (
+		<NavigableRegion className={ classes } ariaLabel={ title }>
+			<div className="edit-site-page-content">
+				{ ! hideTitleFromUI && title && (
+					<Header
+						title={ title }
+						subTitle={ subTitle }
+						actions={ actions }
+					/>
+				) }
+				{ children }
+			</div>
+		</NavigableRegion>
+	);
+}
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
new file mode 100644
index 00000000000000..03e062a576b6e6
--- /dev/null
+++ b/packages/edit-site/src/components/page/style.scss
@@ -0,0 +1,57 @@
+.edit-site-page {
+	color: $gray-800;
+	background: $white;
+	height: calc(100% - #{$header-height});
+	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
+	container: edit-site-page / inline-size;
+	transition: width ease-out 0.2s;
+	@include reduce-motion("transition");
+
+	@include break-medium() {
+		height: 100%;
+	}
+}
+
+.edit-site-page-header {
+	padding: $grid-unit-20 $grid-unit-60;
+	border-bottom: 1px solid $gray-100;
+	background: $white;
+	position: sticky;
+	top: 0;
+	z-index: z-index(".edit-site-page-header");
+	transition: padding ease-out 0.1s;
+	@include reduce-motion("transition");
+
+	.components-heading {
+		color: $gray-900;
+	}
+
+	.edit-site-page-header__page-title {
+		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
+	}
+
+	.edit-site-page-header__sub-title {
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.edit-site-page-header {
+		padding: $grid-unit-20 $grid-unit-30;
+	}
+}
+
+.edit-site-page-content {
+	height: 100%;
+	display: flex;
+	flex-flow: column;
+	position: relative;
+	z-index: z-index(".edit-site-page-content");
+}
diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
new file mode 100644
index 00000000000000..5d6ce852d5a4c4
--- /dev/null
+++ b/packages/edit-site/src/components/pagination/index.js
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
+import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
+
+export default function Pagination( {
+	currentPage,
+	numPages,
+	changePage,
+	totalItems,
+	className,
+	disabled = false,
+	buttonVariant = 'tertiary',
+	label = __( 'Pagination Navigation' ),
+} ) {
+	return (
+		<HStack
+			expanded={ false }
+			as="nav"
+			aria-label={ label }
+			spacing={ 3 }
+			justify="flex-start"
+			className={ clsx( 'edit-site-pagination', className ) }
+		>
+			<Text variant="muted" className="edit-site-pagination__total">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === 1 }
+					label={ __( 'First page' ) }
+					icon={ isRTL() ? next : previous }
+					size="compact"
+				/>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( currentPage - 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === 1 }
+					label={ __( 'Previous page' ) }
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					size="compact"
+				/>
+			</HStack>
+			<Text variant="muted">
+				{ sprintf(
+					// translators: 1: Current page number. 2: Total number of pages.
+					_x( '%1$s of %2$s', 'paging' ),
+					currentPage,
+					numPages
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( currentPage + 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === numPages }
+					label={ __( 'Next page' ) }
+					icon={ isRTL() ? chevronLeft : chevronRight }
+					size="compact"
+				/>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( numPages ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === numPages }
+					label={ __( 'Last page' ) }
+					icon={ isRTL() ? previous : next }
+					size="compact"
+				/>
+			</HStack>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/pagination/style.scss b/packages/edit-site/src/components/pagination/style.scss
new file mode 100644
index 00000000000000..c74d54a70930f3
--- /dev/null
+++ b/packages/edit-site/src/components/pagination/style.scss
@@ -0,0 +1,5 @@
+.edit-site-pagination .components-button.is-tertiary {
+	width: $button-size-compact;
+	height: $button-size-compact;
+	justify-content: center;
+}
diff --git a/packages/edit-site/src/components/plugin-template-setting-panel/index.js b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
new file mode 100644
index 00000000000000..5183350c633863
--- /dev/null
+++ b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
@@ -0,0 +1,54 @@
+/**
+ * Defines an extensibility slot for the Template sidebar.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { createSlotFill } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
+
+const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' );
+
+const PluginTemplateSettingPanel = ( { children } ) => {
+	deprecated( 'wp.editSite.PluginTemplateSettingPanel', {
+		since: '6.6',
+		version: '6.8',
+		alternative: 'wp.editor.PluginDocumentSettingPanel',
+	} );
+	const isCurrentEntityTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getCurrentPostType() === 'wp_template',
+		[]
+	);
+	if ( ! isCurrentEntityTemplate ) {
+		return null;
+	}
+	return <Fill>{ children }</Fill>;
+};
+
+PluginTemplateSettingPanel.Slot = Slot;
+
+/**
+ * Renders items in the Template Sidebar below the main information
+ * like the Template Card.
+ *
+ * @deprecated since 6.6. Use `wp.editor.PluginDocumentSettingPanel` instead.
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { PluginTemplateSettingPanel } from '@wordpress/edit-site';
+ *
+ * const MyTemplateSettingTest = () => (
+ * 		<PluginTemplateSettingPanel>
+ *			<p>Hello, World!</p>
+ *		</PluginTemplateSettingPanel>
+ *	);
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default PluginTemplateSettingPanel;
diff --git a/packages/edit-site/src/components/post-edit/header.js b/packages/edit-site/src/components/post-edit/header.js
new file mode 100644
index 00000000000000..305589d0cc22bf
--- /dev/null
+++ b/packages/edit-site/src/components/post-edit/header.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Icon,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import {
+	privateApis as editorPrivateApis,
+	store as editorStore,
+} from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { sprintf, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { PostCardPanel } = unlock( editorPrivateApis );
+
+export default function PostEditHeader( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { icon, labels } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getPostType } = select( coreStore );
+			const { getPostIcon } = unlock( select( editorStore ) );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				ids[ 0 ]
+			);
+
+			return {
+				icon: getPostIcon( postType, {
+					area: _record?.area,
+				} ),
+				labels: getPostType( postType )?.labels,
+			};
+		},
+		[ ids, postType ]
+	);
+
+	if ( ids.length === 1 ) {
+		return (
+			<PostCardPanel
+				postType={ postType }
+				postId={ parseInt( ids[ 0 ], 10 ) }
+			/>
+		);
+	}
+
+	return (
+		<VStack spacing={ 1 } className="edit-site-post-edit-header">
+			<HStack spacing={ 2 } align="center" justify="normal">
+				<Icon
+					className="edit-site-post-edit-header__icon"
+					icon={ icon }
+				/>
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="edit-site-post-edit-header__title"
+					as="h2"
+				>
+					{ labels?.name &&
+						sprintf(
+							// translators: %i number of selected items %s: Name of the plural post type e.g: "Posts".
+							__( '%i %s' ),
+							ids.length,
+							labels?.name
+						) }
+				</Text>
+			</HStack>
+			<Text className="edit-site-post-edit-header__description">
+				{ sprintf(
+					// translators: %s: Name of the plural post type e.g: "Posts".
+					__( 'Changes will be applied to all selected %s.' ),
+					labels?.name.toLowerCase()
+				) }
+			</Text>
+		</VStack>
+	);
+}
diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
new file mode 100644
index 00000000000000..b3954e4ddbdeaf
--- /dev/null
+++ b/packages/edit-site/src/components/post-edit/index.js
@@ -0,0 +1,187 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import PostEditHeader from '../post-edit/header';
+import { unlock } from '../../lock-unlock';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+const { usePostFields } = unlock( editorPrivateApis );
+
+const fieldsWithBulkEditSupport = [
+	'title',
+	'status',
+	'date',
+	'author',
+	'comment_status',
+];
+
+function PostEditForm( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { record } = useSelect(
+		( select ) => {
+			return {
+				record:
+					ids.length === 1
+						? select( coreDataStore ).getEditedEntityRecord(
+								'postType',
+								postType,
+								ids[ 0 ]
+						  )
+						: null,
+			};
+		},
+		[ postType, ids ]
+	);
+	const [ multiEdits, setMultiEdits ] = useState( {} );
+	const { editEntityRecord } = useDispatch( coreDataStore );
+	const { fields: _fields } = usePostFields( { postType } );
+	const fields = useMemo(
+		() =>
+			_fields?.map( ( field ) => {
+				if ( field.id === 'status' ) {
+					return {
+						...field,
+						elements: field.elements.filter(
+							( element ) => element.value !== 'trash'
+						),
+					};
+				}
+				return field;
+			} ),
+		[ _fields ]
+	);
+
+	const form = useMemo(
+		() => ( {
+			type: 'panel',
+			fields: [
+				{
+					id: 'featured_media',
+					layout: 'regular',
+				},
+				{
+					id: 'status',
+					label: __( 'Status & Visibility' ),
+					children: [ 'status', 'password' ],
+				},
+				'author',
+				'date',
+				'slug',
+				'parent',
+				'comment_status',
+				{
+					label: __( 'Template' ),
+					labelPosition: 'side',
+					id: 'template',
+					layout: 'regular',
+				},
+			].filter(
+				( field ) =>
+					ids.length === 1 ||
+					fieldsWithBulkEditSupport.includes( field )
+			),
+		} ),
+		[ ids ]
+	);
+	const onChange = ( edits ) => {
+		for ( const id of ids ) {
+			if (
+				edits.status &&
+				edits.status !== 'future' &&
+				record?.status === 'future' &&
+				new Date( record.date ) > new Date()
+			) {
+				edits.date = null;
+			}
+			if (
+				edits.status &&
+				edits.status === 'private' &&
+				record.password
+			) {
+				edits.password = '';
+			}
+			editEntityRecord( 'postType', postType, id, edits );
+			if ( ids.length > 1 ) {
+				setMultiEdits( ( prev ) => ( {
+					...prev,
+					...edits,
+				} ) );
+			}
+		}
+	};
+	useEffect( () => {
+		setMultiEdits( {} );
+	}, [ ids ] );
+
+	const { ExperimentalBlockEditorProvider } = unlock(
+		blockEditorPrivateApis
+	);
+	const settings = usePatternSettings();
+
+	/**
+	 * The template field depends on the block editor settings.
+	 * This is a workaround to ensure that the block editor settings are available.
+	 * For more information, see: https://github.com/WordPress/gutenberg/issues/67521
+	 */
+	const fieldsWithDependency = useMemo( () => {
+		return fields.map( ( field ) => {
+			if ( field.id === 'template' ) {
+				return {
+					...field,
+					Edit: ( data ) => (
+						<ExperimentalBlockEditorProvider settings={ settings }>
+							<field.Edit { ...data } />
+						</ExperimentalBlockEditorProvider>
+					),
+				};
+			}
+			return field;
+		} );
+	}, [ fields, settings ] );
+
+	return (
+		<VStack spacing={ 4 }>
+			<PostEditHeader postType={ postType } postId={ postId } />
+			<DataForm
+				data={ ids.length === 1 ? record : multiEdits }
+				fields={ fieldsWithDependency }
+				form={ form }
+				onChange={ onChange }
+			/>
+		</VStack>
+	);
+}
+
+export function PostEdit( { postType, postId } ) {
+	return (
+		<Page
+			className={ clsx( 'edit-site-post-edit', {
+				'is-empty': ! postId,
+			} ) }
+			label={ __( 'Post Edit' ) }
+		>
+			{ postId && (
+				<PostEditForm postType={ postType } postId={ postId } />
+			) }
+			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+		</Page>
+	);
+}
diff --git a/packages/edit-site/src/components/post-edit/style.scss b/packages/edit-site/src/components/post-edit/style.scss
new file mode 100644
index 00000000000000..5a20183c8f0210
--- /dev/null
+++ b/packages/edit-site/src/components/post-edit/style.scss
@@ -0,0 +1,26 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.dataforms-layouts-panel__field-dropdown {
+	.fields-controls__password {
+		border-top: $border-width solid $gray-200;
+		padding-top: $grid-unit-20;
+	}
+}
+
+.edit-site-post-edit-header {
+	.edit-site-post-edit-header__description {
+		color: $gray-700;
+	}
+
+	.edit-site-post-edit-header__title {
+		@include heading-medium();
+	}
+}
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
new file mode 100644
index 00000000000000..145a5e8243ac54
--- /dev/null
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -0,0 +1,437 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import {
+	store as coreStore,
+	privateApis as coreDataPrivateApis,
+} from '@wordpress/core-data';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { drawerRight } from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import {
+	useDefaultViews,
+	defaultLayouts,
+} from '../sidebar-dataviews/default-views';
+import {
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	LAYOUT_LIST,
+} from '../../utils/constants';
+
+import AddNewPostModal from '../add-new-post';
+import { unlock } from '../../lock-unlock';
+import { useEditPostAction } from '../dataviews-actions';
+
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
+const EMPTY_ARRAY = [];
+
+const getDefaultView = ( defaultViews, activeView ) => {
+	return defaultViews.find( ( { slug } ) => slug === activeView )?.view;
+};
+
+const getCustomView = ( editedEntityRecord ) => {
+	if ( ! editedEntityRecord?.content ) {
+		return undefined;
+	}
+
+	const content = JSON.parse( editedEntityRecord.content );
+	if ( ! content ) {
+		return undefined;
+	}
+
+	return {
+		...content,
+		...defaultLayouts[ content.type ],
+	};
+};
+
+/**
+ * This function abstracts working with default & custom views by
+ * providing a [ state, setState ] tuple based on the URL parameters.
+ *
+ * Consumers use the provided tuple to work with state
+ * and don't have to deal with the specifics of default & custom views.
+ *
+ * @param {string} postType Post type to retrieve default views for.
+ * @return {Array} The [ state, setState ] tuple.
+ */
+function useView( postType ) {
+	const {
+		path,
+		query: { activeView = 'all', isCustom = 'false', layout },
+	} = useLocation();
+	const history = useHistory();
+
+	const defaultViews = useDefaultViews( { postType } );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const editedEntityRecord = useSelect(
+		( select ) => {
+			if ( isCustom !== 'true' ) {
+				return undefined;
+			}
+
+			const { getEditedEntityRecord } = select( coreStore );
+			return getEditedEntityRecord(
+				'postType',
+				'wp_dataviews',
+				Number( activeView )
+			);
+		},
+		[ activeView, isCustom ]
+	);
+	const [ view, setView ] = useState( () => {
+		let initialView;
+		if ( isCustom === 'true' ) {
+			initialView = getCustomView( editedEntityRecord ) ?? {
+				type: layout ?? LAYOUT_LIST,
+			};
+		} else {
+			initialView = getDefaultView( defaultViews, activeView ) ?? {
+				type: layout ?? LAYOUT_LIST,
+			};
+		}
+
+		const type = layout ?? initialView.type;
+		return {
+			...initialView,
+			type,
+		};
+	} );
+
+	const setViewWithUrlUpdate = useCallback(
+		( newView ) => {
+			if ( newView.type === LAYOUT_LIST && ! layout ) {
+				// Skip updating the layout URL param if
+				// it is not present and the newView.type is LAYOUT_LIST.
+			} else if ( newView.type !== layout ) {
+				history.navigate(
+					addQueryArgs( path, {
+						layout: newView.type,
+					} )
+				);
+			}
+
+			setView( newView );
+
+			if ( isCustom === 'true' && editedEntityRecord?.id ) {
+				editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					editedEntityRecord?.id,
+					{
+						content: JSON.stringify( newView ),
+					}
+				);
+			}
+		},
+		[
+			history,
+			isCustom,
+			editEntityRecord,
+			editedEntityRecord?.id,
+			layout,
+			path,
+		]
+	);
+
+	// When layout URL param changes, update the view type
+	// without affecting any other config.
+	useEffect( () => {
+		setView( ( prevView ) => ( {
+			...prevView,
+			type: layout ?? LAYOUT_LIST,
+		} ) );
+	}, [ layout ] );
+
+	// When activeView or isCustom URL parameters change, reset the view.
+	useEffect( () => {
+		let newView;
+		if ( isCustom === 'true' ) {
+			newView = getCustomView( editedEntityRecord );
+		} else {
+			newView = getDefaultView( defaultViews, activeView );
+		}
+
+		if ( newView ) {
+			const type = layout ?? newView.type;
+			setView( {
+				...newView,
+				type,
+			} );
+		}
+	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
+
+	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
+}
+
+const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
+
+function getItemId( item ) {
+	return item.id.toString();
+}
+
+export default function PostList( { postType } ) {
+	const [ view, setView ] = useView( postType );
+	const defaultViews = useDefaultViews( { postType } );
+	const history = useHistory();
+	const location = useLocation();
+	const {
+		postId,
+		quickEdit = false,
+		isCustom,
+		activeView = 'all',
+	} = location.query;
+	const [ selection, setSelection ] = useState( postId?.split( ',' ) ?? [] );
+	const onChangeSelection = useCallback(
+		( items ) => {
+			setSelection( items );
+			if ( ( location.query.isCustom ?? 'false' ) === 'false' ) {
+				history.navigate(
+					addQueryArgs( location.path, {
+						postId: items.join( ',' ),
+					} )
+				);
+			}
+		},
+		[ location.path, location.query.isCustom, history ]
+	);
+
+	const getActiveViewFilters = ( views, match ) => {
+		const found = views.find( ( { slug } ) => slug === match );
+		return found?.filters ?? [];
+	};
+
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields( {
+		postType,
+	} );
+	const fields = useMemo( () => {
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		).map( ( { field } ) => field );
+		return _fields.map( ( field ) => ( {
+			...field,
+			elements: activeViewFilters.includes( field.id )
+				? []
+				: field.elements,
+		} ) );
+	}, [ _fields, defaultViews, activeView ] );
+
+	const queryArgs = useMemo( () => {
+		const filters = {};
+		view.filters?.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_NONE
+			) {
+				filters.author_exclude = filter.value;
+			}
+		} );
+
+		// The bundled views want data filtered without displaying the filter.
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		);
+		activeViewFilters.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_NONE
+			) {
+				filters.author_exclude = filter.value;
+			}
+		} );
+
+		// We want to provide a different default item for the status filter
+		// than the REST API provides.
+		if ( ! filters.status || filters.status === '' ) {
+			filters.status = DEFAULT_STATUSES;
+		}
+
+		return {
+			per_page: view.perPage,
+			page: view.page,
+			_embed: 'author',
+			order: view.sort?.direction,
+			orderby: view.sort?.field,
+			search: view.search,
+			...filters,
+		};
+	}, [ view, activeView, defaultViews ] );
+	const {
+		records,
+		isResolving: isLoadingData,
+		totalItems,
+		totalPages,
+	} = useEntityRecordsWithPermissions( 'postType', postType, queryArgs );
+
+	// The REST API sort the authors by ID, but we want to sort them by name.
+	const data = useMemo( () => {
+		if ( ! isLoadingFields && view?.sort?.field === 'author' ) {
+			return filterSortAndPaginate(
+				records,
+				{ sort: { ...view.sort } },
+				fields
+			).data;
+		}
+
+		return records;
+	}, [ records, fields, isLoadingFields, view?.sort ] );
+
+	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
+	const prevIds = usePrevious( ids ) ?? [];
+	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
+	const postIdWasDeleted = deletedIds.includes( postId );
+
+	useEffect( () => {
+		if ( postIdWasDeleted ) {
+			history.navigate(
+				addQueryArgs( location.path, {
+					postId: undefined,
+				} )
+			);
+		}
+	}, [ history, postIdWasDeleted, location.path ] );
+
+	const paginationInfo = useMemo(
+		() => ( {
+			totalItems,
+			totalPages,
+		} ),
+		[ totalItems, totalPages ]
+	);
+
+	const { labels, canCreateRecord } = useSelect(
+		( select ) => {
+			const { getPostType, canUser } = select( coreStore );
+			return {
+				labels: getPostType( postType )?.labels,
+				canCreateRecord: canUser( 'create', {
+					kind: 'postType',
+					name: postType,
+				} ),
+			};
+		},
+		[ postType ]
+	);
+
+	const postTypeActions = usePostActions( {
+		postType,
+		context: 'list',
+	} );
+	const editAction = useEditPostAction();
+	const actions = useMemo(
+		() => [ editAction, ...postTypeActions ],
+		[ postTypeActions, editAction ]
+	);
+
+	const [ showAddPostModal, setShowAddPostModal ] = useState( false );
+
+	const openModal = () => setShowAddPostModal( true );
+	const closeModal = () => setShowAddPostModal( false );
+	const handleNewPage = ( { type, id } ) => {
+		history.navigate( `/${ type }/${ id }?canvas=edit` );
+		closeModal();
+	};
+
+	return (
+		<Page
+			title={ labels?.name }
+			actions={
+				labels?.add_new_item &&
+				canCreateRecord && (
+					<>
+						<Button
+							variant="primary"
+							onClick={ openModal }
+							__next40pxDefaultSize
+						>
+							{ labels.add_new_item }
+						</Button>
+						{ showAddPostModal && (
+							<AddNewPostModal
+								postType={ postType }
+								onSave={ handleNewPage }
+								onClose={ closeModal }
+							/>
+						) }
+					</>
+				)
+			}
+		>
+			<DataViews
+				key={ activeView + isCustom }
+				paginationInfo={ paginationInfo }
+				fields={ fields }
+				actions={ actions }
+				data={ data || EMPTY_ARRAY }
+				isLoading={ isLoadingData || isLoadingFields }
+				view={ view }
+				onChangeView={ setView }
+				selection={ selection }
+				onChangeSelection={ onChangeSelection }
+				isItemClickable={ ( item ) => item.status !== 'trash' }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/${ postType }/${ id }?canvas=edit` );
+				} }
+				getItemId={ getItemId }
+				defaultLayouts={ defaultLayouts }
+				header={
+					window.__experimentalQuickEditDataViews &&
+					view.type !== LAYOUT_LIST &&
+					postType === 'page' && (
+						<Button
+							size="compact"
+							isPressed={ quickEdit }
+							icon={ drawerRight }
+							label={ __( 'Details' ) }
+							onClick={ () => {
+								history.navigate(
+									addQueryArgs( location.path, {
+										quickEdit: quickEdit ? undefined : true,
+									} )
+								);
+							} }
+						/>
+					)
+				}
+			/>
+		</Page>
+	);
+}
diff --git a/packages/edit-site/src/components/post-list/style.scss b/packages/edit-site/src/components/post-list/style.scss
new file mode 100644
index 00000000000000..8ff7e31c79dd6f
--- /dev/null
+++ b/packages/edit-site/src/components/post-list/style.scss
@@ -0,0 +1,75 @@
+.edit-site-post-list__featured-image {
+	height: 100%;
+	object-fit: cover;
+	width: 100%;
+}
+
+.edit-site-post-list__featured-image-wrapper {
+	height: 100%;
+	width: 100%;
+	border-radius: $grid-unit-05;
+
+	&.is-layout-table:not(
+	:has(.edit-site-post-list__featured-image-button)
+),
+	&.is-layout-table .edit-site-post-list__featured-image-button {
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		display: block;
+		border-radius: $grid-unit-05;
+		position: relative;
+		overflow: hidden;
+		background-color: $gray-100;
+		flex-grow: 0 !important;
+
+		&::after {
+			border-radius: 4px;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+			content: "";
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
+}
+
+.edit-site-post-list__featured-image-button {
+	box-shadow: none;
+	border: none;
+	padding: 0;
+	background-color: unset;
+	box-sizing: border-box;
+	cursor: pointer;
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+	border-radius: $grid-unit-05;
+
+	&:focus-visible {
+		box-shadow:
+			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;
+	}
+}
+
+.dataviews-view-grid__card.is-selected {
+	.edit-site-post-list__featured-image-button::after {
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+}
+
+.edit-site-post-list__status-icon {
+	height: $grid-unit-30;
+	width: $grid-unit-30;
+	svg {
+		fill: currentColor;
+		margin-left: -$grid-unit-05;
+	}
+}
diff --git a/packages/edit-site/src/components/posts-app-routes/index.js b/packages/edit-site/src/components/posts-app-routes/index.js
new file mode 100644
index 00000000000000..3919ea3930d073
--- /dev/null
+++ b/packages/edit-site/src/components/posts-app-routes/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as siteEditorStore } from '../../store';
+import { postsRoute } from './posts';
+import { postItemRoute } from './post-item';
+
+const routes = [ postItemRoute, postsRoute ];
+
+export function useRegisterPostsAppRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}
diff --git a/packages/edit-site/src/components/posts-app-routes/post-item.js b/packages/edit-site/src/components/posts-app-routes/post-item.js
new file mode 100644
index 00000000000000..54131814f1ae22
--- /dev/null
+++ b/packages/edit-site/src/components/posts-app-routes/post-item.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+export const postItemRoute = {
+	name: 'post-item',
+	path: '/post/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent postType="post" /> }
+			/>
+		),
+		mobile: <Editor isPostsList />,
+		preview: <Editor isPostsList />,
+	},
+};
diff --git a/packages/edit-site/src/components/posts-app-routes/posts.js b/packages/edit-site/src/components/posts-app-routes/posts.js
new file mode 100644
index 00000000000000..80af8a75fbc800
--- /dev/null
+++ b/packages/edit-site/src/components/posts-app-routes/posts.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePostsView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="post" />;
+}
+
+export const postsRoute = {
+	name: 'posts',
+	path: '/',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Posts' ) }
+				isRoot
+				content={ <DataViewsSidebarContent postType="post" /> }
+			/>
+		),
+		content: <PostList postType="post" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor isPostsList /> : undefined;
+		},
+		mobile: <MobilePostsView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="post" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) === 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};
diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js
new file mode 100644
index 00000000000000..ab8cfab99f7628
--- /dev/null
+++ b/packages/edit-site/src/components/posts-app/index.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+import { useRegisterPostsAppRoutes } from '../posts-app-routes';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+
+export default function PostsApp() {
+	useRegisterPostsAppRoutes();
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
+	return (
+		<RouterProvider routes={ routes } pathArg="p">
+			<Layout />
+		</RouterProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/preferences-modal/enable-feature.js b/packages/edit-site/src/components/preferences-modal/enable-feature.js
deleted file mode 100644
index ca4a8a1bb1a327..00000000000000
--- a/packages/edit-site/src/components/preferences-modal/enable-feature.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-export default function EnableFeature( props ) {
-	const { featureName, ...remainingProps } = props;
-	const isChecked = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
-		[ featureName ]
-	);
-	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => toggle( 'core/edit-site', featureName );
-	return (
-		<BaseOption
-			onChange={ onChange }
-			isChecked={ isChecked }
-			{ ...remainingProps }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
deleted file mode 100644
index b022824570e677..00000000000000
--- a/packages/edit-site/src/components/preferences-modal/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	PreferencesModal,
-	PreferencesModalTabs,
-	PreferencesModalSection,
-} from '@wordpress/interface';
-import { useMemo } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import EnableFeature from './enable-feature';
-
-export default function EditSitePreferencesModal( {
-	isModalActive,
-	toggleModal,
-} ) {
-	const sections = useMemo( () => [
-		{
-			name: 'general',
-			tabLabel: __( 'General' ),
-			content: (
-				<PreferencesModalSection
-					title={ __( 'Appearance' ) }
-					description={ __(
-						'Customize options related to the block editor interface and editing flow.'
-					) }
-				>
-					<EnableFeature
-						featureName="focusMode"
-						help={ __(
-							'Highlights the current block and fades other content.'
-						) }
-						label={ __( 'Spotlight mode' ) }
-					/>
-					<EnableFeature
-						featureName="showIconLabels"
-						label={ __( 'Show button text labels' ) }
-						help={ __( 'Show text instead of icons on buttons.' ) }
-					/>
-					<EnableFeature
-						featureName="showListViewByDefault"
-						help={ __(
-							'Opens the block list view sidebar by default.'
-						) }
-						label={ __( 'Always open list view' ) }
-					/>
-				</PreferencesModalSection>
-			),
-		},
-		{
-			name: 'blocks',
-			tabLabel: __( 'Blocks' ),
-			content: (
-				<PreferencesModalSection
-					title={ __( 'Block interactions' ) }
-					description={ __(
-						'Customize how you interact with blocks in the block library and editing canvas.'
-					) }
-				>
-					<EnableFeature
-						featureName="keepCaretInsideBlock"
-						help={ __(
-							'Aids screen readers by stopping text caret from leaving blocks.'
-						) }
-						label={ __( 'Contain text cursor inside block' ) }
-					/>
-				</PreferencesModalSection>
-			),
-		},
-	] );
-	if ( ! isModalActive ) {
-		return null;
-	}
-	return (
-		<PreferencesModal closeModal={ toggleModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
-	);
-}
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
new file mode 100644
index 00000000000000..99f650971112fb
--- /dev/null
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -0,0 +1,342 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef } from '@wordpress/element';
+import {
+	ResizableBox,
+	Tooltip,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { useInstanceId, useReducedMotion } from '@wordpress/compose';
+import { __, isRTL } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { addQueryArgs } from '@wordpress/url';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDE = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+// The minimum width of the frame (in px) while resizing.
+const FRAME_MIN_WIDTH = 320;
+// The reference width of the frame (in px) used to calculate the aspect ratio.
+const FRAME_REFERENCE_WIDTH = 1300;
+// 9 : 19.5 is the target aspect ratio enforced (when possible) while resizing.
+const FRAME_TARGET_ASPECT_RATIO = 9 / 19.5;
+// The minimum distance (in px) between the frame resize handle and the
+// viewport's edge. If the frame is resized to be closer to the viewport's edge
+// than this distance, then "canvas mode" will be enabled.
+const SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD = 200;
+// Default size for the `frameSize` state.
+const INITIAL_FRAME_SIZE = { width: '100%', height: '100%' };
+
+function calculateNewHeight( width, initialAspectRatio ) {
+	const lerp = ( a, b, amount ) => {
+		return a + ( b - a ) * amount;
+	};
+
+	// Calculate the intermediate aspect ratio based on the current width.
+	const lerpFactor =
+		1 -
+		Math.max(
+			0,
+			Math.min(
+				1,
+				( width - FRAME_MIN_WIDTH ) /
+					( FRAME_REFERENCE_WIDTH - FRAME_MIN_WIDTH )
+			)
+		);
+
+	// Calculate the height based on the intermediate aspect ratio
+	// ensuring the frame arrives at the target aspect ratio.
+	const intermediateAspectRatio = lerp(
+		initialAspectRatio,
+		FRAME_TARGET_ASPECT_RATIO,
+		lerpFactor
+	);
+
+	return width / intermediateAspectRatio;
+}
+
+function ResizableFrame( {
+	isFullWidth,
+	isOversized,
+	setIsOversized,
+	isReady,
+	children,
+	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
+	defaultSize,
+	innerContentStyle,
+} ) {
+	const history = useHistory();
+	const { path, query } = useLocation();
+	const { canvas = 'view' } = query;
+	const disableMotion = useReducedMotion();
+	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
+	// The width of the resizable frame when a new resize gesture starts.
+	const [ startingWidth, setStartingWidth ] = useState();
+	const [ isResizing, setIsResizing ] = useState( false );
+	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
+	const [ resizeRatio, setResizeRatio ] = useState( 1 );
+
+	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
+	const frameRef = useRef( null );
+	const resizableHandleHelpId = useInstanceId(
+		ResizableFrame,
+		'edit-site-resizable-frame-handle-help'
+	);
+	const defaultAspectRatio = defaultSize.width / defaultSize.height;
+
+	const handleResizeStart = ( _event, _direction, ref ) => {
+		// Remember the starting width so we don't have to get `ref.offsetWidth` on
+		// every resize event thereafter, which will cause layout thrashing.
+		setStartingWidth( ref.offsetWidth );
+		setIsResizing( true );
+	};
+
+	// Calculate the frame size based on the window width as its resized.
+	const handleResize = ( _event, _direction, _ref, delta ) => {
+		const normalizedDelta = delta.width / resizeRatio;
+		const deltaAbs = Math.abs( normalizedDelta );
+		const maxDoubledDelta =
+			delta.width < 0 // is shrinking
+				? deltaAbs
+				: ( defaultSize.width - startingWidth ) / 2;
+		const deltaToDouble = Math.min( deltaAbs, maxDoubledDelta );
+		const doubleSegment = deltaAbs === 0 ? 0 : deltaToDouble / deltaAbs;
+		const singleSegment = 1 - doubleSegment;
+
+		setResizeRatio( singleSegment + doubleSegment * 2 );
+
+		const updatedWidth = startingWidth + delta.width;
+
+		setIsOversized( updatedWidth > defaultSize.width );
+
+		// Width will be controlled by the library (via `resizeRatio`),
+		// so we only need to update the height.
+		setFrameSize( {
+			height: isOversized
+				? '100%'
+				: calculateNewHeight( updatedWidth, defaultAspectRatio ),
+		} );
+	};
+
+	const handleResizeStop = ( _event, _direction, ref ) => {
+		setIsResizing( false );
+
+		if ( ! isOversized ) {
+			return;
+		}
+
+		setIsOversized( false );
+
+		const remainingWidth =
+			ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
+
+		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
+			// Reset the initial aspect ratio if the frame is resized slightly
+			// above the sidebar but not far enough to trigger full screen.
+			setFrameSize( INITIAL_FRAME_SIZE );
+		} else {
+			// Trigger full screen if the frame is resized far enough to the left.
+			history.navigate(
+				addQueryArgs( path, {
+					canvas: 'edit',
+				} ),
+				{
+					transition: 'canvas-mode-edit-transition',
+				}
+			);
+		}
+	};
+
+	// Handle resize by arrow keys
+	const handleResizableHandleKeyDown = ( event ) => {
+		if ( ! [ 'ArrowLeft', 'ArrowRight' ].includes( event.key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const step = 20 * ( event.shiftKey ? 5 : 1 );
+		const delta =
+			step *
+			( event.key === 'ArrowLeft' ? 1 : -1 ) *
+			( isRTL() ? -1 : 1 );
+		const newWidth = Math.min(
+			Math.max(
+				FRAME_MIN_WIDTH,
+				frameRef.current.resizable.offsetWidth + delta
+			),
+			defaultSize.width
+		);
+
+		setFrameSize( {
+			width: newWidth,
+			height: calculateNewHeight( newWidth, defaultAspectRatio ),
+		} );
+	};
+
+	const frameAnimationVariants = {
+		default: {
+			flexGrow: 0,
+			height: frameSize.height,
+		},
+		fullWidth: {
+			flexGrow: 1,
+			height: frameSize.height,
+		},
+	};
+
+	const resizeHandleVariants = {
+		hidden: {
+			opacity: 0,
+			...( isRTL() ? { right: 0 } : { left: 0 } ),
+		},
+		visible: {
+			opacity: 1,
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
+		},
+		active: {
+			opacity: 1,
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
+			scaleY: 1.3,
+		},
+	};
+	const currentResizeHandleVariant = ( () => {
+		if ( isResizing ) {
+			return 'active';
+		}
+		return shouldShowHandle ? 'visible' : 'hidden';
+	} )();
+
+	return (
+		<ResizableBox
+			as={ motion.div }
+			ref={ frameRef }
+			initial={ false }
+			variants={ frameAnimationVariants }
+			animate={ isFullWidth ? 'fullWidth' : 'default' }
+			onAnimationComplete={ ( definition ) => {
+				if ( definition === 'fullWidth' ) {
+					setFrameSize( { width: '100%', height: '100%' } );
+				}
+			} }
+			whileHover={
+				canvas === 'view'
+					? {
+							scale: 1.005,
+							transition: {
+								duration: disableMotion ? 0 : 0.5,
+								ease: 'easeOut',
+							},
+					  }
+					: {}
+			}
+			transition={ FRAME_TRANSITION }
+			size={ frameSize }
+			enable={ {
+				top: false,
+				bottom: false,
+				// Resizing will be disabled until the editor content is loaded.
+				...( isRTL()
+					? { right: isReady, left: false }
+					: { left: isReady, right: false } ),
+				topRight: false,
+				bottomRight: false,
+				bottomLeft: false,
+				topLeft: false,
+			} }
+			resizeRatio={ resizeRatio }
+			handleClasses={ undefined }
+			handleStyles={ {
+				left: HANDLE_STYLES_OVERRIDE,
+				right: HANDLE_STYLES_OVERRIDE,
+			} }
+			minWidth={ FRAME_MIN_WIDTH }
+			maxWidth={ isFullWidth ? '100%' : '150%' }
+			maxHeight="100%"
+			onFocus={ () => setShouldShowHandle( true ) }
+			onBlur={ () => setShouldShowHandle( false ) }
+			onMouseOver={ () => setShouldShowHandle( true ) }
+			onMouseOut={ () => setShouldShowHandle( false ) }
+			handleComponent={ {
+				[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<motion.button
+								key="handle"
+								role="separator"
+								aria-orientation="vertical"
+								className={ clsx(
+									'edit-site-resizable-frame__handle',
+									{ 'is-resizing': isResizing }
+								) }
+								variants={ resizeHandleVariants }
+								animate={ currentResizeHandleVariant }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ resizableHandleHelpId }
+								aria-valuenow={
+									frameRef.current?.resizable?.offsetWidth ||
+									undefined
+								}
+								aria-valuemin={ FRAME_MIN_WIDTH }
+								aria-valuemax={ defaultSize.width }
+								onKeyDown={ handleResizableHandleKeyDown }
+								initial="hidden"
+								exit="hidden"
+								whileFocus="active"
+								whileHover="active"
+							/>
+						</Tooltip>
+						<div hidden id={ resizableHandleHelpId }>
+							{ __(
+								'Use left and right arrow keys to resize the canvas. Hold shift to resize in larger increments.'
+							) }
+						</div>
+					</>
+				),
+			} }
+			onResizeStart={ handleResizeStart }
+			onResize={ handleResize }
+			onResizeStop={ handleResizeStop }
+			className={ clsx( 'edit-site-resizable-frame__inner', {
+				'is-resizing': isResizing,
+			} ) }
+			showHandle={ false } // Do not show the default handle, as we're using a custom one.
+		>
+			<div
+				className="edit-site-resizable-frame__inner-content"
+				style={ innerContentStyle }
+			>
+				{ children }
+			</div>
+		</ResizableBox>
+	);
+}
+
+export default ResizableFrame;
diff --git a/packages/edit-site/src/components/resizable-frame/style.scss b/packages/edit-site/src/components/resizable-frame/style.scss
new file mode 100644
index 00000000000000..3247525cc2e163
--- /dev/null
+++ b/packages/edit-site/src/components/resizable-frame/style.scss
@@ -0,0 +1,71 @@
+.edit-site-resizable-frame__inner {
+	position: relative;
+
+	&.is-resizing {
+		@at-root {
+			body:has(&) {
+				cursor: col-resize;
+				user-select: none;
+				-webkit-user-select: none;
+			}
+		}
+
+		&::before {
+			// This covers the whole content which ensures mouse up triggers
+			// even if the content is "inert".
+			position: absolute;
+			z-index: 1;
+			inset: 0;
+			content: "";
+		}
+	}
+}
+
+.edit-site-resizable-frame__inner-content {
+	position: absolute;
+	z-index: 0;
+	inset: 0;
+}
+
+.edit-site-resizable-frame__handle {
+	align-items: center;
+	background-color: rgba($gray-700, 0.4);
+	border: 0;
+	border-radius: $grid-unit-05;
+	cursor: col-resize;
+	display: flex;
+	height: $grid-unit-80;
+	justify-content: flex-end;
+	padding: 0;
+	position: absolute;
+	top: calc(50% - #{$grid-unit-40});
+	width: $grid-unit-05;
+	z-index: 100;
+
+	&::before {
+		content: "";
+		height: 100%;
+		left: 100%;
+		position: absolute;
+		width: $grid-unit-40;
+	}
+
+	&::after {
+		content: "";
+		height: 100%;
+		position: absolute;
+		right: 100%;
+		width: $grid-unit-40;
+	}
+
+	&:focus-visible {
+		// Works with Windows high contrast mode while also hiding weird outline in Safari.
+		outline: 2px solid transparent;
+	}
+
+	&:hover,
+	&:focus,
+	&.is-resizing {
+		background-color: var(--wp-admin-theme-color);
+	}
+}
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
new file mode 100644
index 00000000000000..5ce95872e0c9ae
--- /dev/null
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../lock-unlock';
+import EditorCanvasContainer from '../editor-canvas-container';
+
+const {
+	ExperimentalBlockEditorProvider,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+	__unstableBlockStyleVariationOverridesWithConfig,
+} = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+function Revisions( { userConfig, blocks } ) {
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const renderedBlocksArray = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			isPreviewMode: true,
+		} ),
+		[ originalSettings ]
+	);
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const editorStyles =
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
+	return (
+		<EditorCanvasContainer
+			title={ __( 'Revisions' ) }
+			closeButtonLabel={ __( 'Close revisions' ) }
+			enableResizing
+		>
+			<Iframe
+				className="edit-site-revisions__iframe"
+				name="revisions"
+				tabIndex={ 0 }
+			>
+				<style>
+					{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; }`
+					}
+				</style>
+				<Disabled className="edit-site-revisions__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocksArray }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+						{ /*
+						 * Styles are printed inside the block editor provider,
+						 * so they can access any registered style overrides.
+						 */ }
+						<EditorStyles styles={ editorStyles } />
+						<__unstableBlockStyleVariationOverridesWithConfig
+							config={ mergedConfig }
+						/>
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</Iframe>
+		</EditorCanvasContainer>
+	);
+}
+
+export default Revisions;
diff --git a/packages/edit-site/src/components/routes/index.js b/packages/edit-site/src/components/routes/index.js
deleted file mode 100644
index b24fa069f1efd2..00000000000000
--- a/packages/edit-site/src/components/routes/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createContext,
-	useState,
-	useEffect,
-	useContext,
-} from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import history from '../../utils/history';
-
-const RoutesContext = createContext();
-const HistoryContext = createContext();
-
-export function useLocation() {
-	return useContext( RoutesContext );
-}
-
-export function useHistory() {
-	return useContext( HistoryContext );
-}
-
-function getLocationWithParams( location ) {
-	const searchParams = new URLSearchParams( location.search );
-	return {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-}
-
-export function Routes( { children } ) {
-	const [ location, setLocation ] = useState( () =>
-		getLocationWithParams( history.location )
-	);
-
-	useEffect( () => {
-		return history.listen( ( { location: updatedLocation } ) => {
-			setLocation( getLocationWithParams( updatedLocation ) );
-		} );
-	}, [] );
-
-	return (
-		<HistoryContext.Provider value={ history }>
-			<RoutesContext.Provider value={ location }>
-				{ children( location ) }
-			</RoutesContext.Provider>
-		</HistoryContext.Provider>
-	);
-}
diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js
deleted file mode 100644
index 8454260b908aab..00000000000000
--- a/packages/edit-site/src/components/routes/link.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { useHistory } from './index';
-
-export function useLink( params = {}, state, shouldReplace = false ) {
-	const history = useHistory();
-
-	function onClick( event ) {
-		event.preventDefault();
-
-		if ( shouldReplace ) {
-			history.replace( params, state );
-		} else {
-			history.push( params, state );
-		}
-	}
-
-	return {
-		href: addQueryArgs( window.location.href, params ),
-		onClick,
-	};
-}
-
-export default function Link( {
-	params = {},
-	state,
-	replace: shouldReplace = false,
-	children,
-	...props
-} ) {
-	const { href, onClick } = useLink( params, state, shouldReplace );
-
-	return (
-		<a href={ href } onClick={ onClick } { ...props }>
-			{ children }
-		</a>
-	);
-}
diff --git a/packages/edit-site/src/components/routes/use-title.js b/packages/edit-site/src/components/routes/use-title.js
index 1ff7a52e25357d..775f3659778748 100644
--- a/packages/edit-site/src/components/routes/use-title.js
+++ b/packages/edit-site/src/components/routes/use-title.js
@@ -7,11 +7,14 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from './index';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function useTitle( title ) {
 	const location = useLocation();
@@ -35,8 +38,8 @@ export default function useTitle( title ) {
 		if ( title && siteTitle ) {
 			// @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68
 			const formattedTitle = sprintf(
-				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
-				__( '%1$s ‹ %2$s — WordPress' ),
+				/* translators: Admin document title. 1: Admin screen name, 2: Network or site name. */
+				__( '%1$s ‹ %2$s ‹ Editor — WordPress' ),
 				decodeEntities( title ),
 				decodeEntities( siteTitle )
 			);
@@ -44,14 +47,7 @@ export default function useTitle( title ) {
 			document.title = formattedTitle;
 
 			// Announce title on route change for screen readers.
-			speak(
-				sprintf(
-					/* translators: The page title that is currently displaying. */
-					__( 'Now displaying: %s' ),
-					document.title
-				),
-				'assertive'
-			);
+			speak( title, 'assertive' );
 		}
 	}, [ title, siteTitle, location ] );
 }
diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
index 28c63d7ef56c16..933617e0c06c3c 100644
--- a/packages/edit-site/src/components/save-button/index.js
+++ b/packages/edit-site/src/components/save-button/index.js
@@ -3,43 +3,137 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	useEntitiesSavedStatesIsDirty,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import {
+	currentlyPreviewingTheme,
+	isPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
 
-export default function SaveButton() {
-	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
-		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
-			select( coreStore );
-		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-		const { isSaveViewOpened } = select( editSiteStore );
-		return {
-			isDirty: dirtyEntityRecords.length > 0,
-			isSaving: dirtyEntityRecords.some( ( record ) =>
-				isSavingEntityRecord( record.kind, record.name, record.key )
-			),
-			isSaveViewOpen: isSaveViewOpened(),
-		};
-	}, [] );
-	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
-
-	const disabled = ! isDirty || isSaving;
-
-	const label = __( 'Save' );
+const { useLocation } = unlock( routerPrivateApis );
 
+export default function SaveButton( {
+	className = 'edit-site-save-button__button',
+	variant = 'primary',
+	showTooltip = true,
+	showReviewMessage,
+	icon,
+	size,
+	__next40pxDefaultSize = false,
+} ) {
+	const { params } = useLocation();
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
+	const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
+	const { isSaving, isSaveViewOpen, previewingThemeName } = useSelect(
+		( select ) => {
+			const { isSavingEntityRecord, isResolving } = select( coreStore );
+			const { isSaveViewOpened } = select( editSiteStore );
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
+			return {
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+				isSaveViewOpen: isSaveViewOpened(),
+				// Do not call `getTheme` with null, it will cause a request to
+				// the server.
+				previewingThemeName: currentlyPreviewingThemeId
+					? select( coreStore ).getTheme( currentlyPreviewingThemeId )
+							?.name?.rendered
+					: undefined,
+			};
+		},
+		[ dirtyEntityRecords ]
+	);
+	const hasDirtyEntities = !! dirtyEntityRecords.length;
+	let isOnlyCurrentEntityDirty;
+	// Check if the current entity is the only entity with changes.
+	// We have some extra logic for `wp_global_styles` for now, that
+	// is used in navigation sidebar.
+	if ( dirtyEntityRecords.length === 1 ) {
+		if ( params.postId ) {
+			isOnlyCurrentEntityDirty =
+				`${ dirtyEntityRecords[ 0 ].key }` === params.postId &&
+				dirtyEntityRecords[ 0 ].name === params.postType;
+		} else if ( params.path?.includes( 'wp_global_styles' ) ) {
+			isOnlyCurrentEntityDirty =
+				dirtyEntityRecords[ 0 ].name === 'globalStyles';
+		}
+	}
+	const disabled =
+		isSaving || ( ! hasDirtyEntities && ! isPreviewingTheme() );
+	const getLabel = () => {
+		if ( isPreviewingTheme() ) {
+			if ( isSaving ) {
+				return sprintf(
+					/* translators: %s: The name of theme to be activated. */
+					__( 'Activating %s' ),
+					previewingThemeName
+				);
+			} else if ( disabled ) {
+				return __( 'Saved' );
+			} else if ( hasDirtyEntities ) {
+				return sprintf(
+					/* translators: %s: The name of theme to be activated. */
+					__( 'Activate %s & Save' ),
+					previewingThemeName
+				);
+			}
+			return sprintf(
+				/* translators: %s: The name of theme to be activated. */
+				__( 'Activate %s' ),
+				previewingThemeName
+			);
+		}
+		if ( isSaving ) {
+			return __( 'Saving' );
+		}
+		if ( disabled ) {
+			return __( 'Saved' );
+		}
+		if ( ! isOnlyCurrentEntityDirty && showReviewMessage ) {
+			return sprintf(
+				// translators: %d: number of unsaved changes (number).
+				_n(
+					'Review %d change…',
+					'Review %d changes…',
+					dirtyEntityRecords.length
+				),
+				dirtyEntityRecords.length
+			);
+		}
+		return __( 'Save' );
+	};
+	const label = getLabel();
+	const onClick = isOnlyCurrentEntityDirty
+		? () => saveDirtyEntities( { dirtyEntityRecords } )
+		: () => setIsSaveViewOpened( true );
 	return (
 		<Button
-			variant="primary"
-			className="edit-site-save-button__button"
+			variant={ variant }
+			className={ className }
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			onClick={ disabled ? undefined : onClick }
 			label={ label }
 			/*
 			 * We want the tooltip to show the keyboard shortcut only when the
@@ -50,9 +144,12 @@ export default function SaveButton() {
 			 * Displaying the keyboard shortcut conditionally makes the tooltip
 			 * itself show conditionally. This would trigger a full-rerendering
 			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 * the tooltip is always rendered even when there's no keyboard shortcut.
 			 */
-			showTooltip
+			showTooltip={ showTooltip }
+			icon={ icon }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
+			size={ size }
 		>
 			{ label }
 		</Button>
diff --git a/packages/edit-site/src/components/save-hub/index.js b/packages/edit-site/src/components/save-hub/index.js
new file mode 100644
index 00000000000000..61f4df072a7db8
--- /dev/null
+++ b/packages/edit-site/src/components/save-hub/index.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SaveButton from '../save-button';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+
+export default function SaveHub() {
+	const { isDisabled, isSaving } = useSelect( ( select ) => {
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const _isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		return {
+			isSaving: _isSaving,
+			isDisabled:
+				_isSaving ||
+				( ! dirtyEntityRecords.length && ! isPreviewingTheme() ),
+		};
+	}, [] );
+	return (
+		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
+			<SaveButton
+				className="edit-site-save-hub__button"
+				variant={ isDisabled ? null : 'primary' }
+				showTooltip={ false }
+				icon={ isDisabled && ! isSaving ? check : null }
+				showReviewMessage
+				__next40pxDefaultSize
+			/>
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/save-hub/style.scss b/packages/edit-site/src/components/save-hub/style.scss
new file mode 100644
index 00000000000000..03609209c432c5
--- /dev/null
+++ b/packages/edit-site/src/components/save-hub/style.scss
@@ -0,0 +1,28 @@
+.edit-site-save-hub {
+	color: $gray-600;
+	border-top: 1px solid $gray-800;
+	flex-shrink: 0;
+	margin: 0;
+	padding: $grid-unit-20 $canvas-padding;
+}
+
+.edit-site-save-hub__button {
+	color: inherit;
+	width: 100%;
+	justify-content: center;
+
+	&[aria-disabled="true"] {
+		opacity: 1;
+	}
+
+	&[aria-disabled="true"]:hover {
+		color: inherit;
+	}
+
+	&:not(.is-primary) {
+		&.is-busy,
+		&.is-busy[aria-disabled="true"]:hover {
+			color: $gray-900;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/save-keyboard-shortcut/index.js b/packages/edit-site/src/components/save-keyboard-shortcut/index.js
new file mode 100644
index 00000000000000..a1dccbd2a6b483
--- /dev/null
+++ b/packages/edit-site/src/components/save-keyboard-shortcut/index.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+const shortcutName = 'core/edit-site/save';
+
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @return {null} Returns null.
+ */
+export default function SaveKeyboardShortcut() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { hasNonPostEntityChanges, isPostSavingLocked } =
+		useSelect( editorStore );
+	const { savePost } = useDispatch( editorStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	useEffect( () => {
+		registerShortcut( {
+			name: shortcutName,
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+		return () => {
+			unregisterShortcut( shortcutName );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		if ( ! hasDirtyEntities || isSaving ) {
+			return;
+		}
+		if ( hasNonPostEntityChanges() ) {
+			setIsSaveViewOpened( true );
+		} else if ( ! isPostSavingLocked() ) {
+			savePost();
+		}
+	} );
+
+	return null;
+}
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
new file mode 100644
index 00000000000000..95ec9b9ffc8c46
--- /dev/null
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import {
+	EntitiesSavedStates,
+	useEntitiesSavedStatesIsDirty,
+	privateApis,
+} from '@wordpress/editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useActivateTheme } from '../../utils/use-activate-theme';
+import { useActualCurrentTheme } from '../../utils/use-actual-current-theme';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
+
+const { EntitiesSavedStatesExtensible, NavigableRegion } =
+	unlock( privateApis );
+const { useLocation } = unlock( routerPrivateApis );
+
+const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
+	const isDirtyProps = useEntitiesSavedStatesIsDirty();
+	let activateSaveLabel;
+	if ( isDirtyProps.isDirty ) {
+		activateSaveLabel = __( 'Activate & Save' );
+	} else {
+		activateSaveLabel = __( 'Activate' );
+	}
+
+	const currentTheme = useActualCurrentTheme();
+
+	const previewingTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
+
+	const additionalPrompt = (
+		<p>
+			{ sprintf(
+				/* translators: 1: The name of active theme, 2: The name of theme to be activated. */
+				__(
+					'Saving your changes will change your active theme from %1$s to %2$s.'
+				),
+				currentTheme?.name?.rendered ?? '...',
+				previewingTheme?.name?.rendered ?? '...'
+			) }
+		</p>
+	);
+
+	const activateTheme = useActivateTheme();
+	const onSave = async ( values ) => {
+		await activateTheme();
+		return values;
+	};
+
+	return (
+		<EntitiesSavedStatesExtensible
+			{ ...{
+				...isDirtyProps,
+				additionalPrompt,
+				close: onClose,
+				onSave,
+				saveEnabled: true,
+				saveLabel: activateSaveLabel,
+				renderDialog,
+			} }
+		/>
+	);
+};
+
+const _EntitiesSavedStates = ( { onClose, renderDialog } ) => {
+	if ( isPreviewingTheme() ) {
+		return (
+			<EntitiesSavedStatesForPreview
+				onClose={ onClose }
+				renderDialog={ renderDialog }
+			/>
+		);
+	}
+	return (
+		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+	);
+};
+
+export default function SavePanel() {
+	const { query } = useLocation();
+	const { canvas = 'view' } = query;
+	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
+		const {
+			__experimentalGetDirtyEntityRecords,
+			isSavingEntityRecord,
+			isResolving,
+		} = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isActivatingTheme = isResolving( 'activateTheme' );
+		const { isSaveViewOpened } = unlock( select( editSiteStore ) );
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			isDirty: dirtyEntityRecords.length > 0,
+			isSaving:
+				dirtyEntityRecords.some( ( record ) =>
+					isSavingEntityRecord( record.kind, record.name, record.key )
+				) || isActivatingTheme,
+		};
+	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const onClose = () => setIsSaveViewOpened( false );
+	useEffect( () => {
+		setIsSaveViewOpened( false );
+	}, [ canvas, setIsSaveViewOpened ] );
+
+	if ( canvas === 'view' ) {
+		return isSaveViewOpen ? (
+			<Modal
+				className="edit-site-save-panel__modal"
+				onRequestClose={ onClose }
+				__experimentalHideHeader
+				contentLabel={ __(
+					'Save site, content, and template changes'
+				) }
+			>
+				<_EntitiesSavedStates onClose={ onClose } />
+			</Modal>
+		) : null;
+	}
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
+	return (
+		<NavigableRegion
+			className={ clsx( 'edit-site-layout__actions', {
+				'is-entity-save-view-open': isSaveViewOpen,
+			} ) }
+			ariaLabel={ __( 'Save panel' ) }
+		>
+			<div
+				className={ clsx( 'edit-site-editor__toggle-save-panel', {
+					'screen-reader-text': isSaveViewOpen,
+				} ) }
+			>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					className="edit-site-editor__toggle-save-panel-button"
+					onClick={ () => setIsSaveViewOpened( true ) }
+					aria-haspopup="dialog"
+					disabled={ disabled }
+					accessibleWhenDisabled
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+			{ isSaveViewOpen && (
+				<_EntitiesSavedStates onClose={ onClose } renderDialog />
+			) }
+		</NavigableRegion>
+	);
+}
diff --git a/packages/edit-site/src/components/save-panel/style.scss b/packages/edit-site/src/components/save-panel/style.scss
new file mode 100644
index 00000000000000..fb7ae2102b8cfa
--- /dev/null
+++ b/packages/edit-site/src/components/save-panel/style.scss
@@ -0,0 +1,5 @@
+.edit-site-save-panel__modal {
+	@include break-small() {
+		width: 600px;
+	}
+}
diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
deleted file mode 100644
index 5567bcc3821195..00000000000000
--- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function InserterSidebar() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const insertionPoint = useSelect(
-		( select ) => select( editSiteStore ).__experimentalGetInsertionPoint(),
-		[]
-	);
-
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobile ? VisuallyHidden : 'div';
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
-	} );
-
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
-	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-site-editor__inserter-panel"
-		>
-			<TagName className="edit-site-editor__inserter-panel-header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="edit-site-editor__inserter-panel-content">
-				<Library
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobile }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					ref={ libraryRef }
-				/>
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
deleted file mode 100644
index eaad82acafa273..00000000000000
--- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useInstanceId,
-	useMergeRefs,
-} from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { ESCAPE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function ListViewSidebar() {
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			setIsListViewOpened( false );
-		}
-	}
-
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			aria-labelledby={ labelId }
-			className="edit-site-editor__list-view-panel"
-			onKeyDown={ closeOnEscape }
-		>
-			<div
-				className="edit-site-editor__list-view-panel-header"
-				ref={ headerFocusReturnRef }
-			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
-					onClick={ () => setIsListViewOpened( false ) }
-				/>
-			</div>
-			<div
-				className="edit-site-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-				] ) }
-			>
-				<ListView />
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss
deleted file mode 100644
index 6dd1a0d9c49611..00000000000000
--- a/packages/edit-site/src/components/secondary-sidebar/style.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.edit-site-editor__inserter-panel,
-.edit-site-editor__list-view-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.edit-site-editor__list-view-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
-}
-
-.edit-site-editor__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.edit-site-editor__inserter-panel-content,
-.edit-site-editor__list-view-panel-content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-}
-
-
-.edit-site-editor__inserter-panel-content {
-	@include break-medium() {
-		height: 100%;
-	}
-}
-
-.edit-site-editor__list-view-panel-header {
-	align-items: center;
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-}
-
-.edit-site-editor__list-view-panel-content {
-	overflow-y: auto;
-	padding: $grid-unit-10;
-}
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
new file mode 100644
index 00000000000000..f4cea37f01078b
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+export default function SidebarButton( props ) {
+	return (
+		<Button
+			size="compact"
+			{ ...props }
+			className={ clsx( 'edit-site-sidebar-button', props.className ) }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
new file mode 100644
index 00000000000000..4507accbd12123
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -0,0 +1,24 @@
+.edit-site-sidebar-button {
+	color: $gray-200;
+	flex-shrink: 0;
+
+	// Focus (resets default button focus and use focus-visible).
+	&:focus:not(:disabled) {
+		box-shadow: none;
+		outline: none;
+	}
+	&:focus-visible:not(:disabled) {
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
+		outline: 3px solid transparent;
+	}
+
+	&:hover:not(:disabled,[aria-disabled="true"]),
+	&:focus-visible,
+	&:focus,
+	&:not(:disabled,[aria-disabled="true"]):active,
+	&[aria-expanded="true"] {
+		color: $gray-100;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
new file mode 100644
index 00000000000000..815de181a9dde0
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useDefaultViews } from './default-views';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+function AddNewItemModalContent( { type, setIsAdding } ) {
+	const history = useHistory();
+	const { path } = useLocation();
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( '' );
+	const [ isSaving, setIsSaving ] = useState( false );
+	const defaultViews = useDefaultViews( { postType: type } );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				setIsSaving( true );
+				const { getEntityRecords } = resolveSelect( coreStore );
+				let dataViewTaxonomyId;
+				const dataViewTypeRecords = await getEntityRecords(
+					'taxonomy',
+					'wp_dataviews_type',
+					{ slug: type }
+				);
+				if ( dataViewTypeRecords && dataViewTypeRecords.length > 0 ) {
+					dataViewTaxonomyId = dataViewTypeRecords[ 0 ].id;
+				} else {
+					const record = await saveEntityRecord(
+						'taxonomy',
+						'wp_dataviews_type',
+						{ name: type }
+					);
+					if ( record && record.id ) {
+						dataViewTaxonomyId = record.id;
+					}
+				}
+				const savedRecord = await saveEntityRecord(
+					'postType',
+					'wp_dataviews',
+					{
+						title,
+						status: 'publish',
+						wp_dataviews_type: dataViewTaxonomyId,
+						content: JSON.stringify( defaultViews[ 0 ].view ),
+					}
+				);
+				history.navigate(
+					addQueryArgs( path, {
+						activeView: savedRecord.id,
+						isCustom: 'true',
+					} )
+				);
+				setIsSaving( false );
+				setIsAdding( false );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My view' ) }
+					className="patterns-create-modal__name-input"
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							setIsAdding( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSaving }
+						isBusy={ isSaving }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default function AddNewItem( { type } ) {
+	const [ isAdding, setIsAdding ] = useState( false );
+	return (
+		<>
+			<SidebarNavigationItem
+				icon={ plus }
+				onClick={ () => {
+					setIsAdding( true );
+				} }
+				className="dataviews__siderbar-content-add-new-item"
+			>
+				{ __( 'New view' ) }
+			</SidebarNavigationItem>
+			{ isAdding && (
+				<Modal
+					title={ __( 'Add new view' ) }
+					onRequestClose={ () => {
+						setIsAdding( false );
+					} }
+				>
+					<AddNewItemModalContent
+						type={ type }
+						setIsAdding={ setIsAdding }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
new file mode 100644
index 00000000000000..847029e8d6dcfe
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -0,0 +1,232 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHeading as Heading,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { moreVertical } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import DataViewItem from './dataview-item';
+import AddNewItem from './add-new-view';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const EMPTY_ARRAY = [];
+
+function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const [ title, setTitle ] = useState( currentTitle );
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await editEntityRecord(
+					'postType',
+					'wp_dataviews',
+					dataviewId,
+					{
+						title,
+					}
+				);
+				setIsRenaming( false );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My view' ) }
+					className="patterns-create-modal__name-input"
+				/>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						__next40pxDefaultSize
+						onClick={ () => {
+							setIsRenaming( false );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title }
+						__next40pxDefaultSize
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+function CustomDataViewItem( { dataviewId, isActive } ) {
+	const history = useHistory();
+	const { dataview } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord } = select( coreStore );
+			return {
+				dataview: getEditedEntityRecord(
+					'postType',
+					'wp_dataviews',
+					dataviewId
+				),
+			};
+		},
+		[ dataviewId ]
+	);
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const type = useMemo( () => {
+		const viewContent = JSON.parse( dataview.content );
+		return viewContent.type;
+	}, [ dataview.content ] );
+	const [ isRenaming, setIsRenaming ] = useState( false );
+	return (
+		<>
+			<DataViewItem
+				title={ dataview.title }
+				type={ type }
+				isActive={ isActive }
+				isCustom
+				customViewId={ dataviewId }
+				suffix={
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Actions' ) }
+						className="edit-site-sidebar-dataviews-dataview-item__dropdown-menu"
+						toggleProps={ {
+							style: {
+								color: 'inherit',
+							},
+							size: 'small',
+						} }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								<MenuItem
+									onClick={ () => {
+										setIsRenaming( true );
+										onClose();
+									} }
+								>
+									{ __( 'Rename' ) }
+								</MenuItem>
+								<MenuItem
+									onClick={ async () => {
+										await deleteEntityRecord(
+											'postType',
+											'wp_dataviews',
+											dataview.id,
+											{
+												force: true,
+											}
+										);
+										if ( isActive ) {
+											const {
+												params: { postType },
+											} = history.getLocationWithParams();
+											history.replace( { postType } );
+										}
+										onClose();
+									} }
+									isDestructive
+								>
+									{ __( 'Delete' ) }
+								</MenuItem>
+							</MenuGroup>
+						) }
+					</DropdownMenu>
+				}
+			/>
+			{ isRenaming && (
+				<Modal
+					title={ __( 'Rename' ) }
+					onRequestClose={ () => {
+						setIsRenaming( false );
+					} }
+					focusOnMount="firstContentElement"
+					size="small"
+				>
+					<RenameItemModalContent
+						dataviewId={ dataviewId }
+						setIsRenaming={ setIsRenaming }
+						currentTitle={ dataview.title }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+export function useCustomDataViews( type ) {
+	const customDataViews = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		const dataViewTypeRecords = getEntityRecords(
+			'taxonomy',
+			'wp_dataviews_type',
+			{ slug: type }
+		);
+		if ( ! dataViewTypeRecords || dataViewTypeRecords.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		const dataViews = getEntityRecords( 'postType', 'wp_dataviews', {
+			wp_dataviews_type: dataViewTypeRecords[ 0 ].id,
+			orderby: 'date',
+			order: 'asc',
+		} );
+		if ( ! dataViews ) {
+			return EMPTY_ARRAY;
+		}
+		return dataViews;
+	} );
+	return customDataViews;
+}
+
+export default function CustomDataViewsList( { type, activeView, isCustom } ) {
+	const customDataViews = useCustomDataViews( type );
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-dataviews__group-header">
+				<Heading level={ 2 }>{ __( 'Custom Views' ) }</Heading>
+			</div>
+			<ItemGroup>
+				{ customDataViews.map( ( customViewRecord ) => {
+					return (
+						<CustomDataViewItem
+							key={ customViewRecord.id }
+							dataviewId={ customViewRecord.id }
+							isActive={
+								isCustom &&
+								Number( activeView ) === customViewRecord.id
+							}
+						/>
+					);
+				} ) }
+				<AddNewItem type={ type } />
+			</ItemGroup>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
new file mode 100644
index 00000000000000..b98f8b80938d68
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/dataview-item.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { VIEW_LAYOUTS } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { unlock } from '../../lock-unlock';
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function DataViewItem( {
+	title,
+	slug,
+	customViewId,
+	type,
+	icon,
+	isActive,
+	isCustom,
+	suffix,
+} ) {
+	const { path } = useLocation();
+
+	const iconToUse =
+		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
+
+	let activeView = isCustom ? customViewId : slug;
+	if ( activeView === 'all' ) {
+		activeView = undefined;
+	}
+	const query = {
+		layout: type,
+		activeView,
+		isCustom: isCustom ? 'true' : undefined,
+	};
+	return (
+		<HStack
+			justify="flex-start"
+			className={ clsx( 'edit-site-sidebar-dataviews-dataview-item', {
+				'is-selected': isActive,
+			} ) }
+		>
+			<SidebarNavigationItem
+				icon={ iconToUse }
+				to={ addQueryArgs( path, query ) }
+				aria-current={ isActive ? 'true' : undefined }
+			>
+				{ title }
+			</SidebarNavigationItem>
+			{ suffix }
+		</HStack>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
new file mode 100644
index 00000000000000..c08a2c1a57c58e
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	trash,
+	pages,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	LAYOUT_LIST,
+	LAYOUT_TABLE,
+	LAYOUT_GRID,
+	OPERATOR_IS_ANY,
+} from '../../utils/constants';
+
+export const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
+};
+
+const DEFAULT_POST_BASE = {
+	type: LAYOUT_LIST,
+	search: '',
+	filters: [],
+	page: 1,
+	perPage: 20,
+	sort: {
+		field: 'date',
+		direction: 'desc',
+	},
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts[ LAYOUT_LIST ],
+};
+
+export function useDefaultViews( { postType } ) {
+	const labels = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return getPostType( postType )?.labels;
+		},
+		[ postType ]
+	);
+	return useMemo( () => {
+		return [
+			{
+				title: labels?.all_items || __( 'All items' ),
+				slug: 'all',
+				icon: pages,
+				view: DEFAULT_POST_BASE,
+			},
+			{
+				title: __( 'Published' ),
+				slug: 'published',
+				icon: published,
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+					},
+				],
+			},
+			{
+				title: __( 'Scheduled' ),
+				slug: 'future',
+				icon: scheduled,
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+					},
+				],
+			},
+			{
+				title: __( 'Drafts' ),
+				slug: 'drafts',
+				icon: drafts,
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'draft',
+					},
+				],
+			},
+			{
+				title: __( 'Pending' ),
+				slug: 'pending',
+				icon: pending,
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+					},
+				],
+			},
+			{
+				title: __( 'Private' ),
+				slug: 'private',
+				icon: notAllowed,
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+					},
+				],
+			},
+			{
+				title: __( 'Trash' ),
+				slug: 'trash',
+				icon: trash,
+				view: {
+					...DEFAULT_POST_BASE,
+					type: LAYOUT_TABLE,
+					layout: defaultLayouts[ LAYOUT_TABLE ].layout,
+				},
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
+					},
+				],
+			},
+		];
+	}, [ labels ] );
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/index.js b/packages/edit-site/src/components/sidebar-dataviews/index.js
new file mode 100644
index 00000000000000..410767650c6f36
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/index.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { useDefaultViews } from './default-views';
+import { unlock } from '../../lock-unlock';
+import DataViewItem from './dataview-item';
+import CustomDataViewsList from './custom-dataviews-list';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export default function DataViewsSidebarContent( { postType } ) {
+	const {
+		query: { activeView = 'all', isCustom = 'false' },
+	} = useLocation();
+	const defaultViews = useDefaultViews( { postType } );
+	if ( ! postType ) {
+		return null;
+	}
+	const isCustomBoolean = isCustom === 'true';
+
+	return (
+		<>
+			<ItemGroup>
+				{ defaultViews.map( ( dataview ) => {
+					return (
+						<DataViewItem
+							key={ dataview.slug }
+							slug={ dataview.slug }
+							title={ dataview.title }
+							icon={ dataview.icon }
+							type={ dataview.view.type }
+							isActive={
+								! isCustomBoolean &&
+								dataview.slug === activeView
+							}
+							isCustom={ false }
+						/>
+					);
+				} ) }
+			</ItemGroup>
+			{ window?.__experimentalCustomViews && (
+				<CustomDataViewsList
+					activeView={ activeView }
+					type={ postType }
+					isCustom
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-dataviews/style.scss b/packages/edit-site/src/components/sidebar-dataviews/style.scss
new file mode 100644
index 00000000000000..a36d693c4f80ea
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-dataviews/style.scss
@@ -0,0 +1,29 @@
+.edit-site-sidebar-navigation-screen-dataviews__group-header {
+	margin-top: $grid-unit-40;
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+}
+
+.edit-site-sidebar-dataviews-dataview-item {
+	border-radius: $radius-small;
+	padding-right: $grid-unit-10;
+
+	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
+		min-width: initial;
+	}
+
+	&:hover,
+	&:focus,
+	&[aria-current] {
+		color: $gray-200;
+	}
+
+	&.is-selected {
+		background: $gray-800;
+		font-weight: $font-weight-medium;
+		color: $white;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/constants.js b/packages/edit-site/src/components/sidebar-edit-mode/constants.js
deleted file mode 100644
index 6322eaeb1258a8..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/constants.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const SIDEBAR_TEMPLATE = 'edit-site/template';
-export const SIDEBAR_BLOCK = 'edit-site/block-inspector';
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
deleted file mode 100644
index ed3e7bef6575b5..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ComplementaryArea,
-	ComplementaryAreaMoreMenuItem,
-} from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function DefaultSidebar( {
-	className,
-	identifier,
-	title,
-	icon,
-	children,
-	closeLabel,
-	header,
-	headerClassName,
-	panelClassName,
-} ) {
-	const showIconLabels = useSelect(
-		( select ) => select( editSiteStore ).getSettings().showIconLabels,
-		[]
-	);
-
-	return (
-		<>
-			<ComplementaryArea
-				className={ className }
-				scope="core/edit-site"
-				identifier={ identifier }
-				title={ title }
-				icon={ icon }
-				closeLabel={ closeLabel }
-				header={ header }
-				headerClassName={ headerClassName }
-				panelClassName={ panelClassName }
-				showIconLabels={ showIconLabels }
-			>
-				{ children }
-			</ComplementaryArea>
-			<ComplementaryAreaMoreMenuItem
-				scope="core/edit-site"
-				identifier={ identifier }
-				icon={ icon }
-			>
-				{ title }
-			</ComplementaryAreaMoreMenuItem>
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
deleted file mode 100644
index 26ca15e70354b2..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { DropdownMenu, FlexItem, FlexBlock, Flex } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { styles, moreVertical } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import DefaultSidebar from './default-sidebar';
-import { GlobalStylesUI, useGlobalStylesReset } from '../global-styles';
-
-export default function GlobalStylesSidebar() {
-	const [ canReset, onReset ] = useGlobalStylesReset();
-	const { toggle } = useDispatch( preferencesStore );
-
-	return (
-		<DefaultSidebar
-			className="edit-site-global-styles-sidebar"
-			identifier="edit-site/global-styles"
-			title={ __( 'Styles' ) }
-			icon={ styles }
-			closeLabel={ __( 'Close global styles sidebar' ) }
-			panelClassName="edit-site-global-styles-sidebar__panel"
-			header={
-				<Flex>
-					<FlexBlock>
-						<strong>{ __( 'Styles' ) }</strong>
-					</FlexBlock>
-					<FlexItem>
-						<DropdownMenu
-							icon={ moreVertical }
-							label={ __( 'More Global Styles Actions' ) }
-							controls={ [
-								{
-									title: __( 'Reset to defaults' ),
-									onClick: onReset,
-									isDisabled: ! canReset,
-								},
-								{
-									title: __( 'Welcome Guide' ),
-									onClick: () =>
-										toggle(
-											'core/edit-site',
-											'welcomeGuideStyles'
-										),
-								},
-							] }
-						/>
-					</FlexItem>
-				</Flex>
-			}
-		>
-			<GlobalStylesUI />
-		</DefaultSidebar>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
deleted file mode 100644
index 12073a77b56e03..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createSlotFill, PanelBody } from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect, Fragment } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import DefaultSidebar from './default-sidebar';
-import GlobalStylesSidebar from './global-styles-sidebar';
-import NavigationMenuSidebar from './navigation-menu-sidebar';
-import { STORE_NAME } from '../../store/constants';
-import SettingsHeader from './settings-header';
-import TemplateCard from './template-card';
-import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
-import { store as editSiteStore } from '../../store';
-
-const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
-	'EditSiteSidebarInspector'
-);
-export const SidebarInspectorFill = InspectorFill;
-
-export function SidebarComplementaryAreaFills() {
-	const {
-		sidebar,
-		isEditorSidebarOpened,
-		hasBlockSelection,
-		supportsGlobalStyles,
-	} = useSelect( ( select ) => {
-		const _sidebar =
-			select( interfaceStore ).getActiveComplementaryArea( STORE_NAME );
-		const _isEditorSidebarOpened = [
-			SIDEBAR_BLOCK,
-			SIDEBAR_TEMPLATE,
-		].includes( _sidebar );
-		const settings = select( editSiteStore ).getSettings();
-		return {
-			sidebar: _sidebar,
-			isEditorSidebarOpened: _isEditorSidebarOpened,
-			hasBlockSelection:
-				!! select( blockEditorStore ).getBlockSelectionStart(),
-			supportsGlobalStyles: ! settings?.supportsTemplatePartsMode,
-		};
-	}, [] );
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-
-	useEffect( () => {
-		if ( ! isEditorSidebarOpened ) return;
-		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-		} else {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-		}
-	}, [ hasBlockSelection, isEditorSidebarOpened ] );
-
-	let sidebarName = sidebar;
-	if ( ! isEditorSidebarOpened ) {
-		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
-	}
-
-	// 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 MaybeNavigationMenuSidebar = Fragment;
-
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		MaybeNavigationMenuSidebar = NavigationMenuSidebar;
-	}
-
-	return (
-		<>
-			<DefaultSidebar
-				identifier={ sidebarName }
-				title={ __( 'Settings' ) }
-				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings sidebar' ) }
-				header={ <SettingsHeader sidebarName={ sidebarName } /> }
-				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
-			>
-				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<PanelBody>
-						<TemplateCard />
-					</PanelBody>
-				) }
-				{ sidebarName === SIDEBAR_BLOCK && (
-					<InspectorSlot bubblesVirtually />
-				) }
-			</DefaultSidebar>
-			{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-			<MaybeNavigationMenuSidebar />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/index.js
deleted file mode 100644
index bda4e3114ee94f..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { FlexBlock, Flex } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { navigation } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import DefaultSidebar from '../default-sidebar';
-import NavigationInspector from './navigation-inspector';
-
-export default function NavigationMenuSidebar() {
-	return (
-		<DefaultSidebar
-			className="edit-site-navigation-menu-sidebar"
-			identifier="edit-site/navigation-menu"
-			title={ __( 'Navigation' ) }
-			icon={ navigation }
-			closeLabel={ __( 'Close navigation menu sidebar' ) }
-			panelClassName="edit-site-navigation-menu-sidebar__panel"
-			header={
-				<Flex>
-					<FlexBlock>
-						<strong>{ __( 'Navigation Menus' ) }</strong>
-						<span className="edit-site-navigation-sidebar__beta">
-							{ __( 'Beta' ) }
-						</span>
-					</FlexBlock>
-				</Flex>
-			}
-		>
-			<NavigationInspector />
-		</DefaultSidebar>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
deleted file mode 100644
index 1f0c5fefbdc444..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import { SelectControl } from '@wordpress/components';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import {
-	store as blockEditorStore,
-	BlockEditorProvider,
-} from '@wordpress/block-editor';
-import { speak } from '@wordpress/a11y';
-import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import NavigationMenu from './navigation-menu';
-
-const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
-
-export default function NavigationInspector() {
-	const {
-		selectedNavigationBlockId,
-		clientIdToRef,
-		navigationMenus,
-		isResolvingNavigationMenus,
-		hasResolvedNavigationMenus,
-		firstNavigationBlockId,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetActiveBlockIdByBlockNames,
-			__experimentalGetGlobalBlocksByName,
-			getBlock,
-		} = select( blockEditorStore );
-
-		const { getEntityRecords, hasFinishedResolution, isResolving } =
-			select( coreStore );
-
-		const navigationMenusQuery = [
-			'postType',
-			'wp_navigation',
-			NAVIGATION_MENUS_QUERY[ 0 ],
-		];
-
-		// Get the active Navigation block (if present).
-		const selectedNavId =
-			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
-
-		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds =
-			__experimentalGetGlobalBlocksByName( 'core/navigation' );
-		const idToRef = {};
-		navBlockIds.forEach( ( id ) => {
-			idToRef[ id ] = getBlock( id )?.attributes?.ref;
-		} );
-		return {
-			selectedNavigationBlockId: selectedNavId,
-			firstNavigationBlockId: navBlockIds?.[ 0 ],
-			clientIdToRef: idToRef,
-			navigationMenus: getEntityRecords( ...navigationMenusQuery ),
-			isResolvingNavigationMenus: isResolving(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-			hasResolvedNavigationMenus: hasFinishedResolution(
-				'getEntityRecords',
-				navigationMenusQuery
-			),
-		};
-	}, [] );
-
-	const navMenuListId = useInstanceId(
-		NavigationMenu,
-		'edit-site-navigation-inspector-menu'
-	);
-
-	const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ];
-	const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id;
-
-	// Default Navigation Menu is either:
-	// - the Navigation Menu referenced by the first Nav block within the template.
-	// - the first of the available Navigation Menus (`wp_navigation`) posts.
-	const defaultNavigationMenuId =
-		firstNavRefInTemplate || firstNavigationMenuRef;
-
-	// The Navigation Menu manually selected by the user within the Nav inspector.
-	const [ currentMenuId, setCurrentMenuId ] = useState(
-		firstNavRefInTemplate
-	);
-
-	// If a Nav block is selected within the canvas then set the
-	// Navigation Menu referenced by it's `ref` attribute  to be
-	// active within the Navigation sidebar.
-	useEffect( () => {
-		if ( selectedNavigationBlockId ) {
-			setCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] );
-		}
-	}, [ selectedNavigationBlockId ] );
-
-	let options = [];
-	if ( navigationMenus ) {
-		options = navigationMenus.map( ( { id, title } ) => ( {
-			value: id,
-			label: title.rendered,
-		} ) );
-	}
-
-	const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor(
-		'postType',
-		'wp_navigation',
-		{ id: currentMenuId || defaultNavigationMenuId }
-	);
-
-	const { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect(
-		( select ) => {
-			const { isResolving, hasFinishedResolution } = select( coreStore );
-			return {
-				isLoadingInnerBlocks: isResolving( 'getEntityRecord', [
-					'postType',
-					'wp_navigation',
-					currentMenuId || defaultNavigationMenuId,
-				] ),
-				hasLoadedInnerBlocks: hasFinishedResolution(
-					'getEntityRecord',
-					[
-						'postType',
-						'wp_navigation',
-						currentMenuId || defaultNavigationMenuId,
-					]
-				),
-			};
-		},
-		[ currentMenuId, defaultNavigationMenuId ]
-	);
-
-	const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks );
-
-	const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1;
-
-	const hasNavigationMenus = !! navigationMenus?.length;
-
-	// Entity block editor will return entities that are not currently published.
-	// Guard by only allowing their usage if there are published Nav Menus.
-	const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
-
-	const hasInnerBlocks = !! publishedInnerBlocks?.length;
-
-	useEffect( () => {
-		if ( isResolvingNavigationMenus ) {
-			speak( 'Loading Navigation sidebar menus.' );
-		}
-
-		if ( hasResolvedNavigationMenus ) {
-			speak( 'Navigation sidebar menus have loaded.' );
-		}
-	}, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] );
-
-	useEffect( () => {
-		if ( isLoadingInnerBlocks ) {
-			speak( 'Loading Navigation sidebar selected menu items.' );
-		}
-
-		if ( hasLoadedInnerBlocks ) {
-			speak( 'Navigation sidebar selected menu items have loaded.' );
-		}
-	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
-
-	return (
-		<div className="edit-site-navigation-inspector">
-			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'There are no Navigation Menus.' ) }
-				</p>
-			) }
-
-			{ ! hasResolvedNavigationMenus && (
-				<div className="edit-site-navigation-inspector__placeholder" />
-			) }
-			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
-				<SelectControl
-					aria-controls={
-						// aria-controls should only apply when referenced element is in DOM
-						hasLoadedInnerBlocks ? navMenuListId : undefined
-					}
-					value={ currentMenuId || defaultNavigationMenuId }
-					options={ options }
-					onChange={ ( newMenuId ) =>
-						setCurrentMenuId( Number( newMenuId ) )
-					}
-				/>
-			) }
-			{ isLoading && (
-				<>
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-					<div className="edit-site-navigation-inspector__placeholder is-child" />
-				</>
-			) }
-			{ hasInnerBlocks && ! isLoading && (
-				<BlockEditorProvider
-					value={ publishedInnerBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				>
-					<NavigationMenu
-						id={ navMenuListId }
-						innerBlocks={ publishedInnerBlocks }
-					/>
-				</BlockEditorProvider>
-			) }
-
-			{ ! hasInnerBlocks && ! isLoading && (
-				<p className="edit-site-navigation-inspector__empty-msg">
-					{ __( 'Navigation Menu is empty.' ) }
-				</p>
-			) }
-		</div>
-	);
-}
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
deleted file mode 100644
index 86e7d334318cc3..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-
-const ALLOWED_BLOCKS = {
-	'core/navigation': [
-		'core/navigation-link',
-		'core/search',
-		'core/social-links',
-		'core/page-list',
-		'core/spacer',
-		'core/home-link',
-		'core/site-title',
-		'core/site-logo',
-		'core/navigation-submenu',
-	],
-	'core/social-links': [ 'core/social-link' ],
-	'core/navigation-submenu': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-	'core/navigation-link': [
-		'core/navigation-link',
-		'core/navigation-submenu',
-	],
-};
-
-export default function NavigationMenu( { innerBlocks, id } ) {
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
-
-	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
-	//Think through a better way of doing this, possible with adding allowed blocks to block library metadata
-	useEffect( () => {
-		updateBlockListSettings( '', {
-			allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ],
-		} );
-		innerBlocks.forEach( ( block ) => {
-			if ( ALLOWED_BLOCKS[ block.name ] ) {
-				updateBlockListSettings( block.clientId, {
-					allowedBlocks: ALLOWED_BLOCKS[ block.name ],
-				} );
-			}
-		} );
-	}, [ updateBlockListSettings, innerBlocks ] );
-	return <ListView id={ id } />;
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
deleted file mode 100644
index 9edb1f1787d1f1..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
-.edit-site-navigation-inspector {
-	padding: $grid-unit-20;
-
-	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
-		white-space: normal;
-	}
-
-	.block-editor-list-view-block__title {
-		margin-top: 3px;
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: 0;
-	}
-}
-
-
-.edit-site-navigation-inspector__placeholder {
-	padding: $grid-unit-10;
-	margin: $grid-unit-10;
-	background-color: $gray-100;
-	animation: loadingpulse 1s linear infinite;
-	animation-delay: 0.5s; // avoid animating for fast network responses
-
-	&.is-child {
-		margin-left: $grid-unit-30;
-		width: 50%;
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
deleted file mode 100644
index d705d0724af9f7..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-/**
- * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
- * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
- * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
- *
- * ```js
- * wp.data.dispatch( 'core/edit-site' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
- * ```
- *
- * @see PluginSidebarMoreMenuItem
- *
- * @param {Object}                props                                 Element props.
- * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
- * @param {string}                [props.className]                     An optional class name added to the sidebar body.
- * @param {string}                props.title                           Title displayed at the top of the sidebar.
- * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var el = wp.element.createElement;
- * var PanelBody = wp.components.PanelBody;
- * var PluginSidebar = wp.editSite.PluginSidebar;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function MyPluginSidebar() {
- * 	return el(
- * 			PluginSidebar,
- * 			{
- * 				name: 'my-sidebar',
- * 				title: 'My sidebar title',
- * 				icon: moreIcon,
- * 			},
- * 			el(
- * 				PanelBody,
- * 				{},
- * 				__( 'My sidebar content' )
- * 			)
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PanelBody } from '@wordpress/components';
- * import { PluginSidebar } from '@wordpress/edit-site';
- * import { more } from '@wordpress/icons';
- *
- * const MyPluginSidebar = () => (
- * 	<PluginSidebar
- * 		name="my-sidebar"
- * 		title="My sidebar title"
- * 		icon={ more }
- * 	>
- * 		<PanelBody>
- * 			{ __( 'My sidebar content' ) }
- * 		</PanelBody>
- * 	</PluginSidebar>
- * );
- * ```
- */
-export default function PluginSidebarEditSite( { className, ...props } ) {
-	const showIconLabels = useSelect(
-		( select ) => select( editSiteStore ).getSettings().showIconLabels,
-		[]
-	);
-
-	return (
-		<ComplementaryArea
-			panelClassName={ className }
-			className="edit-site-sidebar-edit-mode"
-			scope="core/edit-site"
-			showIconLabels={ showIconLabels }
-			{ ...props }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
deleted file mode 100644
index 8e5e80d9fecc57..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-
-/**
- * Internal dependencies
- */
-import { STORE_NAME } from '../../../store/constants';
-import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
-
-const SettingsHeader = ( { sidebarName } ) => {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
-	const openTemplateSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
-	const openBlockSettings = () =>
-		enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
-
-	const [ templateAriaLabel, templateActiveClass ] =
-		sidebarName === SIDEBAR_TEMPLATE
-			? // translators: ARIA label for the Template sidebar tab, selected.
-			  [ __( 'Template (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Template Settings Sidebar tab, not selected.
-			  [ __( 'Template' ), '' ];
-
-	const [ blockAriaLabel, blockActiveClass ] =
-		sidebarName === SIDEBAR_BLOCK
-			? // translators: ARIA label for the Block Settings Sidebar tab, selected.
-			  [ __( 'Block (selected)' ), 'is-active' ]
-			: // translators: ARIA label for the Block Settings Sidebar tab, not selected.
-			  [ __( 'Block' ), '' ];
-
-	/* Use a list so screen readers will announce how many tabs there are. */
-	return (
-		<ul>
-			<li>
-				<Button
-					onClick={ openTemplateSettings }
-					className={ `edit-site-sidebar-edit-mode__panel-tab ${ templateActiveClass }` }
-					aria-label={ templateAriaLabel }
-					// translators: Data label for the Template Settings Sidebar tab.
-					data-label={ __( 'Template' ) }
-				>
-					{
-						// translators: Text label for the Template Settings Sidebar tab.
-						__( 'Template' )
-					}
-				</Button>
-			</li>
-			<li>
-				<Button
-					onClick={ openBlockSettings }
-					className={ `edit-site-sidebar-edit-mode__panel-tab ${ blockActiveClass }` }
-					aria-label={ blockAriaLabel }
-					// translators: Data label for the Block Settings Sidebar tab.
-					data-label={ __( 'Block' ) }
-				>
-					{
-						// translators: Text label for the Block Settings Sidebar tab.
-						__( 'Block' )
-					}
-				</Button>
-			</li>
-		</ul>
-	);
-};
-
-export default SettingsHeader;
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
deleted file mode 100644
index 7cc1819cb1f288..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/style.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
-	justify-content: flex-start;
-	padding-left: 0;
-	padding-right: $grid-unit-20;
-	border-top: 0;
-	margin-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
-
-	.components-button.has-icon {
-		display: none;
-		margin: 0 0 0 auto;
-		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}
-
-.components-button.edit-site-sidebar-edit-mode__panel-tab {
-	border-radius: 0;
-	height: $grid-unit-60;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 500;
-
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
-	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
-	}
-
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		position: relative;
-		z-index: z-index(".edit-post-sidebar__panel-tab.is-active");
-	}
-
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-	}
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
deleted file mode 100644
index 5dcd23653f889f..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.edit-site-sidebar-edit-mode {
-	width: $sidebar-width;
-
-	> .components-panel {
-		border-left: 0;
-		border-right: 0;
-		margin-bottom: -1px;
-		margin-top: -1px;
-
-		> .components-panel__header {
-			background: $gray-100;
-		}
-	}
-
-	.block-editor-block-inspector__card {
-		margin: 0;
-	}
-}
-
-.edit-site-global-styles-sidebar {
-	display: flex;
-	flex-direction: column;
-	min-height: 100%;
-
-	&__panel,
-	&__navigator-provider {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-	}
-
-	&__navigator-screen {
-		flex: 1;
-	}
-}
-
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
-	font-size: $default-font-size * 1.2;
-	font-weight: 500;
-}
-
-.edit-site-global-styles-sidebar .components-navigation__item > button span {
-	font-weight: 500;
-}
-
-.edit-site-typography-panel,
-.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
-	border: 0;
-}
-
-.edit-site-global-styles-sidebar .single-column {
-	grid-column: span 1;
-}
-
-.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
-	grid-column: 1 / -1;
-}
-
-.edit-site-global-styles-sidebar__blocks-group {
-	padding-top: $grid-unit-30;
-	border-top: $border-width solid $gray-200;
-}
-
-.edit-site-global-styles-sidebar__blocks-group-help {
-	padding: 0 $grid-unit-20;
-}
-
-.edit-site-global-styles-color-palette-panel,
-.edit-site-global-styles-gradient-palette-panel {
-	padding: $grid-unit-20;
-}
-
-.edit-site-navigation-sidebar__beta {
-	display: inline-flex;
-	margin-left: $grid-unit-10;
-	padding: 0 $grid-unit-10;
-	height: $grid-unit-30;
-	border-radius: $radius-block-ui;
-	background-color: $gray-900;
-	color: $white;
-	align-items: center;
-	font-size: $helptext-font-size;
-	line-height: 1;
-}
-
-// Override the `hr` styles defined in the `ComplementaryArea` component
-// from the `@wordpress/interface` package.
-.edit-site-global-styles-sidebar hr {
-	margin: 0;
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
deleted file mode 100644
index 96333e3ab01f26..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { Icon } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import TemplateActions from './template-actions';
-import TemplateAreas from './template-areas';
-
-export default function TemplateCard() {
-	const {
-		info: { title, description, icon },
-		template,
-	} = 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 info = record ? getTemplateInfo( record ) : {};
-
-		return { info, template: record };
-	}, [] );
-
-	if ( ! title && ! description ) {
-		return null;
-	}
-
-	return (
-		<div className="edit-site-template-card">
-			<Icon className="edit-site-template-card__icon" icon={ icon } />
-			<div className="edit-site-template-card__content">
-				<div className="edit-site-template-card__header">
-					<h2 className="edit-site-template-card__title">
-						{ decodeEntities( title ) }
-					</h2>
-					<TemplateActions template={ template } />
-				</div>
-				<div className="edit-site-template-card__description">
-					{ decodeEntities( description ) }
-				</div>
-				<TemplateAreas />
-			</div>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-card/style.scss
deleted file mode 100644
index b02717793bb9bb..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/style.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-.edit-site-template-card {
-	display: flex;
-	align-items: flex-start;
-
-	&__content {
-		flex-grow: 1;
-		margin-bottom: $grid-unit-05;
-	}
-
-	&__title {
-		font-weight: 500;
-		line-height: $icon-size;
-		&.edit-site-template-card__title {
-			margin: 0;
-		}
-	}
-
-	&__description {
-		font-size: $default-font-size;
-		margin: 0 0 $grid-unit-20;
-	}
-
-	&__icon {
-		flex: 0 0 $icon-size;
-		margin-right: $grid-unit-15;
-		width: $icon-size;
-		height: $icon-size;
-	}
-
-	&__template-areas-list {
-		margin: 0;
-
-		> li {
-			margin: 0;
-		}
-	}
-
-	&__template-areas-item {
-		width: 100%;
-
-		// Override the default padding.
-		&.components-button.has-icon {
-			padding: 0;
-		}
-	}
-
-	&__header {
-		display: flex;
-		justify-content: space-between;
-		margin: 0 0 $grid-unit-05;
-	}
-
-	&__actions {
-		line-height: 0;
-		> .components-button.is-small.has-icon {
-			padding: 0;
-			min-width: auto;
-		}
-	}
-}
-
-h3.edit-site-template-card__template-areas-title {
-	font-weight: 500;
-	margin: 0 0 $grid-unit-10;
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-actions.js
deleted file mode 100644
index b68cf1ff617579..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-actions.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import isTemplateRevertable from '../../../utils/is-template-revertable';
-
-export default function Actions( { template } ) {
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const isRevertable = isTemplateRevertable( template );
-	if ( ! isRevertable ) {
-		return null;
-	}
-	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className="edit-site-template-card__actions"
-			toggleProps={ { isSmall: true } }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					<MenuItem
-						info={ __(
-							'Use the template as supplied by the theme.'
-						) }
-						onClick={ () => {
-							revertTemplate( template );
-							onClose();
-						} }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</DropdownMenu>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-areas.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-areas.js
deleted file mode 100644
index fd00d9d2c0e24d..00000000000000
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/template-areas.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === area
-			);
-		},
-		[ area ]
-	);
-
-	const highlightBlock = () => toggleBlockHighlight( clientId, true );
-	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
-
-	return (
-		<Button
-			className="edit-site-template-card__template-areas-item"
-			icon={ templatePartArea?.icon }
-			onMouseOver={ highlightBlock }
-			onMouseLeave={ cancelHighlightBlock }
-			onFocus={ highlightBlock }
-			onBlur={ cancelHighlightBlock }
-			onClick={ () => {
-				selectBlock( clientId );
-			} }
-		>
-			{ templatePartArea?.label }
-		</Button>
-	);
-}
-
-export default function TemplateAreas() {
-	const templateParts = useSelect(
-		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
-		[]
-	);
-
-	if ( ! templateParts.length ) {
-		return null;
-	}
-
-	return (
-		<section className="edit-site-template-card__template-areas">
-			<Heading
-				level={ 3 }
-				className="edit-site-template-card__template-areas-title"
-			>
-				{ __( 'Areas' ) }
-			</Heading>
-
-			<ul className="edit-site-template-card__template-areas-list">
-				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ templatePart.slug }>
-						<TemplateAreaItem
-							area={ templatePart.area }
-							clientId={ block.clientId }
-						/>
-					</li>
-				) ) }
-			</ul>
-		</section>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
new file mode 100644
index 00000000000000..980f20c49821b0
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles/ui';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+import StyleBook from '../style-book';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
+
+const GlobalStylesPageActions = ( {
+	isStyleBookOpened,
+	setIsStyleBookOpened,
+} ) => {
+	return (
+		<Menu
+			trigger={
+				<Button __next40pxDefaultSize variant="tertiary" size="compact">
+					{ __( 'Preview' ) }
+				</Button>
+			}
+		>
+			<Menu.RadioItem
+				value
+				checked={ isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( true ) }
+				defaultChecked
+			>
+				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview blocks and styles.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+			<Menu.RadioItem
+				value={ false }
+				checked={ ! isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( false ) }
+			>
+				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview your site.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+		</Menu>
+	);
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { path, query } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = query;
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ section, onChangeSection ] = useMemo( () => {
+		return [
+			query.section ?? '/',
+			( updatedSection ) => {
+				history.navigate(
+					addQueryArgs( path, {
+						section: updatedSection,
+					} )
+				);
+			},
+		];
+	}, [ path, query.section, history ] );
+
+	return (
+		<>
+			<Page
+				actions={
+					! isMobileViewport ? (
+						<GlobalStylesPageActions
+							isStyleBookOpened={ isStyleBookOpened }
+							setIsStyleBookOpened={ setIsStyleBookOpened }
+						/>
+					) : null
+				}
+				className="edit-site-styles"
+				title={ __( 'Styles' ) }
+			>
+				<GlobalStylesUI
+					path={ section }
+					onPathChange={ onChangeSection }
+				/>
+			</Page>
+			{ canvas === 'view' && isStyleBookOpened && (
+				<StyleBook
+					enableResizing={ false }
+					showCloseButton={ false }
+					showTabs={ false }
+					isSelected={ ( blockName ) =>
+						// Match '/blocks/core%2Fbutton' and
+						// '/blocks/core%2Fbutton/typography', but not
+						// '/blocks/core%2Fbuttons'.
+						section ===
+							`/blocks/${ encodeURIComponent( blockName ) }` ||
+						section.startsWith(
+							`/blocks/${ encodeURIComponent( blockName ) }/`
+						)
+					}
+					path={ section }
+					onSelect={ ( blockName ) => {
+						if (
+							STYLE_BOOK_COLOR_GROUPS.find(
+								( group ) => group.slug === blockName
+							)
+						) {
+							// Go to color palettes Global Styles.
+							onChangeSection( '/colors/palette' );
+							return;
+						}
+						if ( blockName === 'typography' ) {
+							// Go to typography Global Styles.
+							onChangeSection( '/typography' );
+							return;
+						}
+
+						// Now go to the selected block.
+						onChangeSection(
+							`/blocks/${ encodeURIComponent( blockName ) }`
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
new file mode 100644
index 00000000000000..88aa9ddf0c1618
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
@@ -0,0 +1,35 @@
+.edit-site-styles .edit-site-page-content {
+	.edit-site-global-styles-screen-root {
+		box-shadow: none;
+		& > div > hr {
+			display: none;
+		}
+	}
+	.edit-site-global-styles-sidebar__navigator-provider {
+		.components-tools-panel {
+			border-top: none;
+		}
+		overflow-y: auto;
+		padding-left: 0;
+		padding-right: 0;
+
+		.edit-site-global-styles-sidebar__navigator-screen {
+			padding-top: $grid-unit-15;
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+			padding-bottom: $grid-unit-15;
+			outline: none;
+		}
+	}
+	.edit-site-page-header {
+		padding-left: $grid-unit-60;
+		padding-right: $grid-unit-60;
+		@container (max-width: 430px) {
+			padding-left: $grid-unit-30;
+			padding-right: $grid-unit-30;
+		}
+	}
+	.edit-site-sidebar-button {
+		color: $gray-900;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-item/index.js
new file mode 100644
index 00000000000000..4bde94dcbbeb4d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-item/index.js
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexBlock,
+} from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { SidebarNavigationContext } from '../sidebar';
+
+const { useHistory, useLink } = unlock( routerPrivateApis );
+
+export default function SidebarNavigationItem( {
+	className,
+	icon,
+	withChevron = false,
+	suffix,
+	uid,
+	to,
+	onClick,
+	children,
+	...props
+} ) {
+	const history = useHistory();
+	const { navigate } = useContext( SidebarNavigationContext );
+	// If there is no custom click handler, create one that navigates to `params`.
+	function handleClick( e ) {
+		if ( onClick ) {
+			onClick( e );
+			navigate( 'forward' );
+		} else if ( to ) {
+			e.preventDefault();
+			history.navigate( to );
+			navigate( 'forward', `[id="${ uid }"]` );
+		}
+	}
+	const linkProps = useLink( to );
+
+	return (
+		<Item
+			className={ clsx(
+				'edit-site-sidebar-navigation-item',
+				{ 'with-suffix': ! withChevron && suffix },
+				className
+			) }
+			id={ uid }
+			onClick={ handleClick }
+			href={ to ? linkProps.href : undefined }
+			{ ...props }
+		>
+			<HStack justify="flex-start">
+				{ icon && (
+					<Icon
+						style={ { fill: 'currentcolor' } }
+						icon={ icon }
+						size={ 24 }
+					/>
+				) }
+				<FlexBlock>{ children }</FlexBlock>
+				{ withChevron && (
+					<Icon
+						icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
+						className="edit-site-sidebar-navigation-item__drilldown-indicator"
+						size={ 24 }
+					/>
+				) }
+				{ ! withChevron && suffix }
+			</HStack>
+		</Item>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
new file mode 100644
index 00000000000000..ac1cf8b730861d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -0,0 +1,35 @@
+.edit-site-sidebar-navigation-item.components-item {
+	color: $gray-600;
+	// 6px right padding to align with + button
+	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
+	border: none;
+	min-height: $grid-unit-50;
+
+	&:hover,
+	&:focus,
+	&[aria-current="true"] {
+		color: $gray-200;
+
+		.edit-site-sidebar-navigation-item__drilldown-indicator {
+			fill: $gray-200;
+		}
+	}
+
+	&[aria-current="true"] {
+		background: $gray-800;
+		color: $white;
+	}
+
+	.edit-site-sidebar-navigation-item__drilldown-indicator {
+		fill: $gray-600;
+	}
+
+	&.with-suffix {
+		padding-right: $grid-unit-20;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button {
+	cursor: grab;
+	padding: $grid-unit-10 $grid-unit-10 $grid-unit-10 0;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
new file mode 100644
index 00000000000000..f7e5f8bbec34de
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { backup } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+
+export default function SidebarNavigationScreenDetailsFooter( {
+	record,
+	revisionsCount,
+	...otherProps
+} ) {
+	/*
+	 * There might be other items in the future,
+	 * but for now it's just modified date.
+	 * Later we might render a list of items and isolate
+	 * the following logic.
+	 */
+	const hrefProps = {};
+	const lastRevisionId =
+		record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+
+	// Use incoming prop first, then the record's version history, if available.
+	revisionsCount =
+		revisionsCount ||
+		record?._links?.[ 'version-history' ]?.[ 0 ]?.count ||
+		0;
+
+	/*
+	 * Enable the revisions link if there is a last revision and there is more than one revision.
+	 * This link is used for theme assets, e.g., templates, which have no database record until they're edited.
+	 * For these files there's only a "revision" after they're edited twice,
+	 * which means the revision.php page won't display a proper diff.
+	 * See: https://github.com/WordPress/gutenberg/issues/49164.
+	 */
+	if ( lastRevisionId && revisionsCount > 1 ) {
+		hrefProps.href = addQueryArgs( 'revision.php', {
+			revision: record?._links[ 'predecessor-version' ][ 0 ].id,
+		} );
+		hrefProps.as = 'a';
+	}
+	return (
+		<ItemGroup
+			size="large"
+			className="edit-site-sidebar-navigation-screen-details-footer"
+		>
+			<SidebarNavigationItem
+				icon={ backup }
+				{ ...hrefProps }
+				{ ...otherProps }
+			>
+				{ sprintf(
+					/* translators: %d: Number of Styles revisions. */
+					_n( '%d Revision', '%d Revisions', revisionsCount ),
+					revisionsCount
+				) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
new file mode 100644
index 00000000000000..0b48d451129662
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
@@ -0,0 +1,8 @@
+.edit-site-sidebar-navigation-screen-details-footer {
+	// Default background color (no link or button).
+	div.edit-site-sidebar-navigation-item.components-item:focus,
+	div.edit-site-sidebar-navigation-item.components-item:hover,
+	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
+		background: none;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js
new file mode 100644
index 00000000000000..986238697f7346
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/content.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
+
+const noop = () => {};
+
+export default function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const gap = 3;
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer gap={ gap } />
+				<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+				<TypographyVariations
+					title={ __( 'Typography' ) }
+					gap={ gap }
+				/>
+			</VStack>
+		</BlockEditorProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
new file mode 100644
index 00000000000000..a5902dc37362c5
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
+import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+export function SidebarNavigationItemGlobalStyles( props ) {
+	const { name } = useLocation();
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			aria-current={ name === 'styles' }
+		/>
+	);
+}
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const history = useHistory();
+	const { path } = useLocation();
+	const {
+		revisions,
+		isLoading: isLoadingRevisions,
+		revisionsCount,
+	} = useGlobalStylesRevisions();
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	const openGlobalStyles = useCallback( async () => {
+		history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
+			transition: 'canvas-mode-edit-transition',
+		} );
+		return Promise.all( [
+			setPreference( 'core', 'distractionFree', false ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ path, history, openGeneralSidebar, setPreference ] );
+
+	const openRevisions = useCallback( async () => {
+		await openGlobalStyles();
+		// Open the global styles revisions once the canvas mode is set to edit,
+		// and the global styles sidebar is open. The global styles UI is responsible
+		// for redirecting to the revisions screen once the editor canvas container
+		// has been set to 'global-styles-revisions'.
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	}, [ openGlobalStyles, setEditorCanvasContainerView ] );
+
+	// If there are no revisions, do not render a footer.
+	const shouldShowGlobalStylesFooter =
+		!! revisionsCount && ! isLoadingRevisions;
+
+	return (
+		<>
+			<SidebarNavigationScreen
+				title={ __( 'Design' ) }
+				isRoot
+				description={ __(
+					'Customize the appearance of your website using the block editor.'
+				) }
+				content={
+					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
+				}
+				footer={
+					shouldShowGlobalStylesFooter && (
+						<SidebarNavigationScreenDetailsFooter
+							record={ revisions?.[ 0 ] }
+							revisionsCount={ revisionsCount }
+							onClick={ openRevisions }
+						/>
+					)
+				}
+			/>
+		</>
+	);
+}
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..5cf162a8cd28cc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export function MainSidebarNavigationContent() {
+	return (
+		<ItemGroup>
+			<SidebarNavigationItem
+				uid="navigation-navigation-item"
+				to="/navigation"
+				withChevron
+				icon={ navigation }
+			>
+				{ __( 'Navigation' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItemGlobalStyles
+				to="/styles"
+				uid="global-styles-navigation-item"
+				icon={ styles }
+			>
+				{ __( 'Styles' ) }
+			</SidebarNavigationItemGlobalStyles>
+			<SidebarNavigationItem
+				uid="page-navigation-item"
+				to="/page"
+				withChevron
+				icon={ page }
+			>
+				{ __( 'Pages' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="template-navigation-item"
+				to="/template"
+				withChevron
+				icon={ layout }
+			>
+				{ __( 'Templates' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="patterns-navigation-item"
+				to="/pattern"
+				withChevron
+				icon={ symbol }
+			>
+				{ __( 'Patterns' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	);
+}
+
+export default function SidebarNavigationScreenMain() {
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		setEditorCanvasContainerView( undefined );
+	}, [ setEditorCanvasContainerView ] );
+
+	return (
+		<SidebarNavigationScreen
+			isRoot
+			title={ __( 'Design' ) }
+			description={ __(
+				'Customize the appearance of your website using the block editor.'
+			) }
+			content={ <MainSidebarNavigationContent /> }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js
new file mode 100644
index 00000000000000..ef1fd11612ccaf
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
+	return (
+		<ConfirmDialog
+			isOpen
+			onConfirm={ () => {
+				onConfirm();
+
+				// Immediate close avoids ability to hit delete multiple times.
+				onClose();
+			} }
+			onCancel={ onClose }
+			confirmButtonText={ __( 'Delete' ) }
+			size="medium"
+		>
+			{ __( 'Are you sure you want to delete this Navigation Menu?' ) }
+		</ConfirmDialog>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
new file mode 100644
index 00000000000000..24fb9372b4fff0
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import { Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import ScreenNavigationMoreMenu from './more-menu';
+import SingleNavigationMenu from './single-navigation-menu';
+import useNavigationMenuHandlers from './use-navigation-menu-handlers';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+export const postType = `wp_navigation`;
+
+export default function SidebarNavigationScreenNavigationMenu( { backPath } ) {
+	const {
+		params: { postId },
+	} = useLocation();
+
+	const { record: navigationMenu, isResolving } = useEntityRecord(
+		'postType',
+		postType,
+		postId
+	);
+
+	const { isSaving, isDeleting } = useSelect(
+		( select ) => {
+			const { isSavingEntityRecord, isDeletingEntityRecord } =
+				select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', postType, postId ),
+				isDeleting: isDeletingEntityRecord(
+					'postType',
+					postType,
+					postId
+				),
+			};
+		},
+		[ postId ]
+	);
+
+	const isLoading = isResolving || isSaving || isDeleting;
+
+	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
+
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
+
+	const _handleDelete = () => handleDelete( navigationMenu );
+	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
+	const _handleDuplicate = () => handleDuplicate( navigationMenu );
+
+	if ( isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __(
+					'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
+				) }
+				backPath={ backPath }
+			>
+				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! isLoading && ! navigationMenu ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __( 'Navigation Menu missing.' ) }
+				backPath={ backPath }
+			/>
+		);
+	}
+
+	if ( ! navigationMenu?.content?.raw ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				actions={
+					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ _handleDelete }
+						onSave={ _handleSave }
+						onDuplicate={ _handleDuplicate }
+					/>
+				}
+				backPath={ backPath }
+				title={ buildNavigationLabel(
+					navigationMenu?.title,
+					navigationMenu?.id,
+					navigationMenu?.status
+				) }
+				description={ __( 'This Navigation Menu is empty.' ) }
+			/>
+		);
+	}
+
+	return (
+		<SingleNavigationMenu
+			navigationMenu={ navigationMenu }
+			backPath={ backPath }
+			handleDelete={ _handleDelete }
+			handleSave={ _handleSave }
+			handleDuplicate={ _handleDuplicate }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
new file mode 100644
index 00000000000000..a07167413ae119
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import RenameModal from './rename-modal';
+import DeleteConfirmDialog from './delete-confirm-dialog';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+const POPOVER_PROPS = {
+	position: 'bottom right',
+};
+
+export default function ScreenNavigationMoreMenu( props ) {
+	const { onDelete, onSave, onDuplicate, menuTitle, menuId } = props;
+
+	const [ renameModalOpen, setRenameModalOpen ] = useState( false );
+	const [ deleteConfirmDialogOpen, setDeleteConfirmDialogOpen ] =
+		useState( false );
+
+	const history = useHistory();
+
+	const closeModals = () => {
+		setRenameModalOpen( false );
+		setDeleteConfirmDialogOpen( false );
+	};
+	const openRenameModal = () => setRenameModalOpen( true );
+	const openDeleteConfirmDialog = () => setDeleteConfirmDialogOpen( true );
+
+	return (
+		<>
+			<DropdownMenu
+				className="sidebar-navigation__more-menu"
+				label={ __( 'Actions' ) }
+				icon={ moreVertical }
+				popoverProps={ POPOVER_PROPS }
+			>
+				{ ( { onClose } ) => (
+					<div>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									openRenameModal();
+									// Close the dropdown after opening the modal.
+									onClose();
+								} }
+							>
+								{ __( 'Rename' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									history.navigate(
+										`/wp_navigation/${ menuId }?canvas=edit`
+									);
+								} }
+							>
+								{ __( 'Edit' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									onDuplicate();
+									onClose();
+								} }
+							>
+								{ __( 'Duplicate' ) }
+							</MenuItem>
+							<MenuItem
+								isDestructive
+								onClick={ () => {
+									openDeleteConfirmDialog();
+
+									// Close the dropdown after opening the modal.
+									onClose();
+								} }
+							>
+								{ __( 'Delete' ) }
+							</MenuItem>
+						</MenuGroup>
+					</div>
+				) }
+			</DropdownMenu>
+			{ deleteConfirmDialogOpen && (
+				<DeleteConfirmDialog
+					onClose={ closeModals }
+					onConfirm={ onDelete }
+				/>
+			) }
+			{ renameModalOpen && (
+				<RenameModal
+					onClose={ closeModals }
+					menuTitle={ menuTitle }
+					onSave={ onSave }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js
new file mode 100644
index 00000000000000..3e19c7f5a29fcb
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content';
+
+const noop = () => {};
+
+export default function NavigationMenuEditor( { navigationMenuId } ) {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const blocks = useMemo( () => {
+		if ( ! navigationMenuId ) {
+			return [];
+		}
+
+		return [ createBlock( 'core/navigation', { ref: navigationMenuId } ) ];
+	}, [ navigationMenuId ] );
+
+	if ( ! navigationMenuId || ! blocks?.length ) {
+		return null;
+	}
+
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			value={ blocks }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
+				<NavigationMenuContent rootClientId={ blocks[ 0 ].clientId } />
+			</div>
+		</BlockEditorProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
new file mode 100644
index 00000000000000..d1a2df9df6cdc3
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
+export default function RenameModal( { menuTitle, onClose, onSave } ) {
+	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
+
+	const titleHasChanged = editedMenuTitle !== menuTitle;
+
+	const isEditedMenuTitleValid =
+		titleHasChanged && notEmptyString( editedMenuTitle );
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form className="sidebar-navigation__rename-modal-form">
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						value={ editedMenuTitle }
+						placeholder={ __( 'Navigation title' ) }
+						onChange={ setEditedMenuTitle }
+						label={ __( 'Name' ) }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							accessibleWhenDisabled
+							disabled={ ! isEditedMenuTitleValid }
+							variant="primary"
+							type="submit"
+							onClick={ ( e ) => {
+								e.preventDefault();
+
+								if ( ! isEditedMenuTitleValid ) {
+									return;
+								}
+								onSave( { title: editedMenuTitle } );
+
+								// Immediate close avoids ability to hit save multiple times.
+								onClose();
+							} }
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
new file mode 100644
index 00000000000000..d503869c8d8748
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+/**
+ * Internal dependencies
+ */
+import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
+import ScreenNavigationMoreMenu from './more-menu';
+import NavigationMenuEditor from './navigation-menu-editor';
+import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
+
+export default function SingleNavigationMenu( {
+	navigationMenu,
+	backPath,
+	handleDelete,
+	handleDuplicate,
+	handleSave,
+} ) {
+	const menuTitle = navigationMenu?.title?.rendered;
+
+	return (
+		<SidebarNavigationScreenWrapper
+			actions={
+				<>
+					<ScreenNavigationMoreMenu
+						menuId={ navigationMenu?.id }
+						menuTitle={ decodeEntities( menuTitle ) }
+						onDelete={ handleDelete }
+						onSave={ handleSave }
+						onDuplicate={ handleDuplicate }
+					/>
+				</>
+			}
+			backPath={ backPath }
+			title={ buildNavigationLabel(
+				navigationMenu?.title,
+				navigationMenu?.id,
+				navigationMenu?.status
+			) }
+			description={ __(
+				'Navigation Menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
+		</SidebarNavigationScreenWrapper>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss
new file mode 100644
index 00000000000000..012622f9b1040b
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/style.scss
@@ -0,0 +1,10 @@
+.sidebar-navigation__more-menu {
+	.components-button {
+		color: $gray-200;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $gray-100;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
new file mode 100644
index 00000000000000..11635c6c6abb12
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js
@@ -0,0 +1,194 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { postType } from '.';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useDeleteNavigationMenu() {
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const history = useHistory();
+
+	const handleDelete = async ( navigationMenu ) => {
+		const postId = navigationMenu?.id;
+		try {
+			await deleteEntityRecord(
+				'postType',
+				postType,
+				postId,
+				{
+					force: true,
+				},
+				{
+					throwOnError: true,
+				}
+			);
+			createSuccessNotice(
+				__( 'Navigation Menu successfully deleted.' ),
+				{
+					type: 'snackbar',
+				}
+			);
+			history.navivate( '/navigation' );
+		} catch ( error ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be deleted. */
+					__( `Unable to delete Navigation Menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleDelete;
+}
+
+function useSaveNavigationMenu() {
+	const { getEditedEntityRecord } = useSelect( ( select ) => {
+		const { getEditedEntityRecord: getEditedEntityRecordSelector } =
+			select( coreStore );
+
+		return {
+			getEditedEntityRecord: getEditedEntityRecordSelector,
+		};
+	}, [] );
+
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
+		const postId = navigationMenu?.id;
+		// Prepare for revert in case of error.
+		const originalRecord = getEditedEntityRecord(
+			'postType',
+			NAVIGATION_POST_TYPE,
+			postId
+		);
+
+		// Apply the edits.
+		editEntityRecord( 'postType', postType, postId, edits );
+
+		const recordPropertiesToSave = Object.keys( edits );
+
+		// Attempt to persist.
+		try {
+			await saveSpecifiedEntityEdits(
+				'postType',
+				postType,
+				postId,
+				recordPropertiesToSave,
+				{
+					throwOnError: true,
+				}
+			);
+			createSuccessNotice( __( 'Renamed Navigation Menu' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			// Revert to original in case of error.
+			editEntityRecord( 'postType', postType, postId, originalRecord );
+
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be renamed. */
+					__( `Unable to rename Navigation Menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleSave;
+}
+
+function useDuplicateNavigationMenu() {
+	const history = useHistory();
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const handleDuplicate = async ( navigationMenu ) => {
+		const menuTitle =
+			navigationMenu?.title?.rendered || navigationMenu?.slug;
+
+		try {
+			const savedRecord = await saveEntityRecord(
+				'postType',
+				postType,
+				{
+					title: sprintf(
+						/* translators: %s: Navigation menu title */
+						_x( '%s (Copy)', 'navigation menu' ),
+						menuTitle
+					),
+					content: navigationMenu?.content?.raw,
+					status: 'publish',
+				},
+				{
+					throwOnError: true,
+				}
+			);
+
+			if ( savedRecord ) {
+				createSuccessNotice( __( 'Duplicated Navigation Menu' ), {
+					type: 'snackbar',
+				} );
+				history.navigate( `/wp_navigation/${ savedRecord.id }` );
+			}
+		} catch ( error ) {
+			createErrorNotice(
+				sprintf(
+					/* translators: %s: error message describing why the navigation menu could not be deleted. */
+					__( `Unable to duplicate Navigation Menu (%s).` ),
+					error?.message
+				),
+
+				{
+					type: 'snackbar',
+				}
+			);
+		}
+	};
+
+	return handleDuplicate;
+}
+
+export default function useNavigationMenuHandlers() {
+	return {
+		handleDelete: useDeleteNavigationMenu(),
+		handleSave: useSaveNavigationMenu(),
+		handleDuplicate: useDuplicateNavigationMenu(),
+	};
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js
new file mode 100644
index 00000000000000..3e995eb8cdccfb
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+export default function buildNavigationLabel( title, id, status ) {
+	if ( ! title?.rendered ) {
+		/* translators: %s: the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title?.rendered );
+	}
+
+	return sprintf(
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
+		decodeEntities( title?.rendered ),
+		status
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
new file mode 100644
index 00000000000000..643a452901b541
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
@@ -0,0 +1,13 @@
+// This requested is preloaded in `gutenberg_preload_navigation_posts`.
+// As unbounded queries are limited to 100 by `fetchAllMiddleware`
+// on apiFetch this query is limited to 100.
+// These parameters must be kept aligned with those in
+// lib/compat/wordpress-6.3/navigation-block-preloading.php
+// and
+// block-library/src/navigation/constants.js
+export const PRELOADED_NAVIGATION_MENUS_QUERY = {
+	per_page: 100,
+	status: [ 'publish', 'draft' ],
+	order: 'desc',
+	orderby: 'date',
+};
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
new file mode 100644
index 00000000000000..dc3dd879611843
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	__experimentalItemGroup as ItemGroup,
+	Spinner,
+} from '@wordpress/components';
+import { navigation } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
+import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu';
+import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers';
+import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+
+// Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
+function buildMenuLabel( title, id, status ) {
+	if ( ! title ) {
+		/* translators: %s: the index of the menu in the list of menus. */
+		return sprintf( __( '(no title %s)' ), id );
+	}
+
+	if ( status === 'publish' ) {
+		return decodeEntities( title );
+	}
+
+	return sprintf(
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
+		decodeEntities( title ),
+		status
+	);
+}
+
+export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		NAVIGATION_POST_TYPE,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const isLoading =
+		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
+
+	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
+	const isCreatingNavigationFallback = useSelect(
+		( select ) =>
+			select( coreStore ).isResolving( 'getNavigationFallbackId' ),
+		[]
+	);
+
+	const firstNavigationMenu = navigationMenus?.[ 0 ];
+
+	// If there is no navigation menu found
+	// then trigger fallback algorithm to create one.
+	if (
+		! firstNavigationMenu &&
+		! isResolvingNavigationMenus &&
+		hasResolvedNavigationMenus &&
+		// Ensure a fallback navigation is created only once
+		! isCreatingNavigationFallback
+	) {
+		getNavigationFallbackId();
+	}
+
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+
+	if ( isLoading ) {
+		return (
+			<SidebarNavigationScreenWrapper backPath={ backPath }>
+				<Spinner className="edit-site-sidebar-navigation-screen-navigation-menus__loading" />
+			</SidebarNavigationScreenWrapper>
+		);
+	}
+
+	if ( ! isLoading && ! hasNavigationMenus ) {
+		return (
+			<SidebarNavigationScreenWrapper
+				description={ __( 'No Navigation Menus found.' ) }
+				backPath={ backPath }
+			/>
+		);
+	}
+
+	// if single menu then render it
+	if ( navigationMenus?.length === 1 ) {
+		return (
+			<SingleNavigationMenu
+				navigationMenu={ firstNavigationMenu }
+				backPath={ backPath }
+				handleDelete={ () => handleDelete( firstNavigationMenu ) }
+				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
+			/>
+		);
+	}
+
+	return (
+		<SidebarNavigationScreenWrapper backPath={ backPath }>
+			<ItemGroup>
+				{ navigationMenus?.map( ( { id, title, status }, index ) => (
+					<NavMenuItem
+						postId={ id }
+						key={ id }
+						withChevron
+						icon={ navigation }
+					>
+						{ buildMenuLabel( title?.rendered, index + 1, status ) }
+					</NavMenuItem>
+				) ) }
+			</ItemGroup>
+		</SidebarNavigationScreenWrapper>
+	);
+}
+
+export function SidebarNavigationScreenWrapper( {
+	children,
+	actions,
+	title,
+	description,
+	backPath,
+} ) {
+	return (
+		<SidebarNavigationScreen
+			title={ title || __( 'Navigation' ) }
+			actions={ actions }
+			description={ description || __( 'Manage your Navigation Menus.' ) }
+			backPath={ backPath }
+			content={ children }
+		/>
+	);
+}
+
+const NavMenuItem = ( { postId, ...props } ) => {
+	return (
+		<SidebarNavigationItem
+			to={ `/wp_navigation/${ postId }` }
+			{ ...props }
+		/>
+	);
+};
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
new file mode 100644
index 00000000000000..ba01faab0291ce
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+
+import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	placement: 'bottom-start',
+};
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+export default function LeafMoreMenu( props ) {
+	const history = useHistory();
+	const { path } = useLocation();
+	const { block } = props;
+	const { clientId } = block;
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const goToLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Go to %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	const onGoToPage = useCallback(
+		( selectedBlock ) => {
+			const { attributes, name } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.navigate(
+					`/${ attributes.type }/${ attributes.id }?canvas=edit`,
+					{
+						state: { backPath: path },
+					}
+				);
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.navigate( `/page/${ attributes.id }?canvas=edit`, {
+					state: { backPath: path },
+				} );
+			}
+		},
+		[ path, history ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						{ block.attributes?.type === 'page' &&
+							block.attributes?.id && (
+								<MenuItem
+									onClick={ () => {
+										onGoToPage( block );
+										onClose();
+									} }
+								>
+									{ goToLabel }
+								</MenuItem>
+							) }
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
new file mode 100644
index 00000000000000..6cc3138c9c2f7f
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -0,0 +1,112 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	BlockList,
+} from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import LeafMoreMenu from './leaf-more-menu';
+
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
+// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
+const MAX_PAGE_COUNT = 100;
+const PAGES_QUERY = [
+	'postType',
+	'page',
+	{
+		per_page: MAX_PAGE_COUNT,
+		_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],
+		// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+		// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+		// sort.
+		orderby: 'menu_order',
+		order: 'asc',
+	},
+];
+
+export default function NavigationMenuContent( { rootClientId } ) {
+	const { listViewRootClientId, isLoading } = useSelect(
+		( select ) => {
+			const {
+				areInnerBlocksControlled,
+				getBlockName,
+				getBlockCount,
+				getBlockOrder,
+			} = select( blockEditorStore );
+			const { isResolving } = select( coreStore );
+
+			const blockClientIds = getBlockOrder( rootClientId );
+
+			const hasOnlyPageListBlock =
+				blockClientIds.length === 1 &&
+				getBlockName( blockClientIds[ 0 ] ) === 'core/page-list';
+			const pageListHasBlocks =
+				hasOnlyPageListBlock &&
+				getBlockCount( blockClientIds[ 0 ] ) > 0;
+
+			const isLoadingPages = isResolving(
+				'getEntityRecords',
+				PAGES_QUERY
+			);
+
+			return {
+				listViewRootClientId: pageListHasBlocks
+					? blockClientIds[ 0 ]
+					: rootClientId,
+				// This is a small hack to wait for the navigation block
+				// to actually load its inner blocks.
+				isLoading:
+					! areInnerBlocksControlled( rootClientId ) ||
+					isLoadingPages,
+			};
+		},
+		[ rootClientId ]
+	);
+	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const offCanvasOnselect = useCallback(
+		( block ) => {
+			if (
+				block.name === 'core/navigation-link' &&
+				! block.attributes.url
+			) {
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlock(
+					block.clientId,
+					createBlock( 'core/navigation-link', block.attributes )
+				);
+			}
+		},
+		[ __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+	);
+
+	// The hidden block is needed because it makes block edit side effects trigger.
+	// For example a navigation page list load its items has an effect on edit to load its items.
+	return (
+		<>
+			{ ! isLoading && (
+				<PrivateListView
+					rootClientId={ listViewRootClientId }
+					onSelect={ offCanvasOnselect }
+					blockSettingsMenu={ LeafMoreMenu }
+					showAppender={ false }
+				/>
+			) }
+			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
+				<BlockList />
+			</div>
+		</>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
new file mode 100644
index 00000000000000..544aad5075aec0
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -0,0 +1,48 @@
+.edit-site-sidebar-navigation-screen__description {
+	margin: 0 0 $grid-unit-40 0;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__content {
+	.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell {
+		width: 100%;
+	}
+
+	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
+		white-space: normal;
+	}
+
+	.block-editor-list-view-block__title {
+		margin-top: 3px;
+	}
+
+	.block-editor-list-view-block__menu-cell {
+		padding-right: 0;
+	}
+
+	.block-editor-list-view-block-select-button {
+		color: $gray-600;
+		&:hover,
+		&:focus,
+		&[aria-current] {
+			color: $white;
+		}
+	}
+
+	.block-editor-list-view-block__menu {
+		color: $gray-600;
+		&:hover,
+		&:focus {
+			color: $white;
+		}
+	}
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
+	margin-left: auto;
+	margin-right: auto;
+	display: block;
+}
+
+.edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor {
+	display: none;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js
new file mode 100644
index 00000000000000..4e92af1d84f50e
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/category-item.js
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+
+export default function CategoryItem( {
+	count,
+	icon,
+	id,
+	isActive,
+	label,
+	type,
+} ) {
+	if ( ! count ) {
+		return;
+	}
+	const queryArgs = [ `postType=${ type }` ];
+	if ( id ) {
+		queryArgs.push( `categoryId=${ id }` );
+	}
+
+	return (
+		<SidebarNavigationItem
+			icon={ icon }
+			suffix={ <span>{ count }</span> }
+			aria-current={ isActive ? 'true' : undefined }
+			to={ `/pattern?${ queryArgs.join( '&' ) }` }
+		>
+			{ label }
+		</SidebarNavigationItem>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
new file mode 100644
index 00000000000000..d63389ad3be312
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { getTemplatePartIcon } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { file } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import CategoryItem from './category-item';
+import {
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
+} from '../../utils/constants';
+import usePatternCategories from './use-pattern-categories';
+import useTemplatePartAreas from './use-template-part-areas';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function CategoriesGroup( {
+	templatePartAreas,
+	patternCategories,
+	currentCategory,
+	currentType,
+} ) {
+	const [ allPatterns, ...otherPatterns ] = patternCategories;
+
+	return (
+		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+			<CategoryItem
+				key="all"
+				count={ Object.values( templatePartAreas )
+					.map( ( { templateParts } ) => templateParts?.length || 0 )
+					.reduce( ( acc, val ) => acc + val, 0 ) }
+				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
+				label={ __( 'All template parts' ) }
+				id={ TEMPLATE_PART_ALL_AREAS_CATEGORY }
+				type={ TEMPLATE_PART_POST_TYPE }
+				isActive={
+					currentCategory === TEMPLATE_PART_ALL_AREAS_CATEGORY &&
+					currentType === TEMPLATE_PART_POST_TYPE
+				}
+			/>
+			{ Object.entries( templatePartAreas ).map(
+				( [ area, { label, templateParts } ] ) => (
+					<CategoryItem
+						key={ area }
+						count={ templateParts?.length }
+						icon={ getTemplatePartIcon( area ) }
+						label={ label }
+						id={ area }
+						type={ TEMPLATE_PART_POST_TYPE }
+						isActive={
+							currentCategory === area &&
+							currentType === TEMPLATE_PART_POST_TYPE
+						}
+					/>
+				)
+			) }
+			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
+			{ allPatterns && (
+				<CategoryItem
+					key={ allPatterns.name }
+					count={ allPatterns.count }
+					label={ allPatterns.label }
+					icon={ file }
+					id={ allPatterns.name }
+					type={ PATTERN_TYPES.user }
+					isActive={
+						currentCategory === `${ allPatterns.name }` &&
+						currentType === PATTERN_TYPES.user
+					}
+				/>
+			) }
+			{ otherPatterns.map( ( category ) => (
+				<CategoryItem
+					key={ category.name }
+					count={ category.count }
+					label={ category.label }
+					icon={ file }
+					id={ category.name }
+					type={ PATTERN_TYPES.user }
+					isActive={
+						currentCategory === `${ category.name }` &&
+						currentType === PATTERN_TYPES.user
+					}
+				/>
+			) ) }
+		</ItemGroup>
+	);
+}
+
+export default function SidebarNavigationScreenPatterns( { backPath } ) {
+	const {
+		query: { postType = 'wp_block', categoryId },
+	} = useLocation();
+	const currentCategory =
+		categoryId ||
+		( postType === PATTERN_TYPES.user
+			? PATTERN_DEFAULT_CATEGORY
+			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
+
+	const { templatePartAreas, hasTemplateParts, isLoading } =
+		useTemplatePartAreas();
+	const { patternCategories, hasPatterns } = usePatternCategories();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	return (
+		<SidebarNavigationScreen
+			isRoot={ ! isBlockBasedTheme }
+			title={ __( 'Patterns' ) }
+			description={ __(
+				'Manage what patterns are available when editing the site.'
+			) }
+			backPath={ backPath }
+			content={
+				<>
+					{ isLoading && __( 'Loading items…' ) }
+					{ ! isLoading && (
+						<>
+							{ ! hasTemplateParts && ! hasPatterns && (
+								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+									<Item>{ __( 'No items found' ) }</Item>
+								</ItemGroup>
+							) }
+							<CategoriesGroup
+								templatePartAreas={ templatePartAreas }
+								patternCategories={ patternCategories }
+								currentCategory={ currentCategory }
+								currentType={ postType }
+							/>
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
new file mode 100644
index 00000000000000..19885eb3baf2cb
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/style.scss
@@ -0,0 +1,28 @@
+.edit-site-sidebar-navigation-screen-patterns__group {
+	margin-bottom: $grid-unit-30;
+
+	&:last-of-type {
+		border-bottom: 0;
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__group-header {
+	margin-top: $grid-unit-20;
+
+	p {
+		color: $gray-600;
+	}
+
+	h2 {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-patterns__divider {
+	border-top: 1px solid $gray-800;
+	margin: $grid-unit-20 0;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-default-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-default-pattern-categories.js
new file mode 100644
index 00000000000000..014d0e2e65b0ce
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-default-pattern-categories.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useDefaultPatternCategories() {
+	const blockPatternCategories = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+
+		return (
+			settings.__experimentalAdditionalBlockPatternCategories ??
+			settings.__experimentalBlockPatternCategories
+		);
+	} );
+
+	const restBlockPatternCategories = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatternCategories()
+	);
+
+	return [
+		...( blockPatternCategories || [] ),
+		...( restBlockPatternCategories || [] ),
+	];
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
new file mode 100644
index 00000000000000..70aaf12dc68c77
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useDefaultPatternCategories from './use-default-pattern-categories';
+import useThemePatterns from './use-theme-patterns';
+import usePatterns from '../page-patterns/use-patterns';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
+
+export default function usePatternCategories() {
+	const defaultCategories = useDefaultPatternCategories();
+	defaultCategories.push( {
+		name: TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+		label: __( 'Uncategorized' ),
+	} );
+	const themePatterns = useThemePatterns();
+	const { patterns: userPatterns, categories: userPatternCategories } =
+		usePatterns( PATTERN_TYPES.user );
+
+	const patternCategories = useMemo( () => {
+		const categoryMap = {};
+		const categoriesWithCounts = [];
+
+		// Create a map for easier counting of patterns in categories.
+		defaultCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
+				categoryMap[ category.name ] = { ...category, count: 0 };
+			}
+		} );
+		userPatternCategories.forEach( ( category ) => {
+			if ( ! categoryMap[ category.name ] ) {
+				categoryMap[ category.name ] = { ...category, count: 0 };
+			}
+		} );
+
+		// Update the category counts to reflect theme registered patterns.
+		themePatterns.forEach( ( pattern ) => {
+			pattern.categories?.forEach( ( category ) => {
+				if ( categoryMap[ category ] ) {
+					categoryMap[ category ].count += 1;
+				}
+			} );
+			// If the pattern has no categories, add it to uncategorized.
+			if ( ! pattern.categories?.length ) {
+				categoryMap.uncategorized.count += 1;
+			}
+		} );
+
+		// Update the category counts to reflect user registered patterns.
+		userPatterns.forEach( ( pattern ) => {
+			pattern.wp_pattern_category?.forEach( ( catId ) => {
+				const category = userPatternCategories.find(
+					( cat ) => cat.id === catId
+				)?.name;
+				if ( categoryMap[ category ] ) {
+					categoryMap[ category ].count += 1;
+				}
+			} );
+			// If the pattern has no categories, add it to uncategorized.
+			if (
+				! pattern.wp_pattern_category?.length ||
+				! pattern.wp_pattern_category?.some( ( catId ) =>
+					userPatternCategories.find( ( cat ) => cat.id === catId )
+				)
+			) {
+				categoryMap.uncategorized.count += 1;
+			}
+		} );
+
+		// Filter categories so we only have those containing patterns.
+		[ ...defaultCategories, ...userPatternCategories ].forEach(
+			( category ) => {
+				if (
+					categoryMap[ category.name ].count &&
+					! categoriesWithCounts.find(
+						( cat ) => cat.name === category.name
+					)
+				) {
+					categoriesWithCounts.push( categoryMap[ category.name ] );
+				}
+			}
+		);
+		const sortedCategories = categoriesWithCounts.sort( ( a, b ) =>
+			a.label.localeCompare( b.label )
+		);
+
+		sortedCategories.unshift( {
+			name: PATTERN_USER_CATEGORY,
+			label: __( 'My patterns' ),
+			count: userPatterns.length,
+		} );
+
+		sortedCategories.unshift( {
+			name: PATTERN_DEFAULT_CATEGORY,
+			label: __( 'All patterns' ),
+			description: __( 'A list of all patterns from all sources.' ),
+			count: themePatterns.length + userPatterns.length,
+		} );
+
+		return sortedCategories;
+	}, [
+		defaultCategories,
+		themePatterns,
+		userPatternCategories,
+		userPatterns,
+	] );
+
+	return { patternCategories, hasPatterns: !! patternCategories.length };
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
new file mode 100644
index 00000000000000..6a67a8f8a30fb9
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+
+const useTemplatePartsGroupedByArea = ( items ) => {
+	const allItems = items || [];
+
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
+		[]
+	);
+
+	// Create map of template areas ensuring that default areas are displayed before
+	// any custom registered template part areas.
+	const knownAreas = {
+		header: {},
+		footer: {},
+		sidebar: {},
+		uncategorized: {},
+	};
+
+	templatePartAreas.forEach(
+		( templatePartArea ) =>
+			( knownAreas[ templatePartArea.area ] = {
+				...templatePartArea,
+				templateParts: [],
+			} )
+	);
+
+	const groupedByArea = allItems.reduce( ( accumulator, item ) => {
+		const key = accumulator[ item.area ]
+			? item.area
+			: TEMPLATE_PART_AREA_DEFAULT_CATEGORY;
+		accumulator[ key ]?.templateParts?.push( item );
+		return accumulator;
+	}, knownAreas );
+
+	return groupedByArea;
+};
+
+export default function useTemplatePartAreas() {
+	const { records: templateParts, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		TEMPLATE_PART_POST_TYPE,
+		{ per_page: -1 }
+	);
+
+	return {
+		hasTemplateParts: templateParts ? !! templateParts.length : false,
+		isLoading,
+		templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
+	};
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js
new file mode 100644
index 00000000000000..93cb8d9fbcf42c
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-theme-patterns.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { filterOutDuplicatesByName } from '../page-patterns/utils';
+import { EXCLUDED_PATTERN_SOURCES } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+export default function useThemePatterns() {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return (
+			getSettings().__experimentalAdditionalBlockPatterns ??
+			getSettings().__experimentalBlockPatterns
+		);
+	} );
+
+	const restBlockPatterns = useSelect( ( select ) =>
+		select( coreStore ).getBlockPatterns()
+	);
+
+	const patterns = useMemo(
+		() =>
+			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
+				.filter(
+					( pattern ) =>
+						! EXCLUDED_PATTERN_SOURCES.includes( pattern.source )
+				)
+				.filter( filterOutDuplicatesByName )
+				.filter( ( pattern ) => pattern.inserter !== false ),
+		[ blockPatterns, restBlockPatterns ]
+	);
+
+	return patterns;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
new file mode 100644
index 00000000000000..aad38959c73dcd
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityRecords } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import { useAddedBy } from '../page-templates/hooks';
+import { layout } from '@wordpress/icons';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const EMPTY_ARRAY = [];
+
+function TemplateDataviewItem( { template, isActive } ) {
+	const { text, icon } = useAddedBy( template.type, template.id );
+
+	return (
+		<SidebarNavigationItem
+			to={ addQueryArgs( '/template', { activeView: text } ) }
+			icon={ icon }
+			aria-current={ isActive }
+		>
+			{ text }
+		</SidebarNavigationItem>
+	);
+}
+
+export default function DataviewsTemplatesSidebarContent() {
+	const {
+		query: { activeView = 'all' },
+	} = useLocation();
+	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+		per_page: -1,
+	} );
+	const firstItemPerAuthorText = useMemo( () => {
+		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
+			const author = template.author_text;
+			if ( author && ! acc[ author ] ) {
+				acc[ author ] = template;
+			}
+			return acc;
+		}, {} );
+		return (
+			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
+			EMPTY_ARRAY
+		);
+	}, [ records ] );
+
+	return (
+		<ItemGroup>
+			<SidebarNavigationItem
+				to="/template"
+				icon={ layout }
+				aria-current={ activeView === 'all' }
+			>
+				{ __( 'All templates' ) }
+			</SidebarNavigationItem>
+			{ firstItemPerAuthorText.map( ( template ) => {
+				return (
+					<TemplateDataviewItem
+						key={ template.author_text }
+						template={ template }
+						isActive={ activeView === template.author_text }
+					/>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
new file mode 100644
index 00000000000000..d2215a9abd9c61
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataviewsTemplatesSidebarContent from './content';
+
+export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Templates' ) }
+			description={ __(
+				'Create new templates, or reset any customizations made to the templates supplied by your theme.'
+			) }
+			backPath={ backPath }
+			content={ <DataviewsTemplatesSidebarContent /> }
+		/>
+	);
+}
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..c6b3742a3fd8bc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { isRTL, __, sprintf } from '@wordpress/i18n';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import SidebarButton from '../sidebar-button';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { SidebarNavigationContext } from '../sidebar';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+export default function SidebarNavigationScreen( {
+	isRoot,
+	title,
+	actions,
+	meta,
+	content,
+	footer,
+	description,
+	backPath: backPathProp,
+} ) {
+	const { dashboardLink, dashboardLinkText, previewingThemeName } = useSelect(
+		( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const currentlyPreviewingThemeId = currentlyPreviewingTheme();
+			return {
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				dashboardLinkText:
+					getSettings().__experimentalDashboardLinkText,
+				// Do not call `getTheme` with null, it will cause a request to
+				// the server.
+				previewingThemeName: currentlyPreviewingThemeId
+					? select( coreStore ).getTheme( currentlyPreviewingThemeId )
+							?.name?.rendered
+					: undefined,
+			};
+		},
+		[]
+	);
+	const location = useLocation();
+	const history = useHistory();
+	const { navigate } = useContext( SidebarNavigationContext );
+	const backPath = backPathProp ?? location.state?.backPath;
+	const icon = isRTL() ? chevronRight : chevronLeft;
+
+	return (
+		<>
+			<VStack
+				className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
+					'has-footer': !! footer,
+				} ) }
+				spacing={ 0 }
+				justify="flex-start"
+			>
+				<HStack
+					spacing={ 3 }
+					alignment="flex-start"
+					className="edit-site-sidebar-navigation-screen__title-icon"
+				>
+					{ ! isRoot && (
+						<SidebarButton
+							onClick={ () => {
+								history.navigate( backPath );
+								navigate( 'back' );
+							} }
+							icon={ icon }
+							label={ __( 'Back' ) }
+							showTooltip={ false }
+						/>
+					) }
+					{ isRoot && (
+						<SidebarButton
+							icon={ icon }
+							label={
+								dashboardLinkText || __( 'Go to the Dashboard' )
+							}
+							href={ dashboardLink }
+						/>
+					) }
+					<Heading
+						className="edit-site-sidebar-navigation-screen__title"
+						color={ '#e0e0e0' /* $gray-200 */ }
+						level={ 1 }
+						size={ 20 }
+					>
+						{ ! isPreviewingTheme()
+							? title
+							: sprintf(
+									/* translators: 1: theme name. 2: title */
+									__( 'Previewing %1$s: %2$s' ),
+									previewingThemeName,
+									title
+							  ) }
+					</Heading>
+					{ actions && (
+						<div className="edit-site-sidebar-navigation-screen__actions">
+							{ actions }
+						</div>
+					) }
+				</HStack>
+				{ meta && (
+					<>
+						<div className="edit-site-sidebar-navigation-screen__meta">
+							{ meta }
+						</div>
+					</>
+				) }
+
+				<div className="edit-site-sidebar-navigation-screen__content">
+					{ description && (
+						<p className="edit-site-sidebar-navigation-screen__description">
+							{ description }
+						</p>
+					) }
+					{ content }
+				</div>
+			</VStack>
+			{ footer && (
+				<footer className="edit-site-sidebar-navigation-screen__footer">
+					{ footer }
+				</footer>
+			) }
+		</>
+	);
+}
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..1486e6b7258441
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -0,0 +1,165 @@
+.edit-site-sidebar-navigation-screen {
+	display: flex;
+	flex-direction: column;
+	overflow-x: unset !important;
+	position: relative;
+}
+
+.edit-site-sidebar-navigation-screen__main {
+	// Ensure the sidebar is always at least as tall as the viewport.
+	// This allows the footer section to be sticky at the bottom of the viewport.
+	flex-grow: 1;
+	margin-bottom: $grid-unit-20;
+	&.has-footer {
+		margin-bottom: 0;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__content {
+	padding: 0 $grid-unit-20;
+
+	.components-item-group {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
+
+	.components-text {
+		color: $gray-400;
+	}
+
+	.components-heading {
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__meta {
+	margin: 0 0 $grid-unit-20 $grid-unit-20;
+	color: $gray-400;
+	.components-text {
+		color: $gray-400;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__page-link {
+	color: $gray-600;
+	display: inline-block;
+	word-break: break-word;
+
+	&:hover,
+	&:focus {
+		color: $white;
+	}
+
+	.components-external-link__icon {
+		margin-left: $grid-unit-05;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__title-icon {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding-top: $grid-unit-60;
+	margin-bottom: $grid-unit-10;
+	padding-bottom: $grid-unit-10;
+	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
+}
+
+.edit-site-sidebar-navigation-screen__title {
+	flex-grow: 1;
+	overflow-wrap: break-word;
+
+	&#{&},
+	&#{&} .edit-site-sidebar-navigation-screen__title {
+		line-height: $font-line-height-x-large;
+	}
+}
+
+.edit-site-sidebar-navigation-screen__actions {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
+	@include break-medium() {
+		// Safari does not currently support `scrollbar-gutter: stable`, so at
+		// particular viewport sizes it's possible for previews to render prior to a
+		// scrollbar appearing. This then causes a scrollbar to appear, which reduces
+		// the width of the container and can cause the preview's width to change.
+		// As a result, the preview can go into an endless loop of resizing, causing
+		// the preview elements to appear to "dance". A workaround is to provide a
+		// max-width for the container, which prevents the introduction of the scrollbar
+		// from causing the preview's width to change.
+		// See: https://github.com/WordPress/gutenberg/issues/55112
+		max-width: 292px;
+	}
+}
+
+.edit-site-global-styles-variation-title {
+	color: $gray-300;
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+
+	// Use a white outline to provide contrast with the dark background.
+	.edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.05);
+	}
+
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.15);
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		outline-color: $white;
+	}
+
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-sidebar-navigation-screen__footer {
+	position: sticky;
+	bottom: 0;
+	background-color: $gray-900;
+	gap: 0;
+	padding: $grid-unit-10 $grid-unit-20;
+	margin: $grid-unit-20 0 0;
+	border-top: 1px solid $gray-800;
+
+	.edit-site-sidebar-navigation-screen-details-footer {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
+}
+
+/* In general style overrides are discouraged.
+ * This is a temporary solution to override the InputControl component's styles.
+ * The `Theme` component will potentially be the more appropriate approach
+ * once that component is stabilized.
+ * See: packages/components/src/theme
+ */
+.edit-site-sidebar-navigation-screen__input-control {
+	width: 100%;
+	.components-input-control__container {
+		background: $gray-800;
+
+		.components-button {
+			color: $gray-200 !important;
+		}
+	}
+	.components-input-control__input {
+		color: $gray-200 !important;
+		background: $gray-800 !important;
+	}
+	.components-input-control__backdrop {
+		border: 4px !important;
+	}
+	.components-base-control__help {
+		color: $gray-600;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
new file mode 100644
index 00000000000000..7ecd24719a47bf
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useState,
+	useRef,
+	useLayoutEffect,
+} from '@wordpress/element';
+import { focus } from '@wordpress/dom';
+
+export const SidebarNavigationContext = createContext( () => {} );
+// Focus a sidebar element after a navigation. The element to focus is either
+// specified by `focusSelector` (when navigating back) or it is the first
+// tabbable element (usually the "Back" button).
+function focusSidebarElement( el, direction, focusSelector ) {
+	let elementToFocus;
+	if ( direction === 'back' && focusSelector ) {
+		elementToFocus = el.querySelector( focusSelector );
+	}
+	if ( direction !== null && ! elementToFocus ) {
+		const [ firstTabbable ] = focus.tabbable.find( el );
+		elementToFocus = firstTabbable ?? el;
+	}
+	elementToFocus?.focus();
+}
+
+// Navigation state that is updated when navigating back or forward. Helps us
+// manage the animations and also focus.
+function createNavState() {
+	let state = {
+		direction: null,
+		focusSelector: null,
+	};
+
+	return {
+		get() {
+			return state;
+		},
+		navigate( direction, focusSelector = null ) {
+			state = {
+				direction,
+				focusSelector:
+					direction === 'forward' && focusSelector
+						? focusSelector
+						: state.focusSelector,
+			};
+		},
+	};
+}
+
+function SidebarContentWrapper( { children, shouldAnimate } ) {
+	const navState = useContext( SidebarNavigationContext );
+	const wrapperRef = useRef();
+	const [ navAnimation, setNavAnimation ] = useState( null );
+
+	useLayoutEffect( () => {
+		const { direction, focusSelector } = navState.get();
+		focusSidebarElement( wrapperRef.current, direction, focusSelector );
+		setNavAnimation( direction );
+	}, [ navState ] );
+
+	const wrapperCls = clsx(
+		'edit-site-sidebar__screen-wrapper',
+		/*
+		 * Some panes do not have sub-panes and therefore
+		 * should not animate when clicked on.
+		 */
+		shouldAnimate
+			? {
+					'slide-from-left': navAnimation === 'back',
+					'slide-from-right': navAnimation === 'forward',
+			  }
+			: {}
+	);
+
+	return (
+		<div ref={ wrapperRef } className={ wrapperCls }>
+			{ children }
+		</div>
+	);
+}
+
+export default function SidebarContent( {
+	routeKey,
+	shouldAnimate,
+	children,
+} ) {
+	const [ navState ] = useState( createNavState );
+
+	return (
+		<SidebarNavigationContext.Provider value={ navState }>
+			<div className="edit-site-sidebar__content">
+				<SidebarContentWrapper
+					shouldAnimate={ shouldAnimate }
+					key={ routeKey }
+				>
+					{ children }
+				</SidebarContentWrapper>
+			</div>
+		</SidebarNavigationContext.Provider>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
new file mode 100644
index 00000000000000..d2f3e450cca133
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -0,0 +1,63 @@
+.edit-site-sidebar__content {
+	flex-grow: 1;
+	overflow-y: auto;
+	// Prevents horizontal overflow while animating screen transitions
+	overflow-x: hidden;
+	// Mark this section of the DOM as isolated, providing performance benefits
+	// by limiting calculations of layout, style and paint to a DOM subtree rather
+	// than the entire page.
+	contain: content;
+}
+
+@keyframes local--slide-from-right {
+	from {
+		transform: translateX(50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
+@keyframes local--slide-from-left {
+	from {
+		transform: translateX(-50px);
+		opacity: 0;
+	}
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+
+.edit-site-sidebar__screen-wrapper {
+	overflow-x: auto;
+	@include custom-scrollbars-on-hover(transparent, $gray-700);
+	scrollbar-gutter: stable;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-height: 100%;
+
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
+
+	// Animation
+	animation-duration: 0.14s;
+	animation-timing-function: ease-in-out;
+	will-change: transform, opacity;
+
+	@media ( prefers-reduced-motion: reduce ) {
+		animation-duration: 0s;
+	}
+
+	&.slide-from-left {
+		animation-name: local--slide-from-left;
+	}
+
+	&.slide-from-right {
+		animation-name: local--slide-from-right;
+	}
+
+}
diff --git a/packages/edit-site/src/components/site-editor-routes/README.md b/packages/edit-site/src/components/site-editor-routes/README.md
new file mode 100644
index 00000000000000..06e2cfdd331f1b
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/README.md
@@ -0,0 +1,20 @@
+# Site Editor Routes
+
+## Areas
+
+When `canvasMode` is not `edit`, the areas available to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `content` | Rendered if provided. | Not rendered. |
+| `preview` | Rendered if provided. | Not rendered. |
+| `edit` | Rendered if provided. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+
+When `canvasMode` is `edit`, the areas available to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |
diff --git a/packages/edit-site/src/components/site-editor-routes/home.js b/packages/edit-site/src/components/site-editor-routes/home.js
new file mode 100644
index 00000000000000..3b6230e6b6c38d
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/home.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+export const homeRoute = {
+	name: 'home',
+	path: '/',
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+		mobile: <SidebarNavigationScreenMain />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/index.js b/packages/edit-site/src/components/site-editor-routes/index.js
new file mode 100644
index 00000000000000..bac2fa302b5cf5
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/index.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as siteEditorStore } from '../../store';
+import { homeRoute } from './home';
+import { stylesRoute } from './styles';
+import { navigationRoute } from './navigation';
+import { navigationItemRoute } from './navigation-item';
+import { patternsRoute } from './patterns';
+import { patternItemRoute } from './pattern-item';
+import { templatePartItemRoute } from './template-part-item';
+import { templatesRoute } from './templates';
+import { templateItemRoute } from './template-item';
+import { pagesRoute } from './pages';
+import { pageItemRoute } from './page-item';
+
+const routes = [
+	pageItemRoute,
+	pagesRoute,
+	templateItemRoute,
+	templatesRoute,
+	templatePartItemRoute,
+	patternItemRoute,
+	patternsRoute,
+	navigationItemRoute,
+	navigationRoute,
+	stylesRoute,
+	homeRoute,
+];
+
+export function useRegisterSiteEditorRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}
diff --git a/packages/edit-site/src/components/site-editor-routes/navigation-item.js b/packages/edit-site/src/components/site-editor-routes/navigation-item.js
new file mode 100644
index 00000000000000..76983d8ff8daa4
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/navigation-item.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationItemView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenu
+			backPath={ { postType: NAVIGATION_POST_TYPE } }
+		/>
+	);
+}
+
+export const navigationItemRoute = {
+	name: 'navigation-item',
+	path: '/wp_navigation/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+		),
+		preview: <Editor />,
+		mobile: <MobileNavigationItemView />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/navigation.js b/packages/edit-site/src/components/site-editor-routes/navigation.js
new file mode 100644
index 00000000000000..4c435e78a495f2
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/navigation.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileNavigationView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? (
+		<Editor />
+	) : (
+		<SidebarNavigationScreenNavigationMenus backPath="/" />
+	);
+}
+
+export const navigationRoute = {
+	name: 'navigation',
+	path: '/navigation',
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileNavigationView />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/page-item.js b/packages/edit-site/src/components/site-editor-routes/page-item.js
new file mode 100644
index 00000000000000..c20720316b10e0
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/page-item.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+export const pageItemRoute = {
+	name: 'page-item',
+	path: '/page/:postId',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
+			/>
+		),
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/pages.js b/packages/edit-site/src/components/site-editor-routes/pages.js
new file mode 100644
index 00000000000000..5f2a4e341e0dc7
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/pages.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePagesView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="page" />;
+}
+
+export const pagesRoute = {
+	name: 'pages',
+	path: '/page',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
+			/>
+		),
+		content: <PostList postType="page" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <MobilePagesView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="page" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/pattern-item.js b/packages/edit-site/src/components/site-editor-routes/pattern-item.js
new file mode 100644
index 00000000000000..c4cbcf871f3686
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/pattern-item.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const patternItemRoute = {
+	name: 'pattern-item',
+	path: '/wp_block/:postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/patterns.js b/packages/edit-site/src/components/site-editor-routes/patterns.js
new file mode 100644
index 00000000000000..db97c4b5c080fd
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/patterns.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import PagePatterns from '../page-patterns';
+
+export const patternsRoute = {
+	name: 'patterns',
+	path: '/pattern',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		content: <PagePatterns />,
+		mobile: <PagePatterns />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/styles.js b/packages/edit-site/src/components/site-editor-routes/styles.js
new file mode 100644
index 00000000000000..cf29dbebea3733
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/styles.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
+export const stylesRoute = {
+	name: 'styles',
+	path: '/styles',
+	areas: {
+		content: <GlobalStylesUIWrapper />,
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileGlobalStylesUI />,
+	},
+	widths: {
+		content: 380,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/template-item.js b/packages/edit-site/src/components/site-editor-routes/template-item.js
new file mode 100644
index 00000000000000..8ad3ab2b699904
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/template-item.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templateItemRoute = {
+	name: 'template-item',
+	path: '/wp_template/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/template-part-item.js b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
new file mode 100644
index 00000000000000..a2b21cf23f808d
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/template-part-item.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const templatePartItemRoute = {
+	name: 'template-part-item',
+	path: '/wp_template_part/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};
diff --git a/packages/edit-site/src/components/site-editor-routes/templates.js b/packages/edit-site/src/components/site-editor-routes/templates.js
new file mode 100644
index 00000000000000..cb9f650bbf9267
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/templates.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import PageTemplates from '../page-templates';
+
+export const templatesRoute = {
+	name: 'templates',
+	path: '/template',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		content: <PageTemplates />,
+		preview( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <PageTemplates />,
+	},
+	widths: {
+		content( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? 380 : undefined;
+		},
+	},
+};
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..91324356d01975
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -0,0 +1,211 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { memo, forwardRef, useContext } from '@wordpress/element';
+import { search } from '@wordpress/icons';
+import { store as commandsStore } from '@wordpress/commands';
+import { displayShortcut } from '@wordpress/keycodes';
+import { filterURLForDisplay } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import SiteIcon from '../site-icon';
+import { unlock } from '../../lock-unlock';
+const { useHistory } = unlock( routerPrivateApis );
+import { SidebarNavigationContext } from '../sidebar';
+
+const SiteHub = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
+			return {
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
+			};
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
+
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
+					>
+						<Button
+							__next40pxDefaultSize
+							ref={ ref }
+							href={ dashboardLink }
+							label={ __( 'Go to the Dashboard' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge
+								borderRadius: 4,
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</div>
+
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								__next40pxDefaultSize
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+							>
+								{ decodeEntities( siteTitle ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</Button>
+						</div>
+						<HStack
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
+						>
+							<Button
+								size="compact"
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
+						</HStack>
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);
+
+export default SiteHub;
+
+export const SiteHubMobile = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const history = useHistory();
+		const { navigate } = useContext( SidebarNavigationContext );
+
+		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
+			( select ) => {
+				const { getSettings } = unlock( select( editSiteStore ) );
+
+				const { getEntityRecord, getCurrentTheme } =
+					select( coreStore );
+				const _site = getEntityRecord( 'root', 'site' );
+				return {
+					dashboardLink: getSettings().__experimentalDashboardLink,
+					isBlockTheme: getCurrentTheme()?.is_block_theme,
+					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+					siteTitle:
+						! _site?.title && !! _site?.url
+							? filterURLForDisplay( _site?.url )
+							: _site?.title,
+				};
+			},
+			[]
+		);
+		const { open: openCommandCenter } = useDispatch( commandsStore );
+
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
+					>
+						<Button
+							__next40pxDefaultSize
+							ref={ ref }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
+							} }
+							{ ...( ! isBlockTheme
+								? {
+										href: dashboardLink,
+										label: __( 'Go to the Dashboard' ),
+								  }
+								: {
+										onClick: () => {
+											history.navigate( '/' );
+											navigate( 'back' );
+										},
+										label: __( 'Go to Site Editor' ),
+								  } ) }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</div>
+
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								__next40pxDefaultSize
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
+						<HStack
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
+						>
+							<Button
+								__next40pxDefaultSize
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
+						</HStack>
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);
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..39f44d2bef7bb5
--- /dev/null
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -0,0 +1,88 @@
+.edit-site-site-hub {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: $grid-unit-10;
+	margin-right: $grid-unit-15;
+	height: $header-height;
+}
+
+.edit-site-site-hub__actions {
+	flex-shrink: 0;
+}
+
+.edit-site-site-hub__view-mode-toggle-container {
+	height: $header-height;
+	width: $header-height;
+	flex-shrink: 0;
+
+	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
+		background: transparent;
+	}
+}
+
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	display: block;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	// Add space for the ↗ to render.
+	padding-right: $grid-unit-20;
+
+	// Create 12px gap between site icon and site title
+	margin-left: - $grid-unit-05;
+	position: relative;
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&:hover,
+	&:focus,
+	&:active {
+		color: $gray-200;
+	}
+
+	&:focus {
+		// Defer to :focus-visible below.
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		// Push the shadow away from the title.
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * 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;
+		outline-offset: 2px;
+	}
+
+	&::after {
+		content: "\2197";
+		font-weight: 400;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		opacity: 1;
+	}
+}
+
+.edit-site-site-hub_toggle-command-center {
+	color: $gray-200;
+
+	&:hover,
+	&:active {
+		svg {
+			fill: $gray-100;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/site-icon/index.js b/packages/edit-site/src/components/site-icon/index.js
new file mode 100644
index 00000000000000..bd1fe63a50897c
--- /dev/null
+++ b/packages/edit-site/src/components/site-icon/index.js
@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { wordpress } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function SiteIcon( { className } ) {
+	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
+
+		return {
+			isRequestingSite: ! siteData,
+			siteIconUrl: siteData?.site_icon_url,
+		};
+	}, [] );
+
+	if ( isRequestingSite && ! siteIconUrl ) {
+		return <div className="edit-site-site-icon__image" />;
+	}
+
+	const icon = siteIconUrl ? (
+		<img
+			className="edit-site-site-icon__image"
+			alt={ __( 'Site Icon' ) }
+			src={ siteIconUrl }
+		/>
+	) : (
+		<Icon
+			className="edit-site-site-icon__icon"
+			icon={ wordpress }
+			size={ 48 }
+		/>
+	);
+
+	return (
+		<div className={ clsx( className, 'edit-site-site-icon' ) }>
+			{ icon }
+		</div>
+	);
+}
+
+export default SiteIcon;
diff --git a/packages/edit-site/src/components/site-icon/style.scss b/packages/edit-site/src/components/site-icon/style.scss
new file mode 100644
index 00000000000000..bd18b486ca3427
--- /dev/null
+++ b/packages/edit-site/src/components/site-icon/style.scss
@@ -0,0 +1,38 @@
+.edit-site-site-icon__icon {
+	fill: currentColor;
+	width: 100%;
+	height: 100%;
+
+	.edit-site-layout.is-full-canvas & {
+		// Make the WordPress icon not so big in full canvas.
+		padding: $grid-unit-15;
+	}
+}
+
+.edit-site-site-icon__image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	background: #333;
+	aspect-ratio: 1 / 1;
+
+	.edit-site-layout.is-full-canvas & {
+		border-radius: 0;
+	}
+}
+
+.edit-site-editor__view-mode-toggle button:focus {
+	position: relative;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(#{ $border-width } + var(--wp-admin-border-width-focus)) $white;
+	}
+}
diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts
new file mode 100644
index 00000000000000..2c1b627c6d0c60
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/categories.ts
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	BlockExample,
+	StyleBookCategory,
+	CategoryExamples,
+} from './types';
+import {
+	STYLE_BOOK_CATEGORIES,
+	STYLE_BOOK_THEME_SUBCATEGORIES,
+} from './constants';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]}    examples           An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getExamplesByCategory(
+	categoryDefinition: StyleBookCategory,
+	examples: BlockExample[]
+): CategoryExamples | undefined {
+	if ( ! categoryDefinition?.slug || ! examples?.length ) {
+		return;
+	}
+
+	if ( categoryDefinition?.subcategories?.length ) {
+		return categoryDefinition.subcategories.reduce(
+			( acc, subcategoryDefinition ) => {
+				const subcategoryExamples = getExamplesByCategory(
+					subcategoryDefinition,
+					examples
+				);
+				if ( subcategoryExamples ) {
+					acc.subcategories = [
+						...acc.subcategories,
+						subcategoryExamples,
+					];
+				}
+				return acc;
+			},
+			{
+				title: categoryDefinition.title,
+				slug: categoryDefinition.slug,
+				subcategories: [],
+			}
+		);
+	}
+
+	const blocksToInclude = categoryDefinition?.blocks || [];
+	const blocksToExclude = categoryDefinition?.exclude || [];
+	const categoryExamples = examples.filter( ( example ) => {
+		return (
+			! blocksToExclude.includes( example.name ) &&
+			( example.category === categoryDefinition.slug ||
+				blocksToInclude.includes( example.name ) )
+		);
+	} );
+
+	if ( ! categoryExamples.length ) {
+		return;
+	}
+
+	return {
+		title: categoryDefinition.title,
+		slug: categoryDefinition.slug,
+		examples: categoryExamples,
+	};
+}
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ *
+ * @return {StyleBookCategory[]} An array of top-level category definitions.
+ */
+export function getTopLevelStyleBookCategories(): StyleBookCategory[] {
+	const reservedCategories = [
+		...STYLE_BOOK_THEME_SUBCATEGORIES,
+		...STYLE_BOOK_CATEGORIES,
+	].map( ( { slug } ) => slug );
+	const extraCategories = getCategories().filter(
+		( { slug } ) => ! reservedCategories.includes( slug )
+	);
+	return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ];
+}
diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx
new file mode 100644
index 00000000000000..97bdeecee32d3d
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/color-examples.tsx
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+import {
+	getColorClassName,
+	__experimentalGetGradientClass,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import type { Color, Gradient } from './types';
+
+const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+	if ( ! colors ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+			{ colors.map( ( color: Color | Gradient ) => {
+				const className =
+					type === 'gradients'
+						? __experimentalGetGradientClass( color.slug )
+						: getColorClassName( 'background-color', color.slug );
+				const classes = clsx(
+					'edit-site-style-book__color-example',
+					className
+				);
+
+				return <View key={ color.slug } className={ classes } />;
+			} ) }
+		</Grid>
+	);
+};
+
+export default ColorExamples;
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
new file mode 100644
index 00000000000000..0cbbaec07086db
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -0,0 +1,261 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory, StyleBookColorGroup } from './types';
+
+export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
+	{
+		slug: 'theme-colors',
+		title: __( 'Theme Colors' ),
+		origin: 'theme',
+		type: 'colors',
+	},
+	{
+		slug: 'theme-gradients',
+		title: __( 'Theme Gradients' ),
+		origin: 'theme',
+		type: 'gradients',
+	},
+	{
+		slug: 'custom-colors',
+		title: __( 'Custom Colors' ),
+		origin: 'custom',
+		type: 'colors',
+	},
+	{
+		slug: 'custom-gradients',
+		title: __( 'Custom Gradients' ),
+		origin: 'custom', // User.
+		type: 'gradients',
+	},
+	{
+		slug: 'duotones',
+		title: __( 'Duotones' ),
+		origin: 'theme',
+		type: 'duotones',
+	},
+	{
+		slug: 'default-colors',
+		title: __( 'Default Colors' ),
+		origin: 'default',
+		type: 'colors',
+	},
+	{
+		slug: 'default-gradients',
+		title: __( 'Default Gradients' ),
+		origin: 'default',
+		type: 'gradients',
+	},
+];
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
+	StyleBookCategory,
+	'subcategories'
+>[] = [
+	{
+		slug: 'site-identity',
+		title: __( 'Site Identity' ),
+		blocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],
+	},
+	{
+		slug: 'design',
+		title: __( 'Design' ),
+		blocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],
+		exclude: [ 'core/home-link', 'core/navigation-link' ],
+	},
+	{
+		slug: 'posts',
+		title: __( 'Posts' ),
+		blocks: [
+			'core/post-title',
+			'core/post-excerpt',
+			'core/post-author',
+			'core/post-author-name',
+			'core/post-author-biography',
+			'core/post-date',
+			'core/post-terms',
+			'core/term-description',
+			'core/query-title',
+			'core/query-no-results',
+			'core/query-pagination',
+			'core/query-numbers',
+		],
+	},
+	{
+		slug: 'comments',
+		title: __( 'Comments' ),
+		blocks: [
+			'core/comments-title',
+			'core/comments-pagination',
+			'core/comments-pagination-numbers',
+			'core/comments',
+			'core/comments-author-name',
+			'core/comment-content',
+			'core/comment-date',
+			'core/comment-edit-link',
+			'core/comment-reply-link',
+			'core/comment-template',
+			'core/post-comments-count',
+			'core/post-comments-link',
+		],
+	},
+];
+
+export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
+	{
+		slug: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [],
+	},
+	{
+		slug: 'theme',
+		title: __( 'Theme' ),
+		subcategories: STYLE_BOOK_THEME_SUBCATEGORIES,
+	},
+	{
+		slug: 'media',
+		title: __( 'Media' ),
+		blocks: [ 'core/post-featured-image' ],
+	},
+	{
+		slug: 'widgets',
+		title: __( 'Widgets' ),
+		blocks: [],
+	},
+	{
+		slug: 'embed',
+		title: __( 'Embeds' ),
+		include: [],
+	},
+];
+
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+	body {
+		position: relative;
+		padding: 32px !important;
+	}
+
+	${ ROOT_CONTAINER }
+
+	.edit-site-style-book__examples {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+	    max-width: 900px;
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
+		margin: 0 auto 40px auto;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example.is-disabled-example {
+		pointer-events: none;
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__duotone-example > div:first-child {
+		display: flex;
+		aspect-ratio: 16 / 9;
+		grid-row: span 1;
+		grid-column: span 2;
+	}
+	.edit-site-style-book__duotone-example img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.edit-site-style-book__duotone-example > div:not(:first-child) {
+		height: 20px;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+	}
+
+	.edit-site-style-book__color-example {
+		height: 32px;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+	}
+
+	.edit-site-style-book__subcategory-title,
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 13px;
+		font-weight: normal;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		padding-top: 8px;
+		border-top: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+		color: color-mix( in srgb, currentColor 60%, transparent );
+	}
+
+	.edit-site-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	border-bottom: 1px solid #ddd;
+    	padding-bottom: 8px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+	:where(.is-root-container > .wp-block:first-child) {
+		margin-top: 0;
+	}
+	:where(.is-root-container > .wp-block:last-child) {
+		margin-bottom: 0;
+	}
+`;
diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx
new file mode 100644
index 00000000000000..7ee90e61f1c6aa
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/duotone-examples.tsx
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import type { Duotone } from './types';
+
+const DuotoneExamples = ( { duotones } ): JSX.Element | null => {
+	if ( ! duotones ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 16 } columnGap={ 16 }>
+			{ duotones.map( ( duotone: Duotone ) => {
+				return (
+					<Grid
+						key={ duotone.slug }
+						className="edit-site-style-book__duotone-example"
+						columns={ 2 }
+						rowGap={ 8 }
+						columnGap={ 8 }
+					>
+						<View>
+							<img
+								alt={ `Duotone example: ${ duotone.slug }` }
+								src="https://s.w.org/images/core/5.3/MtBlanc1.jpg"
+								style={ {
+									filter: `url(#wp-duotone-${ duotone.slug })`,
+								} }
+							/>
+						</View>
+						{ duotone.colors.map( ( color ) => {
+							return (
+								<View
+									key={ color }
+									className="edit-site-style-book__color-example"
+									style={ { backgroundColor: color } }
+								/>
+							);
+						} ) }
+					</Grid>
+				);
+			} ) }
+		</Grid>
+	);
+};
+
+export default DuotoneExamples;
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
new file mode 100644
index 00000000000000..c944b87b09d7e1
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -0,0 +1,239 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import ColorExamples from './color-examples';
+import DuotoneExamples from './duotone-examples';
+import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+
+/**
+ * Returns examples color examples for each origin
+ * e.g. Core (Default), Theme, and User.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of color block examples.
+ */
+function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	if ( ! colors ) {
+		return [];
+	}
+
+	const examples: BlockExample[] = [];
+
+	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
+		const palette = colors[ group.type ].find(
+			( origin: ColorOrigin ) => origin.slug === group.origin
+		);
+
+		if ( palette?.[ group.type ] ) {
+			const example: BlockExample = {
+				name: group.slug,
+				title: group.title,
+				category: 'colors',
+			};
+			if ( group.type === 'duotones' ) {
+				example.content = (
+					<DuotoneExamples duotones={ palette[ group.type ] } />
+				);
+				examples.push( example );
+			} else {
+				example.content = (
+					<ColorExamples
+						colors={ palette[ group.type ] }
+						type={ group.type }
+					/>
+				);
+				examples.push( example );
+			}
+		}
+	} );
+
+	return examples;
+}
+
+/**
+ * Returns examples for the overview page.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of block examples.
+ */
+function getOverviewBlockExamples(
+	colors: MultiOriginPalettes
+): BlockExample[] {
+	const examples: BlockExample[] = [];
+
+	// Get theme palette from colors.
+	const themePalette = colors.colors.find(
+		( origin: ColorOrigin ) => origin.slug === 'theme'
+	);
+
+	if ( themePalette ) {
+		const themeColorexample: BlockExample = {
+			name: 'theme-colors',
+			title: __( 'Colors' ),
+			category: 'overview',
+			content: (
+				<ColorExamples colors={ themePalette.colors } type={ colors } />
+			),
+		};
+
+		examples.push( themeColorexample );
+	}
+
+	const headingBlock = createBlock( 'core/heading', {
+		content: __(
+			`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+		),
+		level: 1,
+	} );
+	const firstParagraphBlock = createBlock( 'core/paragraph', {
+		content: __(
+			`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+		),
+	} );
+	const secondParagraphBlock = createBlock( 'core/paragraph', {
+		content: __(
+			`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+		),
+	} );
+
+	const textExample = {
+		name: 'typography',
+		title: __( 'Typography' ),
+		category: 'overview',
+		blocks: [
+			headingBlock,
+			createBlock(
+				'core/group',
+				{
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+						minimumColumnWidth: '12rem',
+					},
+					style: {
+						spacing: {
+							blockGap: '1.5rem',
+						},
+					},
+				},
+				[ firstParagraphBlock, secondParagraphBlock ]
+			),
+		],
+	};
+	examples.push( textExample );
+
+	const otherBlockExamples = [
+		'core/image',
+		'core/separator',
+		'core/buttons',
+		'core/pullquote',
+		'core/search',
+	];
+
+	// Get examples for other blocks and put them in order of above array.
+	otherBlockExamples.forEach( ( blockName ) => {
+		const blockType = getBlockType( blockName );
+		if ( blockType && blockType.example ) {
+			const blockExample: BlockExample = {
+				name: blockName,
+				title: blockType.title,
+				category: 'overview',
+				/*
+				 * CSS generated from style attributes will take precedence over global styles CSS,
+				 * so remove the style attribute from the example to ensure the example
+				 * demonstrates changes to global styles.
+				 */
+				blocks: getBlockFromExample( blockName, {
+					...blockType.example,
+					attributes: {
+						...blockType.example.attributes,
+						style: undefined,
+					},
+				} ),
+			};
+			examples.push( blockExample );
+		}
+	} );
+
+	return examples;
+}
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	const nonHeadingBlockExamples = getBlockTypes()
+		.filter( ( blockType ) => {
+			const { name, example, supports } = blockType;
+			return (
+				name !== 'core/heading' &&
+				!! example &&
+				supports?.inserter !== false
+			);
+		} )
+		.map( ( blockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			/*
+			 * CSS generated from style attributes will take precedence over global styles CSS,
+			 * so remove the style attribute from the example to ensure the example
+			 * demonstrates changes to global styles.
+			 */
+			blocks: getBlockFromExample( blockType.name, {
+				...blockType.example,
+				attributes: {
+					...blockType.example.attributes,
+					style: undefined,
+				},
+			} ),
+		} ) );
+	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+	if ( ! isHeadingBlockRegistered ) {
+		return nonHeadingBlockExamples;
+	}
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+			return createBlock( 'core/heading', {
+				content: sprintf(
+					// translators: %d: heading level e.g: "1", "2", "3"
+					__( 'Heading %d' ),
+					level
+				),
+				level,
+			} );
+		} ),
+	};
+	const colorExamples = getColorExamples( colors );
+
+	const overviewBlockExamples = getOverviewBlockExamples( colors );
+
+	return [
+		headingsExample,
+		...colorExamples,
+		...nonHeadingBlockExamples,
+		...overviewBlockExamples,
+	];
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
new file mode 100644
index 00000000000000..f0992381943aaf
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -0,0 +1,580 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Disabled,
+	Composite,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	useSettings,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { useResizeObserver } from '@wordpress/compose';
+import {
+	useMemo,
+	useState,
+	memo,
+	useContext,
+	useRef,
+	useLayoutEffect,
+} from '@wordpress/element';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import EditorCanvasContainer from '../editor-canvas-container';
+import { STYLE_BOOK_IFRAME_STYLES } from './constants';
+import {
+	getExamplesByCategory,
+	getTopLevelStyleBookCategories,
+} from './categories';
+import { getExamples } from './examples';
+
+const {
+	ExperimentalBlockEditorProvider,
+	useGlobalStyle,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+} = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+/**
+ * Scrolls to a section within an iframe.
+ *
+ * @param {string}            anchorId The id of the element to scroll to.
+ * @param {HTMLIFrameElement} iframe   The target iframe.
+ */
+const scrollToSection = ( anchorId, iframe ) => {
+	if ( ! anchorId || ! iframe || ! iframe?.contentDocument ) {
+		return;
+	}
+
+	const element =
+		anchorId === 'top'
+			? iframe.contentDocument.body
+			: iframe.contentDocument.getElementById( anchorId );
+	if ( element ) {
+		element.scrollIntoView( {
+			behavior: 'smooth',
+		} );
+	}
+};
+
+/**
+ * Parses a Block Editor navigation path to extract the block name and
+ * build a style book navigation path. The object can be extended to include a category,
+ * representing a style book tab/section.
+ *
+ * @param {string} path An internal Block Editor navigation path.
+ * @return {null|{block: string}} An object containing the example to navigate to.
+ */
+const getStyleBookNavigationFromPath = ( path ) => {
+	if ( path && typeof path === 'string' ) {
+		if ( path === '/' ) {
+			return {
+				top: true,
+			};
+		}
+
+		if ( path.startsWith( '/typography' ) ) {
+			return {
+				block: 'typography',
+			};
+		}
+		let block = path.includes( '/blocks/' )
+			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
+			: null;
+		// Default to theme-colors if the path ends with /colors.
+		block = path.endsWith( '/colors' ) ? 'theme-colors' : block;
+
+		return {
+			block,
+		};
+	}
+	return null;
+};
+
+/**
+ * Retrieves colors, gradients, and duotone filters from Global Styles.
+ * The inclusion of default (Core) palettes is controlled by the relevant
+ * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone.
+ *
+ * @return {Object} Object containing properties for each type of palette.
+ */
+function useMultiOriginPalettes() {
+	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+
+	// Add duotone filters to the palettes data.
+	const [
+		shouldDisplayDefaultDuotones,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+	] = useSettings(
+		'color.defaultDuotone',
+		'color.duotone.custom',
+		'color.duotone.theme',
+		'color.duotone.default'
+	);
+
+	const palettes = useMemo( () => {
+		const result = { colors, gradients, duotones: [] };
+
+		if ( themeDuotones && themeDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Theme',
+					'Indicates these duotone filters come from the theme.'
+				),
+				slug: 'theme',
+				duotones: themeDuotones,
+			} );
+		}
+
+		if (
+			shouldDisplayDefaultDuotones &&
+			defaultDuotones &&
+			defaultDuotones.length
+		) {
+			result.duotones.push( {
+				name: _x(
+					'Default',
+					'Indicates these duotone filters come from WordPress.'
+				),
+				slug: 'default',
+				duotones: defaultDuotones,
+			} );
+		}
+		if ( customDuotones && customDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Custom',
+					'Indicates these doutone filters are created by the user.'
+				),
+				slug: 'custom',
+				duotones: customDuotones,
+			} );
+		}
+
+		return result;
+	}, [
+		colors,
+		gradients,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+		shouldDisplayDefaultDuotones,
+	] );
+
+	return palettes;
+}
+
+function StyleBook( {
+	enableResizing = true,
+	isSelected,
+	onClick,
+	onSelect,
+	showCloseButton = true,
+	onClose,
+	showTabs = true,
+	userConfig = {},
+	path = '',
+} ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const colors = useMultiOriginPalettes();
+	const examples = useMemo( () => getExamples( colors ), [ colors ] );
+	const tabs = useMemo(
+		() =>
+			getTopLevelStyleBookCategories().filter( ( category ) =>
+				examples.some(
+					( example ) => example.category === category.slug
+				)
+			),
+		[ examples ]
+	);
+
+	const examplesForSinglePageUse = [];
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+	const goTo = getStyleBookNavigationFromPath( path );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	// Copied from packages/edit-site/src/components/revisions/index.js
+	// could we create a shared hook?
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			styles:
+				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+					? globalStyles
+					: originalSettings.styles,
+			isPreviewMode: true,
+		} ),
+		[ globalStyles, originalSettings, userConfig ]
+	);
+
+	return (
+		<EditorCanvasContainer
+			onClose={ onClose }
+			enableResizing={ enableResizing }
+			closeButtonLabel={ showCloseButton ? __( 'Close' ) : null }
+		>
+			<div
+				className={ clsx( 'edit-site-style-book', {
+					'is-wide': sizes.width > 600,
+					'is-button': !! onClick,
+				} ) }
+				style={ {
+					color: textColor,
+					background: backgroundColor,
+				} }
+			>
+				{ resizeObserver }
+				{ showTabs ? (
+					<Tabs>
+						<div className="edit-site-style-book__tablist-container">
+							<Tabs.TabList>
+								{ tabs.map( ( tab ) => (
+									<Tabs.Tab
+										tabId={ tab.slug }
+										key={ tab.slug }
+									>
+										{ tab.title }
+									</Tabs.Tab>
+								) ) }
+							</Tabs.TabList>
+						</div>
+						{ tabs.map( ( tab ) => (
+							<Tabs.TabPanel
+								key={ tab.slug }
+								tabId={ tab.slug }
+								focusable={ false }
+								className="edit-site-style-book__tabpanel"
+							>
+								<StyleBookBody
+									category={ tab.slug }
+									examples={ examples }
+									isSelected={ isSelected }
+									onSelect={ onSelect }
+									settings={ settings }
+									sizes={ sizes }
+									title={ tab.title }
+									goTo={ goTo }
+								/>
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
+				) : (
+					<StyleBookBody
+						examples={ examplesForSinglePageUse }
+						isSelected={ isSelected }
+						onClick={ onClick }
+						onSelect={ onSelect }
+						settings={ settings }
+						sizes={ sizes }
+						goTo={ goTo }
+					/>
+				) }
+			</div>
+		</EditorCanvasContainer>
+	);
+}
+
+const StyleBookBody = ( {
+	category,
+	examples,
+	isSelected,
+	onClick,
+	onSelect,
+	settings,
+	sizes,
+	title,
+	goTo,
+} ) => {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const [ hasIframeLoaded, setHasIframeLoaded ] = useState( false );
+	const iframeRef = useRef( null );
+	// The presence of an `onClick` prop indicates that the Style Book is being used as a button.
+	// In this case, add additional props to the iframe to make it behave like a button.
+	const buttonModeProps = {
+		role: 'button',
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			const { keyCode } = event;
+			if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		onClick: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			if ( onClick ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		readonly: true,
+	};
+
+	const handleLoad = () => setHasIframeLoaded( true );
+	useLayoutEffect( () => {
+		if ( hasIframeLoaded && iframeRef?.current ) {
+			if ( goTo?.top ) {
+				scrollToSection( 'top', iframeRef?.current );
+				return;
+			}
+			if ( goTo?.block ) {
+				scrollToSection(
+					`example-${ goTo?.block }`,
+					iframeRef?.current
+				);
+			}
+		}
+	}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
+
+	return (
+		<Iframe
+			onLoad={ handleLoad }
+			ref={ iframeRef }
+			className={ clsx( 'edit-site-style-book__iframe', {
+				'is-focused': isFocused && !! onClick,
+				'is-button': !! onClick,
+			} ) }
+			name="style-book-canvas"
+			tabIndex={ 0 }
+			{ ...( onClick ? buttonModeProps : {} ) }
+		>
+			<EditorStyles styles={ settings.styles } />
+			<style>
+				{ STYLE_BOOK_IFRAME_STYLES }
+				{ !! onClick &&
+					'body { cursor: pointer; } body * { pointer-events: none; }' }
+			</style>
+			<Examples
+				className={ clsx( 'edit-site-style-book__examples', {
+					'is-wide': sizes.width > 600,
+				} ) }
+				examples={ examples }
+				category={ category }
+				label={
+					title
+						? sprintf(
+								// translators: %s: Category of blocks, e.g. Text.
+								__( 'Examples of blocks in the %s category' ),
+								title
+						  )
+						: __( 'Examples of blocks' )
+				}
+				isSelected={ isSelected }
+				onSelect={ onSelect }
+				key={ category }
+			/>
+		</Iframe>
+	);
+};
+
+const Examples = memo(
+	( { className, examples, category, label, isSelected, onSelect } ) => {
+		const categoryDefinition = category
+			? getTopLevelStyleBookCategories().find(
+					( _category ) => _category.slug === category
+			  )
+			: null;
+
+		const filteredExamples = categoryDefinition
+			? getExamplesByCategory( categoryDefinition, examples )
+			: { examples };
+
+		return (
+			<Composite
+				orientation="vertical"
+				className={ className }
+				aria-label={ label }
+				role="grid"
+			>
+				{ !! filteredExamples?.examples?.length &&
+					filteredExamples.examples.map( ( example ) => (
+						<Example
+							key={ example.name }
+							id={ `example-${ example.name }` }
+							title={ example.title }
+							content={ example.content }
+							blocks={ example.blocks }
+							isSelected={ isSelected?.( example.name ) }
+							onClick={ () => onSelect?.( example.name ) }
+						/>
+					) ) }
+				{ !! filteredExamples?.subcategories?.length &&
+					filteredExamples.subcategories.map( ( subcategory ) => (
+						<Composite.Group
+							className="edit-site-style-book__subcategory"
+							key={ `subcategory-${ subcategory.slug }` }
+						>
+							<Composite.GroupLabel>
+								<h2 className="edit-site-style-book__subcategory-title">
+									{ subcategory.title }
+								</h2>
+							</Composite.GroupLabel>
+							<Subcategory
+								examples={ subcategory.examples }
+								isSelected={ isSelected }
+								onSelect={ onSelect }
+							/>
+						</Composite.Group>
+					) ) }
+			</Composite>
+		);
+	}
+);
+
+const Subcategory = ( { examples, isSelected, onSelect } ) => {
+	return (
+		!! examples?.length &&
+		examples.map( ( example ) => (
+			<Example
+				key={ example.name }
+				id={ `example-${ example.name }` }
+				title={ example.title }
+				content={ example.content }
+				blocks={ example.blocks }
+				isSelected={ isSelected?.( example.name ) }
+				onClick={ () => {
+					onSelect?.( example.name );
+				} }
+			/>
+		) )
+	);
+};
+
+const disabledExamples = [ 'example-duotones' ];
+
+const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			isPreviewMode: true,
+		} ),
+		[ originalSettings ]
+	);
+
+	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const disabledProps = disabledExamples.includes( id )
+		? {
+				disabled: true,
+				accessibleWhenDisabled: true,
+		  }
+		: {};
+
+	return (
+		<div role="row">
+			<div role="gridcell">
+				<Composite.Item
+					className={ clsx( 'edit-site-style-book__example', {
+						'is-selected': isSelected,
+						'is-disabled-example': !! disabledProps?.disabled,
+					} ) }
+					id={ id }
+					aria-label={ sprintf(
+						// translators: %s: Title of a block, e.g. Heading.
+						__( 'Open %s styles in Styles panel' ),
+						title
+					) }
+					render={ <div /> }
+					role="button"
+					onClick={ onClick }
+					{ ...disabledProps }
+				>
+					<span className="edit-site-style-book__example-title">
+						{ title }
+					</span>
+					<div
+						className="edit-site-style-book__example-preview"
+						aria-hidden
+					>
+						<Disabled className="edit-site-style-book__example-preview__content">
+							{ content ? (
+								content
+							) : (
+								<ExperimentalBlockEditorProvider
+									value={ renderedBlocks }
+									settings={ settings }
+								>
+									<EditorStyles />
+									<BlockList renderAppender={ false } />
+								</ExperimentalBlockEditorProvider>
+							) }
+						</Disabled>
+					</div>
+				</Composite.Item>
+			</div>
+		</div>
+	);
+};
+
+export default StyleBook;
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
new file mode 100644
index 00000000000000..773b4f10f581bb
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -0,0 +1,37 @@
+.edit-site-style-book {
+	// Ensure the style book fills the available vertical space.
+	// This is useful when the style book is used to fill a frame.
+	height: 100%;
+	&.is-button {
+		border-radius: $radius-large;
+	}
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.edit-site-style-book__iframe {
+	&.is-button {
+		border-radius: $radius-large;
+	}
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+	}
+}
+
+.edit-site-style-book__tablist-container {
+	flex: none;
+
+	display: flex;
+	width: 100%;
+	padding-right: 56px;
+	background: $white;
+}
+
+.edit-site-style-book__tabpanel {
+	flex: 1 0 auto;
+
+	overflow: auto;
+}
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
new file mode 100644
index 00000000000000..128eaf282a9c5d
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/test/categories.js
@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getExamplesByCategory,
+	getTopLevelStyleBookCategories,
+} from '../categories';
+import { STYLE_BOOK_CATEGORIES } from '../constants';
+
+jest.mock( '@wordpress/blocks', () => {
+	return {
+		getCategories() {
+			return [
+				{
+					slug: 'text',
+					title: 'Text Registered',
+					icon: 'text',
+				},
+				{
+					slug: 'design',
+					title: 'Design Registered',
+					icon: 'design',
+				},
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			];
+		},
+	};
+} );
+
+// Fixtures
+const exampleThemeBlocks = [
+	{
+		name: 'core/post-content',
+		title: 'Post Content',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-terms',
+		title: 'Post Terms',
+		category: 'theme',
+	},
+	{
+		name: 'core/home-link',
+		title: 'Home Link',
+		category: 'design',
+	},
+	{
+		name: 'core/site-logo',
+		title: 'Site Logo',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-title',
+		title: 'Site Title',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-tagline',
+		title: 'Site Tagline',
+		category: 'theme',
+	},
+	{
+		name: 'core/group',
+		title: 'Group',
+		category: 'design',
+	},
+	{
+		name: 'core/comments-pagination-numbers',
+		title: 'Comments Page Numbers',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-featured-image',
+		title: 'Featured Image',
+		category: 'theme',
+	},
+];
+
+describe( 'utils', () => {
+	describe( 'getTopLevelStyleBookCategories', () => {
+		it( 'returns theme subcategories examples', () => {
+			expect( getTopLevelStyleBookCategories() ).toEqual( [
+				...STYLE_BOOK_CATEGORIES,
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			] );
+		} );
+	} );
+
+	describe( 'getExamplesByCategory', () => {
+		it( 'returns theme subcategories examples', () => {
+			const themeCategory = STYLE_BOOK_CATEGORIES.find(
+				( category ) => category.slug === 'theme'
+			);
+			const themeCategoryExamples = getExamplesByCategory(
+				themeCategory,
+				exampleThemeBlocks
+			);
+
+			expect( themeCategoryExamples.slug ).toEqual( 'theme' );
+
+			const siteIdentity = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'site-identity'
+			);
+			expect( siteIdentity ).toEqual( {
+				title: 'Site Identity',
+				slug: 'site-identity',
+				examples: [
+					{
+						name: 'core/site-logo',
+						title: 'Site Logo',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-title',
+						title: 'Site Title',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-tagline',
+						title: 'Site Tagline',
+						category: 'theme',
+					},
+				],
+			} );
+
+			const design = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'design'
+			);
+			expect( design ).toEqual( {
+				title: 'Design',
+				slug: 'design',
+				examples: [
+					{
+						name: 'core/group',
+						title: 'Group',
+						category: 'design',
+					},
+				],
+			} );
+
+			const posts = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'posts'
+			);
+
+			expect( posts ).toEqual( {
+				title: 'Posts',
+				slug: 'posts',
+				examples: [
+					{
+						name: 'core/post-terms',
+						title: 'Post Terms',
+						category: 'theme',
+					},
+				],
+			} );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
new file mode 100644
index 00000000000000..e7be17b17dd4df
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/types.ts
@@ -0,0 +1,60 @@
+type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks?: Block[];
+};
+
+export type StyleBookCategory = {
+	title: string;
+	slug: string;
+	blocks?: string[];
+	exclude?: string[];
+	include?: string[];
+	subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+	name: string;
+	title: string;
+	category: string;
+	content?: JSX.Element;
+	blocks?: Block | Block[];
+};
+
+export type CategoryExamples = {
+	title: string;
+	slug: string;
+	examples?: BlockExample[];
+	subcategories?: CategoryExamples[];
+};
+
+export type StyleBookColorGroup = {
+	origin: string;
+	slug: string;
+	title: string;
+	type: string;
+};
+
+export type Color = { slug: string };
+export type Gradient = { slug: string };
+export type Duotone = {
+	colors: string[];
+	slug: string;
+};
+
+export type ColorOrigin = {
+	name: string;
+	slug: string;
+	colors?: Color[];
+	gradients?: Gradient[];
+	duotones?: Duotone[];
+};
+
+export type MultiOriginPalettes = {
+	disableCustomColors: boolean;
+	disableCustomGradients: boolean;
+	hasColorsOrGradients: boolean;
+	colors: Omit< ColorOrigin, 'gradients' | 'duotones' >;
+	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
+	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
+};
diff --git a/packages/edit-site/src/components/template-details/edit-template-title.js b/packages/edit-site/src/components/template-details/edit-template-title.js
deleted file mode 100644
index 5d7e63c7054887..00000000000000
--- a/packages/edit-site/src/components/template-details/edit-template-title.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
-
-export default function EditTemplateTitle( { template } ) {
-	const [ forceEmpty, setForceEmpty ] = useState( false );
-	const [ title, setTitle ] = useEntityProp(
-		'postType',
-		template.type,
-		'title',
-		template.id
-	);
-
-	return (
-		<TextControl
-			label={ __( 'Title' ) }
-			value={ forceEmpty ? '' : title }
-			help={
-				template.type !== 'wp_template_part'
-					? __(
-							'Give the template a title that indicates its purpose, e.g. "Full Width".'
-					  )
-					: null
-			}
-			onChange={ ( newTitle ) => {
-				if ( ! newTitle && ! forceEmpty ) {
-					setForceEmpty( true );
-					return;
-				}
-				setForceEmpty( false );
-				setTitle( newTitle );
-			} }
-			onBlur={ () => setForceEmpty( false ) }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
deleted file mode 100644
index 94dda53f75b22f..00000000000000
--- a/packages/edit-site/src/components/template-details/index.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	Button,
-	MenuGroup,
-	MenuItem,
-	__experimentalVStack as VStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import { store as editSiteStore } from '../../store';
-import TemplateAreas from './template-areas';
-import EditTemplateTitle from './edit-template-title';
-import { useLink } from '../routes/link';
-import TemplatePartAreaSelector from './template-part-area-selector';
-
-export default function TemplateDetails( { template, onClose } ) {
-	const { title, description } = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetTemplateInfo( template ),
-		[]
-	);
-	const { revertTemplate } = useDispatch( editSiteStore );
-
-	const browseAllLinkProps = useLink( {
-		// TODO: We should update this to filter by template part's areas as well.
-		postType: template.type,
-		postId: undefined,
-	} );
-
-	const isTemplatePart = template.type === 'wp_template_part';
-
-	// Only user-created and non-default templates can change the name.
-	// But any user-created template part can be renamed.
-	const canEditTitle = isTemplatePart
-		? ! template.has_theme_file
-		: template.is_custom && ! template.has_theme_file;
-
-	if ( ! template ) {
-		return null;
-	}
-
-	const revert = () => {
-		revertTemplate( template );
-		onClose();
-	};
-
-	return (
-		<div className="edit-site-template-details">
-			<VStack className="edit-site-template-details__group" spacing={ 3 }>
-				{ canEditTitle ? (
-					<EditTemplateTitle template={ template } />
-				) : (
-					<Text
-						size={ 16 }
-						weight={ 600 }
-						className="edit-site-template-details__title"
-						as="p"
-					>
-						{ decodeEntities( title ) }
-					</Text>
-				) }
-
-				{ description && (
-					<Text
-						size="body"
-						className="edit-site-template-details__description"
-						as="p"
-					>
-						{ decodeEntities( description ) }
-					</Text>
-				) }
-			</VStack>
-
-			{ isTemplatePart && (
-				<div className="edit-site-template-details__group">
-					<TemplatePartAreaSelector id={ template.id } />
-				</div>
-			) }
-
-			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />
-
-			{ isTemplateRevertable( template ) && (
-				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
-					<MenuItem
-						className="edit-site-template-details__revert-button"
-						info={ __(
-							'Use the template as supplied by the theme.'
-						) }
-						onClick={ revert }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-
-			<Button
-				className="edit-site-template-details__show-all-button"
-				{ ...browseAllLinkProps }
-			>
-				{ template?.type === 'wp_template'
-					? __( 'Browse all templates' )
-					: __( 'Browse all template parts' ) }
-			</Button>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
deleted file mode 100644
index ee840be7c43db7..00000000000000
--- a/packages/edit-site/src/components/template-details/style.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.edit-site-template-details {
-	.edit-site-template-details__group {
-		margin: 0;
-		padding: $grid-unit-20;
-	}
-
-	.edit-site-template-details__group + .edit-site-template-details__group {
-		border-top: $border-width solid $gray-400;
-	}
-
-	.edit-site-template-details__description {
-		color: $gray-700;
-	}
-
-	// The group already has a 8px padding inside, so overriding the parent padding.
-	.edit-site-template-details__group.edit-site-template-details__template-areas {
-		padding: $grid-unit-10;
-	}
-
-	.edit-site-template-details__template-areas-item {
-		position: relative;
-
-		.components-menu-items__item-icon {
-			color: var(--wp-block-synced-color);
-		}
-
-		.edit-site-template-details__template-areas-item-more {
-			position: absolute;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			margin: auto 0;
-		}
-	}
-
-	.edit-site-template-details__revert {
-		// Make some spaces for the revert button to have some paddings.
-		padding: $grid-unit-15 $grid-unit;
-	}
-
-	.edit-site-template-details__revert-button {
-		height: auto;
-		padding: $grid-unit-05 $grid-unit;
-		text-align: left;
-
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
-		}
-	}
-
-	.edit-site-template-details__show-all-button.components-button {
-		display: flex;
-		justify-content: center;
-		background: $gray-900;
-		color: $white;
-		width: 100%;
-		height: ($button-size + $grid-unit-10);
-		border-radius: 0;
-
-		&:hover {
-			color: $white;
-		}
-
-		&:active {
-			color: $gray-400;
-		}
-
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white;
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/template-details/template-areas.js b/packages/edit-site/src/components/template-details/template-areas.js
deleted file mode 100644
index dfd8e33ad577d3..00000000000000
--- a/packages/edit-site/src/components/template-details/template-areas.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { sprintf, __ } from '@wordpress/i18n';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { moreVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import { useLocation } from '../routes';
-import { useLink } from '../routes/link';
-
-function TemplatePartItemMore( {
-	onClose,
-	templatePart,
-	closeTemplateDetailsDropdown,
-} ) {
-	const { revertTemplate } = useDispatch( editSiteStore );
-	const { params } = useLocation();
-	const editLinkProps = useLink(
-		{
-			postId: templatePart.id,
-			postType: templatePart.type,
-		},
-		{
-			fromTemplateId: params.postId,
-		}
-	);
-
-	function editTemplatePart( event ) {
-		editLinkProps.onClick( event );
-		onClose();
-		closeTemplateDetailsDropdown();
-	}
-
-	function clearCustomizations() {
-		revertTemplate( templatePart );
-		onClose();
-		closeTemplateDetailsDropdown();
-	}
-
-	return (
-		<>
-			<MenuGroup>
-				<MenuItem { ...editLinkProps } onClick={ editTemplatePart }>
-					{ sprintf(
-						/* translators: %s: template part title */
-						__( 'Edit %s' ),
-						templatePart.title?.rendered
-					) }
-				</MenuItem>
-			</MenuGroup>
-			{ isTemplateRevertable( templatePart ) && (
-				<MenuGroup>
-					<MenuItem
-						info={ __(
-							'Use the template part as supplied by the theme.'
-						) }
-						onClick={ clearCustomizations }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
-				</MenuGroup>
-			) }
-		</>
-	);
-}
-
-function TemplatePartItem( {
-	templatePart,
-	clientId,
-	closeTemplateDetailsDropdown,
-} ) {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === templatePart.area
-			);
-		},
-		[ templatePart.area ]
-	);
-	const highlightBlock = () => toggleBlockHighlight( clientId, true );
-	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
-
-	return (
-		<div
-			role="menuitem"
-			className="edit-site-template-details__template-areas-item"
-		>
-			<MenuItem
-				role="button"
-				icon={ templatePartArea?.icon }
-				iconPosition="left"
-				onClick={ () => {
-					selectBlock( clientId );
-				} }
-				onMouseOver={ highlightBlock }
-				onMouseLeave={ cancelHighlightBlock }
-				onFocus={ highlightBlock }
-				onBlur={ cancelHighlightBlock }
-			>
-				{ templatePartArea?.label }
-			</MenuItem>
-
-			<DropdownMenu
-				icon={ moreVertical }
-				label={ __( 'More options' ) }
-				className="edit-site-template-details__template-areas-item-more"
-			>
-				{ ( { onClose } ) => (
-					<TemplatePartItemMore
-						onClose={ onClose }
-						templatePart={ templatePart }
-						closeTemplateDetailsDropdown={
-							closeTemplateDetailsDropdown
-						}
-					/>
-				) }
-			</DropdownMenu>
-		</div>
-	);
-}
-
-export default function TemplateAreas( { closeTemplateDetailsDropdown } ) {
-	const templateParts = useSelect(
-		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
-		[]
-	);
-
-	if ( ! templateParts.length ) {
-		return null;
-	}
-
-	return (
-		<MenuGroup
-			label={ __( 'Areas' ) }
-			className="edit-site-template-details__group edit-site-template-details__template-areas"
-		>
-			{ templateParts.map( ( { templatePart, block } ) => (
-				<TemplatePartItem
-					key={ templatePart.slug }
-					clientId={ block.clientId }
-					templatePart={ templatePart }
-					closeTemplateDetailsDropdown={
-						closeTemplateDetailsDropdown
-					}
-				/>
-			) ) }
-		</MenuGroup>
-	);
-}
diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
deleted file mode 100644
index 1eff28d2d4c976..00000000000000
--- a/packages/edit-site/src/components/template-details/template-part-area-selector.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-
-export default function TemplatePartAreaSelector( { id } ) {
-	const [ area, setArea ] = useEntityProp(
-		'postType',
-		'wp_template_part',
-		'area',
-		id
-	);
-
-	const definedAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-
-	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
-		label,
-		value: _area,
-	} ) );
-
-	return (
-		<SelectControl
-			label={ __( 'Area' ) }
-			labelPosition="top"
-			options={ areaOptions }
-			value={ area }
-			onChange={ setArea }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js b/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
deleted file mode 100644
index d64cbc90737e24..00000000000000
--- a/packages/edit-site/src/components/template-part-converter/convert-to-regular.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function ConvertToRegularBlocks( { clientId } ) {
-	const { getBlocks } = useSelect( blockEditorStore );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-
-	const canRemove = useSelect(
-		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
-		[ clientId ]
-	);
-
-	if ( ! canRemove ) {
-		return null;
-	}
-
-	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<MenuItem
-					onClick={ () => {
-						replaceBlocks( clientId, getBlocks( clientId ) );
-						onClose();
-					} }
-				>
-					{ __( 'Detach blocks from template part' ) }
-				</MenuItem>
-			) }
-		</BlockSettingsMenuControls>
-	);
-}
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
deleted file mode 100644
index e5186140440154..00000000000000
--- a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { MenuItem } from '@wordpress/components';
-import { createBlock, serialize } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { symbolFilled } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import CreateTemplatePartModal from '../create-template-part-modal';
-import { store as editSiteStore } from '../../store';
-
-export default function ConvertToTemplatePart( { clientIds, blocks } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice } = useDispatch( noticesStore );
-
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	}, [] );
-
-	if ( ! canCreate ) {
-		return null;
-	}
-
-	const onConvert = async ( { title, area } ) => {
-		// Currently template parts only allow latin chars.
-		// Fallback slug will receive suffix by default.
-		const cleanSlug =
-			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
-
-		const templatePart = await saveEntityRecord(
-			'postType',
-			'wp_template_part',
-			{
-				slug: cleanSlug,
-				title,
-				content: serialize( blocks ),
-				area,
-			}
-		);
-		replaceBlocks(
-			clientIds,
-			createBlock( 'core/template-part', {
-				slug: templatePart.slug,
-				theme: templatePart.theme,
-			} )
-		);
-		createSuccessNotice( __( 'Template part created.' ), {
-			type: 'snackbar',
-		} );
-
-		// The modal and this component will be unmounted because of `replaceBlocks` above,
-		// so no need to call `closeModal` or `onClose`.
-	};
-
-	return (
-		<>
-			<BlockSettingsMenuControls>
-				{ () => (
-					<MenuItem
-						icon={ symbolFilled }
-						onClick={ () => {
-							setIsModalOpen( true );
-						} }
-					>
-						{ __( 'Create Template part' ) }
-					</MenuItem>
-				) }
-			</BlockSettingsMenuControls>
-			{ isModalOpen && (
-				<CreateTemplatePartModal
-					closeModal={ () => {
-						setIsModalOpen( false );
-					} }
-					onCreate={ onConvert }
-				/>
-			) }
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/template-part-converter/index.js b/packages/edit-site/src/components/template-part-converter/index.js
deleted file mode 100644
index 8b9275c990adac..00000000000000
--- a/packages/edit-site/src/components/template-part-converter/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ConvertToRegularBlocks from './convert-to-regular';
-import ConvertToTemplatePart from './convert-to-template-part';
-
-export default function TemplatePartConverter() {
-	const { clientIds, blocks } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds, getBlocksByClientId } =
-			select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		return {
-			clientIds: selectedBlockClientIds,
-			blocks: getBlocksByClientId( selectedBlockClientIds ),
-		};
-	}, [] );
-
-	// Allow converting a single template part to standard blocks.
-	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
-		return <ConvertToRegularBlocks clientId={ clientIds[ 0 ] } />;
-	}
-
-	return <ConvertToTemplatePart clientIds={ clientIds } blocks={ blocks } />;
-}
diff --git a/packages/edit-site/src/components/test/error-boundary.js b/packages/edit-site/src/components/test/error-boundary.js
deleted file mode 100644
index 7b9977e10f1315..00000000000000
--- a/packages/edit-site/src/components/test/error-boundary.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import * as wpHooks from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import ErrorBoundary from '../error-boundary';
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-const theError = new Error( 'Kaboom' );
-
-const ChildComponent = () => {
-	throw theError;
-};
-
-describe( 'Error Boundary', () => {
-	describe( 'when error is thrown from a Child component', () => {
-		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
-			const doAction = jest.spyOn( wpHooks, 'doAction' );
-
-			render(
-				<ErrorBoundary>
-					<ChildComponent />
-				</ErrorBoundary>
-			);
-
-			expect( doAction ).toHaveBeenCalledWith(
-				'editor.ErrorBoundary.errorLogged',
-				theError
-			);
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/components/url-query-controller/index.js b/packages/edit-site/src/components/url-query-controller/index.js
deleted file mode 100644
index c0b65a6ccb37b3..00000000000000
--- a/packages/edit-site/src/components/url-query-controller/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useLocation } from '../routes';
-import { store as editSiteStore } from '../../store';
-
-export default function URLQueryController() {
-	const { setTemplate, setTemplatePart, setPage } =
-		useDispatch( editSiteStore );
-	const {
-		params: { postId, postType },
-	} = useLocation();
-
-	// Set correct entity on page navigation.
-	useEffect( () => {
-		if ( 'page' === postType || 'post' === postType ) {
-			setPage( { context: { postType, postId } } ); // Resolves correct template based on ID.
-		} else if ( 'wp_template' === postType ) {
-			setTemplate( postId );
-		} else if ( 'wp_template_part' === postType ) {
-			setTemplatePart( postId );
-		}
-	}, [ postId, postType ] );
-
-	return null;
-}
diff --git a/packages/edit-site/src/components/welcome-guide/editor.js b/packages/edit-site/src/components/welcome-guide/editor.js
index c7a1072bf79057..75c4fd6e10c368 100644
--- a/packages/edit-site/src/components/welcome-guide/editor.js
+++ b/packages/edit-site/src/components/welcome-guide/editor.js
@@ -6,6 +6,7 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,24 +16,26 @@ import WelcomeGuideImage from './image';
 export default function WelcomeGuideEditor() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isActive = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
+	const { isActive, isBlockBasedTheme } = useSelect( ( select ) => {
+		return {
+			isActive: !! select( preferencesStore ).get(
 				'core/edit-site',
 				'welcomeGuide'
 			),
-		[]
-	);
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
+		};
+	}, [] );
 
-	if ( ! isActive ) {
+	if ( ! isActive || ! isBlockBasedTheme ) {
 		return null;
 	}
 
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
+			className="edit-site-welcome-guide guide-editor"
 			contentLabel={ __( 'Welcome to the site editor' ) }
-			finishButtonText={ __( 'Get Started' ) }
+			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
 			pages={ [
 				{
diff --git a/packages/edit-site/src/components/welcome-guide/index.js b/packages/edit-site/src/components/welcome-guide/index.js
index 4ad4d7d0eecefd..b127ecd664462d 100644
--- a/packages/edit-site/src/components/welcome-guide/index.js
+++ b/packages/edit-site/src/components/welcome-guide/index.js
@@ -3,12 +3,16 @@
  */
 import WelcomeGuideEditor from './editor';
 import WelcomeGuideStyles from './styles';
+import WelcomeGuidePage from './page';
+import WelcomeGuideTemplate from './template';
 
-export default function WelcomeGuide() {
+export default function WelcomeGuide( { postType } ) {
 	return (
 		<>
 			<WelcomeGuideEditor />
 			<WelcomeGuideStyles />
+			{ postType === 'page' && <WelcomeGuidePage /> }
+			{ postType === 'wp_template' && <WelcomeGuideTemplate /> }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/welcome-guide/page.js b/packages/edit-site/src/components/welcome-guide/page.js
new file mode 100644
index 00000000000000..41bb80342280cf
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/page.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export default function WelcomeGuidePage() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const isVisible = useSelect( ( select ) => {
+		const isPageActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuidePage'
+		);
+		const isEditorActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuide'
+		);
+		return isPageActive && ! isEditorActive;
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing a page' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-page"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuidePage' ) }
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-page.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/style.scss b/packages/edit-site/src/components/welcome-guide/style.scss
index 78cc70d0b426c5..4ac45ed1993860 100644
--- a/packages/edit-site/src/components/welcome-guide/style.scss
+++ b/packages/edit-site/src/components/welcome-guide/style.scss
@@ -1,8 +1,22 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&__image {
+	&.guide-editor .edit-site-welcome-guide__image,
+	&.guide-styles .edit-site-welcome-guide__image {
 		background: #00a0d2;
+	}
+
+	&.guide-page .edit-site-welcome-guide__video {
+		border-right: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&.guide-template .edit-site-welcome-guide__video {
+		border-left: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&__image {
 		margin: 0 0 $grid-unit-20;
 		> img {
 			display: block;
diff --git a/packages/edit-site/src/components/welcome-guide/styles.js b/packages/edit-site/src/components/welcome-guide/styles.js
index 47adb44fa5dfef..e1a5a0c451395a 100644
--- a/packages/edit-site/src/components/welcome-guide/styles.js
+++ b/packages/edit-site/src/components/welcome-guide/styles.js
@@ -4,22 +4,23 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideStyles() {
 	const { toggle } = useDispatch( preferencesStore );
 
 	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 
 		return {
 			isActive: !! select( preferencesStore ).get(
@@ -34,11 +35,13 @@ export default function WelcomeGuideStyles() {
 		return null;
 	}
 
+	const welcomeLabel = __( 'Welcome to Styles' );
+
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
-			contentLabel={ __( 'Welcome to styles' ) }
-			finishButtonText={ __( 'Get Started' ) }
+			className="edit-site-welcome-guide guide-styles"
+			contentLabel={ welcomeLabel }
+			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
 			pages={ [
 				{
@@ -51,7 +54,7 @@ export default function WelcomeGuideStyles() {
 					content: (
 						<>
 							<h1 className="edit-site-welcome-guide__heading">
-								{ __( 'Welcome to Styles' ) }
+								{ welcomeLabel }
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
@@ -75,7 +78,7 @@ export default function WelcomeGuideStyles() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle! '
+									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'
 								) }
 							</p>
 						</>
@@ -115,11 +118,11 @@ export default function WelcomeGuideStyles() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
-									'New to block themes and styling your site? '
-								) }
+									'New to block themes and styling your site?'
+								) }{ ' ' }
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/styles-overview/'
+										'https://wordpress.org/documentation/article/styles-overview/'
 									) }
 								>
 									{ __(
diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js
new file mode 100644
index 00000000000000..bf08bc7fa668bd
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/template.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function WelcomeGuideTemplate() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const { isActive, hasPreviousEntity } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { get } = select( preferencesStore );
+		return {
+			isActive: get( 'core/edit-site', 'welcomeGuideTemplate' ),
+			hasPreviousEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+		};
+	}, [] );
+	const isVisible = isActive && hasPreviousEntity;
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing a template' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-template"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () =>
+				toggle( 'core/edit-site', 'welcomeGuideTemplate' )
+			}
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-template.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Note that the same template can be used by multiple pages, so any changes made here may affect other pages on the site. To switch back to editing the page content click the ‘Back’ button in the toolbar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/deprecated.js b/packages/edit-site/src/deprecated.js
new file mode 100644
index 00000000000000..40c8a257ee7d4c
--- /dev/null
+++ b/packages/edit-site/src/deprecated.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PluginMoreMenuItem as EditorPluginMoreMenuItem,
+	PluginSidebar as EditorPluginSidebar,
+	PluginSidebarMoreMenuItem as EditorPluginSidebarMoreMenuItem,
+} from '@wordpress/editor';
+import { getPath } from '@wordpress/url';
+import deprecated from '@wordpress/deprecated';
+
+const isSiteEditor = getPath( window.location.href )?.includes(
+	'site-editor.php'
+);
+
+const deprecateSlot = ( name ) => {
+	deprecated( `wp.editPost.${ name }`, {
+		since: '6.6',
+		alternative: `wp.editor.${ name }`,
+	} );
+};
+
+/* eslint-disable jsdoc/require-param */
+/**
+ * @see PluginMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginMoreMenuItem' );
+	return <EditorPluginMoreMenuItem { ...props } />;
+}
+
+/**
+ * @see PluginSidebar in @wordpress/editor package.
+ */
+export function PluginSidebar( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginSidebar' );
+	return <EditorPluginSidebar { ...props } />;
+}
+
+/**
+ * @see PluginSidebarMoreMenuItem in @wordpress/editor package.
+ */
+export function PluginSidebarMoreMenuItem( props ) {
+	if ( ! isSiteEditor ) {
+		return null;
+	}
+	deprecateSlot( 'PluginSidebarMoreMenuItem' );
+	return <EditorPluginSidebarMoreMenuItem { ...props } />;
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
new file mode 100644
index 00000000000000..34ddae3e1af7a4
--- /dev/null
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -0,0 +1,298 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	rotateLeft,
+	rotateRight,
+	backup,
+	help,
+	styles,
+	external,
+	brush,
+} from '@wordpress/icons';
+import { useCommandLoader, useCommand } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+const getGlobalStylesOpenStylesCommands = () =>
+	function useGlobalStylesOpenStylesCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
+
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/edit-site/open-styles',
+					label: __( 'Open styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
+							} );
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+					},
+					icon: styles,
+				},
+			];
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme ] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+const getGlobalStylesToggleWelcomeGuideCommands = () =>
+	function useGlobalStylesToggleWelcomeGuideCommands() {
+		const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const { set } = useDispatch( preferencesStore );
+
+		const history = useHistory();
+		const isBlockBasedTheme = useSelect( ( select ) => {
+			return select( coreStore ).getCurrentTheme().is_block_theme;
+		}, [] );
+
+		const commands = useMemo( () => {
+			if ( ! isBlockBasedTheme ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/edit-site/toggle-styles-welcome-guide',
+					label: __( 'Learn about styles' ),
+					callback: ( { close } ) => {
+						close();
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
+							} );
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						set( 'core/edit-site', 'welcomeGuideStyles', true );
+						// sometimes there's a focus loss that happens after some time
+						// that closes the modal, we need to force reopening it.
+						setTimeout( () => {
+							set( 'core/edit-site', 'welcomeGuideStyles', true );
+						}, 500 );
+					},
+					icon: help,
+				},
+			];
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme, set ] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+const getGlobalStylesResetCommands = () =>
+	function useGlobalStylesResetCommands() {
+		const [ canReset, onReset ] = useGlobalStylesReset();
+		const commands = useMemo( () => {
+			if ( ! canReset ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/edit-site/reset-global-styles',
+					label: __( 'Reset styles' ),
+					icon: isRTL() ? rotateRight : rotateLeft,
+					callback: ( { close } ) => {
+						close();
+						onReset();
+					},
+				},
+			];
+		}, [ canReset, onReset ] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+const getGlobalStylesOpenCssCommands = () =>
+	function useGlobalStylesOpenCssCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const { canEditCSS } = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+
+			return {
+				canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+			};
+		}, [] );
+
+		const commands = useMemo( () => {
+			if ( ! canEditCSS ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/edit-site/open-styles-css',
+					label: __( 'Customize CSS' ),
+					icon: brush,
+					callback: ( { close } ) => {
+						close();
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
+							} );
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView( 'global-styles-css' );
+					},
+				},
+			];
+		}, [
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canEditCSS,
+			canvas,
+		] );
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+const getGlobalStylesOpenRevisionsCommands = () =>
+	function useGlobalStylesOpenRevisionsCommands() {
+		const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+			useDispatch( editSiteStore )
+		);
+		const { params } = useLocation();
+		const { canvas = 'view' } = params;
+		const history = useHistory();
+		const hasRevisions = useSelect( ( select ) => {
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
+			return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
+		}, [] );
+
+		const commands = useMemo( () => {
+			if ( ! hasRevisions ) {
+				return [];
+			}
+
+			return [
+				{
+					name: 'core/edit-site/open-global-styles-revisions',
+					label: __( 'Style revisions' ),
+					icon: backup,
+					callback: ( { close } ) => {
+						close();
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
+							} );
+						}
+						openGeneralSidebar( 'edit-site/global-styles' );
+						setEditorCanvasContainerView(
+							'global-styles-revisions'
+						);
+					},
+				},
+			];
+		}, [
+			hasRevisions,
+			history,
+			openGeneralSidebar,
+			setEditorCanvasContainerView,
+			canvas,
+		] );
+
+		return {
+			isLoading: false,
+			commands,
+		};
+	};
+
+export function useCommonCommands() {
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
+	}, [] );
+
+	useCommand( {
+		name: 'core/edit-site/view-site',
+		label: __( 'View site' ),
+		callback: ( { close } ) => {
+			close();
+			window.open( homeUrl, '_blank' );
+		},
+		icon: external,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles',
+		hook: getGlobalStylesOpenStylesCommands(),
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/toggle-styles-welcome-guide',
+		hook: getGlobalStylesToggleWelcomeGuideCommands(),
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/reset-global-styles',
+		hook: getGlobalStylesResetCommands(),
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-css',
+		hook: getGlobalStylesOpenCssCommands(),
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-revisions',
+		hook: getGlobalStylesOpenRevisionsCommands(),
+	} );
+}
diff --git a/packages/edit-site/src/hooks/commands/use-set-command-context.js b/packages/edit-site/src/hooks/commands/use-set-command-context.js
new file mode 100644
index 00000000000000..6ecdf04989609b
--- /dev/null
+++ b/packages/edit-site/src/hooks/commands/use-set-command-context.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
+
+const { useCommandContext } = unlock( commandsPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
+
+/**
+ * React hook used to set the correct command context based on the current state.
+ */
+export default function useSetCommandContext() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+	const hasBlockSelected = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockSelectionStart();
+	}, [] );
+
+	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
+
+	// Sets the right context for the command palette
+	let commandContext = 'site-editor';
+	if ( canvas === 'edit' ) {
+		commandContext = 'entity-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
+	if ( hasEditorCanvasContainer ) {
+		/*
+		 * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context
+		 * to remove the suggested commands that may not make sense with Style Book or Style Revisions open.
+		 * See https://github.com/WordPress/gutenberg/issues/62216.
+		 */
+		commandContext = '';
+	}
+	useCommandContext( commandContext );
+}
diff --git a/packages/edit-site/src/hooks/components.js b/packages/edit-site/src/hooks/components.js
deleted file mode 100644
index 614dfe62db2f98..00000000000000
--- a/packages/edit-site/src/hooks/components.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { addFilter } from '@wordpress/hooks';
-import { MediaUpload } from '@wordpress/media-utils';
-
-addFilter(
-	'editor.MediaUpload',
-	'core/edit-site/components/media-upload',
-	() => MediaUpload
-);
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 1f7196dd2256c8..66f1b6e17eb0c2 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -1,5 +1,4 @@
 /**
  * Internal dependencies
  */
-import './components';
-import './template-part-edit';
+import './push-changes-to-global-styles';
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..49613c8b4c2822
--- /dev/null
+++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -0,0 +1,388 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+	useBlockEditingMode,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY,
+	getBlockType,
+	hasBlockSupport,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { useSupportedStyles } from '../../components/global-styles/hooks';
+import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
+
+const { cleanEmptyObject, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
+
+// Block Gap is a special case and isn't defined within the blocks
+// style properties config. We'll add it here to allow it to be pushed
+// to global styles as well.
+const STYLE_PROPERTY = {
+	...__EXPERIMENTAL_STYLE_PROPERTY,
+	blockGap: { value: [ 'spacing', 'blockGap' ] },
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_CSS_VAR_INFIX = {
+	'border.color': 'color',
+	'color.background': 'color',
+	'color.text': 'color',
+	'elements.link.color.text': 'color',
+	'elements.link.:hover.color.text': 'color',
+	'elements.link.typography.fontFamily': 'font-family',
+	'elements.link.typography.fontSize': 'font-size',
+	'elements.button.color.text': 'color',
+	'elements.button.color.background': 'color',
+	'elements.button.typography.fontFamily': 'font-family',
+	'elements.button.typography.fontSize': 'font-size',
+	'elements.caption.color.text': 'color',
+	'elements.heading.color': 'color',
+	'elements.heading.color.background': 'color',
+	'elements.heading.typography.fontFamily': 'font-family',
+	'elements.heading.gradient': 'gradient',
+	'elements.heading.color.gradient': 'gradient',
+	'elements.h1.color': 'color',
+	'elements.h1.color.background': 'color',
+	'elements.h1.typography.fontFamily': 'font-family',
+	'elements.h1.color.gradient': 'gradient',
+	'elements.h2.color': 'color',
+	'elements.h2.color.background': 'color',
+	'elements.h2.typography.fontFamily': 'font-family',
+	'elements.h2.color.gradient': 'gradient',
+	'elements.h3.color': 'color',
+	'elements.h3.color.background': 'color',
+	'elements.h3.typography.fontFamily': 'font-family',
+	'elements.h3.color.gradient': 'gradient',
+	'elements.h4.color': 'color',
+	'elements.h4.color.background': 'color',
+	'elements.h4.typography.fontFamily': 'font-family',
+	'elements.h4.color.gradient': 'gradient',
+	'elements.h5.color': 'color',
+	'elements.h5.color.background': 'color',
+	'elements.h5.typography.fontFamily': 'font-family',
+	'elements.h5.color.gradient': 'gradient',
+	'elements.h6.color': 'color',
+	'elements.h6.color.background': 'color',
+	'elements.h6.typography.fontFamily': 'font-family',
+	'elements.h6.color.gradient': 'gradient',
+	'color.gradient': 'gradient',
+	blockGap: 'spacing',
+	'typography.fontSize': 'font-size',
+	'typography.fontFamily': 'font-family',
+};
+
+// TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
+// removed by moving PushChangesToGlobalStylesControl to
+// @wordpress/block-editor.
+const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'border.color': 'borderColor',
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
+const SUPPORTED_STYLES = [ 'border', 'color', 'spacing', 'typography' ];
+
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
+const flatBorderProperties = [ 'borderColor', 'borderWidth', 'borderStyle' ];
+const sides = [ 'top', 'right', 'bottom', 'left' ];
+
+function getBorderStyleChanges( border, presetColor, userStyle ) {
+	if ( ! border && ! presetColor ) {
+		return [];
+	}
+
+	const changes = [
+		...getFallbackBorderStyleChange( 'top', border, userStyle ),
+		...getFallbackBorderStyleChange( 'right', border, userStyle ),
+		...getFallbackBorderStyleChange( 'bottom', border, userStyle ),
+		...getFallbackBorderStyleChange( 'left', border, userStyle ),
+	];
+
+	// Handle a flat border i.e. all sides the same, CSS shorthand.
+	const { color: customColor, style, width } = border || {};
+	const hasColorOrWidth = presetColor || customColor || width;
+
+	if ( hasColorOrWidth && ! style ) {
+		// Global Styles need individual side configurations to overcome
+		// theme.json configurations which are per side as well.
+		sides.forEach( ( side ) => {
+			// Only add fallback border-style if global styles don't already
+			// have something set.
+			if ( ! userStyle?.[ side ]?.style ) {
+				changes.push( {
+					path: [ 'border', side, 'style' ],
+					value: 'solid',
+				} );
+			}
+		} );
+	}
+
+	return changes;
+}
+
+function getFallbackBorderStyleChange( side, border, globalBorderStyle ) {
+	if ( ! border?.[ side ] || globalBorderStyle?.[ side ]?.style ) {
+		return [];
+	}
+
+	const { color, style, width } = border[ side ];
+	const hasColorOrWidth = color || width;
+
+	if ( ! hasColorOrWidth || style ) {
+		return [];
+	}
+
+	return [ { path: [ 'border', side, 'style' ], value: 'solid' } ];
+}
+
+function useChangesToPush( name, attributes, userConfig ) {
+	const supports = useSupportedStyles( name );
+	const blockUserConfig = userConfig?.styles?.blocks?.[ name ];
+
+	return useMemo( () => {
+		const changes = supports.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 }`
+				: getValueFromObjectPath( attributes.style, path );
+
+			// Links only have a single support entry but have two element
+			// style properties, color and hover color. The following check
+			// will add the hover color to the changes if required.
+			if ( key === 'linkColor' ) {
+				const linkChanges = value ? [ { path, value } ] : [];
+				const hoverPath = [
+					'elements',
+					'link',
+					':hover',
+					'color',
+					'text',
+				];
+				const hoverValue = getValueFromObjectPath(
+					attributes.style,
+					hoverPath
+				);
+
+				if ( hoverValue ) {
+					linkChanges.push( { path: hoverPath, value: hoverValue } );
+				}
+
+				return linkChanges;
+			}
+
+			// The shorthand border styles can't be mapped directly as global
+			// styles requires longhand config.
+			if ( flatBorderProperties.includes( key ) && value ) {
+				// The shorthand config path is included to clear the block attribute.
+				const borderChanges = [ { path, value } ];
+				sides.forEach( ( side ) => {
+					const currentPath = [ ...path ];
+					currentPath.splice( -1, 0, side );
+					borderChanges.push( { path: currentPath, value } );
+				} );
+				return borderChanges;
+			}
+
+			return value ? [ { path, value } ] : [];
+		} );
+
+		// To ensure display of a visible border, global styles require a
+		// default border style if a border color or width is present.
+		getBorderStyleChanges(
+			attributes.style?.border,
+			attributes.borderColor,
+			blockUserConfig?.border
+		).forEach( ( change ) => changes.push( change ) );
+
+		return changes;
+	}, [ supports, attributes, blockUserConfig ] );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const changes = useChangesToPush( name, attributes, userConfig );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		if ( changes.length > 0 ) {
+			const { style: blockStyles } = attributes;
+
+			const newBlockStyles = structuredClone( blockStyles );
+			const newUserConfig = structuredClone( userConfig );
+
+			for ( const { path, value } of changes ) {
+				setNestedValue( newBlockStyles, path, undefined );
+				setNestedValue(
+					newUserConfig,
+					[ 'styles', 'blocks', name, ...path ],
+					value
+				);
+			}
+
+			const newBlockAttributes = {
+				borderColor: undefined,
+				backgroundColor: undefined,
+				textColor: undefined,
+				gradient: undefined,
+				fontSize: undefined,
+				fontFamily: undefined,
+				style: cleanEmptyObject( newBlockStyles ),
+			};
+
+			// @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( newBlockAttributes );
+			setUserConfig( newUserConfig, { undoIgnore: true } );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the block e.g. 'Heading'.
+					__( '%s styles applied.' ),
+					getBlockType( name ).title
+				),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick() {
+								__unstableMarkNextChangeAsNotPersistent();
+								setAttributes( attributes );
+								setUserConfig( userConfig, {
+									undoIgnore: true,
+								} );
+							},
+						},
+					],
+				}
+			);
+		}
+	}, [
+		__unstableMarkNextChangeAsNotPersistent,
+		attributes,
+		changes,
+		createSuccessNotice,
+		name,
+		setAttributes,
+		setUserConfig,
+		userConfig,
+	] );
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				__next40pxDefaultSize
+				variant="secondary"
+				accessibleWhenDisabled
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Apply globally' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+function PushChangesToGlobalStyles( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+	const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
+		hasBlockSupport( props.name, feature )
+	);
+	const isDisplayed =
+		blockEditingMode === 'default' && supportsStyles && isBlockBasedTheme;
+
+	if ( ! isDisplayed ) {
+		return null;
+	}
+
+	return (
+		<InspectorAdvancedControls>
+			<PushChangesToGlobalStylesControl { ...props } />
+		</InspectorAdvancedControls>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => (
+		<>
+			<BlockEdit key="edit" { ...props } />
+			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
+		</>
+	)
+);
+
+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/hooks/template-part-edit.js b/packages/edit-site/src/hooks/template-part-edit.js
deleted file mode 100644
index d28530dcdc4b87..00000000000000
--- a/packages/edit-site/src/hooks/template-part-edit.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { BlockControls } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { ToolbarButton } from '@wordpress/components';
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { useLocation } from '../components/routes';
-import { useLink } from '../components/routes/link';
-
-function EditTemplatePartMenuItem( { attributes } ) {
-	const { theme, slug } = attributes;
-	const { params } = useLocation();
-	const templatePart = useSelect(
-		( select ) => {
-			return select( coreStore ).getEntityRecord(
-				'postType',
-				'wp_template_part',
-				// Ideally this should be an official public API.
-				`${ theme }//${ slug }`
-			);
-		},
-		[ theme, slug ]
-	);
-
-	const linkProps = useLink(
-		{
-			postId: templatePart?.id,
-			postType: templatePart?.type,
-		},
-		{
-			fromTemplateId: params.postId,
-		}
-	);
-
-	if ( ! templatePart ) {
-		return null;
-	}
-
-	return (
-		<BlockControls group="other">
-			<ToolbarButton
-				{ ...linkProps }
-				onClick={ ( event ) => {
-					linkProps.onClick( event );
-				} }
-			>
-				{ __( 'Edit' ) }
-			</ToolbarButton>
-		</BlockControls>
-	);
-}
-
-export const withEditBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { attributes, name } = props;
-		const isDisplayed = name === 'core/template-part' && attributes.slug;
-
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ isDisplayed && (
-					<EditTemplatePartMenuItem attributes={ attributes } />
-				) }
-			</>
-		);
-	},
-	'withEditBlockControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-site/template-part-edit-button',
-	withEditBlockControls
-);
diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js
new file mode 100644
index 00000000000000..9cae223935c8cb
--- /dev/null
+++ b/packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js
@@ -0,0 +1,271 @@
+/**
+ * Internal dependencies
+ */
+import {
+	filterObjectByProperties,
+	removePropertiesFromObject,
+} from '../use-theme-style-variations-by-property';
+
+describe( 'filterObjectByProperties', () => {
+	const noop = () => {};
+	test.each( [
+		{
+			object: {
+				foo: 'bar',
+				array: [ 1, 3, 4 ],
+			},
+			properties: [ 'array' ],
+			expected: { array: [ 1, 3, 4 ] },
+		},
+		{
+			object: {
+				foo: 'bar',
+			},
+			properties: [ 'does-not-exist' ],
+			expected: {},
+		},
+		{
+			object: {
+				foo: 'bar',
+			},
+			properties: false,
+			expected: {},
+		},
+		{
+			object: {
+				dig: {
+					deeper: {
+						null: null,
+					},
+				},
+			},
+			properties: [ 'null' ],
+			expected: {
+				dig: {
+					deeper: {
+						null: null,
+					},
+				},
+			},
+		},
+		{
+			object: {
+				function: noop,
+			},
+			properties: [ 'function' ],
+			expected: {
+				function: noop,
+			},
+		},
+		{
+			object: [],
+			properties: [ 'something' ],
+			expected: {},
+		},
+		{
+			object: {},
+			properties: undefined,
+			expected: {},
+		},
+		{
+			object: {
+				'nested-object': {
+					'nested-object-foo': 'bar',
+					array: [ 1, 3, 4 ],
+				},
+			},
+			properties: [ 'nested-object-foo' ],
+			expected: {
+				'nested-object': {
+					'nested-object-foo': 'bar',
+				},
+			},
+		},
+	] )(
+		'should filter object by $properties',
+		( { expected, object, properties } ) => {
+			const result = filterObjectByProperties( object, properties );
+			expect( result ).toEqual( expected );
+		}
+	);
+} );
+
+describe( 'removePropertiesFromObject', () => {
+	const mockBaseVariation = {
+		settings: {
+			typography: {
+				fontFamilies: {
+					custom: [
+						{
+							name: 'ADLaM Display',
+							fontFamily: 'ADLaM Display, system-ui',
+							slug: 'adlam-display',
+							fontFace: [
+								{
+									src: 'adlam.woff2',
+									fontWeight: '400',
+									fontStyle: 'normal',
+									fontFamily: 'ADLaM Display',
+								},
+							],
+						},
+					],
+				},
+				fontSizes: [
+					{
+						name: 'Base small',
+						slug: 'base-small',
+						size: '1px',
+					},
+					{
+						name: 'Base medium',
+						slug: 'base-medium',
+						size: '2px',
+					},
+					{
+						name: 'Base large',
+						slug: 'base-large',
+						size: '3px',
+					},
+				],
+			},
+			color: {
+				palette: {
+					custom: [
+						{
+							color: '#c42727',
+							name: 'Color 1',
+							slug: 'custom-color-1',
+						},
+						{
+							color: '#3b0f0f',
+							name: 'Color 2',
+							slug: 'custom-color-2',
+						},
+					],
+				},
+			},
+			layout: {
+				wideSize: '1137px',
+				contentSize: '400px',
+			},
+		},
+		styles: {
+			typography: {
+				fontSize: '12px',
+				lineHeight: '1.5',
+			},
+			color: {
+				backgroundColor: 'cheese',
+				color: 'lettuce',
+			},
+			elements: {
+				cite: {
+					color: {
+						text: 'white',
+					},
+					typography: {
+						letterSpacing: 'white',
+					},
+				},
+			},
+			blocks: {
+				'core/quote': {
+					color: {
+						text: 'hello',
+						background: 'dolly',
+					},
+					typography: {
+						fontSize: '111111px',
+					},
+				},
+				'core/group': {
+					typography: {
+						fontFamily: 'var:preset|font-family|system-sans-serif',
+					},
+				},
+			},
+		},
+	};
+
+	it( 'should return with no properties', () => {
+		const object = { test: 'me' };
+		expect( removePropertiesFromObject( object, undefined ) ).toEqual(
+			object
+		);
+	} );
+
+	it( 'should return with non-string properties', () => {
+		const object = { test: 'you' };
+		expect( removePropertiesFromObject( object, true ) ).toEqual( object );
+	} );
+
+	it( 'should return with empty object', () => {
+		const object = {};
+		expect( removePropertiesFromObject( object, [ 'color' ] ) ).toEqual(
+			object
+		);
+	} );
+
+	it( 'should return with null', () => {
+		expect( removePropertiesFromObject( null, [ 'color' ] ) ).toEqual(
+			null
+		);
+	} );
+
+	it( 'should remove the specified properties from the object', () => {
+		expect(
+			removePropertiesFromObject(
+				{
+					...mockBaseVariation,
+				},
+				[ 'typography' ]
+			)
+		).toEqual( {
+			settings: {
+				color: {
+					palette: {
+						custom: [
+							{
+								color: '#c42727',
+								name: 'Color 1',
+								slug: 'custom-color-1',
+							},
+							{
+								color: '#3b0f0f',
+								name: 'Color 2',
+								slug: 'custom-color-2',
+							},
+						],
+					},
+				},
+				layout: {
+					wideSize: '1137px',
+					contentSize: '400px',
+				},
+			},
+			styles: {
+				color: {
+					backgroundColor: 'cheese',
+					color: 'lettuce',
+				},
+				elements: {
+					cite: {
+						color: {
+							text: 'white',
+						},
+					},
+				},
+				blocks: {
+					'core/quote': {
+						color: {
+							text: 'hello',
+							background: 'dolly',
+						},
+					},
+					'core/group': {},
+				},
+			},
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
new file mode 100644
index 00000000000000..adf98b0d89b019
--- /dev/null
+++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const EMPTY_ARRAY = [];
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+/**
+ * Removes all instances of properties from an object.
+ *
+ * @param {Object}   object     The object to remove the properties from.
+ * @param {string[]} properties The properties to remove.
+ * @return {Object} The modified object.
+ */
+export function removePropertiesFromObject( object, properties ) {
+	if ( ! properties?.length ) {
+		return object;
+	}
+
+	if (
+		typeof object !== 'object' ||
+		! object ||
+		! Object.keys( object ).length
+	) {
+		return object;
+	}
+
+	for ( const key in object ) {
+		if ( properties.includes( key ) ) {
+			delete object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			removePropertiesFromObject( object[ key ], properties );
+		}
+	}
+	return object;
+}
+
+/**
+ * Checks whether a style variation is empty.
+ *
+ * @param {Object} variation          A style variation object.
+ * @param {string} variation.title    The title of the variation.
+ * @param {Object} variation.settings The settings of the variation.
+ * @param {Object} variation.styles   The styles of the variation.
+ * @return {boolean} Whether the variation is empty.
+ */
+function hasThemeVariation( { title, settings, styles } ) {
+	return (
+		title === __( 'Default' ) || // Always preserve the default variation.
+		Object.keys( settings ).length > 0 ||
+		Object.keys( styles ).length > 0
+	);
+}
+
+/**
+ * Fetches the current theme style variations that contain only the specified properties
+ * and merges them with the user config.
+ *
+ * @param {string[]} properties The properties to filter by.
+ * @return {Object[]|*} The merged object.
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig(
+	properties = []
+) {
+	const { variationsFromTheme } = useSelect( ( select ) => {
+		const _variationsFromTheme =
+			select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations();
+
+		return {
+			variationsFromTheme: _variationsFromTheme || EMPTY_ARRAY,
+		};
+	}, [] );
+	const { user: userVariation } = useContext( GlobalStylesContext );
+
+	const propertiesAsString = properties.toString();
+
+	return useMemo( () => {
+		const clonedUserVariation = structuredClone( userVariation );
+
+		// Get user variation and remove the settings for the given property.
+		const userVariationWithoutProperties = removePropertiesFromObject(
+			clonedUserVariation,
+			properties
+		);
+		userVariationWithoutProperties.title = __( 'Default' );
+
+		const variationsWithPropertiesAndBase = variationsFromTheme
+			.filter( ( variation ) => {
+				return isVariationWithProperties( variation, properties );
+			} )
+			.map( ( variation ) => {
+				return mergeBaseAndUserConfigs(
+					userVariationWithoutProperties,
+					variation
+				);
+			} );
+
+		const variationsByProperties = [
+			userVariationWithoutProperties,
+			...variationsWithPropertiesAndBase,
+		];
+
+		/*
+		 * Filter out variations with no settings or styles.
+		 */
+		return variationsByProperties?.length
+			? variationsByProperties.filter( hasThemeVariation )
+			: [];
+	}, [ propertiesAsString, userVariation, variationsFromTheme ] );
+}
+
+/**
+ * Returns a new object, with properties specified in `properties` array.,
+ * maintain the original object tree structure.
+ * The function is recursive, so it will perform a deep search for the given properties.
+ * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.
+ *
+ * @param {Object}   object     The object to filter
+ * @param {string[]} properties The properties to filter by
+ * @return {Object} The merged object.
+ */
+export const filterObjectByProperties = ( object, properties ) => {
+	if ( ! object || ! properties?.length ) {
+		return {};
+	}
+
+	const newObject = {};
+	Object.keys( object ).forEach( ( key ) => {
+		if ( properties.includes( key ) ) {
+			newObject[ key ] = object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			const newFilter = filterObjectByProperties(
+				object[ key ],
+				properties
+			);
+			if ( Object.keys( newFilter ).length ) {
+				newObject[ key ] = newFilter;
+			}
+		}
+	} );
+	return newObject;
+};
+
+/**
+ * Compares a style variation to the same variation filtered by the specified properties.
+ * Returns true if the variation contains only the properties specified.
+ *
+ * @param {Object}   variation  The variation to compare.
+ * @param {string[]} properties The properties to compare.
+ * @return {boolean} Whether the variation contains only the specified properties.
+ */
+export function isVariationWithProperties( variation, properties ) {
+	const variationWithProperties = filterObjectByProperties(
+		structuredClone( variation ),
+		properties
+	);
+
+	return areGlobalStyleConfigsEqual( variationWithProperties, variation );
+}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 858ea8c42f20d4..b96ce5cb67f5e1 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -4,170 +4,111 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import {
 	registerCoreBlocks,
+	__experimentalGetCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { dispatch, select } from '@wordpress/data';
-import { render, unmountComponentAtNode } from '@wordpress/element';
-import {
-	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
-	__experimentalFetchUrlData as fetchUrlData,
-} from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
-import { store as interfaceStore } from '@wordpress/interface';
+import { dispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+import { createRoot, StrictMode } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { __ } from '@wordpress/i18n';
-import { store as viewportStore } from '@wordpress/viewport';
-import { getQueryArgs } from '@wordpress/url';
-import { addFilter } from '@wordpress/hooks';
+import {
+	registerLegacyWidgetBlock,
+	registerWidgetGroupBlock,
+} from '@wordpress/widgets';
 
 /**
  * Internal dependencies
  */
 import './hooks';
 import { store as editSiteStore } from './store';
-import EditSiteApp from './components/app';
-import getIsListPage from './utils/get-is-list-page';
-import ErrorBoundaryWarning from './components/error-boundary/warning';
+import { unlock } from './lock-unlock';
+import App from './components/app';
+
+const { registerCoreBlockBindingsSources } = unlock( editorPrivateApis );
 
 /**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
+ * Initializes the site editor screen.
  *
- * @param {Element} target   DOM node in which editor is rendered.
- * @param {?Object} settings Editor settings object.
+ * @param {string} id       ID of the root element to render the screen in.
+ * @param {Object} settings Editor settings.
  */
-export function reinitializeEditor( target, settings ) {
-	// Display warning if editor wasn't able to resolve homepage template.
-	if ( ! settings.__unstableHomeTemplate ) {
-		render(
-			<ErrorBoundaryWarning
-				message={ __(
-					'The editor is unable to find a block template for the homepage.'
-				) }
-				dashboardLink={
-					settings.__experimentalDashboardLink ?? 'index.php'
-				}
-			/>,
-			target
-		);
-		return;
-	}
+export function initializeEditor( id, settings ) {
+	const target = document.getElementById( id );
+	const root = createRoot( target );
 
-	/*
-	 * Prevent adding the Clasic block in the site editor.
-	 * Only add the filter when the site editor is initialized, not imported.
-	 * Also only add the filter(s) after registerCoreBlocks()
-	 * so that common filters in the block library are not overwritten.
-	 *
-	 * This usage here is inspired by previous usage of the filter in the post editor:
-	 * https://github.com/WordPress/gutenberg/pull/37157
-	 */
-	addFilter(
-		'blockEditor.__unstableCanInsertBlockType',
-		'removeClassicBlockFromInserter',
-		( canInsert, blockType ) => {
-			if ( blockType.name === 'core/freeform' ) {
-				return false;
-			}
-			return canInsert;
-		}
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( { name } ) => name !== 'core/freeform'
 	);
-
-	// This will be a no-op if the target doesn't have any React nodes.
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind( null, target, settings );
+	registerCoreBlocks( coreBlocks );
+	registerCoreBlockBindingsSources();
+	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
+	registerLegacyWidgetBlock( { inserter: false } );
+	registerWidgetGroupBlock( { inserter: false } );
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		__experimentalRegisterExperimentalCoreBlocks( {
+			enableFSEBlocks: true,
+		} );
+	}
 
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
-	{
-		dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
-			editorMode: 'visual',
-			fixedToolbar: false,
-			focusMode: false,
-			keepCaretInsideBlock: false,
-			welcomeGuide: true,
-			welcomeGuideStyles: true,
-			showListViewByDefault: false,
-		} );
-
-		// Check if the block list view should be open by default.
-		if (
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'showListViewByDefault'
-			)
-		) {
-			dispatch( editSiteStore ).setIsListViewOpened( true );
-		}
-
-		dispatch( interfaceStore ).setDefaultComplementaryArea(
-			'core/edit-site',
-			'edit-site/template'
-		);
-
-		dispatch( editSiteStore ).updateSettings( settings );
-
-		// Keep the defaultTemplateTypes in the core/editor settings too,
-		// so that they can be selected with core/editor selectors in any editor.
-		// This is needed because edit-site doesn't initialize with EditorProvider,
-		// which internally uses updateEditorSettings as well.
-		dispatch( editorStore ).updateEditorSettings( {
-			defaultTemplateTypes: settings.defaultTemplateTypes,
-			defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
+	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+		welcomeGuide: true,
+		welcomeGuideStyles: true,
+		welcomeGuidePage: true,
+		welcomeGuideTemplate: true,
+	} );
+
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
+		distractionFree: false,
+		editorMode: 'visual',
+		editorTool: 'edit',
+		fixedToolbar: false,
+		focusMode: false,
+		inactivePanels: [],
+		keepCaretInsideBlock: false,
+		openPanels: [ 'post-status' ],
+		showBlockBreadcrumbs: true,
+		showListViewByDefault: false,
+		enableChoosePatternModal: true,
+	} );
+
+	if ( window.__experimentalMediaProcessing ) {
+		dispatch( preferencesStore ).setDefaults( 'core/media', {
+			requireApproval: true,
+			optimizeOnUpload: true,
 		} );
-
-		const isLandingOnListPage = getIsListPage(
-			getQueryArgs( window.location.href )
-		);
-
-		if ( isLandingOnListPage ) {
-			// Default the navigation panel to be opened when we're in a bigger
-			// screen and land in the list screen.
-			dispatch( editSiteStore ).setIsNavigationPanelOpened(
-				select( viewportStore ).isViewportMatch( 'medium' )
-			);
-		}
 	}
 
+	dispatch( editSiteStore ).updateSettings( settings );
+
 	// Prevent the default browser action for files dropped outside of dropzones.
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
-		<EditSiteApp
-			reboot={ reboot }
-			homeTemplate={ settings.__unstableHomeTemplate }
-		/>,
-		target
+	root.render(
+		<StrictMode>
+			<App />
+		</StrictMode>
 	);
-}
 
-/**
- * Initializes the site editor screen.
- *
- * @param {string} id       ID of the root element to render the screen in.
- * @param {Object} settings Editor settings.
- */
-export function initializeEditor( id, settings ) {
-	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
-		fetchLinkSuggestions( search, searchOptions, settings );
-	settings.__experimentalFetchRichUrlData = fetchUrlData;
-
-	const target = document.getElementById( id );
-
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
-	registerCoreBlocks();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		__experimentalRegisterExperimentalCoreBlocks( {
-			enableFSEBlocks: true,
-		} );
-	}
+	return root;
+}
 
-	reinitializeEditor( target, settings );
+export function reinitializeEditor() {
+	deprecated( 'wp.editSite.reinitializeEditor', {
+		since: '6.2',
+		version: '6.3',
+	} );
 }
 
-export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
-export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
-export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
+export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
+export { store } from './store';
+export * from './deprecated';
+
+// Temporary: While the posts dashboard is being iterated on
+// it's being built in the same package as the site editor.
+export { initializePostsDashboard } from './posts';
diff --git a/packages/edit-site/src/lock-unlock.js b/packages/edit-site/src/lock-unlock.js
new file mode 100644
index 00000000000000..5d1a87670c52fb
--- /dev/null
+++ b/packages/edit-site/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/edit-site'
+	);
diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js
new file mode 100644
index 00000000000000..9c31fdd0040ca1
--- /dev/null
+++ b/packages/edit-site/src/posts.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	registerCoreBlocks,
+	__experimentalGetCoreBlocks,
+	__experimentalRegisterExperimentalCoreBlocks,
+} from '@wordpress/block-library';
+import { dispatch } from '@wordpress/data';
+import { createRoot, StrictMode } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	registerLegacyWidgetBlock,
+	registerWidgetGroupBlock,
+} from '@wordpress/widgets';
+
+/**
+ * Internal dependencies
+ */
+import './hooks';
+import { store as editSiteStore } from './store';
+
+/**
+ * Internal dependencies
+ */
+import PostsApp from './components/posts-app';
+
+/**
+ * Initializes the "Posts Dashboard"
+ * @param {string} id       ID of the root element to render the screen in.
+ * @param {Object} settings Editor settings.
+ */
+export function initializePostsDashboard( id, settings ) {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return;
+	}
+	const target = document.getElementById( id );
+	const root = createRoot( target );
+
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
+	const coreBlocks = __experimentalGetCoreBlocks().filter(
+		( { name } ) => name !== 'core/freeform'
+	);
+	registerCoreBlocks( coreBlocks );
+	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
+	registerLegacyWidgetBlock( { inserter: false } );
+	registerWidgetGroupBlock( { inserter: false } );
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		__experimentalRegisterExperimentalCoreBlocks( {
+			enableFSEBlocks: true,
+		} );
+	}
+
+	// We dispatch actions and update the store synchronously before rendering
+	// so that we won't trigger unnecessary re-renders with useEffect.
+	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
+		welcomeGuide: true,
+		welcomeGuideStyles: true,
+		welcomeGuidePage: true,
+		welcomeGuideTemplate: true,
+	} );
+
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
+		distractionFree: false,
+		editorMode: 'visual',
+		editorTool: 'edit',
+		fixedToolbar: false,
+		focusMode: false,
+		inactivePanels: [],
+		keepCaretInsideBlock: false,
+		openPanels: [ 'post-status' ],
+		showBlockBreadcrumbs: true,
+		showListViewByDefault: false,
+		enableChoosePatternModal: true,
+	} );
+
+	dispatch( editSiteStore ).updateSettings( settings );
+
+	// Prevent the default browser action for files dropped outside of dropzones.
+	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
+	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
+
+	root.render(
+		<StrictMode>
+			<PostsApp />
+		</StrictMode>
+	);
+
+	return root;
+}
diff --git a/packages/edit-site/src/posts.scss b/packages/edit-site/src/posts.scss
new file mode 100644
index 00000000000000..ec04c9cddf25b8
--- /dev/null
+++ b/packages/edit-site/src/posts.scss
@@ -0,0 +1,55 @@
+@import "../../dataviews/src/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/page/style.scss";
+@import "./components/save-hub/style.scss";
+@import "./components/save-panel/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/site-hub/style.scss";
+@import "./components/site-icon/style.scss";
+@import "./components/editor-canvas-container/style.scss";
+@import "./components/post-list/style.scss";
+@import "./components/resizable-frame/style.scss";
+
+@include wordpress-admin-schemes();
+
+#wpadminbar,
+#adminmenumain {
+	display: none;
+}
+#wpcontent {
+	margin-left: 0;
+}
+body.js #wpbody {
+	padding-top: 0;
+}
+body {
+	@include wp-admin-reset("#gutenberg-posts-dashboard");
+}
+#gutenberg-posts-dashboard {
+	@include reset;
+	height: 100vh;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the over-scroll bounce on the non-scrolling container, for a bad experience.
+	@include break-small {
+		bottom: 0;
+		left: 0;
+		min-height: 100vh;
+		position: fixed;
+		right: 0;
+		top: 0;
+	}
+
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
+
+	.components-editor-notices__snackbar {
+		position: fixed;
+		right: 0;
+		bottom: 16px;
+		padding-left: 16px;
+		padding-right: 16px;
+	}
+}
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 50b2ce7da376db..269f58c57d00ab 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -1,23 +1,27 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import { parse } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-import { addQueryArgs, getPathAndQueryString } from '@wordpress/url';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { speak } from '@wordpress/a11y';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { STORE_NAME as editSiteStoreName } from './constants';
-import isTemplateRevertable from '../utils/is-template-revertable';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../utils/constants';
+import { unlock } from '../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Dispatches an action that toggles a feature flag.
@@ -26,11 +30,14 @@ import isTemplateRevertable from '../utils/is-template-revertable';
  */
 export function toggleFeature( featureName ) {
 	return function ( { registry } ) {
-		deprecated( "select( 'core/edit-site' ).toggleFeature( featureName )", {
-			since: '6.0',
-			alternative:
-				"select( 'core/preferences').toggle( 'core/edit-site', featureName )",
-		} );
+		deprecated(
+			"dispatch( 'core/edit-site' ).toggleFeature( featureName )",
+			{
+				since: '6.0',
+				alternative:
+					"dispatch( 'core/preferences').toggle( 'core/edit-site', featureName )",
+			}
+		);
 
 		registry
 			.dispatch( preferencesStore )
@@ -41,61 +48,71 @@ export function toggleFeature( featureName ) {
 /**
  * Action that changes the width of the editing canvas.
  *
+ * @deprecated
+ *
  * @param {string} deviceType
  *
  * @return {Object} Action object.
  */
-export function __experimentalSetPreviewDeviceType( deviceType ) {
-	return {
-		type: 'SET_PREVIEW_DEVICE_TYPE',
-		deviceType,
+export const __experimentalSetPreviewDeviceType =
+	( deviceType ) =>
+	( { registry } ) => {
+		deprecated(
+			"dispatch( 'core/edit-site' ).__experimentalSetPreviewDeviceType",
+			{
+				since: '6.5',
+				version: '6.7',
+				hint: 'registry.dispatch( editorStore ).setDeviceType',
+			}
+		);
+		registry.dispatch( editorStore ).setDeviceType( deviceType );
 	};
-}
 
 /**
  * Action that sets a template, optionally fetching it from REST API.
  *
- * @param {number} templateId   The template ID.
- * @param {string} templateSlug The template slug.
  * @return {Object} Action object.
  */
-export const setTemplate =
-	( templateId, templateSlug ) =>
-	async ( { dispatch, registry } ) => {
-		if ( ! templateSlug ) {
-			const template = await registry
-				.resolveSelect( coreStore )
-				.getEntityRecord( 'postType', 'wp_template', templateId );
-			templateSlug = template?.slug;
-		}
+export function setTemplate() {
+	deprecated( "dispatch( 'core/edit-site' ).setTemplate", {
+		since: '6.5',
+		version: '6.8',
+		hint: 'The setTemplate is not needed anymore, the correct entity is resolved from the URL automatically.',
+	} );
 
-		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId,
-			page: { context: { templateSlug } },
-		} );
+	return {
+		type: 'NOTHING',
 	};
+}
 
 /**
  * Action that adds a new template and sets it as the current template.
  *
  * @param {Object} template The template.
  *
+ * @deprecated
+ *
  * @return {Object} Action object used to set the current template.
  */
 export const addTemplate =
 	( template ) =>
 	async ( { dispatch, registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).addTemplate", {
+			since: '6.5',
+			version: '6.8',
+			hint: 'use saveEntityRecord directly',
+		} );
+
 		const newTemplate = await registry
 			.dispatch( coreStore )
-			.saveEntityRecord( 'postType', 'wp_template', template );
+			.saveEntityRecord( 'postType', TEMPLATE_POST_TYPE, template );
 
 		if ( template.content ) {
 			registry
 				.dispatch( coreStore )
 				.editEntityRecord(
 					'postType',
-					'wp_template',
+					TEMPLATE_POST_TYPE,
 					newTemplate.id,
 					{ blocks: parse( template.content ) },
 					{ undoIgnore: true }
@@ -103,9 +120,9 @@ export const addTemplate =
 		}
 
 		dispatch( {
-			type: 'SET_TEMPLATE',
-			templateId: newTemplate.id,
-			page: { context: { templateSlug: newTemplate.slug } },
+			type: 'SET_EDITED_POST',
+			postType: TEMPLATE_POST_TYPE,
+			id: newTemplate.id,
 		} );
 	};
 
@@ -116,182 +133,198 @@ export const addTemplate =
  */
 export const removeTemplate =
 	( template ) =>
-	async ( { registry } ) => {
-		try {
-			await registry
-				.dispatch( coreStore )
-				.deleteEntityRecord( 'postType', template.type, template.id, {
-					force: true,
-				} );
-
-			const lastError = registry
-				.select( coreStore )
-				.getLastEntityDeleteError(
-					'postType',
-					template.type,
-					template.id
-				);
-
-			if ( lastError ) {
-				throw lastError;
-			}
-
-			registry.dispatch( noticesStore ).createSuccessNotice(
-				sprintf(
-					/* translators: The template/part's name. */
-					__( '"%s" deleted.' ),
-					template.title.rendered
-				),
-				{ type: 'snackbar' }
-			);
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the template.' );
-
-			registry
-				.dispatch( noticesStore )
-				.createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
+	( { registry } ) => {
+		return unlock( registry.dispatch( editorStore ) ).removeTemplates( [
+			template,
+		] );
 	};
 
 /**
  * Action that sets a template part.
  *
+ * @deprecated
  * @param {string} templatePartId The template part ID.
  *
  * @return {Object} Action object.
  */
 export function setTemplatePart( templatePartId ) {
+	deprecated( "dispatch( 'core/edit-site' ).setTemplatePart", {
+		since: '6.8',
+	} );
+
 	return {
-		type: 'SET_TEMPLATE_PART',
-		templatePartId,
+		type: 'SET_EDITED_POST',
+		postType: TEMPLATE_PART_POST_TYPE,
+		id: templatePartId,
 	};
 }
 
 /**
- * Action that sets the home template ID to the template ID of the page resolved
- * from a given path.
+ * Action that sets a navigation menu.
+ *
+ * @deprecated
+ * @param {string} navigationMenuId The Navigation Menu Post ID.
  *
- * @param {number} homeTemplateId The template ID for the homepage.
+ * @return {Object} Action object.
  */
-export function setHomeTemplateId( homeTemplateId ) {
+export function setNavigationMenu( navigationMenuId ) {
+	deprecated( "dispatch( 'core/edit-site' ).setNavigationMenu", {
+		since: '6.8',
+	} );
+
 	return {
-		type: 'SET_HOME_TEMPLATE',
-		homeTemplateId,
+		type: 'SET_EDITED_POST',
+		postType: NAVIGATION_POST_TYPE,
+		id: navigationMenuId,
 	};
 }
 
 /**
- * Resolves the template for a page and displays both. If no path is given, attempts
- * to use the postId to generate a path like `?p=${ postId }`.
+ * Action that sets an edited entity.
  *
- * @param {Object} page         The page object.
- * @param {string} page.type    The page type.
- * @param {string} page.slug    The page slug.
- * @param {string} page.path    The page path.
- * @param {Object} page.context The page context.
+ * @deprecated
+ * @param {string} postType The entity's post type.
+ * @param {string} postId   The entity's ID.
+ * @param {Object} context  The entity's context.
  *
- * @return {number} The resolved template ID for the page route.
+ * @return {Object} Action object.
  */
-export const setPage =
-	( page ) =>
-	async ( { dispatch, registry } ) => {
-		if ( ! page.path && page.context?.postId ) {
-			const entity = await registry
-				.resolveSelect( coreStore )
-				.getEntityRecord(
-					'postType',
-					page.context.postType || 'post',
-					page.context.postId
-				);
-			// If the entity is undefined for some reason, path will resolve to "/"
-			page.path = getPathAndQueryString( entity?.link );
-		}
-
-		const template = await registry
-			.resolveSelect( coreStore )
-			.__experimentalGetTemplateForLink( page.path );
-
-		if ( ! template ) {
-			return;
-		}
+export function setEditedEntity( postType, postId, context ) {
+	return {
+		type: 'SET_EDITED_POST',
+		postType,
+		id: postId,
+		context,
+	};
+}
 
-		dispatch( {
-			type: 'SET_PAGE',
-			page: template.slug
-				? {
-						...page,
-						context: {
-							...page.context,
-							templateSlug: template.slug,
-						},
-				  }
-				: page,
-			templateId: template.id,
-		} );
+/**
+ * @deprecated
+ */
+export function setHomeTemplateId() {
+	deprecated( "dispatch( 'core/edit-site' ).setHomeTemplateId", {
+		since: '6.2',
+		version: '6.4',
+	} );
 
-		return template.id;
+	return {
+		type: 'NOTHING',
 	};
+}
 
 /**
- * Action that sets the active navigation panel menu.
+ * Set's the current block editor context.
  *
- * @param {string} menu Menu prop of active menu.
+ * @deprecated
+ * @param {Object} context The context object.
  *
  * @return {Object} Action object.
  */
-export function setNavigationPanelActiveMenu( menu ) {
+export function setEditedPostContext( context ) {
+	deprecated( "dispatch( 'core/edit-site' ).setEditedPostContext", {
+		since: '6.8',
+	} );
 	return {
-		type: 'SET_NAVIGATION_PANEL_ACTIVE_MENU',
-		menu,
+		type: 'SET_EDITED_POST_CONTEXT',
+		context,
 	};
 }
 
+/**
+ * Resolves the template for a page and displays both. If no path is given, attempts
+ * to use the postId to generate a path like `?p=${ postId }`.
+ *
+ * @deprecated
+ *
+ * @return {Object} Action object.
+ */
+export function setPage() {
+	deprecated( "dispatch( 'core/edit-site' ).setPage", {
+		since: '6.5',
+		version: '6.8',
+		hint: 'The setPage is not needed anymore, the correct entity is resolved from the URL automatically.',
+	} );
+
+	return { type: 'NOTHING' };
+}
+
+/**
+ * Action that sets the active navigation panel menu.
+ *
+ * @deprecated
+ *
+ * @return {Object} Action object.
+ */
+export function setNavigationPanelActiveMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).setNavigationPanelActiveMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
+}
+
 /**
  * Opens the navigation panel and sets its active menu at the same time.
  *
- * @param {string} menu Identifies the menu to open.
+ * @deprecated
  */
-export function openNavigationPanelToMenu( menu ) {
-	return {
-		type: 'OPEN_NAVIGATION_PANEL_TO_MENU',
-		menu,
-	};
+export function openNavigationPanelToMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).openNavigationPanelToMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
 }
 
 /**
  * Sets whether the navigation panel should be open.
  *
- * @param {boolean} isOpen If true, opens the nav panel. If false, closes it. It
- *                         does not toggle the state, but sets it directly.
+ * @deprecated
  */
-export function setIsNavigationPanelOpened( isOpen ) {
-	return {
-		type: 'SET_IS_NAVIGATION_PANEL_OPENED',
-		isOpen,
-	};
+export function setIsNavigationPanelOpened() {
+	deprecated( "dispatch( 'core/edit-site' ).setIsNavigationPanelOpened", {
+		since: '6.2',
+		version: '6.4',
+	} );
+
+	return { type: 'NOTHING' };
 }
 
 /**
- * Opens or closes the inserter.
+ * Returns an action object used to open/close the inserter.
  *
- * @param {boolean|Object} value                Whether the inserter should be
- *                                              opened (true) or closed (false).
- *                                              To specify an insertion point,
- *                                              use an object.
- * @param {string}         value.rootClientId   The root client ID to insert at.
- * @param {number}         value.insertionIndex The index to insert at.
+ * @deprecated
  *
- * @return {Object} Action object.
+ * @param {boolean|Object} value Whether the inserter should be opened (true) or closed (false).
  */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+export const setIsInserterOpened =
+	( value ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).setIsInserterOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsInserterOpened",
+		} );
+		registry.dispatch( editorStore ).setIsInserterOpened( value );
+	};
+
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @deprecated
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ */
+export const setIsListViewOpened =
+	( isOpen ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).setIsListViewOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsListViewOpened",
+		} );
+		registry.dispatch( editorStore ).setIsListViewOpened( isOpen );
 	};
-}
 
 /**
  * Returns an action object used to update the settings.
@@ -307,19 +340,6 @@ export function updateSettings( settings ) {
 	};
 }
 
-/**
- * Sets whether the list view panel should be open.
- *
- * @param {boolean} isOpen If true, opens the list view. If false, closes it.
- *                         It does not toggle the state, but sets it directly.
- */
-export function setIsListViewOpened( isOpen ) {
-	return {
-		type: 'SET_IS_LIST_VIEW_OPENED',
-		isOpen,
-	};
-}
-
 /**
  * Sets whether the save view panel should be open.
  *
@@ -342,131 +362,14 @@ export function setIsSaveViewOpened( isOpen ) {
  *                                      reverting the template. Default true.
  */
 export const revertTemplate =
-	( template, { allowUndo = true } = {} ) =>
-	async ( { registry } ) => {
-		if ( ! isTemplateRevertable( template ) ) {
-			registry
-				.dispatch( noticesStore )
-				.createErrorNotice( __( 'This template is not revertable.' ), {
-					type: 'snackbar',
-				} );
-			return;
-		}
-
-		try {
-			const templateEntityConfig = registry
-				.select( coreStore )
-				.getEntityConfig( 'postType', template.type );
-
-			if ( ! templateEntityConfig ) {
-				registry
-					.dispatch( noticesStore )
-					.createErrorNotice(
-						__(
-							'The editor has encountered an unexpected error. Please reload.'
-						),
-						{ type: 'snackbar' }
-					);
-				return;
-			}
-
-			const fileTemplatePath = addQueryArgs(
-				`${ templateEntityConfig.baseURL }/${ template.id }`,
-				{ context: 'edit', source: 'theme' }
-			);
-
-			const fileTemplate = await apiFetch( { path: fileTemplatePath } );
-			if ( ! fileTemplate ) {
-				registry
-					.dispatch( noticesStore )
-					.createErrorNotice(
-						__(
-							'The editor has encountered an unexpected error. Please reload.'
-						),
-						{ type: 'snackbar' }
-					);
-				return;
-			}
-
-			const serializeBlocks = ( {
-				blocks: blocksForSerialization = [],
-			} ) => __unstableSerializeAndClean( blocksForSerialization );
-
-			const edited = registry
-				.select( coreStore )
-				.getEditedEntityRecord(
-					'postType',
-					template.type,
-					template.id
-				);
-
-			// We are fixing up the undo level here to make sure we can undo
-			// the revert in the header toolbar correctly.
-			registry.dispatch( coreStore ).editEntityRecord(
-				'postType',
-				template.type,
-				template.id,
-				{
-					content: serializeBlocks, // Required to make the `undo` behave correctly.
-					blocks: edited.blocks, // Required to revert the blocks in the editor.
-					source: 'custom', // required to avoid turning the editor into a dirty state
-				},
-				{
-					undoIgnore: true, // Required to merge this edit with the last undo level.
-				}
-			);
-
-			const blocks = parse( fileTemplate?.content?.raw );
-			registry
-				.dispatch( coreStore )
-				.editEntityRecord( 'postType', template.type, fileTemplate.id, {
-					content: serializeBlocks,
-					blocks,
-					source: 'theme',
-				} );
-
-			if ( allowUndo ) {
-				const undoRevert = () => {
-					registry
-						.dispatch( coreStore )
-						.editEntityRecord(
-							'postType',
-							template.type,
-							edited.id,
-							{
-								content: serializeBlocks,
-								blocks: edited.blocks,
-								source: 'custom',
-							}
-						);
-				};
-
-				registry
-					.dispatch( noticesStore )
-					.createSuccessNotice( __( 'Template reverted.' ), {
-						type: 'snackbar',
-						actions: [
-							{
-								label: __( 'Undo' ),
-								onClick: undoRevert,
-							},
-						],
-					} );
-			} else {
-				registry
-					.dispatch( noticesStore )
-					.createSuccessNotice( __( 'Template reverted.' ) );
-			}
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'Template revert failed. Please reload.' );
-			registry
-				.dispatch( noticesStore )
-				.createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
+	( template, options ) =>
+	( { registry } ) => {
+		return unlock( registry.dispatch( editorStore ) ).revertTemplate(
+			template,
+			options
+		);
 	};
+
 /**
  * Action that opens an editor sidebar.
  *
@@ -477,7 +380,7 @@ export const openGeneralSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
-			.enableComplementaryArea( editSiteStoreName, name );
+			.enableComplementaryArea( 'core', name );
 	};
 
 /**
@@ -486,26 +389,62 @@ export const openGeneralSidebar =
 export const closeGeneralSidebar =
 	() =>
 	( { registry } ) => {
-		registry
-			.dispatch( interfaceStore )
-			.disableComplementaryArea( editSiteStoreName );
+		registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );
 	};
 
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @deprecated
+ *
+ * @param {string} mode The editor mode.
+ */
 export const switchEditorMode =
 	( mode ) =>
 	( { registry } ) => {
-		registry
-			.dispatch( 'core/preferences' )
-			.set( 'core/edit-site', 'editorMode', mode );
+		deprecated( "dispatch( 'core/edit-site' ).switchEditorMode", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').switchEditorMode",
+		} );
+		registry.dispatch( editorStore ).switchEditorMode( mode );
+	};
 
-		// Unselect blocks when we switch to a non visual mode.
-		if ( mode !== 'visual' ) {
+/**
+ * Sets whether or not the editor allows only page content to be edited.
+ *
+ * @param {boolean} hasPageContentFocus True to allow only page content to be
+ *                                      edited, false to allow template to be
+ *                                      edited.
+ */
+export const setHasPageContentFocus =
+	( hasPageContentFocus ) =>
+	( { dispatch, registry } ) => {
+		deprecated( `dispatch( 'core/edit-site' ).setHasPageContentFocus`, {
+			since: '6.5',
+		} );
+
+		if ( hasPageContentFocus ) {
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
+		dispatch( {
+			type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+			hasPageContentFocus,
+		} );
+	};
 
-		if ( mode === 'visual' ) {
-			speak( __( 'Visual editor selected' ), 'assertive' );
-		} else if ( mode === 'mosaic' ) {
-			speak( __( 'Mosaic view selected' ), 'assertive' );
-		}
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ *
+ * @deprecated
+ */
+export const toggleDistractionFree =
+	() =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).toggleDistractionFree", {
+			since: '6.6',
+			alternative: "dispatch( 'core/editor').toggleDistractionFree",
+		} );
+		registry.dispatch( editorStore ).toggleDistractionFree();
 	};
diff --git a/packages/edit-site/src/store/constants.js b/packages/edit-site/src/store/constants.js
index 272f2049a088b2..174341a5cb02ae 100644
--- a/packages/edit-site/src/store/constants.js
+++ b/packages/edit-site/src/store/constants.js
@@ -4,8 +4,3 @@
  * @type {string}
  */
 export const STORE_NAME = 'core/edit-site';
-
-export const TEMPLATE_PART_AREA_HEADER = 'header';
-export const TEMPLATE_PART_AREA_FOOTER = 'footer';
-export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
-export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';
diff --git a/packages/edit-site/src/store/index.js b/packages/edit-site/src/store/index.js
index 85558902f31219..dff8d41db828c2 100644
--- a/packages/edit-site/src/store/index.js
+++ b/packages/edit-site/src/store/index.js
@@ -8,8 +8,11 @@ import { createReduxStore, register } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as selectors from './selectors';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 export const storeConfig = {
 	reducer,
@@ -19,3 +22,5 @@ export const storeConfig = {
 
 export const store = createReduxStore( STORE_NAME, storeConfig );
 register( store );
+unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );
diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js
new file mode 100644
index 00000000000000..9b16748049cd0e
--- /dev/null
+++ b/packages/edit-site/src/store/private-actions.js
@@ -0,0 +1,27 @@
+/**
+ * Action that switches the editor canvas container view.
+ *
+ * @param {?string} view Editor canvas container view.
+ */
+export const setEditorCanvasContainerView =
+	( view ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',
+			view,
+		} );
+	};
+
+export function registerRoute( route ) {
+	return {
+		type: 'REGISTER_ROUTE',
+		route,
+	};
+}
+
+export function unregisterRoute( name ) {
+	return {
+		type: 'UNREGISTER_ROUTE',
+		name,
+	};
+}
diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js
new file mode 100644
index 00000000000000..b7c14534419582
--- /dev/null
+++ b/packages/edit-site/src/store/private-selectors.js
@@ -0,0 +1,14 @@
+/**
+ * Returns the editor canvas container view.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Editor canvas container view.
+ */
+export function getEditorCanvasContainerView( state ) {
+	return state.editorCanvasContainerView;
+}
+
+export function getRoutes( state ) {
+	return state.routes;
+}
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 2513c4f10afb7c..7ffb276a35da10 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -3,28 +3,6 @@
  */
 import { combineReducers } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { MENU_ROOT } from '../components/navigation-sidebar/navigation-panel/constants';
-
-/**
- * Reducer returning the editing canvas device type.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function deviceType( state = 'Desktop', action ) {
-	switch ( action.type ) {
-		case 'SET_PREVIEW_DEVICE_TYPE':
-			return action.deviceType;
-	}
-
-	return state;
-}
-
 /**
  * Reducer returning the settings.
  *
@@ -56,17 +34,16 @@ 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,
 			};
 	}
 
@@ -74,140 +51,51 @@ export function editedPost( state = {}, action ) {
 }
 
 /**
- * Reducer for information about the site's homepage.
+ * Reducer to set the save view panel open or closed.
  *
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
  */
-export function homeTemplateId( state, action ) {
+export function saveViewPanel( state = false, action ) {
 	switch ( action.type ) {
-		case 'SET_HOME_TEMPLATE':
-			return action.homeTemplateId;
+		case 'SET_IS_SAVE_VIEW_OPENED':
+			return action.isOpen;
 	}
-
 	return state;
 }
 
 /**
- * Reducer for information about the navigation panel, such as its active menu
- * and whether it should be opened or closed.
- *
- * Note: this reducer interacts with the inserter and list view panels reducers
- * to make sure that only one of the three panels is open at the same time.
+ * Reducer used to track the site editor canvas container view.
+ * Default is `undefined`, denoting the default, visual block editor.
+ * This could be, for example, `'style-book'` (the style book).
  *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
+ * @param {string|undefined} state  Current state.
+ * @param {Object}           action Dispatched action.
  */
-export function navigationPanel(
-	state = { menu: MENU_ROOT, isOpen: false },
-	action
-) {
+function editorCanvasContainerView( state = undefined, action ) {
 	switch ( action.type ) {
-		case 'SET_NAVIGATION_PANEL_ACTIVE_MENU':
-			return {
-				...state,
-				menu: action.menu,
-			};
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return {
-				...state,
-				isOpen: true,
-				menu: action.menu,
-			};
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return {
-				...state,
-				menu: ! action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.isOpen,
-			};
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return {
-				...state,
-				menu: state.isOpen && action.isOpen ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.isOpen ? false : state.isOpen,
-			};
-		case 'SET_IS_INSERTER_OPENED':
-			return {
-				...state,
-				menu: state.isOpen && action.value ? MENU_ROOT : state.menu, // Set menu to root when closing panel.
-				isOpen: action.value ? false : state.isOpen,
-			};
+		case 'SET_EDITOR_CANVAS_CONTAINER_VIEW':
+			return action.view;
 	}
-	return state;
-}
 
-/**
- * Reducer to set the block inserter panel open or closed.
- *
- * Note: this reducer interacts with the navigation and list view panels reducers
- * to make sure that only one of the three panels is open at the same time.
- *
- * @param {boolean|Object} state  Current state.
- * @param {Object}         action Dispatched action.
- */
-export function blockInserterPanel( state = false, action ) {
-	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return action.isOpen ? false : state;
-		case 'SET_IS_INSERTER_OPENED':
-			return action.value;
-	}
 	return state;
 }
 
-/**
- * Reducer to set the list view panel open or closed.
- *
- * Note: this reducer interacts with the navigation and inserter panels reducers
- * to make sure that only one of the three panels is open at the same time.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-export function listViewPanel( state = false, action ) {
+function routes( state = [], action ) {
 	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return action.isOpen ? false : state;
-		case 'SET_IS_INSERTER_OPENED':
-			return action.value ? false : state;
-		case 'SET_IS_LIST_VIEW_OPENED':
-			return action.isOpen;
+		case 'REGISTER_ROUTE':
+			return [ ...state, action.route ];
+		case 'UNREGISTER_ROUTE':
+			return state.filter( ( route ) => route.name !== action.name );
 	}
-	return state;
-}
 
-/**
- * Reducer to set the save view panel open or closed.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- */
-export function saveViewPanel( state = false, action ) {
-	switch ( action.type ) {
-		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
-			return false;
-		case 'SET_IS_NAVIGATION_PANEL_OPENED':
-			return action.isOpen ? false : state;
-		case 'SET_IS_SAVE_VIEW_OPENED':
-			return action.isOpen;
-	}
 	return state;
 }
 
 export default combineReducers( {
-	deviceType,
 	settings,
 	editedPost,
-	homeTemplateId,
-	navigationPanel,
-	blockInserterPanel,
-	listViewPanel,
 	saveViewPanel,
+	editorCanvasContainerView,
+	routes,
 } );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 79b28d98c384a3..cd50200e42cad4 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -1,79 +1,70 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
 import { store as coreDataStore } from '@wordpress/core-data';
-import { createRegistrySelector } from '@wordpress/data';
+import { createRegistrySelector, createSelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { uploadMedia } from '@wordpress/media-utils';
-import { isTemplatePart } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import {
-	MENU_ROOT,
-	MENU_TEMPLATE_PARTS,
-	MENU_TEMPLATES_UNUSED,
-	TEMPLATE_PARTS_SUB_MENUS,
-} from '../components/navigation-sidebar/navigation-panel/constants';
-import {
-	getTemplateLocation,
-	isTemplateSuperseded,
-} from '../components/navigation-sidebar/navigation-panel/template-hierarchy';
+import { unlock } from '../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
+import getFilteredTemplatePartBlocks from '../utils/get-filtered-template-parts';
 
 /**
  * @typedef {'template'|'template_type'} TemplateType Template type.
  */
 
-/**
- * Helper for getting a preference from the preferences store.
- *
- * This is only present so that `getSettings` doesn't need to be made a
- * registry selector.
- *
- * It's unstable because the selector needs to be exported and so part of the
- * public API to work.
- */
-export const __unstableGetPreference = createRegistrySelector(
-	( select ) => ( state, name ) =>
-		select( preferencesStore ).get( 'core/edit-site', name )
-);
-
 /**
  * Returns whether the given feature is enabled or not.
  *
+ * @deprecated
  * @param {Object} state       Global application state.
  * @param {string} featureName Feature slug.
  *
  * @return {boolean} Is active.
  */
-export function isFeatureActive( state, featureName ) {
-	deprecated( `select( 'core/interface' ).isFeatureActive`, {
-		since: '6.0',
-		alternative: `select( 'core/preferences' ).get`,
-	} );
-
-	return !! __unstableGetPreference( state, featureName );
-}
+export const isFeatureActive = createRegistrySelector(
+	( select ) => ( _, featureName ) => {
+		deprecated( `select( 'core/edit-site' ).isFeatureActive`, {
+			since: '6.0',
+			alternative: `select( 'core/preferences' ).get`,
+		} );
+
+		return !! select( preferencesStore ).get(
+			'core/edit-site',
+			featureName
+		);
+	}
+);
 
 /**
  * Returns the current editing canvas device type.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {string} Device type.
  */
-export function __experimentalGetPreviewDeviceType( state ) {
-	return state.deviceType;
-}
+export const __experimentalGetPreviewDeviceType = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			`select( 'core/edit-site' ).__experimentalGetPreviewDeviceType`,
+			{
+				since: '6.5',
+				version: '6.7',
+				alternative: `select( 'core/editor' ).getDeviceType`,
+			}
+		);
+		return select( editorStore ).getDeviceType();
+	}
+);
 
 /**
  * Returns whether the current user can create media or not.
@@ -83,7 +74,17 @@ export function __experimentalGetPreviewDeviceType( state ) {
  * @return {Object} Whether the current user can create media or not.
  */
 export const getCanUserCreateMedia = createRegistrySelector(
-	( select ) => () => select( coreDataStore ).canUser( 'create', 'media' )
+	( select ) => () => {
+		deprecated(
+			`wp.data.select( 'core/edit-site' ).getCanUserCreateMedia()`,
+			{
+				since: '6.7',
+				alternative: `wp.data.select( 'core' ).canUser( 'create', { kind: 'root', type: 'media' } )`,
+			}
+		);
+
+		return select( coreDataStore ).canUser( 'create', 'media' );
+	}
 );
 
 /**
@@ -94,6 +95,11 @@ export const getCanUserCreateMedia = createRegistrySelector(
  * @return {Array} The available reusable blocks.
  */
 export const getReusableBlocks = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-site' ).getReusableBlocks()`, {
+		since: '6.5',
+		version: '6.8',
+		alternative: `select( 'core/core' ).getEntityRecords( 'postType', 'wp_block' )`,
+	} );
 	const isWeb = Platform.OS === 'web';
 	return isWeb
 		? select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', {
@@ -103,222 +109,146 @@ export const getReusableBlocks = createRegistrySelector( ( select ) => () => {
 } );
 
 /**
- * Returns the settings, taking into account active features and permissions.
+ * Returns the site editor settings.
  *
- * @param {Object}   state             Global application state.
- * @param {Function} setIsInserterOpen Setter for the open state of the global inserter.
+ * @param {Object} state Global application state.
  *
  * @return {Object} Settings.
  */
-export const getSettings = createSelector(
-	( state, setIsInserterOpen ) => {
-		const settings = {
-			...state.settings,
-			outlineMode: true,
-			focusMode: !! __unstableGetPreference( state, 'focusMode' ),
-			hasFixedToolbar: !! __unstableGetPreference(
-				state,
-				'fixedToolbar'
-			),
-			keepCaretInsideBlock: !! __unstableGetPreference(
-				state,
-				'keepCaretInsideBlock'
-			),
-			showIconLabels: !! __unstableGetPreference(
-				state,
-				'showIconLabels'
-			),
-			__experimentalSetIsInserterOpened: setIsInserterOpen,
-			__experimentalReusableBlocks: getReusableBlocks( state ),
-			__experimentalPreferPatternsOnRoot:
-				'wp_template' === getEditedPostType( state ),
-		};
-
-		const canUserCreateMedia = getCanUserCreateMedia( state );
-		if ( ! canUserCreateMedia ) {
-			return settings;
-		}
-
-		settings.mediaUpload = ( { onError, ...rest } ) => {
-			uploadMedia( {
-				wpAllowedMimeTypes: state.settings.allowedMimeTypes,
-				onError: ( { message } ) => onError( message ),
-				...rest,
-			} );
-		};
-		return settings;
-	},
-	( state ) => [
-		getCanUserCreateMedia( state ),
-		state.settings,
-		__unstableGetPreference( state, 'focusMode' ),
-		__unstableGetPreference( state, 'fixedToolbar' ),
-		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
-		__unstableGetPreference( state, 'showIconLabels' ),
-		getReusableBlocks( state ),
-		getEditedPostType( state ),
-	]
-);
+export function getSettings( state ) {
+	// It is important that we don't inject anything into these settings locally.
+	// The reason for this is that we have an effect in place that calls setSettings based on the previous value of getSettings.
+	// If we add computed settings here, we'll be adding these computed settings to the state which is very unexpected.
+	return state.settings;
+}
 
 /**
- * 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',
+	} );
 }
 
 /**
  * Returns the current edited post type (wp_template or wp_template_part).
  *
+ * @deprecated
  * @param {Object} state Global application state.
  *
- * @return {TemplateType?} Template type.
+ * @return {?TemplateType} Template type.
  */
 export function getEditedPostType( state ) {
-	return getCurrentEditedPost( state ).type;
+	deprecated( "select( 'core/edit-site' ).getEditedPostType", {
+		since: '6.8',
+		alternative: "select( 'core/editor' ).getCurrentPostType",
+	} );
+	return state.editedPost.postType;
 }
 
 /**
  * Returns the ID of the currently edited template or template part.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  *
- * @return {string?} Post ID.
+ * @return {?string} Post ID.
  */
 export function getEditedPostId( state ) {
-	return getCurrentEditedPost( state ).id;
+	deprecated( "select( 'core/edit-site' ).getEditedPostId", {
+		since: '6.8',
+		alternative: "select( 'core/editor' ).getCurrentPostId",
+	} );
+	return state.editedPost.id;
 }
 
 /**
- * Returns the current page object.
+ * Returns the edited post's context object.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  *
  * @return {Object} Page.
  */
-export function getPage( state ) {
-	return getCurrentEditedPost( state ).page;
-}
+export function getEditedPostContext( state ) {
+	deprecated( "select( 'core/edit-site' ).getEditedPostContext", {
+		since: '6.8',
+	} );
 
-/**
- * Returns the active menu in the navigation panel.
- *
- * @param {Object} state Global application state.
- *
- * @return {string} Active menu.
- */
-export function getNavigationPanelActiveMenu( state ) {
-	return state.navigationPanel.menu;
+	return state.editedPost.context;
 }
 
 /**
- * Returns the current template or template part's corresponding
- * navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
+ * Returns the current page object.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  *
- * @return {string} The current template or template part's sub menu.
+ * @return {Object} Page.
  */
-export const getCurrentTemplateNavigationPanelSubMenu = createRegistrySelector(
-	( select ) => ( state ) => {
-		const templateType = getEditedPostType( state );
-		const templateId = getEditedPostId( state );
-		const template = templateId
-			? select( coreDataStore ).getEntityRecord(
-					'postType',
-					templateType,
-					templateId
-			  )
-			: null;
-
-		if ( ! template ) {
-			return MENU_ROOT;
-		}
-
-		if ( 'wp_template_part' === templateType ) {
-			return (
-				TEMPLATE_PARTS_SUB_MENUS.find(
-					( submenu ) => submenu.area === template?.area
-				)?.menu || MENU_TEMPLATE_PARTS
-			);
-		}
-
-		const templates = select( coreDataStore ).getEntityRecords(
-			'postType',
-			'wp_template'
-		);
-		const showOnFront = select( coreDataStore ).getEditedEntityRecord(
-			'root',
-			'site'
-		).show_on_front;
-
-		if (
-			isTemplateSuperseded(
-				template.slug,
-				map( templates, 'slug' ),
-				showOnFront
-			)
-		) {
-			return MENU_TEMPLATES_UNUSED;
-		}
-
-		return getTemplateLocation( template.slug );
-	}
-);
+export function getPage( state ) {
+	deprecated( "select( 'core/edit-site' ).getPage", {
+		since: '6.8',
+	} );
 
-/**
- * Returns the current opened/closed state of the navigation panel.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} True if the navigation panel should be open; false if closed.
- */
-export function isNavigationOpened( state ) {
-	return state.navigationPanel.isOpen;
+	return { context: state.editedPost.context };
 }
 
 /**
- * Returns the current opened/closed state of the inserter panel.
+ * Returns true if the inserter is opened.
+ *
+ * @deprecated
  *
  * @param {Object} state Global application state.
  *
- * @return {boolean} True if the inserter panel should be open; false if closed.
+ * @return {boolean} Whether the inserter is opened.
  */
-export function isInserterOpened( state ) {
-	return !! state.blockInserterPanel;
-}
+export const isInserterOpened = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-site' ).isInserterOpened`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).isInserterOpened`,
+	} );
+	return select( editorStore ).isInserterOpened();
+} );
 
 /**
  * Get the insertion point for the inserter.
  *
+ * @deprecated
+ *
  * @param {Object} state Global application state.
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex, filterValue } =
-		state.blockInserterPanel;
-	return { rootClientId, insertionIndex, filterValue };
-}
+export const __experimentalGetInsertionPoint = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			`select( 'core/edit-site' ).__experimentalGetInsertionPoint`,
+			{
+				since: '6.5',
+				version: '6.7',
+			}
+		);
+		return unlock( select( editorStore ) ).getInserter();
+	}
+);
 
 /**
- * Returns the current opened/closed state of the list view panel.
+ * Returns true if the list view is opened.
  *
  * @param {Object} state Global application state.
  *
- * @return {boolean} True if the list view panel should be open; false if closed.
+ * @return {boolean} Whether the list view is opened.
  */
-export function isListViewOpened( state ) {
-	return state.listViewPanel;
-}
+export const isListViewOpened = createRegistrySelector( ( select ) => () => {
+	deprecated( `select( 'core/edit-site' ).isListViewOpened`, {
+		since: '6.5',
+		alternative: `select( 'core/editor' ).isListViewOpened`,
+	} );
+	return select( editorStore ).isListViewOpened();
+} );
 
 /**
  * Returns the current opened/closed state of the save panel.
@@ -331,54 +261,46 @@ export function isSaveViewOpened( state ) {
 	return state.saveViewPanel;
 }
 
+function getBlocksAndTemplateParts( select ) {
+	const templateParts = select( coreDataStore ).getEntityRecords(
+		'postType',
+		TEMPLATE_PART_POST_TYPE,
+		{ per_page: -1 }
+	);
+
+	const { getBlocksByName, getBlocksByClientId } = select( blockEditorStore );
+
+	const clientIds = getBlocksByName( 'core/template-part' );
+	const blocks = getBlocksByClientId( clientIds );
+	return [ blocks, templateParts ];
+}
+
 /**
  * Returns the template parts and their blocks for the current edited template.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  * @return {Array} Template parts and their blocks in an array.
  */
 export const getCurrentTemplateTemplateParts = createRegistrySelector(
-	( select ) => ( state ) => {
-		const templateType = getEditedPostType( state );
-		const templateId = getEditedPostId( state );
-		const template = select( coreDataStore ).getEditedEntityRecord(
-			'postType',
-			templateType,
-			templateId
-		);
-
-		const templateParts = select( coreDataStore ).getEntityRecords(
-			'postType',
-			'wp_template_part',
-			{ per_page: -1 }
-		);
-		const templatePartsById = templateParts
-			? // Key template parts by their ID.
-			  templateParts.reduce(
-					( newTemplateParts, part ) => ( {
-						...newTemplateParts,
-						[ part.id ]: part,
-					} ),
-					{}
-			  )
-			: {};
-
-		return ( template.blocks ?? [] )
-			.filter( ( block ) => isTemplatePart( block ) )
-			.map( ( block ) => {
-				const {
-					attributes: { theme, slug },
-				} = block;
-				const templatePartId = `${ theme }//${ slug }`;
-				const templatePart = templatePartsById[ templatePartId ];
-
-				return {
-					templatePart,
-					block,
-				};
-			} )
-			.filter( ( { templatePart } ) => !! templatePart );
-	}
+	( select ) =>
+		createSelector(
+			() => {
+				deprecated(
+					`select( 'core/edit-site' ).getCurrentTemplateTemplateParts()`,
+					{
+						since: '6.7',
+						version: '6.9',
+						alternative: `select( 'core/block-editor' ).getBlocksByName( 'core/template-part' )`,
+					}
+				);
+
+				return getFilteredTemplatePartBlocks(
+					...getBlocksAndTemplateParts( select )
+				);
+			},
+			() => getBlocksAndTemplateParts( select )
+		)
 );
 
 /**
@@ -388,6 +310,72 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
  *
  * @return {string} Editing mode.
  */
-export function getEditorMode( state ) {
-	return __unstableGetPreference( state, 'editorMode' );
+export const getEditorMode = createRegistrySelector( ( select ) => () => {
+	return select( preferencesStore ).get( 'core', 'editorMode' );
+} );
+
+/**
+ * @deprecated
+ */
+export function getCurrentTemplateNavigationPanelSubMenu() {
+	deprecated(
+		"dispatch( 'core/edit-site' ).getCurrentTemplateNavigationPanelSubMenu",
+		{
+			since: '6.2',
+			version: '6.4',
+		}
+	);
+}
+
+/**
+ * @deprecated
+ */
+export function getNavigationPanelActiveMenu() {
+	deprecated( "dispatch( 'core/edit-site' ).getNavigationPanelActiveMenu", {
+		since: '6.2',
+		version: '6.4',
+	} );
+}
+
+/**
+ * @deprecated
+ */
+export function isNavigationOpened() {
+	deprecated( "dispatch( 'core/edit-site' ).isNavigationOpened", {
+		since: '6.2',
+		version: '6.4',
+	} );
+}
+
+/**
+ * Whether or not the editor has a page loaded into it.
+ *
+ * @see setPage
+ * @deprecated
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether or not the editor has a page loaded into it.
+ */
+export function isPage( state ) {
+	deprecated( "select( 'core/edit-site' ).isPage", {
+		since: '6.8',
+		alternative: "select( 'core/editor' ).getCurrentPostType",
+	} );
+
+	return !! state.editedPost.context?.postId;
+}
+
+/**
+ * Whether or not the editor allows only page content to be edited.
+ *
+ * @deprecated
+ *
+ * @return {boolean} Whether or not focus is on editing page content.
+ */
+export function hasPageContentFocus() {
+	deprecated( `select( 'core/edit-site' ).hasPageContentFocus`, {
+		since: '6.5',
+	} );
+
+	return false;
 }
diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js
deleted file mode 100644
index 96fa931efc8710..00000000000000
--- a/packages/edit-site/src/store/test/actions.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as preferencesStore } from '@wordpress/preferences';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '..';
-
-jest.useRealTimers();
-
-const ENTITY_TYPES = {
-	wp_template: {
-		description: 'Templates to include in your theme.',
-		hierarchical: false,
-		name: 'Templates',
-		rest_base: 'templates',
-		rest_namespace: 'wp/v2',
-		slug: 'wp_template',
-		taxonomies: [],
-	},
-};
-
-function createRegistryWithStores() {
-	// create a registry
-	const registry = createRegistry();
-
-	// register stores
-	registry.register( blockEditorStore );
-	registry.register( coreStore );
-	registry.register( editSiteStore );
-	registry.register( interfaceStore );
-	registry.register( noticesStore );
-	registry.register( preferencesStore );
-
-	return registry;
-}
-
-describe( 'actions', () => {
-	describe( 'toggleFeature', () => {
-		it( 'should toggle a feature flag', () => {
-			const registry = createRegistryWithStores();
-
-			// Should default to false.
-			expect(
-				registry.select( editSiteStore ).isFeatureActive( 'name' )
-			).toBe( false );
-
-			// Toggle on.
-			registry.dispatch( editSiteStore ).toggleFeature( 'name' );
-			expect(
-				registry.select( editSiteStore ).isFeatureActive( 'name' )
-			).toBe( true );
-
-			// Toggle off again.
-			registry.dispatch( editSiteStore ).toggleFeature( 'name' );
-			expect(
-				registry.select( editSiteStore ).isFeatureActive( 'name' )
-			).toBe( false );
-
-			// Expect a deprecation warning.
-			expect( console ).toHaveWarned();
-		} );
-	} );
-
-	describe( 'setTemplate', () => {
-		const ID = 1;
-		const SLUG = 'archive';
-
-		it( 'should set the template when slug is provided', async () => {
-			const registry = createRegistryWithStores();
-
-			await registry.dispatch( editSiteStore ).setTemplate( ID, SLUG );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
-		} );
-
-		it( 'should set the template by fetching the template slug', async () => {
-			const registry = createRegistryWithStores();
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path } = options;
-				if ( method === 'GET' ) {
-					if ( path.startsWith( '/wp/v2/types' ) ) {
-						return ENTITY_TYPES;
-					}
-
-					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
-						return { id: ID, slug: SLUG };
-					}
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry.dispatch( editSiteStore ).setTemplate( ID );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
-		} );
-	} );
-
-	describe( 'addTemplate', () => {
-		it( 'should issue a REST request to create the template and then set it', async () => {
-			const registry = createRegistryWithStores();
-
-			const ID = 1;
-			const SLUG = 'index';
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path, data } = options;
-
-				if ( method === 'GET' && path.startsWith( '/wp/v2/types' ) ) {
-					return ENTITY_TYPES;
-				}
-
-				if (
-					method === 'POST' &&
-					path.startsWith( '/wp/v2/templates' )
-				) {
-					return { id: ID, slug: data.slug };
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry
-				.dispatch( editSiteStore )
-				.addTemplate( { slug: SLUG } );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getPage().context.templateSlug ).toBe( SLUG );
-		} );
-	} );
-
-	describe( 'setTemplatePart', () => {
-		it( 'should set template part', () => {
-			const registry = createRegistryWithStores();
-
-			const ID = 1;
-			registry.dispatch( editSiteStore ).setTemplatePart( ID );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getEditedPostType() ).toBe( 'wp_template_part' );
-		} );
-	} );
-
-	describe( 'setPage', () => {
-		it( 'should find the template and then set the page', async () => {
-			const registry = createRegistryWithStores();
-
-			const ID = 'emptytheme//single';
-			const SLUG = 'single';
-
-			window.fetch = async ( path ) => {
-				if ( path === '/?_wp-find-template=true' ) {
-					return {
-						json: async () => ( { data: { id: ID, slug: SLUG } } ),
-					};
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ path }`,
-				};
-			};
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path } = options;
-
-				if ( method === 'GET' ) {
-					if ( path.startsWith( '/wp/v2/types' ) ) {
-						return ENTITY_TYPES;
-					}
-
-					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
-						return { id: ID, slug: SLUG };
-					}
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry.dispatch( editSiteStore ).setPage( { path: '/' } );
-
-			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
-			);
-		} );
-	} );
-
-	describe( 'setIsListViewOpened', () => {
-		it( 'should set the list view opened state', () => {
-			const registry = createRegistryWithStores();
-
-			registry.dispatch( editSiteStore ).setIsListViewOpened( true );
-			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
-				true
-			);
-
-			registry.dispatch( editSiteStore ).setIsListViewOpened( false );
-			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
-				false
-			);
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/store/test/reducer.js b/packages/edit-site/src/store/test/reducer.js
deleted file mode 100644
index 0c41fba1cd31a2..00000000000000
--- a/packages/edit-site/src/store/test/reducer.js
+++ /dev/null
@@ -1,322 +0,0 @@
-/**
- * External dependencies
- */
-import deepFreeze from 'deep-freeze';
-
-/**
- * Internal dependencies
- */
-import {
-	settings,
-	homeTemplateId,
-	editedPost,
-	navigationPanel,
-	blockInserterPanel,
-	listViewPanel,
-} from '../reducer';
-
-import {
-	setNavigationPanelActiveMenu,
-	openNavigationPanelToMenu,
-	setIsNavigationPanelOpened,
-	setIsInserterOpened,
-	setIsListViewOpened,
-} from '../actions';
-
-describe( 'state', () => {
-	describe( 'settings()', () => {
-		it( 'should apply default state', () => {
-			expect( settings( undefined, {} ) ).toEqual( {} );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			const state = {};
-			expect( settings( state, {} ) ).toBe( state );
-		} );
-
-		it( 'should update settings with a shallow merge', () => {
-			expect(
-				settings(
-					deepFreeze( {
-						setting: { key: 'value' },
-						otherSetting: 'value',
-					} ),
-					{
-						type: 'UPDATE_SETTINGS',
-						settings: { setting: { newKey: 'newValue' } },
-					}
-				)
-			).toEqual( {
-				setting: { newKey: 'newValue' },
-				otherSetting: 'value',
-			} );
-		} );
-	} );
-
-	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( {} );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			const state = [];
-			expect( editedPost( state, {} ) ).toBe( state );
-		} );
-
-		it( 'should update when a template is set', () => {
-			expect(
-				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: {},
-					}
-				)
-			).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' } );
-		} );
-	} );
-
-	describe( 'navigationPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( navigationPanel( undefined, {} ) ).toEqual( {
-				menu: 'root',
-				isOpen: false,
-			} );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			const state = { test: 1 };
-			expect( navigationPanel( state, {} ) ).toBe( state );
-		} );
-
-		it( 'should set the active navigation panel', () => {
-			expect(
-				navigationPanel(
-					undefined,
-					setNavigationPanelActiveMenu( 'test-menu' )
-				)
-			).toEqual( {
-				isOpen: false,
-				menu: 'test-menu',
-			} );
-		} );
-
-		it( 'should be able to open the navigation panel to a menu', () => {
-			expect(
-				navigationPanel(
-					undefined,
-					openNavigationPanelToMenu( 'test-menu' )
-				)
-			).toEqual( {
-				isOpen: true,
-				menu: 'test-menu',
-			} );
-		} );
-
-		it( 'should be able to open the navigation panel', () => {
-			expect(
-				navigationPanel( undefined, setIsNavigationPanelOpened( true ) )
-			).toEqual( {
-				isOpen: true,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should change the menu to root when closing the panel', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsNavigationPanelOpened( false ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should close the navigation panel when opening the inserter and change the menu to root', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsInserterOpened( true ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should close the navigation panel when opening the list view and change the menu to root', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsListViewOpened( true ) )
-			).toEqual( {
-				isOpen: false,
-				menu: 'root',
-			} );
-		} );
-
-		it( 'should not change the state when closing the inserter', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsInserterOpened( false ) )
-			).toEqual( state );
-		} );
-
-		it( 'should not change the state when closing the list view', () => {
-			const state = navigationPanel(
-				undefined,
-				openNavigationPanelToMenu( 'test-menu' )
-			);
-
-			expect( state.menu ).toEqual( 'test-menu' );
-			expect(
-				navigationPanel( state, setIsListViewOpened( false ) )
-			).toEqual( state );
-		} );
-	} );
-
-	describe( 'blockInserterPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( blockInserterPanel( undefined, {} ) ).toEqual( false );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			expect( blockInserterPanel( true, {} ) ).toBe( true );
-		} );
-
-		it( 'should set the open state of the inserter panel', () => {
-			expect(
-				blockInserterPanel( false, setIsInserterOpened( true ) )
-			).toBe( true );
-			expect(
-				blockInserterPanel( true, setIsInserterOpened( false ) )
-			).toBe( false );
-		} );
-
-		it( 'should close the inserter when opening the nav panel', () => {
-			expect(
-				blockInserterPanel( true, openNavigationPanelToMenu( 'noop' ) )
-			).toBe( false );
-			expect(
-				blockInserterPanel( true, setIsNavigationPanelOpened( true ) )
-			).toBe( false );
-		} );
-
-		it( 'should close the inserter when opening the list view panel', () => {
-			expect(
-				blockInserterPanel( true, setIsListViewOpened( true ) )
-			).toBe( false );
-		} );
-
-		it( 'should not change the state when closing the nav panel', () => {
-			expect(
-				blockInserterPanel( true, setIsNavigationPanelOpened( false ) )
-			).toBe( true );
-		} );
-
-		it( 'should not change the state when closing the list view panel', () => {
-			expect(
-				blockInserterPanel( true, setIsListViewOpened( false ) )
-			).toBe( true );
-		} );
-	} );
-
-	describe( 'listViewPanel()', () => {
-		it( 'should apply default state', () => {
-			expect( listViewPanel( undefined, {} ) ).toEqual( false );
-		} );
-
-		it( 'should default to returning the same state', () => {
-			expect( listViewPanel( true, {} ) ).toBe( true );
-		} );
-
-		it( 'should set the open state of the list view panel', () => {
-			expect( listViewPanel( false, setIsListViewOpened( true ) ) ).toBe(
-				true
-			);
-			expect( listViewPanel( true, setIsListViewOpened( false ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should close the list view when opening the nav panel', () => {
-			expect(
-				listViewPanel( true, openNavigationPanelToMenu( 'noop' ) )
-			).toBe( false );
-			expect(
-				listViewPanel( true, setIsNavigationPanelOpened( true ) )
-			).toBe( false );
-		} );
-
-		it( 'should close the list view when opening the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should not change the state when closing the nav panel', () => {
-			expect(
-				listViewPanel( true, setIsNavigationPanelOpened( false ) )
-			).toBe( true );
-		} );
-
-		it( 'should not change the state when closing the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
-				true
-			);
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
deleted file mode 100644
index 907c2dc52eae46..00000000000000
--- a/packages/edit-site/src/store/test/selectors.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as coreDataStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
-	getCanUserCreateMedia,
-	getSettings,
-	getHomeTemplateId,
-	getEditedPostType,
-	getEditedPostId,
-	getPage,
-	getNavigationPanelActiveMenu,
-	getReusableBlocks,
-	isNavigationOpened,
-	isInserterOpened,
-	isListViewOpened,
-	__unstableGetPreference,
-} from '../selectors';
-
-describe( 'selectors', () => {
-	const canUser = jest.fn( () => true );
-	const getEntityRecords = jest.fn( () => [] );
-	const get = jest.fn();
-	getCanUserCreateMedia.registry = {
-		select: jest.fn( () => ( { canUser } ) ),
-	};
-	getReusableBlocks.registry = {
-		select: jest.fn( () => ( { getEntityRecords } ) ),
-	};
-	__unstableGetPreference.registry = {
-		select: jest.fn( () => ( { get } ) ),
-	};
-
-	describe( 'getCanUserCreateMedia', () => {
-		it( "selects `canUser( 'create', 'media' )` from the core store", () => {
-			expect( getCanUserCreateMedia() ).toBe( true );
-			expect(
-				getCanUserCreateMedia.registry.select
-			).toHaveBeenCalledWith( coreDataStore );
-			expect( canUser ).toHaveBeenCalledWith( 'create', 'media' );
-		} );
-	} );
-
-	describe( 'getReusableBlocks', () => {
-		it( "selects `getEntityRecords( 'postType', 'wp_block' )` from the core store", () => {
-			expect( getReusableBlocks() ).toEqual( [] );
-			expect( getReusableBlocks.registry.select ).toHaveBeenCalledWith(
-				coreDataStore
-			);
-			expect( getEntityRecords ).toHaveBeenCalledWith(
-				'postType',
-				'wp_block',
-				{
-					per_page: -1,
-				}
-			);
-		} );
-	} );
-
-	describe( 'getSettings', () => {
-		it( "returns the settings when the user can't create media", () => {
-			canUser.mockReturnValueOnce( false );
-			canUser.mockReturnValueOnce( false );
-			get.mockImplementation( ( scope, name ) => {
-				if ( name === 'focusMode' ) return false;
-				if ( name === 'fixedToolbar' ) return false;
-			} );
-			const state = {
-				settings: {},
-				preferences: {},
-				editedPost: { type: 'wp_template' },
-			};
-			const setInserterOpened = () => {};
-			expect( getSettings( state, setInserterOpened ) ).toEqual( {
-				outlineMode: true,
-				focusMode: false,
-				hasFixedToolbar: false,
-				keepCaretInsideBlock: false,
-				showIconLabels: false,
-				__experimentalSetIsInserterOpened: setInserterOpened,
-				__experimentalReusableBlocks: [],
-				__experimentalPreferPatternsOnRoot: true,
-			} );
-		} );
-
-		it( 'returns the extended settings when the user can create media', () => {
-			get.mockImplementation( ( scope, name ) => {
-				if ( name === 'focusMode' ) return true;
-				if ( name === 'fixedToolbar' ) return true;
-			} );
-
-			const state = {
-				settings: { key: 'value' },
-				editedPost: { type: 'wp_template_part' },
-			};
-			const setInserterOpened = () => {};
-
-			expect( getSettings( state, setInserterOpened ) ).toEqual( {
-				outlineMode: true,
-				key: 'value',
-				focusMode: true,
-				hasFixedToolbar: true,
-				keepCaretInsideBlock: false,
-				showIconLabels: false,
-				__experimentalSetIsInserterOpened: setInserterOpened,
-				__experimentalReusableBlocks: [],
-				mediaUpload: expect.any( Function ),
-				__experimentalPreferPatternsOnRoot: false,
-			} );
-		} );
-	} );
-
-	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 } };
-			expect( getEditedPostId( state ) ).toBe( 10 );
-		} );
-	} );
-
-	describe( 'getEditedPostType', () => {
-		it( 'returns the template type', () => {
-			const state = { editedPost: { type: '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( 'getNavigationPanelActiveMenu', () => {
-		it( 'returns the current navigation menu', () => {
-			const state = {
-				navigationPanel: { menu: 'test-menu', isOpen: false },
-			};
-			expect( getNavigationPanelActiveMenu( state ) ).toBe( 'test-menu' );
-		} );
-	} );
-
-	describe( 'isNavigationOpened', () => {
-		it( 'returns the navigation panel isOpened state', () => {
-			const state = {
-				navigationPanel: { menu: 'test-menu', isOpen: false },
-			};
-			expect( isNavigationOpened( state ) ).toBe( false );
-			state.navigationPanel.isOpen = true;
-			expect( isNavigationOpened( state ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'isInserterOpened', () => {
-		it( 'returns the block inserter panel isOpened state', () => {
-			const state = {
-				blockInserterPanel: true,
-			};
-			expect( isInserterOpened( state ) ).toBe( true );
-			state.blockInserterPanel = false;
-			expect( isInserterOpened( state ) ).toBe( false );
-		} );
-	} );
-
-	describe( 'isListViewOpened', () => {
-		it( 'returns the list view panel isOpened state', () => {
-			const state = {
-				listViewPanel: true,
-			};
-			expect( isListViewOpened( state ) ).toBe( true );
-			state.listViewPanel = false;
-			expect( isListViewOpened( state ) ).toBe( false );
-		} );
-	} );
-} );
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 86b838be839a50..4269cdb4bc90d1 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,82 +1,94 @@
-@import "../../interface/src/style.scss";
-
+@import "../../dataviews/src/style.scss";
+@import "../../fields/src/style.scss";
+@import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
-@import "./components/code-editor/style.scss";
+@import "./components/canvas-loader/style.scss";
 @import "./components/global-styles/style.scss";
-@import "./components/header-edit-mode/style.scss";
-@import "./components/header-edit-mode/document-actions/style.scss";
-@import "./components/navigation-sidebar/navigation-toggle/style.scss";
-@import "./components/navigation-sidebar/navigation-panel/style.scss";
-@import "./components/list/style.scss";
-@import "./components/add-new-template/style.scss";
-@import "./components/sidebar-edit-mode/style.scss";
-@import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/navigation-menu-sidebar/style.scss";
-@import "./components/sidebar-edit-mode/template-card/style.scss";
+@import "./components/global-styles/screen-revisions/style.scss";
+@import "./components/global-styles-sidebar/style.scss";
+@import "./components/page/style.scss";
+@import "./components/page-patterns/style.scss";
+@import "./components/page-templates/style.scss";
 @import "./components/editor/style.scss";
-@import "./components/template-details/style.scss";
-@import "./components/create-template-part-modal/style.scss";
-@import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/save-hub/style.scss";
+@import "./components/save-panel/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/sidebar-button/style.scss";
+@import "./components/sidebar-navigation-item/style.scss";
+@import "./components/sidebar-navigation-screen/style.scss";
+@import "./components/sidebar-navigation-screen-details-footer/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
+@import "./components/sidebar-navigation-screen-patterns/style.scss";
+@import "./components/sidebar-dataviews/style.scss";
+@import "./components/site-hub/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
+@import "./components/site-icon/style.scss";
+@import "./components/style-book/style.scss";
+@import "./components/editor-canvas-container/style.scss";
+@import "./components/post-edit/style.scss";
+@import "./components/post-list/style.scss";
+@import "./components/resizable-frame/style.scss";
+@import "./hooks/push-changes-to-global-styles/style.scss";
+@import "./components/global-styles/font-library-modal/style.scss";
+@import "./components/pagination/style.scss";
+@import "./components/global-styles/variations/style.scss";
+@import "./components/sidebar-global-styles-wrapper/style.scss";
+
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-image-pair(root) {
+	isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+	display: block;
+}
+
+/* stylelint-enable */
+
+body.js #wpadminbar {
+	display: none;
+}
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
-html.wp-toolbar {
-	background: $white;
+body.js #wpbody {
+	padding-top: 0;
 }
 
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
-.edit-site,
-// The modals are shown outside the .edit-site wrapper, they need these styles.
-.components-modal__frame {
-	@include reset;
+body.js.site-editor-php {
+	background: $gray-900;
 }
 
 .edit-site {
+	@include reset;
+	height: 100vh;
+
 	// On mobile the main content area has to scroll, otherwise you can invoke
 	// the over-scroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
 		bottom: 0;
 		left: 0;
 		min-height: 100vh;
-		position: absolute;
+		position: fixed;
 		right: 0;
 		top: 0;
 	}
 
-	.interface-interface-skeleton {
-		top: 0;
-	}
-
-	// Todo: Remove this rule when edit site gets support
-	// for opening unpinned sidebar items.
-	.interface-complementary-area__pin-unpin-item.components-button {
-		display: none;
-	}
-
-	.interface-interface-skeleton__content {
-		background-color: $gray-800;
+	.no-js & {
+		min-height: 0;
+		position: static;
 	}
-}
-
-/**
- * Animations
- */
 
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since they are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
+	.interface-interface-skeleton {
+		top: 0;
 	}
 }
 
diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js
new file mode 100644
index 00000000000000..657fc8f34d2f48
--- /dev/null
+++ b/packages/edit-site/src/utils/constants.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as patternPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+// Navigation
+export const NAVIGATION_POST_TYPE = 'wp_navigation';
+
+// Templates.
+export const TEMPLATE_POST_TYPE = 'wp_template';
+export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
+export const TEMPLATE_ORIGINS = {
+	custom: 'custom',
+	theme: 'theme',
+	plugin: 'plugin',
+};
+export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
+export const TEMPLATE_PART_ALL_AREAS_CATEGORY = 'all-parts';
+
+// Patterns.
+export const {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	EXCLUDED_PATTERN_SOURCES,
+	PATTERN_SYNC_TYPES,
+} = unlock( patternPrivateApis );
+
+// Entities that are editable in focus mode.
+export const FOCUSABLE_ENTITIES = [
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES.user,
+];
+
+export const POST_TYPE_LABELS = {
+	[ TEMPLATE_POST_TYPE ]: __( 'Template' ),
+	[ TEMPLATE_PART_POST_TYPE ]: __( 'Template part' ),
+	[ PATTERN_TYPES.user ]: __( 'Pattern' ),
+	[ NAVIGATION_POST_TYPE ]: __( 'Navigation' ),
+};
+
+// DataViews constants
+export const LAYOUT_GRID = 'grid';
+export const LAYOUT_TABLE = 'table';
+export const LAYOUT_LIST = 'list';
+
+export const OPERATOR_IS = 'is';
+export const OPERATOR_IS_NOT = 'isNot';
+export const OPERATOR_IS_ANY = 'isAny';
+export const OPERATOR_IS_NONE = 'isNone';
diff --git a/packages/edit-site/src/utils/get-filtered-template-parts.js b/packages/edit-site/src/utils/get-filtered-template-parts.js
new file mode 100644
index 00000000000000..bba982c0717a71
--- /dev/null
+++ b/packages/edit-site/src/utils/get-filtered-template-parts.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { isTemplatePart } from '@wordpress/blocks';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Get a flattened and filtered list of template parts and the matching block for that template part.
+ *
+ * Takes a list of blocks defined within a template, and a list of template parts, and returns a
+ * flattened list of template parts and the matching block for that template part.
+ *
+ * @param {Array}  blocks        Blocks to flatten.
+ * @param {?Array} templateParts Available template parts.
+ * @return {Array} An array of template parts and their blocks.
+ */
+export default function getFilteredTemplatePartBlocks(
+	blocks = EMPTY_ARRAY,
+	templateParts
+) {
+	const templatePartsById = templateParts
+		? // Key template parts by their ID.
+		  templateParts.reduce(
+				( newTemplateParts, part ) => ( {
+					...newTemplateParts,
+					[ part.id ]: part,
+				} ),
+				{}
+		  )
+		: {};
+
+	const result = [];
+
+	// Iterate over all blocks, recursing into inner blocks.
+	// Output will be based on a depth-first traversal.
+	const stack = [ ...blocks ];
+	while ( stack.length ) {
+		const { innerBlocks, ...block } = stack.shift();
+		// Place inner blocks at the beginning of the stack to preserve order.
+		stack.unshift( ...innerBlocks );
+
+		if ( isTemplatePart( block ) ) {
+			const {
+				attributes: { theme, slug },
+			} = block;
+			const templatePartId = `${ theme }//${ slug }`;
+			const templatePart = templatePartsById[ templatePartId ];
+
+			// Only add to output if the found template part block is in the list of available template parts.
+			if ( templatePart ) {
+				result.push( {
+					templatePart,
+					block,
+				} );
+			}
+		}
+	}
+
+	return result;
+}
diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
deleted file mode 100644
index ef08058d00e828..00000000000000
--- a/packages/edit-site/src/utils/get-is-list-page.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Returns if the params match the list page route.
- *
- * @param {Object} params          The search params.
- * @param {string} params.postId   The post ID.
- * @param {string} params.postType The post type.
- * @return {boolean} Is list page or not.
- */
-export default function getIsListPage( { postId, postType } ) {
-	return !! ( ! postId && postType );
-}
diff --git a/packages/edit-site/src/utils/history.js b/packages/edit-site/src/utils/history.js
deleted file mode 100644
index 54c6c49cf8d88c..00000000000000
--- a/packages/edit-site/src/utils/history.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { createBrowserHistory } from 'history';
-
-/**
- * WordPress dependencies
- */
-import { addQueryArgs } from '@wordpress/url';
-
-const history = createBrowserHistory();
-
-const originalHistoryPush = history.push;
-const originalHistoryReplace = history.replace;
-
-function push( params, state ) {
-	return originalHistoryPush.call(
-		history,
-		addQueryArgs( window.location.href, params ),
-		state
-	);
-}
-
-function replace( params, state ) {
-	return originalHistoryReplace.call(
-		history,
-		addQueryArgs( window.location.href, params ),
-		state
-	);
-}
-
-history.push = push;
-history.replace = replace;
-
-export default history;
diff --git a/packages/edit-site/src/utils/is-previewing-theme.js b/packages/edit-site/src/utils/is-previewing-theme.js
new file mode 100644
index 00000000000000..a4c830b4b60ad7
--- /dev/null
+++ b/packages/edit-site/src/utils/is-previewing-theme.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { getQueryArg } from '@wordpress/url';
+
+export function isPreviewingTheme() {
+	return !! getQueryArg( window.location.href, 'wp_theme_preview' );
+}
+
+export function currentlyPreviewingTheme() {
+	if ( isPreviewingTheme() ) {
+		return getQueryArg( window.location.href, 'wp_theme_preview' );
+	}
+	return null;
+}
diff --git a/packages/edit-site/src/utils/is-template-removable.js b/packages/edit-site/src/utils/is-template-removable.js
index 7ec203a9e0db56..f81cb74b022e73 100644
--- a/packages/edit-site/src/utils/is-template-removable.js
+++ b/packages/edit-site/src/utils/is-template-removable.js
@@ -1,13 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from './constants';
+
 /**
  * Check if a template is removable.
  *
  * @param {Object} template The template entity to check.
- * @return {boolean} Whether the template is revertable.
+ * @return {boolean} Whether the template is removable.
  */
 export default function isTemplateRemovable( template ) {
 	if ( ! template ) {
 		return false;
 	}
 
-	return template.source === 'custom' && ! template.has_theme_file;
+	return (
+		template.source === TEMPLATE_ORIGINS.custom &&
+		! Boolean( template.plugin ) &&
+		! template.has_theme_file
+	);
 }
diff --git a/packages/edit-site/src/utils/is-template-revertable.js b/packages/edit-site/src/utils/is-template-revertable.js
index c2d42f51c97018..42413b06cd48ec 100644
--- a/packages/edit-site/src/utils/is-template-revertable.js
+++ b/packages/edit-site/src/utils/is-template-revertable.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from './constants';
+
 /**
  * Check if a template is revertable to its original theme-provided template file.
  *
@@ -9,6 +14,9 @@ export default function isTemplateRevertable( template ) {
 		return false;
 	}
 	/* eslint-disable camelcase */
-	return template?.source === 'custom' && template?.has_theme_file;
+	return (
+		template?.source === TEMPLATE_ORIGINS.custom &&
+		( Boolean( template?.plugin ) || template?.has_theme_file )
+	);
 	/* eslint-enable camelcase */
 }
diff --git a/packages/edit-site/src/utils/set-nested-value.js b/packages/edit-site/src/utils/set-nested-value.js
new file mode 100644
index 00000000000000..ec684e751cd041
--- /dev/null
+++ b/packages/edit-site/src/utils/set-nested-value.js
@@ -0,0 +1,39 @@
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
+ *
+ * @param {Object} object Object to modify
+ * @param {Array}  path   Path of the property to set.
+ * @param {*}      value  Value to set.
+ */
+export default function setNestedValue( object, path, value ) {
+	if ( ! object || typeof object !== 'object' ) {
+		return object;
+	}
+
+	path.reduce( ( acc, key, idx ) => {
+		if ( acc[ key ] === undefined ) {
+			if ( Number.isInteger( path[ idx + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
+		}
+		if ( idx === path.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, object );
+
+	return object;
+}
diff --git a/packages/keyboard-shortcuts/.npmrc b/packages/edit-site/src/utils/template-part-create.js
similarity index 100%
rename from packages/keyboard-shortcuts/.npmrc
rename to packages/edit-site/src/utils/template-part-create.js
diff --git a/packages/edit-site/src/utils/test/get-filtered-template-parts.js b/packages/edit-site/src/utils/test/get-filtered-template-parts.js
new file mode 100644
index 00000000000000..0d5c2836330213
--- /dev/null
+++ b/packages/edit-site/src/utils/test/get-filtered-template-parts.js
@@ -0,0 +1,127 @@
+/**
+ * Internal dependencies
+ */
+import getFilteredTemplatePartBlocks from '../get-filtered-template-parts';
+
+const NESTED_BLOCKS = [
+	{
+		clientId: '1',
+		name: 'core/group',
+		innerBlocks: [
+			{
+				clientId: '2',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'header',
+					theme: 'my-theme',
+				},
+				innerBlocks: [
+					{
+						clientId: '3',
+						name: 'core/group',
+						innerBlocks: [],
+					},
+				],
+			},
+			{
+				clientId: '4',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'aside',
+					theme: 'my-theme',
+				},
+				innerBlocks: [],
+			},
+		],
+	},
+	{
+		clientId: '5',
+		name: 'core/paragraph',
+		innerBlocks: [],
+	},
+	{
+		clientId: '6',
+		name: 'core/template-part',
+		attributes: {
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+		innerBlocks: [],
+	},
+];
+
+const FLATTENED_BLOCKS = [
+	{
+		block: {
+			clientId: '2',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'header',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//header',
+			slug: 'header',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '4',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'aside',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//aside',
+			slug: 'aside',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '6',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'footer',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//footer',
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+	},
+];
+
+const TEMPLATE_PARTS = [
+	{
+		id: 'my-theme//header',
+		slug: 'header',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//aside',
+		slug: 'aside',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//footer',
+		slug: 'footer',
+		theme: 'my-theme',
+	},
+];
+
+describe( 'getFilteredTemplatePartBlocks', () => {
+	it( 'returns a flattened list of filtered template parts preserving a depth-first order', () => {
+		const flattenedFilteredTemplateParts = getFilteredTemplatePartBlocks(
+			NESTED_BLOCKS,
+			TEMPLATE_PARTS
+		);
+		expect( flattenedFilteredTemplateParts ).toEqual( FLATTENED_BLOCKS );
+	} );
+} );
diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js
new file mode 100644
index 00000000000000..447ea073053492
--- /dev/null
+++ b/packages/edit-site/src/utils/use-activate-theme.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from './is-previewing-theme';
+
+const { useHistory, useLocation } = unlock( routerPrivateApis );
+
+/**
+ * This should be refactored to use the REST API, once the REST API can activate themes.
+ *
+ * @return {Function} A function that activates the theme.
+ */
+export function useActivateTheme() {
+	const history = useHistory();
+	const { path } = useLocation();
+	const { startResolution, finishResolution } = useDispatch( coreStore );
+
+	return async () => {
+		if ( isPreviewingTheme() ) {
+			const activationURL =
+				'themes.php?action=activate&stylesheet=' +
+				currentlyPreviewingTheme() +
+				'&_wpnonce=' +
+				window.WP_BLOCK_THEME_ACTIVATE_NONCE;
+			startResolution( 'activateTheme' );
+			await window.fetch( activationURL );
+			finishResolution( 'activateTheme' );
+			// Remove the wp_theme_preview query param: we've finished activating
+			// the queue and are switching to normal Site Editor.
+			history.navigate( addQueryArgs( path, { wp_theme_preview: '' } ) );
+		}
+	};
+}
diff --git a/packages/edit-site/src/utils/use-actual-current-theme.js b/packages/edit-site/src/utils/use-actual-current-theme.js
new file mode 100644
index 00000000000000..6f8310c2f7de18
--- /dev/null
+++ b/packages/edit-site/src/utils/use-actual-current-theme.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useEffect } from '@wordpress/element';
+import { addQueryArgs } from '@wordpress/url';
+
+const ACTIVE_THEMES_URL = '/wp/v2/themes?status=active';
+
+export function useActualCurrentTheme() {
+	const [ currentTheme, setCurrentTheme ] = useState();
+
+	useEffect( () => {
+		// Set the `wp_theme_preview` to empty string to bypass the createThemePreviewMiddleware.
+		const path = addQueryArgs( ACTIVE_THEMES_URL, {
+			context: 'edit',
+			wp_theme_preview: '',
+		} );
+
+		apiFetch( { path } )
+			.then( ( activeThemes ) => setCurrentTheme( activeThemes[ 0 ] ) )
+			// Do nothing
+			.catch( () => {} );
+	}, [] );
+
+	return currentTheme;
+}
diff --git a/packages/edit-widgets/.npmrc b/packages/edit-widgets/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/edit-widgets/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index 7a41614a5bec63..f4b11636858dcd 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,119 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 5.34.0 (2024-05-02)
+
+## 5.33.0 (2024-04-19)
+
+## 5.32.0 (2024-04-03)
+
+## 5.31.0 (2024-03-21)
+
+## 5.30.0 (2024-03-06)
+
+## 5.29.0 (2024-02-21)
+
+## 5.28.0 (2024-02-09)
+
+## 5.27.0 (2024-01-24)
+
+## 5.26.0 (2024-01-10)
+
+## 5.25.0 (2023-12-13)
+
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
+## 5.22.0 (2023-11-02)
+
+## 5.21.0 (2023-10-18)
+
+## 5.20.0 (2023-10-05)
+
+## 5.19.0 (2023-09-20)
+
+## 5.18.0 (2023-08-31)
+
+## 5.17.0 (2023-08-16)
+
+## 5.16.0 (2023-08-10)
+
+## 5.15.0 (2023-07-20)
+
+## 5.14.0 (2023-07-05)
+
+## 5.13.0 (2023-06-23)
+
+## 5.12.0 (2023-06-07)
+
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
+## 5.9.0 (2023-04-26)
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 4.19.0 (2022-11-16)
 
 ## 4.18.0 (2022-11-02)
@@ -42,11 +155,11 @@
 
 ## 4.0.0 (2022-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `GUTENBERG_PHASE` environment variable has been renamed to `IS_GUTENBERG_PLUGIN` and is now a boolean ([#38202](https://github.com/WordPress/gutenberg/pull/38202)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/a11y`, `@wordpress/server-side-render`, `rememo` and `uuid` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -54,13 +167,13 @@
 
 ## 3.1.0 (2021-11-07)
 
-### Enhancement
+### Enhancements
 
 -   Enable persistent List View in the widget editor [#35706](https://github.com/WordPress/gutenberg/pull/35706).
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -72,8 +185,8 @@
 
 ### 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/.
+-   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/>.
 
 ## 1.3.0 (2021-03-17)
 
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index ccfe78c827b3f4..0528348291481a 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "4.19.0",
+	"version": "6.13.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,42 +20,46 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/reusable-blocks": "file:../reusable-blocks",
-		"@wordpress/url": "file:../url",
-		"@wordpress/widgets": "file:../widgets",
-		"classnames": "^2.3.1"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/interface": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/url": "*",
+		"@wordpress/widgets": "*",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/edit-widgets/src/blocks/widget-area/block.json b/packages/edit-widgets/src/blocks/widget-area/block.json
index 448bf1e8e7357c..fd5e4fc0d777a9 100644
--- a/packages/edit-widgets/src/blocks/widget-area/block.json
+++ b/packages/edit-widgets/src/blocks/widget-area/block.json
@@ -1,5 +1,7 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"name": "core/widget-area",
+	"title": "Widget Area",
 	"category": "widgets",
 	"attributes": {
 		"id": {
diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
index be76548fe6eabd..6de76d2bb068e2 100644
--- a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
+++ b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export default function WidgetAreaInnerBlocks( { id } ) {
 	return (
 		<div
 			data-widget-area-id={ id }
-			className={ classnames(
+			className={ clsx(
 				'wp-block-widget-area__inner-blocks block-editor-inner-blocks editor-styles-wrapper',
 				{
 					'wp-block-widget-area__highlight-drop-zone':
diff --git a/packages/edit-widgets/src/components/error-boundary/index.js b/packages/edit-widgets/src/components/error-boundary/index.js
index 8b941630b347c0..ff12bfe5fdf478 100644
--- a/packages/edit-widgets/src/components/error-boundary/index.js
+++ b/packages/edit-widgets/src/components/error-boundary/index.js
@@ -11,57 +11,55 @@ import { doAction } from '@wordpress/hooks';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
 }
 
+function ErrorBoundaryWarning( { message, error } ) {
+	const actions = [
+		<CopyButton key="copy-error" text={ error.stack }>
+			{ __( 'Copy Error' ) }
+		</CopyButton>,
+	];
+
+	return (
+		<Warning className="edit-widgets-error-boundary" actions={ actions }>
+			{ message }
+		</Warning>
+	);
+}
+
 export default class ErrorBoundary extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.reboot = this.reboot.bind( this );
-
 		this.state = {
 			error: null,
 		};
 	}
 
 	componentDidCatch( error ) {
-		this.setState( { error } );
-
 		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
-	reboot() {
-		this.props.onError();
+	static getDerivedStateFromError( error ) {
+		return { error };
 	}
 
 	render() {
-		const { error } = this.state;
-		if ( ! error ) {
+		if ( ! this.state.error ) {
 			return this.props.children;
 		}
 
 		return (
-			<Warning
-				className="edit-widgets-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
-			>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<ErrorBoundaryWarning
+				message={ __(
+					'The editor has encountered an unexpected error.'
+				) }
+				error={ this.state.error }
+			/>
 		);
 	}
 }
diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss
index c1605b42a5ea86..b909b79dc1d304 100644
--- a/packages/edit-widgets/src/components/error-boundary/style.scss
+++ b/packages/edit-widgets/src/components/error-boundary/style.scss
@@ -3,5 +3,5 @@
 	max-width: 780px;
 	padding: 20px;
 	margin-top: 60px;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
 }
diff --git a/packages/edit-widgets/src/components/error-boundary/test/error-boundary.js b/packages/edit-widgets/src/components/error-boundary/test/error-boundary.js
new file mode 100644
index 00000000000000..27ec4c80419676
--- /dev/null
+++ b/packages/edit-widgets/src/components/error-boundary/test/error-boundary.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import * as wpHooks from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import ErrorBoundary from '../index';
+
+const theError = new Error( 'Kaboom' );
+
+const ChildComponent = () => {
+	throw theError;
+};
+
+describe( 'Error Boundary', () => {
+	describe( 'when error is thrown from a Child component', () => {
+		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
+			const doAction = jest.spyOn( wpHooks, 'doAction' );
+
+			render(
+				<ErrorBoundary>
+					<ChildComponent />
+				</ErrorBoundary>
+			);
+
+			expect( doAction ).toHaveBeenCalledWith(
+				'editor.ErrorBoundary.errorLogged',
+				theError
+			);
+			expect( console ).toHaveErrored();
+		} );
+	} );
+} );
diff --git a/packages/edit-widgets/src/components/header/document-tools/index.js b/packages/edit-widgets/src/components/header/document-tools/index.js
new file mode 100644
index 00000000000000..567a5e1240747e
--- /dev/null
+++ b/packages/edit-widgets/src/components/header/document-tools/index.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { NavigableToolbar } from '@wordpress/block-editor';
+import { listView, plus } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import UndoButton from '../undo-redo/undo';
+import RedoButton from '../undo-redo/redo';
+import { store as editWidgetsStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+function DocumentTools() {
+	const isMediumViewport = useViewportMatch( 'medium' );
+
+	const {
+		isInserterOpen,
+		isListViewOpen,
+		inserterSidebarToggleRef,
+		listViewToggleRef,
+	} = useSelect( ( select ) => {
+		const {
+			isInserterOpened,
+			getInserterSidebarToggleRef,
+			isListViewOpened,
+			getListViewToggleRef,
+		} = unlock( select( editWidgetsStore ) );
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
+			listViewToggleRef: getListViewToggleRef(),
+		};
+	}, [] );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editWidgetsStore );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
+	const toggleInserterSidebar = useCallback(
+		() => setIsInserterOpened( ! isInserterOpen ),
+		[ setIsInserterOpened, isInserterOpen ]
+	);
+
+	return (
+		<NavigableToolbar
+			className="edit-widgets-header-toolbar"
+			aria-label={ __( 'Document tools' ) }
+			variant="unstyled"
+		>
+			<ToolbarItem
+				ref={ inserterSidebarToggleRef }
+				as={ Button }
+				className="edit-widgets-header-toolbar__inserter-toggle"
+				variant="primary"
+				isPressed={ isInserterOpen }
+				onMouseDown={ ( event ) => {
+					event.preventDefault();
+				} }
+				onClick={ toggleInserterSidebar }
+				icon={ plus }
+				/* translators: button label text should, if possible, be under 16
+					characters. */
+				label={ _x(
+					'Block Inserter',
+					'Generic label for block inserter button'
+				) }
+				size="compact"
+			/>
+			{ isMediumViewport && (
+				<>
+					<ToolbarItem as={ UndoButton } />
+					<ToolbarItem as={ RedoButton } />
+					<ToolbarItem
+						as={ Button }
+						className="edit-widgets-header-toolbar__list-view-toggle"
+						icon={ listView }
+						isPressed={ isListViewOpen }
+						/* translators: button label text should, if possible, be under 16 characters. */
+						label={ __( 'List View' ) }
+						onClick={ toggleListView }
+						ref={ listViewToggleRef }
+						size="compact"
+					/>
+				</>
+			) }
+		</NavigableToolbar>
+	);
+}
+
+export default DocumentTools;
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
index 8e8580674d1733..80dda479d59ed6 100644
--- a/packages/edit-widgets/src/components/header/index.js
+++ b/packages/edit-widgets/src/components/header/index.js
@@ -1,85 +1,45 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { __, _x } from '@wordpress/i18n';
-import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
-import {
-	NavigableToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { BlockToolbar } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Popover, VisuallyHidden } from '@wordpress/components';
 import { PinnedItems } from '@wordpress/interface';
-import { listView, plus } from '@wordpress/icons';
-import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
+import DocumentTools from './document-tools';
 import SaveButton from '../save-button';
-import UndoButton from './undo-redo/undo';
-import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
-import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
-import { store as editWidgetsStore } from '../../store';
 
 function Header() {
-	const isMediumViewport = useViewportMatch( 'medium' );
-	const inserterButton = useRef();
-	const widgetAreaClientId = useLastSelectedWidgetArea();
-	const isLastSelectedWidgetAreaOpen = useSelect(
-		( select ) =>
-			select( editWidgetsStore ).getIsWidgetAreaOpen(
-				widgetAreaClientId
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const blockToolbarRef = useRef();
+	const { hasFixedToolbar } = useSelect(
+		( select ) => ( {
+			hasFixedToolbar: !! select( preferencesStore ).get(
+				'core/edit-widgets',
+				'fixedToolbar'
 			),
-		[ widgetAreaClientId ]
-	);
-	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
-		const { isInserterOpened, isListViewOpened } =
-			select( editWidgetsStore );
-		return {
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-		};
-	}, [] );
-	const { setIsWidgetAreaOpen, setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editWidgetsStore );
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const handleClick = () => {
-		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
-			setIsInserterOpened( false );
-		} else {
-			if ( ! isLastSelectedWidgetAreaOpen ) {
-				// Select the last selected block if hasn't already.
-				selectBlock( widgetAreaClientId );
-				// Open the last selected widget area when opening the inserter.
-				setIsWidgetAreaOpen( widgetAreaClientId, true );
-			}
-			// The DOM updates resulting from selectBlock() and setIsInserterOpened() calls are applied the
-			// same tick and pretty much in a random order. The inserter is closed if any other part of the
-			// app receives focus. If selectBlock() happens to take effect after setIsInserterOpened() then
-			// the inserter is visible for a brief moment and then gets auto-closed due to focus moving to
-			// the selected block.
-			window.requestAnimationFrame( () => setIsInserterOpened( true ) );
-		}
-	};
-
-	const toggleListView = useCallback(
-		() => setIsListViewOpened( ! isListViewOpen ),
-		[ setIsListViewOpened, isListViewOpen ]
+		} ),
+		[]
 	);
 
 	return (
 		<>
 			<div className="edit-widgets-header">
 				<div className="edit-widgets-header__navigable-toolbar-wrapper">
-					{ isMediumViewport && (
+					{ isLargeViewport && (
 						<h1 className="edit-widgets-header__title">
 							{ __( 'Widgets' ) }
 						</h1>
 					) }
-					{ ! isMediumViewport && (
+					{ ! isLargeViewport && (
 						<VisuallyHidden
 							as="h1"
 							className="edit-widgets-header__title"
@@ -87,48 +47,22 @@ function Header() {
 							{ __( 'Widgets' ) }
 						</VisuallyHidden>
 					) }
-					<NavigableToolbar
-						className="edit-widgets-header-toolbar"
-						aria-label={ __( 'Document tools' ) }
-					>
-						<ToolbarItem
-							ref={ inserterButton }
-							as={ Button }
-							className="edit-widgets-header-toolbar__inserter-toggle"
-							variant="primary"
-							isPressed={ isInserterOpen }
-							onMouseDown={ ( event ) => {
-								event.preventDefault();
-							} }
-							onClick={ handleClick }
-							icon={ plus }
-							/* translators: button label text should, if possible, be under 16
-					characters. */
-							label={ _x(
-								'Toggle block inserter',
-								'Generic label for block inserter button'
-							) }
-						/>
-						{ isMediumViewport && (
-							<>
-								<UndoButton />
-								<RedoButton />
-								<ToolbarItem
-									as={ Button }
-									className="edit-widgets-header-toolbar__list-view-toggle"
-									icon={ listView }
-									isPressed={ isListViewOpen }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'List View' ) }
-									onClick={ toggleListView }
-								/>
-							</>
-						) }
-					</NavigableToolbar>
+					<DocumentTools />
+					{ hasFixedToolbar && isLargeViewport && (
+						<>
+							<div className="selected-block-tools-wrapper">
+								<BlockToolbar hideDragHandle />
+							</div>
+							<Popover.Slot
+								ref={ blockToolbarRef }
+								name="block-toolbar"
+							/>
+						</>
+					) }
 				</div>
 				<div className="edit-widgets-header__actions">
-					<SaveButton />
 					<PinnedItems.Slot scope="core/edit-widgets" />
+					<SaveButton />
 					<MoreMenu />
 				</div>
 			</div>
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 279182e48a624e..642a641e6e5952 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -3,18 +3,86 @@
 	align-items: center;
 	justify-content: space-between;
 	height: $header-height;
-	padding: 0 $grid-unit-20;
 	overflow: auto;
+	background: #fff;
 
 	@include break-small {
 		overflow: visible;
 	}
+
+	.selected-block-tools-wrapper {
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		height: $header-height;
+
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.block-editor-block-toolbar {
+			height: 100%;
+			// Push down so that buttons are centered vertically.
+			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
+		}
+
+		// Modified group borders.
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				height: $grid-unit-30;
+				background-color: $gray-300;
+				margin-top: $grid-unit-05;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
+
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+	}
 }
 
 .edit-widgets-header__navigable-toolbar-wrapper {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	flex-shrink: 2;
+	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	overflow: hidden;
+	height: $header-height;
 }
 
 .edit-widgets-header__title {
@@ -26,25 +94,29 @@
 .edit-widgets-header__actions {
 	display: flex;
 	align-items: center;
-
-	gap: $grid-unit-05;
+	padding-right: $grid-unit-05;
 
 	@include break-small() {
-		gap: $grid-unit-10;
+		padding-right: $grid-unit-10;
 	}
+
+	gap: $grid-unit-10;
 }
 
 .edit-widgets-header-toolbar {
-	border: none;
+	gap: $grid-unit-10;
+	// Some plugins add buttons here despite best practices.
+	// Push them a bit rightwards to fit the top toolbar.
+	margin-right: $grid-unit-10;
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
 	// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
 	> .components-button.has-icon.has-icon.has-icon,
 	> .components-dropdown > .components-button.has-icon.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js
index c4f4e6df37b915..44760ab8930d77 100644
--- a/packages/edit-widgets/src/components/header/undo-redo/redo.js
+++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js
@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function RedoButton() {
+function RedoButton( props, ref ) {
 	const shortcut = isAppleOS()
 		? displayShortcut.primaryShift( 'z' )
 		: displayShortcut.primary( 'y' );
@@ -19,7 +20,9 @@ export default function RedoButton() {
 	);
 	const { redo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
 			shortcut={ shortcut }
@@ -28,6 +31,9 @@ export default function RedoButton() {
 			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasRedo }
 			onClick={ hasRedo ? redo : undefined }
+			size="compact"
 		/>
 	);
 }
+
+export default forwardRef( RedoButton );
diff --git a/packages/edit-widgets/src/components/header/undo-redo/undo.js b/packages/edit-widgets/src/components/header/undo-redo/undo.js
index 827ed1a415d74b..085f2842f1e098 100644
--- a/packages/edit-widgets/src/components/header/undo-redo/undo.js
+++ b/packages/edit-widgets/src/components/header/undo-redo/undo.js
@@ -2,20 +2,23 @@
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
+import { forwardRef } from '@wordpress/element';
 
-export default function UndoButton() {
+function UndoButton( props, ref ) {
 	const hasUndo = useSelect(
 		( select ) => select( coreStore ).hasUndo(),
 		[]
 	);
 	const { undo } = useDispatch( coreStore );
 	return (
-		<ToolbarButton
+		<Button
+			{ ...props }
+			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
@@ -24,6 +27,9 @@ export default function UndoButton() {
 			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasUndo }
 			onClick={ hasUndo ? undo : undefined }
+			size="compact"
 		/>
 	);
 }
+
+export default forwardRef( UndoButton );
diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js
index 7e098a87be2cd9..0380028aa100c0 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js
+++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js
@@ -22,7 +22,7 @@ export const textFormattingShortcuts = [
 	},
 	{
 		keyCombination: { character: '[[' },
-		description: __( 'Insert a link to a post or page' ),
+		description: __( 'Insert a link to a post or page.' ),
 	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
@@ -36,4 +36,27 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
 ];
diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
index c33efcbb181676..bbddd7c97edc7f 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -49,7 +49,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'edit-widgets-keyboard-shortcut-help-modal__section',
 			className
 		) }
@@ -101,7 +101,6 @@ export default function KeyboardShortcutHelpModal( {
 		<Modal
 			className="edit-widgets-keyboard-shortcut-help-modal"
 			title={ __( 'Keyboard shortcuts' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ toggleModal }
 		>
 			<ShortcutSection
@@ -136,6 +135,10 @@ export default function KeyboardShortcutHelpModal( {
 				title={ __( 'Text formatting' ) }
 				shortcuts={ textFormattingShortcuts }
 			/>
+			<ShortcutCategorySection
+				title={ __( 'List View shortcuts' ) }
+				categoryName="list-view"
+			/>
 		</Modal>
 	);
 }
diff --git a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss
index 425a53fb23a635..5984ca13d57eb2 100644
--- a/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss
+++ b/packages/edit-widgets/src/components/keyboard-shortcut-help-modal/style.scss
@@ -3,11 +3,6 @@
 		margin: 0 0 2rem 0;
 	}
 
-	&__main-shortcuts .edit-widgets-keyboard-shortcut-help-modal__shortcut-list {
-		// Push the shortcut to be flush with top modal header.
-		margin-top: -$grid-unit-30 -$border-width;
-	}
-
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;
@@ -38,9 +33,6 @@
 	&__shortcut-description {
 		flex: 1;
 		margin: 0;
-
-		// IE 11 flex item fix - ensure the item does not collapse.
-		flex-basis: auto;
 	}
 
 	&__shortcut-key-combination {
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( {
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index 08c432664c4d3f..4fc70a6c0c74eb 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/packages/edit-widgets/src/components/layout/index.js
@@ -2,10 +2,10 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Popover } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
+import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,7 +17,7 @@ import Interface from './interface';
 import UnsavedChangesWarning from './unsaved-changes-warning';
 import WelcomeGuide from '../welcome-guide';
 
-function Layout( { blockEditorSettings, onError } ) {
+function Layout( { blockEditorSettings } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -32,18 +32,25 @@ function Layout( { blockEditorSettings, onError } ) {
 		);
 	}
 
+	const navigateRegionsProps = useNavigateRegions();
+
 	return (
-		<ErrorBoundary onError={ onError }>
-			<WidgetAreasBlockEditorProvider
-				blockEditorSettings={ blockEditorSettings }
+		<ErrorBoundary>
+			<div
+				className={ navigateRegionsProps.className }
+				{ ...navigateRegionsProps }
+				ref={ navigateRegionsProps.ref }
 			>
-				<Interface blockEditorSettings={ blockEditorSettings } />
-				<Sidebar />
-				<Popover.Slot />
-				<PluginArea onError={ onPluginAreaError } />
-				<UnsavedChangesWarning />
-				<WelcomeGuide />
-			</WidgetAreasBlockEditorProvider>
+				<WidgetAreasBlockEditorProvider
+					blockEditorSettings={ blockEditorSettings }
+				>
+					<Interface blockEditorSettings={ blockEditorSettings } />
+					<Sidebar />
+					<PluginArea onError={ onPluginAreaError } />
+					<UnsavedChangesWarning />
+					<WelcomeGuide />
+				</WidgetAreasBlockEditorProvider>
+			</div>
 		</ErrorBoundary>
 	);
 }
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 987e3868de1337..bec40a6e830699 100644
--- a/packages/edit-widgets/src/components/layout/interface.js
+++ b/packages/edit-widgets/src/components/layout/interface.js
@@ -11,7 +11,6 @@ import {
 	store as interfaceStore,
 } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -43,8 +42,6 @@ function Interface( { blockEditorSettings } ) {
 		hasSidebarEnabled,
 		isInserterOpened,
 		isListViewOpened,
-		previousShortcut,
-		nextShortcut,
 	} = useSelect(
 		( select ) => ( {
 			hasSidebarEnabled: !! select(
@@ -56,14 +53,6 @@ function Interface( { blockEditorSettings } ) {
 				'core/edit-widgets',
 				'showBlockBreadcrumbs'
 			),
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations(
-				'core/edit-widgets/previous-region'
-			),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-widgets/next-region' ),
 		} ),
 		[]
 	);
@@ -96,11 +85,7 @@ function Interface( { blockEditorSettings } ) {
 			} }
 			header={ <Header /> }
 			secondarySidebar={ hasSecondarySidebar && <SecondarySidebar /> }
-			sidebar={
-				hasSidebarEnabled && (
-					<ComplementaryArea.Slot scope="core/edit-widgets" />
-				)
-			}
+			sidebar={ <ComplementaryArea.Slot scope="core/edit-widgets" /> }
 			content={
 				<>
 					<WidgetAreasBlockEditorContent
@@ -116,10 +101,6 @@ function Interface( { blockEditorSettings } ) {
 					</div>
 				)
 			}
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
 		/>
 	);
 }
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index 1aed3d3eefc86f..14d74e4db9248c 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -18,6 +18,10 @@
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 
+	.block-editor-inserter__tablist-and-close {
+		display: none;
+	}
+
 	@include break-medium() {
 		height: 100%;
 	}
diff --git a/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js b/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
index aec1250ad9710a..382bc6fa0d8905 100644
--- a/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
+++ b/packages/edit-widgets/src/components/layout/unsaved-changes-warning.js
@@ -16,7 +16,7 @@ import { store as editWidgetsStore } from '../../store';
  * This is a duplicate of the component implemented in the editor package.
  * Duplicated here as edit-widgets doesn't depend on editor.
  *
- * @return {WPComponent} The component.
+ * @return {Component} The component.
  */
 export default function UnsavedChangesWarning() {
 	const isDirty = useSelect( ( select ) => {
@@ -32,7 +32,7 @@ export default function UnsavedChangesWarning() {
 		 *
 		 * @param {Event} event `beforeunload` event.
 		 *
-		 * @return {?string} Warning prompt message, if unsaved changes exist.
+		 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
 		 */
 		const warnIfUnsavedChanges = ( event ) => {
 			if ( isDirty ) {
diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js
index ee13c959a7a57d..2613f3d605ff85 100644
--- a/packages/edit-widgets/src/components/more-menu/index.js
+++ b/packages/edit-widgets/src/components/more-menu/index.js
@@ -1,11 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import {
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { external } from '@wordpress/icons';
-import { MoreMenuDropdown } from '@wordpress/interface';
+import { external, moreVertical } from '@wordpress/icons';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -34,7 +38,18 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
 				{ ( onClose ) => (
 					<>
 						{ isLargeViewport && (
@@ -73,7 +88,7 @@ export default function MoreMenu() {
 								role="menuitem"
 								icon={ external }
 								href={ __(
-									'https://wordpress.org/support/article/block-based-widgets-editor/'
+									'https://wordpress.org/documentation/article/block-based-widgets-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"
@@ -134,7 +149,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isKeyboardShortcutsModalActive }
 				toggleModal={ toggleKeyboardShortcutsModal }
diff --git a/packages/edit-widgets/src/components/more-menu/style.scss b/packages/edit-widgets/src/components/more-menu/style.scss
new file mode 100644
index 00000000000000..e618ba729c1ab5
--- /dev/null
+++ b/packages/edit-widgets/src/components/more-menu/style.scss
@@ -0,0 +1,3 @@
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}
diff --git a/packages/edit-widgets/src/components/notices/index.js b/packages/edit-widgets/src/components/notices/index.js
index bb02274e92871d..ffbb1d349d2c09 100644
--- a/packages/edit-widgets/src/components/notices/index.js
+++ b/packages/edit-widgets/src/components/notices/index.js
@@ -5,6 +5,9 @@ import { NoticeList, SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
 function Notices() {
 	const { removeNotice } = useDispatch( noticesStore );
 	const { notices } = useSelect( ( select ) => {
@@ -19,9 +22,9 @@ function Notices() {
 	const nonDismissibleNotices = notices.filter(
 		( { isDismissible, type } ) => ! isDismissible && type === 'default'
 	);
-	const snackbarNotices = notices.filter(
-		( { type } ) => type === 'snackbar'
-	);
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<>
diff --git a/packages/edit-widgets/src/components/notices/style.scss b/packages/edit-widgets/src/components/notices/style.scss
index c0b1f01836fd33..78aaecc883ba45 100644
--- a/packages/edit-widgets/src/components/notices/style.scss
+++ b/packages/edit-widgets/src/components/notices/style.scss
@@ -11,7 +11,6 @@
 .edit-widgets-notices__pinned {
 	.components-notice {
 		box-sizing: border-box;
-		margin: 0;
 		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
 		padding: 0 $grid-unit-15;
 
diff --git a/packages/edit-widgets/src/components/save-button/index.js b/packages/edit-widgets/src/components/save-button/index.js
index 200d8725e13695..d10f6a8d49f0db 100644
--- a/packages/edit-widgets/src/components/save-button/index.js
+++ b/packages/edit-widgets/src/components/save-button/index.js
@@ -22,13 +22,15 @@ function SaveButton() {
 	}, [] );
 	const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore );
 
+	const isDisabled = isSaving || ! hasEditedWidgetAreaIds;
+
 	return (
 		<Button
 			variant="primary"
 			isBusy={ isSaving }
-			aria-disabled={ isSaving }
-			onClick={ isSaving ? undefined : saveEditedWidgetAreas }
-			disabled={ ! hasEditedWidgetAreaIds }
+			aria-disabled={ isDisabled }
+			onClick={ isDisabled ? undefined : saveEditedWidgetAreas }
+			size="compact"
 		>
 			{ isSaving ? __( 'Saving…' ) : __( 'Update' ) }
 		</Button>
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index b01481748ee887..4b26dd306ea0a3 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -31,13 +31,10 @@ export default function InserterSidebar() {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
-		focusOnMount: null,
+		focusOnMount: true,
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div
@@ -47,9 +44,10 @@ export default function InserterSidebar() {
 		>
 			<TagName className="edit-widgets-layout__inserter-panel-header">
 				<Button
+					__next40pxDefaultSize
 					icon={ close }
 					onClick={ closeInserter }
-					label={ __( 'Close block inserter' ) }
+					label={ __( 'Close Block Inserter' ) }
 				/>
 			</TagName>
 			<div className="edit-widgets-layout__inserter-panel-content">
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index ee88c3088da114..fc645fd3bbd0d4 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -3,13 +3,9 @@
  */
 import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import {
-	useFocusOnMount,
-	useFocusReturn,
-	useInstanceId,
-	useMergeRefs,
-} from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -18,49 +14,54 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editWidgetsStore );
+	const { getListViewToggleRef } = unlock( useSelect( editWidgetsStore ) );
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
 
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const headerFocusReturnRef = useFocusReturn();
-	const contentFocusReturnRef = useFocusReturn();
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
-		}
-	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-widgets-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
-			<div
-				className="edit-widgets-editor__list-view-panel-header"
-				ref={ headerFocusReturnRef }
-			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+			<div className="edit-widgets-editor__list-view-panel-header">
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
-					onClick={ () => setIsListViewOpened( false ) }
+					label={ __( 'Close' ) }
+					onClick={ closeListView }
+					size="compact"
 				/>
 			</div>
 			<div
 				className="edit-widgets-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					contentFocusReturnRef,
-					focusOnMountRef,
-				] ) }
+				ref={ useMergeRefs( [ focusOnMountRef, setDropZoneElement ] ) }
 			>
-				<ListView />
+				<ListView dropZoneElement={ dropZoneElement } />
 			</div>
 		</div>
 	);
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/style.scss b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
index 5acf945480a528..bcaf07d06e2224 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
@@ -21,5 +21,5 @@
 	justify-content: space-between;
 	height: $grid-unit-60;
 	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-10;
 }
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index a4268df794462d..a42a6d7c4be7a4 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -1,13 +1,13 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useEffect, Platform } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import {
+	useEffect,
+	Platform,
+	useContext,
+	useCallback,
+} from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
 import {
 	ComplementaryArea,
 	store as interfaceStore,
@@ -17,8 +17,8 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 
-import { cog } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
@@ -28,7 +28,7 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 
 const BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';
 
-// Widget areas were one called block areas, so use 'edit-widgets/block-areas'
+// Widget areas were once called block areas, so use 'edit-widgets/block-areas'
 // for backwards compatibility.
 const WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';
 
@@ -37,32 +37,111 @@ const WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';
  */
 import WidgetAreas from './widget-areas';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
-function ComplementaryAreaTab( { identifier, label, isActive } ) {
+function SidebarHeader( { selectedWidgetAreaBlock } ) {
+	return (
+		<Tabs.TabList>
+			<Tabs.Tab tabId={ WIDGET_AREAS_IDENTIFIER }>
+				{ selectedWidgetAreaBlock
+					? selectedWidgetAreaBlock.attributes.name
+					: __( 'Widget Areas' ) }
+			</Tabs.Tab>
+			<Tabs.Tab tabId={ BLOCK_INSPECTOR_IDENTIFIER }>
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
+	);
+}
+
+function SidebarContent( {
+	hasSelectedNonAreaBlock,
+	currentArea,
+	isGeneralSidebarOpen,
+	selectedWidgetAreaBlock,
+} ) {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	useEffect( () => {
+		if (
+			hasSelectedNonAreaBlock &&
+			currentArea === WIDGET_AREAS_IDENTIFIER &&
+			isGeneralSidebarOpen
+		) {
+			enableComplementaryArea(
+				'core/edit-widgets',
+				BLOCK_INSPECTOR_IDENTIFIER
+			);
+		}
+		if (
+			! hasSelectedNonAreaBlock &&
+			currentArea === BLOCK_INSPECTOR_IDENTIFIER &&
+			isGeneralSidebarOpen
+		) {
+			enableComplementaryArea(
+				'core/edit-widgets',
+				WIDGET_AREAS_IDENTIFIER
+			);
+		}
+		// We're intentionally leaving `currentArea` and `isGeneralSidebarOpen`
+		// out of the dep array because we want this effect to run based on
+		// block selection changes, not sidebar state changes.
+	}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );
+
+	const tabsContextValue = useContext( Tabs.Context );
+
 	return (
-		<Button
-			onClick={ () =>
-				enableComplementaryArea( editWidgetsStore.name, identifier )
-			}
-			className={ classnames( 'edit-widgets-sidebar__panel-tab', {
-				'is-active': isActive,
-			} ) }
-			aria-label={
-				isActive
-					? // translators: %s: sidebar label e.g: "Widget Areas".
-					  sprintf( __( '%s (selected)' ), label )
-					: label
+		<ComplementaryArea
+			className="edit-widgets-sidebar"
+			header={
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<SidebarHeader
+						selectedWidgetAreaBlock={ selectedWidgetAreaBlock }
+					/>
+				</Tabs.Context.Provider>
 			}
-			data-label={ label }
+			headerClassName="edit-widgets-sidebar__panel-tabs"
+			/* translators: button label text should, if possible, be under 16 characters. */
+			title={ __( 'Settings' ) }
+			closeLabel={ __( 'Close Settings' ) }
+			scope="core/edit-widgets"
+			identifier={ currentArea }
+			icon={ isRTL() ? drawerLeft : drawerRight }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
 		>
-			{ label }
-		</Button>
+			<Tabs.Context.Provider value={ tabsContextValue }>
+				<Tabs.TabPanel
+					tabId={ WIDGET_AREAS_IDENTIFIER }
+					focusable={ false }
+				>
+					<WidgetAreas
+						selectedWidgetAreaId={
+							selectedWidgetAreaBlock?.attributes.id
+						}
+					/>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel
+					tabId={ BLOCK_INSPECTOR_IDENTIFIER }
+					focusable={ false }
+				>
+					{ hasSelectedNonAreaBlock ? (
+						<BlockInspector />
+					) : (
+						// Pretend that Widget Areas are part of the UI by not
+						// showing the Block Inspector when one is selected.
+						<span className="block-editor-block-inspector__no-blocks">
+							{ __( 'No block selected.' ) }
+						</span>
+					) }
+				</Tabs.TabPanel>
+			</Tabs.Context.Provider>
+		</ComplementaryArea>
 	);
 }
 
 export default function Sidebar() {
-	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const {
 		currentArea,
 		hasSelectedNonAreaBlock,
@@ -110,84 +189,41 @@ export default function Sidebar() {
 		};
 	}, [] );
 
-	// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,
-	// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.
-	useEffect( () => {
-		if (
-			hasSelectedNonAreaBlock &&
-			currentArea === WIDGET_AREAS_IDENTIFIER &&
-			isGeneralSidebarOpen
-		) {
-			enableComplementaryArea(
-				'core/edit-widgets',
-				BLOCK_INSPECTOR_IDENTIFIER
-			);
-		}
-		if (
-			! hasSelectedNonAreaBlock &&
-			currentArea === BLOCK_INSPECTOR_IDENTIFIER &&
-			isGeneralSidebarOpen
-		) {
-			enableComplementaryArea(
-				'core/edit-widgets',
-				WIDGET_AREAS_IDENTIFIER
-			);
-		}
-	}, [ hasSelectedNonAreaBlock, enableComplementaryArea ] );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	return (
-		<ComplementaryArea
-			className="edit-widgets-sidebar"
-			header={
-				<ul>
-					<li>
-						<ComplementaryAreaTab
-							identifier={ WIDGET_AREAS_IDENTIFIER }
-							label={
-								selectedWidgetAreaBlock
-									? selectedWidgetAreaBlock.attributes.name
-									: __( 'Widget Areas' )
-							}
-							isActive={ currentArea === WIDGET_AREAS_IDENTIFIER }
-						/>
-					</li>
-					<li>
-						<ComplementaryAreaTab
-							identifier={ BLOCK_INSPECTOR_IDENTIFIER }
-							label={ __( 'Block' ) }
-							isActive={
-								currentArea === BLOCK_INSPECTOR_IDENTIFIER
-							}
-						/>
-					</li>
-				</ul>
+	// `newSelectedTabId` could technically be falsy if no tab is selected (i.e.
+	// the initial render) or when we don't want a tab displayed (i.e. the
+	// sidebar is closed). These cases should both be covered by the `!!` check
+	// below, so we shouldn't need any additional falsy handling.
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				enableComplementaryArea(
+					editWidgetsStore.name,
+					newSelectedTabId
+				);
 			}
-			headerClassName="edit-widgets-sidebar__panel-tabs"
-			/* translators: button label text should, if possible, be under 16 characters. */
-			title={ __( 'Settings' ) }
-			closeLabel={ __( 'Close settings' ) }
-			scope="core/edit-widgets"
-			identifier={ currentArea }
-			icon={ cog }
-			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+		},
+		[ enableComplementaryArea ]
+	);
+
+	return (
+		<Tabs
+			// Due to how this component is controlled (via a value from the
+			// `interfaceStore`), when the sidebar closes the currently selected
+			// tab can't be found. This causes the component to continuously reset
+			// the selection to `null` in an infinite loop. Proactively setting
+			// the selected tab to `null` avoids that.
+			selectedTabId={ isGeneralSidebarOpen ? currentArea : null }
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
 		>
-			{ currentArea === WIDGET_AREAS_IDENTIFIER && (
-				<WidgetAreas
-					selectedWidgetAreaId={
-						selectedWidgetAreaBlock?.attributes.id
-					}
-				/>
-			) }
-			{ currentArea === BLOCK_INSPECTOR_IDENTIFIER &&
-				( hasSelectedNonAreaBlock ? (
-					<BlockInspector />
-				) : (
-					// Pretend that Widget Areas are part of the UI by not
-					// showing the Block Inspector when one is selected.
-					<span className="block-editor-block-inspector__no-blocks">
-						{ __( 'No block selected.' ) }
-					</span>
-				) ) }
-		</ComplementaryArea>
+			<SidebarContent
+				hasSelectedNonAreaBlock={ hasSelectedNonAreaBlock }
+				currentArea={ currentArea }
+				isGeneralSidebarOpen={ isGeneralSidebarOpen }
+				selectedWidgetAreaBlock={ selectedWidgetAreaBlock }
+			/>
+		</Tabs>
 	);
 }
diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss
index 823f166411fd0f..d54f25af07c386 100644
--- a/packages/edit-widgets/src/components/sidebar/style.scss
+++ b/packages/edit-widgets/src/components/sidebar/style.scss
@@ -1,78 +1,7 @@
 .components-panel__header.edit-widgets-sidebar__panel-tabs {
-	justify-content: flex-start;
 	padding-left: 0;
-	padding-right: $grid-unit-05;
-	border-top: 0;
-	margin-top: 0;
-
-	ul {
-		display: flex;
-	}
-	li {
-		margin: 0;
-	}
-	.components-button.has-icon {
-		display: none;
-		margin-left: auto;
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
 }
 
-.components-button.edit-widgets-sidebar__panel-tab {
-	border-radius: 0;
-	height: 50px - $border-width;
-	background: transparent;
-	border: none;
-	box-shadow: none;
-	cursor: pointer;
-	display: inline-block;
-	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
-	margin-left: 0;
-	font-weight: 400;
-	color: $gray-900;
-
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
-	&::after {
-		content: attr(data-label);
-		display: block;
-		font-weight: 600;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
-	}
-
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		font-weight: 600;
-		position: relative;
-
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-	}
-}
 
 .edit-widgets-widget-areas__top-container {
 	display: flex;
diff --git a/packages/edit-widgets/src/components/sidebar/widget-areas.js b/packages/edit-widgets/src/components/sidebar/widget-areas.js
index 98ce523d6e4fe2..c7b49c10b97464 100644
--- a/packages/edit-widgets/src/components/sidebar/widget-areas.js
+++ b/packages/edit-widgets/src/components/sidebar/widget-areas.js
@@ -66,6 +66,7 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 					) }
 					{ ! selectedWidgetArea && (
 						<Button
+							__next40pxDefaultSize
 							href={ addQueryArgs( 'customize.php', {
 								'autofocus[panel]': 'widgets',
 								return: window.location.pathname,
diff --git a/packages/edit-widgets/src/components/test/error-boundary.js b/packages/edit-widgets/src/components/test/error-boundary.js
deleted file mode 100644
index 7b9977e10f1315..00000000000000
--- a/packages/edit-widgets/src/components/test/error-boundary.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import * as wpHooks from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import ErrorBoundary from '../error-boundary';
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-const theError = new Error( 'Kaboom' );
-
-const ChildComponent = () => {
-	throw theError;
-};
-
-describe( 'Error Boundary', () => {
-	describe( 'when error is thrown from a Child component', () => {
-		it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
-			const doAction = jest.spyOn( wpHooks, 'doAction' );
-
-			render(
-				<ErrorBoundary>
-					<ChildComponent />
-				</ErrorBoundary>
-			);
-
-			expect( doAction ).toHaveBeenCalledWith(
-				'editor.ErrorBoundary.errorLogged',
-				theError
-			);
-			expect( console ).toHaveErrored();
-		} );
-	} );
-} );
diff --git a/packages/edit-widgets/src/components/welcome-guide/index.js b/packages/edit-widgets/src/components/welcome-guide/index.js
index 48ffecf6c8c3c9..b9967e3a6025d7 100644
--- a/packages/edit-widgets/src/components/welcome-guide/index.js
+++ b/packages/edit-widgets/src/components/welcome-guide/index.js
@@ -118,7 +118,7 @@ export default function WelcomeGuide() {
 					content: (
 						<>
 							<h1 className="edit-widgets-welcome-guide__heading">
-								{ __( 'Make each block your own' ) }
+								{ __( 'Customize each block' ) }
 							</h1>
 							<p className="edit-widgets-welcome-guide__text">
 								{ __(
@@ -138,7 +138,7 @@ export default function WelcomeGuide() {
 					content: (
 						<>
 							<h1 className="edit-widgets-welcome-guide__heading">
-								{ __( 'Get to know the block library' ) }
+								{ __( 'Explore all blocks' ) }
 							</h1>
 							<p className="edit-widgets-welcome-guide__text">
 								{ createInterpolateElement(
@@ -169,19 +169,23 @@ export default function WelcomeGuide() {
 					content: (
 						<>
 							<h1 className="edit-widgets-welcome-guide__heading">
-								{ __( 'Learn how to use the block editor' ) }
+								{ __( 'Learn more' ) }
 							</h1>
 							<p className="edit-widgets-welcome-guide__text">
-								{ __(
-									'New to the block editor? Want to learn more about using it? '
+								{ createInterpolateElement(
+									__(
+										"New to the block editor? Want to learn more about using it? <a>Here's a detailed guide.</a>"
+									),
+									{
+										a: (
+											<ExternalLink
+												href={ __(
+													'https://wordpress.org/documentation/article/wordpress-block-editor/'
+												) }
+											/>
+										),
+									}
 								) }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/support/article/wordpress-editor/'
-									) }
-								>
-									{ __( "Here's a detailed guide." ) }
-								</ExternalLink>
 							</p>
 						</>
 					),
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
index 386d4730e4dab4..e1bd7a6b12f1e6 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -3,12 +3,13 @@
  */
 import {
 	BlockList,
+	BlockToolbar,
 	BlockTools,
 	BlockSelectionClearer,
 	WritingFlow,
-	ObserveTyping,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -30,6 +31,7 @@ export default function WidgetAreasBlockEditorContent( {
 			),
 		[]
 	);
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	const styles = useMemo( () => {
 		return hasThemeStyles ? blockEditorSettings.styles : [];
@@ -38,14 +40,16 @@ export default function WidgetAreasBlockEditorContent( {
 	return (
 		<div className="edit-widgets-block-editor">
 			<Notices />
+			{ ! isLargeViewport && <BlockToolbar hideDragHandle /> }
 			<BlockTools>
 				<KeyboardShortcuts />
-				<EditorStyles styles={ styles } />
+				<EditorStyles
+					styles={ styles }
+					scope=":where(.editor-styles-wrapper)"
+				/>
 				<BlockSelectionClearer>
 					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
+						<BlockList className="edit-widgets-main-block-list" />
 					</WritingFlow>
 				</BlockSelectionClearer>
 			</BlockTools>
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
index 97a084b220393d..35493cad130cfd 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss
@@ -11,8 +11,7 @@
 	flex-grow: 1;
 
 	> div:last-of-type,
-	.block-editor-writing-flow,
-	.block-editor-writing-flow > div {
+	.block-editor-writing-flow {
 		display: flex;
 		flex-direction: column;
 		flex-grow: 1;
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
index 8aa616c867473d..751931d858da8d 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -2,22 +2,15 @@
  * WordPress dependencies
  */
 import { SlotFillProvider } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
 import { uploadMedia } from '@wordpress/media-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	useEntityBlockEditor,
-	store as coreStore,
-	useResourcePermissions,
-} from '@wordpress/core-data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
-import {
-	BlockEditorProvider,
-	BlockEditorKeyboardShortcuts,
-	CopyHandler,
-} from '@wordpress/block-editor';
-import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -27,40 +20,62 @@ import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
 import { ALLOW_REUSABLE_BLOCKS } from '../../constants';
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
+const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
+
+const EMPTY_ARRAY = [];
 
 export default function WidgetAreasBlockEditorProvider( {
 	blockEditorSettings,
 	children,
 	...props
 } ) {
-	const mediaPermissions = useResourcePermissions( 'media' );
-	const { reusableBlocks, isFixedToolbarActive, keepCaretInsideBlock } =
-		useSelect(
-			( select ) => ( {
-				widgetAreas: select( editWidgetsStore ).getWidgetAreas(),
-				widgets: select( editWidgetsStore ).getWidgets(),
-				reusableBlocks: ALLOW_REUSABLE_BLOCKS
-					? select( coreStore ).getEntityRecords(
-							'postType',
-							'wp_block'
-					  )
-					: [],
-				isFixedToolbarActive: !! select( preferencesStore ).get(
-					'core/edit-widgets',
-					'fixedToolbar'
-				),
-				keepCaretInsideBlock: !! select( preferencesStore ).get(
-					'core/edit-widgets',
-					'keepCaretInsideBlock'
-				),
-			} ),
-			[]
-		);
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const {
+		hasUploadPermissions,
+		reusableBlocks,
+		isFixedToolbarActive,
+		keepCaretInsideBlock,
+		pageOnFront,
+		pageForPosts,
+	} = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEntityRecords } =
+			select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
+		return {
+			hasUploadPermissions:
+				canUser( 'create', {
+					kind: 'root',
+					name: 'media',
+				} ) ?? true,
+			reusableBlocks: ALLOW_REUSABLE_BLOCKS
+				? getEntityRecords( 'postType', 'wp_block' )
+				: EMPTY_ARRAY,
+			isFixedToolbarActive: !! select( preferencesStore ).get(
+				'core/edit-widgets',
+				'fixedToolbar'
+			),
+			keepCaretInsideBlock: !! select( preferencesStore ).get(
+				'core/edit-widgets',
+				'keepCaretInsideBlock'
+			),
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
+		};
+	}, [] );
 	const { setIsInserterOpened } = useDispatch( editWidgetsStore );
 
 	const settings = useMemo( () => {
 		let mediaUploadBlockEditor;
-		if ( mediaPermissions.canCreate ) {
+		if ( hasUploadPermissions ) {
 			mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => {
 				uploadMedia( {
 					wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes,
@@ -72,19 +87,25 @@ export default function WidgetAreasBlockEditorProvider( {
 		return {
 			...blockEditorSettings,
 			__experimentalReusableBlocks: reusableBlocks,
-			hasFixedToolbar: isFixedToolbarActive,
+			hasFixedToolbar: isFixedToolbarActive || ! isLargeViewport,
 			keepCaretInsideBlock,
 			mediaUpload: mediaUploadBlockEditor,
 			templateLock: 'all',
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
+			pageOnFront,
+			pageForPosts,
+			editorTool: 'edit',
 		};
 	}, [
+		hasUploadPermissions,
 		blockEditorSettings,
 		isFixedToolbarActive,
+		isLargeViewport,
 		keepCaretInsideBlock,
-		mediaPermissions.canCreate,
 		reusableBlocks,
 		setIsInserterOpened,
+		pageOnFront,
+		pageForPosts,
 	] );
 
 	const widgetAreaId = useLastSelectedWidgetArea();
@@ -96,22 +117,20 @@ export default function WidgetAreasBlockEditorProvider( {
 	);
 
 	return (
-		<ShortcutProvider>
-			<BlockEditorKeyboardShortcuts.Register />
+		<SlotFillProvider>
 			<KeyboardShortcuts.Register />
-			<SlotFillProvider>
-				<BlockEditorProvider
-					value={ blocks }
-					onInput={ onInput }
-					onChange={ onChange }
-					settings={ settings }
-					useSubRegistry={ false }
-					{ ...props }
-				>
-					<CopyHandler>{ children }</CopyHandler>
-					<ReusableBlocksMenuItems rootClientId={ widgetAreaId } />
-				</BlockEditorProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+			<BlockKeyboardShortcuts />
+			<ExperimentalBlockEditorProvider
+				value={ blocks }
+				onInput={ onInput }
+				onChange={ onChange }
+				settings={ settings }
+				useSubRegistry={ false }
+				{ ...props }
+			>
+				{ children }
+				<PatternsMenuItems rootClientId={ widgetAreaId } />
+			</ExperimentalBlockEditorProvider>
+		</SlotFillProvider>
 	);
 }
diff --git a/packages/edit-widgets/src/filters/move-to-widget-area.js b/packages/edit-widgets/src/filters/move-to-widget-area.js
index c39315505232e7..61a8b4cd7187f2 100644
--- a/packages/edit-widgets/src/filters/move-to-widget-area.js
+++ b/packages/edit-widgets/src/filters/move-to-widget-area.js
@@ -48,7 +48,7 @@ const withMoveToWidgetAreaToolbarItem = createHigherOrderComponent(
 
 		return (
 			<>
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 				{ isMoveToWidgetAreaVisible && (
 					<BlockControls>
 						<MoveToWidgetArea
diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js
index 9fa62f7909f163..2f0ced0c09bd75 100644
--- a/packages/edit-widgets/src/index.js
+++ b/packages/edit-widgets/src/index.js
@@ -8,7 +8,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+import { StrictMode, createRoot } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -28,7 +29,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import './store';
 import './filters';
 import * as widgetArea from './blocks/widget-area';
-
 import Layout from './components/layout';
 import {
 	ALLOW_REUSABLE_BLOCKS,
@@ -42,32 +42,16 @@ const disabledBlocks = [
 	...( ALLOW_REUSABLE_BLOCKS ? [] : [ 'core/block' ] ),
 ];
 
-/**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
- *
- * @param {Element} target   DOM node in which editor is rendered.
- * @param {?Object} settings Editor settings object.
- */
-export function reinitializeEditor( target, settings ) {
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind( null, target, settings );
-	render(
-		<Layout blockEditorSettings={ settings } onError={ reboot } />,
-		target
-	);
-}
-
 /**
  * Initializes the block editor in the widgets screen.
  *
  * @param {string} id       ID of the root element to render the screen in.
  * @param {Object} settings Block editor settings.
  */
-export function initialize( id, settings ) {
+export function initializeEditor( id, settings ) {
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind( null, target, settings );
+	const root = createRoot( target );
+
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			disabledBlocks.includes( block.name ) ||
@@ -85,10 +69,10 @@ export function initialize( id, settings ) {
 		themeStyles: true,
 	} );
 
-	dispatch( blocksStore ).__experimentalReapplyBlockTypeFilters();
+	dispatch( blocksStore ).reapplyBlockTypeFilters();
 	registerCoreBlocks( coreBlocks );
 	registerLegacyWidgetBlock();
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: ENABLE_EXPERIMENTAL_FSE_BLOCKS,
 		} );
@@ -105,17 +89,32 @@ export function initialize( id, settings ) {
 	// do this will result in errors in the default block parser.
 	// see: https://github.com/WordPress/gutenberg/issues/33097
 	setFreeformContentHandlerName( 'core/html' );
-	render(
-		<Layout blockEditorSettings={ settings } onError={ reboot } />,
-		target
+
+	root.render(
+		<StrictMode>
+			<Layout blockEditorSettings={ settings } />
+		</StrictMode>
 	);
+
+	return root;
+}
+
+/**
+ * Compatibility export under the old `initialize` name.
+ */
+export const initialize = initializeEditor;
+
+export function reinitializeEditor() {
+	deprecated( 'wp.editWidgets.reinitializeEditor', {
+		since: '6.2',
+		version: '6.3',
+	} );
 }
 
 /**
  * Function to register an individual block.
  *
  * @param {Object} block The block to be registered.
- *
  */
 const registerBlock = ( block ) => {
 	if ( ! block ) {
@@ -127,3 +126,5 @@ const registerBlock = ( block ) => {
 	}
 	registerBlockType( name, settings );
 };
+
+export { store } from './store';
diff --git a/packages/edit-widgets/src/lock-unlock.js b/packages/edit-widgets/src/lock-unlock.js
new file mode 100644
index 00000000000000..1c401a0ccd4dab
--- /dev/null
+++ b/packages/edit-widgets/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/edit-widgets'
+	);
diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
index d5f8d52a1346af..8124ace66bdb3a 100644
--- a/packages/edit-widgets/src/store/actions.js
+++ b/packages/edit-widgets/src/store/actions.js
@@ -395,7 +395,7 @@ export const moveBlockToWidgetArea =
 	async ( { dispatch, select, registry } ) => {
 		const sourceRootClientId = registry
 			.select( blockEditorStore )
-			.getBlockRootClientId( [ clientId ] );
+			.getBlockRootClientId( clientId );
 
 		// Search the top level blocks (widget areas) for the one with the matching
 		// id attribute. Makes the assumption that all top-level blocks are widget
diff --git a/packages/edit-widgets/src/store/index.js b/packages/edit-widgets/src/store/index.js
index b8542b2fa5cf19..8768b45954b930 100644
--- a/packages/edit-widgets/src/store/index.js
+++ b/packages/edit-widgets/src/store/index.js
@@ -11,7 +11,9 @@ import reducer from './reducer';
 import * as resolvers from './resolvers';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.
@@ -47,3 +49,5 @@ apiFetch.use( function ( options, next ) {
 
 	return next( options );
 } );
+
+unlock( store ).registerPrivateSelectors( privateSelectors );
diff --git a/packages/edit-widgets/src/store/private-selectors.js b/packages/edit-widgets/src/store/private-selectors.js
new file mode 100644
index 00000000000000..ee2000ac128443
--- /dev/null
+++ b/packages/edit-widgets/src/store/private-selectors.js
@@ -0,0 +1,7 @@
+export function getListViewToggleRef( state ) {
+	return state.listViewToggleRef;
+}
+
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}
diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js
index ff942b955edcdc..3dbc95123a382a 100644
--- a/packages/edit-widgets/src/store/reducer.js
+++ b/packages/edit-widgets/src/store/reducer.js
@@ -68,8 +68,32 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef( state = { current: null } ) {
+	return state;
+}
+
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
+	inserterSidebarToggleRef,
 	listViewPanel,
+	listViewToggleRef,
 	widgetAreasOpenState,
 } );
diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
index 80bcddfead7b3f..204c75e2daefbb 100644
--- a/packages/edit-widgets/src/store/selectors.js
+++ b/packages/edit-widgets/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import { getWidgetIdFromBlock } from '@wordpress/widgets';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -19,29 +19,45 @@ import {
 } from './utils';
 import { STORE_NAME as editWidgetsStoreName } from './constants';
 
+const EMPTY_INSERTION_POINT = {
+	rootClientId: undefined,
+	insertionIndex: undefined,
+};
+
 /**
  * Returns all API widgets.
  *
  * @return {Object[]} API List of widgets.
  */
-export const getWidgets = createRegistrySelector( ( select ) => () => {
-	const widgets = select( coreStore ).getEntityRecords(
-		'root',
-		'widget',
-		buildWidgetsQuery()
-	);
+export const getWidgets = createRegistrySelector( ( select ) =>
+	createSelector(
+		() => {
+			const widgets = select( coreStore ).getEntityRecords(
+				'root',
+				'widget',
+				buildWidgetsQuery()
+			);
 
-	return (
-		// Key widgets by their ID.
-		widgets?.reduce(
-			( allWidgets, widget ) => ( {
-				...allWidgets,
-				[ widget.id ]: widget,
-			} ),
-			{}
-		) || {}
-	);
-} );
+			return (
+				// Key widgets by their ID.
+				widgets?.reduce(
+					( allWidgets, widget ) => ( {
+						...allWidgets,
+						[ widget.id ]: widget,
+					} ),
+					{}
+				) ?? {}
+			);
+		},
+		() => [
+			select( coreStore ).getEntityRecords(
+				'root',
+				'widget',
+				buildWidgetsQuery()
+			),
+		]
+	)
+);
 
 /**
  * Returns API widget data for a particular widget ID.
@@ -254,8 +270,11 @@ export function isInserterOpened( state ) {
  * @return {Object} The root client ID and index to insert at.
  */
 export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex } = state.blockInserterPanel;
-	return { rootClientId, insertionIndex };
+	if ( typeof state.blockInserterPanel === 'boolean' ) {
+		return EMPTY_INSERTION_POINT;
+	}
+
+	return state.blockInserterPanel;
 }
 
 /**
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 2e78903d72c714..62a6f63cd4850f 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -7,29 +7,18 @@
 @import "./components/sidebar/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/more-menu/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/widget-areas-block-editor-content/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations
-html.wp-toolbar {
-	background: $white;
-}
-
-body.appearance_page_gutenberg-widgets,
-body.widgets-php {
+body.js.appearance_page_gutenberg-widgets,
+body.js.widgets-php {
 	@include wp-admin-reset( ".blocks-widgets-container" );
 }
 
-.blocks-widgets-container,
-// The modals are shown outside the .blocks-widgets-container wrapper, they need these styles
-.components-modal__frame {
-	@include reset;
-
-}
-
 .blocks-widgets-container {
+	@include reset;
 	// On mobile the main content area has to scroll, otherwise you can invoke
 	// the overscroll bounce on the non-scrolling container, for a bad experience.
 	@include break-small {
@@ -62,7 +51,7 @@ body.widgets-php {
 
 // Don't display admin notices on the Widgets screen.
 // Needs !important because plugins may add inline styles to notices.
-.widgets-php .notice {
+.js .widgets-php .notice {
 	display: none !important;
 }
 
diff --git a/packages/editor/.npmrc b/packages/editor/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/editor/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index b907623733063f..5c00b30fbe96d3 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,131 @@
 
 ## Unreleased
 
+## 14.13.0 (2024-11-27)
+
+## 14.12.0 (2024-11-16)
+
+## 14.11.0 (2024-10-30)
+
+### Bug Fixes
+
+-   `Post Featured Image`: Fix `Set featured image` button's `box-shadow` transition to prevent border from flashing when focused.
+
+## 14.10.0 (2024-10-16)
+
+## 14.9.0 (2024-10-03)
+
+## 14.8.0 (2024-09-19)
+
+## 14.7.0 (2024-09-05)
+
+## 14.6.0 (2024-08-21)
+
+## 14.5.0 (2024-08-07)
+
+## 14.4.0 (2024-07-24)
+
+### Deprecations
+
+-   `PostTaxonomiesFlatTermSelector`: Deprecate bottom margin. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0 ([#63491](https://github.com/WordPress/gutenberg/pull/63491)).
+
+## 14.3.0 (2024-07-10)
+
+## 14.2.0 (2024-06-26)
+
+## 14.1.0 (2024-06-15)
+
+## 14.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 13.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 13.34.0 (2024-05-02)
+
+## 13.33.0 (2024-04-19)
+
+## 13.32.0 (2024-04-03)
+
+## 13.31.0 (2024-03-21)
+
+## 13.30.0 (2024-03-06)
+
+## 13.29.0 (2024-02-21)
+
+## 13.28.0 (2024-02-09)
+
+## 13.27.0 (2024-01-24)
+
+## 13.26.0 (2024-01-10)
+
+### New Features
+
+-   Add the editor panels visibility state to the editor store in addition to the following actions and selectors: `toggleEditorPanelEnabled`, `toggleEditorPanelOpened`, `removeEditorPanel`, `isEditorPanelRemoved`, `isEditorPanelOpened` and `isEditorPanelEnabled`.
+
+## 13.25.0 (2023-12-13)
+
+## 13.24.0 (2023-11-29)
+
+## 13.23.0 (2023-11-16)
+
+## 13.22.0 (2023-11-02)
+
+## 13.21.0 (2023-10-18)
+
+## 13.20.0 (2023-10-05)
+
+## 13.19.0 (2023-09-20)
+
+## 13.18.0 (2023-08-31)
+
+## 13.17.0 (2023-08-16)
+
+## 13.16.0 (2023-08-10)
+
+## 13.15.0 (2023-07-20)
+
+## 13.14.0 (2023-07-05)
+
+## 13.13.0 (2023-06-23)
+
+## 13.12.0 (2023-06-07)
+
+## 13.11.0 (2023-05-24)
+
+## 13.10.0 (2023-05-10)
+
+## 13.9.0 (2023-04-26)
+
+## 13.8.0 (2023-04-12)
+
+## 13.7.0 (2023-03-29)
+
+## 13.6.0 (2023-03-15)
+
+## 13.5.0 (2023-03-01)
+
+## 13.4.0 (2023-02-15)
+
+## 13.3.0 (2023-02-01)
+
+## 13.2.0 (2023-01-11)
+
+## 13.1.0 (2023-01-02)
+
+## 13.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 12.21.0 (2022-11-16)
 
 ## 12.20.0 (2022-11-02)
@@ -46,34 +171,34 @@
 
 ### Deprecations
 
-- Deprecated `cleanForSlug` that is now part of `@wordpress/url`.
+-   Deprecated `cleanForSlug` that is now part of `@wordpress/url`.
 
 ## 12.2.0 (2022-02-10)
 
-### Enhancement
+### Enhancements
 
 -   Export `PostTaxonomiesFlatTermSelector` and `PostTaxonomiesHierarchicalTermSelector` components to allow using them to customize the default term selector for a taxonomy.
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/autop`, `@wordpress/blob` and `@wordpress/is-shallow-equal` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
 ### Deprecations
 
-- the `createUndoLevel` and `refreshPost` actions were marked as deprecated. They were already defunct and acting as noops.
+-   the `createUndoLevel` and `refreshPost` actions were marked as deprecated. They were already defunct and acting as noops.
 
 ## 12.1.0 (2022-01-27)
 
 ## 12.0.0 (2021-10-12)
 
-### Breaking changes
+### Breaking Changes
 
 -   Removed the deprecated `resetAutosave` action ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
 -   Removed the deprecated `getAutosave`, `hasAutosave` and `getBlockForSerialization` selectors ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
 
 ## 11.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -85,20 +210,20 @@
 
 ### 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/.
+-   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/>.
 
 ## 9.26.0 (2021-03-17)
 
 ## 9.25.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the editor namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
 ## 9.21.0 (2020-09-03)
 
-### Enhancement
+### Enhancements
 
 -   The `UnsavedChangesWarning` component is now using `__experimentalGetDirtyEntityRecords` to determine if there were changes.
 
@@ -324,7 +449,7 @@
 
 ## 7.0.1 (2018-11-12)
 
-### Polish
+### Internal
 
 -   Remove unnecessary `locale` prop usage [#11649](https://github.com/WordPress/gutenberg/pull/11649)
 
@@ -334,11 +459,11 @@
 
 ## 7.0.0 (2018-11-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `PanelColor` component has been removed.
 
-### New Feature
+### New Features
 
 -   In `NavigableToolbar`, a property focusOnMount was added, if true, the toolbar will get focus as soon as it mounted. Defaults to false.
 
@@ -356,7 +481,7 @@
 
 -   `PostPublishPanelToggle` has been deprecated in favor of `PostPublishButton`.
 
-### Polish
+### Internal
 
 -   Reactive block styles.
 
@@ -368,7 +493,7 @@
 
 ## 6.1.1 (2018-11-03)
 
-### Polish
+### Internal
 
 -   Remove `findDOMNode` usage from the `Inserter` component.
 -   Remove `findDOMNode` usage from the `Block` component.
@@ -401,7 +526,7 @@
 -   New actions `lockPostSaving` and `unlockPostSaving` were introduced ([#10649](https://github.com/WordPress/gutenberg/pull/10649)).
 -   New selector `isPostSavingLocked` was introduced ([#10649](https://github.com/WordPress/gutenberg/pull/10649)).
 
-### Polish
+### Internal
 
 -   Add animated logo to preview interstitial screen.
 -   Tweak the editor styles support.
diff --git a/packages/editor/README.md b/packages/editor/README.md
index dc8ec694de07a6..3211e6664256d0 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -37,8 +37,8 @@ When returned by your block's `edit` implementation, renders a toolbar of icon b
 Example:
 
 ```js
-( function ( editor, element ) {
-	var el = element.createElement,
+( function ( editor, React ) {
+	var el = React.createElement,
 		BlockControls = editor.BlockControls,
 		AlignmentToolbar = editor.AlignmentToolbar;
 
@@ -64,7 +64,7 @@ Example:
 			),
 		];
 	}
-} )( window.wp.editor, window.wp.element );
+} )( window.wp.editor, window.React );
 ```
 
 Note in this example that we render `AlignmentToolbar` as a child of the `BlockControls` element. This is another pre-configured component you can use to simplify block text alignment.
@@ -91,17 +91,12 @@ The following properties (non-exhaustive list) are made available:
 -   `placeholder: string` - A text hint to be shown to the user when the field
     value is empty, similar to the
     [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
--   `multiline: String` - A tag name to use for the tag that should be inserted
-    when Enter is pressed. For example: `li` in a list block, and `p` for a
-    block that can contain multiple paragraphs. The default is that only inline
-    elements are allowed to be used in inserted into the text, effectively
-    disabling the behavior of the "Enter" key.
 
 Example:
 
 ```js
-( function ( editor, element ) {
-	var el = element.createElement,
+( function ( editor, React ) {
+	var el = React.createElement,
 		RichText = editor.RichText;
 
 	function edit( props ) {
@@ -116,9 +111,1695 @@ Example:
 	}
 
 	// blocks.registerBlockType( ..., { edit: edit, ... } );
-} )( window.wp.editor, window.wp.element );
+} )( window.wp.editor, window.React );
 ```
 
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### AlignmentToolbar
+
+> **Deprecated** since 5.3, use `wp.blockEditor.AlignmentToolbar` instead.
+
+### Autocomplete
+
+> **Deprecated** since 5.3, use `wp.blockEditor.Autocomplete` instead.
+
+### AutosaveMonitor
+
+Monitors the changes made to the edited post and triggers autosave if necessary.
+
+The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called. The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as the specific way of detecting changes.
+
+There are two caveats:
+
+-   If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+-   The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
+
+_Usage_
+
+```jsx
+<AutosaveMonitor interval={ 30000 } />
+```
+
+_Parameters_
+
+-   _props_ `Object`: - The properties passed to the component.
+-   _props.autosave_ `Function`: - The function to call when changes need to be saved.
+-   _props.interval_ `number`: - The maximum time in seconds between an unsaved change and an autosave.
+-   _props.isAutosaveable_ `boolean`: - If false, the check for changes is retried every second.
+-   _props.disableIntervalChecks_ `boolean`: - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+-   _props.isDirty_ `boolean`: - Indicates if there are unsaved changes.
+
+### BlockAlignmentToolbar
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockAlignmentToolbar` instead.
+
+### BlockControls
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockControls` instead.
+
+### BlockEdit
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockEdit` instead.
+
+### BlockEditorKeyboardShortcuts
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockEditorKeyboardShortcuts` instead.
+
+### BlockFormatControls
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockFormatControls` instead.
+
+### BlockIcon
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockIcon` instead.
+
+### BlockInspector
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockInspector` instead.
+
+### BlockList
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockList` instead.
+
+### BlockMover
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockMover` instead.
+
+### BlockNavigationDropdown
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockNavigationDropdown` instead.
+
+### BlockSelectionClearer
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockSelectionClearer` instead.
+
+### BlockSettingsMenu
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockSettingsMenu` instead.
+
+### BlockTitle
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockTitle` instead.
+
+### BlockToolbar
+
+> **Deprecated** since 5.3, use `wp.blockEditor.BlockToolbar` instead.
+
+### CharacterCount
+
+Renders the character count of the post content.
+
+_Returns_
+
+-   `number`: The character count.
+
+### cleanForSlug
+
+Performs some basic cleanup of a string for use as a post slug
+
+This replicates some of what sanitize_title() does in WordPress core, but is only designed to approximate what the slug will be.
+
+Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin letters. Removes combining diacritical marks. Converts whitespace, periods, and forward slashes to hyphens. Removes any remaining non-word characters except hyphens and underscores. Converts remaining string to lowercase. It does not account for octets, HTML entities, or other encoded characters.
+
+_Parameters_
+
+-   _string_ `string`: Title or slug to be processed
+
+_Returns_
+
+-   `string`: Processed string
+
+### ColorPalette
+
+> **Deprecated** since 5.3, use `wp.blockEditor.ColorPalette` instead.
+
+### ContrastChecker
+
+> **Deprecated** since 5.3, use `wp.blockEditor.ContrastChecker` instead.
+
+### CopyHandler
+
+> **Deprecated** since 5.3, use `wp.blockEditor.CopyHandler` instead.
+
+### createCustomColorsHOC
+
+> **Deprecated** since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+
+### DefaultBlockAppender
+
+> **Deprecated** since 5.3, use `wp.blockEditor.DefaultBlockAppender` instead.
+
+### DocumentBar
+
+This component renders a navigation bar at the top of the editor. It displays the title of the current document, a back button (if applicable), and a command center button. It also handles different states of the document, such as "not found" or "unsynced".
+
+_Usage_
+
+```jsx
+<DocumentBar />
+```
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.title_ `string`: A title for the document, defaulting to the document or template title currently being edited.
+-   _props.icon_ `IconType`: An icon for the document, no default. (A default icon indicating the document post type is no longer used.)
+
+_Returns_
+
+-   `React.ReactNode`: The rendered DocumentBar component.
+
+### DocumentOutline
+
+Renders a document outline component.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.onSelect_ `Function`: Function to be called when an outline item is selected
+-   _props.hasOutlineItemsDisabled_ `boolean`: Indicates whether the outline items are disabled.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### DocumentOutlineCheck
+
+Component check if there are any headings (core/heading blocks) present in the document.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactElement`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactElement`: The component to be rendered or null if there are headings.
+
+### EditorHistoryRedo
+
+Renders the redo button for the editor history.
+
+_Parameters_
+
+-   _props_ `Object`: - Props.
+-   _ref_ `Ref`: - Forwarded ref.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### EditorHistoryUndo
+
+Renders the undo button for the editor history.
+
+_Parameters_
+
+-   _props_ `Object`: - Props.
+-   _ref_ `Ref`: - Forwarded ref.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### EditorKeyboardShortcuts
+
+Handles the keyboard shortcuts for the editor.
+
+It provides functionality for various keyboard shortcuts such as toggling editor mode, toggling distraction-free mode, undo/redo, saving the post, toggling list view, and toggling the sidebar.
+
+### EditorKeyboardShortcutsRegister
+
+Component for registering editor keyboard shortcuts.
+
+_Returns_
+
+-   `Element`: The component to be rendered.
+
+### EditorNotices
+
+This component renders the notices displayed in the editor. It displays pinned notices first, followed by dismissible
+
+_Usage_
+
+```jsx
+<EditorNotices />
+```
+
+_Returns_
+
+-   `React.ReactNode`: The rendered EditorNotices component.
+
+### EditorProvider
+
+This component establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor).
+
+It supports a large number of post types, including post, page, templates, custom post types, patterns, template parts.
+
+All modification and changes are performed to the `@wordpress/core-data` store.
+
+_Usage_
+
+```jsx
+<EditorProvider
+	post={ post }
+	settings={ settings }
+	__unstableTemplate={ template }
+>
+	{ children }
+</EditorProvider>
+```
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.post_ `[Object]`: The post object to edit. This is required.
+-   _props.\_\_unstableTemplate_ `[Object]`: The template object wrapper the edited post. This is optional and can only be used when the post type supports templates (like posts and pages).
+-   _props.settings_ `[Object]`: The settings object to use for the editor. This is optional and can be used to override the default settings.
+-   _props.children_ `[Element]`: Children elements for which the BlockEditorProvider context should apply. This is optional.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered EditorProvider component.
+
+### EditorSnackbars
+
+Renders the editor snackbars component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### EntitiesSavedStates
+
+Renders the component for managing saved states of entities.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.close_ `Function`: The function to close the dialog.
+-   _props.renderDialog_ `boolean`: Whether to render the component with modal dialog behavior.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### ErrorBoundary
+
+ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
+
+It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
+
+getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
+
+### FontSizePicker
+
+> **Deprecated** since 5.3, use `wp.blockEditor.FontSizePicker` instead.
+
+### getColorClassName
+
+> **Deprecated** since 5.3, use `wp.blockEditor.getColorClassName` instead.
+
+### getColorObjectByAttributeValues
+
+> **Deprecated** since 5.3, use `wp.blockEditor.getColorObjectByAttributeValues` instead.
+
+### getColorObjectByColorValue
+
+> **Deprecated** since 5.3, use `wp.blockEditor.getColorObjectByColorValue` instead.
+
+### getFontSize
+
+> **Deprecated** since 5.3, use `wp.blockEditor.getFontSize` instead.
+
+### getFontSizeClass
+
+> **Deprecated** since 5.3, use `wp.blockEditor.getFontSizeClass` instead.
+
+### getTemplatePartIcon
+
+Helper function to retrieve the corresponding icon by name.
+
+_Parameters_
+
+-   _iconName_ `string`: The name of the icon.
+
+_Returns_
+
+-   `Object`: The corresponding icon.
+
+### InnerBlocks
+
+> **Deprecated** since 5.3, use `wp.blockEditor.InnerBlocks` instead.
+
+### Inserter
+
+> **Deprecated** since 5.3, use `wp.blockEditor.Inserter` instead.
+
+### InspectorAdvancedControls
+
+> **Deprecated** since 5.3, use `wp.blockEditor.InspectorAdvancedControls` instead.
+
+### InspectorControls
+
+> **Deprecated** since 5.3, use `wp.blockEditor.InspectorControls` instead.
+
+### LocalAutosaveMonitor
+
+Monitors local autosaves of a post in the editor. It uses several hooks and functions to manage autosave behavior:
+
+-   `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+-   `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+-   `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+-   `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+
+The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
+
+### MediaPlaceholder
+
+> **Deprecated** since 5.3, use `wp.blockEditor.MediaPlaceholder` instead.
+
+### MediaUpload
+
+> **Deprecated** since 5.3, use `wp.blockEditor.MediaUpload` instead.
+
+### mediaUpload
+
+Upload a media file when the file upload button is activated. Wrapper around mediaUpload() that injects the current post ID.
+
+_Parameters_
+
+-   _$0_ `Object`: Parameters object passed to the function.
+-   _$0.additionalData_ `?Object`: Additional data to include in the request.
+-   _$0.allowedTypes_ `string`: Array with the types of media that can be uploaded, if unset all types are allowed.
+-   _$0.filesList_ `Array`: List of files.
+-   _$0.maxUploadFileSize_ `?number`: Maximum upload size in bytes allowed for the site.
+-   _$0.onError_ `Function`: Function called when an error happens.
+-   _$0.onFileChange_ `Function`: Function called each time a file or a temporary representation of the file is available.
+
+### MediaUploadCheck
+
+> **Deprecated** since 5.3, use `wp.blockEditor.MediaUploadCheck` instead.
+
+### MultiSelectScrollIntoView
+
+> **Deprecated** since 5.3, use `wp.blockEditor.MultiSelectScrollIntoView` instead.
+
+### NavigableToolbar
+
+> **Deprecated** since 5.3, use `wp.blockEditor.NavigableToolbar` instead.
+
+### ObserveTyping
+
+> **Deprecated** since 5.3, use `wp.blockEditor.ObserveTyping` instead.
+
+### PageAttributesCheck
+
+Wrapper component that renders its children only if the post type supports page attributes.
+
+_Parameters_
+
+-   _props_ `Object`: - The component props.
+-   _props.children_ `React.ReactElement`: - The child components to render.
+
+_Returns_
+
+-   `React.ReactElement`: The rendered child components or null if page attributes are not supported.
+
+### PageAttributesOrder
+
+Renders the Page Attributes Order component. A number input in an editor interface for setting the order of a given page. The component is now not used in core but was kept for backward compatibility.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PageAttributesPanel
+
+Renders the Page Attributes Panel component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PageAttributesParent
+
+Renders the Page Attributes Parent component. A dropdown menu in an editor interface for selecting the parent page of a given page.
+
+_Returns_
+
+-   `React.ReactNode`: The component to be rendered. Return null if post type is not hierarchical.
+
+### PageTemplate
+
+Provides a dropdown menu for selecting and managing post templates.
+
+The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered ClassicThemeControl component.
+
+### PanelColorSettings
+
+> **Deprecated** since 5.3, use `wp.blockEditor.PanelColorSettings` instead.
+
+### PlainText
+
+> **Deprecated** since 5.3, use `wp.blockEditor.PlainText` instead.
+
+### PluginBlockSettingsMenuItem
+
+Renders a new item in the block settings menu.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
+
+function doOnClick() {
+	// To be called when the user clicks the menu item.
+}
+
+function MyPluginBlockSettingsMenuItem() {
+	return React.createElement( PluginBlockSettingsMenuItem, {
+		allowedBlocks: [ 'core/paragraph' ],
+		icon: 'dashicon-name',
+		label: __( 'Menu item text' ),
+		onClick: doOnClick,
+	} );
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
+
+const doOnClick = () => {
+	// To be called when the user clicks the menu item.
+};
+
+const MyPluginBlockSettingsMenuItem = () => (
+	<PluginBlockSettingsMenuItem
+		allowedBlocks={ [ 'core/paragraph' ] }
+		icon="dashicon-name"
+		label={ __( 'Menu item text' ) }
+		onClick={ doOnClick }
+	/>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.allowedBlocks_ `[Array]`: An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.
+-   _props.label_ `string`: The menu item text.
+-   _props.onClick_ `Function`: Callback function to be executed when the user click the menu item.
+-   _props.small_ `[boolean]`: Whether to render the label or not.
+-   _props.role_ `[string]`: The ARIA role for the menu item.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PluginDocumentSettingPanel
+
+Renders items below the Status & Availability panel in the Document Sidebar.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var el = React.createElement;
+var __ = wp.i18n.__;
+var registerPlugin = wp.plugins.registerPlugin;
+var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
+
+function MyDocumentSettingPlugin() {
+	return el(
+		PluginDocumentSettingPanel,
+		{
+			className: 'my-document-setting-plugin',
+			title: 'My Panel',
+			name: 'my-panel',
+		},
+		__( 'My Document Setting Panel' )
+	);
+}
+
+registerPlugin( 'my-document-setting-plugin', {
+	render: MyDocumentSettingPlugin,
+} );
+```
+
+```jsx
+// Using ESNext syntax
+import { registerPlugin } from '@wordpress/plugins';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
+
+const MyDocumentSettingTest = () => (
+	<PluginDocumentSettingPanel
+		className="my-document-setting-plugin"
+		title="My Panel"
+		name="my-panel"
+	>
+		<p>My Document Setting Panel</p>
+	</PluginDocumentSettingPanel>
+);
+
+registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.name_ `string`: Required. A machine-friendly name for the panel.
+-   _props.className_ `[string]`: An optional class name added to the row.
+-   _props.title_ `[string]`: The title of the panel
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+-   _props.children_ `React.ReactNode`: Children to be rendered
+
+_Returns_
+
+-   `React.ReactNode`: The component to be rendered.
+
+### PluginMoreMenuItem
+
+Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. The text within the component appears as the menu item label.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
+var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+
+function onButtonClick() {
+	alert( 'Button clicked.' );
+}
+
+function MyButtonMoreMenuItem() {
+	return wp.element.createElement(
+		PluginMoreMenuItem,
+		{
+			icon: moreIcon,
+			onClick: onButtonClick,
+		},
+		__( 'My button title' )
+	);
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginMoreMenuItem } from '@wordpress/editor';
+import { more } from '@wordpress/icons';
+
+function onButtonClick() {
+	alert( 'Button clicked.' );
+}
+
+const MyButtonMoreMenuItem = () => (
+	<PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
+		{ __( 'My button title' ) }
+	</PluginMoreMenuItem>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.children_ `[React.ReactNode]`: Children to be rendered.
+-   _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+-   _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item.
+-   _props.other_ `[...*]`: Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PluginPostPublishPanel
+
+Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post).
+
+_Usage_
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginPostPublishPanel } from '@wordpress/editor';
+
+const MyPluginPostPublishPanel = () => (
+	<PluginPostPublishPanel
+		className="my-plugin-post-publish-panel"
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+		{ __( 'My panel content' ) }
+	</PluginPostPublishPanel>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.className_ `[string]`: An optional class name added to the panel.
+-   _props.title_ `[string]`: Title displayed at the top of the panel.
+-   _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+-   _props.children_ `React.ReactNode`: Children to be rendered
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PluginPostStatusInfo
+
+Renders a row in the Summary panel of the Document sidebar. It should be noted that this is named and implemented around the function it serves and not its location, which may change in future iterations.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;
+
+function MyPluginPostStatusInfo() {
+	return React.createElement(
+		PluginPostStatusInfo,
+		{
+			className: 'my-plugin-post-status-info',
+		},
+		__( 'My post status info' )
+	);
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginPostStatusInfo } from '@wordpress/editor';
+
+const MyPluginPostStatusInfo = () => (
+	<PluginPostStatusInfo className="my-plugin-post-status-info">
+		{ __( 'My post status info' ) }
+	</PluginPostStatusInfo>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.className_ `[string]`: An optional class name added to the row.
+-   _props.children_ `React.ReactNode`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PluginPrePublishPanel
+
+Renders provided content to the pre-publish side panel in the publish flow (side panel that opens when a user first pushes "Publish" from the main editor).
+
+_Usage_
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginPrePublishPanel } from '@wordpress/editor';
+
+const MyPluginPrePublishPanel = () => (
+	<PluginPrePublishPanel
+		className="my-plugin-pre-publish-panel"
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+		{ __( 'My panel content' ) }
+	</PluginPrePublishPanel>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.className_ `[string]`: An optional class name added to the panel.
+-   _props.title_ `[string]`: Title displayed at the top of the panel.
+-   _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+-   _props.children_ `React.ReactNode`: Children to be rendered
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PluginPreviewMenuItem
+
+Renders a menu item in the Preview dropdown, which can be used as a button or link depending on the props provided. The text within the component appears as the menu item label.
+
+_Usage_
+
+```jsx
+import { __ } from '@wordpress/i18n';
+import { PluginPreviewMenuItem } from '@wordpress/editor';
+import { external } from '@wordpress/icons';
+
+function onPreviewClick() {
+	// Handle preview action
+}
+
+const ExternalPreviewMenuItem = () => (
+	<PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }>
+		{ __( 'Preview in new tab' ) }
+	</PluginPreviewMenuItem>
+);
+registerPlugin( 'external-preview-menu-item', {
+	render: ExternalPreviewMenuItem,
+} );
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.children_ `[React.ReactNode]`: Children to be rendered.
+-   _props.href_ `[string]`: When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element.
+-   _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item.
+-   _props.other_ `[...*]`: Any additional props are passed through to the underlying MenuItem component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered menu item component.
+
+### PluginSidebar
+
+Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar. It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`. If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
+
+```js
+wp.data
+	.dispatch( 'core/edit-post' )
+	.openGeneralSidebar( 'plugin-name/sidebar-name' );
+```
+
+_Related_
+
+-   PluginSidebarMoreMenuItem
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var el = React.createElement;
+var PanelBody = wp.components.PanelBody;
+var PluginSidebar = wp.editor.PluginSidebar;
+var moreIcon = React.createElement( 'svg' ); //... svg element.
+
+function MyPluginSidebar() {
+	return el(
+		PluginSidebar,
+		{
+			name: 'my-sidebar',
+			title: 'My sidebar title',
+			icon: moreIcon,
+		},
+		el( PanelBody, {}, __( 'My sidebar content' ) )
+	);
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { PluginSidebar } from '@wordpress/editor';
+import { more } from '@wordpress/icons';
+
+const MyPluginSidebar = () => (
+	<PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }>
+		<PanelBody>{ __( 'My sidebar content' ) }</PanelBody>
+	</PluginSidebar>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Element props.
+-   _props.name_ `string`: A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
+-   _props.children_ `[React.ReactNode]`: Children to be rendered.
+-   _props.className_ `[string]`: An optional class name added to the sidebar body.
+-   _props.title_ `string`: Title displayed at the top of the sidebar.
+-   _props.isPinnable_ `[boolean]`: Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+
+### PluginSidebarMoreMenuItem
+
+Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to activate the corresponding `PluginSidebar` component. The text within the component appears as the menu item label.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var __ = wp.i18n.__;
+var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
+var moreIcon = React.createElement( 'svg' ); //... svg element.
+
+function MySidebarMoreMenuItem() {
+	return React.createElement(
+		PluginSidebarMoreMenuItem,
+		{
+			target: 'my-sidebar',
+			icon: moreIcon,
+		},
+		__( 'My sidebar title' )
+	);
+}
+```
+
+```jsx
+// Using ESNext syntax
+import { __ } from '@wordpress/i18n';
+import { PluginSidebarMoreMenuItem } from '@wordpress/editor';
+import { more } from '@wordpress/icons';
+
+const MySidebarMoreMenuItem = () => (
+	<PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }>
+		{ __( 'My sidebar title' ) }
+	</PluginSidebarMoreMenuItem>
+);
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.target_ `string`: A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
+-   _props.children_ `[React.ReactNode]`: Children to be rendered.
+-   _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostAuthor
+
+Renders the component for selecting the post author.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostAuthorCheck
+
+Wrapper component that renders its children only if the post type supports the author.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactNode`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactNode`: The component to be rendered. Return `null` if the post type doesn't supports the author or if there are no authors available.
+
+### PostAuthorPanel
+
+Renders the Post Author Panel component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostComments
+
+A form for managing comment status.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostComments component.
+
+### PostDiscussionPanel
+
+This component allows to update comment and pingback settings for the current post. Internally there are checks whether the current post has support for the above and if the `discussion-panel` panel is enabled.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostDiscussionPanel component.
+
+### PostExcerpt
+
+Renders an editable textarea for the post excerpt. Templates, template parts and patterns use the `excerpt` field as a description semantically. Additionally templates and template parts override the `excerpt` field as `description` in REST API. So this component handles proper labeling and updating the edited entity.
+
+_Parameters_
+
+-   _props_ `Object`: - Component props.
+-   _props.hideLabelFromVision_ `[boolean]`: - Whether to visually hide the textarea's label.
+-   _props.updateOnBlur_ `[boolean]`: - Whether to update the post on change or use local state and update on blur.
+
+### PostExcerptCheck
+
+Component for checking if the post type supports the excerpt field.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactNode`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostExcerptPanel
+
+Is rendered if the post type supports excerpts and allows editing the excerpt.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostExcerptPanel component.
+
+### PostFeaturedImage
+
+Renders the component for managing the featured image of a post.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.currentPostId_ `number`: ID of the current post.
+-   _props.featuredImageId_ `number`: ID of the featured image.
+-   _props.onUpdateImage_ `Function`: Function to call when the image is updated.
+-   _props.onRemoveImage_ `Function`: Function to call when the image is removed.
+-   _props.media_ `Object`: The media object representing the featured image.
+-   _props.postType_ `string`: Post type.
+-   _props.noticeUI_ `Element`: UI for displaying notices.
+-   _props.noticeOperations_ `Object`: Operations for managing notices.
+
+_Returns_
+
+-   `Element`: Component to be rendered .
+
+### PostFeaturedImageCheck
+
+Wrapper component that renders its children only if the post type supports a featured image and the theme supports post thumbnails.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactNode`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostFeaturedImagePanel
+
+Renders the panel for the post featured image.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.withPanelBody_ `boolean`: Whether to include the panel body. Default true.
+
+_Returns_
+
+-   `React.ReactNode`: The component to be rendered. Return Null if the editor panel is disabled for featured image.
+
+### PostFormat
+
+`PostFormat` a component that allows changing the post format while also providing a suggestion for the current post.
+
+_Usage_
+
+```jsx
+<PostFormat />
+```
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostFormat component.
+
+### PostFormatCheck
+
+Component check if there are any post formats.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactNode`: The child elements to render.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component or null if post formats are disabled.
+
+### PostLastRevision
+
+Renders the component for displaying the last revision of a post.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostLastRevisionCheck
+
+Wrapper component that renders its children if the post has more than one revision.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactNode`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactNode`: Rendered child components if post has more than one revision, otherwise null.
+
+### PostLastRevisionPanel
+
+Renders the panel for displaying the last revision of a post.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostLockedModal
+
+A modal component that is displayed when a post is locked for editing by another user. The modal provides information about the lock status and options to take over or exit the editor.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostLockedModal component.
+
+### PostPendingStatus
+
+A component for displaying and toggling the pending status of a post.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostPendingStatusCheck
+
+This component checks the publishing status of the current post. If the post is already published or the user doesn't have the capability to publish, it returns null.
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.children_ `React.ReactElement`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactElement`: The rendered child elements or null if the post is already published or the user doesn't have the capability to publish.
+
+### PostPingbacks
+
+Renders a control for enabling or disabling pingbacks and trackbacks in a WordPress post.
+
+### PostPreviewButton
+
+Renders a button that opens a new window or tab for the preview, writes the interstitial message to this window, and then navigates to the actual preview link. The button is not rendered if the post is not viewable and disabled if the post is not saveable.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.className_ `string`: The class name for the button.
+-   _props.textContent_ `string`: The text content for the button.
+-   _props.forceIsAutosaveable_ `boolean`: Whether to force autosave.
+-   _props.role_ `string`: The role attribute for the button.
+-   _props.onPreview_ `Function`: The callback function for preview event.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered button component.
+
+### PostPublishButton
+
+Renders the publish button.
+
+### PostPublishButtonLabel
+
+Renders the label for the publish button.
+
+_Returns_
+
+-   `string`: The label for the publish button.
+
+### PostPublishPanel
+
+Renders a panel for publishing a post.
+
+### PostSavedState
+
+Component showing whether the post is saved or not and providing save buttons.
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.forceIsDirty_ `?boolean`: Whether to force the post to be marked as dirty.
+
+_Returns_
+
+-   `import('react').ComponentType`: The component.
+
+### PostSchedule
+
+Renders the PostSchedule component. It allows the user to schedule a post.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.onClose_ `Function`: Function to close the component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostScheduleCheck
+
+Wrapper component that renders its children only if post has a publish action.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactElement`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactElement`: - The component to be rendered or null if there is no publish action.
+
+### PostScheduleLabel
+
+Renders the PostScheduleLabel component.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostSchedulePanel
+
+Renders the Post Schedule Panel component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostSticky
+
+Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostStickyCheck
+
+Wrapper component that renders its children only if post has a sticky action.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactElement`: Children to be rendered.
+
+_Returns_
+
+-   `React.ReactElement`: The component to be rendered or null if post type is not 'post' or hasStickyAction is false.
+
+### PostSwitchToDraftButton
+
+Renders a button component that allows the user to switch a post to draft status.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostSyncStatus
+
+Renders the sync status of a post.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered sync status component.
+
+### PostTaxonomies
+
+Renders the taxonomies associated with a post.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.taxonomyWrapper_ `Function`: The wrapper function for each taxonomy component.
+
+_Returns_
+
+-   `Array`: An array of JSX elements representing the visible taxonomies.
+
+### PostTaxonomiesCheck
+
+Renders the children components only if the current post type has taxonomies.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactNode`: The children components to render.
+
+_Returns_
+
+-   `React.ReactElement`: The rendered children components or null if the current post type has no taxonomies.
+
+### PostTaxonomiesFlatTermSelector
+
+Renders a flat term selector component.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.slug_ `string`: The slug of the taxonomy.
+-   _props.\_\_nextHasNoMarginBottom_ `boolean`: Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
+
+_Returns_
+
+-   `React.ReactNode`: The rendered flat term selector component.
+
+### PostTaxonomiesHierarchicalTermSelector
+
+Hierarchical term selector.
+
+_Parameters_
+
+-   _props_ `Object`: Component props.
+-   _props.slug_ `string`: Taxonomy slug.
+
+_Returns_
+
+-   `Element`: Hierarchical term selector component.
+
+### PostTaxonomiesPanel
+
+Component that renders the post taxonomies panel.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostTemplatePanel
+
+Displays the template controls based on the current editor settings and user permissions.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostTemplatePanel component.
+
+### PostTextEditor
+
+Displays the Post Text Editor along with content in Visual and Text mode.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostTextEditor component.
+
+### PostTitle
+
+Renders the `PostTitle` component.
+
+_Parameters_
+
+-   \_\_\_ `Object`: Unused parameter.
+-   _forwardedRef_ `Element`: Forwarded ref for the component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostTitle component.
+
+### PostTitleRaw
+
+Undocumented declaration.
+
+### PostTrash
+
+Displays the Post Trash Button and Confirm Dialog in the Editor.
+
+_Parameters_
+
+-   _An_ `?{onActionPerformed: Object}`: object containing the onActionPerformed function.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostTrash component.
+
+### PostTrashCheck
+
+Wrapper component that renders its children only if the post can be trashed.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactElement`: The child components.
+
+_Returns_
+
+-   `React.ReactElement | null`: The rendered child components or null if the post can't be trashed.
+
+### PostTypeSupportCheck
+
+A component which renders its own children only if the current editor post type supports one of the given `supportKeys` prop.
+
+_Parameters_
+
+-   _props_ `Object`: Props.
+-   _props.children_ `React.ReactElement`: Children to be rendered if post type supports.
+-   _props.supportKeys_ `(string|string[])`: String or string array of keys to test.
+
+_Returns_
+
+-   `React.ReactElement`: The component to be rendered.
+
+### PostURL
+
+Renders the `PostURL` component.
+
+_Usage_
+
+```jsx
+<PostURL />
+```
+
+_Parameters_
+
+-   _props_ `{ onClose: () => void }`: The props for the component.
+-   _props.onClose_ `() => void`: Callback function to be executed when the popover is closed.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostURL component.
+
+### PostURLCheck
+
+Check if the post URL is valid and visible.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactElement`: The child components.
+
+_Returns_
+
+-   `React.ReactElement`: The child components if the post URL is valid and visible, otherwise null.
+
+### PostURLLabel
+
+Represents a label component for a post URL.
+
+_Returns_
+
+-   `React.ReactNode`: The PostURLLabel component.
+
+### PostURLPanel
+
+Renders the `PostURLPanel` component.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered PostURLPanel component.
+
+### PostVisibility
+
+Allows users to set the visibility of a post.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.onClose_ `Function`: Function to call when the popover is closed.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostVisibilityCheck
+
+Determines if the current post can be edited (published) and passes this information to the provided render function.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.render_ `Function`: Function to render the component. Receives an object with a `canEdit` property.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered component.
+
+### PostVisibilityLabel
+
+Returns the label for the current post visibility setting.
+
+_Returns_
+
+-   `string`: Post visibility label.
+
+### privateApis
+
+Undocumented declaration.
+
+### registerEntityAction
+
+Registers a new DataViews action.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _config_ `Action`: Action configuration.
+
+### registerEntityField
+
+Registers a new DataViews field.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _config_ `Field`: Field configuration.
+
+### RichText
+
+> **Deprecated** since 5.3, use `wp.blockEditor.RichText` instead.
+
+### RichTextShortcut
+
+> **Deprecated** since 5.3, use `wp.blockEditor.RichTextShortcut` instead.
+
+### RichTextToolbarButton
+
+> **Deprecated** since 5.3, use `wp.blockEditor.RichTextToolbarButton` instead.
+
+### ServerSideRender
+
+Undocumented declaration.
+
+### SkipToSelectedBlock
+
+> **Deprecated** since 5.3, use `wp.blockEditor.SkipToSelectedBlock` instead.
+
+### store
+
+Store definition for the editor namespace.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore>
+
+### storeConfig
+
+Post editor data store configuration.
+
+_Related_
+
+-   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore>
+
+### TableOfContents
+
+Renders a table of contents component.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.hasOutlineItemsDisabled_ `boolean`: Whether outline items are disabled.
+-   _props.repositionDropdown_ `boolean`: Whether to reposition the dropdown.
+-   _ref_ `Element.ref`: The component's ref.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered table of contents component.
+
+### TextEditorGlobalKeyboardShortcuts
+
+Handles the keyboard shortcuts for the editor.
+
+It provides functionality for various keyboard shortcuts such as toggling editor mode, toggling distraction-free mode, undo/redo, saving the post, toggling list view, and toggling the sidebar.
+
+### ThemeSupportCheck
+
+Checks if the current theme supports specific features and renders the children if supported.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.children_ `React.ReactElement`: The children to render if the theme supports the specified features.
+-   _props.supportKeys_ `string|string[]`: The key(s) of the theme support(s) to check.
+
+_Returns_
+
+-   `React.ReactElement`: The rendered children if the theme supports the specified features, otherwise null.
+
+### TimeToRead
+
+Component for showing Time To Read in Content.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered TimeToRead component.
+
+### transformStyles
+
+Undocumented declaration.
+
+### unregisterEntityAction
+
+Unregisters a DataViews action.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _actionId_ `string`: Action ID.
+
+### unregisterEntityField
+
+Unregisters a DataViews field.
+
+This is an experimental API and is subject to change. it's only available in the Gutenberg plugin for now.
+
+_Parameters_
+
+-   _kind_ `string`: Entity kind.
+-   _name_ `string`: Entity name.
+-   _fieldId_ `string`: Field ID.
+
+### UnsavedChangesWarning
+
+Warns the user if there are unsaved changes before leaving the editor. Compatible with Post Editor and Site Editor.
+
+_Returns_
+
+-   `React.ReactNode`: The component.
+
+### URLInput
+
+> **Deprecated** since 5.3, use `wp.blockEditor.URLInput` instead.
+
+### URLInputButton
+
+> **Deprecated** since 5.3, use `wp.blockEditor.URLInputButton` instead.
+
+### URLPopover
+
+> **Deprecated** since 5.3, use `wp.blockEditor.URLPopover` instead.
+
+### useEntitiesSavedStatesIsDirty
+
+Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.
+
+_Returns_
+
+-   `Object`: An object containing the following properties: - dirtyEntityRecords: An array of dirty entity records. - isDirty: A boolean indicating if there are any dirty entity records. - setUnselectedEntities: A function to set the unselected entities. - unselectedEntities: An array of unselected entities.
+
+### usePostScheduleLabel
+
+Custom hook to get the label for post schedule.
+
+_Parameters_
+
+-   _options_ `Object`: Options for the hook.
+-   _options.full_ `boolean`: Whether to get the full label or not. Default is false.
+
+_Returns_
+
+-   `string`: The label for post schedule.
+
+### usePostURLLabel
+
+Custom hook to get the label for the post URL.
+
+_Returns_
+
+-   `string`: The filtered and decoded post URL label.
+
+### usePostVisibilityLabel
+
+Get the label for the current post visibility setting.
+
+_Returns_
+
+-   `string`: Post visibility label.
+
+### userAutocompleter
+
+A user mentions completer.
+
+_Type_
+
+-   `Object`
+
+### VisualEditorGlobalKeyboardShortcuts
+
+Handles the keyboard shortcuts for the editor.
+
+It provides functionality for various keyboard shortcuts such as toggling editor mode, toggling distraction-free mode, undo/redo, saving the post, toggling list view, and toggling the sidebar.
+
+### Warning
+
+> **Deprecated** since 5.3, use `wp.blockEditor.Warning` instead.
+
+### withColorContext
+
+> **Deprecated** since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+
+### withColors
+
+> **Deprecated** since 5.3, use `wp.blockEditor.withColors` instead.
+
+### withFontSizes
+
+> **Deprecated** since 5.3, use `wp.blockEditor.withFontSizes` instead.
+
+### WordCount
+
+Renders the word count of the post content.
+
+_Returns_
+
+-   `React.ReactNode`: The rendered WordCount component.
+
+### WritingFlow
+
+> **Deprecated** since 5.3, use `wp.blockEditor.WritingFlow` instead.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
 ## 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.
diff --git a/packages/editor/package.json b/packages/editor/package.json
index ca46a089a976fe..59d3caded3d322 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.21.0",
+	"version": "14.13.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,57 +19,71 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+		"{src,build,build-module}/{index.js,store/index.js,hooks/**,bindings/**}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/blob": "file:../blob",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/date": "file:../date",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/dom": "file:../dom",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
-		"@wordpress/keycodes": "file:../keycodes",
-		"@wordpress/media-utils": "file:../media-utils",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/reusable-blocks": "file:../reusable-blocks",
-		"@wordpress/rich-text": "file:../rich-text",
-		"@wordpress/server-side-render": "file:../server-side-render",
-		"@wordpress/url": "file:../url",
-		"@wordpress/wordcount": "file:../wordcount",
-		"classnames": "^2.3.1",
-		"date-fns": "^2.28.0",
-		"escape-html": "^1.0.3",
-		"lodash": "^4.17.21",
-		"memize": "^1.1.0",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/element": "*",
+		"@wordpress/fields": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/interface": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/server-side-render": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"@wordpress/wordcount": "*",
+		"change-case": "^4.1.2",
+		"client-zip": "^2.4.5",
+		"clsx": "^2.1.1",
+		"date-fns": "^3.6.0",
+		"deepmerge": "^4.3.0",
+		"fast-deep-equal": "^3.1.3",
+		"is-plain-object": "^5.0.0",
+		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.0",
-		"remove-accents": "^0.4.2"
+		"remove-accents": "^0.5.0",
+		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/editor/src/bindings/api.js b/packages/editor/src/bindings/api.js
new file mode 100644
index 00000000000000..2d32d76abbc3bc
--- /dev/null
+++ b/packages/editor/src/bindings/api.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockBindingsSource } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import patternOverrides from './pattern-overrides';
+import postMeta from './post-meta';
+
+/**
+ * Function to register core block bindings sources provided by the editor.
+ *
+ * @example
+ * ```js
+ * import { registerCoreBlockBindingsSources } from '@wordpress/editor';
+ *
+ * registerCoreBlockBindingsSources();
+ * ```
+ */
+export function registerCoreBlockBindingsSources() {
+	registerBlockBindingsSource( patternOverrides );
+	registerBlockBindingsSource( postMeta );
+}
diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js
new file mode 100644
index 00000000000000..baa1f72f47694b
--- /dev/null
+++ b/packages/editor/src/bindings/pattern-overrides.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const CONTENT = 'content';
+
+export default {
+	name: 'core/pattern-overrides',
+	getValues( { select, clientId, context, bindings } ) {
+		const patternOverridesContent = context[ 'pattern/overrides' ];
+		const { getBlockAttributes } = select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+
+		const overridesValues = {};
+		for ( const attributeName of Object.keys( bindings ) ) {
+			const overridableValue =
+				patternOverridesContent?.[
+					currentBlockAttributes?.metadata?.name
+				]?.[ attributeName ];
+
+			// If it has not been overriden, return the original value.
+			// Check undefined because empty string is a valid value.
+			if ( overridableValue === undefined ) {
+				overridesValues[ attributeName ] =
+					currentBlockAttributes[ attributeName ];
+				continue;
+			} else {
+				overridesValues[ attributeName ] =
+					overridableValue === '' ? undefined : overridableValue;
+			}
+		}
+		return overridesValues;
+	},
+	setValues( { select, dispatch, clientId, bindings } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
+			select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const blockName = currentBlockAttributes?.metadata?.name;
+		if ( ! blockName ) {
+			return;
+		}
+
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		// Extract the updated attributes from the source bindings.
+		const attributes = Object.entries( bindings ).reduce(
+			( attrs, [ key, { newValue } ] ) => {
+				attrs[ key ] = newValue;
+				return attrs;
+			},
+			{}
+		);
+
+		// If there is no pattern client ID, sync blocks with the same name and same attributes.
+		if ( ! patternClientId ) {
+			const syncBlocksWithSameName = ( blocks ) => {
+				for ( const block of blocks ) {
+					if ( block.attributes?.metadata?.name === blockName ) {
+						dispatch( blockEditorStore ).updateBlockAttributes(
+							block.clientId,
+							attributes
+						);
+					}
+					syncBlocksWithSameName( block.innerBlocks );
+				}
+			};
+
+			syncBlocksWithSameName( getBlocks() );
+			return;
+		}
+		const currentBindingValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ];
+
+		dispatch( blockEditorStore ).updateBlockAttributes( patternClientId, {
+			[ CONTENT ]: {
+				...currentBindingValue,
+				[ blockName ]: {
+					...currentBindingValue?.[ blockName ],
+					...Object.entries( attributes ).reduce(
+						( acc, [ key, value ] ) => {
+							// TODO: We need a way to represent `undefined` in the serialized overrides.
+							// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
+							// We use an empty string to represent undefined for now until
+							// we support a richer format for overrides and the block bindings API.
+							acc[ key ] = value === undefined ? '' : value;
+							return acc;
+						},
+						{}
+					),
+				},
+			},
+		} );
+	},
+	canUserEditValue: () => true,
+};
diff --git a/packages/editor/src/bindings/post-meta.js b/packages/editor/src/bindings/post-meta.js
new file mode 100644
index 00000000000000..fcd068ac21d8ab
--- /dev/null
+++ b/packages/editor/src/bindings/post-meta.js
@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreDataStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Gets a list of post meta fields with their values and labels
+ * to be consumed in the needed callbacks.
+ * If the value is not available based on context, like in templates,
+ * it falls back to the default value, label, or key.
+ *
+ * @param {Object} select  The select function from the data store.
+ * @param {Object} context The context provided.
+ * @return {Object} List of post meta fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ *     field_1_key: {
+ *         label: 'Field 1 Label',
+ *         value: 'Field 1 Value',
+ *     },
+ *     field_2_key: {
+ *         label: 'Field 2 Label',
+ *         value: 'Field 2 Value',
+ *     },
+ *     ...
+ * }
+ * ```
+ */
+function getPostMetaFields( select, context ) {
+	const { getEditedEntityRecord } = select( coreDataStore );
+	const { getRegisteredPostMeta } = unlock( select( coreDataStore ) );
+
+	let entityMetaValues;
+	// Try to get the current entity meta values.
+	if ( context?.postType && context?.postId ) {
+		entityMetaValues = getEditedEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId
+		).meta;
+	}
+
+	const registeredFields = getRegisteredPostMeta( context?.postType );
+	const metaFields = {};
+	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+		// Don't include footnotes or private fields.
+		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+			metaFields[ key ] = {
+				label: props.title || key,
+				value:
+					// When using the entity value, an empty string IS a valid value.
+					entityMetaValues?.[ key ] ??
+					// When using the default, an empty string IS NOT a valid value.
+					( props.default || undefined ),
+				type: props.type,
+			};
+		}
+	} );
+
+	if ( ! Object.keys( metaFields || {} ).length ) {
+		return null;
+	}
+
+	return metaFields;
+}
+
+export default {
+	name: 'core/post-meta',
+	getValues( { select, context, bindings } ) {
+		const metaFields = getPostMetaFields( select, context );
+
+		const newValues = {};
+		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
+			// Use the value, the field label, or the field key.
+			const fieldKey = source.args.key;
+			const { value: fieldValue, label: fieldLabel } =
+				metaFields?.[ fieldKey ] || {};
+			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
+		}
+		return newValues;
+	},
+	setValues( { dispatch, context, bindings } ) {
+		const newMeta = {};
+		Object.values( bindings ).forEach( ( { args, newValue } ) => {
+			newMeta[ args.key ] = newValue;
+		} );
+
+		dispatch( coreDataStore ).editEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId,
+			{
+				meta: newMeta,
+			}
+		);
+	},
+	canUserEditValue( { select, context, args } ) {
+		// Lock editing in query loop.
+		if ( context?.query || context?.queryId ) {
+			return false;
+		}
+
+		// Lock editing when `postType` is not defined.
+		if ( ! context?.postType ) {
+			return false;
+		}
+
+		const fieldValue = getPostMetaFields( select, context )?.[ args.key ]
+			?.value;
+		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
+		if ( fieldValue === undefined ) {
+			return false;
+		}
+		// Check that custom fields metabox is not enabled.
+		const areCustomFieldsEnabled =
+			select( editorStore ).getEditorSettings().enableCustomFields;
+		if ( areCustomFieldsEnabled ) {
+			return false;
+		}
+
+		// Check that the user has the capability to edit post meta.
+		const canUserEdit = select( coreDataStore ).canUser( 'update', {
+			kind: 'postType',
+			name: context?.postType,
+			id: context?.postId,
+		} );
+		if ( ! canUserEdit ) {
+			return false;
+		}
+
+		return true;
+	},
+	getFieldsList( { select, context } ) {
+		return getPostMetaFields( select, context );
+	},
+};
diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss
index 009079a9a31736..ca3159ee4ac825 100644
--- a/packages/editor/src/components/autocompleters/style.scss
+++ b/packages/editor/src/components/autocompleters/style.scss
@@ -1,8 +1,7 @@
 .editor-autocompleters__user {
 	.editor-autocompleters__no-avatar::before {
-		/* stylelint-disable */
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 		font: normal 20px/1 dashicons;
-		/* stylelint-enable */
 		content: "\f110";
 		margin-right: 5px;
 		vertical-align: middle;
diff --git a/packages/editor/src/components/autocompleters/user.js b/packages/editor/src/components/autocompleters/user.js
index e176d3fb6b05a2..aed226ff4a50da 100644
--- a/packages/editor/src/components/autocompleters/user.js
+++ b/packages/editor/src/components/autocompleters/user.js
@@ -5,8 +5,6 @@ import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
-
 export function getUserLabel( user ) {
 	const avatar =
 		user.avatar_urls && user.avatar_urls[ 24 ] ? (
@@ -35,7 +33,7 @@ export function getUserLabel( user ) {
 /**
  * A user mentions completer.
  *
- * @type {WPCompleter}
+ * @type {Object}
  */
 export default {
 	name: 'users',
diff --git a/packages/editor/src/components/autosave-monitor/index.js b/packages/editor/src/components/autosave-monitor/index.js
index 33637310ab9483..2800b4bf0fc1f1 100644
--- a/packages/editor/src/components/autosave-monitor/index.js
+++ b/packages/editor/src/components/autosave-monitor/index.js
@@ -11,17 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-/**
- * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.
- *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
- *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- */
 export class AutosaveMonitor extends Component {
 	constructor( props ) {
 		super( props );
@@ -91,6 +80,29 @@ export class AutosaveMonitor extends Component {
 	}
 }
 
+/**
+ * Monitors the changes made to the edited post and triggers autosave if necessary.
+ *
+ * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
+ * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
+ * the specific way of detecting changes.
+ *
+ * There are two caveats:
+ * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+ * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
+ *
+ * @param {Object}   props                       - The properties passed to the component.
+ * @param {Function} props.autosave              - The function to call when changes need to be saved.
+ * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
+ * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
+ * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+ * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ *
+ * @example
+ * ```jsx
+ * <AutosaveMonitor interval={30000} />
+ * ```
+ */
 export default compose( [
 	withSelect( ( select, ownProps ) => {
 		const { getReferenceByDistinctEdits } = select( coreStore );
diff --git a/packages/editor/src/components/autosave-monitor/test/index.js b/packages/editor/src/components/autosave-monitor/test/index.js
index ab56ecf14deabc..0bb68998162ced 100644
--- a/packages/editor/src/components/autosave-monitor/test/index.js
+++ b/packages/editor/src/components/autosave-monitor/test/index.js
@@ -8,10 +8,13 @@ import { render } from '@testing-library/react';
  */
 import { AutosaveMonitor } from '../';
 
+jest.useFakeTimers();
+jest.spyOn( global, 'clearTimeout' );
+jest.spyOn( global, 'setTimeout' );
+
 describe( 'AutosaveMonitor', () => {
 	let setAutosaveTimerSpy;
 	beforeEach( () => {
-		jest.useFakeTimers( 'legacy' );
 		setAutosaveTimerSpy = jest.spyOn(
 			AutosaveMonitor.prototype,
 			'setAutosaveTimer'
@@ -19,9 +22,6 @@ describe( 'AutosaveMonitor', () => {
 	} );
 
 	afterEach( () => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-
 		setAutosaveTimerSpy.mockClear();
 	} );
 
@@ -174,7 +174,10 @@ describe( 'AutosaveMonitor', () => {
 
 		jest.runOnlyPendingTimers();
 
-		expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
+		expect( setTimeout ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			5000
+		);
 	} );
 
 	it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
@@ -186,6 +189,9 @@ describe( 'AutosaveMonitor', () => {
 
 		jest.runOnlyPendingTimers();
 
-		expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
+		expect( setTimeout ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			1000
+		);
 	} );
 } );
diff --git a/packages/editor/src/components/block-removal-warnings/index.js b/packages/editor/src/components/block-removal-warnings/index.js
new file mode 100644
index 00000000000000..aa6dad0bc44d33
--- /dev/null
+++ b/packages/editor/src/components/block-removal-warnings/index.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+
+import { _n } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
+
+// Prevent accidental removal of certain blocks, asking the user for confirmation first.
+const TEMPLATE_BLOCKS = [
+	'core/post-content',
+	'core/post-template',
+	'core/query',
+];
+const BLOCK_REMOVAL_RULES = [
+	{
+		// Template blocks.
+		// The warning is only shown when a user manipulates templates or template parts.
+		postTypes: [ 'wp_template', 'wp_template_part' ],
+		callback( removedBlocks ) {
+			const removedTemplateBlocks = removedBlocks.filter( ( { name } ) =>
+				TEMPLATE_BLOCKS.includes( name )
+			);
+			if ( removedTemplateBlocks.length ) {
+				return _n(
+					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
+					'Some of the deleted blocks will stop your post or page content from displaying on this template. It is not recommended.',
+					removedBlocks.length
+				);
+			}
+		},
+	},
+	{
+		// Pattern overrides.
+		// The warning is only shown when the user edits a pattern.
+		postTypes: [ 'wp_block' ],
+		callback( removedBlocks ) {
+			const removedBlocksWithOverrides = removedBlocks.filter(
+				( { attributes } ) =>
+					attributes?.metadata?.bindings &&
+					Object.values( attributes.metadata.bindings ).some(
+						( binding ) =>
+							binding.source === 'core/pattern-overrides'
+					)
+			);
+			if ( removedBlocksWithOverrides.length ) {
+				return _n(
+					'The deleted block allows instance overrides. Removing it may result in content not displaying where this pattern is used. Are you sure you want to proceed?',
+					'Some of the deleted blocks allow instance overrides. Removing them may result in content not displaying where this pattern is used. Are you sure you want to proceed?',
+					removedBlocks.length
+				);
+			}
+		},
+	},
+];
+
+export default function BlockRemovalWarnings() {
+	const currentPostType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+
+	const removalRulesForPostType = useMemo(
+		() =>
+			BLOCK_REMOVAL_RULES.filter( ( rule ) =>
+				rule.postTypes.includes( currentPostType )
+			),
+		[ currentPostType ]
+	);
+
+	// `BlockRemovalWarnings` is rendered in the editor provider, a shared component
+	// across react native and web. However, `BlockRemovalWarningModal` is web only.
+	// Check it exists before trying to render it.
+	if ( ! BlockRemovalWarningModal ) {
+		return null;
+	}
+
+	if ( ! removalRulesForPostType ) {
+		return null;
+	}
+
+	return <BlockRemovalWarningModal rules={ removalRulesForPostType } />;
+}
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
new file mode 100644
index 00000000000000..af0e9b30ae83b4
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -0,0 +1,185 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const postContentBlocks = usePostContentBlocks();
+	const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
+		( select ) => {
+			const {
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+				getBlockParents,
+			} = select( blockEditorStore );
+			const { getCurrentTemplateId, getRenderingMode } =
+				select( editorStore );
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else if (
+				getRenderingMode() === 'template-locked' &&
+				! getBlockParents( clientId ).some( ( parent ) =>
+					postContentBlocks.includes( parent )
+				)
+			) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					getCurrentTemplateId()
+				);
+			}
+			if ( ! record ) {
+				return {};
+			}
+			const _canEditTemplates = select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			return {
+				canEditTemplates: _canEditTemplates,
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId, postContentBlocks ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+	let helpText = isPattern
+		? __(
+				'Edit the pattern to move, delete, or make further changes to this block.'
+		  )
+		: __(
+				'Edit the template to move, delete, or make further changes to this block.'
+		  );
+
+	if ( ! canEditTemplates ) {
+		helpText = __(
+			'Only users with permissions to edit the template can move or delete this block'
+		);
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+					disabled={ ! canEditTemplates }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ helpText }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const blockDisplayInformation =
+		useBlockDisplayInformation( contentLockingParent );
+	const blockEditorActions = useDispatch( blockEditorStore );
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	const { modifyContentLockBlock } = unlock( blockEditorActions );
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ _x( 'Unlock', 'Unlock content locked blocks' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js
new file mode 100644
index 00000000000000..11cebce87bbba5
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.native.js
@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}
diff --git a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js
similarity index 93%
rename from packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
rename to packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js
index f0390267259b66..df1e75d2d0e8b5 100644
--- a/packages/edit-post/src/components/block-settings-menu/plugin-block-settings-menu-item.js
+++ b/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js
@@ -38,14 +38,14 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
  * ```js
  * // Using ES5 syntax
  * var __ = wp.i18n.__;
- * var PluginBlockSettingsMenuItem = wp.editPost.PluginBlockSettingsMenuItem;
+ * var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
  *
  * function doOnClick(){
  * 	// To be called when the user clicks the menu item.
  * }
  *
  * function MyPluginBlockSettingsMenuItem() {
- * 	return wp.element.createElement(
+ * 	return React.createElement(
  * 		PluginBlockSettingsMenuItem,
  * 		{
  * 			allowedBlocks: [ 'core/paragraph' ],
@@ -61,7 +61,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
  * ```jsx
  * // Using ESNext syntax
  * import { __ } from '@wordpress/i18n';
- * import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post';
+ * import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
  *
  * const doOnClick = ( ) => {
  *     // To be called when the user clicks the menu item.
@@ -76,7 +76,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
  * );
  * ```
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginBlockSettingsMenuItem = ( {
 	allowedBlocks,
diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss
new file mode 100644
index 00000000000000..53fa391d28ef04
--- /dev/null
+++ b/packages/editor/src/components/block-settings-menu/style.scss
@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}
diff --git a/packages/editor/src/components/blog-title/index.js b/packages/editor/src/components/blog-title/index.js
new file mode 100644
index 00000000000000..aee2a7f049eb09
--- /dev/null
+++ b/packages/editor/src/components/blog-title/index.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { debounce } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	Button,
+	Dropdown,
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const EMPTY_OBJECT = {};
+
+export default function BlogTitle() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPageTitle, postsPageId, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord, canUser } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+			const _postsPageRecord = siteSettings?.page_for_posts
+				? getEditedEntityRecord(
+						'postType',
+						'page',
+						siteSettings?.page_for_posts
+				  )
+				: EMPTY_OBJECT;
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			return {
+				postsPageId: _postsPageRecord?.id,
+				postsPageTitle: _postsPageRecord?.title,
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if (
+		! isTemplate ||
+		! [ 'home', 'index' ].includes( postSlug ) ||
+		! postsPageId
+	) {
+		return null;
+	}
+
+	const setPostsPageTitle = ( newValue ) => {
+		editEntityRecord( 'postType', 'page', postsPageId, {
+			title: newValue,
+		} );
+	};
+	const decodedTitle = decodeEntities( postsPageTitle );
+	return (
+		<PostPanelRow label={ __( 'Blog title' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-blog-title-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ sprintf(
+							// translators: %s: Current post link.
+							__( 'Change blog title: %s' ),
+							decodedTitle
+						) }
+						onClick={ onToggle }
+					>
+						{ decodedTitle }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Blog title' ) }
+							onClose={ onClose }
+						/>
+						<InputControl
+							placeholder={ __( 'No title' ) }
+							size="__unstable-large"
+							value={ postsPageTitle }
+							onChange={ debounce( setPostsPageTitle, 300 ) }
+							label={ __( 'Blog title' ) }
+							help={ __(
+								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/blog-title/style.scss b/packages/editor/src/components/blog-title/style.scss
new file mode 100644
index 00000000000000..164e82979e0b30
--- /dev/null
+++ b/packages/editor/src/components/blog-title/style.scss
@@ -0,0 +1,4 @@
+.editor-blog-title-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/character-count/index.js b/packages/editor/src/components/character-count/index.js
index e12ff1a3cbce7a..2fb165cdc9badb 100644
--- a/packages/editor/src/components/character-count/index.js
+++ b/packages/editor/src/components/character-count/index.js
@@ -9,6 +9,11 @@ import { count as characterCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the character count of the post content.
+ *
+ * @return {number} The character count.
+ */
 export default function CharacterCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
new file mode 100644
index 00000000000000..2330017ac5db53
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
+
+/**
+ * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
+ *
+ * @param {Object}   props                     - The component props.
+ * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
+ * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
+ * @param {Function} props.setShowCommentBoard - The function to delete the comment.
+ * @return {React.ReactNode} The rendered comment input UI.
+ */
+export function AddComment( {
+	onSubmit,
+	showCommentBoard,
+	setShowCommentBoard,
+} ) {
+	const { clientId, blockCommentId } = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		const selectedBlock = getSelectedBlock();
+		return {
+			clientId: selectedBlock?.clientId,
+			blockCommentId: selectedBlock?.attributes?.blockCommentId,
+		};
+	} );
+
+	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
+		return null;
+	}
+
+	return (
+		<VStack
+			spacing="3"
+			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
+		>
+			<HStack alignment="left" spacing="3">
+				<CommentAuthorInfo />
+			</HStack>
+			<CommentForm
+				onSubmit={ ( inputComment ) => {
+					onSubmit( inputComment );
+				} }
+				onCancel={ () => {
+					setShowCommentBoard( false );
+				} }
+				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
+			/>
+		</VStack>
+	);
+}
diff --git a/packages/editor/src/components/collab-sidebar/comment-author-info.js b/packages/editor/src/components/collab-sidebar/comment-author-info.js
new file mode 100644
index 00000000000000..d8b5f72a2fc25f
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-author-info.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props        - Component properties.
+ * @param {string} props.avatar - URL of the author's avatar.
+ * @param {string} props.name   - Name of the author.
+ * @param {string} props.date   - Date of the comment.
+ *
+ * @return {React.ReactNode} The JSX element representing the author's information.
+ */
+function CommentAuthorInfo( { avatar, name, date } ) {
+	const dateSettings = getDateSettings();
+	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
+
+	const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
+		const userData = select( coreStore ).getCurrentUser();
+
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+		return {
+			currentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,
+			currentUserName: userData?.name,
+		};
+	}, [] );
+
+	const currentDate = new Date();
+
+	return (
+		<>
+			<img
+				src={ avatar ?? currentUserAvatar }
+				className="editor-collab-sidebar-panel__user-avatar"
+				// translators: alt text for user avatar image
+				alt={ __( 'User avatar' ) }
+				width={ 32 }
+				height={ 32 }
+			/>
+			<VStack spacing="0">
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ name ?? currentUserName }
+				</span>
+				<time
+					dateTime={ dateI18n( 'c', date ?? currentDate ) }
+					className="editor-collab-sidebar-panel__user-time"
+				>
+					{ dateI18n( dateTimeFormat, date ?? currentDate ) }
+				</time>
+			</VStack>
+		</>
+	);
+}
+
+export default CommentAuthorInfo;
diff --git a/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
new file mode 100644
index 00000000000000..b673ee87fe86ce
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
+
+const AddCommentToolbarButton = ( { onClick } ) => {
+	return (
+		<CommentIconToolbarSlotFill.Fill>
+			<ToolbarButton
+				accessibleWhenDisabled
+				icon={ commentIcon }
+				label={ _x( 'Comment', 'View comment' ) }
+				onClick={ onClick }
+			/>
+		</CommentIconToolbarSlotFill.Fill>
+	);
+};
+
+export default AddCommentToolbarButton;
diff --git a/packages/editor/src/components/collab-sidebar/comment-button.js b/packages/editor/src/components/collab-sidebar/comment-button.js
new file mode 100644
index 00000000000000..373ee0becd92df
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-button.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { CommentIconSlotFill } = unlock( blockEditorPrivateApis );
+
+const AddCommentButton = ( { onClick } ) => {
+	return (
+		<CommentIconSlotFill.Fill>
+			<MenuItem
+				icon={ commentIcon }
+				onClick={ onClick }
+				aria-haspopup="dialog"
+			>
+				{ _x( 'Comment', 'Add comment button' ) }
+			</MenuItem>
+		</CommentIconSlotFill.Fill>
+	);
+};
+
+export default AddCommentButton;
diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
new file mode 100644
index 00000000000000..052fd3cdd26568
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	Button,
+	TextareaControl,
+} from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Function} props.onSubmit         - The function to call when updating the comment.
+ * @param {Function} props.onCancel         - The function to call when canceling the comment update.
+ * @param {Object}   props.thread           - The comment thread object.
+ * @param {string}   props.submitButtonText - The text to display on the submit button.
+ * @return {React.ReactNode} The CommentForm component.
+ */
+function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+	const [ inputComment, setInputComment ] = useState(
+		thread?.content?.raw ?? ''
+	);
+
+	return (
+		<>
+			<TextareaControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment ?? '' }
+				onChange={ setInputComment }
+			/>
+			<HStack alignment="left" spacing="3" justify="flex-start">
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					onClick={ () => onSubmit( inputComment ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					text={ submitButtonText }
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					onClick={ onCancel }
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+				/>
+			</HStack>
+		</>
+	);
+}
+
+export default CommentForm;
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
new file mode 100644
index 00000000000000..7a03068787c81e
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -0,0 +1,342 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, RawHTML } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalConfirmDialog as ConfirmDialog,
+	Button,
+	DropdownMenu,
+	Tooltip,
+} from '@wordpress/components';
+import { Icon, check, published, moreVertical } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
+
+/**
+ * Renders the Comments component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Array}    props.threads          - The array of comment threads.
+ * @param {Function} props.onEditComment    - The function to handle comment editing.
+ * @param {Function} props.onAddReply       - The function to add a reply to a comment.
+ * @param {Function} props.onCommentDelete  - The function to delete a comment.
+ * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
+ * @return {React.ReactNode} The rendered Comments component.
+ */
+export function Comments( {
+	threads,
+	onEditComment,
+	onAddReply,
+	onCommentDelete,
+	onCommentResolve,
+} ) {
+	const [ actionState, setActionState ] = useState( false );
+	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
+
+	const handleConfirmDelete = () => {
+		onCommentDelete( actionState.id );
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const handleConfirmResolve = () => {
+		onCommentResolve( actionState.id );
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const handleCancelDelete = () => {
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const blockCommentId = useSelect( ( select ) => {
+		const clientID = select( blockEditorStore ).getSelectedBlockClientId();
+		return (
+			select( blockEditorStore ).getBlock( clientID )?.attributes
+				?.blockCommentId ?? false
+		);
+	}, [] );
+
+	const CommentBoard = ( { thread, parentThread } ) => {
+		return (
+			<>
+				<CommentHeader
+					thread={ thread }
+					onResolve={ () => {
+						setActionState( {
+							action: 'resolve',
+							id: parentThread?.id ?? thread.id,
+						} );
+						setIsConfirmDialogOpen( true );
+					} }
+					onEdit={ () =>
+						setActionState( { action: 'edit', id: thread.id } )
+					}
+					onDelete={ () => {
+						setActionState( { action: 'delete', id: thread.id } );
+						setIsConfirmDialogOpen( true );
+					} }
+					onReply={
+						! parentThread
+							? () =>
+									setActionState( {
+										action: 'reply',
+										id: thread.id,
+									} )
+							: undefined
+					}
+					status={ parentThread?.status ?? thread.status }
+				/>
+				<HStack
+					alignment="left"
+					spacing="3"
+					justify="flex-start"
+					className="editor-collab-sidebar-panel__user-comment"
+				>
+					<VStack
+						spacing="3"
+						className="editor-collab-sidebar-panel__comment-field"
+					>
+						{ 'edit' === actionState?.action &&
+							thread.id === actionState?.id && (
+								<CommentForm
+									onSubmit={ ( value ) => {
+										onEditComment( thread.id, value );
+										setActionState( false );
+									} }
+									onCancel={ () => setActionState( false ) }
+									thread={ thread }
+									submitButtonText={ _x( 'Update', 'verb' ) }
+								/>
+							) }
+						{ ( ! actionState ||
+							'edit' !== actionState?.action ) && (
+							<RawHTML>{ thread?.content?.raw }</RawHTML>
+						) }
+					</VStack>
+				</HStack>
+				{ 'resolve' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmDialog
+							isOpen={ isConfirmDialogOpen }
+							onConfirm={ handleConfirmResolve }
+							onCancel={ handleCancelDelete }
+							confirmButtonText="Yes"
+							cancelButtonText="No"
+						>
+							{
+								// translators: message displayed when confirming an action
+								__(
+									'Are you sure you want to mark this comment as resolved?'
+								)
+							}
+						</ConfirmDialog>
+					) }
+				{ 'delete' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmDialog
+							isOpen={ isConfirmDialogOpen }
+							onConfirm={ handleConfirmDelete }
+							onCancel={ handleCancelDelete }
+							confirmButtonText="Yes"
+							cancelButtonText="No"
+						>
+							{
+								// translators: message displayed when confirming an action
+								__(
+									'Are you sure you want to delete this comment?'
+								)
+							}
+						</ConfirmDialog>
+					) }
+			</>
+		);
+	};
+
+	return (
+		<>
+			{
+				// If there are no comments, show a message indicating no comments are available.
+				( ! Array.isArray( threads ) || threads.length === 0 ) && (
+					<VStack
+						alignment="left"
+						className="editor-collab-sidebar-panel__thread"
+						justify="flex-start"
+						spacing="3"
+					>
+						{
+							// translators: message displayed when there are no comments available
+							__( 'No comments available' )
+						}
+					</VStack>
+				)
+			}
+
+			{ Array.isArray( threads ) &&
+				threads.length > 0 &&
+				threads.map( ( thread ) => (
+					<VStack
+						key={ thread.id }
+						className={ clsx(
+							'editor-collab-sidebar-panel__thread',
+							{
+								'editor-collab-sidebar-panel__active-thread':
+									blockCommentId &&
+									blockCommentId === thread.id,
+							}
+						) }
+						id={ thread.id }
+						spacing="3"
+					>
+						<CommentBoard thread={ thread } />
+						{ 0 < thread?.reply?.length &&
+							thread.reply.map( ( reply ) => (
+								<VStack
+									key={ reply.id }
+									className="editor-collab-sidebar-panel__child-thread"
+									id={ reply.id }
+									spacing="2"
+								>
+									<CommentBoard
+										thread={ reply }
+										parentThread={ thread }
+									/>
+								</VStack>
+							) ) }
+						{ 'reply' === actionState?.action &&
+							thread.id === actionState?.id && (
+								<VStack
+									className="editor-collab-sidebar-panel__child-thread"
+									spacing="2"
+								>
+									<HStack
+										alignment="left"
+										spacing="3"
+										justify="flex-start"
+									>
+										<CommentAuthorInfo />
+									</HStack>
+									<VStack
+										spacing="3"
+										className="editor-collab-sidebar-panel__comment-field"
+									>
+										<CommentForm
+											onSubmit={ ( inputComment ) => {
+												onAddReply(
+													inputComment,
+													thread.id
+												);
+												setActionState( false );
+											} }
+											onCancel={ () =>
+												setActionState( false )
+											}
+											submitButtonText={ _x(
+												'Reply',
+												'Add reply comment'
+											) }
+										/>
+									</VStack>
+								</VStack>
+							) }
+					</VStack>
+				) ) }
+		</>
+	);
+}
+
+/**
+ * Renders the header of a comment in the collaboration sidebar.
+ *
+ * @param {Object}   props           - The component props.
+ * @param {Object}   props.thread    - The comment thread object.
+ * @param {Function} props.onResolve - The function to resolve the comment.
+ * @param {Function} props.onEdit    - The function to edit the comment.
+ * @param {Function} props.onDelete  - The function to delete the comment.
+ * @param {Function} props.onReply   - The function to reply to the comment.
+ * @param {string}   props.status    - The status of the comment.
+ * @return {React.ReactNode} The rendered comment header.
+ */
+function CommentHeader( {
+	thread,
+	onResolve,
+	onEdit,
+	onDelete,
+	onReply,
+	status,
+} ) {
+	const actions = [
+		{
+			title: _x( 'Edit', 'Edit comment' ),
+			onClick: onEdit,
+		},
+		{
+			title: _x( 'Delete', 'Delete comment' ),
+			onClick: onDelete,
+		},
+		{
+			title: _x( 'Reply', 'Reply on a comment' ),
+			onClick: onReply,
+		},
+	];
+
+	const moreActions = actions.filter( ( item ) => item.onClick );
+
+	return (
+		<HStack alignment="left" spacing="3" justify="flex-start">
+			<CommentAuthorInfo
+				avatar={ thread?.author_avatar_urls?.[ 48 ] }
+				name={ thread?.author_name }
+				date={ thread?.date }
+			/>
+			<span className="editor-collab-sidebar-panel__comment-status">
+				{ status !== 'approved' && (
+					<HStack alignment="right" justify="flex-end" spacing="0">
+						{ 0 === thread?.parent && onResolve && (
+							<Button
+								label={ _x(
+									'Resolve',
+									'Mark comment as resolved'
+								) }
+								__next40pxDefaultSize
+								icon={ published }
+								onClick={ onResolve }
+								showTooltip
+							/>
+						) }
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ _x(
+								'Select an action',
+								'Select comment action'
+							) }
+							className="editor-collab-sidebar-panel__comment-dropdown-menu"
+							controls={ moreActions }
+						/>
+					</HStack>
+				) }
+				{ status === 'approved' && (
+					// translators: tooltip for resolved comment
+					<Tooltip text={ __( 'Resolved' ) }>
+						<Icon icon={ check } />
+					</Tooltip>
+				) }
+			</span>
+		</HStack>
+	);
+}
diff --git a/packages/editor/src/components/collab-sidebar/constants.js b/packages/editor/src/components/collab-sidebar/constants.js
new file mode 100644
index 00000000000000..b62e30c346e1f9
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/constants.js
@@ -0,0 +1,2 @@
+export const collabHistorySidebarName = 'edit-post/collab-history-sidebar';
+export const collabSidebarName = 'edit-post/collab-sidebar';
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
new file mode 100644
index 00000000000000..aa1b9ac6c45609
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -0,0 +1,366 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useSelect,
+	useDispatch,
+	resolveSelect,
+	subscribe,
+} from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { comment as commentIcon } from '@wordpress/icons';
+import { addFilter } from '@wordpress/hooks';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PluginSidebar from '../plugin-sidebar';
+import { collabHistorySidebarName, collabSidebarName } from './constants';
+import { Comments } from './comments';
+import { AddComment } from './add-comment';
+import { store as editorStore } from '../../store';
+import AddCommentButton from './comment-button';
+import AddCommentToolbarButton from './comment-button-toolbar';
+import { useGlobalStylesContext } from '../global-styles-provider';
+import { getCommentIdsFromBlocks } from './utils';
+
+const isBlockCommentExperimentEnabled =
+	window?.__experimentalEnableBlockComment;
+const modifyBlockCommentAttributes = ( settings ) => {
+	if ( ! settings.attributes.blockCommentId ) {
+		settings.attributes = {
+			...settings.attributes,
+			blockCommentId: {
+				type: 'number',
+			},
+		};
+	}
+
+	return settings;
+};
+
+// Apply the filter to all core blocks
+addFilter(
+	'blocks.registerBlockType',
+	'block-comment/modify-core-block-attributes',
+	modifyBlockCommentAttributes
+);
+
+function CollabSidebarContent( {
+	showCommentBoard,
+	setShowCommentBoard,
+	styles,
+	comments,
+} ) {
+	const { createNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
+	const { getEntityRecord } = resolveSelect( coreStore );
+
+	const { postId } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const _postId = getCurrentPostId();
+
+		return {
+			postId: _postId,
+		};
+	}, [] );
+
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Function to save the comment.
+	const addNewComment = async ( comment, parentCommentId ) => {
+		const args = {
+			post: postId,
+			content: comment,
+			comment_type: 'block_comment',
+			comment_approved: 0,
+		};
+
+		// Create a new object, conditionally including the parent property
+		const updatedArgs = {
+			...args,
+			...( parentCommentId ? { parent: parentCommentId } : {} ),
+		};
+
+		const savedRecord = await saveEntityRecord(
+			'root',
+			'comment',
+			updatedArgs
+		);
+
+		if ( savedRecord ) {
+			// If it's a main comment, update the block attributes with the comment id.
+			if ( ! parentCommentId ) {
+				updateBlockAttributes( getSelectedBlockClientId(), {
+					blockCommentId: savedRecord?.id,
+				} );
+			}
+
+			createNotice(
+				'snackbar',
+				parentCommentId
+					? // translators: Reply added successfully
+					  __( 'Reply added successfully.' )
+					: // translators: Comment added successfully
+					  __( 'Comment added successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onCommentResolve = async ( commentId ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			status: 'approved',
+		} );
+
+		if ( savedRecord ) {
+			// translators: Comment resolved successfully
+			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		} else {
+			onError();
+		}
+	};
+
+	const onEditComment = async ( commentId, comment ) => {
+		const savedRecord = await saveEntityRecord( 'root', 'comment', {
+			id: commentId,
+			content: comment,
+		} );
+
+		if ( savedRecord ) {
+			createNotice(
+				'snackbar',
+				// translators: Comment edited successfully
+				__( 'Comment edited successfully.' ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+				}
+			);
+		} else {
+			onError();
+		}
+	};
+
+	const onError = () => {
+		createNotice(
+			'error',
+			// translators: Error message when comment submission fails
+			__(
+				'Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'
+			),
+			{
+				isDismissible: true,
+			}
+		);
+	};
+
+	const onCommentDelete = async ( commentId ) => {
+		const childComment = await getEntityRecord(
+			'root',
+			'comment',
+			commentId
+		);
+		await deleteEntityRecord( 'root', 'comment', commentId );
+
+		if ( childComment && ! childComment.parent ) {
+			updateBlockAttributes( getSelectedBlockClientId(), {
+				blockCommentId: undefined,
+			} );
+		}
+
+		createNotice(
+			'snackbar',
+			// translators: Comment deleted successfully
+			__( 'Comment deleted successfully.' ),
+			{
+				type: 'snackbar',
+				isDismissible: true,
+			}
+		);
+	};
+
+	return (
+		<div className="editor-collab-sidebar-panel" style={ styles }>
+			<AddComment
+				onSubmit={ addNewComment }
+				showCommentBoard={ showCommentBoard }
+				setShowCommentBoard={ setShowCommentBoard }
+			/>
+			<Comments
+				threads={ comments }
+				onEditComment={ onEditComment }
+				onAddReply={ addNewComment }
+				onCommentDelete={ onCommentDelete }
+				onCommentResolve={ onCommentResolve }
+			/>
+		</div>
+	);
+}
+
+/**
+ * Renders the Collab sidebar.
+ */
+export default function CollabSidebar() {
+	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+
+	const { postId, postType, postStatus, threads } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		const _postId = getCurrentPostId();
+		const data =
+			!! _postId && typeof _postId === 'number'
+				? select( coreStore ).getEntityRecords( 'root', 'comment', {
+						post: _postId,
+						type: 'block_comment',
+						status: 'any',
+						per_page: 100,
+				  } )
+				: null;
+		return {
+			postId: _postId,
+			postType: getCurrentPostType(),
+			postStatus:
+				select( editorStore ).getEditedPostAttribute( 'status' ),
+			threads: data,
+		};
+	}, [] );
+
+	const { blockCommentId } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } =
+			select( blockEditorStore );
+		const _clientId = getSelectedBlockClientId();
+
+		return {
+			blockCommentId: _clientId
+				? getBlockAttributes( _clientId )?.blockCommentId
+				: null,
+		};
+	}, [] );
+
+	const openCollabBoard = () => {
+		setShowCommentBoard( true );
+		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
+	};
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	// Process comments to build the tree structure
+	const { resultComments, sortedThreads } = useMemo( () => {
+		// Create a compare to store the references to all objects by id
+		const compare = {};
+		const result = [];
+
+		const filteredComments = ( threads ?? [] ).filter(
+			( comment ) => comment.status !== 'trash'
+		);
+
+		// Initialize each object with an empty `reply` array
+		filteredComments.forEach( ( item ) => {
+			compare[ item.id ] = { ...item, reply: [] };
+		} );
+
+		// Iterate over the data to build the tree structure
+		filteredComments.forEach( ( item ) => {
+			if ( item.parent === 0 ) {
+				// If parent is 0, it's a root item, push it to the result array
+				result.push( compare[ item.id ] );
+			} else if ( compare[ item.parent ] ) {
+				// Otherwise, find its parent and push it to the parent's `reply` array
+				compare[ item.parent ].reply.push( compare[ item.id ] );
+			}
+		} );
+
+		if ( 0 === result?.length ) {
+			return { resultComments: [], sortedThreads: [] };
+		}
+
+		const blockCommentIds = getCommentIdsFromBlocks( blocks );
+
+		const threadIdMap = new Map(
+			result.map( ( thread ) => [ thread.id, thread ] )
+		);
+
+		const sortedComments = blockCommentIds
+			.map( ( id ) => threadIdMap.get( id ) )
+			.filter( ( thread ) => thread !== undefined );
+
+		return { resultComments: result, sortedThreads: sortedComments };
+	}, [ threads, blocks ] );
+
+	// Get the global styles to set the background color of the sidebar.
+	const { merged: GlobalStyles } = useGlobalStylesContext();
+	const backgroundColor = GlobalStyles?.styles?.color?.background;
+
+	if ( 0 < resultComments.length ) {
+		const unsubscribe = subscribe( () => {
+			const activeSidebar = getActiveComplementaryArea( 'core' );
+
+			if ( ! activeSidebar ) {
+				enableComplementaryArea( 'core', collabSidebarName );
+				unsubscribe();
+			}
+		} );
+	}
+
+	// Check if the experimental flag is enabled.
+	if ( ! isBlockCommentExperimentEnabled || postStatus === 'publish' ) {
+		return null; // or maybe return some message indicating no threads are available.
+	}
+
+	const AddCommentComponent = blockCommentId
+		? AddCommentToolbarButton
+		: AddCommentButton;
+
+	return (
+		<>
+			<AddCommentComponent onClick={ openCollabBoard } />
+			<PluginSidebar
+				identifier={ collabHistorySidebarName }
+				// translators: Comments sidebar title
+				title={ __( 'Comments' ) }
+				icon={ commentIcon }
+			>
+				<CollabSidebarContent
+					comments={ resultComments }
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+				/>
+			</PluginSidebar>
+			<PluginSidebar
+				isPinnable={ false }
+				header={ false }
+				identifier={ collabSidebarName }
+				className="editor-collab-sidebar"
+				headerClassName="editor-collab-sidebar__header"
+			>
+				<CollabSidebarContent
+					comments={ sortedThreads }
+					showCommentBoard={ showCommentBoard }
+					setShowCommentBoard={ setShowCommentBoard }
+					styles={ {
+						backgroundColor,
+					} }
+				/>
+			</PluginSidebar>
+		</>
+	);
+}
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
new file mode 100644
index 00000000000000..2c1426f1dd75df
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/style.scss
@@ -0,0 +1,124 @@
+.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
+	box-shadow: none;
+
+	.interface-complementary-area-header {
+		display: none;
+	}
+}
+
+.editor-collab-sidebar {
+	height: 100%;
+}
+
+.editor-collab-sidebar-panel {
+	padding: $grid-unit-20;
+	height: 100%;
+
+	&__thread {
+		position: relative;
+		padding: $grid-unit-20;
+		border-radius: $radius-large;
+		border: 1px solid $gray-300;
+		background-color: $gray-100;
+		margin-bottom: $grid-unit-20;
+	}
+
+	&__active-thread {
+		border: 1.5px solid #3858e9;
+		background-color: $white;
+		box-shadow: 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.102);
+	}
+
+	&__comment-field {
+		flex: 1;
+	}
+
+	&__child-thread {
+		margin-top: 15px;
+	}
+
+	&__user-name {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+		text-transform: capitalize;
+	}
+
+	&__user-time {
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+		text-align: left;
+		color: $gray-700;
+	}
+
+	&__user-comment {
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 20px;
+		text-align: left;
+		color: $gray-900;
+
+		p {
+			margin-bottom: 0;
+		}
+	}
+
+	&__user-avatar {
+		border-radius: $radius-round;
+		flex-shrink: 0;
+	}
+
+	&__thread-overlay {
+		background-color: rgba(0, 0, 0, 0.7);
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		padding: 15px;
+		border-radius: $radius-large;
+		color: $white;
+
+		p {
+			margin-bottom: 15px;
+		}
+
+		button {
+			padding: 4px 10px;
+			color: $white;
+		}
+	}
+
+	&__comment-status {
+		margin-left: auto;
+
+		button {
+			&.has-icon:not(.has-text) {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+				flex-shrink: 0;
+			}
+		}
+	}
+
+	&__comment-dropdown-menu {
+		flex-shrink: 0;
+
+		button {
+			&.has-icon {
+				min-width: 24px;
+				padding: 0;
+				width: 24px;
+				height: 24px;
+			}
+		}
+	}
+
+}
diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js
new file mode 100644
index 00000000000000..51345392098ff2
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/utils.js
@@ -0,0 +1,45 @@
+/**
+ * Sanitizes a comment string by removing non-printable ASCII characters.
+ *
+ * @param {string} str - The comment string to sanitize.
+ * @return {string} - The sanitized comment string.
+ */
+export function sanitizeCommentString( str ) {
+	return str.trim();
+}
+
+/**
+ * Extracts comment IDs from an array of blocks.
+ *
+ * This function recursively traverses the blocks and their inner blocks to
+ * collect all comment IDs found in the block attributes.
+ *
+ * @param {Array} blocks - The array of blocks to extract comment IDs from.
+ * @return {Array} An array of comment IDs extracted from the blocks.
+ */
+export function getCommentIdsFromBlocks( blocks ) {
+	// Recursive function to extract comment IDs from blocks
+	const extractCommentIds = ( items ) => {
+		return items.reduce( ( commentIds, block ) => {
+			// Check for comment IDs in the current block's attributes
+			if (
+				block.attributes &&
+				block.attributes.blockCommentId &&
+				! commentIds.includes( block.attributes.blockCommentId )
+			) {
+				commentIds.push( block.attributes.blockCommentId );
+			}
+
+			// Recursively check inner blocks
+			if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+				const innerCommentIds = extractCommentIds( block.innerBlocks );
+				commentIds.push( ...innerCommentIds );
+			}
+
+			return commentIds;
+		}, [] );
+	};
+
+	// Extract all comment IDs recursively
+	return extractCommentIds( blocks );
+}
diff --git a/packages/editor/src/components/collapsible-block-toolbar/index.js b/packages/editor/src/components/collapsible-block-toolbar/index.js
new file mode 100644
index 00000000000000..cafbfecb72516c
--- /dev/null
+++ b/packages/editor/src/components/collapsible-block-toolbar/index.js
@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockToolbar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { Button, Popover } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
+
+export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
+	const { blockSelectionStart } = useSelect( ( select ) => {
+		return {
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	const hasBlockSelection = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			onToggle( false );
+		}
+	}, [ blockSelectionStart, onToggle ] );
+
+	if ( ! hasBlockToolbar ) {
+		return null;
+	}
+
+	return (
+		<>
+			<div
+				className={ clsx( 'editor-collapsible-block-toolbar', {
+					'is-collapsed': isCollapsed || ! hasBlockSelection,
+				} ) }
+			>
+				<BlockToolbar hideDragHandle />
+			</div>
+			<Popover.Slot name="block-toolbar" />
+
+			<Button
+				className="editor-collapsible-block-toolbar__toggle"
+				icon={ isCollapsed ? next : previous }
+				onClick={ () => {
+					onToggle( ! isCollapsed );
+				} }
+				label={
+					isCollapsed
+						? __( 'Show block tools' )
+						: __( 'Hide block tools' )
+				}
+				size="compact"
+			/>
+		</>
+	);
+}
diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
new file mode 100644
index 00000000000000..f559e1a055cdcd
--- /dev/null
+++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -0,0 +1,79 @@
+.editor-collapsible-block-toolbar {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	height: $header-height;
+
+	.block-editor-block-contextual-toolbar {
+		border-bottom: 0;
+		height: 100%;
+		background: transparent;
+	}
+
+	// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+	.block-editor-block-toolbar {
+		height: 100%;
+		// Push down so that buttons are centered vertically.
+		// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+		// but there is a -1px top-margin down the stack that affects this.
+		padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+		// Match the height of other buttons in the header toolbar.
+		.components-button:not(.block-editor-block-mover-button) {
+			height: $button-size-compact;
+		}
+	}
+
+	&::after {
+		content: "";
+		width: $border-width;
+		height: $grid-unit-30;
+		background-color: $gray-300;
+		margin-right: $grid-unit - $border-width;
+	}
+
+	// Modified group borders.
+	.components-toolbar-group,
+	.components-toolbar {
+		border-right: none;
+		position: relative;
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			top: $grid-unit-05;
+			position: absolute;
+			right: -$border-width;
+		}
+
+		& .components-toolbar-group.components-toolbar-group {
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	.block-editor-block-mover {
+		// Match the height of other buttons in the header toolbar.
+		&.is-horizontal .block-editor-block-mover-button {
+			height: $button-size-compact;
+			overflow: visible;
+		}
+
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+				height: $grid-unit-50;
+				position: relative;
+				top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+			}
+		}
+	}
+
+	&.is-collapsed {
+		display: none;
+	}
+}
+
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
new file mode 100644
index 00000000000000..0040a09fbdc07d
--- /dev/null
+++ b/packages/editor/src/components/commands/index.js
@@ -0,0 +1,463 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import {
+	blockDefault,
+	code,
+	drawerLeft,
+	drawerRight,
+	edit,
+	formatListBullets,
+	listView,
+	external,
+	keyboard,
+	symbol,
+	page,
+	layout,
+	rotateRight,
+	rotateLeft,
+} from '@wordpress/icons';
+import { useCommandLoader } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import {
+	PATTERN_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+import { modalName as patternRenameModalName } from '../pattern-rename-modal';
+import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
+import isTemplateRevertable from '../../store/utils/is-template-revertable';
+
+const getEditorCommandLoader = () =>
+	function useEditorCommandLoader() {
+		const {
+			editorMode,
+			isListViewOpen,
+			showBlockBreadcrumbs,
+			isDistractionFree,
+			isFocusMode,
+			isPreviewMode,
+			isViewable,
+			isCodeEditingEnabled,
+			isRichEditingEnabled,
+			isPublishSidebarEnabled,
+		} = useSelect( ( select ) => {
+			const { get } = select( preferencesStore );
+			const { isListViewOpened, getCurrentPostType, getEditorSettings } =
+				select( editorStore );
+			const { getSettings } = select( blockEditorStore );
+			const { getPostType } = select( coreStore );
+
+			return {
+				editorMode: get( 'core', 'editorMode' ) ?? 'visual',
+				isListViewOpen: isListViewOpened(),
+				showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				isFocusMode: get( 'core', 'focusMode' ),
+				isPreviewMode: getSettings().isPreviewMode,
+				isViewable:
+					getPostType( getCurrentPostType() )?.viewable ?? false,
+				isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
+				isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+				isPublishSidebarEnabled:
+					select( editorStore ).isPublishSidebarEnabled(),
+			};
+		}, [] );
+		const { getActiveComplementaryArea } = useSelect( interfaceStore );
+		const { toggle } = useDispatch( preferencesStore );
+		const { createInfoNotice } = useDispatch( noticesStore );
+		const {
+			__unstableSaveForPreview,
+			setIsListViewOpened,
+			switchEditorMode,
+			toggleDistractionFree,
+			toggleSpotlightMode,
+			toggleTopToolbar,
+		} = useDispatch( editorStore );
+		const { openModal, enableComplementaryArea, disableComplementaryArea } =
+			useDispatch( interfaceStore );
+		const { getCurrentPostId } = useSelect( editorStore );
+		const allowSwitchEditorMode =
+			isCodeEditingEnabled && isRichEditingEnabled;
+
+		if ( isPreviewMode ) {
+			return { commands: [], isLoading: false };
+		}
+
+		const commands = [];
+
+		commands.push( {
+			name: 'core/open-shortcut-help',
+			label: __( 'Keyboard shortcuts' ),
+			icon: keyboard,
+			callback: ( { close } ) => {
+				close();
+				openModal( 'editor/keyboard-shortcut-help' );
+			},
+		} );
+
+		commands.push( {
+			name: 'core/toggle-distraction-free',
+			label: isDistractionFree
+				? __( 'Exit Distraction free' )
+				: __( 'Enter Distraction free' ),
+			callback: ( { close } ) => {
+				toggleDistractionFree();
+				close();
+			},
+		} );
+
+		commands.push( {
+			name: 'core/open-preferences',
+			label: __( 'Editor preferences' ),
+			callback: ( { close } ) => {
+				close();
+				openModal( 'editor/preferences' );
+			},
+		} );
+
+		commands.push( {
+			name: 'core/toggle-spotlight-mode',
+			label: isFocusMode
+				? __( 'Exit Spotlight mode' )
+				: __( 'Enter Spotlight mode' ),
+			callback: ( { close } ) => {
+				toggleSpotlightMode();
+				close();
+			},
+		} );
+
+		commands.push( {
+			name: 'core/toggle-list-view',
+			label: isListViewOpen
+				? __( 'Close List View' )
+				: __( 'Open List View' ),
+			icon: listView,
+			callback: ( { close } ) => {
+				setIsListViewOpened( ! isListViewOpen );
+				close();
+				createInfoNotice(
+					isListViewOpen
+						? __( 'List View off.' )
+						: __( 'List View on.' ),
+					{
+						id: 'core/editor/toggle-list-view/notice',
+						type: 'snackbar',
+					}
+				);
+			},
+		} );
+
+		commands.push( {
+			name: 'core/toggle-top-toolbar',
+			label: __( 'Top toolbar' ),
+			callback: ( { close } ) => {
+				toggleTopToolbar();
+				close();
+			},
+		} );
+
+		if ( allowSwitchEditorMode ) {
+			commands.push( {
+				name: 'core/toggle-code-editor',
+				label:
+					editorMode === 'visual'
+						? __( 'Open code editor' )
+						: __( 'Exit code editor' ),
+				icon: code,
+				callback: ( { close } ) => {
+					switchEditorMode(
+						editorMode === 'visual' ? 'text' : 'visual'
+					);
+					close();
+				},
+			} );
+		}
+
+		commands.push( {
+			name: 'core/toggle-breadcrumbs',
+			label: showBlockBreadcrumbs
+				? __( 'Hide block breadcrumbs' )
+				: __( 'Show block breadcrumbs' ),
+			callback: ( { close } ) => {
+				toggle( 'core', 'showBlockBreadcrumbs' );
+				close();
+				createInfoNotice(
+					showBlockBreadcrumbs
+						? __( 'Breadcrumbs hidden.' )
+						: __( 'Breadcrumbs visible.' ),
+					{
+						id: 'core/editor/toggle-breadcrumbs/notice',
+						type: 'snackbar',
+					}
+				);
+			},
+		} );
+
+		commands.push( {
+			name: 'core/open-settings-sidebar',
+			label: __( 'Show or hide the Settings panel.' ),
+			icon: isRTL() ? drawerLeft : drawerRight,
+			callback: ( { close } ) => {
+				const activeSidebar = getActiveComplementaryArea( 'core' );
+				close();
+				if ( activeSidebar === 'edit-post/document' ) {
+					disableComplementaryArea( 'core' );
+				} else {
+					enableComplementaryArea( 'core', 'edit-post/document' );
+				}
+			},
+		} );
+
+		commands.push( {
+			name: 'core/open-block-inspector',
+			label: __( 'Show or hide the Block settings panel' ),
+			icon: blockDefault,
+			callback: ( { close } ) => {
+				const activeSidebar = getActiveComplementaryArea( 'core' );
+				close();
+				if ( activeSidebar === 'edit-post/block' ) {
+					disableComplementaryArea( 'core' );
+				} else {
+					enableComplementaryArea( 'core', 'edit-post/block' );
+				}
+			},
+		} );
+
+		commands.push( {
+			name: 'core/toggle-publish-sidebar',
+			label: isPublishSidebarEnabled
+				? __( 'Disable pre-publish checks' )
+				: __( 'Enable pre-publish checks' ),
+			icon: formatListBullets,
+			callback: ( { close } ) => {
+				close();
+				toggle( 'core', 'isPublishSidebarEnabled' );
+				createInfoNotice(
+					isPublishSidebarEnabled
+						? __( 'Pre-publish checks disabled.' )
+						: __( 'Pre-publish checks enabled.' ),
+					{
+						id: 'core/editor/publish-sidebar/notice',
+						type: 'snackbar',
+					}
+				);
+			},
+		} );
+
+		if ( isViewable ) {
+			commands.push( {
+				name: 'core/preview-link',
+				label: __( 'Preview in a new tab' ),
+				icon: external,
+				callback: async ( { close } ) => {
+					close();
+					const postId = getCurrentPostId();
+					const link = await __unstableSaveForPreview();
+					window.open( link, `wp-preview-${ postId }` );
+				},
+			} );
+		}
+
+		return {
+			commands,
+			isLoading: false,
+		};
+	};
+
+const getEditedEntityContextualCommands = () =>
+	function useEditedEntityContextualCommands() {
+		const { postType } = useSelect( ( select ) => {
+			const { getCurrentPostType } = select( editorStore );
+			return {
+				postType: getCurrentPostType(),
+			};
+		}, [] );
+		const { openModal } = useDispatch( interfaceStore );
+		const commands = [];
+
+		if ( postType === PATTERN_POST_TYPE ) {
+			commands.push( {
+				name: 'core/rename-pattern',
+				label: __( 'Rename pattern' ),
+				icon: edit,
+				callback: ( { close } ) => {
+					openModal( patternRenameModalName );
+					close();
+				},
+			} );
+			commands.push( {
+				name: 'core/duplicate-pattern',
+				label: __( 'Duplicate pattern' ),
+				icon: symbol,
+				callback: ( { close } ) => {
+					openModal( patternDuplicateModalName );
+					close();
+				},
+			} );
+		}
+
+		return { isLoading: false, commands };
+	};
+
+const getPageContentFocusCommands = () =>
+	function usePageContentFocusCommands() {
+		const { onNavigateToEntityRecord, goBack, templateId, isPreviewMode } =
+			useSelect( ( select ) => {
+				const {
+					getRenderingMode,
+					getEditorSettings: _getEditorSettings,
+					getCurrentTemplateId,
+				} = unlock( select( editorStore ) );
+				const editorSettings = _getEditorSettings();
+				return {
+					isTemplateHidden: getRenderingMode() === 'post-only',
+					onNavigateToEntityRecord:
+						editorSettings.onNavigateToEntityRecord,
+					getEditorSettings: _getEditorSettings,
+					goBack: editorSettings.onNavigateToPreviousEntityRecord,
+					templateId: getCurrentTemplateId(),
+					isPreviewMode: editorSettings.isPreviewMode,
+				};
+			}, [] );
+		const { editedRecord: template, hasResolved } = useEntityRecord(
+			'postType',
+			'wp_template',
+			templateId
+		);
+
+		if ( isPreviewMode ) {
+			return { isLoading: false, commands: [] };
+		}
+
+		const commands = [];
+
+		if ( templateId && hasResolved ) {
+			commands.push( {
+				name: 'core/switch-to-template-focus',
+				label: sprintf(
+					/* translators: %s: template title */
+					__( 'Edit template: %s' ),
+					decodeEntities( template.title )
+				),
+				icon: layout,
+				callback: ( { close } ) => {
+					onNavigateToEntityRecord( {
+						postId: templateId,
+						postType: 'wp_template',
+					} );
+					close();
+				},
+			} );
+		}
+
+		if ( !! goBack ) {
+			commands.push( {
+				name: 'core/switch-to-previous-entity',
+				label: __( 'Go back' ),
+				icon: page,
+				callback: ( { close } ) => {
+					goBack();
+					close();
+				},
+			} );
+		}
+
+		return { isLoading: false, commands };
+	};
+
+const getManipulateDocumentCommands = () =>
+	function useManipulateDocumentCommands() {
+		const { postType, postId } = useSelect( ( select ) => {
+			const { getCurrentPostId, getCurrentPostType } =
+				select( editorStore );
+			return {
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		}, [] );
+		const { editedRecord: template, hasResolved } = useEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const { revertTemplate } = unlock( useDispatch( editorStore ) );
+
+		if (
+			! hasResolved ||
+			! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes(
+				postType
+			)
+		) {
+			return { isLoading: true, commands: [] };
+		}
+
+		const commands = [];
+
+		if ( isTemplateRevertable( template ) ) {
+			const label =
+				template.type === TEMPLATE_POST_TYPE
+					? sprintf(
+							/* translators: %s: template title */
+							__( 'Reset template: %s' ),
+							decodeEntities( template.title )
+					  )
+					: sprintf(
+							/* translators: %s: template part title */
+							__( 'Reset template part: %s' ),
+							decodeEntities( template.title )
+					  );
+			commands.push( {
+				name: 'core/reset-template',
+				label,
+				icon: isRTL() ? rotateRight : rotateLeft,
+				callback: ( { close } ) => {
+					revertTemplate( template );
+					close();
+				},
+			} );
+		}
+
+		return {
+			isLoading: ! hasResolved,
+			commands,
+		};
+	};
+
+export default function useCommands() {
+	useCommandLoader( {
+		name: 'core/editor/edit-ui',
+		hook: getEditorCommandLoader(),
+	} );
+
+	useCommandLoader( {
+		name: 'core/editor/contextual-commands',
+		hook: getEditedEntityContextualCommands(),
+		context: 'entity-edit',
+	} );
+
+	useCommandLoader( {
+		name: 'core/editor/page-content-focus',
+		hook: getPageContentFocusCommands(),
+		context: 'entity-edit',
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/manipulate-document',
+		hook: getManipulateDocumentCommands(),
+	} );
+}
diff --git a/packages/editor/src/components/commands/index.native.js b/packages/editor/src/components/commands/index.native.js
new file mode 100644
index 00000000000000..23e48951a0329b
--- /dev/null
+++ b/packages/editor/src/components/commands/index.native.js
@@ -0,0 +1,2 @@
+// Commands are disabled in the mobile native version.
+export default function useCommands() {}
diff --git a/packages/editor/src/components/deprecated.js b/packages/editor/src/components/deprecated.js
index 977f7b4c9a1a21..39432fd447cb63 100644
--- a/packages/editor/src/components/deprecated.js
+++ b/packages/editor/src/components/deprecated.js
@@ -94,6 +94,9 @@ function deprecateFunction( name, func ) {
 	};
 }
 
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichText` instead.
+ */
 const RichText = deprecateComponent( 'RichText', RootRichText, [ 'Content' ] );
 RichText.isEmpty = deprecateFunction(
 	'RichText.isEmpty',
@@ -101,167 +104,321 @@ RichText.isEmpty = deprecateFunction(
 );
 
 export { RichText };
+
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Autocomplete` instead.
+ */
 export const Autocomplete = deprecateComponent(
 	'Autocomplete',
 	RootAutocomplete
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.AlignmentToolbar` instead.
+ */
 export const AlignmentToolbar = deprecateComponent(
 	'AlignmentToolbar',
 	RootAlignmentToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockAlignmentToolbar` instead.
+ */
 export const BlockAlignmentToolbar = deprecateComponent(
 	'BlockAlignmentToolbar',
 	RootBlockAlignmentToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockControls` instead.
+ */
 export const BlockControls = deprecateComponent(
 	'BlockControls',
 	RootBlockControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockEdit` instead.
+ */
 export const BlockEdit = deprecateComponent( 'BlockEdit', RootBlockEdit );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockEditorKeyboardShortcuts` instead.
+ */
 export const BlockEditorKeyboardShortcuts = deprecateComponent(
 	'BlockEditorKeyboardShortcuts',
 	RootBlockEditorKeyboardShortcuts
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockFormatControls` instead.
+ */
 export const BlockFormatControls = deprecateComponent(
 	'BlockFormatControls',
 	RootBlockFormatControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockIcon` instead.
+ */
 export const BlockIcon = deprecateComponent( 'BlockIcon', RootBlockIcon );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockInspector` instead.
+ */
 export const BlockInspector = deprecateComponent(
 	'BlockInspector',
 	RootBlockInspector
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockList` instead.
+ */
 export const BlockList = deprecateComponent( 'BlockList', RootBlockList );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockMover` instead.
+ */
 export const BlockMover = deprecateComponent( 'BlockMover', RootBlockMover );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockNavigationDropdown` instead.
+ */
 export const BlockNavigationDropdown = deprecateComponent(
 	'BlockNavigationDropdown',
 	RootBlockNavigationDropdown
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockSelectionClearer` instead.
+ */
 export const BlockSelectionClearer = deprecateComponent(
 	'BlockSelectionClearer',
 	RootBlockSelectionClearer
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockSettingsMenu` instead.
+ */
 export const BlockSettingsMenu = deprecateComponent(
 	'BlockSettingsMenu',
 	RootBlockSettingsMenu
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockTitle` instead.
+ */
 export const BlockTitle = deprecateComponent( 'BlockTitle', RootBlockTitle );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.BlockToolbar` instead.
+ */
 export const BlockToolbar = deprecateComponent(
 	'BlockToolbar',
 	RootBlockToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ColorPalette` instead.
+ */
 export const ColorPalette = deprecateComponent(
 	'ColorPalette',
 	RootColorPalette
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ContrastChecker` instead.
+ */
 export const ContrastChecker = deprecateComponent(
 	'ContrastChecker',
 	RootContrastChecker
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.CopyHandler` instead.
+ */
 export const CopyHandler = deprecateComponent( 'CopyHandler', RootCopyHandler );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.DefaultBlockAppender` instead.
+ */
 export const DefaultBlockAppender = deprecateComponent(
 	'DefaultBlockAppender',
 	RootDefaultBlockAppender
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.FontSizePicker` instead.
+ */
 export const FontSizePicker = deprecateComponent(
 	'FontSizePicker',
 	RootFontSizePicker
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Inserter` instead.
+ */
 export const Inserter = deprecateComponent( 'Inserter', RootInserter );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InnerBlocks` instead.
+ */
 export const InnerBlocks = deprecateComponent( 'InnerBlocks', RootInnerBlocks, [
 	'ButtonBlockAppender',
 	'DefaultBlockAppender',
 	'Content',
 ] );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InspectorAdvancedControls` instead.
+ */
 export const InspectorAdvancedControls = deprecateComponent(
 	'InspectorAdvancedControls',
 	RootInspectorAdvancedControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.InspectorControls` instead.
+ */
 export const InspectorControls = deprecateComponent(
 	'InspectorControls',
 	RootInspectorControls,
 	[ 'Slot' ]
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.PanelColorSettings` instead.
+ */
 export const PanelColorSettings = deprecateComponent(
 	'PanelColorSettings',
 	RootPanelColorSettings
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.PlainText` instead.
+ */
 export const PlainText = deprecateComponent( 'PlainText', RootPlainText );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichTextShortcut` instead.
+ */
 export const RichTextShortcut = deprecateComponent(
 	'RichTextShortcut',
 	RootRichTextShortcut
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.RichTextToolbarButton` instead.
+ */
 export const RichTextToolbarButton = deprecateComponent(
 	'RichTextToolbarButton',
 	RootRichTextToolbarButton
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.__unstableRichTextInputEvent` instead.
+ */
 export const __unstableRichTextInputEvent = deprecateComponent(
 	'__unstableRichTextInputEvent',
 	__unstableRootRichTextInputEvent
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaPlaceholder` instead.
+ */
 export const MediaPlaceholder = deprecateComponent(
 	'MediaPlaceholder',
 	RootMediaPlaceholder
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaUpload` instead.
+ */
 export const MediaUpload = deprecateComponent( 'MediaUpload', RootMediaUpload );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MediaUploadCheck` instead.
+ */
 export const MediaUploadCheck = deprecateComponent(
 	'MediaUploadCheck',
 	RootMediaUploadCheck
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.MultiSelectScrollIntoView` instead.
+ */
 export const MultiSelectScrollIntoView = deprecateComponent(
 	'MultiSelectScrollIntoView',
 	RootMultiSelectScrollIntoView
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.NavigableToolbar` instead.
+ */
 export const NavigableToolbar = deprecateComponent(
 	'NavigableToolbar',
 	RootNavigableToolbar
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.ObserveTyping` instead.
+ */
 export const ObserveTyping = deprecateComponent(
 	'ObserveTyping',
 	RootObserveTyping
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.SkipToSelectedBlock` instead.
+ */
 export const SkipToSelectedBlock = deprecateComponent(
 	'SkipToSelectedBlock',
 	RootSkipToSelectedBlock
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLInput` instead.
+ */
 export const URLInput = deprecateComponent( 'URLInput', RootURLInput );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLInputButton` instead.
+ */
 export const URLInputButton = deprecateComponent(
 	'URLInputButton',
 	RootURLInputButton
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.URLPopover` instead.
+ */
 export const URLPopover = deprecateComponent( 'URLPopover', RootURLPopover );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.Warning` instead.
+ */
 export const Warning = deprecateComponent( 'Warning', RootWarning );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.WritingFlow` instead.
+ */
 export const WritingFlow = deprecateComponent( 'WritingFlow', RootWritingFlow );
 
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+ */
 export const createCustomColorsHOC = deprecateFunction(
 	'createCustomColorsHOC',
 	rootCreateCustomColorsHOC
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorClassName` instead.
+ */
 export const getColorClassName = deprecateFunction(
 	'getColorClassName',
 	rootGetColorClassName
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorObjectByAttributeValues` instead.
+ */
 export const getColorObjectByAttributeValues = deprecateFunction(
 	'getColorObjectByAttributeValues',
 	rootGetColorObjectByAttributeValues
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getColorObjectByColorValue` instead.
+ */
 export const getColorObjectByColorValue = deprecateFunction(
 	'getColorObjectByColorValue',
 	rootGetColorObjectByColorValue
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getFontSize` instead.
+ */
 export const getFontSize = deprecateFunction( 'getFontSize', rootGetFontSize );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.getFontSizeClass` instead.
+ */
 export const getFontSizeClass = deprecateFunction(
 	'getFontSizeClass',
 	rootGetFontSizeClass
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.createCustomColorsHOC` instead.
+ */
 export const withColorContext = deprecateFunction(
 	'withColorContext',
 	rootWithColorContext
 );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.withColors` instead.
+ */
 export const withColors = deprecateFunction( 'withColors', rootWithColors );
+/**
+ * @deprecated since 5.3, use `wp.blockEditor.withFontSizes` instead.
+ */
 export const withFontSizes = deprecateFunction(
 	'withFontSizes',
 	rootWithFontSizes
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
new file mode 100644
index 00000000000000..f5ca65dfe18ed7
--- /dev/null
+++ b/packages/editor/src/components/document-bar/index.js
@@ -0,0 +1,229 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalText as Text,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
+import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
+import { displayShortcut } from '@wordpress/keycodes';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as commandsStore } from '@wordpress/commands';
+import { useRef, useEffect } from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPES } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
+import { getTemplateInfo } from '../../utils/get-template-info';
+
+/** @typedef {import("@wordpress/components").IconType} IconType */
+
+const MotionButton = motion( Button );
+
+/**
+ * This component renders a navigation bar at the top of the editor. It displays the title of the current document,
+ * a back button (if applicable), and a command center button. It also handles different states of the document,
+ * such as "not found" or "unsynced".
+ *
+ * @example
+ * ```jsx
+ * <DocumentBar />
+ * ```
+ * @param {Object}   props       The component props.
+ * @param {string}   props.title A title for the document, defaulting to the document or
+ *                               template title currently being edited.
+ * @param {IconType} props.icon  An icon for the document, no default.
+ *                               (A default icon indicating the document post type is no longer used.)
+ *
+ * @return {React.ReactNode} The rendered DocumentBar component.
+ */
+export default function DocumentBar( props ) {
+	const {
+		postId,
+		postType,
+		postTypeLabel,
+		documentTitle,
+		isNotFound,
+		templateTitle,
+		onNavigateToPreviousEntityRecord,
+		isTemplatePreview,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+			getRenderingMode,
+		} = select( editorStore );
+
+		const {
+			getEditedEntityRecord,
+			getPostType,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
+		const _postType = getCurrentPostType();
+		const _postId = getCurrentPostId();
+		const _document = getEditedEntityRecord(
+			'postType',
+			_postType,
+			_postId
+		);
+
+		const { default_template_types: templateTypes = [] } =
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' ) ??
+			{};
+
+		const _templateInfo = getTemplateInfo( {
+			templateTypes,
+			template: _document,
+		} );
+		const _postTypeLabel = getPostType( _postType )?.labels?.singular_name;
+
+		return {
+			postId: _postId,
+			postType: _postType,
+			postTypeLabel: _postTypeLabel,
+			documentTitle: _document.title,
+			isNotFound:
+				! _document &&
+				! isResolvingSelector(
+					'getEditedEntityRecord',
+					'postType',
+					_postType,
+					_postId
+				),
+			templateTitle: _templateInfo.title,
+			onNavigateToPreviousEntityRecord:
+				getEditorSettings().onNavigateToPreviousEntityRecord,
+			isTemplatePreview: getRenderingMode() === 'template-locked',
+		};
+	}, [] );
+
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const isReducedMotion = useReducedMotion();
+
+	const isTemplate = TEMPLATE_POST_TYPES.includes( postType );
+	const hasBackButton = !! onNavigateToPreviousEntityRecord;
+	const entityTitle = isTemplate ? templateTitle : documentTitle;
+	const title = props.title || entityTitle;
+	const icon = props.icon;
+
+	const pageTypeBadge = usePageTypeBadge( postId );
+
+	const mountedRef = useRef( false );
+	useEffect( () => {
+		mountedRef.current = true;
+	}, [] );
+
+	return (
+		<div
+			className={ clsx( 'editor-document-bar', {
+				'has-back-button': hasBackButton,
+			} ) }
+		>
+			<AnimatePresence>
+				{ hasBackButton && (
+					<MotionButton
+						className="editor-document-bar__back"
+						icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+						onClick={ ( event ) => {
+							event.stopPropagation();
+							onNavigateToPreviousEntityRecord();
+						} }
+						size="compact"
+						initial={
+							mountedRef.current
+								? { opacity: 0, transform: 'translateX(15%)' }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ { opacity: 1, transform: 'translateX(0%)' } }
+						exit={ { opacity: 0, transform: 'translateX(15%)' } }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
+					>
+						{ __( 'Back' ) }
+					</MotionButton>
+				) }
+			</AnimatePresence>
+			{ ! isTemplate && isTemplatePreview && (
+				<BlockIcon
+					icon={ layout }
+					className="editor-document-bar__icon-layout"
+				/>
+			) }
+			{ isNotFound ? (
+				<Text>{ __( 'Document not found' ) }</Text>
+			) : (
+				<Button
+					className="editor-document-bar__command"
+					onClick={ () => openCommandCenter() }
+					size="compact"
+				>
+					<motion.div
+						className="editor-document-bar__title"
+						// Force entry animation when the back button is added or removed.
+						key={ hasBackButton }
+						initial={
+							mountedRef.current
+								? {
+										opacity: 0,
+										transform: hasBackButton
+											? 'translateX(15%)'
+											: 'translateX(-15%)',
+								  }
+								: false // Don't show entry animation when DocumentBar mounts.
+						}
+						animate={ {
+							opacity: 1,
+							transform: 'translateX(0%)',
+						} }
+						transition={
+							isReducedMotion ? { duration: 0 } : undefined
+						}
+					>
+						{ icon && <BlockIcon icon={ icon } /> }
+						<Text size="body" as="h1">
+							<span className="editor-document-bar__post-title">
+								{ title
+									? decodeEntities( title )
+									: __( 'No title' ) }
+							</span>
+							{ pageTypeBadge && (
+								<span className="editor-document-bar__post-type-label">
+									{ `· ${ pageTypeBadge }` }
+								</span>
+							) }
+							{ postTypeLabel &&
+								! props.title &&
+								! pageTypeBadge && (
+									<span className="editor-document-bar__post-type-label">
+										{ `· ${ decodeEntities(
+											postTypeLabel
+										) }` }
+									</span>
+								) }
+						</Text>
+					</motion.div>
+					<span className="editor-document-bar__shortcut">
+						{ displayShortcut.primary( 'k' ) }
+					</span>
+				</Button>
+			) }
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
new file mode 100644
index 00000000000000..749da6ec8c9837
--- /dev/null
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -0,0 +1,117 @@
+.editor-document-bar {
+	display: flex;
+	align-items: center;
+	height: $button-size-compact;
+	justify-content: space-between;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+	background: $gray-100;
+	border-radius: $grid-unit-05;
+	width: min(100%, 450px);
+
+	&:hover {
+		background-color: $gray-200;
+	}
+
+	.components-button {
+		border-radius: $grid-unit-05;
+		transition: all 0.1s ease-out;
+		@include reduce-motion("transition");
+
+		&:hover {
+			background: $gray-200;
+		}
+	}
+
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: #{ ($break-large) }) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
+	}
+}
+
+.editor-document-bar__command {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+}
+
+.editor-document-bar__title {
+	overflow: hidden;
+	color: $gray-900;
+	margin: 0 auto;
+	max-width: 70%;
+
+	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
+	@include break-medium() {
+		padding-left: $grid-unit-30;
+	}
+
+	h1 {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 400;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+
+.editor-document-bar__post-title {
+	color: currentColor;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.editor-document-bar__post-type-label {
+	flex: 0;
+	color: $gray-800;
+	padding-left: $grid-unit-05;
+
+	@media screen and (max-width: #{ ($break-small) }) {
+		display: none;
+	}
+}
+
+.editor-document-bar__shortcut {
+	color: $gray-800;
+	min-width: $grid-unit-30;
+	display: none;
+
+	@include break-medium() {
+		display: initial;
+	}
+}
+
+.editor-document-bar__back.components-button.has-icon.has-text {
+	min-width: $button-size;
+	flex-shrink: 0;
+	color: $gray-700;
+	gap: 0;
+	z-index: 1;
+	position: absolute;
+
+	&:hover {
+		color: $gray-900;
+		background-color: transparent;
+	}
+}
+
+.editor-document-bar__icon-layout.editor-document-bar__icon-layout {
+	position: absolute;
+	margin-left: $grid-unit-15;
+	display: none;
+	pointer-events: none;
+	svg {
+		fill: $gray-600;
+	}
+	@include break-small {
+		display: flex;
+	}
+}
diff --git a/packages/editor/src/components/document-outline/check.js b/packages/editor/src/components/document-outline/check.js
index 324b9380ca63a3..87864cbb34a369 100644
--- a/packages/editor/src/components/document-outline/check.js
+++ b/packages/editor/src/components/document-outline/check.js
@@ -1,27 +1,27 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { filter } from 'lodash';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
- * WordPress dependencies
+ * Component check if there are any headings (core/heading blocks) present in the document.
+ *
+ * @param {Object}             props          Props.
+ * @param {React.ReactElement} props.children Children to be rendered.
+ *
+ * @return {React.ReactElement} The component to be rendered or null if there are headings.
  */
-import { withSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+export default function DocumentOutlineCheck( { children } ) {
+	const hasHeadings = useSelect( ( select ) => {
+		const { getGlobalBlockCount } = select( blockEditorStore );
 
-function DocumentOutlineCheck( { blocks, children } ) {
-	const headings = filter(
-		blocks,
-		( block ) => block.name === 'core/heading'
-	);
+		return getGlobalBlockCount( 'core/heading' ) > 0;
+	} );
 
-	if ( headings.length < 1 ) {
+	if ( ! hasHeadings ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default withSelect( ( select ) => ( {
-	blocks: select( blockEditorStore ).getBlocks(),
-} ) )( DocumentOutlineCheck );
diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js
index 49d19e360edc85..89f853798296ae 100644
--- a/packages/editor/src/components/document-outline/index.js
+++ b/packages/editor/src/components/document-outline/index.js
@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 import { create, getTextContent } from '@wordpress/rich-text';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { Path, SVG, Line, Rect } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -34,6 +35,43 @@ const multipleH1Headings = [
 		{ __( '(Multiple H1 headings are not recommended)' ) }
 	</em>,
 ];
+function EmptyOutlineIllustration() {
+	return (
+		<SVG
+			width="138"
+			height="148"
+			viewBox="0 0 138 148"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Rect width="138" height="148" rx="4" fill="#F0F6FC" />
+			<Line x1="44" y1="28" x2="24" y2="28" stroke="#DDDDDD" />
+			<Rect x="48" y="16" width="27" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M54.7585 32V23.2727H56.6037V26.8736H60.3494V23.2727H62.1903V32H60.3494V28.3949H56.6037V32H54.7585ZM67.4574 23.2727V32H65.6122V25.0241H65.5611L63.5625 26.277V24.6406L65.723 23.2727H67.4574Z"
+				fill="black"
+			/>
+			<Line x1="55" y1="59" x2="24" y2="59" stroke="#DDDDDD" />
+			<Rect x="59" y="47" width="29" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M65.7585 63V54.2727H67.6037V57.8736H71.3494V54.2727H73.1903V63H71.3494V59.3949H67.6037V63H65.7585ZM74.6605 63V61.6705L77.767 58.794C78.0313 58.5384 78.2528 58.3082 78.4318 58.1037C78.6136 57.8991 78.7514 57.6989 78.8452 57.5028C78.9389 57.304 78.9858 57.0895 78.9858 56.8594C78.9858 56.6037 78.9276 56.3835 78.8111 56.1989C78.6946 56.0114 78.5355 55.8679 78.3338 55.7685C78.1321 55.6662 77.9034 55.6151 77.6477 55.6151C77.3807 55.6151 77.1477 55.669 76.9489 55.777C76.75 55.8849 76.5966 56.0398 76.4886 56.2415C76.3807 56.4432 76.3267 56.6832 76.3267 56.9616H74.5753C74.5753 56.3906 74.7045 55.8949 74.9631 55.4744C75.2216 55.054 75.5838 54.7287 76.0497 54.4986C76.5156 54.2685 77.0526 54.1534 77.6605 54.1534C78.2855 54.1534 78.8295 54.2642 79.2926 54.4858C79.7585 54.7045 80.1207 55.0085 80.3793 55.3977C80.6378 55.7869 80.767 56.233 80.767 56.7358C80.767 57.0653 80.7017 57.3906 80.571 57.7116C80.4432 58.0327 80.2145 58.3892 79.8849 58.7812C79.5554 59.1705 79.0909 59.6378 78.4915 60.1832L77.2173 61.4318V61.4915H80.8821V63H74.6605Z"
+				fill="black"
+			/>
+			<Line x1="80" y1="90" x2="24" y2="90" stroke="#DDDDDD" />
+			<Rect x="84" y="78" width="30" height="23" rx="4" fill="#F0B849" />
+			<Path
+				d="M90.7585 94V85.2727H92.6037V88.8736H96.3494V85.2727H98.1903V94H96.3494V90.3949H92.6037V94H90.7585ZM99.5284 92.4659V91.0128L103.172 85.2727H104.425V87.2841H103.683L101.386 90.919V90.9872H106.564V92.4659H99.5284ZM103.717 94V92.0227L103.751 91.3793V85.2727H105.482V94H103.717Z"
+				fill="black"
+			/>
+			<Line x1="66" y1="121" x2="24" y2="121" stroke="#DDDDDD" />
+			<Rect x="70" y="109" width="29" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M76.7585 125V116.273H78.6037V119.874H82.3494V116.273H84.1903V125H82.3494V121.395H78.6037V125H76.7585ZM88.8864 125.119C88.25 125.119 87.6832 125.01 87.1861 124.791C86.6918 124.57 86.3011 124.266 86.0142 123.879C85.7301 123.49 85.5838 123.041 85.5753 122.533H87.4332C87.4446 122.746 87.5142 122.933 87.642 123.095C87.7727 123.254 87.946 123.378 88.1619 123.466C88.3778 123.554 88.6207 123.598 88.8906 123.598C89.1719 123.598 89.4205 123.548 89.6364 123.449C89.8523 123.349 90.0213 123.212 90.1435 123.036C90.2656 122.859 90.3267 122.656 90.3267 122.426C90.3267 122.193 90.2614 121.987 90.1307 121.808C90.0028 121.626 89.8182 121.484 89.5767 121.382C89.3381 121.28 89.054 121.229 88.7244 121.229H87.9105V119.874H88.7244C89.0028 119.874 89.2486 119.825 89.4616 119.729C89.6776 119.632 89.8452 119.499 89.9645 119.328C90.0838 119.155 90.1435 118.953 90.1435 118.723C90.1435 118.504 90.0909 118.312 89.9858 118.148C89.8835 117.98 89.7386 117.849 89.5511 117.756C89.3665 117.662 89.1506 117.615 88.9034 117.615C88.6534 117.615 88.4247 117.661 88.2173 117.751C88.0099 117.839 87.8438 117.966 87.7188 118.131C87.5938 118.295 87.527 118.489 87.5185 118.71H85.75C85.7585 118.207 85.902 117.764 86.1804 117.381C86.4588 116.997 86.8338 116.697 87.3054 116.482C87.7798 116.263 88.3153 116.153 88.9119 116.153C89.5142 116.153 90.0412 116.263 90.4929 116.482C90.9446 116.7 91.2955 116.996 91.5455 117.368C91.7983 117.737 91.9233 118.152 91.9205 118.612C91.9233 119.101 91.7713 119.509 91.4645 119.835C91.1605 120.162 90.7642 120.369 90.2756 120.457V120.526C90.9176 120.608 91.4063 120.831 91.7415 121.195C92.0795 121.555 92.2472 122.007 92.2443 122.55C92.2472 123.047 92.1037 123.489 91.8139 123.875C91.527 124.261 91.1307 124.565 90.625 124.787C90.1193 125.009 89.5398 125.119 88.8864 125.119Z"
+				fill="black"
+			/>
+		</SVG>
+	);
+}
 
 /**
  * Returns an array of heading blocks enhanced with the following properties:
@@ -58,23 +96,52 @@ const computeOutlineHeadings = ( blocks = [] ) => {
 };
 
 const isEmptyHeading = ( heading ) =>
-	! heading.attributes.content || heading.attributes.content.length === 0;
+	! heading.attributes.content ||
+	heading.attributes.content.trim().length === 0;
 
-export const DocumentOutline = ( {
-	blocks = [],
-	title,
+/**
+ * Renders a document outline component.
+ *
+ * @param {Object}   props                         Props.
+ * @param {Function} props.onSelect                Function to be called when an outline item is selected
+ * @param {boolean}  props.hasOutlineItemsDisabled Indicates whether the outline items are disabled.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function DocumentOutline( {
 	onSelect,
-	isTitleSupported,
 	hasOutlineItemsDisabled,
-} ) => {
-	const headings = computeOutlineHeadings( blocks );
+} ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const { blocks, title, isTitleSupported } = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
+		return {
+			title: getEditedPostAttribute( 'title' ),
+			blocks: getBlocks(),
+			isTitleSupported: postType?.supports?.title ?? false,
+		};
+	} );
+
+	const prevHeadingLevelRef = useRef( 1 );
+
+	const headings = computeOutlineHeadings( blocks );
 	if ( headings.length < 1 ) {
-		return null;
+		return (
+			<div className="editor-document-outline has-no-headings">
+				<EmptyOutlineIllustration />
+				<p>
+					{ __(
+						'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+					) }
+				</p>
+			</div>
+		);
 	}
 
-	let prevHeadingLevel = 1;
-
 	// Not great but it's the simplest way to locate the title right now.
 	const titleNode = document.querySelector( '.editor-post-title__input' );
 	const hasTitle = isTitleSupported && title && titleNode;
@@ -104,7 +171,8 @@ export const DocumentOutline = ( {
 				{ headings.map( ( item, index ) => {
 					// Headings remain the same, go up by one, or down by any amount.
 					// Otherwise there are missing levels.
-					const isIncorrectLevel = item.level > prevHeadingLevel + 1;
+					const isIncorrectLevel =
+						item.level > prevHeadingLevelRef.current + 1;
 
 					const isValid =
 						! item.isEmpty &&
@@ -112,7 +180,7 @@ export const DocumentOutline = ( {
 						!! item.level &&
 						( item.level !== 1 ||
 							( ! hasMultipleH1 && ! hasTitle ) );
-					prevHeadingLevel = item.level;
+					prevHeadingLevelRef.current = item.level;
 
 					return (
 						<DocumentOutlineItem
@@ -121,7 +189,10 @@ export const DocumentOutline = ( {
 							isValid={ isValid }
 							isDisabled={ hasOutlineItemsDisabled }
 							href={ `#block-${ item.clientId }` }
-							onSelect={ onSelect }
+							onSelect={ () => {
+								selectBlock( item.clientId );
+								onSelect?.();
+							} }
 						>
 							{ item.isEmpty
 								? emptyHeadingContent
@@ -144,19 +215,4 @@ export const DocumentOutline = ( {
 			</ul>
 		</div>
 	);
-};
-
-export default compose(
-	withSelect( ( select ) => {
-		const { getBlocks } = select( blockEditorStore );
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			title: getEditedPostAttribute( 'title' ),
-			blocks: getBlocks(),
-			isTitleSupported: postType?.supports?.title ?? false,
-		};
-	} )
-)( DocumentOutline );
+}
diff --git a/packages/editor/src/components/document-outline/item.js b/packages/editor/src/components/document-outline/item.js
index 57ad25bfe74392..d202a2f6212a70 100644
--- a/packages/editor/src/components/document-outline/item.js
+++ b/packages/editor/src/components/document-outline/item.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TableOfContentsItem = ( {
 	children,
@@ -11,7 +11,7 @@ const TableOfContentsItem = ( {
 	onSelect,
 } ) => (
 	<li
-		className={ classnames(
+		className={ clsx(
 			'document-outline__item',
 			`is-${ level.toLowerCase() }`,
 			{
diff --git a/packages/editor/src/components/document-outline/style.scss b/packages/editor/src/components/document-outline/style.scss
index 852b40b58eb8f8..49ce0c9b2d1325 100644
--- a/packages/editor/src/components/document-outline/style.scss
+++ b/packages/editor/src/components/document-outline/style.scss
@@ -51,7 +51,7 @@
 	padding: 2px 5px 2px 1px;
 	color: $gray-900;
 	text-align: left;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 
 	&:disabled {
 		cursor: default;
@@ -81,3 +81,15 @@
 .document-outline__item-content {
 	padding: 1px 0;
 }
+
+.editor-document-outline.has-no-headings {
+	& > svg {
+		margin-top: $grid-unit-30 + $grid-unit-05;
+	}
+	& > p {
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+	}
+	text-align: center;
+	color: $gray-700;
+}
diff --git a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap b/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
deleted file mode 100644
index 27804e33f508b6..00000000000000
--- a/packages/editor/src/components/document-outline/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DocumentOutline header blocks present should match snapshot 1`] = `
-<ul>
-  <li
-    class="document-outline__item is-h2"
-  >
-    <a
-      class="document-outline__button"
-      href="#block-clientId_0"
-    >
-      <span
-        aria-hidden="true"
-        class="document-outline__emdash"
-      />
-      <strong
-        class="document-outline__level"
-      >
-        H2
-      </strong>
-      <span
-        class="document-outline__item-content"
-      >
-        Heading 2
-      </span>
-    </a>
-  </li>
-  <li
-    class="document-outline__item is-h3"
-  >
-    <a
-      class="document-outline__button"
-      href="#block-clientId_1"
-    >
-      <span
-        aria-hidden="true"
-        class="document-outline__emdash"
-      />
-      <strong
-        class="document-outline__level"
-      >
-        H3
-      </strong>
-      <span
-        class="document-outline__item-content"
-      >
-        Heading 3
-      </span>
-    </a>
-  </li>
-</ul>
-`;
-
-exports[`DocumentOutline header blocks present should render warnings for multiple h1 headings 1`] = `
-<ul>
-  <li
-    class="document-outline__item is-h1 is-invalid"
-  >
-    <a
-      class="document-outline__button"
-      href="#block-clientId_0"
-    >
-      <span
-        aria-hidden="true"
-        class="document-outline__emdash"
-      />
-      <strong
-        class="document-outline__level"
-      >
-        H1
-      </strong>
-      <span
-        class="document-outline__item-content"
-      >
-        Heading 1
-        <br />
-        <em>
-          (Multiple H1 headings are not recommended)
-        </em>
-      </span>
-    </a>
-  </li>
-  <li
-    class="document-outline__item is-h1 is-invalid"
-  >
-    <a
-      class="document-outline__button"
-      href="#block-clientId_2"
-    >
-      <span
-        aria-hidden="true"
-        class="document-outline__emdash"
-      />
-      <strong
-        class="document-outline__level"
-      >
-        H1
-      </strong>
-      <span
-        class="document-outline__item-content"
-      >
-        Heading 1
-        <br />
-        <em>
-          (Multiple H1 headings are not recommended)
-        </em>
-      </span>
-    </a>
-  </li>
-</ul>
-`;
diff --git a/packages/editor/src/components/document-outline/test/index.js b/packages/editor/src/components/document-outline/test/index.js
deleted file mode 100644
index 21c258c9a65df7..00000000000000
--- a/packages/editor/src/components/document-outline/test/index.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, within } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
-import {
-	createBlock,
-	registerBlockType,
-	unregisterBlockType,
-} from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { DocumentOutline } from '../';
-
-jest.mock( '@wordpress/block-editor', () => ( {
-	BlockTitle: () => 'Block Title',
-} ) );
-
-describe( 'DocumentOutline', () => {
-	let paragraph, headingH1, headingH2, headingH3, nestedHeading;
-	beforeAll( () => {
-		registerBlockType( 'core/heading', {
-			category: 'text',
-			title: 'Heading',
-			edit: () => {},
-			save: () => {},
-			attributes: {
-				level: {
-					type: 'number',
-					default: 2,
-				},
-				content: {
-					type: 'string',
-				},
-			},
-		} );
-
-		registerBlockType( 'core/paragraph', {
-			category: 'text',
-			title: 'Paragraph',
-			edit: () => {},
-			save: () => {},
-		} );
-
-		registerBlockType( 'core/columns', {
-			category: 'text',
-			title: 'Paragraph',
-			edit: () => {},
-			save: () => {},
-		} );
-
-		paragraph = createBlock( 'core/paragraph' );
-		headingH1 = createBlock( 'core/heading', {
-			content: 'Heading 1',
-			level: 1,
-		} );
-		headingH2 = createBlock( 'core/heading', {
-			content: 'Heading 2',
-			level: 2,
-		} );
-		headingH3 = createBlock( 'core/heading', {
-			content: 'Heading 3',
-			level: 3,
-		} );
-		nestedHeading = createBlock( 'core/columns', undefined, [ headingH3 ] );
-	} );
-
-	afterAll( () => {
-		unregisterBlockType( 'core/heading' );
-		unregisterBlockType( 'core/paragraph' );
-	} );
-
-	describe( 'no header blocks present', () => {
-		it( 'should not render when no blocks provided', () => {
-			render( <DocumentOutline /> );
-
-			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
-		} );
-
-		it( 'should not render when no heading blocks provided', () => {
-			const blocks = [ paragraph ].map( ( block, index ) => {
-				// Set client IDs to a predictable value.
-				return { ...block, clientId: `clientId_${ index }` };
-			} );
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			expect( screen.queryByRole( 'list' ) ).not.toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'header blocks present', () => {
-		it( 'should match snapshot', () => {
-			const blocks = [ headingH2, headingH3 ].map( ( block, index ) => {
-				// Set client IDs to a predictable value.
-				return { ...block, clientId: `clientId_${ index }` };
-			} );
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
-		} );
-
-		it( 'should render an item when only one heading provided', () => {
-			const blocks = [ headingH2 ];
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			const tableOfContentItem = within(
-				screen.getByRole( 'list' )
-			).getByRole( 'listitem' );
-			expect( tableOfContentItem ).toBeInTheDocument();
-			expect( tableOfContentItem ).toHaveTextContent( 'Heading 2' );
-		} );
-
-		it( 'should render two items when two headings and some paragraphs provided', () => {
-			const blocks = [
-				paragraph,
-				headingH2,
-				paragraph,
-				headingH3,
-				paragraph,
-			];
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			expect(
-				within( screen.getByRole( 'list' ) ).getAllByRole( 'listitem' )
-			).toHaveLength( 2 );
-		} );
-
-		it( 'should render warnings for multiple h1 headings', () => {
-			const blocks = [ headingH1, paragraph, headingH1, paragraph ].map(
-				( block, index ) => {
-					// Set client IDs to a predictable value.
-					return { ...block, clientId: `clientId_${ index }` };
-				}
-			);
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			expect( screen.getByRole( 'list' ) ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'nested headings', () => {
-		it( 'should render even if the heading is nested', () => {
-			const blocks = [ headingH2, nestedHeading ];
-			render( <DocumentOutline blocks={ blocks } /> );
-
-			// Unnested heading and nested heading should appear as items.
-			const tableOfContentItems = within(
-				screen.getByRole( 'list' )
-			).getAllByRole( 'listitem' );
-			expect( tableOfContentItems ).toHaveLength( 2 );
-
-			// Unnested heading test.
-			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'H2' );
-			expect( tableOfContentItems[ 0 ] ).toHaveTextContent( 'Heading 2' );
-
-			// Nested heading test.
-			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'H3' );
-			expect( tableOfContentItems[ 1 ] ).toHaveTextContent( 'Heading 3' );
-		} );
-	} );
-} );
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
new file mode 100644
index 00000000000000..a98def685e93a6
--- /dev/null
+++ b/packages/editor/src/components/document-tools/index.js
@@ -0,0 +1,188 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { listView, plus } from '@wordpress/icons';
+import { useCallback } from '@wordpress/element';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import EditorHistoryRedo from '../editor-history/redo';
+import EditorHistoryUndo from '../editor-history/undo';
+
+function DocumentTools( { className, disableBlockTools = false } ) {
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editorStore );
+	const {
+		isDistractionFree,
+		isInserterOpened,
+		isListViewOpen,
+		listViewShortcut,
+		inserterSidebarToggleRef,
+		listViewToggleRef,
+		showIconLabels,
+		showTools,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const {
+			isListViewOpened,
+			getEditorMode,
+			getInserterSidebarToggleRef,
+			getListViewToggleRef,
+			getRenderingMode,
+			getCurrentPostType,
+		} = unlock( select( editorStore ) );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+		return {
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation(
+				'core/editor/toggle-list-view'
+			),
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
+			listViewToggleRef: getListViewToggleRef(),
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			isVisualMode: getEditorMode() === 'visual',
+			showTools:
+				!! window?.__experimentalEditorWriteMode &&
+				( getRenderingMode() !== 'post-only' ||
+					getCurrentPostType() === 'wp_template' ),
+		};
+	}, [] );
+
+	const preventDefault = ( event ) => {
+		// Because the inserter behaves like a dialog,
+		// if the inserter is opened already then when we click on the toggle button
+		// then the initial click event will close the inserter and then be propagated
+		// to the inserter toggle and it will open it again.
+		// To prevent this we need to stop the propagation of the event.
+		// This won't be necessary when the inserter no longer behaves like a dialog.
+
+		if ( isInserterOpened ) {
+			event.preventDefault();
+		}
+	};
+
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const isWideViewport = useViewportMatch( 'wide' );
+
+	/* translators: accessibility text for the editor toolbar */
+	const toolbarAriaLabel = __( 'Document tools' );
+
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
+	const toggleInserter = useCallback(
+		() => setIsInserterOpened( ! isInserterOpened ),
+		[ isInserterOpened, setIsInserterOpened ]
+	);
+
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Block Inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
+
+	return (
+		// Some plugins expect and use the `edit-post-header-toolbar` CSS class to
+		// find the toolbar and inject UI elements into it. This is not officially
+		// supported, but we're keeping it in the list of class names for backwards
+		// compatibility.
+		<NavigableToolbar
+			className={ clsx(
+				'editor-document-tools',
+				'edit-post-header-toolbar',
+				className
+			) }
+			aria-label={ toolbarAriaLabel }
+			variant="unstyled"
+		>
+			<div className="editor-document-tools__left">
+				{ ! isDistractionFree && (
+					<ToolbarItem
+						ref={ inserterSidebarToggleRef }
+						as={ Button }
+						className="editor-document-tools__inserter-toggle"
+						variant="primary"
+						isPressed={ isInserterOpened }
+						onMouseDown={ preventDefault }
+						onClick={ toggleInserter }
+						disabled={ disableBlockTools }
+						icon={ plus }
+						label={ showIconLabels ? shortLabel : longLabel }
+						showTooltip={ ! showIconLabels }
+						aria-expanded={ isInserterOpened }
+					/>
+				) }
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<>
+						{ showTools && isLargeViewport && (
+							<ToolbarItem
+								as={ ToolSelector }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								disabled={ disableBlockTools }
+								size="compact"
+							/>
+						) }
+						<ToolbarItem
+							as={ EditorHistoryUndo }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
+						/>
+						<ToolbarItem
+							as={ EditorHistoryRedo }
+							showTooltip={ ! showIconLabels }
+							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
+						/>
+						{ ! isDistractionFree && (
+							<ToolbarItem
+								as={ Button }
+								className="editor-document-tools__document-overview-toggle"
+								icon={ listView }
+								disabled={ disableBlockTools }
+								isPressed={ isListViewOpen }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'Document Overview' ) }
+								onClick={ toggleListView }
+								shortcut={ listViewShortcut }
+								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
+								aria-expanded={ isListViewOpen }
+								ref={ listViewToggleRef }
+								size="compact"
+							/>
+						) }
+					</>
+				) }
+			</div>
+		</NavigableToolbar>
+	);
+}
+
+export default DocumentTools;
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
new file mode 100644
index 00000000000000..a1abfd5abd7aef
--- /dev/null
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -0,0 +1,91 @@
+.editor-document-tools {
+	display: inline-flex;
+	align-items: center;
+
+	// Hide all action buttons except the inserter on mobile.
+	.editor-document-tools__left > .editor-history__redo,
+	.editor-document-tools__left > .editor-history__undo {
+		display: none;
+
+		@include break-medium() {
+			display: inline-flex;
+		}
+	}
+
+	.editor-document-tools__left > .editor-document-tools__inserter-toggle {
+		display: inline-flex;
+
+		svg {
+			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			@include reduce-motion("transition");
+		}
+
+		&.is-pressed {
+			svg {
+				transform: rotate(45deg);
+			}
+		}
+	}
+
+	// Hide table of contents and list view on mobile.
+	.block-editor-list-view {
+		display: none;
+
+		@include break-small() {
+			display: flex;
+		}
+	}
+
+	// The Toolbar component adds different styles to buttons, so we reset them
+	// here to the original button styles
+	.editor-document-tools__left > .components-button.has-icon,
+	.editor-document-tools__left > .components-dropdown > .components-button.has-icon {
+		// @todo override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
+
+		&.is-pressed {
+			background: $gray-900;
+		}
+
+		&:focus:not(:disabled) {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
+			outline: $border-width solid transparent;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+}
+
+.editor-document-tools__left {
+	display: inline-flex;
+	align-items: center;
+	gap: $grid-unit-10;
+
+	// Some plugins add buttons here despite best practices — accommodate them with a gap.
+	&:not(:last-child) {
+		margin-inline-end: $grid-unit-10;
+	}
+}
+
+.editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
+	min-width: $button-size-compact;
+	width: $button-size-compact;
+	height: $button-size-compact;
+	padding: 0;
+
+	.show-icon-labels & {
+		width: auto;
+		height: $button-size-compact;
+		padding: 0 $grid-unit-10;
+	}
+}
+
+.show-icon-labels .editor-document-tools__left > * + * {
+	margin-left: $grid-unit-10;
+}
diff --git a/packages/editor/src/components/editor-help/help-get-support-button.native.js b/packages/editor/src/components/editor-help/help-get-support-button.native.js
index 35802379fe9e47..5d6ad0a9dc4d33 100644
--- a/packages/editor/src/components/editor-help/help-get-support-button.native.js
+++ b/packages/editor/src/components/editor-help/help-get-support-button.native.js
@@ -28,7 +28,7 @@ const HelpGetSupportButton = ( { onPress, title } ) => {
 		<Pressable
 			style={ buttonStyle }
 			onPress={ onPress }
-			accessibilityRole={ 'button' }
+			accessibilityRole="button"
 		>
 			<Text style={ textStyle }>{ title }</Text>
 		</Pressable>
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
index f2de9ed80a0201..5aeee5fba49b1c 100644
--- a/packages/editor/src/components/editor-help/index.native.js
+++ b/packages/editor/src/components/editor-help/index.native.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
@@ -40,24 +39,37 @@ import HelpSectionTitle from './help-section-title';
 const HELP_TOPICS = [
 	{
 		label: __( 'What is a block?' ),
+		slug: 'what-is-a-block',
 		icon: helpFilled,
 		view: <IntroToBlocks />,
 	},
 	{
 		label: __( 'Add blocks' ),
+		slug: 'add-blocks',
 		icon: plusCircleFilled,
 		view: <AddBlocks />,
 	},
-	{ label: __( 'Move blocks' ), icon: moveBlocksIcon, view: <MoveBlocks /> },
-	{ label: __( 'Remove blocks' ), icon: trash, view: <RemoveBlocks /> },
+	{
+		label: __( 'Move blocks' ),
+		slug: 'move-blocks',
+		icon: moveBlocksIcon,
+		view: <MoveBlocks />,
+	},
+	{
+		label: __( 'Remove blocks' ),
+		slug: 'remove-blocks',
+		icon: trash,
+		view: <RemoveBlocks />,
+	},
 	{
 		label: __( 'Customize blocks' ),
+		slug: 'customize-blocks',
 		icon: cog,
 		view: <CustomizeBlocks />,
 	},
 ];
 
-function EditorHelpTopics( { close, isVisible, onClose } ) {
+function EditorHelpTopics( { close, isVisible, onClose, showSupport } ) {
 	const { postType } = useSelect( ( select ) => ( {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
@@ -67,6 +79,20 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			? __( 'How to edit your page' )
 			: __( 'How to edit your post' );
 
+	const supportSection = (
+		<>
+			<HelpSectionTitle>{ __( 'Get support' ) }</HelpSectionTitle>
+			<HelpGetSupportButton
+				title={ __( 'Contact support' ) }
+				onPress={ requestContactCustomerSupport }
+			/>
+			<HelpGetSupportButton
+				title={ __( 'More support options' ) }
+				onPress={ requestGotoCustomerSupportOptions }
+			/>
+		</>
+	);
+
 	return (
 		<BottomSheet
 			isVisible={ isVisible }
@@ -76,7 +102,7 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 			contentStyle={ styles.contentContainer }
 			testID="editor-help-modal"
 		>
-			<SafeAreaView>
+			<SafeAreaView style={ styles.safeAreaContainer }>
 				<BottomSheet.NavigationContainer
 					animate
 					main
@@ -127,24 +153,20 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
 													(
-														{ label, icon },
+														{ label, icon, slug },
 														index
 													) => {
-														const labelSlug =
-															kebabCase( label );
 														const isLastItem =
 															index ===
 															HELP_TOPICS.length -
 																1;
 														return (
 															<HelpTopicRow
-																key={
-																	labelSlug
-																}
+																key={ slug }
 																label={ label }
 																icon={ icon }
 																screenName={
-																	labelSlug
+																	slug
 																}
 																isLastItem={
 																	isLastItem
@@ -153,31 +175,8 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 														);
 													}
 												) }
-												{
-													<HelpSectionTitle>
-														{ __( 'Get support' ) }
-													</HelpSectionTitle>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'Contact support'
-														) }
-														onPress={
-															requestContactCustomerSupport
-														}
-													/>
-												}
-												{
-													<HelpGetSupportButton
-														title={ __(
-															'More support options'
-														) }
-														onPress={
-															requestGotoCustomerSupportOptions
-														}
-													/>
-												}
+												{ showSupport &&
+													supportSection }
 											</PanelBody>
 										</ScrollView>
 									);
@@ -186,12 +185,11 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 						</View>
 					</BottomSheet.NavigationScreen>
 					{ /* Print out help detail screens. */ }
-					{ HELP_TOPICS.map( ( { view, label } ) => {
-						const labelSlug = kebabCase( label );
+					{ HELP_TOPICS.map( ( { view, label, slug } ) => {
 						return (
 							<HelpDetailNavigationScreen
-								key={ labelSlug }
-								name={ labelSlug }
+								key={ slug }
+								name={ slug }
 								content={ view }
 								label={ label }
 								options={ {
diff --git a/packages/editor/src/components/editor-help/intro-to-blocks.native.js b/packages/editor/src/components/editor-help/intro-to-blocks.native.js
index 79e5711b72d05c..3dc23ec2619172 100644
--- a/packages/editor/src/components/editor-help/intro-to-blocks.native.js
+++ b/packages/editor/src/components/editor-help/intro-to-blocks.native.js
@@ -51,7 +51,7 @@ const IntroToBlocks = () => {
 					) }
 				/>
 				<HelpDetailImage
-					accessible={ true }
+					accessible
 					accessibilityLabel={ __(
 						'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'
 					) }
diff --git a/packages/editor/src/components/editor-help/style.scss b/packages/editor/src/components/editor-help/style.scss
index 8058f00381da95..529a9e4deef7bf 100644
--- a/packages/editor/src/components/editor-help/style.scss
+++ b/packages/editor/src/components/editor-help/style.scss
@@ -19,7 +19,12 @@
 	color: $dark-primary;
 }
 
+.safeAreaContainer {
+	flex: 1;
+}
+
 .navigationContainer {
+	flex: 1;
 	overflow: hidden;
 }
 
diff --git a/packages/editor/src/components/editor-help/test/index.native.js b/packages/editor/src/components/editor-help/test/index.native.js
index 294eb12689aff6..1695590a769d34 100644
--- a/packages/editor/src/components/editor-help/test/index.native.js
+++ b/packages/editor/src/components/editor-help/test/index.native.js
@@ -35,12 +35,13 @@ it( 'navigates back from help topic detail screen', async () => {
 	const backButton = screen.getAllByLabelText( 'Go back' );
 	fireEvent.press( backButton[ backButton.length - 1 ] );
 
-	// Currently logs `act` warning due to https://github.com/callstack/react-native-testing-library/issues/379
+	const text =
+		'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.';
 	await waitForElementToBeRemoved( () =>
-		screen.getByText(
-			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'
-		)
+		screen.getByText( text, { hidden: true } )
 	);
+
+	expect( screen.queryByText( text ) ).toBeNull();
 } );
 
 it( 'dismisses when close button is pressed', async () => {
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index 1383360a94bf1e..b2b20555f30544 100644
--- a/packages/editor/src/components/editor-history/redo.js
+++ b/packages/editor/src/components/editor-history/redo.js
@@ -25,6 +25,7 @@ function EditorHistoryRedo( props, ref ) {
 	const { redo } = useDispatch( editorStore );
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
@@ -41,4 +42,14 @@ function EditorHistoryRedo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the redo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
 export default forwardRef( EditorHistoryRedo );
diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js
index b13eb3162b9623..fe8cce72c4197e 100644
--- a/packages/editor/src/components/editor-history/undo.js
+++ b/packages/editor/src/components/editor-history/undo.js
@@ -21,6 +21,7 @@ function EditorHistoryUndo( props, ref ) {
 	const { undo } = useDispatch( editorStore );
 	return (
 		<Button
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ ref }
 			icon={ ! isRTL() ? undoIcon : redoIcon }
@@ -37,4 +38,14 @@ function EditorHistoryUndo( props, ref ) {
 	);
 }
 
+/** @typedef {import('react').Ref<HTMLElement>} Ref */
+
+/**
+ * Renders the undo button for the editor history.
+ *
+ * @param {Object} props - Props.
+ * @param {Ref}    ref   - Forwarded ref.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
 export default forwardRef( EditorHistoryUndo );
diff --git a/packages/editor/src/components/editor-interface/content-slot-fill.js b/packages/editor/src/components/editor-interface/content-slot-fill.js
new file mode 100644
index 00000000000000..ce1070b30da802
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/content-slot-fill.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const EditorContentSlotFill = createSlotFill(
+	Symbol( 'EditCanvasContainerSlot' )
+);
+
+export default EditorContentSlotFill;
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
new file mode 100644
index 00000000000000..6f6ffbec7b9c32
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -0,0 +1,215 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { BlockBreadcrumb, BlockToolbar } from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import EditorNotices from '../editor-notices';
+import Header from '../header';
+import InserterSidebar from '../inserter-sidebar';
+import ListViewSidebar from '../list-view-sidebar';
+import SavePublishPanels from '../save-publish-panels';
+import TextEditor from '../text-editor';
+import VisualEditor from '../visual-editor';
+import EditorContentSlotFill from './content-slot-fill';
+
+const interfaceLabels = {
+	/* translators: accessibility text for the editor top bar landmark region. */
+	header: __( 'Editor top bar' ),
+	/* translators: accessibility text for the editor content landmark region. */
+	body: __( 'Editor content' ),
+	/* translators: accessibility text for the editor settings landmark region. */
+	sidebar: __( 'Editor settings' ),
+	/* translators: accessibility text for the editor publish landmark region. */
+	actions: __( 'Editor publish' ),
+	/* translators: accessibility text for the editor footer landmark region. */
+	footer: __( 'Editor footer' ),
+};
+
+export default function EditorInterface( {
+	className,
+	styles,
+	children,
+	forceIsDirty,
+	contentRef,
+	disableIframe,
+	autoFocus,
+	customSaveButton,
+	customSavePanel,
+	forceDisableBlockTools,
+	title,
+	iframeProps,
+} ) {
+	const {
+		mode,
+		isRichEditingEnabled,
+		isInserterOpened,
+		isListViewOpened,
+		isDistractionFree,
+		isPreviewMode,
+		showBlockBreadcrumbs,
+		documentLabel,
+	} = useSelect( ( select ) => {
+		const { get } = select( preferencesStore );
+		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
+		const editorSettings = getEditorSettings();
+		const postTypeLabel = getPostTypeLabel();
+
+		return {
+			mode: select( editorStore ).getEditorMode(),
+			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			isInserterOpened: select( editorStore ).isInserterOpened(),
+			isListViewOpened: select( editorStore ).isListViewOpened(),
+			isDistractionFree: get( 'core', 'distractionFree' ),
+			isPreviewMode: editorSettings.isPreviewMode,
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			documentLabel:
+				// translators: Default label for the Document in the Block Breadcrumb.
+				postTypeLabel || _x( 'Document', 'noun, breadcrumb' ),
+		};
+	}, [] );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const secondarySidebarLabel = isListViewOpened
+		? __( 'Document Overview' )
+		: __( 'Block Library' );
+
+	// Local state for save panel.
+	// Note 'truthy' callback implies an open panel.
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
+	const closeEntitiesSavedStates = useCallback(
+		( arg ) => {
+			if ( typeof entitiesSavedStatesCallback === 'function' ) {
+				entitiesSavedStatesCallback( arg );
+			}
+			setEntitiesSavedStatesCallback( false );
+		},
+		[ entitiesSavedStatesCallback ]
+	);
+
+	return (
+		<InterfaceSkeleton
+			isDistractionFree={ isDistractionFree }
+			className={ clsx( 'editor-editor-interface', className, {
+				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
+				'is-distraction-free': isDistractionFree && ! isPreviewMode,
+			} ) }
+			labels={ {
+				...interfaceLabels,
+				secondarySidebar: secondarySidebarLabel,
+			} }
+			header={
+				! isPreviewMode && (
+					<Header
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+						customSaveButton={ customSaveButton }
+						forceDisableBlockTools={ forceDisableBlockTools }
+						title={ title }
+					/>
+				)
+			}
+			editorNotices={ <EditorNotices /> }
+			secondarySidebar={
+				! isPreviewMode &&
+				mode === 'visual' &&
+				( ( isInserterOpened && <InserterSidebar /> ) ||
+					( isListViewOpened && <ListViewSidebar /> ) )
+			}
+			sidebar={
+				! isPreviewMode &&
+				! isDistractionFree && <ComplementaryArea.Slot scope="core" />
+			}
+			content={
+				<>
+					{ ! isDistractionFree && ! isPreviewMode && (
+						<EditorNotices />
+					) }
+
+					<EditorContentSlotFill.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView ? (
+								editorCanvasView
+							) : (
+								<>
+									{ ! isPreviewMode &&
+										( mode === 'text' ||
+											! isRichEditingEnabled ) && (
+											<TextEditor
+												// We should auto-focus the canvas (title) on load.
+												// eslint-disable-next-line jsx-a11y/no-autofocus
+												autoFocus={ autoFocus }
+											/>
+										) }
+									{ ! isPreviewMode &&
+										! isLargeViewport &&
+										mode === 'visual' && (
+											<BlockToolbar hideDragHandle />
+										) }
+									{ ( isPreviewMode ||
+										( isRichEditingEnabled &&
+											mode === 'visual' ) ) && (
+										<VisualEditor
+											styles={ styles }
+											contentRef={ contentRef }
+											disableIframe={ disableIframe }
+											// We should auto-focus the canvas (title) on load.
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ autoFocus }
+											iframeProps={ iframeProps }
+										/>
+									) }
+									{ children }
+								</>
+							)
+						}
+					</EditorContentSlotFill.Slot>
+				</>
+			}
+			footer={
+				! isPreviewMode &&
+				! isDistractionFree &&
+				isLargeViewport &&
+				showBlockBreadcrumbs &&
+				isRichEditingEnabled &&
+				mode === 'visual' && (
+					<BlockBreadcrumb rootLabelText={ documentLabel } />
+				)
+			}
+			actions={
+				! isPreviewMode
+					? customSavePanel || (
+							<SavePublishPanels
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+								forceIsDirtyPublishPanel={ forceIsDirty }
+							/>
+					  )
+					: undefined
+			}
+		/>
+	);
+}
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
new file mode 100644
index 00000000000000..7219e03058fc4c
--- /dev/null
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -0,0 +1,13 @@
+.editor-editor-interface .entities-saved-states__panel-header {
+	height: $header-height + $border-width;
+}
+
+.editor-editor-interface .interface-interface-skeleton__content {
+	// Make this a stacking context to contain the z-index of children elements.
+	isolation: isolate;
+}
+
+.editor-visual-editor {
+	// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
+	flex: 1 1 0%;
+}
diff --git a/packages/editor/src/components/editor-notices/index.js b/packages/editor/src/components/editor-notices/index.js
index 1dd7b8e0e31bf7..5f095ef1a813c6 100644
--- a/packages/editor/src/components/editor-notices/index.js
+++ b/packages/editor/src/components/editor-notices/index.js
@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { NoticeList } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -16,15 +10,30 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
-export function EditorNotices( { notices, onRemove } ) {
-	const dismissibleNotices = filter( notices, {
-		isDismissible: true,
-		type: 'default',
-	} );
-	const nonDismissibleNotices = filter( notices, {
-		isDismissible: false,
-		type: 'default',
-	} );
+/**
+ * This component renders the notices displayed in the editor. It displays pinned notices first, followed by dismissible
+ *
+ * @example
+ * ```jsx
+ * <EditorNotices />
+ * ```
+ *
+ * @return {React.ReactNode} The rendered EditorNotices component.
+ */
+export function EditorNotices() {
+	const { notices } = useSelect(
+		( select ) => ( {
+			notices: select( noticesStore ).getNotices(),
+		} ),
+		[]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
+	const dismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => isDismissible && type === 'default'
+	);
+	const nonDismissibleNotices = notices.filter(
+		( { isDismissible, type } ) => ! isDismissible && type === 'default'
+	);
 
 	return (
 		<>
@@ -35,7 +44,7 @@ export function EditorNotices( { notices, onRemove } ) {
 			<NoticeList
 				notices={ dismissibleNotices }
 				className="components-editor-notices__dismissible"
-				onRemove={ onRemove }
+				onRemove={ removeNotice }
 			>
 				<TemplateValidationNotice />
 			</NoticeList>
@@ -43,11 +52,4 @@ export function EditorNotices( { notices, onRemove } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => ( {
-		notices: select( noticesStore ).getNotices(),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		onRemove: dispatch( noticesStore ).removeNotice,
-	} ) ),
-] )( EditorNotices );
+export default EditorNotices;
diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss
index f3b1f76285874f..85cd148bfea763 100644
--- a/packages/editor/src/components/editor-notices/style.scss
+++ b/packages/editor/src/components/editor-notices/style.scss
@@ -9,7 +9,6 @@
 
 	.components-notice {
 		box-sizing: border-box;
-		margin: 0;
 		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
 		padding: 0 $grid-unit-15;
 
diff --git a/packages/editor/src/components/editor-snackbars/index.js b/packages/editor/src/components/editor-snackbars/index.js
index 6dc01435eb4b45..9b781ee60dcaa5 100644
--- a/packages/editor/src/components/editor-snackbars/index.js
+++ b/packages/editor/src/components/editor-snackbars/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,15 +5,23 @@ import { SnackbarList } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+// Last three notices. Slices from the tail end of the list.
+const MAX_VISIBLE_NOTICES = -3;
+
+/**
+ * Renders the editor snackbars component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
 export default function EditorSnackbars() {
 	const notices = useSelect(
 		( select ) => select( noticesStore ).getNotices(),
 		[]
 	);
 	const { removeNotice } = useDispatch( noticesStore );
-	const snackbarNotices = filter( notices, {
-		type: 'snackbar',
-	} );
+	const snackbarNotices = notices
+		.filter( ( { type } ) => type === 'snackbar' )
+		.slice( MAX_VISIBLE_NOTICES );
 
 	return (
 		<SnackbarList
diff --git a/packages/editor/src/components/editor/index.js b/packages/editor/src/components/editor/index.js
new file mode 100644
index 00000000000000..21becea43cd7ee
--- /dev/null
+++ b/packages/editor/src/components/editor/index.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import EditorInterface from '../editor-interface';
+import { ExperimentalEditorProvider } from '../provider';
+import Sidebar from '../sidebar';
+
+function Editor( {
+	postType,
+	postId,
+	templateId,
+	settings,
+	children,
+	initialEdits,
+
+	// This could be part of the settings.
+	onActionPerformed,
+
+	// The following abstractions are not ideal but necessary
+	// to account for site editor and post editor differences for now.
+	extraContent,
+	extraSidebarPanels,
+	...props
+} ) {
+	const { post, template, hasLoadedPost } = useSelect(
+		( select ) => {
+			const { getEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			return {
+				post: getEntityRecord( 'postType', postType, postId ),
+				template: templateId
+					? getEntityRecord(
+							'postType',
+							TEMPLATE_POST_TYPE,
+							templateId
+					  )
+					: undefined,
+				hasLoadedPost: hasFinishedResolution( 'getEntityRecord', [
+					'postType',
+					postType,
+					postId,
+				] ),
+			};
+		},
+		[ postType, postId, templateId ]
+	);
+
+	return (
+		<>
+			{ hasLoadedPost && ! post && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+					) }
+				</Notice>
+			) }
+			{ !! post && (
+				<ExperimentalEditorProvider
+					post={ post }
+					__unstableTemplate={ template }
+					settings={ settings }
+					initialEdits={ initialEdits }
+					useSubRegistry={ false }
+				>
+					<EditorInterface { ...props }>
+						{ extraContent }
+					</EditorInterface>
+					{ children }
+					<Sidebar
+						onActionPerformed={ onActionPerformed }
+						extraPanels={ extraSidebarPanels }
+					/>
+				</ExperimentalEditorProvider>
+			) }
+		</>
+	);
+}
+
+export default Editor;
diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js
index 1e3ddcbc696686..e8219c4cca7ae1 100644
--- a/packages/editor/src/components/entities-saved-states/entity-record-item.js
+++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js
@@ -1,11 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, Button, PanelRow } from '@wordpress/components';
+import { CheckboxControl, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -13,34 +11,22 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { getTemplateInfo } from '../../utils/get-template-info';
 
-export default function EntityRecordItem( {
-	record,
-	checked,
-	onChange,
-	closePanel,
-} ) {
+export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
-	const parentBlockId = useSelect( ( select ) => {
-		// Get entity's blocks.
-		const { blocks = [] } = select( coreStore ).getEditedEntityRecord(
-			kind,
-			name,
-			key
-		);
-		// Get parents of the entity's first block.
-		const parents = select( blockEditorStore ).getBlockParents(
-			blocks[ 0 ]?.clientId
-		);
-		// Return closest parent block's clientId.
-		return parents[ parents.length - 1 ];
-	}, [] );
 
 	// Handle templates that might use default descriptive titles.
-	const entityRecordTitle = useSelect(
+	const { entityRecordTitle, hasPostMetaChanges } = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {
-				return title;
+				return {
+					entityRecordTitle: title,
+					hasPostMetaChanges: unlock(
+						select( editorStore )
+					).hasPostMetaChanges( name, key ),
+				};
 			}
 
 			const template = select( coreStore ).getEditedEntityRecord(
@@ -48,63 +34,43 @@ export default function EntityRecordItem( {
 				name,
 				key
 			);
-			return select( editorStore ).__experimentalGetTemplateInfo(
-				template
-			).title;
-		},
-		[ name, kind, title, key ]
-	);
 
-	const isSelected = useSelect(
-		( select ) => {
-			const selectedBlockId =
-				select( blockEditorStore ).getSelectedBlockClientId();
-			return selectedBlockId === parentBlockId;
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
+			return {
+				entityRecordTitle: getTemplateInfo( {
+					template,
+					templateTypes,
+				} ).title,
+				hasPostMetaChanges: unlock(
+					select( editorStore )
+				).hasPostMetaChanges( name, key ),
+			};
 		},
-		[ parentBlockId ]
-	);
-	const isSelectedText = isSelected ? __( 'Selected' ) : __( 'Select' );
-	const { selectBlock } = useDispatch( blockEditorStore );
-	const selectParentBlock = useCallback(
-		() => selectBlock( parentBlockId ),
-		[ parentBlockId ]
+		[ name, kind, title, key ]
 	);
-	const selectAndDismiss = useCallback( () => {
-		selectBlock( parentBlockId );
-		closePanel();
-	}, [ parentBlockId ] );
 
 	return (
-		<PanelRow>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={
-					<strong>
-						{ decodeEntities( entityRecordTitle ) ||
-							__( 'Untitled' ) }
-					</strong>
-				}
-				checked={ checked }
-				onChange={ onChange }
-			/>
-			{ parentBlockId ? (
-				<>
-					<Button
-						onClick={ selectParentBlock }
-						className="entities-saved-states__find-entity"
-						disabled={ isSelected }
-					>
-						{ isSelectedText }
-					</Button>
-					<Button
-						onClick={ selectAndDismiss }
-						className="entities-saved-states__find-entity-small"
-						disabled={ isSelected }
-					>
-						{ isSelectedText }
-					</Button>
-				</>
-			) : null }
-		</PanelRow>
+		<>
+			<PanelRow>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+				/>
+			</PanelRow>
+			{ hasPostMetaChanges && (
+				<ul className="entities-saved-states__changes">
+					<li>{ __( 'Post Meta.' ) }</li>
+				</ul>
+			) }
+		</>
 	);
 }
diff --git a/packages/editor/src/components/entities-saved-states/entity-type-list.js b/packages/editor/src/components/entities-saved-states/entity-type-list.js
index 6a323f8db5dfb2..71041dd9aebabd 100644
--- a/packages/editor/src/components/entities-saved-states/entity-type-list.js
+++ b/packages/editor/src/components/entities-saved-states/entity-type-list.js
@@ -5,11 +5,18 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
+import { unlock } from '../../lock-unlock';
+
+const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 function getEntityDescription( entity, count ) {
 	switch ( entity ) {
@@ -23,15 +30,51 @@ function getEntityDescription( entity, count ) {
 			);
 		case 'page':
 		case 'post':
-			return __( 'The following content has been modified.' );
+			return __( 'The following has been modified.' );
+	}
+}
+
+function GlobalStylesDescription( { record } ) {
+	const { user: currentEditorGlobalStyles } =
+		useContext( GlobalStylesContext );
+	const savedRecord = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord(
+				record.kind,
+				record.name,
+				record.key
+			),
+		[ record.kind, record.name, record.key ]
+	);
+
+	const globalStylesChanges = getGlobalStylesChanges(
+		currentEditorGlobalStyles,
+		savedRecord,
+		{
+			maxResults: 10,
+		}
+	);
+	return globalStylesChanges.length ? (
+		<ul className="entities-saved-states__changes">
+			{ globalStylesChanges.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
+	) : null;
+}
+
+function EntityDescription( { record, count } ) {
+	if ( 'globalStyles' === record?.name ) {
+		return null;
 	}
+	const description = getEntityDescription( record?.name, count );
+	return description ? <PanelRow>{ description }</PanelRow> : null;
 }
 
 export default function EntityTypeList( {
 	list,
 	unselectedEntities,
 	setUnselectedEntities,
-	closePanel,
 } ) {
 	const count = list.length;
 	const firstRecord = list[ 0 ];
@@ -43,19 +86,16 @@ export default function EntityTypeList( {
 			),
 		[ firstRecord.kind, firstRecord.name ]
 	);
-	const { name } = firstRecord;
 
 	let entityLabel = entityConfig.label;
-	if ( name === 'wp_template_part' ) {
+	if ( firstRecord?.name === 'wp_template_part' ) {
 		entityLabel =
 			1 === count ? __( 'Template Part' ) : __( 'Template Parts' );
 	}
-	// Set description based on type of entity.
-	const description = getEntityDescription( name, count );
 
 	return (
-		<PanelBody title={ entityLabel } initialOpen={ true }>
-			{ description && <PanelRow>{ description }</PanelRow> }
+		<PanelBody title={ entityLabel } initialOpen>
+			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (
 					<EntityRecordItem
@@ -73,10 +113,12 @@ export default function EntityTypeList( {
 						onChange={ ( value ) =>
 							setUnselectedEntities( record, value )
 						}
-						closePanel={ closePanel }
 					/>
 				);
 			} ) }
+			{ 'globalStyles' === firstRecord?.name && (
+				<GlobalStylesDescription record={ firstRecord } />
+			) }
 		</PanelBody>
 	);
 }
diff --git a/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js b/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js
new file mode 100644
index 00000000000000..2c3061e908c8d7
--- /dev/null
+++ b/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Custom hook that determines if any entities are dirty (edited) and provides a way to manage selected/unselected entities.
+ *
+ * @return {Object} An object containing the following properties:
+ *   - dirtyEntityRecords: An array of dirty entity records.
+ *   - isDirty: A boolean indicating if there are any dirty entity records.
+ *   - setUnselectedEntities: A function to set the unselected entities.
+ *   - unselectedEntities: An array of unselected entities.
+ */
+export const useIsDirty = () => {
+	const { editedEntities, siteEdits, siteEntityConfig } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getEntityRecordEdits,
+				getEntityConfig,
+			} = select( coreStore );
+
+			return {
+				editedEntities: __experimentalGetDirtyEntityRecords(),
+				siteEdits: getEntityRecordEdits( 'root', 'site' ),
+				siteEntityConfig: getEntityConfig( 'root', 'site' ),
+			};
+		},
+		[]
+	);
+
+	const dirtyEntityRecords = useMemo( () => {
+		// Remove site object and decouple into its edited pieces.
+		const editedEntitiesWithoutSite = editedEntities.filter(
+			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
+		);
+
+		const siteEntityLabels = siteEntityConfig?.meta?.labels ?? {};
+		const editedSiteEntities = [];
+		for ( const property in siteEdits ) {
+			editedSiteEntities.push( {
+				kind: 'root',
+				name: 'site',
+				title: siteEntityLabels[ property ] || property,
+				property,
+			} );
+		}
+
+		return [ ...editedEntitiesWithoutSite, ...editedSiteEntities ];
+	}, [ editedEntities, siteEdits, siteEntityConfig ] );
+
+	// Unchecked entities to be ignored by save function.
+	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
+
+	const setUnselectedEntities = (
+		{ kind, name, key, property },
+		checked
+	) => {
+		if ( checked ) {
+			_setUnselectedEntities(
+				unselectedEntities.filter(
+					( elt ) =>
+						elt.kind !== kind ||
+						elt.name !== name ||
+						elt.key !== key ||
+						elt.property !== property
+				)
+			);
+		} else {
+			_setUnselectedEntities( [
+				...unselectedEntities,
+				{ kind, name, key, property },
+			] );
+		}
+	};
+
+	const isDirty = dirtyEntityRecords.length - unselectedEntities.length > 0;
+
+	return {
+		dirtyEntityRecords,
+		isDirty,
+		setUnselectedEntities,
+		unselectedEntities,
+	};
+};
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 364e6ae694797c..ad584b0df75574 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -1,89 +1,91 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { Button, Flex, FlexItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useCallback, useRef } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __experimentalUseDialog as useDialog } from '@wordpress/compose';
-import { store as noticesStore } from '@wordpress/notices';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	useCallback,
+	useRef,
+	createInterpolateElement,
+} from '@wordpress/element';
+import {
+	__experimentalUseDialog as useDialog,
+	useInstanceId,
+} from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import EntityTypeList from './entity-type-list';
+import { useIsDirty } from './hooks/use-is-dirty';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-const TRANSLATED_SITE_PROPERTIES = {
-	title: __( 'Title' ),
-	description: __( 'Tagline' ),
-	site_logo: __( 'Logo' ),
-	site_icon: __( 'Icon' ),
-	show_on_front: __( 'Show on front' ),
-	page_on_front: __( 'Page on front' ),
-};
+function identity( values ) {
+	return values;
+}
 
-const PUBLISH_ON_SAVE_ENTITIES = [
-	{
-		kind: 'postType',
-		name: 'wp_navigation',
-	},
-];
+/**
+ * Renders the component for managing saved states of entities.
+ *
+ * @param {Object}   props              The component props.
+ * @param {Function} props.close        The function to close the dialog.
+ * @param {boolean}  props.renderDialog Whether to render the component with modal dialog behavior.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function EntitiesSavedStates( { close, renderDialog } ) {
+	const isDirtyProps = useIsDirty();
+	return (
+		<EntitiesSavedStatesExtensible
+			close={ close }
+			renderDialog={ renderDialog }
+			{ ...isDirtyProps }
+		/>
+	);
+}
 
-export default function EntitiesSavedStates( { close } ) {
+/**
+ * Renders a panel for saving entities with dirty records.
+ *
+ * @param {Object}   props                       The component props.
+ * @param {string}   props.additionalPrompt      Additional prompt to display.
+ * @param {Function} props.close                 Function to close the panel.
+ * @param {Function} props.onSave                Function to call when saving entities.
+ * @param {boolean}  props.saveEnabled           Flag indicating if save is enabled.
+ * @param {string}   props.saveLabel             Label for the save button.
+ * @param {boolean}  props.renderDialog          Whether to render the component with modal dialog behavior.
+ * @param {Array}    props.dirtyEntityRecords    Array of dirty entity records.
+ * @param {boolean}  props.isDirty               Flag indicating if there are dirty entities.
+ * @param {Function} props.setUnselectedEntities Function to set unselected entities.
+ * @param {Array}    props.unselectedEntities    Array of unselected entities.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export function EntitiesSavedStatesExtensible( {
+	additionalPrompt = undefined,
+	close,
+	onSave = identity,
+	saveEnabled: saveEnabledProp = undefined,
+	saveLabel = __( 'Save' ),
+	renderDialog,
+	dirtyEntityRecords,
+	isDirty,
+	setUnselectedEntities,
+	unselectedEntities,
+} ) {
 	const saveButtonRef = useRef();
-	const { dirtyEntityRecords } = useSelect( ( select ) => {
-		const dirtyRecords =
-			select( coreStore ).__experimentalGetDirtyEntityRecords();
-
-		// Remove site object and decouple into its edited pieces.
-		const dirtyRecordsWithoutSite = dirtyRecords.filter(
-			( record ) => ! ( record.kind === 'root' && record.name === 'site' )
-		);
-
-		const siteEdits = select( coreStore ).getEntityRecordEdits(
-			'root',
-			'site'
-		);
-
-		const siteEditsAsEntities = [];
-		for ( const property in siteEdits ) {
-			siteEditsAsEntities.push( {
-				kind: 'root',
-				name: 'site',
-				title: TRANSLATED_SITE_PROPERTIES[ property ] || property,
-				property,
-			} );
-		}
-		const dirtyRecordsWithSiteItems = [
-			...dirtyRecordsWithoutSite,
-			...siteEditsAsEntities,
-		];
-
-		return {
-			dirtyEntityRecords: dirtyRecordsWithSiteItems,
-		};
-	}, [] );
-	const {
-		editEntityRecord,
-		saveEditedEntityRecord,
-		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
-	} = useDispatch( coreStore );
-
-	const { __unstableMarkLastChangeAsPersistent } =
-		useDispatch( blockEditorStore );
-
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
+	const { saveDirtyEntities } = unlock( useDispatch( editorStore ) );
 	// To group entities by type.
-	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );
+	const partitionedSavables = dirtyEntityRecords.reduce( ( acc, record ) => {
+		const { name } = record;
+		if ( ! acc[ name ] ) {
+			acc[ name ] = [];
+		}
+		acc[ name ].push( record );
+		return acc;
+	}, {} );
 
 	// Sort entity groups.
 	const {
@@ -99,97 +101,7 @@ export default function EntitiesSavedStates( { close } ) {
 		...Object.values( contentSavables ),
 	].filter( Array.isArray );
 
-	// Unchecked entities to be ignored by save function.
-	const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
-
-	const setUnselectedEntities = (
-		{ kind, name, key, property },
-		checked
-	) => {
-		if ( checked ) {
-			_setUnselectedEntities(
-				unselectedEntities.filter(
-					( elt ) =>
-						elt.kind !== kind ||
-						elt.name !== name ||
-						elt.key !== key ||
-						elt.property !== property
-				)
-			);
-		} else {
-			_setUnselectedEntities( [
-				...unselectedEntities,
-				{ kind, name, key, property },
-			] );
-		}
-	};
-
-	const saveCheckedEntities = () => {
-		const entitiesToSave = dirtyEntityRecords.filter(
-			( { kind, name, key, property } ) => {
-				return ! unselectedEntities.some(
-					( elt ) =>
-						elt.kind === kind &&
-						elt.name === name &&
-						elt.key === key &&
-						elt.property === property
-				);
-			}
-		);
-
-		close( entitiesToSave );
-
-		const siteItemsToSave = [];
-		const pendingSavedRecords = [];
-		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
-			if ( 'root' === kind && 'site' === name ) {
-				siteItemsToSave.push( property );
-			} else {
-				if (
-					PUBLISH_ON_SAVE_ENTITIES.some(
-						( typeToPublish ) =>
-							typeToPublish.kind === kind &&
-							typeToPublish.name === name
-					)
-				) {
-					editEntityRecord( kind, name, key, { status: 'publish' } );
-				}
-
-				pendingSavedRecords.push(
-					saveEditedEntityRecord( kind, name, key )
-				);
-			}
-		} );
-		if ( siteItemsToSave.length ) {
-			pendingSavedRecords.push(
-				saveSpecifiedEntityEdits(
-					'root',
-					'site',
-					undefined,
-					siteItemsToSave
-				)
-			);
-		}
-
-		__unstableMarkLastChangeAsPersistent();
-
-		Promise.all( pendingSavedRecords )
-			.then( ( values ) => {
-				if (
-					values.some( ( value ) => typeof value === 'undefined' )
-				) {
-					createErrorNotice( __( 'Saving failed.' ) );
-				} else {
-					createSuccessNotice( __( 'Site updated.' ), {
-						type: 'snackbar',
-					} );
-				}
-			} )
-			.catch( ( error ) =>
-				createErrorNotice( `${ __( 'Saving failed.' ) } ${ error }` )
-			);
-	};
-
+	const saveEnabled = saveEnabledProp ?? isDirty;
 	// Explicitly define this with no argument passed.  Using `close` on
 	// its own will use the event object in place of the expected saved entities.
 	const dismissPanel = useCallback( () => close(), [ close ] );
@@ -197,45 +109,78 @@ export default function EntitiesSavedStates( { close } ) {
 	const [ saveDialogRef, saveDialogProps ] = useDialog( {
 		onClose: () => dismissPanel(),
 	} );
+	const dialogLabel = useInstanceId( EntitiesSavedStatesExtensible, 'label' );
+	const dialogDescription = useInstanceId(
+		EntitiesSavedStatesExtensible,
+		'description'
+	);
 
 	return (
 		<div
-			ref={ saveDialogRef }
-			{ ...saveDialogProps }
+			ref={ renderDialog ? saveDialogRef : undefined }
+			{ ...( renderDialog && saveDialogProps ) }
 			className="entities-saved-states__panel"
+			role={ renderDialog ? 'dialog' : undefined }
+			aria-labelledby={ renderDialog ? dialogLabel : undefined }
+			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
 				<FlexItem
 					isBlock
 					as={ Button }
-					ref={ saveButtonRef }
-					variant="primary"
-					disabled={
-						dirtyEntityRecords.length -
-							unselectedEntities.length ===
-						0
-					}
-					onClick={ saveCheckedEntities }
-					className="editor-entities-saved-states__save-button"
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
 				>
-					{ __( 'Save' ) }
+					{ __( 'Cancel' ) }
 				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
+					ref={ saveButtonRef }
+					variant="primary"
+					size="compact"
+					disabled={ ! saveEnabled }
+					accessibleWhenDisabled
+					onClick={ () =>
+						saveDirtyEntities( {
+							onSave,
+							dirtyEntityRecords,
+							entitiesToSkip: unselectedEntities,
+							close,
+						} )
+					}
+					className="editor-entities-saved-states__save-button"
 				>
-					{ __( 'Cancel' ) }
+					{ saveLabel }
 				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
-				<strong>{ __( 'Are you ready to save?' ) }</strong>
-				<p>
-					{ __(
-						'The following changes have been made to your site, templates, and content.'
-					) }
+				<div
+					className="entities-saved-states__text-prompt--header-wrapper"
+					id={ renderDialog ? dialogLabel : undefined }
+				>
+					<strong className="entities-saved-states__text-prompt--header">
+						{ __( 'Are you ready to save?' ) }
+					</strong>
+					{ additionalPrompt }
+				</div>
+				<p id={ renderDialog ? dialogDescription : undefined }>
+					{ isDirty
+						? createInterpolateElement(
+								sprintf(
+									/* translators: %d: number of site changes waiting to be saved. */
+									_n(
+										'There is <strong>%d site change</strong> waiting to be saved.',
+										'There are <strong>%d site changes</strong> waiting to be saved.',
+										dirtyEntityRecords.length
+									),
+									dirtyEntityRecords.length
+								),
+								{ strong: <strong /> }
+						  )
+						: __( 'Select the items you want to save.' ) }
 				</p>
 			</div>
 
@@ -244,7 +189,6 @@ export default function EntitiesSavedStates( { close } ) {
 					<EntityTypeList
 						key={ list[ 0 ].name }
 						list={ list }
-						closePanel={ dismissPanel }
 						unselectedEntities={ unselectedEntities }
 						setUnselectedEntities={ setUnselectedEntities }
 					/>
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 751deeeb472412..e2c320678c322a 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,50 +1,32 @@
-.entities-saved-states__panel {
-	@include reset;
-	background: $white;
-	position: fixed;
-	z-index: z-index(".entities-saved-states__panel");
-	top: $admin-bar-height-big;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	overflow: auto;
+.entities-saved-states__panel-header {
 	box-sizing: border-box;
+	background: $white;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
+	height: $header-height;
+	border-bottom: $border-width solid $gray-300;
+}
 
-	.entities-saved-states__find-entity {
-		display: none;
-	}
-	.entities-saved-states__find-entity-small {
+.entities-saved-states__text-prompt {
+	padding: $grid-unit-20;
+	padding-bottom: $grid-unit-05;
+	.entities-saved-states__text-prompt--header {
 		display: block;
+		margin-bottom: $grid-unit-15;
 	}
+}
 
-	@include break-medium() {
-		top: $admin-bar-height;
-		left: auto;
-		width: $sidebar-width;
-		border-left: $border-width solid $gray-300;
-
-		body.is-fullscreen-mode & {
-			top: 0;
-		}
-
-		.entities-saved-states__find-entity {
-			display: block;
-		}
-		.entities-saved-states__find-entity-small {
-			display: none;
-		}
-	}
+.entities-saved-states__description-heading {
+	font-size: $default-font-size;
+}
 
-	.entities-saved-states__panel-header {
-		background: $white;
-		padding-left: $grid-unit-10;
-		padding-right: $grid-unit-10;
-		height: $header-height + $border-width;
-		border-bottom: $border-width solid $gray-300;
-	}
+.entities-saved-states__changes {
+	color: $gray-700;
+	font-size: $helptext-font-size;
+	margin: $grid-unit-10 $grid-unit-20 0 $grid-unit-20;
+	list-style: disc;
 
-	.entities-saved-states__text-prompt {
-		padding: $grid-unit-20;
-		padding-bottom: $grid-unit-05;
+	li {
+		margin-bottom: $grid-unit-05;
 	}
 }
diff --git a/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js b/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js
new file mode 100644
index 00000000000000..287e990a14f92b
--- /dev/null
+++ b/packages/editor/src/components/entities-saved-states/test/use-is-dirty.js
@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { useIsDirty } from '../hooks/use-is-dirty';
+
+jest.mock( '@wordpress/data', () => {
+	return {
+		useSelect: jest.fn().mockImplementation( ( fn ) => {
+			const select = () => {
+				return {
+					__experimentalGetDirtyEntityRecords: jest
+						.fn()
+						.mockReturnValue( [
+							{
+								kind: 'root',
+								name: 'site',
+								title: 'title',
+								property: 'property',
+							},
+							{
+								kind: 'postType',
+								name: 'post',
+								title: 'title',
+								property: 'property',
+							},
+						] ),
+					getEntityRecordEdits: jest.fn().mockReturnValue( {
+						title: 'My Site',
+					} ),
+					getEntityConfig: jest.fn().mockReturnValue( {
+						meta: { labels: { title: 'Title' } },
+					} ),
+				};
+			};
+			return fn( select );
+		} ),
+	};
+} );
+
+jest.mock( '@wordpress/core-data', () => {
+	return {
+		store: {
+			__experimentalGetDirtyEntityRecords: jest.fn(),
+			getEntityRecordEdits: jest.fn(),
+		},
+	};
+} );
+
+describe( 'useIsDirty', () => {
+	it( 'should calculate dirtyEntityRecords', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.dirtyEntityRecords ).toEqual( [
+			{
+				kind: 'postType',
+				name: 'post',
+				property: 'property',
+				title: 'title',
+			},
+			{ kind: 'root', name: 'site', property: 'title', title: 'Title' },
+		] );
+	} );
+	it( 'should return `isDirty: true` when there are changes', () => {
+		const { result } = renderHook( () => useIsDirty() );
+		expect( result.current.isDirty ).toBeTruthy();
+	} );
+	it( 'should return `isDirty: false` when there are NO changes', async () => {
+		const { result } = renderHook( () => useIsDirty() );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'postType',
+					name: 'post',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		act( () => {
+			result.current.setUnselectedEntities(
+				{
+					kind: 'root',
+					name: 'site',
+					key: 'key',
+					property: 'property',
+				},
+				false
+			);
+		} );
+		expect( result.current.isDirty ).toBeFalsy();
+	} );
+} );
diff --git a/packages/editor/src/components/error-boundary/index.js b/packages/editor/src/components/error-boundary/index.js
index 72e6a7680421f3..f3e6e5fd127afc 100644
--- a/packages/editor/src/components/error-boundary/index.js
+++ b/packages/editor/src/components/error-boundary/index.js
@@ -3,9 +3,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { select } from '@wordpress/data';
-import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { doAction } from '@wordpress/hooks';
 
@@ -14,10 +17,22 @@ import { doAction } from '@wordpress/hooks';
  */
 import { store as editorStore } from '../../store';
 
-function CopyButton( { text, children } ) {
+function getContent() {
+	try {
+		// While `select` in a component is generally discouraged, it is
+		// used here because it (a) reduces the chance of data loss in the
+		// case of additional errors by performing a direct retrieval and
+		// (b) avoids the performance cost associated with unnecessary
+		// content serialization throughout the lifetime of a non-erroring
+		// application.
+		return select( editorStore ).getEditedPostContent();
+	} catch ( error ) {}
+}
+
+function CopyButton( { text, children, variant = 'secondary' } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant={ variant } ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -27,65 +42,61 @@ class ErrorBoundary extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.reboot = this.reboot.bind( this );
-		this.getContent = this.getContent.bind( this );
-
 		this.state = {
 			error: null,
 		};
 	}
 
 	componentDidCatch( error ) {
-		this.setState( { error } );
-
 		doAction( 'editor.ErrorBoundary.errorLogged', error );
 	}
 
-	reboot() {
-		this.props.onError();
-	}
-
-	getContent() {
-		try {
-			// While `select` in a component is generally discouraged, it is
-			// used here because it (a) reduces the chance of data loss in the
-			// case of additional errors by performing a direct retrieval and
-			// (b) avoids the performance cost associated with unnecessary
-			// content serialization throughout the lifetime of a non-erroring
-			// application.
-			return select( editorStore ).getEditedPostContent();
-		} catch ( error ) {}
+	static getDerivedStateFromError( error ) {
+		return { error };
 	}
 
 	render() {
 		const { error } = this.state;
+		const { canCopyContent = false } = this.props;
 		if ( ! error ) {
 			return this.props.children;
 		}
 
 		return (
-			<Warning
+			<HStack
 				className="editor-error-boundary"
-				actions={ [
-					<Button
-						key="recovery"
-						onClick={ this.reboot }
-						variant="secondary"
-					>
-						{ __( 'Attempt Recovery' ) }
-					</Button>,
-					<CopyButton key="copy-post" text={ this.getContent }>
-						{ __( 'Copy Post Text' ) }
-					</CopyButton>,
-					<CopyButton key="copy-error" text={ error.stack }>
-						{ __( 'Copy Error' ) }
-					</CopyButton>,
-				] }
+				alignment="baseline"
+				spacing={ 4 }
+				justify="space-between"
+				expanded={ false }
+				wrap
 			>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+				<Text as="p">
+					{ __( 'The editor has encountered an unexpected error.' ) }
+				</Text>
+				<HStack expanded={ false }>
+					{ canCopyContent && (
+						<CopyButton text={ getContent }>
+							{ __( 'Copy contents' ) }
+						</CopyButton>
+					) }
+					<CopyButton variant="primary" text={ error?.stack }>
+						{ __( 'Copy error' ) }
+					</CopyButton>
+				</HStack>
+			</HStack>
 		);
 	}
 }
 
+/**
+ * ErrorBoundary is used to catch JavaScript errors anywhere in a child component tree, log those errors, and display a fallback UI.
+ *
+ * It uses the lifecycle methods getDerivedStateFromError and componentDidCatch to catch errors in a child component tree.
+ *
+ * getDerivedStateFromError is used to render a fallback UI after an error has been thrown, and componentDidCatch is used to log error information.
+ *
+ * @class ErrorBoundary
+ * @augments Component
+ */
 export default ErrorBoundary;
diff --git a/packages/editor/src/components/error-boundary/index.native.js b/packages/editor/src/components/error-boundary/index.native.js
new file mode 100644
index 00000000000000..0de048e8114451
--- /dev/null
+++ b/packages/editor/src/components/error-boundary/index.native.js
@@ -0,0 +1,192 @@
+/**
+ * External dependencies
+ */
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { logException } from '@wordpress/react-native-bridge';
+import {
+	usePreferredColorSchemeStyle,
+	withPreferredColorScheme,
+} from '@wordpress/compose';
+import { warning } from '@wordpress/icons';
+import { Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import styles from './style.scss';
+
+function getContent() {
+	try {
+		// While `select` in a component is generally discouraged, it is
+		// used here because it (a) reduces the chance of data loss in the
+		// case of additional errors by performing a direct retrieval and
+		// (b) avoids the performance cost associated with unnecessary
+		// content serialization throughout the lifetime of a non-erroring
+		// application.
+		return select( editorStore ).getEditedPostContent();
+	} catch ( error ) {}
+}
+
+function CopyButton( {
+	text,
+	label,
+	accessibilityLabel,
+	accessibilityHint,
+	secondary = false,
+} ) {
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__container' ],
+		styles[ 'copy-button__container--dark' ]
+	);
+
+	const containerSecondaryStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__container--secondary' ],
+		styles[ 'copy-button__container--secondary-dark' ]
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__text' ],
+		styles[ 'copy-button__text--dark' ]
+	);
+
+	const textSecondaryStyle = usePreferredColorSchemeStyle(
+		styles[ 'copy-button__text--secondary' ],
+		styles[ 'copy-button__text--secondary-dark' ]
+	);
+
+	return (
+		<TouchableOpacity
+			activeOpacity={ 0.5 }
+			accessibilityLabel={ accessibilityLabel }
+			style={ [ containerStyle, secondary && containerSecondaryStyle ] }
+			accessibilityRole="button"
+			accessibilityHint={ accessibilityHint }
+			onPress={ () => {
+				Clipboard.setString(
+					typeof text === 'function' ? text() : text || ''
+				);
+			} }
+		>
+			<Text style={ [ textStyle, secondary && textSecondaryStyle ] }>
+				{ label }
+			</Text>
+		</TouchableOpacity>
+	);
+}
+
+class ErrorBoundary extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			error: null,
+		};
+	}
+
+	componentDidCatch( error ) {
+		logException( error, {
+			context: {
+				component_stack: error.componentStack,
+			},
+			isHandled: true,
+			handledBy: 'Editor-level Error Boundary',
+		} );
+	}
+
+	static getDerivedStateFromError( error ) {
+		return { error };
+	}
+
+	render() {
+		const { error } = this.state;
+		if ( ! error ) {
+			return this.props.children;
+		}
+
+		const { getStylesFromColorScheme } = this.props;
+
+		const iconContainerStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__icon-container' ],
+			styles[ 'error-boundary__icon-container--dark' ]
+		);
+
+		const titleStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__title' ],
+			styles[ 'error-boundary__title--dark' ]
+		);
+
+		const messageStyle = getStylesFromColorScheme(
+			styles[ 'error-boundary__message' ],
+			styles[ 'error-boundary__message--dark' ]
+		);
+
+		return (
+			<SafeAreaView>
+				<ScrollView
+					style={ styles[ 'error-boundary__scroll' ] }
+					contentContainerStyle={
+						styles[ 'error-boundary__scroll-container' ]
+					}
+				>
+					<View style={ styles[ 'error-boundary__container' ] }>
+						<View style={ iconContainerStyle }>
+							<Icon
+								icon={ warning }
+								{ ...styles[ 'error-boundary__icon' ] }
+							/>
+						</View>
+						<Text style={ titleStyle }>
+							{ __(
+								'The editor has encountered an unexpected error'
+							) }
+						</Text>
+						<Text style={ messageStyle }>
+							{ __(
+								'You can copy your post text in case your content is impacted. Copy error details to debug and share with support.'
+							) }
+						</Text>
+						<View
+							style={
+								styles[ 'error-boundary__actions-container' ]
+							}
+						>
+							<CopyButton
+								label={ __( 'Copy post text' ) }
+								accessibilityLabel={ __(
+									'Button to copy post text'
+								) }
+								accessibilityHint={ __(
+									'Tap here to copy post text'
+								) }
+								text={ getContent }
+							/>
+							<CopyButton
+								label={ __( 'Copy error details' ) }
+								accessibilityLabel={ __(
+									'Button to copy error details'
+								) }
+								accessibilityHint={ __(
+									'Tap here to copy error details'
+								) }
+								text={ error.stack }
+								secondary
+							/>
+						</View>
+					</View>
+				</ScrollView>
+			</SafeAreaView>
+		);
+	}
+}
+
+export default withPreferredColorScheme( ErrorBoundary );
diff --git a/packages/editor/src/components/error-boundary/style.native.scss b/packages/editor/src/components/error-boundary/style.native.scss
new file mode 100644
index 00000000000000..413242a1779947
--- /dev/null
+++ b/packages/editor/src/components/error-boundary/style.native.scss
@@ -0,0 +1,116 @@
+.error-boundary__scroll {
+	height: 100%;
+	width: 100%;
+}
+
+.error-boundary__scroll-container {
+	flex-grow: 1;
+	max-height: 580px;
+	align-items: center;
+	justify-content: center;
+}
+
+
+.error-boundary__container {
+	width: 100%;
+	max-width: 600px;
+	justify-content: center;
+	align-items: center;
+	padding: 0 24px;
+}
+
+.error-boundary__icon-container {
+	$size: 40px;
+
+	width: $size;
+	height: $size;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 8px;
+	background-color: rgba(60, 60, 67, 0.3);
+	border-radius: 20px;
+}
+
+.error-boundary__icon-container--dark {
+	background-color: rgba(235, 235, 245, 0.3);
+}
+
+.error-boundary__icon {
+	width: 24px;
+	height: 24px;
+	fill: $white;
+}
+
+.error-boundary__title {
+	font-size: 20px;
+	font-weight: 600;
+	line-height: 25px;
+	color: $black;
+	text-align: center;
+	margin-bottom: 8px;
+}
+
+.error-boundary__title--dark {
+	color: $white;
+}
+
+.error-boundary__message {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 21px;
+	color: rgba(60, 60, 67, 0.6);
+	text-align: center;
+	margin-bottom: 16px;
+}
+
+.error-boundary__message--dark {
+	color: rgba(235, 235, 245, 0.6);
+}
+
+.error-boundary__actions-container {
+	width: 100%;
+	max-width: 400px;
+	justify-content: center;
+	gap: 12px;
+	padding-top: 16px;
+}
+
+.copy-button__container {
+	border-radius: 5px;
+	padding: $grid-unit $grid-unit-20;
+	background-color: $light-primary;
+}
+
+.copy-button__container--dark {
+	background-color: $white;
+}
+
+.copy-button__container--secondary {
+	border: $border-width #c6c6c8;
+	background-color: $white;
+}
+
+.copy-button__container--secondary-dark {
+	border-color: rgba(255, 255, 255, 0.3);
+	background-color: $black;
+}
+
+.copy-button__text {
+	font-size: 17px;
+	font-weight: 400;
+	line-height: 22px;
+	text-align: center;
+	color: $white;
+}
+
+.copy-button__text--dark {
+	color: $background-dark-secondary;
+}
+
+.copy-button__text--secondary {
+	color: $black;
+}
+
+.copy-button__text--secondary-dark {
+	color: $white;
+}
diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
index d1b792d0ff3d32..4d59c511667088 100644
--- a/packages/editor/src/components/error-boundary/style.scss
+++ b/packages/editor/src/components/error-boundary/style.scss
@@ -1,7 +1,11 @@
 .editor-error-boundary {
+	font-family: $default-font;
 	margin: auto;
 	max-width: 780px;
-	padding: 20px;
+	padding: 1em;
 	margin-top: 60px;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	background-color: $white;
 }
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/index.js b/packages/editor/src/components/global-keyboard-shortcuts/index.js
new file mode 100644
index 00000000000000..a46d4b55a7bfd8
--- /dev/null
+++ b/packages/editor/src/components/global-keyboard-shortcuts/index.js
@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
+export default function EditorKeyboardShortcuts() {
+	const isModeToggleDisabled = useSelect( ( select ) => {
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
+		return ! richEditingEnabled || ! codeEditingEnabled;
+	}, [] );
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
+	const {
+		redo,
+		undo,
+		savePost,
+		setIsListViewOpened,
+		switchEditorMode,
+		toggleDistractionFree,
+	} = useDispatch( editorStore );
+	const {
+		isEditedPostDirty,
+		isPostSavingLocked,
+		isListViewOpened,
+		getEditorMode,
+	} = useSelect( editorStore );
+
+	useShortcut(
+		'core/editor/toggle-mode',
+		() => {
+			switchEditorMode(
+				getEditorMode() === 'visual' ? 'text' : 'visual'
+			);
+		},
+		{
+			isDisabled: isModeToggleDisabled,
+		}
+	);
+
+	useShortcut( 'core/editor/toggle-distraction-free', () => {
+		toggleDistractionFree();
+	} );
+
+	useShortcut( 'core/editor/undo', ( event ) => {
+		undo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/editor/redo', ( event ) => {
+		redo();
+		event.preventDefault();
+	} );
+
+	useShortcut( 'core/editor/save', ( event ) => {
+		event.preventDefault();
+
+		/**
+		 * Do not save the post if post saving is locked.
+		 */
+		if ( isPostSavingLocked() ) {
+			return;
+		}
+
+		// TODO: This should be handled in the `savePost` effect in
+		// considering `isSaveable`. See note on `isEditedPostSaveable`
+		// selector about dirtiness and meta-boxes.
+		//
+		// See: `isEditedPostSaveable`
+		if ( ! isEditedPostDirty() ) {
+			return;
+		}
+
+		savePost();
+	} );
+
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
+	useShortcut( 'core/editor/toggle-list-view', ( event ) => {
+		if ( ! isListViewOpened() ) {
+			event.preventDefault();
+			setIsListViewOpened( true );
+		}
+	} );
+
+	useShortcut( 'core/editor/toggle-sidebar', ( event ) => {
+		// This shortcut has no known clashes, but use preventDefault to prevent any
+		// obscure shortcuts from triggering.
+		event.preventDefault();
+		const isEditorSidebarOpened = [
+			'edit-post/document',
+			'edit-post/block',
+		].includes( getActiveComplementaryArea( 'core' ) );
+
+		if ( isEditorSidebarOpened ) {
+			disableComplementaryArea( 'core' );
+		} else {
+			const sidebarToOpen = getBlockSelectionStart()
+				? 'edit-post/block'
+				: 'edit-post/document';
+			enableComplementaryArea( 'core', sidebarToOpen );
+		}
+	} );
+
+	return null;
+}
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
index 8e8f4c42ca6dd6..9c371ad8f643a3 100644
--- a/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
+++ b/packages/editor/src/components/global-keyboard-shortcuts/register-shortcuts.js
@@ -8,10 +8,25 @@ import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
 
+/**
+ * Component for registering editor keyboard shortcuts.
+ *
+ * @return {Element} The component to be rendered.
+ */
 function EditorKeyboardShortcutsRegister() {
 	// Registering the shortcuts.
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/toggle-mode',
+			category: 'global',
+			description: __( 'Switch between visual editor and code editor.' ),
+			keyCombination: {
+				modifier: 'secondary',
+				character: 'm',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/editor/save',
 			category: 'global',
@@ -53,6 +68,82 @@ function EditorKeyboardShortcutsRegister() {
 						},
 				  ],
 		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-list-view',
+			category: 'global',
+			description: __( 'Show or hide the List View.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'o',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-distraction-free',
+			category: 'global',
+			description: __( 'Enter or exit distraction free mode.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: '\\',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/toggle-sidebar',
+			category: 'global',
+			description: __( 'Show or hide the Settings panel.' ),
+			keyCombination: {
+				modifier: 'primaryShift',
+				character: ',',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/keyboard-shortcuts',
+			category: 'main',
+			description: __( 'Display these keyboard shortcuts.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'h',
+			},
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/editor/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return <BlockEditorKeyboardShortcuts.Register />;
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js b/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js
deleted file mode 100644
index 1843e2d56876ee..00000000000000
--- a/packages/editor/src/components/global-keyboard-shortcuts/save-shortcut.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
-function SaveShortcut( { resetBlocksOnSave } ) {
-	const { resetEditorBlocks, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } =
-		useSelect( editorStore );
-
-	useShortcut( 'core/editor/save', ( event ) => {
-		event.preventDefault();
-
-		/**
-		 * Do not save the post if post saving is locked.
-		 */
-		if ( isPostSavingLocked() ) {
-			return;
-		}
-
-		// TODO: This should be handled in the `savePost` effect in
-		// considering `isSaveable`. See note on `isEditedPostSaveable`
-		// selector about dirtiness and meta-boxes.
-		//
-		// See: `isEditedPostSaveable`
-		if ( ! isEditedPostDirty() ) {
-			return;
-		}
-
-		// The text editor requires that editor blocks are updated for a
-		// save to work correctly. Usually this happens when the textarea
-		// for the code editors blurs, but the shortcut can be used without
-		// blurring the textarea.
-		if ( resetBlocksOnSave ) {
-			const postEdits = getPostEdits();
-			if ( postEdits.content && typeof postEdits.content === 'string' ) {
-				const blocks = parse( postEdits.content );
-				resetEditorBlocks( blocks );
-			}
-		}
-
-		savePost();
-	} );
-
-	return null;
-}
-
-export default SaveShortcut;
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js
deleted file mode 100644
index 33eb32000de132..00000000000000
--- a/packages/editor/src/components/global-keyboard-shortcuts/text-editor-shortcuts.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import SaveShortcut from './save-shortcut';
-
-export default function TextEditorGlobalKeyboardShortcuts() {
-	return <SaveShortcut resetBlocksOnSave />;
-}
diff --git a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js b/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js
deleted file mode 100644
index 5e5875f275845f..00000000000000
--- a/packages/editor/src/components/global-keyboard-shortcuts/visual-editor-shortcuts.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import SaveShortcut from './save-shortcut';
-import { store as editorStore } from '../../store';
-
-function VisualEditorGlobalKeyboardShortcuts() {
-	const { redo, undo } = useDispatch( editorStore );
-
-	useShortcut( 'core/editor/undo', ( event ) => {
-		undo();
-		event.preventDefault();
-	} );
-
-	useShortcut( 'core/editor/redo', ( event ) => {
-		redo();
-		event.preventDefault();
-	} );
-
-	return <SaveShortcut />;
-}
-
-export default VisualEditorGlobalKeyboardShortcuts;
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
new file mode 100644
index 00000000000000..74fbed5f000624
--- /dev/null
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -0,0 +1,249 @@
+/**
+ * External dependencies
+ */
+import deepmerge from 'deepmerge';
+import { isPlainObject } from 'is-plain-object';
+
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext, cleanEmptyObject } = unlock(
+	blockEditorPrivateApis
+);
+
+export function mergeBaseAndUserConfigs( base, user ) {
+	return deepmerge( base, user, {
+		/*
+		 * We only pass as arrays the presets,
+		 * in which case we want the new array of values
+		 * to override the old array (no merging).
+		 */
+		isMergeableObject: isPlainObject,
+		/*
+		 * Exceptions to the above rule.
+		 * Background images should be replaced, not merged,
+		 * as they themselves are specific object definitions for the style.
+		 */
+		customMerge: ( key ) => {
+			if ( key === 'backgroundImage' ) {
+				return ( baseConfig, userConfig ) => userConfig;
+			}
+			return undefined;
+		},
+	} );
+}
+
+function useGlobalStylesUserConfig() {
+	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecord,
+				getEditedEntityRecord,
+				hasFinishedResolution,
+				canUser,
+			} = select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+
+			let record;
+
+			/*
+			 * Ensure that the global styles ID request is complete by testing `_globalStylesId`,
+			 * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will
+			 * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.
+			 * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+			 * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.
+			 */
+			const userCanEditGlobalStyles = _globalStylesId
+				? canUser( 'update', {
+						kind: 'root',
+						name: 'globalStyles',
+						id: _globalStylesId,
+				  } )
+				: null;
+
+			if (
+				_globalStylesId &&
+				/*
+				 * Test that the OPTIONS request for user capabilities is complete
+				 * before fetching the global styles entity record.
+				 * This is to avoid fetching the global styles entity unnecessarily.
+				 */
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				/*
+				 * Fetch the global styles entity record based on the user's capabilities.
+				 * The default context is `edit` for users who can edit global styles.
+				 * Otherwise, the context is `view`.
+				 * NOTE: There is an equivalent conditional check using `current_user_can()` in the backend
+				 * to preload the global styles entity. Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+				 * or set using `block_editor_rest_api_preload_paths` filter, if this changes.
+				 */
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+				_links: record?._links,
+			};
+		},
+		[]
+	);
+
+	const { getEditedEntityRecord } = useSelect( coreStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const config = useMemo( () => {
+		return {
+			settings: settings ?? {},
+			styles: styles ?? {},
+			_links: _links ?? {},
+		};
+	}, [ settings, styles, _links ] );
+
+	const setConfig = useCallback(
+		/**
+		 * Set the global styles config.
+		 * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+		 *                                           Otherwise, overwrite the current config with the incoming object.
+		 * @param {Object}          options          Options for editEntityRecord Core selector.
+		 */
+		( callbackOrObject, options = {} ) => {
+			const record = getEditedEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId
+			);
+
+			const currentConfig = {
+				styles: record?.styles ?? {},
+				settings: record?.settings ?? {},
+				_links: record?._links ?? {},
+			};
+
+			const updatedConfig =
+				typeof callbackOrObject === 'function'
+					? callbackOrObject( currentConfig )
+					: callbackOrObject;
+
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					_links: cleanEmptyObject( updatedConfig._links ) || {},
+				},
+				options
+			);
+		},
+		[ globalStylesId, editEntityRecord, getEditedEntityRecord ]
+	);
+
+	return [ isReady, config, setConfig ];
+}
+
+function useGlobalStylesBaseConfig() {
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
+	return [ !! baseConfig, baseConfig ];
+}
+
+export function useGlobalStylesContext() {
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
+	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
+
+	const mergedConfig = useMemo( () => {
+		if ( ! baseConfig || ! userConfig ) {
+			return {};
+		}
+
+		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+	}, [ userConfig, baseConfig ] );
+
+	const context = useMemo( () => {
+		return {
+			isReady: isUserConfigReady && isBaseConfigReady,
+			user: userConfig,
+			base: baseConfig,
+			merged: mergedConfig,
+			setUserConfig,
+		};
+	}, [
+		mergedConfig,
+		userConfig,
+		baseConfig,
+		setUserConfig,
+		isUserConfigReady,
+		isBaseConfigReady,
+	] );
+
+	return context;
+}
+
+export function GlobalStylesProvider( { children } ) {
+	const context = useGlobalStylesContext();
+	if ( ! context.isReady ) {
+		return null;
+	}
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ children }
+		</GlobalStylesContext.Provider>
+	);
+}
diff --git a/packages/editor/src/components/header/back-button.js b/packages/editor/src/components/header/back-button.js
new file mode 100644
index 00000000000000..a3d682f92970ed
--- /dev/null
+++ b/packages/editor/src/components/header/back-button.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseSlotFills as useSlotFills,
+	createSlotFill,
+} from '@wordpress/components';
+
+// Keeping an old name for backward compatibility.
+const slotName = '__experimentalMainDashboardButton';
+
+export const useHasBackButton = () => {
+	const fills = useSlotFills( slotName );
+	return Boolean( fills && fills.length );
+};
+
+const { Fill, Slot } = createSlotFill( slotName );
+
+const BackButton = Fill;
+const BackButtonSlot = () => {
+	const fills = useSlotFills( slotName );
+
+	return (
+		<Slot
+			bubblesVirtually
+			fillProps={ { length: ! fills ? 0 : fills.length } }
+		/>
+	);
+};
+BackButton.Slot = BackButtonSlot;
+
+export default BackButton;
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
new file mode 100644
index 00000000000000..79199b15b1ad16
--- /dev/null
+++ b/packages/editor/src/components/header/index.js
@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
+import { PinnedItems } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import CollabSidebar from '../collab-sidebar';
+import BackButton, { useHasBackButton } from './back-button';
+import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
+import DocumentBar from '../document-bar';
+import DocumentTools from '../document-tools';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
+import PostSavedState from '../post-saved-state';
+import PostViewLink from '../post-view-link';
+import PreviewDropdown from '../preview-dropdown';
+import ZoomOutToggle from '../zoom-out-toggle';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+
+const toolbarVariations = {
+	distractionFreeDisabled: { y: '-50px' },
+	distractionFreeHover: { y: 0 },
+	distractionFreeHidden: { y: '-50px' },
+	visible: { y: 0 },
+	hidden: { y: 0 },
+};
+
+const backButtonVariations = {
+	distractionFreeDisabled: { x: '-100%' },
+	distractionFreeHover: { x: 0 },
+	distractionFreeHidden: { x: '-100%' },
+	visible: { x: 0 },
+	hidden: { x: 0 },
+};
+
+function Header( {
+	customSaveButton,
+	forceIsDirty,
+	forceDisableBlockTools,
+	setEntitiesSavedStatesCallback,
+	title,
+} ) {
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
+	const {
+		postType,
+		isTextEditor,
+		isPublishSidebarOpened,
+		showIconLabels,
+		hasFixedToolbar,
+		hasBlockSelection,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+		const {
+			getEditorMode,
+			getCurrentPostType,
+			isPublishSidebarOpened: _isPublishSidebarOpened,
+		} = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			isTextEditor: getEditorMode() === 'text',
+			isPublishSidebarOpened: _isPublishSidebarOpened(),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+
+	const canBeZoomedOut = [ 'post', 'page', 'wp_template' ].includes(
+		postType
+	);
+
+	const disablePreviewOption = [
+		NAVIGATION_POST_TYPE,
+		TEMPLATE_PART_POST_TYPE,
+		PATTERN_POST_TYPE,
+	].includes( postType );
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	const hasCenter =
+		! isTooNarrowForDocumentBar &&
+		( ! hasFixedToolbar ||
+			( hasFixedToolbar &&
+				( ! hasBlockSelection || isBlockToolsCollapsed ) ) );
+	const hasBackButton = useHasBackButton();
+
+	const hasSectionRootClientId = useSelect(
+		( select ) =>
+			!! unlock( select( blockEditorStore ) ).getSectionRootClientId(),
+		[]
+	);
+
+	/*
+	 * The edit-post-header classname is only kept for backward compatability
+	 * as some plugins might be relying on its presence.
+	 */
+	return (
+		<div className="editor-header edit-post-header">
+			{ hasBackButton && (
+				<motion.div
+					className="editor-header__back-button"
+					variants={ backButtonVariations }
+					transition={ { type: 'tween' } }
+				>
+					<BackButton.Slot />
+				</motion.div>
+			) }
+			<motion.div
+				variants={ toolbarVariations }
+				className="editor-header__toolbar"
+				transition={ { type: 'tween' } }
+			>
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
+				{ hasFixedToolbar && isLargeViewport && (
+					<CollapsibleBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
+				) }
+			</motion.div>
+			{ hasCenter && (
+				<motion.div
+					className="editor-header__center"
+					variants={ toolbarVariations }
+					transition={ { type: 'tween' } }
+				>
+					<DocumentBar title={ title } />
+				</motion.div>
+			) }
+			<motion.div
+				variants={ toolbarVariations }
+				transition={ { type: 'tween' } }
+				className="editor-header__settings"
+			>
+				{ ! customSaveButton && ! isPublishSidebarOpened && (
+					/*
+					 * This button isn't completely hidden by the publish sidebar.
+					 * We can't hide the whole toolbar when the publish sidebar is open because
+					 * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					 * We track that DOM node to return focus to the PostPublishButtonOrToggle
+					 * when the publish sidebar has been closed.
+					 */
+					<PostSavedState forceIsDirty={ forceIsDirty } />
+				) }
+
+				<PostViewLink />
+
+				<PreviewDropdown
+					forceIsAutosaveable={ forceIsDirty }
+					disabled={ disablePreviewOption }
+				/>
+
+				<PostPreviewButton
+					className="editor-header__post-preview-button"
+					forceIsAutosaveable={ forceIsDirty }
+				/>
+
+				{ canBeZoomedOut &&
+					isWideViewport &&
+					hasSectionRootClientId && (
+						<ZoomOutToggle disabled={ forceDisableBlockTools } />
+					) }
+
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+
+				{ ! customSaveButton && (
+					<PostPublishButtonOrToggle
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+					/>
+				) }
+				<CollabSidebar />
+
+				{ customSaveButton }
+				<MoreMenu />
+			</motion.div>
+		</div>
+	);
+}
+
+export default Header;
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
new file mode 100644
index 00000000000000..4cbbe992e63fdb
--- /dev/null
+++ b/packages/editor/src/components/header/style.scss
@@ -0,0 +1,284 @@
+.editor-header {
+	height: $header-height;
+	background: $white;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template: auto / $header-height minmax(0, max-content) minmax(min-content, 1fr) $header-height;
+	&:has(> .editor-header__center) {
+		grid-template: auto / $header-height min-content 1fr min-content $header-height;
+		@include break-medium {
+			grid-template: auto / $header-height minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) $header-height;
+		}
+	}
+	@include break-mobile {
+		gap: $grid-unit-20;
+	}
+	align-items: center;
+	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
+	max-width: 100vw;
+	justify-content: space-between;
+
+	// Make toolbar sticky on larger breakpoints
+	@include break-zoomed-in {
+		flex-wrap: nowrap;
+	}
+}
+
+.editor-header__toolbar {
+	grid-column: 1 / 3;
+	// When there is no back button or the viewport is <= mobile the margin keeps the content off
+	// the starting edge.
+	> :first-child {
+		margin-inline: $grid-unit-20 0;
+	}
+
+	// This is the typical case, the back button takes up the first column.
+	.editor-header__back-button + & {
+		grid-column: 2 / 3;
+
+		@include break-mobile {
+			// Clears the margin; at this breakpoint the parent’s `gap` takes its place.
+			> :first-child {
+				margin-inline: 0;
+			}
+		}
+	}
+	display: flex;
+	// Make narrowing to less than content width possible. Block toolbar will hide overflow and allow scrolling on fixed toolbar.
+	min-width: 0;
+	align-items: center;
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+	@include break-mobile {
+		clip-path: none;
+	}
+
+	.table-of-contents {
+		display: none;
+
+		@include break-small() {
+			display: block;
+		}
+	}
+
+	// Add a gap before the block toolbar or its toggle button when collapsed.
+	.editor-collapsible-block-toolbar {
+		margin-inline: $grid-unit 0;
+
+		&.is-collapsed ~ .editor-collapsible-block-toolbar__toggle {
+			margin-inline: $grid-unit 0;
+		}
+	}
+}
+
+.editor-header__center {
+	grid-column: 3 / 4;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	// To enable shrinking and truncating of child text, apply an explicit min-width.
+	min-width: 0;
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+	// At less than mobile the header’s `gap` is zero so margins are added to create a smaller
+	// gap around the center’s contents.
+	@media (max-width: #{$break-mobile - 1}) {
+		> :first-child {
+			margin-inline-start: $grid-unit;
+		}
+		> :last-child {
+			margin-inline-end: $grid-unit;
+		}
+	}
+}
+
+/**
+ * Buttons on the right side
+ */
+
+.editor-header__settings {
+	grid-column: 3 / -1;
+	.editor-header:has(> .editor-header__center) & {
+		grid-column: 4 / -1;
+	}
+	justify-self: end;
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
+	gap: $grid-unit-10;
+}
+
+/**
+ * Show icon labels.
+ */
+
+.show-icon-labels.interface-pinned-items,
+.show-icon-labels .editor-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+			white-space: nowrap;
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Exception for drodpdown toggle buttons.
+	.components-button.has-icon.button-toggle {
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+
+	// Don't hide MenuItemsChoice check icons
+	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
+		display: block;
+	}
+	.editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
+	.interface-pinned-items .components-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+
+		@include break-small {
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+		}
+	}
+
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
+		&::after {
+			content: none;
+		}
+	}
+}
+
+.show-icon-labels {
+	.editor-header__toolbar .block-editor-block-mover {
+		// Modified group borders.
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-top: $grid-unit-05;
+			margin-left: $grid-unit;
+		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
+	}
+}
+
+.show-icon-labels.interface-pinned-items {
+	padding: 6px $grid-unit-15 $grid-unit-15;
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	border-bottom: 1px solid $gray-400;
+	display: block;
+
+	> .components-button.has-icon {
+		margin: 0;
+		padding: 6px 6px 6px $grid-unit;
+		width: 14.625rem;
+		justify-content: flex-start;
+
+		&[aria-expanded="true"] svg {
+			display: block;
+			max-width: $grid-unit-30;
+		}
+		&[aria-expanded="false"] {
+			padding-left: $grid-unit-50;
+		}
+		svg {
+			margin-right: 8px;
+		}
+	}
+}
+
+.editor-header__post-preview-button {
+	@include break-mobile {
+		display: none;
+	}
+}
+
+.editor-editor-interface.is-distraction-free {
+	.interface-interface-skeleton__header {
+		border-bottom: none;
+	}
+
+	.editor-header {
+		background-color: $white;
+		width: 100%;
+
+		@include break-medium {
+			box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+			position: absolute;
+		}
+
+
+		// hide some parts
+		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
+			visibility: hidden;
+		}
+
+		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
+		& > .editor-header__settings > .editor-preview-dropdown,
+		& > .editor-header__settings > .interface-pinned-items,
+		& > .editor-header__settings > .editor-zoom-out-toggle {
+			display: none;
+		}
+
+	}
+
+	// We need ! important because we override inline styles
+	// set by the motion component.
+	.interface-interface-skeleton__header:focus-within {
+		opacity: 1 !important;
+		div {
+			transform: translateX(0) translateZ(0) !important;
+		}
+
+	}
+
+	.components-editor-notices__dismissible {
+		position: absolute;
+		z-index: 35;
+	}
+}
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
index 3c1521f756554a..d940532be75a3d 100644
--- a/packages/editor/src/components/index.js
+++ b/packages/editor/src/components/index.js
@@ -1,35 +1,57 @@
+/**
+ * Internal dependencies
+ */
+import EditorKeyboardShortcuts from './global-keyboard-shortcuts';
+
 // Block Creation Components.
 export * from './autocompleters';
 
 // Post Related Components.
 export { default as AutosaveMonitor } from './autosave-monitor';
+export { default as DocumentBar } from './document-bar';
 export { default as DocumentOutline } from './document-outline';
 export { default as DocumentOutlineCheck } from './document-outline/check';
-export { default as VisualEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/visual-editor-shortcuts';
-export { default as TextEditorGlobalKeyboardShortcuts } from './global-keyboard-shortcuts/text-editor-shortcuts';
+export { EditorKeyboardShortcuts };
 export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-shortcuts/register-shortcuts';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
 export { default as EditorNotices } from './editor-notices';
 export { default as EditorSnackbars } from './editor-snackbars';
 export { default as EntitiesSavedStates } from './entities-saved-states';
+export { useIsDirty as useEntitiesSavedStatesIsDirty } from './entities-saved-states/hooks/use-is-dirty';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as LocalAutosaveMonitor } from './local-autosave-monitor';
 export { default as PageAttributesCheck } from './page-attributes/check';
 export { default as PageAttributesOrder } from './page-attributes/order';
+export { default as PageAttributesPanel } from './page-attributes/panel';
 export { default as PageAttributesParent } from './page-attributes/parent';
-export { default as PageTemplate } from './post-template';
+export { default as PageTemplate } from './post-template/classic-theme';
+export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
+export { default as PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item';
+export { default as PluginMoreMenuItem } from './plugin-more-menu-item';
+export { default as PluginPostPublishPanel } from './plugin-post-publish-panel';
+export { default as PluginPostStatusInfo } from './plugin-post-status-info';
+export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel';
+export { default as PluginPreviewMenuItem } from './plugin-preview-menu-item';
+export { default as PluginSidebar } from './plugin-sidebar';
+export { default as PluginSidebarMoreMenuItem } from './plugin-sidebar-more-menu-item';
+export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
+export { default as PostAuthorPanel } from './post-author/panel';
 export { default as PostComments } from './post-comments';
+export { default as PostDiscussionPanel } from './post-discussion/panel';
 export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';
+export { default as PostExcerptPanel } from './post-excerpt/panel';
 export { default as PostFeaturedImage } from './post-featured-image';
 export { default as PostFeaturedImageCheck } from './post-featured-image/check';
+export { default as PostFeaturedImagePanel } from './post-featured-image/panel';
 export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';
 export { default as PostLastRevision } from './post-last-revision';
 export { default as PostLastRevisionCheck } from './post-last-revision/check';
+export { default as PostLastRevisionPanel } from './post-last-revision/panel';
 export { default as PostLockedModal } from './post-locked-modal';
 export { default as PostPendingStatus } from './post-pending-status';
 export { default as PostPendingStatusCheck } from './post-pending-status/check';
@@ -45,23 +67,26 @@ export {
 	default as PostScheduleLabel,
 	usePostScheduleLabel,
 } from './post-schedule/label';
-export { default as PostSlug } from './post-slug';
-export { default as PostSlugCheck } from './post-slug/check';
+export { default as PostSchedulePanel } from './post-schedule/panel';
 export { default as PostSticky } from './post-sticky';
 export { default as PostStickyCheck } from './post-sticky/check';
 export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button';
+export { default as PostSyncStatus } from './post-sync-status';
 export { default as PostTaxonomies } from './post-taxonomies';
 export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector';
 export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector';
 export { default as PostTaxonomiesCheck } from './post-taxonomies/check';
+export { default as PostTaxonomiesPanel } from './post-taxonomies/panel';
 export { default as PostTextEditor } from './post-text-editor';
 export { default as PostTitle } from './post-title';
+export { default as PostTitleRaw } from './post-title/post-title-raw';
 export { default as PostTrash } from './post-trash';
 export { default as PostTrashCheck } from './post-trash/check';
 export { default as PostTypeSupportCheck } from './post-type-support-check';
 export { default as PostURL } from './post-url';
 export { default as PostURLCheck } from './post-url/check';
 export { default as PostURLLabel, usePostURLLabel } from './post-url/label';
+export { default as PostURLPanel } from './post-url/panel';
 export { default as PostVisibility } from './post-visibility';
 export {
 	default as PostVisibilityLabel,
@@ -79,3 +104,21 @@ export { default as CharacterCount } from './character-count';
 export { default as EditorProvider } from './provider';
 
 export * from './deprecated';
+
+/**
+ * Handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
+export const VisualEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;
+
+/**
+ * Handles the keyboard shortcuts for the editor.
+ *
+ * It provides functionality for various keyboard shortcuts such as toggling editor mode,
+ * toggling distraction-free mode, undo/redo, saving the post, toggling list view,
+ * and toggling the sidebar.
+ */
+export const TextEditorGlobalKeyboardShortcuts = EditorKeyboardShortcuts;
diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js
index 127f15fbfdaf53..effc2a2cac62a7 100644
--- a/packages/editor/src/components/index.native.js
+++ b/packages/editor/src/components/index.native.js
@@ -9,5 +9,7 @@ export { default as EditorProvider } from './provider';
 
 // Other Components.
 export { default as EditorHelpTopics } from './editor-help';
+export { default as OfflineStatus } from './offline-status';
+export { default as ErrorBoundary } from './error-boundary';
 
 export * from './deprecated';
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
new file mode 100644
index 00000000000000..66730b43592b6e
--- /dev/null
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { useCallback, useRef } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { ESCAPE } from '@wordpress/keycodes';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PrivateInserterLibrary } = unlock( blockEditorPrivateApis );
+
+export default function InserterSidebar() {
+	const {
+		blockSectionRootClientId,
+		inserterSidebarToggleRef,
+		inserter,
+		showMostUsedBlocks,
+		sidebarIsOpened,
+	} = useSelect( ( select ) => {
+		const {
+			getInserterSidebarToggleRef,
+			getInserter,
+			isPublishSidebarOpened,
+		} = unlock( select( editorStore ) );
+		const { getBlockRootClientId, isZoomOut, getSectionRootClientId } =
+			unlock( select( blockEditorStore ) );
+		const { get } = select( preferencesStore );
+		const { getActiveComplementaryArea } = select( interfaceStore );
+		const getBlockSectionRootClientId = () => {
+			if ( isZoomOut() ) {
+				const sectionRootClientId = getSectionRootClientId();
+
+				if ( sectionRootClientId ) {
+					return sectionRootClientId;
+				}
+			}
+			return getBlockRootClientId();
+		};
+		return {
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
+			inserter: getInserter(),
+			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+			blockSectionRootClientId: getBlockSectionRootClientId(),
+			sidebarIsOpened: !! (
+				getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened()
+			),
+		};
+	}, [] );
+	const { setIsInserterOpened } = useDispatch( editorStore );
+	const { disableComplementaryArea } = useDispatch( interfaceStore );
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const libraryRef = useRef();
+
+	// When closing the inserter, focus should return to the toggle button.
+	const closeInserterSidebar = useCallback( () => {
+		setIsInserterOpened( false );
+		inserterSidebarToggleRef.current?.focus();
+	}, [ inserterSidebarToggleRef, setIsInserterOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeInserterSidebar();
+			}
+		},
+		[ closeInserterSidebar ]
+	);
+
+	const inserterContents = (
+		<div className="editor-inserter-sidebar__content">
+			<PrivateInserterLibrary
+				showMostUsedBlocks={ showMostUsedBlocks }
+				showInserterHelpPanel
+				shouldFocusBlock={ isMobileViewport }
+				rootClientId={ blockSectionRootClientId }
+				onSelect={ inserter.onSelect }
+				__experimentalInitialTab={ inserter.tab }
+				__experimentalInitialCategory={ inserter.category }
+				__experimentalFilterValue={ inserter.filterValue }
+				onPatternCategorySelection={
+					sidebarIsOpened
+						? () => disableComplementaryArea( 'core' )
+						: undefined
+				}
+				ref={ libraryRef }
+				onClose={ closeInserterSidebar }
+			/>
+		</div>
+	);
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
+			{ inserterContents }
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
new file mode 100644
index 00000000000000..1c6155dbbe7c96
--- /dev/null
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -0,0 +1,11 @@
+.editor-inserter-sidebar {
+	@include reset;
+
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-inserter-sidebar__content {
+	height: 100%;
+}
diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/config.js b/packages/editor/src/components/keyboard-shortcut-help-modal/config.js
new file mode 100644
index 00000000000000..0380028aa100c0
--- /dev/null
+++ b/packages/editor/src/components/keyboard-shortcut-help-modal/config.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const textFormattingShortcuts = [
+	{
+		keyCombination: { modifier: 'primary', character: 'b' },
+		description: __( 'Make the selected text bold.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'i' },
+		description: __( 'Make the selected text italic.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'k' },
+		description: __( 'Convert the selected text into a link.' ),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'k' },
+		description: __( 'Remove a link.' ),
+	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page.' ),
+	},
+	{
+		keyCombination: { modifier: 'primary', character: 'u' },
+		description: __( 'Underline the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
+	{
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
+	{
+		keyCombination: { modifier: 'primaryShift', character: 'SPACE' },
+		description: __( 'Add non breaking space.' ),
+	},
+];
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js b/packages/editor/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
similarity index 100%
rename from packages/edit-post/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
rename to packages/editor/src/components/keyboard-shortcut-help-modal/dynamic-shortcut.js
diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/index.js b/packages/editor/src/components/keyboard-shortcut-help-modal/index.js
new file mode 100644
index 00000000000000..81a821c7783838
--- /dev/null
+++ b/packages/editor/src/components/keyboard-shortcut-help-modal/index.js
@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { textFormattingShortcuts } from './config';
+import Shortcut from './shortcut';
+import DynamicShortcut from './dynamic-shortcut';
+
+const KEYBOARD_SHORTCUT_HELP_MODAL_NAME = 'editor/keyboard-shortcut-help';
+
+const ShortcutList = ( { shortcuts } ) => (
+	/*
+	 * Disable reason: The `list` ARIA role is redundant but
+	 * Safari+VoiceOver won't announce the list otherwise.
+	 */
+	/* eslint-disable jsx-a11y/no-redundant-roles */
+	<ul
+		className="editor-keyboard-shortcut-help-modal__shortcut-list"
+		role="list"
+	>
+		{ shortcuts.map( ( shortcut, index ) => (
+			<li
+				className="editor-keyboard-shortcut-help-modal__shortcut"
+				key={ index }
+			>
+				{ typeof shortcut === 'string' ? (
+					<DynamicShortcut name={ shortcut } />
+				) : (
+					<Shortcut { ...shortcut } />
+				) }
+			</li>
+		) ) }
+	</ul>
+	/* eslint-enable jsx-a11y/no-redundant-roles */
+);
+
+const ShortcutSection = ( { title, shortcuts, className } ) => (
+	<section
+		className={ clsx(
+			'editor-keyboard-shortcut-help-modal__section',
+			className
+		) }
+	>
+		{ !! title && (
+			<h2 className="editor-keyboard-shortcut-help-modal__section-title">
+				{ title }
+			</h2>
+		) }
+		<ShortcutList shortcuts={ shortcuts } />
+	</section>
+);
+
+const ShortcutCategorySection = ( {
+	title,
+	categoryName,
+	additionalShortcuts = [],
+} ) => {
+	const categoryShortcuts = useSelect(
+		( select ) => {
+			return select( keyboardShortcutsStore ).getCategoryShortcuts(
+				categoryName
+			);
+		},
+		[ categoryName ]
+	);
+
+	return (
+		<ShortcutSection
+			title={ title }
+			shortcuts={ categoryShortcuts.concat( additionalShortcuts ) }
+		/>
+	);
+};
+
+function KeyboardShortcutHelpModal() {
+	const isModalActive = useSelect(
+		( select ) =>
+			select( interfaceStore ).isModalActive(
+				KEYBOARD_SHORTCUT_HELP_MODAL_NAME
+			),
+		[]
+	);
+	const { openModal, closeModal } = useDispatch( interfaceStore );
+	const toggleModal = () => {
+		if ( isModalActive ) {
+			closeModal();
+		} else {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		}
+	};
+	useShortcut( 'core/editor/keyboard-shortcuts', toggleModal );
+
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="editor-keyboard-shortcut-help-modal"
+			title={ __( 'Keyboard shortcuts' ) }
+			closeButtonLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<ShortcutSection
+				className="editor-keyboard-shortcut-help-modal__main-shortcuts"
+				shortcuts={ [ 'core/editor/keyboard-shortcuts' ] }
+			/>
+			<ShortcutCategorySection
+				title={ __( 'Global shortcuts' ) }
+				categoryName="global"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Selection shortcuts' ) }
+				categoryName="selection"
+			/>
+
+			<ShortcutCategorySection
+				title={ __( 'Block shortcuts' ) }
+				categoryName="block"
+				additionalShortcuts={ [
+					{
+						keyCombination: { character: '/' },
+						description: __(
+							'Change the block type after adding a new paragraph.'
+						),
+						/* translators: The forward-slash character. e.g. '/'. */
+						ariaLabel: __( 'Forward-slash' ),
+					},
+				] }
+			/>
+			<ShortcutSection
+				title={ __( 'Text formatting' ) }
+				shortcuts={ textFormattingShortcuts }
+			/>
+			<ShortcutCategorySection
+				title={ __( 'List View shortcuts' ) }
+				categoryName="list-view"
+			/>
+		</Modal>
+	);
+}
+
+export default KeyboardShortcutHelpModal;
diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/editor/src/components/keyboard-shortcut-help-modal/shortcut.js
new file mode 100644
index 00000000000000..cec697bc69cd98
--- /dev/null
+++ b/packages/editor/src/components/keyboard-shortcut-help-modal/shortcut.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { displayShortcutList, shortcutAriaLabel } from '@wordpress/keycodes';
+
+function KeyCombination( { keyCombination, forceAriaLabel } ) {
+	const shortcut = keyCombination.modifier
+		? displayShortcutList[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+	const ariaLabel = keyCombination.modifier
+		? shortcutAriaLabel[ keyCombination.modifier ](
+				keyCombination.character
+		  )
+		: keyCombination.character;
+
+	return (
+		<kbd
+			className="editor-keyboard-shortcut-help-modal__shortcut-key-combination"
+			aria-label={ forceAriaLabel || ariaLabel }
+		>
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
+
+					return (
+						<kbd
+							key={ index }
+							className="editor-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
+		</kbd>
+	);
+}
+
+function Shortcut( { description, keyCombination, aliases = [], ariaLabel } ) {
+	return (
+		<>
+			<div className="editor-keyboard-shortcut-help-modal__shortcut-description">
+				{ description }
+			</div>
+			<div className="editor-keyboard-shortcut-help-modal__shortcut-term">
+				<KeyCombination
+					keyCombination={ keyCombination }
+					forceAriaLabel={ ariaLabel }
+				/>
+				{ aliases.map( ( alias, index ) => (
+					<KeyCombination
+						keyCombination={ alias }
+						forceAriaLabel={ ariaLabel }
+						key={ index }
+					/>
+				) ) }
+			</div>
+		</>
+	);
+}
+
+export default Shortcut;
diff --git a/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss
new file mode 100644
index 00000000000000..4eafa638cdfd94
--- /dev/null
+++ b/packages/editor/src/components/keyboard-shortcut-help-modal/style.scss
@@ -0,0 +1,58 @@
+.editor-keyboard-shortcut-help-modal {
+	&__section {
+		margin: 0 0 2rem 0;
+	}
+
+	&__section-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+	}
+
+	&__shortcut {
+		display: flex;
+		align-items: baseline;
+		padding: 0.6rem 0;
+		border-top: 1px solid $gray-300;
+		margin-bottom: 0;
+
+		&:last-child {
+			border-bottom: 1px solid $gray-300;
+		}
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	&__shortcut-term {
+		font-weight: 600;
+		margin: 0 0 0 1rem;
+		text-align: right;
+	}
+
+	&__shortcut-description {
+		flex: 1;
+		margin: 0;
+	}
+
+	&__shortcut-key-combination {
+		display: block;
+		background: none;
+		margin: 0;
+		padding: 0;
+
+		& + .editor-keyboard-shortcut-help-modal__shortcut-key-combination {
+			margin-top: 10px;
+		}
+	}
+
+	&__shortcut-key {
+		padding: 0.25rem 0.5rem;
+		border-radius: 8%;
+		margin: 0 0.2rem 0 0.2rem;
+
+		&:last-child {
+			margin: 0 0 0 0.2rem;
+		}
+	}
+}
diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js
new file mode 100644
index 00000000000000..c90479c23ec702
--- /dev/null
+++ b/packages/editor/src/components/list-view-sidebar/index.js
@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalListView as ListView,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useCallback, useRef, useState } from '@wordpress/element';
+import { __, _x } from '@wordpress/i18n';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
+import { ESCAPE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import ListViewOutline from './list-view-outline';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { TabbedSidebar } = unlock( blockEditorPrivateApis );
+
+export default function ListViewSidebar() {
+	const { setIsListViewOpened } = useDispatch( editorStore );
+	const { getListViewToggleRef } = unlock( useSelect( editorStore ) );
+
+	// This hook handles focus when the sidebar first renders.
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+
+	// When closing the list view, focus should return to the toggle button.
+	const closeListView = useCallback( () => {
+		setIsListViewOpened( false );
+		getListViewToggleRef().current?.focus();
+	}, [ getListViewToggleRef, setIsListViewOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeListView();
+			}
+		},
+		[ closeListView ]
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the dropZoneElement updates.
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+	// Tracks our current tab.
+	const [ tab, setTab ] = useState( 'list-view' );
+
+	// This ref refers to the sidebar as a whole.
+	const sidebarRef = useRef();
+	// This ref refers to the tab panel.
+	const tabsRef = useRef();
+	// This ref refers to the list view application area.
+	const listViewRef = useRef();
+
+	// Must merge the refs together so focus can be handled properly in the next function.
+	const listViewContainerRef = useMergeRefs( [
+		focusOnMountRef,
+		listViewRef,
+		setDropZoneElement,
+	] );
+
+	/*
+	 * Callback function to handle list view or outline focus.
+	 *
+	 * @param {string} currentTab The current tab. Either list view or outline.
+	 *
+	 * @return void
+	 */
+	function handleSidebarFocus( currentTab ) {
+		// Tab panel focus.
+		const tabPanelFocus = focus.tabbable.find( tabsRef.current )[ 0 ];
+		// List view tab is selected.
+		if ( currentTab === 'list-view' ) {
+			// Either focus the list view or the tab panel. Must have a fallback because the list view does not render when there are no blocks.
+			const listViewApplicationFocus = focus.tabbable.find(
+				listViewRef.current
+			)[ 0 ];
+			const listViewFocusArea = sidebarRef.current.contains(
+				listViewApplicationFocus
+			)
+				? listViewApplicationFocus
+				: tabPanelFocus;
+			listViewFocusArea.focus();
+			// Outline tab is selected.
+		} else {
+			tabPanelFocus.focus();
+		}
+	}
+
+	const handleToggleListViewShortcut = useCallback( () => {
+		// If the sidebar has focus, it is safe to close.
+		if (
+			sidebarRef.current.contains(
+				sidebarRef.current.ownerDocument.activeElement
+			)
+		) {
+			closeListView();
+		} else {
+			// If the list view or outline does not have focus, focus should be moved to it.
+			handleSidebarFocus( tab );
+		}
+	}, [ closeListView, tab ] );
+
+	// This only fires when the sidebar is open because of the conditional rendering.
+	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
+	useShortcut( 'core/editor/toggle-list-view', handleToggleListViewShortcut );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-list-view-sidebar"
+			onKeyDown={ closeOnEscape }
+			ref={ sidebarRef }
+		>
+			<TabbedSidebar
+				tabs={ [
+					{
+						name: 'list-view',
+						title: _x( 'List View', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<div className="editor-list-view-sidebar__list-view-panel-content">
+									<ListView
+										dropZoneElement={ dropZoneElement }
+									/>
+								</div>
+							</div>
+						),
+						panelRef: listViewContainerRef,
+					},
+					{
+						name: 'outline',
+						title: _x( 'Outline', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<ListViewOutline />
+							</div>
+						),
+					},
+				] }
+				onClose={ closeListView }
+				onSelect={ ( tabName ) => setTab( tabName ) }
+				defaultTabId="list-view"
+				ref={ tabsRef }
+				closeButtonLabel={ __( 'Close' ) }
+			/>
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/list-view-sidebar/list-view-outline.js b/packages/editor/src/components/list-view-sidebar/list-view-outline.js
new file mode 100644
index 00000000000000..c73779d64f5cff
--- /dev/null
+++ b/packages/editor/src/components/list-view-sidebar/list-view-outline.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CharacterCount from '../character-count';
+import WordCount from '../word-count';
+import TimeToRead from '../time-to-read';
+import DocumentOutline from '../document-outline';
+
+export default function ListViewOutline() {
+	return (
+		<>
+			<div className="editor-list-view-sidebar__outline">
+				<div>
+					<Text>{ __( 'Characters:' ) }</Text>
+					<Text>
+						<CharacterCount />
+					</Text>
+				</div>
+				<div>
+					<Text>{ __( 'Words:' ) }</Text>
+					<WordCount />
+				</div>
+				<div>
+					<Text>{ __( 'Time to read:' ) }</Text>
+					<TimeToRead />
+				</div>
+			</div>
+			<DocumentOutline />
+		</>
+	);
+}
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
new file mode 100644
index 00000000000000..54c7376d374853
--- /dev/null
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -0,0 +1,55 @@
+.editor-list-view-sidebar {
+	height: 100%;
+
+	@include break-medium {
+		width: $secondary-sidebar-width;
+	}
+}
+
+.editor-list-view-sidebar__list-view-panel-content,
+.editor-list-view-sidebar__list-view-container > .document-outline {
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-05;
+}
+
+.editor-list-view-sidebar__list-view-container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.editor-list-view-sidebar__tab-panel {
+	height: 100%;
+}
+
+.editor-list-view-sidebar__outline {
+	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;
+	}
+
+	& > div > span {
+		font-size: $helptext-font-size;
+		line-height: $default-line-height;
+		color: $gray-700;
+	}
+}
+
diff --git a/packages/editor/src/components/local-autosave-monitor/index.js b/packages/editor/src/components/local-autosave-monitor/index.js
index 492a6bb27e9c8a..ad4e40d15d5c58 100644
--- a/packages/editor/src/components/local-autosave-monitor/index.js
+++ b/packages/editor/src/components/local-autosave-monitor/index.js
@@ -23,7 +23,6 @@ const requestIdleCallback = window.requestIdleCallback
 	: window.requestAnimationFrame;
 
 let hasStorageSupport;
-let uniqueId = 0;
 
 /**
  * Function which returns true if the current environment supports browser
@@ -31,17 +30,19 @@ let uniqueId = 0;
  * reused in subsequent invocations.
  */
 const hasSessionStorageSupport = () => {
-	if ( typeof hasStorageSupport === 'undefined' ) {
-		try {
-			// Private Browsing in Safari 10 and earlier will throw an error when
-			// attempting to set into sessionStorage. The test here is intentional in
-			// causing a thrown error as condition bailing from local autosave.
-			window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
-			window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
-			hasStorageSupport = true;
-		} catch ( error ) {
-			hasStorageSupport = false;
-		}
+	if ( hasStorageSupport !== undefined ) {
+		return hasStorageSupport;
+	}
+
+	try {
+		// Private Browsing in Safari 10 and earlier will throw an error when
+		// attempting to set into sessionStorage. The test here is intentional in
+		// causing a thrown error as condition bailing from local autosave.
+		window.sessionStorage.setItem( '__wpEditorTestSessionStorage', '' );
+		window.sessionStorage.removeItem( '__wpEditorTestSessionStorage' );
+		hasStorageSupport = true;
+	} catch {
+		hasStorageSupport = false;
 	}
 
 	return hasStorageSupport;
@@ -74,7 +75,7 @@ function useAutosaveNotice() {
 
 		try {
 			localAutosave = JSON.parse( localAutosave );
-		} catch ( error ) {
+		} catch {
 			// Not usable if it can't be parsed.
 			return;
 		}
@@ -100,13 +101,14 @@ function useAutosaveNotice() {
 			return;
 		}
 
-		const noticeId = `wpEditorAutosaveRestore${ ++uniqueId }`;
+		const id = 'wpEditorAutosaveRestore';
+
 		createWarningNotice(
 			__(
 				'The backup of this post in your browser is different from the version below.'
 			),
 			{
-				id: noticeId,
+				id,
 				actions: [
 					{
 						label: __( 'Restore the backup' ),
@@ -117,7 +119,7 @@ function useAutosaveNotice() {
 							} = edits;
 							editPost( editsWithoutContent );
 							resetEditorBlocks( parse( edits.content ) );
-							removeNotice( noticeId );
+							removeNotice( id );
 						},
 					},
 				],
@@ -142,20 +144,20 @@ function useAutosavePurge() {
 			[]
 		);
 
-	const lastIsDirty = useRef( isDirty );
-	const lastIsAutosaving = useRef( isAutosaving );
+	const lastIsDirtyRef = useRef( isDirty );
+	const lastIsAutosavingRef = useRef( isAutosaving );
 
 	useEffect( () => {
 		if (
 			! didError &&
-			( ( lastIsAutosaving.current && ! isAutosaving ) ||
-				( lastIsDirty.current && ! isDirty ) )
+			( ( lastIsAutosavingRef.current && ! isAutosaving ) ||
+				( lastIsDirtyRef.current && ! isDirty ) )
 		) {
 			localAutosaveClear( postId, isEditedPostNew );
 		}
 
-		lastIsDirty.current = isDirty;
-		lastIsAutosaving.current = isAutosaving;
+		lastIsDirtyRef.current = isDirty;
+		lastIsAutosavingRef.current = isAutosaving;
 	}, [ isDirty, isAutosaving, didError ] );
 
 	// Once the isEditedPostNew changes from true to false, let's clear the auto-draft autosave.
@@ -176,11 +178,9 @@ function LocalAutosaveMonitor() {
 	useAutosaveNotice();
 	useAutosavePurge();
 
-	const { localAutosaveInterval } = useSelect(
-		( select ) => ( {
-			localAutosaveInterval:
-				select( editorStore ).getEditorSettings().localAutosaveInterval,
-		} ),
+	const localAutosaveInterval = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().localAutosaveInterval,
 		[]
 	);
 
@@ -192,4 +192,16 @@ function LocalAutosaveMonitor() {
 	);
 }
 
+/**
+ * Monitors local autosaves of a post in the editor.
+ * It uses several hooks and functions to manage autosave behavior:
+ * - `useAutosaveNotice` hook: Manages the creation of a notice prompting the user to restore a local autosave, if one exists.
+ * - `useAutosavePurge` hook: Ejects a local autosave after a successful save occurs.
+ * - `hasSessionStorageSupport` function: Checks if the current environment supports browser sessionStorage.
+ * - `LocalAutosaveMonitor` component: Uses the `AutosaveMonitor` component to perform autosaves at a specified interval.
+ *
+ * The module also checks for sessionStorage support and conditionally exports the `LocalAutosaveMonitor` component based on that.
+ *
+ * @module LocalAutosaveMonitor
+ */
 export default ifCondition( hasSessionStorageSupport )( LocalAutosaveMonitor );
diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js
new file mode 100644
index 00000000000000..be1b2bdc2d6728
--- /dev/null
+++ b/packages/editor/src/components/media-categories/index.js
@@ -0,0 +1,225 @@
+/**
+ * The `editor` settings here need to be in sync with the corresponding ones in `editor` package.
+ * See `packages/editor/src/components/media-categories/index.js`.
+ *
+ * In the future we could consider creating an Openvese package that can be used in both `editor` and `site-editor`.
+ * The rest of the settings would still need to be in sync though.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+
+/** @typedef {import('@wordpress/block-editor').InserterMediaRequest} InserterMediaRequest */
+/** @typedef {import('@wordpress/block-editor').InserterMediaItem} InserterMediaItem */
+/** @typedef {import('@wordpress/block-editor').InserterMediaCategory} InserterMediaCategory */
+
+const getExternalLink = ( url, text ) =>
+	`<a ${ getExternalLinkAttributes( url ) }>${ text }</a>`;
+
+const getExternalLinkAttributes = ( url ) =>
+	`href="${ url }" target="_blank" rel="noreferrer noopener"`;
+
+const getOpenverseLicense = ( license, licenseVersion ) => {
+	let licenseName = license.trim();
+	// PDM has no abbreviation
+	if ( license !== 'pdm' ) {
+		licenseName = license.toUpperCase().replace( 'SAMPLING', 'Sampling' );
+	}
+	// If version is known, append version to the name.
+	// The license has to have a version to be valid. Only
+	// PDM (public domain mark) doesn't have a version.
+	if ( licenseVersion ) {
+		licenseName += ` ${ licenseVersion }`;
+	}
+	// For licenses other than public-domain marks, prepend 'CC' to the name.
+	if ( ! [ 'pdm', 'cc0' ].includes( license ) ) {
+		licenseName = `CC ${ licenseName }`;
+	}
+	return licenseName;
+};
+
+const getOpenverseCaption = ( item ) => {
+	const {
+		title,
+		foreign_landing_url: foreignLandingUrl,
+		creator,
+		creator_url: creatorUrl,
+		license,
+		license_version: licenseVersion,
+		license_url: licenseUrl,
+	} = item;
+	const fullLicense = getOpenverseLicense( license, licenseVersion );
+	const _creator = decodeEntities( creator );
+	let _caption;
+	if ( _creator ) {
+		_caption = title
+			? sprintf(
+					// translators: %1s: Title of a media work from Openverse; %2s: Name of the work's creator; %3s: Work's licence e.g: "CC0 1.0".
+					_x( '"%1$s" by %2$s/ %3$s', 'caption' ),
+					getExternalLink(
+						foreignLandingUrl,
+						decodeEntities( title )
+					),
+					creatorUrl
+						? getExternalLink( creatorUrl, _creator )
+						: _creator,
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  )
+			: sprintf(
+					// translators: %1s: Link attributes for a given Openverse media work; %2s: Name of the work's creator; %3s: Works's licence e.g: "CC0 1.0".
+					_x( '<a %1$s>Work</a> by %2$s/ %3$s', 'caption' ),
+					getExternalLinkAttributes( foreignLandingUrl ),
+					creatorUrl
+						? getExternalLink( creatorUrl, _creator )
+						: _creator,
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  );
+	} else {
+		_caption = title
+			? sprintf(
+					// translators: %1s: Title of a media work from Openverse; %2s: Work's licence e.g: "CC0 1.0".
+					_x( '"%1$s"/ %2$s', 'caption' ),
+					getExternalLink(
+						foreignLandingUrl,
+						decodeEntities( title )
+					),
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  )
+			: sprintf(
+					// translators: %1s: Link attributes for a given Openverse media work; %2s: Works's licence e.g: "CC0 1.0".
+					_x( '<a %1$s>Work</a>/ %2$s', 'caption' ),
+					getExternalLinkAttributes( foreignLandingUrl ),
+					licenseUrl
+						? getExternalLink(
+								`${ licenseUrl }?ref=openverse`,
+								fullLicense
+						  )
+						: fullLicense
+			  );
+	}
+	return _caption.replace( /\s{2}/g, ' ' );
+};
+
+const coreMediaFetch = async ( query = {} ) => {
+	const mediaItems = await resolveSelect( coreStore ).getMediaItems( {
+		...query,
+		orderBy: !! query?.search ? 'relevance' : 'date',
+	} );
+	return mediaItems.map( ( mediaItem ) => ( {
+		...mediaItem,
+		alt: mediaItem.alt_text,
+		url: mediaItem.source_url,
+		previewUrl: mediaItem.media_details?.sizes?.medium?.source_url,
+		caption: mediaItem.caption?.raw,
+	} ) );
+};
+
+/** @type {InserterMediaCategory[]} */
+const inserterMediaCategories = [
+	{
+		name: 'images',
+		labels: {
+			name: __( 'Images' ),
+			search_items: __( 'Search images' ),
+		},
+		mediaType: 'image',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'image' } );
+		},
+	},
+	{
+		name: 'videos',
+		labels: {
+			name: __( 'Videos' ),
+			search_items: __( 'Search videos' ),
+		},
+		mediaType: 'video',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'video' } );
+		},
+	},
+	{
+		name: 'audio',
+		labels: {
+			name: __( 'Audio' ),
+			search_items: __( 'Search audio' ),
+		},
+		mediaType: 'audio',
+		async fetch( query = {} ) {
+			return coreMediaFetch( { ...query, media_type: 'audio' } );
+		},
+	},
+	{
+		name: 'openverse',
+		labels: {
+			name: __( 'Openverse' ),
+			search_items: __( 'Search Openverse' ),
+		},
+		mediaType: 'image',
+		async fetch( query = {} ) {
+			const defaultArgs = {
+				mature: false,
+				excluded_source: 'flickr,inaturalist,wikimedia',
+				license: 'pdm,cc0',
+			};
+			const finalQuery = { ...query, ...defaultArgs };
+			const mapFromInserterMediaRequest = {
+				per_page: 'page_size',
+				search: 'q',
+			};
+			const url = new URL( 'https://api.openverse.org/v1/images/' );
+			Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+				const queryKey = mapFromInserterMediaRequest[ key ] || key;
+				url.searchParams.set( queryKey, value );
+			} );
+			const response = await window.fetch( url, {
+				headers: {
+					'User-Agent': 'WordPress/inserter-media-fetch',
+				},
+			} );
+			const jsonResponse = await response.json();
+			const results = jsonResponse.results;
+			return results.map( ( result ) => ( {
+				...result,
+				// This is a temp solution for better titles, until Openverse API
+				// completes the cleaning up of some titles of their upstream data.
+				title: result.title?.toLowerCase().startsWith( 'file:' )
+					? result.title.slice( 5 )
+					: result.title,
+				sourceId: result.id,
+				id: undefined,
+				caption: getOpenverseCaption( result ),
+				previewUrl: result.thumbnail,
+			} ) );
+		},
+		getReportUrl: ( { sourceId } ) =>
+			`https://wordpress.org/openverse/image/${ sourceId }/report/`,
+		isExternalResource: true,
+	},
+];
+
+export default inserterMediaCategories;
diff --git a/packages/editor/src/components/mode-switcher/index.js b/packages/editor/src/components/mode-switcher/index.js
new file mode 100644
index 00000000000000..439fbd7acc21fe
--- /dev/null
+++ b/packages/editor/src/components/mode-switcher/index.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Set of available mode options.
+ *
+ * @type {Array}
+ */
+const MODES = [
+	{
+		value: 'visual',
+		label: __( 'Visual editor' ),
+	},
+	{
+		value: 'text',
+		label: __( 'Code editor' ),
+	},
+];
+
+function ModeSwitcher() {
+	const { shortcut, isRichEditingEnabled, isCodeEditingEnabled, mode } =
+		useSelect(
+			( select ) => ( {
+				shortcut: select(
+					keyboardShortcutsStore
+				).getShortcutRepresentation( 'core/editor/toggle-mode' ),
+				isRichEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.richEditingEnabled,
+				isCodeEditingEnabled:
+					select( editorStore ).getEditorSettings()
+						.codeEditingEnabled,
+				mode: select( editorStore ).getEditorMode(),
+			} ),
+			[]
+		);
+	const { switchEditorMode } = useDispatch( editorStore );
+
+	let selectedMode = mode;
+	if ( ! isRichEditingEnabled && mode === 'visual' ) {
+		selectedMode = 'text';
+	}
+	if ( ! isCodeEditingEnabled && mode === 'text' ) {
+		selectedMode = 'visual';
+	}
+
+	const choices = MODES.map( ( choice ) => {
+		if ( ! isCodeEditingEnabled && choice.value === 'text' ) {
+			choice = {
+				...choice,
+				disabled: true,
+			};
+		}
+		if ( ! isRichEditingEnabled && choice.value === 'visual' ) {
+			choice = {
+				...choice,
+				disabled: true,
+				info: __(
+					'You can enable the visual editor in your profile settings.'
+				),
+			};
+		}
+		if ( choice.value !== selectedMode && ! choice.disabled ) {
+			return { ...choice, shortcut };
+		}
+		return choice;
+	} );
+
+	return (
+		<MenuGroup label={ __( 'Editor' ) }>
+			<MenuItemsChoice
+				choices={ choices }
+				value={ selectedMode }
+				onSelect={ switchEditorMode }
+			/>
+		</MenuGroup>
+	);
+}
+
+export default ModeSwitcher;
diff --git a/packages/editor/src/components/more-menu/copy-content-menu-item.js b/packages/editor/src/components/more-menu/copy-content-menu-item.js
new file mode 100644
index 00000000000000..8b9de82f7ac96a
--- /dev/null
+++ b/packages/editor/src/components/more-menu/copy-content-menu-item.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function CopyContentMenuItem() {
+	const { createNotice } = useDispatch( noticesStore );
+	const { getCurrentPostId, getCurrentPostType } = useSelect( editorStore );
+	const { getEditedEntityRecord } = useSelect( coreStore );
+
+	function getText() {
+		const record = getEditedEntityRecord(
+			'postType',
+			getCurrentPostType(),
+			getCurrentPostId()
+		);
+		if ( ! record ) {
+			return '';
+		}
+
+		if ( typeof record.content === 'function' ) {
+			return record.content( record );
+		} else if ( record.blocks ) {
+			return __unstableSerializeAndClean( record.blocks );
+		} else if ( record.content ) {
+			return record.content;
+		}
+	}
+
+	function onSuccess() {
+		createNotice( 'info', __( 'All content copied.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}
+
+	const ref = useCopyToClipboard( getText, onSuccess );
+
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
+}
diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js
new file mode 100644
index 00000000000000..9e062e5e5adc50
--- /dev/null
+++ b/packages/editor/src/components/more-menu/index.js
@@ -0,0 +1,163 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
+import { external, moreVertical } from '@wordpress/icons';
+import {
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
+import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import CopyContentMenuItem from './copy-content-menu-item';
+import ModeSwitcher from '../mode-switcher';
+import ToolsMoreMenuGroup from './tools-more-menu-group';
+import ViewMoreMenuGroup from './view-more-menu-group';
+import { store as editorStore } from '../../store';
+
+export default function MoreMenu() {
+	const { openModal } = useDispatch( interfaceStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
+	return (
+		<>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					showTooltip: ! showIconLabels,
+					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup label={ _x( 'View', 'noun' ) }>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="fixedToolbar"
+								onToggle={ turnOffDistractionFree }
+								label={ __( 'Top toolbar' ) }
+								info={ __(
+									'Access all block and document tools in a single place'
+								) }
+								messageActivated={ __(
+									'Top toolbar activated.'
+								) }
+								messageDeactivated={ __(
+									'Top toolbar deactivated.'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="distractionFree"
+								label={ __( 'Distraction free' ) }
+								info={ __( 'Write with calmness' ) }
+								handleToggling={ false }
+								onToggle={ () =>
+									toggleDistractionFree( {
+										createNotice: false,
+									} )
+								}
+								messageActivated={ __(
+									'Distraction free mode activated.'
+								) }
+								messageDeactivated={ __(
+									'Distraction free mode deactivated.'
+								) }
+								shortcut={ displayShortcut.primaryShift(
+									'\\'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated.'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated.'
+								) }
+							/>
+							<ViewMoreMenuGroup.Slot fillProps={ { onClose } } />
+						</MenuGroup>
+						<ModeSwitcher />
+						<ActionItem.Slot
+							name="core/plugin-more-menu"
+							label={ __( 'Plugins' ) }
+							as={ MenuGroup }
+							fillProps={ { onClick: onClose } }
+						/>
+						<MenuGroup label={ __( 'Tools' ) }>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/keyboard-shortcut-help' )
+								}
+								shortcut={ displayShortcut.access( 'h' ) }
+							>
+								{ __( 'Keyboard shortcuts' ) }
+							</MenuItem>
+							<CopyContentMenuItem />
+							<MenuItem
+								icon={ external }
+								href={ __(
+									'https://wordpress.org/documentation/article/wordpress-block-editor/'
+								) }
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								{ __( 'Help' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+							<ToolsMoreMenuGroup.Slot
+								fillProps={ { onClose } }
+							/>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/preferences' )
+								}
+							>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}
diff --git a/packages/editor/src/components/more-menu/tools-more-menu-group.js b/packages/editor/src/components/more-menu/tools-more-menu-group.js
new file mode 100644
index 00000000000000..7dec9d9d490d86
--- /dev/null
+++ b/packages/editor/src/components/more-menu/tools-more-menu-group.js
@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: ToolsMoreMenuGroup, Slot } =
+	createSlotFill( 'ToolsMoreMenuGroup' );
+
+ToolsMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ToolsMoreMenuGroup;
diff --git a/packages/editor/src/components/more-menu/view-more-menu-group.js b/packages/editor/src/components/more-menu/view-more-menu-group.js
new file mode 100644
index 00000000000000..23e2cf82d82c6d
--- /dev/null
+++ b/packages/editor/src/components/more-menu/view-more-menu-group.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill(
+	Platform.OS === 'web' ? Symbol( 'ViewMoreMenuGroup' ) : 'ViewMoreMenuGroup'
+);
+
+ViewMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ViewMoreMenuGroup;
diff --git a/packages/editor/src/components/offline-status/index.native.js b/packages/editor/src/components/offline-status/index.native.js
new file mode 100644
index 00000000000000..2e514abb6e091c
--- /dev/null
+++ b/packages/editor/src/components/offline-status/index.native.js
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { AccessibilityInfo, Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	usePreferredColorSchemeStyle,
+	useNetworkConnectivity,
+	usePrevious,
+} from '@wordpress/compose';
+import { Icon } from '@wordpress/components';
+import { offline as offlineIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+/**
+ * Conditionally announces messages for screen reader users. This Hook provides
+ * two benefits over React Native's `accessibilityLiveRegion`:
+ *
+ * 1. It works on both iOS and Android.
+ * 2. It allows announcing a secondary message when the component is inactive.
+ *
+ * @param {string}  message                   The message to announce.
+ * @param {Object}  options                   Options for the Hook.
+ * @param {boolean} [options.isActive]        Whether the message should be announced.
+ * @param {string}  [options.inactiveMessage] The message to announce when inactive.
+ */
+function useAccessibilityLiveRegion( message, { isActive, inactiveMessage } ) {
+	const { announceForAccessibility } = AccessibilityInfo;
+	const prevIsActive = usePrevious( isActive );
+
+	useEffect( () => {
+		const unconditionalMessage = typeof isActive === 'undefined';
+		const initialRender = typeof prevIsActive === 'undefined';
+
+		if (
+			unconditionalMessage ||
+			( isActive && ! prevIsActive && ! initialRender )
+		) {
+			announceForAccessibility( message );
+		} else if ( ! isActive && prevIsActive && inactiveMessage ) {
+			announceForAccessibility( inactiveMessage );
+		}
+	}, [
+		message,
+		isActive,
+		prevIsActive,
+		inactiveMessage,
+		announceForAccessibility,
+	] );
+}
+
+const OfflineStatus = () => {
+	const { isConnected } = useNetworkConnectivity();
+
+	useAccessibilityLiveRegion( __( 'Network connection re-established' ), {
+		isActive: isConnected,
+		inactiveMessage: __( 'Network connection lost, working offline' ),
+	} );
+
+	const containerStyle = usePreferredColorSchemeStyle(
+		styles.offline,
+		styles.offline__dark
+	);
+
+	const textStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--text' ],
+		styles[ 'offline--text__dark' ]
+	);
+
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles[ 'offline--icon' ],
+		styles[ 'offline--icon__dark' ]
+	);
+
+	return ! isConnected ? (
+		<View
+			accessible
+			accessibilityRole="alert"
+			accessibilityLabel={ __(
+				'Network connection lost, working offline'
+			) }
+			style={ containerStyle }
+		>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) } </Text>
+		</View>
+	) : null;
+};
+
+export default OfflineStatus;
diff --git a/packages/editor/src/components/offline-status/style.native.scss b/packages/editor/src/components/offline-status/style.native.scss
new file mode 100644
index 00000000000000..529693516653f6
--- /dev/null
+++ b/packages/editor/src/components/offline-status/style.native.scss
@@ -0,0 +1,28 @@
+.offline {
+	background-color: $gray-lighten-30;
+	padding: $grid-unit;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+
+.offline__dark {
+	background-color: $gray-70;
+}
+
+.offline--text {
+	color: $black;
+	padding-left: 3;
+}
+
+.offline--text__dark {
+	color: $white;
+}
+
+.offline--icon {
+	fill: $gray-70;
+}
+
+.offline--icon__dark {
+	fill: $gray-10;
+}
diff --git a/packages/editor/src/components/offline-status/test/index.native.js b/packages/editor/src/components/offline-status/test/index.native.js
new file mode 100644
index 00000000000000..7e8787c4033b01
--- /dev/null
+++ b/packages/editor/src/components/offline-status/test/index.native.js
@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { act, render, screen } from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestConnectionStatus,
+	subscribeConnectionStatus,
+} from '@wordpress/react-native-bridge';
+
+/**
+ * Internal dependencies
+ */
+import OfflineStatus from '../index';
+import { AccessibilityInfo } from 'react-native';
+
+jest.mock( '../style.native.scss', () => ( {
+	'offline--icon': {
+		fill: '',
+	},
+} ) );
+
+describe( 'when network connectivity is unavailable', () => {
+	beforeAll( () => {
+		requestConnectionStatus.mockImplementation( ( callback ) => {
+			callback( false );
+			return { remove: jest.fn() };
+		} );
+	} );
+
+	it( 'should display a helpful message', () => {
+		render( <OfflineStatus /> );
+
+		expect( screen.getByText( 'Working Offline' ) ).toBeVisible();
+	} );
+
+	it( 'should display an accessible message', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			screen.getByLabelText( 'Network connection lost, working offline' )
+		).toBeVisible();
+	} );
+
+	it( 'should announce network status', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+
+	it( 'should announce changes to network status', () => {
+		let subscriptionCallback;
+		subscribeConnectionStatus.mockImplementation( ( callback ) => {
+			subscriptionCallback = callback;
+			return { remove: jest.fn() };
+		} );
+		render( <OfflineStatus /> );
+
+		act( () => subscriptionCallback( { isConnected: false } ) );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+} );
+
+describe( 'when network connectivity is available', () => {
+	beforeAll( () => {
+		requestConnectionStatus.mockImplementation( ( callback ) => {
+			callback( true );
+			return { remove: jest.fn() };
+		} );
+	} );
+
+	it( 'should not display a helpful message', () => {
+		render( <OfflineStatus /> );
+
+		expect( screen.queryByText( 'Working Offline' ) ).toBeNull();
+	} );
+
+	it( 'should not announce network status', () => {
+		render( <OfflineStatus /> );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).not.toHaveBeenCalled();
+	} );
+
+	it( 'should announce changes to network status', () => {
+		let subscriptionCallback;
+		subscribeConnectionStatus.mockImplementation( ( callback ) => {
+			subscriptionCallback = callback;
+			return { remove: jest.fn() };
+		} );
+		render( <OfflineStatus /> );
+
+		act( () => subscriptionCallback( { isConnected: false } ) );
+
+		expect(
+			AccessibilityInfo.announceForAccessibility
+		).toHaveBeenCalledWith( 'Network connection lost, working offline' );
+	} );
+} );
diff --git a/packages/editor/src/components/page-attributes/check.js b/packages/editor/src/components/page-attributes/check.js
index 584d70bd7b79c3..3c08a3d8e53514 100644
--- a/packages/editor/src/components/page-attributes/check.js
+++ b/packages/editor/src/components/page-attributes/check.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,18 +9,22 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if the post type supports page attributes.
+ *
+ * @param {Object}             props          - The component props.
+ * @param {React.ReactElement} props.children - The child components to render.
+ *
+ * @return {React.ReactElement} The rendered child components or null if page attributes are not supported.
+ */
 export function PageAttributesCheck( { children } ) {
-	const postType = useSelect( ( select ) => {
+	const supportsPageAttributes = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
 		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
-		return getPostType( getEditedPostAttribute( 'type' ) );
+		return !! postType?.supports?.[ 'page-attributes' ];
 	}, [] );
-	const supportsPageAttributes = get(
-		postType,
-		[ 'supports', 'page-attributes' ],
-		false
-	);
 
 	// Only render fields if post type supports page attributes or available templates exist.
 	if ( ! supportsPageAttributes ) {
diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js
index 8d7d0df8d64b67..04c6ce186a9701 100644
--- a/packages/editor/src/components/page-attributes/order.js
+++ b/packages/editor/src/components/page-attributes/order.js
@@ -2,9 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import {
+	Flex,
+	FlexBlock,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 
 /**
@@ -13,51 +16,55 @@ import { useState } from '@wordpress/element';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-export const PageAttributesOrder = ( { onUpdateOrder, order = 0 } ) => {
+function PageAttributesOrder() {
+	const order = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const [ orderInput, setOrderInput ] = useState( null );
 
 	const setUpdatedOrder = ( value ) => {
 		setOrderInput( value );
 		const newOrder = Number( value );
 		if ( Number.isInteger( newOrder ) && value.trim?.() !== '' ) {
-			onUpdateOrder( Number( value ) );
+			editPost( { menu_order: newOrder } );
 		}
 	};
-	const value = orderInput === null ? order : orderInput;
+
+	const value = orderInput ?? order;
+
 	return (
-		<TextControl
-			className="editor-page-attributes__order"
-			type="number"
-			label={ __( 'Order' ) }
-			value={ value }
-			onChange={ setUpdatedOrder }
-			size={ 6 }
-			onBlur={ () => {
-				setOrderInput( null );
-			} }
-		/>
+		<Flex>
+			<FlexBlock>
+				<NumberControl
+					__next40pxDefaultSize
+					label={ __( 'Order' ) }
+					help={ __( 'Set the page order.' ) }
+					value={ value }
+					onChange={ setUpdatedOrder }
+					hideLabelFromVision
+					onBlur={ () => {
+						setOrderInput( null );
+					} }
+				/>
+			</FlexBlock>
+		</Flex>
 	);
-};
+}
 
-function PageAttributesOrderWithChecks( props ) {
+/**
+ * Renders the Page Attributes Order component. A number input in an editor interface
+ * for setting the order of a given page.
+ * The component is now not used in core but was kept for backward compatibility.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PageAttributesOrderWithChecks() {
 	return (
 		<PostTypeSupportCheck supportKeys="page-attributes">
-			<PageAttributesOrder { ...props } />
+			<PageAttributesOrder />
 		</PostTypeSupportCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			order: select( editorStore ).getEditedPostAttribute( 'menu_order' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onUpdateOrder( order ) {
-			dispatch( editorStore ).editPost( {
-				menu_order: order,
-			} );
-		},
-	} ) ),
-] )( PageAttributesOrderWithChecks );
diff --git a/packages/editor/src/components/page-attributes/panel.js b/packages/editor/src/components/page-attributes/panel.js
new file mode 100644
index 00000000000000..8ecf7f1642f718
--- /dev/null
+++ b/packages/editor/src/components/page-attributes/panel.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PageAttributesCheck from './check';
+import { ParentRow } from './parent';
+
+const PANEL_NAME = 'page-attributes';
+
+function AttributesPanel() {
+	const { isEnabled, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, isEditorPanelEnabled } =
+			select( editorStore );
+		const { getPostType } = select( coreStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+		};
+	}, [] );
+
+	if ( ! isEnabled || ! postType ) {
+		return null;
+	}
+
+	return <ParentRow />;
+}
+
+/**
+ * Renders the Page Attributes Panel component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PageAttributesPanel() {
+	return (
+		<PageAttributesCheck>
+			<AttributesPanel />
+		</PageAttributesCheck>
+	);
+}
diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js
index 339ef64285931a..bd2861766c334a 100644
--- a/packages/editor/src/components/page-attributes/parent.js
+++ b/packages/editor/src/components/page-attributes/parent.js
@@ -1,23 +1,34 @@
 /**
  * External dependencies
  */
-import { get, unescape as unescapeString, find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { ComboboxControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	Dropdown,
+	ComboboxControl,
+	ExternalLink,
+} from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import PostPanelRow from '../post-panel-row';
 import { buildTermsTree } from '../../utils/terms';
 import { store as editorStore } from '../../store';
 
@@ -41,51 +52,56 @@ export const getItemPriority = ( name, searchValue ) => {
 	return Infinity;
 };
 
+/**
+ * Renders the Page Attributes Parent component. A dropdown menu in an editor interface
+ * for selecting the parent page of a given page.
+ *
+ * @return {React.ReactNode} The component to be rendered. Return null if post type is not hierarchical.
+ */
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );
 	const [ fieldValue, setFieldValue ] = useState( false );
-	const { parentPost, parentPostId, items, postType } = useSelect(
-		( select ) => {
-			const { getPostType, getEntityRecords, getEntityRecord } =
-				select( coreStore );
-			const { getCurrentPostId, getEditedPostAttribute } =
-				select( editorStore );
-			const postTypeSlug = getEditedPostAttribute( 'type' );
-			const pageId = getEditedPostAttribute( 'parent' );
-			const pType = getPostType( postTypeSlug );
-			const postId = getCurrentPostId();
-			const isHierarchical = get( pType, [ 'hierarchical' ], false );
-			const query = {
-				per_page: 100,
-				exclude: postId,
-				parent_exclude: postId,
-				orderby: 'menu_order',
-				order: 'asc',
-				_fields: 'id,title,parent',
-			};
-
-			// Perform a search when the field is changed.
-			if ( !! fieldValue ) {
-				query.search = fieldValue;
-			}
+	const { isHierarchical, parentPostId, parentPostTitle, pageItems } =
+		useSelect(
+			( select ) => {
+				const { getPostType, getEntityRecords, getEntityRecord } =
+					select( coreStore );
+				const { getCurrentPostId, getEditedPostAttribute } =
+					select( editorStore );
+				const postTypeSlug = getEditedPostAttribute( 'type' );
+				const pageId = getEditedPostAttribute( 'parent' );
+				const pType = getPostType( postTypeSlug );
+				const postId = getCurrentPostId();
+				const postIsHierarchical = pType?.hierarchical ?? false;
+				const query = {
+					per_page: 100,
+					exclude: postId,
+					parent_exclude: postId,
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: 'id,title,parent',
+				};
 
-			return {
-				parentPostId: pageId,
-				parentPost: pageId
+				// Perform a search when the field is changed.
+				if ( !! fieldValue ) {
+					query.search = fieldValue;
+				}
+
+				const parentPost = pageId
 					? getEntityRecord( 'postType', postTypeSlug, pageId )
-					: null,
-				items: isHierarchical
-					? getEntityRecords( 'postType', postTypeSlug, query )
-					: [],
-				postType: pType,
-			};
-		},
-		[ fieldValue ]
-	);
+					: null;
 
-	const isHierarchical = get( postType, [ 'hierarchical' ], false );
-	const parentPageLabel = get( postType, [ 'labels', 'parent_item_colon' ] );
-	const pageItems = items || [];
+				return {
+					isHierarchical: postIsHierarchical,
+					parentPostId: pageId,
+					parentPostTitle: parentPost ? getTitle( parentPost ) : '',
+					pageItems: postIsHierarchical
+						? getEntityRecords( 'postType', postTypeSlug, query )
+						: null,
+				};
+			},
+			[ fieldValue ]
+		);
 
 	const parentOptions = useMemo( () => {
 		const getOptionsFromTree = ( tree, level = 0 ) => {
@@ -93,7 +109,7 @@ export function PageAttributesParent() {
 				{
 					value: treeNode.id,
 					label:
-						'— '.repeat( level ) + unescapeString( treeNode.name ),
+						'— '.repeat( level ) + decodeEntities( treeNode.name ),
 					rawName: treeNode.name,
 				},
 				...getOptionsFromTree( treeNode.children || [], level + 1 ),
@@ -108,6 +124,10 @@ export function PageAttributesParent() {
 			return sortedNodes.flat();
 		};
 
+		if ( ! pageItems ) {
+			return [];
+		}
+
 		let tree = pageItems.map( ( item ) => ( {
 			id: item.id,
 			parent: item.parent,
@@ -122,20 +142,19 @@ 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 ) {
+		if ( parentPostTitle && ! optsHasParent ) {
 			opts.unshift( {
 				value: parentPostId,
-				label: getTitle( parentPost ),
+				label: parentPostTitle,
 			} );
 		}
 		return opts;
-	}, [ pageItems, fieldValue ] );
+	}, [ pageItems, fieldValue, parentPostTitle, parentPostId ] );
 
-	if ( ! isHierarchical || ! parentPageLabel ) {
+	if ( ! isHierarchical ) {
 		return null;
 	}
 	/**
@@ -158,14 +177,128 @@ export function PageAttributesParent() {
 
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			className="editor-page-attributes__parent"
-			label={ parentPageLabel }
+			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
 			value={ parentPostId }
 			options={ parentOptions }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleChange }
+			hideLabelFromVision
 		/>
 	);
 }
 
+function PostParentToggle( { isOpen, onClick } ) {
+	const parentPost = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const parentPostId = getEditedPostAttribute( 'parent' );
+		if ( ! parentPostId ) {
+			return null;
+		}
+		const { getEntityRecord } = select( coreStore );
+		const postTypeSlug = getEditedPostAttribute( 'type' );
+		return getEntityRecord( 'postType', postTypeSlug, parentPostId );
+	}, [] );
+	const parentTitle = useMemo(
+		() => ( ! parentPost ? __( 'None' ) : getTitle( parentPost ) ),
+		[ parentPost ]
+	);
+	return (
+		<Button
+			size="compact"
+			className="editor-post-parent__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={
+				// translators: %s: Current post parent.
+				sprintf( __( 'Change parent: %s' ), parentTitle )
+			}
+			onClick={ onClick }
+		>
+			{ parentTitle }
+		</Button>
+	);
+}
+
+export function ParentRow() {
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
+	}, [] );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostPanelRow label={ __( 'Parent' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="editor-post-parent__panel-dropdown"
+				contentClassName="editor-post-parent__panel-dialog"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostParentToggle isOpen={ isOpen } onClick={ onToggle } />
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="editor-post-parent">
+						<InspectorPopoverHeader
+							title={ __( 'Parent' ) }
+							onClose={ onClose }
+						/>
+						<div>
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %s: The home URL of the WordPress installation without the scheme. */
+									__(
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %s<wbr />/services<wbr />/pricing.'
+									),
+									filterURLForDisplay( homeUrl ).replace(
+										/([/.])/g,
+										'<wbr />$1'
+									)
+								),
+								{
+									wbr: <wbr />,
+								}
+							) }
+							<p>
+								{ createInterpolateElement(
+									__(
+										'They also show up as sub-items in the default navigation menu. <a>Learn more.</a>'
+									),
+									{
+										a: (
+											<ExternalLink
+												href={ __(
+													'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+												) }
+											/>
+										),
+									}
+								) }
+							</p>
+						</div>
+						<PageAttributesParent />
+					</div>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
+
 export default PageAttributesParent;
diff --git a/packages/editor/src/components/page-attributes/style.scss b/packages/editor/src/components/page-attributes/style.scss
index a815db2d832278..6563462a65bc23 100644
--- a/packages/editor/src/components/page-attributes/style.scss
+++ b/packages/editor/src/components/page-attributes/style.scss
@@ -1,12 +1,19 @@
-.editor-page-attributes__order {
-	width: 100%;
-	.components-base-control__field {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+.editor-post-parent__panel,
+.editor-post-order__panel {
+	padding-top: $grid-unit-10;
+	.editor-post-panel__row-control > div {
+		width: 100%;
+	}
+}
+
+.editor-post-parent__panel-dialog,
+.editor-post-order__panel-dialog {
+	.editor-post-parent,
+	.editor-post-order {
+		margin: $grid-unit-10;
 	}
 
-	input {
-		width: 66px;
+	.components-popover__content {
+		min-width: 320px;
 	}
 }
diff --git a/packages/editor/src/components/page-attributes/test/order.js b/packages/editor/src/components/page-attributes/test/order.js
index e4cdcc59f722a3..fcb836bbfef0d3 100644
--- a/packages/editor/src/components/page-attributes/test/order.js
+++ b/packages/editor/src/components/page-attributes/test/order.js
@@ -4,10 +4,47 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PageAttributesOrder } from '../order';
+import PageAttributesOrder from '../order';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+function setupDataMock( order = 0 ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getPostType: () => ( {
+				supports: {
+					'page-attributes': true,
+				},
+			} ),
+			getEditedPostAttribute: ( attr ) => {
+				switch ( attr ) {
+					case 'menu_order':
+						return order;
+					default:
+						return null;
+				}
+			},
+		} ) )
+	);
+
+	const editPost = jest.fn();
+	useDispatch.mockImplementation( () => ( {
+		editPost,
+	} ) );
+
+	return editPost;
+}
 
 describe( 'PageAttributesOrder', () => {
 	/**
@@ -20,13 +57,11 @@ describe( 'PageAttributesOrder', () => {
 	};
 
 	it( 'should reject invalid input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
 		await user.type( input, 'bad', typeOptions );
@@ -35,35 +70,29 @@ describe( 'PageAttributesOrder', () => {
 		await user.type( input, '+', typeOptions );
 		await user.type( input, ' ', typeOptions );
 
-		expect( onUpdateOrder ).not.toHaveBeenCalled();
+		expect( editPost ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should update with zero input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock( 4 );
 
-		render(
-			<PageAttributesOrder order={ 4 } onUpdateOrder={ onUpdateOrder } />
-		);
+		render( <PageAttributesOrder /> );
 
 		const input = screen.getByRole( 'spinbutton', { name: 'Order' } );
 
 		await user.type( input, '0', typeOptions );
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( 0 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: 0 } );
 	} );
 
 	it( 'should update with valid positive input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		await user.type(
 			screen.getByRole( 'spinbutton', { name: 'Order' } ),
@@ -71,17 +100,15 @@ describe( 'PageAttributesOrder', () => {
 			typeOptions
 		);
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( 4 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: 4 } );
 	} );
 
 	it( 'should update with valid negative input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
-		const onUpdateOrder = jest.fn();
+		const editPost = setupDataMock();
 
-		render( <PageAttributesOrder onUpdateOrder={ onUpdateOrder } /> );
+		render( <PageAttributesOrder /> );
 
 		await user.type(
 			screen.getByRole( 'spinbutton', { name: 'Order' } ),
@@ -89,6 +116,6 @@ describe( 'PageAttributesOrder', () => {
 			typeOptions
 		);
 
-		expect( onUpdateOrder ).toHaveBeenCalledWith( -1 );
+		expect( editPost ).toHaveBeenCalledWith( { menu_order: -1 } );
 	} );
 } );
diff --git a/packages/editor/src/components/pattern-duplicate-modal/index.js b/packages/editor/src/components/pattern-duplicate-modal/index.js
new file mode 100644
index 00000000000000..2e5593536d1834
--- /dev/null
+++ b/packages/editor/src/components/pattern-duplicate-modal/index.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { DuplicatePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-duplicate';
+
+export default function PatternDuplicateModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return (
+		<DuplicatePatternModal
+			onClose={ closeModal }
+			onSuccess={ () => closeModal() }
+			pattern={ record }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/pattern-overrides-panel/index.js b/packages/editor/src/components/pattern-overrides-panel/index.js
new file mode 100644
index 00000000000000..47cd6282b3fedd
--- /dev/null
+++ b/packages/editor/src/components/pattern-overrides-panel/index.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { OverridesPanel } = unlock( patternsPrivateApis );
+
+export default function PatternOverridesPanel() {
+	const supportsPatternOverridesPanel = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType() === 'wp_block',
+		[]
+	);
+
+	if ( ! supportsPatternOverridesPanel ) {
+		return null;
+	}
+
+	return <OverridesPanel />;
+}
diff --git a/packages/editor/src/components/pattern-rename-modal/index.js b/packages/editor/src/components/pattern-rename-modal/index.js
new file mode 100644
index 00000000000000..ea9a46e977b240
--- /dev/null
+++ b/packages/editor/src/components/pattern-rename-modal/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import { PATTERN_POST_TYPE } from '../../store/constants';
+
+const { RenamePatternModal } = unlock( patternsPrivateApis );
+export const modalName = 'editor/pattern-rename';
+
+export default function PatternRenameModal() {
+	const { record, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _postType = getCurrentPostType();
+		return {
+			record: getEditedEntityRecord(
+				'postType',
+				_postType,
+				getCurrentPostId()
+			),
+			postType: _postType,
+		};
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	const isActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( modalName )
+	);
+
+	if ( ! isActive || postType !== PATTERN_POST_TYPE ) {
+		return null;
+	}
+
+	return <RenamePatternModal onClose={ closeModal } pattern={ record } />;
+}
diff --git a/packages/editor/src/components/plugin-document-setting-panel/index.js b/packages/editor/src/components/plugin-document-setting-panel/index.js
new file mode 100644
index 00000000000000..6408d82fe7e118
--- /dev/null
+++ b/packages/editor/src/components/plugin-document-setting-panel/index.js
@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+import { useDispatch, useSelect } from '@wordpress/data';
+import warning from '@wordpress/warning';
+
+/**
+ * Internal dependencies
+ */
+import EnablePluginDocumentSettingPanelOption from '../preferences-modal/enable-plugin-document-setting-panel';
+import { store as editorStore } from '../../store';
+
+const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+
+/**
+ * Renders items below the Status & Availability panel in the Document Sidebar.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                props.name                            Required. A machine-friendly name for the panel.
+ * @param {string}                [props.className]                     An optional class name added to the row.
+ * @param {string}                [props.title]                         The title of the panel
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {React.ReactNode}       props.children                        Children to be rendered
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var el = React.createElement;
+ * var __ = wp.i18n.__;
+ * var registerPlugin = wp.plugins.registerPlugin;
+ * var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
+ *
+ * function MyDocumentSettingPlugin() {
+ * 	return el(
+ * 		PluginDocumentSettingPanel,
+ * 		{
+ * 			className: 'my-document-setting-plugin',
+ * 			title: 'My Panel',
+ * 			name: 'my-panel',
+ * 		},
+ * 		__( 'My Document Setting Panel' )
+ * 	);
+ * }
+ *
+ * registerPlugin( 'my-document-setting-plugin', {
+ * 		render: MyDocumentSettingPlugin
+ * } );
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { registerPlugin } from '@wordpress/plugins';
+ * import { PluginDocumentSettingPanel } from '@wordpress/editor';
+ *
+ * const MyDocumentSettingTest = () => (
+ * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel">
+ *			<p>My Document Setting Panel</p>
+ *		</PluginDocumentSettingPanel>
+ *	);
+ *
+ *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
+ * ```
+ *
+ * @return {React.ReactNode} The component to be rendered.
+ */
+const PluginDocumentSettingPanel = ( {
+	name,
+	className,
+	title,
+	icon,
+	children,
+} ) => {
+	const { name: pluginName } = usePluginContext();
+	const panelName = `${ pluginName }/${ name }`;
+	const { opened, isEnabled } = useSelect(
+		( select ) => {
+			const { isEditorPanelOpened, isEditorPanelEnabled } =
+				select( editorStore );
+
+			return {
+				opened: isEditorPanelOpened( panelName ),
+				isEnabled: isEditorPanelEnabled( panelName ),
+			};
+		},
+		[ panelName ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( undefined === name ) {
+		warning( 'PluginDocumentSettingPanel requires a name property.' );
+	}
+
+	return (
+		<>
+			<EnablePluginDocumentSettingPanelOption
+				label={ title }
+				panelName={ panelName }
+			/>
+			<Fill>
+				{ isEnabled && (
+					<PanelBody
+						className={ className }
+						title={ title }
+						icon={ icon }
+						opened={ opened }
+						onToggle={ () => toggleEditorPanelOpened( panelName ) }
+					>
+						{ children }
+					</PanelBody>
+				) }
+			</Fill>
+		</>
+	);
+};
+
+PluginDocumentSettingPanel.Slot = Slot;
+
+export default PluginDocumentSettingPanel;
diff --git a/packages/editor/src/components/plugin-more-menu-item/index.js b/packages/editor/src/components/plugin-more-menu-item/index.js
new file mode 100644
index 00000000000000..1d8e124b03e604
--- /dev/null
+++ b/packages/editor/src/components/plugin-more-menu-item/index.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+import { ActionItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
+ * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+ * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying [Button](/packages/components/src/button/README.md) component.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
+ * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * function MyButtonMoreMenuItem() {
+ * 	return wp.element.createElement(
+ * 		PluginMoreMenuItem,
+ * 		{
+ * 			icon: moreIcon,
+ * 			onClick: onButtonClick,
+ * 		},
+ * 		__( 'My button title' )
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginMoreMenuItem } from '@wordpress/editor';
+ * import { more } from '@wordpress/icons';
+ *
+ * function onButtonClick() {
+ * 	alert( 'Button clicked.' );
+ * }
+ *
+ * const MyButtonMoreMenuItem = () => (
+ * 	<PluginMoreMenuItem
+ * 		icon={ more }
+ * 		onClick={ onButtonClick }
+ * 	>
+ * 		{ __( 'My button title' ) }
+ * 	</PluginMoreMenuItem>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PluginMoreMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-more-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/plugin-post-publish-panel/index.js b/packages/editor/src/components/plugin-post-publish-panel/index.js
new file mode 100644
index 00000000000000..b93f0a15c237f5
--- /dev/null
+++ b/packages/editor/src/components/plugin-post-publish-panel/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { usePluginContext } from '@wordpress/plugins';
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+
+/**
+ * Renders provided content to the post-publish panel in the publish flow
+ * (side panel that opens after a user publishes the post).
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {string}                [props.className]                     An optional class name added to the panel.
+ * @param {string}                [props.title]                         Title displayed at the top of the panel.
+ * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ * @param {React.ReactNode}       props.children                        Children to be rendered
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostPublishPanel } from '@wordpress/editor';
+ *
+ * const MyPluginPostPublishPanel = () => (
+ * 	<PluginPostPublishPanel
+ * 		className="my-plugin-post-publish-panel"
+ * 		title={ __( 'My panel title' ) }
+ * 		initialOpen={ true }
+ * 	>
+ *         { __( 'My panel content' ) }
+ * 	</PluginPostPublishPanel>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+const PluginPostPublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+PluginPostPublishPanel.Slot = Slot;
+
+export default PluginPostPublishPanel;
diff --git a/packages/editor/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..b144d525374c96
--- /dev/null
+++ b/packages/editor/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPostPublishPanel renders fill properly 1`] = `
+<div>
+  <div
+    class="components-panel__body my-plugin-post-publish-panel is-opened"
+  >
+    <h2
+      class="components-panel__body-title"
+    >
+      <button
+        aria-expanded="true"
+        class="components-button components-panel__body-toggle is-next-40px-default-size"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+        >
+          <svg
+            aria-hidden="true"
+            class="components-panel__arrow"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"
+            />
+          </svg>
+        </span>
+        My panel title
+      </button>
+    </h2>
+    My panel content
+  </div>
+</div>
+`;
diff --git a/packages/editor/src/components/plugin-post-publish-panel/test/index.js b/packages/editor/src/components/plugin-post-publish-panel/test/index.js
new file mode 100644
index 00000000000000..ca3d6a17181dbc
--- /dev/null
+++ b/packages/editor/src/components/plugin-post-publish-panel/test/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostPublishPanel from '../';
+
+describe( 'PluginPostPublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const { container } = render(
+			<SlotFillProvider>
+				<PluginPostPublishPanel
+					className="my-plugin-post-publish-panel"
+					title="My panel title"
+					initialOpen
+				>
+					My panel content
+				</PluginPostPublishPanel>
+				<PluginPostPublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
diff --git a/packages/editor/src/components/plugin-post-status-info/index.js b/packages/editor/src/components/plugin-post-status-info/index.js
new file mode 100644
index 00000000000000..f9f3293047ddd3
--- /dev/null
+++ b/packages/editor/src/components/plugin-post-status-info/index.js
@@ -0,0 +1,63 @@
+/**
+ * Defines as extensibility slot for the Summary panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
+
+/**
+ * Renders a row in the Summary panel of the Document sidebar.
+ * It should be noted that this is named and implemented around the function it serves
+ * and not its location, which may change in future iterations.
+ *
+ * @param {Object}          props             Component properties.
+ * @param {string}          [props.className] An optional class name added to the row.
+ * @param {React.ReactNode} props.children    Children to be rendered.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;
+ *
+ * function MyPluginPostStatusInfo() {
+ * 	return React.createElement(
+ * 		PluginPostStatusInfo,
+ * 		{
+ * 			className: 'my-plugin-post-status-info',
+ * 		},
+ * 		__( 'My post status info' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPostStatusInfo } from '@wordpress/editor';
+ *
+ * const MyPluginPostStatusInfo = () => (
+ * 	<PluginPostStatusInfo
+ * 		className="my-plugin-post-status-info"
+ * 	>
+ * 		{ __( 'My post status info' ) }
+ * 	</PluginPostStatusInfo>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+const PluginPostStatusInfo = ( { children, className } ) => (
+	<Fill>
+		<PanelRow className={ className }>{ children }</PanelRow>
+	</Fill>
+);
+
+PluginPostStatusInfo.Slot = Slot;
+
+export default PluginPostStatusInfo;
diff --git a/packages/editor/src/components/plugin-pre-publish-panel/index.js b/packages/editor/src/components/plugin-pre-publish-panel/index.js
new file mode 100644
index 00000000000000..412af36c5176e0
--- /dev/null
+++ b/packages/editor/src/components/plugin-pre-publish-panel/index.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+
+const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+
+/**
+ * Renders provided content to the pre-publish side panel in the publish flow
+ * (side panel that opens when a user first pushes "Publish" from the main editor).
+ *
+ * @param {Object}                props                                 Component props.
+ * @param {string}                [props.className]                     An optional class name added to the panel.
+ * @param {string}                [props.title]                         Title displayed at the top of the panel.
+ * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened.
+ *                                                                      When no title is provided it is always opened.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/)
+ *                                                                      icon slug string, or an SVG WP element, to be rendered when
+ *                                                                      the sidebar is pinned to toolbar.
+ * @param {React.ReactNode}       props.children                        Children to be rendered
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPrePublishPanel } from '@wordpress/editor';
+ *
+ * const MyPluginPrePublishPanel = () => (
+ * 	<PluginPrePublishPanel
+ * 		className="my-plugin-pre-publish-panel"
+ * 		title={ __( 'My panel title' ) }
+ * 		initialOpen={ true }
+ * 	>
+ * 	    { __( 'My panel content' ) }
+ * 	</PluginPrePublishPanel>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+const PluginPrePublishPanel = ( {
+	children,
+	className,
+	title,
+	initialOpen = false,
+	icon,
+} ) => {
+	const { icon: pluginIcon } = usePluginContext();
+
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				initialOpen={ initialOpen || ! title }
+				title={ title }
+				icon={ icon ?? pluginIcon }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+PluginPrePublishPanel.Slot = Slot;
+
+export default PluginPrePublishPanel;
diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js b/packages/editor/src/components/plugin-pre-publish-panel/test/index.js
similarity index 100%
rename from packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/index.js
rename to packages/editor/src/components/plugin-pre-publish-panel/test/index.js
diff --git a/packages/editor/src/components/plugin-preview-menu-item/index.js b/packages/editor/src/components/plugin-preview-menu-item/index.js
new file mode 100644
index 00000000000000..949f02808a7b03
--- /dev/null
+++ b/packages/editor/src/components/plugin-preview-menu-item/index.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { usePluginContext } from '@wordpress/plugins';
+import { ActionItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in the Preview dropdown, which can be used as a button or link depending on the props provided.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component properties.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
+ * @param {string}                [props.href]                          When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element.
+ * @param {Function}              [props.onClick]                       The callback function to be executed when the user clicks the menu item.
+ * @param {...*}                  [props.other]                         Any additional props are passed through to the underlying MenuItem component.
+ *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginPreviewMenuItem } from '@wordpress/editor';
+ * import { external } from '@wordpress/icons';
+ *
+ * function onPreviewClick() {
+ *   // Handle preview action
+ * }
+ *
+ * const ExternalPreviewMenuItem = () => (
+ *   <PluginPreviewMenuItem
+ *     icon={ external }
+ *     onClick={ onPreviewClick }
+ *   >
+ *     { __( 'Preview in new tab' ) }
+ *   </PluginPreviewMenuItem>
+ * );
+ * registerPlugin( 'external-preview-menu-item', {
+ *     render: ExternalPreviewMenuItem,
+ * } );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered menu item component.
+ */
+export default function PluginPreviewMenuItem( props ) {
+	const context = usePluginContext();
+	return (
+		<ActionItem
+			name="core/plugin-preview-menu"
+			as={ props.as ?? MenuItem }
+			icon={ props.icon || context.icon }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js
new file mode 100644
index 00000000000000..379a0720dc8a91
--- /dev/null
+++ b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
+
+/**
+ * Renders a menu item in `Plugins` group in `More Menu` drop down,
+ * and can be used to activate the corresponding `PluginSidebar` component.
+ * The text within the component appears as the menu item label.
+ *
+ * @param {Object}                props                                 Component props.
+ * @param {string}                props.target                          A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
+ *
+ * function MySidebarMoreMenuItem() {
+ * 	return React.createElement(
+ * 		PluginSidebarMoreMenuItem,
+ * 		{
+ * 			target: 'my-sidebar',
+ * 			icon: moreIcon,
+ * 		},
+ * 		__( 'My sidebar title' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginSidebarMoreMenuItem } from '@wordpress/editor';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MySidebarMoreMenuItem = () => (
+ * 	<PluginSidebarMoreMenuItem
+ * 		target="my-sidebar"
+ * 		icon={ more }
+ * 	>
+ * 		{ __( 'My sidebar title' ) }
+ * 	</PluginSidebarMoreMenuItem>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PluginSidebarMoreMenuItem( props ) {
+	return (
+		<ComplementaryAreaMoreMenuItem
+			// Menu item is marked with unstable prop for backward compatibility.
+			// @see https://github.com/WordPress/gutenberg/issues/14457
+			__unstableExplicitMenuItem
+			scope="core"
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
new file mode 100644
index 00000000000000..dfcc01b5e60283
--- /dev/null
+++ b/packages/editor/src/components/plugin-sidebar/index.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { ComplementaryArea } from '@wordpress/interface';
+
+/**
+ * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
+ * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
+ * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
+ *
+ * ```js
+ * wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
+ * ```
+ *
+ * @see PluginSidebarMoreMenuItem
+ *
+ * @param {Object}                props                                 Element props.
+ * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
+ * @param {string}                [props.className]                     An optional class name added to the sidebar body.
+ * @param {string}                props.title                           Title displayed at the top of the sidebar.
+ * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
+ * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var el = React.createElement;
+ * var PanelBody = wp.components.PanelBody;
+ * var PluginSidebar = wp.editor.PluginSidebar;
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
+ *
+ * function MyPluginSidebar() {
+ * 	return el(
+ * 			PluginSidebar,
+ * 			{
+ * 				name: 'my-sidebar',
+ * 				title: 'My sidebar title',
+ * 				icon: moreIcon,
+ * 			},
+ * 			el(
+ * 				PanelBody,
+ * 				{},
+ * 				__( 'My sidebar content' )
+ * 			)
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PanelBody } from '@wordpress/components';
+ * import { PluginSidebar } from '@wordpress/editor';
+ * import { more } from '@wordpress/icons';
+ *
+ * const MyPluginSidebar = () => (
+ * 	<PluginSidebar
+ * 		name="my-sidebar"
+ * 		title="My sidebar title"
+ * 		icon={ more }
+ * 	>
+ * 		<PanelBody>
+ * 			{ __( 'My sidebar content' ) }
+ * 		</PanelBody>
+ * 	</PluginSidebar>
+ * );
+ * ```
+ */
+export default function PluginSidebar( { className, ...props } ) {
+	return (
+		<ComplementaryArea
+			panelClassName={ className }
+			className="editor-sidebar"
+			scope="core"
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
new file mode 100644
index 00000000000000..808134ea969a11
--- /dev/null
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useSetAsHomepageAction } from './set-as-homepage';
+
+export function usePostActions( { postType, onActionPerformed, context } ) {
+	const { defaultActions } = useSelect(
+		( select ) => {
+			const { getEntityActions } = unlock( select( editorStore ) );
+			return {
+				defaultActions: getEntityActions( 'postType', postType ),
+			};
+		},
+		[ postType ]
+	);
+
+	const { canManageOptions, hasFrontPageTemplate } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const templates = getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+			} );
+
+			return {
+				canManageOptions: select( coreStore ).canUser( 'update', {
+					kind: 'root',
+					name: 'site',
+				} ),
+				hasFrontPageTemplate: !! templates?.find(
+					( template ) => template?.slug === 'front-page'
+				),
+			};
+		}
+	);
+
+	const setAsHomepageAction = useSetAsHomepageAction();
+	const shouldShowSetAsHomepageAction =
+		canManageOptions && ! hasFrontPageTemplate;
+
+	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeSchema( postType );
+	}, [ registerPostTypeSchema, postType ] );
+
+	return useMemo( () => {
+		let actions = [ ...defaultActions ];
+		if ( shouldShowSetAsHomepageAction ) {
+			actions.push( setAsHomepageAction );
+		}
+
+		// Filter actions based on provided context. If not provided
+		// all actions are returned. We'll have a single entry for getting the actions
+		// and the consumer should provide the context to filter the actions, if needed.
+		// Actions should also provide the `context` they support, if it's specific, to
+		// compare with the provided context to get all the actions.
+		// Right now the only supported context is `list`.
+		actions = actions.filter( ( action ) => {
+			if ( ! action.context ) {
+				return true;
+			}
+			return action.context === context;
+		} );
+
+		if ( onActionPerformed ) {
+			for ( let i = 0; i < actions.length; ++i ) {
+				if ( actions[ i ].callback ) {
+					const existingCallback = actions[ i ].callback;
+					actions[ i ] = {
+						...actions[ i ],
+						callback: ( items, argsObject ) => {
+							existingCallback( items, {
+								...argsObject,
+								onActionPerformed: ( _items ) => {
+									if ( argsObject?.onActionPerformed ) {
+										argsObject.onActionPerformed( _items );
+									}
+									onActionPerformed(
+										actions[ i ].id,
+										_items
+									);
+								},
+							} );
+						},
+					};
+				}
+				if ( actions[ i ].RenderModal ) {
+					const ExistingRenderModal = actions[ i ].RenderModal;
+					actions[ i ] = {
+						...actions[ i ],
+						RenderModal: ( props ) => {
+							return (
+								<ExistingRenderModal
+									{ ...props }
+									onActionPerformed={ ( _items ) => {
+										if ( props.onActionPerformed ) {
+											props.onActionPerformed( _items );
+										}
+										onActionPerformed(
+											actions[ i ].id,
+											_items
+										);
+									} }
+								/>
+							);
+						},
+					};
+				}
+			}
+		}
+
+		return actions;
+	}, [
+		context,
+		defaultActions,
+		onActionPerformed,
+		setAsHomepageAction,
+		shouldShowSetAsHomepageAction,
+	] );
+}
diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
new file mode 100644
index 00000000000000..ab11b5e318b5a6
--- /dev/null
+++ b/packages/editor/src/components/post-actions/index.js
@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { usePostActions } from './actions';
+
+const { Menu, kebabCase } = unlock( componentsPrivateApis );
+
+export default function PostActions( { postType, postId, onActionPerformed } ) {
+	const [ isActionsMenuOpen, setIsActionsMenuOpen ] = useState( false );
+	const { item, permissions } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, getEntityRecordPermissions } =
+				unlock( select( coreStore ) );
+			return {
+				item: getEditedEntityRecord( 'postType', postType, postId ),
+				permissions: getEntityRecordPermissions(
+					'postType',
+					postType,
+					postId
+				),
+			};
+		},
+		[ postId, postType ]
+	);
+	const itemWithPermissions = useMemo( () => {
+		return {
+			...item,
+			permissions,
+		};
+	}, [ item, permissions ] );
+	const allActions = usePostActions( { postType, onActionPerformed } );
+
+	const actions = useMemo( () => {
+		return allActions.filter( ( action ) => {
+			return (
+				! action.isEligible || action.isEligible( itemWithPermissions )
+			);
+		} );
+	}, [ allActions, itemWithPermissions ] );
+
+	return (
+		<Menu
+			open={ isActionsMenuOpen }
+			trigger={
+				<Button
+					size="small"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+					disabled={ ! actions.length }
+					accessibleWhenDisabled
+					className="editor-all-actions-button"
+					onClick={ () =>
+						setIsActionsMenuOpen( ! isActionsMenuOpen )
+					}
+				/>
+			}
+			onOpenChange={ setIsActionsMenuOpen }
+			placement="bottom-end"
+		>
+			<ActionsDropdownMenuGroup
+				actions={ actions }
+				item={ itemWithPermissions }
+				onClose={ () => {
+					setIsActionsMenuOpen( false );
+				} }
+			/>
+		</Menu>
+	);
+}
+
+// From now on all the functions on this file are copied as from the dataviews packages,
+// The editor packages should not be using the dataviews packages directly,
+// and the dataviews package should not be using the editor packages directly,
+// so duplicating the code here seems like the least bad option.
+
+// Copied as is from packages/dataviews/src/item-actions.js
+function DropdownMenuItemTrigger( { action, onClick, items } ) {
+	const label =
+		typeof action.label === 'string' ? action.label : action.label( items );
+	return (
+		<Menu.Item onClick={ onClick } hideOnClick={ ! action.RenderModal }>
+			<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+		</Menu.Item>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+// With an added onClose prop.
+function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const actionTriggerProps = {
+		action,
+		onClick: () => setIsModalOpen( true ),
+		items: [ item ],
+	};
+	const { RenderModal, hideModalHeader } = action;
+	return (
+		<>
+			<ActionTrigger { ...actionTriggerProps } />
+			{ isModalOpen && (
+				<Modal
+					title={ action.modalHeader || action.label }
+					__experimentalHideHeader={ !! hideModalHeader }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
+						action.id
+					) }` }
+					focusOnMount="firstContentElement"
+					size="medium"
+				>
+					<RenderModal
+						items={ [ item ] }
+						closeModal={ () => {
+							setIsModalOpen( false );
+							onClose();
+						} }
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+// Copied as is from packages/dataviews/src/item-actions.js
+// With an added onClose prop.
+function ActionsDropdownMenuGroup( { actions, item, onClose } ) {
+	return (
+		<Menu.Group>
+			{ actions.map( ( action ) => {
+				if ( action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+							onClose={ onClose }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( [ item ] ) }
+						items={ [ item ] }
+					/>
+				);
+			} ) }
+		</Menu.Group>
+	);
+}
diff --git a/packages/editor/src/components/post-actions/set-as-homepage.js b/packages/editor/src/components/post-actions/set-as-homepage.js
new file mode 100644
index 00000000000000..70bdeeeefe70fb
--- /dev/null
+++ b/packages/editor/src/components/post-actions/set-as-homepage.js
@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
+
+const getItemTitle = ( item ) => {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( item.title && 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( item.title && 'raw' in item.title ) {
+		return decodeEntities( item.title.raw );
+	}
+	return '';
+};
+
+const SetAsHomepageModal = ( { items, closeModal } ) => {
+	const [ item ] = items;
+	const pageTitle = getItemTitle( item );
+	const { showOnFront, currentHomePage, isSaving } = useSelect(
+		( select ) => {
+			const { getEntityRecord, isSavingEntityRecord } =
+				select( coreStore );
+			const siteSettings = getEntityRecord( 'root', 'site' );
+			const currentHomePageItem = getEntityRecord(
+				'postType',
+				'page',
+				siteSettings?.page_on_front
+			);
+			return {
+				showOnFront: siteSettings?.show_on_front,
+				currentHomePage: currentHomePageItem,
+				isSaving: isSavingEntityRecord( 'root', 'site' ),
+			};
+		}
+	);
+	const currentHomePageTitle = currentHomePage
+		? getItemTitle( currentHomePage )
+		: '';
+
+	const { saveEditedEntityRecord, saveEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onSetPageAsHomepage( event ) {
+		event.preventDefault();
+
+		try {
+			// Save new home page settings.
+			await saveEditedEntityRecord( 'root', 'site', undefined, {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			// This second call to a save function is a workaround for a bug in
+			// `saveEditedEntityRecord`. This forces the root site settings to be updated.
+			// See https://github.com/WordPress/gutenberg/issues/67161.
+			await saveEntityRecord( 'root', 'site', {
+				page_on_front: item.id,
+				show_on_front: 'page',
+			} );
+
+			createSuccessNotice( __( 'Homepage updated' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const typedError = error;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while setting the homepage' );
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			closeModal?.();
+		}
+	}
+
+	const modalWarning =
+		'posts' === showOnFront
+			? __(
+					'This will replace the current homepage which is set to display latest posts.'
+			  )
+			: sprintf(
+					// translators: %s: title of the current home page.
+					__( 'This will replace the current homepage: "%s"' ),
+					currentHomePageTitle
+			  );
+
+	const modalText = sprintf(
+		// translators: %1$s: title of the page to be set as the homepage, %2$s: homepage replacement warning message.
+		__( 'Set "%1$s" as the site homepage? %2$s' ),
+		pageTitle,
+		modalWarning
+	);
+
+	// translators: Button label to confirm setting the specified page as the homepage.
+	const modalButtonLabel = __( 'Set homepage' );
+
+	return (
+		<form onSubmit={ onSetPageAsHomepage }>
+			<VStack spacing="5">
+				<Text>{ modalText }</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						disabled={ isSaving }
+						accessibleWhenDisabled
+					>
+						{ modalButtonLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+};
+
+export const useSetAsHomepageAction = () => {
+	const { pageOnFront, pageForPosts } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord( 'root', 'site' );
+		return {
+			pageOnFront: siteSettings?.page_on_front,
+			pageForPosts: siteSettings?.page_for_posts,
+		};
+	} );
+
+	return useMemo(
+		() => ( {
+			id: 'set-as-homepage',
+			label: __( 'Set as homepage' ),
+			isEligible( post ) {
+				if ( post.status !== 'publish' ) {
+					return false;
+				}
+
+				if ( post.type !== 'page' ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the homepage.
+				if ( pageOnFront === post.id ) {
+					return false;
+				}
+
+				// Don't show the action if the page is already set as the page for posts.
+				if ( pageForPosts === post.id ) {
+					return false;
+				}
+
+				return true;
+			},
+			RenderModal: SetAsHomepageModal,
+		} ),
+		[ pageForPosts, pageOnFront ]
+	);
+};
diff --git a/packages/editor/src/components/post-actions/style.scss b/packages/editor/src/components/post-actions/style.scss
new file mode 100644
index 00000000000000..2e33975685a8bb
--- /dev/null
+++ b/packages/editor/src/components/post-actions/style.scss
@@ -0,0 +1,3 @@
+.editor-action-modal {
+	z-index: z-index(".editor-action-modal");
+}
diff --git a/packages/editor/src/components/post-author/check.js b/packages/editor/src/components/post-author/check.js
index 13a270bd0e3e6f..0ae7a3963e243f 100644
--- a/packages/editor/src/components/post-author/check.js
+++ b/packages/editor/src/components/post-author/check.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,16 +11,22 @@ import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import { AUTHORS_QUERY } from './constants';
 
+/**
+ * Wrapper component that renders its children only if the post type supports the author.
+ *
+ * @param {Object}          props          The component props.
+ * @param {React.ReactNode} props.children Children to be rendered.
+ *
+ * @return {React.ReactNode} The component to be rendered. Return `null` if the post type doesn't
+ * supports the author or if there are no authors available.
+ */
 export default function PostAuthorCheck( { children } ) {
 	const { hasAssignAuthorAction, hasAuthors } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();
 		const authors = select( coreStore ).getUsers( AUTHORS_QUERY );
 		return {
-			hasAssignAuthorAction: get(
-				post,
-				[ '_links', 'wp:action-assign-author' ],
-				false
-			),
+			hasAssignAuthorAction:
+				post._links?.[ 'wp:action-assign-author' ] ?? false,
 			hasAuthors: authors?.length >= 1,
 		};
 	}, [] );
diff --git a/packages/editor/src/components/post-author/combobox.js b/packages/editor/src/components/post-author/combobox.js
index c0ffdbbb26a0dc..867eca7947976a 100644
--- a/packages/editor/src/components/post-author/combobox.js
+++ b/packages/editor/src/components/post-author/combobox.js
@@ -2,71 +2,22 @@
  * WordPress dependencies
  */
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
+import { useAuthorsQuery } from './hook';
 
-function PostAuthorCombobox() {
+export default function PostAuthorCombobox() {
 	const [ fieldValue, setFieldValue ] = useState();
 
-	const { authorId, isLoading, authors, postAuthor } = useSelect(
-		( select ) => {
-			const { getUser, getUsers, isResolving } = select( coreStore );
-			const { getEditedPostAttribute } = select( editorStore );
-			const author = getUser( getEditedPostAttribute( 'author' ), {
-				context: 'view',
-			} );
-			const query = { ...AUTHORS_QUERY };
-
-			if ( fieldValue ) {
-				query.search = fieldValue;
-			}
-
-			return {
-				authorId: getEditedPostAttribute( 'author' ),
-				postAuthor: author,
-				authors: getUsers( query ),
-				isLoading: isResolving( 'core', 'getUsers', [ query ] ),
-			};
-		},
-		[ fieldValue ]
-	);
 	const { editPost } = useDispatch( editorStore );
-
-	const authorOptions = useMemo( () => {
-		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-
-		// Ensure the current author is included in the dropdown list.
-		const foundAuthor = fetchedAuthors.findIndex(
-			( { value } ) => postAuthor?.id === value
-		);
-
-		if ( foundAuthor < 0 && postAuthor ) {
-			return [
-				{
-					value: postAuthor.id,
-					label: decodeEntities( postAuthor.name ),
-				},
-				...fetchedAuthors,
-			];
-		}
-
-		return fetchedAuthors;
-	}, [ authors, postAuthor ] );
+	const { authorId, authorOptions } = useAuthorsQuery( fieldValue );
 
 	/**
 	 * Handle author selection.
@@ -89,21 +40,17 @@ function PostAuthorCombobox() {
 		setFieldValue( inputValue );
 	};
 
-	if ( ! postAuthor ) {
-		return null;
-	}
-
 	return (
 		<ComboboxControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ authorId }
 			onFilterValueChange={ debounce( handleKeydown, 300 ) }
 			onChange={ handleSelect }
-			isLoading={ isLoading }
 			allowReset={ false }
+			hideLabelFromVision
 		/>
 	);
 }
-
-export default PostAuthorCombobox;
diff --git a/packages/editor/src/components/post-author/constants.js b/packages/editor/src/components/post-author/constants.js
index d29995e27f4e5a..517cbd9ea1dc8d 100644
--- a/packages/editor/src/components/post-author/constants.js
+++ b/packages/editor/src/components/post-author/constants.js
@@ -1,6 +1,10 @@
-export const AUTHORS_QUERY = {
-	who: 'authors',
-	per_page: 50,
+export const BASE_QUERY = {
 	_fields: 'id,name',
 	context: 'view', // Allows non-admins to perform requests.
 };
+
+export const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: 100,
+	...BASE_QUERY,
+};
diff --git a/packages/editor/src/components/post-author/hook.js b/packages/editor/src/components/post-author/hook.js
new file mode 100644
index 00000000000000..f251eba79e1806
--- /dev/null
+++ b/packages/editor/src/components/post-author/hook.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { AUTHORS_QUERY, BASE_QUERY } from './constants';
+
+export function useAuthorsQuery( search ) {
+	const { authorId, authors, postAuthor } = useSelect(
+		( select ) => {
+			const { getUser, getUsers } = select( coreStore );
+			const { getEditedPostAttribute } = select( editorStore );
+			const _authorId = getEditedPostAttribute( 'author' );
+			const query = { ...AUTHORS_QUERY };
+
+			if ( search ) {
+				query.search = search;
+				query.search_columns = [ 'name' ];
+			}
+
+			return {
+				authorId: _authorId,
+				authors: getUsers( query ),
+				postAuthor: getUser( _authorId, BASE_QUERY ),
+			};
+		},
+		[ search ]
+	);
+
+	const authorOptions = useMemo( () => {
+		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+
+		// Ensure the current author is included in the dropdown list.
+		const foundAuthor = fetchedAuthors.findIndex(
+			( { value } ) => postAuthor?.id === value
+		);
+
+		let currentAuthor = [];
+		if ( foundAuthor < 0 && postAuthor ) {
+			currentAuthor = [
+				{
+					value: postAuthor.id,
+					label: decodeEntities( postAuthor.name ),
+				},
+			];
+		} else if ( foundAuthor < 0 && ! postAuthor ) {
+			currentAuthor = [
+				{
+					value: 0,
+					label: __( '(No author)' ),
+				},
+			];
+		}
+
+		return [ ...currentAuthor, ...fetchedAuthors ];
+	}, [ authors, postAuthor ] );
+
+	return { authorId, authorOptions, postAuthor };
+}
diff --git a/packages/editor/src/components/post-author/index.js b/packages/editor/src/components/post-author/index.js
index 7e734379f64f64..7623adc10402c9 100644
--- a/packages/editor/src/components/post-author/index.js
+++ b/packages/editor/src/components/post-author/index.js
@@ -13,6 +13,11 @@ import { AUTHORS_QUERY } from './constants';
 
 const minimumUsersForCombobox = 25;
 
+/**
+ * Renders the component for selecting the post author.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
 function PostAuthor() {
 	const showCombobox = useSelect( ( select ) => {
 		const authors = select( coreStore ).getUsers( AUTHORS_QUERY );
diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js
new file mode 100644
index 00000000000000..5a413aedac09cf
--- /dev/null
+++ b/packages/editor/src/components/post-author/panel.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Dropdown } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PostAuthorCheck from './check';
+import PostAuthorForm from './index';
+import PostPanelRow from '../post-panel-row';
+import { useAuthorsQuery } from './hook';
+
+function PostAuthorToggle( { isOpen, onClick } ) {
+	const { postAuthor } = useAuthorsQuery();
+	const authorName =
+		decodeEntities( postAuthor?.name ) || __( '(No author)' );
+	return (
+		<Button
+			size="compact"
+			className="editor-post-author__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={
+				// translators: %s: Author name.
+				sprintf( __( 'Change author: %s' ), authorName )
+			}
+			onClick={ onClick }
+		>
+			{ authorName }
+		</Button>
+	);
+}
+
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export function PostAuthor() {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostAuthorCheck>
+			<PostPanelRow label={ __( 'Author' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-author__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostAuthorToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-author">
+							<InspectorPopoverHeader
+								title={ __( 'Author' ) }
+								onClose={ onClose }
+							/>
+							<PostAuthorForm onClose={ onClose } />
+						</div>
+					) }
+				/>
+			</PostPanelRow>
+		</PostAuthorCheck>
+	);
+}
+
+export default PostAuthor;
diff --git a/packages/editor/src/components/post-author/select.js b/packages/editor/src/components/post-author/select.js
index 4439f75e4e8009..e51cc288cc4530 100644
--- a/packages/editor/src/components/post-author/select.js
+++ b/packages/editor/src/components/post-author/select.js
@@ -2,36 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
+import { useDispatch } from '@wordpress/data';
 import { SelectControl } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
+import { useAuthorsQuery } from './hook';
 
-function PostAuthorSelect() {
+export default function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
-	const { postAuthor, authors } = useSelect( ( select ) => {
-		return {
-			postAuthor:
-				select( editorStore ).getEditedPostAttribute( 'author' ),
-			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
-		};
-	}, [] );
-
-	const authorOptions = useMemo( () => {
-		return ( authors ?? [] ).map( ( author ) => {
-			return {
-				value: author.id,
-				label: decodeEntities( author.name ),
-			};
-		} );
-	}, [ authors ] );
+	const { authorId, authorOptions } = useAuthorsQuery();
 
 	const setAuthorId = ( value ) => {
 		const author = Number( value );
@@ -40,13 +22,14 @@ function PostAuthorSelect() {
 
 	return (
 		<SelectControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 			className="post-author-selector"
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			onChange={ setAuthorId }
-			value={ postAuthor }
+			value={ authorId }
+			hideLabelFromVision
 		/>
 	);
 }
-
-export default PostAuthorSelect;
diff --git a/packages/editor/src/components/post-author/style.scss b/packages/editor/src/components/post-author/style.scss
new file mode 100644
index 00000000000000..548f781241b0a2
--- /dev/null
+++ b/packages/editor/src/components/post-author/style.scss
@@ -0,0 +1,13 @@
+.editor-post-author__panel {
+	padding-top: $grid-unit-10;
+}
+
+.editor-post-author__panel .editor-post-panel__row-control > div {
+	width: 100%;
+}
+
+.editor-post-author__panel-dialog .editor-post-author {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
diff --git a/packages/editor/src/components/post-author/test/check.js b/packages/editor/src/components/post-author/test/check.js
index 014599500743cc..597ab97ea2a8ad 100644
--- a/packages/editor/src/components/post-author/test/check.js
+++ b/packages/editor/src/components/post-author/test/check.js
@@ -19,32 +19,38 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
+function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => ( { supports: { author: true } } ),
+			getEditedPostAttribute: () => {},
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-assign-author': hasAssignAuthorAction,
+				},
+			} ),
+			getUsers: () => Array( hasAuthors ? 1 : 0 ).fill( {} ),
+		} ) );
+	} );
+}
+
 describe( 'PostAuthorCheck', () => {
 	it( 'should not render anything if has no authors', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: false,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( false, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if doesn't have author action", () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: false,
-		} ) );
+		setupUseSelectMock( true, false );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( true, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.getByText( 'authors' ) ).toBeVisible();
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
new file mode 100644
index 00000000000000..e347d3c79fc521
--- /dev/null
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+import { unlock } from '../../lock-unlock';
+import PostActions from '../post-actions';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
+import { getTemplateInfo } from '../../utils/get-template-info';
+
+export default function PostCardPanel( {
+	postType,
+	postId,
+	onActionPerformed,
+} ) {
+	const { title, icon } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord } = select( coreStore );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
+			const _templateInfo = [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+			].includes( postType )
+				? getTemplateInfo( {
+						template: _record,
+						templateTypes,
+				  } )
+				: {};
+
+			return {
+				title: _templateInfo?.title || _record?.title,
+				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
+					area: _record?.area,
+				} ),
+			};
+		},
+		[ postId, postType ]
+	);
+
+	const pageTypeBadge = usePageTypeBadge( postId );
+
+	return (
+		<div className="editor-post-card-panel">
+			<HStack
+				spacing={ 2 }
+				className="editor-post-card-panel__header"
+				align="flex-start"
+			>
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="editor-post-card-panel__title"
+					as="h2"
+				>
+					{ title ? decodeEntities( title ) : __( 'No title' ) }
+					{ pageTypeBadge && (
+						<span className="editor-post-card-panel__title-badge">
+							{ pageTypeBadge }
+						</span>
+					) }
+				</Text>
+				<PostActions
+					postType={ postType }
+					postId={ postId }
+					onActionPerformed={ onActionPerformed }
+				/>
+			</HStack>
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
new file mode 100644
index 00000000000000..d9ecfc58304e85
--- /dev/null
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -0,0 +1,48 @@
+.editor-post-card-panel {
+	&__content {
+		flex-grow: 1;
+	}
+
+	&__title {
+		width: 100%;
+
+		&.editor-post-card-panel__title {
+			@include heading-medium();
+			margin: 0;
+			padding: 2px 0;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			column-gap: $grid-unit-10;
+			row-gap: $grid-unit-05;
+			word-break: break-word;
+		}
+	}
+
+	&__icon {
+		flex: 0 0 $icon-size;
+		width: $icon-size;
+		height: $icon-size;
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	&.has-description &__header {
+		margin-bottom: $grid-unit-10;
+	}
+}
+
+.editor-post-card-panel__title-badge {
+	background: $gray-100;
+	color: $gray-800;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-small;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+	display: inline-block;
+}
diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js
index ea774964c9dd19..6e69f9bce4f838 100644
--- a/packages/editor/src/components/post-comments/index.js
+++ b/packages/editor/src/components/post-comments/index.js
@@ -1,42 +1,66 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+import {
+	RadioControl,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostComments( { commentStatus = 'open', ...props } ) {
-	const onToggleComments = () =>
-		props.editPost( {
-			comment_status: commentStatus === 'open' ? 'closed' : 'open',
+const COMMENT_OPTIONS = [
+	{
+		label: _x( 'Open', 'Adjective: e.g. "Comments are open"' ),
+		value: 'open',
+		description: __( 'Visitors can add new comments and replies.' ),
+	},
+	{
+		label: __( 'Closed' ),
+		value: 'closed',
+		description: [
+			__( 'Visitors cannot add new comments or replies.' ),
+			__( 'Existing comments remain visible.' ),
+		].join( ' ' ),
+	},
+];
+
+function PostComments() {
+	const commentStatus = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'comment_status' ) ??
+			'open',
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
+	const handleStatus = ( newCommentStatus ) =>
+		editPost( {
+			comment_status: newCommentStatus,
 		} );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			label={ __( 'Allow comments' ) }
-			checked={ commentStatus === 'open' }
-			onChange={ onToggleComments }
-		/>
+		<form>
+			<VStack spacing={ 4 }>
+				<RadioControl
+					className="editor-change-status__options"
+					hideLabelFromVision
+					label={ __( 'Comment status' ) }
+					options={ COMMENT_OPTIONS }
+					onChange={ handleStatus }
+					selected={ commentStatus }
+				/>
+			</VStack>
+		</form>
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			commentStatus:
-				select( editorStore ).getEditedPostAttribute(
-					'comment_status'
-				),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		editPost: dispatch( editorStore ).editPost,
-	} ) ),
-] )( PostComments );
+/**
+ * A form for managing comment status.
+ *
+ * @return {React.ReactNode} The rendered PostComments component.
+ */
+export default PostComments;
diff --git a/packages/editor/src/components/post-content-information/index.js b/packages/editor/src/components/post-content-information/index.js
new file mode 100644
index 00000000000000..17a43b1ba12962
--- /dev/null
+++ b/packages/editor/src/components/post-content-information/index.js
@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { count as wordCount } from '@wordpress/wordcount';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+// Taken from packages/editor/src/components/time-to-read/index.js.
+const AVERAGE_READING_RATE = 189;
+
+// This component renders the wordcount and reading time for the post.
+export default function PostContentInformation() {
+	const { postContent } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, getCurrentPostType, getCurrentPostId } =
+			select( editorStore );
+		const { canUser } = select( coreStore );
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )
+			: undefined;
+		const postType = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const isPostsPage = +_id === siteSettings?.page_for_posts;
+		const showPostContentInfo =
+			! isPostsPage &&
+			! [ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
+				postType
+			);
+		return {
+			postContent:
+				showPostContentInfo && getEditedPostAttribute( 'content' ),
+		};
+	}, [] );
+
+	/*
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+	const wordsCounted = useMemo(
+		() => ( postContent ? wordCount( postContent, wordCountType ) : 0 ),
+		[ postContent, wordCountType ]
+	);
+	if ( ! wordsCounted ) {
+		return null;
+	}
+	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
+	const wordsCountText = sprintf(
+		// translators: %s: the number of words in the post.
+		_n( '%s word', '%s words', wordsCounted ),
+		wordsCounted.toLocaleString()
+	);
+	const minutesText =
+		readingTime <= 1
+			? __( '1 minute' )
+			: sprintf(
+					/* translators: %s: the number of minutes to read the post. */
+					_n( '%s minute', '%s minutes', readingTime ),
+					readingTime.toLocaleString()
+			  );
+	return (
+		<div className="editor-post-content-information">
+			<Text>
+				{ sprintf(
+					/* translators: 1: How many words a post has. 2: the number of minutes to read the post (e.g. 130 words, 2 minutes read time.) */
+					__( '%1$s, %2$s read time.' ),
+					wordsCountText,
+					minutesText
+				) }
+			</Text>
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/post-content-information/style.scss b/packages/editor/src/components/post-content-information/style.scss
new file mode 100644
index 00000000000000..1b88392cc76eca
--- /dev/null
+++ b/packages/editor/src/components/post-content-information/style.scss
@@ -0,0 +1,6 @@
+.editor-post-content-information {
+	color: $gray-700;
+	& .components-text {
+		color: inherit;
+	}
+}
diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/src/components/post-discussion/panel.js
new file mode 100644
index 00000000000000..280ab11b0447e7
--- /dev/null
+++ b/packages/editor/src/components/post-discussion/panel.js
@@ -0,0 +1,147 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTypeSupportCheck from '../post-type-support-check';
+import PostComments from '../post-comments';
+import PostPingbacks from '../post-pingbacks';
+import PostPanelRow from '../post-panel-row';
+
+const PANEL_NAME = 'discussion-panel';
+
+function ModalContents( { onClose } ) {
+	return (
+		<div className="editor-post-discussion">
+			<InspectorPopoverHeader
+				title={ __( 'Discussion' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 4 }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PostComments />
+				</PostTypeSupportCheck>
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PostPingbacks />
+				</PostTypeSupportCheck>
+			</VStack>
+		</div>
+	);
+}
+
+function PostDiscussionToggle( { isOpen, onClick } ) {
+	const {
+		commentStatus,
+		pingStatus,
+		commentsSupported,
+		trackbacksSupported,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
+		return {
+			commentStatus: getEditedPostAttribute( 'comment_status' ) ?? 'open',
+			pingStatus: getEditedPostAttribute( 'ping_status' ) ?? 'open',
+			commentsSupported: !! postType.supports.comments,
+			trackbacksSupported: !! postType.supports.trackbacks,
+		};
+	}, [] );
+	let label;
+	if ( commentStatus === 'open' ) {
+		if ( pingStatus === 'open' ) {
+			label = _x( 'Open', 'Adjective: e.g. "Comments are open"' );
+		} else {
+			label = trackbacksSupported
+				? __( 'Comments only' )
+				: _x( 'Open', 'Adjective: e.g. "Comments are open"' );
+		}
+	} else if ( pingStatus === 'open' ) {
+		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );
+	} else {
+		label = __( 'Closed' );
+	}
+	return (
+		<Button
+			size="compact"
+			className="editor-post-discussion__panel-toggle"
+			variant="tertiary"
+			aria-label={ __( 'Change discussion options' ) }
+			aria-expanded={ isOpen }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
+
+/**
+ * This component allows to update comment and pingback
+ * settings for the current post. Internally there are
+ * checks whether the current post has support for the
+ * above and if the `discussion-panel` panel is enabled.
+ *
+ * @return {React.ReactNode} The rendered PostDiscussionPanel component.
+ */
+export default function PostDiscussionPanel() {
+	const { isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled } = select( editorStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+		};
+	}, [] );
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
+			<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-discussion__panel-dropdown"
+					contentClassName="editor-post-discussion__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostDiscussionToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<ModalContents onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
+		</PostTypeSupportCheck>
+	);
+}
diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
new file mode 100644
index 00000000000000..d5320605579e41
--- /dev/null
+++ b/packages/editor/src/components/post-discussion/style.scss
@@ -0,0 +1,15 @@
+.editor-post-discussion__panel-dialog .editor-post-discussion {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+.editor-post-discussion__panel-toggle {
+
+	.components-text {
+		color: inherit;
+	}
+}
+
+.editor-post-discussion__panel-dialog .components-popover__content {
+	min-width: 320px;
+}
diff --git a/packages/editor/src/components/post-excerpt/check.js b/packages/editor/src/components/post-excerpt/check.js
index a94a5badec180c..c518d90e424a9b 100644
--- a/packages/editor/src/components/post-excerpt/check.js
+++ b/packages/editor/src/components/post-excerpt/check.js
@@ -3,8 +3,20 @@
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 
-function PostExcerptCheck( props ) {
-	return <PostTypeSupportCheck { ...props } supportKeys="excerpt" />;
+/**
+ * Component for checking if the post type supports the excerpt field.
+ *
+ * @param {Object}          props          Props.
+ * @param {React.ReactNode} props.children Children to be rendered.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostExcerptCheck( { children } ) {
+	return (
+		<PostTypeSupportCheck supportKeys="excerpt">
+			{ children }
+		</PostTypeSupportCheck>
+	);
 }
 
 export default PostExcerptCheck;
diff --git a/packages/editor/src/components/post-excerpt/index.js b/packages/editor/src/components/post-excerpt/index.js
index fcba84ec03754a..2555922f4e45ae 100644
--- a/packages/editor/src/components/post-excerpt/index.js
+++ b/packages/editor/src/components/post-excerpt/index.js
@@ -3,43 +3,92 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ExternalLink, TextareaControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
+/**
+ * Renders an editable textarea for the post excerpt.
+ * Templates, template parts and patterns use the `excerpt` field as a description semantically.
+ * Additionally templates and template parts override the `excerpt` field as `description` in
+ * REST API. So this component handles proper labeling and updating the edited entity.
+ *
+ * @param {Object}  props                             - Component props.
+ * @param {boolean} [props.hideLabelFromVision=false] - Whether to visually hide the textarea's label.
+ * @param {boolean} [props.updateOnBlur=false]        - Whether to update the post on change or use local state and update on blur.
+ */
+export default function PostExcerpt( {
+	hideLabelFromVision = false,
+	updateOnBlur = false,
+} ) {
+	const { excerpt, shouldUseDescriptionLabel, usedAttribute } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
+			const postType = getCurrentPostType();
+			// This special case is unfortunate, but the REST API of wp_template and wp_template_part
+			// support the excerpt field throught the "description" field rather than "excerpt".
+			const _usedAttribute = [
+				'wp_template',
+				'wp_template_part',
+			].includes( postType )
+				? 'description'
+				: 'excerpt';
+			return {
+				excerpt: getEditedPostAttribute( _usedAttribute ),
+				// There are special cases where we want to label the excerpt as a description.
+				shouldUseDescriptionLabel: [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+				usedAttribute: _usedAttribute,
+			};
+		},
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
+	const [ localExcerpt, setLocalExcerpt ] = useState(
+		decodeEntities( excerpt )
+	);
+	const updatePost = ( value ) => {
+		editPost( { [ usedAttribute ]: value } );
+	};
+	const label = shouldUseDescriptionLabel
+		? __( 'Write a description (optional)' )
+		: __( 'Write an excerpt (optional)' );
+
 	return (
 		<div className="editor-post-excerpt">
 			<TextareaControl
-				label={ __( 'Write an excerpt (optional)' ) }
+				__nextHasNoMarginBottom
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
 				className="editor-post-excerpt__textarea"
-				onChange={ ( value ) => onUpdateExcerpt( value ) }
-				value={ excerpt }
+				onChange={ updateOnBlur ? setLocalExcerpt : updatePost }
+				onBlur={
+					updateOnBlur ? () => updatePost( localExcerpt ) : undefined
+				}
+				value={ updateOnBlur ? localExcerpt : excerpt }
+				help={
+					! shouldUseDescriptionLabel ? (
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-post-settings-sidebar/#excerpt'
+							) }
+						>
+							{ __( 'Learn more about manual excerpts' ) }
+						</ExternalLink>
+					) : (
+						__( 'Write a description' )
+					)
+				}
 			/>
-			<ExternalLink
-				href={ __(
-					'https://wordpress.org/support/article/settings-sidebar/#excerpt'
-				) }
-			>
-				{ __( 'Learn more about manual excerpts' ) }
-			</ExternalLink>
 		</div>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			excerpt: select( editorStore ).getEditedPostAttribute( 'excerpt' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onUpdateExcerpt( excerpt ) {
-			dispatch( editorStore ).editPost( { excerpt } );
-		},
-	} ) ),
-] )( PostExcerpt );
diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js
new file mode 100644
index 00000000000000..d4f2b27126c7c1
--- /dev/null
+++ b/packages/editor/src/components/post-excerpt/panel.js
@@ -0,0 +1,233 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	PanelBody,
+	__experimentalText as Text,
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo, useState } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import PostExcerptForm from './index';
+import PostExcerptCheck from './check';
+import PluginPostExcerpt from './plugin';
+import { TEMPLATE_ORIGINS } from '../../store/constants';
+import { store as editorStore } from '../../store';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-excerpt';
+
+function ExcerptPanel() {
+	const { isOpened, isEnabled, postType } = useSelect( ( select ) => {
+		const {
+			isEditorPanelOpened,
+			isEditorPanelEnabled,
+			getCurrentPostType,
+		} = select( editorStore );
+
+		return {
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+	const toggleExcerptPanel = () => toggleEditorPanelOpened( PANEL_NAME );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	// There are special cases where we want to label the excerpt as a description.
+	const shouldUseDescriptionLabel = [
+		'wp_template',
+		'wp_template_part',
+		'wp_block',
+	].includes( postType );
+
+	return (
+		<PanelBody
+			title={
+				shouldUseDescriptionLabel
+					? __( 'Description' )
+					: __( 'Excerpt' )
+			}
+			opened={ isOpened }
+			onToggle={ toggleExcerptPanel }
+		>
+			<PluginPostExcerpt.Slot>
+				{ ( fills ) => (
+					<>
+						<PostExcerptForm />
+						{ fills }
+					</>
+				) }
+			</PluginPostExcerpt.Slot>
+		</PanelBody>
+	);
+}
+
+/**
+ * Is rendered if the post type supports excerpts and allows editing the excerpt.
+ *
+ * @return {React.ReactNode} The rendered PostExcerptPanel component.
+ */
+export default function PostExcerptPanel() {
+	return (
+		<PostExcerptCheck>
+			<ExcerptPanel />
+		</PostExcerptCheck>
+	);
+}
+
+export function PrivatePostExcerptPanel() {
+	return (
+		<PostExcerptCheck>
+			<PrivateExcerpt />
+		</PostExcerptCheck>
+	);
+}
+
+function PrivateExcerpt() {
+	const { shouldRender, excerpt, shouldBeUsedAsDescription, allowEditing } =
+		useSelect( ( select ) => {
+			const {
+				getCurrentPostType,
+				getCurrentPostId,
+				getEditedPostAttribute,
+				isEditorPanelEnabled,
+			} = select( editorStore );
+			const postType = getCurrentPostType();
+			const isTemplateOrTemplatePart = [
+				'wp_template',
+				'wp_template_part',
+			].includes( postType );
+			const isPattern = postType === 'wp_block';
+			// These post types use the `excerpt` field as a description semantically, so we need to
+			// handle proper labeling and some flows where we should always render them as text.
+			const _shouldBeUsedAsDescription =
+				isTemplateOrTemplatePart || isPattern;
+			const _usedAttribute = isTemplateOrTemplatePart
+				? 'description'
+				: 'excerpt';
+			// We need to fetch the entity in this case to check if we'll allow editing.
+			const template =
+				isTemplateOrTemplatePart &&
+				select( coreStore ).getEntityRecord(
+					'postType',
+					postType,
+					getCurrentPostId()
+				);
+			// For post types that use excerpt as description, we do not abide
+			// by the `isEnabled` panel flag in order to render them as text.
+			const _shouldRender =
+				isEditorPanelEnabled( PANEL_NAME ) ||
+				_shouldBeUsedAsDescription;
+			return {
+				excerpt: getEditedPostAttribute( _usedAttribute ),
+				shouldRender: _shouldRender,
+				shouldBeUsedAsDescription: _shouldBeUsedAsDescription,
+				// If we should render, allow editing for all post types that are not used as description.
+				// For the rest allow editing only for user generated entities.
+				allowEditing:
+					_shouldRender &&
+					( ! _shouldBeUsedAsDescription ||
+						isPattern ||
+						( template &&
+							template.source === TEMPLATE_ORIGINS.custom &&
+							! template.has_theme_file &&
+							template.is_custom ) ),
+			};
+		}, [] );
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const label = shouldBeUsedAsDescription
+		? __( 'Description' )
+		: __( 'Excerpt' );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			'aria-label': label,
+			headerTitle: label,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor, label ]
+	);
+	if ( ! shouldRender ) {
+		return false;
+	}
+	const excerptText = !! excerpt && (
+		<Text align="left" numberOfLines={ 4 } truncate={ allowEditing }>
+			{ decodeEntities( excerpt ) }
+		</Text>
+	);
+	if ( ! allowEditing ) {
+		return excerptText;
+	}
+	const excerptPlaceholder = shouldBeUsedAsDescription
+		? __( 'Add a description…' )
+		: __( 'Add an excerpt…' );
+	const triggerEditLabel = shouldBeUsedAsDescription
+		? __( 'Edit description' )
+		: __( 'Edit excerpt' );
+	return (
+		<VStack>
+			{ excerptText }
+			<Dropdown
+				className="editor-post-excerpt__dropdown"
+				contentClassName="editor-post-excerpt__dropdown__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						__next40pxDefaultSize
+						onClick={ onToggle }
+						variant="link"
+					>
+						{ excerptText ? triggerEditLabel : excerptPlaceholder }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ label }
+							onClose={ onClose }
+						/>
+
+						<VStack spacing={ 4 }>
+							<PluginPostExcerpt.Slot>
+								{ ( fills ) => (
+									<>
+										<PostExcerptForm
+											hideLabelFromVision
+											updateOnBlur
+										/>
+										{ fills }
+									</>
+								) }
+							</PluginPostExcerpt.Slot>
+						</VStack>
+					</>
+				) }
+			/>
+		</VStack>
+	);
+}
diff --git a/packages/editor/src/components/post-excerpt/plugin.js b/packages/editor/src/components/post-excerpt/plugin.js
new file mode 100644
index 00000000000000..50c494c01cb6d8
--- /dev/null
+++ b/packages/editor/src/components/post-excerpt/plugin.js
@@ -0,0 +1,61 @@
+/**
+ * Defines as extensibility slot for the Excerpt panel.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelRow } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
+
+/**
+ * Renders a post excerpt panel in the post sidebar.
+ *
+ * @param {Object}          props             Component properties.
+ * @param {string}          [props.className] An optional class name added to the row.
+ * @param {React.ReactNode} props.children    Children to be rendered.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginPostExcerpt = wp.editPost.__experimentalPluginPostExcerpt;
+ *
+ * function MyPluginPostExcerpt() {
+ * 	return React.createElement(
+ * 		PluginPostExcerpt,
+ * 		{
+ * 			className: 'my-plugin-post-excerpt',
+ * 		},
+ * 		__( 'Post excerpt custom content' )
+ * 	)
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { __experimentalPluginPostExcerpt as PluginPostExcerpt } from '@wordpress/edit-post';
+ *
+ * const MyPluginPostExcerpt = () => (
+ * 	<PluginPostExcerpt className="my-plugin-post-excerpt">
+ * 		{ __( 'Post excerpt custom content' ) }
+ * 	</PluginPostExcerpt>
+ * );
+ * ```
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+const PluginPostExcerpt = ( { children, className } ) => {
+	return (
+		<Fill>
+			<PanelRow className={ className }>{ children }</PanelRow>
+		</Fill>
+	);
+};
+
+PluginPostExcerpt.Slot = Slot;
+
+export default PluginPostExcerpt;
diff --git a/packages/editor/src/components/post-excerpt/style.scss b/packages/editor/src/components/post-excerpt/style.scss
index 056d81ad36c731..9a8f1553fed2cb 100644
--- a/packages/editor/src/components/post-excerpt/style.scss
+++ b/packages/editor/src/components/post-excerpt/style.scss
@@ -2,3 +2,10 @@
 	width: 100%;
 	margin-bottom: 10px;
 }
+
+.editor-post-excerpt__dropdown__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+}
diff --git a/packages/editor/src/components/post-excerpt/test/plugin.js b/packages/editor/src/components/post-excerpt/test/plugin.js
new file mode 100644
index 00000000000000..d6f81d459deb33
--- /dev/null
+++ b/packages/editor/src/components/post-excerpt/test/plugin.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostExcerptPanel from '../plugin';
+
+describe( 'PluginPostExcerptPanel', () => {
+	test( 'renders fill properly', () => {
+		render(
+			<SlotFillProvider>
+				<PluginPostExcerptPanel className="my-plugin-post-excerpt-custom-content">
+					Post Excerpt - Custom content
+				</PluginPostExcerptPanel>
+				<div role="tabpanel">
+					<PluginPostExcerptPanel.Slot />
+				</div>
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByRole( 'tabpanel' ) ).toHaveTextContent(
+			'Post Excerpt - Custom content'
+		);
+		expect(
+			screen.getByText( 'Post Excerpt - Custom content' )
+		).toHaveClass( 'my-plugin-post-excerpt-custom-content' );
+	} );
+} );
diff --git a/packages/editor/src/components/post-featured-image/README.md b/packages/editor/src/components/post-featured-image/README.md
index 9b1520228703fb..369e4d7ef94399 100644
--- a/packages/editor/src/components/post-featured-image/README.md
+++ b/packages/editor/src/components/post-featured-image/README.md
@@ -13,7 +13,7 @@ Replace the contents of the panel:
 ```js
 function replacePostFeaturedImage() {
 	return function () {
-		return wp.element.createElement(
+		return React.createElement(
 			'div',
 			{},
 			'The replacement contents or components.'
@@ -31,12 +31,12 @@ wp.hooks.addFilter(
 Prepend and append to the panel contents:
 
 ```js
-var el = wp.element.createElement;
+var el = React.createElement;
 
 function wrapPostFeaturedImage( OriginalComponent ) {
 	return function ( props ) {
 		return el(
-			wp.element.Fragment,
+			React.Fragment,
 			{},
 			'Prepend above',
 			el( OriginalComponent, props ),
diff --git a/packages/editor/src/components/post-featured-image/check.js b/packages/editor/src/components/post-featured-image/check.js
index 5481deaa81604b..700a3b8edfd032 100644
--- a/packages/editor/src/components/post-featured-image/check.js
+++ b/packages/editor/src/components/post-featured-image/check.js
@@ -4,10 +4,21 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
-function PostFeaturedImageCheck( props ) {
+/**
+ * Wrapper component that renders its children only if the post type supports a featured image
+ * and the theme supports post thumbnails.
+ *
+ * @param {Object}          props          Props.
+ * @param {React.ReactNode} props.children Children to be rendered.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">
-			<PostTypeSupportCheck { ...props } supportKeys="thumbnail" />
+			<PostTypeSupportCheck supportKeys="thumbnail">
+				{ children }
+			</PostTypeSupportCheck>
 		</ThemeSupportCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index dd50d9bd588051..acf366506cc41e 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,12 +12,13 @@ import {
 	DropZone,
 	Button,
 	Spinner,
-	ResponsiveWrapper,
 	withNotices,
 	withFilters,
+	__experimentalHStack as HStack,
+	Notice,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
@@ -37,8 +38,7 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 // Used when labels from post type were not yet loaded or when they are not present.
 const DEFAULT_FEATURE_IMAGE_LABEL = __( 'Featured image' );
-const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
-const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove image' );
+const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Add a featured image' );
 
 const instructions = (
 	<p>
@@ -100,27 +100,25 @@ function PostFeaturedImage( {
 	postType,
 	noticeUI,
 	noticeOperations,
+	isRequestingFeaturedImageMedia,
 } ) {
+	const returnsFocusRef = useRef( false );
 	const [ isLoading, setIsLoading ] = useState( false );
-	const mediaUpload = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().mediaUpload;
-	}, [] );
-	const postLabel = get( postType, [ 'labels' ], {} );
-	const { mediaWidth, mediaHeight, mediaSourceUrl } = getMediaDetails(
-		media,
-		currentPostId
-	);
+	const { getSettings } = useSelect( blockEditorStore );
+	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
 
 	function onDropFiles( filesList ) {
-		mediaUpload( {
-			allowedTypes: [ 'image' ],
+		getSettings().mediaUpload( {
+			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
 					setIsLoading( true );
 					return;
 				}
-				onUpdateImage( image );
+				if ( image ) {
+					onUpdateImage( image );
+				}
 				setIsLoading( false );
 			},
 			onError( message ) {
@@ -130,6 +128,45 @@ function PostFeaturedImage( {
 		} );
 	}
 
+	/**
+	 * Generates the featured image alt text for this editing context.
+	 *
+	 * @param {Object} imageMedia                               The image media object.
+	 * @param {string} imageMedia.alt_text                      The alternative text of the image.
+	 * @param {Object} imageMedia.media_details                 The media details of the image.
+	 * @param {Object} imageMedia.media_details.sizes           The sizes of the image.
+	 * @param {Object} imageMedia.media_details.sizes.full      The full size details of the image.
+	 * @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
+	 * @param {string} imageMedia.slug                          The slug of the image.
+	 * @return {string} The featured image alt text.
+	 */
+	function getImageDescription( imageMedia ) {
+		if ( imageMedia.alt_text ) {
+			return sprintf(
+				// Translators: %s: The selected image alt text.
+				__( 'Current image: %s' ),
+				imageMedia.alt_text
+			);
+		}
+		return sprintf(
+			// Translators: %s: The selected image filename.
+			__(
+				'The current image has no alternative text. The file name is: %s'
+			),
+			imageMedia.media_details.sizes?.full?.file || imageMedia.slug
+		);
+	}
+
+	function returnFocus( node ) {
+		if ( returnsFocusRef.current && node ) {
+			node.focus();
+			returnsFocusRef.current = false;
+		}
+	}
+
+	const isMissingMedia =
+		! isRequestingFeaturedImageMedia && !! featuredImageId && ! media;
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -139,27 +176,13 @@ function PostFeaturedImage( {
 						id={ `editor-post-featured-image-${ featuredImageId }-describedby` }
 						className="hidden"
 					>
-						{ media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image alt text.
-								__( 'Current image: %s' ),
-								media.alt_text
-							) }
-						{ ! media.alt_text &&
-							sprintf(
-								// Translators: %s: The selected image filename.
-								__(
-									'The current image has no alternative text. The file name is: %s'
-								),
-								media.media_details.sizes?.full?.file ||
-									media.slug
-							) }
+						{ getImageDescription( media ) }
 					</div>
 				) }
 				<MediaUploadCheck fallback={ instructions }>
 					<MediaUpload
 						title={
-							postLabel.featured_image ||
+							postType?.labels?.featured_image ||
 							DEFAULT_FEATURE_IMAGE_LABEL
 						}
 						onSelect={ onUpdateImage }
@@ -168,87 +191,121 @@ function PostFeaturedImage( {
 						modalClass="editor-post-featured-image__media-modal"
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
-								<Button
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __( 'Edit or update the image' )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-								>
-									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
+								{ isMissingMedia ? (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'Could not retrieve the featured image data.'
+										) }
+									</Notice>
+								) : (
+									<Button
+										__next40pxDefaultSize
+										ref={ returnFocus }
+										className={
+											! featuredImageId
+												? 'editor-post-featured-image__toggle'
+												: 'editor-post-featured-image__preview'
+										}
+										onClick={ open }
+										aria-label={
+											! featuredImageId
+												? null
+												: __(
+														'Edit or replace the featured image'
+												  )
+										}
+										aria-describedby={
+											! featuredImageId
+												? null
+												: `editor-post-featured-image-${ featuredImageId }-describedby`
+										}
+										aria-haspopup="dialog"
+										disabled={ isLoading }
+										accessibleWhenDisabled
+									>
+										{ !! featuredImageId && media && (
 											<img
+												className="editor-post-featured-image__preview-image"
 												src={ mediaSourceUrl }
-												alt=""
+												alt={ getImageDescription(
+													media
+												) }
 											/>
-										</ResponsiveWrapper>
-									) }
-									{ isLoading && <Spinner /> }
-									{ ! featuredImageId &&
-										! isLoading &&
-										( postLabel.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
+										) }
+										{ ( isLoading ||
+											isRequestingFeaturedImageMedia ) && (
+											<Spinner />
+										) }
+										{ ! featuredImageId &&
+											! isLoading &&
+											( postType?.labels
+												?.set_featured_image ||
+												DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+									</Button>
+								) }
+								{ !! featuredImageId && (
+									<HStack
+										className={ clsx(
+											'editor-post-featured-image__actions',
+											{
+												'editor-post-featured-image__actions-missing-image':
+													isMissingMedia,
+												'editor-post-featured-image__actions-is-requesting-image':
+													isRequestingFeaturedImageMedia,
+											}
+										) }
+									>
+										<Button
+											__next40pxDefaultSize
+											className="editor-post-featured-image__action"
+											onClick={ open }
+											aria-haspopup="dialog"
+											variant={
+												isMissingMedia
+													? 'secondary'
+													: undefined
+											}
+										>
+											{ __( 'Replace' ) }
+										</Button>
+										<Button
+											__next40pxDefaultSize
+											className="editor-post-featured-image__action"
+											onClick={ () => {
+												onRemoveImage();
+												// Signal that the toggle button should be focused,
+												// when it is rendered. Can't focus it directly here
+												// because it's rendered conditionally.
+												returnsFocusRef.current = true;
+											} }
+											variant={
+												isMissingMedia
+													? 'secondary'
+													: undefined
+											}
+											isDestructive={ isMissingMedia }
+										>
+											{ __( 'Remove' ) }
+										</Button>
+									</HStack>
+								) }
 								<DropZone onFilesDrop={ onDropFiles } />
 							</div>
 						) }
 						value={ featuredImageId }
 					/>
 				</MediaUploadCheck>
-				{ !! featuredImageId && (
-					<MediaUploadCheck>
-						{ media && (
-							<MediaUpload
-								title={
-									postLabel.featured_image ||
-									DEFAULT_FEATURE_IMAGE_LABEL
-								}
-								onSelect={ onUpdateImage }
-								unstableFeaturedImageFlow
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								modalClass="editor-post-featured-image__media-modal"
-								render={ ( { open } ) => (
-									<Button
-										onClick={ open }
-										variant="secondary"
-									>
-										{ __( 'Replace Image' ) }
-									</Button>
-								) }
-							/>
-						) }
-						<Button
-							onClick={ onRemoveImage }
-							variant="link"
-							isDestructive
-						>
-							{ postLabel.remove_featured_image ||
-								DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-						</Button>
-					</MediaUploadCheck>
-				) }
 			</div>
 		</PostFeaturedImageCheck>
 	);
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getMedia, getPostType } = select( coreStore );
+	const { getMedia, getPostType, hasFinishedResolution } =
+		select( coreStore );
 	const { getCurrentPostId, getEditedPostAttribute } = select( editorStore );
 	const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -259,6 +316,12 @@ const applyWithSelect = withSelect( ( select ) => {
 		currentPostId: getCurrentPostId(),
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		featuredImageId,
+		isRequestingFeaturedImageMedia:
+			!! featuredImageId &&
+			! hasFinishedResolution( 'getMedia', [
+				featuredImageId,
+				{ context: 'view' },
+			] ),
 	};
 } );
 
@@ -291,6 +354,21 @@ const applyWithDispatch = withDispatch(
 	}
 );
 
+/**
+ * Renders the component for managing the featured image of a post.
+ *
+ * @param {Object}   props                  Props.
+ * @param {number}   props.currentPostId    ID of the current post.
+ * @param {number}   props.featuredImageId  ID of the featured image.
+ * @param {Function} props.onUpdateImage    Function to call when the image is updated.
+ * @param {Function} props.onRemoveImage    Function to call when the image is removed.
+ * @param {Object}   props.media            The media object representing the featured image.
+ * @param {string}   props.postType         Post type.
+ * @param {Element}  props.noticeUI         UI for displaying notices.
+ * @param {Object}   props.noticeOperations Operations for managing notices.
+ *
+ * @return {Element} Component to be rendered .
+ */
 export default compose(
 	withNotices,
 	applyWithSelect,
diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js
new file mode 100644
index 00000000000000..8621b2eb886337
--- /dev/null
+++ b/packages/editor/src/components/post-featured-image/panel.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostFeaturedImage from './index';
+import PostFeaturedImageCheck from './check';
+
+const PANEL_NAME = 'featured-image';
+
+/**
+ * Renders the panel for the post featured image.
+ *
+ * @param {Object}  props               Props.
+ * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
+ *
+ * @return {React.ReactNode} The component to be rendered.
+ * Return Null if the editor panel is disabled for featured image.
+ */
+export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
+	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			isEditorPanelEnabled,
+			isEditorPanelOpened,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	if ( ! withPanelBody ) {
+		return (
+			<PostFeaturedImageCheck>
+				<PostFeaturedImage />
+			</PostFeaturedImageCheck>
+		);
+	}
+
+	return (
+		<PostFeaturedImageCheck>
+			<PanelBody
+				title={
+					postType?.labels?.featured_image ?? __( 'Featured image' )
+				}
+				opened={ isOpened }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+			>
+				<PostFeaturedImage />
+			</PanelBody>
+		</PostFeaturedImageCheck>
+	);
+}
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index 965780179e6ef9..bf9433faa662d4 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -1,11 +1,6 @@
 .editor-post-featured-image {
 	padding: 0;
 
-	&__container {
-		margin-bottom: 1em;
-		position: relative;
-	}
-
 	.components-spinner {
 		position: absolute;
 		top: 50%;
@@ -13,49 +8,91 @@
 		margin-top: -9px;
 		margin-left: -9px;
 	}
+}
+
+.editor-post-featured-image__container {
+	position: relative;
+
+	&:hover,
+	&:focus,
+	&:focus-within {
+		.editor-post-featured-image__actions:not(.editor-post-featured-image__actions-is-requesting-image) {
+			opacity: 1;
+		}
+	}
 
-	// Stack consecutive buttons.
-	.components-button + .components-button {
-		display: block;
-		margin-top: 1em;
+	.editor-post-featured-image__actions.editor-post-featured-image__actions-missing-image {
+		opacity: 1;
+		margin-top: $grid-unit-20;
 	}
 
-	// This keeps images at their intrinsic size (eg. a 50px
-	// image will never be wider than 50px).
-	.components-responsive-wrapper__content {
-		max-width: 100%;
-		width: auto;
+	.components-drop-zone__content {
+		border-radius: $radius-small;
+	}
+
+	// Align text and icons horizontally to avoid clipping when the featured image is not set.
+	&:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
 	}
 }
 
 .editor-post-featured-image__toggle,
 .editor-post-featured-image__preview {
-	display: block;
 	width: 100%;
 	padding: 0;
-	transition: all 0.1s ease-out;
-	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+	outline-offset: -#{$border-width};
+	min-height: $grid-unit-50;
+
+	display: flex;
+	justify-content: center;
 }
 
 .editor-post-featured-image__preview {
-	height: auto;
-}
+	height: auto !important;
+	outline: $border-width solid rgba($black, 0.1);
 
-.editor-post-featured-image__preview:not(:disabled):not([aria-disabled="true"]):focus {
-	box-shadow: 0 0 0 4px var(--wp-admin-theme-color);
+	.editor-post-featured-image__preview-image {
+		object-fit: cover;
+		width: 100%;
+		object-position: 50% 50%;
+		aspect-ratio: 2/1;
+	}
 }
 
 .editor-post-featured-image__toggle {
-	border-radius: $radius-block-ui;
-	background-color: $gray-100;
-	min-height: 90px;
-	line-height: 20px;
-	padding: $grid-unit-10 0;
-	text-align: center;
-
-	&:hover {
-		background: $gray-300;
-		color: $gray-900;
+	box-shadow: inset 0 0 0 $border-width $gray-400;
+
+	&:focus:not(:disabled) {
+		// Allow smooth transition between focused and unfocused box-shadow states.
+		box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+.editor-post-featured-image__actions {
+	&:not(.editor-post-featured-image__actions-missing-image) {
+		@include reduce-motion("transition");
+		bottom: 0;
+		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
+		padding: $grid-unit-10;
+		position: absolute;
+		transition: opacity 50ms ease-out;
+
+		.editor-post-featured-image__action {
+			backdrop-filter: blur(16px) saturate(180%);
+			background: rgba(255, 255, 255, 0.75);
+		}
+	}
+
+	.editor-post-featured-image__action {
+		flex-grow: 1;
+		justify-content: center;
 	}
 }
diff --git a/packages/editor/src/components/post-fields/index.ts b/packages/editor/src/components/post-fields/index.ts
new file mode 100644
index 00000000000000..d701bdef2284e6
--- /dev/null
+++ b/packages/editor/src/components/post-fields/index.ts
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import type { Field } from '@wordpress/dataviews';
+import type { BasePostWithEmbeddedAuthor } from '@wordpress/fields';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+interface UsePostFieldsReturn {
+	isLoading: boolean;
+	fields: Field< BasePostWithEmbeddedAuthor >[];
+}
+
+interface Author {
+	id: number;
+	name: string;
+}
+
+function usePostFields( {
+	postType,
+}: {
+	postType: string;
+} ): UsePostFieldsReturn {
+	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
+	useEffect( () => {
+		registerPostTypeSchema( postType );
+	}, [ registerPostTypeSchema, postType ] );
+
+	const { defaultFields } = useSelect(
+		( select ) => {
+			const { getEntityFields } = unlock( select( editorStore ) );
+			return {
+				defaultFields: getEntityFields( 'postType', postType ),
+			};
+		},
+		[ postType ]
+	);
+
+	const { records: authors, isResolving: isLoadingAuthors } =
+		useEntityRecords< Author >( 'root', 'user', { per_page: -1 } );
+
+	const fields = useMemo(
+		() =>
+			defaultFields.map(
+				( field: Field< BasePostWithEmbeddedAuthor > ) => {
+					if ( field.id === 'author' ) {
+						return {
+							...field,
+							elements: authors?.map( ( { id, name } ) => ( {
+								value: id,
+								label: name,
+							} ) ),
+						};
+					}
+
+					return field;
+				}
+			) as Field< BasePostWithEmbeddedAuthor >[],
+		[ authors, defaultFields ]
+	);
+
+	return {
+		isLoading: isLoadingAuthors,
+		fields,
+	};
+}
+
+/**
+ * Hook to get the fields for a post (BasePost or BasePostWithEmbeddedAuthor).
+ */
+export default usePostFields;
diff --git a/packages/editor/src/components/post-format/check.js b/packages/editor/src/components/post-format/check.js
index cc65bde0cdec24..fe791862e1cebb 100644
--- a/packages/editor/src/components/post-format/check.js
+++ b/packages/editor/src/components/post-format/check.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -9,17 +9,28 @@ import { withSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-function PostFormatCheck( { disablePostFormats, ...props } ) {
+/**
+ * Component check if there are any post formats.
+ *
+ * @param {Object}          props          The component props.
+ * @param {React.ReactNode} props.children The child elements to render.
+ *
+ * @return {React.ReactNode} The rendered component or null if post formats are disabled.
+ */
+export default function PostFormatCheck( { children } ) {
+	const disablePostFormats = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().disablePostFormats,
+		[]
+	);
+
+	if ( disablePostFormats ) {
+		return null;
+	}
+
 	return (
-		! disablePostFormats && (
-			<PostTypeSupportCheck { ...props } supportKeys="post-formats" />
-		)
+		<PostTypeSupportCheck supportKeys="post-formats">
+			{ children }
+		</PostTypeSupportCheck>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const editorSettings = select( editorStore ).getEditorSettings();
-	return {
-		disablePostFormats: editorSettings.disablePostFormats,
-	};
-} )( PostFormatCheck );
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index 4f3ec2c6966937..d98720cd6fa93f 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, SelectControl } from '@wordpress/components';
+import { Button, RadioControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -43,6 +38,16 @@ export const POST_FORMATS = [
 	return 0;
 } );
 
+/**
+ * `PostFormat` a component that allows changing the post format while also providing a suggestion for the current post.
+ *
+ * @example
+ * ```jsx
+ * <PostFormat />
+ * ```
+ *
+ * @return {React.ReactNode} The rendered PostFormat component.
+ */
 export default function PostFormat() {
 	const instanceId = useInstanceId( PostFormat );
 	const postFormatSelectorId = `post-format-selector-${ instanceId }`;
@@ -69,8 +74,7 @@ export default function PostFormat() {
 			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
-	const suggestion = find(
-		formats,
+	const suggestion = formats.find(
 		( format ) => format.id === suggestedFormat
 	);
 
@@ -81,19 +85,22 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<SelectControl
+				<RadioControl
+					className="editor-post-format__options"
 					label={ __( 'Post Format' ) }
-					value={ postFormat }
+					selected={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
 					id={ postFormatSelectorId }
 					options={ formats.map( ( format ) => ( {
 						label: format.caption,
 						value: format.id,
 					} ) ) }
+					hideLabelFromVision
 				/>
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">
 						<Button
+							__next40pxDefaultSize
 							variant="link"
 							onClick={ () =>
 								onUpdatePostFormat( suggestion.id )
diff --git a/packages/editor/src/components/post-format/panel.js b/packages/editor/src/components/post-format/panel.js
new file mode 100644
index 00000000000000..18704eda6fc448
--- /dev/null
+++ b/packages/editor/src/components/post-format/panel.js
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { default as PostFormatForm, POST_FORMATS } from './';
+import PostFormatCheck from './check';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostFormat() {
+	const { postFormat } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const _postFormat = getEditedPostAttribute( 'format' );
+		return {
+			postFormat: _postFormat ?? 'standard',
+		};
+	}, [] );
+	const activeFormat = POST_FORMATS.find(
+		( format ) => format.id === postFormat
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+	return (
+		<PostFormatCheck>
+			<PostPanelRow label={ __( 'Format' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-format__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Current post format.
+								__( 'Change format: %s' ),
+								activeFormat?.caption
+							) }
+							onClick={ onToggle }
+						>
+							{ activeFormat?.caption }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-format__dialog-content">
+							<InspectorPopoverHeader
+								title={ __( 'Format' ) }
+								onClose={ onClose }
+							/>
+							<PostFormatForm />
+						</div>
+					) }
+				/>
+			</PostPanelRow>
+		</PostFormatCheck>
+	);
+}
+
+export default PostFormat;
diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss
index 09fb0f11b9f949..9c893f36bcc16c 100644
--- a/packages/editor/src/components/post-format/style.scss
+++ b/packages/editor/src/components/post-format/style.scss
@@ -1,3 +1,9 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.editor-post-format__dialog .editor-post-format__dialog-content {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
diff --git a/packages/editor/src/components/post-last-edited-panel/index.js b/packages/editor/src/components/post-last-edited-panel/index.js
new file mode 100644
index 00000000000000..a9797747876fb0
--- /dev/null
+++ b/packages/editor/src/components/post-last-edited-panel/index.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { humanTimeDiff } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostLastEditedPanel() {
+	const modified = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'modified' ),
+		[]
+	);
+	const lastEditedText =
+		modified &&
+		sprintf(
+			// translators: %s: Human-readable time difference, e.g. "2 days ago".
+			__( 'Last edited %s.' ),
+			humanTimeDiff( modified )
+		);
+	if ( ! lastEditedText ) {
+		return null;
+	}
+	return (
+		<div className="editor-post-last-edited-panel">
+			<Text>{ lastEditedText }</Text>
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/post-last-edited-panel/style.scss b/packages/editor/src/components/post-last-edited-panel/style.scss
new file mode 100644
index 00000000000000..01392fe7c8fcd8
--- /dev/null
+++ b/packages/editor/src/components/post-last-edited-panel/style.scss
@@ -0,0 +1,6 @@
+.editor-post-last-edited-panel {
+	color: $gray-700;
+	& .components-text {
+		color: inherit;
+	}
+}
diff --git a/packages/editor/src/components/post-last-revision/check.js b/packages/editor/src/components/post-last-revision/check.js
index eddb917db76d47..cb3c655e1b7cc3 100644
--- a/packages/editor/src/components/post-last-revision/check.js
+++ b/packages/editor/src/components/post-last-revision/check.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -9,11 +9,24 @@ import { withSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
-export function PostLastRevisionCheck( {
-	lastRevisionId,
-	revisionsCount,
-	children,
-} ) {
+/**
+ * Wrapper component that renders its children if the post has more than one revision.
+ *
+ * @param {Object}          props          Props.
+ * @param {React.ReactNode} props.children Children to be rendered.
+ *
+ * @return {React.ReactNode} Rendered child components if post has more than one revision, otherwise null.
+ */
+function PostLastRevisionCheck( { children } ) {
+	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
+		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+			select( editorStore );
+		return {
+			lastRevisionId: getCurrentPostLastRevisionId(),
+			revisionsCount: getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+
 	if ( ! lastRevisionId || revisionsCount < 2 ) {
 		return null;
 	}
@@ -25,11 +38,4 @@ export function PostLastRevisionCheck( {
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
-		select( editorStore );
-	return {
-		lastRevisionId: getCurrentPostLastRevisionId(),
-		revisionsCount: getCurrentPostRevisionsCount(),
-	};
-} )( PostLastRevisionCheck );
+export default PostLastRevisionCheck;
diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js
index 97434422b30f3d..ac25e6cb8f30d6 100644
--- a/packages/editor/src/components/post-last-revision/index.js
+++ b/packages/editor/src/components/post-last-revision/index.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, _n } from '@wordpress/i18n';
+import { sprintf, __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -11,34 +11,65 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import PostLastRevisionCheck from './check';
+import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
-function LastRevision( { lastRevisionId, revisionsCount } ) {
+function usePostLastRevisionInfo() {
+	return useSelect( ( select ) => {
+		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+			select( editorStore );
+		return {
+			lastRevisionId: getCurrentPostLastRevisionId(),
+			revisionsCount: getCurrentPostRevisionsCount(),
+		};
+	}, [] );
+}
+
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+
 	return (
 		<PostLastRevisionCheck>
 			<Button
+				__next40pxDefaultSize
 				href={ addQueryArgs( 'revision.php', {
 					revision: lastRevisionId,
-					gutenberg: true,
 				} ) }
 				className="editor-post-last-revision__title"
 				icon={ backup }
-			>
-				{ sprintf(
-					/* translators: %d: number of revisions */
-					_n( '%d Revision', '%d Revisions', revisionsCount ),
+				iconPosition="right"
+				text={ sprintf(
+					/* translators: %s: number of revisions. */
+					__( 'Revisions (%s)' ),
 					revisionsCount
 				) }
-			</Button>
+			/>
+		</PostLastRevisionCheck>
+	);
+}
+
+export function PrivatePostLastRevision() {
+	const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo();
+	return (
+		<PostLastRevisionCheck>
+			<PostPanelRow label={ __( 'Revisions' ) }>
+				<Button
+					href={ addQueryArgs( 'revision.php', {
+						revision: lastRevisionId,
+					} ) }
+					className="editor-private-post-last-revision__button"
+					text={ revisionsCount }
+					variant="tertiary"
+					size="compact"
+				/>
+			</PostPanelRow>
 		</PostLastRevisionCheck>
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
-		select( editorStore );
-	return {
-		lastRevisionId: getCurrentPostLastRevisionId(),
-		revisionsCount: getCurrentPostRevisionsCount(),
-	};
-} )( LastRevision );
+export default PostLastRevision;
diff --git a/packages/editor/src/components/post-last-revision/panel.js b/packages/editor/src/components/post-last-revision/panel.js
new file mode 100644
index 00000000000000..55a3ba571c4b0a
--- /dev/null
+++ b/packages/editor/src/components/post-last-revision/panel.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostLastRevision from './';
+import PostLastRevisionCheck from './check';
+
+/**
+ * Renders the panel for displaying the last revision of a post.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostLastRevisionPanel() {
+	return (
+		<PostLastRevisionCheck>
+			<PanelBody className="editor-post-last-revision__panel">
+				<PostLastRevision />
+			</PanelBody>
+		</PostLastRevisionCheck>
+	);
+}
+
+export default PostLastRevisionPanel;
diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss
index 7e4514aa2baca6..055ebc71b34e83 100644
--- a/packages/editor/src/components/post-last-revision/style.scss
+++ b/packages/editor/src/components/post-last-revision/style.scss
@@ -1,14 +1,11 @@
 .editor-post-last-revision__title {
 	width: 100%;
-	font-weight: 600;
-
-	.dashicon {
-		margin-right: 5px;
-	}
+	font-weight: 500;
 }
 
-.components-button.editor-post-last-revision__title {
+.editor-post-last-revision__title.components-button.has-icon {
 	height: 100%;
+	justify-content: space-between;
 
 	&:hover,
 	&:active {
@@ -21,3 +18,17 @@
 		border-radius: 0;
 	}
 }
+
+// Needs specificity, because this panel is just a button
+.components-panel__body.is-opened.editor-post-last-revision__panel {
+	padding: 0;
+	height: $grid-unit-60;
+
+	.editor-post-last-revision__title.components-button.components-button {
+		padding: $grid-unit-20;
+	}
+}
+
+.editor-private-post-last-revision__button {
+	display: inline-block;
+}
diff --git a/packages/editor/src/components/post-last-revision/test/check.js b/packages/editor/src/components/post-last-revision/test/check.js
index e6a08c738a95a4..0c3e680992a2e1 100644
--- a/packages/editor/src/components/post-last-revision/test/check.js
+++ b/packages/editor/src/components/post-last-revision/test/check.js
@@ -3,38 +3,54 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostLastRevisionCheck } from '../check';
+import PostLastRevisionCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupDataMock( id, count ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getCurrentPostLastRevisionId: () => id,
+			getCurrentPostRevisionsCount: () => count,
+			getEditedPostAttribute: () => null,
+			getPostType: () => ( {
+				supports: {
+					revisions: true,
+				},
+			} ),
+		} ) )
+	);
+}
 
 describe( 'PostLastRevisionCheck', () => {
 	it( 'should not render anything if the last revision ID is unknown', () => {
-		render(
-			<PostLastRevisionCheck revisionsCount={ 2 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( null, 2 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should not render anything if there is only one revision', () => {
-		render(
-			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 1 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( 1, 1 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.queryByText( 'Children' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if there are two revisions', () => {
-		render(
-			<PostLastRevisionCheck lastRevisionId={ 1 } revisionsCount={ 2 }>
-				Children
-			</PostLastRevisionCheck>
-		);
+		setupDataMock( 1, 2 );
+
+		render( <PostLastRevisionCheck>Children</PostLastRevisionCheck> );
 
 		expect( screen.getByText( 'Children' ) ).toBeVisible();
 	} );
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index e3af0f1a1f63d4..16cff5af976841 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -11,8 +6,7 @@ import {
 	Modal,
 	Button,
 	ExternalLink,
-	Flex,
-	FlexItem,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -26,6 +20,12 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * A modal component that is displayed when a post is locked for editing by another user.
+ * The modal provides information about the lock status and options to take over or exit the editor.
+ *
+ * @return {React.ReactNode} The rendered PostLockedModal component.
+ */
 export default function PostLockedModal() {
 	const instanceId = useInstanceId( PostLockedModal );
 	const hookName = 'core/editor/post-locked-modal-' + instanceId;
@@ -164,7 +164,7 @@ export default function PostLockedModal() {
 		_wpnonce: postLockUtils.nonce,
 	} );
 	const allPostsUrl = addQueryArgs( 'edit.php', {
-		post_type: get( postType, [ 'slug' ] ),
+		post_type: postType?.slug,
 	} );
 	const allPostsLabel = __( 'Exit editor' );
 	return (
@@ -174,61 +174,38 @@ export default function PostLockedModal() {
 					? __( 'Someone else has taken over this post' )
 					: __( 'This post is already being edited' )
 			}
-			focusOnMount={ true }
+			focusOnMount
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }
+			// Do not remove this class, as this class is used by third party plugins.
 			className="editor-post-locked-modal"
+			size="medium"
 		>
-			{ !! userAvatar && (
-				<img
-					src={ userAvatar }
-					alt={ __( 'Avatar' ) }
-					className="editor-post-locked-modal__avatar"
-					width={ 64 }
-					height={ 64 }
-				/>
-			) }
-			<div>
-				{ !! isTakeover && (
-					<p>
-						{ createInterpolateElement(
-							userDisplayName
-								? sprintf(
-										/* translators: %s: user's display name */
-										__(
-											'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
-										),
-										userDisplayName
-								  )
-								: __(
-										'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
-								  ),
-							{
-								strong: <strong />,
-								PreviewLink: (
-									<ExternalLink href={ previewLink }>
-										{ __( 'preview' ) }
-									</ExternalLink>
-								),
-							}
-						) }
-					</p>
+			<HStack alignment="top" spacing={ 6 }>
+				{ !! userAvatar && (
+					<img
+						src={ userAvatar }
+						alt={ __( 'Avatar' ) }
+						className="editor-post-locked-modal__avatar"
+						width={ 64 }
+						height={ 64 }
+					/>
 				) }
-				{ ! isTakeover && (
-					<>
+				<div>
+					{ !! isTakeover && (
 						<p>
 							{ createInterpolateElement(
 								userDisplayName
 									? sprintf(
 											/* translators: %s: user's display name */
 											__(
-												'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+												'<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 											),
 											userDisplayName
 									  )
 									: __(
-											'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+											'Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'
 									  ),
 								{
 									strong: <strong />,
@@ -240,33 +217,63 @@ export default function PostLockedModal() {
 								}
 							) }
 						</p>
-						<p>
-							{ __(
-								'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
-							) }
-						</p>
-					</>
-				) }
-
-				<Flex
-					className="editor-post-locked-modal__buttons"
-					justify="flex-end"
-					expanded={ false }
-				>
+					) }
 					{ ! isTakeover && (
-						<FlexItem>
-							<Button variant="tertiary" href={ unlockUrl }>
+						<>
+							<p>
+								{ createInterpolateElement(
+									userDisplayName
+										? sprintf(
+												/* translators: %s: user's display name */
+												__(
+													'<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+												),
+												userDisplayName
+										  )
+										: __(
+												'Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'
+										  ),
+									{
+										strong: <strong />,
+										PreviewLink: (
+											<ExternalLink href={ previewLink }>
+												{ __( 'preview' ) }
+											</ExternalLink>
+										),
+									}
+								) }
+							</p>
+							<p>
+								{ __(
+									'If you take over, the other user will lose editing control to the post, but their changes will be saved.'
+								) }
+							</p>
+						</>
+					) }
+
+					<HStack
+						className="editor-post-locked-modal__buttons"
+						justify="flex-end"
+					>
+						{ ! isTakeover && (
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								href={ unlockUrl }
+							>
 								{ __( 'Take over' ) }
 							</Button>
-						</FlexItem>
-					) }
-					<FlexItem>
-						<Button variant="primary" href={ allPostsUrl }>
+						) }
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							href={ allPostsUrl }
+						>
 							{ allPostsLabel }
 						</Button>
-					</FlexItem>
-				</Flex>
-			</div>
+					</HStack>
+				</div>
+			</HStack>
 		</Modal>
 	);
 }
diff --git a/packages/editor/src/components/post-locked-modal/style.scss b/packages/editor/src/components/post-locked-modal/style.scss
index b9c43f5184169f..7f680022344664 100644
--- a/packages/editor/src/components/post-locked-modal/style.scss
+++ b/packages/editor/src/components/post-locked-modal/style.scss
@@ -1,19 +1,9 @@
-.editor-post-locked-modal {
-	@include break-small() {
-		max-width: $break-mobile;
-	}
-
-	.components-modal__content {
-		display: flex;
-	}
-}
-
 .editor-post-locked-modal__buttons {
 	margin-top: $grid-unit-30;
 }
 
 .editor-post-locked-modal__avatar {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-round;
 	margin-top: $grid-unit-20;
-	margin-right: $grid-unit-30;
+	min-width: initial !important;
 }
diff --git a/packages/editor/src/components/post-panel-row/index.js b/packages/editor/src/components/post-panel-row/index.js
new file mode 100644
index 00000000000000..71dd63d3c0d956
--- /dev/null
+++ b/packages/editor/src/components/post-panel-row/index.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+
+const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
+	return (
+		<HStack
+			className={ clsx( 'editor-post-panel__row', className ) }
+			ref={ ref }
+		>
+			{ label && (
+				<div className="editor-post-panel__row-label">{ label }</div>
+			) }
+			<div className="editor-post-panel__row-control">{ children }</div>
+		</HStack>
+	);
+} );
+
+export default PostPanelRow;
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
new file mode 100644
index 00000000000000..53e0c645f6f069
--- /dev/null
+++ b/packages/editor/src/components/post-panel-row/style.scss
@@ -0,0 +1,38 @@
+.editor-post-panel__row {
+	width: 100%;
+	min-height: $grid-unit-40;
+	justify-content: flex-start !important;
+	align-items: flex-start !important;
+}
+
+.editor-post-panel__row-label {
+	width: 38%;
+	flex-shrink: 0;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
+}
+
+.editor-post-panel__row-control {
+	flex-grow: 1;
+	min-height: $grid-unit-40;
+	display: flex;
+	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		white-space: normal;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+		height: auto;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
+}
diff --git a/packages/editor/src/components/post-panel-section/index.js b/packages/editor/src/components/post-panel-section/index.js
new file mode 100644
index 00000000000000..3b27da874844bc
--- /dev/null
+++ b/packages/editor/src/components/post-panel-section/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+function PostPanelSection( { className, children } ) {
+	return (
+		<VStack className={ clsx( 'editor-post-panel__section', className ) }>
+			{ children }
+		</VStack>
+	);
+}
+
+export default PostPanelSection;
diff --git a/packages/editor/src/components/post-panel-section/style.scss b/packages/editor/src/components/post-panel-section/style.scss
new file mode 100644
index 00000000000000..6343386b0cfc1b
--- /dev/null
+++ b/packages/editor/src/components/post-panel-section/style.scss
@@ -0,0 +1,3 @@
+.editor-post-panel__section {
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/post-pending-status/check.js b/packages/editor/src/components/post-pending-status/check.js
index 70e374418e0b96..9f407d8c8cd82a 100644
--- a/packages/editor/src/components/post-pending-status/check.js
+++ b/packages/editor/src/components/post-pending-status/check.js
@@ -1,24 +1,34 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostPendingStatusCheck( {
-	hasPublishAction,
-	isPublished,
-	children,
-} ) {
+/**
+ * This component checks the publishing status of the current post.
+ * If the post is already published or the user doesn't have the
+ * capability to publish, it returns null.
+ *
+ * @param {Object}             props          Component properties.
+ * @param {React.ReactElement} props.children Children to be rendered.
+ *
+ * @return {React.ReactElement} The rendered child elements or null if the post is already published or the user doesn't have the capability to publish.
+ */
+export function PostPendingStatusCheck( { children } ) {
+	const { hasPublishAction, isPublished } = useSelect( ( select ) => {
+		const { isCurrentPostPublished, getCurrentPost } =
+			select( editorStore );
+		return {
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+			isPublished: isCurrentPostPublished(),
+		};
+	}, [] );
+
 	if ( isPublished || ! hasPublishAction ) {
 		return null;
 	}
@@ -26,18 +36,4 @@ export function PostPendingStatusCheck( {
 	return children;
 }
 
-export default compose(
-	withSelect( ( select ) => {
-		const { isCurrentPostPublished, getCurrentPostType, getCurrentPost } =
-			select( editorStore );
-		return {
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
-			isPublished: isCurrentPostPublished(),
-			postType: getCurrentPostType(),
-		};
-	} )
-)( PostPendingStatusCheck );
+export default PostPendingStatusCheck;
diff --git a/packages/editor/src/components/post-pending-status/index.js b/packages/editor/src/components/post-pending-status/index.js
index a51840d55d7bf8..352570c44a6630 100644
--- a/packages/editor/src/components/post-pending-status/index.js
+++ b/packages/editor/src/components/post-pending-status/index.js
@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,10 +11,20 @@ import { compose } from '@wordpress/compose';
 import PostPendingStatusCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostPendingStatus( { status, onUpdateStatus } ) {
+/**
+ * A component for displaying and toggling the pending status of a post.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export function PostPendingStatus() {
+	const status = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const togglePendingStatus = () => {
 		const updatedStatus = status === 'pending' ? 'draft' : 'pending';
-		onUpdateStatus( updatedStatus );
+		editPost( { status: updatedStatus } );
 	};
 
 	return (
@@ -30,13 +39,4 @@ export function PostPendingStatus( { status, onUpdateStatus } ) {
 	);
 }
 
-export default compose(
-	withSelect( ( select ) => ( {
-		status: select( editorStore ).getEditedPostAttribute( 'status' ),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		onUpdateStatus( status ) {
-			dispatch( editorStore ).editPost( { status } );
-		},
-	} ) )
-)( PostPendingStatus );
+export default PostPendingStatus;
diff --git a/packages/editor/src/components/post-pending-status/test/check.js b/packages/editor/src/components/post-pending-status/test/check.js
index 57bd0b12afc6c0..c5a338838dbdc9 100644
--- a/packages/editor/src/components/post-pending-status/test/check.js
+++ b/packages/editor/src/components/post-pending-status/test/check.js
@@ -3,27 +3,49 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import { PostPendingStatusCheck } from '../check';
 
+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;
+} );
+
+function setupUseSelectMock( hasPublishAction ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			isCurrentPostPublished: () => false,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
+
 describe( 'PostPendingStatusCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		render(
-			<PostPendingStatusCheck hasPublishAction={ false }>
-				status
-			</PostPendingStatusCheck>
-		);
+		setupUseSelectMock( false );
+
+		render( <PostPendingStatusCheck>status</PostPendingStatusCheck> );
+
 		expect( screen.queryByText( 'status' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostPendingStatusCheck hasPublishAction={ true }>
-				status
-			</PostPendingStatusCheck>
-		);
+		setupUseSelectMock( true );
+
+		render( <PostPendingStatusCheck>status</PostPendingStatusCheck> );
+
 		expect( screen.getByText( 'status' ) ).toBeVisible();
 	} );
 } );
diff --git a/packages/editor/src/components/post-pingbacks/index.js b/packages/editor/src/components/post-pingbacks/index.js
index b2274075f1fe4c..2ec9a4a78c54d6 100644
--- a/packages/editor/src/components/post-pingbacks/index.js
+++ b/packages/editor/src/components/post-pingbacks/index.js
@@ -2,39 +2,50 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { CheckboxControl, ExternalLink } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostPingbacks( { pingStatus = 'open', ...props } ) {
+function PostPingbacks() {
+	const pingStatus = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'ping_status' ) ??
+			'open',
+		[]
+	);
+	const { editPost } = useDispatch( editorStore );
 	const onTogglePingback = () =>
-		props.editPost( {
+		editPost( {
 			ping_status: pingStatus === 'open' ? 'closed' : 'open',
 		} );
 
 	return (
 		<CheckboxControl
 			__nextHasNoMarginBottom
-			label={ __( 'Allow pingbacks & trackbacks' ) }
+			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
+			help={
+				<ExternalLink
+					href={ __(
+						'https://wordpress.org/documentation/article/trackbacks-and-pingbacks/'
+					) }
+				>
+					{ __( 'Learn more about pingbacks & trackbacks' ) }
+				</ExternalLink>
+			}
 		/>
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			pingStatus:
-				select( editorStore ).getEditedPostAttribute( 'ping_status' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		editPost: dispatch( editorStore ).editPost,
-	} ) ),
-] )( PostPingbacks );
+/**
+ * Renders a control for enabling or disabling pingbacks and trackbacks
+ * in a WordPress post.
+ *
+ * @module PostPingbacks
+ */
+export default PostPingbacks;
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 2cdca7d98cfb24..d1755f96b68615 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Component, createRef, renderToString } from '@wordpress/element';
+import { renderToString } from '@wordpress/element';
 import { Button, Path, SVG, VisuallyHidden } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ifCondition, compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -106,48 +99,55 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
-export class PostPreviewButton extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.buttonRef = createRef();
-
-		this.openPreviewWindow = this.openPreviewWindow.bind( this );
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { previewLink } = this.props;
-		// This relies on the window being responsible to unset itself when
-		// navigation occurs or a new preview window is opened, to avoid
-		// unintentional forceful redirects.
-		if ( previewLink && ! prevProps.previewLink ) {
-			this.setPreviewWindowLink( previewLink );
-		}
-	}
-
-	/**
-	 * Sets the preview window's location to the given URL, if a preview window
-	 * exists and is not closed.
-	 *
-	 * @param {string} url URL to assign as preview window location.
-	 */
-	setPreviewWindowLink( url ) {
-		const { previewWindow } = this;
-
-		if ( previewWindow && ! previewWindow.closed ) {
-			previewWindow.location = url;
-			if ( this.buttonRef.current ) {
-				this.buttonRef.current.focus();
-			}
-		}
+/**
+ * Renders a button that opens a new window or tab for the preview,
+ * writes the interstitial message to this window, and then navigates
+ * to the actual preview link. The button is not rendered if the post
+ * is not viewable and disabled if the post is not saveable.
+ *
+ * @param {Object}   props                     The component props.
+ * @param {string}   props.className           The class name for the button.
+ * @param {string}   props.textContent         The text content for the button.
+ * @param {boolean}  props.forceIsAutosaveable Whether to force autosave.
+ * @param {string}   props.role                The role attribute for the button.
+ * @param {Function} props.onPreview           The callback function for preview event.
+ *
+ * @return {React.ReactNode} The rendered button component.
+ */
+export default function PostPreviewButton( {
+	className,
+	textContent,
+	forceIsAutosaveable,
+	role,
+	onPreview,
+} ) {
+	const { postId, currentPostLink, previewLink, isSaveable, isViewable } =
+		useSelect( ( select ) => {
+			const editor = select( editorStore );
+			const core = select( coreStore );
+
+			const postType = core.getPostType(
+				editor.getCurrentPostType( 'type' )
+			);
+
+			return {
+				postId: editor.getCurrentPostId(),
+				currentPostLink: editor.getCurrentPostAttribute( 'link' ),
+				previewLink: editor.getEditedPostPreviewLink(),
+				isSaveable: editor.isEditedPostSaveable(),
+				isViewable: postType?.viewable ?? false,
+			};
+		}, [] );
+
+	const { __unstableSaveForPreview } = useDispatch( editorStore );
+
+	if ( ! isViewable ) {
+		return null;
 	}
 
-	getWindowTarget() {
-		const { postId } = this.props;
-		return `wp-preview-${ postId }`;
-	}
+	const targetId = `wp-preview-${ postId }`;
 
-	openPreviewWindow( event ) {
+	const openPreviewWindow = async ( event ) => {
 		// Our Preview button has its 'href' and 'target' set correctly for a11y
 		// purposes. Unfortunately, though, we can't rely on the default 'click'
 		// handler since sometimes it incorrectly opens a new tab instead of reusing
@@ -156,117 +156,50 @@ export class PostPreviewButton extends Component {
 		event.preventDefault();
 
 		// Open up a Preview tab if needed. This is where we'll show the preview.
-		if ( ! this.previewWindow || this.previewWindow.closed ) {
-			this.previewWindow = window.open( '', this.getWindowTarget() );
-		}
+		const previewWindow = window.open( '', targetId );
 
 		// Focus the Preview tab. This might not do anything, depending on the browser's
 		// and user's preferences.
 		// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus
-		this.previewWindow.focus();
-
-		if (
-			// If we don't need to autosave the post before previewing, then we simply
-			// load the Preview URL in the Preview tab.
-			! this.props.isAutosaveable ||
-			// Do not save or overwrite the post, if the post is already locked.
-			this.props.isPostLocked
-		) {
-			this.setPreviewWindowLink( event.target.href );
-			return;
-		}
-
-		// Request an autosave. This happens asynchronously and causes the component
-		// to update when finished.
-		if ( this.props.isDraft ) {
-			this.props.savePost( { isPreview: true } );
-		} else {
-			this.props.autosave( { isPreview: true } );
-		}
-
-		// Display a 'Generating preview' message in the Preview tab while we wait for the
-		// autosave to finish.
-		writeInterstitialMessage( this.previewWindow.document );
-	}
-
-	render() {
-		const { previewLink, currentPostLink, isSaveable, role } = this.props;
-
-		// Link to the `?preview=true` URL if we have it, since this lets us see
-		// changes that were autosaved since the post was last published. Otherwise,
-		// just link to the post's URL.
-		const href = previewLink || currentPostLink;
-
-		const classNames = classnames(
-			{
-				'editor-post-preview': ! this.props.className,
-			},
-			this.props.className
-		);
-
-		return (
-			<Button
-				variant={ ! this.props.className ? 'tertiary' : undefined }
-				className={ classNames }
-				href={ href }
-				target={ this.getWindowTarget() }
-				disabled={ ! isSaveable }
-				onClick={ this.openPreviewWindow }
-				ref={ this.buttonRef }
-				role={ role }
-			>
-				{ this.props.textContent ? (
-					this.props.textContent
-				) : (
-					<>
-						{ _x( 'Preview', 'imperative verb' ) }
-						<VisuallyHidden as="span">
-							{
-								/* translators: accessibility text */
-								__( '(opens in a new tab)' )
-							}
-						</VisuallyHidden>
-					</>
-				) }
-			</Button>
-		);
-	}
+		previewWindow.focus();
+
+		writeInterstitialMessage( previewWindow.document );
+
+		const link = await __unstableSaveForPreview( { forceIsAutosaveable } );
+
+		previewWindow.location = link;
+
+		onPreview?.();
+	};
+
+	// Link to the `?preview=true` URL if we have it, since this lets us see
+	// changes that were autosaved since the post was last published. Otherwise,
+	// just link to the post's URL.
+	const href = previewLink || currentPostLink;
+
+	return (
+		<Button
+			variant={ ! className ? 'tertiary' : undefined }
+			className={ className || 'editor-post-preview' }
+			href={ href }
+			target={ targetId }
+			accessibleWhenDisabled
+			disabled={ ! isSaveable }
+			onClick={ openPreviewWindow }
+			role={ role }
+			size="compact"
+		>
+			{ textContent || (
+				<>
+					{ _x( 'Preview', 'imperative verb' ) }
+					<VisuallyHidden as="span">
+						{
+							/* translators: accessibility text */
+							__( '(opens in a new tab)' )
+						}
+					</VisuallyHidden>
+				</>
+			) }
+		</Button>
+	);
 }
-
-export default compose( [
-	withSelect( ( select, { forcePreviewLink, forceIsAutosaveable } ) => {
-		const {
-			getCurrentPostId,
-			getCurrentPostAttribute,
-			getEditedPostAttribute,
-			isEditedPostSaveable,
-			isEditedPostAutosaveable,
-			getEditedPostPreviewLink,
-			isPostLocked,
-		} = select( editorStore );
-		const { getPostType } = select( coreStore );
-
-		const previewLink = getEditedPostPreviewLink();
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-
-		return {
-			postId: getCurrentPostId(),
-			currentPostLink: getCurrentPostAttribute( 'link' ),
-			previewLink:
-				forcePreviewLink !== undefined ? forcePreviewLink : previewLink,
-			isSaveable: isEditedPostSaveable(),
-			isAutosaveable: forceIsAutosaveable || isEditedPostAutosaveable(),
-			isViewable: get( postType, [ 'viewable' ], false ),
-			isDraft:
-				[ 'draft', 'auto-draft' ].indexOf(
-					getEditedPostAttribute( 'status' )
-				) !== -1,
-			isPostLocked: isPostLocked(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		autosave: dispatch( editorStore ).autosave,
-		savePost: dispatch( editorStore ).savePost,
-	} ) ),
-	ifCondition( ( { isViewable } ) => isViewable ),
-] )( PostPreviewButton );
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..bb51f302edf50e 100644
--- a/packages/editor/src/components/post-preview-button/test/index.js
+++ b/packages/editor/src/components/post-preview-button/test/index.js
@@ -4,10 +4,39 @@
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostPreviewButton } from '../';
+import PostPreviewButton from '..';
+
+jest.useRealTimers();
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch/use-dispatch', () =>
+	jest.fn()
+);
+
+function mockUseSelect( overrides ) {
+	useSelect.mockImplementation( ( map ) =>
+		map( () => ( {
+			getPostType: () => ( { viewable: true } ),
+			getCurrentPostId: () => 123,
+			getCurrentPostType: () => 'post',
+			getCurrentPostAttribute: () => undefined,
+			getEditedPostPreviewLink: () => undefined,
+			isEditedPostSaveable: () => false,
+			...overrides,
+		} ) )
+	);
+	useDispatch.mockImplementation( () => ( {
+		__unstableSaveForPreview: () => Promise.resolve(),
+	} ) );
+}
 
 describe( 'PostPreviewButton', () => {
 	const documentWrite = jest.fn();
@@ -42,33 +71,39 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render with `editor-post-preview` class if no `className` is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toHaveClass(
-			'editor-post-preview'
-		);
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveClass( 'editor-post-preview' );
 	} );
 
 	it( 'should render with a custom class and not `editor-post-preview` if `className` is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton className="foo-bar" /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).toHaveClass( 'foo-bar' );
 		expect( button ).not.toHaveClass( 'editor-post-preview' );
 	} );
 
 	it( 'should render a tertiary button if no classname is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-tertiary' );
+		const button = screen.getByRole( 'button' );
+		expect( button ).toHaveClass( 'is-tertiary' );
 	} );
 
 	it( 'should render the button in its default variant if a custom classname is specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton className="foo-bar" /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).not.toHaveClass( 'is-primary' );
 		expect( button ).not.toHaveClass( 'is-secondary' );
 		expect( button ).not.toHaveClass( 'is-tertiary' );
@@ -76,12 +111,13 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render `textContent` if specified.', () => {
+		mockUseSelect();
+
 		const textContent = 'Foo bar';
 
 		render( <PostPreviewButton textContent={ textContent } /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( button ).toHaveTextContent( textContent );
 		expect(
 			within( button ).queryByText( 'Preview' )
@@ -92,223 +128,121 @@ describe( 'PostPreviewButton', () => {
 	} );
 
 	it( 'should render `Preview` with accessibility text if `textContent` not specified.', () => {
+		mockUseSelect();
+
 		render( <PostPreviewButton /> );
 
 		const button = screen.getByRole( 'button' );
-
 		expect( within( button ).getByText( 'Preview' ) ).toBeVisible();
 		expect(
 			within( button ).getByText( '(opens in a new tab)' )
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', async () => {
-		render( <PostPreviewButton isSaveable={ false } postId={ 123 } /> );
+	it( 'should be accessibly disabled if post is not saveable.', () => {
+		mockUseSelect( { isEditedPostSaveable: () => false } );
+
+		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
-	it( 'should not be disabled if post is saveable.', async () => {
-		render( <PostPreviewButton isSaveable postId={ 123 } /> );
+	it( 'should not be disabled if post is saveable.', () => {
+		mockUseSelect( { isEditedPostSaveable: () => true } );
+
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
-	it( 'should set `href` to `previewLink` if `previewLink` is specified.', async () => {
+	it( 'should set `href` to edited post preview link if specified.', () => {
 		const url = 'https://wordpress.org';
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => url,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton isSaveable postId={ 123 } previewLink={ url } />
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
 	} );
 
-	it( 'should set `href` to `currentPostLink` if `currentPostLink` is specified.', async () => {
+	it( 'should set `href` to current post link if specified.', () => {
 		const url = 'https://wordpress.org';
+		mockUseSelect( {
+			getCurrentPostAttribute: () => url,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ 123 }
-				currentPostLink={ url }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url );
 	} );
 
-	it( 'should prioritize `previewLink` if both `previewLink` and `currentPostLink` are specified.', async () => {
+	it( 'should prioritize preview link if both preview link and link attribute are specified.', () => {
 		const url1 = 'https://wordpress.org';
 		const url2 = 'https://wordpress.com';
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => url1,
+			getCurrentPostAttribute: () => url2,
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ 123 }
-				previewLink={ url1 }
-				currentPostLink={ url2 }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute( 'href', url1 );
 	} );
 
-	it( 'should properly set target to `wp-preview-${ postId }`.', async () => {
-		const postId = 123;
-		const url = 'https://wordpress.org';
+	it( 'should properly set link target', () => {
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
+		} );
 
-		render(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'link' ) ).toHaveAttribute(
 			'target',
-			`wp-preview-${ postId }`
-		);
-	} );
-
-	it( 'should save post if `isDraft` is `true`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
-
-		expect( savePost ).toHaveBeenCalledWith(
-			expect.objectContaining( { isPreview: true } )
-		);
-		expect( autosave ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should autosave post if `isDraft` is `false`', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft={ false }
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
-
-		expect( savePost ).not.toHaveBeenCalled();
-		expect( autosave ).toHaveBeenCalledWith(
-			expect.objectContaining( { isPreview: true } )
+			'wp-preview-123'
 		);
 	} );
 
 	it( 'should open a window with the specified target', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
+		const user = userEvent.setup();
+
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
 		} );
-		const postId = 123;
-		const url = 'https://wordpress.org';
 
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
 		await user.click( screen.getByRole( 'link' ) );
 
-		expect( global.open ).toHaveBeenCalledWith(
-			'',
-			`wp-preview-${ postId }`
-		);
+		expect( global.open ).toHaveBeenCalledWith( '', 'wp-preview-123' );
 	} );
 
-	it( 'should set the location in the window properly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const postId = 123;
-		const url = 'https://wordpress.org';
-
-		const { rerender } = render(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'button' ) );
+	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
+		const user = userEvent.setup();
 
-		expect( setLocation ).toHaveBeenCalledWith( undefined );
+		mockUseSelect( {
+			getEditedPostPreviewLink: () => 'https://wordpress.org',
+			isEditedPostSaveable: () => true,
+		} );
 
-		rerender(
-			<PostPreviewButton
-				isSaveable
-				postId={ postId }
-				previewLink={ url }
-				savePost={ jest.fn() }
-				autosave={ jest.fn() }
-			/>
-		);
+		render( <PostPreviewButton /> );
 
-		expect( setLocation ).toHaveBeenCalledWith( url );
-	} );
+		await user.click( screen.getByRole( 'link' ) );
 
-	it( 'should display a `Generating preview` message while waiting for autosaving', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
 		const previewText = 'Generating preview…';
-		const url = 'https://wordpress.org';
-		const savePost = jest.fn();
-		const autosave = jest.fn();
-
-		render(
-			<PostPreviewButton
-				isAutosaveable
-				isSaveable
-				isDraft={ false }
-				postId={ 123 }
-				previewLink={ url }
-				savePost={ savePost }
-				autosave={ autosave }
-			/>
-		);
-
-		await user.click( screen.getByRole( 'link' ) );
 
 		expect( documentWrite ).toHaveBeenCalledWith(
 			expect.stringContaining( previewText )
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 73254e99e9556e..4dcd5592d01cb1 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -24,7 +17,6 @@ const noop = () => {};
 export class PostPublishButton extends Component {
 	constructor( props ) {
 		super( props );
-		this.buttonNode = createRef();
 
 		this.createOnClick = this.createOnClick.bind( this );
 		this.closeEntitiesSavedStates =
@@ -35,21 +27,6 @@ export class PostPublishButton extends Component {
 		};
 	}
 
-	componentDidMount() {
-		if ( this.props.focusOnMount ) {
-			// This timeout is necessary to make sure the `useEffect` hook of
-			// `useFocusReturn` gets the correct element (the button that opens the
-			// PostPublishPanel) otherwise it will get this button.
-			this.timeoutID = setTimeout( () => {
-				this.buttonNode.current.focus();
-			}, 0 );
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeoutID );
-	}
-
 	createOnClick( callback ) {
 		return ( ...args ) => {
 			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
@@ -103,7 +80,6 @@ export class PostPublishButton extends Component {
 	render() {
 		const {
 			forceIsDirty,
-			forceIsSaving,
 			hasPublishAction,
 			isBeingScheduled,
 			isOpen,
@@ -114,18 +90,18 @@ export class PostPublishButton extends Component {
 			isSaving,
 			isAutoSaving,
 			isToggle,
-			onSave,
-			onStatusChange,
+			savePostStatus,
 			onSubmit = noop,
 			onToggle,
 			visibility,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			postStatus,
+			postStatusHasChanged,
 		} = this.props;
 
 		const isButtonDisabled =
 			( isSaving ||
-				forceIsSaving ||
 				! isSaveable ||
 				isPostSavingLocked ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
@@ -134,20 +110,23 @@ export class PostPublishButton extends Component {
 		const isToggleDisabled =
 			( isPublished ||
 				isSaving ||
-				forceIsSaving ||
 				! isSaveable ||
 				( ! isPublishable && ! forceIsDirty ) ) &&
 			( ! hasNonPostEntityChanges || isSavingNonPostEntityChanges );
 
-		let publishStatus;
-		if ( ! hasPublishAction ) {
+		// If the new status has not changed explicitely, we derive it from
+		// other factors, like having a publish action, etc.. We need to preserve
+		// this because it affects when to show the pre and post publish panels.
+		// If it has changed though explicitely, we need to respect that.
+		let publishStatus = 'publish';
+		if ( postStatusHasChanged ) {
+			publishStatus = postStatus;
+		} else if ( ! hasPublishAction ) {
 			publishStatus = 'pending';
 		} else if ( visibility === 'private' ) {
 			publishStatus = 'private';
 		} else if ( isBeingScheduled ) {
 			publishStatus = 'future';
-		} else {
-			publishStatus = 'publish';
 		}
 
 		const onClickButton = () => {
@@ -155,10 +134,10 @@ export class PostPublishButton extends Component {
 				return;
 			}
 			onSubmit();
-			onStatusChange( publishStatus );
-			onSave();
+			savePostStatus( publishStatus );
 		};
 
+		// Callback to open the publish panel.
 		const onClickToggle = () => {
 			if ( isToggleDisabled ) {
 				return;
@@ -169,9 +148,10 @@ export class PostPublishButton extends Component {
 		const buttonProps = {
 			'aria-disabled': isButtonDisabled,
 			className: 'editor-post-publish-button',
-			isBusy: ! isAutoSaving && isSaving && isPublished,
+			isBusy: ! isAutoSaving && isSaving,
 			variant: 'primary',
 			onClick: this.createOnClick( onClickButton ),
+			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
 		};
 
 		const toggleProps = {
@@ -180,41 +160,28 @@ export class PostPublishButton extends Component {
 			className: 'editor-post-publish-panel__toggle',
 			isBusy: isSaving && isPublished,
 			variant: 'primary',
+			size: 'compact',
 			onClick: this.createOnClick( onClickToggle ),
+			'aria-haspopup': hasNonPostEntityChanges ? 'dialog' : undefined,
 		};
-
-		const toggleChildren = isBeingScheduled
-			? __( 'Schedule…' )
-			: __( 'Publish' );
-		const buttonChildren = (
-			<PublishButtonLabel
-				forceIsSaving={ forceIsSaving }
-				hasNonPostEntityChanges={ hasNonPostEntityChanges }
-			/>
-		);
-
 		const componentProps = isToggle ? toggleProps : buttonProps;
-		const componentChildren = isToggle ? toggleChildren : buttonChildren;
 		return (
 			<>
 				<Button
-					ref={ this.buttonNode }
 					{ ...componentProps }
-					className={ classnames(
-						componentProps.className,
-						'editor-post-publish-button__button',
-						{
-							'has-changes-dot': hasNonPostEntityChanges,
-						}
-					) }
+					className={ `${ componentProps.className } editor-post-publish-button__button` }
+					size="compact"
 				>
-					{ componentChildren }
+					<PublishButtonLabel />
 				</Button>
 			</>
 		);
 	}
 }
 
+/**
+ * Renders the publish button.
+ */
 export default compose( [
 	withSelect( ( select ) => {
 		const {
@@ -231,24 +198,24 @@ export default compose( [
 			getCurrentPostId,
 			hasNonPostEntityChanges,
 			isSavingNonPostEntityChanges,
+			getEditedPostAttribute,
+			getPostEdits,
 		} = select( editorStore );
-		const _isAutoSaving = isAutosavingPost();
 		return {
-			isSaving: isSavingPost() || _isAutoSaving,
-			isAutoSaving: _isAutoSaving,
+			isSaving: isSavingPost(),
+			isAutoSaving: isAutosavingPost(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			visibility: getEditedPostVisibility(),
 			isSaveable: isEditedPostSaveable(),
 			isPostSavingLocked: isPostSavingLocked(),
 			isPublishable: isEditedPostPublishable(),
 			isPublished: isCurrentPostPublished(),
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			postId: getCurrentPostId(),
+			postStatus: getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
@@ -256,9 +223,10 @@ export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { editPost, savePost } = dispatch( editorStore );
 		return {
-			onStatusChange: ( status ) =>
-				editPost( { status }, { undoIgnore: true } ),
-			onSave: savePost,
+			savePostStatus: ( status ) => {
+				editPost( { status }, { undoIgnore: true } );
+				savePost();
+			},
 		};
 	} ),
 ] )( PostPublishButton );
diff --git a/packages/editor/src/components/post-publish-button/label.js b/packages/editor/src/components/post-publish-button/label.js
index db26da73037bb9..7eb479bc2c8d07 100644
--- a/packages/editor/src/components/post-publish-button/label.js
+++ b/packages/editor/src/components/post-publish-button/label.js
@@ -1,55 +1,33 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PublishButtonLabel( {
-	isPublished,
-	isBeingScheduled,
-	isSaving,
-	isPublishing,
-	hasPublishAction,
-	isAutosaving,
-	hasNonPostEntityChanges,
-} ) {
-	if ( isPublishing ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Publishing…' );
-	} else if ( isPublished && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Updating…' );
-	} else if ( isBeingScheduled && isSaving && ! isAutosaving ) {
-		/* translators: button label text should, if possible, be under 16 characters. */
-		return __( 'Scheduling…' );
-	}
-
-	if ( ! hasPublishAction ) {
-		return hasNonPostEntityChanges
-			? __( 'Submit for Review…' )
-			: __( 'Submit for Review' );
-	} else if ( isPublished ) {
-		return hasNonPostEntityChanges ? __( 'Update…' ) : __( 'Update' );
-	} else if ( isBeingScheduled ) {
-		return hasNonPostEntityChanges ? __( 'Schedule…' ) : __( 'Schedule' );
-	}
-
-	return __( 'Publish' );
-}
-
-export default compose( [
-	withSelect( ( select, { forceIsSaving } ) => {
+/**
+ * Renders the label for the publish button.
+ *
+ * @return {string} The label for the publish button.
+ */
+export default function PublishButtonLabel() {
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	const {
+		isPublished,
+		isBeingScheduled,
+		isSaving,
+		isPublishing,
+		hasPublishAction,
+		isAutosaving,
+		hasNonPostEntityChanges,
+		postStatusHasChanged,
+		postStatus,
+	} = useSelect( ( select ) => {
 		const {
 			isCurrentPostPublished,
 			isEditedPostBeingScheduled,
@@ -58,19 +36,53 @@ export default compose( [
 			getCurrentPost,
 			getCurrentPostType,
 			isAutosavingPost,
+			getPostEdits,
+			getEditedPostAttribute,
 		} = select( editorStore );
 		return {
 			isPublished: isCurrentPostPublished(),
 			isBeingScheduled: isEditedPostBeingScheduled(),
-			isSaving: forceIsSaving || isSavingPost(),
+			isSaving: isSavingPost(),
 			isPublishing: isPublishingPost(),
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			postType: getCurrentPostType(),
 			isAutosaving: isAutosavingPost(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
+			postStatusHasChanged: !! getPostEdits()?.status,
+			postStatus: getEditedPostAttribute( 'status' ),
 		};
-	} ),
-] )( PublishButtonLabel );
+	}, [] );
+	if ( isPublishing ) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Publishing…' );
+	} else if (
+		( isPublished || isBeingScheduled ) &&
+		isSaving &&
+		! isAutosaving
+	) {
+		/* translators: button label text should, if possible, be under 16 characters. */
+		return __( 'Saving…' );
+	}
+	if ( ! hasPublishAction ) {
+		// TODO: this is because "Submit for review" string is too long in some languages.
+		// @see https://github.com/WordPress/gutenberg/issues/10475
+		return isSmallerThanMediumViewport
+			? __( 'Publish' )
+			: __( 'Submit for Review' );
+	}
+	if (
+		hasNonPostEntityChanges ||
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( ! postStatusHasChanged && postStatus === 'future' )
+	) {
+		return __( 'Save' );
+	}
+	if ( isBeingScheduled ) {
+		return __( 'Schedule' );
+	}
+	return __( 'Publish' );
+}
diff --git a/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js b/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js
new file mode 100644
index 00000000000000..c3a355d243f345
--- /dev/null
+++ b/packages/editor/src/components/post-publish-button/post-publish-button-or-toggle.js
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostPublishButton from './index';
+import { store as editorStore } from '../../store';
+
+const IS_TOGGLE = 'toggle';
+const IS_BUTTON = 'button';
+
+export default function PostPublishButtonOrToggle( {
+	forceIsDirty,
+	setEntitiesSavedStatesCallback,
+} ) {
+	let component;
+	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
+	const { togglePublishSidebar } = useDispatch( editorStore );
+	const {
+		hasPublishAction,
+		isBeingScheduled,
+		isPending,
+		isPublished,
+		isPublishSidebarEnabled,
+		isPublishSidebarOpened,
+		isScheduled,
+		postStatus,
+		postStatusHasChanged,
+	} = useSelect( ( select ) => {
+		return {
+			hasPublishAction:
+				!! select( editorStore ).getCurrentPost()?._links?.[
+					'wp:action-publish'
+				] ?? false,
+			isBeingScheduled:
+				select( editorStore ).isEditedPostBeingScheduled(),
+			isPending: select( editorStore ).isCurrentPostPending(),
+			isPublished: select( editorStore ).isCurrentPostPublished(),
+			isPublishSidebarEnabled:
+				select( editorStore ).isPublishSidebarEnabled(),
+			isPublishSidebarOpened:
+				select( editorStore ).isPublishSidebarOpened(),
+			isScheduled: select( editorStore ).isCurrentPostScheduled(),
+			postStatus:
+				select( editorStore ).getEditedPostAttribute( 'status' ),
+			postStatusHasChanged: select( editorStore ).getPostEdits()?.status,
+		};
+	}, [] );
+
+	/**
+	 * Conditions to show a BUTTON (publish directly) or a TOGGLE (open publish sidebar):
+	 *
+	 * 1) We want to show a BUTTON when the post status is at the _final stage_
+	 * for a particular role (see https://wordpress.org/documentation/article/post-status/):
+	 *
+	 * - is published
+	 * - post status has changed explicitely to something different than 'future' or 'publish'
+	 * - is scheduled to be published
+	 * - is pending and can't be published (but only for viewports >= medium).
+	 * 	 Originally, we considered showing a button for pending posts that couldn't be published
+	 * 	 (for example, for an author with the contributor role). Some languages can have
+	 * 	 long translations for "Submit for review", so given the lack of UI real estate available
+	 * 	 we decided to take into account the viewport in that case.
+	 *  	 See: https://github.com/WordPress/gutenberg/issues/10475
+	 *
+	 * 2) Then, in small viewports, we'll show a TOGGLE.
+	 *
+	 * 3) Finally, we'll use the publish sidebar status to decide:
+	 *
+	 * - if it is enabled, we show a TOGGLE
+	 * - if it is disabled, we show a BUTTON
+	 */
+	if (
+		isPublished ||
+		( postStatusHasChanged &&
+			! [ 'future', 'publish' ].includes( postStatus ) ) ||
+		( isScheduled && isBeingScheduled ) ||
+		( isPending && ! hasPublishAction && ! isSmallerThanMediumViewport )
+	) {
+		component = IS_BUTTON;
+	} else if ( isSmallerThanMediumViewport || isPublishSidebarEnabled ) {
+		component = IS_TOGGLE;
+	} else {
+		component = IS_BUTTON;
+	}
+
+	return (
+		<PostPublishButton
+			forceIsDirty={ forceIsDirty }
+			isOpen={ isPublishSidebarOpened }
+			isToggle={ component === IS_TOGGLE }
+			onToggle={ togglePublishSidebar }
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/post-publish-button/style.scss b/packages/editor/src/components/post-publish-button/style.scss
deleted file mode 100644
index 11aed2ab58e3ed..00000000000000
--- a/packages/editor/src/components/post-publish-button/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.editor-post-publish-button__button.has-changes-dot::before {
-	background: currentcolor;
-	border-radius: 4px;
-	content: "";
-	height: 8px;
-	margin: auto 5px auto -3px;
-	width: 8px;
-}
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..e7a0465950cb85 100644
--- a/packages/editor/src/components/post-publish-button/test/index.js
+++ b/packages/editor/src/components/post-publish-button/test/index.js
@@ -19,16 +19,6 @@ describe( 'PostPublishButton', () => {
 			).toHaveAttribute( 'aria-disabled', 'true' );
 		} );
 
-		it( 'should be true if forceIsSaving is true', () => {
-			render(
-				<PostPublishButton isPublishable isSaveable forceIsSaving />
-			);
-
-			expect(
-				screen.getByRole( 'button', { name: 'Submit for Review' } )
-			).toHaveAttribute( 'aria-disabled', 'true' );
-		} );
-
 		it( 'should be true if post is not publishable and not forceIsDirty', () => {
 			render(
 				<PostPublishButton
@@ -90,16 +80,12 @@ describe( 'PostPublishButton', () => {
 
 	describe( 'publish status', () => {
 		it( 'should be pending for contributor', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const user = userEvent.setup();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction={ false }
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -109,20 +95,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'pending' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'pending' );
 		} );
 
 		it( 'should be future for scheduled post', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const user = userEvent.setup();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isBeingScheduled
 					isSaveable
 					isPublishable
@@ -133,20 +115,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'future' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'future' );
 		} );
 
 		it( 'should be private for private visibility', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const user = userEvent.setup();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					visibility="private"
 					isSaveable
 					isPublishable
@@ -157,20 +135,16 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'private' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'private' );
 		} );
 
 		it( 'should be publish otherwise', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const user = userEvent.setup();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -180,22 +154,18 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 
 	describe( 'click', () => {
 		it( 'should save with status', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-			const onStatusChange = jest.fn();
-			const onSave = jest.fn();
+			const user = userEvent.setup();
+			const savePostStatus = jest.fn();
 			render(
 				<PostPublishButton
 					hasPublishAction
-					onStatusChange={ onStatusChange }
-					onSave={ onSave }
+					savePostStatus={ savePostStatus }
 					isSaveable
 					isPublishable
 				/>
@@ -205,8 +175,7 @@ describe( 'PostPublishButton', () => {
 				screen.getByRole( 'button', { name: 'Submit for Review' } )
 			);
 
-			expect( onStatusChange ).toHaveBeenCalledWith( 'publish' );
-			expect( onSave ).toHaveBeenCalled();
+			expect( savePostStatus ).toHaveBeenCalledWith( 'publish' );
 		} );
 	} );
 
diff --git a/packages/editor/src/components/post-publish-button/test/label.js b/packages/editor/src/components/post-publish-button/test/label.js
index 5990e94e36282d..0879479f6f2e3e 100644
--- a/packages/editor/src/components/post-publish-button/test/label.js
+++ b/packages/editor/src/components/post-publish-button/test/label.js
@@ -1,67 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PublishButtonLabel } from '../label';
+import PublishButtonLabel from '../label';
+
+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;
+} );
 
 describe( 'PublishButtonLabel', () => {
 	it( 'should show publishing if publishing in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublishing: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publishing…' );
 	} );
 
-	it( 'should show updating if published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if published and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Updating…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
-	it( 'should show scheduling if scheduled and saving in progress', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show saving if scheduled and saving in progress', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
 			isSaving: true,
-		} );
-		expect( label ).toBe( 'Scheduling…' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Saving…' );
 	} );
 
 	it( 'should show publish if not published and saving in progress', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: false,
 			isSaving: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 
 	it( 'should show submit for review for contributor', () => {
-		const label = PublishButtonLabel( { hasPublishAction: false } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: false,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Submit for Review' );
 	} );
 
-	it( 'should show update for already published', () => {
-		const label = PublishButtonLabel( {
+	it( 'should show save for already published', () => {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isPublished: true,
-		} );
-		expect( label ).toBe( 'Update' );
+		} ) );
+		const label = PublishButtonLabel();
+		expect( label ).toBe( 'Save' );
 	} );
 
 	it( 'should show schedule for scheduled', () => {
-		const label = PublishButtonLabel( {
+		useSelect.mockImplementation( () => ( {
 			hasPublishAction: true,
 			isBeingScheduled: true,
-		} );
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Schedule' );
 	} );
 
 	it( 'should show publish otherwise', () => {
-		const label = PublishButtonLabel( { hasPublishAction: true } );
+		useSelect.mockImplementation( () => ( {
+			hasPublishAction: true,
+		} ) );
+		const label = PublishButtonLabel();
 		expect( label ).toBe( 'Publish' );
 	} );
 } );
diff --git a/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js b/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js
new file mode 100644
index 00000000000000..a8fa8b72db9c7b
--- /dev/null
+++ b/packages/editor/src/components/post-publish-button/test/post-publish-button-or-toggle.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostPublishButtonOrToggle from '../post-publish-button-or-toggle';
+
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match' );
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+describe( 'PostPublishButtonOrToggle should render a', () => {
+	afterEach( () => {
+		useViewportMatch.mockRestore();
+	} );
+
+	it( 'button when the post is published (1)', () => {
+		useSelect.mockImplementation( () => ( {
+			isPublished: true,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is scheduled (2)', () => {
+		useSelect.mockImplementation( () => ( {
+			isScheduled: true,
+			isBeingScheduled: true,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when the post is pending and cannot be published but the viewport is >= medium (3)', () => {
+		useSelect.mockImplementation( () => ( {
+			isPending: true,
+			hasPublishAction: false,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+
+	it( 'toggle when post is not (1), (2), (3), the viewport is <= medium, and the publish sidebar is enabled', () => {
+		useViewportMatch.mockReturnValue( true );
+		useSelect.mockImplementation( () => ( {
+			isPublishSidebarEnabled: true,
+		} ) );
+		render( <PostPublishButtonOrToggle isPublishSidebarEnabled /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Publish' } )
+		).toBeVisible();
+	} );
+
+	it( 'button when post is not (1), (2), (3), the viewport is >= medium, and the publish sidebar is disabled', () => {
+		useSelect.mockImplementation( () => ( {
+			isPublishSidebarEnabled: false,
+		} ) );
+		render( <PostPublishButtonOrToggle /> );
+		expect(
+			screen.getByRole( 'button', { name: 'Submit for Review' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index c9583254f73597..1fd36f9f69d7a2 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import {
 	Button,
 	Spinner,
@@ -32,15 +27,30 @@ export class PostPublishPanel extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onSubmit = this.onSubmit.bind( this );
+		this.cancelButtonNode = createRef();
+	}
+
+	componentDidMount() {
+		// This timeout is necessary to make sure the `useEffect` hook of
+		// `useFocusReturn` gets the correct element (the button that opens the
+		// PostPublishPanel) otherwise it will get this button.
+		this.timeoutID = setTimeout( () => {
+			this.cancelButtonNode.current.focus();
+		}, 0 );
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
 	}
 
 	componentDidUpdate( prevProps ) {
 		// Automatically collapse the publish sidebar when a post
 		// is published and the user makes an edit.
 		if (
-			prevProps.isPublished &&
-			! this.props.isSaving &&
-			this.props.isDirty
+			( prevProps.isPublished &&
+				! this.props.isSaving &&
+				this.props.isDirty ) ||
+			this.props.currentPostId !== prevProps.currentPostId
 		) {
 			this.props.onClose();
 		}
@@ -56,7 +66,6 @@ export class PostPublishPanel extends Component {
 	render() {
 		const {
 			forceIsDirty,
-			forceIsSaving,
 			isBeingScheduled,
 			isPublished,
 			isPublishSidebarEnabled,
@@ -67,6 +76,7 @@ export class PostPublishPanel extends Component {
 			onTogglePublishSidebar,
 			PostPublishExtension,
 			PrePublishExtension,
+			currentPostId,
 			...additionalProps
 		} = this.props;
 		const {
@@ -84,29 +94,31 @@ export class PostPublishPanel extends Component {
 				<div className="editor-post-publish-panel__header">
 					{ isPostPublish ? (
 						<Button
+							size="compact"
 							onClick={ onClose }
 							icon={ closeSmall }
 							label={ __( 'Close panel' ) }
 						/>
 					) : (
 						<>
-							<div className="editor-post-publish-panel__header-publish-button">
-								<PostPublishButton
-									focusOnMount={ true }
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-									forceIsSaving={ forceIsSaving }
-								/>
-							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									ref={ this.cancelButtonNode }
+									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"
+									size="compact"
 								>
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
+							<div className="editor-post-publish-panel__header-publish-button">
+								<PostPublishButton
+									onSubmit={ this.onSubmit }
+									forceIsDirty={ forceIsDirty }
+								/>
+							</div>
 						</>
 					) }
 				</div>
@@ -117,7 +129,7 @@ export class PostPublishPanel extends Component {
 						</PostPublishPanelPrepublish>
 					) }
 					{ isPostPublish && (
-						<PostPublishPanelPostpublish focusOnMount={ true }>
+						<PostPublishPanelPostpublish focusOnMount>
 							{ PostPublishExtension && <PostPublishExtension /> }
 						</PostPublishPanelPostpublish>
 					) }
@@ -136,16 +148,21 @@ export class PostPublishPanel extends Component {
 	}
 }
 
+/**
+ * Renders a panel for publishing a post.
+ */
 export default compose( [
 	withSelect( ( select ) => {
 		const { getPostType } = select( coreStore );
 		const {
 			getCurrentPost,
+			getCurrentPostId,
 			getEditedPostAttribute,
 			isCurrentPostPublished,
 			isCurrentPostScheduled,
 			isEditedPostBeingScheduled,
 			isEditedPostDirty,
+			isAutosavingPost,
 			isSavingPost,
 			isSavingNonPostEntityChanges,
 		} = select( editorStore );
@@ -153,19 +170,17 @@ export default compose( [
 		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 
 		return {
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
-			isPostTypeViewable: get( postType, [ 'viewable' ], false ),
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+			isPostTypeViewable: postType?.viewable,
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			isDirty: isEditedPostDirty(),
 			isPublished: isCurrentPostPublished(),
 			isPublishSidebarEnabled: isPublishSidebarEnabled(),
-			isSaving: isSavingPost(),
+			isSaving: isSavingPost() && ! isAutosavingPost(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 			isScheduled: isCurrentPostScheduled(),
+			currentPostId: getCurrentPostId(),
 		};
 	} ),
 	withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
diff --git a/packages/editor/src/components/post-publish-panel/maybe-category-panel.js b/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
index 8fbf1c38fc36dd..66fdf985cc0d55 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
@@ -16,17 +16,17 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const categoriesTaxonomy =
-			select( coreStore ).getTaxonomy( 'category' );
-		const defaultCategoryId = select( coreStore ).getEntityRecord(
-			'root',
-			'site'
-		)?.default_category;
-		const defaultCategory = select( coreStore ).getEntityRecord(
-			'taxonomy',
-			'category',
-			defaultCategoryId
-		);
+		const { canUser, getEntityRecord, getTaxonomy } = select( coreStore );
+		const categoriesTaxonomy = getTaxonomy( 'category' );
+		const defaultCategoryId = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEntityRecord( 'root', 'site' )?.default_category
+			: undefined;
+		const defaultCategory = defaultCategoryId
+			? getEntityRecord( 'taxonomy', 'category', defaultCategoryId )
+			: undefined;
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
 			categoriesTaxonomy.types.some( ( type ) => type === postType );
@@ -45,7 +45,7 @@ function MaybeCategoryPanel() {
 			postTypeSupportsCategories &&
 			( categories?.length === 0 ||
 				( categories?.length === 1 &&
-					defaultCategory.id === categories[ 0 ] ) )
+					defaultCategory?.id === categories[ 0 ] ) )
 		);
 	}, [] );
 	const [ shouldShowPanel, setShouldShowPanel ] = useState( false );
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..a81168808f1af7 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,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -21,7 +16,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 = ( {
@@ -30,6 +25,7 @@ const PostFormatSuggestion = ( {
 	onUpdatePostFormat,
 } ) => (
 	<Button
+		__next40pxDefaultSize
 		variant="link"
 		onClick={ () => onUpdatePostFormat( suggestedPostFormat ) }
 	>
@@ -41,11 +37,8 @@ export default function PostFormatPanel() {
 	const { currentPostFormat, suggestion } = useSelect( ( select ) => {
 		const { getEditedPostAttribute, getSuggestedPostFormat } =
 			select( editorStore );
-		const supportedFormats = get(
-			select( coreStore ).getThemeSupports(),
-			[ 'formats' ],
-			[]
-		);
+		const supportedFormats =
+			select( coreStore ).getThemeSupports().formats ?? [];
 		return {
 			currentPostFormat: getEditedPostAttribute( 'format' ),
 			suggestion: getSuggestion(
diff --git a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
index 45493770eedf76..537d62f382805e 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -29,17 +28,31 @@ const TagsPanel = () => {
 					'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
 				) }
 			</p>
-			<FlatTermSelector slug={ 'post_tag' } />
+			<FlatTermSelector slug="post_tag" __nextHasNoMarginBottom />
 		</PanelBody>
 	);
 };
 
-class MaybeTagsPanel extends Component {
-	constructor( props ) {
-		super( props );
-		this.state = {
-			hadTagsWhenOpeningThePanel: props.hasTags,
+const MaybeTagsPanel = () => {
+	const { hasTags, isPostTypeSupported } = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
+		const _isPostTypeSupported = tagsTaxonomy?.types?.includes( postType );
+		const areTagsFetched = tagsTaxonomy !== undefined;
+		const tags =
+			tagsTaxonomy &&
+			select( editorStore ).getEditedPostAttribute(
+				tagsTaxonomy.rest_base
+			);
+		return {
+			hasTags: !! tags?.length,
+			isPostTypeSupported: areTagsFetched && _isPostTypeSupported,
 		};
+	}, [] );
+	const [ hadTagsWhenOpeningThePanel ] = useState( hasTags );
+
+	if ( ! isPostTypeSupported ) {
+		return null;
 	}
 
 	/*
@@ -52,34 +65,11 @@ class MaybeTagsPanel extends Component {
 	 * hiding this panel and keeping the user from adding
 	 * more than one tag.
 	 */
-	render() {
-		if ( ! this.state.hadTagsWhenOpeningThePanel ) {
-			return <TagsPanel />;
-		}
-
-		return null;
+	if ( ! hadTagsWhenOpeningThePanel ) {
+		return <TagsPanel />;
 	}
-}
 
-export default compose(
-	withSelect( ( select ) => {
-		const postType = select( editorStore ).getCurrentPostType();
-		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
-		const tags =
-			tagsTaxonomy &&
-			select( editorStore ).getEditedPostAttribute(
-				tagsTaxonomy.rest_base
-			);
-		return {
-			areTagsFetched: tagsTaxonomy !== undefined,
-			isPostTypeSupported:
-				tagsTaxonomy &&
-				tagsTaxonomy.types.some( ( type ) => type === postType ),
-			hasTags: tags && tags.length,
-		};
-	} ),
-	ifCondition(
-		( { areTagsFetched, isPostTypeSupported } ) =>
-			isPostTypeSupported && areTagsFetched
-	)
-)( MaybeTagsPanel );
+	return null;
+};
+
+export default MaybeTagsPanel;
diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
new file mode 100644
index 00000000000000..32ea69c425e0b5
--- /dev/null
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -0,0 +1,270 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	Button,
+	Spinner,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import { fetchMedia } from './media-util';
+
+function flattenBlocks( blocks ) {
+	const result = [];
+
+	blocks.forEach( ( block ) => {
+		result.push( block );
+		result.push( ...flattenBlocks( block.innerBlocks ) );
+	} );
+
+	return result;
+}
+
+/**
+ * Determine whether a block has external media.
+ *
+ * Different blocks use different attribute names (and potentially
+ * different logic as well) in determining whether the media is
+ * present, and whether it's external.
+ *
+ * @param {{name: string, attributes: Object}} block The block.
+ * @return {boolean?} Whether the block has external media
+ */
+function hasExternalMedia( block ) {
+	if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+		return block.attributes.url && ! block.attributes.id;
+	}
+
+	if ( block.name === 'core/media-text' ) {
+		return block.attributes.mediaUrl && ! block.attributes.mediaId;
+	}
+
+	return undefined;
+}
+
+/**
+ * Retrieve media info from a block.
+ *
+ * Different blocks use different attribute names, so we need this
+ * function to normalize things into a consistent naming scheme.
+ *
+ * @param {{name: string, attributes: Object}} block The block.
+ * @return {{url: ?string, alt: ?string, id: ?number}} The media info for the block.
+ */
+function getMediaInfo( block ) {
+	if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+		const { url, alt, id } = block.attributes;
+		return { url, alt, id };
+	}
+
+	if ( block.name === 'core/media-text' ) {
+		const { mediaUrl: url, mediaAlt: alt, mediaId: id } = block.attributes;
+		return { url, alt, id };
+	}
+
+	return {};
+}
+
+// Image component to represent a single image in the upload dialog.
+function Image( { clientId, alt, url } ) {
+	const { selectBlock } = useDispatch( blockEditorStore );
+	return (
+		<motion.img
+			tabIndex={ 0 }
+			role="button"
+			aria-label={ __( 'Select image block.' ) }
+			onClick={ () => {
+				selectBlock( clientId );
+			} }
+			onKeyDown={ ( event ) => {
+				if ( event.key === 'Enter' || event.key === ' ' ) {
+					selectBlock( clientId );
+					event.preventDefault();
+				}
+			} }
+			key={ clientId }
+			alt={ alt }
+			src={ url }
+			animate={ { opacity: 1 } }
+			exit={ { opacity: 0, scale: 0 } }
+			style={ {
+				width: '32px',
+				height: '32px',
+				objectFit: 'cover',
+				borderRadius: '2px',
+				cursor: 'pointer',
+			} }
+			whileHover={ { scale: 1.08 } }
+		/>
+	);
+}
+
+export default function MaybeUploadMediaPanel() {
+	const [ isUploading, setIsUploading ] = useState( false );
+	const [ isAnimating, setIsAnimating ] = useState( false );
+	const [ hadUploadError, setHadUploadError ] = useState( false );
+	const { editorBlocks, mediaUpload } = useSelect(
+		( select ) => ( {
+			editorBlocks: select( blockEditorStore ).getBlocks(),
+			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
+		} ),
+		[]
+	);
+
+	// Get a list of blocks with external media.
+	const blocksWithExternalMedia = flattenBlocks( editorBlocks ).filter(
+		( block ) => hasExternalMedia( block )
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	if ( ! mediaUpload || ! blocksWithExternalMedia.length ) {
+		return null;
+	}
+
+	const panelBodyTitle = [
+		__( 'Suggestion:' ),
+		<span className="editor-post-publish-panel__link" key="label">
+			{ __( 'External media' ) }
+		</span>,
+	];
+
+	/**
+	 * Update an individual block to point to newly-added library media.
+	 *
+	 * Different blocks use different attribute names, so we need this
+	 * function to ensure we modify the correct attributes for each type.
+	 *
+	 * @param {{name: string, attributes: Object}} block The block.
+	 * @param {{id: number, url: string}}          media Media library file info.
+	 */
+	function updateBlockWithUploadedMedia( block, media ) {
+		if ( block.name === 'core/image' || block.name === 'core/cover' ) {
+			updateBlockAttributes( block.clientId, {
+				id: media.id,
+				url: media.url,
+			} );
+		}
+
+		if ( block.name === 'core/media-text' ) {
+			updateBlockAttributes( block.clientId, {
+				mediaId: media.id,
+				mediaUrl: media.url,
+			} );
+		}
+	}
+
+	// Handle fetching and uploading all external media in the post.
+	function uploadImages() {
+		setIsUploading( true );
+		setHadUploadError( false );
+
+		// Multiple blocks can be using the same URL, so we
+		// should ensure we only fetch and upload each of them once.
+		const mediaUrls = new Set(
+			blocksWithExternalMedia.map( ( block ) => {
+				const { url } = getMediaInfo( block );
+				return url;
+			} )
+		);
+
+		// Create an upload promise for each URL, that we can wait for in all
+		// blocks that make use of that media.
+		const uploadPromises = Object.fromEntries(
+			Object.entries( fetchMedia( [ ...mediaUrls ] ) ).map(
+				( [ url, filePromise ] ) => {
+					const uploadPromise = filePromise.then(
+						( blob ) =>
+							new Promise( ( resolve, reject ) => {
+								mediaUpload( {
+									filesList: [ blob ],
+									onFileChange: ( [ media ] ) => {
+										if ( isBlobURL( media.url ) ) {
+											return;
+										}
+
+										resolve( media );
+									},
+									onError() {
+										reject();
+									},
+								} );
+							} )
+					);
+
+					return [ url, uploadPromise ];
+				}
+			)
+		);
+
+		// Wait for all blocks to be updated with library media.
+		Promise.allSettled(
+			blocksWithExternalMedia.map( ( block ) => {
+				const { url } = getMediaInfo( block );
+
+				return uploadPromises[ url ]
+					.then( ( media ) =>
+						updateBlockWithUploadedMedia( block, media )
+					)
+					.then( () => setIsAnimating( true ) )
+					.catch( () => setHadUploadError( true ) );
+			} )
+		).finally( () => {
+			setIsUploading( false );
+		} );
+	}
+
+	return (
+		<PanelBody initialOpen title={ panelBodyTitle }>
+			<p>
+				{ __(
+					'Upload external images to the Media Library. Images from different domains may load slowly, display incorrectly, or be removed unexpectedly.'
+				) }
+			</p>
+			<div
+				style={ {
+					display: 'inline-flex',
+					flexWrap: 'wrap',
+					gap: '8px',
+				} }
+			>
+				<AnimatePresence
+					onExitComplete={ () => setIsAnimating( false ) }
+				>
+					{ blocksWithExternalMedia.map( ( block ) => {
+						const { url, alt } = getMediaInfo( block );
+						return (
+							<Image
+								key={ block.clientId }
+								clientId={ block.clientId }
+								url={ url }
+								alt={ alt }
+							/>
+						);
+					} ) }
+				</AnimatePresence>
+				{ isUploading || isAnimating ? (
+					<Spinner />
+				) : (
+					<Button
+						size="compact"
+						variant="primary"
+						onClick={ uploadImages }
+					>
+						{ __( 'Upload' ) }
+					</Button>
+				) }
+			</div>
+			{ hadUploadError && <p>{ __( 'Upload failed, try again.' ) }</p> }
+		</PanelBody>
+	);
+}
diff --git a/packages/editor/src/components/post-publish-panel/media-util.js b/packages/editor/src/components/post-publish-panel/media-util.js
new file mode 100644
index 00000000000000..995802b0eebb44
--- /dev/null
+++ b/packages/editor/src/components/post-publish-panel/media-util.js
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Generate a list of unique basenames given a list of URLs.
+ *
+ * We want all basenames to be unique, since sometimes the extension
+ * doesn't reflect the mime type, and may end up getting changed by
+ * the server, on upload.
+ *
+ * @param {string[]} urls The list of URLs
+ * @return {Record< string, string >} A URL => basename record.
+ */
+export function generateUniqueBasenames( urls ) {
+	const basenames = new Set();
+
+	return Object.fromEntries(
+		urls.map( ( url ) => {
+			// We prefer to match the remote filename, if possible.
+			const filename = getFilename( url );
+			let basename = '';
+
+			if ( filename ) {
+				const parts = filename.split( '.' );
+				if ( parts.length > 1 ) {
+					// Assume the last part is the extension.
+					parts.pop();
+				}
+				basename = parts.join( '.' );
+			}
+
+			if ( ! basename ) {
+				// It looks like we don't have a basename, so let's use a UUID.
+				basename = uuid();
+			}
+
+			if ( basenames.has( basename ) ) {
+				// Append a UUID to deduplicate the basename.
+				// The server will try to deduplicate on its own if we don't do this,
+				// but it may run into a race condition
+				// (see https://github.com/WordPress/gutenberg/issues/64899).
+				// Deduplicating the filenames before uploading is safer.
+				basename = `${ basename }-${ uuid() }`;
+			}
+
+			basenames.add( basename );
+
+			return [ url, basename ];
+		} )
+	);
+}
+
+/**
+ * Fetch a list of URLs, turning those into promises for files with
+ * unique filenames.
+ *
+ * @param {string[]} urls The list of URLs
+ * @return {Record< string, Promise< File > >} A URL => File promise record.
+ */
+export function fetchMedia( urls ) {
+	return Object.fromEntries(
+		Object.entries( generateUniqueBasenames( urls ) ).map(
+			( [ url, basename ] ) => {
+				const filePromise = window
+					.fetch( url.includes( '?' ) ? url : url + '?' )
+					.then( ( response ) => response.blob() )
+					.then( ( blob ) => {
+						// The server will reject the upload if it doesn't have an extension,
+						// even though it'll rewrite the file name to match the mime type.
+						// Here we provide it with a safe extension to get it past that check.
+						return new File( [ blob ], `${ basename }.png`, {
+							type: blob.type,
+						} );
+					} );
+
+				return [ url, filePromise ];
+			}
+		)
+	);
+}
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 3036acdb9d7bb3..98afb4d1d573e7 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { PanelBody, Button, TextControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Component, createRef } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -22,6 +17,7 @@ import PostScheduleLabel from '../post-schedule/label';
 import { store as editorStore } from '../../store';
 
 const POSTNAME = '%postname%';
+const PAGENAME = '%pagename%';
 
 /**
  * Returns URL for a future post.
@@ -38,138 +34,139 @@ const getFuturePostUrl = ( post ) => {
 		return post.permalink_template.replace( POSTNAME, slug );
 	}
 
+	if ( post.permalink_template.includes( PAGENAME ) ) {
+		return post.permalink_template.replace( PAGENAME, slug );
+	}
+
 	return post.permalink_template;
 };
 
-function CopyButton( { text, onCopy, children } ) {
-	const ref = useCopyToClipboard( text, onCopy );
+function CopyButton( { text } ) {
+	const [ showCopyConfirmation, setShowCopyConfirmation ] = useState( false );
+	const timeoutIdRef = useRef();
+	const ref = useCopyToClipboard( text, () => {
+		setShowCopyConfirmation( true );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
+		}
+		timeoutIdRef.current = setTimeout( () => {
+			setShowCopyConfirmation( false );
+		}, 4000 );
+	} );
+
+	useEffect( () => {
+		return () => {
+			if ( timeoutIdRef.current ) {
+				clearTimeout( timeoutIdRef.current );
+			}
+		};
+	}, [] );
+
 	return (
-		<Button variant="secondary" ref={ ref }>
-			{ children }
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
+			{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
 		</Button>
 	);
 }
 
-class PostPublishPanelPostpublish extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			showCopyConfirmation: false,
+export default function PostPublishPanelPostpublish( {
+	focusOnMount,
+	children,
+} ) {
+	const { post, postType, isScheduled } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			getCurrentPost,
+			isCurrentPostScheduled,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			post: getCurrentPost(),
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			isScheduled: isCurrentPostScheduled(),
 		};
-		this.onCopy = this.onCopy.bind( this );
-		this.onSelectInput = this.onSelectInput.bind( this );
-		this.postLink = createRef();
-	}
-
-	componentDidMount() {
-		if ( this.props.focusOnMount ) {
-			this.postLink.current.focus();
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.dismissCopyConfirmation );
-	}
-
-	onCopy() {
-		this.setState( {
-			showCopyConfirmation: true,
-		} );
+	}, [] );
+
+	const postLabel = postType?.labels?.singular_name;
+	const viewPostLabel = postType?.labels?.view_item;
+	const addNewPostLabel = postType?.labels?.add_new_item;
+	const link =
+		post.status === 'future' ? getFuturePostUrl( post ) : post.link;
+	const addLink = addQueryArgs( 'post-new.php', {
+		post_type: post.type,
+	} );
+
+	const postLinkRef = useCallback(
+		( node ) => {
+			if ( focusOnMount && node ) {
+				node.focus();
+			}
+		},
+		[ focusOnMount ]
+	);
 
-		clearTimeout( this.dismissCopyConfirmation );
-		this.dismissCopyConfirmation = setTimeout( () => {
-			this.setState( {
-				showCopyConfirmation: false,
-			} );
-		}, 4000 );
-	}
+	const postPublishNonLinkHeader = isScheduled ? (
+		<>
+			{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
+			<PostScheduleLabel />.
+		</>
+	) : (
+		__( 'is now live.' )
+	);
 
-	onSelectInput( event ) {
-		event.target.select();
-	}
+	return (
+		<div className="post-publish-panel__postpublish">
+			<PanelBody className="post-publish-panel__postpublish-header">
+				<a ref={ postLinkRef } href={ link }>
+					{ decodeEntities( post.title ) || __( '(no title)' ) }
+				</a>{ ' ' }
+				{ postPublishNonLinkHeader }
+			</PanelBody>
+			<PanelBody>
+				<p className="post-publish-panel__postpublish-subheader">
+					<strong>{ __( 'What’s next?' ) }</strong>
+				</p>
+				<div className="post-publish-panel__postpublish-post-address-container">
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						className="post-publish-panel__postpublish-post-address"
+						readOnly
+						label={ sprintf(
+							/* translators: %s: post type singular name */
+							__( '%s address' ),
+							postLabel
+						) }
+						value={ safeDecodeURIComponent( link ) }
+						onFocus={ ( event ) => event.target.select() }
+					/>
 
-	render() {
-		const { children, isScheduled, post, postType } = this.props;
-		const postLabel = get( postType, [ 'labels', 'singular_name' ] );
-		const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );
-		const addNewPostLabel = get( postType, [ 'labels', 'add_new_item' ] );
-		const link =
-			post.status === 'future' ? getFuturePostUrl( post ) : post.link;
-		const addLink = addQueryArgs( 'post-new.php', {
-			post_type: post.type,
-		} );
-
-		const postPublishNonLinkHeader = isScheduled ? (
-			<>
-				{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
-				<PostScheduleLabel />.
-			</>
-		) : (
-			__( 'is now live.' )
-		);
-
-		return (
-			<div className="post-publish-panel__postpublish">
-				<PanelBody className="post-publish-panel__postpublish-header">
-					<a ref={ this.postLink } href={ link }>
-						{ decodeEntities( post.title ) || __( '(no title)' ) }
-					</a>{ ' ' }
-					{ postPublishNonLinkHeader }
-				</PanelBody>
-				<PanelBody>
-					<p className="post-publish-panel__postpublish-subheader">
-						<strong>{ __( 'What’s next?' ) }</strong>
-					</p>
-					<div className="post-publish-panel__postpublish-post-address-container">
-						<TextControl
-							className="post-publish-panel__postpublish-post-address"
-							readOnly
-							label={ sprintf(
-								/* translators: %s: post type singular name */
-								__( '%s address' ),
-								postLabel
-							) }
-							value={ safeDecodeURIComponent( link ) }
-							onFocus={ this.onSelectInput }
-						/>
-
-						<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
-							<CopyButton text={ link } onCopy={ this.onCopy }>
-								{ this.state.showCopyConfirmation
-									? __( 'Copied!' )
-									: __( 'Copy' ) }
-							</CopyButton>
-						</div>
+					<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
+						<CopyButton text={ link } />
 					</div>
+				</div>
 
-					<div className="post-publish-panel__postpublish-buttons">
-						{ ! isScheduled && (
-							<Button variant="primary" href={ link }>
-								{ viewPostLabel }
-							</Button>
-						) }
+				<div className="post-publish-panel__postpublish-buttons">
+					{ ! isScheduled && (
 						<Button
-							variant={ isScheduled ? 'primary' : 'secondary' }
-							href={ addLink }
+							variant="primary"
+							href={ link }
+							__next40pxDefaultSize
 						>
-							{ addNewPostLabel }
+							{ viewPostLabel }
 						</Button>
-					</div>
-				</PanelBody>
-				{ children }
-			</div>
-		);
-	}
+					) }
+					<Button
+						variant={ isScheduled ? 'primary' : 'secondary' }
+						__next40pxDefaultSize
+						href={ addLink }
+					>
+						{ addNewPostLabel }
+					</Button>
+				</div>
+			</PanelBody>
+			{ children }
+		</div>
+	);
 }
-
-export default withSelect( ( select ) => {
-	const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } =
-		select( editorStore );
-	const { getPostType } = select( coreStore );
-
-	return {
-		post: getCurrentPost(),
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-		isScheduled: isCurrentPostScheduled(),
-	};
-} )( PostPublishPanelPostpublish );
diff --git a/packages/editor/src/components/post-publish-panel/prepublish.js b/packages/editor/src/components/post-publish-panel/prepublish.js
index 274cfea879973f..193960b9cc8345 100644
--- a/packages/editor/src/components/post-publish-panel/prepublish.js
+++ b/packages/editor/src/components/post-publish-panel/prepublish.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -25,6 +20,7 @@ import MaybeTagsPanel from './maybe-tags-panel';
 import MaybePostFormatPanel from './maybe-post-format-panel';
 import { store as editorStore } from '../../store';
 import MaybeCategoryPanel from './maybe-category-panel';
+import MaybeUploadMedia from './maybe-upload-media';
 
 function PostPublishPanelPrepublish( { children } ) {
 	const {
@@ -42,11 +38,8 @@ function PostPublishPanelPrepublish( { children } ) {
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
 		return {
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
+			hasPublishAction:
+				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
 			isBeingScheduled: isEditedPostBeingScheduled(),
 			isRequestingSiteIcon: isResolving( 'getEntityRecord', [
 				'root',
@@ -111,6 +104,7 @@ function PostPublishPanelPrepublish( { children } ) {
 					<span className="components-site-home">{ siteHome }</span>
 				</div>
 			</div>
+			<MaybeUploadMedia />
 			{ hasPublishAction && (
 				<>
 					<PanelBody
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index b98dd9bf2ab3ad..7b075717651781 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -1,12 +1,8 @@
-.editor-post-publish-panel {
-	background: $white;
-}
-
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
-	min-height: calc(100% - #{ $header-height + 84px });
+	min-height: calc(100% - #{$header-height + 84px});
 
-	.components-spinner {
+	> .components-spinner {
 		display: block;
 		margin: 100px auto 0;
 	}
@@ -41,8 +37,9 @@
 
 .components-site-icon {
 	border: none;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	margin-right: $grid-unit-15;
+	flex-shrink: 0;
 
 	// Same size as in the Site menu.
 	height: 36px;
@@ -58,11 +55,12 @@
 	display: block;
 	color: $gray-700;
 	font-size: $helptext-font-size;
+	word-break: break-word;
 }
 
 .editor-post-publish-panel__header-publish-button,
 .editor-post-publish-panel__header-cancel-button {
-	flex-grow: 1;
+	flex: 1;
 
 	@include break-mobile() {
 		max-width: $admin-sidebar-width;
@@ -70,11 +68,12 @@
 }
 
 .editor-post-publish-panel__header-publish-button {
-	padding-right: $grid-unit-05;
+	padding-left: $grid-unit-05;
+	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
-	padding-left: $grid-unit-05;
+	padding-right: $grid-unit-05;
 }
 
 .editor-post-publish-panel__header-published {
@@ -82,7 +81,7 @@
 }
 
 .editor-post-publish-panel__footer {
-	padding: 16px;
+	padding: $grid-unit-20;
 }
 
 .components-button.editor-post-publish-panel__toggle.is-primary {
@@ -94,17 +93,17 @@
 	}
 
 	.dashicon {
-		margin-right: -4px;
+		margin-right: -$grid-unit-05;
 	}
 }
 
 .editor-post-publish-panel__link {
 	font-weight: 400;
-	padding-left: 4px;
+	padding-left: $grid-unit-05;
 }
 
 .editor-post-publish-panel__prepublish {
-	padding: 16px;
+	padding: $grid-unit-20;
 
 	strong {
 		color: $gray-900;
@@ -112,13 +111,19 @@
 
 	.components-panel__body {
 		background: $white;
-		margin-left: -16px;
-		margin-right: -16px;
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
 	}
 
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	.components-panel__body-title .components-button {
+		align-items: flex-start;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {
@@ -130,21 +135,11 @@
 	display: flex;
 	align-content: space-between;
 	flex-wrap: wrap;
-	margin: -5px;
-
-	> * {
-		flex-grow: 1;
-		margin: 5px;
-	}
+	gap: $grid-unit-20;
 
 	.components-button {
-		height: auto;
 		justify-content: center;
-		padding: 3px 10px 4px;
 		flex: 1;
-		line-height: 1.6;
-		text-align: center;
-		white-space: normal;
 	}
 
 	.components-clipboard-button {
@@ -157,30 +152,25 @@
 	align-items: flex-end;
 	margin-bottom: $grid-unit-20;
 
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
 	.post-publish-panel__postpublish-post-address {
 		flex: 1;
 	}
 
 	input[readonly] {
-		padding: 10px;
-		background: $gray-300;
+		// Do not increase top and bottom padding otherwise Firefox won't show the text overflow ellipsis.
+		// See https://github.com/WordPress/gutenberg/pull/57310
+		padding: $grid-unit-15;
+		background: $gray-100;
+		border-color: $gray-400;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		height: $button-size;
 	}
 }
 
 .post-publish-panel__postpublish-post-address__copy-button-wrap {
 	flex-shrink: 0;
-	margin-left: 8px; // margin left for copy button
-
-	// match copy button height to the address field height
-	.components-button {
-		height: 38px;
-	}
+	margin-left: $grid-unit-20;
 }
 
 .post-publish-panel__postpublish-header {
@@ -203,3 +193,40 @@
 		}
 	}
 }
+
+.editor-post-publish-panel {
+	position: fixed;
+	z-index: z-index(".editor-post-publish-panel");
+	background: $white;
+	top: $admin-bar-height-big;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+
+	@include break-medium() {
+		z-index: z-index(".editor-post-publish-panel {greater than small}");
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width + $border-width;
+		border-left: $border-width solid $gray-300;
+		transform: translateX(+100%);
+		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion("animation");
+
+		body.is-fullscreen-mode & {
+			top: 0;
+		}
+
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		[role="region"]:focus & {
+			transform: translateX(0%);
+		}
+	}
+}
+
+@keyframes editor-post-publish-panel__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index bdae729fd61490..b074159ac423d4 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -13,10 +13,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -26,13 +22,33 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
 
-.components-panel__row .emotion-8 {
-  margin-bottom: inherit;
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
 }
 
 <div>
@@ -44,7 +60,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
     >
       <button
         aria-label="Close panel"
-        class="components-button has-icon"
+        class="components-button is-compact has-icon"
         type="button"
       >
         <svg
@@ -104,7 +120,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-0"
                   readonly=""
                   type="text"
@@ -116,7 +132,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -127,11 +143,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -145,24 +161,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-8 emotion-3"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-3"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-3"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-3"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-3"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -183,10 +205,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   box-sizing: inherit;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }
@@ -196,13 +214,33 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   font-weight: 500;
   line-height: 1.4;
   text-transform: uppercase;
-  display: inline-block;
+  display: block;
   margin-bottom: calc(4px * 2);
   padding: 0;
 }
 
-.components-panel__row .emotion-8 {
-  margin-bottom: inherit;
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
 }
 
 <div>
@@ -214,7 +252,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
     >
       <button
         aria-label="Close panel"
-        class="components-button has-icon"
+        class="components-button is-compact has-icon"
         type="button"
       >
         <svg
@@ -274,7 +312,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
                   post address
                 </label>
                 <input
-                  class="components-text-control__input"
+                  class="components-text-control__input is-next-40px-default-size"
                   id="inspector-text-control-1"
                   readonly=""
                   type="text"
@@ -286,7 +324,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
               class="post-publish-panel__postpublish-post-address__copy-button-wrap"
             >
               <button
-                class="components-button is-secondary"
+                class="components-button is-next-40px-default-size is-secondary"
                 type="button"
               >
                 Copy
@@ -297,11 +335,11 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-primary"
+              class="components-button is-next-40px-default-size is-primary"
               href="https://wordpress.local/sample-page/"
             />
             <a
-              class="components-button is-secondary"
+              class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
             />
           </div>
@@ -315,24 +353,30 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
         class="components-base-control components-checkbox-control emotion-0 emotion-1"
       >
         <div
-          class="components-base-control__field emotion-8 emotion-3"
+          class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-4"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-4"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-4"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-4"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -357,6 +401,30 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -365,24 +433,24 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -440,22 +508,28 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-1"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-1"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-1"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-1"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -480,6 +554,30 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -488,24 +586,24 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -563,22 +661,28 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
         <div
           class="components-base-control__field emotion-2 emotion-3"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-0"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-0"
+          <div
+            class="components-flex components-h-stack emotion-4 emotion-5"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-0"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-0"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -609,8 +713,10 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   overflow: visible;
+  opacity: 1;
+  background-color: transparent;
 }
 
 .emotion-2 {
@@ -645,6 +751,30 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   margin-bottom: inherit;
 }
 
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
+  width: 100%;
+}
+
+.emotion-10>* {
+  min-width: 0;
+}
+
 <div>
   <div
     class="editor-post-publish-panel"
@@ -653,24 +783,24 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -709,22 +839,28 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
         <div
           class="components-base-control__field emotion-8 emotion-9"
         >
-          <span
-            class="components-checkbox-control__input-container"
-          >
-            <input
-              class="components-checkbox-control__input"
-              id="inspector-checkbox-control-2"
-              type="checkbox"
-              value="1"
-            />
-          </span>
-          <label
-            class="components-checkbox-control__label"
-            for="inspector-checkbox-control-2"
+          <div
+            class="components-flex components-h-stack emotion-10 emotion-11"
+            data-wp-c16t="true"
+            data-wp-component="HStack"
           >
-            Always show pre-publish checks.
-          </label>
+            <span
+              class="components-checkbox-control__input-container"
+            >
+              <input
+                class="components-checkbox-control__input"
+                id="inspector-checkbox-control-2"
+                type="checkbox"
+                value="1"
+              />
+            </span>
+            <label
+              class="components-checkbox-control__label"
+              for="inspector-checkbox-control-2"
+            >
+              Always show pre-publish checks.
+            </label>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/editor/src/components/post-publish-panel/test/media-util.js b/packages/editor/src/components/post-publish-panel/test/media-util.js
new file mode 100644
index 00000000000000..b91583cc3f17b3
--- /dev/null
+++ b/packages/editor/src/components/post-publish-panel/test/media-util.js
@@ -0,0 +1,118 @@
+/**
+ * Internal dependencies
+ */
+import { generateUniqueBasenames } from '../media-util';
+
+describe( 'generateUniqueBasenames', () => {
+	it( 'should prefer the original basenames', () => {
+		const urls = [
+			'https://example.com/images/image1.jpg',
+			'https://example.com/images/image2.jpg',
+			'https://example.com/images/image3.jpg',
+			'https://example.com/images/image4.jpg',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1.jpg': 'image1',
+			'https://example.com/images/image2.jpg': 'image2',
+			'https://example.com/images/image3.jpg': 'image3',
+			'https://example.com/images/image4.jpg': 'image4',
+		} );
+	} );
+
+	it( 'should handle filenames with no extensions', () => {
+		const urls = [
+			'https://example.com/images/image1',
+			'https://example.com/images/image2',
+			'https://example.com/images/image3',
+			'https://example.com/images/image4',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1': 'image1',
+			'https://example.com/images/image2': 'image2',
+			'https://example.com/images/image3': 'image3',
+			'https://example.com/images/image4': 'image4',
+		} );
+	} );
+
+	it( 'should handle query parameters correctly', () => {
+		const urls = [
+			'https://example.com/images/image1.jpg?a=notafile.npg',
+			'https://example.com/images/image2.jpg?a=notafile.npg',
+			'https://example.com/images/image3.jpg?a=notafile.npg',
+			'https://example.com/images/image4.jpg?a=notafile.npg',
+		];
+
+		expect( generateUniqueBasenames( urls ) ).toEqual( {
+			'https://example.com/images/image1.jpg?a=notafile.npg': 'image1',
+			'https://example.com/images/image2.jpg?a=notafile.npg': 'image2',
+			'https://example.com/images/image3.jpg?a=notafile.npg': 'image3',
+			'https://example.com/images/image4.jpg?a=notafile.npg': 'image4',
+		} );
+	} );
+
+	it( 'should deduplicate identical filenames', () => {
+		const urls = [
+			'https://example.com/image1/image.jpg',
+			'https://example.com/image2/image.jpg',
+			'https://example.com/image3/image.jpg',
+			'https://example.com/image4/image.jpg',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate identical basenames', () => {
+		const urls = [
+			'https://example.com/images/image.jpg',
+			'https://example.com/images/image.png',
+			'https://example.com/images/image.webp',
+			'https://example.com/images/image.avif',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate filenames without extensions', () => {
+		const urls = [
+			'https://example.com/image1/image',
+			'https://example.com/image2/image',
+			'https://example.com/image3/image',
+			'https://example.com/image4/image',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+
+	it( 'should deduplicate paths with no filename', () => {
+		const urls = [
+			'https://example.com/image1/dir/',
+			'https://example.com/image2/dir/',
+			'https://example.com/image3/dir/',
+			'https://example.com/image4/dir/',
+		];
+
+		const results = generateUniqueBasenames( urls );
+		const resultLength = Object.entries( results ).length;
+		expect( resultLength ).toBe( urls.length );
+
+		const basenames = new Set( Object.values( results ) );
+		expect( basenames.size ).toBe( resultLength );
+	} );
+} );
diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
index 7d57b2a630e4e0..50800808ab3c96 100644
--- a/packages/editor/src/components/post-saved-state/index.js
+++ b/packages/editor/src/components/post-saved-state/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,30 +16,24 @@ import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, check, cloud, cloudUpload } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import PostSwitchToDraftButton from '../post-switch-to-draft-button';
+import { STATUS_OPTIONS } from '../../components/post-status';
 import { store as editorStore } from '../../store';
 
 /**
  * Component showing whether the post is saved or not and providing save
  * buttons.
  *
- * @param {Object}   props                Component props.
- * @param {?boolean} props.forceIsDirty   Whether to force the post to be marked
- *                                        as dirty.
- * @param {?boolean} props.forceIsSaving  Whether to force the post to be marked
- *                                        as being saved.
- * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
- * @return {import('@wordpress/element').WPComponent} The component.
+ * @param {Object}   props              Component props.
+ * @param {?boolean} props.forceIsDirty Whether to force the post to be marked
+ *                                      as dirty.
+ * @return {import('react').ComponentType} The component.
  */
-export default function PostSavedState( {
-	forceIsDirty,
-	forceIsSaving,
-	showIconLabels = false,
-} ) {
+export default function PostSavedState( { forceIsDirty } ) {
 	const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
 	const isLargeViewport = useViewportMatch( 'small' );
 
@@ -47,12 +41,14 @@ export default function PostSavedState( {
 		isAutosaving,
 		isDirty,
 		isNew,
-		isPending,
 		isPublished,
 		isSaveable,
 		isSaving,
 		isScheduled,
 		hasPublishAction,
+		showIconLabels,
+		postStatus,
+		postStatusHasChanged,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -65,24 +61,27 @@ export default function PostSavedState( {
 				getCurrentPost,
 				isAutosavingPost,
 				getEditedPostAttribute,
+				getPostEdits,
 			} = select( editorStore );
-
+			const { get } = select( preferencesStore );
 			return {
 				isAutosaving: isAutosavingPost(),
 				isDirty: forceIsDirty || isEditedPostDirty(),
 				isNew: isEditedPostNew(),
-				isPending: 'pending' === getEditedPostAttribute( 'status' ),
 				isPublished: isCurrentPostPublished(),
-				isSaving: forceIsSaving || isSavingPost(),
+				isSaving: isSavingPost(),
 				isSaveable: isEditedPostSaveable(),
 				isScheduled: isCurrentPostScheduled(),
 				hasPublishAction:
 					getCurrentPost()?._links?.[ 'wp:action-publish' ] ?? false,
+				showIconLabels: get( 'core', 'showIconLabels' ),
+				postStatus: getEditedPostAttribute( 'status' ),
+				postStatusHasChanged: !! getPostEdits()?.status,
 			};
 		},
-		[ forceIsDirty, forceIsSaving ]
+		[ forceIsDirty ]
 	);
-
+	const isPending = postStatus === 'pending';
 	const { savePost } = useDispatch( editorStore );
 
 	const wasSaving = usePrevious( isSaving );
@@ -106,8 +105,23 @@ export default function PostSavedState( {
 		return null;
 	}
 
-	if ( isPublished || isScheduled ) {
-		return <PostSwitchToDraftButton />;
+	// We shouldn't render the button if the post has not one of the following statuses: pending, draft, auto-draft.
+	// The reason for this is that this button handles the `save as pending` and `save draft` actions.
+	// An exception for this is when the post has a custom status and there should be a way to save changes without
+	// having to publish. This should be handled better in the future when custom statuses have better support.
+	// @see https://github.com/WordPress/gutenberg/issues/3144.
+	const isIneligibleStatus =
+		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) &&
+		STATUS_OPTIONS.map( ( { value } ) => value ).includes( postStatus );
+
+	if (
+		isPublished ||
+		isScheduled ||
+		isIneligibleStatus ||
+		( postStatusHasChanged &&
+			[ 'pending', 'draft' ].includes( postStatus ) )
+	) {
+		return null;
 	}
 
 	/* translators: button label text should, if possible, be under 16 characters. */
@@ -119,7 +133,6 @@ export default function PostSavedState( {
 	const isSaved = forceSavedMessage || ( ! isNew && ! isDirty );
 	const isSavedState = isSaving || isSaved;
 	const isDisabled = isSaving || isSaved || ! isSaveable;
-
 	let text;
 
 	if ( isSaving ) {
@@ -138,7 +151,7 @@ export default function PostSavedState( {
 		<Button
 			className={
 				isSaveable || isSaving
-					? classnames( {
+					? clsx( {
 							'editor-post-save-draft': ! isSavedState,
 							'editor-post-saved-state': isSavedState,
 							'is-saving': isSaving,
@@ -156,16 +169,9 @@ export default function PostSavedState( {
 			 * button does something, i.e. when it's not disabled.
 			 */
 			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
-			/*
-			 * Displaying the keyboard shortcut conditionally makes the tooltip
-			 * itself show conditionally. This would trigger a full-rerendering
-			 * of the button that we want to avoid. By setting `showTooltip`,
-			 & the tooltip is always rendered even when there's no keyboard shortcut.
-			 */
-			showTooltip
 			variant="tertiary"
+			size="compact"
 			icon={ isLargeViewport ? undefined : cloudUpload }
-			// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
 			label={ text || label }
 			aria-disabled={ isDisabled }
 		>
diff --git a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
index d24ed1370537ac..ee8d46d393c487 100644
--- a/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-saved-state/test/__snapshots__/index.js.snap
@@ -4,7 +4,7 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
 <button
   aria-disabled="true"
   aria-label="Save draft"
-  class="components-button is-tertiary has-icon"
+  class="components-button is-compact is-tertiary has-icon"
   type="button"
 >
   <svg
@@ -16,26 +16,17 @@ exports[`PostSavedState returns a disabled button if the post is not saveable 1`
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z"
+      d="M17.3 10.1C17.3 7.60001 15.2 5.70001 12.5 5.70001C10.3 5.70001 8.4 7.10001 7.9 9.00001H7.7C5.7 9.00001 4 10.7 4 12.8C4 14.9 5.7 16.6 7.7 16.6H9.5V15.2H7.7C6.5 15.2 5.5 14.1 5.5 12.9C5.5 11.7 6.5 10.5 7.7 10.5H9L9.3 9.40001C9.7 8.10001 11 7.20001 12.5 7.20001C14.3 7.20001 15.8 8.50001 15.8 10.1V11.4L17.1 11.6C17.9 11.7 18.5 12.5 18.5 13.4C18.5 14.4 17.7 15.2 16.8 15.2H14.5V16.6H16.7C18.5 16.6 19.9 15.1 19.9 13.3C20 11.7 18.8 10.4 17.3 10.1Z M14.1245 14.2426L15.1852 13.182L12.0032 10L8.82007 13.1831L9.88072 14.2438L11.25 12.8745V18H12.75V12.8681L14.1245 14.2426Z"
     />
   </svg>
 </button>
 `;
 
-exports[`PostSavedState returns a switch to draft link if the post is published 1`] = `
-<button
-  class="components-button editor-post-switch-to-draft is-tertiary"
-  type="button"
->
-  Switch to draft
-</button>
-`;
-
 exports[`PostSavedState should return Save button if edits to be saved 1`] = `
 <button
   aria-disabled="false"
   aria-label="Save draft"
-  class="components-button editor-post-save-draft is-tertiary"
+  class="components-button editor-post-save-draft is-compact is-tertiary"
   type="button"
 >
   Save draft
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..86aa6c6c603007 100644
--- a/packages/editor/src/components/post-saved-state/test/index.js
+++ b/packages/editor/src/components/post-saved-state/test/index.js
@@ -47,11 +47,14 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: true,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
 
-		expect( screen.getByText( 'Saving' ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'button', { name: /Saving/i } )
+		).toBeVisible();
 	} );
 
 	it( 'returns a disabled button if the post is not saveable', () => {
@@ -60,16 +63,7 @@ describe( 'PostSavedState', () => {
 			isNew: true,
 			isSaveable: false,
 			isSaving: false,
-		} ) );
-
-		render( <PostSavedState /> );
-
-		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
-	} );
-
-	it( 'returns a switch to draft link if the post is published', () => {
-		useSelect.mockImplementation( () => ( {
-			isPublished: true,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -83,6 +77,7 @@ describe( 'PostSavedState', () => {
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		render( <PostSavedState /> );
@@ -94,15 +89,14 @@ describe( 'PostSavedState', () => {
 	} );
 
 	it( 'should return Save button if edits to be saved', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		useSelect.mockImplementation( () => ( {
 			isDirty: true,
 			isNew: false,
 			isSaveable: true,
 			isSaving: false,
+			postStatus: 'draft',
 		} ) );
 
 		// Simulate the viewport being considered large.
diff --git a/packages/editor/src/components/post-schedule/check.js b/packages/editor/src/components/post-schedule/check.js
index b6bec2a5094a1a..32526a977f94fa 100644
--- a/packages/editor/src/components/post-schedule/check.js
+++ b/packages/editor/src/components/post-schedule/check.js
@@ -1,37 +1,33 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostScheduleCheck( { hasPublishAction, children } ) {
+/**
+ * Wrapper component that renders its children only if post has a publish action.
+ *
+ * @param {Object}             props          Props.
+ * @param {React.ReactElement} props.children Children to be rendered.
+ *
+ * @return {React.ReactElement} - The component to be rendered or null if there is no publish action.
+ */
+export default function PostScheduleCheck( { children } ) {
+	const hasPublishAction = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPost()._links?.[
+				'wp:action-publish'
+			] ?? false
+		);
+	}, [] );
+
 	if ( ! hasPublishAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getCurrentPostType } = select( editorStore );
-		return {
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
-			postType: getCurrentPostType(),
-		};
-	} ),
-] )( PostScheduleCheck );
diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js
index 98a22a992113d5..c9b017bcfa80df 100644
--- a/packages/editor/src/components/post-schedule/index.js
+++ b/packages/editor/src/components/post-schedule/index.js
@@ -7,8 +7,9 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  * WordPress dependencies
  */
 import { getSettings } from '@wordpress/date';
+import { _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -16,8 +17,33 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function PostSchedule( { onClose } ) {
+const { PrivatePublishDateTimePicker } = unlock( blockEditorPrivateApis );
+
+/**
+ * Renders the PostSchedule component. It allows the user to schedule a post.
+ *
+ * @param {Object}   props         Props.
+ * @param {Function} props.onClose Function to close the component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostSchedule( props ) {
+	return (
+		<PrivatePostSchedule
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+		/>
+	);
+}
+
+export function PrivatePostSchedule( {
+	onClose,
+	showPopoverHeaderActions,
+	isCompact,
+} ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -69,15 +95,21 @@ export default function PostSchedule( { onClose } ) {
 	);
 
 	return (
-		<PublishDateTimePicker
+		<PrivatePublishDateTimePicker
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
+			dateOrder={
+				/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+				_x( 'dmy', 'date order' )
+			}
 			events={ events }
 			onMonthPreviewed={ ( date ) =>
 				setPreviewedMonth( parseISO( date ) )
 			}
 			onClose={ onClose }
+			isCompact={ isCompact }
+			showPopoverHeaderActions={ showPopoverHeaderActions }
 		/>
 	);
 }
diff --git a/packages/editor/src/components/post-schedule/label.js b/packages/editor/src/components/post-schedule/label.js
index b6b4430624763b..2b8819747e7e0c 100644
--- a/packages/editor/src/components/post-schedule/label.js
+++ b/packages/editor/src/components/post-schedule/label.js
@@ -10,10 +10,25 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the PostScheduleLabel component.
+ *
+ * @param {Object} props Props.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
 export default function PostScheduleLabel( props ) {
 	return usePostScheduleLabel( props );
 }
 
+/**
+ * Custom hook to get the label for post schedule.
+ *
+ * @param {Object}  options      Options for the hook.
+ * @param {boolean} options.full Whether to get the full label or not. Default is false.
+ *
+ * @return {string} The label for post schedule.
+ */
 export function usePostScheduleLabel( { full = false } = {} ) {
 	const { date, isFloating } = useSelect(
 		( select ) => ( {
@@ -33,7 +48,7 @@ export function getFullPostScheduleLabel( dateAttribute ) {
 
 	const timezoneAbbreviation = getTimezoneAbbreviation();
 	const formattedDate = dateI18n(
-		// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+		// translators: Use a non-breaking space between 'g:i' and 'a' if appropriate.
 		_x( 'F j, Y g:i\xa0a', 'post schedule full date format' ),
 		date
 	);
@@ -62,7 +77,7 @@ export function getPostScheduleLabel(
 		return sprintf(
 			// translators: %s: Time of day the post is scheduled for.
 			__( 'Today at %s' ),
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
 		);
 	}
@@ -74,14 +89,14 @@ export function getPostScheduleLabel(
 		return sprintf(
 			// translators: %s: Time of day the post is scheduled for.
 			__( 'Tomorrow at %s' ),
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			dateI18n( _x( 'g:i\xa0a', 'post schedule time format' ), date )
 		);
 	}
 
 	if ( date.getFullYear() === now.getFullYear() ) {
 		return dateI18n(
-			// translators: If using a space between 'g:i' and 'a', use a non-breaking sapce.
+			// translators: If using a space between 'g:i' and 'a', use a non-breaking space.
 			_x( 'F j g:i\xa0a', 'post schedule date format without year' ),
 			date
 		);
@@ -102,7 +117,7 @@ function getTimezoneAbbreviation() {
 	}
 
 	const symbol = timezone.offset < 0 ? '' : '+';
-	return `UTC${ symbol }${ timezone.offset }`;
+	return `UTC${ symbol }${ timezone.offsetFormatted }`;
 }
 
 function isTimezoneSameAsSiteTimezone( date ) {
diff --git a/packages/editor/src/components/post-schedule/panel.js b/packages/editor/src/components/post-schedule/panel.js
new file mode 100644
index 00000000000000..fd453a4667417f
--- /dev/null
+++ b/packages/editor/src/components/post-schedule/panel.js
@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostScheduleCheck from './check';
+import PostScheduleForm from './index';
+import { usePostScheduleLabel } from './label';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+
+const DESIGN_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+];
+
+/**
+ * Renders the Post Schedule Panel component.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostSchedulePanel() {
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const postType = useSelect(
+		( select ) => select( editorStore ).getCurrentPostType(),
+		[]
+	);
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			'aria-label': __( 'Change publish date' ),
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const label = usePostScheduleLabel();
+	const fullLabel = usePostScheduleLabel( { full: true } );
+	if ( DESIGN_POST_TYPES.includes( postType ) ) {
+		return null;
+	}
+
+	return (
+		<PostScheduleCheck>
+			<PostPanelRow label={ __( 'Publish' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					focusOnMount
+					className="editor-post-schedule__panel-dropdown"
+					contentClassName="editor-post-schedule__dialog"
+					renderToggle={ ( { onToggle, isOpen } ) => (
+						<Button
+							size="compact"
+							className="editor-post-schedule__dialog-toggle"
+							variant="tertiary"
+							tooltipPosition="middle left"
+							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post date.
+								__( 'Change date: %s' ),
+								label
+							) }
+							label={ fullLabel }
+							showTooltip={ label !== fullLabel }
+							aria-expanded={ isOpen }
+						>
+							{ label }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<PostScheduleForm onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
+		</PostScheduleCheck>
+	);
+}
diff --git a/packages/editor/src/components/post-schedule/style.scss b/packages/editor/src/components/post-schedule/style.scss
new file mode 100644
index 00000000000000..02ea48016f9696
--- /dev/null
+++ b/packages/editor/src/components/post-schedule/style.scss
@@ -0,0 +1,10 @@
+.editor-post-schedule__panel-dropdown {
+	width: 100%;
+}
+
+.editor-post-schedule__dialog {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+}
diff --git a/packages/editor/src/components/post-schedule/test/check.js b/packages/editor/src/components/post-schedule/test/check.js
index 26fc0193ece8d8..b892842e3ef8d7 100644
--- a/packages/editor/src/components/post-schedule/test/check.js
+++ b/packages/editor/src/components/post-schedule/test/check.js
@@ -3,25 +3,40 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostScheduleCheck } from '../check';
+import PostScheduleCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupMockSelect( hasPublishAction ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostScheduleCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ false }>
-				yes
-			</PostScheduleCheck>
-		);
+		setupMockSelect( false );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ true }>yes</PostScheduleCheck>
-		);
+		setupMockSelect( true );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
 } );
diff --git a/packages/editor/src/components/post-schedule/test/label.js b/packages/editor/src/components/post-schedule/test/label.js
index e4a4c0c4182101..adcda2a2365a26 100644
--- a/packages/editor/src/components/post-schedule/test/label.js
+++ b/packages/editor/src/components/post-schedule/test/label.js
@@ -23,9 +23,11 @@ describe( 'getFullPostScheduleLabel', () => {
 		} );
 
 		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
-		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm AEST' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm AEST' );
 	} );
 
 	it( "should show site's timezone offset", () => {
@@ -33,13 +35,15 @@ describe( 'getFullPostScheduleLabel', () => {
 
 		setSettings( {
 			...settings,
-			timezone: { offset: 10 },
+			timezone: { offsetFormatted: 10 },
 		} );
 
 		const label = getFullPostScheduleLabel( '2022-04-28T15:30:00' );
-		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+10' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2022 3:30\xa0pm UTC+10' );
 	} );
 } );
 
@@ -80,9 +84,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-04-28T15:30:00', { now } );
-		expect( label ).toBe( 'Today at 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'Today at 3:30\xa0pm' );
 	} );
 
 	it( "should show tomorrow if date is same day as now + 1 day and user timezone equals site's timezone", () => {
@@ -99,9 +105,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-04-29T15:30:00', { now } );
-		expect( label ).toBe( 'Tomorrow at 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'Tomorrow at 3:30\xa0pm' );
 	} );
 
 	it( "should hide year if date is same year as now and user timezone equals site's timezone", () => {
@@ -118,9 +126,11 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2022-12-25T15:30:00', { now } );
-		expect( label ).toBe( 'December 25 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'December 25 3:30\xa0pm' );
 	} );
 
 	it( "should show year if date is not same year as now and user timezone equals site's timezone", () => {
@@ -137,8 +147,10 @@ describe( 'getPostScheduleLabel', () => {
 		);
 
 		const label = getPostScheduleLabel( '2023-04-28T15:30:00', { now } );
-		expect( label ).toBe( 'April 28, 2023 3:30\xa0pm' );
 
+		// Reset date settings before potential failure of the expectation.
 		setSettings( settings );
+
+		expect( label ).toBe( 'April 28, 2023 3:30\xa0pm' );
 	} );
 } );
diff --git a/packages/editor/src/components/post-slug/check.js b/packages/editor/src/components/post-slug/check.js
deleted file mode 100644
index 80928e4cf1dece..00000000000000
--- a/packages/editor/src/components/post-slug/check.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Internal dependencies
- */
-import PostTypeSupportCheck from '../post-type-support-check';
-
-export default function PostSlugCheck( { children } ) {
-	return (
-		<PostTypeSupportCheck supportKeys="slug">
-			{ children }
-		</PostTypeSupportCheck>
-	);
-}
diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js
deleted file mode 100644
index fd897df5bbfbde..00000000000000
--- a/packages/editor/src/components/post-slug/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withDispatch, withSelect } from '@wordpress/data';
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { compose } from '@wordpress/compose';
-import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
-import { TextControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PostSlugCheck from './check';
-import { store as editorStore } from '../../store';
-
-export class PostSlug extends Component {
-	constructor( { postSlug, postTitle, postID } ) {
-		super( ...arguments );
-
-		this.state = {
-			editedSlug:
-				safeDecodeURIComponent( postSlug ) ||
-				cleanForSlug( postTitle ) ||
-				postID,
-		};
-
-		this.setSlug = this.setSlug.bind( this );
-	}
-
-	setSlug( event ) {
-		const { postSlug, onUpdateSlug } = this.props;
-		const { value } = event.target;
-
-		const editedSlug = cleanForSlug( value );
-
-		if ( editedSlug === postSlug ) {
-			return;
-		}
-
-		onUpdateSlug( editedSlug );
-	}
-
-	render() {
-		const { editedSlug } = this.state;
-		return (
-			<PostSlugCheck>
-				<TextControl
-					label={ __( 'Slug' ) }
-					autoComplete="off"
-					spellCheck="false"
-					value={ editedSlug }
-					onChange={ ( slug ) =>
-						this.setState( { editedSlug: slug } )
-					}
-					onBlur={ this.setSlug }
-					className="editor-post-slug"
-				/>
-			</PostSlugCheck>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } =
-			select( editorStore );
-
-		const { id } = getCurrentPost();
-		return {
-			postSlug: getEditedPostAttribute( 'slug' ),
-			postTitle: getEditedPostAttribute( 'title' ),
-			postID: id,
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost } = dispatch( editorStore );
-		return {
-			onUpdateSlug( slug ) {
-				editPost( { slug } );
-			},
-		};
-	} ),
-] )( PostSlug );
diff --git a/packages/editor/src/components/post-slug/test/check.js b/packages/editor/src/components/post-slug/test/check.js
deleted file mode 100644
index 5b5b4ce8a440f4..00000000000000
--- a/packages/editor/src/components/post-slug/test/check.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import PostSlugCheck from '../check';
-
-describe( 'PostSlugCheck', () => {
-	it( 'should render control', () => {
-		render( <PostSlugCheck>slug</PostSlugCheck> );
-
-		expect( screen.getByText( 'slug' ) ).toBeVisible();
-	} );
-} );
diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js
deleted file mode 100644
index 771f6c2f60bab6..00000000000000
--- a/packages/editor/src/components/post-slug/test/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { PostSlug } from '../';
-
-describe( 'PostSlug', () => {
-	it( 'should update slug with sanitized input', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
-		const onUpdateSlug = jest.fn();
-
-		render( <PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } /> );
-
-		const input = screen.getByRole( 'textbox', { name: 'Slug' } );
-		await user.clear( input );
-		await user.type( input, 'Foo Bar-Baz 9!' );
-		input.blur();
-
-		expect( onUpdateSlug ).toHaveBeenCalledWith( 'foo-bar-baz-9' );
-	} );
-} );
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
new file mode 100644
index 00000000000000..c2bf038875354d
--- /dev/null
+++ b/packages/editor/src/components/post-status/index.js
@@ -0,0 +1,278 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	CheckboxControl,
+	Dropdown,
+	__experimentalVStack as VStack,
+	TextControl,
+	RadioControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+import {
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import PostSticky from '../post-sticky';
+import { PrivatePostSchedule } from '../post-schedule';
+import { store as editorStore } from '../../store';
+
+const postStatusesInfo = {
+	'auto-draft': { label: __( 'Draft' ), icon: drafts },
+	draft: { label: __( 'Draft' ), icon: drafts },
+	pending: { label: __( 'Pending' ), icon: pending },
+	private: { label: __( 'Private' ), icon: notAllowed },
+	future: { label: __( 'Scheduled' ), icon: scheduled },
+	publish: { label: __( 'Published' ), icon: published },
+};
+
+export const STATUS_OPTIONS = [
+	{
+		label: __( 'Draft' ),
+		value: 'draft',
+		description: __( 'Not ready to publish.' ),
+	},
+	{
+		label: __( 'Pending' ),
+		value: 'pending',
+		description: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		label: __( 'Private' ),
+		value: 'private',
+		description: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		label: __( 'Scheduled' ),
+		value: 'future',
+		description: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		label: __( 'Published' ),
+		value: 'publish',
+		description: __( 'Visible to everyone.' ),
+	},
+];
+
+const DESIGN_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+];
+
+export default function PostStatus() {
+	const { status, date, password, postId, postType, canEdit } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostId,
+				getCurrentPostType,
+				getCurrentPost,
+			} = select( editorStore );
+			return {
+				status: getEditedPostAttribute( 'status' ),
+				date: getEditedPostAttribute( 'date' ),
+				password: getEditedPostAttribute( 'password' ),
+				postId: getCurrentPostId(),
+				postType: getCurrentPostType(),
+				canEdit:
+					getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
+			};
+		},
+		[]
+	);
+	const [ showPassword, setShowPassword ] = useState( !! password );
+	const passwordInputId = useInstanceId(
+		PostStatus,
+		'editor-change-status__password-input'
+	);
+	const { editEntityRecord } = useDispatch( coreStore );
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			'aria-label': __( 'Status & visibility' ),
+			headerTitle: __( 'Status & visibility' ),
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( DESIGN_POST_TYPES.includes( postType ) ) {
+		return null;
+	}
+
+	const updatePost = ( {
+		status: newStatus = status,
+		password: newPassword = password,
+		date: newDate = date,
+	} ) => {
+		editEntityRecord( 'postType', postType, postId, {
+			status: newStatus,
+			date: newDate,
+			password: newPassword,
+		} );
+	};
+
+	const handleTogglePassword = ( value ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			updatePost( { password: '' } );
+		}
+	};
+
+	const handleStatus = ( value ) => {
+		let newDate = date;
+		let newPassword = password;
+		if ( status === 'future' && new Date( date ) > new Date() ) {
+			newDate = null;
+		}
+		if ( value === 'private' && password ) {
+			newPassword = '';
+		}
+		updatePost( {
+			status: value,
+			date: newDate,
+			password: newPassword,
+		} );
+	};
+
+	return (
+		<PostPanelRow label={ __( 'Status' ) } ref={ setPopoverAnchor }>
+			{ canEdit ? (
+				<Dropdown
+					className="editor-post-status"
+					contentClassName="editor-change-status__content"
+					popoverProps={ popoverProps }
+					focusOnMount
+					renderToggle={ ( { onToggle, isOpen } ) => (
+						<Button
+							className="editor-post-status__toggle"
+							variant="tertiary"
+							size="compact"
+							onClick={ onToggle }
+							icon={ postStatusesInfo[ status ]?.icon }
+							aria-label={ sprintf(
+								// translators: %s: Current post status.
+								__( 'Change status: %s' ),
+								postStatusesInfo[ status ]?.label
+							) }
+							aria-expanded={ isOpen }
+						>
+							{ postStatusesInfo[ status ]?.label }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<>
+							<InspectorPopoverHeader
+								title={ __( 'Status & visibility' ) }
+								onClose={ onClose }
+							/>
+							<form>
+								<VStack spacing={ 4 }>
+									<RadioControl
+										className="editor-change-status__options"
+										hideLabelFromVision
+										label={ __( 'Status' ) }
+										options={ STATUS_OPTIONS }
+										onChange={ handleStatus }
+										selected={
+											status === 'auto-draft'
+												? 'draft'
+												: status
+										}
+									/>
+									{ status === 'future' && (
+										<div className="editor-change-status__publish-date-wrapper">
+											<PrivatePostSchedule
+												showPopoverHeaderActions={
+													false
+												}
+												isCompact
+											/>
+										</div>
+									) }
+									{ status !== 'private' && (
+										<VStack
+											as="fieldset"
+											spacing={ 4 }
+											className="editor-change-status__password-fieldset"
+										>
+											<CheckboxControl
+												__nextHasNoMarginBottom
+												label={ __(
+													'Password protected'
+												) }
+												help={ __(
+													'Only visible to those who know the password'
+												) }
+												checked={ showPassword }
+												onChange={
+													handleTogglePassword
+												}
+											/>
+											{ showPassword && (
+												<div className="editor-change-status__password-input">
+													<TextControl
+														label={ __(
+															'Password'
+														) }
+														onChange={ ( value ) =>
+															updatePost( {
+																password: value,
+															} )
+														}
+														value={ password }
+														placeholder={ __(
+															'Use a secure password'
+														) }
+														type="text"
+														id={ passwordInputId }
+														__next40pxDefaultSize
+														__nextHasNoMarginBottom
+														maxLength={ 255 }
+													/>
+												</div>
+											) }
+										</VStack>
+									) }
+									<PostSticky />
+								</VStack>
+							</form>
+						</>
+					) }
+				/>
+			) : (
+				<div className="editor-post-status is-read-only">
+					{ postStatusesInfo[ status ]?.label }
+				</div>
+			) }
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
new file mode 100644
index 00000000000000..670dc5fc35999a
--- /dev/null
+++ b/packages/editor/src/components/post-status/style.scss
@@ -0,0 +1,35 @@
+.editor-post-status {
+	max-width: 100%;
+
+	&.is-read-only {
+		padding: 6px 12px;
+	}
+
+	.editor-post-status__toggle.editor-post-status__toggle {
+		padding-top: $grid-unit-05;
+		padding-bottom: $grid-unit-05;
+	}
+}
+
+.editor-change-status__password-fieldset,
+.editor-change-status__publish-date-wrapper {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
+}
+
+.editor-change-status__content {
+	.components-popover__content {
+		min-width: 320px;
+		padding: $grid-unit-20;
+	}
+
+	.editor-change-status__password-legend {
+		padding: 0;
+		margin-bottom: $grid-unit-10;
+	}
+
+	p.components-base-control__help:has(.components-checkbox-control__help) {
+		margin-top: $grid-unit-05;
+	}
+
+}
diff --git a/packages/editor/src/components/post-sticky/check.js b/packages/editor/src/components/post-sticky/check.js
index 80007647f67f82..ede5c22f3c3e32 100644
--- a/packages/editor/src/components/post-sticky/check.js
+++ b/packages/editor/src/components/post-sticky/check.js
@@ -1,37 +1,33 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostStickyCheck( { hasStickyAction, postType, children } ) {
+/**
+ * Wrapper component that renders its children only if post has a sticky action.
+ *
+ * @param {Object}             props          Props.
+ * @param {React.ReactElement} props.children Children to be rendered.
+ *
+ * @return {React.ReactElement} The component to be rendered or null if post type is not 'post' or hasStickyAction is false.
+ */
+export default function PostStickyCheck( { children } ) {
+	const { hasStickyAction, postType } = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
+		return {
+			hasStickyAction: post._links?.[ 'wp:action-sticky' ] ?? false,
+			postType: select( editorStore ).getCurrentPostType(),
+		};
+	}, [] );
+
 	if ( postType !== 'post' || ! hasStickyAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const post = select( editorStore ).getCurrentPost();
-		return {
-			hasStickyAction: get(
-				post,
-				[ '_links', 'wp:action-sticky' ],
-				false
-			),
-			postType: select( editorStore ).getCurrentPostType(),
-		};
-	} ),
-] )( PostStickyCheck );
diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
index 253b927f0240c1..6f5b914cb2f352 100644
--- a/packages/editor/src/components/post-sticky/index.js
+++ b/packages/editor/src/components/post-sticky/index.js
@@ -3,8 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { CheckboxControl } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,31 +11,29 @@ import { compose } from '@wordpress/compose';
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
 
-export function PostSticky( { onUpdateSticky, postSticky = false } ) {
+/**
+ * Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostSticky() {
+	const postSticky = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getEditedPostAttribute( 'sticky' ) ?? false
+		);
+	}, [] );
+	const { editPost } = useDispatch( editorStore );
+
 	return (
 		<PostStickyCheck>
 			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={ __( 'Stick to the top of the blog' ) }
+				className="editor-post-sticky__checkbox-control"
+				label={ __( 'Sticky' ) }
+				help={ __( 'Pin this post to the top of the blog' ) }
 				checked={ postSticky }
-				onChange={ () => onUpdateSticky( ! postSticky ) }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
+				__nextHasNoMarginBottom
 			/>
 		</PostStickyCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postSticky:
-				select( editorStore ).getEditedPostAttribute( 'sticky' ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		return {
-			onUpdateSticky( postSticky ) {
-				dispatch( editorStore ).editPost( { sticky: postSticky } );
-			},
-		};
-	} ),
-] )( PostSticky );
diff --git a/packages/editor/src/components/post-sticky/panel.js b/packages/editor/src/components/post-sticky/panel.js
new file mode 100644
index 00000000000000..b5ede0c1ab8825
--- /dev/null
+++ b/packages/editor/src/components/post-sticky/panel.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import PostStickyForm from './';
+import PostStickyCheck from './check';
+
+export function PostStickyPanel() {
+	return (
+		<PostStickyCheck>
+			<PostPanelRow>
+				<PostStickyForm />
+			</PostPanelRow>
+		</PostStickyCheck>
+	);
+}
+
+export default PostStickyPanel;
diff --git a/packages/editor/src/components/post-sticky/style.scss b/packages/editor/src/components/post-sticky/style.scss
new file mode 100644
index 00000000000000..475332e6790005
--- /dev/null
+++ b/packages/editor/src/components/post-sticky/style.scss
@@ -0,0 +1,4 @@
+.editor-post-sticky__checkbox-control {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/post-sticky/test/index.js b/packages/editor/src/components/post-sticky/test/index.js
index f637ec89e9582e..b6dfd18a0ef828 100644
--- a/packages/editor/src/components/post-sticky/test/index.js
+++ b/packages/editor/src/components/post-sticky/test/index.js
@@ -3,40 +3,55 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostStickyCheck } from '../check';
+import PostStickyCheck from '../check';
+
+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;
+} );
+
+function setupUseSelectMock( { hasStickyAction, postType } ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getCurrentPostType: () => postType,
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-sticky': hasStickyAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostSticky', () => {
 	it( 'should not render anything if the post type is not "post"', () => {
-		render(
-			<PostStickyCheck postType="page" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: true, postType: 'page' } );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if post doesn't support stickying", () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ false }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
+		setupUseSelectMock( { hasStickyAction: false, postType: 'post' } );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
 		expect(
-			screen.queryByText( 'Can Toggle Sticky' )
+			screen.queryByText( 'Can Show Sticky' )
 		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the post supports stickying', () => {
-		render(
-			<PostStickyCheck postType="post" hasStickyAction={ true }>
-				Can Toggle Sticky
-			</PostStickyCheck>
-		);
-		expect( screen.getByText( 'Can Toggle Sticky' ) ).toBeVisible();
+		setupUseSelectMock( { hasStickyAction: true, postType: 'post' } );
+		render( <PostStickyCheck>Can Show Sticky</PostStickyCheck> );
+		expect( screen.getByText( 'Can Show Sticky' ) ).toBeVisible();
 	} );
 } );
diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js
index ae3bc4c9aa79aa..6a41e1fad597a2 100644
--- a/packages/editor/src/components/post-switch-to-draft-button/index.js
+++ b/packages/editor/src/components/post-switch-to-draft-button/index.js
@@ -6,80 +6,80 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, useViewportMatch } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-function PostSwitchToDraftButton( {
-	isSaving,
-	isPublished,
-	isScheduled,
-	onClick,
-} ) {
-	const isMobileViewport = useViewportMatch( 'small', '<' );
+/**
+ * Renders a button component that allows the user to switch a post to draft status.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostSwitchToDraftButton() {
+	deprecated( 'wp.editor.PostSwitchToDraftButton', {
+		since: '6.7',
+		version: '6.9',
+	} );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
-	if ( ! isPublished && ! isScheduled ) {
-		return null;
-	}
+	const { editPost, savePost } = useDispatch( editorStore );
+	const { isSaving, isPublished, isScheduled } = useSelect( ( select ) => {
+		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
+			select( editorStore );
+		return {
+			isSaving: isSavingPost(),
+			isPublished: isCurrentPostPublished(),
+			isScheduled: isCurrentPostScheduled(),
+		};
+	}, [] );
+
+	const isDisabled = isSaving || ( ! isPublished && ! isScheduled );
 
 	let alertMessage;
+	let confirmButtonText;
 	if ( isPublished ) {
 		alertMessage = __( 'Are you sure you want to unpublish this post?' );
+		confirmButtonText = __( 'Unpublish' );
 	} else if ( isScheduled ) {
 		alertMessage = __( 'Are you sure you want to unschedule this post?' );
+		confirmButtonText = __( 'Unschedule' );
 	}
 
 	const handleConfirm = () => {
 		setShowConfirmDialog( false );
-		onClick();
+		editPost( { status: 'draft' } );
+		savePost();
 	};
 
 	return (
 		<>
 			<Button
+				__next40pxDefaultSize
 				className="editor-post-switch-to-draft"
 				onClick={ () => {
-					setShowConfirmDialog( true );
+					if ( ! isDisabled ) {
+						setShowConfirmDialog( true );
+					}
 				} }
-				disabled={ isSaving }
-				variant="tertiary"
+				aria-disabled={ isDisabled }
+				variant="secondary"
+				style={ { flexGrow: '1', justifyContent: 'center' } }
 			>
-				{ isMobileViewport ? __( 'Draft' ) : __( 'Switch to draft' ) }
+				{ __( 'Switch to draft' ) }
 			</Button>
 			<ConfirmDialog
 				isOpen={ showConfirmDialog }
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ confirmButtonText }
 			>
 				{ alertMessage }
 			</ConfirmDialog>
 		</>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
-			select( editorStore );
-		return {
-			isSaving: isSavingPost(),
-			isPublished: isCurrentPostPublished(),
-			isScheduled: isCurrentPostScheduled(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost, savePost } = dispatch( editorStore );
-		return {
-			onClick: () => {
-				editPost( { status: 'draft' } );
-				savePost();
-			},
-		};
-	} ),
-] )( PostSwitchToDraftButton );
diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js
new file mode 100644
index 00000000000000..5f965c01503f5c
--- /dev/null
+++ b/packages/editor/src/components/post-sync-status/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+/**
+ * Renders the sync status of a post.
+ *
+ * @return {React.ReactNode} The rendered sync status component.
+ */
+export default function PostSyncStatus() {
+	const { syncStatus, postType } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const meta = getEditedPostAttribute( 'meta' );
+
+		// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+		const currentSyncStatus =
+			meta?.wp_pattern_sync_status === 'unsynced'
+				? 'unsynced'
+				: getEditedPostAttribute( 'wp_pattern_sync_status' );
+
+		return {
+			syncStatus: currentSyncStatus,
+			postType: getEditedPostAttribute( 'type' ),
+		};
+	} );
+
+	if ( postType !== 'wp_block' ) {
+		return null;
+	}
+
+	return (
+		<PostPanelRow label={ __( 'Sync status' ) }>
+			<div className="editor-post-sync-status__value">
+				{ syncStatus === 'unsynced'
+					? _x( 'Not synced', 'pattern (singular)' )
+					: _x( 'Synced', 'pattern (singular)' ) }
+			</div>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/post-sync-status/style.scss b/packages/editor/src/components/post-sync-status/style.scss
new file mode 100644
index 00000000000000..d5ee21cad8ee46
--- /dev/null
+++ b/packages/editor/src/components/post-sync-status/style.scss
@@ -0,0 +1,4 @@
+.editor-post-sync-status__value {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
diff --git a/packages/editor/src/components/post-taxonomies/README.md b/packages/editor/src/components/post-taxonomies/README.md
index 90dcfcf95eb9df..69658558b5d288 100644
--- a/packages/editor/src/components/post-taxonomies/README.md
+++ b/packages/editor/src/components/post-taxonomies/README.md
@@ -3,7 +3,7 @@
 `PostTaxonomies` is a component used to render the taxonomy picker
 UI. It uses the `FlatTermSelector` or `HierarchicalTermSelector` components
 based on the value of the `hierarchical` argument specified in
-[register_taxonomy](https://codex.wordpress.org/Function_Reference/register_taxonomy).
+[register_taxonomy](https://developer.wordpress.org/reference/functions/register_taxonomy).
 
 The output of the respective taxonomy components can be customized using
 the following filter:
@@ -19,7 +19,7 @@ For example, to render alternative UI for the taxonomy `product-type`,
 we can render custom markup or use the original component as shown below.
 
 ```js
-var el = wp.element.createElement;
+var el = React.createElement;
 
 function customizeProductTypeSelector( OriginalComponent ) {
 	return function ( props ) {
@@ -42,7 +42,7 @@ Or, to use the hierarchical term selector with a non-hierarchical taxonomy `trac
 you can set the `HierarchicalTermSelector` component as shown below.
 
 ```js
-const el = wp.element.createElement;
+const el = React.createElement;
 const HierarchicalTermSelector = wp.editor.PostTaxonomiesHierarchicalTermSelector;
 
 function customizeTrackSelector( OriginalComponent ) {
diff --git a/packages/editor/src/components/post-taxonomies/check.js b/packages/editor/src/components/post-taxonomies/check.js
index a9d0c7e0cf97c3..ce3db319ae2e8a 100644
--- a/packages/editor/src/components/post-taxonomies/check.js
+++ b/packages/editor/src/components/post-taxonomies/check.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -10,22 +9,27 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
-	const hasTaxonomies = taxonomies?.some( ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
+/**
+ * Renders the children components only if the current post type has taxonomies.
+ *
+ * @param {Object}          props          The component props.
+ * @param {React.ReactNode} props.children The children components to render.
+ *
+ * @return {React.ReactElement} The rendered children components or null if the current post type has no taxonomies.
+ */
+export default function PostTaxonomiesCheck( { children } ) {
+	const hasTaxonomies = useSelect( ( select ) => {
+		const postType = select( editorStore ).getCurrentPostType();
+		const taxonomies = select( coreStore ).getTaxonomies( {
+			per_page: -1,
+		} );
+		return taxonomies?.some( ( taxonomy ) =>
+			taxonomy.types.includes( postType )
+		);
+	}, [] );
 	if ( ! hasTaxonomies ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomiesCheck );
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..890175534c8b4a 100644
--- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -1,20 +1,19 @@
-/**
- * External dependencies
- */
-import { find, get } from 'lodash';
-import escapeHtml from 'escape-html';
-
 /**
  * WordPress dependencies
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { useEffect, useMemo, useState } from '@wordpress/element';
-import { FormTokenField, withFilters } from '@wordpress/components';
+import { Fragment, useEffect, useMemo, useState } from '@wordpress/element';
+import {
+	FormTokenField,
+	withFilters,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
-import apiFetch from '@wordpress/api-fetch';
 import { speak } from '@wordpress/a11y';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -32,13 +31,14 @@ import MostUsedTerms from './most-used-terms';
 const EMPTY_ARRAY = [];
 
 /**
- * Module constants
+ * How the max suggestions limit was chosen:
+ *  - Matches the `per_page` range set by the REST API.
+ *  - Can't use "unbound" query. The `FormTokenField` needs a fixed number.
+ *  - Matches default for `FormTokenField`.
  */
-const MAX_TERMS_SUGGESTIONS = 20;
+const MAX_TERMS_SUGGESTIONS = 100;
 const DEFAULT_QUERY = {
 	per_page: MAX_TERMS_SUGGESTIONS,
-	orderby: 'count',
-	order: 'desc',
 	_fields: 'id,name',
 	context: 'view',
 };
@@ -48,39 +48,47 @@ const isSameTermName = ( termA, termB ) =>
 	unescapeString( termB ).toLowerCase();
 
 const termNamesToIds = ( names, terms ) => {
-	return names.map(
-		( termName ) =>
-			find( terms, ( term ) => isSameTermName( term.name, termName ) ).id
-	);
+	return names
+		.map(
+			( termName ) =>
+				terms.find( ( term ) => isSameTermName( term.name, termName ) )
+					?.id
+		)
+		.filter( ( id ) => id !== undefined );
 };
 
-// Tries to create a term or fetch it if it already exists.
-function findOrCreateTerm( termName, restBase, namespace ) {
-	const escapedTermName = escapeHtml( termName );
-
-	return apiFetch( {
-		path: `/${ namespace }/${ restBase }`,
-		method: 'POST',
-		data: { name: escapedTermName },
-	} )
-		.catch( ( error ) => {
-			if ( error.code !== 'term_exists' ) {
-				return Promise.reject( error );
-			}
-
-			return Promise.resolve( {
-				id: error.data.term_id,
-				name: termName,
-			} );
-		} )
-		.then( unescapeTerm );
-}
+const Wrapper = ( { children, __nextHasNoMarginBottom } ) =>
+	__nextHasNoMarginBottom ? (
+		<VStack spacing={ 4 }>{ children }</VStack>
+	) : (
+		<Fragment>{ children }</Fragment>
+	);
 
-export function FlatTermSelector( { slug } ) {
+/**
+ * Renders a flat term selector component.
+ *
+ * @param {Object}  props                         The component props.
+ * @param {string}  props.slug                    The slug of the taxonomy.
+ * @param {boolean} props.__nextHasNoMarginBottom Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.)
+ *
+ * @return {React.ReactNode} The rendered flat term selector component.
+ */
+export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
 
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.editor.PostTaxonomiesFlatTermSelector',
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
+			}
+		);
+	}
+
 	const {
 		terms,
 		termIds,
@@ -102,34 +110,24 @@ export function FlatTermSelector( { slug } ) {
 
 			const query = {
 				...DEFAULT_QUERY,
-				include: _termIds.join( ',' ),
+				include: _termIds?.join( ',' ),
 				per_page: -1,
 			};
 
 			return {
 				hasCreateAction: _taxonomy
-					? get(
-							post,
-							[
-								'_links',
-								'wp:action-create-' + _taxonomy.rest_base,
-							],
-							false
-					  )
+					? post._links?.[
+							'wp:action-create-' + _taxonomy.rest_base
+					  ] ?? false
 					: false,
 				hasAssignAction: _taxonomy
-					? get(
-							post,
-							[
-								'_links',
-								'wp:action-assign-' + _taxonomy.rest_base,
-							],
-							false
-					  )
+					? post._links?.[
+							'wp:action-assign-' + _taxonomy.rest_base
+					  ] ?? false
 					: false,
 				taxonomy: _taxonomy,
 				termIds: _termIds,
-				terms: _termIds.length
+				terms: _termIds?.length
 					? getEntityRecords( 'taxonomy', slug, query )
 					: EMPTY_ARRAY,
 				hasResolvedTerms: hasFinishedResolution( 'getEntityRecords', [
@@ -155,7 +153,7 @@ export function FlatTermSelector( { slug } ) {
 					: EMPTY_ARRAY,
 			};
 		},
-		[ search ]
+		[ search, slug ]
 	);
 
 	// Update terms state only after the selectors are resolved.
@@ -178,11 +176,31 @@ export function FlatTermSelector( { slug } ) {
 	}, [ searchResults ] );
 
 	const { editPost } = useDispatch( editorStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	if ( ! hasAssignAction ) {
 		return null;
 	}
 
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord( 'taxonomy', slug, term, {
+				throwOnError: true,
+			} );
+			return unescapeTerm( newTerm );
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
+			}
+
+			return {
+				id: error.data.term_id,
+				name: term.name,
+			};
+		}
+	}
+
 	function onUpdateTerms( newTermIds ) {
 		editPost( { [ taxonomy.rest_base ]: newTermIds } );
 	}
@@ -203,7 +221,7 @@ export function FlatTermSelector( { slug } ) {
 
 		const newTermNames = uniqueTerms.filter(
 			( termName ) =>
-				! find( availableTerms, ( term ) =>
+				! availableTerms.find( ( term ) =>
 					isSameTermName( term.name, termName )
 				)
 		);
@@ -213,26 +231,33 @@ export function FlatTermSelector( { slug } ) {
 		setValues( uniqueTerms );
 
 		if ( newTermNames.length === 0 ) {
-			return onUpdateTerms(
-				termNamesToIds( uniqueTerms, availableTerms )
-			);
+			onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
+			return;
 		}
 
 		if ( ! hasCreateAction ) {
 			return;
 		}
 
-		const namespace = taxonomy?.rest_namespace ?? 'wp/v2';
 		Promise.all(
 			newTermNames.map( ( termName ) =>
-				findOrCreateTerm( termName, taxonomy.rest_base, namespace )
+				findOrCreateTerm( { name: termName } )
 			)
-		).then( ( newTerms ) => {
-			const newAvailableTerms = availableTerms.concat( newTerms );
-			return onUpdateTerms(
-				termNamesToIds( uniqueTerms, newAvailableTerms )
-			);
-		} );
+		)
+			.then( ( newTerms ) => {
+				const newAvailableTerms = availableTerms.concat( newTerms );
+				onUpdateTerms(
+					termNamesToIds( uniqueTerms, newAvailableTerms )
+				);
+			} )
+			.catch( ( error ) => {
+				createErrorNotice( error.message, {
+					type: 'snackbar',
+				} );
+				// In case of a failure, try assigning available terms.
+				// This will invalidate the optimistic update.
+				onUpdateTerms( termNamesToIds( uniqueTerms, availableTerms ) );
+			} );
 	}
 
 	function appendTerm( newTerm ) {
@@ -241,30 +266,23 @@ export function FlatTermSelector( { slug } ) {
 		}
 
 		const newTermIds = [ ...termIds, newTerm.id ];
+		const defaultName = slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' );
 		const termAddedMessage = sprintf(
 			/* translators: %s: term name. */
 			_x( '%s added', 'term' ),
-			get(
-				taxonomy,
-				[ 'labels', 'singular_name' ],
-				slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' )
-			)
+			taxonomy?.labels?.singular_name ?? defaultName
 		);
 
 		speak( termAddedMessage, 'assertive' );
 		onUpdateTerms( newTermIds );
 	}
 
-	const newTermLabel = get(
-		taxonomy,
-		[ 'labels', 'add_new_item' ],
-		slug === 'post_tag' ? __( 'Add new tag' ) : __( 'Add new Term' )
-	);
-	const singularName = get(
-		taxonomy,
-		[ 'labels', 'singular_name' ],
-		slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' )
-	);
+	const newTermLabel =
+		taxonomy?.labels?.add_new_item ??
+		( slug === 'post_tag' ? __( 'Add new tag' ) : __( 'Add new Term' ) );
+	const singularName =
+		taxonomy?.labels?.singular_name ??
+		( slug === 'post_tag' ? __( 'Tag' ) : __( 'Term' ) );
 	const termAddedLabel = sprintf(
 		/* translators: %s: term name. */
 		_x( '%s added', 'term' ),
@@ -282,8 +300,9 @@ export function FlatTermSelector( { slug } ) {
 	);
 
 	return (
-		<>
+		<Wrapper __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
 			<FormTokenField
+				__next40pxDefaultSize
 				value={ values }
 				suggestions={ suggestions }
 				onChange={ onChange }
@@ -295,9 +314,10 @@ export function FlatTermSelector( { slug } ) {
 					removed: termRemovedLabel,
 					remove: removeTermLabel,
 				} }
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</>
+		</Wrapper>
 	);
 }
 
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..ef2019ac3f0f44 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -1,24 +1,24 @@
-/**
- * External dependencies
- */
-import { find, get, unescape as unescapeString } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 import {
 	Button,
 	CheckboxControl,
 	TextControl,
 	TreeSelect,
 	withFilters,
+	Flex,
+	FlexItem,
+	SearchControl,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal 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 ) ) &&
@@ -150,7 +150,7 @@ export function getFilterMatcher( filterValue ) {
  *
  * @param {Object} props      Component props.
  * @param {string} props.slug Taxonomy slug.
- * @return {WPElement}        Hierarchical term selector component.
+ * @return {Element}        Hierarchical term selector component.
  */
 export function HierarchicalTermSelector( { slug } ) {
 	const [ adding, setAdding ] = useState( false );
@@ -178,27 +178,18 @@ export function HierarchicalTermSelector( { slug } ) {
 			const { getTaxonomy, getEntityRecords, isResolving } =
 				select( coreStore );
 			const _taxonomy = getTaxonomy( slug );
+			const post = getCurrentPost();
 
 			return {
 				hasCreateAction: _taxonomy
-					? get(
-							getCurrentPost(),
-							[
-								'_links',
-								'wp:action-create-' + _taxonomy.rest_base,
-							],
-							false
-					  )
+					? post._links?.[
+							'wp:action-create-' + _taxonomy.rest_base
+					  ] ?? false
 					: false,
 				hasAssignAction: _taxonomy
-					? get(
-							getCurrentPost(),
-							[
-								'_links',
-								'wp:action-assign-' + _taxonomy.rest_base,
-							],
-							false
-					  )
+					? post._links?.[
+							'wp:action-assign-' + _taxonomy.rest_base
+					  ] ?? false
 					: false,
 				terms: _taxonomy
 					? getEditedPostAttribute( _taxonomy.rest_base )
@@ -227,6 +218,8 @@ export function HierarchicalTermSelector( { slug } ) {
 		[ availableTerms ]
 	);
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+
 	if ( ! hasAssignAction ) {
 		return null;
 	}
@@ -238,7 +231,9 @@ export function HierarchicalTermSelector( { slug } ) {
 	 * @return {Promise} A promise that resolves to save term object.
 	 */
 	const addTerm = ( term ) => {
-		return saveEntityRecord( 'taxonomy', slug, term );
+		return saveEntityRecord( 'taxonomy', slug, term, {
+			throwOnError: true,
+		} );
 	};
 
 	/**
@@ -300,20 +295,24 @@ export function HierarchicalTermSelector( { slug } ) {
 			return;
 		}
 		setAdding( true );
-
-		const newTerm = await addTerm( {
-			name: formName,
-			parent: formParent ? formParent : undefined,
-		} );
-
+		let newTerm;
+		try {
+			newTerm = await addTerm( {
+				name: formName,
+				parent: formParent ? formParent : undefined,
+			} );
+		} catch ( error ) {
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+			} );
+			return;
+		}
+		const defaultName =
+			slug === 'category' ? __( 'Category' ) : __( 'Term' );
 		const termAddedMessage = sprintf(
-			/* translators: %s: taxonomy name */
+			/* translators: %s: term name. */
 			_x( '%s added', 'term' ),
-			get(
-				taxonomy,
-				[ 'labels', 'singular_name' ],
-				slug === 'category' ? __( 'Category' ) : __( 'Term' )
-			)
+			taxonomy?.labels?.singular_name ?? defaultName
 		);
 		speak( termAddedMessage, 'assertive' );
 		setAdding( false );
@@ -342,7 +341,7 @@ export function HierarchicalTermSelector( { slug } ) {
 
 		const resultCount = getResultCount( newFilteredTermsTree );
 		const resultsFoundMessage = sprintf(
-			/* translators: %d: number of results */
+			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', resultCount ),
 			resultCount
 		);
@@ -364,7 +363,7 @@ export function HierarchicalTermSelector( { slug } ) {
 							const termId = parseInt( term.id, 10 );
 							onChange( termId );
 						} }
-						label={ unescapeString( term.name ) }
+						label={ decodeEntities( term.name ) }
 					/>
 					{ !! term.children.length && (
 						<div className="editor-post-taxonomies__hierarchical-terms-subchoices">
@@ -381,11 +380,9 @@ export function HierarchicalTermSelector( { slug } ) {
 		fallbackIsCategory,
 		fallbackIsNotCategory
 	) =>
-		get(
-			taxonomy,
-			[ 'labels', labelProperty ],
-			slug === 'category' ? fallbackIsCategory : fallbackIsNotCategory
-		);
+		taxonomy?.labels?.[ labelProperty ] ??
+		( slug === 'category' ? fallbackIsCategory : fallbackIsNotCategory );
+
 	const newTermButtonLabel = labelWithFallback(
 		'add_new_item',
 		__( 'Add new category' ),
@@ -403,20 +400,18 @@ export function HierarchicalTermSelector( { slug } ) {
 	);
 	const noParentOption = `— ${ parentSelectLabel } —`;
 	const newTermSubmitLabel = newTermButtonLabel;
-	const filterLabel = get(
-		taxonomy,
-		[ 'labels', 'search_items' ],
-		__( 'Search Terms' )
-	);
-	const groupLabel = get( taxonomy, [ 'name' ], __( 'Terms' ) );
+	const filterLabel = taxonomy?.labels?.search_items ?? __( 'Search Terms' );
+	const groupLabel = taxonomy?.name ?? __( 'Terms' );
 	const showFilter = availableTerms.length >= MIN_TERMS_COUNT_FOR_FILTER;
 
 	return (
-		<>
+		<Flex direction="column" gap="4">
 			{ showFilter && (
-				<TextControl
-					className="editor-post-taxonomies__hierarchical-terms-filter"
+				<SearchControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ filterLabel }
+					placeholder={ filterLabel }
 					value={ filterValue }
 					onChange={ setFilter }
 				/>
@@ -432,43 +427,55 @@ export function HierarchicalTermSelector( { slug } ) {
 				) }
 			</div>
 			{ ! loading && hasCreateAction && (
-				<Button
-					onClick={ onToggleForm }
-					className="editor-post-taxonomies__hierarchical-terms-add"
-					aria-expanded={ showForm }
-					variant="link"
-				>
-					{ newTermButtonLabel }
-				</Button>
+				<FlexItem>
+					<Button
+						__next40pxDefaultSize
+						onClick={ onToggleForm }
+						className="editor-post-taxonomies__hierarchical-terms-add"
+						aria-expanded={ showForm }
+						variant="link"
+					>
+						{ newTermButtonLabel }
+					</Button>
+				</FlexItem>
 			) }
 			{ showForm && (
 				<form onSubmit={ onAddTerm }>
-					<TextControl
-						className="editor-post-taxonomies__hierarchical-terms-input"
-						label={ newTermLabel }
-						value={ formName }
-						onChange={ onChangeFormName }
-						required
-					/>
-					{ !! availableTerms.length && (
-						<TreeSelect
-							label={ parentSelectLabel }
-							noOptionLabel={ noParentOption }
-							onChange={ onChangeFormParent }
-							selectedId={ formParent }
-							tree={ availableTermsTree }
+					<Flex direction="column" gap="4">
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							className="editor-post-taxonomies__hierarchical-terms-input"
+							label={ newTermLabel }
+							value={ formName }
+							onChange={ onChangeFormName }
+							required
 						/>
-					) }
-					<Button
-						variant="secondary"
-						type="submit"
-						className="editor-post-taxonomies__hierarchical-terms-submit"
-					>
-						{ newTermSubmitLabel }
-					</Button>
+						{ !! availableTerms.length && (
+							<TreeSelect
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ parentSelectLabel }
+								noOptionLabel={ noParentOption }
+								onChange={ onChangeFormParent }
+								selectedId={ formParent }
+								tree={ availableTermsTree }
+							/>
+						) }
+						<FlexItem>
+							<Button
+								__next40pxDefaultSize
+								variant="secondary"
+								type="submit"
+								className="editor-post-taxonomies__hierarchical-terms-submit"
+							>
+								{ newTermSubmitLabel }
+							</Button>
+						</FlexItem>
+					</Flex>
 				</form>
 			) }
-		</>
+		</Flex>
 	);
 }
 
diff --git a/packages/editor/src/components/post-taxonomies/index.js b/packages/editor/src/components/post-taxonomies/index.js
index bd89755275cd94..dc2345fd6197f7 100644
--- a/packages/editor/src/components/post-taxonomies/index.js
+++ b/packages/editor/src/components/post-taxonomies/index.js
@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -20,28 +14,35 @@ import { store as editorStore } from '../../store';
 
 const identity = ( x ) => x;
 
-export function PostTaxonomies( {
-	postType,
-	taxonomies,
-	taxonomyWrapper = identity,
-} ) {
-	const availableTaxonomies = filter( taxonomies, ( taxonomy ) =>
-		taxonomy.types.includes( postType )
-	);
-	const visibleTaxonomies = filter(
-		availableTaxonomies,
-		// In some circumstances .visibility can end up as undefined so optional chaining operator required.
-		// https://github.com/WordPress/gutenberg/issues/40326
-		( taxonomy ) => taxonomy.visibility?.show_ui
+export function PostTaxonomies( { taxonomyWrapper = identity } ) {
+	const { postType, taxonomies } = useSelect( ( select ) => {
+		return {
+			postType: select( editorStore ).getCurrentPostType(),
+			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
+		};
+	}, [] );
+	const visibleTaxonomies = ( taxonomies ?? [] ).filter(
+		( taxonomy ) =>
+			// In some circumstances .visibility can end up as undefined so optional chaining operator required.
+			// https://github.com/WordPress/gutenberg/issues/40326
+			taxonomy.types.includes( postType ) && taxonomy.visibility?.show_ui
 	);
+
 	return visibleTaxonomies.map( ( taxonomy ) => {
 		const TaxonomyComponent = taxonomy.hierarchical
 			? HierarchicalTermSelector
 			: FlatTermSelector;
+		const taxonomyComponentProps = {
+			slug: taxonomy.slug,
+			...( taxonomy.hierarchical
+				? {}
+				: { __nextHasNoMarginBottom: true } ),
+		};
+
 		return (
 			<Fragment key={ `taxonomy-${ taxonomy.slug }` }>
 				{ taxonomyWrapper(
-					<TaxonomyComponent slug={ taxonomy.slug } />,
+					<TaxonomyComponent { ...taxonomyComponentProps } />,
 					taxonomy
 				) }
 			</Fragment>
@@ -49,11 +50,12 @@ export function PostTaxonomies( {
 	} );
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
-		};
-	} ),
-] )( PostTaxonomies );
+/**
+ * Renders the taxonomies associated with a post.
+ *
+ * @param {Object}   props                 The component props.
+ * @param {Function} props.taxonomyWrapper The wrapper function for each taxonomy component.
+ *
+ * @return {Array} An array of JSX elements representing the visible taxonomies.
+ */
+export default PostTaxonomies;
diff --git a/packages/editor/src/components/post-taxonomies/most-used-terms.js b/packages/editor/src/components/post-taxonomies/most-used-terms.js
index d90f0295e40fc0..639e5752c80013 100644
--- a/packages/editor/src/components/post-taxonomies/most-used-terms.js
+++ b/packages/editor/src/components/post-taxonomies/most-used-terms.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,24 +21,26 @@ const DEFAULT_QUERY = {
 };
 
 export default function MostUsedTerms( { onSelect, taxonomy } ) {
-	const { _terms, showTerms } = useSelect( ( select ) => {
-		const mostUsedTerms = select( coreStore ).getEntityRecords(
-			'taxonomy',
-			taxonomy.slug,
-			DEFAULT_QUERY
-		);
-		return {
-			_terms: mostUsedTerms,
-			showTerms: mostUsedTerms?.length >= MIN_MOST_USED_TERMS,
-		};
-	}, [] );
+	const { _terms, showTerms } = useSelect(
+		( select ) => {
+			const mostUsedTerms = select( coreStore ).getEntityRecords(
+				'taxonomy',
+				taxonomy.slug,
+				DEFAULT_QUERY
+			);
+			return {
+				_terms: mostUsedTerms,
+				showTerms: mostUsedTerms?.length >= MIN_MOST_USED_TERMS,
+			};
+		},
+		[ taxonomy.slug ]
+	);
 
 	if ( ! showTerms ) {
 		return null;
 	}
 
 	const terms = unescapeTerms( _terms );
-	const label = get( taxonomy, [ 'labels', 'most_used' ] );
 
 	return (
 		<div className="editor-post-taxonomies__flat-term-most-used">
@@ -51,7 +48,7 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 				as="h3"
 				className="editor-post-taxonomies__flat-term-most-used-label"
 			>
-				{ label }
+				{ taxonomy.labels.most_used }
 			</BaseControl.VisualLabel>
 			{ /*
 			 * Disable reason: The `list` ARIA role is redundant but
@@ -65,6 +62,7 @@ export default function MostUsedTerms( { onSelect, taxonomy } ) {
 				{ terms.map( ( term ) => (
 					<li key={ term.id }>
 						<Button
+							__next40pxDefaultSize
 							variant="link"
 							onClick={ () => onSelect( term ) }
 						>
diff --git a/packages/editor/src/components/post-taxonomies/panel.js b/packages/editor/src/components/post-taxonomies/panel.js
new file mode 100644
index 00000000000000..f75fa74cc3d2e9
--- /dev/null
+++ b/packages/editor/src/components/post-taxonomies/panel.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTaxonomiesForm from './index';
+import PostTaxonomiesCheck from './check';
+
+/**
+ * Renders a panel for a specific taxonomy.
+ *
+ * @param {Object}          props          The component props.
+ * @param {Object}          props.taxonomy The taxonomy object.
+ * @param {React.ReactNode} props.children The child components.
+ *
+ * @return {React.ReactNode} The rendered taxonomy panel.
+ */
+function TaxonomyPanel( { taxonomy, children } ) {
+	const slug = taxonomy?.slug;
+	const panelName = slug ? `taxonomy-panel-${ slug }` : '';
+	const { isEnabled, isOpened } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelOpened } =
+				select( editorStore );
+			return {
+				isEnabled: slug ? isEditorPanelEnabled( panelName ) : false,
+				isOpened: slug ? isEditorPanelOpened( panelName ) : false,
+			};
+		},
+		[ panelName, slug ]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const taxonomyMenuName = taxonomy?.labels?.menu_name;
+	if ( ! taxonomyMenuName ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ taxonomyMenuName }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( panelName ) }
+		>
+			{ children }
+		</PanelBody>
+	);
+}
+
+/**
+ * Component that renders the post taxonomies panel.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostTaxonomies() {
+	return (
+		<PostTaxonomiesCheck>
+			<PostTaxonomiesForm
+				taxonomyWrapper={ ( content, taxonomy ) => {
+					return (
+						<TaxonomyPanel taxonomy={ taxonomy }>
+							{ content }
+						</TaxonomyPanel>
+					);
+				} }
+			/>
+		</PostTaxonomiesCheck>
+	);
+}
diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss
index 2d9defe96a6e49..2d888baee04131 100644
--- a/packages/editor/src/components/post-taxonomies/style.scss
+++ b/packages/editor/src/components/post-taxonomies/style.scss
@@ -3,39 +3,24 @@
 	overflow: auto;
 
 	// Extra left padding prevents checkbox focus borders from being cut off.
-	margin-left: -$border-width * 4 - $border-width-focus;
-	padding-left: $border-width * 4 + $border-width-focus;
-	margin-top: -$border-width * 4 - $border-width-focus;
-	padding-top: $border-width * 4 + $border-width-focus;
+	margin-left: -$border-width * 4 - $border-width-focus-fallback;
+	padding-left: $border-width * 4 + $border-width-focus-fallback;
+	margin-top: -$border-width * 4 - $border-width-focus-fallback;
+	padding-top: $border-width * 4 + $border-width-focus-fallback;
 }
 
 .editor-post-taxonomies__hierarchical-terms-choice {
-	margin-bottom: 8px;
+	margin-bottom: $grid-unit-10;
+	&:last-child {
+		margin-bottom: $grid-unit-05;
+	}
 }
 
 .editor-post-taxonomies__hierarchical-terms-subchoices {
-	margin-top: 8px;
+	margin-top: $grid-unit-10;
 	margin-left: $grid-unit-20;
 }
 
-.components-button.editor-post-taxonomies__hierarchical-terms-submit,
-.components-button.editor-post-taxonomies__hierarchical-terms-add {
-	margin-top: 12px;
-}
-
-.editor-post-taxonomies__hierarchical-terms-label {
-	display: inline-block;
-	margin-top: 12px;
-}
-
-.editor-post-taxonomies__hierarchical-terms-input {
-	margin-top: 8px;
-}
-.editor-post-taxonomies__hierarchical-terms-filter {
-	margin-bottom: 8px;
-	width: 100%;
-}
-
 .editor-post-taxonomies__flat-term-most-used {
 	.editor-post-taxonomies__flat-term-most-used-label {
 		margin-bottom: $grid-unit-05;
@@ -49,8 +34,4 @@
 		display: inline-block;
 		margin-right: $grid-unit-10;
 	}
-
-	.components-button {
-		font-size: 12px;
-	}
 }
diff --git a/packages/editor/src/components/post-taxonomies/test/index.js b/packages/editor/src/components/post-taxonomies/test/index.js
index ef1a446be3d71a..1f386f4c2fab15 100644
--- a/packages/editor/src/components/post-taxonomies/test/index.js
+++ b/packages/editor/src/components/post-taxonomies/test/index.js
@@ -13,7 +13,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { PostTaxonomies } from '../';
+import PostTaxonomies from '../';
 
 describe( 'PostTaxonomies', () => {
 	const genresTaxonomy = {
@@ -85,22 +85,32 @@ describe( 'PostTaxonomies', () => {
 	} );
 
 	it( 'should render no children if taxonomy data not available', () => {
-		const taxonomies = {};
-
-		const { container } = render(
-			<PostTaxonomies postType="page" taxonomies={ taxonomies } />
+		const taxonomies = null;
+
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'page' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue(
+			taxonomies
 		);
 
+		const { container } = render( <PostTaxonomies /> );
+
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render taxonomy components for taxonomies assigned to post type', () => {
-		const { rerender } = render(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [ genresTaxonomy, categoriesTaxonomy ] }
-			/>
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			categoriesTaxonomy,
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
@@ -112,59 +122,35 @@ describe( 'PostTaxonomies', () => {
 		expect(
 			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					genresTaxonomy,
-					{
-						...categoriesTaxonomy,
-						types: [ 'post', 'page', 'book' ],
-					},
-				] }
-			/>
-		);
-
-		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
-		expect(
-			screen.getByRole( 'group', { name: 'Categories' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new genre' } )
-		).toBeVisible();
-		expect(
-			screen.getByRole( 'button', { name: 'Add new category' } )
-		).toBeVisible();
 	} );
 
 	it( 'should not render taxonomy components that hide their ui', () => {
-		const { rerender } = render(
-			<PostTaxonomies postType="book" taxonomies={ [ genresTaxonomy ] } />
-		);
+		jest.spyOn(
+			select( editorStore ),
+			'getCurrentPostType'
+		).mockReturnValue( 'book' );
+		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
+			genresTaxonomy,
+			{
+				...categoriesTaxonomy,
+				types: [ 'post', 'page', 'book' ],
+				visibility: {
+					show_ui: false,
+				},
+			},
+		] );
+
+		render( <PostTaxonomies /> );
 
 		expect( screen.getByRole( 'group', { name: 'Genres' } ) ).toBeVisible();
 		expect(
 			screen.getByRole( 'button', { name: 'Add new genre' } )
 		).toBeVisible();
-
-		rerender(
-			<PostTaxonomies
-				postType="book"
-				taxonomies={ [
-					{
-						...genresTaxonomy,
-						visibility: { show_ui: false },
-					},
-				] }
-			/>
-		);
-
 		expect(
-			screen.queryByRole( 'group', { name: 'Genres' } )
+			screen.queryByRole( 'group', { name: 'Categories' } )
 		).not.toBeInTheDocument();
 		expect(
-			screen.queryByRole( 'button', { name: 'Add new genre' } )
+			screen.queryByRole( 'button', { name: 'Add new category' } )
 		).not.toBeInTheDocument();
 	} );
 } );
diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js
new file mode 100644
index 00000000000000..62de10a2c715ff
--- /dev/null
+++ b/packages/editor/src/components/post-template/block-theme.js
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
+import { check } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import SwapTemplateButton from './swap-template-button';
+import ResetDefaultTemplate from './reset-default-template';
+import { unlock } from '../../lock-unlock';
+import CreateNewTemplate from './create-new-template';
+
+const POPOVER_PROPS = {
+	className: 'editor-post-template__dropdown',
+	placement: 'bottom-start',
+};
+
+export default function BlockThemeControl( { id } ) {
+	const {
+		isTemplateHidden,
+		onNavigateToEntityRecord,
+		getEditorSettings,
+		hasGoBack,
+	} = useSelect( ( select ) => {
+		const { getRenderingMode, getEditorSettings: _getEditorSettings } =
+			unlock( select( editorStore ) );
+		const editorSettings = _getEditorSettings();
+		return {
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord,
+			getEditorSettings: _getEditorSettings,
+			hasGoBack: editorSettings.hasOwnProperty(
+				'onNavigateToPreviousEntityRecord'
+			),
+		};
+	}, [] );
+
+	const { get: getPreference } = useSelect( preferencesStore );
+
+	const { editedRecord: template, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_template',
+		id
+	);
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	const canCreateTemplate = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		[]
+	);
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	// The site editor does not have a `onNavigateToPreviousEntityRecord` setting as it uses its own routing
+	// and assigns its own backlink to focusMode pages.
+	const notificationAction = hasGoBack
+		? [
+				{
+					label: __( 'Go back' ),
+					onClick: () =>
+						getEditorSettings().onNavigateToPreviousEntityRecord(),
+				},
+		  ]
+		: undefined;
+
+	const mayShowTemplateEditNotice = () => {
+		if ( ! getPreference( 'core/edit-site', 'welcomeGuideTemplate' ) ) {
+			createSuccessNotice(
+				__(
+					'Editing template. Changes made here affect all posts and pages that use the template.'
+				),
+				{ type: 'snackbar', actions: notificationAction }
+			);
+		}
+	};
+	return (
+		<DropdownMenu
+			popoverProps={ POPOVER_PROPS }
+			focusOnMount
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				tooltipPosition: 'middle left',
+			} }
+			label={ __( 'Template options' ) }
+			text={ decodeEntities( template.title ) }
+			icon={ null }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						{ canCreateTemplate && (
+							<MenuItem
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									onClose();
+									mayShowTemplateEditNotice();
+								} }
+							>
+								{ __( 'Edit template' ) }
+							</MenuItem>
+						) }
+
+						<SwapTemplateButton onClick={ onClose } />
+						<ResetDefaultTemplate onClick={ onClose } />
+						{ canCreateTemplate && (
+							<CreateNewTemplate onClick={ onClose } />
+						) }
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							icon={ ! isTemplateHidden ? check : undefined }
+							isSelected={ ! isTemplateHidden }
+							role="menuitemcheckbox"
+							onClick={ () => {
+								setRenderingMode(
+									isTemplateHidden
+										? 'template-locked'
+										: 'post-only'
+								);
+							} }
+						>
+							{ __( 'Show template' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js
new file mode 100644
index 00000000000000..4345e06211c661
--- /dev/null
+++ b/packages/editor/src/components/post-template/classic-theme.js
@@ -0,0 +1,240 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl, Dropdown, Button, Notice } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useState, useMemo } from '@wordpress/element';
+import { addTemplate } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import CreateNewTemplateModal from './create-new-template-modal';
+import { useAllowSwitchingTemplates } from './hooks';
+
+const POPOVER_PROPS = {
+	className: 'editor-post-template__dropdown',
+	placement: 'bottom-start',
+};
+
+function PostTemplateToggle( { isOpen, onClick } ) {
+	const templateTitle = useSelect( ( select ) => {
+		const templateSlug =
+			select( editorStore ).getEditedPostAttribute( 'template' );
+
+		const { supportsTemplateMode, availableTemplates } =
+			select( editorStore ).getEditorSettings();
+		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
+			return availableTemplates[ templateSlug ];
+		}
+		const template =
+			select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) && select( editorStore ).getCurrentTemplateId();
+		return (
+			template?.title ||
+			template?.slug ||
+			availableTemplates?.[ templateSlug ]
+		);
+	}, [] );
+
+	return (
+		<Button
+			__next40pxDefaultSize
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={ __( 'Template options' ) }
+			onClick={ onClick }
+		>
+			{ templateTitle ?? __( 'Default template' ) }
+		</Button>
+	);
+}
+
+/**
+ * Renders the dropdown content for selecting a post template.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose The function to close the dropdown.
+ *
+ * @return {React.ReactNode} The rendered dropdown content.
+ */
+function PostTemplateDropdownContent( { onClose } ) {
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const {
+		availableTemplates,
+		fetchedTemplates,
+		selectedTemplateSlug,
+		canCreate,
+		canEdit,
+		currentTemplateId,
+		onNavigateToEntityRecord,
+		getEditorSettings,
+	} = useSelect(
+		( select ) => {
+			const { canUser, getEntityRecords } = select( coreStore );
+			const editorSettings = select( editorStore ).getEditorSettings();
+			const canCreateTemplates = canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			const _currentTemplateId =
+				select( editorStore ).getCurrentTemplateId();
+			return {
+				availableTemplates: editorSettings.availableTemplates,
+				fetchedTemplates: canCreateTemplates
+					? getEntityRecords( 'postType', 'wp_template', {
+							post_type:
+								select( editorStore ).getCurrentPostType(),
+							per_page: -1,
+					  } )
+					: undefined,
+				selectedTemplateSlug:
+					select( editorStore ).getEditedPostAttribute( 'template' ),
+				canCreate:
+					allowSwitchingTemplate &&
+					canCreateTemplates &&
+					editorSettings.supportsTemplateMode,
+				canEdit:
+					allowSwitchingTemplate &&
+					canCreateTemplates &&
+					editorSettings.supportsTemplateMode &&
+					!! _currentTemplateId,
+				currentTemplateId: _currentTemplateId,
+				onNavigateToEntityRecord:
+					editorSettings.onNavigateToEntityRecord,
+				getEditorSettings: select( editorStore ).getEditorSettings,
+			};
+		},
+		[ allowSwitchingTemplate ]
+	);
+
+	const options = useMemo(
+		() =>
+			Object.entries( {
+				...availableTemplates,
+				...Object.fromEntries(
+					( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
+						slug,
+						title.rendered,
+					] )
+				),
+			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
+		[ availableTemplates, fetchedTemplates ]
+	);
+
+	const selectedOption =
+		options.find( ( option ) => option.value === selectedTemplateSlug ) ??
+		options.find( ( option ) => ! option.value ); // The default option has '' value.
+
+	const { editPost } = useDispatch( editorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+
+	return (
+		<div className="editor-post-template__classic-theme-dropdown">
+			<InspectorPopoverHeader
+				title={ __( 'Template' ) }
+				help={ __(
+					'Templates define the way content is displayed when viewing your site.'
+				) }
+				actions={
+					canCreate
+						? [
+								{
+									icon: addTemplate,
+									label: __( 'Add template' ),
+									onClick: () => setIsCreateModalOpen( true ),
+								},
+						  ]
+						: []
+				}
+				onClose={ onClose }
+			/>
+			{ ! allowSwitchingTemplate ? (
+				<Notice status="warning" isDismissible={ false }>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					hideLabelFromVision
+					label={ __( 'Template' ) }
+					value={ selectedOption?.value ?? '' }
+					options={ options }
+					onChange={ ( slug ) =>
+						editPost( { template: slug || '' } )
+					}
+				/>
+			) }
+			{ canEdit && onNavigateToEntityRecord && (
+				<p>
+					<Button
+						__next40pxDefaultSize
+						variant="link"
+						onClick={ () => {
+							onNavigateToEntityRecord( {
+								postId: currentTemplateId,
+								postType: 'wp_template',
+							} );
+							onClose();
+							createSuccessNotice(
+								__(
+									'Editing template. Changes made here affect all posts and pages that use the template.'
+								),
+								{
+									type: 'snackbar',
+									actions: [
+										{
+											label: __( 'Go back' ),
+											onClick: () =>
+												getEditorSettings().onNavigateToPreviousEntityRecord(),
+										},
+									],
+								}
+							);
+						} }
+					>
+						{ __( 'Edit template' ) }
+					</Button>
+				</p>
+			) }
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</div>
+	);
+}
+
+function ClassicThemeControl() {
+	return (
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			focusOnMount
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
+			) }
+			renderContent={ ( { onClose } ) => (
+				<PostTemplateDropdownContent onClose={ onClose } />
+			) }
+		/>
+	);
+}
+
+/**
+ * Provides a dropdown menu for selecting and managing post templates.
+ *
+ * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates.
+ *
+ * @return {React.ReactNode} The rendered ClassicThemeControl component.
+ */
+export default ClassicThemeControl;
diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js
new file mode 100644
index 00000000000000..69d31b7f8f714e
--- /dev/null
+++ b/packages/editor/src/components/post-template/create-new-template-modal.js
@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Modal,
+	TextControl,
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const DEFAULT_TITLE = __( 'Custom Template' );
+
+export default function CreateNewTemplateModal( { onClose } ) {
+	const { defaultBlockTemplate, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const { getEditorSettings, getCurrentTemplateId } =
+				select( editorStore );
+			return {
+				defaultBlockTemplate: getEditorSettings().defaultBlockTemplate,
+				onNavigateToEntityRecord:
+					getEditorSettings().onNavigateToEntityRecord,
+				getTemplateId: getCurrentTemplateId,
+			};
+		}
+	);
+
+	const { createTemplate } = unlock( useDispatch( editorStore ) );
+
+	const [ title, setTitle ] = useState( '' );
+
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const cancel = () => {
+		setTitle( '' );
+		onClose();
+	};
+
+	const submit = async ( event ) => {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const newTemplateContent =
+			defaultBlockTemplate ??
+			serialize( [
+				createBlock(
+					'core/group',
+					{
+						tagName: 'header',
+						layout: { inherit: true },
+					},
+					[
+						createBlock( 'core/site-title' ),
+						createBlock( 'core/site-tagline' ),
+					]
+				),
+				createBlock( 'core/separator' ),
+				createBlock(
+					'core/group',
+					{
+						tagName: 'main',
+					},
+					[
+						createBlock(
+							'core/group',
+							{
+								layout: { inherit: true },
+							},
+							[ createBlock( 'core/post-title' ) ]
+						),
+						createBlock( 'core/post-content', {
+							layout: { inherit: true },
+						} ),
+					]
+				),
+			] );
+
+		const newTemplate = await createTemplate( {
+			slug: cleanForSlug( title || DEFAULT_TITLE ),
+			content: newTemplateContent,
+			title: title || DEFAULT_TITLE,
+		} );
+
+		setIsBusy( false );
+		onNavigateToEntityRecord( {
+			postId: newTemplate.id,
+			postType: 'wp_template',
+		} );
+		cancel();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			onRequestClose={ cancel }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form
+				className="editor-post-template__create-form"
+				onSubmit={ submit }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						placeholder={ DEFAULT_TITLE }
+						disabled={ isBusy }
+						help={ __(
+							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
+						) }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ cancel }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/editor/src/components/post-template/create-new-template.js b/packages/editor/src/components/post-template/create-new-template.js
new file mode 100644
index 00000000000000..7cf071ae028e9a
--- /dev/null
+++ b/packages/editor/src/components/post-template/create-new-template.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import CreateNewTemplateModal from './create-new-template-modal';
+import { useAllowSwitchingTemplates } from './hooks';
+
+export default function CreateNewTemplate( { onClick } ) {
+	const { canCreateTemplates } = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return {
+			canCreateTemplates: canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		};
+	}, [] );
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+
+	// The default template in a post is indicated by an empty string.
+	if ( ! canCreateTemplates || ! allowSwitchingTemplate ) {
+		return null;
+	}
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsCreateModalOpen( true );
+				} }
+			>
+				{ __( 'Create new template' ) }
+			</MenuItem>
+
+			{ isCreateModalOpen && (
+				<CreateNewTemplateModal
+					onClose={ () => {
+						setIsCreateModalOpen( false );
+						onClick();
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/editor/src/components/post-template/hooks.js b/packages/editor/src/components/post-template/hooks.js
new file mode 100644
index 00000000000000..c9668cd1443335
--- /dev/null
+++ b/packages/editor/src/components/post-template/hooks.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export function useEditedPostContext() {
+	return useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		return {
+			postId: getCurrentPostId(),
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+}
+export function useAllowSwitchingTemplates() {
+	const { postType, postId } = useEditedPostContext();
+	return useSelect(
+		( select ) => {
+			const { canUser, getEntityRecord, getEntityRecords } =
+				select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+			const templates = getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+			} );
+			const isPostsPage = +postId === siteSettings?.page_for_posts;
+			// If current page is set front page or posts page, we also need
+			// to check if the current theme has a template for it. If not
+			const isFrontPage =
+				postType === 'page' &&
+				+postId === siteSettings?.page_on_front &&
+				templates?.some( ( { slug } ) => slug === 'front-page' );
+			return ! isPostsPage && ! isFrontPage;
+		},
+		[ postId, postType ]
+	);
+}
+
+function useTemplates( postType ) {
+	return useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
+				per_page: -1,
+				post_type: postType,
+			} ),
+		[ postType ]
+	);
+}
+
+export function useAvailableTemplates( postType ) {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const templates = useTemplates( postType );
+	return useMemo(
+		() =>
+			allowSwitchingTemplate &&
+			templates?.filter(
+				( template ) =>
+					template.is_custom &&
+					template.slug !== currentTemplateSlug &&
+					!! template.content.raw // Skip empty templates.
+			),
+		[ templates, currentTemplateSlug, allowSwitchingTemplate ]
+	);
+}
+
+export function useCurrentTemplateSlug() {
+	const { postType, postId } = useEditedPostContext();
+	const templates = useTemplates( postType );
+	const entityTemplate = useSelect(
+		( select ) => {
+			const post = select( coreStore ).getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			return post?.template;
+		},
+		[ postType, postId ]
+	);
+
+	if ( ! entityTemplate ) {
+		return;
+	}
+	// If a page has a `template` set and is not included in the list
+	// of the theme's templates, do not return it, in order to resolve
+	// to the current theme's default template.
+	return templates?.find( ( template ) => template.slug === entityTemplate )
+		?.slug;
+}
diff --git a/packages/editor/src/components/post-template/index.js b/packages/editor/src/components/post-template/index.js
deleted file mode 100644
index c52fab6316ba2d..00000000000000
--- a/packages/editor/src/components/post-template/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty, map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editorStore } from '../../store';
-
-export function PostTemplate() {
-	const { availableTemplates, selectedTemplate, isViewable } = useSelect(
-		( select ) => {
-			const {
-				getEditedPostAttribute,
-				getEditorSettings,
-				getCurrentPostType,
-			} = select( editorStore );
-			const { getPostType } = select( coreStore );
-
-			return {
-				selectedTemplate: getEditedPostAttribute( 'template' ),
-				availableTemplates: getEditorSettings().availableTemplates,
-				isViewable:
-					getPostType( getCurrentPostType() )?.viewable ?? false,
-			};
-		},
-		[]
-	);
-
-	const { editPost } = useDispatch( editorStore );
-
-	if ( ! isViewable || isEmpty( availableTemplates ) ) {
-		return null;
-	}
-
-	return (
-		<SelectControl
-			label={ __( 'Template:' ) }
-			value={ selectedTemplate }
-			onChange={ ( templateSlug ) => {
-				editPost( {
-					template: templateSlug || '',
-				} );
-			} }
-			options={ map(
-				availableTemplates,
-				( templateName, templateSlug ) => ( {
-					value: templateSlug,
-					label: templateName,
-				} )
-			) }
-		/>
-	);
-}
-
-export default PostTemplate;
diff --git a/packages/editor/src/components/post-template/panel.js b/packages/editor/src/components/post-template/panel.js
new file mode 100644
index 00000000000000..903612ef11ed15
--- /dev/null
+++ b/packages/editor/src/components/post-template/panel.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import ClassicThemeControl from './classic-theme';
+import BlockThemeControl from './block-theme';
+import PostPanelRow from '../post-panel-row';
+
+/**
+ * Displays the template controls based on the current editor settings and user permissions.
+ *
+ * @return {React.ReactNode} The rendered PostTemplatePanel component.
+ */
+export default function PostTemplatePanel() {
+	const { templateId, isBlockTheme } = useSelect( ( select ) => {
+		const { getCurrentTemplateId, getEditorSettings } =
+			select( editorStore );
+		return {
+			templateId: getCurrentTemplateId(),
+			isBlockTheme: getEditorSettings().__unstableIsBlockBasedTheme,
+		};
+	}, [] );
+
+	const isVisible = useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		if ( ! postType?.viewable ) {
+			return false;
+		}
+
+		const settings = select( editorStore ).getEditorSettings();
+		const hasTemplates =
+			!! settings.availableTemplates &&
+			Object.keys( settings.availableTemplates ).length > 0;
+		if ( hasTemplates ) {
+			return true;
+		}
+
+		if ( ! settings.supportsTemplateMode ) {
+			return false;
+		}
+
+		const canCreateTemplates =
+			select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) ?? false;
+		return canCreateTemplates;
+	}, [] );
+
+	const canViewTemplates = useSelect( ( select ) => {
+		return (
+			select( coreStore ).canUser( 'read', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ) ?? false
+		);
+	}, [] );
+
+	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
+		return (
+			<PostPanelRow label={ __( 'Template' ) }>
+				<ClassicThemeControl />
+			</PostPanelRow>
+		);
+	}
+
+	if ( isBlockTheme && !! templateId ) {
+		return (
+			<PostPanelRow label={ __( 'Template' ) }>
+				<BlockThemeControl id={ templateId } />
+			</PostPanelRow>
+		);
+	}
+	return null;
+}
diff --git a/packages/editor/src/components/post-template/reset-default-template.js b/packages/editor/src/components/post-template/reset-default-template.js
new file mode 100644
index 00000000000000..c730f6b06dee89
--- /dev/null
+++ b/packages/editor/src/components/post-template/reset-default-template.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useAllowSwitchingTemplates,
+	useCurrentTemplateSlug,
+	useEditedPostContext,
+} from './hooks';
+
+export default function ResetDefaultTemplate( { onClick } ) {
+	const currentTemplateSlug = useCurrentTemplateSlug();
+	const allowSwitchingTemplate = useAllowSwitchingTemplates();
+	const { postType, postId } = useEditedPostContext();
+	const { editEntityRecord } = useDispatch( coreStore );
+	// The default template in a post is indicated by an empty string.
+	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
+		return null;
+	}
+	return (
+		<MenuItem
+			onClick={ () => {
+				editEntityRecord(
+					'postType',
+					postType,
+					postId,
+					{ template: '' },
+					{ undoIgnore: true }
+				);
+				onClick();
+			} }
+		>
+			{ __( 'Use default template' ) }
+		</MenuItem>
+	);
+}
diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss
new file mode 100644
index 00000000000000..749dfcf4c3183b
--- /dev/null
+++ b/packages/editor/src/components/post-template/style.scss
@@ -0,0 +1,44 @@
+.editor-post-template__swap-template-modal {
+	z-index: z-index(".editor-post-template__swap-template-modal");
+}
+
+.editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+}
+
+.editor-post-template__dropdown {
+	.components-popover__content {
+		min-width: 240px;
+	}
+	.components-button.is-pressed,
+	.components-button.is-pressed:hover {
+		background: inherit;
+		color: inherit;
+	}
+}
+
+.editor-post-template__create-form {
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}
+
+.editor-post-template__classic-theme-dropdown {
+	padding: $grid-unit-10;
+}
diff --git a/packages/editor/src/components/post-template/swap-template-button.js b/packages/editor/src/components/post-template/swap-template-button.js
new file mode 100644
index 00000000000000..bdda349398406b
--- /dev/null
+++ b/packages/editor/src/components/post-template/swap-template-button.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { useAvailableTemplates, useEditedPostContext } from './hooks';
+
+export default function SwapTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const { postType, postId } = useEditedPostContext();
+	const availableTemplates = useAvailableTemplates( postType );
+	const { editEntityRecord } = useDispatch( coreStore );
+	if ( ! availableTemplates?.length ) {
+		return null;
+	}
+	const onTemplateSelect = async ( template ) => {
+		editEntityRecord(
+			'postType',
+			postType,
+			postId,
+			{ template: template.name },
+			{ undoIgnore: true }
+		);
+		setShowModal( false ); // Close the template suggestions modal first.
+		onClick();
+	};
+	return (
+		<>
+			<MenuItem onClick={ () => setShowModal( true ) }>
+				{ __( 'Swap template' ) }
+			</MenuItem>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ () => setShowModal( false ) }
+					overlayClassName="editor-post-template__swap-template-modal"
+					isFullScreen
+				>
+					<div className="editor-post-template__swap-template-modal-content">
+						<TemplatesList
+							postType={ postType }
+							onSelect={ onTemplateSelect }
+						/>
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { postType, onSelect } ) {
+	const availableTemplates = useAvailableTemplates( postType );
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ templatesAsPatterns }
+			onClickPattern={ onSelect }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js
index b771c74605526c..0ae569c3e15301 100644
--- a/packages/editor/src/components/post-text-editor/index.js
+++ b/packages/editor/src/components/post-text-editor/index.js
@@ -7,8 +7,9 @@ import Textarea from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
@@ -18,64 +19,40 @@ import { VisuallyHidden } from '@wordpress/components';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Displays the Post Text Editor along with content in Visual and Text mode.
+ *
+ * @return {React.ReactNode} The rendered PostTextEditor component.
+ */
 export default function PostTextEditor() {
-	const postContent = useSelect(
-		( select ) => select( editorStore ).getEditedPostContent(),
-		[]
-	);
-
-	const { editPost, resetEditorBlocks } = useDispatch( editorStore );
-
-	const [ value, setValue ] = useState( postContent );
-	const [ isDirty, setIsDirty ] = useState( false );
 	const instanceId = useInstanceId( PostTextEditor );
-	const valueRef = useRef();
+	const { content, blocks, type, id } = useSelect( ( select ) => {
+		const { getEditedEntityRecord } = select( coreStore );
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const _type = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
 
-	if ( ! isDirty && value !== postContent ) {
-		setValue( postContent );
-	}
-
-	/**
-	 * Handles a textarea change event to notify the onChange prop callback and
-	 * reflect the new value in the component's own state. This marks the start
-	 * of the user's edits, if not already changed, preventing future props
-	 * changes to value from replacing the rendered value. This is expected to
-	 * be followed by a reset to dirty state via `stopEditing`.
-	 *
-	 * @see stopEditing
-	 *
-	 * @param {Event} event Change event.
-	 */
-	const onChange = ( event ) => {
-		const newValue = event.target.value;
-		editPost( { content: newValue } );
-		setValue( newValue );
-		setIsDirty( true );
-		valueRef.current = newValue;
-	};
-
-	/**
-	 * Function called when the user has completed their edits, responsible for
-	 * ensuring that changes, if made, are surfaced to the onPersist prop
-	 * callback and resetting dirty state.
-	 */
-	const stopEditing = () => {
-		if ( isDirty ) {
-			const blocks = parse( value );
-			resetEditorBlocks( blocks );
-			setIsDirty( false );
-		}
-	};
-
-	// Ensure changes aren't lost when component unmounts.
-	useEffect( () => {
-		return () => {
-			if ( valueRef.current ) {
-				const blocks = parse( valueRef.current );
-				resetEditorBlocks( blocks );
-			}
+		return {
+			content: editedRecord?.content,
+			blocks: editedRecord?.blocks,
+			type: _type,
+			id: _id,
 		};
 	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	// Replicates the logic found in getEditedPostContent().
+	const value = useMemo( () => {
+		if ( content instanceof Function ) {
+			return content( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			return __unstableSerializeAndClean( blocks );
+		}
+		return content;
+	}, [ content, blocks ] );
 
 	return (
 		<>
@@ -89,8 +66,13 @@ export default function PostTextEditor() {
 				autoComplete="off"
 				dir="auto"
 				value={ value }
-				onChange={ onChange }
-				onBlur={ stopEditing }
+				onChange={ ( event ) => {
+					editEntityRecord( 'postType', type, id, {
+						content: event.target.value,
+						blocks: undefined,
+						selection: undefined,
+					} );
+				} }
 				className="editor-post-text-editor"
 				id={ `post-content-${ instanceId }` }
 				placeholder={ __( 'Start writing with text or HTML' ) }
diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss
index 6a8eac4a098b4d..f3b9b65007df75 100644
--- a/packages/editor/src/components/post-text-editor/style.scss
+++ b/packages/editor/src/components/post-text-editor/style.scss
@@ -1,4 +1,4 @@
-.edit-post-text-editor__body textarea.editor-post-text-editor {
+textarea.editor-post-text-editor {
 	border: $border-width solid $gray-600;
 	border-radius: 0;
 	display: block;
diff --git a/packages/editor/src/components/post-text-editor/test/index.js b/packages/editor/src/components/post-text-editor/test/index.js
deleted file mode 100644
index a9d2d742e9d13e..00000000000000
--- a/packages/editor/src/components/post-text-editor/test/index.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * External dependencies
- */
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import PostTextEditor from '../';
-
-// "Downgrade" ReactAutosizeTextarea to a regular textarea. Assumes aligned
-// props interface.
-jest.mock( 'react-autosize-textarea', () => ( props ) => (
-	<textarea { ...props } />
-) );
-
-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;
-} );
-
-let mockEditPost = jest.fn();
-let mockResetEditorBlocks = jest.fn();
-
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => {
-	return {
-		useDispatch: () => ( {
-			editPost: mockEditPost,
-			resetEditorBlocks: mockResetEditorBlocks,
-		} ),
-	};
-} );
-
-jest.useRealTimers();
-
-describe( 'PostTextEditor', () => {
-	beforeEach( () => {
-		useSelect.mockImplementation( () => 'Hello World' );
-
-		mockEditPost = jest.fn();
-		mockResetEditorBlocks = jest.fn();
-	} );
-
-	it( 'should render via the value from useSelect', () => {
-		render( <PostTextEditor /> );
-
-		expect( screen.getByLabelText( 'Type text or HTML' ) ).toHaveValue(
-			'Hello World'
-		);
-	} );
-
-	it( 'should render via the state value when edits made', async () => {
-		const user = userEvent.setup();
-		render( <PostTextEditor /> );
-
-		const textarea = screen.getByLabelText( 'Type text or HTML' );
-
-		await user.clear( textarea );
-		await user.type( textarea, 'Hello Chicken' );
-
-		expect( textarea ).toHaveValue( 'Hello Chicken' );
-		expect( mockEditPost ).toHaveBeenCalledWith( {
-			content: 'Hello Chicken',
-		} );
-	} );
-
-	it( 'should render via the state value when edits made, even if prop value changes', async () => {
-		const user = userEvent.setup();
-		const { rerender } = render( <PostTextEditor /> );
-
-		const textarea = screen.getByLabelText( 'Type text or HTML' );
-
-		await user.clear( textarea );
-		await user.type( textarea, 'Hello Chicken' );
-
-		useSelect.mockImplementation( () => 'Goodbye World' );
-
-		rerender( <PostTextEditor /> );
-
-		expect( textarea ).toHaveValue( 'Hello Chicken' );
-		expect( mockEditPost ).toHaveBeenCalledWith( {
-			content: 'Hello Chicken',
-		} );
-	} );
-
-	it( 'should render via the state value when edits made, even if prop value changes and state value empty', async () => {
-		const user = userEvent.setup();
-		const { rerender } = render( <PostTextEditor /> );
-
-		const textarea = screen.getByLabelText( 'Type text or HTML' );
-
-		await user.clear( textarea );
-
-		useSelect.mockImplementation( () => 'Goodbye World' );
-
-		rerender( <PostTextEditor /> );
-
-		expect( textarea ).toHaveValue( '' );
-		expect( mockEditPost ).toHaveBeenCalledWith( {
-			content: '',
-		} );
-	} );
-
-	it( 'calls onPersist after changes made and user stops editing', async () => {
-		const user = userEvent.setup();
-		render( <PostTextEditor /> );
-
-		const textarea = screen.getByLabelText( 'Type text or HTML' );
-
-		await user.clear( textarea );
-
-		// Stop editing.
-		act( () => {
-			textarea.blur();
-		} );
-
-		expect( mockResetEditorBlocks ).toHaveBeenCalledWith( [] );
-	} );
-
-	it( 'does not call onPersist after user stops editing without changes', () => {
-		render( <PostTextEditor /> );
-
-		// Stop editing.
-		screen.getByLabelText( 'Type text or HTML' ).blur();
-
-		expect( mockResetEditorBlocks ).not.toHaveBeenCalled();
-	} );
-
-	it( 'resets to prop value after user stops editing', async () => {
-		// This isn't the most realistic case, since typically we'd assume the
-		// parent renderer to pass the value as it had received onPersist. The
-		// test here is more an edge case to stress that it's intentionally
-		// differentiating between state and prop values.
-		const user = userEvent.setup();
-		const { rerender } = render( <PostTextEditor /> );
-
-		const textarea = screen.getByLabelText( 'Type text or HTML' );
-
-		await user.clear( textarea );
-
-		useSelect.mockImplementation( () => 'Goodbye World' );
-
-		rerender( <PostTextEditor /> );
-
-		act( () => {
-			textarea.blur();
-		} );
-
-		expect( textarea ).toHaveValue( 'Goodbye World' );
-	} );
-} );
diff --git a/packages/editor/src/components/post-title/constants.js b/packages/editor/src/components/post-title/constants.js
new file mode 100644
index 00000000000000..2b0ff197f2b9f1
--- /dev/null
+++ b/packages/editor/src/components/post-title/constants.js
@@ -0,0 +1,4 @@
+export const DEFAULT_CLASSNAMES =
+	'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text';
+
+export const REGEXP_NEWLINES = /[\r\n]+/g;
diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js
index b9143a29ff3c05..090beb57f6170e 100644
--- a/packages/editor/src/components/post-title/index.js
+++ b/packages/editor/src/components/post-title/index.js
@@ -1,28 +1,20 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	forwardRef,
-	useEffect,
-	useImperativeHandle,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { ENTER } from '@wordpress/keycodes';
+import { pasteHandler } from '@wordpress/blocks';
 import {
 	__unstableUseRichText as useRichText,
 	create,
-	toHTMLString,
 	insert,
 } from '@wordpress/rich-text';
 import { useMergeRefs } from '@wordpress/compose';
@@ -31,75 +23,66 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
+import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
+import usePostTitleFocus from './use-post-title-focus';
+import usePostTitle from './use-post-title';
 import PostTypeSupportCheck from '../post-type-support-check';
-import { store as editorStore } from '../../store';
 
-/**
- * Constants
- */
-const REGEXP_NEWLINES = /[\r\n]+/g;
+const PostTitle = forwardRef( ( _, forwardedRef ) => {
+	const { placeholder } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { titlePlaceholder } = getSettings();
+
+		return {
+			placeholder: titlePlaceholder,
+		};
+	}, [] );
 
-function PostTitle( _, forwardedRef ) {
-	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
-	const { editPost } = useDispatch( editorStore );
-	const { insertDefaultBlock, clearSelectedBlock, insertBlocks } =
-		useDispatch( blockEditorStore );
-	const { isCleanNewPost, title, placeholder, hasFixedToolbar } = useSelect(
-		( select ) => {
-			const { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost } =
-				select( editorStore );
-			const { getSettings } = select( blockEditorStore );
-			const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
-				getSettings();
-
-			return {
-				isCleanNewPost: _isCleanNewPost(),
-				title: getEditedPostAttribute( 'title' ),
-				placeholder: titlePlaceholder,
-				hasFixedToolbar: _hasFixedToolbar,
-			};
-		},
-		[]
-	);
 
-	useImperativeHandle( forwardedRef, () => ( {
-		focus: () => {
-			ref?.current?.focus();
-		},
-	} ) );
+	const { ref: focusRef } = usePostTitleFocus( forwardedRef );
 
-	useEffect( () => {
-		if ( ! ref.current ) {
-			return;
-		}
+	const { title, setTitle: onUpdate } = usePostTitle();
 
-		const { ownerDocument } = ref.current;
-		const { activeElement, body } = ownerDocument;
+	const [ selection, setSelection ] = useState( {} );
 
-		// Only autofocus the title when the post is entirely empty. This should
-		// only happen for a new post, which means we focus the title on new
-		// post so the author can start typing right away, without needing to
-		// click anything.
-		if ( isCleanNewPost && ( ! activeElement || body === activeElement ) ) {
-			ref.current.focus();
-		}
-	}, [ isCleanNewPost ] );
+	const { clearSelectedBlock, insertBlocks, insertDefaultBlock } =
+		useDispatch( blockEditorStore );
 
-	function onEnterPress() {
-		insertDefaultBlock( undefined, undefined, 0 );
-	}
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+
+	const {
+		value,
+		onChange,
+		ref: richTextRef,
+	} = useRichText( {
+		value: title,
+		onChange( newValue ) {
+			onUpdate( newValue.replace( REGEXP_NEWLINES, ' ' ) );
+		},
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: false,
+	} );
 
 	function onInsertBlockAfter( blocks ) {
 		insertBlocks( blocks, 0 );
 	}
 
-	function onUpdate( newTitle ) {
-		editPost( { title: newTitle } );
-	}
-
-	const [ selection, setSelection ] = useState( {} );
-
 	function onSelect() {
 		setIsSelected( true );
 		clearSelectedBlock();
@@ -110,8 +93,8 @@ function PostTitle( _, forwardedRef ) {
 		setSelection( {} );
 	}
 
-	function onChange( value ) {
-		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
+	function onEnterPress() {
+		insertDefaultBlock( undefined, undefined, 0 );
 	}
 
 	function onKeyDown( event ) {
@@ -127,21 +110,14 @@ function PostTitle( _, forwardedRef ) {
 		let plainText = '';
 		let html = '';
 
-		// IE11 only supports `Text` as an argument for `getData` and will
-		// otherwise throw an invalid argument error, so we try the standard
-		// arguments first, then fallback to `Text` if they fail.
 		try {
 			plainText = clipboardData.getData( 'text/plain' );
 			html = clipboardData.getData( 'text/html' );
-		} catch ( error1 ) {
-			try {
-				html = clipboardData.getData( 'Text' );
-			} catch ( error2 ) {
-				// Some browsers like UC Browser paste plain text by default and
-				// don't support clipboardData at all, so allow default
-				// behaviour.
-				return;
-			}
+		} catch ( error ) {
+			// Some browsers like UC Browser paste plain text by default and
+			// don't support clipboardData at all, so allow default
+			// behaviour.
+			return;
 		}
 
 		// Allows us to ask for this information when we get a report.
@@ -167,80 +143,60 @@ function PostTitle( _, forwardedRef ) {
 				( firstBlock.name === 'core/heading' ||
 					firstBlock.name === 'core/paragraph' )
 			) {
-				onUpdate( stripHTML( firstBlock.attributes.content ) );
+				// Strip HTML to avoid unwanted HTML being added to the title.
+				// In the majority of cases it is assumed that HTML in the title
+				// is undesirable.
+				const contentNoHTML = stripHTML(
+					firstBlock.attributes.content
+				);
+				onUpdate( contentNoHTML );
 				onInsertBlockAfter( content.slice( 1 ) );
 			} else {
 				onInsertBlockAfter( content );
 			}
 		} else {
-			const value = {
-				...create( { html: title } ),
-				...selection,
-			};
-			const newValue = insert(
-				value,
-				create( { html: stripHTML( content ) } )
-			);
-			onUpdate( toHTMLString( { value: newValue } ) );
-			setSelection( {
-				start: newValue.start,
-				end: newValue.end,
-			} );
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( content );
+			onChange( insert( value, create( { html: contentNoHTML } ) ) );
 		}
 	}
 
 	// The wp-block className is important for editor styles.
 	// This same block is used in both the visual and the code editor.
-	const className = classnames(
-		'wp-block wp-block-post-title block-editor-block-list__block editor-post-title editor-post-title__input rich-text',
-		{
-			'is-selected': isSelected,
-			'has-fixed-toolbar': hasFixedToolbar,
-		}
-	);
-	const decodedPlaceholder =
-		decodeEntities( placeholder ) || __( 'Add title' );
-	const { ref: richTextRef } = useRichText( {
-		value: title,
-		onChange,
-		placeholder: decodedPlaceholder,
-		selectionStart: selection.start,
-		selectionEnd: selection.end,
-		onSelectionChange( newStart, newEnd ) {
-			setSelection( ( sel ) => {
-				const { start, end } = sel;
-				if ( start === newStart && end === newEnd ) {
-					return sel;
-				}
-				return {
-					start: newStart,
-					end: newEnd,
-				};
-			} );
-		},
-		__unstableDisableFormats: true,
-		preserveWhiteSpace: true,
+	const className = clsx( DEFAULT_CLASSNAMES, {
+		'is-selected': isSelected,
 	} );
 
-	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
-		<PostTypeSupportCheck supportKeys="title">
-			<h1
-				ref={ useMergeRefs( [ richTextRef, ref ] ) }
-				contentEditable
-				className={ className }
-				aria-label={ decodedPlaceholder }
-				role="textbox"
-				aria-multiline="true"
-				onFocus={ onSelect }
-				onBlur={ onUnselect }
-				onKeyDown={ onKeyDown }
-				onKeyPress={ onUnselect }
-				onPaste={ onPaste }
-			/>
-		</PostTypeSupportCheck>
+		/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
+		<h1
+			ref={ useMergeRefs( [ richTextRef, focusRef ] ) }
+			contentEditable
+			className={ className }
+			aria-label={ decodedPlaceholder }
+			role="textbox"
+			aria-multiline="true"
+			onFocus={ onSelect }
+			onBlur={ onUnselect }
+			onKeyDown={ onKeyDown }
+			onPaste={ onPaste }
+		/>
+		/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
 	);
-	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-to-interactive-role */
-}
+} );
 
-export default forwardRef( PostTitle );
+/**
+ * Renders the `PostTitle` component.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Forwarded ref for the component.
+ *
+ * @return {React.ReactNode} The rendered PostTitle component.
+ */
+export default forwardRef( ( _, forwardedRef ) => (
+	<PostTypeSupportCheck supportKeys="title">
+		<PostTitle ref={ forwardedRef } />
+	</PostTypeSupportCheck>
+) );
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 4da9d8c308110b..751f1009ff25e1 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -7,30 +7,84 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import {
-	__experimentalRichText as RichText,
-	create,
-	insert,
-} from '@wordpress/rich-text';
+import { create, toHTMLString, insert } from '@wordpress/rich-text';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { pasteHandler } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as blockEditorStore, RichText } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
+/**
+ * Inserts content with title
+ *
+ * This function processes the given content and title, updating the title
+ * and content based on certain conditions. If the content is an array of
+ * blocks, it will check the first block for a heading or paragraph to use
+ * as the title. If the content is a string, it will strip HTML and update
+ * the title and content accordingly.
+ *
+ * @param {string}         title           The post title.
+ * @param {Array | string} content         The content to be processed. It can be an array of blocks or a string.
+ * @param {Function}       onUpdateTitle   Callback function to update the title.
+ * @param {Function}       onUpdateContent Callback function to update the content.
+ * @param {RichTextValue}  value           The initial value object, default is an object with empty text.
+ */
+export function insertContentWithTitle(
+	title,
+	content,
+	onUpdateTitle,
+	onUpdateContent,
+	value = create( { text: '' } )
+) {
+	if ( ! content.length ) {
+		return;
+	}
+
+	if ( typeof content !== 'string' ) {
+		const [ firstBlock ] = content;
+
+		if (
+			! title &&
+			( firstBlock.name === 'core/heading' ||
+				firstBlock.name === 'core/paragraph' )
+		) {
+			// Strip HTML to avoid unwanted HTML being added to the title.
+			// In the majority of cases it is assumed that HTML in the title
+			// is undesirable.
+			const contentNoHTML = stripHTML( firstBlock.attributes.content );
+			onUpdateTitle( contentNoHTML );
+			onUpdateContent( content.slice( 1 ) );
+		} else {
+			onUpdateContent( content );
+		}
+	} else {
+		// Strip HTML to avoid unwanted HTML being added to the title.
+		// In the majority of cases it is assumed that HTML in the title
+		// is undesirable.
+		const contentNoHTML = stripHTML( content );
+
+		const newValue = insert( value, create( { html: contentNoHTML } ) );
+		onUpdateTitle( toHTMLString( { value: newValue } ) );
+	}
+}
+
 class PostTitle extends Component {
 	constructor( props ) {
 		super( props );
 
 		this.setRef = this.setRef.bind( this );
+		this.onPaste = this.onPaste.bind( this );
 	}
 	componentDidUpdate( prevProps ) {
 		// Unselect if any other block is selected and blur the RichText.
@@ -60,17 +114,25 @@ class PostTitle extends Component {
 		this.props.onSelect();
 	}
 
-	onPaste( { value, onChange, plainText } ) {
+	onPaste( { value, plainText, html } ) {
+		const {
+			title,
+			onInsertBlockAfter: onInsertBlocks,
+			onUpdate,
+		} = this.props;
+
 		const content = pasteHandler( {
+			HTML: html,
 			plainText,
-			mode: 'INLINE',
-			tagName: 'p',
 		} );
 
-		if ( typeof content === 'string' ) {
-			const valueToInsert = create( { html: content } );
-			onChange( insert( value, valueToInsert ) );
-		}
+		insertContentWithTitle(
+			title,
+			content,
+			onUpdate,
+			onInsertBlocks,
+			value
+		);
 	}
 
 	setRef( richText ) {
@@ -125,6 +187,7 @@ class PostTitle extends Component {
 
 		return (
 			<View
+				testID="post-title"
 				style={ [
 					styles.titleContainer,
 					borderStyle,
@@ -135,20 +198,19 @@ class PostTitle extends Component {
 				accessibilityLabel={ this.getTitle( title, postType ) }
 				accessibilityHint={ __( 'Updates the title.' ) }
 			>
-				<RichText
-					setRef={ this.setRef }
+				<RichText.Raw
+					ref={ this.setRef }
 					accessibilityLabel={ this.getTitle( title, postType ) }
-					tagName={ 'p' }
+					tagName="p"
 					tagsToEliminate={ [ 'strong' ] }
 					unstableOnFocus={ this.props.onSelect }
 					onBlur={ this.props.onBlur } // Always assign onBlur as a props.
-					multiline={ false }
 					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }
 					lineHeight={ 1 }
-					fontWeight={ 'bold' }
-					deleteEnter={ true }
+					fontWeight="bold"
+					deleteEnter
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );
 					} }
@@ -157,10 +219,10 @@ class PostTitle extends Component {
 					value={ title }
 					onSelectionChange={ () => {} }
 					onEnter={ this.props.onEnterPress }
-					disableEditingMenu={ true }
+					disableEditingMenu
 					__unstableIsSelected={ this.props.isSelected }
 					__unstableOnCreateUndoLevel={ () => {} }
-				></RichText>
+				/>
 			</View>
 		);
 	}
@@ -180,6 +242,7 @@ export default compose(
 
 		return {
 			postType: getEditedPostAttribute( 'type' ),
+			title: getEditedPostAttribute( 'title' ),
 			isAnyBlockSelected: !! selectedId,
 			isSelected: isPostTitleSelected(),
 			isDimmed: selectionIsNested,
@@ -187,10 +250,10 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { undo, redo, togglePostTitleSelection } =
+		const { undo, redo, togglePostTitleSelection, editPost } =
 			dispatch( editorStore );
 
-		const { clearSelectedBlock, insertDefaultBlock } =
+		const { clearSelectedBlock, insertDefaultBlock, insertBlocks } =
 			dispatch( blockEditorStore );
 
 		return {
@@ -206,6 +269,12 @@ export default compose(
 			onUnselect() {
 				togglePostTitleSelection( false );
 			},
+			onUpdate( title ) {
+				editPost( { title } );
+			},
+			onInsertBlockAfter( blocks ) {
+				insertBlocks( blocks, 0 );
+			},
 		};
 	} ),
 	withInstanceId,
diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js
new file mode 100644
index 00000000000000..9beba1068f8ef7
--- /dev/null
+++ b/packages/editor/src/components/post-title/post-title-raw.js
@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { TextareaControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_CLASSNAMES, REGEXP_NEWLINES } from './constants';
+import usePostTitleFocus from './use-post-title-focus';
+import usePostTitle from './use-post-title';
+
+/**
+ * Renders a raw post title input field.
+ *
+ * @param {Object}  _            Unused parameter.
+ * @param {Element} forwardedRef Reference to the component's DOM node.
+ *
+ * @return {React.ReactNode} The rendered component.
+ */
+function PostTitleRaw( _, forwardedRef ) {
+	const { placeholder } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { titlePlaceholder } = getSettings();
+
+		return {
+			placeholder: titlePlaceholder,
+		};
+	}, [] );
+
+	const [ isSelected, setIsSelected ] = useState( false );
+
+	const { title, setTitle: onUpdate } = usePostTitle();
+	const { ref: focusRef } = usePostTitleFocus( forwardedRef );
+
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
+	}
+
+	function onSelect() {
+		setIsSelected( true );
+	}
+
+	function onUnselect() {
+		setIsSelected( false );
+	}
+
+	// The wp-block className is important for editor styles.
+	// This same block is used in both the visual and the code editor.
+	const className = clsx( DEFAULT_CLASSNAMES, {
+		'is-selected': isSelected,
+		'is-raw-text': true,
+	} );
+
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+
+	return (
+		<TextareaControl
+			ref={ focusRef }
+			value={ title }
+			onChange={ onChange }
+			onFocus={ onSelect }
+			onBlur={ onUnselect }
+			label={ placeholder }
+			className={ className }
+			placeholder={ decodedPlaceholder }
+			hideLabelFromVision
+			autoComplete="off"
+			dir="auto"
+			rows={ 1 }
+			__nextHasNoMarginBottom
+		/>
+	);
+}
+
+export default forwardRef( PostTitleRaw );
diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss
index 05727a318300ad..42b0b5bce146db 100644
--- a/packages/editor/src/components/post-title/style.native.scss
+++ b/packages/editor/src/components/post-title/style.native.scss
@@ -1,10 +1,10 @@
 
 .titleContainer {
-	padding-left: 12;
-	padding-right: 16;
-	padding-top: 12;
-	padding-bottom: 12;
-	margin-top: 24;
+	padding-left: $block-edge-to-content;
+	padding-right: $block-edge-to-content;
+	padding-top: 6;
+	padding-bottom: 6;
+	margin-top: 12;
 }
 
 .dimmed {
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
new file mode 100644
index 00000000000000..3fbd505c08dca7
--- /dev/null
+++ b/packages/editor/src/components/post-title/style.scss
@@ -0,0 +1,6 @@
+// Raw Text Variant
+.editor-post-title.is-raw-text {
+	margin-bottom: $grid-unit-30;
+	margin-top: 2px; // space for focus outline to appear.
+	max-width: none;
+}
diff --git a/packages/editor/src/components/post-title/test/__snapshots__/index.native.js.snap b/packages/editor/src/components/post-title/test/__snapshots__/index.native.js.snap
new file mode 100644
index 00000000000000..d595171b880785
--- /dev/null
+++ b/packages/editor/src/components/post-title/test/__snapshots__/index.native.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostTitle does not update title with existing content when pasting HTML 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Howdy</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">This is a heading.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`PostTitle populates empty title with first block content when pasting HTML 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">This is a heading.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/packages/editor/src/components/post-title/test/index.native.js b/packages/editor/src/components/post-title/test/index.native.js
new file mode 100644
index 00000000000000..1d7cc492f44b8b
--- /dev/null
+++ b/packages/editor/src/components/post-title/test/index.native.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	getEditorTitle,
+	initializeEditor,
+	pasteIntoRichText,
+	selectRangeInRichText,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+const HTML_MULTIPLE_TAGS = `<h2>Howdy</h2>
+<h2>This is a heading.</h2>
+<p>This is a paragraph.</p>`;
+
+describe( 'PostTitle', () => {
+	it( 'populates empty title with first block content when pasting HTML', async () => {
+		await initializeEditor( { initialTitle: '' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		pasteIntoRichText( postTitle, { html: HTML_MULTIPLE_TAGS } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'Howdy' );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'does not update title with existing content when pasting HTML', async () => {
+		const initialTitle = 'Hello';
+		await initializeEditor( { initialTitle } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 0 );
+		pasteIntoRichText( postTitle, { html: HTML_MULTIPLE_TAGS } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( initialTitle );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates title with existing content when pasting text', async () => {
+		await initializeEditor( { initialTitle: 'World' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 0 );
+		pasteIntoRichText( postTitle, { text: 'Hello' } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'HelloWorld' );
+		expect( getEditorHtml() ).toBe( '' );
+	} );
+
+	it( 'does not add HTML to title when pasting span tag', async () => {
+		const pasteHTML = `<span style="border: 1px solid black">l</span>`;
+		await initializeEditor( { initialTitle: 'Helo' } );
+
+		const postTitle = within(
+			screen.getByTestId( 'post-title' )
+		).getByPlaceholderText( 'Add title' );
+		selectRangeInRichText( postTitle, 2 );
+		pasteIntoRichText( postTitle, { html: pasteHTML } );
+
+		expect( console ).toHaveLogged();
+		expect( getEditorTitle() ).toBe( 'Hello' );
+		expect( getEditorHtml() ).toBe( '' );
+	} );
+} );
diff --git a/packages/editor/src/components/post-title/use-post-title-focus.js b/packages/editor/src/components/post-title/use-post-title-focus.js
new file mode 100644
index 00000000000000..127b7661462ba9
--- /dev/null
+++ b/packages/editor/src/components/post-title/use-post-title-focus.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useImperativeHandle, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Custom hook that manages the focus behavior of the post title input field.
+ *
+ * @param {Element} forwardedRef - The forwarded ref for the input field.
+ *
+ * @return {Object} - The ref object.
+ */
+export default function usePostTitleFocus( forwardedRef ) {
+	const ref = useRef();
+
+	const { isCleanNewPost } = useSelect( ( select ) => {
+		const { isCleanNewPost: _isCleanNewPost } = select( editorStore );
+
+		return {
+			isCleanNewPost: _isCleanNewPost(),
+		};
+	}, [] );
+
+	useImperativeHandle( forwardedRef, () => ( {
+		focus: () => {
+			ref?.current?.focus();
+		},
+	} ) );
+
+	useEffect( () => {
+		if ( ! ref.current ) {
+			return;
+		}
+
+		const { defaultView } = ref.current.ownerDocument;
+		const { name, parent } = defaultView;
+		const ownerDocument =
+			name === 'editor-canvas' ? parent.document : defaultView.document;
+		const { activeElement, body } = ownerDocument;
+
+		// Only autofocus the title when the post is entirely empty. This should
+		// only happen for a new post, which means we focus the title on new
+		// post so the author can start typing right away, without needing to
+		// click anything.
+		if ( isCleanNewPost && ( ! activeElement || body === activeElement ) ) {
+			ref.current.focus();
+		}
+	}, [ isCleanNewPost ] );
+
+	return { ref };
+}
diff --git a/packages/editor/src/components/post-title/use-post-title.js b/packages/editor/src/components/post-title/use-post-title.js
new file mode 100644
index 00000000000000..d335064a523549
--- /dev/null
+++ b/packages/editor/src/components/post-title/use-post-title.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Custom hook for managing the post title in the editor.
+ *
+ * @return {Object} An object containing the current title and a function to update the title.
+ */
+export default function usePostTitle() {
+	const { editPost } = useDispatch( editorStore );
+	const { title } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+
+		return {
+			title: getEditedPostAttribute( 'title' ),
+		};
+	}, [] );
+
+	function updateTitle( newTitle ) {
+		editPost( { title: newTitle } );
+	}
+
+	return { title, setTitle: updateTitle };
+}
diff --git a/packages/editor/src/components/post-transform-panel/hooks.js b/packages/editor/src/components/post-transform-panel/hooks.js
new file mode 100644
index 00000000000000..0f1ef74f0efff0
--- /dev/null
+++ b/packages/editor/src/components/post-transform-panel/hooks.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { EXCLUDED_PATTERN_SOURCES, PATTERN_TYPES } =
+	unlock( patternsPrivateApis );
+
+function injectThemeAttributeInBlockTemplateContent(
+	block,
+	currentThemeStylesheet
+) {
+	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+		return injectThemeAttributeInBlockTemplateContent(
+			innerBlock,
+			currentThemeStylesheet
+		);
+	} );
+
+	if (
+		block.name === 'core/template-part' &&
+		block.attributes.theme === undefined
+	) {
+		block.attributes.theme = currentThemeStylesheet;
+	}
+	return block;
+}
+
+/**
+ * Filter all patterns and return only the ones that are compatible with the current template.
+ *
+ * @param {Array}  patterns An array of patterns.
+ * @param {Object} template The current template.
+ * @return {Array} Array of patterns that are compatible with the current template.
+ */
+function filterPatterns( patterns, template ) {
+	// Filter out duplicates.
+	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+		index === items.findIndex( ( item ) => currentItem.name === item.name );
+
+	// Filter out core/directory patterns not included in theme.json.
+	const filterOutExcludedPatternSources = ( pattern ) =>
+		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
+
+	// Looks for patterns that have the same template type as the current template,
+	// or have a block type that matches the current template area.
+	const filterCompatiblePatterns = ( pattern ) =>
+		pattern.templateTypes?.includes( template.slug ) ||
+		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
+
+	return patterns.filter( ( pattern, index, items ) => {
+		return (
+			filterOutDuplicatesByName( pattern, index, items ) &&
+			filterOutExcludedPatternSources( pattern ) &&
+			filterCompatiblePatterns( pattern )
+		);
+	} );
+}
+
+function preparePatterns( patterns, currentThemeStylesheet ) {
+	return patterns.map( ( pattern ) => ( {
+		...pattern,
+		keywords: pattern.keywords || [],
+		type: PATTERN_TYPES.theme,
+		blocks: parse( pattern.content, {
+			__unstableSkipMigrationLogs: true,
+		} ).map( ( block ) =>
+			injectThemeAttributeInBlockTemplateContent(
+				block,
+				currentThemeStylesheet
+			)
+		),
+	} ) );
+}
+
+export function useAvailablePatterns( template ) {
+	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
+		useSelect( ( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const settings = getEditorSettings();
+
+			return {
+				blockPatterns:
+					settings.__experimentalAdditionalBlockPatterns ??
+					settings.__experimentalBlockPatterns,
+				restBlockPatterns: select( coreStore ).getBlockPatterns(),
+				currentThemeStylesheet:
+					select( coreStore ).getCurrentTheme().stylesheet,
+			};
+		}, [] );
+
+	return useMemo( () => {
+		const mergedPatterns = [
+			...( blockPatterns || [] ),
+			...( restBlockPatterns || [] ),
+		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
+		return preparePatterns(
+			filteredPatterns,
+			template,
+			currentThemeStylesheet
+		);
+	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
+}
diff --git a/packages/editor/src/components/post-transform-panel/index.js b/packages/editor/src/components/post-transform-panel/index.js
new file mode 100644
index 00000000000000..88ca6dc3965a11
--- /dev/null
+++ b/packages/editor/src/components/post-transform-panel/index.js
@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { useAvailablePatterns } from './hooks';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../store/constants';
+
+function TemplatesList( { availableTemplates, onSelect } ) {
+	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			onClickPattern={ onSelect }
+			showTitlesAsTooltip
+		/>
+	);
+}
+
+function PostTransform() {
+	const { record, postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const type = getCurrentPostType();
+		const id = getCurrentPostId();
+		return {
+			postType: type,
+			postId: id,
+			record: getEditedEntityRecord( 'postType', type, id ),
+		};
+	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const availablePatterns = useAvailablePatterns( record );
+	const onTemplateSelect = async ( selectedTemplate ) => {
+		await editEntityRecord( 'postType', postType, postId, {
+			blocks: selectedTemplate.blocks,
+			content: serialize( selectedTemplate.blocks ),
+		} );
+	};
+	if ( ! availablePatterns?.length ) {
+		return null;
+	}
+
+	return (
+		<PanelBody
+			title={ __( 'Design' ) }
+			initialOpen={ record.type === TEMPLATE_PART_POST_TYPE }
+		>
+			<TemplatesList
+				availableTemplates={ availablePatterns }
+				onSelect={ onTemplateSelect }
+			/>
+		</PanelBody>
+	);
+}
+
+export default function PostTransformPanel() {
+	const { postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return {
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	if (
+		! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( postType )
+	) {
+		return null;
+	}
+
+	return <PostTransform />;
+}
diff --git a/packages/editor/src/components/post-trash/check.js b/packages/editor/src/components/post-trash/check.js
index ecc0d63c9436bd..590aa7cd4c390b 100644
--- a/packages/editor/src/components/post-trash/check.js
+++ b/packages/editor/src/components/post-trash/check.js
@@ -1,34 +1,49 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { GLOBAL_POST_TYPES } from '../../store/constants';
 
-function PostTrashCheck( { isNew, postId, canUserDelete, children } ) {
-	if ( isNew || ! postId || ! canUserDelete ) {
+/**
+ * Wrapper component that renders its children only if the post can be trashed.
+ *
+ * @param {Object}             props          The component props.
+ * @param {React.ReactElement} props.children The child components.
+ *
+ * @return {React.ReactElement | null} The rendered child components or null if the post can't be trashed.
+ */
+export default function PostTrashCheck( { children } ) {
+	const { canTrashPost } = useSelect( ( select ) => {
+		const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
+			select( editorStore );
+		const { canUser } = select( coreStore );
+		const postType = getCurrentPostType();
+		const postId = getCurrentPostId();
+		const isNew = isEditedPostNew();
+		const canUserDelete = !! postId
+			? canUser( 'delete', {
+					kind: 'postType',
+					name: postType,
+					id: postId,
+			  } )
+			: false;
+
+		return {
+			canTrashPost:
+				( ! isNew || postId ) &&
+				canUserDelete &&
+				! GLOBAL_POST_TYPES.includes( postType ),
+		};
+	}, [] );
+	if ( ! canTrashPost ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default withSelect( ( select ) => {
-	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
-		select( editorStore );
-	const { getPostType, canUser } = select( coreStore );
-	const postId = getCurrentPostId();
-	const postType = getPostType( getCurrentPostType() );
-	const resource = postType?.rest_base || ''; // eslint-disable-line camelcase
-
-	return {
-		isNew: isEditedPostNew(),
-		postId,
-		canUserDelete:
-			postId && resource ? canUser( 'delete', resource, postId ) : false,
-	};
-} )( PostTrashCheck );
diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js
index 08628689fc1451..2d3dd8bcb0c4b3 100644
--- a/packages/editor/src/components/post-trash/index.js
+++ b/packages/editor/src/components/post-trash/index.js
@@ -1,40 +1,82 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import PostTrashCheck from './check';
 
-export default function PostTrash() {
-	const { isNew, isDeleting, postId } = useSelect( ( select ) => {
+/**
+ * Displays the Post Trash Button and Confirm Dialog in the Editor.
+ *
+ * @param {?{onActionPerformed: Object}} An object containing the onActionPerformed function.
+ * @return {React.ReactNode} The rendered PostTrash component.
+ */
+export default function PostTrash( { onActionPerformed } ) {
+	const registry = useRegistry();
+	const { isNew, isDeleting, postId, title } = useSelect( ( select ) => {
 		const store = select( editorStore );
 		return {
 			isNew: store.isEditedPostNew(),
 			isDeleting: store.isDeletingPost(),
 			postId: store.getCurrentPostId(),
+			title: store.getCurrentPostAttribute( 'title' ),
 		};
 	}, [] );
 	const { trashPost } = useDispatch( editorStore );
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	if ( isNew || ! postId ) {
 		return null;
 	}
 
+	const handleConfirm = async () => {
+		setShowConfirmDialog( false );
+		await trashPost();
+		const item = await registry
+			.resolveSelect( editorStore )
+			.getCurrentPost();
+		// After the post is trashed, we want to trigger the onActionPerformed callback, so the user is redirect
+		// to the post view depending on if the user is on post editor or site editor.
+		onActionPerformed?.( 'move-to-trash', [ item ] );
+	};
 	return (
-		<Button
-			className="editor-post-trash"
-			isDestructive
-			variant="secondary"
-			isBusy={ isDeleting }
-			aria-disabled={ isDeleting }
-			onClick={ isDeleting ? undefined : () => trashPost() }
-		>
-			{ __( 'Move to trash' ) }
-		</Button>
+		<PostTrashCheck>
+			<Button
+				__next40pxDefaultSize
+				className="editor-post-trash"
+				isDestructive
+				variant="secondary"
+				isBusy={ isDeleting }
+				aria-disabled={ isDeleting }
+				onClick={
+					isDeleting ? undefined : () => setShowConfirmDialog( true )
+				}
+			>
+				{ __( 'Move to trash' ) }
+			</Button>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				onConfirm={ handleConfirm }
+				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ __( 'Move to trash' ) }
+				size="small"
+			>
+				{ sprintf(
+					// translators: %s: The item's title.
+					__( 'Are you sure you want to move "%s" to the trash?' ),
+					title
+				) }
+			</ConfirmDialog>
+		</PostTrashCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-trash/style.scss b/packages/editor/src/components/post-trash/style.scss
index dddda0421edb3f..e47981314d5f28 100644
--- a/packages/editor/src/components/post-trash/style.scss
+++ b/packages/editor/src/components/post-trash/style.scss
@@ -1,6 +1,4 @@
 .editor-post-trash.components-button {
-	display: flex;
+	flex-grow: 1;
 	justify-content: center;
-	margin-top: $grid-unit-05;
-	width: 100%;
 }
diff --git a/packages/editor/src/components/post-type-support-check/README.md b/packages/editor/src/components/post-type-support-check/README.md
index 565882fab758ba..eab70d088999b7 100644
--- a/packages/editor/src/components/post-type-support-check/README.md
+++ b/packages/editor/src/components/post-type-support-check/README.md
@@ -16,7 +16,7 @@ If the post type is not yet known, it will be assumed to be supported.
 
 ### `children`
 
-_Type:_ `WPElement`
+_Type:_ `Element`
 
 Children to be rendered if post type supports.
 
diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
index 4260c9af468965..f04aea84b0e411 100644
--- a/packages/editor/src/components/post-type-support-check/index.js
+++ b/packages/editor/src/components/post-type-support-check/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -13,21 +13,25 @@ import { store as editorStore } from '../../store';
  * A component which renders its own children only if the current editor post
  * type supports one of the given `supportKeys` prop.
  *
- * @param {Object}            props             Props.
- * @param {string}            [props.postType]  Current post type.
- * @param {WPElement}         props.children    Children to be rendered if post
- *                                              type supports.
- * @param {(string|string[])} props.supportKeys String or string array of keys
- *                                              to test.
+ * @param {Object}             props             Props.
+ * @param {React.ReactElement} props.children    Children to be rendered if post
+ *                                               type supports.
+ * @param {(string|string[])}  props.supportKeys String or string array of keys
+ *                                               to test.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {React.ReactElement} The component to be rendered.
  */
-export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
-	let isSupported = true;
+function PostTypeSupportCheck( { children, supportKeys } ) {
+	const postType = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		return getPostType( getEditedPostAttribute( 'type' ) );
+	}, [] );
+	let isSupported = !! postType;
 	if ( postType ) {
 		isSupported = (
 			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-		 ).some( ( key ) => !! postType.supports[ key ] );
+		).some( ( key ) => !! postType.supports[ key ] );
 	}
 
 	if ( ! isSupported ) {
@@ -37,10 +41,4 @@ export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	return children;
 }
 
-export default withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( editorStore );
-	const { getPostType } = select( coreStore );
-	return {
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-	};
-} )( PostTypeSupportCheck );
+export default PostTypeSupportCheck;
diff --git a/packages/editor/src/components/post-type-support-check/test/index.js b/packages/editor/src/components/post-type-support-check/test/index.js
index c9f9e0ab1ebe36..71b9f083a74a23 100644
--- a/packages/editor/src/components/post-type-support-check/test/index.js
+++ b/packages/editor/src/components/post-type-support-check/test/index.js
@@ -3,28 +3,50 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostTypeSupportCheck } from '../';
+import PostTypeSupportCheck from '../';
+
+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;
+} );
+
+function setupUseSelectMock( postType ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => postType,
+			getEditedPostAttribute: () => 'post',
+		} ) );
+	} );
+}
 
 describe( 'PostTypeSupportCheck', () => {
-	it( 'renders its children when post type is not known', () => {
+	it( 'does not render its children when post type is not known', () => {
+		setupUseSelectMock( undefined );
+
 		const { container } = render(
-			<PostTypeSupportCheck postType={ undefined } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
 
-		expect( container ).toHaveTextContent( 'Supported' );
+		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -33,13 +55,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children when post type is known and supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -48,16 +70,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children if some of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -66,14 +85,11 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'does not render its children if none of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);
diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js
index 65c54846a702b1..a80d829de23221 100644
--- a/packages/editor/src/components/post-url/check.js
+++ b/packages/editor/src/components/post-url/check.js
@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Check if the post URL is valid and visible.
+ *
+ * @param {Object}             props          The component props.
+ * @param {React.ReactElement} props.children The child components.
+ *
+ * @return {React.ReactElement} The child components if the post URL is valid and visible, otherwise null.
+ */
 export default function PostURLCheck( { children } ) {
 	const isVisible = useSelect( ( select ) => {
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 32dfbbc63706f9..f55ac973be50e6 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -3,120 +3,196 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { TextControl, ExternalLink } from '@wordpress/components';
+import {
+	ExternalLink,
+	Button,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+import { copySmall } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the `PostURL` component.
+ *
+ * @example
+ * ```jsx
+ * <PostURL />
+ * ```
+ *
+ * @param {{ onClose: () => void }} props         The props for the component.
+ * @param {() => void}              props.onClose Callback function to be executed when the popover is closed.
+ *
+ * @return {React.ReactNode} The rendered PostURL component.
+ */
 export default function PostURL( { onClose } ) {
 	const {
 		isEditable,
 		postSlug,
-		viewPostLabel,
 		postLink,
 		permalinkPrefix,
 		permalinkSuffix,
+		permalink,
 	} = useSelect( ( select ) => {
+		const post = select( editorStore ).getCurrentPost();
 		const postTypeSlug = select( editorStore ).getCurrentPostType();
 		const postType = select( coreStore ).getPostType( postTypeSlug );
 		const permalinkParts = select( editorStore ).getPermalinkParts();
+		const hasPublishAction = post?._links?.[ 'wp:action-publish' ] ?? false;
+
 		return {
-			isEditable: select( editorStore ).isPermalinkEditable(),
+			isEditable:
+				select( editorStore ).isPermalinkEditable() && hasPublishAction,
 			postSlug: safeDecodeURIComponent(
 				select( editorStore ).getEditedPostSlug()
 			),
 			viewPostLabel: postType?.labels.view_item,
-			postLink: select( editorStore ).getCurrentPost().link,
+			postLink: post.link,
 			permalinkPrefix: permalinkParts?.prefix,
 			permalinkSuffix: permalinkParts?.suffix,
+			permalink: safeDecodeURIComponent(
+				select( editorStore ).getPermalink()
+			),
 		};
 	}, [] );
-
 	const { editPost } = useDispatch( editorStore );
-
+	const { createNotice } = useDispatch( noticesStore );
 	const [ forceEmptyField, setForceEmptyField ] = useState( false );
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
+		createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
+	const postUrlSlugDescriptionId =
+		'editor-post-url__slug-description-' + useInstanceId( PostURL );
 
 	return (
 		<div className="editor-post-url">
-			<InspectorPopoverHeader title={ __( 'URL' ) } onClose={ onClose } />
-			{ isEditable && (
-				<TextControl
-					label={ __( 'Permalink' ) }
-					value={ forceEmptyField ? '' : postSlug }
-					autoComplete="off"
-					spellCheck="false"
-					help={
-						<>
-							{ __( 'The last part of the URL.' ) }{ ' ' }
-							<ExternalLink
-								href={ __(
-									'https://wordpress.org/support/article/settings-sidebar/#permalink'
-								) }
-							>
-								{ __( 'Learn more.' ) }
-							</ExternalLink>
-						</>
-					}
-					onChange={ ( newValue ) => {
-						editPost( { slug: newValue } );
-						// When we delete the field the permalink gets
-						// reverted to the original value.
-						// The forceEmptyField logic allows the user to have
-						// the field temporarily empty while typing.
-						if ( ! newValue ) {
-							if ( ! forceEmptyField ) {
-								setForceEmptyField( true );
+			<InspectorPopoverHeader
+				title={ __( 'Slug' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 3 }>
+				{ isEditable && (
+					<p className="editor-post-url__intro">
+						{ createInterpolateElement(
+							__(
+								'<span>Customize the last part of the Permalink.</span> <a>Learn more.</a>'
+							),
+							{
+								span: <span id={ postUrlSlugDescriptionId } />,
+								a: (
+									<ExternalLink
+										href={ __(
+											'https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink'
+										) }
+									/>
+								),
 							}
-							return;
-						}
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-					onBlur={ ( event ) => {
-						editPost( {
-							slug: cleanForSlug( event.target.value ),
-						} );
-						if ( forceEmptyField ) {
-							setForceEmptyField( false );
-						}
-					} }
-				/>
-			) }
-			{ isEditable && (
-				<h3 className="editor-post-url__link-label">
-					{ viewPostLabel ?? __( 'View post' ) }
-				</h3>
-			) }
-			<p>
-				<ExternalLink
-					className="editor-post-url__link"
-					href={ postLink }
-					target="_blank"
-				>
-					{ isEditable ? (
+						) }
+					</p>
+				) }
+				<div>
+					{ isEditable && (
 						<>
-							<span className="editor-post-url__link-prefix">
-								{ permalinkPrefix }
-							</span>
-							<span className="editor-post-url__link-slug">
-								{ postSlug }
-							</span>
-							<span className="editor-post-url__link-suffix">
-								{ permalinkSuffix }
-							</span>
+							<InputControl
+								__next40pxDefaultSize
+								prefix={
+									<InputControlPrefixWrapper>
+										/
+									</InputControlPrefixWrapper>
+								}
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											icon={ copySmall }
+											ref={ copyButtonRef }
+											size="small"
+											label="Copy"
+										/>
+									</InputControlSuffixWrapper>
+								}
+								label={ __( 'Slug' ) }
+								hideLabelFromVision
+								value={ forceEmptyField ? '' : postSlug }
+								autoComplete="off"
+								spellCheck="false"
+								type="text"
+								className="editor-post-url__input"
+								onChange={ ( newValue ) => {
+									editPost( { slug: newValue } );
+									// When we delete the field the permalink gets
+									// reverted to the original value.
+									// The forceEmptyField logic allows the user to have
+									// the field temporarily empty while typing.
+									if ( ! newValue ) {
+										if ( ! forceEmptyField ) {
+											setForceEmptyField( true );
+										}
+										return;
+									}
+									if ( forceEmptyField ) {
+										setForceEmptyField( false );
+									}
+								} }
+								onBlur={ ( event ) => {
+									editPost( {
+										slug: cleanForSlug(
+											event.target.value
+										),
+									} );
+									if ( forceEmptyField ) {
+										setForceEmptyField( false );
+									}
+								} }
+								aria-describedby={ postUrlSlugDescriptionId }
+							/>
+							<p className="editor-post-url__permalink">
+								<span className="editor-post-url__permalink-visual-label">
+									{ __( 'Permalink:' ) }
+								</span>
+								<ExternalLink
+									className="editor-post-url__link"
+									href={ postLink }
+									target="_blank"
+								>
+									<span className="editor-post-url__link-prefix">
+										{ permalinkPrefix }
+									</span>
+									<span className="editor-post-url__link-slug">
+										{ postSlug }
+									</span>
+									<span className="editor-post-url__link-suffix">
+										{ permalinkSuffix }
+									</span>
+								</ExternalLink>
+							</p>
 						</>
-					) : (
-						postLink
 					) }
-				</ExternalLink>
-			</p>
+					{ ! isEditable && (
+						<ExternalLink
+							className="editor-post-url__link"
+							href={ postLink }
+							target="_blank"
+						>
+							{ postLink }
+						</ExternalLink>
+					) }
+				</div>
+			</VStack>
 		</div>
 	);
 }
diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js
index 5c233dfd549467..277cc6cfc715d3 100644
--- a/packages/editor/src/components/post-url/label.js
+++ b/packages/editor/src/components/post-url/label.js
@@ -9,10 +9,20 @@ import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Represents a label component for a post URL.
+ *
+ * @return {React.ReactNode} The PostURLLabel component.
+ */
 export default function PostURLLabel() {
 	return usePostURLLabel();
 }
 
+/**
+ * Custom hook to get the label for the post URL.
+ *
+ * @return {string} The filtered and decoded post URL label.
+ */
 export function usePostURLLabel() {
 	const postLink = useSelect(
 		( select ) => select( editorStore ).getPermalink(),
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
new file mode 100644
index 00000000000000..97eaa8ccb77f8d
--- /dev/null
+++ b/packages/editor/src/components/post-url/panel.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Dropdown, Button, ExternalLink } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { safeDecodeURIComponent } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import PostURLCheck from './check';
+import PostURL from './index';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+/**
+ * Renders the `PostURLPanel` component.
+ *
+ * @return {React.ReactNode} The rendered PostURLPanel component.
+ */
+export default function PostURLPanel() {
+	const { isFrontPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const _id = getCurrentPostId();
+		return {
+			isFrontPage: siteSettings?.page_on_front === _id,
+		};
+	}, [] );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
+	return (
+		<PostURLCheck>
+			<PostPanelRow label={ label } ref={ setPopoverAnchor }>
+				{ ! isFrontPage && (
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="editor-post-url__panel-dropdown"
+						contentClassName="editor-post-url__panel-dialog"
+						focusOnMount
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<PostURLToggle
+								isOpen={ isOpen }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ ( { onClose } ) => (
+							<PostURL onClose={ onClose } />
+						) }
+					/>
+				) }
+				{ isFrontPage && <FrontPageLink /> }
+			</PostPanelRow>
+		</PostURLCheck>
+	);
+}
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const { slug } = useSelect( ( select ) => {
+		return {
+			slug: select( editorStore ).getEditedPostSlug(),
+		};
+	}, [] );
+	const decodedSlug = safeDecodeURIComponent( slug );
+	return (
+		<Button
+			size="compact"
+			className="editor-post-url__panel-toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={
+				// translators: %s: Current post link.
+				sprintf( __( 'Change link: %s' ), decodedSlug )
+			}
+			onClick={ onClick }
+		>
+			<>{ decodedSlug }</>
+		</Button>
+	);
+}
+
+function FrontPageLink() {
+	const { postLink } = useSelect( ( select ) => {
+		const { getCurrentPost } = select( editorStore );
+		return {
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
+
+	return (
+		<ExternalLink
+			className="editor-post-url__front-page-link"
+			href={ postLink }
+			target="_blank"
+		>
+			{ postLink }
+		</ExternalLink>
+	);
+}
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index bfdbf2a9697a71..f8a70f5fdf760b 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -1,16 +1,50 @@
-.editor-post-url__link-label {
-	font-size: $default-font-size;
-	font-weight: 400;
-	margin: 0;
+.editor-post-url__panel-dropdown {
+	width: 100%;
+}
+
+.editor-post-url__panel-dialog .editor-post-url {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
 }
 
 /* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
 	direction: ltr;
 	word-break: break-word;
 }
 /* rtl:end:ignore */
 
+.editor-post-url__front-page-link {
+	// Match padding on tertiary buttons for alignment.
+	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
 .editor-post-url__link-slug {
 	font-weight: 600;
 }
+
+// TODO: This might indicate a need to update the InputControl itself, as
+// there is no way currently to control the padding when adding prefix/suffix.
+.editor-post-url__input input.components-input-control__input {
+	padding-inline-start: 0 !important;
+}
+
+.editor-post-url__panel-toggle {
+	word-break: break-word;
+}
+
+.editor-post-url__intro {
+	margin: 0;
+}
+
+.editor-post-url__permalink {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+
+	&-visual-label {
+		display: block;
+	}
+}
diff --git a/packages/editor/src/components/post-view-link/index.js b/packages/editor/src/components/post-view-link/index.js
new file mode 100644
index 00000000000000..a15b7546fa7c9f
--- /dev/null
+++ b/packages/editor/src/components/post-view-link/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function PostViewLink() {
+	const { hasLoaded, permalink, isPublished, label, showIconLabels } =
+		useSelect( ( select ) => {
+			// Grab post type to retrieve the view_item label.
+			const postTypeSlug = select( editorStore ).getCurrentPostType();
+			const postType = select( coreStore ).getPostType( postTypeSlug );
+			const { get } = select( preferencesStore );
+
+			return {
+				permalink: select( editorStore ).getPermalink(),
+				isPublished: select( editorStore ).isCurrentPostPublished(),
+				label: postType?.labels.view_item,
+				hasLoaded: !! postType,
+				showIconLabels: get( 'core', 'showIconLabels' ),
+			};
+		}, [] );
+
+	// Only render the view button if the post is published and has a permalink.
+	if ( ! isPublished || ! permalink || ! hasLoaded ) {
+		return null;
+	}
+
+	return (
+		<Button
+			icon={ external }
+			label={ label || __( 'View post' ) }
+			href={ permalink }
+			target="_blank"
+			showTooltip={ ! showIconLabels }
+			size="compact"
+		/>
+	);
+}
diff --git a/packages/editor/src/components/post-visibility/check.js b/packages/editor/src/components/post-visibility/check.js
index c2a0814369be82..ea04a6b739617a 100644
--- a/packages/editor/src/components/post-visibility/check.js
+++ b/packages/editor/src/components/post-visibility/check.js
@@ -1,34 +1,30 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostVisibilityCheck( { hasPublishAction, render } ) {
-	const canEdit = hasPublishAction;
+/**
+ * Determines if the current post can be edited (published)
+ * and passes this information to the provided render function.
+ *
+ * @param {Object}   props        The component props.
+ * @param {Function} props.render Function to render the component.
+ *                                Receives an object with a `canEdit` property.
+ * @return {React.ReactNode} The rendered component.
+ */
+export default function PostVisibilityCheck( { render } ) {
+	const canEdit = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPost()._links?.[
+				'wp:action-publish'
+			] ?? false
+		);
+	} );
+
 	return render( { canEdit } );
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getCurrentPostType } = select( editorStore );
-		return {
-			hasPublishAction: get(
-				getCurrentPost(),
-				[ '_links', 'wp:action-publish' ],
-				false
-			),
-			postType: getCurrentPostType(),
-		};
-	} ),
-] )( PostVisibilityCheck );
diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js
index a16682150350ed..3eb0c157c337ca 100644
--- a/packages/editor/src/components/post-visibility/index.js
+++ b/packages/editor/src/components/post-visibility/index.js
@@ -17,6 +17,13 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Allows users to set the visibility of a post.
+ *
+ * @param {Object}   props         The component props.
+ * @param {Function} props.onClose Function to call when the popover is closed.
+ * @return {React.ReactNode} The rendered component.
+ */
 export default function PostVisibility( { onClose } ) {
 	const instanceId = useInstanceId( PostVisibility );
 
@@ -125,6 +132,8 @@ export default function PostVisibility( { onClose } ) {
 				isOpen={ showPrivateConfirmDialog }
 				onConfirm={ confirmPrivate }
 				onCancel={ handleDialogCancel }
+				confirmButtonText={ __( 'Publish' ) }
+				size="medium"
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>
diff --git a/packages/editor/src/components/post-visibility/label.js b/packages/editor/src/components/post-visibility/label.js
index 580eed75620b4d..50a6e14aa1a14e 100644
--- a/packages/editor/src/components/post-visibility/label.js
+++ b/packages/editor/src/components/post-visibility/label.js
@@ -9,10 +9,20 @@ import { useSelect } from '@wordpress/data';
 import { visibilityOptions } from './utils';
 import { store as editorStore } from '../../store';
 
+/**
+ * Returns the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export default function PostVisibilityLabel() {
 	return usePostVisibilityLabel();
 }
 
+/**
+ * Get the label for the current post visibility setting.
+ *
+ * @return {string} Post visibility label.
+ */
 export function usePostVisibilityLabel() {
 	const visibility = useSelect( ( select ) =>
 		select( editorStore ).getEditedPostVisibility()
diff --git a/packages/editor/src/components/post-visibility/test/check.js b/packages/editor/src/components/post-visibility/test/check.js
index 8ec0c2df04ec90..828e876cceb102 100644
--- a/packages/editor/src/components/post-visibility/test/check.js
+++ b/packages/editor/src/components/post-visibility/test/check.js
@@ -3,32 +3,43 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
 /**
  * Internal dependencies
  */
-import { PostVisibilityCheck } from '../check';
+import PostVisibilityCheck from '../check';
+
+function setupMockSelect( hasPublishAction ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostVisibilityCheck', () => {
 	const renderProp = ( { canEdit } ) => ( canEdit ? 'yes' : 'no' );
 
 	it( "should not render the edit link if the user doesn't have the right capability", () => {
-		render(
-			<PostVisibilityCheck
-				hasPublishAction={ false }
-				render={ renderProp }
-			/>
-		);
+		setupMockSelect( false );
+		render( <PostVisibilityCheck render={ renderProp } /> );
 		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'no' ) ).toBeVisible();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostVisibilityCheck
-				hasPublishAction={ true }
-				render={ renderProp }
-			/>
-		);
+		setupMockSelect( true );
+		render( <PostVisibilityCheck render={ renderProp } /> );
 		expect( screen.queryByText( 'no' ) ).not.toBeInTheDocument();
 		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
diff --git a/packages/editor/src/components/posts-per-page/index.js b/packages/editor/src/components/posts-per-page/index.js
new file mode 100644
index 00000000000000..876644168a52c7
--- /dev/null
+++ b/packages/editor/src/components/posts-per-page/index.js
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
+
+export default function PostsPerPage() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postsPerPage, isTemplate, postSlug } = useSelect( ( select ) => {
+		const { getEditedPostAttribute, getCurrentPostType } =
+			select( editorStore );
+		const { getEditedEntityRecord, canUser } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		return {
+			isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+			postSlug: getEditedPostAttribute( 'slug' ),
+			postsPerPage: siteSettings?.posts_per_page || 1,
+		};
+	}, [] );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setPostsPerPage = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			posts_per_page: newValue,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Posts per page' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-posts-per-page-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change posts per page' ) }
+						onClick={ onToggle }
+					>
+						{ postsPerPage }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Posts per page' ) }
+							onClose={ onClose }
+						/>
+						<NumberControl
+							placeholder={ 0 }
+							value={ postsPerPage }
+							size="__unstable-large"
+							spinControls="custom"
+							step="1"
+							min="1"
+							onChange={ setPostsPerPage }
+							label={ __( 'Posts per page' ) }
+							help={ __(
+								'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
+							) }
+							hideLabelFromVision
+						/>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/posts-per-page/style.scss b/packages/editor/src/components/posts-per-page/style.scss
new file mode 100644
index 00000000000000..e77e9b33206320
--- /dev/null
+++ b/packages/editor/src/components/posts-per-page/style.scss
@@ -0,0 +1,4 @@
+.editor-posts-per-page-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
diff --git a/packages/editor/src/components/preferences-modal/block-visibility.js b/packages/editor/src/components/preferences-modal/block-visibility.js
new file mode 100644
index 00000000000000..8726b114d97480
--- /dev/null
+++ b/packages/editor/src/components/preferences-modal/block-visibility.js
@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { BlockManager } = unlock( blockEditorPrivateApis );
+
+export default function BlockVisibility() {
+	const { showBlockTypes, hideBlockTypes } = unlock(
+		useDispatch( editorStore )
+	);
+
+	const {
+		blockTypes,
+		allowedBlockTypes: _allowedBlockTypes,
+		hiddenBlockTypes: _hiddenBlockTypes,
+	} = useSelect( ( select ) => {
+		return {
+			blockTypes: select( blocksStore ).getBlockTypes(),
+			allowedBlockTypes:
+				select( editorStore ).getEditorSettings().allowedBlockTypes,
+			hiddenBlockTypes:
+				select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
+				[],
+		};
+	}, [] );
+
+	const allowedBlockTypes = useMemo( () => {
+		if ( _allowedBlockTypes === true ) {
+			return blockTypes;
+		}
+		return blockTypes.filter( ( { name } ) => {
+			return _allowedBlockTypes?.includes( name );
+		} );
+	}, [ _allowedBlockTypes, blockTypes ] );
+
+	const filteredBlockTypes = allowedBlockTypes.filter(
+		( blockType ) =>
+			hasBlockSupport( blockType, 'inserter', true ) &&
+			( ! blockType.parent ||
+				blockType.parent.includes( 'core/post-content' ) )
+	);
+
+	// Some hidden blocks become unregistered
+	// by removing for instance the plugin that registered them, yet
+	// they're still remain as hidden by the user's action.
+	// We consider "hidden", blocks which were hidden and
+	// are still registered.
+	const hiddenBlockTypes = _hiddenBlockTypes.filter( ( hiddenBlock ) => {
+		return filteredBlockTypes.some(
+			( registeredBlock ) => registeredBlock.name === hiddenBlock
+		);
+	} );
+
+	const selectedBlockTypes = filteredBlockTypes.filter(
+		( blockType ) => ! hiddenBlockTypes.includes( blockType.name )
+	);
+
+	const onChangeSelectedBlockTypes = ( newSelectedBlockTypes ) => {
+		if ( selectedBlockTypes.length > newSelectedBlockTypes.length ) {
+			const blockTypesToHide = selectedBlockTypes.filter(
+				( blockType ) =>
+					! newSelectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			hideBlockTypes( blockTypesToHide.map( ( { name } ) => name ) );
+		} else if ( selectedBlockTypes.length < newSelectedBlockTypes.length ) {
+			const blockTypesToShow = newSelectedBlockTypes.filter(
+				( blockType ) =>
+					! selectedBlockTypes.find(
+						( { name } ) => name === blockType.name
+					)
+			);
+			showBlockTypes( blockTypesToShow.map( ( { name } ) => name ) );
+		}
+	};
+
+	return (
+		<BlockManager
+			blockTypes={ filteredBlockTypes }
+			selectedBlockTypes={ selectedBlockTypes }
+			onChange={ onChangeSelectedBlockTypes }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/preferences-modal/enable-panel.js b/packages/editor/src/components/preferences-modal/enable-panel.js
new file mode 100644
index 00000000000000..2e1839d8fe2547
--- /dev/null
+++ b/packages/editor/src/components/preferences-modal/enable-panel.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/edit-post/src/components/preferences-modal/options/enable-plugin-document-setting-panel.js b/packages/editor/src/components/preferences-modal/enable-plugin-document-setting-panel.js
similarity index 90%
rename from packages/edit-post/src/components/preferences-modal/options/enable-plugin-document-setting-panel.js
rename to packages/editor/src/components/preferences-modal/enable-plugin-document-setting-panel.js
index b18b0436579bcb..4dd2e55eba007b 100644
--- a/packages/edit-post/src/components/preferences-modal/options/enable-plugin-document-setting-panel.js
+++ b/packages/editor/src/components/preferences-modal/enable-plugin-document-setting-panel.js
@@ -6,7 +6,7 @@ import { createSlotFill } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { EnablePanelOption } from './index';
+import EnablePanelOption from './enable-panel';
 
 const { Fill, Slot } = createSlotFill(
 	'EnablePluginDocumentSettingPanelOption'
diff --git a/packages/editor/src/components/preferences-modal/enable-publish-sidebar.js b/packages/editor/src/components/preferences-modal/enable-publish-sidebar.js
new file mode 100644
index 00000000000000..bef31efe40e94b
--- /dev/null
+++ b/packages/editor/src/components/preferences-modal/enable-publish-sidebar.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+
+const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
+
+export default function EnablePublishSidebarOption( props ) {
+	const isChecked = useSelect( ( select ) => {
+		return select( editorStore ).isPublishSidebarEnabled();
+	}, [] );
+	const { enablePublishSidebar, disablePublishSidebar } =
+		useDispatch( editorStore );
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ ( isEnabled ) =>
+				isEnabled ? enablePublishSidebar() : disablePublishSidebar()
+			}
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js
new file mode 100644
index 00000000000000..72042bca03b70c
--- /dev/null
+++ b/packages/editor/src/components/preferences-modal/index.js
@@ -0,0 +1,349 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import {
+	store as preferencesStore,
+	privateApis as preferencesPrivateApis,
+} from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import EnablePanelOption from './enable-panel';
+import EnablePluginDocumentSettingPanelOption from './enable-plugin-document-setting-panel';
+import EnablePublishSidebarOption from './enable-publish-sidebar';
+import BlockVisibility from './block-visibility';
+import PostTaxonomies from '../post-taxonomies';
+import PostFeaturedImageCheck from '../post-featured-image/check';
+import PostExcerptCheck from '../post-excerpt/check';
+import PageAttributesCheck from '../page-attributes/check';
+import PostTypeSupportCheck from '../post-type-support-check';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useStartPatterns } from '../start-page-options';
+
+const {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+	PreferenceToggleControl,
+} = unlock( preferencesPrivateApis );
+
+export default function EditorPreferencesModal( { extraSections = {} } ) {
+	const isActive = useSelect( ( select ) => {
+		return select( interfaceStore ).isModalActive( 'editor/preferences' );
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	// Please wrap all contents inside PreferencesModalContents to prevent all
+	// hooks from executing when the modal is not open.
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalContents extraSections={ extraSections } />
+		</PreferencesModal>
+	);
+}
+
+function PreferencesModalContents( { extraSections = {} } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const showBlockBreadcrumbsOption = useSelect(
+		( select ) => {
+			const { getEditorSettings } = select( editorStore );
+			const { get } = select( preferencesStore );
+			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
+			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
+			return (
+				! isDistractionFreeEnabled &&
+				isLargeViewport &&
+				isRichEditingEnabled
+			);
+		},
+		[ isLargeViewport ]
+	);
+	const { setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editorStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const hasStarterPatterns = !! useStartPatterns().length;
+
+	const sections = useMemo(
+		() =>
+			[
+				{
+					name: 'general',
+					tabLabel: __( 'General' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'Interface' ) }
+							>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showListViewByDefault"
+									help={ __(
+										'Opens the List View sidebar by default.'
+									) }
+									label={ __( 'Always open List View' ) }
+								/>
+								{ showBlockBreadcrumbsOption && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="showBlockBreadcrumbs"
+										help={ __(
+											'Display the block hierarchy trail at the bottom of the editor.'
+										) }
+										label={ __( 'Show block breadcrumbs' ) }
+									/>
+								) }
+								<PreferenceToggleControl
+									scope="core"
+									featureName="allowRightClickOverrides"
+									help={ __(
+										'Allows contextual List View menus via right-click, overriding browser defaults.'
+									) }
+									label={ __(
+										'Allow right-click contextual menus'
+									) }
+								/>
+								{ hasStarterPatterns && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="enableChoosePatternModal"
+										help={ __(
+											'Shows starter patterns when creating a new page.'
+										) }
+										label={ __( 'Show starter patterns' ) }
+									/>
+								) }
+							</PreferencesModalSection>
+							<PreferencesModalSection
+								title={ __( 'Document settings' ) }
+								description={ __(
+									'Select what settings are shown in the document panel.'
+								) }
+							>
+								<EnablePluginDocumentSettingPanelOption.Slot />
+								<PostTaxonomies
+									taxonomyWrapper={ ( content, taxonomy ) => (
+										<EnablePanelOption
+											label={ taxonomy.labels.menu_name }
+											panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+										/>
+									) }
+								/>
+								<PostFeaturedImageCheck>
+									<EnablePanelOption
+										label={ __( 'Featured image' ) }
+										panelName="featured-image"
+									/>
+								</PostFeaturedImageCheck>
+								<PostExcerptCheck>
+									<EnablePanelOption
+										label={ __( 'Excerpt' ) }
+										panelName="post-excerpt"
+									/>
+								</PostExcerptCheck>
+								<PostTypeSupportCheck
+									supportKeys={ [ 'comments', 'trackbacks' ] }
+								>
+									<EnablePanelOption
+										label={ __( 'Discussion' ) }
+										panelName="discussion-panel"
+									/>
+								</PostTypeSupportCheck>
+								<PageAttributesCheck>
+									<EnablePanelOption
+										label={ __( 'Page attributes' ) }
+										panelName="page-attributes"
+									/>
+								</PageAttributesCheck>
+							</PreferencesModalSection>
+							{ isLargeViewport && (
+								<PreferencesModalSection
+									title={ __( 'Publishing' ) }
+								>
+									<EnablePublishSidebarOption
+										help={ __(
+											'Review settings, such as visibility and tags.'
+										) }
+										label={ __(
+											'Enable pre-publish checks'
+										) }
+									/>
+								</PreferencesModalSection>
+							) }
+							{ extraSections?.general }
+						</>
+					),
+				},
+				{
+					name: 'appearance',
+					tabLabel: __( 'Appearance' ),
+					content: (
+						<PreferencesModalSection
+							title={ __( 'Appearance' ) }
+							description={ __(
+								'Customize the editor interface to suit your needs.'
+							) }
+						>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="fixedToolbar"
+								onToggle={ () =>
+									setPreference(
+										'core',
+										'distractionFree',
+										false
+									)
+								}
+								help={ __(
+									'Access all block and document tools in a single place.'
+								) }
+								label={ __( 'Top toolbar' ) }
+							/>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="distractionFree"
+								onToggle={ () => {
+									setPreference(
+										'core',
+										'fixedToolbar',
+										true
+									);
+									setIsInserterOpened( false );
+									setIsListViewOpened( false );
+								} }
+								help={ __(
+									'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+								) }
+								label={ __( 'Distraction free' ) }
+							/>
+							<PreferenceToggleControl
+								scope="core"
+								featureName="focusMode"
+								help={ __(
+									'Highlights the current block and fades other content.'
+								) }
+								label={ __( 'Spotlight mode' ) }
+							/>
+							{ extraSections?.appearance }
+						</PreferencesModalSection>
+					),
+				},
+				{
+					name: 'accessibility',
+					tabLabel: __( 'Accessibility' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'Navigation' ) }
+								description={ __(
+									'Optimize the editing experience for enhanced control.'
+								) }
+							>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="keepCaretInsideBlock"
+									help={ __(
+										'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
+									) }
+									label={ __(
+										'Contain text cursor inside block'
+									) }
+								/>
+							</PreferencesModalSection>
+							<PreferencesModalSection
+								title={ __( 'Interface' ) }
+							>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="showIconLabels"
+									label={ __( 'Show button text labels' ) }
+									help={ __(
+										'Show text instead of icons on buttons across the interface.'
+									) }
+								/>
+							</PreferencesModalSection>
+						</>
+					),
+				},
+				{
+					name: 'blocks',
+					tabLabel: __( 'Blocks' ),
+					content: (
+						<>
+							<PreferencesModalSection title={ __( 'Inserter' ) }>
+								<PreferenceToggleControl
+									scope="core"
+									featureName="mostUsedBlocks"
+									help={ __(
+										'Adds a category with the most frequently used blocks in the inserter.'
+									) }
+									label={ __( 'Show most used blocks' ) }
+								/>
+							</PreferencesModalSection>
+							<PreferencesModalSection
+								title={ __( 'Manage block visibility' ) }
+								description={ __(
+									"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
+								) }
+							>
+								<BlockVisibility />
+							</PreferencesModalSection>
+						</>
+					),
+				},
+				window.__experimentalMediaProcessing && {
+					name: 'media',
+					tabLabel: __( 'Media' ),
+					content: (
+						<>
+							<PreferencesModalSection
+								title={ __( 'General' ) }
+								description={ __(
+									'Customize options related to the media upload flow.'
+								) }
+							>
+								<PreferenceToggleControl
+									scope="core/media"
+									featureName="optimizeOnUpload"
+									help={ __(
+										'Compress media items before uploading to the server.'
+									) }
+									label={ __( 'Pre-upload compression' ) }
+								/>
+								<PreferenceToggleControl
+									scope="core/media"
+									featureName="requireApproval"
+									help={ __(
+										'Require approval step when optimizing existing media.'
+									) }
+									label={ __( 'Approval step' ) }
+								/>
+							</PreferencesModalSection>
+						</>
+					),
+				},
+			].filter( Boolean ),
+		[
+			showBlockBreadcrumbsOption,
+			extraSections,
+			setIsInserterOpened,
+			setIsListViewOpened,
+			setPreference,
+			isLargeViewport,
+			hasStarterPatterns,
+		]
+	);
+
+	return <PreferencesModalTabs sections={ sections } />;
+}
diff --git a/packages/editor/src/components/preferences-modal/test/index.js b/packages/editor/src/components/preferences-modal/test/index.js
new file mode 100644
index 00000000000000..70102eea40f2ee
--- /dev/null
+++ b/packages/editor/src/components/preferences-modal/test/index.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import EditPostPreferencesModal from '../';
+
+// This allows us to tweak the returned value on each test.
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
+
+describe( 'EditPostPreferencesModal', () => {
+	it( 'should not render when the modal is not active', () => {
+		useSelect.mockImplementation( () => false );
+		render( <EditPostPreferencesModal /> );
+		expect(
+			screen.queryByRole( 'dialog', { name: 'Preferences' } )
+		).not.toBeInTheDocument();
+	} );
+} );
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
new file mode 100644
index 00000000000000..6fa35c673430cc
--- /dev/null
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -0,0 +1,200 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	MenuItemsChoice,
+	VisuallyHidden,
+	Icon,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { desktop, mobile, tablet, external, check } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { ActionItem } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import PostPreviewButton from '../post-preview-button';
+import { unlock } from '../../lock-unlock';
+
+export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
+	const {
+		deviceType,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+		isTemplateHidden,
+		templateId,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType, getCurrentTemplateId } =
+			select( editorStore );
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	const handleDevicePreviewChange = ( newDeviceType ) => {
+		setDeviceType( newDeviceType );
+		resetZoomLevel();
+	};
+
+	const isMobile = useViewportMatch( 'medium', '<' );
+	if ( isMobile ) {
+		return null;
+	}
+
+	const popoverProps = {
+		placement: 'bottom-end',
+	};
+	const toggleProps = {
+		className: 'editor-preview-dropdown__toggle',
+		iconPosition: 'right',
+		size: 'compact',
+		showTooltip: ! showIconLabels,
+		disabled,
+		accessibleWhenDisabled: disabled,
+	};
+	const menuProps = {
+		'aria-label': __( 'View options' ),
+	};
+
+	const deviceIcons = {
+		desktop,
+		mobile,
+		tablet,
+	};
+
+	/**
+	 * The choices for the device type.
+	 *
+	 * @type {Array}
+	 */
+	const choices = [
+		{
+			value: 'Desktop',
+			label: __( 'Desktop' ),
+			icon: desktop,
+		},
+		{
+			value: 'Tablet',
+			label: __( 'Tablet' ),
+			icon: tablet,
+		},
+		{
+			value: 'Mobile',
+			label: __( 'Mobile' ),
+			icon: mobile,
+		},
+	];
+
+	return (
+		<DropdownMenu
+			className={ clsx(
+				'editor-preview-dropdown',
+				`editor-preview-dropdown--${ deviceType.toLowerCase() }`
+			) }
+			popoverProps={ popoverProps }
+			toggleProps={ toggleProps }
+			menuProps={ menuProps }
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
+			label={ __( 'View' ) }
+			disableOpenOnArrowDown={ disabled }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItemsChoice
+							choices={ choices }
+							value={ deviceType }
+							onSelect={ handleDevicePreviewChange }
+						/>
+					</MenuGroup>
+					{ isTemplate && (
+						<MenuGroup>
+							<MenuItem
+								href={ homeUrl }
+								target="_blank"
+								icon={ external }
+								onClick={ onClose }
+							>
+								{ __( 'View site' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+						</MenuGroup>
+					) }
+					{ ! isTemplate && !! templateId && (
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
+								onClick={ () => {
+									setRenderingMode(
+										isTemplateHidden
+											? 'template-locked'
+											: 'post-only'
+									);
+								} }
+							>
+								{ __( 'Show template' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
+					{ isViewable && (
+						<MenuGroup>
+							<PostPreviewButton
+								className="editor-preview-dropdown__button-external"
+								role="menuitem"
+								forceIsAutosaveable={ forceIsAutosaveable }
+								aria-label={ __( 'Preview in new tab' ) }
+								textContent={
+									<>
+										{ __( 'Preview in new tab' ) }
+										<Icon icon={ external } />
+									</>
+								}
+								onPreview={ onClose }
+							/>
+						</MenuGroup>
+					) }
+					<ActionItem.Slot
+						name="core/plugin-preview-menu"
+						as={ MenuGroup }
+						fillProps={ { onClick: onClose } }
+					/>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss
new file mode 100644
index 00000000000000..c117a4239e9dfb
--- /dev/null
+++ b/packages/editor/src/components/preview-dropdown/style.scss
@@ -0,0 +1,10 @@
+.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
+	padding-right: 4px;
+	padding-left: 6px;
+}
+
+.editor-preview-dropdown__button-external {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+}
diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
new file mode 100644
index 00000000000000..ae4fd1075fc261
--- /dev/null
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import usePostContentBlocks from './use-post-content-blocks';
+
+/**
+ * Component that when rendered, makes it so that the site editor allows only
+ * page content to be edited.
+ */
+export default function DisableNonPageContentBlocks() {
+	const contentOnlyIds = usePostContentBlocks();
+	const templateParts = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( 'core/template-part' );
+	}, [] );
+	const disabledIds = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			return templateParts.flatMap( ( clientId ) =>
+				getBlockOrder( clientId )
+			);
+		},
+		[ templateParts ]
+	);
+
+	const registry = useRegistry();
+
+	useEffect( () => {
+		const { setBlockEditingMode, unsetBlockEditingMode } =
+			registry.dispatch( blockEditorStore );
+
+		registry.batch( () => {
+			setBlockEditingMode( '', 'disabled' );
+			for ( const clientId of contentOnlyIds ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
+			for ( const clientId of templateParts ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
+			for ( const clientId of disabledIds ) {
+				setBlockEditingMode( clientId, 'disabled' );
+			}
+		} );
+
+		return () => {
+			registry.batch( () => {
+				unsetBlockEditingMode( '' );
+				for ( const clientId of contentOnlyIds ) {
+					unsetBlockEditingMode( clientId );
+				}
+				for ( const clientId of templateParts ) {
+					unsetBlockEditingMode( clientId );
+				}
+				for ( const clientId of disabledIds ) {
+					unsetBlockEditingMode( clientId );
+				}
+			} );
+		};
+	}, [ templateParts, contentOnlyIds, disabledIds, registry ] );
+
+	return null;
+}
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index ef8d03c824b7b1..68d7bd1d3f4f5b 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -4,13 +4,20 @@
 import { useEffect, useLayoutEffect, useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { EntityProvider, useEntityBlockEditor } from '@wordpress/core-data';
+import {
+	EntityProvider,
+	useEntityBlockEditor,
+	store as coreStore,
+} from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
 	BlockContextProvider,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,107 +25,417 @@ import { store as noticesStore } from '@wordpress/notices';
 import withRegistryProvider from './with-registry-provider';
 import { store as editorStore } from '../../store';
 import useBlockEditorSettings from './use-block-editor-settings';
+import { unlock } from '../../lock-unlock';
+import DisableNonPageContentBlocks from './disable-non-page-content-blocks';
+import NavigationBlockEditingMode from './navigation-block-editing-mode';
+import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
+import useCommands from '../commands';
+import BlockRemovalWarnings from '../block-removal-warnings';
+import StartPageOptions from '../start-page-options';
+import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
+import StartTemplateOptions from '../start-template-options';
+import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
+import PatternRenameModal from '../pattern-rename-modal';
+import PatternDuplicateModal from '../pattern-duplicate-modal';
+import TemplatePartMenuItems from '../template-part-menu-items';
 
-function EditorProvider( {
-	__unstableTemplate,
-	post,
-	settings,
-	recovery,
-	initialEdits,
-	children,
-} ) {
-	const defaultBlockContext = useMemo( () => {
-		if ( post.type === 'wp_template' ) {
-			return {};
-		}
-		return { postId: post.id, postType: post.type };
-	}, [ post.id, post.type ] );
-	const { selection, isReady } = useSelect( ( select ) => {
-		const { getEditorSelection, __unstableIsEditorReady } =
-			select( editorStore );
-		return {
-			isReady: __unstableIsEditorReady(),
-			selection: getEditorSelection(),
-		};
-	}, [] );
-	const { id, type } = __unstableTemplate ?? post;
-	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
+const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
+
+const noop = () => {};
+
+/**
+ * These are global entities that are only there to split blocks into logical units
+ * They don't provide a "context" for the current post/page being rendered.
+ * So we should not use their ids as post context. This is important to allow post blocks
+ * (post content, post title) to be used within them without issues.
+ */
+const NON_CONTEXTUAL_POST_TYPES = [
+	'wp_block',
+	'wp_navigation',
+	'wp_template_part',
+];
+
+/**
+ * Depending on the post, template and template mode,
+ * returns the appropriate blocks and change handlers for the block editor provider.
+ *
+ * @param {Array}   post     Block list.
+ * @param {boolean} template Whether the page content has focus (and the surrounding template is inert). If `true` return page content blocks. Default `false`.
+ * @param {string}  mode     Rendering mode.
+ *
+ * @example
+ * ```jsx
+ * const [ blocks, onInput, onChange ] = useBlockEditorProps( post, template, mode );
+ * ```
+ *
+ * @return {Array} Block editor props.
+ */
+function useBlockEditorProps( post, template, mode ) {
+	const rootLevelPost = mode === 'template-locked' ? 'template' : 'post';
+	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
-		type,
-		{ id }
+		post.type,
+		{ id: post.id }
 	);
-	const editorSettings = useBlockEditorSettings(
-		settings,
-		!! __unstableTemplate
-	);
-	const {
-		updatePostLock,
-		setupEditor,
-		updateEditorSettings,
-		__experimentalTearDownEditor,
-	} = useDispatch( editorStore );
-	const { createWarningNotice } = useDispatch( noticesStore );
-
-	// Initialize and tear down the editor.
-	// Ideally this should be synced on each change and not just something you do once.
-	useLayoutEffect( () => {
-		// Assume that we don't need to initialize in the case of an error recovery.
-		if ( recovery ) {
-			return;
+	const [ templateBlocks, onInputTemplate, onChangeTemplate ] =
+		useEntityBlockEditor( 'postType', template?.type, {
+			id: template?.id,
+		} );
+	const maybeNavigationBlocks = useMemo( () => {
+		if ( post.type === 'wp_navigation' ) {
+			return [
+				createBlock( 'core/navigation', {
+					ref: post.id,
+					// As the parent editor is locked with `templateLock`, the template locking
+					// must be explicitly "unset" on the block itself to allow the user to modify
+					// the block's content.
+					templateLock: false,
+				} ),
+			];
 		}
+	}, [ post.type, post.id ] );
 
-		updatePostLock( settings.postLock );
-		setupEditor( post, initialEdits, settings.template );
-		if ( settings.autosave ) {
-			createWarningNotice(
-				__(
-					'There is an autosave of this post that is more recent than the version below.'
-				),
-				{
-					id: 'autosave-exists',
-					actions: [
-						{
-							label: __( 'View the autosave' ),
-							url: settings.autosave.editLink,
-						},
-					],
-				}
-			);
+	// It is important that we don't create a new instance of blocks on every change
+	// We should only create a new instance if the blocks them selves change, not a dependency of them.
+	const blocks = useMemo( () => {
+		if ( maybeNavigationBlocks ) {
+			return maybeNavigationBlocks;
 		}
 
-		return () => {
-			__experimentalTearDownEditor();
-		};
-	}, [] );
+		if ( rootLevelPost === 'template' ) {
+			return templateBlocks;
+		}
 
-	// Synchronize the editor settings as they change.
-	useEffect( () => {
-		updateEditorSettings( settings );
-	}, [ settings ] );
+		return postBlocks;
+	}, [ maybeNavigationBlocks, rootLevelPost, templateBlocks, postBlocks ] );
 
-	if ( ! isReady ) {
-		return null;
+	// Handle fallback to postBlocks outside of the above useMemo, to ensure
+	// that constructed block templates that call `createBlock` are not generated
+	// too frequently. This ensures that clientIds are stable.
+	const disableRootLevelChanges =
+		( !! template && mode === 'template-locked' ) ||
+		post.type === 'wp_navigation';
+	if ( disableRootLevelChanges ) {
+		return [ blocks, noop, noop ];
 	}
 
-	return (
-		<EntityProvider kind="root" type="site">
-			<EntityProvider kind="postType" type={ post.type } id={ post.id }>
-				<BlockContextProvider value={ defaultBlockContext }>
-					<BlockEditorProvider
-						value={ blocks }
-						onChange={ onChange }
-						onInput={ onInput }
-						selection={ selection }
-						settings={ editorSettings }
-						useSubRegistry={ false }
-					>
-						{ children }
-						<ReusableBlocksMenuItems />
-					</BlockEditorProvider>
-				</BlockContextProvider>
+	return [
+		blocks,
+		rootLevelPost === 'post' ? onInput : onInputTemplate,
+		rootLevelPost === 'post' ? onChange : onChangeTemplate,
+	];
+}
+
+/**
+ * This component provides the editor context and manages the state of the block editor.
+ *
+ * @param {Object}  props                                The component props.
+ * @param {Object}  props.post                           The post object.
+ * @param {Object}  props.settings                       The editor settings.
+ * @param {boolean} props.recovery                       Indicates if the editor is in recovery mode.
+ * @param {Array}   props.initialEdits                   The initial edits for the editor.
+ * @param {Object}  props.children                       The child components.
+ * @param {Object}  [props.BlockEditorProviderComponent] The block editor provider component to use. Defaults to ExperimentalBlockEditorProvider.
+ * @param {Object}  [props.__unstableTemplate]           The template object.
+ *
+ * @example
+ * ```jsx
+ * <ExperimentalEditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   recovery={ recovery }
+ *   initialEdits={ initialEdits }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </ExperimentalEditorProvider>
+ *
+ * @return {Object} The rendered ExperimentalEditorProvider component.
+ */
+export const ExperimentalEditorProvider = withRegistryProvider(
+	( {
+		post,
+		settings,
+		recovery,
+		initialEdits,
+		children,
+		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
+		__unstableTemplate: template,
+	} ) => {
+		const {
+			editorSettings,
+			selection,
+			isReady,
+			mode,
+			defaultMode,
+			postTypeEntities,
+			hasLoadedPostObject,
+		} = useSelect(
+			( select ) => {
+				const {
+					getEditorSettings,
+					getEditorSelection,
+					getRenderingMode,
+					__unstableIsEditorReady,
+				} = select( editorStore );
+				const { getEntitiesConfig } = select( coreStore );
+
+				const postTypeObject = select( coreStore ).getPostType(
+					post.type
+				);
+
+				const _hasLoadedPostObject = select(
+					coreStore
+				).hasFinishedResolution( 'getPostType', [ post.type ] );
+
+				return {
+					hasLoadedPostObject: _hasLoadedPostObject,
+					editorSettings: getEditorSettings(),
+					isReady: __unstableIsEditorReady(),
+					mode: getRenderingMode(),
+					defaultMode:
+						postTypeObject?.default_rendering_mode ?? 'post-only',
+					selection: getEditorSelection(),
+					postTypeEntities:
+						post.type === 'wp_template'
+							? getEntitiesConfig( 'postType' )
+							: null,
+				};
+			},
+			[ post.type ]
+		);
+
+		const isZoomOut = useSelect( ( select ) => {
+			const { isZoomOut: _isZoomOut } = unlock(
+				select( blockEditorStore )
+			);
+
+			return _isZoomOut();
+		} );
+
+		const shouldRenderTemplate = !! template && mode !== 'post-only';
+		const rootLevelPost = shouldRenderTemplate ? template : post;
+		const defaultBlockContext = useMemo( () => {
+			const postContext = {};
+			// If it is a template, try to inherit the post type from the name.
+			if ( post.type === 'wp_template' ) {
+				if ( post.slug === 'page' ) {
+					postContext.postType = 'page';
+				} else if ( post.slug === 'single' ) {
+					postContext.postType = 'post';
+				} else if ( post.slug.split( '-' )[ 0 ] === 'single' ) {
+					// If the slug is single-{postType}, infer the post type from the name.
+					const postTypeNames =
+						postTypeEntities?.map( ( entity ) => entity.name ) ||
+						[];
+					const match = post.slug.match(
+						`^single-(${ postTypeNames.join( '|' ) })(?:-.+)?$`
+					);
+					if ( match ) {
+						postContext.postType = match[ 1 ];
+					}
+				}
+			} else if (
+				! NON_CONTEXTUAL_POST_TYPES.includes( rootLevelPost.type ) ||
+				shouldRenderTemplate
+			) {
+				postContext.postId = post.id;
+				postContext.postType = post.type;
+			}
+
+			return {
+				...postContext,
+				templateSlug:
+					rootLevelPost.type === 'wp_template'
+						? rootLevelPost.slug
+						: undefined,
+			};
+		}, [
+			shouldRenderTemplate,
+			post.id,
+			post.type,
+			post.slug,
+			rootLevelPost.type,
+			rootLevelPost.slug,
+			postTypeEntities,
+		] );
+		const { id, type } = rootLevelPost;
+		const blockEditorSettings = useBlockEditorSettings(
+			editorSettings,
+			type,
+			id,
+			mode
+		);
+		const [ blocks, onInput, onChange ] = useBlockEditorProps(
+			post,
+			template,
+			mode
+		);
+
+		const {
+			updatePostLock,
+			setupEditor,
+			updateEditorSettings,
+			setCurrentTemplateId,
+			setEditedPost,
+			setRenderingMode,
+		} = unlock( useDispatch( editorStore ) );
+		const { createWarningNotice } = useDispatch( noticesStore );
+
+		// Ideally this should be synced on each change and not just something you do once.
+		useLayoutEffect( () => {
+			// Assume that we don't need to initialize in the case of an error recovery.
+			if ( recovery ) {
+				return;
+			}
+
+			updatePostLock( settings.postLock );
+			setupEditor( post, initialEdits, settings.template );
+			if ( settings.autosave ) {
+				createWarningNotice(
+					__(
+						'There is an autosave of this post that is more recent than the version below.'
+					),
+					{
+						id: 'autosave-exists',
+						actions: [
+							{
+								label: __( 'View the autosave' ),
+								url: settings.autosave.editLink,
+							},
+						],
+					}
+				);
+			}
+		}, [
+			createWarningNotice,
+			initialEdits,
+			settings,
+			post,
+			recovery,
+			setupEditor,
+			updatePostLock,
+		] );
+
+		// Synchronizes the active post with the state
+		useEffect( () => {
+			setEditedPost( post.type, post.id );
+		}, [ post.type, post.id, setEditedPost ] );
+
+		// Synchronize the editor settings as they change.
+		useEffect( () => {
+			updateEditorSettings( settings );
+		}, [ settings, updateEditorSettings ] );
+
+		// Synchronizes the active template with the state.
+		useEffect( () => {
+			setCurrentTemplateId( template?.id );
+		}, [ template?.id, setCurrentTemplateId ] );
+
+		// Sets the right rendering mode when loading the editor.
+		useEffect( () => {
+			setRenderingMode( defaultMode );
+		}, [ defaultMode, setRenderingMode ] );
+
+		useHideBlocksFromInserter( post.type, mode );
+
+		// Register the editor commands.
+		useCommands();
+
+		if ( ! isReady || ! mode || ! hasLoadedPostObject ) {
+			return null;
+		}
+
+		return (
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ post.type }
+					id={ post.id }
+				>
+					<BlockContextProvider value={ defaultBlockContext }>
+						<BlockEditorProviderComponent
+							value={ blocks }
+							onChange={ onChange }
+							onInput={ onInput }
+							selection={ selection }
+							settings={ blockEditorSettings }
+							useSubRegistry={ false }
+						>
+							{ children }
+							{ ! settings.isPreviewMode && (
+								<>
+									{ ! isZoomOut && (
+										<>
+											<PatternsMenuItems />
+											<TemplatePartMenuItems />
+											<ContentOnlySettingsMenu />
+										</>
+									) }
+									{ mode === 'template-locked' && (
+										<DisableNonPageContentBlocks />
+									) }
+									{ type === 'wp_navigation' && (
+										<NavigationBlockEditingMode />
+									) }
+									<EditorKeyboardShortcuts />
+									<KeyboardShortcutHelpModal />
+									<BlockRemovalWarnings />
+									<StartPageOptions />
+									<StartTemplateOptions />
+									<PatternRenameModal />
+									<PatternDuplicateModal />
+								</>
+							) }
+						</BlockEditorProviderComponent>
+					</BlockContextProvider>
+				</EntityProvider>
 			</EntityProvider>
-		</EntityProvider>
+		);
+	}
+);
+
+/**
+ * This component establishes a new post editing context, and serves as the entry point for a new post editor (or post with template editor).
+ *
+ * It supports a large number of post types, including post, page, templates,
+ * custom post types, patterns, template parts.
+ *
+ * All modification and changes are performed to the `@wordpress/core-data` store.
+ *
+ * @param {Object}  props                      The component props.
+ * @param {Object}  [props.post]               The post object to edit. This is required.
+ * @param {Object}  [props.__unstableTemplate] The template object wrapper the edited post.
+ *                                             This is optional and can only be used when the post type supports templates (like posts and pages).
+ * @param {Object}  [props.settings]           The settings object to use for the editor.
+ *                                             This is optional and can be used to override the default settings.
+ * @param {Element} [props.children]           Children elements for which the BlockEditorProvider context should apply.
+ *                                             This is optional.
+ *
+ * @example
+ * ```jsx
+ * <EditorProvider
+ *   post={ post }
+ *   settings={ settings }
+ *   __unstableTemplate={ template }
+ * >
+ *   { children }
+ * </EditorProvider>
+ * ```
+ *
+ * @return {React.ReactNode} The rendered EditorProvider component.
+ */
+export function EditorProvider( props ) {
+	return (
+		<ExperimentalEditorProvider
+			{ ...props }
+			BlockEditorProviderComponent={ BlockEditorProvider }
+		>
+			{ props.children }
+		</ExperimentalEditorProvider>
 	);
 }
 
-export default withRegistryProvider( EditorProvider );
+export default EditorProvider;
diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
index 6dc7108849b56b..bac824ab86ad24 100644
--- a/packages/editor/src/components/provider/index.native.js
+++ b/packages/editor/src/components/provider/index.native.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { BackHandler } from 'react-native';
 import memize from 'memize';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -20,6 +21,7 @@ import RNReactNativeGutenbergBridge, {
 	subscribeUpdateCapabilities,
 	subscribeShowNotice,
 	subscribeShowEditorHelp,
+	subscribeToContentUpdate,
 } from '@wordpress/react-native-bridge';
 import { Component } from '@wordpress/element';
 import { count as wordCount } from '@wordpress/wordcount';
@@ -27,14 +29,20 @@ import {
 	parse,
 	serialize,
 	getUnregisteredTypeHandlerName,
+	getBlockType,
 	createBlock,
+	pasteHandler,
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components';
+import {
+	store as blockEditorStore,
+	getGlobalStyles,
+	getColorsAndGradients,
+} from '@wordpress/block-editor';
 import { NEW_BLOCK_TYPES } from '@wordpress/block-library';
+import { __ } from '@wordpress/i18n';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -56,12 +64,12 @@ const postTypeEntities = [
 import { EditorHelpTopics, store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editPostStore } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
  */
 import EditorProvider from './index.js';
+import { insertContentWithTitle } from '../post-title';
 
 class NativeEditorProvider extends Component {
 	constructor() {
@@ -76,6 +84,9 @@ class NativeEditorProvider extends Component {
 			this.post
 		);
 
+		this.onHardwareBackPress = this.onHardwareBackPress.bind( this );
+		this.onContentUpdate = this.onContentUpdate.bind( this );
+
 		this.getEditorSettings = memize(
 			( settings, capabilities ) => ( {
 				...settings,
@@ -91,11 +102,17 @@ class NativeEditorProvider extends Component {
 	}
 
 	componentDidMount() {
-		const { capabilities, locale, hostAppNamespace, updateSettings } =
-			this.props;
+		const {
+			capabilities,
+			createErrorNotice,
+			locale,
+			hostAppNamespace,
+			updateEditorSettings,
+			updateBlockEditorSettings,
+		} = this.props;
 
-		updateSettings( {
-			...capabilities,
+		updateEditorSettings( {
+			capabilities,
 			...this.getThemeColors( this.props ),
 			locale,
 			hostAppNamespace,
@@ -130,30 +147,33 @@ class NativeEditorProvider extends Component {
 		this.subscriptionParentMediaAppend = subscribeMediaAppend(
 			( payload ) => {
 				const blockName = 'core/' + payload.mediaType;
-				const newBlock = createBlock( blockName, {
-					id: payload.mediaId,
-					[ payload.mediaType === 'image' ? 'url' : 'src' ]:
-						payload.mediaUrl,
-				} );
-
-				const indexAfterSelected = this.props.selectedBlockIndex + 1;
-				const insertionIndex =
-					indexAfterSelected || this.props.blockCount;
-
-				this.props.insertBlock( newBlock, insertionIndex );
+				const blockType = getBlockType( blockName );
+
+				if ( blockType && blockType?.name ) {
+					const newBlock = createBlock( blockType.name, {
+						id: payload.mediaId,
+						[ payload.mediaType === 'image' ? 'url' : 'src' ]:
+							payload.mediaUrl,
+					} );
+
+					const indexAfterSelected =
+						this.props.selectedBlockIndex + 1;
+					const insertionIndex =
+						indexAfterSelected || this.props.blockCount;
+
+					this.props.insertBlock( newBlock, insertionIndex );
+				} else {
+					createErrorNotice(
+						__( 'File type not supported as a media file.' )
+					);
+				}
 			}
 		);
 
 		this.subscriptionParentUpdateEditorSettings =
-			subscribeUpdateEditorSettings(
-				( { galleryWithImageBlocks, ...editorSettings } ) => {
-					if ( typeof galleryWithImageBlocks === 'boolean' ) {
-						window.wp.galleryBlockV2Enabled =
-							galleryWithImageBlocks;
-					}
-					updateSettings( this.getThemeColors( editorSettings ) );
-				}
-			);
+			subscribeUpdateEditorSettings( ( { ...editorSettings } ) => {
+				updateEditorSettings( this.getThemeColors( editorSettings ) );
+			} );
 
 		this.subscriptionParentUpdateCapabilities = subscribeUpdateCapabilities(
 			( payload ) => {
@@ -171,12 +191,23 @@ class NativeEditorProvider extends Component {
 			this.setState( { isHelpVisible: true } );
 		} );
 
+		this.hardwareBackPressListener = BackHandler.addEventListener(
+			'hardwareBackPress',
+			this.onHardwareBackPress
+		);
+
+		this.subscriptionOnContentUpdate = subscribeToContentUpdate(
+			( data ) => {
+				this.onContentUpdate( data );
+			}
+		);
+
 		// Request current block impressions from native app.
 		requestBlockTypeImpressions( ( storedImpressions ) => {
 			const impressions = { ...NEW_BLOCK_TYPES, ...storedImpressions };
 
 			// Persist impressions to JavaScript store.
-			updateSettings( { impressions } );
+			updateBlockEditorSettings( { impressions } );
 
 			// Persist impressions to native store if they do not include latest
 			// `NEW_BLOCK_TYPES` configuration.
@@ -230,6 +261,14 @@ class NativeEditorProvider extends Component {
 		if ( this.subscriptionParentShowEditorHelp ) {
 			this.subscriptionParentShowEditorHelp.remove();
 		}
+
+		if ( this.hardwareBackPressListener ) {
+			this.hardwareBackPressListener.remove();
+		}
+
+		if ( this.subscriptionOnContentUpdate ) {
+			this.subscriptionOnContentUpdate.remove();
+		}
 	}
 
 	getThemeColors( { rawStyles, rawFeatures } ) {
@@ -260,6 +299,31 @@ class NativeEditorProvider extends Component {
 		}
 	}
 
+	onHardwareBackPress() {
+		const { clearSelectedBlock, selectedBlockIndex } = this.props;
+
+		if ( selectedBlockIndex !== -1 ) {
+			clearSelectedBlock();
+			return true;
+		}
+		return false;
+	}
+
+	onContentUpdate( { content: rawContent } ) {
+		const {
+			editTitle,
+			onClearPostTitleSelection,
+			onInsertBlockAfter: onInsertBlocks,
+			title,
+		} = this.props;
+		const content = pasteHandler( {
+			plainText: rawContent,
+		} );
+
+		insertContentWithTitle( title, content, editTitle, onInsertBlocks );
+		onClearPostTitleSelection();
+	}
+
 	serializeToNativeAction() {
 		const title = this.props.title;
 		let html;
@@ -311,13 +375,11 @@ class NativeEditorProvider extends Component {
 		const { mode, switchMode } = this.props;
 		// Refresh html content first.
 		this.serializeToNativeAction();
-		// Make sure to blur the selected block and dismiss the keyboard.
-		this.props.clearSelectedBlock();
 		switchMode( mode === 'visual' ? 'text' : 'visual' );
 	}
 
 	updateCapabilitiesAction( capabilities ) {
-		this.props.updateSettings( capabilities );
+		this.props.updateEditorSettings( { capabilities } );
 	}
 
 	render() {
@@ -337,30 +399,28 @@ class NativeEditorProvider extends Component {
 					isVisible={ this.state.isHelpVisible }
 					onClose={ () => this.setState( { isHelpVisible: false } ) }
 					close={ () => this.setState( { isHelpVisible: false } ) }
+					showSupport={ capabilities?.supportSection === true }
 				/>
 			</>
 		);
 	}
 }
 
-export default compose( [
+const ComposedNativeProvider = compose( [
 	withSelect( ( select ) => {
 		const {
 			__unstableIsEditorReady: isEditorReady,
 			getEditorBlocks,
 			getEditedPostAttribute,
 			getEditedPostContent,
+			getEditorSettings,
+			getEditorMode,
 		} = select( editorStore );
-		const { getEditorMode } = select( editPostStore );
 
-		const {
-			getBlockIndex,
-			getSelectedBlockClientId,
-			getGlobalBlockCount,
-			getSettings: getBlockEditorSettings,
-		} = select( blockEditorStore );
+		const { getBlockIndex, getSelectedBlockClientId, getGlobalBlockCount } =
+			select( blockEditorStore );
 
-		const settings = getBlockEditorSettings();
+		const settings = getEditorSettings();
 		const defaultEditorColors = settings?.colors ?? [];
 		const defaultEditorGradients = settings?.gradients ?? [];
 
@@ -379,23 +439,33 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { editPost, resetEditorBlocks } = dispatch( editorStore );
 		const {
-			updateSettings,
+			editPost,
+			resetEditorBlocks,
+			updateEditorSettings,
+			switchEditorMode,
+			togglePostTitleSelection,
+		} = dispatch( editorStore );
+		const {
 			clearSelectedBlock,
+			updateSettings,
 			insertBlock,
+			insertBlocks,
 			replaceBlock,
 		} = dispatch( blockEditorStore );
-		const { switchEditorMode } = dispatch( editPostStore );
 		const { addEntities, receiveEntityRecords } = dispatch( coreStore );
-		const { createSuccessNotice } = dispatch( noticesStore );
+		const { createSuccessNotice, createErrorNotice } =
+			dispatch( noticesStore );
 
 		return {
-			updateSettings,
+			updateBlockEditorSettings: updateSettings,
+			updateEditorSettings,
 			addEntities,
-			clearSelectedBlock,
 			insertBlock,
+			insertBlocks,
 			createSuccessNotice,
+			createErrorNotice,
+			clearSelectedBlock,
 			editTitle( title ) {
 				editPost( { title } );
 			},
@@ -408,7 +478,16 @@ export default compose( [
 			switchMode( mode ) {
 				switchEditorMode( mode );
 			},
+			onInsertBlockAfter( blocks ) {
+				insertBlocks( blocks, undefined, undefined, false );
+			},
+			onClearPostTitleSelection() {
+				togglePostTitleSelection( false );
+			},
 			replaceBlock,
 		};
 	} ),
 ] )( NativeEditorProvider );
+
+export default ComposedNativeProvider;
+export { ComposedNativeProvider as ExperimentalEditorProvider };
diff --git a/packages/editor/src/components/provider/navigation-block-editing-mode.js b/packages/editor/src/components/provider/navigation-block-editing-mode.js
new file mode 100644
index 00000000000000..f45de7c149d826
--- /dev/null
+++ b/packages/editor/src/components/provider/navigation-block-editing-mode.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * For the Navigation block editor, we need to force the block editor to contentOnly for that block.
+ *
+ * Set block editing mode to contentOnly when entering Navigation focus mode.
+ * this ensures that non-content controls on the block will be hidden and thus
+ * the user can focus on editing the Navigation Menu content only.
+ */
+
+export default function NavigationBlockEditingMode() {
+	// In the navigation block editor,
+	// the navigation block is the only root block.
+	const blockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getBlockOrder()?.[ 0 ],
+		[]
+	);
+	const { setBlockEditingMode, unsetBlockEditingMode } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( ! blockClientId ) {
+			return;
+		}
+
+		setBlockEditingMode( blockClientId, 'contentOnly' );
+
+		return () => {
+			unsetBlockEditingMode( blockClientId );
+		};
+	}, [ blockClientId, unsetBlockEditingMode, setBlockEditingMode ] );
+}
diff --git a/packages/editor/src/components/provider/use-auto-switch-editor-sidebars.js b/packages/editor/src/components/provider/use-auto-switch-editor-sidebars.js
new file mode 100644
index 00000000000000..5c3d2717ede1cb
--- /dev/null
+++ b/packages/editor/src/components/provider/use-auto-switch-editor-sidebars.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * This listener hook monitors for block selection and triggers the appropriate
+ * sidebar state.
+ */
+function useAutoSwitchEditorSidebars() {
+	const { hasBlockSelection } = useSelect( ( select ) => {
+		return {
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+
+	useEffect( () => {
+		const activeGeneralSidebar = getActiveComplementaryArea( 'core' );
+		const isEditorSidebarOpened = [
+			'edit-post/document',
+			'edit-post/block',
+		].includes( activeGeneralSidebar );
+		const isDistractionFree = getPreference( 'core', 'distractionFree' );
+		if ( ! isEditorSidebarOpened || isDistractionFree ) {
+			return;
+		}
+		if ( hasBlockSelection ) {
+			enableComplementaryArea( 'core', 'edit-post/block' );
+		} else {
+			enableComplementaryArea( 'core', 'edit-post/document' );
+		}
+	}, [
+		hasBlockSelection,
+		getActiveComplementaryArea,
+		enableComplementaryArea,
+		getPreference,
+	] );
+}
+
+export default useAutoSwitchEditorSidebars;
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
index 0b69dcc66eb81c..f5c45f431e2c85 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -1,62 +1,199 @@
 /**
  * WordPress dependencies
  */
-import { Platform, useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
+	privateApis as coreDataPrivateApis,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useViewportMatch } from '@wordpress/compose';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	privateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useGlobalStylesContext } from '../global-styles-provider';
+
+const EMPTY_OBJECT = {};
+
+function __experimentalReusableBlocksSelect( select ) {
+	const { RECEIVE_INTERMEDIATE_RESULTS } = unlock( coreDataPrivateApis );
+	const { getEntityRecords } = select( coreStore );
+	return getEntityRecords( 'postType', 'wp_block', {
+		per_page: -1,
+		[ RECEIVE_INTERMEDIATE_RESULTS ]: true,
+	} );
+}
+
+const BLOCK_EDITOR_SETTINGS = [
+	'__experimentalBlockDirectory',
+	'__experimentalDiscussionSettings',
+	'__experimentalFeatures',
+	'__experimentalGlobalStylesBaseStyles',
+	'alignWide',
+	'blockInspectorTabs',
+	'allowedMimeTypes',
+	'bodyPlaceholder',
+	'canLockBlocks',
+	'canUpdateBlockBindings',
+	'capabilities',
+	'clearBlockSelection',
+	'codeEditingEnabled',
+	'colors',
+	'disableCustomColors',
+	'disableCustomFontSizes',
+	'disableCustomSpacingSizes',
+	'disableCustomGradients',
+	'disableLayoutStyles',
+	'enableCustomLineHeight',
+	'enableCustomSpacing',
+	'enableCustomUnits',
+	'enableOpenverseMediaCategory',
+	'fontSizes',
+	'gradients',
+	'generateAnchors',
+	'onNavigateToEntityRecord',
+	'imageDefaultSize',
+	'imageDimensions',
+	'imageEditing',
+	'imageSizes',
+	'isPreviewMode',
+	'isRTL',
+	'locale',
+	'maxWidth',
+	'postContentAttributes',
+	'postsPerPage',
+	'readOnly',
+	'styles',
+	'titlePlaceholder',
+	'supportsLayout',
+	'widgetTypesToHideFromLegacyWidgetBlock',
+	'__unstableHasCustomAppender',
+	'__unstableResolvedAssets',
+	'__unstableIsBlockBasedTheme',
+];
+
+const {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+	sectionRootClientIdKey,
+} = unlock( privateApis );
 
 /**
  * React hook used to compute the block editor settings to use for the post editor.
  *
- * @param {Object}  settings    EditorProvider settings prop.
- * @param {boolean} hasTemplate Whether template mode is enabled.
+ * @param {Object} settings      EditorProvider settings prop.
+ * @param {string} postType      Editor root level post type.
+ * @param {string} postId        Editor root level post ID.
+ * @param {string} renderingMode Editor rendering mode.
  *
  * @return {Object} Block Editor Settings.
  */
-function useBlockEditorSettings( settings, hasTemplate ) {
+function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const {
-		reusableBlocks,
+		allowRightClickOverrides,
+		blockTypes,
+		focusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
 		hasUploadPermissions,
+		hiddenBlockTypes,
 		canUseUnfilteredHTML,
 		userCanCreatePages,
 		pageOnFront,
-		postType,
-	} = useSelect( ( select ) => {
-		const { canUserUseUnfilteredHTML, getCurrentPostType } =
-			select( editorStore );
-		const isWeb = Platform.OS === 'web';
-		const { canUser, getEntityRecord } = select( coreStore );
-
-		const siteSettings = canUser( 'read', 'settings' )
-			? getEntityRecord( 'root', 'site' )
-			: undefined;
-
-		return {
-			canUseUnfilteredHTML: canUserUseUnfilteredHTML(),
-			reusableBlocks: isWeb
-				? select( coreStore ).getEntityRecords(
-						'postType',
-						'wp_block',
-						{ per_page: -1 }
-				  )
-				: [], // Reusable blocks are fetched in the native version of this hook.
-			hasUploadPermissions: canUser( 'create', 'media' ) ?? true,
-			userCanCreatePages: canUser( 'create', 'pages' ),
-			pageOnFront: siteSettings?.page_on_front,
-			postType: getCurrentPostType(),
-		};
-	}, [] );
+		pageForPosts,
+		userPatternCategories,
+		restBlockPatternCategories,
+		sectionRootClientId,
+	} = useSelect(
+		( select ) => {
+			const {
+				canUser,
+				getRawEntityRecord,
+				getEntityRecord,
+				getUserPatternCategories,
+				getBlockPatternCategories,
+			} = select( coreStore );
+			const { get } = select( preferencesStore );
+			const { getBlockTypes } = select( blocksStore );
+			const { getBlocksByName, getBlockAttributes } =
+				select( blockEditorStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
+
+			function getSectionRootBlock() {
+				if ( renderingMode === 'template-locked' ) {
+					return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
+				}
+
+				return (
+					getBlocksByName( 'core/group' ).find(
+						( clientId ) =>
+							getBlockAttributes( clientId )?.tagName === 'main'
+					) ?? ''
+				);
+			}
+
+			return {
+				allowRightClickOverrides: get(
+					'core',
+					'allowRightClickOverrides'
+				),
+				blockTypes: getBlockTypes(),
+				canUseUnfilteredHTML: getRawEntityRecord(
+					'postType',
+					postType,
+					postId
+				)?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ),
+				focusMode: get( 'core', 'focusMode' ),
+				hasFixedToolbar:
+					get( 'core', 'fixedToolbar' ) || ! isLargeViewport,
+				hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
+				isDistractionFree: get( 'core', 'distractionFree' ),
+				keepCaretInsideBlock: get( 'core', 'keepCaretInsideBlock' ),
+				hasUploadPermissions:
+					canUser( 'create', {
+						kind: 'root',
+						name: 'media',
+					} ) ?? true,
+				userCanCreatePages: canUser( 'create', {
+					kind: 'postType',
+					name: 'page',
+				} ),
+				pageOnFront: siteSettings?.page_on_front,
+				pageForPosts: siteSettings?.page_for_posts,
+				userPatternCategories: getUserPatternCategories(),
+				restBlockPatternCategories: getBlockPatternCategories(),
+				sectionRootClientId: getSectionRootBlock(),
+			};
+		},
+		[ postType, postId, isLargeViewport, renderingMode ]
+	);
+
+	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
+	const globalStylesData = mergedGlobalStyles.styles ?? EMPTY_OBJECT;
+	const globalStylesLinksData = mergedGlobalStyles._links ?? EMPTY_OBJECT;
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -65,33 +202,18 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		settings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		settings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
-
 	const blockPatterns = useMemo(
 		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
+			[ ...( settingsBlockPatterns || [] ) ].filter(
+				( { postTypes } ) => {
 					return (
 						! postTypes ||
 						( Array.isArray( postTypes ) &&
 							postTypes.includes( postType ) )
 					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, postType ]
+				}
+			),
+		[ settingsBlockPatterns, postType ]
 	);
 
 	const blockPatternCategories = useMemo(
@@ -106,7 +228,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		[ settingsBlockPatternCategories, restBlockPatternCategories ]
 	);
 
-	const { undo } = useDispatch( editorStore );
+	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
 
@@ -117,93 +239,128 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 	 * @param {Object} options parameters for the post being created. These mirror those used on 3rd param of saveEntityRecord.
 	 * @return {Object} the post type object that was created.
 	 */
-	const createPageEntity = ( options ) => {
-		if ( ! userCanCreatePages ) {
-			return Promise.reject( {
-				message: __( 'You do not have permission to create Pages.' ),
-			} );
+	const createPageEntity = useCallback(
+		( options ) => {
+			if ( ! userCanCreatePages ) {
+				return Promise.reject( {
+					message: __(
+						'You do not have permission to create Pages.'
+					),
+				} );
+			}
+			return saveEntityRecord( 'postType', 'page', options );
+		},
+		[ saveEntityRecord, userCanCreatePages ]
+	);
+
+	const allowedBlockTypes = useMemo( () => {
+		// Omit hidden block types if exists and non-empty.
+		if ( hiddenBlockTypes && hiddenBlockTypes.length > 0 ) {
+			// Defer to passed setting for `allowedBlockTypes` if provided as
+			// anything other than `true` (where `true` is equivalent to allow
+			// all block types).
+			const defaultAllowedBlockTypes =
+				true === settings.allowedBlockTypes
+					? blockTypes.map( ( { name } ) => name )
+					: settings.allowedBlockTypes || [];
+
+			return defaultAllowedBlockTypes.filter(
+				( type ) => ! hiddenBlockTypes.includes( type )
+			);
 		}
-		return saveEntityRecord( 'postType', 'page', options );
-	};
 
-	return useMemo(
-		() => ( {
+		return settings.allowedBlockTypes;
+	}, [ settings.allowedBlockTypes, hiddenBlockTypes, blockTypes ] );
+
+	const forceDisableFocusMode = settings.focusMode === false;
+
+	return useMemo( () => {
+		const blockEditorSettings = {
 			...Object.fromEntries(
 				Object.entries( settings ).filter( ( [ key ] ) =>
-					[
-						'__experimentalBlockDirectory',
-						'__experimentalDiscussionSettings',
-						'__experimentalFeatures',
-						'__experimentalPreferredStyleVariations',
-						'__experimentalSetIsInserterOpened',
-						'__unstableGalleryWithImageBlocks',
-						'alignWide',
-						'allowedBlockTypes',
-						'bodyPlaceholder',
-						'canLockBlocks',
-						'codeEditingEnabled',
-						'colors',
-						'disableCustomColors',
-						'disableCustomFontSizes',
-						'disableCustomSpacingSizes',
-						'disableCustomGradients',
-						'disableLayoutStyles',
-						'enableCustomLineHeight',
-						'enableCustomSpacing',
-						'enableCustomUnits',
-						'focusMode',
-						'fontSizes',
-						'gradients',
-						'generateAnchors',
-						'hasFixedToolbar',
-						'isDistractionFree',
-						'hasInlineToolbar',
-						'imageDefaultSize',
-						'imageDimensions',
-						'imageEditing',
-						'imageSizes',
-						'isRTL',
-						'keepCaretInsideBlock',
-						'maxWidth',
-						'onUpdateDefaultBlockStyles',
-						'styles',
-						'template',
-						'templateLock',
-						'titlePlaceholder',
-						'supportsLayout',
-						'widgetTypesToHideFromLegacyWidgetBlock',
-						'__unstableResolvedAssets',
-					].includes( key )
+					BLOCK_EDITOR_SETTINGS.includes( key )
 				)
 			),
+			[ globalStylesDataKey ]: globalStylesData,
+			[ globalStylesLinksDataKey ]: globalStylesLinksData,
+			allowedBlockTypes,
+			allowRightClickOverrides,
+			focusMode: focusMode && ! forceDisableFocusMode,
+			hasFixedToolbar,
+			isDistractionFree,
+			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
-			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalBlockPatterns: blockPatterns,
+			[ selectBlockPatternsKey ]: ( select ) => {
+				const { hasFinishedResolution, getBlockPatternsForPostType } =
+					unlock( select( coreStore ) );
+				const patterns = getBlockPatternsForPostType( postType );
+				return hasFinishedResolution( 'getBlockPatterns' )
+					? patterns
+					: undefined;
+			},
+			[ reusableBlocksSelectKey ]: __experimentalReusableBlocksSelect,
 			__experimentalBlockPatternCategories: blockPatternCategories,
+			__experimentalUserPatternCategories: userPatternCategories,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
 				fetchLinkSuggestions( search, searchOptions, settings ),
+			inserterMediaCategories,
 			__experimentalFetchRichUrlData: fetchUrlData,
+			// Todo: This only checks the top level post, not the post within a template or any other entity that can be edited.
+			// This might be better as a generic "canUser" selector.
 			__experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML,
+			//Todo: this is only needed for native and should probably be removed.
 			__experimentalUndo: undo,
-			outlineMode: hasTemplate,
+			// Check whether we want all site editor frames to have outlines
+			// including the navigation / pattern / parts editors.
+			outlineMode: ! isDistractionFree && postType === 'wp_template',
+			// Check these two properties: they were not present in the site editor.
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
 			pageOnFront,
-			__experimentalPreferPatternsOnRoot: hasTemplate,
-		} ),
-		[
-			settings,
-			hasUploadPermissions,
-			reusableBlocks,
-			blockPatterns,
-			blockPatternCategories,
-			canUseUnfilteredHTML,
-			undo,
-			hasTemplate,
-			userCanCreatePages,
-			pageOnFront,
-		]
-	);
+			pageForPosts,
+			__experimentalPreferPatternsOnRoot: postType === 'wp_template',
+			templateLock:
+				postType === 'wp_navigation' ? 'insert' : settings.templateLock,
+			template:
+				postType === 'wp_navigation'
+					? [ [ 'core/navigation', {}, [] ] ]
+					: settings.template,
+			__experimentalSetIsInserterOpened: setIsInserterOpened,
+			[ sectionRootClientIdKey ]: sectionRootClientId,
+			editorTool:
+				renderingMode === 'post-only' && postType !== 'wp_template'
+					? 'edit'
+					: undefined,
+		};
+
+		return blockEditorSettings;
+	}, [
+		allowedBlockTypes,
+		allowRightClickOverrides,
+		focusMode,
+		forceDisableFocusMode,
+		hasFixedToolbar,
+		isDistractionFree,
+		keepCaretInsideBlock,
+		settings,
+		hasUploadPermissions,
+		userPatternCategories,
+		blockPatterns,
+		blockPatternCategories,
+		canUseUnfilteredHTML,
+		undo,
+		createPageEntity,
+		userCanCreatePages,
+		pageOnFront,
+		pageForPosts,
+		postType,
+		setIsInserterOpened,
+		sectionRootClientId,
+		globalStylesData,
+		globalStylesLinksData,
+		renderingMode,
+	] );
 }
 
 export default useBlockEditorSettings;
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.native.js b/packages/editor/src/components/provider/use-block-editor-settings.native.js
index 53d703ee762faa..ece088a09921de 100644
--- a/packages/editor/src/components/provider/use-block-editor-settings.native.js
+++ b/packages/editor/src/components/provider/use-block-editor-settings.native.js
@@ -11,11 +11,12 @@ import { store as coreStore } from '@wordpress/core-data';
 import useBlockEditorSettings from './use-block-editor-settings.js';
 import { store as editorStore } from '../../store';
 
-function useNativeBlockEditorSettings( settings, hasTemplate ) {
-	const capabilities = settings.capabilities ?? {};
-	const editorSettings = useBlockEditorSettings( settings, hasTemplate );
+const EMPTY_BLOCKS_LIST = [];
+
+function useNativeBlockEditorSettings( settings, postType, postId ) {
+	const editorSettings = useBlockEditorSettings( settings, postType, postId );
+	const supportReusableBlock = settings.capabilities?.reusableBlock === true;
 
-	const supportReusableBlock = capabilities.reusableBlock === true;
 	const { reusableBlocks, isTitleSelected } = useSelect(
 		( select ) => {
 			return {
@@ -27,7 +28,7 @@ function useNativeBlockEditorSettings( settings, hasTemplate ) {
 							// Related issue: https://github.com/wordpress-mobile/gutenberg-mobile/issues/2661
 							{ per_page: 100 }
 					  )
-					: [],
+					: EMPTY_BLOCKS_LIST,
 				isTitleSelected: select( editorStore ).isPostTitleSelected(),
 			};
 		},
diff --git a/packages/editor/src/components/provider/use-hide-blocks-from-inserter.js b/packages/editor/src/components/provider/use-hide-blocks-from-inserter.js
new file mode 100644
index 00000000000000..4a1aaf18667462
--- /dev/null
+++ b/packages/editor/src/components/provider/use-hide-blocks-from-inserter.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+
+// These post types are "structural" block lists.
+// We should be allowed to use
+// the post content and template parts blocks within them.
+const POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART = [
+	'wp_block',
+	'wp_template',
+	'wp_template_part',
+];
+
+/**
+ * In some specific contexts,
+ * the template part and post content blocks need to be hidden.
+ *
+ * @param {string} postType Post Type
+ * @param {string} mode     Rendering mode
+ */
+export function useHideBlocksFromInserter( postType, mode ) {
+	useEffect( () => {
+		/*
+		 * Prevent adding template part in the editor.
+		 */
+		addFilter(
+			'blockEditor.__unstableCanInsertBlockType',
+			'removeTemplatePartsFromInserter',
+			( canInsert, blockType ) => {
+				if (
+					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
+						postType
+					) &&
+					blockType.name === 'core/template-part' &&
+					mode === 'post-only'
+				) {
+					return false;
+				}
+				return canInsert;
+			}
+		);
+
+		/*
+		 * Prevent adding post content block (except in query block) in the editor.
+		 */
+		addFilter(
+			'blockEditor.__unstableCanInsertBlockType',
+			'removePostContentFromInserter',
+			(
+				canInsert,
+				blockType,
+				rootClientId,
+				{ getBlockParentsByBlockName }
+			) => {
+				if (
+					! POST_TYPES_ALLOWING_POST_CONTENT_TEMPLATE_PART.includes(
+						postType
+					) &&
+					blockType.name === 'core/post-content'
+				) {
+					return (
+						getBlockParentsByBlockName( rootClientId, 'core/query' )
+							.length > 0
+					);
+				}
+				return canInsert;
+			}
+		);
+
+		return () => {
+			removeFilter(
+				'blockEditor.__unstableCanInsertBlockType',
+				'removeTemplatePartsFromInserter'
+			);
+			removeFilter(
+				'blockEditor.__unstableCanInsertBlockType',
+				'removePostContentFromInserter'
+			);
+		};
+	}, [ postType, mode ] );
+}
diff --git a/packages/editor/src/components/provider/use-post-content-blocks.js b/packages/editor/src/components/provider/use-post-content-blocks.js
new file mode 100644
index 00000000000000..bdd277157e47e0
--- /dev/null
+++ b/packages/editor/src/components/provider/use-post-content-blocks.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+export default function usePostContentBlocks() {
+	const contentOnlyBlockTypes = useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		],
+		[]
+	);
+
+	// Note that there are two separate subscriptions because the result for each
+	// returns a new array.
+	const contentOnlyIds = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName( contentOnlyBlockTypes );
+		},
+		[ contentOnlyBlockTypes ]
+	);
+
+	return contentOnlyIds;
+}
diff --git a/packages/editor/src/components/provider/with-registry-provider.js b/packages/editor/src/components/provider/with-registry-provider.js
index d463c04f74d98e..cebbb766ff9429 100644
--- a/packages/editor/src/components/provider/with-registry-provider.js
+++ b/packages/editor/src/components/provider/with-registry-provider.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
-import {
-	withRegistry,
-	createRegistry,
-	RegistryProvider,
-} from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { useRegistry, createRegistry, RegistryProvider } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
 
@@ -15,40 +11,46 @@ import { storeConfig as blockEditorStoreConfig } from '@wordpress/block-editor';
  */
 import { storeConfig } from '../../store';
 
+function getSubRegistry( subRegistries, registry, useSubRegistry ) {
+	if ( ! useSubRegistry ) {
+		return registry;
+	}
+	let subRegistry = subRegistries.get( registry );
+	if ( ! subRegistry ) {
+		subRegistry = createRegistry(
+			{
+				'core/block-editor': blockEditorStoreConfig,
+			},
+			registry
+		);
+		// Todo: The interface store should also be created per instance.
+		subRegistry.registerStore( 'core/editor', storeConfig );
+		subRegistries.set( registry, subRegistry );
+	}
+	return subRegistry;
+}
+
 const withRegistryProvider = createHigherOrderComponent(
 	( WrappedComponent ) =>
-		withRegistry( ( props ) => {
-			const {
-				useSubRegistry = true,
+		( { useSubRegistry = true, ...props } ) => {
+			const registry = useRegistry();
+			const [ subRegistries ] = useState( () => new WeakMap() );
+			const subRegistry = getSubRegistry(
+				subRegistries,
 				registry,
-				...additionalProps
-			} = props;
-			if ( ! useSubRegistry ) {
-				return <WrappedComponent { ...additionalProps } />;
-			}
-
-			const [ subRegistry, setSubRegistry ] = useState( null );
-			useEffect( () => {
-				const newRegistry = createRegistry(
-					{
-						'core/block-editor': blockEditorStoreConfig,
-					},
-					registry
-				);
-				newRegistry.registerStore( 'core/editor', storeConfig );
-				setSubRegistry( newRegistry );
-			}, [ registry ] );
+				useSubRegistry
+			);
 
-			if ( ! subRegistry ) {
-				return null;
+			if ( subRegistry === registry ) {
+				return <WrappedComponent registry={ registry } { ...props } />;
 			}
 
 			return (
 				<RegistryProvider value={ subRegistry }>
-					<WrappedComponent { ...additionalProps } />
+					<WrappedComponent registry={ subRegistry } { ...props } />
 				</RegistryProvider>
 			);
-		} ),
+		},
 	'withRegistryProvider'
 );
 
diff --git a/packages/editor/src/components/resizable-editor/index.js b/packages/editor/src/components/resizable-editor/index.js
new file mode 100644
index 00000000000000..7d8e26049389a7
--- /dev/null
+++ b/packages/editor/src/components/resizable-editor/index.js
@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useRef, useCallback } from '@wordpress/element';
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ResizeHandle from './resize-handle';
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDE = {
+	position: undefined,
+	userSelect: undefined,
+	cursor: undefined,
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+
+function ResizableEditor( { className, enableResizing, height, children } ) {
+	const [ width, setWidth ] = useState( '100%' );
+	const resizableRef = useRef();
+	const resizeWidthBy = useCallback( ( deltaPixels ) => {
+		if ( resizableRef.current ) {
+			setWidth( resizableRef.current.offsetWidth + deltaPixels );
+		}
+	}, [] );
+	return (
+		<ResizableBox
+			className={ clsx( 'editor-resizable-editor', className, {
+				'is-resizable': enableResizing,
+			} ) }
+			ref={ ( api ) => {
+				resizableRef.current = api?.resizable;
+			} }
+			size={ {
+				width: enableResizing ? width : '100%',
+				height: enableResizing && height ? height : '100%',
+			} }
+			onResizeStop={ ( event, direction, element ) => {
+				setWidth( element.style.width );
+			} }
+			minWidth={ 300 }
+			maxWidth="100%"
+			maxHeight="100%"
+			enable={ {
+				left: enableResizing,
+				right: enableResizing,
+			} }
+			showHandle={ enableResizing }
+			// The editor is centered horizontally, resizing it only
+			// moves half the distance. Hence double the ratio to correctly
+			// align the cursor to the resizer handle.
+			resizeRatio={ 2 }
+			handleComponent={ {
+				left: (
+					<ResizeHandle
+						direction="left"
+						resizeWidthBy={ resizeWidthBy }
+					/>
+				),
+				right: (
+					<ResizeHandle
+						direction="right"
+						resizeWidthBy={ resizeWidthBy }
+					/>
+				),
+			} }
+			handleClasses={ undefined }
+			handleStyles={ {
+				left: HANDLE_STYLES_OVERRIDE,
+				right: HANDLE_STYLES_OVERRIDE,
+			} }
+		>
+			{ children }
+		</ResizableBox>
+	);
+}
+
+export default ResizableEditor;
diff --git a/packages/editor/src/components/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
new file mode 100644
index 00000000000000..ccd903d0f3a172
--- /dev/null
+++ b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { LEFT, RIGHT } from '@wordpress/keycodes';
+import {
+	VisuallyHidden,
+	Tooltip,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
+
+export default function ResizeHandle( { direction, resizeWidthBy } ) {
+	function handleKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( keyCode !== LEFT && keyCode !== RIGHT ) {
+			return;
+		}
+		event.preventDefault();
+
+		if (
+			( direction === 'left' && keyCode === LEFT ) ||
+			( direction === 'right' && keyCode === RIGHT )
+		) {
+			resizeWidthBy( DELTA_DISTANCE );
+		} else if (
+			( direction === 'left' && keyCode === RIGHT ) ||
+			( direction === 'right' && keyCode === LEFT )
+		) {
+			resizeWidthBy( -DELTA_DISTANCE );
+		}
+	}
+
+	const resizeHandleVariants = {
+		active: {
+			opacity: 1,
+			scaleY: 1.3,
+		},
+	};
+
+	const resizableHandleHelpId = `resizable-editor__resize-help-${ direction }`;
+
+	return (
+		<>
+			<Tooltip text={ __( 'Drag to resize' ) }>
+				<motion.button
+					className={ `editor-resizable-editor__resize-handle is-${ direction }` }
+					aria-label={ __( 'Drag to resize' ) }
+					aria-describedby={ resizableHandleHelpId }
+					onKeyDown={ handleKeyDown }
+					variants={ resizeHandleVariants }
+					whileFocus="active"
+					whileHover="active"
+					whileTap="active"
+					key="handle"
+					role="separator"
+					aria-orientation="vertical"
+				/>
+			</Tooltip>
+			<VisuallyHidden id={ resizableHandleHelpId }>
+				{ __( 'Use left and right arrow keys to resize the canvas.' ) }
+			</VisuallyHidden>
+		</>
+	);
+}
diff --git a/packages/editor/src/components/resizable-editor/style.scss b/packages/editor/src/components/resizable-editor/style.scss
new file mode 100644
index 00000000000000..364fdf39ad3155
--- /dev/null
+++ b/packages/editor/src/components/resizable-editor/style.scss
@@ -0,0 +1,53 @@
+// To hide the horizontal scrollbar and show the drag handle on the
+// left and right of the container.
+.editor-resizable-editor.is-resizable {
+	overflow: visible;
+	margin: 0 auto;
+}
+
+.editor-resizable-editor__resize-handle {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	padding: 0;
+	margin: auto 0;
+	width: $grid-unit-15;
+	appearance: none;
+	cursor: ew-resize;
+	outline: none;
+	background: none;
+	border-radius: $radius-full;
+	border: 0;
+	height: 100px;
+
+	&::after {
+		position: absolute;
+		top: $grid-unit-20;
+		left: $grid-unit-05;
+		right: 0;
+		bottom: $grid-unit-20;
+		content: "";
+		width: $grid-unit-05;
+		background-color: rgba($gray-700, 0.4);
+		border-radius: $radius-full;
+	}
+
+	&.is-left {
+		// Subtract half of the handle width to properly center.
+		left: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&.is-right {
+		// Subtract half of the handle width to properly center.
+		right: -$grid-unit-20 - math.div($grid-unit-05, 2);
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+		opacity: 1;
+		&::after {
+			background-color: var(--wp-admin-theme-color);
+		}
+	}
+}
diff --git a/packages/editor/src/components/save-publish-panels/index.js b/packages/editor/src/components/save-publish-panels/index.js
new file mode 100644
index 00000000000000..2a37357e27100e
--- /dev/null
+++ b/packages/editor/src/components/save-publish-panels/index.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button, createSlotFill } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import EntitiesSavedStates from '../entities-saved-states';
+import PostPublishPanel from '../post-publish-panel';
+import PluginPrePublishPanel from '../plugin-pre-publish-panel';
+import PluginPostPublishPanel from '../plugin-post-publish-panel';
+import { store as editorStore } from '../../store';
+
+const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
+
+export const ActionsPanelFill = Fill;
+
+export default function SavePublishPanels( {
+	setEntitiesSavedStatesCallback,
+	closeEntitiesSavedStates,
+	isEntitiesSavedStatesOpen,
+	forceIsDirtyPublishPanel,
+} ) {
+	const { closePublishSidebar, togglePublishSidebar } =
+		useDispatch( editorStore );
+	const {
+		publishSidebarOpened,
+		isPublishable,
+		isDirty,
+		hasOtherEntitiesChanges,
+	} = useSelect( ( select ) => {
+		const {
+			isPublishSidebarOpened,
+			isEditedPostPublishable,
+			isCurrentPostPublished,
+			isEditedPostDirty,
+			hasNonPostEntityChanges,
+		} = select( editorStore );
+		const _hasOtherEntitiesChanges = hasNonPostEntityChanges();
+		return {
+			publishSidebarOpened: isPublishSidebarOpened(),
+			isPublishable:
+				! isCurrentPostPublished() && isEditedPostPublishable(),
+			isDirty: _hasOtherEntitiesChanges || isEditedPostDirty(),
+			hasOtherEntitiesChanges: _hasOtherEntitiesChanges,
+		};
+	}, [] );
+
+	const openEntitiesSavedStates = useCallback(
+		() => setEntitiesSavedStatesCallback( true ),
+		[]
+	);
+
+	// It is ok for these components to be unmounted when not in visual use.
+	// We don't want more than one present at a time, decide which to render.
+	let unmountableContent;
+	if ( publishSidebarOpened ) {
+		unmountableContent = (
+			<PostPublishPanel
+				onClose={ closePublishSidebar }
+				forceIsDirty={ forceIsDirtyPublishPanel }
+				PrePublishExtension={ PluginPrePublishPanel.Slot }
+				PostPublishExtension={ PluginPostPublishPanel.Slot }
+			/>
+		);
+	} else if ( isPublishable && ! hasOtherEntitiesChanges ) {
+		unmountableContent = (
+			<div className="editor-layout__toggle-publish-panel">
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ togglePublishSidebar }
+					aria-expanded={ false }
+				>
+					{ __( 'Open publish panel' ) }
+				</Button>
+			</div>
+		);
+	} else {
+		unmountableContent = (
+			<div className="editor-layout__toggle-entities-saved-states-panel">
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ openEntitiesSavedStates }
+					aria-expanded={ false }
+					aria-haspopup="dialog"
+					disabled={ ! isDirty }
+					accessibleWhenDisabled
+				>
+					{ __( 'Open save panel' ) }
+				</Button>
+			</div>
+		);
+	}
+
+	// Since EntitiesSavedStates controls its own panel, we can keep it
+	// always mounted to retain its own component state (such as checkboxes).
+	return (
+		<>
+			{ isEntitiesSavedStatesOpen && (
+				<EntitiesSavedStates
+					close={ closeEntitiesSavedStates }
+					renderDialog
+				/>
+			) }
+			<Slot bubblesVirtually />
+			{ ! isEntitiesSavedStatesOpen && unmountableContent }
+		</>
+	);
+}
diff --git a/packages/editor/src/components/save-publish-panels/style.scss b/packages/editor/src/components/save-publish-panels/style.scss
new file mode 100644
index 00000000000000..1de6420a0a6837
--- /dev/null
+++ b/packages/editor/src/components/save-publish-panels/style.scss
@@ -0,0 +1,28 @@
+
+.editor-layout__toggle-publish-panel,
+.editor-layout__toggle-sidebar-panel,
+.editor-layout__toggle-entities-saved-states-panel {
+	z-index: z-index(".editor-layout__toggle-sidebar-panel");
+	position: fixed !important; // Necessary to override the default relative positioning.
+	top: -9999em;
+	bottom: auto;
+	left: auto;
+	right: 0;
+	box-sizing: border-box;
+	width: $sidebar-width;
+	background-color: $white;
+	border: $border-width dotted $gray-300;
+	height: auto !important; // Necessary to override the default sidebar positioning.
+	padding: $grid-unit-30;
+	display: flex;
+	justify-content: center;
+}
+
+.editor-layout__toggle-entities-saved-states-panel,
+.editor-layout__toggle-publish-panel {
+	.interface-interface-skeleton__actions:focus &,
+	.interface-interface-skeleton__actions:focus-within & {
+		top: auto;
+		bottom: 0;
+	}
+}
diff --git a/packages/editor/src/components/sidebar/constants.js b/packages/editor/src/components/sidebar/constants.js
new file mode 100644
index 00000000000000..be660c21692390
--- /dev/null
+++ b/packages/editor/src/components/sidebar/constants.js
@@ -0,0 +1,4 @@
+export const sidebars = {
+	document: 'edit-post/document',
+	block: 'edit-post/block',
+};
diff --git a/packages/editor/src/components/sidebar/header.js b/packages/editor/src/components/sidebar/header.js
new file mode 100644
index 00000000000000..ed2f7f89fe6e7a
--- /dev/null
+++ b/packages/editor/src/components/sidebar/header.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { sidebars } from './constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SidebarHeader = ( _, ref ) => {
+	const { documentLabel } = useSelect( ( select ) => {
+		const { getPostTypeLabel } = select( editorStore );
+
+		return {
+			documentLabel:
+				// translators: Default label for the Document sidebar tab, not selected.
+				getPostTypeLabel() || _x( 'Document', 'noun, sidebar' ),
+		};
+	}, [] );
+
+	return (
+		<Tabs.TabList ref={ ref }>
+			<Tabs.Tab
+				tabId={ sidebars.document }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.document }
+			>
+				{ documentLabel }
+			</Tabs.Tab>
+			<Tabs.Tab
+				tabId={ sidebars.block }
+				// Used for focus management in the SettingsSidebar component.
+				data-tab-id={ sidebars.block }
+			>
+				{ /* translators: Text label for the Block Settings Sidebar tab. */ }
+				{ __( 'Block' ) }
+			</Tabs.Tab>
+		</Tabs.TabList>
+	);
+};
+
+export default forwardRef( SidebarHeader );
diff --git a/packages/editor/src/components/sidebar/index.js b/packages/editor/src/components/sidebar/index.js
new file mode 100644
index 00000000000000..601bcd8f311bb8
--- /dev/null
+++ b/packages/editor/src/components/sidebar/index.js
@@ -0,0 +1,195 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockInspector,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Platform,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
+import { isRTL, __, _x } from '@wordpress/i18n';
+import { drawerLeft, drawerRight } from '@wordpress/icons';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import PatternOverridesPanel from '../pattern-overrides-panel';
+import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
+import PluginSidebar from '../plugin-sidebar';
+import PostSummary from './post-summary';
+import PostTaxonomiesPanel from '../post-taxonomies/panel';
+import PostTransformPanel from '../post-transform-panel';
+import SidebarHeader from './header';
+import TemplateContentPanel from '../template-content-panel';
+import TemplatePartContentPanel from '../template-part-content-panel';
+import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
+import { sidebars } from './constants';
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import {
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
+	web: true,
+	native: false,
+} );
+
+const SidebarContent = ( {
+	tabName,
+	keyboardShortcut,
+	onActionPerformed,
+	extraPanels,
+} ) => {
+	const tabListRef = useRef( null );
+	// Because `PluginSidebar` renders a `ComplementaryArea`, we
+	// need to forward the `Tabs` context so it can be passed through the
+	// underlying slot/fill.
+	const tabsContextValue = useContext( Tabs.Context );
+
+	// This effect addresses a race condition caused by tabbing from the last
+	// block in the editor into the settings sidebar. Without this effect, the
+	// selected tab and browser focus can become separated in an unexpected way
+	// (e.g the "block" tab is focused, but the "post" tab is selected).
+	useEffect( () => {
+		const tabsElements = Array.from(
+			tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+		);
+		const selectedTabElement = tabsElements.find(
+			// We are purposefully using a custom `data-tab-id` attribute here
+			// because we don't want rely on any assumptions about `Tabs`
+			// component internals.
+			( element ) => element.getAttribute( 'data-tab-id' ) === tabName
+		);
+		const activeElement = selectedTabElement?.ownerDocument.activeElement;
+		const tabsHasFocus = tabsElements.some( ( element ) => {
+			return activeElement && activeElement.id === element.id;
+		} );
+		if (
+			tabsHasFocus &&
+			selectedTabElement &&
+			selectedTabElement.id !== activeElement?.id
+		) {
+			selectedTabElement?.focus();
+		}
+	}, [ tabName ] );
+
+	return (
+		<PluginSidebar
+			identifier={ tabName }
+			header={
+				<Tabs.Context.Provider value={ tabsContextValue }>
+					<SidebarHeader ref={ tabListRef } />
+				</Tabs.Context.Provider>
+			}
+			closeLabel={ __( 'Close Settings' ) }
+			// This classname is added so we can apply a corrective negative
+			// margin to the panel.
+			// see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049
+			className="editor-sidebar__panel"
+			headerClassName="editor-sidebar__panel-tabs"
+			title={
+				/* translators: button label text should, if possible, be under 16 characters. */
+				_x( 'Settings', 'sidebar button label' )
+			}
+			toggleShortcut={ keyboardShortcut }
+			icon={ isRTL() ? drawerLeft : drawerRight }
+			isActiveByDefault={ SIDEBAR_ACTIVE_BY_DEFAULT }
+		>
+			<Tabs.Context.Provider value={ tabsContextValue }>
+				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
+					<PostSummary onActionPerformed={ onActionPerformed } />
+					<PluginDocumentSettingPanel.Slot />
+					<TemplateContentPanel />
+					<TemplatePartContentPanel />
+					<PostTransformPanel />
+					<PostTaxonomiesPanel />
+					<PatternOverridesPanel />
+					{ extraPanels }
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId={ sidebars.block } focusable={ false }>
+					<BlockInspector />
+				</Tabs.TabPanel>
+			</Tabs.Context.Provider>
+		</PluginSidebar>
+	);
+};
+
+const Sidebar = ( { extraPanels, onActionPerformed } ) => {
+	useAutoSwitchEditorSidebars();
+	const { tabName, keyboardShortcut, showSummary } = useSelect(
+		( select ) => {
+			const shortcut = select(
+				keyboardShortcutsStore
+			).getShortcutRepresentation( 'core/editor/toggle-sidebar' );
+
+			const sidebar =
+				select( interfaceStore ).getActiveComplementaryArea( 'core' );
+			const _isEditorSidebarOpened = [
+				sidebars.block,
+				sidebars.document,
+			].includes( sidebar );
+			let _tabName = sidebar;
+			if ( ! _isEditorSidebarOpened ) {
+				_tabName = !! select(
+					blockEditorStore
+				).getBlockSelectionStart()
+					? sidebars.block
+					: sidebars.document;
+			}
+
+			return {
+				tabName: _tabName,
+				keyboardShortcut: shortcut,
+				showSummary: ! [
+					TEMPLATE_POST_TYPE,
+					TEMPLATE_PART_POST_TYPE,
+					NAVIGATION_POST_TYPE,
+				].includes( select( editorStore ).getCurrentPostType() ),
+			};
+		},
+		[]
+	);
+
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	const onTabSelect = useCallback(
+		( newSelectedTabId ) => {
+			if ( !! newSelectedTabId ) {
+				enableComplementaryArea( 'core', newSelectedTabId );
+			}
+		},
+		[ enableComplementaryArea ]
+	);
+
+	return (
+		<Tabs
+			selectedTabId={ tabName }
+			onSelect={ onTabSelect }
+			selectOnMove={ false }
+		>
+			<SidebarContent
+				tabName={ tabName }
+				keyboardShortcut={ keyboardShortcut }
+				showSummary={ showSummary }
+				onActionPerformed={ onActionPerformed }
+				extraPanels={ extraPanels }
+			/>
+		</Tabs>
+	);
+};
+
+export default Sidebar;
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
new file mode 100644
index 00000000000000..3539f7ba964ec7
--- /dev/null
+++ b/packages/editor/src/components/sidebar/post-summary.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostStatusInfo from '../plugin-post-status-info';
+import PostAuthorPanel from '../post-author/panel';
+import PostCardPanel from '../post-card-panel';
+import PostContentInformation from '../post-content-information';
+import PageAttributesPanel from '../page-attributes/panel';
+import PostDiscussionPanel from '../post-discussion/panel';
+import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel';
+import PostFeaturedImagePanel from '../post-featured-image/panel';
+import PostFormatPanel from '../post-format/panel';
+import PostLastEditedPanel from '../post-last-edited-panel';
+import PostPanelSection from '../post-panel-section';
+import PostSchedulePanel from '../post-schedule/panel';
+import PostStatusPanel from '../post-status';
+import PostSyncStatus from '../post-sync-status';
+import PostTemplatePanel from '../post-template/panel';
+import PostURLPanel from '../post-url/panel';
+import BlogTitle from '../blog-title';
+import PostsPerPage from '../posts-per-page';
+import SiteDiscussion from '../site-discussion';
+import { store as editorStore } from '../../store';
+import { PrivatePostLastRevision } from '../post-last-revision';
+import PostTrash from '../post-trash';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-status';
+
+export default function PostSummary( { onActionPerformed } ) {
+	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
+		( select ) => {
+			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
+			const {
+				isEditorPanelRemoved,
+				getCurrentPostType,
+				getCurrentPostId,
+			} = select( editorStore );
+			return {
+				isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		},
+		[]
+	);
+
+	return (
+		<PostPanelSection className="editor-post-summary">
+			<PluginPostStatusInfo.Slot>
+				{ ( fills ) => (
+					<>
+						<VStack spacing={ 4 }>
+							<PostCardPanel
+								postType={ postType }
+								postId={ postId }
+								onActionPerformed={ onActionPerformed }
+							/>
+							<PostFeaturedImagePanel withPanelBody={ false } />
+							<PostExcerptPanel />
+							<VStack spacing={ 1 }>
+								<PostContentInformation />
+								<PostLastEditedPanel />
+							</VStack>
+							{ ! isRemovedPostStatusPanel && (
+								<VStack spacing={ 4 }>
+									<VStack spacing={ 1 }>
+										<PostStatusPanel />
+										<PostSchedulePanel />
+										<PostURLPanel />
+										<PostAuthorPanel />
+										<PostTemplatePanel />
+										<PostDiscussionPanel />
+										<PrivatePostLastRevision />
+										<PageAttributesPanel />
+										<PostSyncStatus />
+										<BlogTitle />
+										<PostsPerPage />
+										<SiteDiscussion />
+										<PostFormatPanel />
+										{ fills }
+									</VStack>
+									<PostTrash
+										onActionPerformed={ onActionPerformed }
+									/>
+								</VStack>
+							) }
+						</VStack>
+					</>
+				) }
+			</PluginPostStatusInfo.Slot>
+		</PostPanelSection>
+	);
+}
diff --git a/packages/editor/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss
new file mode 100644
index 00000000000000..33a2350b8a92e6
--- /dev/null
+++ b/packages/editor/src/components/sidebar/style.scss
@@ -0,0 +1,16 @@
+.components-panel__header.editor-sidebar__panel-tabs {
+	padding-left: 0;
+	padding-right: $grid-unit-10;
+
+	.components-button.has-icon {
+		padding: 0;
+
+		@include break-medium() {
+			display: flex;
+		}
+	}
+}
+
+.editor-post-summary .components-v-stack:empty {
+	display: none;
+}
diff --git a/packages/editor/src/components/site-discussion/index.js b/packages/editor/src/components/site-discussion/index.js
new file mode 100644
index 00000000000000..5b4d213148341d
--- /dev/null
+++ b/packages/editor/src/components/site-discussion/index.js
@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	Button,
+	Dropdown,
+	RadioControl,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+const COMMENT_OPTIONS = [
+	{
+		label: _x( 'Open', 'Adjective: e.g. "Comments are open"' ),
+		value: 'open',
+		description: __( 'Visitors can add new comments and replies.' ),
+	},
+	{
+		label: __( 'Closed' ),
+		value: '',
+		description: [
+			__( 'Visitors cannot add new comments or replies.' ),
+			__( 'Existing comments remain visible.' ),
+		].join( ' ' ),
+	},
+];
+
+export default function SiteDiscussion() {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { allowCommentsOnNewPosts, isTemplate, postSlug } = useSelect(
+		( select ) => {
+			const { getEditedPostAttribute, getCurrentPostType } =
+				select( editorStore );
+			const { getEditedEntityRecord, canUser } = select( coreStore );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEditedEntityRecord( 'root', 'site' )
+				: undefined;
+			return {
+				isTemplate: getCurrentPostType() === TEMPLATE_POST_TYPE,
+				postSlug: getEditedPostAttribute( 'slug' ),
+				allowCommentsOnNewPosts:
+					siteSettings?.default_comment_status || '',
+			};
+		},
+		[]
+	);
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
+	if ( ! isTemplate || ! [ 'home', 'index' ].includes( postSlug ) ) {
+		return null;
+	}
+	const setAllowCommentsOnNewPosts = ( newValue ) => {
+		editEntityRecord( 'root', 'site', undefined, {
+			default_comment_status: newValue ? 'open' : null,
+		} );
+	};
+	return (
+		<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				contentClassName="editor-site-discussion-dropdown__content"
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<Button
+						size="compact"
+						variant="tertiary"
+						aria-expanded={ isOpen }
+						aria-label={ __( 'Change discussion settings' ) }
+						onClick={ onToggle }
+					>
+						{ allowCommentsOnNewPosts
+							? __( 'Comments open' )
+							: __( 'Comments closed' ) }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ __( 'Discussion' ) }
+							onClose={ onClose }
+						/>
+						<VStack spacing={ 3 }>
+							<Text>
+								{ __(
+									'Changes will apply to new posts only. Individual posts may override these settings.'
+								) }
+							</Text>
+							<RadioControl
+								className="editor-site-discussion__options"
+								hideLabelFromVision
+								label={ __( 'Comment status' ) }
+								options={ COMMENT_OPTIONS }
+								onChange={ setAllowCommentsOnNewPosts }
+								selected={ allowCommentsOnNewPosts }
+							/>
+						</VStack>
+					</>
+				) }
+			/>
+		</PostPanelRow>
+	);
+}
diff --git a/packages/editor/src/components/site-discussion/style.scss b/packages/editor/src/components/site-discussion/style.scss
new file mode 100644
index 00000000000000..dc0608f0cf3ab1
--- /dev/null
+++ b/packages/editor/src/components/site-discussion/style.scss
@@ -0,0 +1,5 @@
+.editor-site-discussion-dropdown__content .components-popover__content {
+	min-width: 320px;
+	padding: $grid-unit-20;
+}
+
diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js
new file mode 100644
index 00000000000000..783a4a224fa378
--- /dev/null
+++ b/packages/editor/src/components/start-page-options/index.js
@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	__experimentalBlockPatternsList as BlockPatternsList,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+
+export function useStartPatterns() {
+	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
+	// and it has no postTypes declared and the current post type is page or if
+	// the current post type is part of the postTypes declared.
+	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
+		( select ) => {
+			const { getPatternsByBlockTypes, getBlocksByName } =
+				select( blockEditorStore );
+			const { getCurrentPostType, getRenderingMode } =
+				select( editorStore );
+			const rootClientId =
+				getRenderingMode() === 'post-only'
+					? ''
+					: getBlocksByName( 'core/post-content' )?.[ 0 ];
+			return {
+				blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
+					'core/post-content',
+					rootClientId
+				),
+				postType: getCurrentPostType(),
+			};
+		},
+		[]
+	);
+
+	return useMemo( () => {
+		if ( ! blockPatternsWithPostContentBlockType?.length ) {
+			return [];
+		}
+
+		/*
+		 * Filter patterns without postTypes declared if the current postType is page
+		 * or patterns that declare the current postType in its post type array.
+		 */
+		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
+			return (
+				( postType === 'page' && ! pattern.postTypes ) ||
+				( Array.isArray( pattern.postTypes ) &&
+					pattern.postTypes.includes( postType ) )
+			);
+		} );
+	}, [ postType, blockPatternsWithPostContentBlockType ] );
+}
+
+function PatternSelection( { blockPatterns, onChoosePattern } ) {
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			onClickPattern={ ( _pattern, blocks ) => {
+				editEntityRecord( 'postType', postType, postId, {
+					blocks,
+					content: ( { blocks: blocksForSerialization = [] } ) =>
+						__unstableSerializeAndClean( blocksForSerialization ),
+				} );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartPageOptionsModal( { onClose } ) {
+	const startPatterns = useStartPatterns();
+	const hasStartPattern = startPatterns.length > 0;
+
+	if ( ! hasStartPattern ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={ __( 'Choose a pattern' ) }
+			isFullScreen
+			onRequestClose={ onClose }
+		>
+			<div className="editor-start-page-options__modal-content">
+				<PatternSelection
+					blockPatterns={ startPatterns }
+					onChoosePattern={ onClose }
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default function StartPageOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
+	const shouldEnableModal = useSelect( ( select ) => {
+		const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } =
+			select( editorStore );
+		const preferencesModalActive =
+			select( interfaceStore ).isModalActive( 'editor/preferences' );
+		const choosePatternModalEnabled = select( preferencesStore ).get(
+			'core',
+			'enableChoosePatternModal'
+		);
+		return (
+			choosePatternModalEnabled &&
+			! preferencesModalActive &&
+			! isEditedPostDirty() &&
+			isEditedPostEmpty() &&
+			TEMPLATE_POST_TYPE !== getCurrentPostType()
+		);
+	}, [] );
+
+	if ( ! shouldEnableModal || isClosed ) {
+		return null;
+	}
+
+	return <StartPageOptionsModal onClose={ () => setIsClosed( true ) } />;
+}
diff --git a/packages/editor/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss
new file mode 100644
index 00000000000000..129d670526c709
--- /dev/null
+++ b/packages/editor/src/components/start-page-options/style.scss
@@ -0,0 +1,26 @@
+// 2 column masonry layout.
+.editor-start-page-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+		margin-bottom: $grid-unit-30;
+
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
+
+		.block-editor-block-preview__content {
+			width: 100%;
+		}
+	}
+}
diff --git a/packages/editor/src/components/start-template-options/index.js b/packages/editor/src/components/start-template-options/index.js
new file mode 100644
index 00000000000000..8d3910341aff43
--- /dev/null
+++ b/packages/editor/src/components/start-template-options/index.js
@@ -0,0 +1,220 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+
+function useFallbackTemplateContent( slug, isCustom = false ) {
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getDefaultTemplateId } =
+				select( coreStore );
+			const templateId = getDefaultTemplateId( {
+				slug,
+				is_custom: isCustom,
+				ignore_empty: true,
+			} );
+			return templateId
+				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
+						?.content?.raw
+				: undefined;
+		},
+		[ slug, isCustom ]
+	);
+}
+
+function useStartPatterns( fallbackContent ) {
+	const { slug, patterns } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+		const { getEntityRecord, getBlockPatterns } = select( coreStore );
+		const postId = getCurrentPostId();
+		const postType = getCurrentPostType();
+		const record = getEntityRecord( 'postType', postType, postId );
+		return {
+			slug: record.slug,
+			patterns: getBlockPatterns(),
+		};
+	}, [] );
+
+	const currentThemeStylesheet = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme().stylesheet
+	);
+
+	// Duplicated from packages/block-library/src/pattern/edit.js.
+	function injectThemeAttributeInBlockTemplateContent( block ) {
+		if (
+			block.innerBlocks.find(
+				( innerBlock ) => innerBlock.name === 'core/template-part'
+			)
+		) {
+			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
+				if (
+					innerBlock.name === 'core/template-part' &&
+					innerBlock.attributes.theme === undefined
+				) {
+					innerBlock.attributes.theme = currentThemeStylesheet;
+				}
+				return innerBlock;
+			} );
+		}
+
+		if (
+			block.name === 'core/template-part' &&
+			block.attributes.theme === undefined
+		) {
+			block.attributes.theme = currentThemeStylesheet;
+		}
+		return block;
+	}
+
+	return useMemo( () => {
+		// filter patterns that are supposed to be used in the current template being edited.
+		return [
+			{
+				name: 'fallback',
+				blocks: parse( fallbackContent ),
+				title: __( 'Fallback content' ),
+			},
+			...patterns
+				.filter( ( pattern ) => {
+					return (
+						Array.isArray( pattern.templateTypes ) &&
+						pattern.templateTypes.some( ( templateType ) =>
+							slug.startsWith( templateType )
+						)
+					);
+				} )
+				.map( ( pattern ) => {
+					return {
+						...pattern,
+						blocks: parse( pattern.content ).map( ( block ) =>
+							injectThemeAttributeInBlockTemplateContent( block )
+						),
+					};
+				} ),
+		];
+	}, [ fallbackContent, slug, patterns ] );
+}
+
+function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
+	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
+	const blockPatterns = useStartPatterns( fallbackContent );
+	return (
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
+			} }
+		/>
+	);
+}
+
+function StartModal( { slug, isCustom, onClose, postType } ) {
+	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
+	if ( ! fallbackContent ) {
+		return null;
+	}
+	return (
+		<Modal
+			className="editor-start-template-options__modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			focusOnMount="firstElement"
+			onRequestClose={ onClose }
+			isFullScreen
+		>
+			<div className="editor-start-template-options__modal-content">
+				<PatternSelection
+					fallbackContent={ fallbackContent }
+					slug={ slug }
+					isCustom={ isCustom }
+					postType={ postType }
+					onChoosePattern={ () => {
+						onClose();
+					} }
+				/>
+			</div>
+			<Flex
+				className="editor-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ onClose }
+					>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export default function StartTemplateOptions() {
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getCurrentPostId } =
+				select( editorStore );
+			const _postType = getCurrentPostType();
+			const _postId = getCurrentPostId();
+			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+				select( coreStore );
+			const templateRecord = getEditedEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+			const hasEdits = hasEditsForEntityRecord(
+				'postType',
+				_postType,
+				_postId
+			);
+
+			return {
+				shouldOpenModal:
+					! hasEdits &&
+					'' === templateRecord.content &&
+					TEMPLATE_POST_TYPE === _postType,
+				slug: templateRecord.slug,
+				isCustom: templateRecord.is_custom,
+				postType: _postType,
+				postId: _postId,
+			};
+		},
+		[]
+	);
+
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldOpenModal || isClosed ) {
+		return null;
+	}
+
+	return (
+		<StartModal
+			slug={ slug }
+			isCustom={ isCustom }
+			postType={ postType }
+			onClose={ () => setIsClosed( true ) }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/start-template-options/style.scss b/packages/editor/src/components/start-template-options/style.scss
new file mode 100644
index 00000000000000..128eddb48c8c8c
--- /dev/null
+++ b/packages/editor/src/components/start-template-options/style.scss
@@ -0,0 +1,47 @@
+$actions-height: 92px;
+
+.editor-start-template-options__modal {
+	.editor-start-template-options__modal__actions {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: $actions-height;
+		background-color: $white;
+		margin-left: - $grid-unit-40;
+		margin-right: - $grid-unit-40;
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+		border-top: 1px solid $gray-300;
+		z-index: z-index(".editor-start-template-options__modal__actions");
+	}
+
+	.block-editor-block-patterns-list {
+		// Since the actions container is positioned absolutely,
+		// this padding bottom ensures that the content wrapper will properly
+		// detect overflowing content and start showing scrollbars at the right
+		// moment. Without this padding, the content would render under the actions
+		// bar without causing the wrapper to show a scrollbar.
+		padding-bottom: $actions-height;
+	}
+}
+
+.editor-start-template-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+
+		.block-editor-block-patterns-list__item-title {
+			display: none;
+		}
+	}
+}
diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js
index 97d96efaf84738..47de10b66ebdd1 100644
--- a/packages/editor/src/components/table-of-contents/index.js
+++ b/packages/editor/src/components/table-of-contents/index.js
@@ -23,11 +23,14 @@ function TableOfContents(
 	);
 	return (
 		<Dropdown
-			position={ repositionDropdown ? 'middle right right' : 'bottom' }
+			popoverProps={ {
+				placement: repositionDropdown ? 'right' : 'bottom',
+			} }
 			className="table-of-contents"
 			contentClassName="table-of-contents__popover"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					__next40pxDefaultSize
 					{ ...props }
 					ref={ ref }
 					onClick={ hasBlocks ? onToggle : undefined }
@@ -50,4 +53,14 @@ function TableOfContents(
 	);
 }
 
+/**
+ * Renders a table of contents component.
+ *
+ * @param {Object}      props                         The component props.
+ * @param {boolean}     props.hasOutlineItemsDisabled Whether outline items are disabled.
+ * @param {boolean}     props.repositionDropdown      Whether to reposition the dropdown.
+ * @param {Element.ref} ref                           The component's ref.
+ *
+ * @return {React.ReactNode} The rendered table of contents component.
+ */
 export default forwardRef( TableOfContents );
diff --git a/packages/editor/src/components/template-content-panel/index.js b/packages/editor/src/components/template-content-panel/index.js
new file mode 100644
index 00000000000000..41e170e76daef5
--- /dev/null
+++ b/packages/editor/src/components/template-content-panel/index.js
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
+import { applyFilters } from '@wordpress/hooks';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+const TEMPLATE_PART_BLOCK = 'core/template-part';
+
+export default function TemplateContentPanel() {
+	const postContentBlockTypes = useMemo(
+		() =>
+			applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		[]
+	);
+
+	const { clientIds, postType, renderingMode } = useSelect(
+		( select ) => {
+			const {
+				getCurrentPostType,
+				getPostBlocksByName,
+				getRenderingMode,
+			} = unlock( select( editorStore ) );
+			const _postType = getCurrentPostType();
+			return {
+				postType: _postType,
+				clientIds: getPostBlocksByName(
+					TEMPLATE_POST_TYPE === _postType
+						? TEMPLATE_PART_BLOCK
+						: postContentBlockTypes
+				),
+				renderingMode: getRenderingMode(),
+			};
+		},
+		[ postContentBlockTypes ]
+	);
+
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
+	if (
+		( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) ||
+		clientIds.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation
+				clientIds={ clientIds }
+				onSelect={ () => {
+					enableComplementaryArea( 'core', 'edit-post/document' );
+				} }
+			/>
+		</PanelBody>
+	);
+}
diff --git a/packages/editor/src/components/template-part-content-panel/index.js b/packages/editor/src/components/template-part-content-panel/index.js
new file mode 100644
index 00000000000000..6ca2b080f6ee72
--- /dev/null
+++ b/packages/editor/src/components/template-part-content-panel/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+function TemplatePartContentPanelInner() {
+	const blockTypes = useSelect( ( select ) => {
+		const { getBlockTypes } = select( blocksStore );
+		return getBlockTypes();
+	}, [] );
+	const themeBlockNames = useMemo( () => {
+		return blockTypes
+			.filter( ( blockType ) => {
+				return blockType.category === 'theme';
+			} )
+			.map( ( { name } ) => name );
+	}, [ blockTypes ] );
+	const themeBlocks = useSelect(
+		( select ) => {
+			const { getBlocksByName } = select( blockEditorStore );
+			return getBlocksByName( themeBlockNames );
+		},
+		[ themeBlockNames ]
+	);
+	if ( themeBlocks.length === 0 ) {
+		return null;
+	}
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ themeBlocks } />
+		</PanelBody>
+	);
+}
+
+export default function TemplatePartContentPanel() {
+	const postType = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return getCurrentPostType();
+	}, [] );
+	if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+		return null;
+	}
+
+	return <TemplatePartContentPanelInner />;
+}
diff --git a/packages/editor/src/components/template-part-menu-items/convert-to-regular.js b/packages/editor/src/components/template-part-menu-items/convert-to-regular.js
new file mode 100644
index 00000000000000..4ca21f42fa944a
--- /dev/null
+++ b/packages/editor/src/components/template-part-menu-items/convert-to-regular.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function ConvertToRegularBlocks( { clientId, onClose } ) {
+	const { getBlocks } = useSelect( blockEditorStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
+	if ( ! canRemove ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				replaceBlocks( clientId, getBlocks( clientId ) );
+				onClose();
+			} }
+		>
+			{ __( 'Detach' ) }
+		</MenuItem>
+	);
+}
diff --git a/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js b/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js
new file mode 100644
index 00000000000000..9ce11772a34b7a
--- /dev/null
+++ b/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { createBlock } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { symbolFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { CreateTemplatePartModal } from '@wordpress/fields';
+
+export default function ConvertToTemplatePart( { clientIds, blocks } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const { canCreate } = useSelect( ( select ) => {
+		return {
+			canCreate:
+				select( blockEditorStore ).canInsertBlockType(
+					'core/template-part'
+				),
+		};
+	}, [] );
+
+	if ( ! canCreate ) {
+		return null;
+	}
+
+	const onConvert = async ( templatePart ) => {
+		replaceBlocks(
+			clientIds,
+			createBlock( 'core/template-part', {
+				slug: templatePart.slug,
+				theme: templatePart.theme,
+			} )
+		);
+		createSuccessNotice( __( 'Template part created.' ), {
+			type: 'snackbar',
+		} );
+
+		// The modal and this component will be unmounted because of `replaceBlocks` above,
+		// so no need to call `closeModal` or `onClose`.
+	};
+
+	return (
+		<>
+			<MenuItem
+				icon={ symbolFilled }
+				onClick={ () => {
+					setIsModalOpen( true );
+				} }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Create template part' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => {
+						setIsModalOpen( false );
+					} }
+					blocks={ blocks }
+					onCreate={ onConvert }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/editor/src/components/template-part-menu-items/index.js b/packages/editor/src/components/template-part-menu-items/index.js
new file mode 100644
index 00000000000000..0e126644d49938
--- /dev/null
+++ b/packages/editor/src/components/template-part-menu-items/index.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	BlockSettingsMenuControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ConvertToRegularBlocks from './convert-to-regular';
+import ConvertToTemplatePart from './convert-to-template-part';
+
+export default function TemplatePartMenuItems() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) => (
+				<TemplatePartConverterMenuItem
+					clientIds={ selectedClientIds }
+					onClose={ onClose }
+				/>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}
+
+function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
+	const { isContentOnly, blocks } = useSelect(
+		( select ) => {
+			const { getBlocksByClientId, getBlockEditingMode } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocksByClientId( clientIds ),
+				isContentOnly:
+					clientIds.length === 1 &&
+					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
+			};
+		},
+		[ clientIds ]
+	);
+
+	// Do not show the convert button if the block is in content-only mode.
+	if ( isContentOnly ) {
+		return null;
+	}
+
+	// Allow converting a single template part to standard blocks.
+	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
+		return (
+			<ConvertToRegularBlocks
+				clientId={ clientIds[ 0 ] }
+				onClose={ onClose }
+			/>
+		);
+	}
+	return <ConvertToTemplatePart clientIds={ clientIds } blocks={ blocks } />;
+}
diff --git a/packages/editor/src/components/template-part-menu-items/index.native.js b/packages/editor/src/components/template-part-menu-items/index.native.js
new file mode 100644
index 00000000000000..af843714462387
--- /dev/null
+++ b/packages/editor/src/components/template-part-menu-items/index.native.js
@@ -0,0 +1,3 @@
+export default function TemplatePartMenuItems() {
+	return null;
+}
diff --git a/packages/editor/src/components/template-validation-notice/index.js b/packages/editor/src/components/template-validation-notice/index.js
index 64e2227e30febe..bfbc6319ffa8a8 100644
--- a/packages/editor/src/components/template-validation-notice/index.js
+++ b/packages/editor/src/components/template-validation-notice/index.js
@@ -1,63 +1,62 @@
 /**
  * WordPress dependencies
  */
-import { Notice } from '@wordpress/components';
+import {
+	Notice,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-function TemplateValidationNotice( { isValid, ...props } ) {
+export default function TemplateValidationNotice() {
+	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
+	const isValid = useSelect( ( select ) => {
+		return select( blockEditorStore ).isValidTemplate();
+	}, [] );
+	const { setTemplateValidity, synchronizeTemplate } =
+		useDispatch( blockEditorStore );
+
 	if ( isValid ) {
 		return null;
 	}
 
-	const confirmSynchronization = () => {
-		if (
-			// eslint-disable-next-line no-alert
-			window.confirm(
-				__(
-					'Resetting the template may result in loss of content, do you want to continue?'
-				)
-			)
-		) {
-			props.synchronizeTemplate();
-		}
-	};
-
 	return (
-		<Notice
-			className="editor-template-validation-notice"
-			isDismissible={ false }
-			status="warning"
-			actions={ [
-				{
-					label: __( 'Keep it as is' ),
-					onClick: props.resetTemplateValidity,
-				},
-				{
-					label: __( 'Reset the template' ),
-					onClick: confirmSynchronization,
-				},
-			] }
-		>
-			{ __(
-				'The content of your post doesn’t match the template assigned to your post type.'
-			) }
-		</Notice>
+		<>
+			<Notice
+				className="editor-template-validation-notice"
+				isDismissible={ false }
+				status="warning"
+				actions={ [
+					{
+						label: __( 'Keep it as is' ),
+						onClick: () => setTemplateValidity( true ),
+					},
+					{
+						label: __( 'Reset the template' ),
+						onClick: () => setShowConfirmDialog( true ),
+					},
+				] }
+			>
+				{ __(
+					'The content of your post doesn’t match the template assigned to your post type.'
+				) }
+			</Notice>
+			<ConfirmDialog
+				isOpen={ showConfirmDialog }
+				confirmButtonText={ __( 'Reset' ) }
+				onConfirm={ () => {
+					setShowConfirmDialog( false );
+					synchronizeTemplate();
+				} }
+				onCancel={ () => setShowConfirmDialog( false ) }
+				size="medium"
+			>
+				{ __(
+					'Resetting the template may result in loss of content, do you want to continue?'
+				) }
+			</ConfirmDialog>
+		</>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => ( {
-		isValid: select( blockEditorStore ).isValidTemplate(),
-	} ) ),
-	withDispatch( ( dispatch ) => {
-		const { setTemplateValidity, synchronizeTemplate } =
-			dispatch( blockEditorStore );
-		return {
-			resetTemplateValidity: () => setTemplateValidity( true ),
-			synchronizeTemplate,
-		};
-	} ),
-] )( TemplateValidationNotice );
diff --git a/packages/editor/src/components/template-validation-notice/style.scss b/packages/editor/src/components/template-validation-notice/style.scss
deleted file mode 100644
index dde63f7e36b14c..00000000000000
--- a/packages/editor/src/components/template-validation-notice/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.editor-template-validation-notice {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	.components-button {
-		margin-left: 5px;
-	}
-}
diff --git a/packages/editor/src/components/text-editor/index.js b/packages/editor/src/components/text-editor/index.js
new file mode 100644
index 00000000000000..fa0688859b5a69
--- /dev/null
+++ b/packages/editor/src/components/text-editor/index.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostTextEditor from '../post-text-editor';
+import PostTitleRaw from '../post-title/post-title-raw';
+
+export default function TextEditor( { autoFocus = false } ) {
+	const { switchEditorMode } = useDispatch( editorStore );
+	const { shortcut, isRichEditingEnabled } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+
+		return {
+			shortcut: getShortcutRepresentation( 'core/editor/toggle-mode' ),
+			isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+		};
+	}, [] );
+
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( autoFocus ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus ] );
+
+	return (
+		<div className="editor-text-editor">
+			{ isRichEditingEnabled && (
+				<div className="editor-text-editor__toolbar">
+					<h2>{ __( 'Editing code' ) }</h2>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => switchEditorMode( 'visual' ) }
+						shortcut={ shortcut }
+					>
+						{ __( 'Exit code editor' ) }
+					</Button>
+				</div>
+			) }
+			<div className="editor-text-editor__body">
+				<PostTitleRaw ref={ titleRef } />
+				<PostTextEditor />
+			</div>
+		</div>
+	);
+}
diff --git a/packages/editor/src/components/text-editor/style.scss b/packages/editor/src/components/text-editor/style.scss
new file mode 100644
index 00000000000000..9b2748e08fc5cf
--- /dev/null
+++ b/packages/editor/src/components/text-editor/style.scss
@@ -0,0 +1,71 @@
+.editor-text-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
+
+	// Post title.
+	.editor-post-title:not(.is-raw-text),
+	.editor-post-title.is-raw-text textarea {
+		max-width: none;
+		line-height: $default-line-height;
+
+		font-family: $editor-html-font;
+		font-size: 2.5em;
+		font-weight: normal;
+
+		border: $border-width solid $gray-600;
+		border-radius: 0;
+
+		// Same padding as body.
+		padding: $grid-unit-20;
+
+		@include break-small() {
+			padding: $grid-unit-30;
+		}
+
+		&:focus {
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.editor-text-editor__body {
+	width: 100%;
+	padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+	max-width: $break-xlarge;
+	margin-left: auto;
+	margin-right: auto;
+
+	@include break-large() {
+		padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+	}
+}
+
+// Exit code editor toolbar.
+.editor-text-editor__toolbar {
+	position: sticky;
+	z-index: z-index(".editor-text-editor__toolbar");
+	top: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	background: rgba($white, 0.8);
+	padding: $grid-unit-05 $grid-unit-15;
+
+	@include break-small() {
+		padding: $grid-unit-15;
+	}
+
+	@include break-large() {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	h2 {
+		line-height: $button-size-next-default-40px;
+		margin: 0 auto 0 0;
+		font-size: $default-font-size;
+		color: $gray-900;
+	}
+}
diff --git a/packages/editor/src/components/theme-support-check/index.js b/packages/editor/src/components/theme-support-check/index.js
index fc0beff219b685..1f29370d32199c 100644
--- a/packages/editor/src/components/theme-support-check/index.js
+++ b/packages/editor/src/components/theme-support-check/index.js
@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -14,16 +9,27 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export function ThemeSupportCheck( {
-	themeSupports,
-	children,
-	postType,
-	supportKeys,
-} ) {
+/**
+ * Checks if the current theme supports specific features and renders the children if supported.
+ *
+ * @param {Object}             props             The component props.
+ * @param {React.ReactElement} props.children    The children to render if the theme supports the specified features.
+ * @param {string|string[]}    props.supportKeys The key(s) of the theme support(s) to check.
+ *
+ * @return {React.ReactElement} The rendered children if the theme supports the specified features, otherwise null.
+ */
+export default function ThemeSupportCheck( { children, supportKeys } ) {
+	const { postType, themeSupports } = useSelect( ( select ) => {
+		return {
+			postType: select( editorStore ).getEditedPostAttribute( 'type' ),
+			themeSupports: select( coreStore ).getThemeSupports(),
+		};
+	}, [] );
+
 	const isSupported = (
 		Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
-	 ).some( ( key ) => {
-		const supported = get( themeSupports, [ key ], false );
+	).some( ( key ) => {
+		const supported = themeSupports?.[ key ] ?? false;
 		// 'post-thumbnails' can be boolean or an array of post types.
 		// In the latter case, we need to verify `postType` exists
 		// within `supported`. If `postType` isn't passed, then the check
@@ -40,12 +46,3 @@ export function ThemeSupportCheck( {
 
 	return children;
 }
-
-export default withSelect( ( select ) => {
-	const { getThemeSupports } = select( coreStore );
-	const { getEditedPostAttribute } = select( editorStore );
-	return {
-		postType: getEditedPostAttribute( 'type' ),
-		themeSupports: getThemeSupports(),
-	};
-} )( ThemeSupportCheck );
diff --git a/packages/editor/src/components/theme-support-check/test/index.js b/packages/editor/src/components/theme-support-check/test/index.js
index acdbcfe2535526..b7f4dd45f2b236 100644
--- a/packages/editor/src/components/theme-support-check/test/index.js
+++ b/packages/editor/src/components/theme-support-check/test/index.js
@@ -3,27 +3,38 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { ThemeSupportCheck } from '../index';
+import ThemeSupportCheck from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( themeSupports = {}, postType = 'post' ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getEditedPostAttribute: () => postType,
+			getThemeSupports: () => themeSupports,
+		} ) );
+	} );
+}
 
 describe( 'ThemeSupportCheck', () => {
 	it( "should not render if there's no support check provided", () => {
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
 		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if post-thumbnails are supported', () => {
-		const themeSupports = {
-			'post-thumbnails': true,
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -31,16 +42,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should render if post-thumbnails are supported for the post type', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'post'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'post' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -48,16 +57,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if post-thumbnails aren't supported for the post type", () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'page'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'page' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -65,16 +72,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should not render if post-thumbnails is limited and false is passed for postType', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			false
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ false }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -82,15 +87,11 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if theme doesn't support post-thumbnails", () => {
-		const themeSupports = {
+		setupUseSelectMock( {
 			'post-thumbnails': false,
-		};
-		const supportKeys = 'post-thumbnails';
+		} );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
diff --git a/packages/editor/src/components/time-to-read/index.js b/packages/editor/src/components/time-to-read/index.js
index 41b458124c6f3b..21891273991a2c 100644
--- a/packages/editor/src/components/time-to-read/index.js
+++ b/packages/editor/src/components/time-to-read/index.js
@@ -20,6 +20,11 @@ import { store as editorStore } from '../../store';
  */
 const AVERAGE_READING_RATE = 189;
 
+/**
+ * Component for showing Time To Read in Content.
+ *
+ * @return {React.ReactNode} The rendered TimeToRead component.
+ */
 export default function TimeToRead() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
@@ -42,10 +47,10 @@ export default function TimeToRead() {
 			  } )
 			: createInterpolateElement(
 					sprintf(
-						/* translators: %s is the number of minutes the post will take to read. */
+						/* translators: %s: the number of minutes to read the post. */
 						_n(
-							'<span>%d</span> minute',
-							'<span>%d</span> minutes',
+							'<span>%s</span> minute',
+							'<span>%s</span> minutes',
 							minutesToRead
 						),
 						minutesToRead
diff --git a/packages/editor/src/components/unsaved-changes-warning/index.js b/packages/editor/src/components/unsaved-changes-warning/index.js
index 69ff5c8389cc06..d04b1f36abcbb3 100644
--- a/packages/editor/src/components/unsaved-changes-warning/index.js
+++ b/packages/editor/src/components/unsaved-changes-warning/index.js
@@ -10,44 +10,39 @@ import { store as coreStore } from '@wordpress/core-data';
  * Warns the user if there are unsaved changes before leaving the editor.
  * Compatible with Post Editor and Site Editor.
  *
- * @return {WPComponent} The component.
+ * @return {React.ReactNode} The component.
  */
 export default function UnsavedChangesWarning() {
-	const isDirty = useSelect( ( select ) => {
-		return () => {
-			const { __experimentalGetDirtyEntityRecords } = select( coreStore );
+	const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore );
+
+	useEffect( () => {
+		/**
+		 * Warns the user if there are unsaved changes before leaving the editor.
+		 *
+		 * @param {Event} event `beforeunload` event.
+		 *
+		 * @return {string | undefined} Warning prompt message, if unsaved changes exist.
+		 */
+		const warnIfUnsavedChanges = ( event ) => {
+			// We need to call the selector directly in the listener to avoid race
+			// conditions with `BrowserURL` where `componentDidUpdate` gets the
+			// new value of `isEditedPostDirty` before this component does,
+			// causing this component to incorrectly think a trashed post is still dirty.
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			return dirtyEntityRecords.length > 0;
+			if ( dirtyEntityRecords.length > 0 ) {
+				event.returnValue = __(
+					'You have unsaved changes. If you proceed, they will be lost.'
+				);
+				return event.returnValue;
+			}
 		};
-	}, [] );
 
-	/**
-	 * Warns the user if there are unsaved changes before leaving the editor.
-	 *
-	 * @param {Event} event `beforeunload` event.
-	 *
-	 * @return {?string} Warning prompt message, if unsaved changes exist.
-	 */
-	const warnIfUnsavedChanges = ( event ) => {
-		// We need to call the selector directly in the listener to avoid race
-		// conditions with `BrowserURL` where `componentDidUpdate` gets the
-		// new value of `isEditedPostDirty` before this component does,
-		// causing this component to incorrectly think a trashed post is still dirty.
-		if ( isDirty() ) {
-			event.returnValue = __(
-				'You have unsaved changes. If you proceed, they will be lost.'
-			);
-			return event.returnValue;
-		}
-	};
-
-	useEffect( () => {
 		window.addEventListener( 'beforeunload', warnIfUnsavedChanges );
 
 		return () => {
 			window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
 		};
-	}, [] );
+	}, [ __experimentalGetDirtyEntityRecords ] );
 
 	return null;
 }
diff --git a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
new file mode 100644
index 00000000000000..bacf1beb1abecd
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Component that:
+ *
+ * - Displays a 'Edit your template to edit this block' notification when the
+ *   user is focusing on editing page content and clicks on a disabled template
+ *   block.
+ * - Displays a 'Edit your template to edit this block' dialog when the user
+ *   is focusing on editing page conetnt and double clicks on a disabled
+ *   template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateBlocksNotification( { contentRef } ) {
+	const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => {
+		const { getEditorSettings, getCurrentTemplateId } =
+			select( editorStore );
+
+		return {
+			onNavigateToEntityRecord:
+				getEditorSettings().onNavigateToEntityRecord,
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+
+	const canEditTemplate = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} ),
+		[]
+	);
+
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
+
+	useEffect( () => {
+		const handleDblClick = ( event ) => {
+			if ( ! canEditTemplate ) {
+				return;
+			}
+
+			if (
+				! event.target.classList.contains( 'is-root-container' ) ||
+				event.target.dataset?.type === 'core/template-part'
+			) {
+				return;
+			}
+
+			if ( ! event.defaultPrevented ) {
+				event.preventDefault();
+				setIsDialogOpen( true );
+			}
+		};
+
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'dblclick', handleDblClick );
+		return () => {
+			canvas?.removeEventListener( 'dblclick', handleDblClick );
+		};
+	}, [ contentRef, canEditTemplate ] );
+
+	if ( ! canEditTemplate ) {
+		return null;
+	}
+
+	return (
+		<ConfirmDialog
+			isOpen={ isDialogOpen }
+			confirmButtonText={ __( 'Edit template' ) }
+			onConfirm={ () => {
+				setIsDialogOpen( false );
+				onNavigateToEntityRecord( {
+					postId: templateId,
+					postType: 'wp_template',
+				} );
+			} }
+			onCancel={ () => setIsDialogOpen( false ) }
+			size="medium"
+		>
+			{ __(
+				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'
+			) }
+		</ConfirmDialog>
+	);
+}
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
new file mode 100644
index 00000000000000..122252ea4a4690
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -0,0 +1,501 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockList,
+	store as blockEditorStore,
+	__unstableUseTypewriter as useTypewriter,
+	__unstableUseTypingObserver as useTypingObserver,
+	useSettings,
+	RecursionProvider,
+	privateApis as blockEditorPrivateApis,
+	__experimentalUseResizeCanvas as useResizeCanvas,
+} from '@wordpress/block-editor';
+import { useEffect, useRef, useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	useMergeRefs,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import PostTitle from '../post-title';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import EditTemplateBlocksNotification from './edit-template-blocks-notification';
+import ResizableEditor from '../resizable-editor';
+import useSelectNearestEditableBlock from './use-select-nearest-editable-block';
+import {
+	NAVIGATION_POST_TYPE,
+	PATTERN_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+} from '../../store/constants';
+import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
+
+const {
+	LayoutStyle,
+	useLayoutClasses,
+	useLayoutStyles,
+	ExperimentalBlockCanvas: BlockCanvas,
+	useFlashEditableBlocks,
+} = unlock( blockEditorPrivateApis );
+
+/**
+ * These post types have a special editor where they don't allow you to fill the title
+ * and they don't apply the layout styles.
+ */
+const DESIGN_POST_TYPES = [
+	PATTERN_POST_TYPE,
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+];
+
+/**
+ * Given an array of nested blocks, find the first Post Content
+ * block inside it, recursing through any nesting levels,
+ * and return its attributes.
+ *
+ * @param {Array} blocks A list of blocks.
+ *
+ * @return {Object | undefined} The Post Content block.
+ */
+function getPostContentAttributes( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return blocks[ i ].attributes;
+		}
+		if ( blocks[ i ].innerBlocks.length ) {
+			const nestedPostContent = getPostContentAttributes(
+				blocks[ i ].innerBlocks
+			);
+
+			if ( nestedPostContent ) {
+				return nestedPostContent;
+			}
+		}
+	}
+}
+
+function checkForPostContentAtRootLevel( blocks ) {
+	for ( let i = 0; i < blocks.length; i++ ) {
+		if ( blocks[ i ].name === 'core/post-content' ) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function VisualEditor( {
+	// Ideally as we unify post and site editors, we won't need these props.
+	autoFocus,
+	styles,
+	disableIframe = false,
+	iframeProps,
+	contentRef,
+	className,
+} ) {
+	const [ contentHeight, setContentHeight ] = useState( '' );
+	const effectContentHeight = useResizeObserver( ( [ entry ] ) => {
+		setContentHeight( entry.borderBoxSize[ 0 ].blockSize );
+	} );
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const {
+		renderingMode,
+		postContentAttributes,
+		editedPostTemplate = {},
+		wrapperBlockName,
+		wrapperUniqueId,
+		deviceType,
+		isFocusedEntity,
+		isDesignPostType,
+		postType,
+		isPreview,
+	} = useSelect( ( select ) => {
+		const {
+			getCurrentPostId,
+			getCurrentPostType,
+			getCurrentTemplateId,
+			getEditorSettings,
+			getRenderingMode,
+			getDeviceType,
+		} = select( editorStore );
+		const { getPostType, getEditedEntityRecord } = select( coreStore );
+		const postTypeSlug = getCurrentPostType();
+		const _renderingMode = getRenderingMode();
+		let _wrapperBlockName;
+
+		if ( postTypeSlug === PATTERN_POST_TYPE ) {
+			_wrapperBlockName = 'core/block';
+		} else if ( _renderingMode === 'post-only' ) {
+			_wrapperBlockName = 'core/post-content';
+		}
+
+		const editorSettings = getEditorSettings();
+		const supportsTemplateMode = editorSettings.supportsTemplateMode;
+		const postTypeObject = getPostType( postTypeSlug );
+		const currentTemplateId = getCurrentTemplateId();
+		const template = currentTemplateId
+			? getEditedEntityRecord(
+					'postType',
+					TEMPLATE_POST_TYPE,
+					currentTemplateId
+			  )
+			: undefined;
+
+		return {
+			renderingMode: _renderingMode,
+			postContentAttributes: editorSettings.postContentAttributes,
+			isDesignPostType: DESIGN_POST_TYPES.includes( postTypeSlug ),
+			// Post template fetch returns a 404 on classic themes, which
+			// messes with e2e tests, so check it's a block theme first.
+			editedPostTemplate:
+				postTypeObject?.viewable && supportsTemplateMode
+					? template
+					: undefined,
+			wrapperBlockName: _wrapperBlockName,
+			wrapperUniqueId: getCurrentPostId(),
+			deviceType: getDeviceType(),
+			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
+			postType: postTypeSlug,
+			isPreview: editorSettings.isPreviewMode,
+		};
+	}, [] );
+	const { isCleanNewPost } = useSelect( editorStore );
+	const {
+		hasRootPaddingAwareAlignments,
+		themeHasDisabledLayoutStyles,
+		themeSupportsLayout,
+		isZoomedOut,
+	} = useSelect( ( select ) => {
+		const { getSettings, isZoomOut: _isZoomOut } = unlock(
+			select( blockEditorStore )
+		);
+
+		const _settings = getSettings();
+		return {
+			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
+			themeSupportsLayout: _settings.supportsLayout,
+			hasRootPaddingAwareAlignments:
+				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			isZoomedOut: _isZoomOut(),
+		};
+	}, [] );
+
+	const deviceStyles = useResizeCanvas( deviceType );
+	const [ globalLayoutSettings ] = useSettings( 'layout' );
+
+	// fallbackLayout is used if there is no Post Content,
+	// and for Post Title.
+	const fallbackLayout = useMemo( () => {
+		if ( renderingMode !== 'post-only' || isDesignPostType ) {
+			return { type: 'default' };
+		}
+
+		if ( themeSupportsLayout ) {
+			// We need to ensure support for wide and full alignments,
+			// so we add the constrained type.
+			return { ...globalLayoutSettings, type: 'constrained' };
+		}
+		// Set default layout for classic themes so all alignments are supported.
+		return { type: 'default' };
+	}, [
+		renderingMode,
+		themeSupportsLayout,
+		globalLayoutSettings,
+		isDesignPostType,
+	] );
+
+	const newestPostContentAttributes = useMemo( () => {
+		if (
+			! editedPostTemplate?.content &&
+			! editedPostTemplate?.blocks &&
+			postContentAttributes
+		) {
+			return postContentAttributes;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return getPostContentAttributes( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return getPostContentAttributes( parse( parseableContent ) ) || {};
+	}, [
+		editedPostTemplate?.content,
+		editedPostTemplate?.blocks,
+		postContentAttributes,
+	] );
+
+	const hasPostContentAtRootLevel = useMemo( () => {
+		if ( ! editedPostTemplate?.content && ! editedPostTemplate?.blocks ) {
+			return false;
+		}
+		// When in template editing mode, we can access the blocks directly.
+		if ( editedPostTemplate?.blocks ) {
+			return checkForPostContentAtRootLevel( editedPostTemplate?.blocks );
+		}
+		// If there are no blocks, we have to parse the content string.
+		// Best double-check it's a string otherwise the parse function gets unhappy.
+		const parseableContent =
+			typeof editedPostTemplate?.content === 'string'
+				? editedPostTemplate?.content
+				: '';
+
+		return (
+			checkForPostContentAtRootLevel( parse( parseableContent ) ) || false
+		);
+	}, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] );
+
+	const { layout = {}, align = '' } = newestPostContentAttributes || {};
+
+	const postContentLayoutClasses = useLayoutClasses(
+		newestPostContentAttributes,
+		'core/post-content'
+	);
+
+	const blockListLayoutClass = clsx(
+		{
+			'is-layout-flow': ! themeSupportsLayout,
+		},
+		themeSupportsLayout && postContentLayoutClasses,
+		align && `align${ align }`
+	);
+
+	const postContentLayoutStyles = useLayoutStyles(
+		newestPostContentAttributes,
+		'core/post-content',
+		'.block-editor-block-list__layout.is-root-container'
+	);
+
+	// Update type for blocks using legacy layouts.
+	const postContentLayout = useMemo( () => {
+		return layout &&
+			( layout?.type === 'constrained' ||
+				layout?.inherit ||
+				layout?.contentSize ||
+				layout?.wideSize )
+			? { ...globalLayoutSettings, ...layout, type: 'constrained' }
+			: { ...globalLayoutSettings, ...layout, type: 'default' };
+	}, [
+		layout?.type,
+		layout?.inherit,
+		layout?.contentSize,
+		layout?.wideSize,
+		globalLayoutSettings,
+	] );
+
+	// If there is a Post Content block we use its layout for the block list;
+	// if not, this must be a classic theme, in which case we use the fallback layout.
+	const blockListLayout = postContentAttributes
+		? postContentLayout
+		: fallbackLayout;
+
+	const postEditorLayout =
+		blockListLayout?.type === 'default' && ! hasPostContentAtRootLevel
+			? fallbackLayout
+			: blockListLayout;
+	const observeTypingRef = useTypingObserver();
+	const titleRef = useRef();
+	useEffect( () => {
+		if ( ! autoFocus || ! isCleanNewPost() ) {
+			return;
+		}
+		titleRef?.current?.focus();
+	}, [ autoFocus, isCleanNewPost ] );
+
+	// Add some styles for alignwide/alignfull Post Content and its children.
+	const alignCSS = `.is-root-container.alignwide { max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;}
+		.is-root-container.alignwide:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: var(--wp--style--global--wide-size);}
+		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
+		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
+
+	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
+	const enableResizing =
+		[
+			NAVIGATION_POST_TYPE,
+			TEMPLATE_PART_POST_TYPE,
+			PATTERN_POST_TYPE,
+		].includes( postType ) &&
+		// Disable in previews / view mode.
+		! isPreview &&
+		// Disable resizing in mobile viewport.
+		! isMobileViewport &&
+		// Dsiable resizing in zoomed-out mode.
+		! isZoomedOut;
+
+	const iframeStyles = useMemo( () => {
+		return [
+			...( styles ?? [] ),
+			{
+				// Ensures margins of children are contained so that the body background paints behind them.
+				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
+				// important mostly for post-only views yet conceivably an issue in templated views too.
+				css: `:where(.block-editor-iframe__body){display:flow-root;}.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}`,
+			},
+		];
+	}, [ styles, enableResizing ] );
+
+	const localRef = useRef();
+	const typewriterRef = useTypewriter();
+	contentRef = useMergeRefs( [
+		localRef,
+		contentRef,
+		renderingMode === 'post-only' ? typewriterRef : null,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useZoomOutModeExit(),
+		// Avoid resize listeners when not needed, these will trigger
+		// unnecessary re-renders when animating the iframe width.
+		enableResizing ? effectContentHeight : null,
+	] );
+
+	return (
+		<div
+			className={ clsx(
+				'editor-visual-editor',
+				// this class is here for backward compatibility reasons.
+				'edit-post-visual-editor',
+				className,
+				{
+					'has-padding': isFocusedEntity || enableResizing,
+					'is-resizable': enableResizing,
+					'is-iframed': ! disableIframe,
+					'is-scrollable': disableIframe || deviceType !== 'Desktop',
+				}
+			) }
+		>
+			<ResizableEditor
+				enableResizing={ enableResizing }
+				height={
+					contentHeight && ! forceFullHeight ? contentHeight : '100%'
+				}
+			>
+				<BlockCanvas
+					shouldIframe={ ! disableIframe }
+					contentRef={ contentRef }
+					styles={ iframeStyles }
+					height="100%"
+					iframeProps={ {
+						...iframeProps,
+						style: {
+							...iframeProps?.style,
+							...deviceStyles,
+						},
+					} }
+				>
+					{ themeSupportsLayout &&
+						! themeHasDisabledLayoutStyles &&
+						renderingMode === 'post-only' &&
+						! isDesignPostType && (
+							<>
+								<LayoutStyle
+									selector=".editor-visual-editor__post-title-wrapper"
+									layout={ fallbackLayout }
+								/>
+								<LayoutStyle
+									selector=".block-editor-block-list__layout.is-root-container"
+									layout={ postEditorLayout }
+								/>
+								{ align && <LayoutStyle css={ alignCSS } /> }
+								{ postContentLayoutStyles && (
+									<LayoutStyle
+										layout={ postContentLayout }
+										css={ postContentLayoutStyles }
+									/>
+								) }
+							</>
+						) }
+					{ renderingMode === 'post-only' && ! isDesignPostType && (
+						<div
+							className={ clsx(
+								'editor-visual-editor__post-title-wrapper',
+								// The following class is only here for backward comapatibility
+								// some themes might be using it to style the post title.
+								'edit-post-visual-editor__post-title-wrapper',
+								{
+									'has-global-padding':
+										hasRootPaddingAwareAlignments,
+								}
+							) }
+							contentEditable={ false }
+							ref={ observeTypingRef }
+							style={ {
+								// This is using inline styles
+								// so it's applied for both iframed and non iframed editors.
+								marginTop: '4rem',
+							} }
+						>
+							<PostTitle ref={ titleRef } />
+						</div>
+					) }
+					<RecursionProvider
+						blockName={ wrapperBlockName }
+						uniqueId={ wrapperUniqueId }
+					>
+						<BlockList
+							className={ clsx(
+								'is-' + deviceType.toLowerCase() + '-preview',
+								renderingMode !== 'post-only' ||
+									isDesignPostType
+									? 'wp-site-blocks'
+									: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
+								{
+									'has-global-padding':
+										renderingMode === 'post-only' &&
+										! isDesignPostType &&
+										hasRootPaddingAwareAlignments,
+								}
+							) }
+							layout={ blockListLayout }
+							dropZoneElement={
+								// When iframed, pass in the html element of the iframe to
+								// ensure the drop zone extends to the edges of the iframe.
+								disableIframe
+									? localRef.current
+									: localRef.current?.parentNode
+							}
+							__unstableDisableDropZone={
+								// In template preview mode, disable drop zones at the root of the template.
+								renderingMode === 'template-locked'
+									? true
+									: false
+							}
+						/>
+						{ renderingMode === 'template-locked' && (
+							<EditTemplateBlocksNotification
+								contentRef={ localRef }
+							/>
+						) }
+					</RecursionProvider>
+				</BlockCanvas>
+			</ResizableEditor>
+		</div>
+	);
+}
+
+export default VisualEditor;
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
new file mode 100644
index 00000000000000..04ca0215e4fc66
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -0,0 +1,70 @@
+.editor-visual-editor {
+	position: relative;
+	display: flex;
+
+	// This duplicates the iframe background but it's necessary in some situations
+	// when the iframe doesn't cover the whole canvas
+	// like the "focused entities".
+	background-color: $gray-300;
+	// Allows the height to fit the parent container and avoids parent scrolling contexts from
+	// having overflow due to popovers of block tools.
+	overflow: hidden;
+
+	// This overrides the iframe background since it's applied again here
+	// It also prevents some style glitches if `editor-visual-editor`
+	// like when hovering the preview in the site editor.
+	iframe[name="editor-canvas"] {
+		background-color: transparent;
+	}
+
+	// Centralize the editor horizontally (flex-direction is column).
+	align-items: center;
+
+	&.is-resizable {
+		max-height: 100%;
+	}
+
+	&.has-padding {
+		padding: $grid-unit-30 $grid-unit-30 0;
+	}
+
+	// The button element easily inherits styles that are meant for the editor style.
+	// These rules enhance the specificity to reduce that inheritance.
+	// This is duplicated in edit-site.
+	& .components-button {
+		font-family: $default-font;
+		font-size: $default-font-size;
+		padding: 6px 12px;
+
+		&.is-tertiary,
+		&.has-icon {
+			padding: 6px;
+		}
+	}
+
+	// The cases for this are non-iframed editor canvas or previewing devices. The block canvas is
+	// made the scrolling context.
+	&.is-scrollable .block-editor-block-canvas {
+		overflow: auto;
+
+		// Applicable only when legacy (non-iframed).
+		> .block-editor-writing-flow {
+			display: flow-root;
+			min-height: 100%;
+			box-sizing: border-box; // Ensures that 100% min-height doesn’t create overflow.
+		}
+
+		// Applicable only when iframed. These styles ensure that if the the iframe is
+		// given a fixed height and it’s taller than the viewport then scrolling is
+		// allowed. This is needed for device previews.
+		> .block-editor-iframe__container {
+			display: flex;
+			flex-direction: column;
+
+			> .block-editor-iframe__scale-container {
+				flex: 1 0 fit-content;
+				display: flow-root;
+			}
+		}
+	}
+}
diff --git a/packages/editor/src/components/visual-editor/use-select-nearest-editable-block.js b/packages/editor/src/components/visual-editor/use-select-nearest-editable-block.js
new file mode 100644
index 00000000000000..5cc84cb7fb5037
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/use-select-nearest-editable-block.js
@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const DISTANCE_THRESHOLD = 500;
+
+function clamp( value, min, max ) {
+	return Math.min( Math.max( value, min ), max );
+}
+
+function distanceFromRect( x, y, rect ) {
+	const dx = x - clamp( x, rect.left, rect.right );
+	const dy = y - clamp( y, rect.top, rect.bottom );
+	return Math.sqrt( dx * dx + dy * dy );
+}
+
+export default function useSelectNearestEditableBlock( {
+	isEnabled = true,
+} = {} ) {
+	const { getEnabledClientIdsTree, getBlockName, getBlockOrder } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			const selectNearestEditableBlock = ( x, y ) => {
+				const editableBlockClientIds =
+					getEnabledClientIdsTree().flatMap( ( { clientId } ) => {
+						const blockName = getBlockName( clientId );
+						if ( blockName === 'core/template-part' ) {
+							return [];
+						}
+						if ( blockName === 'core/post-content' ) {
+							const innerBlocks = getBlockOrder( clientId );
+							if ( innerBlocks.length ) {
+								return innerBlocks;
+							}
+						}
+						return [ clientId ];
+					} );
+
+				let nearestDistance = Infinity,
+					nearestClientId = null;
+
+				for ( const clientId of editableBlockClientIds ) {
+					const block = element.querySelector(
+						`[data-block="${ clientId }"]`
+					);
+					if ( ! block ) {
+						continue;
+					}
+					const rect = block.getBoundingClientRect();
+					const distance = distanceFromRect( x, y, rect );
+					if (
+						distance < nearestDistance &&
+						distance < DISTANCE_THRESHOLD
+					) {
+						nearestDistance = distance;
+						nearestClientId = clientId;
+					}
+				}
+
+				if ( nearestClientId ) {
+					selectBlock( nearestClientId );
+				}
+			};
+
+			const handleClick = ( event ) => {
+				const shouldSelect =
+					event.target === element ||
+					event.target.classList.contains( 'is-root-container' );
+				if ( shouldSelect ) {
+					selectNearestEditableBlock( event.clientX, event.clientY );
+				}
+			};
+
+			element.addEventListener( 'click', handleClick );
+			return () => element.removeEventListener( 'click', handleClick );
+		},
+		[ isEnabled ]
+	);
+}
diff --git a/packages/editor/src/components/visual-editor/use-zoom-out-mode-exit.js b/packages/editor/src/components/visual-editor/use-zoom-out-mode-exit.js
new file mode 100644
index 00000000000000..5a2bb49dbb832e
--- /dev/null
+++ b/packages/editor/src/components/visual-editor/use-zoom-out-mode-exit.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Allows Zoom Out mode to be exited by double clicking in the selected block.
+ */
+export function useZoomOutModeExit() {
+	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	return useRefEffect(
+		( node ) => {
+			function onDoubleClick( event ) {
+				if ( ! isZoomOut() ) {
+					return;
+				}
+
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
+					resetZoomLevel();
+				}
+			}
+
+			node.addEventListener( 'dblclick', onDoubleClick );
+
+			return () => {
+				node.removeEventListener( 'dblclick', onDoubleClick );
+			};
+		},
+		[ getSettings, isZoomOut, resetZoomLevel ]
+	);
+}
diff --git a/packages/editor/src/components/word-count/index.js b/packages/editor/src/components/word-count/index.js
index 1aad38d62132d0..31eb4d6bfd8c35 100644
--- a/packages/editor/src/components/word-count/index.js
+++ b/packages/editor/src/components/word-count/index.js
@@ -10,6 +10,11 @@ import { count as wordCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the word count of the post content.
+ *
+ * @return {React.ReactNode} The rendered WordCount component.
+ */
 export default function WordCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
new file mode 100644
index 00000000000000..2646898a066fb9
--- /dev/null
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { square as zoomOutIcon } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const ZoomOutToggle = ( { disabled } ) => {
+	const { isZoomOut, showIconLabels, isDistractionFree } = useSelect(
+		( select ) => ( {
+			isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core',
+				'distractionFree'
+			),
+		} )
+	);
+
+	const { resetZoomLevel, setZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/zoom',
+			category: 'global',
+			description: __( 'Enter or exit zoom out.' ),
+			keyCombination: {
+				// `primaryShift+0` (`ctrl+shift+0`) is the shortcut for switching
+				// to input mode in Windows, so apply a different key combination.
+				modifier: isAppleOS() ? 'primaryShift' : 'secondary',
+				character: '0',
+			},
+		} );
+		return () => {
+			unregisterShortcut( 'core/editor/zoom' );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut(
+		'core/editor/zoom',
+		() => {
+			if ( isZoomOut ) {
+				resetZoomLevel();
+			} else {
+				setZoomLevel( 'auto-scaled' );
+			}
+		},
+		{
+			isDisabled: isDistractionFree,
+		}
+	);
+
+	const handleZoomOut = () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 'auto-scaled' );
+		}
+	};
+
+	return (
+		<Button
+			accessibleWhenDisabled
+			disabled={ disabled }
+			onClick={ handleZoomOut }
+			icon={ zoomOutIcon }
+			label={ __( 'Zoom Out' ) }
+			isPressed={ isZoomOut }
+			size="compact"
+			showTooltip={ ! showIconLabels }
+			className="editor-zoom-out-toggle"
+		/>
+	);
+};
+
+export default ZoomOutToggle;
diff --git a/packages/editor/src/dataviews/api.js b/packages/editor/src/dataviews/api.js
new file mode 100644
index 00000000000000..e03b9ef35ac758
--- /dev/null
+++ b/packages/editor/src/dataviews/api.js
@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import { store as editorStore } from '../store';
+
+/**
+ * @typedef {import('@wordpress/dataviews').Action} Action
+ * @typedef {import('@wordpress/dataviews').Field} Field
+ */
+
+/**
+ * Registers a new DataViews action.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind   Entity kind.
+ * @param {string} name   Entity name.
+ * @param {Action} config Action configuration.
+ */
+
+export function registerEntityAction( kind, name, config ) {
+	const { registerEntityAction: _registerEntityAction } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_registerEntityAction( kind, name, config );
+	}
+}
+
+/**
+ * Unregisters a DataViews action.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind     Entity kind.
+ * @param {string} name     Entity name.
+ * @param {string} actionId Action ID.
+ */
+export function unregisterEntityAction( kind, name, actionId ) {
+	const { unregisterEntityAction: _unregisterEntityAction } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_unregisterEntityAction( kind, name, actionId );
+	}
+}
+
+/**
+ * Registers a new DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind   Entity kind.
+ * @param {string} name   Entity name.
+ * @param {Field}  config Field configuration.
+ */
+export function registerEntityField( kind, name, config ) {
+	const { registerEntityField: _registerEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_registerEntityField( kind, name, config );
+	}
+}
+
+/**
+ * Unregisters a DataViews field.
+ *
+ * This is an experimental API and is subject to change.
+ * it's only available in the Gutenberg plugin for now.
+ *
+ * @param {string} kind    Entity kind.
+ * @param {string} name    Entity name.
+ * @param {string} fieldId Field ID.
+ */
+export function unregisterEntityField( kind, name, fieldId ) {
+	const { unregisterEntityField: _unregisterEntityField } = unlock(
+		dispatch( editorStore )
+	);
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		_unregisterEntityField( kind, name, fieldId );
+	}
+}
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
new file mode 100644
index 00000000000000..2119b52756e964
--- /dev/null
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -0,0 +1,211 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import type { Action, Field } from '@wordpress/dataviews';
+import { doAction } from '@wordpress/hooks';
+import type { PostType } from '@wordpress/fields';
+import {
+	viewPost,
+	viewPostRevisions,
+	duplicatePost,
+	duplicatePattern,
+	reorderPage,
+	exportPattern,
+	permanentlyDeletePost,
+	restorePost,
+	trashPost,
+	renamePost,
+	resetPost,
+	deletePost,
+	duplicateTemplatePart,
+	featuredImageField,
+	dateField,
+	parentField,
+	passwordField,
+	commentStatusField,
+	slugField,
+	statusField,
+	authorField,
+	titleField,
+	templateField,
+	templateTitleField,
+	pageTitleField,
+	patternTitleField,
+} from '@wordpress/fields';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function registerEntityAction< Item >(
+	kind: string,
+	name: string,
+	config: Action< Item >
+) {
+	return {
+		type: 'REGISTER_ENTITY_ACTION' as const,
+		kind,
+		name,
+		config,
+	};
+}
+
+export function unregisterEntityAction(
+	kind: string,
+	name: string,
+	actionId: string
+) {
+	return {
+		type: 'UNREGISTER_ENTITY_ACTION' as const,
+		kind,
+		name,
+		actionId,
+	};
+}
+
+export function registerEntityField< Item >(
+	kind: string,
+	name: string,
+	config: Field< Item >
+) {
+	return {
+		type: 'REGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		config,
+	};
+}
+
+export function unregisterEntityField(
+	kind: string,
+	name: string,
+	fieldId: string
+) {
+	return {
+		type: 'UNREGISTER_ENTITY_FIELD' as const,
+		kind,
+		name,
+		fieldId,
+	};
+}
+
+export function setIsReady( kind: string, name: string ) {
+	return {
+		type: 'SET_IS_READY' as const,
+		kind,
+		name,
+	};
+}
+
+export const registerPostTypeSchema =
+	( postType: string ) =>
+	async ( { registry }: { registry: any } ) => {
+		const isReady = unlock( registry.select( editorStore ) ).isEntityReady(
+			'postType',
+			postType
+		);
+		if ( isReady ) {
+			return;
+		}
+
+		unlock( registry.dispatch( editorStore ) ).setIsReady(
+			'postType',
+			postType
+		);
+
+		const postTypeConfig = ( await registry
+			.resolveSelect( coreStore )
+			.getPostType( postType ) ) as PostType;
+
+		const canCreate = await registry
+			.resolveSelect( coreStore )
+			.canUser( 'create', {
+				kind: 'postType',
+				name: postType,
+			} );
+		const currentTheme = await registry
+			.resolveSelect( coreStore )
+			.getCurrentTheme();
+
+		const actions = [
+			postTypeConfig.viewable ? viewPost : undefined,
+			!! postTypeConfig.supports?.revisions
+				? viewPostRevisions
+				: undefined,
+			// @ts-ignore
+			globalThis.IS_GUTENBERG_PLUGIN
+				? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes(
+						postTypeConfig.slug
+				  ) &&
+				  canCreate &&
+				  duplicatePost
+				: undefined,
+			postTypeConfig.slug === 'wp_template_part' &&
+			canCreate &&
+			currentTheme?.is_block_theme
+				? duplicateTemplatePart
+				: undefined,
+			canCreate && postTypeConfig.slug === 'wp_block'
+				? duplicatePattern
+				: undefined,
+			postTypeConfig.supports?.title ? renamePost : undefined,
+			postTypeConfig.supports?.[ 'page-attributes' ]
+				? reorderPage
+				: undefined,
+			postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
+			restorePost,
+			resetPost,
+			deletePost,
+			trashPost,
+			permanentlyDeletePost,
+		].filter( Boolean );
+
+		const fields = [
+			postTypeConfig.supports?.thumbnail &&
+				currentTheme?.theme_supports?.[ 'post-thumbnails' ] &&
+				featuredImageField,
+			postTypeConfig.supports?.author && authorField,
+			statusField,
+			dateField,
+			slugField,
+			postTypeConfig.supports?.[ 'page-attributes' ] && parentField,
+			postTypeConfig.supports?.comments && commentStatusField,
+			templateField,
+			passwordField,
+		].filter( Boolean );
+		if ( postTypeConfig.supports?.title ) {
+			let _titleField;
+			if ( postType === 'page' ) {
+				_titleField = pageTitleField;
+			} else if ( postType === 'wp_template' ) {
+				_titleField = templateTitleField;
+			} else if ( postType === 'wp_block' ) {
+				_titleField = patternTitleField;
+			} else {
+				_titleField = titleField;
+			}
+			fields.push( _titleField );
+		}
+
+		registry.batch( () => {
+			actions.forEach( ( action ) => {
+				unlock( registry.dispatch( editorStore ) ).registerEntityAction(
+					'postType',
+					postType,
+					action
+				);
+			} );
+			fields.forEach( ( field ) => {
+				unlock( registry.dispatch( editorStore ) ).registerEntityField(
+					'postType',
+					postType,
+					field
+				);
+			} );
+		} );
+
+		doAction( 'core.registerPostTypeSchema', postType );
+	};
diff --git a/packages/editor/src/dataviews/store/private-selectors.ts b/packages/editor/src/dataviews/store/private-selectors.ts
new file mode 100644
index 00000000000000..e1daeb4032fc21
--- /dev/null
+++ b/packages/editor/src/dataviews/store/private-selectors.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { State } from './reducer';
+
+const EMPTY_ARRAY = [] as [];
+
+export function getEntityActions( state: State, kind: string, name: string ) {
+	return state.actions[ kind ]?.[ name ] ?? EMPTY_ARRAY;
+}
+
+export function getEntityFields( state: State, kind: string, name: string ) {
+	return state.fields[ kind ]?.[ name ] ?? EMPTY_ARRAY;
+}
+
+export function isEntityReady( state: State, kind: string, name: string ) {
+	return state.isReady[ kind ]?.[ name ];
+}
diff --git a/packages/editor/src/dataviews/store/reducer.ts b/packages/editor/src/dataviews/store/reducer.ts
new file mode 100644
index 00000000000000..94d7f2e6c4f190
--- /dev/null
+++ b/packages/editor/src/dataviews/store/reducer.ts
@@ -0,0 +1,107 @@
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+import type { Action, Field } from '@wordpress/dataviews';
+
+type ReduxAction =
+	| ReturnType< typeof import('./private-actions').registerEntityAction >
+	| ReturnType< typeof import('./private-actions').unregisterEntityAction >
+	| ReturnType< typeof import('./private-actions').registerEntityField >
+	| ReturnType< typeof import('./private-actions').unregisterEntityField >
+	| ReturnType< typeof import('./private-actions').setIsReady >;
+
+export type ActionState = Record< string, Record< string, Action< any >[] > >;
+export type FieldsState = Record< string, Record< string, Field< any >[] > >;
+export type ReadyState = Record< string, Record< string, boolean > >;
+export type State = {
+	actions: ActionState;
+	fields: FieldsState;
+	isReady: ReadyState;
+};
+
+function isReady( state: ReadyState = {}, action: ReduxAction ) {
+	switch ( action.type ) {
+		case 'SET_IS_READY':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: true,
+				},
+			};
+	}
+
+	return state;
+}
+
+function actions( state: ActionState = {}, action: ReduxAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_ENTITY_ACTION':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: [
+						...(
+							state[ action.kind ]?.[ action.name ] ?? []
+						).filter(
+							( _action ) => _action.id !== action.config.id
+						),
+						action.config,
+					],
+				},
+			};
+		case 'UNREGISTER_ENTITY_ACTION': {
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: (
+						state[ action.kind ]?.[ action.name ] ?? []
+					).filter( ( _action ) => _action.id !== action.actionId ),
+				},
+			};
+		}
+	}
+
+	return state;
+}
+
+function fields( state: FieldsState = {}, action: ReduxAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_ENTITY_FIELD':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: [
+						...(
+							state[ action.kind ]?.[ action.name ] ?? []
+						).filter(
+							( _field ) => _field.id !== action.config.id
+						),
+						action.config,
+					],
+				},
+			};
+		case 'UNREGISTER_ENTITY_FIELD':
+			return {
+				...state,
+				[ action.kind ]: {
+					...state[ action.kind ],
+					[ action.name ]: (
+						state[ action.kind ]?.[ action.name ] ?? []
+					).filter( ( _field ) => _field.id !== action.fieldId ),
+				},
+			};
+	}
+
+	return state;
+}
+
+export default combineReducers( {
+	actions,
+	fields,
+	isReady,
+} );
diff --git a/packages/editor/src/hooks/custom-sources-backwards-compatibility.js b/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
index 3d90a19a268070..c5347bc6c25213 100644
--- a/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
+++ b/packages/editor/src/hooks/custom-sources-backwards-compatibility.js
@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import { pickBy, mapValues, isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
-import { select as globalSelect, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEntityProp } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -57,9 +51,13 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
 				const mergedAttributes = useMemo(
 					() => ( {
 						...attributes,
-						...mapValues(
-							metaAttributes,
-							( metaKey ) => meta[ metaKey ]
+						...Object.fromEntries(
+							Object.entries( metaAttributes ).map(
+								( [ attributeKey, metaKey ] ) => [
+									attributeKey,
+									meta[ metaKey ],
+								]
+							)
 						),
 					} ),
 					[ attributes, meta ]
@@ -70,21 +68,20 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
 						attributes={ mergedAttributes }
 						setAttributes={ ( nextAttributes ) => {
 							const nextMeta = Object.fromEntries(
-								Object.entries(
-									// Filter to intersection of keys between the updated
-									// attributes and those with an associated meta key.
-									pickBy(
-										nextAttributes,
-										( value, key ) => metaAttributes[ key ]
+								Object.entries( nextAttributes ?? {} )
+									.filter(
+										// Filter to intersection of keys between the updated
+										// attributes and those with an associated meta key.
+										( [ key ] ) => key in metaAttributes
 									)
-								).map( ( [ attributeKey, value ] ) => [
-									// Rename the keys to the expected meta key name.
-									metaAttributes[ attributeKey ],
-									value,
-								] )
+									.map( ( [ attributeKey, value ] ) => [
+										// Rename the keys to the expected meta key name.
+										metaAttributes[ attributeKey ],
+										value,
+									] )
 							);
 
-							if ( ! isEmpty( nextMeta ) ) {
+							if ( Object.entries( nextMeta ).length ) {
 								setMeta( nextMeta );
 							}
 
@@ -107,11 +104,12 @@ const createWithMetaAttributeSource = ( metaAttributes ) =>
  */
 function shimAttributeSource( settings ) {
 	/** @type {WPMetaAttributeMapping} */
-	const metaAttributes = mapValues(
-		pickBy( settings.attributes, { source: 'meta' } ),
-		'meta'
+	const metaAttributes = Object.fromEntries(
+		Object.entries( settings.attributes ?? {} )
+			.filter( ( [ , { source } ] ) => source === 'meta' )
+			.map( ( [ attributeKey, { meta } ] ) => [ attributeKey, meta ] )
 	);
-	if ( ! isEmpty( metaAttributes ) ) {
+	if ( Object.entries( metaAttributes ).length ) {
 		settings.edit = createWithMetaAttributeSource( metaAttributes )(
 			settings.edit
 		);
@@ -125,26 +123,3 @@ addFilter(
 	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
 	shimAttributeSource
 );
-
-// The above filter will only capture blocks registered after the filter was
-// added. There may already be blocks registered by this point, and those must
-// be updated to apply the shim.
-//
-// The following implementation achieves this, albeit with a couple caveats:
-// - Only blocks registered on the global store will be modified.
-// - The block settings are directly mutated, since there is currently no
-//   mechanism to update an existing block registration. This is the reason for
-//   `getBlockType` separate from `getBlockTypes`, since the latter returns a
-//   _copy_ of the block registration (i.e. the mutation would not affect the
-//   actual registered block settings).
-//
-// `getBlockTypes` or `getBlockType` implementation could change in the future
-// in regards to creating settings clones, but the corresponding end-to-end
-// tests for meta blocks should cover against any potential regressions.
-//
-// In the future, we could support updating block settings, at which point this
-// implementation could use that mechanism instead.
-globalSelect( blocksStore )
-	.getBlockTypes()
-	.map( ( { name } ) => globalSelect( blocksStore ).getBlockType( name ) )
-	.forEach( shimAttributeSource );
diff --git a/packages/editor/src/hooks/default-autocompleters.js b/packages/editor/src/hooks/default-autocompleters.js
index 7bbf5382b09ca8..39f7099a6c5224 100644
--- a/packages/editor/src/hooks/default-autocompleters.js
+++ b/packages/editor/src/hooks/default-autocompleters.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { clone } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +10,7 @@ import { userAutocompleter } from '../components';
 
 function setDefaultCompleters( completers = [] ) {
 	// Provide copies so filters may directly modify them.
-	completers.push( clone( userAutocompleter ) );
+	completers.push( { ...userAutocompleter } );
 
 	return completers;
 }
diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js
index 6e0934d63c0cfa..6001d53f65c103 100644
--- a/packages/editor/src/hooks/index.js
+++ b/packages/editor/src/hooks/index.js
@@ -3,3 +3,5 @@
  */
 import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
+import './media-upload';
+import './pattern-overrides';
diff --git a/packages/editor/src/hooks/media-upload.js b/packages/editor/src/hooks/media-upload.js
new file mode 100644
index 00000000000000..311ec4ec5eec1c
--- /dev/null
+++ b/packages/editor/src/hooks/media-upload.js
@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { MediaUpload } from '@wordpress/media-utils';
+
+addFilter(
+	'editor.MediaUpload',
+	'core/editor/components/media-upload',
+	() => MediaUpload
+);
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
new file mode 100644
index 00000000000000..8882856a89e0d9
--- /dev/null
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useBlockEditingMode } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockBindingsSource } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+const {
+	PatternOverridesControls,
+	ResetOverridesControl,
+	PatternOverridesBlockControls,
+	PATTERN_TYPES,
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+	PATTERN_SYNC_TYPES,
+} = unlock( patternsPrivateApis );
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning a partial syncing controls to supported blocks in the pattern editor.
+ * Currently, only the `core/paragraph` block is supported.
+ *
+ * @param {Component} BlockEdit Original component.
+ *
+ * @return {Component} Wrapped component.
+ */
+const withPatternOverrideControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const isSupportedBlock =
+			!! PARTIAL_SYNCING_SUPPORTED_BLOCKS[ props.name ];
+
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{ props.isSelected && isSupportedBlock && (
+					<ControlsWithStoreSubscription { ...props } />
+				) }
+				{ isSupportedBlock && <PatternOverridesBlockControls /> }
+			</>
+		);
+	},
+	'withPatternOverrideControls'
+);
+
+// Split into a separate component to avoid a store subscription
+// on every block.
+function ControlsWithStoreSubscription( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, getEditedPostAttribute } =
+				select( editorStore );
+
+			return {
+				// For editing link to the site editor if the theme and user permissions support it.
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
+				isEditingSyncedPattern:
+					getCurrentPostType() === PATTERN_TYPES.user &&
+					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status !==
+						PATTERN_SYNC_TYPES.unsynced &&
+					getEditedPostAttribute( 'wp_pattern_sync_status' ) !==
+						PATTERN_SYNC_TYPES.unsynced,
+			};
+		},
+		[]
+	);
+
+	const bindings = props.attributes.metadata?.bindings;
+	const hasPatternBindings =
+		!! bindings &&
+		Object.values( bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
+
+	const shouldShowPatternOverridesControls =
+		isEditingSyncedPattern && blockEditingMode === 'default';
+	const shouldShowResetOverridesControl =
+		! isEditingSyncedPattern &&
+		!! props.attributes.metadata?.name &&
+		blockEditingMode !== 'disabled' &&
+		hasPatternBindings;
+
+	if ( ! hasPatternOverridesSource ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ shouldShowPatternOverridesControls && (
+				<PatternOverridesControls { ...props } />
+			) }
+			{ shouldShowResetOverridesControl && (
+				<ResetOverridesControl { ...props } />
+			) }
+		</>
+	);
+}
+
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/with-pattern-override-controls',
+	withPatternOverrideControls
+);
diff --git a/packages/editor/src/index.js b/packages/editor/src/index.js
index 31fe9a672a72d1..8d31a0b4ed4c4c 100644
--- a/packages/editor/src/index.js
+++ b/packages/editor/src/index.js
@@ -6,6 +6,8 @@ import './hooks';
 export { storeConfig, store } from './store';
 export * from './components';
 export * from './utils';
+export * from './private-apis';
+export * from './dataviews/api';
 
 /*
  * Backward compatibility
diff --git a/packages/editor/src/index.native.js b/packages/editor/src/index.native.js
index 35fcddf0b80030..73838682df87e1 100644
--- a/packages/editor/src/index.native.js
+++ b/packages/editor/src/index.native.js
@@ -13,3 +13,4 @@ import './hooks';
 export { store } from './store';
 export * from './components';
 export * from './utils';
+export * from './private-apis';
diff --git a/packages/editor/src/lock-unlock.js b/packages/editor/src/lock-unlock.js
new file mode 100644
index 00000000000000..a507ffe95e11d4
--- /dev/null
+++ b/packages/editor/src/lock-unlock.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/editor'
+	);
diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
new file mode 100644
index 00000000000000..11083eb6ab8a45
--- /dev/null
+++ b/packages/editor/src/private-apis.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { lock } from './lock-unlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
+import BackButton from './components/header/back-button';
+import Editor from './components/editor';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PostCardPanel from './components/post-card-panel';
+import PreferencesModal from './components/preferences-modal';
+import { usePostActions } from './components/post-actions/actions';
+import usePostFields from './components/post-fields';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+import ResizableEditor from './components/resizable-editor';
+import {
+	mergeBaseAndUserConfigs,
+	GlobalStylesProvider,
+} from './components/global-styles-provider';
+import { CreateTemplatePartModal } from '@wordpress/fields';
+import { registerCoreBlockBindingsSources } from './bindings/api';
+import { getTemplateInfo } from './utils/get-template-info';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
+export const privateApis = {};
+lock( privateApis, {
+	CreateTemplatePartModal,
+	BackButton,
+	EntitiesSavedStatesExtensible,
+	Editor,
+	EditorContentSlotFill,
+	GlobalStylesProvider,
+	mergeBaseAndUserConfigs,
+	PluginPostExcerpt,
+	PostCardPanel,
+	PreferencesModal,
+	usePostActions,
+	usePostFields,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+	ResizableEditor,
+	registerCoreBlockBindingsSources,
+	getTemplateInfo,
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	interfaceStore,
+	...remainingInterfaceApis,
+} );
diff --git a/packages/editor/src/private-apis.native.js b/packages/editor/src/private-apis.native.js
new file mode 100644
index 00000000000000..f466f98cbbee5a
--- /dev/null
+++ b/packages/editor/src/private-apis.native.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import VisualEditor from './components/visual-editor';
+import { lock } from './lock-unlock';
+import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useBlockEditorSettings from './components/provider/use-block-editor-settings';
+import PluginPostExcerpt from './components/post-excerpt/plugin';
+import PreferencesModal from './components/preferences-modal';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
+
+export const privateApis = {};
+lock( privateApis, {
+	VisualEditor,
+	EntitiesSavedStatesExtensible,
+	PluginPostExcerpt,
+	PreferencesModal,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+
+	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
+} );
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 390c19571542dc..9d0de08718cd2b 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import apiFetch from '@wordpress/api-fetch';
 import deprecated from '@wordpress/deprecated';
 import {
@@ -11,7 +12,13 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	applyFilters,
+	applyFiltersAsync,
+	doActionAsync,
+} from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -23,19 +30,19 @@ import {
 	getNotificationArgumentsForSaveFail,
 	getNotificationArgumentsForTrashFail,
 } from './utils/notice-builder';
-
+import { unlock } from '../lock-unlock';
 /**
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
  *
- * @param {Object} post     Post object.
- * @param {Object} edits    Initial edited attributes object.
- * @param {Array?} template Block Template.
+ * @param {Object} post       Post object.
+ * @param {Object} edits      Initial edited attributes object.
+ * @param {Array}  [template] Block Template.
  */
 export const setupEditor =
 	( post, edits, template ) =>
 	( { dispatch } ) => {
-		dispatch.setupEditorState( post );
+		dispatch.setEditedPost( post.type, post.id );
 		// Apply a template for new posts only, if exists.
 		const isNewPost = post.status === 'auto-draft';
 		if ( isNewPost && template ) {
@@ -69,10 +76,18 @@ export const setupEditor =
  * Returns an action object signalling that the editor is being destroyed and
  * that any necessary state or side-effect cleanup should occur.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function __experimentalTearDownEditor() {
-	return { type: 'TEAR_DOWN_EDITOR' };
+	deprecated(
+		"wp.data.dispatch( 'core/editor' ).__experimentalTearDownEditor",
+		{
+			since: '6.5',
+		}
+	);
+	return { type: 'DO_NOTHING' };
 }
 
 /**
@@ -108,17 +123,33 @@ export function updatePost() {
 }
 
 /**
- * Returns an action object used to setup the editor state when first opening
- * an editor.
+ * Setup the editor state.
+ *
+ * @deprecated
  *
  * @param {Object} post Post object.
+ */
+export function setupEditorState( post ) {
+	deprecated( "wp.data.dispatch( 'core/editor' ).setupEditorState", {
+		since: '6.5',
+		alternative: "wp.data.dispatch( 'core/editor' ).setEditedPost",
+	} );
+	return setEditedPost( post.type, post.id );
+}
+
+/**
+ * Returns an action that sets the current post Type and post ID.
+ *
+ * @param {string} postType Post Type.
+ * @param {string} postId   Post ID.
  *
  * @return {Object} Action object.
  */
-export function setupEditorState( post ) {
+export function setEditedPost( postType, postId ) {
 	return {
-		type: 'SETUP_EDITOR_STATE',
-		post,
+		type: 'SET_EDITED_POST',
+		postType,
+		postId,
 	};
 }
 
@@ -126,8 +157,31 @@ export function setupEditorState( post ) {
  * Returns an action object used in signalling that attributes of the post have
  * been edited.
  *
- * @param {Object} edits   Post attributes to edit.
- * @param {Object} options Options for the edit.
+ * @param {Object} edits     Post attributes to edit.
+ * @param {Object} [options] Options for the edit.
+ *
+ * @example
+ * ```js
+ * // Update the post title
+ * wp.data.dispatch( 'core/editor' ).editPost( { title: `${ newTitle }` } );
+ * ```
+ *
+ * @example
+ *```js
+ * 	// Get specific media size based on the featured media ID
+ * 	// Note: change sizes?.large for any registered size
+ * 	const getFeaturedMediaUrl = useSelect( ( select ) => {
+ * 		const getFeaturedMediaId =
+ * 			select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+ * 		const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+ *
+ * 		return (
+ * 			getMedia?.media_details?.sizes?.large?.source_url || getMedia?.source_url || ''
+ * 		);
+ * }, [] );
+ * ```
+ *
+ * @return {Object} Action object
  */
 export const editPost =
 	( edits, options ) =>
@@ -141,7 +195,7 @@ export const editPost =
 /**
  * Action for saving the current post in the editor.
  *
- * @param {Object} options
+ * @param {Object} [options]
  */
 export const savePost =
 	( options = {} ) =>
@@ -157,7 +211,7 @@ export const savePost =
 		}
 
 		const previousRecord = select.getCurrentPost();
-		const edits = {
+		let edits = {
 			id: previousRecord.id,
 			...registry
 				.select( coreStore )
@@ -169,23 +223,72 @@ export const savePost =
 			content,
 		};
 		dispatch( { type: 'REQUEST_POST_UPDATE_START', options } );
-		await registry
-			.dispatch( coreStore )
-			.saveEntityRecord(
-				'postType',
-				previousRecord.type,
+
+		let error = false;
+		try {
+			edits = await applyFiltersAsync(
+				'editor.preSavePost',
 				edits,
 				options
 			);
+		} catch ( err ) {
+			error = err;
+		}
+
+		if ( ! error ) {
+			try {
+				await registry
+					.dispatch( coreStore )
+					.saveEntityRecord(
+						'postType',
+						previousRecord.type,
+						edits,
+						options
+					);
+			} catch ( err ) {
+				error =
+					err.message && err.code !== 'unknown_error'
+						? err.message
+						: __( 'An error occurred while updating.' );
+			}
+		}
+
+		if ( ! error ) {
+			error = registry
+				.select( coreStore )
+				.getLastEntitySaveError(
+					'postType',
+					previousRecord.type,
+					previousRecord.id
+				);
+		}
+
+		// Run the hook with legacy unstable name for backward compatibility
+		if ( ! error ) {
+			try {
+				await applyFilters(
+					'editor.__unstableSavePost',
+					Promise.resolve(),
+					options
+				);
+			} catch ( err ) {
+				error = err;
+			}
+		}
+
+		if ( ! error ) {
+			try {
+				await doActionAsync(
+					'editor.savePost',
+					{ id: previousRecord.id },
+					options
+				);
+			} catch ( err ) {
+				error = err;
+			}
+		}
 		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
 
-		const error = registry
-			.select( coreStore )
-			.getLastEntitySaveError(
-				'postType',
-				previousRecord.type,
-				previousRecord.id
-			);
 		if ( error ) {
 			const args = getNotificationArgumentsForSaveFail( {
 				post: previousRecord,
@@ -272,13 +375,20 @@ export const trashPost =
  * autosaving (e.g. on the Web, the post might be committed to Session
  * Storage).
  *
- * @param {Object?} options Extra flags to identify the autosave.
+ * @param {Object}  [options]       Extra flags to identify the autosave.
+ * @param {boolean} [options.local] Whether to perform a local autosave.
  */
 export const autosave =
 	( { local = false, ...options } = {} ) =>
 	async ( { select, dispatch } ) => {
+		const post = select.getCurrentPost();
+
+		// Currently template autosaving is not supported.
+		if ( post.type === 'wp_template' ) {
+			return;
+		}
+
 		if ( local ) {
-			const post = select.getCurrentPost();
 			const isPostNew = select.isEditedPostNew();
 			const title = select.getEditedPostAttribute( 'title' );
 			const content = select.getEditedPostAttribute( 'content' );
@@ -289,6 +399,26 @@ export const autosave =
 		}
 	};
 
+export const __unstableSaveForPreview =
+	( { forceIsAutosaveable } = {} ) =>
+	async ( { select, dispatch } ) => {
+		if (
+			( forceIsAutosaveable || select.isEditedPostAutosaveable() ) &&
+			! select.isPostLocked()
+		) {
+			const isDraft = [ 'draft', 'auto-draft' ].includes(
+				select.getEditedPostAttribute( 'status' )
+			);
+			if ( isDraft ) {
+				await dispatch.savePost( { isPreview: true } );
+			} else {
+				await dispatch.autosave( { isPreview: true } );
+			}
+		}
+
+		return select.getEditedPostPreviewLink();
+	};
+
 /**
  * Action that restores last popped state in undo history.
  */
@@ -342,7 +472,7 @@ export const enablePublishSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'isPublishSidebarEnabled', true );
+			.set( 'core', 'isPublishSidebarEnabled', true );
 	};
 
 /**
@@ -353,7 +483,7 @@ export const disablePublishSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'isPublishSidebarEnabled', false );
+			.set( 'core', 'isPublishSidebarEnabled', false );
 	};
 
 /**
@@ -469,8 +599,8 @@ export function unlockPostAutosaving( lockName ) {
 /**
  * Returns an action object used to signal that the blocks have been updated.
  *
- * @param {Array}   blocks  Block Array.
- * @param {?Object} options Optional options.
+ * @param {Array}  blocks    Block Array.
+ * @param {Object} [options] Optional options.
  */
 export const resetEditorBlocks =
 	( blocks, options = {} ) =>
@@ -516,6 +646,379 @@ export function updateEditorSettings( settings ) {
 	};
 }
 
+/**
+ * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes:
+ *
+ * -   `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template.
+ * -   `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable.
+ *
+ * @param {string} mode Mode (one of 'post-only' or 'template-locked').
+ */
+export const setRenderingMode =
+	( mode ) =>
+	( { dispatch, registry, select } ) => {
+		if ( select.__unstableIsEditorReady() ) {
+			// We clear the block selection but we also need to clear the selection from the core store.
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+			dispatch.editPost( { selection: undefined }, { undoIgnore: true } );
+		}
+
+		dispatch( {
+			type: 'SET_RENDERING_MODE',
+			mode,
+		} );
+	};
+
+/**
+ * Action that changes the width of the editing canvas.
+ *
+ * @param {string} deviceType
+ *
+ * @return {Object} Action object.
+ */
+export function setDeviceType( deviceType ) {
+	return {
+		type: 'SET_DEVICE_TYPE',
+		deviceType,
+	};
+}
+
+/**
+ * Returns an action object used to enable or disable a panel in the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to enable or disable.
+ *
+ * @return {Object} Action object.
+ */
+export const toggleEditorPanelEnabled =
+	( panelName ) =>
+	( { registry } ) => {
+		const inactivePanels =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'inactivePanels' ) ?? [];
+
+		const isPanelInactive = !! inactivePanels?.includes( panelName );
+
+		// If the panel is inactive, remove it to enable it, else add it to
+		// make it inactive.
+		let updatedInactivePanels;
+		if ( isPanelInactive ) {
+			updatedInactivePanels = inactivePanels.filter(
+				( invactivePanelName ) => invactivePanelName !== panelName
+			);
+		} else {
+			updatedInactivePanels = [ ...inactivePanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'inactivePanels', updatedInactivePanels );
+	};
+
+/**
+ * Opens a closed panel and closes an open panel.
+ *
+ * @param {string} panelName A string that identifies the panel to open or close.
+ */
+export const toggleEditorPanelOpened =
+	( panelName ) =>
+	( { registry } ) => {
+		const openPanels =
+			registry.select( preferencesStore ).get( 'core', 'openPanels' ) ??
+			[];
+
+		const isPanelOpen = !! openPanels?.includes( panelName );
+
+		// If the panel is open, remove it to close it, else add it to
+		// make it open.
+		let updatedOpenPanels;
+		if ( isPanelOpen ) {
+			updatedOpenPanels = openPanels.filter(
+				( openPanelName ) => openPanelName !== panelName
+			);
+		} else {
+			updatedOpenPanels = [ ...openPanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'openPanels', updatedOpenPanels );
+	};
+
+/**
+ * Returns an action object used to remove a panel from the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to remove.
+ *
+ * @return {Object} Action object.
+ */
+export function removeEditorPanel( panelName ) {
+	return {
+		type: 'REMOVE_PANEL',
+		panelName,
+	};
+}
+
+/**
+ * Returns an action object used to open/close the inserter.
+ *
+ * @param {boolean|Object} value                Whether the inserter should be
+ *                                              opened (true) or closed (false).
+ *                                              To specify an insertion point,
+ *                                              use an object.
+ * @param {string}         value.rootClientId   The root client ID to insert at.
+ * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.filterValue    A query to filter the inserter results.
+ * @param {Function}       value.onSelect       A callback when an item is selected.
+ * @param {string}         value.tab            The tab to open in the inserter.
+ * @param {string}         value.category       The category to initialize in the inserter.
+ *
+ * @return {Object} Action object.
+ */
+export const setIsInserterOpened =
+	( value ) =>
+	( { dispatch, registry } ) => {
+		if (
+			typeof value === 'object' &&
+			value.hasOwnProperty( 'rootClientId' ) &&
+			value.hasOwnProperty( 'insertionIndex' )
+		) {
+			unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( {
+				rootClientId: value.rootClientId,
+				index: value.insertionIndex,
+			} );
+		}
+
+		dispatch( {
+			type: 'SET_IS_INSERTER_OPENED',
+			value,
+		} );
+	};
+
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ * @return {Object} Action object.
+ */
+export function setIsListViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_LIST_VIEW_OPENED',
+		isOpen,
+	};
+}
+
+/**
+ * Action that toggles Distraction free mode.
+ * Distraction free mode expects there are no sidebars, as due to the
+ * z-index values set, you can't close sidebars.
+ *
+ * @param {Object}  [options={}]                Optional configuration object
+ * @param {boolean} [options.createNotice=true] Whether to create a notice
+ */
+export const toggleDistractionFree =
+	( { createNotice = true } = {} ) =>
+	( { dispatch, registry } ) => {
+		const isDistractionFree = registry
+			.select( preferencesStore )
+			.get( 'core', 'distractionFree' );
+		if ( isDistractionFree ) {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'fixedToolbar', false );
+		}
+		if ( ! isDistractionFree ) {
+			registry.batch( () => {
+				registry
+					.dispatch( preferencesStore )
+					.set( 'core', 'fixedToolbar', true );
+				dispatch.setIsInserterOpened( false );
+				dispatch.setIsListViewOpened( false );
+				unlock(
+					registry.dispatch( blockEditorStore )
+				).resetZoomLevel();
+			} );
+		}
+		registry.batch( () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'distractionFree', ! isDistractionFree );
+
+			if ( createNotice ) {
+				registry
+					.dispatch( noticesStore )
+					.createInfoNotice(
+						isDistractionFree
+							? __( 'Distraction free mode deactivated.' )
+							: __( 'Distraction free mode activated.' ),
+						{
+							id: 'core/editor/distraction-free-mode/notice',
+							type: 'snackbar',
+							actions: [
+								{
+									label: __( 'Undo' ),
+									onClick: () => {
+										registry.batch( () => {
+											registry
+												.dispatch( preferencesStore )
+												.set(
+													'core',
+													'fixedToolbar',
+													isDistractionFree
+												);
+											registry
+												.dispatch( preferencesStore )
+												.toggle(
+													'core',
+													'distractionFree'
+												);
+										} );
+									},
+								},
+							],
+						}
+					);
+			}
+		} );
+	};
+
+/**
+ * Action that toggles the Spotlight Mode view option.
+ */
+export const toggleSpotlightMode =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'focusMode' );
+
+		const isFocusMode = registry
+			.select( preferencesStore )
+			.get( 'core', 'focusMode' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isFocusMode
+					? __( 'Spotlight mode activated.' )
+					: __( 'Spotlight mode deactivated.' ),
+				{
+					id: 'core/editor/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
+	};
+
+/**
+ * Action that toggles the Top Toolbar view option.
+ */
+export const toggleTopToolbar =
+	() =>
+	( { registry } ) => {
+		registry.dispatch( preferencesStore ).toggle( 'core', 'fixedToolbar' );
+
+		const isTopToolbar = registry
+			.select( preferencesStore )
+			.get( 'core', 'fixedToolbar' );
+
+		registry
+			.dispatch( noticesStore )
+			.createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar activated.' )
+					: __( 'Top toolbar deactivated.' ),
+				{
+					id: 'core/editor/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+
+							onClick: () => {
+								registry
+									.dispatch( preferencesStore )
+									.toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
+	};
+
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @param {string} mode The editor mode.
+ */
+export const switchEditorMode =
+	( mode ) =>
+	( { dispatch, registry } ) => {
+		registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );
+
+		if ( mode !== 'visual' ) {
+			// Unselect blocks when we switch to a non visual mode.
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+			// Exit zoom out state when switching to a non visual mode.
+			unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
+		}
+
+		if ( mode === 'visual' ) {
+			speak( __( 'Visual editor selected' ), 'assertive' );
+		} else if ( mode === 'text' ) {
+			const isDistractionFree = registry
+				.select( preferencesStore )
+				.get( 'core', 'distractionFree' );
+			if ( isDistractionFree ) {
+				dispatch.toggleDistractionFree();
+			}
+			speak( __( 'Code editor selected' ), 'assertive' );
+		}
+	};
+
+/**
+ * Returns an action object used in signalling that the user opened the publish
+ * sidebar.
+ *
+ * @return {Object} Action object
+ */
+export function openPublishSidebar() {
+	return {
+		type: 'OPEN_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user closed the
+ * publish sidebar.
+ *
+ * @return {Object} Action object.
+ */
+export function closePublishSidebar() {
+	return {
+		type: 'CLOSE_PUBLISH_SIDEBAR',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the user toggles the publish sidebar.
+ *
+ * @return {Object} Action object
+ */
+export function togglePublishSidebar() {
+	return {
+		type: 'TOGGLE_PUBLISH_SIDEBAR',
+	};
+}
+
 /**
  * Backward compatibility
  */
diff --git a/packages/editor/src/store/constants.js b/packages/editor/src/store/constants.js
deleted file mode 100644
index 7882ba53e64db3..00000000000000
--- a/packages/editor/src/store/constants.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Set of post properties for which edits should assume a merging behavior,
- * assuming an object value.
- *
- * @type {Set}
- */
-export const EDIT_MERGE_PROPERTIES = new Set( [ 'meta' ] );
-
-/**
- * Constant for the store module (or reducer) key.
- *
- * @type {string}
- */
-export const STORE_NAME = 'core/editor';
-
-export const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
-export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
-export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
-export const ONE_MINUTE_IN_MS = 60 * 1000;
-export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
diff --git a/packages/editor/src/store/constants.ts b/packages/editor/src/store/constants.ts
new file mode 100644
index 00000000000000..73d6a104370c37
--- /dev/null
+++ b/packages/editor/src/store/constants.ts
@@ -0,0 +1,34 @@
+/**
+ * Set of post properties for which edits should assume a merging behavior,
+ * assuming an object value.
+ *
+ * @type {Set}
+ */
+export const EDIT_MERGE_PROPERTIES = new Set( [ 'meta' ] );
+
+/**
+ * Constant for the store module (or reducer) key.
+ */
+export const STORE_NAME = 'core/editor';
+
+export const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
+export const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
+export const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
+export const ONE_MINUTE_IN_MS = 60 * 1000;
+export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
+export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
+export const TEMPLATE_POST_TYPE = 'wp_template';
+export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
+export const PATTERN_POST_TYPE = 'wp_block';
+export const NAVIGATION_POST_TYPE = 'wp_navigation';
+export const TEMPLATE_ORIGINS = {
+	custom: 'custom',
+	theme: 'theme',
+	plugin: 'plugin',
+};
+export const TEMPLATE_POST_TYPES = [ 'wp_template', 'wp_template_part' ];
+export const GLOBAL_POST_TYPES = [
+	...TEMPLATE_POST_TYPES,
+	'wp_block',
+	'wp_navigation',
+];
diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js
index 66bcdc72dd8be9..e4f86b3a7dfb21 100644
--- a/packages/editor/src/store/defaults.js
+++ b/packages/editor/src/store/defaults.js
@@ -9,6 +9,7 @@ import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
  * @property {boolean|Array} allowedBlockTypes     Allowed block types
  * @property {boolean}       richEditingEnabled    Whether rich editing is enabled or not
  * @property {boolean}       codeEditingEnabled    Whether code editing is enabled or not
+ * @property {boolean}       fontLibraryEnabled    Whether the font library is enabled or not.
  * @property {boolean}       enableCustomFields    Whether the WordPress custom fields are enabled or not.
  *                                                 true  = the user has opted to show the Custom Fields panel at the bottom of the editor.
  *                                                 false = the user has opted to hide the Custom Fields panel at the bottom of the editor.
@@ -26,6 +27,7 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 
 	richEditingEnabled: true,
 	codeEditingEnabled: true,
+	fontLibraryEnabled: true,
 	enableCustomFields: undefined,
-	supportsLayout: true,
+	defaultRenderingMode: 'post-only',
 };
diff --git a/packages/editor/src/store/index.js b/packages/editor/src/store/index.js
index baee4d9197d0c2..a3241a2fc7e184 100644
--- a/packages/editor/src/store/index.js
+++ b/packages/editor/src/store/index.js
@@ -9,14 +9,15 @@ import { createReduxStore, register } from '@wordpress/data';
 import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Post editor data store configuration.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
- *
- * @type {Object}
  */
 export const storeConfig = {
 	reducer,
@@ -28,11 +29,11 @@ export const storeConfig = {
  * Store definition for the editor namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,
 } );
 
 register( store );
+unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );
diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js
new file mode 100644
index 00000000000000..74c1f1ea100b37
--- /dev/null
+++ b/packages/editor/src/store/private-actions.js
@@ -0,0 +1,494 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import isTemplateRevertable from './utils/is-template-revertable';
+export * from '../dataviews/store/private-actions';
+
+/**
+ * Returns an action object used to set which template is currently being used/edited.
+ *
+ * @param {string} id Template Id.
+ *
+ * @return {Object} Action object.
+ */
+export function setCurrentTemplateId( id ) {
+	return {
+		type: 'SET_CURRENT_TEMPLATE_ID',
+		id,
+	};
+}
+
+/**
+ * Create a block based template.
+ *
+ * @param {Object?} template Template to create and assign.
+ */
+export const createTemplate =
+	( template ) =>
+	async ( { select, dispatch, registry } ) => {
+		const savedTemplate = await registry
+			.dispatch( coreStore )
+			.saveEntityRecord( 'postType', 'wp_template', template );
+		registry
+			.dispatch( coreStore )
+			.editEntityRecord(
+				'postType',
+				select.getCurrentPostType(),
+				select.getCurrentPostId(),
+				{
+					template: savedTemplate.slug,
+				}
+			);
+		registry
+			.dispatch( noticesStore )
+			.createSuccessNotice(
+				__( "Custom template created. You're in template mode now." ),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Go back' ),
+							onClick: () =>
+								dispatch.setRenderingMode(
+									select.getEditorSettings()
+										.defaultRenderingMode
+								),
+						},
+					],
+				}
+			);
+		return savedTemplate;
+	};
+
+/**
+ * Update the provided block types to be visible.
+ *
+ * @param {string[]} blockNames Names of block types to show.
+ */
+export const showBlockTypes =
+	( blockNames ) =>
+	( { registry } ) => {
+		const existingBlockNames =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'hiddenBlockTypes' ) ?? [];
+
+		const newBlockNames = existingBlockNames.filter(
+			( type ) =>
+				! (
+					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
+				).includes( type )
+		);
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'hiddenBlockTypes', newBlockNames );
+	};
+
+/**
+ * Update the provided block types to be hidden.
+ *
+ * @param {string[]} blockNames Names of block types to hide.
+ */
+export const hideBlockTypes =
+	( blockNames ) =>
+	( { registry } ) => {
+		const existingBlockNames =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'hiddenBlockTypes' ) ?? [];
+
+		const mergedBlockNames = new Set( [
+			...existingBlockNames,
+			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
+		] );
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'hiddenBlockTypes', [ ...mergedBlockNames ] );
+	};
+
+/**
+ * Save entity records marked as dirty.
+ *
+ * @param {Object}   options                      Options for the action.
+ * @param {Function} [options.onSave]             Callback when saving happens.
+ * @param {object[]} [options.dirtyEntityRecords] Array of dirty entities.
+ * @param {object[]} [options.entitiesToSkip]     Array of entities to skip saving.
+ * @param {Function} [options.close]              Callback when the actions is called. It should be consolidated with `onSave`.
+ */
+export const saveDirtyEntities =
+	( { onSave, dirtyEntityRecords = [], entitiesToSkip = [], close } = {} ) =>
+	( { registry } ) => {
+		const PUBLISH_ON_SAVE_ENTITIES = [
+			{ kind: 'postType', name: 'wp_navigation' },
+		];
+		const saveNoticeId = 'site-editor-save-success';
+		const homeUrl = registry
+			.select( coreStore )
+			.getEntityRecord( 'root', '__unstableBase' )?.home;
+		registry.dispatch( noticesStore ).removeNotice( saveNoticeId );
+		const entitiesToSave = dirtyEntityRecords.filter(
+			( { kind, name, key, property } ) => {
+				return ! entitiesToSkip.some(
+					( elt ) =>
+						elt.kind === kind &&
+						elt.name === name &&
+						elt.key === key &&
+						elt.property === property
+				);
+			}
+		);
+		close?.( entitiesToSave );
+		const siteItemsToSave = [];
+		const pendingSavedRecords = [];
+		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
+			if ( 'root' === kind && 'site' === name ) {
+				siteItemsToSave.push( property );
+			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					registry
+						.dispatch( coreStore )
+						.editEntityRecord( kind, name, key, {
+							status: 'publish',
+						} );
+				}
+
+				pendingSavedRecords.push(
+					registry
+						.dispatch( coreStore )
+						.saveEditedEntityRecord( kind, name, key )
+				);
+			}
+		} );
+		if ( siteItemsToSave.length ) {
+			pendingSavedRecords.push(
+				registry
+					.dispatch( coreStore )
+					.__experimentalSaveSpecifiedEntityEdits(
+						'root',
+						'site',
+						undefined,
+						siteItemsToSave
+					)
+			);
+		}
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+		Promise.all( pendingSavedRecords )
+			.then( ( values ) => {
+				return onSave ? onSave( values ) : values;
+			} )
+			.then( ( values ) => {
+				if (
+					values.some( ( value ) => typeof value === 'undefined' )
+				) {
+					registry
+						.dispatch( noticesStore )
+						.createErrorNotice( __( 'Saving failed.' ) );
+				} else {
+					registry
+						.dispatch( noticesStore )
+						.createSuccessNotice( __( 'Site updated.' ), {
+							type: 'snackbar',
+							id: saveNoticeId,
+							actions: [
+								{
+									label: __( 'View site' ),
+									url: homeUrl,
+								},
+							],
+						} );
+				}
+			} )
+			.catch( ( error ) =>
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						`${ __( 'Saving failed.' ) } ${ error }`
+					)
+			);
+	};
+
+/**
+ * Reverts a template to its original theme-provided file.
+ *
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
+ */
+export const revertTemplate =
+	( template, { allowUndo = true } = {} ) =>
+	async ( { registry } ) => {
+		const noticeId = 'edit-site-template-reverted';
+		registry.dispatch( noticesStore ).removeNotice( noticeId );
+		if ( ! isTemplateRevertable( template ) ) {
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( __( 'This template is not revertable.' ), {
+					type: 'snackbar',
+				} );
+			return;
+		}
+
+		try {
+			const templateEntityConfig = registry
+				.select( coreStore )
+				.getEntityConfig( 'postType', template.type );
+
+			if ( ! templateEntityConfig ) {
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						__(
+							'The editor has encountered an unexpected error. Please reload.'
+						),
+						{ type: 'snackbar' }
+					);
+				return;
+			}
+
+			const fileTemplatePath = addQueryArgs(
+				`${ templateEntityConfig.baseURL }/${ template.id }`,
+				{ context: 'edit', source: template.origin }
+			);
+
+			const fileTemplate = await apiFetch( { path: fileTemplatePath } );
+			if ( ! fileTemplate ) {
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						__(
+							'The editor has encountered an unexpected error. Please reload.'
+						),
+						{ type: 'snackbar' }
+					);
+				return;
+			}
+
+			const serializeBlocks = ( {
+				blocks: blocksForSerialization = [],
+			} ) => __unstableSerializeAndClean( blocksForSerialization );
+
+			const edited = registry
+				.select( coreStore )
+				.getEditedEntityRecord(
+					'postType',
+					template.type,
+					template.id
+				);
+
+			// We are fixing up the undo level here to make sure we can undo
+			// the revert in the header toolbar correctly.
+			registry.dispatch( coreStore ).editEntityRecord(
+				'postType',
+				template.type,
+				template.id,
+				{
+					content: serializeBlocks, // Required to make the `undo` behave correctly.
+					blocks: edited.blocks, // Required to revert the blocks in the editor.
+					source: 'custom', // required to avoid turning the editor into a dirty state
+				},
+				{
+					undoIgnore: true, // Required to merge this edit with the last undo level.
+				}
+			);
+
+			const blocks = parse( fileTemplate?.content?.raw );
+			registry
+				.dispatch( coreStore )
+				.editEntityRecord( 'postType', template.type, fileTemplate.id, {
+					content: serializeBlocks,
+					blocks,
+					source: 'theme',
+				} );
+
+			if ( allowUndo ) {
+				const undoRevert = () => {
+					registry
+						.dispatch( coreStore )
+						.editEntityRecord(
+							'postType',
+							template.type,
+							edited.id,
+							{
+								content: serializeBlocks,
+								blocks: edited.blocks,
+								source: 'custom',
+							}
+						);
+				};
+
+				registry
+					.dispatch( noticesStore )
+					.createSuccessNotice( __( 'Template reset.' ), {
+						type: 'snackbar',
+						id: noticeId,
+						actions: [
+							{
+								label: __( 'Undo' ),
+								onClick: undoRevert,
+							},
+						],
+					} );
+			}
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'Template revert failed. Please reload.' );
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};
+
+/**
+ * Action that removes an array of templates, template parts or patterns.
+ *
+ * @param {Array} items An array of template,template part or pattern objects to remove.
+ */
+export const removeTemplates =
+	( items ) =>
+	async ( { registry } ) => {
+		const isResetting = items.every( ( item ) => item?.has_theme_file );
+
+		const promiseResult = await Promise.allSettled(
+			items.map( ( item ) => {
+				return registry
+					.dispatch( coreStore )
+					.deleteEntityRecord(
+						'postType',
+						item.type,
+						item.id,
+						{ force: true },
+						{ throwOnError: true }
+					);
+			} )
+		);
+
+		// If all the promises were fulfilled with sucess.
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+
+			if ( items.length === 1 ) {
+				// Depending on how the entity was retrieved its title might be
+				// an object or simple string.
+				let title;
+				if ( typeof items[ 0 ].title === 'string' ) {
+					title = items[ 0 ].title;
+				} else if ( typeof items[ 0 ].title?.rendered === 'string' ) {
+					title = items[ 0 ].title?.rendered;
+				} else if ( typeof items[ 0 ].title?.raw === 'string' ) {
+					title = items[ 0 ].title?.raw;
+				}
+				successMessage = isResetting
+					? sprintf(
+							/* translators: The template/part's name. */
+							__( '"%s" reset.' ),
+							decodeEntities( title )
+					  )
+					: sprintf(
+							/* translators: %s: The template/part's name. */
+							_x( '"%s" deleted.', 'template part' ),
+							decodeEntities( title )
+					  );
+			} else {
+				successMessage = isResetting
+					? __( 'Items reset.' )
+					: __( 'Items deleted.' );
+			}
+
+			registry
+				.dispatch( noticesStore )
+				.createSuccessNotice( successMessage, {
+					type: 'snackbar',
+					id: 'editor-template-deleted-success',
+				} );
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to delete a single template.
+			if ( promiseResult.length === 1 ) {
+				if ( promiseResult[ 0 ].reason?.message ) {
+					errorMessage = promiseResult[ 0 ].reason.message;
+				} else {
+					errorMessage = isResetting
+						? __( 'An error occurred while reverting the item.' )
+						: __( 'An error occurred while deleting the item.' );
+				}
+				// If we were trying to delete a multiple templates
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					if ( failedPromise.reason?.message ) {
+						errorMessages.add( failedPromise.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = __(
+						'An error occurred while deleting the items.'
+					);
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = isResetting
+						? sprintf(
+								/* translators: %s: an error message */
+								__(
+									'An error occurred while reverting the items: %s'
+								),
+								[ ...errorMessages ][ 0 ]
+						  )
+						: sprintf(
+								/* translators: %s: an error message */
+								__(
+									'An error occurred while deleting the items: %s'
+								),
+								[ ...errorMessages ][ 0 ]
+						  );
+				} else {
+					errorMessage = isResetting
+						? sprintf(
+								/* translators: %s: a list of comma separated error messages */
+								__(
+									'Some errors occurred while reverting the items: %s'
+								),
+								[ ...errorMessages ].join( ',' )
+						  )
+						: sprintf(
+								/* translators: %s: a list of comma separated error messages */
+								__(
+									'Some errors occurred while deleting the items: %s'
+								),
+								[ ...errorMessages ].join( ',' )
+						  );
+				}
+			}
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
new file mode 100644
index 00000000000000..56fa6728371489
--- /dev/null
+++ b/packages/editor/src/store/private-selectors.js
@@ -0,0 +1,210 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
+import {
+	layout,
+	symbol,
+	navigation,
+	page as pageIcon,
+	verse,
+} from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { getRenderingMode, getCurrentPost } from './selectors';
+import {
+	getEntityActions as _getEntityActions,
+	getEntityFields as _getEntityFields,
+	isEntityReady as _isEntityReady,
+} from '../dataviews/store/private-selectors';
+
+const EMPTY_INSERTION_POINT = {
+	rootClientId: undefined,
+	insertionIndex: undefined,
+	filterValue: undefined,
+};
+
+/**
+ * Get the inserter.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object} The root client ID, index to insert at and starting filter value.
+ */
+export const getInserter = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			if ( typeof state.blockInserterPanel === 'object' ) {
+				return state.blockInserterPanel;
+			}
+
+			if ( getRenderingMode( state ) === 'template-locked' ) {
+				const [ postContentClientId ] =
+					select( blockEditorStore ).getBlocksByName(
+						'core/post-content'
+					);
+				if ( postContentClientId ) {
+					return {
+						rootClientId: postContentClientId,
+						insertionIndex: undefined,
+						filterValue: undefined,
+					};
+				}
+			}
+
+			return EMPTY_INSERTION_POINT;
+		},
+		( state ) => {
+			const [ postContentClientId ] =
+				select( blockEditorStore ).getBlocksByName(
+					'core/post-content'
+				);
+			return [
+				state.blockInserterPanel,
+				getRenderingMode( state ),
+				postContentClientId,
+			];
+		}
+	)
+);
+
+export function getListViewToggleRef( state ) {
+	return state.listViewToggleRef;
+}
+export function getInserterSidebarToggleRef( state ) {
+	return state.inserterSidebarToggleRef;
+}
+const CARD_ICONS = {
+	wp_block: symbol,
+	wp_navigation: navigation,
+	page: pageIcon,
+	post: verse,
+};
+
+export const getPostIcon = createRegistrySelector(
+	( select ) => ( state, postType, options ) => {
+		{
+			if (
+				postType === 'wp_template_part' ||
+				postType === 'wp_template'
+			) {
+				return (
+					(
+						select( coreStore ).getEntityRecord(
+							'root',
+							'__unstableBase'
+						)?.default_template_part_areas || []
+					).find( ( item ) => options.area === item.area )?.icon ||
+					layout
+				);
+			}
+			if ( CARD_ICONS[ postType ] ) {
+				return CARD_ICONS[ postType ];
+			}
+			const postTypeEntity = select( coreStore ).getPostType( postType );
+			// `icon` is the `menu_icon` property of a post type. We
+			// only handle `dashicons` for now, even if the `menu_icon`
+			// also supports urls and svg as values.
+			if (
+				typeof postTypeEntity?.icon === 'string' &&
+				postTypeEntity.icon.startsWith( 'dashicons-' )
+			) {
+				return postTypeEntity.icon.slice( 10 );
+			}
+			return pageIcon;
+		}
+	}
+);
+
+/**
+ * Returns true if there are unsaved changes to the
+ * post's meta fields, and false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} postType The post type of the post.
+ * @param {number} postId   The ID of the post.
+ *
+ * @return {boolean} Whether there are edits or not in the meta fields of the relevant post.
+ */
+export const hasPostMetaChanges = createRegistrySelector(
+	( select ) => ( state, postType, postId ) => {
+		const { type: currentPostType, id: currentPostId } =
+			getCurrentPost( state );
+		// If no postType or postId is passed, use the current post.
+		const edits = select( coreStore ).getEntityRecordNonTransientEdits(
+			'postType',
+			postType || currentPostType,
+			postId || currentPostId
+		);
+
+		if ( ! edits?.meta ) {
+			return false;
+		}
+
+		// Compare if anything apart from `footnotes` has changed.
+		const originalPostMeta = select( coreStore ).getEntityRecord(
+			'postType',
+			postType || currentPostType,
+			postId || currentPostId
+		)?.meta;
+
+		return ! fastDeepEqual(
+			{ ...originalPostMeta, footnotes: undefined },
+			{ ...edits.meta, footnotes: undefined }
+		);
+	}
+);
+
+export function getEntityActions( state, ...args ) {
+	return _getEntityActions( state.dataviews, ...args );
+}
+
+export function isEntityReady( state, ...args ) {
+	return _isEntityReady( state.dataviews, ...args );
+}
+
+export function getEntityFields( state, ...args ) {
+	return _getEntityFields( state.dataviews, ...args );
+}
+
+/**
+ * Similar to getBlocksByName in @wordpress/block-editor, but only returns the top-most
+ * blocks that aren't descendants of the query block.
+ *
+ * @param {Object}       state      Global application state.
+ * @param {Array|string} blockNames Block names of the blocks to retrieve.
+ *
+ * @return {Array} Block client IDs.
+ */
+export const getPostBlocksByName = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, blockNames ) => {
+			blockNames = Array.isArray( blockNames )
+				? blockNames
+				: [ blockNames ];
+			const { getBlocksByName, getBlockParents, getBlockName } =
+				select( blockEditorStore );
+			return getBlocksByName( blockNames ).filter( ( clientId ) =>
+				getBlockParents( clientId ).every( ( parentClientId ) => {
+					const parentBlockName = getBlockName( parentClientId );
+					return (
+						// Ignore descendents of the query block.
+						parentBlockName !== 'core/query' &&
+						// Enable only the top-most block.
+						! blockNames.includes( parentBlockName )
+					);
+				} )
+			);
+		},
+		() => [ select( blockEditorStore ).getBlocks() ]
+	)
+);
diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
index 647e0158660040..a165d90e296d6f 100644
--- a/packages/editor/src/store/reducer.js
+++ b/packages/editor/src/store/reducer.js
@@ -7,6 +7,7 @@ import { combineReducers } from '@wordpress/data';
  * Internal dependencies
  */
 import { EDITOR_SETTINGS_DEFAULTS } from './defaults';
+import dataviewsReducer from '../dataviews/store/reducer';
 
 /**
  * Returns a post attribute value, flattening nested rendered content using its
@@ -83,8 +84,17 @@ export function shouldOverwriteState( action, previousAction ) {
 
 export function postId( state = null, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return action.post.id;
+		case 'SET_EDITED_POST':
+			return action.postId;
+	}
+
+	return state;
+}
+
+export function templateId( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_CURRENT_TEMPLATE_ID':
+			return action.id;
 	}
 
 	return state;
@@ -92,8 +102,8 @@ export function postId( state = null, action ) {
 
 export function postType( state = null, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return action.post.type;
+		case 'SET_EDITED_POST':
+			return action.postType;
 	}
 
 	return state;
@@ -238,56 +248,160 @@ export function postAutosavingLock( state = {}, action ) {
 }
 
 /**
- * Reducer returning whether the editor is ready to be rendered.
- * The editor is considered ready to be rendered once
- * the post object is loaded properly and the initial blocks parsed.
+ * Reducer returning the post editor setting.
  *
- * @param {boolean} state
- * @param {Object}  action
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
  *
- * @return {boolean} Updated state.
+ * @return {Object} Updated state.
  */
-export function isReady( state = false, action ) {
+export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return true;
+		case 'UPDATE_EDITOR_SETTINGS':
+			return {
+				...state,
+				...action.settings,
+			};
+	}
 
-		case 'TEAR_DOWN_EDITOR':
-			return false;
+	return state;
+}
+
+export function renderingMode( state = 'post-only', action ) {
+	switch ( action.type ) {
+		case 'SET_RENDERING_MODE':
+			return action.mode;
 	}
 
 	return state;
 }
 
 /**
- * Reducer returning the post editor setting.
+ * Reducer returning the editing canvas device type.
  *
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  *
  * @return {Object} Updated state.
  */
-export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
+export function deviceType( state = 'Desktop', action ) {
 	switch ( action.type ) {
-		case 'UPDATE_EDITOR_SETTINGS':
-			return {
-				...state,
-				...action.settings,
-			};
+		case 'SET_DEVICE_TYPE':
+			return action.deviceType;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer storing the list of all programmatically removed panels.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Action object.
+ *
+ * @return {Array} Updated state.
+ */
+export function removedPanels( state = [], action ) {
+	switch ( action.type ) {
+		case 'REMOVE_PANEL':
+			if ( ! state.includes( action.panelName ) ) {
+				return [ ...state, action.panelName ];
+			}
 	}
 
 	return state;
 }
 
+/**
+ * Reducer to set the block inserter panel open or closed.
+ *
+ * Note: this reducer interacts with the list view panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function blockInserterPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_IS_LIST_VIEW_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_INSERTER_OPENED':
+			return action.value;
+	}
+	return state;
+}
+
+/**
+ * Reducer to set the list view panel open or closed.
+ *
+ * Note: this reducer interacts with the inserter panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function listViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_IS_INSERTER_OPENED':
+			return action.value ? false : state;
+		case 'SET_IS_LIST_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef( state = { current: null } ) {
+	return state;
+}
+
+/**
+ * This reducer does nothing aside initializing a ref to the inserter sidebar toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the inserter sidebar toggle button.
+ */
+export function inserterSidebarToggleRef( state = { current: null } ) {
+	return state;
+}
+
+export function publishSidebarActive( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_PUBLISH_SIDEBAR':
+			return true;
+		case 'CLOSE_PUBLISH_SIDEBAR':
+			return false;
+		case 'TOGGLE_PUBLISH_SIDEBAR':
+			return ! state;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
+	templateId,
 	saving,
 	deleting,
 	postLock,
 	template,
 	postSavingLock,
-	isReady,
 	editorSettings,
 	postAutosavingLock,
+	renderingMode,
+	deviceType,
+	removedPanels,
+	blockInserterPanel,
+	inserterSidebarToggleRef,
+	listViewPanel,
+	listViewToggleRef,
+	publishSidebarActive,
+	dataviews: dataviewsReducer,
 } );
diff --git a/packages/editor/src/store/reducer.native.js b/packages/editor/src/store/reducer.native.js
index 991addd88620b7..fbf6c968f57d08 100644
--- a/packages/editor/src/store/reducer.native.js
+++ b/packages/editor/src/store/reducer.native.js
@@ -9,11 +9,11 @@ import { combineReducers } from '@wordpress/data';
 import {
 	postId,
 	postType,
+	renderingMode,
 	saving,
 	postLock,
 	postSavingLock,
 	template,
-	isReady,
 	editorSettings,
 } from './reducer.js';
 
@@ -83,11 +83,11 @@ export default combineReducers( {
 	postId,
 	postType,
 	postTitle,
+	renderingMode,
 	saving,
 	postLock,
 	postSavingLock,
 	template,
-	isReady,
 	editorSettings,
 	clipboard,
 	notices,
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index da5b4700eb9fc8..4ab0a47210353b 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
@@ -10,13 +5,13 @@ import {
 	getFreeformContentHandlerName,
 	getDefaultBlockName,
 	__unstableSerializeAndClean,
+	parse,
 } from '@wordpress/blocks';
 import { isInTheFuture, getDate } from '@wordpress/date';
 import { addQueryArgs, cleanForSlug } from '@wordpress/url';
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
-import { layout } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -32,6 +27,8 @@ import {
 } from './constants';
 import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
+import { unlock } from '../lock-unlock';
+import { getTemplateInfo } from '../utils/get-template-info';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -42,15 +39,6 @@ import { getTemplatePartIcon } from '../utils/get-template-part-icon';
  */
 const EMPTY_OBJECT = {};
 
-/**
- * Shared reference to an empty array for cases where it is important to avoid
- * returning a new array reference on every invocation, as in a connected or
- * other pure component which performs `shouldComponentUpdate` check on props.
- * This should be used as a last resort, since the normalized data should be
- * maintained by the reducer result in state.
- */
-const EMPTY_ARRAY = [];
-
 /**
  * Returns true if any past editor history snapshots exist, or false otherwise.
  *
@@ -113,16 +101,11 @@ export const isEditedPostDirty = createRegistrySelector(
 		// inferred to contain unsaved values.
 		const postType = getCurrentPostType( state );
 		const postId = getCurrentPostId( state );
-		if (
-			select( coreStore ).hasEditsForEntityRecord(
-				'postType',
-				postType,
-				postId
-			)
-		) {
-			return true;
-		}
-		return false;
+		return select( coreStore ).hasEditsForEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
 	}
 );
 
@@ -195,6 +178,11 @@ export const getCurrentPost = createRegistrySelector(
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ *
+ *```js
+ * const currentPostType = wp.data.select( 'core/editor' ).getCurrentPostType();
+ *```
  * @return {string} Post type.
  */
 export function getCurrentPostType( state ) {
@@ -213,6 +201,17 @@ export function getCurrentPostId( state ) {
 	return state.postId;
 }
 
+/**
+ * Returns the template ID currently being rendered/edited
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} Template ID.
+ */
+export function getCurrentTemplateId( state ) {
+	return state.templateId;
+}
+
 /**
  * Returns the number of revisions of the post currently being edited.
  *
@@ -297,17 +296,23 @@ export function getCurrentPostAttribute( state, attributeName ) {
  *
  * @return {*} Post attribute value.
  */
-const getNestedEditedPostProperty = ( state, attributeName ) => {
-	const edits = getPostEdits( state );
-	if ( ! edits.hasOwnProperty( attributeName ) ) {
-		return getCurrentPostAttribute( state, attributeName );
-	}
+const getNestedEditedPostProperty = createSelector(
+	( state, attributeName ) => {
+		const edits = getPostEdits( state );
+		if ( ! edits.hasOwnProperty( attributeName ) ) {
+			return getCurrentPostAttribute( state, attributeName );
+		}
 
-	return {
-		...getCurrentPostAttribute( state, attributeName ),
-		...edits[ attributeName ],
-	};
-};
+		return {
+			...getCurrentPostAttribute( state, attributeName ),
+			...edits[ attributeName ],
+		};
+	},
+	( state, attributeName ) => [
+		getCurrentPostAttribute( state, attributeName ),
+		getPostEdits( state )[ attributeName ],
+	]
+);
 
 /**
  * Returns a single attribute of the post being edited, preferring the unsaved
@@ -317,6 +322,22 @@ const getNestedEditedPostProperty = ( state, attributeName ) => {
  * @param {Object} state         Global application state.
  * @param {string} attributeName Post attribute name.
  *
+ * @example
+ *
+ *```js
+ * 	// Get specific media size based on the featured media ID
+ * 	// Note: change sizes?.large for any registered size
+ * 	const getFeaturedMediaUrl = useSelect( ( select ) => {
+ * 		const getFeaturedMediaId =
+ * 			select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
+ * 		const getMedia = select( 'core' ).getMedia( getFeaturedMediaId );
+ *
+ * 		return (
+ * 			getMedia?.media_details?.sizes?.large?.source_url || getMedia?.source_url || ''
+ * 		);
+ * }, [] );
+ *```
+ *
  * @return {*} Post attribute value.
  */
 export function getEditedPostAttribute( state, attributeName ) {
@@ -364,6 +385,12 @@ export const getAutosaveAttribute = createRegistrySelector(
 		}
 
 		const postType = getCurrentPostType( state );
+
+		// Currently template autosaving is not supported.
+		if ( postType === 'wp_template' ) {
+			return false;
+		}
+
 		const postId = getCurrentPostId( state );
 		const currentUserId = select( coreStore ).getCurrentUser()?.id;
 		const autosave = select( coreStore ).getAutosave(
@@ -415,8 +442,8 @@ export function isCurrentPostPending( state ) {
 /**
  * Return true if the current post has already been published.
  *
- * @param {Object}  state       Global application state.
- * @param {Object?} currentPost Explicit current post for bypassing registry selector.
+ * @param {Object} state         Global application state.
+ * @param {Object} [currentPost] Explicit current post for bypassing registry selector.
  *
  * @return {boolean} Whether the post has been published.
  */
@@ -507,16 +534,31 @@ export function isEditedPostSaveable( state ) {
  *
  * @return {boolean} Whether post has content.
  */
-export function isEditedPostEmpty( state ) {
-	// While the condition of truthy content string is sufficient to determine
-	// emptiness, testing saveable blocks length is a trivial operation. Since
-	// this function can be called frequently, optimize for the fast case as a
-	// condition of the mere existence of blocks. Note that the value of edited
-	// content takes precedent over block content, and must fall through to the
-	// default logic.
-	const blocks = getEditorBlocks( state );
+export const isEditedPostEmpty = createRegistrySelector(
+	( select ) => ( state ) => {
+		// While the condition of truthy content string is sufficient to determine
+		// emptiness, testing saveable blocks length is a trivial operation. Since
+		// this function can be called frequently, optimize for the fast case as a
+		// condition of the mere existence of blocks. Note that the value of edited
+		// content takes precedent over block content, and must fall through to the
+		// default logic.
+		const postId = getCurrentPostId( state );
+		const postType = getCurrentPostType( state );
+		const record = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
+		if ( typeof record.content !== 'function' ) {
+			return ! record.content;
+		}
+
+		const blocks = getEditedPostAttribute( state, 'blocks' );
+
+		if ( blocks.length === 0 ) {
+			return true;
+		}
 
-	if ( blocks.length ) {
 		// Pierce the abstraction of the serializer in knowing that blocks are
 		// joined with newlines such that even if every individual block
 		// produces an empty save result, the serialized content is non-empty.
@@ -542,10 +584,10 @@ export function isEditedPostEmpty( state ) {
 		) {
 			return false;
 		}
-	}
 
-	return ! getEditedPostContent( state );
-}
+		return ! getEditedPostContent( state );
+	}
+);
 
 /**
  * Returns true if the post can be autosaved, or false otherwise.
@@ -568,6 +610,12 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 		}
 
 		const postType = getCurrentPostType( state );
+
+		// Currently template autosaving is not supported.
+		if ( postType === 'wp_template' ) {
+			return false;
+		}
+
 		const postId = getCurrentPostId( state );
 		const hasFetchedAutosave = select( coreStore ).hasFetchedAutosaves(
 			postType,
@@ -604,8 +652,8 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 			return true;
 		}
 
-		// If the title or excerpt has changed, the post is autosaveable.
-		return [ 'title', 'excerpt' ].some(
+		// If title, excerpt, or meta have changed, the post is autosaveable.
+		return [ 'title', 'excerpt', 'meta' ].some(
 			( field ) =>
 				getPostRawValue( autosave[ field ] ) !==
 				getEditedPostAttribute( state, field )
@@ -681,15 +729,9 @@ export function isDeletingPost( state ) {
  *
  * @return {boolean} Whether post is being saved.
  */
-export const isSavingPost = createRegistrySelector( ( select ) => ( state ) => {
-	const postType = getCurrentPostType( state );
-	const postId = getCurrentPostId( state );
-	return select( coreStore ).isSavingEntityRecord(
-		'postType',
-		postType,
-		postId
-	);
-} );
+export function isSavingPost( state ) {
+	return !! state.saving.pending;
+}
 
 /**
  * Returns true if non-post entities are currently being saved, or false otherwise.
@@ -760,10 +802,7 @@ export const didPostSaveRequestFail = createRegistrySelector(
  * @return {boolean} Whether the post is autosaving.
  */
 export function isAutosavingPost( state ) {
-	if ( ! isSavingPost( state ) ) {
-		return false;
-	}
-	return Boolean( state.saving.options?.isAutosave );
+	return isSavingPost( state ) && Boolean( state.saving.options?.isAutosave );
 }
 
 /**
@@ -774,10 +813,7 @@ export function isAutosavingPost( state ) {
  * @return {boolean} Whether the post is being previewed.
  */
 export function isPreviewingPost( state ) {
-	if ( ! isSavingPost( state ) ) {
-		return false;
-	}
-	return Boolean( state.saving.options?.isPreview );
+	return isSavingPost( state ) && Boolean( state.saving.options?.isPreview );
 }
 
 /**
@@ -785,7 +821,7 @@ export function isPreviewingPost( state ) {
  *
  * @param {Object} state Global application state.
  *
- * @return {string?} Preview Link.
+ * @return {string | undefined} Preview Link.
  */
 export function getEditedPostPreviewLink( state ) {
 	if ( state.saving.pending || isSavingPost( state ) ) {
@@ -818,54 +854,56 @@ export function getEditedPostPreviewLink( state ) {
  * is a single block within the post and it is of a type known to match a
  * default post format. Returns null if the format cannot be determined.
  *
- * @param {Object} state Global application state.
- *
  * @return {?string} Suggested post format.
  */
-export function getSuggestedPostFormat( state ) {
-	const blocks = getEditorBlocks( state );
-
-	if ( blocks.length > 2 ) return null;
-
-	let name;
-	// If there is only one block in the content of the post grab its name
-	// so we can derive a suitable post format from it.
-	if ( blocks.length === 1 ) {
-		name = blocks[ 0 ].name;
-		// Check for core/embed `video` and `audio` eligible suggestions.
-		if ( name === 'core/embed' ) {
-			const provider = blocks[ 0 ].attributes?.providerNameSlug;
-			if ( [ 'youtube', 'vimeo' ].includes( provider ) ) {
-				name = 'core/video';
-			} else if ( [ 'spotify', 'soundcloud' ].includes( provider ) ) {
-				name = 'core/audio';
+export const getSuggestedPostFormat = createRegistrySelector(
+	( select ) => () => {
+		const blocks = select( blockEditorStore ).getBlocks();
+
+		if ( blocks.length > 2 ) {
+			return null;
+		}
+
+		let name;
+		// If there is only one block in the content of the post grab its name
+		// so we can derive a suitable post format from it.
+		if ( blocks.length === 1 ) {
+			name = blocks[ 0 ].name;
+			// Check for core/embed `video` and `audio` eligible suggestions.
+			if ( name === 'core/embed' ) {
+				const provider = blocks[ 0 ].attributes?.providerNameSlug;
+				if ( [ 'youtube', 'vimeo' ].includes( provider ) ) {
+					name = 'core/video';
+				} else if ( [ 'spotify', 'soundcloud' ].includes( provider ) ) {
+					name = 'core/audio';
+				}
 			}
 		}
-	}
 
-	// If there are two blocks in the content and the last one is a text blocks
-	// grab the name of the first one to also suggest a post format from it.
-	if ( blocks.length === 2 && blocks[ 1 ].name === 'core/paragraph' ) {
-		name = blocks[ 0 ].name;
-	}
+		// If there are two blocks in the content and the last one is a text blocks
+		// grab the name of the first one to also suggest a post format from it.
+		if ( blocks.length === 2 && blocks[ 1 ].name === 'core/paragraph' ) {
+			name = blocks[ 0 ].name;
+		}
 
-	// We only convert to default post formats in core.
-	switch ( name ) {
-		case 'core/image':
-			return 'image';
-		case 'core/quote':
-		case 'core/pullquote':
-			return 'quote';
-		case 'core/gallery':
-			return 'gallery';
-		case 'core/video':
-			return 'video';
-		case 'core/audio':
-			return 'audio';
-		default:
-			return null;
+		// We only convert to default post formats in core.
+		switch ( name ) {
+			case 'core/image':
+				return 'image';
+			case 'core/quote':
+			case 'core/pullquote':
+				return 'quote';
+			case 'core/gallery':
+				return 'gallery';
+			case 'core/video':
+				return 'video';
+			case 'core/audio':
+				return 'audio';
+			default:
+				return null;
+		}
 	}
-}
+);
 
 /**
  * Returns the content of the post being edited.
@@ -967,7 +1005,7 @@ export function getEditedPostSlug( state ) {
 }
 
 /**
- * Returns the permalink for a post, split into it's three parts: the prefix,
+ * Returns the permalink for a post, split into its three parts: the prefix,
  * the postName, and the suffix.
  *
  * @param {Object} state Editor state.
@@ -1088,10 +1126,7 @@ export function canUserUseUnfilteredHTML( state ) {
  */
 export const isPublishSidebarEnabled = createRegistrySelector(
 	( select ) => () =>
-		!! select( preferencesStore ).get(
-			'core/edit-post',
-			'isPublishSidebarEnabled'
-		)
+		!! select( preferencesStore ).get( 'core', 'isPublishSidebarEnabled' )
 );
 
 /**
@@ -1100,10 +1135,77 @@ export const isPublishSidebarEnabled = createRegistrySelector(
  * @param {Object} state
  * @return {Array} Block list.
  */
-export function getEditorBlocks( state ) {
-	return getEditedPostAttribute( state, 'blocks' ) || EMPTY_ARRAY;
+export const getEditorBlocks = createSelector(
+	( state ) => {
+		return (
+			getEditedPostAttribute( state, 'blocks' ) ||
+			parse( getEditedPostContent( state ) )
+		);
+	},
+	( state ) => [
+		getEditedPostAttribute( state, 'blocks' ),
+		getEditedPostContent( state ),
+	]
+);
+
+/**
+ * Returns true if the given panel was programmatically removed, or false otherwise.
+ * All panels are not removed by default.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} panelName A string that identifies the panel.
+ *
+ * @return {boolean} Whether or not the panel is removed.
+ */
+export function isEditorPanelRemoved( state, panelName ) {
+	return state.removedPanels.includes( panelName );
 }
 
+/**
+ * Returns true if the given panel is enabled, or false otherwise. Panels are
+ * enabled by default.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} panelName A string that identifies the panel.
+ *
+ * @return {boolean} Whether or not the panel is enabled.
+ */
+export const isEditorPanelEnabled = createRegistrySelector(
+	( select ) => ( state, panelName ) => {
+		// For backward compatibility, we check edit-post
+		// even though now this is in "editor" package.
+		const inactivePanels = select( preferencesStore ).get(
+			'core',
+			'inactivePanels'
+		);
+		return (
+			! isEditorPanelRemoved( state, panelName ) &&
+			! inactivePanels?.includes( panelName )
+		);
+	}
+);
+
+/**
+ * Returns true if the given panel is open, or false otherwise. Panels are
+ * closed by default.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} panelName A string that identifies the panel.
+ *
+ * @return {boolean} Whether or not the panel is open.
+ */
+export const isEditorPanelOpened = createRegistrySelector(
+	( select ) => ( state, panelName ) => {
+		// For backward compatibility, we check edit-post
+		// even though now this is in "editor" package.
+		const openPanels = select( preferencesStore ).get(
+			'core',
+			'openPanels'
+		);
+		return !! openPanels?.includes( panelName );
+	}
+);
+
 /**
  * A block selection object.
  *
@@ -1164,7 +1266,7 @@ export function getEditorSelection( state ) {
  * @return {boolean} is Ready.
  */
 export function __unstableIsEditorReady( state ) {
-	return state.isReady;
+	return !! state.postId;
 }
 
 /**
@@ -1178,6 +1280,68 @@ export function getEditorSettings( state ) {
 	return state.editorSettings;
 }
 
+/**
+ * Returns the post editor's rendering mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string} Rendering mode.
+ */
+export function getRenderingMode( state ) {
+	return state.renderingMode;
+}
+
+/**
+ * Returns the current editing canvas device type.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Device type.
+ */
+export const getDeviceType = createRegistrySelector(
+	( select ) => ( state ) => {
+		const isZoomOut = unlock( select( blockEditorStore ) ).isZoomOut();
+		if ( isZoomOut ) {
+			return 'Desktop';
+		}
+		return state.deviceType;
+	}
+);
+
+/**
+ * Returns true if the list view is opened.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the list view is opened.
+ */
+export function isListViewOpened( state ) {
+	return state.listViewPanel;
+}
+
+/**
+ * Returns true if the inserter is opened.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the inserter is opened.
+ */
+export function isInserterOpened( state ) {
+	return !! state.blockInserterPanel;
+}
+
+/**
+ * Returns the current editing mode.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Editing mode.
+ */
+export const getEditorMode = createRegistrySelector(
+	( select ) => () =>
+		select( preferencesStore ).get( 'core', 'editorMode' ) ?? 'visual'
+);
+
 /*
  * Backward compatibility
  */
@@ -1538,16 +1702,20 @@ export const getBlockListSettings = getBlockEditorSelector(
 	'getBlockListSettings'
 );
 
-/**
- * Returns the default template types.
- *
- * @param {Object} state Global application state.
- *
- * @return {Object} The template types.
- */
-export function __experimentalGetDefaultTemplateTypes( state ) {
-	return getEditorSettings( state )?.defaultTemplateTypes;
-}
+export const __experimentalGetDefaultTemplateTypes = createRegistrySelector(
+	( select ) => () => {
+		deprecated(
+			"select('core/editor').__experimentalGetDefaultTemplateTypes",
+			{
+				since: '6.8',
+				alternative:
+					"select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_types",
+			}
+		);
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.default_template_types;
+	}
+);
 
 /**
  * Returns the default template part areas.
@@ -1556,15 +1724,26 @@ export function __experimentalGetDefaultTemplateTypes( state ) {
  *
  * @return {Array} The template part areas.
  */
-export const __experimentalGetDefaultTemplatePartAreas = createSelector(
-	( state ) => {
-		const areas =
-			getEditorSettings( state )?.defaultTemplatePartAreas || [];
-		return areas?.map( ( item ) => {
-			return { ...item, icon: getTemplatePartIcon( item.icon ) };
-		} );
-	},
-	( state ) => [ getEditorSettings( state )?.defaultTemplatePartAreas ]
+export const __experimentalGetDefaultTemplatePartAreas = createRegistrySelector(
+	( select ) =>
+		createSelector( () => {
+			deprecated(
+				"select('core/editor').__experimentalGetDefaultTemplatePartAreas",
+				{
+					since: '6.8',
+					alternative:
+						"select('core/core-data').getEntityRecord( 'root', '__unstableBase' )?.default_template_part_areas",
+				}
+			);
+
+			const areas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			return areas.map( ( item ) => {
+				return { ...item, icon: getTemplatePartIcon( item.icon ) };
+			} );
+		} )
 );
 
 /**
@@ -1575,20 +1754,30 @@ export const __experimentalGetDefaultTemplatePartAreas = createSelector(
  *
  * @return {Object} The template type.
  */
-export const __experimentalGetDefaultTemplateType = createSelector(
-	( state, slug ) => {
-		const templateTypes = __experimentalGetDefaultTemplateTypes( state );
-		if ( ! templateTypes ) {
-			return EMPTY_OBJECT;
-		}
+export const __experimentalGetDefaultTemplateType = createRegistrySelector(
+	( select ) =>
+		createSelector( ( state, slug ) => {
+			deprecated(
+				"select('core/editor').__experimentalGetDefaultTemplateType",
+				{
+					since: '6.8',
+				}
+			);
+			const templateTypes = select( coreStore ).getEntityRecord(
+				'root',
+				'__unstableBase'
+			)?.default_template_types;
+
+			if ( ! templateTypes ) {
+				return EMPTY_OBJECT;
+			}
 
-		return (
-			Object.values( templateTypes ).find(
-				( type ) => type.slug === slug
-			) ?? EMPTY_OBJECT
-		);
-	},
-	( state, slug ) => [ __experimentalGetDefaultTemplateTypes( state ), slug ]
+			return (
+				Object.values( templateTypes ).find(
+					( type ) => type.slug === slug
+				) ?? EMPTY_OBJECT
+			);
+		} )
 );
 
 /**
@@ -1599,32 +1788,32 @@ export const __experimentalGetDefaultTemplateType = createSelector(
  * @param {Object} template The template for which we need information.
  * @return {Object} Information about the template, including title, description, and icon.
  */
-export function __experimentalGetTemplateInfo( state, template ) {
-	if ( ! template ) {
-		return EMPTY_OBJECT;
-	}
+export const __experimentalGetTemplateInfo = createRegistrySelector(
+	( select ) =>
+		createSelector( ( state, template ) => {
+			deprecated( "select('core/editor').__experimentalGetTemplateInfo", {
+				since: '6.8',
+			} );
 
-	const { description, slug, title, area } = template;
-	const { title: defaultTitle, description: defaultDescription } =
-		__experimentalGetDefaultTemplateType( state, slug );
+			if ( ! template ) {
+				return EMPTY_OBJECT;
+			}
 
-	const templateTitle = typeof title === 'string' ? title : title?.rendered;
-	const templateDescription =
-		typeof description === 'string' ? description : description?.raw;
-	const templateIcon =
-		__experimentalGetDefaultTemplatePartAreas( state ).find(
-			( item ) => area === item.area
-		)?.icon || layout;
+			const templateTypes =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_types || [];
 
-	return {
-		title:
-			templateTitle && templateTitle !== slug
-				? templateTitle
-				: defaultTitle || slug,
-		description: templateDescription || defaultDescription,
-		icon: templateIcon,
-	};
-}
+			const templateAreas =
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
+
+			return getTemplateInfo( {
+				template,
+				templateAreas,
+				templateTypes,
+			} );
+		} )
+);
 
 /**
  * Returns a post type label depending on the current post.
@@ -1642,3 +1831,14 @@ export const getPostTypeLabel = createRegistrySelector(
 		return postType?.labels?.singular_name;
 	}
 );
+
+/**
+ * Returns true if the publish sidebar is opened.
+ *
+ * @param {Object} state Global application state
+ *
+ * @return {boolean} Whether the publish sidebar is open.
+ */
+export function isPublishSidebarOpened( state ) {
+	return state.publishSidebarActive;
+}
diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
index ecc567aa69a8ce..206c60a159d04f 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -15,8 +15,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import * as actions from '../actions';
 import { store as editorStore } from '..';
 
-jest.useRealTimers();
-
 const postId = 44;
 
 const postTypeConfig = {
@@ -35,6 +33,7 @@ const postTypeEntity = {
 		item_updated: 'Updated Post',
 		item_published: 'Post published',
 		item_reverted_to_draft: 'Post reverted to draft.',
+		item_trashed: 'Post trashed.',
 	},
 };
 
@@ -91,7 +90,9 @@ describe( 'Post actions', () => {
 					method === 'GET' &&
 					path.startsWith( '/wp/v2/types/post' )
 				) {
-					return {};
+					return {
+						json: () => Promise.resolve( {} ),
+					};
 				}
 
 				throw {
@@ -179,7 +180,9 @@ describe( 'Post actions', () => {
 						path.startsWith( '/wp/v2/types/post' ) ||
 						path.startsWith( `/wp/v2/posts/${ postId }` )
 					) {
-						return {};
+						return {
+							json: () => Promise.resolve( {} ),
+						};
 					}
 				}
 
@@ -263,7 +266,9 @@ describe( 'Post actions', () => {
 					method === 'GET' &&
 					path.startsWith( '/wp/v2/types/post' )
 				) {
-					return {};
+					return {
+						json: () => Promise.resolve( {} ),
+					};
 				}
 
 				throw {
@@ -288,7 +293,12 @@ describe( 'Post actions', () => {
 
 			// Check that there are no notices.
 			const notices = registry.select( noticesStore ).getNotices();
-			expect( notices ).toEqual( [] );
+			expect( notices ).toMatchObject( [
+				{
+					status: 'success',
+					content: 'Post trashed.',
+				},
+			] );
 
 			// Check the new status.
 			const { status } = registry.select( editorStore ).getCurrentPost();
@@ -428,4 +438,218 @@ describe( 'Editor actions', () => {
 			).toBe( false );
 		} );
 	} );
+
+	describe( 'toggleEditorPanelEnabled', () => {
+		it( 'toggles panels to be enabled and not enabled', () => {
+			const registry = createRegistryWithStores();
+
+			// This will switch it off, since the default is on.
+			registry
+				.dispatch( editorStore )
+				.toggleEditorPanelEnabled( 'control-panel' );
+
+			expect(
+				registry
+					.select( editorStore )
+					.isEditorPanelEnabled( 'control-panel' )
+			).toBe( false );
+
+			// Switch it on again.
+			registry
+				.dispatch( editorStore )
+				.toggleEditorPanelEnabled( 'control-panel' );
+
+			expect(
+				registry
+					.select( editorStore )
+					.isEditorPanelEnabled( 'control-panel' )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'toggleEditorPanelOpened', () => {
+		it( 'toggles panels open and closed', () => {
+			const registry = createRegistryWithStores();
+
+			// This will open it, since the default is closed.
+			registry
+				.dispatch( editorStore )
+				.toggleEditorPanelOpened( 'control-panel' );
+
+			expect(
+				registry
+					.select( editorStore )
+					.isEditorPanelOpened( 'control-panel' )
+			).toBe( true );
+
+			// Close it.
+			registry
+				.dispatch( editorStore )
+				.toggleEditorPanelOpened( 'control-panel' );
+
+			expect(
+				registry
+					.select( editorStore )
+					.isEditorPanelOpened( 'control-panel' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'switchEditorMode', () => {
+		let registry;
+
+		beforeEach( () => {
+			registry = createRegistryWithStores();
+		} );
+
+		it( 'to visual', () => {
+			// Switch to text first, since the default is visual.
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'text'
+			);
+			registry.dispatch( editorStore ).switchEditorMode( 'visual' );
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'visual'
+			);
+		} );
+
+		it( 'to text', () => {
+			// It defaults to visual.
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'visual'
+			);
+			// Add a selected client id and make sure it's there.
+			const clientId = 'clientId_1';
+			registry.dispatch( blockEditorStore ).selectionChange( clientId );
+			expect(
+				registry.select( blockEditorStore ).getSelectedBlockClientId()
+			).toEqual( clientId );
+
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect(
+				registry.select( blockEditorStore ).getSelectedBlockClientId()
+			).toBeNull();
+			expect( registry.select( editorStore ).getEditorMode() ).toEqual(
+				'text'
+			);
+		} );
+		it( 'should turn off distraction free mode when switching to code editor', () => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'distractionFree', true );
+			registry.dispatch( editorStore ).switchEditorMode( 'text' );
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'distractionFree' )
+			).toBe( false );
+		} );
+	} );
+
+	describe( 'toggleDistractionFree', () => {
+		it( 'should properly update settings to prevent layout corruption when enabling distraction free mode', () => {
+			const registry = createRegistryWithStores();
+
+			// Enable everything that shouldn't be enabled in distraction free mode.
+			registry
+				.dispatch( preferencesStore )
+				.set( 'core', 'fixedToolbar', true );
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			// Initial state is falsy.
+			registry.dispatch( editorStore ).toggleDistractionFree();
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'fixedToolbar' )
+			).toBe( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+			expect(
+				registry
+					.select( preferencesStore )
+					.get( 'core', 'distractionFree' )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'setIsInserterOpened', () => {
+		it( 'should open and close the inserter', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( false );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the list view should close when the inserter is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should open and close the list view', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( false );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the inserter should close when the list view is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+	} );
 } );
diff --git a/packages/editor/src/store/test/private-selectors.js b/packages/editor/src/store/test/private-selectors.js
new file mode 100644
index 00000000000000..bf2bc1f74065cb
--- /dev/null
+++ b/packages/editor/src/store/test/private-selectors.js
@@ -0,0 +1,78 @@
+/**
+ * Internal dependencies
+ */
+import { getPostBlocksByName } from '../private-selectors';
+
+describe( 'getPostBlocksByName', () => {
+	const state = {
+		blocks: {
+			byClientId: new Map( [
+				[ 'block1', { name: 'core/paragraph' } ],
+				[ 'block2', { name: 'core/heading' } ],
+				[ 'block3', { name: 'core/paragraph' } ],
+				[ 'block4', { name: 'core/query' } ],
+				[ 'block5', { name: 'core/paragraph' } ],
+				[ 'block6', { name: 'core/heading' } ],
+			] ),
+			order: new Map( [
+				[ '', [ 'block1', 'block2', 'block3', 'block4' ] ],
+				[ 'block4', [ 'block5', 'block6' ] ],
+			] ),
+			parents: new Map( [
+				[ 'block1', '' ],
+				[ 'block2', '' ],
+				[ 'block3', '' ],
+				[ 'block4', '' ],
+				[ 'block5', 'block4' ],
+				[ 'block6', 'block4' ],
+			] ),
+		},
+	};
+
+	getPostBlocksByName.registry = {
+		select: () => ( {
+			getBlocksByName: ( blockNames ) =>
+				Array.from( state.blocks.byClientId.keys() ).filter(
+					( clientId ) =>
+						blockNames.includes(
+							state.blocks.byClientId.get( clientId ).name
+						)
+				),
+			getBlockParents: ( clientId ) => {
+				const parents = [];
+				let parent = state.blocks.parents.get( clientId );
+				while ( parent ) {
+					parents.push( parent );
+					parent = state.blocks.parents.get( parent );
+				}
+				return parents;
+			},
+			getBlockName: ( clientId ) =>
+				state.blocks.byClientId.get( clientId ).name,
+			getBlocks: () => [],
+		} ),
+	};
+
+	it( 'should return top-level blocks of the specified name', () => {
+		const result = getPostBlocksByName( state, 'core/paragraph' );
+		expect( result ).toEqual( [ 'block1', 'block3' ] );
+	} );
+
+	it( 'should return an empty array if no blocks match', () => {
+		const result = getPostBlocksByName( state, 'core/non-existent' );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should ignore blocks inside a query block', () => {
+		const result = getPostBlocksByName( state, 'core/paragraph' );
+		expect( result ).toEqual( [ 'block1', 'block3' ] );
+	} );
+
+	it( 'should handle multiple block names', () => {
+		const result = getPostBlocksByName( state, [
+			'core/paragraph',
+			'core/heading',
+		] );
+		expect( result ).toEqual( [ 'block1', 'block2', 'block3' ] );
+	} );
+} );
diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js
index 3b0ea9d3340a1e..3971ad30c9de74 100644
--- a/packages/editor/src/store/test/reducer.js
+++ b/packages/editor/src/store/test/reducer.js
@@ -14,6 +14,9 @@ import {
 	saving,
 	postSavingLock,
 	postAutosavingLock,
+	removedPanels,
+	blockInserterPanel,
+	listViewPanel,
 } from '../reducer';
 
 describe( 'state', () => {
@@ -264,4 +267,77 @@ describe( 'state', () => {
 			expect( state ).toEqual( {} );
 		} );
 	} );
+
+	describe( 'removedPanels', () => {
+		it( 'should remove panel', () => {
+			const original = deepFreeze( [] );
+			const state = removedPanels( original, {
+				type: 'REMOVE_PANEL',
+				panelName: 'post-status',
+			} );
+			expect( state ).toEqual( [ 'post-status' ] );
+		} );
+
+		it( 'should not remove already removed panel', () => {
+			const original = deepFreeze( [ 'post-status' ] );
+			const state = removedPanels( original, {
+				type: 'REMOVE_PANEL',
+				panelName: 'post-status',
+			} );
+			expect( state ).toBe( original );
+		} );
+	} );
+
+	describe( 'blockInserterPanel()', () => {
+		it( 'should apply default state', () => {
+			expect( blockInserterPanel( undefined, {} ) ).toEqual( false );
+		} );
+
+		it( 'should default to returning the same state', () => {
+			expect( blockInserterPanel( true, {} ) ).toBe( true );
+		} );
+
+		it( 'should close the inserter when opening the list view panel', () => {
+			expect(
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
+			).toBe( false );
+		} );
+
+		it( 'should not change the state when closing the list view panel', () => {
+			expect(
+				blockInserterPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
+			).toBe( true );
+		} );
+	} );
+
+	describe( 'listViewPanel()', () => {
+		it( 'should apply default state', () => {
+			expect( listViewPanel( undefined, {} ) ).toEqual( false );
+		} );
+
+		it( 'should default to returning the same state', () => {
+			expect( listViewPanel( true, {} ) ).toBe( true );
+		} );
+
+		it( 'should set the open state of the list view panel', () => {
+			expect(
+				listViewPanel( false, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: true,
+				} )
+			).toBe( true );
+			expect(
+				listViewPanel( true, {
+					type: 'SET_IS_LIST_VIEW_OPENED',
+					isOpen: false,
+				} )
+			).toBe( false );
+		} );
+	} );
 } );
diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js
index 4b29e251f80c02..2a36fabcd2ec97 100644
--- a/packages/editor/src/store/test/selectors.js
+++ b/packages/editor/src/store/test/selectors.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * WordPress dependencies
  */
@@ -11,7 +16,6 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 import { RawHTML } from '@wordpress/element';
-import { layout, footer, header } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -75,10 +79,6 @@ selectorNames.forEach( ( name ) => {
 				};
 			},
 
-			isSavingEntityRecord() {
-				return state.saving && state.saving.requesting;
-			},
-
 			getLastEntitySaveError() {
 				const saving = state.saving;
 				const successful = saving && saving.successful;
@@ -126,6 +126,10 @@ selectorNames.forEach( ( name ) => {
 					},
 				};
 			},
+
+			getBlocks() {
+				return state.getBlocks && state.getBlocks();
+			},
 		} );
 
 		selectorNames.forEach( ( otherName ) => {
@@ -183,40 +187,11 @@ const {
 	isPostAutosavingLocked,
 	canUserUseUnfilteredHTML,
 	getPostTypeLabel,
-	__experimentalGetDefaultTemplateType,
-	__experimentalGetDefaultTemplateTypes,
-	__experimentalGetTemplateInfo,
-	__experimentalGetDefaultTemplatePartAreas,
+	isEditorPanelRemoved,
+	isInserterOpened,
+	isListViewOpened,
 } = selectors;
 
-const defaultTemplateTypes = [
-	{
-		title: 'Default (Index)',
-		description: 'Main template',
-		slug: 'index',
-	},
-	{
-		title: '404 (Not Found)',
-		description: 'Applied when content cannot be found',
-		slug: '404',
-	},
-];
-
-const defaultTemplatePartAreas = [
-	{
-		area: 'header',
-		label: 'Header',
-		description: 'Some description of a header',
-		icon: 'header',
-	},
-	{
-		area: 'footer',
-		label: 'Footer',
-		description: 'Some description of a footer',
-		icon: 'footer',
-	},
-];
-
 describe( 'selectors', () => {
 	let cachedSelectors;
 
@@ -264,7 +239,7 @@ describe( 'selectors', () => {
 			parent: [ 'core/test-block-b' ],
 		} );
 
-		registerBlockType( 'core/test-freeform', {
+		registerBlockType( 'core/freeform', {
 			save: ( props ) => <RawHTML>{ props.attributes.content }</RawHTML>,
 			category: 'text',
 			title: 'Test Freeform Content Handler',
@@ -291,7 +266,7 @@ describe( 'selectors', () => {
 			save: () => null,
 		} );
 
-		setFreeformContentHandlerName( 'core/test-freeform' );
+		setFreeformContentHandlerName( 'core/freeform' );
 		setDefaultBlockName( 'core/test-default' );
 
 		cachedSelectors.forEach( ( { clear } ) => clear() );
@@ -302,7 +277,7 @@ describe( 'selectors', () => {
 		unregisterBlockType( 'core/test-block-a' );
 		unregisterBlockType( 'core/test-block-b' );
 		unregisterBlockType( 'core/test-block-c' );
-		unregisterBlockType( 'core/test-freeform' );
+		unregisterBlockType( 'core/freeform' );
 		unregisterBlockType( 'core/test-default' );
 
 		setFreeformContentHandlerName( undefined );
@@ -729,6 +704,31 @@ describe( 'selectors', () => {
 				b: 2,
 			} );
 		} );
+
+		it( 'should return the same value for mergeable properties when called multiple times', () => {
+			const state = {
+				currentPost: {
+					meta: {
+						a: 1,
+						b: 1,
+					},
+				},
+				editor: {
+					present: {
+						edits: {
+							meta: {
+								b: 2,
+							},
+						},
+					},
+				},
+				initialEdits: {},
+			};
+
+			expect( getEditedPostAttribute( state, 'meta' ) ).toBe(
+				getEditedPostAttribute( state, 'meta' )
+			);
+		} );
 	} );
 
 	describe( 'getCurrentPostLastRevisionId', () => {
@@ -1254,7 +1254,7 @@ describe( 'selectors', () => {
 					title: 'sassel',
 				},
 				saving: {
-					requesting: true,
+					pending: true,
 				},
 			};
 
@@ -1320,7 +1320,9 @@ describe( 'selectors', () => {
 								},
 							],
 						},
-						edits: {},
+						edits: {
+							content: () => {},
+						},
 					},
 				},
 				initialEdits: {},
@@ -1339,7 +1341,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1366,7 +1368,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1403,9 +1405,8 @@ describe( 'selectors', () => {
 				currentPost: {
 					title: 'sassel',
 				},
-				saving: {
-					requesting: true,
-				},
+				postAutosavingLock: {},
+				saving: {},
 				getCurrentUser() {},
 				hasFetchedAutosaves() {
 					return false;
@@ -1434,9 +1435,8 @@ describe( 'selectors', () => {
 				currentPost: {
 					title: 'sassel',
 				},
-				saving: {
-					requesting: true,
-				},
+				postAutosavingLock: {},
+				saving: {},
 				getCurrentUser() {},
 				hasFetchedAutosaves() {
 					return true;
@@ -1597,14 +1597,13 @@ describe( 'selectors', () => {
 			const state = {
 				editor: {
 					present: {
-						blocks: {
-							value: [],
-						},
 						edits: {},
 					},
 				},
 				initialEdits: {},
-				currentPost: {},
+				currentPost: {
+					content: '',
+				},
 			};
 
 			expect( isEditedPostEmpty( state ) ).toBe( true );
@@ -1626,7 +1625,9 @@ describe( 'selectors', () => {
 								},
 							],
 						},
-						edits: {},
+						edits: {
+							content: () => {},
+						},
 					},
 				},
 				initialEdits: {},
@@ -1656,7 +1657,9 @@ describe( 'selectors', () => {
 								},
 							],
 						},
-						edits: {},
+						edits: {
+							content: () => {},
+						},
 					},
 				},
 				initialEdits: {},
@@ -1666,7 +1669,7 @@ describe( 'selectors', () => {
 			expect( isEditedPostEmpty( state ) ).toBe( true );
 		} );
 
-		it( 'should return false if blocks, but empty content edit', () => {
+		it( 'should return true if blocks, but empty content edit', () => {
 			const state = {
 				editor: {
 					present: {
@@ -1693,7 +1696,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( isEditedPostEmpty( state ) ).toBe( false );
+			expect( isEditedPostEmpty( state ) ).toBe( true );
 		} );
 
 		it( 'should return true if the post has an empty content property', () => {
@@ -1715,7 +1718,7 @@ describe( 'selectors', () => {
 			expect( isEditedPostEmpty( state ) ).toBe( true );
 		} );
 
-		it( 'should return true if edits include a non-empty content property, but blocks are empty', () => {
+		it( 'should return false if edits include a non-empty content property', () => {
 			const state = {
 				editor: {
 					present: {
@@ -1731,7 +1734,7 @@ describe( 'selectors', () => {
 				currentPost: {},
 			};
 
-			expect( isEditedPostEmpty( state ) ).toBe( true );
+			expect( isEditedPostEmpty( state ) ).toBe( false );
 		} );
 
 		it( 'should return true if empty classic block', () => {
@@ -1742,7 +1745,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1750,7 +1753,9 @@ describe( 'selectors', () => {
 								},
 							],
 						},
-						edits: {},
+						edits: {
+							content: () => {},
+						},
 					},
 				},
 				initialEdits: {},
@@ -1768,7 +1773,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1796,7 +1801,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: 'Test Data',
@@ -1824,7 +1829,7 @@ describe( 'selectors', () => {
 							value: [
 								{
 									clientId: 123,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -1832,7 +1837,7 @@ describe( 'selectors', () => {
 								},
 								{
 									clientId: 456,
-									name: 'core/test-freeform',
+									name: 'core/freeform',
 									isValid: true,
 									attributes: {
 										content: '',
@@ -2017,7 +2022,7 @@ describe( 'selectors', () => {
 		it( 'should return true if the post is currently being saved', () => {
 			const state = {
 				saving: {
-					requesting: true,
+					pending: true,
 				},
 			};
 
@@ -2027,7 +2032,7 @@ describe( 'selectors', () => {
 		it( 'should return false if the post is not currently being saved', () => {
 			const state = {
 				saving: {
-					requesting: false,
+					pending: false,
 				},
 			};
 
@@ -2129,16 +2134,9 @@ describe( 'selectors', () => {
 	describe( 'getSuggestedPostFormat', () => {
 		it( 'returns null if cannot be determined', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [],
-						},
-						edits: {},
-					},
+				getBlocks() {
+					return [];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBeNull();
@@ -2146,73 +2144,56 @@ describe( 'selectors', () => {
 
 		it( 'return null if only one block of type `core/embed` and provider not matched', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 567,
-									name: 'core/embed',
-									attributes: {
-										providerNameSlug: 'instagram',
-									},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 567,
+							name: 'core/embed',
+							attributes: {
+								providerNameSlug: 'instagram',
+							},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 			expect( getSuggestedPostFormat( state ) ).toBeNull();
 		} );
 
 		it( 'return null if only one block of type `core/embed` and provider not exists', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 567,
-									name: 'core/embed',
-									attributes: {},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 567,
+							name: 'core/embed',
+							attributes: {},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 			expect( getSuggestedPostFormat( state ) ).toBeNull();
 		} );
 
 		it( 'returns null if there is more than one block in the post', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 123,
-									name: 'core/image',
-									attributes: {},
-								},
-								{
-									clientId: 456,
-									name: 'core/quote',
-									attributes: {},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 123,
+							name: 'core/image',
+							attributes: {},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+						{
+							clientId: 456,
+							name: 'core/quote',
+							attributes: {},
+							innerBlocks: [],
+						},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBeNull();
@@ -2220,22 +2201,16 @@ describe( 'selectors', () => {
 
 		it( 'returns Image if the first block is of type `core/image`', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 123,
-									name: 'core/image',
-									attributes: {},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 123,
+							name: 'core/image',
+							attributes: {},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBe( 'image' );
@@ -2243,22 +2218,16 @@ describe( 'selectors', () => {
 
 		it( 'returns Quote if the first block is of type `core/quote`', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 456,
-									name: 'core/quote',
-									attributes: {},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 456,
+							name: 'core/quote',
+							attributes: {},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBe( 'quote' );
@@ -2266,24 +2235,18 @@ describe( 'selectors', () => {
 
 		it( 'returns Video if the first block is of type `core/embed from youtube`', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 567,
-									name: 'core/embed',
-									attributes: {
-										providerNameSlug: 'youtube',
-									},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 567,
+							name: 'core/embed',
+							attributes: {
+								providerNameSlug: 'youtube',
+							},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBe( 'video' );
@@ -2291,24 +2254,18 @@ describe( 'selectors', () => {
 
 		it( 'returns Audio if the first block is of type `core/embed from soundcloud`', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 567,
-									name: 'core/embed',
-									attributes: {
-										providerNameSlug: 'soundcloud',
-									},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 567,
+							name: 'core/embed',
+							attributes: {
+								providerNameSlug: 'soundcloud',
+							},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBe( 'audio' );
@@ -2316,27 +2273,22 @@ describe( 'selectors', () => {
 
 		it( 'returns Quote if the first block is of type `core/quote` and second is of type `core/paragraph`', () => {
 			const state = {
-				editor: {
-					present: {
-						blocks: {
-							value: [
-								{
-									clientId: 456,
-									name: 'core/quote',
-									attributes: {},
-								},
-								{
-									clientId: 789,
-									name: 'core/paragraph',
-									attributes: {},
-								},
-							],
+				getBlocks() {
+					return [
+						{
+							clientId: 456,
+							name: 'core/quote',
+							attributes: {},
+							innerBlocks: [],
 						},
-						edits: {},
-					},
+						{
+							clientId: 789,
+							name: 'core/paragraph',
+							attributes: {},
+							innerBlocks: [],
+						},
+					];
 				},
-				initialEdits: {},
-				currentPost: {},
 			};
 
 			expect( getSuggestedPostFormat( state ) ).toBe( 'quote' );
@@ -2415,7 +2367,7 @@ describe( 'selectors', () => {
 		} );
 
 		it( "returns removep'd serialization of blocks for single unknown", () => {
-			const unknownBlock = createBlock( 'core/test-freeform', {
+			const unknownBlock = createBlock( 'core/freeform', {
 				content: '<p>foo</p>',
 			} );
 			const state = {
@@ -2437,10 +2389,10 @@ describe( 'selectors', () => {
 		} );
 
 		it( "returns non-removep'd serialization of blocks for multiple unknown", () => {
-			const firstUnknown = createBlock( 'core/test-freeform', {
+			const firstUnknown = createBlock( 'core/freeform', {
 				content: '<p>foo</p>',
 			} );
-			const secondUnknown = createBlock( 'core/test-freeform', {
+			const secondUnknown = createBlock( 'core/freeform', {
 				content: '<p>bar</p>',
 			} );
 			const state = {
@@ -2781,228 +2733,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '__experimentalGetDefaultTemplateTypes', () => {
-		const state = { editorSettings: { defaultTemplateTypes } };
-
-		it( 'returns undefined if there are no default template types', () => {
-			const emptyState = { editorSettings: {} };
-			expect(
-				__experimentalGetDefaultTemplateTypes( emptyState )
-			).toBeUndefined();
-		} );
-
-		it( 'returns a list of default template types if present in state', () => {
-			expect(
-				__experimentalGetDefaultTemplateTypes( state )
-			).toHaveLength( 2 );
-		} );
-	} );
-
-	describe( '__experimentalGetDefaultTemplatePartAreas', () => {
-		const state = { editorSettings: { defaultTemplatePartAreas } };
-
-		it( 'returns empty array if there are no default template part areas', () => {
-			const emptyState = { editorSettings: {} };
-			expect(
-				__experimentalGetDefaultTemplatePartAreas( emptyState )
-			).toHaveLength( 0 );
-		} );
-
-		it( 'returns a list of default template part areas if present in state', () => {
-			expect(
-				__experimentalGetDefaultTemplatePartAreas( state )
-			).toHaveLength( 2 );
-		} );
-
-		it( 'assigns an icon to each area', () => {
-			const templatePartAreas =
-				__experimentalGetDefaultTemplatePartAreas( state );
-			templatePartAreas.forEach( ( area ) =>
-				expect( area.icon ).not.toBeNull()
-			);
-		} );
-	} );
-
-	describe( '__experimentalGetDefaultTemplateType', () => {
-		const state = { editorSettings: { defaultTemplateTypes } };
-
-		it( 'returns an empty object if there are no default template types', () => {
-			const emptyState = { editorSettings: {} };
-			expect(
-				__experimentalGetDefaultTemplateType( emptyState, 'slug' )
-			).toEqual( {} );
-		} );
-
-		it( 'returns an empty object if the requested slug is not found', () => {
-			expect(
-				__experimentalGetDefaultTemplateType( state, 'foobar' )
-			).toEqual( {} );
-		} );
-
-		it( 'returns the requested default template type', () => {
-			expect(
-				__experimentalGetDefaultTemplateType( state, 'index' )
-			).toEqual( {
-				title: 'Default (Index)',
-				description: 'Main template',
-				slug: 'index',
-			} );
-		} );
-
-		it( 'returns the requested default template type even when the slug is numeric', () => {
-			expect(
-				__experimentalGetDefaultTemplateType( state, '404' )
-			).toEqual( {
-				title: '404 (Not Found)',
-				description: 'Applied when content cannot be found',
-				slug: '404',
-			} );
-		} );
-	} );
-
-	describe( '__experimentalGetTemplateInfo', () => {
-		const state = {
-			editorSettings: { defaultTemplateTypes, defaultTemplatePartAreas },
-		};
-
-		it( 'should return an empty object if no template is passed', () => {
-			expect( __experimentalGetTemplateInfo( state, null ) ).toEqual(
-				{}
-			);
-			expect( __experimentalGetTemplateInfo( state, undefined ) ).toEqual(
-				{}
-			);
-			expect( __experimentalGetTemplateInfo( state, false ) ).toEqual(
-				{}
-			);
-		} );
-
-		it( 'should return the default title if none is defined on the template', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, { slug: 'index' } ).title
-			).toEqual( 'Default (Index)' );
-		} );
-
-		it( 'should return the rendered title if defined on the template', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'index',
-					title: { rendered: 'test title' },
-				} ).title
-			).toEqual( 'test title' );
-		} );
-
-		it( 'should return the slug if no title is found', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'not a real template',
-				} ).title
-			).toEqual( 'not a real template' );
-		} );
-
-		it( 'should return the default description if none is defined on the template', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, { slug: 'index' } )
-					.description
-			).toEqual( 'Main template' );
-		} );
-
-		it( 'should return the raw excerpt as description if defined on the template', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'index',
-					description: { raw: 'test description' },
-				} ).description
-			).toEqual( 'test description' );
-		} );
-
-		it( 'should return a title, description, and icon', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, { slug: 'index' } )
-			).toEqual( {
-				title: 'Default (Index)',
-				description: 'Main template',
-				icon: layout,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'index',
-					title: { rendered: 'test title' },
-				} )
-			).toEqual( {
-				title: 'test title',
-				description: 'Main template',
-				icon: layout,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'index',
-					description: { raw: 'test description' },
-				} )
-			).toEqual( {
-				title: 'Default (Index)',
-				description: 'test description',
-				icon: layout,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'index',
-					title: { rendered: 'test title' },
-					description: { raw: 'test description' },
-				} )
-			).toEqual( {
-				title: 'test title',
-				description: 'test description',
-				icon: layout,
-			} );
-		} );
-
-		it( 'should return correct icon based on area', () => {
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'template part, area = uncategorized',
-					area: 'uncategorized',
-				} )
-			).toEqual( {
-				title: 'template part, area = uncategorized',
-				icon: layout,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'template part, area = invalid',
-					area: 'invalid',
-				} )
-			).toEqual( {
-				title: 'template part, area = invalid',
-				icon: layout,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'template part, area = header',
-					area: 'header',
-				} )
-			).toEqual( {
-				title: 'template part, area = header',
-				icon: header,
-			} );
-
-			expect(
-				__experimentalGetTemplateInfo( state, {
-					slug: 'template part, area = footer',
-					area: 'footer',
-				} )
-			).toEqual( {
-				title: 'template part, area = footer',
-				icon: footer,
-			} );
-		} );
-	} );
-
 	describe( 'getPostTypeLabel', () => {
 		it( 'should return the correct label for the current post type', () => {
 			const postTypes = [
@@ -3033,4 +2763,45 @@ describe( 'selectors', () => {
 			);
 		} );
 	} );
+	describe( 'isEditorPanelRemoved', () => {
+		it( 'should return false by default', () => {
+			const state = deepFreeze( {
+				removedPanels: [],
+			} );
+
+			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe(
+				false
+			);
+		} );
+
+		it( 'should return true when panel was removed', () => {
+			const state = deepFreeze( {
+				removedPanels: [ 'post-status' ],
+			} );
+
+			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'isInserterOpened', () => {
+		it( 'returns the block inserter panel isOpened state', () => {
+			const state = {
+				blockInserterPanel: true,
+			};
+			expect( isInserterOpened( state ) ).toBe( true );
+			state.blockInserterPanel = false;
+			expect( isInserterOpened( state ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isListViewOpened', () => {
+		it( 'returns the list view panel isOpened state', () => {
+			const state = {
+				listViewPanel: true,
+			};
+			expect( isListViewOpened( state ) ).toBe( true );
+			state.listViewPanel = false;
+			expect( isListViewOpened( state ) ).toBe( false );
+		} );
+	} );
 } );
diff --git a/packages/editor/src/store/utils/is-template-revertable.js b/packages/editor/src/store/utils/is-template-revertable.js
new file mode 100644
index 00000000000000..2cb674920e3e4c
--- /dev/null
+++ b/packages/editor/src/store/utils/is-template-revertable.js
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from '../constants';
+
+// Copy of the function from packages/edit-site/src/utils/is-template-revertable.js
+
+/**
+ * Check if a template or template part is revertable to its original theme-provided file.
+ *
+ * @param {Object} templateOrTemplatePart The entity to check.
+ * @return {boolean} Whether the entity is revertable.
+ */
+export default function isTemplateRevertable( templateOrTemplatePart ) {
+	if ( ! templateOrTemplatePart ) {
+		return false;
+	}
+
+	return (
+		templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
+		( Boolean( templateOrTemplatePart?.plugin ) ||
+			templateOrTemplatePart?.has_theme_file )
+	);
+}
diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js
index 4a3f87403d07f8..58fc9ca0d747eb 100644
--- a/packages/editor/src/store/utils/notice-builder.js
+++ b/packages/editor/src/store/utils/notice-builder.js
@@ -8,11 +8,6 @@ import { __ } from '@wordpress/i18n';
  */
 import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../constants';
 
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Builds the arguments for a success notification dispatch.
  *
@@ -24,25 +19,25 @@ import { get } from 'lodash';
 export function getNotificationArgumentsForSaveSuccess( data ) {
 	const { previousPost, post, postType } = data;
 	// Autosaves are neither shown a notice nor redirected.
-	if ( get( data.options, [ 'isAutosave' ] ) ) {
-		return [];
-	}
-
-	// No notice is shown after trashing a post
-	if ( post.status === 'trash' && previousPost.status !== 'trash' ) {
+	if ( data.options?.isAutosave ) {
 		return [];
 	}
 
 	const publishStatus = [ 'publish', 'private', 'future' ];
 	const isPublished = publishStatus.includes( previousPost.status );
 	const willPublish = publishStatus.includes( post.status );
+	const willTrash =
+		post.status === 'trash' && previousPost.status !== 'trash';
 
 	let noticeMessage;
-	let shouldShowLink = get( postType, [ 'viewable' ], false );
+	let shouldShowLink = postType?.viewable ?? false;
 	let isDraft;
 
 	// Always should a notice, which will be spoken for accessibility.
-	if ( ! isPublished && ! willPublish ) {
+	if ( willTrash ) {
+		noticeMessage = postType.labels.item_trashed;
+		shouldShowLink = false;
+	} else if ( ! isPublished && ! willPublish ) {
 		// If saving a non-published post, don't show notice.
 		noticeMessage = __( 'Draft saved.' );
 		isDraft = true;
diff --git a/packages/editor/src/store/utils/test/notice-builder.js b/packages/editor/src/store/utils/test/notice-builder.js
index 75fe7d675fc995..e66a96259680f7 100644
--- a/packages/editor/src/store/utils/test/notice-builder.js
+++ b/packages/editor/src/store/utils/test/notice-builder.js
@@ -17,6 +17,7 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 			item_scheduled: 'scheduled',
 			item_updated: 'updated',
 			view_item: 'view',
+			item_trashed: 'trash',
 		},
 		viewable: false,
 	};
@@ -74,7 +75,11 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 				},
 			],
 		],
-		[ 'when post will be trashed', [ 'publish', 'trash', true ], [] ],
+		[
+			'when post will be trashed',
+			[ 'publish', 'trash', true ],
+			[ 'trash', defaultExpectedAction ],
+		],
 	].forEach(
 		( [
 			description,
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 18fd8fef3bf12d..1a8103ae2b16c4 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -1,21 +1,56 @@
+@import "../../interface/src/style.scss";
+
 @import "./components/autocompleters/style.scss";
+@import "./components/collab-sidebar/style.scss";
+@import "./components/collapsible-block-toolbar/style.scss";
+@import "./components/block-settings-menu/style.scss";
+@import "./components/blog-title/style.scss";
+@import "./components/document-bar/style.scss";
 @import "./components/document-outline/style.scss";
+@import "./components/document-tools/style.scss";
+@import "./components/editor-interface/style.scss";
 @import "./components/editor-notices/style.scss";
 @import "./components/entities-saved-states/style.scss";
 @import "./components/error-boundary/style.scss";
+@import "./components/header/style.scss";
+@import "./components/inserter-sidebar/style.scss";
+@import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/list-view-sidebar/style.scss";
 @import "./components/page-attributes/style.scss";
+@import "./components/post-author/style.scss";
+@import "./components/post-actions/style.scss";
+@import "./components/post-card-panel/style.scss";
+@import "./components/post-content-information/style.scss";
+@import "./components/post-discussion/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
+@import "./components/post-last-edited-panel/style.scss";
 @import "./components/post-last-revision/style.scss";
 @import "./components/post-locked-modal/style.scss";
-@import "./components/post-publish-button/style.scss";
+@import "./components/post-panel-row/style.scss";
+@import "./components/post-panel-section/style.scss";
 @import "./components/post-publish-panel/style.scss";
 @import "./components/post-saved-state/style.scss";
+@import "./components/post-schedule/style.scss";
+@import "./components/post-status/style.scss";
+@import "./components/post-sticky/style.scss";
+@import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
+@import "./components/post-template/style.scss";
 @import "./components/post-text-editor/style.scss";
+@import "./components/post-title/style.scss";
 @import "./components/post-url/style.scss";
 @import "./components/post-visibility/style.scss";
+@import "./components/posts-per-page/style.scss";
 @import "./components/post-trash/style.scss";
+@import "./components/preview-dropdown/style.scss";
+@import "./components/resizable-editor/style.scss";
+@import "./components/save-publish-panels/style.scss";
+@import "./components/start-page-options/style.scss";
+@import "./components/start-template-options/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/site-discussion/style.scss";
 @import "./components/table-of-contents/style.scss";
-@import "./components/template-validation-notice/style.scss";
+@import "./components/text-editor/style.scss";
+@import "./components/visual-editor/style.scss";
diff --git a/packages/editor/src/utils/get-template-info.js b/packages/editor/src/utils/get-template-info.js
new file mode 100644
index 00000000000000..bc84c06c9399d4
--- /dev/null
+++ b/packages/editor/src/utils/get-template-info.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { layout } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { getTemplatePartIcon } from './get-template-part-icon';
+const EMPTY_OBJECT = {};
+
+/**
+ * Helper function to retrieve the corresponding template info for a given template.
+ * @param {Object} params
+ * @param {Array}  params.templateTypes
+ * @param {Array}  [params.templateAreas]
+ * @param {Object} params.template
+ */
+export const getTemplateInfo = ( params ) => {
+	if ( ! params ) {
+		return EMPTY_OBJECT;
+	}
+
+	const { templateTypes, templateAreas, template } = params;
+
+	const { description, slug, title, area } = template;
+
+	const { title: defaultTitle, description: defaultDescription } =
+		Object.values( templateTypes ).find( ( type ) => type.slug === slug ) ??
+		EMPTY_OBJECT;
+
+	const templateTitle = typeof title === 'string' ? title : title?.rendered;
+	const templateDescription =
+		typeof description === 'string' ? description : description?.raw;
+
+	const templateAreasWithIcon = templateAreas?.map( ( item ) => ( {
+		...item,
+		icon: getTemplatePartIcon( item.icon ),
+	} ) );
+
+	const templateIcon =
+		templateAreasWithIcon?.find( ( item ) => area === item.area )?.icon ||
+		layout;
+
+	return {
+		title:
+			templateTitle && templateTitle !== slug
+				? templateTitle
+				: defaultTitle || slug,
+		description: templateDescription || defaultDescription,
+		icon: templateIcon,
+	};
+};
diff --git a/packages/editor/src/utils/media-upload/index.js b/packages/editor/src/utils/media-upload/index.js
index 036d925034bb86..6b39db2443cc33 100644
--- a/packages/editor/src/utils/media-upload/index.js
+++ b/packages/editor/src/utils/media-upload/index.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { v4 as uuid } from 'uuid';
+
 /**
  * WordPress dependencies
  */
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { uploadMedia } from '@wordpress/media-utils';
 
 /**
@@ -31,21 +36,58 @@ export default function mediaUpload( {
 	onError = noop,
 	onFileChange,
 } ) {
-	const { getCurrentPostId, getEditorSettings } = select( editorStore );
+	const { getCurrentPost, getEditorSettings } = select( editorStore );
+	const {
+		lockPostAutosaving,
+		unlockPostAutosaving,
+		lockPostSaving,
+		unlockPostSaving,
+	} = dispatch( editorStore );
+
 	const wpAllowedMimeTypes = getEditorSettings().allowedMimeTypes;
+	const lockKey = `image-upload-${ uuid() }`;
+	let imageIsUploading = false;
 	maxUploadFileSize =
 		maxUploadFileSize || getEditorSettings().maxUploadFileSize;
+	const currentPost = getCurrentPost();
+	// Templates and template parts' numerical ID is stored in `wp_id`.
+	const currentPostId =
+		typeof currentPost?.id === 'number'
+			? currentPost.id
+			: currentPost?.wp_id;
+	const setSaveLock = () => {
+		lockPostSaving( lockKey );
+		lockPostAutosaving( lockKey );
+		imageIsUploading = true;
+	};
+
+	const postData = currentPostId ? { post: currentPostId } : {};
+	const clearSaveLock = () => {
+		unlockPostSaving( lockKey );
+		unlockPostAutosaving( lockKey );
+		imageIsUploading = false;
+	};
 
 	uploadMedia( {
 		allowedTypes,
 		filesList,
-		onFileChange,
+		onFileChange: ( file ) => {
+			if ( ! imageIsUploading ) {
+				setSaveLock();
+			} else {
+				clearSaveLock();
+			}
+			onFileChange( file );
+		},
 		additionalData: {
-			post: getCurrentPostId(),
+			...postData,
 			...additionalData,
 		},
 		maxUploadFileSize,
-		onError: ( { message } ) => onError( message ),
+		onError: ( { message } ) => {
+			clearSaveLock();
+			onError( message );
+		},
 		wpAllowedMimeTypes,
 	} );
 }
diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js
new file mode 100644
index 00000000000000..bc787b12284222
--- /dev/null
+++ b/packages/editor/src/utils/pageTypeBadge.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Custom hook to get the page type badge for the current post on edit site view.
+ *
+ * @param {number} postId postId of the current post being edited.
+ */
+export default function usePageTypeBadge( postId ) {
+	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
+		const { canUser, getEditedEntityRecord } = select( coreStore );
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+
+		return {
+			isFrontPage: siteSettings?.page_on_front === postId,
+			isPostsPage: siteSettings?.page_for_posts === postId,
+		};
+	} );
+
+	if ( isFrontPage ) {
+		return __( 'Homepage' );
+	} else if ( isPostsPage ) {
+		return __( 'Posts Page' );
+	}
+
+	return false;
+}
diff --git a/packages/editor/src/utils/terms.js b/packages/editor/src/utils/terms.js
index 8aeb079d1a5a0d..e3154a6480a0fa 100644
--- a/packages/editor/src/utils/terms.js
+++ b/packages/editor/src/utils/terms.js
@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { groupBy, map, unescape as lodashUnescapeString } from 'lodash';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Returns terms in a tree form.
@@ -14,15 +14,32 @@ export function buildTermsTree( flatTerms ) {
 	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
 		return {
 			children: [],
-			parent: null,
+			parent: undefined,
 			...term,
 		};
 	} );
 
-	const termsByParent = groupBy( flatTermsWithParentAndChildren, 'parent' );
-	if ( termsByParent.null && termsByParent.null.length ) {
+	// All terms should have a `parent` because we're about to index them by it.
+	if (
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === undefined
+		)
+	) {
 		return flatTermsWithParentAndChildren;
 	}
+
+	const termsByParent = flatTermsWithParentAndChildren.reduce(
+		( acc, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{}
+	);
+
 	const fillWithChildren = ( terms ) => {
 		return terms.map( ( term ) => {
 			const children = termsByParent[ term.id ];
@@ -39,14 +56,12 @@ export function buildTermsTree( flatTerms ) {
 	return fillWithChildren( termsByParent[ '0' ] || [] );
 }
 
-// Lodash unescape function handles &#39; but not &#039; which may be return in some API requests.
 export const unescapeString = ( arg ) => {
-	return lodashUnescapeString( arg.replace( '&#039;', "'" ) );
+	return decodeEntities( arg );
 };
 
 /**
  * Returns a term object with name unescaped.
- * The unescape of the name property is done using lodash unescape function.
  *
  * @param {Object} term The term object to unescape.
  *
@@ -68,5 +83,5 @@ export const unescapeTerm = ( term ) => {
  * @return {Object[]} Array of term objects unescaped.
  */
 export const unescapeTerms = ( terms ) => {
-	return map( terms, unescapeTerm );
+	return ( terms ?? [] ).map( unescapeTerm );
 };
diff --git a/packages/editor/src/utils/test/get-template-info.js b/packages/editor/src/utils/test/get-template-info.js
new file mode 100644
index 00000000000000..d0ffe15aa902ad
--- /dev/null
+++ b/packages/editor/src/utils/test/get-template-info.js
@@ -0,0 +1,224 @@
+/**
+ * WordPress dependencies
+ */
+import { footer, header, layout } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import { getTemplateInfo } from '../get-template-info';
+
+describe( '__experimentalGetTemplateInfo', () => {
+	const defaultTemplateTypes = [
+		{
+			title: 'Default (Index)',
+			description: 'Main template',
+			slug: 'index',
+		},
+		{
+			title: '404 (Not Found)',
+			description: 'Applied when content cannot be found',
+			slug: '404',
+		},
+	];
+
+	const defaultTemplatePartAreas = [
+		{
+			area: 'header',
+			label: 'Header',
+			description: 'Some description of a header',
+			icon: 'header',
+		},
+		{
+			area: 'footer',
+			label: 'Footer',
+			description: 'Some description of a footer',
+			icon: 'footer',
+		},
+	];
+
+	it( 'should return an empty object if no template is passed', () => {
+		expect( getTemplateInfo( undefined ) ).toEqual( {} );
+		expect( getTemplateInfo( null ) ).toEqual( {} );
+		expect( getTemplateInfo( false ) ).toEqual( {} );
+	} );
+
+	it( 'should return the default title if none is defined on the template', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+				},
+			} ).title
+		).toEqual( 'Default (Index)' );
+	} );
+
+	it( 'should return the rendered title if defined on the template', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+					title: { rendered: 'test title' },
+				},
+			} ).title
+		).toEqual( 'test title' );
+	} );
+
+	it( 'should return the slug if no title is found', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'not a real template',
+				},
+			} ).title
+		).toEqual( 'not a real template' );
+	} );
+
+	it( 'should return the default description if none is defined on the template', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+				},
+			} ).description
+		).toEqual( 'Main template' );
+	} );
+
+	it( 'should return the raw excerpt as description if defined on the template', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+					description: { raw: 'test description' },
+				},
+			} ).description
+		).toEqual( 'test description' );
+	} );
+
+	it( 'should return a title, description, and icon', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: { slug: 'index' },
+			} )
+		).toEqual( {
+			title: 'Default (Index)',
+			description: 'Main template',
+			icon: layout,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+					title: { rendered: 'test title' },
+				},
+			} )
+		).toEqual( {
+			title: 'test title',
+			description: 'Main template',
+			icon: layout,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+					description: { raw: 'test description' },
+				},
+			} )
+		).toEqual( {
+			title: 'Default (Index)',
+			description: 'test description',
+			icon: layout,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'index',
+					title: { rendered: 'test title' },
+					description: { raw: 'test description' },
+				},
+			} )
+		).toEqual( {
+			title: 'test title',
+			description: 'test description',
+			icon: layout,
+		} );
+	} );
+
+	it( 'should return correct icon based on area', () => {
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'template part, area = uncategorized',
+					area: 'uncategorized',
+				},
+			} )
+		).toEqual( {
+			title: 'template part, area = uncategorized',
+			icon: layout,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'template part, area = invalid',
+					area: 'invalid',
+				},
+			} )
+		).toEqual( {
+			title: 'template part, area = invalid',
+			icon: layout,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'template part, area = header',
+					area: 'header',
+				},
+			} )
+		).toEqual( {
+			title: 'template part, area = header',
+			icon: header,
+		} );
+
+		expect(
+			getTemplateInfo( {
+				templateAreas: defaultTemplatePartAreas,
+				templateTypes: defaultTemplateTypes,
+				template: {
+					slug: 'template part, area = footer',
+					area: 'footer',
+				},
+			} )
+		).toEqual( {
+			title: 'template part, area = footer',
+			icon: footer,
+		} );
+	} );
+} );
diff --git a/packages/editor/src/utils/test/terms.js b/packages/editor/src/utils/test/terms.js
index 68a1a7f10fb190..fa7d1622370c7a 100644
--- a/packages/editor/src/utils/test/terms.js
+++ b/packages/editor/src/utils/test/terms.js
@@ -4,14 +4,14 @@
 import { buildTermsTree } from '../terms';
 
 describe( 'buildTermsTree()', () => {
-	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
+	it( 'Should return same array as input with undefined parent and empty children added if parent is never specified.', () => {
 		const input = Object.freeze( [
 			{ id: 2232, dummy: true },
 			{ id: 2245, dummy: true },
 		] );
 		const output = Object.freeze( [
-			{ id: 2232, parent: null, children: [], dummy: true },
-			{ id: 2245, parent: null, children: [], dummy: true },
+			{ id: 2232, parent: undefined, children: [], dummy: true },
+			{ id: 2245, parent: undefined, children: [], dummy: true },
 		] );
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 00000000000000..3c45fbcb10db3d
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,39 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
+		{ "path": "../block-editor" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../core-data" },
+		{ "path": "../data" },
+		{ "path": "../dataviews" },
+		{ "path": "../date" },
+		{ "path": "../deprecated" },
+		{ "path": "../dom" },
+		{ "path": "../element" },
+		{ "path": "../fields" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../keycodes" },
+		{ "path": "../media-utils" },
+		{ "path": "../notices" },
+		{ "path": "../plugins" },
+		{ "path": "../private-apis" },
+		{ "path": "../rich-text" },
+		{ "path": "../url" },
+		{ "path": "../warning" },
+		{ "path": "../wordcount" }
+	],
+	"include": [ "src" ]
+}
diff --git a/packages/element/.npmrc b/packages/element/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/element/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index 2aae461a05a023..50fc6e21756b92 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,128 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+## 5.34.0 (2024-05-02)
+
+## 5.33.0 (2024-04-19)
+
+## 5.32.0 (2024-04-03)
+
+## 5.31.0 (2024-03-21)
+
+## 5.30.0 (2024-03-06)
+
+## 5.29.0 (2024-02-21)
+
+## 5.28.0 (2024-02-09)
+
+## 5.27.0 (2024-01-24)
+
+-   Started exporting the `PureComponent` React API ([#58076](https://github.com/WordPress/gutenberg/pull/58076)).
+
+## 5.26.0 (2024-01-10)
+
+## 5.25.0 (2023-12-13)
+
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
+## 5.22.0 (2023-11-02)
+
+## 5.21.0 (2023-10-18)
+
+## 5.20.0 (2023-10-05)
+
+### Breaking Changes
+
+-   Remove the WPElement, WPComponent, and WPSyntheticEvent types.
+
+## 5.19.0 (2023-09-20)
+
+## 5.18.0 (2023-08-31)
+
+## 5.17.0 (2023-08-16)
+
+## 5.16.0 (2023-08-10)
+
+## 5.15.0 (2023-07-20)
+
+## 5.14.0 (2023-07-05)
+
+## 5.13.0 (2023-06-23)
+
+## 5.12.0 (2023-06-07)
+
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
+## 5.9.0 (2023-04-26)
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+### New Features
+
+-   Started exporting the `flushSync` function from `react-dom`
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   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)
@@ -16,7 +138,7 @@
 
 ## 4.14.0 (2022-08-24)
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
@@ -44,25 +166,25 @@
 
 ## 4.2.0 (2022-03-11)
 
-### Bug Fix
+### Bug Fixes
 
-- Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)).
+-   Serialize will now keep correct casing for SVG attributes ([#38936](https://github.com/WordPress/gutenberg/pull/38936)).
 
 ## 4.1.0 (2022-01-27)
 
-### Bug Fix
+### Bug Fixes
 
 -   Ensure that the package uses the latest version of React types ([#37365](https://github.com/WordPress/gutenberg/pull/37365)).
 
 ## 4.0.3 (2021-10-22)
 
-### Bug Fix
+### Bug Fixes
 
 -   Update `rawHtml` to correctly concatenate multiple strings passed as children (see [35532](https://github.com/WordPress/gutenberg/pull/35532))
 
 ## 4.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -81,20 +203,20 @@
 
 ## 2.17.1 (2020-09-17)
 
-### Bug fix
+### Bug Fixes
 
 -   Declare @types/react and @types/react-dom dependencies which could cause type errors when using
     this package with TypeScript ([#25086](https://github.com/WordPress/gutenberg/pull/25086))
 
 ## 2.14.0 (2020-05-14)
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#21781](https://github.com/WordPress/gutenberg/pull/21781))
 
 ## 2.13.1 (2020-04-15)
 
-### Bug Fix
+### Bug Fixes
 
 -   Hide TypeScript type declarations ([#21613](https://github.com/WordPress/gutenberg/pull/21613))
     after they were found to conflict with DefinitelyTyped provided declarations.
@@ -159,6 +281,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/element/README.md b/packages/element/README.md
index 8a3e39dc50a1ff..86f3a6214df0e0 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -1,17 +1,6 @@
 # Element
 
-Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/).
-
-You may find yourself asking, "Why an abstraction layer?". For a few reasons:
-
--   In many applications, especially those extended by a rich plugin ecosystem as is the case with WordPress, it's wise to create interfaces to underlying third-party code. The thinking is that if ever a need arises to change or even replace the underlying implementation, it can be done without catastrophic rippling effects to dependent code, so long as the interface stays the same.
--   It provides a mechanism to shield implementers by omitting features with uncertain futures (`createClass`, `PropTypes`).
--   It helps avoid incompatibilities between versions by ensuring that every plugin operates on a single centralized version of the code.
-
-On the `wp.element` global object, you will find the following, ordered roughly by the likelihood you'll encounter it in your code:
-
--   [`createElement`](https://reactjs.org/docs/react-api.html#createelement)
--   [`render`](https://reactjs.org/docs/react-dom.html#render)
+Element is a package that builds on top of [React](https://reactjs.org/) and provide a set of utilities to work with React components and React elements.
 
 ## Installation
 
@@ -23,30 +12,6 @@ npm install @wordpress/element --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._
 
-## Usage
-
-Let's render a customized greeting into an empty element:
-
-```html
-<div id="greeting"></div>
-<script>
-	function Greeting( props ) {
-		return wp.element.createElement(
-			'span',
-			null,
-			'Hello ' + props.toWhom + '!'
-		);
-	}
-
-	wp.element.render(
-		wp.element.createElement( Greeting, { toWhom: 'World' } ),
-		document.getElementById( 'greeting' )
-	);
-</script>
-```
-
-Refer to the [official React Quick Start guide](https://reactjs.org/docs/hello-world.html) for a more thorough walkthrough, in most cases substituting `React` and `ReactDOM` with `wp.element` in code examples.
-
 ## Why React?
 
 At the risk of igniting debate surrounding any single "best" front-end framework, the choice to use any tool should be motivated specifically to serve the requirements of the system. In modeling the concept of a [block](https://github.com/WordPress/gutenberg/tree/HEAD/packages/blocks/README.md), we observe the following technical requirements:
@@ -58,27 +23,6 @@ At its most basic, React provides a simple input / output mechanism. **Given a s
 
 The offerings of any framework necessarily become more complex as these requirements increase; many front-end frameworks prescribe ideas around page routing, retrieving and updating data, and managing layout. React is not immune to this, but the introduced complexity is rarely caused by React itself, but instead managing an arrangement of supporting tools. By moving these concerns out of sight to the internals of the system (WordPress core code), we can minimize the responsibilities of plugin authors to a small, clear set of touch points.
 
-## JSX
-
-While not at all a requirement to use React, [JSX](https://reactjs.org/docs/introducing-jsx.html) is a recommended syntax extension to compose elements more expressively. Through a build process, JSX is converted back to the `createElement` syntax you see earlier in this document.
-
-If you've configured [Babel](http://babeljs.io/) for your project, you can opt in to JSX syntax by specifying the `pragma` option of the [`transform-react-jsx` plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx) in your [`.babelrc` configuration](http://babeljs.io/docs/usage/babelrc/).
-
-```json
-{
-	"plugins": [
-		[
-			"transform-react-jsx",
-			{
-				"pragma": "createElement"
-			}
-		]
-	]
-}
-```
-
-This assumes that you will import the `createElement` function in any file where you use JSX. Alternatively, consider using the [`@wordpress/babel-plugin-import-jsx-pragma` Babel plugin](https://www.npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma) to automate the import of this function.
-
 ## API
 
 <!-- START TOKEN(Autogenerated API docs) -->
@@ -93,12 +37,12 @@ Creates a copy of an element with extended props.
 
 _Parameters_
 
--   _element_ `WPElement`: Element
+-   _element_ `Element`: Element
 -   _props_ `?Object`: Props to apply to cloned element
 
 _Returns_
 
--   `WPElement`: Cloned element.
+-   `Element`: Cloned element.
 
 ### Component
 
@@ -130,24 +74,21 @@ _Returns_
 
 ### createElement
 
-Returns a new element of given type. Type can be either a string tag name or
-another function which itself returns an element.
+Returns a new element of given type. Type can be either a string tag name or another function which itself returns an element.
 
 _Parameters_
 
 -   _type_ `?(string|Function)`: Tag name or element creator
 -   _props_ `Object`: Element properties, either attribute set to apply to DOM node or values to pass through to element creator
--   _children_ `...WPElement`: Descendant elements
+-   _children_ `...Element`: Descendant elements
 
 _Returns_
 
--   `WPElement`: Element.
+-   `Element`: Element.
 
 ### createInterpolateElement
 
-This function creates an interpolated element from a passed in string with
-specific tags matching how the string should be converted to an element via
-the conversion map value.
+This function creates an interpolated element from a passed in string with specific tags matching how the string should be converted to an element via the conversion map value.
 
 _Usage_
 
@@ -169,11 +110,11 @@ You would have something like this as the conversionMap value:
 _Parameters_
 
 -   _interpolatedString_ `string`: The interpolation string to be parsed.
--   _conversionMap_ `Object`: The map used to convert the string to a react element.
+-   _conversionMap_ `Record<string, Element>`: The map used to convert the string to a react element.
 
 _Returns_
 
--   `WPElement`: A wp element.
+-   `Element`: A wp element.
 
 ### createPortal
 
@@ -185,33 +126,48 @@ _Related_
 
 _Parameters_
 
--   _child_ `import('./react').WPElement`: Any renderable child, such as an element, string, or fragment.
+-   _child_ `import('react').ReactElement`: Any renderable child, such as an element, string, or fragment.
 -   _container_ `HTMLElement`: DOM node into which element should be rendered.
 
 ### createRef
 
-Returns an object tracking a reference to a rendered element via its
-`current` property as either a DOMElement or Element, dependent upon the
-type of element rendered with the ref attribute.
+Returns an object tracking a reference to a rendered element via its `current` property as either a DOMElement or Element, dependent upon the type of element rendered with the ref attribute.
 
 _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Creates a new React root for the target DOM node.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/client/createRoot>
+
+_Changelog_
+
+`6.2.0` Introduced in WordPress core.
+
 ### findDOMNode
 
 Finds the dom node of a React component.
 
 _Parameters_
 
--   _component_ `import('./react').WPComponent`: Component's instance.
+-   _component_ `import('react').ComponentType`: Component's instance.
+
+### flushSync
+
+Forces React to flush any updates inside the provided callback synchronously.
+
+_Parameters_
+
+-   _callback_ `Function`: Callback to run synchronously.
 
 ### forwardRef
 
-Component enhancer used to enable passing a ref to its wrapped component.
-Pass a function argument which receives `props` and `ref` as its arguments,
-returning an element using the forwarded ref. The return value is a new
-component which forwards its ref.
+Component enhancer used to enable passing a ref to its wrapped component. Pass a function argument which receives `props` and `ref` as its arguments, returning an element using the forwarded ref. The return value is a new component which forwards its ref.
 
 _Parameters_
 
@@ -219,7 +175,7 @@ _Parameters_
 
 _Returns_
 
--   `WPComponent`: Enhanced component.
+-   `Component`: Enhanced component.
 
 ### Fragment
 
@@ -227,12 +183,25 @@ A component which renders its children without any wrapping element.
 
 ### hydrate
 
+> **Deprecated** since WordPress 6.2.0. Use `hydrateRoot` instead.
+
 Hydrates a given element into the target DOM node.
 
-_Parameters_
+_Related_
+
+-   <https://react.dev/reference/react-dom/hydrate>
+
+### hydrateRoot
+
+Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+
+_Related_
+
+-   <https://react.dev/reference/react-dom/client/hydrateRoot>
 
--   _element_ `import('./react').WPElement`: Element to hydrate.
--   _target_ `HTMLElement`: DOM node into which element should be hydrated.
+_Changelog_
+
+`6.2.0` Introduced in WordPress core.
 
 ### isEmptyElement
 
@@ -248,7 +217,7 @@ _Returns_
 
 ### isValidElement
 
-Checks if an object is a valid WPElement.
+Checks if an object is a valid React Element.
 
 _Parameters_
 
@@ -256,30 +225,29 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: true if objectToTest is a valid WPElement and false otherwise.
+-   `boolean`: true if objectToTest is a valid React Element and false otherwise.
 
 ### lazy
 
 _Related_
 
--   <https://reactjs.org/docs/react-api.html#reactlazy>
+-   <https://react.dev/reference/react/lazy>
 
 ### memo
 
 _Related_
 
--   <https://reactjs.org/docs/react-api.html#reactmemo>
+-   <https://react.dev/reference/react/memo>
 
 ### Platform
 
-Component used to detect the current Platform being used.
-Use Platform.OS === 'web' to detect if running on web enviroment.
+Component used to detect the current Platform being used. Use Platform.OS === 'web' to detect if running on web enviroment.
 
 This is the same concept as the React Native implementation.
 
 _Related_
 
--   <https://facebook.github.io/react-native/docs/platform-specific-code#platform-module> Here is an example of how to use the select method:
+-   <https://reactnative.dev/docs/platform-specific-code#platform-module> Here is an example of how to use the select method:
 
 _Usage_
 
@@ -294,12 +262,15 @@ const placeholderLabel = Platform.select( {
 } );
 ```
 
+### PureComponent
+
+_Related_
+
+-   <https://react.dev/reference/react/PureComponent>
+
 ### RawHTML
 
-Component used as equivalent of Fragment with unescaped HTML, in cases where
-it is desirable to render dangerous HTML without needing a wrapper element.
-To preserve additional props, a `div` wrapper _will_ be created if any props
-aside from `children` are passed.
+Component used as equivalent of Fragment with unescaped HTML, in cases where it is desirable to render dangerous HTML without needing a wrapper element. To preserve additional props, a `div` wrapper _will_ be created if any props aside from `children` are passed.
 
 _Parameters_
 
@@ -311,12 +282,13 @@ _Returns_
 
 ### render
 
+> **Deprecated** since WordPress 6.2.0. Use `createRoot` instead.
+
 Renders a given element into the target DOM node.
 
-_Parameters_
+_Related_
 
--   _element_ `import('./react').WPElement`: Element to render.
--   _target_ `HTMLElement`: DOM node into which element should be rendered.
+-   <https://react.dev/reference/react-dom/render>
 
 ### renderToString
 
@@ -332,6 +304,12 @@ _Returns_
 
 -   `string`: Serialized element.
 
+### startTransition
+
+_Related_
+
+-   <https://react.dev/reference/react/startTransition>
+
 ### StrictMode
 
 Component that activates additional checks and warnings for its descendants.
@@ -340,7 +318,7 @@ Component that activates additional checks and warnings for its descendants.
 
 _Related_
 
--   <https://reactjs.org/docs/react-api.html#reactsuspense>
+-   <https://react.dev/reference/react/Suspense>
 
 ### switchChildrenNodeName
 
@@ -357,71 +335,103 @@ _Returns_
 
 ### unmountComponentAtNode
 
+> **Deprecated** since WordPress 6.2.0. Use `root.unmount()` instead.
+
 Removes any mounted element from the target DOM node.
 
-_Parameters_
+_Related_
 
--   _target_ `Element`: DOM node in which element is to be removed
+-   <https://react.dev/reference/react-dom/unmountComponentAtNode>
 
 ### useCallback
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usecallback>
+-   <https://react.dev/reference/react/useCallback>
 
 ### useContext
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usecontext>
+-   <https://react.dev/reference/react/useContext>
 
 ### useDebugValue
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usedebugvalue>
+-   <https://react.dev/reference/react/useDebugValue>
+
+### useDeferredValue
+
+_Related_
+
+-   <https://react.dev/reference/react/useDeferredValue>
 
 ### useEffect
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#useeffect>
+-   <https://react.dev/reference/react/useEffect>
+
+### useId
+
+_Related_
+
+-   <https://react.dev/reference/react/useId>
 
 ### useImperativeHandle
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#useimperativehandle>
+-   <https://react.dev/reference/react/useImperativeHandle>
+
+### useInsertionEffect
+
+_Related_
+
+-   <https://react.dev/reference/react/useInsertionEffect>
 
 ### useLayoutEffect
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#uselayouteffect>
+-   <https://react.dev/reference/react/useLayoutEffect>
 
 ### useMemo
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usememo>
+-   <https://react.dev/reference/react/useMemo>
 
 ### useReducer
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usereducer>
+-   <https://react.dev/reference/react/useReducer>
 
 ### useRef
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#useref>
+-   <https://react.dev/reference/react/useRef>
 
 ### useState
 
 _Related_
 
--   <https://reactjs.org/docs/hooks-reference.html#usestate>
+-   <https://react.dev/reference/react/useState>
+
+### useSyncExternalStore
+
+_Related_
+
+-   <https://react.dev/reference/react/useSyncExternalStore>
+
+### useTransition
+
+_Related_
+
+-   <https://react.dev/reference/react/useTransition>
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/element/package.json b/packages/element/package.json
index 6cae99b0bfe710..770d87ef021748 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "4.20.0",
+	"version": "6.13.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,22 +20,24 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@types/react": "^17.0.37",
-		"@types/react-dom": "^17.0.11",
-		"@wordpress/escape-html": "file:../escape-html",
+		"@babel/runtime": "7.25.7",
+		"@types/react": "^18.2.79",
+		"@types/react-dom": "^18.2.25",
+		"@wordpress/escape-html": "*",
 		"change-case": "^4.1.2",
 		"is-plain-object": "^5.0.0",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+		"react": "^18.3.0",
+		"react-dom": "^18.3.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js
index c8e38c0f457434..88f6254dad7d6e 100644
--- a/packages/element/src/create-interpolate-element.js
+++ b/packages/element/src/create-interpolate-element.js
@@ -3,7 +3,11 @@
  */
 import { createElement, cloneElement, Fragment, isValidElement } from './react';
 
-/** @typedef {import('./react').WPElement} WPElement */
+/**
+ * Object containing a React element.
+ *
+ * @typedef {import('react').ReactElement} Element
+ */
 
 let indoc, offset, output, stack;
 
@@ -29,17 +33,17 @@ const tokenizer = /<(\/)?(\w+)\s*(\/)?>/g;
  *
  * @typedef Frame
  *
- * @property {WPElement}   element            A parent element which may still have
- * @property {number}      tokenStart         Offset at which parent element first
- *                                            appears.
- * @property {number}      tokenLength        Length of string marking start of parent
- *                                            element.
- * @property {number}      [prevOffset]       Running offset at which parsing should
- *                                            continue.
- * @property {number}      [leadingTextStart] Offset at which last closing element
- *                                            finished, used for finding text between
- *                                            elements.
- * @property {WPElement[]} children           Children.
+ * @property {Element}   element            A parent element which may still have
+ * @property {number}    tokenStart         Offset at which parent element first
+ *                                          appears.
+ * @property {number}    tokenLength        Length of string marking start of parent
+ *                                          element.
+ * @property {number}    [prevOffset]       Running offset at which parsing should
+ *                                          continue.
+ * @property {number}    [leadingTextStart] Offset at which last closing element
+ *                                          finished, used for finding text between
+ *                                          elements.
+ * @property {Element[]} children           Children.
  */
 
 /**
@@ -49,17 +53,17 @@ const tokenizer = /<(\/)?(\w+)\s*(\/)?>/g;
  * parsed.
  *
  * @private
- * @param {WPElement} element            A parent element which may still have
- *                                       nested children not yet parsed.
- * @param {number}    tokenStart         Offset at which parent element first
- *                                       appears.
- * @param {number}    tokenLength        Length of string marking start of parent
- *                                       element.
- * @param {number}    [prevOffset]       Running offset at which parsing should
- *                                       continue.
- * @param {number}    [leadingTextStart] Offset at which last closing element
- *                                       finished, used for finding text between
- *                                       elements.
+ * @param {Element} element            A parent element which may still have
+ *                                     nested children not yet parsed.
+ * @param {number}  tokenStart         Offset at which parent element first
+ *                                     appears.
+ * @param {number}  tokenLength        Length of string marking start of parent
+ *                                     element.
+ * @param {number}  [prevOffset]       Running offset at which parsing should
+ *                                     continue.
+ * @param {number}  [leadingTextStart] Offset at which last closing element
+ *                                     finished, used for finding text between
+ *                                     elements.
  *
  * @return {Frame} The stack frame tracking parse progress.
  */
@@ -101,11 +105,11 @@ function createFrame(
  * }
  * ```
  *
- * @param {string} interpolatedString The interpolation string to be parsed.
- * @param {Object} conversionMap      The map used to convert the string to
- *                                    a react element.
+ * @param {string}                  interpolatedString The interpolation string to be parsed.
+ * @param {Record<string, Element>} conversionMap      The map used to convert the string to
+ *                                                     a react element.
  * @throws {TypeError}
- * @return {WPElement}  A wp element.
+ * @return {Element}  A wp element.
  */
 const createInterpolateElement = ( interpolatedString, conversionMap ) => {
 	indoc = interpolatedString;
@@ -116,7 +120,7 @@ const createInterpolateElement = ( interpolatedString, conversionMap ) => {
 
 	if ( ! isValidConversionMap( conversionMap ) ) {
 		throw new TypeError(
-			'The conversionMap provided is not valid. It must be an object with values that are WPElements'
+			'The conversionMap provided is not valid. It must be an object with values that are React Elements'
 		);
 	}
 
@@ -130,7 +134,7 @@ const createInterpolateElement = ( interpolatedString, conversionMap ) => {
  * Validate conversion map.
  *
  * A map is considered valid if it's an object and every value in the object
- * is a WPElement
+ * is a React Element
  *
  * @private
  *
diff --git a/packages/element/src/platform.js b/packages/element/src/platform.js
index c646b6c86d51a2..841cd06e4cabb5 100644
--- a/packages/element/src/platform.js
+++ b/packages/element/src/platform.js
@@ -17,7 +17,7 @@ const Platform = {
  *
  * This is the same concept as the React Native implementation.
  *
- * @see https://facebook.github.io/react-native/docs/platform-specific-code#platform-module
+ * @see https://reactnative.dev/docs/platform-specific-code#platform-module
  *
  * Here is an example of how to use the select method:
  * @example
diff --git a/packages/element/src/raw-html.js b/packages/element/src/raw-html.js
index dd77109d2b3fb6..d94a290e9e0e9f 100644
--- a/packages/element/src/raw-html.js
+++ b/packages/element/src/raw-html.js
@@ -3,7 +3,6 @@
  */
 import { Children, createElement } from './react';
 
-// Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly.
 /** @typedef {{children: string} & import('react').ComponentPropsWithoutRef<'div'>} RawHTMLProps */
 
 /**
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index 7b35ea8d2a2d53..862b02706876d2 100644
--- a/packages/element/src/react-platform.js
+++ b/packages/element/src/react-platform.js
@@ -4,48 +4,74 @@
 import {
 	createPortal,
 	findDOMNode,
+	flushSync,
 	render,
 	hydrate,
 	unmountComponentAtNode,
 } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Creates a portal into which a component can be rendered.
  *
  * @see https://github.com/facebook/react/issues/10309#issuecomment-318433235
  *
- * @param {import('./react').WPElement} child     Any renderable child, such as an element,
- *                                                string, or fragment.
- * @param {HTMLElement}                 container DOM node into which element should be rendered.
+ * @param {import('react').ReactElement} child     Any renderable child, such as an element,
+ *                                                 string, or fragment.
+ * @param {HTMLElement}                  container DOM node into which element should be rendered.
  */
 export { createPortal };
 
 /**
  * Finds the dom node of a React component.
  *
- * @param {import('./react').WPComponent} component Component's instance.
+ * @param {import('react').ComponentType} component Component's instance.
  */
 export { findDOMNode };
 
+/**
+ * Forces React to flush any updates inside the provided callback synchronously.
+ *
+ * @param {Function} callback Callback to run synchronously.
+ */
+export { flushSync };
+
 /**
  * Renders a given element into the target DOM node.
  *
- * @param {import('./react').WPElement} element Element to render.
- * @param {HTMLElement}                 target  DOM node into which element should be rendered.
+ * @deprecated since WordPress 6.2.0. Use `createRoot` instead.
+ * @see https://react.dev/reference/react-dom/render
  */
 export { render };
 
 /**
  * Hydrates a given element into the target DOM node.
  *
- * @param {import('./react').WPElement} element Element to hydrate.
- * @param {HTMLElement}                 target  DOM node into which element should be hydrated.
+ * @deprecated since WordPress 6.2.0. Use `hydrateRoot` instead.
+ * @see https://react.dev/reference/react-dom/hydrate
  */
 export { hydrate };
 
+/**
+ * Creates a new React root for the target DOM node.
+ *
+ * @since 6.2.0 Introduced in WordPress core.
+ * @see https://react.dev/reference/react-dom/client/createRoot
+ */
+export { createRoot };
+
+/**
+ * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+ *
+ * @since 6.2.0 Introduced in WordPress core.
+ * @see https://react.dev/reference/react-dom/client/hydrateRoot
+ */
+export { hydrateRoot };
+
 /**
  * Removes any mounted element from the target DOM node.
  *
- * @param {Element} target DOM node in which element is to be removed
+ * @deprecated since WordPress 6.2.0. Use `root.unmount()` instead.
+ * @see https://react.dev/reference/react-dom/unmountComponentAtNode
  */
 export { unmountComponentAtNode };
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index 292f18cc92c627..cf2f9614bc3316 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -13,17 +13,24 @@ import {
 	Fragment,
 	isValidElement,
 	memo,
+	PureComponent,
 	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';
@@ -31,19 +38,40 @@ import {
 /**
  * Object containing a React element.
  *
- * @typedef {import('react').ReactElement} WPElement
+ * @typedef {import('react').ReactElement} Element
  */
 
 /**
  * Object containing a React component.
  *
- * @typedef {import('react').ComponentType} WPComponent
+ * @typedef {import('react').ComponentType} ComponentType
  */
 
 /**
  * Object containing a React synthetic event.
  *
- * @typedef {import('react').SyntheticEvent} WPSyntheticEvent
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
+
+/**
+ * Object containing a React ref object.
+ *
+ * @template T
+ * @typedef {import('react').RefObject<T>} RefObject<T>
+ */
+
+/**
+ * Object containing a React ref callback.
+ *
+ * @template T
+ * @typedef {import('react').RefCallback<T>} RefCallback<T>
+ */
+
+/**
+ * Object containing a React ref.
+ *
+ * @template T
+ * @typedef {import('react').Ref<T>} Ref<T>
  */
 
 /**
@@ -54,10 +82,10 @@ export { Children };
 /**
  * Creates a copy of an element with extended props.
  *
- * @param {WPElement} element Element
- * @param {?Object}   props   Props to apply to cloned element
+ * @param {Element} element Element
+ * @param {?Object} props   Props to apply to cloned element
  *
- * @return {WPElement} Cloned element.
+ * @return {Element} Cloned element.
  */
 export { cloneElement };
 
@@ -83,9 +111,9 @@ export { createContext };
  * @param {Object}             props    Element properties, either attribute
  *                                      set to apply to DOM node or values to
  *                                      pass through to element creator
- * @param {...WPElement}       children Descendant elements
+ * @param {...Element}         children Descendant elements
  *
- * @return {WPElement} Element.
+ * @return {Element} Element.
  */
 export { createElement };
 
@@ -107,7 +135,7 @@ export { createRef };
  * @param {Function} forwarder Function passed `props` and `ref`, expected to
  *                             return an element.
  *
- * @return {WPComponent} Enhanced component.
+ * @return {Component} Enhanced component.
  */
 export { forwardRef };
 
@@ -117,16 +145,16 @@ export { forwardRef };
 export { Fragment };
 
 /**
- * Checks if an object is a valid WPElement.
+ * Checks if an object is a valid React Element.
  *
  * @param {Object} objectToCheck The object to be checked.
  *
- * @return {boolean} true if objectToTest is a valid WPElement and false otherwise.
+ * @return {boolean} true if objectToTest is a valid React Element and false otherwise.
  */
 export { isValidElement };
 
 /**
- * @see https://reactjs.org/docs/react-api.html#reactmemo
+ * @see https://react.dev/reference/react/memo
  */
 export { memo };
 
@@ -136,65 +164,100 @@ export { memo };
 export { StrictMode };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usecallback
+ * @see https://react.dev/reference/react/useCallback
  */
 export { useCallback };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usecontext
+ * @see https://react.dev/reference/react/useContext
  */
 export { useContext };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue
+ * @see https://react.dev/reference/react/useDebugValue
  */
 export { useDebugValue };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#useeffect
+ * @see https://react.dev/reference/react/useDeferredValue
+ */
+export { useDeferredValue };
+
+/**
+ * @see https://react.dev/reference/react/useEffect
  */
 export { useEffect };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
+ * @see https://react.dev/reference/react/useId
+ */
+export { useId };
+
+/**
+ * @see https://react.dev/reference/react/useImperativeHandle
  */
 export { useImperativeHandle };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ * @see https://react.dev/reference/react/useInsertionEffect
+ */
+export { useInsertionEffect };
+
+/**
+ * @see https://react.dev/reference/react/useLayoutEffect
  */
 export { useLayoutEffect };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usememo
+ * @see https://react.dev/reference/react/useMemo
  */
 export { useMemo };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usereducer
+ * @see https://react.dev/reference/react/useReducer
  */
 export { useReducer };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#useref
+ * @see https://react.dev/reference/react/useRef
  */
 export { useRef };
 
 /**
- * @see https://reactjs.org/docs/hooks-reference.html#usestate
+ * @see https://react.dev/reference/react/useState
  */
 export { useState };
 
 /**
- * @see https://reactjs.org/docs/react-api.html#reactlazy
+ * @see https://react.dev/reference/react/useSyncExternalStore
+ */
+export { useSyncExternalStore };
+
+/**
+ * @see https://react.dev/reference/react/useTransition
+ */
+export { useTransition };
+
+/**
+ * @see https://react.dev/reference/react/startTransition
+ */
+export { startTransition };
+
+/**
+ * @see https://react.dev/reference/react/lazy
  */
 export { lazy };
 
 /**
- * @see https://reactjs.org/docs/react-api.html#reactsuspense
+ * @see https://react.dev/reference/react/Suspense
  */
 export { Suspense };
 
+/**
+ * @see https://react.dev/reference/react/PureComponent
+ */
+export { PureComponent };
+
 /**
  * Concatenate two or more React children objects.
  *
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
index d18a6f00fa941f..9ca05cf2fa5e4e 100644
--- a/packages/element/src/serialize.js
+++ b/packages/element/src/serialize.js
@@ -46,7 +46,7 @@ import {
 import { createContext, Fragment, StrictMode, forwardRef } from './react';
 import RawHTML from './raw-html';
 
-/** @typedef {import('./react').WPElement} WPElement */
+/** @typedef {import('react').ReactElement} ReactElement */
 
 const { Provider, Consumer } = createContext( undefined );
 const ForwardRef = forwardRef( () => {
@@ -672,15 +672,15 @@ export function renderNativeComponent(
 	return '<' + type + attributes + '>' + content + '</' + type + '>';
 }
 
-/** @typedef {import('./react').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
 
 /**
  * Serializes a non-native component type to string.
  *
- * @param {WPComponent} Component       Component type to serialize.
- * @param {Object}      props           Props object.
- * @param {Object}      [context]       Context object.
- * @param {Object}      [legacyContext] Legacy context object.
+ * @param {ComponentType} Component       Component type to serialize.
+ * @param {Object}        props           Props object.
+ * @param {Object}        [context]       Context object.
+ * @param {Object}        [legacyContext] Legacy context object.
  *
  * @return {string} Serialized element
  */
@@ -755,7 +755,7 @@ export function renderAttributes( props ) {
 
 		let value = getNormalAttributeValue( key, props[ key ] );
 
-		// If value is not of serializeable type, skip.
+		// If value is not of serializable type, skip.
 		if ( ! ATTRIBUTES_TYPES.has( typeof value ) ) {
 			continue;
 		}
diff --git a/packages/element/src/test/create-interpolate-element.js b/packages/element/src/test/create-interpolate-element.js
index e78d3b1c558441..17b1cc9b3ab2c9 100644
--- a/packages/element/src/test/create-interpolate-element.js
+++ b/packages/element/src/test/create-interpolate-element.js
@@ -80,7 +80,7 @@ describe( 'createInterpolateElement', () => {
 		);
 		const component = createInterpolateElement( testString, {
 			// eslint-disable-next-line jsx-a11y/anchor-has-content
-			a: <a href={ 'https://github.com' } className={ 'some_class' } />,
+			a: <a href="https://github.com" className="some_class" />,
 		} );
 		expect( JSON.stringify( component ) ).toEqual(
 			JSON.stringify( expectedElement )
diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
index 7e38b80101bcdc..e2337f8556119e 100644
--- a/packages/element/src/test/serialize.js
+++ b/packages/element/src/test/serialize.js
@@ -322,12 +322,11 @@ describe( 'renderElement()', () => {
 				<Provider value={ { value: '1st provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
+				|
 				<Provider value={ { value: '2nd provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
-				<Consumer>{ ( context ) => context.value }</Consumer>
+				|<Consumer>{ ( context ) => context.value }</Consumer>
 			</Fragment>
 		);
 
@@ -344,8 +343,7 @@ describe( 'renderElement()', () => {
 				<Provider value={ { value: 'inner provided' } }>
 					<Consumer>{ ( context ) => context.value }</Consumer>
 				</Provider>
-				{ '|' }
-				<Consumer>{ ( context ) => context.value }</Consumer>
+				|<Consumer>{ ( context ) => context.value }</Consumer>
 			</Provider>
 		);
 
diff --git a/packages/element/tsconfig.json b/packages/element/tsconfig.json
index 1f90b9c762ae63..ad6a489d33e9a5 100644
--- a/packages/element/tsconfig.json
+++ b/packages/element/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/env/.npmrc b/packages/env/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/env/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index b3c98b8a8d9eb7..651d6b285e1bd6 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,205 @@
 
 ## Unreleased
 
+## 10.13.0 (2024-11-27)
+
+## 10.12.0 (2024-11-16)
+
+## 10.11.0 (2024-10-30)
+
+## 10.10.0 (2024-10-16)
+
+## 10.9.0 (2024-10-03)
+
+## 10.8.0 (2024-09-19)
+
+## 10.7.0 (2024-09-05)
+
+## 10.6.0 (2024-08-21)
+
+## 10.5.0 (2024-08-07)
+
+## 10.4.0 (2024-07-24)
+
+## 10.3.0 (2024-07-10)
+
+### Bug Fixes
+
+-   Remove `version` field from docker-compose config generated by env package [#63099](https://github.com/WordPress/gutenberg/pull/63099). Docker has starting throwing a warning that this property is obsolete and should be removed.
+
+## 10.2.0 (2024-06-26)
+
+### Enhancements
+
+-   Ignore `$schema` key in environment config parsing ([#62626](https://github.com/WordPress/gutenberg/pull/62626)).
+
+## 10.1.0 (2024-06-15)
+
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.10.0 (2024-05-16)
+
+## 9.9.0 (2024-05-02)
+
+## 9.8.0 (2024-04-19)
+
+## 9.7.0 (2024-04-03)
+
+## 9.6.0 (2024-03-21)
+
+## 9.5.0 (2024-03-06)
+
+## 9.4.0 (2024-02-21)
+
+### Bug Fixes
+
+-   Fix `mariadb` version to LTS [#59237](https://github.com/WordPress/gutenberg/pull/59237)
+
+## 9.3.0 (2024-02-09)
+
+## 9.2.0 (2024-01-24)
+
+## 9.1.0 (2024-01-10)
+
+## 9.0.0 (2023-12-13)
+
+### Breaking Changes
+
+-   Update Docker usage to `docker compose` V2 following [deprecation](https://docs.docker.com/compose/migrate/) of `docker-compose` V1.
+
+## 8.13.0 (2023-11-29)
+
+## 8.12.0 (2023-11-16)
+
+## 8.11.0 (2023-11-02)
+
+### Enhancements
+
+-   `wp-env` now works offline after the environment has been created. Note that many `wp-env` configuration changes involve internet connectivity and may not work in offline mode. [#53547](https://github.com/WordPress/gutenberg/pull/53547)
+
+## 8.10.0 (2023-10-18)
+
+### Bug Fixes
+
+-   Corrected `PATH` to include the host user's Composer bin directory.
+-   Replaced `yoast/phpunit-polyfills` with `phpunit/phpunit` to install the required PHPUnit version, avoiding the need for project-specific polyfills.
+
+## 8.9.0 (2023-10-05)
+
+## 8.8.0 (2023-09-20)
+
+## 8.7.0 (2023-08-31)
+
+## 8.6.0 (2023-08-16)
+
+## 8.5.0 (2023-08-10)
+
+## 8.4.0 (2023-07-20)
+
+## 8.3.0 (2023-07-05)
+
+## 8.2.0 (2023-06-23)
+
+## 8.1.1 (2023-06-17)
+
+### Bug Fixes
+
+-   Address issue where a missing file in the underlying Docker image caused `wp-env` to crash. [#51513](https://github.com/WordPress/gutenberg/pull/51513)
+
+## 8.1.0 (2023-06-07)
+
+### New Features
+
+-   Execute the local package's `wp-env` instead of the globally installed version if one is available.
+
+### Bug Fixes
+
+-   Run `useradd` with `-l` option to prevent excessive Docker image sizes.
+
+## 8.0.0 (2023-05-24)
+
+### Breaking Changes
+
+-   Remove `afterSetup` option from `.wp-env.json` and the `WP_ENV_AFTER_SETUP` environment variable in favor of more granular lifecycle scripts.
+
+### New Features
+
+-   Add `afterStart`, `afterClean`, and `afterDestroy` lifecycle scripts to a new `lifecycleScripts` key in `.wp-env.json`.
+-   Add a series of `WP_ENV_LIFECYCLE_SCRIPT_` environment variables for the various lifecycle scripts.
+-   Rework `run` command to resolve bugs with non-quoted commands. As a consequence it is no longer possible to pass your entire command to `wp-env` wrapped in double-quotes. While `npx wp-env run cli wp help` will still work, `npx wp-env run cli "wp help"` will not. If you are currently escaping any quotes you will need to review those commands and ensure they are compatible with this update.
+
+### Enhancements
+
+-   Support using double dashes in `wp-env run ...` to pass arguments that would otherwise be consumed by `wp-env`. For example, while normally `--help` would provide the `wp-env` help text, if you use `npx wp-env run cli php -- --help` you will see the PHP help text.
+-   Validate whether or not config options exist to prevent accidentally including ones that don't.
+
+### Bug Fixes
+
+-   Support Windows without requiring the use of WSL.
+
+## 7.0.0 (2023-05-10)
+
+### Breaking Changes
+
+-   Docker containers now run as the host user. This should resolve problems with permissions arising from different owners between the host, web container, and cli container. If you still encounter permissions issues, try running `npx wp-env destroy` so that the environment can be recreated with the correct permissions.
+-   Remove the `composer` and `phpunit` Docker containers. If you are currently using the `run composer` or `run phpunit` command you can migrate to `run cli composer` or `run tests-cli phpunit` respectively. Note that with `composer`, you will need to use the `--env-cwd` option to navigate to your plugin's directory as it is no longer the default working directory.
+
+### New Features
+
+-   Create an `afterSetup` option in `.wp-env.json` files for setting arbitrary commands to run after setting up WordPress when using `npx wp-env start` and `npx wp-env clean`.
+-   Add a `WP_ENV_AFTER_SETUP` environment variable to override the `afterSetup` option.
+-   Execute the `afterSetup` command on `npx wp-env start` after the environment is set up. This can happen when your config changes, WordPress updates, or you pass the `--update` flag.
+-   Execute the `afterSetup` command on `npx wp-env clean`.
+-   Globally install `composer` and the correct version of `phpunit` in all of the Docker containers.
+
+### Bug Fixes
+
+-   Ensure `wordpress`, `tests-wordpress`, `cli`, and `tests-cli` always build the correct Docker image.
+-   Fix Xdebug while using PHP 7.2x.
+
+### Enhancements
+
+-   `wp-env run ...` now uses docker-compose exec instead of docker-compose run. As a result, it is much faster, since commands are executed against existing services, rather than creating them from scratch each time.
+-   Increase the maximum upload size to 1GB.
+
+## 6.0.0 (2023-04-26)
+
+### Breaking Changes
+
+-   Use test environment's `WP_SITEURL` instead of `WP_TESTS_DOMAIN` as the WordPress URL.
+-   Automatically add the environment's port to `WP_TESTS_DOMAIN`.
+-   `run` command now has a `--env-cwd` option to set the working directory in the container for the command to execute from.
+
+## 5.16.0 (2023-04-12)
+
+## 5.15.0 (2023-03-29)
+
+## 5.14.0 (2023-03-15)
+
+## 5.13.0 (2023-03-01)
+
+## 5.12.0 (2023-02-15)
+
+## 5.11.0 (2023-02-01)
+
+### Bug Fixes
+
+-   PHP 7.3 and 7.4 must use PHPUnit 9.
+
+### Enhancements
+
+-   It's now possible to run PHPUnit tests on PHP 8.1 and 8.2.
+
+## 5.10.0 (2023-01-11)
+
+## 5.9.0 (2023-01-02)
+
+## 5.8.0 (2022-12-14)
+
 ## 5.7.0 (2022-11-16)
 
 ## 5.6.0 (2022-11-02)
@@ -14,64 +213,75 @@
 
 ## 5.2.0 (2022-08-16)
 
-### Enhancement
+### Enhancements
+
 -   Query parameters can now be used in .zip source URLs.
 
 ## 5.1.1 (2022-08-16)
 
-### Bug Fix
+### Bug Fixes
+
 -   Fix a crash when "core" was set to `null` in a `.wp-env.json` file. We now use the latest stable WordPress version in that case. This also restores the previous behavior of `"core": null` in `.wp-env.override.json`, which was to use the latest stable WordPress version.
 
 ## 5.1.0 (2022-08-10)
 
-### Enhancement
+### Enhancements
+
 -   Previously, wp-env used the WordPress version provided by Docker in the WordPress image for installations which don't specify a WordPress version. Now, wp-env will find the latest stable version on WordPress.org and check out the https://github.com/WordPress/WordPress repository at the tag matching that version. In most cases, this will match what Docker provides. The benefit is that wp-env (and WordPress.org) now controls the default WordPress version rather than Docker.
 
-### Bug Fix
+### Bug Fixes
+
 -   Downloading a default WordPress version also resolves a bug where the wrong WordPress test files were used if no core source was specified in wp-env.json. The current trunk test files were downloaded rather than the stable version. Now, the test files will match the default stable version.
 
 ## 5.0.0 (2022-07-27)
 
 ### Breaking Changes
+
 -   Removed the `WP_PHPUNIT__TESTS_CONFIG` environment variable from the `phpunit` container. **This removes automatic support for the `wp-phpunit/wp-phpunit` Composer package. To continue using the package, set the following two environment variables in your `phpunit.xml` file or similar: `WP_TESTS_DIR=""` and `WP_PHPUNIT__TESTS_CONFIG="/wordpress-phpunit/wp-tests-config.php"`.**
 -   Removed the generated `/var/www/html/phpunit-wp-config.php` file from the environment.
 
-### Enhancement
+### Enhancements
+
 -   Read WordPress' version and include the corresponding PHPUnit test files in the environment.
 -   Set the `WP_TESTS_DIR` environment variable in all containers to point at the PHPUnit test files.
 
-### Bug Fix
+### Bug Fixes
+
 -   Restrict `WP_TESTS_DOMAIN` constant to just hostname rather than an entire URL (e.g. it now excludes scheme, port, etc.) ([#41039](https://github.com/WordPress/gutenberg/pull/41039)).
 
 ## 4.8.0 (2022-06-01)
 
-### Enhancement
+### Enhancements
+
 -   Removed the need for quotation marks when passing options to `wp-env run`.
 -   Setting a `config` key to `null` will prevent adding the constant to `wp-config.php` even if a default value is defined by `wp-env`.
 
 ## 4.7.0 (2022-05-18)
 
-### Enhancement
+### Enhancements
+
 -   Added SSH protocol support for git sources
 
 ## 4.2.0 (2022-01-27)
 
-### Enhancement
+### Enhancements
+
 -   Added command `wp-env install-path` to list the directory used for the environment.
 -   The help entry is now shown when no subcommand is passed to `wp-env`.
 
-### Bug Fix
+### Bug Fixes
+
 -   Updated `yargs` to fix [CVE-2021-3807](https://nvd.nist.gov/vuln/detail/CVE-2021-3807).
 
 ## 4.1.3 (2021-11-07)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix Xdebug installation code to ensure it would fail gracefully
 
 ## 4.0.3 (2021-04-29)
 
-### Bug Fix
+### Bug Fixes
 
 -   `wp-env destroy` will now work in environments which don't include the `grep` or `awk` commands, such as Windows PowerShell.
 -   Fix several permissions issues related to wp-config.php and wp-content files.
@@ -80,7 +290,7 @@
 
 ## 4.0.0 (2021-03-17)
 
-### Breaking Change
+### Breaking Changes
 
 -   Migrate from `nodegit` to `simple-git`. This change now requires you to have a `git` binary installed locally to utilize the git sources feature of wp-env.json.
 
@@ -94,13 +304,13 @@
 
 -   `wp-env start` is now the only command which writes to the docker configuration files. Previously, running any command would also parse the config and then write it to the correct location. Now, other commands still parse the config, but they will not overwrite the confugiration which was set by wp-env start. This allows parameters to be passed to wp-env start which can affect the configuration.
 
-### Enhancement
+### Enhancements
 
 -   Update nodegit dependency to 0.27.0, the earlier version does not have pre-built binaries for Node 14.15.0 LTS. Upgrading provides support without requiring building nodegit locally.
 -   Allow WP_HOME wp-config value to be set to a custom port other than the default for the docker instance.
 -   Append the instance URL to output of `wp-env start`.
 
-### New feature
+### New Features
 
 -   Add support for setting the PHP version used for the WordPress instance. For example, test PHP 8 with `"phpVersion": 8.0` in wp-env.json.
 -   Add Xdebug 3 to the development environment. You can enable Xdebug with `wp-env start --xdebug` (for debug mode) or `wp-env start --xdebug=develop,coverage` for custom modes.
@@ -118,7 +328,7 @@
 -   `wp-env start` no longer stops the WordPress instance if it was already started unless it needs to configure WordPress.
 -   `wp-env start` no longer updates remote sources after first install if the configuration is the same. Use `wp-env start --update` to update sources.
 
-### New Feature
+### New Features
 
 -   You may now specify specific configuration for different environments using `env.tests` or `env.development` in `.wp-env.json`.
 -   `wp-env start` is significantly faster after first install.
@@ -131,7 +341,7 @@
 
 ## 1.4.0 (2020-05-28)
 
-### New Feature
+### New Features
 
 -   Add support for running interactive commands. Examples: `wp-env run cli wp shell` and `wp-env run cli bash`.
 -   View php and WordPress log output with the new `wp-env logs` command.
@@ -141,7 +351,7 @@
 
 ## 1.1.0 (2020-04-01)
 
-### New Feature
+### New Features
 
 -   URLs for ZIP files are now supported as core, plugin, and theme sources.
 -   The `.wp-env.json` coniguration file now accepts a `config` object for setting `wp-config.php` values.
@@ -156,7 +366,7 @@
 -   `wp-env start` no longer accepts a WordPress branch or tag reference as its argument. Instead, create a `.wp-env.json` file and specify a `"core"` field.
 -   `wp-env start` will now download WordPress into a hidden directory located in `~/.wp-env`. You may delete your `{projectName}-wordpress` and `{projectName}-tests-wordpress` directories.
 
-### New Feature
+### New Features
 
 -   A `.wp-env.json` configuration file can now be used to specify the WordPress installation, plugins, and themes to use in the local development environment.
 
diff --git a/packages/env/README.md b/packages/env/README.md
index 13aa1cefaad5f1..35b00fe83e8f4d 100644
--- a/packages/env/README.md
+++ b/packages/env/README.md
@@ -14,11 +14,15 @@ $ wp-env start
 
 The local environment will be available at http://localhost:8888 (Username: `admin`, Password: `password`).
 
+The database credentials are: user `root`, password `password`. For a comprehensive guide on connecting directly to the database, refer to [Accessing the MySQL Database](https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#accessing-the-mysql-database).
+
 ## Prerequisites
 
-`wp-env` requires Docker to be installed. There are instructions available for installing Docker on [Windows](https://docs.docker.com/desktop/install/windows-install/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/desktop/install/linux-install/).
+`wp-env` relies on a few commonly used developer tools:
 
-Node.js and NPM are required. The latest LTS version of Node.js is used to develop `wp-env` and is recommended.
+-   **Docker**. `wp-env` is powered by Docker. There are instructions available for installing Docker on [Windows](https://docs.docker.com/desktop/install/windows-install/) (we recommend the WSL2 backend), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/desktop/install/linux-install/).
+-   **Node.js**. `wp-env` is written as a Node script. We recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) to install the latest LTS version. Alternatively, you can [download it directly here](https://nodejs.org/en/download).
+-   **git**. Git is used for downloading software from source control, such as WordPress, plugins, and themes. [You can find the installation instructions here.](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
 
 ## Installation
 
@@ -40,9 +44,9 @@ If your project already has a package.json, it's also possible to use `wp-env` a
 $ npm i @wordpress/env --save-dev
 ```
 
-At this point, you can use the local, project-level version of wp-env via [`npx`](https://www.npmjs.com/package/npx), a utility automatically installed with `npm`.`npx` finds binaries like wp-env installed through node modules. As an example: `npx wp-env start --update`.
+If you have also installed `wp-env` globally, running it will automatically execute the local, project-level package. Alternatively, you can execute `wp-env` via [`npx`](https://www.npmjs.com/package/npx), a utility automatically installed with `npm`.`npx` finds binaries like `wp-env` installed through node modules. As an example: `npx wp-env start --update`.
 
-If you don't wish to use `npx`, modify your package.json and add an extra command to npm `scripts` (https://docs.npmjs.com/misc/scripts):
+If you don't wish to use the global installation or `npx`, modify your `package.json` and add an extra command to npm `scripts` (https://docs.npmjs.com/misc/scripts):
 
 ```json
 "scripts": {
@@ -117,7 +121,7 @@ $ WP_ENV_PORT=3333 wp-env start
 
 Running `docker ps` and inspecting the `PORTS` column allows you to determine which port `wp-env` is currently using.
 
-You may also specify the port numbers in your `.wp-env.json` file, but the environment variables take precedent.
+You may also specify the port numbers in your `.wp-env.json` file, but the environment variables will take precedence.
 
 ### 3. Restart `wp-env` with updates
 
@@ -171,32 +175,33 @@ $ wp-env destroy
 $ wp-env start
 ```
 
-### 7. Debug mode and inspecting the generated dockerfile.
+## Using included WordPress PHPUnit test files
 
-`wp-env` uses docker behind the scenes. Inspecting the generated docker-compose file can help to understand what's going on.
+Out of the box `wp-env` includes the [WordPress' PHPUnit test files](https://develop.svn.wordpress.org/trunk/tests/phpunit/) corresponding to the version of WordPress installed. There is an environment variable, `WP_TESTS_DIR`, which points to the location of these files within each container. By including these files in the environment, we remove the need for you to use a package or install and mount them yourself. If you do not want to use these files, you should ignore the `WP_TESTS_DIR` environment variable and load them from the location of your choosing.
 
-Start `wp-env` in debug mode
+### Customizing the `wp-tests-config.php` file
 
-```sh
-wp-env start --debug
-```
+While we do provide a default `wp-tests-config.php` file within the environment, there may be cases where you want to use your own. WordPress provides a `WP_TESTS_CONFIG_FILE_PATH` constant that you can use to change the `wp-config.php` file used for testing. Set this to a desired path in your `bootstrap.php` file and the file you've chosen will be used instead of the one included in the environment.
 
-`wp-env` will output its config which includes `dockerComposeConfigPath`.
+## Using `composer`, `phpunit`, and `wp-cli` tools.
 
-```sh
-ℹ Config:
-	...
-	"dockerComposeConfigPath": "/Users/$USERNAME/.wp-env/5a619d332a92377cd89feb339c67b833/docker-compose.yml",
-	...
-```
+For ease of use, Composer, PHPUnit, and wp-cli are available for in the environment. To run these executables, use `wp-env run <env> <tool> <command>`. For example, `wp-env run cli composer install`, or `wp-env run tests-cli phpunit`. You can also access various shells like `wp-env run cli bash` or `wp-env run cli wp shell`.
 
-## Using included WordPress PHPUnit test files
+For the `env` part, `cli` and `wordpress` share a database and mapped volumes, but more tools are available in the cli environment. You should use the `tests-cli` / `tests-wordpress` environments for a separate testing database.
 
-Out of the box `wp-env` includes the [WordPress' PHPUnit test files](https://develop.svn.wordpress.org/trunk/tests/phpunit/) corresponding to the version of WordPress installed. There is an environment variable, `WP_TESTS_DIR`, which points to the location of these files within each container. By including these files in the environment, we remove the need for you to use a package or install and mount them yourself. If you do not want to use these files, you should ignore the `WP_TESTS_DIR` environment variable and load them from the location of your choosing.
+By default, the cwd of the run command is the root of the WordPress install. If you're working on a plugin, you likely need to pass `--env-cwd` to make sure composer/phpunit commands are executed relative to the plugin you're working on. For example, `wp-env run cli --env-cwd=wp-content/plugins/gutenberg composer install`.
 
-### Customizing the `wp-tests-config.php` file
+To make this easier, it's often helpful to add scripts in your `package.json` file:
 
-While we do provide a default `wp-tests-config.php` file within the environment, there may be cases where you want to use your own. WordPress provides a `WP_TESTS_CONFIG_FILE_PATH` constant that you can use to change the `wp-config.php` file used for testing. Set this to a desired path in your `bootstrap.php` file and the file you've chosen will be used instead of the one included in the environment.
+```json
+{
+	"scripts": {
+		"composer": "wp-env run cli --env-cwd=wp-content/plugins/gutenberg composer"
+	}
+}
+```
+
+Then, `npm run composer install` would run composer install in the environment. You could also do this for phpunit, wp-cli, etc.
 
 ## Using Xdebug
 
@@ -221,7 +226,7 @@ npm run wp-env start -- --xdebug
 npx wp-env start --xdebug
 ```
 
-If you forget about that, the `--xdebug` parameter will be passed to NPM instead of the `wp-env start` command and it will be ignored.
+If you forget about that, the `--xdebug` parameter will be passed to npm instead of the `wp-env start` command and it will be ignored.
 
 You can see a reference on each of the Xdebug modes and what they do in the [Xdebug documentation](https://xdebug.org/docs/all_settings#mode).
 
@@ -235,13 +240,13 @@ You should only have to translate `port` and `pathMappings` to the format used b
 
 ```json
 {
-  "name": "Listen for XDebug",
-  "type": "php",
-  "request": "launch",
-  "port": 9003,
-  "pathMappings": {
-    "/var/www/html/wp-content/plugins/gutenberg": "${workspaceFolder}/"
-  }
+	"name": "Listen for XDebug",
+	"type": "php",
+	"request": "launch",
+	"port": 9003,
+	"pathMappings": {
+		"/var/www/html/wp-content/plugins/gutenberg": "${workspaceFolder}/"
+	}
 }
 ```
 
@@ -268,15 +273,14 @@ The start command installs and initializes the WordPress environment, which incl
 ```sh
 wp-env start
 
-Starts WordPress for development on port 8888 (override with WP_ENV_PORT) and
-tests on port 8889 (override with WP_ENV_TESTS_PORT). The current working
-directory must be a WordPress installation, a plugin, a theme, or contain a
-.wp-env.json file. After first install, use the '--update' flag to download
-updates to mapped sources and to re-apply WordPress configuration options.
+Starts WordPress for development on port 8888 (​http://localhost:8888​)
+(override with WP_ENV_PORT) and tests on port 8889 (​http://localhost:8889​)
+(override with WP_ENV_TESTS_PORT). The current working directory must be a
+WordPress installation, a plugin, a theme, or contain a .wp-env.json file. After
+first install, use the '--update' flag to download updates to mapped sources and
+to re-apply WordPress configuration options.
 
 Options:
-  --help     Show help                                                 [boolean]
-  --version  Show version number                                       [boolean]
   --debug    Enable debug output.                     [boolean] [default: false]
   --update   Download source updates and apply WordPress configuration.
                                                       [boolean] [default: false]
@@ -285,6 +289,7 @@ Options:
              them in a comma-separated list: `--xdebug=develop,coverage`. See
              https://xdebug.org/docs/all_settings#mode for information about
              Xdebug modes.                                              [string]
+  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]
 ```
 
 ### `wp-env stop`
@@ -293,6 +298,9 @@ Options:
 wp-env stop
 
 Stops running WordPress for development and tests and frees the ports.
+
+Options:
+  --debug            Enable debug output.             [boolean] [default: false]
 ```
 
 ### `wp-env clean [environment]`
@@ -305,48 +313,50 @@ Cleans the WordPress databases.
 Positionals:
   environment  Which environments' databases to clean.
             [string] [choices: "all", "development", "tests"] [default: "tests"]
+
+Options:
+  --debug    Enable debug output.                     [boolean] [default: false]
+  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]
 ```
 
-### `wp-env run [container] [command]`
+### `wp-env run <container> [command...]`
 
-The run command can be used to open shell sessions or invoke WP-CLI commands.
+The run command can be used to open shell sessions, invoke WP-CLI commands, or run any arbitrary commands inside of a container.
 
 <div class="callout callout-alert">
-In some cases, `wp-env` may consume options that you are attempting to pass to
-the container. This happens with options that `wp-env` has already declared,
-such as `--debug`, `--help`, and `--version`. When this happens, you should fall
-back to using quotation marks; `wp-env` considers everything inside the
-quotation marks to be command argument.
-
-For example, to ask `WP-CLI` for its help text:
-
-```sh
-wp-env run cli "wp --help"
-```
-
-Without the quotation marks, `wp-env` will print its own help text instead of
-passing it to the container. If you experience any problems where the command
-is not being passed correctly, fall back to using quotation marks.
+<p>
+In some cases <code class="language-sh">wp-env run</code> may conflict with options that you are passing to the container.
+When this happens, <code class="language-sh">wp-env</code> will treat the option as its own and take action accordingly.
+For example, if you try <code class="language-sh">wp-env run cli php --help</code>, you will receive the <code class="language-sh">wp-env</code> help text.
+</p>
+
+<p>
+You can get around this by passing any conflicting options after a double dash. <code class="language-sh">wp-env</code> will not process anything after
+the double dash and will simply pass it on to the container. To get the PHP help text you would use <code class="language-sh">wp-env run cli php -- --help</code>.
+</p>
 </div>
 
 ```sh
-wp-env run <container> [command..]
+wp-env run <container> [command...]
 
-Runs an arbitrary command in one of the underlying Docker containers. The
-"container" param should reference one of the underlying Docker services like
-"development", "tests", or "cli". To run a wp-cli command, use the "cli" or
-"tests-cli" service. You can also use this command to open shell sessions like
-bash and the WordPress shell in the WordPress instance. For example, `wp-env run
-cli bash` will open bash in the development WordPress instance.
+Runs an arbitrary command in one of the underlying Docker containers. A double
+dash can be used to pass arguments to the container without parsing them. This
+is necessary if you are using an option that is defined below. You can use
+`bash` to open a shell session and both `composer` and `phpunit` are available
+in all WordPress and CLI containers. WP-CLI is also available in the CLI
+containers.
 
 Positionals:
-  container  The container to run the command on.            [string] [required]
-  command    The command to run.                           [array] [default: []]
+  container  The Docker service to run the command on.
+              [string] [required] [choices: "mysql", "tests-mysql", "wordpress",
+                   "tests-wordpress", "cli", "tests-cli", "composer", "phpunit"]
+  command    The command to run.                                      [required]
 
 Options:
-  --help     Show help                                                 [boolean]
-  --version  Show version number                                       [boolean]
   --debug    Enable debug output.                     [boolean] [default: false]
+  --env-cwd  The command's working directory inside of the container. Paths
+             without a leading slash are relative to the WordPress root.
+                                                         [string] [default: "."]
 ```
 
 For example:
@@ -404,11 +414,22 @@ Success: Installed 1 of 1 plugins.
 ✔ Ran `plugin install custom-post-type-ui` in 'cli'. (in 6s 483ms)
 ```
 
-**NOTE**: Depending on your host OS, you may experience errors when trying to install plugins or themes (e.g. `Warning: Could not create directory.`). This is typically because the user ID used within the container does not have write access to the mounted directories created by `wp-env`. To resolve this, run the `docker-compose` command directly from the directory created by `wp-env` and add `-u $(id -u)` and `-e HOME=/tmp` the `run` command as options:
+#### Changing the permalink structure
+
+You might want to do this to enable access to the REST API (`wp-env/wp/v2/`) endpoint in your wp-env environment. The endpoint is not available with plain permalinks.
+
+**Examples**
+
+To set the permalink to just the post name:
 
-```sh
-$ cd ~/wp-env/500cd328b649d63e882d5c4695871d04
-$ docker-compose run --rm -u $(id -u) -e HOME=/tmp cli [plugin|theme] install <plugin|theme>
+```
+wp-env run cli "wp rewrite structure /%postname%/"
+```
+
+To set the permalink to the year, month, and post name:
+
+```
+wp-env run cli "wp rewrite structure /%year%/%monthnum%/%postname%/"
 ```
 
 ### `wp-env destroy`
@@ -418,6 +439,10 @@ wp-env destroy
 
 Destroy the WordPress environment. Deletes docker containers, volumes, and
 networks associated with the WordPress environment and removes local files.
+
+Options:
+  --debug    Enable debug output.                     [boolean] [default: false]
+  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]
 ```
 
 ### `wp-env logs [environment]`
@@ -432,15 +457,13 @@ Positionals:
       [string] [choices: "development", "tests", "all"] [default: "development"]
 
 Options:
-  --help     Show help                                                 [boolean]
-  --version  Show version number                                       [boolean]
   --debug    Enable debug output.                     [boolean] [default: false]
   --watch    Watch for logs as they happen.            [boolean] [default: true]
 ```
 
 ### `wp-env install-path`
 
-Outputs the absolute path to the WordPress environment files.
+Get the path where all of the environment files are stored. This includes the Docker files, WordPress, PHPUnit files, and any sources that were downloaded.
 
 Example:
 
@@ -454,29 +477,31 @@ $ wp-env install-path
 
 You can customize the WordPress installation, plugins and themes that the development environment will use by specifying a `.wp-env.json` file in the directory that you run `wp-env` from.
 
-`.wp-env.json` supports six fields for options applicable to both the tests and development instances.
+`.wp-env.json` supports fields for options applicable to both the tests and development instances.
 
 | Field          | Type           | Default                                | Description                                                                                                                      |
-| -------------- | -------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+|----------------|----------------|----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------|
 | `"core"`       | `string\|null` | `null`                                 | The WordPress installation to use. If `null` is specified, `wp-env` will use the latest production release of WordPress.         |
 | `"phpVersion"` | `string\|null` | `null`                                 | The PHP version to use. If `null` is specified, `wp-env` will use the default version used with production release of WordPress. |
 | `"plugins"`    | `string[]`     | `[]`                                   | A list of plugins to install and activate in the environment.                                                                    |
 | `"themes"`     | `string[]`     | `[]`                                   | A list of themes to install in the environment.                                                                                  |
 | `"port"`       | `integer`      | `8888` (`8889` for the tests instance) | The primary port number to use for the installation. You'll access the instance through the port: 'http://localhost:8888'.       |
+| `"testsPort"`  | `integer`      | `8889`                                 | The port number for the test site. You'll access the instance through the port: 'http://localhost:8889'.                         |
 | `"config"`     | `Object`       | See below.                             | Mapping of wp-config.php constants to their desired values.                                                                      |
 | `"mappings"`   | `Object`       | `"{}"`                                 | Mapping of WordPress directories to local directories to be mounted in the WordPress instance.                                   |
+| `"mysqlPort"`  | `integer`      | `null` (randomly assigned)             | The MySQL port number to expose. The setting is only available in the `env.development` and `env.tests` objects.                 |
 
 _Note: the port number environment variables (`WP_ENV_PORT` and `WP_ENV_TESTS_PORT`) take precedent over the .wp-env.json values._
 
 Several types of strings can be passed into the `core`, `plugins`, `themes`, and `mappings` fields.
 
-| Type              | Format                                       | Example(s)                                               |
-| ----------------- | -------------------------------------------- | -------------------------------------------------------- |
-| Relative path     | `.<path>\|~<path>`                           | `"./a/directory"`, `"../a/directory"`, `"~/a/directory"` |
-| Absolute path     | `/<path>\|<letter>:\<path>`                  | `"/a/directory"`, `"C:\\a\\directory"`                   |
-| GitHub repository | `<owner>/<repo>[#<ref>]`                     | `"WordPress/WordPress"`, `"WordPress/gutenberg#trunk"`, if no branch is provided wp-env will fall back to the repos default branch |
-| SSH repository    | `ssh://user@host/<owner>/<repo>.git[#<ref>]` | `"ssh://git@github.com/WordPress/WordPress.git"`         |
-| ZIP File          | `http[s]://<host>/<path>.zip`                | `"https://wordpress.org/wordpress-5.4-beta2.zip"`        |
+| Type              | Format                                       | Example(s)                                                                                                                         |
+| ----------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| Relative path     | `.<path>\|~<path>`                           | `"./a/directory"`, `"../a/directory"`, `"~/a/directory"`                                                                           |
+| Absolute path     | `/<path>\|<letter>:\<path>`                  | `"/a/directory"`, `"C:\\a\\directory"`                                                                                             |
+| GitHub repository | `<owner>/<repo>[/<path>][#<ref>]`                     | `"WordPress/WordPress"`, `"WordPress/gutenberg#trunk"`, `WordPress/themes/my-theme#my-branch`; if no branch is provided wp-env will fall back to the repo's default branch |
+| SSH repository    | `ssh://user@host/<owner>/<repo>.git[#<ref>]` | `"ssh://git@github.com/WordPress/WordPress.git"`                                                                                   |
+| ZIP File          | `http[s]://<host>/<path>.zip`                | `"https://wordpress.org/wordpress-5.4-beta2.zip"`                                                                                  |
 
 Remote sources will be downloaded into a temporary directory located in `~/.wp-env`.
 
@@ -484,22 +509,23 @@ Additionally, the key `env` is available to override any of the above options on
 
 ```json
 {
-  "plugins": ["."],
-  "config": {
-    "KEY_1": true,
-    "KEY_2": false
-  },
-  "env": {
-    "development": {
-      "themes": ["./one-theme"]
-    },
-    "tests": {
-      "config": {
-        "KEY_1": false
-      },
-      "port": 3000
-    }
-  }
+	"plugins": [ "." ],
+	"config": {
+		"KEY_1": true,
+		"KEY_2": false
+	},
+	"env": {
+		"development": {
+			"themes": [ "./one-theme" ]
+		},
+		"tests": {
+			"config": {
+				"KEY_1": false
+			},
+			"port": 3000,
+			"mysqlPort": 13306
+		}
+	}
 }
 ```
 
@@ -534,16 +560,27 @@ These can be overridden by setting a value within the `config` configuration. Se
 
 Additionally, the values referencing a URL include the specified port for the given environment. So if you set `testsPort: 3000, port: 2000`, `WP_HOME` (for example) will be `http://localhost:3000` on the tests instance and `http://localhost:2000` on the development instance.
 
-### Examples
+## Lifecycle Scripts
 
-#### Latest stable WordPress + current directory as a plugin
+Using the `lifecycleScripts` option in `.wp-env.json` will allow you to set arbitrary commands to be executed at certain points in the lifecycle. This configuration
+can also be overridden using `WP_ENV_LIFECYCLE_SCRIPT_{LIFECYCLE_EVENT}` environment variables, with the remainder being the all-caps snake_case name of the option, for
+example, `WP_ENV_LIFECYCLE_SCRIPT_AFTER_START`. Keep in mind that these will be executed on both fresh and existing environments, so, ensure any commands you
+build won't break on subsequent executions.
+
+* `afterStart`: Runs after `wp-env start` has finished setting up the environment.
+* `afterClean`: Runs after `wp-env clean` has finished cleaning the environment.
+* `afterDestroy`: Runs after `wp-env destroy` has destroyed the environment.
+
+## Examples
+
+### Latest stable WordPress + current directory as a plugin
 
 This is useful for plugin development.
 
 ```json
 {
-  "core": null,
-  "plugins": ["."]
+	"core": null,
+	"plugins": [ "." ]
 }
 ```
 
@@ -553,12 +590,12 @@ This is useful for plugin development when upstream Core changes need to be test
 
 ```json
 {
-  "core": "WordPress/WordPress#master",
-  "plugins": ["."]
+	"core": "WordPress/WordPress#master",
+	"plugins": [ "." ]
 }
 ```
 
-#### Local `wordpress-develop` + current directory as a plugin
+### Local `wordpress-develop` + current directory as a plugin
 
 This is useful for working on plugins and WordPress Core at the same time.
 
@@ -566,8 +603,8 @@ If you are running a _build_ of `wordpress-develop`, point `core` to the `build`
 
 ```json
 {
-  "core": "../wordpress-develop/build",
-  "plugins": ["."]
+	"core": "../wordpress-develop/build",
+	"plugins": [ "." ]
 }
 ```
 
@@ -575,93 +612,130 @@ If you are running `wordpress-develop` in a dev mode (e.g. the watch command `de
 
 ```json
 {
-  "core": "../wordpress-develop/src",
-  "plugins": ["."]
+	"core": "../wordpress-develop/src",
+	"plugins": [ "." ]
 }
 ```
 
-#### A complete testing environment
+### A complete testing environment
 
 This is useful for integration testing: that is, testing how old versions of WordPress and different combinations of plugins and themes impact each other.
 
 ```json
 {
-  "core": "WordPress/WordPress#5.2.0",
-  "plugins": ["WordPress/wp-lazy-loading", "WordPress/classic-editor"],
-  "themes": ["WordPress/theme-experiments"]
+	"core": "WordPress/WordPress#5.2.0",
+	"plugins": [ "WordPress/wp-lazy-loading", "WordPress/classic-editor" ],
+	"themes": [ "WordPress/theme-experiments" ]
 }
 ```
 
-#### Add mu-plugins and other mapped directories
+### Add mu-plugins and other mapped directories
 
 You can add mu-plugins via the mapping config. The mapping config also allows you to mount a directory to any location in the wordpress install, so you could even mount a subdirectory. Note here that theme-1, will not be activated.
 
 ```json
 {
-  "plugins": ["."],
-  "mappings": {
-    "wp-content/mu-plugins": "./path/to/local/mu-plugins",
-    "wp-content/themes": "./path/to/local/themes",
-    "wp-content/themes/specific-theme": "./path/to/local/theme-1"
-  }
+	"plugins": [ "." ],
+	"mappings": {
+		"wp-content/mu-plugins": "./path/to/local/mu-plugins",
+		"wp-content/themes": "./path/to/local/themes",
+		"wp-content/themes/specific-theme": "./path/to/local/theme-1"
+	}
 }
 ```
 
-#### Avoid activating plugins or themes on the instance
+### Avoid activating plugins or themes on the instance
 
 Since all plugins in the `plugins` key are activated by default, you should use the `mappings` key to avoid this behavior. This might be helpful if you have a test plugin that should not be activated all the time.
 
 ```json
 {
-  "plugins": ["."],
-  "mappings": {
-    "wp-content/plugins/my-test-plugin": "./path/to/test/plugin"
-  }
+	"plugins": [ "." ],
+	"mappings": {
+		"wp-content/plugins/my-test-plugin": "./path/to/test/plugin"
+	}
 }
 ```
 
-#### Map a plugin only in the tests environment
+### Map a plugin only in the tests environment
 
 If you need a plugin active in one environment but not the other, you can use `env.<envName>` to set options specific to one environment. Here, we activate cwd and a test plugin on the tests instance. This plugin is not activated on any other instances.
 
 ```json
 {
-  "plugins": ["."],
-  "env": {
-    "tests": {
-      "plugins": [".", "path/to/test/plugin"]
-    }
-  }
+	"plugins": [ "." ],
+	"env": {
+		"tests": {
+			"plugins": [ ".", "path/to/test/plugin" ]
+		}
+	}
 }
 ```
 
-#### Custom Port Numbers
+### Custom Port Numbers
 
 You can tell `wp-env` to use a custom port number so that your instance does not conflict with other `wp-env` instances.
 
 ```json
 {
-  "plugins": ["."],
-  "port": 4013,
-  "env": {
-    "tests": {
-      "port": 4012
-    }
-  }
+	"plugins": [ "." ],
+	"port": 4013,
+	"env": {
+		"tests": {
+			"port": 4012
+		}
+	}
 }
 ```
 
-#### Specific PHP Version
+These can also be set via the environment variables `WP_ENV_PORT`, `WP_ENV_TESTS_PORT`, `WP_ENV_MYSQL_PORT` and `WP_ENV_TESTS_MYSQL_PORT`.
+
+### Specific PHP Version
 
 You can tell `wp-env` to use a specific PHP version for compatibility and testing. This can also be set via the environment variable `WP_ENV_PHP_VERSION`.
 
 ```json
 {
-  "phpVersion": "7.2",
-  "plugins": ["."]
+	"phpVersion": "7.2",
+	"plugins": [ "." ]
 }
 ```
 
+### Node Lifecycle Script
+
+This is useful for performing some actions after setting up the environment, such as bootstrapping an E2E test environment.
+
+```json
+{
+	"lifecycleScripts": {
+		"afterStart": "node tests/e2e/bin/setup-env.js"
+	}
+}
+```
+
+### Advanced PHP settings
+
+You can set PHP settings by mapping an `.htaccess` file. This maps an `.htaccess` file to the WordPress root (`/var/www/html`) from the directory in which you run `wp-env`.
+
+```json
+{
+	"mappings": {
+		".htaccess": ".htaccess"
+	}
+}
+```
+
+Then, your .htaccess file can contain various settings like this:
+
+```
+# Note: the default upload value is 1G.
+php_value post_max_size 2G
+php_value upload_max_filesize 2G
+php_value memory_limit 2G
+```
+
+This is useful if there are options you'd like to add to `php.ini`, which is difficult to access in this environment.
+
 ## 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.
diff --git a/packages/env/bin/wp-env b/packages/env/bin/wp-env
index 7ce3e39103bcd1..a6c4784a3e7fb5 100755
--- a/packages/env/bin/wp-env
+++ b/packages/env/bin/wp-env
@@ -1,4 +1,20 @@
 #!/usr/bin/env node
 'use strict';
-const command = process.argv.slice( 2 );
-require( '../lib/cli' )().parse( command.length ? command : [ '--help' ] );
+
+// Remove 'node' and the name of the script from the arguments.
+let command = process.argv.slice( 2 );
+// Default to help text when they aren't running any commands.
+if ( ! command.length ) {
+	command = [ '--help' ];
+}
+
+// Rather than just executing the current CLI we will attempt to find a local version
+// and execute that one instead. This prevents users from accidentally using the
+// global CLI when a potentially different local version is expected.
+const localPath = require.resolve( '@wordpress/env/lib/cli.js', {
+	paths: [ process.cwd(), __dirname ],
+} );
+const cli = require( localPath )();
+
+// Now we can execute the CLI with the given command.
+cli.parse( command );
diff --git a/packages/env/lib/build-docker-compose-config.js b/packages/env/lib/build-docker-compose-config.js
index ff85ba807f00a9..a394537e360872 100644
--- a/packages/env/lib/build-docker-compose-config.js
+++ b/packages/env/lib/build-docker-compose-config.js
@@ -10,25 +10,28 @@ const path = require( 'path' );
  */
 const { hasSameCoreSource } = require( './wordpress' );
 const { dbEnv } = require( './config' );
+const getHostUser = require( './get-host-user' );
 
 /**
  * @typedef {import('./config').WPConfig} WPConfig
- * @typedef {import('./config').WPServiceConfig} WPServiceConfig
+ * @typedef {import('./config').WPEnvironmentConfig} WPEnvironmentConfig
  */
 
 /**
  * Gets the volume mounts for an individual service.
  *
- * @param {string}          workDirectoryPath The working directory for wp-env.
- * @param {WPServiceConfig} config            The service config to get the mounts from.
- * @param {string}          wordpressDefault  The default internal path for the WordPress
- *                                            source code (such as tests-wordpress).
+ * @param {string}              workDirectoryPath The working directory for wp-env.
+ * @param {WPEnvironmentConfig} config            The service config to get the mounts from.
+ * @param {string}              hostUsername      The username of the host running wp-env.
+ * @param {string}              wordpressDefault  The default internal path for the WordPress
+ *                                                source code (such as tests-wordpress).
  *
  * @return {string[]} An array of volumes to mount in string format.
  */
 function getMounts(
 	workDirectoryPath,
 	config,
+	hostUsername,
 	wordpressDefault = 'wordpress'
 ) {
 	// Top-level WordPress directory mounts (like wp-content/themes)
@@ -46,9 +49,10 @@ function getMounts(
 			`${ source.path }:/var/www/html/wp-content/themes/${ source.basename }`
 	);
 
-	const coreMount = `${
-		config.coreSource ? config.coreSource.path : wordpressDefault
-	}:/var/www/html`;
+	const userHomeMount =
+		wordpressDefault === 'wordpress'
+			? `user-home:/home/${ hostUsername }`
+			: `tests-user-home:/home/${ hostUsername }`;
 
 	const corePHPUnitMount = `${ path.join(
 		workDirectoryPath,
@@ -59,10 +63,15 @@ function getMounts(
 		'phpunit'
 	) }:/wordpress-phpunit`;
 
+	const coreMount = `${
+		config.coreSource ? config.coreSource.path : wordpressDefault
+	}:/var/www/html`;
+
 	return [
 		...new Set( [
-			coreMount,
+			coreMount, // Must be first because of some operations later that expect it to be!
 			corePHPUnitMount,
+			userHomeMount,
 			...directoryMounts,
 			...pluginMounts,
 			...themeMounts,
@@ -79,16 +88,32 @@ function getMounts(
  * @return {Object} A docker-compose config object, ready to serialize into YAML.
  */
 module.exports = function buildDockerComposeConfig( config ) {
+	// Since we are mounting files from the host operating system
+	// we want to create the host user in some of our containers.
+	// This ensures ownership parity and lets us access files
+	// and folders between the containers and the host.
+	const hostUser = getHostUser();
+
 	const developmentMounts = getMounts(
 		config.workDirectoryPath,
-		config.env.development
+		config.env.development,
+		hostUser.name
 	);
 	const testsMounts = getMounts(
 		config.workDirectoryPath,
 		config.env.tests,
+		hostUser.name,
 		'tests-wordpress'
 	);
 
+	// We use a custom Dockerfile in order to make sure that
+	// the current host user exists inside the container.
+	const imageBuildArgs = {
+		HOST_USERNAME: hostUser.name,
+		HOST_UID: hostUser.uid,
+		HOST_GID: hostUser.gid,
+	};
+
 	// When both tests and development reference the same WP source, we need to
 	// ensure that tests pulls from a copy of the files so that it maintains
 	// a separate DB and config. Additionally, if the source type is local we
@@ -141,70 +166,19 @@ module.exports = function buildDockerComposeConfig( config ) {
 
 	// Set the default ports based on the config values.
 	const developmentPorts = `\${WP_ENV_PORT:-${ config.env.development.port }}:80`;
+	const developmentMysqlPorts = `\${WP_ENV_MYSQL_PORT:-${
+		config.env.development.mysqlPort ?? ''
+	}}:3306`;
 	const testsPorts = `\${WP_ENV_TESTS_PORT:-${ config.env.tests.port }}:80`;
-
-	// Set the WordPress, WP-CLI, PHPUnit PHP version if defined.
-	const developmentPhpVersion = config.env.development.phpVersion
-		? config.env.development.phpVersion
-		: '';
-	const testsPhpVersion = config.env.tests.phpVersion
-		? config.env.tests.phpVersion
-		: '';
-
-	// Set the WordPress images with the PHP version tag.
-	const developmentWpImage = `wordpress${
-		developmentPhpVersion ? ':php' + developmentPhpVersion : ''
-	}`;
-	const testsWpImage = `wordpress${
-		testsPhpVersion ? ':php' + testsPhpVersion : ''
-	}`;
-	// Set the WordPress CLI images with the PHP version tag.
-	const developmentWpCliImage = `wordpress:cli${
-		! developmentPhpVersion || developmentPhpVersion.length === 0
-			? ''
-			: '-php' + developmentPhpVersion
-	}`;
-	const testsWpCliImage = `wordpress:cli${
-		! testsPhpVersion || testsPhpVersion.length === 0
-			? ''
-			: '-php' + testsPhpVersion
-	}`;
-
-	// Defaults are to use the most recent version of PHPUnit that provides
-	// support for the specified version of PHP.
-	// PHP Unit is assumed to be for Tests so use the testsPhpVersion.
-	let phpunitTag = 'latest';
-	const phpunitPhpVersion = '-php-' + testsPhpVersion + '-fpm';
-	if ( testsPhpVersion === '5.6' ) {
-		phpunitTag = '5' + phpunitPhpVersion;
-	} else if ( testsPhpVersion === '7.0' ) {
-		phpunitTag = '6' + phpunitPhpVersion;
-	} else if ( testsPhpVersion === '7.1' ) {
-		phpunitTag = '7' + phpunitPhpVersion;
-	} else if ( [ '7.2', '7.3', '7.4' ].indexOf( testsPhpVersion ) >= 0 ) {
-		phpunitTag = '8' + phpunitPhpVersion;
-	} else if ( testsPhpVersion === '8.0' ) {
-		phpunitTag = '9' + phpunitPhpVersion;
-	}
-	const phpunitImage = `wordpressdevelop/phpunit:${ phpunitTag }`;
-
-	// The www-data user in wordpress:cli has a different UID (82) to the
-	// www-data user in wordpress (33). Ensure we use the wordpress www-data
-	// user for CLI commands.
-	// https://github.com/docker-library/wordpress/issues/256
-	const cliUser = '33:33';
-
-	// If the user mounted their own uploads folder, we should not override it in the phpunit service.
-	const isMappingTestUploads = testsMounts.some( ( mount ) =>
-		mount.endsWith( ':/var/www/html/wp-content/uploads' )
-	);
+	const testsMysqlPorts = `\${WP_ENV_TESTS_MYSQL_PORT:-${
+		config.env.tests.mysqlPort ?? ''
+	}}:3306`;
 
 	return {
-		version: '3.7',
 		services: {
 			mysql: {
-				image: 'mariadb',
-				ports: [ '3306' ],
+				image: 'mariadb:lts',
+				ports: [ developmentMysqlPorts ],
 				environment: {
 					MYSQL_ROOT_HOST: '%',
 					MYSQL_ROOT_PASSWORD:
@@ -214,8 +188,8 @@ module.exports = function buildDockerComposeConfig( config ) {
 				volumes: [ 'mysql:/var/lib/mysql' ],
 			},
 			'tests-mysql': {
-				image: 'mariadb',
-				ports: [ '3306' ],
+				image: 'mariadb:lts',
+				ports: [ testsMysqlPorts ],
 				environment: {
 					MYSQL_ROOT_HOST: '%',
 					MYSQL_ROOT_PASSWORD:
@@ -225,69 +199,72 @@ module.exports = function buildDockerComposeConfig( config ) {
 				volumes: [ 'mysql-test:/var/lib/mysql' ],
 			},
 			wordpress: {
-				build: '.',
 				depends_on: [ 'mysql' ],
-				image: developmentWpImage,
+				build: {
+					context: '.',
+					dockerfile: 'WordPress.Dockerfile',
+					args: imageBuildArgs,
+				},
 				ports: [ developmentPorts ],
 				environment: {
+					APACHE_RUN_USER: '#' + hostUser.uid,
+					APACHE_RUN_GROUP: '#' + hostUser.gid,
 					...dbEnv.credentials,
 					...dbEnv.development,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
 				volumes: developmentMounts,
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			'tests-wordpress': {
 				depends_on: [ 'tests-mysql' ],
-				image: testsWpImage,
+				build: {
+					context: '.',
+					dockerfile: 'Tests-WordPress.Dockerfile',
+					args: imageBuildArgs,
+				},
 				ports: [ testsPorts ],
 				environment: {
+					APACHE_RUN_USER: '#' + hostUser.uid,
+					APACHE_RUN_GROUP: '#' + hostUser.gid,
 					...dbEnv.credentials,
 					...dbEnv.tests,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
 				volumes: testsMounts,
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			cli: {
 				depends_on: [ 'wordpress' ],
-				image: developmentWpCliImage,
+				build: {
+					context: '.',
+					dockerfile: 'CLI.Dockerfile',
+					args: imageBuildArgs,
+				},
 				volumes: developmentMounts,
-				user: cliUser,
+				user: hostUser.fullUser,
 				environment: {
 					...dbEnv.credentials,
 					...dbEnv.development,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			'tests-cli': {
 				depends_on: [ 'tests-wordpress' ],
-				image: testsWpCliImage,
+				build: {
+					context: '.',
+					dockerfile: 'Tests-CLI.Dockerfile',
+					args: imageBuildArgs,
+				},
 				volumes: testsMounts,
-				user: cliUser,
+				user: hostUser.fullUser,
 				environment: {
 					...dbEnv.credentials,
 					...dbEnv.tests,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
-			},
-			composer: {
-				image: 'composer',
-				volumes: [ `${ config.configDirectoryPath }:/app` ],
-			},
-			phpunit: {
-				image: phpunitImage,
-				depends_on: [ 'tests-wordpress' ],
-				volumes: [
-					...testsMounts,
-					...( ! isMappingTestUploads
-						? [ 'phpunit-uploads:/var/www/html/wp-content/uploads' ]
-						: [] ),
-				],
-				environment: {
-					LOCAL_DIR: 'html',
-					WP_TESTS_DIR: '/wordpress-phpunit',
-					...dbEnv.credentials,
-					...dbEnv.tests,
-				},
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 		},
 		volumes: {
@@ -295,7 +272,8 @@ module.exports = function buildDockerComposeConfig( config ) {
 			...( ! config.env.tests.coreSource && { 'tests-wordpress': {} } ),
 			mysql: {},
 			'mysql-test': {},
-			'phpunit-uploads': {},
+			'user-home': {},
+			'tests-user-home': {},
 		},
 	};
 };
diff --git a/packages/env/lib/cache.js b/packages/env/lib/cache.js
index d6b532c559f49a..98eac693b3420e 100644
--- a/packages/env/lib/cache.js
+++ b/packages/env/lib/cache.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * External dependencies
  */
@@ -39,6 +40,9 @@ async function didCacheChange( key, value, options ) {
  * @param {WPEnvCacheOptions} options Parsing options
  */
 async function setCache( key, value, options ) {
+	// Make sure the cache directory exists.
+	await fs.mkdir( options.workDirectoryPath, { recursive: true } );
+
 	const existingCache = await getCacheFile( options );
 	existingCache[ key ] = value;
 
diff --git a/packages/env/lib/cli.js b/packages/env/lib/cli.js
index abca20c9b3619a..896df6cd59fed0 100644
--- a/packages/env/lib/cli.js
+++ b/packages/env/lib/cli.js
@@ -11,8 +11,13 @@ const { execSync } = require( 'child_process' );
 /**
  * Internal dependencies
  */
+const pkg = require( '../package.json' );
 const env = require( './env' );
 const parseXdebugMode = require( './parse-xdebug-mode' );
+const {
+	RUN_CONTAINERS,
+	validateRunContainer,
+} = require( './validate-run-container' );
 
 // Colors.
 const boldWhite = chalk.bold.white;
@@ -39,8 +44,11 @@ const withSpinner =
 				process.exit( 0 );
 			},
 			( error ) => {
-				if ( error instanceof env.ValidationError ) {
-					// Error is a validation error. That means the user did something wrong.
+				if (
+					error instanceof env.ValidationError ||
+					error instanceof env.LifecycleScriptError
+				) {
+					// Error is a configuration error. That means the user did something wrong.
 					spinner.fail( error.message );
 					process.exit( 1 );
 				} else if (
@@ -50,10 +58,10 @@ const withSpinner =
 					'err' in error &&
 					'out' in error
 				) {
-					// Error is a docker-compose error. That means something docker-related failed.
+					// Error is a docker compose error. That means something docker-related failed.
 					// https://github.com/PDMLab/docker-compose/blob/HEAD/src/index.ts
 					spinner.fail(
-						'Error while running docker-compose command.'
+						'Error while running docker compose command.'
 					);
 					if ( error.out ) {
 						process.stdout.write( error.out );
@@ -96,9 +104,16 @@ module.exports = function cli() {
 		default: false,
 	} );
 
-	// Make sure any unknown arguments are passed to the command as arguments.
-	// This allows options to be passed to "run" without being quoted.
-	yargs.parserConfiguration( { 'unknown-options-as-args': true } );
+	yargs.parserConfiguration( {
+		// Treats unknown options as arguments for commands to deal with instead of discarding them.
+		'unknown-options-as-args': true,
+		// Populates '--' in the command options with arguments after the double dash.
+		'populate--': true,
+	} );
+
+	// Since we might be running a different CLI version than the one that was called
+	// we need to set the version manually from the correct package.json.
+	yargs.version( pkg.version );
 
 	yargs.command(
 		'start',
@@ -124,6 +139,11 @@ module.exports = function cli() {
 				coerce: parseXdebugMode,
 				type: 'string',
 			} );
+			args.option( 'scripts', {
+				type: 'boolean',
+				describe: 'Execute any configured lifecycle scripts.',
+				default: true,
+			} );
 		},
 		withSpinner( env.start )
 	);
@@ -145,6 +165,11 @@ module.exports = function cli() {
 				choices: [ 'all', 'development', 'tests' ],
 				default: 'tests',
 			} );
+			args.option( 'scripts', {
+				type: 'boolean',
+				describe: 'Execute any configured lifecycle scripts.',
+				default: true,
+			} );
 		},
 		withSpinner( env.clean )
 	);
@@ -171,12 +196,22 @@ module.exports = function cli() {
 		'Displays the latest logs for the e2e test environment without watching.'
 	);
 	yargs.command(
-		'run <container> [command..]',
-		'Runs an arbitrary command in one of the underlying Docker containers. The "container" param should reference one of the underlying Docker services like "development", "tests", or "cli". To run a wp-cli command, use the "cli" or "tests-cli" service. You can also use this command to open shell sessions like bash and the WordPress shell in the WordPress instance. For example, `wp-env run cli bash` will open bash in the development WordPress instance. When using long commands with arguments and quotation marks, you need to wrap the "command" param in quotation marks. For example: `wp-env run tests-cli "wp post create --post_type=page --post_title=\'Test\'"` will create a post on the tests WordPress instance.',
+		'run <container> [command...]',
+		'Runs an arbitrary command in one of the underlying Docker containers. A double dash can be used to pass arguments to the container without parsing them. This is necessary if you are using an option that is defined below. You can use `bash` to open a shell session and both `composer` and `phpunit` are available in all WordPress and CLI containers. WP-CLI is also available in the CLI containers.',
 		( args ) => {
+			args.option( 'env-cwd', {
+				type: 'string',
+				requiresArg: true,
+				default: '.',
+				describe:
+					"The command's working directory inside of the container. Paths without a leading slash are relative to the WordPress root.",
+			} );
 			args.positional( 'container', {
 				type: 'string',
-				describe: 'The container to run the command on.',
+				describe:
+					'The underlying Docker service to run the command on.',
+				choices: RUN_CONTAINERS,
+				coerce: validateRunContainer,
 			} );
 			args.positional( 'command', {
 				type: 'array',
@@ -203,12 +238,18 @@ module.exports = function cli() {
 		wpRed(
 			'Destroy the WordPress environment. Deletes docker containers, volumes, and networks associated with the WordPress environment and removes local files.'
 		),
-		() => {},
+		( args ) => {
+			args.option( 'scripts', {
+				type: 'boolean',
+				describe: 'Execute any configured lifecycle scripts.',
+				default: true,
+			} );
+		},
 		withSpinner( env.destroy )
 	);
 	yargs.command(
 		'install-path',
-		'Get the path where environment files are located.',
+		'Get the path where all of the environment files are stored. This includes the Docker files, WordPress, PHPUnit files, and any sources that were downloaded.',
 		() => {},
 		withSpinner( env.installPath )
 	);
diff --git a/packages/env/lib/commands/clean.js b/packages/env/lib/commands/clean.js
index adde9d072d9eb0..587080eee99db1 100644
--- a/packages/env/lib/commands/clean.js
+++ b/packages/env/lib/commands/clean.js
@@ -1,13 +1,15 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 
 /**
  * Internal dependencies
  */
 const initConfig = require( '../init-config' );
 const { configureWordPress, resetDatabase } = require( '../wordpress' );
+const { executeLifecycleScript } = require( '../execute-lifecycle-script' );
 
 /**
  * @typedef {import('../wordpress').WPEnvironment} WPEnvironment
@@ -20,9 +22,15 @@ const { configureWordPress, resetDatabase } = require( '../wordpress' );
  * @param {Object}                 options
  * @param {WPEnvironmentSelection} options.environment The environment to clean. Either 'development', 'tests', or 'all'.
  * @param {Object}                 options.spinner     A CLI spinner which indicates progress.
+ * @param {boolean}                options.scripts     Indicates whether or not lifecycle scripts should be executed.
  * @param {boolean}                options.debug       True if debug mode is enabled.
  */
-module.exports = async function clean( { environment, spinner, debug } ) {
+module.exports = async function clean( {
+	environment,
+	spinner,
+	scripts,
+	debug,
+} ) {
 	const config = await initConfig( { spinner, debug } );
 
 	const description = `${ environment } environment${
@@ -57,5 +65,9 @@ module.exports = async function clean( { environment, spinner, debug } ) {
 
 	await Promise.all( tasks );
 
+	if ( scripts ) {
+		await executeLifecycleScript( 'afterClean', config, spinner );
+	}
+
 	spinner.text = `Cleaned ${ description }.`;
 };
diff --git a/packages/env/lib/commands/destroy.js b/packages/env/lib/commands/destroy.js
index 5b081392209f9a..20f76250271a9e 100644
--- a/packages/env/lib/commands/destroy.js
+++ b/packages/env/lib/commands/destroy.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 const util = require( 'util' );
 const fs = require( 'fs' ).promises;
 const path = require( 'path' );
@@ -11,35 +12,33 @@ const inquirer = require( 'inquirer' );
  * Promisified dependencies
  */
 const rimraf = util.promisify( require( 'rimraf' ) );
-const exec = util.promisify( require( 'child_process' ).exec );
 
 /**
  * Internal dependencies
  */
-const { readConfig } = require( '../../lib/config' );
+const { loadConfig } = require( '../config' );
+const { executeLifecycleScript } = require( '../execute-lifecycle-script' );
 
 /**
  * Destroy the development server.
  *
  * @param {Object}  options
  * @param {Object}  options.spinner A CLI spinner which indicates progress.
+ * @param {boolean} options.scripts Indicates whether or not lifecycle scripts should be executed.
  * @param {boolean} options.debug   True if debug mode is enabled.
  */
-module.exports = async function destroy( { spinner, debug } ) {
-	const configPath = path.resolve( '.wp-env.json' );
-	const { dockerComposeConfigPath, workDirectoryPath } = await readConfig(
-		configPath
-	);
+module.exports = async function destroy( { spinner, scripts, debug } ) {
+	const config = await loadConfig( path.resolve( '.' ) );
 
 	try {
-		await fs.readdir( workDirectoryPath );
+		await fs.readdir( config.workDirectoryPath );
 	} catch {
 		spinner.text = 'Could not find any files to remove.';
 		return;
 	}
 
 	spinner.info(
-		'WARNING! This will remove Docker containers, volumes, and networks associated with the WordPress instance.'
+		'WARNING! This will remove Docker containers, volumes, networks, and images associated with the WordPress instance.'
 	);
 
 	const { yesDelete } = await inquirer.prompt( [
@@ -58,44 +57,24 @@ module.exports = async function destroy( { spinner, debug } ) {
 		return;
 	}
 
-	spinner.text = 'Removing WordPress docker containers.';
+	spinner.text = 'Removing docker images, volumes, and networks.';
 
-	await dockerCompose.rm( {
-		config: dockerComposeConfigPath,
-		commandOptions: [ '--stop', '-v' ],
+	await dockerCompose.down( {
+		config: config.dockerComposeConfigPath,
+		commandOptions: [ '--volumes', '--remove-orphans', '--rmi', 'all' ],
 		log: debug,
 	} );
 
-	const directoryHash = path.basename( workDirectoryPath );
-
-	spinner.text = 'Removing docker volumes.';
-	await removeDockerItems( 'volume', directoryHash );
-
-	spinner.text = 'Removing docker networks.';
-	await removeDockerItems( 'network', directoryHash );
-
 	spinner.text = 'Removing local files.';
-
-	await rimraf( workDirectoryPath );
+	// Note: there is a race condition where docker compose actually hasn't finished
+	// by this point, which causes rimraf to fail. We need to wait at least 2.5-5s,
+	// but using 10s in case it's dependant on the machine.
+	await new Promise( ( resolve ) => setTimeout( resolve, 10000 ) );
+	await rimraf( config.workDirectoryPath );
+
+	if ( scripts ) {
+		await executeLifecycleScript( 'afterDestroy', config, spinner );
+	}
 
 	spinner.text = 'Removed WordPress environment.';
 };
-
-/**
- * Removes docker items, like networks or volumes, matching the given name.
- *
- * @param {string} itemType The item type, like "network" or "volume"
- * @param {string} name     Remove items whose name match this string.
- */
-async function removeDockerItems( itemType, name ) {
-	const { stdout: items } = await exec(
-		`docker ${ itemType } ls -q --filter name=${ name }`
-	);
-	if ( items ) {
-		await exec(
-			`docker ${ itemType } rm ${ items
-				.split( '\n' ) // TODO: use os.EOL?
-				.join( ' ' ) }`
-		);
-	}
-}
diff --git a/packages/env/lib/commands/index.js b/packages/env/lib/commands/index.js
index f040fe174687db..04b0a9a3678d1d 100644
--- a/packages/env/lib/commands/index.js
+++ b/packages/env/lib/commands/index.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * Internal dependencies
  */
diff --git a/packages/env/lib/commands/install-path.js b/packages/env/lib/commands/install-path.js
index 4cc5358a65d023..a71a153339c47f 100644
--- a/packages/env/lib/commands/install-path.js
+++ b/packages/env/lib/commands/install-path.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * Internal dependencies
  */
diff --git a/packages/env/lib/commands/logs.js b/packages/env/lib/commands/logs.js
index 704b89328d6b5e..b581835b2f9945 100644
--- a/packages/env/lib/commands/logs.js
+++ b/packages/env/lib/commands/logs.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 
 /**
  * Internal dependencies
diff --git a/packages/env/lib/commands/run.js b/packages/env/lib/commands/run.js
index f944d8de84fa53..88dc99374afbeb 100644
--- a/packages/env/lib/commands/run.js
+++ b/packages/env/lib/commands/run.js
@@ -1,12 +1,15 @@
+'use strict';
 /**
  * External dependencies
  */
 const { spawn } = require( 'child_process' );
+const path = require( 'path' );
 
 /**
  * Internal dependencies
  */
 const initConfig = require( '../init-config' );
+const getHostUser = require( '../get-host-user' );
 
 /**
  * @typedef {import('../config').WPConfig} WPConfig
@@ -18,57 +21,89 @@ const initConfig = require( '../init-config' );
  * @param {Object}   options
  * @param {string}   options.container The Docker container to run the command on.
  * @param {string[]} options.command   The command to run.
+ * @param {string[]} options.'--'      Any arguments that were passed after a double dash.
+ * @param {string}   options.envCwd    The working directory for the command to be executed from.
  * @param {Object}   options.spinner   A CLI spinner which indicates progress.
  * @param {boolean}  options.debug     True if debug mode is enabled.
  */
-module.exports = async function run( { container, command, spinner, debug } ) {
+module.exports = async function run( {
+	container,
+	command,
+	'--': doubleDashedArgs,
+	envCwd,
+	spinner,
+	debug,
+} ) {
 	const config = await initConfig( { spinner, debug } );
 
-	command = command.join( ' ' );
+	// Include any double dashed arguments in the command so that we can pass them to Docker.
+	// This lets users pass options that the command defines without them being parsed.
+	if ( Array.isArray( doubleDashedArgs ) ) {
+		command.push( ...doubleDashedArgs );
+	}
 
 	// Shows a contextual tip for the given command.
-	showCommandTips( command, container, spinner );
+	const joinedCommand = command.join( ' ' );
+	showCommandTips( joinedCommand, container, spinner );
 
-	await spawnCommandDirectly( {
-		container,
-		command,
-		spinner,
-		config,
-	} );
+	await spawnCommandDirectly( config, container, command, envCwd, spinner );
 
-	spinner.text = `Ran \`${ command }\` in '${ container }'.`;
+	spinner.text = `Ran \`${ joinedCommand }\` in '${ container }'.`;
 };
 
 /**
  * Runs an arbitrary command on the given Docker container.
  *
- * @param {Object}   options
- * @param {string}   options.container The Docker container to run the command on.
- * @param {string}   options.command   The command to run.
- * @param {WPConfig} options.config    The wp-env configuration.
- * @param {Object}   options.spinner   A CLI spinner which indicates progress.
+ * @param {WPConfig} config    The wp-env configuration.
+ * @param {string}   container The Docker container to run the command on.
+ * @param {string[]} command   The command to run.
+ * @param {string}   envCwd    The working directory for the command to be executed from.
+ * @param {Object}   spinner   A CLI spinner which indicates progress.
  */
-function spawnCommandDirectly( { container, command, config, spinner } ) {
+function spawnCommandDirectly( config, container, command, envCwd, spinner ) {
+	// Both the `wordpress` and `tests-wordpress` containers have the host's
+	// user so that they can maintain ownership parity with the host OS.
+	// We should run any commands as that user so that they are able
+	// to interact with the files mounted from the host.
+	const hostUser = getHostUser();
+
+	// Since Docker requires absolute paths, we should resolve the input to a POSIX path.
+	// This is needed because Windows resolves relative paths from the C: drive.
+	envCwd = path.posix.resolve(
+		// Not all containers have the same starting working directory.
+		container === 'mysql' || container === 'tests-mysql'
+			? '/'
+			: '/var/www/html',
+		// Remove spaces and single quotes from both ends of the path.
+		// This is needed because Windows treats single quotes as a literal character.
+		envCwd.trim().replace( /^'|'$/g, '' )
+	);
+
 	const composeCommand = [
+		'compose',
 		'-f',
 		config.dockerComposeConfigPath,
-		'run',
-		'--rm',
-		container,
-		...command.split( ' ' ), // The command will fail if passed as a complete string.
+		'exec',
+		'-w',
+		envCwd,
+		'--user',
+		hostUser.fullUser,
 	];
 
+	if ( ! process.stdout.isTTY ) {
+		composeCommand.push( '-T' );
+	}
+
+	composeCommand.push( container, ...command );
+
 	return new Promise( ( resolve, reject ) => {
 		// Note: since the npm docker-compose package uses the -T option, we
 		// cannot use it to spawn an interactive command. Thus, we run docker-
 		// compose on the CLI directly.
 		const childProc = spawn(
-			'docker-compose',
+			'docker',
 			composeCommand,
-			{
-				stdio: 'inherit',
-				shell: true,
-			},
+			{ stdio: 'inherit' },
 			spinner
 		);
 		childProc.on( 'error', reject );
@@ -89,17 +124,17 @@ function spawnCommandDirectly( { container, command, config, spinner } ) {
  * bash) may have weird behavior (exit with ctrl-d instead of ctrl-c or ctrl-z),
  * so we want the user to have that information without having to ask someone.
  *
- * @param {string} command   The command for which to show a tip.
- * @param {string} container The container the command will be run on.
- * @param {Object} spinner   A spinner object to show progress.
+ * @param {string} joinedCommand The command for which to show a tip joined by spaces.
+ * @param {string} container     The container the command will be run on.
+ * @param {Object} spinner       A spinner object to show progress.
  */
-function showCommandTips( command, container, spinner ) {
-	if ( ! command.length ) {
+function showCommandTips( joinedCommand, container, spinner ) {
+	if ( ! joinedCommand.length ) {
 		return;
 	}
 
-	const tip = `Starting '${ command }' on the ${ container } container. ${ ( () => {
-		switch ( command ) {
+	const tip = `Starting '${ joinedCommand }' on the ${ container } container. ${ ( () => {
+		switch ( joinedCommand ) {
 			case 'bash':
 				return 'Exit bash with ctrl-d.';
 			case 'wp shell':
diff --git a/packages/env/lib/commands/start.js b/packages/env/lib/commands/start.js
index 7ffc333d23bdac..4203ac74632287 100644
--- a/packages/env/lib/commands/start.js
+++ b/packages/env/lib/commands/start.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 const util = require( 'util' );
 const path = require( 'path' );
 const fs = require( 'fs' ).promises;
@@ -27,9 +28,11 @@ const {
 	configureWordPress,
 	setupWordPressDirectories,
 	readWordPressVersion,
+	canAccessWPORG,
 } = require( '../wordpress' );
 const { didCacheChange, setCache } = require( '../cache' );
 const md5 = require( '../md5' );
+const { executeLifecycleScript } = require( '../execute-lifecycle-script' );
 
 /**
  * @typedef {import('../config').WPConfig} WPConfig
@@ -41,11 +44,18 @@ const CONFIG_CACHE_KEY = 'config_checksum';
  *
  * @param {Object}  options
  * @param {Object}  options.spinner A CLI spinner which indicates progress.
- * @param {boolean} options.debug   True if debug mode is enabled.
  * @param {boolean} options.update  If true, update sources.
  * @param {string}  options.xdebug  The Xdebug mode to set.
+ * @param {boolean} options.scripts Indicates whether or not lifecycle scripts should be executed.
+ * @param {boolean} options.debug   True if debug mode is enabled.
  */
-module.exports = async function start( { spinner, debug, update, xdebug } ) {
+module.exports = async function start( {
+	spinner,
+	update,
+	xdebug,
+	scripts,
+	debug,
+} ) {
 	spinner.text = 'Reading configuration.';
 	await checkForLegacyInstall( spinner );
 
@@ -68,16 +78,24 @@ module.exports = async function start( { spinner, debug, update, xdebug } ) {
 	const configHash = md5( config );
 	const { workDirectoryPath, dockerComposeConfigPath } = config;
 	const shouldConfigureWp =
-		update ||
-		( await didCacheChange( CONFIG_CACHE_KEY, configHash, {
-			workDirectoryPath,
-		} ) );
+		( update ||
+			( await didCacheChange( CONFIG_CACHE_KEY, configHash, {
+				workDirectoryPath,
+			} ) ) ) &&
+		// Don't reconfigure everything when we can't connect to the internet because
+		// the majority of update tasks involve connecting to the internet. (Such
+		// as downloading sources and pulling docker images.)
+		( await canAccessWPORG() );
 
 	const dockerComposeConfig = {
 		config: dockerComposeConfigPath,
 		log: config.debug,
 	};
 
+	if ( ! ( await canAccessWPORG() ) ) {
+		spinner.info( 'wp-env is offline' );
+	}
+
 	/**
 	 * If the Docker image is already running and the `wp-env` files have been
 	 * deleted, the start command will not complete successfully. Stopping
@@ -152,12 +170,20 @@ module.exports = async function start( { spinner, debug, update, xdebug } ) {
 
 	spinner.text = 'Starting WordPress.';
 
-	await dockerCompose.upMany( [ 'wordpress', 'tests-wordpress' ], {
-		...dockerComposeConfig,
-		commandOptions: shouldConfigureWp
-			? [ '--build', '--force-recreate' ]
-			: [],
-	} );
+	await dockerCompose.upMany(
+		[ 'wordpress', 'tests-wordpress', 'cli', 'tests-cli' ],
+		{
+			...dockerComposeConfig,
+			commandOptions: shouldConfigureWp
+				? [ '--build', '--force-recreate' ]
+				: [],
+		}
+	);
+
+	// Make sure we've consumed the custom CLI dockerfile.
+	if ( shouldConfigureWp ) {
+		await dockerCompose.buildOne( [ 'cli' ], { ...dockerComposeConfig } );
+	}
 
 	// Only run WordPress install/configuration when config has changed.
 	if ( shouldConfigureWp ) {
@@ -192,8 +218,12 @@ module.exports = async function start( { spinner, debug, update, xdebug } ) {
 		} );
 	}
 
+	if ( scripts ) {
+		await executeLifecycleScript( 'afterStart', config, spinner );
+	}
+
 	const siteUrl = config.env.development.config.WP_SITEURL;
-	const e2eSiteUrl = `http://${ config.env.tests.config.WP_TESTS_DOMAIN }:${ config.env.tests.port }/`;
+	const testsSiteUrl = config.env.tests.config.WP_SITEURL;
 
 	const { out: mySQLAddress } = await dockerCompose.port(
 		'mysql',
@@ -213,7 +243,7 @@ module.exports = async function start( { spinner, debug, update, xdebug } ) {
 		.concat( siteUrl ? ` at ${ siteUrl }` : '.' )
 		.concat( '\n' )
 		.concat( 'WordPress test site started' )
-		.concat( e2eSiteUrl ? ` at ${ e2eSiteUrl }` : '.' )
+		.concat( testsSiteUrl ? ` at ${ testsSiteUrl }` : '.' )
 		.concat( '\n' )
 		.concat( `MySQL is listening on port ${ mySQLPort }` )
 		.concat(
diff --git a/packages/env/lib/commands/stop.js b/packages/env/lib/commands/stop.js
index 4f6688003ebb9d..5393ef8c6a000f 100644
--- a/packages/env/lib/commands/stop.js
+++ b/packages/env/lib/commands/stop.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 
 /**
  * Internal dependencies
diff --git a/packages/env/lib/config/add-or-replace-port.js b/packages/env/lib/config/add-or-replace-port.js
new file mode 100644
index 00000000000000..d1b7ff149b10d7
--- /dev/null
+++ b/packages/env/lib/config/add-or-replace-port.js
@@ -0,0 +1,41 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const { ValidationError } = require( './validate-config' );
+
+/**
+ * Adds or replaces the port to the given domain or URI.
+ *
+ * @param {string}        input     The domain or URI to operate on.
+ * @param {number|string} port      The port to append.
+ * @param {boolean}       [replace] Indicates whether or not the port should be replaced if one is already present. Defaults to true.
+ *
+ * @return {string} The string with the port added or replaced.
+ */
+module.exports = function addOrReplacePort( input, port, replace = true ) {
+	// This matches both domains and URIs with an optional port and anything
+	// that remains after. We can use this to build an output string that
+	// adds or replaces the port without making any other changes to the input.
+	const matches = input.match(
+		/^((?:.+:\/\/)?[a-z0-9.\-]+)(?::([0-9]+))?(.*)$/i
+	);
+	if ( ! matches ) {
+		throw new ValidationError( `Invalid domain or uri: ${ input }.` );
+	}
+
+	// When a port is already present we will do nothing if the caller doesn't want it to be replaced.
+	if ( matches[ 2 ] !== undefined && ! replace ) {
+		return input;
+	}
+
+	// There's never a reason to add the default ports.
+	// We use == to catch both string and number ports.
+	// eslint-disable-next-line eqeqeq
+	if ( port == 80 || port == 443 ) {
+		return input;
+	}
+
+	// Place the port in the correct location in the input.
+	return matches[ 1 ] + ':' + port + matches[ 3 ];
+};
diff --git a/packages/env/lib/config/config.js b/packages/env/lib/config/config.js
deleted file mode 100644
index ca00aebacf4ba9..00000000000000
--- a/packages/env/lib/config/config.js
+++ /dev/null
@@ -1,357 +0,0 @@
-'use strict';
-/**
- * External dependencies
- */
-const fs = require( 'fs' ).promises;
-const path = require( 'path' );
-const os = require( 'os' );
-
-/**
- * Internal dependencies
- */
-const detectDirectoryType = require( './detect-directory-type' );
-const { validateConfig, ValidationError } = require( './validate-config' );
-const readRawConfigFile = require( './read-raw-config-file' );
-const parseConfig = require( './parse-config' );
-const { includeTestsPath, parseSourceString } = parseConfig;
-const md5 = require( '../md5' );
-
-/**
- * wp-env configuration.
- *
- * @typedef WPConfig
- * @property {string}                           name                    Name of the environment.
- * @property {string}                           configDirectoryPath     Path to the .wp-env.json file.
- * @property {string}                           workDirectoryPath       Path to the work directory located in ~/.wp-env.
- * @property {string}                           dockerComposeConfigPath Path to the docker-compose.yml file.
- * @property {boolean}                          detectedLocalConfig     If true, wp-env detected local config and used it.
- * @property {Object.<string, WPServiceConfig>} env                     Specific config for different environments.
- * @property {boolean}                          debug                   True if debug mode is enabled.
- */
-
-/**
- * Base-level config for any particular environment. (development/tests/etc)
- *
- * @typedef WPServiceConfig
- * @property {WPSource}                  coreSource    The WordPress installation to load in the environment.
- * @property {WPSource[]}                pluginSources Plugins to load in the environment.
- * @property {WPSource[]}                themeSources  Themes to load in the environment.
- * @property {number}                    port          The port to use.
- * @property {Object}                    config        Mapping of wp-config.php constants to their desired values.
- * @property {Object.<string, WPSource>} mappings      Mapping of WordPress directories to local directories which should be mounted.
- * @property {string}                    phpVersion    Version of PHP to use in the environments, of the format 0.0.
- */
-
-/**
- * A WordPress installation, plugin or theme to be loaded into the environment.
- *
- * @typedef WPSource
- * @property {'local'|'git'|'zip'} type     The source type.
- * @property {string}              path     The path to the WordPress installation, plugin or theme.
- * @property {?string}             url      The URL to the source download if the source type is not local.
- * @property {?string}             ref      The git ref for the source if the source type is 'git'.
- * @property {string}              basename Name that identifies the WordPress installation, plugin or theme.
- */
-
-/**
- * Reads, parses, and validates the given .wp-env.json file into a wp-env config
- * object for internal use.
- *
- * @param {string} configPath Path to the .wp-env.json file.
- *
- * @return {WPConfig} A parsed and validated wp-env config object.
- */
-module.exports = async function readConfig( configPath ) {
-	const configDirectoryPath = path.dirname( configPath );
-	const workDirectoryPath = path.resolve(
-		await getHomeDirectory(),
-		md5( configPath )
-	);
-
-	// The specified base configuration from .wp-env.json or from the local
-	// source type which was automatically detected.
-	const baseConfig =
-		( await readRawConfigFile( '.wp-env.json', configPath ) ) ||
-		( await getDefaultBaseConfig( configPath ) );
-
-	// Overriden .wp-env.json on a per-user case.
-	const overrideConfig =
-		( await readRawConfigFile(
-			'.wp-env.override.json',
-			configPath.replace( /\.wp-env\.json$/, '.wp-env.override.json' )
-		) ) || {};
-
-	const detectedLocalConfig =
-		Object.keys( { ...baseConfig, ...overrideConfig } ).length > 0;
-
-	// Default configuration which is overridden by .wp-env.json files.
-	const defaultConfiguration = {
-		core: null, // Indicates that the latest stable version should ultimately be used.
-		phpVersion: null,
-		plugins: [],
-		themes: [],
-		port: 8888,
-		mappings: {},
-		config: {
-			WP_DEBUG: true,
-			SCRIPT_DEBUG: true,
-			WP_ENVIRONMENT_TYPE: 'local',
-			WP_PHP_BINARY: 'php',
-			WP_TESTS_EMAIL: 'admin@example.org',
-			WP_TESTS_TITLE: 'Test Blog',
-			WP_TESTS_DOMAIN: 'localhost',
-			WP_SITEURL: 'http://localhost',
-			WP_HOME: 'http://localhost',
-		},
-		env: {
-			development: {}, // No overrides needed, but it should exist.
-			tests: {
-				config: { WP_DEBUG: false, SCRIPT_DEBUG: false },
-				port: 8889,
-			},
-		},
-	};
-
-	// A quick validation before merging on a service by service level allows us
-	// to check the root configuration options and provide more helpful errors.
-	validateConfig(
-		mergeWpServiceConfigs( [
-			defaultConfiguration,
-			baseConfig,
-			overrideConfig,
-		] )
-	);
-
-	// A unique array of the environments specified in the config options.
-	// Needed so that we can override settings per-environment, rather than
-	// overwriting each environment key.
-	const getEnvKeys = ( config ) => Object.keys( config.env || {} );
-	const allEnvs = [
-		...new Set( [
-			...getEnvKeys( defaultConfiguration ),
-			...getEnvKeys( baseConfig ),
-			...getEnvKeys( overrideConfig ),
-		] ),
-	];
-
-	// Returns a pair with the root config options and the specific environment config options.
-	const getEnvConfig = ( config, envName ) => [
-		config,
-		config.env && config.env[ envName ] ? config.env[ envName ] : {},
-	];
-
-	// Merge each of the specified environment-level overrides.
-	const allPorts = new Set(); // Keep track of unique ports for validation.
-	const env = {};
-	for ( const envName of allEnvs ) {
-		env[ envName ] = await parseConfig(
-			validateConfig(
-				mergeWpServiceConfigs( [
-					...getEnvConfig( defaultConfiguration, envName ),
-					...getEnvConfig( baseConfig, envName ),
-					...getEnvConfig( overrideConfig, envName ),
-				] ),
-				envName
-			),
-			{ workDirectoryPath }
-		);
-		allPorts.add( env[ envName ].port );
-	}
-
-	if ( allPorts.size !== allEnvs.length ) {
-		throw new ValidationError(
-			'Invalid .wp-env.json: Each port value must be unique.'
-		);
-	}
-
-	return withOverrides( {
-		name: path.basename( configDirectoryPath ),
-		dockerComposeConfigPath: path.resolve(
-			workDirectoryPath,
-			'docker-compose.yml'
-		),
-		configDirectoryPath,
-		workDirectoryPath,
-		detectedLocalConfig,
-		env,
-	} );
-};
-
-/**
- * Deep-merges the values in the given service environment. This allows us to
- * merge the wp-config.php values instead of overwriting them. Note that this
- * merges configs before they have been validated, so the passed config shape
- * will not match the WPServiceConfig type.
- *
- * @param {Object[]} configs Array of raw service config objects to merge.
- *
- * @return {Object} The merged configuration object.
- */
-function mergeWpServiceConfigs( configs ) {
-	// Returns an array of nested values in the config object. For example,
-	// an array of all the wp-config objects.
-	const mergeNestedObjs = ( key ) =>
-		Object.assign(
-			{},
-			...configs.map( ( config ) => {
-				if ( ! config[ key ] ) {
-					return {};
-				} else if ( typeof config[ key ] === 'object' ) {
-					return config[ key ];
-				}
-				throw new ValidationError(
-					`Invalid .wp-env.json: "${ key }" must be an object.`
-				);
-			} )
-		);
-
-	const mergedConfig = {
-		...Object.assign( {}, ...configs ),
-		config: mergeNestedObjs( 'config' ),
-		mappings: mergeNestedObjs( 'mappings' ),
-	};
-
-	delete mergedConfig.env;
-	return mergedConfig;
-}
-
-/**
- * Detects basic config options to use if the .wp-env.json config file does not
- * exist. For example, if the local directory contains a plugin, that will be
- * added to the default plugin sources.
- *
- * @param {string} configPath A path to the config file for the source to detect.
- * @return {Object} Basic config options for the detected source type. Empty
- *                  object if no config detected.
- */
-async function getDefaultBaseConfig( configPath ) {
-	const configDirectoryPath = path.dirname( configPath );
-	const type = await detectDirectoryType( configDirectoryPath );
-
-	if ( type === 'core' ) {
-		return { core: '.' };
-	} else if ( type === 'plugin' ) {
-		return { plugins: [ '.' ] };
-	} else if ( type === 'theme' ) {
-		return { themes: [ '.' ] };
-	}
-
-	return {};
-}
-
-/**
- * Overrides keys in the config object with set environment variables or options
- * which should be merged.
- *
- * @param {WPConfig} config fully parsed configuration object.
- * @return {WPConfig} configuration object with overrides applied.
- */
-function withOverrides( config ) {
-	const workDirectoryPath = config.workDirectoryPath;
-	// Override port numbers with environment variables.
-	config.env.development.port =
-		getNumberFromEnvVariable( 'WP_ENV_PORT' ) ||
-		config.env.development.port;
-	config.env.tests.port =
-		getNumberFromEnvVariable( 'WP_ENV_TESTS_PORT' ) ||
-		config.env.tests.port;
-
-	// Override WordPress core with environment variable.
-	if ( process.env.WP_ENV_CORE ) {
-		const coreSource = includeTestsPath(
-			parseSourceString( process.env.WP_ENV_CORE, { workDirectoryPath } ),
-			{ workDirectoryPath }
-		);
-		config.env.development.coreSource = coreSource;
-		config.env.tests.coreSource = coreSource;
-	}
-
-	// Override PHP version with environment variable.
-	config.env.development.phpVersion =
-		process.env.WP_ENV_PHP_VERSION || config.env.development.phpVersion;
-	config.env.tests.phpVersion =
-		process.env.WP_ENV_PHP_VERSION || config.env.tests.phpVersion;
-
-	const updateEnvUrl = ( configKey ) => {
-		[ 'development', 'tests' ].forEach( ( envKey ) => {
-			try {
-				const baseUrl = new URL(
-					config.env[ envKey ].config[ configKey ]
-				);
-
-				// Don't overwrite the port of WP_HOME when set.
-				if ( ! ( configKey === 'WP_HOME' && !! baseUrl.port ) ) {
-					baseUrl.port = config.env[ envKey ].port;
-				}
-
-				config.env[ envKey ].config[ configKey ] = baseUrl.toString();
-			} catch ( error ) {
-				throw new ValidationError(
-					`Invalid .wp-env.json: config.${ configKey } must be a valid URL.`
-				);
-			}
-		} );
-	};
-
-	// Update wp config options to include the correct port number in the URL.
-	updateEnvUrl( 'WP_SITEURL' );
-	updateEnvUrl( 'WP_HOME' );
-
-	return config;
-}
-
-/**
- * Parses an environment variable which should be a number.
- *
- * Throws an error if the variable cannot be parsed to a number.
- * Returns null if the environment variable has not been specified.
- *
- * @param {string} varName The environment variable to check (e.g. WP_ENV_PORT).
- * @return {null|number} The number. Null if it does not exist.
- */
-function getNumberFromEnvVariable( varName ) {
-	// Allow use of the default if it does not exist.
-	if ( ! process.env[ varName ] ) {
-		return null;
-	}
-
-	const maybeNumber = parseInt( process.env[ varName ] );
-
-	// Throw an error if it is not parseable as a number.
-	if ( isNaN( maybeNumber ) ) {
-		throw new ValidationError(
-			`Invalid environment variable: ${ varName } must be a number.`
-		);
-	}
-
-	return maybeNumber;
-}
-
-/**
- * Gets the `wp-env` home directory in which generated files are created.
- *
- * By default: '~/.wp-env/'. On Linux with snap packages: '~/wp-env/'. Can be
- * overriden with the WP_ENV_HOME environment variable.
- *
- * @return {Promise<string>} The absolute path to the `wp-env` home directory.
- */
-async function getHomeDirectory() {
-	// Allow user to override download location.
-	if ( process.env.WP_ENV_HOME ) {
-		return path.resolve( process.env.WP_ENV_HOME );
-	}
-
-	/**
-	 * Installing docker with Snap Packages on Linux is common, but does not
-	 * support hidden directories. Therefore we use a public directory when
-	 * snap packages exist.
-	 *
-	 * @see https://github.com/WordPress/gutenberg/issues/20180#issuecomment-587046325
-	 */
-	return path.resolve(
-		os.homedir(),
-		!! ( await fs.stat( '/snap' ).catch( () => false ) )
-			? 'wp-env'
-			: '.wp-env'
-	);
-}
diff --git a/packages/env/lib/config/db-env.js b/packages/env/lib/config/db-env.js
index 95c0c23cf93d3e..aa73fc70d60ceb 100644
--- a/packages/env/lib/config/db-env.js
+++ b/packages/env/lib/config/db-env.js
@@ -1,3 +1,4 @@
+'use strict';
 // Username and password used in all databases.
 const credentials = {
 	WORDPRESS_DB_USER: 'root',
diff --git a/packages/env/lib/config/detect-directory-type.js b/packages/env/lib/config/detect-directory-type.js
index b685685c76c0cf..91d897d956479a 100644
--- a/packages/env/lib/config/detect-directory-type.js
+++ b/packages/env/lib/config/detect-directory-type.js
@@ -18,7 +18,7 @@ const finished = util.promisify( stream.finished );
  * Detects whether the given directory is a WordPress installation, a plugin or a theme.
  *
  * @param {string} directoryPath The directory to detect.
- * @return {string|null} 'core' if the directory is a WordPress installation, 'plugin' if it is a plugin, 'theme' if it is a theme, or null if we can't tell.
+ * @return {Promise<string|null>} 'core' if the directory is a WordPress installation, 'plugin' if it is a plugin, 'theme' if it is a theme, or null if we can't tell.
  */
 module.exports = async function detectDirectoryType( directoryPath ) {
 	// If we have a `wp-includes/version.php` file, then this is a Core install.
diff --git a/packages/env/lib/config/get-cache-directory.js b/packages/env/lib/config/get-cache-directory.js
new file mode 100644
index 00000000000000..1cb291592df34e
--- /dev/null
+++ b/packages/env/lib/config/get-cache-directory.js
@@ -0,0 +1,39 @@
+'use strict';
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const fs = require( 'fs' ).promises;
+const os = require( 'os' );
+
+/**
+ * Gets the directory in which generated files are created.
+ *
+ * By default: '~/.wp-env/'. On Linux with snap packages: '~/wp-env/'. Can be
+ * overridden with the WP_ENV_HOME environment variable.
+ *
+ * @return {Promise<string>} The absolute path to the `wp-env` home directory.
+ */
+module.exports = async function getCacheDirectory() {
+	// Allow user to override download location.
+	if ( process.env.WP_ENV_HOME ) {
+		return path.resolve( process.env.WP_ENV_HOME );
+	}
+
+	/**
+	 * Installing docker with Snap Packages on Linux is common, but does not
+	 * support hidden directories. Therefore we use a public directory when
+	 * snap packages exist.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/issues/20180#issuecomment-587046325
+	 */
+	let usesSnap;
+	try {
+		await fs.stat( '/snap' );
+		usesSnap = true;
+	} catch {
+		usesSnap = false;
+	}
+
+	return path.resolve( os.homedir(), usesSnap ? 'wp-env' : '.wp-env' );
+};
diff --git a/packages/env/lib/config/get-config-from-environment-vars.js b/packages/env/lib/config/get-config-from-environment-vars.js
new file mode 100644
index 00000000000000..beaf721ea1c0c1
--- /dev/null
+++ b/packages/env/lib/config/get-config-from-environment-vars.js
@@ -0,0 +1,112 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const {
+	parseSourceString,
+	includeTestsPath,
+} = require( './parse-source-string' );
+const { checkPort, checkVersion, checkString } = require( './validate-config' );
+
+/**
+ * @typedef {import('./parse-source-string').WPSource} WPSource
+ */
+
+/**
+ * Environment variable configuration.
+ *
+ * @typedef WPEnvironmentVariableConfig
+ * @property {?number}                  port             An override for the development environment's port.
+ * @property {?number}                  mysqlPort        An override for the development environment's MySQL port.
+ * @property {?number}                  testsPort        An override for the testing environment's port.
+ * @property {?number}                  testsMysqlPort   An override for the testing environment's MySQL port.
+ * @property {?WPSource}                coreSource       An override for all environment's coreSource.
+ * @property {?string}                  phpVersion       An override for all environment's PHP version.
+ * @property {?Object.<string, string>} lifecycleScripts An override for various lifecycle scripts.
+ */
+
+/**
+ * Gets configuration options from environment variables.
+ *
+ * @param {string} cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {WPEnvironmentVariableConfig} Any configuration options parsed from the environment variables.
+ */
+module.exports = function getConfigFromEnvironmentVars( cacheDirectoryPath ) {
+	const environmentConfig = {
+		port: getPortFromEnvironmentVariable( 'WP_ENV_PORT' ),
+		mysqlPort: getPortFromEnvironmentVariable( 'WP_ENV_MYSQL_PORT' ),
+		testsPort: getPortFromEnvironmentVariable( 'WP_ENV_TESTS_PORT' ),
+		testsMysqlPort: getPortFromEnvironmentVariable(
+			'WP_ENV_TESTS_MYSQL_PORT'
+		),
+		lifecycleScripts: getLifecycleScriptOverrides(),
+	};
+
+	if ( process.env.WP_ENV_CORE ) {
+		environmentConfig.coreSource = includeTestsPath(
+			parseSourceString( process.env.WP_ENV_CORE, {
+				cacheDirectoryPath,
+			} ),
+			{ cacheDirectoryPath }
+		);
+	}
+
+	if ( process.env.WP_ENV_PHP_VERSION ) {
+		checkVersion(
+			'environment variable',
+			'WP_ENV_PHP_VERSION',
+			process.env.WP_ENV_PHP_VERSION
+		);
+		environmentConfig.phpVersion = process.env.WP_ENV_PHP_VERSION;
+	}
+
+	return environmentConfig;
+};
+
+/**
+ * Parses an environment variable which should be a port.
+ *
+ * @param {string} varName The environment variable to check (e.g. WP_ENV_PORT).
+ *
+ * @return {number} The parsed port number.
+ */
+function getPortFromEnvironmentVariable( varName ) {
+	if ( ! process.env[ varName ] ) {
+		return undefined;
+	}
+
+	const port = parseInt( process.env[ varName ] );
+
+	// Throw an error if it is not parseable as a number.
+	checkPort( 'environment variable', varName, port );
+
+	return port;
+}
+
+/**
+ * Parses the lifecycle script environment variables.
+ *
+ * @return {Object.<string, string>} The parsed lifecycle scripts.
+ */
+function getLifecycleScriptOverrides() {
+	const lifecycleScripts = {};
+
+	// Find all of the lifecycle script overrides and parse them.
+	const lifecycleEnvironmentVars = {
+		WP_ENV_LIFECYCLE_SCRIPT_AFTER_START: 'afterStart',
+		WP_ENV_LIFECYCLE_SCRIPT_AFTER_CLEAN: 'afterClean',
+		WP_ENV_LIFECYCLE_SCRIPT_AFTER_DESTROY: 'afterDestroy',
+	};
+	for ( const envVar in lifecycleEnvironmentVars ) {
+		const scriptValue = process.env[ envVar ];
+		if ( scriptValue === undefined ) {
+			continue;
+		}
+
+		checkString( 'environment variable', envVar, scriptValue );
+		lifecycleScripts[ lifecycleEnvironmentVars[ envVar ] ] = scriptValue;
+	}
+
+	return lifecycleScripts;
+}
diff --git a/packages/env/lib/config/index.js b/packages/env/lib/config/index.js
index 1a944f43501d0d..0fa88f44222752 100644
--- a/packages/env/lib/config/index.js
+++ b/packages/env/lib/config/index.js
@@ -1,18 +1,20 @@
+'use strict';
 /**
  * Internal dependencies
  */
-const readConfig = require( './config' );
+const loadConfig = require( './load-config' );
 const { ValidationError } = require( './validate-config' );
 const dbEnv = require( './db-env' );
 
 /**
- * @typedef {import('./config').WPConfig} WPConfig
- * @typedef {import('./config').WPServiceConfig} WPServiceConfig
- * @typedef {import('./config').WPSource} WPSource
+ * @typedef {import('./load-config').WPConfig} WPConfig
+ * @typedef {import('./parse-config').WPRootConfig} WPRootConfig
+ * @typedef {import('./parse-config').WPEnvironmentConfig} WPEnvironmentConfig
+ * @typedef {import('./parse-source-string').WPSource} WPSource
  */
 
 module.exports = {
 	ValidationError,
-	readConfig,
+	loadConfig,
 	dbEnv,
 };
diff --git a/packages/env/lib/config/load-config.js b/packages/env/lib/config/load-config.js
new file mode 100644
index 00000000000000..f8a61d278c8a0a
--- /dev/null
+++ b/packages/env/lib/config/load-config.js
@@ -0,0 +1,92 @@
+'use strict';
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const fs = require( 'fs' ).promises;
+
+/**
+ * Internal dependencies
+ */
+const getCacheDirectory = require( './get-cache-directory' );
+const md5 = require( '../md5' );
+const { parseConfig, getConfigFilePath } = require( './parse-config' );
+const postProcessConfig = require( './post-process-config' );
+
+/**
+ * @typedef {import('./parse-config').WPRootConfig} WPRootConfig
+ * @typedef {import('./parse-config').WPEnvironmentConfig} WPEnvironmentConfig
+ */
+
+/**
+ * wp-env configuration.
+ *
+ * @typedef WPConfig
+ * @property {string}                               name                    Name of the environment.
+ * @property {string}                               configDirectoryPath     Path to the .wp-env.json file.
+ * @property {string}                               workDirectoryPath       Path to the work directory located in ~/.wp-env.
+ * @property {string}                               dockerComposeConfigPath Path to the docker-compose.yml file.
+ * @property {boolean}                              detectedLocalConfig     If true, wp-env detected local config and used it.
+ * @property {Object.<string, string>}              lifecycleScripts        Any lifecycle scripts that we might need to execute.
+ * @property {Object.<string, WPEnvironmentConfig>} env                     Specific config for different environments.
+ * @property {boolean}                              debug                   True if debug mode is enabled.
+ */
+
+/**
+ * Loads any configuration from a given directory.
+ *
+ * @param {string} configDirectoryPath The directory we want to load the config from.
+ *
+ * @return {WPConfig} The config object we've loaded.
+ */
+module.exports = async function loadConfig( configDirectoryPath ) {
+	const configFilePath = getConfigFilePath( configDirectoryPath );
+
+	const cacheDirectoryPath = path.resolve(
+		await getCacheDirectory(),
+		md5( configFilePath )
+	);
+
+	// Parse any configuration we found in the given directory.
+	// This comes merged and prepared for internal consumption.
+	let config = await parseConfig( configDirectoryPath, cacheDirectoryPath );
+
+	// Make sure to perform any additional post-processing that
+	// may be needed before the config object is ready for
+	// consumption elsewhere in the tool.
+	config = postProcessConfig( config );
+
+	return {
+		name: path.basename( configDirectoryPath ),
+		dockerComposeConfigPath: path.resolve(
+			cacheDirectoryPath,
+			'docker-compose.yml'
+		),
+		configDirectoryPath,
+		workDirectoryPath: cacheDirectoryPath,
+		detectedLocalConfig: await hasLocalConfig( [
+			configFilePath,
+			getConfigFilePath( configDirectoryPath, 'override' ),
+		] ),
+		lifecycleScripts: config.lifecycleScripts,
+		env: config.env,
+	};
+};
+
+/**
+ * Checks to see whether or not there is any configuration present in the directory.
+ *
+ * @param {string[]} configFilePaths The config files we want to check for existence.
+ *
+ * @return {Promise<boolean>} A promise indicating whether or not a local config is present.
+ */
+async function hasLocalConfig( configFilePaths ) {
+	for ( const filePath of configFilePaths ) {
+		try {
+			await fs.stat( filePath );
+			return true;
+		} catch {}
+	}
+
+	return false;
+}
diff --git a/packages/env/lib/config/merge-configs.js b/packages/env/lib/config/merge-configs.js
new file mode 100644
index 00000000000000..bccfcc4da3e0dd
--- /dev/null
+++ b/packages/env/lib/config/merge-configs.js
@@ -0,0 +1,105 @@
+'use strict';
+/**
+ * @typedef {import('./parse-config').WPEnvironmentConfig} WPEnvironmentConfig
+ */
+
+/**
+ * Deep-merges the values in the given service environment. This allows us to
+ * merge the wp-config.php values instead of overwriting them.
+ *
+ * @param {WPEnvironmentConfig} defaultConfig The default config options.
+ * @param {...string}           configs       The config options to merge.
+ *
+ * @return {WPEnvironmentConfig} The merged config object.
+ */
+module.exports = function mergeConfigs( defaultConfig, ...configs ) {
+	// Start with our default config object. This has all
+	// of the options filled out already and we can use
+	// that to make performing the merge easier.
+	let config = defaultConfig;
+
+	// Merge the configs
+	for ( const merge of configs ) {
+		config = mergeConfig( config, merge );
+	}
+
+	return config;
+};
+
+/**
+ * Merges a config object into another.
+ *
+ * @param {WPEnvironmentConfig} config  The config object to be merged into.
+ * @param {WPEnvironmentConfig} toMerge The config object to merge.
+ *
+ * @return {WPEnvironmentConfig} The merged config object.
+ */
+function mergeConfig( config, toMerge ) {
+	// Begin by updating any of the config options that the object already has.
+	for ( const option in config ) {
+		// We don't need to do anything if the merge source doesn't have a property to give.
+		if ( toMerge[ option ] === undefined ) {
+			continue;
+		}
+
+		switch ( option ) {
+			// Some config options are merged together instead of entirely replaced.
+			case 'config':
+			case 'mappings':
+			case 'lifecycleScripts': {
+				config[ option ] = Object.assign(
+					config[ option ],
+					toMerge[ option ]
+				);
+				break;
+			}
+
+			// Environment-specific config options are recursively merged.
+			case 'env': {
+				for ( const environment in config.env ) {
+					// Once again, we don't need to do anything if the merge source has nothing to give.
+					if ( toMerge.env[ environment ] === undefined ) {
+						continue;
+					}
+
+					config.env[ environment ] = mergeConfig(
+						config.env[ environment ],
+						toMerge.env[ environment ]
+					);
+				}
+				break;
+			}
+
+			default: {
+				config[ option ] = toMerge[ option ];
+				break;
+			}
+		}
+	}
+
+	// Next, add any new options that the config object doesn't already have.
+	for ( const option in toMerge ) {
+		// Environment-specific config options should be checked individually.
+		if ( option === 'env' ) {
+			for ( const environment in toMerge.env ) {
+				// The presence of the environment means it would have been merged above.
+				if ( config.env[ environment ] !== undefined ) {
+					continue;
+				}
+
+				config.env[ environment ] = toMerge[ environment ];
+			}
+
+			continue;
+		}
+
+		// As above, the presence of the option means it would have been merged above.
+		if ( config[ option ] !== undefined ) {
+			continue;
+		}
+
+		config[ option ] = toMerge[ option ];
+	}
+
+	return config;
+}
diff --git a/packages/env/lib/config/parse-config.js b/packages/env/lib/config/parse-config.js
index 9528ac8b3528c1..1fc7e949251490 100644
--- a/packages/env/lib/config/parse-config.js
+++ b/packages/env/lib/config/parse-config.js
@@ -3,206 +3,569 @@
  * External dependencies
  */
 const path = require( 'path' );
-const os = require( 'os' );
 
 /**
  * Internal dependencies
  */
-const { ValidationError } = require( './validate-config' );
+const readRawConfigFile = require( './read-raw-config-file' );
+const {
+	parseSourceString,
+	includeTestsPath,
+} = require( './parse-source-string' );
+const {
+	ValidationError,
+	checkPort,
+	checkStringArray,
+	checkObjectWithValues,
+	checkVersion,
+	checkValidURL,
+} = require( './validate-config' );
+const getConfigFromEnvironmentVars = require( './get-config-from-environment-vars' );
+const detectDirectoryType = require( './detect-directory-type' );
 const { getLatestWordPressVersion } = require( '../wordpress' );
+const mergeConfigs = require( './merge-configs' );
 
 /**
- * @typedef {import('./config').WPServiceConfig} WPServiceConfig
- * @typedef {import('./config').WPSource} WPSource
+ * @typedef {import('./parse-source-string').WPSource} WPSource
  */
 
 /**
- * The string at the beginning of a source path that points to a home-relative
- * directory. Will be '~/' on unix environments and '~\' on Windows.
+ * The root configuration options.
+ *
+ * @typedef WPRootConfigOptions
+ * @property {number}                               port                          The port to use in the development environment.
+ * @property {number}                               testsPort                     The port to use in the tests environment.
+ * @property {Object.<string, string|null>}         lifecycleScripts              The scripts to run at certain points in the command lifecycle.
+ * @property {Object.<string, string|null>}         lifecycleScripts.afterStart   The script to run after the "start" command has completed.
+ * @property {Object.<string, string|null>}         lifecycleScripts.afterClean   The script to run after the "clean" command has completed.
+ * @property {Object.<string, string|null>}         lifecycleScripts.afterDestroy The script to run after the "destroy" command has completed.
+ * @property {Object.<string, WPEnvironmentConfig>} env                           The environment-specific configuration options.
+ */
+
+/**
+ * The environment-specific configuration options. (development/tests/etc)
+ *
+ * @typedef WPEnvironmentConfig
+ * @property {WPSource}                  coreSource    The WordPress installation to load in the environment.
+ * @property {WPSource[]}                pluginSources Plugins to load in the environment.
+ * @property {WPSource[]}                themeSources  Themes to load in the environment.
+ * @property {number}                    port          The port to use.
+ * @property {number}                    mysqlPort     The port to use for MySQL. Random if empty.
+ * @property {Object}                    config        Mapping of wp-config.php constants to their desired values.
+ * @property {Object.<string, WPSource>} mappings      Mapping of WordPress directories to local directories which should be mounted.
+ * @property {string|null}               phpVersion    Version of PHP to use in the environments, of the format 0.0.
+ */
+
+/**
+ * The root configuration options.
+ *
+ * @typedef {WPEnvironmentConfig & WPRootConfigOptions} WPRootConfig
+ */
+
+/**
+ * A WordPress installation, plugin or theme to be loaded into the environment.
+ *
+ * @typedef WPSource
+ * @property {'local'|'git'|'zip'} type     The source type.
+ * @property {string}              path     The path to the WordPress installation, plugin or theme.
+ * @property {?string}             url      The URL to the source download if the source type is not local.
+ * @property {?string}             ref      The git ref for the source if the source type is 'git'.
+ * @property {string}              basename Name that identifies the WordPress installation, plugin or theme.
+ */
+
+/**
+ * An object containing all of the default configuration options for environment-specific configurations.
+ * Unless otherwise set at the root-level or the environment-level, these are the values that will be
+ * parsed into the environment. This is useful for tracking known configuration options since these
+ * are the only configuration options that can be set in each environment.
+ */
+const DEFAULT_ENVIRONMENT_CONFIG = {
+	core: null,
+	phpVersion: null,
+	plugins: [],
+	themes: [],
+	port: 8888,
+	testsPort: 8889,
+	mysqlPort: null,
+	mappings: {},
+	config: {
+		FS_METHOD: 'direct',
+		WP_DEBUG: true,
+		SCRIPT_DEBUG: true,
+		WP_ENVIRONMENT_TYPE: 'local',
+		WP_PHP_BINARY: 'php',
+		WP_TESTS_EMAIL: 'admin@example.org',
+		WP_TESTS_TITLE: 'Test Blog',
+		WP_TESTS_DOMAIN: 'localhost',
+		WP_SITEURL: 'http://localhost',
+		WP_HOME: 'http://localhost',
+	},
+};
+
+/**
+ * Given a directory, this parses any relevant config files and
+ * constructs an object in the format used internally.
+ *
+ *
+ * @param {string} configDirectoryPath A path to the directory we are parsing the config for.
+ * @param {string} cacheDirectoryPath  Path to the work directory located in ~/.wp-env.
+ *
+ * @return {Promise<WPRootConfig>} Parsed config.
  */
-const HOME_PATH_PREFIX = `~${ path.sep }`;
+async function parseConfig( configDirectoryPath, cacheDirectoryPath ) {
+	// The local config will be used to override any defaults.
+	const localConfig = await parseConfigFile(
+		getConfigFilePath( configDirectoryPath ),
+		{ cacheDirectoryPath }
+	);
+
+	// Any overrides that can be used in place
+	// of properties set by the local config.
+	const overrideConfig = await parseConfigFile(
+		getConfigFilePath( configDirectoryPath, 'override' ),
+		{ cacheDirectoryPath }
+	);
+
+	// It's important to know whether or not the user
+	// has configured the tool using a JSON file.
+	const hasUserConfig = localConfig || overrideConfig;
+
+	// The default config will be used when no local config
+	// file is present in this directory. We should also
+	// infer the project type when there is no local
+	// config file present to use.
+	const defaultConfig = await getDefaultConfig( configDirectoryPath, {
+		shouldInferType: ! hasUserConfig,
+		cacheDirectoryPath,
+	} );
+
+	// Users can provide overrides in environment
+	// variables that supercede all other options.
+	const environmentVarOverrides =
+		getEnvironmentVarOverrides( cacheDirectoryPath );
+
+	// Merge all of our configs so that we have a complete object
+	// containing the desired options in order of precedence.
+	return mergeConfigs(
+		defaultConfig,
+		localConfig ?? {},
+		overrideConfig ?? {},
+		environmentVarOverrides
+	);
+}
+
+/**
+ * Gets the path to the config file.
+ *
+ * @param {string} configDirectoryPath The path to the directory containing config files.
+ * @param {string} type                The type of config file we're interested in: 'local' or 'override'.
+ *
+ * @return {string} The path to the config file.
+ */
+function getConfigFilePath( configDirectoryPath, type = 'local' ) {
+	let fileName;
+	switch ( type ) {
+		case 'local': {
+			fileName = '.wp-env.json';
+			break;
+		}
+
+		case 'override': {
+			fileName = '.wp-env.override.json';
+			break;
+		}
+
+		default: {
+			throw new Error( `Invalid config file type "${ type }.` );
+		}
+	}
+
+	return path.resolve( configDirectoryPath, fileName );
+}
 
 /**
- * Parses a config object. Takes environment-level configuration in the format
- * specified in .wp-env.json, validates it, and converts it into the format used
- * internally. For example, `plugins: string[]` will be parsed into
- * `pluginSources: WPSource[]`.
+ * Gets the default config that can be overridden.
  *
- * @param {Object} config                    A config object to validate.
+ * @param {string} configDirectoryPath        A path to the config file's directory.
  * @param {Object} options
- * @param {string} options.workDirectoryPath Path to the work directory located in ~/.wp-env.
- * @return {WPServiceConfig} Parsed environment-level configuration.
- */
-module.exports = async function parseConfig( config, options ) {
-	return {
-		port: config.port,
-		phpVersion: config.phpVersion,
-		coreSource: includeTestsPath(
-			await parseCoreSource( config.core, options ),
-			options
-		),
-		pluginSources: config.plugins.map( ( sourceString ) =>
-			parseSourceString( sourceString, options )
-		),
-		themeSources: config.themes.map( ( sourceString ) =>
-			parseSourceString( sourceString, options )
-		),
-		config: config.config,
-		mappings: Object.entries( config.mappings ).reduce(
-			( result, [ wpDir, localDir ] ) => {
-				const source = parseSourceString( localDir, options );
-				result[ wpDir ] = source;
-				return result;
+ * @param {string} options.shouldInferType    Indicates whether or not we should infer the type of project wp-env is being used in.
+ * @param {string} options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {Promise<WPEnvironmentConfig>} The default config object.
+ */
+async function getDefaultConfig(
+	configDirectoryPath,
+	{ shouldInferType, cacheDirectoryPath }
+) {
+	const detectedDirectoryType = shouldInferType
+		? await detectDirectoryType( configDirectoryPath )
+		: null;
+
+	// The default configuration should contain all possible options and
+	// environments whether they're empty or not. This makes using the
+	// config objects easier because once merged we don't need to
+	// verify that a given option exists before using it.
+	const rawConfig = {
+		// Since the root config is the base "environment" config for
+		// all environments, we will start with those defaults.
+		...DEFAULT_ENVIRONMENT_CONFIG,
+
+		// When the current directory has no configuration file we support a zero-config mode of operation.
+		// This works by using the default options and inferring how to map the current directory based
+		// on the contents of the directory.
+		core:
+			detectedDirectoryType === 'core'
+				? '.'
+				: DEFAULT_ENVIRONMENT_CONFIG.core,
+		plugins:
+			detectedDirectoryType === 'plugin'
+				? [ '.' ]
+				: DEFAULT_ENVIRONMENT_CONFIG.plugins,
+		themes:
+			detectedDirectoryType === 'theme'
+				? [ '.' ]
+				: DEFAULT_ENVIRONMENT_CONFIG.themes,
+
+		// These configuration options are root-only and should not be present
+		// on environment-specific configuration objects.
+		lifecycleScripts: {
+			afterStart: null,
+			afterClean: null,
+			afterDestroy: null,
+		},
+		env: {
+			development: {},
+			tests: {
+				config: {
+					WP_DEBUG: false,
+					SCRIPT_DEBUG: false,
+				},
 			},
-			{}
-		),
+		},
 	};
-};
 
-async function parseCoreSource( coreSource, options ) {
-	// An empty source means we should use the latest version of WordPress.
-	if ( ! coreSource ) {
-		const wpVersion = await getLatestWordPressVersion();
-		if ( ! wpVersion ) {
-			throw new ValidationError(
-				'Could not find the latest WordPress version. There may be a network issue.'
-			);
-		}
+	return await parseRootConfig( 'default', rawConfig, {
+		cacheDirectoryPath,
+	} );
+}
 
-		coreSource = `WordPress/WordPress#${ wpVersion }`;
+/**
+ * Gets a service configuration object containing overrides from our environment variables.
+ *
+ * @param {string} cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {WPEnvironmentConfig} An object containing the environment variable overrides.
+ */
+function getEnvironmentVarOverrides( cacheDirectoryPath ) {
+	const overrides = getConfigFromEnvironmentVars( cacheDirectoryPath );
+
+	// Create a service config object so we can merge it with the others
+	// and override anything that the configuration options need to.
+	const overrideConfig = {
+		lifecycleScripts: overrides.lifecycleScripts,
+		env: {
+			development: {},
+			tests: {},
+		},
+	};
+
+	// We're going to take care to set it at both the root-level and the
+	// environment level. This is not totally necessary, but, it's a
+	// better representation of how broad the override is.
+
+	if ( overrides.port ) {
+		overrideConfig.port = overrides.port;
+		overrideConfig.env.development.port = overrides.port;
 	}
-	return parseSourceString( coreSource, options );
+
+	if ( overrides.mysqlPort ) {
+		overrideConfig.env.development.mysqlPort = overrides.mysqlPort;
+	}
+
+	if ( overrides.testsPort ) {
+		overrideConfig.testsPort = overrides.testsPort;
+		overrideConfig.env.tests.port = overrides.testsPort;
+	}
+
+	if ( overrides.testsMysqlPort ) {
+		overrideConfig.env.tests.mysqlPort = overrides.testsMysqlPort;
+	}
+
+	if ( overrides.coreSource ) {
+		overrideConfig.coreSource = overrides.coreSource;
+		overrideConfig.env.development.coreSource = overrides.coreSource;
+		overrideConfig.env.tests.coreSource = overrides.coreSource;
+	}
+
+	if ( overrides.phpVersion ) {
+		overrideConfig.phpVersion = overrides.phpVersion;
+		overrideConfig.env.development.phpVersion = overrides.phpVersion;
+		overrideConfig.env.tests.phpVersion = overrides.phpVersion;
+	}
+
+	return overrideConfig;
 }
 
 /**
- * Parses a source string into a source object.
+ * Parses a raw config into an unvalidated service config.
  *
- * @param {?string} sourceString              The source string. See README.md for documentation on valid source string patterns.
- * @param {Object}  options
- * @param {string}  options.workDirectoryPath Path to the work directory located in ~/.wp-env.
+ * @param {string} configFile                 The config file that we're parsing.
+ * @param {Object} options
+ * @param {string} options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
  *
- * @return {?WPSource} A source object.
+ * @return {Promise<WPRootConfig|null>} The parsed root config object.
  */
-function parseSourceString( sourceString, { workDirectoryPath } ) {
-	if ( sourceString === null ) {
+async function parseConfigFile( configFile, options ) {
+	const rawConfig = await readRawConfigFile( configFile );
+	if ( ! rawConfig ) {
 		return null;
 	}
 
-	if (
-		sourceString.startsWith( '.' ) ||
-		sourceString.startsWith( HOME_PATH_PREFIX ) ||
-		path.isAbsolute( sourceString )
-	) {
-		let sourcePath;
-		if ( sourceString.startsWith( HOME_PATH_PREFIX ) ) {
-			sourcePath = path.resolve(
-				os.homedir(),
-				sourceString.slice( HOME_PATH_PREFIX.length )
+	return await parseRootConfig( configFile, rawConfig, options );
+}
+
+/**
+ * Parses the root config object.
+ *
+ * @param {string} configFile                 The config file we're parsing.
+ * @param {Object} rawConfig                  The raw config we're parsing.
+ * @param {Object} options
+ * @param {string} options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {Promise<WPRootConfig>} The root config object.
+ */
+async function parseRootConfig( configFile, rawConfig, options ) {
+	const parsedConfig = await parseEnvironmentConfig(
+		configFile,
+		null,
+		rawConfig,
+		{
+			...options,
+			rootConfig: true,
+		}
+	);
+
+	// Parse any root-only options.
+	if ( rawConfig.testsPort !== undefined ) {
+		checkPort( configFile, `testsPort`, rawConfig.testsPort );
+		parsedConfig.testsPort = rawConfig.testsPort;
+	}
+	parsedConfig.lifecycleScripts = {};
+	if ( rawConfig.lifecycleScripts ) {
+		checkObjectWithValues(
+			configFile,
+			'lifecycleScripts',
+			rawConfig.lifecycleScripts,
+			[ 'null', 'string' ],
+			true
+		);
+		parsedConfig.lifecycleScripts = rawConfig.lifecycleScripts;
+	}
+
+	// Parse the environment-specific configs so they're accessible to the root.
+	parsedConfig.env = {};
+	if ( rawConfig.env ) {
+		checkObjectWithValues(
+			configFile,
+			'env',
+			rawConfig.env,
+			[ 'object' ],
+			false
+		);
+		for ( const env in rawConfig.env ) {
+			parsedConfig.env[ env ] = await parseEnvironmentConfig(
+				configFile,
+				env,
+				rawConfig.env[ env ],
+				options
 			);
-		} else {
-			sourcePath = path.resolve( sourceString );
 		}
-		const basename = path.basename( sourcePath );
-		return {
-			type: 'local',
-			path: sourcePath,
-			basename,
-		};
 	}
 
-	const zipFields = sourceString.match(
-		/^https?:\/\/([^\s$.?#].[^\s]*)\.zip(\?.+)?$/
-	);
+	return parsedConfig;
+}
 
-	if ( zipFields ) {
-		const wpOrgFields = sourceString.match(
-			/^https?:\/\/downloads\.wordpress\.org\/(?:plugin|theme)\/([^\s\.]*)([^\s]*)?\.zip$/
+/**
+ * Parses and validates a raw config object and returns a validated service config to use internally.
+ *
+ * @param {string}      configFile                 The config file that we're parsing.
+ * @param {string|null} environment                If set, the environment that we're parsing the config for.
+ * @param {Object}      config                     A config object to parse.
+ * @param {Object}      options
+ * @param {string}      options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ * @param {boolean}     options.rootConfig         Indicates whether or not this is the root config object.
+ *
+ * @return {Promise<WPEnvironmentConfig>} The environment config object.
+ */
+async function parseEnvironmentConfig(
+	configFile,
+	environment,
+	config,
+	options
+) {
+	if ( ! config ) {
+		return {};
+	}
+
+	const environmentPrefix = environment ? environment + '.' : '';
+
+	// Before we move forward with parsing we should make sure that there aren't any
+	// configuration options that do not exist. This helps prevent silent failures
+	// when a user sets up their configuration incorrectly.
+	for ( const key in config ) {
+		if ( DEFAULT_ENVIRONMENT_CONFIG[ key ] !== undefined ) {
+			continue;
+		}
+
+		// The $schema key is a special key that is used to validate the configuration.
+		if ( key === '$schema' ) {
+			continue;
+		}
+
+		// We should also check root-only options for the root config
+		// because these aren't part of the above defaults but are
+		// configuration options that we will parse.
+		switch ( key ) {
+			case 'testsPort':
+			case 'lifecycleScripts':
+			case 'env': {
+				if ( options.rootConfig ) {
+					continue;
+				}
+
+				break;
+			}
+		}
+
+		throw new ValidationError(
+			`Invalid ${ configFile }: "${ environmentPrefix }${ key }" is not a configuration option.`
 		);
-		const basename = wpOrgFields
-			? encodeURIComponent( wpOrgFields[ 1 ] )
-			: encodeURIComponent( path.basename( zipFields[ 1 ] ) );
-
-		return {
-			type: 'zip',
-			url: sourceString,
-			path: path.resolve( workDirectoryPath, basename ),
-			basename,
-		};
-	}
-
-	// SSH URLs (git)
-	const supportedProtocols = [ 'ssh:', 'git+ssh:' ];
-	try {
-		const sshUrl = new URL( sourceString );
-		if ( supportedProtocols.includes( sshUrl.protocol ) ) {
-			const pathElements = sshUrl.pathname
-				.split( '/' )
-				.filter( ( e ) => !! e );
-			const basename = pathElements
-				.slice( -1 )[ 0 ]
-				.replace( /\.git/, '' );
-			const workingPath = path.resolve(
-				workDirectoryPath,
-				...pathElements.slice( 0, -1 ),
-				basename
+	}
+
+	// Parse each option individually so that we can handle the validation
+	// and any conversion that is required to use the option.
+	const parsedConfig = {};
+
+	if ( config.port !== undefined ) {
+		checkPort( configFile, `${ environmentPrefix }port`, config.port );
+		parsedConfig.port = config.port;
+	}
+
+	if ( config.mysqlPort !== undefined ) {
+		parsedConfig.mysqlPort = config.mysqlPort;
+	}
+
+	if ( config.phpVersion !== undefined ) {
+		// Support null as a valid input.
+		if ( config.phpVersion !== null ) {
+			checkVersion(
+				configFile,
+				`${ environmentPrefix }phpVersion`,
+				config.phpVersion
 			);
-			return {
-				type: 'git',
-				url: sshUrl.href.split( '#' )[ 0 ],
-				ref: sshUrl.hash.slice( 1 ) || undefined,
-				path: workingPath,
-				clonePath: workingPath,
-				basename,
-			};
 		}
-	} catch ( err ) {}
+		parsedConfig.phpVersion = config.phpVersion;
+	}
 
-	const gitHubFields = sourceString.match(
-		/^([^\/]+)\/([^#\/]+)(\/([^#]+))?(?:#(.+))?$/
-	);
+	if ( config.core !== undefined ) {
+		parsedConfig.coreSource = includeTestsPath(
+			await parseCoreSource( config.core, options ),
+			options
+		);
+	}
 
-	if ( gitHubFields ) {
-		return {
-			type: 'git',
-			url: `https://github.com/${ gitHubFields[ 1 ] }/${ gitHubFields[ 2 ] }.git`,
-			ref: gitHubFields[ 5 ],
-			path: path.resolve(
-				workDirectoryPath,
-				gitHubFields[ 2 ],
-				gitHubFields[ 4 ] || '.'
-			),
-			clonePath: path.resolve( workDirectoryPath, gitHubFields[ 2 ] ),
-			basename: gitHubFields[ 4 ] || gitHubFields[ 2 ],
-		};
-	}
-
-	throw new ValidationError(
-		`Invalid or unrecognized source: "${ sourceString }".`
-	);
+	if ( config.plugins !== undefined ) {
+		checkStringArray(
+			configFile,
+			`${ environmentPrefix }plugins`,
+			config.plugins
+		);
+		parsedConfig.pluginSources = config.plugins.map( ( sourceString ) =>
+			parseSourceString( sourceString, options )
+		);
+	}
+
+	if ( config.themes !== undefined ) {
+		checkStringArray(
+			configFile,
+			`${ environmentPrefix }themes`,
+			config.themes
+		);
+		parsedConfig.themeSources = config.themes.map( ( sourceString ) =>
+			parseSourceString( sourceString, options )
+		);
+	}
+
+	if ( config.config !== undefined ) {
+		checkObjectWithValues(
+			configFile,
+			`${ environmentPrefix }config`,
+			config.config,
+			[ 'string', 'number', 'boolean' ],
+			true
+		);
+		parsedConfig.config = config.config;
+
+		// There are some configuration options that have a special purpose and need to be validated too.
+		for ( const key in parsedConfig.config ) {
+			switch ( key ) {
+				case 'WP_HOME':
+				case 'WP_SITEURL': {
+					checkValidURL(
+						configFile,
+						`${ environmentPrefix }config.${ key }`,
+						parsedConfig.config[ key ]
+					);
+					break;
+				}
+			}
+		}
+	}
+
+	if ( config.mappings !== undefined ) {
+		checkObjectWithValues(
+			configFile,
+			`${ environmentPrefix }mappings`,
+			config.mappings,
+			[ 'string' ],
+			false
+		);
+		parsedConfig.mappings = Object.entries( config.mappings ).reduce(
+			( result, [ wpDir, localDir ] ) => {
+				const source = parseSourceString( localDir, options );
+				result[ wpDir ] = source;
+				return result;
+			},
+			{}
+		);
+	}
+
+	return parsedConfig;
 }
-module.exports.parseSourceString = parseSourceString;
 
 /**
- * Given a source object, returns a new source object with the testsPath
- * property set correctly. Only the 'core' source requires a testsPath.
- *
- * @param {?WPSource} source                    A source object.
- * @param {Object}    options
- * @param {string}    options.workDirectoryPath Path to the work directory located in ~/.wp-env.
+ * Parses a WordPress Core source string or defaults to the latest version.
  *
- * @return {?WPSource} A source object.
+ * @param {string|null} coreSource The WordPress course source string to parse.
+ * @param {Object}      options    Options to use while parsing.
+ * @return {Promise<Object>} The parsed source object.
  */
-function includeTestsPath( source, { workDirectoryPath } ) {
-	if ( source === null ) {
-		return null;
-	}
+async function parseCoreSource( coreSource, options ) {
+	// An empty source means we should use the latest version of WordPress.
+	if ( ! coreSource ) {
+		const wpVersion = await getLatestWordPressVersion( options );
+		if ( ! wpVersion ) {
+			throw new ValidationError(
+				'Could not find the latest WordPress version. There may be a network issue.'
+			);
+		}
 
-	return {
-		...source,
-		testsPath: path.resolve(
-			workDirectoryPath,
-			'tests-' + path.basename( source.path )
-		),
-	};
+		coreSource = `WordPress/WordPress#${ wpVersion }`;
+	}
+	return parseSourceString( coreSource, options );
 }
-module.exports.includeTestsPath = includeTestsPath;
+
+module.exports = {
+	parseConfig,
+	getConfigFilePath,
+};
diff --git a/packages/env/lib/config/parse-source-string.js b/packages/env/lib/config/parse-source-string.js
new file mode 100644
index 00000000000000..27dcfa4ef5b59d
--- /dev/null
+++ b/packages/env/lib/config/parse-source-string.js
@@ -0,0 +1,164 @@
+'use strict';
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const os = require( 'os' );
+
+/**
+ * Internal dependencies
+ */
+const { ValidationError } = require( './validate-config' );
+
+/**
+ * A WordPress installation, plugin or theme to be loaded into the environment.
+ *
+ * @typedef WPSource
+ * @property {'local'|'git'|'zip'} type     The source type.
+ * @property {string}              path     The path to the WordPress installation, plugin or theme.
+ * @property {?string}             url      The URL to the source download if the source type is not local.
+ * @property {?string}             ref      The git ref for the source if the source type is 'git'.
+ * @property {string}              basename Name that identifies the WordPress installation, plugin or theme.
+ */
+
+/**
+ * The string at the beginning of a source path that points to a home-relative
+ * directory. Will be '~/' on unix environments and '~\' on Windows.
+ */
+const HOME_PATH_PREFIX = `~${ path.sep }`;
+
+/**
+ * Parses a source string into a source object.
+ *
+ * @param {?string} sourceString               The source string. See README.md for documentation on valid source string patterns.
+ * @param {Object}  options
+ * @param {string}  options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {?WPSource} A source object.
+ */
+function parseSourceString( sourceString, { cacheDirectoryPath } ) {
+	if ( sourceString === null ) {
+		return null;
+	}
+
+	if (
+		sourceString.startsWith( '.' ) ||
+		sourceString.startsWith( HOME_PATH_PREFIX ) ||
+		path.isAbsolute( sourceString )
+	) {
+		let sourcePath;
+		if ( sourceString.startsWith( HOME_PATH_PREFIX ) ) {
+			sourcePath = path.resolve(
+				os.homedir(),
+				sourceString.slice( HOME_PATH_PREFIX.length )
+			);
+		} else {
+			sourcePath = path.resolve( sourceString );
+		}
+		const basename = path.basename( sourcePath );
+		return {
+			type: 'local',
+			path: sourcePath,
+			basename,
+		};
+	}
+
+	const zipFields = sourceString.match(
+		/^https?:\/\/([^\s$.?#].[^\s]*)\.zip(\?.+)?$/
+	);
+
+	if ( zipFields ) {
+		const wpOrgFields = sourceString.match(
+			/^https?:\/\/downloads\.wordpress\.org\/(?:plugin|theme)\/([^\s\.]*)([^\s]*)?\.zip$/
+		);
+		const basename = wpOrgFields
+			? encodeURIComponent( wpOrgFields[ 1 ] )
+			: encodeURIComponent( path.basename( zipFields[ 1 ] ) );
+
+		return {
+			type: 'zip',
+			url: sourceString,
+			path: path.resolve( cacheDirectoryPath, basename ),
+			basename,
+		};
+	}
+
+	// SSH URLs (git)
+	const supportedProtocols = [ 'ssh:', 'git+ssh:' ];
+	try {
+		const sshUrl = new URL( sourceString );
+		if ( supportedProtocols.includes( sshUrl.protocol ) ) {
+			const pathElements = sshUrl.pathname
+				.split( '/' )
+				.filter( ( e ) => !! e );
+			const basename = pathElements
+				.slice( -1 )[ 0 ]
+				.replace( /\.git/, '' );
+			const workingPath = path.resolve(
+				cacheDirectoryPath,
+				...pathElements.slice( 0, -1 ),
+				basename
+			);
+			return {
+				type: 'git',
+				url: sshUrl.href.split( '#' )[ 0 ],
+				ref: sshUrl.hash.slice( 1 ) || undefined,
+				path: workingPath,
+				clonePath: workingPath,
+				basename,
+			};
+		}
+	} catch ( err ) {}
+
+	const gitHubFields = sourceString.match(
+		/^([^\/]+)\/([^#\/]+)(\/([^#]+))?(?:#(.+))?$/
+	);
+
+	if ( gitHubFields ) {
+		return {
+			type: 'git',
+			url: `https://github.com/${ gitHubFields[ 1 ] }/${ gitHubFields[ 2 ] }.git`,
+			ref: gitHubFields[ 5 ],
+			path: path.resolve(
+				cacheDirectoryPath,
+				gitHubFields[ 2 ],
+				gitHubFields[ 4 ] || '.'
+			),
+			clonePath: path.resolve( cacheDirectoryPath, gitHubFields[ 2 ] ),
+			basename: gitHubFields[ 4 ] || gitHubFields[ 2 ],
+		};
+	}
+
+	throw new ValidationError(
+		`Invalid or unrecognized source: "${ sourceString }".`
+	);
+}
+
+/**
+ * Given a source object, returns a new source object with the testsPath
+ * property set correctly. Only the 'core' source requires a testsPath.
+ *
+ * @param {?WPSource} source                     A source object.
+ * @param {Object}    options
+ * @param {string}    options.cacheDirectoryPath Path to the work directory located in ~/.wp-env.
+ *
+ * @return {?WPSource} A source object.
+ */
+function includeTestsPath( source, { cacheDirectoryPath } ) {
+	if ( source === null ) {
+		return null;
+	}
+
+	return {
+		...source,
+		testsPath: path.resolve(
+			cacheDirectoryPath,
+			'tests-' + path.basename( source.path )
+		),
+	};
+}
+
+module.exports = {
+	parseSourceString,
+	includeTestsPath,
+};
diff --git a/packages/env/lib/config/post-process-config.js b/packages/env/lib/config/post-process-config.js
new file mode 100644
index 00000000000000..d09843893ea69f
--- /dev/null
+++ b/packages/env/lib/config/post-process-config.js
@@ -0,0 +1,202 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const mergeConfigs = require( './merge-configs' );
+const addOrReplacePort = require( './add-or-replace-port' );
+const { ValidationError } = require( './validate-config' );
+
+/**
+ * @typedef {import('./parse-config').WPRootConfig} WPRootConfig
+ * @typedef {import('./parse-config').WPEnvironmentConfig} WPEnvironmentConfig
+ */
+
+/**
+ * Performs any additional post-processing on the config object.
+ *
+ * @param {WPEnvironmentConfig} config The config to process.
+ *
+ * @return {WPEnvironmentConfig} The config after post-processing.
+ */
+module.exports = function postProcessConfig( config ) {
+	// Make sure that we're operating on a config object that has
+	// complete environment configs for convenience.
+	config = mergeRootToEnvironments( config );
+
+	config = appendPortToWPConfigs( config );
+
+	validate( config );
+	return config;
+};
+
+/**
+ * Merges the root config and each environment together in order to make sure each environment has
+ * a full config object to work with internally. This makes it easier than having to try and
+ * resolve the full config options every time we want to use them for something.
+ *
+ * @param {WPEnvironmentConfig} config The config to process.
+ *
+ * @return {WPRootConfig} The config object with the root options merged together with the environment-specific options.
+ */
+function mergeRootToEnvironments( config ) {
+	// Some root-level options need to be handled early because they have a special
+	// cascade behavior that would break the normal merge. After merging we then
+	// delete them to avoid that breakage and add them back before we return.
+	const removedRootOptions = {};
+	if (
+		config.port !== undefined &&
+		config.env.development.port === undefined
+	) {
+		removedRootOptions.port = config.port;
+		config.env.development.port = config.port;
+		delete config.port;
+	}
+	if (
+		config.testsPort !== undefined &&
+		config.env.tests.port === undefined
+	) {
+		removedRootOptions.testsPort = config.testsPort;
+		config.env.tests.port = config.testsPort;
+		delete config.testsPort;
+	}
+	if ( config.lifecycleScripts !== undefined ) {
+		removedRootOptions.lifecycleScripts = config.lifecycleScripts;
+		delete config.lifecycleScripts;
+	}
+
+	// Merge the root config and the environment configs together so that
+	// we can ignore the root config and have full environment configs.
+	for ( const env in config.env ) {
+		config.env[ env ] = mergeConfigs(
+			deepCopyRootOptions( config ),
+			config.env[ env ]
+		);
+	}
+
+	// Set any root-level options we reset back.
+	for ( const option in removedRootOptions ) {
+		config[ option ] = removedRootOptions[ option ];
+	}
+
+	return config;
+}
+
+/**
+ * Appends the configured port to certain wp-config options.
+ *
+ * @param {WPRootConfig} config The config to process.
+ *
+ * @return {WPRootConfig} The config after post-processing.
+ */
+function appendPortToWPConfigs( config ) {
+	const options = [ 'WP_TESTS_DOMAIN', 'WP_SITEURL', 'WP_HOME' ];
+
+	// We are only interested in editing the config options for environment-specific configs.
+	// If we made this change to the root config it would cause problems since they would
+	// be mapped to all environments even though the ports will be different.
+	for ( const env in config.env ) {
+		// There's nothing to do without any wp-config options set.
+		if ( config.env[ env ].config === undefined ) {
+			continue;
+		}
+
+		if ( config.env[ env ].port === undefined ) {
+			continue;
+		}
+
+		// Make sure that the port is on the option if it's present.
+		for ( const option of options ) {
+			if ( config.env[ env ].config[ option ] === undefined ) {
+				continue;
+			}
+
+			config.env[ env ].config[ option ] = addOrReplacePort(
+				config.env[ env ].config[ option ],
+				config.env[ env ].port,
+				// Don't replace the port if one is already set on WP_HOME.
+				option !== 'WP_HOME'
+			);
+		}
+	}
+
+	return config;
+}
+
+/**
+ * Examines the config to make sure that none of the environments share the same port.
+ *
+ * @param {WPRootConfig} config The config to process.
+ */
+function validatePortUniqueness( config ) {
+	// We're going to build a map of the environments and their port
+	// so we can accomodate root-level config options more easily.
+	const environmentPorts = {};
+
+	// Add all of the environments to the map. This will
+	// overwrite any root-level options if necessary.
+	for ( const env in config.env ) {
+		if ( config.env[ env ].port === undefined ) {
+			throw new ValidationError(
+				`The "${ env }" environment has an invalid port.`
+			);
+		}
+
+		environmentPorts[ env ] = config.env[ env ].port;
+	}
+
+	// This search isn't very performant, but, we won't ever be
+	// checking more than a few entries so it doesn't matter.
+	for ( const env in environmentPorts ) {
+		for ( const check in environmentPorts ) {
+			if ( env === check ) {
+				continue;
+			}
+
+			if ( environmentPorts[ env ] === environmentPorts[ check ] ) {
+				throw new ValidationError(
+					`The "${ env }" and "${ check }" environments may not have the same port.`
+				);
+			}
+		}
+	}
+}
+
+/**
+ * Perform any validation that can only happen after post-processing has occurred.
+ *
+ * @param {WPRootConfig} config The config to validate.
+ */
+function validate( config ) {
+	validatePortUniqueness( config );
+}
+
+/**
+ * Creates a deep copy of the root options in the config object that we can use to avoid
+ * accidentally sharing object state between different environments.
+ *
+ * @param {WPRootConfig} config The root config object to copy.
+ *
+ * @return {WPRootConfig} A deep copy of the root config object.
+ */
+function deepCopyRootOptions( config ) {
+	// Create a shallow clone of the object first so we can operate on it safetly.
+	const rootConfig = Object.assign( {}, config );
+
+	// Since we're only dealing with the root options we don't want the environments.
+	delete rootConfig.env;
+
+	if ( rootConfig.config !== undefined ) {
+		rootConfig.config = Object.assign( {}, rootConfig.config );
+	}
+	if ( rootConfig.mappings !== undefined ) {
+		rootConfig.mappings = Object.assign( {}, rootConfig.mappings );
+	}
+	if ( rootConfig.pluginSources !== undefined ) {
+		rootConfig.pluginSources = [ ...rootConfig.pluginSources ];
+	}
+	if ( rootConfig.themeSources !== undefined ) {
+		rootConfig.themeSources = [ ...rootConfig.themeSources ];
+	}
+
+	return rootConfig;
+}
diff --git a/packages/env/lib/config/read-raw-config-file.js b/packages/env/lib/config/read-raw-config-file.js
index 80f3dc9f1ee36e..38c6ddfc84875e 100644
--- a/packages/env/lib/config/read-raw-config-file.js
+++ b/packages/env/lib/config/read-raw-config-file.js
@@ -4,6 +4,7 @@
  */
 const fs = require( 'fs' ).promises;
 
+const path = require( 'path' );
 /**
  * Internal dependencies
  */
@@ -13,53 +14,26 @@ const { ValidationError } = require( './validate-config' );
  * Reads the config JSON from the filesystem and returns it as a JS object
  * compatible with the env package.
  *
- * @param {string} name       The name of the file for error messages.
  * @param {string} configPath The path to the JSON file to read.
  *
  * @return {Object} the raw config data.
  */
-module.exports = async function readRawConfigFile( name, configPath ) {
+module.exports = async function readRawConfigFile( configPath ) {
 	try {
-		return withBackCompat(
-			JSON.parse( await fs.readFile( configPath, 'utf8' ) )
-		);
+		return JSON.parse( await fs.readFile( configPath, 'utf8' ) );
 	} catch ( error ) {
+		const fileName = path.basename( configPath );
+
 		if ( error.code === 'ENOENT' ) {
 			return null;
 		} else if ( error instanceof SyntaxError ) {
 			throw new ValidationError(
-				`Invalid ${ name }: ${ error.message }`
+				`Invalid ${ fileName }: ${ error.message }`
 			);
 		} else {
 			throw new ValidationError(
-				`Could not read ${ name }: ${ error.message }`
+				`Could not read ${ fileName }: ${ error.message }`
 			);
 		}
 	}
 };
-
-/**
- * Used to maintain back compatibility with older versions of the .wp-env.json
- * file. Returns an object in the shape of the currently expected .wp-env.json
- * version.
- *
- * @param {Object} rawConfig config right after being read from a file.
- * @return {Object} Same config with any old-format values converted into the
- *                  shape of the currently expected format.
- */
-function withBackCompat( rawConfig ) {
-	// Convert testsPort into new env.tests format.
-	if ( rawConfig.testsPort !== undefined ) {
-		rawConfig.env = {
-			...( rawConfig.env || {} ),
-			tests: {
-				port: rawConfig.testsPort,
-				...( rawConfig.env && rawConfig.env.tests
-					? rawConfig.env.tests
-					: {} ),
-			},
-		};
-	}
-	delete rawConfig.testsPort;
-	return rawConfig;
-}
diff --git a/packages/env/lib/config/test/__snapshots__/config-integration.js.snap b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap
new file mode 100644
index 00000000000000..6c3618f4724cb0
--- /dev/null
+++ b/packages/env/lib/config/test/__snapshots__/config-integration.js.snap
@@ -0,0 +1,303 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Config Integration should load local and override configuration files 1`] = `
+{
+  "configDirectoryPath": "/test/gutenberg",
+  "detectedLocalConfig": true,
+  "dockerComposeConfigPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/docker-compose.yml",
+  "env": {
+    "development": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": true,
+        "WP_DEBUG": true,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:999",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:999",
+        "WP_TESTS_DOMAIN": "localhost:999",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 23306,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 999,
+      "themeSources": [],
+    },
+    "tests": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": false,
+        "WP_DEBUG": false,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:456",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:456",
+        "WP_TESTS_DOMAIN": "localhost:456",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 23307,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 456,
+      "themeSources": [],
+    },
+  },
+  "lifecycleScripts": {
+    "afterClean": null,
+    "afterDestroy": "test",
+    "afterStart": null,
+  },
+  "name": "gutenberg",
+  "workDirectoryPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338",
+}
+`;
+
+exports[`Config Integration should load local configuration file 1`] = `
+{
+  "configDirectoryPath": "/test/gutenberg",
+  "detectedLocalConfig": true,
+  "dockerComposeConfigPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/docker-compose.yml",
+  "env": {
+    "development": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": true,
+        "WP_DEBUG": true,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:123",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:123",
+        "WP_TESTS_DOMAIN": "localhost:123",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 13306,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 123,
+      "themeSources": [],
+    },
+    "tests": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": false,
+        "WP_DEBUG": false,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:8889",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:8889",
+        "WP_TESTS_DOMAIN": "localhost:8889",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 23307,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 8889,
+      "themeSources": [],
+    },
+  },
+  "lifecycleScripts": {
+    "afterClean": null,
+    "afterDestroy": null,
+    "afterStart": "test",
+  },
+  "name": "gutenberg",
+  "workDirectoryPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338",
+}
+`;
+
+exports[`Config Integration should use default configuration 1`] = `
+{
+  "configDirectoryPath": "/test/gutenberg",
+  "detectedLocalConfig": true,
+  "dockerComposeConfigPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/docker-compose.yml",
+  "env": {
+    "development": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": true,
+        "WP_DEBUG": true,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:8888",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:8888",
+        "WP_TESTS_DOMAIN": "localhost:8888",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "100.0.0",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": null,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 8888,
+      "themeSources": [],
+    },
+    "tests": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": false,
+        "WP_DEBUG": false,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:8889",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:8889",
+        "WP_TESTS_DOMAIN": "localhost:8889",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "100.0.0",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": null,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 8889,
+      "themeSources": [],
+    },
+  },
+  "lifecycleScripts": {
+    "afterClean": null,
+    "afterDestroy": null,
+    "afterStart": null,
+  },
+  "name": "gutenberg",
+  "workDirectoryPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338",
+}
+`;
+
+exports[`Config Integration should use environment variables over local and override configuration files 1`] = `
+{
+  "configDirectoryPath": "/test/gutenberg",
+  "detectedLocalConfig": true,
+  "dockerComposeConfigPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/docker-compose.yml",
+  "env": {
+    "development": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": true,
+        "WP_DEBUG": true,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:12345",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:12345",
+        "WP_TESTS_DOMAIN": "localhost:12345",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 23306,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 12345,
+      "testsPort": 61234,
+      "themeSources": [],
+    },
+    "tests": {
+      "config": {
+        "FS_METHOD": "direct",
+        "SCRIPT_DEBUG": false,
+        "WP_DEBUG": false,
+        "WP_ENVIRONMENT_TYPE": "local",
+        "WP_HOME": "http://localhost:61234",
+        "WP_PHP_BINARY": "php",
+        "WP_SITEURL": "http://localhost:61234",
+        "WP_TESTS_DOMAIN": "localhost:61234",
+        "WP_TESTS_EMAIL": "admin@example.org",
+        "WP_TESTS_TITLE": "Test Blog",
+      },
+      "coreSource": {
+        "basename": "WordPress",
+        "clonePath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "path": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/WordPress",
+        "ref": "trunk",
+        "testsPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338/tests-WordPress",
+        "type": "git",
+        "url": "https://github.com/WordPress/WordPress.git",
+      },
+      "mappings": {},
+      "mysqlPort": 23307,
+      "phpVersion": null,
+      "pluginSources": [],
+      "port": 61234,
+      "testsPort": 61234,
+      "themeSources": [],
+    },
+  },
+  "lifecycleScripts": {
+    "afterClean": null,
+    "afterDestroy": null,
+    "afterStart": "test",
+  },
+  "name": "gutenberg",
+  "workDirectoryPath": "/cache/5fea4c5689ef6cc4a4e6eaaa39323338",
+}
+`;
diff --git a/packages/env/lib/config/test/__snapshots__/config.js.snap b/packages/env/lib/config/test/__snapshots__/config.js.snap
deleted file mode 100644
index ad0c18e4279de7..00000000000000
--- a/packages/env/lib/config/test/__snapshots__/config.js.snap
+++ /dev/null
@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`readConfig config file should match snapshot 1`] = `
-Object {
-  "configDirectoryPath": ".",
-  "detectedLocalConfig": true,
-  "env": Object {
-    "development": Object {
-      "config": Object {
-        "SCRIPT_DEBUG": true,
-        "TEST": 100,
-        "TEST_VAL1": 1,
-        "TEST_VAL2": "hello",
-        "TEST_VAL3": false,
-        "WP_DEBUG": true,
-        "WP_ENVIRONMENT_TYPE": "local",
-        "WP_HOME": "http://localhost:2000/",
-        "WP_PHP_BINARY": "php",
-        "WP_SITEURL": "http://localhost:2000/",
-        "WP_TESTS_DOMAIN": "localhost",
-        "WP_TESTS_EMAIL": "admin@example.org",
-        "WP_TESTS_TITLE": "Test Blog",
-      },
-      "mappings": Object {},
-      "phpVersion": null,
-      "pluginSources": Array [],
-      "port": 2000,
-      "themeSources": Array [],
-    },
-    "tests": Object {
-      "config": Object {
-        "SCRIPT_DEBUG": false,
-        "TEST": 200,
-        "TEST_VAL1": 1,
-        "TEST_VAL2": "hello",
-        "TEST_VAL3": false,
-        "WP_DEBUG": false,
-        "WP_ENVIRONMENT_TYPE": "local",
-        "WP_HOME": "http://localhost:1000/",
-        "WP_PHP_BINARY": "php",
-        "WP_SITEURL": "http://localhost:1000/",
-        "WP_TESTS_DOMAIN": "localhost",
-        "WP_TESTS_EMAIL": "admin@example.org",
-        "WP_TESTS_TITLE": "Test Blog",
-      },
-      "mappings": Object {},
-      "phpVersion": null,
-      "pluginSources": Array [],
-      "port": 1000,
-      "themeSources": Array [],
-    },
-  },
-  "name": ".",
-}
-`;
-
-exports[`readConfig wp config values should use default config values 1`] = `
-Object {
-  "SCRIPT_DEBUG": false,
-  "WP_DEBUG": false,
-  "WP_ENVIRONMENT_TYPE": "local",
-  "WP_HOME": "http://localhost:8889/",
-  "WP_PHP_BINARY": "php",
-  "WP_SITEURL": "http://localhost:8889/",
-  "WP_TESTS_DOMAIN": "localhost",
-  "WP_TESTS_EMAIL": "admin@example.org",
-  "WP_TESTS_TITLE": "Test Blog",
-}
-`;
-
-exports[`readConfig wp config values should use default config values 2`] = `
-Object {
-  "SCRIPT_DEBUG": true,
-  "WP_DEBUG": true,
-  "WP_ENVIRONMENT_TYPE": "local",
-  "WP_HOME": "http://localhost:8888/",
-  "WP_PHP_BINARY": "php",
-  "WP_SITEURL": "http://localhost:8888/",
-  "WP_TESTS_DOMAIN": "localhost",
-  "WP_TESTS_EMAIL": "admin@example.org",
-  "WP_TESTS_TITLE": "Test Blog",
-}
-`;
diff --git a/packages/env/lib/config/test/add-or-replace-port.js b/packages/env/lib/config/test/add-or-replace-port.js
new file mode 100644
index 00000000000000..e04722e22435a3
--- /dev/null
+++ b/packages/env/lib/config/test/add-or-replace-port.js
@@ -0,0 +1,81 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const addOrReplacePort = require( '../add-or-replace-port.js' );
+
+describe( 'addOrReplacePort', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should add or replace port with various inputs', () => {
+		const testMap = [
+			// Addition
+			{ in: 'test', expect: 'test:101' },
+			{ in: 'test/test?test#test', expect: 'test:101/test?test#test' },
+			{ in: 'http://test.com', expect: 'http://test.com:101' },
+			{
+				in: 'http://test.com/test?test#test',
+				expect: 'http://test.com:101/test?test#test',
+			},
+			{ in: 'ssh://test.com', expect: 'ssh://test.com:101' },
+			{ in: 'test.com', expect: 'test.com:101' },
+
+			// Replacement
+			{ in: 'test:99', expect: 'test:101' },
+			{ in: 'test:99/test?test#test', expect: 'test:101/test?test#test' },
+			{ in: 'http://test.com:99', expect: 'http://test.com:101' },
+			{
+				in: 'http://test.com:99/test?test#test',
+				expect: 'http://test.com:101/test?test#test',
+			},
+			{ in: 'ssh://test.com:99', expect: 'ssh://test.com:101' },
+			{ in: 'test.com:99', expect: 'test.com:101' },
+		];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, '101' );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should support number ports', () => {
+		const testMap = [ { in: 'test', expect: 'test:104' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 104, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should not add default HTTP port', () => {
+		const testMap = [ { in: 'test', expect: 'test' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 80, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should not add default HTTPS port', () => {
+		const testMap = [ { in: 'test', expect: 'test' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 443, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should do nothing if port is present but replacement is not requested', () => {
+		const testMap = [
+			{ in: 'test', expect: 'test:103' },
+			{ in: 'test:99', expect: 'test:99' },
+		];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, '103', false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+} );
diff --git a/packages/env/lib/config/test/config-integration.js b/packages/env/lib/config/test/config-integration.js
new file mode 100644
index 00000000000000..8ab2897da7ff4f
--- /dev/null
+++ b/packages/env/lib/config/test/config-integration.js
@@ -0,0 +1,204 @@
+'use strict';
+/* eslint-disable jest/no-conditional-expect */
+/**
+ * External dependencies
+ */
+const { readFile } = require( 'fs' ).promises;
+
+/**
+ * Internal dependencies
+ */
+const loadConfig = require( '../load-config' );
+const detectDirectoryType = require( '../detect-directory-type' );
+
+jest.mock( 'fs', () => ( {
+	promises: {
+		readFile: jest.fn(),
+		stat: jest.fn().mockResolvedValue( true ),
+		mkdir: jest.fn(),
+		writeFile: jest.fn(),
+	},
+} ) );
+
+// This mocks a small response with a format matching the stable-check API.
+// It makes getLatestWordPressVersion resolve to "100.0.0".
+jest.mock( 'got', () =>
+	jest.fn( ( url ) => ( {
+		json: () => {
+			if ( url === 'https://api.wordpress.org/core/stable-check/1.0/' ) {
+				return Promise.resolve( {
+					'1.0': 'insecure',
+					'99.1.1': 'outdated',
+					'100.0.0': 'latest',
+					'100.0.1': 'fancy',
+				} );
+			}
+		},
+	} ) )
+);
+
+jest.mock( '../detect-directory-type', () => jest.fn() );
+
+describe( 'Config Integration', () => {
+	beforeEach( () => {
+		process.env.WP_ENV_HOME = '/cache';
+		detectDirectoryType.mockResolvedValue( null );
+	} );
+
+	afterEach( () => {
+		delete process.env.WP_ENV_HOME;
+		delete process.env.WP_ENV_PORT;
+		delete process.env.WP_ENV_MYSQL_PORT;
+		delete process.env.WP_ENV_TESTS_PORT;
+		delete process.env.WP_ENV_TESTS_MYSQL_PORT;
+		delete process.env.WP_ENV_LIFECYCLE_SCRIPT_AFTER_START;
+	} );
+
+	it( 'should use default configuration', async () => {
+		readFile.mockImplementation( async () => {
+			throw { code: 'ENOENT' };
+		} );
+
+		const config = await loadConfig( '/test/gutenberg' );
+
+		expect( config.env.development.port ).toEqual( 8888 );
+		expect( config.env.tests.port ).toEqual( 8889 );
+		expect( config.env.development.mysqlPort ).toEqual( null );
+		expect( config.env.tests.mysqlPort ).toEqual( null );
+		expect( config ).toMatchSnapshot();
+	} );
+
+	it( 'should load local configuration file', async () => {
+		readFile.mockImplementation( async ( fileName ) => {
+			if ( fileName === '/test/gutenberg/.wp-env.json' ) {
+				return JSON.stringify( {
+					core: 'WordPress/WordPress#trunk',
+					port: 123,
+					lifecycleScripts: {
+						afterStart: 'test',
+						afterClean: null,
+						afterDestroy: null,
+					},
+					env: {
+						development: {
+							mysqlPort: 13306,
+						},
+						tests: {
+							mysqlPort: 23307,
+						},
+					},
+				} );
+			}
+
+			throw { code: 'ENOENT' };
+		} );
+
+		const config = await loadConfig( '/test/gutenberg' );
+
+		expect( config.env.development.port ).toEqual( 123 );
+		expect( config.env.tests.port ).toEqual( 8889 );
+		expect( config.env.development.mysqlPort ).toEqual( 13306 );
+		expect( config.env.tests.mysqlPort ).toEqual( 23307 );
+		expect( config ).toMatchSnapshot();
+	} );
+
+	it( 'should load local and override configuration files', async () => {
+		readFile.mockImplementation( async ( fileName ) => {
+			if ( fileName === '/test/gutenberg/.wp-env.json' ) {
+				return JSON.stringify( {
+					core: 'WordPress/WordPress#trunk',
+					port: 123,
+					testsPort: 456,
+					lifecycleScripts: {
+						afterStart: 'test',
+						afterClean: null,
+						afterDestroy: null,
+					},
+					env: {
+						tests: {
+							mysqlPort: 13306,
+						},
+					},
+				} );
+			}
+
+			if ( fileName === '/test/gutenberg/.wp-env.override.json' ) {
+				return JSON.stringify( {
+					port: 999,
+					lifecycleScripts: {
+						afterStart: null,
+						afterClean: null,
+						afterDestroy: 'test',
+					},
+					env: {
+						development: {
+							mysqlPort: 23306,
+						},
+						tests: {
+							mysqlPort: 23307,
+						},
+					},
+				} );
+			}
+
+			throw { code: 'ENOENT' };
+		} );
+
+		const config = await loadConfig( '/test/gutenberg' );
+
+		expect( config.env.development.port ).toEqual( 999 );
+		expect( config.env.tests.port ).toEqual( 456 );
+		expect( config.env.development.mysqlPort ).toEqual( 23306 );
+		expect( config.env.tests.mysqlPort ).toEqual( 23307 );
+		expect( config ).toMatchSnapshot();
+	} );
+
+	it( 'should use environment variables over local and override configuration files', async () => {
+		process.env.WP_ENV_PORT = 12345;
+		process.env.WP_ENV_MYSQL_PORT = 23306;
+		process.env.WP_ENV_TESTS_PORT = 61234;
+		process.env.WP_ENV_TESTS_MYSQL_PORT = 23307;
+		process.env.WP_ENV_LIFECYCLE_SCRIPT_AFTER_START = 'test';
+
+		readFile.mockImplementation( async ( fileName ) => {
+			if ( fileName === '/test/gutenberg/.wp-env.json' ) {
+				return JSON.stringify( {
+					core: 'WordPress/WordPress#trunk',
+					port: 123,
+					testsPort: 456,
+					lifecycleScripts: {
+						afterStart: 'local',
+						afterClean: null,
+						afterDestroy: null,
+					},
+					env: {
+						tests: {
+							mysqlPort: 13306,
+						},
+					},
+				} );
+			}
+
+			if ( fileName === '/test/gutenberg/.wp-env.override.json' ) {
+				return JSON.stringify( {
+					port: 999,
+				} );
+			}
+
+			throw { code: 'ENOENT' };
+		} );
+
+		const config = await loadConfig( '/test/gutenberg' );
+
+		expect( config.env.development.port ).toEqual( 12345 );
+		expect( config.env.tests.port ).toEqual( 61234 );
+		expect( config.env.development.mysqlPort ).toEqual( 23306 );
+		expect( config.env.tests.mysqlPort ).toEqual( 23307 );
+		expect( config.lifecycleScripts ).toHaveProperty(
+			'afterStart',
+			'test'
+		);
+		expect( config ).toMatchSnapshot();
+	} );
+} );
+/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/lib/config/test/config.js b/packages/env/lib/config/test/config.js
deleted file mode 100644
index 5552ecce9d70f4..00000000000000
--- a/packages/env/lib/config/test/config.js
+++ /dev/null
@@ -1,1203 +0,0 @@
-/* eslint-disable jest/no-conditional-expect */
-/**
- * External dependencies
- */
-const { readFile, stat } = require( 'fs' ).promises;
-const os = require( 'os' );
-const { join, resolve } = require( 'path' );
-
-/**
- * Internal dependencies
- */
-const { readConfig, ValidationError } = require( '..' );
-const detectDirectoryType = require( '../detect-directory-type' );
-
-jest.mock( 'fs', () => ( {
-	promises: {
-		readFile: jest.fn(),
-		stat: jest.fn().mockReturnValue( Promise.resolve( false ) ),
-	},
-} ) );
-
-// This mocks a small response with a format matching the stable-check API.
-// It makes getLatestWordPressVersion resolve to "100.0.0".
-jest.mock( 'got', () =>
-	jest.fn( ( url ) => ( {
-		json: () => {
-			if ( url === 'https://api.wordpress.org/core/stable-check/1.0/' ) {
-				return Promise.resolve( {
-					'1.0': 'insecure',
-					'99.1.1': 'outdated',
-					'100.0.0': 'latest',
-					'100.0.1': 'fancy',
-				} );
-			}
-		},
-	} ) )
-);
-
-jest.mock( '../detect-directory-type', () => jest.fn() );
-
-describe( 'readConfig', () => {
-	beforeEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	describe( 'config file', () => {
-		it( 'should throw a validation error if config is invalid JSON', async () => {
-			readFile.mockImplementation( () => Promise.resolve( '{' ) );
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain( 'Invalid .wp-env.json' );
-			}
-		} );
-
-		it( 'should throw a validation error if config cannot be read', async () => {
-			readFile.mockImplementation( () =>
-				Promise.reject( { message: 'Uh oh!' } )
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Could not read .wp-env.json'
-				);
-			}
-		} );
-
-		it( 'should infer a core config when ran from a core directory', async () => {
-			readFile.mockImplementation( () =>
-				Promise.reject( { code: 'ENOENT' } )
-			);
-			detectDirectoryType.mockImplementation( () => 'core' );
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource.type ).toBe( 'local' );
-			expect( config.env.tests.coreSource ).not.toBeNull();
-			expect( config.env.development.pluginSources ).toHaveLength( 0 );
-			expect( config.env.development.themeSources ).toHaveLength( 0 );
-		} );
-
-		it( 'should use the most recent stable WordPress version for the default core source', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			const config = await readConfig( '.wp-env.json' );
-
-			const expected = {
-				url: 'https://github.com/WordPress/WordPress.git',
-				type: 'git',
-				basename: 'WordPress',
-				ref: '100.0.0', // From the mock of https at the top of the file.
-			};
-
-			expect( config.env.development.coreSource ).toMatchObject(
-				expected
-			);
-			expect( config.env.tests.coreSource ).toMatchObject( expected );
-		} );
-
-		it( 'should infer a plugin config when ran from a plugin directory', async () => {
-			readFile.mockImplementation( () =>
-				Promise.reject( { code: 'ENOENT' } )
-			);
-			detectDirectoryType.mockImplementation( () => 'plugin' );
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource.type ).toBe( 'git' );
-			expect( config.env.development.pluginSources ).toHaveLength( 1 );
-			expect( config.env.tests.pluginSources ).toHaveLength( 1 );
-			expect( config.env.development.themeSources ).toHaveLength( 0 );
-		} );
-
-		it( 'should infer a theme config when ran from a theme directory', async () => {
-			readFile.mockImplementation( () =>
-				Promise.reject( { code: 'ENOENT' } )
-			);
-			detectDirectoryType.mockImplementation( () => 'theme' );
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource.type ).toBe( 'git' );
-			expect( config.env.tests.coreSource.type ).toBe( 'git' );
-			expect( config.env.development.themeSources ).toHaveLength( 1 );
-			expect( config.env.tests.themeSources ).toHaveLength( 1 );
-			expect( config.env.development.pluginSources ).toHaveLength( 0 );
-			expect( config.env.tests.pluginSources ).toHaveLength( 0 );
-		} );
-
-		it( 'should use the WP_ENV_HOME environment variable only if specified', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			const oldEnvHome = process.env.WP_ENV_HOME;
-
-			expect.assertions( 2 );
-
-			process.env.WP_ENV_HOME = 'here/is/a/path';
-			const configWith = await readConfig( '.wp-env.json' );
-			expect(
-				configWith.workDirectoryPath.includes(
-					join( 'here', 'is', 'a', 'path' )
-				)
-			).toBe( true );
-
-			process.env.WP_ENV_HOME = undefined;
-			const configWithout = await readConfig( '.wp-env.json' );
-			expect(
-				configWithout.workDirectoryPath.includes(
-					join( 'here', 'is', 'a', 'path' )
-				)
-			).toBe( false );
-
-			process.env.WP_ENV_HOME = oldEnvHome;
-		} );
-
-		it( 'should use the WP_ENV_HOME environment variable on Linux', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			const oldEnvHome = process.env.WP_ENV_HOME;
-			const oldOsPlatform = os.platform;
-			os.platform = () => 'linux';
-
-			expect.assertions( 2 );
-
-			process.env.WP_ENV_HOME = 'here/is/a/path';
-			const configWith = await readConfig( '.wp-env.json' );
-			expect(
-				configWith.workDirectoryPath.includes(
-					join( 'here', 'is', 'a', 'path' )
-				)
-			).toBe( true );
-
-			process.env.WP_ENV_HOME = undefined;
-			const configWithout = await readConfig( '.wp-env.json' );
-			expect(
-				configWithout.workDirectoryPath.includes(
-					join( 'here', 'is', 'a', 'path' )
-				)
-			).toBe( false );
-
-			process.env.WP_ENV_HOME = oldEnvHome;
-			os.platform = oldOsPlatform;
-		} );
-
-		it( 'should use a non-private folder with Snap-installed Docker', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			stat.mockReturnValue( Promise.resolve( true ) );
-
-			expect.assertions( 2 );
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.workDirectoryPath.includes( '.wp-env' ) ).toBe(
-				false
-			);
-			expect( config.workDirectoryPath.includes( 'wp-env' ) ).toBe(
-				true
-			);
-		} );
-
-		it( 'should match snapshot', async () => {
-			// Note: did not add sources to this config because they include absolute
-			// paths which would be different elsewhere.
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						port: 2000,
-						config: {
-							TEST_VAL1: 1,
-							TEST_VAL2: 'hello',
-							TEST_VAL3: false,
-						},
-						env: {
-							development: {
-								config: {
-									TEST: 100,
-								},
-							},
-							tests: {
-								port: 1000,
-								config: {
-									TEST: 200,
-								},
-							},
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			// Remove generated values which are different on other machines.
-			delete config.dockerComposeConfigPath;
-			delete config.workDirectoryPath;
-
-			// This encodes both the version of WordPress (which can change frequently)
-			// as well as the wp-env directory which is unique on every machine.
-			delete config.env.development.coreSource;
-			delete config.env.tests.coreSource;
-			expect( config ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'source parsing', () => {
-		it( "should throw a validation error if 'core' is not a string", async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( { core: 123 } ) )
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain( 'must be null or a string' );
-			}
-		} );
-
-		it( "should throw a validation error if 'plugins' is not an array of strings", async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( { plugins: [ 'test', 123 ] } )
-				)
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'must be an array of strings'
-				);
-			}
-		} );
-
-		it( "should throw a validation error if 'themes' is not an array of strings", async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( { themes: [ 'test', 123 ] } ) )
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'must be an array of strings'
-				);
-			}
-		} );
-
-		it( 'should parse local sources', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						plugins: [
-							'./relative',
-							'../parent',
-							`${ os.homedir() }/home`,
-						],
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-
-			expect( config.env.development ).toMatchObject( {
-				pluginSources: [
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*relative$/ ),
-						basename: 'relative',
-					},
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*parent$/ ),
-						basename: 'parent',
-					},
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*home$/ ),
-						basename: 'home',
-					},
-				],
-			} );
-			expect( config.env.tests ).toMatchObject( {
-				pluginSources: [
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*relative$/ ),
-						basename: 'relative',
-					},
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*parent$/ ),
-						basename: 'parent',
-					},
-					{
-						type: 'local',
-						path: expect.stringMatching( /^(\/|\\).*home$/ ),
-						basename: 'home',
-					},
-				],
-			} );
-		} );
-
-		it( 'should override plugins/themes on an environment level', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						plugins: [ './test1', './foo2' ],
-						themes: [ './test2', './foo' ],
-						env: {
-							development: {
-								plugins: [ './test1a' ],
-								themes: [ './test2a' ],
-							},
-							tests: {
-								plugins: [ './test1b' ],
-								themes: [ './test2b' ],
-							},
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.pluginSources ).toEqual( [
-				{
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*test1a$/ ),
-					basename: 'test1a',
-				},
-			] );
-			expect( config.env.development.themeSources ).toEqual( [
-				{
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*test2a$/ ),
-					basename: 'test2a',
-				},
-			] );
-			expect( config.env.tests.pluginSources ).toEqual( [
-				{
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*test1b$/ ),
-					basename: 'test1b',
-				},
-			] );
-			expect( config.env.tests.themeSources ).toEqual( [
-				{
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*test2b$/ ),
-					basename: 'test2b',
-				},
-			] );
-		} );
-
-		it( "should set testsPath on the 'core' source", async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( { core: './relative' } ) )
-			);
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development ).toMatchObject( {
-				coreSource: {
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*relative$/ ),
-					testsPath: expect.stringMatching(
-						/^(\/|\\).*tests-relative$/
-					),
-				},
-			} );
-			expect( config.env.tests ).toMatchObject( {
-				coreSource: {
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*relative$/ ),
-					testsPath: expect.stringMatching(
-						/^(\/|\\).*tests-relative$/
-					),
-				},
-			} );
-		} );
-
-		it( 'should parse GitHub sources', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						plugins: [
-							'WordPress/gutenberg',
-							'WordPress/gutenberg#trunk',
-							'WordPress/gutenberg#5.0',
-							'WordPress/theme-experiments/tt1-blocks#tt1-blocks@0.4.3',
-						],
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			const matchObj = {
-				pluginSources: [
-					{
-						type: 'git',
-						url: 'https://github.com/WordPress/gutenberg.git',
-						ref: undefined,
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'git',
-						url: 'https://github.com/WordPress/gutenberg.git',
-						ref: 'trunk',
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'git',
-						url: 'https://github.com/WordPress/gutenberg.git',
-						ref: '5.0',
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'git',
-						url: 'https://github.com/WordPress/theme-experiments.git',
-						ref: 'tt1-blocks@0.4.3',
-						path: expect.stringMatching(
-							/^(\/|\\).*theme-experiments(\/|\\)tt1-blocks$/
-						),
-						basename: 'tt1-blocks',
-					},
-				],
-			};
-			expect( config.env.tests ).toMatchObject( matchObj );
-			expect( config.env.development ).toMatchObject( matchObj );
-		} );
-
-		it( 'should parse wordpress.org sources', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						plugins: [
-							'https://downloads.wordpress.org/plugin/gutenberg.zip',
-							'https://downloads.wordpress.org/plugin/gutenberg.8.1.0.zip',
-							'https://downloads.wordpress.org/theme/twentytwenty.zip',
-							'https://downloads.wordpress.org/theme/twentytwenty.1.3.zip',
-						],
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			const matchObj = {
-				pluginSources: [
-					{
-						type: 'zip',
-						url: 'https://downloads.wordpress.org/plugin/gutenberg.zip',
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'zip',
-						url: 'https://downloads.wordpress.org/plugin/gutenberg.8.1.0.zip',
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'zip',
-						url: 'https://downloads.wordpress.org/theme/twentytwenty.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*twentytwenty$/
-						),
-						basename: 'twentytwenty',
-					},
-					{
-						type: 'zip',
-						url: 'https://downloads.wordpress.org/theme/twentytwenty.1.3.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*twentytwenty$/
-						),
-						basename: 'twentytwenty',
-					},
-				],
-			};
-			expect( config.env.development ).toMatchObject( matchObj );
-			expect( config.env.tests ).toMatchObject( matchObj );
-		} );
-
-		it( 'should parse zip sources', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						plugins: [
-							'https://www.example.com/test/path/to/gutenberg.zip',
-							'https://www.example.com/test/path/to/gutenberg.8.1.0.zip',
-							'https://www.example.com/test/path/to/gutenberg.8.1.0.zip?auth=thisIsAString&token=secondString',
-							'https://www.example.com/test/path/to/twentytwenty.zip',
-							'https://www.example.com/test/path/to/twentytwenty.1.3.zip',
-							'https://example.com/twentytwenty.1.3.zip',
-						],
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			const matchObj = {
-				pluginSources: [
-					{
-						type: 'zip',
-						url: 'https://www.example.com/test/path/to/gutenberg.zip',
-						path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-						basename: 'gutenberg',
-					},
-					{
-						type: 'zip',
-						url: 'https://www.example.com/test/path/to/gutenberg.8.1.0.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*gutenberg.8.1.0$/
-						),
-						basename: 'gutenberg.8.1.0',
-					},
-					{
-						type: 'zip',
-						url: 'https://www.example.com/test/path/to/gutenberg.8.1.0.zip?auth=thisIsAString&token=secondString',
-						path: expect.stringMatching(
-							/^(\/|\\).*gutenberg.8.1.0$/
-						),
-						basename: 'gutenberg.8.1.0',
-					},
-					{
-						type: 'zip',
-						url: 'https://www.example.com/test/path/to/twentytwenty.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*twentytwenty$/
-						),
-						basename: 'twentytwenty',
-					},
-					{
-						type: 'zip',
-						url: 'https://www.example.com/test/path/to/twentytwenty.1.3.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*twentytwenty.1.3$/
-						),
-						basename: 'twentytwenty.1.3',
-					},
-					{
-						type: 'zip',
-						url: 'https://example.com/twentytwenty.1.3.zip',
-						path: expect.stringMatching(
-							/^(\/|\\).*twentytwenty.1.3$/
-						),
-						basename: 'twentytwenty.1.3',
-					},
-				],
-			};
-			expect( config.env.development ).toMatchObject( matchObj );
-			expect( config.env.tests ).toMatchObject( matchObj );
-		} );
-
-		it( 'should throw a validaton error if there is an unknown source', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( { plugins: [ 'invalid' ] } ) )
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid or unrecognized source'
-				);
-			}
-		} );
-	} );
-
-	describe( 'mappings parsing', () => {
-		it( 'should parse mappings into sources', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						mappings: {
-							test: './relative',
-							test2: 'WordPress/gutenberg#trunk',
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			const matchObj = {
-				test: {
-					type: 'local',
-					path: expect.stringMatching( /^(\/|\\).*relative$/ ),
-					basename: 'relative',
-				},
-				test2: {
-					type: 'git',
-					path: expect.stringMatching( /^(\/|\\).*gutenberg$/ ),
-					basename: 'gutenberg',
-				},
-			};
-			expect( config.env.development.mappings ).toMatchObject( matchObj );
-			expect( config.env.development.mappings ).toMatchObject( matchObj );
-		} );
-
-		it( 'should throw a validaton error if there is an invalid mapping', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( { mappings: { test: 'false' } } )
-				)
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid or unrecognized source'
-				);
-			}
-		} );
-
-		it( 'throws an error if a mapping is badly formatted', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						mappings: { test: null },
-					} )
-				)
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid .wp-env.json: "mappings.test" should be a string.'
-				);
-			}
-		} );
-
-		it( 'throws an error if mappings is not an object', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						mappings: 'not object',
-					} )
-				)
-			);
-			expect.assertions( 2 );
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid .wp-env.json: "mappings" must be an object.'
-				);
-			}
-		} );
-
-		it( 'should return an empty mappings object if none are passed', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( { mappings: {} } ) )
-			);
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.mappings ).toEqual( {} );
-			expect( config.env.tests.mappings ).toEqual( {} );
-		} );
-
-		it( 'should merge mappings from different environments', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						mappings: {
-							test1: '/test1',
-						},
-						env: {
-							tests: {
-								mappings: {
-									test2: '/test2',
-								},
-							},
-							development: {
-								mappings: {
-									test3: '/test3',
-								},
-							},
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.mappings ).toEqual( {
-				test1: {
-					basename: 'test1',
-					// resolve is required to remove drive letters on Windows.
-					path: resolve( '/test1' ),
-					type: 'local',
-				},
-				test3: {
-					basename: 'test3',
-					path: resolve( '/test3' ),
-					type: 'local',
-				},
-			} );
-			expect( config.env.tests.mappings ).toEqual( {
-				test1: {
-					basename: 'test1',
-					path: resolve( '/test1' ),
-					type: 'local',
-				},
-				test2: {
-					basename: 'test2',
-					path: resolve( '/test2' ),
-					type: 'local',
-				},
-			} );
-		} );
-
-		it( 'should override less specific mappings with more specific mappings', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						mappings: {
-							test: '/test1',
-						},
-						env: {
-							tests: {
-								mappings: {
-									test: '/test2',
-								},
-							},
-							development: {
-								mappings: {
-									test: '/test3',
-								},
-							},
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.mappings ).toEqual( {
-				test: {
-					basename: 'test3',
-					path: resolve( '/test3' ),
-					type: 'local',
-				},
-			} );
-			expect( config.env.tests.mappings ).toEqual( {
-				test: {
-					basename: 'test2',
-					path: resolve( '/test2' ),
-					type: 'local',
-				},
-			} );
-		} );
-	} );
-
-	describe( 'port number parsing', () => {
-		it( 'should throw a validaton error if the ports are not numbers', async () => {
-			expect.assertions( 10 );
-			await testPortNumberValidation( 'port', 'string' );
-			await testPortNumberValidation( 'testsPort', [], 'env.tests.' );
-			await testPortNumberValidation( 'port', {} );
-			await testPortNumberValidation( 'testsPort', false, 'env.tests.' );
-			await testPortNumberValidation( 'port', null );
-		} );
-
-		it( 'should throw a validaton error if the ports are the same', async () => {
-			expect.assertions( 2 );
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( { port: 8888, testsPort: 8888 } )
-				)
-			);
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid .wp-env.json: Each port value must be unique.'
-				);
-			}
-		} );
-
-		it( 'should parse custom ports', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						port: 1000,
-						testsPort: 2000,
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
-			expect( config ).toMatchObject( {
-				env: {
-					development: {
-						port: 1000,
-					},
-					tests: {
-						port: 2000,
-					},
-				},
-			} );
-		} );
-
-		it( 'certain wp-config values should include the port number', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						port: 1000,
-						testsPort: 2000,
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
-			expect( config ).toMatchObject( {
-				env: {
-					development: {
-						port: 1000,
-						config: {
-							WP_TESTS_DOMAIN: 'localhost',
-							WP_SITEURL: 'http://localhost:1000/',
-							WP_HOME: 'http://localhost:1000/',
-						},
-					},
-					tests: {
-						port: 2000,
-						config: {
-							WP_TESTS_DOMAIN: 'localhost',
-							WP_SITEURL: 'http://localhost:2000/',
-							WP_HOME: 'http://localhost:2000/',
-						},
-					},
-				},
-			} );
-		} );
-
-		it( 'should not overwrite port number for WP_HOME if set', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						port: 1000,
-						testsPort: 2000,
-						config: {
-							WP_HOME: 'http://localhost:3000/',
-						},
-					} )
-				)
-			);
-			const config = await readConfig( '.wp-env.json' );
-			// Custom port is overriden while testsPort gets the deault value.
-			expect( config ).toMatchObject( {
-				env: {
-					development: {
-						port: 1000,
-						config: {
-							WP_TESTS_DOMAIN: 'localhost',
-							WP_SITEURL: 'http://localhost:1000/',
-							WP_HOME: 'http://localhost:3000/',
-						},
-					},
-					tests: {
-						port: 2000,
-						config: {
-							WP_TESTS_DOMAIN: 'localhost',
-							WP_SITEURL: 'http://localhost:2000/',
-							WP_HOME: 'http://localhost:3000/',
-						},
-					},
-				},
-			} );
-		} );
-
-		it( 'should throw an error if the port number environment variable is invalid', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			const oldPort = process.env.WP_ENV_PORT;
-			process.env.WP_ENV_PORT = 'hello';
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid environment variable: WP_ENV_PORT must be a number.'
-				);
-			}
-			process.env.WP_ENV_PORT = oldPort;
-		} );
-
-		it( 'should throw an error if the tests port number environment variable is invalid', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-			const oldPort = process.env.WP_ENV_TESTS_PORT;
-			process.env.WP_ENV_TESTS_PORT = 'hello';
-			try {
-				await readConfig( '.wp-env.json' );
-			} catch ( error ) {
-				expect( error ).toBeInstanceOf( ValidationError );
-				expect( error.message ).toContain(
-					'Invalid environment variable: WP_ENV_TESTS_PORT must be a number.'
-				);
-			}
-			process.env.WP_ENV_TESTS_PORT = oldPort;
-		} );
-
-		it( 'should use port environment values rather than config values if both are defined', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						port: 1000,
-						testsPort: 2000,
-					} )
-				)
-			);
-			const oldPort = process.env.WP_ENV_PORT;
-			const oldTestsPort = process.env.WP_ENV_TESTS_PORT;
-			process.env.WP_ENV_PORT = 4000;
-			process.env.WP_ENV_TESTS_PORT = 3000;
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config ).toMatchObject( {
-				env: {
-					development: {
-						port: 4000,
-					},
-					tests: {
-						port: 3000,
-					},
-				},
-			} );
-
-			process.env.WP_ENV_PORT = oldPort;
-			process.env.WP_ENV_TESTS_PORT = oldTestsPort;
-		} );
-
-		it( 'should use 8888 and 8889 as the default port and testsPort values if nothing else is specified', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve( JSON.stringify( {} ) )
-			);
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config ).toMatchObject( {
-				env: {
-					development: {
-						port: 8888,
-					},
-					tests: {
-						port: 8889,
-					},
-				},
-			} );
-		} );
-	} );
-
-	describe( 'wp config values', () => {
-		it( 'should use default config values', async () => {
-			const config = await readConfig( '.wp-env.json' );
-
-			expect( config.env.tests.config ).toMatchSnapshot();
-			expect( config.env.development.config ).toMatchSnapshot();
-		} );
-
-		it( 'should override default config values when some are specified', async () => {
-			const testValue = 'new value';
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						config: {
-							SCRIPT_DEBUG: testValue,
-						},
-					} )
-				)
-			);
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.tests.config.SCRIPT_DEBUG ).toBe( testValue );
-			expect( config.env.development.config.SCRIPT_DEBUG ).toBe(
-				testValue
-			);
-		} );
-
-		it( 'should override config values using the .override file first', async () => {
-			readFile.mockImplementation( ( filename ) => {
-				let result;
-				if ( filename === '.wp-env.json' ) {
-					result = {
-						config: {
-							SCRIPT_DEBUG: '1',
-						},
-					};
-				} else if ( filename === '.wp-env.override.json' ) {
-					result = {
-						config: {
-							SCRIPT_DEBUG: '2',
-						},
-					};
-				}
-				return Promise.resolve( JSON.stringify( result ) );
-			} );
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.tests.config.SCRIPT_DEBUG ).toBe( '2' );
-			expect( config.env.development.config.SCRIPT_DEBUG ).toBe( '2' );
-		} );
-
-		it( 'should override config values using the environment option from the .override file after the general option', async () => {
-			readFile.mockImplementation( ( filename ) => {
-				let result;
-				if ( filename === '.wp-env.json' ) {
-					result = {
-						config: {
-							SCRIPT_DEBUG: '1',
-						},
-						env: {
-							tests: {
-								config: {
-									SCRIPT_DEBUG: '0',
-								},
-							},
-							development: {
-								config: {
-									SCRIPT_DEBUG: '0',
-								},
-							},
-						},
-					};
-				} else if ( filename === '.wp-env.override.json' ) {
-					result = {
-						config: {
-							SCRIPT_DEBUG: '2',
-						},
-						env: {
-							tests: {
-								config: {
-									SCRIPT_DEBUG: '3',
-								},
-							},
-							development: {
-								config: {
-									SCRIPT_DEBUG: '4',
-								},
-							},
-						},
-					};
-				}
-				return Promise.resolve( JSON.stringify( result ) );
-			} );
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.tests.config.SCRIPT_DEBUG ).toBe( '3' );
-			expect( config.env.development.config.SCRIPT_DEBUG ).toBe( '4' );
-		} );
-
-		it( 'should override config values using the environment option after the general option', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						config: {
-							SCRIPT_DEBUG: '1',
-						},
-						env: {
-							tests: {
-								config: {
-									SCRIPT_DEBUG: '2',
-								},
-							},
-							development: {
-								config: {
-									SCRIPT_DEBUG: '4',
-								},
-							},
-						},
-					} )
-				)
-			);
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.tests.config.SCRIPT_DEBUG ).toBe( '2' );
-			expect( config.env.development.config.SCRIPT_DEBUG ).toBe( '4' );
-		} );
-
-		it( 'should merge config values without overwriting an entire section', async () => {
-			readFile.mockImplementation( () =>
-				Promise.resolve(
-					JSON.stringify( {
-						config: {
-							SCRIPT_DEBUG: '1',
-							TEST: '2',
-						},
-						env: {
-							tests: {
-								config: {
-									SCRIPT_DEBUG: '2',
-									TEST3: 'foo',
-								},
-							},
-							development: {
-								config: {
-									SCRIPT_DEBUG: '4',
-									TEST5: 5,
-								},
-							},
-						},
-					} )
-				)
-			);
-
-			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.tests.config ).toEqual( {
-				SCRIPT_DEBUG: '2',
-				TEST3: 'foo',
-				TEST: '2',
-				WP_DEBUG: false,
-				WP_ENVIRONMENT_TYPE: 'local',
-				WP_PHP_BINARY: 'php',
-				WP_TESTS_EMAIL: 'admin@example.org',
-				WP_TESTS_TITLE: 'Test Blog',
-				WP_TESTS_DOMAIN: 'localhost',
-				WP_SITEURL: 'http://localhost:8889/',
-				WP_HOME: 'http://localhost:8889/',
-			} );
-
-			expect( config.env.development.config ).toEqual( {
-				SCRIPT_DEBUG: '4',
-				TEST5: 5,
-				TEST: '2',
-				WP_DEBUG: true,
-				WP_ENVIRONMENT_TYPE: 'local',
-				WP_PHP_BINARY: 'php',
-				WP_TESTS_EMAIL: 'admin@example.org',
-				WP_TESTS_TITLE: 'Test Blog',
-				WP_TESTS_DOMAIN: 'localhost',
-				WP_SITEURL: 'http://localhost:8888/',
-				WP_HOME: 'http://localhost:8888/',
-			} );
-		} );
-	} );
-} );
-
-/**
- * Tests that readConfig will throw errors when invalid port numbers are passed.
- *
- * @param {string} portName The name of the port to test ('port' or 'testsPort')
- * @param {any}    value    A value which should throw an error.
- * @param {string} envText  Env text which prefixes the error.
- */
-async function testPortNumberValidation( portName, value, envText = '' ) {
-	readFile.mockImplementation( () =>
-		Promise.resolve( JSON.stringify( { [ portName ]: value } ) )
-	);
-	try {
-		await readConfig( '.wp-env.json' );
-	} catch ( error ) {
-		// Useful for debugging:
-		if ( ! ( error instanceof ValidationError ) ) {
-			throw error;
-		}
-		expect( error ).toBeInstanceOf( ValidationError );
-		expect( error.message ).toContain(
-			`Invalid .wp-env.json: "${ envText }port" must be an integer.`
-		);
-	}
-	jest.clearAllMocks();
-}
-/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/lib/config/test/get-cache-directory.js b/packages/env/lib/config/test/get-cache-directory.js
new file mode 100644
index 00000000000000..c93589a4c31505
--- /dev/null
+++ b/packages/env/lib/config/test/get-cache-directory.js
@@ -0,0 +1,57 @@
+'use strict';
+/* eslint-disable jest/no-conditional-expect */
+/**
+ * External dependencies
+ */
+const { stat } = require( 'fs' ).promises;
+const { homedir } = require( 'os' );
+
+/**
+ * Internal dependencies
+ */
+const getCacheDirectory = require( '../get-cache-directory' );
+
+jest.mock( 'fs', () => ( {
+	promises: {
+		stat: jest.fn(),
+	},
+} ) );
+jest.mock( 'os', () => ( {
+	homedir: jest.fn(),
+} ) );
+
+describe( 'getCacheDirectory', () => {
+	afterEach( () => {
+		delete process.env.WP_ENV_HOME;
+	} );
+
+	it( 'uses WP_ENV_HOME for cache directory when set', async () => {
+		process.env.WP_ENV_HOME = '/test';
+
+		const parsed = await getCacheDirectory();
+
+		expect( homedir ).not.toHaveBeenCalled();
+		expect( parsed ).toEqual( '/test' );
+	} );
+
+	it( 'uses hidden home directory for cache', async () => {
+		stat.mockRejectedValue( false );
+		homedir.mockReturnValue( '/home/test' );
+
+		const parsed = await getCacheDirectory();
+
+		expect( homedir ).toHaveBeenCalled();
+		expect( parsed ).toEqual( '/home/test/.wp-env' );
+	} );
+
+	it( 'uses non-hidden cache directory when using Snap-installed Docker', async () => {
+		stat.mockResolvedValue( true );
+		homedir.mockReturnValue( '/home/test' );
+
+		const parsed = await getCacheDirectory();
+
+		expect( homedir ).toHaveBeenCalled();
+		expect( parsed ).toEqual( '/home/test/wp-env' );
+	} );
+} );
+/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/lib/config/test/merge-configs.js b/packages/env/lib/config/test/merge-configs.js
new file mode 100644
index 00000000000000..cc3a0cbecf5a39
--- /dev/null
+++ b/packages/env/lib/config/test/merge-configs.js
@@ -0,0 +1,121 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const mergeConfigs = require( '../merge-configs' );
+
+describe( 'mergeConfigs', () => {
+	it( 'should merge configs without environments', () => {
+		const merged = mergeConfigs(
+			{
+				port: 8888,
+				coreSource: {
+					type: 'local',
+					path: '/home/test',
+				},
+				config: {
+					WP_TEST: 'test',
+				},
+				lifecycleScripts: {
+					afterStart: 'test',
+				},
+			},
+			{
+				port: 8889,
+				config: {
+					WP_TEST_2: 'test-2',
+				},
+				lifecycleScripts: {
+					afterDestroy: 'test-2',
+				},
+			}
+		);
+
+		expect( merged ).toEqual( {
+			port: 8889,
+			coreSource: {
+				type: 'local',
+				path: '/home/test',
+			},
+			config: {
+				WP_TEST: 'test',
+				WP_TEST_2: 'test-2',
+			},
+			lifecycleScripts: {
+				afterStart: 'test',
+				afterDestroy: 'test-2',
+			},
+		} );
+	} );
+
+	it( 'should merge configs with environments', () => {
+		const merged = mergeConfigs(
+			{
+				port: 8888,
+				coreSource: {
+					type: 'local',
+					path: '/home/test',
+				},
+				config: {
+					WP_TEST: 'test',
+				},
+				env: {
+					development: {
+						config: {
+							WP_TEST_3: 'test-3',
+						},
+					},
+					tests: {
+						config: {
+							WP_TEST_4: 'test-4',
+						},
+					},
+				},
+			},
+			{
+				port: 8889,
+				config: {
+					WP_TEST_2: 'test-2',
+				},
+				env: {
+					development: {
+						config: {
+							WP_TEST_5: 'test-5',
+						},
+					},
+					tests: {
+						config: {
+							WP_TEST_6: 'test-6',
+						},
+					},
+				},
+			}
+		);
+
+		expect( merged ).toEqual( {
+			port: 8889,
+			coreSource: {
+				type: 'local',
+				path: '/home/test',
+			},
+			config: {
+				WP_TEST: 'test',
+				WP_TEST_2: 'test-2',
+			},
+			env: {
+				development: {
+					config: {
+						WP_TEST_3: 'test-3',
+						WP_TEST_5: 'test-5',
+					},
+				},
+				tests: {
+					config: {
+						WP_TEST_4: 'test-4',
+						WP_TEST_6: 'test-6',
+					},
+				},
+			},
+		} );
+	} );
+} );
diff --git a/packages/env/lib/config/test/parse-config.js b/packages/env/lib/config/test/parse-config.js
new file mode 100644
index 00000000000000..38e4db9860cb3c
--- /dev/null
+++ b/packages/env/lib/config/test/parse-config.js
@@ -0,0 +1,403 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const { parseConfig } = require( '../parse-config' );
+const readRawConfigFile = require( '../read-raw-config-file' );
+const { getLatestWordPressVersion } = require( '../../wordpress' );
+const { ValidationError } = require( '../validate-config' );
+const detectDirectoryType = require( '../detect-directory-type' );
+
+jest.mock( 'got', () => jest.fn() );
+jest.mock( '../read-raw-config-file', () => jest.fn() );
+jest.mock( '../detect-directory-type', () => jest.fn() );
+jest.mock( '../../wordpress', () => ( {
+	getLatestWordPressVersion: jest.fn(),
+} ) );
+
+/**
+ * Since our configurations are merged, we will want to refer to the parsed default config frequently.
+ */
+const DEFAULT_CONFIG = {
+	port: 8888,
+	testsPort: 8889,
+	mysqlPort: null,
+	phpVersion: null,
+	coreSource: {
+		type: 'git',
+		url: 'https://github.com/WordPress/WordPress.git',
+		ref: '100.0.0',
+		path: '/cache/WordPress',
+		clonePath: '/cache/WordPress',
+		basename: 'WordPress',
+		testsPath: '/cache/tests-WordPress',
+	},
+	pluginSources: [],
+	themeSources: [],
+	config: {
+		FS_METHOD: 'direct',
+		WP_DEBUG: true,
+		SCRIPT_DEBUG: true,
+		WP_ENVIRONMENT_TYPE: 'local',
+		WP_PHP_BINARY: 'php',
+		WP_TESTS_EMAIL: 'admin@example.org',
+		WP_TESTS_TITLE: 'Test Blog',
+		WP_TESTS_DOMAIN: 'localhost',
+		WP_SITEURL: 'http://localhost',
+		WP_HOME: 'http://localhost',
+	},
+	mappings: {},
+	lifecycleScripts: {
+		afterStart: null,
+		afterClean: null,
+		afterDestroy: null,
+	},
+	env: {
+		development: {},
+		tests: {
+			config: {
+				WP_DEBUG: false,
+				SCRIPT_DEBUG: false,
+			},
+		},
+	},
+};
+
+describe( 'parseConfig', () => {
+	beforeEach( () => {
+		readRawConfigFile.mockResolvedValue( null );
+		detectDirectoryType.mockResolvedValue( null );
+		getLatestWordPressVersion.mockResolvedValue( '100.0.0' );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+		delete process.env.WP_ENV_PORT;
+		delete process.env.WP_ENV_TESTS_PORT;
+		delete process.env.WP_ENV_CORE;
+		delete process.env.WP_ENV_PHP_VERSION;
+		delete process.env.WP_ENV_LIFECYCLE_SCRIPT_AFTER_START;
+	} );
+
+	it( 'should return default config', async () => {
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed ).toEqual( DEFAULT_CONFIG );
+	} );
+
+	it( 'should infer a core mounting default when ran from a WordPress directory', async () => {
+		detectDirectoryType.mockResolvedValue( 'core' );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed.pluginSources ).toHaveLength( 0 );
+		expect( parsed.themeSources ).toHaveLength( 0 );
+		expect( parsed.coreSource ).toMatchObject( { type: 'local' } );
+	} );
+
+	it( 'should infer a plugin mounting default when ran from a plugin directory', async () => {
+		detectDirectoryType.mockResolvedValue( 'plugin' );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed.coreSource ).toMatchObject( { type: 'git' } );
+		expect( parsed.themeSources ).toHaveLength( 0 );
+		expect( parsed.pluginSources ).toHaveLength( 1 );
+		expect( parsed.pluginSources[ 0 ] ).toMatchObject( { type: 'local' } );
+	} );
+
+	it( 'should infer a theme mounting default when ran from a theme directory', async () => {
+		detectDirectoryType.mockResolvedValue( 'theme' );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed.coreSource ).toMatchObject( { type: 'git' } );
+		expect( parsed.pluginSources ).toHaveLength( 0 );
+		expect( parsed.themeSources ).toHaveLength( 1 );
+		expect( parsed.themeSources[ 0 ] ).toMatchObject( { type: 'local' } );
+	} );
+
+	it( 'should merge configs with precedence', async () => {
+		readRawConfigFile.mockImplementation( async ( configFile ) => {
+			if ( configFile === '/test/gutenberg/.wp-env.json' ) {
+				return {
+					core: 'WordPress/WordPress#Test',
+					phpVersion: '1.0',
+					lifecycleScripts: {
+						afterStart: 'test',
+					},
+					env: {
+						development: {
+							port: 1234,
+						},
+						tests: {
+							port: 5678,
+						},
+					},
+				};
+			}
+
+			if ( configFile === '/test/gutenberg/.wp-env.override.json' ) {
+				return {
+					phpVersion: '2.0',
+					lifecycleScripts: {
+						afterDestroy: 'test',
+					},
+					env: {
+						tests: {
+							port: 1011,
+						},
+					},
+				};
+			}
+
+			throw new Error( 'Invalid File: ' + configFile );
+		} );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		const expected = {
+			...DEFAULT_CONFIG,
+			coreSource: {
+				basename: 'WordPress',
+				path: '/cache/WordPress',
+				clonePath: '/cache/WordPress',
+				ref: 'Test',
+				testsPath: '/cache/tests-WordPress',
+				url: 'https://github.com/WordPress/WordPress.git',
+				type: 'git',
+			},
+			phpVersion: '2.0',
+			lifecycleScripts: {
+				...DEFAULT_CONFIG.lifecycleScripts,
+				afterStart: 'test',
+				afterDestroy: 'test',
+			},
+			env: {
+				development: {
+					...DEFAULT_CONFIG.env.development,
+					port: 1234,
+				},
+				tests: {
+					...DEFAULT_CONFIG.env.tests,
+					port: 1011,
+				},
+			},
+		};
+		expect( parsed ).toEqual( expected );
+	} );
+
+	it( 'should parse core, plugin, theme, and mapping sources', async () => {
+		readRawConfigFile.mockImplementation( async ( configFile ) => {
+			if ( configFile === '/test/gutenberg/.wp-env.json' ) {
+				return {
+					core: 'WordPress/WordPress#Test',
+					plugins: [ 'WordPress/TestPlugin#Test' ],
+					themes: [ 'WordPress/TestTheme#Test' ],
+					mappings: {
+						'/var/www/html/wp-content/plugins/test-mapping':
+							'WordPress/TestMapping#Test',
+					},
+				};
+			}
+
+			if ( configFile === '/test/gutenberg/.wp-env.override.json' ) {
+				return {};
+			}
+
+			throw new Error( 'Invalid File: ' + configFile );
+		} );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed ).toEqual( {
+			...DEFAULT_CONFIG,
+			coreSource: {
+				basename: 'WordPress',
+				path: '/cache/WordPress',
+				clonePath: '/cache/WordPress',
+				ref: 'Test',
+				testsPath: '/cache/tests-WordPress',
+				url: 'https://github.com/WordPress/WordPress.git',
+				type: 'git',
+			},
+			pluginSources: [
+				{
+					basename: 'TestPlugin',
+					path: '/cache/TestPlugin',
+					clonePath: '/cache/TestPlugin',
+					ref: 'Test',
+					url: 'https://github.com/WordPress/TestPlugin.git',
+					type: 'git',
+				},
+			],
+			themeSources: [
+				{
+					basename: 'TestTheme',
+					path: '/cache/TestTheme',
+					clonePath: '/cache/TestTheme',
+					ref: 'Test',
+					url: 'https://github.com/WordPress/TestTheme.git',
+					type: 'git',
+				},
+			],
+			mappings: {
+				'/var/www/html/wp-content/plugins/test-mapping': {
+					basename: 'TestMapping',
+					path: '/cache/TestMapping',
+					clonePath: '/cache/TestMapping',
+					ref: 'Test',
+					url: 'https://github.com/WordPress/TestMapping.git',
+					type: 'git',
+				},
+			},
+		} );
+	} );
+
+	it( 'should ignore `$schema` key', async () => {
+		readRawConfigFile.mockImplementation( async ( configFile ) => {
+			if ( configFile === '/test/gutenberg/.wp-env.json' ) {
+				return {
+					$schema: 'test',
+				};
+			}
+
+			if ( configFile === '/test/gutenberg/.wp-env.override.json' ) {
+				return {};
+			}
+
+			throw new Error( 'Invalid File: ' + configFile );
+		} );
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed ).toEqual( DEFAULT_CONFIG );
+	} );
+
+	it( 'should override with environment variables', async () => {
+		process.env.WP_ENV_PORT = 123;
+		process.env.WP_ENV_TESTS_PORT = 456;
+		process.env.WP_ENV_CORE = 'WordPress/WordPress#test';
+		process.env.WP_ENV_PHP_VERSION = '3.0';
+		process.env.WP_ENV_LIFECYCLE_SCRIPT_AFTER_START = 'test after';
+
+		const parsed = await parseConfig( '/test/gutenberg', '/cache' );
+
+		expect( parsed ).toEqual( {
+			...DEFAULT_CONFIG,
+			port: 123,
+			testsPort: 456,
+			coreSource: {
+				basename: 'WordPress',
+				path: '/cache/WordPress',
+				clonePath: '/cache/WordPress',
+				ref: 'test',
+				testsPath: '/cache/tests-WordPress',
+				url: 'https://github.com/WordPress/WordPress.git',
+				type: 'git',
+			},
+			phpVersion: '3.0',
+			lifecycleScripts: {
+				...DEFAULT_CONFIG.lifecycleScripts,
+				afterStart: 'test after',
+			},
+			env: {
+				development: {
+					port: 123,
+					phpVersion: '3.0',
+					coreSource: {
+						basename: 'WordPress',
+						path: '/cache/WordPress',
+						clonePath: '/cache/WordPress',
+						ref: 'test',
+						testsPath: '/cache/tests-WordPress',
+						url: 'https://github.com/WordPress/WordPress.git',
+						type: 'git',
+					},
+				},
+				tests: {
+					port: 456,
+					phpVersion: '3.0',
+					coreSource: {
+						basename: 'WordPress',
+						path: '/cache/WordPress',
+						clonePath: '/cache/WordPress',
+						ref: 'test',
+						testsPath: '/cache/tests-WordPress',
+						url: 'https://github.com/WordPress/WordPress.git',
+						type: 'git',
+					},
+					config: {
+						WP_DEBUG: false,
+						SCRIPT_DEBUG: false,
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'throws when latest WordPress version needed but not found', async () => {
+		getLatestWordPressVersion.mockResolvedValue( null );
+
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				'Could not find the latest WordPress version. There may be a network issue.'
+			)
+		);
+	} );
+
+	it( 'throws for unknown config options', async () => {
+		readRawConfigFile.mockImplementation( async ( configFile ) => {
+			if ( configFile === '/test/gutenberg/.wp-env.json' ) {
+				return {
+					test: 'test',
+				};
+			}
+
+			if ( configFile === '/test/gutenberg/.wp-env.override.json' ) {
+				return {};
+			}
+
+			throw new Error( 'Invalid File: ' + configFile );
+		} );
+
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				`Invalid /test/gutenberg/.wp-env.json: "test" is not a configuration option.`
+			)
+		);
+	} );
+
+	it( 'throws for root-only config options', async () => {
+		readRawConfigFile.mockImplementation( async ( configFile ) => {
+			if ( configFile === '/test/gutenberg/.wp-env.json' ) {
+				return {
+					env: {
+						development: {
+							// Only the root can have environment-specific configurations.
+							env: {},
+						},
+					},
+				};
+			}
+
+			if ( configFile === '/test/gutenberg/.wp-env.override.json' ) {
+				return {};
+			}
+
+			throw new Error( 'Invalid File: ' + configFile );
+		} );
+
+		await expect(
+			parseConfig( '/test/gutenberg', '/cache' )
+		).rejects.toEqual(
+			new ValidationError(
+				`Invalid /test/gutenberg/.wp-env.json: "development.env" is not a configuration option.`
+			)
+		);
+	} );
+} );
diff --git a/packages/env/lib/config/test/parse-source-string.js b/packages/env/lib/config/test/parse-source-string.js
new file mode 100644
index 00000000000000..acaec8bd5af4ba
--- /dev/null
+++ b/packages/env/lib/config/test/parse-source-string.js
@@ -0,0 +1,154 @@
+'use strict';
+/* eslint-disable jest/no-conditional-expect */
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const { homedir } = require( 'os' );
+
+/**
+ * Internal dependencies
+ */
+const { ValidationError } = require( '../validate-config' );
+const { parseSourceString } = require( '../parse-source-string' );
+
+jest.mock( 'os', () => ( {
+	homedir: jest.fn(),
+} ) );
+
+describe( 'parseSourceString', () => {
+	const options = {
+		cacheDirectoryPath: '/test/cache',
+	};
+
+	beforeEach( () => {
+		homedir.mockReturnValue( '/home/test' );
+	} );
+
+	it( 'should do nothing when given an empty source', () => {
+		expect( parseSourceString( null, options ) ).toEqual( null );
+	} );
+
+	it( 'should throw when source not parseable', () => {
+		expect.assertions( 1 );
+		try {
+			parseSourceString( 'test://test', options );
+		} catch ( error ) {
+			expect( error ).toEqual(
+				new ValidationError(
+					'Invalid or unrecognized source: "test://test".'
+				)
+			);
+		}
+	} );
+
+	describe( 'local sources', () => {
+		it( 'should parse relative directories', () => {
+			expect( parseSourceString( '.', options ) ).toEqual( {
+				basename: path.basename( path.resolve( '.' ) ),
+				path: path.resolve( '.' ),
+				type: 'local',
+			} );
+		} );
+
+		it( 'should parse home directories', () => {
+			expect( parseSourceString( '~/test', options ) ).toEqual( {
+				basename: 'test',
+				path: '/home/test/test',
+				type: 'local',
+			} );
+		} );
+
+		it( 'should parse absolute directories', () => {
+			expect( parseSourceString( '/absolute/test', options ) ).toEqual( {
+				basename: 'test',
+				path: '/absolute/test',
+				type: 'local',
+			} );
+		} );
+	} );
+
+	describe( 'zip sources', () => {
+		it( 'should parse WordPress.org sources', () => {
+			expect(
+				parseSourceString(
+					'http://downloads.wordpress.org/plugin/gutenberg.zip',
+					options
+				)
+			).toEqual( {
+				basename: 'gutenberg',
+				path: '/test/cache/gutenberg',
+				type: 'zip',
+				url: 'http://downloads.wordpress.org/plugin/gutenberg.zip',
+			} );
+		} );
+
+		it( 'should parse other sources', () => {
+			expect(
+				parseSourceString( 'http://test.com/testing.zip', options )
+			).toEqual( {
+				basename: 'testing',
+				path: '/test/cache/testing',
+				type: 'zip',
+				url: 'http://test.com/testing.zip',
+			} );
+		} );
+	} );
+
+	describe( 'Git SSH sources', () => {
+		it( 'should parse ssh protocol', () => {
+			expect(
+				parseSourceString( 'ssh://test/test.git#trunk', options )
+			).toEqual( {
+				basename: 'test',
+				path: '/test/cache/test',
+				clonePath: '/test/cache/test',
+				ref: 'trunk',
+				type: 'git',
+				url: 'ssh://test/test.git',
+			} );
+		} );
+
+		it( 'should parse git+ssh protocol', () => {
+			expect(
+				parseSourceString( 'git+ssh://test/test.git#trunk', options )
+			).toEqual( {
+				basename: 'test',
+				path: '/test/cache/test',
+				clonePath: '/test/cache/test',
+				ref: 'trunk',
+				type: 'git',
+				url: 'git+ssh://test/test.git',
+			} );
+		} );
+
+		it( 'should work without ref', () => {
+			expect(
+				parseSourceString( 'ssh://test/test.git', options )
+			).toEqual( {
+				basename: 'test',
+				path: '/test/cache/test',
+				clonePath: '/test/cache/test',
+				ref: undefined,
+				type: 'git',
+				url: 'ssh://test/test.git',
+			} );
+		} );
+	} );
+
+	describe( 'GitHub sources', () => {
+		it( 'should parse', () => {
+			expect(
+				parseSourceString( 'WordPress/gutenberg#trunk', options )
+			).toEqual( {
+				basename: 'gutenberg',
+				path: '/test/cache/gutenberg',
+				clonePath: '/test/cache/gutenberg',
+				ref: 'trunk',
+				type: 'git',
+				url: 'https://github.com/WordPress/gutenberg.git',
+			} );
+		} );
+	} );
+} );
+/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/lib/config/test/post-process-config.js b/packages/env/lib/config/test/post-process-config.js
new file mode 100644
index 00000000000000..c64a98c7b2ad00
--- /dev/null
+++ b/packages/env/lib/config/test/post-process-config.js
@@ -0,0 +1,299 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const { ValidationError } = require( '..' );
+const postProcessConfig = require( '../post-process-config' );
+
+describe( 'postProcessConfig', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should merge relevant root options into environment options', () => {
+		const processed = postProcessConfig( {
+			port: 123,
+			testsPort: 456,
+			coreSource: {
+				type: 'test',
+			},
+			config: {
+				TESTS_ROOT: 'root',
+			},
+			pluginSources: [
+				{
+					type: 'root-plugin',
+				},
+			],
+			themeSources: [
+				{
+					type: 'root-theme',
+				},
+			],
+			mappings: {
+				'root-mapping': {
+					type: 'root-mapping',
+				},
+			},
+			env: {
+				development: {
+					coreSource: {
+						type: 'test',
+					},
+					config: {
+						TEST_ENV: 'development',
+					},
+					pluginSources: [
+						{
+							type: 'development-plugin',
+						},
+					],
+					themeSources: [
+						{
+							type: 'development-theme',
+						},
+					],
+					mappings: {
+						'development-mapping': {
+							type: 'development-mapping',
+						},
+					},
+				},
+				tests: {
+					coreSource: {
+						type: 'test',
+					},
+					config: {
+						TEST_ENV: 'tests',
+					},
+				},
+			},
+		} );
+
+		expect( processed ).toEqual( {
+			port: 123,
+			testsPort: 456,
+			coreSource: {
+				type: 'test',
+			},
+			config: {
+				TESTS_ROOT: 'root',
+			},
+			pluginSources: [
+				{
+					type: 'root-plugin',
+				},
+			],
+			themeSources: [
+				{
+					type: 'root-theme',
+				},
+			],
+			mappings: {
+				'root-mapping': {
+					type: 'root-mapping',
+				},
+			},
+			env: {
+				development: {
+					port: 123,
+					coreSource: {
+						type: 'test',
+					},
+					config: {
+						TESTS_ROOT: 'root',
+						TEST_ENV: 'development',
+					},
+					pluginSources: [
+						{
+							type: 'development-plugin',
+						},
+					],
+					themeSources: [
+						{
+							type: 'development-theme',
+						},
+					],
+					mappings: {
+						'root-mapping': {
+							type: 'root-mapping',
+						},
+						'development-mapping': {
+							type: 'development-mapping',
+						},
+					},
+				},
+				tests: {
+					port: 456,
+					coreSource: {
+						type: 'test',
+					},
+					config: {
+						TESTS_ROOT: 'root',
+						TEST_ENV: 'tests',
+					},
+					pluginSources: [
+						{
+							type: 'root-plugin',
+						},
+					],
+					themeSources: [
+						{
+							type: 'root-theme',
+						},
+					],
+					mappings: {
+						'root-mapping': {
+							type: 'root-mapping',
+						},
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should not merge some root options into environment options', () => {
+		const processed = postProcessConfig( {
+			port: 8888,
+			testsPort: 8889,
+			lifecycleScripts: {
+				afterStart: 'test',
+			},
+			env: {
+				development: {},
+				tests: {},
+			},
+		} );
+
+		expect( processed ).toEqual( {
+			port: 8888,
+			testsPort: 8889,
+			lifecycleScripts: {
+				afterStart: 'test',
+			},
+			env: {
+				development: {
+					port: 8888,
+				},
+				tests: {
+					port: 8889,
+				},
+			},
+		} );
+	} );
+
+	describe( 'appendPortToWPConfigs', () => {
+		it( 'should add port to certain environment config options', () => {
+			const processed = postProcessConfig( {
+				port: 123,
+				config: {
+					WP_TESTS_DOMAIN: 'localhost',
+					WP_SITEURL: 'localhost',
+					WP_HOME: 'localhost',
+				},
+				env: {
+					development: {
+						port: 123,
+					},
+					tests: {
+						port: 456,
+					},
+				},
+			} );
+
+			expect( processed ).toEqual( {
+				// Since the root-level config shouldn't apply to an environment,
+				// we shouldn't add the port to the config options for it.
+				port: 123,
+				config: {
+					WP_TESTS_DOMAIN: 'localhost',
+					WP_SITEURL: 'localhost',
+					WP_HOME: 'localhost',
+				},
+				env: {
+					development: {
+						port: 123,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:123',
+							WP_SITEURL: 'localhost:123',
+							WP_HOME: 'localhost:123',
+						},
+					},
+					tests: {
+						port: 456,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:456',
+							WP_SITEURL: 'localhost:456',
+							WP_HOME: 'localhost:456',
+						},
+					},
+				},
+			} );
+		} );
+
+		it( 'should not overwrite port in WP_HOME', () => {
+			const processed = postProcessConfig( {
+				env: {
+					development: {
+						port: 123,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:777',
+							WP_SITEURL: 'localhost:777',
+							WP_HOME: 'localhost:777',
+						},
+					},
+					tests: {
+						port: 456,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:777',
+							WP_SITEURL: 'localhost:777',
+							WP_HOME: 'localhost:777',
+						},
+					},
+				},
+			} );
+
+			expect( processed ).toEqual( {
+				env: {
+					development: {
+						port: 123,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:123',
+							WP_SITEURL: 'localhost:123',
+							WP_HOME: 'localhost:777',
+						},
+					},
+					tests: {
+						port: 456,
+						config: {
+							WP_TESTS_DOMAIN: 'localhost:456',
+							WP_SITEURL: 'localhost:456',
+							WP_HOME: 'localhost:777',
+						},
+					},
+				},
+			} );
+		} );
+	} );
+
+	describe( 'validatePortUniqueness', () => {
+		it( 'should fail when two environments have the same port', () => {
+			expect( () => {
+				postProcessConfig( {
+					env: {
+						development: {
+							port: 123,
+						},
+						tests: {
+							port: 123,
+						},
+					},
+				} );
+			} ).toThrow(
+				new ValidationError(
+					'The "development" and "tests" environments may not have the same port.'
+				)
+			);
+		} );
+	} );
+} );
diff --git a/packages/env/lib/config/test/read-raw-config-file.js b/packages/env/lib/config/test/read-raw-config-file.js
index bb1b282208ee45..135bc4cd4d9c49 100644
--- a/packages/env/lib/config/test/read-raw-config-file.js
+++ b/packages/env/lib/config/test/read-raw-config-file.js
@@ -1,3 +1,5 @@
+'use strict';
+/* eslint-disable jest/no-conditional-expect */
 /**
  * External dependencies
  */
@@ -6,7 +8,8 @@ const { readFile } = require( 'fs' ).promises;
 /**
  * Internal dependencies
  */
-const readConfigFile = require( '../read-raw-config-file' );
+const readRawConfigFile = require( '../read-raw-config-file' );
+const { ValidationError } = require( '../validate-config' );
 
 jest.mock( 'fs', () => ( {
 	promises: {
@@ -15,76 +18,29 @@ jest.mock( 'fs', () => ( {
 } ) );
 
 describe( 'readRawConfigFile', () => {
-	beforeEach( () => {
+	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'returns null if it cannot find a file', async () => {
-		readFile.mockImplementation( () =>
-			Promise.reject( { code: 'ENOENT' } )
-		);
-		const result = await readConfigFile( 'wp-env', '/.wp-env.json' );
+		readFile.mockRejectedValue( { code: 'ENOENT' } );
+
+		const result = await readRawConfigFile( '/.wp-env.json' );
 		expect( result ).toBe( null );
 	} );
 
-	it( 'converts testPort into tests.port', async () => {
-		readFile.mockImplementation( () =>
-			Promise.resolve( JSON.stringify( { testsPort: 100 } ) )
-		);
-		const result = await readConfigFile( 'wp-env', '/.wp-env.json' );
-		expect( result ).toEqual( {
-			env: {
-				tests: {
-					port: 100,
-				},
-			},
-		} );
-	} );
+	it( 'rejects when read file fails', async () => {
+		readFile.mockRejectedValue( { message: 'Test' } );
 
-	it( 'does not overwrite other test config values', async () => {
-		readFile.mockImplementation( () =>
-			Promise.resolve(
-				JSON.stringify( {
-					testsPort: 100,
-					env: {
-						tests: {
-							something: 'test',
-						},
-					},
-				} )
-			)
-		);
-		const result = await readConfigFile( 'wp-env', '/.wp-env.json' );
-		expect( result ).toEqual( {
-			env: {
-				tests: {
-					port: 100,
-					something: 'test',
-				},
-			},
-		} );
-	} );
+		expect.assertions( 1 );
 
-	it( 'uses tests.port if both tests.port and testsPort exist', async () => {
-		readFile.mockImplementation( () =>
-			Promise.resolve(
-				JSON.stringify( {
-					testsPort: 100,
-					env: {
-						tests: {
-							port: 200,
-						},
-					},
-				} )
-			)
-		);
-		const result = await readConfigFile( 'wp-env', '/.wp-env.json' );
-		expect( result ).toEqual( {
-			env: {
-				tests: {
-					port: 200,
-				},
-			},
-		} );
+		try {
+			await readRawConfigFile( '/.wp-env.json' );
+		} catch ( error ) {
+			expect( error ).toEqual(
+				new ValidationError( 'Could not read .wp-env.json: Test' )
+			);
+		}
 	} );
 } );
+/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/lib/config/test/validate-config.js b/packages/env/lib/config/test/validate-config.js
new file mode 100644
index 00000000000000..bb1decfd53dfb7
--- /dev/null
+++ b/packages/env/lib/config/test/validate-config.js
@@ -0,0 +1,363 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const {
+	ValidationError,
+	checkString,
+	checkPort,
+	checkStringArray,
+	checkObjectWithValues,
+	checkVersion,
+	checkValidURL,
+} = require( '../validate-config' );
+
+describe( 'validate-config', () => {
+	describe( 'checkString', () => {
+		it( 'throws when not a string', () => {
+			expect( () => checkString( 'test.json', 'test', 1234 ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a string.'
+				)
+			);
+		} );
+
+		it( 'passes for string', () => {
+			expect( () =>
+				checkString( 'test.json', 'test', 'test' )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'checkPort', () => {
+		it( 'throws when not a number', () => {
+			expect( () => checkPort( 'test.json', 'test', 'test' ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an integer.'
+				)
+			);
+
+			expect( () =>
+				checkPort( 'test.json', 'test', { test: 'test' } )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an integer.'
+				)
+			);
+		} );
+
+		it( 'throws when port out of range', () => {
+			expect( () => checkPort( 'test.json', 'test', -1 ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a valid port.'
+				)
+			);
+
+			expect( () => checkPort( 'test.json', 'test', 99999999 ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a valid port.'
+				)
+			);
+		} );
+
+		it( 'passes for valid port', () => {
+			expect( () =>
+				checkPort( 'test.json', 'test', 8888 )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'checkStringArray', () => {
+		it( 'throws when not an array', () => {
+			expect( () =>
+				checkStringArray( 'test.json', 'test', 'test' )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an array.'
+				)
+			);
+
+			expect( () =>
+				checkStringArray( 'test.json', 'test', { test: 'test' } )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an array.'
+				)
+			);
+		} );
+
+		it( 'throws when array contains non-strings', () => {
+			expect( () =>
+				checkStringArray( 'test.json', 'test', [ 12 ] )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an array of strings.'
+				)
+			);
+
+			expect( () =>
+				checkStringArray( 'test.json', 'test', [ 'test', 12 ] )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an array of strings.'
+				)
+			);
+		} );
+
+		it( 'passes for string arrays', () => {
+			expect( () =>
+				checkStringArray( 'test.json', 'test', [] )
+			).not.toThrow();
+			expect( () =>
+				checkStringArray( 'test.json', 'test', [ 'test' ] )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'checkObjectWithValues', () => {
+		it( 'throws when not an object', () => {
+			expect( () =>
+				checkObjectWithValues( 'test.json', 'test', 'test', [], false )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an object.'
+				)
+			);
+
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					[ 'test' ],
+					[],
+					false
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be an object.'
+				)
+			);
+		} );
+
+		it( 'throws when no allowed types are given', () => {
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: 'test' },
+					[],
+					false
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test.test" must be of type: .'
+				)
+			);
+		} );
+
+		it( 'throws when type is not allowed', () => {
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: 'test' },
+					[ 'number' ],
+					false
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test.test" must be of type: number.'
+				)
+			);
+
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: 1 },
+					[ 'string' ],
+					false
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test.test" must be of type: string.'
+				)
+			);
+
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: [ 'test' ] },
+					[ 'object', 'string' ],
+					false
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test.test" must be of type: object or string.'
+				)
+			);
+
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: null },
+					[ 'object' ],
+					true
+				)
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test.test" must be of type: object.'
+				)
+			);
+		} );
+
+		it( 'passes when type is allowed', () => {
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: 'test' },
+					[ 'string' ],
+					false
+				)
+			).not.toThrow();
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: '' },
+					[ 'string' ],
+					true
+				)
+			).not.toThrow();
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: 1 },
+					[ 'number' ],
+					false
+				)
+			).not.toThrow();
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: { nested: 'test' } },
+					[ 'object' ],
+					false
+				)
+			).not.toThrow();
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: [ 'test' ] },
+					[ 'array' ],
+					false
+				)
+			).not.toThrow();
+			expect( () =>
+				checkObjectWithValues(
+					'test.json',
+					'test',
+					{ test: null },
+					[ 'null' ],
+					false
+				)
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'checkVersion', () => {
+		it( 'throws for invalid input', () => {
+			expect( () => checkVersion( 'test.json', 'test', 'test' ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a string of the format "X", "X.X", or "X.X.X".'
+				)
+			);
+
+			expect( () => checkVersion( 'test.json', 'test', 123 ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a string.'
+				)
+			);
+		} );
+
+		it( 'passes for different version formats', () => {
+			expect( () =>
+				checkVersion( 'test.json', 'test', '1' )
+			).not.toThrow();
+			expect( () =>
+				checkVersion( 'test.json', 'test', '1.1' )
+			).not.toThrow();
+			expect( () =>
+				checkVersion( 'test.json', 'test', '1.1.1' )
+			).not.toThrow();
+			expect( () =>
+				checkVersion( 'test.json', 'test', '15.7.2' )
+			).not.toThrow();
+			expect( () =>
+				checkVersion( 'test.json', 'test', '26634543' )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'checkValidURL', () => {
+		it( 'throws for invaid URLs', () => {
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'localhost' )
+			).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a valid URL.'
+				)
+			);
+
+			expect( () => checkValidURL( 'test.json', 'test', '' ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a valid URL.'
+				)
+			);
+
+			expect( () => checkValidURL( 'test.json', 'test', 123 ) ).toThrow(
+				new ValidationError(
+					'Invalid test.json: "test" must be a valid URL.'
+				)
+			);
+		} );
+
+		it( 'passes for valid URLs', () => {
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'http://test.com' )
+			).not.toThrow();
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'https://test.com' )
+			).not.toThrow();
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'http://test' )
+			).not.toThrow();
+			expect( () =>
+				checkValidURL(
+					'test.json',
+					'test',
+					'http://test/test?test=test'
+				)
+			).not.toThrow();
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'http://test.co.uk' )
+			).not.toThrow();
+			expect( () =>
+				checkValidURL( 'test.json', 'test', 'https://test.co.uk:8888' )
+			).not.toThrow();
+			expect( () =>
+				checkValidURL(
+					'test.json',
+					'test',
+					'http://test.co.uk:8888/test?test=test#test'
+				)
+			).not.toThrow();
+		} );
+	} );
+} );
diff --git a/packages/env/lib/config/validate-config.js b/packages/env/lib/config/validate-config.js
index 1ecee11010f118..4aa62cb4571557 100644
--- a/packages/env/lib/config/validate-config.js
+++ b/packages/env/lib/config/validate-config.js
@@ -1,8 +1,7 @@
 'use strict';
 
 /**
- * @typedef {import('./config').WPServiceConfig} WPServiceConfig
- * @typedef {import('./config').WPSource} WPSource
+ * @typedef {import('./parse-source-string').WPSource} WPSource
  */
 
 /**
@@ -12,81 +11,171 @@
 class ValidationError extends Error {}
 
 /**
- * Validates a config object by throwing a ValidationError if any of its properties
- * do not match the required format.
+ * Validates that the value is a string.
  *
- * @param {Object}  config      A config object to validate.
- * @param {?string} envLocation Identifies if the error occurred in a specific environment property.
- * @return {Object} The passed config object with no modifications.
+ * @param {string} configFile The configuration file we're validating.
+ * @param {string} configKey  The configuration key we're validating.
+ * @param {number} value      The value to check.
  */
-function validateConfig( config, envLocation ) {
-	const envPrefix = envLocation ? `env.${ envLocation }.` : '';
-	if ( config.core !== null && typeof config.core !== 'string' ) {
+function checkString( configFile, configKey, value ) {
+	if ( typeof value !== 'string' ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }core" must be null or a string.`
+			`Invalid ${ configFile }: "${ configKey }" must be a string.`
 		);
 	}
+}
 
-	if (
-		! Array.isArray( config.plugins ) ||
-		config.plugins.some( ( plugin ) => typeof plugin !== 'string' )
-	) {
+/**
+ * Validates the port and throws if it isn't valid.
+ *
+ * @param {string} configFile The configuration file we're validating.
+ * @param {string} configKey  The configuration key we're validating.
+ * @param {number} port       The port to check.
+ */
+function checkPort( configFile, configKey, port ) {
+	if ( ! Number.isInteger( port ) ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }plugins" must be an array of strings.`
+			`Invalid ${ configFile }: "${ configKey }" must be an integer.`
 		);
 	}
 
-	if (
-		! Array.isArray( config.themes ) ||
-		config.themes.some( ( theme ) => typeof theme !== 'string' )
-	) {
+	if ( port < 0 || port > 65535 ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }themes" must be an array of strings.`
+			`Invalid ${ configFile }: "${ configKey }" must be a valid port.`
 		);
 	}
+}
 
-	if ( ! Number.isInteger( config.port ) ) {
+/**
+ * Validates the array and throws if it isn't valid.
+ *
+ * @param {string}   configFile The config file we're validating.
+ * @param {string}   configKey  The configuration key we're validating.
+ * @param {string[]} array      The array that we're checking.
+ */
+function checkStringArray( configFile, configKey, array ) {
+	if ( ! Array.isArray( array ) ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }port" must be an integer.`
+			`Invalid ${ configFile }: "${ configKey }" must be an array.`
 		);
 	}
 
-	if ( typeof config.config !== 'object' ) {
+	if ( array.some( ( value ) => typeof value !== 'string' ) ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }config" must be an object.`
+			`Invalid ${ configFile }: "${ configKey }" must be an array of strings.`
 		);
 	}
+}
 
-	if ( typeof config.mappings !== 'object' ) {
+/**
+ * Validates the object and throws if it isn't valid.
+ *
+ * @param {string}   configFile The config file we're validating.
+ * @param {string}   configKey  The configuration key we're validating.
+ * @param {string[]} obj        The object that we're checking.
+ * @param {string[]} allowTypes The types that are allowed.
+ * @param {boolean}  allowEmpty Indicates whether or not empty values are allowed.
+ */
+function checkObjectWithValues(
+	configFile,
+	configKey,
+	obj,
+	allowTypes,
+	allowEmpty
+) {
+	if ( allowTypes === undefined ) {
+		allowTypes = [];
+	}
+
+	if ( typeof obj !== 'object' || Array.isArray( obj ) ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }mappings" must be an object.`
+			`Invalid ${ configFile }: "${ configKey }" must be an object.`
 		);
 	}
 
-	for ( const [ wpDir, localDir ] of Object.entries( config.mappings ) ) {
-		if ( ! localDir || typeof localDir !== 'string' ) {
+	for ( const key in obj ) {
+		// Some values need to be uniquely validated.
+		switch ( obj[ key ] ) {
+			case null:
+			case undefined: {
+				break;
+			}
+
+			default: {
+				if ( ! obj[ key ] && ! allowEmpty ) {
+					throw new ValidationError(
+						`Invalid ${ configFile }: "${ configKey }.${ key }" must not be empty.`
+					);
+				}
+			}
+		}
+
+		// Some types need to be uniquely identified.
+		let type;
+		if ( obj[ key ] === undefined ) {
+			type = 'undefined';
+		} else if ( obj[ key ] === null ) {
+			type = 'null';
+		} else if ( Array.isArray( obj[ key ] ) ) {
+			type = 'array';
+		} else {
+			type = typeof obj[ key ];
+		}
+
+		if ( ! allowTypes.includes( type ) ) {
 			throw new ValidationError(
-				`Invalid .wp-env.json: "${ envPrefix }mappings.${ wpDir }" should be a string.`
+				`Invalid ${ configFile }: "${ configKey }.${ key }" must be of type: ${ allowTypes.join(
+					' or '
+				) }.`
 			);
 		}
 	}
+}
 
-	if (
-		config.phpVersion &&
-		! (
-			typeof config.phpVersion === 'string' &&
-			config.phpVersion.length === 3
-		)
-	) {
+/**
+ * Validates the version and throws if it isn't valid.
+ *
+ * @param {string} configFile The config file we're validating.
+ * @param {string} configKey  The configuration key we're validating.
+ * @param {string} version    The version that we're checking.
+ */
+function checkVersion( configFile, configKey, version ) {
+	if ( typeof version !== 'string' ) {
 		throw new ValidationError(
-			`Invalid .wp-env.json: "${ envPrefix }phpVersion" must be a string of the format "0.0".`
+			`Invalid ${ configFile }: "${ configKey }" must be a string.`
 		);
 	}
 
-	return config;
+	if ( ! version.match( /[0-9]+(?:\.[0-9]+)*/ ) ) {
+		throw new ValidationError(
+			`Invalid ${ configFile }: "${ configKey }" must be a string of the format "X", "X.X", or "X.X.X".`
+		);
+	}
+}
+
+/**
+ * Validates the url and throws if it isn't valid.
+ *
+ * @param {string} configFile The config file we're validating.
+ * @param {string} configKey  The configuration key we're validating.
+ * @param {string} url        The URL that we're checking.
+ */
+function checkValidURL( configFile, configKey, url ) {
+	try {
+		new URL( url );
+	} catch {
+		throw new ValidationError(
+			`Invalid ${ configFile }: "${ configKey }" must be a valid URL.`
+		);
+	}
 }
 
 module.exports = {
-	validateConfig,
 	ValidationError,
+	checkString,
+	checkPort,
+	checkStringArray,
+	checkObjectWithValues,
+	checkVersion,
+	checkValidURL,
 };
diff --git a/packages/env/lib/download-sources.js b/packages/env/lib/download-sources.js
index aec47f23203d19..45c65fe715de46 100644
--- a/packages/env/lib/download-sources.js
+++ b/packages/env/lib/download-sources.js
@@ -176,7 +176,7 @@ async function downloadZipSource( source, { onProgress, spinner, debug } ) {
 			rimraf( source.path ),
 			fs.promises.readdir( tempDir ),
 		] )
-	 )[ 2 ];
+	)[ 2 ];
 
 	/**
 	 * The plugin container is the extracted directory which is the direct parent
diff --git a/packages/env/lib/env.js b/packages/env/lib/env.js
index 3942a307109377..b183ea304a496f 100644
--- a/packages/env/lib/env.js
+++ b/packages/env/lib/env.js
@@ -3,9 +3,11 @@
  * Internal dependencies
  */
 const { ValidationError } = require( './config' );
+const { LifecycleScriptError } = require( './execute-lifecycle-script' );
 const commands = require( './commands' );
 
 module.exports = {
 	...commands,
 	ValidationError,
+	LifecycleScriptError,
 };
diff --git a/packages/env/lib/execute-lifecycle-script.js b/packages/env/lib/execute-lifecycle-script.js
new file mode 100644
index 00000000000000..388d63851948b2
--- /dev/null
+++ b/packages/env/lib/execute-lifecycle-script.js
@@ -0,0 +1,86 @@
+'use strict';
+/**
+ * External dependencies
+ */
+const { exec } = require( 'child_process' );
+
+/**
+ * @typedef {import('./config').WPConfig} WPConfig
+ */
+
+/**
+ * Error subtype which indicates that the lifecycle script failed.
+ */
+class LifecycleScriptError extends Error {
+	constructor( event, stderr ) {
+		super( `${ event } Error:\n${ stderr }` );
+
+		this.event = event;
+	}
+}
+
+/**
+ * Executes any defined life cycle script.
+ *
+ * @param {string}   event   The lifecycle event to run the script for.
+ * @param {WPConfig} config  The config object to use.
+ * @param {Object}   spinner A CLI spinner which indciates progress.
+ *
+ * @return {Promise} Resolves when the script has completed and rejects when there is an error.
+ */
+function executeLifecycleScript( event, config, spinner ) {
+	if ( ! config.lifecycleScripts[ event ] ) {
+		return Promise.resolve();
+	}
+
+	return new Promise( ( resolve, reject ) => {
+		// We're going to append the script output to the spinner while it's executing.
+		const spinnerMessage = `Executing ${ event } Script`;
+		spinner.text = spinnerMessage;
+
+		// Execute the script asynchronously so that it won't block the spinner.
+		const childProc = exec( config.lifecycleScripts[ event ], {
+			encoding: 'utf-8',
+			stdio: 'pipe',
+			env: process.env,
+		} );
+
+		// Collect all of the output so that we can make use of it.
+		let output = '';
+		childProc.stdout.on( 'data', ( data ) => {
+			output += data;
+
+			// Keep the spinner updated with the command output.
+			spinner.text = `${ spinnerMessage }\n${ output }`;
+		} );
+
+		// Listen for any error output so we can display it if the command fails.
+		let error = '';
+		childProc.stderr.on( 'data', ( data ) => {
+			error += data;
+		} );
+
+		// Pass any process creation errors directly up.
+		childProc.on( 'error', reject );
+
+		// Handle the completion of the command based on whether it was successful or not.
+		childProc.on( 'exit', ( code ) => {
+			if ( code === 0 ) {
+				// Keep the output of the command in debug mode.
+				if ( config.debug ) {
+					spinner.info( `${ event } Script:\n${ output.trimEnd() }` );
+				}
+
+				resolve();
+				return;
+			}
+
+			reject( new LifecycleScriptError( event, error.trimEnd() ) );
+		} );
+	} );
+}
+
+module.exports = {
+	LifecycleScriptError,
+	executeLifecycleScript,
+};
diff --git a/packages/env/lib/get-host-user.js b/packages/env/lib/get-host-user.js
new file mode 100644
index 00000000000000..79104fa2e9838f
--- /dev/null
+++ b/packages/env/lib/get-host-user.js
@@ -0,0 +1,27 @@
+'use strict';
+/**
+ * External dependencies
+ */
+const os = require( 'os' );
+
+/**
+ * Gets information about the host user.
+ *
+ * @return {Object} The host user's name, uid, and gid.
+ */
+module.exports = function getHostUser() {
+	const hostUser = os.userInfo();
+
+	// On Windows the uid and gid will be -1. Since there isn't a great way to handle this,
+	// we're just going to assign them to 1000. Docker Desktop already takes care of
+	// permission-related issues using magic, so this should be fine.
+	const uid = ( hostUser.uid === -1 ? 1000 : hostUser.uid ).toString();
+	const gid = ( hostUser.gid === -1 ? 1000 : hostUser.gid ).toString();
+
+	return {
+		name: hostUser.username,
+		uid,
+		gid,
+		fullUser: uid + ':' + gid,
+	};
+};
diff --git a/packages/env/lib/init-config.js b/packages/env/lib/init-config.js
index 8bcb27e207b7af..318bcae151b296 100644
--- a/packages/env/lib/init-config.js
+++ b/packages/env/lib/init-config.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * External dependencies
  */
@@ -5,12 +6,11 @@ const path = require( 'path' );
 const { writeFile, mkdir } = require( 'fs' ).promises;
 const { existsSync } = require( 'fs' );
 const yaml = require( 'js-yaml' );
-const os = require( 'os' );
 
 /**
  * Internal dependencies
  */
-const { readConfig } = require( './config' );
+const { loadConfig, ValidationError } = require( './config' );
 const buildDockerComposeConfig = require( './build-docker-compose-config' );
 
 /**
@@ -39,8 +39,7 @@ module.exports = async function initConfig( {
 	xdebug = 'off',
 	writeChanges = false,
 } ) {
-	const configPath = path.resolve( '.wp-env.json' );
-	const config = await readConfig( configPath );
+	const config = await loadConfig( path.resolve( '.' ) );
 	config.debug = debug;
 
 	// Adding this to the config allows the start command to understand that the
@@ -81,13 +80,23 @@ module.exports = async function initConfig( {
 			yaml.dump( dockerComposeConfig )
 		);
 
-		await writeFile(
-			path.resolve( config.workDirectoryPath, 'Dockerfile' ),
-			dockerFileContents(
-				dockerComposeConfig.services.wordpress.image,
-				config
-			)
-		);
+		// Write four Dockerfiles for each service we provided.
+		// (WordPress and CLI services, then a development and test environment for each.)
+		for ( const imageType of [ 'WordPress', 'CLI' ] ) {
+			for ( const envType of [ 'development', 'tests' ] ) {
+				await writeFile(
+					path.resolve(
+						config.workDirectoryPath,
+						`${
+							envType === 'tests' ? 'Tests-' : ''
+						}${ imageType }.Dockerfile`
+					),
+					imageType === 'WordPress'
+						? wordpressDockerFileContents( envType, config )
+						: cliDockerFileContents( envType, config )
+				);
+			}
+		}
 	} else if ( ! existsSync( config.workDirectoryPath ) ) {
 		spinner.fail(
 			'wp-env has not yet been initialized. Please run `wp-env start` to install the WordPress instance before using any other commands. This is only necessary to set up the environment for the first time; it is typically not necessary for the instance to be running after that in order to use other commands.'
@@ -99,80 +108,198 @@ module.exports = async function initConfig( {
 };
 
 /**
- * Checks the configured PHP version
- * against the minimum version supported by Xdebug
+ * Generates the Dockerfile used by wp-env's `wordpress` and `tests-wordpress` instances.
  *
- * @param {WPConfig} config
- * @return {boolean} Whether the PHP version is supported by Xdebug
+ * @param {string}   env    The environment we're installing -- development or tests.
+ * @param {WPConfig} config The configuration object.
+ * @return {string} The dockerfile contents.
  */
-function checkXdebugPhpCompatibility( config ) {
-	// By default, an undefined phpVersion uses the version on the docker image,
-	// which is supported by Xdebug 3.
-	const phpCompatibility = true;
-
-	// If PHP version is defined
-	// ensure it meets the Xdebug minimum compatibility requirment.
-	if ( config.env.development.phpVersion ) {
-		const versionTokens = config.env.development.phpVersion.split( '.' );
-		const majorVer = parseInt( versionTokens[ 0 ] );
-		const minorVer = parseInt( versionTokens[ 1 ] );
+function wordpressDockerFileContents( env, config ) {
+	const phpVersion = config.env[ env ].phpVersion
+		? ':php' + config.env[ env ].phpVersion
+		: '';
 
-		if ( isNaN( majorVer ) || isNaN( minorVer ) ) {
-			throw new Error(
-				'Something went wrong when parsing the PHP version.'
-			);
-		}
+	return `FROM wordpress${ phpVersion }
 
-		// Xdebug 3 supports 7.2 and higher
-		// Ensure user has specified a compatible PHP version.
-		if ( majorVer < 7 || ( majorVer === 7 && minorVer < 2 ) ) {
-			throw new Error( 'Cannot use XDebug 3 on PHP < 7.2.' );
-		}
-	}
+# Update apt sources for archived versions of Debian.
+
+# stretch (https://lists.debian.org/debian-devel-announce/2023/03/msg00006.html)
+RUN touch /etc/apt/sources.list
+RUN sed -i 's|deb.debian.org/debian stretch|archive.debian.org/debian stretch|g' /etc/apt/sources.list
+RUN sed -i 's|security.debian.org/debian-security stretch|archive.debian.org/debian-security stretch|g' /etc/apt/sources.list
+RUN sed -i '/stretch-updates/d' /etc/apt/sources.list
+
+# Create the host's user so that we can match ownership in the container.
+ARG HOST_USERNAME
+ARG HOST_UID
+ARG HOST_GID
+# When the IDs are already in use we can still safely move on.
+RUN groupadd -o -g $HOST_GID $HOST_USERNAME || true
+RUN useradd -mlo -u $HOST_UID -g $HOST_GID $HOST_USERNAME || true
 
-	return phpCompatibility;
+# Install any dependencies we need in the container.
+${ installDependencies( 'wordpress', env, config ) }`;
 }
 
 /**
- * Generates the Dockerfile used by wp-env's development instance.
+ * Generates the Dockerfile used by wp-env's `cli` and `tests-cli` instances.
  *
- * @param {string}   image  The base docker image to use.
+ * @param {string}   env    The environment we're installing -- development or tests.
  * @param {WPConfig} config The configuration object.
- *
  * @return {string} The dockerfile contents.
  */
-function dockerFileContents( image, config ) {
-	// Don't install XDebug unless it is explicitly required.
-	let shouldInstallXdebug = false;
+function cliDockerFileContents( env, config ) {
+	const phpVersion = config.env[ env ].phpVersion
+		? '-php' + config.env[ env ].phpVersion
+		: '';
+
+	return `FROM wordpress:cli${ phpVersion }
+
+# Switch to root so we can create users.
+USER root
+
+# Create the host's user so that we can match ownership in the container.
+ARG HOST_USERNAME
+ARG HOST_UID
+ARG HOST_GID
+# When the IDs are already in use we can still safely move on.
+RUN addgroup -g $HOST_GID $HOST_USERNAME || true
+RUN adduser -h /home/$HOST_USERNAME -G $( getent group $HOST_GID | cut -d: -f1 ) -u $HOST_UID $HOST_USERNAME || true
+
+# Install any dependencies we need in the container.
+${ installDependencies( 'cli', env, config ) }
+
+# Switch back to the original user now that we're done.
+USER www-data
+
+# Have the container sleep infinitely to keep it alive for us to run commands on it.
+CMD [ "/bin/sh", "-c", "while true; do sleep 2073600; done" ]
+`;
+}
+
+/**
+ * Generates content for the Dockerfile to install dependencies.
+ *
+ * @param {string}   service The kind of service that we're installing dependencies on ('wordpress' or 'cli').
+ * @param {string}   env     The environment we're installing dependencies for ('development' or 'tests').
+ * @param {WPConfig} config  The configuration object.
+ * @return {string} The Dockerfile content for installing dependencies.
+ */
+function installDependencies( service, env, config ) {
+	let dockerFileContent = '';
+
+	// At times we may need to evaluate the environment. This is because the
+	// WordPress image uses Ubuntu while the CLI image uses Alpine.
+
+	// Start with some environment-specific dependency installations.
+	switch ( service ) {
+		case 'wordpress': {
+			dockerFileContent += `
+# Make sure we're working with the latest packages.
+RUN apt-get -qy update
 
-	if ( config.xdebug !== 'off' ) {
-		const usingCompatiblePhp = checkXdebugPhpCompatibility( config );
+# Install some basic PHP dependencies.
+RUN apt-get -qy install $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
+
+# Install git
+RUN apt-get -qy install git
+
+# Set up sudo so they can have root access.
+RUN apt-get -qy install sudo
+RUN echo "#$HOST_UID ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers`;
+			break;
+		}
+		case 'cli': {
+			dockerFileContent += `
+# Make sure we're working with the latest packages.
+RUN apk update
 
-		if ( usingCompatiblePhp ) {
-			shouldInstallXdebug = true;
+# Install some basic PHP dependencies.
+RUN apk --no-cache add $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
+
+# Set up sudo so they can have root access.
+RUN apk --no-cache add sudo linux-headers
+RUN echo "#$HOST_UID ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers`;
+			break;
+		}
+		default: {
+			throw new Error( `Invalid service "${ service }" given` );
 		}
 	}
 
-	return `FROM ${ image }
+	dockerFileContent += getXdebugConfig(
+		config.xdebug,
+		config.env[ env ].phpVersion
+	);
 
-RUN apt-get -qy install $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
-${ shouldInstallXdebug ? installXdebug( config.xdebug ) : '' }
-`;
+	// Add better PHP settings.
+	dockerFileContent += `
+RUN echo 'upload_max_filesize = 1G' >> /usr/local/etc/php/php.ini
+RUN echo 'post_max_size = 1G' >> /usr/local/etc/php/php.ini`;
+
+	// Make sure Composer is available for use in all services.
+	dockerFileContent += `
+RUN curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php
+RUN export COMPOSER_HASH=\`curl -sS https://composer.github.io/installer.sig\` && php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === '$COMPOSER_HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('/tmp/composer-setup.php'); } echo PHP_EOL;"
+RUN php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer
+RUN rm /tmp/composer-setup.php`;
+
+	// Install any Composer packages we might need globally.
+	// Make sure to do this as the user and ensure the binaries are available in the $PATH.
+	dockerFileContent += `
+USER $HOST_UID:$HOST_GID
+ENV PATH="\${PATH}:/home/$HOST_USERNAME/.composer/vendor/bin"
+RUN composer global require --dev phpunit/phpunit:"^5.7.21 || ^6.0 || ^7.0 || ^8.0 || ^9.0 || ^10.0"
+USER root`;
+
+	return dockerFileContent;
 }
 
-function installXdebug( enableXdebug ) {
-	const isLinux = os.type() === 'Linux';
-	// Discover client host does not appear to work on macOS with Docker.
-	const clientDetectSettings = isLinux
-		? 'xdebug.discover_client_host=true'
-		: 'xdebug.client_host="host.docker.internal"';
+/**
+ * Gets the Xdebug config based on the options in the config object.
+ *
+ * @param {string} xdebugMode The Xdebug mode set in the config.
+ * @param {string} phpVersion The php version set in the environment.
+ * @return {string} The Xdebug config -- can be an empty string when it's not used.
+ */
+function getXdebugConfig( xdebugMode = 'off', phpVersion ) {
+	if ( xdebugMode === 'off' ) {
+		return '';
+	}
+
+	let xdebugVersion = 'xdebug';
+
+	if ( phpVersion ) {
+		const versionTokens = phpVersion.split( '.' );
+		const majorVer = parseInt( versionTokens[ 0 ] );
+		const minorVer = parseInt( versionTokens[ 1 ] );
+
+		if ( isNaN( majorVer ) || isNaN( minorVer ) ) {
+			throw new ValidationError(
+				'Something went wrong when parsing the PHP version.'
+			);
+		}
+
+		// Throw an error if someone tries to use Xdebug with an unsupported PHP version.
+		// Xdebug 3 only supports 7.2 and higher.
+		if ( majorVer < 7 || ( majorVer === 7 && minorVer < 2 ) ) {
+			throw new ValidationError(
+				`Cannot use XDebug 3 with PHP < 7.2. Your PHP version is ${ phpVersion }.`
+			);
+		}
+
+		// For now, we support PHP 7 by installing the final version of Xdebug to
+		// support PHP 7 when the environment uses that version. By default, use the
+		// latest version.
+		if ( majorVer === 7 ) {
+			xdebugVersion = 'xdebug-3.1.6';
+		}
+	}
 
 	return `
-# Install Xdebug:
-RUN if [ -z "$(pecl list | grep xdebug)" ] ; then pecl install xdebug ; fi
+RUN if [ -z "$(pecl list | grep ${ xdebugVersion })" ] ; then pecl install ${ xdebugVersion } ; fi
 RUN docker-php-ext-enable xdebug
 RUN echo 'xdebug.start_with_request=yes' >> /usr/local/etc/php/php.ini
-RUN echo 'xdebug.mode=${ enableXdebug }' >> /usr/local/etc/php/php.ini
-RUN echo '${ clientDetectSettings }' >> /usr/local/etc/php/php.ini
-	`;
+RUN echo 'xdebug.mode=${ xdebugMode }' >> /usr/local/etc/php/php.ini
+RUN echo 'xdebug.client_host="host.docker.internal"' >> /usr/local/etc/php/php.ini`;
 }
diff --git a/packages/env/lib/md5.js b/packages/env/lib/md5.js
index 2fd6b7c6a6bf21..9f37b5a4ede626 100644
--- a/packages/env/lib/md5.js
+++ b/packages/env/lib/md5.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * External dependencies
  */
diff --git a/packages/env/lib/parse-xdebug-mode.js b/packages/env/lib/parse-xdebug-mode.js
index 927b4f6e3f2334..0fb781d786fba4 100644
--- a/packages/env/lib/parse-xdebug-mode.js
+++ b/packages/env/lib/parse-xdebug-mode.js
@@ -1,3 +1,4 @@
+'use strict';
 // See https://xdebug.org/docs/all_settings#mode
 const XDEBUG_MODES = [
 	'develop',
diff --git a/packages/env/lib/retry.js b/packages/env/lib/retry.js
index 014e5b7bffe810..753a8123ead6a7 100644
--- a/packages/env/lib/retry.js
+++ b/packages/env/lib/retry.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * External dependencies
  */
diff --git a/packages/env/test/__snapshots__/md5.js.snap b/packages/env/lib/test/__snapshots__/md5.js.snap
similarity index 100%
rename from packages/env/test/__snapshots__/md5.js.snap
rename to packages/env/lib/test/__snapshots__/md5.js.snap
diff --git a/packages/env/lib/test/build-docker-compose-config.js b/packages/env/lib/test/build-docker-compose-config.js
new file mode 100644
index 00000000000000..95cf6419d5db4d
--- /dev/null
+++ b/packages/env/lib/test/build-docker-compose-config.js
@@ -0,0 +1,134 @@
+'use strict';
+/**
+ * Internal dependencies
+ */
+const buildDockerComposeConfig = require( '../build-docker-compose-config' );
+const getHostUser = require( '../get-host-user' );
+
+// The basic config keys which build docker compose config requires.
+const CONFIG = {
+	mappings: {},
+	pluginSources: [],
+	themeSources: [],
+	port: 8888,
+	configDirectoryPath: '/path/to/config',
+};
+
+jest.mock( '../get-host-user', () => jest.fn() );
+getHostUser.mockImplementation( () => {
+	return {
+		name: 'test',
+		uid: 1,
+		gid: 2,
+		fullUser: '1:2',
+	};
+} );
+
+describe( 'buildDockerComposeConfig', () => {
+	it( 'should map directories before individual sources', () => {
+		const envConfig = {
+			...CONFIG,
+			mappings: {
+				'wp-content/plugins': {
+					path: '/path/to/wp-plugins',
+				},
+			},
+			pluginSources: [
+				{ path: '/path/to/local/plugin', basename: 'test-name' },
+			],
+		};
+		const dockerConfig = buildDockerComposeConfig( {
+			workDirectoryPath: '/path',
+			env: { development: envConfig, tests: envConfig },
+		} );
+		const { volumes } = dockerConfig.services.wordpress;
+		expect( volumes ).toEqual( [
+			'wordpress:/var/www/html', // WordPress root.
+			'/path/WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit', // WordPress test library,
+			'user-home:/home/test',
+			'/path/to/wp-plugins:/var/www/html/wp-content/plugins', // Mapped plugins root.
+			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name', // Mapped plugin.
+		] );
+	} );
+
+	it( 'should add all specified sources to tests, dev, and cli services', () => {
+		const envConfig = {
+			...CONFIG,
+			mappings: {
+				'wp-content/plugins': {
+					path: '/path/to/wp-plugins',
+				},
+			},
+			pluginSources: [
+				{ path: '/path/to/local/plugin', basename: 'test-name' },
+			],
+			themeSources: [
+				{ path: '/path/to/local/theme', basename: 'test-theme' },
+			],
+		};
+		const dockerConfig = buildDockerComposeConfig( {
+			workDirectoryPath: '/path',
+			env: { development: envConfig, tests: envConfig },
+		} );
+		const devVolumes = dockerConfig.services.wordpress.volumes;
+		const cliVolumes = dockerConfig.services.cli.volumes;
+		expect( devVolumes ).toEqual( cliVolumes );
+
+		const testsVolumes = dockerConfig.services[ 'tests-wordpress' ].volumes;
+		const testsCliVolumes = dockerConfig.services[ 'tests-cli' ].volumes;
+		expect( testsVolumes ).toEqual( testsCliVolumes );
+
+		let localSources = [
+			'/path/to/wp-plugins:/var/www/html/wp-content/plugins',
+			'/path/WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
+			'user-home:/home/test',
+			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name',
+			'/path/to/local/theme:/var/www/html/wp-content/themes/test-theme',
+		];
+		expect( devVolumes ).toEqual( expect.arrayContaining( localSources ) );
+
+		localSources = [
+			'/path/to/wp-plugins:/var/www/html/wp-content/plugins',
+			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
+			'tests-user-home:/home/test',
+			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name',
+			'/path/to/local/theme:/var/www/html/wp-content/themes/test-theme',
+		];
+		expect( testsVolumes ).toEqual(
+			expect.arrayContaining( localSources )
+		);
+	} );
+
+	it( 'should create "wordpress" and "tests-wordpress" volumes if they are needed by containers', () => {
+		// CONFIG has no coreSource entry, so there are no core sources on the
+		// local filesystem, so a volume should be created to contain core
+		// sources.
+		const dockerConfig = buildDockerComposeConfig( {
+			workDirectoryPath: '/path',
+			env: { development: CONFIG, tests: CONFIG },
+		} );
+
+		expect( dockerConfig.volumes.wordpress ).not.toBe( undefined );
+		expect( dockerConfig.volumes[ 'tests-wordpress' ] ).not.toBe(
+			undefined
+		);
+	} );
+
+	it( 'should NOT create "wordpress" and "tests-wordpress" volumes if they are not needed by containers', () => {
+		const envConfig = {
+			...CONFIG,
+			coreSource: {
+				path: '/some/random/path',
+				local: true,
+			},
+		};
+
+		const dockerConfig = buildDockerComposeConfig( {
+			workDirectoryPath: '/path',
+			env: { development: envConfig, tests: envConfig },
+		} );
+
+		expect( dockerConfig.volumes.wordpress ).toBe( undefined );
+		expect( dockerConfig.volumes[ 'tests-wordpress' ] ).toBe( undefined );
+	} );
+} );
diff --git a/packages/env/test/cache.js b/packages/env/lib/test/cache.js
similarity index 98%
rename from packages/env/test/cache.js
rename to packages/env/lib/test/cache.js
index 3b7f17d11e1f56..f73222139d8b1a 100644
--- a/packages/env/test/cache.js
+++ b/packages/env/lib/test/cache.js
@@ -1,3 +1,4 @@
+'use strict';
 /**
  * External dependencies
  */
@@ -11,12 +12,13 @@ const {
 	setCache,
 	getCache,
 	getCacheFile,
-} = require( '../lib/cache' );
+} = require( '../cache' );
 
 jest.mock( 'fs', () => ( {
 	promises: {
 		readFile: jest.fn(),
 		writeFile: jest.fn(),
+		mkdir: jest.fn(),
 	},
 } ) );
 
diff --git a/packages/env/test/cli.js b/packages/env/lib/test/cli.js
similarity index 89%
rename from packages/env/test/cli.js
rename to packages/env/lib/test/cli.js
index 9319750518095f..542aea598a42fa 100644
--- a/packages/env/test/cli.js
+++ b/packages/env/lib/test/cli.js
@@ -2,8 +2,8 @@
 /**
  * Internal dependencies
  */
-const cli = require( '../lib/cli' );
-const env = require( '../lib/env' );
+const cli = require( '../cli' );
+const env = require( '../env' );
 
 /**
  * Mocked dependencies
@@ -14,13 +14,17 @@ jest.mock( 'ora', () => () => ( {
 		return { text: '', succeed: jest.fn(), fail: jest.fn() };
 	},
 } ) );
-jest.mock( '../lib/env', () => ( {
-	start: jest.fn( Promise.resolve.bind( Promise ) ),
-	stop: jest.fn( Promise.resolve.bind( Promise ) ),
-	clean: jest.fn( Promise.resolve.bind( Promise ) ),
-	run: jest.fn( Promise.resolve.bind( Promise ) ),
-	ValidationError: jest.requireActual( '../lib/env' ).ValidationError,
-} ) );
+jest.mock( '../env', () => {
+	const actual = jest.requireActual( '../env' );
+	return {
+		start: jest.fn( Promise.resolve.bind( Promise ) ),
+		stop: jest.fn( Promise.resolve.bind( Promise ) ),
+		clean: jest.fn( Promise.resolve.bind( Promise ) ),
+		run: jest.fn( Promise.resolve.bind( Promise ) ),
+		ValidationError: actual.ValidationError,
+		LifecycleScriptError: actual.LifecycleScriptError,
+	};
+} );
 
 describe( 'env cli', () => {
 	beforeEach( jest.clearAllMocks );
@@ -134,7 +138,7 @@ describe( 'env cli', () => {
 		await env.start.mock.results[ 0 ].value.catch( () => {} );
 
 		expect( spinner.fail ).toHaveBeenCalledWith(
-			'Error while running docker-compose command.'
+			'Error while running docker compose command.'
 		);
 		expect( process.stderr.write ).toHaveBeenCalledWith( 'failure error' );
 		expect( process.exit ).toHaveBeenCalledWith( 1 );
diff --git a/packages/env/lib/test/execute-lifecycle-script.js b/packages/env/lib/test/execute-lifecycle-script.js
new file mode 100644
index 00000000000000..d4e81c7fff5193
--- /dev/null
+++ b/packages/env/lib/test/execute-lifecycle-script.js
@@ -0,0 +1,59 @@
+'use strict';
+/* eslint-disable jest/no-conditional-expect */
+/**
+ * Internal dependencies
+ */
+const {
+	LifecycleScriptError,
+	executeLifecycleScript,
+} = require( '../execute-lifecycle-script' );
+
+describe( 'executeLifecycleScript', () => {
+	const spinner = {
+		info: jest.fn(),
+	};
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should do nothing without event option when debugging', async () => {
+		await executeLifecycleScript(
+			'test',
+			{ lifecycleScripts: { test: null }, debug: true },
+			spinner
+		);
+
+		expect( spinner.info ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should run event option and print output when debugging', async () => {
+		await executeLifecycleScript(
+			'test',
+			{ lifecycleScripts: { test: 'node -v' }, debug: true },
+			spinner
+		);
+
+		expect( spinner.info ).toHaveBeenCalledWith(
+			expect.stringMatching( /test Script:\nv[0-9]/ )
+		);
+	} );
+
+	it( 'should throw LifecycleScriptError when process errors', async () => {
+		try {
+			await executeLifecycleScript(
+				'test',
+				{
+					lifecycleScripts: {
+						test: 'node -vvvvvvv',
+					},
+				},
+				spinner
+			);
+		} catch ( error ) {
+			expect( error ).toBeInstanceOf( LifecycleScriptError );
+			expect( error.message ).toMatch( /test Error:\n.*bad option/ );
+		}
+	} );
+} );
+/* eslint-enable jest/no-conditional-expect */
diff --git a/packages/env/test/md5.js b/packages/env/lib/test/md5.js
similarity index 94%
rename from packages/env/test/md5.js
rename to packages/env/lib/test/md5.js
index 2d07a589c1768e..ad40f0040f16c8 100644
--- a/packages/env/test/md5.js
+++ b/packages/env/lib/test/md5.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * Internal dependencies
  */
-const md5 = require( '../lib/md5' );
+const md5 = require( '../md5' );
 
 describe( 'md5', () => {
 	it( 'creates a hash of a string', () => {
diff --git a/packages/env/test/parse-xdebug-mode.js b/packages/env/lib/test/parse-xdebug-mode.js
similarity index 94%
rename from packages/env/test/parse-xdebug-mode.js
rename to packages/env/lib/test/parse-xdebug-mode.js
index 454611cd40d43e..c84ad16bb81c33 100644
--- a/packages/env/test/parse-xdebug-mode.js
+++ b/packages/env/lib/test/parse-xdebug-mode.js
@@ -1,7 +1,8 @@
+'use strict';
 /**
  * Internal dependencies
  */
-const parseXdebugMode = require( '../lib/parse-xdebug-mode' );
+const parseXdebugMode = require( '../parse-xdebug-mode' );
 
 describe( 'parseXdebugMode', () => {
 	it( 'throws an error if the passed value is neither a string nor undefined', () => {
diff --git a/packages/env/lib/validate-run-container.js b/packages/env/lib/validate-run-container.js
new file mode 100644
index 00000000000000..77e68d2a3a4dc7
--- /dev/null
+++ b/packages/env/lib/validate-run-container.js
@@ -0,0 +1,41 @@
+'use strict';
+
+/**
+ * A list of the containers that we can use `run` on.
+ */
+const RUN_CONTAINERS = [
+	'mysql',
+	'tests-mysql',
+	'wordpress',
+	'tests-wordpress',
+	'cli',
+	'tests-cli',
+];
+
+/**
+ * Custom parsing and validation for the "run" command's container argument.
+ *
+ * @param {string} value The user-set container.
+ *
+ * @return {string} The container name to use.
+ */
+function validateRunContainer( value ) {
+	// Give special errors for deprecated containers.
+	if ( value === 'phpunit' ) {
+		throw new Error(
+			"The 'phpunit' container has been removed. Please use 'wp-env run tests-cli --env-cwd=wp-content/path/to/plugin phpunit' instead."
+		);
+	}
+	if ( value === 'composer' ) {
+		throw new Error(
+			"The 'composer' container has been removed. Please use 'wp-env run cli --env-cwd=wp-content/path/to/plugin composer' instead."
+		);
+	}
+
+	return value;
+}
+
+module.exports = {
+	RUN_CONTAINERS,
+	validateRunContainer,
+};
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index 0d8f571cce71c1..bd3c4a23f8ff5d 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -1,25 +1,56 @@
+'use strict';
 /**
  * External dependencies
  */
-const dockerCompose = require( 'docker-compose' );
+const { v2: dockerCompose } = require( 'docker-compose' );
 const util = require( 'util' );
 const fs = require( 'fs' ).promises;
 const path = require( 'path' );
 const got = require( 'got' );
+const dns = require( 'dns' ).promises;
 
 /**
  * Promisified dependencies
  */
 const copyDir = util.promisify( require( 'copy-dir' ) );
 
+/**
+ * Internal dependencies
+ */
+const { getCache, setCache } = require( './cache' );
+
 /**
  * @typedef {import('./config').WPConfig} WPConfig
- * @typedef {import('./config').WPServiceConfig} WPServiceConfig
+ * @typedef {import('./config').WPEnvironmentConfig} WPEnvironmentConfig
  * @typedef {import('./config').WPSource} WPSource
  * @typedef {'development'|'tests'} WPEnvironment
  * @typedef {'development'|'tests'|'all'} WPEnvironmentSelection
  */
 
+/**
+ * Utility function to check if a WordPress version is lower than another version.
+ *
+ * This is a non-comprehensive check only intended for this usage, to avoid pulling in a full semver library.
+ * It only considers the major and minor portions of the version and ignores the rest. Additionally, it assumes that
+ * the minor version is always a single digit (i.e. 0-9).
+ *
+ * Do not use this function for general version comparison, as it will not work for all cases.
+ *
+ * @param {string} version        The version to check.
+ * @param {string} compareVersion The compare version to check whether the version is lower than.
+ * @return {boolean} True if the version is lower than the compare version, false otherwise.
+ */
+function isWPMajorMinorVersionLower( version, compareVersion ) {
+	const versionNumber = Number.parseFloat(
+		version.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+	const compareVersionNumber = Number.parseFloat(
+		compareVersion.match( /^[0-9]+(\.[0-9]+)?/ )[ 0 ]
+	);
+
+	return versionNumber < compareVersionNumber;
+}
+
 /**
  * Checks a WordPress database connection. An error is thrown if the test is
  * unsuccessful.
@@ -44,24 +75,28 @@ async function checkDatabaseConnection( { dockerComposeConfigPath, debug } ) {
  * @param {Object}        spinner     A CLI spinner which indicates progress.
  */
 async function configureWordPress( environment, config, spinner ) {
-	const url = ( () => {
-		const port = config.env[ environment ].port;
-		const domain =
-			environment === 'tests'
-				? config.env.tests.config.WP_TESTS_DOMAIN
-				: config.env.development.config.WP_SITEURL;
-		if ( port === 80 ) {
-			return domain;
-		}
-
-		return `${ domain }:${ port }`;
-	} )();
+	let wpVersion = '';
+	try {
+		wpVersion = await readWordPressVersion(
+			config.env[ environment ].coreSource,
+			spinner,
+			config.debug
+		);
+	} catch ( err ) {
+		// Ignore error.
+	}
 
-	const installCommand = `wp core install --url="${ url }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
+	const installCommand = `wp core install --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
 
 	// -eo pipefail exits the command as soon as anything fails in bash.
 	const setupCommands = [ 'set -eo pipefail', installCommand ];
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	const configAnchor =
+		wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' )
+			? `"define('WP_DEBUG',"`
+			: `"define( 'WP_DEBUG',"`;
+
 	// Set wp-config.php values.
 	for ( let [ key, value ] of Object.entries(
 		config.env[ environment ].config
@@ -74,7 +109,7 @@ async function configureWordPress( environment, config, spinner ) {
 		// Add quotes around string values to work with multi-word strings better.
 		value = typeof value === 'string' ? `"${ value }"` : value;
 		setupCommands.push(
-			`wp config set ${ key } ${ value } --anchor="define( 'WP_DEBUG',"${
+			`wp config set ${ key } ${ value } --anchor=${ configAnchor }${
 				typeof value !== 'string' ? ' --raw' : ''
 			}`
 		);
@@ -99,10 +134,20 @@ async function configureWordPress( environment, config, spinner ) {
 		[ 'bash', '-c', setupCommands.join( ' && ' ) ],
 		{
 			config: config.dockerComposeConfigPath,
+			commandOptions: [ '--rm' ],
 			log: config.debug,
 		}
 	);
 
+	// WordPress versions below 5.1 didn't use proper spacing in wp-config.
+	// Additionally, WordPress versions below 5.4 used `dirname( __FILE__ )` instead of `__DIR__`.
+	let abspathDef = `define( 'ABSPATH', __DIR__ . '\\/' );`;
+	if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.1' ) ) {
+		abspathDef = `define('ABSPATH', dirname(__FILE__) . '\\/');`;
+	} else if ( wpVersion && isWPMajorMinorVersionLower( wpVersion, '5.4' ) ) {
+		abspathDef = `define( 'ABSPATH', dirname( __FILE__ ) . '\\/' );`;
+	}
+
 	// WordPress' PHPUnit suite expects a `wp-tests-config.php` in
 	// the directory that the test suite is contained within.
 	// Make sure ABSPATH points to the WordPress install.
@@ -111,7 +156,7 @@ async function configureWordPress( environment, config, spinner ) {
 		[
 			'sh',
 			'-c',
-			`sed -e "/^require.*wp-settings.php/d" -e "s/define( 'ABSPATH', __DIR__ . '\\/' );/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
+			`sed -e "/^require.*wp-settings.php/d" -e "s/${ abspathDef }/define( 'ABSPATH', '\\/var\\/www\\/html\\/' );\\n\\tdefine( 'WP_DEFAULT_THEME', 'default' );/" /var/www/html/wp-config.php > /wordpress-phpunit/wp-tests-config.php`,
 		],
 		{
 			config: config.dockerComposeConfigPath,
@@ -160,30 +205,13 @@ async function setupWordPressDirectories( config ) {
 			config.env.development.coreSource.path,
 			config.env.development.coreSource.testsPath
 		);
-		await createUploadsDir( config.env.development.coreSource.testsPath );
-	}
-
-	const checkedPaths = {};
-	for ( const { coreSource } of Object.values( config.env ) ) {
-		if ( coreSource && ! checkedPaths[ coreSource.path ] ) {
-			await createUploadsDir( coreSource.path );
-			checkedPaths[ coreSource.path ] = true;
-		}
 	}
 }
 
-async function createUploadsDir( corePath ) {
-	// Ensure the tests uploads folder is writeable for travis,
-	// creating the folder if necessary.
-	const uploadPath = path.join( corePath, 'wp-content/uploads' );
-	await fs.mkdir( uploadPath, { recursive: true } );
-	await fs.chmod( uploadPath, 0o0767 );
-}
-
 /**
  * Returns true if all given environment configs have the same core source.
  *
- * @param {WPServiceConfig[]} envs An array of environments to check.
+ * @param {WPEnvironmentConfig[]} envs An array of environments to check.
  *
  * @return {boolean} True if all the environments have the same core source.
  */
@@ -271,19 +299,54 @@ async function readWordPressVersion( coreSource, spinner, debug ) {
 	return versionMatch[ 1 ];
 }
 
+/**
+ * Basically a quick check to see if we can connect to the internet.
+ *
+ * @return {boolean} True if we can connect to WordPress.org, false otherwise.
+ */
+let IS_OFFLINE;
+async function canAccessWPORG() {
+	// Avoid situations where some parts of the code think we're offline and others don't.
+	if ( IS_OFFLINE !== undefined ) {
+		return IS_OFFLINE;
+	}
+	IS_OFFLINE = !! ( await dns.resolve( 'WordPress.org' ).catch( () => {} ) );
+	return IS_OFFLINE;
+}
+
 /**
  * Returns the latest stable version of WordPress by requesting the stable-check
  * endpoint on WordPress.org.
  *
+ * @param {Object} options an object with cacheDirectoryPath set to the path to the cache directory in ~/.wp-env.
  * @return {string} The latest stable version of WordPress, like "6.0.1"
  */
 let CACHED_WP_VERSION;
-async function getLatestWordPressVersion() {
+async function getLatestWordPressVersion( options ) {
 	// Avoid extra network requests.
 	if ( CACHED_WP_VERSION ) {
 		return CACHED_WP_VERSION;
 	}
 
+	const cacheOptions = {
+		workDirectoryPath: options.cacheDirectoryPath,
+	};
+
+	// When we can't connect to the internet, we don't want to break wp-env or
+	// wait for the stable-check result to timeout.
+	if ( ! ( await canAccessWPORG() ) ) {
+		const latestVersion = await getCache(
+			'latestWordPressVersion',
+			cacheOptions
+		);
+		if ( ! latestVersion ) {
+			throw new Error(
+				'Could not find the current WordPress version in the cache and the network is not available.'
+			);
+		}
+		return latestVersion;
+	}
+
 	const versions = await got(
 		'https://api.wordpress.org/core/stable-check/1.0/'
 	).json();
@@ -291,6 +354,7 @@ async function getLatestWordPressVersion() {
 	for ( const [ version, status ] of Object.entries( versions ) ) {
 		if ( status === 'latest' ) {
 			CACHED_WP_VERSION = version;
+			await setCache( 'latestWordPressVersion', version, cacheOptions );
 			return version;
 		}
 	}
@@ -303,5 +367,6 @@ module.exports = {
 	resetDatabase,
 	setupWordPressDirectories,
 	readWordPressVersion,
+	canAccessWPORG,
 	getLatestWordPressVersion,
 };
diff --git a/packages/env/package.json b/packages/env/package.json
index 595d18fa883323..a0cf44e99fb2f9 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "5.7.0",
+	"version": "10.13.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,10 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"directories": {
 		"lib": "lib",
 		"test": "tests"
@@ -34,7 +38,7 @@
 	"dependencies": {
 		"chalk": "^4.0.0",
 		"copy-dir": "^1.3.0",
-		"docker-compose": "^0.22.2",
+		"docker-compose": "^0.24.3",
 		"extract-zip": "^1.6.7",
 		"got": "^11.8.5",
 		"inquirer": "^7.1.0",
diff --git a/packages/env/test/build-docker-compose-config.js b/packages/env/test/build-docker-compose-config.js
deleted file mode 100644
index 5927e188c9df01..00000000000000
--- a/packages/env/test/build-docker-compose-config.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Internal dependencies
- */
-const buildDockerComposeConfig = require( '../lib/build-docker-compose-config' );
-
-// The basic config keys which build docker compose config requires.
-const CONFIG = {
-	mappings: {},
-	pluginSources: [],
-	themeSources: [],
-	port: 8888,
-	configDirectoryPath: '/path/to/config',
-};
-
-describe( 'buildDockerComposeConfig', () => {
-	it( 'should map directories before individual sources', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/plugins': {
-					path: '/path/to/wp-plugins',
-				},
-			},
-			pluginSources: [
-				{ path: '/path/to/local/plugin', basename: 'test-name' },
-			],
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: envConfig },
-		} );
-		const { volumes } = dockerConfig.services.wordpress;
-		expect( volumes ).toEqual( [
-			'wordpress:/var/www/html', // WordPress root.
-			'/path/WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit', // WordPress test library,
-			'/path/to/wp-plugins:/var/www/html/wp-content/plugins', // Mapped plugins root.
-			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name', // Mapped plugin.
-		] );
-	} );
-
-	it( 'should add all specified sources to tests, dev, and cli services', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/plugins': {
-					path: '/path/to/wp-plugins',
-				},
-			},
-			pluginSources: [
-				{ path: '/path/to/local/plugin', basename: 'test-name' },
-			],
-			themeSources: [
-				{ path: '/path/to/local/theme', basename: 'test-theme' },
-			],
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: envConfig },
-		} );
-		const devVolumes = dockerConfig.services.wordpress.volumes;
-		const cliVolumes = dockerConfig.services.cli.volumes;
-		expect( devVolumes ).toEqual( cliVolumes );
-
-		const testsVolumes = dockerConfig.services[ 'tests-wordpress' ].volumes;
-		const testsCliVolumes = dockerConfig.services[ 'tests-cli' ].volumes;
-		expect( testsVolumes ).toEqual( testsCliVolumes );
-
-		let localSources = [
-			'/path/to/wp-plugins:/var/www/html/wp-content/plugins',
-			'/path/WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name',
-			'/path/to/local/theme:/var/www/html/wp-content/themes/test-theme',
-		];
-		expect( devVolumes ).toEqual( expect.arrayContaining( localSources ) );
-
-		localSources = [
-			'/path/to/wp-plugins:/var/www/html/wp-content/plugins',
-			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'/path/to/local/plugin:/var/www/html/wp-content/plugins/test-name',
-			'/path/to/local/theme:/var/www/html/wp-content/themes/test-theme',
-		];
-		expect( testsVolumes ).toEqual(
-			expect.arrayContaining( localSources )
-		);
-	} );
-
-	it( 'should not map the default phpunit uploads directory if the user has specified their own directory', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/uploads': {
-					path: '/path/to/wp-uploads',
-				},
-			},
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: envConfig },
-		} );
-		const expectedVolumes = [
-			'tests-wordpress:/var/www/html',
-			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'/path/to/wp-uploads:/var/www/html/wp-content/uploads',
-		];
-		expect( dockerConfig.services.phpunit.volumes ).toEqual(
-			expectedVolumes
-		);
-	} );
-
-	it( 'should map the default phpunit uploads directory even if the user has specified their own directory only for the development instance', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/uploads': {
-					path: '/path/to/wp-uploads',
-				},
-			},
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: CONFIG },
-		} );
-		const expectedVolumes = [
-			'tests-wordpress:/var/www/html',
-			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'phpunit-uploads:/var/www/html/wp-content/uploads',
-		];
-		expect( dockerConfig.services.phpunit.volumes ).toEqual(
-			expectedVolumes
-		);
-	} );
-
-	it( 'should create "wordpress" and "tests-wordpress" volumes if they are needed by containers', () => {
-		// CONFIG has no coreSource entry, so there are no core sources on the
-		// local filesystem, so a volume should be created to contain core
-		// sources.
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: CONFIG, tests: CONFIG },
-		} );
-
-		expect( dockerConfig.volumes.wordpress ).not.toBe( undefined );
-		expect( dockerConfig.volumes[ 'tests-wordpress' ] ).not.toBe(
-			undefined
-		);
-	} );
-
-	it( 'should NOT create "wordpress" and "tests-wordpress" volumes if they are not needed by containers', () => {
-		const envConfig = {
-			...CONFIG,
-			coreSource: {
-				path: '/some/random/path',
-				local: true,
-			},
-		};
-
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: envConfig },
-		} );
-
-		expect( dockerConfig.volumes.wordpress ).toBe( undefined );
-		expect( dockerConfig.volumes[ 'tests-wordpress' ] ).toBe( undefined );
-	} );
-} );
diff --git a/packages/env/test/parse-config.js b/packages/env/test/parse-config.js
deleted file mode 100644
index c72bbd4f34e28a..00000000000000
--- a/packages/env/test/parse-config.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-const _path = require( 'path' );
-
-/**
- * Internal dependencies
- */
-const { parseSourceString } = require( '../lib/config/parse-config' );
-
-const parseSourceStringOptions = { workDirectoryPath: '.' };
-const currentDirectory = _path.resolve( '.' );
-
-describe( 'parseSourceString', () => {
-	it( 'returns null for null source', () => {
-		const wpSource = parseSourceString( null, {} );
-		expect( wpSource ).toBeNull();
-	} );
-} );
-
-const gitTests = [
-	{
-		sourceString: 'ssh://git@github.com/short.git',
-		url: 'ssh://git@github.com/short.git',
-		ref: undefined,
-		path: currentDirectory + '/short',
-		clonePath: currentDirectory + '/short',
-		basename: 'short',
-	},
-	{
-		sourceString: 'ssh://git@github.com/owner/long/path/repo.git',
-		url: 'ssh://git@github.com/owner/long/path/repo.git',
-		ref: undefined,
-		path: currentDirectory + '/owner/long/path/repo',
-		clonePath: currentDirectory + '/owner/long/path/repo',
-		basename: 'repo',
-	},
-	{
-		sourceString: 'git+ssh://git@github.com/owner/repo.git#kitchen-sink',
-		url: 'git+ssh://git@github.com/owner/repo.git',
-		ref: 'kitchen-sink',
-		path: currentDirectory + '/owner/repo',
-		clonePath: currentDirectory + '/owner/repo',
-		basename: 'repo',
-	},
-];
-
-describe.each( gitTests )( 'parseSourceString', ( source ) => {
-	it( `parses ${ source.sourceString }`, () => {
-		const { type, url, ref, path, clonePath, basename } = parseSourceString(
-			source.sourceString,
-			parseSourceStringOptions
-		);
-		expect( type ).toBe( 'git' );
-		expect( url ).toBe( source.url );
-		expect( ref ).toBe( source.ref );
-		expect( path ).toBe( source.path );
-		expect( clonePath ).toBe( source.clonePath );
-		expect( basename ).toBe( source.basename );
-	} );
-} );
diff --git a/packages/escape-html/.npmrc b/packages/escape-html/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/escape-html/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 24b5603e624513..d1eff0c72fed56 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+### Internal
+
+-   Refactor to TypeScript ([#62586](https://github.com/WordPress/gutenberg/pull/62586)).
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
+## 2.57.0 (2024-05-02)
+
+## 2.56.0 (2024-04-19)
+
+## 2.55.0 (2024-04-03)
+
+## 2.54.0 (2024-03-21)
+
+## 2.53.0 (2024-03-06)
+
+## 2.52.0 (2024-02-21)
+
+## 2.51.0 (2024-02-09)
+
+## 2.50.0 (2024-01-24)
+
+## 2.49.0 (2024-01-10)
+
+## 2.48.0 (2023-12-13)
+
+## 2.47.0 (2023-11-29)
+
+## 2.46.0 (2023-11-16)
+
+## 2.45.0 (2023-11-02)
+
+## 2.44.0 (2023-10-18)
+
+## 2.43.0 (2023-10-05)
+
+## 2.42.0 (2023-09-20)
+
+## 2.41.0 (2023-08-31)
+
+## 2.40.0 (2023-08-16)
+
+## 2.39.0 (2023-08-10)
+
+## 2.38.0 (2023-07-20)
+
+## 2.37.0 (2023-07-05)
+
+## 2.36.0 (2023-06-23)
+
+## 2.35.0 (2023-06-07)
+
+## 2.34.0 (2023-05-24)
+
+## 2.33.0 (2023-05-10)
+
+## 2.32.0 (2023-04-26)
+
+## 2.31.0 (2023-04-12)
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -57,7 +165,7 @@
 
 ## 1.8.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#20669](https://github.com/WordPress/gutenberg/pull/20669))
 
diff --git a/packages/escape-html/README.md b/packages/escape-html/README.md
index 386827c31da969..c6bdbb4c600ceb 100644
--- a/packages/escape-html/README.md
+++ b/packages/escape-html/README.md
@@ -18,10 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ### escapeAmpersand
 
-Returns a string with ampersands escaped. Note that this is an imperfect
-implementation, where only ampersands which do not appear as a pattern of
-named, decimal, or hexadecimal character references are escaped. Invalid
-named references (i.e. ambiguous ampersand) are still permitted.
+Returns a string with ampersands escaped. Note that this is an imperfect implementation, where only ampersands which do not appear as a pattern of named, decimal, or hexadecimal character references are escaped. Invalid named references (i.e. ambiguous ampersand) are still permitted.
 
 _Related_
 
@@ -64,9 +61,7 @@ _Returns_
 
 ### escapeEditableHTML
 
-Returns an escaped Editable HTML element value. This is different from
-`escapeHTML`, because for editable HTML, ALL ampersands must be escaped in
-order to render the content correctly on the page.
+Returns an escaped Editable HTML element value. This is different from `escapeHTML`, because for editable HTML, ALL ampersands must be escaped in order to render the content correctly on the page.
 
 _Parameters_
 
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 16eee26fa4f4f1..12e9ae354defa3 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "2.22.0",
+	"version": "3.13.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,15 +19,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/escape-html/src/escape-greater.js b/packages/escape-html/src/escape-greater.js
deleted file mode 100644
index f761a81e16ae61..00000000000000
--- a/packages/escape-html/src/escape-greater.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Returns a string with greater-than sign replaced.
- *
- * Note that if a resolution for Trac#45387 comes to fruition, it is no longer
- * necessary for `__unstableEscapeGreaterThan` to exist.
- *
- * See: https://core.trac.wordpress.org/ticket/45387
- *
- * @param {string} value Original string.
- *
- * @return {string} Escaped string.
- */
-export default function __unstableEscapeGreaterThan( value ) {
-	return value.replace( />/g, '&gt;' );
-}
diff --git a/packages/escape-html/src/escape-greater.ts b/packages/escape-html/src/escape-greater.ts
new file mode 100644
index 00000000000000..6e5956dc47e8f3
--- /dev/null
+++ b/packages/escape-html/src/escape-greater.ts
@@ -0,0 +1,15 @@
+/**
+ * Returns a string with greater-than sign replaced.
+ *
+ * Note that if a resolution for Trac#45387 comes to fruition, it is no longer
+ * necessary for `__unstableEscapeGreaterThan` to exist.
+ *
+ * See: https://core.trac.wordpress.org/ticket/45387
+ *
+ * @param value Original string.
+ *
+ * @return Escaped string.
+ */
+export default function __unstableEscapeGreaterThan( value: string ): string {
+	return value.replace( />/g, '&gt;' );
+}
diff --git a/packages/escape-html/src/index.js b/packages/escape-html/src/index.js
deleted file mode 100644
index 8ddce62c443257..00000000000000
--- a/packages/escape-html/src/index.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Internal dependencies
- */
-import __unstableEscapeGreaterThan from './escape-greater';
-
-/**
- * Regular expression matching invalid attribute names.
- *
- * "Attribute names must consist of one or more characters other than controls,
- * U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (/), U+003D (=),
- * and noncharacters."
- *
- * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
- *
- * @type {RegExp}
- */
-const REGEXP_INVALID_ATTRIBUTE_NAME = /[\u007F-\u009F "'>/="\uFDD0-\uFDEF]/;
-
-/**
- * Returns a string with ampersands escaped. Note that this is an imperfect
- * implementation, where only ampersands which do not appear as a pattern of
- * named, decimal, or hexadecimal character references are escaped. Invalid
- * named references (i.e. ambiguous ampersand) are still permitted.
- *
- * @see https://w3c.github.io/html/syntax.html#character-references
- * @see https://w3c.github.io/html/syntax.html#ambiguous-ampersand
- * @see https://w3c.github.io/html/syntax.html#named-character-references
- *
- * @param {string} value Original string.
- *
- * @return {string} Escaped string.
- */
-export function escapeAmpersand( value ) {
-	return value.replace( /&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;' );
-}
-
-/**
- * Returns a string with quotation marks replaced.
- *
- * @param {string} value Original string.
- *
- * @return {string} Escaped string.
- */
-export function escapeQuotationMark( value ) {
-	return value.replace( /"/g, '&quot;' );
-}
-
-/**
- * Returns a string with less-than sign replaced.
- *
- * @param {string} value Original string.
- *
- * @return {string} Escaped string.
- */
-export function escapeLessThan( value ) {
-	return value.replace( /</g, '&lt;' );
-}
-
-/**
- * Returns an escaped attribute value.
- *
- * @see https://w3c.github.io/html/syntax.html#elements-attributes
- *
- * "[...] the text cannot contain an ambiguous ampersand [...] must not contain
- * any literal U+0022 QUOTATION MARK characters (")"
- *
- * Note we also escape the greater than symbol, as this is used by wptexturize to
- * split HTML strings. This is a WordPress specific fix
- *
- * Note that if a resolution for Trac#45387 comes to fruition, it is no longer
- * necessary for `__unstableEscapeGreaterThan` to be used.
- *
- * See: https://core.trac.wordpress.org/ticket/45387
- *
- * @param {string} value Attribute value.
- *
- * @return {string} Escaped attribute value.
- */
-export function escapeAttribute( value ) {
-	return __unstableEscapeGreaterThan(
-		escapeQuotationMark( escapeAmpersand( value ) )
-	);
-}
-
-/**
- * Returns an escaped HTML element value.
- *
- * @see https://w3c.github.io/html/syntax.html#writing-html-documents-elements
- *
- * "the text must not contain the character U+003C LESS-THAN SIGN (<) or an
- * ambiguous ampersand."
- *
- * @param {string} value Element value.
- *
- * @return {string} Escaped HTML element value.
- */
-export function escapeHTML( value ) {
-	return escapeLessThan( escapeAmpersand( value ) );
-}
-
-/**
- * Returns an escaped Editable HTML element value. This is different from
- * `escapeHTML`, because for editable HTML, ALL ampersands must be escaped in
- * order to render the content correctly on the page.
- *
- * @param {string} value Element value.
- *
- * @return {string} Escaped HTML element value.
- */
-export function escapeEditableHTML( value ) {
-	return escapeLessThan( value.replace( /&/g, '&amp;' ) );
-}
-
-/**
- * Returns true if the given attribute name is valid, or false otherwise.
- *
- * @param {string} name Attribute name to test.
- *
- * @return {boolean} Whether attribute is valid.
- */
-export function isValidAttributeName( name ) {
-	return ! REGEXP_INVALID_ATTRIBUTE_NAME.test( name );
-}
diff --git a/packages/escape-html/src/index.ts b/packages/escape-html/src/index.ts
new file mode 100644
index 00000000000000..71206695bb7d3b
--- /dev/null
+++ b/packages/escape-html/src/index.ts
@@ -0,0 +1,122 @@
+/**
+ * Internal dependencies
+ */
+import __unstableEscapeGreaterThan from './escape-greater';
+
+/**
+ * Regular expression matching invalid attribute names.
+ *
+ * "Attribute names must consist of one or more characters other than controls,
+ * U+0020 SPACE, U+0022 ("), U+0027 ('), U+003E (>), U+002F (/), U+003D (=),
+ * and noncharacters."
+ *
+ * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+ */
+const REGEXP_INVALID_ATTRIBUTE_NAME: RegExp =
+	/[\u007F-\u009F "'>/="\uFDD0-\uFDEF]/;
+
+/**
+ * Returns a string with ampersands escaped. Note that this is an imperfect
+ * implementation, where only ampersands which do not appear as a pattern of
+ * named, decimal, or hexadecimal character references are escaped. Invalid
+ * named references (i.e. ambiguous ampersand) are still permitted.
+ *
+ * @see https://w3c.github.io/html/syntax.html#character-references
+ * @see https://w3c.github.io/html/syntax.html#ambiguous-ampersand
+ * @see https://w3c.github.io/html/syntax.html#named-character-references
+ *
+ * @param value Original string.
+ *
+ * @return Escaped string.
+ */
+export function escapeAmpersand( value: string ): string {
+	return value.replace( /&(?!([a-z0-9]+|#[0-9]+|#x[a-f0-9]+);)/gi, '&amp;' );
+}
+
+/**
+ * Returns a string with quotation marks replaced.
+ *
+ * @param value Original string.
+ *
+ * @return Escaped string.
+ */
+export function escapeQuotationMark( value: string ): string {
+	return value.replace( /"/g, '&quot;' );
+}
+
+/**
+ * Returns a string with less-than sign replaced.
+ *
+ * @param value Original string.
+ *
+ * @return Escaped string.
+ */
+export function escapeLessThan( value: string ): string {
+	return value.replace( /</g, '&lt;' );
+}
+
+/**
+ * Returns an escaped attribute value.
+ *
+ * @see https://w3c.github.io/html/syntax.html#elements-attributes
+ *
+ * "[...] the text cannot contain an ambiguous ampersand [...] must not contain
+ * any literal U+0022 QUOTATION MARK characters (")"
+ *
+ * Note we also escape the greater than symbol, as this is used by wptexturize to
+ * split HTML strings. This is a WordPress specific fix
+ *
+ * Note that if a resolution for Trac#45387 comes to fruition, it is no longer
+ * necessary for `__unstableEscapeGreaterThan` to be used.
+ *
+ * See: https://core.trac.wordpress.org/ticket/45387
+ *
+ * @param value Attribute value.
+ *
+ * @return Escaped attribute value.
+ */
+export function escapeAttribute( value: string ): string {
+	return __unstableEscapeGreaterThan(
+		escapeQuotationMark( escapeAmpersand( value ) )
+	);
+}
+
+/**
+ * Returns an escaped HTML element value.
+ *
+ * @see https://w3c.github.io/html/syntax.html#writing-html-documents-elements
+ *
+ * "the text must not contain the character U+003C LESS-THAN SIGN (<) or an
+ * ambiguous ampersand."
+ *
+ * @param value Element value.
+ *
+ * @return Escaped HTML element value.
+ */
+export function escapeHTML( value: string ): string {
+	return escapeLessThan( escapeAmpersand( value ) );
+}
+
+/**
+ * Returns an escaped Editable HTML element value. This is different from
+ * `escapeHTML`, because for editable HTML, ALL ampersands must be escaped in
+ * order to render the content correctly on the page.
+ *
+ * @param value Element value.
+ *
+ * @return Escaped HTML element value.
+ */
+export function escapeEditableHTML( value: string ): string {
+	return escapeLessThan( value.replace( /&/g, '&amp;' ) );
+}
+
+/**
+ * Returns true if the given attribute name is valid, or false otherwise.
+ *
+ * @param name Attribute name to test.
+ *
+ * @return Whether attribute is valid.
+ */
+export function isValidAttributeName( name: string ): boolean {
+	return ! REGEXP_INVALID_ATTRIBUTE_NAME.test( name );
+}
diff --git a/packages/escape-html/src/test/index.js b/packages/escape-html/src/test/index.js
deleted file mode 100644
index 8ba0fb41d2ea9f..00000000000000
--- a/packages/escape-html/src/test/index.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	escapeAmpersand,
-	escapeQuotationMark,
-	escapeLessThan,
-	escapeAttribute,
-	escapeHTML,
-	isValidAttributeName,
-	escapeEditableHTML,
-} from '../';
-import __unstableEscapeGreaterThan from '../escape-greater';
-
-function testUnstableEscapeGreaterThan( implementation ) {
-	it( 'should escape greater than', () => {
-		const result = implementation( 'Chicken > Ribs' );
-		expect( result ).toBe( 'Chicken &gt; Ribs' );
-	} );
-}
-
-function testEscapeAmpersand( implementation ) {
-	it( 'should escape ampersand', () => {
-		const result = implementation(
-			'foo & bar &amp; &AMP; baz &#931; &#bad; &#x3A3; &#X3a3; &#xevil;'
-		);
-
-		expect( result ).toBe(
-			'foo &amp; bar &amp; &AMP; baz &#931; &amp;#bad; &#x3A3; &#X3a3; &amp;#xevil;'
-		);
-	} );
-}
-
-function testEscapeQuotationMark( implementation ) {
-	it( 'should escape quotation mark', () => {
-		const result = implementation( '"Be gone!"' );
-
-		expect( result ).toBe( '&quot;Be gone!&quot;' );
-	} );
-}
-
-function testEscapeLessThan( implementation ) {
-	it( 'should escape less than', () => {
-		const result = implementation( 'Chicken < Ribs' );
-
-		expect( result ).toBe( 'Chicken &lt; Ribs' );
-	} );
-}
-
-describe( 'escapeAmpersand', () => {
-	testEscapeAmpersand( escapeAmpersand );
-} );
-
-describe( 'escapeQuotationMark', () => {
-	testEscapeQuotationMark( escapeQuotationMark );
-} );
-
-describe( 'escapeLessThan', () => {
-	testEscapeLessThan( escapeLessThan );
-} );
-
-describe( 'escapeGreaterThan', () => {
-	testUnstableEscapeGreaterThan( __unstableEscapeGreaterThan );
-} );
-
-describe( 'escapeAttribute', () => {
-	testEscapeAmpersand( escapeAttribute );
-	testEscapeQuotationMark( escapeAttribute );
-	testUnstableEscapeGreaterThan( escapeAttribute );
-} );
-
-describe( 'escapeHTML', () => {
-	testEscapeAmpersand( escapeHTML );
-	testEscapeLessThan( escapeHTML );
-} );
-
-describe( 'isValidAttributeName', () => {
-	it( 'should return false for attribute with controls', () => {
-		const result = isValidAttributeName( 'bad\u007F' );
-
-		expect( result ).toBe( false );
-	} );
-
-	it( 'should return false for attribute with non-permitted characters', () => {
-		const result = isValidAttributeName( 'bad"' );
-
-		expect( result ).toBe( false );
-	} );
-
-	it( 'should return false for attribute with noncharacters', () => {
-		const result = isValidAttributeName( 'bad\uFDD0' );
-
-		expect( result ).toBe( false );
-	} );
-
-	it( 'should return true for valid attribute name', () => {
-		const result = isValidAttributeName( 'good' );
-
-		expect( result ).toBe( true );
-	} );
-} );
-
-describe( 'escapeEditableHTML', () => {
-	it( 'should escape < and all ampersands', () => {
-		const result = escapeEditableHTML(
-			'<a href="https://w.org">WP</a> & &lt;strong&gt;'
-		);
-
-		expect( result ).toBe(
-			'&lt;a href="https://w.org">WP&lt;/a> &amp; &amp;lt;strong&amp;gt;'
-		);
-	} );
-} );
diff --git a/packages/escape-html/src/test/index.ts b/packages/escape-html/src/test/index.ts
new file mode 100644
index 00000000000000..6862fa3a1d18f2
--- /dev/null
+++ b/packages/escape-html/src/test/index.ts
@@ -0,0 +1,115 @@
+/**
+ * Internal dependencies
+ */
+import {
+	escapeAmpersand,
+	escapeQuotationMark,
+	escapeLessThan,
+	escapeAttribute,
+	escapeHTML,
+	isValidAttributeName,
+	escapeEditableHTML,
+} from '..';
+import __unstableEscapeGreaterThan from '../escape-greater';
+
+type Implementation = ( str: string ) => string;
+
+function testUnstableEscapeGreaterThan( implementation: Implementation ) {
+	it( 'should escape greater than', () => {
+		const result = implementation( 'Chicken > Ribs' );
+		expect( result ).toBe( 'Chicken &gt; Ribs' );
+	} );
+}
+
+function testEscapeAmpersand( implementation: Implementation ) {
+	it( 'should escape ampersand', () => {
+		const result = implementation(
+			'foo & bar &amp; &AMP; baz &#931; &#bad; &#x3A3; &#X3a3; &#xevil;'
+		);
+
+		expect( result ).toBe(
+			'foo &amp; bar &amp; &AMP; baz &#931; &amp;#bad; &#x3A3; &#X3a3; &amp;#xevil;'
+		);
+	} );
+}
+
+function testEscapeQuotationMark( implementation: Implementation ) {
+	it( 'should escape quotation mark', () => {
+		const result = implementation( '"Be gone!"' );
+
+		expect( result ).toBe( '&quot;Be gone!&quot;' );
+	} );
+}
+
+function testEscapeLessThan( implementation: Implementation ) {
+	it( 'should escape less than', () => {
+		const result = implementation( 'Chicken < Ribs' );
+
+		expect( result ).toBe( 'Chicken &lt; Ribs' );
+	} );
+}
+
+describe( 'escapeAmpersand', () => {
+	testEscapeAmpersand( escapeAmpersand );
+} );
+
+describe( 'escapeQuotationMark', () => {
+	testEscapeQuotationMark( escapeQuotationMark );
+} );
+
+describe( 'escapeLessThan', () => {
+	testEscapeLessThan( escapeLessThan );
+} );
+
+describe( 'escapeGreaterThan', () => {
+	testUnstableEscapeGreaterThan( __unstableEscapeGreaterThan );
+} );
+
+describe( 'escapeAttribute', () => {
+	testEscapeAmpersand( escapeAttribute );
+	testEscapeQuotationMark( escapeAttribute );
+	testUnstableEscapeGreaterThan( escapeAttribute );
+} );
+
+describe( 'escapeHTML', () => {
+	testEscapeAmpersand( escapeHTML );
+	testEscapeLessThan( escapeHTML );
+} );
+
+describe( 'isValidAttributeName', () => {
+	it( 'should return false for attribute with controls', () => {
+		const result = isValidAttributeName( 'bad\u007F' );
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return false for attribute with non-permitted characters', () => {
+		const result = isValidAttributeName( 'bad"' );
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return false for attribute with noncharacters', () => {
+		const result = isValidAttributeName( 'bad\uFDD0' );
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return true for valid attribute name', () => {
+		const result = isValidAttributeName( 'good' );
+
+		expect( result ).toBe( true );
+	} );
+} );
+
+describe( 'escapeEditableHTML', () => {
+	it( 'should escape < and all ampersands', () => {
+		const result = escapeEditableHTML(
+			'<a href="https://w.org">WP</a> & &lt;strong&gt;'
+		);
+
+		expect( result ).toBe(
+			'&lt;a href="https://w.org">WP&lt;/a> &amp; &amp;lt;strong&amp;gt;'
+		);
+	} );
+} );
diff --git a/packages/escape-html/tsconfig.json b/packages/escape-html/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/escape-html/tsconfig.json
+++ b/packages/escape-html/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/eslint-plugin/.npmrc b/packages/eslint-plugin/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/eslint-plugin/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 0e2956d98afb43..a53fe75dee448f 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,175 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   The minimum required TypeScript version changed to 5 ([#67461](https://github.com/WordPress/gutenberg/pull/67461))
+
+## 21.6.0 (2024-11-27)
+
+## 21.5.0 (2024-11-16)
+
+## 21.4.0 (2024-10-30)
+
+## 21.3.0 (2024-10-16)
+
+## 21.2.0 (2024-10-03)
+
+## 21.1.0 (2024-09-19)
+
+## 21.0.0 (2024-09-05)
+
+### Breaking Changes
+
+-   Add [`@wordpress/i18n-no-flanking-whitespace`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
+-   Add [`@wordpress/i18n-hyphenated-range`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md) to the recommended i18n ruleset ([#64710](https://github.com/WordPress/gutenberg/pull/64710).
+
+## 20.3.0 (2024-08-21)
+
+## 20.2.0 (2024-08-07)
+
+## 20.1.0 (2024-07-24)
+
+## 20.0.0 (2024-07-10)
+
+### Breaking Changes
+
+-   Add [`@typescript-eslint/no-unused-vars` rule](https://typescript-eslint.io/rules/no-unused-vars) to the recommended TypeScript ruleset ([#62925](https://github.com/WordPress/gutenberg/pull/62925)).
+-   Add [`@typescript-eslint/method-signature-style` rule](https://typescript-eslint.io/rules/method-signature-style) to the recommended TypeScript ruleset ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+
+## 19.2.0 (2024-06-26)
+
+## 19.1.0 (2024-06-15)
+
+## 19.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   `@wordpress/is-gutenberg-plugin` rule has been replaced by `@wordpress/wp-global-usage` ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   `@wordpress/wp-process-env` rule has been added and included in the recommended configurations ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   `@wordpress/gutenberg-phase` rule has been removed (deprecated in v10.0.0) ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 18.1.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 18.0.0 (2024-05-02)
+
+### Breaking Changes
+
+-   Enable `curly` eslint rule when using prettier ([#61204](https://github.com/WordPress/gutenberg/pull/61204)).
+
+## 17.13.0 (2024-04-19)
+
+## 17.12.0 (2024-04-03)
+
+## 17.11.0 (2024-03-21)
+
+## 17.10.0 (2024-03-06)
+
+## 17.9.0 (2024-02-21)
+
+## 17.8.0 (2024-02-09)
+
+## 17.7.0 (2024-01-24)
+
+## 17.6.0 (2024-01-10)
+
+## 17.5.0 (2023-12-13)
+
+## 17.4.0 (2023-11-29)
+
+## 17.3.0 (2023-11-16)
+
+## 17.2.0 (2023-11-02)
+
+## 17.1.0 (2023-10-18)
+
+## 17.0.0 (2023-10-05)
+
+### Breaking Changes
+
+-   Change the required major version of Prettier from v2 to v3 ([#54775](https://github.com/WordPress/gutenberg/pull/54775)).
+
+## 16.0.0 (2023-09-20)
+
+### Breaking Changes
+
+-   The bundled `@typescript-eslint/parser` and `@typescript-eslint/eslint-plugin` dependencies has been updated from requiring ^5.62.0 to requiring ^6.4.1 ([#53975](https://github.com/WordPress/gutenberg/pull/53975)):
+    -   Removes the deprecated `@typescript-eslint/no-duplicate-imports` rule in favor of `import/no-duplicates`.
+
+### Enhancements
+
+-   Added a new `test-playwright` ruleset using [`eslint-plugin-playwright`](https://www.npmjs.com/package/eslint-plugin-playwright).
+-   The bundled `eslint-plugin-prettier` dependency has been updated from requiring `^3.3.0` to requiring `^5.0.0` ([#54539](https://github.com/WordPress/gutenberg/pull/54539)).
+
+## 15.1.0 (2023-08-31)
+
+## 15.0.0 (2023-08-16)
+
+### Breaking Changes
+
+-   The bundled `eslint-plugin-jsdoc` dependency has been updated from requiring ^39.6.9 to requiring ^46.4.6 ([#53629](https://github.com/WordPress/gutenberg/pull/53629)):
+    -   Removes `jsdoc/newline-after-description` rule in favor of `jsdoc/tag-lines` with option `startLines: 0` for "never" and `startLines: 1` for "always". Defaults now to `startLines: null`.
+    -   Removes `dropEndLines: true` from `jsdoc/tag-lines` in favor of option `endLines: 0`.
+    -   Drops `jsdoc/tag-lines` rule's `noEndLines: true` in favor of `applyToEndTag: false`.
+    -   Disables the newly introduced `jsdoc/no-defaults` rule.
+
+### Enhancements
+
+-   Support Typescript 5 and 5.1 by updating both `@typescript-eslint/parser` and `@typescript-eslint/eslint-plugin` to version `^5.62.0`. ([#52621](https://github.com/WordPress/gutenberg/pull/52621)).
+
+## 14.12.0 (2023-08-10)
+
+## 14.11.0 (2023-07-20)
+
+## 14.10.0 (2023-07-05)
+
+## 14.9.0 (2023-06-23)
+
+## 14.8.0 (2023-06-07)
+
+## 14.7.0 (2023-05-24)
+
+## 14.6.0 (2023-05-10)
+
+### Enhancements
+
+-   Validate dependencies in `useSelect` and `useSuspenseSelect` hooks. ([#49900](https://github.com/WordPress/gutenberg/pull/49900)).
+
+## 14.5.0 (2023-04-26)
+
+## 14.4.0 (2023-04-12)
+
+## 14.3.0 (2023-03-29)
+
+## 14.2.0 (2023-03-15)
+
+## 14.1.0 (2023-03-01)
+
+## 14.0.0 (2023-02-15)
+
+### Breaking Changes
+
+-   Increase the severity of the rule `jsdoc/check-line-alignment` from `warn` to `error`. ([#47878](https://github.com/WordPress/gutenberg/pull/47878)).
+
+## 13.10.0 (2023-02-01)
+
+-   The bundled `eslint-plugin-jsdoc` dependency has been updated from requiring `^37.0.3` to requiring `^39.6.9`
+
+### Enhancements
+
+-   Bump `eslint-plugin-jest` version to 27.2.1.
+
+## 13.9.0 (2023-01-11)
+
+## 13.8.0 (2023-01-02)
+
+## 13.7.0 (2022-12-14)
+
 ## 13.6.0 (2022-11-16)
 
 ## 13.5.0 (2022-11-02)
@@ -14,14 +183,14 @@
 
 ## 13.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 -   Remove all rules targeting test files from the `recommended` and `recommended-with-formatting` presets when Jest package is installed ([#43272](https://github.com/WordPress/gutenberg/pull/43272)).
 
 ## 12.8.0 (2022-07-27)
 
-### Code Quality
+### Internal
 
 -   Remove deprecated rules `no-negated-in-lhs` replaced with `no-unsafe-negation`, and `jsx-a11y/label-has-for` replaced with `jsx-a11/label-has-associated-control` ([#42654](https://github.com/WordPress/gutenberg/pull/42654)).
 
@@ -31,7 +200,7 @@
 
 ## 12.2.0 (2022-05-04)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the `recommended` preset when Prettier is not installed ([#40634](https://github.com/WordPress/gutenberg/pull/40634)).
 
@@ -47,7 +216,7 @@
 
 -   The integration with [Prettier](https://prettier.io) is now optional and gets activated when the `prettier` package is installed in the project ([#39244](https://github.com/WordPress/gutenberg/pull/39244)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Replaced no-shadow eslint rule with @typescript-eslint/no-shadow ([#38665](https://github.com/WordPress/gutenberg/pull/38665)).
 
@@ -68,11 +237,11 @@
 -   The bundled `globals` dependency has been updated from requiring `^12.0.0` to requiring `^13.12.0` ([#36283](https://github.com/WordPress/gutenberg/pull/36283)).
 -   The `gutenberg-phase` rule has been deprecated and replaced by the `is-gutenberg-plugin` rule. ([#38202](https://github.com/WordPress/gutenberg/pull/38202))
 
-### Enhancement
+### Enhancements
 
 -   Omit verification for WordPress dependencies in the import statements since they get externalized when used with WordPress ([#37639](https://github.com/WordPress/gutenberg/pull/37639)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix Babel config resolution when a custom ESLint config present ([#37406](https://github.com/WordPress/gutenberg/pull/37406)). Warning: it won't recognize the `babel.config.json` file present in the project until the upstream bug in `cosmiconfig` is fixed.
 
@@ -85,35 +254,35 @@
 
 ## 9.2.0 (2021-10-12)
 
-### Enhancement
+### Enhancements
 
 -   The bundled `eslint-plugin-jsdoc` dependency has been updated from requiring `^34.1.0` to requiring `^36.0.8` ([#34338](https://github.com/WordPress/gutenberg/pull/34338)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Use Jest related rules only when the `jest` package is installed ([#33120](https://github.com/WordPress/gutenberg/pull/33120)).
 
 ## 9.1.2 (2021-09-09)
 
-### Bug Fix
+### Bug Fixes
 
 -   The recommended configuration will now respect `type` imports in TypeScript files ([#34055](https://github.com/WordPress/gutenberg/pull/34055)).
 
 ## 9.1.1 (2021-08-23)
 
-### Bug Fix
+### Bug Fixes
 
 -   Include `.jsx` extension when linting import statements in case TypeScript not present ([#33746](https://github.com/WordPress/gutenberg/pull/33746)).
 
 ## 9.1.0 (2021-07-21)
 
-### Enhancement
+### Enhancements
 
 -   Adds JSDoc alignment check ([#25300](https://github.com/WordPress/gutenberg/pull/25300)).
 
 ## 9.0.1 (2021-03-19)
 
-### Bug Fix
+### Bug Fixes
 
 -   Adds TypeScript as a peer dependency and makes it optional when not installed ([#29942](https://github.com/WordPress/gutenberg/pull/29942)).
 
@@ -130,7 +299,7 @@
 
 ## 8.0.1 (2021-01-28)
 
-### Bug Fix
+### Bug Fixes
 
 -   Add missing `eslint-plugin-import` npm dependency ([#28545](https://github.com/WordPress/gutenberg/pull/28545)).
 
@@ -153,9 +322,13 @@
 -   The bundled `eslint-plugin-react` dependency has been updated from requiring `^7.20.0` to requiring `^7.22.0` ([#27965](https://github.com/WordPress/gutenberg/pull/27965)).
 -   The bundled `eslint-plugin-react-hooks` dependency has been updated from requiring `^4.0.4` to requiring `^4.2.0` ([#27965](https://github.com/WordPress/gutenberg/pull/27965)).
 
+### New Features
+
+-   Enable `react-hooks/exhaustive-deps` rules in the react config in "warn" mode ([#24914](https://github.com/WordPress/gutenberg/pull/24914)).
+
 ## 7.4.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Add `no-unsafe-wp-apis` rule to discourage usage of unsafe APIs ([#27301](https://github.com/WordPress/gutenberg/pull/27301)).
 
@@ -213,7 +386,7 @@
 
 -   The severity of the rule, `jsdoc/no-undefined-types`, has been increased from `warn` to `error`. In addition, `JSX` has been added to the default list of defined types.
 
-### Improvements
+### Enhancements
 
 -   `'AsyncIterableIterator'` is now allowed as a valid TypeScript utility type.
 
@@ -271,7 +444,7 @@
 
 ## 3.4.1 (2020-02-04)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed `plugin:prettier/recommended` from `recommended` ruleset as it introduces breaking changes.
 
@@ -313,14 +486,14 @@
 
 -   [`@wordpress/no-unused-vars-before-return`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md) now supports an `excludePattern` option to exempt function calls by name.
 
-### Improvements
+### Enhancements
 
 -   The recommended `react` configuration specifies an option to [`@wordpress/no-unused-vars-before-return`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md) to exempt React hooks usage, by convention of hooks beginning with "use" prefix.
 -   The plugin now uses [`eslint-plugin-jsdoc`](https://github.com/gajus/eslint-plugin-jsdoc), rather than the `valid-jsdoc` rule, for more reliable linting of JSDoc blocks.
 
 ## 2.3.0 (2019-06-12)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fixed custom regular expression for the `no-restricted-syntax` rule enforcing translate function arguments. [#15839](https://github.com/WordPress/gutenberg/pull/15839).
 -   Fixed arguments checking of `_nx` for the `no-restricted-syntax` rule enforcing translate function arguments. [#15839](https://github.com/WordPress/gutenberg/pull/15839).
@@ -337,7 +510,7 @@
 
 ### New Features
 
--   The bundled `eslint-plugin-jsx-a11y` dependency has been updated from requiring `^6.0.2` to requiring `^6.2.1` (see new features added in [6.2.0](https://github.com/evcohen/eslint-plugin-jsx-a11y/releases/tag/v6.2.0) and [6.1.0](https://github.com/evcohen/eslint-plugin-jsx-a11y/releases/tag/v6.1.0)).
+-   The bundled `eslint-plugin-jsx-a11y` dependency has been updated from requiring `^6.0.2` to requiring `^6.2.1` (see new features added in [6.2.0](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.2.0) and [6.1.0](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/releases/tag/v6.1.0)).
 -   The bundled `eslint-plugin-react` dependency has been updated from requiring `7.7.0` to requiring `^7.12.4` (see new features added in [7.12.0](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.12.0), [7.11.0](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.11.0), [7.10.0](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.10.0), [7.9.0](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.9.0) and [7.8.0](https://github.com/yannickcr/eslint-plugin-react/releases/tag/v7.8.0)).
 
 ## 2.0.0 (2019-03-06)
diff --git a/packages/eslint-plugin/README.md b/packages/eslint-plugin/README.md
index 3b49f4616b0f60..cde410fc9c9926 100644
--- a/packages/eslint-plugin/README.md
+++ b/packages/eslint-plugin/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/eslint-plugin --save-dev
 ```
 
-**Note**: This package requires `node` 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
@@ -24,7 +24,7 @@ To opt-in to the default configuration, extend your own project's `.eslintrc` fi
 
 Refer to the [ESLint documentation on Shareable Configs](http://eslint.org/docs/developer-guide/shareable-configs) for more information.
 
-The `recommended` preset will include rules governing an ES2015+ environment, and includes rules from the [`eslint-plugin-jsdoc`](https://github.com/gajus/eslint-plugin-jsdoc), [`eslint-plugin-jsx-a11y`](https://github.com/evcohen/eslint-plugin-jsx-a11y), [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react), and other similar plugins.
+The `recommended` preset will include rules governing an ES2015+ environment, and includes rules from the [`eslint-plugin-jsdoc`](https://github.com/gajus/eslint-plugin-jsdoc), [`eslint-plugin-jsx-a11y`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), [`eslint-plugin-react`](https://github.com/yannickcr/eslint-plugin-react), and other similar plugins.
 
 This preset offers an optional integration with the [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier) package that runs [Prettier](https://prettier.io) code formatter and reports differences as individual ESLint issues. You can activate it by installing the [`prettier`](https://www.npmjs.com/package/prettier) package separately with:
 
@@ -53,6 +53,7 @@ Alternatively, you can opt-in to only the more granular rulesets offered by the
 -   `react` – rules for React components.
 -   `test-e2e` – rules for end-to-end tests written in Puppeteer.
 -   `test-unit`– rules for unit tests written in Jest.
+-   `test-playwright` – rules for end-to-end tests written in Playwright.
 
 For example, if your project does not use React, you could consider extending including only the ESNext rules in your project using the following `extends` definition:
 
@@ -68,25 +69,26 @@ The granular rulesets will not define any environment globals. As such, if they
 
 ### Rules
 
-| Rule                                                                                                                                                                 | Description                                                                                    | Recommended |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------- |
-| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md)                 | Discourage passing string literals to reference data stores                                    |             |
-| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md)                                           | Enforce dependencies docblocks formatting                                                      | ✓           |
-| [is-gutenberg-plugin](docs/rules/is-gutenberg-plugin.md)                                                                                                             | Governs the use of the `process.env.IS_GUTENBERG_PLUGIN` constant                              | ✓           |
-| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property | ✓           |
-| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls                                             | ✓           |
-| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packages                                 | ✓           |
-| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return                                   | ✓           |
-| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component                                                      |             |
-| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md)                                                 | Enforce valid sprintf usage                                                                    | ✓           |
-| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md)                                                 | Disallow using three dots in translatable strings                                              | ✓           |
-| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md)               | Disallow collapsible whitespace in translatable strings                                        | ✓           |
-| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md)                         | Prevent using only placeholders in translatable strings                                        | ✓           |
-| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md)                                         | Enforce string literals as translation function arguments                                      | ✓           |
-| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains                                                             | ✓           |
-| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments                                                             | ✓           |
-| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md)                     | Disallow leading or trailing whitespace in translatable strings                                |             |
-| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md)                                 | Disallow hyphenated numerical ranges in translatable strings                                   |             |
+| Rule                                                                                                                                                                 | Description                                                                                     | Recommended |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------- |
+| [data-no-store-string-literals](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/data-no-store-string-literals.md)                 | Discourage passing string literals to reference data stores.                                    |             |
+| [dependency-group](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/dependency-group.md)                                           | Enforce dependencies docblocks formatting.                                                      | ✓           |
+| [i18n-ellipsis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-ellipsis.md)                                                 | Disallow using three dots in translatable strings.                                              | ✓           |
+| [i18n-hyphenated-range](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-hyphenated-range.md)                                 | Disallow hyphenated numerical ranges in translatable strings.                                   |             |
+| [i18n-no-collapsible-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-collapsible-whitespace.md)               | Disallow collapsible whitespace in translatable strings.                                        | ✓           |
+| [i18n-no-flanking-whitespace](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-flanking-whitespace.md)                     | Disallow leading or trailing whitespace in translatable strings.                                |             |
+| [i18n-no-placeholders-only](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-placeholders-only.md)                         | Prevent using only placeholders in translatable strings.                                        | ✓           |
+| [i18n-no-variables](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-no-variables.md)                                         | Enforce string literals as translation function arguments.                                      | ✓           |
+| [i18n-text-domain](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-text-domain.md)                                           | Enforce passing valid text domains.                                                             | ✓           |
+| [i18n-translator-comments](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/i18n-translator-comments.md)                           | Enforce adding translator comments.                                                             | ✓           |
+| [no-base-control-with-label-without-id](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-base-control-with-label-without-id.md) | Disallow the usage of BaseControl component with a label prop set but omitting the id property. | ✓           |
+| [no-unguarded-get-range-at](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unguarded-get-range-at.md)                         | Disallow the usage of unguarded `getRangeAt` calls.                                             | ✓           |
+| [no-unsafe-wp-apis](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unsafe-wp-apis.md)                                         | Disallow the usage of unsafe APIs from `@wordpress/*` packagesl                                 | ✓           |
+| [no-unused-vars-before-return](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-unused-vars-before-return.md)                   | Disallow assigning variable values if unused before a return.                                   | ✓           |
+| [no-wp-process-env](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/no-wp-process-env.md)                                         | Disallow legacy usage of WordPress variables via `process.env` like `process.env.SCRIPT_DEBUG`. | ✓           |
+| [react-no-unsafe-timeout](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)                             | Disallow unsafe `setTimeout` in component.                                                      |             |
+| [valid-sprintf](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/valid-sprintf.md)                                                 | Enforce valid sprintf usage.                                                                    | ✓           |
+| [wp-global-usage](https://github.com/WordPress/gutenberg/tree/HEAD/packages/eslint-plugin/docs/rules/wp-global-usage.md)                                             | Enforce correct usage of WordPress globals like `globalThis.SCRIPT_DEBUG`.                      |             |
 
 ### Legacy
 
diff --git a/packages/eslint-plugin/configs/custom.js b/packages/eslint-plugin/configs/custom.js
index dcee5de349bad7..e6c67c0c6e4350 100644
--- a/packages/eslint-plugin/configs/custom.js
+++ b/packages/eslint-plugin/configs/custom.js
@@ -7,6 +7,7 @@ module.exports = {
 		'@wordpress/no-global-active-element': 'error',
 		'@wordpress/no-global-get-selection': 'error',
 		'@wordpress/no-unsafe-wp-apis': 'error',
+		'@wordpress/no-wp-process-env': 'error',
 	},
 	overrides: [
 		{
diff --git a/packages/eslint-plugin/configs/es5.js b/packages/eslint-plugin/configs/es5.js
index 076cccf6f21009..4b6abaac47a79e 100644
--- a/packages/eslint-plugin/configs/es5.js
+++ b/packages/eslint-plugin/configs/es5.js
@@ -72,7 +72,13 @@ module.exports = {
 				asyncArrow: 'always',
 			},
 		],
-		'space-in-parens': [ 'error', 'always' ],
+		'space-in-parens': [
+			'error',
+			'always',
+			{
+				exceptions: [ 'empty' ],
+			},
+		],
 		'space-infix-ops': 'error',
 		'space-unary-ops': [
 			'error',
diff --git a/packages/eslint-plugin/configs/i18n.js b/packages/eslint-plugin/configs/i18n.js
index c3271214e3ef5c..fb8cad233232d4 100644
--- a/packages/eslint-plugin/configs/i18n.js
+++ b/packages/eslint-plugin/configs/i18n.js
@@ -8,5 +8,7 @@ module.exports = {
 		'@wordpress/i18n-no-placeholders-only': 'error',
 		'@wordpress/i18n-no-variables': 'error',
 		'@wordpress/i18n-ellipsis': 'error',
+		'@wordpress/i18n-no-flanking-whitespace': 'error',
+		'@wordpress/i18n-hyphenated-range': 'error',
 	},
 };
diff --git a/packages/eslint-plugin/configs/jsdoc.js b/packages/eslint-plugin/configs/jsdoc.js
index d114241361a070..62effdb709b39e 100644
--- a/packages/eslint-plugin/configs/jsdoc.js
+++ b/packages/eslint-plugin/configs/jsdoc.js
@@ -21,9 +21,11 @@ const temporaryWordPressInternalTypes = [
 	'WPBlockTypeIcon',
 	'WPBlockTypeIconRender',
 	'WPBlockTypeIconDescriptor',
-	'WPComponent',
-	'WPElement',
 	'WPIcon',
+
+	// These two should be removed once we use the TS types from "react".
+	'Component',
+	'Element',
 ];
 
 /**
@@ -83,6 +85,7 @@ module.exports = {
 		},
 	},
 	rules: {
+		'jsdoc/no-defaults': 'off',
 		'jsdoc/no-undefined-types': [
 			'error',
 			{
@@ -105,7 +108,15 @@ module.exports = {
 		'jsdoc/require-param-description': 'off',
 		'jsdoc/require-returns': 'off',
 		'jsdoc/require-yields': 'off',
-		'jsdoc/tag-lines': 'off',
+		'jsdoc/tag-lines': [
+			1,
+			'any',
+			{
+				startLines: null,
+				endLines: 0,
+				applyToEndTag: false,
+			},
+		],
 		'jsdoc/no-multi-asterisks': [
 			'error',
 			{ preventAtMiddleLines: false },
@@ -113,7 +124,7 @@ module.exports = {
 		'jsdoc/check-access': 'error',
 		'jsdoc/check-alignment': 'error',
 		'jsdoc/check-line-alignment': [
-			'warn',
+			'error',
 			'always',
 			{
 				tags: [ 'param', 'arg', 'argument', 'property', 'prop' ],
@@ -127,7 +138,6 @@ module.exports = {
 		'jsdoc/check-values': 'off',
 		'jsdoc/empty-tags': 'error',
 		'jsdoc/implements-on-classes': 'error',
-		'jsdoc/newline-after-description': 'error',
 		'jsdoc/require-param': 'error',
 		'jsdoc/require-param-name': 'error',
 		'jsdoc/require-param-type': 'error',
diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js
index 61cf01f48833b6..04e4341c720be2 100644
--- a/packages/eslint-plugin/configs/react.js
+++ b/packages/eslint-plugin/configs/react.js
@@ -34,6 +34,12 @@ module.exports = {
 		'react/no-children-prop': 'off',
 		'react/prop-types': 'off',
 		'react/react-in-jsx-scope': 'off',
+		'react-hooks/exhaustive-deps': [
+			'warn',
+			{
+				additionalHooks: '^(useSelect|useSuspenseSelect)$',
+			},
+		],
 		'react-hooks/rules-of-hooks': 'error',
 	},
 };
diff --git a/packages/eslint-plugin/configs/recommended-with-formatting.js b/packages/eslint-plugin/configs/recommended-with-formatting.js
index 3c7ce025ce8fe9..2499d8656d0c04 100644
--- a/packages/eslint-plugin/configs/recommended-with-formatting.js
+++ b/packages/eslint-plugin/configs/recommended-with-formatting.js
@@ -16,6 +16,7 @@ const config = {
 	globals: {
 		window: true,
 		document: true,
+		SCRIPT_DEBUG: 'readonly',
 		wp: 'readonly',
 	},
 	settings: {
diff --git a/packages/eslint-plugin/configs/recommended.js b/packages/eslint-plugin/configs/recommended.js
index 76754361d9bb5f..df09d17beb6cbe 100644
--- a/packages/eslint-plugin/configs/recommended.js
+++ b/packages/eslint-plugin/configs/recommended.js
@@ -25,6 +25,12 @@ if ( isPackageInstalled( 'prettier' ) ) {
 	const prettierConfig = { ...defaultPrettierConfig, ...localPrettierConfig };
 	config.rules = {
 		'prettier/prettier': [ 'error', prettierConfig ],
+		// Prettier _disables_ this rule, but we want it!
+		// See https://github.com/prettier/eslint-config-prettier?tab=readme-ov-file#curly
+		// > This rule requires certain options.
+		// > …
+		// > If you like this rule, it can be used just fine with Prettier as long as you don’t use the "multi-line" or "multi-or-nest" option.
+		curly: [ 'error', 'all' ],
 	};
 }
 
@@ -45,15 +51,23 @@ if ( isPackageInstalled( 'typescript' ) ) {
 			parser: '@typescript-eslint/parser',
 			rules: {
 				'no-duplicate-imports': 'off',
-				'@typescript-eslint/no-duplicate-imports': 'error',
+				'import/no-duplicates': 'error',
 				// Don't require redundant JSDoc types in TypeScript files.
 				'jsdoc/require-param-type': 'off',
 				'jsdoc/require-returns-type': 'off',
-				// Handled by TS itself.
+				// Use eslint for unused variable and parameter detection.
+				// This overlaps with TypeScript noUnusedLocals and noUnusedParameters settings.
+				// TypeScript may only run on a subset of files. Prefer eslint which is more
+				// likely to run on the entire codebase.
 				'no-unused-vars': 'off',
+				'@typescript-eslint/no-unused-vars': [
+					'error',
+					{ ignoreRestSiblings: true },
+				],
 				// no-shadow doesn't work correctly in TS, so let's use a TS-dedicated version instead.
 				'no-shadow': 'off',
 				'@typescript-eslint/no-shadow': 'error',
+				'@typescript-eslint/method-signature-style': 'error',
 			},
 		},
 	];
diff --git a/packages/eslint-plugin/configs/test-playwright.js b/packages/eslint-plugin/configs/test-playwright.js
new file mode 100644
index 00000000000000..c3c72be05c1e97
--- /dev/null
+++ b/packages/eslint-plugin/configs/test-playwright.js
@@ -0,0 +1,3 @@
+module.exports = {
+	extends: [ 'plugin:playwright/recommended' ],
+};
diff --git a/packages/eslint-plugin/configs/test-unit.js b/packages/eslint-plugin/configs/test-unit.js
index 5d71776c0a778a..af922df9fdd74f 100644
--- a/packages/eslint-plugin/configs/test-unit.js
+++ b/packages/eslint-plugin/configs/test-unit.js
@@ -1,3 +1,9 @@
 module.exports = {
 	extends: [ 'plugin:jest/recommended' ],
+	rules: {
+		'jest/expect-expect': [
+			'error',
+			{ assertFunctionNames: [ 'expect', 'measurePerformance' ] },
+		],
+	},
 };
diff --git a/packages/eslint-plugin/docs/rules/dependency-group.md b/packages/eslint-plugin/docs/rules/dependency-group.md
index e3910544aedb71..8d0b53996ce22b 100644
--- a/packages/eslint-plugin/docs/rules/dependency-group.md
+++ b/packages/eslint-plugin/docs/rules/dependency-group.md
@@ -12,7 +12,7 @@ Examples of **incorrect** code for this rule:
 
 ```js
 import { camelCase } from 'change-case';
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
 import edit from './edit';
 ```
 
@@ -27,7 +27,7 @@ import { camelCase } from 'change-case';
 /*
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component } from 'react';
 
 /*
  * Internal dependencies
diff --git a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md b/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md
deleted file mode 100644
index 99b51cf5cbb93b..00000000000000
--- a/packages/eslint-plugin/docs/rules/is-gutenberg-plugin.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# The `IS_GUTENBERG_PLUGIN` global (is-gutenberg-plugin)
-
-To enable the use of feature flags in Gutenberg, the IS_GUTENBERG_PLUGIN global constant was introduced. This constant is replaced with a boolean value at build time using webpack's define plugin.
-
-There are a few rules around using this constant:
-
--   Only access `IS_GUTENBERG_PLUGIN` via `process.env`, e.g. `process.env.IS_GUTENBERG_PLUGIN`. This is required since webpack's define plugin only replaces exact matches of `process.env.IS_GUTENBERG_PLUGIN` in the codebase.
--   The `IS_GUTENBERG_PLUGIN` variable should only be used as a simple boolean expression.
--   `IS_GUTENBERG_PLUGIN` should only be used within the condition of an if statement, e.g. `if ( process.env.IS_GUTENBERG_PLUGIN ) { // implement feature here }` or ternary `process.env.IS_GUTENBERG_PLUGIN ? something : somethingElse`. This rule ensures code that is disabled through a feature flag is removed by dead code elimination.
-
-## Rule details
-
-Examples of **incorrect** code for this rule:
-
-```js
-if ( IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN == 1 ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN === true ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( true || process.env.IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-const isMyFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
-```
-
-Examples of **correct** code for this rule:
-
-```js
-if ( process.env.IS_GUTENBERG_PLUGIN ) {
-	// implement feature here.
-}
-```
-
-```js
-if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
-	return;
-}
-```
diff --git a/packages/eslint-plugin/docs/rules/no-wp-process-env.md b/packages/eslint-plugin/docs/rules/no-wp-process-env.md
new file mode 100644
index 00000000000000..46fa6ed431c200
--- /dev/null
+++ b/packages/eslint-plugin/docs/rules/no-wp-process-env.md
@@ -0,0 +1,23 @@
+# No WordPress process.env (no-wp-process-env)
+
+WordPress globals were accessed via `process.env` in the past. This practice created difficulty for
+package consumers and was removed.
+
+The correct way to access these globals is now via `globalThis`, e.g. `globalThis.SCRIPT_DEBUG`.
+This is safer for package consumers.
+
+This rule is fixable.
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```js
+process.env.SCRIPT_DEBUG;
+```
+
+Examples of **correct** code for this rule:
+
+```js
+globalThis.SCRIPT_DEBUG;
+```
diff --git a/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md b/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
index 87dc07bc9e62a2..8e203a2c82ba6d 100644
--- a/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
+++ b/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md
@@ -19,7 +19,7 @@ class MyComponent extends Component {
 	}
 }
 
-class MyComponent extends wp.element.Component {
+class MyComponent extends React.Component {
 	componentDidMount() {
 		setTimeout( fn );
 	}
@@ -48,7 +48,7 @@ class MyNotComponent {
 	}
 }
 
-class MyComponent extends wp.element.Component {
+class MyComponent extends React.Component {
 	componentDidMount() {
 		const { setTimeout } = this.props;
 		setTimeout( fn );
diff --git a/packages/eslint-plugin/docs/rules/wp-global-usage.md b/packages/eslint-plugin/docs/rules/wp-global-usage.md
new file mode 100644
index 00000000000000..d7b90b89258a90
--- /dev/null
+++ b/packages/eslint-plugin/docs/rules/wp-global-usage.md
@@ -0,0 +1,60 @@
+# WordPress global usage (wp-global-usage)
+
+To enable the use of feature flags in Gutenberg some globals are used, such as `IS_GUTENBERG_PLUGIN` and `SCRIPT_DEBUG`.
+
+There are a few rules around using this constant:
+
+-   Only access the globals via `globalThis`, e.g. `globalThis.IS_GUTENBERG_PLUGIN`. This allows the variables to be replaced compile time.
+-   The globals should only be used as a conditional test (negation is allowed).
+
+## Rule details
+
+Examples of **incorrect** code for this rule:
+
+```js
+if ( IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN == 1 ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN === true ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( true || globalThis.IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+const isMyFeatureActive = globalThis.IS_GUTENBERG_PLUGIN;
+```
+
+Examples of **correct** code for this rule:
+
+```js
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	// implement feature here.
+}
+```
+
+```js
+if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+	return;
+}
+```
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index a5be8bd4e450e5..1e75a2c131f229 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "13.6.0",
+	"version": "21.6.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,8 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.14.4"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"configs",
@@ -31,18 +31,19 @@
 	],
 	"main": "index.js",
 	"dependencies": {
-		"@babel/eslint-parser": "^7.16.0",
-		"@typescript-eslint/eslint-plugin": "^5.3.0",
-		"@typescript-eslint/parser": "^5.3.0",
-		"@wordpress/babel-preset-default": "file:../babel-preset-default",
-		"@wordpress/prettier-config": "file:../prettier-config",
+		"@babel/eslint-parser": "7.25.7",
+		"@typescript-eslint/eslint-plugin": "^6.4.1",
+		"@typescript-eslint/parser": "^6.4.1",
+		"@wordpress/babel-preset-default": "*",
+		"@wordpress/prettier-config": "*",
 		"cosmiconfig": "^7.0.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-import": "^2.25.2",
-		"eslint-plugin-jest": "^25.2.3",
-		"eslint-plugin-jsdoc": "^37.0.3",
+		"eslint-plugin-jest": "^27.4.3",
+		"eslint-plugin-jsdoc": "^46.4.6",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-prettier": "^3.3.0",
+		"eslint-plugin-playwright": "^0.15.3",
+		"eslint-plugin-prettier": "^5.0.0",
 		"eslint-plugin-react": "^7.27.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"globals": "^13.12.0",
@@ -51,8 +52,8 @@
 	"peerDependencies": {
 		"@babel/core": ">=7",
 		"eslint": ">=8",
-		"prettier": ">=2",
-		"typescript": ">=4"
+		"prettier": ">=3",
+		"typescript": ">=5"
 	},
 	"peerDependenciesMeta": {
 		"prettier": {
diff --git a/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js b/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
index 6157a78cfc3468..c7292d52c6e480 100644
--- a/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
+++ b/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
@@ -112,11 +112,6 @@ const invalid = [
 		`import { select } from '@wordpress/data'; select( 'core/notices' );`,
 		`import { select } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices'; select( noticesStore );`
 	),
-	// Replace edit-post with editPostStore.
-	createSuggestionTestCase(
-		`import { select } from '@wordpress/data'; select( 'core/edit-post' );`,
-		`import { select } from '@wordpress/data';\nimport { store as editPostStore } from '@wordpress/edit-post'; select( editPostStore );`
-	),
 ];
 const errors = [
 	{
diff --git a/packages/eslint-plugin/rules/__tests__/dependency-group.js b/packages/eslint-plugin/rules/__tests__/dependency-group.js
index 2db53e9ed666a1..1dac078aafb363 100644
--- a/packages/eslint-plugin/rules/__tests__/dependency-group.js
+++ b/packages/eslint-plugin/rules/__tests__/dependency-group.js
@@ -23,7 +23,7 @@ ruleTester.run( 'dependency-group', rule, {
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 
 /**
  * WordPress dependencies
@@ -41,7 +41,7 @@ import edit from './edit';`,
  * External dependencies
  */
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ const edit = require( './edit' );`,
 		{
 			code: `
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 /*
  * wordpress dependencies.
  */
@@ -83,7 +83,7 @@ import edit from './edit';`,
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import classnames from 'classnames';
+import clsx from 'clsx';;
 /**
  * WordPress dependencies
  */
@@ -96,7 +96,7 @@ import edit from './edit';`,
 		{
 			code: `
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 /*
  * wordpress dependencies.
  */
@@ -121,7 +121,7 @@ const edit = require( './edit' );`,
  * External dependencies
  */
 const { camelCase } = require( 'change-case' );
-const classnames = require( 'classnames' );
+const clsx = require( 'clsx' );
 /**
  * WordPress dependencies
  */
diff --git a/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js b/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
index df59a9bbe07083..59098aa9eac056 100644
--- a/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
+++ b/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
@@ -34,6 +34,23 @@ sprintf(
 // translators: %s: Color
 i18n.sprintf( i18n.__( 'Color: %s' ), color );`,
 		},
+		{
+			code: `
+sprintf(
+	/*
+	 * translators: %s is the name of the city we couldn't locate.
+	 * Replace the examples with cities related to your locale. Test that
+	 * they match the expected location and have upcoming events before
+	 * including them. If no cities related to your locale have events,
+	 * then use cities related to your locale that would be recognizable
+	 * to most users. Use only the city name itself, without any region
+	 * or country. Use the endonym (native locale name) instead of the
+	 * English name if possible.
+	 */
+	__( 'We couldn’t locate %s. Please try another nearby city. For example: Kansas City; Springfield; Portland.' ),
+templateParams.unknownCity
+);`,
+		},
 	],
 	invalid: [
 		{
diff --git a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js
deleted file mode 100644
index c2ffa8415269dd..00000000000000
--- a/packages/eslint-plugin/rules/__tests__/is-gutenberg-plugin.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * External dependencies
- */
-import { RuleTester } from 'eslint';
-
-/**
- * Internal dependencies
- */
-import rule from '../is-gutenberg-plugin';
-
-const ruleTester = new RuleTester( {
-	parserOptions: {
-		ecmaVersion: 6,
-	},
-} );
-
-const ERROR_MESSAGE =
-	'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.';
-
-ruleTester.run( 'is-gutenberg-plugin', rule, {
-	valid: [
-		{ code: `if ( process.env.IS_GUTENBERG_PLUGIN ) {}` },
-		{ code: `if ( ! process.env.IS_GUTENBERG_PLUGIN ) {}` },
-		{
-			// Ensure whitespace is ok.
-			code: `if (
-				process.env.
-				IS_GUTENBERG_PLUGIN
-			) {}`,
-		},
-		{ code: `const test = process.env.IS_GUTENBERG_PLUGIN ? foo : bar` },
-		{ code: `const test = ! process.env.IS_GUTENBERG_PLUGIN ? bar : foo` },
-		{
-			// Ensure whitespace is ok.
-			code: `const test = ! process.env.
-				IS_GUTENBERG_PLUGIN ? bar : foo`,
-		},
-	],
-	invalid: [
-		{
-			code: `if ( IS_GUTENBERG_PLUGIN ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( true ) { process.env.IS_GUTENBERG_PLUGIN === 2 }`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `if ( true || process.env.IS_GUTENBERG_PLUGIN === 2 ) {}`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-		{
-			code: `const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;`,
-			errors: [ { message: ERROR_MESSAGE } ],
-		},
-	],
-} );
diff --git a/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js
new file mode 100644
index 00000000000000..330ed560aea992
--- /dev/null
+++ b/packages/eslint-plugin/rules/__tests__/no-wp-process-env.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../no-wp-process-env';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'no-wp-process-env', rule, {
+	valid: [
+		{ code: 'process.env.NODE_ENV' },
+		{ code: 'process.env.WHATEVER' },
+		{ code: 'process.env[foo]' },
+		{ code: 'process.env["foo"]' },
+		{ code: `process['env']["foo"]` },
+		{ code: "process['env'][`foo`]" },
+		{ code: "process.env[`${ '' }IS_GUTENBERG_PLUGIN`]" },
+		{ code: `a.b.c` },
+		{ code: `x['y']['z']` },
+		{ code: `d[e][f]` },
+		{ code: `process[ (()=>'env')() ][ {_:'SCRIPT_DEBUG'}['_'] ]` },
+	],
+	invalid: [
+		{
+			code: 'process.env.IS_GUTENBERG_PLUGIN',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process.env.SCRIPT_DEBUG',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.SCRIPT_DEBUG',
+		},
+		{
+			code: 'process.env.IS_WORDPRESS_CORE',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_WORDPRESS_CORE',
+		},
+		{
+			code: `process['env']["IS_GUTENBERG_PLUGIN"]`,
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process[`env`][`IS_GUTENBERG_PLUGIN`]',
+			errors: [ { messageId: 'useGlobalThis' } ],
+			output: 'globalThis.IS_GUTENBERG_PLUGIN',
+		},
+		{
+			code: 'process.env.GUTENBERG_PHASE',
+			errors: [ { messageId: 'noGutenbergPhase' } ],
+		},
+	],
+} );
diff --git a/packages/eslint-plugin/rules/__tests__/wp-global-usage.js b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js
new file mode 100644
index 00000000000000..9d3dc9b2a29d72
--- /dev/null
+++ b/packages/eslint-plugin/rules/__tests__/wp-global-usage.js
@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import { RuleTester } from 'eslint';
+
+/**
+ * Internal dependencies
+ */
+import rule from '../wp-global-usage';
+
+const ruleTester = new RuleTester( {
+	parserOptions: {
+		ecmaVersion: 6,
+	},
+} );
+
+ruleTester.run( 'wp-global-usage', rule, {
+	valid: [
+		{ code: "const text = 'SCRIPT_DEBUG'" },
+		{ code: 'const config = { SCRIPT_DEBUG: true }' },
+		{ code: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}' },
+		{ code: 'if ( globalThis.IS_WORDPRESS_CORE ) {}' },
+		{ code: 'if ( globalThis.SCRIPT_DEBUG ) {}' },
+		{ code: 'if ( process.env.SCRIPT_DEBUG ) {}' },
+		{ code: 'if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {}' },
+		{
+			// Ensure whitespace is ok.
+			code: `if (
+				globalThis.
+				IS_GUTENBERG_PLUGIN
+			) {}`,
+		},
+		{ code: 'const test = globalThis.IS_GUTENBERG_PLUGIN ? foo : bar' },
+		{ code: 'const test = ! globalThis.IS_GUTENBERG_PLUGIN ? bar : foo' },
+		{
+			// Ensure whitespace is ok.
+			code: `const test = ! globalThis.
+				IS_GUTENBERG_PLUGIN ? bar : foo`,
+		},
+	],
+	invalid: [
+		{
+			code: 'if ( IS_GUTENBERG_PLUGIN ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( window.IS_GUTENBERG_PLUGIN ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( SCRIPT_DEBUG ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'SCRIPT_DEBUG' },
+				},
+			],
+			output: 'if ( globalThis.SCRIPT_DEBUG ) {}',
+		},
+		{
+			code: 'if ( IS_WORDPRESS_CORE ) {}',
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_WORDPRESS_CORE' },
+				},
+			],
+			output: 'if ( globalThis.IS_WORDPRESS_CORE ) {}',
+		},
+		{
+			code: "if ( window[ 'IS_GUTENBERG_PLUGIN' ] ) {}",
+			errors: [
+				{
+					messageId: 'usedWithoutGlobalThis',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+			output: 'if ( globalThis.IS_GUTENBERG_PLUGIN ) {}',
+		},
+		{
+			code: 'if ( true ) { globalThis.IS_GUTENBERG_PLUGIN === 2 }',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'if ( globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'if ( true || globalThis.IS_GUTENBERG_PLUGIN === 2 ) {}',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+		{
+			code: 'const isFeatureActive = globalThis.IS_GUTENBERG_PLUGIN;',
+			errors: [
+				{
+					messageId: 'usedOutsideConditional',
+					data: { name: 'IS_GUTENBERG_PLUGIN' },
+				},
+			],
+		},
+	],
+} );
diff --git a/packages/eslint-plugin/rules/dependency-group.js b/packages/eslint-plugin/rules/dependency-group.js
index 685079745f20fc..acb6094d7cc4fe 100644
--- a/packages/eslint-plugin/rules/dependency-group.js
+++ b/packages/eslint-plugin/rules/dependency-group.js
@@ -120,7 +120,7 @@ module.exports = {
 		 * @param {Node}              node     Node to test.
 		 * @param {WPPackageLocality} locality Desired package locality.
 		 *
-		 * @return {WPDependencyBlockCorrection=} Correction, if applicable.
+		 * @return {WPDependencyBlockCorrection | undefined} Correction, if applicable.
 		 */
 		function getDependencyBlockCorrection( node, locality ) {
 			const value = getCommentValue( locality );
diff --git a/packages/eslint-plugin/rules/gutenberg-phase.js b/packages/eslint-plugin/rules/gutenberg-phase.js
deleted file mode 100644
index 5a768be0eb4704..00000000000000
--- a/packages/eslint-plugin/rules/gutenberg-phase.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/**
- * Traverse up through the chain of parent AST nodes returning the first parent
- * the predicate returns a truthy value for.
- *
- * @param {Object}   sourceNode The AST node to search from.
- * @param {Function} predicate  A predicate invoked for each parent.
- *
- * @return {?Object } The first encountered parent node where the predicate
- *                    returns a truthy value.
- */
-function findParent( sourceNode, predicate ) {
-	if ( ! sourceNode.parent ) {
-		return;
-	}
-
-	if ( predicate( sourceNode.parent ) ) {
-		return sourceNode.parent;
-	}
-
-	return findParent( sourceNode.parent, predicate );
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is accessed via
- * `process.env.GUTENBERG_PHASE`.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * if ( GUTENBERG_PHASE === 2 ) {
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsAccessedViaProcessEnv( node, context ) {
-	const parent = node.parent;
-
-	if (
-		parent &&
-		parent.type === 'MemberExpression' &&
-		context.getSource( parent ) === 'process.env.GUTENBERG_PHASE'
-	) {
-		return;
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should be accessed using `process.env.GUTENBERG_PHASE`.'
-	);
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is used in a strict binary
- * equality expression in a comparison with a number, triggering a
- * violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * if ( process.env.GUTENBERG_PHASE >= '2' ) {
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsUsedInStrictBinaryExpression( node, context ) {
-	const parent = findParent(
-		node,
-		( candidate ) => candidate.type === 'BinaryExpression'
-	);
-
-	if ( parent ) {
-		const comparisonNode =
-			node.parent.type === 'MemberExpression' ? node.parent : node;
-
-		// Test for process.env.GUTENBERG_PHASE === <number> or <number> === process.env.GUTENBERG_PHASE.
-		const hasCorrectOperator = [ '===', '!==' ].includes( parent.operator );
-		const hasCorrectOperands =
-			( parent.left === comparisonNode &&
-				typeof parent.right.value === 'number' ) ||
-			( parent.right === comparisonNode &&
-				typeof parent.left.value === 'number' );
-
-		if ( hasCorrectOperator && hasCorrectOperands ) {
-			return;
-		}
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should only be used in a strict equality comparison with a primitive number.'
-	);
-}
-
-/**
- * Tests whether the GUTENBERG_PHASE variable is used as the condition for an
- * if statement, triggering a violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.GUTENBERG_PHASE === 2 ) {
- *
- * // bad
- * const isFeatureActive = process.env.GUTENBERG_PHASE === 2;
- * ```
- *
- * @param {Object} node    The GUTENBERG_PHASE identifier node.
- * @param {Object} context The eslint context object.
- */
-function testIsUsedInIfOrTernary( node, context ) {
-	const conditionalParent = findParent( node, ( candidate ) =>
-		[ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type )
-	);
-	const binaryParent = findParent(
-		node,
-		( candidate ) => candidate.type === 'BinaryExpression'
-	);
-
-	if (
-		conditionalParent &&
-		binaryParent &&
-		conditionalParent.test &&
-		conditionalParent.test.range[ 0 ] === binaryParent.range[ 0 ] &&
-		conditionalParent.test.range[ 1 ] === binaryParent.range[ 1 ]
-	) {
-		return;
-	}
-
-	context.report(
-		node,
-		'The `GUTENBERG_PHASE` constant should only be used as part of the condition in an if statement or ternary expression.'
-	);
-}
-
-module.exports = {
-	meta: {
-		type: 'problem',
-		schema: [],
-		deprecated: true,
-		replacedBy: '@wordpress/is-gutenberg-plugin',
-	},
-	create( context ) {
-		return {
-			Identifier( node ) {
-				// Bypass any identifiers with a node name different to `GUTENBERG_PHASE`.
-				if ( node.name !== 'GUTENBERG_PHASE' ) {
-					return;
-				}
-
-				testIsAccessedViaProcessEnv( node, context );
-				testIsUsedInStrictBinaryExpression( node, context );
-				testIsUsedInIfOrTernary( node, context );
-			},
-			Literal( node ) {
-				// Bypass any identifiers with a node value different to `GUTENBERG_PHASE`.
-				if ( node.value !== 'GUTENBERG_PHASE' ) {
-					return;
-				}
-
-				if ( node.parent && node.parent.type === 'MemberExpression' ) {
-					testIsAccessedViaProcessEnv( node, context );
-				}
-			},
-		};
-	},
-};
diff --git a/packages/eslint-plugin/rules/i18n-translator-comments.js b/packages/eslint-plugin/rules/i18n-translator-comments.js
index 86d57449dc0547..56d563d3fdb72c 100644
--- a/packages/eslint-plugin/rules/i18n-translator-comments.js
+++ b/packages/eslint-plugin/rules/i18n-translator-comments.js
@@ -78,7 +78,7 @@ module.exports = {
 					const {
 						value: commentText,
 						loc: {
-							start: { line: commentLine },
+							end: { line: commentLine },
 						},
 					} = comment;
 
diff --git a/packages/eslint-plugin/rules/is-gutenberg-plugin.js b/packages/eslint-plugin/rules/is-gutenberg-plugin.js
deleted file mode 100644
index 7b163842d7300f..00000000000000
--- a/packages/eslint-plugin/rules/is-gutenberg-plugin.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Traverse up through the chain of parent AST nodes returning the first parent
- * the predicate returns a truthy value for.
- *
- * @param {Object}   sourceNode The AST node to search from.
- * @param {Function} predicate  A predicate invoked for each parent.
- *
- * @return {?Object } The first encountered parent node where the predicate
- *                    returns a truthy value.
- */
-function findParent( sourceNode, predicate ) {
-	if ( ! sourceNode.parent ) {
-		return;
-	}
-
-	if ( predicate( sourceNode.parent ) ) {
-		return sourceNode.parent;
-	}
-
-	return findParent( sourceNode.parent, predicate );
-}
-
-/**
- * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an
- * if statement or ternary, triggering a violation if not.
- *
- * @example
- * ```js
- * // good
- * if ( process.env.IS_GUTENBERG_PLUGIN ) {
- *
- * // bad
- * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
- * ```
- *
- * @param {Object} node    The IS_GUTENBERG_PLUGIN identifier node.
- * @param {Object} context The eslint context object.
- */
-function isUsedInConditional( node, context ) {
-	const conditionalParent = findParent( node, ( candidate ) =>
-		[ 'IfStatement', 'ConditionalExpression' ].includes( candidate.type )
-	);
-
-	if ( ! conditionalParent ) {
-		return false;
-	}
-
-	// Allow for whitespace as prettier sometimes breaks this on separate lines.
-	const textRegex = /^\s*!?\s*process\s*\.\s*env\s*\.\s*IS_GUTENBERG_PLUGIN$/;
-	const testSource = context.getSource( conditionalParent.test );
-
-	if ( ! textRegex.test( testSource ) ) {
-		return false;
-	}
-
-	return true;
-}
-
-const ERROR_MESSAGE =
-	'The `process.env.IS_GUTENBERG_PLUGIN` constant should only be used as the condition in an if statement or ternary expression.';
-
-module.exports = {
-	meta: {
-		type: 'problem',
-		schema: [],
-	},
-	create( context ) {
-		return {
-			Identifier( node ) {
-				// Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`.
-				if ( node.name !== 'IS_GUTENBERG_PLUGIN' ) {
-					return;
-				}
-
-				if ( ! isUsedInConditional( node, context ) ) {
-					context.report( node, ERROR_MESSAGE );
-				}
-			},
-			// Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'.
-			Literal( node ) {
-				// Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`.
-				if ( node.value !== 'IS_GUTENBERG_PLUGIN' ) {
-					return;
-				}
-
-				if ( node.parent && node.parent.type === 'MemberExpression' ) {
-					if ( ! isUsedInConditional( node, context ) ) {
-						context.report( node, ERROR_MESSAGE );
-					}
-				}
-			},
-		};
-	},
-};
diff --git a/packages/eslint-plugin/rules/no-wp-process-env.js b/packages/eslint-plugin/rules/no-wp-process-env.js
new file mode 100644
index 00000000000000..55aca44b92ba74
--- /dev/null
+++ b/packages/eslint-plugin/rules/no-wp-process-env.js
@@ -0,0 +1,93 @@
+const NAMES = new Set(
+	/** @type {const} */ ( [
+		'GUTENBERG_PHASE',
+		'IS_GUTENBERG_PLUGIN',
+		'IS_WORDPRESS_CORE',
+		'SCRIPT_DEBUG',
+	] )
+);
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [],
+		fixable: true,
+		messages: {
+			useGlobalThis:
+				'`{{ name }}` should not be accessed from process.env. Use `globalThis.{{name}}`.',
+			noGutenbergPhase:
+				'The GUTENBERG_PHASE environement variable is no longer available. Use IS_GUTENBERG_PLUGIN (boolean).',
+		},
+	},
+	create( context ) {
+		return {
+			MemberExpression( node ) {
+				const propertyNameOrValue = memberProperty( node );
+				if ( ! propertyNameOrValue ) {
+					return;
+				}
+				if ( ! NAMES.has( propertyNameOrValue ) ) {
+					return;
+				}
+
+				if ( node.object.type !== 'MemberExpression' ) {
+					return;
+				}
+
+				const obj = node.object;
+				const envCandidateProperty = memberProperty( obj );
+				if ( envCandidateProperty !== 'env' ) {
+					return;
+				}
+
+				if (
+					obj.object.type !== 'Identifier' ||
+					obj.object.name !== 'process'
+				) {
+					return;
+				}
+
+				if ( propertyNameOrValue === 'GUTENBERG_PHASE' ) {
+					context.report( {
+						node,
+						messageId: 'noGutenbergPhase',
+					} );
+					return;
+				}
+
+				context.report( {
+					node,
+					messageId: 'useGlobalThis',
+					data: { name: propertyNameOrValue },
+					fix( fixer ) {
+						return fixer.replaceText(
+							node,
+							`globalThis.${ propertyNameOrValue }`
+						);
+					},
+				} );
+			},
+		};
+	},
+};
+
+/**
+ * @param {import('estree').MemberExpression} node
+ */
+function memberProperty( node ) {
+	switch ( node.property.type ) {
+		case 'Identifier':
+			return node.property.name;
+		case 'Literal':
+			return node.property.value;
+		case 'TemplateLiteral':
+			if (
+				! node.property.expressions.length &&
+				node.property.quasis.length === 1
+			) {
+				return node.property.quasis[ 0 ].value.raw;
+			}
+	}
+	return null;
+}
diff --git a/packages/eslint-plugin/rules/wp-global-usage.js b/packages/eslint-plugin/rules/wp-global-usage.js
new file mode 100644
index 00000000000000..c6c75d99331238
--- /dev/null
+++ b/packages/eslint-plugin/rules/wp-global-usage.js
@@ -0,0 +1,170 @@
+const NAMES = new Set(
+	/** @type {const} */ ( [
+		'IS_GUTENBERG_PLUGIN',
+		'IS_WORDPRESS_CORE',
+		'SCRIPT_DEBUG',
+	] )
+);
+
+/**
+ * Tests whether the IS_GUTENBERG_PLUGIN variable is used as the condition for an
+ * if statement or ternary, triggering a violation if not.
+ *
+ * @example
+ * ```js
+ * // good
+ * if ( process.env.IS_GUTENBERG_PLUGIN ) {
+ *
+ * // bad
+ * const isFeatureActive = process.env.IS_GUTENBERG_PLUGIN;
+ * ```
+ *
+ * @param {import('estree').Node} node The IS_GUTENBERG_PLUGIN identifier node.
+ */
+function isUsedInConditional( node ) {
+	/** @type {import('estree').Node|undefined} */
+	let current = node;
+
+	// Simple negation is the only expresion allowed in the conditional:
+	// if ( ! globalThis.SCRIPT_DEBUG ) {}
+	// const D = ! globalThis.SCRIPT_DEBUG ? 'yes' : 'no';
+	if (
+		current.parent.type === 'UnaryExpression' &&
+		current.parent.operator === '!'
+	) {
+		current = current.parent;
+	}
+
+	// Check if the current node is the test of a conditional
+
+	/** @type {import('estree').Node|undefined} */
+	const parent = current.parent;
+
+	if ( parent.type === 'IfStatement' && parent.test === current ) {
+		return true;
+	}
+	if ( parent.type === 'ConditionalExpression' && parent.test === current ) {
+		return true;
+	}
+	return false;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+	meta: {
+		type: 'problem',
+		schema: [],
+		fixable: true,
+		messages: {
+			usedOutsideConditional:
+				'`globalThis.{{ name }}` should only be used as the condition in an if statement or ternary expression.',
+			usedWithoutGlobalThis:
+				'`{{ name }}` should not be used directly. Use `globalThis.{{ name }}`.',
+		},
+	},
+	create( context ) {
+		return {
+			Identifier( node ) {
+				// Bypass any identifiers with a node name different to `IS_GUTENBERG_PLUGIN`.
+				if ( ! NAMES.has( node.name ) ) {
+					return;
+				}
+
+				if ( node.parent.type === 'Property' ) {
+					return;
+				}
+
+				if ( node.parent.type !== 'MemberExpression' ) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.name },
+						fix( fixer ) {
+							return fixer.replaceText(
+								node,
+								`globalThis.${ node.name }`
+							);
+						},
+					} );
+
+					if ( ! isUsedInConditional( node ) ) {
+						context.report( {
+							node,
+							messageId: 'usedOutsideConditional',
+							data: {
+								name: node.name,
+							},
+						} );
+					}
+					return;
+				}
+
+				if (
+					node.parent.object.type === 'Identifier' &&
+					node.parent.object.name !== 'globalThis'
+				) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.name },
+						fix( fixer ) {
+							if ( node.parent.object.name === 'window' ) {
+								return fixer.replaceText(
+									node.parent,
+									`globalThis.${ node.name }`
+								);
+							}
+						},
+					} );
+				} else if ( ! isUsedInConditional( node.parent ) ) {
+					context.report( {
+						node,
+						messageId: 'usedOutsideConditional',
+						data: {
+							name: node.name,
+						},
+					} );
+				}
+			},
+
+			// Check for literals, e.g. when 'IS_GUTENBERG_PLUGIN' is used as a string via something like 'window[ 'IS_GUTENBERG_PLUGIN' ]'.
+			Literal( node ) {
+				// Bypass any identifiers with a node value different to `IS_GUTENBERG_PLUGIN`.
+				if ( ! NAMES.has( node.value ) ) {
+					return;
+				}
+
+				if ( node.parent.type !== 'MemberExpression' ) {
+					return;
+				}
+
+				if (
+					node.parent.object.type === 'Identifier' &&
+					node.parent.object.name !== 'globalThis'
+				) {
+					context.report( {
+						node,
+						messageId: 'usedWithoutGlobalThis',
+						data: { name: node.value },
+						fix( fixer ) {
+							if ( node.parent.object.name === 'window' ) {
+								return fixer.replaceText(
+									node.parent,
+									`globalThis.${ node.value }`
+								);
+							}
+						},
+					} );
+				} else if ( ! isUsedInConditional( node.parent ) ) {
+					context.report( {
+						node,
+						messageId: 'usedOutsideConditional',
+						data: {
+							name: node.value,
+						},
+					} );
+				}
+			},
+		};
+	},
+};
diff --git a/packages/eslint-plugin/tsconfig.json b/packages/eslint-plugin/tsconfig.json
index d292d97510c414..e17815f78a6a16 100644
--- a/packages/eslint-plugin/tsconfig.json
+++ b/packages/eslint-plugin/tsconfig.json
@@ -1,10 +1,12 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "CommonJS",
 		"rootDir": "rules",
 		"declarationDir": "build-types"
 	},
+	"references": [ { "path": "../prettier-config" } ],
 	// NOTE: This package is being progressively typed. You are encouraged to
 	// expand this array with files which can be type-checked. At some point in
 	// the future, this can be simplified to an `includes` of `src/**/*`.
diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md
deleted file mode 100644
index 78d456271cfa86..00000000000000
--- a/packages/experiments/CHANGELOG.md
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-## 0.4.0 (2022-11-16)
-
-## 0.3.0 (2022-11-02)
-
-## 0.2.0 (2022-10-19)
-
-## 0.1.0 (2022-10-05)
-
-– Package created.
diff --git a/packages/experiments/README.md b/packages/experiments/README.md
deleted file mode 100644
index fe6221588ecc19..00000000000000
--- a/packages/experiments/README.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Experiments
-
-Private `__experimental` APIs that are not [exposed publicly plugin authors](https://make.wordpress.org/core/2022/08/10/proposal-stop-merging-experimental-apis-from-gutenberg-to-wordpress-core/#respond).
-
-This package acts as a "dealer" that only allows WordPress packages to use the experimental APIs.
-
-Each package needs to start by registering itself:
-
-```js
-const { register } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'<CONSENT STRING>',  // See index.js, this may change without notice.
-		'@wordpress/blocks'
-	);
-```
-
-The function name communicates that plugins are not supposed to use it. To make double and triple sure, the first argument must be that exact consent string, and the second argument must be a known `@wordpress` package that hasn't opted in yet – otherwise an error is thrown.
-
-Expose a new `__experimental` API as follows:
-
-```js
-export const __experiments = register( { __unstableGetInnerBlocksProps } )
-```
-
-Consume the registered `__experimental` APIs as follows:
-
-```js
-// In the @wordpress/block-editor package:
-import { __experiments as blocksExperiments } from '@wordpress/blocks';
-const { unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'<CONSENT STRING>',  // See index.js
-		'@wordpress/block-editor'
-	);
-
-const { __unstableGetInnerBlocksProps } = unlock( blocksExperiments );
-```
-
-All new experimental APIs should be shipped as **private** using this method.
-
-The **public** experimental APIs that have already been shipped in a stable WordPress version should remain accessible via `window.wp`. Please do not create new ones.
-
-A determined developer who would want to use the private experimental APIs at all costs would have to:
-
-* Realize a private importing system exists
-* Read the code where the risks would be spelled out in capital letters
-* Explicitly type out he or she is aware of the consequences
-* Pretend to register a `@wordpress` package (and trigger an error as soon as the real package is loaded)
-
-Dangerously opting in to using these APIs by theme and plugin developers is not recommended. Furthermore, the WordPress Core philosophy to strive to maintain backward compatibility for third-party developers **does not apply** to experimental APIs registered via this package.
-
-The consent string for opting in to these APIs may change at any time and without notice. This change will break existing third-party code. Such a change may occur in either a major or minor release.
-
-## 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/experiments/package.json b/packages/experiments/package.json
deleted file mode 100644
index ce149b710e7af4..00000000000000
--- a/packages/experiments/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-	"name": "@wordpress/experiments",
-	"version": "0.4.0",
-	"description": "Internal experimental APIs for WordPress core.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"dom",
-		"utils"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/experiments/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/experiments"
-	},
-	"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": false,
-	"dependencies": {
-		"@babel/runtime": "^7.16.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/experiments/src/index.js b/packages/experiments/src/index.js
deleted file mode 100644
index 033816e4b28365..00000000000000
--- a/packages/experiments/src/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-const CORE_MODULES_USING_EXPERIMENTS = [
-	'@wordpress/data',
-	'@wordpress/block-editor',
-	'@wordpress/block-library',
-	'@wordpress/blocks',
-	'@wordpress/core-data',
-	'@wordpress/date',
-	'@wordpress/edit-site',
-	'@wordpress/edit-widgets',
-];
-
-const registeredExperiments = {};
-/*
- * Warning for theme and plugin developers.
- *
- * The use of experimental developer APIs is intended for use by WordPress Core
- * and the Gutenberg plugin exclusively.
- *
- * Dangerously opting in to using these APIs is NOT RECOMMENDED. Furthermore,
- * the WordPress Core philosophy to strive to maintain backward compatibility
- * for third-party developers DOES NOT APPLY to experimental APIs.
- *
- * THE CONSENT STRING FOR OPTING IN TO THESE APIS MAY CHANGE AT ANY TIME AND
- * WITHOUT NOTICE. THIS CHANGE WILL BREAK EXISTING THIRD-PARTY CODE. SUCH A
- * CHANGE MAY OCCUR IN EITHER A MAJOR OR MINOR RELEASE.
- */
-const requiredConsent =
-	'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.';
-
-export const __dangerousOptInToUnstableAPIsOnlyForCoreModules = (
-	consent,
-	moduleName
-) => {
-	if ( ! CORE_MODULES_USING_EXPERIMENTS.includes( moduleName ) ) {
-		throw new Error(
-			`You tried to opt-in to unstable APIs as a module "${ moduleName }". ` +
-				'This feature is only for JavaScript modules shipped with WordPress core. ' +
-				'Please do not use it in plugins and themes as the unstable APIs will be removed ' +
-				'without a warning. If you ignore this error and depend on unstable features, ' +
-				'your product will inevitably break on one of the next WordPress releases.'
-		);
-	}
-	if ( moduleName in registeredExperiments ) {
-		throw new Error(
-			`You tried to opt-in to unstable APIs as a module "${ moduleName }" which is already registered. ` +
-				'This feature is only for JavaScript modules shipped with WordPress core. ' +
-				'Please do not use it in plugins and themes as the unstable APIs will be removed ' +
-				'without a warning. If you ignore this error and depend on unstable features, ' +
-				'your product will inevitably break on one of the next WordPress releases.'
-		);
-	}
-	if ( consent !== requiredConsent ) {
-		throw new Error(
-			`You tried to opt-in to unstable APIs without confirming you know the consequences. ` +
-				'This feature is only for JavaScript modules shipped with WordPress core. ' +
-				'Please do not use it in plugins and themes as the unstable APIs will removed ' +
-				'without a warning. If you ignore this error and depend on unstable features, ' +
-				'your product will inevitably break on the next WordPress release.'
-		);
-	}
-	registeredExperiments[ moduleName ] = {
-		accessKey: {},
-		apis: {},
-	};
-	return {
-		register: ( experiments ) => {
-			for ( const key in experiments ) {
-				registeredExperiments[ moduleName ].apis[ key ] =
-					experiments[ key ];
-			}
-			return registeredExperiments[ moduleName ].accessKey;
-		},
-		unlock: ( accessKey ) => {
-			for ( const experiment of Object.values( registeredExperiments ) ) {
-				if ( experiment.accessKey === accessKey ) {
-					return experiment.apis;
-				}
-			}
-
-			throw new Error(
-				'There is no registered module matching the specified access key'
-			);
-		},
-	};
-};
diff --git a/packages/experiments/src/test/index.js b/packages/experiments/src/test/index.js
deleted file mode 100644
index a3424ac26f7e20..00000000000000
--- a/packages/experiments/src/test/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Internal dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '../';
-
-const requiredConsent =
-	'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.';
-
-describe( '__dangerousOptInToUnstableAPIsOnlyForCoreModules', () => {
-	it( 'Should require a consent string', () => {
-		expect( () => {
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				'',
-				'@wordpress/data'
-			);
-		} ).toThrow( /without confirming you know the consequences/ );
-	} );
-	it( 'Should require a valid @wordpress package name', () => {
-		expect( () => {
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				requiredConsent,
-				'custom_package'
-			);
-		} ).toThrow(
-			/This feature is only for JavaScript modules shipped with WordPress core/
-		);
-	} );
-	it( 'Should not register the same module twice', () => {
-		expect( () => {
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				requiredConsent,
-				'@wordpress/edit-widgets'
-			);
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				requiredConsent,
-				'@wordpress/edit-widgets'
-			);
-		} ).toThrow( /is already registered/ );
-	} );
-	it( 'Should grant access to unstable APIs when passed both a consent string and a previously unregistered package name', () => {
-		const unstableAPIs = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
-			requiredConsent,
-			'@wordpress/edit-site'
-		);
-		expect( unstableAPIs.unlock ).toEqual( expect.any( Function ) );
-		expect( unstableAPIs.register ).toEqual( expect.any( Function ) );
-	} );
-	it( 'Should register and unlock experimental APIs', () => {
-		// This would live in @wordpress/data:
-		// Opt-in to experimental APIs
-		const dataExperiments =
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				requiredConsent,
-				'@wordpress/data'
-			);
-
-		// Register the experimental APIs
-		const dataExperimentalFunctions = {
-			__experimentalFunction: jest.fn(),
-		};
-		const dataAccessKey = dataExperiments.register(
-			dataExperimentalFunctions
-		);
-
-		// This would live in @wordpress/core-data:
-		// Register the experimental APIs
-		const coreDataExperiments =
-			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-				requiredConsent,
-				'@wordpress/core-data'
-			);
-
-		// Get the experimental APIs registered by @wordpress/data
-		const { __experimentalFunction } =
-			coreDataExperiments.unlock( dataAccessKey );
-
-		// Call one!
-		__experimentalFunction();
-
-		expect(
-			dataExperimentalFunctions.__experimentalFunction
-		).toHaveBeenCalled();
-	} );
-} );
diff --git a/packages/fields/CHANGELOG.md b/packages/fields/CHANGELOG.md
new file mode 100644
index 00000000000000..c567ae42058bf5
--- /dev/null
+++ b/packages/fields/CHANGELOG.md
@@ -0,0 +1,15 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 0.5.0 (2024-11-27)
+
+## 0.4.0 (2024-11-16)
+
+## 0.3.0 (2024-10-30)
+
+## 0.2.0 (2024-10-16)
+
+## 0.1.0 (2024-10-03)
+
+Initial release.
diff --git a/packages/fields/README.md b/packages/fields/README.md
new file mode 100644
index 00000000000000..9ca08991aca51f
--- /dev/null
+++ b/packages/fields/README.md
@@ -0,0 +1,150 @@
+# Fields
+
+This package provides core elements for the DataView library, designed to simplify the creation and management of data display elements in WordPress.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/fields --save
+```
+
+## Usage
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### authorField
+
+Author field for BasePost.
+
+### BasePostWithEmbeddedAuthor
+
+Undocumented declaration.
+
+### commentStatusField
+
+Comment status field for BasePost.
+
+### CreateTemplatePartModal
+
+A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part. This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
+
+_Parameters_
+
+-   _props_ `Object`: The component props.
+-   _props.modalTitle_ `{ modalTitle: string; } & CreateTemplatePartModalContentsProps[ 'modalTitle' ]`:
+
+### dateField
+
+Date field for BasePost.
+
+### deletePost
+
+Delete action for Templates, Patterns and Template Parts.
+
+### duplicatePattern
+
+Duplicate action for Pattern.
+
+### duplicatePost
+
+Duplicate action for BasePost.
+
+### duplicateTemplatePart
+
+Duplicate action for TemplatePart.
+
+### exportPattern
+
+Export action as JSON for Pattern.
+
+### featuredImageField
+
+Featured Image field for BasePost.
+
+### orderField
+
+Order field for BasePost.
+
+### pageTitleField
+
+Title for the page entity.
+
+### parentField
+
+Parent field for BasePost.
+
+### passwordField
+
+Password field for BasePost.
+
+### patternTitleField
+
+Title for the pattern entity.
+
+### permanentlyDeletePost
+
+Delete action for PostWithPermissions.
+
+### PostType
+
+Undocumented declaration.
+
+### renamePost
+
+Rename action for PostWithPermissions.
+
+### reorderPage
+
+Reorder action for BasePost.
+
+### resetPost
+
+Reset action for Template and TemplatePart.
+
+### restorePost
+
+Restore action for PostWithPermissions.
+
+### slugField
+
+Slug field for BasePost.
+
+### statusField
+
+Status field for BasePost.
+
+### templateField
+
+Template field for BasePost.
+
+### templateTitleField
+
+Title for the template entity.
+
+### titleField
+
+Title for the any entity with a `title` property. For patterns, pages or templates you should use the respective field because there are some differences in the rendering, labels, etc.
+
+### trashPost
+
+Trash action for PostWithPermissions.
+
+### viewPost
+
+View post action for BasePost.
+
+### viewPostRevisions
+
+View post revisions action for Post.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/fields/package.json b/packages/fields/package.json
new file mode 100644
index 00000000000000..beaaf4f9813013
--- /dev/null
+++ b/packages/fields/package.json
@@ -0,0 +1,70 @@
+{
+	"name": "@wordpress/fields",
+	"version": "0.5.0",
+	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dataviews"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/fields/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/fields"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/media-utils": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/router": "*",
+		"@wordpress/url": "*",
+		"@wordpress/warning": "*",
+		"change-case": "4.1.2",
+		"client-zip": "^2.4.5",
+		"clsx": "2.1.1",
+		"remove-accents": "^0.5.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/fields/src/actions/delete-post.tsx b/packages/fields/src/actions/delete-post.tsx
new file mode 100644
index 00000000000000..4a94796b6f0bdf
--- /dev/null
+++ b/packages/fields/src/actions/delete-post.tsx
@@ -0,0 +1,209 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getItemTitle,
+	isTemplateOrTemplatePart,
+	isTemplateRemovable,
+} from './utils';
+import type { Pattern, Template, TemplatePart } from '../types';
+import type { NoticeSettings } from '../mutation';
+import { deletePostWithNotices } from '../mutation';
+import { unlock } from '../lock-unlock';
+
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+// This action is used for templates, patterns and template parts.
+// Every other post type uses the similar `trashPostAction` which
+// moves the post to trash.
+const deletePostAction: Action< Template | TemplatePart | Pattern > = {
+	id: 'delete-post',
+	label: __( 'Delete' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( post ) {
+		if ( isTemplateOrTemplatePart( post ) ) {
+			return isTemplateRemovable( post );
+		}
+		// We can only remove user patterns.
+		return post.type === PATTERN_TYPES.user;
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const isResetting = items.every(
+			( item ) => isTemplateOrTemplatePart( item ) && item?.has_theme_file
+		);
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ items.length > 1
+						? sprintf(
+								// translators: %d: number of items to delete.
+								_n(
+									'Delete %d item?',
+									'Delete %d items?',
+									items.length
+								),
+								items.length
+						  )
+						: sprintf(
+								// translators: %s: The template or template part's title
+								_x( 'Delete "%s"?', 'template part' ),
+								getItemTitle( items[ 0 ] )
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							const notice: NoticeSettings<
+								Template | TemplatePart | Pattern
+							> = {
+								success: {
+									messages: {
+										getMessage: ( item ) => {
+											return isResetting
+												? sprintf(
+														/* translators: The template/part's name. */
+														__( '"%s" reset.' ),
+														decodeEntities(
+															getItemTitle( item )
+														)
+												  )
+												: sprintf(
+														/* translators: %s: The template/part's name. */
+														_x(
+															'"%s" deleted.',
+															'template part'
+														),
+														decodeEntities(
+															getItemTitle( item )
+														)
+												  );
+										},
+										getBatchMessage: () => {
+											return isResetting
+												? __( 'Items reset.' )
+												: __( 'Items deleted.' );
+										},
+									},
+								},
+								error: {
+									messages: {
+										getMessage: ( error ) => {
+											if ( error.size === 1 ) {
+												return [ ...error ][ 0 ];
+											}
+											return isResetting
+												? __(
+														'An error occurred while reverting the item.'
+												  )
+												: __(
+														'An error occurred while deleting the item.'
+												  );
+										},
+										getBatchMessage: ( errors ) => {
+											if ( errors.size === 0 ) {
+												return isResetting
+													? __(
+															'An error occurred while reverting the items.'
+													  )
+													: __(
+															'An error occurred while deleting the items.'
+													  );
+											}
+
+											if ( errors.size === 1 ) {
+												return isResetting
+													? sprintf(
+															/* translators: %s: an error message */
+															__(
+																'An error occurred while reverting the items: %s'
+															),
+															[ ...errors ][ 0 ]
+													  )
+													: sprintf(
+															/* translators: %s: an error message */
+															__(
+																'An error occurred while deleting the items: %s'
+															),
+															[ ...errors ][ 0 ]
+													  );
+											}
+
+											return isResetting
+												? sprintf(
+														/* translators: %s: a list of comma separated error messages */
+														__(
+															'Some errors occurred while reverting the items: %s'
+														),
+														[ ...errors ].join(
+															','
+														)
+												  )
+												: sprintf(
+														/* translators: %s: a list of comma separated error messages */
+														__(
+															'Some errors occurred while deleting the items: %s'
+														),
+														[ ...errors ].join(
+															','
+														)
+												  );
+										},
+									},
+								},
+							};
+
+							await deletePostWithNotices( items, notice, {
+								onActionPerformed,
+							} );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+/**
+ * Delete action for Templates, Patterns and Template Parts.
+ */
+export default deletePostAction;
diff --git a/packages/fields/src/actions/duplicate-pattern.tsx b/packages/fields/src/actions/duplicate-pattern.tsx
new file mode 100644
index 00000000000000..274f57b0fe19dc
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-pattern.tsx
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import type { Pattern } from '../types';
+
+// Patterns.
+const { CreatePatternModalContents, useDuplicatePatternProps } =
+	unlock( patternsPrivateApis );
+
+const duplicatePattern: Action< Pattern > = {
+	id: 'duplicate-pattern',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type !== 'wp_template_part',
+	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const duplicatedProps = useDuplicatePatternProps( {
+			pattern: item,
+			onSuccess: () => closeModal?.(),
+		} );
+		return (
+			<CreatePatternModalContents
+				onClose={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				{ ...duplicatedProps }
+			/>
+		);
+	},
+};
+
+/**
+ * Duplicate action for Pattern.
+ */
+export default duplicatePattern;
diff --git a/packages/fields/src/actions/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx
new file mode 100644
index 00000000000000..5f079b5132c600
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-post.tsx
@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { titleField } from '../fields';
+import type { BasePost, CoreDataError } from '../types';
+import { getItemTitle } from './utils';
+
+const fields = [ titleField ];
+const formDuplicateAction = {
+	fields: [ 'title' ],
+};
+
+const duplicatePost: Action< BasePost > = {
+	id: 'duplicate-post',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item, setItem ] = useState< BasePost >( {
+			...items[ 0 ],
+			title: sprintf(
+				/* translators: %s: Existing post title */
+				_x( '%s (Copy)', 'post' ),
+				getItemTitle( items[ 0 ] )
+			),
+		} );
+
+		const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+		const { saveEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function createPage( event: React.FormEvent ) {
+			event.preventDefault();
+
+			if ( isCreatingPage ) {
+				return;
+			}
+
+			const newItemOject = {
+				status: 'draft',
+				title: item.title,
+				slug: item.title || __( 'No title' ),
+				comment_status: item.comment_status,
+				content:
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+				excerpt:
+					typeof item.excerpt === 'string'
+						? item.excerpt
+						: item.excerpt?.raw,
+				meta: item.meta,
+				parent: item.parent,
+				password: item.password,
+				template: item.template,
+				format: item.format,
+				featured_media: item.featured_media,
+				menu_order: item.menu_order,
+				ping_status: item.ping_status,
+			};
+			const assignablePropertiesPrefix = 'wp:action-assign-';
+			// Get all the properties that the current user is able to assign normally author, categories, tags,
+			// and custom taxonomies.
+			const assignableProperties = Object.keys( item?._links || {} )
+				.filter( ( property ) =>
+					property.startsWith( assignablePropertiesPrefix )
+				)
+				.map( ( property ) =>
+					property.slice( assignablePropertiesPrefix.length )
+				);
+			assignableProperties.forEach( ( property ) => {
+				if ( item.hasOwnProperty( property ) ) {
+					// @ts-ignore
+					newItemOject[ property ] = item[ property ];
+				}
+			} );
+			setIsCreatingPage( true );
+			try {
+				const newItem = await saveEntityRecord(
+					'postType',
+					item.type,
+					newItemOject,
+					{ throwOnError: true }
+				);
+
+				createSuccessNotice(
+					sprintf(
+						// translators: %s: Title of the created post, e.g: "Hello world".
+						__( '"%s" successfully created.' ),
+						decodeEntities( newItem.title?.rendered || item.title )
+					),
+					{
+						id: 'duplicate-post-action',
+						type: 'snackbar',
+					}
+				);
+
+				if ( onActionPerformed ) {
+					onActionPerformed( [ newItem ] );
+				}
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while duplicating the page.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				setIsCreatingPage( false );
+				closeModal?.();
+			}
+		}
+
+		return (
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<DataForm
+						data={ item }
+						fields={ fields }
+						form={ formDuplicateAction }
+						onChange={ ( changes ) =>
+							setItem( ( prev ) => ( {
+								...prev,
+								...changes,
+							} ) )
+						}
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button
+							variant="tertiary"
+							onClick={ closeModal }
+							__next40pxDefaultSize
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+							__next40pxDefaultSize
+						>
+							{ _x( 'Duplicate', 'action label' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+/**
+ * Duplicate action for BasePost.
+ */
+export default duplicatePost;
diff --git a/packages/fields/src/actions/duplicate-template-part.tsx b/packages/fields/src/actions/duplicate-template-part.tsx
new file mode 100644
index 00000000000000..795e40638a47a7
--- /dev/null
+++ b/packages/fields/src/actions/duplicate-template-part.tsx
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { _x, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useMemo } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { Post, TemplatePart } from '../types';
+import { CreateTemplatePartModalContents } from '../components/create-template-part-modal';
+import { getItemTitle } from './utils';
+
+/**
+ * This action is used to duplicate a template part.
+ */
+const duplicateTemplatePart: Action< TemplatePart > = {
+	id: 'duplicate-template-part',
+	label: _x( 'Duplicate', 'action label' ),
+	isEligible: ( item ) => item.type === 'wp_template_part',
+	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	RenderModal: ( { items, closeModal } ) => {
+		const [ item ] = items;
+		const blocks = useMemo( () => {
+			return (
+				item.blocks ??
+				parse(
+					typeof item.content === 'string'
+						? item.content
+						: item.content.raw,
+					{
+						__unstableSkipMigrationLogs: true,
+					}
+				)
+			);
+		}, [ item.content, item.blocks ] );
+		const { createSuccessNotice } = useDispatch( noticesStore );
+		function onTemplatePartSuccess( templatePart: Post ) {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					_x( '"%s" duplicated.', 'template part' ),
+					getItemTitle( templatePart )
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
+			);
+			closeModal?.();
+		}
+		return (
+			<CreateTemplatePartModalContents
+				blocks={ blocks }
+				defaultArea={ item.area }
+				defaultTitle={ sprintf(
+					/* translators: %s: Existing template part title */
+					_x( '%s (Copy)', 'template part' ),
+					getItemTitle( item )
+				) }
+				onCreate={ onTemplatePartSuccess }
+				onError={ closeModal }
+				confirmLabel={ _x( 'Duplicate', 'action label' ) }
+				closeModal={ closeModal ?? ( () => {} ) }
+			/>
+		);
+	},
+};
+/**
+ * Duplicate action for TemplatePart.
+ */
+export default duplicateTemplatePart;
diff --git a/packages/fields/src/actions/export-pattern.tsx b/packages/fields/src/actions/export-pattern.tsx
new file mode 100644
index 00000000000000..4a041e6ac73c3f
--- /dev/null
+++ b/packages/fields/src/actions/export-pattern.tsx
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+import { downloadZip } from 'client-zip';
+
+/**
+ * WordPress dependencies
+ */
+import { downloadBlob } from '@wordpress/blob';
+import { __ } from '@wordpress/i18n';
+import { download } from '@wordpress/icons';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../types';
+import { getItemTitle } from './utils';
+
+function getJsonFromItem( item: Pattern ) {
+	return JSON.stringify(
+		{
+			__file: item.type,
+			title: getItemTitle( item ),
+			content:
+				typeof item.content === 'string'
+					? item.content
+					: item.content?.raw,
+			syncStatus: item.wp_pattern_sync_status,
+		},
+		null,
+		2
+	);
+}
+
+const exportPattern: Action< Pattern > = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	icon: download,
+	supportsBulk: true,
+	isEligible: ( item ) => item.type === 'wp_block',
+	callback: async ( items ) => {
+		if ( items.length === 1 ) {
+			return downloadBlob(
+				`${ kebabCase(
+					getItemTitle( items[ 0 ] ) || items[ 0 ].slug
+				) }.json`,
+				getJsonFromItem( items[ 0 ] ),
+				'application/json'
+			);
+		}
+		const nameCount: Record< string, number > = {};
+		const filesToZip = items.map( ( item ) => {
+			const name = kebabCase( getItemTitle( item ) || item.slug );
+			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
+			return {
+				name: `${
+					name +
+					( nameCount[ name ] > 1
+						? '-' + ( nameCount[ name ] - 1 )
+						: '' )
+				}.json`,
+				lastModified: new Date(),
+				input: getJsonFromItem( item ),
+			};
+		} );
+		return downloadBlob(
+			__( 'patterns-export' ) + '.zip',
+			await downloadZip( filesToZip ).blob(),
+			'application/zip'
+		);
+	},
+};
+
+/**
+ * Export action as JSON for Pattern.
+ */
+export default exportPattern;
diff --git a/packages/fields/src/actions/index.ts b/packages/fields/src/actions/index.ts
new file mode 100644
index 00000000000000..cede3f1b59d1b3
--- /dev/null
+++ b/packages/fields/src/actions/index.ts
@@ -0,0 +1,13 @@
+export { default as viewPost } from './view-post';
+export { default as reorderPage } from './reorder-page';
+export { default as duplicatePost } from './duplicate-post';
+export { default as renamePost } from './rename-post';
+export { default as resetPost } from './reset-post';
+export { default as duplicatePattern } from './duplicate-pattern';
+export { default as exportPattern } from './export-pattern';
+export { default as viewPostRevisions } from './view-post-revisions';
+export { default as permanentlyDeletePost } from './permanently-delete-post';
+export { default as restorePost } from './restore-post';
+export { default as trashPost } from './trash-post';
+export { default as deletePost } from './delete-post';
+export { default as duplicateTemplatePart } from './duplicate-template-part';
diff --git a/packages/fields/src/actions/permanently-delete-post.tsx b/packages/fields/src/actions/permanently-delete-post.tsx
new file mode 100644
index 00000000000000..688ba5b9918df8
--- /dev/null
+++ b/packages/fields/src/actions/permanently-delete-post.tsx
@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import type { Action } from '@wordpress/dataviews';
+import { trash } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const permanentlyDeletePost: Action< PostWithPermissions > = {
+	id: 'permanently-delete',
+	label: __( 'Permanently delete' ),
+	supportsBulk: true,
+	icon: trash,
+	isEligible( item ) {
+		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
+			return false;
+		}
+		const { status, permissions } = item;
+		return status === 'trash' && permissions?.delete;
+	},
+	async callback( posts, { registry, onActionPerformed } ) {
+		const { createSuccessNotice, createErrorNotice } =
+			registry.dispatch( noticesStore );
+		const { deleteEntityRecord } = registry.dispatch( coreStore );
+		const promiseResult = await Promise.allSettled(
+			posts.map( ( post ) => {
+				return deleteEntityRecord(
+					'postType',
+					post.type,
+					post.id,
+					{ force: true },
+					{ throwOnError: true }
+				);
+			} )
+		);
+		// If all the promises were fulfilled with success.
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+			if ( promiseResult.length === 1 ) {
+				successMessage = sprintf(
+					/* translators: The posts's title. */
+					__( '"%s" permanently deleted.' ),
+					getItemTitle( posts[ 0 ] )
+				);
+			} else {
+				successMessage = __( 'The items were permanently deleted.' );
+			}
+			createSuccessNotice( successMessage, {
+				type: 'snackbar',
+				id: 'permanently-delete-post-action',
+			} );
+			onActionPerformed?.( posts );
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to permanently delete a single post.
+			if ( promiseResult.length === 1 ) {
+				const typedError = promiseResult[ 0 ] as {
+					reason?: CoreDataError;
+				};
+				if ( typedError.reason?.message ) {
+					errorMessage = typedError.reason.message;
+				} else {
+					errorMessage = __(
+						'An error occurred while permanently deleting the item.'
+					);
+				}
+				// If we were trying to permanently delete multiple posts
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					const typedError = failedPromise as {
+						reason?: CoreDataError;
+					};
+					if ( typedError.reason?.message ) {
+						errorMessages.add( typedError.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = __(
+						'An error occurred while permanently deleting the items.'
+					);
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = sprintf(
+						/* translators: %s: an error message */
+						__(
+							'An error occurred while permanently deleting the items: %s'
+						),
+						[ ...errorMessages ][ 0 ]
+					);
+				} else {
+					errorMessage = sprintf(
+						/* translators: %s: a list of comma separated error messages */
+						__(
+							'Some errors occurred while permanently deleting the items: %s'
+						),
+						[ ...errorMessages ].join( ',' )
+					);
+				}
+			}
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	},
+};
+
+/**
+ * Delete action for PostWithPermissions.
+ */
+export default permanentlyDeletePost;
diff --git a/packages/fields/src/actions/rename-post.tsx b/packages/fields/src/actions/rename-post.tsx
new file mode 100644
index 00000000000000..be0e69db26cd80
--- /dev/null
+++ b/packages/fields/src/actions/rename-post.tsx
@@ -0,0 +1,145 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../lock-unlock';
+import {
+	getItemTitle,
+	isTemplateRemovable,
+	isTemplate,
+	isTemplatePart,
+} from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+// Patterns.
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+const renamePost: Action< PostWithPermissions > = {
+	id: 'rename-post',
+	label: __( 'Rename' ),
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		// Templates, template parts and patterns have special checks for renaming.
+		if (
+			! [
+				'wp_template',
+				'wp_template_part',
+				...Object.values( PATTERN_TYPES ),
+			].includes( post.type )
+		) {
+			return post.permissions?.update;
+		}
+
+		// In the case of templates, we can only rename custom templates.
+		if ( isTemplate( post ) ) {
+			return (
+				isTemplateRemovable( post ) &&
+				post.is_custom &&
+				post.permissions?.update
+			);
+		}
+
+		if ( isTemplatePart( post ) ) {
+			return (
+				post.source === 'custom' &&
+				! post?.has_theme_file &&
+				post.permissions?.update
+			);
+		}
+
+		return post.type === PATTERN_TYPES.user && post.permissions?.update;
+	},
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ item ] = items;
+		const [ title, setTitle ] = useState( () => getItemTitle( item ) );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+
+		async function onRename( event: React.FormEvent ) {
+			event.preventDefault();
+			try {
+				await editEntityRecord( 'postType', item.type, item.id, {
+					title,
+				} );
+				// Update state before saving rerenders the list.
+				setTitle( '' );
+				closeModal?.();
+				// Persist edited entity.
+				await saveEditedEntityRecord( 'postType', item.type, item.id, {
+					throwOnError: true,
+				} );
+				createSuccessNotice( __( 'Name updated' ), {
+					type: 'snackbar',
+				} );
+				onActionPerformed?.( items );
+			} catch ( error ) {
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: __( 'An error occurred while updating the name' );
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		}
+
+		return (
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								closeModal?.();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		);
+	},
+};
+
+/**
+ * Rename action for PostWithPermissions.
+ */
+export default renamePost;
diff --git a/packages/fields/src/actions/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx
new file mode 100644
index 00000000000000..cffc4b924c0a5d
--- /dev/null
+++ b/packages/fields/src/actions/reorder-page.tsx
@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import { DataForm, isItemValid } from '@wordpress/dataviews';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action, RenderModalProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, BasePost } from '../types';
+import { orderField } from '../fields';
+
+const fields = [ orderField ];
+const formOrderAction = {
+	fields: [ 'menu_order' ],
+};
+
+function ReorderModal( {
+	items,
+	closeModal,
+	onActionPerformed,
+}: RenderModalProps< BasePost > ) {
+	const [ item, setItem ] = useState( items[ 0 ] );
+	const orderInput = item.menu_order;
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	async function onOrder( event: React.FormEvent ) {
+		event.preventDefault();
+
+		if ( ! isItemValid( item, fields, formOrderAction ) ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord( 'postType', item.type, item.id, {
+				menu_order: orderInput,
+			} );
+			closeModal?.();
+			// Persist edited entity.
+			await saveEditedEntityRecord( 'postType', item.type, item.id, {
+				throwOnError: true,
+			} );
+			createSuccessNotice( __( 'Order updated.' ), {
+				type: 'snackbar',
+			} );
+			onActionPerformed?.( items );
+		} catch ( error ) {
+			const typedError = error as CoreDataError;
+			const errorMessage =
+				typedError.message && typedError.code !== 'unknown_error'
+					? typedError.message
+					: __( 'An error occurred while updating the order' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	}
+	const isSaveDisabled = ! isItemValid( item, fields, formOrderAction );
+	return (
+		<form onSubmit={ onOrder }>
+			<VStack spacing="5">
+				<div>
+					{ __(
+						'Determines the order of pages. Pages with the same order value are sorted alphabetically. Negative order values are supported.'
+					) }
+				</div>
+				<DataForm
+					data={ item }
+					fields={ fields }
+					form={ formOrderAction }
+					onChange={ ( changes ) =>
+						setItem( {
+							...item,
+							...changes,
+						} )
+					}
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal?.();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						accessibleWhenDisabled
+						disabled={ isSaveDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+const reorderPage: Action< BasePost > = {
+	id: 'order-pages',
+	label: __( 'Order' ),
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	RenderModal: ReorderModal,
+};
+
+/**
+ * Reorder action for BasePost.
+ */
+export default reorderPage;
diff --git a/packages/fields/src/actions/reset-post.tsx b/packages/fields/src/actions/reset-post.tsx
new file mode 100644
index 00000000000000..d8ac5730d6a166
--- /dev/null
+++ b/packages/fields/src/actions/reset-post.tsx
@@ -0,0 +1,298 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { dispatch, select, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, Template, TemplatePart } from '../types';
+
+const isTemplateRevertable = (
+	templateOrTemplatePart: Template | TemplatePart
+) => {
+	if ( ! templateOrTemplatePart ) {
+		return false;
+	}
+
+	return (
+		templateOrTemplatePart.source === 'custom' &&
+		( Boolean( templateOrTemplatePart?.plugin ) ||
+			templateOrTemplatePart?.has_theme_file )
+	);
+};
+
+/**
+ *  Copied - pasted from https://github.com/WordPress/gutenberg/blob/bf1462ad37d4637ebbf63270b9c244b23c69e2a8/packages/editor/src/store/private-actions.js#L233-L365
+ *
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
+ */
+const revertTemplate = async (
+	template: TemplatePart | Template,
+	{ allowUndo = true } = {}
+) => {
+	const noticeId = 'edit-site-template-reverted';
+	dispatch( noticesStore ).removeNotice( noticeId );
+	if ( ! isTemplateRevertable( template ) ) {
+		dispatch( noticesStore ).createErrorNotice(
+			__( 'This template is not revertable.' ),
+			{
+				type: 'snackbar',
+			}
+		);
+		return;
+	}
+
+	try {
+		const templateEntityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			template.type
+		);
+
+		if ( ! templateEntityConfig ) {
+			dispatch( noticesStore ).createErrorNotice(
+				__(
+					'The editor has encountered an unexpected error. Please reload.'
+				),
+				{ type: 'snackbar' }
+			);
+			return;
+		}
+
+		const fileTemplatePath = addQueryArgs(
+			`${ templateEntityConfig.baseURL }/${ template.id }`,
+			{ context: 'edit', source: template.origin }
+		);
+
+		const fileTemplate = ( await apiFetch( {
+			path: fileTemplatePath,
+		} ) ) as any;
+		if ( ! fileTemplate ) {
+			dispatch( noticesStore ).createErrorNotice(
+				__(
+					'The editor has encountered an unexpected error. Please reload.'
+				),
+				{ type: 'snackbar' }
+			);
+			return;
+		}
+
+		const serializeBlocks = ( { blocks: blocksForSerialization = [] } ) =>
+			__unstableSerializeAndClean( blocksForSerialization );
+
+		const edited = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			template.type,
+			template.id
+		) as any;
+
+		// We are fixing up the undo level here to make sure we can undo
+		// the revert in the header toolbar correctly.
+		dispatch( coreStore ).editEntityRecord(
+			'postType',
+			template.type,
+			template.id,
+			{
+				content: serializeBlocks, // Required to make the `undo` behave correctly.
+				blocks: edited.blocks, // Required to revert the blocks in the editor.
+				source: 'custom', // required to avoid turning the editor into a dirty state
+			},
+			{
+				undoIgnore: true, // Required to merge this edit with the last undo level.
+			}
+		);
+
+		const blocks = parse( fileTemplate?.content?.raw );
+
+		dispatch( coreStore ).editEntityRecord(
+			'postType',
+			template.type,
+			fileTemplate.id,
+			{
+				content: serializeBlocks,
+				blocks,
+				source: 'theme',
+			}
+		);
+
+		if ( allowUndo ) {
+			const undoRevert = () => {
+				dispatch( coreStore ).editEntityRecord(
+					'postType',
+					template.type,
+					edited.id,
+					{
+						content: serializeBlocks,
+						blocks: edited.blocks,
+						source: 'custom',
+					}
+				);
+			};
+
+			dispatch( noticesStore ).createSuccessNotice(
+				__( 'Template reset.' ),
+				{
+					type: 'snackbar',
+					id: noticeId,
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: undoRevert,
+						},
+					],
+				}
+			);
+		}
+	} catch ( error: any ) {
+		const errorMessage =
+			error.message && error.code !== 'unknown_error'
+				? error.message
+				: __( 'Template revert failed. Please reload.' );
+
+		dispatch( noticesStore ).createErrorNotice( errorMessage, {
+			type: 'snackbar',
+		} );
+	}
+};
+
+const resetPostAction: Action< Template | TemplatePart > = {
+	id: 'reset-post',
+	label: __( 'Reset' ),
+	isEligible: ( item ) => {
+		return (
+			isTemplateOrTemplatePart( item ) &&
+			item?.source === 'custom' &&
+			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
+				item?.has_theme_file )
+		);
+	},
+	icon: backup,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+
+		const { saveEditedEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const onConfirm = async () => {
+			try {
+				for ( const template of items ) {
+					await revertTemplate( template, {
+						allowUndo: false,
+					} );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
+					);
+				}
+				createSuccessNotice(
+					items.length > 1
+						? sprintf(
+								/* translators: The number of items. */
+								__( '%s items reset.' ),
+								items.length
+						  )
+						: sprintf(
+								/* translators: The template/part's name. */
+								__( '"%s" reset.' ),
+								getItemTitle( items[ 0 ] )
+						  ),
+					{
+						type: 'snackbar',
+						id: 'revert-template-action',
+					}
+				);
+			} catch ( error ) {
+				let fallbackErrorMessage;
+				if ( items[ 0 ].type === 'wp_template' ) {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the templates.'
+							  );
+				} else {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template part.'
+							  )
+							: __(
+									'An error occurred while reverting the template parts.'
+							  );
+				}
+
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		};
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __( 'Reset to default and clear all customizations?' ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							await onConfirm();
+							onActionPerformed?.( items );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+/**
+ * Reset action for Template and TemplatePart.
+ */
+export default resetPostAction;
diff --git a/packages/fields/src/actions/restore-post.tsx b/packages/fields/src/actions/restore-post.tsx
new file mode 100644
index 00000000000000..6ea493a619ae80
--- /dev/null
+++ b/packages/fields/src/actions/restore-post.tsx
@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const restorePost: Action< PostWithPermissions > = {
+	id: 'restore',
+	label: __( 'Restore' ),
+	isPrimary: true,
+	icon: backup,
+	supportsBulk: true,
+	isEligible( item ) {
+		return (
+			! isTemplateOrTemplatePart( item ) &&
+			item.type !== 'wp_block' &&
+			item.status === 'trash' &&
+			item.permissions?.update
+		);
+	},
+	async callback( posts, { registry, onActionPerformed } ) {
+		const { createSuccessNotice, createErrorNotice } =
+			registry.dispatch( noticesStore );
+		const { editEntityRecord, saveEditedEntityRecord } =
+			registry.dispatch( coreStore );
+		await Promise.allSettled(
+			posts.map( ( post ) => {
+				return editEntityRecord( 'postType', post.type, post.id, {
+					status: 'draft',
+				} );
+			} )
+		);
+		const promiseResult = await Promise.allSettled(
+			posts.map( ( post ) => {
+				return saveEditedEntityRecord( 'postType', post.type, post.id, {
+					throwOnError: true,
+				} );
+			} )
+		);
+
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+			if ( posts.length === 1 ) {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '"%s" has been restored.' ),
+					getItemTitle( posts[ 0 ] )
+				);
+			} else if ( posts[ 0 ].type === 'page' ) {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '%d pages have been restored.' ),
+					posts.length
+				);
+			} else {
+				successMessage = sprintf(
+					/* translators: The number of posts. */
+					__( '%d posts have been restored.' ),
+					posts.length
+				);
+			}
+			createSuccessNotice( successMessage, {
+				type: 'snackbar',
+				id: 'restore-post-action',
+			} );
+			if ( onActionPerformed ) {
+				onActionPerformed( posts );
+			}
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to move a single post to the trash.
+			if ( promiseResult.length === 1 ) {
+				const typedError = promiseResult[ 0 ] as {
+					reason?: CoreDataError;
+				};
+				if ( typedError.reason?.message ) {
+					errorMessage = typedError.reason.message;
+				} else {
+					errorMessage = __(
+						'An error occurred while restoring the post.'
+					);
+				}
+				// If we were trying to move multiple posts to the trash
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					const typedError = failedPromise as {
+						reason?: CoreDataError;
+					};
+					if ( typedError.reason?.message ) {
+						errorMessages.add( typedError.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = __(
+						'An error occurred while restoring the posts.'
+					);
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = sprintf(
+						/* translators: %s: an error message */
+						__( 'An error occurred while restoring the posts: %s' ),
+						[ ...errorMessages ][ 0 ]
+					);
+				} else {
+					errorMessage = sprintf(
+						/* translators: %s: a list of comma separated error messages */
+						__(
+							'Some errors occurred while restoring the posts: %s'
+						),
+						[ ...errorMessages ].join( ',' )
+					);
+				}
+			}
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		}
+	},
+};
+
+/**
+ * Restore action for PostWithPermissions.
+ */
+export default restorePost;
diff --git a/packages/fields/src/actions/trash-post.tsx b/packages/fields/src/actions/trash-post.tsx
new file mode 100644
index 00000000000000..c0227996b5e866
--- /dev/null
+++ b/packages/fields/src/actions/trash-post.tsx
@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
+
+const trashPost: Action< PostWithPermissions > = {
+	id: 'move-to-trash',
+	label: __( 'Move to trash' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( item ) {
+		if ( isTemplateOrTemplatePart( item ) || item.type === 'wp_block' ) {
+			return false;
+		}
+
+		return (
+			!! item.status &&
+			! [ 'auto-draft', 'trash' ].includes( item.status ) &&
+			item.permissions?.delete
+		);
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const { deleteEntityRecord } = useDispatch( coreStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ items.length === 1
+						? sprintf(
+								// translators: %s: The item's title.
+								__(
+									'Are you sure you want to move "%s" to the trash?'
+								),
+								getItemTitle( items[ 0 ] )
+						  )
+						: sprintf(
+								// translators: %d: The number of items (2 or more).
+								_n(
+									'Are you sure you want to move %d item to the trash ?',
+									'Are you sure you want to move %d items to the trash ?',
+									items.length
+								),
+								items.length
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							const promiseResult = await Promise.allSettled(
+								items.map( ( item ) =>
+									deleteEntityRecord(
+										'postType',
+										item.type,
+										item.id.toString(),
+										{},
+										{ throwOnError: true }
+									)
+								)
+							);
+							// If all the promises were fulfilled with success.
+							if (
+								promiseResult.every(
+									( { status } ) => status === 'fulfilled'
+								)
+							) {
+								let successMessage;
+								if ( promiseResult.length === 1 ) {
+									successMessage = sprintf(
+										/* translators: The item's title. */
+										__( '"%s" moved to the trash.' ),
+										getItemTitle( items[ 0 ] )
+									);
+								} else {
+									successMessage = sprintf(
+										/* translators: The number of items. */
+										_n(
+											'%s item moved to the trash.',
+											'%s items moved to the trash.',
+											items.length
+										),
+										items.length
+									);
+								}
+								createSuccessNotice( successMessage, {
+									type: 'snackbar',
+									id: 'move-to-trash-action',
+								} );
+							} else {
+								// If there was at least one failure.
+								let errorMessage;
+								// If we were trying to delete a single item.
+								if ( promiseResult.length === 1 ) {
+									const typedError = promiseResult[ 0 ] as {
+										reason?: CoreDataError;
+									};
+									if ( typedError.reason?.message ) {
+										errorMessage =
+											typedError.reason.message;
+									} else {
+										errorMessage = __(
+											'An error occurred while moving the item to the trash.'
+										);
+									}
+									// If we were trying to delete multiple items.
+								} else {
+									const errorMessages = new Set();
+									const failedPromises = promiseResult.filter(
+										( { status } ) => status === 'rejected'
+									);
+									for ( const failedPromise of failedPromises ) {
+										const typedError = failedPromise as {
+											reason?: CoreDataError;
+										};
+										if ( typedError.reason?.message ) {
+											errorMessages.add(
+												typedError.reason.message
+											);
+										}
+									}
+									if ( errorMessages.size === 0 ) {
+										errorMessage = __(
+											'An error occurred while moving the items to the trash.'
+										);
+									} else if ( errorMessages.size === 1 ) {
+										errorMessage = sprintf(
+											/* translators: %s: an error message */
+											__(
+												'An error occurred while moving the item to the trash: %s'
+											),
+											[ ...errorMessages ][ 0 ]
+										);
+									} else {
+										errorMessage = sprintf(
+											/* translators: %s: a list of comma separated error messages */
+											__(
+												'Some errors occurred while moving the items to the trash: %s'
+											),
+											[ ...errorMessages ].join( ',' )
+										);
+									}
+								}
+								createErrorNotice( errorMessage, {
+									type: 'snackbar',
+								} );
+							}
+							if ( onActionPerformed ) {
+								onActionPerformed( items );
+							}
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ _x( 'Trash', 'verb' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+/**
+ * Trash action for PostWithPermissions.
+ */
+export default trashPost;
diff --git a/packages/fields/src/actions/utils.ts b/packages/fields/src/actions/utils.ts
new file mode 100644
index 00000000000000..7bc08573f0b9f8
--- /dev/null
+++ b/packages/fields/src/actions/utils.ts
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import type { Post, TemplatePart, Template } from '../types';
+
+export function isTemplate( post: Post ): post is Template {
+	return post.type === 'wp_template';
+}
+
+export function isTemplatePart( post: Post ): post is TemplatePart {
+	return post.type === 'wp_template_part';
+}
+
+export function isTemplateOrTemplatePart(
+	p: Post
+): p is Template | TemplatePart {
+	return p.type === 'wp_template' || p.type === 'wp_template_part';
+}
+
+export function getItemTitle( item: {
+	title: string | { rendered: string } | { raw: string };
+} ) {
+	if ( typeof item.title === 'string' ) {
+		return decodeEntities( item.title );
+	}
+	if ( item.title && 'rendered' in item.title ) {
+		return decodeEntities( item.title.rendered );
+	}
+	if ( item.title && 'raw' in item.title ) {
+		return decodeEntities( item.title.raw );
+	}
+	return '';
+}
+
+/**
+ * Check if a template is removable.
+ *
+ * @param template The template entity to check.
+ * @return Whether the template is removable.
+ */
+export function isTemplateRemovable( template: Template | TemplatePart ) {
+	if ( ! template ) {
+		return false;
+	}
+	// In patterns list page we map the templates parts to a different object
+	// than the one returned from the endpoint. This is why we need to check for
+	// two props whether is custom or has a theme file.
+	return (
+		[ template.source, template.source ].includes( 'custom' ) &&
+		! Boolean( template.type === 'wp_template' && template?.plugin ) &&
+		! template.has_theme_file
+	);
+}
diff --git a/packages/fields/src/actions/view-post-revisions.tsx b/packages/fields/src/actions/view-post-revisions.tsx
new file mode 100644
index 00000000000000..40eecde5771311
--- /dev/null
+++ b/packages/fields/src/actions/view-post-revisions.tsx
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { __, sprintf } from '@wordpress/i18n';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { Post } from '../types';
+
+const viewPostRevisions: Action< Post > = {
+	id: 'view-post-revisions',
+	context: 'list',
+	label( items ) {
+		const revisionsCount =
+			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return sprintf(
+			/* translators: %s: number of revisions. */
+			__( 'View revisions (%s)' ),
+			revisionsCount
+		);
+	},
+	isEligible( post ) {
+		if ( post.status === 'trash' ) {
+			return false;
+		}
+		const lastRevisionId =
+			post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null;
+		const revisionsCount =
+			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
+		return !! lastRevisionId && revisionsCount > 1;
+	},
+	callback( posts, { onActionPerformed } ) {
+		const post = posts[ 0 ];
+		const href = addQueryArgs( 'revision.php', {
+			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
+		} );
+		document.location.href = href;
+		if ( onActionPerformed ) {
+			onActionPerformed( posts );
+		}
+	},
+};
+
+/**
+ * View post revisions action for Post.
+ */
+export default viewPostRevisions;
diff --git a/packages/fields/src/actions/view-post.tsx b/packages/fields/src/actions/view-post.tsx
new file mode 100644
index 00000000000000..7517ab1f37cb33
--- /dev/null
+++ b/packages/fields/src/actions/view-post.tsx
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { external } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+import type { Action } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../types';
+
+const viewPost: Action< BasePost > = {
+	id: 'view-post',
+	label: _x( 'View', 'verb' ),
+	isPrimary: true,
+	icon: external,
+	isEligible( post ) {
+		return post.status !== 'trash';
+	},
+	callback( posts, { onActionPerformed } ) {
+		const post = posts[ 0 ];
+		window.open( post?.link, '_blank' );
+		if ( onActionPerformed ) {
+			onActionPerformed( posts );
+		}
+	},
+};
+
+/**
+ * View post action for BasePost.
+ */
+export default viewPost;
diff --git a/packages/fields/src/components/create-template-part-modal/index.tsx b/packages/fields/src/components/create-template-part-modal/index.tsx
new file mode 100644
index 00000000000000..03b39a8fdcdf39
--- /dev/null
+++ b/packages/fields/src/components/create-template-part-modal/index.tsx
@@ -0,0 +1,274 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Icon,
+	BaseControl,
+	TextControl,
+	Flex,
+	FlexItem,
+	FlexBlock,
+	Button,
+	Modal,
+	__experimentalRadioGroup as RadioGroup,
+	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	check,
+	footer as footerIcon,
+	header as headerIcon,
+	sidebar as sidebarIcon,
+	symbolFilled as symbolFilledIcon,
+} from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+// @ts-ignore
+import { serialize } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getCleanTemplatePartSlug,
+	getUniqueTemplatePartTitle,
+	useExistingTemplateParts,
+} from './utils';
+
+type CreateTemplatePartModalContentsProps = {
+	defaultArea?: string;
+	blocks: any[];
+	confirmLabel?: string;
+	closeModal: () => void;
+	onCreate: ( templatePart: any ) => void;
+	onError?: () => void;
+	defaultTitle?: string;
+};
+
+/**
+ * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.
+ * This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
+ * @param {Object} props            The component props.
+ * @param          props.modalTitle
+ */
+export default function CreateTemplatePartModal( {
+	modalTitle,
+	...restProps
+}: {
+	modalTitle: string;
+} & CreateTemplatePartModalContentsProps ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			// @ts-ignore
+			select( coreStore ).getPostType( 'wp_template_part' )?.labels
+				?.add_new_item,
+		[]
+	);
+	return (
+		<Modal
+			title={ modalTitle || defaultModalTitle }
+			onRequestClose={ restProps.closeModal }
+			overlayClassName="fields-create-template-part-modal"
+			focusOnMount="firstContentElement"
+			size="medium"
+		>
+			{ /* @ts-ignore */ }
+			<CreateTemplatePartModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+const getTemplatePartIcon = ( iconName: string ) => {
+	if ( 'header' === iconName ) {
+		return headerIcon;
+	} else if ( 'footer' === iconName ) {
+		return footerIcon;
+	} else if ( 'sidebar' === iconName ) {
+		return sidebarIcon;
+	}
+	return symbolFilledIcon;
+};
+
+/**
+ * A React component that renders the content of a model for creating a template part.
+ * This component should not live in this package; it should be moved to a dedicated package responsible for managing template.
+ *
+ * @param {Object}   props                             - The component props.
+ * @param {string}   [props.defaultArea=uncategorized] - The default area for the template part.
+ * @param {Array}    [props.blocks=[]]                 - The blocks to be included in the template part.
+ * @param {string}   [props.confirmLabel='Add']        - The label for the confirm button.
+ * @param {Function} props.closeModal                  - Function to close the modal.
+ * @param {Function} props.onCreate                    - Function to call when the template part is successfully created.
+ * @param {Function} [props.onError]                   - Function to call when there is an error creating the template part.
+ * @param {string}   [props.defaultTitle='']           - The default title for the template part.
+ */
+export function CreateTemplatePartModalContents( {
+	defaultArea = 'uncategorized',
+	blocks = [],
+	confirmLabel = __( 'Add' ),
+	closeModal,
+	onCreate,
+	onError,
+	defaultTitle = '',
+}: CreateTemplatePartModalContentsProps ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const existingTemplateParts = useExistingTemplateParts();
+
+	const [ title, setTitle ] = useState( defaultTitle );
+	const [ area, setArea ] = useState( defaultArea );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
+	const instanceId = useInstanceId( CreateTemplatePartModal );
+
+	const defaultTemplatePartAreas = useSelect( ( select ) => {
+		const areas =
+			// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
+			select( coreStore ).getEntityRecord< {
+				default_template_part_areas: Array< {
+					area: string;
+					label: string;
+					icon: string;
+					description: string;
+				} >;
+			} >( 'root', '__unstableBase' )?.default_template_part_areas || [];
+
+		return areas.map( ( item ) => {
+			return { ...item, icon: getTemplatePartIcon( item.icon ) };
+		} );
+	}, [] );
+
+	async function createTemplatePart() {
+		if ( ! title || isSubmitting ) {
+			return;
+		}
+
+		try {
+			setIsSubmitting( true );
+			const uniqueTitle = getUniqueTemplatePartTitle(
+				title,
+				existingTemplateParts
+			);
+			const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
+
+			const templatePart = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{
+					slug: cleanSlug,
+					title: uniqueTitle,
+					content: serialize( blocks ),
+					area,
+				},
+				{ throwOnError: true }
+			);
+			await onCreate( templatePart );
+
+			// TODO: Add a success notice?
+		} catch ( error ) {
+			const errorMessage =
+				error instanceof Error &&
+				'code' in error &&
+				error.message &&
+				error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+
+			onError?.();
+		} finally {
+			setIsSubmitting( false );
+		}
+	}
+	return (
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await createTemplatePart();
+			} }
+		>
+			<VStack spacing="4">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					__nextHasNoMarginBottom
+					label={ __( 'Area' ) }
+					id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
+					className="fields-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
+						label={ __( 'Area' ) }
+						className="fields-create-template-part-modal__area-radio-group"
+						id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
+						onChange={ ( value ) =>
+							value && typeof value === 'string'
+								? setArea( value )
+								: () => void 0
+						}
+						checked={ area }
+					>
+						{ defaultTemplatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									__next40pxDefaultSize
+									key={ label }
+									value={ value }
+									className="fields-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="fields-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
+
+										<FlexItem className="fields-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSubmitting }
+						isBusy={ isSubmitting }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
diff --git a/packages/fields/src/components/create-template-part-modal/style.scss b/packages/fields/src/components/create-template-part-modal/style.scss
new file mode 100644
index 00000000000000..fedc0326648c2e
--- /dev/null
+++ b/packages/fields/src/components/create-template-part-modal/style.scss
@@ -0,0 +1,63 @@
+.fields-create-template-part-modal {
+	z-index: z-index(".fields-create-template-part-modal");
+}
+
+.fields-create-template-part-modal__area-radio-group {
+	width: 100%;
+	border: $border-width solid $gray-700;
+	border-radius: $radius-small;
+
+	.components-button.fields-create-template-part-modal__area-radio {
+		display: block;
+		width: 100%;
+		height: 100%;
+		text-align: left;
+		padding: $grid-unit-15;
+
+		&,
+		&.is-secondary:hover,
+		&.is-primary:hover {
+			margin: 0;
+			background-color: inherit;
+			border-bottom: $border-width solid $gray-700;
+			border-radius: 0;
+
+			&:not(:focus) {
+				box-shadow: none;
+			}
+
+			&:focus {
+				border-bottom: $border-width solid $white;
+			}
+
+			&:last-of-type {
+				border-bottom: none;
+			}
+		}
+
+		&:not(:hover),
+		&[aria-checked="true"] {
+			color: $gray-900;
+			cursor: auto;
+
+			.fields-create-template-part-modal__option-label div {
+				color: $gray-600;
+			}
+		}
+
+		.fields-create-template-part-modal__option-label {
+			padding-top: $grid-unit-05;
+			white-space: normal;
+
+			div {
+				padding-top: $grid-unit-05;
+				font-size: $helptext-font-size;
+			}
+		}
+
+		.fields-create-template-part-modal__checkbox {
+			margin-left: auto;
+			min-width: $grid-unit-30;
+		}
+	}
+}
diff --git a/packages/fields/src/components/create-template-part-modal/test/utils.js b/packages/fields/src/components/create-template-part-modal/test/utils.js
new file mode 100644
index 00000000000000..7e33c16f46d8e8
--- /dev/null
+++ b/packages/fields/src/components/create-template-part-modal/test/utils.js
@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from '../utils';
+
+describe( 'getUniqueTemplatePartTitle', () => {
+	it( 'should return the title if it is unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'Template Part With Another Title',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			title
+		);
+	} );
+
+	it( 'should return the title with a suffix if it is not unique', () => {
+		const title = 'My Template Part';
+		const templateParts = [
+			{
+				title: {
+					rendered: 'My Template Part',
+				},
+			},
+			{
+				title: {
+					rendered: 'My Template Part 2',
+				},
+			},
+		];
+
+		expect( getUniqueTemplatePartTitle( title, templateParts ) ).toBe(
+			'My Template Part 3'
+		);
+	} );
+} );
+
+describe( 'getCleanTemplatePartSlug', () => {
+	it( 'should return a slug with only latin chars', () => {
+		const title = 'Myɶ Template Partɮ';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'my-template-part' );
+	} );
+
+	it( 'should return a slug with only latin chars and numbers', () => {
+		const title = 'My Template Part 2';
+		expect( getCleanTemplatePartSlug( title ) ).toBe(
+			'my-template-part-2'
+		);
+	} );
+
+	it( 'should default the slug to wp-custom-part', () => {
+		const title = '';
+		expect( getCleanTemplatePartSlug( title ) ).toBe( 'wp-custom-part' );
+	} );
+} );
diff --git a/packages/fields/src/components/create-template-part-modal/utils.js b/packages/fields/src/components/create-template-part-modal/utils.js
new file mode 100644
index 00000000000000..9ecf3efd03f918
--- /dev/null
+++ b/packages/fields/src/components/create-template-part-modal/utils.js
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+
+export const useExistingTemplateParts = () => {
+	return (
+		useSelect(
+			( select ) =>
+				select( coreStore ).getEntityRecords(
+					'postType',
+					'wp_template_part',
+					{
+						per_page: -1,
+					}
+				),
+			[]
+		) ?? []
+	);
+};
+
+/**
+ * Return a unique template part title based on
+ * the given title and existing template parts.
+ *
+ * @param {string} title         The original template part title.
+ * @param {Object} templateParts The array of template part entities.
+ * @return {string} A unique template part title.
+ */
+export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
+	const lowercaseTitle = title.toLowerCase();
+	const existingTitles = templateParts.map( ( templatePart ) =>
+		templatePart.title.rendered.toLowerCase()
+	);
+
+	if ( ! existingTitles.includes( lowercaseTitle ) ) {
+		return title;
+	}
+
+	let suffix = 2;
+	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
+		suffix++;
+	}
+
+	return `${ title } ${ suffix }`;
+};
+
+/**
+ * Get a valid slug for a template part.
+ * Currently template parts only allow latin chars.
+ * The fallback slug will receive suffix by default.
+ *
+ * @param {string} title The template part title.
+ * @return {string} A valid template part slug.
+ */
+export const getCleanTemplatePartSlug = ( title ) => {
+	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+};
diff --git a/packages/fields/src/fields/author/author-view.tsx b/packages/fields/src/fields/author/author-view.tsx
new file mode 100644
index 00000000000000..8232350af5193e
--- /dev/null
+++ b/packages/fields/src/fields/author/author-view.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { User } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePostWithEmbeddedAuthor } from '../../types';
+
+function AuthorView( { item }: { item: BasePostWithEmbeddedAuthor } ) {
+	const { text, imageUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			let user: User | undefined;
+			if ( !! item.author ) {
+				user = getEntityRecord( 'root', 'user', item.author );
+			}
+			return {
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ authorIcon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export default AuthorView;
diff --git a/packages/fields/src/fields/author/index.tsx b/packages/fields/src/fields/author/index.tsx
new file mode 100644
index 00000000000000..22f9409e051556
--- /dev/null
+++ b/packages/fields/src/fields/author/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePostWithEmbeddedAuthor } from '../../types';
+import AuthorView from './author-view';
+
+const authorField: Field< BasePostWithEmbeddedAuthor > = {
+	label: __( 'Author' ),
+	id: 'author',
+	type: 'integer',
+	elements: [],
+	render: AuthorView,
+	sort: ( a, b, direction ) => {
+		const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+		const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+		return direction === 'asc'
+			? nameA.localeCompare( nameB )
+			: nameB.localeCompare( nameA );
+	},
+};
+
+/**
+ * Author field for BasePost.
+ */
+export default authorField;
diff --git a/packages/fields/src/fields/comment-status/index.tsx b/packages/fields/src/fields/comment-status/index.tsx
new file mode 100644
index 00000000000000..7f373bc14e2108
--- /dev/null
+++ b/packages/fields/src/fields/comment-status/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const commentStatusField: Field< BasePost > = {
+	id: 'comment_status',
+	label: __( 'Discussion' ),
+	type: 'text',
+	Edit: 'radio',
+	enableSorting: false,
+	filterBy: {
+		operators: [],
+	},
+	elements: [
+		{
+			value: 'open',
+			label: __( 'Open' ),
+			description: __( 'Visitors can add new comments and replies.' ),
+		},
+		{
+			value: 'closed',
+			label: __( 'Closed' ),
+			description: __(
+				'Visitors cannot add new comments or replies. Existing comments remain visible.'
+			),
+		},
+	],
+};
+
+/**
+ * Comment status field for BasePost.
+ */
+export default commentStatusField;
diff --git a/packages/fields/src/fields/date/date-view.tsx b/packages/fields/src/fields/date/date-view.tsx
new file mode 100644
index 00000000000000..1cc2ab2d04e047
--- /dev/null
+++ b/packages/fields/src/fields/date/date-view.tsx
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const getFormattedDate = ( dateToDisplay: string | null ) =>
+	dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( dateToDisplay )
+	);
+
+const DateView = ( { item }: { item: BasePost } ) => {
+	const isDraftOrPrivate = [ 'draft', 'private' ].includes(
+		item.status ?? ''
+	);
+	if ( isDraftOrPrivate ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation or modification date. */
+				__( '<span>Modified: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	const isScheduled = item.status === 'future';
+	if ( isScheduled ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation date */
+				__( '<span>Scheduled: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	const isPublished = item.status === 'publish';
+	if ( isPublished ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation time */
+				__( '<span>Published: <time>%s</time></span>' ),
+				getFormattedDate( item.date ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	// Pending posts show the modified date if it's newer.
+	const dateToDisplay =
+		getDate( item.modified ?? null ) > getDate( item.date ?? null )
+			? item.modified
+			: item.date;
+
+	const isPending = item.status === 'pending';
+	if ( isPending ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: %s: page creation or modification date. */
+				__( '<span>Modified: <time>%s</time></span>' ),
+				getFormattedDate( dateToDisplay ?? null )
+			),
+			{
+				span: <span />,
+				time: <time />,
+			}
+		);
+	}
+
+	// Unknow status.
+	return <time>{ getFormattedDate( item.date ?? null ) }</time>;
+};
+
+export default DateView;
diff --git a/packages/fields/src/fields/date/index.tsx b/packages/fields/src/fields/date/index.tsx
new file mode 100644
index 00000000000000..49bd0807de6691
--- /dev/null
+++ b/packages/fields/src/fields/date/index.tsx
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import DateView from './date-view';
+
+const dateField: Field< BasePost > = {
+	id: 'date',
+	type: 'datetime',
+	label: __( 'Date' ),
+	render: DateView,
+};
+
+/**
+ * Date field for BasePost.
+ */
+export default dateField;
diff --git a/packages/fields/src/fields/featured-image/featured-image-edit.tsx b/packages/fields/src/fields/featured-image/featured-image-edit.tsx
new file mode 100644
index 00000000000000..ee51e5c60f13e0
--- /dev/null
+++ b/packages/fields/src/fields/featured-image/featured-image-edit.tsx
@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalGrid as Grid } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useRef } from '@wordpress/element';
+// @ts-ignore
+import { MediaUpload } from '@wordpress/media-utils';
+import { lineSolid } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export const FeaturedImageEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const value = field.getValue( { item: data } );
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'root', 'media', value );
+		},
+		[ value ]
+	);
+
+	const onChangeControl = useCallback(
+		( newValue: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const url = media?.source_url;
+	const title = media?.title?.rendered;
+	const ref = useRef( null );
+
+	return (
+		<fieldset className="fields-controls__featured-image">
+			<div className="fields-controls__featured-image-container">
+				<MediaUpload
+					onSelect={ ( selectedMedia: { id: number } ) => {
+						onChangeControl( selectedMedia.id );
+					} }
+					allowedTypes={ [ 'image' ] }
+					render={ ( { open }: { open: () => void } ) => {
+						return (
+							<div
+								ref={ ref }
+								role="button"
+								tabIndex={ -1 }
+								onClick={ () => {
+									open();
+								} }
+								onKeyDown={ open }
+							>
+								<Grid
+									rowGap={ 0 }
+									columnGap={ 8 }
+									templateColumns="24px 1fr 24px"
+								>
+									{ url && (
+										<>
+											<img
+												className="fields-controls__featured-image-image"
+												alt=""
+												width={ 24 }
+												height={ 24 }
+												src={ url }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ title }
+											</span>
+										</>
+									) }
+									{ ! url && (
+										<>
+											<span
+												className="fields-controls__featured-image-placeholder"
+												style={ {
+													width: '24px',
+													height: '24px',
+												} }
+											/>
+											<span className="fields-controls__featured-image-title">
+												{ __( 'Choose an image…' ) }
+											</span>
+										</>
+									) }
+									{ url && (
+										<>
+											<Button
+												size="small"
+												className="fields-controls__featured-image-remove-button"
+												icon={ lineSolid }
+												onClick={ (
+													event: React.MouseEvent< HTMLButtonElement >
+												) => {
+													event.stopPropagation();
+													onChangeControl( 0 );
+												} }
+											/>
+										</>
+									) }
+								</Grid>
+							</div>
+						);
+					} }
+				/>
+			</div>
+		</fieldset>
+	);
+};
diff --git a/packages/fields/src/fields/featured-image/featured-image-view.tsx b/packages/fields/src/fields/featured-image/featured-image-view.tsx
new file mode 100644
index 00000000000000..1f4b55183f2383
--- /dev/null
+++ b/packages/fields/src/fields/featured-image/featured-image-view.tsx
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export const FeaturedImageView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const mediaId = item.featured_media;
+
+	const media = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return mediaId ? getEntityRecord( 'root', 'media', mediaId ) : null;
+		},
+		[ mediaId ]
+	);
+	const url = media?.source_url;
+
+	if ( url ) {
+		return (
+			<img
+				className="fields-controls__featured-image-image"
+				src={ url }
+				alt=""
+			/>
+		);
+	}
+
+	return <span className="fields-controls__featured-image-placeholder" />;
+};
diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts
new file mode 100644
index 00000000000000..d6f22176fc6704
--- /dev/null
+++ b/packages/fields/src/fields/featured-image/index.ts
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { FeaturedImageEdit } from './featured-image-edit';
+import { FeaturedImageView } from './featured-image-view';
+
+const featuredImageField: Field< BasePost > = {
+	id: 'featured_media',
+	type: 'text',
+	label: __( 'Featured Image' ),
+	Edit: FeaturedImageEdit,
+	render: FeaturedImageView,
+	enableSorting: false,
+};
+
+/**
+ * Featured Image field for BasePost.
+ */
+export default featuredImageField;
diff --git a/packages/fields/src/fields/featured-image/style.scss b/packages/fields/src/fields/featured-image/style.scss
new file mode 100644
index 00000000000000..918f69172f3023
--- /dev/null
+++ b/packages/fields/src/fields/featured-image/style.scss
@@ -0,0 +1,92 @@
+.fields-controls__featured-image-placeholder {
+	border-radius: $radius-small;
+	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+	display: inline-block;
+	padding: 0;
+	background:
+		$white
+		linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+.fields-controls__featured-image-title {
+	width: 100%;
+	color: $gray-900;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.fields-controls__featured-image-image {
+	width: 100%;
+	height: 100%;
+	border-radius: $radius-small;
+	align-self: center;
+}
+
+.fields-controls__featured-image-container {
+	.fields-controls__featured-image-placeholder {
+		margin: 0;
+	}
+
+	span {
+		margin-right: auto;
+	}
+}
+
+fieldset.fields-controls__featured-image {
+	.fields-controls__featured-image-container {
+		border: $border-width solid $gray-300;
+		border-radius: $radius-small;
+		padding: 8px 12px;
+		cursor: pointer;
+		&:hover {
+			background-color: $gray-100;
+		}
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 24px;
+		height: 24px;
+	}
+
+	span {
+		align-self: center;
+		text-align: start;
+		white-space: nowrap;
+	}
+
+	.fields-controls__featured-image-upload-button {
+		padding: 0;
+		height: fit-content;
+		&:hover,
+		&:focus {
+			border: 0;
+			color: unset;
+		}
+	}
+
+	.fields-controls__featured-image-remove-button {
+		place-self: end;
+	}
+}
+
+.dataforms-layouts-panel__field-control {
+	.fields-controls__featured-image-image {
+		width: 16px;
+		height: 16px;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		width: 16px;
+		height: 16px;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper {
+	.fields-controls__featured-image-image,
+	.fields-controls__featured-image-placeholder {
+		width: 32px;
+		height: 32px;
+		display: block;
+	}
+}
diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts
new file mode 100644
index 00000000000000..410b0bf51a2232
--- /dev/null
+++ b/packages/fields/src/fields/index.ts
@@ -0,0 +1,14 @@
+export { default as slugField } from './slug';
+export { default as titleField } from './title';
+export { default as pageTitleField } from './page-title';
+export { default as templateTitleField } from './template-title';
+export { default as patternTitleField } from './pattern-title';
+export { default as orderField } from './order';
+export { default as featuredImageField } from './featured-image';
+export { default as templateField } from './template';
+export { default as parentField } from './parent';
+export { default as passwordField } from './password';
+export { default as statusField } from './status';
+export { default as commentStatusField } from './comment-status';
+export { default as dateField } from './date';
+export { default as authorField } from './author';
diff --git a/packages/fields/src/fields/order/index.ts b/packages/fields/src/fields/order/index.ts
new file mode 100644
index 00000000000000..121fcb9d0f3bdc
--- /dev/null
+++ b/packages/fields/src/fields/order/index.ts
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+const orderField: Field< BasePost > = {
+	id: 'menu_order',
+	type: 'integer',
+	label: __( 'Order' ),
+	description: __( 'Determines the order of pages.' ),
+};
+
+/**
+ * Order field for BasePost.
+ */
+export default orderField;
diff --git a/packages/fields/src/fields/page-title/index.ts b/packages/fields/src/fields/page-title/index.ts
new file mode 100644
index 00000000000000..8bbf051f2b5839
--- /dev/null
+++ b/packages/fields/src/fields/page-title/index.ts
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PageTitleView from './view';
+
+const pageTitleField: Field< BasePost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PageTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the page entity.
+ */
+export default pageTitleField;
diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss
new file mode 100644
index 00000000000000..def56aa466a8a1
--- /dev/null
+++ b/packages/fields/src/fields/page-title/style.scss
@@ -0,0 +1,10 @@
+.fields-field__page-title__badge {
+	background: $gray-100;
+	color: $gray-800;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-small;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+}
diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx
new file mode 100644
index 00000000000000..0be4c16d5d29ae
--- /dev/null
+++ b/packages/fields/src/fields/page-title/view.tsx
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { Settings } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+
+export default function PageTitleView( { item }: { item: CommonPost } ) {
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord(
+			'root',
+			'site'
+		) as Partial< Settings >;
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+	return (
+		<BaseTitleView item={ item } className="fields-field__page-title">
+			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
+				<span className="fields-field__page-title__badge">
+					{ item.id === frontPageId
+						? __( 'Homepage' )
+						: __( 'Posts Page' ) }
+				</span>
+			) }
+		</BaseTitleView>
+	);
+}
diff --git a/packages/fields/src/fields/parent/index.ts b/packages/fields/src/fields/parent/index.ts
new file mode 100644
index 00000000000000..f974608710bf7e
--- /dev/null
+++ b/packages/fields/src/fields/parent/index.ts
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { ParentEdit } from './parent-edit';
+import { ParentView } from './parent-view';
+
+const parentField: Field< BasePost > = {
+	id: 'parent',
+	type: 'text',
+	label: __( 'Parent' ),
+	Edit: ParentEdit,
+	render: ParentView,
+	enableSorting: true,
+};
+
+/**
+ * Parent field for BasePost.
+ */
+export default parentField;
diff --git a/packages/fields/src/fields/parent/parent-edit.tsx b/packages/fields/src/fields/parent/parent-edit.tsx
new file mode 100644
index 00000000000000..21cdbee7a365a4
--- /dev/null
+++ b/packages/fields/src/fields/parent/parent-edit.tsx
@@ -0,0 +1,348 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import { ComboboxControl, ExternalLink } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	createInterpolateElement,
+	useCallback,
+	useMemo,
+	useState,
+} from '@wordpress/element';
+// @ts-ignore
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __, sprintf } from '@wordpress/i18n';
+import { filterURLForDisplay } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getTitleWithFallbackName } from './utils';
+
+type TreeBase = {
+	id: number;
+	name: string;
+	[ key: string ]: any;
+};
+
+type TreeWithParent = TreeBase & {
+	parent: number;
+};
+
+type TreeWithoutParent = TreeBase & {
+	parent: null;
+};
+
+type Tree = TreeWithParent | TreeWithoutParent;
+
+function buildTermsTree( flatTerms: Tree[] ) {
+	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
+		return {
+			children: [],
+			...term,
+		};
+	} );
+
+	// All terms should have a `parent` because we're about to index them by it.
+	if (
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === null || parent === undefined
+		)
+	) {
+		return flatTermsWithParentAndChildren as TreeWithParent[];
+	}
+
+	const termsByParent = (
+		flatTermsWithParentAndChildren as TreeWithParent[]
+	 ).reduce(
+		( acc, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{} as Record< string, Array< TreeWithParent > >
+	);
+
+	const fillWithChildren = (
+		terms: Array< TreeWithParent >
+	): Array< TreeWithParent > => {
+		return terms.map( ( term ) => {
+			const children = termsByParent[ term.id ];
+			return {
+				...term,
+				children:
+					children && children.length
+						? fillWithChildren( children )
+						: [],
+			};
+		} );
+	};
+
+	return fillWithChildren( termsByParent[ '0' ] || [] );
+}
+
+export const getItemPriority = ( name: string, searchValue: string ) => {
+	const normalizedName = removeAccents( name || '' ).toLowerCase();
+	const normalizedSearch = removeAccents( searchValue || '' ).toLowerCase();
+	if ( normalizedName === normalizedSearch ) {
+		return 0;
+	}
+
+	if ( normalizedName.startsWith( normalizedSearch ) ) {
+		return normalizedName.length;
+	}
+
+	return Infinity;
+};
+
+export function PageAttributesParent( {
+	data,
+	onChangeControl,
+}: {
+	data: BasePost;
+	onChangeControl: ( newValue: number ) => void;
+} ) {
+	const [ fieldValue, setFieldValue ] = useState< null | string >( null );
+
+	const pageId = data.parent;
+	const postId = data.id;
+	const postTypeSlug = data.type;
+
+	const { parentPostTitle, pageItems, isHierarchical } = useSelect(
+		( select ) => {
+			// @ts-expect-error getPostType is not typed
+			const { getEntityRecord, getEntityRecords, getPostType } =
+				select( coreStore );
+
+			const postTypeInfo = getPostType( postTypeSlug );
+
+			const postIsHierarchical =
+				postTypeInfo?.hierarchical && postTypeInfo.viewable;
+
+			const parentPost = pageId
+				? getEntityRecord< BasePost >(
+						'postType',
+						postTypeSlug,
+						pageId
+				  )
+				: null;
+
+			const query = {
+				per_page: 100,
+				exclude: postId,
+				parent_exclude: postId,
+				orderby: 'menu_order',
+				order: 'asc',
+				_fields: 'id,title,parent',
+				...( fieldValue !== null && {
+					search: fieldValue,
+				} ),
+			};
+
+			return {
+				isHierarchical: postIsHierarchical,
+				parentPostTitle: parentPost
+					? getTitleWithFallbackName( parentPost )
+					: '',
+				pageItems: postIsHierarchical
+					? getEntityRecords< BasePost >(
+							'postType',
+							postTypeSlug,
+							query
+					  )
+					: null,
+			};
+		},
+		[ fieldValue, pageId, postId, postTypeSlug ]
+	);
+
+	/**
+	 * This logic has been copied from https://github.com/WordPress/gutenberg/blob/0249771b519d5646171fb9fae422006c8ab773f2/packages/editor/src/components/page-attributes/parent.js#L106.
+	 */
+	const parentOptions = useMemo( () => {
+		const getOptionsFromTree = (
+			tree: Array< Tree >,
+			level = 0
+		): Array< {
+			value: number;
+			label: string;
+			rawName: string;
+		} > => {
+			const mappedNodes = tree.map( ( treeNode ) => [
+				{
+					value: treeNode.id,
+					label:
+						'— '.repeat( level ) + decodeEntities( treeNode.name ),
+					rawName: treeNode.name,
+				},
+				...getOptionsFromTree( treeNode.children || [], level + 1 ),
+			] );
+
+			const sortedNodes = mappedNodes.sort( ( [ a ], [ b ] ) => {
+				const priorityA = getItemPriority(
+					a.rawName,
+					fieldValue ?? ''
+				);
+				const priorityB = getItemPriority(
+					b.rawName,
+					fieldValue ?? ''
+				);
+				return priorityA >= priorityB ? 1 : -1;
+			} );
+
+			return sortedNodes.flat();
+		};
+
+		if ( ! pageItems ) {
+			return [];
+		}
+
+		let tree = pageItems.map( ( item ) => ( {
+			id: item.id as number,
+			parent: item.parent ?? null,
+			name: getTitleWithFallbackName( item ),
+		} ) );
+
+		// Only build a hierarchical tree when not searching.
+		if ( ! fieldValue ) {
+			tree = buildTermsTree( tree );
+		}
+
+		const opts = getOptionsFromTree( tree );
+
+		// Ensure the current parent is in the options list.
+		const optsHasParent = opts.find( ( item ) => item.value === pageId );
+		if ( pageId && parentPostTitle && ! optsHasParent ) {
+			opts.unshift( {
+				value: pageId,
+				label: parentPostTitle,
+				rawName: '',
+			} );
+		}
+		return opts.map( ( option ) => ( {
+			...option,
+			value: option.value.toString(),
+		} ) );
+	}, [ pageItems, fieldValue, parentPostTitle, pageId ] );
+
+	if ( ! isHierarchical ) {
+		return null;
+	}
+
+	/**
+	 * Handle user input.
+	 *
+	 * @param {string} inputValue The current value of the input field.
+	 */
+	const handleKeydown = ( inputValue: string ) => {
+		setFieldValue( inputValue );
+	};
+
+	/**
+	 * Handle author selection.
+	 *
+	 * @param {Object} selectedPostId The selected Author.
+	 */
+	const handleChange = ( selectedPostId: string | null | undefined ) => {
+		if ( selectedPostId ) {
+			return onChangeControl( parseInt( selectedPostId, 10 ) ?? 0 );
+		}
+
+		onChangeControl( 0 );
+	};
+
+	return (
+		<ComboboxControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			label={ __( 'Parent' ) }
+			help={ __( 'Choose a parent page.' ) }
+			value={ pageId?.toString() }
+			options={ parentOptions }
+			onFilterValueChange={ debounce(
+				( value: unknown ) => handleKeydown( value as string ),
+				300
+			) }
+			onChange={ handleChange }
+			hideLabelFromVision
+		/>
+	);
+}
+
+export const ParentEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const homeUrl = useSelect( ( select ) => {
+		// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
+		return select( coreStore ).getEntityRecord< {
+			home: string;
+		} >( 'root', '__unstableBase' )?.home as string;
+	}, [] );
+
+	const onChangeControl = useCallback(
+		( newValue?: number ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="fields-controls__parent">
+			<div>
+				{ createInterpolateElement(
+					sprintf(
+						/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+						__(
+							'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+						),
+						filterURLForDisplay( homeUrl ).replace(
+							/([/.])/g,
+							'<wbr />$1'
+						)
+					),
+					{
+						wbr: <wbr />,
+					}
+				) }
+				<p>
+					{ createInterpolateElement(
+						__(
+							'They also show up as sub-items in the default navigation menu. <a>Learn more.</a>'
+						),
+						{
+							a: (
+								<ExternalLink
+									href={ __(
+										'https://wordpress.org/documentation/article/page-post-settings-sidebar/#page-attributes'
+									) }
+									children={ undefined }
+								/>
+							),
+						}
+					) }
+				</p>
+				<PageAttributesParent
+					data={ data }
+					onChangeControl={ onChangeControl }
+				/>
+			</div>
+		</fieldset>
+	);
+};
diff --git a/packages/fields/src/fields/parent/parent-view.tsx b/packages/fields/src/fields/parent/parent-view.tsx
new file mode 100644
index 00000000000000..20c6cb939b4b92
--- /dev/null
+++ b/packages/fields/src/fields/parent/parent-view.tsx
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataViewRenderFieldProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getTitleWithFallbackName } from './utils';
+
+export const ParentView = ( {
+	item,
+}: DataViewRenderFieldProps< BasePost > ) => {
+	const parent = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			return item?.parent
+				? getEntityRecord( 'postType', item.type, item.parent )
+				: null;
+		},
+		[ item.parent, item.type ]
+	);
+
+	if ( parent ) {
+		return <>{ getTitleWithFallbackName( parent ) }</>;
+	}
+
+	return <>{ __( 'None' ) }</>;
+};
diff --git a/packages/fields/src/fields/parent/utils.ts b/packages/fields/src/fields/parent/utils.ts
new file mode 100644
index 00000000000000..e69fd981305bd5
--- /dev/null
+++ b/packages/fields/src/fields/parent/utils.ts
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+export function getTitleWithFallbackName( post: BasePost ) {
+	return typeof post.title === 'object' &&
+		'rendered' in post.title &&
+		post.title.rendered
+		? decodeEntities( post.title.rendered )
+		: `#${ post?.id } (${ __( 'no title' ) })`;
+}
diff --git a/packages/fields/src/fields/password/edit.tsx b/packages/fields/src/fields/password/edit.tsx
new file mode 100644
index 00000000000000..75226c1f93f15b
--- /dev/null
+++ b/packages/fields/src/fields/password/edit.tsx
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	CheckboxControl,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+function PasswordEdit( {
+	data,
+	onChange,
+	field,
+}: DataFormControlProps< BasePost > ) {
+	const [ showPassword, setShowPassword ] = useState(
+		!! field.getValue( { item: data } )
+	);
+
+	const handleTogglePassword = ( value: boolean ) => {
+		setShowPassword( value );
+		if ( ! value ) {
+			onChange( { password: '' } );
+		}
+	};
+
+	return (
+		<VStack
+			as="fieldset"
+			spacing={ 4 }
+			className="fields-controls__password"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				label={ __( 'Password protected' ) }
+				help={ __( 'Only visible to those who know the password' ) }
+				checked={ showPassword }
+				onChange={ handleTogglePassword }
+			/>
+			{ showPassword && (
+				<div className="fields-controls__password-input">
+					<TextControl
+						label={ __( 'Password' ) }
+						onChange={ ( value ) =>
+							onChange( {
+								password: value,
+							} )
+						}
+						value={ field.getValue( { item: data } ) || '' }
+						placeholder={ __( 'Use a secure password' ) }
+						type="text"
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						maxLength={ 255 }
+					/>
+				</div>
+			) }
+		</VStack>
+	);
+}
+export default PasswordEdit;
diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx
new file mode 100644
index 00000000000000..3d45641b0efd0e
--- /dev/null
+++ b/packages/fields/src/fields/password/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import PasswordEdit from './edit';
+
+const passwordField: Field< BasePost > = {
+	id: 'password',
+	type: 'text',
+	Edit: PasswordEdit,
+	enableSorting: false,
+	enableHiding: false,
+	isVisible: ( item ) => item.status !== 'private',
+};
+
+/**
+ * Password field for BasePost.
+ */
+export default passwordField;
diff --git a/packages/fields/src/fields/pattern-title/index.ts b/packages/fields/src/fields/pattern-title/index.ts
new file mode 100644
index 00000000000000..a3e54eea6f28d1
--- /dev/null
+++ b/packages/fields/src/fields/pattern-title/index.ts
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PatternTitleView from './view';
+
+const patternTitleField: Field< Pattern > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PatternTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the pattern entity.
+ */
+export default patternTitleField;
diff --git a/packages/fields/src/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss
new file mode 100644
index 00000000000000..fa4d03c850beac
--- /dev/null
+++ b/packages/fields/src/fields/pattern-title/style.scss
@@ -0,0 +1,3 @@
+.fields-field__pattern-title span:first-child {
+	flex: 1;
+}
diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx
new file mode 100644
index 00000000000000..b59360d30e0be2
--- /dev/null
+++ b/packages/fields/src/fields/pattern-title/view.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, lockSmall } from '@wordpress/icons';
+import { Tooltip } from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+
+export const { PATTERN_TYPES } = unlock( patternPrivateApis );
+
+export default function PatternTitleView( { item }: { item: CommonPost } ) {
+	return (
+		<BaseTitleView item={ item } className="fields-field__pattern-title">
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon icon={ lockSmall } size={ 24 } />
+				</Tooltip>
+			) }
+		</BaseTitleView>
+	);
+}
diff --git a/packages/fields/src/fields/slug/index.ts b/packages/fields/src/fields/slug/index.ts
new file mode 100644
index 00000000000000..7311b1d10a66f6
--- /dev/null
+++ b/packages/fields/src/fields/slug/index.ts
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import SlugEdit from './slug-edit';
+import SlugView from './slug-view';
+
+const slugField: Field< BasePost > = {
+	id: 'slug',
+	type: 'text',
+	label: __( 'Slug' ),
+	Edit: SlugEdit,
+	render: SlugView,
+};
+
+/**
+ * Slug field for BasePost.
+ */
+export default slugField;
diff --git a/packages/fields/src/fields/slug/slug-edit.tsx b/packages/fields/src/fields/slug/slug-edit.tsx
new file mode 100644
index 00000000000000..aad6610550069c
--- /dev/null
+++ b/packages/fields/src/fields/slug/slug-edit.tsx
@@ -0,0 +1,153 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ExternalLink,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { copySmall } from '@wordpress/icons';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { safeDecodeURIComponent } from '@wordpress/url';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getSlug } from './utils';
+
+const SlugEdit = ( {
+	field,
+	onChange,
+	data,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+
+	const slug = field.getValue( { item: data } ) || getSlug( data );
+	const permalinkTemplate = data.permalink_template || '';
+	const PERMALINK_POSTNAME_REGEX = /%(?:postname|pagename)%/;
+	const [ prefix, suffix ] = permalinkTemplate.split(
+		PERMALINK_POSTNAME_REGEX
+	);
+	const permalinkPrefix = prefix;
+	const permalinkSuffix = suffix;
+	const isEditable = PERMALINK_POSTNAME_REGEX.test( permalinkTemplate );
+	const originalSlugRef = useRef( slug );
+	const slugToDisplay = slug || originalSlugRef.current;
+	const permalink = isEditable
+		? `${ permalinkPrefix }${ slugToDisplay }${ permalinkSuffix }`
+		: safeDecodeURIComponent( data.link || '' );
+
+	useEffect( () => {
+		if ( slug && originalSlugRef.current === undefined ) {
+			originalSlugRef.current = slug;
+		}
+	}, [ slug ] );
+
+	const onChangeControl = useCallback(
+		( newValue?: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	const { createNotice } = useDispatch( noticesStore );
+
+	const copyButtonRef = useCopyToClipboard( permalink, () => {
+		createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	} );
+
+	const postUrlSlugDescriptionId =
+		'editor-post-url__slug-description-' + useInstanceId( SlugEdit );
+
+	return (
+		<fieldset className="fields-controls__slug">
+			{ isEditable && (
+				<VStack>
+					<VStack spacing="0px">
+						<span>
+							{ __(
+								'Customize the last part of the Permalink.'
+							) }
+						</span>
+						<ExternalLink href="https://wordpress.org/documentation/article/page-post-settings-sidebar/#permalink">
+							{ __( 'Learn more' ) }
+						</ExternalLink>
+					</VStack>
+					<InputControl
+						__next40pxDefaultSize
+						prefix={
+							<InputControlPrefixWrapper>
+								/
+							</InputControlPrefixWrapper>
+						}
+						suffix={
+							<Button
+								__next40pxDefaultSize
+								icon={ copySmall }
+								ref={ copyButtonRef }
+								label={ __( 'Copy' ) }
+							/>
+						}
+						label={ __( 'Link' ) }
+						hideLabelFromVision
+						value={ slug }
+						autoComplete="off"
+						spellCheck="false"
+						type="text"
+						className="fields-controls__slug-input"
+						onChange={ ( newValue?: string ) => {
+							onChangeControl( newValue );
+						} }
+						onBlur={ () => {
+							if ( slug === '' ) {
+								onChangeControl( originalSlugRef.current );
+							}
+						} }
+						aria-describedby={ postUrlSlugDescriptionId }
+					/>
+					<div className="fields-controls__slug-help">
+						<span className="fields-controls__slug-help-visual-label">
+							{ __( 'Permalink:' ) }
+						</span>
+						<ExternalLink
+							className="fields-controls__slug-help-link"
+							href={ permalink }
+						>
+							<span className="fields-controls__slug-help-prefix">
+								{ permalinkPrefix }
+							</span>
+							<span className="fields-controls__slug-help-slug">
+								{ slugToDisplay }
+							</span>
+							<span className="fields-controls__slug-help-suffix">
+								{ permalinkSuffix }
+							</span>
+						</ExternalLink>
+					</div>
+				</VStack>
+			) }
+			{ ! isEditable && (
+				<ExternalLink
+					className="fields-controls__slug-help"
+					href={ permalink }
+				>
+					{ permalink }
+				</ExternalLink>
+			) }
+		</fieldset>
+	);
+};
+
+export default SlugEdit;
diff --git a/packages/fields/src/fields/slug/slug-view.tsx b/packages/fields/src/fields/slug/slug-view.tsx
new file mode 100644
index 00000000000000..58f6881060c2db
--- /dev/null
+++ b/packages/fields/src/fields/slug/slug-view.tsx
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getSlug } from './utils';
+
+const SlugView = ( { item }: { item: BasePost } ) => {
+	const slug = getSlug( item );
+	const originalSlugRef = useRef( slug );
+
+	useEffect( () => {
+		if ( slug && originalSlugRef.current === undefined ) {
+			originalSlugRef.current = slug;
+		}
+	}, [ slug ] );
+
+	const slugToDisplay = slug || originalSlugRef.current;
+
+	return `${ slugToDisplay }`;
+};
+
+export default SlugView;
diff --git a/packages/fields/src/fields/slug/style.scss b/packages/fields/src/fields/slug/style.scss
new file mode 100644
index 00000000000000..aad99b3731e9eb
--- /dev/null
+++ b/packages/fields/src/fields/slug/style.scss
@@ -0,0 +1,22 @@
+.fields-controls__slug {
+	.fields-controls__slug-external-icon {
+		margin-left: 5ch;
+	}
+
+	.fields-controls__slug-input input.components-input-control__input {
+		padding-inline-start: 0 !important;
+	}
+
+	.fields-controls__slug-help-link {
+		word-break: break-word;
+	}
+
+	.fields-controls__slug-help {
+		display: flex;
+		flex-direction: column;
+
+		.fields-controls__slug-help-slug {
+			font-weight: 600;
+		}
+	}
+}
diff --git a/packages/fields/src/fields/slug/utils.ts b/packages/fields/src/fields/slug/utils.ts
new file mode 100644
index 00000000000000..b414146ba17819
--- /dev/null
+++ b/packages/fields/src/fields/slug/utils.ts
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { cleanForSlug } from '@wordpress/url';
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+export const getSlug = ( item: BasePost ): string => {
+	if ( typeof item !== 'object' ) {
+		return '';
+	}
+
+	return (
+		item.slug || cleanForSlug( getItemTitle( item ) ) || item.id.toString()
+	);
+};
diff --git a/packages/fields/src/fields/status/index.tsx b/packages/fields/src/fields/status/index.tsx
new file mode 100644
index 00000000000000..374277bc7260ed
--- /dev/null
+++ b/packages/fields/src/fields/status/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import StatusView from './status-view';
+import STATUSES from './status-elements';
+
+const OPERATOR_IS_ANY = 'isAny';
+
+const statusField: Field< BasePost > = {
+	label: __( 'Status' ),
+	id: 'status',
+	type: 'text',
+	elements: STATUSES,
+	render: StatusView,
+	Edit: 'radio',
+	enableSorting: false,
+	filterBy: {
+		operators: [ OPERATOR_IS_ANY ],
+	},
+};
+
+/**
+ * Status field for BasePost.
+ */
+export default statusField;
diff --git a/packages/fields/src/fields/status/status-elements.tsx b/packages/fields/src/fields/status/status-elements.tsx
new file mode 100644
index 00000000000000..079612270e6379
--- /dev/null
+++ b/packages/fields/src/fields/status/status-elements.tsx
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+// See https://github.com/WordPress/gutenberg/issues/55886
+// We do not support custom statutes at the moment.
+const STATUSES = [
+	{
+		value: 'draft',
+		label: __( 'Draft' ),
+		icon: drafts,
+		description: __( 'Not ready to publish.' ),
+	},
+	{
+		value: 'future',
+		label: __( 'Scheduled' ),
+		icon: scheduled,
+		description: __( 'Publish automatically on a chosen date.' ),
+	},
+	{
+		value: 'pending',
+		label: __( 'Pending Review' ),
+		icon: pending,
+		description: __( 'Waiting for review before publishing.' ),
+	},
+	{
+		value: 'private',
+		label: __( 'Private' ),
+		icon: notAllowed,
+		description: __( 'Only visible to site admins and editors.' ),
+	},
+	{
+		value: 'publish',
+		label: __( 'Published' ),
+		icon: published,
+		description: __( 'Visible to everyone.' ),
+	},
+	{ value: 'trash', label: __( 'Trash' ), icon: trash },
+];
+
+export default STATUSES;
diff --git a/packages/fields/src/fields/status/status-view.tsx b/packages/fields/src/fields/status/status-view.tsx
new file mode 100644
index 00000000000000..4f3c0547431ac9
--- /dev/null
+++ b/packages/fields/src/fields/status/status-view.tsx
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import STATUSES from './status-elements';
+
+function StatusView( { item }: { item: BasePost } ) {
+	const status = STATUSES.find( ( { value } ) => value === item.status );
+	const label = status?.label || item.status;
+	const icon = status?.icon;
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ icon && (
+				<div className="edit-site-post-list__status-icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
+export default StatusView;
diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts
new file mode 100644
index 00000000000000..e0d83d6ffda8f6
--- /dev/null
+++ b/packages/fields/src/fields/template-title/index.ts
@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Template } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import TitleView from '../title/view';
+
+const templateTitleField: Field< Template > = {
+	type: 'text',
+	label: __( 'Template' ),
+	placeholder: __( 'No title' ),
+	id: 'title',
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the template entity.
+ */
+export default templateTitleField;
diff --git a/packages/fields/src/fields/template/index.ts b/packages/fields/src/fields/template/index.ts
new file mode 100644
index 00000000000000..c419adedb537dd
--- /dev/null
+++ b/packages/fields/src/fields/template/index.ts
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { BasePost } from '../../types';
+import { TemplateEdit } from './template-edit';
+
+const templateField: Field< BasePost > = {
+	id: 'template',
+	type: 'text',
+	label: __( 'Template' ),
+	Edit: TemplateEdit,
+	enableSorting: false,
+};
+
+/**
+ * Template field for BasePost.
+ */
+export default templateField;
diff --git a/packages/fields/src/fields/template/style.scss b/packages/fields/src/fields/template/style.scss
new file mode 100644
index 00000000000000..a0c2fafec73893
--- /dev/null
+++ b/packages/fields/src/fields/template/style.scss
@@ -0,0 +1,23 @@
+.fields-controls__template-modal {
+	z-index: z-index(".fields-controls__template-modal");
+}
+
+.fields-controls__template-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+}
diff --git a/packages/fields/src/fields/template/template-edit.tsx b/packages/fields/src/fields/template/template-edit.tsx
new file mode 100644
index 00000000000000..c17364568a4578
--- /dev/null
+++ b/packages/fields/src/fields/template/template-edit.tsx
@@ -0,0 +1,210 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo, useState } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import type { WpTemplate } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { DataFormControlProps } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+// @ts-expect-error block-editor is not typed correctly.
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import {
+	Button,
+	Dropdown,
+	MenuGroup,
+	MenuItem,
+	Modal,
+} from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { getItemTitle } from '../../actions/utils';
+import type { BasePost } from '../../types';
+import { unlock } from '../../lock-unlock';
+
+export const TemplateEdit = ( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< BasePost > ) => {
+	const { id } = field;
+	const postType = data.type;
+	const postId =
+		typeof data.id === 'number' ? data.id : parseInt( data.id, 10 );
+	const slug = data.slug;
+
+	const { availableTemplates, templates } = useSelect(
+		( select ) => {
+			const allTemplates =
+				select( coreStore ).getEntityRecords< WpTemplate >(
+					'postType',
+					'wp_template',
+					{
+						per_page: -1,
+						post_type: postType,
+					}
+				) ?? [];
+
+			const { getHomePage, getPostsPageId } = unlock(
+				select( coreStore )
+			);
+
+			const isPostsPage = getPostsPageId() === +postId;
+			const isFrontPage =
+				postType === 'page' && getHomePage()?.postId === +postId;
+
+			const allowSwitchingTemplate = ! isPostsPage && ! isFrontPage;
+
+			return {
+				templates: allTemplates,
+				availableTemplates: allowSwitchingTemplate
+					? allTemplates.filter(
+							( template ) =>
+								template.is_custom &&
+								template.slug !== data.template &&
+								!! template.content.raw // Skip empty templates.
+					  )
+					: [],
+			};
+		},
+		[ data.template, postId, postType ]
+	);
+
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+
+	const value = field.getValue( { item: data } );
+
+	const currentTemplate = useSelect(
+		( select ) => {
+			const foundTemplate = templates?.find(
+				( template ) => template.slug === value
+			);
+
+			if ( foundTemplate ) {
+				return foundTemplate;
+			}
+
+			let slugToCheck;
+			// In `draft` status we might not have a slug available, so we use the `single`
+			// post type templates slug(ex page, single-post, single-product etc..).
+			// Pages do not need the `single` prefix in the slug to be prioritized
+			// through template hierarchy.
+			if ( slug ) {
+				slugToCheck =
+					postType === 'page'
+						? `${ postType }-${ slug }`
+						: `single-${ postType }-${ slug }`;
+			} else {
+				slugToCheck =
+					postType === 'page' ? 'page' : `single-${ postType }`;
+			}
+
+			if ( postType ) {
+				const templateId = select( coreStore ).getDefaultTemplateId( {
+					slug: slugToCheck,
+				} );
+
+				return select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					templateId
+				);
+			}
+		},
+		[ postType, slug, templates, value ]
+	);
+
+	const [ showModal, setShowModal ] = useState( false );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="fields-controls__template">
+			<Dropdown
+				popoverProps={ { placement: 'bottom-start' } }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						size="compact"
+						onClick={ onToggle }
+					>
+						{ currentTemplate
+							? getItemTitle( currentTemplate )
+							: '' }
+					</Button>
+				) }
+				renderContent={ ( { onToggle } ) => (
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								setShowModal( true );
+								onToggle();
+							} }
+						>
+							{ __( 'Swap template' ) }
+						</MenuItem>
+						{
+							// The default template in a post is indicated by an empty string
+							value !== '' && (
+								<MenuItem
+									onClick={ () => {
+										onChangeControl( '' );
+										onToggle();
+									} }
+								>
+									{ __( 'Use default template' ) }
+								</MenuItem>
+							)
+						}
+					</MenuGroup>
+				) }
+			/>
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ () => setShowModal( false ) }
+					overlayClassName="fields-controls__template-modal"
+					isFullScreen
+				>
+					<div className="fields-controls__template-content">
+						<BlockPatternsList
+							label={ __( 'Templates' ) }
+							blockPatterns={ templatesAsPatterns }
+							shownPatterns={ shownTemplates }
+							onClickPattern={ (
+								template: ( typeof templatesAsPatterns )[ 0 ]
+							) => {
+								onChangeControl( template.name );
+								setShowModal( false );
+							} }
+						/>
+					</div>
+				</Modal>
+			) }
+		</fieldset>
+	);
+};
diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts
new file mode 100644
index 00000000000000..b4a2399526fdd9
--- /dev/null
+++ b/packages/fields/src/fields/title/index.ts
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import TitleView from './view';
+
+const titleField: Field< CommonPost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the any entity with a `title` property.
+ * For patterns, pages or templates you should use the respective field
+ * because there are some differences in the rendering, labels, etc.
+ */
+export default titleField;
diff --git a/packages/fields/src/fields/title/style.scss b/packages/fields/src/fields/title/style.scss
new file mode 100644
index 00000000000000..5b9977dcaa398c
--- /dev/null
+++ b/packages/fields/src/fields/title/style.scss
@@ -0,0 +1,8 @@
+.fields-field__title span:first-child {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-decoration: none;
+	white-space: nowrap;
+	display: block;
+	flex-grow: 0;
+}
diff --git a/packages/fields/src/fields/title/view.tsx b/packages/fields/src/fields/title/view.tsx
new file mode 100644
index 00000000000000..b6f39796a57f05
--- /dev/null
+++ b/packages/fields/src/fields/title/view.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+export function BaseTitleView( {
+	item,
+	className,
+	children,
+}: {
+	item: CommonPost;
+	className?: string;
+	children?: ReactNode;
+} ) {
+	const renderedTitle = getItemTitle( item );
+	return (
+		<HStack
+			className={ clsx( 'fields-field__title', className ) }
+			alignment="center"
+			justify="flex-start"
+		>
+			<span>{ renderedTitle || __( '(no title)' ) }</span>
+			{ children }
+		</HStack>
+	);
+}
+
+export default function TitleView( { item }: { item: CommonPost } ) {
+	return <BaseTitleView item={ item } />;
+}
diff --git a/test/native/__mocks__/react-native-hr/index.js b/packages/fields/src/index.native.ts
similarity index 100%
rename from test/native/__mocks__/react-native-hr/index.js
rename to packages/fields/src/index.native.ts
diff --git a/packages/fields/src/index.ts b/packages/fields/src/index.ts
new file mode 100644
index 00000000000000..1658c9d8c51eee
--- /dev/null
+++ b/packages/fields/src/index.ts
@@ -0,0 +1,4 @@
+export * from './fields';
+export * from './actions';
+export { default as CreateTemplatePartModal } from './components/create-template-part-modal';
+export type { BasePostWithEmbeddedAuthor, PostType } from './types';
diff --git a/packages/fields/src/lock-unlock.ts b/packages/fields/src/lock-unlock.ts
new file mode 100644
index 00000000000000..2b5dcc4a506311
--- /dev/null
+++ b/packages/fields/src/lock-unlock.ts
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/fields'
+	);
diff --git a/packages/fields/src/mutation/index.ts b/packages/fields/src/mutation/index.ts
new file mode 100644
index 00000000000000..89df0f769f70ed
--- /dev/null
+++ b/packages/fields/src/mutation/index.ts
@@ -0,0 +1,184 @@
+/**
+ * WordPress dependencies
+ */
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, Post } from '../types';
+
+function getErrorMessagesFromPromises< T >(
+	allSettledResults: PromiseSettledResult< T >[]
+) {
+	const errorMessages = new Set< string >();
+	// If there was at lease one failure.
+	if ( allSettledResults.length === 1 ) {
+		const typedError = allSettledResults[ 0 ] as {
+			reason?: CoreDataError;
+		};
+		if ( typedError.reason?.message ) {
+			errorMessages.add( typedError.reason.message );
+		}
+	} else {
+		const failedPromises = allSettledResults.filter(
+			( { status } ) => status === 'rejected'
+		);
+		for ( const failedPromise of failedPromises ) {
+			const typedError = failedPromise as {
+				reason?: CoreDataError;
+			};
+			if ( typedError.reason?.message ) {
+				errorMessages.add( typedError.reason.message );
+			}
+		}
+	}
+	return errorMessages;
+}
+
+export type NoticeSettings< T extends Post > = {
+	success: {
+		id?: string;
+		type?: string;
+		messages: {
+			getMessage: ( posts: T ) => string;
+			getBatchMessage: ( posts: T[] ) => string;
+		};
+	};
+	error: {
+		id?: string;
+		type?: string;
+		messages: {
+			getMessage: ( errors: Set< string > ) => string;
+			getBatchMessage: ( errors: Set< string > ) => string;
+		};
+	};
+};
+
+export const deletePostWithNotices = async < T extends Post >(
+	posts: T[],
+	notice: NoticeSettings< T >,
+	callbacks: {
+		onActionPerformed?: ( posts: T[] ) => void;
+		onActionError?: () => void;
+	}
+) => {
+	const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+	const { deleteEntityRecord } = dispatch( coreStore );
+	const allSettledResults = await Promise.allSettled(
+		posts.map( ( post ) => {
+			return deleteEntityRecord(
+				'postType',
+				post.type,
+				post.id,
+				{ force: true },
+				{ throwOnError: true }
+			);
+		} )
+	);
+	// If all the promises were fulfilled with success.
+	if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+		let successMessage;
+		if ( allSettledResults.length === 1 ) {
+			successMessage = notice.success.messages.getMessage( posts[ 0 ] );
+		} else {
+			successMessage = notice.success.messages.getBatchMessage( posts );
+		}
+		createSuccessNotice( successMessage, {
+			type: notice.success.type ?? 'snackbar',
+			id: notice.success.id,
+		} );
+		callbacks.onActionPerformed?.( posts );
+	} else {
+		const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+		let errorMessage = '';
+		if ( allSettledResults.length === 1 ) {
+			errorMessage = notice.error.messages.getMessage( errorMessages );
+		} else {
+			errorMessage =
+				notice.error.messages.getBatchMessage( errorMessages );
+		}
+
+		createErrorNotice( errorMessage, {
+			type: notice.error.type ?? 'snackbar',
+			id: notice.error.id,
+		} );
+		callbacks.onActionError?.();
+	}
+};
+
+export const editPostWithNotices = async < T extends Post >(
+	postsWithUpdates: {
+		originalPost: T;
+		changes: Partial< T >;
+	}[],
+	notice: NoticeSettings< T >,
+	callbacks: {
+		onActionPerformed?: ( posts: T[] ) => void;
+		onActionError?: () => void;
+	}
+) => {
+	const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+	const { editEntityRecord, saveEditedEntityRecord } = dispatch( coreStore );
+	await Promise.allSettled(
+		postsWithUpdates.map( ( post ) => {
+			return editEntityRecord(
+				'postType',
+				post.originalPost.type,
+				post.originalPost.id,
+				{
+					...post.changes,
+				}
+			);
+		} )
+	);
+	const allSettledResults = await Promise.allSettled(
+		postsWithUpdates.map( ( post ) => {
+			return saveEditedEntityRecord(
+				'postType',
+				post.originalPost.type,
+				post.originalPost.id,
+				{
+					throwOnError: true,
+				}
+			);
+		} )
+	);
+	// If all the promises were fulfilled with success.
+	if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+		let successMessage;
+		if ( allSettledResults.length === 1 ) {
+			successMessage = notice.success.messages.getMessage(
+				postsWithUpdates[ 0 ].originalPost
+			);
+		} else {
+			successMessage = notice.success.messages.getBatchMessage(
+				postsWithUpdates.map( ( post ) => post.originalPost )
+			);
+		}
+		createSuccessNotice( successMessage, {
+			type: notice.success.type ?? 'snackbar',
+			id: notice.success.id,
+		} );
+		callbacks.onActionPerformed?.(
+			postsWithUpdates.map( ( post ) => post.originalPost )
+		);
+	} else {
+		const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+		let errorMessage = '';
+		if ( allSettledResults.length === 1 ) {
+			errorMessage = notice.error.messages.getMessage( errorMessages );
+		} else {
+			errorMessage =
+				notice.error.messages.getBatchMessage( errorMessages );
+		}
+
+		createErrorNotice( errorMessage, {
+			type: notice.error.type ?? 'snackbar',
+			id: notice.error.id,
+		} );
+		callbacks.onActionError?.();
+	}
+};
diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss
new file mode 100644
index 00000000000000..d9a571270fbb68
--- /dev/null
+++ b/packages/fields/src/style.scss
@@ -0,0 +1,7 @@
+@import "./components/create-template-part-modal/style.scss";
+@import "./fields/slug/style.scss";
+@import "./fields/featured-image/style.scss";
+@import "./fields/template/style.scss";
+@import "./fields/title/style.scss";
+@import "./fields/page-title/style.scss";
+@import "./fields/pattern-title/style.scss";
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
new file mode 100644
index 00000000000000..1b251d125b1be8
--- /dev/null
+++ b/packages/fields/src/types.ts
@@ -0,0 +1,107 @@
+type PostStatus =
+	| 'publish'
+	| 'draft'
+	| 'pending'
+	| 'private'
+	| 'future'
+	| 'auto-draft'
+	| 'trash';
+
+export interface CommonPost {
+	status?: PostStatus;
+	title: string | { rendered: string } | { raw: string };
+	content: string | { raw: string; rendered: string };
+	type: string;
+	id: string | number;
+	blocks?: Object[];
+	_links?: Links;
+}
+
+interface Links {
+	'predecessor-version'?: { href: string; id: number }[];
+	'version-history'?: { href: string; count: number }[];
+	[ key: string ]: { href: string }[] | undefined;
+}
+
+interface Author {
+	name: string;
+	avatar_urls: Record< string, string >;
+}
+
+interface EmbeddedAuthor {
+	author: Author[];
+}
+
+export interface BasePost extends CommonPost {
+	comment_status?: 'open' | 'closed';
+	excerpt?: string | { raw: string; rendered: string };
+	meta?: Record< string, any >;
+	parent?: number;
+	password?: string;
+	template?: string;
+	format?: string;
+	featured_media?: number;
+	menu_order?: number;
+	ping_status?: 'open' | 'closed';
+	link?: string;
+	slug?: string;
+	permalink_template?: string;
+	date?: string;
+	modified?: string;
+	author?: number;
+}
+
+export interface BasePostWithEmbeddedAuthor extends BasePost {
+	_embedded: EmbeddedAuthor;
+}
+
+export interface Template extends CommonPost {
+	type: 'wp_template';
+	is_custom: boolean;
+	source: string;
+	origin: string;
+	plugin?: string;
+	has_theme_file: boolean;
+	id: string;
+}
+
+export interface TemplatePart extends CommonPost {
+	type: 'wp_template_part';
+	source: string;
+	origin: string;
+	has_theme_file: boolean;
+	id: string;
+	area: string;
+	plugin?: string;
+}
+
+export interface Pattern extends CommonPost {
+	slug: string;
+	title: { raw: string };
+	wp_pattern_sync_status: string;
+}
+
+export type Post = Template | TemplatePart | Pattern | BasePost;
+
+export type PostWithPermissions = Post & {
+	permissions: {
+		delete: boolean;
+		update: boolean;
+	};
+};
+
+export interface PostType {
+	slug: string;
+	viewable: boolean;
+	supports?: {
+		'page-attributes'?: boolean;
+		title?: boolean;
+		revisions?: boolean;
+		author?: string;
+		thumbnail?: string;
+		comments?: string;
+	};
+}
+
+// Will be unnecessary after typescript 5.0 upgrade.
+export type CoreDataError = { message?: string; code?: string };
diff --git a/packages/fields/tsconfig.json b/packages/fields/tsconfig.json
new file mode 100644
index 00000000000000..46ac86d48e11ee
--- /dev/null
+++ b/packages/fields/tsconfig.json
@@ -0,0 +1,34 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../core-data" },
+		{ "path": "../block-editor" },
+		{ "path": "../data" },
+		{ "path": "../dataviews" },
+		{ "path": "../date" },
+		{ "path": "../element" },
+		{ "path": "../hooks" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../media-utils" },
+		{ "path": "../notices" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
+		{ "path": "../router" },
+		{ "path": "../url" },
+		{ "path": "../block-editor" },
+		{ "path": "../warning" }
+	],
+	"include": [ "src" ]
+}
diff --git a/packages/format-library/.npmrc b/packages/format-library/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/format-library/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index 4de7576cb343b3..99c174ca029c62 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -42,7 +150,7 @@
 
 ## 3.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/dom` and `@wordpress/keycodes` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,7 +158,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -89,7 +197,7 @@
 
 ## 1.2.3 (2018-11-20)
 
-### Bug fixes
+### Bug Fixes
 
 -   Link URL validation now works correctly when a URL includes a fragment. Previously any URL containing a fragment failed validation.
 -   Link URL validation catches an incorrect number of forward slashes following a url using the http protocol.
@@ -100,7 +208,7 @@
 
 ## 1.2.0 (2018-11-12)
 
-## New Feature
+### New Features
 
 -   Add URL validation to links.
 
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index ae31ae3576e3de..94efb550519ddc 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,28 +19,31 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/element": "file:../element",
-		"@wordpress/html-entities": "file:../html-entities",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/rich-text": "file:../rich-text",
-		"@wordpress/url": "file:../url"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/rich-text": "*",
+		"@wordpress/url": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/format-library/src/code/index.js b/packages/format-library/src/code/index.js
index f3651504d57ce8..27a99ebc989e21 100644
--- a/packages/format-library/src/code/index.js
+++ b/packages/format-library/src/code/index.js
@@ -20,16 +20,18 @@ export const code = {
 	__unstableInputRule( value ) {
 		const BACKTICK = '`';
 		const { start, text } = value;
-		const characterBefore = text.slice( start - 1, start );
+		const characterBefore = text[ start - 1 ];
 
 		// Quick check the text for the necessary character.
 		if ( characterBefore !== BACKTICK ) {
 			return value;
 		}
 
-		const textBefore = text.slice( 0, start - 1 );
-		const indexBefore = textBefore.lastIndexOf( BACKTICK );
+		if ( start - 2 < 0 ) {
+			return value;
+		}
 
+		const indexBefore = text.lastIndexOf( BACKTICK, start - 2 );
 		if ( indexBefore === -1 ) {
 			return value;
 		}
diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js
index 412ae23f4b686d..3ccfc92cb40c18 100644
--- a/packages/format-library/src/default-formats.js
+++ b/packages/format-library/src/default-formats.js
@@ -12,6 +12,9 @@ import { textColor } from './text-color';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
+import { unknown } from './unknown';
+import { language } from './language';
+import { nonBreakingSpace } from './non-breaking-space';
 
 export default [
 	bold,
@@ -25,4 +28,7 @@ export default [
 	subscript,
 	superscript,
 	keyboard,
+	unknown,
+	language,
+	nonBreakingSpace,
 ];
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index cbf1884cba1af9..7f8e33550770d0 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -1,7 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG, TextControl, Popover, Button } from '@wordpress/components';
+import {
+	Path,
+	SVG,
+	Popover,
+	Button,
+	ExternalLink,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNumberControl as NumberControl,
+	TextareaControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { insertObject, useAnchor } from '@wordpress/rich-text';
@@ -10,7 +20,6 @@ import {
 	RichTextToolbarButton,
 	MediaUploadCheck,
 } from '@wordpress/block-editor';
-import { keyboardReturn } from '@wordpress/icons';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -34,11 +43,13 @@ export const image = {
 };
 
 function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
-	const { style } = activeObjectAttributes;
-	const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
+	const { style, alt } = activeObjectAttributes;
+	const width = style?.replace( /\D/g, '' );
+	const [ editedWidth, setEditedWidth ] = useState( width );
+	const [ editedAlt, setEditedAlt ] = useState( alt );
+	const hasChanged = editedWidth !== width || editedAlt !== alt;
 	const popoverAnchor = useAnchor( {
 		editableContentElement: contentRef.current,
-		value,
 		settings: image,
 	} );
 
@@ -58,7 +69,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 						type: name,
 						attributes: {
 							...activeObjectAttributes,
-							style: width ? `width: ${ width }px;` : '',
+							style: width ? `width: ${ editedWidth }px;` : '',
+							alt: editedAlt,
 						},
 					};
 
@@ -70,19 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 					event.preventDefault();
 				} }
 			>
-				<TextControl
-					className="block-editor-format-toolbar__image-container-value"
-					type="number"
-					label={ __( 'Width' ) }
-					value={ width }
-					min={ 1 }
-					onChange={ ( newWidth ) => setWidth( newWidth ) }
-				/>
-				<Button
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
+				<VStack spacing={ 4 }>
+					<NumberControl
+						__next40pxDefaultSize
+						label={ __( 'Width' ) }
+						value={ editedWidth }
+						min={ 1 }
+						onChange={ ( newWidth ) => {
+							setEditedWidth( newWidth );
+						} }
+					/>
+					<TextareaControl
+						label={ __( 'Alternative text' ) }
+						__nextHasNoMarginBottom
+						value={ editedAlt }
+						onChange={ ( newAlt ) => {
+							setEditedAlt( newAlt );
+						} }
+						help={
+							<>
+								<ExternalLink
+									href={
+										// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+										__(
+											'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+										)
+									}
+								>
+									{ __(
+										'Describe the purpose of the image.'
+									) }
+								</ExternalLink>
+								<br />
+								{ __( 'Leave empty if decorative.' ) }
+							</>
+						}
+					/>
+					<HStack justify="right">
+						<Button
+							disabled={ ! hasChanged }
+							accessibleWhenDisabled
+							variant="primary"
+							type="submit"
+							size="compact"
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			</form>
 		</Popover>
 	);
@@ -96,56 +143,43 @@ function Edit( {
 	activeObjectAttributes,
 	contentRef,
 } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	function openModal() {
-		setIsModalOpen( true );
-	}
-
-	function closeModal() {
-		setIsModalOpen( false );
-	}
-
 	return (
 		<MediaUploadCheck>
-			<RichTextToolbarButton
-				icon={
-					<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
-					</SVG>
-				}
-				title={ title }
-				onClick={ openModal }
-				isActive={ isObjectActive }
+			<MediaUpload
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				onSelect={ ( { id, url, alt, width: imgWidth } ) => {
+					onChange(
+						insertObject( value, {
+							type: name,
+							attributes: {
+								className: `wp-image-${ id }`,
+								style: `width: ${ Math.min(
+									imgWidth,
+									150
+								) }px;`,
+								url,
+								alt,
+							},
+						} )
+					);
+					onFocus();
+				} }
+				render={ ( { open } ) => (
+					<RichTextToolbarButton
+						icon={
+							<SVG
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+							>
+								<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
+							</SVG>
+						}
+						title={ title }
+						onClick={ open }
+						isActive={ isObjectActive }
+					/>
+				) }
 			/>
-			{ isModalOpen && (
-				<MediaUpload
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onSelect={ ( { id, url, alt, width: imgWidth } ) => {
-						closeModal();
-						onChange(
-							insertObject( value, {
-								type: name,
-								attributes: {
-									className: `wp-image-${ id }`,
-									style: `width: ${ Math.min(
-										imgWidth,
-										150
-									) }px;`,
-									url,
-									alt,
-								},
-							} )
-						);
-						onFocus();
-					} }
-					onClose={ closeModal }
-					render={ ( { open } ) => {
-						open();
-						return null;
-					} }
-				/>
-			) }
 			{ isObjectActive && (
 				<InlineUI
 					value={ value }
diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss
index 7b7b4f7810987d..1e0b922fdf4c8f 100644
--- a/packages/format-library/src/image/style.scss
+++ b/packages/format-library/src/image/style.scss
@@ -1,34 +1,8 @@
 .block-editor-format-toolbar__image-popover {
 	z-index: z-index(".block-editor-format-toolbar__image-popover");
-}
-
-.block-editor-format-toolbar__image-container-content {
-	display: flex;
-
-	.components-button {
-		align-self: flex-end;
-		height: $grid-unit-10 * 4 - ($border-width * 2);
-		margin-bottom: $grid-unit-10;
-		margin-right: $grid-unit-10;
-		padding: 0 6px;
-	}
-}
-
-.block-editor-format-toolbar__image-container-value {
-	margin: $grid-unit-10 - $border-width;
-	flex-grow: 1;
-	flex-shrink: 1;
-	white-space: nowrap;
-	min-width: 150px;
-	max-width: 500px;
-
-	&.components-base-control {
-		.components-base-control__field {
-			margin-bottom: 0;
-		}
 
-		.components-base-control__label {
-			display: block;
-		}
+	.block-editor-format-toolbar__image-container-content {
+		width: 260px;
+		padding: $grid-unit-20;
 	}
 }
diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
new file mode 100644
index 00000000000000..6cfb8c4ad44927
--- /dev/null
+++ b/packages/format-library/src/language/index.js
@@ -0,0 +1,138 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WordPress dependencies
+ */
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import {
+	TextControl,
+	SelectControl,
+	Button,
+	Popover,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
+import { language as languageIcon } from '@wordpress/icons';
+
+const name = 'core/language';
+const title = __( 'Language' );
+
+export const language = {
+	name,
+	tagName: 'bdo',
+	className: null,
+	edit: Edit,
+	title,
+};
+
+function Edit( { isActive, value, onChange, contentRef } ) {
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+	const togglePopover = () => {
+		setIsPopoverVisible( ( state ) => ! state );
+	};
+
+	return (
+		<>
+			<RichTextToolbarButton
+				icon={ languageIcon }
+				label={ title }
+				title={ title }
+				onClick={ () => {
+					if ( isActive ) {
+						onChange( removeFormat( value, name ) );
+					} else {
+						togglePopover();
+					}
+				} }
+				isActive={ isActive }
+				role="menuitemcheckbox"
+			/>
+			{ isPopoverVisible && (
+				<InlineLanguageUI
+					value={ value }
+					onChange={ onChange }
+					onClose={ togglePopover }
+					contentRef={ contentRef }
+				/>
+			) }
+		</>
+	);
+}
+
+function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: language,
+	} );
+
+	const [ lang, setLang ] = useState( '' );
+	const [ dir, setDir ] = useState( 'ltr' );
+
+	return (
+		<Popover
+			className="block-editor-format-toolbar__language-popover"
+			anchor={ popoverAnchor }
+			onClose={ onClose }
+		>
+			<VStack
+				as="form"
+				spacing={ 4 }
+				className="block-editor-format-toolbar__language-container-content"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onChange(
+						applyFormat( value, {
+							type: name,
+							attributes: {
+								lang,
+								dir,
+							},
+						} )
+					);
+					onClose();
+				} }
+			>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ title }
+					value={ lang }
+					onChange={ ( val ) => setLang( val ) }
+					help={ __(
+						'A valid language attribute, like "en" or "fr".'
+					) }
+				/>
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Text direction' ) }
+					value={ dir }
+					options={ [
+						{
+							label: __( 'Left to right' ),
+							value: 'ltr',
+						},
+						{
+							label: __( 'Right to left' ),
+							value: 'rtl',
+						},
+					] }
+					onChange={ ( val ) => setDir( val ) }
+				/>
+				<HStack alignment="right">
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						text={ __( 'Apply' ) }
+					/>
+				</HStack>
+			</VStack>
+		</Popover>
+	);
+}
diff --git a/packages/format-library/src/language/style.scss b/packages/format-library/src/language/style.scss
new file mode 100644
index 00000000000000..17a77e1090799b
--- /dev/null
+++ b/packages/format-library/src/language/style.scss
@@ -0,0 +1,6 @@
+.block-editor-format-toolbar__language-popover {
+	.components-popover__content {
+		width: auto;
+		padding: 1rem;
+	}
+}
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
index 40f1322fcf1c4e..508ed4655a6695 100644
--- a/packages/format-library/src/link/index.js
+++ b/packages/format-library/src/link/index.js
@@ -2,21 +2,23 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useLayoutEffect, useEffect } from '@wordpress/element';
 import {
 	getTextContent,
 	applyFormat,
 	removeFormat,
 	slice,
 	isCollapsed,
+	insert,
+	create,
 } from '@wordpress/rich-text';
-import { isURL, isEmail } from '@wordpress/url';
+import { isURL, isEmail, isPhoneNumber } from '@wordpress/url';
 import {
 	RichTextToolbarButton,
 	RichTextShortcut,
 } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { link as linkIcon, linkOff } from '@wordpress/icons';
+import { link as linkIcon } from '@wordpress/icons';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -38,31 +40,124 @@ function Edit( {
 } ) {
 	const [ addingLink, setAddingLink ] = useState( false );
 
-	function addLink() {
+	// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
+	const [ openedBy, setOpenedBy ] = useState( null );
+
+	useEffect( () => {
+		// When the link becomes inactive (i.e. isActive is false), reset the editingLink state
+		// and the creatingLink state. This means that if the Link UI is displayed and the link
+		// becomes inactive (e.g. used arrow keys to move cursor outside of link bounds), the UI will close.
+		if ( ! isActive ) {
+			setAddingLink( false );
+		}
+	}, [ isActive ] );
+
+	useLayoutEffect( () => {
+		const editableContentElement = contentRef.current;
+		if ( ! editableContentElement ) {
+			return;
+		}
+
+		function handleClick( event ) {
+			// There is a situation whereby there is an existing link in the rich text
+			// and the user clicks on the leftmost edge of that link and fails to activate
+			// the link format, but the click event still fires on the `<a>` element.
+			// This causes the `editingLink` state to be set to `true` and the link UI
+			// to be rendered in "creating" mode. We need to check isActive to see if
+			// we have an active link format.
+			const link = event.target.closest( '[contenteditable] a' );
+			if (
+				! link || // other formats (e.g. bold) may be nested within the link.
+				! isActive
+			) {
+				return;
+			}
+
+			setAddingLink( true );
+			setOpenedBy( {
+				el: link,
+				action: 'click',
+			} );
+		}
+
+		editableContentElement.addEventListener( 'click', handleClick );
+
+		return () => {
+			editableContentElement.removeEventListener( 'click', handleClick );
+		};
+	}, [ contentRef, isActive ] );
+
+	function addLink( target ) {
 		const text = getTextContent( slice( value ) );
 
-		if ( text && isURL( text ) && isValidHref( text ) ) {
+		if ( ! isActive && text && isURL( text ) && isValidHref( text ) ) {
 			onChange(
 				applyFormat( value, {
 					type: name,
 					attributes: { url: text },
 				} )
 			);
-		} else if ( text && isEmail( text ) ) {
+		} else if ( ! isActive && text && isEmail( text ) ) {
 			onChange(
 				applyFormat( value, {
 					type: name,
 					attributes: { url: `mailto:${ text }` },
 				} )
 			);
+		} else if ( ! isActive && text && isPhoneNumber( text ) ) {
+			onChange(
+				applyFormat( value, {
+					type: name,
+					attributes: { url: `tel:${ text.replace( /\D/g, '' ) }` },
+				} )
+			);
 		} else {
+			if ( target ) {
+				setOpenedBy( {
+					el: target,
+					action: null, // We don't need to distinguish between click or keyboard here
+				} );
+			}
 			setAddingLink( true );
 		}
 	}
 
+	/**
+	 * Runs when the popover is closed via escape keypress, unlinking the selected text,
+	 * but _not_ on a click outside the popover. onFocusOutside handles that.
+	 */
 	function stopAddingLink() {
+		// Don't let the click handler on the toolbar button trigger again.
+
+		// There are two places for us to return focus to on Escape keypress:
+		// 1. The rich text field.
+		// 2. The toolbar button.
+
+		// The toolbar button is the only one we need to handle returning focus to.
+		// Otherwise, we rely on the passed in onFocus to return focus to the rich text field.
+
+		// Close the popover
+		setAddingLink( false );
+
+		// Return focus to the toolbar button or the rich text field
+		if ( openedBy?.el?.tagName === 'BUTTON' ) {
+			openedBy.el.focus();
+		} else {
+			onFocus();
+		}
+		// Remove the openedBy state
+		setOpenedBy( null );
+	}
+
+	// Test for this:
+	// 1. Click on the link button
+	// 2. Click the Options button in the top right of header
+	// 3. Focus should be in the dropdown of the Options button
+	// 4. Press Escape
+	// 5. Focus should be on the Options button
+	function onFocusOutside() {
 		setAddingLink( false );
-		onFocus();
+		setOpenedBy( null );
 	}
 
 	function onRemoveFormat() {
@@ -70,45 +165,50 @@ function Edit( {
 		speak( __( 'Link removed.' ), 'assertive' );
 	}
 
+	// Only autofocus if we have clicked a link within the editor
+	const shouldAutoFocus = ! (
+		openedBy?.el?.tagName === 'A' && openedBy?.action === 'click'
+	);
+
+	const hasSelection = ! isCollapsed( value );
+
 	return (
 		<>
-			<RichTextShortcut type="primary" character="k" onUse={ addLink } />
+			{ hasSelection && (
+				<RichTextShortcut
+					type="primary"
+					character="k"
+					onUse={ addLink }
+				/>
+			) }
 			<RichTextShortcut
 				type="primaryShift"
 				character="k"
 				onUse={ onRemoveFormat }
 			/>
-			{ isActive && (
-				<RichTextToolbarButton
-					name="link"
-					icon={ linkOff }
-					title={ __( 'Unlink' ) }
-					onClick={ onRemoveFormat }
-					isActive={ isActive }
-					shortcutType="primaryShift"
-					shortcutCharacter="k"
-				/>
-			) }
-			{ ! isActive && (
-				<RichTextToolbarButton
-					name="link"
-					icon={ linkIcon }
-					title={ title }
-					onClick={ addLink }
-					isActive={ isActive }
-					shortcutType="primary"
-					shortcutCharacter="k"
-				/>
-			) }
-			{ ( addingLink || isActive ) && (
+			<RichTextToolbarButton
+				name="link"
+				icon={ linkIcon }
+				title={ isActive ? __( 'Link' ) : title }
+				onClick={ ( event ) => {
+					addLink( event.currentTarget );
+				} }
+				isActive={ isActive || addingLink }
+				shortcutType="primary"
+				shortcutCharacter="k"
+				aria-haspopup="true"
+				aria-expanded={ addingLink }
+			/>
+			{ addingLink && (
 				<InlineLinkUI
-					addingLink={ addingLink }
 					stopAddingLink={ stopAddingLink }
+					onFocusOutside={ onFocusOutside }
 					isActive={ isActive }
 					activeAttributes={ activeAttributes }
 					value={ value }
 					onChange={ onChange }
 					contentRef={ contentRef }
+					focusOnMount={ shouldAutoFocus ? 'firstElement' : false }
 				/>
 			) }
 		</>
@@ -124,31 +224,44 @@ export const link = {
 		url: 'href',
 		type: 'data-type',
 		id: 'data-id',
+		_id: 'id',
 		target: 'target',
+		rel: 'rel',
 	},
 	__unstablePasteRule( value, { html, plainText } ) {
-		if ( isCollapsed( value ) ) {
-			return value;
-		}
-
 		const pastedText = ( html || plainText )
 			.replace( /<[^>]+>/g, '' )
 			.trim();
 
 		// A URL was pasted, turn the selection into a link.
-		if ( ! isURL( pastedText ) ) {
+		// For the link pasting feature, allow only http(s) protocols.
+		if ( ! isURL( pastedText ) || ! /^https?:/.test( pastedText ) ) {
 			return value;
 		}
 
 		// Allows us to ask for this information when we get a report.
 		window.console.log( 'Created link:\n\n', pastedText );
 
-		return applyFormat( value, {
+		const format = {
 			type: name,
 			attributes: {
 				url: decodeEntities( pastedText ),
 			},
-		} );
+		};
+
+		if ( isCollapsed( value ) ) {
+			return insert(
+				value,
+				applyFormat(
+					create( { text: plainText } ),
+					format,
+					0,
+					plainText.length
+				)
+			);
+		}
+
+		return applyFormat( value, format );
 	},
 	edit: Edit,
 };
diff --git a/packages/format-library/src/link/index.native.js b/packages/format-library/src/link/index.native.js
index 2588937f2d828c..3a39485bce120a 100644
--- a/packages/format-library/src/link/index.native.js
+++ b/packages/format-library/src/link/index.native.js
@@ -37,6 +37,7 @@ export const link = {
 	attributes: {
 		url: 'href',
 		target: 'target',
+		rel: 'rel',
 	},
 	edit: withSpokenMessages(
 		class LinkEdit extends Component {
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index bbdacd56093f93..3d2ee57567dc13 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -1,76 +1,93 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef, createInterpolateElement } from '@wordpress/element';
+import { useMemo, createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { withSpokenMessages, Popover } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
+import { Popover } from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
 import {
 	create,
 	insert,
 	isCollapsed,
 	applyFormat,
-	useAnchor,
 	removeFormat,
 	slice,
 	replace,
+	split,
+	concat,
+	useAnchor,
 } from '@wordpress/rich-text';
 import {
 	__experimentalLinkControl as LinkControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
-import useLinkInstanceKey from './use-link-instance-key';
+
+const LINK_SETTINGS = [
+	...LinkControl.DEFAULT_LINK_SETTINGS,
+	{
+		id: 'nofollow',
+		title: __( 'Mark as nofollow' ),
+	},
+];
 
 function InlineLinkUI( {
 	isActive,
 	activeAttributes,
-	addingLink,
 	value,
 	onChange,
-	speak,
+	onFocusOutside,
 	stopAddingLink,
 	contentRef,
+	focusOnMount,
 } ) {
 	const richLinkTextValue = getRichTextValueFromSelection( value, isActive );
 
 	// Get the text content minus any HTML tags.
 	const richTextText = richLinkTextValue.text;
 
-	/**
-	 * Pending settings to be applied to the next link. When inserting a new
-	 * link, toggle values cannot be applied immediately, because there is not
-	 * yet a link for them to apply to. Thus, they are maintained in a state
-	 * value until the time that the link can be inserted or edited.
-	 *
-	 * @type {[Object|undefined,Function]}
-	 */
-	const [ nextLinkValue, setNextLinkValue ] = useState();
-
-	const { createPageEntity, userCanCreatePages } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const _settings = getSettings();
-
-		return {
-			createPageEntity: _settings.__experimentalCreatePageEntity,
-			userCanCreatePages: _settings.__experimentalUserCanCreatePages,
-		};
-	}, [] );
+	const { selectionChange } = useDispatch( blockEditorStore );
+
+	const { createPageEntity, userCanCreatePages, selectionStart } = useSelect(
+		( select ) => {
+			const { getSettings, getSelectionStart } =
+				select( blockEditorStore );
+			const _settings = getSettings();
+
+			return {
+				createPageEntity: _settings.__experimentalCreatePageEntity,
+				userCanCreatePages: _settings.__experimentalUserCanCreatePages,
+				selectionStart: getSelectionStart(),
+			};
+		},
+		[]
+	);
 
-	const linkValue = {
-		url: activeAttributes.url,
-		type: activeAttributes.type,
-		id: activeAttributes.id,
-		opensInNewTab: activeAttributes.target === '_blank',
-		title: richTextText,
-		...nextLinkValue,
-	};
+	const linkValue = useMemo(
+		() => ( {
+			url: activeAttributes.url,
+			type: activeAttributes.type,
+			id: activeAttributes.id,
+			opensInNewTab: activeAttributes.target === '_blank',
+			nofollow: activeAttributes.rel?.includes( 'nofollow' ),
+			title: richTextText,
+		} ),
+		[
+			activeAttributes.id,
+			activeAttributes.rel,
+			activeAttributes.target,
+			activeAttributes.type,
+			activeAttributes.url,
+			richTextText,
+		]
+	);
 
 	function removeLink() {
 		const newValue = removeFormat( value, 'core/link' );
@@ -80,33 +97,15 @@ function InlineLinkUI( {
 	}
 
 	function onChangeLink( nextValue ) {
-		// Merge with values from state, both for the purpose of assigning the
-		// next state value, and for use in constructing the new link format if
-		// the link is ready to be applied.
+		const hasLink = linkValue?.url;
+		const isNewLink = ! hasLink;
+
+		// Merge the next value with the current link value.
 		nextValue = {
-			...nextLinkValue,
+			...linkValue,
 			...nextValue,
 		};
 
-		// LinkControl calls `onChange` immediately upon the toggling a setting.
-		const didToggleSetting =
-			linkValue.opensInNewTab !== nextValue.opensInNewTab &&
-			linkValue.url === nextValue.url;
-
-		// If change handler was called as a result of a settings change during
-		// link insertion, it must be held in state until the link is ready to
-		// be applied.
-		const didToggleSettingForNewLink =
-			didToggleSetting && nextValue.url === undefined;
-
-		// If link will be assigned, the state value can be considered flushed.
-		// Otherwise, persist the pending changes.
-		setNextLinkValue( didToggleSettingForNewLink ? nextValue : undefined );
-
-		if ( didToggleSettingForNewLink ) {
-			return;
-		}
-
 		const newUrl = prependHTTP( nextValue.url );
 		const linkFormat = createLinkFormat( {
 			url: newUrl,
@@ -116,56 +115,89 @@ function InlineLinkUI( {
 					? String( nextValue.id )
 					: undefined,
 			opensInNewWindow: nextValue.opensInNewTab,
+			nofollow: nextValue.nofollow,
 		} );
 
 		const newText = nextValue.title || newUrl;
+
+		// Scenario: we have any active text selection or an active format.
+		let newValue;
 		if ( isCollapsed( value ) && ! isActive ) {
 			// Scenario: we don't have any actively selected text or formats.
-			const toInsert = applyFormat(
-				create( { text: newText } ),
+			const inserted = insert( value, newText );
+
+			newValue = applyFormat(
+				inserted,
 				linkFormat,
-				0,
-				newText.length
+				value.start,
+				value.start + newText.length
 			);
-			onChange( insert( value, toInsert ) );
-		} else {
-			// Scenario: we have any active text selection or an active format.
-			let newValue;
-
-			if ( newText === richTextText ) {
-				// If we're not updating the text then ignore.
-				newValue = applyFormat( value, linkFormat );
-			} else {
-				// Create new RichText value for the new text in order that we
-				// can apply formats to it.
-				newValue = create( { text: newText } );
-
-				// Apply the new Link format to this new text value.
-				newValue = applyFormat(
-					newValue,
-					linkFormat,
-					0,
-					newText.length
-				);
-
-				// Update the original (full) RichTextValue replacing the
-				// target text with the *new* RichTextValue containing:
-				// 1. The new text content.
-				// 2. The new link format.
-				// Note original formats will be lost when applying this change.
-				// That is expected behaviour.
-				// See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
-				newValue = replace( value, richTextText, newValue );
-			}
-
-			newValue.start = newValue.end;
-			newValue.activeFormats = [];
+
 			onChange( newValue );
+
+			// Close the Link UI.
+			stopAddingLink();
+
+			// Move the selection to the end of the inserted link outside of the format boundary
+			// so the user can continue typing after the link.
+			selectionChange( {
+				clientId: selectionStart.clientId,
+				identifier: selectionStart.attributeKey,
+				start: value.start + newText.length + 1,
+			} );
+
+			return;
+		} else if ( newText === richTextText ) {
+			newValue = applyFormat( value, linkFormat );
+		} else {
+			// Scenario: Editing an existing link.
+
+			// Create new RichText value for the new text in order that we
+			// can apply formats to it.
+			newValue = create( { text: newText } );
+			// Apply the new Link format to this new text value.
+			newValue = applyFormat( newValue, linkFormat, 0, newText.length );
+
+			// Get the boundaries of the active link format.
+			const boundary = getFormatBoundary( value, {
+				type: 'core/link',
+			} );
+
+			// Split the value at the start of the active link format.
+			// Passing "start" as the 3rd parameter is required to ensure
+			// the second half of the split value is split at the format's
+			// start boundary and avoids relying on the value's "end" property
+			// which may not correspond correctly.
+			const [ valBefore, valAfter ] = split(
+				value,
+				boundary.start,
+				boundary.start
+			);
+
+			// Update the original (full) RichTextValue replacing the
+			// target text with the *new* RichTextValue containing:
+			// 1. The new text content.
+			// 2. The new link format.
+			// As "replace" will operate on the first match only, it is
+			// run only against the second half of the value which was
+			// split at the active format's boundary. This avoids a bug
+			// with incorrectly targetted replacements.
+			// See: https://github.com/WordPress/gutenberg/issues/41771.
+			// Note original formats will be lost when applying this change.
+			// That is expected behaviour.
+			// See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
+			const newValAfter = replace( valAfter, richTextText, newValue );
+
+			newValue = concat( valBefore, newValAfter );
 		}
 
-		// Focus should only be shifted back to the formatted segment when the
-		// URL is submitted.
-		if ( ! didToggleSetting ) {
+		onChange( newValue );
+
+		// Focus should only be returned to the rich text on submit if this link is not
+		// being created for the first time. If it is then focus should remain within the
+		// Link UI because it should remain open for the user to modify the link they have
+		// just created.
+		if ( ! isNewLink ) {
 			stopAddingLink();
 		}
 
@@ -185,20 +217,12 @@ function InlineLinkUI( {
 
 	const popoverAnchor = useAnchor( {
 		editableContentElement: contentRef.current,
-		value,
-		settings,
+		settings: {
+			...settings,
+			isActive,
+		},
 	} );
 
-	// Generate a string based key that is unique to this anchor reference.
-	// This is used to force re-mount the LinkControl component to avoid
-	// potential stale state bugs caused by the component not being remounted
-	// See https://github.com/WordPress/gutenberg/pull/34742.
-	const forceRemountKey = useLinkInstanceKey( popoverAnchor );
-
-	// The focusOnMount prop shouldn't evolve during render of a Popover
-	// otherwise it causes a render of the content.
-	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
-
 	async function handleCreate( pageTitle ) {
 		const page = await createPageEntity( {
 			title: pageTitle,
@@ -218,7 +242,7 @@ function InlineLinkUI( {
 		return createInterpolateElement(
 			sprintf(
 				/* translators: %s: search term. */
-				__( 'Create Page: <mark>%s</mark>' ),
+				__( 'Create page: <mark>%s</mark>' ),
 				searchTerm
 			),
 			{ mark: <mark /> }
@@ -228,22 +252,34 @@ function InlineLinkUI( {
 	return (
 		<Popover
 			anchor={ popoverAnchor }
-			focusOnMount={ focusOnMount.current }
+			animate={ false }
 			onClose={ stopAddingLink }
+			onFocusOutside={ onFocusOutside }
 			placement="bottom"
+			offset={ 8 }
 			shift
+			focusOnMount={ focusOnMount }
+			constrainTabbing
 		>
 			<LinkControl
-				key={ forceRemountKey }
 				value={ linkValue }
 				onChange={ onChangeLink }
 				onRemove={ removeLink }
-				forceIsEditingLink={ addingLink }
 				hasRichPreviews
 				createSuggestion={ createPageEntity && handleCreate }
 				withCreateSuggestion={ userCanCreatePages }
 				createSuggestionButtonText={ createButtonText }
 				hasTextControl
+				settings={ LINK_SETTINGS }
+				showInitialSuggestions
+				suggestionsQuery={ {
+					// always show Pages as initial suggestions
+					initialSuggestionsSearchOptions: {
+						type: 'post',
+						subtype: 'page',
+						perPage: 20,
+					},
+				} }
 			/>
 		</Popover>
 	);
@@ -273,4 +309,4 @@ function getRichTextValueFromSelection( value, isActive ) {
 	return slice( value, textStart, textEnd );
 }
 
-export default withSpokenMessages( InlineLinkUI );
+export default InlineLinkUI;
diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
index 3bb003643ac1e7..4e7f6ef30ace7b 100644
--- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
+++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
@@ -211,12 +211,12 @@ const LinkSettingsScreen = ( {
 							label={ __( 'Open in new tab' ) }
 							value={ opensInNewWindow }
 							onValueChange={ setOpensInNewWindows }
-							separatorType={ 'fullWidth' }
+							separatorType="fullWidth"
 						/>
 						<BottomSheet.Cell
 							label={ __( 'Remove link' ) }
 							labelStyle={ styles.clearLinkButton }
-							separatorType={ 'none' }
+							separatorType="none"
 							onPress={ removeLink }
 						/>
 					</>
diff --git a/packages/format-library/src/link/modal.native.js b/packages/format-library/src/link/modal.native.js
index 67de4197159549..a41c435df214b9 100644
--- a/packages/format-library/src/link/modal.native.js
+++ b/packages/format-library/src/link/modal.native.js
@@ -19,6 +19,7 @@ const ModalLinkUI = ( { isVisible, ...restProps } ) => {
 				hideHeader
 				onClose={ restProps.onClose }
 				hasNavigation
+				testID="link-settings-modal"
 			>
 				<BottomSheet.NavigationContainer animate main>
 					<BottomSheet.NavigationScreen name={ screens.settings }>
diff --git a/packages/format-library/src/link/style.scss b/packages/format-library/src/link/style.scss
index 05f8f5a40668e4..05eb576fe26e27 100644
--- a/packages/format-library/src/link/style.scss
+++ b/packages/format-library/src/link/style.scss
@@ -1,5 +1,6 @@
 .block-editor-format-toolbar__link-container-content {
 	display: flex;
+	align-items: center;
 }
 
 .block-editor-format-toolbar__link-container-value {
diff --git a/packages/format-library/src/link/test/__snapshots__/modal.native.js.snap b/packages/format-library/src/link/test/__snapshots__/modal.native.js.snap
new file mode 100644
index 00000000000000..91c3b43d85f754
--- /dev/null
+++ b/packages/format-library/src/link/test/__snapshots__/modal.native.js.snap
@@ -0,0 +1,553 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinksUI LinksUI renders 1`] = `
+<Modal
+  animationInTiming={400}
+  animationOutTiming={300}
+  backdropOpacity={0.2}
+  backdropTransitionInTiming={50}
+  backdropTransitionOutTiming={50}
+  hardwareAccelerated={true}
+  isVisible={true}
+  onAccessibilityEscape={[Function]}
+  onBackButtonPress={[Function]}
+  onBackdropPress={[Function]}
+  onModalHide={[Function]}
+  onMoveShouldSetResponder={[Function]}
+  onMoveShouldSetResponderCapture={[Function]}
+  onSwipeComplete={[Function]}
+  preferredColorScheme="light"
+  swipeDirection="down"
+  testID="link-settings-modal"
+  useNativeDriverForBackdrop={true}
+>
+  <View
+    behavior={false}
+    style={
+      {
+        "borderColor": "rgba(0, 0, 0, 0.1)",
+        "flex": undefined,
+        "marginTop": 0,
+        "maxWidth": 512,
+      }
+    }
+  >
+    <View
+      onLayout={[Function]}
+      testID="link-settings-modal-header"
+    >
+      <View />
+    </View>
+    <View
+      style={
+        {
+          "maxHeight": 787.06,
+        }
+      }
+    >
+      <View
+        animatedStyle={
+          {
+            "value": {
+              "height": 1,
+            },
+          }
+        }
+        collapsable={false}
+        style={
+          {
+            "height": 1,
+          }
+        }
+      >
+        <RNGestureHandlerRootView
+          style={
+            {
+              "flex": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "backgroundColor": undefined,
+                  "flex": 1,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  {
+                    "bottom": 0,
+                    "display": "flex",
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  style={
+                    {
+                      "opacity": 1,
+                    }
+                  }
+                />
+                <View
+                  accessibilityElementsHidden={false}
+                  closing={false}
+                  gestureVelocityImpact={0.3}
+                  importantForAccessibility="auto"
+                  onClose={[Function]}
+                  onGestureBegin={[Function]}
+                  onGestureCanceled={[Function]}
+                  onGestureEnd={[Function]}
+                  onOpen={[Function]}
+                  onTransition={[Function]}
+                  pointerEvents="box-none"
+                  style={
+                    [
+                      {
+                        "display": "flex",
+                        "overflow": undefined,
+                      },
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      },
+                    ]
+                  }
+                  transitionSpec={
+                    {
+                      "close": {
+                        "animation": "timing",
+                        "config": {
+                          "duration": 200,
+                          "easing": [Function],
+                        },
+                      },
+                      "open": {
+                        "animation": "timing",
+                        "config": {
+                          "duration": 200,
+                          "easing": [Function],
+                        },
+                      },
+                    }
+                  }
+                >
+                  <View
+                    pointerEvents="box-none"
+                    style={
+                      {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                  <View
+                    collapsable={false}
+                    pointerEvents="box-none"
+                    style={
+                      {
+                        "flex": 1,
+                      }
+                    }
+                  >
+                    <View
+                      collapsable={false}
+                      handlerTag={1}
+                      handlerType="PanGestureHandler"
+                      needsOffscreenAlphaCompositing={true}
+                      onGestureHandlerEvent={[Function]}
+                      onGestureHandlerStateChange={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                          "opacity": 1,
+                        }
+                      }
+                    >
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          [
+                            {
+                              "flex": 1,
+                              "overflow": "hidden",
+                            },
+                            [
+                              {
+                                "backgroundColor": undefined,
+                              },
+                              undefined,
+                            ],
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "flexDirection": "column-reverse",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <RCTScrollView
+                              automaticallyAdjustContentInsets={false}
+                              bounces={false}
+                              contentContainerStyle={
+                                [
+                                  {
+                                    "paddingLeft": 8,
+                                    "paddingRight": 8,
+                                  },
+                                  undefined,
+                                  {},
+                                  false,
+                                ]
+                              }
+                              disableScrollViewPanResponder={true}
+                              onScroll={[Function]}
+                              safeAreaBottomInset={0}
+                              scrollEnabled={true}
+                              scrollEventThrottle={16}
+                              style={
+                                {
+                                  "maxHeight": 787.06,
+                                }
+                              }
+                            >
+                              <View>
+                                <View
+                                  accessibilityValue={
+                                    {
+                                      "max": undefined,
+                                      "min": undefined,
+                                      "now": undefined,
+                                      "text": undefined,
+                                    }
+                                  }
+                                  accessible={false}
+                                  focusable={false}
+                                  onClick={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                >
+                                  <View
+                                    onLayout={[Function]}
+                                    testID="navigation-screen-linkSettings"
+                                  >
+                                    <View
+                                      accessibilityLabel="Link to, Search or type URL"
+                                      accessibilityRole="button"
+                                      accessibilityState={
+                                        {
+                                          "busy": undefined,
+                                          "checked": undefined,
+                                          "disabled": false,
+                                          "expanded": undefined,
+                                          "selected": undefined,
+                                        }
+                                      }
+                                      accessibilityValue={
+                                        {
+                                          "max": undefined,
+                                          "min": undefined,
+                                          "now": undefined,
+                                          "text": undefined,
+                                        }
+                                      }
+                                      accessible={true}
+                                      collapsable={false}
+                                      focusable={true}
+                                      onClick={[Function]}
+                                      onResponderGrant={[Function]}
+                                      onResponderMove={[Function]}
+                                      onResponderRelease={[Function]}
+                                      onResponderTerminate={[Function]}
+                                      onResponderTerminationRequest={[Function]}
+                                      onStartShouldSetResponder={[Function]}
+                                      style={
+                                        {
+                                          "opacity": 1,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        pointerEvents="auto"
+                                        style={
+                                          [
+                                            undefined,
+                                            {},
+                                          ]
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            [
+                                              undefined,
+                                              {},
+                                            ]
+                                          }
+                                        >
+                                          <View>
+                                            <View
+                                              style={
+                                                [
+                                                  undefined,
+                                                  undefined,
+                                                ]
+                                              }
+                                            >
+                                              <Svg
+                                                height={24}
+                                                lock={true}
+                                                style={{}}
+                                                viewBox="0 0 24 24"
+                                                width={24}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                Path
+                                              </Svg>
+                                              <View />
+                                            </View>
+                                            <Text
+                                              style={
+                                                [
+                                                  undefined,
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              Link to
+                                            </Text>
+                                          </View>
+                                        </View>
+                                        <Text
+                                          ellipsizeMode="middle"
+                                          numberOfLines={1}
+                                          style={
+                                            {
+                                              "color": "gray",
+                                            }
+                                          }
+                                        >
+                                          Search or type URL
+                                        </Text>
+                                        <View
+                                          pointerEvents="auto"
+                                          style={
+                                            [
+                                              false,
+                                              undefined,
+                                            ]
+                                          }
+                                        >
+                                          <Svg
+                                            height={24}
+                                            style={{}}
+                                            viewBox="0 0 24 24"
+                                            width={24}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            Path
+                                          </Svg>
+                                        </View>
+                                      </View>
+                                      <View
+                                        style={{}}
+                                      />
+                                    </View>
+                                    <View
+                                      accessibilityHint="Double tap to edit this value"
+                                      accessibilityLabel="Link text. Empty"
+                                      accessibilityRole="button"
+                                      accessibilityState={
+                                        {
+                                          "busy": undefined,
+                                          "checked": undefined,
+                                          "disabled": false,
+                                          "expanded": undefined,
+                                          "selected": undefined,
+                                        }
+                                      }
+                                      accessibilityValue={
+                                        {
+                                          "max": undefined,
+                                          "min": undefined,
+                                          "now": undefined,
+                                          "text": undefined,
+                                        }
+                                      }
+                                      accessible={true}
+                                      collapsable={false}
+                                      focusable={true}
+                                      onClick={[Function]}
+                                      onResponderGrant={[Function]}
+                                      onResponderMove={[Function]}
+                                      onResponderRelease={[Function]}
+                                      onResponderTerminate={[Function]}
+                                      onResponderTerminationRequest={[Function]}
+                                      onStartShouldSetResponder={[Function]}
+                                      style={
+                                        {
+                                          "opacity": 1,
+                                        }
+                                      }
+                                    >
+                                      <View
+                                        pointerEvents="auto"
+                                        style={
+                                          [
+                                            undefined,
+                                            {},
+                                          ]
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            [
+                                              undefined,
+                                              {},
+                                            ]
+                                          }
+                                        >
+                                          <View>
+                                            <View
+                                              style={
+                                                [
+                                                  undefined,
+                                                  undefined,
+                                                ]
+                                              }
+                                            >
+                                              <Svg
+                                                height={24}
+                                                lock={true}
+                                                style={{}}
+                                                viewBox="0 0 24 24"
+                                                width={24}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                Path
+                                              </Svg>
+                                              <View />
+                                            </View>
+                                            <Text
+                                              style={
+                                                [
+                                                  undefined,
+                                                  {},
+                                                ]
+                                              }
+                                            >
+                                              Link text
+                                            </Text>
+                                          </View>
+                                        </View>
+                                        <TextInput
+                                          disabled={false}
+                                          editable={true}
+                                          keyboardType="default"
+                                          numberOfLines={1}
+                                          onBlur={[Function]}
+                                          onChangeText={[Function]}
+                                          onFocus={[Function]}
+                                          onSubmitEditing={[Function]}
+                                          placeholder="Add link text"
+                                          placeholderTextColor="gray"
+                                          pointerEvents="none"
+                                          preferredColorScheme="light"
+                                          style={{}}
+                                          value=""
+                                        />
+                                        <View
+                                          pointerEvents="auto"
+                                          style={
+                                            [
+                                              false,
+                                              undefined,
+                                            ]
+                                          }
+                                        />
+                                      </View>
+                                      <View />
+                                    </View>
+                                    <View
+                                      style={
+                                        {
+                                          "height": 20,
+                                        }
+                                      }
+                                    />
+                                  </View>
+                                </View>
+                              </View>
+                            </RCTScrollView>
+                          </View>
+                          <View
+                            collapsable={false}
+                            pointerEvents="box-none"
+                            style={{}}
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                {
+                  "height": 56,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "zIndex": 1,
+                }
+              }
+            />
+          </View>
+        </RNGestureHandlerRootView>
+      </View>
+    </View>
+  </View>
+</Modal>
+`;
diff --git a/packages/format-library/src/link/test/index.native.js b/packages/format-library/src/link/test/index.native.js
index d755e8f08cece6..e55590fc4070e9 100644
--- a/packages/format-library/src/link/test/index.native.js
+++ b/packages/format-library/src/link/test/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Keyboard, Platform } from 'react-native';
-import { render, fireEvent, waitFor } from 'test/helpers';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const LinkEditSlot = ( props ) => (
 jest.spyOn( Keyboard, 'dismiss' );
 
 beforeAll( () => {
-	jest.useFakeTimers( 'legacy' );
+	jest.useFakeTimers( { legacyFakeTimers: true } );
 } );
 
 afterAll( () => {
@@ -53,9 +53,7 @@ describe( 'Android', () => {
 			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -63,7 +61,7 @@ describe( 'Android', () => {
 	} );
 
 	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
-		const { getByLabelText } = render(
+		const screen = render(
 			<LinkEditSlot
 				activeAttributes={ {} }
 				onChange={ () => {} }
@@ -74,10 +72,12 @@ describe( 'Android', () => {
 				} }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Link' ) );
-		fireEvent.press( getByLabelText( 'Link to, Search or type URL' ) );
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
+		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () => getByLabelText( 'Apply' ) );
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -112,9 +112,7 @@ describe( 'iOS', () => {
 			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () =>
-			screen.getByLabelText( 'Go back' )
-		);
+		const backButton = await screen.findByLabelText( 'Go back' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
@@ -122,7 +120,7 @@ describe( 'iOS', () => {
 	} );
 
 	it( 'improves apply animation performance by dismissing keyboard beforehand', async () => {
-		const { getByLabelText } = render(
+		const screen = render(
 			<LinkEditSlot
 				activeAttributes={ {} }
 				onChange={ () => {} }
@@ -133,10 +131,12 @@ describe( 'iOS', () => {
 				} }
 			/>
 		);
-		fireEvent.press( getByLabelText( 'Link' ) );
-		fireEvent.press( getByLabelText( 'Link to, Search or type URL' ) );
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+		fireEvent.press(
+			screen.getByLabelText( 'Link to, Search or type URL' )
+		);
 		// Await back button to allow async state updates to complete
-		const backButton = await waitFor( () => getByLabelText( 'Apply' ) );
+		const backButton = await screen.findByLabelText( 'Apply' );
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
 
diff --git a/packages/format-library/src/link/test/modal.native.js b/packages/format-library/src/link/test/modal.native.js
index 94d4499ef8906e..36ba4480634de8 100644
--- a/packages/format-library/src/link/test/modal.native.js
+++ b/packages/format-library/src/link/test/modal.native.js
@@ -9,7 +9,10 @@ import { render } from 'test/helpers';
 
 describe( 'LinksUI', () => {
 	it( 'LinksUI renders', () => {
-		const screen = render( <ModalLinkUI /> );
-		expect( screen.container ).toBeTruthy();
+		const value = { text: '' }; // empty `RichTextValue`
+		const screen = render(
+			<ModalLinkUI isVisible value={ value } activeAttributes={ {} } />
+		);
+		expect( screen.toJSON() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/format-library/src/link/use-link-instance-key.js b/packages/format-library/src/link/use-link-instance-key.js
index 6f27de3d14a82d..4c99d5e4e31ac7 100644
--- a/packages/format-library/src/link/use-link-instance-key.js
+++ b/packages/format-library/src/link/use-link-instance-key.js
@@ -14,7 +14,7 @@ function getKey( _id ) {
  * Builds a unique link control key for the given object reference.
  *
  * @param {Object} instance an unique object reference specific to this link control instance.
- * @return {string} the unique key to use for this link control.
+ * @return {string | undefined} the unique key to use for this link control.
  */
 function useLinkInstanceKey( instance ) {
 	if ( ! instance ) {
diff --git a/packages/format-library/src/link/utils.js b/packages/format-library/src/link/utils.js
index 4c7a582a2e8f21..314c8118713a43 100644
--- a/packages/format-library/src/link/utils.js
+++ b/packages/format-library/src/link/utils.js
@@ -85,10 +85,16 @@ export function isValidHref( href ) {
  * @param {string}  options.type             The type of the link.
  * @param {string}  options.id               The ID of the link.
  * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.
- *
+ * @param {boolean} options.nofollow         Whether this link is marked as no follow relationship.
  * @return {Object} The final format object.
  */
-export function createLinkFormat( { url, type, id, opensInNewWindow } ) {
+export function createLinkFormat( {
+	url,
+	type,
+	id,
+	opensInNewWindow,
+	nofollow,
+} ) {
 	const format = {
 		type: 'core/link',
 		attributes: {
@@ -96,12 +102,24 @@ export function createLinkFormat( { url, type, id, opensInNewWindow } ) {
 		},
 	};
 
-	if ( type ) format.attributes.type = type;
-	if ( id ) format.attributes.id = id;
+	if ( type ) {
+		format.attributes.type = type;
+	}
+	if ( id ) {
+		format.attributes.id = id;
+	}
 
 	if ( opensInNewWindow ) {
 		format.attributes.target = '_blank';
-		format.attributes.rel = 'noreferrer noopener';
+		format.attributes.rel = format.attributes.rel
+			? format.attributes.rel + ' noreferrer noopener'
+			: 'noreferrer noopener';
+	}
+
+	if ( nofollow ) {
+		format.attributes.rel = format.attributes.rel
+			? format.attributes.rel + ' nofollow'
+			: 'nofollow';
 	}
 
 	return format;
diff --git a/packages/format-library/src/lock-unlock.js b/packages/format-library/src/lock-unlock.js
new file mode 100644
index 00000000000000..e0effa2b829ee0
--- /dev/null
+++ b/packages/format-library/src/lock-unlock.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/format-library'
+	);
diff --git a/packages/format-library/src/non-breaking-space/index.js b/packages/format-library/src/non-breaking-space/index.js
new file mode 100644
index 00000000000000..829b0960f28a92
--- /dev/null
+++ b/packages/format-library/src/non-breaking-space/index.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { insert } from '@wordpress/rich-text';
+import { RichTextShortcut } from '@wordpress/block-editor';
+
+const name = 'core/non-breaking-space';
+const title = __( 'Non breaking space' );
+
+export const nonBreakingSpace = {
+	name,
+	title,
+	tagName: 'nbsp',
+	className: null,
+	edit( { value, onChange } ) {
+		function addNonBreakingSpace() {
+			onChange( insert( value, '\u00a0' ) );
+		}
+
+		return (
+			<RichTextShortcut
+				type="primaryShift"
+				character=" "
+				onUse={ addNonBreakingSpace }
+			/>
+		);
+	},
+};
diff --git a/packages/format-library/src/style.scss b/packages/format-library/src/style.scss
index 9aae705658e945..e388258b4d5a0e 100644
--- a/packages/format-library/src/style.scss
+++ b/packages/format-library/src/style.scss
@@ -1,3 +1,4 @@
 @import "./image/style.scss";
 @import "./link/style.scss";
 @import "./text-color/style.scss";
+@import "./language/style.scss";
diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js
index a0545a3dbc2473..04fd8ee6ce55aa 100644
--- a/packages/format-library/src/text-color/index.js
+++ b/packages/format-library/src/text-color/index.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';
+import { useMemo, useState } from '@wordpress/element';
+import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
 import {
 	Icon,
 	color as colorIcon,
@@ -61,27 +61,21 @@ function TextColorEdit( {
 	activeAttributes,
 	contentRef,
 } ) {
-	const allowCustomControl = useSetting( 'color.custom' );
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const [ isAddingColor, setIsAddingColor ] = useState( false );
-	const enableIsAddingColor = useCallback(
-		() => setIsAddingColor( true ),
-		[ setIsAddingColor ]
-	);
-	const disableIsAddingColor = useCallback(
-		() => setIsAddingColor( false ),
-		[ setIsAddingColor ]
+	const [ allowCustomControl, colors = EMPTY_ARRAY ] = useSettings(
+		'color.custom',
+		'color.palette'
 	);
+	const [ isAddingColor, setIsAddingColor ] = useState( false );
 	const colorIndicatorStyle = useMemo(
 		() =>
 			fillComputedColors(
 				contentRef.current,
 				getActiveColors( value, name, colors )
 			),
-		[ value, colors ]
+		[ contentRef, value, colors ]
 	);
 
-	const hasColorsToChoose = colors.length || ! allowCustomControl;
+	const hasColorsToChoose = !! colors.length || allowCustomControl;
 	if ( ! hasColorsToChoose && ! isActive ) {
 		return null;
 	}
@@ -105,7 +99,7 @@ function TextColorEdit( {
 				// If has no colors to choose but a color is active remove the color onClick.
 				onClick={
 					hasColorsToChoose
-						? enableIsAddingColor
+						? () => setIsAddingColor( true )
 						: () => onChange( removeFormat( value, name ) )
 				}
 				role="menuitemcheckbox"
@@ -113,11 +107,12 @@ function TextColorEdit( {
 			{ isAddingColor && (
 				<InlineColorUI
 					name={ name }
-					onClose={ disableIsAddingColor }
+					onClose={ () => setIsAddingColor( false ) }
 					activeAttributes={ activeAttributes }
 					value={ value }
 					onChange={ onChange }
 					contentRef={ contentRef }
+					isActive={ isActive }
 				/>
 			) }
 		</>
@@ -133,23 +128,5 @@ export const textColor = {
 		style: 'style',
 		class: 'class',
 	},
-	/*
-	 * Since this format relies on the <mark> tag, it's important to
-	 * prevent the default yellow background color applied by most
-	 * browsers. The solution is to detect when this format is used with a
-	 * text color but no background color, and in such cases to override
-	 * the default styling with a transparent background.
-	 *
-	 * @see https://github.com/WordPress/gutenberg/pull/35516
-	 */
-	__unstableFilterAttributeValue( key, value ) {
-		if ( key !== 'style' ) return value;
-		// We should not add a background-color if it's already set.
-		if ( value && value.includes( 'background-color' ) ) return value;
-		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
-		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
-		// rules will already include a `;`.
-		return value ? [ addedCSS, value ].join( ';' ) : addedCSS;
-	},
 	edit: TextColorEdit,
 };
diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js
index 5003dee86d3a5b..a9b62df7853e25 100644
--- a/packages/format-library/src/text-color/index.native.js
+++ b/packages/format-library/src/text-color/index.native.js
@@ -1,28 +1,31 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useState } from '@wordpress/element';
-import { BlockControls, useSetting } from '@wordpress/block-editor';
+import { useMemo, useState } from '@wordpress/element';
 import {
-	ToolbarGroup,
-	ToolbarButton,
+	BlockControls,
+	useSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
-import { Icon, textColor as textColorIcon } from '@wordpress/icons';
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import {
+	Icon,
+	color as colorIcon,
+	textColor as textColorIcon,
+} from '@wordpress/icons';
 import { removeFormat } from '@wordpress/rich-text';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { getActiveColors } from './inline.js';
-import { transparentValue } from './index.js';
+import { getActiveColors } from './inline.native.js';
 import { default as InlineColorUI } from './inline';
 import styles from './style.scss';
 
@@ -30,9 +33,7 @@ const name = 'core/text-color';
 const title = __( 'Text color' );
 
 function getComputedStyleProperty( element, property ) {
-	const {
-		props: { style = {} },
-	} = element;
+	const style = element?.props?.style ?? {};
 
 	if ( property === 'background-color' ) {
 		const { backgroundColor, baseColors } = style;
@@ -68,40 +69,27 @@ function TextColorEdit( {
 	activeAttributes,
 	contentRef,
 } ) {
-	const allowCustomControl = useSetting( 'color.custom' );
+	const [ allowCustomControl ] = useSettings( 'color.custom' );
 	const colors = useMobileGlobalStylesColors();
 	const [ isAddingColor, setIsAddingColor ] = useState( false );
-	const enableIsAddingColor = useCallback(
-		() => setIsAddingColor( true ),
-		[ setIsAddingColor ]
-	);
-	const disableIsAddingColor = useCallback(
-		() => setIsAddingColor( false ),
-		[ setIsAddingColor ]
-	);
 	const colorIndicatorStyle = useMemo(
 		() =>
 			fillComputedColors(
 				contentRef,
 				getActiveColors( value, name, colors )
 			),
-		[ value, colors ]
+		[ contentRef, value, colors ]
 	);
 
 	const hasColorsToChoose = colors.length || ! allowCustomControl;
 
-	const onPressButton = useCallback( () => {
-		if ( hasColorsToChoose ) {
-			enableIsAddingColor();
-		} else {
-			onChange( removeFormat( value, name ) );
-		}
-	}, [ hasColorsToChoose, value ] );
-
-	const outlineStyle = usePreferredColorSchemeStyle(
-		styles[ 'components-inline-color__outline' ],
-		styles[ 'components-inline-color__outline--dark' ]
-	);
+	const outlineStyle = [
+		usePreferredColorSchemeStyle(
+			styles[ 'components-inline-color__outline' ],
+			styles[ 'components-inline-color__outline--dark' ]
+		),
+		{ borderWidth: StyleSheet.hairlineWidth },
+	];
 
 	if ( ! hasColorsToChoose && ! isActive ) {
 		return null;
@@ -131,7 +119,11 @@ function TextColorEdit( {
 						isActive={ isActive }
 						icon={
 							<Icon
-								icon={ textColorIcon }
+								icon={
+									Object.keys( activeAttributes ).length
+										? textColorIcon
+										: colorIcon
+								}
 								style={
 									colorIndicatorStyle?.color && {
 										color: colorIndicatorStyle.color,
@@ -145,14 +137,18 @@ function TextColorEdit( {
 							customContainerStyles,
 						} }
 						// If has no colors to choose but a color is active remove the color onClick
-						onClick={ onPressButton }
+						onClick={
+							hasColorsToChoose
+								? () => setIsAddingColor( true )
+								: () => onChange( removeFormat( value, name ) )
+						}
 					/>
 				</ToolbarGroup>
 			</BlockControls>
 			{ isAddingColor && (
 				<InlineColorUI
 					name={ name }
-					onClose={ disableIsAddingColor }
+					onClose={ () => setIsAddingColor( false ) }
 					activeAttributes={ activeAttributes }
 					value={ value }
 					onChange={ onChange }
@@ -172,26 +168,5 @@ export const textColor = {
 		style: 'style',
 		class: 'class',
 	},
-	/*
-	 * Since this format relies on the <mark> tag, it's important to
-	 * prevent the default yellow background color applied by most
-	 * browsers. The solution is to detect when this format is used with a
-	 * text color but no background color, and in such cases to override
-	 * the default styling with a transparent background.
-	 *
-	 * @see https://github.com/WordPress/gutenberg/pull/35516
-	 */
-	__unstableFilterAttributeValue( key, value ) {
-		if ( key !== 'style' ) return value;
-		// We need to remove the extra spaces within the styles on mobile
-		const newValue = value?.replace( / /g, '' );
-		// We should not add a background-color if it's already set
-		if ( newValue && newValue.includes( 'background-color' ) )
-			return newValue;
-		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
-		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
-		// rules will already include a `;`.
-		return newValue ? [ addedCSS, newValue ].join( ';' ) : addedCSS;
-	},
 	edit: TextColorEdit,
 };
diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js
index f956afa7d323ab..bc1e0eef07b0c1 100644
--- a/packages/format-library/src/text-color/inline.js
+++ b/packages/format-library/src/text-color/inline.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	applyFormat,
@@ -15,23 +15,39 @@ import {
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 	store as blockEditorStore,
-	useCachedTruthy,
 } from '@wordpress/block-editor';
-import { Popover, TabPanel } from '@wordpress/components';
+import {
+	Popover,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { textColor as settings, transparentValue } from './index';
+import { unlock } from '../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const TABS = [
+	{ name: 'color', title: __( 'Text' ) },
+	{ name: 'backgroundColor', title: __( 'Background' ) },
+];
 
 function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.split( ':' );
-			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' && value !== transparentValue )
+			if ( property === 'color' ) {
+				accumulator.color = value;
+			}
+			if (
+				property === 'background-color' &&
+				value !== transparentValue
+			) {
 				accumulator.backgroundColor = value;
+			}
 		}
 		return accumulator;
 	}, {} );
@@ -98,8 +114,12 @@ function setColors( value, name, colorSettings, colors ) {
 		}
 	}
 
-	if ( styles.length ) attributes.style = styles.join( ';' );
-	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+	if ( styles.length ) {
+		attributes.style = styles.join( ';' );
+	}
+	if ( classNames.length ) {
+		attributes.class = classNames.join( ' ' );
+	}
 
 	return applyFormat( value, { type: name, attributes } );
 }
@@ -109,14 +129,6 @@ function ColorPicker( { name, property, value, onChange } ) {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().colors ?? [];
 	}, [] );
-	const onColorChange = useCallback(
-		( color ) => {
-			onChange(
-				setColors( value, name, colors, { [ property ]: color } )
-			);
-		},
-		[ colors, onChange, property ]
-	);
 	const activeColors = useMemo(
 		() => getActiveColors( value, name, colors ),
 		[ name, value, colors ]
@@ -125,7 +137,11 @@ function ColorPicker( { name, property, value, onChange } ) {
 	return (
 		<ColorPalette
 			value={ activeColors[ property ] }
-			onChange={ onColorChange }
+			onChange={ ( color ) => {
+				onChange(
+					setColors( value, name, colors, { [ property ]: color } )
+				);
+			} }
 		/>
 	);
 }
@@ -136,49 +152,42 @@ export default function InlineColorUI( {
 	onChange,
 	onClose,
 	contentRef,
+	isActive,
 } ) {
-	/*
-	 As you change the text color by typing a HEX value into a field,
-	 the return value of document.getSelection jumps to the field you're editing,
-	 not the highlighted text. Given that useAnchor uses document.getSelection,
-	 it will return null, since it can't find the <mark> element within the HEX input.
-	 This caches the last truthy value of the selection anchor reference.
-	 */
-	const popoverAnchor = useCachedTruthy(
-		useAnchor( {
-			editableContentElement: contentRef.current,
-			value,
-			settings,
-		} )
-	);
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: { ...settings, isActive },
+	} );
 
 	return (
 		<Popover
 			onClose={ onClose }
-			className="components-inline-color-popover"
+			className="format-library__inline-color-popover"
 			anchor={ popoverAnchor }
 		>
-			<TabPanel
-				tabs={ [
-					{
-						name: 'color',
-						title: __( 'Text' ),
-					},
-					{
-						name: 'backgroundColor',
-						title: __( 'Background' ),
-					},
-				] }
-			>
-				{ ( tab ) => (
-					<ColorPicker
-						name={ name }
-						property={ tab.name }
-						value={ value }
-						onChange={ onChange }
-					/>
-				) }
-			</TabPanel>
+			<Tabs>
+				<Tabs.TabList>
+					{ TABS.map( ( tab ) => (
+						<Tabs.Tab tabId={ tab.name } key={ tab.name }>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				{ TABS.map( ( tab ) => (
+					<Tabs.TabPanel
+						tabId={ tab.name }
+						focusable={ false }
+						key={ tab.name }
+					>
+						<ColorPicker
+							name={ name }
+							property={ tab.name }
+							value={ value }
+							onChange={ onChange }
+						/>
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
 		</Popover>
 	);
 }
diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js
index f00146631e92df..8324e0c3453c37 100644
--- a/packages/format-library/src/text-color/inline.native.js
+++ b/packages/format-library/src/text-color/inline.native.js
@@ -11,12 +11,9 @@ import {
 	getColorClassName,
 	getColorObjectByColorValue,
 	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-import {
-	BottomSheet,
-	ColorSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
+} from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,15 +25,21 @@ function parseCSS( css = '' ) {
 	return css.split( ';' ).reduce( ( accumulator, rule ) => {
 		if ( rule ) {
 			const [ property, value ] = rule.replace( / /g, '' ).split( ':' );
-			if ( property === 'color' ) accumulator.color = value;
-			if ( property === 'background-color' && value !== transparentValue )
+			if ( property === 'color' ) {
+				accumulator.color = value;
+			}
+			if (
+				property === 'background-color' &&
+				value !== transparentValue
+			) {
 				accumulator.backgroundColor = value;
+			}
 		}
 		return accumulator;
 	}, {} );
 }
 
-function getActiveColors( value, name, colorSettings ) {
+export function getActiveColors( value, name, colorSettings ) {
 	const activeColorFormat = getActiveFormat( value, name );
 
 	if ( ! activeColorFormat ) {
@@ -49,13 +52,14 @@ function getActiveColors( value, name, colorSettings ) {
 	};
 }
 
-function setColors( value, name, colorSettings, colors ) {
+function setColors( value, name, colorSettings, colors, contentRef ) {
 	const { color, backgroundColor } = {
 		...getActiveColors( value, name, colorSettings ),
 		...colors,
 	};
 
-	if ( ! color && ! backgroundColor ) {
+	if ( ! color ) {
+		contentRef?.onRemoveMarkFormatting();
 		return removeFormat( value, name );
 	}
 
@@ -81,67 +85,41 @@ function setColors( value, name, colorSettings, colors ) {
 		}
 	}
 
-	if ( styles.length ) attributes.style = styles.join( ';' );
-	if ( classNames.length ) attributes.class = classNames.join( ' ' );
+	if ( styles.length ) {
+		attributes.style = styles.join( ';' );
+	}
+	if ( classNames.length ) {
+		attributes.class = classNames.join( ' ' );
+	}
 
 	const format = { type: name, attributes };
 	const hasNoSelection = value.start === value.end;
-	const isAtTheEnd = value.end === value.text.length;
-	const previousCharacter = value.text.charAt( value.end - 1 );
-
-	// Force formatting due to limitations in the native implementation
-	if (
-		hasNoSelection &&
-		( value.text.length === 0 ||
-			( previousCharacter === ' ' && isAtTheEnd ) )
-	) {
-		// For cases where there's no text selected, there's a space before
-		// the current caret position and it's at the end of the text.
-		return applyFormat( value, format, value.start - 1, value.end + 1 );
-	} else if ( hasNoSelection && isAtTheEnd ) {
-		// If there's no selection and is at the end of the text
-		// manually add the format within the current caret position.
-		const newFormat = applyFormat( value, format );
-		const { activeFormats } = newFormat;
-		newFormat.formats[ value.start ] = [
-			...( activeFormats?.filter(
-				( { type } ) => type !== format.type
-			) || [] ),
-			format,
-		];
-		return newFormat;
-	} else if ( hasNoSelection ) {
-		return removeFormat( value, format );
-	}
 
+	if ( hasNoSelection ) {
+		contentRef?.onMarkFormatting( color );
+	}
 	return applyFormat( value, format );
 }
 
-function ColorPicker( { name, value, onChange } ) {
+function ColorPicker( { name, value, onChange, contentRef } ) {
 	const property = 'color';
 	const colors = useMobileGlobalStylesColors();
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = colors;
 
 	const onColorChange = useCallback(
 		( color ) => {
-			if ( color !== '' ) {
-				onChange(
-					setColors( value, name, colors, { [ property ]: color } )
-				);
-				// Remove formatting if the color was reset, there's no
-				// current selection and the previous character is a space
-			} else if (
-				value?.start === value?.end &&
-				value.text?.charAt( value?.end - 1 ) === ' '
-			) {
-				onChange(
-					removeFormat( value, name, value.end - 1, value.end )
-				);
-			} else {
-				onChange( removeFormat( value, name ) );
-			}
+			onChange(
+				setColors(
+					value,
+					name,
+					colors,
+					{ [ property ]: color },
+					contentRef
+				)
+			);
 		},
-		[ colors, onChange, property ]
+		[ colors, contentRef, name, onChange, value ]
 	);
 	const activeColors = useMemo(
 		() => getActiveColors( value, name, colors ),
@@ -152,13 +130,20 @@ function ColorPicker( { name, value, onChange } ) {
 		<ColorSettings
 			colorValue={ activeColors[ property ] }
 			onColorChange={ onColorChange }
+			onColorCleared={ onColorChange }
 			defaultSettings={ colorSettings }
 			hideNavigation
 		/>
 	);
 }
 
-export default function InlineColorUI( { name, value, onChange, onClose } ) {
+export default function InlineColorUI( {
+	name,
+	value,
+	onChange,
+	onClose,
+	contentRef,
+} ) {
 	return (
 		<BottomSheet
 			isVisible
@@ -175,6 +160,7 @@ export default function InlineColorUI( { name, value, onChange, onClose } ) {
 						name={ name }
 						value={ value }
 						onChange={ onChange }
+						contentRef={ contentRef }
 					/>
 				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
diff --git a/packages/format-library/src/text-color/style.native.scss b/packages/format-library/src/text-color/style.native.scss
index 43e84e81ea7e99..c7751b3357d5f1 100644
--- a/packages/format-library/src/text-color/style.native.scss
+++ b/packages/format-library/src/text-color/style.native.scss
@@ -3,19 +3,18 @@
 }
 
 .components-inline-color__outline {
-	border-color: $light-dim;
+	border-color: $light-quaternary;
 	top: 6px;
 	bottom: 6px;
 	left: 11px;
 	right: 11px;
 	border-radius: 24px;
-	border-width: $border-width;
 	position: absolute;
 	z-index: 2;
 }
 
 .components-inline-color__outline--dark {
-	border-color: $dark-ultra-dim;
+	border-color: $dark-quaternary;
 }
 
 .components-inline-color__button-container {
diff --git a/packages/format-library/src/text-color/style.scss b/packages/format-library/src/text-color/style.scss
index 121ba8da756cf5..439af6db38d0cf 100644
--- a/packages/format-library/src/text-color/style.scss
+++ b/packages/format-library/src/text-color/style.scss
@@ -1,23 +1,6 @@
-.components-inline-color-popover {
+.format-library__inline-color-popover {
 
-	.components-popover__content {
-		.components-tab-panel__tab-content {
-			padding: 16px;
-		}
-
-		.components-color-palette {
-			margin-top: 0.6rem;
-		}
-
-		.components-base-control__title {
-			display: block;
-			margin-bottom: 16px;
-			font-weight: 600;
-			color: #191e23;
-		}
-
-		.component-color-indicator {
-			vertical-align: text-bottom;
-		}
+	[role="tabpanel"] {
+		padding: 16px;
 	}
 }
diff --git a/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap b/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap
index 5b37854acfb37f..8b64c8e7987915 100644
--- a/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap
+++ b/packages/format-library/src/text-color/test/__snapshots__/index.native.js.snap
@@ -2,28 +2,22 @@
 
 exports[`Text color allows toggling the highlight color feature to selected text 1`] = `
 "<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\">Hello this is a test</mark></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Text color allows toggling the highlight color feature to type new text 1`] = `
-"<!-- wp:paragraph -->
-<p><mark style=\\"background-color:rgba(0, 0, 0, 0);color:#f78da7\\" class=\\"has-inline-color has-pale-pink-color\\"></mark></p>
+<p><mark style="background-color:rgba(0, 0, 0, 0);color:#f78da7" class="has-inline-color has-pale-pink-color">Hello this is a test</mark></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Text color creates a paragraph block with the text color format 1`] = `
 "<!-- wp:paragraph -->
-<p>Hello <mark style=\\"background-color:rgba(0,0,0,0);color:#cf2e2e\\" class=\\"has-inline-color has-vivid-red-color\\">this is a test</mark></p>
+<p>Hello <mark style="background-color:rgba(0,0,0,0);color:#cf2e2e" class="has-inline-color has-vivid-red-color">this is a test</mark></p>
 <!-- /wp:paragraph -->"
 `;
 
 exports[`Text color supports old text color format using "span" tag 1`] = `
 "<!-- wp:paragraph -->
-<p>this <span class=\\"has-inline-color has-green-color\\">is</span> <span class=\\"has-inline-color has-red-color\\">test</span></p>
+<p>this <span class="has-inline-color has-green-color">is</span> <span class="has-inline-color has-red-color">test</span></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p><span style=\\"color:#08a5e9\\" class=\\"has-inline-color\\">this is a test</span></p>
+<p><span style="color:#08a5e9" class="has-inline-color">this is a test</span></p>
 <!-- /wp:paragraph -->"
 `;
diff --git a/packages/format-library/src/text-color/test/index.native.js b/packages/format-library/src/text-color/test/index.native.js
index 254c1bae990ee4..c206f858070622 100644
--- a/packages/format-library/src/text-color/test/index.native.js
+++ b/packages/format-library/src/text-color/test/index.native.js
@@ -2,17 +2,29 @@
  * External dependencies
  */
 import {
+	fireEvent,
 	getEditorHtml,
 	initializeEditor,
-	fireEvent,
+	render,
 	waitFor,
 } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks';
+import {
+	registerBlockType,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
 import { coreBlocks } from '@wordpress/block-library';
+import { BlockControls, BlockEdit } from '@wordpress/block-editor';
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { textColor } from '..';
 
 const COLOR_PINK = '#f78da7';
 const paragraph = coreBlocks[ 'core/paragraph' ];
@@ -32,90 +44,45 @@ afterAll( () => {
 
 describe( 'Text color', () => {
 	it( 'shows the text color formatting button in the toolbar', async () => {
-		const { getByLabelText } = await initializeEditor();
+		const screen = await initializeEditor();
 
 		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
+		const paragraphPlaceholder = await screen.findByLabelText(
+			'Add paragraph block'
 		);
 		expect( paragraphPlaceholder ).toBeDefined();
 		fireEvent.press( paragraphPlaceholder );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
 		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
+		const textColorButton = await screen.findByLabelText( 'Text color' );
 		expect( textColorButton ).toBeDefined();
 	} );
 
-	it( 'allows toggling the highlight color feature to type new text', async () => {
-		const { getByLabelText, getByTestId, getByA11yHint } =
-			await initializeEditor();
-
-		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
-		);
-		expect( paragraphPlaceholder ).toBeDefined();
-		fireEvent.press( paragraphPlaceholder );
-
-		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
-		);
-		expect( paragraphBlock ).toBeDefined();
-
-		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
-		expect( textColorButton ).toBeDefined();
-		fireEvent.press( textColorButton );
-
-		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = getByTestId( 'inline-text-color-modal' );
-		await waitFor( () => inlineTextColorModal.props.isVisible );
-
-		// Look for the pink color button
-		const pinkColorButton = await waitFor( () =>
-			getByA11yHint( COLOR_PINK )
-		);
-		expect( pinkColorButton ).toBeDefined();
-		fireEvent.press( pinkColorButton );
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
 	it( 'allows toggling the highlight color feature to selected text', async () => {
-		const {
-			getByLabelText,
-			getByTestId,
-			getByPlaceholderText,
-			getByA11yHint,
-		} = await initializeEditor();
+		const screen = await initializeEditor();
 		const text = 'Hello this is a test';
 
 		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
+		const paragraphPlaceholder = await screen.findByLabelText(
+			'Add paragraph block'
 		);
 		expect( paragraphPlaceholder ).toBeDefined();
 		fireEvent.press( paragraphPlaceholder );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
 		// Update TextInput value
-		const paragraphText = getByPlaceholderText( 'Start writing…' );
+		const paragraphText = screen.getByPlaceholderText( 'Start writing…' );
 		fireEvent( paragraphText, 'onSelectionChange', 0, text.length, text, {
 			nativeEvent: {
 				eventCount: 1,
@@ -125,34 +92,36 @@ describe( 'Text color', () => {
 		} );
 
 		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
+		const textColorButton = await screen.findByLabelText( 'Text color' );
 		expect( textColorButton ).toBeDefined();
 		fireEvent.press( textColorButton );
 
 		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = getByTestId( 'inline-text-color-modal' );
+		const inlineTextColorModal = screen.getByTestId(
+			'inline-text-color-modal'
+		);
 		await waitFor( () => inlineTextColorModal.props.isVisible );
 
 		// Look for the pink color button
-		const pinkColorButton = await waitFor( () =>
-			getByA11yHint( COLOR_PINK )
-		);
+		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
 		expect( pinkColorButton ).toBeDefined();
 		fireEvent.press( pinkColorButton );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'creates a paragraph block with the text color format', async () => {
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: TEXT_WITH_COLOR,
 		} );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
@@ -172,4 +141,52 @@ describe( 'Text color', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'renders when "contentRef" is undefined', () => {
+		registerBlockType( 'core/test-block', {
+			save: () => {},
+			category: 'text',
+			title: 'block title',
+			edit: ( { children } ) => <>{ children }</>,
+		} );
+		const TextColorEdit = textColor.edit;
+		// Empty text with black color set as the text color
+		const textValue = {
+			formats: [],
+			replacements: [],
+			text: '',
+			start: 0,
+			end: 0,
+			activeFormats: [
+				{
+					type: 'core/text-color',
+					attributes: {
+						style: 'background-color:rgba(0, 0, 0, 0);color:#111111',
+						class: 'has-contrast-color',
+					},
+				},
+			],
+		};
+
+		const { getByLabelText } = render(
+			<SlotFillProvider>
+				<BlockEdit name="core/test-block" isSelected mayDisplayControls>
+					<TextColorEdit
+						isActive
+						activeAttributes={ {} }
+						value={ textValue }
+						onChange={ jest.fn() }
+						// This ref is usually defined by the `RichText` component.
+						// However, there are rare cases (probably related to slow performance
+						// in low-end devices) where it's undefined upon mounting.
+						contentRef={ undefined }
+					/>
+				</BlockEdit>
+				<BlockControls.Slot />
+			</SlotFillProvider>
+		);
+
+		const textColorButton = getByLabelText( 'Text color' );
+		expect( textColorButton ).toBeDefined();
+	} );
 } );
diff --git a/packages/format-library/src/unknown/index.js b/packages/format-library/src/unknown/index.js
new file mode 100644
index 00000000000000..b2da23388c79b7
--- /dev/null
+++ b/packages/format-library/src/unknown/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { help } from '@wordpress/icons';
+
+const name = 'core/unknown';
+const title = __( 'Clear Unknown Formatting' );
+
+function selectionContainsUnknownFormats( value ) {
+	if ( isCollapsed( value ) ) {
+		return false;
+	}
+
+	const selectedValue = slice( value );
+	return selectedValue.formats.some( ( formats ) => {
+		return formats.some( ( format ) => format.type === name );
+	} );
+}
+
+export const unknown = {
+	name,
+	title,
+	tagName: '*',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		if ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {
+			return null;
+		}
+
+		function onClick() {
+			onChange( removeFormat( value, name ) );
+			onFocus();
+		}
+
+		return (
+			<RichTextToolbarButton
+				name="unknown"
+				icon={ help }
+				title={ title }
+				onClick={ onClick }
+				isActive
+			/>
+		);
+	},
+};
diff --git a/packages/hooks/.npmrc b/packages/hooks/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/hooks/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index cc1be27965e2bd..be18dab3225a2b 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+### New Features
+
+- added new `doActionAsync` and `applyFiltersAsync` functions to run hooks in async mode ([#64204](https://github.com/WordPress/gutenberg/pull/64204)).
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -55,29 +163,29 @@
 
 ## 2.12.0 (2021-03-17)
 
-### New Feature
+### New Features
 
 -   Export the default `createHooks` singleton instance as `defaultHooks`, in addition to exporting the individual methods.
 
 ## 2.11.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#26430](https://github.com/WordPress/gutenberg/pull/26430))
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix: Use own instance's `doAction` method for built-in `hookAdded` and `hookRemoved` hooks ([#26498](https://github.com/WordPress/gutenberg/pull/26498))
 
 ## 2.6.0 (2019-08-29)
 
-### New Feature
+### New Features
 
 -   Enable an optional namespace parameter for `hasAction` & `hasFilter`. When checking if an action or filter exists, `hasAction` and `hasFilter` now accept an optional paramter to limit matches by namespace.
 
 ## 2.4.0 (2019-06-12)
 
-### New Feature
+### New Features
 
 -   Enable support for the 'all' hook in non production environments.
 
@@ -85,28 +193,28 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.2.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
-### Polish
+### Internal
 
 -   Moved `@WordPress/packages` repository to `@WordPress/gutenberg` ([#7805](https://github.com/WordPress/gutenberg/pull/7805))
 
 ## 1.1.8 (2018-05-08)
 
-### Polish
+### Internal
 
 -   Documentation: Improve usage examples ([#121](https://github.com/WordPress/packages/pull/121))
 
 ## 1.1.6 (2018-03-21)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix: Resolves issue where action argument would be undefined on all but the first action callback.
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 3e9897c79952cd..f80d2e63af37ba 100644
--- a/packages/hooks/README.md
+++ b/packages/hooks/README.md
@@ -41,7 +41,9 @@ One notable difference between the JS and PHP hooks API is that in the JS versio
 -   `removeAllActions( 'hookName' )`
 -   `removeAllFilters( 'hookName' )`
 -   `doAction( 'hookName', arg1, arg2, moreArgs, finalArg )`
+-   `doActionAsync( 'hookName', arg1, arg2, moreArgs, finalArg )`
 -   `applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
+-   `applyFiltersAsync( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
 -   `doingAction( 'hookName' )`
 -   `doingFilter( 'hookName' )`
 -   `didAction( 'hookName' )`
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 8493f00e08d648..c9e652d30d83e1 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,14 +19,16 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.js
index 634901fe55f63a..3ada0322496004 100644
--- a/packages/hooks/src/createCurrentHook.js
+++ b/packages/hooks/src/createCurrentHook.js
@@ -11,11 +11,8 @@
 function createCurrentHook( hooks, storeKey ) {
 	return function currentHook() {
 		const hooksStore = hooks[ storeKey ];
-
-		return (
-			hooksStore.__current[ hooksStore.__current.length - 1 ]?.name ??
-			null
-		);
+		const currentArray = Array.from( hooksStore.__current );
+		return currentArray.at( -1 )?.name ?? null;
 	};
 }
 
diff --git a/packages/hooks/src/createDoingHook.js b/packages/hooks/src/createDoingHook.js
index 652ab06b4ba728..9fccf38171f332 100644
--- a/packages/hooks/src/createDoingHook.js
+++ b/packages/hooks/src/createDoingHook.js
@@ -24,13 +24,13 @@ function createDoingHook( hooks, storeKey ) {
 
 		// If the hookName was not passed, check for any current hook.
 		if ( 'undefined' === typeof hookName ) {
-			return 'undefined' !== typeof hooksStore.__current[ 0 ];
+			return hooksStore.__current.size > 0;
 		}
 
-		// Return the __current hook.
-		return hooksStore.__current[ 0 ]
-			? hookName === hooksStore.__current[ 0 ].name
-			: false;
+		// Find if the `hookName` hook is in `__current`.
+		return Array.from( hooksStore.__current ).some(
+			( hook ) => hook.name === hookName
+		);
 	};
 }
 
diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.js
index 361383a3a97fc9..1f9b1a8206b020 100644
--- a/packages/hooks/src/createHooks.js
+++ b/packages/hooks/src/createHooks.js
@@ -20,11 +20,11 @@ export class _Hooks {
 	constructor() {
 		/** @type {import('.').Store} actions */
 		this.actions = Object.create( null );
-		this.actions.__current = [];
+		this.actions.__current = new Set();
 
 		/** @type {import('.').Store} filters */
 		this.filters = Object.create( null );
-		this.filters.__current = [];
+		this.filters.__current = new Set();
 
 		this.addAction = createAddHook( this, 'actions' );
 		this.addFilter = createAddHook( this, 'filters' );
@@ -34,8 +34,10 @@ export class _Hooks {
 		this.hasFilter = createHasHook( this, 'filters' );
 		this.removeAllActions = createRemoveHook( this, 'actions', true );
 		this.removeAllFilters = createRemoveHook( this, 'filters', true );
-		this.doAction = createRunHook( this, 'actions' );
-		this.applyFilters = createRunHook( this, 'filters', true );
+		this.doAction = createRunHook( this, 'actions', false, false );
+		this.doActionAsync = createRunHook( this, 'actions', false, true );
+		this.applyFilters = createRunHook( this, 'filters', true, false );
+		this.applyFiltersAsync = createRunHook( this, 'filters', true, true );
 		this.currentAction = createCurrentHook( this, 'actions' );
 		this.currentFilter = createCurrentHook( this, 'filters' );
 		this.doingAction = createDoingHook( this, 'actions' );
diff --git a/packages/hooks/src/createRunHook.js b/packages/hooks/src/createRunHook.js
index ec83026d4d0db6..f2a56dbdc0d717 100644
--- a/packages/hooks/src/createRunHook.js
+++ b/packages/hooks/src/createRunHook.js
@@ -3,15 +3,15 @@
  * registered to a hook of the specified type, optionally returning the final
  * value of the call chain.
  *
- * @param {import('.').Hooks}    hooks                  Hooks instance.
+ * @param {import('.').Hooks}    hooks          Hooks instance.
  * @param {import('.').StoreKey} storeKey
- * @param {boolean}              [returnFirstArg=false] Whether each hook callback is expected to
- *                                                      return its first argument.
+ * @param {boolean}              returnFirstArg Whether each hook callback is expected to return its first argument.
+ * @param {boolean}              async          Whether the hook callback should be run asynchronously
  *
- * @return {(hookName:string, ...args: unknown[]) => unknown} Function that runs hook callbacks.
+ * @return {(hookName:string, ...args: unknown[]) => undefined|unknown} Function that runs hook callbacks.
  */
-function createRunHook( hooks, storeKey, returnFirstArg = false ) {
-	return function runHooks( hookName, ...args ) {
+function createRunHook( hooks, storeKey, returnFirstArg, async ) {
+	return function runHook( hookName, ...args ) {
 		const hooksStore = hooks[ storeKey ];
 
 		if ( ! hooksStore[ hookName ] ) {
@@ -42,24 +42,43 @@ function createRunHook( hooks, storeKey, returnFirstArg = false ) {
 			currentIndex: 0,
 		};
 
-		hooksStore.__current.push( hookInfo );
-
-		while ( hookInfo.currentIndex < handlers.length ) {
-			const handler = handlers[ hookInfo.currentIndex ];
-
-			const result = handler.callback.apply( null, args );
-			if ( returnFirstArg ) {
-				args[ 0 ] = result;
+		async function asyncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = await handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
 			}
-
-			hookInfo.currentIndex++;
 		}
 
-		hooksStore.__current.pop();
-
-		if ( returnFirstArg ) {
-			return args[ 0 ];
+		function syncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
+			}
 		}
+
+		return ( async ? asyncRunner : syncRunner )();
 	};
 }
 
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.js
index 653a9537145d91..1d13397e406c6b 100644
--- a/packages/hooks/src/index.js
+++ b/packages/hooks/src/index.js
@@ -25,7 +25,7 @@ import createHooks from './createHooks';
  */
 
 /**
- * @typedef {Record<string, Hook> & {__current: Current[]}} Store
+ * @typedef {Record<string, Hook> & {__current: Set<Current>}} Store
  */
 
 /**
@@ -48,7 +48,9 @@ const {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -70,7 +72,9 @@ export {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
diff --git a/packages/hooks/src/test/index.test.js b/packages/hooks/src/test/index.test.js
index 9b7eb3b8e0e223..5fdaf5fc7207a1 100644
--- a/packages/hooks/src/test/index.test.js
+++ b/packages/hooks/src/test/index.test.js
@@ -12,7 +12,9 @@ import {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -943,3 +945,151 @@ test( 'checking hasFilter with named callbacks and removeAllActions', () => {
 	expect( hasFilter( 'test.filter', 'my_callback' ) ).toBe( false );
 	expect( hasFilter( 'test.filter', 'my_second_callback' ) ).toBe( false );
 } );
+
+describe( 'async filter', () => {
+	test( 'runs all registered handlers', async () => {
+		addFilter( 'test.async.filter', 'callback_plus1', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value + 1 ), 10 )
+			);
+		} );
+		addFilter( 'test.async.filter', 'callback_times2', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value * 2 ), 10 )
+			);
+		} );
+
+		expect( await applyFiltersAsync( 'test.async.filter', 2 ) ).toBe( 6 );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const sqrt = jest.fn( async ( value ) => {
+			if ( value < 0 ) {
+				throw new Error( 'cannot pass negative value to sqrt' );
+			}
+			return Math.sqrt( value );
+		} );
+
+		const plus1 = jest.fn( async ( value ) => {
+			return value + 1;
+		} );
+
+		addFilter( 'test.async.filter', 'callback_sqrt', sqrt );
+		addFilter( 'test.async.filter', 'callback_plus1', plus1 );
+
+		await expect(
+			applyFiltersAsync( 'test.async.filter', -1 )
+		).rejects.toThrow( 'cannot pass negative value to sqrt' );
+		expect( sqrt ).toHaveBeenCalledTimes( 1 );
+		expect( plus1 ).not.toHaveBeenCalled();
+	} );
+
+	test( 'is correctly tracked by doingFilter and didFilter', async () => {
+		addFilter( 'test.async.filter', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter' ) ).toBe( true );
+			return value;
+		} );
+
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 0 );
+		await applyFiltersAsync( 'test.async.filter', 0 );
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple filters run at once', async () => {
+		addFilter( 'test.async.filter1', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+		addFilter( 'test.async.filter2', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+
+		await Promise.all( [
+			applyFiltersAsync( 'test.async.filter1', 0 ),
+			applyFiltersAsync( 'test.async.filter2', 0 ),
+		] );
+	} );
+} );
+
+describe( 'async action', () => {
+	test( 'runs all registered handlers sequentially', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			outputs.push( 1 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 2 );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await doActionAsync( 'test.async.action' );
+		expect( outputs ).toEqual( [ 1, 2, 3, 4 ] );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			throw new Error( 'aborting' );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await expect( doActionAsync( 'test.async.action' ) ).rejects.toThrow(
+			'aborting'
+		);
+		expect( outputs ).toEqual( [] );
+	} );
+
+	test( 'is correctly tracked by doingAction and didAction', async () => {
+		addAction( 'test.async.action', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action' ) ).toBe( true );
+		} );
+
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 0 );
+		await doActionAsync( 'test.async.action', 0 );
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple actions run at once', async () => {
+		addAction( 'test.async.action1', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+		addAction( 'test.async.action2', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+
+		await Promise.all( [
+			doActionAsync( 'test.async.action1', 0 ),
+			doActionAsync( 'test.async.action2', 0 ),
+		] );
+	} );
+} );
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
index 671d4a5eba4403..9e3edfe0ae443c 100644
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/html-entities/.npmrc b/packages/html-entities/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/html-entities/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 95e8c5fef0f4a4..98b3b3c483325e 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,7 +161,7 @@
 
 ## 2.7.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#20669](https://github.com/WordPress/gutenberg/pull/20669))
 
@@ -67,6 +171,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/html-entities/README.md b/packages/html-entities/README.md
index 211215c50a451b..1133c7df156194 100644
--- a/packages/html-entities/README.md
+++ b/packages/html-entities/README.md
@@ -23,6 +23,8 @@ Decodes the HTML entities from a given string.
 _Usage_
 
 ```js
+import { decodeEntities } from '@wordpress/html-entities';
+
 const result = decodeEntities( '&aacute;' );
 console.log( result ); // result will be "á"
 ```
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index cc643b16432f55..f99b2ca99e5fbe 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,14 +20,16 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/html-entities/src/index.js b/packages/html-entities/src/index.js
index 503d6f69daf82e..1df4ec41484bdd 100644
--- a/packages/html-entities/src/index.js
+++ b/packages/html-entities/src/index.js
@@ -8,6 +8,8 @@ let _decodeTextArea;
  *
  * @example
  * ```js
+ * import { decodeEntities } from '@wordpress/html-entities';
+ *
  * const result = decodeEntities( '&aacute;' );
  * console.log( result ); // result will be "á"
  * ```
diff --git a/packages/html-entities/tsconfig.json b/packages/html-entities/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/html-entities/tsconfig.json
+++ b/packages/html-entities/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/i18n/.npmrc b/packages/i18n/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/i18n/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 532f34f4c6a260..b1d94cde634c0d 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -42,7 +146,7 @@
 
 ## 4.3.0 (2022-01-27)
 
-- Add new `addLocaleData` method to merge locale data into the Tannin instance by domain.
+-   Add new `addLocaleData` method to merge locale data into the Tannin instance by domain.
 
 ## 4.2.0 (2021-07-21)
 
@@ -78,7 +182,7 @@
 
 ## 3.12.0 (2020-04-30)
 
-### Bug Fix
+### Bug Fixes
 
 -   Relax type of `sprintf` arguments type ([#21919](https://github.com/WordPress/gutenberg/pull/21919))
 
@@ -91,7 +195,7 @@
 
 ## 3.10.0 (2020-04-01)
 
-### New Feature
+### New Features
 
 -   Add `isRTL` function ([#20298](https://github.com/WordPress/gutenberg/pull/20298))
 
@@ -114,13 +218,13 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.2.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -130,6 +234,6 @@
 
 ## 1.1.1 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/i18n/README.md b/packages/i18n/README.md
index dd18cc7cae0a9d..128b05c7c20299 100644
--- a/packages/i18n/README.md
+++ b/packages/i18n/README.md
@@ -79,10 +79,7 @@ _Returns_
 
 Check if current locale is RTL.
 
-**RTL (Right To Left)** is a locale property indicating that text is written from right to left.
-For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (ar) is another common
-language written RTL. The opposite of RTL, LTR (Left To Right) is used in other languages,
-including English (`en`, `en-US`, `en-GB`, etc.), Spanish (`es`), and French (`fr`).
+**RTL (Right To Left)** is a locale property indicating that text is written from right to left. For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (ar) is another common language written RTL. The opposite of RTL, LTR (Left To Right) is used in other languages, including English (`en`, `en-US`, `en-GB`, etc.), Spanish (`es`), and French (`fr`).
 
 _Returns_
 
@@ -90,8 +87,7 @@ _Returns_
 
 ### resetLocaleData
 
-Resets all current Tannin instance locale data and sets the specified
-locale data for the domain. Accepts data in a Jed-formatted JSON object shape.
+Resets all current Tannin instance locale data and sets the specified locale data for the domain. Accepts data in a Jed-formatted JSON object shape.
 
 _Related_
 
@@ -104,8 +100,7 @@ _Parameters_
 
 ### setLocaleData
 
-Merges locale data into the Tannin instance by domain. Accepts data in a
-Jed-formatted JSON object shape.
+Merges locale data into the Tannin instance by domain. Accepts data in a Jed-formatted JSON object shape.
 
 _Related_
 
@@ -118,8 +113,7 @@ _Parameters_
 
 ### sprintf
 
-Returns a formatted string. If an error occurs in applying the format, the
-original format string is returned.
+Returns a formatted string. If an error occurs in applying the format, the original format string is returned.
 
 _Related_
 
@@ -148,8 +142,7 @@ _Returns_
 
 ### \_n
 
-Translates and retrieves the singular or plural form based on the supplied
-number.
+Translates and retrieves the singular or plural form based on the supplied number.
 
 _Related_
 
@@ -168,8 +161,7 @@ _Returns_
 
 ### \_nx
 
-Translates and retrieves the singular or plural form based on the supplied
-number, with gettext context.
+Translates and retrieves the singular or plural form based on the supplied number, with gettext context.
 
 _Related_
 
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index a08194615c74c7..71f6ea646a93af 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,20 +19,22 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"bin": {
 		"pot-to-php": "./tools/pot-to-php.js"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/hooks": "file:../hooks",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/hooks": "*",
 		"gettext-parser": "^1.3.1",
-		"memize": "^1.1.0",
+		"memize": "^2.1.0",
 		"sprintf-js": "^1.1.1",
 		"tannin": "^1.2.0"
 	},
diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json
index 9d3c2f54d7b7e6..f90e327f124d7e 100644
--- a/packages/i18n/tsconfig.json
+++ b/packages/i18n/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/icons/.npmrc b/packages/icons/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/icons/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 46c5dd1b5f4c2c..84263e1135ac4d 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,150 @@
 
 ## Unreleased
 
+## 10.13.0 (2024-11-27)
+
+## 10.12.0 (2024-11-16)
+
+## 10.11.0 (2024-10-30)
+
+## 10.10.0 (2024-10-16)
+
+### Enhancements
+
+-   Update `cloudUpload` icon to improve visibility of the up arrow.
+
+### New Features
+
+-   Add new `cloudDownload` icon.
+-   Update `unseen` icon to be a strike-through eye, rather than a closed eye, to match provide consistency. ([#65914](https://github.com/WordPress/gutenberg/pull/65914)).
+
+## 10.9.0 (2024-10-03)
+
+## 10.8.0 (2024-09-19)
+
+### New Features
+
+-   Add new `envelope` icon.
+
+-   Add new `bell` and `bell-unread` icons.
+-   Add new `arrowUpLeft` and `arrowDownRight` icons.
+
+## 10.7.0 (2024-09-05)
+
+## 10.6.0 (2024-08-21)
+
+## 10.5.0 (2024-08-07)
+
+### New Features
+
+-   Add new `send` icon.
+
+## 10.4.0 (2024-07-24)
+
+## 10.3.0 (2024-07-10)
+
+## 10.2.0 (2024-06-26)
+
+## 10.1.0 (2024-06-15)
+
+## 10.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 9.49.0 (2024-05-16)
+
+## 9.48.0 (2024-05-02)
+
+## 9.47.0 (2024-04-19)
+
+## 9.46.0 (2024-04-03)
+
+-   Add new `chevronDownSmall` icon.
+
+## 9.45.0 (2024-03-21)
+
+## 9.44.0 (2024-03-06)
+
+## 9.43.0 (2024-02-21)
+
+## 9.42.0 (2024-02-09)
+
+## 9.41.0 (2024-01-24)
+
+## 9.40.0 (2024-01-10)
+
+## 9.39.0 (2023-12-13)
+
+## 9.38.0 (2023-11-29)
+
+## 9.37.0 (2023-11-16)
+
+### New Features
+
+-   Add new `funnel` icon.
+
+## 9.36.0 (2023-11-02)
+
+## 9.35.0 (2023-10-18)
+
+## 9.34.0 (2023-10-05)
+
+## 9.33.0 (2023-09-20)
+
+### Enhancements
+
+-   `<Icon>` now forwards ref to the underlying child component ([#54492](https://github.com/WordPress/gutenberg/pull/54492)).
+
+## 9.32.0 (2023-08-31)
+
+### Bug Fixes
+
+-   Fixed invalid XML namespace on `alignJustify`, `customLink`, `mapMarker`, `postContent` and `title` ([#53955](https://github.com/WordPress/gutenberg/pull/53955)).
+
+## 9.31.0 (2023-08-16)
+
+## 9.30.0 (2023-08-10)
+
+## 9.29.0 (2023-07-20)
+
+## 9.28.0 (2023-07-05)
+
+## 9.27.0 (2023-06-23)
+
+## 9.26.0 (2023-06-07)
+
+## 9.25.0 (2023-05-24)
+
+### New Features
+
+-   Add new `HeadingLevel` icons. ([#50856](https://github.com/WordPress/gutenberg/pull/50856))
+
+## 9.24.0 (2023-05-10)
+
+## 9.23.0 (2023-04-26)
+
+## 9.22.0 (2023-04-12)
+
+### New Features
+
+## 9.21.0 (2023-03-29)
+
+## 9.20.0 (2023-03-15)
+
+## 9.19.0 (2023-03-01)
+
+## 9.18.0 (2023-02-15)
+
+## 9.17.0 (2023-02-01)
+
+## 9.16.0 (2023-01-11)
+
+## 9.15.0 (2023-01-02)
+
+## 9.14.0 (2022-12-14)
+
 ## 9.13.0 (2022-11-16)
 
 ## 9.12.0 (2022-11-02)
@@ -31,14 +175,17 @@
 ## 9.0.0 (2022-05-18)
 
 ### Breaking Changes
+
 -   Removed icons no longer used by the UI: `commentTitle`, `postTitle`, `queryTitle`, `archiveTitle`.
 
-### Enhancement
+### Enhancements
+
 -   Update the `title` icon to match g2 design language. ([#40596](https://github.com/WordPress/gutenberg/pull/40596))
 
 ## 8.4.0 (2022-05-04)
 
 ## 8.3.0 (2022-04-21)
+
 ### New Features
 
 -   Add new `filter` icon. ([#40435](https://github.com/WordPress/gutenberg/pull/40435))
@@ -87,13 +234,13 @@
 
 ## 6.0.0 (2021-10-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Removed the `minus` icon, which was only used once in the block editor, in favor of the new `reset` icon which offers a more refined vector.
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -116,17 +263,17 @@
 
 ## 2.0.0 (2020-05-14)
 
-### Breaking change
+### Breaking Changes
 
 -   `star` icon removed as it is duplicative of `star-filled`. ([#21825](https://github.com/WordPress/gutenberg/pull/21825))
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#21781](https://github.com/WordPress/gutenberg/pull/21781))
 
 ## 1.3.1 (2020-04-15)
 
-### Bug Fix
+### Bug Fixes
 
 -   Hide TypeScript type declarations ([#21613](https://github.com/WordPress/gutenberg/pull/21613))
     after they were found to conflict with DefinitelyTyped provided declarations.
diff --git a/packages/icons/README.md b/packages/icons/README.md
index 3c692db7539e16..db4764cfa92b20 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -26,6 +26,10 @@ import { Icon, check } from '@wordpress/icons';
 | ------ | --------- | ------- | ----------------------- |
 | `size` | `integer` | `24`    | Size of icon in pixels. |
 
+## Docs & Examples
+
+You can browse the icons docs and examples at [https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--default](https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--default)
+
 ## 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.
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 292df4089a286c..fb00a4b8d27e8b 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "9.13.0",
+	"version": "10.13.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -16,21 +16,23 @@
 		"url": "git+https://github.com/WordPress/gutenberg.git",
 		"directory": "packages/icons"
 	},
-	"sideEffects": false,
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
+	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/element": "file:../element",
-		"@wordpress/primitives": "file:../primitives"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/element": "*",
+		"@wordpress/primitives": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/icons/src/icon/index.js b/packages/icons/src/icon/index.js
index e8bd1477dcd025..c83a5179a41b8e 100644
--- a/packages/icons/src/icon/index.js
+++ b/packages/icons/src/icon/index.js
@@ -1,25 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { cloneElement } from '@wordpress/element';
+import { cloneElement, forwardRef } from '@wordpress/element';
 
 /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
 
 /**
  * Return an SVG icon.
  *
- * @param {IconProps} props icon is the SVG component to render
- *                          size is a number specifiying the icon size in pixels
- *                          Other props will be passed to wrapped SVG component
+ * @param {IconProps}                                 props icon is the SVG component to render
+ *                                                          size is a number specifiying the icon size in pixels
+ *                                                          Other props will be passed to wrapped SVG component
+ * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
  *
  * @return {JSX.Element}  Icon component
  */
-function Icon( { icon, size = 24, ...props } ) {
+function Icon( { icon, size = 24, ...props }, ref ) {
 	return cloneElement( icon, {
 		width: size,
 		height: size,
 		...props,
+		ref,
 	} );
 }
 
-export default Icon;
+export default forwardRef( Icon );
diff --git a/packages/icons/src/icon/stories/index.js b/packages/icons/src/icon/stories/index.js
deleted file mode 100644
index 8fda801f23884f..00000000000000
--- a/packages/icons/src/icon/stories/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, Fragment } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Icon from '../';
-import check from '../../library/check';
-import * as icons from '../../';
-
-const { Icon: _Icon, ...availableIcons } = icons;
-
-const meta = {
-	component: Icon,
-	title: 'Icons/Icon',
-	parameters: {
-		controls: { hideNoControlsWarning: true },
-	},
-};
-export default meta;
-
-export const Default = () => {
-	return (
-		<>
-			<div>
-				<h2>Dashicons (corrected viewport)</h2>
-
-				<Icon icon={ check } />
-				<Icon icon={ check } size={ 36 } />
-				<Icon icon={ check } size={ 48 } />
-			</div>
-			<div>
-				<h2>Material and Other</h2>
-
-				<Icon icon={ icons.paragraph } />
-				<Icon icon={ icons.paragraph } size={ 36 } />
-				<Icon icon={ icons.paragraph } size={ 48 } />
-			</div>
-		</>
-	);
-};
-
-const LibraryExample = () => {
-	const [ filter, setFilter ] = useState( '' );
-	const filteredIcons = filter.length
-		? Object.fromEntries(
-				Object.entries( availableIcons ).filter( ( [ name ] ) =>
-					name.includes( filter )
-				)
-		  )
-		: availableIcons;
-	return (
-		<div style={ { padding: 20 } }>
-			<label htmlFor="filter-icon" style={ { paddingRight: 10 } }>
-				Filter Icons
-			</label>
-			<input
-				// eslint-disable-next-line no-restricted-syntax
-				id="filter-icons"
-				type="search"
-				value={ filter }
-				placeholder="Icon name"
-				onChange={ ( event ) => setFilter( event.target.value ) }
-			/>
-			<div style={ { marginTop: 20 } }>
-				<div
-					style={ {
-						display: 'inline-grid',
-						alignItems: 'center',
-						gap: 4,
-						gridTemplateColumns: 'auto 24px 36px 48px',
-					} }
-				>
-					{ Object.entries( filteredIcons ).map(
-						( [ name, icon ] ) => {
-							return (
-								<Fragment key={ name }>
-									<strong>{ name }</strong>
-									<Icon icon={ icon } />
-									<Icon icon={ icon } size={ 36 } />
-									<Icon icon={ icon } size={ 48 } />
-								</Fragment>
-							);
-						}
-					) }
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export const Library = () => <LibraryExample />;
diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.js
new file mode 100644
index 00000000000000..8cbf65d9f259e9
--- /dev/null
+++ b/packages/icons/src/icon/stories/index.story.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '../';
+import check from '../../library/check';
+import * as icons from '../../';
+import keywords from './keywords';
+
+const { Icon: _Icon, ...availableIcons } = icons;
+
+const meta = {
+	component: Icon,
+	title: 'Icons/Icon',
+	parameters: {
+		controls: { hideNoControlsWarning: true },
+	},
+};
+export default meta;
+
+export const Default = () => {
+	return (
+		<>
+			<div>
+				<h2>Dashicons (corrected viewport)</h2>
+
+				<Icon icon={ check } />
+				<Icon icon={ check } size={ 36 } />
+				<Icon icon={ check } size={ 48 } />
+			</div>
+			<div>
+				<h2>Material and Other</h2>
+
+				<Icon icon={ icons.paragraph } />
+				<Icon icon={ icons.paragraph } size={ 36 } />
+				<Icon icon={ icons.paragraph } size={ 48 } />
+			</div>
+		</>
+	);
+};
+
+const LibraryExample = () => {
+	const [ filter, setFilter ] = useState( '' );
+	const filteredIcons = filter.length
+		? Object.fromEntries(
+				Object.entries( availableIcons ).filter( ( [ name ] ) => {
+					const normalizedName = name.toLowerCase();
+					const normalizedFilter = filter.toLowerCase();
+
+					return (
+						normalizedName.includes( normalizedFilter ) ||
+						// @ts-expect-error - Not worth the effort to cast `name`
+						keywords[ name ]?.some( ( keyword ) =>
+							keyword.toLowerCase().includes( normalizedFilter )
+						)
+					);
+				} )
+		  )
+		: availableIcons;
+	return (
+		<div style={ { padding: 20 } }>
+			<label htmlFor="filter-icons" style={ { paddingRight: 10 } }>
+				Filter Icons
+			</label>
+			<input
+				// eslint-disable-next-line no-restricted-syntax
+				id="filter-icons"
+				type="search"
+				value={ filter }
+				placeholder="Icon name"
+				onChange={ ( event ) => setFilter( event.target.value ) }
+			/>
+			<div style={ { marginTop: 20 } }>
+				<div
+					style={ {
+						display: 'inline-grid',
+						alignItems: 'center',
+						gap: 4,
+						gridTemplateColumns: 'auto 24px 36px 48px',
+					} }
+				>
+					{ Object.entries( filteredIcons ).map(
+						( [ name, icon ] ) => {
+							return (
+								<Fragment key={ name }>
+									<strong>{ name }</strong>
+									<Icon icon={ icon } />
+									<Icon icon={ icon } size={ 36 } />
+									<Icon icon={ icon } size={ 48 } />
+								</Fragment>
+							);
+						}
+					) }
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const Library = () => <LibraryExample />;
diff --git a/packages/icons/src/icon/stories/keywords.ts b/packages/icons/src/icon/stories/keywords.ts
new file mode 100644
index 00000000000000..3fd962e047bc1d
--- /dev/null
+++ b/packages/icons/src/icon/stories/keywords.ts
@@ -0,0 +1,13 @@
+const keywords: Partial< Record< keyof typeof import('../../'), string[] > > = {
+	cancelCircleFilled: [ 'close' ],
+	create: [ 'add' ],
+	file: [ 'folder' ],
+	seen: [ 'show' ],
+	thumbsDown: [ 'dislike' ],
+	thumbsUp: [ 'like' ],
+	trash: [ 'delete' ],
+	unseen: [ 'hide' ],
+	warning: [ 'alert', 'caution' ],
+};
+
+export default keywords;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 5870ccba9ab043..14eaec92b78c4d 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -10,16 +10,22 @@ export { default as alignNone } from './library/align-none';
 export { default as alignRight } from './library/align-right';
 export { default as archive } from './library/archive';
 export { default as arrowDown } from './library/arrow-down';
+export { default as arrowDownRight } from './library/arrow-down-right';
 export { default as arrowLeft } from './library/arrow-left';
 export { default as arrowRight } from './library/arrow-right';
 export { default as arrowUp } from './library/arrow-up';
+export { default as arrowUpLeft } from './library/arrow-up-left';
 export { default as atSymbol } from './library/at-symbol';
 export { default as aspectRatio } from './library/aspect-ratio';
 export { default as audio } from './library/audio';
+export { default as background } from './library/background';
 export { default as backup } from './library/backup';
+export { default as bell } from './library/bell';
+export { default as bellUnread } from './library/bell-unread';
 export { default as blockDefault } from './library/block-default';
 export { default as blockMeta } from './library/block-meta';
 export { default as blockTable } from './library/block-table';
+export { default as border } from './library/border';
 export { default as box } from './library/box';
 export { default as brush } from './library/brush';
 export { default as bug } from './library/bug';
@@ -34,6 +40,7 @@ export { default as category } from './library/category';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
 export { default as chevronDown } from './library/chevron-down';
+export { default as chevronDownSmall } from './library/chevron-down-small';
 export { default as chevronLeft } from './library/chevron-left';
 export { default as chevronLeftSmall } from './library/chevron-left-small';
 export { default as chevronRight } from './library/chevron-right';
@@ -43,6 +50,7 @@ export { default as chevronUpDown } from './library/chevron-up-down';
 export { default as classic } from './library/classic';
 export { default as close } from './library/close';
 export { default as closeSmall } from './library/close-small';
+export { default as cloudDownload } from './library/cloud-download';
 export { default as cloudUpload } from './library/cloud-upload';
 export { default as cloud } from './library/cloud';
 export { default as code } from './library/code';
@@ -51,12 +59,14 @@ export { default as color } from './library/color';
 export { default as column } from './library/column';
 export { default as columns } from './library/columns';
 export { default as copy } from './library/copy';
+export { default as copySmall } from './library/copy-small';
 export { default as comment } from './library/comment';
 export { default as commentAuthorAvatar } from './library/comment-author-avatar';
 export { default as commentAuthorName } from './library/comment-author-name';
 export { default as commentContent } from './library/comment-content';
 export { default as commentReplyLink } from './library/comment-reply-link';
 export { default as commentEditLink } from './library/comment-edit-link';
+export { default as connection } from './library/connection';
 export { default as cover } from './library/cover';
 export { default as create } from './library/create';
 export { default as crop } from './library/crop';
@@ -65,11 +75,14 @@ export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as customPostType } from './library/custom-post-type';
 export { default as desktop } from './library/desktop';
+export { default as details } from './library/details';
+export { default as drafts } from './library/drafts';
 export { default as dragHandle } from './library/drag-handle';
 export { default as drawerLeft } from './library/drawer-left';
 export { default as drawerRight } from './library/drawer-right';
 export { default as download } from './library/download';
 export { default as edit } from './library/edit';
+export { default as envelope } from './library/envelope';
 export { default as external } from './library/external';
 export { default as file } from './library/file';
 export { default as filter } from './library/filter';
@@ -93,30 +106,47 @@ export { default as formatStrikethrough } from './library/format-strikethrough';
 export { default as formatUnderline } from './library/format-underline';
 export { default as formatUppercase } from './library/format-uppercase';
 export { default as fullscreen } from './library/fullscreen';
+export { default as funnel } from './library/funnel';
 export { default as gallery } from './library/gallery';
 export { default as globe } from './library/globe';
 export { default as grid } from './library/grid';
 export { default as group } from './library/group';
 export { default as handle } from './library/handle';
+export { default as headingLevel1 } from './library/heading-level-1';
+export { default as headingLevel2 } from './library/heading-level-2';
+export { default as headingLevel3 } from './library/heading-level-3';
+export { default as headingLevel4 } from './library/heading-level-4';
+export { default as headingLevel5 } from './library/heading-level-5';
+export { default as headingLevel6 } from './library/heading-level-6';
 export { default as heading } from './library/heading';
 export { default as help } from './library/help';
 export { default as helpFilled } from './library/help-filled';
 export { default as inbox } from './library/inbox';
 export { default as institution } from './library/institution';
 export { default as home } from './library/home';
+export { default as homeButton } from './library/home-button';
 export { default as html } from './library/html';
 export { default as image } from './library/image';
 export { default as info } from './library/info';
 export { default as insertAfter } from './library/insert-after';
 export { default as insertBefore } from './library/insert-before';
+export { default as justifyBottom } from './library/justify-bottom';
 export { default as justifyLeft } from './library/justify-left';
 export { default as justifyCenter } from './library/justify-center';
+export { default as justifyCenterVertical } from './library/justify-center-vertical';
 export { default as justifyRight } from './library/justify-right';
 export { default as justifySpaceBetween } from './library/justify-space-between';
+export { default as justifySpaceBetweenVertical } from './library/justify-space-between-vertical';
+export { default as justifyStretch } from './library/justify-stretch';
+export { default as justifyStretchVertical } from './library/justify-stretch-vertical';
+export { default as justifyTop } from './library/justify-top';
 export { default as key } from './library/key';
+export { default as keyboard } from './library/keyboard';
 export { default as keyboardClose } from './library/keyboard-close';
 export { default as keyboardReturn } from './library/keyboard-return';
+export { default as language } from './library/language';
 export { default as layout } from './library/layout';
+export { default as levelUp } from './library/level-up';
 export { default as lifesaver } from './library/lifesaver';
 export { default as lineDashed } from './library/line-dashed';
 export { default as lineDotted } from './library/line-dotted';
@@ -128,6 +158,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';
@@ -142,6 +173,7 @@ export { default as moreHorizontalMobile } from './library/more-horizontal-mobil
 export { default as moreVertical } from './library/more-vertical';
 export { default as moveTo } from './library/move-to';
 export { default as navigation } from './library/navigation';
+export { default as notAllowed } from './library/not-allowed';
 export { default as notFound } from './library/not-found';
 export { default as overlayText } from './library/overlay-text';
 export { default as pageBreak } from './library/page-break';
@@ -150,6 +182,7 @@ export { default as page } from './library/page';
 export { default as pages } from './library/pages';
 export { default as paragraph } from './library/paragraph';
 export { default as payment } from './library/payment';
+export { default as pending } from './library/pending';
 export { default as percent } from './library/percent';
 export { default as positionCenter } from './library/position-center';
 export { default as positionLeft } from './library/position-left';
@@ -157,6 +190,7 @@ export { default as positionRight } from './library/position-right';
 export { default as pencil } from './library/pencil';
 export { default as people } from './library/people';
 export { default as pin } from './library/pin';
+export { default as pinSmall } from './library/pin-small';
 export { default as plugins } from './library/plugins';
 export { default as plusCircleFilled } from './library/plus-circle-filled';
 export { default as plusCircle } from './library/plus-circle';
@@ -175,7 +209,9 @@ export { default as postList } from './library/post-list';
 export { default as postTerms } from './library/post-terms';
 export { default as previous } from './library/previous';
 export { default as next } from './library/next';
+export { default as offline } from './library/offline';
 export { default as preformatted } from './library/preformatted';
+export { default as published } from './library/published';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';
 export { default as pullquote } from './library/pullquote';
@@ -198,8 +234,13 @@ export { default as rotateLeft } from './library/rotate-left';
 export { default as rotateRight } from './library/rotate-right';
 export { default as rss } from './library/rss';
 export { default as search } from './library/search';
+export { default as seen } from './library/seen';
+export { default as unseen } from './library/unseen';
+export { default as scheduled } from './library/scheduled';
+export { default as send } from './library/send';
 export { default as separator } from './library/separator';
 export { default as settings } from './library/settings';
+export { default as shadow } from './library/shadow';
 export { default as share } from './library/share';
 export { default as shield } from './library/shield';
 export { default as shortcode } from './library/shortcode';
@@ -213,6 +254,7 @@ export { default as store } from './library/store';
 export { default as stretchFullWidth } from './library/stretch-full-width';
 export { default as styles } from './library/styles';
 export { default as shipping } from './library/shipping';
+export { default as square } from './library/square';
 export { default as stretchWide } from './library/stretch-wide';
 export { default as subscript } from './library/subscript';
 export { default as superscript } from './library/superscript';
@@ -220,17 +262,30 @@ export { default as swatch } from './library/swatch';
 export { default as tableColumnAfter } from './library/table-column-after';
 export { default as tableColumnBefore } from './library/table-column-before';
 export { default as tableColumnDelete } from './library/table-column-delete';
+export { default as tableOfContents } from './library/table-of-contents';
 export { default as tableRowAfter } from './library/table-row-after';
 export { default as tableRowBefore } from './library/table-row-before';
 export { default as tableRowDelete } from './library/table-row-delete';
 export { default as table } from './library/table';
 export { default as tag } from './library/tag';
+export { default as thumbsDown } from './library/thumbs-down';
+export { default as thumbsUp } from './library/thumbs-up';
 export { default as symbolFilled } from './library/symbol-filled';
 export { default as termDescription } from './library/term-description';
 export { default as footer } from './library/footer';
 export { default as header } from './library/header';
 export { default as sidebar } from './library/sidebar';
+export { default as sidesAll } from './library/sides-all';
+export { default as sidesAxial } from './library/sides-axial';
+export { default as sidesBottom } from './library/sides-bottom';
+export { default as sidesHorizontal } from './library/sides-horizontal';
+export { default as sidesLeft } from './library/sides-left';
+export { default as sidesRight } from './library/sides-right';
+export { default as sidesTop } from './library/sides-top';
+export { default as sidesVertical } from './library/sides-vertical';
 export { default as textColor } from './library/text-color';
+export { default as textHorizontal } from './library/text-horizontal';
+export { default as textVertical } from './library/text-vertical';
 export { default as tablet } from './library/tablet';
 export { default as title } from './library/title';
 export { default as tip } from './library/tip';
diff --git a/packages/icons/src/library/align-center.js b/packages/icons/src/library/align-center.js
index 7e6f3ad7d7195e..1b3408b1982efd 100644
--- a/packages/icons/src/library/align-center.js
+++ b/packages/icons/src/library/align-center.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const alignCenter = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z" />
+		<Path d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/align-justify.js b/packages/icons/src/library/align-justify.js
index 9fee191c0a71e2..f79a8bf06d5b2f 100644
--- a/packages/icons/src/library/align-justify.js
+++ b/packages/icons/src/library/align-justify.js
@@ -4,7 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const alignJustify = (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M4 12.8h16v-1.5H4v1.5zm0 7h12.4v-1.5H4v1.5zM4 4.3v1.5h16V4.3H4z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/align-left.js b/packages/icons/src/library/align-left.js
index 152a2c2bd96f5a..ef597eb019aee1 100644
--- a/packages/icons/src/library/align-left.js
+++ b/packages/icons/src/library/align-left.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const alignLeft = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z" />
+		<Path d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/align-none.js b/packages/icons/src/library/align-none.js
index 0948cd8d943000..2c29275123317f 100644
--- a/packages/icons/src/library/align-none.js
+++ b/packages/icons/src/library/align-none.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const alignNone = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M5 15h14V9H5v6zm0 4.8h14v-1.5H5v1.5zM5 4.2v1.5h14V4.2H5z" />
+		<Path d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/align-right.js b/packages/icons/src/library/align-right.js
index 4d0f60f37309f6..2daff79001f327 100644
--- a/packages/icons/src/library/align-right.js
+++ b/packages/icons/src/library/align-right.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const alignRight = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z" />
+		<Path d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/archive.js b/packages/icons/src/library/archive.js
index d63516f7286251..f8429667408cb7 100644
--- a/packages/icons/src/library/archive.js
+++ b/packages/icons/src/library/archive.js
@@ -5,7 +5,11 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const archive = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M19 6.2h-5.9l-.6-1.1c-.3-.7-1-1.1-1.8-1.1H5c-1.1 0-2 .9-2 2v11.8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8.2c0-1.1-.9-2-2-2zm.5 11.6c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h5.8c.2 0 .4.1.4.3l1 2H19c.3 0 .5.2.5.5v9.5zM8 12.8h8v-1.5H8v1.5zm0 3h8v-1.5H8v1.5z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M11.934 7.406a1 1 0 0 0 .914.594H19a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h5.764a.5.5 0 0 1 .447.276l.723 1.63Zm1.064-1.216a.5.5 0 0 0 .462.31H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.764a2 2 0 0 1 1.789 1.106l.445 1.084ZM8.5 10.5h7V12h-7v-1.5Zm7 3.5h-7v1.5h7V14Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/arrow-down-right.js b/packages/icons/src/library/arrow-down-right.js
new file mode 100644
index 00000000000000..3755b63873cefc
--- /dev/null
+++ b/packages/icons/src/library/arrow-down-right.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowDownRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M10 18h8v-8h-1.5v5.5L7 6 6 7l9.5 9.5H10V18Z" />
+	</SVG>
+);
+
+export default arrowDownRight;
diff --git a/packages/icons/src/library/arrow-up-left.js b/packages/icons/src/library/arrow-up-left.js
new file mode 100644
index 00000000000000..1b3686f6ec1e62
--- /dev/null
+++ b/packages/icons/src/library/arrow-up-left.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowUpLeft = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M14 6H6v8h1.5V8.5L17 18l1-1-9.5-9.5H14V6Z" />
+	</SVG>
+);
+
+export default arrowUpLeft;
diff --git a/packages/icons/src/library/background.js b/packages/icons/src/library/background.js
new file mode 100644
index 00000000000000..173b609354380d
--- /dev/null
+++ b/packages/icons/src/library/background.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const background = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M11.53 4.47a.75.75 0 1 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm5 1a.75.75 0 1 0-1.06 1.06l2 2a.75.75 0 1 0 1.06-1.06l-2-2Zm-11.06 10a.75.75 0 0 1 1.06 0l2 2a.75.75 0 1 1-1.06 1.06l-2-2a.75.75 0 0 1 0-1.06Zm.06-5a.75.75 0 0 0-1.06 1.06l8 8a.75.75 0 1 0 1.06-1.06l-8-8Zm-.06-3a.75.75 0 0 1 1.06 0l10 10a.75.75 0 1 1-1.06 1.06l-10-10a.75.75 0 0 1 0-1.06Zm3.06-2a.75.75 0 0 0-1.06 1.06l10 10a.75.75 0 1 0 1.06-1.06l-10-10Z"
+		/>
+	</SVG>
+);
+
+export default background;
diff --git a/packages/icons/src/library/bell-unread.js b/packages/icons/src/library/bell-unread.js
new file mode 100644
index 00000000000000..96c209ddb09f6d
--- /dev/null
+++ b/packages/icons/src/library/bell-unread.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, Circle } from '@wordpress/primitives';
+
+const bellUnread = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M13.969 4.39A5.088 5.088 0 0 0 12 4C9.2 4 7 6.2 7 9v2.5c0 1.353-.17 2.368-.976 3-.267.209-.602.376-1.024.5v1h14v-1c-.422-.124-.757-.291-1.024-.5-.806-.632-.976-1.647-.976-3V11c-.53 0-1.037-.103-1.5-.29v.79c0 .93.066 1.98.515 2.897l.053.103H7.932l.053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5.43 0 .838.072 1.214.206.167-.488.425-.933.755-1.316Zm-3.961 13.618c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20a1.991 1.991 0 0 1-1.992-1.992Z" />
+		<Circle cx="17" cy="7" r="2.5" />
+	</SVG>
+);
+
+export default bellUnread;
diff --git a/packages/icons/src/library/bell.js b/packages/icons/src/library/bell.js
new file mode 100644
index 00000000000000..910488ee3035a5
--- /dev/null
+++ b/packages/icons/src/library/bell.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const bell = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17 11.5c0 1.353.17 2.368.976 3 .266.209.602.376 1.024.5v1H5v-1c.422-.124.757-.291 1.024-.5.806-.632.976-1.647.976-3V9c0-2.8 2.2-5 5-5s5 2.2 5 5v2.5ZM15.5 9v2.5c0 .93.066 1.98.515 2.897l.053.103H7.932a4.018 4.018 0 0 0 .053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5s3.5 1.528 3.5 3.5Zm-5.492 9.008c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20c-1.1 0-1.992-.892-1.992-1.992Z"
+		/>
+	</SVG>
+);
+
+export default bell;
diff --git a/packages/icons/src/library/border.js b/packages/icons/src/library/border.js
new file mode 100644
index 00000000000000..2503d66e5786e3
--- /dev/null
+++ b/packages/icons/src/library/border.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const border = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="m6.6 15.6-1.2.8c.6.9 1.3 1.6 2.2 2.2l.8-1.2c-.7-.5-1.3-1.1-1.8-1.8zM5.5 12c0-.4 0-.9.1-1.3l-1.5-.3c0 .5-.1 1.1-.1 1.6s.1 1.1.2 1.6l1.5-.3c-.2-.4-.2-.9-.2-1.3zm11.9-3.6 1.2-.8c-.6-.9-1.3-1.6-2.2-2.2l-.8 1.2c.7.5 1.3 1.1 1.8 1.8zM5.3 7.6l1.2.8c.5-.7 1.1-1.3 1.8-1.8l-.7-1.3c-.9.6-1.7 1.4-2.3 2.3zm14.5 2.8-1.5.3c.1.4.1.8.1 1.3s0 .9-.1 1.3l1.5.3c.1-.5.2-1 .2-1.6s-.1-1.1-.2-1.6zM12 18.5c-.4 0-.9 0-1.3-.1l-.3 1.5c.5.1 1 .2 1.6.2s1.1-.1 1.6-.2l-.3-1.5c-.4.1-.9.1-1.3.1zm3.6-1.1.8 1.2c.9-.6 1.6-1.3 2.2-2.2l-1.2-.8c-.5.7-1.1 1.3-1.8 1.8zM10.4 4.2l.3 1.5c.4-.1.8-.1 1.3-.1s.9 0 1.3.1l.3-1.5c-.5-.1-1.1-.2-1.6-.2s-1.1.1-1.6.2z" />
+	</SVG>
+);
+
+export default border;
diff --git a/packages/icons/src/library/button.js b/packages/icons/src/library/button.js
index 9081993de98ddd..3565aac38cf190 100644
--- a/packages/icons/src/library/button.js
+++ b/packages/icons/src/library/button.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const button = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M19 6.5H5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2zm.5 9c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v7zM8 12.8h8v-1.5H8v1.5z" />
+		<Path d="M8 12.5h8V11H8v1.5Z M19 6.5H5a2 2 0 0 0-2 2V15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.5a2 2 0 0 0-2-2ZM5 8h14a.5.5 0 0 1 .5.5V15a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8.5A.5.5 0 0 1 5 8Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/buttons.js b/packages/icons/src/library/buttons.js
index 8fc5856efec1b7..bb6f59a7764c1d 100644
--- a/packages/icons/src/library/buttons.js
+++ b/packages/icons/src/library/buttons.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const buttons = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M17 3H7c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 6c0 .3-.2.5-.5.5H7c-.3 0-.5-.2-.5-.5V5c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v4zm-8-1.2h5V6.2h-5v1.6zM17 13H7c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zm.5 6c0 .3-.2.5-.5.5H7c-.3 0-.5-.2-.5-.5v-4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v4zm-8-1.2h5v-1.5h-5v1.5z" />
+		<Path d="M14.5 17.5H9.5V16H14.5V17.5Z M14.5 8H9.5V6.5H14.5V8Z M7 3.5H17C18.1046 3.5 19 4.39543 19 5.5V9C19 10.1046 18.1046 11 17 11H7C5.89543 11 5 10.1046 5 9V5.5C5 4.39543 5.89543 3.5 7 3.5ZM17 5H7C6.72386 5 6.5 5.22386 6.5 5.5V9C6.5 9.27614 6.72386 9.5 7 9.5H17C17.2761 9.5 17.5 9.27614 17.5 9V5.5C17.5 5.22386 17.2761 5 17 5Z M7 13H17C18.1046 13 19 13.8954 19 15V18.5C19 19.6046 18.1046 20.5 17 20.5H7C5.89543 20.5 5 19.6046 5 18.5V15C5 13.8954 5.89543 13 7 13ZM17 14.5H7C6.72386 14.5 6.5 14.7239 6.5 15V18.5C6.5 18.7761 6.72386 19 7 19H17C17.2761 19 17.5 18.7761 17.5 18.5V15C17.5 14.7239 17.2761 14.5 17 14.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/chevron-down-small.js b/packages/icons/src/library/chevron-down-small.js
new file mode 100644
index 00000000000000..f74ebbb90a90e2
--- /dev/null
+++ b/packages/icons/src/library/chevron-down-small.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const chevronDownSmall = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="m15.99 10.889-3.988 3.418-3.988-3.418.976-1.14 3.012 2.582 3.012-2.581.976 1.139Z" />
+	</SVG>
+);
+
+export default chevronDownSmall;
diff --git a/packages/icons/src/library/close.js b/packages/icons/src/library/close.js
index 35f0f9bfc71e6e..080a8826f8f8bb 100644
--- a/packages/icons/src/library/close.js
+++ b/packages/icons/src/library/close.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const close = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<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" />
+		<Path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/cloud-download.js b/packages/icons/src/library/cloud-download.js
new file mode 100644
index 00000000000000..ad24c7cbcd1436
--- /dev/null
+++ b/packages/icons/src/library/cloud-download.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const cloudDownload = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.3 10.1002C17.3 7.6002 15.2 5.7002 12.5 5.7002C10.3 5.7002 8.4 7.1002 7.9 9.0002H7.7C5.7 9.0002 4 10.7002 4 12.8002C4 14.9002 5.7 16.6002 7.7 16.6002V15.2002C6.5 15.2002 5.5 14.1002 5.5 12.9002C5.5 11.7002 6.5 10.5002 7.7 10.5002H9L9.3 9.4002C9.7 8.1002 11 7.2002 12.5 7.2002C14.3 7.2002 15.8 8.5002 15.8 10.1002V11.4002L17.1 11.6002C17.9 11.7002 18.5 12.5002 18.5 13.4002C18.5 14.4002 17.7 15.2002 16.8 15.2002H16.5V16.6002H16.7C18.5 16.6002 19.9 15.1002 19.9 13.3002C20 11.7002 18.8 10.4002 17.3 10.1002Z M9.8806 13.7576L8.81995 14.8182L12.0019 18.0002L15.1851 14.8171L14.1244 13.7564L12.7551 15.1257L12.7551 10.0002L11.2551 10.0002V15.1321L9.8806 13.7576Z" />
+	</SVG>
+);
+
+export default cloudDownload;
diff --git a/packages/icons/src/library/cloud-upload.js b/packages/icons/src/library/cloud-upload.js
index 1df5a19d8742de..d7ab407cf615d2 100644
--- a/packages/icons/src/library/cloud-upload.js
+++ b/packages/icons/src/library/cloud-upload.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const cloudUpload = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-4v-2.4L14 14l1-1-3-3-3 3 1 1 1.2-1.2v2.4H7.7c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4H9l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8 0 1-.8 1.8-1.7 1.8z" />
+		<Path d="M17.3 10.1C17.3 7.60001 15.2 5.70001 12.5 5.70001C10.3 5.70001 8.4 7.10001 7.9 9.00001H7.7C5.7 9.00001 4 10.7 4 12.8C4 14.9 5.7 16.6 7.7 16.6H9.5V15.2H7.7C6.5 15.2 5.5 14.1 5.5 12.9C5.5 11.7 6.5 10.5 7.7 10.5H9L9.3 9.40001C9.7 8.10001 11 7.20001 12.5 7.20001C14.3 7.20001 15.8 8.50001 15.8 10.1V11.4L17.1 11.6C17.9 11.7 18.5 12.5 18.5 13.4C18.5 14.4 17.7 15.2 16.8 15.2H14.5V16.6H16.7C18.5 16.6 19.9 15.1 19.9 13.3C20 11.7 18.8 10.4 17.3 10.1Z M14.1245 14.2426L15.1852 13.182L12.0032 10L8.82007 13.1831L9.88072 14.2438L11.25 12.8745V18H12.75V12.8681L14.1245 14.2426Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/columns.js b/packages/icons/src/library/columns.js
index 994c32467f4724..0d6cd87779c0d3 100644
--- a/packages/icons/src/library/columns.js
+++ b/packages/icons/src/library/columns.js
@@ -5,7 +5,11 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const columns = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M19 6H6c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-4.1 1.5v10H10v-10h4.9zM5.5 17V8c0-.3.2-.5.5-.5h2.5v10H6c-.3 0-.5-.2-.5-.5zm14 0c0 .3-.2.5-.5.5h-2.6v-10H19c.3 0 .5.2.5.5v9z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15 7.5h-5v10h5v-10Zm1.5 0v10H19a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5h-2.5ZM6 7.5h2.5v10H6a.5.5 0 0 1-.5-.5V8a.5.5 0 0 1 .5-.5ZM6 6h13a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.js
new file mode 100644
index 00000000000000..482bb8a43dabb8
--- /dev/null
+++ b/packages/icons/src/library/connection.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const connection = (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		fillRule="evenodd"
+	>
+		<Path d="M19.53 4.47a.75.75 0 0 1 0 1.06L17.06 8l.77.769a3.155 3.155 0 0 1 .685 3.439 3.15 3.15 0 0 1-.685 1.022v.001L13.23 17.83v.001a3.15 3.15 0 0 1-4.462 0L8 17.06l-2.47 2.47a.75.75 0 0 1-1.06-1.06L6.94 16l-.77-.769a3.154 3.154 0 0 1-.685-3.439 3.15 3.15 0 0 1 .685-1.023l4.599-4.598a3.152 3.152 0 0 1 4.462 0l.769.768 2.47-2.47a.75.75 0 0 1 1.06 0Zm-2.76 7.7L15 13.94 10.06 9l1.771-1.77a1.65 1.65 0 0 1 2.338 0L16.77 9.83a1.649 1.649 0 0 1 0 2.338h-.001ZM13.94 15 9 10.06l-1.77 1.771a1.65 1.65 0 0 0 0 2.338l2.601 2.602a1.649 1.649 0 0 0 2.338 0v-.001L13.94 15Z" />
+	</SVG>
+);
+
+export default connection;
diff --git a/packages/icons/src/library/copy-small.js b/packages/icons/src/library/copy-small.js
new file mode 100644
index 00000000000000..07f6bff15d59b3
--- /dev/null
+++ b/packages/icons/src/library/copy-small.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const copySmall = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5.625 5.5h9.75c.069 0 .125.056.125.125v9.75a.125.125 0 0 1-.125.125h-9.75a.125.125 0 0 1-.125-.125v-9.75c0-.069.056-.125.125-.125ZM4 5.625C4 4.728 4.728 4 5.625 4h9.75C16.273 4 17 4.728 17 5.625v9.75c0 .898-.727 1.625-1.625 1.625h-9.75A1.625 1.625 0 0 1 4 15.375v-9.75Zm14.5 11.656v-9H20v9C20 18.8 18.77 20 17.251 20H6.25v-1.5h11.001c.69 0 1.249-.528 1.249-1.219Z"
+		/>
+	</SVG>
+);
+
+export default copySmall;
diff --git a/packages/icons/src/library/copy.js b/packages/icons/src/library/copy.js
index 981865c13a327b..5c9e6c9704deb6 100644
--- a/packages/icons/src/library/copy.js
+++ b/packages/icons/src/library/copy.js
@@ -5,7 +5,11 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const copy = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/crop.js b/packages/icons/src/library/crop.js
index 0a293b24a5bde3..9f4a25f5f0d440 100644
--- a/packages/icons/src/library/crop.js
+++ b/packages/icons/src/library/crop.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const crop = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M16.5 7.8v7H18v-7c0-1-.8-1.8-1.8-1.8h-7v1.5h7c.2 0 .3.1.3.3zm-8.7 8.7c-.1 0-.2-.1-.2-.2V2H6v4H2v1.5h4v8.8c0 1 .8 1.8 1.8 1.8h8.8v4H18v-4h4v-1.5H7.8z" />
+		<Path d="M18 20v-2h2v-1.5H7.75a.25.25 0 0 1-.25-.25V4H6v2H4v1.5h2v8.75c0 .966.784 1.75 1.75 1.75h8.75v2H18ZM9.273 7.5h6.977a.25.25 0 0 1 .25.25v6.977H18V7.75A1.75 1.75 0 0 0 16.25 6H9.273v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/custom-link.js b/packages/icons/src/library/custom-link.js
index 27a5d24a71083e..b7aa7c309aaeb8 100644
--- a/packages/icons/src/library/custom-link.js
+++ b/packages/icons/src/library/custom-link.js
@@ -4,7 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const customLink = (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M12.5 14.5h-1V16h1c2.2 0 4-1.8 4-4s-1.8-4-4-4h-1v1.5h1c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5zm-4 1.5v-1.5h-1C6.1 14.5 5 13.4 5 12s1.1-2.5 2.5-2.5h1V8h-1c-2.2 0-4 1.8-4 4s1.8 4 4 4h1zm-1-3.2h5v-1.5h-5v1.5zM18 4H9c-1.1 0-2 .9-2 2v.5h1.5V6c0-.3.2-.5.5-.5h9c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H9c-.3 0-.5-.2-.5-.5v-.5H7v.5c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/details.js b/packages/icons/src/library/details.js
new file mode 100644
index 00000000000000..11d58356206483
--- /dev/null
+++ b/packages/icons/src/library/details.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const details = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M4 16h10v1.5H4V16Zm0-4.5h16V13H4v-1.5ZM10 7h10v1.5H10V7Z"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
+		<Path d="m4 5.25 4 2.5-4 2.5v-5Z" />
+	</SVG>
+);
+
+export default details;
diff --git a/packages/icons/src/library/drafts.js b/packages/icons/src/library/drafts.js
new file mode 100644
index 00000000000000..14e2c3a9345f1b
--- /dev/null
+++ b/packages/icons/src/library/drafts.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const drafts = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8 4a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4Z"
+		/>
+	</SVG>
+);
+
+export default drafts;
diff --git a/packages/icons/src/library/envelope.js b/packages/icons/src/library/envelope.js
new file mode 100644
index 00000000000000..45064b35785ec1
--- /dev/null
+++ b/packages/icons/src/library/envelope.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const envelope = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M3 7c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm2-.5h14c.3 0 .5.2.5.5v1L12 13.5 4.5 7.9V7c0-.3.2-.5.5-.5Zm-.5 3.3V17c0 .3.2.5.5.5h14c.3 0 .5-.2.5-.5V9.8L12 15.4 4.5 9.8Z"
+		/>
+	</SVG>
+);
+
+export default envelope;
diff --git a/packages/icons/src/library/external.js b/packages/icons/src/library/external.js
index 15168b6cb501d0..c5117a82275a20 100644
--- a/packages/icons/src/library/external.js
+++ b/packages/icons/src/library/external.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const external = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z" />
+		<Path d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/file.js b/packages/icons/src/library/file.js
index 3d87df413da1ba..6b7d29b3ae9239 100644
--- a/packages/icons/src/library/file.js
+++ b/packages/icons/src/library/file.js
@@ -5,7 +5,11 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const file = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M19 6.2h-5.9l-.6-1.1c-.3-.7-1-1.1-1.8-1.1H5c-1.1 0-2 .9-2 2v11.8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8.2c0-1.1-.9-2-2-2zm.5 11.6c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h5.8c.2 0 .4.1.4.3l1 2H19c.3 0 .5.2.5.5v9.5z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12.848 8a1 1 0 0 1-.914-.594l-.723-1.63a.5.5 0 0 0-.447-.276H5a.5.5 0 0 0-.5.5v11.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-9A.5.5 0 0 0 19 8h-6.152Zm.612-1.5a.5.5 0 0 1-.462-.31l-.445-1.084A2 2 0 0 0 10.763 4H5a2 2 0 0 0-2 2v11.5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5.54Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/fullscreen.js b/packages/icons/src/library/fullscreen.js
index 8b11ddcac72175..11bef7aebd612d 100644
--- a/packages/icons/src/library/fullscreen.js
+++ b/packages/icons/src/library/fullscreen.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const fullscreen = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4.2 9h1.5V5.8H9V4.2H4.2V9zm14 9.2H15v1.5h4.8V15h-1.5v3.2zM15 4.2v1.5h3.2V9h1.5V4.2H15zM5.8 15H4.2v4.8H9v-1.5H5.8V15z" />
+		<Path d="M6 4a2 2 0 0 0-2 2v3h1.5V6a.5.5 0 0 1 .5-.5h3V4H6Zm3 14.5H6a.5.5 0 0 1-.5-.5v-3H4v3a2 2 0 0 0 2 2h3v-1.5Zm6 1.5v-1.5h3a.5.5 0 0 0 .5-.5v-3H20v3a2 2 0 0 1-2 2h-3Zm3-16a2 2 0 0 1 2 2v3h-1.5V6a.5.5 0 0 0-.5-.5h-3V4h3Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/funnel.js b/packages/icons/src/library/funnel.js
new file mode 100644
index 00000000000000..87687dc7608db9
--- /dev/null
+++ b/packages/icons/src/library/funnel.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const funnel = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z" />
+	</SVG>
+);
+
+export default funnel;
diff --git a/packages/icons/src/library/gallery.js b/packages/icons/src/library/gallery.js
index 28cd6ed96a38c7..add65a5a4c681b 100644
--- a/packages/icons/src/library/gallery.js
+++ b/packages/icons/src/library/gallery.js
@@ -5,7 +5,11 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const gallery = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8h-1.5zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zM4.5 4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1V12l-2.3-1.7c-.3-.2-.6-.2-.9 0l-2.9 2.1L8 11.3c-.2-.1-.5-.1-.7 0l-2.9 1.5V4.6zm0 11.8v-1.8l3.2-1.7 2.4 1.2c.2.1.5.1.8-.1l2.8-2 2.8 2v2.5c0 .1-.1.1-.1.1H4.6c0-.1-.1-.2-.1-.2z" />
+		<Path
+			d="M16.375 4.5H4.625a.125.125 0 0 0-.125.125v8.254l2.859-1.54a.75.75 0 0 1 .68-.016l2.384 1.142 2.89-2.074a.75.75 0 0 1 .874 0l2.313 1.66V4.625a.125.125 0 0 0-.125-.125Zm.125 9.398-2.75-1.975-2.813 2.02a.75.75 0 0 1-.76.067l-2.444-1.17L4.5 14.583v1.792c0 .069.056.125.125.125h11.75a.125.125 0 0 0 .125-.125v-2.477ZM4.625 3C3.728 3 3 3.728 3 4.625v11.75C3 17.273 3.728 18 4.625 18h11.75c.898 0 1.625-.727 1.625-1.625V4.625C18 3.728 17.273 3 16.375 3H4.625ZM20 8v11c0 .69-.31 1-.999 1H6v1.5h13.001c1.52 0 2.499-.982 2.499-2.5V8H20Z"
+			fillRule="evenodd"
+			clipRule="evenodd"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/grid.js b/packages/icons/src/library/grid.js
index bdb3c4c31c64c2..6a5b386069f18c 100644
--- a/packages/icons/src/library/grid.js
+++ b/packages/icons/src/library/grid.js
@@ -6,7 +6,7 @@ import { SVG, Path } from '@wordpress/primitives';
 const grid = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path
-			d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7.8 16.5H5c-.3 0-.5-.2-.5-.5v-6.2h6.8v6.7zm0-8.3H4.5V5c0-.3.2-.5.5-.5h6.2v6.7zm8.3 7.8c0 .3-.2.5-.5.5h-6.2v-6.8h6.8V19zm0-7.8h-6.8V4.5H19c.3 0 .5.2.5.5v6.2z"
+			d="m3 5c0-1.10457.89543-2 2-2h13.5c1.1046 0 2 .89543 2 2v13.5c0 1.1046-.8954 2-2 2h-13.5c-1.10457 0-2-.8954-2-2zm2-.5h6v6.5h-6.5v-6c0-.27614.22386-.5.5-.5zm-.5 8v6c0 .2761.22386.5.5.5h6v-6.5zm8 0v6.5h6c.2761 0 .5-.2239.5-.5v-6zm0-8v6.5h6.5v-6c0-.27614-.2239-.5-.5-.5z"
 			fillRule="evenodd"
 			clipRule="evenodd"
 		/>
diff --git a/packages/icons/src/library/heading-level-1.js b/packages/icons/src/library/heading-level-1.js
new file mode 100644
index 00000000000000..4d2513e5b48d27
--- /dev/null
+++ b/packages/icons/src/library/heading-level-1.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel1 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.6 7c-.6.9-1.5 1.7-2.6 2v1h2v7h2V7h-1.4zM11 11H7V7H5v10h2v-4h4v4h2V7h-2v4z" />
+	</SVG>
+);
+
+export default headingLevel1;
diff --git a/packages/icons/src/library/heading-level-2.js b/packages/icons/src/library/heading-level-2.js
new file mode 100644
index 00000000000000..1ba541bd31396e
--- /dev/null
+++ b/packages/icons/src/library/heading-level-2.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel2 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 11.1H5v-4H3v10h2v-4h4v4h2v-10H9v4zm8 4c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6v1.5h8v-2H17z" />
+	</SVG>
+);
+
+export default headingLevel2;
diff --git a/packages/icons/src/library/heading-level-3.js b/packages/icons/src/library/heading-level-3.js
new file mode 100644
index 00000000000000..0f4a6a286e6396
--- /dev/null
+++ b/packages/icons/src/library/heading-level-3.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel3 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.3 1.7c-.4-.4-1-.7-1.6-.8v-.1c.6-.2 1.1-.5 1.5-.9.3-.4.5-.8.5-1.3 0-.4-.1-.8-.3-1.1-.2-.3-.5-.6-.8-.8-.4-.2-.8-.4-1.2-.5-.6-.1-1.1-.2-1.6-.2-.6 0-1.3.1-1.8.3s-1.1.5-1.6.9l1.2 1.4c.4-.2.7-.4 1.1-.6.3-.2.7-.3 1.1-.3.4 0 .8.1 1.1.3.3.2.4.5.4.8 0 .4-.2.7-.6.9-.7.3-1.5.5-2.2.4v1.6c.5 0 1 0 1.5.1.3.1.7.2 1 .3.2.1.4.2.5.4s.1.4.1.6c0 .3-.2.7-.5.8-.4.2-.9.3-1.4.3s-1-.1-1.4-.3c-.4-.2-.8-.4-1.2-.7L13 15.6c.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.6 0 1.1-.1 1.6-.2.4-.1.9-.2 1.3-.5.4-.2.7-.5.9-.9.2-.4.3-.8.3-1.2 0-.6-.3-1.1-.7-1.5z" />
+	</SVG>
+);
+
+export default headingLevel3;
diff --git a/packages/icons/src/library/heading-level-4.js b/packages/icons/src/library/heading-level-4.js
new file mode 100644
index 00000000000000..6aeab967aa7006
--- /dev/null
+++ b/packages/icons/src/library/heading-level-4.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel4 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20 13V7h-3l-4 6v2h5v2h2v-2h1v-2h-1zm-2 0h-2.8L18 9v4zm-9-2H5V7H3v10h2v-4h4v4h2V7H9v4z" />
+	</SVG>
+);
+
+export default headingLevel4;
diff --git a/packages/icons/src/library/heading-level-5.js b/packages/icons/src/library/heading-level-5.js
new file mode 100644
index 00000000000000..de7e5a4576c6a2
--- /dev/null
+++ b/packages/icons/src/library/heading-level-5.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel5 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.7 1.2c-.2-.3-.5-.7-.8-.9-.3-.3-.7-.5-1.1-.6-.5-.1-.9-.2-1.4-.2-.2 0-.5.1-.7.1-.2.1-.5.1-.7.2l.1-1.9h4.3V7H14l-.3 5 1 .6.5-.2.4-.1c.1-.1.3-.1.4-.1h.5c.5 0 1 .1 1.4.4.4.2.6.7.6 1.1 0 .4-.2.8-.6 1.1-.4.3-.9.4-1.4.4-.4 0-.9-.1-1.3-.3-.4-.2-.7-.4-1.1-.7 0 0-1.1 1.4-1 1.5.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.5 0 1-.1 1.5-.3s.9-.4 1.3-.7c.4-.3.7-.7.9-1.1s.3-.9.3-1.4-.1-1-.3-1.4z" />
+	</SVG>
+);
+
+export default headingLevel5;
diff --git a/packages/icons/src/library/heading-level-6.js b/packages/icons/src/library/heading-level-6.js
new file mode 100644
index 00000000000000..dbfada54434646
--- /dev/null
+++ b/packages/icons/src/library/heading-level-6.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const headingLevel6 = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20.7 12.4c-.2-.3-.4-.6-.7-.9s-.6-.5-1-.6c-.4-.2-.8-.2-1.2-.2-.5 0-.9.1-1.3.3s-.8.5-1.2.8c0-.5 0-.9.2-1.4l.6-.9c.2-.2.5-.4.8-.5.6-.2 1.3-.2 1.9 0 .3.1.6.3.8.5 0 0 1.3-1.3 1.3-1.4-.4-.3-.9-.6-1.4-.8-.6-.2-1.3-.3-2-.3-.6 0-1.1.1-1.7.4-.5.2-1 .5-1.4.9-.4.4-.8 1-1 1.6-.3.7-.4 1.5-.4 2.3s.1 1.5.3 2.1c.2.6.6 1.1 1 1.5.4.4.9.7 1.4.9 1 .3 2 .3 3 0 .4-.1.8-.3 1.2-.6.3-.3.6-.6.8-1 .2-.5.3-.9.3-1.4s-.1-.9-.3-1.3zm-2 2.1c-.1.2-.3.4-.4.5-.1.1-.3.2-.5.2-.2.1-.4.1-.6.1-.2.1-.5 0-.7-.1-.2 0-.3-.2-.5-.3-.1-.2-.3-.4-.4-.6-.2-.3-.3-.7-.3-1 .3-.3.6-.5 1-.7.3-.1.7-.2 1-.2.4 0 .8.1 1.1.3.3.3.4.7.4 1.1 0 .2 0 .5-.1.7zM9 11H5V7H3v10h2v-4h4v4h2V7H9v4z" />
+	</SVG>
+);
+
+export default headingLevel6;
diff --git a/packages/icons/src/library/heading.js b/packages/icons/src/library/heading.js
index 1b0d0b564d3d6b..2726fd74a7e88f 100644
--- a/packages/icons/src/library/heading.js
+++ b/packages/icons/src/library/heading.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const heading = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M6.2 5.2v13.4l5.8-4.8 5.8 4.8V5.2z" />
+		<Path d="M6 5V18.5911L12 13.8473L18 18.5911V5H6Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/home-button.js b/packages/icons/src/library/home-button.js
new file mode 100644
index 00000000000000..b952f46d725ff4
--- /dev/null
+++ b/packages/icons/src/library/home-button.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const homeButton = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M4.25 7A2.75 2.75 0 0 1 7 4.25h10A2.75 2.75 0 0 1 19.75 7v10A2.75 2.75 0 0 1 17 19.75H7A2.75 2.75 0 0 1 4.25 17V7ZM7 5.75c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25H7Z"
+		/>
+	</SVG>
+);
+
+export default homeButton;
diff --git a/packages/icons/src/library/justify-bottom.js b/packages/icons/src/library/justify-bottom.js
new file mode 100644
index 00000000000000..25923e39dcc862
--- /dev/null
+++ b/packages/icons/src/library/justify-bottom.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyBottom = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M15 4H9v11h6V4zM4 18.5V20h16v-1.5H4z" />
+	</SVG>
+);
+
+export default justifyBottom;
diff --git a/packages/icons/src/library/justify-center-vertical.js b/packages/icons/src/library/justify-center-vertical.js
new file mode 100644
index 00000000000000..e3ab16fdc5d619
--- /dev/null
+++ b/packages/icons/src/library/justify-center-vertical.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyCenterVertical = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
+	</SVG>
+);
+
+export default justifyCenterVertical;
diff --git a/packages/icons/src/library/justify-center.js b/packages/icons/src/library/justify-center.js
index e0b9e6645a40bb..9276be34f08e0d 100644
--- a/packages/icons/src/library/justify-center.js
+++ b/packages/icons/src/library/justify-center.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const justifyCenter = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20 9h-7.2V4h-1.6v5H4v6h7.2v5h1.6v-5H20z" />
+		<Path d="M12.5 15v5H11v-5H4V9h7V4h1.5v5h7v6h-7Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/justify-space-between-vertical.js b/packages/icons/src/library/justify-space-between-vertical.js
new file mode 100644
index 00000000000000..21a03134a4eb83
--- /dev/null
+++ b/packages/icons/src/library/justify-space-between-vertical.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifySpaceBetweenVertical = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 4H17V8L7 8V4ZM7 16L17 16V20L7 20V16ZM20 11.25H4V12.75H20V11.25Z" />
+	</SVG>
+);
+
+export default justifySpaceBetweenVertical;
diff --git a/packages/icons/src/library/justify-stretch-vertical.js b/packages/icons/src/library/justify-stretch-vertical.js
new file mode 100644
index 00000000000000..29f976f4e717d3
--- /dev/null
+++ b/packages/icons/src/library/justify-stretch-vertical.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyStretchVertical = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 4L20 4L20 5.5L4 5.5L4 4ZM10 7L14 7L14 17L10 17L10 7ZM20 18.5L4 18.5L4 20L20 20L20 18.5Z" />
+	</SVG>
+);
+
+export default justifyStretchVertical;
diff --git a/packages/icons/src/library/justify-stretch.js b/packages/icons/src/library/justify-stretch.js
new file mode 100644
index 00000000000000..6ab1f4921fa92e
--- /dev/null
+++ b/packages/icons/src/library/justify-stretch.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyStretch = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 4H5.5V20H4V4ZM7 10L17 10V14L7 14V10ZM20 4H18.5V20H20V4Z" />
+	</SVG>
+);
+
+export default justifyStretch;
diff --git a/packages/icons/src/library/justify-top.js b/packages/icons/src/library/justify-top.js
new file mode 100644
index 00000000000000..03c90a242546e3
--- /dev/null
+++ b/packages/icons/src/library/justify-top.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const justifyTop = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
+	</SVG>
+);
+
+export default justifyTop;
diff --git a/packages/icons/src/library/keyboard-return.js b/packages/icons/src/library/keyboard-return.js
index dbced364bac4e4..d4a85e1f1a4982 100644
--- a/packages/icons/src/library/keyboard-return.js
+++ b/packages/icons/src/library/keyboard-return.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const keyboardReturn = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z" />
+	<SVG xmlns="http://www.w3.org/2000/svg">
+		<Path d="m6.734 16.106 2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.158 1.093-1.028-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/keyboard.js b/packages/icons/src/library/keyboard.js
new file mode 100644
index 00000000000000..658b0e2d7ff3e7
--- /dev/null
+++ b/packages/icons/src/library/keyboard.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const keyboard = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m16 15.5h-8v-1.5h8zm-7.5-2.5h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm-9-3h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2zm3 0h-2v-2h2z" />
+		<Path d="m18.5 6.5h-13a.5.5 0 0 0 -.5.5v9.5a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9.5a.5.5 0 0 0 -.5-.5zm-13-1.5h13a2 2 0 0 1 2 2v9.5a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2-2v-9.5a2 2 0 0 1 2-2z" />
+	</SVG>
+);
+
+export default keyboard;
diff --git a/packages/icons/src/library/language.js b/packages/icons/src/library/language.js
new file mode 100644
index 00000000000000..c1a6b929fb5deb
--- /dev/null
+++ b/packages/icons/src/library/language.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const language = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.5 10h-1.7l-3.7 10.5h1.7l.9-2.6h3.9l.9 2.6h1.7L17.5 10zm-2.2 6.3 1.4-4 1.4 4h-2.8zm-4.8-3.8c1.6-1.8 2.9-3.6 3.7-5.7H16V5.2h-5.8V3H8.8v2.2H3v1.5h9.6c-.7 1.6-1.8 3.1-3.1 4.6C8.6 10.2 7.8 9 7.2 8H5.6c.6 1.4 1.7 2.9 2.9 4.4l-2.4 2.4c-.3.4-.7.8-1.1 1.2l1 1 1.2-1.2c.8-.8 1.6-1.5 2.3-2.3.8.9 1.7 1.7 2.5 2.5l.6-1.5c-.7-.6-1.4-1.3-2.1-2z" />
+	</SVG>
+);
+
+export default language;
diff --git a/packages/icons/src/library/level-up.js b/packages/icons/src/library/level-up.js
new file mode 100644
index 00000000000000..69989b01b7f73f
--- /dev/null
+++ b/packages/icons/src/library/level-up.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const levelUp = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m13.53 8.47-1.06 1.06-2.72-2.72V12h-1.5V6.81L5.53 9.53 4.47 8.47 9 3.94l4.53 4.53Zm-1.802 7.968c1.307.697 3.235.812 5.772.812v1.5c-2.463 0-4.785-.085-6.478-.988a4.721 4.721 0 0 1-2.07-2.13C8.48 14.67 8.25 13.471 8.25 12h1.5c0 1.328.208 2.28.548 2.969.332.675.81 1.138 1.43 1.47Z" />
+	</SVG>
+);
+
+export default levelUp;
diff --git a/packages/icons/src/library/link-off.js b/packages/icons/src/library/link-off.js
index 0ba44b747753a3..ff03679aa3f5dd 100644
--- a/packages/icons/src/library/link-off.js
+++ b/packages/icons/src/library/link-off.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const linkOff = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M15.6 7.3h-.7l1.6-3.5-.9-.4-3.9 8.5H9v1.5h2l-1.3 2.8H8.4c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7H10V7.3H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H9l-1.4 3.2.9.4 5.7-12.5h1.4c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.9 0 5.2-2.3 5.2-5.2 0-2.9-2.4-5.2-5.2-5.2z" />
+		<Path d="M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/link.js b/packages/icons/src/library/link.js
index 48375903deb2c6..81ff6b82e48fc2 100644
--- a/packages/icons/src/library/link.js
+++ b/packages/icons/src/library/link.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const link = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
+		<Path d="M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/list-view.js b/packages/icons/src/library/list-view.js
index 3e31561ba655d6..9aa3c251d8138c 100644
--- a/packages/icons/src/library/list-view.js
+++ b/packages/icons/src/library/list-view.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const listView = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" />
+		<Path d="M3 6h11v1.5H3V6Zm3.5 5.5h11V13h-11v-1.5ZM21 17H10v1.5h11V17Z" />
 	</SVG>
 );
 
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;
diff --git a/packages/icons/src/library/map-marker.js b/packages/icons/src/library/map-marker.js
index f142d17d352af2..52fa68e9590c3a 100644
--- a/packages/icons/src/library/map-marker.js
+++ b/packages/icons/src/library/map-marker.js
@@ -4,7 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const mapMarker = (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M12 9c-.8 0-1.5.7-1.5 1.5S11.2 12 12 12s1.5-.7 1.5-1.5S12.8 9 12 9zm0-5c-3.6 0-6.5 2.8-6.5 6.2 0 .8.3 1.8.9 3.1.5 1.1 1.2 2.3 2 3.6.7 1 3 3.8 3.2 3.9l.4.5.4-.5c.2-.2 2.6-2.9 3.2-3.9.8-1.2 1.5-2.5 2-3.6.6-1.3.9-2.3.9-3.1C18.5 6.8 15.6 4 12 4zm4.3 8.7c-.5 1-1.1 2.2-1.9 3.4-.5.7-1.7 2.2-2.4 3-.7-.8-1.9-2.3-2.4-3-.8-1.2-1.4-2.3-1.9-3.3-.6-1.4-.7-2.2-.7-2.5 0-2.6 2.2-4.7 5-4.7s5 2.1 5 4.7c0 .2-.1 1-.7 2.4z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/media-and-text.js b/packages/icons/src/library/media-and-text.js
index 31bb37d9b41f28..dd65590e49412b 100644
--- a/packages/icons/src/library/media-and-text.js
+++ b/packages/icons/src/library/media-and-text.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const mediaAndText = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M3 18h8V6H3v12zM14 7.5V9h7V7.5h-7zm0 5.3h7v-1.5h-7v1.5zm0 3.7h7V15h-7v1.5z" />
+		<Path d="M3 6v11.5h8V6H3Zm11 3h7V7.5h-7V9Zm7 3.5h-7V11h7v1.5ZM14 16h7v-1.5h-7V16Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/media.js b/packages/icons/src/library/media.js
index 23b1b1f7ecd527..a3f5cad616469d 100644
--- a/packages/icons/src/library/media.js
+++ b/packages/icons/src/library/media.js
@@ -5,7 +5,12 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const media = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18.7 3H5.3C4 3 3 4 3 5.3v13.4C3 20 4 21 5.3 21h13.4c1.3 0 2.3-1 2.3-2.3V5.3C21 4 20 3 18.7 3zm.8 15.7c0 .4-.4.8-.8.8H5.3c-.4 0-.8-.4-.8-.8V5.3c0-.4.4-.8.8-.8h13.4c.4 0 .8.4.8.8v13.4zM10 15l5-3-5-3v6z" />
+		<Path d="m7 6.5 4 2.5-4 2.5z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="m5 3c-1.10457 0-2 .89543-2 2v14c0 1.1046.89543 2 2 2h14c1.1046 0 2-.8954 2-2v-14c0-1.10457-.8954-2-2-2zm14 1.5h-14c-.27614 0-.5.22386-.5.5v10.7072l3.62953-2.6465c.25108-.1831.58905-.1924.84981-.0234l2.92666 1.8969 3.5712-3.4719c.2911-.2831.7545-.2831 1.0456 0l2.9772 2.8945v-9.3568c0-.27614-.2239-.5-.5-.5zm-14.5 14.5v-1.4364l4.09643-2.987 2.99567 1.9417c.2936.1903.6798.1523.9307-.0917l3.4772-3.3806 3.4772 3.3806.0228-.0234v2.5968c0 .2761-.2239.5-.5.5h-14c-.27614 0-.5-.2239-.5-.5z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/not-allowed.js b/packages/icons/src/library/not-allowed.js
new file mode 100644
index 00000000000000..cafebb60b7c628
--- /dev/null
+++ b/packages/icons/src/library/not-allowed.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const notAllowed = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 18.5A6.5 6.5 0 0 1 6.93 7.931l9.139 9.138A6.473 6.473 0 0 1 12 18.5Zm5.123-2.498a6.5 6.5 0 0 0-9.124-9.124l9.124 9.124ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Z"
+		/>
+	</SVG>
+);
+
+export default notAllowed;
diff --git a/packages/icons/src/library/offline.js b/packages/icons/src/library/offline.js
new file mode 100644
index 00000000000000..698a42aa4badb9
--- /dev/null
+++ b/packages/icons/src/library/offline.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const offline = (
+	<SVG viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M1.36605 2.81332L2.30144 1.87332L13.5592 13.1867L12.6239 14.1267L7.92702 9.40666C6.74618 9.41999 5.57861 9.87999 4.68302 10.78L3.35623 9.44665C4.19874 8.60665 5.2071 8.03999 6.2818 7.75332L4.7958 6.25999C3.78744 6.67332 2.84542 7.29332 2.02944 8.11332L0.702656 6.77999C1.512 5.97332 2.42085 5.33332 3.3894 4.84665L1.36605 2.81332ZM15.2973 6.77999L13.9705 8.11332C12.3054 6.43999 10.1096 5.61332 7.92039 5.62666L6.20883 3.90665C9.41303 3.34665 12.8229 4.29332 15.2973 6.77999ZM10.1759 7.89332C11.0781 8.21332 11.9273 8.72665 12.6438 9.44665L12.1794 9.90665L10.1759 7.89332ZM6.00981 12.1133L8 14.1133L9.99018 12.1133C8.89558 11.0067 7.11105 11.0067 6.00981 12.1133Z" />
+	</SVG>
+);
+
+export default offline;
diff --git a/packages/icons/src/library/page-break.js b/packages/icons/src/library/page-break.js
index ef8a0a82869d15..a382b5d41bf452 100644
--- a/packages/icons/src/library/page-break.js
+++ b/packages/icons/src/library/page-break.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const pageBreak = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M7.8 6c0-.7.6-1.2 1.2-1.2h6c.7 0 1.2.6 1.2 1.2v3h1.5V6c0-1.5-1.2-2.8-2.8-2.8H9C7.5 3.2 6.2 4.5 6.2 6v3h1.5V6zm8.4 11c0 .7-.6 1.2-1.2 1.2H9c-.7 0-1.2-.6-1.2-1.2v-3H6.2v3c0 1.5 1.2 2.8 2.8 2.8h6c1.5 0 2.8-1.2 2.8-2.8v-3h-1.5v3zM4 11v1h16v-1H4z" />
+		<Path d="M17.5 9V6a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v3H8V6a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v3h1.5Zm0 6.5V18a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2v-2.5H8V18a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-2.5h1.5ZM4 13h16v-1.5H4V13Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/page.js b/packages/icons/src/library/page.js
index 9f5338f46aea2b..e2439254f14185 100644
--- a/packages/icons/src/library/page.js
+++ b/packages/icons/src/library/page.js
@@ -5,7 +5,8 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const page = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M7 5.5h10a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H7a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2zm-1 3.75H8v1.5h8v-1.5zM8 11h8v1.5H8V11zm6 3.25H8v1.5h6v-1.5z" />
+		<Path d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z" />
+		<Path d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/pages.js b/packages/icons/src/library/pages.js
index 7e7dff92cc71d6..d038b21f109c87 100644
--- a/packages/icons/src/library/pages.js
+++ b/packages/icons/src/library/pages.js
@@ -5,7 +5,9 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const pages = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M7 13.8h6v-1.5H7v1.5zM18 16V4c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2zM5.5 16V4c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5zM7 10.5h8V9H7v1.5zm0-3.3h8V5.8H7v1.4zM20.2 6v13c0 .7-.6 1.2-1.2 1.2H8v1.5h11c1.5 0 2.7-1.2 2.7-2.8V6h-1.5z" />
+		<Path d="M14.5 5.5h-7V7h7V5.5ZM7.5 9h7v1.5h-7V9Zm7 3.5h-7V14h7v-1.5Z" />
+		<Path d="M16 2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM6 3.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5Z" />
+		<Path d="M20 8v11c0 .69-.31 1-.999 1H6v1.5h13.001c1.52 0 2.499-.982 2.499-2.5V8H20Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/paragraph.js b/packages/icons/src/library/paragraph.js
index 50726acde42792..984a9fafc15d89 100644
--- a/packages/icons/src/library/paragraph.js
+++ b/packages/icons/src/library/paragraph.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const paragraph = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18.3 4H9.9v-.1l-.9.2c-2.3.4-4 2.4-4 4.8s1.7 4.4 4 4.8l.7.1V20h1.5V5.5h2.9V20h1.5V5.5h2.7V4z" />
+		<Path d="m9.99609 14v-.2251l.00391.0001v6.225h1.5v-14.5h2.5v14.5h1.5v-14.5h3v-1.5h-8.50391c-2.76142 0-5 2.23858-5 5 0 2.7614 2.23858 5 5 5z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/pencil.js b/packages/icons/src/library/pencil.js
index 8fcf7d08a8b8ed..616040692b4a35 100644
--- a/packages/icons/src/library/pencil.js
+++ b/packages/icons/src/library/pencil.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const pencil = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20.1 5.1L16.9 2 6.2 12.7l-1.3 4.4 4.5-1.3L20.1 5.1zM4 20.8h8v-1.5H4v1.5z" />
+		<Path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/pending.js b/packages/icons/src/library/pending.js
new file mode 100644
index 00000000000000..c1c7e326ebe3ef
--- /dev/null
+++ b/packages/icons/src/library/pending.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const pending = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8 4a4 4 0 0 1-4-4h4V8a4 4 0 0 1 0 8Z"
+		/>
+	</SVG>
+);
+
+export default pending;
diff --git a/packages/icons/src/library/pin-small.js b/packages/icons/src/library/pin-small.js
new file mode 100644
index 00000000000000..d479c27d77687a
--- /dev/null
+++ b/packages/icons/src/library/pin-small.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const pinSmall = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path d="M10.97 10.159a3.382 3.382 0 0 0-2.857.955l1.724 1.723-2.836 2.913L7 17h1.25l2.913-2.837 1.723 1.723a3.38 3.38 0 0 0 .606-.825c.33-.63.446-1.343.35-2.032L17 10.695 13.305 7l-2.334 3.159Z" />
+	</SVG>
+);
+
+export default pinSmall;
diff --git a/packages/icons/src/library/plus.js b/packages/icons/src/library/plus.js
index 591aee12b2dfd5..45f600c37c9c51 100644
--- a/packages/icons/src/library/plus.js
+++ b/packages/icons/src/library/plus.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const plus = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" />
+		<Path d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/position-center.js b/packages/icons/src/library/position-center.js
index 7c9686535ce65a..6730c90638780a 100644
--- a/packages/icons/src/library/position-center.js
+++ b/packages/icons/src/library/position-center.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const positionCenter = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M7 9v6h10V9H7zM5 19.8h14v-1.5H5v1.5zM5 4.3v1.5h14V4.3H5z" />
+		<Path d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/position-left.js b/packages/icons/src/library/position-left.js
index 5119fdf02acfc8..fff393d10637e2 100644
--- a/packages/icons/src/library/position-left.js
+++ b/packages/icons/src/library/position-left.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const positionLeft = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4 9v6h14V9H4zm8-4.8H4v1.5h8V4.2zM4 19.8h8v-1.5H4v1.5z" />
+		<Path d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/position-right.js b/packages/icons/src/library/position-right.js
index ba6af93107723a..eff1c853534f34 100644
--- a/packages/icons/src/library/position-right.js
+++ b/packages/icons/src/library/position-right.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const positionRight = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M6 15h14V9H6v6zm6-10.8v1.5h8V4.2h-8zm0 15.6h8v-1.5h-8v1.5z" />
+		<Path d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/post-content.js b/packages/icons/src/library/post-content.js
index fac55cf5f4e194..6047a5ad368f6b 100644
--- a/packages/icons/src/library/post-content.js
+++ b/packages/icons/src/library/post-content.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const postContent = (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 6h12V4.5H4V6Zm16 4.5H4V9h16v1.5ZM4 15h16v-1.5H4V15Zm0 4.5h16V18H4v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/post-excerpt.js b/packages/icons/src/library/post-excerpt.js
index 742e50d69240b3..f2f2b11f00695b 100644
--- a/packages/icons/src/library/post-excerpt.js
+++ b/packages/icons/src/library/post-excerpt.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const postExcerpt = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M12.75 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.395.395 0 00.199-.166c.05-.083.114-.253.114-.584V7.2H8.8V4h3.95v5.333zM7.95 9.333c0 .521-.102.977-.327 1.354-.23.386-.555.628-.893.774-.545.234-1.183.227-1.544.222l-.12-.001v-1.5h.123c.414.001.715.002.948-.099a.394.394 0 00.198-.166c.05-.083.115-.253.115-.584V7.2H4V4h3.95v5.333zM13 20H4v-1.5h9V20zM20 16H4v-1.5h16V16z" />
+		<Path d="M8.001 3.984V9.47c0 1.518-.98 2.5-2.499 2.5h-.5v-1.5h.5c.69 0 1-.31 1-1V6.984H4v-3h4.001ZM4 20h9v-1.5H4V20Zm16-4H4v-1.5h16V16ZM13.001 3.984V9.47c0 1.518-.98 2.5-2.499 2.5h-.5v-1.5h.5c.69 0 1-.31 1-1V6.984H9v-3h4.001Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/post-list.js b/packages/icons/src/library/post-list.js
index 7656d492d17fd0..32adce23053bcd 100644
--- a/packages/icons/src/library/post-list.js
+++ b/packages/icons/src/library/post-list.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const postList = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z" />
+		<Path d="M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/published.js b/packages/icons/src/library/published.js
new file mode 100644
index 00000000000000..c23745caca7459
--- /dev/null
+++ b/packages/icons/src/library/published.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const published = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm11.53-1.47-1.06-1.06L11 12.94l-1.47-1.47-1.06 1.06L11 15.06l4.53-4.53Z"
+		/>
+	</SVG>
+);
+
+export default published;
diff --git a/packages/icons/src/library/resize-corner-n-e.js b/packages/icons/src/library/resize-corner-n-e.js
index 387efc99fb00db..48cd2a7a3fa58c 100644
--- a/packages/icons/src/library/resize-corner-n-e.js
+++ b/packages/icons/src/library/resize-corner-n-e.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const resizeCornerNE = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M12.5 4.2v1.6h4.7L5.8 17.2V12H4.2v7.8H12v-1.6H6.8L18.2 6.8v4.7h1.6V4.2z" />
+		<Path d="M7 18h4.5v1.5h-7v-7H6V17L17 6h-4.5V4.5h7v7H18V7L7 18Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/row.js b/packages/icons/src/library/row.js
index 1387e8f51fb0fc..633c0b5eb874d9 100644
--- a/packages/icons/src/library/row.js
+++ b/packages/icons/src/library/row.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const row = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M9.2 6.5H4V8h5.2c.3 0 .5.2.5.5v7c0 .3-.2.5-.5.5H4v1.5h5.2c1.1 0 2-.9 2-2v-7c0-1.1-.8-2-2-2zM14.8 8H20V6.5h-5.2c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2H20V16h-5.2c-.3 0-.5-.2-.5-.5v-7c-.1-.3.2-.5.5-.5z" />
+		<Path d="M4 6.5h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4V16h5a.5.5 0 0 0 .5-.5v-7A.5.5 0 0 0 9 8H4V6.5Zm16 0h-5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5V16h-5a.5.5 0 0 1-.5-.5v-7A.5.5 0 0 1 15 8h5V6.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/scheduled.js b/packages/icons/src/library/scheduled.js
new file mode 100644
index 00000000000000..84c2f01546e6da
--- /dev/null
+++ b/packages/icons/src/library/scheduled.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const scheduled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm9 1V8h-1.5v3.5h-2V13H13Z"
+		/>
+	</SVG>
+);
+
+export default scheduled;
diff --git a/packages/icons/src/library/search.js b/packages/icons/src/library/search.js
index a28abf5fce1706..2dedd31e7e4c66 100644
--- a/packages/icons/src/library/search.js
+++ b/packages/icons/src/library/search.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const search = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" />
+		<Path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/seen.js b/packages/icons/src/library/seen.js
new file mode 100644
index 00000000000000..4bb328271f834e
--- /dev/null
+++ b/packages/icons/src/library/seen.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const seen = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M3.99961 13C4.67043 13.3354 4.6703 13.3357 4.67017 13.3359L4.67298 13.3305C4.67621 13.3242 4.68184 13.3135 4.68988 13.2985C4.70595 13.2686 4.7316 13.2218 4.76695 13.1608C4.8377 13.0385 4.94692 12.8592 5.09541 12.6419C5.39312 12.2062 5.84436 11.624 6.45435 11.0431C7.67308 9.88241 9.49719 8.75 11.9996 8.75C14.502 8.75 16.3261 9.88241 17.5449 11.0431C18.1549 11.624 18.6061 12.2062 18.9038 12.6419C19.0523 12.8592 19.1615 13.0385 19.2323 13.1608C19.2676 13.2218 19.2933 13.2686 19.3093 13.2985C19.3174 13.3135 19.323 13.3242 19.3262 13.3305L19.3291 13.3359C19.3289 13.3357 19.3288 13.3354 19.9996 13C20.6704 12.6646 20.6703 12.6643 20.6701 12.664L20.6697 12.6632L20.6688 12.6614L20.6662 12.6563L20.6583 12.6408C20.6517 12.6282 20.6427 12.6108 20.631 12.5892C20.6078 12.5459 20.5744 12.4852 20.5306 12.4096C20.4432 12.2584 20.3141 12.0471 20.1423 11.7956C19.7994 11.2938 19.2819 10.626 18.5794 9.9569C17.1731 8.61759 14.9972 7.25 11.9996 7.25C9.00203 7.25 6.82614 8.61759 5.41987 9.9569C4.71736 10.626 4.19984 11.2938 3.85694 11.7956C3.68511 12.0471 3.55605 12.2584 3.4686 12.4096C3.42484 12.4852 3.39142 12.5459 3.36818 12.5892C3.35656 12.6108 3.34748 12.6282 3.34092 12.6408L3.33297 12.6563L3.33041 12.6614L3.32948 12.6632L3.32911 12.664C3.32894 12.6643 3.32879 12.6646 3.99961 13ZM11.9996 16C13.9326 16 15.4996 14.433 15.4996 12.5C15.4996 10.567 13.9326 9 11.9996 9C10.0666 9 8.49961 10.567 8.49961 12.5C8.49961 14.433 10.0666 16 11.9996 16Z" />
+	</SVG>
+);
+
+export default seen;
diff --git a/packages/icons/src/library/send.js b/packages/icons/src/library/send.js
new file mode 100644
index 00000000000000..3770d9a94bc7b7
--- /dev/null
+++ b/packages/icons/src/library/send.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const send = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M6.332 5.748c-1.03-.426-2.06.607-1.632 1.636l1.702 3.93 7.481.575c.123.01.123.19 0 .2l-7.483.575-1.7 3.909c-.429 1.029.602 2.062 1.632 1.636l12.265-5.076c1.03-.426 1.03-1.884 0-2.31L6.332 5.748Z"
+		/>
+	</SVG>
+);
+
+export default send;
diff --git a/packages/icons/src/library/separator.js b/packages/icons/src/library/separator.js
index 98805ca1814526..9e1b3334a88ba8 100644
--- a/packages/icons/src/library/separator.js
+++ b/packages/icons/src/library/separator.js
@@ -5,7 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const separator = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M20.2 7v4H3.8V7H2.2v9h1.6v-3.5h16.4V16h1.6V7z" />
+		<Path d="M4.5 12.5v4H3V7h1.5v3.987h15V7H21v9.5h-1.5v-4h-15Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/settings.js b/packages/icons/src/library/settings.js
index 31d6da68a71955..cc1593cf489d3e 100644
--- a/packages/icons/src/library/settings.js
+++ b/packages/icons/src/library/settings.js
@@ -5,7 +5,8 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const settings = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M14.5 13.8c-1.1 0-2.1.7-2.4 1.8H4V17h8.1c.3 1 1.3 1.8 2.4 1.8s2.1-.7 2.4-1.8H20v-1.5h-3.1c-.3-1-1.3-1.7-2.4-1.7zM11.9 7c-.3-1-1.3-1.8-2.4-1.8S7.4 6 7.1 7H4v1.5h3.1c.3 1 1.3 1.8 2.4 1.8s2.1-.7 2.4-1.8H20V7h-8.1z" />
+		<Path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" />
+		<Path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/shadow.js b/packages/icons/src/library/shadow.js
new file mode 100644
index 00000000000000..c6bb27c437e248
--- /dev/null
+++ b/packages/icons/src/library/shadow.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const shadow = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 6.5c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM12.8 3h-1.5v3h1.5V3zm-1.6 18h1.5v-3h-1.5v3zm6.8-9.8v1.5h3v-1.5h-3zm-12 0H3v1.5h3v-1.5zm9.7 5.6 2.1 2.1 1.1-1.1-2.1-2.1-1.1 1.1zM8.3 7.2 6.2 5.1 5.1 6.2l2.1 2.1 1.1-1.1zM5.1 17.8l1.1 1.1 2.1-2.1-1.1-1.1-2.1 2.1zM18.9 6.2l-1.1-1.1-2.1 2.1 1.1 1.1 2.1-2.1z" />
+	</SVG>
+);
+
+export default shadow;
diff --git a/packages/icons/src/library/sides-all.js b/packages/icons/src/library/sides-all.js
new file mode 100644
index 00000000000000..31717e244aadf9
--- /dev/null
+++ b/packages/icons/src/library/sides-all.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesAll = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" />
+	</SVG>
+);
+
+export default sidesAll;
diff --git a/packages/icons/src/library/sides-axial.js b/packages/icons/src/library/sides-axial.js
new file mode 100644
index 00000000000000..df8bbd808aef51
--- /dev/null
+++ b/packages/icons/src/library/sides-axial.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesAxial = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8.2 5.3h8V3.8h-8v1.5zm0 14.5h8v-1.5h-8v1.5zm3.5-6.5h1v-1h-1v1zm1-6.5h-1v.5h1v-.5zm-1 4.5h1v-1h-1v1zm0-2h1v-1h-1v1zm0 7.5h1v-.5h-1v.5zm1-2.5h-1v1h1v-1zm-8.5 1.5h1.5v-8H4.2v8zm14.5-8v8h1.5v-8h-1.5zm-5 4.5v-1h-1v1h1zm-6.5 0h.5v-1h-.5v1zm3.5-1v1h1v-1h-1zm6 1h.5v-1h-.5v1zm-8-1v1h1v-1h-1zm6 0v1h1v-1h-1z"
+		/>
+	</SVG>
+);
+
+export default sidesAxial;
diff --git a/packages/icons/src/library/sides-bottom.js b/packages/icons/src/library/sides-bottom.js
new file mode 100644
index 00000000000000..2029b28b6a83e8
--- /dev/null
+++ b/packages/icons/src/library/sides-bottom.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesBottom = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m16.5 19.5h-9v-1.5h9z" />
+	</SVG>
+);
+
+export default sidesBottom;
diff --git a/packages/icons/src/library/sides-horizontal.js b/packages/icons/src/library/sides-horizontal.js
new file mode 100644
index 00000000000000..05509ef8dc2b5e
--- /dev/null
+++ b/packages/icons/src/library/sides-horizontal.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesHorizontal = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m4.5 7.5v9h1.5v-9z" />
+		<Path d="m18 7.5v9h1.5v-9z" />
+	</SVG>
+);
+
+export default sidesHorizontal;
diff --git a/packages/icons/src/library/sides-left.js b/packages/icons/src/library/sides-left.js
new file mode 100644
index 00000000000000..39a917e7d05b04
--- /dev/null
+++ b/packages/icons/src/library/sides-left.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesLeft = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m4.5 16.5v-9h1.5v9z" />
+	</SVG>
+);
+
+export default sidesLeft;
diff --git a/packages/icons/src/library/sides-right.js b/packages/icons/src/library/sides-right.js
new file mode 100644
index 00000000000000..b21e0668aeb55d
--- /dev/null
+++ b/packages/icons/src/library/sides-right.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m18 16.5v-9h1.5v9z" />
+	</SVG>
+);
+
+export default sidesRight;
diff --git a/packages/icons/src/library/sides-top.js b/packages/icons/src/library/sides-top.js
new file mode 100644
index 00000000000000..f416a4c235f3b7
--- /dev/null
+++ b/packages/icons/src/library/sides-top.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesTop = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m16.5 6h-9v-1.5h9z" />
+	</SVG>
+);
+
+export default sidesTop;
diff --git a/packages/icons/src/library/sides-vertical.js b/packages/icons/src/library/sides-vertical.js
new file mode 100644
index 00000000000000..5352dffd4e50b3
--- /dev/null
+++ b/packages/icons/src/library/sides-vertical.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const sidesVertical = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z"
+			style={ { opacity: 0.25 } }
+		/>
+		<Path d="m7.5 6h9v-1.5h-9z" />
+		<Path d="m7.5 19.5h9v-1.5h-9z" />
+	</SVG>
+);
+
+export default sidesVertical;
diff --git a/packages/icons/src/library/square.js b/packages/icons/src/library/square.js
new file mode 100644
index 00000000000000..843a8d2d5261dd
--- /dev/null
+++ b/packages/icons/src/library/square.js
@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const square = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+		<Path
+			fill="none"
+			d="M5.75 12.75V18.25H11.25M12.75 5.75H18.25V11.25"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="square"
+		/>
+	</SVG>
+);
+
+export default square;
diff --git a/packages/icons/src/library/stack.js b/packages/icons/src/library/stack.js
index 19cbf860f97b98..6235c6aed0938c 100644
--- a/packages/icons/src/library/stack.js
+++ b/packages/icons/src/library/stack.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const stack = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M16 4v5.2c0 .3-.2.5-.5.5h-7c-.3.1-.5-.2-.5-.5V4H6.5v5.2c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V4H16zm-.5 8.8h-7c-1.1 0-2 .9-2 2V20H8v-5.2c0-.3.2-.5.5-.5h7c.3 0 .5.2.5.5V20h1.5v-5.2c0-1.2-.9-2-2-2z" />
+		<Path d="M17.5 4v5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V4H8v5a.5.5 0 0 0 .5.5h7A.5.5 0 0 0 16 9V4h1.5Zm0 16v-5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v5H8v-5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v5h1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/stretch-full-width.js b/packages/icons/src/library/stretch-full-width.js
index 3d6e37ff544d84..ee2c6393dcd222 100644
--- a/packages/icons/src/library/stretch-full-width.js
+++ b/packages/icons/src/library/stretch-full-width.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const stretchFullWidth = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M5 4v11h14V4H5zm3 15.8h8v-1.5H8v1.5z" />
+		<Path d="M5 4h14v11H5V4Zm11 16H8v-1.5h8V20Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/stretch-wide.js b/packages/icons/src/library/stretch-wide.js
index a9cf65fe001fff..c341d8718934b5 100644
--- a/packages/icons/src/library/stretch-wide.js
+++ b/packages/icons/src/library/stretch-wide.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const stretchWide = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M5 9v6h14V9H5zm11-4.8H8v1.5h8V4.2zM8 19.8h8v-1.5H8v1.5z" />
+		<Path d="M16 5.5H8V4h8v1.5ZM16 20H8v-1.5h8V20ZM5 9h14v6H5V9Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/styles.js b/packages/icons/src/library/styles.js
index c91683d55dce18..7d3568e43fd171 100644
--- a/packages/icons/src/library/styles.js
+++ b/packages/icons/src/library/styles.js
@@ -5,7 +5,11 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const styles = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 0 1-6.5 6.5v-13a6.5 6.5 0 0 1 6.5 6.5Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/table-of-contents.js b/packages/icons/src/library/table-of-contents.js
new file mode 100644
index 00000000000000..00e1ec1ab5801f
--- /dev/null
+++ b/packages/icons/src/library/table-of-contents.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const tableOfContents = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20 9.484h-8.889v-1.5H20v1.5Zm0 7h-4.889v-1.5H20v1.5Zm-14 .032a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+		/>
+		<Path d="M13 15.516a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 8.484a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+	</SVG>
+);
+
+export default tableOfContents;
diff --git a/packages/icons/src/library/tag.js b/packages/icons/src/library/tag.js
index 4054c59371c01f..9714f7366378bd 100644
--- a/packages/icons/src/library/tag.js
+++ b/packages/icons/src/library/tag.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const tag = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20.1 11.2l-6.7-6.7c-.1-.1-.3-.2-.5-.2H5c-.4-.1-.8.3-.8.7v7.8c0 .2.1.4.2.5l6.7 6.7c.2.2.5.4.7.5s.6.2.9.2c.3 0 .6-.1.9-.2.3-.1.5-.3.8-.5l5.6-5.6c.4-.4.7-1 .7-1.6.1-.6-.2-1.2-.6-1.6zM19 13.4L13.4 19c-.1.1-.2.1-.3.2-.2.1-.4.1-.6 0-.1 0-.2-.1-.3-.2l-6.5-6.5V5.8h6.8l6.5 6.5c.2.2.2.4.2.6 0 .1 0 .3-.2.5zM9 8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" />
+		<Path d="M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/text-horizontal.js b/packages/icons/src/library/text-horizontal.js
new file mode 100644
index 00000000000000..3f82ee1fba4cbd
--- /dev/null
+++ b/packages/icons/src/library/text-horizontal.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const textHorizontal = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M8.2 14.4h3.9L13 17h1.7L11 6.5H9.3L5.6 17h1.7l.9-2.6zm2-5.5 1.4 4H8.8l1.4-4zm7.4 7.5-1.3.8.8 1.4H5.5V20h14.3l-2.2-3.6z" />
+	</SVG>
+);
+
+export default textHorizontal;
diff --git a/packages/icons/src/library/text-vertical.js b/packages/icons/src/library/text-vertical.js
new file mode 100644
index 00000000000000..406561bee97cc8
--- /dev/null
+++ b/packages/icons/src/library/text-vertical.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const textVertical = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 5.6v1.7l2.6.9v3.9L7 13v1.7L17.5 11V9.3L7 5.6zm4.2 6V8.8l4 1.4-4 1.4zm-5.7 5.6V5.5H4v14.3l3.6-2.2-.8-1.3-1.3.9z" />
+	</SVG>
+);
+
+export default textVertical;
diff --git a/packages/icons/src/library/thumbs-down.js b/packages/icons/src/library/thumbs-down.js
new file mode 100644
index 00000000000000..94e11ee8f06386
--- /dev/null
+++ b/packages/icons/src/library/thumbs-down.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const thumbsDown = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M19.8 4h-1.5l1 8h1.5l-1-8ZM17 5.8c-.1-1-1-1.8-2-1.8H6.8c-.9 0-1.7.6-1.9 1.4l-1.8 6C2.7 12.7 3.7 14 5 14h4.4l-.8 3.6c-.3 1.3.7 2.4 1.9 2.4h.2c.6 0 1.2-.3 1.6-.8l5-6.6c.3-.4.5-.9.4-1.5L17 5.7Zm-.9 5.9-5 6.6c0 .1-.2.2-.4.2h-.2c-.3 0-.6-.3-.5-.6l.8-3.6c.1-.4 0-.9-.3-1.3s-.7-.6-1.2-.6H4.9c-.3 0-.6-.3-.5-.6l1.8-6c0-.2.3-.4.5-.4h8.2c.3 0 .5.2.5.4l.7 5.4v.4Z" />
+	</SVG>
+);
+
+export default thumbsDown;
diff --git a/packages/icons/src/library/thumbs-up.js b/packages/icons/src/library/thumbs-up.js
new file mode 100644
index 00000000000000..f65b6445359e25
--- /dev/null
+++ b/packages/icons/src/library/thumbs-up.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const thumbsUp = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m3 12 1 8h1.5l-1-8H3Zm15.8-2h-4.4l.8-3.6c.3-1.3-.7-2.4-1.9-2.4h-.2c-.6 0-1.2.3-1.6.8l-5 6.6c-.3.4-.4.8-.4 1.2v.2l.7 5.4v.2c.2.9 1 1.5 1.9 1.5h8.2c.9 0 1.7-.6 1.9-1.4l1.8-6c.4-1.3-.6-2.6-1.9-2.6Zm.5 2.1-1.8 6c0 .2-.3.4-.5.4H8.8c-.3 0-.5-.2-.5-.4l-.7-5.4v-.4l5-6.6c0-.1.2-.2.4-.2h.2c.3 0 .6.3.5.6l-.8 3.6c-.1.4 0 .9.3 1.3s.7.6 1.2.6h4.4c.3 0 .6.3.5.6Z" />
+	</SVG>
+);
+
+export default thumbsUp;
diff --git a/packages/icons/src/library/title.js b/packages/icons/src/library/title.js
index 902192be392ec4..cf77753bc35f89 100644
--- a/packages/icons/src/library/title.js
+++ b/packages/icons/src/library/title.js
@@ -4,8 +4,8 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const title = (
-	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M4 5.417h2.267V12h1.466V5.417H10V4H4v1.417ZM20 16H4v-1.5h16V16Zm-7 4H4v-1.5h9V20Z" />
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m4 5.5h2v6.5h1.5v-6.5h2v-1.5h-5.5zm16 10.5h-16v-1.5h16zm-7 4h-9v-1.5h9z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/trash.js b/packages/icons/src/library/trash.js
index 95a391ca1f6097..79870537dbb633 100644
--- a/packages/icons/src/library/trash.js
+++ b/packages/icons/src/library/trash.js
@@ -5,7 +5,11 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const trash = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M20 5h-5.7c0-1.3-1-2.3-2.3-2.3S9.7 3.7 9.7 5H4v2h1.5v.3l1.7 11.1c.1 1 1 1.7 2 1.7h5.7c1 0 1.8-.7 2-1.7l1.7-11.1V7H20V5zm-3.2 2l-1.7 11.1c0 .1-.1.2-.3.2H9.1c-.1 0-.3-.1-.3-.2L7.2 7h9.6z" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"
+		/>
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/unseen.js b/packages/icons/src/library/unseen.js
new file mode 100644
index 00000000000000..bb73a2199e1ee4
--- /dev/null
+++ b/packages/icons/src/library/unseen.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const unseen = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M20.7 12.7s0-.1-.1-.2c0-.2-.2-.4-.4-.6-.3-.5-.9-1.2-1.6-1.8-.7-.6-1.5-1.3-2.6-1.8l-.6 1.4c.9.4 1.6 1 2.1 1.5.6.6 1.1 1.2 1.4 1.6.1.2.3.4.3.5v.1l.7-.3.7-.3Zm-5.2-9.3-1.8 4c-.5-.1-1.1-.2-1.7-.2-3 0-5.2 1.4-6.6 2.7-.7.7-1.2 1.3-1.6 1.8-.2.3-.3.5-.4.6 0 0 0 .1-.1.2s0 0 .7.3l.7.3V13c0-.1.2-.3.3-.5.3-.4.7-1 1.4-1.6 1.2-1.2 3-2.3 5.5-2.3H13v.3c-.4 0-.8-.1-1.1-.1-1.9 0-3.5 1.6-3.5 3.5s.6 2.3 1.6 2.9l-2 4.4.9.4 7.6-16.2-.9-.4Zm-3 12.6c1.7-.2 3-1.7 3-3.5s-.2-1.4-.6-1.9L12.4 16Z" />
+	</SVG>
+);
+
+export default unseen;
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>
 );
 
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index f6038b3b0c459e..2877b1d31633bd 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
new file mode 100644
index 00000000000000..b79850dc7fe545
--- /dev/null
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -0,0 +1,76 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+### Enhancements
+
+-   Improvements to the experimental full-page navigation ([#64067](https://github.com/WordPress/gutenberg/pull/64067)):
+    -   Remove the `src` attributes from prefetched script tags.
+    -   Use `.textContent` instead of `.innerText` to set `<script>` contents.
+    -   Use [`populateServerData()`](https://github.com/WordPress/gutenberg/blob/9671329c386d2b743f14ef314823fbf915366ebd/packages/interactivity/src/store.ts#L269) with state from the server.
+    -   Wait for the `load` event of the script element before evaluating it.
+    -   Make `renderRegions()` an async function.
+    -   Only prefetch **module** scripts, never prefetch regular scripts. That's because regular scripts (without `async` or `defer` attributes) found in the head are blocking and must be executed in order. When prefetching there is no guarantee that the scripts will execute in the order they are prefetched. Module scripts can be executed in any order.
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.8.0 (2024-05-16)
+
+## 1.7.0 (2024-05-02)
+
+## 1.6.0 (2024-04-19)
+
+## 1.5.0 (2024-04-03)
+
+## 1.4.0 (2024-03-21)
+
+## 1.3.0 (2024-03-06)
+
+### Bug Fixes
+
+-   Fix navigate() issues related to initial state merges. ([#57134](https://github.com/WordPress/gutenberg/pull/57134))
+
+## 1.2.0 (2024-02-21)
+
+## 1.1.0 (2024-02-09)
+
+### New Features
+
+-   Add the `clientNavigationDisabled` option to the `core/router` config. ([58749](https://github.com/WordPress/gutenberg/pull/58749))
+
+## 1.0.0 (2024-01-24)
+
+### Breaking Changes
+
+-   Initial version. ([57924](https://github.com/WordPress/gutenberg/pull/57924))
diff --git a/packages/interactivity-router/README.md b/packages/interactivity-router/README.md
new file mode 100644
index 00000000000000..efb52e59be2b5d
--- /dev/null
+++ b/packages/interactivity-router/README.md
@@ -0,0 +1,151 @@
+# `@wordpress/interactivity-router`
+
+The package `@wordpress/interactivity-router` enables loading content from other pages without a full page reload. Currently, the only supported mode is "region-based". Full "client-side navigation" is still in experimental phase.
+
+The package defines an Interactivity API store with the `core/router` namespace, exposing state and 2 actions: `navigate` and `prefetch` to handle client-side navigation.
+
+The `@wordpress/interactivity-router` package was [introduced in WordPress Core in v6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/). This means this package is already bundled in Core in any version of WordPress higher than v6.5.
+
+<div class="callout callout-info">
+    Check the <a href="https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/">Interactivity API Reference docs in the Block Editor handbook</a> to learn more about the Interactivity API.
+</div>
+
+## Usage
+
+The package is intended to be imported dynamically in the `view.js` files of interactive blocks. This is done in in order to reduce the JS bundle size on the initial page load.
+
+```js
+/* view.js */
+
+import { store } from '@wordpress/interactivity';
+
+// This is how you would typically use the navigate() action in your block.
+store( 'my-namespace/myblock', {
+	actions: {
+		*goToPage( e ) {
+			e.preventDefault();
+
+			// We import the package dynamically to reduce the initial JS bundle size.
+			// Async actions are defined as generators so the import() must be called with `yield`.
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+	},
+} );
+```
+
+Now, you can call `actions.navigate()` in your block's `view.js` file to navigate to a different page or e.g. pass it to a `data-wp-on--click` attribute.
+
+When loaded, this package [adds the following state and actions](https://github.com/WordPress/gutenberg/blob/ed7d78652526270b63976d7a970dba46a2bfcbb0/packages/interactivity-router/src/index.ts#L212) to the `core/router` store:
+
+```js
+const { state, actions } = store( 'core/router', {
+	state: {
+		url: window.location.href,
+		navigation: {
+			hasStarted: false,
+			hasFinished: false,
+			texts: {
+				loading: '',
+				loaded: '',
+			},
+			message: '',
+		},
+	},
+	actions: {
+		*navigate(href, options) {...},
+		prefetch(url, options) {...},
+	}
+})
+```
+
+<div class="callout callout-tip">
+    The core "Query Loop" block is <a href="https://github.com/WordPress/gutenberg/blob/cd701e94ceffea7ef2f423274a2f77025bcfa1a6/packages/block-library/src/query/view.js#L35">using this package</a> to provide the <a href="https://github.com/WordPress/gutenberg/blob/cd701e94ceffea7ef2f423274a2f77025bcfa1a6/packages/block-library/src/query/index.php#L33">region-based navigation</a>.
+</div>
+
+### Directives
+
+#### `data-wp-router-region`
+
+It defines a region that is updated on navigation. It requires a unique ID as the value and can only be used in root interactive elements, i.e., elements with `data-wp-interactive` that are not nested inside other elements with `data-wp-interactive`.
+
+Example:
+
+```html
+<div data-wp-interactive="myblock" data-wp-router-region="main-list">
+  <ul>
+     <li><a href="/post-1">Post 1</a></li>
+     <li><a href="/post-2">Post 2</a></li>
+     <li><a href="/post-3">Post 3</a></li>
+  </ul>
+  <a data-wp-on--click="actions.navigate" href="/page/2">
+</div>
+```
+
+### Actions
+
+#### `navigate`
+
+Navigates to the specified page.
+
+This function normalizes the passed `href`, fetches the page HTML if needed, and updates any interactive regions whose contents have changed in the new page. It also creates a new entry in the browser session history.
+
+**Params**
+
+```js
+navigate( href: string, options: NavigateOptions = {} )
+```
+
+-   `href`: The page `href`.
+-   `options`: Options object.
+    -   `force`: If `true`, it forces re-fetching the URL. `navigate()` always caches the page, so if the page has been navigated to before, it will be used. Default is `false`.
+    -   `html`: HTML string to be used instead of fetching the requested URL.
+    -   `replace`: If `true`, it replaces the current entry in the browser session history. Default is `false`.
+    -   `timeout`: Time until the navigation is aborted, in milliseconds. Default is `10000`.
+    -   `loadingAnimation`: Whether an animation should be shown while navigating. Default to `true`.
+    -   `screenReaderAnnouncement`: Whether a message for screen readers should be announced while navigating. Default to `true`.
+
+#### `prefetch`
+
+Prefetches the page for the passed URL. The page is cached and can be used for navigation.
+
+The function normalizes the URL and stores internally the fetch promise, to avoid triggering a second fetch for an ongoing request.
+
+**Params**
+
+```js
+prefetch( url: string, options: PrefetchOptions = {} )
+```
+
+-   `url`: The page `url`.
+-   `options`: Options object.
+
+    -   `force`: If `true`, forces fetching the URL again.
+    -   `html`: HTML string to be used instead of fetching the requested URL.
+
+### State
+
+`state.url` is a reactive property synchronized with the current URL.
+Properties under `state.navigation` are meant for loading bar animations.
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/interactivity-router --save
+```
+
+This step is only required if you use the Interactivity API outside WordPress.
+
+Within WordPress, the package is already bundled in Core. To ensure it's enqueued, add `@wordpress/interactivity-router` to the dependency array of the script module. This process is often done automatically with tools like [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/).
+
+Furthermore, this package assumes your code will run in an **ES2015+** environment. If you're using an environment with 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.
+
+## License
+
+Interactivity API proposal, as part of Gutenberg and the WordPress project is free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See [LICENSE.md](https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md) for complete license.
+
+<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/interactivity-router/package.json b/packages/interactivity-router/package.json
new file mode 100644
index 00000000000000..30881e554e93f0
--- /dev/null
+++ b/packages/interactivity-router/package.json
@@ -0,0 +1,37 @@
+{
+	"name": "@wordpress/interactivity-router",
+	"version": "2.13.0",
+	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"interactivity"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/interactivity-router/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/interactivity-router"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScriptModuleExports": "./build-module/index.js",
+	"types": "build-types",
+	"dependencies": {
+		"@wordpress/a11y": "*",
+		"@wordpress/interactivity": "*"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/interactivity-router/src/head.ts b/packages/interactivity-router/src/head.ts
new file mode 100644
index 00000000000000..69139348b582ff
--- /dev/null
+++ b/packages/interactivity-router/src/head.ts
@@ -0,0 +1,126 @@
+/**
+ * The cache of prefetched stylesheets and scripts.
+ */
+export const headElements = new Map<
+	string,
+	{ tag: HTMLElement; text?: string }
+>();
+
+/**
+ * Helper to update only the necessary tags in the head.
+ *
+ * @async
+ * @param newHead The head elements of the new page.
+ */
+export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
+	// Helper to get the tag id store in the cache.
+	const getTagId = ( tag: Element ) => tag.id || tag.outerHTML;
+
+	// Map incoming head tags by their content.
+	const newHeadMap = new Map< string, Element >();
+	for ( const child of newHead ) {
+		newHeadMap.set( getTagId( child ), child );
+	}
+
+	const toRemove: Element[] = [];
+
+	// Detect nodes that should be added or removed.
+	for ( const child of document.head.children ) {
+		const id = getTagId( child );
+		// Always remove styles and links as they might change.
+		if ( child.nodeName === 'LINK' || child.nodeName === 'STYLE' ) {
+			toRemove.push( child );
+		} else if ( newHeadMap.has( id ) ) {
+			newHeadMap.delete( id );
+		} else if ( child.nodeName !== 'SCRIPT' && child.nodeName !== 'META' ) {
+			toRemove.push( child );
+		}
+	}
+
+	await Promise.all(
+		[ ...headElements.entries() ]
+			.filter( ( [ , { tag } ] ) => tag.nodeName === 'SCRIPT' )
+			.map( async ( [ url ] ) => {
+				await import( /* webpackIgnore: true */ url );
+			} )
+	);
+
+	// Prepare new assets.
+	const toAppend = [ ...newHeadMap.values() ];
+
+	// Apply the changes.
+	toRemove.forEach( ( n ) => n.remove() );
+	document.head.append( ...toAppend );
+};
+
+/**
+ * Fetches and processes head assets (stylesheets and scripts) from a specified document.
+ *
+ * @async
+ * @param doc The document from which to fetch head assets. It should support standard DOM querying methods.
+ *
+ * @return Returns an array of HTML elements representing the head assets.
+ */
+export const fetchHeadAssets = async (
+	doc: Document
+): Promise< HTMLElement[] > => {
+	const headTags = [];
+
+	// We only want to fetch module scripts because regular scripts (without
+	// `async` or `defer` attributes) can depend on the execution of other scripts.
+	// Scripts found in the head are blocking and must be executed in order.
+	const scripts = doc.querySelectorAll< HTMLScriptElement >(
+		'script[type="module"][src]'
+	);
+
+	scripts.forEach( ( script ) => {
+		const src = script.getAttribute( 'src' );
+		if ( ! headElements.has( src ) ) {
+			// add the <link> elements to prefetch the module scripts
+			const link = doc.createElement( 'link' );
+			link.rel = 'modulepreload';
+			link.href = src;
+			document.head.append( link );
+			headElements.set( src, { tag: script } );
+		}
+	} );
+
+	const stylesheets = doc.querySelectorAll< HTMLLinkElement >(
+		'link[rel=stylesheet]'
+	);
+
+	await Promise.all(
+		Array.from( stylesheets ).map( async ( tag ) => {
+			const href = tag.getAttribute( 'href' );
+			if ( ! href ) {
+				return;
+			}
+
+			if ( ! headElements.has( href ) ) {
+				try {
+					const response = await fetch( href );
+					const text = await response.text();
+					headElements.set( href, {
+						tag,
+						text,
+					} );
+				} catch ( e ) {
+					// eslint-disable-next-line no-console
+					console.error( e );
+				}
+			}
+
+			const headElement = headElements.get( href );
+			const styleElement = doc.createElement( 'style' );
+			styleElement.textContent = headElement.text;
+
+			headTags.push( styleElement );
+		} )
+	);
+
+	return [
+		doc.querySelector( 'title' ),
+		...doc.querySelectorAll( 'style' ),
+		...headTags,
+	];
+};
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
new file mode 100644
index 00000000000000..8a46d4ce350113
--- /dev/null
+++ b/packages/interactivity-router/src/index.ts
@@ -0,0 +1,457 @@
+/**
+ * WordPress dependencies
+ */
+import { store, privateApis, getConfig } from '@wordpress/interactivity';
+
+/**
+ * Internal dependencies
+ */
+import { fetchHeadAssets, updateHead, headElements } from './head';
+
+const {
+	directivePrefix,
+	getRegionRootFragment,
+	initialVdom,
+	toVdom,
+	render,
+	parseServerData,
+	populateServerData,
+	batch,
+} = privateApis(
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
+);
+
+interface NavigateOptions {
+	force?: boolean;
+	html?: string;
+	replace?: boolean;
+	timeout?: number;
+	loadingAnimation?: boolean;
+	screenReaderAnnouncement?: boolean;
+}
+
+interface PrefetchOptions {
+	force?: boolean;
+	html?: string;
+}
+
+interface VdomParams {
+	vdom?: typeof initialVdom;
+}
+
+interface Page {
+	regions: Record< string, any >;
+	head: HTMLHeadElement[];
+	title: string;
+	initialData: any;
+}
+
+type RegionsToVdom = ( dom: Document, params?: VdomParams ) => Promise< Page >;
+
+// Check if the navigation mode is full page or region based.
+const navigationMode: 'regionBased' | 'fullPage' =
+	getConfig( 'core/router' ).navigationMode ?? 'regionBased';
+
+// The cache of visited and prefetched pages, stylesheets and scripts.
+const pages = new Map< string, Promise< Page | false > >();
+
+// Helper to remove domain and hash from the URL. We are only interesting in
+// caching the path and the query.
+const getPagePath = ( url: string ) => {
+	const u = new URL( url, window.location.href );
+	return u.pathname + u.search;
+};
+
+// Fetch a new page and convert it to a static virtual DOM.
+const fetchPage = async ( url: string, { html }: { html: string } ) => {
+	try {
+		if ( ! html ) {
+			const res = await window.fetch( url );
+			if ( res.status !== 200 ) {
+				return false;
+			}
+			html = await res.text();
+		}
+		const dom = new window.DOMParser().parseFromString( html, 'text/html' );
+		return regionsToVdom( dom );
+	} catch ( e ) {
+		return false;
+	}
+};
+
+// Return an object with VDOM trees of those HTML regions marked with a
+// `router-region` directive.
+const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
+	const regions = { body: undefined };
+	let head: HTMLElement[];
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		if ( navigationMode === 'fullPage' ) {
+			head = await fetchHeadAssets( dom );
+			regions.body = vdom
+				? vdom.get( document.body )
+				: toVdom( dom.body );
+		}
+	}
+	if ( navigationMode === 'regionBased' ) {
+		const attrName = `data-${ directivePrefix }-router-region`;
+		dom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {
+			const id = region.getAttribute( attrName );
+			regions[ id ] = vdom?.has( region )
+				? vdom.get( region )
+				: toVdom( region );
+		} );
+	}
+	const title = dom.querySelector( 'title' )?.innerText;
+	const initialData = parseServerData( dom );
+	return { regions, head, title, initialData };
+};
+
+// Render all interactive regions contained in the given page.
+const renderRegions = async ( page: Page ) => {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		if ( navigationMode === 'fullPage' ) {
+			// Once this code is tested and more mature, the head should be updated for region based navigation as well.
+			await updateHead( page.head );
+			const fragment = getRegionRootFragment( document.body );
+			batch( () => {
+				populateServerData( page.initialData );
+				render( page.regions.body, fragment );
+			} );
+		}
+	}
+	if ( navigationMode === 'regionBased' ) {
+		const attrName = `data-${ directivePrefix }-router-region`;
+		batch( () => {
+			populateServerData( page.initialData );
+			document
+				.querySelectorAll( `[${ attrName }]` )
+				.forEach( ( region ) => {
+					const id = region.getAttribute( attrName );
+					const fragment = getRegionRootFragment( region );
+					render( page.regions[ id ], fragment );
+				} );
+		} );
+	}
+	if ( page.title ) {
+		document.title = page.title;
+	}
+};
+
+/**
+ * Load the given page forcing a full page reload.
+ *
+ * The function returns a promise that won't resolve, useful to prevent any
+ * potential feedback indicating that the navigation has finished while the new
+ * page is being loaded.
+ *
+ * @param href The page href.
+ * @return Promise that never resolves.
+ */
+const forcePageReload = ( href: string ) => {
+	window.location.assign( href );
+	return new Promise( () => {} );
+};
+
+// Listen to the back and forward buttons and restore the page if it's in the
+// cache.
+window.addEventListener( 'popstate', async () => {
+	const pagePath = getPagePath( window.location.href ); // Remove hash.
+	const page = pages.has( pagePath ) && ( await pages.get( pagePath ) );
+	if ( page ) {
+		await renderRegions( page );
+		// Update the URL in the state.
+		state.url = window.location.href;
+	} else {
+		window.location.reload();
+	}
+} );
+
+// Initialize the router and cache the initial page using the initial vDOM.
+// Once this code is tested and more mature, the head should be updated for
+// region based navigation as well.
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	if ( navigationMode === 'fullPage' ) {
+		// Cache the scripts. Has to be called before fetching the assets.
+		[].map.call(
+			document.querySelectorAll( 'script[type="module"][src]' ),
+			( script ) => {
+				headElements.set( script.getAttribute( 'src' ), {
+					tag: script,
+				} );
+			}
+		);
+		await fetchHeadAssets( document );
+	}
+}
+pages.set(
+	getPagePath( window.location.href ),
+	Promise.resolve( regionsToVdom( document, { vdom: initialVdom } ) )
+);
+
+// Check if the link is valid for client-side navigation.
+const isValidLink = ( ref: HTMLAnchorElement ) =>
+	ref &&
+	ref instanceof window.HTMLAnchorElement &&
+	ref.href &&
+	( ! ref.target || ref.target === '_self' ) &&
+	ref.origin === window.location.origin &&
+	! ref.pathname.startsWith( '/wp-admin' ) &&
+	! ref.pathname.startsWith( '/wp-login.php' ) &&
+	! ref.getAttribute( 'href' ).startsWith( '#' ) &&
+	! new URL( ref.href ).searchParams.has( '_wpnonce' );
+
+// Check if the event is valid for client-side navigation.
+const isValidEvent = ( event: MouseEvent ) =>
+	event &&
+	event.button === 0 && // Left clicks only.
+	! event.metaKey && // Open in new tab (Mac).
+	! event.ctrlKey && // Open in new tab (Windows).
+	! event.altKey && // Download.
+	! event.shiftKey &&
+	! event.defaultPrevented;
+
+// Variable to store the current navigation.
+let navigatingTo = '';
+
+let hasLoadedNavigationTextsData = false;
+const navigationTexts = {
+	loading: 'Loading page, please wait.',
+	loaded: 'Page Loaded.',
+};
+
+interface Store {
+	state: {
+		url: string;
+		navigation: {
+			hasStarted: boolean;
+			hasFinished: boolean;
+		};
+	};
+	actions: {
+		navigate: ( href: string, options?: NavigateOptions ) => void;
+		prefetch: ( url: string, options?: PrefetchOptions ) => void;
+	};
+}
+
+export const { state, actions } = store< Store >( 'core/router', {
+	state: {
+		url: window.location.href,
+		navigation: {
+			hasStarted: false,
+			hasFinished: false,
+		},
+	},
+	actions: {
+		/**
+		 * Navigates to the specified page.
+		 *
+		 * This function normalizes the passed href, fetchs the page HTML if
+		 * needed, and updates any interactive regions whose contents have
+		 * changed. It also creates a new entry in the browser session history.
+		 *
+		 * @param href                               The page href.
+		 * @param [options]                          Options object.
+		 * @param [options.force]                    If true, it forces re-fetching the URL.
+		 * @param [options.html]                     HTML string to be used instead of fetching the requested URL.
+		 * @param [options.replace]                  If true, it replaces the current entry in the browser session history.
+		 * @param [options.timeout]                  Time until the navigation is aborted, in milliseconds. Default is 10000.
+		 * @param [options.loadingAnimation]         Whether an animation should be shown while navigating. Default to `true`.
+		 * @param [options.screenReaderAnnouncement] Whether a message for screen readers should be announced while navigating. Default to `true`.
+		 *
+		 * @return  Promise that resolves once the navigation is completed or aborted.
+		 */
+		*navigate( href: string, options: NavigateOptions = {} ) {
+			const { clientNavigationDisabled } = getConfig();
+			if ( clientNavigationDisabled ) {
+				yield forcePageReload( href );
+			}
+
+			const pagePath = getPagePath( href );
+			const { navigation } = state;
+			const {
+				loadingAnimation = true,
+				screenReaderAnnouncement = true,
+				timeout = 10000,
+			} = options;
+
+			navigatingTo = href;
+			actions.prefetch( pagePath, options );
+
+			// Create a promise that resolves when the specified timeout ends.
+			// The timeout value is 10 seconds by default.
+			const timeoutPromise = new Promise< void >( ( resolve ) =>
+				setTimeout( resolve, timeout )
+			);
+
+			// Don't update the navigation status immediately, wait 400 ms.
+			const loadingTimeout = setTimeout( () => {
+				if ( navigatingTo !== href ) {
+					return;
+				}
+
+				if ( loadingAnimation ) {
+					navigation.hasStarted = true;
+					navigation.hasFinished = false;
+				}
+				if ( screenReaderAnnouncement ) {
+					a11ySpeak( 'loading' );
+				}
+			}, 400 );
+
+			const page = yield Promise.race( [
+				pages.get( pagePath ),
+				timeoutPromise,
+			] );
+
+			// Dismiss loading message if it hasn't been added yet.
+			clearTimeout( loadingTimeout );
+
+			// Once the page is fetched, the destination URL could have changed
+			// (e.g., by clicking another link in the meantime). If so, bail
+			// out, and let the newer execution to update the HTML.
+			if ( navigatingTo !== href ) {
+				return;
+			}
+
+			if (
+				page &&
+				! page.initialData?.config?.[ 'core/router' ]
+					?.clientNavigationDisabled
+			) {
+				yield renderRegions( page );
+				window.history[
+					options.replace ? 'replaceState' : 'pushState'
+				]( {}, '', href );
+
+				// Update the URL in the state.
+				state.url = href;
+
+				// Update the navigation status once the the new page rendering
+				// has been completed.
+				if ( loadingAnimation ) {
+					navigation.hasStarted = false;
+					navigation.hasFinished = true;
+				}
+
+				if ( screenReaderAnnouncement ) {
+					a11ySpeak( 'loaded' );
+				}
+
+				// Scroll to the anchor if exits in the link.
+				const { hash } = new URL( href, window.location.href );
+				if ( hash ) {
+					document.querySelector( hash )?.scrollIntoView();
+				}
+			} else {
+				yield forcePageReload( href );
+			}
+		},
+
+		/**
+		 * Prefetchs the page with the passed URL.
+		 *
+		 * The function normalizes the URL and stores internally the fetch
+		 * promise, to avoid triggering a second fetch for an ongoing request.
+		 *
+		 * @param url             The page URL.
+		 * @param [options]       Options object.
+		 * @param [options.force] Force fetching the URL again.
+		 * @param [options.html]  HTML string to be used instead of fetching the requested URL.
+		 */
+		prefetch( url: string, options: PrefetchOptions = {} ) {
+			const { clientNavigationDisabled } = getConfig();
+			if ( clientNavigationDisabled ) {
+				return;
+			}
+
+			const pagePath = getPagePath( url );
+			if ( options.force || ! pages.has( pagePath ) ) {
+				pages.set(
+					pagePath,
+					fetchPage( pagePath, { html: options.html } )
+				);
+			}
+		},
+	},
+} );
+
+/**
+ * Announces a message to screen readers.
+ *
+ * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
+ * the package on demand and should be used instead of calling `ally.speak` direacly.
+ *
+ * @param messageKey The message to be announced by assistive technologies.
+ */
+function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
+	if ( ! hasLoadedNavigationTextsData ) {
+		hasLoadedNavigationTextsData = true;
+		const content = document.getElementById(
+			'wp-script-module-data-@wordpress/interactivity-router'
+		)?.textContent;
+		if ( content ) {
+			try {
+				const parsed = JSON.parse( content );
+				if ( typeof parsed?.i18n?.loading === 'string' ) {
+					navigationTexts.loading = parsed.i18n.loading;
+				}
+				if ( typeof parsed?.i18n?.loaded === 'string' ) {
+					navigationTexts.loaded = parsed.i18n.loaded;
+				}
+			} catch {}
+		} else {
+			// Fallback to localized strings from Interactivity API state.
+			// @todo This block is for Core < 6.7.0. Remove when support is dropped.
+
+			// @ts-expect-error
+			if ( state.navigation.texts?.loading ) {
+				// @ts-expect-error
+				navigationTexts.loading = state.navigation.texts.loading;
+			}
+			// @ts-expect-error
+			if ( state.navigation.texts?.loaded ) {
+				// @ts-expect-error
+				navigationTexts.loaded = state.navigation.texts.loaded;
+			}
+		}
+	}
+
+	const message = navigationTexts[ messageKey ];
+
+	import( '@wordpress/a11y' ).then(
+		( { speak } ) => speak( message ),
+		// Ignore failures to load the a11y module.
+		() => {}
+	);
+}
+
+// Add click and prefetch to all links.
+if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+	if ( navigationMode === 'fullPage' ) {
+		// Navigate on click.
+		document.addEventListener(
+			'click',
+			function ( event ) {
+				const ref = ( event.target as Element ).closest( 'a' );
+				if ( isValidLink( ref ) && isValidEvent( event ) ) {
+					event.preventDefault();
+					actions.navigate( ref.href );
+				}
+			},
+			true
+		);
+		// Prefetch on hover.
+		document.addEventListener(
+			'mouseenter',
+			function ( event ) {
+				if ( ( event.target as Element )?.nodeName === 'A' ) {
+					const ref = ( event.target as Element ).closest( 'a' );
+					if ( isValidLink( ref ) && isValidEvent( event ) ) {
+						actions.prefetch( ref.href );
+					}
+				}
+			},
+			true
+		);
+	}
+}
diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json
new file mode 100644
index 00000000000000..f601a26a86f5f4
--- /dev/null
+++ b/packages/interactivity-router/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false,
+		"strict": false
+	},
+	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
new file mode 100644
index 00000000000000..587d14440d8116
--- /dev/null
+++ b/packages/interactivity/CHANGELOG.md
@@ -0,0 +1,276 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+### Bug Fixes
+
+-   Fix property modification from inherited context two or more levels above ([#66872](https://github.com/WordPress/gutenberg/pull/66872)).
+
+## 6.11.0 (2024-10-30)
+
+### Bug Fixes
+
+-   Fix reactivity of undefined objects and arrays added with `deepMerge()` ([#66183](https://github.com/WordPress/gutenberg/pull/66183)).
+
+## 6.10.0 (2024-10-16)
+
+### Internal
+
+-   Upgrade preact libraries [#66008](https://github.com/WordPress/gutenberg/pull/66008).
+
+### Bug Fixes
+
+-   Fix an issue where "default" could not be used as a directive suffix ([#65815](https://github.com/WordPress/gutenberg/pull/65815)).
+-   Correctly handle lazily added, deeply nested properties with `deepMerge()` ([#65465](https://github.com/WordPress/gutenberg/pull/65465)).
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Improve TypeScript support for generators ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+-   Refactor internal context proxies implementation ([#64713](https://github.com/WordPress/gutenberg/pull/64713)).
+
+### Bug Fixes
+
+-   Prevent calling `proxifyContext` over an already-proxified context inside `wp-context` ([#65090](https://github.com/WordPress/gutenberg/pull/65090)).
+-   Update iterable signals when `deepMerge()` adds new properties ([#65135](https://github.com/WordPress/gutenberg/pull/65135)).
+
+## 6.7.0 (2024-09-05)
+
+### Enhancements
+
+-   Improve internal `deepMerge` function ([#64879](https://github.com/WordPress/gutenberg/pull/64879)).
+
+### Bug Fixes
+
+-   Fix computeds without scope in Firefox ([#64825](https://github.com/WordPress/gutenberg/pull/64825)).
+
+## 6.6.0 (2024-08-21)
+
+### Bug Fixes
+
+-   Fix context inheritance from namespaces different than the current one ([#64677](https://github.com/WordPress/gutenberg/pull/64677)).
+
+## 6.5.0 (2024-08-07)
+
+### Enhancements
+
+-   Refactor internal proxy and signals system ([#62734](https://github.com/WordPress/gutenberg/pull/62734)).
+
+### Bug Fixes
+
+-   Prevent overriding of existing properties on state and context after a client-side navigation ([#62734](https://github.com/WordPress/gutenberg/pull/62734)).
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+### Enhancements
+
+-   Export `splitTask` function from `@wordpress/interactivity` package to facilitate yielding to the main thread. See example in [async actions](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/interactivity-api/api-reference.md#async-actions) documentation. ([#62665](https://github.com/WordPress/gutenberg/pull/62665))
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### New Features
+
+-   Introduce `wp-on-async` directive as performant alternative over synchronous `wp-on` directive. ([#61885](https://github.com/WordPress/gutenberg/pull/61885))
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+### Bug Fixes
+
+-   Fix null and number strings as namespaces runtime error. ([#61960](https://github.com/WordPress/gutenberg/pull/61960/))
+
+## 5.7.0 (2024-05-16)
+
+### Enhancements
+
+-   Strict type checking: fix some missing nulls in published types ([#59865](https://github.com/WordPress/gutenberg/pull/59865/)).
+
+### Bug Fixes
+
+-   Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009))
+-   Prevent wrong written directives from killing the runtime ([#61249](https://github.com/WordPress/gutenberg/pull/61249))
+-   Prevent empty namespace or different namespaces from killing the runtime ([#61409](https://github.com/WordPress/gutenberg/pull/61409))
+
+## 5.6.0 (2024-05-02)
+
+## 5.5.0 (2024-04-19)
+
+### Enhancements
+
+-   Improve data-wp-context debugging by validating it as a stringified JSON Object. ([#61045](https://github.com/WordPress/gutenberg/pull/61045))
+
+### Bug Fixes
+
+-   Hooks useMemo and useCallback should return a value. ([#60474](https://github.com/WordPress/gutenberg/pull/60474))
+
+## 5.4.0 (2024-04-03)
+
+## 5.3.0 (2024-03-21)
+
+### Bug Fixes
+
+-   Prevent non-objects from being set in store state. ([#59886](https://github.com/WordPress/gutenberg/pull/59886))
+-   Ensure that stores are available for subscription before hydration. ([#59842](https://github.com/WordPress/gutenberg/pull/59842))
+-   Ensure scope is restored when catching exceptions thrown in async generator actions. ([#59708](https://github.com/WordPress/gutenberg/pull/59708))
+
+## 5.2.0 (2024-03-06)
+
+### Bug Fixes
+
+-   Prevent passing state proxies as receivers to deepSignal proxy handlers. ([#57134](https://github.com/WordPress/gutenberg/pull/57134))
+-   Keep the same references to objects defined inside the context. ([#59553](https://github.com/WordPress/gutenberg/pull/59553))
+
+## 5.1.0 (2024-02-21)
+
+### Bug Fixes
+
+-   Only add proxies to plain objects inside the store. ([#59039](https://github.com/WordPress/gutenberg/pull/59039))
+-   Improve context merges using proxies. ([59187](https://github.com/WordPress/gutenberg/pull/59187))
+
+## 5.0.0 (2024-02-09)
+
+### New Features
+
+-   Export `getConfig()` to retrieve the server-defined configuration for the passed namespace. ([58749](https://github.com/WordPress/gutenberg/pull/58749))
+
+### Breaking Changes
+
+-   Remove the style prop (`key`) and class name arguments the `data-wp-style` and `data-wp-class` directives. ([#58835](https://github.com/WordPress/gutenberg/pull/58835)).
+-   Remove the `data-wp-body` directive. ([#58835](https://github.com/WordPress/gutenberg/pull/58835))
+
+### Enhancements
+
+-   Break up init with yielding to main to prevent long task from hydration. ([#58227](https://github.com/WordPress/gutenberg/pull/58227))
+-   Support setting the namespace using a string in `data-wp-interactive`, like `data-wp-interactive="myPlugin"`. ([#58743](https://github.com/WordPress/gutenberg/pull/58743))
+
+### Bug Fixes
+
+-   Avoid initializing private stores as public when they have initial state. ([#58754](https://github.com/WordPress/gutenberg/pull/58754))
+
+### Bug Fixes
+
+-   Interactivity API: Remove non default suffix data wp context processing. ([#58664](https://github.com/WordPress/gutenberg/pull/58664))
+
+## 4.0.1 (2024-01-31)
+
+### Bug Fixes
+
+-   Ensure Preact is used in published packages ([58258](https://github.com/WordPress/gutenberg/pull/58258).
+
+## 4.0.0 (2024-01-24)
+
+### Enhancements
+
+-   Prevent the usage of Preact components in `wp-text`. ([#57879](https://github.com/WordPress/gutenberg/pull/57879))
+-   Update `preact`, `@preact/signals` and `deepsignal` dependencies. ([#57891](https://github.com/WordPress/gutenberg/pull/57891))
+-   Export `withScope()` and allow to use it with asynchronous operations. ([#58013](https://github.com/WordPress/gutenberg/pull/58013))
+-   Add `block supports` for `clientNavigation` and `interactive` properties on `block.json` schema.([#58132](https://github.com/WordPress/gutenberg/pull/58132))
+
+### New Features
+
+-   Add the `data-wp-run` directive along with the `useInit` and `useWatch` hooks. ([#57805](https://github.com/WordPress/gutenberg/pull/57805))
+-   Add `wp-data-on-window` and `wp-data-on-document` directives. ([#57931](https://github.com/WordPress/gutenberg/pull/57931))
+-   Add the `data-wp-each` directive to render lists of items using a template. ([57859](https://github.com/WordPress/gutenberg/pull/57859))
+
+### Breaking Changes
+
+-   Remove `data-wp-slot` and `data-wp-fill`. ([#57854](https://github.com/WordPress/gutenberg/pull/57854))
+-   Remove `wp-data-navigation-link` directive. ([#57853](https://github.com/WordPress/gutenberg/pull/57853))
+-   Remove unused `state` and rename `props` to `attributes` in `getElement()`. ([#57974](https://github.com/WordPress/gutenberg/pull/57974))
+-   Convert `navigate` and `prefetch` function to actions of the new `core/router` store, available when importing the `@wordpress/interactivity-router` module. ([#57924](https://github.com/WordPress/gutenberg/pull/57924))
+
+### Bug Fixes
+
+-   Prevent `wp-data-on=""` from creating `onDefault` handlers. ([#57925](https://github.com/WordPress/gutenberg/pull/57925))
+
+## 3.2.0 (2024-01-10)
+
+### Bug Fixes
+
+-   Fix namespaces when there are nested interactive regions. ([#57029](https://github.com/WordPress/gutenberg/pull/57029))
+
+## 3.1.0 (2023-12-13)
+
+## 3.0.0 (2023-11-29)
+
+### Breaking Changes
+
+-   Implement the new `store()` API as specified in the [proposal](https://github.com/WordPress/gutenberg/discussions/53586). ([#55459](https://github.com/WordPress/gutenberg/pull/55459))
+
+## 2.7.0 (2023-11-16)
+
+## 2.6.0 (2023-11-02)
+
+### Bug Fixes
+
+-   Update the title when using enhanced pagination. ([#55446](https://github.com/WordPress/gutenberg/pull/55446))
+
+## 2.5.0 (2023-10-18)
+
+## 2.4.0 (2023-10-05)
+
+## 2.3.0 (2023-09-20)
+
+### Enhancements
+
+-   Improve `navigate()` to render only the result of the last call when multiple happen simultaneously. ([#54201](https://github.com/WordPress/gutenberg/pull/54201))
+
+### Bug Fixes
+
+-   Remove `role` attribute when set to `null` in `data-wp-bind`. ([#54608](https://github.com/WordPress/gutenberg/pull/54608))
+-   Add `timeout` option to `navigate()`, with a default value of `10000` milliseconds. ([#54474](https://github.com/WordPress/gutenberg/pull/54474))
+
+## 2.2.0 (2023-08-31)
+
+### Enhancements
+
+-   Support keys using `data-wp-key`. ([#53844](https://github.com/WordPress/gutenberg/pull/53844))
+-   Merge new server-side rendered context on client-side navigation. ([#53853](https://github.com/WordPress/gutenberg/pull/53853))
+-   Support region-based client-side navigation. ([#53733](https://github.com/WordPress/gutenberg/pull/53733))
+-   Improve `data-wp-bind` hydration to match Preact's logic. ([#54003](https://github.com/WordPress/gutenberg/pull/54003))
+
+### New Features
+
+-   Add new directives that implement the Slot and Fill pattern: `data-wp-slot-provider`, `data-wp-slot` and `data-wp-fill`. ([#53958](https://github.com/WordPress/gutenberg/pull/53958))
+
+## 2.1.0 (2023-08-16)
+
+### New Features
+
+-   Allow passing optional `afterLoad` callbacks to `store` calls. ([#53363](https://github.com/WordPress/gutenberg/pull/53363))
+
+### Bug Fixes
+
+-   Add support for underscores and leading dashes in the suffix part of the directive. ([#53337](https://github.com/WordPress/gutenberg/pull/53337))
+-   Add an asynchronous short circuit to `useSignalEffect` to avoid infinite loops. ([#53358](https://github.com/WordPress/gutenberg/pull/53358))
+
+### Enhancements
+
+-   Add JSDoc comments to `store()` and `directive()` functions. ([#52469](https://github.com/WordPress/gutenberg/pull/52469))
+
+## 2.0.0 (2023-08-10)
+
+### Breaking Changes
+
+-   Remove the `wp-show` directive until we figure out its final implementation. ([#53240](https://github.com/WordPress/gutenberg/pull/53240))
+
+## 1.2.0 (2023-07-20)
+
+### New Features
+
+-   Runtime support for the `data-wp-style` directive. ([#52645](https://github.com/WordPress/gutenberg/pull/52645))
diff --git a/packages/interactivity/README.md b/packages/interactivity/README.md
new file mode 100644
index 00000000000000..062f51bd0e35a5
--- /dev/null
+++ b/packages/interactivity/README.md
@@ -0,0 +1,29 @@
+# `@wordpress/interactivity`
+
+The package `@wordpress/interactivity` contains the logic that enables the Interactivity API which was [introduced in WordPress Core in v6.5](https://make.wordpress.org/core/2024/02/19/merge-announcement-interactivity-api/). This means this package is already bundled in Core in any version of WordPress higher than v6.5.
+
+<div class="callout callout-info">
+    Check the <a href="https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/">Interactivity API Reference docs in the Block Editor handbook</a> to learn more about the Interactivity API.
+</div>
+
+
+## Installation
+
+Install the Interactivity API using the command:
+
+```bash
+npm install @wordpress/interactivity --save
+```
+
+This step is only required if you use the Interactivity API outside WordPress.
+
+Within WordPress, the package is already bundled in Core. To ensure it's loaded, add `@wordpress/interactivity` to the dependency array of the script module. This process is often done automatically with tools like [`wp-scripts`](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/).
+
+Furthermore, this package assumes your code will run in an **ES2015+** environment. If you're using an environment with 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.
+
+
+## License
+
+Interactivity API proposal, as part of Gutenberg and the WordPress project is free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See [LICENSE.md](https://github.com/WordPress/gutenberg/blob/trunk/LICENSE.md) for complete license.
+
+<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/interactivity/package.json b/packages/interactivity/package.json
new file mode 100644
index 00000000000000..90356de25b646a
--- /dev/null
+++ b/packages/interactivity/package.json
@@ -0,0 +1,40 @@
+{
+	"name": "@wordpress/interactivity",
+	"version": "6.13.0",
+	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"interactivity"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/interactivity/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/interactivity"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScriptModuleExports": {
+		".": "./build-module/index.js",
+		"./debug": "./build-module/debug.js"
+	},
+	"types": "build-types",
+	"dependencies": {
+		"@preact/signals": "^1.3.0",
+		"preact": "^10.24.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/interactivity/src/constants.ts b/packages/interactivity/src/constants.ts
new file mode 100644
index 00000000000000..f461b91baff894
--- /dev/null
+++ b/packages/interactivity/src/constants.ts
@@ -0,0 +1 @@
+export const directivePrefix: string = 'wp';
diff --git a/packages/interactivity/src/debug.ts b/packages/interactivity/src/debug.ts
new file mode 100644
index 00000000000000..36132142512927
--- /dev/null
+++ b/packages/interactivity/src/debug.ts
@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import 'preact/debug';
+
+export * from './index';
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
new file mode 100644
index 00000000000000..31e07d095e0a4c
--- /dev/null
+++ b/packages/interactivity/src/directives.tsx
@@ -0,0 +1,610 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable react-hooks/exhaustive-deps */
+
+/**
+ * External dependencies
+ */
+import { h as createElement, type RefObject } from 'preact';
+import { useContext, useMemo, useRef } from 'preact/hooks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useWatch,
+	useInit,
+	kebabToCamelCase,
+	warn,
+	splitTask,
+	isPlainObject,
+} from './utils';
+import {
+	directive,
+	getEvaluate,
+	isDefaultDirectiveSuffix,
+	isNonDefaultDirectiveSuffix,
+	type DirectiveCallback,
+	type DirectiveEntry,
+} from './hooks';
+import { getScope } from './scopes';
+import { proxifyState, proxifyContext, deepMerge } from './proxies';
+
+/**
+ * Recursively clone the passed object.
+ *
+ * @param source Source object.
+ * @return Cloned object.
+ */
+function deepClone< T >( source: T ): T {
+	if ( isPlainObject( source ) ) {
+		return Object.fromEntries(
+			Object.entries( source as object ).map( ( [ key, value ] ) => [
+				key,
+				deepClone( value ),
+			] )
+		) as T;
+	}
+	if ( Array.isArray( source ) ) {
+		return source.map( ( i ) => deepClone( i ) ) as T;
+	}
+	return source;
+}
+
+const newRule =
+	/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
+const ruleClean = /\/\*[^]*?\*\/|  +/g;
+const ruleNewline = /\n+/g;
+const empty = ' ';
+
+/**
+ * Convert a css style string into a object.
+ *
+ * Made by Cristian Bote (@cristianbote) for Goober.
+ * https://unpkg.com/browse/goober@2.1.13/src/core/astish.js
+ *
+ * @param val CSS string.
+ * @return CSS object.
+ */
+const cssStringToObject = (
+	val: string
+): Record< string, string | number > => {
+	const tree = [ {} ];
+	let block, left;
+
+	while ( ( block = newRule.exec( val.replace( ruleClean, '' ) ) ) ) {
+		if ( block[ 4 ] ) {
+			tree.shift();
+		} else if ( block[ 3 ] ) {
+			left = block[ 3 ].replace( ruleNewline, empty ).trim();
+			tree.unshift( ( tree[ 0 ][ left ] = tree[ 0 ][ left ] || {} ) );
+		} else {
+			tree[ 0 ][ block[ 1 ] ] = block[ 2 ]
+				.replace( ruleNewline, empty )
+				.trim();
+		}
+	}
+
+	return tree[ 0 ];
+};
+
+/**
+ * Creates a directive that adds an event listener to the global window or
+ * document object.
+ *
+ * @param type 'window' or 'document'
+ */
+const getGlobalEventDirective = (
+	type: 'window' | 'document'
+): DirectiveCallback => {
+	return ( { directives, evaluate } ) => {
+		directives[ `on-${ type }` ]
+			.filter( isNonDefaultDirectiveSuffix )
+			.forEach( ( entry ) => {
+				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
+				useInit( () => {
+					const cb = ( event: Event ) => evaluate( entry, event );
+					const globalVar = type === 'window' ? window : document;
+					globalVar.addEventListener( eventName, cb );
+					return () => globalVar.removeEventListener( eventName, cb );
+				} );
+			} );
+	};
+};
+
+/**
+ * Creates a directive that adds an async event listener to the global window or
+ * document object.
+ *
+ * @param type 'window' or 'document'
+ */
+const getGlobalAsyncEventDirective = (
+	type: 'window' | 'document'
+): DirectiveCallback => {
+	return ( { directives, evaluate } ) => {
+		directives[ `on-async-${ type }` ]
+			.filter( isNonDefaultDirectiveSuffix )
+			.forEach( ( entry ) => {
+				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
+				useInit( () => {
+					const cb = async ( event: Event ) => {
+						await splitTask();
+						evaluate( entry, event );
+					};
+					const globalVar = type === 'window' ? window : document;
+					globalVar.addEventListener( eventName, cb, {
+						passive: true,
+					} );
+					return () => globalVar.removeEventListener( eventName, cb );
+				} );
+			} );
+	};
+};
+
+export default () => {
+	// data-wp-context
+	directive(
+		'context',
+		( {
+			directives: { context },
+			props: { children },
+			context: inheritedContext,
+		} ) => {
+			const { Provider } = inheritedContext;
+			const defaultEntry = context.find( isDefaultDirectiveSuffix );
+			const { client: inheritedClient, server: inheritedServer } =
+				useContext( inheritedContext );
+
+			const ns = defaultEntry!.namespace;
+			const client = useRef( proxifyState( ns, {} ) );
+			const server = useRef( proxifyState( ns, {}, { readOnly: true } ) );
+
+			// No change should be made if `defaultEntry` does not exist.
+			const contextStack = useMemo( () => {
+				const result = {
+					client: { ...inheritedClient },
+					server: { ...inheritedServer },
+				};
+				if ( defaultEntry ) {
+					const { namespace, value } = defaultEntry;
+					// Check that the value is a JSON object. Send a console warning if not.
+					if ( ! isPlainObject( value ) ) {
+						warn(
+							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
+						);
+					}
+					deepMerge(
+						client.current,
+						deepClone( value ) as object,
+						false
+					);
+					deepMerge( server.current, deepClone( value ) as object );
+					result.client[ namespace ] = proxifyContext(
+						client.current,
+						inheritedClient[ namespace ]
+					);
+					result.server[ namespace ] = proxifyContext(
+						server.current,
+						inheritedServer[ namespace ]
+					);
+				}
+				return result;
+			}, [ defaultEntry, inheritedClient, inheritedServer ] );
+
+			return createElement( Provider, { value: contextStack }, children );
+		},
+		{ priority: 5 }
+	);
+
+	// data-wp-watch--[name]
+	directive( 'watch', ( { directives: { watch }, evaluate } ) => {
+		watch.forEach( ( entry ) => {
+			useWatch( () => {
+				let start;
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+					if ( globalThis.SCRIPT_DEBUG ) {
+						// eslint-disable-next-line no-unused-vars
+						start = performance.now();
+					}
+				}
+				const result = evaluate( entry );
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+					if ( globalThis.SCRIPT_DEBUG ) {
+						performance.measure(
+							`interactivity api watch ${ entry.namespace }`,
+							{
+								start,
+								end: performance.now(),
+								detail: {
+									devtools: {
+										track: `IA: watch ${ entry.namespace }`,
+									},
+								},
+							}
+						);
+					}
+				}
+				return result;
+			} );
+		} );
+	} );
+
+	// data-wp-init--[name]
+	directive( 'init', ( { directives: { init }, evaluate } ) => {
+		init.forEach( ( entry ) => {
+			// TODO: Replace with useEffect to prevent unneeded scopes.
+			useInit( () => {
+				let start;
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+					if ( globalThis.SCRIPT_DEBUG ) {
+						start = performance.now();
+					}
+				}
+				const result = evaluate( entry );
+				if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+					if ( globalThis.SCRIPT_DEBUG ) {
+						performance.measure(
+							`interactivity api init ${ entry.namespace }`,
+							{
+								// eslint-disable-next-line no-undef
+								start,
+								end: performance.now(),
+								detail: {
+									devtools: {
+										track: `IA: init ${ entry.namespace }`,
+									},
+								},
+							}
+						);
+					}
+				}
+				return result;
+			} );
+		} );
+	} );
+
+	// data-wp-on--[event]
+	directive( 'on', ( { directives: { on }, element, evaluate } ) => {
+		const events = new Map< string, Set< DirectiveEntry > >();
+		on.filter( isNonDefaultDirectiveSuffix ).forEach( ( entry ) => {
+			const event = entry.suffix.split( '--' )[ 0 ];
+			if ( ! events.has( event ) ) {
+				events.set( event, new Set< DirectiveEntry >() );
+			}
+			events.get( event )!.add( entry );
+		} );
+
+		events.forEach( ( entries, eventType ) => {
+			const existingHandler = element.props[ `on${ eventType }` ];
+			element.props[ `on${ eventType }` ] = ( event: Event ) => {
+				entries.forEach( ( entry ) => {
+					if ( existingHandler ) {
+						existingHandler( event );
+					}
+					let start;
+					if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+						if ( globalThis.SCRIPT_DEBUG ) {
+							start = performance.now();
+						}
+					}
+					evaluate( entry, event );
+					if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+						if ( globalThis.SCRIPT_DEBUG ) {
+							performance.measure(
+								`interactivity api on ${ entry.namespace }`,
+								{
+									// eslint-disable-next-line no-undef
+									start,
+									end: performance.now(),
+									detail: {
+										devtools: {
+											track: `IA: on ${ entry.namespace }`,
+										},
+									},
+								}
+							);
+						}
+					}
+				} );
+			};
+		} );
+	} );
+
+	// data-wp-on-async--[event]
+	directive(
+		'on-async',
+		( { directives: { 'on-async': onAsync }, element, evaluate } ) => {
+			const events = new Map< string, Set< DirectiveEntry > >();
+			onAsync
+				.filter( isNonDefaultDirectiveSuffix )
+				.forEach( ( entry ) => {
+					const event = entry.suffix.split( '--' )[ 0 ];
+					if ( ! events.has( event ) ) {
+						events.set( event, new Set< DirectiveEntry >() );
+					}
+					events.get( event )!.add( entry );
+				} );
+
+			events.forEach( ( entries, eventType ) => {
+				const existingHandler = element.props[ `on${ eventType }` ];
+				element.props[ `on${ eventType }` ] = ( event: Event ) => {
+					if ( existingHandler ) {
+						existingHandler( event );
+					}
+					entries.forEach( async ( entry ) => {
+						await splitTask();
+						evaluate( entry, event );
+					} );
+				};
+			} );
+		}
+	);
+
+	// data-wp-on-window--[event]
+	directive( 'on-window', getGlobalEventDirective( 'window' ) );
+	// data-wp-on-document--[event]
+	directive( 'on-document', getGlobalEventDirective( 'document' ) );
+
+	// data-wp-on-async-window--[event]
+	directive( 'on-async-window', getGlobalAsyncEventDirective( 'window' ) );
+	// data-wp-on-async-document--[event]
+	directive(
+		'on-async-document',
+		getGlobalAsyncEventDirective( 'document' )
+	);
+
+	// data-wp-class--[classname]
+	directive(
+		'class',
+		( { directives: { class: classNames }, element, evaluate } ) => {
+			classNames
+				.filter( isNonDefaultDirectiveSuffix )
+				.forEach( ( entry ) => {
+					const className = entry.suffix;
+					const result = evaluate( entry );
+					const currentClass = element.props.class || '';
+					const classFinder = new RegExp(
+						`(^|\\s)${ className }(\\s|$)`,
+						'g'
+					);
+					if ( ! result ) {
+						element.props.class = currentClass
+							.replace( classFinder, ' ' )
+							.trim();
+					} else if ( ! classFinder.test( currentClass ) ) {
+						element.props.class = currentClass
+							? `${ currentClass } ${ className }`
+							: className;
+					}
+
+					useInit( () => {
+						/*
+						 * This seems necessary because Preact doesn't change the class
+						 * names on the hydration, so we have to do it manually. It doesn't
+						 * need deps because it only needs to do it the first time.
+						 */
+						if ( ! result ) {
+							(
+								element.ref as RefObject< HTMLElement >
+							 ).current!.classList.remove( className );
+						} else {
+							(
+								element.ref as RefObject< HTMLElement >
+							 ).current!.classList.add( className );
+						}
+					} );
+				} );
+		}
+	);
+
+	// data-wp-style--[style-prop]
+	directive( 'style', ( { directives: { style }, element, evaluate } ) => {
+		style.filter( isNonDefaultDirectiveSuffix ).forEach( ( entry ) => {
+			const styleProp = entry.suffix;
+			const result = evaluate( entry );
+			element.props.style = element.props.style || {};
+			if ( typeof element.props.style === 'string' ) {
+				element.props.style = cssStringToObject( element.props.style );
+			}
+			if ( ! result ) {
+				delete element.props.style[ styleProp ];
+			} else {
+				element.props.style[ styleProp ] = result;
+			}
+
+			useInit( () => {
+				/*
+				 * This seems necessary because Preact doesn't change the styles on
+				 * the hydration, so we have to do it manually. It doesn't need deps
+				 * because it only needs to do it the first time.
+				 */
+				if ( ! result ) {
+					(
+						element.ref as RefObject< HTMLElement >
+					 ).current!.style.removeProperty( styleProp );
+				} else {
+					( element.ref as RefObject< HTMLElement > ).current!.style[
+						styleProp
+					] = result;
+				}
+			} );
+		} );
+	} );
+
+	// data-wp-bind--[attribute]
+	directive( 'bind', ( { directives: { bind }, element, evaluate } ) => {
+		bind.filter( isNonDefaultDirectiveSuffix ).forEach( ( entry ) => {
+			const attribute = entry.suffix;
+			const result = evaluate( entry );
+			element.props[ attribute ] = result;
+
+			/*
+			 * This is necessary because Preact doesn't change the attributes on the
+			 * hydration, so we have to do it manually. It only needs to do it the
+			 * first time. After that, Preact will handle the changes.
+			 */
+			useInit( () => {
+				const el = ( element.ref as RefObject< HTMLElement > ).current!;
+
+				/*
+				 * We set the value directly to the corresponding HTMLElement instance
+				 * property excluding the following special cases. We follow Preact's
+				 * logic: https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L110-L129
+				 */
+				if ( attribute === 'style' ) {
+					if ( typeof result === 'string' ) {
+						el.style.cssText = result;
+					}
+					return;
+				} else if (
+					attribute !== 'width' &&
+					attribute !== 'height' &&
+					attribute !== 'href' &&
+					attribute !== 'list' &&
+					attribute !== 'form' &&
+					/*
+					 * The value for `tabindex` follows the parsing rules for an
+					 * integer. If that fails, or if the attribute isn't present, then
+					 * the browsers should "follow platform conventions to determine if
+					 * the element should be considered as a focusable area",
+					 * practically meaning that most elements get a default of `-1` (not
+					 * focusable), but several also get a default of `0` (focusable in
+					 * order after all elements with a positive `tabindex` value).
+					 *
+					 * @see https://html.spec.whatwg.org/#tabindex-value
+					 */
+					attribute !== 'tabIndex' &&
+					attribute !== 'download' &&
+					attribute !== 'rowSpan' &&
+					attribute !== 'colSpan' &&
+					attribute !== 'role' &&
+					attribute in el
+				) {
+					try {
+						el[ attribute ] =
+							result === null || result === undefined
+								? ''
+								: result;
+						return;
+					} catch ( err ) {}
+				}
+				/*
+				 * aria- and data- attributes have no boolean representation.
+				 * A `false` value is different from the attribute not being
+				 * present, so we can't remove it.
+				 * We follow Preact's logic: https://github.com/preactjs/preact/blob/ea49f7a0f9d1ff2c98c0bdd66aa0cbc583055246/src/diff/props.js#L131C24-L136
+				 */
+				if (
+					result !== null &&
+					result !== undefined &&
+					( result !== false || attribute[ 4 ] === '-' )
+				) {
+					el.setAttribute( attribute, result );
+				} else {
+					el.removeAttribute( attribute );
+				}
+			} );
+		} );
+	} );
+
+	// data-wp-ignore
+	directive(
+		'ignore',
+		( {
+			element: {
+				type: Type,
+				props: { innerHTML, ...rest },
+			},
+		}: {
+			element: any;
+		} ) => {
+			// Preserve the initial inner HTML.
+			const cached = useMemo( () => innerHTML, [] );
+			return createElement( Type, {
+				dangerouslySetInnerHTML: { __html: cached },
+				...rest,
+			} );
+		}
+	);
+
+	// data-wp-text
+	directive( 'text', ( { directives: { text }, element, evaluate } ) => {
+		const entry = text.find( isDefaultDirectiveSuffix );
+		if ( ! entry ) {
+			element.props.children = null;
+			return;
+		}
+
+		try {
+			const result = evaluate( entry );
+			element.props.children =
+				typeof result === 'object' ? null : result.toString();
+		} catch ( e ) {
+			element.props.children = null;
+		}
+	} );
+
+	// data-wp-run
+	directive( 'run', ( { directives: { run }, evaluate } ) => {
+		run.forEach( ( entry ) => evaluate( entry ) );
+	} );
+
+	// data-wp-each--[item]
+	directive(
+		'each',
+		( {
+			directives: { each, 'each-key': eachKey },
+			context: inheritedContext,
+			element,
+			evaluate,
+		} ) => {
+			if ( element.type !== 'template' ) {
+				return;
+			}
+
+			const { Provider } = inheritedContext;
+			const inheritedValue = useContext( inheritedContext );
+
+			const [ entry ] = each;
+			const { namespace } = entry;
+
+			const list = evaluate( entry );
+			const itemProp = isNonDefaultDirectiveSuffix( entry )
+				? kebabToCamelCase( entry.suffix )
+				: 'item';
+			return list.map( ( item ) => {
+				const itemContext = proxifyContext(
+					proxifyState( namespace, {} ),
+					inheritedValue.client[ namespace ]
+				);
+				const mergedContext = {
+					client: {
+						...inheritedValue.client,
+						[ namespace ]: itemContext,
+					},
+					server: { ...inheritedValue.server },
+				};
+
+				// Set the item after proxifying the context.
+				mergedContext.client[ namespace ][ itemProp ] = item;
+
+				const scope = {
+					...getScope(),
+					context: mergedContext.client,
+					serverContext: mergedContext.server,
+				};
+				const key = eachKey
+					? getEvaluate( { scope } )( eachKey[ 0 ] )
+					: item;
+
+				return createElement(
+					Provider,
+					{ value: mergedContext, key },
+					element.props.content
+				);
+			} );
+		},
+		{ priority: 20 }
+	);
+
+	directive( 'each-child', () => null, { priority: 1 } );
+};
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
new file mode 100644
index 00000000000000..e9b9f48ba3518e
--- /dev/null
+++ b/packages/interactivity/src/hooks.tsx
@@ -0,0 +1,354 @@
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable react-hooks/exhaustive-deps */
+
+/**
+ * External dependencies
+ */
+import {
+	h as createElement,
+	options,
+	createContext,
+	cloneElement,
+	type ComponentChildren,
+} from 'preact';
+import { useRef, useCallback, useContext } from 'preact/hooks';
+import type { VNode, Context } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import { store, stores, universalUnlock } from './store';
+import { warn } from './utils';
+import { getScope, setScope, resetScope, type Scope } from './scopes';
+export interface DirectiveEntry {
+	value: string | object;
+	namespace: string;
+	suffix: string | null;
+}
+
+export interface NonDefaultSuffixDirectiveEntry extends DirectiveEntry {
+	suffix: string;
+}
+
+export interface DefaultSuffixDirectiveEntry extends DirectiveEntry {
+	suffix: null;
+}
+
+export function isNonDefaultDirectiveSuffix(
+	entry: DirectiveEntry
+): entry is NonDefaultSuffixDirectiveEntry {
+	return entry.suffix !== null;
+}
+
+export function isDefaultDirectiveSuffix(
+	entry: DirectiveEntry
+): entry is DefaultSuffixDirectiveEntry {
+	return entry.suffix === null;
+}
+
+type DirectiveEntries = Record< string, DirectiveEntry[] >;
+
+interface DirectiveArgs {
+	/**
+	 * Object map with the defined directives of the element being evaluated.
+	 */
+	directives: DirectiveEntries;
+	/**
+	 * Props present in the current element.
+	 */
+	props: { children?: ComponentChildren };
+	/**
+	 * Virtual node representing the element.
+	 */
+	element: VNode< {
+		class?: string;
+		style?: string | Record< string, string | number >;
+		content?: ComponentChildren;
+	} >;
+	/**
+	 * The inherited context.
+	 */
+	context: Context< any >;
+	/**
+	 * Function that resolves a given path to a value either in the store or the
+	 * context.
+	 */
+	evaluate: Evaluate;
+}
+
+export interface DirectiveCallback {
+	( args: DirectiveArgs ): VNode< any > | null | void;
+}
+
+interface DirectiveOptions {
+	/**
+	 * Value that specifies the priority to evaluate directives of this type.
+	 * Lower numbers correspond with earlier execution.
+	 *
+	 * @default 10
+	 */
+	priority?: number;
+}
+
+export interface Evaluate {
+	( entry: DirectiveEntry, ...args: any[] ): any;
+}
+
+interface GetEvaluate {
+	( args: { scope: Scope } ): Evaluate;
+}
+
+type PriorityLevel = string[];
+
+interface GetPriorityLevels {
+	( directives: DirectiveEntries ): PriorityLevel[];
+}
+
+interface DirectivesProps {
+	directives: DirectiveEntries;
+	priorityLevels: PriorityLevel[];
+	element: VNode;
+	originalProps: any;
+	previousScope?: Scope;
+}
+
+// Main context.
+const context = createContext< any >( { client: {}, server: {} } );
+
+// WordPress Directives.
+const directiveCallbacks: Record< string, DirectiveCallback > = {};
+const directivePriorities: Record< string, number > = {};
+
+/**
+ * Register a new directive type in the Interactivity API runtime.
+ *
+ * @example
+ * ```js
+ * directive(
+ *   'alert', // Name without the `data-wp-` prefix.
+ *   ( { directives: { alert }, element, evaluate } ) => {
+ *     const defaultEntry = alert.find( isDefaultDirectiveSuffix );
+ *     element.props.onclick = () => { alert( evaluate( defaultEntry ) ); }
+ *   }
+ * )
+ * ```
+ *
+ * The previous code registers a custom directive type for displaying an alert
+ * message whenever an element using it is clicked. The message text is obtained
+ * from the store under the inherited namespace, using `evaluate`.
+ *
+ * When the HTML is processed by the Interactivity API, any element containing
+ * the `data-wp-alert` directive will have the `onclick` event handler, e.g.,
+ *
+ * ```html
+ * <div data-wp-interactive="messages">
+ *   <button data-wp-alert="state.alert">Click me!</button>
+ * </div>
+ * ```
+ * Note that, in the previous example, the directive callback gets the path
+ * value (`state.alert`) from the directive entry with suffix `null`. A
+ * custom suffix can also be specified by appending `--` to the directive
+ * attribute, followed by the suffix, like in the following HTML snippet:
+ *
+ * ```html
+ * <div data-wp-interactive="myblock">
+ *   <button
+ *     data-wp-color--text="state.text"
+ *     data-wp-color--background="state.background"
+ *   >Click me!</button>
+ * </div>
+ * ```
+ *
+ * This could be an hypothetical implementation of the custom directive used in
+ * the snippet above.
+ *
+ * @example
+ * ```js
+ * directive(
+ *   'color', // Name without prefix and suffix.
+ *   ( { directives: { color: colors }, ref, evaluate } ) =>
+ *     colors.forEach( ( color ) => {
+ *       if ( color.suffix = 'text' ) {
+ *         ref.style.setProperty(
+ *           'color',
+ *           evaluate( color.text )
+ *         );
+ *       }
+ *       if ( color.suffix = 'background' ) {
+ *         ref.style.setProperty(
+ *           'background-color',
+ *           evaluate( color.background )
+ *         );
+ *       }
+ *     } );
+ *   }
+ * )
+ * ```
+ *
+ * @param name             Directive name, without the `data-wp-` prefix.
+ * @param callback         Function that runs the directive logic.
+ * @param options          Options object.
+ * @param options.priority Option to control the directive execution order. The
+ *                         lesser, the highest priority. Default is `10`.
+ */
+export const directive = (
+	name: string,
+	callback: DirectiveCallback,
+	{ priority = 10 }: DirectiveOptions = {}
+) => {
+	directiveCallbacks[ name ] = callback;
+	directivePriorities[ name ] = priority;
+};
+
+// Resolve the path to some property of the store object.
+const resolve = ( path: string, namespace: string ) => {
+	if ( ! namespace ) {
+		warn(
+			`Namespace missing for "${ path }". The value for that path won't be resolved.`
+		);
+		return;
+	}
+	let resolvedStore = stores.get( namespace );
+	if ( typeof resolvedStore === 'undefined' ) {
+		resolvedStore = store(
+			namespace,
+			{},
+			{
+				lock: universalUnlock,
+			}
+		);
+	}
+	const current = {
+		...resolvedStore,
+		context: getScope().context[ namespace ],
+	};
+	try {
+		// TODO: Support lazy/dynamically initialized stores
+		return path.split( '.' ).reduce( ( acc, key ) => acc[ key ], current );
+	} catch ( e ) {}
+};
+
+// Generate the evaluate function.
+export const getEvaluate: GetEvaluate =
+	( { scope } ) =>
+	( entry, ...args ) => {
+		let { value: path, namespace } = entry;
+		if ( typeof path !== 'string' ) {
+			throw new Error( 'The `value` prop should be a string path' );
+		}
+		// If path starts with !, remove it and save a flag.
+		const hasNegationOperator =
+			path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
+		setScope( scope );
+		const value = resolve( path, namespace );
+		const result = typeof value === 'function' ? value( ...args ) : value;
+		resetScope();
+		return hasNegationOperator ? ! result : result;
+	};
+
+// Separate directives by priority. The resulting array contains objects
+// of directives grouped by same priority, and sorted in ascending order.
+const getPriorityLevels: GetPriorityLevels = ( directives ) => {
+	const byPriority = Object.keys( directives ).reduce<
+		Record< number, string[] >
+	>( ( obj, name ) => {
+		if ( directiveCallbacks[ name ] ) {
+			const priority = directivePriorities[ name ];
+			( obj[ priority ] = obj[ priority ] || [] ).push( name );
+		}
+		return obj;
+	}, {} );
+
+	return Object.entries( byPriority )
+		.sort( ( [ p1 ], [ p2 ] ) => parseInt( p1 ) - parseInt( p2 ) )
+		.map( ( [ , arr ] ) => arr );
+};
+
+// Component that wraps each priority level of directives of an element.
+const Directives = ( {
+	directives,
+	priorityLevels: [ currentPriorityLevel, ...nextPriorityLevels ],
+	element,
+	originalProps,
+	previousScope,
+}: DirectivesProps ) => {
+	// Initialize the scope of this element. These scopes are different per each
+	// level because each level has a different context, but they share the same
+	// element ref, state and props.
+	const scope = useRef< Scope >( {} as Scope ).current;
+	scope.evaluate = useCallback( getEvaluate( { scope } ), [] );
+	const { client, server } = useContext( context );
+	scope.context = client;
+	scope.serverContext = server;
+	/* eslint-disable react-hooks/rules-of-hooks */
+	scope.ref = previousScope?.ref || useRef( null );
+	/* eslint-enable react-hooks/rules-of-hooks */
+
+	// Create a fresh copy of the vnode element and add the props to the scope,
+	// named as attributes (HTML Attributes).
+	element = cloneElement( element, { ref: scope.ref } );
+	scope.attributes = element.props;
+
+	// Recursively render the wrapper for the next priority level.
+	const children =
+		nextPriorityLevels.length > 0
+			? createElement( Directives, {
+					directives,
+					priorityLevels: nextPriorityLevels,
+					element,
+					originalProps,
+					previousScope: scope,
+			  } )
+			: element;
+
+	const props = { ...originalProps, children };
+	const directiveArgs = {
+		directives,
+		props,
+		element,
+		context,
+		evaluate: scope.evaluate,
+	};
+
+	setScope( scope );
+
+	for ( const directiveName of currentPriorityLevel ) {
+		const wrapper = directiveCallbacks[ directiveName ]?.( directiveArgs );
+		if ( wrapper !== undefined ) {
+			props.children = wrapper;
+		}
+	}
+
+	resetScope();
+
+	return props.children;
+};
+
+// Preact Options Hook called each time a vnode is created.
+const old = options.vnode;
+options.vnode = ( vnode: VNode< any > ) => {
+	if ( vnode.props.__directives ) {
+		const props = vnode.props;
+		const directives = props.__directives;
+		if ( directives.key ) {
+			vnode.key = directives.key.find( isDefaultDirectiveSuffix ).value;
+		}
+		delete props.__directives;
+		const priorityLevels = getPriorityLevels( directives );
+		if ( priorityLevels.length > 0 ) {
+			vnode.props = {
+				directives,
+				priorityLevels,
+				originalProps: props,
+				type: vnode.type,
+				element: createElement( vnode.type as any, props ),
+				top: true,
+			};
+			vnode.type = Directives;
+		}
+	}
+
+	if ( old ) {
+		old( vnode );
+	}
+};
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
new file mode 100644
index 00000000000000..9d013e4e744ed5
--- /dev/null
+++ b/packages/interactivity/src/index.ts
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { h, cloneElement, render } from 'preact';
+import { batch } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import registerDirectives from './directives';
+import { init, getRegionRootFragment, initialVdom } from './init';
+import { directivePrefix } from './constants';
+import { toVdom } from './vdom';
+import { directive } from './hooks';
+import { getNamespace } from './namespaces';
+import { parseServerData, populateServerData } from './store';
+import { proxifyState } from './proxies';
+
+export { store, getConfig, getServerState } from './store';
+export { getContext, getServerContext, getElement } from './scopes';
+export {
+	withScope,
+	useWatch,
+	useInit,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+	useMemo,
+	splitTask,
+} from './utils';
+
+export { useState, useRef } from 'preact/hooks';
+
+const requiredConsent =
+	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.';
+
+export const privateApis = ( lock ): any => {
+	if ( lock === requiredConsent ) {
+		return {
+			directivePrefix,
+			getRegionRootFragment,
+			initialVdom,
+			toVdom,
+			directive,
+			getNamespace,
+			h,
+			cloneElement,
+			render,
+			proxifyState,
+			parseServerData,
+			populateServerData,
+			batch,
+		};
+	}
+
+	throw new Error( 'Forbidden access.' );
+};
+
+registerDirectives();
+init();
diff --git a/packages/interactivity/src/init.ts b/packages/interactivity/src/init.ts
new file mode 100644
index 00000000000000..fa1eec51c3e27e
--- /dev/null
+++ b/packages/interactivity/src/init.ts
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { hydrate, type ContainerNode, type ComponentChild } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { toVdom, hydratedIslands } from './vdom';
+import { createRootFragment, splitTask } from './utils';
+import { directivePrefix } from './constants';
+
+// Keep the same root fragment for each interactive region node.
+const regionRootFragments = new WeakMap();
+export const getRegionRootFragment = ( region: Element ): ContainerNode => {
+	if ( ! region.parentElement ) {
+		throw Error( 'The passed region should be an element with a parent.' );
+	}
+	if ( ! regionRootFragments.has( region ) ) {
+		regionRootFragments.set(
+			region,
+			createRootFragment( region.parentElement, region )
+		);
+	}
+	return regionRootFragments.get( region );
+};
+
+// Initial vDOM regions associated with its DOM element.
+export const initialVdom = new WeakMap< Element, ComponentChild[] >();
+
+// Initialize the router with the initial DOM.
+export const init = async () => {
+	const nodes = document.querySelectorAll(
+		`[data-${ directivePrefix }-interactive]`
+	);
+
+	/*
+	 * This `await` with setTimeout is required to apparently ensure that the interactive blocks have their stores
+	 * fully initialized prior to hydrating the blocks. If this is not present, then an error occurs, for example:
+	 * > view.js:46 Uncaught (in promise) ReferenceError: Cannot access 'state' before initialization
+	 * This occurs when splitTask() is implemented with scheduler.yield() as opposed to setTimeout(), as with the former
+	 * split tasks are added to the front of the task queue whereas with the latter they are added to the end of the queue.
+	 */
+	await new Promise( ( resolve ) => {
+		setTimeout( resolve, 0 );
+	} );
+
+	for ( const node of nodes ) {
+		if ( ! hydratedIslands.has( node ) ) {
+			await splitTask();
+			const fragment = getRegionRootFragment( node );
+			const vdom = toVdom( node );
+			initialVdom.set( node, vdom );
+			await splitTask();
+			hydrate( vdom, fragment );
+		}
+	}
+};
diff --git a/packages/interactivity/src/namespaces.ts b/packages/interactivity/src/namespaces.ts
new file mode 100644
index 00000000000000..9103f3c76e67bb
--- /dev/null
+++ b/packages/interactivity/src/namespaces.ts
@@ -0,0 +1,10 @@
+const namespaceStack: string[] = [];
+
+export const getNamespace = () => namespaceStack.slice( -1 )[ 0 ];
+
+export const setNamespace = ( namespace: string ) => {
+	namespaceStack.push( namespace );
+};
+export const resetNamespace = () => {
+	namespaceStack.pop();
+};
diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts
new file mode 100644
index 00000000000000..8d5bc54a8b831a
--- /dev/null
+++ b/packages/interactivity/src/proxies/context.ts
@@ -0,0 +1,72 @@
+const contextObjectToProxy = new WeakMap();
+const contextObjectToFallback = new WeakMap();
+const contextProxies = new WeakSet();
+
+const descriptor = Reflect.getOwnPropertyDescriptor;
+
+// TODO: Use the proxy registry to avoid multiple proxies on the same object.
+const contextHandlers: ProxyHandler< object > = {
+	get: ( target, key ) => {
+		const fallback = contextObjectToFallback.get( target );
+		// Always subscribe to prop changes in the current context.
+		const currentProp = target[ key ];
+
+		/*
+		 * Return the value from `target` if it exists, or from `fallback`
+		 * otherwise. This way, in the case the property doesn't exist either in
+		 * `target` or `fallback`, it also subscribes to changes in the parent
+		 * context.
+		 */
+		return key in target ? currentProp : fallback[ key ];
+	},
+	set: ( target, key, value ) => {
+		const fallback = contextObjectToFallback.get( target );
+
+		// If the property exists in the current context, modify it. Otherwise,
+		// add it to the current context.
+		const obj = key in target || ! ( key in fallback ) ? target : fallback;
+		obj[ key ] = value;
+
+		return true;
+	},
+	ownKeys: ( target ) => [
+		...new Set( [
+			...Object.keys( contextObjectToFallback.get( target ) ),
+			...Object.keys( target ),
+		] ),
+	],
+	getOwnPropertyDescriptor: ( target, key ) =>
+		descriptor( target, key ) ||
+		descriptor( contextObjectToFallback.get( target ), key ),
+	has: ( target, key ) =>
+		Reflect.has( target, key ) ||
+		Reflect.has( contextObjectToFallback.get( target ), key ),
+};
+
+/**
+ * Wrap a context object with a proxy to reproduce the context stack. The proxy
+ * uses the passed `inherited` context as a fallback to look up for properties
+ * that don't exist in the given context. Also, updated properties are modified
+ * where they are defined, or added to the main context when they don't exist.
+ *
+ * @param current   Current context.
+ * @param inherited Inherited context, used as fallback.
+ *
+ * @return The wrapped context object.
+ */
+export const proxifyContext = (
+	current: object,
+	inherited: object = {}
+): object => {
+	if ( contextProxies.has( current ) ) {
+		throw Error( 'This object cannot be proxified.' );
+	}
+	// Update the fallback object reference when it changes.
+	contextObjectToFallback.set( current, inherited );
+	if ( ! contextObjectToProxy.has( current ) ) {
+		const proxy = new Proxy( current, contextHandlers );
+		contextObjectToProxy.set( current, proxy );
+		contextProxies.add( proxy );
+	}
+	return contextObjectToProxy.get( current );
+};
diff --git a/packages/interactivity/src/proxies/index.ts b/packages/interactivity/src/proxies/index.ts
new file mode 100644
index 00000000000000..168e6467fc7016
--- /dev/null
+++ b/packages/interactivity/src/proxies/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export { proxifyState, peek, deepMerge } from './state';
+export { proxifyStore } from './store';
+export { proxifyContext } from './context';
diff --git a/packages/interactivity/src/proxies/registry.ts b/packages/interactivity/src/proxies/registry.ts
new file mode 100644
index 00000000000000..3bfe3b9168b79e
--- /dev/null
+++ b/packages/interactivity/src/proxies/registry.ts
@@ -0,0 +1,96 @@
+/**
+ * Proxies for each object.
+ */
+const objToProxy = new WeakMap< object, object >();
+const proxyToObj = new WeakMap< object, object >();
+
+/**
+ * Namespaces for each created proxy.
+ */
+const proxyToNs = new WeakMap< object, string >();
+
+/**
+ * Object types that can be proxied.
+ */
+const supported = new Set( [ Object, Array ] );
+
+/**
+ * Returns a proxy to the passed object with the given handlers, assigning the
+ * specified namespace to it. If a proxy for the passed object was created
+ * before, that proxy is returned.
+ *
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj       The object to proxify.
+ * @param handlers  Handlers that the proxy will use.
+ *
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The created proxy.
+ */
+export const createProxy = < T extends object >(
+	namespace: string,
+	obj: T,
+	handlers: ProxyHandler< T >
+): T => {
+	if ( ! shouldProxy( obj ) ) {
+		throw Error( 'This object cannot be proxified.' );
+	}
+	if ( ! objToProxy.has( obj ) ) {
+		const proxy = new Proxy( obj, handlers );
+		objToProxy.set( obj, proxy );
+		proxyToObj.set( proxy, obj );
+		proxyToNs.set( proxy, namespace );
+	}
+	return objToProxy.get( obj ) as T;
+};
+
+/**
+ * Returns the proxy for the given object. If there is no associated proxy, the
+ * function returns `undefined`.
+ *
+ * @param obj Object from which to know the proxy.
+ * @return Associated proxy or `undefined`.
+ */
+export const getProxyFromObject = < T extends object >(
+	obj: T
+): T | undefined => objToProxy.get( obj ) as T;
+
+/**
+ * Gets the namespace associated with the given proxy.
+ *
+ * Proxies have a namespace assigned upon creation. See {@link createProxy}.
+ *
+ * @param proxy Proxy.
+ * @return Namespace.
+ */
+export const getNamespaceFromProxy = ( proxy: object ): string =>
+	proxyToNs.get( proxy )!;
+
+/**
+ * Checks if a given object can be proxied.
+ *
+ * @param candidate Object to know whether it can be proxied.
+ * @return True if the passed instance can be proxied.
+ */
+export const shouldProxy = (
+	candidate: any
+): candidate is Object | Array< unknown > => {
+	if ( typeof candidate !== 'object' || candidate === null ) {
+		return false;
+	}
+	return (
+		! proxyToNs.has( candidate ) && supported.has( candidate.constructor )
+	);
+};
+
+/**
+ * Returns the target object for the passed proxy. If the passed object is not a registered proxy, the
+ * function returns `undefined`.
+ *
+ * @param proxy Proxy from which to know the target.
+ * @return The target object or `undefined`.
+ */
+export const getObjectFromProxy = < T extends object >(
+	proxy: T
+): T | undefined => proxyToObj.get( proxy ) as T;
diff --git a/packages/interactivity/src/proxies/signals.ts b/packages/interactivity/src/proxies/signals.ts
new file mode 100644
index 00000000000000..29bd58aaa4fced
--- /dev/null
+++ b/packages/interactivity/src/proxies/signals.ts
@@ -0,0 +1,143 @@
+/**
+ * External dependencies
+ */
+import {
+	computed,
+	signal,
+	batch,
+	type Signal,
+	type ReadonlySignal,
+} from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { getNamespaceFromProxy } from './registry';
+import { getScope } from '../scopes';
+import { setNamespace, resetNamespace } from '../namespaces';
+import { withScope } from '../utils';
+
+/**
+ * Identifier for property computeds not associated to any scope.
+ */
+const NO_SCOPE = {};
+
+/**
+ * Structure that manages reactivity for a property in a state object. It uses
+ * signals to keep track of property value or getter modifications.
+ */
+export class PropSignal {
+	/**
+	 * Proxy that holds the property this PropSignal is associated with.
+	 */
+	private owner: object;
+
+	/**
+	 * Relation of computeds by scope. These computeds are read-only signals
+	 * that depend on whether the property is a value or a getter and,
+	 * therefore, can return different values depending on the scope in which
+	 * the getter is accessed.
+	 */
+	private computedsByScope: WeakMap< WeakKey, ReadonlySignal >;
+
+	/**
+	 * Signal with the value assigned to the related property.
+	 */
+	private valueSignal?: Signal;
+
+	/**
+	 * Signal with the getter assigned to the related property.
+	 */
+	private getterSignal?: Signal< ( () => any ) | undefined >;
+
+	/**
+	 * Structure that manages reactivity for a property in a state object, using
+	 * signals to keep track of property value or getter modifications.
+	 *
+	 * @param owner Proxy that holds the property this instance is associated
+	 *              with.
+	 */
+	constructor( owner: object ) {
+		this.owner = owner;
+		this.computedsByScope = new WeakMap();
+	}
+
+	/**
+	 * Changes the internal value. If a getter was set before, it is set to
+	 * `undefined`.
+	 *
+	 * @param value New value.
+	 */
+	public setValue( value: unknown ) {
+		this.update( { value } );
+	}
+
+	/**
+	 * Changes the internal getter. If a value was set before, it is set to
+	 * `undefined`.
+	 *
+	 * @param getter New getter.
+	 */
+	public setGetter( getter: () => any ) {
+		this.update( { get: getter } );
+	}
+
+	/**
+	 * Returns the computed that holds the result of evaluating the prop in the
+	 * current scope.
+	 *
+	 * These computeds are read-only signals that depend on whether the property
+	 * is a value or a getter and, therefore, can return different values
+	 * depending on the scope in which the getter is accessed.
+	 *
+	 * @return Computed that depends on the scope.
+	 */
+	public getComputed(): ReadonlySignal {
+		const scope = getScope() || NO_SCOPE;
+
+		if ( ! this.valueSignal && ! this.getterSignal ) {
+			this.update( {} );
+		}
+
+		if ( ! this.computedsByScope.has( scope ) ) {
+			const callback = () => {
+				const getter = this.getterSignal?.value;
+				return getter
+					? getter.call( this.owner )
+					: this.valueSignal?.value;
+			};
+
+			setNamespace( getNamespaceFromProxy( this.owner ) );
+			this.computedsByScope.set(
+				scope,
+				computed( withScope( callback ) )
+			);
+			resetNamespace();
+		}
+
+		return this.computedsByScope.get( scope )!;
+	}
+
+	/**
+	 *  Update the internal signals for the value and the getter of the
+	 *  corresponding prop.
+	 *
+	 * @param param0
+	 * @param param0.get   New getter.
+	 * @param param0.value New value.
+	 */
+	private update( { get, value }: { get?: () => any; value?: unknown } ) {
+		if ( ! this.valueSignal ) {
+			this.valueSignal = signal( value );
+			this.getterSignal = signal( get );
+		} else if (
+			value !== this.valueSignal.peek() ||
+			get !== this.getterSignal!.peek()
+		) {
+			batch( () => {
+				this.valueSignal!.value = value;
+				this.getterSignal!.value = get;
+			} );
+		}
+	}
+}
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
new file mode 100644
index 00000000000000..f9af257bada2ea
--- /dev/null
+++ b/packages/interactivity/src/proxies/state.ts
@@ -0,0 +1,403 @@
+/**
+ * External dependencies
+ */
+import { batch, signal, type Signal } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import {
+	createProxy,
+	getProxyFromObject,
+	getNamespaceFromProxy,
+	shouldProxy,
+	getObjectFromProxy,
+} from './registry';
+import { PropSignal } from './signals';
+import { setNamespace, resetNamespace } from '../namespaces';
+import { isPlainObject } from '../utils';
+
+/**
+ * Set of built-in symbols.
+ */
+const wellKnownSymbols = new Set(
+	Object.getOwnPropertyNames( Symbol )
+		.map( ( key ) => Symbol[ key ] )
+		.filter( ( value ) => typeof value === 'symbol' )
+);
+
+/**
+ * Relates each proxy with a map of {@link PropSignal} instances, representing
+ * the proxy's accessed properties.
+ */
+const proxyToProps: WeakMap<
+	object,
+	Map< string | symbol, PropSignal >
+> = new WeakMap();
+
+/**
+ *  Checks wether a {@link PropSignal | `PropSignal`} instance exists for the
+ *  given property in the passed proxy.
+ *
+ * @param proxy Proxy of a state object or array.
+ * @param key   The property key.
+ * @return `true` when it exists; false otherwise.
+ */
+export const hasPropSignal = ( proxy: object, key: string ) =>
+	proxyToProps.has( proxy ) && proxyToProps.get( proxy )!.has( key );
+
+const readOnlyProxies = new WeakSet();
+
+/**
+ * Returns the {@link PropSignal | `PropSignal`} instance associated with the
+ * specified prop in the passed proxy.
+ *
+ * The `PropSignal` instance is generated if it doesn't exist yet, using the
+ * `initial` parameter to initialize the internal signals.
+ *
+ * @param proxy   Proxy of a state object or array.
+ * @param key     The property key.
+ * @param initial Initial data for the `PropSignal` instance.
+ * @return The `PropSignal` instance.
+ */
+const getPropSignal = (
+	proxy: object,
+	key: string | number | symbol,
+	initial?: PropertyDescriptor
+) => {
+	if ( ! proxyToProps.has( proxy ) ) {
+		proxyToProps.set( proxy, new Map() );
+	}
+	key = typeof key === 'number' ? `${ key }` : key;
+	const props = proxyToProps.get( proxy )!;
+	if ( ! props.has( key ) ) {
+		const ns = getNamespaceFromProxy( proxy );
+		const prop = new PropSignal( proxy );
+		props.set( key, prop );
+		if ( initial ) {
+			const { get, value } = initial;
+			if ( get ) {
+				prop.setGetter( get );
+			} else {
+				const readOnly = readOnlyProxies.has( proxy );
+				prop.setValue(
+					shouldProxy( value )
+						? proxifyState( ns, value, { readOnly } )
+						: value
+				);
+			}
+		}
+	}
+	return props.get( key )!;
+};
+
+/**
+ * Relates each proxied object (i.e., the original object) with a signal that
+ * tracks changes in the number of properties.
+ */
+const objToIterable = new WeakMap< object, Signal< number > >();
+
+/**
+ * When this flag is `true`, it avoids any signal subscription, overriding state
+ * props' "reactive" behavior.
+ */
+let peeking = false;
+
+/**
+ * Handlers for reactive objects and arrays in the state.
+ */
+const stateHandlers: ProxyHandler< object > = {
+	get( target: object, key: string | symbol, receiver: object ): any {
+		/*
+		 * The property should not be reactive for the following cases:
+		 * 1. While using the `peek` function to read the property.
+		 * 2. The property exists but comes from the Object or Array prototypes.
+		 * 3. The property key is a known symbol.
+		 */
+		if (
+			peeking ||
+			( ! target.hasOwnProperty( key ) && key in target ) ||
+			( typeof key === 'symbol' && wellKnownSymbols.has( key ) )
+		) {
+			return Reflect.get( target, key, receiver );
+		}
+
+		// At this point, the property should be reactive.
+		const desc = Object.getOwnPropertyDescriptor( target, key );
+		const prop = getPropSignal( receiver, key, desc );
+		const result = prop.getComputed().value;
+
+		/*
+		 * Check if the property is a synchronous function. If it is, set the
+		 * default namespace. Synchronous functions always run in the proper scope,
+		 * which is set by the Directives component.
+		 */
+		if ( typeof result === 'function' ) {
+			const ns = getNamespaceFromProxy( receiver );
+			return ( ...args: unknown[] ) => {
+				setNamespace( ns );
+				try {
+					return result.call( receiver, ...args );
+				} finally {
+					resetNamespace();
+				}
+			};
+		}
+
+		return result;
+	},
+
+	set(
+		target: object,
+		key: string,
+		value: unknown,
+		receiver: object
+	): boolean {
+		if ( readOnlyProxies.has( receiver ) ) {
+			return false;
+		}
+		setNamespace( getNamespaceFromProxy( receiver ) );
+		try {
+			return Reflect.set( target, key, value, receiver );
+		} finally {
+			resetNamespace();
+		}
+	},
+
+	defineProperty(
+		target: object,
+		key: string,
+		desc: PropertyDescriptor
+	): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
+		const isNew = ! ( key in target );
+		const result = Reflect.defineProperty( target, key, desc );
+
+		if ( result ) {
+			const receiver = getProxyFromObject( target )!;
+			const prop = getPropSignal( receiver, key );
+			const { get, value } = desc;
+			if ( get ) {
+				prop.setGetter( get );
+			} else {
+				const ns = getNamespaceFromProxy( receiver );
+				prop.setValue(
+					shouldProxy( value ) ? proxifyState( ns, value ) : value
+				);
+			}
+
+			if ( isNew && objToIterable.has( target ) ) {
+				objToIterable.get( target )!.value++;
+			}
+
+			/*
+			 * Modify the `length` property value only if the related
+			 * `PropSignal` exists, which means that there are subscriptions to
+			 * this property.
+			 */
+			if (
+				Array.isArray( target ) &&
+				proxyToProps.get( receiver )?.has( 'length' )
+			) {
+				const length = getPropSignal( receiver, 'length' );
+				length.setValue( target.length );
+			}
+		}
+
+		return result;
+	},
+
+	deleteProperty( target: object, key: string ): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
+		const result = Reflect.deleteProperty( target, key );
+
+		if ( result ) {
+			const prop = getPropSignal( getProxyFromObject( target )!, key );
+			prop.setValue( undefined );
+
+			if ( objToIterable.has( target ) ) {
+				objToIterable.get( target )!.value++;
+			}
+		}
+
+		return result;
+	},
+
+	ownKeys( target: object ): ( string | symbol )[] {
+		if ( ! objToIterable.has( target ) ) {
+			objToIterable.set( target, signal( 0 ) );
+		}
+		/*
+		 *This subscribes to the signal while preventing the minifier from
+		 * deleting this line in production.
+		 */
+		( objToIterable as any )._ = objToIterable.get( target )!.value;
+		return Reflect.ownKeys( target );
+	},
+};
+
+/**
+ * Returns the proxy associated with the given state object, creating it if it
+ * does not exist.
+ *
+ * @param namespace        The namespace that will be associated to this proxy.
+ * @param obj              The object to proxify.
+ * @param options          Options.
+ * @param options.readOnly Read-only.
+ *
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The associated proxy.
+ */
+export const proxifyState = < T extends object >(
+	namespace: string,
+	obj: T,
+	options?: { readOnly?: boolean }
+): T => {
+	const proxy = createProxy( namespace, obj, stateHandlers ) as T;
+	if ( options?.readOnly ) {
+		readOnlyProxies.add( proxy );
+	}
+	return proxy;
+};
+
+/**
+ * Reads the value of the specified property without subscribing to it.
+ *
+ * @param obj The object to read the property from.
+ * @param key The property key.
+ * @return The property value.
+ */
+export const peek = < T extends object, K extends keyof T >(
+	obj: T,
+	key: K
+): T[ K ] => {
+	peeking = true;
+	try {
+		return obj[ key ];
+	} finally {
+		peeking = false;
+	}
+};
+
+/**
+ * Internal recursive implementation for {@link deepMerge | `deepMerge`}.
+ *
+ * @param target   The target object.
+ * @param source   The source object containing new values and props.
+ * @param override Whether existing props should be overwritten or not (`true`
+ *                 by default).
+ */
+const deepMergeRecursive = (
+	target: any,
+	source: any,
+	override: boolean = true
+) => {
+	// If target is not a plain object and the source is, we don't need to merge
+	// them because the source will be used as the new value of the target.
+	if ( ! ( isPlainObject( target ) && isPlainObject( source ) ) ) {
+		return;
+	}
+
+	let hasNewKeys = false;
+
+	for ( const key in source ) {
+		const isNew = ! ( key in target );
+		hasNewKeys = hasNewKeys || isNew;
+
+		const desc = Object.getOwnPropertyDescriptor( source, key )!;
+		const proxy = getProxyFromObject( target );
+		const propSignal =
+			!! proxy &&
+			hasPropSignal( proxy, key ) &&
+			getPropSignal( proxy, key );
+
+		// Handle getters and setters
+		if (
+			typeof desc.get === 'function' ||
+			typeof desc.set === 'function'
+		) {
+			if ( override || isNew ) {
+				// Because we are setting a getter or setter, we need to use
+				// Object.defineProperty to define the property on the target object.
+				Object.defineProperty( target, key, {
+					...desc,
+					configurable: true,
+					enumerable: true,
+				} );
+				// Update the getter in the property signal if it exists
+				if ( desc.get && propSignal ) {
+					propSignal.setGetter( desc.get );
+				}
+			}
+
+			// Handle nested objects
+		} else if ( isPlainObject( source[ key ] ) ) {
+			if ( isNew || ( override && ! isPlainObject( target[ key ] ) ) ) {
+				// Create a new object if the property is new or needs to be overridden
+				target[ key ] = {};
+				if ( propSignal ) {
+					// Create a new proxified state for the nested object
+					const ns = getNamespaceFromProxy( proxy );
+					propSignal.setValue(
+						proxifyState( ns, target[ key ] as Object )
+					);
+				}
+			}
+			// Both target and source are plain objects, merge them recursively
+			if ( isPlainObject( target[ key ] ) ) {
+				deepMergeRecursive( target[ key ], source[ key ], override );
+			}
+
+			// Handle primitive values and non-plain objects
+		} else if ( override || isNew ) {
+			Object.defineProperty( target, key, desc );
+			if ( propSignal ) {
+				const { value } = desc;
+				const ns = getNamespaceFromProxy( proxy );
+				// Proxify the value if necessary before setting it in the signal
+				propSignal.setValue(
+					shouldProxy( value ) ? proxifyState( ns, value ) : value
+				);
+			}
+		}
+	}
+
+	if ( hasNewKeys && objToIterable.has( target ) ) {
+		objToIterable.get( target )!.value++;
+	}
+};
+
+/**
+ * Recursively update prop values inside the passed `target` and nested plain
+ * objects, using the values present in `source`. References to plain objects
+ * are kept, only updating props containing primitives or arrays. Arrays are
+ * replaced instead of merged or concatenated.
+ *
+ * If the `override` parameter is set to `false`, then all values in `target`
+ * are preserved, and only new properties from `source` are added.
+ *
+ * @param target   The target object.
+ * @param source   The source object containing new values and props.
+ * @param override Whether existing props should be overwritten or not (`true`
+ *                 by default).
+ */
+export const deepMerge = (
+	target: any,
+	source: any,
+	override: boolean = true
+) =>
+	batch( () =>
+		deepMergeRecursive(
+			getObjectFromProxy( target ) || target,
+			source,
+			override
+		)
+	);
diff --git a/packages/interactivity/src/proxies/store.ts b/packages/interactivity/src/proxies/store.ts
new file mode 100644
index 00000000000000..506b8c3b097bae
--- /dev/null
+++ b/packages/interactivity/src/proxies/store.ts
@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { createProxy, getNamespaceFromProxy, shouldProxy } from './registry';
+/**
+ * External dependencies
+ */
+import { setNamespace, resetNamespace } from '../namespaces';
+import { withScope, isPlainObject } from '../utils';
+
+/**
+ * Identifies the store proxies handling the root objects of each store.
+ */
+const storeRoots = new WeakSet();
+
+/**
+ * Handlers for store proxies.
+ */
+const storeHandlers: ProxyHandler< object > = {
+	get: ( target: any, key: string | symbol, receiver: any ) => {
+		const result = Reflect.get( target, key );
+		const ns = getNamespaceFromProxy( receiver );
+
+		/*
+		 * Check if the proxy is the store root and no key with that name exist. In
+		 * that case, return an empty object for the requested key.
+		 */
+		if ( typeof result === 'undefined' && storeRoots.has( receiver ) ) {
+			const obj = {};
+			Reflect.set( target, key, obj );
+			return proxifyStore( ns, obj, false );
+		}
+
+		/*
+		 * Check if the property is a function. If it is, add the store
+		 * namespace to the stack and wrap the function with the current scope.
+		 * The `withScope` util handles both synchronous functions and generator
+		 * functions.
+		 */
+		if ( typeof result === 'function' ) {
+			setNamespace( ns );
+			const scoped = withScope( result );
+			resetNamespace();
+			return scoped;
+		}
+
+		// Check if the property is an object. If it is, proxyify it.
+		if ( isPlainObject( result ) && shouldProxy( result ) ) {
+			return proxifyStore( ns, result, false );
+		}
+
+		return result;
+	},
+};
+
+/**
+ * Returns the proxy associated with the given store object, creating it if it
+ * does not exist.
+ *
+ * @param namespace The namespace that will be associated to this proxy.
+ * @param obj       The object to proxify.
+ *
+ * @param isRoot    Whether the passed object is the store root object.
+ * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
+ *         check if a proxy can be created for a specific object.
+ *
+ * @return The associated proxy.
+ */
+export const proxifyStore = < T extends object >(
+	namespace: string,
+	obj: T,
+	isRoot = true
+): T => {
+	const proxy = createProxy( namespace, obj, storeHandlers );
+	if ( proxy && isRoot ) {
+		storeRoots.add( proxy );
+	}
+	return proxy as T;
+};
diff --git a/packages/interactivity/src/proxies/test/context-proxy.ts b/packages/interactivity/src/proxies/test/context-proxy.ts
new file mode 100644
index 00000000000000..6ae041d34dbc08
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/context-proxy.ts
@@ -0,0 +1,369 @@
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { proxifyContext, proxifyState, deepMerge } from '../';
+
+describe( 'Interactivity API', () => {
+	describe( 'context proxy', () => {
+		describe( 'get', () => {
+			it( 'should inherit props from its fallback', () => {
+				const fallback: any = proxifyContext( { a: 1 }, {} );
+				const context: any = proxifyContext( { b: 2 }, fallback );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+			} );
+
+			it( "should inherit props from its fallback's fallback", () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+				expect( context.c ).toBe( 3 );
+			} );
+
+			it( 'should list all inherited props', () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( Object.entries( context ) ).toEqual( [
+					[ 'a', 1 ],
+					[ 'b', 2 ],
+					[ 'c', 3 ],
+				] );
+			} );
+
+			it( 'should shadow properties defined in its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				expect( context.prop ).toBe( 'context' );
+			} );
+
+			it( 'should not inherit properties from nested objects', () => {
+				const fallback: any = proxifyContext( { obj: { a: 1 } }, {} );
+				const context: any = proxifyContext(
+					{ obj: { b: 2 } },
+					fallback
+				);
+
+				expect( 'a' in context.obj ).toBe( false );
+				expect( context.obj.b ).toBe( 2 );
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( state, fallback );
+
+				expect( context.a ).toBe( 1 );
+			} );
+		} );
+
+		describe( 'set', () => {
+			it( 'should modify props defined in it', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'fallback' );
+			} );
+
+			it( 'should modify props inherited from its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should see changes in inherited props', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				fallback.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should create non-inherited props in itself', () => {
+				const fallback: any = proxifyContext( {}, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBeUndefined();
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.a = 2;
+
+				expect( context.a ).toBe( 2 );
+				expect( state.a ).toBe( 2 );
+			} );
+
+			it( "should modify props inherited from fallback's ancestors", () => {
+				const ancestor: any = proxifyContext(
+					{ ancestorProp: 'ancestor' },
+					{}
+				);
+				const fallback: any = proxifyContext(
+					{ fallbackProp: 'fallback' },
+					ancestor
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				context.ancestorProp = 'modified';
+
+				expect( context.ancestorProp ).toBe( 'modified' );
+				expect( fallback.ancestorProp ).toBe( 'modified' );
+				expect( ancestor.ancestorProp ).toBe( 'modified' );
+			} );
+		} );
+
+		describe( 'computations', () => {
+			it( 'should subscribe to changes in the current context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBe( 'context' );
+
+				context.fromContext = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to changes in inherited values', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBe( 'fallback' );
+
+				fallback.fromFallback = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to undefined props added to the context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBeUndefined();
+
+				context.fromContext = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to undefined props added to the fallback', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBeUndefined();
+
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to shadowed props', () => {
+				const fallbackState: any = proxifyState( 'test', {} );
+				const fallback: any = proxifyContext( fallbackState, {} );
+
+				const contextState: any = proxifyState( 'test', {} );
+				const context: any = proxifyContext( contextState, fallback );
+
+				const spy = jest.fn( () => context.prop );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.prop ).toBeUndefined();
+
+				fallbackState.prop = 'fromFallback';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.prop ).toBe( 'fromFallback' );
+
+				contextState.prop = 'fromContext';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( context.prop ).toBe( 'fromContext' );
+			} );
+
+			it( 'should subscribe to any changes in listed props', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => Object.keys( context ) );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( Object.keys( context ) ).toEqual( [] );
+
+				context.fromContext = 'added';
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( Object.keys( context ).sort() ).toEqual( [
+					'fromContext',
+					'fromFallback',
+				] );
+			} );
+
+			it( 'should handle deeply nested properties that are initially undefined', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				let deepValue: any;
+				const spy = jest.fn( () => {
+					deepValue = context.a?.b?.c?.d;
+				} );
+				effect( spy );
+
+				// Initial call, the deep value is undefined
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( deepValue ).toBeUndefined();
+
+				// Add a deeply nested object to the context
+				context.a = { b: { c: { d: 'test value' } } };
+
+				// The effect should be called again
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( deepValue ).toBe( 'test value' );
+
+				// Reading the value directly should also work
+				expect( context.a.b.c.d ).toBe( 'test value' );
+			} );
+
+			it( 'should handle deeply nested properties that are initially undefined and merged with deepMerge', () => {
+				const fallbackState = proxifyState( 'test', {} );
+				const fallback: any = proxifyContext( fallbackState, {} );
+				const contextState = proxifyState( 'test', {} );
+				const context: any = proxifyContext( contextState, fallback );
+
+				let deepValue: any;
+				const spy = jest.fn( () => {
+					deepValue = context.a?.b?.c?.d;
+				} );
+				effect( spy );
+
+				// Initial call, the deep value is undefined
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( deepValue ).toBeUndefined();
+
+				// Use deepMerge to add a deeply nested object to the context
+				deepMerge( contextState, {
+					a: { b: { c: { d: 'test value' } } },
+				} );
+
+				// The effect should be called again
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( deepValue ).toBe( 'test value' );
+
+				// Reading the value directly should also work
+				expect( context.a.b.c.d ).toBe( 'test value' );
+			} );
+		} );
+
+		describe( 'proxifyContext', () => {
+			it( 'should throw when trying to re-proxify a proxy object', () => {
+				const context = proxifyContext( {}, {} );
+				expect( () => proxifyContext( context, {} ) ).toThrow(
+					'This object cannot be proxified.'
+				);
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/deep-merge.ts b/packages/interactivity/src/proxies/test/deep-merge.ts
new file mode 100644
index 00000000000000..aaa762cb979f3c
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/deep-merge.ts
@@ -0,0 +1,551 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+/**
+ * Internal dependencies
+ */
+import { proxifyState, peek, deepMerge } from '../';
+import { hasPropSignal } from '../state';
+import { getProxyFromObject } from '../registry';
+
+describe( 'Interactivity API', () => {
+	describe( 'deepMerge', () => {
+		it( 'should merge two plain objects', () => {
+			const target = { a: 1, b: 2 };
+			const source = { b: 3, c: 4 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 3, c: 4 } );
+		} );
+
+		it( 'should handle nested objects', () => {
+			const target = { a: { x: 1 }, b: 2 };
+			const source = { a: { y: 2 }, c: 3 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: { x: 1, y: 2 }, b: 2, c: 3 } );
+		} );
+
+		it( 'should not override existing properties when override is false', () => {
+			const target = { a: 1, b: { x: 10 } };
+			const source = { a: 2, b: { y: 20 }, c: 3 };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 1, b: { x: 10, y: 20 }, c: 3 } );
+		} );
+
+		it( 'should handle getters', () => {
+			const target = {
+				get a() {
+					return 1;
+				},
+				b: 1,
+			};
+			const source = {
+				a: 2,
+				get b() {
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result.a ).toBe( 2 );
+			expect( result.b ).toBe( 2 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeUndefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.get
+			).toBeDefined();
+		} );
+
+		it( 'should not execute getters when performing the deep merge', () => {
+			let targetExecuted = false;
+			let sourceExecuted = false;
+			const target = {
+				get a() {
+					targetExecuted = true;
+					return 1;
+				},
+			};
+			const source = {
+				get b() {
+					sourceExecuted = true;
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( targetExecuted ).toBe( false );
+			expect( sourceExecuted ).toBe( false );
+		} );
+
+		it( 'should handle setters', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				a: 3,
+				get b() {
+					return 2;
+				},
+				set b( value ) {
+					sourceValue = value;
+				},
+			};
+
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+
+			result.a = 5;
+			expect( targetValue ).toBe( 5 );
+			expect( result.a ).toBe( 5 );
+
+			deepMerge( result, source );
+
+			result.a = 6;
+			expect( targetValue ).toBe( 5 );
+
+			result.b = 7;
+			expect( sourceValue ).toBe( 7 );
+
+			expect( result.a ).toBe( 6 );
+			expect( result.b ).toBe( 2 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeUndefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.set
+			).toBeDefined();
+		} );
+
+		it( 'should handle setters when overwrite is false', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				a: 3,
+				get b() {
+					return 2;
+				},
+				set b( value ) {
+					sourceValue = value;
+				},
+			};
+
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+
+			result.a = 6;
+			expect( targetValue ).toBe( 6 );
+
+			result.b = 7;
+			expect( sourceValue ).toBe( 2 );
+
+			expect( result.a ).toBe( 6 );
+			expect( result.b ).toBe( 7 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.set
+			).toBeUndefined();
+		} );
+
+		it( 'should handle getters and setters together', () => {
+			let targetValue = 1;
+			const target = {
+				get a() {
+					return targetValue;
+				},
+				set a( value ) {
+					targetValue = value;
+				},
+				b: 1,
+			};
+			let sourceValue = 2;
+			const source = {
+				get a() {
+					return 3;
+				},
+				set a( value ) {
+					sourceValue = value;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+
+			// Test if setters and getters are copied correctly
+			result.a = 5;
+			expect( targetValue ).toBe( 1 ); // Should not change
+			expect( sourceValue ).toBe( 5 ); // Should change
+			expect( result.a ).toBe( 3 ); // Should return the getter's value
+
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.set
+			).toBeDefined();
+		} );
+
+		it( 'should handle getters when overwrite is false', () => {
+			const target = {
+				get a() {
+					return 1;
+				},
+				b: 1,
+			};
+			const source = {
+				a: 2,
+				get b() {
+					return 2;
+				},
+			};
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result.a ).toBe( 1 );
+			expect( result.b ).toBe( 1 );
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'a' )?.get
+			).toBeDefined();
+			expect(
+				Object.getOwnPropertyDescriptor( result, 'b' )?.get
+			).toBeUndefined();
+		} );
+
+		it( 'should ignore non-plain objects', () => {
+			const target = { a: 1 };
+			const source = new Date();
+			const result = { ...target };
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1 } );
+		} );
+
+		it( 'should handle null values', () => {
+			const target = { a: 1, b: null };
+			const source = { b: 2, c: null };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: null } );
+		} );
+
+		it( 'should handle undefined values', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target );
+			deepMerge( result, source );
+			expect( result ).toEqual( { a: 1, b: 2, c: undefined } );
+		} );
+
+		it( 'should handle undefined values when overwrite is false', () => {
+			const target = { a: 1, b: undefined };
+			const source = { b: 2, c: undefined };
+			const result = {};
+			deepMerge( result, target, false );
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 1, b: undefined, c: undefined } );
+		} );
+
+		it( 'should handle deleted values when overwrite is false', () => {
+			const target = { a: 1 };
+			const source = { a: 2 };
+			const result: Record< string, any > = {};
+			deepMerge( result, target, false );
+			delete result.a;
+			deepMerge( result, source, false );
+			expect( result ).toEqual( { a: 2 } );
+		} );
+
+		it( 'should never create signals', () => {
+			const target = { a: 1, b: { x: 10 } };
+			const source = { a: 2, b: { y: 20 }, c: 3 };
+			const result = proxifyState(
+				'test',
+				{} as typeof target & typeof source
+			);
+			deepMerge( result, target );
+			deepMerge( result, source, false );
+
+			expect( hasPropSignal( result, 'a' ) ).toBe( false );
+			expect( hasPropSignal( result, 'b' ) ).toBe( false );
+			expect( hasPropSignal( result, 'c' ) ).toBe( false );
+
+			const proxyB = getProxyFromObject( peek( result, 'b' ) )!;
+			expect( hasPropSignal( proxyB, 'x' ) ).toBe( false );
+			expect( hasPropSignal( proxyB, 'y' ) ).toBe( false );
+		} );
+
+		it( 'should update signals when they exist', () => {
+			const target = { a: 1, b: { x: 10 } };
+			const source = { a: 2, b: { x: 20, y: 30 }, c: 3 };
+			const result = proxifyState< any >( 'test', {} );
+
+			const spyA = jest.fn( () => result.a );
+			effect( spyA );
+
+			expect( spyA ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( result, target );
+
+			const spyBx = jest.fn( () => result.b.x );
+			effect( spyBx );
+			expect( spyA ).toHaveBeenCalledTimes( 2 );
+			expect( spyBx ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( result, source );
+
+			expect( spyA ).toHaveBeenCalledTimes( 3 );
+			expect( spyBx ).toHaveBeenCalledTimes( 2 );
+
+			expect( hasPropSignal( result, 'a' ) ).toBe( true );
+			expect( hasPropSignal( result, 'b' ) ).toBe( true );
+			expect( hasPropSignal( result, 'c' ) ).toBe( false );
+
+			const proxyB = getProxyFromObject( peek( result, 'b' ) )!;
+			expect( hasPropSignal( proxyB, 'x' ) ).toBe( true );
+			expect( hasPropSignal( proxyB, 'y' ) ).toBe( false );
+		} );
+
+		it( 'should batch all signal updates together', () => {
+			const target = { a: 1, b: 2 };
+			const source = { a: 3, b: 4 };
+			const result = proxifyState< any >( 'test', {} );
+
+			const spy = jest.fn( () => ( result.a, result.b ) );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( result, target );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+
+			deepMerge( result, source );
+
+			expect( spy ).toHaveBeenCalledTimes( 3 );
+		} );
+
+		it( 'should update iterable signals when new keys are added', () => {
+			const target = proxifyState< any >( 'test', { a: 1, b: 2 } );
+			const source = { a: 1, b: 2, c: 3 };
+
+			let keys: any;
+			const spy = jest.fn( () => {
+				keys = Object.keys( target );
+			} );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+
+			deepMerge( target, source, false );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( keys ).toEqual( [ 'a', 'b', 'c' ] );
+		} );
+
+		it( 'should handle deeply nested properties that are initially undefined', () => {
+			const target: any = proxifyState( 'test', {} );
+
+			let deepValue: any;
+			const spy = jest.fn( () => {
+				deepValue = target.a?.b?.c?.d;
+			} );
+			effect( spy );
+
+			// Initial call, the deep value is undefined
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( deepValue ).toBeUndefined();
+
+			// Use deepMerge to add a deeply nested object to the target
+			deepMerge( target, { a: { b: { c: { d: 'test value' } } } } );
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( deepValue ).toBe( 'test value' );
+
+			// Reading the value directly should also work
+			expect( target.a.b.c.d ).toBe( 'test value' );
+
+			// Modify the nested value
+			target.a.b.c.d = 'new test value';
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 3 );
+			expect( deepValue ).toBe( 'new test value' );
+		} );
+
+		it( 'should overwrite values that become objects', () => {
+			const target: any = proxifyState( 'test', { message: 'hello' } );
+
+			let message: any;
+			const spy = jest.fn( () => ( message = target.message ) );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( message ).toBe( 'hello' );
+
+			deepMerge( target, {
+				message: { content: 'hello', fontStyle: 'italic' },
+			} );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( message ).toEqual( {
+				content: 'hello',
+				fontStyle: 'italic',
+			} );
+
+			expect( target.message ).toEqual( {
+				content: 'hello',
+				fontStyle: 'italic',
+			} );
+		} );
+
+		it( 'should not overwrite values that become objects if `override` is false', () => {
+			const target: any = proxifyState( 'test', { message: 'hello' } );
+
+			let message: any;
+			const spy = jest.fn( () => ( message = target.message ) );
+			effect( spy );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( message ).toBe( 'hello' );
+
+			deepMerge(
+				target,
+				{ message: { content: 'hello', fontStyle: 'italic' } },
+				false
+			);
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( message ).toBe( 'hello' );
+			expect( target.message ).toBe( 'hello' );
+			expect( target.message.content ).toBeUndefined();
+			expect( target.message.fontStyle ).toBeUndefined();
+		} );
+
+		it( 'should keep reactivity of arrays that are initially undefined', () => {
+			const target: any = proxifyState( 'test', {} );
+
+			let deepValue: any;
+			const spy = jest.fn( () => {
+				deepValue = target.array?.[ 0 ];
+			} );
+			effect( spy );
+
+			// Initial call, the deep value is undefined
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( deepValue ).toBeUndefined();
+
+			// Use deepMerge to add an array to the target
+			deepMerge( target, { array: [ 'value 1' ] } );
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+			expect( deepValue ).toBe( 'value 1' );
+
+			// Modify the array value
+			target.array[ 0 ] = 'value 2';
+
+			// The effect should be called again
+			expect( spy ).toHaveBeenCalledTimes( 3 );
+			expect( deepValue ).toBe( 'value 2' );
+		} );
+
+		describe( 'arrays', () => {
+			it( 'should handle arrays', () => {
+				const target = { a: [ 1, 2 ] };
+				const source = { a: [ 3, 4 ] };
+				const result = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { a: [ 3, 4 ] } );
+			} );
+
+			it( 'should handle arrays when overwrite is false', () => {
+				const target = { a: [ 1, 2 ] };
+				const source = { a: [ 3, 4 ] };
+				const result = {};
+				deepMerge( result, target, false );
+				deepMerge( result, source, false );
+				expect( result ).toEqual( { a: [ 1, 2 ] } );
+			} );
+
+			it( 'should add new array from source if not present in target', () => {
+				const target = { a: 1 };
+				const source = { arr: [ 1, 2, 3 ] };
+				const result = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { a: 1, arr: [ 1, 2, 3 ] } );
+			} );
+
+			it( 'should handle nested arrays', () => {
+				const target = { nested: { arr: [ 1, 2 ] } };
+				const source = { nested: { arr: [ 3, 4, 5 ] } };
+				const result = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { nested: { arr: [ 3, 4, 5 ] } } );
+			} );
+
+			it( 'should handle object with array as target and object with object as source', () => {
+				const target = { arr: [ 1, 2, 3 ] };
+				const source = { arr: { 1: 'two', 3: 'four' } };
+				const result: any = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { arr: { 1: 'two', 3: 'four' } } );
+			} );
+
+			it( 'should handle object with object as target and object with array as source', () => {
+				const target = { arr: { 0: 'zero', 2: 'two' } };
+				const source = { arr: [ 'a', 'b', 'c' ] };
+				const result = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { arr: [ 'a', 'b', 'c' ] } );
+			} );
+
+			it( 'should handle objects with arrays containing object elements', () => {
+				const target = { arr: [ { a: 1 }, { b: 2 } ] };
+				const source = { arr: [ { a: 2 }, { c: 3 } ] };
+				const result: any = {};
+				deepMerge( result, target );
+				deepMerge( result, source );
+				expect( result ).toEqual( { arr: [ { a: 2 }, { c: 3 } ] } );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/state-proxy.ts b/packages/interactivity/src/proxies/test/state-proxy.ts
new file mode 100644
index 00000000000000..4b0d2b0a708c3a
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/state-proxy.ts
@@ -0,0 +1,1466 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+/**
+ * Internal dependencies
+ */
+import { proxifyState, peek, deepMerge } from '../';
+import { setScope, resetScope, getContext, getElement } from '../../scopes';
+import { setNamespace, resetNamespace } from '../../namespaces';
+
+type State = {
+	a?: number;
+	nested: { b?: number };
+	array: ( number | State[ 'nested' ] )[];
+};
+
+const withScopeAndNs = ( scope, ns, callback ) => () => {
+	setScope( scope );
+	setNamespace( ns );
+	try {
+		return callback();
+	} finally {
+		resetNamespace();
+		resetScope();
+	}
+};
+
+describe( 'Interactivity API', () => {
+	describe( 'state proxy', () => {
+		let nested = { b: 2 };
+		let array = [ 3, nested ];
+		let raw: State = { a: 1, nested, array };
+		let state = proxifyState( 'test', raw );
+
+		const window = globalThis as any;
+
+		beforeEach( () => {
+			nested = { b: 2 };
+			array = [ 3, nested ];
+			raw = { a: 1, nested, array };
+			state = proxifyState( 'test', raw );
+		} );
+
+		describe( 'get', () => {
+			it( 'should return plain objects/arrays', () => {
+				expect( state.nested ).toEqual( { b: 2 } );
+				expect( state.array ).toEqual( [ 3, { b: 2 } ] );
+				expect( state.array[ 1 ] ).toEqual( { b: 2 } );
+			} );
+
+			it( 'should return plain primitives', () => {
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+				expect( state.array[ 0 ] ).toBe( 3 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 2 );
+				expect( state.array.length ).toBe( 2 );
+			} );
+
+			it( 'should support reading from getters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				expect( state.double ).toBe( 2 );
+				state.counter = 2;
+				expect( state.double ).toBe( 4 );
+			} );
+
+			it( 'should support getters returning other parts of the state', () => {
+				const state = proxifyState( 'test', {
+					switch: 'a',
+					a: { data: 'a' },
+					b: { data: 'b' },
+					get aOrB() {
+						return state.switch === 'a' ? state.a : state.b;
+					},
+				} );
+				expect( state.aOrB.data ).toBe( 'a' );
+				state.switch = 'b';
+				expect( state.aOrB.data ).toBe( 'b' );
+			} );
+
+			it( 'should support getters using ownKeys traps', () => {
+				const state = proxifyState( 'test', {
+					x: {
+						a: 1,
+						b: 2,
+					},
+					get y() {
+						return Object.values( state.x );
+					},
+				} );
+
+				expect( state.y ).toEqual( [ 1, 2 ] );
+			} );
+
+			it( 'should support getters accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					get y() {
+						const ctx = getContext< { value: string } >();
+						return ctx.value;
+					},
+				} );
+
+				const scope = { context: { test: { value: 'from context' } } };
+				try {
+					setScope( scope as any );
+					expect( state.y ).toBe( 'from context' );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should use its namespace by default inside getters', () => {
+				const state = proxifyState( 'test/right', {
+					get value() {
+						const ctx = getContext< { value: string } >();
+						return ctx.value;
+					},
+				} );
+
+				const scope = {
+					context: {
+						'test/right': { value: 'OK' },
+						'test/other': { value: 'Wrong' },
+					},
+				};
+
+				try {
+					setScope( scope as any );
+					setNamespace( 'test/other' );
+					expect( state.value ).toBe( 'OK' );
+				} finally {
+					resetNamespace();
+					resetScope();
+				}
+			} );
+
+			it( 'should work with normal functions', () => {
+				const state = proxifyState( 'test', {
+					value: 1,
+					isBigger: ( newValue: number ): boolean =>
+						state.value < newValue,
+					sum( newValue: number ): number {
+						return state.value + newValue;
+					},
+					replace: ( newValue: number ): void => {
+						state.value = newValue;
+					},
+				} );
+				expect( state.isBigger( 2 ) ).toBe( true );
+				expect( state.sum( 2 ) ).toBe( 3 );
+				expect( state.value ).toBe( 1 );
+				state.replace( 2 );
+				expect( state.value ).toBe( 2 );
+			} );
+
+			it( 'should work with normal functions accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					sumContextValue( newValue: number ): number {
+						const ctx = getContext< { value: number } >();
+						return ctx.value + newValue;
+					},
+				} );
+
+				const scope = { context: { test: { value: 1 } } };
+				try {
+					setScope( scope as any );
+					expect( state.sumContextValue( 2 ) ).toBe( 3 );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should allow using `this` inside functions', () => {
+				const state = proxifyState( 'test', {
+					value: 1,
+					sum( newValue: number ): number {
+						return this.value + newValue;
+					},
+				} );
+				expect( state.sum( 2 ) ).toBe( 3 );
+			} );
+		} );
+
+		describe( 'set', () => {
+			it( 'should update like plain objects/arrays', () => {
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+				state.a = 2;
+				state.nested.b = 3;
+				expect( state.a ).toBe( 2 );
+				expect( state.nested.b ).toBe( 3 );
+			} );
+
+			it( 'should support setting values with setters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+					set double( val ) {
+						state.counter = val / 2;
+					},
+				} );
+				expect( state.counter ).toBe( 1 );
+				state.double = 4;
+				expect( state.counter ).toBe( 2 );
+			} );
+
+			it( 'should update array length', () => {
+				expect( state.array.length ).toBe( 2 );
+				state.array.push( 4 );
+				expect( state.array.length ).toBe( 3 );
+				state.array.splice( 1, 2 );
+				expect( state.array.length ).toBe( 1 );
+			} );
+
+			it( 'should support setting getters on the fly', () => {
+				const state = proxifyState< {
+					counter: number;
+					double?: number;
+				} >( 'test', {
+					counter: 1,
+				} );
+				Object.defineProperty( state, 'double', {
+					get() {
+						return state.counter * 2;
+					},
+				} );
+				expect( state.double ).toBe( 2 );
+				state.counter = 2;
+				expect( state.double ).toBe( 4 );
+			} );
+
+			it( 'should support getter modification', () => {
+				const state = proxifyState< {
+					counter: number;
+					double: number;
+				} >( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+
+				const scope = {
+					context: { test: { counter: 2 } },
+				};
+
+				expect( state.double ).toBe( 2 );
+
+				Object.defineProperty( state, 'double', {
+					get() {
+						const ctx = getContext< { counter: number } >();
+						return ctx.counter * 2;
+					},
+				} );
+
+				try {
+					setScope( scope as any );
+					expect( state.double ).toBe( 4 );
+				} finally {
+					resetScope();
+				}
+			} );
+
+			it( 'should copy object like plain JavaScript', () => {
+				const state = proxifyState< {
+					a?: { id: number; nested: { id: number } };
+					b: { id: number; nested: { id: number } };
+				} >( 'test', {
+					b: { id: 1, nested: { id: 1 } },
+				} );
+
+				state.a = state.b;
+
+				expect( state.a.id ).toBe( 1 );
+				expect( state.b.id ).toBe( 1 );
+				expect( state.a.nested.id ).toBe( 1 );
+				expect( state.b.nested.id ).toBe( 1 );
+
+				state.a.id = 2;
+				state.a.nested.id = 2;
+				expect( state.a.id ).toBe( 2 );
+				expect( state.b.id ).toBe( 2 );
+				expect( state.a.nested.id ).toBe( 2 );
+				expect( state.b.nested.id ).toBe( 2 );
+
+				state.b.id = 3;
+				state.b.nested.id = 3;
+				expect( state.b.id ).toBe( 3 );
+				expect( state.a.id ).toBe( 3 );
+				expect( state.a.nested.id ).toBe( 3 );
+				expect( state.b.nested.id ).toBe( 3 );
+
+				state.a.id = 4;
+				state.a.nested.id = 4;
+				expect( state.a.id ).toBe( 4 );
+				expect( state.b.id ).toBe( 4 );
+				expect( state.a.nested.id ).toBe( 4 );
+				expect( state.b.nested.id ).toBe( 4 );
+			} );
+
+			it( 'should be able to reset values with Object.assign', () => {
+				const initialNested = { ...nested };
+				const initialState = { ...raw, nested: initialNested };
+				state.a = 2;
+				state.nested.b = 3;
+				Object.assign( state, initialState );
+				expect( state.a ).toBe( 1 );
+				expect( state.nested.b ).toBe( 2 );
+			} );
+
+			it( 'should keep assigned object references internally', () => {
+				const obj = {};
+				state.nested = obj;
+				expect( raw.nested ).toBe( obj );
+			} );
+
+			it( 'should keep object references across namespaces', () => {
+				const raw1 = { obj: {} };
+				const raw2 = { obj: {} };
+				const state1 = proxifyState( 'test-1', raw1 );
+				const state2 = proxifyState( 'test-2', raw2 );
+				state2.obj = state1.obj;
+				expect( state2.obj ).toBe( state1.obj );
+				expect( raw2.obj ).toBe( state1.obj );
+			} );
+
+			it( 'should use its namespace by default inside setters', () => {
+				const state = proxifyState( 'test/right', {
+					set counter( val: number ) {
+						const ctx = getContext< { counter: number } >();
+						ctx.counter = val;
+					},
+				} );
+
+				const scope = {
+					context: {
+						'test/other': { counter: 0 },
+						'test/right': { counter: 0 },
+					},
+				};
+
+				try {
+					setScope( scope as any );
+					setNamespace( 'test/other' );
+					state.counter = 4;
+					expect( scope.context[ 'test/right' ].counter ).toBe( 4 );
+				} finally {
+					resetNamespace();
+					resetScope();
+				}
+			} );
+		} );
+
+		describe( 'computations', () => {
+			it( 'should subscribe to values mutated with setters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+					set double( val ) {
+						state.counter = val / 2;
+					},
+				} );
+				let counter = 0;
+				let double = 0;
+
+				effect( () => {
+					counter = state.counter;
+					double = state.double;
+				} );
+
+				expect( counter ).toBe( 1 );
+				expect( double ).toBe( 2 );
+				state.double = 4;
+				expect( counter ).toBe( 2 );
+				expect( double ).toBe( 4 );
+			} );
+
+			it( 'should subscribe to changes when an item is removed from the array', () => {
+				const state = proxifyState( 'test', [ 0, 0, 0 ] );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					sum = state.reduce( ( sum ) => sum + 1, 0 );
+				} );
+
+				expect( sum ).toBe( 3 );
+				state.splice( 2, 1 );
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to for..in loops', () => {
+				const raw: Record< string, number > = { a: 0, b: 0 };
+				const state = proxifyState( 'test', raw );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					for ( const _ in state ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+
+				delete state.c;
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+			} );
+
+			it( 'should subscribe to changes for Object.getOwnPropertyNames()', () => {
+				const raw: Record< string, number > = { a: 1, b: 2 };
+				const state = proxifyState( 'test', raw );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					const keys = Object.getOwnPropertyNames( state );
+					for ( const _ of keys ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.c = 0;
+				expect( sum ).toBe( 3 );
+
+				delete state.a;
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to Object.keys/values/entries()', () => {
+				const raw: Record< string, number > = { a: 1, b: 2 };
+				const state = proxifyState( 'test', raw );
+				let keys = 0;
+				let values = 0;
+				let entries = 0;
+
+				effect( () => {
+					keys = 0;
+					Object.keys( state ).forEach( () => ( keys += 1 ) );
+				} );
+
+				effect( () => {
+					values = 0;
+					Object.values( state ).forEach( () => ( values += 1 ) );
+				} );
+
+				effect( () => {
+					entries = 0;
+					Object.entries( state ).forEach( () => ( entries += 1 ) );
+				} );
+
+				expect( keys ).toBe( 2 );
+				expect( values ).toBe( 2 );
+				expect( entries ).toBe( 2 );
+
+				state.c = 0;
+				expect( keys ).toBe( 3 );
+				expect( values ).toBe( 3 );
+				expect( entries ).toBe( 3 );
+
+				delete state.a;
+				expect( keys ).toBe( 2 );
+				expect( values ).toBe( 2 );
+				expect( entries ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to changes to for..of loops', () => {
+				const state = proxifyState( 'test', [ 0, 0 ] );
+				let sum = 0;
+
+				effect( () => {
+					sum = 0;
+					for ( const _ of state ) {
+						sum += 1;
+					}
+				} );
+
+				expect( sum ).toBe( 2 );
+
+				state.push( 0 );
+				expect( sum ).toBe( 3 );
+
+				state.splice( 0, 1 );
+				expect( sum ).toBe( 2 );
+			} );
+
+			it( 'should subscribe to implicit changes in length', () => {
+				const state = proxifyState( 'test', [ 'foo', 'bar' ] );
+				let x = '';
+
+				effect( () => {
+					x = state.join( ' ' );
+				} );
+
+				expect( x ).toBe( 'foo bar' );
+
+				state.push( 'baz' );
+				expect( x ).toBe( 'foo bar baz' );
+
+				state.splice( 0, 1 );
+				expect( x ).toBe( 'bar baz' );
+			} );
+
+			it( 'should subscribe to changes when deleting properties', () => {
+				let x, y;
+
+				effect( () => {
+					x = state.a;
+				} );
+
+				effect( () => {
+					y = state.nested.b;
+				} );
+
+				expect( x ).toBe( 1 );
+				delete state.a;
+				expect( x ).toBe( undefined );
+
+				expect( y ).toBe( 2 );
+				delete state.nested.b;
+				expect( y ).toBe( undefined );
+			} );
+
+			it( 'should subscribe to changes when mutating objects', () => {
+				let x, y;
+
+				const state = proxifyState< {
+					a?: { id: number; nested: { id: number } };
+					b: { id: number; nested: { id: number } }[];
+				} >( 'test', {
+					b: [
+						{ id: 1, nested: { id: 1 } },
+						{ id: 2, nested: { id: 2 } },
+					],
+				} );
+
+				effect( () => {
+					x = state.a?.id;
+				} );
+
+				effect( () => {
+					y = state.a?.nested.id;
+				} );
+
+				expect( x ).toBe( undefined );
+				expect( y ).toBe( undefined );
+
+				state.a = state.b[ 0 ];
+
+				expect( x ).toBe( 1 );
+				expect( y ).toBe( 1 );
+
+				state.a = state.b[ 1 ];
+				expect( x ).toBe( 2 );
+				expect( y ).toBe( 2 );
+
+				state.a = undefined;
+				expect( x ).toBe( undefined );
+				expect( y ).toBe( undefined );
+
+				state.a = state.b[ 1 ];
+				expect( x ).toBe( 2 );
+				expect( y ).toBe( 2 );
+			} );
+
+			it( 'should trigger effects after mutations happen', () => {
+				let x;
+				effect( () => {
+					x = state.a;
+				} );
+				expect( x ).toBe( 1 );
+				state.a = 11;
+				expect( x ).toBe( 11 );
+			} );
+
+			it( 'should subscribe corretcly from getters', () => {
+				let x;
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				effect( () => ( x = state.double ) );
+				expect( x ).toBe( 2 );
+				state.counter = 2;
+				expect( x ).toBe( 4 );
+			} );
+
+			it( 'should subscribe corretcly from getters returning other parts of the state', () => {
+				let data;
+				const state = proxifyState( 'test', {
+					switch: 'a',
+					a: { data: 'a' },
+					b: { data: 'b' },
+					get aOrB() {
+						return state.switch === 'a' ? state.a : state.b;
+					},
+				} );
+				effect( () => ( data = state.aOrB.data ) );
+				expect( data ).toBe( 'a' );
+				state.switch = 'b';
+				expect( data ).toBe( 'b' );
+			} );
+
+			it( 'should subscribe to changes', () => {
+				const spy1 = jest.fn( () => state.a );
+				const spy2 = jest.fn( () => state.nested );
+				const spy3 = jest.fn( () => state.nested.b );
+				const spy4 = jest.fn( () => state.array[ 0 ] );
+				const spy5 = jest.fn(
+					() =>
+						typeof state.array[ 1 ] === 'object' &&
+						state.array[ 1 ].b
+				);
+
+				effect( spy1 );
+				effect( spy2 );
+				effect( spy3 );
+				effect( spy4 );
+				effect( spy5 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+
+				state.a = 11;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+
+				state.nested.b = 22;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 2 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 ); // nested also exists array[1]
+
+				state.nested = { b: 222 };
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 ); // now state.nested has a different reference
+
+				state.array[ 0 ] = 33;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 2 );
+
+				if ( typeof state.array[ 1 ] === 'object' ) {
+					state.array[ 1 ].b = 2222;
+				}
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 3 );
+
+				state.array[ 1 ] = { b: 22222 };
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array.push( 4 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array[ 3 ] = 5;
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 2 );
+				expect( spy5 ).toHaveBeenCalledTimes( 4 );
+
+				state.array = [ 333, { b: 222222 } ];
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy3 ).toHaveBeenCalledTimes( 3 );
+				expect( spy4 ).toHaveBeenCalledTimes( 3 );
+				expect( spy5 ).toHaveBeenCalledTimes( 5 );
+			} );
+
+			it( 'should subscribe to array length', () => {
+				const array = [ 1 ];
+				const state = proxifyState( 'test', { array } );
+				const spy1 = jest.fn( () => state.array.length );
+				const spy2 = jest.fn( () =>
+					state.array.map( ( i: number ) => i )
+				);
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+
+				state.array.push( 2 );
+				expect( state.array.length ).toBe( 2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+
+				state.array[ 2 ] = 3;
+				expect( state.array.length ).toBe( 3 );
+				expect( spy1 ).toHaveBeenCalledTimes( 3 );
+				expect( spy2 ).toHaveBeenCalledTimes( 3 );
+
+				state.array = state.array.filter( ( i: number ) => i <= 2 );
+				expect( state.array.length ).toBe( 2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 4 );
+				expect( spy2 ).toHaveBeenCalledTimes( 4 );
+			} );
+
+			it( 'should be able to reset values with Object.assign and still react to changes', () => {
+				const initialNested = { ...nested };
+				const initialState = { ...raw, nested: initialNested };
+				let a, b;
+
+				effect( () => {
+					a = state.a;
+				} );
+				effect( () => {
+					b = state.nested.b;
+				} );
+
+				state.a = 2;
+				state.nested.b = 3;
+
+				expect( a ).toBe( 2 );
+				expect( b ).toBe( 3 );
+
+				Object.assign( state, initialState );
+
+				expect( a ).toBe( 1 );
+				expect( b ).toBe( 2 );
+			} );
+
+			it( 'should keep subscribed to properties that become getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => 3,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+			} );
+
+			it( 'should keep subscribed to modified getters', () => {
+				const state = proxifyState< {
+					counter: number;
+					double: number;
+				} >( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+
+				const scope = {
+					context: { test: { counter: 2 } },
+				};
+
+				let double = 0;
+
+				effect(
+					withScopeAndNs( scope, 'test', () => {
+						double = state.double;
+					} )
+				);
+
+				expect( double ).toBe( 2 );
+
+				Object.defineProperty( state, 'double', {
+					get() {
+						const ctx = getContext< { counter: number } >();
+						return ctx.counter * 2;
+					},
+				} );
+
+				expect( double ).toBe( 4 );
+			} );
+
+			it( 'should react to changes in props inside getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => state.otherNumber,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+			} );
+
+			it( 'should react to changes in props inside getters if they become getters', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get: () => state.otherNumber,
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+				Object.defineProperty( state, 'otherNumber', {
+					get: () => 5,
+					configurable: true,
+				} );
+				expect( number ).toBe( 5 );
+			} );
+
+			it( 'should allow getters to use `this`', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+				} );
+
+				let number = 0;
+
+				effect( () => {
+					number = state.number;
+				} );
+
+				expect( number ).toBe( 1 );
+				state.number = 2;
+				expect( number ).toBe( 2 );
+				Object.defineProperty( state, 'number', {
+					get() {
+						return this.otherNumber;
+					},
+					configurable: true,
+				} );
+				expect( number ).toBe( 3 );
+				state.otherNumber = 4;
+				expect( number ).toBe( 4 );
+			} );
+
+			it( 'should support different scopes for the same getter', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					get numWithTag() {
+						let tag = 'No scope';
+						try {
+							tag = getContext< any >().tag;
+						} catch ( e ) {}
+						return `${ tag }: ${ this.number }`;
+					},
+				} );
+
+				const scopeA = {
+					context: { test: { tag: 'A' } },
+				};
+				const scopeB = {
+					context: { test: { tag: 'B' } },
+				};
+
+				let resultA = '';
+				let resultB = '';
+				let resultNoScope = '';
+
+				effect(
+					withScopeAndNs( scopeA, 'test', () => {
+						resultA = state.numWithTag;
+					} )
+				);
+				effect(
+					withScopeAndNs( scopeB, 'test', () => {
+						resultB = state.numWithTag;
+					} )
+				);
+				effect( () => {
+					resultNoScope = state.numWithTag;
+				} );
+
+				expect( resultA ).toBe( 'A: 1' );
+				expect( resultB ).toBe( 'B: 1' );
+				expect( resultNoScope ).toBe( 'No scope: 1' );
+				state.number = 2;
+				expect( resultA ).toBe( 'A: 2' );
+				expect( resultB ).toBe( 'B: 2' );
+				expect( resultNoScope ).toBe( 'No scope: 2' );
+			} );
+
+			it( 'should throw an error in getters that require a scope', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					get sumValueFromContext() {
+						const ctx = getContext();
+						return ctx
+							? this.number + ( ctx as any ).value
+							: this.number;
+					},
+					get sumValueFromElement() {
+						const element = getElement();
+						return element
+							? this.number + element.attributes.value
+							: this.number;
+					},
+				} );
+
+				expect( () => state.sumValueFromContext ).toThrow();
+				expect( () => state.sumValueFromElement ).toThrow();
+			} );
+
+			it( 'should react to changes in props inside functions', () => {
+				const state = proxifyState( 'test', {
+					number: 1,
+					otherNumber: 3,
+					sum( value: number ) {
+						return state.number + state.otherNumber + value;
+					},
+				} );
+
+				let result = 0;
+
+				effect( () => {
+					result = state.sum( 2 );
+				} );
+
+				expect( result ).toBe( 6 );
+				state.number = 2;
+				expect( result ).toBe( 7 );
+				state.otherNumber = 4;
+				expect( result ).toBe( 8 );
+			} );
+		} );
+
+		describe( 'peek', () => {
+			it( 'should return correct values when using peek()', () => {
+				expect( peek( state, 'a' ) ).toBe( 1 );
+				expect( peek( state.nested, 'b' ) ).toBe( 2 );
+				expect( peek( state.array, 0 ) ).toBe( 3 );
+				const nested = peek( state, 'array' )[ 1 ];
+				expect( typeof nested === 'object' && nested.b ).toBe( 2 );
+				expect( peek( state.array, 'length' ) ).toBe( 2 );
+			} );
+
+			it( 'should not subscribe to changes when peeking', () => {
+				const spy1 = jest.fn( () => peek( state, 'a' ) );
+				const spy2 = jest.fn( () => peek( state, 'nested' ) );
+				const spy3 = jest.fn( () => peek( state, 'nested' ).b );
+				const spy4 = jest.fn( () => peek( state, 'array' )[ 0 ] );
+				const spy5 = jest.fn( () => {
+					const nested = peek( state, 'array' )[ 1 ];
+					return typeof nested === 'object' && nested.b;
+				} );
+				const spy6 = jest.fn( () => peek( state, 'array' ).length );
+
+				effect( spy1 );
+				effect( spy2 );
+				effect( spy3 );
+				effect( spy4 );
+				effect( spy5 );
+				effect( spy6 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+				expect( spy6 ).toHaveBeenCalledTimes( 1 );
+
+				state.a = 11;
+				state.nested.b = 22;
+				state.nested = { b: 222 };
+				state.array[ 0 ] = 33;
+				if ( typeof state.array[ 1 ] === 'object' ) {
+					state.array[ 1 ].b = 2222;
+				}
+				state.array.push( 4 );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy3 ).toHaveBeenCalledTimes( 1 );
+				expect( spy4 ).toHaveBeenCalledTimes( 1 );
+				expect( spy5 ).toHaveBeenCalledTimes( 1 );
+				expect( spy6 ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'should subscribe to some changes but not other when peeking inside an object', () => {
+				const spy1 = jest.fn( () => peek( state.nested, 'b' ) );
+				effect( spy1 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				state.nested.b = 22;
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				state.nested = { b: 222 };
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				state.nested.b = 2222;
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+			} );
+
+			it( 'should support returning peek from getters', () => {
+				const state = proxifyState( 'test', {
+					counter: 1,
+					get double() {
+						return state.counter * 2;
+					},
+				} );
+				expect( peek( state, 'double' ) ).toBe( 2 );
+				state.counter = 2;
+				expect( peek( state, 'double' ) ).toBe( 4 );
+			} );
+
+			it( 'should support peeking getters accessing the scope', () => {
+				const state = proxifyState( 'test', {
+					get double() {
+						const { counter } = getContext< { counter: number } >();
+						return counter * 2;
+					},
+				} );
+
+				const context = proxifyState( 'test', { counter: 1 } );
+				const scope = { context: { test: context } };
+				const peekStateDouble = withScopeAndNs( scope, 'test', () =>
+					peek( state, 'double' )
+				);
+
+				const spy = jest.fn( peekStateDouble );
+				effect( spy );
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 2 );
+
+				context.counter = 2;
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 4 );
+			} );
+
+			it( 'should support peeking getters accessing other namespaces', () => {
+				const state2 = proxifyState( 'test2', {
+					get counter() {
+						const { counter } = getContext< { counter: number } >();
+						return counter;
+					},
+				} );
+				const context2 = proxifyState( 'test-2', { counter: 1 } );
+
+				const state1 = proxifyState( 'test1', {
+					get double() {
+						return state2.counter * 2;
+					},
+				} );
+
+				const peekStateDouble = withScopeAndNs(
+					{ context: { test2: context2 } },
+					'test2',
+					() => peek( state1, 'double' )
+				);
+
+				const spy = jest.fn( peekStateDouble );
+				effect( spy );
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 2 );
+
+				context2.counter = 2;
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( peekStateDouble() ).toBe( 4 );
+			} );
+		} );
+
+		describe( 'refs', () => {
+			it( 'should preserve object references', () => {
+				expect( state.nested ).toBe( state.array[ 1 ] );
+
+				state.nested.b = 22;
+
+				expect( state.nested ).toBe( state.array[ 1 ] );
+				expect( state.nested.b ).toBe( 22 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 22 );
+
+				state.nested = { b: 222 };
+
+				expect( state.nested ).not.toBe( state.array[ 1 ] );
+				expect( state.nested.b ).toBe( 222 );
+				expect(
+					typeof state.array[ 1 ] === 'object' && state.array[ 1 ].b
+				).toBe( 22 );
+			} );
+
+			it( 'should return the same proxy if initialized more than once', () => {
+				const raw = {};
+				const state1 = proxifyState( 'test', raw );
+				const state2 = proxifyState( 'test', raw );
+				expect( state1 ).toBe( state2 );
+			} );
+
+			it( 'should throw when trying to re-proxify a state object', () => {
+				const state = proxifyState( 'test', {} );
+				expect( () => proxifyState( 'test', state ) ).toThrow();
+			} );
+		} );
+
+		describe( 'unsupported data structures', () => {
+			it( 'should throw when trying to proxify a class instance', () => {
+				class MyClass {}
+				const obj = new MyClass();
+				expect( () => proxifyState( 'test', obj ) ).toThrow();
+			} );
+
+			it( 'should not wrap a class instance', () => {
+				class MyClass {}
+				const obj = new MyClass();
+				const state = proxifyState( 'test', { obj } );
+				expect( state.obj ).toBe( obj );
+			} );
+
+			it( 'should not wrap built-ins in proxies', () => {
+				window.MyClass = class MyClass {};
+				const obj = new window.MyClass();
+				const state = proxifyState( 'test', { obj } );
+				expect( state.obj ).toBe( obj );
+			} );
+
+			it( 'should not wrap elements in proxies', () => {
+				const el = window.document.createElement( 'div' );
+				const state = proxifyState( 'test', { el } );
+				expect( state.el ).toBe( el );
+			} );
+
+			it( 'should wrap global objects', () => {
+				window.obj = { b: 2 };
+				const state = proxifyState( 'test', window.obj );
+				expect( state ).not.toBe( window.obj );
+				expect( state ).toStrictEqual( { b: 2 } );
+			} );
+
+			it( 'should not wrap dates', () => {
+				const date = new Date();
+				const state = proxifyState( 'test', { date } );
+				expect( state.date ).toBe( date );
+			} );
+
+			it( 'should not wrap regular expressions', () => {
+				const regex = new RegExp( '' );
+				const state = proxifyState( 'test', { regex } );
+				expect( state.regex ).toBe( regex );
+			} );
+
+			it( 'should not wrap Map', () => {
+				const map = new Map();
+				const state = proxifyState( 'test', { map } );
+				expect( state.map ).toBe( map );
+			} );
+
+			it( 'should not wrap Set', () => {
+				const set = new Set();
+				const state = proxifyState( 'test', { set } );
+				expect( state.set ).toBe( set );
+			} );
+		} );
+
+		describe( 'symbols', () => {
+			it( 'should observe symbols', () => {
+				const key = Symbol( 'key' );
+				let x;
+				const store = proxifyState< { [ key: symbol ]: any } >(
+					'test',
+					{}
+				);
+				effect( () => ( x = store[ key ] ) );
+
+				expect( store[ key ] ).toBe( undefined );
+				expect( x ).toBe( undefined );
+
+				store[ key ] = true;
+
+				expect( store[ key ] ).toBe( true );
+				expect( x ).toBe( true );
+			} );
+
+			it( 'should not observe well-known symbols', () => {
+				const key = Symbol.isConcatSpreadable;
+				let x;
+				const state = proxifyState< { [ key: symbol ]: any } >(
+					'test',
+					{}
+				);
+				effect( () => ( x = state[ key ] ) );
+
+				expect( state[ key ] ).toBe( undefined );
+				expect( x ).toBe( undefined );
+
+				state[ key ] = true;
+				expect( state[ key ] ).toBe( true );
+				expect( x ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'read-only', () => {
+			it( "should not allow modifying a prop's value", () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.prop = 'new value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.prop = 'new value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow modifying a prop descriptor', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					Object.defineProperty( readOnlyState, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+				expect( () => {
+					Object.defineProperty( readOnlyState.nested, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.newProp = 'value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.newProp = 'value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow removing props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					delete readOnlyState.prop;
+				} ).toThrow();
+				expect( () => {
+					delete readOnlyState.nested.prop;
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding items to an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.push( 4 ) ).toThrow();
+				expect( () => readOnlyState.nested.array.push( 4 ) ).toThrow();
+			} );
+
+			it( 'should not allow removing items from an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.pop() ).toThrow();
+				expect( () => readOnlyState.nested.array.pop() ).toThrow();
+			} );
+
+			it( 'should allow subscribing to prop changes', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.prop );
+				const spy2 = jest.fn( () => readOnlyState.nested.prop );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { prop: 'new value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { nested: { prop: 'new value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'new value' );
+			} );
+
+			it( 'should allow subscribing to new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.newProp );
+				const spy2 = jest.fn( () => readOnlyState.nested.newProp );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( undefined );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { newProp: 'value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { nested: { newProp: 'value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+			} );
+
+			it( 'should allow subscribing to array changes', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						array: [ 1, 2, 3 ],
+						nested: { array: [ 1, 2, 3 ] },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.array[ 0 ] );
+				const spy2 = jest.fn( () => readOnlyState.nested.array[ 0 ] );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 1 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { array: [ 4, 5, 6 ] } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { nested: { array: [] } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/store-proxy.ts b/packages/interactivity/src/proxies/test/store-proxy.ts
new file mode 100644
index 00000000000000..225621072929d0
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/store-proxy.ts
@@ -0,0 +1,123 @@
+/**
+ * Internal dependencies
+ */
+import { proxifyStore, proxifyState } from '../';
+import { setScope, resetScope, getContext } from '../../scopes';
+import { setNamespace, resetNamespace } from '../../namespaces';
+
+describe( 'Interactivity API', () => {
+	describe( 'store proxy', () => {
+		describe( 'get', () => {
+			it( 'should initialize properties at the top level if they do not exist', () => {
+				const store = proxifyStore< any >( 'test', {} );
+				expect( store.state.props ).toBeUndefined();
+				expect( store.state ).toEqual( {} );
+			} );
+
+			it( 'should wrap sync functions with the store namespace and current scope', () => {
+				let result = '';
+
+				const syncFunc = () => {
+					const ctx = getContext< { value: string } >();
+					result = ctx.value;
+				};
+
+				const storeTest = proxifyStore( 'test', {
+					callbacks: {
+						syncFunc,
+						nested: { syncFunc },
+					},
+				} );
+
+				const scope = {
+					context: {
+						test: { value: 'test' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+
+				storeTest.callbacks.syncFunc();
+				expect( result ).toBe( 'test' );
+				storeTest.callbacks.nested.syncFunc();
+				expect( result ).toBe( 'test' );
+
+				resetScope();
+				resetNamespace();
+			} );
+
+			it( 'should wrap generators into async functions', async () => {
+				const asyncFunc = function* () {
+					const data = yield Promise.resolve( 'data' );
+					const ctx = getContext< { value: string } >();
+					return `${ data } from ${ ctx.value }`;
+				};
+
+				const storeTest = proxifyStore( 'test', {
+					callbacks: { asyncFunc, nested: { asyncFunc } },
+				} );
+
+				const scope = {
+					context: {
+						test: { value: 'test' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+				const promise1 = storeTest.callbacks.asyncFunc();
+				const promise2 = storeTest.callbacks.nested.asyncFunc();
+				resetScope();
+				resetNamespace();
+
+				expect( await promise1 ).toBe( 'data from test' );
+				expect( await promise2 ).toBe( 'data from test' );
+			} );
+
+			it( 'should allow async functions to call functions from other stores', async () => {
+				const asyncFunc = function* () {
+					const data = yield Promise.resolve( 'data' );
+					const ctx = getContext< { value: string } >();
+					return `${ data } from ${ ctx.value }`;
+				};
+
+				const storeTest1 = proxifyStore( 'test1', {
+					callbacks: { asyncFunc },
+				} );
+
+				const storeTest2 = proxifyStore( 'test2', {
+					callbacks: {
+						*asyncFunc() {
+							const result =
+								yield storeTest1.callbacks.asyncFunc();
+							return result;
+						},
+					},
+				} );
+
+				const scope = {
+					context: {
+						test1: { value: 'test1' },
+						test2: { value: 'test2' },
+					},
+				};
+
+				setNamespace( 'other-namespace' );
+				setScope( scope as any );
+				const promise = storeTest2.callbacks.asyncFunc();
+				resetScope();
+				resetNamespace();
+
+				expect( await promise ).toBe( 'data from test1' );
+			} );
+
+			it( 'should not wrap other proxified objects with a store proxy', () => {
+				const state = proxifyState( 'test', {} );
+				const store = proxifyStore( 'test', { state } );
+
+				expect( store.state ).toBe( state );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/scopes.ts b/packages/interactivity/src/scopes.ts
new file mode 100644
index 00000000000000..722305f6bee112
--- /dev/null
+++ b/packages/interactivity/src/scopes.ts
@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import type { h as createElement, RefObject } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import { getNamespace } from './namespaces';
+import type { Evaluate } from './hooks';
+
+export interface Scope {
+	evaluate: Evaluate;
+	context: object;
+	serverContext: object;
+	ref: RefObject< HTMLElement >;
+	attributes: createElement.JSX.HTMLAttributes;
+}
+
+// Store stacks for the current scope and the default namespaces and export APIs
+// to interact with them.
+const scopeStack: Scope[] = [];
+
+export const getScope = () => scopeStack.slice( -1 )[ 0 ];
+
+export const setScope = ( scope: Scope ) => {
+	scopeStack.push( scope );
+};
+export const resetScope = () => {
+	scopeStack.pop();
+};
+
+// Wrap the element props to prevent modifications.
+const immutableMap = new WeakMap();
+const immutableError = () => {
+	throw new Error(
+		'Please use `data-wp-bind` to modify the attributes of an element.'
+	);
+};
+const immutableHandlers: ProxyHandler< object > = {
+	get( target, key, receiver ) {
+		const value = Reflect.get( target, key, receiver );
+		return !! value && typeof value === 'object'
+			? deepImmutable( value )
+			: value;
+	},
+	set: immutableError,
+	deleteProperty: immutableError,
+};
+const deepImmutable = < T extends object = {} >( target: T ): T => {
+	if ( ! immutableMap.has( target ) ) {
+		immutableMap.set( target, new Proxy( target, immutableHandlers ) );
+	}
+	return immutableMap.get( target );
+};
+
+/**
+ * Retrieves the context inherited by the element evaluating a function from the
+ * store. The returned value depends on the element and the namespace where the
+ * function calling `getContext()` exists.
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ *                  function exists is used.
+ * @return The context content.
+ */
+export const getContext = < T extends object >( namespace?: string ): T => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	return scope.context[ namespace || getNamespace() ];
+};
+
+/**
+ * Retrieves a representation of the element where a function from the store
+ * is being evalutated. Such representation is read-only, and contains a
+ * reference to the DOM element, its props and a local reactive state.
+ *
+ * @return Element representation.
+ */
+export const getElement = () => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getElement()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	const { ref, attributes } = scope;
+	return Object.freeze( {
+		ref: ref.current,
+		attributes: deepImmutable( attributes ),
+	} );
+};
+
+/**
+ * Retrieves the part of the inherited context defined and updated from the
+ * server.
+ *
+ * The object returned is read-only, and includes the context defined in PHP
+ * with `wp_interactivity_data_wp_context()`, including the corresponding
+ * inherited properties. When `actions.navigate()` is called, this object is
+ * updated to reflect the changes in the new visited page, without affecting the
+ * context returned by `getContext()`. Directives can subscribe to those changes
+ * to update the context if needed.
+ *
+ * @example
+ * ```js
+ *  store('...', {
+ *    callbacks: {
+ *      updateServerContext() {
+ *        const context = getContext();
+ *        const serverContext = getServerContext();
+ *        // Override some property with the new value that came from the server.
+ *        context.overridableProp = serverContext.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ *                  function exists is used.
+ * @return The server context content.
+ */
+export const getServerContext = < T extends object >(
+	namespace?: string
+): T => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getServerContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	return scope.serverContext[ namespace || getNamespace() ];
+};
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
new file mode 100644
index 00000000000000..b147e0f61163bf
--- /dev/null
+++ b/packages/interactivity/src/store.ts
@@ -0,0 +1,289 @@
+/**
+ * Internal dependencies
+ */
+import { proxifyState, proxifyStore, deepMerge } from './proxies';
+/**
+ * External dependencies
+ */
+import { getNamespace } from './namespaces';
+import { isPlainObject } from './utils';
+
+export const stores = new Map();
+const rawStores = new Map();
+const storeLocks = new Map();
+const storeConfigs = new Map();
+const serverStates = new Map();
+
+/**
+ * Get the defined config for the store with the passed namespace.
+ *
+ * @param namespace Store's namespace from which to retrieve the config.
+ * @return Defined config for the given namespace.
+ */
+export const getConfig = ( namespace?: string ) =>
+	storeConfigs.get( namespace || getNamespace() ) || {};
+
+/**
+ * Get the part of the state defined and updated from the server.
+ *
+ * The object returned is read-only, and includes the state defined in PHP with
+ * `wp_interactivity_state()`. When using `actions.navigate()`, this object is
+ * updated to reflect the changes in its properites, without affecting the state
+ * returned by `store()`. Directives can subscribe to those changes to update
+ * the state if needed.
+ *
+ * @example
+ * ```js
+ *  const { state } = store('myStore', {
+ *    callbacks: {
+ *      updateServerState() {
+ *        const serverState = getServerState();
+ *        // Override some property with the new value that came from the server.
+ *        state.overridableProp = serverState.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store's namespace from which to retrieve the server state.
+ * @return The server state for the given namespace.
+ */
+export const getServerState = ( namespace?: string ) => {
+	const ns = namespace || getNamespace();
+	if ( ! serverStates.has( ns ) ) {
+		serverStates.set( ns, proxifyState( ns, {}, { readOnly: true } ) );
+	}
+	return serverStates.get( ns );
+};
+
+interface StoreOptions {
+	/**
+	 * Property to block/unblock private store namespaces.
+	 *
+	 * If the passed value is `true`, it blocks the given namespace, making it
+	 * accessible only trough the returned variables of the `store()` call. In
+	 * the case a lock string is passed, it also blocks the namespace, but can
+	 * be unblocked for other `store()` calls using the same lock string.
+	 *
+	 * @example
+	 * ```
+	 * // The store can only be accessed where the `state` const can.
+	 * const { state } = store( 'myblock/private', { ... }, { lock: true } );
+	 * ```
+	 *
+	 * @example
+	 * ```
+	 * // Other modules knowing `SECRET_LOCK_STRING` can access the namespace.
+	 * const { state } = store(
+	 *   'myblock/private',
+	 *   { ... },
+	 *   { lock: 'SECRET_LOCK_STRING' }
+	 * );
+	 * ```
+	 */
+	lock?: boolean | string;
+}
+
+type Prettify< T > = { [ K in keyof T ]: T[ K ] } & {};
+type DeepPartial< T > = T extends object
+	? { [ P in keyof T ]?: DeepPartial< T[ P ] > }
+	: T;
+type DeepPartialState< T extends { state: object } > = Omit< T, 'state' > & {
+	state?: DeepPartial< T[ 'state' ] >;
+};
+type ConvertGeneratorToPromise< T > = T extends (
+	...args: infer A
+) => Generator< any, infer R, any >
+	? ( ...args: A ) => Promise< R >
+	: never;
+type ConvertGeneratorsToPromises< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertGeneratorToPromise< T[ K ] > extends never
+			? T[ K ]
+			: ConvertGeneratorToPromise< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertGeneratorsToPromises< T[ K ] > >
+		: T[ K ];
+};
+type ConvertPromiseToGenerator< T > = T extends (
+	...args: infer A
+) => Promise< infer R >
+	? ( ...args: A ) => Generator< any, R, any >
+	: never;
+type ConvertPromisesToGenerators< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertPromiseToGenerator< T[ K ] > extends never
+			? T[ K ]
+			: ConvertPromiseToGenerator< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertPromisesToGenerators< T[ K ] > >
+		: T[ K ];
+};
+
+export const universalUnlock =
+	'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
+
+/**
+ * Extends the Interactivity API global store adding the passed properties to
+ * the given namespace. It also returns stable references to the namespace
+ * content.
+ *
+ * These props typically consist of `state`, which is the reactive part of the
+ * store ― which means that any directive referencing a state property will be
+ * re-rendered anytime it changes ― and function properties like `actions` and
+ * `callbacks`, mostly used for event handlers. These props can then be
+ * referenced by any directive to make the HTML interactive.
+ *
+ * @example
+ * ```js
+ *  const { state } = store( 'counter', {
+ *    state: {
+ *      value: 0,
+ *      get double() { return state.value * 2; },
+ *    },
+ *    actions: {
+ *      increment() {
+ *        state.value += 1;
+ *      },
+ *    },
+ *  } );
+ * ```
+ *
+ * The code from the example above allows blocks to subscribe and interact with
+ * the store by using directives in the HTML, e.g.:
+ *
+ * ```html
+ * <div data-wp-interactive="counter">
+ *   <button
+ *     data-wp-text="state.double"
+ *     data-wp-on--click="actions.increment"
+ *   >
+ *     0
+ *   </button>
+ * </div>
+ * ```
+ * @param namespace The store namespace to interact with.
+ * @param storePart Properties to add to the store namespace.
+ * @param options   Options for the given namespace.
+ *
+ * @return A reference to the namespace content.
+ */
+
+// Overload for when the types are inferred.
+export function store< T extends object >(
+	namespace: string,
+	storePart: T,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they contain state.
+export function store< T extends { state: object } >(
+	namespace: string,
+	storePart: ConvertPromisesToGenerators< DeepPartialState< T > >,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they don't contain state.
+export function store< T extends object >(
+	namespace: string,
+	storePart: ConvertPromisesToGenerators< T >,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are divided into multiple parts.
+export function store< T extends object >(
+	namespace: string,
+	storePart: ConvertPromisesToGenerators< DeepPartial< T > >,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+export function store(
+	namespace: string,
+	{ state = {}, ...block }: any = {},
+	{ lock = false }: StoreOptions = {}
+) {
+	if ( ! stores.has( namespace ) ) {
+		// Lock the store if the passed lock is different from the universal
+		// unlock. Once the lock is set (either false, true, or a given string),
+		// it cannot change.
+		if ( lock !== universalUnlock ) {
+			storeLocks.set( namespace, lock );
+		}
+		const rawStore = {
+			state: proxifyState(
+				namespace,
+				isPlainObject( state ) ? state : {}
+			),
+			...block,
+		};
+		const proxifiedStore = proxifyStore( namespace, rawStore );
+		rawStores.set( namespace, rawStore );
+		stores.set( namespace, proxifiedStore );
+	} else {
+		// Lock the store if it wasn't locked yet and the passed lock is
+		// different from the universal unlock. If no lock is given, the store
+		// will be public and won't accept any lock from now on.
+		if ( lock !== universalUnlock && ! storeLocks.has( namespace ) ) {
+			storeLocks.set( namespace, lock );
+		} else {
+			const storeLock = storeLocks.get( namespace );
+			const isLockValid =
+				lock === universalUnlock ||
+				( lock !== true && lock === storeLock );
+
+			if ( ! isLockValid ) {
+				if ( ! storeLock ) {
+					throw Error( 'Cannot lock a public store' );
+				} else {
+					throw Error(
+						'Cannot unlock a private store with an invalid lock code'
+					);
+				}
+			}
+		}
+
+		const target = rawStores.get( namespace );
+		deepMerge( target, block );
+		deepMerge( target.state, state );
+	}
+
+	return stores.get( namespace );
+}
+
+export const parseServerData = ( dom = document ) => {
+	const jsonDataScriptTag =
+		// Preferred Script Module data passing form
+		dom.getElementById(
+			'wp-script-module-data-@wordpress/interactivity'
+		) ??
+		// Legacy form
+		dom.getElementById( 'wp-interactivity-data' );
+	if ( jsonDataScriptTag?.textContent ) {
+		try {
+			return JSON.parse( jsonDataScriptTag.textContent );
+		} catch {}
+	}
+	return {};
+};
+
+export const populateServerData = ( data?: {
+	state?: Record< string, unknown >;
+	config?: Record< string, unknown >;
+} ) => {
+	if ( isPlainObject( data?.state ) ) {
+		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
+			const st = store< any >( namespace, {}, { lock: universalUnlock } );
+			deepMerge( st.state, state, false );
+			deepMerge( getServerState( namespace ), state );
+		} );
+	}
+	if ( isPlainObject( data?.config ) ) {
+		Object.entries( data!.config ).forEach( ( [ namespace, config ] ) => {
+			storeConfigs.set( namespace, config );
+		} );
+	}
+};
+
+// Parse and populate the initial state and config.
+const data = parseServerData();
+populateServerData( data );
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
new file mode 100644
index 00000000000000..1092001db03143
--- /dev/null
+++ b/packages/interactivity/src/test/store.ts
@@ -0,0 +1,286 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+describe( 'Interactivity API', () => {
+	describe( 'store', () => {
+		it( 'dummy test', () => {
+			expect( true ).toBe( true );
+		} );
+
+		describe( 'types', () => {
+			describe( 'the whole store can be inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.clientValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async( n: number ) {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.derived satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						state: {
+							clientValue: number;
+							serverValue: number;
+							readonly derived: number;
+						};
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						state: {
+							clientValue: 1,
+							// @ts-expect-error
+							nonExistent: 2,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, unknown > {
+								const n1 = myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the server state can be typed and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerStore = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const clientStore = {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					};
+
+					type Store = ServerStore & typeof clientStore;
+
+					const myStore = store< Store >( 'test', clientStore );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the state can be casted and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type State = {
+						clientValue: number;
+						serverValue: number;
+						derived: number;
+					};
+
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						} as State,
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed even if doesnt contain state', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+						callbacks: {
+							existent: number;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return n1 + n;
+							},
+						},
+						callbacks: {
+							existent: 1,
+							// @ts-expect-error
+							nonExistent: 1,
+						},
+					} );
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					myStore.callbacks.existent satisfies number;
+					// @ts-expect-error
+					myStore.callbacks.nonExistent satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the store can be divided into multiple parts', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerState = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const firstStorePart = {
+						state: {
+							clientValue1: 1,
+						},
+						actions: {
+							incrementValue1( n = 1 ) {
+								myStore.state.clientValue1 += n;
+							},
+						},
+					};
+
+					type FirstStorePart = typeof firstStorePart;
+
+					const secondStorePart = {
+						state: {
+							clientValue2: 'test',
+						},
+						actions: {
+							*asyncAction() {
+								return (
+									myStore.state.clientValue1 +
+									myStore.state.serverValue
+								);
+							},
+						},
+					};
+
+					type Store = ServerState &
+						FirstStorePart &
+						typeof secondStorePart;
+
+					const myStore = store< Store >( 'test', firstStorePart );
+					store( 'test', secondStorePart );
+
+					myStore.state.clientValue1 satisfies number;
+					myStore.state.clientValue2 satisfies string;
+					myStore.actions.incrementValue1( 1 );
+					myStore.actions.asyncAction() satisfies Promise< number >;
+					( await myStore.actions.asyncAction() ) satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies {};
+				};
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/test/utils.ts b/packages/interactivity/src/test/utils.ts
new file mode 100644
index 00000000000000..2de0ffe6d31e06
--- /dev/null
+++ b/packages/interactivity/src/test/utils.ts
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { kebabToCamelCase } from '../utils';
+
+describe( 'Interactivity API', () => {
+	describe( 'kebabToCamelCase', () => {
+		it( 'should work exactly as the PHP version', async () => {
+			expect( kebabToCamelCase( '' ) ).toBe( '' );
+			expect( kebabToCamelCase( 'item' ) ).toBe( 'item' );
+			expect( kebabToCamelCase( 'my-item' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my_item' ) ).toBe( 'my_item' );
+			expect( kebabToCamelCase( 'My-iTem' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my-item-with-multiple-hyphens' ) ).toBe(
+				'myItemWithMultipleHyphens'
+			);
+			expect( kebabToCamelCase( 'my-item-with--double-hyphens' ) ).toBe(
+				'myItemWith-DoubleHyphens'
+			);
+			expect( kebabToCamelCase( 'my-item-with_under-score' ) ).toBe(
+				'myItemWith_underScore'
+			);
+			expect( kebabToCamelCase( '-my-item' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( 'my-item-' ) ).toBe( 'myItem' );
+			expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts
new file mode 100644
index 00000000000000..ab6b0074727ee7
--- /dev/null
+++ b/packages/interactivity/src/utils.ts
@@ -0,0 +1,376 @@
+/**
+ * External dependencies
+ */
+import {
+	useMemo as _useMemo,
+	useCallback as _useCallback,
+	useEffect as _useEffect,
+	useLayoutEffect as _useLayoutEffect,
+	type EffectCallback,
+	type Inputs,
+} from 'preact/hooks';
+import { effect } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { getScope, setScope, resetScope } from './scopes';
+import { getNamespace, setNamespace, resetNamespace } from './namespaces';
+
+interface Flusher {
+	readonly flush: () => void;
+	readonly dispose: () => void;
+}
+
+declare global {
+	interface Window {
+		scheduler?: {
+			readonly yield?: () => Promise< void >;
+		};
+	}
+}
+
+/**
+ * Executes a callback function after the next frame is rendered.
+ *
+ * @param callback The callback function to be executed.
+ * @return A promise that resolves after the callback function is executed.
+ */
+const afterNextFrame = ( callback: () => void ) => {
+	return new Promise< void >( ( resolve ) => {
+		const done = () => {
+			clearTimeout( timeout );
+			window.cancelAnimationFrame( raf );
+			setTimeout( () => {
+				callback();
+				resolve();
+			} );
+		};
+		const timeout = setTimeout( done, 100 );
+		const raf = window.requestAnimationFrame( done );
+	} );
+};
+
+/**
+ * Returns a promise that resolves after yielding to main.
+ *
+ * @return Promise<void>
+ */
+export const splitTask =
+	typeof window.scheduler?.yield === 'function'
+		? window.scheduler.yield.bind( window.scheduler )
+		: () => {
+				return new Promise( ( resolve ) => {
+					setTimeout( resolve, 0 );
+				} );
+		  };
+
+/**
+ * Creates a Flusher object that can be used to flush computed values and notify listeners.
+ *
+ * Using the mangled properties:
+ * this.c: this._callback
+ * this.x: this._compute
+ * https://github.com/preactjs/signals/blob/main/mangle.json
+ *
+ * @param compute The function that computes the value to be flushed.
+ * @param notify  The function that notifies listeners when the value is flushed.
+ * @return The Flusher object with `flush` and `dispose` properties.
+ */
+function createFlusher( compute: () => void, notify: () => void ): Flusher {
+	let flush: () => void = () => undefined;
+	const dispose = effect( function ( this: any ): void {
+		flush = this.c.bind( this );
+		this.x = compute;
+		this.c = notify;
+		return compute();
+	} );
+	return { flush, dispose } as const;
+}
+
+/**
+ * Custom hook that executes a callback function whenever a signal is triggered.
+ * Version of `useSignalEffect` with a `useEffect`-like execution. This hook
+ * implementation comes from this PR, but we added short-cirtuiting to avoid
+ * infinite loops: https://github.com/preactjs/signals/pull/290
+ *
+ * @param callback The callback function to be executed.
+ */
+export function useSignalEffect( callback: () => unknown ) {
+	_useEffect( () => {
+		let eff: Flusher | null = null;
+		let isExecuting = false;
+
+		const notify = async () => {
+			if ( eff && ! isExecuting ) {
+				isExecuting = true;
+				await afterNextFrame( eff.flush );
+				isExecuting = false;
+			}
+		};
+
+		eff = createFlusher( callback, notify );
+		return eff.dispose;
+	}, [] );
+}
+
+/**
+ * Returns the passed function wrapped with the current scope so it is
+ * accessible whenever the function runs. This is primarily to make the scope
+ * available inside hook callbacks.
+ *
+ * Asyncronous functions should use generators that yield promises instead of awaiting them.
+ * See the documentation for details: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference/#the-store
+ *
+ * @param func The passed function.
+ * @return The wrapped function.
+ */
+export function withScope<
+	Func extends ( ...args: any[] ) => Generator< any, any >,
+>(
+	func: Func
+): (
+	...args: Parameters< Func >
+) => ReturnType< Func > extends Generator< any, infer Return >
+	? Promise< Return >
+	: never;
+export function withScope< Func extends Function >( func: Func ): Func;
+export function withScope( func: ( ...args: unknown[] ) => unknown ) {
+	const scope = getScope();
+	const ns = getNamespace();
+	if ( func?.constructor?.name === 'GeneratorFunction' ) {
+		return async ( ...args: Parameters< typeof func > ) => {
+			const gen = func( ...args ) as Generator;
+			let value: any;
+			let it: any;
+			while ( true ) {
+				setNamespace( ns );
+				setScope( scope );
+				try {
+					it = gen.next( value );
+				} finally {
+					resetScope();
+					resetNamespace();
+				}
+
+				try {
+					value = await it.value;
+				} catch ( e ) {
+					setNamespace( ns );
+					setScope( scope );
+					gen.throw( e );
+				} finally {
+					resetScope();
+					resetNamespace();
+				}
+
+				if ( it.done ) {
+					break;
+				}
+			}
+
+			return value;
+		};
+	}
+	return ( ...args: Parameters< typeof func > ) => {
+		setNamespace( ns );
+		setScope( scope );
+		try {
+			return func( ...args );
+		} finally {
+			resetNamespace();
+			resetScope();
+		}
+	};
+}
+
+/**
+ * Accepts a function that contains imperative code which runs whenever any of
+ * the accessed _reactive_ properties (e.g., values from the global state or the
+ * context) is modified.
+ *
+ * This hook makes the element's scope available so functions like
+ * `getElement()` and `getContext()` can be used inside the passed callback.
+ *
+ * @param callback The hook callback.
+ */
+export function useWatch( callback: () => unknown ) {
+	useSignalEffect( withScope( callback ) );
+}
+
+/**
+ * Accepts a function that contains imperative code which runs only after the
+ * element's first render, mainly useful for intialization logic.
+ *
+ * This hook makes the element's scope available so functions like
+ * `getElement()` and `getContext()` can be used inside the passed callback.
+ *
+ * @param callback The hook callback.
+ */
+export function useInit( callback: EffectCallback ) {
+	_useEffect( withScope( callback ), [] );
+}
+
+/**
+ * Accepts a function that contains imperative, possibly effectful code. The
+ * effects run after browser paint, without blocking it.
+ *
+ * This hook is equivalent to Preact's `useEffect` and makes the element's scope
+ * available so functions like `getElement()` and `getContext()` can be used
+ * inside the passed callback.
+ *
+ * @param callback Imperative function that can return a cleanup
+ *                 function.
+ * @param inputs   If present, effect will only activate if the
+ *                 values in the list change (using `===`).
+ */
+export function useEffect( callback: EffectCallback, inputs: Inputs ) {
+	_useEffect( withScope( callback ), inputs );
+}
+
+/**
+ * Accepts a function that contains imperative, possibly effectful code. Use
+ * this to read layout from the DOM and synchronously re-render.
+ *
+ * This hook is equivalent to Preact's `useLayoutEffect` and makes the element's
+ * scope available so functions like `getElement()` and `getContext()` can be
+ * used inside the passed callback.
+ *
+ * @param callback Imperative function that can return a cleanup
+ *                 function.
+ * @param inputs   If present, effect will only activate if the
+ *                 values in the list change (using `===`).
+ */
+export function useLayoutEffect( callback: EffectCallback, inputs: Inputs ) {
+	_useLayoutEffect( withScope( callback ), inputs );
+}
+
+/**
+ * Returns a memoized version of the callback that only changes if one of the
+ * inputs has changed (using `===`).
+ *
+ * This hook is equivalent to Preact's `useCallback` and makes the element's
+ * scope available so functions like `getElement()` and `getContext()` can be
+ * used inside the passed callback.
+ *
+ * @param callback Callback function.
+ * @param inputs   If present, the callback will only be updated if the
+ *                 values in the list change (using `===`).
+ *
+ * @return The callback function.
+ */
+export function useCallback< T extends Function >(
+	callback: T,
+	inputs: Inputs
+): T {
+	return _useCallback< T >( withScope( callback ), inputs );
+}
+
+/**
+ * Pass a factory function and an array of inputs. `useMemo` will only recompute
+ * the memoized value when one of the inputs has changed.
+ *
+ * This hook is equivalent to Preact's `useMemo` and makes the element's scope
+ * available so functions like `getElement()` and `getContext()` can be used
+ * inside the passed factory function.
+ *
+ * @param factory Factory function that returns that value for memoization.
+ * @param inputs  If present, the factory will only be run to recompute if
+ *                the values in the list change (using `===`).
+ *
+ * @return The memoized value.
+ */
+export function useMemo< T >( factory: () => T, inputs: Inputs ): T {
+	return _useMemo( withScope( factory ), inputs );
+}
+
+/**
+ * Creates a root fragment by replacing a node or an array of nodes in a parent element.
+ * For wrapperless hydration.
+ * See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
+ *
+ * @param parent      The parent element where the nodes will be replaced.
+ * @param replaceNode The node or array of nodes to replace in the parent element.
+ * @return The created root fragment.
+ */
+export const createRootFragment = (
+	parent: Element,
+	replaceNode: Node | Node[]
+) => {
+	replaceNode = ( [] as Node[] ).concat( replaceNode );
+	const sibling = replaceNode[ replaceNode.length - 1 ].nextSibling;
+	function insert( child: any, root: any ) {
+		parent.insertBefore( child, root || sibling );
+	}
+	return ( ( parent as any ).__k = {
+		nodeType: 1,
+		parentNode: parent,
+		firstChild: replaceNode[ 0 ],
+		childNodes: replaceNode,
+		insertBefore: insert,
+		appendChild: insert,
+		removeChild( c: Node ) {
+			parent.removeChild( c );
+		},
+	} );
+};
+
+/**
+ * Transforms a kebab-case string to camelCase.
+ *
+ * @param str The kebab-case string to transform to camelCase.
+ * @return The transformed camelCase string.
+ */
+export function kebabToCamelCase( str: string ): string {
+	return str
+		.replace( /^-+|-+$/g, '' )
+		.toLowerCase()
+		.replace( /-([a-z])/g, function ( _match, group1: string ) {
+			return group1.toUpperCase();
+		} );
+}
+
+const logged: Set< string > = new Set();
+
+/**
+ * Shows a warning with `message` if environment is not `production`.
+ *
+ * Based on the `@wordpress/warning` package.
+ *
+ * @param message Message to show in the warning.
+ */
+export const warn = ( message: string ): void => {
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( logged.has( message ) ) {
+			return;
+		}
+
+		// eslint-disable-next-line no-console
+		console.warn( message );
+
+		// Throwing an error and catching it immediately to improve debugging
+		// A consumer can use 'pause on caught exceptions'
+		try {
+			throw Error( message );
+		} catch ( e ) {
+			// Do nothing.
+		}
+		logged.add( message );
+	}
+};
+
+/**
+ * Checks if the passed `candidate` is a plain object with just the `Object`
+ * prototype.
+ *
+ * @param candidate The item to check.
+ * @return Whether `candidate` is a plain object.
+ */
+export const isPlainObject = (
+	candidate: unknown
+): candidate is Record< string, unknown > =>
+	Boolean(
+		candidate &&
+			typeof candidate === 'object' &&
+			candidate.constructor === Object
+	);
diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts
new file mode 100644
index 00000000000000..9a1ec7ec5d76f0
--- /dev/null
+++ b/packages/interactivity/src/vdom.ts
@@ -0,0 +1,191 @@
+/**
+ * External dependencies
+ */
+import { h, type ComponentChild, type JSX } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { directivePrefix as p } from './constants';
+import { warn } from './utils';
+import { type DirectiveEntry } from './hooks';
+
+const ignoreAttr = `data-${ p }-ignore`;
+const islandAttr = `data-${ p }-interactive`;
+const fullPrefix = `data-${ p }-`;
+const namespaces: Array< string | null > = [];
+const currentNamespace = () => namespaces[ namespaces.length - 1 ] ?? null;
+const isObject = ( item: unknown ): item is Record< string, unknown > =>
+	Boolean( item && typeof item === 'object' && item.constructor === Object );
+
+// Regular expression for directive parsing.
+const directiveParser = new RegExp(
+	`^data-${ p }-` + // ${p} must be a prefix string, like 'wp'.
+		// Match alphanumeric characters including hyphen-separated
+		// segments. It excludes underscore intentionally to prevent confusion.
+		// E.g., "custom-directive".
+		'([a-z0-9]+(?:-[a-z0-9]+)*)' +
+		// (Optional) Match '--' followed by any alphanumeric charachters. It
+		// excludes underscore intentionally to prevent confusion, but it can
+		// contain multiple hyphens. E.g., "--custom-prefix--with-more-info".
+		'(?:--([a-z0-9_-]+))?$',
+	'i' // Case insensitive.
+);
+
+// Regular expression for reference parsing. It can contain a namespace before
+// the reference, separated by `::`, like `some-namespace::state.somePath`.
+// Namespaces can contain any alphanumeric characters, hyphens, underscores or
+// forward slashes. References don't have any restrictions.
+const nsPathRegExp = /^([\w_\/-]+)::(.+)$/;
+
+export const hydratedIslands = new WeakSet();
+
+/**
+ * Recursive function that transforms a DOM tree into vDOM.
+ *
+ * @param root The root element or node to start traversing on.
+ * @return The resulting vDOM tree.
+ */
+export function toVdom( root: Node ): Array< ComponentChild > {
+	const treeWalker = document.createTreeWalker(
+		root,
+		205 // TEXT + CDATA_SECTION + COMMENT + PROCESSING_INSTRUCTION + ELEMENT
+	);
+
+	function walk(
+		node: Node
+	): [ ComponentChild ] | [ ComponentChild, Node | null ] {
+		const { nodeType } = node;
+
+		// TEXT_NODE (3)
+		if ( nodeType === 3 ) {
+			return [ ( node as Text ).data ];
+		}
+
+		// CDATA_SECTION_NODE (4)
+		if ( nodeType === 4 ) {
+			const next = treeWalker.nextSibling();
+			( node as CDATASection ).replaceWith(
+				new window.Text( ( node as CDATASection ).nodeValue ?? '' )
+			);
+			return [ node.nodeValue, next ];
+		}
+
+		// COMMENT_NODE (8) || PROCESSING_INSTRUCTION_NODE (7)
+		if ( nodeType === 8 || nodeType === 7 ) {
+			const next = treeWalker.nextSibling();
+			( node as Comment | ProcessingInstruction ).remove();
+			return [ null, next ];
+		}
+
+		const elementNode = node as HTMLElement;
+		const { attributes } = elementNode;
+		const localName = elementNode.localName as keyof JSX.IntrinsicElements;
+
+		const props: Record< string, any > = {};
+		const children: Array< ComponentChild > = [];
+		const directives: Array<
+			[ name: string, namespace: string | null, value: unknown ]
+		> = [];
+		let ignore = false;
+		let island = false;
+
+		for ( let i = 0; i < attributes.length; i++ ) {
+			const attributeName = attributes[ i ].name;
+			const attributeValue = attributes[ i ].value;
+			if (
+				attributeName[ fullPrefix.length ] &&
+				attributeName.slice( 0, fullPrefix.length ) === fullPrefix
+			) {
+				if ( attributeName === ignoreAttr ) {
+					ignore = true;
+				} else {
+					const regexResult = nsPathRegExp.exec( attributeValue );
+					const namespace = regexResult?.[ 1 ] ?? null;
+					let value: any = regexResult?.[ 2 ] ?? attributeValue;
+					try {
+						const parsedValue = JSON.parse( value );
+						value = isObject( parsedValue ) ? parsedValue : value;
+					} catch {}
+					if ( attributeName === islandAttr ) {
+						island = true;
+						const islandNamespace =
+							// eslint-disable-next-line no-nested-ternary
+							typeof value === 'string'
+								? value
+								: typeof value?.namespace === 'string'
+								? value.namespace
+								: null;
+						namespaces.push( islandNamespace );
+					} else {
+						directives.push( [ attributeName, namespace, value ] );
+					}
+				}
+			} else if ( attributeName === 'ref' ) {
+				continue;
+			}
+			props[ attributeName ] = attributeValue;
+		}
+
+		if ( ignore && ! island ) {
+			return [
+				h< any, any >( localName, {
+					...props,
+					innerHTML: elementNode.innerHTML,
+					__directives: { ignore: true },
+				} ),
+			];
+		}
+		if ( island ) {
+			hydratedIslands.add( elementNode );
+		}
+
+		if ( directives.length ) {
+			props.__directives = directives.reduce<
+				Record< string, Array< DirectiveEntry > >
+			>( ( obj, [ name, ns, value ] ) => {
+				const directiveMatch = directiveParser.exec( name );
+				if ( directiveMatch === null ) {
+					warn( `Found malformed directive name: ${ name }.` );
+					return obj;
+				}
+				const prefix = directiveMatch[ 1 ] || '';
+				const suffix = directiveMatch[ 2 ] || null;
+
+				obj[ prefix ] = obj[ prefix ] || [];
+				obj[ prefix ].push( {
+					namespace: ns ?? currentNamespace()!,
+					value: value as DirectiveEntry[ 'value' ],
+					suffix,
+				} );
+				return obj;
+			}, {} );
+		}
+
+		if ( localName === 'template' ) {
+			props.content = [
+				...( elementNode as HTMLTemplateElement ).content.childNodes,
+			].map( ( childNode ) => toVdom( childNode ) );
+		} else {
+			let child = treeWalker.firstChild();
+			if ( child ) {
+				while ( child ) {
+					const [ vnode, nextChild ] = walk( child );
+					if ( vnode ) {
+						children.push( vnode );
+					}
+					child = nextChild || treeWalker.nextSibling();
+				}
+				treeWalker.parentNode();
+			}
+		}
+
+		// Restore previous namespace.
+		if ( island ) {
+			namespaces.pop();
+		}
+
+		return [ h( localName, props, children ) ];
+	}
+
+	return walk( treeWalker.currentNode );
+}
diff --git a/packages/interactivity/tsconfig.json b/packages/interactivity/tsconfig.json
new file mode 100644
index 00000000000000..1d154e2089065d
--- /dev/null
+++ b/packages/interactivity/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+
+		"noImplicitAny": false
+	},
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/interactivity/tsconfig.test.json b/packages/interactivity/tsconfig.test.json
new file mode 100644
index 00000000000000..6a90abc2ba2210
--- /dev/null
+++ b/packages/interactivity/tsconfig.test.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"noEmit": true,
+		"emitDeclarationOnly": false,
+		"types": [ "jest" ]
+	},
+	"references": [ { "path": "./tsconfig.json" } ],
+	"files": [ "src/test/store.ts" ],
+	"exclude": []
+}
diff --git a/packages/interface/.npmrc b/packages/interface/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/interface/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 89b0df2439f95c..56b01075257331 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,130 @@
 
 ## Unreleased
 
+## 8.2.0 (2024-11-27)
+
+## 8.1.0 (2024-11-16)
+
+## 8.0.0 (2024-10-30)
+
+### Breaking Changes
+
+-   Removed `smallScreenTitle` prop from the `ComplementaryArea` component ([#64474](https://github.com/WordPress/gutenberg/pull/64474)).
+
+## 7.0.0 (2024-10-16)
+
+### Breaking Changes
+
+-   `InterfaceSkeleton` no longer supports region navigation and its props `enableRegionNavigation` and `shortcuts` are removed. ([#63611](https://github.com/WordPress/gutenberg/pull/63611)). It’s recommended to add region navigation with the higher-order component `navigateRegions` or the hook `__unstableUseNavigateRegions` from `@wordpress/components`.
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 5.34.0 (2024-05-02)
+
+## 5.33.0 (2024-04-19)
+
+## 5.32.0 (2024-04-03)
+
+## 5.31.0 (2024-03-21)
+
+## 5.30.0 (2024-03-06)
+
+### Breaking Changes
+
+-   Removed `MoreMenuDropdown` component ([#59095](https://github.com/WordPress/gutenberg/pull/59095)).
+
+## 5.29.0 (2024-02-21)
+
+## 5.28.0 (2024-02-09)
+
+## 5.27.0 (2024-01-24)
+
+## 5.26.0 (2024-01-10)
+
+## 5.25.0 (2023-12-13)
+
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
+## 5.22.0 (2023-11-02)
+
+## 5.21.0 (2023-10-18)
+
+## 5.20.0 (2023-10-05)
+
+## 5.19.0 (2023-09-20)
+
+## 5.18.0 (2023-08-31)
+
+## 5.17.0 (2023-08-16)
+
+## 5.16.0 (2023-08-10)
+
+## 5.15.0 (2023-07-20)
+
+## 5.14.0 (2023-07-05)
+
+## 5.13.0 (2023-06-23)
+
+## 5.12.0 (2023-06-07)
+
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
+## 5.9.0 (2023-04-26)
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 4.21.0 (2022-11-16)
 
 ## 4.20.0 (2022-11-02)
@@ -42,7 +166,7 @@
 
 ## 4.2.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/deprecated` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,13 +174,13 @@
 
 ## 4.1.0 (2021-09-09)
 
-### New Feature
+### New Features
 
 -   Add support for editor 'feature' preferences. Adds an `isFeatureActive` selector, a `toggleFeature` action, a `MoreMenuDropdown` component, and a `MoreMenuFeatureToggle` component. ([#33774](https://github.com/WordPress/gutenberg/pull/33774)).
 
 ## 4.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -68,8 +192,8 @@
 
 ### 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/.
+-   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/>.
 
 ## 2.0.0 (2021-04-06)
 
@@ -91,7 +215,7 @@
 
 ## 0.11.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the interface namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
diff --git a/packages/interface/README.md b/packages/interface/README.md
index 915be856af178d..27226850badb58 100644
--- a/packages/interface/README.md
+++ b/packages/interface/README.md
@@ -27,25 +27,25 @@ Below are some examples of how to control the active complementary area using th
 ```js
 wp.data
 	.select( 'core/interface' )
-	.getActiveComplementaryArea( 'core/edit-post' );
+	.getActiveComplementaryArea( 'core' );
 // -> "edit-post/document"
 
 wp.data
 	.dispatch( 'core/interface' )
-	.enableComplementaryArea( 'core/edit-post', 'edit-post/block' );
+	.enableComplementaryArea( 'core', 'edit-post/block' );
 
 wp.data
 	.select( 'core/interface' )
-	.getActiveComplementaryArea( 'core/edit-post' );
+	.getActiveComplementaryArea( 'core' );
 // -> "edit-post/block"
 
 wp.data
 	.dispatch( 'core/interface' )
-	.disableComplementaryArea( 'core/edit-post' );
+	.disableComplementaryArea( 'core' );
 
 wp.data
 	.select( 'core/interface' )
-	.getActiveComplementaryArea( 'core/edit-post' );
+	.getActiveComplementaryArea( 'core' );
 // -> null
 ```
 
@@ -56,17 +56,17 @@ wp.data
 Example usage: `ComplementaryArea` component makes use of `PinnedItems` and automatically adds a pinned item for the complementary areas marked as a favorite.
 
 ```js
-wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' );
+wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
 // -> false
 
-wp.data.dispatch( 'core/interface' ).pinItem( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' );
+wp.data.dispatch( 'core/interface' ).pinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
 
-wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' );
+wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
 // -> true
 
-wp.data.dispatch( 'core/interface' ).unpinItem( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' );
+wp.data.dispatch( 'core/interface' ).unpinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
 
-wp.data.select( 'core/interface' ).isItemPinned( 'core/edit-post', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false
+wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false
 ```
 
 ### Preferences
@@ -111,29 +111,6 @@ wp.data
 	.isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // false
 ```
 
-The `MoreMenuDropdown` and `MoreMenuFeatureToggle` components help to implement an editor menu for changing preferences and feature values.
-
-```jsx
-function MyEditorMenu() {
-	return (
-		<MoreMenuDropdown>
-			{ () => (
-				<MenuGroup label={ __( 'Features' ) }>
-					<MoreMenuFeatureToggle
-						scope="namespace/editor-or-plugin-name"
-						feature="myFeatureName"
-						label={ __( 'My feature' ) }
-						info={ __( 'A really awesome feature' ) }
-						messageActivated={ __( 'My feature activated' ) }
-						messageDeactivated={ __( 'My feature deactivated' ) }
-					/>
-				</MenuGroup>
-			) }
-		</MoreMenuDropdown>
-	);
-}
-```
-
 ## 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.
diff --git a/packages/interface/complementary-area-context/index.js b/packages/interface/complementary-area-context/index.js
deleted file mode 100644
index bdfc6869e1e51d..00000000000000
--- a/packages/interface/complementary-area-context/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 5bafbab97f038b..2f3ada022dabe4 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "4.21.0",
+	"version": "8.2.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,34 +20,36 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@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",
-		"@wordpress/plugins": "file:../plugins",
-		"@wordpress/preferences": "file:../preferences",
-		"@wordpress/viewport": "file:../viewport",
-		"classnames": "^2.3.1"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/viewport": "*",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/interface/src/components/complementary-area-context/index.js b/packages/interface/src/components/complementary-area-context/index.js
deleted file mode 100644
index bdfc6869e1e51d..00000000000000
--- a/packages/interface/src/components/complementary-area-context/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );
diff --git a/packages/interface/src/components/complementary-area-header/index.js b/packages/interface/src/components/complementary-area-header/index.js
index ca4e4ca5f07c4c..85670155086003 100644
--- a/packages/interface/src/components/complementary-area-header/index.js
+++ b/packages/interface/src/components/complementary-area-header/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,6 @@ import { closeSmall } from '@wordpress/icons';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {
-	smallScreenTitle,
 	children,
 	className,
 	toggleButtonProps,
@@ -23,27 +22,17 @@ const ComplementaryAreaHeader = ( {
 		<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
 	);
 	return (
-		<>
-			<div className="components-panel__header interface-complementary-area-header__small">
-				{ smallScreenTitle && (
-					<span className="interface-complementary-area-header__small-title">
-						{ smallScreenTitle }
-					</span>
-				) }
-				{ toggleButton }
-			</div>
-			<div
-				className={ classnames(
-					'components-panel__header',
-					'interface-complementary-area-header',
-					className
-				) }
-				tabIndex={ -1 }
-			>
-				{ children }
-				{ toggleButton }
-			</div>
-		</>
+		<div
+			className={ clsx(
+				'components-panel__header',
+				'interface-complementary-area-header',
+				className
+			) }
+			tabIndex={ -1 }
+		>
+			{ children }
+			{ toggleButton }
+		</div>
 	);
 };
 
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index 3eb5c897d668dc..d2ae1fe6ecda79 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -1,41 +1,9 @@
-.components-panel__header.interface-complementary-area-header__small {
-	background: $white;
-	padding-right: $grid-unit-05;
-
-	.interface-complementary-area-header__small-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width: 100%;
-	}
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-05;
-
-	.components-button.has-icon {
-		display: none;
-		margin-left: auto;
-
-		~ .components-button {
-			margin-left: 0;
-		}
-
-		@include break-medium() {
-			display: flex;
-		}
-	}
-}
+	padding-right: $grid-unit-10; // Reduced padding to account for close buttons.
+	gap: $grid-unit-05; // Always ensure space between contents and close buttons.
 
-// This overrides the negative margins between two consecutives panels.
-// since the first panel is hidden.
-.components-panel__header + .interface-complementary-area-header {
-	@include break-medium() {
-		margin-top: 0;
+	.interface-complementary-area-header__title {
+		margin: 0 auto 0 0;
 	}
 }
diff --git a/packages/interface/src/components/complementary-area-more-menu-item/README.md b/packages/interface/src/components/complementary-area-more-menu-item/README.md
index c1a1fe103ee7cf..a369f7c3f600cc 100644
--- a/packages/interface/src/components/complementary-area-more-menu-item/README.md
+++ b/packages/interface/src/components/complementary-area-more-menu-item/README.md
@@ -5,7 +5,7 @@ Props not referenced here are passed to the component used to render the menu it
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
diff --git a/packages/interface/src/components/complementary-area-toggle/README.md b/packages/interface/src/components/complementary-area-toggle/README.md
index 53bdf04239f503..3baa880e8499a9 100644
--- a/packages/interface/src/components/complementary-area-toggle/README.md
+++ b/packages/interface/src/components/complementary-area-toggle/README.md
@@ -6,7 +6,7 @@
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index aa77825d4a4f85..40b4dd99be7432 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -3,34 +3,64 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
-function ComplementaryAreaToggle( {
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+	return [
+		'checkbox',
+		'option',
+		'radio',
+		'switch',
+		'menuitemcheckbox',
+		'menuitemradio',
+		'treeitem',
+	].includes( role );
+}
+
+export default function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
-	identifier,
-	icon,
+	identifier: identifierProp,
+	icon: iconProp,
 	selectedIcon,
 	name,
+	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
 	const isSelected = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
 			identifier,
-		[ identifier ]
+		[ identifier, scope ]
 	);
+
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+
 	return (
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
+			aria-controls={ identifier.replace( '/', ':' ) }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				roleSupportsCheckedState( props.role ) ? isSelected : undefined
+			}
 			onClick={ () => {
 				if ( isSelected ) {
 					disableComplementaryArea( scope );
@@ -38,9 +68,8 @@ function ComplementaryAreaToggle( {
 					enableComplementaryArea( scope, identifier );
 				}
 			} }
+			shortcut={ shortcut }
 			{ ...props }
 		/>
 	);
 }
-
-export default complementaryAreaContext( ComplementaryAreaToggle );
diff --git a/packages/interface/src/components/complementary-area/README.md b/packages/interface/src/components/complementary-area/README.md
index 5d1780e2b29849..b270da23931a22 100644
--- a/packages/interface/src/components/complementary-area/README.md
+++ b/packages/interface/src/components/complementary-area/README.md
@@ -5,7 +5,7 @@ Multiple areas may be added in a given time, but only one is visible; the compon
 
 The contents passed to ComplementaryArea are rendered in the ComplementaryArea.Slot corresponding to their scope if the complementary area is enabled.
 
-Besides rendering the complimentary area, the component renders a button in `PinnedItems` that allows opening the complementary area. The button only appears if the complementary is marked as favorite. By default, the complementary area headers rendered contain a button to mark and unmark areas as favorites.
+Besides rendering the complementary area, the component renders a button in `PinnedItems` that allows opening the complementary area. The button only appears if the complementary is marked as favorite. By default, the complementary area headers rendered contain a button to mark and unmark areas as favorites.
 
 ## Props
 
@@ -50,7 +50,7 @@ A className passed to the header container.
 
 The icon to render.
 
--   Type: `Function|WPComponent|null`
+-   Type: `Function|Component|null`
 -   Required: No
 -   Default: `null`
 
@@ -79,19 +79,11 @@ A className passed to the panel that contains the contents of the sidebar.
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
 
-### smallScreenTitle
-
-In small screens, the complementary area may take up the entire screen.
-`smallScreenTitle` allows displaying a title above the complementary area, so the user is more aware of what the area refers to.
-
--   Type: `String`
--   Required: No
-
 ### title
 
 Human friendly title of the complementary area.
@@ -114,7 +106,7 @@ A slot that renders the currently active ComplementaryArea.
 
 ### scope
 
-The scope of the complementary area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index bac359b10326ad..af56cf0c1755e1 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -1,17 +1,31 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { Button, Panel, Slot, Fill } from '@wordpress/components';
+import {
+	Button,
+	Panel,
+	Slot,
+	Fill,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { check, starEmpty, starFilled } from '@wordpress/icons';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { store as viewportStore } from '@wordpress/viewport';
+import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	usePrevious,
+} from '@wordpress/compose';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -19,18 +33,81 @@ import { store as viewportStore } from '@wordpress/viewport';
 import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
-import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
+const ANIMATION_DURATION = 0.3;
+
 function ComplementaryAreaSlot( { scope, ...props } ) {
 	return <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;
 }
 
-function ComplementaryAreaFill( { scope, children, className } ) {
+const SIDEBAR_WIDTH = 280;
+const variants = {
+	open: { width: SIDEBAR_WIDTH },
+	closed: { width: 0 },
+	mobileOpen: { width: '100vw' },
+};
+
+function ComplementaryAreaFill( {
+	activeArea,
+	isActive,
+	scope,
+	children,
+	className,
+	id,
+} ) {
+	const disableMotion = useReducedMotion();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	// This is used to delay the exit animation to the next tick.
+	// The reason this is done is to allow us to apply the right transition properties
+	// When we switch from an open sidebar to another open sidebar.
+	// we don't want to animate in this case.
+	const previousActiveArea = usePrevious( activeArea );
+	const previousIsActive = usePrevious( isActive );
+	const [ , setState ] = useState( {} );
+	useEffect( () => {
+		setState( {} );
+	}, [ isActive ] );
+	const transition = {
+		type: 'tween',
+		duration:
+			disableMotion ||
+			isMobileViewport ||
+			( !! previousActiveArea &&
+				!! activeArea &&
+				activeArea !== previousActiveArea )
+				? 0
+				: ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
+
 	return (
 		<Fill name={ `ComplementaryArea/${ scope }` }>
-			<div className={ className }>{ children }</div>
+			<AnimatePresence initial={ false }>
+				{ ( previousIsActive || isActive ) && (
+					<motion.div
+						variants={ variants }
+						initial="closed"
+						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
+						exit="closed"
+						transition={ transition }
+						className="interface-complementary-area__fill"
+					>
+						<div
+							id={ id }
+							className={ className }
+							style={ {
+								width: isMobileViewport
+									? '100vw'
+									: SIDEBAR_WIDTH,
+							} }
+						>
+							{ children }
+						</div>
+					</motion.div>
+				) }
+			</AnimatePresence>
 		</Fill>
 	);
 }
@@ -42,76 +119,113 @@ function useAdjustComplementaryListener(
 	isActive,
 	isSmall
 ) {
-	const previousIsSmall = useRef( false );
-	const shouldOpenWhenNotSmall = useRef( false );
+	const previousIsSmallRef = useRef( false );
+	const shouldOpenWhenNotSmallRef = useRef( false );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 	useEffect( () => {
-		// If the complementary area is active and the editor is switching from a big to a small window size.
-		if ( isActive && isSmall && ! previousIsSmall.current ) {
-			// Disable the complementary area.
+		// If the complementary area is active and the editor is switching from
+		// a big to a small window size.
+		if ( isActive && isSmall && ! previousIsSmallRef.current ) {
 			disableComplementaryArea( scope );
-			// Flag the complementary area to be reopened when the window size goes from small to big.
-			shouldOpenWhenNotSmall.current = true;
+			// Flag the complementary area to be reopened when the window size
+			// goes from small to big.
+			shouldOpenWhenNotSmallRef.current = true;
 		} else if (
-			// If there is a flag indicating the complementary area should be enabled when we go from small to big window size
-			// and we are going from a small to big window size.
-			shouldOpenWhenNotSmall.current &&
+			// If there is a flag indicating the complementary area should be
+			// enabled when we go from small to big window size and we are going
+			// from a small to big window size.
+			shouldOpenWhenNotSmallRef.current &&
 			! isSmall &&
-			previousIsSmall.current
+			previousIsSmallRef.current
 		) {
-			// Remove the flag indicating the complementary area should be enabled.
-			shouldOpenWhenNotSmall.current = false;
-			// Enable the complementary area.
+			// Remove the flag indicating the complementary area should be
+			// enabled.
+			shouldOpenWhenNotSmallRef.current = false;
 			enableComplementaryArea( scope, identifier );
 		} else if (
-			// If the flag is indicating the current complementary should be reopened but another complementary area becomes active,
-			// remove the flag.
-			shouldOpenWhenNotSmall.current &&
+			// If the flag is indicating the current complementary should be
+			// reopened but another complementary area becomes active, remove
+			// the flag.
+			shouldOpenWhenNotSmallRef.current &&
 			activeArea &&
 			activeArea !== identifier
 		) {
-			shouldOpenWhenNotSmall.current = false;
+			shouldOpenWhenNotSmallRef.current = false;
 		}
-		if ( isSmall !== previousIsSmall.current ) {
-			previousIsSmall.current = isSmall;
+		if ( isSmall !== previousIsSmallRef.current ) {
+			previousIsSmallRef.current = isSmall;
 		}
-	}, [ isActive, isSmall, scope, identifier, activeArea ] );
+	}, [
+		isActive,
+		isSmall,
+		scope,
+		identifier,
+		activeArea,
+		disableComplementaryArea,
+		enableComplementaryArea,
+	] );
 }
 
 function ComplementaryArea( {
 	children,
 	className,
 	closeLabel = __( 'Close plugin' ),
-	identifier,
+	identifier: identifierProp,
 	header,
 	headerClassName,
-	icon,
+	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
 	scope,
 	name,
-	smallScreenTitle,
 	title,
 	toggleShortcut,
 	isActiveByDefault,
-	showIconLabels = false,
 } ) {
-	const { isActive, isPinned, activeArea, isSmall, isLarge } = useSelect(
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
+
+	// This state is used to delay the rendering of the Fill
+	// until the initial effect runs.
+	// This prevents the animation from running on mount if
+	// the complementary area is active by default.
+	const [ isReady, setIsReady ] = useState( false );
+	const {
+		isLoading,
+		isActive,
+		isPinned,
+		activeArea,
+		isSmall,
+		isLarge,
+		showIconLabels,
+	} = useSelect(
 		( select ) => {
-			const { getActiveComplementaryArea, isItemPinned } =
-				select( interfaceStore );
+			const {
+				getActiveComplementaryArea,
+				isComplementaryAreaLoading,
+				isItemPinned,
+			} = select( interfaceStore );
+			const { get } = select( preferencesStore );
+
 			const _activeArea = getActiveComplementaryArea( scope );
+
 			return {
+				isLoading: isComplementaryAreaLoading( scope ),
 				isActive: _activeArea === identifier,
 				isPinned: isItemPinned( scope, identifier ),
 				activeArea: _activeArea,
 				isSmall: select( viewportStore ).isViewportMatch( '< medium' ),
 				isLarge: select( viewportStore ).isViewportMatch( 'large' ),
+				showIconLabels: get( 'core', 'showIconLabels' ),
 			};
 		},
 		[ identifier, scope ]
 	);
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -127,10 +241,27 @@ function ComplementaryArea( {
 	} = useDispatch( interfaceStore );
 
 	useEffect( () => {
+		// Set initial visibility: For large screens, enable if it's active by
+		// default. For small screens, always initially disable.
 		if ( isActiveByDefault && activeArea === undefined && ! isSmall ) {
 			enableComplementaryArea( scope, identifier );
+		} else if ( activeArea === undefined && isSmall ) {
+			disableComplementaryArea( scope, identifier );
 		}
-	}, [ activeArea, isActiveByDefault, scope, identifier, isSmall ] );
+		setIsReady( true );
+	}, [
+		activeArea,
+		isActiveByDefault,
+		scope,
+		identifier,
+		isSmall,
+		enableComplementaryArea,
+		disableComplementaryArea,
+	] );
+
+	if ( ! isReady ) {
+		return;
+	}
 
 	return (
 		<>
@@ -144,10 +275,13 @@ function ComplementaryArea( {
 								isActive && ( ! showIconLabels || isLarge )
 							}
 							aria-expanded={ isActive }
+							aria-disabled={ isLoading }
 							label={ title }
 							icon={ showIconLabels ? check : icon }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
+							shortcut={ toggleShortcut }
 						/>
 					) }
 				</PinnedItems>
@@ -161,63 +295,59 @@ function ComplementaryArea( {
 					{ title }
 				</ComplementaryAreaMoreMenuItem>
 			) }
-			{ isActive && (
-				<ComplementaryAreaFill
-					className={ classnames(
-						'interface-complementary-area',
-						className
-					) }
-					scope={ scope }
+			<ComplementaryAreaFill
+				activeArea={ activeArea }
+				isActive={ isActive }
+				className={ clsx( 'interface-complementary-area', className ) }
+				scope={ scope }
+				id={ identifier.replace( '/', ':' ) }
+			>
+				<ComplementaryAreaHeader
+					className={ headerClassName }
+					closeLabel={ closeLabel }
+					onClose={ () => disableComplementaryArea( scope ) }
+					toggleButtonProps={ {
+						label: closeLabel,
+						size: 'compact',
+						shortcut: toggleShortcut,
+						scope,
+						identifier,
+					} }
 				>
-					<ComplementaryAreaHeader
-						className={ headerClassName }
-						closeLabel={ closeLabel }
-						onClose={ () => disableComplementaryArea( scope ) }
-						smallScreenTitle={ smallScreenTitle }
-						toggleButtonProps={ {
-							label: closeLabel,
-							shortcut: toggleShortcut,
-							scope,
-							identifier,
-						} }
-					>
-						{ header || (
-							<>
-								<strong>{ title }</strong>
-								{ isPinnable && (
-									<Button
-										className="interface-complementary-area__pin-unpin-item"
-										icon={
-											isPinned ? starFilled : starEmpty
-										}
-										label={
-											isPinned
-												? __( 'Unpin from toolbar' )
-												: __( 'Pin to toolbar' )
-										}
-										onClick={ () =>
-											( isPinned ? unpinItem : pinItem )(
-												scope,
-												identifier
-											)
-										}
-										isPressed={ isPinned }
-										aria-expanded={ isPinned }
-									/>
-								) }
-							</>
-						) }
-					</ComplementaryAreaHeader>
-					<Panel className={ panelClassName }>{ children }</Panel>
-				</ComplementaryAreaFill>
-			) }
+					{ header || (
+						<>
+							<h2 className="interface-complementary-area-header__title">
+								{ title }
+							</h2>
+							{ isPinnable && ! isMobileViewport && (
+								<Button
+									className="interface-complementary-area__pin-unpin-item"
+									icon={ isPinned ? starFilled : starEmpty }
+									label={
+										isPinned
+											? __( 'Unpin from toolbar' )
+											: __( 'Pin to toolbar' )
+									}
+									onClick={ () =>
+										( isPinned ? unpinItem : pinItem )(
+											scope,
+											identifier
+										)
+									}
+									isPressed={ isPinned }
+									aria-expanded={ isPinned }
+									size="compact"
+								/>
+							) }
+						</>
+					) }
+				</ComplementaryAreaHeader>
+				<Panel className={ panelClassName }>{ children }</Panel>
+			</ComplementaryAreaFill>
 		</>
 	);
 }
 
-const ComplementaryAreaWrapped =
-	withComplementaryAreaContext( ComplementaryArea );
-
-ComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;
+ComplementaryArea.Slot = ComplementaryAreaSlot;
 
-export default ComplementaryAreaWrapped;
+export default ComplementaryArea;
diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss
index 261080f29aacd1..1f769acb69f74d 100644
--- a/packages/interface/src/components/complementary-area/style.scss
+++ b/packages/interface/src/components/complementary-area/style.scss
@@ -1,6 +1,8 @@
 .interface-complementary-area {
 	background: $white;
 	color: $gray-900;
+	height: 100%;
+	overflow: auto;
 
 	@include break-small() {
 		-webkit-overflow-scrolling: touch;
@@ -22,21 +24,18 @@
 		top: 0;
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
-		&.edit-post-sidebar__panel-tabs {
-			top: $panel-header-height;
-
-			@include break-medium() {
-				top: 0;
-			}
+		&.editor-sidebar__panel-tabs {
+			top: 0;
 		}
 	}
 
-	p:not(.components-base-control__help) {
+	p:not(.components-base-control__help, .components-form-token-field__help) {
 		margin-top: 0;
 	}
 
 	h2 {
 		font-size: $default-font-size;
+		font-weight: 500;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
@@ -72,3 +71,7 @@
 		left: auto;
 	}
 }
+
+.interface-complementary-area__fill {
+	height: 100%;
+}
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
index c9c2d09b3b3ab0..a96d3304db7c5a 100644
--- a/packages/interface/src/components/index.js
+++ b/packages/interface/src/components/index.js
@@ -3,11 +3,5 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
 export { default as FullscreenMode } from './fullscreen-mode';
 export { default as InterfaceSkeleton } from './interface-skeleton';
 export { default as PinnedItems } from './pinned-items';
-export { default as MoreMenuDropdown } from './more-menu-dropdown';
-export { default as MoreMenuFeatureToggle } from './more-menu-feature-toggle';
 export { default as ActionItem } from './action-item';
-export { default as PreferencesModal } from './preferences-modal';
-export { default as PreferencesModalTabs } from './preferences-modal-tabs';
-export { default as PreferencesModalSection } from './preferences-modal-section';
-export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
 export { default as NavigableRegion } from './navigable-region';
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index f7d5ab36566e30..2417cc909d1698 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -1,24 +1,35 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
-	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useMergeRefs } from '@wordpress/compose';
+import { __, _x } from '@wordpress/i18n';
+import {
+	useReducedMotion,
+	useViewportMatch,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import NavigableRegion from '../navigable-region';
 
+const ANIMATION_DURATION = 0.25;
+const commonTransition = {
+	type: 'tween',
+	duration: ANIMATION_DURATION,
+	ease: [ 0.6, 0, 0.4, 1 ],
+};
+
 function useHTMLClass( className ) {
 	useEffect( () => {
 		const element =
@@ -33,6 +44,33 @@ function useHTMLClass( className ) {
 	}, [ className ] );
 }
 
+const headerVariants = {
+	hidden: { opacity: 1, marginTop: -60 },
+	visible: { opacity: 1, marginTop: 0 },
+	distractionFreeHover: {
+		opacity: 1,
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.2,
+			delayChildren: 0.2,
+		},
+	},
+	distractionFreeHidden: {
+		opacity: 0,
+		marginTop: -60,
+	},
+	distractionFreeDisabled: {
+		opacity: 0,
+		marginTop: 0,
+		transition: {
+			...commonTransition,
+			delay: 0.8,
+			delayChildren: 0.8,
+		},
+	},
+};
+
 function InterfaceSkeleton(
 	{
 		isDistractionFree,
@@ -41,31 +79,33 @@ function InterfaceSkeleton(
 		editorNotices,
 		sidebar,
 		secondarySidebar,
-		notices,
 		content,
-		drawer,
 		actions,
 		labels,
 		className,
-		shortcuts,
 	},
 	ref
 ) {
-	const navigateRegionsProps = useNavigateRegions( shortcuts );
-
+	const [ secondarySidebarResizeListener, secondarySidebarSize ] =
+		useResizeObserver();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const disableMotion = useReducedMotion();
+	const defaultTransition = {
+		type: 'tween',
+		duration: disableMotion ? 0 : ANIMATION_DURATION,
+		ease: [ 0.6, 0, 0.4, 1 ],
+	};
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
-		/* translators: accessibility text for the nav bar landmark region. */
-		drawer: __( 'Drawer' ),
 		/* translators: accessibility text for the top bar landmark region. */
-		header: __( 'Header' ),
+		header: _x( 'Header', 'header landmark area' ),
 		/* translators: accessibility text for the content landmark region. */
 		body: __( 'Content' ),
 		/* translators: accessibility text for the secondary sidebar landmark region. */
 		secondarySidebar: __( 'Block Library' ),
 		/* translators: accessibility text for the settings landmark region. */
-		sidebar: __( 'Settings' ),
+		sidebar: _x( 'Settings', 'settings landmark area' ),
 		/* translators: accessibility text for the publish landmark region. */
 		actions: __( 'Publish' ),
 		/* translators: accessibility text for the footer landmark region. */
@@ -74,74 +114,91 @@ function InterfaceSkeleton(
 
 	const mergedLabels = { ...defaultLabels, ...labels };
 
-	const headerVariants = {
-		hidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },
-		hover: {
-			opacity: 1,
-			transition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },
-		},
-	};
-
 	return (
 		<div
-			{ ...navigateRegionsProps }
-			ref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }
-			className={ classnames(
+			ref={ ref }
+			className={ clsx(
 				className,
 				'interface-interface-skeleton',
-				navigateRegionsProps.className,
 				!! footer && 'has-footer'
 			) }
 		>
-			{ !! drawer && (
-				<NavigableRegion
-					className="interface-interface-skeleton__drawer"
-					ariaLabel={ mergedLabels.drawer }
-				>
-					{ drawer }
-				</NavigableRegion>
-			) }
 			<div className="interface-interface-skeleton__editor">
-				{ !! header && isDistractionFree && (
-					<NavigableRegion
-						as={ motion.div }
-						className="interface-interface-skeleton__header"
-						aria-label={ mergedLabels.header }
-						initial={ isDistractionFree ? 'hidden' : 'hover' }
-						whileHover="hover"
-						variants={ headerVariants }
-						transition={ { type: 'tween', delay: 0.8 } }
-					>
-						{ header }
-					</NavigableRegion>
-				) }
-				{ !! header && ! isDistractionFree && (
-					<NavigableRegion
-						className="interface-interface-skeleton__header"
-						ariaLabel={ mergedLabels.header }
-					>
-						{ header }
-					</NavigableRegion>
-				) }
+				<AnimatePresence initial={ false }>
+					{ !! header && (
+						<NavigableRegion
+							as={ motion.div }
+							className="interface-interface-skeleton__header"
+							aria-label={ mergedLabels.header }
+							initial={
+								isDistractionFree && ! isMobileViewport
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							whileHover={
+								isDistractionFree && ! isMobileViewport
+									? 'distractionFreeHover'
+									: 'visible'
+							}
+							animate={
+								isDistractionFree && ! isMobileViewport
+									? 'distractionFreeDisabled'
+									: 'visible'
+							}
+							exit={
+								isDistractionFree && ! isMobileViewport
+									? 'distractionFreeHidden'
+									: 'hidden'
+							}
+							variants={ headerVariants }
+							transition={ defaultTransition }
+						>
+							{ header }
+						</NavigableRegion>
+					) }
+				</AnimatePresence>
 				{ isDistractionFree && (
 					<div className="interface-interface-skeleton__header">
 						{ editorNotices }
 					</div>
 				) }
 				<div className="interface-interface-skeleton__body">
-					{ !! secondarySidebar && (
-						<NavigableRegion
-							className="interface-interface-skeleton__secondary-sidebar"
-							ariaLabel={ mergedLabels.secondarySidebar }
-						>
-							{ secondarySidebar }
-						</NavigableRegion>
-					) }
-					{ !! notices && (
-						<div className="interface-interface-skeleton__notices">
-							{ notices }
-						</div>
-					) }
+					<AnimatePresence initial={ false }>
+						{ !! secondarySidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__secondary-sidebar"
+								ariaLabel={ mergedLabels.secondarySidebar }
+								as={ motion.div }
+								initial="closed"
+								animate="open"
+								exit="closed"
+								variants={ {
+									open: { width: secondarySidebarSize.width },
+									closed: { width: 0 },
+								} }
+								transition={ defaultTransition }
+							>
+								<motion.div
+									style={ {
+										position: 'absolute',
+										width: isMobileViewport
+											? '100vw'
+											: 'fit-content',
+										height: '100%',
+										left: 0,
+									} }
+									variants={ {
+										open: { x: 0 },
+										closed: { x: '-100%' },
+									} }
+									transition={ defaultTransition }
+								>
+									{ secondarySidebarResizeListener }
+									{ secondarySidebar }
+								</motion.div>
+							</NavigableRegion>
+						) }
+					</AnimatePresence>
 					<NavigableRegion
 						className="interface-interface-skeleton__content"
 						ariaLabel={ mergedLabels.body }
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 7897dcf824cce4..fb150daceadc9e 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -5,8 +5,10 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 
 	@include break-medium() {
-		position: initial;
-		width: initial;
+		&:not(:has(.is-zoom-out)) {
+			position: initial;
+			width: initial;
+		}
 	}
 }
 
@@ -43,6 +45,7 @@ html.interface-interface-skeleton__html-container {
 @include editor-left(".interface-interface-skeleton");
 
 .interface-interface-skeleton__body {
+	position: relative;
 	flex-grow: 1;
 	display: flex;
 
@@ -72,16 +75,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
@@ -98,6 +91,12 @@ html.interface-interface-skeleton__html-container {
 	// to "bleed" through the header.
 	// See https://github.com/WordPress/gutenberg/issues/32631
 	z-index: z-index(".interface-interface-skeleton__content");
+
+	// On Safari the z-index is not respected when the element is fixed.
+	// Setting it to auto fixes the problem
+	@include break-medium() {
+		z-index: auto;
+	}
 }
 
 .interface-interface-skeleton__secondary-sidebar,
@@ -106,50 +105,45 @@ html.interface-interface-skeleton__html-container {
 	position: absolute;
 	z-index: z-index(".interface-interface-skeleton__sidebar");
 	top: 0;
-	right: 0;
-	bottom: 0;
 	left: 0;
+	bottom: 0;
 	background: $white;
 	color: $gray-900;
+	width: auto; // Keep the sidebar width flexible.
 
 	// On Mobile the header is fixed to keep HTML as scrollable.
 	@include break-medium() {
 		position: relative !important;
-		width: auto; // Keep the sidebar width flexible.
-
-		// Set this z-index only when the sidebar is opened. When it's closed, the
-		// button to open the sidebar that is shown when navigating regions needs to
-		// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
-		.is-sidebar-opened & {
-			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
-		}
 	}
 }
 
 .interface-interface-skeleton__sidebar {
-	overflow: auto;
+	border-top: $border-width solid $gray-200;
+	overflow: hidden;
 
 	@include break-medium() {
-		border-left: $border-width solid $gray-200;
+		box-shadow: -$border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__secondary-sidebar {
-	.interface-navigable-region__stacker {
-		height: 100%;
-	}
+	border-top: $border-width solid $gray-200;
+	right: 0;
 
 	@include break-medium() {
-		border-right: $border-width solid $gray-200;
+		box-shadow: $border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
-	border-bottom: $border-width solid $gray-200;
+	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 }
 
 .interface-interface-skeleton__footer {
@@ -188,19 +182,30 @@ html.interface-interface-skeleton__html-container {
 	bottom: auto;
 	left: auto;
 	right: 0;
-	width: $sidebar-width;
 	color: $gray-900;
+	background: $white;
+	width: 100vw;
+
+	@include break-medium() {
+		width: $sidebar-width;
+	}
 
 	&:focus,
 	&:focus-within {
 		top: auto;
 		bottom: 0;
-	}
-}
 
-// Footer is visible from medium so we subtract footer's height
-.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
-	@include break-medium() {
-		height: calc(100% - #{$button-size-small + $border-width});
+		.is-entity-save-view-open & {
+			top: $admin-bar-height-big;
+
+			@include break-medium() {
+				border-left: $border-width solid $gray-300;
+				top: $admin-bar-height;
+
+				.is-fullscreen-mode & {
+					top: 0;
+				}
+			}
+		}
 	}
 }
diff --git a/packages/interface/src/components/more-menu-dropdown/README.md b/packages/interface/src/components/more-menu-dropdown/README.md
deleted file mode 100644
index 712b1cb2645bb0..00000000000000
--- a/packages/interface/src/components/more-menu-dropdown/README.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# MoreMenuDropdown
-
-`MoreMenuDropdown` is a convenient component for rendering an editor 'more' menu. This is typically a menu that provides:
-
-- menu items for quick toggling editor preferences.
-- a way to open dialogs for keyboard shortcuts and editor preferences.
-- links to help.
-
-This component implements a `DropdownMenu` component from the `@wordpress/components` package.
-
-See also the `MoreMenuFeatureToggle` component in the `@wordpress/interface` package, which provides an easy way to implement a feature toggle as a child of this component. Use with the `MenuGroup`, `MenuItem`, `MenuItemsChoice` components from the `@wordpress/components` package to implement more advanced behaviors.
-
-Note that just like the `DropdownMenu` component, this component accepts a render callback, which child elements should be returned from.
-
-## Example
-
-```jsx
-function MyEditorMenu() {
-	return (
-		<MoreMenuDropdown>
-			{ () => (
-				<MenuGroup label={ __( 'Features' ) }>
-					<MoreMenuFeatureToggle
-						scope="namespace/editor-or-plugin-name"
-						feature="myFeatureName"
-						label={ __( 'My feature' ) }
-						info={ __( 'A really awesome feature' ) }
-						messageActivated={ __( 'My feature activated' )}
-						messageDeactivated={ __( 'My feature deactivated' )}
-					/>
-				</MenuGroup>
-			) }
-		</MoreMenuDropdown>
-	);
-}
-```
-
-## Props
-
-### as
-
-Provide a component that the dropdown should render as. This may be useful if you need `MoreMenuDropdown` to render a `ToolbarDropdownMenu` instead of a `DropdownMenu`. Defaults to `DropdownMenu`.
-
--   Type: `Component`
--   Required: No.
-
-### className
-
-Provide an additional class name to the dropdown component.
-
--   Type: `String`
--   Required: No
-
-### label
-
-Change the label of the button that opens the dropdown.
-
--   Default: 'Options'
--   Type: `String`
--   Required: No
-
-### popoverProps
-
-Override or extend the dropdown's popover props.
-
-See the documentation for the `DropdownMenu` and `Popover` components in the `@wordpress/components` package for more information.
-
--   Type: `Object`
--   Required: No
-
-### toggleProps
-
-Override or extend the dropdown's toggle props.
-
-See the documentation for the `DropdownMenu` and `Button` components in the `@wordpress/components` package for more information.
-
--   Type: `Object`
--   Required: No
diff --git a/packages/interface/src/components/more-menu-dropdown/index.js b/packages/interface/src/components/more-menu-dropdown/index.js
deleted file mode 100644
index cc9ab69d0e6a59..00000000000000
--- a/packages/interface/src/components/more-menu-dropdown/index.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { DropdownMenu } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { moreVertical } from '@wordpress/icons';
-
-export default function MoreMenuDropdown( {
-	as: DropdownComponent = DropdownMenu,
-	className,
-	/* translators: button label text should, if possible, be under 16 characters. */
-	label = __( 'Options' ),
-	popoverProps,
-	toggleProps,
-	children,
-} ) {
-	return (
-		<DropdownComponent
-			className={ classnames(
-				'interface-more-menu-dropdown',
-				className
-			) }
-			icon={ moreVertical }
-			label={ label }
-			popoverProps={ {
-				position: 'bottom left',
-				...popoverProps,
-				className: classnames(
-					'interface-more-menu-dropdown__content',
-					popoverProps?.className
-				),
-			} }
-			toggleProps={ {
-				tooltipPosition: 'bottom',
-				...toggleProps,
-			} }
-		>
-			{ ( onClose ) => children( onClose ) }
-		</DropdownComponent>
-	);
-}
diff --git a/packages/interface/src/components/more-menu-dropdown/style.scss b/packages/interface/src/components/more-menu-dropdown/style.scss
deleted file mode 100644
index 56852977fa05f7..00000000000000
--- a/packages/interface/src/components/more-menu-dropdown/style.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.interface-more-menu-dropdown {
-	margin-left: -4px;
-
-	// the padding and margin of the more menu is intentionally non-standard
-	.components-button {
-		width: auto;
-		padding: 0 2px;
-	}
-
-	@include break-small() {
-		margin-left: 0;
-
-		.components-button {
-			padding: 0 4px;
-		}
-	}
-}
-
-.interface-more-menu-dropdown__content .components-popover__content {
-	min-width: 280px;
-
-	// Let the menu scale to fit items.
-	@include break-mobile() {
-		max-width: $break-mobile;
-	}
-
-	.components-dropdown-menu__menu {
-		padding: 0;
-	}
-}
-
-.components-popover.interface-more-menu-dropdown__content {
-	z-index: z-index(".components-popover.interface-more-menu__content");
-}
diff --git a/packages/interface/src/components/more-menu-feature-toggle/README.md b/packages/interface/src/components/more-menu-feature-toggle/README.md
deleted file mode 100644
index 685ff49da2934e..00000000000000
--- a/packages/interface/src/components/more-menu-feature-toggle/README.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# MoreMenuFeatureToggle
-
-`MoreMenuFeatureToggle` renders a menu item that can be used as a child of the `MoreMenuDropdown` component. The component
-is connected to the interface package's store, and will toggle the value of a 'feature' between true and false.
-
-This component implements a `MenuItem` component from the `@wordpress/components` package.
-
-## Props
-
-### scope
-
-The 'scope' of the feature. This is usually a namespaced string that represents the name of the editor (e.g. 'core/edit-post'), and often matches the name of the store for the editor.
-
--   Type: `String`
--   Required: Yes
-
-### feature
-
-The name of the feature to toggle (e.g. 'fixedToolbar').
-
--   Type: `String`
--   Required: Yes
-
-### label
-
-A human readable label for the feature.
-
--   Type: `String`
--   Required: Yes
-
-### info
-
-A human readable description of what this toggle does.
-
--   Type: `Object`
--   Required: No
-
-### messageActivated
-
-A message read by a screen reader when the feature is activated. (e.g. 'Fixed toolbar activated')
-
--   Type: `String`
--   Required: No
-
-### messageDeactivated
-
-A message read by a screen reader when the feature is deactivated. (e.g. 'Fixed toolbar deactivated')
-
--   Type: `String`
--   Required: No
-
-### shortcut
-
-A keyboard shortcut for the feature. This is just used for display purposes and the implementation of the shortcut should be handled separately.
-
-Consider using the `displayShortcut` helper from the `@wordpress/keycodes` package for this prop.
-
--   Type: `Array`
--   Required: No
diff --git a/packages/interface/src/components/more-menu-feature-toggle/index.js b/packages/interface/src/components/more-menu-feature-toggle/index.js
deleted file mode 100644
index 7e0bfb4661bdaa..00000000000000
--- a/packages/interface/src/components/more-menu-feature-toggle/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
-import { speak } from '@wordpress/a11y';
-
-/**
- * Internal dependencies
- */
-import { store as interfaceStore } from '../../store';
-
-export default function MoreMenuFeatureToggle( {
-	scope,
-	label,
-	info,
-	messageActivated,
-	messageDeactivated,
-	shortcut,
-	feature,
-} ) {
-	const isActive = useSelect(
-		( select ) =>
-			select( interfaceStore ).isFeatureActive( scope, feature ),
-		[ feature ]
-	);
-	const { toggleFeature } = useDispatch( interfaceStore );
-	const speakMessage = () => {
-		if ( isActive ) {
-			speak( messageDeactivated || __( 'Feature deactivated' ) );
-		} else {
-			speak( messageActivated || __( 'Feature activated' ) );
-		}
-	};
-
-	return (
-		<MenuItem
-			icon={ isActive && check }
-			isSelected={ isActive }
-			onClick={ () => {
-				toggleFeature( scope, feature );
-				speakMessage();
-			} }
-			role="menuitemcheckbox"
-			info={ info }
-			shortcut={ shortcut }
-		>
-			{ label }
-		</MenuItem>
-	);
-}
diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js
index 31037ffd333546..50b98d49070d43 100644
--- a/packages/interface/src/components/navigable-region/index.js
+++ b/packages/interface/src/components/navigable-region/index.js
@@ -1,26 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-export default function NavigableRegion( {
-	children,
-	className,
-	ariaLabel,
-	as: Tag = 'div',
-	...props
-} ) {
-	return (
-		<Tag
-			className={ classnames( 'interface-navigable-region', className ) }
-			aria-label={ ariaLabel }
-			role="region"
-			tabIndex="-1"
-			{ ...props }
-		>
-			<div className="interface-navigable-region__stacker">
+const NavigableRegion = forwardRef(
+	( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {
+		return (
+			<Tag
+				ref={ ref }
+				className={ clsx( 'interface-navigable-region', className ) }
+				aria-label={ ariaLabel }
+				role="region"
+				tabIndex="-1"
+				{ ...props }
+			>
 				{ children }
-			</div>
-		</Tag>
-	);
-}
+			</Tag>
+		);
+	}
+);
+
+NavigableRegion.displayName = 'NavigableRegion';
+export default NavigableRegion;
diff --git a/packages/interface/src/components/pinned-items/README.md b/packages/interface/src/components/pinned-items/README.md
index 4d6d1cb5053189..05c27b11a2f7a5 100644
--- a/packages/interface/src/components/pinned-items/README.md
+++ b/packages/interface/src/components/pinned-items/README.md
@@ -15,7 +15,7 @@ The content to be displayed for the pinned items. Most of the time, a button wit
 
 ### scope
 
-The scope of the pinned items area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the pinned items area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
@@ -28,7 +28,7 @@ A slot that renders the pinned items.
 
 ### scope
 
-The scope of the pinned items area e.g: "core/edit-post", "core/edit-site", "myplugin/custom-screen-a",
+The scope of the pinned items area e.g: "core", "myplugin/custom-screen-a",
 
 -   Type: `String`
 -   Required: Yes
diff --git a/packages/interface/src/components/pinned-items/index.js b/packages/interface/src/components/pinned-items/index.js
index 2e7778302d9494..fb5ed3e6458b7e 100644
--- a/packages/interface/src/components/pinned-items/index.js
+++ b/packages/interface/src/components/pinned-items/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function PinnedItemsSlot( { scope, className, ...props } ) {
 			{ ( fills ) =>
 				fills?.length > 0 && (
 					<div
-						className={ classnames(
+						className={ clsx(
 							className,
 							'interface-pinned-items'
 						) }
diff --git a/packages/interface/src/components/pinned-items/style.scss b/packages/interface/src/components/pinned-items/style.scss
index 7ac9b19dfdfe01..d678e0ada8e73f 100644
--- a/packages/interface/src/components/pinned-items/style.scss
+++ b/packages/interface/src/components/pinned-items/style.scss
@@ -3,26 +3,27 @@
 
 	// We intentionally hide pinned items (plugins) on mobile, and unhide them at desktop breakpoints.
 	// Otherwise the list can wreak havoc on the layout.
-	.components-button:not(:first-child) {
+	.components-button {
 		display: none;
+		margin: 0;
 
-		@include break-small() {
+		&[aria-controls="edit-post:document"],
+		&[aria-controls="edit-post:block"],
+		&[aria-controls="edit-site:template"],
+		&[aria-controls="edit-site:block-inspector"] {
 			display: flex;
 		}
-	}
-
-	// Gap between pinned items.
-	gap: $grid-unit-05;
-
-	// Account for larger grid from parent container gap.
-	margin-right: -$grid-unit-05;
-
-	.components-button {
-		margin: 0;
 
 		svg {
 			max-width: $icon-size;
 			max-height: $icon-size;
 		}
+
+		@include break-small() {
+			display: flex;
+		}
 	}
+
+	// Gap between pinned items.
+	gap: $grid-unit-10;
 }
diff --git a/packages/interface/src/components/preferences-modal-base-option/README.md b/packages/interface/src/components/preferences-modal-base-option/README.md
deleted file mode 100644
index 03c89960b6850c..00000000000000
--- a/packages/interface/src/components/preferences-modal-base-option/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-#__unstablePreferencesModalBaseOption
-
-`__unstablePreferencesModalBaseOption` renders a toggle meant to be used with `PreferencesModal`. 
-
-This component implements a `ToggleControl` component from the `@wordpress/components` package.
-
-**It is an unstable component so is subject to breaking changes at any moment. Use at own risk.**
-
-## Example
-
-```jsx
-function MyEditorPreferencesOption() {
-	return (
-		<__unstablePreferencesModalBaseOption
-			label={ label }
-			isChecked={ isChecked }
-			onChange={ setIsChecked }
-		>
-			{ isChecked !== areCustomFieldsEnabled && (
-				<CustomFieldsConfirmation willEnable={ isChecked } />
-			) }
-		</__unstablePreferencesModalBaseOption>
-	)				
-}
-```
-
-## Props
-
-### help 
-### label 
-### isChecked 
-### onChange
-
-These props are passed directly to ToggleControl, so see [ToggleControl readme](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/toggle-control/README.md) for more info.
-
-### children
-
-Components to be rendered as content.
-
--   Type: `Element`
--   Required: No.
-
diff --git a/packages/interface/src/components/preferences-modal-base-option/index.js b/packages/interface/src/components/preferences-modal-base-option/index.js
deleted file mode 100644
index 92346630d98aa2..00000000000000
--- a/packages/interface/src/components/preferences-modal-base-option/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ToggleControl } from '@wordpress/components';
-
-function BaseOption( { help, label, isChecked, onChange, children } ) {
-	return (
-		<div className="interface-preferences-modal__option">
-			<ToggleControl
-				__nextHasNoMarginBottom
-				help={ help }
-				label={ label }
-				checked={ isChecked }
-				onChange={ onChange }
-			/>
-			{ children }
-		</div>
-	);
-}
-
-export default BaseOption;
diff --git a/packages/interface/src/components/preferences-modal-base-option/style.scss b/packages/interface/src/components/preferences-modal-base-option/style.scss
deleted file mode 100644
index 99587847193d38..00000000000000
--- a/packages/interface/src/components/preferences-modal-base-option/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.interface-preferences-modal__option {
-	& + & {
-		margin-top: $grid-unit-20;
-	}
-
-	.components-base-control__help {
-		margin-top: 0;
-		margin-left: 48px;
-	}
-}
diff --git a/packages/interface/src/components/preferences-modal-section/README.md b/packages/interface/src/components/preferences-modal-section/README.md
deleted file mode 100644
index 6e78ca05c0aa81..00000000000000
--- a/packages/interface/src/components/preferences-modal-section/README.md
+++ /dev/null
@@ -1,30 +0,0 @@
-
-`PreferencesModalSection` renders a section (as a fieldset) meant to be used with `PreferencesModal`.
-
-## Example
-
-See the `PreferencesModal` readme for usage info.
-
-
-## Props
-
-### title
-
-The title of the section
-
--   Type: `String`
--   Required: Yes.
-
-### description
-
-The description for the section.
-
--   Type: `String`
--   Required: No.
-
-### children
-
-Components to be rendered as content.
-
--   Type: `Element`
--   Required: Yes.
diff --git a/packages/interface/src/components/preferences-modal-section/index.js b/packages/interface/src/components/preferences-modal-section/index.js
deleted file mode 100644
index ea164128ea54cb..00000000000000
--- a/packages/interface/src/components/preferences-modal-section/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const Section = ( { description, title, children } ) => (
-	<fieldset className="interface-preferences-modal__section">
-		<legend className="interface-preferences-modal__section-legend">
-			<h2 className="interface-preferences-modal__section-title">
-				{ title }
-			</h2>
-			{ description && (
-				<p className="interface-preferences-modal__section-description">
-					{ description }
-				</p>
-			) }
-		</legend>
-		{ children }
-	</fieldset>
-);
-
-export default Section;
diff --git a/packages/interface/src/components/preferences-modal-section/style.scss b/packages/interface/src/components/preferences-modal-section/style.scss
deleted file mode 100644
index 1a45642a8b7af9..00000000000000
--- a/packages/interface/src/components/preferences-modal-section/style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.interface-preferences-modal__section {
-	margin: 0 0 2.5rem 0;
-
-	&:last-child {
-		margin: 0;
-	}
-}
-
-.interface-preferences-modal__section-legend {
-	margin-bottom: $grid-unit-10;
-}
-
-.interface-preferences-modal__section-title {
-	font-size: 0.9rem;
-	font-weight: 600;
-	margin-top: 0;
-}
-
-.interface-preferences-modal__section-description {
-	margin: -$grid-unit-10 0 $grid-unit-10 0;
-	font-size: $helptext-font-size;
-	font-style: normal;
-	color: $gray-700;
-}
diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js
deleted file mode 100644
index bc8f7358b834d4..00000000000000
--- a/packages/interface/src/components/preferences-modal-tabs/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-	__experimentalTruncate as Truncate,
-	FlexItem,
-	TabPanel,
-	Card,
-	CardHeader,
-	CardBody,
-} from '@wordpress/components';
-import { useMemo, useCallback, useState } from '@wordpress/element';
-import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
-import { isRTL, __ } from '@wordpress/i18n';
-
-const PREFERENCES_MENU = 'preferences-menu';
-
-export default function PreferencesModalTabs( { sections } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	// This is also used to sync the two different rendered components
-	// between small and large viewports.
-	const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
-	/**
-	 * Create helper objects from `sections` for easier data handling.
-	 * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
-	 * is used for easier access to active tab's content.
-	 */
-	const { tabs, sectionsContentMap } = useMemo( () => {
-		let mappedTabs = {
-			tabs: [],
-			sectionsContentMap: {},
-		};
-		if ( sections.length ) {
-			mappedTabs = sections.reduce(
-				( accumulator, { name, tabLabel: title, content } ) => {
-					accumulator.tabs.push( { name, title } );
-					accumulator.sectionsContentMap[ name ] = content;
-					return accumulator;
-				},
-				{ tabs: [], sectionsContentMap: {} }
-			);
-		}
-		return mappedTabs;
-	}, [ sections ] );
-
-	const getCurrentTab = useCallback(
-		( tab ) => sectionsContentMap[ tab.name ] || null,
-		[ sectionsContentMap ]
-	);
-
-	let modalContent;
-	// We render different components based on the viewport size.
-	if ( isLargeViewport ) {
-		modalContent = (
-			<TabPanel
-				className="interface-preferences__tabs"
-				tabs={ tabs }
-				initialTabName={
-					activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
-				}
-				onSelect={ setActiveMenu }
-				orientation="vertical"
-			>
-				{ getCurrentTab }
-			</TabPanel>
-		);
-	} else {
-		modalContent = (
-			<NavigatorProvider
-				initialPath="/"
-				className="interface-preferences__provider"
-			>
-				<NavigatorScreen path="/">
-					<Card isBorderless size="small">
-						<CardBody>
-							<ItemGroup>
-								{ tabs.map( ( tab ) => {
-									return (
-										<NavigatorButton
-											key={ tab.name }
-											path={ tab.name }
-											as={ Item }
-											isAction
-										>
-											<HStack justify="space-between">
-												<FlexItem>
-													<Truncate>
-														{ tab.title }
-													</Truncate>
-												</FlexItem>
-												<FlexItem>
-													<Icon
-														icon={
-															isRTL()
-																? chevronLeft
-																: chevronRight
-														}
-													/>
-												</FlexItem>
-											</HStack>
-										</NavigatorButton>
-									);
-								} ) }
-							</ItemGroup>
-						</CardBody>
-					</Card>
-				</NavigatorScreen>
-				{ sections.length &&
-					sections.map( ( section ) => {
-						return (
-							<NavigatorScreen
-								key={ `${ section.name }-menu` }
-								path={ section.name }
-							>
-								<Card isBorderless size="large">
-									<CardHeader
-										isBorderless={ false }
-										justify="left"
-										size="small"
-										gap="6"
-									>
-										<NavigatorBackButton
-											icon={
-												isRTL()
-													? chevronRight
-													: chevronLeft
-											}
-											aria-label={ __(
-												'Navigate to the previous view'
-											) }
-										/>
-										<Text size="16">
-											{ section.tabLabel }
-										</Text>
-									</CardHeader>
-									<CardBody>{ section.content }</CardBody>
-								</Card>
-							</NavigatorScreen>
-						);
-					} ) }
-			</NavigatorProvider>
-		);
-	}
-
-	return modalContent;
-}
diff --git a/packages/interface/src/components/preferences-modal-tabs/style.scss b/packages/interface/src/components/preferences-modal-tabs/style.scss
deleted file mode 100644
index d09c8b3572bd23..00000000000000
--- a/packages/interface/src/components/preferences-modal-tabs/style.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$vertical-tabs-width: 160px;
-
-.interface-preferences__tabs {
-	.components-tab-panel__tabs {
-		position: absolute;
-		top: $header-height + $grid-unit-30;
-		// Aligns button text instead of button box.
-		left: $grid-unit-20;
-		width: $vertical-tabs-width;
-		.components-tab-panel__tabs-item {
-			border-radius: $radius-block-ui;
-			font-weight: 400;
-			&.is-active {
-				background: $gray-100;
-				box-shadow: none;
-				font-weight: 500;
-			}
-			&:focus:not(:disabled) {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
-		}
-	}
-	.components-tab-panel__tab-content {
-		padding-left: $grid-unit-30;
-		margin-left: $vertical-tabs-width;
-	}
-}
-
-@media (max-width: #{ ($break-medium - 1) }) {
-	// Keep the navigator component from overflowing the modal content area
-	// to ensure that sticky position elements stick where intended.
-	.interface-preferences__provider {
-		height: 100%;
-	}
-}
diff --git a/packages/interface/src/components/preferences-modal/README.md b/packages/interface/src/components/preferences-modal/README.md
deleted file mode 100644
index 96ecdf03dcc136..00000000000000
--- a/packages/interface/src/components/preferences-modal/README.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# PreferencesModal
-
-`PreferencesModal` renders a modal with editor preferences. It can take a `PreferencesModalTabs` component, which accepts multiple tabs, and/or other child components. On small viewports, the modal is fullscreen.
-
-This component implements a `Modal` component from the `@wordpress/components` package.
-
-Sections passed to this component should use `PreferencesModalSection` component from the `@wordpress/interface` package.
-
-
-## Example
-
-```jsx
-function MyEditorPreferencesModal() {
-	const { closeModal } = useDispatch( editPostStore );
-	const sections = [
-		{
-			name: 'section 1',
-			tabLabel: __( 'Section 1' ),
-			content: (
-						<PreferencesModalSection
-							title={ __( 'Publishing' ) }
-							description={ __(
-								'Change options related to publishing.'
-							) }
-						>
-							<EnablePublishSidebarOption
-								help={ __(
-									'Review settings, such as visibility and tags.'
-								) }
-								label={ __(
-									'Include pre-publish checklist'
-								) }
-							/>
-						</PreferencesModalSection>
-					) 
-
-		}
-		{
-			name: 'section 2',
-			tabLabel: __( 'Section 2' ),
-			content: (
-						<PreferencesModalSection
-							title={ __( 'Additional' ) }
-							description={ __(
-								'Add extra areas to the editor.'
-							) }
-						>
-							// Section content here
-						</PreferencesModalSection>
-					) 
-
-		}
-	]
-	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		<PreferencesModal />
-	);
-}
-```
-
-## Props
-
-### closeModal
-
-A function to call when closing the modal.
-
--   Type: `Function`
--   Required: Yes.
diff --git a/packages/interface/src/components/preferences-modal/index.js b/packages/interface/src/components/preferences-modal/index.js
deleted file mode 100644
index b91be8b21204a3..00000000000000
--- a/packages/interface/src/components/preferences-modal/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-export default function PreferencesModal( { closeModal, children } ) {
-	return (
-		<Modal
-			className="interface-preferences-modal"
-			title={ __( 'Preferences' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ closeModal }
-		>
-			{ children }
-		</Modal>
-	);
-}
diff --git a/packages/interface/src/components/preferences-modal/style.scss b/packages/interface/src/components/preferences-modal/style.scss
deleted file mode 100644
index 4e70f9f817e644..00000000000000
--- a/packages/interface/src/components/preferences-modal/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.interface-preferences-modal {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
-	}
-
-	// Clears spacing to flush fit the navigator component to the modal edges.
-	@media (max-width: #{ ($break-medium - 1) }) {
-		.components-modal__content {
-			padding: 0;
-		}
-	}
-}
diff --git a/packages/interface/src/store/actions.js b/packages/interface/src/store/actions.js
index bc51d4fca72202..7bd4493165a8b4 100644
--- a/packages/interface/src/store/actions.js
+++ b/packages/interface/src/store/actions.js
@@ -4,6 +4,14 @@
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeComplementaryAreaScope,
+	normalizeComplementaryAreaName,
+} from './deprecated';
+
 /**
  * Set a default complementary area.
  *
@@ -12,11 +20,15 @@ import { store as preferencesStore } from '@wordpress/preferences';
  *
  * @return {Object} Action object.
  */
-export const setDefaultComplementaryArea = ( scope, area ) => ( {
-	type: 'SET_DEFAULT_COMPLEMENTARY_AREA',
-	scope,
-	area,
-} );
+export const setDefaultComplementaryArea = ( scope, area ) => {
+	scope = normalizeComplementaryAreaScope( scope );
+	area = normalizeComplementaryAreaName( scope, area );
+	return {
+		type: 'SET_DEFAULT_COMPLEMENTARY_AREA',
+		scope,
+		area,
+	};
+};
 
 /**
  * Enable the complementary area.
@@ -31,6 +43,8 @@ export const enableComplementaryArea =
 		if ( ! area ) {
 			return;
 		}
+		scope = normalizeComplementaryAreaScope( scope );
+		area = normalizeComplementaryAreaName( scope, area );
 
 		const isComplementaryAreaVisible = registry
 			.select( preferencesStore )
@@ -57,6 +71,7 @@ export const enableComplementaryArea =
 export const disableComplementaryArea =
 	( scope ) =>
 	( { registry } ) => {
+		scope = normalizeComplementaryAreaScope( scope );
 		const isComplementaryAreaVisible = registry
 			.select( preferencesStore )
 			.get( scope, 'isComplementaryAreaVisible' );
@@ -84,6 +99,8 @@ export const pinItem =
 			return;
 		}
 
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = registry
 			.select( preferencesStore )
 			.get( scope, 'pinnedItems' );
@@ -113,6 +130,8 @@ export const unpinItem =
 			return;
 		}
 
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = registry
 			.select( preferencesStore )
 			.get( scope, 'pinnedItems' );
@@ -181,3 +200,28 @@ export function setFeatureDefaults( scope, defaults ) {
 		registry.dispatch( preferencesStore ).setDefaults( scope, defaults );
 	};
 }
+
+/**
+ * Returns an action object used in signalling that the user opened a modal.
+ *
+ * @param {string} name A string that uniquely identifies the modal.
+ *
+ * @return {Object} Action object.
+ */
+export function openModal( name ) {
+	return {
+		type: 'OPEN_MODAL',
+		name,
+	};
+}
+
+/**
+ * Returns an action object signalling that the user closed a modal.
+ *
+ * @return {Object} Action object.
+ */
+export function closeModal() {
+	return {
+		type: 'CLOSE_MODAL',
+	};
+}
diff --git a/packages/interface/src/store/deprecated.js b/packages/interface/src/store/deprecated.js
new file mode 100644
index 00000000000000..d86fd00c9d2bf3
--- /dev/null
+++ b/packages/interface/src/store/deprecated.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function normalizeComplementaryAreaScope( scope ) {
+	if ( [ 'core/edit-post', 'core/edit-site' ].includes( scope ) ) {
+		deprecated( `${ scope } interface scope`, {
+			alternative: 'core interface scope',
+			hint: 'core/edit-post and core/edit-site are merging.',
+			version: '6.6',
+		} );
+		return 'core';
+	}
+
+	return scope;
+}
+
+export function normalizeComplementaryAreaName( scope, name ) {
+	if ( scope === 'core' && name === 'edit-site/template' ) {
+		deprecated( `edit-site/template sidebar`, {
+			alternative: 'edit-post/document',
+			version: '6.6',
+		} );
+		return 'edit-post/document';
+	}
+
+	if ( scope === 'core' && name === 'edit-site/block-inspector' ) {
+		deprecated( `edit-site/block-inspector sidebar`, {
+			alternative: 'edit-post/block',
+			version: '6.6',
+		} );
+		return 'edit-post/block';
+	}
+
+	return name;
+}
diff --git a/packages/interface/src/store/reducer.js b/packages/interface/src/store/reducer.js
index 433f71d15bcc57..8317e53cec95bf 100644
--- a/packages/interface/src/store/reducer.js
+++ b/packages/interface/src/store/reducer.js
@@ -30,6 +30,26 @@ export function complementaryAreas( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer for storing the name of the open modal, or null if no modal is open.
+ *
+ * @param {Object} state  Previous state.
+ * @param {Object} action Action object containing the `name` of the modal
+ *
+ * @return {Object} Updated state
+ */
+export function activeModal( state = null, action ) {
+	switch ( action.type ) {
+		case 'OPEN_MODAL':
+			return action.name;
+		case 'CLOSE_MODAL':
+			return null;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	complementaryAreas,
+	activeModal,
 } );
diff --git a/packages/interface/src/store/selectors.js b/packages/interface/src/store/selectors.js
index 13b5915e17aac5..516d330a8ba8fe 100644
--- a/packages/interface/src/store/selectors.js
+++ b/packages/interface/src/store/selectors.js
@@ -5,6 +5,14 @@ import { createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeComplementaryAreaScope,
+	normalizeComplementaryAreaName,
+} from './deprecated';
+
 /**
  * Returns the complementary area that is active in a given scope.
  *
@@ -15,6 +23,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 export const getActiveComplementaryArea = createRegistrySelector(
 	( select ) => ( state, scope ) => {
+		scope = normalizeComplementaryAreaScope( scope );
 		const isComplementaryAreaVisible = select( preferencesStore ).get(
 			scope,
 			'isComplementaryAreaVisible'
@@ -28,7 +37,7 @@ export const getActiveComplementaryArea = createRegistrySelector(
 		}
 
 		// Return `null` to indicate the user hid the complementary area.
-		if ( ! isComplementaryAreaVisible ) {
+		if ( isComplementaryAreaVisible === false ) {
 			return null;
 		}
 
@@ -36,6 +45,19 @@ export const getActiveComplementaryArea = createRegistrySelector(
 	}
 );
 
+export const isComplementaryAreaLoading = createRegistrySelector(
+	( select ) => ( state, scope ) => {
+		scope = normalizeComplementaryAreaScope( scope );
+		const isVisible = select( preferencesStore ).get(
+			scope,
+			'isComplementaryAreaVisible'
+		);
+		const identifier = state?.complementaryAreas?.[ scope ];
+
+		return isVisible && identifier === undefined;
+	}
+);
+
 /**
  * Returns a boolean indicating if an item is pinned or not.
  *
@@ -47,6 +69,8 @@ export const getActiveComplementaryArea = createRegistrySelector(
  */
 export const isItemPinned = createRegistrySelector(
 	( select ) => ( state, scope, item ) => {
+		scope = normalizeComplementaryAreaScope( scope );
+		item = normalizeComplementaryAreaName( scope, item );
 		const pinnedItems = select( preferencesStore ).get(
 			scope,
 			'pinnedItems'
@@ -78,3 +102,15 @@ export const isFeatureActive = createRegistrySelector(
 		return !! select( preferencesStore ).get( scope, featureName );
 	}
 );
+
+/**
+ * Returns true if a modal is active, or false otherwise.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} modalName A string that uniquely identifies the modal.
+ *
+ * @return {boolean} Whether the modal is active.
+ */
+export function isModalActive( state, modalName ) {
+	return state.activeModal === modalName;
+}
diff --git a/packages/interface/src/store/test/reducer.js b/packages/interface/src/store/test/reducer.js
new file mode 100644
index 00000000000000..eb9424637bca0f
--- /dev/null
+++ b/packages/interface/src/store/test/reducer.js
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { activeModal } from '../reducer';
+
+describe( 'state', () => {
+	describe( 'activeModal', () => {
+		it( 'should default to null', () => {
+			const state = activeModal( undefined, {} );
+			expect( state ).toBeNull();
+		} );
+
+		it( 'should set the activeModal to the provided name', () => {
+			const state = activeModal( null, {
+				type: 'OPEN_MODAL',
+				name: 'test-modal',
+			} );
+
+			expect( state ).toEqual( 'test-modal' );
+		} );
+
+		it( 'should set the activeModal to null', () => {
+			const state = activeModal( 'test-modal', {
+				type: 'CLOSE_MODAL',
+			} );
+
+			expect( state ).toBeNull();
+		} );
+	} );
+} );
diff --git a/packages/interface/src/store/test/selectors.js b/packages/interface/src/store/test/selectors.js
new file mode 100644
index 00000000000000..a3bea882043d29
--- /dev/null
+++ b/packages/interface/src/store/test/selectors.js
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import { isModalActive } from '../selectors';
+
+describe( 'selectors', () => {
+	describe( 'isModalActive', () => {
+		it( 'returns true if the provided name matches the value in the preferences activeModal property', () => {
+			const state = {
+				activeModal: 'test-modal',
+			};
+
+			expect( isModalActive( state, 'test-modal' ) ).toBe( true );
+		} );
+
+		it( 'returns false if the provided name does not match the preferences activeModal property', () => {
+			const state = {
+				activeModal: 'something-else',
+			};
+
+			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
+		} );
+
+		it( 'returns false if the preferences activeModal property is null', () => {
+			const state = {
+				activeModal: null,
+			};
+
+			expect( isModalActive( state, 'test-modal' ) ).toBe( false );
+		} );
+	} );
+} );
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
index be111640a0a796..d7f1e35e6e6616 100644
--- a/packages/interface/src/style.scss
+++ b/packages/interface/src/style.scss
@@ -2,9 +2,4 @@
 @import "./components/complementary-area/style.scss";
 @import "./components/fullscreen-mode/style.scss";
 @import "./components/interface-skeleton/style.scss";
-@import "./components/more-menu-dropdown/style.scss";
 @import "./components/pinned-items/style.scss";
-@import "./components/preferences-modal/style.scss";
-@import "./components/preferences-modal-tabs/style.scss";
-@import "./components/preferences-modal-section/style.scss";
-@import "./components/preferences-modal-base-option/style.scss";
diff --git a/packages/is-shallow-equal/.npmrc b/packages/is-shallow-equal/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/is-shallow-equal/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index d21a6e051ce0c7..6308dd484c728a 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -57,19 +161,19 @@
 
 ## 3.0.0 (2020-12-17)
 
-### Breaking Change
+### Breaking Changes
 
 -   Re-write using ES Modules causing CJS default import to change from `require('@wordpress/is-shallow-equal)` to `require('@wordpress/is-shallow-equal).default`. ([#26833](https://github.com/WordPress/gutenberg/pull/26833))
 
 ## 2.0.0 (2020-04-15)
 
-### Breaking Change
+### Breaking Changes
 
 -   Restructure package moving source files into `lib` directory. Direct imports of
     `@wordpress/is-shallow-equal/arrays` and `@wordpress/is-shallow-equal/objects` were never
     officially supported and have been removed. ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
@@ -81,7 +185,7 @@
 
 ## 1.2.0 (2019-03-06)
 
-### New Feature
+### New Features
 
 -   Type-specific variants are now exposed from the module root. In a WordPress context, this has the effect of making them available as `wp.isShallowEqual.isShallowEqualObjects` and `wp.isShallowEqual.isShallowEqualArrays`.
 
@@ -91,7 +195,7 @@
 
 ## 1.1.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -101,18 +205,18 @@
 
 ## 1.0.2 (2018-05-08)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix: Use implicit `index.js` for main entry ([#124](https://github.com/WordPress/packages/pull/124))
 
 ## 1.0.1 (2018-05-01)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix: Passing a null-ish value as one of the arguments now correctly falls back to a strict equality comparison. ([#116](https://github.com/WordPress/packages/pull/116))
 
 ## 1.0.0 (2018-04-25)
 
-### New Feature
+### New Features
 
 -   Initial release
diff --git a/packages/is-shallow-equal/README.md b/packages/is-shallow-equal/README.md
index 5827408baf1360..2908803a7804b2 100644
--- a/packages/is-shallow-equal/README.md
+++ b/packages/is-shallow-equal/README.md
@@ -29,18 +29,18 @@ import { isShallowEqualArrays } from '@wordpress/is-shallow-equal';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 ```
 
-Shallow comparison differs from deep comparison by the fact that it compares members from each as being strictly equal to the other, meaning that arrays and objects will be compared by their _references_, not by their values (see also [_Object Equality in JavaScript_.](http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html)) In situations where nested objects must be compared by value, consider using [Lodash's `isEqual`](https://lodash.com/docs/4.17.11#isEqual) instead.
+Shallow comparison differs from deep comparison by the fact that it compares members from each as being strictly equal to the other, meaning that arrays and objects will be compared by their _references_, not by their values (see also [_Object Equality in JavaScript_.](http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html)) In situations where nested objects must be compared by value, consider using [`fast-deep-equal`](https://github.com/epoberezkin/fast-deep-equal) instead.
 
 ```js
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { isEqual } from 'lodash'; // deep comparison
+import fastDeepEqual from 'fast-deep-equal/es6'; // deep comparison
 
 let object = { a: 1 };
 
 isShallowEqual( [ { a: 1 } ], [ { a: 1 } ] );
 // ⇒ false
 
-isEqual( [ { a: 1 } ], [ { a: 1 } ] );
+fastDeepEqual( [ { a: 1 } ], [ { a: 1 } ] );
 // ⇒ true
 
 isShallowEqual( [ object ], [ object ] );
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 202eabefebe3dd..bc987f67aca88e 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -33,10 +34,11 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/is-shallow-equal/src/index.js b/packages/is-shallow-equal/src/index.js
index fddd62a022a3de..be0174421baef0 100644
--- a/packages/is-shallow-equal/src/index.js
+++ b/packages/is-shallow-equal/src/index.js
@@ -13,10 +13,10 @@ export { default as isShallowEqualArrays } from './arrays';
 
 /**
  * Returns true if the two arrays or objects are shallow equal, or false
- * otherwise.
+ * otherwise. Also handles primitive values, just in case.
  *
- * @param {any[]|ComparableObject} a First object or array to compare.
- * @param {any[]|ComparableObject} b Second object or array to compare.
+ * @param {unknown} a First object or array to compare.
+ * @param {unknown} b Second object or array to compare.
  *
  * @return {boolean} Whether the two values are shallow equal.
  */
diff --git a/packages/is-shallow-equal/tsconfig.json b/packages/is-shallow-equal/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/is-shallow-equal/tsconfig.json
+++ b/packages/is-shallow-equal/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/jest-console/.npmrc b/packages/jest-console/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/jest-console/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 6d29563aae8273..67f41af5c7e3f2 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 8.13.0 (2024-11-27)
+
+## 8.12.0 (2024-11-16)
+
+## 8.11.0 (2024-10-30)
+
+## 8.10.0 (2024-10-16)
+
+## 8.9.0 (2024-10-03)
+
+## 8.8.0 (2024-09-19)
+
+## 8.7.0 (2024-09-05)
+
+## 8.6.0 (2024-08-21)
+
+## 8.5.0 (2024-08-07)
+
+## 8.4.0 (2024-07-24)
+
+## 8.3.0 (2024-07-10)
+
+## 8.2.0 (2024-06-26)
+
+## 8.1.0 (2024-06-15)
+
+## 8.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 7.29.0 (2024-05-16)
+
+## 7.28.0 (2024-05-02)
+
+## 7.27.0 (2024-04-19)
+
+## 7.26.0 (2024-04-03)
+
+## 7.25.0 (2024-03-21)
+
+## 7.24.0 (2024-03-06)
+
+## 7.23.0 (2024-02-21)
+
+## 7.22.0 (2024-02-09)
+
+## 7.21.0 (2024-01-24)
+
+## 7.20.0 (2024-01-10)
+
+## 7.19.0 (2023-12-13)
+
+## 7.18.0 (2023-11-29)
+
+## 7.17.0 (2023-11-16)
+
+## 7.16.0 (2023-11-02)
+
+## 7.15.0 (2023-10-18)
+
+## 7.14.0 (2023-10-05)
+
+## 7.13.0 (2023-09-20)
+
+### Enhancements
+
+-   Improved error messages and codes printed on the console ([#53743](https://github.com/WordPress/gutenberg/pull/53743)).
+
+## 7.12.0 (2023-08-31)
+
+## 7.11.0 (2023-08-16)
+
+## 7.10.0 (2023-08-10)
+
+## 7.9.0 (2023-07-20)
+
+## 7.8.0 (2023-07-05)
+
+## 7.7.0 (2023-06-23)
+
+## 7.6.0 (2023-06-07)
+
+## 7.5.0 (2023-05-24)
+
+## 7.4.0 (2023-05-10)
+
+## 7.3.0 (2023-04-26)
+
+## 7.2.0 (2023-04-12)
+
+## 7.1.0 (2023-03-29)
+
+## 7.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 6.11.0 (2023-03-01)
+
+## 6.10.0 (2023-02-15)
+
+## 6.9.0 (2023-02-01)
+
+## 6.8.0 (2023-01-11)
+
+## 6.7.0 (2023-01-02)
+
+## 6.6.0 (2022-12-14)
+
 ## 6.5.0 (2022-11-16)
 
 ## 6.4.0 (2022-11-02)
@@ -14,7 +126,7 @@
 
 ## 6.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -64,12 +176,12 @@
 
 ## 1.0.7 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
 
 ## 1.0.6 (2018-02-28)
 
-### Polish
+### Internal
 
 -   Removed `package-lock.json` file, lockfiles for apps, not packages ([#88](https://github.com/WordPress/packages/pull/88))
diff --git a/packages/jest-console/README.md b/packages/jest-console/README.md
index 4e57acef7deb6c..f733ad2be352eb 100644
--- a/packages/jest-console/README.md
+++ b/packages/jest-console/README.md
@@ -18,7 +18,7 @@ Install the module:
 npm install @wordpress/jest-console --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Setup
 
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 2069fbd5992067..638ce7fa523238 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "6.5.0",
+	"version": "8.13.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -32,11 +33,11 @@
 	"module": "build-module/index.js",
 	"types": "types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"jest-matcher-utils": "^27.4.2"
+		"@babel/runtime": "7.25.7",
+		"jest-matcher-utils": "^29.6.2"
 	},
 	"peerDependencies": {
-		"jest": ">=27"
+		"jest": ">=29"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/jest-console/src/matchers.js b/packages/jest-console/src/matchers.js
index 078ef47fb1da55..9793164f532b32 100644
--- a/packages/jest-console/src/matchers.js
+++ b/packages/jest-console/src/matchers.js
@@ -8,58 +8,66 @@ import { matcherHint, printExpected, printReceived } from 'jest-matcher-utils';
  */
 import supportedMatchers from './supported-matchers';
 
+const createErrorMessage = ( spyInfo ) => {
+	const { spy, pass, calls, matcherName, methodName, expected } = spyInfo;
+	const hint = pass ? `.not${ matcherName }` : matcherName;
+	const message = pass
+		? `Expected mock function not to be called but it was called with:\n${ calls.map(
+				printReceived
+		  ) }`
+		: `Expected mock function to be called${
+				expected ? ` with:\n${ printExpected( expected ) }\n` : '.'
+		  }\nbut it was called with:\n${ calls.map( printReceived ) }`;
+
+	return () =>
+		`${ matcherHint( hint, spy.getMockName() ) }` +
+		'\n\n' +
+		message +
+		'\n\n' +
+		`console.${ methodName }() should not be used unless explicitly expected\n` +
+		'See https://www.npmjs.com/package/@wordpress/jest-console for details.';
+};
+
+const createSpyInfo = ( spy, matcherName, methodName, expected ) => {
+	const calls = spy.mock.calls;
+
+	const pass = expected
+		? JSON.stringify( calls ).includes( JSON.stringify( expected ) )
+		: calls.length > 0;
+
+	const message = createErrorMessage( {
+		spy,
+		pass,
+		calls,
+		matcherName,
+		methodName,
+		expected,
+	} );
+
+	return {
+		pass,
+		message,
+	};
+};
+
 const createToHaveBeenCalledMatcher =
 	( matcherName, methodName ) => ( received ) => {
 		const spy = received[ methodName ];
-		const calls = spy.mock.calls;
-		const pass = calls.length > 0;
-		const message = pass
-			? () =>
-					matcherHint( `.not${ matcherName }`, spy.getMockName() ) +
-					'\n\n' +
-					'Expected mock function not to be called but it was called with:\n' +
-					calls.map( printReceived )
-			: () =>
-					matcherHint( matcherName, spy.getMockName() ) +
-					'\n\n' +
-					'Expected mock function to be called.';
+		const spyInfo = createSpyInfo( spy, matcherName, methodName );
 
 		spy.assertionsNumber += 1;
 
-		return {
-			message,
-			pass,
-		};
+		return spyInfo;
 	};
 
 const createToHaveBeenCalledWith = ( matcherName, methodName ) =>
 	function ( received, ...expected ) {
 		const spy = received[ methodName ];
-		const calls = spy.mock.calls;
-		const pass = calls.some( ( objects ) =>
-			this.equals( objects, expected )
-		);
-		const message = pass
-			? () =>
-					matcherHint( `.not${ matcherName }`, spy.getMockName() ) +
-					'\n\n' +
-					'Expected mock function not to be called with:\n' +
-					printExpected( expected )
-			: () =>
-					matcherHint( matcherName, spy.getMockName() ) +
-					'\n\n' +
-					'Expected mock function to be called with:\n' +
-					printExpected( expected ) +
-					'\n' +
-					'but it was called with:\n' +
-					calls.map( printReceived );
+		const spyInfo = createSpyInfo( spy, matcherName, methodName, expected );
 
 		spy.assertionsNumber += 1;
 
-		return {
-			message,
-			pass,
-		};
+		return spyInfo;
 	};
 
 expect.extend(
diff --git a/packages/jest-preset-default/.npmrc b/packages/jest-preset-default/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/jest-preset-default/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index 67dedc8940d756..d98552ff45f716 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,115 @@
 
 ## Unreleased
 
+## 12.13.0 (2024-11-27)
+
+## 12.12.0 (2024-11-16)
+
+## 12.11.0 (2024-10-30)
+
+## 12.10.0 (2024-10-16)
+
+## 12.9.0 (2024-10-03)
+
+## 12.8.0 (2024-09-19)
+
+## 12.7.0 (2024-09-05)
+
+## 12.6.0 (2024-08-21)
+
+## 12.5.0 (2024-08-07)
+
+## 12.4.0 (2024-07-24)
+
+## 12.3.0 (2024-07-10)
+
+## 12.2.0 (2024-06-26)
+
+## 12.1.0 (2024-06-15)
+
+## 12.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 11.29.0 (2024-05-16)
+
+## 11.28.0 (2024-05-02)
+
+## 11.27.0 (2024-04-19)
+
+## 11.26.0 (2024-04-03)
+
+## 11.25.0 (2024-03-21)
+
+## 11.24.0 (2024-03-06)
+
+## 11.23.0 (2024-02-21)
+
+## 11.22.0 (2024-02-09)
+
+## 11.21.0 (2024-01-24)
+
+## 11.20.0 (2024-01-10)
+
+## 11.19.0 (2023-12-13)
+
+## 11.18.0 (2023-11-29)
+
+## 11.17.0 (2023-11-16)
+
+## 11.16.0 (2023-11-02)
+
+## 11.15.0 (2023-10-18)
+
+## 11.14.0 (2023-10-05)
+
+## 11.13.0 (2023-09-20)
+
+## 11.12.0 (2023-08-31)
+
+## 11.11.0 (2023-08-16)
+
+## 11.10.0 (2023-08-10)
+
+## 11.9.0 (2023-07-20)
+
+## 11.8.0 (2023-07-05)
+
+## 11.7.0 (2023-06-23)
+
+## 11.6.0 (2023-06-07)
+
+## 11.5.0 (2023-05-24)
+
+## 11.4.0 (2023-05-10)
+
+## 11.3.0 (2023-04-26)
+
+## 11.2.0 (2023-04-12)
+
+## 11.1.0 (2023-03-29)
+
+## 11.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 10.9.0 (2023-03-01)
+
+## 10.8.0 (2023-02-15)
+
+## 10.7.0 (2023-02-01)
+
+## 10.6.0 (2023-01-11)
+
+## 10.5.0 (2023-01-02)
+
+## 10.4.0 (2022-12-14)
+
 ## 10.3.0 (2022-11-16)
 
 ## 10.2.0 (2022-11-02)
@@ -10,7 +119,7 @@
 
 ## 10.0.0 (2022-10-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   Testing: Remove enzyme completely ([#44494](https://github.com/WordPress/gutenberg/pull/44494)). See the [example in the README](./README.md#using-enzyme) for instructions on how to continue using `enzyme` in your project.
 
@@ -18,23 +127,23 @@
 
 ## 9.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
 ## 8.5.2 (2022-08-17)
 
-### Bug Fix
+### Bug Fixes
 
 -   Jest Preset: Improve `is-plain-obj` transformation ignore ([#43271](https://github.com/WordPress/gutenberg/pull/43271)).
 
 ## 8.5.1 (2022-08-12)
 
-### Bug Fix
+### Bug Fixes
 
 -   Jest Preset: Ignore `is-plain-obj` transformation ([#43179](https://github.com/WordPress/gutenberg/pull/43179)).
 
@@ -51,13 +160,13 @@
 
 ## 7.1.2 (2021-10-22)
 
-### Bug Fix
+### Bug Fixes
 
 -   Provide more complete mocks of browser timing functions. ([#35368](https://github.com/WordPress/gutenberg/pull/35368))
 
 ## 7.1.1 (2021-09-09)
 
-### Bug Fix
+### Bug Fixes
 
 -   Restore the default setting for the `verbose` option. In effect, each test won't get reported during the run ([#34327](https://github.com/WordPress/gutenberg/pull/34327)).
 
@@ -136,13 +245,13 @@
 
 ## 3.0.0 (2018-11-03)
 
-### Breaking Change
+### Breaking Changes
 
 -   Remove coverage support.
 
 ## 2.0.0 (2018-07-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Updated code to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -152,13 +261,13 @@
 
 ## 1.0.6 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
 
 ## 1.0.5 (2018-03-22)
 
-### Polish
+### Internal
 
 -   Docs: Wrap filename in backticks ([#89](https://github.com/WordPress/packages/pull/89))
 -   Add `jest-preset` keyword to `jest-preset-default` package ([#92](https://github.com/WordPress/packages/pull/92))
diff --git a/packages/jest-preset-default/README.md b/packages/jest-preset-default/README.md
index 97c436bce9fc78..8720474a187211 100644
--- a/packages/jest-preset-default/README.md
+++ b/packages/jest-preset-default/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/jest-preset-default --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Setup
 
@@ -30,11 +30,10 @@ npm install @wordpress/jest-preset-default --save-dev
 -   `modulePaths` - the root dir of the project is used as a location to search when resolving modules.
 -   `setupFiles` - runs code before each test which sets up global variables required in the testing environment.
 -   `setupFilesAfterEnv` - runs code which adds improved support for `Console` object and `React` components to the testing framework before each test.
--   `snapshotSerializers` - makes it possible to use snapshot tests on `Enzyme` wrappers.
--   `testMatch`- includes `/test/` subfolder in addition to the glob patterns Jest uses to detect test files. It detects only test files containing `.js`, `.jsx`, `.ts` and `.tsx` suffix. It doesn't match files with `.spec.js` suffix.
--   `timers` - use of [fake timers](https://jestjs.io/docs/en/timer-mocks.html) for functions such as `setTimeout` is enabled.
+-   `testEnvironment` - enabled the `jsdom` environment for all tests by default.
+-   `testMatch` - searches for tests in `/test/` and `/__tests__/` subfolders, and also matches all files with a `.test.*` suffix. It detects test files with a `.js`, `.jsx`, `.ts` or `.tsx` suffix. Compared to default Jest configuration, it doesn't match files with the `.spec.*` suffix.
+-   `testPathIgnorePatterns` - excludes `node_modules` and `vendor` directories from searching for test files.
 -   `transform` - keeps the default [babel-jest](https://github.com/facebook/jest/tree/HEAD/packages/babel-jest) transformer.
--   `verbose` - each individual test won't be reported during the run.
 
 #### Using enzyme
 
@@ -90,7 +89,7 @@ Finally, you should add `enzyme-to-json/serializer` to the array of [`snapshotSe
 
 ```javascript
 {
-	snapshotSerializers: [ 'enzyme-to-json/serializer' ]
+	snapshotSerializers: [ 'enzyme-to-json/serializer' ];
 }
 ```
 
diff --git a/packages/jest-preset-default/jest-preset.js b/packages/jest-preset-default/jest-preset.js
index c6a491e9ed1d98..67f94c0c8e3091 100644
--- a/packages/jest-preset-default/jest-preset.js
+++ b/packages/jest-preset-default/jest-preset.js
@@ -24,7 +24,6 @@ module.exports = {
 		'**/?(*.)test.[jt]s?(x)',
 	],
 	testPathIgnorePatterns: [ '/node_modules/', '<rootDir>/vendor/' ],
-	timers: 'fake',
 	transform: {
 		'\\.[jt]sx?$': require.resolve( 'babel-jest' ),
 	},
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index d6b8e528fe00b2..659c0b78221519 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "10.3.0",
+	"version": "12.13.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"scripts",
@@ -30,14 +31,12 @@
 	],
 	"main": "index.js",
 	"dependencies": {
-		"@wordpress/jest-console": "file:../jest-console",
-		"babel-jest": "^27.4.5"
+		"@wordpress/jest-console": "*",
+		"babel-jest": "29.7.0"
 	},
 	"peerDependencies": {
 		"@babel/core": ">=7",
-		"jest": ">=27",
-		"react": ">=17",
-		"react-dom": ">=17"
+		"jest": ">=29"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/jest-preset-default/scripts/setup-globals.js b/packages/jest-preset-default/scripts/setup-globals.js
index 3855d1bc79b0c7..37922a3302e70f 100644
--- a/packages/jest-preset-default/scripts/setup-globals.js
+++ b/packages/jest-preset-default/scripts/setup-globals.js
@@ -1,3 +1,7 @@
+// Run all tests with development tools enabled.
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.SCRIPT_DEBUG = true;
+
 // These are necessary to load TinyMCE successfully.
 global.URL = window.URL;
 global.window.tinyMCEPreInit = {
@@ -49,12 +53,5 @@ global.window.matchMedia = () => ( {
 	removeEventListener: () => {},
 } );
 
-// Setup fake localStorage.
-const storage = {};
-global.window.localStorage = {
-	getItem: ( key ) => ( key in storage ? storage[ key ] : null ),
-	setItem: ( key, value ) => ( storage[ key ] = value ),
-};
-
 // UserSettings global.
 global.window.userSettings = { uid: 1 };
diff --git a/packages/jest-puppeteer-axe/.npmrc b/packages/jest-puppeteer-axe/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/jest-puppeteer-axe/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index acd31bc026abd0..d54c3a57804f08 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+## 7.8.0 (2024-09-19)
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.29.0 (2024-05-16)
+
+## 6.28.0 (2024-05-02)
+
+## 6.27.0 (2024-04-19)
+
+## 6.26.0 (2024-04-03)
+
+## 6.25.0 (2024-03-21)
+
+## 6.24.0 (2024-03-06)
+
+## 6.23.0 (2024-02-21)
+
+## 6.22.0 (2024-02-09)
+
+## 6.21.0 (2024-01-24)
+
+## 6.20.0 (2024-01-10)
+
+## 6.19.0 (2023-12-13)
+
+## 6.18.0 (2023-11-29)
+
+## 6.17.0 (2023-11-16)
+
+## 6.16.0 (2023-11-02)
+
+## 6.15.0 (2023-10-18)
+
+## 6.14.0 (2023-10-05)
+
+## 6.13.0 (2023-09-20)
+
+## 6.12.0 (2023-08-31)
+
+## 6.11.0 (2023-08-16)
+
+## 6.10.0 (2023-08-10)
+
+## 6.9.0 (2023-07-20)
+
+## 6.8.0 (2023-07-05)
+
+## 6.7.0 (2023-06-23)
+
+## 6.6.0 (2023-06-07)
+
+## 6.5.0 (2023-05-24)
+
+## 6.4.0 (2023-05-10)
+
+## 6.3.0 (2023-04-26)
+
+## 6.2.0 (2023-04-12)
+
+## 6.1.0 (2023-03-29)
+
+## 6.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 5.11.0 (2023-03-01)
+
+## 5.10.0 (2023-02-15)
+
+## 5.9.0 (2023-02-01)
+
+## 5.8.0 (2023-01-11)
+
+## 5.7.0 (2023-01-02)
+
+## 5.6.0 (2022-12-14)
+
 ## 5.5.0 (2022-11-16)
 
 ## 5.4.0 (2022-11-02)
@@ -14,7 +122,7 @@
 
 ## 5.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -43,7 +151,7 @@
 
 ## 1.1.0 (2019-05-21)
 
-### New Feature
+### New Features
 
 -   Added optional `disabledRules` option to use with `toPassAxeTests` matcher.
 
diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md
index fb5b6752c57025..452ffb4b6d1123 100644
--- a/packages/jest-puppeteer-axe/README.md
+++ b/packages/jest-puppeteer-axe/README.md
@@ -12,7 +12,7 @@ Install the module
 npm install @wordpress/jest-puppeteer-axe --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ### Setup
 
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index ae0dc68b6edf5a..c94e1ba4defbde 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "5.5.0",
+	"version": "7.13.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,7 +22,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"build",
@@ -32,10 +33,10 @@
 	"module": "build-module/index.js",
 	"dependencies": {
 		"@axe-core/puppeteer": "^4.0.0",
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"peerDependencies": {
-		"jest": ">=27",
+		"jest": ">=29",
 		"puppeteer": ">=11"
 	},
 	"peerDependenciesMeta": {
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index 93c13e8d2dab85..67daf5426b3272 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -42,7 +150,7 @@
 
 ## 3.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/compose` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,7 +158,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -69,7 +177,7 @@
 
 ## 1.13.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the keyboard shortcuts namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
diff --git a/packages/keyboard-shortcuts/README.md b/packages/keyboard-shortcuts/README.md
index 4138b44a8e685f..1721279a6e99da 100644
--- a/packages/keyboard-shortcuts/README.md
+++ b/packages/keyboard-shortcuts/README.md
@@ -18,7 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ### ShortcutProvider
 
-Handles callbacks added to context by `useShortcut`.
+Handles callbacks added to context by `useShortcut`. Adding a provider allows to register contextual shortcuts that are only active when a certain part of the UI is focused.
 
 _Parameters_
 
@@ -26,7 +26,7 @@ _Parameters_
 
 _Returns_
 
--   `import('@wordpress/element').WPElement`: Component.
+-   `Element`: Component.
 
 ### store
 
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index bf82f22074aa97..8510d99a6f8d14 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,20 +19,21 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/data": "file:../data",
-		"@wordpress/element": "file:../element",
-		"@wordpress/keycodes": "file:../keycodes",
-		"rememo": "^4.0.0"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/keycodes": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/keyboard-shortcuts/src/components/shortcut-provider.js b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
index bebad586268a72..997c9725096e49 100644
--- a/packages/keyboard-shortcuts/src/components/shortcut-provider.js
+++ b/packages/keyboard-shortcuts/src/components/shortcut-provider.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,18 +12,22 @@ const { Provider } = context;
 
 /**
  * Handles callbacks added to context by `useShortcut`.
+ * Adding a provider allows to register contextual shortcuts
+ * that are only active when a certain part of the UI is focused.
  *
  * @param {Object} props Props to pass to `div`.
  *
- * @return {import('@wordpress/element').WPElement} Component.
+ * @return {Element} Component.
  */
 export function ShortcutProvider( props ) {
-	const keyboardShortcuts = useRef( new Set() );
+	const [ keyboardShortcuts ] = useState( () => new Set() );
 
 	function onKeyDown( event ) {
-		if ( props.onKeyDown ) props.onKeyDown( event );
+		if ( props.onKeyDown ) {
+			props.onKeyDown( event );
+		}
 
-		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+		for ( const keyboardShortcut of keyboardShortcuts ) {
 			keyboardShortcut( event );
 		}
 	}
diff --git a/packages/keyboard-shortcuts/src/context.js b/packages/keyboard-shortcuts/src/context.js
index bb885af5c721f3..f2f8846751291f 100644
--- a/packages/keyboard-shortcuts/src/context.js
+++ b/packages/keyboard-shortcuts/src/context.js
@@ -3,4 +3,24 @@
  */
 import { createContext } from '@wordpress/element';
 
-export const context = createContext();
+const globalShortcuts = new Set();
+const globalListener = ( event ) => {
+	for ( const keyboardShortcut of globalShortcuts ) {
+		keyboardShortcut( event );
+	}
+};
+
+export const context = createContext( {
+	add: ( shortcut ) => {
+		if ( globalShortcuts.size === 0 ) {
+			document.addEventListener( 'keydown', globalListener );
+		}
+		globalShortcuts.add( shortcut );
+	},
+	delete: ( shortcut ) => {
+		globalShortcuts.delete( shortcut );
+		if ( globalShortcuts.size === 0 ) {
+			document.removeEventListener( 'keydown', globalListener );
+		}
+	},
+} );
diff --git a/packages/keyboard-shortcuts/src/hooks/use-shortcut.js b/packages/keyboard-shortcuts/src/hooks/use-shortcut.js
index c60f84cc58da74..b6252ebc3680cd 100644
--- a/packages/keyboard-shortcuts/src/hooks/use-shortcut.js
+++ b/packages/keyboard-shortcuts/src/hooks/use-shortcut.js
@@ -17,11 +17,18 @@ import { context } from '../context';
  * @param {Object}   options            Shortcut options.
  * @param {boolean}  options.isDisabled Whether to disable to shortut.
  */
-export default function useShortcut( name, callback, { isDisabled } = {} ) {
+export default function useShortcut(
+	name,
+	callback,
+	{ isDisabled = false } = {}
+) {
 	const shortcuts = useContext( context );
 	const isMatch = useShortcutEventMatch();
 	const callbackRef = useRef();
-	callbackRef.current = callback;
+
+	useEffect( () => {
+		callbackRef.current = callback;
+	}, [ callback ] );
 
 	useEffect( () => {
 		if ( isDisabled ) {
@@ -34,9 +41,9 @@ export default function useShortcut( name, callback, { isDisabled } = {} ) {
 			}
 		}
 
-		shortcuts.current.add( _callback );
+		shortcuts.add( _callback );
 		return () => {
-			shortcuts.current.delete( _callback );
+			shortcuts.delete( _callback );
 		};
-	}, [ name, isDisabled ] );
+	}, [ name, isDisabled, shortcuts ] );
 }
diff --git a/packages/keyboard-shortcuts/src/store/actions.js b/packages/keyboard-shortcuts/src/store/actions.js
index b4cb625287d8fb..4f40ba05ff85a9 100644
--- a/packages/keyboard-shortcuts/src/store/actions.js
+++ b/packages/keyboard-shortcuts/src/store/actions.js
@@ -26,6 +26,44 @@
  *
  * @param {WPShortcutConfig} config Shortcut config.
  *
+ * @example
+ *
+ *```js
+ * import { useEffect } from 'react';
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect, useDispatch } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+ *
+ *     useEffect( () => {
+ *         registerShortcut( {
+ *             name: 'custom/my-custom-shortcut',
+ *             category: 'my-category',
+ *             description: __( 'My custom shortcut' ),
+ *             keyCombination: {
+ *                 modifier: 'primary',
+ *                 character: 'j',
+ *             },
+ *         } );
+ *     }, [] );
+ *
+ *     const shortcut = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutKeyCombination(
+ *                 'custom/my-custom-shortcut'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return shortcut ? (
+ *         <p>{ __( 'Shortcut is registered.' ) }</p>
+ *     ) : (
+ *         <p>{ __( 'Shortcut is not registered.' ) }</p>
+ *     );
+ * };
+ *```
  * @return {Object} action.
  */
 export function registerShortcut( {
@@ -50,6 +88,36 @@ export function registerShortcut( {
  *
  * @param {string} name Shortcut name.
  *
+ * @example
+ *
+ *```js
+ * import { useEffect } from 'react';
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect, useDispatch } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const { unregisterShortcut } = useDispatch( keyboardShortcutsStore );
+ *
+ *     useEffect( () => {
+ *         unregisterShortcut( 'core/editor/next-region' );
+ *     }, [] );
+ *
+ *     const shortcut = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutKeyCombination(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return shortcut ? (
+ *         <p>{ __( 'Shortcut is not unregistered.' ) }</p>
+ *     ) : (
+ *         <p>{ __( 'Shortcut is unregistered.' ) }</p>
+ *     );
+ * };
+ *```
  * @return {Object} action.
  */
 export function unregisterShortcut( name ) {
diff --git a/packages/keyboard-shortcuts/src/store/selectors.js b/packages/keyboard-shortcuts/src/store/selectors.js
index 45acf70f77d200..1e4872b46a4a77 100644
--- a/packages/keyboard-shortcuts/src/store/selectors.js
+++ b/packages/keyboard-shortcuts/src/store/selectors.js
@@ -1,11 +1,7 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
+import { createSelector } from '@wordpress/data';
 import {
 	displayShortcut,
 	shortcutAriaLabel,
@@ -44,7 +40,7 @@ const FORMATTING_METHODS = {
  * @param {keyof FORMATTING_METHODS}  representation Type of representation
  *                                                   (display, raw, ariaLabel).
  *
- * @return {string?} Shortcut representation.
+ * @return {?string} Shortcut representation.
  */
 function getKeyCombinationRepresentation( shortcut, representation ) {
 	if ( ! shortcut ) {
@@ -64,6 +60,39 @@ function getKeyCombinationRepresentation( shortcut, representation ) {
  * @param {Object} state Global state.
  * @param {string} name  Shortcut name.
  *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const {character, modifier} = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutKeyCombination(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         <div>
+ *             { createInterpolateElement(
+ *                 sprintf(
+ *                     'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                     character,
+ *                     modifier
+ *                 ),
+ *                 {
+ *                     code: <code />,
+ *                 }
+ *             ) }
+ *         </div>
+ *     );
+ * };
+ *```
+ *
  * @return {WPShortcutKeyCombination?} Key combination.
  */
 export function getShortcutKeyCombination( state, name ) {
@@ -77,8 +106,36 @@ export function getShortcutKeyCombination( state, name ) {
  * @param {string}                   name           Shortcut name.
  * @param {keyof FORMATTING_METHODS} representation Type of representation
  *                                                  (display, raw, ariaLabel).
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const {display, raw, ariaLabel} = useSelect(
+ *         ( select ) =>{
+ *             return {
+ *                 display: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region' ),
+ *                 raw: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region','raw' ),
+ *                 ariaLabel: select( keyboardShortcutsStore ).getShortcutRepresentation('core/editor/next-region', 'ariaLabel')
+ *             }
+ *         },
+ *         []
+ *     );
  *
- * @return {string?} Shortcut representation.
+ *     return (
+ *         <ul>
+ *             <li>{ sprintf( 'display string: %s', display ) }</li>
+ *             <li>{ sprintf( 'raw string: %s', raw ) }</li>
+ *             <li>{ sprintf( 'ariaLabel string: %s', ariaLabel ) }</li>
+ *         </ul>
+ *     );
+ * };
+ *```
+ *
+ * @return {?string} Shortcut representation.
  */
 export function getShortcutRepresentation(
 	state,
@@ -95,7 +152,27 @@ export function getShortcutRepresentation(
  * @param {Object} state Global state.
  * @param {string} name  Shortcut name.
  *
- * @return {string?} Shortcut description.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const shortcutDescription = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutDescription( 'core/editor/next-region' ),
+ *         []
+ *     );
+ *
+ *     return shortcutDescription ? (
+ *         <div>{ shortcutDescription }</div>
+ *     ) : (
+ *         <div>{ __( 'No description.' ) }</div>
+ *     );
+ * };
+ *```
+ * @return {?string} Shortcut description.
  */
 export function getShortcutDescription( state, name ) {
 	return state[ name ] ? state[ name ].description : null;
@@ -106,6 +183,44 @@ export function getShortcutDescription( state, name ) {
  *
  * @param {Object} state Global state.
  * @param {string} name  Shortcut name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const shortcutAliases = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getShortcutAliases(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         shortcutAliases.length > 0 && (
+ *             <ul>
+ *                 { shortcutAliases.map( ( { character, modifier }, index ) => (
+ *                     <li key={ index }>
+ *                         { createInterpolateElement(
+ *                             sprintf(
+ *                                 'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                                 character,
+ *                                 modifier
+ *                             ),
+ *                             {
+ *                                 code: <code />,
+ *                             }
+ *                         ) }
+ *                     </li>
+ *                 ) ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
  *
  * @return {WPShortcutKeyCombination[]} Key combinations.
  */
@@ -115,6 +230,55 @@ export function getShortcutAliases( state, name ) {
 		: EMPTY_ARRAY;
 }
 
+/**
+ * Returns the shortcuts that include aliases for a given shortcut name.
+ *
+ * @param {Object} state Global state.
+ * @param {string} name  Shortcut name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const allShortcutKeyCombinations = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getAllShortcutKeyCombinations(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         allShortcutKeyCombinations.length > 0 && (
+ *             <ul>
+ *                 { allShortcutKeyCombinations.map(
+ *                     ( { character, modifier }, index ) => (
+ *                         <li key={ index }>
+ *                             { createInterpolateElement(
+ *                                 sprintf(
+ *                                     'Character: <code>%s</code> / Modifier: <code>%s</code>',
+ *                                     character,
+ *                                     modifier
+ *                                 ),
+ *                                 {
+ *                                     code: <code />,
+ *                                 }
+ *                             ) }
+ *                         </li>
+ *                     )
+ *                 ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ *
+ * @return {WPShortcutKeyCombination[]} Key combinations.
+ */
 export const getAllShortcutKeyCombinations = createSelector(
 	( state, name ) => {
 		return [
@@ -131,6 +295,47 @@ export const getAllShortcutKeyCombinations = createSelector(
  * @param {Object} state Global state.
  * @param {string} name  Shortcut name.
  *
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ * import { createInterpolateElement } from '@wordpress/element';
+ * import { sprintf } from '@wordpress/i18n';
+ *
+ * const ExampleComponent = () => {
+ *     const allShortcutRawKeyCombinations = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getAllShortcutRawKeyCombinations(
+ *                 'core/editor/next-region'
+ *             ),
+ *         []
+ *     );
+ *
+ *     return (
+ *         allShortcutRawKeyCombinations.length > 0 && (
+ *             <ul>
+ *                 { allShortcutRawKeyCombinations.map(
+ *                     ( shortcutRawKeyCombination, index ) => (
+ *                         <li key={ index }>
+ *                             { createInterpolateElement(
+ *                                 sprintf(
+ *                                     ' <code>%s</code>',
+ *                                     shortcutRawKeyCombination
+ *                                 ),
+ *                                 {
+ *                                     code: <code />,
+ *                                 }
+ *                             ) }
+ *                         </li>
+ *                     )
+ *                 ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
+ *
  * @return {string[]} Shortcuts.
  */
 export const getAllShortcutRawKeyCombinations = createSelector(
@@ -148,7 +353,32 @@ export const getAllShortcutRawKeyCombinations = createSelector(
  *
  * @param {Object} state Global state.
  * @param {string} name  Category name.
+ * @example
+ *
+ *```js
+ * import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *     const categoryShortcuts = useSelect(
+ *         ( select ) =>
+ *             select( keyboardShortcutsStore ).getCategoryShortcuts(
+ *                 'block'
+ *             ),
+ *         []
+ *     );
  *
+ *     return (
+ *         categoryShortcuts.length > 0 && (
+ *             <ul>
+ *                 { categoryShortcuts.map( ( categoryShortcut ) => (
+ *                     <li key={ categoryShortcut }>{ categoryShortcut }</li>
+ *                 ) ) }
+ *             </ul>
+ *         )
+ *     );
+ * };
+ *```
  * @return {string[]} Shortcut names.
  */
 export const getCategoryShortcuts = createSelector(
diff --git a/packages/keycodes/.npmrc b/packages/keycodes/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/keycodes/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index e0b44166510f13..46ce387d6d058b 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,7 +161,7 @@
 
 ## 2.18.0 (2021-01-05)
 
-### Enhancement
+### Enhancements
 
 -   Include TypeScript type declarations ([#19520](https://github.com/WordPress/gutenberg/pull/19520))
 
@@ -75,6 +179,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/keycodes/README.md b/packages/keycodes/README.md
index 99557a44b26310..1478632bddb3c3 100644
--- a/packages/keycodes/README.md
+++ b/packages/keycodes/README.md
@@ -128,8 +128,7 @@ _Returns_
 
 ### isKeyboardEvent
 
-An object that contains functions to check if a keyboard event matches a
-predefined shortcut combination.
+An object that contains functions to check if a keyboard event matches a predefined shortcut combination.
 
 _Usage_
 
@@ -149,8 +148,7 @@ Keycode for LEFT key.
 
 ### modifiers
 
-Object that contains functions that return the available modifier
-depending on platform.
+Object that contains functions that return the available modifier depending on platform.
 
 _Type_
 
@@ -192,8 +190,7 @@ Keycode for SHIFT key.
 
 ### shortcutAriaLabel
 
-An object that contains functions to return an aria label for a keyboard
-shortcut.
+An object that contains functions to return an aria label for a keyboard shortcut.
 
 _Usage_
 
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 8aaf1a3eb08af2..cc261f4eecf668 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,18 +19,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/i18n": "file:../i18n",
-		"change-case": "^4.1.2",
-		"lodash": "^4.17.21"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/i18n": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js
index 5bb776127d95e7..b6df5e3f4a2145 100644
--- a/packages/keycodes/src/index.js
+++ b/packages/keycodes/src/index.js
@@ -9,12 +9,6 @@
  * shortcut combos directly to keyboardShortcut().
  */
 
-/**
- * External dependencies
- */
-import { capitalCase } from 'change-case';
-import { get, mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -43,7 +37,9 @@ import { isAppleOS } from './platform';
  *
  * @typedef {(character: string, isApple?: () => boolean) => T} WPKeyHandler
  */
-/** @typedef {(event: KeyboardEvent, character: string, isApple?: () => boolean) => boolean} WPEventKeyHandler */
+/** @typedef {(event: import('react').KeyboardEvent<HTMLElement> | KeyboardEvent, character: string, isApple?: () => boolean) => boolean} WPEventKeyHandler */
+
+/** @typedef {( isApple: () => boolean ) => WPModifierPart[]} WPModifier */
 
 /**
  * Keycode for BACKSPACE key.
@@ -147,6 +143,36 @@ export const ZERO = 48;
 
 export { isAppleOS };
 
+/**
+ * Capitalise the first character of a string.
+ * @param {string} string String to capitalise.
+ * @return {string} Capitalised string.
+ */
+function capitaliseFirstCharacter( string ) {
+	return string.length < 2
+		? string.toUpperCase()
+		: string.charAt( 0 ).toUpperCase() + string.slice( 1 );
+}
+
+/**
+ * Map the values of an object with a specified callback and return the result object.
+ *
+ * @template {{ [s: string]: any; } | ArrayLike<any>} T
+ *
+ * @param {T}                     object Object to map values of.
+ * @param {( value: any ) => any} mapFn  Mapping function
+ *
+ * @return {any} Active modifier constants.
+ */
+function mapValues( object, mapFn ) {
+	return Object.fromEntries(
+		Object.entries( object ).map( ( [ key, value ] ) => [
+			key,
+			mapFn( value ),
+		] )
+	);
+}
+
 /**
  * Object that contains functions that return the available modifier
  * depending on platform.
@@ -185,14 +211,18 @@ export const modifiers = {
  * @type {WPModifierHandler<WPKeyHandler<string>>} Keyed map of functions to raw
  *                                                 shortcuts.
  */
-export const rawShortcut = mapValues( modifiers, ( modifier ) => {
-	return /** @type {WPKeyHandler<string>} */ (
-		character,
-		_isApple = isAppleOS
-	) => {
-		return [ ...modifier( _isApple ), character.toLowerCase() ].join( '+' );
-	};
-} );
+export const rawShortcut =
+	/* @__PURE__ */
+	mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => {
+		return /** @type {WPKeyHandler<string>} */ (
+			character,
+			_isApple = isAppleOS
+		) => {
+			return [ ...modifier( _isApple ), character.toLowerCase() ].join(
+				'+'
+			);
+		};
+	} );
 
 /**
  * Return an array of the parts of a keyboard shortcut chord for display.
@@ -207,42 +237,37 @@ export const rawShortcut = mapValues( modifiers, ( modifier ) => {
  * @type {WPModifierHandler<WPKeyHandler<string[]>>} Keyed map of functions to
  *                                                   shortcut sequences.
  */
-export const displayShortcutList = mapValues( modifiers, ( modifier ) => {
-	return /** @type {WPKeyHandler<string[]>} */ (
-		character,
-		_isApple = isAppleOS
-	) => {
-		const isApple = _isApple();
-		const replacementKeyMap = {
-			[ ALT ]: isApple ? '⌥' : 'Alt',
-			[ CTRL ]: isApple ? '⌃' : 'Ctrl', // Make sure ⌃ is the U+2303 UP ARROWHEAD unicode character and not the caret character.
-			[ COMMAND ]: '⌘',
-			[ SHIFT ]: isApple ? '⇧' : 'Shift',
+export const displayShortcutList =
+	/* @__PURE__ */
+	mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => {
+		return /** @type {WPKeyHandler<string[]>} */ (
+			character,
+			_isApple = isAppleOS
+		) => {
+			const isApple = _isApple();
+			const replacementKeyMap = {
+				[ ALT ]: isApple ? '⌥' : 'Alt',
+				[ CTRL ]: isApple ? '⌃' : 'Ctrl', // Make sure ⌃ is the U+2303 UP ARROWHEAD unicode character and not the caret character.
+				[ COMMAND ]: '⌘',
+				[ SHIFT ]: isApple ? '⇧' : 'Shift',
+			};
+
+			const modifierKeys = modifier( _isApple ).reduce(
+				( accumulator, key ) => {
+					const replacementKey = replacementKeyMap[ key ] ?? key;
+					// If on the Mac, adhere to platform convention and don't show plus between keys.
+					if ( isApple ) {
+						return [ ...accumulator, replacementKey ];
+					}
+
+					return [ ...accumulator, replacementKey, '+' ];
+				},
+				/** @type {string[]} */ ( [] )
+			);
+
+			return [ ...modifierKeys, capitaliseFirstCharacter( character ) ];
 		};
-
-		const modifierKeys = modifier( _isApple ).reduce(
-			( accumulator, key ) => {
-				const replacementKey = get( replacementKeyMap, key, key );
-				// If on the Mac, adhere to platform convention and don't show plus between keys.
-				if ( isApple ) {
-					return [ ...accumulator, replacementKey ];
-				}
-
-				return [ ...accumulator, replacementKey, '+' ];
-			},
-			/** @type {string[]} */ ( [] )
-		);
-
-		// Symbols (`,.) are removed by the default regular expression,
-		// so override the rule to allow symbols used for shortcuts.
-		// see: https://github.com/blakeembrey/change-case#options
-		const capitalizedCharacter = capitalCase( character, {
-			stripRegexp: /[^A-Z0-9`,\.\\\-]/gi,
-		} );
-
-		return [ ...modifierKeys, capitalizedCharacter ];
-	};
-} );
+	} );
 
 /**
  * An object that contains functions to display shortcuts.
@@ -257,15 +282,17 @@ export const displayShortcutList = mapValues( modifiers, ( modifier ) => {
  * @type {WPModifierHandler<WPKeyHandler<string>>} Keyed map of functions to
  *                                                 display shortcuts.
  */
-export const displayShortcut = mapValues(
-	displayShortcutList,
-	( shortcutList ) => {
-		return /** @type {WPKeyHandler<string>} */ (
-			character,
-			_isApple = isAppleOS
-		) => shortcutList( character, _isApple ).join( '' );
-	}
-);
+export const displayShortcut =
+	/* @__PURE__ */
+	mapValues(
+		displayShortcutList,
+		( /** @type {WPKeyHandler<string[]>} */ shortcutList ) => {
+			return /** @type {WPKeyHandler<string>} */ (
+				character,
+				_isApple = isAppleOS
+			) => shortcutList( character, _isApple ).join( '' );
+		}
+	);
 
 /**
  * An object that contains functions to return an aria label for a keyboard
@@ -281,36 +308,43 @@ export const displayShortcut = mapValues(
  * @type {WPModifierHandler<WPKeyHandler<string>>} Keyed map of functions to
  *                                                 shortcut ARIA labels.
  */
-export const shortcutAriaLabel = mapValues( modifiers, ( modifier ) => {
-	return /** @type {WPKeyHandler<string>} */ (
-		character,
-		_isApple = isAppleOS
-	) => {
-		const isApple = _isApple();
-		const replacementKeyMap = {
-			[ SHIFT ]: 'Shift',
-			[ COMMAND ]: isApple ? 'Command' : 'Control',
-			[ CTRL ]: 'Control',
-			[ ALT ]: isApple ? 'Option' : 'Alt',
-			/* translators: comma as in the character ',' */
-			',': __( 'Comma' ),
-			/* translators: period as in the character '.' */
-			'.': __( 'Period' ),
-			/* translators: backtick as in the character '`' */
-			'`': __( 'Backtick' ),
+export const shortcutAriaLabel =
+	/* @__PURE__ */
+	mapValues( modifiers, ( /** @type {WPModifier} */ modifier ) => {
+		return /** @type {WPKeyHandler<string>} */ (
+			character,
+			_isApple = isAppleOS
+		) => {
+			const isApple = _isApple();
+			/** @type {Record<string,string>} */
+			const replacementKeyMap = {
+				[ SHIFT ]: 'Shift',
+				[ COMMAND ]: isApple ? 'Command' : 'Control',
+				[ CTRL ]: 'Control',
+				[ ALT ]: isApple ? 'Option' : 'Alt',
+				/* translators: comma as in the character ',' */
+				',': __( 'Comma' ),
+				/* translators: period as in the character '.' */
+				'.': __( 'Period' ),
+				/* translators: backtick as in the character '`' */
+				'`': __( 'Backtick' ),
+				/* translators: tilde as in the character '~' */
+				'~': __( 'Tilde' ),
+			};
+
+			return [ ...modifier( _isApple ), character ]
+				.map( ( key ) =>
+					capitaliseFirstCharacter( replacementKeyMap[ key ] ?? key )
+				)
+				.join( isApple ? ' ' : ' + ' );
 		};
-
-		return [ ...modifier( _isApple ), character ]
-			.map( ( key ) => capitalCase( get( replacementKeyMap, key, key ) ) )
-			.join( isApple ? ' ' : ' + ' );
-	};
-} );
+	} );
 
 /**
  * From a given KeyboardEvent, returns an array of active modifier constants for
  * the event.
  *
- * @param {KeyboardEvent} event Keyboard event.
+ * @param {import('react').KeyboardEvent<HTMLElement> | KeyboardEvent} event Keyboard event.
  *
  * @return {Array<WPModifierPart>} Active modifier constants.
  */
@@ -344,51 +378,64 @@ function getEventModifiers( event ) {
  * @type {WPModifierHandler<WPEventKeyHandler>} Keyed map of functions
  *                                                       to match events.
  */
-export const isKeyboardEvent = mapValues( modifiers, ( getModifiers ) => {
-	return /** @type {WPEventKeyHandler} */ (
-		event,
-		character,
-		_isApple = isAppleOS
-	) => {
-		const mods = getModifiers( _isApple );
-		const eventMods = getEventModifiers( event );
-
-		const modsDiff = mods.filter( ( mod ) => ! eventMods.includes( mod ) );
-		const eventModsDiff = eventMods.filter(
-			( mod ) => ! mods.includes( mod )
-		);
-
-		if ( modsDiff.length > 0 || eventModsDiff.length > 0 ) {
-			return false;
-		}
+export const isKeyboardEvent =
+	/* @__PURE__ */
+	mapValues( modifiers, ( /** @type {WPModifier} */ getModifiers ) => {
+		return /** @type {WPEventKeyHandler} */ (
+			event,
+			character,
+			_isApple = isAppleOS
+		) => {
+			const mods = getModifiers( _isApple );
+			const eventMods = getEventModifiers( event );
+			/** @type {Record<string,string>} */
+			const replacementWithShiftKeyMap = {
+				Comma: ',',
+				Backslash: '\\',
+				// Windows returns `\` for both IntlRo and IntlYen.
+				IntlRo: '\\',
+				IntlYen: '\\',
+			};
+
+			const modsDiff = mods.filter(
+				( mod ) => ! eventMods.includes( mod )
+			);
+			const eventModsDiff = eventMods.filter(
+				( mod ) => ! mods.includes( mod )
+			);
+
+			if ( modsDiff.length > 0 || eventModsDiff.length > 0 ) {
+				return false;
+			}
 
-		let key = event.key.toLowerCase();
+			let key = event.key.toLowerCase();
 
-		if ( ! character ) {
-			return mods.includes( /** @type {WPModifierPart} */ ( key ) );
-		}
+			if ( ! character ) {
+				return mods.includes( /** @type {WPModifierPart} */ ( key ) );
+			}
 
-		if ( event.altKey && character.length === 1 ) {
-			key = String.fromCharCode( event.keyCode ).toLowerCase();
-		}
+			if ( event.altKey && character.length === 1 ) {
+				key = String.fromCharCode( event.keyCode ).toLowerCase();
+			}
 
-		// Replace some characters to match the key indicated
-		// by the shortcut on Windows.
-		if ( ! _isApple() ) {
+			// `event.key` returns the value of the key pressed, taking into the state of
+			// modifier keys such as `Shift`. If the shift key is pressed, a different
+			// value may be returned depending on the keyboard layout. It is necessary to
+			// convert to the physical key value that don't take into account keyboard
+			// layout or modifier key state.
 			if (
 				event.shiftKey &&
 				character.length === 1 &&
-				event.code === 'Comma'
+				replacementWithShiftKeyMap[ event.code ]
 			) {
-				key = ',';
+				key = replacementWithShiftKeyMap[ event.code ];
 			}
-		}
 
-		// For backwards compatibility.
-		if ( character === 'del' ) {
-			character = 'delete';
-		}
+			// For backwards compatibility.
+			if ( character === 'del' ) {
+				character = 'delete';
+			}
 
-		return key === character.toLowerCase();
-	};
-} );
+			return key === character.toLowerCase();
+		};
+	} );
diff --git a/packages/keycodes/tsconfig.json b/packages/keycodes/tsconfig.json
index 2a1bbd4d1a0d0a..be13213c265f05 100644
--- a/packages/keycodes/tsconfig.json
+++ b/packages/keycodes/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/lazy-import/.npmrc b/packages/lazy-import/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/lazy-import/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index e9e0689f0062fe..d5cff8b39af07f 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.45.0 (2024-05-16)
+
+## 1.44.0 (2024-05-02)
+
+## 1.43.0 (2024-04-19)
+
+## 1.42.0 (2024-04-03)
+
+## 1.41.0 (2024-03-21)
+
+## 1.40.0 (2024-03-06)
+
+## 1.39.0 (2024-02-21)
+
+## 1.38.0 (2024-02-09)
+
+## 1.37.0 (2024-01-24)
+
+## 1.36.0 (2024-01-10)
+
+## 1.35.0 (2023-12-13)
+
+## 1.34.0 (2023-11-29)
+
+## 1.33.0 (2023-11-16)
+
+## 1.32.0 (2023-11-02)
+
+## 1.31.0 (2023-10-18)
+
+## 1.30.0 (2023-10-05)
+
+## 1.29.0 (2023-09-20)
+
+## 1.28.0 (2023-08-31)
+
+## 1.27.0 (2023-08-16)
+
+## 1.26.0 (2023-08-10)
+
+## 1.25.0 (2023-07-20)
+
+## 1.24.0 (2023-07-05)
+
+## 1.23.0 (2023-06-23)
+
+## 1.22.0 (2023-06-07)
+
+## 1.21.0 (2023-05-24)
+
+## 1.20.0 (2023-05-10)
+
+## 1.19.0 (2023-04-26)
+
+## 1.18.0 (2023-04-12)
+
+## 1.17.0 (2023-03-29)
+
+## 1.16.0 (2023-03-15)
+
+## 1.15.0 (2023-03-01)
+
+## 1.14.0 (2023-02-15)
+
+## 1.13.0 (2023-02-01)
+
+## 1.12.0 (2023-01-11)
+
+## 1.11.0 (2023-01-02)
+
+## 1.10.0 (2022-12-14)
+
 ## 1.9.0 (2022-11-16)
 
 ## 1.8.0 (2022-11-02)
@@ -21,7 +125,7 @@
 
 ## 1.2.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Allow local paths as an option when trying to import a specific file from the package ([#23751](https://github.com/WordPress/gutenberg/pull/23751)).
 
diff --git a/packages/lazy-import/README.md b/packages/lazy-import/README.md
index c0659c153b4560..cd3dcb16eb6abb 100644
--- a/packages/lazy-import/README.md
+++ b/packages/lazy-import/README.md
@@ -20,7 +20,7 @@ NPM 6.9.0 or newer is required, since it uses the [package aliases feature](http
 
 Usage is intended to mimic the behavior of the [dynamic `import` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports), receiving the name (and optional version specifier) of an NPM package and returning a promise which resolves to the required module.
 
-_**Note:** Currently, this alignment to `import` is superficial, and the module resolution still uses [CommonJS `require`](https://nodejs.org/docs/latest-v12.x/api/modules.html#modules_require_id), rather than the newer [ES Modules support](https://nodejs.org/docs/latest-v14.x/api/esm.html). Future versions of this package will likely support ES Modules, once an LTS release of Node.js including unflagged ES Modules support becomes available._
+_**Note:** Currently, this alignment to `import` is superficial, and the module resolution still uses [CommonJS `require`](https://nodejs.org/docs/latest-v12.x/api/modules.html#modules_require_id), rather than the newer [ES Modules support](https://nodejs.org/docs/latest-v16.x/api/esm.html). Future versions of this package will likely support ES Modules, once an LTS release of Node.js including unflagged ES Modules support becomes available._
 
 The string passed to `lazyImport` can be formatted exactly as you would provide to `npm install`, including an optional version specifier (including [version ranges](https://docs.npmjs.com/misc/semver#ranges)). If the version specifier is omitted, it will be treated as equivalent to `*`, using the version of a locally installed package if available, otherwise installing the latest available version.
 
@@ -55,7 +55,7 @@ function onInstall() {
 lazyImport( 'fbjs@^1.0.0', {
 	localPath: './lib/shallowEqual',
 	onInstall,
-} ).then(/* ... */);
+} ).then( /* ... */ );
 ```
 
 Note that `lazyImport` can throw an error when offline and unable to install the dependency using NPM. You may want to anticipate this and provide remediation steps for a failed install, such as logging a warning messsage:
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 576185dfa21145..f7bf8c7b0d3f3d 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "1.9.0",
+	"version": "2.13.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"npm": ">=6.9.0"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "lib/index.js",
 	"types": "build-types",
diff --git a/packages/lazy-import/tsconfig.json b/packages/lazy-import/tsconfig.json
index fd6069e3843aed..3bf8bde807404d 100644
--- a/packages/lazy-import/tsconfig.json
+++ b/packages/lazy-import/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "lib",
diff --git a/packages/library-export-default-webpack-plugin/.npmrc b/packages/library-export-default-webpack-plugin/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/library-export-default-webpack-plugin/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/library-export-default-webpack-plugin/CHANGELOG.md b/packages/library-export-default-webpack-plugin/CHANGELOG.md
deleted file mode 100644
index 65fbe942c39f71..00000000000000
--- a/packages/library-export-default-webpack-plugin/CHANGELOG.md
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
-
-## Unreleased
-
-## 2.8.0 (2022-11-16)
-
-## 2.7.0 (2022-11-02)
-
-## 2.6.0 (2022-10-19)
-
-## 2.5.0 (2022-10-05)
-
-## 2.4.0 (2022-09-21)
-
-## 2.2.0 (2021-08-23)
-
-### Deprecations
-
--   This plugin is deprecated for webpack 5. Please use [`output.library.export`](https://webpack.js.org/configuration/output/#outputlibraryexport) instead ([#33818](https://github.com/WordPress/gutenberg/pull/33818)).
-
-## 2.0.0 (2021-01-21)
-
-### Breaking Changes
-
--   Increase the minimum Node.js version to 12 ([#27934](https://github.com/WordPress/gutenberg/pull/27934)).
-
-## 1.3.0 (2019-06-12)
-
-### Internal
-
--   The module is no longer transpiled as part of a build process, and instead exposes its source directly as the `main` file.
diff --git a/packages/library-export-default-webpack-plugin/README.md b/packages/library-export-default-webpack-plugin/README.md
deleted file mode 100644
index c806260200b98e..00000000000000
--- a/packages/library-export-default-webpack-plugin/README.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Library Export Default Webpack Plugin
-
-> **DEPRECATED for webpack v5**: please use [`output.library.export`](https://webpack.js.org/configuration/output/#outputlibraryexport) instead.
-
-Webpack plugin for exporting `default` property for selected libraries which use ES6 Modules. Implementation is based on the Webpack's core plugin [ExportPropertyMainTemplatePlugin](https://github.com/webpack/webpack/blob/51b0df77e4f366163730ee465f01458bfad81f34/lib/ExportPropertyMainTemplatePlugin.js). The only difference is that this plugin allows to include all entry point names where the default export of your entry point will be assigned to the library target.
-
-## Installation
-
-Install the module
-
-```bash
-npm install @wordpress/library-export-default-webpack-plugin --save
-```
-
-**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions. It works only with webpack v4.
-
-## Usage
-
-Construct an instance of `LibraryExportDefaultPlugin` in your Webpack configurations plugins entry, passing an array where values correspond to the entry point name.
-
-The following example selects `boo` entry point to be updated by the plugin. When compiled, the built file will ensure that `default` value exported for the chunk will be assigned to the global variable `wp.boo`. `foo` chunk will remain untouched.
-
-```js
-const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
-
-module.exports = {
-	// ...
-
-	entry: {
-		boo: './packages/boo',
-		foo: './packages/foo',
-	},
-
-	output: {
-		filename: 'build/[name].js',
-		path: __dirname,
-		library: [ 'wp', '[name]' ],
-		libraryTarget: 'this',
-	},
-
-	plugins: [ new LibraryExportDefaultPlugin( [ 'boo' ] ) ],
-};
-```
-
-## 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/library-export-default-webpack-plugin/index.js b/packages/library-export-default-webpack-plugin/index.js
deleted file mode 100644
index 55f0f1b92fe6a7..00000000000000
--- a/packages/library-export-default-webpack-plugin/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-const { ConcatSource } = require( 'webpack-sources' );
-
-module.exports = class LibraryExportDefaultPlugin {
-	constructor( entryPointNames = [] ) {
-		this.entryPointNames = entryPointNames;
-	}
-
-	apply( compiler ) {
-		compiler.hooks.compilation.tap(
-			'LibraryExportDefaultPlugin',
-			( compilation ) => {
-				const { mainTemplate, chunkTemplate } = compilation;
-
-				const onRenderWithEntry = ( source, chunk ) => {
-					if ( ! this.entryPointNames.includes( chunk.name ) ) {
-						return source;
-					}
-					return new ConcatSource( source, '["default"]' );
-				};
-
-				for ( const template of [ mainTemplate, chunkTemplate ] ) {
-					template.hooks.renderWithEntry.tap(
-						'LibraryExportDefaultPlugin',
-						onRenderWithEntry
-					);
-				}
-
-				mainTemplate.hooks.hash.tap(
-					'LibraryExportDefaultPlugin',
-					( hash ) => {
-						hash.update( 'export property' );
-						hash.update( 'default' );
-					}
-				);
-			}
-		);
-	}
-};
diff --git a/packages/library-export-default-webpack-plugin/package.json b/packages/library-export-default-webpack-plugin/package.json
deleted file mode 100644
index 0b193b96d77557..00000000000000
--- a/packages/library-export-default-webpack-plugin/package.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-	"name": "@wordpress/library-export-default-webpack-plugin",
-	"version": "2.8.0",
-	"description": "Webpack plugin for exporting default property for selected libraries.",
-	"author": "The WordPress Contributors",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"wordpress",
-		"gutenberg",
-		"webpack",
-		"plugin",
-		"webpack-plugin",
-		"export"
-	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/library-export-default-webpack-plugin/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/library-export-default-webpack-plugin"
-	},
-	"bugs": {
-		"url": "https://github.com/WordPress/gutenberg/issues"
-	},
-	"engines": {
-		"node": ">=12"
-	},
-	"files": [
-		"index.js"
-	],
-	"main": "index.js",
-	"dependencies": {
-		"webpack-sources": "^3.2.2"
-	},
-	"peerDependencies": {
-		"webpack": "^4.0.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
diff --git a/packages/list-reusable-blocks/.npmrc b/packages/list-reusable-blocks/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/list-reusable-blocks/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 547392007a5c0a..59b8fa9500fde7 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -44,7 +152,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index e62197d008bdc3..31fd970e2d8da3 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,22 +20,25 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
 		"change-case": "^4.1.2"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index ddeed025b42c54..fdad08f80d213c 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -13,10 +13,12 @@ import ImportForm from '../import-form';
 function ImportDropdown( { onUpload } ) {
 	return (
 		<Dropdown
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			contentClassName="list-reusable-blocks-import-dropdown__content"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					size="compact"
+					className="list-reusable-blocks-import-dropdown__button"
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					variant="primary"
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
index 8c2dc9c94bd71f..abef499a63b298 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
@@ -1,3 +1,8 @@
 .list-reusable-blocks-import-dropdown__content .components-popover__content {
 	padding: 10px;
 }
+
+[class].list-reusable-blocks-import-dropdown__button {
+	// Todo: Make core button height and gutenberg button height equal.
+	height: 30px;
+}
diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js
index 3b3daa49571f47..ba6cffb956f04e 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -49,8 +49,8 @@ function ImportForm( { instanceId, onUpload } ) {
 					case 'Invalid JSON file':
 						uiMessage = __( 'Invalid JSON file' );
 						break;
-					case 'Invalid Reusable block JSON file':
-						uiMessage = __( 'Invalid Reusable block JSON file' );
+					case 'Invalid pattern JSON file':
+						uiMessage = __( 'Invalid pattern JSON file' );
 						break;
 					default:
 						uiMessage = __( 'Unknown error' );
@@ -84,8 +84,10 @@ function ImportForm( { instanceId, onUpload } ) {
 			</label>
 			<input id={ inputId } type="file" onChange={ onChangeFile } />
 			<Button
+				__next40pxDefaultSize
 				type="submit"
 				isBusy={ isLoading }
+				accessibleWhenDisabled
 				disabled={ ! file || isLoading }
 				variant="secondary"
 				className="list-reusable-blocks-import-form__button"
diff --git a/packages/list-reusable-blocks/src/components/import-form/style.scss b/packages/list-reusable-blocks/src/components/import-form/style.scss
index 844130b7c5914a..e72d63fd2a4903 100644
--- a/packages/list-reusable-blocks/src/components/import-form/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-form/style.scss
@@ -5,7 +5,6 @@
 
 .list-reusable-blocks-import-form__button {
 	margin-top: 10px;
-	margin-bottom: 10px;
 	float: right;
 }
 
diff --git a/packages/list-reusable-blocks/src/index.js b/packages/list-reusable-blocks/src/index.js
index b3f0a19fb37a63..f5cb411726963c 100644
--- a/packages/list-reusable-blocks/src/index.js
+++ b/packages/list-reusable-blocks/src/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { render } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,9 +31,7 @@ document.addEventListener( 'DOMContentLoaded', () => {
 	const showNotice = () => {
 		const notice = document.createElement( 'div' );
 		notice.className = 'notice notice-success is-dismissible';
-		notice.innerHTML = `<p>${ __(
-			'Reusable block imported successfully!'
-		) }</p>`;
+		notice.innerHTML = `<p>${ __( 'Pattern imported successfully!' ) }</p>`;
 
 		const headerEnd = document.querySelector( '.wp-header-end' );
 		if ( ! headerEnd ) {
@@ -45,5 +43,9 @@ document.addEventListener( 'DOMContentLoaded', () => {
 	const container = document.createElement( 'div' );
 	container.className = 'list-reusable-blocks__container';
 	button.parentNode.insertBefore( container, button );
-	render( <ImportDropdown onUpload={ showNotice } />, container );
+	createRoot( container ).render(
+		<StrictMode>
+			<ImportDropdown onUpload={ showNotice } />
+		</StrictMode>
+	);
 } );
diff --git a/packages/list-reusable-blocks/src/style.scss b/packages/list-reusable-blocks/src/style.scss
index ad85c700586099..6767bd0bd7e158 100644
--- a/packages/list-reusable-blocks/src/style.scss
+++ b/packages/list-reusable-blocks/src/style.scss
@@ -6,10 +6,6 @@
 	align-items: center;
 	position: relative;
 	top: -3px;
-	// Todo: Make core button height and gutenberg button height equal.
-	.components-button {
-		height: 26px;
-	}
 }
 
 @include wordpress-admin-schemes();
diff --git a/packages/list-reusable-blocks/src/utils/export.js b/packages/list-reusable-blocks/src/utils/export.js
index 0f70931c500805..4d7e76afcaa8fd 100644
--- a/packages/list-reusable-blocks/src/utils/export.js
+++ b/packages/list-reusable-blocks/src/utils/export.js
@@ -11,7 +11,7 @@ import apiFetch from '@wordpress/api-fetch';
 /**
  * Internal dependencies
  */
-import { download } from './file';
+import { downloadBlob } from '@wordpress/blob';
 
 /**
  * Export a reusable block as a JSON file.
@@ -25,18 +25,20 @@ async function exportReusableBlock( id ) {
 	} );
 	const title = post.title.raw;
 	const content = post.content.raw;
+	const syncStatus = post.wp_pattern_sync_status;
 	const fileContent = JSON.stringify(
 		{
 			__file: 'wp_block',
 			title,
 			content,
+			syncStatus,
 		},
 		null,
 		2
 	);
 	const fileName = kebabCase( title ) + '.json';
 
-	download( fileName, fileContent, 'application/json' );
+	downloadBlob( fileName, fileContent, 'application/json' );
 }
 
 export default exportReusableBlock;
diff --git a/packages/list-reusable-blocks/src/utils/file.js b/packages/list-reusable-blocks/src/utils/file.js
index f4cff155c591fb..d31e54ae41896a 100644
--- a/packages/list-reusable-blocks/src/utils/file.js
+++ b/packages/list-reusable-blocks/src/utils/file.js
@@ -1,29 +1,3 @@
-/**
- * Downloads a file.
- *
- * @param {string} fileName    File Name.
- * @param {string} content     File Content.
- * @param {string} contentType File mime type.
- */
-export function download( fileName, content, contentType ) {
-	const file = new window.Blob( [ content ], { type: contentType } );
-
-	// IE11 can't use the click to download technique
-	// we use a specific IE11 technique instead.
-	if ( window.navigator.msSaveOrOpenBlob ) {
-		window.navigator.msSaveOrOpenBlob( file, fileName );
-	} else {
-		const a = document.createElement( 'a' );
-		a.href = URL.createObjectURL( file );
-		a.download = fileName;
-
-		a.style.display = 'none';
-		document.body.appendChild( a );
-		a.click();
-		document.body.removeChild( a );
-	}
-}
-
 /**
  * Reads the textual content of the given file.
  *
diff --git a/packages/list-reusable-blocks/src/utils/import.js b/packages/list-reusable-blocks/src/utils/import.js
index 84c28b5fcfc80c..432948ce6d6dbc 100644
--- a/packages/list-reusable-blocks/src/utils/import.js
+++ b/packages/list-reusable-blocks/src/utils/import.js
@@ -27,9 +27,11 @@ async function importReusableBlock( file ) {
 		! parsedContent.title ||
 		! parsedContent.content ||
 		typeof parsedContent.title !== 'string' ||
-		typeof parsedContent.content !== 'string'
+		typeof parsedContent.content !== 'string' ||
+		( parsedContent.syncStatus &&
+			typeof parsedContent.syncStatus !== 'string' )
 	) {
-		throw new Error( 'Invalid Reusable block JSON file' );
+		throw new Error( 'Invalid pattern JSON file' );
 	}
 	const postType = await apiFetch( { path: `/wp/v2/types/wp_block` } );
 	const reusableBlock = await apiFetch( {
@@ -38,6 +40,10 @@ async function importReusableBlock( file ) {
 			title: parsedContent.title,
 			content: parsedContent.content,
 			status: 'publish',
+			meta:
+				parsedContent.syncStatus === 'unsynced'
+					? { wp_pattern_sync_status: parsedContent.syncStatus }
+					: undefined,
 		},
 		method: 'POST',
 	} );
diff --git a/packages/media-utils/.npmrc b/packages/media-utils/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/media-utils/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 6ed04ff3ddf50f..2cfcbaa4b2e8ba 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+### New Features
+
+-   Rewrite in TypeScript, exporting all the individual utility functions.
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.49.0 (2024-05-16)
+
+## 4.48.0 (2024-05-02)
+
+## 4.47.0 (2024-04-19)
+
+## 4.46.0 (2024-04-03)
+
+## 4.45.0 (2024-03-21)
+
+## 4.44.0 (2024-03-06)
+
+## 4.43.0 (2024-02-21)
+
+## 4.42.0 (2024-02-09)
+
+## 4.41.0 (2024-01-24)
+
+## 4.40.0 (2024-01-10)
+
+## 4.39.0 (2023-12-13)
+
+## 4.38.0 (2023-11-29)
+
+## 4.37.0 (2023-11-16)
+
+## 4.36.0 (2023-11-02)
+
+## 4.35.0 (2023-10-18)
+
+## 4.34.0 (2023-10-05)
+
+## 4.33.0 (2023-09-20)
+
+## 4.32.0 (2023-08-31)
+
+## 4.31.0 (2023-08-16)
+
+## 4.30.0 (2023-08-10)
+
+## 4.29.0 (2023-07-20)
+
+## 4.28.0 (2023-07-05)
+
+## 4.27.0 (2023-06-23)
+
+## 4.26.0 (2023-06-07)
+
+## 4.25.0 (2023-05-24)
+
+## 4.24.0 (2023-05-10)
+
+## 4.23.0 (2023-04-26)
+
+## 4.22.0 (2023-04-12)
+
+## 4.21.0 (2023-03-29)
+
+## 4.20.0 (2023-03-15)
+
+## 4.19.0 (2023-03-01)
+
+## 4.18.0 (2023-02-15)
+
+## 4.17.0 (2023-02-01)
+
+## 4.16.0 (2023-01-11)
+
+## 4.15.0 (2023-01-02)
+
+## 4.14.0 (2022-12-14)
+
 ## 4.13.0 (2022-11-16)
 
 ## 4.12.0 (2022-11-02)
@@ -30,7 +138,7 @@
 
 ## 4.0.0 (2022-05-18)
 
-### Breaking Change
+### Breaking Changes
 
 -   The `onError` now always receives the `message` as a string ([#39448](https://github.com/WordPress/gutenberg/pull/39448)).
 
@@ -48,7 +156,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
diff --git a/packages/media-utils/README.md b/packages/media-utils/README.md
index d3190cfce178cb..ddf18efb288339 100644
--- a/packages/media-utils/README.md
+++ b/packages/media-utils/README.md
@@ -13,12 +13,85 @@ npm install @wordpress/media-utils --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._
 
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### Attachment
+
+Undocumented declaration.
+
+### MediaUpload
+
+Undocumented declaration.
+
+### privateApis
+
+Private @wordpress/media-utils APIs.
+
+### RestAttachment
+
+Undocumented declaration.
+
+### transformAttachment
+
+Transforms an attachment object from the REST API shape into the shape expected by the block editor and other consumers.
+
+_Parameters_
+
+-   _attachment_ `RestAttachment`: REST API attachment object.
+
+### uploadMedia
+
+Upload a media file when the file upload button is activated or when adding a file to the editor via drag & drop.
+
+_Parameters_
+
+-   _$0_ `UploadMediaArgs`: Parameters object passed to the function.
+-   _$0.allowedTypes_ `UploadMediaArgs[ 'allowedTypes' ]`: Array with the types of media that can be uploaded, if unset all types are allowed.
+-   _$0.additionalData_ `UploadMediaArgs[ 'additionalData' ]`: Additional data to include in the request.
+-   _$0.filesList_ `UploadMediaArgs[ 'filesList' ]`: List of files.
+-   _$0.maxUploadFileSize_ `UploadMediaArgs[ 'maxUploadFileSize' ]`: Maximum upload size in bytes allowed for the site.
+-   _$0.onError_ `UploadMediaArgs[ 'onError' ]`: Function called when an error happens.
+-   _$0.onFileChange_ `UploadMediaArgs[ 'onFileChange' ]`: Function called each time a file or a temporary representation of the file is available.
+-   _$0.wpAllowedMimeTypes_ `UploadMediaArgs[ 'wpAllowedMimeTypes' ]`: List of allowed mime types and file extensions.
+-   _$0.signal_ `UploadMediaArgs[ 'signal' ]`: Abort signal.
+
+### validateFileSize
+
+Verifies whether the file is within the file upload size limits for the site.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _maxUploadFileSize_ `number`: Maximum upload size in bytes allowed for the site.
+
+### validateMimeType
+
+Verifies if the caller (e.g. a block) supports this mime type.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _allowedTypes_ `string[]`: List of allowed mime types.
+
+### validateMimeTypeForUser
+
+Verifies if the user is allowed to upload this mime type.
+
+_Parameters_
+
+-   _file_ `File`: File object.
+-   _wpAllowedMimeTypes_ `Record< string, string > | null`: List of allowed mime types and file extensions.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
 ## Usage
 
 ### uploadMedia
 
 Media upload util is a function that allows the invokers to upload files to the WordPress media library.
-As an example, provided that `myFiles` is an array of file objects, `onFileChange` on onFileChange is a function that receives an array of objects containing the description of WordPress media items and `handleFileError` is a function that receives an object describing a possible error, the following code uploads a file to the WordPress media library:
+As an example, provided that `myFiles` is an array of file objects, `handleFileChange` on onFileChange is a function that receives an array of objects containing the description of WordPress media items and `handleFileError` is a function that receives an object describing a possible error, the following code uploads a file to the WordPress media library:
 
 ```js
 wp.mediaUtils.utils.uploadMedia( {
@@ -43,7 +116,7 @@ Beware that first onFileChange is called with temporary blob URLs and then with
 ### MediaUpload
 
 Media upload component provides a UI button that allows users to open the WordPress media library. It is normally used in conjunction with the filter `editor.MediaUpload`.
-The component follows the interface specified in https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md, and more details regarding its usage can be checked there.
+The component follows the interface specified in <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.md>, and more details regarding its usage can be checked there.
 
 ## Contributing to this package
 
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 762503c64aee59..3a2713eed4dacb 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "4.13.0",
+	"version": "5.13.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -14,22 +14,26 @@
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/WordPress/gutenberg.git",
-		"directory": "packages/url"
+		"directory": "packages/media-utils"
 	},
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"wpScript": true,
+	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/blob": "file:../blob",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/private-apis": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/media-utils/src/components/media-upload/index.js b/packages/media-utils/src/components/media-upload/index.js
index 03343e8b1cbe9a..4067193f176062 100644
--- a/packages/media-utils/src/components/media-upload/index.js
+++ b/packages/media-utils/src/components/media-upload/index.js
@@ -4,16 +4,16 @@
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-const { wp } = window;
-
 const DEFAULT_EMPTY_GALLERY = [];
 
 /**
  * Prepares the Featured Image toolbars and frames.
  *
- * @return {wp.media.view.MediaFrame.Select} The default media workflow.
+ * @return {window.wp.media.view.MediaFrame.Select} The default media workflow.
  */
 const getFeaturedImageMediaFrame = () => {
+	const { wp } = window;
+
 	return wp.media.view.MediaFrame.Select.extend( {
 		/**
 		 * Enables the Set Featured Image Button.
@@ -70,12 +70,53 @@ const getFeaturedImageMediaFrame = () => {
 	} );
 };
 
+/**
+ * Prepares the default frame for selecting a single media item.
+ *
+ * @return {window.wp.media.view.MediaFrame.Select} The default media workflow.
+ */
+const getSingleMediaFrame = () => {
+	const { wp } = window;
+
+	// Extend the default Select frame, and use the same `createStates` method as in core,
+	// but with the addition of `filterable: 'uploaded'` to the Library state, so that
+	// the user can filter the media library by uploaded media.
+	return wp.media.view.MediaFrame.Select.extend( {
+		/**
+		 * Create the default states on the frame.
+		 */
+		createStates() {
+			const options = this.options;
+
+			if ( this.options.states ) {
+				return;
+			}
+
+			// Add the default states.
+			this.states.add( [
+				// Main states.
+				new wp.media.controller.Library( {
+					library: wp.media.query( options.library ),
+					multiple: options.multiple,
+					title: options.title,
+					priority: 20,
+					filterable: 'uploaded', // Allow filtering by uploaded images.
+				} ),
+				new wp.media.controller.EditImage( {
+					model: options.editImage,
+				} ),
+			] );
+		},
+	} );
+};
+
 /**
  * Prepares the Gallery toolbars and frames.
  *
- * @return {wp.media.view.MediaFrame.Post} The default media workflow.
+ * @return {window.wp.media.view.MediaFrame.Post} The default media workflow.
  */
 const getGalleryDetailsMediaFrame = () => {
+	const { wp } = window;
 	/**
 	 * Custom gallery details frame.
 	 *
@@ -210,6 +251,8 @@ const slimImageObject = ( img ) => {
 };
 
 const getAttachmentsCollection = ( ids ) => {
+	const { wp } = window;
+
 	return wp.media.query( {
 		order: 'ASC',
 		orderby: 'post__in',
@@ -221,43 +264,13 @@ const getAttachmentsCollection = ( ids ) => {
 };
 
 class MediaUpload extends Component {
-	constructor( {
-		allowedTypes,
-		gallery = false,
-		unstableFeaturedImageFlow = false,
-		modalClass,
-		multiple = false,
-		title = __( 'Select or Upload Media' ),
-	} ) {
+	constructor() {
 		super( ...arguments );
 		this.openModal = this.openModal.bind( this );
 		this.onOpen = this.onOpen.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.onUpdate = this.onUpdate.bind( this );
 		this.onClose = this.onClose.bind( this );
-
-		if ( gallery ) {
-			this.buildAndSetGalleryFrame();
-		} else {
-			const frameConfig = {
-				title,
-				multiple,
-			};
-			if ( !! allowedTypes ) {
-				frameConfig.library = { type: allowedTypes };
-			}
-
-			this.frame = wp.media( frameConfig );
-		}
-
-		if ( modalClass ) {
-			this.frame.$el.addClass( modalClass );
-		}
-
-		if ( unstableFeaturedImageFlow ) {
-			this.buildAndSetFeatureImageFrame();
-		}
-		this.initializeListeners();
 	}
 
 	initializeListeners() {
@@ -287,6 +300,8 @@ class MediaUpload extends Component {
 			return;
 		}
 
+		const { wp } = window;
+
 		this.lastGalleryValue = value;
 
 		// If a frame already existed remove it.
@@ -312,7 +327,7 @@ class MediaUpload extends Component {
 			state: currentState,
 			multiple,
 			selection,
-			editing: value && value.length ? true : false,
+			editing: !! value?.length,
 		} );
 		wp.media.frame = this.frame;
 		this.initializeListeners();
@@ -324,23 +339,74 @@ class MediaUpload extends Component {
 	 * @return {void}
 	 */
 	buildAndSetFeatureImageFrame() {
+		const { wp } = window;
+		const { value: featuredImageId, multiple, allowedTypes } = this.props;
 		const featuredImageFrame = getFeaturedImageMediaFrame();
-		const attachments = getAttachmentsCollection( this.props.value );
+		const attachments = getAttachmentsCollection( featuredImageId );
 		const selection = new wp.media.model.Selection( attachments.models, {
 			props: attachments.props.toJSON(),
 		} );
 		this.frame = new featuredImageFrame( {
-			mimeType: this.props.allowedTypes,
+			mimeType: allowedTypes,
 			state: 'featured-image',
-			multiple: this.props.multiple,
+			multiple,
 			selection,
-			editing: this.props.value ? true : false,
+			editing: featuredImageId,
+		} );
+		wp.media.frame = this.frame;
+		// In order to select the current featured image when opening
+		// the media library we have to set the appropriate settings.
+		// Currently they are set in php for the post editor, but
+		// not for site editor.
+		wp.media.view.settings.post = {
+			...wp.media.view.settings.post,
+			featuredImageId: featuredImageId || -1,
+		};
+	}
+
+	/**
+	 * Initializes the Media Library requirements for the single image flow.
+	 *
+	 * @return {void}
+	 */
+	buildAndSetSingleMediaFrame() {
+		const { wp } = window;
+		const {
+			allowedTypes,
+			multiple = false,
+			title = __( 'Select or Upload Media' ),
+			value,
+		} = this.props;
+
+		const frameConfig = {
+			title,
+			multiple,
+		};
+		if ( !! allowedTypes ) {
+			frameConfig.library = { type: allowedTypes };
+		}
+
+		// If a frame already exists, remove it.
+		if ( this.frame ) {
+			this.frame.remove();
+		}
+
+		const singleImageFrame = getSingleMediaFrame();
+		const attachments = getAttachmentsCollection( value );
+		const selection = new wp.media.model.Selection( attachments.models, {
+			props: attachments.props.toJSON(),
+		} );
+		this.frame = new singleImageFrame( {
+			mimeType: allowedTypes,
+			multiple,
+			selection,
+			...frameConfig,
 		} );
 		wp.media.frame = this.frame;
 	}
 
 	componentWillUnmount() {
-		this.frame.remove();
+		this.frame?.remove();
 	}
 
 	onUpdate( selections ) {
@@ -371,6 +437,7 @@ class MediaUpload extends Component {
 	}
 
 	onOpen() {
+		const { wp } = window;
 		const { value } = this.props;
 		this.updateCollection();
 
@@ -414,6 +481,8 @@ class MediaUpload extends Component {
 		if ( onClose ) {
 			onClose();
 		}
+
+		this.frame.detach();
 	}
 
 	updateCollection() {
@@ -435,9 +504,26 @@ class MediaUpload extends Component {
 	}
 
 	openModal() {
-		if ( this.props.gallery ) {
+		const {
+			gallery = false,
+			unstableFeaturedImageFlow = false,
+			modalClass,
+		} = this.props;
+
+		if ( gallery ) {
 			this.buildAndSetGalleryFrame();
+		} else {
+			this.buildAndSetSingleMediaFrame();
+		}
+
+		if ( modalClass ) {
+			this.frame.$el.addClass( modalClass );
 		}
+
+		if ( unstableFeaturedImageFlow ) {
+			this.buildAndSetFeatureImageFrame();
+		}
+		this.initializeListeners();
 		this.frame.open();
 	}
 
diff --git a/packages/media-utils/src/index.js b/packages/media-utils/src/index.js
deleted file mode 100644
index 590a7f4c9d188d..00000000000000
--- a/packages/media-utils/src/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './components';
-export * from './utils';
diff --git a/packages/media-utils/src/index.ts b/packages/media-utils/src/index.ts
new file mode 100644
index 00000000000000..e90b12ce8d6a63
--- /dev/null
+++ b/packages/media-utils/src/index.ts
@@ -0,0 +1,11 @@
+export * from './components';
+
+export { uploadMedia } from './utils/upload-media';
+export { transformAttachment } from './utils/transform-attachment';
+export { validateFileSize } from './utils/validate-file-size';
+export { validateMimeType } from './utils/validate-mime-type';
+export { validateMimeTypeForUser } from './utils/validate-mime-type-for-user';
+
+export type { Attachment, RestAttachment } from './utils/types';
+
+export { privateApis } from './private-apis';
diff --git a/packages/media-utils/src/lock-unlock.ts b/packages/media-utils/src/lock-unlock.ts
new file mode 100644
index 00000000000000..9aad88e5a4afb7
--- /dev/null
+++ b/packages/media-utils/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/media-utils'
+	);
diff --git a/packages/media-utils/src/private-apis.ts b/packages/media-utils/src/private-apis.ts
new file mode 100644
index 00000000000000..b0e813b5eac1e0
--- /dev/null
+++ b/packages/media-utils/src/private-apis.ts
@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import { sideloadMedia } from './utils/sideload-media';
+import { lock } from './lock-unlock';
+
+/**
+ * Private @wordpress/media-utils APIs.
+ */
+export const privateApis = {};
+
+lock( privateApis, {
+	sideloadMedia,
+} );
diff --git a/packages/media-utils/src/utils/flatten-form-data.ts b/packages/media-utils/src/utils/flatten-form-data.ts
new file mode 100644
index 00000000000000..594f172ef7eb2c
--- /dev/null
+++ b/packages/media-utils/src/utils/flatten-form-data.ts
@@ -0,0 +1,33 @@
+/**
+ * Determines whether the passed argument appears to be a plain object.
+ *
+ * @param data The object to inspect.
+ */
+function isPlainObject( data: unknown ): data is Record< string, unknown > {
+	return (
+		data !== null &&
+		typeof data === 'object' &&
+		Object.getPrototypeOf( data ) === Object.prototype
+	);
+}
+
+/**
+ * Recursively flatten data passed to form data, to allow using multi-level objects.
+ *
+ * @param {FormData}      formData Form data object.
+ * @param {string}        key      Key to amend to form data object
+ * @param {string|Object} data     Data to be amended to form data.
+ */
+export function flattenFormData(
+	formData: FormData,
+	key: string,
+	data: string | undefined | Record< string, string >
+) {
+	if ( isPlainObject( data ) ) {
+		for ( const [ name, value ] of Object.entries( data ) ) {
+			flattenFormData( formData, `${ key }[${ name }]`, value );
+		}
+	} else if ( data !== undefined ) {
+		formData.append( key, String( data ) );
+	}
+}
diff --git a/packages/media-utils/src/utils/get-mime-types-array.ts b/packages/media-utils/src/utils/get-mime-types-array.ts
new file mode 100644
index 00000000000000..d4940d36cd6ae5
--- /dev/null
+++ b/packages/media-utils/src/utils/get-mime-types-array.ts
@@ -0,0 +1,29 @@
+/**
+ * Browsers may use unexpected mime types, and they differ from browser to browser.
+ * This function computes a flexible array of mime types from the mime type structured provided by the server.
+ * Converts { jpg|jpeg|jpe: "image/jpeg" } into [ "image/jpeg", "image/jpg", "image/jpeg", "image/jpe" ]
+ *
+ * @param {?Object} wpMimeTypesObject Mime type object received from the server.
+ *                                    Extensions are keys separated by '|' and values are mime types associated with an extension.
+ *
+ * @return An array of mime types or null
+ */
+export function getMimeTypesArray(
+	wpMimeTypesObject?: Record< string, string > | null
+) {
+	if ( ! wpMimeTypesObject ) {
+		return null;
+	}
+	return Object.entries( wpMimeTypesObject ).flatMap(
+		( [ extensionsString, mime ] ) => {
+			const [ type ] = mime.split( '/' );
+			const extensions = extensionsString.split( '|' );
+			return [
+				mime,
+				...extensions.map(
+					( extension ) => `${ type }/${ extension }`
+				),
+			];
+		}
+	);
+}
diff --git a/packages/media-utils/src/utils/index.js b/packages/media-utils/src/utils/index.js
deleted file mode 100644
index 509b62f1e88648..00000000000000
--- a/packages/media-utils/src/utils/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { uploadMedia } from './upload-media';
diff --git a/packages/media-utils/src/utils/sideload-media.ts b/packages/media-utils/src/utils/sideload-media.ts
new file mode 100644
index 00000000000000..cff3003c7466ce
--- /dev/null
+++ b/packages/media-utils/src/utils/sideload-media.ts
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	OnChangeHandler,
+	OnErrorHandler,
+	CreateSideloadFile,
+	RestAttachment,
+} from './types';
+import { sideloadToServer } from './sideload-to-server';
+import { UploadError } from './upload-error';
+
+const noop = () => {};
+
+interface SideloadMediaArgs {
+	// Additional data to include in the request.
+	additionalData?: CreateSideloadFile;
+	// File to sideload.
+	file: File;
+	// Attachment ID.
+	attachmentId: RestAttachment[ 'id' ];
+	// Function called when an error happens.
+	onError?: OnErrorHandler;
+	// Function called each time a file or a temporary representation of the file is available.
+	onFileChange?: OnChangeHandler;
+	// Abort signal.
+	signal?: AbortSignal;
+}
+
+/**
+ * Uploads a file to the server without creating an attachment.
+ *
+ * @param $0                Parameters object passed to the function.
+ * @param $0.file           Media File to Save.
+ * @param $0.attachmentId   Parent attachment ID.
+ * @param $0.additionalData Additional data to include in the request.
+ * @param $0.signal         Abort signal.
+ * @param $0.onFileChange   Function called each time a file or a temporary representation of the file is available.
+ * @param $0.onError        Function called when an error happens.
+ */
+export async function sideloadMedia( {
+	file,
+	attachmentId,
+	additionalData = {},
+	signal,
+	onFileChange,
+	onError = noop,
+}: SideloadMediaArgs ) {
+	try {
+		const attachment = await sideloadToServer(
+			file,
+			attachmentId,
+			additionalData,
+			signal
+		);
+		onFileChange?.( [ attachment ] );
+	} catch ( error ) {
+		let message;
+		if ( error instanceof Error ) {
+			message = error.message;
+		} else {
+			message = sprintf(
+				// translators: %s: file name
+				__( 'Error while sideloading file %s to the server.' ),
+				file.name
+			);
+		}
+		onError(
+			new UploadError( {
+				code: 'GENERAL',
+				message,
+				file,
+				cause: error instanceof Error ? error : undefined,
+			} )
+		);
+	}
+}
diff --git a/packages/media-utils/src/utils/sideload-to-server.ts b/packages/media-utils/src/utils/sideload-to-server.ts
new file mode 100644
index 00000000000000..941baa769fba8d
--- /dev/null
+++ b/packages/media-utils/src/utils/sideload-to-server.ts
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import type { CreateSideloadFile, RestAttachment } from './types';
+import { flattenFormData } from './flatten-form-data';
+import { transformAttachment } from './transform-attachment';
+
+/**
+ * Uploads a file to the server without creating an attachment.
+ *
+ * @param file           Media File to Save.
+ * @param attachmentId   Parent attachment ID.
+ * @param additionalData Additional data to include in the request.
+ * @param signal         Abort signal.
+ *
+ * @return The saved attachment.
+ */
+export async function sideloadToServer(
+	file: File,
+	attachmentId: RestAttachment[ 'id' ],
+	additionalData: CreateSideloadFile = {},
+	signal?: AbortSignal
+) {
+	// Create upload payload.
+	const data = new FormData();
+	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
+	for ( const [ key, value ] of Object.entries( additionalData ) ) {
+		flattenFormData(
+			data,
+			key,
+			value as string | Record< string, string > | undefined
+		);
+	}
+
+	return transformAttachment(
+		await apiFetch< RestAttachment >( {
+			path: `/wp/v2/media/${ attachmentId }/sideload`,
+			body: data,
+			method: 'POST',
+			signal,
+		} )
+	);
+}
diff --git a/packages/media-utils/src/utils/test/flatten-form-data.ts b/packages/media-utils/src/utils/test/flatten-form-data.ts
new file mode 100644
index 00000000000000..458dfd26c8f6ed
--- /dev/null
+++ b/packages/media-utils/src/utils/test/flatten-form-data.ts
@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { flattenFormData } from '../flatten-form-data';
+
+describe( 'flattenFormData', () => {
+	it( 'should flatten nested data structure', () => {
+		const data = new FormData();
+
+		class RichTextData {
+			toString() {
+				return 'i am rich text';
+			}
+		}
+
+		const additionalData = {
+			foo: null,
+			bar: 1234,
+			meta: {
+				nested: 'foo',
+				dothis: true,
+				dothat: false,
+				supermeta: {
+					nested: 'baz',
+				},
+			},
+			customClass: new RichTextData(),
+		};
+
+		for ( const [ key, value ] of Object.entries( additionalData ) ) {
+			flattenFormData(
+				data,
+				key,
+				value as Parameters< typeof flattenFormData >[ 2 ]
+			);
+		}
+
+		const actual = Object.fromEntries( data.entries() );
+		expect( actual ).toStrictEqual( {
+			bar: '1234',
+			foo: 'null',
+			'meta[dothat]': 'false',
+			'meta[dothis]': 'true',
+			'meta[nested]': 'foo',
+			'meta[supermeta][nested]': 'baz',
+			customClass: 'i am rich text',
+		} );
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/get-mime-types-array.ts b/packages/media-utils/src/utils/test/get-mime-types-array.ts
new file mode 100644
index 00000000000000..156955373bd0da
--- /dev/null
+++ b/packages/media-utils/src/utils/test/get-mime-types-array.ts
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import { getMimeTypesArray } from '../get-mime-types-array';
+
+describe( 'getMimeTypesArray', () => {
+	it( 'should return null if it is "falsy" e.g: undefined or null', () => {
+		expect( getMimeTypesArray( null ) ).toEqual( null );
+		expect( getMimeTypesArray( undefined ) ).toEqual( null );
+	} );
+
+	it( 'should return an empty array if an empty object is passed', () => {
+		expect( getMimeTypesArray( {} ) ).toEqual( [] );
+	} );
+
+	it( 'should return the type plus a new mime type with type and subtype with the extension if a type is passed', () => {
+		expect( getMimeTypesArray( { ext: 'chicken' } ) ).toEqual( [
+			'chicken',
+			'chicken/ext',
+		] );
+	} );
+
+	it( 'should return the mime type passed and a new mime type with type and the extension as subtype', () => {
+		expect( getMimeTypesArray( { ext: 'chicken/ribs' } ) ).toEqual( [
+			'chicken/ribs',
+			'chicken/ext',
+		] );
+	} );
+
+	it( 'should return the mime type passed and an additional mime type per extension supported', () => {
+		expect( getMimeTypesArray( { 'jpg|jpeg|jpe': 'image/jpeg' } ) ).toEqual(
+			[ 'image/jpeg', 'image/jpg', 'image/jpeg', 'image/jpe' ]
+		);
+	} );
+
+	it( 'should handle multiple mime types', () => {
+		expect(
+			getMimeTypesArray( { 'ext|aaa': 'chicken/ribs', aaa: 'bbb' } )
+		).toEqual( [
+			'chicken/ribs',
+			'chicken/ext',
+			'chicken/aaa',
+			'bbb',
+			'bbb/aaa',
+		] );
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/sideload-media.ts b/packages/media-utils/src/utils/test/sideload-media.ts
new file mode 100644
index 00000000000000..818a09e8fc05f6
--- /dev/null
+++ b/packages/media-utils/src/utils/test/sideload-media.ts
@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import { sideloadMedia } from '../sideload-media';
+import { sideloadToServer } from '../sideload-to-server';
+
+jest.mock( '../sideload-to-server', () => ( {
+	sideloadToServer: jest.fn(),
+} ) );
+
+const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+describe( 'sideloadMedia', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should sideload to server', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await sideloadMedia( {
+			file: imageFile,
+			attachmentId: 1,
+			onError,
+			onFileChange,
+		} );
+
+		expect( sideloadToServer ).toHaveBeenCalled();
+		expect( onFileChange ).toHaveBeenCalled();
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/upload-error.ts b/packages/media-utils/src/utils/test/upload-error.ts
new file mode 100644
index 00000000000000..4d5f025ed8cf39
--- /dev/null
+++ b/packages/media-utils/src/utils/test/upload-error.ts
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { UploadError } from '../upload-error';
+
+describe( 'UploadError', () => {
+	it( 'holds error code and file name', () => {
+		const file = new File( [], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+
+		const error = new UploadError( {
+			code: 'some_error',
+			message: 'An error occurred',
+			file,
+		} );
+
+		expect( error ).toStrictEqual( expect.any( Error ) );
+		expect( error.code ).toBe( 'some_error' );
+		expect( error.message ).toBe( 'An error occurred' );
+		expect( error.file ).toBe( file );
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/upload-media.test.js b/packages/media-utils/src/utils/test/upload-media.test.js
deleted file mode 100644
index fa9adc9f408815..00000000000000
--- a/packages/media-utils/src/utils/test/upload-media.test.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlobURL } from '@wordpress/blob';
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import { uploadMedia, getMimeTypesArray } from '../upload-media';
-
-jest.mock( '@wordpress/blob', () => ( {
-	createBlobURL: jest.fn(),
-	revokeBlobURL: jest.fn(),
-} ) );
-jest.mock( '@wordpress/api-fetch', () => jest.fn() );
-
-const xmlFile = new window.File( [ 'fake_file' ], 'test.xml', {
-	type: 'text/xml',
-} );
-const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
-	type: 'image/jpeg',
-} );
-
-describe( 'uploadMedia', () => {
-	it( 'should do nothing on no files', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			filesList: [],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should error if allowedTypes contains a partial mime type and the validation fails', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image' ],
-			filesList: [ xmlFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'MIME_TYPE_NOT_SUPPORTED',
-			} )
-		);
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should error if allowedTypes contains a complete mime type and the validation fails', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image/gif' ],
-			filesList: [ imageFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'MIME_TYPE_NOT_SUPPORTED',
-			} )
-		);
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should work if allowedTypes contains a complete mime type and the validation succeeds', async () => {
-		createBlobURL.mockReturnValue( 'blob:fake_blob' );
-		apiFetch.mockResolvedValue( { title: { raw: 'Test' } } );
-
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image/jpeg' ],
-			filesList: [ imageFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
-	} );
-
-	it( 'should error if allowedTypes contains multiple types and the validation fails', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'video', 'image' ],
-			filesList: [ xmlFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'MIME_TYPE_NOT_SUPPORTED',
-			} )
-		);
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should work if allowedTypes contains multiple types and the validation succeeds', async () => {
-		createBlobURL.mockReturnValue( 'blob:fake_blob' );
-		apiFetch.mockResolvedValue( { title: { raw: 'Test' } } );
-
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'video', 'image' ],
-			filesList: [ imageFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).not.toHaveBeenCalled();
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
-	} );
-
-	it( 'should only fail the invalid file and still allow others to succeed when uploading multiple files', async () => {
-		createBlobURL.mockReturnValue( 'blob:fake_blob' );
-		apiFetch.mockResolvedValue( { title: { raw: 'Test' } } );
-
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image' ],
-			filesList: [ imageFile, xmlFile ],
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'MIME_TYPE_NOT_SUPPORTED',
-				file: xmlFile,
-			} )
-		);
-		expect( onFileChange ).toHaveBeenCalledTimes( 2 );
-	} );
-
-	it( 'should error if the file size is greater than the maximum', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image' ],
-			filesList: [ imageFile ],
-			maxUploadFileSize: 1,
-			onError,
-			onFileChange,
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'SIZE_ABOVE_LIMIT',
-			} )
-		);
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should call error handler with the correct error object if file type is not allowed for user', async () => {
-		const onError = jest.fn();
-		const onFileChange = jest.fn();
-		await uploadMedia( {
-			allowedTypes: [ 'image' ],
-			filesList: [ imageFile ],
-			onError,
-			wpAllowedMimeTypes: { aac: 'audio/aac' },
-		} );
-
-		expect( onError ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
-			} )
-		);
-		expect( onFileChange ).not.toHaveBeenCalled();
-	} );
-} );
-
-describe( 'getMimeTypesArray', () => {
-	it( 'should return the parameter passed if it is "falsy" e.g: undefined or null', () => {
-		expect( getMimeTypesArray( null ) ).toEqual( null );
-		expect( getMimeTypesArray( undefined ) ).toEqual( undefined );
-	} );
-
-	it( 'should return an empty array if an empty object is passed', () => {
-		expect( getMimeTypesArray( {} ) ).toEqual( [] );
-	} );
-
-	it( 'should return the type plus a new mime type with type and subtype with the extension if a type is passed', () => {
-		expect( getMimeTypesArray( { ext: 'chicken' } ) ).toEqual( [
-			'chicken',
-			'chicken/ext',
-		] );
-	} );
-
-	it( 'should return the mime type passed and a new mime type with type and the extension as subtype', () => {
-		expect( getMimeTypesArray( { ext: 'chicken/ribs' } ) ).toEqual( [
-			'chicken/ribs',
-			'chicken/ext',
-		] );
-	} );
-
-	it( 'should return the mime type passed and an additional mime type per extension supported', () => {
-		expect( getMimeTypesArray( { 'jpg|jpeg|jpe': 'image/jpeg' } ) ).toEqual(
-			[ 'image/jpeg', 'image/jpg', 'image/jpeg', 'image/jpe' ]
-		);
-	} );
-
-	it( 'should handle multiple mime types', () => {
-		expect(
-			getMimeTypesArray( { 'ext|aaa': 'chicken/ribs', aaa: 'bbb' } )
-		).toEqual( [
-			'chicken/ribs',
-			'chicken/ext',
-			'chicken/aaa',
-			'bbb',
-			'bbb/aaa',
-		] );
-	} );
-} );
diff --git a/packages/media-utils/src/utils/test/upload-media.ts b/packages/media-utils/src/utils/test/upload-media.ts
new file mode 100644
index 00000000000000..b5075255ad4c81
--- /dev/null
+++ b/packages/media-utils/src/utils/test/upload-media.ts
@@ -0,0 +1,199 @@
+/**
+ * Internal dependencies
+ */
+import { uploadMedia } from '../upload-media';
+import { UploadError } from '../upload-error';
+import { uploadToServer } from '../upload-to-server';
+
+jest.mock( '../upload-to-server', () => ( {
+	uploadToServer: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/blob', () => ( {
+	createBlobURL: jest.fn(),
+	revokeBlobURL: jest.fn(),
+} ) );
+
+const xmlFile = new window.File( [ 'fake_file' ], 'test.xml', {
+	type: 'text/xml',
+} );
+const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+describe( 'uploadMedia', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should do nothing on no files', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			filesList: [],
+			onError,
+			onFileChange,
+		} );
+
+		expect( onError ).not.toHaveBeenCalled();
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should error if allowedTypes contains a partial mime type and the validation fails', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image' ],
+			filesList: [ xmlFile ],
+			onError,
+			onFileChange,
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should error if allowedTypes contains a complete mime type and the validation fails', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image/gif' ],
+			filesList: [ imageFile ],
+			onError,
+			onFileChange,
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.jpeg: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should work if allowedTypes contains a complete mime type and the validation succeeds', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image/jpeg' ],
+			filesList: [ imageFile ],
+			onError,
+			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
+		} );
+
+		expect( onError ).not.toHaveBeenCalled();
+		expect( uploadToServer ).toHaveBeenCalled();
+	} );
+
+	it( 'should error if allowedTypes contains multiple types and the validation fails', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'video', 'image' ],
+			filesList: [ xmlFile ],
+			onError,
+			onFileChange,
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should work if allowedTypes contains multiple types and the validation succeeds', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'video', 'image' ],
+			filesList: [ imageFile ],
+			onError,
+			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg', mp4: 'video/mp4' },
+		} );
+
+		expect( onError ).not.toHaveBeenCalled();
+		expect( uploadToServer ).toHaveBeenCalled();
+	} );
+
+	it( 'should only fail the invalid file and still allow others to succeed when uploading multiple files', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image' ],
+			filesList: [ imageFile, xmlFile ],
+			onError,
+			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, you are not allowed to upload this file type.',
+				file: xmlFile,
+			} )
+		);
+		expect( uploadToServer ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should error if the file size is greater than the maximum', async () => {
+		const onError = jest.fn();
+		const onFileChange = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image' ],
+			filesList: [ imageFile ],
+			maxUploadFileSize: 1,
+			onError,
+			onFileChange,
+			wpAllowedMimeTypes: { jpeg: 'image/jpeg' },
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'SIZE_ABOVE_LIMIT',
+				message:
+					'test.jpeg: This file exceeds the maximum upload size for this site.',
+				file: imageFile,
+			} )
+		);
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should call error handler with the correct error object if file type is not allowed for user', async () => {
+		const onError = jest.fn();
+		await uploadMedia( {
+			allowedTypes: [ 'image' ],
+			filesList: [ imageFile ],
+			onError,
+			wpAllowedMimeTypes: { aac: 'audio/aac' },
+		} );
+
+		expect( onError ).toHaveBeenCalledWith(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
+				message:
+					'test.jpeg: Sorry, you are not allowed to upload this file type.',
+				file: imageFile,
+			} )
+		);
+		expect( uploadToServer ).not.toHaveBeenCalled();
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/validate-file-size.ts b/packages/media-utils/src/utils/test/validate-file-size.ts
new file mode 100644
index 00000000000000..31d6af0e7e4a55
--- /dev/null
+++ b/packages/media-utils/src/utils/test/validate-file-size.ts
@@ -0,0 +1,70 @@
+/**
+ * Internal dependencies
+ */
+import { validateFileSize } from '../validate-file-size';
+import { UploadError } from '../upload-error';
+
+const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+const emptyFile = new window.File( [], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+describe( 'validateFileSize', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should error if the file is empty', () => {
+		expect( () => {
+			validateFileSize( emptyFile );
+		} ).toThrow(
+			new UploadError( {
+				code: 'EMPTY_FILE',
+				message: 'test.jpeg: This file is empty.',
+				file: imageFile,
+			} )
+		);
+	} );
+
+	it( 'should error if the file is is greater than the maximum', () => {
+		expect( () => {
+			validateFileSize( imageFile, 2 );
+		} ).toThrow(
+			new UploadError( {
+				code: 'SIZE_ABOVE_LIMIT',
+				message:
+					'test.jpeg: This file exceeds the maximum upload size for this site.',
+				file: imageFile,
+			} )
+		);
+	} );
+
+	it( 'should not error if the file is below the limit', () => {
+		expect( () => {
+			validateFileSize( imageFile, 100 );
+		} ).not.toThrow(
+			new UploadError( {
+				code: 'SIZE_ABOVE_LIMIT',
+				message:
+					'test.jpeg: This file exceeds the maximum upload size for this site.',
+				file: imageFile,
+			} )
+		);
+	} );
+
+	it( 'should not error if there is no limit', () => {
+		expect( () => {
+			validateFileSize( imageFile );
+		} ).not.toThrow(
+			new UploadError( {
+				code: 'SIZE_ABOVE_LIMIT',
+				message:
+					'test.jpeg: This file exceeds the maximum upload size for this site.',
+				file: imageFile,
+			} )
+		);
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/validate-mime-type-for-user.ts b/packages/media-utils/src/utils/test/validate-mime-type-for-user.ts
new file mode 100644
index 00000000000000..d2566566862142
--- /dev/null
+++ b/packages/media-utils/src/utils/test/validate-mime-type-for-user.ts
@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { validateMimeTypeForUser } from '../validate-mime-type-for-user';
+import { UploadError } from '../upload-error';
+
+const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+describe( 'validateMimeTypeForUser', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should not error if  wpAllowedMimeTypes is null or missing', async () => {
+		expect( () => {
+			validateMimeTypeForUser( imageFile );
+		} ).not.toThrow();
+		expect( () => {
+			validateMimeTypeForUser( imageFile, null );
+		} ).not.toThrow();
+	} );
+
+	it( 'should error if file type is not allowed for user', async () => {
+		expect( () => {
+			validateMimeTypeForUser( imageFile, { aac: 'audio/aac' } );
+		} ).toThrow(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
+				message:
+					'test.jpeg: Sorry, you are not allowed to upload this file type.',
+				file: imageFile,
+			} )
+		);
+	} );
+} );
diff --git a/packages/media-utils/src/utils/test/validate-mime-type.ts b/packages/media-utils/src/utils/test/validate-mime-type.ts
new file mode 100644
index 00000000000000..a83cdcefe5f99a
--- /dev/null
+++ b/packages/media-utils/src/utils/test/validate-mime-type.ts
@@ -0,0 +1,57 @@
+/**
+ * Internal dependencies
+ */
+import { validateMimeType } from '../validate-mime-type';
+import { UploadError } from '../upload-error';
+
+const xmlFile = new window.File( [ 'fake_file' ], 'test.xml', {
+	type: 'text/xml',
+} );
+const imageFile = new window.File( [ 'fake_file' ], 'test.jpeg', {
+	type: 'image/jpeg',
+} );
+
+describe( 'validateMimeType', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should error if allowedTypes contains a partial mime type and the validation fails', async () => {
+		expect( () => {
+			validateMimeType( xmlFile, [ 'image' ] );
+		} ).toThrow(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+	} );
+
+	it( 'should error if allowedTypes contains a complete mime type and the validation fails', async () => {
+		expect( () => {
+			validateMimeType( imageFile, [ 'image/gif' ] );
+		} ).toThrow(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.jpeg: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+	} );
+
+	it( 'should error if allowedTypes contains multiple types and the validation fails', async () => {
+		expect( () => {
+			validateMimeType( xmlFile, [ 'video', 'image' ] );
+		} ).toThrow(
+			new UploadError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message:
+					'test.xml: Sorry, this file type is not supported here.',
+				file: xmlFile,
+			} )
+		);
+	} );
+} );
diff --git a/packages/media-utils/src/utils/transform-attachment.ts b/packages/media-utils/src/utils/transform-attachment.ts
new file mode 100644
index 00000000000000..a97287872f24af
--- /dev/null
+++ b/packages/media-utils/src/utils/transform-attachment.ts
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import type { Attachment, RestAttachment } from './types';
+
+/**
+ * Transforms an attachment object from the REST API shape into the shape expected by the block editor and other consumers.
+ *
+ * @param attachment REST API attachment object.
+ */
+export function transformAttachment( attachment: RestAttachment ): Attachment {
+	// eslint-disable-next-line camelcase
+	const { alt_text, source_url, ...savedMediaProps } = attachment;
+	return {
+		...savedMediaProps,
+		alt: attachment.alt_text,
+		caption: attachment.caption?.raw ?? '',
+		title: attachment.title.raw,
+		url: attachment.source_url,
+		poster:
+			attachment._embedded?.[ 'wp:featuredmedia' ]?.[ 0 ]?.source_url ||
+			undefined,
+	};
+}
diff --git a/packages/media-utils/src/utils/types.ts b/packages/media-utils/src/utils/types.ts
new file mode 100644
index 00000000000000..c91d4c67cfc466
--- /dev/null
+++ b/packages/media-utils/src/utils/types.ts
@@ -0,0 +1,217 @@
+/**
+ * A media attachment object in a REST API context.
+ *
+ * Simplified version of what's defined in the wp-types package.
+ *
+ * @see https://www.npmjs.com/package/wp-types
+ */
+interface WP_REST_API_Attachment {
+	/**
+	 * Unique identifier for the attachment.
+	 */
+	id: number;
+	/**
+	 * The ID of the featured media for the post.
+	 */
+	featured_media: number;
+	/**
+	 * URL to the attachment.
+	 */
+	link: string;
+	/**
+	 * The date the attachment was published, in the site's timezone.
+	 */
+	date: string;
+	/**
+	 * The date the attachment was published, as GMT.
+	 */
+	date_gmt: string;
+	/**
+	 * The date the attachment was last modified, in the site's timezone.
+	 */
+	modified: string;
+	/**
+	 * The date the attachment was last modified, as GMT.
+	 */
+	modified_gmt: string;
+	/**
+	 * An alphanumeric identifier for the attachment unique to its type.
+	 */
+	slug: string;
+	/**
+	 * A named status for the attachment.
+	 */
+	status: string;
+	/**
+	 * Type of Post for the attachment.
+	 */
+	type: 'attachment';
+	/**
+	 * Alternative text to display when attachment is not displayed.
+	 */
+	alt_text: string;
+	/**
+	 * The attachment caption.
+	 */
+	caption: {
+		/**
+		 * Caption for the attachment, as it exists in the database. Only present when using the 'edit' context.
+		 */
+		raw?: string;
+		/**
+		 * HTML caption for the attachment, transformed for display.
+		 */
+		rendered: string;
+	};
+	/**
+	 * The attachment description.
+	 */
+	description: {
+		/**
+		 * Description for the attachment, as it exists in the database. Only present when using the 'edit' context.
+		 */
+		raw?: string;
+		/**
+		 * HTML description for the attachment, transformed for display.
+		 */
+		rendered: string;
+	};
+	/**
+	 * Attachment type.
+	 */
+	media_type: 'image' | 'file';
+	/**
+	 * The attachment MIME type.
+	 */
+	mime_type: string;
+	/**
+	 * Details about the media file, specific to its type.
+	 */
+	media_details: {
+		[ k: string ]: unknown;
+	};
+	/**
+	 * The ID for the associated post of the attachment.
+	 */
+	post: number | null;
+	/**
+	 * URL to the original attachment file.
+	 */
+	source_url: string;
+	/**
+	 * List of the missing image sizes of the attachment.  Only present when using the 'edit' context.
+	 */
+	missing_image_sizes?: string[];
+	/**
+	 * Permalink template for the attachment. Only present when using the 'edit' context and the post type is public.
+	 */
+	permalink_template?: string;
+	/**
+	 * Slug automatically generated from the attachment title. Only present when using the 'edit' context and the post type is public.
+	 */
+	generated_slug?: string;
+	/**
+	 * An array of the class names for the post container element.
+	 */
+	class_list: string[];
+	/**
+	 * The title for the attachment.
+	 */
+	title: {
+		/**
+		 * Title for the attachment, as it exists in the database. Only present when using the 'edit' context.
+		 */
+		raw?: string;
+		/**
+		 * HTML title for the attachment, transformed for display.
+		 */
+		rendered: string;
+	};
+	/**
+	 * The ID for the author of the attachment.
+	 */
+	author: number;
+	/**
+	 * Whether or not comments are open on the attachment.
+	 */
+	comment_status: string;
+	/**
+	 * Whether or not the attachment can be pinged.
+	 */
+	ping_status: string;
+	/**
+	 * Meta fields.
+	 */
+	meta:
+		| []
+		| {
+				[ k: string ]: unknown;
+		  };
+	/**
+	 * The theme file to use to display the attachment.
+	 */
+	template: string;
+	_links: {
+		[ k: string ]: {
+			href: string;
+			embeddable?: boolean;
+			[ k: string ]: unknown;
+		}[];
+	};
+	/**
+	 * The embedded representation of relations. Only present when the '_embed' query parameter is set.
+	 */
+	_embedded?: {
+		/**
+		 * The author of the post.
+		 */
+		author: unknown[];
+		/**
+		 * The featured image post.
+		 */
+		'wp:featuredmedia'?: WP_REST_API_Attachment[];
+		[ k: string ]: unknown;
+	};
+	[ k: string ]: unknown;
+}
+
+/**
+ * REST API attachment object with additional fields added by this project.
+ */
+export interface RestAttachment extends WP_REST_API_Attachment {}
+
+type BetterOmit< T, K extends PropertyKey > = {
+	[ P in keyof T as P extends K ? never : P ]: T[ P ];
+};
+
+/**
+ * Transformed attachment object.
+ */
+export type Attachment = BetterOmit<
+	RestAttachment,
+	'alt_text' | 'source_url' | 'caption' | 'title'
+> & {
+	alt: WP_REST_API_Attachment[ 'alt_text' ];
+	caption: WP_REST_API_Attachment[ 'caption' ][ 'raw' ] & string;
+	title: WP_REST_API_Attachment[ 'title' ][ 'raw' ];
+	url: WP_REST_API_Attachment[ 'source_url' ];
+	poster?: WP_REST_API_Attachment[ 'source_url' ];
+};
+
+export type OnChangeHandler = ( attachments: Partial< Attachment >[] ) => void;
+export type OnSuccessHandler = ( attachments: Partial< Attachment >[] ) => void;
+export type OnErrorHandler = ( error: Error ) => void;
+
+export type CreateRestAttachment = Partial< RestAttachment >;
+
+export type AdditionalData = BetterOmit< CreateRestAttachment, 'meta' >;
+
+export interface CreateSideloadFile {
+	image_size?: string;
+	upload_request?: string;
+}
+
+export interface SideloadAdditionalData {
+	post: RestAttachment[ 'id' ];
+	image_size?: string;
+}
diff --git a/packages/media-utils/src/utils/upload-error.ts b/packages/media-utils/src/utils/upload-error.ts
new file mode 100644
index 00000000000000..d712e9dcdb6966
--- /dev/null
+++ b/packages/media-utils/src/utils/upload-error.ts
@@ -0,0 +1,26 @@
+interface UploadErrorArgs {
+	code: string;
+	message: string;
+	file: File;
+	cause?: Error;
+}
+
+/**
+ * MediaError class.
+ *
+ * Small wrapper around the `Error` class
+ * to hold an error code and a reference to a file object.
+ */
+export class UploadError extends Error {
+	code: string;
+	file: File;
+
+	constructor( { code, message, file, cause }: UploadErrorArgs ) {
+		super( message, { cause } );
+
+		Object.setPrototypeOf( this, new.target.prototype );
+
+		this.code = code;
+		this.file = file;
+	}
+}
diff --git a/packages/media-utils/src/utils/upload-media.js b/packages/media-utils/src/utils/upload-media.js
deleted file mode 100644
index e3c9b95d5c25cd..00000000000000
--- a/packages/media-utils/src/utils/upload-media.js
+++ /dev/null
@@ -1,232 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-import { createBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { __, sprintf } from '@wordpress/i18n';
-
-const noop = () => {};
-
-/**
- * Browsers may use unexpected mime types, and they differ from browser to browser.
- * This function computes a flexible array of mime types from the mime type structured provided by the server.
- * Converts { jpg|jpeg|jpe: "image/jpeg" } into [ "image/jpeg", "image/jpg", "image/jpeg", "image/jpe" ]
- * The computation of this array instead of directly using the object,
- * solves the problem in chrome where mp3 files have audio/mp3 as mime type instead of audio/mpeg.
- * https://bugs.chromium.org/p/chromium/issues/detail?id=227004
- *
- * @param {?Object} wpMimeTypesObject Mime type object received from the server.
- *                                    Extensions are keys separated by '|' and values are mime types associated with an extension.
- *
- * @return {?Array} An array of mime types or the parameter passed if it was "falsy".
- */
-export function getMimeTypesArray( wpMimeTypesObject ) {
-	if ( ! wpMimeTypesObject ) {
-		return wpMimeTypesObject;
-	}
-	return Object.entries( wpMimeTypesObject )
-		.map( ( [ extensionsString, mime ] ) => {
-			const [ type ] = mime.split( '/' );
-			const extensions = extensionsString.split( '|' );
-			return [
-				mime,
-				...extensions.map(
-					( extension ) => `${ type }/${ extension }`
-				),
-			];
-		} )
-		.flat();
-}
-
-/**
- *	Media Upload is used by audio, image, gallery, video, and file blocks to
- *	handle uploading a media file when a file upload button is activated.
- *
- *	TODO: future enhancement to add an upload indicator.
- *
- * @param {Object}   $0                    Parameters object passed to the function.
- * @param {?Array}   $0.allowedTypes       Array with the types of media that can be uploaded, if unset all types are allowed.
- * @param {?Object}  $0.additionalData     Additional data to include in the request.
- * @param {Array}    $0.filesList          List of files.
- * @param {?number}  $0.maxUploadFileSize  Maximum upload size in bytes allowed for the site.
- * @param {Function} $0.onError            Function called when an error happens.
- * @param {Function} $0.onFileChange       Function called each time a file or a temporary representation of the file is available.
- * @param {?Object}  $0.wpAllowedMimeTypes List of allowed mime types and file extensions.
- */
-export async function uploadMedia( {
-	allowedTypes,
-	additionalData = {},
-	filesList,
-	maxUploadFileSize,
-	onError = noop,
-	onFileChange,
-	wpAllowedMimeTypes = null,
-} ) {
-	// Cast filesList to array.
-	const files = [ ...filesList ];
-
-	const filesSet = [];
-	const setAndUpdateFiles = ( idx, value ) => {
-		revokeBlobURL( filesSet[ idx ]?.url );
-		filesSet[ idx ] = value;
-		onFileChange( filesSet.filter( Boolean ) );
-	};
-
-	// Allowed type specified by consumer.
-	const isAllowedType = ( fileType ) => {
-		if ( ! allowedTypes ) {
-			return true;
-		}
-		return allowedTypes.some( ( allowedType ) => {
-			// If a complete mimetype is specified verify if it matches exactly the mime type of the file.
-			if ( allowedType.includes( '/' ) ) {
-				return allowedType === fileType;
-			}
-			// Otherwise a general mime type is used and we should verify if the file mimetype starts with it.
-			return fileType.startsWith( `${ allowedType }/` );
-		} );
-	};
-
-	// Allowed types for the current WP_User.
-	const allowedMimeTypesForUser = getMimeTypesArray( wpAllowedMimeTypes );
-	const isAllowedMimeTypeForUser = ( fileType ) => {
-		return allowedMimeTypesForUser.includes( fileType );
-	};
-
-	const validFiles = [];
-
-	for ( const mediaFile of files ) {
-		// Verify if user is allowed to upload this mime type.
-		// Defer to the server when type not detected.
-		if (
-			allowedMimeTypesForUser &&
-			mediaFile.type &&
-			! isAllowedMimeTypeForUser( mediaFile.type )
-		) {
-			onError( {
-				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
-				message: sprintf(
-					// translators: %s: file name.
-					__(
-						'%s: Sorry, you are not allowed to upload this file type.'
-					),
-					mediaFile.name
-				),
-				file: mediaFile,
-			} );
-			continue;
-		}
-
-		// Check if the block supports this mime type.
-		// Defer to the server when type not detected.
-		if ( mediaFile.type && ! isAllowedType( mediaFile.type ) ) {
-			onError( {
-				code: 'MIME_TYPE_NOT_SUPPORTED',
-				message: sprintf(
-					// translators: %s: file name.
-					__( '%s: Sorry, this file type is not supported here.' ),
-					mediaFile.name
-				),
-				file: mediaFile,
-			} );
-			continue;
-		}
-
-		// Verify if file is greater than the maximum file upload size allowed for the site.
-		if ( maxUploadFileSize && mediaFile.size > maxUploadFileSize ) {
-			onError( {
-				code: 'SIZE_ABOVE_LIMIT',
-				message: sprintf(
-					// translators: %s: file name.
-					__(
-						'%s: This file exceeds the maximum upload size for this site.'
-					),
-					mediaFile.name
-				),
-				file: mediaFile,
-			} );
-			continue;
-		}
-
-		// Don't allow empty files to be uploaded.
-		if ( mediaFile.size <= 0 ) {
-			onError( {
-				code: 'EMPTY_FILE',
-				message: sprintf(
-					// translators: %s: file name.
-					__( '%s: This file is empty.' ),
-					mediaFile.name
-				),
-				file: mediaFile,
-			} );
-			continue;
-		}
-
-		validFiles.push( mediaFile );
-
-		// Set temporary URL to create placeholder media file, this is replaced
-		// with final file from media gallery when upload is `done` below.
-		filesSet.push( { url: createBlobURL( mediaFile ) } );
-		onFileChange( filesSet );
-	}
-
-	for ( let idx = 0; idx < validFiles.length; ++idx ) {
-		const mediaFile = validFiles[ idx ];
-		try {
-			const savedMedia = await createMediaFromFile(
-				mediaFile,
-				additionalData
-			);
-			// eslint-disable-next-line camelcase
-			const { alt_text, source_url, ...savedMediaProps } = savedMedia;
-			const mediaObject = {
-				...savedMediaProps,
-				alt: savedMedia.alt_text,
-				caption: savedMedia.caption?.raw ?? '',
-				title: savedMedia.title.raw,
-				url: savedMedia.source_url,
-			};
-			setAndUpdateFiles( idx, mediaObject );
-		} catch ( error ) {
-			// Reset to empty on failure.
-			setAndUpdateFiles( idx, null );
-			let message;
-			if ( error.message ) {
-				message = error.message;
-			} else {
-				message = sprintf(
-					// translators: %s: file name
-					__( 'Error while uploading file %s to the media library.' ),
-					mediaFile.name
-				);
-			}
-			onError( {
-				code: 'GENERAL',
-				message,
-				file: mediaFile,
-			} );
-		}
-	}
-}
-
-/**
- * @param {File}    file           Media File to Save.
- * @param {?Object} additionalData Additional data to include in the request.
- *
- * @return {Promise} Media Object Promise.
- */
-function createMediaFromFile( file, additionalData ) {
-	// Create upload payload.
-	const data = new window.FormData();
-	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
-	if ( additionalData ) {
-		Object.entries( additionalData ).forEach( ( [ key, value ] ) =>
-			data.append( key, value )
-		);
-	}
-	return apiFetch( {
-		path: '/wp/v2/media',
-		body: data,
-		method: 'POST',
-	} );
-}
diff --git a/packages/media-utils/src/utils/upload-media.ts b/packages/media-utils/src/utils/upload-media.ts
new file mode 100644
index 00000000000000..1bc861cfb3b607
--- /dev/null
+++ b/packages/media-utils/src/utils/upload-media.ts
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { createBlobURL, revokeBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	AdditionalData,
+	Attachment,
+	OnChangeHandler,
+	OnErrorHandler,
+	OnSuccessHandler,
+} from './types';
+import { uploadToServer } from './upload-to-server';
+import { validateMimeType } from './validate-mime-type';
+import { validateMimeTypeForUser } from './validate-mime-type-for-user';
+import { validateFileSize } from './validate-file-size';
+import { UploadError } from './upload-error';
+
+interface UploadMediaArgs {
+	// Additional data to include in the request.
+	additionalData?: AdditionalData;
+	// Array with the types of media that can be uploaded, if unset all types are allowed.
+	allowedTypes?: string[];
+	// List of files.
+	filesList: File[];
+	// Maximum upload size in bytes allowed for the site.
+	maxUploadFileSize?: number;
+	// Function called when an error happens.
+	onError?: OnErrorHandler;
+	// Function called each time a file or a temporary representation of the file is available.
+	onFileChange?: OnChangeHandler;
+	// Function called once a file has completely finished uploading, including thumbnails.
+	onSuccess?: OnSuccessHandler;
+	// List of allowed mime types and file extensions.
+	wpAllowedMimeTypes?: Record< string, string > | null;
+	// Abort signal.
+	signal?: AbortSignal;
+}
+
+/**
+ * Upload a media file when the file upload button is activated
+ * or when adding a file to the editor via drag & drop.
+ *
+ * @param $0                    Parameters object passed to the function.
+ * @param $0.allowedTypes       Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param $0.additionalData     Additional data to include in the request.
+ * @param $0.filesList          List of files.
+ * @param $0.maxUploadFileSize  Maximum upload size in bytes allowed for the site.
+ * @param $0.onError            Function called when an error happens.
+ * @param $0.onFileChange       Function called each time a file or a temporary representation of the file is available.
+ * @param $0.wpAllowedMimeTypes List of allowed mime types and file extensions.
+ * @param $0.signal             Abort signal.
+ */
+export function uploadMedia( {
+	wpAllowedMimeTypes,
+	allowedTypes,
+	additionalData = {},
+	filesList,
+	maxUploadFileSize,
+	onError,
+	onFileChange,
+	signal,
+}: UploadMediaArgs ) {
+	const validFiles = [];
+
+	const filesSet: Array< Partial< Attachment > | null > = [];
+	const setAndUpdateFiles = ( index: number, value: Attachment | null ) => {
+		if ( filesSet[ index ]?.url ) {
+			revokeBlobURL( filesSet[ index ].url );
+		}
+		filesSet[ index ] = value;
+		onFileChange?.(
+			filesSet.filter( ( attachment ) => attachment !== null )
+		);
+	};
+
+	for ( const mediaFile of filesList ) {
+		// Verify if user is allowed to upload this mime type.
+		// Defer to the server when type not detected.
+		try {
+			validateMimeTypeForUser( mediaFile, wpAllowedMimeTypes );
+		} catch ( error: unknown ) {
+			onError?.( error as Error );
+			continue;
+		}
+
+		// Check if the caller (e.g. a block) supports this mime type.
+		// Defer to the server when type not detected.
+		try {
+			validateMimeType( mediaFile, allowedTypes );
+		} catch ( error: unknown ) {
+			onError?.( error as Error );
+			continue;
+		}
+
+		// Verify if file is greater than the maximum file upload size allowed for the site.
+		try {
+			validateFileSize( mediaFile, maxUploadFileSize );
+		} catch ( error: unknown ) {
+			onError?.( error as Error );
+			continue;
+		}
+
+		validFiles.push( mediaFile );
+
+		// Set temporary URL to create placeholder media file, this is replaced
+		// with final file from media gallery when upload is `done` below.
+		filesSet.push( { url: createBlobURL( mediaFile ) } );
+		onFileChange?.( filesSet as Array< Partial< Attachment > > );
+	}
+
+	validFiles.map( async ( file, index ) => {
+		try {
+			const attachment = await uploadToServer(
+				file,
+				additionalData,
+				signal
+			);
+			setAndUpdateFiles( index, attachment );
+		} catch ( error ) {
+			// Reset to empty on failure.
+			setAndUpdateFiles( index, null );
+
+			let message;
+			if ( error instanceof Error ) {
+				message = error.message;
+			} else {
+				message = sprintf(
+					// translators: %s: file name
+					__( 'Error while uploading file %s to the media library.' ),
+					file.name
+				);
+			}
+
+			onError?.(
+				new UploadError( {
+					code: 'GENERAL',
+					message,
+					file,
+					cause: error instanceof Error ? error : undefined,
+				} )
+			);
+		}
+	} );
+}
diff --git a/packages/media-utils/src/utils/upload-to-server.ts b/packages/media-utils/src/utils/upload-to-server.ts
new file mode 100644
index 00000000000000..7aa4243d5ccfd4
--- /dev/null
+++ b/packages/media-utils/src/utils/upload-to-server.ts
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import { flattenFormData } from './flatten-form-data';
+import { transformAttachment } from './transform-attachment';
+import type { CreateRestAttachment, RestAttachment } from './types';
+
+export async function uploadToServer(
+	file: File,
+	additionalData: CreateRestAttachment = {},
+	signal?: AbortSignal
+) {
+	// Create upload payload.
+	const data = new FormData();
+	data.append( 'file', file, file.name || file.type.replace( '/', '.' ) );
+	for ( const [ key, value ] of Object.entries( additionalData ) ) {
+		flattenFormData(
+			data,
+			key,
+			value as string | Record< string, string > | undefined
+		);
+	}
+
+	return transformAttachment(
+		await apiFetch< RestAttachment >( {
+			// This allows the video block to directly get a video's poster image.
+			path: '/wp/v2/media?_embed=wp:featuredmedia',
+			body: data,
+			method: 'POST',
+			signal,
+		} )
+	);
+}
diff --git a/packages/media-utils/src/utils/validate-file-size.ts b/packages/media-utils/src/utils/validate-file-size.ts
new file mode 100644
index 00000000000000..cc34462b268dda
--- /dev/null
+++ b/packages/media-utils/src/utils/validate-file-size.ts
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { UploadError } from './upload-error';
+
+/**
+ * Verifies whether the file is within the file upload size limits for the site.
+ *
+ * @param file              File object.
+ * @param maxUploadFileSize Maximum upload size in bytes allowed for the site.
+ */
+export function validateFileSize( file: File, maxUploadFileSize?: number ) {
+	// Don't allow empty files to be uploaded.
+	if ( file.size <= 0 ) {
+		throw new UploadError( {
+			code: 'EMPTY_FILE',
+			message: sprintf(
+				// translators: %s: file name.
+				__( '%s: This file is empty.' ),
+				file.name
+			),
+			file,
+		} );
+	}
+
+	if ( maxUploadFileSize && file.size > maxUploadFileSize ) {
+		throw new UploadError( {
+			code: 'SIZE_ABOVE_LIMIT',
+			message: sprintf(
+				// translators: %s: file name.
+				__(
+					'%s: This file exceeds the maximum upload size for this site.'
+				),
+				file.name
+			),
+			file,
+		} );
+	}
+}
diff --git a/packages/media-utils/src/utils/validate-mime-type-for-user.ts b/packages/media-utils/src/utils/validate-mime-type-for-user.ts
new file mode 100644
index 00000000000000..858c583561978e
--- /dev/null
+++ b/packages/media-utils/src/utils/validate-mime-type-for-user.ts
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { UploadError } from './upload-error';
+import { getMimeTypesArray } from './get-mime-types-array';
+
+/**
+ * Verifies if the user is allowed to upload this mime type.
+ *
+ * @param file               File object.
+ * @param wpAllowedMimeTypes List of allowed mime types and file extensions.
+ */
+export function validateMimeTypeForUser(
+	file: File,
+	wpAllowedMimeTypes?: Record< string, string > | null
+) {
+	// Allowed types for the current WP_User.
+	const allowedMimeTypesForUser = getMimeTypesArray( wpAllowedMimeTypes );
+
+	if ( ! allowedMimeTypesForUser ) {
+		return;
+	}
+
+	const isAllowedMimeTypeForUser = allowedMimeTypesForUser.includes(
+		file.type
+	);
+
+	if ( file.type && ! isAllowedMimeTypeForUser ) {
+		throw new UploadError( {
+			code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
+			message: sprintf(
+				// translators: %s: file name.
+				__(
+					'%s: Sorry, you are not allowed to upload this file type.'
+				),
+				file.name
+			),
+			file,
+		} );
+	}
+}
diff --git a/packages/media-utils/src/utils/validate-mime-type.ts b/packages/media-utils/src/utils/validate-mime-type.ts
new file mode 100644
index 00000000000000..2d99455d7b60f1
--- /dev/null
+++ b/packages/media-utils/src/utils/validate-mime-type.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { UploadError } from './upload-error';
+
+/**
+ * Verifies if the caller (e.g. a block) supports this mime type.
+ *
+ * @param file         File object.
+ * @param allowedTypes List of allowed mime types.
+ */
+export function validateMimeType( file: File, allowedTypes?: string[] ) {
+	if ( ! allowedTypes ) {
+		return;
+	}
+
+	// Allowed type specified by consumer.
+	const isAllowedType = allowedTypes.some( ( allowedType ) => {
+		// If a complete mimetype is specified verify if it matches exactly the mime type of the file.
+		if ( allowedType.includes( '/' ) ) {
+			return allowedType === file.type;
+		}
+		// Otherwise a general mime type is used, and we should verify if the file mimetype starts with it.
+		return file.type.startsWith( `${ allowedType }/` );
+	} );
+
+	if ( file.type && ! isAllowedType ) {
+		throw new UploadError( {
+			code: 'MIME_TYPE_NOT_SUPPORTED',
+			message: sprintf(
+				// translators: %s: file name.
+				__( '%s: Sorry, this file type is not supported here.' ),
+				file.name
+			),
+			file,
+		} );
+	}
+}
diff --git a/packages/media-utils/tsconfig.json b/packages/media-utils/tsconfig.json
new file mode 100644
index 00000000000000..ca3e93c2dee668
--- /dev/null
+++ b/packages/media-utils/tsconfig.json
@@ -0,0 +1,18 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ],
+		"checkJs": false
+	},
+	"include": [ "src/**/*" ],
+	"references": [
+		{ "path": "../api-fetch" },
+		{ "path": "../blob" },
+		{ "path": "../element" },
+		{ "path": "../i18n" },
+		{ "path": "../private-apis" }
+	]
+}
diff --git a/packages/notices/.npmrc b/packages/notices/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/notices/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index c32f3a83337531..68c4ef7f85ab5d 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,119 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.26.0 (2024-05-16)
+
+## 4.25.0 (2024-05-02)
+
+## 4.24.0 (2024-04-19)
+
+## 4.23.0 (2024-04-03)
+
+## 4.22.0 (2024-03-21)
+
+## 4.21.0 (2024-03-06)
+
+## 4.20.0 (2024-02-21)
+
+## 4.19.0 (2024-02-09)
+
+## 4.18.0 (2024-01-24)
+
+## 4.17.0 (2024-01-10)
+
+## 4.16.0 (2023-12-13)
+
+## 4.15.0 (2023-11-29)
+
+## 4.14.0 (2023-11-16)
+
+## 4.13.0 (2023-11-02)
+
+## 4.12.0 (2023-10-18)
+
+## 4.11.0 (2023-10-05)
+
+## 4.10.0 (2023-09-20)
+
+## 4.9.0 (2023-08-31)
+
+## 4.8.0 (2023-08-16)
+
+## 4.7.0 (2023-08-10)
+
+## 4.6.0 (2023-07-20)
+
+## 4.5.0 (2023-07-05)
+
+## 4.4.0 (2023-06-23)
+
+## 4.3.0 (2023-06-07)
+
+### New Features
+
+-   Add a new action `removeNotices` which allows bulk removal of notices by their IDs. ([#39940](https://github.com/WordPress/gutenberg/pull/39940))
+-   Add a new action `removeAllNotices` which removes all notices from a given context. ([#44059](https://github.com/WordPress/gutenberg/pull/44059))
+
+## 4.2.0 (2023-05-24)
+
+## 4.1.0 (2023-05-10)
+
+## 4.0.0 (2023-04-26)
+
+### Breaking Changes
+
+-   Publish Typescript build types to npm. ([#49650](https://github.com/WordPress/gutenberg/pull/49650))
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -57,13 +170,13 @@
 
 ## 2.12.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the notices namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
 ## 2.0.0 (2020-02-10)
 
-### Breaking Change
+### Breaking Changes
 
 -   A notices message is no longer spoken as a result of notice creation, but rather by its display in the interface by its corresponding [`Notice` component](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/notice).
 
@@ -79,7 +192,7 @@
 
 ## 1.1.0 (2018-11-20)
 
-### New Feature
+### New Features
 
 -   New option `speak` enables control as to whether the notice content is announced to screen readers (defaults to `true`)
 
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 492a94a1a2a411..7f0e0dc71532c1 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "3.22.0",
+	"version": "5.13.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,18 +19,21 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/data": "file:../data"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/data": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js
index 1fbc1b2f0dac0a..fb1c4243073511 100644
--- a/packages/notices/src/store/actions.js
+++ b/packages/notices/src/store/actions.js
@@ -11,7 +11,6 @@ import { DEFAULT_CONTEXT, DEFAULT_STATUS } from './constants';
  *                               browser navigation.
  * @property {?Function} onClick Optional function to invoke when action is
  *                               triggered by user.
- *
  */
 
 let uniqueId = 0;
@@ -19,7 +18,7 @@ let uniqueId = 0;
 /**
  * Returns an action object used in signalling that a notice is to be created.
  *
- * @param {string}                [status='info']              Notice status.
+ * @param {string|undefined}      status                       Notice status ("info" if undefined is passed).
  * @param {string}                content                      Notice message.
  * @param {Object}                [options]                    Notice options.
  * @param {string}                [options.context='global']   Context under which to
@@ -82,7 +81,7 @@ export function createNotice( status = DEFAULT_STATUS, content, options = {} ) {
 	} = options;
 
 	// The supported value shape of content is currently limited to plain text
-	// strings. To avoid setting expectation that e.g. a WPElement could be
+	// strings. To avoid setting expectation that e.g. a React Element could be
 	// supported, cast to a string.
 	content = String( content );
 
@@ -313,3 +312,106 @@ export function removeNotice( id, context = DEFAULT_CONTEXT ) {
 		context,
 	};
 }
+
+/**
+ * Removes all notices from a given context. Defaults to the default context.
+ *
+ * @param {string} noticeType The context to remove all notices from.
+ * @param {string} context    The context to remove all notices from.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { useDispatch, useSelect } from '@wordpress/data';
+ * import { store as noticesStore } from '@wordpress/notices';
+ * import { Button } from '@wordpress/components';
+ *
+ * export const ExampleComponent = () => {
+ * 	const notices = useSelect( ( select ) =>
+ * 		select( noticesStore ).getNotices()
+ * 	);
+ * 	const { removeAllNotices } = useDispatch( noticesStore );
+ * 	return (
+ * 		<>
+ * 			<ul>
+ * 				{ notices.map( ( notice ) => (
+ * 					<li key={ notice.id }>{ notice.content }</li>
+ * 				) ) }
+ * 			</ul>
+ * 			<Button
+ * 				onClick={ () =>
+ * 					removeAllNotices()
+ * 				}
+ * 			>
+ * 				{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
+ * 			</Button>
+ * 			<Button
+ * 				onClick={ () =>
+ * 					removeAllNotices( 'snackbar' )
+ * 				}
+ * 			>
+ * 				{ __( 'Clear all snackbar notices', 'woo-gutenberg-products-block' ) }
+ * 			</Button>
+ * 		</>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {Object} 	   Action object.
+ */
+export function removeAllNotices(
+	noticeType = 'default',
+	context = DEFAULT_CONTEXT
+) {
+	return {
+		type: 'REMOVE_ALL_NOTICES',
+		noticeType,
+		context,
+	};
+}
+
+/**
+ * Returns an action object used in signalling that several notices are to be removed.
+ *
+ * @param {string[]} ids                List of unique notice identifiers.
+ * @param {string}   [context='global'] Optional context (grouping) in which the notices are
+ *                                      intended to appear. Defaults to default context.
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { useDispatch, useSelect } from '@wordpress/data';
+ * import { store as noticesStore } from '@wordpress/notices';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ * 	const notices = useSelect( ( select ) =>
+ * 		select( noticesStore ).getNotices()
+ * 	);
+ * 	const { removeNotices } = useDispatch( noticesStore );
+ * 	return (
+ * 		<>
+ * 			<ul>
+ * 				{ notices.map( ( notice ) => (
+ * 					<li key={ notice.id }>{ notice.content }</li>
+ * 				) ) }
+ * 			</ul>
+ * 			<Button
+ * 				onClick={ () =>
+ * 					removeNotices( notices.map( ( { id } ) => id ) )
+ * 				}
+ * 			>
+ * 				{ __( 'Clear all notices' ) }
+ * 			</Button>
+ * 		</>
+ * 	);
+ * };
+ * ```
+ * @return {Object} Action object.
+ */
+export function removeNotices( ids, context = DEFAULT_CONTEXT ) {
+	return {
+		type: 'REMOVE_NOTICES',
+		ids,
+		context,
+	};
+}
diff --git a/packages/notices/src/store/index.js b/packages/notices/src/store/index.js
index 49fa74e0eca6bc..cab1b3186dfc7c 100644
--- a/packages/notices/src/store/index.js
+++ b/packages/notices/src/store/index.js
@@ -14,8 +14,6 @@ import * as selectors from './selectors';
  * Store definition for the notices namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
- *
- * @type {Object}
  */
 export const store = createReduxStore( 'core/notices', {
 	reducer,
diff --git a/packages/notices/src/store/reducer.js b/packages/notices/src/store/reducer.js
index ff2359b61cc013..5f4d88c04af299 100644
--- a/packages/notices/src/store/reducer.js
+++ b/packages/notices/src/store/reducer.js
@@ -23,6 +23,12 @@ const notices = onSubKey( 'context' )( ( state = [], action ) => {
 
 		case 'REMOVE_NOTICE':
 			return state.filter( ( { id } ) => id !== action.id );
+
+		case 'REMOVE_NOTICES':
+			return state.filter( ( { id } ) => ! action.ids.includes( id ) );
+
+		case 'REMOVE_ALL_NOTICES':
+			return state.filter( ( { type } ) => type !== action.noticeType );
 	}
 
 	return state;
diff --git a/packages/notices/src/store/selectors.js b/packages/notices/src/store/selectors.js
index 639b776c313dfd..d3cd9d41a0ec06 100644
--- a/packages/notices/src/store/selectors.js
+++ b/packages/notices/src/store/selectors.js
@@ -39,7 +39,6 @@ const DEFAULT_NOTICES = [];
  *                                             announced to screen readers. Defaults to
  *                                             `true`.
  * @property {WPNoticeAction[]} actions        User actions to present with notice.
- *
  */
 
 /**
diff --git a/packages/notices/src/store/test/actions.js b/packages/notices/src/store/test/actions.js
index db6aa72b468dec..37fefc5c3558f4 100644
--- a/packages/notices/src/store/test/actions.js
+++ b/packages/notices/src/store/test/actions.js
@@ -8,6 +8,8 @@ import {
 	createErrorNotice,
 	createWarningNotice,
 	removeNotice,
+	removeAllNotices,
+	removeNotices,
 } from '../actions';
 import { DEFAULT_CONTEXT, DEFAULT_STATUS } from '../constants';
 
@@ -215,4 +217,55 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'removeNotices', () => {
+		it( 'should return action', () => {
+			const ids = [ 'id', 'id2' ];
+
+			expect( removeNotices( ids ) ).toEqual( {
+				type: 'REMOVE_NOTICES',
+				ids,
+				context: DEFAULT_CONTEXT,
+			} );
+		} );
+
+		it( 'should return action with custom context', () => {
+			const ids = [ 'id', 'id2' ];
+			const context = 'foo';
+
+			expect( removeNotices( ids, context ) ).toEqual( {
+				type: 'REMOVE_NOTICES',
+				ids,
+				context,
+			} );
+		} );
+	} );
+
+	describe( 'removeAllNotices', () => {
+		it( 'should return action', () => {
+			expect( removeAllNotices() ).toEqual( {
+				type: 'REMOVE_ALL_NOTICES',
+				noticeType: 'default',
+				context: DEFAULT_CONTEXT,
+			} );
+		} );
+
+		it( 'should return action with custom context', () => {
+			const context = 'foo';
+
+			expect( removeAllNotices( 'default', context ) ).toEqual( {
+				type: 'REMOVE_ALL_NOTICES',
+				noticeType: 'default',
+				context,
+			} );
+		} );
+
+		it( 'should return action with type', () => {
+			expect( removeAllNotices( 'snackbar' ) ).toEqual( {
+				type: 'REMOVE_ALL_NOTICES',
+				noticeType: 'snackbar',
+				context: DEFAULT_CONTEXT,
+			} );
+		} );
+	} );
 } );
diff --git a/packages/notices/src/store/test/reducer.js b/packages/notices/src/store/test/reducer.js
index 52ba278c79d854..d807b814a51f47 100644
--- a/packages/notices/src/store/test/reducer.js
+++ b/packages/notices/src/store/test/reducer.js
@@ -7,7 +7,12 @@ import deepFreeze from 'deep-freeze';
  * Internal dependencies
  */
 import reducer from '../reducer';
-import { createNotice, removeNotice } from '../actions';
+import {
+	createNotice,
+	removeNotice,
+	removeNotices,
+	removeAllNotices,
+} from '../actions';
 import { getNotices } from '../selectors';
 import { DEFAULT_CONTEXT } from '../constants';
 
@@ -141,6 +146,44 @@ describe( 'reducer', () => {
 		expect( state[ DEFAULT_CONTEXT ] ).toHaveLength( 1 );
 	} );
 
+	it( 'should omit several removed notices', () => {
+		const action = createNotice( 'error', 'save error' );
+		const action2 = createNotice( 'error', 'second error' );
+		const stateWithOneNotice = reducer( undefined, action );
+		const original = deepFreeze( reducer( stateWithOneNotice, action2 ) );
+		const ids = [
+			getNotices( original )[ 0 ].id,
+			getNotices( original )[ 1 ].id,
+		];
+
+		const state = reducer( original, removeNotices( ids ) );
+
+		expect( state ).toEqual( {
+			[ DEFAULT_CONTEXT ]: [],
+		} );
+	} );
+
+	it( 'should omit several removed notices across contexts', () => {
+		const action = createNotice( 'error', 'save error' );
+		const action2 = createNotice( 'error', 'second error', {
+			context: 'foo',
+		} );
+		const action3 = createNotice( 'error', 'third error', {
+			context: 'foo',
+		} );
+		const stateWithOneNotice = reducer( undefined, action );
+		const stateWithTwoNotices = reducer( stateWithOneNotice, action2 );
+		const original = deepFreeze( reducer( stateWithTwoNotices, action3 ) );
+		const ids = [
+			getNotices( original, 'foo' )[ 0 ].id,
+			getNotices( original, 'foo' )[ 1 ].id,
+		];
+
+		const state = reducer( original, removeNotices( ids, 'foo' ) );
+
+		expect( state[ DEFAULT_CONTEXT ] ).toHaveLength( 1 );
+	} );
+
 	it( 'should dedupe distinct ids, preferring new', () => {
 		let action = createNotice( 'error', 'save error (1)', {
 			id: 'error-message',
@@ -170,4 +213,84 @@ describe( 'reducer', () => {
 			],
 		} );
 	} );
+
+	it( 'should remove all notices', () => {
+		let action = createNotice( 'error', 'save error' );
+		const original = deepFreeze( reducer( undefined, action ) );
+
+		action = createNotice( 'success', 'successfully saved' );
+		let state = reducer( original, action );
+		state = reducer( state, removeAllNotices() );
+
+		expect( state ).toEqual( {
+			[ DEFAULT_CONTEXT ]: [],
+		} );
+	} );
+
+	it( 'should remove all notices in a given context but leave other contexts intact', () => {
+		let action = createNotice( 'error', 'save error', {
+			context: 'foo',
+			id: 'foo-error',
+		} );
+		const original = deepFreeze( reducer( undefined, action ) );
+
+		action = createNotice( 'success', 'successfully saved', {
+			context: 'bar',
+		} );
+
+		let state = reducer( original, action );
+		state = reducer( state, removeAllNotices( 'default', 'bar' ) );
+
+		expect( state ).toEqual( {
+			bar: [],
+			foo: [
+				{
+					id: 'foo-error',
+					content: 'save error',
+					spokenMessage: 'save error',
+					__unstableHTML: undefined,
+					status: 'error',
+					isDismissible: true,
+					actions: [],
+					type: 'default',
+					icon: null,
+					explicitDismiss: false,
+					onDismiss: undefined,
+				},
+			],
+		} );
+	} );
+
+	it( 'should remove all notices of a given type', () => {
+		let action = createNotice( 'error', 'save error', {
+			id: 'global-error',
+		} );
+		const original = deepFreeze( reducer( undefined, action ) );
+
+		action = createNotice( 'success', 'successfully saved', {
+			type: 'snackbar',
+			id: 'snackbar-success',
+		} );
+
+		let state = reducer( original, action );
+		state = reducer( state, removeAllNotices( 'default' ) );
+
+		expect( state ).toEqual( {
+			[ DEFAULT_CONTEXT ]: [
+				{
+					id: 'snackbar-success',
+					content: 'successfully saved',
+					spokenMessage: 'successfully saved',
+					__unstableHTML: undefined,
+					status: 'success',
+					isDismissible: true,
+					actions: [],
+					type: 'snackbar',
+					icon: null,
+					explicitDismiss: false,
+					onDismiss: undefined,
+				},
+			],
+		} );
+	} );
 } );
diff --git a/packages/notices/tsconfig.json b/packages/notices/tsconfig.json
new file mode 100644
index 00000000000000..e36a6fe9f4eb6b
--- /dev/null
+++ b/packages/notices/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ],
+		"checkJs": false
+	},
+	"references": [ { "path": "../a11y" }, { "path": "../data" } ],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/npm-package-json-lint-config/.npmrc b/packages/npm-package-json-lint-config/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/npm-package-json-lint-config/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 6143d486d7969a..132f6ffccdd23c 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+### Enhancement
+
+-   Include `exports`, `wpScript`, `wpScriptModuleExports` and `sideEffects` in the `prefer-property-order` rule ([#66239](https://github.com/WordPress/gutenberg/pull/66239)).
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.43.0 (2024-05-16)
+
+## 4.42.0 (2024-05-02)
+
+## 4.41.0 (2024-04-19)
+
+## 4.40.0 (2024-04-03)
+
+## 4.39.0 (2024-03-21)
+
+## 4.38.0 (2024-03-06)
+
+## 4.37.0 (2024-02-21)
+
+## 4.36.0 (2024-02-09)
+
+## 4.35.0 (2024-01-24)
+
+## 4.34.0 (2024-01-10)
+
+## 4.33.0 (2023-12-13)
+
+## 4.32.0 (2023-11-29)
+
+## 4.31.0 (2023-11-16)
+
+## 4.30.0 (2023-11-02)
+
+## 4.29.0 (2023-10-18)
+
+## 4.28.0 (2023-10-05)
+
+## 4.27.0 (2023-09-20)
+
+## 4.26.0 (2023-08-31)
+
+## 4.25.0 (2023-08-16)
+
+### Enhancements
+
+-   Updated `npm-package-json-lint` peer dependency to require v6.0.0 [#53636](https://github.com/WordPress/gutenberg/pull/53636)
+
+## 4.24.0 (2023-08-10)
+
+## 4.23.0 (2023-07-20)
+
+## 4.22.0 (2023-07-05)
+
+## 4.21.0 (2023-06-23)
+
+## 4.20.0 (2023-06-07)
+
+## 4.19.0 (2023-05-24)
+
+## 4.18.0 (2023-05-10)
+
+## 4.17.0 (2023-04-26)
+
+## 4.16.0 (2023-04-12)
+
+## 4.15.0 (2023-03-29)
+
+## 4.14.0 (2023-03-15)
+
+## 4.13.0 (2023-03-01)
+
+## 4.12.0 (2023-02-15)
+
+## 4.11.0 (2023-02-01)
+
+## 4.10.0 (2023-01-11)
+
+## 4.9.0 (2023-01-02)
+
+## 4.8.0 (2022-12-14)
+
 ## 4.7.0 (2022-11-16)
 
 ## 4.6.0 (2022-11-02)
@@ -14,13 +126,13 @@
 
 ## 4.2.0 (2022-08-24)
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with native functionality ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
 ## 4.0.0 (2021-01-21)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -30,13 +142,13 @@
 
 ## 3.0.0 (2020-04-15)
 
-### Breaking Change
+### Breaking Changes
 
 -   Add `types` to the order of preferred properties. ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
 ## 2.0.0 (2019-06-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Added `type` and `react-native` to the order of preferred properties.
 
@@ -48,13 +160,13 @@
 
 ## 1.1.3 (2018-09-05)
 
-### Bug Fix
+### Bug Fixes
 
 -   Resolves an issue where npm package lint script did not work in Windows environments ([#9321](https://github.com/WordPress/gutenberg/pull/9321)
 
 ## 1.1.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -64,6 +176,6 @@
 
 ## 1.0.0 (2018-05-18)
 
-### New Feature
+### New Features
 
 -   Initial release `@wordpress/npm-package-json-lint-config` ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/npm-package-json-lint-config/README.md b/packages/npm-package-json-lint-config/README.md
index dae33adeb5f8a2..f933cc188a8a04 100644
--- a/packages/npm-package-json-lint-config/README.md
+++ b/packages/npm-package-json-lint-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install @wordpress/npm-package-json-lint-config
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/npm-package-json-lint-config/index.js b/packages/npm-package-json-lint-config/index.js
index 831970c59bf3a6..e1abd5e34f99c5 100644
--- a/packages/npm-package-json-lint-config/index.js
+++ b/packages/npm-package-json-lint-config/index.js
@@ -56,8 +56,12 @@ const defaultConfig = {
 				'type',
 				'main',
 				'module',
+				'exports',
 				'react-native',
+				'wpScript',
+				'wpScriptModuleExports',
 				'types',
+				'sideEffects',
 				'bin',
 				'dependencies',
 				'devDependencies',
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index c809b851b6fc2d..4dda73b91d2ed2 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "4.7.0",
+	"version": "5.13.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,14 +20,15 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
 	],
 	"main": "index.js",
 	"peerDependencies": {
-		"npm-package-json-lint": ">=3.6.0"
+		"npm-package-json-lint": ">=6.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
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
index 235a32022281d0..ddf1f9091471d0 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,84 @@
 
 ## Unreleased
 
+## 9.13.0 (2024-11-27)
+
+## 9.12.0 (2024-11-16)
+
+## 9.11.0 (2024-10-30)
+
+## 9.10.0 (2024-10-16)
+
+## 9.9.0 (2024-10-03)
+
+## 9.8.0 (2024-09-19)
+
+## 9.7.0 (2024-09-05)
+
+## 9.6.0 (2024-08-21)
+
+## 9.5.0 (2024-08-07)
+
+## 9.4.0 (2024-07-24)
+
+## 9.3.0 (2024-07-10)
+
+## 9.2.0 (2024-06-26)
+
+## 9.1.0 (2024-06-15)
+
+## 9.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 8.20.0 (2024-05-16)
+
+## 8.19.0 (2024-05-02)
+
+## 8.18.0 (2024-04-19)
+
+## 8.17.0 (2024-04-03)
+
+## 8.16.0 (2024-03-21)
+
+## 8.15.0 (2024-03-06)
+
+## 8.14.0 (2024-02-21)
+
+## 8.13.0 (2024-02-09)
+
+## 8.12.0 (2024-01-24)
+
+## 8.11.0 (2024-01-10)
+
+## 8.10.0 (2023-12-13)
+
+## 8.9.0 (2023-11-29)
+
+## 8.8.0 (2023-11-16)
+
+## 8.7.0 (2023-11-02)
+
+## 8.6.0 (2023-10-18)
+
+## 8.5.0 (2023-10-05)
+
+## 8.4.0 (2023-09-20)
+
+## 8.3.0 (2023-08-31)
+
+## 8.2.0 (2023-08-16)
+
+## 8.1.0 (2023-08-10)
+
+## 8.0.0 (2023-07-20)
+
+### 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)
@@ -44,7 +122,7 @@
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -63,7 +141,7 @@
 
 ## 3.24.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the core data namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
@@ -115,6 +193,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/package.json b/packages/nux/package.json
index 311a46b5571855..13a803af1ad447 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "5.20.0",
+	"version": "9.13.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,30 +19,31 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"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"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
index 50de7ddb3be9df..e2768789ad1fda 100644
--- a/packages/nux/src/components/dot-tip/index.js
+++ b/packages/nux/src/components/dot-tip/index.js
@@ -56,11 +56,16 @@ export function DotTip( {
 		>
 			<p>{ children }</p>
 			<p>
-				<Button variant="link" onClick={ onDismiss }>
+				<Button
+					__next40pxDefaultSize
+					variant="link"
+					onClick={ onDismiss }
+				>
 					{ hasNextTip ? __( 'See next tip' ) : __( 'Got it' ) }
 				</Button>
 			</p>
 			<Button
+				size="small"
 				className="nux-dot-tip__disable"
 				icon={ close }
 				label={ __( 'Disable tips' ) }
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 03b9ce1ae4baae..a160b7f6555768 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,20 +3,23 @@
 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"
+  data-wp-c16t="true"
+  data-wp-component="Popover"
   role="dialog"
-  style="position: absolute; opacity: 0; transform: translateX(-2em) scale(0) translateZ(0); transform-origin: 0% 50% 0;"
+  style="position: absolute; top: 0px; left: 0px; transform: none;"
   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"
+        class="components-button is-next-40px-default-size is-link"
         type="button"
       >
         Got it
@@ -24,7 +27,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <button
       aria-label="Disable tips"
-      class="components-button nux-dot-tip__disable has-icon"
+      class="components-button nux-dot-tip__disable is-small has-icon"
       type="button"
     >
       <svg
@@ -36,7 +39,7 @@ exports[`DotTip should render correctly 1`] = `
         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"
+          d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"
         />
       </svg>
     </button>
diff --git a/packages/nux/src/components/dot-tip/test/index.js b/packages/nux/src/components/dot-tip/test/index.js
index bde2b1ab2424b4..a91fb5724b4348 100644
--- a/packages/nux/src/components/dot-tip/test/index.js
+++ b/packages/nux/src/components/dot-tip/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { DotTip } from '..';
 
-const noop = () => {};
-
 describe( 'DotTip', () => {
 	it( 'should not render anything if invisible', () => {
 		render(
@@ -22,45 +20,54 @@ describe( 'DotTip', () => {
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should render correctly', () => {
+	it( 'should render correctly', async () => {
 		render(
-			<DotTip isVisible setTimeout={ noop }>
+			<DotTip isVisible>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
 
+		// Wait for the dialog element to be positioned (aligned with the button)
+		await waitFor( () =>
+			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
+		);
+
 		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should call onDismiss when the dismiss button is clicked', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onDismiss = jest.fn();
 
 		render(
-			<DotTip isVisible onDismiss={ onDismiss } setTimeout={ noop }>
+			<DotTip isVisible onDismiss={ onDismiss }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
 
+		await waitFor( () =>
+			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
+		);
+
 		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 user = userEvent.setup();
 		const onDisable = jest.fn();
 
 		render(
-			<DotTip isVisible onDisable={ onDisable } setTimeout={ noop }>
+			<DotTip isVisible onDisable={ onDisable }>
 				It looks like you’re writing a letter. Would you like help?
 			</DotTip>
 		);
 
+		await waitFor( () =>
+			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
+		);
+
 		await user.click(
 			screen.getByRole( 'button', { name: 'Disable tips' } )
 		);
diff --git a/packages/nux/src/store/selectors.js b/packages/nux/src/store/selectors.js
index e87cf688a1ba32..44b2d7321f1f73 100644
--- a/packages/nux/src/store/selectors.js
+++ b/packages/nux/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import createSelector from 'rememo';
+import { createSelector } from '@wordpress/data';
 
 /**
  * An object containing information about a guide.
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
new file mode 100644
index 00000000000000..975065d0f2b423
--- /dev/null
+++ b/packages/patterns/CHANGELOG.md
@@ -0,0 +1,75 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.19.0 (2024-05-16)
+
+## 1.18.0 (2024-05-02)
+
+## 1.17.0 (2024-04-19)
+
+## 1.16.0 (2024-04-03)
+
+## 1.15.0 (2024-03-21)
+
+## 1.14.0 (2024-03-06)
+
+## 1.13.0 (2024-02-21)
+
+## 1.12.0 (2024-02-09)
+
+## 1.11.0 (2024-01-24)
+
+## 1.10.0 (2024-01-10)
+
+## 1.9.0 (2023-12-13)
+
+## 1.8.0 (2023-11-29)
+
+## 1.7.0 (2023-11-16)
+
+## 1.6.0 (2023-11-02)
+
+## 1.5.0 (2023-10-18)
+
+## 1.4.0 (2023-10-05)
+
+## 1.3.0 (2023-09-20)
+
+## 1.2.0 (2023-08-31)
+
+## 1.1.0 (2023-08-16)
+
+Initial release.
diff --git a/packages/patterns/README.md b/packages/patterns/README.md
new file mode 100644
index 00000000000000..1123805836f2ab
--- /dev/null
+++ b/packages/patterns/README.md
@@ -0,0 +1,26 @@
+# Patterns
+
+> **Note**
+> This package is currently only used internally by the Gutenberg project to manage the creation and editing of user patterns using the `wp_block` CPT in the context of the block editor. The likes of the `PatternsMenuItems` component expect to be rendered within a `BlockEditorProvider` in order to work.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/patterns --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._
+
+## Components
+
+This package doesn't currently have any publically exported components.
+
+## 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/patterns/package.json b/packages/patterns/package.json
new file mode 100644
index 00000000000000..b0c6e81f1e2498
--- /dev/null
+++ b/packages/patterns/package.json
@@ -0,0 +1,58 @@
+{
+	"name": "@wordpress/patterns",
+	"version": "2.13.0",
+	"description": "Management of user pattern editing.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"patterns"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/patterns/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/patterns"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss",
+		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+	],
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/url": "*"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/patterns/src/api/index.js b/packages/patterns/src/api/index.js
new file mode 100644
index 00000000000000..4321dc4262145a
--- /dev/null
+++ b/packages/patterns/src/api/index.js
@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { PARTIAL_SYNCING_SUPPORTED_BLOCKS } from '../constants';
+
+/**
+ * Determines whether a block is overridable.
+ *
+ * @param {WPBlock} block The block to test.
+ *
+ * @return {boolean} `true` if a block is overridable, `false` otherwise.
+ */
+export function isOverridableBlock( block ) {
+	return (
+		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
+			block.name
+		) &&
+		!! block.attributes.metadata?.name &&
+		!! block.attributes.metadata?.bindings &&
+		Object.values( block.attributes.metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		)
+	);
+}
+
+/**
+ * Determines whether the blocks list has overridable blocks.
+ *
+ * @param {WPBlock[]} blocks The blocks list.
+ *
+ * @return {boolean} `true` if the list has overridable blocks, `false` otherwise.
+ */
+export function hasOverridableBlocks( blocks ) {
+	return blocks.some( ( block ) => {
+		if ( isOverridableBlock( block ) ) {
+			return true;
+		}
+		return hasOverridableBlocks( block.innerBlocks );
+	} );
+}
diff --git a/packages/patterns/src/components/allow-overrides-modal.js b/packages/patterns/src/components/allow-overrides-modal.js
new file mode 100644
index 00000000000000..e2389575171a3a
--- /dev/null
+++ b/packages/patterns/src/components/allow-overrides-modal.js
@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	__experimentalText as Text,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useId } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+export function AllowOverridesModal( {
+	placeholder,
+	initialName = '',
+	onClose,
+	onSave,
+} ) {
+	const [ editedBlockName, setEditedBlockName ] = useState( initialName );
+	const descriptionId = useId();
+
+	const isNameValid = !! editedBlockName.trim();
+
+	const handleSubmit = () => {
+		if ( editedBlockName !== initialName ) {
+			const message = sprintf(
+				/* translators: %s: new name/label for the block */
+				__( 'Block name changed to: "%s".' ),
+				editedBlockName
+			);
+
+			// Must be assertive to immediately announce change.
+			speak( message, 'assertive' );
+		}
+		onSave( editedBlockName );
+
+		// Immediate close avoids ability to hit save multiple times.
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Enable overrides' ) }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="6">
+					<Text id={ descriptionId }>
+						{ __(
+							'Overrides are changes you make to a block within a synced pattern instance. Use overrides to customize a synced pattern instance to suit its new context. Name this block to specify an override.'
+						) }
+					</Text>
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						value={ editedBlockName }
+						label={ __( 'Name' ) }
+						help={ __(
+							'For example, if you are creating a recipe pattern, you use "Recipe Title", "Recipe Description", etc.'
+						) }
+						placeholder={ placeholder }
+						onChange={ setEditedBlockName }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Enable' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+export function DisallowOverridesModal( { onClose, onSave } ) {
+	const descriptionId = useId();
+
+	return (
+		<Modal
+			title={ __( 'Disable overrides' ) }
+			onRequestClose={ onClose }
+			aria={ { describedby: descriptionId } }
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					onSave();
+					onClose();
+				} }
+			>
+				<VStack spacing="6">
+					<Text id={ descriptionId }>
+						{ __(
+							'Are you sure you want to disable overrides? Disabling overrides will revert all applied overrides for this block throughout instances of this pattern.'
+						) }
+					</Text>
+
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Disable' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/patterns/src/components/category-selector.js b/packages/patterns/src/components/category-selector.js
new file mode 100644
index 00000000000000..fdd56f159b0921
--- /dev/null
+++ b/packages/patterns/src/components/category-selector.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { FormTokenField } from '@wordpress/components';
+import { useDebounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+
+const unescapeString = ( arg ) => {
+	return decodeEntities( arg );
+};
+
+export const CATEGORY_SLUG = 'wp_pattern_category';
+
+export default function CategorySelector( {
+	categoryTerms,
+	onChange,
+	categoryMap,
+} ) {
+	const [ search, setSearch ] = useState( '' );
+	const debouncedSearch = useDebounce( setSearch, 500 );
+
+	const suggestions = useMemo( () => {
+		return Array.from( categoryMap.values() )
+			.map( ( category ) => unescapeString( category.label ) )
+			.filter( ( category ) => {
+				if ( search !== '' ) {
+					return category
+						.toLowerCase()
+						.includes( search.toLowerCase() );
+				}
+				return true;
+			} )
+			.sort( ( a, b ) => a.localeCompare( b ) );
+	}, [ search, categoryMap ] );
+
+	function handleChange( termNames ) {
+		const uniqueTerms = termNames.reduce( ( terms, newTerm ) => {
+			if (
+				! terms.some(
+					( term ) => term.toLowerCase() === newTerm.toLowerCase()
+				)
+			) {
+				terms.push( newTerm );
+			}
+			return terms;
+		}, [] );
+
+		onChange( uniqueTerms );
+	}
+
+	return (
+		<FormTokenField
+			className="patterns-menu-items__convert-modal-categories"
+			value={ categoryTerms }
+			suggestions={ suggestions }
+			onChange={ handleChange }
+			onInputChange={ debouncedSearch }
+			label={ __( 'Categories' ) }
+			tokenizeOnBlur
+			__experimentalExpandOnFocus
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+}
diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js
new file mode 100644
index 00000000000000..dd86709acbca30
--- /dev/null
+++ b/packages/patterns/src/components/create-pattern-modal.js
@@ -0,0 +1,173 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import {
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_SYNC_TYPES,
+	PATTERN_TYPES,
+} from '../constants';
+import { store as patternsStore } from '../store';
+import CategorySelector from './category-selector';
+import { useAddPatternCategory } from '../private-hooks';
+import { unlock } from '../lock-unlock';
+
+export default function CreatePatternModal( {
+	className = 'patterns-menu-items__convert-modal',
+	modalTitle,
+	...restProps
+} ) {
+	const defaultModalTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( PATTERN_TYPES.user )?.labels
+				?.add_new_item,
+		[]
+	);
+	return (
+		<Modal
+			title={ modalTitle || defaultModalTitle }
+			onRequestClose={ restProps.onClose }
+			overlayClassName={ className }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<CreatePatternModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+export function CreatePatternModalContents( {
+	confirmLabel = __( 'Add' ),
+	defaultCategories = [],
+	content,
+	onClose,
+	onError,
+	onSuccess,
+	defaultSyncType = PATTERN_SYNC_TYPES.full,
+	defaultTitle = '',
+} ) {
+	const [ syncType, setSyncType ] = useState( defaultSyncType );
+	const [ categoryTerms, setCategoryTerms ] = useState( defaultCategories );
+	const [ title, setTitle ] = useState( defaultTitle );
+
+	const [ isSaving, setIsSaving ] = useState( false );
+	const { createPattern } = unlock( useDispatch( patternsStore ) );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const { categoryMap, findOrCreateTerm } = useAddPatternCategory();
+
+	async function onCreate( patternTitle, sync ) {
+		if ( ! title || isSaving ) {
+			return;
+		}
+
+		try {
+			setIsSaving( true );
+			const categories = await Promise.all(
+				categoryTerms.map( ( termName ) =>
+					findOrCreateTerm( termName )
+				)
+			);
+
+			const newPattern = await createPattern(
+				patternTitle,
+				sync,
+				typeof content === 'function' ? content() : content,
+				categories
+			);
+			onSuccess( {
+				pattern: newPattern,
+				categoryId: PATTERN_DEFAULT_CATEGORY,
+			} );
+		} catch ( error ) {
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+				id: 'pattern-create',
+			} );
+			onError?.();
+		} finally {
+			setIsSaving( false );
+			setCategoryTerms( [] );
+			setTitle( '' );
+		}
+	}
+
+	return (
+		<form
+			onSubmit={ ( event ) => {
+				event.preventDefault();
+				onCreate( title, syncType );
+			} }
+		>
+			<VStack spacing="5">
+				<TextControl
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ __( 'My pattern' ) }
+					className="patterns-create-modal__name-input"
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+				/>
+				<CategorySelector
+					categoryTerms={ categoryTerms }
+					onChange={ setCategoryTerms }
+					categoryMap={ categoryMap }
+				/>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ _x( 'Synced', 'pattern (singular)' ) }
+					help={ __(
+						'Sync this pattern across multiple locations.'
+					) }
+					checked={ syncType === PATTERN_SYNC_TYPES.full }
+					onChange={ () => {
+						setSyncType(
+							syncType === PATTERN_SYNC_TYPES.full
+								? PATTERN_SYNC_TYPES.unsynced
+								: PATTERN_SYNC_TYPES.full
+						);
+					} }
+				/>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => {
+							onClose();
+							setTitle( '' );
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSaving }
+						isBusy={ isSaving }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
diff --git a/packages/patterns/src/components/duplicate-pattern-modal.js b/packages/patterns/src/components/duplicate-pattern-modal.js
new file mode 100644
index 00000000000000..d4fd5e744c4e18
--- /dev/null
+++ b/packages/patterns/src/components/duplicate-pattern-modal.js
@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import CreatePatternModal from './create-pattern-modal';
+import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../constants';
+
+function getTermLabels( pattern, categories ) {
+	// Theme patterns rely on core pattern categories.
+	if ( pattern.type !== PATTERN_TYPES.user ) {
+		return categories.core
+			?.filter( ( category ) =>
+				pattern.categories?.includes( category.name )
+			)
+			.map( ( category ) => category.label );
+	}
+
+	return categories.user
+		?.filter( ( category ) =>
+			pattern.wp_pattern_category?.includes( category.id )
+		)
+		.map( ( category ) => category.label );
+}
+
+export function useDuplicatePatternProps( { pattern, onSuccess } ) {
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const categories = useSelect( ( select ) => {
+		const { getUserPatternCategories, getBlockPatternCategories } =
+			select( coreStore );
+
+		return {
+			core: getBlockPatternCategories(),
+			user: getUserPatternCategories(),
+		};
+	} );
+	if ( ! pattern ) {
+		return null;
+	}
+	return {
+		content: pattern.content,
+		defaultCategories: getTermLabels( pattern, categories ),
+		defaultSyncType:
+			pattern.type !== PATTERN_TYPES.user // Theme patterns are unsynced by default.
+				? PATTERN_SYNC_TYPES.unsynced
+				: pattern.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
+		defaultTitle: sprintf(
+			/* translators: %s: Existing pattern title */
+			_x( '%s (Copy)', 'pattern' ),
+			typeof pattern.title === 'string'
+				? pattern.title
+				: pattern.title.raw
+		),
+		onSuccess: ( { pattern: newPattern } ) => {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+					_x( '"%s" duplicated.', 'pattern' ),
+					newPattern.title.raw
+				),
+				{
+					type: 'snackbar',
+					id: 'patterns-create',
+				}
+			);
+
+			onSuccess?.( { pattern: newPattern } );
+		},
+	};
+}
+
+export default function DuplicatePatternModal( {
+	pattern,
+	onClose,
+	onSuccess,
+} ) {
+	const duplicatedProps = useDuplicatePatternProps( { pattern, onSuccess } );
+	if ( ! pattern ) {
+		return null;
+	}
+	return (
+		<CreatePatternModal
+			modalTitle={ __( 'Duplicate pattern' ) }
+			confirmLabel={ __( 'Duplicate' ) }
+			onClose={ onClose }
+			onError={ onClose }
+			{ ...duplicatedProps }
+		/>
+	);
+}
diff --git a/packages/patterns/src/components/index.js b/packages/patterns/src/components/index.js
new file mode 100644
index 00000000000000..6fddc593911f46
--- /dev/null
+++ b/packages/patterns/src/components/index.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PatternConvertButton from './pattern-convert-button';
+import PatternsManageButton from './patterns-manage-button';
+
+export default function PatternsMenuItems( { rootClientId } ) {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) => (
+				<>
+					<PatternConvertButton
+						clientIds={ selectedClientIds }
+						rootClientId={ rootClientId }
+						closeBlockSettingsMenu={ onClose }
+					/>
+					{ selectedClientIds.length === 1 && (
+						<PatternsManageButton
+							clientId={ selectedClientIds[ 0 ] }
+						/>
+					) }
+				</>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}
diff --git a/packages/patterns/src/components/overrides-panel.js b/packages/patterns/src/components/overrides-panel.js
new file mode 100644
index 00000000000000..b567b3c372daa2
--- /dev/null
+++ b/packages/patterns/src/components/overrides-panel.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { isOverridableBlock } from '../api';
+import { unlock } from '../lock-unlock';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+export default function OverridesPanel() {
+	const allClientIds = useSelect(
+		( select ) => select( blockEditorStore ).getClientIdsWithDescendants(),
+		[]
+	);
+	const { getBlock } = useSelect( blockEditorStore );
+	const clientIdsWithOverrides = useMemo(
+		() =>
+			allClientIds.filter( ( clientId ) => {
+				const block = getBlock( clientId );
+				return isOverridableBlock( block );
+			} ),
+		[ allClientIds, getBlock ]
+	);
+
+	if ( ! clientIdsWithOverrides?.length ) {
+		return null;
+	}
+
+	return (
+		<PanelBody title={ __( 'Overrides' ) }>
+			<BlockQuickNavigation clientIds={ clientIdsWithOverrides } />
+		</PanelBody>
+	);
+}
diff --git a/packages/patterns/src/components/pattern-convert-button.js b/packages/patterns/src/components/pattern-convert-button.js
new file mode 100644
index 00000000000000..4573a6a5de4e82
--- /dev/null
+++ b/packages/patterns/src/components/pattern-convert-button.js
@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	hasBlockSupport,
+	isReusableBlock,
+	createBlock,
+	serialize,
+	getBlockType,
+} from '@wordpress/blocks';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useState, useCallback } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { symbol } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+/**
+ * Internal dependencies
+ */
+import { store as patternsStore } from '../store';
+import CreatePatternModal from './create-pattern-modal';
+import { unlock } from '../lock-unlock';
+import { PATTERN_SYNC_TYPES } from '../constants';
+
+/**
+ * Menu control to convert block(s) to a pattern block.
+ *
+ * @param {Object}   props                        Component props.
+ * @param {string[]} props.clientIds              Client ids of selected blocks.
+ * @param {string}   props.rootClientId           ID of the currently selected top-level block.
+ * @param {()=>void} props.closeBlockSettingsMenu Callback to close the block settings menu dropdown.
+ * @return {import('react').ComponentType} The menu control or null.
+ */
+export default function PatternConvertButton( {
+	clientIds,
+	rootClientId,
+	closeBlockSettingsMenu,
+} ) {
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	// Ignore reason: false positive of the lint rule.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { setEditingPattern } = unlock( useDispatch( patternsStore ) );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const canConvert = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			const {
+				getBlocksByClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+
+			const rootId =
+				rootClientId ||
+				( clientIds.length > 0
+					? getBlockRootClientId( clientIds[ 0 ] )
+					: undefined );
+
+			const blocks = getBlocksByClientId( clientIds ) ?? [];
+
+			// Check if the block has reusable support defined.
+			const hasReusableBlockSupport = ( blockName ) => {
+				const blockType = getBlockType( blockName );
+				const hasParent = blockType && 'parent' in blockType;
+
+				// If the block has a parent, check with false as default, otherwise with true.
+				return hasBlockSupport( blockName, 'reusable', ! hasParent );
+			};
+
+			const isReusable =
+				blocks.length === 1 &&
+				blocks[ 0 ] &&
+				isReusableBlock( blocks[ 0 ] ) &&
+				!! select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					blocks[ 0 ].attributes.ref
+				);
+
+			const _canConvert =
+				// Hide when this is already a synced pattern.
+				! isReusable &&
+				// Hide when patterns are disabled.
+				canInsertBlockType( 'core/block', rootId ) &&
+				blocks.every(
+					( block ) =>
+						// Guard against the case where a regular block has *just* been converted.
+						!! block &&
+						// Hide on invalid blocks.
+						block.isValid &&
+						// Hide when block doesn't support being made into a pattern.
+						hasReusableBlockSupport( block.name )
+				) &&
+				// Hide when current doesn't have permission to do that.
+				// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
+				!! canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_block',
+				} );
+
+			return _canConvert;
+		},
+		[ clientIds, rootClientId ]
+	);
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const getContent = useCallback(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		[ getBlocksByClientId, clientIds ]
+	);
+
+	if ( ! canConvert ) {
+		return null;
+	}
+
+	const handleSuccess = ( { pattern } ) => {
+		if ( pattern.wp_pattern_sync_status !== PATTERN_SYNC_TYPES.unsynced ) {
+			const newBlock = createBlock( 'core/block', {
+				ref: pattern.id,
+			} );
+
+			replaceBlocks( clientIds, newBlock );
+			setEditingPattern( newBlock.clientId, true );
+			closeBlockSettingsMenu();
+		}
+
+		createSuccessNotice(
+			pattern.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
+				? sprintf(
+						// translators: %s: the name the user has given to the pattern.
+						__( 'Unsynced pattern created: %s' ),
+						pattern.title.raw
+				  )
+				: sprintf(
+						// translators: %s: the name the user has given to the pattern.
+						__( 'Synced pattern created: %s' ),
+						pattern.title.raw
+				  ),
+			{
+				type: 'snackbar',
+				id: 'convert-to-pattern-success',
+			}
+		);
+		setIsModalOpen( false );
+	};
+	return (
+		<>
+			<MenuItem
+				icon={ symbol }
+				onClick={ () => setIsModalOpen( true ) }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Create pattern' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<CreatePatternModal
+					content={ getContent }
+					onSuccess={ ( pattern ) => {
+						handleSuccess( pattern );
+					} }
+					onError={ () => {
+						setIsModalOpen( false );
+					} }
+					onClose={ () => {
+						setIsModalOpen( false );
+					} }
+				/>
+			) }
+		</>
+	);
+}
diff --git a/packages/patterns/src/components/pattern-overrides-block-controls.js b/packages/patterns/src/components/pattern-overrides-block-controls.js
new file mode 100644
index 00000000000000..8942b3a09e2e35
--- /dev/null
+++ b/packages/patterns/src/components/pattern-overrides-block-controls.js
@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { useId } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	DropdownMenu,
+	ToolbarItem,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { copy } from '@wordpress/icons';
+import {
+	store as blockEditorStore,
+	BlockIcon,
+	privateApis as blockEditorPrivateApis,
+	BlockControls,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import { PATTERN_OVERRIDES_BINDING_SOURCE } from '../constants';
+
+const { useBlockDisplayTitle } = unlock( blockEditorPrivateApis );
+
+function PatternOverridesToolbarIndicator( { clientIds } ) {
+	const isSingleBlockSelected = clientIds.length === 1;
+	const { icon, firstBlockName } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getBlockNamesByClientId } =
+				select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
+			const blockTypeNames = getBlockNamesByClientId( clientIds );
+			const _firstBlockTypeName = blockTypeNames[ 0 ];
+			const firstBlockType = getBlockType( _firstBlockTypeName );
+			let _icon;
+			if ( isSingleBlockSelected ) {
+				const match = getActiveBlockVariation(
+					_firstBlockTypeName,
+					getBlockAttributes( clientIds[ 0 ] )
+				);
+				// Take into account active block variations.
+				_icon = match?.icon || firstBlockType.icon;
+			} else {
+				const isSelectionOfSameType =
+					new Set( blockTypeNames ).size === 1;
+				// When selection consists of blocks of multiple types, display an
+				// appropriate icon to communicate the non-uniformity.
+				_icon = isSelectionOfSameType ? firstBlockType.icon : copy;
+			}
+
+			return {
+				icon: _icon,
+				firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata
+					.name,
+			};
+		},
+		[ clientIds, isSingleBlockSelected ]
+	);
+	const firstBlockTitle = useBlockDisplayTitle( {
+		clientId: clientIds[ 0 ],
+		maximumLength: 35,
+	} );
+
+	const blockDescription = isSingleBlockSelected
+		? sprintf(
+				/* translators: 1: The block type's name. 2: The block's user-provided name (the same as the override name). */
+				__( 'This %1$s is editable using the "%2$s" override.' ),
+				firstBlockTitle.toLowerCase(),
+				firstBlockName
+		  )
+		: __( 'These blocks are editable using overrides.' );
+
+	const descriptionId = useId();
+
+	return (
+		<ToolbarItem>
+			{ ( toggleProps ) => (
+				<DropdownMenu
+					className="patterns-pattern-overrides-toolbar-indicator"
+					label={ firstBlockTitle }
+					popoverProps={ {
+						placement: 'bottom-start',
+						className:
+							'patterns-pattern-overrides-toolbar-indicator__popover',
+					} }
+					icon={
+						<>
+							<BlockIcon
+								icon={ icon }
+								className="patterns-pattern-overrides-toolbar-indicator-icon"
+								showColors
+							/>
+						</>
+					}
+					toggleProps={ {
+						description: blockDescription,
+						...toggleProps,
+					} }
+					menuProps={ {
+						orientation: 'both',
+						'aria-describedby': descriptionId,
+					} }
+				>
+					{ () => (
+						<Text id={ descriptionId }>{ blockDescription }</Text>
+					) }
+				</DropdownMenu>
+			) }
+		</ToolbarItem>
+	);
+}
+
+export default function PatternOverridesBlockControls() {
+	const { clientIds, hasPatternOverrides, hasParentPattern } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientIds,
+				getBlockParentsByBlockName,
+			} = select( blockEditorStore );
+			const selectedClientIds = getSelectedBlockClientIds();
+			const _hasPatternOverrides = selectedClientIds.every(
+				( clientId ) =>
+					Object.values(
+						getBlockAttributes( clientId )?.metadata?.bindings ?? {}
+					).some(
+						( binding ) =>
+							binding?.source === PATTERN_OVERRIDES_BINDING_SOURCE
+					)
+			);
+			const _hasParentPattern = selectedClientIds.every(
+				( clientId ) =>
+					getBlockParentsByBlockName( clientId, 'core/block', true )
+						.length > 0
+			);
+			return {
+				clientIds: selectedClientIds,
+				hasPatternOverrides: _hasPatternOverrides,
+				hasParentPattern: _hasParentPattern,
+			};
+		},
+		[]
+	);
+
+	return hasPatternOverrides && hasParentPattern ? (
+		<BlockControls group="parent">
+			<PatternOverridesToolbarIndicator clientIds={ clientIds } />
+		</BlockControls>
+	) : null;
+}
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
new file mode 100644
index 00000000000000..5207348c7bd7c6
--- /dev/null
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useId } from '@wordpress/element';
+import {
+	InspectorControls,
+	useBlockBindingsUtils,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_OVERRIDES_BINDING_SOURCE } from '../constants';
+import {
+	AllowOverridesModal,
+	DisallowOverridesModal,
+} from './allow-overrides-modal';
+
+function PatternOverridesControls( {
+	attributes,
+	setAttributes,
+	name: blockName,
+} ) {
+	const controlId = useId();
+	const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
+		useState( false );
+	const [ showDisallowOverridesModal, setShowDisallowOverridesModal ] =
+		useState( false );
+
+	const hasName = !! attributes.metadata?.name;
+	const defaultBindings = attributes.metadata?.bindings?.__default;
+	const hasOverrides =
+		hasName && defaultBindings?.source === PATTERN_OVERRIDES_BINDING_SOURCE;
+	const isConnectedToOtherSources =
+		defaultBindings?.source &&
+		defaultBindings.source !== PATTERN_OVERRIDES_BINDING_SOURCE;
+	const { updateBlockBindings } = useBlockBindingsUtils();
+
+	function updateBindings( isChecked, customName ) {
+		if ( customName ) {
+			setAttributes( {
+				metadata: {
+					...attributes.metadata,
+					name: customName,
+				},
+			} );
+		}
+
+		updateBlockBindings( {
+			__default: isChecked
+				? { source: PATTERN_OVERRIDES_BINDING_SOURCE }
+				: undefined,
+		} );
+	}
+
+	// Avoid overwriting other (e.g. meta) bindings.
+	if ( isConnectedToOtherSources ) {
+		return null;
+	}
+
+	const hasUnsupportedImageAttributes =
+		blockName === 'core/image' &&
+		( !! attributes.caption?.length || !! attributes.href?.length );
+
+	const helpText =
+		! hasOverrides && hasUnsupportedImageAttributes
+			? __(
+					`Overrides currently don't support image captions or links. Remove the caption or link first before enabling overrides.`
+			  )
+			: __(
+					'Allow changes to this block throughout instances of this pattern.'
+			  );
+
+	return (
+		<>
+			<InspectorControls group="advanced">
+				<BaseControl
+					__nextHasNoMarginBottom
+					id={ controlId }
+					label={ __( 'Overrides' ) }
+					help={ helpText }
+				>
+					<Button
+						__next40pxDefaultSize
+						className="pattern-overrides-control__allow-overrides-button"
+						variant="secondary"
+						aria-haspopup="dialog"
+						onClick={ () => {
+							if ( hasOverrides ) {
+								setShowDisallowOverridesModal( true );
+							} else {
+								setShowAllowOverridesModal( true );
+							}
+						} }
+						disabled={
+							! hasOverrides && hasUnsupportedImageAttributes
+						}
+						accessibleWhenDisabled
+					>
+						{ hasOverrides
+							? __( 'Disable overrides' )
+							: __( 'Enable overrides' ) }
+					</Button>
+				</BaseControl>
+			</InspectorControls>
+
+			{ showAllowOverridesModal && (
+				<AllowOverridesModal
+					initialName={ attributes.metadata?.name }
+					onClose={ () => setShowAllowOverridesModal( false ) }
+					onSave={ ( newName ) => {
+						updateBindings( true, newName );
+					} }
+				/>
+			) }
+			{ showDisallowOverridesModal && (
+				<DisallowOverridesModal
+					onClose={ () => setShowDisallowOverridesModal( false ) }
+					onSave={ () => updateBindings( false ) }
+				/>
+			) }
+		</>
+	);
+}
+
+export default PatternOverridesControls;
diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js
new file mode 100644
index 00000000000000..d350df62cbd003
--- /dev/null
+++ b/packages/patterns/src/components/patterns-manage-button.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { isReusableBlock } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as patternsStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+function PatternsManageButton( { clientId } ) {
+	const { canRemove, isVisible, managePatternsUrl } = useSelect(
+		( select ) => {
+			const { getBlock, canRemoveBlock, getBlockCount } =
+				select( blockEditorStore );
+			const { canUser } = select( coreStore );
+			const reusableBlock = getBlock( clientId );
+
+			return {
+				canRemove: canRemoveBlock( clientId ),
+				isVisible:
+					!! reusableBlock &&
+					isReusableBlock( reusableBlock ) &&
+					!! canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_block',
+						id: reusableBlock.attributes.ref,
+					} ),
+				innerBlockCount: getBlockCount( clientId ),
+				// The site editor and templates both check whether the user
+				// has edit_theme_options capabilities. We can leverage that here
+				// and omit the manage patterns link if the user can't access it.
+				managePatternsUrl: canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} )
+					? addQueryArgs( 'site-editor.php', {
+							path: '/patterns',
+					  } )
+					: addQueryArgs( 'edit.php', {
+							post_type: 'wp_block',
+					  } ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Ignore reason: false positive of the lint rule.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { convertSyncedPatternToStatic } = unlock(
+		useDispatch( patternsStore )
+	);
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ canRemove && (
+				<MenuItem
+					onClick={ () => convertSyncedPatternToStatic( clientId ) }
+				>
+					{ __( 'Detach' ) }
+				</MenuItem>
+			) }
+			<MenuItem href={ managePatternsUrl }>
+				{ __( 'Manage patterns' ) }
+			</MenuItem>
+		</>
+	);
+}
+
+export default PatternsManageButton;
diff --git a/packages/patterns/src/components/rename-pattern-category-modal.js b/packages/patterns/src/components/rename-pattern-category-modal.js
new file mode 100644
index 00000000000000..3df57757315b81
--- /dev/null
+++ b/packages/patterns/src/components/rename-pattern-category-modal.js
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Modal,
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useId, useRef, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import { CATEGORY_SLUG } from './category-selector';
+
+export default function RenamePatternCategoryModal( {
+	category,
+	existingCategories,
+	onClose,
+	onError,
+	onSuccess,
+	...props
+} ) {
+	const id = useId();
+	const textControlRef = useRef();
+	const [ name, setName ] = useState( decodeEntities( category.name ) );
+	const [ isSaving, setIsSaving ] = useState( false );
+	const [ validationMessage, setValidationMessage ] = useState( false );
+	const validationMessageId = validationMessage
+		? `patterns-rename-pattern-category-modal__validation-message-${ id }`
+		: undefined;
+
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const onChange = ( newName ) => {
+		if ( validationMessage ) {
+			setValidationMessage( undefined );
+		}
+		setName( newName );
+	};
+
+	const onSave = async ( event ) => {
+		event.preventDefault();
+
+		if ( isSaving ) {
+			return;
+		}
+
+		if ( ! name || name === category.name ) {
+			const message = __( 'Please enter a new name for this category.' );
+			speak( message, 'assertive' );
+			setValidationMessage( message );
+			textControlRef.current?.focus();
+			return;
+		}
+
+		// Check existing categories to avoid creating duplicates.
+		if (
+			existingCategories.patternCategories.find( ( existingCategory ) => {
+				// Compare the id so that the we don't disallow the user changing the case of their current category
+				// (i.e. renaming 'test' to 'Test').
+				return (
+					existingCategory.id !== category.id &&
+					existingCategory.label.toLowerCase() === name.toLowerCase()
+				);
+			} )
+		) {
+			const message = __(
+				'This category already exists. Please use a different name.'
+			);
+			speak( message, 'assertive' );
+			setValidationMessage( message );
+			textControlRef.current?.focus();
+			return;
+		}
+
+		try {
+			setIsSaving( true );
+
+			// User pattern category properties may differ as they can be
+			// normalized for use alongside template part areas, core pattern
+			// categories etc. As a result we won't just destructure the passed
+			// category object.
+			const savedRecord = await saveEntityRecord(
+				'taxonomy',
+				CATEGORY_SLUG,
+				{
+					id: category.id,
+					slug: category.slug,
+					name,
+				}
+			);
+
+			invalidateResolution( 'getUserPatternCategories' );
+			onSuccess?.( savedRecord );
+			onClose();
+
+			createSuccessNotice( __( 'Pattern category renamed.' ), {
+				type: 'snackbar',
+				id: 'pattern-category-update',
+			} );
+		} catch ( error ) {
+			onError?.();
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+				id: 'pattern-category-update',
+			} );
+		} finally {
+			setIsSaving( false );
+			setName( '' );
+		}
+	};
+
+	const onRequestClose = () => {
+		onClose();
+		setName( '' );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onRequestClose }
+			{ ...props }
+		>
+			<form onSubmit={ onSave }>
+				<VStack spacing="5">
+					<VStack spacing="2">
+						<TextControl
+							ref={ textControlRef }
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Name' ) }
+							value={ name }
+							onChange={ onChange }
+							aria-describedby={ validationMessageId }
+							required
+						/>
+						{ validationMessage && (
+							<span
+								className="patterns-rename-pattern-category-modal__validation-message"
+								id={ validationMessageId }
+							>
+								{ validationMessage }
+							</span>
+						) }
+					</VStack>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onRequestClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+							aria-disabled={
+								! name || name === category.name || isSaving
+							}
+							isBusy={ isSaving }
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/patterns/src/components/rename-pattern-modal.js b/packages/patterns/src/components/rename-pattern-modal.js
new file mode 100644
index 00000000000000..db107841e78c21
--- /dev/null
+++ b/packages/patterns/src/components/rename-pattern-modal.js
@@ -0,0 +1,130 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function RenamePatternModal( {
+	onClose,
+	onError,
+	onSuccess,
+	pattern,
+	...props
+} ) {
+	const originalName = decodeEntities( pattern.title );
+	const [ name, setName ] = useState( originalName );
+	const [ isSaving, setIsSaving ] = useState( false );
+
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
+
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+
+	const onRename = async ( event ) => {
+		event.preventDefault();
+
+		if ( ! name || name === pattern.title || isSaving ) {
+			return;
+		}
+
+		try {
+			await editEntityRecord( 'postType', pattern.type, pattern.id, {
+				title: name,
+			} );
+
+			setIsSaving( true );
+			setName( '' );
+			onClose?.();
+
+			const savedRecord = await saveSpecifiedEntityEdits(
+				'postType',
+				pattern.type,
+				pattern.id,
+				[ 'title' ],
+				{ throwOnError: true }
+			);
+
+			onSuccess?.( savedRecord );
+
+			createSuccessNotice( __( 'Pattern renamed' ), {
+				type: 'snackbar',
+				id: 'pattern-update',
+			} );
+		} catch ( error ) {
+			onError?.();
+
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while renaming the pattern.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'pattern-update',
+			} );
+		} finally {
+			setIsSaving( false );
+			setName( '' );
+		}
+	};
+
+	const onRequestClose = () => {
+		onClose?.();
+		setName( '' );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			{ ...props }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form onSubmit={ onRename }>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Name' ) }
+						value={ name }
+						onChange={ setName }
+						required
+					/>
+
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onRequestClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/patterns/src/components/reset-overrides-control.js b/packages/patterns/src/components/reset-overrides-control.js
new file mode 100644
index 00000000000000..697a595dc42166
--- /dev/null
+++ b/packages/patterns/src/components/reset-overrides-control.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store as blockEditorStore,
+	__unstableBlockToolbarLastItem as BlockToolbarLastItem,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const CONTENT = 'content';
+
+export default function ResetOverridesControl( props ) {
+	const name = props.attributes.metadata?.name;
+	const registry = useRegistry();
+	const isOverriden = useSelect(
+		( select ) => {
+			if ( ! name ) {
+				return;
+			}
+
+			const { getBlockAttributes, getBlockParentsByBlockName } =
+				select( blockEditorStore );
+			const [ patternClientId ] = getBlockParentsByBlockName(
+				props.clientId,
+				'core/block',
+				true
+			);
+
+			if ( ! patternClientId ) {
+				return;
+			}
+
+			const overrides = getBlockAttributes( patternClientId )[ CONTENT ];
+
+			if ( ! overrides ) {
+				return;
+			}
+
+			return overrides.hasOwnProperty( name );
+		},
+		[ props.clientId, name ]
+	);
+
+	function onClick() {
+		const { getBlockAttributes, getBlockParentsByBlockName } =
+			registry.select( blockEditorStore );
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			props.clientId,
+			'core/block',
+			true
+		);
+
+		if ( ! patternClientId ) {
+			return;
+		}
+
+		const overrides = getBlockAttributes( patternClientId )[ CONTENT ];
+
+		if ( ! overrides.hasOwnProperty( name ) ) {
+			return;
+		}
+
+		const { updateBlockAttributes, __unstableMarkLastChangeAsPersistent } =
+			registry.dispatch( blockEditorStore );
+		__unstableMarkLastChangeAsPersistent();
+
+		let newOverrides = { ...overrides };
+		delete newOverrides[ name ];
+
+		if ( ! Object.keys( newOverrides ).length ) {
+			newOverrides = undefined;
+		}
+
+		updateBlockAttributes( patternClientId, {
+			[ CONTENT ]: newOverrides,
+		} );
+	}
+
+	return (
+		<BlockToolbarLastItem>
+			<ToolbarGroup>
+				<ToolbarButton onClick={ onClick } disabled={ ! isOverriden }>
+					{ __( 'Reset' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockToolbarLastItem>
+	);
+}
diff --git a/packages/patterns/src/components/style.scss b/packages/patterns/src/components/style.scss
new file mode 100644
index 00000000000000..1b053ab7ac2517
--- /dev/null
+++ b/packages/patterns/src/components/style.scss
@@ -0,0 +1,59 @@
+.patterns-menu-items__convert-modal {
+	z-index: z-index(".patterns-menu-items__convert-modal");
+
+	// Fix the modal width to prevent added categories from stretching the modal.
+	[role="dialog"] > [role="document"] {
+		width: 350px;
+	}
+
+	.patterns-menu-items__convert-modal-categories {
+		position: relative;
+	}
+
+	.components-form-token-field__suggestions-list:not(:empty) {
+		position: absolute;
+		border: $border-width solid var(--wp-admin-theme-color);
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
+		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
+		box-sizing: border-box;
+		z-index: 1;
+		background-color: $white;
+		width: calc(100% + 2px); // Account for the border width of the token field.
+		left: -1px;
+		min-width: initial;
+		max-height: $grid-unit-60 * 2; // Adjust to not cover the save button, showing three items.
+	}
+}
+
+.patterns-create-modal__name-input input[type="text"] {
+	margin: 0; // Override the default 1px margin-x.
+}
+
+.patterns-rename-pattern-category-modal__validation-message {
+	color: $alert-red;
+
+	// Match the input size.
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}
+
+.pattern-overrides-control__allow-overrides-button {
+	width: 100%;
+	justify-content: center;
+}
+
+
+.patterns-pattern-overrides-toolbar-indicator__popover .components-popover__content {
+	min-width: 260px;
+	padding: $grid-unit-20;
+}
+
+.patterns-pattern-overrides-toolbar-indicator .patterns-pattern-overrides-toolbar-indicator-icon.has-colors svg {
+	fill: var(--wp-block-synced-color);
+}
+
+.editor-collapsible-block-toolbar .patterns-pattern-overrides-toolbar-indicator {
+	height: 32px;
+}
diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
new file mode 100644
index 00000000000000..99563a1a16787f
--- /dev/null
+++ b/packages/patterns/src/constants.js
@@ -0,0 +1,26 @@
+export const PATTERN_TYPES = {
+	theme: 'pattern',
+	user: 'wp_block',
+};
+
+export const PATTERN_DEFAULT_CATEGORY = 'all-patterns';
+export const PATTERN_USER_CATEGORY = 'my-patterns';
+export const EXCLUDED_PATTERN_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+];
+export const PATTERN_SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+// TODO: This should not be hardcoded. Maybe there should be a config and/or an UI.
+export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/button': [ 'text', 'url', 'linkTarget', 'rel' ],
+	'core/image': [ 'id', 'url', 'title', 'alt' ],
+};
+
+export const PATTERN_OVERRIDES_BINDING_SOURCE = 'core/pattern-overrides';
diff --git a/packages/patterns/src/index.js b/packages/patterns/src/index.js
new file mode 100644
index 00000000000000..38cbd8e95737da
--- /dev/null
+++ b/packages/patterns/src/index.js
@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export { store } from './store';
+export * from './private-apis';
diff --git a/packages/patterns/src/index.native.js b/packages/patterns/src/index.native.js
new file mode 100644
index 00000000000000..2a9451884c69fd
--- /dev/null
+++ b/packages/patterns/src/index.native.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './store';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	CreatePatternModal: () => null,
+	PatternsMenuItems: () => null,
+} );
diff --git a/packages/patterns/src/lock-unlock.js b/packages/patterns/src/lock-unlock.js
new file mode 100644
index 00000000000000..2e9ca804023edc
--- /dev/null
+++ b/packages/patterns/src/lock-unlock.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/patterns'
+	);
diff --git a/packages/patterns/src/private-apis.js b/packages/patterns/src/private-apis.js
new file mode 100644
index 00000000000000..8893b3c57d7360
--- /dev/null
+++ b/packages/patterns/src/private-apis.js
@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import { lock } from './lock-unlock';
+import OverridesPanel from './components/overrides-panel';
+import {
+	default as CreatePatternModal,
+	CreatePatternModalContents,
+} from './components/create-pattern-modal';
+import {
+	default as DuplicatePatternModal,
+	useDuplicatePatternProps,
+} from './components/duplicate-pattern-modal';
+import { isOverridableBlock, hasOverridableBlocks } from './api';
+import RenamePatternModal from './components/rename-pattern-modal';
+import PatternsMenuItems from './components';
+import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
+import PatternOverridesControls from './components/pattern-overrides-controls';
+import ResetOverridesControl from './components/reset-overrides-control';
+import PatternOverridesBlockControls from './components/pattern-overrides-block-controls';
+import { useAddPatternCategory } from './private-hooks';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	EXCLUDED_PATTERN_SOURCES,
+	PATTERN_SYNC_TYPES,
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+} from './constants';
+
+export const privateApis = {};
+lock( privateApis, {
+	OverridesPanel,
+	CreatePatternModal,
+	CreatePatternModalContents,
+	DuplicatePatternModal,
+	isOverridableBlock,
+	hasOverridableBlocks,
+	useDuplicatePatternProps,
+	RenamePatternModal,
+	PatternsMenuItems,
+	RenamePatternCategoryModal,
+	PatternOverridesControls,
+	ResetOverridesControl,
+	PatternOverridesBlockControls,
+	useAddPatternCategory,
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	EXCLUDED_PATTERN_SOURCES,
+	PATTERN_SYNC_TYPES,
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+} );
diff --git a/packages/patterns/src/private-hooks.js b/packages/patterns/src/private-hooks.js
new file mode 100644
index 00000000000000..7dee37222fbbda
--- /dev/null
+++ b/packages/patterns/src/private-hooks.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CATEGORY_SLUG } from './components/category-selector';
+
+/**
+ * Helper hook that creates a Map with the core and user patterns categories
+ * and removes any duplicates. It's used when we need to create new user
+ * categories when creating or importing patterns.
+ * This hook also provides a function to find or create a pattern category.
+ *
+ * @return {Object} The merged categories map and the callback function to find or create a category.
+ */
+export function useAddPatternCategory() {
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
+	const { corePatternCategories, userPatternCategories } = useSelect(
+		( select ) => {
+			const { getUserPatternCategories, getBlockPatternCategories } =
+				select( coreStore );
+
+			return {
+				corePatternCategories: getBlockPatternCategories(),
+				userPatternCategories: getUserPatternCategories(),
+			};
+		},
+		[]
+	);
+	const categoryMap = useMemo( () => {
+		// Merge the user and core pattern categories and remove any duplicates.
+		const uniqueCategories = new Map();
+		userPatternCategories.forEach( ( category ) => {
+			uniqueCategories.set( category.label.toLowerCase(), {
+				label: category.label,
+				name: category.name,
+				id: category.id,
+			} );
+		} );
+
+		corePatternCategories.forEach( ( category ) => {
+			if (
+				! uniqueCategories.has( category.label.toLowerCase() ) &&
+				// There are two core categories with `Post` label so explicitly remove the one with
+				// the `query` slug to avoid any confusion.
+				category.name !== 'query'
+			) {
+				uniqueCategories.set( category.label.toLowerCase(), {
+					label: category.label,
+					name: category.name,
+				} );
+			}
+		} );
+		return uniqueCategories;
+	}, [ userPatternCategories, corePatternCategories ] );
+
+	async function findOrCreateTerm( term ) {
+		try {
+			const existingTerm = categoryMap.get( term.toLowerCase() );
+			if ( existingTerm?.id ) {
+				return existingTerm.id;
+			}
+			// If we have an existing core category we need to match the new user category to the
+			// correct slug rather than autogenerating it to prevent duplicates, eg. the core `Headers`
+			// category uses the singular `header` as the slug.
+			const termData = existingTerm
+				? { name: existingTerm.label, slug: existingTerm.name }
+				: { name: term };
+			const newTerm = await saveEntityRecord(
+				'taxonomy',
+				CATEGORY_SLUG,
+				termData,
+				{ throwOnError: true }
+			);
+			invalidateResolution( 'getUserPatternCategories' );
+			return newTerm.id;
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
+			}
+			return error.data.term_id;
+		}
+	}
+
+	return { categoryMap, findOrCreateTerm };
+}
diff --git a/packages/patterns/src/store/actions.js b/packages/patterns/src/store/actions.js
new file mode 100644
index 00000000000000..5eef01b2bb8f89
--- /dev/null
+++ b/packages/patterns/src/store/actions.js
@@ -0,0 +1,162 @@
+/**
+ * WordPress dependencies
+ */
+
+import { getBlockType, cloneBlock } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { PATTERN_SYNC_TYPES } from '../constants';
+
+/**
+ * Returns a generator converting one or more static blocks into a pattern, or creating a new empty pattern.
+ *
+ * @param {string}             title        Pattern title.
+ * @param {'full'|'unsynced'}  syncType     They way block is synced, 'full' or 'unsynced'.
+ * @param {string|undefined}   [content]    Optional serialized content of blocks to convert to pattern.
+ * @param {number[]|undefined} [categories] Ids of any selected categories.
+ */
+export const createPattern =
+	( title, syncType, content, categories ) =>
+	async ( { registry } ) => {
+		const meta =
+			syncType === PATTERN_SYNC_TYPES.unsynced
+				? {
+						wp_pattern_sync_status: syncType,
+				  }
+				: undefined;
+
+		const reusableBlock = {
+			title,
+			content,
+			status: 'publish',
+			meta,
+			wp_pattern_category: categories,
+		};
+
+		const updatedRecord = await registry
+			.dispatch( coreStore )
+			.saveEntityRecord( 'postType', 'wp_block', reusableBlock );
+
+		return updatedRecord;
+	};
+
+/**
+ * Create a pattern from a JSON file.
+ * @param {File}               file         The JSON file instance of the pattern.
+ * @param {number[]|undefined} [categories] Ids of any selected categories.
+ */
+export const createPatternFromFile =
+	( file, categories ) =>
+	async ( { dispatch } ) => {
+		const fileContent = await file.text();
+		/** @type {import('./types').PatternJSON} */
+		let parsedContent;
+		try {
+			parsedContent = JSON.parse( fileContent );
+		} catch ( e ) {
+			throw new Error( 'Invalid JSON file' );
+		}
+		if (
+			parsedContent.__file !== 'wp_block' ||
+			! parsedContent.title ||
+			! parsedContent.content ||
+			typeof parsedContent.title !== 'string' ||
+			typeof parsedContent.content !== 'string' ||
+			( parsedContent.syncStatus &&
+				typeof parsedContent.syncStatus !== 'string' )
+		) {
+			throw new Error( 'Invalid pattern JSON file' );
+		}
+
+		const pattern = await dispatch.createPattern(
+			parsedContent.title,
+			parsedContent.syncStatus,
+			parsedContent.content,
+			categories
+		);
+
+		return pattern;
+	};
+
+/**
+ * Returns a generator converting a synced pattern block into a static block.
+ *
+ * @param {string} clientId The client ID of the block to attach.
+ */
+export const convertSyncedPatternToStatic =
+	( clientId ) =>
+	( { registry } ) => {
+		const patternBlock = registry
+			.select( blockEditorStore )
+			.getBlock( clientId );
+		const existingOverrides = patternBlock.attributes?.content;
+
+		function cloneBlocksAndRemoveBindings( blocks ) {
+			return blocks.map( ( block ) => {
+				let metadata = block.attributes.metadata;
+				if ( metadata ) {
+					metadata = { ...metadata };
+					delete metadata.id;
+					delete metadata.bindings;
+					// Use overridden values of the pattern block if they exist.
+					if ( existingOverrides?.[ metadata.name ] ) {
+						// Iterate over each overriden attribute.
+						for ( const [ attributeName, value ] of Object.entries(
+							existingOverrides[ metadata.name ]
+						) ) {
+							// Skip if the attribute does not exist in the block type.
+							if (
+								! getBlockType( block.name )?.attributes[
+									attributeName
+								]
+							) {
+								continue;
+							}
+							// Update the block attribute with the override value.
+							block.attributes[ attributeName ] = value;
+						}
+					}
+				}
+				return cloneBlock(
+					block,
+					{
+						metadata:
+							metadata && Object.keys( metadata ).length > 0
+								? metadata
+								: undefined,
+					},
+					cloneBlocksAndRemoveBindings( block.innerBlocks )
+				);
+			} );
+		}
+
+		const patternInnerBlocks = registry
+			.select( blockEditorStore )
+			.getBlocks( patternBlock.clientId );
+
+		registry
+			.dispatch( blockEditorStore )
+			.replaceBlocks(
+				patternBlock.clientId,
+				cloneBlocksAndRemoveBindings( patternInnerBlocks )
+			);
+	};
+
+/**
+ * Returns an action descriptor for SET_EDITING_PATTERN action.
+ *
+ * @param {string}  clientId  The clientID of the pattern to target.
+ * @param {boolean} isEditing Whether the block should be in editing state.
+ * @return {Object} Action descriptor.
+ */
+export function setEditingPattern( clientId, isEditing ) {
+	return {
+		type: 'SET_EDITING_PATTERN',
+		clientId,
+		isEditing,
+	};
+}
diff --git a/packages/patterns/src/store/constants.js b/packages/patterns/src/store/constants.js
new file mode 100644
index 00000000000000..138fc6d21d1f2f
--- /dev/null
+++ b/packages/patterns/src/store/constants.js
@@ -0,0 +1,4 @@
+/**
+ * Module Constants
+ */
+export const STORE_NAME = 'core/patterns';
diff --git a/packages/patterns/src/store/index.js b/packages/patterns/src/store/index.js
new file mode 100644
index 00000000000000..af3da7f0ff4980
--- /dev/null
+++ b/packages/patterns/src/store/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as actions from './actions';
+import { STORE_NAME } from './constants';
+import * as selectors from './selectors';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Post editor data store configuration.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
+ *
+ * @type {Object}
+ */
+export const storeConfig = {
+	reducer,
+};
+
+/**
+ * Store definition for the editor namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
+ *
+ * @type {Object}
+ */
+export const store = createReduxStore( STORE_NAME, {
+	...storeConfig,
+} );
+
+register( store );
+unlock( store ).registerPrivateActions( actions );
+unlock( store ).registerPrivateSelectors( selectors );
diff --git a/packages/patterns/src/store/reducer.js b/packages/patterns/src/store/reducer.js
new file mode 100644
index 00000000000000..b74cd29f55dc4d
--- /dev/null
+++ b/packages/patterns/src/store/reducer.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+
+export function isEditingPattern( state = {}, action ) {
+	if ( action?.type === 'SET_EDITING_PATTERN' ) {
+		return {
+			...state,
+			[ action.clientId ]: action.isEditing,
+		};
+	}
+
+	return state;
+}
+
+export default combineReducers( {
+	isEditingPattern,
+} );
diff --git a/packages/patterns/src/store/selectors.js b/packages/patterns/src/store/selectors.js
new file mode 100644
index 00000000000000..63a4d5ff9dfbdf
--- /dev/null
+++ b/packages/patterns/src/store/selectors.js
@@ -0,0 +1,10 @@
+/**
+ * Returns true if pattern is in the editing state.
+ *
+ * @param {Object} state    Global application state.
+ * @param {number} clientId the clientID of the block.
+ * @return {boolean} Whether the pattern is in the editing state.
+ */
+export function isEditingPattern( state, clientId ) {
+	return state.isEditingPattern[ clientId ];
+}
diff --git a/packages/patterns/src/style.scss b/packages/patterns/src/style.scss
new file mode 100644
index 00000000000000..e8cce79ec9f956
--- /dev/null
+++ b/packages/patterns/src/style.scss
@@ -0,0 +1 @@
+@import "./components/style.scss";
diff --git a/packages/plugins/.npmrc b/packages/plugins/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/plugins/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index f21f3a07019940..fc9199892ade1d 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,119 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+## 7.8.0 (2024-09-19)
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.26.0 (2024-05-16)
+
+## 6.25.0 (2024-05-02)
+
+## 6.24.0 (2024-04-19)
+
+## 6.23.0 (2024-04-03)
+
+## 6.22.0 (2024-03-21)
+
+## 6.21.0 (2024-03-06)
+
+## 6.20.0 (2024-02-21)
+
+## 6.19.0 (2024-02-09)
+
+## 6.18.0 (2024-01-24)
+
+## 6.17.0 (2024-01-10)
+
+## 6.16.0 (2023-12-13)
+
+## 6.15.0 (2023-11-29)
+
+## 6.14.0 (2023-11-16)
+
+## 6.13.0 (2023-11-02)
+
+## 6.12.0 (2023-10-18)
+
+## 6.11.0 (2023-10-05)
+
+## 6.10.0 (2023-09-20)
+
+## 6.9.0 (2023-08-31)
+
+## 6.8.0 (2023-08-16)
+
+## 6.7.0 (2023-08-10)
+
+## 6.6.0 (2023-07-20)
+
+## 6.5.0 (2023-07-05)
+
+## 6.4.0 (2023-06-23)
+
+## 6.3.0 (2023-06-07)
+
+## 6.2.0 (2023-05-24)
+
+## 6.1.0 (2023-05-10)
+
+## 6.0.0 (2023-04-26)
+
+### Breaking Changes
+
+-   Publish types for `@wordpress/plugins` ([#49649](https://github.com/WordPress/gutenberg/pull/49649))
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 4.20.0 (2022-11-16)
 
 ## 4.19.0 (2022-11-02)
@@ -44,7 +157,7 @@
 
 ## 4.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -83,6 +196,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/plugins/README.md b/packages/plugins/README.md
index fbdfb83e5e2367..ac2434e51442f4 100644
--- a/packages/plugins/README.md
+++ b/packages/plugins/README.md
@@ -26,7 +26,7 @@ _Parameters_
 
 _Returns_
 
--   `?WPPlugin`: Plugin setting.
+-   `WPPlugin | undefined`: Plugin setting.
 
 #### getPlugins
 
@@ -34,7 +34,7 @@ Returns all registered plugins without a scope or for a given scope.
 
 _Parameters_
 
--   _scope_ `[string]`: The scope to be used when rendering inside a plugin area. No scope by default.
+-   _scope_ `string`: The scope to be used when rendering inside a plugin area. No scope by default.
 
 _Returns_
 
@@ -48,7 +48,7 @@ _Usage_
 
 ```js
 // Using ES5 syntax
-var el = wp.element.createElement;
+var el = React.createElement;
 var PluginArea = wp.plugins.PluginArea;
 
 function Layout() {
@@ -68,9 +68,15 @@ const Layout = () => (
 );
 ```
 
+_Parameters_
+
+-   _props_ `{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }`:
+-   _props.scope_ `string`:
+-   _props.onError_ `( name: WPPlugin[ 'name' ], error: Error ) => void`:
+
 _Returns_
 
--   `WPComponent`: The component to be rendered.
+-   `Component`: The component to be rendered.
 
 #### registerPlugin
 
@@ -80,12 +86,12 @@ _Usage_
 
 ```js
 // Using ES5 syntax
-var el = wp.element.createElement;
+var el = React.createElement;
 var Fragment = wp.element.Fragment;
-var PluginSidebar = wp.editPost.PluginSidebar;
-var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+var PluginSidebar = wp.editor.PluginSidebar;
+var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
 var registerPlugin = wp.plugins.registerPlugin;
-var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
+var moreIcon = React.createElement( 'svg' ); //... svg element.
 
 function Component() {
 	return el(
@@ -117,7 +123,7 @@ registerPlugin( 'plugin-name', {
 
 ```js
 // Using ESNext syntax
-import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
+import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
 import { registerPlugin } from '@wordpress/plugins';
 import { more } from '@wordpress/icons';
 
@@ -141,12 +147,12 @@ registerPlugin( 'plugin-name', {
 
 _Parameters_
 
--   _name_ `string`: A string identifying the plugin.Must be unique across all registered plugins.
--   _settings_ `Omit<WPPlugin, 'name'>`: The settings for this plugin.
+-   _name_ `string`: A string identifying the plugin. Must be unique across all registered plugins.
+-   _settings_ `PluginSettings`: The settings for this plugin.
 
 _Returns_
 
--   `WPPlugin`: The final plugin settings object.
+-   `PluginSettings | null`: The final plugin settings object.
 
 #### unregisterPlugin
 
@@ -174,20 +180,29 @@ _Parameters_
 
 _Returns_
 
--   `?WPPlugin`: The previous plugin settings object, if it has been successfully unregistered; otherwise `undefined`.
+-   `WPPlugin | undefined`: The previous plugin settings object, if it has been successfully unregistered; otherwise `undefined`.
+
+#### usePluginContext
+
+A hook that returns the plugin context.
+
+_Returns_
+
+-   `PluginContext`: Plugin context
 
 #### withPluginContext
 
-A Higher Order Component used to inject Plugin context to the
-wrapped component.
+> **Deprecated** 6.8.0 Use `usePluginContext` hook instead.
+
+A Higher Order Component used to inject Plugin context to the wrapped component.
 
 _Parameters_
 
--   _mapContextToProps_ `Function`: Function called on every context change, expected to return object of props to merge with the component's own props.
+-   _mapContextToProps_ `( context: PluginContext, props: T ) => T & PluginContext`: Function called on every context change, expected to return object of props to merge with the component's own props.
 
 _Returns_
 
--   `WPComponent`: Enhanced component with injected context as props.
+-   `Component`: Enhanced component with injected context as props.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index a6ad25e560dab4..97c0ac64259905 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "4.20.0",
+	"version": "7.13.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,21 +19,28 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/icons": "file:../icons",
-		"memize": "^1.1.0"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/is-shallow-equal": "*",
+		"memize": "^2.0.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/plugins/src/api/index.js b/packages/plugins/src/api/index.js
deleted file mode 100644
index 3e6a3f2b16c9d0..00000000000000
--- a/packages/plugins/src/api/index.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
-
-/**
- * WordPress dependencies
- */
-import { applyFilters, doAction } from '@wordpress/hooks';
-import { plugins as pluginsIcon } from '@wordpress/icons';
-
-/**
- * Defined behavior of a plugin type.
- *
- * @typedef {Object} WPPlugin
- *
- * @property {string}                    name    A string identifying the plugin. Must be
- *                                               unique across all registered plugins.
- * @property {string|WPElement|Function} [icon]  An icon to be shown in the UI. It can
- *                                               be a slug of the Dashicon, or an element
- *                                               (or function returning an element) if you
- *                                               choose to render your own SVG.
- * @property {Function}                  render  A component containing the UI elements
- *                                               to be rendered.
- * @property {string}                    [scope] The optional scope to be used when rendering inside
- *                                               a plugin area. No scope by default.
- */
-
-/**
- * Plugin definitions keyed by plugin name.
- *
- * @type {Object.<string,WPPlugin>}
- */
-const plugins = {};
-
-/**
- * Registers a plugin to the editor.
- *
- * @param {string}                 name     A string identifying the plugin.Must be
- *                                          unique across all registered plugins.
- * @param {Omit<WPPlugin, 'name'>} settings The settings for this plugin.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var el = wp.element.createElement;
- * var Fragment = wp.element.Fragment;
- * var PluginSidebar = wp.editPost.PluginSidebar;
- * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
- * var registerPlugin = wp.plugins.registerPlugin;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function Component() {
- * 	return el(
- * 		Fragment,
- * 		{},
- * 		el(
- * 			PluginSidebarMoreMenuItem,
- * 			{
- * 				target: 'sidebar-name',
- * 			},
- * 			'My Sidebar'
- * 		),
- * 		el(
- * 			PluginSidebar,
- * 			{
- * 				name: 'sidebar-name',
- * 				title: 'My Sidebar',
- * 			},
- * 			'Content of the sidebar'
- * 		)
- * 	);
- * }
- * registerPlugin( 'plugin-name', {
- * 	icon: moreIcon,
- * 	render: Component,
- * 	scope: 'my-page',
- * } );
- * ```
- *
- * @example
- * ```js
- * // Using ESNext syntax
- * import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
- * import { registerPlugin } from '@wordpress/plugins';
- * import { more } from '@wordpress/icons';
- *
- * const Component = () => (
- * 	<>
- * 		<PluginSidebarMoreMenuItem
- * 			target="sidebar-name"
- * 		>
- * 			My Sidebar
- * 		</PluginSidebarMoreMenuItem>
- * 		<PluginSidebar
- * 			name="sidebar-name"
- * 			title="My Sidebar"
- * 		>
- * 			Content of the sidebar
- * 		</PluginSidebar>
- * 	</>
- * );
- *
- * registerPlugin( 'plugin-name', {
- * 	icon: more,
- * 	render: Component,
- * 	scope: 'my-page',
- * } );
- * ```
- *
- * @return {WPPlugin} The final plugin settings object.
- */
-export function registerPlugin( name, settings ) {
-	if ( typeof settings !== 'object' ) {
-		console.error( 'No settings object provided!' );
-		return null;
-	}
-	if ( typeof name !== 'string' ) {
-		console.error( 'Plugin name must be string.' );
-		return null;
-	}
-	if ( ! /^[a-z][a-z0-9-]*$/.test( name ) ) {
-		console.error(
-			'Plugin name must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-plugin".'
-		);
-		return null;
-	}
-	if ( plugins[ name ] ) {
-		console.error( `Plugin "${ name }" is already registered.` );
-	}
-
-	settings = applyFilters( 'plugins.registerPlugin', settings, name );
-
-	const { render, scope } = settings;
-
-	if ( typeof render !== 'function' ) {
-		console.error(
-			'The "render" property must be specified and must be a valid function.'
-		);
-		return null;
-	}
-
-	if ( scope ) {
-		if ( typeof scope !== 'string' ) {
-			console.error( 'Plugin scope must be string.' );
-			return null;
-		}
-
-		if ( ! /^[a-z][a-z0-9-]*$/.test( scope ) ) {
-			console.error(
-				'Plugin scope must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-page".'
-			);
-			return null;
-		}
-	}
-
-	plugins[ name ] = {
-		name,
-		icon: pluginsIcon,
-		...settings,
-	};
-
-	doAction( 'plugins.pluginRegistered', settings, name );
-
-	return settings;
-}
-
-/**
- * Unregisters a plugin by name.
- *
- * @param {string} name Plugin name.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var unregisterPlugin = wp.plugins.unregisterPlugin;
- *
- * unregisterPlugin( 'plugin-name' );
- * ```
- *
- * @example
- * ```js
- * // Using ESNext syntax
- * import { unregisterPlugin } from '@wordpress/plugins';
- *
- * unregisterPlugin( 'plugin-name' );
- * ```
- *
- * @return {?WPPlugin} The previous plugin settings object, if it has been
- *                     successfully unregistered; otherwise `undefined`.
- */
-export function unregisterPlugin( name ) {
-	if ( ! plugins[ name ] ) {
-		console.error( 'Plugin "' + name + '" is not registered.' );
-		return;
-	}
-	const oldPlugin = plugins[ name ];
-	delete plugins[ name ];
-
-	doAction( 'plugins.pluginUnregistered', oldPlugin, name );
-
-	return oldPlugin;
-}
-
-/**
- * Returns a registered plugin settings.
- *
- * @param {string} name Plugin name.
- *
- * @return {?WPPlugin} Plugin setting.
- */
-export function getPlugin( name ) {
-	return plugins[ name ];
-}
-
-/**
- * Returns all registered plugins without a scope or for a given scope.
- *
- * @param {string} [scope] The scope to be used when rendering inside
- *                         a plugin area. No scope by default.
- *
- * @return {WPPlugin[]} The list of plugins without a scope or for a given scope.
- */
-export function getPlugins( scope ) {
-	return Object.values( plugins ).filter(
-		( plugin ) => plugin.scope === scope
-	);
-}
diff --git a/packages/plugins/src/api/index.ts b/packages/plugins/src/api/index.ts
new file mode 100644
index 00000000000000..932628ddd623db
--- /dev/null
+++ b/packages/plugins/src/api/index.ts
@@ -0,0 +1,248 @@
+/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */
+/**
+ * External dependencies
+ */
+import type { ComponentType } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters, doAction } from '@wordpress/hooks';
+import { plugins as pluginsIcon } from '@wordpress/icons';
+import type { IconType } from '@wordpress/components';
+
+/**
+ * Defined behavior of a plugin type.
+ */
+export interface WPPlugin {
+	/**
+	 * A string identifying the plugin. Must be unique across all registered plugins.
+	 */
+	name: string;
+
+	/**
+	 * An icon to be shown in the UI. It can be a slug of the Dashicon, or an
+	 * element (or function returning an element) if you choose to render your
+	 * own SVG.
+	 */
+	icon?: IconType;
+
+	/**
+	 * A component containing the UI elements to be rendered.
+	 */
+	render: ComponentType;
+
+	/**
+	 * The optional scope to be used when rendering inside a plugin area.
+	 * No scope by default.
+	 */
+	scope?: string;
+}
+
+type PluginSettings = Omit< WPPlugin, 'name' >;
+
+/**
+ * Plugin definitions keyed by plugin name.
+ */
+const plugins = {} as Record< string, WPPlugin >;
+
+/**
+ * Registers a plugin to the editor.
+ *
+ * @param name     A string identifying the plugin. Must be
+ *                 unique across all registered plugins.
+ * @param settings The settings for this plugin.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var el = React.createElement;
+ * var Fragment = wp.element.Fragment;
+ * var PluginSidebar = wp.editor.PluginSidebar;
+ * var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
+ * var registerPlugin = wp.plugins.registerPlugin;
+ * var moreIcon = React.createElement( 'svg' ); //... svg element.
+ *
+ * function Component() {
+ * 	return el(
+ * 		Fragment,
+ * 		{},
+ * 		el(
+ * 			PluginSidebarMoreMenuItem,
+ * 			{
+ * 				target: 'sidebar-name',
+ * 			},
+ * 			'My Sidebar'
+ * 		),
+ * 		el(
+ * 			PluginSidebar,
+ * 			{
+ * 				name: 'sidebar-name',
+ * 				title: 'My Sidebar',
+ * 			},
+ * 			'Content of the sidebar'
+ * 		)
+ * 	);
+ * }
+ * registerPlugin( 'plugin-name', {
+ * 	icon: moreIcon,
+ * 	render: Component,
+ * 	scope: 'my-page',
+ * } );
+ * ```
+ *
+ * @example
+ * ```js
+ * // Using ESNext syntax
+ * import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
+ * import { registerPlugin } from '@wordpress/plugins';
+ * import { more } from '@wordpress/icons';
+ *
+ * const Component = () => (
+ * 	<>
+ * 		<PluginSidebarMoreMenuItem
+ * 			target="sidebar-name"
+ * 		>
+ * 			My Sidebar
+ * 		</PluginSidebarMoreMenuItem>
+ * 		<PluginSidebar
+ * 			name="sidebar-name"
+ * 			title="My Sidebar"
+ * 		>
+ * 			Content of the sidebar
+ * 		</PluginSidebar>
+ * 	</>
+ * );
+ *
+ * registerPlugin( 'plugin-name', {
+ * 	icon: more,
+ * 	render: Component,
+ * 	scope: 'my-page',
+ * } );
+ * ```
+ *
+ * @return The final plugin settings object.
+ */
+export function registerPlugin(
+	name: string,
+	settings: PluginSettings
+): PluginSettings | null {
+	if ( typeof settings !== 'object' ) {
+		console.error( 'No settings object provided!' );
+		return null;
+	}
+	if ( typeof name !== 'string' ) {
+		console.error( 'Plugin name must be string.' );
+		return null;
+	}
+	if ( ! /^[a-z][a-z0-9-]*$/.test( name ) ) {
+		console.error(
+			'Plugin name must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-plugin".'
+		);
+		return null;
+	}
+	if ( plugins[ name ] ) {
+		console.error( `Plugin "${ name }" is already registered.` );
+	}
+
+	settings = applyFilters(
+		'plugins.registerPlugin',
+		settings,
+		name
+	) as PluginSettings;
+
+	const { render, scope } = settings;
+
+	if ( typeof render !== 'function' ) {
+		console.error(
+			'The "render" property must be specified and must be a valid function.'
+		);
+		return null;
+	}
+
+	if ( scope ) {
+		if ( typeof scope !== 'string' ) {
+			console.error( 'Plugin scope must be string.' );
+			return null;
+		}
+
+		if ( ! /^[a-z][a-z0-9-]*$/.test( scope ) ) {
+			console.error(
+				'Plugin scope must include only lowercase alphanumeric characters or dashes, and start with a letter. Example: "my-page".'
+			);
+			return null;
+		}
+	}
+
+	plugins[ name ] = {
+		name,
+		icon: pluginsIcon,
+		...settings,
+	};
+
+	doAction( 'plugins.pluginRegistered', settings, name );
+
+	return settings;
+}
+
+/**
+ * Unregisters a plugin by name.
+ *
+ * @param name Plugin name.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var unregisterPlugin = wp.plugins.unregisterPlugin;
+ *
+ * unregisterPlugin( 'plugin-name' );
+ * ```
+ *
+ * @example
+ * ```js
+ * // Using ESNext syntax
+ * import { unregisterPlugin } from '@wordpress/plugins';
+ *
+ * unregisterPlugin( 'plugin-name' );
+ * ```
+ *
+ * @return The previous plugin settings object, if it has been
+ *         successfully unregistered; otherwise `undefined`.
+ */
+export function unregisterPlugin( name: string ): WPPlugin | undefined {
+	if ( ! plugins[ name ] ) {
+		console.error( 'Plugin "' + name + '" is not registered.' );
+		return;
+	}
+	const oldPlugin = plugins[ name ];
+	delete plugins[ name ];
+
+	doAction( 'plugins.pluginUnregistered', oldPlugin, name );
+
+	return oldPlugin;
+}
+
+/**
+ * Returns a registered plugin settings.
+ *
+ * @param name Plugin name.
+ *
+ * @return Plugin setting.
+ */
+export function getPlugin( name: string ): WPPlugin | undefined {
+	return plugins[ name ];
+}
+
+/**
+ * Returns all registered plugins without a scope or for a given scope.
+ *
+ * @param scope The scope to be used when rendering inside
+ *              a plugin area. No scope by default.
+ *
+ * @return The list of plugins without a scope or for a given scope.
+ */
+export function getPlugins( scope?: string ): WPPlugin[] {
+	return Object.values( plugins ).filter(
+		( plugin ) => plugin.scope === scope
+	);
+}
diff --git a/packages/plugins/src/components/index.js b/packages/plugins/src/components/index.js
index dae012a5cadefc..12a9a96808bc6a 100644
--- a/packages/plugins/src/components/index.js
+++ b/packages/plugins/src/components/index.js
@@ -1,2 +1,2 @@
 export { default as PluginArea } from './plugin-area';
-export { withPluginContext } from './plugin-context';
+export { usePluginContext, withPluginContext } from './plugin-context';
diff --git a/packages/plugins/src/components/plugin-area/index.js b/packages/plugins/src/components/plugin-area/index.js
deleted file mode 100644
index 30c9d59371206e..00000000000000
--- a/packages/plugins/src/components/plugin-area/index.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { addAction, removeAction } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { PluginContextProvider } from '../plugin-context';
-import { PluginErrorBoundary } from '../plugin-error-boundary';
-import { getPlugins } from '../../api';
-
-/**
- * A component that renders all plugin fills in a hidden div.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var el = wp.element.createElement;
- * var PluginArea = wp.plugins.PluginArea;
- *
- * function Layout() {
- * 	return el(
- * 		'div',
- * 		{ scope: 'my-page' },
- * 		'Content of the page',
- * 		PluginArea
- * 	);
- * }
- * ```
- *
- * @example
- * ```js
- * // Using ESNext syntax
- * import { PluginArea } from '@wordpress/plugins';
- *
- * const Layout = () => (
- * 	<div>
- * 		Content of the page
- * 		<PluginArea scope="my-page" />
- * 	</div>
- * );
- * ```
- *
- * @return {WPComponent} The component to be rendered.
- */
-class PluginArea extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.setPlugins = this.setPlugins.bind( this );
-		this.memoizedContext = memoize( ( name, icon ) => {
-			return {
-				name,
-				icon,
-			};
-		} );
-		this.state = this.getCurrentPluginsState();
-	}
-
-	getCurrentPluginsState() {
-		return {
-			plugins: getPlugins( this.props.scope ).map(
-				( { icon, name, render } ) => {
-					return {
-						Plugin: render,
-						context: this.memoizedContext( name, icon ),
-					};
-				}
-			),
-		};
-	}
-
-	componentDidMount() {
-		addAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered',
-			this.setPlugins
-		);
-		addAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered',
-			this.setPlugins
-		);
-	}
-
-	componentWillUnmount() {
-		removeAction(
-			'plugins.pluginRegistered',
-			'core/plugins/plugin-area/plugins-registered'
-		);
-		removeAction(
-			'plugins.pluginUnregistered',
-			'core/plugins/plugin-area/plugins-unregistered'
-		);
-	}
-
-	setPlugins() {
-		this.setState( this.getCurrentPluginsState );
-	}
-
-	render() {
-		return (
-			<div style={ { display: 'none' } }>
-				{ this.state.plugins.map( ( { context, Plugin } ) => (
-					<PluginContextProvider
-						key={ context.name }
-						value={ context }
-					>
-						<PluginErrorBoundary
-							name={ context.name }
-							onError={ this.props.onError }
-						>
-							<Plugin />
-						</PluginErrorBoundary>
-					</PluginContextProvider>
-				) ) }
-			</div>
-		);
-	}
-}
-
-export default PluginArea;
diff --git a/packages/plugins/src/components/plugin-area/index.tsx b/packages/plugins/src/components/plugin-area/index.tsx
new file mode 100644
index 00000000000000..406ba6724b6a13
--- /dev/null
+++ b/packages/plugins/src/components/plugin-area/index.tsx
@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+import { addAction, removeAction } from '@wordpress/hooks';
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/**
+ * Internal dependencies
+ */
+import { PluginContextProvider } from '../plugin-context';
+import { PluginErrorBoundary } from '../plugin-error-boundary';
+import { getPlugins } from '../../api';
+import type { PluginContext } from '../plugin-context';
+import type { WPPlugin } from '../../api';
+
+const getPluginContext = memoize(
+	( icon: PluginContext[ 'icon' ], name: PluginContext[ 'name' ] ) => ( {
+		icon,
+		name,
+	} )
+);
+
+/**
+ * A component that renders all plugin fills in a hidden div.
+ *
+ * @param  props
+ * @param  props.scope
+ * @param  props.onError
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var el = React.createElement;
+ * var PluginArea = wp.plugins.PluginArea;
+ *
+ * function Layout() {
+ * 	return el(
+ * 		'div',
+ * 		{ scope: 'my-page' },
+ * 		'Content of the page',
+ * 		PluginArea
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```js
+ * // Using ESNext syntax
+ * import { PluginArea } from '@wordpress/plugins';
+ *
+ * const Layout = () => (
+ * 	<div>
+ * 		Content of the page
+ * 		<PluginArea scope="my-page" />
+ * 	</div>
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PluginArea( {
+	scope,
+	onError,
+}: {
+	scope?: string;
+	onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void;
+} ) {
+	const store = useMemo( () => {
+		let lastValue: WPPlugin[] = [];
+
+		return {
+			subscribe(
+				listener: (
+					plugin: Omit< WPPlugin, 'name' >,
+					name: WPPlugin[ 'name' ]
+				) => void
+			) {
+				addAction(
+					'plugins.pluginRegistered',
+					'core/plugins/plugin-area/plugins-registered',
+					listener
+				);
+				addAction(
+					'plugins.pluginUnregistered',
+					'core/plugins/plugin-area/plugins-unregistered',
+					listener
+				);
+				return () => {
+					removeAction(
+						'plugins.pluginRegistered',
+						'core/plugins/plugin-area/plugins-registered'
+					);
+					removeAction(
+						'plugins.pluginUnregistered',
+						'core/plugins/plugin-area/plugins-unregistered'
+					);
+				};
+			},
+			getValue() {
+				const nextValue = getPlugins( scope );
+
+				if ( ! isShallowEqual( lastValue, nextValue ) ) {
+					lastValue = nextValue;
+				}
+
+				return lastValue;
+			},
+		};
+	}, [ scope ] );
+
+	const plugins = useSyncExternalStore(
+		store.subscribe,
+		store.getValue,
+		store.getValue
+	);
+
+	return (
+		<div style={ { display: 'none' } }>
+			{ plugins.map( ( { icon, name, render: Plugin } ) => (
+				<PluginContextProvider
+					key={ name }
+					value={ getPluginContext( icon, name ) }
+				>
+					<PluginErrorBoundary name={ name } onError={ onError }>
+						<Plugin />
+					</PluginErrorBoundary>
+				</PluginContextProvider>
+			) ) }
+		</div>
+	);
+}
+
+export default PluginArea;
diff --git a/packages/plugins/src/components/plugin-context/index.js b/packages/plugins/src/components/plugin-context/index.js
deleted file mode 100644
index d3a73ca0a0fe1b..00000000000000
--- a/packages/plugins/src/components/plugin-context/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-
-const { Consumer, Provider } = createContext( {
-	name: null,
-	icon: null,
-} );
-
-export { Provider as PluginContextProvider };
-
-/**
- * A Higher Order Component used to inject Plugin context to the
- * wrapped component.
- *
- * @param {Function} mapContextToProps Function called on every context change,
- *                                     expected to return object of props to
- *                                     merge with the component's own props.
- *
- * @return {WPComponent} Enhanced component with injected context as props.
- */
-export const withPluginContext = ( mapContextToProps ) =>
-	createHigherOrderComponent( ( OriginalComponent ) => {
-		return ( props ) => (
-			<Consumer>
-				{ ( context ) => (
-					<OriginalComponent
-						{ ...props }
-						{ ...mapContextToProps( context, props ) }
-					/>
-				) }
-			</Consumer>
-		);
-	}, 'withPluginContext' );
diff --git a/packages/plugins/src/components/plugin-context/index.tsx b/packages/plugins/src/components/plugin-context/index.tsx
new file mode 100644
index 00000000000000..3e2d687229011c
--- /dev/null
+++ b/packages/plugins/src/components/plugin-context/index.tsx
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import type { WPPlugin } from '../../api';
+
+export interface PluginContext {
+	name: null | WPPlugin[ 'name' ];
+	icon: null | WPPlugin[ 'icon' ];
+}
+
+const Context = createContext< PluginContext >( {
+	name: null,
+	icon: null,
+} );
+
+export const PluginContextProvider = Context.Provider;
+
+/**
+ * A hook that returns the plugin context.
+ *
+ * @return {PluginContext} Plugin context
+ */
+export function usePluginContext() {
+	return useContext( Context );
+}
+
+/**
+ * A Higher Order Component used to inject Plugin context to the
+ * wrapped component.
+ *
+ * @deprecated 6.8.0 Use `usePluginContext` hook instead.
+ *
+ * @param  mapContextToProps Function called on every context change,
+ *                           expected to return object of props to
+ *                           merge with the component's own props.
+ *
+ * @return {Component} Enhanced component with injected context as props.
+ */
+export const withPluginContext = (
+	mapContextToProps: < T >(
+		context: PluginContext,
+		props: T
+	) => T & PluginContext
+) =>
+	createHigherOrderComponent( ( OriginalComponent ) => {
+		deprecated( 'wp.plugins.withPluginContext', {
+			since: '6.8.0',
+			alternative: 'wp.plugins.usePluginContext',
+		} );
+		return ( props ) => (
+			<Context.Consumer>
+				{ ( context ) => (
+					<OriginalComponent
+						{ ...props }
+						{ ...mapContextToProps( context, props ) }
+					/>
+				) }
+			</Context.Consumer>
+		);
+	}, 'withPluginContext' );
diff --git a/packages/plugins/src/components/plugin-error-boundary/index.js b/packages/plugins/src/components/plugin-error-boundary/index.js
index 91aec7e935dec8..28798e117f6a77 100644
--- a/packages/plugins/src/components/plugin-error-boundary/index.js
+++ b/packages/plugins/src/components/plugin-error-boundary/index.js
@@ -4,6 +4,9 @@
 import { Component } from '@wordpress/element';
 
 export class PluginErrorBoundary extends Component {
+	/**
+	 * @param {Object} props
+	 */
 	constructor( props ) {
 		super( props );
 		this.state = {
@@ -15,6 +18,9 @@ export class PluginErrorBoundary extends Component {
 		return { hasError: true };
 	}
 
+	/**
+	 * @param {Error} error Error object passed by React.
+	 */
 	componentDidCatch( error ) {
 		const { name, onError } = this.props;
 		if ( onError ) {
diff --git a/packages/plugins/src/components/test/plugin-area.js b/packages/plugins/src/components/test/plugin-area.js
new file mode 100644
index 00000000000000..b566b487958870
--- /dev/null
+++ b/packages/plugins/src/components/test/plugin-area.js
@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line testing-library/no-manual-cleanup
+import { act, render, cleanup } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { getPlugins, unregisterPlugin, registerPlugin } from '../../api';
+import PluginArea from '../plugin-area';
+
+describe( 'PluginArea', () => {
+	afterEach( () => {
+		// Unmount components before unregistering the plugins.
+		// RTL uses top-level `afterEach` for cleanup, executed after this teardown.
+		cleanup();
+		getPlugins().forEach( ( plugin ) => {
+			unregisterPlugin( plugin.name );
+		} );
+		getPlugins( 'my-app' ).forEach( ( plugin ) => {
+			unregisterPlugin( plugin.name );
+		} );
+	} );
+
+	const TestComponent = ( { content } ) => {
+		return `plugin: ${ content }.`;
+	};
+
+	test( 'renders unscoped plugin', () => {
+		registerPlugin( 'unscoped', {
+			render: () => <TestComponent content="unscoped" />,
+			icon: 'smiley',
+		} );
+
+		const { container } = render( <PluginArea /> );
+
+		expect( container ).toHaveTextContent( 'plugin: unscoped.' );
+	} );
+
+	test( 'renders scoped plugin', () => {
+		registerPlugin( 'scoped', {
+			render: () => <TestComponent content="scoped" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		expect( container ).toHaveTextContent( 'plugin: scoped.' );
+	} );
+
+	test( 'rerenders when a new plugin is registered', () => {
+		registerPlugin( 'foo', {
+			render: () => <TestComponent content="foo" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		act( () => {
+			registerPlugin( 'bar', {
+				render: () => <TestComponent content="bar" />,
+				icon: 'smiley',
+				scope: 'my-app',
+			} );
+		} );
+
+		expect( container ).toHaveTextContent( 'plugin: bar.' );
+	} );
+
+	test( 'rerenders when a plugin is unregistered', () => {
+		registerPlugin( 'one', {
+			render: () => <TestComponent content="one" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+		registerPlugin( 'two', {
+			render: () => <TestComponent content="two" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		const { container } = render( <PluginArea scope="my-app" /> );
+
+		expect( container ).toHaveTextContent( 'plugin: one.plugin: two.' );
+
+		act( () => {
+			unregisterPlugin( 'one' );
+		} );
+
+		expect( container ).toHaveTextContent( 'plugin: two.' );
+	} );
+
+	test( 'does not rerender when a plugin is added to a different scope', () => {
+		const ComponentSpy = jest.fn( ( { content } ) => {
+			return `plugin: ${ content }.`;
+		} );
+
+		registerPlugin( 'scoped', {
+			render: () => <ComponentSpy content="scoped" />,
+			icon: 'smiley',
+			scope: 'my-app',
+		} );
+
+		render( <PluginArea scope="my-app" /> );
+
+		act( () => {
+			registerPlugin( 'unscoped', {
+				render: () => <TestComponent content="unscoped" />,
+				icon: 'smiley',
+			} );
+		} );
+
+		expect( ComponentSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+} );
diff --git a/packages/plugins/tsconfig.json b/packages/plugins/tsconfig.json
new file mode 100644
index 00000000000000..47c626f9ddedc8
--- /dev/null
+++ b/packages/plugins/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ]
+	},
+	"references": [
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../deprecated" },
+		{ "path": "../element" },
+		{ "path": "../hooks" },
+		{ "path": "../icons" },
+		{ "path": "../is-shallow-equal" }
+	],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/postcss-plugins-preset/.npmrc b/packages/postcss-plugins-preset/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/postcss-plugins-preset/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 9b8ee080532fc9..e271d53cdc73f9 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.42.0 (2024-05-16)
+
+## 4.41.0 (2024-05-02)
+
+## 4.40.0 (2024-04-19)
+
+## 4.39.0 (2024-04-03)
+
+## 4.38.0 (2024-03-21)
+
+## 4.37.0 (2024-03-06)
+
+## 4.36.0 (2024-02-21)
+
+## 4.35.0 (2024-02-09)
+
+## 4.34.0 (2024-01-24)
+
+## 4.33.0 (2024-01-10)
+
+## 4.32.0 (2023-12-13)
+
+## 4.31.0 (2023-11-29)
+
+## 4.30.0 (2023-11-16)
+
+## 4.29.0 (2023-11-02)
+
+## 4.28.0 (2023-10-18)
+
+## 4.27.0 (2023-10-05)
+
+## 4.26.0 (2023-09-20)
+
+## 4.25.0 (2023-08-31)
+
+## 4.24.0 (2023-08-16)
+
+## 4.23.0 (2023-08-10)
+
+## 4.22.0 (2023-07-20)
+
+## 4.21.0 (2023-07-05)
+
+## 4.20.0 (2023-06-23)
+
+## 4.19.0 (2023-06-07)
+
+## 4.18.0 (2023-05-24)
+
+## 4.17.0 (2023-05-10)
+
+## 4.16.0 (2023-04-26)
+
+## 4.15.0 (2023-04-12)
+
+## 4.14.0 (2023-03-29)
+
+## 4.13.0 (2023-03-15)
+
+## 4.12.0 (2023-03-01)
+
+## 4.11.0 (2023-02-15)
+
+## 4.10.0 (2023-02-01)
+
+## 4.9.0 (2023-01-11)
+
+## 4.8.0 (2023-01-02)
+
+## 4.7.0 (2022-12-14)
+
 ## 4.6.0 (2022-11-16)
 
 ## 4.5.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 4.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
diff --git a/packages/postcss-plugins-preset/README.md b/packages/postcss-plugins-preset/README.md
index 8385a30e6be53f..ac844e279b6f16 100644
--- a/packages/postcss-plugins-preset/README.md
+++ b/packages/postcss-plugins-preset/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/postcss-plugins-preset --save
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 381e57c262950d..98c2de79108d66 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "4.6.0",
+	"version": "5.13.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,14 +22,15 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib"
 	],
 	"main": "lib/index.js",
 	"dependencies": {
-		"@wordpress/base-styles": "file:../base-styles",
+		"@wordpress/base-styles": "*",
 		"autoprefixer": "^10.2.5"
 	},
 	"peerDependencies": {
diff --git a/packages/postcss-themes/.npmrc b/packages/postcss-themes/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/postcss-themes/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 38e9aec4d1e08e..efdb8fb1aa808d 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.41.0 (2024-05-16)
+
+## 5.40.0 (2024-05-02)
+
+## 5.39.0 (2024-04-19)
+
+## 5.38.0 (2024-04-03)
+
+## 5.37.0 (2024-03-21)
+
+## 5.36.0 (2024-03-06)
+
+## 5.35.0 (2024-02-21)
+
+## 5.34.0 (2024-02-09)
+
+## 5.33.0 (2024-01-24)
+
+## 5.32.0 (2024-01-10)
+
+## 5.31.0 (2023-12-13)
+
+## 5.30.0 (2023-11-29)
+
+## 5.29.0 (2023-11-16)
+
+## 5.28.0 (2023-11-02)
+
+## 5.27.0 (2023-10-18)
+
+## 5.26.0 (2023-10-05)
+
+## 5.25.0 (2023-09-20)
+
+## 5.24.0 (2023-08-31)
+
+## 5.23.0 (2023-08-16)
+
+## 5.22.0 (2023-08-10)
+
+## 5.21.0 (2023-07-20)
+
+## 5.20.0 (2023-07-05)
+
+## 5.19.0 (2023-06-23)
+
+## 5.18.0 (2023-06-07)
+
+## 5.17.0 (2023-05-24)
+
+## 5.16.0 (2023-05-10)
+
+## 5.15.0 (2023-04-26)
+
+## 5.14.0 (2023-04-12)
+
+## 5.13.0 (2023-03-29)
+
+## 5.12.0 (2023-03-15)
+
+## 5.11.0 (2023-03-01)
+
+## 5.10.0 (2023-02-15)
+
+## 5.9.0 (2023-02-01)
+
+## 5.8.0 (2023-01-11)
+
+## 5.7.0 (2023-01-02)
+
+## 5.6.0 (2022-12-14)
+
 ## 5.5.0 (2022-11-16)
 
 ## 5.4.0 (2022-11-02)
@@ -14,7 +118,7 @@
 
 ## 5.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
@@ -32,6 +136,6 @@
 
 ## 2.0.0 (2019-03-06)
 
-### Breaking change
+### Breaking Changes
 
 -   Stop using Babel transpilation internally and set node 8 as a minimal version required ([#13540](https://github.com/WordPress/gutenberg/pull/13540)).
diff --git a/packages/postcss-themes/README.md b/packages/postcss-themes/README.md
index 341ecfdbd8b7a6..b23c6c829d1d9e 100644
--- a/packages/postcss-themes/README.md
+++ b/packages/postcss-themes/README.md
@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/postcss-themes --save
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Contributing to this package
 
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index a696e47bbb1cf4..c03da4d1f06a72 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "5.5.0",
+	"version": "6.13.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -24,7 +24,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/preferences-persistence/.npmrc b/packages/preferences-persistence/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/preferences-persistence/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 836b0940ceb68a..3f75a6bbf49c77 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.50.0 (2024-05-16)
+
+## 1.49.0 (2024-05-02)
+
+## 1.48.0 (2024-04-19)
+
+## 1.47.0 (2024-04-03)
+
+## 1.46.0 (2024-03-21)
+
+## 1.45.0 (2024-03-06)
+
+## 1.44.0 (2024-02-21)
+
+## 1.43.0 (2024-02-09)
+
+## 1.42.0 (2024-01-24)
+
+## 1.41.0 (2024-01-10)
+
+## 1.40.0 (2023-12-13)
+
+## 1.39.0 (2023-11-29)
+
+## 1.38.0 (2023-11-16)
+
+## 1.37.0 (2023-11-02)
+
+## 1.36.0 (2023-10-18)
+
+## 1.35.0 (2023-10-05)
+
+## 1.34.0 (2023-09-20)
+
+## 1.33.0 (2023-08-31)
+
+## 1.32.0 (2023-08-16)
+
+## 1.31.0 (2023-08-10)
+
+## 1.30.0 (2023-07-20)
+
+## 1.29.0 (2023-07-05)
+
+## 1.28.0 (2023-06-23)
+
+## 1.27.0 (2023-06-07)
+
+## 1.26.0 (2023-05-24)
+
+## 1.25.0 (2023-05-10)
+
+## 1.24.0 (2023-04-26)
+
+## 1.23.0 (2023-04-12)
+
+## 1.22.0 (2023-03-29)
+
+## 1.21.0 (2023-03-15)
+
+## 1.20.0 (2023-03-01)
+
+## 1.19.0 (2023-02-15)
+
+## 1.18.0 (2023-02-01)
+
+## 1.17.0 (2023-01-11)
+
+## 1.16.0 (2023-01-02)
+
+## 1.15.0 (2022-12-14)
+
 ## 1.14.0 (2022-11-16)
 
 ## 1.13.0 (2022-11-02)
diff --git a/packages/preferences-persistence/README.md b/packages/preferences-persistence/README.md
index 3279d73417d2f1..af8f6cc4b14388 100644
--- a/packages/preferences-persistence/README.md
+++ b/packages/preferences-persistence/README.md
@@ -34,8 +34,7 @@ wp.data( 'core/preferences' ).setPersistenceLayer( persistenceLayer );
 
 ### create
 
-Creates a persistence layer that stores data in WordPress user meta via the
-REST API.
+Creates a persistence layer that stores data in WordPress user meta via the REST API.
 
 _Parameters_
 
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 73c2750cd00601..c9343b28b3e439 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "1.14.0",
+	"version": "2.13.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,15 +20,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/preferences-persistence/src/migrations/legacy-local-storage-data/index.js b/packages/preferences-persistence/src/migrations/legacy-local-storage-data/index.js
index 9ac1f354920306..6f0bebd13a8a93 100644
--- a/packages/preferences-persistence/src/migrations/legacy-local-storage-data/index.js
+++ b/packages/preferences-persistence/src/migrations/legacy-local-storage-data/index.js
@@ -63,17 +63,17 @@ export function convertLegacyData( data ) {
 	data = moveIndividualPreference(
 		data,
 		{ from: 'core/edit-post', to: 'core/edit-post' },
-		'preferredStyleVariations'
+		'panels',
+		convertEditPostPanels
 	);
 	data = moveIndividualPreference(
 		data,
-		{ from: 'core/edit-post', to: 'core/edit-post' },
-		'panels',
-		convertEditPostPanels
+		{ from: 'core/editor', to: 'core' },
+		'isPublishSidebarEnabled'
 	);
 	data = moveIndividualPreference(
 		data,
-		{ from: 'core/editor', to: 'core/edit-post' },
+		{ from: 'core/edit-post', to: 'core' },
 		'isPublishSidebarEnabled'
 	);
 	data = moveIndividualPreference(
diff --git a/packages/preferences-persistence/src/migrations/legacy-local-storage-data/test/index.js b/packages/preferences-persistence/src/migrations/legacy-local-storage-data/test/index.js
index a58da11a94dde0..d4df39165c73d4 100644
--- a/packages/preferences-persistence/src/migrations/legacy-local-storage-data/test/index.js
+++ b/packages/preferences-persistence/src/migrations/legacy-local-storage-data/test/index.js
@@ -49,7 +49,6 @@ const legacyData = {
 			},
 			editorMode: 'text',
 			hiddenBlockTypes: [ 'core/heading', 'core/list' ],
-			preferredStyleVariations: { 'core/quote': 'plain' },
 			localAutosaveInterval: 15,
 		},
 	},
@@ -114,9 +113,6 @@ const alreadyConvertedData = {
 				fullscreenMode: false,
 				hiddenBlockTypes: [ 'core/audio', 'core/cover' ],
 				editorMode: 'visual',
-				preferredStyleVariations: {
-					'core/quote': 'large',
-				},
 				inactivePanels: [],
 				openPanels: [ 'post-status' ],
 				complementaryArea: 'edit-post/block',
@@ -137,49 +133,46 @@ const alreadyConvertedData = {
 describe( 'convertLegacyData', () => {
 	it( 'converts to the expected format', () => {
 		expect( convertLegacyData( legacyData ) ).toMatchInlineSnapshot( `
-		Object {
-		  "core/customize-widgets": Object {
+		{
+		  "core/customize-widgets": {
 		    "fixedToolbar": true,
 		    "keepCaretInsideBlock": true,
 		    "welcomeGuide": false,
 		  },
-		  "core/edit-post": Object {
+		  "core/edit-post": {
 		    "complementaryArea": "edit-post/document",
 		    "editorMode": "text",
 		    "fixedToolbar": true,
-		    "hiddenBlockTypes": Array [
+		    "hiddenBlockTypes": [
 		      "core/heading",
 		      "core/list",
 		    ],
-		    "inactivePanels": Array [
+		    "inactivePanels": [
 		      "post-excerpt",
 		    ],
-		    "openPanels": Array [
+		    "openPanels": [
 		      "post-status",
 		      "taxonomy-panel-category",
 		    ],
-		    "pinnedItems": Object {
+		    "pinnedItems": {
 		      "my-sidebar-plugin/title-sidebar": false,
 		    },
-		    "preferredStyleVariations": Object {
-		      "core/quote": "plain",
-		    },
 		    "welcomeGuide": false,
 		  },
-		  "core/edit-site": Object {
+		  "core/edit-site": {
 		    "complementaryArea": "edit-site/global-styles",
 		    "fixedToolbar": true,
 		    "focusMode": true,
 		    "welcomeGuide": false,
 		    "welcomeGuideStyles": false,
 		  },
-		  "core/edit-widgets": Object {
+		  "core/edit-widgets": {
 		    "complementaryArea": "edit-widgets/block-areas",
 		    "fixedToolbar": true,
 		    "keepCaretInsideBlock": true,
 		    "welcomeGuide": false,
 		  },
-		  "third-party-plugin": Object {
+		  "third-party-plugin": {
 		    "thirdPartyFeature": true,
 		  },
 		}
@@ -189,35 +182,32 @@ describe( 'convertLegacyData', () => {
 	it( 'retains already converted data', () => {
 		expect( convertLegacyData( alreadyConvertedData ) )
 			.toMatchInlineSnapshot( `
-		Object {
-		  "core/edit-post": Object {
+		{
+		  "core/edit-post": {
 		    "complementaryArea": "edit-post/block",
 		    "editorMode": "visual",
 		    "fixedToolbar": true,
 		    "fullscreenMode": false,
-		    "hiddenBlockTypes": Array [
+		    "hiddenBlockTypes": [
 		      "core/audio",
 		      "core/cover",
 		    ],
-		    "inactivePanels": Array [],
-		    "openPanels": Array [
+		    "inactivePanels": [],
+		    "openPanels": [
 		      "post-status",
 		    ],
-		    "pinnedItems": Object {
+		    "pinnedItems": {
 		      "my-sidebar-plugin/title-sidebar": false,
 		    },
-		    "preferredStyleVariations": Object {
-		      "core/quote": "large",
-		    },
 		    "welcomeGuide": false,
 		  },
-		  "core/edit-site": Object {
+		  "core/edit-site": {
 		    "complementaryArea": "edit-site/global-styles",
 		    "fixedToolbar": true,
 		    "welcomeGuide": false,
 		    "welcomeGuideStyles": false,
 		  },
-		  "core/edit-widgets": Object {
+		  "core/edit-widgets": {
 		    "complementaryArea": "edit-widgets/block-areas",
 		    "fixedToolbar": true,
 		    "showBlockBreadcrumbs": false,
diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js b/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js
new file mode 100644
index 00000000000000..2f5a404634f99a
--- /dev/null
+++ b/packages/preferences-persistence/src/migrations/preferences-package-data/convert-editor-settings.js
@@ -0,0 +1,52 @@
+/**
+ * Internal dependencies
+ */
+
+export default function convertEditorSettings( data ) {
+	let newData = data;
+	const settingsToMoveToCore = [
+		'allowRightClickOverrides',
+		'distractionFree',
+		'editorMode',
+		'fixedToolbar',
+		'focusMode',
+		'hiddenBlockTypes',
+		'inactivePanels',
+		'keepCaretInsideBlock',
+		'mostUsedBlocks',
+		'openPanels',
+		'showBlockBreadcrumbs',
+		'showIconLabels',
+		'showListViewByDefault',
+		'isPublishSidebarEnabled',
+		'isComplementaryAreaVisible',
+		'pinnedItems',
+	];
+
+	settingsToMoveToCore.forEach( ( setting ) => {
+		if ( data?.[ 'core/edit-post' ]?.[ setting ] !== undefined ) {
+			newData = {
+				...newData,
+				core: {
+					...newData?.core,
+					[ setting ]: data[ 'core/edit-post' ][ setting ],
+				},
+			};
+			delete newData[ 'core/edit-post' ][ setting ];
+		}
+
+		if ( data?.[ 'core/edit-site' ]?.[ setting ] !== undefined ) {
+			delete newData[ 'core/edit-site' ][ setting ];
+		}
+	} );
+
+	if ( Object.keys( newData?.[ 'core/edit-post' ] ?? {} )?.length === 0 ) {
+		delete newData[ 'core/edit-post' ];
+	}
+
+	if ( Object.keys( newData?.[ 'core/edit-site' ] ?? {} )?.length === 0 ) {
+		delete newData[ 'core/edit-site' ];
+	}
+
+	return newData;
+}
diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/index.js b/packages/preferences-persistence/src/migrations/preferences-package-data/index.js
index 91efe2dac88f76..d4966e00e73d27 100644
--- a/packages/preferences-persistence/src/migrations/preferences-package-data/index.js
+++ b/packages/preferences-persistence/src/migrations/preferences-package-data/index.js
@@ -2,7 +2,10 @@
  * Internal dependencies
  */
 import convertComplementaryAreas from './convert-complementary-areas';
+import convertEditorSettings from './convert-editor-settings';
 
 export default function convertPreferencesPackageData( data ) {
-	return convertComplementaryAreas( data );
+	let newData = convertComplementaryAreas( data );
+	newData = convertEditorSettings( newData );
+	return newData;
 }
diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-complementary-areas.js b/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-complementary-areas.js
index fcb31c3dc38dd2..44541c1cbc8866 100644
--- a/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-complementary-areas.js
+++ b/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-complementary-areas.js
@@ -10,7 +10,7 @@ describe( 'convertComplementaryAreas', () => {
 				complementaryArea: 'edit-post/block',
 			},
 			'core/edit-site': {
-				complementaryArea: 'edit-site/template',
+				complementaryArea: 'edit-post/document',
 			},
 			'core/edit-post': {
 				complementaryArea: 'edit-post/block',
diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-editor-settings.js b/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-editor-settings.js
new file mode 100644
index 00000000000000..97a36f9630ecac
--- /dev/null
+++ b/packages/preferences-persistence/src/migrations/preferences-package-data/test/convert-editor-settings.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import convertEditorSettings from '../convert-editor-settings';
+
+describe( 'convertEditorSettings', () => {
+	it( 'converts the `allowRightClickOverrides` property', () => {
+		const input = {
+			'core/edit-post': {
+				allowRightClickOverrides: false,
+			},
+		};
+
+		const expectedOutput = {
+			core: {
+				allowRightClickOverrides: false,
+			},
+		};
+
+		expect( convertEditorSettings( input ) ).toEqual( expectedOutput );
+	} );
+} );
diff --git a/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js b/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js
index c96f8d1b0ab352..83253e1bb38810 100644
--- a/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js
+++ b/packages/preferences-persistence/src/migrations/preferences-package-data/test/index.js
@@ -20,9 +20,6 @@ const input = {
 		fullscreenMode: false,
 		hiddenBlockTypes: [ 'core/audio', 'core/cover' ],
 		editorMode: 'visual',
-		preferredStyleVariations: {
-			'core/quote': 'large',
-		},
 		inactivePanels: [],
 		openPanels: [ 'post-status' ],
 		pinnedItems: {
@@ -41,38 +38,35 @@ describe( 'convertPreferencesPackageData', () => {
 	it( 'converts data to the expected format', () => {
 		expect( convertPreferencesPackageData( input ) )
 			.toMatchInlineSnapshot( `
-		Object {
-		  "core/customize-widgets": Object {
-		    "fixedToolbar": true,
-		    "welcomeGuide": false,
-		  },
-		  "core/edit-post": Object {
+		{
+		  "core": {
 		    "editorMode": "visual",
 		    "fixedToolbar": true,
-		    "fullscreenMode": false,
-		    "hiddenBlockTypes": Array [
+		    "hiddenBlockTypes": [
 		      "core/audio",
 		      "core/cover",
 		    ],
-		    "inactivePanels": Array [],
-		    "openPanels": Array [
+		    "inactivePanels": [],
+		    "openPanels": [
 		      "post-status",
 		    ],
-		    "pinnedItems": Object {
+		    "pinnedItems": {
 		      "my-sidebar-plugin/title-sidebar": false,
 		    },
-		    "preferredStyleVariations": Object {
-		      "core/quote": "large",
-		    },
-		    "welcomeGuide": false,
 		  },
-		  "core/edit-site": Object {
+		  "core/customize-widgets": {
 		    "fixedToolbar": true,
-		    "isComplementaryAreaVisible": true,
+		    "welcomeGuide": false,
+		  },
+		  "core/edit-post": {
+		    "fullscreenMode": false,
+		    "welcomeGuide": false,
+		  },
+		  "core/edit-site": {
 		    "welcomeGuide": false,
 		    "welcomeGuideStyles": false,
 		  },
-		  "core/edit-widgets": Object {
+		  "core/edit-widgets": {
 		    "fixedToolbar": true,
 		    "isComplementaryAreaVisible": true,
 		    "showBlockBreadcrumbs": false,
diff --git a/packages/preferences/.npmrc b/packages/preferences/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/preferences/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 32b03240f1b20d..8453a061cfdfa7 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 3.34.0 (2024-05-02)
+
+## 3.33.0 (2024-04-19)
+
+## 3.32.0 (2024-04-03)
+
+## 3.31.0 (2024-03-21)
+
+## 3.30.0 (2024-03-06)
+
+## 3.29.0 (2024-02-21)
+
+## 3.28.0 (2024-02-09)
+
+## 3.27.0 (2024-01-24)
+
+## 3.26.0 (2024-01-10)
+
+## 3.25.0 (2023-12-13)
+
+## 3.24.0 (2023-11-29)
+
+## 3.23.0 (2023-11-16)
+
+## 3.22.0 (2023-11-02)
+
+## 3.21.0 (2023-10-18)
+
+## 3.20.0 (2023-10-05)
+
+## 3.19.0 (2023-09-20)
+
+## 3.18.0 (2023-08-31)
+
+## 3.17.0 (2023-08-16)
+
+## 3.16.0 (2023-08-10)
+
+## 3.15.0 (2023-07-20)
+
+## 3.14.0 (2023-07-05)
+
+## 3.13.0 (2023-06-23)
+
+## 3.12.0 (2023-06-07)
+
+## 3.11.0 (2023-05-24)
+
+## 3.10.0 (2023-05-10)
+
+## 3.9.0 (2023-04-26)
+
+## 3.8.0 (2023-04-12)
+
+## 3.7.0 (2023-03-29)
+
+## 3.6.0 (2023-03-15)
+
+## 3.5.0 (2023-03-01)
+
+## 3.4.0 (2023-02-15)
+
+## 3.3.0 (2023-02-01)
+
+## 3.2.0 (2023-01-11)
+
+## 3.1.0 (2023-01-02)
+
+## 3.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 2.14.0 (2022-11-16)
 
 ## 2.13.0 (2022-11-02)
@@ -32,11 +144,11 @@
 
 ## 2.0.0 (2022-05-04)
 
-### Breaking change
+### Breaking Changes
 
 -   The preferences package is no longer compatible with the `@wordpress/data` persistence plugin. Please use the new `setPersistenceLayer` API. ([#39795](https://github.com/WordPress/gutenberg/pull/39795))
 
-### Enhancement
+### Enhancements
 
 -   A new `setPersistenceLayer` action has been introduced. ([#39795](https://github.com/WordPress/gutenberg/pull/39795))
 
diff --git a/packages/preferences/README.md b/packages/preferences/README.md
index 74e27f9dc7c8b4..448eb69a9b3633 100644
--- a/packages/preferences/README.md
+++ b/packages/preferences/README.md
@@ -138,12 +138,10 @@ wp.data.dispatch( 'core/preferences' ).setPersistenceLayer( {
 
 The `PreferenceToggleMenuItem` components can be used with a `DropdownMenu` to implement a menu for changing preferences.
 
-Also see the `MoreMenuDropdown` component from the `@wordpress/interface` package for implementing a more menu.
-
 ```jsx
 function MyEditorMenu() {
 	return (
-		<MoreMenuDropdown>
+		<DropdownMenu>
 			{ () => (
 				<MenuGroup label={ __( 'Features' ) }>
 					<PreferenceToggleMenuItem
@@ -156,7 +154,7 @@ function MyEditorMenu() {
 					/>
 				</MenuGroup>
 			) }
-		</MoreMenuDropdown>
+		</DropdownMenu>
 	);
 }
 ```
@@ -171,8 +169,7 @@ The following set of dispatching action creators are available on the object ret
 
 #### set
 
-Returns an action object used in signalling that a preference should be set
-to a value
+Returns an action object used in signalling that a preference should be set to a value
 
 _Parameters_
 
@@ -186,8 +183,7 @@ _Returns_
 
 #### setDefaults
 
-Returns an action object used in signalling that preference defaults should
-be set.
+Returns an action object used in signalling that preference defaults should be set.
 
 _Parameters_
 
@@ -207,9 +203,7 @@ When a persistence layer is set, the preferences store will:
 -   call `get` immediately and update the store state to the value returned.
 -   call `set` with all preferences whenever a preference changes value.
 
-`setPersistenceLayer` should ideally be dispatched at the start of an
-application's lifecycle, before any other actions have been dispatched to
-the preferences store.
+`setPersistenceLayer` should ideally be dispatched at the start of an application's lifecycle, before any other actions have been dispatched to the preferences store.
 
 _Parameters_
 
@@ -221,8 +215,7 @@ _Returns_
 
 #### toggle
 
-Returns an action object used in signalling that a preference should be
-toggled.
+Returns an action object used in signalling that a preference should be toggled.
 
 _Parameters_
 
@@ -239,8 +232,7 @@ The following selectors are available on the object returned by `wp.data.select(
 
 #### get
 
-Returns a boolean indicating whether a prefer is active for a particular
-scope.
+Returns a boolean indicating whether a prefer is active for a particular scope.
 
 _Parameters_
 
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 6ae2f3da2e30ab..9c262dff51fbff 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "2.14.0",
+	"version": "4.13.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,25 +21,30 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
-	"types": "build-types",
+	"wpScript": true,
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/components": "file:../components",
-		"@wordpress/data": "file:../data",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"classnames": "^2.3.1"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/private-apis": "*",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/preferences/src/components/preference-base-option/README.md b/packages/preferences/src/components/preference-base-option/README.md
new file mode 100644
index 00000000000000..8ff438ba322dc5
--- /dev/null
+++ b/packages/preferences/src/components/preference-base-option/README.md
@@ -0,0 +1,40 @@
+# PreferenceBaseOption
+
+`PreferenceBaseOption` renders a toggle meant to be used within `PreferencesModal`. 
+
+This component implements a `ToggleControl` component from the `@wordpress/components` package.
+
+## Example
+
+```jsx
+function MyEditorPreferencesOption() {
+	return (
+		<PreferenceBaseOption
+			label={ label }
+			isChecked={ isChecked }
+			onChange={ setIsChecked }
+		>
+			{ isChecked !== areCustomFieldsEnabled && (
+				<CustomFieldsConfirmation willEnable={ isChecked } />
+			) }
+		</PreferenceBaseOption>
+	)				
+}
+```
+
+## Props
+
+### help 
+### label 
+### isChecked 
+### onChange
+
+These props are passed directly to ToggleControl, so see [ToggleControl readme](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/toggle-control/README.md) for more info.
+
+### children
+
+Components to be rendered as content.
+
+-   Type: `Element`
+-   Required: No.
+
diff --git a/packages/preferences/src/components/preference-base-option/index.js b/packages/preferences/src/components/preference-base-option/index.js
new file mode 100644
index 00000000000000..f2d1b4936c97f8
--- /dev/null
+++ b/packages/preferences/src/components/preference-base-option/index.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+function BaseOption( { help, label, isChecked, onChange, children } ) {
+	return (
+		<div className="preference-base-option">
+			<ToggleControl
+				__nextHasNoMarginBottom
+				help={ help }
+				label={ label }
+				checked={ isChecked }
+				onChange={ onChange }
+			/>
+			{ children }
+		</div>
+	);
+}
+
+export default BaseOption;
diff --git a/packages/preferences/src/components/preference-base-option/style.scss b/packages/preferences/src/components/preference-base-option/style.scss
new file mode 100644
index 00000000000000..32040d0c9093a6
--- /dev/null
+++ b/packages/preferences/src/components/preference-base-option/style.scss
@@ -0,0 +1,5 @@
+.preference-base-option {
+	& + & {
+		margin-top: $grid-unit-20;
+	}
+}
diff --git a/packages/preferences/src/components/preference-toggle-control/index.js b/packages/preferences/src/components/preference-toggle-control/index.js
new file mode 100644
index 00000000000000..70ff51a8a84740
--- /dev/null
+++ b/packages/preferences/src/components/preference-toggle-control/index.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as preferencesStore } from '../../store';
+import PreferenceBaseOption from '../preference-base-option';
+
+function PreferenceToggleControl( props ) {
+	const {
+		scope,
+		featureName,
+		onToggle = () => {},
+		...remainingProps
+	} = props;
+	const isChecked = useSelect(
+		( select ) => !! select( preferencesStore ).get( scope, featureName ),
+		[ scope, featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => {
+		onToggle();
+		toggle( scope, featureName );
+	};
+
+	return (
+		<PreferenceBaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}
+
+export default PreferenceToggleControl;
diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js
index 2797e6455bc0b1..c5110463c98003 100644
--- a/packages/preferences/src/components/preference-toggle-menu-item/index.js
+++ b/packages/preferences/src/components/preference-toggle-menu-item/index.js
@@ -20,12 +20,13 @@ export default function PreferenceToggleMenuItem( {
 	messageActivated,
 	messageDeactivated,
 	shortcut,
+	handleToggling = true,
 	onToggle = () => null,
 	disabled = false,
 } ) {
 	const isActive = useSelect(
 		( select ) => !! select( preferencesStore ).get( scope, name ),
-		[ name ]
+		[ scope, name ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
 	const speakMessage = () => {
@@ -56,7 +57,9 @@ export default function PreferenceToggleMenuItem( {
 			isSelected={ isActive }
 			onClick={ () => {
 				onToggle();
-				toggle( scope, name );
+				if ( handleToggling ) {
+					toggle( scope, name );
+				}
 				speakMessage();
 			} }
 			role="menuitemcheckbox"
diff --git a/packages/preferences/src/components/preferences-modal-section/README.md b/packages/preferences/src/components/preferences-modal-section/README.md
new file mode 100644
index 00000000000000..4b032b5db04975
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal-section/README.md
@@ -0,0 +1,31 @@
+# PreferencesModalSection
+
+`PreferencesModalSection` renders a section (as a fieldset) meant to be used with `PreferencesModal`.
+
+## Example
+
+See the `PreferencesModal` readme for usage info.
+
+
+## Props
+
+### title
+
+The title of the section
+
+-   Type: `String`
+-   Required: Yes.
+
+### description
+
+The description for the section.
+
+-   Type: `String`
+-   Required: No.
+
+### children
+
+Components to be rendered as content.
+
+-   Type: `Element`
+-   Required: Yes.
diff --git a/packages/preferences/src/components/preferences-modal-section/index.js b/packages/preferences/src/components/preferences-modal-section/index.js
new file mode 100644
index 00000000000000..1a3f6f64ef4e75
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal-section/index.js
@@ -0,0 +1,15 @@
+const Section = ( { description, title, children } ) => (
+	<fieldset className="preferences-modal__section">
+		<legend className="preferences-modal__section-legend">
+			<h2 className="preferences-modal__section-title">{ title }</h2>
+			{ description && (
+				<p className="preferences-modal__section-description">
+					{ description }
+				</p>
+			) }
+		</legend>
+		<div className="preferences-modal__section-content">{ children }</div>
+	</fieldset>
+);
+
+export default Section;
diff --git a/packages/preferences/src/components/preferences-modal-section/style.scss b/packages/preferences/src/components/preferences-modal-section/style.scss
new file mode 100644
index 00000000000000..2f6480dd71dab7
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal-section/style.scss
@@ -0,0 +1,28 @@
+.preferences-modal__section {
+	margin: 0 0 2.5rem 0;
+
+	&:last-child {
+		margin: 0;
+	}
+}
+
+.preferences-modal__section-legend {
+	margin-bottom: $grid-unit-10;
+}
+
+.preferences-modal__section-title {
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin-top: 0;
+}
+
+.preferences-modal__section-description {
+	margin: -$grid-unit-10 0 $grid-unit-10 0;
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}
+
+.preferences-modal__section:has(.preferences-modal__section-content:empty) {
+	display: none;
+}
diff --git a/packages/interface/src/components/preferences-modal-tabs/README.md b/packages/preferences/src/components/preferences-modal-tabs/README.md
similarity index 100%
rename from packages/interface/src/components/preferences-modal-tabs/README.md
rename to packages/preferences/src/components/preferences-modal-tabs/README.md
diff --git a/packages/preferences/src/components/preferences-modal-tabs/index.js b/packages/preferences/src/components/preferences-modal-tabs/index.js
new file mode 100644
index 00000000000000..f73bdd7f029dc7
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal-tabs/index.js
@@ -0,0 +1,170 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	Navigator,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
+	FlexItem,
+	Card,
+	CardHeader,
+	CardBody,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+const PREFERENCES_MENU = 'preferences-menu';
+
+export default function PreferencesModalTabs( { sections } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
+
+	// This is also used to sync the two different rendered components
+	// between small and large viewports.
+	const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
+	/**
+	 * Create helper objects from `sections` for easier data handling.
+	 * `tabs` is used for creating the `Tabs` and `sectionsContentMap`
+	 * is used for easier access to active tab's content.
+	 */
+	const { tabs, sectionsContentMap } = useMemo( () => {
+		let mappedTabs = {
+			tabs: [],
+			sectionsContentMap: {},
+		};
+		if ( sections.length ) {
+			mappedTabs = sections.reduce(
+				( accumulator, { name, tabLabel: title, content } ) => {
+					accumulator.tabs.push( { name, title } );
+					accumulator.sectionsContentMap[ name ] = content;
+					return accumulator;
+				},
+				{ tabs: [], sectionsContentMap: {} }
+			);
+		}
+		return mappedTabs;
+	}, [ sections ] );
+
+	let modalContent;
+	// We render different components based on the viewport size.
+	if ( isLargeViewport ) {
+		modalContent = (
+			<div className="preferences__tabs">
+				<Tabs
+					defaultTabId={
+						activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
+					}
+					onSelect={ setActiveMenu }
+					orientation="vertical"
+				>
+					<Tabs.TabList className="preferences__tabs-tablist">
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								tabId={ tab.name }
+								key={ tab.name }
+								className="preferences__tabs-tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.TabPanel
+							tabId={ tab.name }
+							key={ tab.name }
+							className="preferences__tabs-tabpanel"
+							focusable={ false }
+						>
+							{ sectionsContentMap[ tab.name ] || null }
+						</Tabs.TabPanel>
+					) ) }
+				</Tabs>
+			</div>
+		);
+	} else {
+		modalContent = (
+			<Navigator initialPath="/" className="preferences__provider">
+				<Navigator.Screen path="/">
+					<Card isBorderless size="small">
+						<CardBody>
+							<ItemGroup>
+								{ tabs.map( ( tab ) => {
+									return (
+										<Navigator.Button
+											key={ tab.name }
+											path={ `/${ tab.name }` }
+											as={ Item }
+											isAction
+										>
+											<HStack justify="space-between">
+												<FlexItem>
+													<Truncate>
+														{ tab.title }
+													</Truncate>
+												</FlexItem>
+												<FlexItem>
+													<Icon
+														icon={
+															isRTL()
+																? chevronLeft
+																: chevronRight
+														}
+													/>
+												</FlexItem>
+											</HStack>
+										</Navigator.Button>
+									);
+								} ) }
+							</ItemGroup>
+						</CardBody>
+					</Card>
+				</Navigator.Screen>
+				{ sections.length &&
+					sections.map( ( section ) => {
+						return (
+							<Navigator.Screen
+								key={ `${ section.name }-menu` }
+								path={ `/${ section.name }` }
+							>
+								<Card isBorderless size="large">
+									<CardHeader
+										isBorderless={ false }
+										justify="left"
+										size="small"
+										gap="6"
+									>
+										<Navigator.BackButton
+											icon={
+												isRTL()
+													? chevronRight
+													: chevronLeft
+											}
+											label={ __( 'Back' ) }
+										/>
+										<Text size="16">
+											{ section.tabLabel }
+										</Text>
+									</CardHeader>
+									<CardBody>{ section.content }</CardBody>
+								</Card>
+							</Navigator.Screen>
+						);
+					} ) }
+			</Navigator>
+		);
+	}
+
+	return modalContent;
+}
diff --git a/packages/preferences/src/components/preferences-modal-tabs/style.scss b/packages/preferences/src/components/preferences-modal-tabs/style.scss
new file mode 100644
index 00000000000000..247da29eb5d12c
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal-tabs/style.scss
@@ -0,0 +1,22 @@
+$vertical-tabs-width: 160px;
+
+.preferences__tabs-tablist {
+	position: absolute !important;
+	top: $header-height + $grid-unit-30;
+	// Aligns button text instead of button box.
+	left: $grid-unit-20;
+	width: $vertical-tabs-width;
+}
+
+.preferences__tabs-tabpanel {
+	padding-left: $grid-unit-30;
+	margin-left: $vertical-tabs-width;
+}
+
+@media (max-width: #{ ($break-medium - 1) }) {
+	// Keep the navigator component from overflowing the modal content area
+	// to ensure that sticky position elements stick where intended.
+	.preferences__provider {
+		height: 100%;
+	}
+}
diff --git a/packages/preferences/src/components/preferences-modal/README.md b/packages/preferences/src/components/preferences-modal/README.md
new file mode 100644
index 00000000000000..4814fc12e5898a
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal/README.md
@@ -0,0 +1,69 @@
+# PreferencesModal
+
+`PreferencesModal` renders a modal with editor preferences. It can take a `PreferencesModalTabs` component, which accepts multiple tabs, and/or other child components. On small viewports, the modal is fullscreen.
+
+This component implements a `Modal` component from the `@wordpress/components` package.
+
+Sections passed to this component should use `PreferencesModalSection` component from the `@wordpress/preferences` package.
+
+
+## Example
+
+```jsx
+function MyEditorPreferencesModal() {
+	const { closeModal } = useDispatch( editPostStore );
+	const sections = [
+		{
+			name: 'section 1',
+			tabLabel: __( 'Section 1' ),
+			content: (
+						<PreferencesModalSection
+							title={ __( 'Publishing' ) }
+							description={ __(
+								'Change options related to publishing.'
+							) }
+						>
+							<EnablePublishSidebarOption
+								help={ __(
+									'Review settings, such as visibility and tags.'
+								) }
+								label={ __(
+									'Enable pre-publish checks'
+								) }
+							/>
+						</PreferencesModalSection>
+					)
+
+		}
+		{
+			name: 'section 2',
+			tabLabel: __( 'Section 2' ),
+			content: (
+						<PreferencesModalSection
+							title={ __( 'Additional' ) }
+							description={ __(
+								'Add extra areas to the editor.'
+							) }
+						>
+							// Section content here
+						</PreferencesModalSection>
+					)
+
+		}
+	]
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalTabs sections={ sections } />
+		<PreferencesModal />
+	);
+}
+```
+
+## Props
+
+### closeModal
+
+A function to call when closing the modal.
+
+-   Type: `Function`
+-   Required: Yes.
diff --git a/packages/preferences/src/components/preferences-modal/index.js b/packages/preferences/src/components/preferences-modal/index.js
new file mode 100644
index 00000000000000..8dc4f1020c036f
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal/index.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function PreferencesModal( { closeModal, children } ) {
+	return (
+		<Modal
+			className="preferences-modal"
+			title={ __( 'Preferences' ) }
+			onRequestClose={ closeModal }
+		>
+			{ children }
+		</Modal>
+	);
+}
diff --git a/packages/preferences/src/components/preferences-modal/style.scss b/packages/preferences/src/components/preferences-modal/style.scss
new file mode 100644
index 00000000000000..ca185ac4258e0e
--- /dev/null
+++ b/packages/preferences/src/components/preferences-modal/style.scss
@@ -0,0 +1,21 @@
+.preferences-modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 70%;
+	}
+
+	// Clears spacing to flush fit the navigator component to the modal edges.
+	@media (max-width: #{ ($break-medium - 1) }) {
+		.components-modal__content {
+			padding: 0;
+		}
+	}
+}
diff --git a/packages/preferences/src/index.js b/packages/preferences/src/index.js
index 72531a0824c178..856b93b21105d8 100644
--- a/packages/preferences/src/index.js
+++ b/packages/preferences/src/index.js
@@ -1,2 +1,3 @@
 export * from './components';
 export { store } from './store';
+export * from './private-apis';
diff --git a/packages/preferences/src/lock-unlock.js b/packages/preferences/src/lock-unlock.js
new file mode 100644
index 00000000000000..9556c83135e581
--- /dev/null
+++ b/packages/preferences/src/lock-unlock.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/preferences'
+	);
diff --git a/packages/preferences/src/private-apis.js b/packages/preferences/src/private-apis.js
new file mode 100644
index 00000000000000..110d134f86b822
--- /dev/null
+++ b/packages/preferences/src/private-apis.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PreferenceBaseOption from './components/preference-base-option';
+import PreferenceToggleControl from './components/preference-toggle-control';
+import PreferencesModal from './components/preferences-modal';
+import PreferencesModalSection from './components/preferences-modal-section';
+import PreferencesModalTabs from './components/preferences-modal-tabs';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	PreferenceBaseOption,
+	PreferenceToggleControl,
+	PreferencesModal,
+	PreferencesModalSection,
+	PreferencesModalTabs,
+} );
diff --git a/packages/preferences/src/store/actions.js b/packages/preferences/src/store/actions.js
index 7fcedd49d35297..10b5b45567a7fc 100644
--- a/packages/preferences/src/store/actions.js
+++ b/packages/preferences/src/store/actions.js
@@ -49,12 +49,12 @@ export function setDefaults( scope, defaults ) {
 }
 
 /** @typedef {() => Promise<Object>} WPPreferencesPersistenceLayerGet */
-/** @typedef {(*) => void} WPPreferencesPersistenceLayerSet */
+/** @typedef {(Object) => void} WPPreferencesPersistenceLayerSet */
 /**
  * @typedef WPPreferencesPersistenceLayer
  *
  * @property {WPPreferencesPersistenceLayerGet} get An async function that gets data from the persistence layer.
- * @property {WPPreferencesPersistenceLayerSet} set A  function that sets data in the persistence layer.
+ * @property {WPPreferencesPersistenceLayerSet} set A function that sets data in the persistence layer.
  */
 
 /**
diff --git a/packages/preferences/src/store/index.js b/packages/preferences/src/store/index.js
index 0c2421966a0d79..7e57dac5e712ca 100644
--- a/packages/preferences/src/store/index.js
+++ b/packages/preferences/src/store/index.js
@@ -12,7 +12,7 @@ import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
 
 /**
- * Store definition for the interface namespace.
+ * Store definition for the preferences namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *
diff --git a/packages/preferences/src/store/selectors.js b/packages/preferences/src/store/selectors.js
index 58b4d18bc362aa..a574251efe37b4 100644
--- a/packages/preferences/src/store/selectors.js
+++ b/packages/preferences/src/store/selectors.js
@@ -1,3 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+const withDeprecatedKeys = ( originalGet ) => ( state, scope, name ) => {
+	const settingsToMoveToCore = [
+		'allowRightClickOverrides',
+		'distractionFree',
+		'editorMode',
+		'fixedToolbar',
+		'focusMode',
+		'hiddenBlockTypes',
+		'inactivePanels',
+		'keepCaretInsideBlock',
+		'mostUsedBlocks',
+		'openPanels',
+		'showBlockBreadcrumbs',
+		'showIconLabels',
+		'showListViewByDefault',
+		'isPublishSidebarEnabled',
+		'isComplementaryAreaVisible',
+		'pinnedItems',
+	];
+
+	if (
+		settingsToMoveToCore.includes( name ) &&
+		[ 'core/edit-post', 'core/edit-site' ].includes( scope )
+	) {
+		deprecated(
+			`wp.data.select( 'core/preferences' ).get( '${ scope }', '${ name }' )`,
+			{
+				since: '6.5',
+				alternative: `wp.data.select( 'core/preferences' ).get( 'core', '${ name }' )`,
+			}
+		);
+
+		return originalGet( state, 'core', name );
+	}
+
+	return originalGet( state, scope, name );
+};
+
 /**
  * Returns a boolean indicating whether a prefer is active for a particular
  * scope.
@@ -8,7 +51,7 @@
  *
  * @return {*} Is the feature enabled?
  */
-export function get( state, scope, name ) {
+export const get = withDeprecatedKeys( ( state, scope, name ) => {
 	const value = state.preferences[ scope ]?.[ name ];
 	return value !== undefined ? value : state.defaults[ scope ]?.[ name ];
-}
+} );
diff --git a/packages/preferences/src/style.scss b/packages/preferences/src/style.scss
new file mode 100644
index 00000000000000..c6769c44b00ba9
--- /dev/null
+++ b/packages/preferences/src/style.scss
@@ -0,0 +1,4 @@
+@import "./components/preference-base-option/style.scss";
+@import "./components/preferences-modal/style.scss";
+@import "./components/preferences-modal-tabs/style.scss";
+@import "./components/preferences-modal-section/style.scss";
diff --git a/packages/prettier-config/.npmrc b/packages/prettier-config/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/prettier-config/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index f7a1563dd4c2d0..e15c0e2aad79fc 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.15.0 (2024-05-16)
+
+## 3.14.0 (2024-05-02)
+
+## 3.13.0 (2024-04-19)
+
+## 3.12.0 (2024-04-03)
+
+## 3.11.0 (2024-03-21)
+
+## 3.10.0 (2024-03-06)
+
+## 3.9.0 (2024-02-21)
+
+## 3.8.0 (2024-02-09)
+
+## 3.7.0 (2024-01-24)
+
+## 3.6.0 (2024-01-10)
+
+## 3.5.0 (2023-12-13)
+
+## 3.4.0 (2023-11-29)
+
+## 3.3.0 (2023-11-16)
+
+## 3.2.0 (2023-11-02)
+
+## 3.1.0 (2023-10-18)
+
+## 3.0.0 (2023-10-05)
+
+### Breaking Changes
+
+-   Change the required major version of Prettier from v2 to v3 ([#54775](https://github.com/WordPress/gutenberg/pull/54775)).
+
+## 2.25.0 (2023-09-20)
+
+## 2.24.0 (2023-08-31)
+
+## 2.23.0 (2023-08-16)
+
+## 2.22.0 (2023-08-10)
+
+## 2.21.0 (2023-07-20)
+
+## 2.20.0 (2023-07-05)
+
+## 2.19.0 (2023-06-23)
+
+## 2.18.0 (2023-06-07)
+
+## 2.17.0 (2023-05-24)
+
+## 2.16.0 (2023-05-10)
+
+## 2.15.0 (2023-04-26)
+
+## 2.14.0 (2023-04-12)
+
+## 2.13.0 (2023-03-29)
+
+## 2.12.0 (2023-03-15)
+
+## 2.11.0 (2023-03-01)
+
+## 2.10.0 (2023-02-15)
+
+## 2.9.0 (2023-02-01)
+
+## 2.8.0 (2023-01-11)
+
+## 2.7.0 (2023-01-02)
+
+## 2.6.0 (2022-12-14)
+
 ## 2.5.0 (2022-11-16)
 
 ## 2.4.0 (2022-11-02)
@@ -19,21 +127,21 @@
 
 ## 2.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with native functionality ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
 ## 1.2.0 (2022-04-21)
 
-### Enhancement
+### Enhancements
 
 -   Add additional configuration for CSS styles to better align with [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/) ([#40479](https://github.com/WordPress/gutenberg/pull/40479)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Ensure that the config can work with both `prettier` and `wp-prettier` without reporting warnings ([#40479](https://github.com/WordPress/gutenberg/pull/40479)).
 
diff --git a/packages/prettier-config/README.md b/packages/prettier-config/README.md
index b07fad62e14e63..efb75513694fc9 100644
--- a/packages/prettier-config/README.md
+++ b/packages/prettier-config/README.md
@@ -10,7 +10,7 @@ Install the module
 $ npm install @wordpress/prettier-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/prettier-config/lib/index.js b/packages/prettier-config/lib/index.js
index 87259fa51f6da4..2ec3de0a48f164 100644
--- a/packages/prettier-config/lib/index.js
+++ b/packages/prettier-config/lib/index.js
@@ -15,8 +15,6 @@ const isWPPrettier = prettierPackage.name === 'wp-prettier';
 const customOptions = isWPPrettier ? { parenSpacing: true } : {};
 const customStyleOptions = isWPPrettier ? { parenSpacing: false } : {};
 
-// Disable reason: The current JSDoc tooling does not yet understand TypeScript
-// union types.
 /** @type {PrettierConfig & WPPrettierOptions} */
 const config = {
 	useTabs: true,
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index 27ac42c3d689ea..45f7374e06fbf7 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "2.5.0",
+	"version": "4.13.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"lib/index.js"
@@ -28,7 +29,7 @@
 	"main": "lib/index.js",
 	"types": "build-types",
 	"peerDependencies": {
-		"prettier": ">=2"
+		"prettier": ">=3"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/prettier-config/tsconfig.json b/packages/prettier-config/tsconfig.json
index 0fc48d2e9005e4..0636ff7d0081dd 100644
--- a/packages/prettier-config/tsconfig.json
+++ b/packages/prettier-config/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "lib",
diff --git a/packages/primitives/.npmrc b/packages/primitives/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/primitives/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index d890ed58d16de9..29211c9586ede4 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.56.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 3.55.0 (2024-05-02)
+
+## 3.54.0 (2024-04-19)
+
+## 3.53.0 (2024-04-03)
+
+## 3.52.0 (2024-03-21)
+
+## 3.51.0 (2024-03-06)
+
+## 3.50.0 (2024-02-21)
+
+## 3.49.0 (2024-02-09)
+
+## 3.48.0 (2024-01-24)
+
+## 3.47.0 (2024-01-10)
+
+## 3.46.0 (2023-12-13)
+
+## 3.45.0 (2023-11-29)
+
+## 3.44.0 (2023-11-16)
+
+## 3.43.0 (2023-11-02)
+
+## 3.42.0 (2023-10-18)
+
+## 3.41.0 (2023-10-05)
+
+## 3.40.0 (2023-09-20)
+
+### Enhancements
+
+-   `<SVG>` now forwards ref to the underlying `<svg>` element ([#54492](https://github.com/WordPress/gutenberg/pull/54492)).
+
+## 3.39.0 (2023-08-31)
+
+## 3.38.0 (2023-08-16)
+
+## 3.37.0 (2023-08-10)
+
+## 3.36.0 (2023-07-20)
+
+## 3.35.0 (2023-07-05)
+
+## 3.34.0 (2023-06-23)
+
+## 3.33.0 (2023-06-07)
+
+## 3.32.0 (2023-05-24)
+
+## 3.31.0 (2023-05-10)
+
+## 3.30.0 (2023-04-26)
+
+## 3.29.0 (2023-04-12)
+
+## 3.28.0 (2023-03-29)
+
+## 3.27.0 (2023-03-15)
+
+## 3.26.0 (2023-03-01)
+
+## 3.25.0 (2023-02-15)
+
+## 3.24.0 (2023-02-01)
+
+## 3.23.0 (2023-01-11)
+
+## 3.22.0 (2023-01-02)
+
+## 3.21.0 (2022-12-14)
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -44,7 +156,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -56,20 +168,20 @@
 
 ### 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/.
+-   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/>.
 
 ## 1.12.0 (2021-03-17)
 
 ## 1.5.0 (2020-05-14)
 
-### New Feature
+### New Features
 
 -   Include TypeScript type declarations ([#21781](https://github.com/WordPress/gutenberg/pull/21781))
 
 ## 1.3.1 (2020-04-15)
 
-### Bug Fix
+### Bug Fixes
 
 -   Hide TypeScript type declarations ([#21613](https://github.com/WordPress/gutenberg/pull/21613))
     after they were found to conflict with DefinitelyTyped provided declarations.
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 74c244d59d388b..1f024a64bce463 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "3.20.0",
+	"version": "4.13.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,19 +20,24 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"src/**/*.scss"
 	],
-	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/element": "file:../element",
-		"classnames": "^2.3.1"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/element": "*",
+		"clsx": "^2.1.1"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/primitives/src/block-quotation/index.native.js b/packages/primitives/src/block-quotation/index.native.js
index 01e8b7cdb4c50b..36368a6d78e066 100644
--- a/packages/primitives/src/block-quotation/index.native.js
+++ b/packages/primitives/src/block-quotation/index.native.js
@@ -20,6 +20,9 @@ export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
 			styles.wpBlockQuoteLight,
 			styles.wpBlockQuoteDark
 		),
+		style?.baseColors?.color?.text && {
+			borderLeftColor: style.baseColors.color.text,
+		},
 		style?.color && {
 			borderLeftColor: style.color,
 		},
@@ -29,7 +32,10 @@ export const BlockQuotation = forwardRef( ( { ...props }, ref ) => {
 	const colorStyle = style?.color ? { color: style.color } : {};
 
 	const newChildren = Children.map( props.children, ( child ) => {
-		if ( child && child.props.identifier === 'citation' ) {
+		const { identifier, attributeKey } = child?.props || {};
+		const identifierKey = identifier ?? attributeKey;
+
+		if ( identifierKey === 'citation' ) {
 			return cloneElement( child, {
 				style: {
 					...styles.wpBlockQuoteCitation,
diff --git a/packages/primitives/src/block-quotation/style.native.scss b/packages/primitives/src/block-quotation/style.native.scss
index a755027cb98452..d89b556275f728 100644
--- a/packages/primitives/src/block-quotation/style.native.scss
+++ b/packages/primitives/src/block-quotation/style.native.scss
@@ -2,7 +2,6 @@
 	border-left-width: 4px;
 	border-left-style: solid;
 	padding-left: $block-edge-to-content;
-	padding-top: $dashed-border-space;
 	margin-left: 0;
 }
 
diff --git a/packages/primitives/src/horizontal-rule/index.native.js b/packages/primitives/src/horizontal-rule/index.native.js
index 853b57e76d0c1a..67906b692935e9 100644
--- a/packages/primitives/src/horizontal-rule/index.native.js
+++ b/packages/primitives/src/horizontal-rule/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import Hr from 'react-native-hr';
+import { Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -13,16 +13,46 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './styles.scss';
 
-const HR = ( { getStylesFromColorScheme, ...props } ) => {
-	const lineStyle = getStylesFromColorScheme( styles.line, styles.lineDark );
+const HR = ( {
+	getStylesFromColorScheme,
+	lineStyle,
+	marginLeft,
+	marginRight,
+	style,
+	textStyle,
+	text,
+	...props
+} ) => {
+	const renderLine = ( key ) => (
+		<View
+			key={ key }
+			style={ [
+				getStylesFromColorScheme( styles.line, styles.lineDark ),
+				lineStyle,
+			] }
+		/>
+	);
+
+	const renderText = ( key ) => (
+		<View key={ key } style={ styles.textContainer }>
+			<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
+		</View>
+	);
+
+	const renderInner = () => {
+		if ( ! text ) {
+			return renderLine();
+		}
+		return [ renderLine( 1 ), renderText( 2 ), renderLine( 3 ) ];
+	};
 
 	return (
-		<Hr
+		<View
+			style={ [ styles.container, { marginLeft, marginRight }, style ] }
 			{ ...props }
-			lineStyle={ [ lineStyle, props.lineStyle ] }
-			marginLeft={ 0 }
-			marginRight={ 0 }
-		/>
+		>
+			{ renderInner() }
+		</View>
 	);
 };
 
diff --git a/packages/primitives/src/horizontal-rule/styles.native.scss b/packages/primitives/src/horizontal-rule/styles.native.scss
index dabb62a8336542..3e58d40e04b1ed 100644
--- a/packages/primitives/src/horizontal-rule/styles.native.scss
+++ b/packages/primitives/src/horizontal-rule/styles.native.scss
@@ -1,8 +1,26 @@
+.container {
+	align-items: center;
+	flex-direction: row;
+	margin-left: 0;
+	margin-right: 0;
+}
+
 .line {
 	background-color: $gray-lighten-20;
+	flex: 1 0 10px;
 	height: 2;
 }
 
 .lineDark {
 	background-color: $gray-50;
 }
+
+.textContainer {
+	flex: 0 1 auto;
+	margin-left: 15px;
+	margin-right: 15px;
+}
+
+.text {
+	text-align: center;
+}
diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js
index 79a5e7f58e55d6..4da6685d3d6f1e 100644
--- a/packages/primitives/src/svg/index.js
+++ b/packages/primitives/src/svg/index.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { createElement } from '@wordpress/element';
+import { createElement, forwardRef } from '@wordpress/element';
 
 /** @typedef {{isPressed?: boolean} & import('react').ComponentPropsWithoutRef<'svg'>} SVGProps */
 
@@ -82,23 +82,26 @@ export const LinearGradient = ( props ) =>
  */
 export const Stop = ( props ) => createElement( 'stop', props );
 
-/**
- *
- * @param {SVGProps} props isPressed indicates whether the SVG should appear as pressed.
- *                         Other props will be passed through to svg component.
- *
- * @return {JSX.Element} Stop component
- */
-export const SVG = ( { className, isPressed, ...props } ) => {
-	const appliedProps = {
-		...props,
-		className:
-			classnames( className, { 'is-pressed': isPressed } ) || undefined,
-		'aria-hidden': true,
-		focusable: false,
-	};
+export const SVG = forwardRef(
+	/**
+	 * @param {SVGProps}                                    props isPressed indicates whether the SVG should appear as pressed.
+	 *                                                            Other props will be passed through to svg component.
+	 * @param {import('react').ForwardedRef<SVGSVGElement>} ref   The forwarded ref to the SVG element.
+	 *
+	 * @return {JSX.Element} Stop component
+	 */
+	( { className, isPressed, ...props }, ref ) => {
+		const appliedProps = {
+			...props,
+			className:
+				clsx( className, { 'is-pressed': isPressed } ) || undefined,
+			'aria-hidden': true,
+			focusable: false,
+		};
 
-	// Disable reason: We need to have a way to render HTML tag for web.
-	// eslint-disable-next-line react/forbid-elements
-	return <svg { ...appliedProps } />;
-};
+		// Disable reason: We need to have a way to render HTML tag for web.
+		// eslint-disable-next-line react/forbid-elements
+		return <svg { ...appliedProps } ref={ ref } />;
+	}
+);
+SVG.displayName = 'SVG';
diff --git a/packages/primitives/src/svg/index.native.js b/packages/primitives/src/svg/index.native.js
index 79a0c33cde8d6e..719f4d233cc3af 100644
--- a/packages/primitives/src/svg/index.native.js
+++ b/packages/primitives/src/svg/index.native.js
@@ -8,6 +8,7 @@ import { Animated } from 'react-native';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ export {
 	LinearGradient,
 	Stop,
 	Line,
+	SvgXml,
 } from 'react-native-svg';
 
 const AnimatedSvg = Animated.createAnimatedComponent(
@@ -37,13 +39,13 @@ export const SVG = ( {
 	animated = false,
 	...props
 } ) => {
-	const colorScheme = props.colorScheme || 'light';
+	const colorScheme = usePreferredColorScheme();
 	const stylesFromClasses = className
 		.split( ' ' )
 		.map( ( element ) => styles[ element ] )
 		.filter( Boolean );
 	const defaultStyle = isPressed
-		? styles[ 'is-pressed' ]
+		? styles[ `is-pressed--${ colorScheme }` ]
 		: styles[ 'components-toolbar__control-' + colorScheme ];
 	const propStyle = Array.isArray( props.style )
 		? props.style.reduce( ( acc, el ) => {
diff --git a/packages/primitives/src/svg/style.native.scss b/packages/primitives/src/svg/style.native.scss
index ea8e7845174aaa..2e7dfdbfaff7a6 100644
--- a/packages/primitives/src/svg/style.native.scss
+++ b/packages/primitives/src/svg/style.native.scss
@@ -1,21 +1,30 @@
 .dashicon-light,
 .components-toolbar__control-light {
-	color: $toolbar-button;
+	color: $light-primary;
 	fill: currentColor;
 }
 
 .dashicon-dark,
 .components-toolbar__control-dark {
-	color: $gray_20;
+	color: $dark-primary;
 	fill: currentColor;
 }
 
-.dashicon-active,
-.is-pressed {
+.dashicon-active {
 	color: #fff;
 	fill: currentColor;
 }
 
+.is-pressed--light {
+	color: $light-primary;
+	fill: currentColor;
+}
+
+.is-pressed--dark {
+	color: $dark-primary;
+	fill: currentColor;
+}
+
 .dashicons-insert {
 	color: #87a6bc;
 	fill: currentColor;
diff --git a/packages/primitives/tsconfig.json b/packages/primitives/tsconfig.json
index 085d6fa752ab04..59a95359b5ea65 100644
--- a/packages/primitives/tsconfig.json
+++ b/packages/primitives/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/priority-queue/.npmrc b/packages/priority-queue/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/priority-queue/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 55c994c36ed870..5427d3d5ff7616 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
+## 2.57.0 (2024-05-02)
+
+## 2.56.0 (2024-04-19)
+
+## 2.55.0 (2024-04-03)
+
+## 2.54.0 (2024-03-21)
+
+## 2.53.0 (2024-03-06)
+
+## 2.52.0 (2024-02-21)
+
+## 2.51.0 (2024-02-09)
+
+## 2.50.0 (2024-01-24)
+
+## 2.49.0 (2024-01-10)
+
+## 2.48.0 (2023-12-13)
+
+## 2.47.0 (2023-11-29)
+
+## 2.46.0 (2023-11-16)
+
+## 2.45.0 (2023-11-02)
+
+## 2.44.0 (2023-10-18)
+
+## 2.43.0 (2023-10-05)
+
+## 2.42.0 (2023-09-20)
+
+## 2.41.0 (2023-08-31)
+
+## 2.40.0 (2023-08-16)
+
+## 2.39.0 (2023-08-10)
+
+## 2.38.0 (2023-07-20)
+
+## 2.37.0 (2023-07-05)
+
+## 2.36.0 (2023-06-23)
+
+## 2.35.0 (2023-06-07)
+
+## 2.34.0 (2023-05-24)
+
+## 2.33.0 (2023-05-10)
+
+## 2.32.0 (2023-04-26)
+
+## 2.31.0 (2023-04-12)
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -34,9 +138,9 @@
 
 ## 2.7.0 (2022-04-21)
 
-### New features
+### New Features
 
--  Add a new `cancel` method that removes scheduled callbacks without executing them.
+-   Add a new `cancel` method that removes scheduled callbacks without executing them.
 
 ## 2.6.0 (2022-04-08)
 
@@ -61,7 +165,7 @@
 
 ## 1.6.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
diff --git a/packages/priority-queue/README.md b/packages/priority-queue/README.md
index bc4504d029e5cc..7d38649cb20691 100644
--- a/packages/priority-queue/README.md
+++ b/packages/priority-queue/README.md
@@ -18,8 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ### createQueue
 
-Creates a context-aware queue that only executes
-the last task of a given context.
+Creates a context-aware queue that only executes the last task of a given context.
 
 _Usage_
 
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index dc927d7f757f38..eb213ffe2d031a 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "2.22.0",
+	"version": "3.13.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,15 +20,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"requestidlecallback": "^0.3.0"
 	},
 	"publishConfig": {
diff --git a/packages/priority-queue/src/index.js b/packages/priority-queue/src/index.js
index bd6fbad856d208..505624693ad837 100644
--- a/packages/priority-queue/src/index.js
+++ b/packages/priority-queue/src/index.js
@@ -67,44 +67,43 @@ import requestIdleCallback from './request-idle-callback';
  * @return {WPPriorityQueue} Queue object with `add`, `flush` and `reset` methods.
  */
 export const createQueue = () => {
-	/** @type {WPPriorityQueueContext[]} */
-	let waitingList = [];
-
-	/** @type {WeakMap<WPPriorityQueueContext,WPPriorityQueueCallback>} */
-	let elementsMap = new WeakMap();
-
+	/** @type {Map<WPPriorityQueueContext, WPPriorityQueueCallback>} */
+	const waitingList = new Map();
 	let isRunning = false;
 
 	/**
 	 * Callback to process as much queue as time permits.
 	 *
+	 * Map Iteration follows the original insertion order. This means that here
+	 * we can iterate the queue and know that the first contexts which were
+	 * added will be run first. On the other hand, if anyone adds a new callback
+	 * for an existing context it will supplant the previously-set callback for
+	 * that context because we reassigned that map key's value.
+	 *
+	 * In the case that a callback adds a new callback to its own context then
+	 * the callback it adds will appear at the end of the iteration and will be
+	 * run only after all other existing contexts have finished executing.
+	 *
 	 * @param {IdleDeadline|number} deadline Idle callback deadline object, or
 	 *                                       animation frame timestamp.
 	 */
 	const runWaitingList = ( deadline ) => {
-		const hasTimeRemaining =
-			typeof deadline === 'number'
-				? () => false
-				: () => deadline.timeRemaining() > 0;
-
-		do {
-			if ( waitingList.length === 0 ) {
-				isRunning = false;
-				return;
+		for ( const [ nextElement, callback ] of waitingList ) {
+			waitingList.delete( nextElement );
+			callback();
+
+			if (
+				'number' === typeof deadline ||
+				deadline.timeRemaining() <= 0
+			) {
+				break;
 			}
+		}
 
-			const nextElement = /** @type {WPPriorityQueueContext} */ (
-				waitingList.shift()
-			);
-			const callback = /** @type {WPPriorityQueueCallback} */ (
-				elementsMap.get( nextElement )
-			);
-			// If errors with undefined callbacks are encountered double check that all of your useSelect calls
-			// have all dependecies set correctly in second parameter. Missing dependencies can cause unexpected
-			// loops and race conditions in the queue.
-			callback();
-			elementsMap.delete( nextElement );
-		} while ( hasTimeRemaining() );
+		if ( waitingList.size === 0 ) {
+			isRunning = false;
+			return;
+		}
 
 		requestIdleCallback( runWaitingList );
 	};
@@ -112,16 +111,18 @@ export const createQueue = () => {
 	/**
 	 * Add a callback to the queue for a given context.
 	 *
+	 * If errors with undefined callbacks are encountered double check that
+	 * all of your useSelect calls have the right dependencies set correctly
+	 * in their second parameter. Missing dependencies can cause unexpected
+	 * loops and race conditions in the queue.
+	 *
 	 * @type {WPPriorityQueueAdd}
 	 *
 	 * @param {WPPriorityQueueContext}  element Context object.
 	 * @param {WPPriorityQueueCallback} item    Callback function.
 	 */
 	const add = ( element, item ) => {
-		if ( ! elementsMap.has( element ) ) {
-			waitingList.push( element );
-		}
-		elementsMap.set( element, item );
+		waitingList.set( element, item );
 		if ( ! isRunning ) {
 			isRunning = true;
 			requestIdleCallback( runWaitingList );
@@ -139,16 +140,12 @@ export const createQueue = () => {
 	 * @return {boolean} Whether flush was performed.
 	 */
 	const flush = ( element ) => {
-		if ( ! elementsMap.has( element ) ) {
+		const callback = waitingList.get( element );
+		if ( undefined === callback ) {
 			return false;
 		}
 
-		const index = waitingList.indexOf( element );
-		waitingList.splice( index, 1 );
-		const callback = /** @type {WPPriorityQueueCallback} */ (
-			elementsMap.get( element )
-		);
-		elementsMap.delete( element );
+		waitingList.delete( element );
 		callback();
 
 		return true;
@@ -166,15 +163,7 @@ export const createQueue = () => {
 	 * @return {boolean} Whether any callbacks got cancelled.
 	 */
 	const cancel = ( element ) => {
-		if ( ! elementsMap.has( element ) ) {
-			return false;
-		}
-
-		const index = waitingList.indexOf( element );
-		waitingList.splice( index, 1 );
-		elementsMap.delete( element );
-
-		return true;
+		return waitingList.delete( element );
 	};
 
 	/**
@@ -183,8 +172,7 @@ export const createQueue = () => {
 	 * @type {WPPriorityQueueReset}
 	 */
 	const reset = () => {
-		waitingList = [];
-		elementsMap = new WeakMap();
+		waitingList.clear();
 		isRunning = false;
 	};
 
diff --git a/packages/priority-queue/tsconfig.json b/packages/priority-queue/tsconfig.json
index 44d5c8525bda33..96d649eb7a6233 100644
--- a/packages/priority-queue/tsconfig.json
+++ b/packages/priority-queue/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
new file mode 100644
index 00000000000000..8792e587a83f16
--- /dev/null
+++ b/packages/private-apis/CHANGELOG.md
@@ -0,0 +1,118 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.40.0 (2024-05-16)
+
+## 0.39.0 (2024-05-02)
+
+## 0.38.0 (2024-04-19)
+
+## 0.37.0 (2024-04-03)
+
+## 0.36.0 (2024-03-21)
+
+## 0.35.0 (2024-03-06)
+
+## 0.34.0 (2024-02-21)
+
+## 0.33.0 (2024-02-09)
+
+## 0.32.0 (2024-01-24)
+
+## 0.31.0 (2024-01-10)
+
+## 0.30.0 (2023-12-13)
+
+## 0.29.0 (2023-11-29)
+
+## 0.28.0 (2023-11-16)
+
+## 0.27.0 (2023-11-02)
+
+## 0.26.0 (2023-10-18)
+
+## 0.25.0 (2023-10-05)
+
+## 0.24.0 (2023-09-20)
+
+## 0.23.0 (2023-08-31)
+
+## 0.22.0 (2023-08-16)
+
+## 0.21.0 (2023-08-10)
+
+## 0.20.0 (2023-07-20)
+
+## 0.19.0 (2023-07-05)
+
+## 0.18.0 (2023-06-23)
+
+## 0.17.0 (2023-06-07)
+
+## 0.16.0 (2023-05-24)
+
+## 0.15.0 (2023-05-10)
+
+## 0.14.0 (2023-04-26)
+
+## 0.13.0 (2023-04-12)
+
+## 0.12.0 (2023-03-29)
+
+## 0.11.0 (2023-03-15)
+
+## 0.10.0 (2023-03-01)
+
+## 0.9.0 (2023-02-15)
+
+## 0.8.0 (2023-02-01)
+
+## 0.7.0 (2023-01-11)
+
+## 0.6.0 (2023-01-02)
+
+## 0.5.0 (2022-12-14)
+
+## 0.4.0 (2022-11-16)
+
+## 0.3.0 (2022-11-02)
+
+## 0.2.0 (2022-10-19)
+
+## 0.1.0 (2022-10-05)
+
+– Package created.
diff --git a/packages/private-apis/README.md b/packages/private-apis/README.md
new file mode 100644
index 00000000000000..b95fb0d7bd3eba
--- /dev/null
+++ b/packages/private-apis/README.md
@@ -0,0 +1,123 @@
+# Private APIs
+
+`@wordpress/private-apis` enables sharing private `__experimental` APIs across `@wordpress` packages without
+[publicly exposing them to WordPress extenders](https://make.wordpress.org/core/2022/08/10/proposal-stop-merging-experimental-apis-from-gutenberg-to-wordpress-core/#respond).
+
+## Getting started
+
+Every `@wordpress` package wanting to privately access or expose experimental APIs must opt-in to `@wordpress/private-apis`:
+
+```js
+// In packages/block-editor/private-apis.js:
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/block-editor' // Name of the package calling __dangerousOptInToUnstableAPIsOnlyForCoreModules,
+		// (not the name of the package whose APIs you want to access)
+	);
+```
+
+Each package may only opt in once. The function name communicates that plugins are not supposed to use it.
+
+The function will throw an error if the following conditions are not met:
+
+1. The first argument must exactly match the required consent string: `'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.'`.
+2. The second argument must be a known `@wordpress` package that hasn't yet opted into `@wordpress/private-apis`
+
+Once the opt-in is complete, the obtained `lock()` and `unlock()` utilities enable hiding `__experimental` APIs from the naked eye:
+
+```js
+// Say this object is exported from a package:
+export const publicObject = {};
+
+// However, this string is internal and should not be publicly available:
+const __experimentalString = '__experimental information';
+
+// Solution: lock the string "inside" of the object:
+lock( publicObject, __experimentalString );
+
+// The string is not nested in the object and cannot be extracted from it:
+console.log( publicObject );
+// {}
+
+// The only way to access the string is by "unlocking" the object:
+console.log( unlock( publicObject ) );
+// "__experimental information"
+
+// lock() accepts all data types, not just strings:
+export const anotherObject = {};
+lock( anotherObject, function __experimentalFn() {} );
+console.log( unlock( anotherObject ) );
+// function __experimentalFn() {}
+```
+
+Use `lock()` and `unlock()` to privately distribute the `__experimental` APIs across `@wordpress` packages:
+
+```js
+// In packages/package1/index.js:
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+/* Attach private data to the exported object */
+lock( privateApis, {
+	__experimentalFunction: function () {},
+} );
+
+// In packages/package2/index.js:
+import { privateApis } from '@wordpress/package1';
+import { unlock } from './lock-unlock';
+
+const { __experimentalFunction } = unlock( privateApis );
+```
+
+## Shipping experimental APIs
+
+See the [Experimental and Unstable APIs chapter of Coding Guidelines](/docs/contributors/code/coding-guidelines.md) to learn how `lock()` and `unlock()` can help
+you ship private experimental functions, arguments, components, properties, actions, selectors.
+
+## Technical limitations
+
+A determined developer who would want to use the private experimental APIs at all costs would have to:
+
+-   Realize a private importing system exists
+-   Read the code where the risks would be spelled out in capital letters
+-   Explicitly type out he or she is aware of the consequences
+-   Pretend to register a `@wordpress` package (and trigger an error as soon as the real package is loaded)
+
+Dangerously opting in to using these APIs by theme and plugin developers is not recommended. Furthermore, the WordPress Core philosophy to strive to maintain backward compatibility for third-party developers **does not apply** to experimental APIs registered via this package.
+
+The consent string for opting in to these APIs may change at any time and without notice. This change will break existing third-party code. Such a change may occur in either a major or minor release.
+
+## 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>
+
+### Updating the consent string
+
+The consent string for unlocking private APIs is intended to change on a regular basis. To update the consent string:
+
+1. Come up with a new consent string, the string should mention that themes or plugins opting in to unstable and private features will break in future versions of WordPress.
+2. Ensure the consent string has not being used previously.
+3. Append the new string to the history list below.
+4. Replace the consent string in the following locations:
+   * twice in the documentation above
+   * in the `src/implementation.js` file of this package
+   * in the `src/lock-unlock.js` file located in packages consuming private APIs
+   * search the full code base for any other occurrences
+
+**Note**: The consent string is not used for user facing content and as such should _not_ be made translatable via the internationalization features of WordPress.
+
+Updating the consent string is considered a task and can be done during the late stages of a WordPress release.
+
+#### Consent string history
+
+The final string in this list is the current version.
+
+1. I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.
+2. I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.
+3. I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
new file mode 100644
index 00000000000000..1436270e2c7f49
--- /dev/null
+++ b/packages/private-apis/package.json
@@ -0,0 +1,38 @@
+{
+	"name": "@wordpress/private-apis",
+	"version": "1.13.0",
+	"description": "Internal experimental APIs for WordPress core.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"dom",
+		"utils"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/private-apis/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/private-apis"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "7.25.7"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/private-apis/src/implementation.ts b/packages/private-apis/src/implementation.ts
new file mode 100644
index 00000000000000..5a5fb3f39fa183
--- /dev/null
+++ b/packages/private-apis/src/implementation.ts
@@ -0,0 +1,227 @@
+/**
+ * wordpress/private-apis – the utilities to enable private cross-package
+ * exports of private APIs.
+ *
+ * This "implementation.ts" file is needed for the sake of the unit tests. It
+ * exports more than the public API of the package to aid in testing.
+ */
+
+/**
+ * The list of core modules allowed to opt-in to the private APIs.
+ */
+const CORE_MODULES_USING_PRIVATE_APIS = [
+	'@wordpress/block-directory',
+	'@wordpress/block-editor',
+	'@wordpress/block-library',
+	'@wordpress/blocks',
+	'@wordpress/commands',
+	'@wordpress/components',
+	'@wordpress/core-commands',
+	'@wordpress/core-data',
+	'@wordpress/customize-widgets',
+	'@wordpress/data',
+	'@wordpress/edit-post',
+	'@wordpress/edit-site',
+	'@wordpress/edit-widgets',
+	'@wordpress/editor',
+	'@wordpress/format-library',
+	'@wordpress/patterns',
+	'@wordpress/preferences',
+	'@wordpress/reusable-blocks',
+	'@wordpress/router',
+	'@wordpress/dataviews',
+	'@wordpress/fields',
+	'@wordpress/media-utils',
+];
+
+/**
+ * A list of core modules that already opted-in to
+ * the privateApis package.
+ */
+const registeredPrivateApis: Array< string > = [];
+
+/*
+ * Warning for theme and plugin developers.
+ *
+ * The use of private developer APIs is intended for use by WordPress Core
+ * and the Gutenberg plugin exclusively.
+ *
+ * Dangerously opting in to using these APIs is NOT RECOMMENDED. Furthermore,
+ * the WordPress Core philosophy to strive to maintain backward compatibility
+ * for third-party developers DOES NOT APPLY to private APIs.
+ *
+ * THE CONSENT STRING FOR OPTING IN TO THESE APIS MAY CHANGE AT ANY TIME AND
+ * WITHOUT NOTICE. THIS CHANGE WILL BREAK EXISTING THIRD-PARTY CODE. SUCH A
+ * CHANGE MAY OCCUR IN EITHER A MAJOR OR MINOR RELEASE.
+ */
+const requiredConsent =
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.';
+
+// The safety measure is meant for WordPress core where IS_WORDPRESS_CORE is set to true.
+const allowReRegistration = globalThis.IS_WORDPRESS_CORE ? false : true;
+
+/**
+ * Called by a @wordpress package wishing to opt-in to accessing or exposing
+ * private private APIs.
+ *
+ * @param consent    The consent string.
+ * @param moduleName The name of the module that is opting in.
+ * @return An object containing the lock and unlock functions.
+ */
+export const __dangerousOptInToUnstableAPIsOnlyForCoreModules = (
+	consent: string,
+	moduleName: string
+) => {
+	if ( ! CORE_MODULES_USING_PRIVATE_APIS.includes( moduleName ) ) {
+		throw new Error(
+			`You tried to opt-in to unstable APIs as module "${ moduleName }". ` +
+				'This feature is only for JavaScript modules shipped with WordPress core. ' +
+				'Please do not use it in plugins and themes as the unstable APIs will be removed ' +
+				'without a warning. If you ignore this error and depend on unstable features, ' +
+				'your product will inevitably break on one of the next WordPress releases.'
+		);
+	}
+	if (
+		! allowReRegistration &&
+		registeredPrivateApis.includes( moduleName )
+	) {
+		// This check doesn't play well with Story Books / Hot Module Reloading
+		// and isn't included in the Gutenberg plugin. It only matters in the
+		// WordPress core release.
+		throw new Error(
+			`You tried to opt-in to unstable APIs as module "${ moduleName }" which is already registered. ` +
+				'This feature is only for JavaScript modules shipped with WordPress core. ' +
+				'Please do not use it in plugins and themes as the unstable APIs will be removed ' +
+				'without a warning. If you ignore this error and depend on unstable features, ' +
+				'your product will inevitably break on one of the next WordPress releases.'
+		);
+	}
+	if ( consent !== requiredConsent ) {
+		throw new Error(
+			`You tried to opt-in to unstable APIs without confirming you know the consequences. ` +
+				'This feature is only for JavaScript modules shipped with WordPress core. ' +
+				'Please do not use it in plugins and themes as the unstable APIs will removed ' +
+				'without a warning. If you ignore this error and depend on unstable features, ' +
+				'your product will inevitably break on the next WordPress release.'
+		);
+	}
+	registeredPrivateApis.push( moduleName );
+
+	return {
+		lock,
+		unlock,
+	};
+};
+
+/**
+ * Binds private data to an object.
+ * It does not alter the passed object in any way, only
+ * registers it in an internal map of private data.
+ *
+ * The private data can't be accessed by any other means
+ * than the `unlock` function.
+ *
+ * @example
+ * ```js
+ * const object = {};
+ * const privateData = { a: 1 };
+ * lock( object, privateData );
+ *
+ * object
+ * // {}
+ *
+ * unlock( object );
+ * // { a: 1 }
+ * ```
+ *
+ * @param object      The object to bind the private data to.
+ * @param privateData The private data to bind to the object.
+ */
+function lock( object: unknown, privateData: unknown ) {
+	if ( ! object ) {
+		throw new Error( 'Cannot lock an undefined object.' );
+	}
+	const _object = object as Record< symbol, WeakKey >;
+
+	if ( ! ( __private in _object ) ) {
+		_object[ __private ] = {};
+	}
+	lockedData.set( _object[ __private ], privateData );
+}
+
+/**
+ * Unlocks the private data bound to an object.
+ *
+ * It does not alter the passed object in any way, only
+ * returns the private data paired with it using the `lock()`
+ * function.
+ *
+ * @example
+ * ```js
+ * const object = {};
+ * const privateData = { a: 1 };
+ * lock( object, privateData );
+ *
+ * object
+ * // {}
+ *
+ * unlock( object );
+ * // { a: 1 }
+ * ```
+ *
+ * @param object The object to unlock the private data from.
+ * @return The private data bound to the object.
+ */
+function unlock< T = any >( object: unknown ): T {
+	if ( ! object ) {
+		throw new Error( 'Cannot unlock an undefined object.' );
+	}
+	const _object = object as Record< symbol, WeakKey >;
+
+	if ( ! ( __private in _object ) ) {
+		throw new Error(
+			'Cannot unlock an object that was not locked before. '
+		);
+	}
+
+	return lockedData.get( _object[ __private ] );
+}
+
+const lockedData = new WeakMap();
+
+/**
+ * Used by lock() and unlock() to uniquely identify the private data
+ * related to a containing object.
+ */
+const __private = Symbol( 'Private API ID' );
+
+// Unit tests utilities:
+
+/**
+ * Private function to allow the unit tests to allow
+ * a mock module to access the private APIs.
+ *
+ * @param name The name of the module.
+ */
+export function allowCoreModule( name: string ) {
+	CORE_MODULES_USING_PRIVATE_APIS.push( name );
+}
+
+/**
+ * Private function to allow the unit tests to set
+ * a custom list of allowed modules.
+ */
+export function resetAllowedCoreModules() {
+	while ( CORE_MODULES_USING_PRIVATE_APIS.length ) {
+		CORE_MODULES_USING_PRIVATE_APIS.pop();
+	}
+}
+/**
+ * Private function to allow the unit tests to reset
+ * the list of registered private apis.
+ */
+export function resetRegisteredPrivateApis() {
+	while ( registeredPrivateApis.length ) {
+		registeredPrivateApis.pop();
+	}
+}
diff --git a/packages/private-apis/src/index.ts b/packages/private-apis/src/index.ts
new file mode 100644
index 00000000000000..1e36c24b5df4bd
--- /dev/null
+++ b/packages/private-apis/src/index.ts
@@ -0,0 +1 @@
+export { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from './implementation';
diff --git a/packages/private-apis/src/test/index.js b/packages/private-apis/src/test/index.js
new file mode 100644
index 00000000000000..51d1b6a3afba00
--- /dev/null
+++ b/packages/private-apis/src/test/index.js
@@ -0,0 +1,308 @@
+/**
+ * Internal dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '../';
+import {
+	resetRegisteredPrivateApis,
+	resetAllowedCoreModules,
+	allowCoreModule,
+} from '../implementation';
+
+beforeEach( () => {
+	resetRegisteredPrivateApis();
+	resetAllowedCoreModules();
+	allowCoreModule( '@privateApis/test' );
+	allowCoreModule( '@privateApis/test-consumer' );
+} );
+
+const requiredConsent =
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.';
+
+describe( '__dangerousOptInToUnstableAPIsOnlyForCoreModules', () => {
+	it( 'Should require a consent string', () => {
+		expect( () => {
+			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+				'',
+				'@privateApis/test'
+			);
+		} ).toThrow( /without confirming you know the consequences/ );
+	} );
+	it( 'Should require a valid @wordpress package name', () => {
+		expect( () => {
+			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+				requiredConsent,
+				'custom_package'
+			);
+		} ).toThrow(
+			/This feature is only for JavaScript modules shipped with WordPress core/
+		);
+	} );
+	it( 'Should not register the same module twice', () => {
+		expect( () => {
+			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+				requiredConsent,
+				'@privateApis/test'
+			);
+			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+				requiredConsent,
+				'@privateApis/test'
+			);
+		} ).toThrow( /is already registered/ );
+	} );
+	it( 'Should grant access to unstable APIs when passed both a consent string and a previously unregistered package name', () => {
+		const unstableAPIs = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+			requiredConsent,
+			'@privateApis/test'
+		);
+		expect( unstableAPIs.lock ).toEqual( expect.any( Function ) );
+		expect( unstableAPIs.unlock ).toEqual( expect.any( Function ) );
+	} );
+} );
+
+describe( 'lock(), unlock()', () => {
+	let lock, unlock;
+	beforeEach( () => {
+		// This would live in @privateApis/test:
+		// Opt-in to private APIs
+		const privateApisAPI = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+			requiredConsent,
+			'@privateApis/test'
+		);
+		lock = privateApisAPI.lock;
+		unlock = privateApisAPI.unlock;
+	} );
+
+	it( 'Should lock and unlock objects "inside" other objects', () => {
+		const object = {};
+		const privateData = { secret: 'sh' };
+		lock( object, privateData );
+		expect( unlock( object ).secret ).toBe( 'sh' );
+	} );
+
+	it( 'Should lock and unlock functions "inside" objects', () => {
+		const object = {};
+		const privateData = () => 'sh';
+		lock( object, privateData );
+		expect( unlock( object )() ).toBe( 'sh' );
+	} );
+
+	it( 'Should lock and unlock strings "inside" objects', () => {
+		const object = {};
+		const privateData = 'sh';
+		lock( object, privateData );
+		expect( unlock( object ) ).toBe( 'sh' );
+	} );
+
+	it( 'Should lock and unlock objects "inside" functions', () => {
+		const fn = function () {};
+		const privateData = { secret: 'sh' };
+		lock( fn, privateData );
+		expect( unlock( fn ).secret ).toBe( 'sh' );
+	} );
+
+	it( 'Should lock and unlock functions "inside" other functions', () => {
+		const fn = function () {};
+		const privateData = () => 'sh';
+		lock( fn, privateData );
+		expect( unlock( fn )() ).toBe( 'sh' );
+	} );
+
+	it( 'Should lock and unlock strings "inside"  functions', () => {
+		const fn = function () {};
+		const privateData = 'sh';
+		lock( fn, privateData );
+		expect( unlock( fn ) ).toBe( 'sh' );
+	} );
+
+	it( 'Should grant other opt-int modules access to locked objects', () => {
+		const object = {};
+		const privateData = { secret: 'sh' };
+		lock( object, privateData );
+
+		// This would live in @wordpress/core-data:
+		// Register the private APIs
+		const coreDataPrivateApis =
+			__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+				requiredConsent,
+				'@privateApis/test-consumer'
+			);
+
+		// Get the private APIs registered by @privateApis/test
+		expect( coreDataPrivateApis.unlock( object ).secret ).toBe( 'sh' );
+	} );
+} );
+
+describe( 'Specific use-cases of sharing private APIs', () => {
+	let lock, unlock;
+	beforeEach( () => {
+		// This would live in @privateApis/test:
+		// Opt-in to private APIs
+		const privateApisAPI = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+			requiredConsent,
+			'@privateApis/test'
+		);
+		lock = privateApisAPI.lock;
+		unlock = privateApisAPI.unlock;
+	} );
+
+	it( 'Should enable privately exporting private functions', () => {
+		/**
+		 * Problem: The private __privateFunction should not be publicly
+		 * exposed to the consumers of package1.
+		 */
+		function __privateFunction() {}
+		/**
+		 * Solution: Privately lock it inside a publicly exported object.
+		 *
+		 * In `package1/index.js` we'd say:
+		 *
+		 * ```js
+		 * export const privateApis = {};
+		 * lock(privateApis, {
+		 *     __privateFunction
+		 * });
+		 * ```
+		 *
+		 * Let's simulate in the test code:
+		 */
+		const privateApis = {};
+		const package1Exports = {
+			privateApis,
+		};
+		lock( privateApis, { __privateFunction } );
+
+		/**
+		 * Then, in the consumer package we'd say:
+		 *
+		 * ```js
+		 * import { privateApis } from 'package1';
+		 * const { __privateFunction } = unlock( privateApis );
+		 * ```
+		 *
+		 * Let's simulate that, too:
+		 */
+		const unlockedFunction = unlock(
+			package1Exports.privateApis
+		).__privateFunction;
+		expect( unlockedFunction ).toBe( __privateFunction );
+	} );
+
+	it( 'Should enable exporting functions with private private arguments', () => {
+		/**
+		 * The publicly exported function does not have any private
+		 * arguments.
+		 *
+		 * @param {any} data The data to log
+		 */
+		function logData( data ) {
+			// Internally, it calls the private version of the function
+			// with fixed default values for the private arguments.
+			__privateLogData( data, 'plain' );
+		}
+		/**
+		 * The private private function is not publicly exported. Instead, it's
+		 * "locked" inside of the public logData function. It can be unlocked by any
+		 * participant of the private importing system.
+		 *
+		 * @param {any}    data            The data to log
+		 * @param {string} __privateFormat The logging format to use.
+		 */
+		function __privateLogData( data, __privateFormat ) {
+			if ( __privateFormat === 'table' ) {
+				// eslint-disable-next-line no-console
+				console.table( data );
+			} else {
+				// eslint-disable-next-line no-console
+				console.log( data );
+			}
+		}
+		lock( logData, __privateLogData );
+		/**
+		 * In package/log-data.js:
+		 *
+		 * ```js
+		 * lock( logData, __privateLogData );
+		 * export logData;
+		 * ```
+		 *
+		 * Then, in package/index.js:
+		 *
+		 * ```js
+		 * export { logData } from './log-data';
+		 * ```
+		 *
+		 * And that's it! The public function is publicly exported, and the
+		 * private function is available via unlock( logData ):
+		 *
+		 * ```js
+		 * import { logData } from 'package1';
+		 * const experimenalLogData = unlock( logData );
+		 * ```
+		 */
+		expect( unlock( logData ) ).toBe( __privateLogData );
+	} );
+
+	it( 'Should enable exporting React Components with private private properties', () => {
+		// eslint-disable-next-line jsdoc/require-param
+		/**
+		 * The publicly exported component does not have any private
+		 * properties.
+		 */
+		function DataTable( { data } ) {
+			// Internally, it calls the private version of the function
+			// with fixed default values for the private arguments.
+			return (
+				<PrivateDataTable
+					data={ data }
+					__privateFancyFormatting={ false }
+				/>
+			);
+		}
+		// eslint-disable-next-line jsdoc/require-param
+		/**
+		 * The private private component is not publicly exported. Instead, it's
+		 * "locked" inside of the public logData function. It can be unlocked by any
+		 * participant of the private importing system.
+		 */
+		function PrivateDataTable( { data, __privateFancyFormatting } ) {
+			const className = __privateFancyFormatting
+				? 'savage-css'
+				: 'regular-css';
+			return (
+				<table className={ className }>
+					{ data.map( ( row, i ) => (
+						<tr key={ i }>
+							{ row.map( ( col, j ) => (
+								<td key={ j }>{ col }</td>
+							) ) }
+						</tr>
+					) ) }
+				</table>
+			);
+		}
+		lock( DataTable, PrivateDataTable );
+		/**
+		 * In package/data-table.js:
+		 *
+		 * ```js
+		 * lock( DataTable, PrivateDataTable );
+		 * export DataTable;
+		 * ```
+		 *
+		 * Then, in package/index.js:
+		 *
+		 * ```js
+		 * export { DataTable } from './data-table';
+		 * ```
+		 *
+		 * And that's it! The public function is publicly exported, and the
+		 * private function is available via unlock( logData ):
+		 *
+		 * ```js
+		 * import { DataTable } from 'package1';
+		 * const PrivateDataTable = unlock( DataTable );
+		 * ```
+		 */
+		expect( unlock( DataTable ) ).toBe( PrivateDataTable );
+	} );
+} );
diff --git a/packages/private-apis/tsconfig.json b/packages/private-apis/tsconfig.json
new file mode 100644
index 00000000000000..9e3edfe0ae443c
--- /dev/null
+++ b/packages/private-apis/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ]
+	},
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/project-management-automation/.npmrc b/packages/project-management-automation/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/project-management-automation/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index a004419c5926a9..b6376be2fd6e0c 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+### Internal
+
+-   Upgrade `@octokit/webhooks` dependency ([#62666](https://github.com/WordPress/gutenberg/pull/62666)).
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.57.0 (2024-05-16)
+
+## 1.56.0 (2024-05-02)
+
+## 1.55.0 (2024-04-19)
+
+## 1.54.0 (2024-04-03)
+
+## 1.53.0 (2024-03-21)
+
+## 1.52.0 (2024-03-06)
+
+## 1.51.0 (2024-02-21)
+
+## 1.50.0 (2024-02-09)
+
+## 1.49.0 (2024-01-24)
+
+## 1.48.0 (2024-01-10)
+
+## 1.47.0 (2023-12-13)
+
+## 1.46.0 (2023-11-29)
+
+## 1.45.0 (2023-11-16)
+
+## 1.44.0 (2023-11-02)
+
+## 1.43.0 (2023-10-18)
+
+## 1.42.0 (2023-10-05)
+
+## 1.41.0 (2023-09-20)
+
+## 1.40.0 (2023-08-31)
+
+## 1.39.0 (2023-08-16)
+
+## 1.38.0 (2023-08-10)
+
+## 1.37.0 (2023-07-20)
+
+## 1.36.0 (2023-07-05)
+
+## 1.35.0 (2023-06-23)
+
+## 1.34.0 (2023-06-07)
+
+## 1.33.0 (2023-05-24)
+
+## 1.32.0 (2023-05-10)
+
+## 1.31.0 (2023-04-26)
+
+## 1.30.0 (2023-04-12)
+
+## 1.29.0 (2023-03-29)
+
+## 1.28.0 (2023-03-15)
+
+## 1.27.0 (2023-03-01)
+
+## 1.26.0 (2023-02-15)
+
+## 1.25.0 (2023-02-01)
+
+## 1.24.0 (2023-01-11)
+
+## 1.23.0 (2023-01-02)
+
+## 1.22.0 (2022-12-14)
+
 ## 1.21.0 (2022-11-16)
 
 ## 1.20.0 (2022-11-02)
@@ -14,12 +122,12 @@
 
 ## 1.4.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 -   The "Add First Time Contributor Label" task now prompts the user to link their GitHub account to their WordPress.org profile if necessary for props credit. The task has been renamed "First Time Contributor".
 
-### Improvements
+### Enhancements
 
 -   The "Add First Time Contributor Label" task now runs retroactively on pushes to trunk, due to [permission constraints](https://help.github.com/en/actions/configuring-and-managing-workflows/authenticating-with-the-github_token#permissions-for-the-github_token) of GitHub Actions.
 
diff --git a/packages/project-management-automation/action.yml b/packages/project-management-automation/action.yml
index 34490f539875cc..cf7f23a2174f28 100644
--- a/packages/project-management-automation/action.yml
+++ b/packages/project-management-automation/action.yml
@@ -6,5 +6,5 @@ inputs:
         description: Secret GitHub API token to use for making API requests.
         required: true
 runs:
-    using: node12
+    using: node20
     main: lib/index.js
diff --git a/packages/project-management-automation/lib/tasks/add-milestone/index.js b/packages/project-management-automation/lib/tasks/add-milestone/index.js
index f70a6560bea996..a8ba4a8ca8c684 100644
--- a/packages/project-management-automation/lib/tasks/add-milestone/index.js
+++ b/packages/project-management-automation/lib/tasks/add-milestone/index.js
@@ -6,7 +6,7 @@ const getAssociatedPullRequest = require( '../../get-associated-pull-request' );
 
 /** @typedef {import('@octokit/request-error').RequestError} RequestError */
 /** @typedef {ReturnType<import('@actions/github').getOctokit>} GitHub */
-/** @typedef {import('@octokit/webhooks').WebhookPayloadPush} WebhookPayloadPush */
+/** @typedef {import('@octokit/webhooks-types').EventPayloadMap['push']} WebhookPayloadPush */
 
 /**
  * Number of expected days elapsed between releases.
diff --git a/packages/project-management-automation/lib/tasks/assign-fixed-issues/index.js b/packages/project-management-automation/lib/tasks/assign-fixed-issues/index.js
index af529f5db63b38..afdbe7d809ac36 100644
--- a/packages/project-management-automation/lib/tasks/assign-fixed-issues/index.js
+++ b/packages/project-management-automation/lib/tasks/assign-fixed-issues/index.js
@@ -4,7 +4,7 @@
 const debug = require( '../../debug' );
 
 /** @typedef {ReturnType<import('@actions/github').getOctokit>} GitHub */
-/** @typedef {import('@octokit/webhooks').WebhookPayloadPullRequest} WebhookPayloadPullRequest */
+/** @typedef {import('@octokit/webhooks-types').EventPayloadMap['pull_request']} WebhookPayloadPullRequest */
 
 /**
  * Assigns any issues 'fixed' by a newly opened PR to the author of that PR.
@@ -17,30 +17,33 @@ async function assignFixedIssues( payload, octokit ) {
 		/(?:close|closes|closed|fix|fixes|fixed|resolve|resolves|resolved):? +(?:\#?|https?:\/\/github\.com\/WordPress\/gutenberg\/issues\/)(\d+)/gi;
 
 	let match;
-	while ( ( match = regex.exec( payload.pull_request.body ) ) ) {
-		const [ , issue ] = match;
-
-		debug(
-			`assign-fixed-issues: Assigning issue #${ issue } to @${ payload.pull_request.user.login }`
-		);
-
-		await octokit.rest.issues.addAssignees( {
-			owner: payload.repository.owner.login,
-			repo: payload.repository.name,
-			issue_number: +issue,
-			assignees: [ payload.pull_request.user.login ],
-		} );
-
-		debug(
-			`assign-fixed-issues: Applying '[Status] In Progress' label to issue #${ issue }`
-		);
-
-		await octokit.rest.issues.addLabels( {
-			owner: payload.repository.owner.login,
-			repo: payload.repository.name,
-			issue_number: +issue,
-			labels: [ '[Status] In Progress' ],
-		} );
+
+	if ( payload.pull_request.body ) {
+		while ( ( match = regex.exec( payload.pull_request.body ) ) ) {
+			const [ , issue ] = match;
+
+			debug(
+				`assign-fixed-issues: Assigning issue #${ issue } to @${ payload.pull_request.user.login }`
+			);
+
+			await octokit.rest.issues.addAssignees( {
+				owner: payload.repository.owner.login,
+				repo: payload.repository.name,
+				issue_number: +issue,
+				assignees: [ payload.pull_request.user.login ],
+			} );
+
+			debug(
+				`assign-fixed-issues: Applying '[Status] In Progress' label to issue #${ issue }`
+			);
+
+			await octokit.rest.issues.addLabels( {
+				owner: payload.repository.owner.login,
+				repo: payload.repository.name,
+				issue_number: +issue,
+				labels: [ '[Status] In Progress' ],
+			} );
+		}
 	}
 }
 
diff --git a/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js b/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
index 3a48cd9a3917d3..832878bca69f4a 100644
--- a/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
+++ b/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
@@ -6,7 +6,7 @@ const getAssociatedPullRequest = require( '../../get-associated-pull-request' );
 const hasWordPressProfile = require( '../../has-wordpress-profile' );
 
 /** @typedef {ReturnType<import('@actions/github').getOctokit>} GitHub */
-/** @typedef {import('@octokit/webhooks').WebhookPayloadPush} WebhookPayloadPush */
+/** @typedef {import('@octokit/webhooks-types').EventPayloadMap['push']} WebhookPayloadPush */
 /** @typedef {import('../../get-associated-pull-request').WebhookPayloadPushCommit} WebhookPayloadPushCommit */
 
 /**
diff --git a/packages/project-management-automation/lib/tasks/first-time-contributor-label/index.js b/packages/project-management-automation/lib/tasks/first-time-contributor-label/index.js
index 396a125dccee59..56a75ad3845f78 100644
--- a/packages/project-management-automation/lib/tasks/first-time-contributor-label/index.js
+++ b/packages/project-management-automation/lib/tasks/first-time-contributor-label/index.js
@@ -4,7 +4,7 @@
 const debug = require( '../../debug' );
 
 /** @typedef {ReturnType<import('@actions/github').getOctokit>} GitHub */
-/** @typedef {import('@octokit/webhooks').WebhookPayloadPullRequest} WebhookPayloadPullRequest */
+/** @typedef {import('@octokit/webhooks-types').EventPayloadMap['pull_request']} WebhookPayloadPullRequest */
 
 /**
  * Assigns the first-time contributor label to PRs.
@@ -65,8 +65,7 @@ async function firstTimeContributorLabel( payload, octokit ) {
 		body:
 			':wave: Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @' +
 			author +
-			"! In case you missed it, we'd love to have you join us in our [Slack community](https://make.wordpress.org/chat/), " +
-			'where we hold [regularly weekly meetings](https://make.wordpress.org/core/tag/core-editor-summary/) open to anyone to coordinate with each other.\n\n' +
+			"! In case you missed it, we'd love to have you join us in our [Slack community](https://make.wordpress.org/chat/).\n\n" +
 			'If you want to learn more about WordPress development in general, check out the [Core Handbook](https://make.wordpress.org/core/handbook/) full of helpful information.',
 	} );
 }
diff --git a/packages/project-management-automation/lib/tasks/first-time-contributor-label/test/index.js b/packages/project-management-automation/lib/tasks/first-time-contributor-label/test/index.js
index 0450cb1f59b9f5..0d0aa374a95a0d 100644
--- a/packages/project-management-automation/lib/tasks/first-time-contributor-label/test/index.js
+++ b/packages/project-management-automation/lib/tasks/first-time-contributor-label/test/index.js
@@ -95,8 +95,7 @@ describe( 'firstTimeContributorLabel', () => {
 
 		const expectedComment =
 			':wave: Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @ghost' +
-			"! In case you missed it, we'd love to have you join us in our [Slack community](https://make.wordpress.org/chat/)," +
-			' where we hold [regularly weekly meetings](https://make.wordpress.org/core/tag/core-editor-summary/) open to anyone to coordinate with each other.\n\n' +
+			"! In case you missed it, we'd love to have you join us in our [Slack community](https://make.wordpress.org/chat/).\n\n" +
 			'If you want to learn more about WordPress development in general, check out the [Core Handbook](https://make.wordpress.org/core/handbook/) full of helpful information.';
 
 		await firstTimeContributorLabel( payload, octokit );
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 5c47d6e588ffb0..95c475c5689c24 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "1.21.0",
+	"version": "2.13.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,14 +19,18 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"main": "lib/index.js",
 	"types": "build-types",
 	"dependencies": {
 		"@actions/core": "1.9.1",
 		"@actions/github": "^5.0.0",
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"@octokit/request-error": "^2.1.0",
-		"@octokit/webhooks": "^7.1.0"
+		"@octokit/webhooks": "^9.26.3"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/project-management-automation/tsconfig.json b/packages/project-management-automation/tsconfig.json
index eb9183cbf3fd0e..0636ff7d0081dd 100644
--- a/packages/project-management-automation/tsconfig.json
+++ b/packages/project-management-automation/tsconfig.json
@@ -1,12 +1,10 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "lib",
 		"declarationDir": "build-types",
-		"types": [ "node" ],
-
-		// This is required due to a type error coming from missing types in @actions/github
-		"noImplicitAny": false
+		"types": [ "node" ]
 	},
 	"include": [ "lib/**/*" ]
 }
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index 97f3ffd7054db1..ed872fe9cd145c 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.56.0 (2024-05-16)
+
+## 3.55.0 (2024-05-02)
+
+## 3.54.0 (2024-04-19)
+
+## 3.53.0 (2024-04-03)
+
+## 3.52.0 (2024-03-21)
+
+## 3.51.0 (2024-03-06)
+
+## 3.50.0 (2024-02-21)
+
+## 3.49.0 (2024-02-09)
+
+## 3.48.0 (2024-01-24)
+
+## 3.47.0 (2024-01-10)
+
+## 3.46.0 (2023-12-13)
+
+## 3.45.0 (2023-11-29)
+
+## 3.44.0 (2023-11-16)
+
+## 3.43.0 (2023-11-02)
+
+## 3.42.0 (2023-10-18)
+
+## 3.41.0 (2023-10-05)
+
+## 3.40.0 (2023-09-20)
+
+## 3.39.0 (2023-08-31)
+
+## 3.38.0 (2023-08-16)
+
+## 3.37.0 (2023-08-10)
+
+## 3.36.0 (2023-07-20)
+
+## 3.35.0 (2023-07-05)
+
+## 3.34.0 (2023-06-23)
+
+## 3.33.0 (2023-06-07)
+
+## 3.32.0 (2023-05-24)
+
+## 3.31.0 (2023-05-10)
+
+## 3.30.0 (2023-04-26)
+
+## 3.29.0 (2023-04-12)
+
+## 3.28.0 (2023-03-29)
+
+## 3.27.0 (2023-03-15)
+
+## 3.26.0 (2023-03-01)
+
+## 3.25.0 (2023-02-15)
+
+## 3.24.0 (2023-02-01)
+
+## 3.23.0 (2023-01-11)
+
+## 3.22.0 (2023-01-02)
+
+## 3.21.0 (2022-12-14)
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -44,7 +148,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
diff --git a/packages/react-i18n/README.md b/packages/react-i18n/README.md
index eac2e3798e2d1f..b5de8516678308 100644
--- a/packages/react-i18n/README.md
+++ b/packages/react-i18n/README.md
@@ -23,7 +23,7 @@ The `I18nProvider` should be mounted above any localized components:
 _Usage_
 
 ```js
-import { createI18n } from '@wordpress/react-i18n';
+import { createI18n } from '@wordpress/i18n';
 import { I18nProvider } from '@wordpress/react-i18n';
 const i18n = createI18n();
 
@@ -48,9 +48,7 @@ _Returns_
 
 ### useI18n
 
-React hook providing access to i18n functions. It exposes the `__`, `_x`, `_n`, `_nx`,
-`isRTL` and `hasTranslation` functions from [`@wordpress/i18n`](../i18n).
-Refer to their documentation there.
+React hook providing access to i18n functions. It exposes the `__`, `_x`, `_n`, `_nx`, `isRTL` and `hasTranslation` functions from [`@wordpress/i18n`](../i18n). Refer to their documentation there.
 
 _Usage_
 
@@ -65,8 +63,7 @@ function MyComponent() {
 
 ### withI18n
 
-React higher-order component that passes the i18n translate functions (the same set
-as exposed by the `useI18n` hook) to the wrapped component as props.
+React higher-order component that passes the i18n translate functions (the same set as exposed by the `useI18n` hook) to the wrapped component as props.
 
 _Usage_
 
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index a120cf98e5667b..439596ec2b5d50 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "3.20.0",
+	"version": "4.13.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,17 +19,19 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
+		"@babel/runtime": "7.25.7",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
 		"utility-types": "^3.10.0"
 	},
 	"publishConfig": {
diff --git a/packages/react-i18n/src/index.tsx b/packages/react-i18n/src/index.tsx
index 9988aee3b1bb46..4d68e50c66c2c0 100644
--- a/packages/react-i18n/src/index.tsx
+++ b/packages/react-i18n/src/index.tsx
@@ -32,7 +32,7 @@ interface I18nContextProps {
 /**
  * Utility to make a new context value
  *
- * @param  i18n
+ * @param i18n
  */
 function makeContextValue( i18n: I18n ): I18nContextProps {
 	return {
@@ -54,7 +54,7 @@ type I18nProviderProps = PropsWithChildren< { i18n: I18n } >;
  *
  * @example
  * ```js
- * import { createI18n } from '@wordpress/react-i18n';
+ * import { createI18n } from '@wordpress/i18n';
  * import { I18nProvider } from '@wordpress/react-i18n';
  * const i18n = createI18n();
  *
@@ -69,7 +69,7 @@ type I18nProviderProps = PropsWithChildren< { i18n: I18n } >;
  * You can also instantiate the provider without the `i18n` prop. In that case it will use the
  * default `I18n` instance exported from `@wordpress/i18n`.
  *
- * @param  props i18n provider props.
+ * @param props i18n provider props.
  * @return Children wrapped in the I18nProvider.
  */
 export function I18nProvider( props: I18nProviderProps ): JSX.Element {
@@ -125,7 +125,7 @@ type PropsAndI18n< P > = Pick<
  * export default withI18n( MyComponent );
  * ```
  *
- * @param  InnerComponent React component to be wrapped and receive the i18n functions like `__`
+ * @param InnerComponent React component to be wrapped and receive the i18n functions like `__`
  * @return The wrapped component
  */
 export function withI18n< P extends I18nContextProps >(
diff --git a/packages/react-i18n/tsconfig.json b/packages/react-i18n/tsconfig.json
index 2a29fe33676230..e8e7f164f89a34 100644
--- a/packages/react-i18n/tsconfig.json
+++ b/packages/react-i18n/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/react-native-aztec/.npmrc b/packages/react-native-aztec/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/react-native-aztec/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/react-native-aztec/CHANGELOG.md b/packages/react-native-aztec/CHANGELOG.md
index 56461651514704..1e1f854656e282 100644
--- a/packages/react-native-aztec/CHANGELOG.md
+++ b/packages/react-native-aztec/CHANGELOG.md
@@ -10,9 +10,11 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+
 -   [*] Bump Aztec-Android version to v1.5.1 [#36861]
 -   [*] Add text input state to Aztec view [#40480]
 
 ## 1.50.0
+
 -   [*] Block split/merge fix for a (never shipped) regression (Android only) [#29683]
--   [***] Bump minimum deployment target to iOS 13.0 [#27577]
\ No newline at end of file
+-   [***] Bump minimum deployment target to iOS 13.0 [#27577]
diff --git a/packages/react-native-aztec/RNTAztecView.podspec b/packages/react-native-aztec/RNTAztecView.podspec
index bd6633ecf34c90..ac3ad06b0d865b 100644
--- a/packages/react-native-aztec/RNTAztecView.podspec
+++ b/packages/react-native-aztec/RNTAztecView.podspec
@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'json'
 
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
@@ -9,15 +11,16 @@ Pod::Spec.new do |s|
   s.license          = package['license']
   s.homepage         = package['homepage']
   s.authors          = package['author']
-  s.source            = { :git => 'https://github.com/WordPress/gutenberg.git' }
+  s.source           = { git: 'https://github.com/WordPress/gutenberg.git' }
   s.source_files     = 'ios/RNTAztecView/*.{h,m,swift}'
   s.public_header_files = 'ios/RNTAztecView/*.h'
   s.requires_arc     = true
-  s.platforms        = { :ios => "13.0" }
+  s.platforms        = { ios: '13.0' }
   s.swift_version    = '5.0'
-  s.xcconfig         = {'OTHER_LDFLAGS' => '-lxml2',
-                        'HEADER_SEARCH_PATHS' => '/usr/include/libxml2'}
-  s.dependency         'React-Core'
-  s.dependency         'WordPress-Aztec-iOS', '~> 1.19.8'
-
+  s.xcconfig         = { 'OTHER_LDFLAGS' => '-lxml2',
+                         'HEADER_SEARCH_PATHS' => '/usr/include/libxml2' }
+  s.dependency 'React-Core'
+  # Intentionally locked because of how it's integrated.
+  # See https://github.com/WordPress/gutenberg/pull/54453#discussion_r1325582749
+  s.dependency 'WordPress-Aztec-iOS', '1.19.11'
 end
diff --git a/packages/react-native-aztec/android/.java-version b/packages/react-native-aztec/android/.java-version
new file mode 100644
index 00000000000000..03b6389f32ad57
--- /dev/null
+++ b/packages/react-native-aztec/android/.java-version
@@ -0,0 +1 @@
+17.0
diff --git a/packages/react-native-aztec/android/build.gradle b/packages/react-native-aztec/android/build.gradle
index c99fd0e4ca417f..45312e89f0b9d9 100644
--- a/packages/react-native-aztec/android/build.gradle
+++ b/packages/react-native-aztec/android/build.gradle
@@ -1,5 +1,6 @@
 buildscript {
     ext {
+        // node modules
         supportLibVersion = '29.0.2'
         tagSoupVersion = '1.2.1'
         glideVersion = '3.7.0'
@@ -7,9 +8,21 @@ buildscript {
         robolectricVersion = '3.5.1'
         jUnitVersion = '4.12'
         jSoupVersion = '1.10.3'
-        wordpressUtilsVersion = '2.3.0'
         espressoVersion = '3.0.1'
-        aztecVersion = 'v1.6.2'
+
+        // libs
+        aztecVersion = 'v2.1.2'
+        wordpressUtilsVersion = '3.3.0'
+
+        // main
+        androidxAppcompatVersion = '1.2.0'
+        androidxCardviewVersion = '1.0.0'
+        androidxGridlayoutVersion = '1.0.0'
+        androidxLegacyVersion = '1.0.0'
+        androidxRecyclerviewVersion = '1.1.0'
+
+        // test
+        junitAztecVersion = '4.13'
     }
 }
 
@@ -23,7 +36,7 @@ plugins {
 // import the `readReactNativeVersion()` function
 apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle'
 
-group = 'org.wordpress-mobile.gutenberg-mobile'
+group = 'org.wordpress.gutenberg-mobile'
 
 // The sample build uses multiple directories to
 // keep boilerplate and common code separate from
@@ -34,16 +47,18 @@ List<String> dirs = [
         'template'] // boilerplate code that is generated by the sample template process
 
 android {
-    compileSdkVersion 31
+    namespace "org.wordpress.mobile.ReactNativeAztec"
+
+    compileSdkVersion 34
 
     defaultConfig {
-        minSdkVersion 21
-        targetSdkVersion 31
+        minSdkVersion 24
+        targetSdkVersion 34
     }
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
 
     sourceSets {
@@ -59,7 +74,7 @@ android {
         androidTest.java.srcDirs = ['tests/src']
     }
 
-    lintOptions {
+    lint {
         disable 'GradleCompatible'
         abortOnError false
     }
@@ -73,7 +88,6 @@ repositories {
             includeGroup "org.wordpress.aztec"
         }
     }
-    maven { url "https://a8c-libs.s3.amazonaws.com/android/hermes-mirror" }
     maven { url "https://a8c-libs.s3.amazonaws.com/android/react-native-mirror" }
     google()
     mavenCentral()
@@ -86,16 +100,17 @@ dependencies {
     api "org.wordpress.aztec:glide-loader:$aztecVersion"
     implementation "org.wordpress:utils:$wordpressUtilsVersion"
 
-    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
-    implementation 'androidx.gridlayout:gridlayout:1.0.0'
-    implementation 'androidx.cardview:cardview:1.0.0'
-    implementation 'androidx.appcompat:appcompat:1.2.0'
-    implementation 'androidx.recyclerview:recyclerview:1.1.0'
-    testImplementation 'junit:junit:4.13'
+    implementation "androidx.legacy:legacy-support-v4:$androidxLegacyVersion"
+    implementation "androidx.gridlayout:gridlayout:$androidxGridlayoutVersion"
+    implementation "androidx.cardview:cardview:$androidxCardviewVersion"
+    implementation "androidx.appcompat:appcompat:$androidxAppcompatVersion"
+    implementation "androidx.recyclerview:recyclerview:$androidxRecyclerviewVersion"
+
+    testImplementation "junit:junit:$junitAztecVersion"
 
     def rnVersion = readReactNativeVersion('../../../package.json', 'devDependencies')
     println "react-native version for react-native-aztec: $rnVersion"
-    implementation "com.facebook.react:react-native:$rnVersion"
+    implementation "com.facebook.react:react-android:$rnVersion"
 }
 
 project.afterEvaluate {
@@ -104,9 +119,8 @@ project.afterEvaluate {
             ReactNativeAztecPublication(MavenPublication) {
                 artifact bundleReleaseAar
 
-                groupId 'org.wordpress-mobile.gutenberg-mobile'
+                groupId 'org.wordpress.gutenberg-mobile'
                 artifactId 'react-native-aztec'
-                artifact tasks.named("androidSourcesJar")
                 // version is set by 'publish-to-s3' plugin
 
                 addDependenciesToPom(pom)
diff --git a/packages/react-native-aztec/android/gradle.properties b/packages/react-native-aztec/android/gradle.properties
index ce566007126c27..81529680627fbb 100644
--- a/packages/react-native-aztec/android/gradle.properties
+++ b/packages/react-native-aztec/android/gradle.properties
@@ -1,5 +1,12 @@
+# Project-wide Gradle settings.
+
 org.gradle.jvmargs=-Xmx2g -XX:+HeapDumpOnOutOfMemoryError
+
+# React Native Aztec properties.
+
 android.useAndroidX=true
 android.enableJetifier=false
-shouldPublishBinary=false
 
+# React Native Aztec publishing settings.
+
+shouldPublishBinary=false
diff --git a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar
index 41d9927a4d4fb3..2c3521197d7c45 100644
Binary files a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties
index 92f06b50fd65b4..efe2ff3449216a 100644
--- a/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-aztec/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,8 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
+distributionSha256Sum=258e722ec21e955201e31447b0aed14201765a3bfbae296a46cf60b70e66db70
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/packages/react-native-aztec/android/gradlew b/packages/react-native-aztec/android/gradlew
index 1b6c787337ffb7..f5feea6d6b116b 100755
--- a/packages/react-native-aztec/android/gradlew
+++ b/packages/react-native-aztec/android/gradlew
@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,13 +82,12 @@ do
     esac
 done
 
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -133,22 +134,29 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -193,11 +201,15 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
@@ -205,6 +217,12 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
diff --git a/packages/react-native-aztec/android/gradlew.bat b/packages/react-native-aztec/android/gradlew.bat
index ac1b06f93825db..9b42019c7915b9 100644
--- a/packages/react-native-aztec/android/gradlew.bat
+++ b/packages/react-native-aztec/android/gradlew.bat
@@ -13,8 +13,10 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +27,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,13 +43,13 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -56,11 +59,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
 if exist "%JAVA_EXE%" goto execute
 
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -75,13 +78,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
diff --git a/packages/react-native-aztec/android/settings.gradle b/packages/react-native-aztec/android/settings.gradle
index 8b0c3d17fa200d..5c91464a042457 100644
--- a/packages/react-native-aztec/android/settings.gradle
+++ b/packages/react-native-aztec/android/settings.gradle
@@ -1,10 +1,12 @@
 pluginManagement {
-    gradle.ext.kotlinVersion = '1.5.32'
+    gradle.ext.kotlinVersion = '1.8.0'
+    gradle.ext.agpVersion = '8.5.1'
+    gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
-        id "com.android.library" version "7.2.1"
+        id "com.android.library" version gradle.ext.agpVersion
         id "org.jetbrains.kotlin.android" version gradle.ext.kotlinVersion
-        id "com.automattic.android.publish-to-s3" version "0.7.0"
+        id "com.automattic.android.publish-to-s3" version gradle.ext.automatticPublishToS3Version
     }
     repositories {
         maven {
diff --git a/packages/react-native-aztec/android/src/main/AndroidManifest.xml b/packages/react-native-aztec/android/src/main/AndroidManifest.xml
deleted file mode 100644
index d937b1806d40fe..00000000000000
--- a/packages/react-native-aztec/android/src/main/AndroidManifest.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
- Copyright 2014 The Android Open Source Project
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="org.wordpress.mobile.ReactNativeAztec">
-</manifest>
diff --git a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java
index 1e3e90c3a48442..ed2a0284c17822 100644
--- a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java
+++ b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java
@@ -51,6 +51,7 @@
 import org.wordpress.aztec.glideloader.GlideImageLoader;
 import org.wordpress.aztec.glideloader.GlideVideoThumbnailLoader;
 import org.wordpress.aztec.plugins.CssUnderlinePlugin;
+import org.wordpress.aztec.plugins.MarkPlugin;
 import org.wordpress.aztec.plugins.shortcodes.AudioShortcodePlugin;
 import org.wordpress.aztec.plugins.shortcodes.CaptionShortcodePlugin;
 import org.wordpress.aztec.plugins.shortcodes.VideoShortcodePlugin;
@@ -124,6 +125,7 @@ protected ReactAztecText createViewInstance(ThemedReactContext reactContext) {
                         Color.parseColor("#016087"), true)
         ));
         aztecText.addPlugin(new CssUnderlinePlugin());
+        aztecText.addPlugin(new MarkPlugin());
         return aztecText;
     }
 
@@ -651,6 +653,21 @@ public void run() {
         } else if (commandType.equals("blur")) {
             parent.clearFocusFromJS();
             return;
+        } else if (commandType.equals("onMarkFormatting")) {
+            String colorString;
+            Boolean resetColor;
+
+            if (args != null && args.getString(0) != null) {
+                colorString = args.getString(0);
+            } else {
+                colorString = "";
+            }
+
+            parent.onMarkFormatting(colorString);
+            return;
+        } else if (commandType.equals("onRemoveMarkFormatting")) {
+            // This is handled by setActiveFormats
+            return;
         }
         super.receiveCommand(parent, commandType, args);
     }
diff --git a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java
index 71df8e0c2888a2..e55f27d63b529f 100644
--- a/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java
+++ b/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java
@@ -1,5 +1,7 @@
 package org.wordpress.mobile.ReactNativeAztec;
 
+import static android.content.ClipData.Item;
+
 import android.content.ClipData;
 import android.content.ClipboardManager;
 import android.content.Context;
@@ -10,18 +12,19 @@
 import android.graphics.drawable.Drawable;
 import android.os.Handler;
 import android.os.Looper;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
 import android.text.Editable;
 import android.text.InputType;
 import android.text.Spannable;
 import android.text.TextUtils;
 import android.text.TextWatcher;
 import android.view.View;
+import android.view.ViewTreeObserver;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.TextView;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -41,12 +44,10 @@
 
 import java.lang.reflect.Field;
 import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.HashSet;
 import java.util.LinkedList;
 import java.util.Set;
-import java.util.HashSet;
-import java.util.HashMap;
-
-import static android.content.ClipData.*;
 
 public class ReactAztecText extends AztecText {
 
@@ -64,6 +65,7 @@ public class ReactAztecText extends AztecText {
     private @Nullable TextWatcherDelegator mTextWatcherDelegator;
     private @Nullable ContentSizeWatcher mContentSizeWatcher;
     private @Nullable ScrollWatcher mScrollWatcher;
+    private @Nullable Runnable mKeyboardRunnable;
 
     // FIXME: Used in `incrementAndGetEventCounter` but never read. I guess we can get rid of it, but before this
     // check when it's used in EditText in RN. (maybe tests?)
@@ -236,6 +238,21 @@ void clearFocusFromJS() {
         clearFocus();
     }
 
+    public void onMarkFormatting(String colorString) {
+        inlineFormatter.setMarkStyleColor(colorString);
+
+        Set<ITextFormat> selectedStylesSet = new HashSet<>(getSelectedStyles());
+        Set<ITextFormat> newFormatsSet = new HashSet<>();
+        newFormatsSet.add(AztecTextFormat.FORMAT_MARK);
+
+        selectedStylesSet.removeAll(typingFormatsMap.keySet());
+        selectedStylesSet.addAll(newFormatsSet);
+
+        ArrayList<ITextFormat> newStylesList = new ArrayList<>(selectedStylesSet);
+        setSelectedStyles(newStylesList);
+        updateToolbarButtons(newStylesList);
+    }
+
     @Override
     public void clearFocus() {
         setFocusableInTouchMode(false);
@@ -264,18 +281,46 @@ public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
     }
 
     private void showSoftKeyboard() {
-        new Handler(Looper.getMainLooper()).post(new Runnable() {
+        // If the text input is already focused we can show the keyboard.
+        if(hasWindowFocus()) {
+            showSoftKeyboardNow();
+        }
+        // Otherwise, we'll wait until it gets focused.
+        else {
+            getViewTreeObserver().addOnWindowFocusChangeListener(new ViewTreeObserver.OnWindowFocusChangeListener() {
+                @Override
+                public void onWindowFocusChanged(boolean hasFocus) {
+                    if (hasFocus) {
+                        showSoftKeyboardNow();
+                        getViewTreeObserver().removeOnWindowFocusChangeListener(this);
+                    }
+                }
+            });
+        }
+    }
+
+    private void showSoftKeyboardNow() {
+        // Cancel any previously scheduled Runnable
+        if (mKeyboardRunnable != null) {
+            removeCallbacks(mKeyboardRunnable);
+        }
+
+        mKeyboardRunnable = new Runnable() {
             @Override
             public void run() {
                 if (mInputMethodManager != null) {
-                    mInputMethodManager.showSoftInput(ReactAztecText.this, 0);
+                    mInputMethodManager.showSoftInput(ReactAztecText.this, InputMethodManager.SHOW_IMPLICIT);
                 }
             }
-        });
+        };
+
+        post(mKeyboardRunnable);
     }
 
     private void hideSoftKeyboard() {
-        mInputMethodManager.hideSoftInputFromWindow(getWindowToken(), 0);
+        if (mInputMethodManager != null) {
+            mInputMethodManager.hideSoftInputFromWindow(getWindowToken(), 0);
+        }
     }
 
     public void setScrollWatcher(ScrollWatcher scrollWatcher) {
@@ -550,6 +595,7 @@ public void setActiveFormats(Iterable<String> newFormats) {
                     break;
                 case "underline":
                     newFormatsSet.add(AztecTextFormat.FORMAT_UNDERLINE);
+                    break;
                 case "mark":
                     newFormatsSet.add(AztecTextFormat.FORMAT_MARK);
                     break;
diff --git a/packages/react-native-aztec/ios/Cartfile b/packages/react-native-aztec/ios/Cartfile
index 73ff95b59ac754..7429fcff917025 100644
--- a/packages/react-native-aztec/ios/Cartfile
+++ b/packages/react-native-aztec/ios/Cartfile
@@ -1 +1 @@
-github "wordpress-mobile/AztecEditor-iOS" "1.15.0"
+github "wordpress-mobile/AztecEditor-iOS" "1.19.9"
diff --git a/packages/react-native-aztec/ios/Cartfile.resolved b/packages/react-native-aztec/ios/Cartfile.resolved
index 73ff95b59ac754..7429fcff917025 100644
--- a/packages/react-native-aztec/ios/Cartfile.resolved
+++ b/packages/react-native-aztec/ios/Cartfile.resolved
@@ -1 +1 @@
-github "wordpress-mobile/AztecEditor-iOS" "1.15.0"
+github "wordpress-mobile/AztecEditor-iOS" "1.19.9"
diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
index cc87ef29e9704b..03362c3a371fb2 100644
--- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
+++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
@@ -95,13 +95,7 @@ class RCTAztecView: Aztec.TextView {
         let placeholderWidthInset = 2 * leftTextInset
         return placeholderLabel.widthAnchor.constraint(equalTo: widthAnchor, constant: -placeholderWidthInset)
     }()
-
-    /// If a dictation start with an empty UITextView,
-    /// the dictation engine refreshes the TextView with an empty string when the dictation finishes.
-    /// This helps to avoid propagating that unwanted empty string to RN. (Solving #606)
-    /// on `textViewDidChange` and `textViewDidChangeSelection`
-    private var isInsertingDictationResult = false
-
+    
     // MARK: - Font
 
     /// Flag to enable using the defaultFont in Aztec for specific blocks
@@ -234,7 +228,10 @@ class RCTAztecView: Aztec.TextView {
         previousContentSize = newSize
 
         let body = packForRN(newSize, withName: "contentSize")
-        onContentSizeChange(body)
+        let caretData = packCaretDataForRN()
+        var result = body
+        result.merge(caretData) { (_, new) in new }
+        onContentSizeChange(result)
     }
 
     // MARK: - Paste handling
@@ -248,12 +245,8 @@ class RCTAztecView: Aztec.TextView {
     }
 
     private func readHTML(from pasteboard: UIPasteboard) -> String? {
-
         if let data = pasteboard.data(forPasteboardType: kUTTypeHTML as String), let html = String(data: data, encoding: .utf8) {
-            // Make sure we are not getting a full HTML DOC. We only want inner content
-            if !html.hasPrefix("<!DOCTYPE html") {
-                return html
-            }
+            return html
         }
 
         if let flatRTFDString = read(from: pasteboard, uti: kUTTypeFlatRTFD, documentType: DocumentType.rtfd) {
@@ -349,20 +342,7 @@ class RCTAztecView: Aztec.TextView {
 
         super.deleteBackward()
         updatePlaceholderVisibility()
-    }
-
-    // MARK: - Dictation
-
-    override func dictationRecordingDidEnd() {
-        isInsertingDictationResult = true
-    }
-
-    public override func insertDictationResult(_ dictationResult: [UIDictationPhrase]) {
-        let objectPlaceholder = "\u{FFFC}"
-        let dictationText = dictationResult.reduce("") { $0 + $1.text }
-        isInsertingDictationResult = false
-        self.text = self.text?.replacingOccurrences(of: objectPlaceholder, with: dictationText)
-    }
+    }    
 
     // MARK: - Custom Edit Intercepts
 
@@ -479,6 +459,7 @@ class RCTAztecView: Aztec.TextView {
             if !(caretEndRect.isInfinite || caretEndRect.isNull) {
                 result["selectionEndCaretX"] = caretEndRect.origin.x
                 result["selectionEndCaretY"] = caretEndRect.origin.y
+                result["selectionEndCaretHeight"] = caretEndRect.size.height
             }
         }
 
@@ -648,13 +629,9 @@ class RCTAztecView: Aztec.TextView {
     ///
     private func applyFontConstraints(to baseFont: UIFont) -> UIFont {
         let oldDescriptor = baseFont.fontDescriptor
-        let newFontSize: CGFloat
+        let fontMetrics = UIFontMetrics(forTextStyle: .body)
 
-        if let fontSize = fontSize {
-            newFontSize = fontSize
-        } else {
-            newFontSize = baseFont.pointSize
-        }
+        let newFontSize = fontMetrics.scaledValue(for: fontSize ?? baseFont.pointSize)
 
         var newTraits = oldDescriptor.symbolicTraits
 
@@ -687,7 +664,13 @@ class RCTAztecView: Aztec.TextView {
     ///
     private func refreshFont() {
         let newFont = applyFontConstraints(to: defaultFont)
+        font = newFont
+        placeholderLabel.font = newFont
         defaultFont = newFont
+
+        if textStorage.length > 0 {
+            typingAttributes[NSAttributedString.Key.font] = newFont
+        }
     }
 
     /// This method refreshes the font for the palceholder field and typing attributes.
@@ -730,7 +713,13 @@ class RCTAztecView: Aztec.TextView {
         case "bold": toggleBold(range: emptyRange)
         case "italic": toggleItalic(range: emptyRange)
         case "strikethrough": toggleStrikethrough(range: emptyRange)
-        case "mark": toggleMark(range: emptyRange)
+        case "mark":
+            // When there's a selection the formatting is applied from the RichText library.
+            // If not, it will toggle the active mark format if needed.
+            if selectedRange.length > 0 {
+                return
+            }
+            toggleMark(range: emptyRange, color: nil, resetColor: true)
         default: print("Format not recognized")
         }
     }
@@ -767,7 +756,7 @@ class RCTAztecView: Aztec.TextView {
 extension RCTAztecView: UITextViewDelegate {
 
     func textViewDidChangeSelection(_ textView: UITextView) {
-        guard isFirstResponder, isInsertingDictationResult == false else {
+        guard isFirstResponder else {
             return
         }
 
@@ -780,10 +769,6 @@ extension RCTAztecView: UITextViewDelegate {
     }
 
     func textViewDidChange(_ textView: UITextView) {
-        guard isInsertingDictationResult == false else {
-            return
-        }
-        
         propagateContentChanges()
         updatePlaceholderVisibility()
         //Necessary to send height information to JS after pasting text.
@@ -792,7 +777,8 @@ extension RCTAztecView: UITextViewDelegate {
 
     override func becomeFirstResponder() -> Bool {
         if !isFirstResponder && canBecomeFirstResponder {
-            onFocus?([:])
+            let caretData = packCaretDataForRN()
+            onFocus?(caretData)
         }
         return super.becomeFirstResponder()
     }
diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m
index e8038ab17a7044..b339357ce40740 100644
--- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m
+++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m
@@ -37,6 +37,7 @@ @interface RCT_EXTERN_MODULE(RCTAztecViewManager, NSObject)
 
 RCT_EXTERN_METHOD(focus:(nonnull NSNumber *)viewTag)
 RCT_EXTERN_METHOD(blur:(nonnull NSNumber *)viewTag)
-
+RCT_EXTERN_METHOD(onMarkFormatting:(nonnull NSNumber *)viewTag : NSString)
+RCT_EXTERN_METHOD(onRemoveMarkFormatting:(nonnull NSNumber *)viewTag)
 
 @end
diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.swift
index 184d465e5d25cd..5422d2feb864a0 100644
--- a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.swift
+++ b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.swift
@@ -34,6 +34,17 @@ public class RCTAztecViewManager: RCTViewManager {
         return view
     }
 
+    /// This method is similar to `executeBlock` but prepends the block to execute it before other pending blocks.
+    func executeBlockBeforeOthers(viewTag: NSNumber, block: @escaping (RCTAztecView) -> Void) {
+        self.bridge.uiManager.prependUIBlock { (uiManager, viewRegistry) in
+            let view = viewRegistry?[viewTag]
+            guard let aztecView = view as? RCTAztecView else {
+                return
+            }
+            block(aztecView)
+        }
+    }
+    
     func executeBlock(viewTag: NSNumber, block: @escaping (RCTAztecView) -> Void) {
         self.bridge.uiManager.addUIBlock { (uiManager, viewRegistry) in
             let view = viewRegistry?[viewTag]
@@ -69,7 +80,7 @@ public class RCTAztecViewManager: RCTViewManager {
     
     @objc
     func focus(_ viewTag: NSNumber) -> Void {
-        self.executeBlock(viewTag: viewTag) { (aztecView) in
+        self.executeBlockBeforeOthers(viewTag: viewTag) { (aztecView) in
             aztecView.reactFocus()
         }
     }
@@ -80,5 +91,21 @@ public class RCTAztecViewManager: RCTViewManager {
             aztecView.reactBlur()
         }
     }
+
+    @objc
+    func onMarkFormatting(_ viewTag: NSNumber, _ color: String) {
+        self.executeBlock(viewTag: viewTag) { (aztecView) in
+            let range = NSRange(location: aztecView.selectedRange.location, length: 0)
+            aztecView.toggleMark(range: range, color: color, resetColor: false)
+        }
+    }
+
+    @objc
+    func onRemoveMarkFormatting(_ viewTag: NSNumber) {
+        self.executeBlock(viewTag: viewTag) { (aztecView) in
+            let range = NSRange(location: aztecView.selectedRange.location, length: 0)
+            aztecView.toggleMark(range: range, color: nil, resetColor: true)
+        }
+    }
 }
 
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index c8933b37817052..b0327b531395e5 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.0",
+	"version": "1.121.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
@@ -18,9 +18,13 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"dependencies": {
-		"@wordpress/element": "file:../element",
-		"@wordpress/keycodes": "file:../keycodes"
+		"@wordpress/element": "*",
+		"@wordpress/keycodes": "*"
 	},
 	"peerDependencies": {
 		"react": "*",
@@ -37,7 +41,7 @@
 		"clean-metro": "rm -rf $TMPDIR/metro-cache-*; rm -rf $TMPDIR/metro-bundler-cache-*;",
 		"clean-node": "rm -rf node_modules/;",
 		"clean-react": "rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/react-native-packager-cache-*;",
-		"clean-watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all;",
+		"clean-watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
 		"clean:install": "npm run clean && npm install"
 	}
 }
diff --git a/packages/react-native-aztec/src/AztecInputState.js b/packages/react-native-aztec/src/AztecInputState.js
index 973b8179ea5ec9..f76f8ed4f24501 100644
--- a/packages/react-native-aztec/src/AztecInputState.js
+++ b/packages/react-native-aztec/src/AztecInputState.js
@@ -1,13 +1,22 @@
 /**
  * External dependencies
  */
+import { Platform } from 'react-native';
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 
+/**
+ * WordPress dependencies
+ */
+import { debounce } from '@wordpress/compose';
+import { hideAndroidSoftKeyboard } from '@wordpress/react-native-bridge';
+
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
 const focusChangeListeners = [];
+const caretChangeListeners = [];
 
 let currentFocusedElement = null;
+let currentCaretData = null;
 
 /**
  * Adds a listener that will be called in the following cases:
@@ -47,6 +56,37 @@ const notifyListeners = ( { isFocused } ) => {
 	} );
 };
 
+/**
+ * Adds a listener that will be called when the caret's Y position
+ * changes for the focused Aztec view.
+ *
+ * @param {Function} listener
+ */
+export const addCaretChangeListener = ( listener ) => {
+	caretChangeListeners.push( listener );
+};
+
+/**
+ * Removes a listener from the caret change listeners list.
+ *
+ * @param {Function} listener
+ */
+export const removeCaretChangeListener = ( listener ) => {
+	const itemIndex = caretChangeListeners.indexOf( listener );
+	if ( itemIndex !== -1 ) {
+		caretChangeListeners.splice( itemIndex, 1 );
+	}
+};
+
+/**
+ * Notifies listeners about caret changes in focused Aztec view.
+ */
+const notifyCaretChangeListeners = () => {
+	caretChangeListeners.forEach( ( listener ) => {
+		listener( getCurrentCaretData() );
+	} );
+};
+
 /**
  * Determines if any Aztec view is focused.
  *
@@ -83,26 +123,77 @@ export const notifyInputChange = () => {
 	}
 };
 
+/**
+ * Sets the current focused element ref held within TextInputState.
+ *
+ * @param {RefObject} element Element to be set as the focused element.
+ */
+export const focusInput = ( element ) => {
+	TextInputState.focusInput( element );
+};
+
 /**
  * Focuses the specified element.
  *
  * @param {RefObject} element Element to be focused.
  */
 export const focus = ( element ) => {
+	// If other blur events happen at the same time that focus is triggered, the focus event
+	// will take precedence and cancels pending blur events.
+	blur.cancel();
+	// Similar to blur events, we also need to cancel potential keyboard dismiss.
+	blurOnUnmountDebounce.cancel();
+
 	TextInputState.focusTextInput( element );
 	notifyInputChange();
 };
 
 /**
  * Unfocuses the specified element.
+ * This function uses debounce to avoid conflicts with the focus event when both are
+ * triggered at the same time. Focus events will take precedence.
  *
  * @param {RefObject} element Element to be unfocused.
  */
-export const blur = ( element ) => {
+export const blur = debounce( ( element ) => {
 	TextInputState.blurTextInput( element );
+	setCurrentCaretData( null );
 	notifyInputChange();
+}, 0 );
+
+/**
+ * Unfocuses the specified element in case it's about to be unmounted.
+ *
+ * Note that we can't trigger the blur event, as it's likely that the Aztec view is no
+ * longer available when the event is executed and will produce an exception.
+ *
+ * @param {RefObject} element Element to be unfocused.
+ */
+export const blurOnUnmount = ( element ) => {
+	if ( getCurrentFocusedElement() === element ) {
+		// If a blur event was triggered before unmount, we need to cancel them to avoid
+		// exceptions.
+		blur.cancel();
+		blurOnUnmountDebounce();
+	}
 };
 
+// For updating the input state and dismissing the keyboard, we use debounce to avoid
+// conflicts with the focus event when both are triggered at the same time.
+const blurOnUnmountDebounce = debounce( () => {
+	// At this point, the text input will be destroyed but it's still focused. Hence, we
+	// have to explicitly notify listeners and update internal input state.
+	notifyListeners( { isFocused: false } );
+	currentFocusedElement = null;
+
+	// On iOS text inputs are automatically unfocused and keyboard dismissed when they
+	// are removed. However, this is not the case on Android, where text inputs are
+	// unfocused but the keyboard remains open.
+	if ( Platform.OS === 'android' ) {
+		hideAndroidSoftKeyboard();
+	}
+}, 0 );
+
 /**
  * Unfocuses the current focused element.
  */
@@ -111,3 +202,24 @@ export const blurCurrentFocusedElement = () => {
 		blur( getCurrentFocusedElement() );
 	}
 };
+
+/**
+ * Sets the current focused element caret's data.
+ *
+ * @param {Object} caret Caret's data.
+ */
+export const setCurrentCaretData = ( caret ) => {
+	if ( isFocused() && caret ) {
+		currentCaretData = caret;
+		notifyCaretChangeListeners();
+	}
+};
+
+/**
+ * Get the current focused element caret's data.
+ *
+ * @return {Object} Current caret's data.
+ */
+export const getCurrentCaretData = () => {
+	return currentCaretData;
+};
diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
index 456fde3ed8b694..7c02f349a85119 100644
--- a/packages/react-native-aztec/src/AztecView.js
+++ b/packages/react-native-aztec/src/AztecView.js
@@ -2,10 +2,12 @@
  * External dependencies
  */
 import {
+	findNodeHandle,
 	requireNativeComponent,
 	UIManager,
-	TouchableWithoutFeedback,
+	Pressable,
 	Platform,
+	TouchableWithoutFeedback,
 } from 'react-native';
 
 /**
@@ -65,6 +67,10 @@ class AztecView extends Component {
 		this.focus = this.focus.bind( this );
 	}
 
+	componentWillUnmount() {
+		AztecInputState.blurOnUnmount( this.aztecViewRef.current );
+	}
+
 	dispatch( command, params ) {
 		params = params || [];
 		UIManager.dispatchViewManagerCommand(
@@ -79,6 +85,8 @@ class AztecView extends Component {
 	}
 
 	_onContentSizeChange( event ) {
+		this.updateCaretData( event );
+
 		if ( ! this.props.onContentSizeChange ) {
 			return;
 		}
@@ -197,16 +205,19 @@ class AztecView extends Component {
 			onSelectionChange( selectionStart, selectionEnd, text, event );
 		}
 
+		this.updateCaretData( event );
+	}
+
+	updateCaretData( event ) {
 		if (
-			this.props.onCaretVerticalPositionChange &&
-			this.selectionEndCaretY !== event.nativeEvent.selectionEndCaretY
+			this.isFocused() &&
+			this.selectionEndCaretY !== event?.nativeEvent?.selectionEndCaretY
 		) {
 			const caretY = event.nativeEvent.selectionEndCaretY;
-			this.props.onCaretVerticalPositionChange(
-				event.nativeEvent.target,
+			AztecInputState.setCurrentCaretData( {
 				caretY,
-				this.selectionEndCaretY
-			);
+				caretHeight: event.nativeEvent?.selectionEndCaretHeight,
+			} );
 			this.selectionEndCaretY = caretY;
 		}
 	}
@@ -224,6 +235,22 @@ class AztecView extends Component {
 		return focusedElement && focusedElement === this.aztecViewRef.current;
 	}
 
+	onRemoveMarkFormatting() {
+		UIManager.dispatchViewManagerCommand(
+			findNodeHandle( this.aztecViewRef.current ),
+			'onRemoveMarkFormatting',
+			[]
+		);
+	}
+
+	onMarkFormatting( color ) {
+		UIManager.dispatchViewManagerCommand(
+			findNodeHandle( this.aztecViewRef.current ),
+			'onMarkFormatting',
+			[ color ]
+		);
+	}
+
 	_onPress( event ) {
 		if ( ! this.isFocused() ) {
 			this.focus(); // Call to move the focus in RN way (TextInputState)
@@ -232,12 +259,49 @@ class AztecView extends Component {
 	}
 
 	_onAztecFocus( event ) {
-		// IMPORTANT: the onFocus events from Aztec are thrown away on Android as these are handled by onPress() in the upper level.
-		// It's necessary to do this otherwise onFocus may be set by `{...otherProps}` and thus the onPress + onFocus
-		// combination generate an infinite loop as described in https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
-		// For iOS, this is necessary to let the system know when Aztec was focused programatically.
-		if ( Platform.OS === 'ios' ) {
-			this._onPress( event );
+		// IMPORTANT: This function serves two purposes:
+		//
+		// Android: This intentional no-op function prevents focus loops originating
+		// when the native Aztec module programmatically focuses the instance. The
+		// no-op is explicitly passed as an `onFocus` prop to avoid future prop
+		// spreading from inadvertently introducing focus loops. The user-facing
+		// focus of the element is handled by `onPress` instead.
+		//
+		// See: https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
+		//
+		// iOS: Programmatic focus from the native Aztec module is required to
+		// ensure the React-based `TextStateInput` ref is properly set when focus
+		// is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
+		// is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
+		// will fail.
+		//
+		// See: https://github.com/wordpress-mobile/gutenberg-mobile/issues/702
+		if (
+			// The Android keyboard is, likely erroneously, already dismissed in the
+			// contexts where programmatic focus may be required on iOS.
+			//
+			// - https://github.com/WordPress/gutenberg/issues/28748
+			// - https://github.com/WordPress/gutenberg/issues/29048
+			// - https://github.com/wordpress-mobile/WordPress-Android/issues/16167
+			Platform.OS === 'ios'
+		) {
+			this.updateCaretData( event );
+
+			if ( ! this.isFocused() ) {
+				// Programmatically swapping input focus creates an infinite loop if the
+				// user taps a different input in between the programmatic focus and
+				// the resulting update to the React Native TextInputState focused element
+				// ref. To mitigate this, the below updates the focused element ref, but
+				// does not call the native focus methods.
+				//
+				// See: https://github.com/wordpress-mobile/WordPress-iOS/issues/18783
+				AztecInputState.focusInput( this.aztecViewRef.current );
+
+				// Calling _onFocus is needed to trigger provided onFocus callbacks
+				// which are needed to prevent undesired results like having a focused
+				// TextInput when another element has the focus.
+				this._onFocus( event );
+			}
 		}
 	}
 
@@ -249,15 +313,30 @@ class AztecView extends Component {
 
 		if ( style.hasOwnProperty( 'lineHeight' ) ) {
 			delete style.lineHeight;
-			window.console.warn(
-				"Removing lineHeight style as it's not supported by native AztecView"
-			);
 			// Prevents passing line-height within styles to avoid a crash due to values without units
 			// We now support this but passing line-height as a prop instead.
 		}
 
+		// Remove Font size rendering for pre elements until we fix an issue with AztecAndroid.
+		if (
+			Platform.OS === 'android' &&
+			this.props.text?.tag === 'pre' &&
+			style.hasOwnProperty( 'fontSize' )
+		) {
+			delete style.fontSize;
+		}
+
+		// We need to use `Pressable` on iOS to avoid issues with VoiceOver and assistive
+		// input like the Braille Screen Input.
+		// More information about this can be found in https://github.com/WordPress/gutenberg/pull/53895.
+		const TouchableComponent =
+			Platform.OS === 'ios' ? Pressable : TouchableWithoutFeedback;
+
 		return (
-			<TouchableWithoutFeedback onPress={ this._onPress }>
+			<TouchableComponent
+				accessible={ Platform.OS !== 'ios' }
+				onPress={ this._onPress }
+			>
 				<RCTAztecView
 					{ ...otherProps }
 					style={ style }
@@ -269,14 +348,12 @@ class AztecView extends Component {
 					onBackspace={ this.props.onKeyDown && this._onBackspace }
 					onKeyDown={ this.props.onKeyDown && this._onKeyDown }
 					deleteEnter={ this.props.deleteEnter }
-					// IMPORTANT: the onFocus events are thrown away as these are handled by onPress() in the upper level.
-					// It's necessary to do this otherwise onFocus may be set by `{...otherProps}` and thus the onPress + onFocus
-					// combination generate an infinite loop as described in https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
+					// IMPORTANT: Do not remove the `onFocus` prop, see `_onAztecFocus`
 					onFocus={ this._onAztecFocus }
 					onBlur={ this._onBlur }
 					ref={ this.aztecViewRef }
 				/>
-			</TouchableWithoutFeedback>
+			</TouchableComponent>
 		);
 	}
 }
@@ -284,5 +361,6 @@ class AztecView extends Component {
 const RCTAztecView = requireNativeComponent( 'RCTAztecView', AztecView );
 
 AztecView.InputState = AztecInputState;
+AztecView.KeyCodes = KEYCODES;
 
 export default AztecView;
diff --git a/packages/react-native-aztec/src/test/AztecInputState.test.js b/packages/react-native-aztec/src/test/AztecInputState.test.js
index 4e5a59c6caf23d..2c272993fca7fd 100644
--- a/packages/react-native-aztec/src/test/AztecInputState.test.js
+++ b/packages/react-native-aztec/src/test/AztecInputState.test.js
@@ -12,42 +12,41 @@ import {
 	isFocused,
 	focus,
 	blur,
-	notifyInputChange,
+	blurOnUnmount,
 	removeFocusChangeListener,
 } from '../AztecInputState';
 
-jest.mock(
-	'react-native/Libraries/Components/TextInput/TextInputState',
-	() => ( {
-		focusTextInput: jest.fn(),
-		blurTextInput: jest.fn(),
-		currentlyFocusedInput: jest.fn(),
-	} )
-);
+// Recreate internal state of TextInput
+let currentInput = null;
+TextInputState.focusTextInput = jest.fn( ( value ) => {
+	currentInput = value;
+} );
+TextInputState.blurTextInput = jest.fn( ( value ) => {
+	if ( currentInput === value ) {
+		currentInput = null;
+	}
+} );
+TextInputState.currentlyFocusedInput = jest.fn( () => currentInput );
 
 const ref = { current: null };
+const anotherRef = { current: null };
 
-const updateCurrentFocusedInput = ( value ) => {
-	TextInputState.currentlyFocusedInput.mockReturnValue( value );
-	notifyInputChange();
-};
+jest.useFakeTimers();
 
 describe( 'Aztec Input State', () => {
 	it( 'listens to focus change event', () => {
 		const listener = jest.fn();
-		const anotherRef = { current: null };
 		addFocusChangeListener( listener );
 
-		updateCurrentFocusedInput( ref );
-
+		focus( ref );
 		expect( listener ).toHaveBeenCalledWith( { isFocused: true } );
 
-		updateCurrentFocusedInput( anotherRef );
-
-		expect( listener ).toHaveBeenCalledTimes( 1 );
-
-		updateCurrentFocusedInput( null );
+		listener.mockClear();
+		focus( anotherRef );
+		expect( listener ).not.toHaveBeenCalled();
 
+		blur( anotherRef );
+		jest.runAllTimers();
 		expect( listener ).toHaveBeenCalledWith( { isFocused: false } );
 	} );
 
@@ -56,36 +55,35 @@ describe( 'Aztec Input State', () => {
 		addFocusChangeListener( listener );
 		removeFocusChangeListener( listener );
 
-		updateCurrentFocusedInput( ref );
-
-		expect( listener ).not.toHaveBeenCalledWith( { isFocused: true } );
-
-		updateCurrentFocusedInput( null );
+		focus( ref );
+		expect( listener ).not.toHaveBeenCalled();
 
-		expect( listener ).not.toHaveBeenCalledWith( { isFocused: false } );
+		blur( ref );
+		jest.runAllTimers();
+		expect( listener ).not.toHaveBeenCalled();
 	} );
 
-	it( 'returns true if an element is focused', () => {
-		updateCurrentFocusedInput( ref );
+	it( 'returns the focus state', () => {
+		focus( ref );
 		expect( isFocused() ).toBeTruthy();
-	} );
 
-	it( 'returns false if an element is unfocused', () => {
-		updateCurrentFocusedInput( null );
+		blur( ref );
+		jest.runAllTimers();
 		expect( isFocused() ).toBeFalsy();
 	} );
 
 	it( 'returns current focused element', () => {
-		const anotherRef = { current: null };
-		updateCurrentFocusedInput( ref );
+		focus( ref );
 		expect( getCurrentFocusedElement() ).toBe( ref );
 
-		updateCurrentFocusedInput( anotherRef );
+		focus( anotherRef );
 		expect( getCurrentFocusedElement() ).toBe( anotherRef );
 	} );
 
 	it( 'returns null if focused element is unfocused', () => {
-		updateCurrentFocusedInput( null );
+		focus( ref );
+		blur( ref );
+		jest.runAllTimers();
 		expect( getCurrentFocusedElement() ).toBe( null );
 	} );
 
@@ -96,6 +94,52 @@ describe( 'Aztec Input State', () => {
 
 	it( 'unfocuses an element', () => {
 		blur( ref );
+		jest.runAllTimers();
 		expect( TextInputState.blurTextInput ).toHaveBeenCalledWith( ref );
 	} );
+
+	it( 'unfocuses an element when unmounted', () => {
+		const listener = jest.fn();
+
+		focus( ref );
+
+		addFocusChangeListener( listener );
+		blurOnUnmount( ref );
+		jest.runAllTimers();
+
+		// TextInputState will update its state internally when the text
+		// input is removed. For this reason and to avoid triggering an
+		// event on an removed element, we don't call blurTextInput.
+		expect( TextInputState.blurTextInput ).not.toHaveBeenCalled();
+		expect( listener ).toHaveBeenCalledWith( { isFocused: false } );
+		expect( listener ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'cancels blur event when unfocusing an element that will be unmounted', () => {
+		const listener = jest.fn();
+
+		focus( ref );
+
+		addFocusChangeListener( listener );
+		blur( ref );
+		blurOnUnmount( ref );
+		jest.runAllTimers();
+
+		// TextInputState will update its state internally when the text
+		// input is removed. For this reason and to avoid triggering an
+		// event on an removed element, we don't call blurTextInput.
+		expect( TextInputState.blurTextInput ).not.toHaveBeenCalled();
+		expect( listener ).toHaveBeenCalledWith( { isFocused: false } );
+		expect( listener ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'cancels blur event when focusing an element', () => {
+		focus( ref );
+		blur( ref );
+		focus( anotherRef );
+		jest.runAllTimers();
+
+		expect( TextInputState.focusTextInput ).toHaveBeenCalledTimes( 2 );
+		expect( TextInputState.blurTextInput ).not.toHaveBeenCalled();
+	} );
 } );
diff --git a/packages/react-native-bridge/.npmrc b/packages/react-native-bridge/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/react-native-bridge/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/react-native-bridge/README.md b/packages/react-native-bridge/README.md
index 390ca109c1720e..608111420fbafe 100644
--- a/packages/react-native-bridge/README.md
+++ b/packages/react-native-bridge/README.md
@@ -14,9 +14,9 @@ This package is not yet published to npm. You can use it locally:
 
 #### iOS
 
-1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
+1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
 2. Go to `node_modules` ➜ `react-native-bridge` and add `RNReactNativeGutenbergBridge.xcodeproj`
-3. In XCode, in the project navigator, select your project. Add `libRNReactNativeGutenbergBridge.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
+3. In Xcode, in the project navigator, select your project. Add `libRNReactNativeGutenbergBridge.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
 4. Run your project (`Cmd+R`)<
 
 #### Android
diff --git a/packages/react-native-bridge/android/.java-version b/packages/react-native-bridge/android/.java-version
new file mode 100644
index 00000000000000..03b6389f32ad57
--- /dev/null
+++ b/packages/react-native-bridge/android/.java-version
@@ -0,0 +1 @@
+17.0
diff --git a/packages/react-native-bridge/android/build.gradle b/packages/react-native-bridge/android/build.gradle
index 99069d55cfb6bf..2e7c3c822c42fb 100644
--- a/packages/react-native-bridge/android/build.gradle
+++ b/packages/react-native-bridge/android/build.gradle
@@ -12,6 +12,12 @@ plugins {
 
 allprojects {
     repositories {
+        mavenCentral()
+        // Starting from React Native 0.70, we no longer need to publish React Native binaries
+        // because they are already published to Maven (reference: https://t.ly/Biea).
+        // However, the third-party dependencies from forked repositories still point to older
+        // versions of React Native, hence we need to keep this Maven repository.
         maven { url "https://a8c-libs.s3.amazonaws.com/android/react-native-mirror" }
+        mavenLocal()
     }
 }
diff --git a/packages/react-native-bridge/android/gradle.properties b/packages/react-native-bridge/android/gradle.properties
index 570019612adf35..eb15f4b384486b 100644
--- a/packages/react-native-bridge/android/gradle.properties
+++ b/packages/react-native-bridge/android/gradle.properties
@@ -1,4 +1,8 @@
+# Project-wide Gradle settings.
+
 org.gradle.jvmargs=-Xmx2g -XX:+HeapDumpOnOutOfMemoryError
+
+# React Native Bridge properties.
+
 android.useAndroidX=true
 android.enableJetifier=false
-
diff --git a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar
index 41d9927a4d4fb3..2c3521197d7c45 100644
Binary files a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties
index 92f06b50fd65b4..efe2ff3449216a 100644
--- a/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-bridge/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,8 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
+distributionSha256Sum=258e722ec21e955201e31447b0aed14201765a3bfbae296a46cf60b70e66db70
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.9-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/packages/react-native-bridge/android/gradlew b/packages/react-native-bridge/android/gradlew
index 1b6c787337ffb7..f5feea6d6b116b 100755
--- a/packages/react-native-bridge/android/gradlew
+++ b/packages/react-native-bridge/android/gradlew
@@ -15,6 +15,8 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
+# SPDX-License-Identifier: Apache-2.0
+#
 
 ##############################################################################
 #
@@ -55,7 +57,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,13 +82,12 @@ do
     esac
 done
 
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
+' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -133,22 +134,29 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -193,11 +201,15 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
-# Collect all arguments for the java command;
-#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
-#     shell script including quotes and variable substitutions, so put them in
-#     double quotes to make sure that they get re-expanded; and
-#   * put everything else in single quotes, so that it's not re-expanded.
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
 
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
@@ -205,6 +217,12 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
diff --git a/packages/react-native-bridge/android/gradlew.bat b/packages/react-native-bridge/android/gradlew.bat
index ac1b06f93825db..9b42019c7915b9 100644
--- a/packages/react-native-bridge/android/gradlew.bat
+++ b/packages/react-native-bridge/android/gradlew.bat
@@ -13,8 +13,10 @@
 @rem See the License for the specific language governing permissions and
 @rem limitations under the License.
 @rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +27,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,13 +43,13 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -56,11 +59,11 @@ set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
 if exist "%JAVA_EXE%" goto execute
 
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
 
 goto fail
 
@@ -75,13 +78,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
diff --git a/packages/react-native-bridge/android/react-native-bridge/build.gradle b/packages/react-native-bridge/android/react-native-bridge/build.gradle
index 70f3d4c4307c98..d8249b9d1b640f 100644
--- a/packages/react-native-bridge/android/react-native-bridge/build.gradle
+++ b/packages/react-native-bridge/android/react-native-bridge/build.gradle
@@ -1,3 +1,19 @@
+buildscript {
+    ext {
+        // libs
+        wordpressUtilsVersion = '3.3.0'
+
+        // main
+        googleMaterialVersion = '1.2.1'
+
+        // react native
+        facebookFrescoVersion = '2.0.0'
+
+        // test
+        junitVersion = '4.13'
+    }
+}
+
 plugins {
     id "com.android.library"
     id "org.jetbrains.kotlin.android"
@@ -9,26 +25,31 @@ plugins {
 apply from: 'https://gist.githubusercontent.com/hypest/742448b9588b3a0aa580a5e80ae95bdf/raw/8eb62d40ee7a5104d2fcaeff21ce6f29bd93b054/readReactNativeVersion.gradle'
 apply from: '../extractPackageVersion.gradle'
 
-group='org.wordpress-mobile.gutenberg-mobile'
+group='org.wordpress.gutenberg-mobile'
 
 def buildAssetsFolder = 'build/assets'
 
 android {
-    compileSdkVersion 31
+    // IMPORTANT: Any updates to the namespace should be reflected in
+    // the `package` attribute of the main `AndroidManifest.xml` file.
+    // File reference: `react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml`
+    namespace "org.wordpress.mobile.ReactNativeGutenbergBridge"
+
+    compileSdkVersion 34
 
     defaultConfig {
-        minSdkVersion 21
-        targetSdkVersion 31
+        minSdkVersion 24
+        targetSdkVersion 34
         buildConfigField "boolean", "SHOULD_ATTACH_JS_BUNDLE", willPublishReactNativeBridgeBinary.toString()
     }
 
-    lintOptions {
+    lint {
         abortOnError false
     }
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
 
     sourceSets {
@@ -41,11 +62,14 @@ android {
             assets.srcDirs += '../../../../../resources/unsupported-block-editor'
         }
     }
+
+    buildFeatures {
+        buildConfig true
+    }
 }
 
 repositories {
     maven { url "https://a8c-libs.s3.amazonaws.com/android" }
-    maven { url "https://a8c-libs.s3.amazonaws.com/android/hermes-mirror" }
     maven { url "https://jitpack.io" }
     google()
     mavenCentral()
@@ -53,40 +77,40 @@ repositories {
 
 dependencies {
     // For animated GIF support
-    implementation 'com.facebook.fresco:animated-gif:2.0.0'
-    implementation 'com.google.android.material:material:1.2.1'
-    implementation "org.wordpress:utils:2.3.0"
+    implementation "com.facebook.fresco:animated-gif:$facebookFrescoVersion"
+    implementation "com.google.android.material:material:$googleMaterialVersion"
+    implementation "org.wordpress:utils:$wordpressUtilsVersion"
 
-    testImplementation "junit:junit:4.13"
+    testImplementation "junit:junit:$junitVersion"
 
     def rnVersion = readReactNativeVersion('../../../../package.json', 'devDependencies')
     println "react-native version for react-native-bridge: $rnVersion"
     def packageJson = '../../../react-native-editor/package.json'
 
-    implementation "com.facebook.react:react-native:$rnVersion"
-    implementation "org.wordpress-mobile:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}"
+    implementation "com.facebook.react:react-android:$rnVersion"
     implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-slider:${extractPackageVersion(packageJson, '@react-native-community/slider', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-masked-view:${extractPackageVersion(packageJson, '@react-native-masked-view/masked-view', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-screens:${extractPackageVersion(packageJson, 'react-native-screens', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-reanimated:${extractPackageVersion(packageJson, 'react-native-reanimated', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-prompt-android:${extractPackageVersion(packageJson, 'react-native-prompt-android', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-webview:${extractPackageVersion(packageJson, 'react-native-webview', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-clipboard:${extractPackageVersion(packageJson, '@react-native-clipboard/clipboard', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-fast-image:${extractPackageVersion(packageJson, 'react-native-fast-image', 'dependencies')}"
-
-    implementation("com.github.wordpress-mobile:react-native-gesture-handler:${extractPackageVersion(packageJson, 'react-native-gesture-handler', 'dependencies')}", {
-        // Remove Reanimated transitive dependency as it's already defined here
-        exclude group: 'com.github.wordpress-mobile', module: 'react-native-reanimated'
-    })
-
-    runtimeOnly "org.wordpress-mobile:hermes-release-mirror:$rnVersion"
+
+    // Published by `wordpress-mobile/react-native-libraries-publisher`
+    // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`
+    def reactNativeLibrariesPublisherVersion = "v6"
+    def reactNativeLibrariesGroupId = "org.wordpress.react-native-libraries.$reactNativeLibrariesPublisherVersion"
+    implementation "$reactNativeLibrariesGroupId:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-screens:${extractPackageVersion(packageJson, 'react-native-screens', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-webview:${extractPackageVersion(packageJson, 'react-native-webview', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-masked-view:${extractPackageVersion(packageJson, '@react-native-masked-view/masked-view', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-clipboard:${extractPackageVersion(packageJson, '@react-native-clipboard/clipboard', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-fast-image:${extractPackageVersion(packageJson, 'react-native-fast-image', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-reanimated:${extractPackageVersion(packageJson, 'react-native-reanimated', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-gesture-handler:${extractPackageVersion(packageJson, 'react-native-gesture-handler', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}"
+
+    runtimeOnly "com.facebook.react:hermes-android:$rnVersion"
 
     if (willPublishReactNativeBridgeBinary) {
-        implementation "org.wordpress-mobile.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion"
+        implementation "org.wordpress.gutenberg-mobile:react-native-aztec:$reactNativeAztecVersion"
    } else {
         api project(':@wordpress_react-native-aztec')
    }
@@ -98,9 +122,8 @@ project.afterEvaluate {
             ReactNativeBridgePublication(MavenPublication) {
                 artifact bundleReleaseAar
 
-                groupId 'org.wordpress-mobile.gutenberg-mobile'
+                groupId 'org.wordpress.gutenberg-mobile'
                 artifactId 'react-native-gutenberg-bridge'
-                artifact tasks.named("androidSourcesJar")
                 // version is set by 'publish-to-s3' plugin
 
                 addDependenciesToPom(pom)
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/debug/AndroidManifest.xml b/packages/react-native-bridge/android/react-native-bridge/src/debug/AndroidManifest.xml
index 49ddd2f355c40e..918ee013ea2711 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/debug/AndroidManifest.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/debug/AndroidManifest.xml
@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          xmlns:tools="http://schemas.android.com/tools"
-          package="org.wordpress.mobile.ReactNativeGutenbergBridge">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <application>
-
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
 
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
index c4d5efc7496118..a26c55b7434e35 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
@@ -1,6 +1,9 @@
-
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="org.wordpress.mobile.ReactNativeGutenbergBridge">
+<!--
+    IMPORTANT: Any updates to the package name should be reflected in
+    the `namespace` property of the `build.gradle` file.
+    File reference: `react-native-bridge/android/react-native-bridge/build.gradle`
+-->
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="org.wordpress.mobile.ReactNativeGutenbergBridge">
 
     <queries>
         <intent>
@@ -20,6 +23,9 @@
         <activity
             android:name=".GutenbergWebViewActivity"
             android:theme="@style/Base.GutenbergWebView" />
+        <activity
+            android:name=".GutenbergEmbedWebViewActivity"
+            android:theme="@style/Base.GutenbergWebView" />
     </application>
 
 </manifest>
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
index d30f26243c7dd6..4947c5124f0916 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -4,8 +4,9 @@
 
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeMap;
 
+import org.wordpress.mobile.WPAndroidGlue.GutenbergJsException;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 import org.wordpress.mobile.WPAndroidGlue.RequestExecutor;
 
@@ -13,7 +14,6 @@
 import java.util.List;
 
 public interface GutenbergBridgeJS2Parent extends RequestExecutor {
-
     void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo);
 
     void editorDidMount(ReadableArray unsupportedBlockNames);
@@ -29,8 +29,9 @@ interface MediaSelectedCallback {
     interface MediaUploadEventEmitter {
         void onUploadMediaFileClear(int mediaId);
         void onMediaFileUploadProgress(int mediaId, float progress);
-        void onMediaFileUploadSucceeded(int mediaId, String mediaUrl, int serverId);
+        void onMediaFileUploadSucceeded(int mediaId, String mediaUrl, int serverId, WritableNativeMap metadata);
         void onMediaFileUploadFailed(int mediaId);
+        void onMediaFileUploadPaused(int mediaId);
     }
 
     interface MediaSaveEventEmitter {
@@ -59,6 +60,14 @@ interface BlockTypeImpressionsCallback {
         void onRequestBlockTypeImpressions(ReadableMap impressions);
     }
 
+    interface ConnectionStatusCallback {
+        void onRequestConnectionStatus(boolean isConnected);
+    }
+
+    interface LogExceptionCallback {
+        void onLogException(boolean success);
+    }
+
     // Ref: https://github.com/facebook/react-native/blob/HEAD/Libraries/polyfills/console.js#L376
     enum LogLevel {
         TRACE(0),
@@ -117,8 +126,6 @@ public static MediaType getEnum(String value) {
 
     void mediaUploadSync(MediaSelectedCallback mediaSelectedCallback);
 
-    void mediaSaveSync(MediaSelectedCallback mediaSelectedCallback);
-
     void requestImageFailedRetryDialog(int mediaId);
 
     void requestImageUploadCancelDialog(int mediaId);
@@ -145,22 +152,14 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
                                                      String blockName,
                                                      String blockTitle);
 
+    void requestEmbedFullscreenPreview(String content, String title);
+
     void gutenbergDidSendButtonPressedAction(String buttonType);
 
     void onShowUserSuggestions(Consumer<String> onResult);
 
     void onShowXpostSuggestions(Consumer<String> onResult);
 
-    void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId);
-
-    void requestMediaFilesFailedRetryDialog(ReadableArray mediaFiles);
-
-    void requestMediaFilesUploadCancelDialog(ReadableArray mediaFiles);
-
-    void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles);
-
-    void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId);
-
     void setFocalPointPickerTooltipShown(boolean tooltipShown);
 
     void requestFocalPointPickerTooltipShown(FocalPointPickerTooltipShownCallback focalPointPickerTooltipShownCallback);
@@ -176,4 +175,12 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
     void requestGotoCustomerSupportOptions();
 
     void sendEventToHost(String eventName, ReadableMap properties);
+
+    void toggleUndoButton(boolean isDisabled);
+
+    void toggleRedoButton(boolean isDisabled);
+
+    void requestConnectionStatus(ConnectionStatusCallback connectionStatusCallback);
+
+    void logException(GutenbergJsException exception, LogExceptionCallback logExceptionCallback);
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java
new file mode 100644
index 00000000000000..19f25bdd77e9c2
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java
@@ -0,0 +1,160 @@
+package org.wordpress.mobile.ReactNativeGutenbergBridge;
+
+import android.annotation.SuppressLint;
+import android.graphics.Bitmap;
+import android.os.Bundle;
+import android.os.Handler;
+import android.view.MenuItem;
+import android.view.View;
+import android.webkit.WebChromeClient;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+import android.widget.ProgressBar;
+
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.ActionBar;
+import androidx.appcompat.app.AppCompatActivity;
+import androidx.appcompat.widget.Toolbar;
+
+import java.util.concurrent.atomic.AtomicBoolean;
+
+public class GutenbergEmbedWebViewActivity extends AppCompatActivity {
+    public static final String ARG_CONTENT = "content";
+    public static final String ARG_TITLE = "title";
+    private static final String JAVA_SCRIPT_INTERFACE_NAME = "wpwebkit";
+
+    protected WebView mWebView;
+
+    private ProgressBar mProgressBar;
+    private AtomicBoolean mIsWebPageLoaded = new AtomicBoolean(false);
+    private final Handler mWebPageLoadedHandler = new Handler();
+    private final Runnable mWebPageLoadedRunnable = new Runnable() {
+        @Override public void run() {
+            if (!mIsWebPageLoaded.getAndSet(true)) {
+                mProgressBar.setVisibility(View.GONE);
+            }
+        }
+    };
+
+    @SuppressLint("SetJavaScriptEnabled")
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_gutenberg_embed_web_view);
+
+        setupToolbar();
+
+        mWebView = findViewById(R.id.embed_web_view);
+
+        mProgressBar = findViewById(R.id.progress_bar);
+
+        // Set settings
+        WebSettings settings = mWebView.getSettings();
+        settings.setJavaScriptEnabled(true);
+
+        // Setup WebView client
+        setupWebViewClient();
+
+        // Setup Web Chrome client
+        mWebView.setWebChromeClient(new WebChromeClient() {
+            @Override
+            public void onProgressChanged(WebView view, int progress) {
+                if (progress == 100) {
+                    mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable);
+                    mWebPageLoadedHandler.postDelayed(mWebPageLoadedRunnable, 1500);
+                } else {
+                    mIsWebPageLoaded.compareAndSet(true, false);
+                    if (mProgressBar.getVisibility() == View.GONE) {
+                        mProgressBar.setVisibility(View.VISIBLE);
+                    }
+                    mProgressBar.setProgress(progress);
+                }
+            }
+        });
+
+        load();
+    }
+
+    protected void load() {
+        String content = getIntent().getExtras().getString(ARG_CONTENT);
+        mWebView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null);
+    }
+
+    private void setupToolbar() {
+        setTitle("");
+
+        Toolbar toolbar = findViewById(R.id.toolbar);
+        if (toolbar != null) {
+            setSupportActionBar(toolbar);
+
+            ActionBar actionBar = getSupportActionBar();
+            if (actionBar != null) {
+                actionBar.setDisplayShowTitleEnabled(true);
+                actionBar.setDisplayHomeAsUpEnabled(true);
+                actionBar.setHomeAsUpIndicator(R.drawable.ic_close_24px);
+                actionBar.setSubtitle("");
+                actionBar.setTitle(getToolbarTitle());
+            }
+        }
+    }
+
+    protected String getToolbarTitle() {
+        return getIntent().getExtras().getString(ARG_TITLE);
+    }
+
+    @Override
+    public boolean onOptionsItemSelected(final MenuItem item) {
+        if (mWebView == null) {
+            return false;
+        }
+
+        int itemID = item.getItemId();
+
+        if (itemID == android.R.id.home) {
+            finish();
+        }
+
+        return super.onOptionsItemSelected(item);
+    }
+
+    private void setupWebViewClient() {
+        mWebView.setWebViewClient(new WebViewClient() {
+            @Override
+            public void onPageStarted(WebView view, String url, Bitmap favicon) {
+                // Center the embed with a black background;
+                String css = "body{margin:0;background:#000;display:flex;align-items:center;}";
+                String js = String.format("(()=>{const c='%s';const s=document.createElement('style');s.textContent=c;document.head.append(s);})()", css);
+                view.evaluateJavascript(js, null);
+                super.onPageStarted(view, url, favicon);
+            }
+        });
+    }
+
+    @Override
+    public void onBackPressed() {
+        if (mWebView.canGoBack()) {
+            mWebView.goBack();
+        } else {
+            super.onBackPressed();
+        }
+    }
+
+    @Override
+    public void finish() {
+        runOnUiThread(() -> {
+            mWebView.removeJavascriptInterface(JAVA_SCRIPT_INTERFACE_NAME);
+            mWebView.clearHistory();
+            mWebView.clearFormData();
+            mWebView.clearCache(true);
+            mWebView.clearSslPreferences();
+        });
+
+        super.finish();
+    }
+
+    @Override
+    protected void onDestroy() {
+        mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable);
+        super.onDestroy();
+    }
+}
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
index 2b3302b75e2575..c4ae7e350f4cb7 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergWebViewActivity.java
@@ -40,7 +40,7 @@ public class GutenbergWebViewActivity extends AppCompatActivity {
     public static final String ARG_BLOCK_CONTENT = "block_content";
 
     private static final String INJECT_LOCAL_STORAGE_SCRIPT_TEMPLATE = "localStorage.setItem('WP_DATA_USER_%d','%s')";
-    private static final String INJECT_CSS_SCRIPT_TEMPLATE = "window.injectCss('%s')";
+    private static final String INJECT_CSS_SCRIPT_TEMPLATE = "window.injectCss('%s', '%s')";
     private static final String INJECT_GET_HTML_POST_CONTENT_SCRIPT = "window.getHTMLPostContent();";
     private static final String INJECT_ON_SHOW_CONTEXT_MENU_SCRIPT = "window.onShowContextMenu();";
     private static final String INJECT_ON_HIDE_CONTEXT_MENU_SCRIPT = "window.onHideContextMenu();";
@@ -327,16 +327,16 @@ private void injectCssScript() {
         mWebView.evaluateJavascript(injectCssScript, message -> {
             if (message != null) {
                 String editorStyle = getFileContentFromAssets("gutenberg-web-single-block/editor-style-overrides.css");
-                editorStyle = removeWhiteSpace(removeNewLines(editorStyle));
-                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle));
+                editorStyle = removeNewLines(editorStyle);
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, editorStyle, "editor-style-overrides"));
 
                 String injectWPBarsCssScript = getFileContentFromAssets("gutenberg-web-single-block/wp-bar-override.css");
                 injectWPBarsCssScript = removeWhiteSpace(removeNewLines(injectWPBarsCssScript));
-                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript));
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectWPBarsCssScript, "wp-bar-override"));
 
                 String injectExternalCssScript = getOnGutenbergReadyExternalStyles();
                 injectExternalCssScript = removeWhiteSpace(removeNewLines(injectExternalCssScript));
-                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectExternalCssScript));
+                evaluateJavaScript(String.format(INJECT_CSS_SCRIPT_TEMPLATE, injectExternalCssScript, "external-styles"));
             }
         });
     }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
index 9c3a25a5ed0762..1933acec052aaa 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNMedia.kt
@@ -9,5 +9,6 @@ interface RNMedia {
     val caption: String
     val title: String
     val alt: String
+    val metadata: WritableMap
     fun toMap(): WritableMap
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
index 5085fd546b4c1b..62e6ed8fc94651 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -1,11 +1,15 @@
 package org.wordpress.mobile.ReactNativeGutenbergBridge;
 
+import android.app.Activity;
 import android.content.Context;
 import android.os.Build;
 import android.os.Bundle;
 import android.os.VibrationEffect;
 import android.os.Vibrator;
 import android.provider.Settings;
+import android.view.View;
+import android.view.ViewTreeObserver;
+import android.view.inputmethod.InputMethodManager;
 
 import androidx.annotation.Nullable;
 
@@ -23,11 +27,14 @@
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.modules.core.DeviceEventManagerModule;
 
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ConnectionStatusCallback;
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.LogExceptionCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaType;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.OtherMediaOptionsReceivedCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.FocalPointPickerTooltipShownCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.BlockTypeImpressionsCallback;
 import org.wordpress.mobile.WPAndroidGlue.DeferredEventEmitter;
+import org.wordpress.mobile.WPAndroidGlue.GutenbergJsException;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
 import java.io.Serializable;
@@ -40,6 +47,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
         DeferredEventEmitter.JSEventEmitter {
     private final ReactApplicationContext mReactContext;
     private final GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
+    private Runnable mKeyboardRunnable;
 
     private static final String EVENT_NAME_REQUEST_GET_HTML = "requestGetHtml";
     private static final String EVENT_NAME_UPDATE_HTML = "updateHtml";
@@ -47,6 +55,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_FOCUS_TITLE = "setFocusOnTitle";
     private static final String EVENT_NAME_MEDIA_APPEND = "mediaAppend";
     private static final String EVENT_NAME_TOGGLE_HTML_MODE = "toggleHTMLMode";
+    private static final String EVENT_NAME_POST_SAVE_EVENT = "postHasBeenJustSaved";
     private static final String EVENT_NAME_NOTIFY_MODAL_CLOSED = "notifyModalClosed";
     private static final String EVENT_NAME_PREFERRED_COLOR_SCHEME = "preferredColorScheme";
     private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
@@ -54,6 +63,11 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String EVENT_NAME_SHOW_NOTICE = "showNotice";
     private static final String EVENT_NAME_SHOW_EDITOR_HELP = "showEditorHelp";
 
+    private static final String EVENT_NAME_ON_UNDO_PRESSED = "onUndoPressed";
+
+    private static final String EVENT_NAME_ON_REDO_PRESSED = "onRedoPressed";
+    private static final String EVENT_NAME_ON_CONTENT_UPDATE = "onContentUpdate";
+
     private static final String MAP_KEY_UPDATE_HTML = "html";
     private static final String MAP_KEY_UPDATE_TITLE = "title";
     public static final String MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_NEW_ID = "newId";
@@ -66,7 +80,6 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_THEME_UPDATE_GRADIENTS = "gradients";
     private static final String MAP_KEY_THEME_UPDATE_RAW_STYLES = "rawStyles";
     private static final String MAP_KEY_THEME_UPDATE_RAW_FEATURES = "rawFeatures";
-    private static final String MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks";
     public static final String MAP_KEY_MEDIA_FINAL_SAVE_RESULT_SUCCESS_VALUE = "success";
 
     private static final String MAP_KEY_IS_PREFERRED_COLOR_SCHEME_DARK = "isPreferredColorSchemeDark";
@@ -78,8 +91,11 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MAP_KEY_REPLACE_BLOCK_HTML = "html";
     private static final String MAP_KEY_REPLACE_BLOCK_BLOCK_ID = "clientId";
 
+    private static final String MAP_KEY_UPDATE_CONTENT = "content";
     public static final String MAP_KEY_FEATURED_IMAGE_ID = "featuredImageId";
 
+    public static final String MAP_KEY_IS_CONNECTED = "isConnected";
+
     private boolean mIsDarkMode;
 
     public RNReactNativeGutenbergBridgeModule(ReactApplicationContext reactContext,
@@ -157,13 +173,6 @@ public void updateTheme(@Nullable Bundle editorTheme) {
         Serializable rawStyles = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_STYLES);
         Serializable rawFeatures = editorTheme.getSerializable(MAP_KEY_THEME_UPDATE_RAW_FEATURES);
 
-        // We must assign null here to distinguish between a missing value and false
-        Boolean galleryWithImageBlocks = null;
-        if (editorTheme.containsKey(MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS)) {
-            galleryWithImageBlocks = editorTheme.getBoolean(MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS);
-        }
-
-
         if (colors != null) {
             writableMap.putArray(MAP_KEY_THEME_UPDATE_COLORS, Arguments.fromList((ArrayList)colors));
         }
@@ -180,10 +189,6 @@ public void updateTheme(@Nullable Bundle editorTheme) {
             writableMap.putString(MAP_KEY_THEME_UPDATE_RAW_FEATURES, rawFeatures.toString());
         }
 
-        if (galleryWithImageBlocks != null) {
-            writableMap.putBoolean(MAP_KEY_GALLERY_WITH_IMAGE_BLOCKS, galleryWithImageBlocks);
-        }
-
         emitToJS(EVENT_NAME_UPDATE_EDITOR_SETTINGS, writableMap);
     }
 
@@ -191,6 +196,21 @@ public void showEditorHelp() {
         emitToJS(EVENT_NAME_SHOW_EDITOR_HELP, null);
     }
 
+    public void onUndoPressed() {
+        emitToJS(EVENT_NAME_ON_UNDO_PRESSED, null);
+    }
+
+    public void onRedoPressed() {
+        emitToJS(EVENT_NAME_ON_REDO_PRESSED, null);
+    }
+
+    public void onContentUpdate(String content) {
+        WritableMap writableMap = new WritableNativeMap();
+
+        writableMap.putString(MAP_KEY_UPDATE_CONTENT, content);
+        emitToJS(EVENT_NAME_ON_CONTENT_UPDATE, writableMap);
+    }
+
     @ReactMethod
     public void addListener(String eventName) {
         // Keep: Required for RN built in Event Emitter Calls.
@@ -252,11 +272,6 @@ public void mediaUploadSync() {
         mGutenbergBridgeJS2Parent.mediaUploadSync(getNewMediaSelectedCallback(false,null));
     }
 
-    @ReactMethod
-    public void mediaSaveSync() {
-        mGutenbergBridgeJS2Parent.mediaSaveSync(getNewMediaSelectedCallback(true,null));
-    }
-
     @ReactMethod
     public void requestImageFailedRetryDialog(final int mediaId) {
         mGutenbergBridgeJS2Parent.requestImageFailedRetryDialog(mediaId);
@@ -287,31 +302,6 @@ public void requestMediaEditor(String mediaUrl, final Callback onUploadMediaSele
         mGutenbergBridgeJS2Parent.requestMediaEditor(getNewMediaSelectedCallback(false, onUploadMediaSelected), mediaUrl);
     }
 
-    @ReactMethod
-    public void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId) {
-        mGutenbergBridgeJS2Parent.requestMediaFilesEditorLoad(mediaFiles, blockId);
-    }
-
-    @ReactMethod
-    public void requestMediaFilesFailedRetryDialog(ReadableArray mediaFiles) {
-        mGutenbergBridgeJS2Parent.requestMediaFilesFailedRetryDialog(mediaFiles);
-    }
-
-    @ReactMethod
-    public void requestMediaFilesUploadCancelDialog(ReadableArray mediaFiles) {
-        mGutenbergBridgeJS2Parent.requestMediaFilesUploadCancelDialog(mediaFiles);
-    }
-
-    @ReactMethod
-    public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
-        mGutenbergBridgeJS2Parent.requestMediaFilesSaveCancelDialog(mediaFiles);
-    }
-
-    @ReactMethod
-    public void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId) {
-        mGutenbergBridgeJS2Parent.mediaFilesBlockReplaceSync(mediaFiles, blockId);
-    }
-
     @ReactMethod
     public void editorDidEmitLog(String message, int logLevel) {
         mGutenbergBridgeJS2Parent.editorDidEmitLog(message, GutenbergBridgeJS2Parent.LogLevel.valueOf(logLevel));
@@ -331,7 +321,7 @@ public void getOtherMediaOptions(ReadableArray filter, final Callback jsCallback
 
     @ReactMethod
     public void fetchRequest(String path, boolean enableCaching, Promise promise) {
-        mGutenbergBridgeJS2Parent.performRequest(path,
+        mGutenbergBridgeJS2Parent.performGetRequest(path,
                 enableCaching,
                 promise::resolve,
                 errorBundle -> {
@@ -345,12 +335,32 @@ public void fetchRequest(String path, boolean enableCaching, Promise promise) {
                 });
     }
 
+    @ReactMethod
+    public void postRequest(String path, ReadableMap data, Promise promise) {
+        mGutenbergBridgeJS2Parent.performPostRequest(path, data,
+                promise::resolve,
+                errorBundle -> {
+                    WritableMap writableMap = Arguments.makeNativeMap(errorBundle);
+                    if (writableMap.hasKey("code")) {
+                        String code = String.valueOf(writableMap.getInt("code"));
+                        promise.reject(code, new Error(), writableMap);
+                    } else {
+                        promise.reject(new Error(), writableMap);
+                    }
+                });
+    }
+
     @ReactMethod
     public void requestUnsupportedBlockFallback(String content, String blockId, String blockName, String blockTitle) {
         mGutenbergBridgeJS2Parent.gutenbergDidRequestUnsupportedBlockFallback((savedContent, savedBlockId) ->
                 replaceBlock(savedContent, savedBlockId), content, blockId, blockName, blockTitle);
     }
 
+    @ReactMethod
+    public void requestEmbedFullscreenPreview(String content, String title) {
+        mGutenbergBridgeJS2Parent.requestEmbedFullscreenPreview(content,title);
+    }
+
     @ReactMethod
     public void actionButtonPressed(String buttonType) {
         mGutenbergBridgeJS2Parent.gutenbergDidSendButtonPressedAction(buttonType);
@@ -434,6 +444,10 @@ public void toggleEditorMode() {
         emitToJS(EVENT_NAME_TOGGLE_HTML_MODE, null);
     }
 
+    public void sendToJSPostSaveEvent() {
+        emitToJS(EVENT_NAME_POST_SAVE_EVENT, null);
+    }
+
     public void notifyModalClosed() {
         emitToJS(EVENT_NAME_NOTIFY_MODAL_CLOSED, null);
     }
@@ -472,6 +486,16 @@ public void sendEventToHost(final String eventName, final ReadableMap properties
         mGutenbergBridgeJS2Parent.sendEventToHost(eventName, properties);
     }
 
+    @ReactMethod
+    public void toggleUndoButton(final boolean isDisabled) {
+        mGutenbergBridgeJS2Parent.toggleUndoButton(isDisabled);
+    }
+
+    @ReactMethod
+    public void toggleRedoButton(final boolean isDisabled) {
+        mGutenbergBridgeJS2Parent.toggleRedoButton(isDisabled);
+    }
+
     @ReactMethod
     public void generateHapticFeedback() {
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
@@ -486,4 +510,101 @@ public void generateHapticFeedback() {
             }
         }
     }
+
+    @ReactMethod
+    public void requestConnectionStatus(final Callback jsCallback) {
+        ConnectionStatusCallback connectionStatusCallback = requestConnectionStatusCallback(jsCallback);
+        mGutenbergBridgeJS2Parent.requestConnectionStatus(connectionStatusCallback);
+    }
+
+    private ConnectionStatusCallback requestConnectionStatusCallback(final Callback jsCallback) {
+        return new GutenbergBridgeJS2Parent.ConnectionStatusCallback() {
+            @Override public void onRequestConnectionStatus(boolean isConnected) {
+                jsCallback.invoke(isConnected);
+            }
+        };
+    }
+
+    @ReactMethod
+    public void showAndroidSoftKeyboard() {
+        Activity currentActivity = mReactContext.getCurrentActivity();
+        if (isAnyViewFocused()) {
+            // Cancel any previously scheduled Runnable
+            if (mKeyboardRunnable != null) {
+                currentActivity.getWindow().getDecorView().removeCallbacks(mKeyboardRunnable);
+            }
+
+            View currentFocusedView = getCurrentFocusedView();
+            currentFocusedView.getViewTreeObserver().addOnWindowFocusChangeListener(new ViewTreeObserver.OnWindowFocusChangeListener() {
+                @Override
+                public void onWindowFocusChanged(boolean hasFocus) {
+                    if (hasFocus) {
+                        mKeyboardRunnable = createShowKeyboardRunnable();
+                        currentActivity.getWindow().getDecorView().post(mKeyboardRunnable);
+                        currentFocusedView.getViewTreeObserver().removeOnWindowFocusChangeListener(this);
+                    }
+                }
+            });
+        }
+    }
+
+    private Runnable createShowKeyboardRunnable() {
+        return new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    Activity activity = mReactContext.getCurrentActivity();
+                    View activeFocusedView = getCurrentFocusedView();
+                    if (activeFocusedView != null && activity.getWindow().getDecorView().isShown()) {
+                        InputMethodManager imm =
+                            (InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
+                        imm.showSoftInput(activeFocusedView, InputMethodManager.SHOW_IMPLICIT);
+                    }
+                } catch (Exception e) {
+                    // Noop
+                }
+            }
+        };
+    }
+
+    private View getCurrentFocusedView() {
+        Activity activity = mReactContext.getCurrentActivity();
+        if (activity == null) {
+            return null;
+        }
+        return activity.getCurrentFocus();
+    }
+
+    private boolean isAnyViewFocused() {
+        View getCurrentFocusedView = getCurrentFocusedView();
+        return getCurrentFocusedView != null;
+    }
+
+    @ReactMethod
+    public void hideAndroidSoftKeyboard() {
+        Activity currentActivity = mReactContext.getCurrentActivity();
+        if (currentActivity != null) {
+            View currentFocusedView = currentActivity.getCurrentFocus();
+            if (currentFocusedView != null) {
+                InputMethodManager imm =
+                    (InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
+                imm.hideSoftInputFromWindow(currentFocusedView.getWindowToken(), 0);
+            }
+        }
+    }
+
+    @ReactMethod
+    public void logException(final ReadableMap rawException, final Callback jsCallback) {
+        GutenbergJsException exception = GutenbergJsException.fromReadableMap(rawException);
+        LogExceptionCallback logExceptionCallback = onLogExceptionCallback(jsCallback);
+        mGutenbergBridgeJS2Parent.logException(exception, logExceptionCallback);
+    }
+
+   private LogExceptionCallback onLogExceptionCallback(final Callback jsCallback) {
+       return new GutenbergBridgeJS2Parent.LogExceptionCallback() {
+           @Override public void onLogException(boolean success) {
+               jsCallback.invoke(success);
+           }
+       };
+   }
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/DeferredEventEmitter.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/DeferredEventEmitter.java
index 0755ff3c68a925..3bbc8fe7429532 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/DeferredEventEmitter.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/DeferredEventEmitter.java
@@ -15,6 +15,7 @@
 import java.util.Queue;
 import java.util.concurrent.ConcurrentLinkedQueue;
 
+import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_IS_CONNECTED;
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_ID;
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_NEW_ID;
 import static org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgeModule.MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_URL;
@@ -30,6 +31,7 @@ public interface JSEventEmitter {
     private static final int MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
     private static final int MEDIA_UPLOAD_STATE_FAILED = 3;
     private static final int MEDIA_UPLOAD_STATE_RESET = 4;
+    private static final int MEDIA_UPLOAD_STATE_PAUSED = 11;
 
     private static final int MEDIA_SAVE_STATE_SAVING = 5;
     private static final int MEDIA_SAVE_STATE_SUCCEEDED = 6;
@@ -44,9 +46,13 @@ public interface JSEventEmitter {
 
     private static final String EVENT_FEATURED_IMAGE_ID_NATIVE_UPDATED = "featuredImageIdNativeUpdated";
 
+    private static final String EVENT_CONNECTION_STATUS_CHANGE = "connectionStatusChange";
+
     private static final String MAP_KEY_MEDIA_FILE_STATE = "state";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_ACTION_PROGRESS = "progress";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_SERVER_ID = "mediaServerId";
+    private static final String MAP_KEY_MEDIA_FILE_METADATA = "metadata";
+
     private static final String MAP_KEY_UPDATE_CAPABILITIES = "updateCapabilities";
 
     private static final String MAP_KEY_REPLACE_BLOCK_HTML = "html";
@@ -99,15 +105,20 @@ private void flushActionQueueToJS() {
     }
 
     private void setMediaFileUploadDataInJS(int state, int mediaId, String mediaUrl, float progress) {
-        setMediaFileUploadDataInJS(state, mediaId, mediaUrl, progress, MEDIA_SERVER_ID_UNKNOWN);
+        setMediaFileUploadDataInJS(state, mediaId, mediaUrl, progress, MEDIA_SERVER_ID_UNKNOWN, new WritableNativeMap());
     }
 
     private void setMediaFileUploadDataInJS(int state, int mediaId, String mediaUrl, float progress, int mediaServerId) {
+        setMediaFileUploadDataInJS(state, mediaId, mediaUrl, progress, mediaServerId, new WritableNativeMap());
+    }
+
+    private void setMediaFileUploadDataInJS(int state, int mediaId, String mediaUrl, float progress, int mediaServerId, WritableNativeMap metadata) {
         WritableMap writableMap = new WritableNativeMap();
         writableMap.putInt(MAP_KEY_MEDIA_FILE_STATE, state);
         writableMap.putInt(MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_ID, mediaId);
         writableMap.putString(MAP_KEY_MEDIA_FILE_UPLOAD_MEDIA_URL, mediaUrl);
         writableMap.putDouble(MAP_KEY_MEDIA_FILE_MEDIA_ACTION_PROGRESS, progress);
+        writableMap.putMap(MAP_KEY_MEDIA_FILE_METADATA, metadata);
         if (mediaServerId != MEDIA_SERVER_ID_UNKNOWN) {
             writableMap.putInt(MAP_KEY_MEDIA_FILE_MEDIA_SERVER_ID, mediaServerId);
         }
@@ -161,8 +172,8 @@ public void onMediaFileUploadProgress(int mediaId, float progress) {
     }
 
     @Override
-    public void onMediaFileUploadSucceeded(int mediaId, String mediaUrl, int mediaServerId) {
-        setMediaFileUploadDataInJS(MEDIA_UPLOAD_STATE_SUCCEEDED, mediaId, mediaUrl, 1, mediaServerId);
+    public void onMediaFileUploadSucceeded(int mediaId, String mediaUrl, int mediaServerId, WritableNativeMap metadata) {
+        setMediaFileUploadDataInJS(MEDIA_UPLOAD_STATE_SUCCEEDED, mediaId, mediaUrl, 1, mediaServerId, metadata);
     }
 
     @Override
@@ -170,6 +181,11 @@ public void onMediaFileUploadFailed(int mediaId) {
         setMediaFileUploadDataInJS(MEDIA_UPLOAD_STATE_FAILED, mediaId, null, 0);
     }
 
+    @Override
+    public void onMediaFileUploadPaused(int mediaId) {
+        setMediaFileUploadDataInJS(MEDIA_UPLOAD_STATE_PAUSED, mediaId, null, 0);
+    }
+
     // Media file save events emitter
     @Override
     public void onSaveMediaFileClear(String mediaId) {
@@ -215,6 +231,12 @@ public void sendToJSFeaturedImageId(int mediaId) {
         queueActionToJS(EVENT_FEATURED_IMAGE_ID_NATIVE_UPDATED, writableMap);
     }
 
+    public void onConnectionStatusChange(boolean isConnected) {
+        WritableMap writableMap = new WritableNativeMap();
+        writableMap.putBoolean(MAP_KEY_IS_CONNECTED, isConnected);
+        queueActionToJS(EVENT_CONNECTION_STATUS_CHANGE, writableMap);
+    }
+
     @Override public void onReplaceMediaFilesEditedBlock(String mediaFiles, String blockId) {
         WritableMap writableMap = new WritableNativeMap();
         writableMap.putString(MAP_KEY_REPLACE_BLOCK_HTML, mediaFiles);
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergJsException.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergJsException.kt
new file mode 100644
index 00000000000000..243c308b5c6700
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergJsException.kt
@@ -0,0 +1,61 @@
+package org.wordpress.mobile.WPAndroidGlue
+
+import com.facebook.react.bridge.ReadableMap
+
+data class JsExceptionStackTraceElement (
+    val fileName: String?,
+    val lineNumber: Int?,
+    val colNumber: Int?,
+    val function: String,
+)
+class GutenbergJsException (
+    val type: String,
+    val message: String,
+    var stackTrace: List<JsExceptionStackTraceElement>,
+    val context: Map<String, Any> = emptyMap(),
+    val tags: Map<String,String> = emptyMap(),
+    val isHandled: Boolean,
+    val handledBy: String
+) {
+
+    companion object {
+        @JvmStatic
+        fun fromReadableMap(rawException: ReadableMap): GutenbergJsException {
+            val type: String = rawException.getString("type") ?: ""
+            val message: String = rawException.getString("message") ?: ""
+
+            val stackTrace: List<JsExceptionStackTraceElement> = rawException.getArray("stacktrace")?.let {
+                (0 until it.size()).mapNotNull { index ->
+                    val stackTraceElement = it.getMap(index)
+                    stackTraceElement?.let {
+                        val stackTraceFunction = stackTraceElement.getString("function")
+                        stackTraceFunction?.let {
+                            JsExceptionStackTraceElement(
+                                stackTraceElement.getString("filename"),
+                                if (stackTraceElement.hasKey("lineno")) stackTraceElement.getInt("lineno") else null,
+                                if (stackTraceElement.hasKey("colno")) stackTraceElement.getInt("colno") else null,
+                                stackTraceFunction
+                            )
+                        }
+                    }
+                }
+            } ?: emptyList()
+
+            val context: Map<String, Any> = rawException.getMap("context")?.toHashMap() ?: emptyMap()
+            val tags: Map<String, String> = rawException.getMap("tags")?.toHashMap()?.mapValues { it.value.toString() } ?: emptyMap()
+            val isHandled: Boolean = rawException.getBoolean("isHandled")
+            val handledBy: String = rawException.getString("handledBy") ?: ""
+
+            return GutenbergJsException(
+                type,
+                message,
+                stackTrace,
+                context,
+                tags,
+                isHandled,
+                handledBy
+            )
+        }
+    }
+}
+
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 7185ce82c07979..fd30b71e0ff951 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -8,14 +8,17 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableContactInfoBlock: Boolean,
     val enableLayoutGridBlock: Boolean,
     val enableTiledGalleryBlock: Boolean,
+    val enableVideoPressBlock: Boolean,
+    val enableVideoPressV5Support: Boolean,
     val enableFacebookEmbed: Boolean,
     val enableInstagramEmbed: Boolean,
     val enableLoomEmbed: Boolean,
     val enableSmartframeEmbed: Boolean,
-    val enableMediaFilesCollectionBlocks: Boolean,
     val enableMentions: Boolean,
     val enableXPosts: Boolean,
     val enableUnsupportedBlockEditor: Boolean,
+    val enableSupportSection: Boolean,
+    val enableOnlyCoreBlocks: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
     val isAudioBlockMediaUploadEnabled: Boolean,
     val shouldUseFastImage: Boolean,
@@ -51,12 +54,6 @@ data class GutenbergProps @JvmOverloads constructor(
                     ?.let { putSerializable(PROP_FEATURES, it) }
             theme.getSerializable(PROP_IS_FSE_THEME)
                     ?.let { putSerializable(PROP_IS_FSE_THEME, it) }
-            theme.getSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS)
-                    ?.let { putSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS, it) }
-            theme.getSerializable(PROP_QUOTE_BLOCK_V2)
-                    ?.let { putSerializable(PROP_QUOTE_BLOCK_V2, it) }
-            theme.getSerializable(PROP_LIST_BLOCK_V2)
-                    ?.let { putSerializable(PROP_LIST_BLOCK_V2, it) }
         }
     }
 
@@ -66,7 +63,8 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_CONTACT_INFO_BLOCK, enableContactInfoBlock)
         putBoolean(PROP_CAPABILITIES_LAYOUT_GRID_BLOCK, enableLayoutGridBlock)
         putBoolean(PROP_CAPABILITIES_TILED_GALLERY_BLOCK, enableTiledGalleryBlock)
-        putBoolean(PROP_CAPABILITIES_MEDIAFILES_COLLECTION_BLOCK, enableMediaFilesCollectionBlocks)
+        putBoolean(PROP_CAPABILITIES_VIDEOPRESS_BLOCK, enableVideoPressBlock)
+        putBoolean(PROP_CAPABILITIES_VIDEOPRESS_V5_SUPPORT, enableVideoPressV5Support)
         putBoolean(PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, enableUnsupportedBlockEditor)
         putBoolean(PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR, canEnableUnsupportedBlockEditor)
         putBoolean(PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED, isAudioBlockMediaUploadEnabled)
@@ -76,6 +74,8 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK, enableInstagramEmbed)
         putBoolean(PROP_CAPABILITIES_LOOM_EMBED_BLOCK, enableLoomEmbed)
         putBoolean(PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK, enableSmartframeEmbed)
+        putBoolean(PROP_CAPABILITIES_SUPPORT_SECTION, enableSupportSection)
+        putBoolean(PROP_CAPABILITIES_ONLY_CORE_BLOCKS, enableOnlyCoreBlocks)
     }
 
     companion object {
@@ -86,8 +86,6 @@ data class GutenbergProps @JvmOverloads constructor(
                     content?.let { putString(PROP_INITIAL_DATA, it) }
                 }
 
-        private const val PROP_INITIAL_DATA = "initialData"
-        private const val PROP_INITIAL_TITLE = "initialTitle"
         private const val PROP_INITIAL_HTML_MODE_ENABLED = "initialHtmlModeEnabled"
         private const val PROP_POST_TYPE = "postType"
         private const val PROP_HOST_APP_NAMESPACE = "hostAppNamespace"
@@ -95,23 +93,23 @@ data class GutenbergProps @JvmOverloads constructor(
         private const val PROP_TRANSLATIONS = "translations"
         private const val PROP_COLORS = "colors"
         private const val PROP_GRADIENTS = "gradients"
-        private const val PROP_STYLES = "rawStyles"
-        private const val PROP_FEATURES = "rawFeatures"
         private const val PROP_IS_FSE_THEME = "isFSETheme"
-        private const val PROP_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks"
-        private const val PROP_QUOTE_BLOCK_V2 = "quoteBlockV2"
-        private const val PROP_LIST_BLOCK_V2 = "listBlockV2"
 
+        const val PROP_INITIAL_TITLE = "initialTitle"
+        const val PROP_INITIAL_DATA = "initialData"
+        const val PROP_STYLES = "rawStyles"
+        const val PROP_FEATURES = "rawFeatures"
         const val PROP_LOCALE = "locale"
         const val PROP_CAPABILITIES = "capabilities"
         const val PROP_CAPABILITIES_CONTACT_INFO_BLOCK = "contactInfoBlock"
         const val PROP_CAPABILITIES_LAYOUT_GRID_BLOCK = "layoutGridBlock"
         const val PROP_CAPABILITIES_TILED_GALLERY_BLOCK = "tiledGalleryBlock"
+        const val PROP_CAPABILITIES_VIDEOPRESS_BLOCK = "videoPressBlock"
+        const val PROP_CAPABILITIES_VIDEOPRESS_V5_SUPPORT = "videoPressV5Support"
         const val PROP_CAPABILITIES_FACEBOOK_EMBED_BLOCK = "facebookEmbed"
         const val PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK = "instagramEmbed"
         const val PROP_CAPABILITIES_LOOM_EMBED_BLOCK = "loomEmbed"
         const val PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK = "smartframeEmbed"
-        const val PROP_CAPABILITIES_MEDIAFILES_COLLECTION_BLOCK = "mediaFilesCollectionBlock"
         const val PROP_CAPABILITIES_MENTIONS = "mentions"
         const val PROP_CAPABILITIES_XPOSTS = "xposts"
         const val PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR = "unsupportedBlockEditor"
@@ -119,6 +117,8 @@ data class GutenbergProps @JvmOverloads constructor(
         const val PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED = "isAudioBlockMediaUploadEnabled"
         const val PROP_CAPABILITIES_SHOULD_USE_FASTIMAGE = "shouldUseFastImage"
         const val PROP_CAPABILITIES_REUSABLE_BLOCK = "reusableBlock"
+        const val PROP_CAPABILITIES_SUPPORT_SECTION = "supportSection"
+        const val PROP_CAPABILITIES_ONLY_CORE_BLOCKS = "onlyCoreBlocks"
 
         /**
          * Android converts some new language codes to older, deprecated ones, to preserve
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
index d225593d8eef4d..0ef03e5f1fbdae 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/Media.kt
@@ -15,7 +15,8 @@ data class Media(
     override val type: String,
     override val caption: String = "",
     override val title: String = "",
-    override val alt: String = ""
+    override val alt: String = "",
+    override val metadata: WritableMap = WritableNativeMap()
 ) : RNMedia {
     override fun toMap(): WritableMap = WritableNativeMap().apply {
         putInt("id", id)
@@ -24,6 +25,7 @@ data class Media(
         putString("caption", caption)
         putString("title", title)
         putString("alt", alt)
+        putMap("metadata", metadata)
     }
 
     companion object {
@@ -58,9 +60,11 @@ data class Media(
             mimeType: String?,
             caption: String?,
             title: String?,
+            alt: String?,
+            metadata: WritableNativeMap = WritableNativeMap()
         ): Media {
             val type = convertToType(mimeType)
-            return Media(id, url, type, caption ?: "", title ?: "")
+            return Media(id, url, type, caption ?: "", title ?: "", alt ?: "", metadata)
         }
     }
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/RequestExecutor.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/RequestExecutor.java
index 775bb0e2981904..d5dc433ad4b8cd 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/RequestExecutor.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/RequestExecutor.java
@@ -4,6 +4,9 @@
 
 import androidx.core.util.Consumer;
 
+import com.facebook.react.bridge.ReadableMap;
+
 public interface RequestExecutor {
-    void performRequest(String path, boolean enableCaching, Consumer<String> onSuccess, Consumer<Bundle> onError);
+    void performGetRequest(String path, boolean enableCaching, Consumer<String> onSuccess, Consumer<Bundle> onError);
+    void performPostRequest(String path, ReadableMap data, Consumer<String> onSuccess, Consumer<Bundle> onError);
 }
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
index 74236bb49bcd8c..4477dfc115b7c4 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -18,7 +18,9 @@
 import androidx.core.util.Pair;
 import androidx.fragment.app.Fragment;
 
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.brentvatne.react.ReactVideoPackage;
+import com.dylanvann.fastimage.FastImageViewPackage;
 import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
 import com.facebook.imagepipeline.backends.okhttp3.OkHttpImagePipelineConfigFactory;
 import com.facebook.imagepipeline.core.ImagePipelineConfig;
@@ -27,38 +29,35 @@
 import com.facebook.react.ReactPackage;
 import com.facebook.react.ReactRootView;
 import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.JSIModulePackage;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.common.LifecycleState;
 import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 import com.facebook.react.shell.MainPackageConfig;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
 import com.horcrux.svg.SvgPackage;
-import com.BV.LinearGradient.LinearGradientPackage;
 import com.reactnativecommunity.clipboard.ClipboardPackage;
 import com.reactnativecommunity.slider.ReactSliderPackage;
-import org.linusu.RNGetRandomValuesPackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
-import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import com.swmansion.gesturehandler.RNGestureHandlerPackage;
-import com.swmansion.reanimated.ReanimatedJSIModulePackage;
 import com.swmansion.reanimated.ReanimatedPackage;
 import com.swmansion.rnscreens.RNScreensPackage;
 import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
-import org.reactnative.maskedview.RNCMaskedViewPackage;
-import com.dylanvann.fastimage.FastImageViewPackage;
 
+import org.linusu.RNGetRandomValuesPackage;
+import org.reactnative.maskedview.RNCMaskedViewPackage;
 import org.wordpress.android.util.AppLog;
 import org.wordpress.android.util.AppLog.T;
 import org.wordpress.mobile.ReactNativeAztec.ReactAztecPackage;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.BuildConfig;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent;
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.LogExceptionCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaSelectedCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ReplaceUnsupportedBlockCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.RNMedia;
@@ -75,7 +74,6 @@
 import java.util.concurrent.CountDownLatch;
 import java.util.concurrent.TimeUnit;
 
-import im.shimo.react.prompt.RNPromptPackage;
 import okhttp3.OkHttpClient;
 
 
@@ -95,21 +93,28 @@ public class WPAndroidGlueCode {
 
     private OnMediaLibraryButtonListener mOnMediaLibraryButtonListener;
     private OnReattachMediaUploadQueryListener mOnReattachMediaUploadQueryListener;
-    private OnReattachMediaSavingQueryListener mOnReattachMediaSavingQueryListener;
     private OnSetFeaturedImageListener mOnSetFeaturedImageListener;
     private OnEditorMountListener mOnEditorMountListener;
     private OnEditorAutosaveListener mOnEditorAutosaveListener;
     private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener;
     private OnMediaEditorListener mOnMediaEditorListener;
     private OnGutenbergDidRequestUnsupportedBlockFallbackListener mOnGutenbergDidRequestUnsupportedBlockFallbackListener;
+    private OnGutenbergDidRequestEmbedFullscreenPreviewListener mOnGutenbergDidRequestEmbedFullscreenPreviewListener;
     private OnGutenbergDidSendButtonPressedActionListener mOnGutenbergDidSendButtonPressedActionListener;
     private ReplaceUnsupportedBlockCallback mReplaceUnsupportedBlockCallback;
-    private OnMediaFilesCollectionBasedBlockEditorListener mOnMediaFilesCollectionBasedBlockEditorListener;
     private OnFocalPointPickerTooltipShownEventListener mOnFocalPointPickerTooltipShownListener;
     private OnGutenbergDidRequestPreviewListener mOnGutenbergDidRequestPreviewListener;
     private OnBlockTypeImpressionsEventListener mOnBlockTypeImpressionsEventListener;
     private OnCustomerSupportOptionsListener mOnCustomerSupportOptionsListener;
     private OnSendEventToHostListener mOnSendEventToHostListener;
+
+    private OnToggleUndoButtonListener mOnToggleUndoButtonListener;
+
+    private OnToggleRedoButtonListener mOnToggleRedoButtonListener;
+    private OnConnectionStatusEventListener mOnConnectionStatusEventListener;
+    private OnBackHandlerEventListener mOnBackHandlerEventListener;
+
+    private OnLogExceptionListener mOnLogExceptionListener;
     private boolean mIsEditorMounted;
 
     private String mContentHtml = "";
@@ -131,6 +136,7 @@ public class WPAndroidGlueCode {
     private boolean mIsDarkMode;
     private Consumer<Exception> mExceptionLogger;
     private Consumer<String> mBreadcrumbLogger;
+    private boolean mShouldHandleBackPress = false;
 
     public void onCreate(Context context) {
         SoLoader.init(context, /* native exopackage */ false);
@@ -144,6 +150,10 @@ public boolean hasReactContext() {
         return mReactContext != null;
     }
 
+    public boolean shouldHandleBackPress() {
+        return mShouldHandleBackPress;
+    }
+
     public boolean isContentChanged() {
         return mContentChanged;
     }
@@ -168,14 +178,6 @@ public interface OnMediaLibraryButtonListener {
         void onOtherMediaButtonClicked(String mediaSource, boolean allowMultipleSelection);
     }
 
-    public interface OnMediaFilesCollectionBasedBlockEditorListener {
-        void onRequestMediaFilesEditorLoad(ArrayList<Object> mediaFiles, String blockId);
-        void onCancelUploadForMediaCollection(ArrayList<Object> mediaFiles);
-        void onRetryUploadForMediaCollection(ArrayList<Object> mediaFiles);
-        void onCancelSaveForMediaCollection(ArrayList<Object> mediaFiles);
-        void onMediaFilesBlockReplaceSync(ArrayList<Object> mediaFiles, String blockId);
-    }
-
     public interface OnImageFullscreenPreviewListener {
         void onImageFullscreenPreviewClicked(String mediaUrl);
     }
@@ -184,10 +186,6 @@ public interface OnReattachMediaUploadQueryListener {
         void onQueryCurrentProgressForUploadingMedia();
     }
 
-    public interface OnReattachMediaSavingQueryListener {
-        void onQueryCurrentProgressForSavingMedia();
-    }
-
     public interface OnSetFeaturedImageListener {
         void onSetFeaturedImageButtonClicked(int mediaId);
     }
@@ -212,6 +210,10 @@ public interface OnGutenbergDidRequestUnsupportedBlockFallbackListener {
         void gutenbergDidRequestUnsupportedBlockFallback(UnsupportedBlock unsupportedBlock);
     }
 
+    public interface OnGutenbergDidRequestEmbedFullscreenPreviewListener {
+        void gutenbergDidRequestEmbedFullscreenPreview(String html, String title);
+    }
+
     public interface OnGutenbergDidSendButtonPressedActionListener {
         void gutenbergDidSendButtonPressedAction(String buttonType);
     }
@@ -245,6 +247,26 @@ public interface OnSendEventToHostListener {
         void onSendEventToHost(String eventName, Map<String, Object> properties);
     }
 
+    public interface OnToggleUndoButtonListener {
+        void onToggleUndoButton(boolean isDisabled);
+    }
+
+    public interface OnToggleRedoButtonListener {
+        void onToggleRedoButton(boolean isDisabled);
+    }
+
+    public interface OnConnectionStatusEventListener {
+        boolean onRequestConnectionStatus();
+    }
+
+    public interface OnBackHandlerEventListener {
+        void onBackHandler();
+    }
+
+    public interface OnLogExceptionListener {
+        void onLogException(GutenbergJsException exception, LogExceptionCallback logExceptionCallback);
+    }
+
     public void mediaSelectionCancelled() {
         mAppendsMultipleSelectedToSiblingBlocks = false;
     }
@@ -334,12 +356,6 @@ public void mediaUploadSync(MediaSelectedCallback mediaSelectedCallback) {
                 mOnReattachMediaUploadQueryListener.onQueryCurrentProgressForUploadingMedia();
             }
 
-            @Override
-            public void mediaSaveSync(MediaSelectedCallback mediaSelectedCallback) {
-                mMediaSelectedCallback = mediaSelectedCallback;
-                mOnReattachMediaSavingQueryListener.onQueryCurrentProgressForSavingMedia();
-            }
-
             @Override
             public void requestImageFailedRetryDialog(int mediaId) {
                 mOnMediaLibraryButtonListener.onRetryUploadForMediaClicked(mediaId);
@@ -432,8 +448,13 @@ public void requestMediaPickFrom(String mediaSource,
             }
 
             @Override
-            public void performRequest(String pathFromJS, boolean enableCaching, Consumer<String> onSuccess, Consumer<Bundle> onError) {
-                mRequestExecutor.performRequest(pathFromJS, enableCaching, onSuccess, onError);
+            public void performGetRequest(String pathFromJS, boolean enableCaching, Consumer<String> onSuccess, Consumer<Bundle> onError) {
+                mRequestExecutor.performGetRequest(pathFromJS, enableCaching, onSuccess, onError);
+            }
+
+            @Override
+            public void performPostRequest(String pathFromJS, ReadableMap data, Consumer<String> onSuccess, Consumer<Bundle> onError) {
+                mRequestExecutor.performPostRequest(pathFromJS, data, onSuccess, onError);
             }
 
             @Override
@@ -459,6 +480,11 @@ public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockC
                         gutenbergDidRequestUnsupportedBlockFallback(new UnsupportedBlock(blockId, blockName, blockTitle, content));
             }
 
+            public void requestEmbedFullscreenPreview(String html, String title) {
+                mOnGutenbergDidRequestEmbedFullscreenPreviewListener.
+                        gutenbergDidRequestEmbedFullscreenPreview(html, title);
+            }
+
             @Override
             public void gutenbergDidSendButtonPressedAction(String buttonType) {
                 mOnGutenbergDidSendButtonPressedActionListener.gutenbergDidSendButtonPressedAction(buttonType);
@@ -473,40 +499,6 @@ public void onShowUserSuggestions(Consumer<String> onResult) {
                 mShowSuggestionsUtil.showXpostSuggestions(onResult);
             }
 
-            @Override
-            public void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId) {
-                mOnMediaFilesCollectionBasedBlockEditorListener
-                        .onRequestMediaFilesEditorLoad(mediaFiles.toArrayList(), blockId);
-            }
-
-            @Override
-            public void requestMediaFilesFailedRetryDialog(ReadableArray mediaFiles) {
-                mOnMediaFilesCollectionBasedBlockEditorListener.onRetryUploadForMediaCollection(
-                        mediaFiles.toArrayList()
-                );
-            }
-
-            @Override
-            public void requestMediaFilesUploadCancelDialog(ReadableArray mediaFiles) {
-                mOnMediaFilesCollectionBasedBlockEditorListener.onCancelUploadForMediaCollection(
-                        mediaFiles.toArrayList()
-                );
-            }
-
-            @Override
-            public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
-                mOnMediaFilesCollectionBasedBlockEditorListener.onCancelSaveForMediaCollection(
-                        mediaFiles.toArrayList()
-                );
-            }
-
-            @Override
-            public void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId) {
-                mOnMediaFilesCollectionBasedBlockEditorListener.onMediaFilesBlockReplaceSync(
-                    mediaFiles.toArrayList(), blockId
-                );
-            }
-
             @Override
             public void setFocalPointPickerTooltipShown(boolean showTooltip) {
                 mOnFocalPointPickerTooltipShownListener.onSetFocalPointPickerTooltipShown(showTooltip);
@@ -560,6 +552,27 @@ public void requestGotoCustomerSupportOptions() {
             public void sendEventToHost(String eventName, ReadableMap properties) {
                 mOnSendEventToHostListener.onSendEventToHost(eventName, properties.toHashMap());
             }
+
+            @Override
+            public void toggleUndoButton(boolean isDisabled) {
+                mOnToggleUndoButtonListener.onToggleUndoButton(isDisabled);
+            }
+
+            @Override
+            public void toggleRedoButton(boolean isDisabled) {
+                mOnToggleRedoButtonListener.onToggleRedoButton(isDisabled);
+            }
+
+            @Override
+            public void requestConnectionStatus(ConnectionStatusCallback connectionStatusCallback) {
+                boolean isConnected = mOnConnectionStatusEventListener.onRequestConnectionStatus();
+                connectionStatusCallback.onRequestConnectionStatus(isConnected);
+            }
+
+            @Override
+            public void logException(GutenbergJsException exception, LogExceptionCallback logExceptionCallback) {
+                mOnLogExceptionListener.onLogException(exception, logExceptionCallback);
+            }
         }, mIsDarkMode);
 
         return Arrays.asList(
@@ -583,19 +596,12 @@ public ReactInstanceManager getReactInstanceManager(ReactApplicationContext reac
                         return mReactInstanceManager;
                     }
                 },
-                new RNPromptPackage(),
                 new RNCWebViewPackage(),
                 new ClipboardPackage(),
                 new FastImageViewPackage(),
                 mRnReactNativeGutenbergBridgePackage);
     }
 
-    protected JSIModulePackage getJSIModulePackage() {
-        // In the future, once we support more JSI modules, we would need to provide our own JSIModulePackage and
-        // include Reanimated.
-        return new ReanimatedJSIModulePackage();
-    }
-
     private MainPackageConfig getMainPackageConfig(ImagePipelineConfig imagePipelineConfig) {
         return new MainPackageConfig.Builder().setFrescoConfig(imagePipelineConfig).build();
     }
@@ -615,9 +621,13 @@ public void onCreateView(Context initContext,
         mIsDarkMode = gutenbergProps.isDarkMode();
         mExceptionLogger = exceptionLogger;
         mBreadcrumbLogger = breadcrumbLogger;
-        mReactRootView = new RNGestureHandlerEnabledRootView(new MutableContextWrapper(initContext));
+        mReactRootView = new ReactRootView(new MutableContextWrapper(initContext));
         mReactRootView.setBackgroundColor(colorBackground);
 
+        // Workaround to prevent saving large RN view hierarchies that lead to a `TransactionTooLargeException`
+        // Ref: https://github.com/wordpress-mobile/WordPress-Android/issues/9685#issuecomment-1908452392
+        mReactRootView.setSaveFromParentEnabled(false);
+
         ReactInstanceManagerBuilder builder =
                 ReactInstanceManager.builder()
                                     .setApplication(application)
@@ -625,7 +635,6 @@ public void onCreateView(Context initContext,
                                     .addPackages(getPackages())
                                     .setUseDeveloperSupport(isDebug)
                                     .setJavaScriptExecutorFactory(new HermesExecutorFactory())
-                                    .setJSIModulesPackage(getJSIModulePackage())
                                     .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);
         if (BuildConfig.SHOULD_ATTACH_JS_BUNDLE) {
             builder.setBundleAssetName("index.android.bundle");
@@ -642,7 +651,6 @@ public void onCreateView(Context initContext,
     public void attachToContainer(ViewGroup viewGroup,
                                   OnMediaLibraryButtonListener onMediaLibraryButtonListener,
                                   OnReattachMediaUploadQueryListener onReattachMediaUploadQueryListener,
-                                  OnReattachMediaSavingQueryListener onReattachMediaSavingQueryListener,
                                   OnSetFeaturedImageListener onSetFeaturedImageListener,
                                   OnEditorMountListener onEditorMountListener,
                                   OnEditorAutosaveListener onEditorAutosaveListener,
@@ -651,21 +659,25 @@ public void attachToContainer(ViewGroup viewGroup,
                                   OnImageFullscreenPreviewListener onImageFullscreenPreviewListener,
                                   OnMediaEditorListener onMediaEditorListener,
                                   OnGutenbergDidRequestUnsupportedBlockFallbackListener onGutenbergDidRequestUnsupportedBlockFallbackListener,
+                                  OnGutenbergDidRequestEmbedFullscreenPreviewListener onGutenbergDidRequestEmbedFullscreenPreviewListener,
                                   OnGutenbergDidSendButtonPressedActionListener onGutenbergDidSendButtonPressedActionListener,
                                   ShowSuggestionsUtil showSuggestionsUtil,
-                                  OnMediaFilesCollectionBasedBlockEditorListener onMediaFilesCollectionBasedBlockEditorListener,
                                   OnFocalPointPickerTooltipShownEventListener onFocalPointPickerTooltipListener,
                                   OnGutenbergDidRequestPreviewListener onGutenbergDidRequestPreviewListener,
                                   OnBlockTypeImpressionsEventListener onBlockTypeImpressionsEventListener,
                                   OnCustomerSupportOptionsListener onCustomerSupportOptionsListener,
                                   OnSendEventToHostListener onSendEventToHostListener,
+                                  OnToggleUndoButtonListener onToggleUndoButtonListener,
+                                  OnToggleRedoButtonListener onToggleRedoButtonListener,
+                                  OnConnectionStatusEventListener onConnectionStatusEventListener,
+                                  OnBackHandlerEventListener onBackHandlerEventListener,
+                                  OnLogExceptionListener onLogExceptionListener,
                                   boolean isDarkMode) {
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
         contextWrapper.setBaseContext(viewGroup.getContext());
 
         mOnMediaLibraryButtonListener = onMediaLibraryButtonListener;
         mOnReattachMediaUploadQueryListener = onReattachMediaUploadQueryListener;
-        mOnReattachMediaSavingQueryListener = onReattachMediaSavingQueryListener;
         mOnSetFeaturedImageListener = onSetFeaturedImageListener;
         mOnEditorMountListener = onEditorMountListener;
         mOnEditorAutosaveListener = onEditorAutosaveListener;
@@ -673,14 +685,19 @@ public void attachToContainer(ViewGroup viewGroup,
         mOnImageFullscreenPreviewListener = onImageFullscreenPreviewListener;
         mOnMediaEditorListener = onMediaEditorListener;
         mOnGutenbergDidRequestUnsupportedBlockFallbackListener = onGutenbergDidRequestUnsupportedBlockFallbackListener;
+        mOnGutenbergDidRequestEmbedFullscreenPreviewListener = onGutenbergDidRequestEmbedFullscreenPreviewListener;
         mOnGutenbergDidSendButtonPressedActionListener = onGutenbergDidSendButtonPressedActionListener;
         mShowSuggestionsUtil = showSuggestionsUtil;
-        mOnMediaFilesCollectionBasedBlockEditorListener = onMediaFilesCollectionBasedBlockEditorListener;
         mOnFocalPointPickerTooltipShownListener = onFocalPointPickerTooltipListener;
         mOnGutenbergDidRequestPreviewListener = onGutenbergDidRequestPreviewListener;
         mOnBlockTypeImpressionsEventListener = onBlockTypeImpressionsEventListener;
         mOnCustomerSupportOptionsListener = onCustomerSupportOptionsListener;
         mOnSendEventToHostListener = onSendEventToHostListener;
+        mOnToggleUndoButtonListener = onToggleUndoButtonListener;
+        mOnToggleRedoButtonListener = onToggleRedoButtonListener;
+        mOnConnectionStatusEventListener = onConnectionStatusEventListener;
+        mOnBackHandlerEventListener = onBackHandlerEventListener;
+        mOnLogExceptionListener = onLogExceptionListener;
 
         sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener);
 
@@ -716,6 +733,7 @@ private void refocus() {
     }
 
     public void onPause(Activity activity) {
+        mShouldHandleBackPress = false;
         if (mReactInstanceManager != null) {
             // get the focused view so we re-focus it later if needed. WeakReference so we don't leak it.
             mLastFocusedView = new WeakReference<>(mReactRootView.findFocus());
@@ -725,13 +743,14 @@ public void onPause(Activity activity) {
     }
 
     public void onResume(final Fragment fragment, final Activity activity) {
+        mShouldHandleBackPress = true;
         if (mReactInstanceManager != null) {
             mReactInstanceManager.onHostResume(activity,
                     new DefaultHardwareBackBtnHandler() {
                         @Override
                         public void invokeDefaultOnBackPressed() {
                             if (fragment.isAdded()) {
-                                activity.onBackPressed();
+                                mOnBackHandlerEventListener.onBackHandler();
                             }
                         }
                     });
@@ -739,11 +758,13 @@ public void invokeDefaultOnBackPressed() {
     }
 
     public void onDetach(Activity activity) {
+        mShouldHandleBackPress = false;
         mReactInstanceManager.onHostDestroy(activity);
         mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().notifyModalClosed();
     }
 
     public void onDestroy(Activity activity) {
+        mShouldHandleBackPress = false;
         if (mReactRootView != null) {
             mReactRootView.unmountReactApplication();
             mReactRootView = null;
@@ -759,6 +780,12 @@ public void onDestroy(Activity activity) {
         }
     }
 
+    public void onBackPressed() {
+        if (mReactInstanceManager != null) {
+            mReactInstanceManager.onBackPressed();
+        }
+    }
+
     public void showDevOptionsDialog() {
         mReactInstanceManager.showDevOptionsDialog();
     }
@@ -811,6 +838,18 @@ public void showEditorHelp() {
         mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().showEditorHelp();
     }
 
+    public void onUndoPressed() {
+        mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().onUndoPressed();
+    }
+
+    public void onRedoPressed() {
+        mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().onRedoPressed();
+    }
+
+    public void onContentUpdate(String content) {
+        mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().onContentUpdate(content);
+    }
+
     public void setTitle(String title) {
         mTitleInitialized = true;
         mTitle = title;
@@ -996,6 +1035,10 @@ public void toggleEditorMode(boolean htmlModeEnabled) {
         mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().toggleEditorMode();
     }
 
+    public void sendToJSPostSaveEvent() {
+        mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().sendToJSPostSaveEvent();
+    }
+
     public void appendMediaFiles(ArrayList<Media> mediaList) {
         if (isMediaSelectedCallbackRegistered() && mMediaPickedByUserOnBlock) {
             mMediaPickedByUserOnBlock = false;
@@ -1068,8 +1111,13 @@ public void mediaFileUploadFailed(final int mediaId) {
         mDeferredEventEmitter.onMediaFileUploadFailed(mediaId);
     }
 
-    public void mediaFileUploadSucceeded(final int mediaId, final String mediaUrl, final int serverMediaId) {
-        mDeferredEventEmitter.onMediaFileUploadSucceeded(mediaId, mediaUrl, serverMediaId);
+    public void mediaFileUploadPaused(final int mediaId) {
+        mDeferredEventEmitter.onMediaFileUploadPaused(mediaId);
+    }
+
+    public void mediaFileUploadSucceeded(final int mediaId, final String mediaUrl, final int serverMediaId, final
+                                         WritableNativeMap metadata) {
+        mDeferredEventEmitter.onMediaFileUploadSucceeded(mediaId, mediaUrl, serverMediaId, metadata);
     }
 
     public void clearMediaFileURL(final int mediaId) {
@@ -1104,6 +1152,10 @@ public void sendToJSFeaturedImageId(int mediaId) {
         mDeferredEventEmitter.sendToJSFeaturedImageId(mediaId);
     }
 
+    public void connectionStatusChange(boolean isConnected) {
+        mDeferredEventEmitter.onConnectionStatusChange(isConnected);
+    }
+
     public void replaceUnsupportedBlock(String content, String blockId) {
         if (mReplaceUnsupportedBlockCallback != null) {
             mReplaceUnsupportedBlockCallback.replaceUnsupportedBlock(content, blockId);
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml
new file mode 100644
index 00000000000000..fbbecba7d29ea8
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/appbar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignParentTop="true">
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/status_bar_color"
+            app:titleTextColor="@android:color/white"
+            app:contentInsetEnd="@dimen/toolbar_content_offset_end"
+            app:contentInsetLeft="@dimen/toolbar_content_offset"
+            app:contentInsetRight="@dimen/toolbar_content_offset_end"
+            app:contentInsetStart="@dimen/toolbar_content_offset" />
+
+    </com.google.android.material.appbar.AppBarLayout>
+
+    <WebView
+        android:id="@+id/embed_web_view"
+        android:layout_below="@+id/appbar"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="visible"/>
+
+    <ProgressBar
+        android:id="@+id/progress_bar"
+        style="@android:style/Widget.ProgressBar.Horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/progress_bar_height"
+        android:layout_alignTop="@+id/embed_web_view"
+        android:indeterminate="false"
+        android:progressDrawable="@drawable/progressbar_horizontal"/>
+
+</RelativeLayout>
diff --git a/packages/react-native-bridge/android/settings.gradle b/packages/react-native-bridge/android/settings.gradle
index d7374ea3743bbf..2863d3bb065127 100644
--- a/packages/react-native-bridge/android/settings.gradle
+++ b/packages/react-native-bridge/android/settings.gradle
@@ -1,10 +1,12 @@
 pluginManagement {
-    gradle.ext.kotlinVersion = '1.5.32'
+    gradle.ext.kotlinVersion = '1.8.0'
+    gradle.ext.agpVersion = '8.5.1'
+    gradle.ext.automatticPublishToS3Version = '0.8.0'
 
     plugins {
-        id "com.android.library" version "7.2.1"
+        id "com.android.library" version gradle.ext.agpVersion
         id "org.jetbrains.kotlin.android" version gradle.ext.kotlinVersion
-        id "com.automattic.android.publish-to-s3" version "0.7.0"
+        id "com.automattic.android.publish-to-s3" version gradle.ext.automatticPublishToS3Version
     }
     repositories {
         maven {
@@ -22,11 +24,10 @@ pluginManagement {
 rootProject.name = '@wordpress_react-native-bridge'
 
 include ':react-native-bridge'
-include ':@wordpress_react-native-aztec'
-project(':@wordpress_react-native-aztec').projectDir = new File(rootProject.projectDir, '../../react-native-aztec/android')
-include ':react-native-aztec'
-project(':react-native-aztec').projectDir = new File(rootProject.projectDir, '../../../packages/react-native-aztec/android')
 
 if (hasProperty("willPublishReactNativeBridgeBinary")) {
     assert file("./react-native-bridge/build/assets/index.android.bundle").exists() : "index.android.bundle is necessary to publish a new version!"
+} else {
+    include ':@wordpress_react-native-aztec'
+    project(':@wordpress_react-native-aztec').projectDir = new File(rootProject.projectDir, '../../react-native-aztec/android')
 }
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/content-functions.js b/packages/react-native-bridge/common/gutenberg-web-single-block/content-functions.js
index d6e7d51375d441..611701c237b095 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/content-functions.js
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/content-functions.js
@@ -25,19 +25,12 @@ window.getHTMLPostContent = () => {
 };
 
 window.insertBlock = ( blockHTML ) => {
-	const { blockEditorSelect, blockEditorDispatch } =
-		window.getBlockEditorStore();
-
 	// Setup the editor with the inserted block.
 	const post = window.wp.data.select( 'core/editor' ).getCurrentPost();
 	window.wp.data
 		.dispatch( 'core/editor' )
 		.setupEditor( post, { content: blockHTML } );
 
-	// Select the first block.
-	const clientId = blockEditorSelect.getBlocks()[ 0 ].clientId;
-	blockEditorDispatch.selectBlock( clientId );
-
 	window.contentIncerted = true;
 };
 
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js
index 0cfa0e9985fa02..1a4f4422a47ba2 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js
@@ -1,59 +1,166 @@
-// Listeners for native context menu visibility changes.
-let isContextMenuVisible = false;
-const hideContextMenuListeners = [];
-
-window.onShowContextMenu = () => {
-	isContextMenuVisible = true;
-};
-window.onHideContextMenu = () => {
-	isContextMenuVisible = false;
-	while ( hideContextMenuListeners.length > 0 ) {
-		const listener = hideContextMenuListeners.pop();
-		listener();
-	}
-};
-
-/*
-This is a fix for a text selection quirk in the UBE. 
-It notifies the Android app to dismiss the text selection 
-context menu when certain menu items are tapped. This is 
-done via the 'hideTextSelectionContextMenu' method, which
-is sent back to the Android app, where the dismissal is
-then handle. See PR for further details: 
-https://github.com/WordPress/gutenberg/pull/34668
-*/
-window.addEventListener(
-	'click',
-	( event ) => {
-		const selected = document.getSelection();
-		if ( ! isContextMenuVisible || ! selected || ! selected.toString() ) {
-			return;
+/**
+ * Detects whether the user agent is Android.
+ *
+ * @return {boolean} Whether the user agent is Android.
+ */
+function isAndroid() {
+	return !! window.navigator.userAgent.match( /Android/ );
+}
+
+/**
+ * This is a fix for a text selection quirk in the UBE. It notifies the Android
+ * app to dismiss the text selection context menu when certain menu items are
+ * tapped. This is done via the 'hideTextSelectionContextMenu' method, which
+ * is sent back to the Android app, where the dismissal is then handle.
+ *
+ * @return {void}
+ * @see https://github.com/WordPress/gutenberg/pull/34668
+ */
+function manageTextSelectonContextMenu() {
+	// Listeners for native context menu visibility changes.
+	let isContextMenuVisible = false;
+	const hideContextMenuListeners = [];
+
+	window.onShowContextMenu = () => {
+		isContextMenuVisible = true;
+	};
+	window.onHideContextMenu = () => {
+		isContextMenuVisible = false;
+		while ( hideContextMenuListeners.length > 0 ) {
+			const listener = hideContextMenuListeners.pop();
+			listener();
 		}
+	};
 
-		// Check if the event is triggered by a dropdown
-		// toggle button.
-		const dropdownToggles = document.querySelectorAll(
-			'.components-dropdown-menu > button'
-		);
-		let currentToggle;
-		for ( const node of dropdownToggles.values() ) {
-			if ( node.contains( event.target ) ) {
-				currentToggle = node;
-				break;
+	window.addEventListener(
+		'click',
+		( event ) => {
+			const selected = document.getSelection();
+			if (
+				! isContextMenuVisible ||
+				! selected ||
+				! selected.toString()
+			) {
+				return;
 			}
-		}
 
-		// Hide text selection context menu when the click
-		// is triggered by a dropdown toggle.
-		//
-		// NOTE: The event propagation is prevented because
-		// it will be dispatched after the context menu
-		// is hidden.
-		if ( currentToggle ) {
-			event.stopPropagation();
-			hideContextMenuListeners.push( () => currentToggle.click() );
-			window.wpwebkit.hideTextSelectionContextMenu();
+			// Check if the event is triggered by a dropdown
+			// toggle button.
+			const dropdownToggles = document.querySelectorAll(
+				'.components-dropdown-menu > button'
+			);
+			let currentToggle;
+			for ( const node of dropdownToggles.values() ) {
+				if ( node.contains( event.target ) ) {
+					currentToggle = node;
+					break;
+				}
+			}
+
+			// Hide text selection context menu when the click
+			// is triggered by a dropdown toggle.
+			//
+			// NOTE: The event propagation is prevented because
+			// it will be dispatched after the context menu
+			// is hidden.
+			if ( currentToggle ) {
+				event.stopPropagation();
+				hideContextMenuListeners.push( () => currentToggle.click() );
+				window.wpwebkit.hideTextSelectionContextMenu();
+			}
+		},
+		true
+	);
+}
+
+if ( isAndroid() ) {
+	manageTextSelectonContextMenu();
+}
+
+function _toggleBlockSelectedClass( isBlockSelected ) {
+	const editor = document.querySelector( '#editor' );
+	if ( isBlockSelected ) {
+		editor.classList.add( 'is-block-selected' );
+	} else {
+		editor.classList.remove( 'is-block-selected' );
+	}
+}
+
+/** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
+
+/**
+ * Toggle the `is-block-selected` class on the editor container when a block is
+ * selected. This is used to hide the sidebar toggle button when a block is not
+ * selected.
+ *
+ * @param {WPDataRegistry} registry Data registry.
+ * @return {WPDataRegistry} Modified data registry.
+ */
+function toggleBlockSelectedStyles( registry ) {
+	return {
+		dispatch: ( namespace ) => {
+			const namespaceName =
+				typeof namespace === 'string' ? namespace : namespace.name;
+			const actions = { ...registry.dispatch( namespaceName ) };
+
+			const originalSelectBlockAction = actions.selectBlock;
+			actions.selectBlock = ( ...args ) => {
+				_toggleBlockSelectedClass( true );
+				return originalSelectBlockAction( ...args );
+			};
+
+			const originalClearSelectedBlockAction = actions.clearSelectedBlock;
+			actions.clearSelectedBlock = ( ...args ) => {
+				_toggleBlockSelectedClass( false );
+				return originalClearSelectedBlockAction( ...args );
+			};
+
+			return actions;
+		},
+	};
+}
+
+window.wp.data.use( toggleBlockSelectedStyles );
+
+// The editor-canvas iframe relies upon `srcdoc`, which does not trigger a
+// `load` event. Thus, we must poll for the iframe to be ready.
+let overrideAttempts = 0;
+const overrideInterval = setInterval( () => {
+	overrideAttempts++;
+	const overrideStyles = document.querySelector( '#editor-style-overrides' );
+	const canvasIframe = document.querySelector(
+		'iframe[name="editor-canvas"]'
+	);
+
+	if (
+		overrideStyles &&
+		canvasIframe &&
+		canvasIframe.contentDocument &&
+		canvasIframe.contentDocument.documentElement
+	) {
+		clearInterval( overrideInterval );
+
+		// Clone the editor styles so that they can be copied to the iframe, as
+		// elements within an iframe cannot be styled from the parent context.
+		const overrideStylesClone = overrideStyles.cloneNode( true );
+		overrideStylesClone.id = 'editor-styles-overrides-2';
+		// Append to document rather than the head, as React will remove this
+		// mutation.
+		canvasIframe.contentDocument.documentElement.appendChild(
+			overrideStylesClone
+		);
+
+		// Select the first block.
+		const { blockEditorSelect, blockEditorDispatch } =
+			window.getBlockEditorStore();
+		const firstBlock = blockEditorSelect.getBlocks()[ 0 ];
+		if ( firstBlock ) {
+			blockEditorDispatch.selectBlock( firstBlock.clientId );
 		}
-	},
-	true
-);
+	}
+
+	// Safeguard against an infinite loop.
+	if ( overrideAttempts > 100 ) {
+		clearInterval( overrideInterval );
+	}
+}, 300 );
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
index 7aa208abe55373..46782e944d0c34 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css
@@ -3,12 +3,33 @@
     display: none;
 }
 
+/* Remove header toolbar */
+.editor-header__toolbar {
+    display: none;
+}
+
+/* Hide all children of editor-header__settings */
+.editor-header__settings > * {
+    display: none;
+}
+
+/* Show only the interface-pinned-items container */
+.editor-header__settings > .interface-pinned-items {
+    display: block;
+}
+
+.components-button.editor-post-publish-panel__toggle.is-primary{
+    display: none;
+}
+
 /* Remove default block appender at the end of the post */
-.block-list-appender {
+.block-list-appender, .block-list-appender__toggle,
+.block-editor-inserter, .components-autocomplete__popover {
     display: none;
 }
 
-.edit-post-visual-editor__post-title-wrapper {
+.edit-post-visual-editor__post-title-wrapper,
+.editor-editor-canvas__post-title-wrapper {
     display: none;
 }
 
@@ -17,14 +38,27 @@
     display: none;
 }
 
-/*
- Hiddes the top bar header by setting its height to 0
- We can\'t remove it since the block toolbar is a child of it.
- */
+/* Remove block inserter popover */
+.block-editor-block-popover {
+    display: none;
+}
+
+/* Right align post header children as we will only display one child */
 .edit-post-header {
-    height: 0px;
-    padding: 0px;
-    overflow: hidden;
+	justify-content: flex-end;
+}
+
+/* Hide post controls unrelated to editing a single block */
+.edit-post-header__toolbar,
+.edit-post-layout .edit-post-header .edit-post-header__settings > *,
+.interface-pinned-items > * {
+	display: none;
+}
+
+/* Display the sidebar toggle button whenever a block is selected */
+.edit-post-layout .edit-post-header .edit-post-header__settings .interface-pinned-items,
+.is-block-selected .edit-post-header__settings .interface-pinned-items > button:first-child {
+	display: flex;
 }
 
 /* Move the block toolbar to the top */
@@ -36,6 +70,11 @@
     top: 0px;
 }
 
+/* Hide block actions unrelated to editing a single block */
+.block-editor-block-settings-menu {
+	display: none;
+}
+
 /*
  Moves the whole editor to the top.
  There was an extra top margin after removing the WP Admin bar.
@@ -50,17 +89,17 @@
 }
 
 /* Remove tabs from sidebar panel, leaving the \'x\' button */
-.edit-post-sidebar__panel-tabs {
+.editor-sidebar__panel-tabs {
     display: none;
 }
 
 /* Remove \'(no-title)\' string from sidebar header */
-.edit-post-sidebar-header__title {
+.editor-sidebar-header__title {
     display: none;
 }
 
 /* Move \'x\' close button to the end on sidebar header */
-.edit-post-sidebar-header__small {
+.editor-sidebar-header__small {
     justify-content: flex-end;
 }
 
@@ -69,38 +108,6 @@
     display: none;
 }
 
-/* 
- Load second button in component menu group but hide it from view.
- This is to fix a Chrome-specific bug that occurs if this button is set to "display: none;" 
- For additional context, see: https://github.com/WordPress/gutenberg/pull/33740
-*/
-.components-dropdown-menu__menu
-	> .components-menu-group
-	> div
-	> button:nth-child( 2 ) {
-	display: block;
-	min-height: 0;
-	height: 0;
-	padding: 0;
-}
-
-.components-menu-group > div > button:nth-child( 2 ) > span {
-	display: none;
-}
-
-.components-button:focus:not( :disabled ) {
-	box-shadow: none;
-}
-
-/* Remove \'delete block\' button inside \'...\' button in block toolbar */
-.components-dropdown-menu__menu > div:not(:first-child) {
-    display: none;
-}
-
-.components-dropdown-menu__menu > div:first-child {
-	padding-bottom: 0;
-}
-
 /*
  Some Themes can overwrite values on \'editor-styles-wrapper\'.
  This will ensure that the top padding is correct on our single-block version of gutenberg web.
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/inject-css.js b/packages/react-native-bridge/common/gutenberg-web-single-block/inject-css.js
index 60ac677bd20f5c..483e742e780bcb 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/inject-css.js
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/inject-css.js
@@ -1,8 +1,9 @@
 const injectCss = `
-window.injectCss = (css) => {
+window.injectCss = (css, id) => {
     const style = document.createElement('style');
     style.innerHTML = css;
     style.type = 'text/css';
+    style.id = id;
     document.head.appendChild(style);
 }
 `;
diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/insert-block.js b/packages/react-native-bridge/common/gutenberg-web-single-block/insert-block.js
index b7f14e16e67c0b..3c74acef35315d 100644
--- a/packages/react-native-bridge/common/gutenberg-web-single-block/insert-block.js
+++ b/packages/react-native-bridge/common/gutenberg-web-single-block/insert-block.js
@@ -1,3 +1,3 @@
 if ( window.insertBlock && window.contentIncerted !== true ) {
-	window.insertBlock( `%@` );
+	window.insertBlock( String.raw`%@` );
 }
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..2c01a8d4e033fa 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
@@ -10,8 +10,7 @@
 			},
 			"editorMode": "visual",
 			"pinnedPluginItems": {},
-			"hiddenBlockTypes": [],
-			"preferredStyleVariations": {}
+			"hiddenBlockTypes": []
 		}
 	},
 	"core/nux": {
diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
index 2acba1a7bbb9fc..da16f75e161dac 100644
--- a/packages/react-native-bridge/index.js
+++ b/packages/react-native-bridge/index.js
@@ -3,6 +3,16 @@
  */
 import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
 
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import parseException from './lib/parseException';
+
 const { RNReactNativeGutenbergBridge } = NativeModules;
 const isIOS = Platform.OS === 'ios';
 const isAndroid = Platform.OS === 'android';
@@ -69,6 +79,13 @@ export function subscribeFeaturedImageIdNativeUpdated( callback ) {
 	);
 }
 
+export function subscribePostSaveEvent( callback ) {
+	return gutenbergBridgeEvents.addListener(
+		'postHasBeenJustSaved',
+		callback
+	);
+}
+
 /**
  * Request to subscribe to mediaUpload events
  *
@@ -170,6 +187,38 @@ export function subscribeShowEditorHelp( callback ) {
 	return gutenbergBridgeEvents.addListener( 'showEditorHelp', callback );
 }
 
+export function subscribeOnUndoPressed( callback ) {
+	return gutenbergBridgeEvents.addListener( 'onUndoPressed', callback );
+}
+
+export function subscribeOnRedoPressed( callback ) {
+	return gutenbergBridgeEvents.addListener( 'onRedoPressed', callback );
+}
+
+export function subscribeConnectionStatus( callback ) {
+	return gutenbergBridgeEvents.addListener(
+		'connectionStatusChange',
+		callback
+	);
+}
+
+/**
+ * Subscribes a callback function to the 'onContentUpdate' event.
+ * This event is triggered with content that will be passed to the block editor
+ * to be converted into blocks.
+ *
+ * @param {Function} callback The function to be called when the 'onContentUpdate' event is triggered.
+ *                            This function receives content plain text/markdown as an argument.
+ * @return {Object} The listener object that was added to the event.
+ */
+export function subscribeToContentUpdate( callback ) {
+	return gutenbergBridgeEvents.addListener( 'onContentUpdate', callback );
+}
+
+export function requestConnectionStatus( callback ) {
+	return RNReactNativeGutenbergBridge.requestConnectionStatus( callback );
+}
+
 /**
  * Request media picker for the given media source.
  *
@@ -190,7 +239,7 @@ export function requestMediaPicker( source, filter, multiple, callback ) {
 }
 
 /**
- * Request to render an unsuported block.
+ * Request to render an unsupported block.
  *
  * A way to show unsupported blocks to the user is to render it on a web view.
  *
@@ -231,16 +280,6 @@ export function mediaUploadSync() {
 	return RNReactNativeGutenbergBridge.mediaUploadSync();
 }
 
-/**
- * Request to start listening to save events when in-progress saves are in place
- *
- * For example, when media is being saved and the user re-enters the editor
- *
- */
-export function mediaSaveSync() {
-	return RNReactNativeGutenbergBridge.mediaSaveSync();
-}
-
 export function requestImageFailedRetryDialog( mediaId ) {
 	return RNReactNativeGutenbergBridge.requestImageFailedRetryDialog(
 		mediaId
@@ -283,6 +322,18 @@ export function requestImageFullscreenPreview(
 	);
 }
 
+export function requestEmbedFullscreenPreview( content, title ) {
+	if ( isIOS ) {
+		/* eslint-disable-next-line no-console */
+		console.warn( 'requestEmbedFullscreenPreview is not supported on iOS' );
+		return;
+	}
+	return RNReactNativeGutenbergBridge.requestEmbedFullscreenPreview(
+		content,
+		title
+	);
+}
+
 export function requestMediaEditor( mediaUrl, callback ) {
 	return RNReactNativeGutenbergBridge.requestMediaEditor(
 		mediaUrl,
@@ -297,6 +348,10 @@ export function fetchRequest( path, enableCaching = true ) {
 	return RNReactNativeGutenbergBridge.fetchRequest( path );
 }
 
+export function postRequest( path, data = {} ) {
+	return RNReactNativeGutenbergBridge.postRequest( path, data );
+}
+
 export function showUserSuggestions() {
 	return RNReactNativeGutenbergBridge.showUserSuggestions();
 }
@@ -305,79 +360,6 @@ export function showXpostSuggestions() {
 	return RNReactNativeGutenbergBridge.showXpostSuggestions();
 }
 
-/**
- * Request the host app to show the block for editing its mediaFiles collection
- *
- * For example, a mediaFiles collection editor can make special handling of visualization
- * in this regard.
- *
- * @param {Array<Map>} mediaFiles    the mediaFiles attribute of the block, containing data about each media item.
- * @param {string}     blockClientId the clientId of the block.
- */
-export function requestMediaFilesEditorLoad( mediaFiles, blockClientId ) {
-	RNReactNativeGutenbergBridge.requestMediaFilesEditorLoad(
-		mediaFiles,
-		blockClientId
-	);
-}
-
-/**
- * Request the host app to show a retry dialog for mediaFiles arrays which contained items that failed
- * to upload
- *
- * For example, tapping on a failed-media overlay would trigger this request and a "Retry?" dialog
- * would be presented to the user
- *
- * @param {Array<Map>} mediaFiles the mediaFiles attribute of the block, containing data about each media item
- */
-export function requestMediaFilesFailedRetryDialog( mediaFiles ) {
-	RNReactNativeGutenbergBridge.requestMediaFilesFailedRetryDialog(
-		mediaFiles
-	);
-}
-
-/**
- * Request the host app to show a cancel dialog for mediaFiles arrays currently being uploaded
- *
- * For example, tapping on a block containing mediaFiles that are currently being uplaoded would trigger this request
- * and a "Cancel upload?" dialog would be presented to the user.
- *
- * @param {Array<Map>} mediaFiles the mediaFiles attribute of the block, containing data about each media item
- */
-export function requestMediaFilesUploadCancelDialog( mediaFiles ) {
-	RNReactNativeGutenbergBridge.requestMediaFilesUploadCancelDialog(
-		mediaFiles
-	);
-}
-
-/**
- * Request the host app to show a cancel dialog for mediaFiles arrays currently undergoing a save operation
- *
- * Save operations on mediaFiles collection could  be lengthy so for example, tapping on a mediaFiles-type block
- * currently being saved would trigger this request and a "Cancel save?" dialog would be presented to the user
- *
- * @param {Array<Map>} mediaFiles the mediaFiles attribute of the block, containing data about each media item.
- */
-export function requestMediaFilesSaveCancelDialog( mediaFiles ) {
-	RNReactNativeGutenbergBridge.requestMediaFilesSaveCancelDialog(
-		mediaFiles
-	);
-}
-
-/**
- * Request the host app to listen to mediaFiles collection based block replacement signals
- * in case such an event was enqueued
- *
- * @param {Array<Map>} mediaFiles    the mediaFiles attribute of the block, containing data about each media item.
- * @param {string}     blockClientId the clientId of the block.
- */
-export function mediaFilesBlockReplaceSync( mediaFiles, blockClientId ) {
-	RNReactNativeGutenbergBridge.mediaFilesBlockReplaceSync(
-		mediaFiles,
-		blockClientId
-	);
-}
-
 export function requestFocalPointPickerTooltipShown( callback ) {
 	return RNReactNativeGutenbergBridge.requestFocalPointPickerTooltipShown(
 		callback
@@ -436,6 +418,37 @@ export function sendEventToHost( eventName, properties ) {
 	);
 }
 
+/**
+ * Shows Android's soft keyboard if there's a TextInput focused and
+ * the keyboard is hidden.
+ *
+ * @return {void}
+ */
+export function showAndroidSoftKeyboard() {
+	if ( isIOS ) {
+		return;
+	}
+
+	const hasFocusedTextInput = RCTAztecView.InputState.isFocused();
+
+	if ( hasFocusedTextInput ) {
+		RNReactNativeGutenbergBridge.showAndroidSoftKeyboard();
+	}
+}
+
+/**
+ * Hides Android's soft keyboard.
+ *
+ * @return {void}
+ */
+export function hideAndroidSoftKeyboard() {
+	if ( isIOS ) {
+		return;
+	}
+
+	RNReactNativeGutenbergBridge.hideAndroidSoftKeyboard();
+}
+
 /**
  * Generate haptic feedback.
  */
@@ -443,4 +456,68 @@ export function generateHapticFeedback() {
 	RNReactNativeGutenbergBridge.generateHapticFeedback();
 }
 
+export function toggleUndoButton( isDisabled ) {
+	RNReactNativeGutenbergBridge.toggleUndoButton( isDisabled );
+}
+
+export function toggleRedoButton( isDisabled ) {
+	RNReactNativeGutenbergBridge.toggleRedoButton( isDisabled );
+}
+
+/**
+ * Log exception to host app's crash logging service.
+ * @param {Object}   exception         Exception object
+ * @param {Object}   [extra]           Extra parameters to include in the exception.
+ * @param {Object}   [extra.context]   Context of the exception.
+ * @param {Object}   [extra.tags]      Tags to associate with the exception.
+ * @param {Object}   [extra.isHandled] True if the exception is handled.
+ * @param {Object}   [extra.handledBy] The mechanism that detected the exception.
+ * @param {Function} [callback]        Callback triggered when the exception is sent.
+ */
+export function logException(
+	exception,
+	{ context, tags, isHandled, handledBy } = {
+		context: {},
+		tags: {},
+		isHandled: false,
+		handledBy: 'Unknown',
+	},
+	callback
+) {
+	const parsedException = {
+		...parseException( exception, { context, tags } ),
+		isHandled,
+		handledBy,
+	};
+
+	const onLogException = ( wasSent ) => {
+		if ( ! wasSent ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				'An error ocurred when logging the exception',
+				parsedException
+			);
+		}
+		if ( callback ) {
+			callback();
+		}
+	};
+
+	// Only log exceptions in production
+	// eslint-disable-next-line no-undef
+	if ( __DEV__ ) {
+		// eslint-disable-next-line no-console
+		console.info( 'Exception that would be logged', parsedException );
+		if ( callback ) {
+			callback();
+		}
+		return;
+	}
+
+	RNReactNativeGutenbergBridge.logException(
+		parsedException,
+		onLogException
+	);
+}
+
 export default RNReactNativeGutenbergBridge;
diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
index da327fb11ef7ef..adb24baa778511 100644
--- a/packages/react-native-bridge/ios/Gutenberg.swift
+++ b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -123,6 +123,10 @@ public class Gutenberg: UIResponder {
         sendEvent(.featuredImageIdNativeUpdated, body: ["featuredImageId": mediaId])
     }
 
+    public func postHasBeenJustSaved() {
+        sendEvent(.postHasBeenJustSaved)
+    }
+
     public func replace(block: Block) {
         sendEvent(.replaceBlock, body: ["html": block.content, "clientId": block.id])
     }
@@ -140,8 +144,8 @@ public class Gutenberg: UIResponder {
         bridgeModule.sendEvent(withName: event.rawValue, body: body)
     }
 
-    public func mediaUploadUpdate(id: Int32, state: MediaUploadState, progress: Float, url: URL?, serverID: Int32?) {
-        mediaUpdate(event: .mediaUpload, id: id, state: state, progress: progress, url: url, serverID: serverID)
+    public func mediaUploadUpdate(id: Int32, state: MediaUploadState? = nil, progress: Float? = nil, url: URL?, serverID: Int32? = nil, metadata: [String: Any] = [:]) {
+        mediaUpdate(event: .mediaUpload, id: id, state: state, progress: progress, url: url, serverID: serverID, metadata: metadata)
     }
 
     public func updateMediaSaveStatus(id: Int32, state: MediaSaveState, progress: Float, url: URL?, serverID: Int32?) {
@@ -165,8 +169,15 @@ public class Gutenberg: UIResponder {
         ])
     }
 
-    private func mediaUpdate<State: MediaState>(event: RNReactNativeGutenbergBridge.EventName, id: Int32, state: State, progress: Float, url: URL?, serverID: Int32?)  {
-        var data: [String: Any] = ["mediaId": id, "state": state.rawValue, "progress": progress];
+    private func mediaUpdate<State: MediaState>(event: RNReactNativeGutenbergBridge.EventName, id: Int32, state: State?, progress: Float?, url: URL?, serverID: Int32?, metadata: [String: Any] = [:])  {
+        var data: [String: Any] = ["mediaId": id, "metadata": metadata ];
+        
+        if let state = state {
+            data["state"] = state.rawValue
+        }
+        if let progress = progress {
+            data["progress"] = progress
+        }
         if let url = url {
             data["mediaUrl"] = url.absoluteString
         }
@@ -197,22 +208,28 @@ public class Gutenberg: UIResponder {
     public func showEditorHelp() {
         bridgeModule.sendEventIfNeeded(.showEditorHelp, body: nil)
     }
+    
+    public func onUndoPressed() {
+        bridgeModule.sendEventIfNeeded(.onUndoPressed, body: nil)
+    }
+    
+    public func onRedoPressed() {
+        bridgeModule.sendEventIfNeeded(.onRedoPressed, body: nil)
+    }
+
+    public func connectionStatusChange(isConnected: Bool) {
+        var data: [String: Any] = ["isConnected": isConnected]
+        bridgeModule.sendEventIfNeeded(.connectionStatusChange, body: data)
+    }
+    
+    public func onContentUpdate(content: String) {
+        var payload: [String: Any] = ["content": content]
+        bridgeModule.sendEventIfNeeded(.onContentUpdate, body: payload)
+    }
 
     private func properties(from editorSettings: GutenbergEditorSettings?) -> [String : Any] {
         var settingsUpdates = [String : Any]()
         settingsUpdates["isFSETheme"] = editorSettings?.isFSETheme ?? false
-        
-        if let galleryWithImageBlocks = editorSettings?.galleryWithImageBlocks {
-            settingsUpdates["galleryWithImageBlocks"] = galleryWithImageBlocks
-        }
-
-        if let quoteBlockV2 = editorSettings?.quoteBlockV2 {
-            settingsUpdates["quoteBlockV2"] = quoteBlockV2
-        }
-
-        if let listBlockV2 = editorSettings?.listBlockV2 {
-            settingsUpdates["listBlockV2"] = listBlockV2
-        }
 
         if let rawStyles = editorSettings?.rawStyles {
             settingsUpdates["rawStyles"] = rawStyles
@@ -250,13 +267,17 @@ extension Gutenberg: RCTBridgeDelegate {
         }
         let monitorQueue = DispatchQueue(label: "org.wordpress.network-path-monitor")
         monitor.start(queue: monitorQueue)
-        semaphore.wait(timeout: .distantFuture)
+        _ = semaphore.wait(timeout: .distantFuture)
         monitor.cancel()
         if isOnCellularNetwork {
             return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
         }
         #endif
-        return RCTBundleURLProvider.sharedSettings()?.jsBundleURL(forBundleRoot: "index", fallbackResource: "")
+        
+        guard let localBundle = RCTBundleURLProvider.sharedSettings()?.jsBundleURL(forBundleRoot: "index", fallbackExtension: "") else {
+            return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
+        }
+        return localBundle
     }
 
     public func extraModules(for bridge: RCTBridge!) -> [RCTBridgeModule]! {
@@ -275,6 +296,7 @@ extension Gutenberg {
         case succeeded = 2
         case failed = 3
         case reset = 4
+        case paused = 11
     }
 
     public enum MediaSaveState: Int, MediaState {
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
index 7866e048fe5e41..4f1ac5f74d3354 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
@@ -1,6 +1,6 @@
 import Aztec
 
-public protocol GutenbergBridgeDataSource: class {
+public protocol GutenbergBridgeDataSource: AnyObject {
     /// Asks the data source for the initial html content to be presented by the editor.
     /// Return `nil` to show the example content.
     ///
@@ -82,9 +82,6 @@ public extension GutenbergBridgeDataSource {
 
 public protocol GutenbergEditorSettings {
     var isFSETheme: Bool { get }
-    var galleryWithImageBlocks: Bool { get }
-    var quoteBlockV2: Bool { get }
-    var listBlockV2: Bool { get }
     var rawStyles: String? { get }
     var rawFeatures: String? { get }
     var colors: [[String: String]]? { get }
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
index b756f057755286..8ff78b8fa1415f 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -1,3 +1,5 @@
+import React
+
 public struct MediaInfo: Encodable {
     public let id: Int32?
     public let url: String?
@@ -5,14 +7,20 @@ public struct MediaInfo: Encodable {
     public let title: String?
     public let caption: String?
     public let alt: String?
+    public let metadata: [String: Any]
+
+    private enum CodingKeys: String, CodingKey {
+        case id, url, type, title, caption, alt
+    }
 
-    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil) {
+    public init(id: Int32?, url: String?, type: String?, caption: String? = nil, title: String? = nil, alt: String? = nil, metadata: [String: Any] = [:]) {
         self.id = id
         self.url = url
         self.type = type
         self.caption = caption
         self.title = title
         self.alt = alt
+        self.metadata = metadata
     }
 }
 
@@ -21,7 +29,8 @@ public enum Capabilities: String {
     case contactInfoBlock
     case layoutGridBlock
     case tiledGalleryBlock
-    case mediaFilesCollectionBlock
+    case videoPressBlock
+    case videoPressV5Support
     case mentions
     case xposts
     case unsupportedBlockEditor
@@ -33,6 +42,8 @@ public enum Capabilities: String {
     case loomEmbed
     case smartframeEmbed
     case shouldUseFastImage
+    case supportSection
+    case onlyCoreBlocks
 }
 
 /// Wrapper for single block data
@@ -131,7 +142,57 @@ extension RCTLogLevel {
     }
 }
 
-public protocol GutenbergBridgeDelegate: class {
+// Definition of JavaScript exception, which will be used to
+// log exception to the Crash Logging service.
+public struct GutenbergJSException {
+    public let type: String
+    public let message: String
+    public let stacktrace: [StacktraceLine]
+    public let context: [String: Any]
+    public let tags: [String: String]
+    public let isHandled: Bool
+    public let handledBy: String
+
+    public struct StacktraceLine {
+        public let filename: String?
+        public let function: String
+        public let lineno: NSNumber?
+        public let colno: NSNumber?
+        
+        init?(from dict: [AnyHashable: Any]) {
+            guard let function = dict["function"] as? String else {
+                return nil
+            }
+            self.filename = dict["filename"] as? String
+            self.function = function
+            self.lineno = dict["lineno"] as? NSNumber
+            self.colno = dict["colno"] as? NSNumber
+        }
+    }
+    
+    init?(from dict: [AnyHashable: Any]) {
+        guard let type = dict["type"] as? String,
+              let message = dict["message"] as? String,
+              let rawStacktrace = dict["stacktrace"] as? [[AnyHashable: Any]],
+              let context = dict["context"] as? [String: Any],
+              let tags = dict["tags"] as? [String: String],
+              let isHandled = dict["isHandled"] as? Bool,
+              let handledBy = dict["handledBy"] as? String
+        else {
+            return nil
+        }
+        
+        self.type = type
+        self.message = message
+        self.stacktrace = rawStacktrace.compactMap { StacktraceLine(from: $0) }
+        self.context = context
+        self.tags = tags
+        self.isHandled = isHandled
+        self.handledBy = handledBy
+    }
+}
+
+public protocol GutenbergBridgeDelegate: AnyObject {
     /// Tells the delegate that Gutenberg had returned the requested HTML content.
     /// You can request HTML content by calling `requestHTML()` on a Gutenberg bridge instance.
     ///
@@ -196,12 +257,19 @@ public protocol GutenbergBridgeDelegate: class {
     ///
     func editorDidAutosave()
 
-    /// Tells the delegate that the editor needs to perform a network request.
+    /// Tells the delegate that the editor needs to perform a GET request.
+    /// The paths given to perform the request are from the WP ORG REST API.
+    /// https://developer.wordpress.org/rest-api/reference/
+    /// - Parameter path: The path to perform the request.
+    /// - Parameter completion: Completion handler to be called with the result or an error.
+    func gutenbergDidGetRequestFetch(path: String, completion: @escaping (Swift.Result<Any, NSError>) -> Void)
+    
+    /// Tells the delegate that the editor needs to perform a POST request.
     /// The paths given to perform the request are from the WP ORG REST API.
     /// https://developer.wordpress.org/rest-api/reference/
     /// - Parameter path: The path to perform the request.
     /// - Parameter completion: Completion handler to be called with the result or an error.
-    func gutenbergDidRequestFetch(path: String, completion: @escaping (Swift.Result<Any, NSError>) -> Void)
+    func gutenbergDidPostRequestFetch(path: String, data: [String: AnyObject]?, completion: @escaping (Swift.Result<Any, NSError>) -> Void)
 
     /// Tells the delegate to display a fullscreen image from a given URL
     ///
@@ -231,20 +299,6 @@ public protocol GutenbergBridgeDelegate: class {
 
     func gutenbergDidSendButtonPressedAction(_ buttonType: Gutenberg.ActionButtonType)
 
-    // Media Collection
-
-    /// Tells the delegate that a media collection block requested to reconnect with media save coordinator.
-    ///
-    func gutenbergDidRequestMediaSaveSync()
-
-    func gutenbergDidRequestMediaFilesEditorLoad(_ mediaFiles: [[String: Any]], blockId: String)
-
-    func gutenbergDidRequestMediaFilesFailedRetryDialog(_ mediaFiles: [[String: Any]])
-
-    func gutenbergDidRequestMediaFilesUploadCancelDialog(_ mediaFiles: [[String: Any]])
-
-    func gutenbergDidRequestMediaFilesSaveCancelDialog(_ mediaFiles: [[String: Any]])
-
     func gutenbergDidRequestPreview()
 
     /// Tells the delegate that the editor requested the block type impression counts
@@ -261,6 +315,14 @@ public protocol GutenbergBridgeDelegate: class {
 
     /// Tells the delegate the editor requested sending an event
     func gutenbergDidRequestSendEventToHost(_ eventName: String, properties: [AnyHashable: Any])
+    
+    func gutenbergDidRequestToggleUndoButton(_ isDisabled: Bool)
+    
+    func gutenbergDidRequestToggleRedoButton(_ isDisabled: Bool)
+
+    func gutenbergDidRequestConnectionStatus() -> Bool
+    
+    func gutenbergDidRequestLogException(_ exception: GutenbergJSException, with callback: @escaping () -> Void)
 }
 
 // MARK: - Optional GutenbergBridgeDelegate methods
@@ -270,13 +332,4 @@ public extension GutenbergBridgeDelegate {
     func gutenbergDidLayout() { }
     func gutenbergDidRequestUnsupportedBlockFallback(for block: Block) { }
     func gutenbergDidSendButtonPressedAction(_ buttonType: Gutenberg.ActionButtonType) { }
-
-    // Media Collection
-
-    func gutenbergDidRequestMediaSaveSync() {}
-    func gutenbergDidRequestMediaFilesEditorLoad(_ mediaFiles: [[String: Any]], blockId: String) { }
-    func gutenbergDidRequestMediaFilesFailedRetryDialog(_ mediaFiles: [[String: Any]]) { }
-    func gutenbergDidRequestMediaFilesUploadCancelDialog(_ mediaFiles: [[String: Any]]) { }
-    func gutenbergDidRequestMediaFilesSaveCancelDialog(_ mediaFiles: [[String: Any]]) { }
-    func gutenbergDidRequestMediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {}
 }
diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift
index 13ae9dd1f05735..ee75dc0968a586 100644
--- a/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift
+++ b/packages/react-native-bridge/ios/GutenbergWebFallback/FallbackJavascriptInjection.swift
@@ -19,6 +19,7 @@ public struct FallbackJavascriptInjection {
     public let preventAutosavesScript: WKUserScript
     public let getHtmlContentScript = "window.getHTMLPostContent()".toJsScript()
     public let gutenbergObserverScript: WKUserScript
+    public let editorBehaviorScript: WKUserScript
 
     /// Init an instance of GutenbergWebJavascriptInjection or throws if any of the required sources doesn't exist.
     /// This helps to cach early any possible error due to missing source files.
@@ -31,7 +32,7 @@ public struct FallbackJavascriptInjection {
         }
 
         func getInjectCssScript(with source: SourceFile) throws -> WKUserScript {
-            "window.injectCss(`\(try source.getContent())`)".toJsScript()
+            "window.injectCss(`\(try source.getContent())`, `\(source.getName())`)".toJsScript()
         }
 
         userContentScripts = [
@@ -44,6 +45,7 @@ public struct FallbackJavascriptInjection {
         injectEditorCssScript = try getInjectCssScript(with: .editorStyle)
         preventAutosavesScript = try script(with: .preventAutosaves)
         gutenbergObserverScript = try script(with: .gutenbergObserver)
+        editorBehaviorScript = try script(with: .editorBehavior)
 
         let localStorageJsonString = try SourceFile.localStorage.getContent().removingSpacesAndNewLines()
         let scriptString = String(format: injectLocalStorageScriptTemplate, userId, localStorageJsonString)
diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
index aa83095f058f10..bd8cee5d2d5dba 100644
--- a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
+++ b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
@@ -1,7 +1,7 @@
 import UIKit
 import WebKit
 
-public protocol GutenbergWebDelegate: class {
+public protocol GutenbergWebDelegate: AnyObject {
     func webController(controller: GutenbergWebSingleBlockViewController, didPressSave block: Block)
     func webControllerDidPressClose(controller: GutenbergWebSingleBlockViewController)
     func webController(controller: GutenbergWebSingleBlockViewController, didLog log: String)
@@ -71,11 +71,12 @@ open class GutenbergWebSingleBlockViewController: UIViewController {
     }
 
     /// Called when Gutenberg Web editor is loaded in the web view.
-    /// If overriden, is required to call super.onGutenbergReady()
+    /// If overridden, is required to call super.onGutenbergReady()
     open func onGutenbergReady() {
         onGutenbergReadyScripts().forEach(evaluateJavascript)
         evaluateJavascript(jsInjection.preventAutosavesScript)
         evaluateJavascript(jsInjection.insertBlockScript)
+        evaluateJavascript(jsInjection.editorBehaviorScript)
         DispatchQueue.main.async { [weak self] in
             self?.removeCoverViewAnimated()
         }
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m
index f062664d939b56..b85bb0ef8db292 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m
@@ -17,21 +17,15 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(editorDidEmitLog:(NSString *)message logLevel:(int)logLevel)
 RCT_EXTERN_METHOD(editorDidAutosave)
 RCT_EXTERN_METHOD(fetchRequest:(NSString *)path resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(postRequest:(NSString *)path data:(NSDictionary *)parameters resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(requestImageFullscreenPreview:(NSString *)currentImageUrlString originalImageUrlString:(NSString *)originalImageUrlString)
 RCT_EXTERN_METHOD(requestMediaEditor:(NSString *)mediaUrl callback:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(requestUnsupportedBlockFallback:(NSString *)content blockId:(NSString *)blockId blockName:(NSString *)blockName blockTitle:(NSString *)blockTitle)
 RCT_EXTERN_METHOD(showUserSuggestions:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)rejecter)
 RCT_EXTERN_METHOD(showXpostSuggestions:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)rejecter)
-RCT_EXTERN_METHOD(requestMediaFilesEditorLoad:(NSArray<NSDictionary *> *)mediaFiles blockId:(NSString *)blockId)
-RCT_EXTERN_METHOD(requestMediaFilesFailedRetryDialog:(NSArray<NSDictionary *> *)mediaFiles)
-RCT_EXTERN_METHOD(requestMediaFilesUploadCancelDialog:(NSArray<NSDictionary *> *)mediaFiles)
-RCT_EXTERN_METHOD(requestMediaFilesSaveCancelDialog:(NSArray<NSDictionary *> *)mediaFiles)
-RCT_EXTERN_METHOD(onCancelUploadForMediaCollection:(NSArray<NSDictionary *> *)mediaFiles)
 RCT_EXTERN_METHOD(requestFocalPointPickerTooltipShown:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(setFocalPointPickerTooltipShown:(BOOL)tooltipShown)
 RCT_EXTERN_METHOD(actionButtonPressed:(NSString *)buttonType)
-RCT_EXTERN_METHOD(mediaSaveSync)
-RCT_EXTERN_METHOD(mediaFilesBlockReplaceSync:(NSArray<NSDictionary *> *)mediaFiles clientId:(NSString *)clientId)
 RCT_EXTERN_METHOD(requestPreview)
 RCT_EXTERN_METHOD(requestBlockTypeImpressions:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(setBlockTypeImpressions:(NSDictionary *)impressions)
@@ -39,5 +33,9 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(requestGotoCustomerSupportOptions)
 RCT_EXTERN_METHOD(sendEventToHost:(NSString)eventName properties:(NSDictionary *)properties)
 RCT_EXTERN_METHOD(generateHapticFeedback)
+RCT_EXTERN_METHOD(toggleUndoButton:(BOOL)isDisabled)
+RCT_EXTERN_METHOD(toggleRedoButton:(BOOL)isDisabled)
+RCT_EXTERN_METHOD(requestConnectionStatus:(RCTResponseSenderBlock)callback)
+RCT_EXTERN_METHOD(logException:(NSDictionary *)exception callback:(RCTResponseSenderBlock)callback)
 
 @end
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index 162bdc3fec7d7c..96c3a8f25e0cb8 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -1,3 +1,5 @@
+import React
+
 struct GutenbergEvent {
     let name: String
     let body: Any?
@@ -245,7 +247,19 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
 
     @objc
     func fetchRequest(_ path: String, resolver: @escaping RCTPromiseResolveBlock, rejecter: @escaping RCTPromiseRejectBlock) {
-        self.delegate?.gutenbergDidRequestFetch(path: path, completion: { (result) in
+        self.delegate?.gutenbergDidGetRequestFetch(path: path, completion: { (result) in
+            switch result {
+            case .success(let response):
+                resolver(response)
+            case .failure(let error):
+                rejecter("\(error.code)", error.description, error)
+            }
+        })
+    }
+    
+    @objc
+    func postRequest(_ path: String, data: [String: AnyObject]?, resolver: @escaping RCTPromiseResolveBlock, rejecter: @escaping RCTPromiseRejectBlock) {
+        self.delegate?.gutenbergDidPostRequestFetch(path: path, data: data, completion: { (result) in
             switch result {
             case .success(let response):
                 resolver(response)
@@ -291,43 +305,6 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
 		})
 	}
 
-    @objc
-    func requestMediaFilesEditorLoad(_ mediaFiles: [[String: Any]], blockId: String) {
-        DispatchQueue.main.async {
-            self.delegate?.gutenbergDidRequestMediaFilesEditorLoad(mediaFiles, blockId: blockId)
-        }
-    }
-
-    @objc
-    func requestMediaFilesFailedRetryDialog(_ mediaFiles: [[String: Any]]) {
-        DispatchQueue.main.async {
-            self.delegate?.gutenbergDidRequestMediaFilesFailedRetryDialog(mediaFiles)
-        }
-    }
-
-    @objc
-    func requestMediaFilesUploadCancelDialog(_ mediaFiles: [[String: Any]]) {
-        DispatchQueue.main.async {
-            self.delegate?.gutenbergDidRequestMediaFilesUploadCancelDialog(mediaFiles)
-        }
-    }
-
-    @objc
-    func requestMediaFilesSaveCancelDialog(_ mediaFiles: [[String: Any]]) {
-        DispatchQueue.main.async {
-            self.delegate?.gutenbergDidRequestMediaFilesSaveCancelDialog(mediaFiles)
-        }
-    }
-
-    @objc
-    func mediaSaveSync() {
-        DispatchQueue.main.async {
-            if self.hasObservers {
-                self.delegate?.gutenbergDidRequestMediaSaveSync()
-            }
-        }
-	}
-
     @objc
     func requestFocalPointPickerTooltipShown(_ callback: @escaping RCTResponseSenderBlock) {
         callback([self.delegate?.gutenbergDidRequestFocalPointPickerTooltipShown() ?? false])
@@ -338,15 +315,6 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
         self.delegate?.gutenbergDidRequestSetFocalPointPickerTooltipShown(tooltipShown)
     }
 
-    @objc
-    func mediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {
-        DispatchQueue.main.async {
-            if self.hasObservers {
-                self.delegate?.gutenbergDidRequestMediaFilesBlockReplaceSync(mediaFiles, clientId: clientId)
-            }
-        }
-    }
-
     @objc
     func actionButtonPressed(_ buttonType: String) {
         guard let button = Gutenberg.ActionButtonType(rawValue: buttonType) else {
@@ -397,12 +365,39 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     func generateHapticFeedback() {
         UISelectionFeedbackGenerator().selectionChanged()
     }
+    
+    @objc
+    func toggleUndoButton(_ isDisabled: Bool) {
+        self.delegate?.gutenbergDidRequestToggleUndoButton(isDisabled)
+    }
+    
+    @objc
+    func toggleRedoButton(_ isDisabled: Bool) {
+        self.delegate?.gutenbergDidRequestToggleRedoButton(isDisabled)
+    }
+    
+    @objc
+    func requestConnectionStatus(_ callback: @escaping RCTResponseSenderBlock) {
+        callback([self.delegate?.gutenbergDidRequestConnectionStatus() ?? true])
+    }
+
+    @objc
+    func logException(_ rawException: [AnyHashable: Any], callback: @escaping RCTResponseSenderBlock) {
+        guard let exception = GutenbergJSException(from: rawException) else {
+            callback([false])
+            return
+        }
+    
+        self.delegate?.gutenbergDidRequestLogException(exception) {
+            callback([true])
+        }
+    }
 }
 
 // MARK: - RCTBridgeModule delegate
 
 public extension Gutenberg {
-    public enum ActionButtonType: String {
+    enum ActionButtonType: String {
         case missingBlockAlertActionButton = "missing_block_alert_action_button"
     }
 }
@@ -414,6 +409,7 @@ extension RNReactNativeGutenbergBridge {
         case toggleHTMLMode
         case updateHtml
         case featuredImageIdNativeUpdated
+        case postHasBeenJustSaved
         case mediaUpload
         case setFocusOnTitle
         case mediaAppend
@@ -423,6 +419,10 @@ extension RNReactNativeGutenbergBridge {
         case showNotice
         case mediaSave
         case showEditorHelp
+        case onUndoPressed
+        case onRedoPressed
+        case connectionStatusChange
+        case onContentUpdate
     }
 
     public override func supportedEvents() -> [String]! {
@@ -468,12 +468,13 @@ extension MediaInfo {
     func encodeForJS() -> [String: Any] {
         guard
             let data = try? JSONEncoder().encode(self),
-            let jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] else
+            var jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] else
         {
             assertionFailure("Encoding of MediaInfo failed")
             return [String: Any]()
         }
 
+        jsonObject["metadata"] = self.metadata
         return jsonObject
     }
 }
diff --git a/packages/react-native-bridge/ios/SourceFile.swift b/packages/react-native-bridge/ios/SourceFile.swift
index 2f75e22278c0f1..a6deceed3549f1 100644
--- a/packages/react-native-bridge/ios/SourceFile.swift
+++ b/packages/react-native-bridge/ios/SourceFile.swift
@@ -1,4 +1,4 @@
-import Foundation
+import WebKit
 
 public struct SourceFile {
     enum SourceFileError: Error {
@@ -29,9 +29,13 @@ public struct SourceFile {
 }
 
 extension SourceFile {
+    public func getName() -> String {
+        return self.name
+    }
+    
     public func jsScript(with argument: String? = nil) throws -> WKUserScript {
         let content = try getContent()
-        let formatted = String(format: content, argument ?? [])
+        let formatted = String(format: content, argument ?? "")
         
         switch self.type {
         case .css:
@@ -44,13 +48,14 @@ extension SourceFile {
 }
 
 extension SourceFile {
+    static let retrieveHtml = SourceFile(name: "content-functions", type: .js)
+    static let editorBehavior = SourceFile(name: "editor-behavior-overrides", type: .js)
     static let editorStyle = SourceFile(name: "editor-style-overrides", type: .css)
-    static let wpBarsStyle = SourceFile(name: "wp-bar-override", type: .css)
+    static let gutenbergObserver = SourceFile(name: "gutenberg-observer", type: .js)
     static let injectCss = SourceFile(name: "inject-css", type: .js)
-    static let retrieveHtml = SourceFile(name: "content-functions", type: .js)
     static let insertBlock = SourceFile(name: "insert-block", type: .js)
     static let localStorage  = SourceFile(name: "local-storage-overrides", type: .json)
     static let preventAutosaves = SourceFile(name: "prevent-autosaves", type: .js)
-    static let gutenbergObserver = SourceFile(name: "gutenberg-observer", type: .js)
     static let supportedBlocks = SourceFile(name: "supported-blocks", type: .json)
+    static let wpBarsStyle = SourceFile(name: "wp-bar-override", type: .css)
 }
diff --git a/packages/react-native-bridge/lib/parseException.js b/packages/react-native-bridge/lib/parseException.js
new file mode 100644
index 00000000000000..f8b97af7ed5c97
--- /dev/null
+++ b/packages/react-native-bridge/lib/parseException.js
@@ -0,0 +1,181 @@
+/**
+ * External dependencies
+ */
+import { version as RNV } from 'react-native/Libraries/Core/ReactNativeVersion';
+
+/**
+ * Internal dependencies
+ */
+import { version as reactNativeBridgeVersion } from '../package.json';
+
+// The stack trace is limited to prevent crash logging service fail processing the exception.
+const STACKTRACE_LIMIT = 50;
+
+const isHermesEnabled = () => {
+	return !! global.HermesInternal;
+};
+
+// Based on environment functions of Sentry React Native SDK:
+// https://github.com/getsentry/sentry-react-native/blob/e0f0885fa26f28909e28001fb7c25270655588cf/src/js/utils/environment.ts
+const getReactNativeContext = () => {
+	const isTurboModuleEnabled =
+		typeof global.__turboModuleProxy !== 'undefined';
+	const isFabricEnabled = typeof global.nativeFabricUIManager !== 'undefined';
+	const hermesVersion =
+		global.HermesInternal &&
+		global.HermesInternal.getRuntimeProperties &&
+		global.HermesInternal.getRuntimeProperties()[ 'OSS Release Version' ];
+	const reactNativeVersion = `${ RNV.major }.${ RNV.minor }.${ RNV.patch }${
+		RNV.prerelease !== null ? `-${ RNV.prerelease }` : ''
+	}`;
+	return {
+		is_hermes_enabled: isHermesEnabled(),
+		is_turbo_module_enabled: isTurboModuleEnabled,
+		is_fabric_enabled: isFabricEnabled,
+		hermes_version: isHermesEnabled() ? hermesVersion : null,
+		react_native_version: reactNativeVersion,
+	};
+};
+
+const stacktraceLineRegex =
+	/^\s*at (?:(.+?\)(?: \[.+\])?|.*?) ?\((?:address at )?)?(?:async )?((?:<anonymous>|[-a-z]+:|.*bundle|\/)?.*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
+const UNKNOWN_FUNCTION = '?';
+
+// Based on function `chrome` Stack line parser of Sentry React Native SDK:
+// https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/browser/src/stack-parsers.ts#L53-L83
+// And function `createReactNativeRewriteFrames`:
+// https://github.com/getsentry/sentry-react-native/blob/adfb66f16438dfd98f280307844778c7291b584b/src/js/integrations/rewriteframes.ts#L17-L69
+const parseStacktraceLine = ( line ) => {
+	const parts = stacktraceLineRegex.exec( line );
+
+	if ( ! parts ) {
+		return;
+	}
+
+	let filename = parts[ 2 ];
+	const func = parts[ 1 ] || UNKNOWN_FUNCTION;
+	const lineno = parts[ 3 ] ? +parts[ 3 ] : undefined;
+	let colno = parts[ 4 ] ? +parts[ 4 ] : undefined;
+
+	if ( filename ) {
+		// Filter out unneeded parts from filename
+		filename = filename
+			.replace( /^file:\/\//, '' )
+			.replace( /^address at /, '' )
+			.replace( /^.*\/[^.]+(\.app|CodePush|.*(?=\/))/, '' );
+
+		// Add prefix to filename
+		if ( filename !== '[native code]' && filename !== 'native' ) {
+			const appPrefix = 'app://';
+			filename =
+				filename.indexOf( '/' ) === 0
+					? `${ appPrefix }${ filename }`
+					: `${ appPrefix }/${ filename }`;
+		}
+	}
+
+	// Check Hermes Bytecode stack trace and convert to 1-based column
+	if ( isHermesEnabled() && lineno === 1 && colno !== undefined ) {
+		// hermes bytecode columns are 0-based, while v8 and jsc are 1-based.
+		// Hermes stack trace without debug info have always line with value 1
+		// and column points to a bytecode position.
+		// https://github.com/facebook/react/issues/21792#issuecomment-873171991
+		colno += 1;
+	}
+
+	return {
+		filename,
+		function: func,
+		...( lineno ? { lineno } : null ),
+		...( colno ? { colno } : null ),
+	};
+};
+
+// Based on function `createStackParser` and `parseStackFrames` of Sentry JavaScript SDK:
+// - https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/utils/src/stacktrace.ts#L16-L59
+// - https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/browser/src/eventbuilder.ts#L100-L118
+// And function `stripSentryFramesAndReverse` of Sentry React Native SDK:
+// https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/utils/src/stacktrace.ts#L80-L117
+const parseStacktrace = ( exception ) => {
+	const plainStacktrace = exception.stacktrace || exception.stack || '';
+	const entries = [];
+	const lines = plainStacktrace.split( '\n' );
+
+	for ( let i = 0; i < lines.length; i++ ) {
+		const line = lines[ i ];
+		// Ignore lines over 1kb as they are unlikely to be valid entries.
+		if ( line.length > 1024 ) {
+			continue;
+		}
+
+		// Skip error message lines.
+		if ( line.match( /\S*Error: / ) ) {
+			continue;
+		}
+
+		const entry = parseStacktraceLine( line );
+		if ( entry ) {
+			entries.push( entry );
+		}
+
+		if ( entries.length >= STACKTRACE_LIMIT ) {
+			break;
+		}
+	}
+
+	const reverseEntries = Array.from( entries ).reverse();
+
+	return reverseEntries.slice( 0, STACKTRACE_LIMIT ).map( ( entry ) => ( {
+		...entry,
+		filename:
+			entry.filename ||
+			reverseEntries[ reverseEntries.length - 1 ].filename,
+	} ) );
+};
+
+// Based on function `extractMessage` of Sentry JavaScript SDK:
+// https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/browser/src/eventbuilder.ts#L142-L151
+const extractMessage = ( exception ) => {
+	const message = exception?.message;
+	if ( ! message ) {
+		return 'No error message';
+	}
+	if ( typeof message.error?.message === 'string' ) {
+		return message.error.message;
+	}
+	return message;
+};
+
+// Based on function `exceptionFromError` of Sentry JavaScript SDK:
+// https://github.com/getsentry/sentry-javascript/blob/de681dcf7d6dac69da9374bbdbe2e2f7e00f0fdc/packages/browser/src/eventbuilder.ts#L31-L49
+const parseException = ( originalException ) => {
+	const exception = {
+		type: originalException?.name,
+		message: extractMessage( originalException ),
+	};
+
+	const stacktrace = parseStacktrace( originalException );
+	if ( stacktrace.length ) {
+		exception.stacktrace = stacktrace;
+	}
+
+	if ( exception.type === undefined && exception.message === '' ) {
+		exception.message = 'Unknown error';
+	}
+
+	return exception;
+};
+
+export default ( exception, { context, tags } = {} ) => {
+	return {
+		...parseException( exception ),
+		context: {
+			...context,
+			...getReactNativeContext(),
+		},
+		tags: {
+			...tags,
+			gutenberg_mobile_version: reactNativeBridgeVersion,
+		},
+	};
+};
diff --git a/packages/react-native-bridge/lib/test/__snapshots__/parseException.test.js.snap b/packages/react-native-bridge/lib/test/__snapshots__/parseException.test.js.snap
new file mode 100644
index 00000000000000..3c4798ae1133cd
--- /dev/null
+++ b/packages/react-native-bridge/lib/test/__snapshots__/parseException.test.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Parse exception parses stack trace 1`] = `
+{
+  "context": {
+    "hermes_version": null,
+    "is_fabric_enabled": false,
+    "is_hermes_enabled": false,
+    "is_turbo_module_enabled": false,
+    "react_native_version": "0.71.2-beta-1",
+  },
+  "message": "Test exception",
+  "stacktrace": [
+    {
+      "colno": 21,
+      "filename": "app:///reactNative.js",
+      "function": "reactNativeFunction",
+      "lineno": 5383,
+    },
+    {
+      "colno": 42,
+      "filename": "app:///otherFile.native.js",
+      "function": "anonymous",
+      "lineno": 64266,
+    },
+    {
+      "filename": "native",
+      "function": "forEach",
+    },
+    {
+      "colno": 43,
+      "filename": "app:///rootFile.native.js",
+      "function": "topLevelFunction",
+      "lineno": 64215,
+    },
+    {
+      "colno": 21,
+      "filename": "app:///bridge.native.js",
+      "function": "functionThatTriggersNative",
+      "lineno": 62932,
+    },
+    {
+      "filename": "native",
+      "function": "apply",
+    },
+    {
+      "colno": 22,
+      "filename": "app:///file3.native.js",
+      "function": "otherFunction",
+      "lineno": 62524,
+    },
+    {
+      "colno": 40,
+      "filename": "app:///file2.native.js",
+      "function": "parentFunction",
+      "lineno": 459785,
+    },
+    {
+      "colno": 24,
+      "filename": "app:///file1.native.js",
+      "function": "functionThatFailed",
+      "lineno": 546277,
+    },
+  ],
+  "tags": {
+    "gutenberg_mobile_version": "1.100.0",
+  },
+  "type": "Error",
+}
+`;
diff --git a/packages/react-native-bridge/lib/test/parseException.test.js b/packages/react-native-bridge/lib/test/parseException.test.js
new file mode 100644
index 00000000000000..64d16356adba27
--- /dev/null
+++ b/packages/react-native-bridge/lib/test/parseException.test.js
@@ -0,0 +1,75 @@
+/**
+ * Internal dependencies
+ */
+import parseException from '../parseException';
+
+// Mock React Native version to 0.71.2-beta-1
+jest.mock( 'react-native/Libraries/Core/ReactNativeVersion', () => ( {
+	version: {
+		major: 0,
+		minor: 71,
+		patch: 2,
+		prerelease: 'beta-1',
+	},
+} ) );
+
+// Mock Gutenberg Mobile version to 1.100.0
+jest.mock( '../../package.json', () => ( { version: '1.100.0' } ), {
+	virtual: true,
+} );
+
+describe( 'Parse exception', () => {
+	it( 'parses stack trace', () => {
+		const rawException = {
+			name: 'Error',
+			message: 'Test exception',
+			stack: 'TypeError: Test exception\n    at functionThatFailed (file1.native.js:546277:24)\n    at parentFunction (file2.native.js:459785:40)\n    at otherFunction (file3.native.js:62524:22)\n    at apply (native)\n    at functionThatTriggersNative (bridge.native.js:62932:21)\n    at topLevelFunction (rootFile.native.js:64215:43)\n    at forEach (native)\n    at anonymous (otherFile.native.js:64266:42)\n    at reactNativeFunction (reactNative.js:5383:21)',
+		};
+
+		expect( parseException( rawException ) ).toMatchSnapshot();
+	} );
+
+	it( 'parses Hermes stack trace', () => {
+		global.HermesInternal = true;
+
+		const rawException = {
+			name: 'Error',
+			message: 'Test exception',
+			stack: 'TypeError: Test exception\n    at functionThatFailed (file1.native.js:1:1000)\n    at apply (native)\n    at functionThatTriggersNative (bridge.native.js:1:2000)\n    at topLevelFunction (rootFile.native.js:1:3000)',
+		};
+
+		const exception = parseException( rawException );
+		// Columns are incremented by one for Hermes stack traces
+		expect( exception.stacktrace[ 0 ].colno ).toBe( 3001 );
+		expect( exception.stacktrace[ 1 ].colno ).toBe( 2001 );
+		expect( exception.stacktrace[ 2 ].colno ).toBeUndefined();
+		expect( exception.stacktrace[ 3 ].colno ).toBe( 1001 );
+
+		global.HermesInternal = undefined;
+	} );
+
+	it( 'limits stack trace entries', () => {
+		const rawException = {
+			stack: [ ...Array( 100 ) ]
+				.map(
+					( _, index ) =>
+						`\n    at function${ index } (file1.native.js:546277:${ index })`
+				)
+				.join( '' ),
+		};
+		const exception = parseException( rawException );
+		expect( exception.stacktrace.length ).toBe( 50 );
+	} );
+
+	it( 'sets default error message', () => {
+		const exception = parseException( {} );
+		expect( exception.message ).toBe( 'No error message' );
+	} );
+
+	it( 'sets unkown error type', () => {
+		const exception = parseException( {
+			message: { error: { message: '' } },
+		} );
+		expect( exception.message ).toBe( 'Unknown error' );
+	} );
+} );
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index feea43046795d0..b0c0a2485520df 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.0",
+	"version": "1.121.0",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",
@@ -17,10 +17,14 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"main": "index.js",
 	"react-native": "index",
 	"dependencies": {
-		"@wordpress/react-native-aztec": "file:../react-native-aztec"
+		"@wordpress/react-native-aztec": "*"
 	},
 	"peerDependencies": {
 		"react-native": "*"
diff --git a/packages/react-native-editor/.bundle/config b/packages/react-native-editor/.bundle/config
new file mode 100644
index 00000000000000..d137d242ed7420
--- /dev/null
+++ b/packages/react-native-editor/.bundle/config
@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1
\ No newline at end of file
diff --git a/packages/react-native-editor/.gitignore b/packages/react-native-editor/.gitignore
index ff41241cdc867d..e2c7d133ccaedf 100644
--- a/packages/react-native-editor/.gitignore
+++ b/packages/react-native-editor/.gitignore
@@ -28,6 +28,11 @@ bundle/
 .gradle/
 android/app/src/main/assets/
 android/app/src/main/res/raw/
+android/app/src/main/res/drawable-hdpi/
+android/app/src/main/res/drawable-mdpi/
+android/app/src/main/res/drawable-xhdpi/
+android/app/src/main/res/drawable-xxhdpi/
+android/app/src/main/res/drawable-xxxhdpi/
 
 # iOS builds
 *.app.zip
@@ -46,7 +51,7 @@ build.log
 # Local configuration file (sdk path, etc)
 local.properties
 
-# XCode
+# Xcode
 build/
 *.pbxuser
 !default.pbxuser
@@ -61,6 +66,7 @@ xcuserdata
 *.moved-aside
 DerivedData
 *.xcuserstatee
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -89,9 +95,10 @@ buck-out/
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
@@ -115,7 +122,7 @@ bin/wp-cli.phar
 # Report generated from jest-junit
 /junit.xml
 
-# Cocoapods
+# Ruby / CocoaPods
 
 ios/Pods
-ios/vendor
+/vendor/bundle/
diff --git a/packages/react-native-editor/.npmrc b/packages/react-native-editor/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/react-native-editor/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 2cd7647c0e0f6f..6031e402100c98 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,29 +11,376 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+
+## 1.121.0
+-   [internal] Fix Inserter items list filtering [#62334]
+-   [*] Prevent hiding the keyboard when creating new list items [#62446]
+-   [*] Fix issue when pasting HTML content [#62588]
+-   [**] Add support prefix transforms [#62576]
+-   [*] Remove themes from supported endpoints [#63183]
+
+## 1.120.1
+
+-   [*] RichText - Fix undefined onDelete callback [#62486]
+
+## 1.120.0
+
+-   [*] Prevent deleting content when backspacing in the first Paragraph block [#62069]
+-   [internal] Adds new bridge functionality for updating content [#61796]
+
+## 1.119.1
+
+-   [*] Image corrector - Check the path extension is a valid one [#62190]
+-   [*] Unsupported block - UI improvements [#62240]
+
+## 1.119.0
+
+-   [internal] Remove circular dependencies within the components package [#61102]
+-   [internal] Upgrade target sdk version to Android API 34 [#61727]
+
+## 1.118.0
+
+-   [*] Fix a crash when pasting file images and special comment markup [#60476]
+-   [*] Update Aztec to v2.1.2 [#61007]
+-   [*] KeyboardAwareFlatList - Enable FlatList virtualization for iOS [#59833]
+
+## 1.117.0
+
+-   [*] Add empty fallback option for the BottomSheetSelectControl component [#60333]
+-   [*] Fix Quote Block styles [#60476]
+-   [*] Prevent passing potential false values to the onPress prop [#60595]
+-   [*] ColorPalette - Check for ScrollView reference [#60562]
+-   [*] Raw Handling - msListIgnore - Check attributes are valid [#60375]
+
+## 1.116.0
+
+-   [**] Highlight color formatting style improvements [#57650]
+
+## 1.115.0
+
+-   [*] Improve consistency of the block outline indicating the currently selected block [#59415]
+-   [*] Gallery block items with in-progress, paused, or failed media uploads correctly display an highlight outline when selected [#59423]
+-   [**] [internal] Upgrade React Native to version 0.73.3 [#58475]
+-   [**] Add error boundary components and exception logging [#59221]
+-   [**] Fix crash occurring when the URL associated with a Video block is changed too quickly [#59841]
+-   [**] Enable setting HTML anchor IDs for all supported block types [#59802]
+
+## 1.114.1
+
+-   [**] Fix a crash produced when the content of a synced pattern is updated [#59632]
+
+## 1.114.0
+
+-   [*] Prevent crash when autoscrolling to blocks [#59110]
+-   [*] Remove opacity change when images are being uploaded [#59264]
+-   [*] Media & Text blocks correctly show an error message when the attached video upload fails [#59288]
+
+## 1.112.0
+
+-   [*] [internal] Upgrade React Native to version 0.71.15 [#57667]
+-   [**] Prevent images from temporarily disappearing when uploading media [#57869]
+-   [**] Fix crash occurring on large post on Android [#58266]
+
+## 1.111.2
+
+-   [*] [internal] Remove `mediaFilesCollectionBlock` initial prop [#58140]
+
+## 1.111.1
+
+-   [**] Video block: Fix logic for displaying empty state based on source presence [#58015]
+-   [**] Fix crash when RichText values are not defined [#58088]
+
+## 1.111.0
+
+-   [**] Image block media uploads display a custom error message when there is no internet connection [#56937]
+-   [*] Fix missing custom color indicator for custom gradients [#57605]
+-   [**] Display a notice when a network connection unavailable [#56934]
+
+## 1.110.1
+
+-   [**] Fix crash when RichText values are not defined [#58088]
+
+## 1.110.0
+
+-   [*] [internal] Move InserterButton from components package to block-editor package [#56494]
+-   [*] [internal] Move ImageLinkDestinationsScreen from components package to block-editor package [#56775]
+-   [*] Fix crash when blockType wrapperProps are not defined [#56846]
+-   [*] Guard against an Image block styles crash due to null block values [#56903]
+-   [**] Fix crash when sharing unsupported media types on Android [#56791]
+-   [**] Fix regressions with wrapper props and font size customization [#56985]
+-   [***] Avoid keyboard dismiss when interacting with text blocks [#57070]
+-   [**] Auto-scroll upon block insertion [#57273]
+-   [*] Unselect blocks using the hardware back button (Android) [#57279]
+
+## 1.109.3
+
+-   [**] Fix duplicate/unresponsive options in font size settings. [#56985]
+
+## 1.109.2
+
+-   [**] Fix issue related to text color format and receiving in rare cases an undefined ref from `RichText` component [#56686]
+-   [**] Fixes a crash on pasting MS Word list markup [#56653]
+-   [**] Address rare cases where a null value is passed to a heading block, causing a crash [#56757]
+-   [**] Fixes a crash related to HTML to blocks conversion when no transformations are available [#56723]
+-   [**] Fixes a crash related to undefined attributes in `getFormatColors` function of `RichText` component [#56684]
+-   [**] Fixes an issue with custom color variables not being parsed when using global styles [#56752]
+
+## 1.109.1
+
+-   [***] Fix issue when backspacing in an empty Paragraph block [#56496]
+
+## 1.109.0
+
+-   [*] Audio block: Improve legibility of audio file details on various background colors [#55627]
+-   [*] In the deeply nested block warning, only display the ungroup option for blocks that support it [#56445]
+
+## 1.108.0
+
+-   [*] Fix error when pasting deeply nested structure content [#55613]
+-   [*] Fix crash related to accessing undefined value in `TextColorEdit` [#55664]
+
+## 1.107.0
+
+-   [*] Social Icons: Fix visibility of inactive icons when used with block based themes in dark mode [#55398]
+-   [*] Synced Patterns: Fix visibility of heading section when used with block based themes in dark mode [#55399]
+-   [*] Classic block: Add option to convert to blocks [#55461]
+
+## 1.106.0
+
+-   [*] Exit Preformatted and Verse blocks by triple pressing the Return key [#53354]
+-   [*] Fix quote block border visibility when used with block based themes in dark mode [#54964]
+
+## 1.105.0
+
+-   [*] Limit inner blocks nesting depth to avoid call stack size exceeded crash [#54382]
+-   [*] Prevent crashes when setting an invalid media URL for Video or Audio blocks [#54834]
+-   [**] Fallback to Twitter provider when embedding X URLs [#54876]
+-   [*] [internal] Update Ruby version from 2.7.4 to 3.2.2 [#54897]
+
+## 1.104.0
+
+-   [*] Fix the obscurred "Insert from URL" input for media blocks when using a device in landscape orientation. [#54096]
+-   [**] RichText - Update logic for the placeholder text color [#54259]
+
+## 1.103.3
+
+-   [*] Bump `WordPress-Aztec-iOS` version to `1.19.9` [#54456]
+
+## 1.103.2
+
+-   [*] Fix issue with missing characters in Add Media placeholder button [#54281]
+
+## 1.103.1
+
+-   [**] Fix long-press gestures not working in RichText component [Android] [#54213]
+
+## 1.103.0
+
+-   [**] Replace third-party dependency react-native-hsv-color-picker with first-party code [#53329]
+-   [*] Search Control - Prevent calling TextInput's methods when undefined [#53745]
+-   [*] Improve horizontal rule styles to avoid invisible lines [#53883]
+-   [*] Fix horizontal rule style extensions [#53917]
+-   [*] Add block outline to all Social Link blocks when selected [#54011]
+-   [*] Columns block - Fix transforming into a Group block crash [#54035]
+-   [*] Fix Social Icons block alignment [#54100]
+
+## 1.102.1
+
+-   [**] Fix Voice Over and assistive keyboards [#53895]
+
+## 1.102.0
+
+-   [*] Display custom color value in mobile Cover Block color picker [#51414]
+-   [**] Display outline around selected Social Link block [#53377]
+-   [**] Fixes font customization not getting updated on iOS [#53391]
+
+## 1.101.2
+
+-   [**] Fix Voice Over and assistive keyboards [#53895]
+
+## 1.101.1
+
+-   [**] Fix the dynamic height when opening/closing navigation screens within the bottom sheet. [https://github.com/WordPress/gutenberg/pull/53608]
+
+## 1.101.0
+
+-   [*] Remove visual gap in mobile toolbar when a Gallery block is selected [#52966]
+-   [*] Remove Gallery caption button on mobile [#53010]
+-   [**] Upgrade React Native to 0.71.11 [#51303]
+-   [*] Upgrade Gradle to 8.2.1 & AGP to 8.1.0 [#52872]
+-   [*] Fix Gallery block selection when adding media [#53127]
+
+## 1.100.2
+
+-   [**] Fix iOS Focus loop for RichText components [#53217]
+
+## 1.100.1
+
+-   [**] Add WP hook for registering non-core blocks [#52791]
+
+## 1.100.0
+
+-   [**] Add media inserter buttons to editor toolbar [#51827]
+-   [**] Update native BlockOutline component styles to remove blue border from blocks [#51222]
+-   [**] Move the undo/redo buttons to the navigation bar [#51766]
+-   [**] Update Editor block inserter button styles and default text input placeholder/selection styles [#52269]
+-   [**] Update Editor toolbar icons and colors [#52336]
+-   [*] Update Block Settings button border [#52715]
+
+## 1.99.1
+
+-   [**] Fix crash related to removing a block under certain conditions [#52595]
+
+## 1.99.0
+
+-   [*] Rename "Reusable blocks" to "Synced patterns", aligning with the web editor. [#51704]
+-   [**] Fix a crash related to Reanimated when closing the editor [#52320]
+
+## 1.98.1
+
+-   [*] fix: Display heading level dropdown icons and labels [#52004]
+
+## 1.98.0
+
+-   [*] Image block - Fix issue where in some cases the image doesn't display the right aspect ratio [#51463]
+-   [*] Fix cursor positioning when dictating text on iOS [#51227]
+
+## 1.97.1
+
+-   [**] Fix crash when using the delete key to remove a single button [#51435]
+-   [*] Ensure text input field is not editable when Bottom sheet cell is disabled [#51567]
+
+## 1.97.0
+
+-   [**] [iOS] Fix dictation regression, in which typing/dictating at the same time caused content loss. [#49452]
+-   [*] [internal] Upgrade compile and target sdk version to Android API 33 [#50731]
+-   [*] Display lock icon in disabled state of `Cell` component [#50907]
+
+## 1.96.1
+
+-   [**] Fix Android-only issue related to block toolbar not being displayed on some blocks in UBE [#51131]
+
+## 1.96.0
+
+-   [**] Tapping on all nested blocks gets focus directly instead of having to tap multiple times depending on the nesting levels. [#50672]
+-   [*] Add disabled style to `Cell` component [#50665]
+-   [**] Fix undo/redo history when inserting a link configured to open in a new tab [#50460]
+-   [*] [List block] Fix an issue when merging a list item into a Paragraph would remove its nested list items. [#50701]
+
+## 1.95.0
+
+-   [*] Fix crash when trying to convert to regular blocks an undefined/deleted reusable block [#50475]
+-   [**] Tapping on nested text blocks gets focus directly instead of having to tap multiple times depeding on the nesting levels. [#50108]
+-   [*] Use host app namespace in reusable block message [#50478]
+-   [**] Configuring a link to open in a new tab no longer results in a partial loss of edit history (undo and redo) [#50460]
+
+## 1.94.0
+
+-   [*] Split pasted content between title and body. [#37169]
+
+## 1.93.1
+
+-   [**] Fix regression with the Color hook and ColorPanel. [#49917]
+
+## 1.93.0
+
+-   [***] [iOS] Fixed iOS scroll jumping issue by refactoring KeyboardAwareFlatList improving writing flow and caret focus handling. [#48791]
+
+## 1.92.1
+
+-   [*] Avoid empty Gallery block error [#49557]
+
+## 1.92.0
+
+-   No user facing changes.
+
+## 1.91.0
+
+-   [*] Allow new block transformations for most blocks. [#48792]
+
+## 1.90.0
+
+-   [*] Fix parsing of css units for null matched values [#48484]
+-   [*] Spacer block - Add initial support for spacing presets [#47258]
+-   [*] Support Visual Regression testing [#47845]
+-   [*] Add metadata parameter to media upload events [#48103]
+
+## 1.89.1
+
+-   [*] Fix inaccessible block settings within the unsupported block editor [#48435]
+
+## 1.89.0
+
+-   No user facing changes.
+
+## 1.88.0
+
+-   [*] Bump Android `minSdkVersion` to 24 [#47604]
+-   [*] Update React Native Reanimated to 2.9.1-wp-3 [#47574]
+-   [*] Bump Aztec version to `1.6.3` [#47610]
+
+## 1.87.3
+
+-   [*] Fix insert blocks not handling raw string properly in unsupported block editor [#47472]
+
+## 1.87.2
+
+-   [*] Add boolean contentStyle and clientId check to Column Edit InnerBlocks [#47234]
+-   [*] Line-height and font-size regression fixes [#47284]
+
+## 1.87.1
+
+-   [**] Gallery block: Address styling regression, in which negative margin was added [#47086]
+-   [*] RichText - Parse CSS values and avoid setting undefined ones [#47080]
+
+## 1.87.0
+
+-   [*] Add capabilities to force only Core blocks and control Support section [#46215]
+
+## 1.86.1
+
+-   [*] Block Actions Menu - Fix block title regression and adds integration tests [#46699]
+
+## 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.1
+
+-   [**] Prevent error message from unneccesarily firing when uploading to Gallery block [#46175]
+
 ## 1.85.0
+
 -   [*] [iOS] Fixed iOS Voice Control support within Image block captions. [#44850]
 
 ## 1.84.1
+
 -   [**] Native inner blocks merge where appropriate [#45048]
 
 ## 1.84.0
+
 -   [*] Upgrade compile and target sdk version to Android API 31 [#44610]
 -   [*] [iOS] Fixed iOS Voice Control support within Image block captions. [#44850]
 
 ## 1.83.0
-* No User facing changes *
+
+-   No user facing changes.
 
 ## 1.82.1
+
 -   [**] List block v2: Fix issues splitting or merging paragraphs into the block [#43949]
 
 ## 1.82.0
+
 -   [*] [iOS] Explicitly set tint color for action sheets to always be blue [#43759]
 
 ## 1.81.2
+
 -   [**] List V2 - Prevent error when list is empty [#43861]
 
 ## 1.81.1
+
 -   [*] List block v2: Fix text color inconsistencies with list items [#43244]
 -   [*] Use default placeholder text color for native List Item [#43353]
 -   [**] Add BlockListCompact [#43431]
@@ -41,21 +388,26 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Disable FastImage on Android [#43322]
 
 ## 1.81.0
+
 -   [***] List block V2 [#42702]
 
 ## 1.80.1
+
 -   [*] Image - Workaround for Android and orientation changes [#42900]
 
 ## 1.80.0
+
 -   [*] Add React Native FastImage [#42009]
 -   [*] Block inserter displays block collections [#42405]
 -   [*] Fix incorrect spacing within Image alt text footnote [#42504]
 -   [***] Gallery and Image block - Performance improvements [#42178]
 
 ## 1.79.1
+
 -   [**] Fix a crash when scrolling posts containing Embed blocks (Android 12 only) [#42514]
 
 ## 1.79.0
+
 -   [*] Add 'Insert from URL' option to Video block [#41493]
 -   [*] Image block copies the alt text from the media library when selecting an item [#41839]
 -   [*] Introduce "block recovery" option for invalid blocks [#41988]
@@ -454,8 +806,8 @@ For each user feature we should also add a importance categorization label  to i
 ## 1.42.0
 
 -   [***] Adding support for selecting different unit of value in Cover and Columns blocks [#26161]
--   [**] Button block - Add link picker to the block settings [#26206]
--   [**] Support to render background/text colors in Group, Paragraph and Quote blocks [#25994]
+-   [**] Button block - Add link picker to the block settings [#26206]
+-   [**] Support to render background/text colors in Group, Paragraph and Quote blocks [#25994]
 -   [*] Fix theme colors syncing with the editor [#26821]
 -   [**] Fix issue where a blocks would disappear when deleting all of the text inside without requiring the extra backspace to remove the block. [#27583]
 
diff --git a/packages/react-native-editor/__device-tests__/.eslintrc.js b/packages/react-native-editor/__device-tests__/.eslintrc.js
index 7a9957b5fc5721..1b363c837f44df 100644
--- a/packages/react-native-editor/__device-tests__/.eslintrc.js
+++ b/packages/react-native-editor/__device-tests__/.eslintrc.js
@@ -1,7 +1,10 @@
 module.exports = {
 	extends: '../.eslintrc.js',
 	globals: {
-		editorPage: true, // Defined in 'jest_ui_test_environment.js'
+		// Defined in 'jest_ui_test_environment.js'
+		editorPage: true,
+		e2eTestData: true,
+		e2eUtils: true,
 	},
 	rules: {
 		'jest/expect-expect': 'off',
diff --git a/packages/react-native-editor/__device-tests__/CONTRIBUTING.md b/packages/react-native-editor/__device-tests__/CONTRIBUTING.md
deleted file mode 100644
index b26ce460e8b726..00000000000000
--- a/packages/react-native-editor/__device-tests__/CONTRIBUTING.md
+++ /dev/null
@@ -1,44 +0,0 @@
-Writing a UI test? Great! 😬 This guide is here to help fill in some of the blanks of how the tests are written now and how you can add a new one.
-
-You can find our on-device UI tests in the `__device-tests__` folder and that's where all of the code for that really lives.  
-The test suite follows a sort of [Page Object Pattern](https://webdriver.io/docs/pageobjects.html), the `__device-tests__/pages/editor-page.js` manages all interactions with the pages and the `__device-tests__/gutenberg-editor.test.js` actually uses the functions made available via the Page Object `EditorPage` to drive the test cases. At the time of writing this, all the tests live there but as the suite gets large it might be better to manage different classes of tests in different files.
-
-So what does the process for writing a test look like? Here are some steps that I hope can help make this easier,
-
-### First, define the scenario
-
--   What are the actions that need to take place here? Walk through the scenario and manually to have an idea of what the test steps will need to do, the elements you'll need to interact with and how you're going to need to interact with them. I found it helps to properly define the steps taken in the scenario and the different user interactions that are needed to accomplish it.
-
-You'd just add a new scenario to the test file as well that would look something like,
-
-```javscript
-it( 'should be able to do something', async () => {
-	// Code to do something...
-} );
-```
-
-That first parameter in the block above is where you'd put a short description of the scenario while the next parameter is the code you'd like to execute.
-
-### Second, figure out how to find the elements
-
--   The UI tests rely on locator strategies to identify elements... There's a number of locator strategies available to use and [this blog post](https://saucelabs.com/blog/advanced-locator-strategies) describes in a little more detail what a few of these are and how to use them. You'll need to start thinking about what locator strategy you'll need to use to find the elements you need if it isn't already available.
--   The preferred strategy is the accessibility identifier and in a lot of cases this might not be possible and you'll have to resort to other less robust alternatives such as XPath.
-
-There's a few tools you have available to figure out what you need.
-
-For Android, you can fire up the app and then within Android Studio select `Tools -> Layout Inspector` which will then open up a `.li` file which you can then use to inspect various areas of the app, here's a [screenshot](https://d.pr/free/i/anU50R) of what that looks like.
-
-For iOS, you can also fire up and use the accessibility inspector, which is an app that should come available on your OSX machine. From there you can choose the process running your simulator and inspect various areas of the app.
-
-Alternative for both of these platforms and for an interface to simulate the commands I'd recommend [Appium Desktop](https://github.com/appium/appium-desktop/releases/tag/v1.12.1). A great tool for inspecting the view hierarchy and interacting with elements on screen as your test would. Here's a [screenshot](https://d.pr/free/i/GziQ5Q) of what that would look like.
-
-Using one or a combination of these tools will make it much easier to identify what locator strategy you're going to use or which elements need accessibility identifiers to ease the search process without affecting VoiceOver features.
-
-### Finally, once you've figured out how you're going to find the elements
-
--   You'll write any functions needed to interact with the page in the `EditorPage` page object and then call those interactions within the test. The code you'll need to write to actually do the finding will use a combination of
-
--   Appium's spec http://appium.io/docs/en/about-appium/intro/ which you can find examples of a variety of functions under the commands tab
--   WebDriver I/O Appium protocols https://webdriver.io/docs/api/appium.html which provides examples and descriptions of what those look like.
-
-It takes some getting use to but looking at the existing code should be helpful in identifying common commands that it'd help to be familiar with.
diff --git a/packages/react-native-editor/__device-tests__/README.md b/packages/react-native-editor/__device-tests__/README.md
index 3252b378c4a504..719adbbcf94265 100644
--- a/packages/react-native-editor/__device-tests__/README.md
+++ b/packages/react-native-editor/__device-tests__/README.md
@@ -1,72 +1,97 @@
-# Overview
+# Mobile Gutenberg E2E Tests
 
-We use [appium](http://appium.io/) combined with [SauceLabs](https://saucelabs.com/) as an on-device testing solution for covering writing flows using Gutenberg blocks.
+The Mobile Gutenberg (MG) project maintains a suite of automated end-to-end (E2E) tests that uses [Appium](https://appium.io/docs/en/2.1/) to facilitate UI automation. The E2E tests run on iOS simulators and Android emulators to simulate an environment similar to that of an end user. This document provides an overview for running these tests on your local development computer.
 
-Appium is built on the idea that testing native apps shouldn't require including an SDK or recompiling your app. And that you should be able to use your preferred test practices, frameworks, and tools. Appium is an open source project and has made design and tool decisions to encourage a vibrant contributing community.
+## Setup
 
-SauceLabs is a cloud hosting platform that provides access to a variety of simulators, emulators and real devices.
+1. Complete the [React Native Getting Started](https://reactnative.dev/docs/environment-setup) guide for both iOS and Android, which covers setting up Xcode, Android Studio, the Android SDK.
+1. Open [Xcode settings](https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes#Install-and-manage-Simulator-runtimes-in-settings) to install the iOS 16.2 simulator runtime.
+1. Install [`jq`](https://jqlang.github.io/jq/download/) via [Homebrew](https://brew.sh/) or your preferred package manager.
+1. `npm run native test:e2e:setup`
 
-## Getting set up to run the tests
+## Running Tests
 
-### Emulators && Simulators
+The process for running the E2E tests differ in subtle, important ways for iOS and Android respectively. Before running E2E tests, if you previously ran `npm run native start:reset`, **ensure the Metro development server is no longer running.**
 
-iOS: Once you've already set up XCode and the simulators you should be good to go to run the tests on an iOS simulator.
+### iOS
 
-Android: You'll need to have created the emulator images and fired up the desired emulator before running the tests against an Android emulator.
+The following script will launch the correct iOS simulator and run all of the E2E tests.
 
-### Real Devices
+```shell
+npm run native test:e2e:ios:local
+```
 
-TBA
+### Android
 
-## Running the tests locally
+The following script will launch the correct Android emulator and run all of the E2E tests.
 
-TLDR; to run the tests locally ensure metro isn't running and then run `npm run native test:e2e:ios:local` and `npm run native test:e2e:android:local` for the desired platform.
+```shell
+npm run native test:e2e:android:local
+```
 
-Those commands include the process to build a testable version of the app with these steps:
+## Filtering Test Runs
 
-1. Create the JS bundle via `test:e2e:bundle:(ios|android)`
-1. Compile the native app code via `test:e2e:build-app:(ios|android)`
-1. Call the test runner via `device-tests:local`
+By default, the E2E test scripts run all tests in the suite. While this is helpful for verifying all tests pass, the entire test suite takes a long time to complete. Running all tests is not very effective for local development.
 
-Once the JS bundle and native app code are created they can be re-used by the test runner `device-tests:local` in subsequent runs. While writing tests:
+You can filter which test runs by one of two ways:
 
--   If you only changed the native app code you can run only `test:e2e:build-app:(ios|android)` followed by `device-tests:local`
--   If you only changed JS app code you can run only `test:e2e:bundle:(ios|android)` followed by `device-tests:local`
--   If you didn't change native or JS app code but only have modified e2e tests under `__device-tests__` you only need to re-rerun `device-tests:local` which uses the pre-built native and JS app code
--   If it's the case you don't want to run the
-    full suite and want to run a specific file or files you can run `TEST_RN_PLATFORM=android npm run native device-tests <pattern>` where the pattern can just be the file name.
+-   Passing a file name argument to the CLI script.
+-   Leveraging Jest’s interactive watch mode.
 
-### Debugging
+```shell
+# Run a single test file on iOS
+npm run native test:e2e:ios:local gutenberg-editor-paragraph.test.js
 
-There's a debug variant of the command: `device-tests:debug`, which starts a Node.js process that listens for a debugging client. You can use any inspector client at that point to attach and add breakpoints. More information about that can be found here: https://nodejs.org/en/docs/guides/debugging-getting-started/
+# Enable watch mode on iOS
+npm run native test:e2e:ios:local -- -- -- --watch
+```
 
-You can also write `debugger;` in the JS code in any line to add a breakpoint.
+## Speeding Up Test Runs
 
-### Starting the Appium Server
+The `native test:e2e:(android|ios):local` script performs several steps via associated npm scripts.
 
-One of the Caveats to using Appium is the need for the Appium server to be running to interact with the Simulator or Device through Webdriver, as a result the appium server will need to be started before running the tests. To make the entire process easier in the `beforeAll` block of the tests an Appium instance is fired up on a default port of 4723. If you already have something running on that port and would rather not stop that you can change the port within the code that starts that up. At the moment that port number is referenced from the config located at `__device-tests__/helpers/serverConfigs.js`. The process is killed in the `afterAll` block but at the time of writing this there's a small chance some errors might cause it not to get there so it might be best to kill the process yourself if you think something is up. The server output when running the tests are written to `appium-out.log`, this can provide useful information when debugging the issues with the tests.
+-   Create the JavaScript bundle: `test:e2e:bundle:(ios|android)`
+-   Compile the app: `test:e2e:build-app:(ios|android)`
+-   Launch the test runner: `device-tests:local`
 
-### WebDriver capabilities
+While we must run all of these at least once to produce a testable app, it is often not necessary to run them each multiple times over while modifying or writing tests. To speed up multiple test runs, you can invoke the individual scripts as needed.
 
-Appium uses a config object that contains `capabilities` to define how it will connect to a simulator or device, this object is currently located in `__device-tests__/helpers/caps.js` and then referenced when firing up the driver. There are two values that I think are important to know and that's
+-   If you only modified the native app code, you can run `test:e2e:build-app:(ios|android)` followed by `device-tests:local`.
+-   If you only modified JavaScript app code, you can run `test:e2e:bundle:(ios|android)` followed by `device-tests:local`.
+-   If you only modified E2E tests code, you can run `device-tests:local`.
 
--   `platformVersion` which is the platform version of a connected adb device. e.g `9.0` for Android or `12.2` for iOS. The version used here is upper bounded by the max allowed on CI but feel free to change this value locally as needed.
--   `app` which is the absolute path to the `.app` or `.apk` file or the path relative to the **Appium root**. It's important to note that when using the relative paths it's not to the project folder but to the appium server, since by default we start up appium in the project root when running the paths appear relative to the root but if you were using another instance of the Appium server the relative path would need to come from there.
+By default `device-tests:local` runs tests for Android. To run tests on iOS, you can prefix the script with the `TEST_RN_PLATFORM` environment variable.
 
-A full spec on the capabilities can be found [here](http://appium.io/docs/en/writing-running-appium/caps/). If you'd like to change configurations like
-what port appium runs on or what device or emulator the tests should be executed on that file would be where you'd like to make that update.
+```shell
+# Run tests on iOS
+TEST_RN_PLATFORM=ios npm run native device-tests:local
 
-## The run process
+# Run tests on iOS with watch mode enabled
+TEST_RN_PLATFORM=ios npm run native device-tests:local -- -- --watch
+```
 
-At the moment when running locally, the app attempts to fire up an appium server and then connects to it via webdriver. Then
+## Debugging Tests
 
--   on Android, a debug version of the app is bundled, built, and used.
--   on iOS a release version is bundled built and used.
+Much like other development servers, values outputted to the console via `console.log` should display in the Jest test runner server log.
 
-**It's important to ensure that **metro is not running.** This would cause the value of the `__DEV__` variable to be true and load up the sample blocks.**
+Occasionally, it is helpful to inspect breakpoints during the execution of a test.The MG project includes a `device-tests:debug` script which sets the `--inspect` flag required for attaching an inspector. Additional details on attaching an inspector can be found in Node.js’ [Debugging Guide](https://nodejs.org/en/docs/guides/debugging-getting-started).
 
-After the build is complete, an appium server is fired up on port 4723 and the device tests are ran on the connected device/simulator.
+## Writing Tests
 
----
+Jest is the test runner for the E2E test suite. Reviewing the [Jest’s Introduction](https://jestjs.io/docs/getting-started) documentation provides an overview of writing JavaScript-based tests for Jest.
 
-To read more about writing your own tests please read the [contributing guide](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/__device-tests__/CONTRIBUTING.md)
+The E2E tests utilize WebdriverIO as the Appium driver, which is an interface that allows Appium to automate a particular platform. The WebdriverIO documentation for [Appium](https://webdriver.io/docs/api/appium/) and the [driver object](https://webdriver.io/docs/api/browser) provides useful information for automating interactions with mobile apps.
+
+Additionally, the project’s E2E tests leverage a [Page Object](https://webdriver.io/docs/pageobjects/) pattern. The `editor-page.js` file defines methods managing all interactions with page UI. Tests themselves reside in separate files.
+
+Expanding the Page Object to interact with specific UI elements often requires determining a [locator strategy](https://saucelabs.com/resources/blog/advanced-locator-strategies) for the targeted UI element. Generally, an accessibility (a11y) identifier is preferred over an Xpath selector, which are slower and considered implementation details.
+
+Determining the correct selector query is often made easier by leveraging a tool to inspect the properties of UI elements.
+
+-   [**Appium Inspector**](https://github.com/appium/appium-inspector#readme) – cross-platform tool for inspecting UI elements and their properties.
+-   [**Android Studio Layout Inspector**](https://developer.android.com/studio/debug/layout-inspector) – Android tool allowing you to debug the layout of your app by showing a view hierarchy and allowing you to inspect the properties of each view.
+-   [**Xcode Accessibility Inspector**](https://developer.apple.com/documentation/accessibility/integrating_accessibility_into_your_app#4154486) – Xcode tool that displays all accessibility information for an element.
+
+## Continuous Integration
+
+In addition to running the E2E tests on local computers, the continuous integration (CI) server runs some of these tests on every Pull Request. Configuration for this can be found in the [.github configuration directory](/.github/workflows).
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js
deleted file mode 100644
index 8640484fe80bab..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-audio.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { waitForMediaLibrary } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Audio Block tests', () => {
-	it( 'should be able to add an audio block and a file to it', async () => {
-		// add an audio block
-		await editorPage.addNewBlock( blockNames.audio );
-
-		// dismiss the media picker automatically opened when adding an audio block
-		await waitForMediaLibrary( editorPage.driver );
-		await editorPage.closePicker();
-
-		// verify there's an audio block
-		const block = await editorPage.getFirstBlockVisible();
-		await expect( block ).toBeTruthy();
-
-		// tap on the audio block
-		block.click();
-
-		// wait for the media picker's Media Library option to come up
-		await waitForMediaLibrary( editorPage.driver );
-
-		// tap on Media Library option
-		await editorPage.chooseMediaLibrary();
-
-		// get the html version of the content
-		const html = await editorPage.getHtmlContent();
-
-		// verify the html matches the expected content
-		expect( html.toLowerCase() ).toBe(
-			testData.audioBlockPlaceholder.toLowerCase()
-		);
-	} );
-} );
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
deleted file mode 100644
index 2ab5bdda7f6ca7..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-2.test.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import {
-	headerBlockEmpty,
-	imageBlockEmpty,
-	listBlockEmpty,
-	moreBlockEmpty,
-	paragraphBlockEmpty,
-	separatorBlockEmpty,
-} from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for Block insertion 2', () => {
-	it( 'adds new block at the end of post', async () => {
-		await editorPage.addNewBlock( blockNames.heading );
-		await editorPage.addNewBlock( blockNames.list );
-
-		const expectedHtml = [ headerBlockEmpty, listBlockEmpty ].join(
-			'\n\n'
-		);
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'inserts between 2 existing blocks', async () => {
-		const firstBlock = await editorPage.getFirstBlockVisible();
-		await firstBlock.click();
-
-		await editorPage.addNewBlock( blockNames.separator );
-
-		const expectedHtml = [
-			headerBlockEmpty,
-			separatorBlockEmpty,
-			listBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'inserts block before selected block', async () => {
-		const separatorBlockElement = await editorPage.getBlockAtPosition(
-			blockNames.separator,
-			2
-		);
-		await separatorBlockElement.click();
-
-		await editorPage.addNewBlock( blockNames.image, 'before' );
-		await editorPage.closePicker();
-
-		const expectedHtml = [
-			headerBlockEmpty,
-			imageBlockEmpty,
-			separatorBlockEmpty,
-			listBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'inserts block at the end of post when no block is selected', async () => {
-		await editorPage.addNewBlock( blockNames.more );
-
-		const expectedHtml = [
-			headerBlockEmpty,
-			imageBlockEmpty,
-			separatorBlockEmpty,
-			listBlockEmpty,
-			moreBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-
-	it( 'creates a new Paragraph block tapping on the empty area below the last block', async () => {
-		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
-
-		const expectedHtml = [
-			headerBlockEmpty,
-			imageBlockEmpty,
-			separatorBlockEmpty,
-			listBlockEmpty,
-			moreBlockEmpty,
-			paragraphBlockEmpty,
-		].join( '\n\n' );
-
-		const html = await editorPage.getHtmlContent();
-		expect( html.toLowerCase() ).toBe( expectedHtml );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js
new file mode 100644
index 00000000000000..e25fe618fa18a1
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion-@canary.test.js
@@ -0,0 +1,171 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+import { isAndroid } from './helpers/utils';
+import testData, { slashInserter, shortText } from './helpers/test-data';
+
+describe( 'Gutenberg Editor tests for Block insertion', () => {
+	it( 'should be able to insert multi-paragraph text, and text to another paragraph block in between', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
+		// Should have 3 paragraph blocks at this point.
+
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		await paragraphBlockElement.click();
+
+		await editorPage.addNewBlock( blockNames.paragraph );
+
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			3
+		);
+		await paragraphBlockElement.click();
+		await editorPage.sendTextToParagraphBlock( 3, testData.mediumText );
+
+		const html = await editorPage.getHtmlContent();
+
+		expect( html.toLowerCase() ).toBe(
+			testData.blockInsertionHtml.toLowerCase()
+		);
+	} );
+
+	it( 'should be able to insert block at the beginning of post from the title', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		if ( isAndroid() ) {
+			await paragraphBlockElement.click();
+		}
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
+		// Should have 3 paragraph blocks at this point.
+
+		const titleElement = await editorPage.getTitleElement( {
+			autoscroll: true,
+		} );
+		await titleElement.click();
+
+		// Wait for editor to finish scrolling to the title
+		await editorPage.driver.pause( 2000 );
+
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const emptyParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph
+		);
+		expect( emptyParagraphBlock ).toBeTruthy();
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.mediumText );
+		const html = await editorPage.getHtmlContent();
+		expect( html.toLowerCase() ).toBe(
+			testData.blockInsertionHtmlFromTitle.toLowerCase()
+		);
+	} );
+} );
+
+describe( 'Gutenberg Editor Slash Inserter tests', () => {
+	it( 'should show the menu after typing /', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			slashInserter
+		);
+
+		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
+	} );
+
+	it( 'should hide the menu after deleting the / character', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			slashInserter
+		);
+
+		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
+
+		// Remove / character.
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			`${ shortText }`,
+			true
+		);
+
+		// Check if the slash inserter UI no longer exists.
+		expect( await editorPage.assertSlashInserterPresent() ).toBe( false );
+	} );
+
+	it( 'should add an Image block after tying /image and tapping on the Image block button', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			`${ slashInserter }image`
+		);
+
+		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
+
+		// Find Image block button.
+		const imageButtonElement = await editorPage.driver.$( '~Image block' );
+		expect( imageButtonElement ).toBeTruthy();
+
+		// Add image block.
+		await imageButtonElement.click();
+
+		// Check image exists in the editor.
+		expect(
+			await editorPage.hasBlockAtPosition( 1, blockNames.image )
+		).toBe( true );
+
+		// Slash inserter UI should not be present after adding a block.
+		expect( await editorPage.assertSlashInserterPresent() ).toBe( false );
+	} );
+
+	it( 'should insert an embed image block with "/img" + enter', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			'/img',
+			false
+		);
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			'\n',
+			false
+		);
+		expect(
+			await editorPage.hasBlockAtPosition( 1, blockNames.embed )
+		).toBe( true );
+	} );
+} );
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
deleted file mode 100644
index abebfc7486962c..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-block-insertion.test.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid, clickMiddleOfElement } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for Block insertion', () => {
-	it( 'should be able to insert multi-paragraph text, and text to another paragraph block in between', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
-
-		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
-		// Should have 3 paragraph blocks at this point.
-
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-		await paragraphBlockElement.click();
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			3
-		);
-		await paragraphBlockElement.click();
-		await editorPage.sendTextToParagraphBlock( 3, testData.mediumText );
-
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			testData.blockInsertionHtml.toLowerCase()
-		);
-
-		// Workaround for now since deleting the first element causes a crash on CI for Android
-		if ( isAndroid() ) {
-			paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-				blockNames.paragraph,
-				3,
-				{
-					autoscroll: true,
-				}
-			);
-
-			await paragraphBlockElement.click();
-			await editorPage.removeBlockAtPosition( blockNames.paragraph, 3 );
-			for ( let i = 3; i > 0; i-- ) {
-				paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-					blockNames.paragraph,
-					i,
-					{
-						autoscroll: true,
-					}
-				);
-				await paragraphBlockElement.click();
-				await editorPage.removeBlockAtPosition(
-					blockNames.paragraph,
-					i
-				);
-			}
-		} else {
-			for ( let i = 4; i > 0; i-- ) {
-				paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-					blockNames.paragraph
-				);
-				await clickMiddleOfElement(
-					editorPage.driver,
-					paragraphBlockElement
-				);
-				await editorPage.removeBlockAtPosition( blockNames.paragraph );
-			}
-		}
-	} );
-
-	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(
-			blockNames.paragraph
-		);
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
-
-		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
-		// Should have 3 paragraph blocks at this point.
-
-		if ( isAndroid() ) {
-			await editorPage.dismissKeyboard();
-		}
-
-		const titleElement = await editorPage.getTitleElement( {
-			autoscroll: true,
-		} );
-		await titleElement.click();
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
-		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__/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-cover.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js
deleted file mode 100644
index e57dfa68debe68..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-cover.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Cover Block test', () => {
-	it( 'should displayed properly and have properly converted height (ios only)', async () => {
-		// Temporarily this test is skipped on Android,due to the inconsistency of the results,
-		// which are related to getting values in raw pixels instead of density pixels on Android.
-		/* eslint-disable jest/no-conditional-expect */
-		if ( ! isAndroid() ) {
-			await editorPage.setHtmlContent( testData.coverHeightWithRemUnit );
-
-			const coverBlock = await editorPage.getBlockAtPosition(
-				blockNames.cover
-			);
-
-			const { height } = await coverBlock.getSize();
-			// Height is set to 20rem, where 1rem is 16.
-			// There is also block's vertical padding equal 32.
-			// Finally, the total height should be 20 * 16 + 32 = 352.
-			expect( height ).toBe( 352 );
-			/* eslint-enable jest/no-conditional-expect */
-
-			await coverBlock.click();
-			expect( coverBlock ).toBeTruthy();
-			await editorPage.removeBlockAtPosition( blockNames.cover );
-		}
-	} );
-
-	// Testing this for iOS on a device is valuable to ensure that it properly
-	// handles opening multiple modals, as only one can be open at a time.
-	it( 'allows modifying media from within block settings', async () => {
-		// Can only add image from media library on iOS
-		if ( ! isAndroid() ) {
-			await editorPage.setHtmlContent( testData.coverHeightWithRemUnit );
-
-			const coverBlock = await editorPage.getBlockAtPosition(
-				blockNames.cover
-			);
-
-			await editorPage.openBlockSettings( coverBlock );
-			await editorPage.clickAddMediaFromCoverBlock();
-			await editorPage.chooseMediaLibrary();
-			await editorPage.replaceMediaImage();
-
-			// First modal should no longer be presented.
-			const replaceButtons =
-				await editorPage.driver.elementsByAccessibilityId( 'Replace' );
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( replaceButtons.length ).toBe( 0 );
-
-			// Select different media.
-			await editorPage.chooseMediaLibrary();
-
-			expect( coverBlock ).toBeTruthy();
-			await editorPage.removeBlockAtPosition( blockNames.cover );
-		}
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js
new file mode 100644
index 00000000000000..230c844491d282
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-device-actions.test.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+import { toggleOrientation, isAndroid } from './helpers/utils';
+import testData from './helpers/test-data';
+
+describe( 'Gutenberg Editor Rotation tests', () => {
+	it( 'should be able to add blocks , rotate device and continue adding blocks', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.paragraph );
+		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.mediumText
+		);
+
+		await toggleOrientation( editorPage.driver );
+		// On Android the keyboard hides the add block button, let's hide it after rotation
+		if ( isAndroid() ) {
+			await editorPage.dismissKeyboard();
+		}
+
+		await editorPage.addNewBlock( blockNames.paragraph );
+
+		if ( isAndroid() ) {
+			// Waits until the keyboard is visible
+			await editorPage.driver.waitUntil(
+				editorPage.driver.isKeyboardShown
+			);
+			await editorPage.dismissKeyboard();
+		}
+
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.mediumText
+		);
+		await toggleOrientation( editorPage.driver );
+
+		const html = await editorPage.getHtmlContent();
+
+		expect( html.toLowerCase() ).toBe(
+			testData.deviceRotationHtml.toLowerCase()
+		);
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
index a62ee3c52f9559..06601610e0d059 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
@@ -2,38 +2,27 @@
  * Internal dependencies
  */
 import { blockNames } from './pages/editor-page';
-import {
-	clearClipboard,
-	clickElementOutsideOfTextInput,
-	dragAndDropAfterElement,
-	isAndroid,
-	setClipboard,
-	tapPasteAboveElement,
-} from './helpers/utils';
+import { dragAndDropAfterElement } from './helpers/utils';
 import testData from './helpers/test-data';
 
-// Used to skip some tests on iOS
-const onlyOnAndroid = isAndroid() ? it : it.skip;
-
 describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
-	beforeEach( async () => {
-		await clearClipboard( editorPage.driver );
-	} );
-
 	it( 'should be able to drag & drop a block', async () => {
 		// Initialize the editor with a Spacer and Paragraph block
-		await editorPage.setHtmlContent(
-			[ testData.spacerBlock, testData.paragraphBlockShortText ].join(
-				'\n\n'
-			)
-		);
+		await editorPage.initializeEditor( {
+			initialData: [
+				testData.spacerBlock,
+				testData.paragraphBlockShortText,
+			].join( '\n\n' ),
+		} );
 
 		// Get elements for both blocks
 		const spacerBlock = await editorPage.getBlockAtPosition(
 			blockNames.spacer
 		);
-		const paragraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 2 );
+		const paragraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
 
 		// Drag & drop the Spacer block after the Paragraph block
 		await dragAndDropAfterElement(
@@ -47,99 +36,26 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 		const firstBlockText =
 			await editorPage.getTextForParagraphBlockAtPosition( 1 );
 		expect( firstBlockText ).toMatch( testData.shortText );
-
-		// Remove the blocks
-		await spacerBlock.click();
-		await editorPage.removeBlockAtPosition( blockNames.spacer, 2 );
-		await editorPage.removeBlockAtPosition( blockNames.paragraph, 1 );
 	} );
 
-	onlyOnAndroid(
-		'should be able to long-press on a text-based block to paste a text in a focused textinput',
-		async () => {
-			// Add a Paragraph block
-			await editorPage.addNewBlock( blockNames.paragraph );
-			const paragraphBlockElement =
-				await editorPage.getTextBlockAtPosition( blockNames.paragraph );
-
-			// Set clipboard text
-			await setClipboard( editorPage.driver, testData.shortText );
-
-			// Dismiss auto-suggestion popup
-			if ( isAndroid() ) {
-				// On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
-				await editorPage.dismissAndroidClipboardSmartSuggestion();
-			}
-
-			// Paste into the Paragraph block
-			await tapPasteAboveElement(
-				editorPage.driver,
-				paragraphBlockElement
-			);
-			const paragraphText =
-				await editorPage.getTextForParagraphBlockAtPosition( 1 );
-
-			// Expect to have the pasted text in the Paragraph block
-			expect( paragraphText ).toMatch( testData.shortText );
-
-			// Remove the block
-			await editorPage.removeBlockAtPosition( blockNames.paragraph );
-		}
-	);
-
-	onlyOnAndroid(
-		'should be able to long-press on a text-based block using the PlainText component to paste a text in a focused textinput',
-		async () => {
-			// Add a Shortcode block
-			await editorPage.addNewBlock( blockNames.shortcode );
-			const shortcodeBlockElement =
-				await editorPage.getShortBlockTextInputAtPosition(
-					blockNames.shortcode
-				);
-
-			// Set clipboard text
-			await setClipboard( editorPage.driver, testData.shortText );
-
-			// Dismiss auto-suggestion popup
-			if ( isAndroid() ) {
-				// On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
-				await editorPage.dismissAndroidClipboardSmartSuggestion();
-			}
-
-			// Paste into the Shortcode block
-			await tapPasteAboveElement(
-				editorPage.driver,
-				shortcodeBlockElement
-			);
-			const shortcodeText = await shortcodeBlockElement.text();
-
-			// Expect to have the pasted text in the Shortcode block
-			expect( shortcodeText ).toMatch( testData.shortText );
-
-			// Remove the block
-			await editorPage.removeBlockAtPosition( blockNames.shortcode );
-		}
-	);
-
-	it( 'should be able to drag & drop a text-based block when the textinput is not focused', async () => {
+	it( 'should be able to drag & drop a text-based block when another textinput is focused', async () => {
 		// Initialize the editor with two Paragraph blocks
-		await editorPage.setHtmlContent(
-			[
+		await editorPage.initializeEditor( {
+			initialData: [
 				testData.paragraphBlockShortText,
 				testData.paragraphBlockEmpty,
-			].join( '\n\n' )
-		);
+			].join( '\n\n' ),
+		} );
 
-		// Get elements for both blocks
-		const firstParagraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 1 );
-		const secondParagraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 2 );
+		// Tap on the second block
+		const secondParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		await secondParagraphBlock.click();
 
-		// Tap on the first Paragraph block outside of the textinput
-		await clickElementOutsideOfTextInput(
-			editorPage.driver,
-			firstParagraphBlock
+		const firstParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph
 		);
 
 		// Drag & drop the first Paragraph block after the second Paragraph block
@@ -155,8 +71,5 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 
 		// Expect the second Paragraph block to have the expected content
 		expect( secondBlockText ).toMatch( testData.shortText );
-
-		// Remove the block
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
 	} );
 } );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js
deleted file mode 100644
index 09858bda2ede79..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-file-@canary.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { waitForMediaLibrary } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor File Block tests', () => {
-	it( 'should be able to add a file block and a file to it', async () => {
-		// add a file block
-		await editorPage.addNewBlock( blockNames.file );
-
-		// dismiss the media picker automatically opened when adding a file block
-		await waitForMediaLibrary( editorPage.driver );
-		await editorPage.closePicker();
-
-		// verify there's a file block
-		const block = await editorPage.getFirstBlockVisible();
-		await expect( block ).toBeTruthy();
-
-		// tap on the file block
-		block.click();
-
-		// wait for the media picker's Media Library option to come up
-		await waitForMediaLibrary( editorPage.driver );
-
-		// tap on Media Library option
-		await editorPage.chooseMediaLibrary();
-
-		// get the html version of the content
-		const html = await editorPage.getHtmlContent();
-
-		// verify the html matches the expected content
-		expect( html.toLowerCase() ).toBe(
-			testData.fileBlockPlaceholder.toLowerCase()
-		);
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js
deleted file mode 100644
index f806b43d2f8e42..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-heading-@canary.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests', () => {
-	it( 'should be able to create a post with heading and paragraph blocks', async () => {
-		await editorPage.addNewBlock( blockNames.heading );
-		let headingBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.heading
-		);
-
-		await editorPage.typeTextToTextBlock(
-			headingBlockElement,
-			testData.heading
-		);
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.mediumText
-		);
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			3
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.mediumText
-		);
-
-		await editorPage.addNewBlock( blockNames.heading );
-		headingBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.heading,
-			4
-		);
-		await editorPage.typeTextToTextBlock(
-			headingBlockElement,
-			testData.heading
-		);
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			5
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.mediumText
-		);
-
-		// Assert that even though there are 5 blocks, there should only be 3 paragraph blocks
-		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 3 );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js
deleted file mode 100644
index 1d8d6fe3c9ea20..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-image-@canary.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid, clickMiddleOfElement, swipeUp } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Image Block tests', () => {
-	it( 'should be able to add an image block', async () => {
-		// iOS only test - Can only add image from media library on iOS
-		if ( ! isAndroid() ) {
-			await editorPage.addNewBlock( blockNames.image );
-			await editorPage.closePicker();
-
-			const imageBlock = await editorPage.getBlockAtPosition(
-				blockNames.image
-			);
-
-			await editorPage.selectEmptyImageBlock( imageBlock );
-			await editorPage.chooseMediaLibrary();
-
-			// Workaround because of #952.
-			const titleElement = await editorPage.getTitleElement();
-			await clickMiddleOfElement( editorPage.driver, titleElement );
-			await editorPage.dismissKeyboard();
-			// End workaround.
-
-			await swipeUp( editorPage.driver, imageBlock );
-			await editorPage.enterCaptionToSelectedImageBlock(
-				testData.imageCaption,
-				true
-			);
-			await editorPage.dismissKeyboard();
-
-			await editorPage.addNewBlock( blockNames.paragraph );
-			await editorPage.sendTextToParagraphBlock( 2, testData.shortText );
-			const html = await editorPage.getHtmlContent();
-
-			expect( html.toLowerCase() ).toBe(
-				testData.imageShorteHtml.toLowerCase()
-			);
-		}
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html-@canary.test.js
new file mode 100644
index 00000000000000..10ff74da9308a0
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html-@canary.test.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import initialHtml from '../src/initial-html';
+
+describe( 'Gutenberg Editor Blocks test', () => {
+	it( 'should be able to create a post with all blocks and scroll to the last one', async () => {
+		await editorPage.initializeEditor( { initialData: initialHtml } );
+
+		// Scroll to the last element
+		const addBlockPlaceholder =
+			await editorPage.scrollAndReturnElementByAccessibilityId(
+				'Add paragraph block'
+			);
+
+		expect( addBlockPlaceholder ).toBeTruthy();
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js
deleted file mode 100644
index 5ed3828682c0c8..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-initial-html.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Internal dependencies
- */
-import initialHtml from '../src/initial-html';
-import { isAndroid } from './helpers/utils';
-import { blockNames } from './pages/editor-page';
-
-describe( 'Gutenberg Editor Blocks test', () => {
-	it( 'should be able to create a post with all blocks and scroll to the last one', async () => {
-		await editorPage.setHtmlContent( initialHtml );
-
-		const lastBlockName = blockNames.paragraph;
-		const lastBlockIndex = 30;
-		const lastBlockAccessibilityLabel =
-			'This block is used in initial HTML e2e tests and should be kept as the last block.';
-		let lastBlockElement;
-		if ( isAndroid() ) {
-			lastBlockElement = await editorPage.androidScrollAndReturnElement(
-				lastBlockAccessibilityLabel
-			);
-		} else {
-			lastBlockElement = await editorPage.getBlockAtPosition(
-				lastBlockName,
-				lastBlockIndex
-			);
-		}
-
-		expect( lastBlockElement ).toBeTruthy();
-	} );
-} );
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-media-blocks-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
new file mode 100644
index 00000000000000..480d19cb966a0e
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
@@ -0,0 +1,163 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+import { waitForMediaLibrary, isAndroid } from './helpers/utils';
+import testData from './helpers/test-data';
+
+const onlyOniOS = ! isAndroid() ? describe : describe.skip;
+
+describe( 'Gutenberg Editor Audio Block tests', () => {
+	it( 'should be able to add an audio block and a file to it', async () => {
+		await editorPage.initializeEditor();
+		// add an audio block
+		await editorPage.addNewBlock( blockNames.audio );
+
+		// dismiss the media picker automatically opened when adding an audio block
+		await waitForMediaLibrary( editorPage.driver );
+		await editorPage.closeMediaPicker();
+
+		// verify there's an audio block
+		const block = await editorPage.getFirstBlockVisible();
+		expect( block ).toBeTruthy();
+
+		// tap on the audio block
+		await block.click();
+
+		// wait for the media picker's Media Library option to come up
+		await waitForMediaLibrary( editorPage.driver );
+
+		// tap on Media Library option
+		await editorPage.chooseMediaLibrary();
+		// wait until the media is added
+		await editorPage.driver.pause( 500 );
+
+		// get the html version of the content
+		const html = await editorPage.getHtmlContent();
+
+		// verify the html matches the expected content
+		expect( html.toLowerCase() ).toBe(
+			testData.audioBlockPlaceholder.toLowerCase()
+		);
+	} );
+} );
+
+describe( 'Gutenberg Editor File Block tests', () => {
+	it( 'should be able to add a file block and a file to it', async () => {
+		await editorPage.initializeEditor();
+		// add a file block
+		await editorPage.addNewBlock( blockNames.file );
+
+		// dismiss the media picker automatically opened when adding a file block
+		await waitForMediaLibrary( editorPage.driver );
+		await editorPage.closeMediaPicker();
+
+		// verify there's a file block
+		const block = await editorPage.getFirstBlockVisible();
+		expect( block ).toBeTruthy();
+
+		// tap on the file block
+		await block.click();
+
+		// wait for the media picker's Media Library option to come up
+		await waitForMediaLibrary( editorPage.driver );
+
+		// tap on Media Library option
+		await editorPage.chooseMediaLibrary();
+		// wait until the media is added
+		await editorPage.driver.pause( 500 );
+
+		// get the html version of the content
+		const html = await editorPage.getHtmlContent();
+
+		// verify the html matches the expected content
+		expect( html.toLowerCase() ).toBe(
+			testData.fileBlockPlaceholder.toLowerCase()
+		);
+	} );
+} );
+
+// iOS only test - It can only add images from the media library on iOS.
+onlyOniOS( 'Gutenberg Editor Image Block tests', () => {
+	it( 'should be able to add an image block', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.image );
+		await editorPage.closeMediaPicker();
+
+		const imageBlock = await editorPage.getBlockAtPosition(
+			blockNames.image
+		);
+
+		await editorPage.selectEmptyImageBlock( imageBlock );
+		await editorPage.chooseMediaLibrary();
+
+		await editorPage.waitForElementToBeDisplayedById(
+			'A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground',
+			2000
+		);
+		await editorPage.enterCaptionToSelectedImageBlock(
+			testData.imageCaption,
+			true
+		);
+
+		const html = await editorPage.getHtmlContent();
+
+		expect( html.toLowerCase() ).toBe(
+			testData.imageShortHtml.toLowerCase()
+		);
+	} );
+} );
+
+onlyOniOS( 'Gutenberg Editor Cover Block test', () => {
+	it( 'should displayed properly and have properly converted height (ios only)', async () => {
+		// Temporarily this test is skipped on Android, due to the inconsistency of the results,
+		// which are related to getting values in raw pixels instead of density pixels on Android.
+		await editorPage.initializeEditor( {
+			initialData: testData.coverHeightWithRemUnit,
+		} );
+
+		const coverBlock = await editorPage.getBlockAtPosition(
+			blockNames.cover
+		);
+
+		const { height } = await coverBlock.getSize();
+		// Height is set to 20rem, where 1rem is 16.
+		// There is also block's vertical padding equal 16.
+		// Finally, the total height should be 20 * 16 + 16 = 336.
+		expect( height ).toBe( 336 );
+
+		await coverBlock.click();
+		expect( coverBlock ).toBeTruthy();
+	} );
+
+	// Testing this for iOS on a device is valuable to ensure that it properly
+	// handles opening multiple modals, as only one can be open at a time.
+	// NOTE: It can only add images from the media library on iOS.
+	it( 'allows modifying media from within block settings', async () => {
+		await editorPage.initializeEditor( {
+			initialData: testData.coverHeightWithRemUnit,
+		} );
+
+		const coverBlock = await editorPage.getBlockAtPosition(
+			blockNames.cover
+		);
+		await coverBlock.click();
+		// Navigate upwards to select parent block
+		await editorPage.moveBlockSelectionUp();
+
+		await editorPage.openBlockSettings();
+		await editorPage.clickAddMediaFromCoverBlock();
+		await editorPage.chooseMediaLibrary();
+		await editorPage.replaceMediaImage();
+
+		// First modal should no longer be presented.
+		const replaceButtons = await editorPage.driver.$$( '~Replace' );
+		// eslint-disable-next-line jest/no-conditional-expect
+		expect( replaceButtons.length ).toBe( 0 );
+
+		// Select different media.
+		await editorPage.chooseMediaLibrary();
+
+		expect( coverBlock ).toBeTruthy();
+	} );
+} );
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-paragraph.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js
deleted file mode 100644
index e67b7fd6e797ba..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import {
-	backspace,
-	clickMiddleOfElement,
-	clickBeginningOfElement,
-	isAndroid,
-} from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests for Paragraph Block', () => {
-	it( 'should be able to split one paragraph block into two', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.shortText
-		);
-		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			'\n',
-			false
-		);
-		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
-		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 );
-		expect( text0 ).not.toBe( '' );
-		expect( text1 ).not.toBe( '' );
-		expect( testData.shortText ).toMatch(
-			new RegExp( `${ text0 + text1 }|${ text0 } ${ text1 }` )
-		);
-
-		await editorPage.removeBlockAtPosition( blockNames.paragraph, 2 );
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-
-	it( 'should be able to merge 2 paragraph blocks into 1', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.shortText
-		);
-		await clickMiddleOfElement( editorPage.driver, paragraphBlockElement );
-		await editorPage.typeTextToTextBlock( paragraphBlockElement, '\n' );
-
-		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
-		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 );
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-
-		await clickBeginningOfElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			backspace
-		);
-
-		const text = await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		expect( text0 + text1 ).toMatch( text );
-		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 1 );
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-
-	it( 'should be able to create a post with multiple paragraph blocks', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
-
-		for ( let i = 3; i > 0; i-- ) {
-			await editorPage.removeBlockAtPosition( blockNames.paragraph, i );
-		}
-	} );
-
-	it( 'should be able to merge blocks with unknown html elements', async () => {
-		await editorPage.setHtmlContent(
-			[
-				testData.unknownElementParagraphBlock,
-				testData.lettersInParagraphBlock,
-			].join( '\n\n' )
-		);
-
-		// Merge paragraphs.
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-
-		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
-
-		await clickBeginningOfElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			backspace
-		);
-
-		// Verify the editor has not crashed.
-		const mergedBlockText =
-			await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		expect( text0 + text1 ).toMatch( mergedBlockText );
-
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-
-	// Based on https://github.com/wordpress-mobile/gutenberg-mobile/pull/1507
-	it( 'should handle multiline paragraphs from web', async () => {
-		await editorPage.setHtmlContent(
-			[
-				testData.multiLinesParagraphBlock,
-				testData.paragraphBlockEmpty,
-			].join( '\n\n' )
-		);
-
-		// Merge paragraphs.
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			backspace
-		);
-
-		// Verify the editor has not crashed.
-		const text = await editorPage.getTextForParagraphBlockAtPosition( 1 );
-		expect( text.length ).not.toEqual( 0 );
-
-		if ( isAndroid() ) {
-			await paragraphBlockElement.click();
-		}
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js
deleted file mode 100644
index 63be583561e4e0..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import {
-	clearClipboard,
-	longPressMiddleOfElement,
-	tapSelectAllAboveElement,
-	tapCopyAboveElement,
-	tapPasteAboveElement,
-	isAndroid,
-} from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor paste tests', () => {
-	// skip iOS for now
-	if ( ! isAndroid() ) {
-		it( 'skips the tests on any platform other than Android', async () => {
-			expect( true ).toBe( true );
-		} );
-		return;
-	}
-
-	beforeAll( async () => {
-		await clearClipboard( editorPage.driver );
-	} );
-
-	it( 'copies plain text from one paragraph block and pastes in another', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.pastePlainText
-		);
-
-		// Copy content to clipboard.
-		await longPressMiddleOfElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-		await tapSelectAllAboveElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-		await tapCopyAboveElement( editorPage.driver, paragraphBlockElement );
-
-		// Create another paragraph block.
-		await editorPage.addNewBlock( blockNames.paragraph );
-		if ( isAndroid() ) {
-			// On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
-			await editorPage.dismissAndroidClipboardSmartSuggestion();
-		}
-		const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-
-		// Paste into second paragraph block.
-		await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 );
-
-		const text = await editorPage.getTextForParagraphBlockAtPosition( 2 );
-		expect( text ).toBe( testData.pastePlainText );
-
-		await editorPage.removeBlockAtPosition( blockNames.paragraph, 2 );
-		await editorPage.removeBlockAtPosition( blockNames.paragraph, 1 );
-	} );
-
-	it( 'copies styled text from one paragraph block and pastes in another', async () => {
-		// Create paragraph block with styled text by editing html.
-		await editorPage.setHtmlContent( testData.pasteHtmlText );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		// Copy content to clipboard.
-		await longPressMiddleOfElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-		await tapSelectAllAboveElement(
-			editorPage.driver,
-			paragraphBlockElement
-		);
-		await tapCopyAboveElement( editorPage.driver, paragraphBlockElement );
-
-		// Create another paragraph block.
-		await editorPage.addNewBlock( blockNames.paragraph );
-		if ( isAndroid() ) {
-			// On Andrdoid 10 a new auto-suggestion popup is appearing to let the user paste text recently put in the clipboard. Let's dismiss it.
-			await editorPage.dismissAndroidClipboardSmartSuggestion();
-		}
-		const paragraphBlockElement2 = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-
-		// Paste into second paragraph block.
-		await tapPasteAboveElement( editorPage.driver, paragraphBlockElement2 );
-
-		// Check styled text by verifying html contents.
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			testData.pasteHtmlTextResult.toLowerCase()
-		);
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js
new file mode 100644
index 00000000000000..0b8a2eeff425c6
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-media-blocks.test.js
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { mediaBlocks } from '../src/initial-html';
+
+describe( 'Gutenberg Editor Rendering Media Blocks test', () => {
+	it( 'should be able to render blocks correctly', async () => {
+		await editorPage.initializeEditor( { initialData: mediaBlocks } );
+
+		// Give some time to media placeholders to render.
+		await editorPage.driver.pause( 3000 );
+
+		// Scroll to the last element.
+		const addBlockPlaceholder =
+			await editorPage.scrollAndReturnElementByAccessibilityId(
+				'Add paragraph block'
+			);
+
+		expect( addBlockPlaceholder ).toBeTruthy();
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js
new file mode 100644
index 00000000000000..bfa4053e8c57eb
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-other-blocks.test.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { otherBlocks } from '../src/initial-html';
+
+describe( 'Gutenberg Editor Rendering Other Blocks test', () => {
+	it( 'should be able to render blocks correctly', async () => {
+		await editorPage.initializeEditor( { initialData: otherBlocks } );
+
+		// Scroll to the last element.
+		const addBlockPlaceholder =
+			await editorPage.scrollAndReturnElementByAccessibilityId(
+				'Add paragraph block'
+			);
+
+		expect( addBlockPlaceholder ).toBeTruthy();
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js
new file mode 100644
index 00000000000000..9e5569e7083b7e
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-rendering-text-blocks.test.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { textBlocks } from '../src/initial-html';
+
+describe( 'Gutenberg Editor Rendering Text Blocks test', () => {
+	it( 'should be able to render blocks correctly', async () => {
+		await editorPage.initializeEditor( { initialData: textBlocks } );
+
+		// Scroll to the last element
+		const addBlockPlaceholder =
+			await editorPage.scrollAndReturnElementByAccessibilityId(
+				'Add paragraph block'
+			);
+
+		expect( addBlockPlaceholder ).toBeTruthy();
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js
deleted file mode 100644
index 215b81bf98b4d4..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-rotation.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid, toggleOrientation } from './helpers/utils';
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor tests', () => {
-	it( 'should be able to add blocks , rotate device and continue adding blocks', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.mediumText
-		);
-
-		await toggleOrientation( editorPage.driver );
-		// On Android the keyboard hides the add block button, let's hide it after rotation
-		if ( isAndroid() ) {
-			await editorPage.dismissKeyboard();
-		}
-
-		await editorPage.addNewBlock( blockNames.paragraph );
-
-		if ( isAndroid() ) {
-			await editorPage.dismissKeyboard();
-		}
-
-		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph,
-			2
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			testData.mediumText
-		);
-		await toggleOrientation( editorPage.driver );
-
-		const html = await editorPage.getHtmlContent();
-
-		expect( html.toLowerCase() ).toBe(
-			testData.deviceRotationHtml.toLowerCase()
-		);
-	} );
-} );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
index 2233b56f6c37da..6aea27dab063a2 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-search.test.js
@@ -14,16 +14,25 @@ const testIds = {
 const searchBlockHtml = `<!-- wp:search {"label":"","buttonText":""} /-->`;
 
 describe( 'Gutenberg Editor Search Block tests.', () => {
+	it( 'Able to add the Search Block.', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.search );
+		const searchBlock = await editorPage.getBlockAtPosition(
+			blockNames.search
+		);
+		expect( searchBlock ).toBeTruthy();
+	} );
+
 	describe( 'Editing Search Block elements.', () => {
-		beforeAll( async () => {
+		beforeEach( async () => {
 			// Add a search block with all child elements having no text.
 			// This is important to get around test flakiness where sometimes
 			// the existing default text isn't replaced properly when entering
 			// new text during testing.
-			await editorPage.setHtmlContent( searchBlockHtml );
-		} );
+			await editorPage.initializeEditor( {
+				initialData: searchBlockHtml,
+			} );
 
-		beforeEach( async () => {
 			// Tap search block to ensure selected.
 			const searchBlock = await editorPage.getBlockAtPosition(
 				blockNames.search
@@ -31,10 +40,6 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 			await searchBlock.click();
 		} );
 
-		afterAll( async () => {
-			await removeSearchBlock();
-		} );
-
 		it( 'Able to customize label text', async () => {
 			await editorPage.sendTextToSearchBlockChild(
 				testIds.label,
@@ -73,17 +78,10 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 	} );
 
 	describe( 'Changing search block settings.', () => {
-		afterAll( async () => {
-			await removeSearchBlock();
-		} );
-
-		it( 'Able to add the Search Block.', async () => {
-			await editorPage.addNewBlock( blockNames.search );
-			const searchBlock = await editorPage.getBlockAtPosition(
-				blockNames.search
-			);
-
-			expect( searchBlock ).toBeTruthy();
+		beforeEach( async () => {
+			await editorPage.initializeEditor( {
+				initialData: searchBlockHtml,
+			} );
 		} );
 
 		it( 'Able to hide search block label', async () => {
@@ -92,7 +90,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 			);
 			await searchBlock.click();
 
-			await editorPage.toggleHideSearchLabelSetting( searchBlock );
+			await editorPage.toggleHideSearchLabelSetting();
 			await editorPage.dismissBottomSheet();
 
 			// Switch to html and verify.
@@ -106,7 +104,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 			);
 			await searchBlock.click();
 
-			await editorPage.toggleSearchIconOnlySetting( searchBlock );
+			await editorPage.toggleSearchIconOnlySetting();
 			await editorPage.dismissBottomSheet();
 
 			// Switch to html and verify.
@@ -121,7 +119,6 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 			await searchBlock.click();
 
 			await editorPage.changeSearchButtonPositionSetting(
-				searchBlock,
 				'Button inside'
 			);
 			await editorPage.isSearchSettingsVisible();
@@ -138,10 +135,7 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 			);
 			await searchBlock.click();
 
-			await editorPage.changeSearchButtonPositionSetting(
-				searchBlock,
-				'No button'
-			);
+			await editorPage.changeSearchButtonPositionSetting( 'No button' );
 			await editorPage.isSearchSettingsVisible();
 			await editorPage.dismissBottomSheet();
 
@@ -152,22 +146,12 @@ describe( 'Gutenberg Editor Search Block tests.', () => {
 	} );
 } );
 
-const removeSearchBlock = async () => {
-	const searchBlock = await editorPage.getBlockAtPosition(
-		blockNames.search
-	);
-	await searchBlock.click();
-
-	// Remove search block.
-	await editorPage.removeBlockAtPosition( blockNames.search );
-};
-
 const verifySearchElementText = async ( testId, expected ) => {
 	let actual;
 
 	if ( isAndroid() ) {
 		const input = await editorPage.getSearchBlockTextElement( testId );
-		const inputValue = await input.text();
+		const inputValue = await input.getText();
 		actual = inputValue.trim();
 	} else {
 		actual = await editorPage.getHtmlContent();
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-slash-inserter-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-slash-inserter-@canary.test.js
deleted file mode 100644
index af2e64d8aa9475..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-slash-inserter-@canary.test.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Internal dependencies
- */
-import { blockNames } from './pages/editor-page';
-import { isAndroid } from './helpers/utils';
-import { slashInserter, shortText } from './helpers/test-data';
-
-describe( 'Gutenberg Editor Slash Inserter tests', () => {
-	it( 'should show the menu after typing /', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			slashInserter
-		);
-
-		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-
-	it( 'should hide the menu after deleting the / character', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			slashInserter
-		);
-
-		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
-
-		// Remove / character.
-		if ( isAndroid() ) {
-			await editorPage.typeTextToTextBlock(
-				paragraphBlockElement,
-				`${ shortText }`,
-				true
-			);
-		} else {
-			await editorPage.typeTextToTextBlock(
-				paragraphBlockElement,
-				`\b ${ shortText }`,
-				false
-			);
-		}
-
-		// Check if the slash inserter UI no longer exists.
-		expect( await editorPage.assertSlashInserterPresent() ).toBe( false );
-
-		await editorPage.removeBlockAtPosition( blockNames.paragraph );
-	} );
-
-	it( 'should add an Image block after tying /image and tapping on the Image block button', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			`${ slashInserter }image`
-		);
-
-		expect( await editorPage.assertSlashInserterPresent() ).toBe( true );
-
-		// Find Image block button.
-		const imageButtonElement =
-			await editorPage.driver.elementByAccessibilityId( 'Image block' );
-		expect( imageButtonElement ).toBeTruthy();
-
-		// Add image block.
-		await imageButtonElement.click();
-
-		// Check image exists in the editor.
-		expect(
-			await editorPage.hasBlockAtPosition( 1, blockNames.image )
-		).toBe( true );
-
-		// Slash inserter UI should not be present after adding a block.
-		expect( await editorPage.assertSlashInserterPresent() ).toBe( false );
-
-		// Remove image block.
-		await editorPage.removeBlockAtPosition( blockNames.image );
-	} );
-
-	it( 'should insert an embed image block with "/img" + enter', async () => {
-		await editorPage.addNewBlock( blockNames.paragraph );
-		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
-			blockNames.paragraph
-		);
-
-		await editorPage.typeTextToTextBlock(
-			paragraphBlockElement,
-			'/img\n',
-			false
-		);
-		expect(
-			await editorPage.hasBlockAtPosition( 1, blockNames.embed )
-		).toBe( true );
-
-		await editorPage.removeBlockAtPosition( blockNames.embed );
-	} );
-} );
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-unsupported-blocks.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js
deleted file mode 100644
index d75b7ba4efd1e5..00000000000000
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import testData from './helpers/test-data';
-
-describe( 'Gutenberg Editor Unsupported Block Editor Tests', () => {
-	it( 'should be able to open the unsupported block web view editor', async () => {
-		await editorPage.setHtmlContent( testData.unsupportedBlockHtml );
-
-		const firstVisibleBlock = await editorPage.getFirstBlockVisible();
-		await firstVisibleBlock.click();
-
-		const helpButton = await editorPage.getUnsupportedBlockHelpButton();
-		await helpButton.click();
-
-		const editButton =
-			await editorPage.getUnsupportedBlockBottomSheetEditButton();
-		await editButton.click();
-
-		const webView = await editorPage.getUnsupportedBlockWebView();
-		await expect( webView ).toBeTruthy();
-	} );
-} );
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/__device-tests__/gutenberg-editor-writing-flow-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-writing-flow-@canary.test.js
new file mode 100644
index 00000000000000..3a12bf5d13345b
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-writing-flow-@canary.test.js
@@ -0,0 +1,333 @@
+/**
+ * Internal dependencies
+ */
+import { blockNames } from './pages/editor-page';
+import {
+	backspace,
+	clickBeginningOfElement,
+	waitForMediaLibrary,
+} from './helpers/utils';
+import testData from './helpers/test-data';
+
+describe( 'Gutenberg Editor Writing flow tests', () => {
+	it( 'should be able to write a post title', async () => {
+		await editorPage.initializeEditor( { initialTitle: '' } );
+
+		const titleInput = await editorPage.getEmptyTitleTextInputElement();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+		await editorPage.typeTextToTextBlock( titleInput, testData.shortText );
+
+		// Trigger the return key to go to the first Paragraph
+		await editorPage.typeTextToTextBlock( titleInput, '\n' );
+
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		expect( paragraphBlockElement ).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		// Trigger the return key to delete the Paragraph block
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			backspace
+		);
+		// Expect to have an empty Paragraph block and the keyboard visible
+		expect(
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph )
+		).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+	} );
+
+	it( 'should be able to create a new Paragraph block when pressing the enter key', async () => {
+		await editorPage.initializeEditor( { initialTitle: '' } );
+
+		const defaultBlockAppenderElement =
+			await editorPage.getDefaultBlockAppenderElement();
+		await defaultBlockAppenderElement.click();
+
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.shortText
+		);
+		await editorPage.typeTextToTextBlock( paragraphBlockElement, '\n' );
+
+		// Expect to have a new Paragraph block and the keyboard visible
+		expect(
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 )
+		).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+	} );
+
+	it( 'should automatically dismiss the keyboard when selecting non-text-based-blocks', async () => {
+		await editorPage.initializeEditor( { initialTitle: '' } );
+
+		await editorPage.addNewBlock( blockNames.image );
+		// Wait for the Media picker to show up
+		await waitForMediaLibrary( editorPage.driver );
+
+		// Select the WordPress Media Library option
+		await editorPage.chooseMediaLibrary();
+
+		// Wait until the media is added
+		await editorPage.driver.pause( 500 );
+
+		const captionElement = await editorPage.getImageBlockCaptionButton();
+		await captionElement.click();
+		const captionInput =
+			await editorPage.getImageBlockCaptionInput( captionElement );
+
+		expect( captionInput ).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		// Sets a new caption
+		await editorPage.typeTextToTextBlock(
+			captionInput,
+			testData.listItem2,
+			true
+		);
+
+		// Trigger the return key to exit the caption and create a new Paragraph block
+		await editorPage.typeTextToTextBlock( captionInput, '\n' );
+
+		// Expect to have an empty Paragraph block and the keyboard visible
+		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		expect( paragraphBlockElement ).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			backspace
+		);
+
+		// When deleting the Paragraph block, the keyboard should be hidden and
+		// the image block should be focused.
+		await editorPage.driver.waitUntil( async function () {
+			return ! ( await editorPage.driver.isKeyboardShown() );
+		} );
+		expect( await editorPage.isImageBlockSelected() ).toBe( true );
+
+		// Adding a new Paragraph block
+		await editorPage.addNewBlock( blockNames.paragraph );
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+
+		// It should be focused and the keyboard should be visible
+		expect( paragraphBlockElement ).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.shortText
+		);
+
+		const imageBlockElement = await editorPage.getBlockAtPosition(
+			blockNames.image
+		);
+		await imageBlockElement.click();
+
+		await editorPage.driver.waitUntil( async function () {
+			return ! ( await editorPage.driver.isKeyboardShown() );
+		} );
+		expect( await editorPage.isImageBlockSelected() ).toBe( true );
+	} );
+
+	it( 'should manually dismiss the keyboard', async () => {
+		await editorPage.initializeEditor( { initialTitle: '' } );
+
+		const defaultBlockAppenderElement =
+			await editorPage.getDefaultBlockAppenderElement();
+		await defaultBlockAppenderElement.click();
+
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		expect( paragraphBlockElement ).toBeTruthy();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		await editorPage.dismissKeyboard();
+
+		// Checks that no block is selected by looking for the block menu actions button
+		expect( await editorPage.isBlockActionsMenuButtonDisplayed() ).toBe(
+			false
+		);
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( false );
+	} );
+
+	it( 'should dismiss the keyboard and show it back when opening modals', async () => {
+		await editorPage.initializeEditor( { initialTitle: '' } );
+
+		const defaultBlockAppenderElement =
+			await editorPage.getDefaultBlockAppenderElement();
+		await defaultBlockAppenderElement.click();
+
+		await editorPage.openBlockSettings();
+		await editorPage.driver.waitUntil( async function () {
+			return ! ( await editorPage.driver.isKeyboardShown() );
+		} );
+
+		await editorPage.dismissBottomSheet();
+
+		await editorPage.driver.waitUntil( editorPage.driver.isKeyboardShown );
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph
+		);
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.listItem1
+		);
+		const typedText = await paragraphBlockElement.getText();
+		expect( typedText ).toMatch( testData.listItem1 );
+	} );
+
+	it( 'should be able to split and merge paragraph blocks', async () => {
+		await editorPage.initializeEditor();
+
+		// Add the first Paragraph block using the default block appender
+		const defaultBlockAppenderElement =
+			await editorPage.getDefaultBlockAppenderElement();
+		await defaultBlockAppenderElement.click();
+
+		// Type text into the first Paragraph block
+		const firstParagraphBlockElement =
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph );
+		await editorPage.typeTextToTextBlock(
+			firstParagraphBlockElement,
+			testData.shortText
+		);
+
+		// Add a second Paragraph block and type some text
+		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+		const secondParagraphBlockElement =
+			await editorPage.getTextBlockAtPosition( blockNames.paragraph, 2 );
+		await editorPage.typeTextToTextBlock(
+			secondParagraphBlockElement,
+			testData.mediumText
+		);
+
+		// Merge Paragraph blocks
+		await clickBeginningOfElement(
+			editorPage.driver,
+			secondParagraphBlockElement
+		);
+		await editorPage.typeTextToTextBlock(
+			secondParagraphBlockElement,
+			backspace
+		);
+
+		// Wait for blocks to be merged
+		await editorPage.driver.waitUntil( async function () {
+			return ( await editorPage.getNumberOfParagraphBlocks() ) === 1;
+		} );
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		// Split the current Paragraph block right where the caret is positioned
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			1,
+			true
+		);
+		await editorPage.typeTextToTextBlock( paragraphBlockElement, '\n' );
+
+		// Wait for blocks to be split
+		await editorPage.driver.waitUntil( async function () {
+			return ( await editorPage.getNumberOfParagraphBlocks() ) === 2;
+		} );
+		expect( await editorPage.driver.isKeyboardShown() ).toBe( true );
+
+		const firstParagraphText =
+			await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		const secondParagraphText =
+			await editorPage.getTextForParagraphBlockAtPosition( 2 );
+
+		expect( firstParagraphText ).toEqual( testData.shortText );
+		expect( secondParagraphText ).toEqual( testData.mediumText );
+	} );
+
+	it( 'should be able to create a post with multiple paragraph blocks', async () => {
+		await editorPage.initializeEditor();
+		const defaultBlockAppenderElement =
+			await editorPage.getDefaultBlockAppenderElement();
+		await defaultBlockAppenderElement.click();
+
+		await editorPage.sendTextToParagraphBlock( 1, testData.longText );
+		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 3 );
+	} );
+
+	it( 'should be able to merge blocks with unknown html elements', async () => {
+		await editorPage.initializeEditor( {
+			initialData: [
+				testData.unknownElementParagraphBlock,
+				testData.lettersInParagraphBlock,
+			].join( '\n\n' ),
+		} );
+
+		// Merge paragraphs.
+		const paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+
+		const text0 = await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		const text1 = await editorPage.getTextForParagraphBlockAtPosition( 2 );
+
+		await clickBeginningOfElement(
+			editorPage.driver,
+			paragraphBlockElement
+		);
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			backspace
+		);
+
+		// Verify the editor has not crashed.
+		const mergedBlockText =
+			await editorPage.getTextForParagraphBlockAtPosition( 1 );
+		expect( text0 + text1 ).toMatch( mergedBlockText );
+	} );
+
+	it( 'should be able to create a post with heading and paragraph blocks', async () => {
+		await editorPage.initializeEditor();
+		await editorPage.addNewBlock( blockNames.heading );
+		const headingBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.heading
+		);
+
+		await editorPage.typeTextToTextBlock(
+			headingBlockElement,
+			testData.heading
+		);
+
+		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
+		let paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.mediumText
+		);
+
+		await editorPage.addParagraphBlockByTappingEmptyAreaBelowLastBlock();
+		paragraphBlockElement = await editorPage.getTextBlockAtPosition(
+			blockNames.paragraph,
+			3
+		);
+		await editorPage.typeTextToTextBlock(
+			paragraphBlockElement,
+			testData.mediumText
+		);
+
+		// Assert that even though there are 3 blocks, there should only be 2 paragraph blocks
+		expect( await editorPage.getNumberOfParagraphBlocks() ).toEqual( 2 );
+	} );
+} );
diff --git a/packages/react-native-editor/__device-tests__/helpers/appium-local-start.js b/packages/react-native-editor/__device-tests__/helpers/appium-local-start.js
new file mode 100644
index 00000000000000..a8e62b6b1f67f0
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/helpers/appium-local-start.js
@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+const { start } = require( './appium-local.js' );
+
+start( { flags: '--allow-cors' } ).then(
+	() => {
+		// eslint-disable-next-line no-console
+		console.log( 'INFO: Appium server started successfully' );
+	},
+	( error ) => {
+		// eslint-disable-next-line no-console
+		console.error( error );
+		process.exit( 1 );
+	}
+);
diff --git a/packages/react-native-editor/__device-tests__/helpers/appium-local.js b/packages/react-native-editor/__device-tests__/helpers/appium-local.js
index cf41032b9cdd31..b4b4f415d10ce2 100644
--- a/packages/react-native-editor/__device-tests__/helpers/appium-local.js
+++ b/packages/react-native-editor/__device-tests__/helpers/appium-local.js
@@ -4,16 +4,18 @@
 const childProcess = require( 'child_process' );
 
 // Spawns an appium process.
-const start = ( localAppiumPort ) =>
+const start = ( { port = 4723, flags } ) =>
 	new Promise( ( resolve, reject ) => {
-		const appium = childProcess.spawn( 'appium', [
+		const args = [
 			'--port',
-			localAppiumPort.toString(),
+			port.toString(),
 			'--log',
 			'./appium-out.log',
 			'--log-no-colors',
 			'--relaxed-security', // Needed for mobile:shell commend for text entry on Android
-		] );
+			flags,
+		].filter( Boolean );
+		const appium = childProcess.spawn( 'appium', args );
 
 		let appiumOutputBuffer = '';
 		let resolved = false;
diff --git a/packages/react-native-editor/__device-tests__/helpers/caps.js b/packages/react-native-editor/__device-tests__/helpers/caps.js
index fd2e8adbcb4bfa..fc73b1c1c878af 100644
--- a/packages/react-native-editor/__device-tests__/helpers/caps.js
+++ b/packages/react-native-editor/__device-tests__/helpers/caps.js
@@ -1,39 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import {
+	ios as iOSConfig,
+	android as androidConfig,
+} from './device-config.json';
+
 const ios = {
-	browserName: '',
-	platformName: 'iOS',
-	os: 'iOS',
 	deviceOrientation: 'portrait',
 	automationName: 'XCUITest',
-	appiumVersion: '1.22.3', // Sauce Labs requires appiumVersion to be specified.
-	app: undefined, // Will be set later, locally this is relative to root of project.
 	processArguments: {
 		args: [ 'uitesting' ],
 	},
+	autoLaunch: false,
 };
 
-exports.iosLocal = {
+exports.iosLocal = ( { iPadDevice = false } ) => ( {
 	...ios,
-	deviceName: 'iPhone 13',
-	wdaLaunchTimeout: 240000,
+	deviceName: ! iPadDevice
+		? iOSConfig.local.deviceName
+		: iOSConfig.local.deviceTabletName,
+	platformVersion: iOSConfig.local.platformVersion,
+	pixelRatio: ! iPadDevice
+		? iOSConfig.pixelRatio.iPhone
+		: iOSConfig.pixelRatio.iPad,
 	usePrebuiltWDA: true,
-};
+} );
 
-exports.iosServer = {
+exports.iosServer = ( { iPadDevice = false } ) => ( {
 	...ios,
-	platformVersion: '15.4', // Supported Sauce Labs platforms can be found here: https://saucelabs.com/rest/v1/info/platforms/appium
-	deviceName: 'iPhone 13 Simulator',
-};
+	deviceName: ! iPadDevice
+		? iOSConfig.saucelabs.deviceName
+		: iOSConfig.saucelabs.deviceTabletName,
+	platformVersion: iOSConfig.local.platformVersion,
+	pixelRatio: ! iPadDevice
+		? iOSConfig.pixelRatio.iPhone
+		: iOSConfig.pixelRatio.iPad,
+} );
 
 exports.android = {
-	browserName: '',
-	platformName: 'Android',
-	platformVersion: '11.0',
-	deviceName: 'Google Pixel 3 XL GoogleAPI Emulator',
+	platformVersion: androidConfig.local.platformVersion,
+	deviceName: androidConfig.saucelabs.deviceName,
 	automationName: 'UiAutomator2',
-	os: 'Android',
 	appPackage: 'com.gutenberg',
 	appActivity: 'com.gutenberg.MainActivity',
 	deviceOrientation: 'portrait',
-	appiumVersion: '1.22.1',
-	app: undefined,
+	disableWindowAnimation: true,
+	autoLaunch: false,
+};
+
+// SauceLabs config
+exports.sauceOptions = {
+	appiumVersion: '2.0.0',
+};
+
+exports.prefixKeysWithAppium = ( obj ) => {
+	return Object.fromEntries(
+		Object.entries( obj ).map( ( [ key, value ] ) => [
+			`appium:${ key }`,
+			value,
+		] )
+	);
 };
diff --git a/packages/react-native-editor/__device-tests__/helpers/device-config.json b/packages/react-native-editor/__device-tests__/helpers/device-config.json
new file mode 100644
index 00000000000000..5f952099133dd8
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/helpers/device-config.json
@@ -0,0 +1,29 @@
+{
+	"ios": {
+		"local": {
+			"deviceName": "iPhone 14",
+			"deviceTabletName": "iPad (10th generation)",
+			"platformVersion": "16.2"
+		},
+		"saucelabs": {
+			"deviceName": "iPhone 14 Simulator",
+			"deviceTabletName": "iPad (10th generation) Simulator"
+		},
+		"buildkite": {
+			"platformVersion": "16.4"
+		},
+		"pixelRatio": {
+			"iPhone": 3,
+			"iPad": 2
+		}
+	},
+	"android": {
+		"local": {
+			"deviceName": "Pixel_3_XL_API_30",
+			"platformVersion": "11.0"
+		},
+		"saucelabs": {
+			"deviceName": "Google Pixel 3 XL GoogleAPI Emulator"
+		}
+	}
+}
diff --git a/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js b/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js
new file mode 100644
index 00000000000000..91f9e0a8327b98
--- /dev/null
+++ b/packages/react-native-editor/__device-tests__/helpers/get-android-emulator-id.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+const childProcess = require( 'child_process' );
+
+export function getAndroidEmulatorID() {
+	try {
+		const adbOutput = childProcess.execSync( 'adb devices -l' ).toString();
+
+		const lines = adbOutput
+			.split( '\n' )
+			.filter( ( line ) => line && line.includes( 'emulator-' ) );
+
+		if ( lines.length === 0 ) {
+			// eslint-disable-next-line no-console
+			console.error( 'No available emulators found.' );
+			return null;
+		}
+		const firstEmulatorLine = lines[ 0 ];
+		// Extract device ID from the beginning of the line
+		return firstEmulatorLine.split( /\s+/ )[ 0 ];
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.error(
+			'Failed to fetch the first available emulator ID:',
+			error.message
+		);
+		return null;
+	}
+}
diff --git a/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js b/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
index 6f7ec3aab8f60d..7bfefd45b01843 100644
--- a/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
+++ b/packages/react-native-editor/__device-tests__/helpers/serverConfigs.js
@@ -1,10 +1,12 @@
 exports.local = {
-	host: 'localhost',
+	host: '127.0.0.1',
 	port: 4723, // Port for local Appium runs.
 };
 
 exports.sauce = {
-	host: 'ondemand.saucelabs.com',
-	port: 80,
-	auth: process.env.SAUCE_USERNAME + ':' + process.env.SAUCE_ACCESS_KEY,
+	user: process.env.SAUCE_USERNAME,
+	key: process.env.SAUCE_ACCESS_KEY,
+	hostname: 'ondemand.us-west-1.saucelabs.com',
+	port: 443,
+	baseUrl: 'wd/hub',
 };
diff --git a/packages/react-native-editor/__device-tests__/helpers/test-data.js b/packages/react-native-editor/__device-tests__/helpers/test-data.js
index eea093081df18a..b2310cd51aa377 100644
--- a/packages/react-native-editor/__device-tests__/helpers/test-data.js
+++ b/packages/react-native-editor/__device-tests__/helpers/test-data.js
@@ -77,7 +77,7 @@ exports.blockInsertionHtmlFromTitle = `<!-- wp:paragraph -->
 <p>The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?</p>
 <!-- /wp:paragraph -->`;
 
-exports.imageCaption = `C'est la vie my friends`;
+exports.imageCaption = `Autumn meets winter`;
 
 exports.imageCompletehtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
 <figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption>C'est la vie my friends</figcaption></figure>
@@ -95,13 +95,9 @@ exports.imageCompletehtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
 <p>The finer continuum interprets the polynomial rabbit. When can the geology runs? An astronomer runs. Should a communist consent?</p>
 <!-- /wp:paragraph -->`;
 
-exports.imageShorteHtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
-<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground" class="wp-image-1"/><figcaption class="wp-element-caption">C'est la vie my friends</figcaption></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph -->
-<p>rock music approaches at high velocity.</p>
-<!-- /wp:paragraph -->`;
+exports.imageShortHtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground" class="wp-image-1"/><figcaption class="wp-element-caption">Autumn meets winter</figcaption></figure>
+<!-- /wp:image -->`;
 
 exports.unsupportedBlockHtml = `<!-- wp:jetpack/gif {"giphyUrl":"https://giphy.com/embed/3orieS4jfHJaKwkeli","searchText":"example"} /-->`;
 
@@ -143,7 +139,7 @@ exports.audioBlockPlaceholder = `<!-- wp:audio {"id":5} -->
 <!-- /wp:audio -->`;
 
 exports.headerBlockEmpty = `<!-- wp:heading -->
-<h2></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->`;
 
 exports.separatorBlockEmpty = `<!-- wp:separator -->
@@ -187,3 +183,62 @@ exports.lettersInParagraphBlock = `<!-- wp:paragraph -->
 exports.spacerBlock = `<!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->`;
+
+exports.galleryBlock = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/njpygC0aF7.png"" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/HOeupVqCwe.png" alt=""/><figcaption class="wp-element-caption">Heading</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/s-OlAVlGJS.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/aBnr4SymR1.png" alt=""/><figcaption class="wp-element-caption">Cover</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/aDIyKHI6Up.png" alt=""/><figcaption class="wp-element-caption">Video</figcaption></figure>
+<!-- /wp:image -->
+</figure>
+<!-- /wp:gallery -->`;
+
+exports.galleryBlockTwoImages = `<!-- wp:gallery {"columns":8,"linkTo":"none","className":"alignfull"} -->
+<figure class="wp-block-gallery has-nested-images columns-8 is-cropped alignfull"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/njpygC0aF7.png" alt=""/><figcaption class="wp-element-caption">Paragraph</figcaption></figure>
+<!-- /wp:image -->
+<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/s-OlAVlGJS.png" alt=""/><figcaption class="wp-element-caption">Image</figcaption></figure>
+<!-- /wp:image -->
+</figure>
+<!-- /wp:gallery -->`;
+
+exports.groupNestedStructure = `<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#f9d0d0"}}} -->
+<p class="has-background" style="background-color:#f9d0d0">Level 1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"50px"} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#d5f0ab"}}} -->
+<p class="has-background" style="background-color:#d5f0ab">Level 2</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"50px"} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"background":"#c3e5ff"}}} -->
+<p class="has-background" style="background-color:#c3e5ff">Level 3</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"50px"} -->
+<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->`;
diff --git a/packages/react-native-editor/__device-tests__/helpers/utils.js b/packages/react-native-editor/__device-tests__/helpers/utils.js
index 64d802f30dbec8..c44bc277155e2c 100644
--- a/packages/react-native-editor/__device-tests__/helpers/utils.js
+++ b/packages/react-native-editor/__device-tests__/helpers/utils.js
@@ -2,20 +2,29 @@
  * External dependencies
  */
 const childProcess = require( 'child_process' );
-// eslint-disable-next-line import/no-extraneous-dependencies
-const wd = require( 'wd' );
+// eslint-disable-next-line import/no-extraneous-dependencies, import/named
+import { remote, Key } from 'webdriverio';
+
 const crypto = require( 'crypto' );
 const path = require( 'path' );
 /**
  * Internal dependencies
  */
 const serverConfigs = require( './serverConfigs' );
-const { iosServer, iosLocal, android } = require( './caps' );
+const {
+	iosServer,
+	iosLocal,
+	android,
+	sauceOptions,
+	prefixKeysWithAppium,
+} = require( './caps' );
 const AppiumLocal = require( './appium-local' );
+import { getAndroidEmulatorID } from './get-android-emulator-id';
 
 // Platform setup.
 const defaultPlatform = 'android';
 const rnPlatform = process.env.TEST_RN_PLATFORM || defaultPlatform;
+const iPadDevice = process.env.IPAD;
 
 // Environment setup, local environment or Sauce Labs.
 const defaultEnvironment = 'local';
@@ -37,15 +46,9 @@ let appiumProcess;
 
 const backspace = '\u0008';
 
-// Used to map unicode and special values to keycodes on Android
-// Docs for keycode values: https://developer.android.com/reference/android/view/KeyEvent.html
-const strToKeycode = {
-	'\n': 66,
-	[ backspace ]: 67,
-};
-
-// $block-edge-to-content value
-const blockEdgeToContent = 16;
+const IOS_BUNDLE_ID = 'org.wordpress.gutenberg.development';
+const ANDROID_COMPONENT_NAME = 'com.gutenberg/.MainActivity';
+const SAUCE_LABS_TIMEOUT = 240;
 
 const timer = ( ms ) => new Promise( ( res ) => setTimeout( res, ms ) );
 
@@ -57,27 +60,35 @@ const isLocalEnvironment = () => {
 	return testEnvironment.toLowerCase() === 'local';
 };
 
-const getIOSPlatformVersions = () => {
+const getIOSPlatformVersions = ( { requiredVersion } ) => {
 	const { runtimes = [] } = JSON.parse(
 		childProcess.execSync( 'xcrun simctl list runtimes --json' ).toString()
 	);
 
+	const majorVersion = requiredVersion.split( '.' )[ 0 ];
 	return runtimes
 		.reverse()
 		.filter(
-			( { name, isAvailable } ) => name.startsWith( 'iOS' ) && isAvailable
+			( { name, isAvailable, version } ) =>
+				name.startsWith( 'iOS' ) &&
+				new RegExp( `^${ majorVersion }(\\.\\d+)*$` ).test( version ) &&
+				isAvailable
 		);
 };
 
+const PLATFORM_NAME = isAndroid() ? 'Android' : 'iOS';
+
 // Initialises the driver and desired capabilities for appium.
 const setupDriver = async () => {
 	const branch = process.env.CIRCLE_BRANCH || '';
 	const safeBranchName = branch.replace( /\//g, '-' );
 	if ( isLocalEnvironment() ) {
 		try {
-			appiumProcess = await AppiumLocal.start( localAppiumPort );
+			appiumProcess = await AppiumLocal.start( {
+				port: localAppiumPort,
+			} );
 		} catch ( err ) {
-			// Ignore error here, Appium is probably already running (Appium desktop has its own server for instance)
+			// Ignore error here, Appium is probably already running (Appium Inspector has its own server for instance)
 			// eslint-disable-next-line no-console
 			await console.log(
 				'Could not start Appium server',
@@ -86,19 +97,18 @@ const setupDriver = async () => {
 		}
 	}
 
-	const serverConfig = isLocalEnvironment()
-		? serverConfigs.local
-		: serverConfigs.sauce;
-	const driver = wd.promiseChainRemote( serverConfig );
-
 	let desiredCaps;
 	if ( isAndroid() ) {
 		desiredCaps = { ...android };
 		if ( isLocalEnvironment() ) {
+			const androidDeviceID = getAndroidEmulatorID();
 			desiredCaps.app = path.resolve( localAndroidAppPath );
+			desiredCaps.udid = androidDeviceID;
 			try {
 				const androidVersion = childProcess
-					.execSync( 'adb shell getprop ro.build.version.release' )
+					.execSync(
+						`adb -s ${ androidDeviceID } shell getprop ro.build.version.release`
+					)
 					.toString()
 					.replace( /^\s+|\s+$/g, '' );
 				delete desiredCaps.platformVersion;
@@ -112,18 +122,22 @@ const setupDriver = async () => {
 				// Ignore error.
 			}
 		} else {
-			desiredCaps.app = `sauce-storage:Gutenberg-${ safeBranchName }.apk`; // App should be preloaded to sauce storage, this can also be a URL.
+			desiredCaps.app = `storage:filename=Gutenberg-${ safeBranchName }.apk`; // App should be preloaded to sauce storage, this can also be a URL.
+			desiredCaps.newCommandTimeout = SAUCE_LABS_TIMEOUT;
 		}
 	} else {
-		desiredCaps = { ...iosServer };
-		desiredCaps.app = `sauce-storage:Gutenberg-${ safeBranchName }.app.zip`; // App should be preloaded to sauce storage, this can also be a URL.
+		desiredCaps = iosServer( { iPadDevice } );
+		desiredCaps.newCommandTimeout = SAUCE_LABS_TIMEOUT;
+		desiredCaps.app = `storage:filename=Gutenberg-${ safeBranchName }.app.zip`; // App should be preloaded to sauce storage, this can also be a URL.
 		if ( isLocalEnvironment() ) {
-			desiredCaps = { ...iosLocal };
+			desiredCaps = iosLocal( { iPadDevice } );
 
-			const iosPlatformVersions = getIOSPlatformVersions();
+			const iosPlatformVersions = getIOSPlatformVersions( {
+				requiredVersion: desiredCaps.platformVersion,
+			} );
 			if ( iosPlatformVersions.length === 0 ) {
 				throw new Error(
-					'No iOS simulators available! Please verify that you have iOS simulators installed.'
+					`No compatible iOS simulators available! Please verify that you have iOS ${ desiredCaps.platformVersion } simulators installed.`
 				);
 			}
 			// eslint-disable-next-line no-console
@@ -146,17 +160,28 @@ const setupDriver = async () => {
 		}
 	}
 
-	if ( ! isLocalEnvironment() ) {
-		desiredCaps.name = `Gutenberg Editor Tests[${ rnPlatform }]-${ branch }`;
-		desiredCaps.tags = [ 'Gutenberg', branch ];
-	}
-
-	await driver.init( desiredCaps );
+	const sauceOptionsConfig = ! isLocalEnvironment()
+		? {
+				'sauce:options': {
+					...sauceOptions,
+					name: `Gutenberg Editor Tests[${ rnPlatform }]-${ branch }`,
+					tags: [ 'Gutenberg', branch ],
+				},
+		  }
+		: {};
+	const serverConfig = isLocalEnvironment()
+		? serverConfigs.local
+		: serverConfigs.sauce;
 
-	const status = await driver.status();
-	// Display the driver status
-	// eslint-disable-next-line no-console
-	console.log( status );
+	const driver = await remote( {
+		...serverConfig,
+		logLevel: 'error',
+		capabilities: {
+			platformName: PLATFORM_NAME,
+			...prefixKeysWithAppium( desiredCaps ),
+			...sauceOptionsConfig,
+		},
+	} );
 
 	await driver.setOrientation( 'PORTRAIT' );
 	return driver;
@@ -164,122 +189,93 @@ const setupDriver = async () => {
 
 const stopDriver = async ( driver ) => {
 	if ( ! isLocalEnvironment() ) {
-		const jobID = driver.sessionID;
+		const sessionId = driver.sessionId;
 
-		const hash = crypto
-			.createHmac( 'md5', jobID )
-			.update( serverConfigs.sauce.auth )
+		const secret = `${ serverConfigs.sauce.user }:${ serverConfigs.sauce.key }`;
+		const token = crypto
+			.createHmac( 'md5', secret )
+			.update( sessionId )
 			.digest( 'hex' );
-		const jobURL = `https://saucelabs.com/jobs/${ jobID }?auth=${ hash }`;
+		const jobURL = `https://app.saucelabs.com/tests/${ sessionId }?auth=${ token }`;
 		// eslint-disable-next-line no-console
 		console.log( `You can view the video of this test run at ${ jobURL }` );
 	}
 	if ( driver === undefined ) {
 		return;
 	}
-	await driver.quit();
+	await driver.deleteSession();
 
 	if ( appiumProcess !== undefined ) {
 		await AppiumLocal.stop( appiumProcess );
 	}
 };
 
-/*
- * Problems about the 'clear' parameter:
- *
- * On Android: "clear" is defaulted to true because not clearing the text requires Android to use ADB, which
- * has demonstrated itself to be very flaky, particularly on CI. In other words, clear the view unless you absolutely
- * have to append the new text and, in that case, append fewest number of characters possible.
- *
- * On iOS: "clear" is not defaulted to true because calling element.clear when a text is present takes a very long time (approx. 23 seconds)
- */
 const typeString = async ( driver, element, str, clear ) => {
-	if ( isAndroid() ) {
-		await typeStringAndroid( driver, element, str, clear );
-	} else {
-		await typeStringIos( driver, element, str, clear );
+	if ( isKeycode( str ) ) {
+		const keyCode = isAndroid() ? getKeycode( str ) : str;
+		return await pressKeycode( driver, keyCode );
 	}
-};
 
-const typeStringIos = async ( driver, element, str, clear ) => {
 	if ( clear ) {
-		// await element.clear(); This was not working correctly on iOS so need a custom implementation
-		await clearTextBox( driver, element );
+		await element.clearValue();
+		// This helps prevent skipping characters when the initial
+		// value was previously removed.
+		await driver.pause( 2000 );
 	}
-	await element.type( str );
-};
 
-const clearTextBox = async ( driver, element ) => {
-	await element.click();
-	let originalText = await element.text();
-	let text = originalText;
-	// We are double tapping on the text field and pressing backspace until all content is removed.
-	do {
-		originalText = await element.text();
-		await doubleTap( driver, element );
-		await element.type( '\b' );
-		text = await element.text();
-		// We compare with the original content and not empty because text always return any hint set on the element.
-	} while ( originalText !== text );
+	await element.addValue( str );
+
+	if ( ! isAndroid() ) {
+		// Await the completion of the scroll-to-text-input animation
+		await driver.pause( 3000 );
+	}
 };
 
-const doubleTap = async ( driver, element ) => {
-	const action = new wd.TouchAction( driver );
-	action.tap( { el: element, count: 2 } );
-	await action.perform();
+/**
+ * Returns the mapped keycode for a string to use in `pressKeycode` function.
+ *
+ * @param {string} str String associated to a keycode
+ */
+const getKeycode = ( str ) => {
+	if ( isAndroid() ) {
+		// On Android, we map keycodes using Android values.
+		// Reference: https://developer.android.com/reference/android/view/KeyEvent.html
+		return {
+			'\n': 66,
+			[ backspace ]: 67,
+		}[ str ];
+	}
+	// On iOS, we map keycodes using the special keys defined in WebdriverIO.
+	// Reference: https://webdriver.io/docs/api/browser/action/#special-characters
+	return {
+		'\n': Key.Enter,
+		[ backspace ]: Key.Backspace,
+	}[ str ];
 };
 
-const typeStringAndroid = async (
-	driver,
-	element,
-	str,
-	clear = true // See comment above for why it is defaulted to true.
-) => {
-	if ( str in strToKeycode ) {
-		return await driver.pressKeycode( strToKeycode[ str ] );
-	} else if ( clear ) {
-		/*
-		 * On Android `element.type` deletes the contents of the EditText before typing and, unfortunately,
-		 * with our blocks it also deletes the block entirely. We used to avoid this by using adb to enter
-		 * long text along these lines:
-		 *         await driver.execute( 'mobile: shell', { command: 'input',
-		 *                                                  args: [ 'text', 'text I want to enter...' ] } )
-		 * but using adb in this way proved to be very flaky (frequently all of the text would not get entered,
-		 * particularly on CI). We are now using the `type` approach again, but adding a space to the block to
-		 * insure it is not empty, which avoids the deletion of the block when `type` executes.
-		 *
-		 * Note that this approach does not allow appending text to the text in a block on account
-		 * of `type` always clearing the block (on Android).
-		 */
-
-		await driver.execute( 'mobile: shell', {
-			command: 'input',
-			args: [ 'text', '%s' ],
-		} );
-		await element.type( str );
-	} else {
-		// eslint-disable-next-line no-console
-		console.log(
-			'Warning: Using `adb shell input text` on Android which is rather flaky.'
-		);
+/**
+ * Determines if the string is mapped to a keycode.
+ *
+ * @param {string} str String potentially associated to a keycode
+ */
+const isKeycode = ( str ) => {
+	return !! getKeycode( str );
+};
 
-		const paragraphs = str.split( '\n' );
-		for ( let i = 0; i < paragraphs.length; i++ ) {
-			const paragraph = paragraphs[ i ].replace( /[ ]/g, '%s' );
-			if ( paragraph in strToKeycode ) {
-				await driver.pressKeycode( strToKeycode[ paragraph ] );
-			} else {
-				// Execute with adb shell input <text> since normal type auto clears field on Android
-				await driver.execute( 'mobile: shell', {
-					command: 'input',
-					args: [ 'text', paragraph ],
-				} );
-			}
-			if ( i !== paragraphs.length - 1 ) {
-				await driver.pressKeycode( strToKeycode[ '\n' ] );
-			}
-		}
+/**
+ * Presses the specified keycode.
+ *
+ * @param {*} driver  WebDriver instance
+ * @param {*} keycode Keycode to press
+ */
+const pressKeycode = async ( driver, keycode ) => {
+	if ( isAndroid() ) {
+		// `pressKeyCode` command is only implemented on Android
+		return await driver.pressKeyCode( keycode );
 	}
+	// `sendKeys` command only works on iOS. On Android, executing this
+	// results in typing a special character instead.
+	return await driver.sendKeys( [ keycode ] );
 };
 
 // Calculates middle x,y and clicks that position
@@ -287,95 +283,155 @@ const clickMiddleOfElement = async ( driver, element ) => {
 	const location = await element.getLocation();
 	const size = await element.getSize();
 
-	const action = await new wd.TouchAction( driver );
-	action.press( { x: location.x + size.width / 2, y: location.y } );
-	action.release();
-	await action.perform();
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { x: location.x + size.width / 2, y: location.y } )
+		.down()
+		.up()
+		.perform();
 };
 
 // Clicks in the top left of an element.
 const clickBeginningOfElement = async ( driver, element ) => {
 	const location = await element.getLocation();
-	const action = await new wd.TouchAction( driver );
-	action.press( { x: location.x, y: location.y } );
-	action.release();
-	await action.perform();
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { x: location.x, y: location.y } )
+		.down()
+		.up()
+		.perform();
 };
 
-// Clicks in the top left of a text-based element outside of the TextInput
-const clickElementOutsideOfTextInput = async ( driver, element ) => {
-	const location = await element.getLocation();
-	const y = isAndroid() ? location.y - blockEdgeToContent : location.y;
-	const x = isAndroid() ? location.x - blockEdgeToContent : location.x;
-
-	const action = new wd.TouchAction( driver ).press( { x, y } ).release();
-	await action.perform();
-};
+async function longPressElement(
+	driver,
+	element,
+	{ waitTime = 1000, offset = { x: 0, y: 0 } } = {}
+) {
+	// Focus on the element first, otherwise on iOS it fails to open the context menu.
+	// We can't do it all in one action because it detects it as a force press and it
+	// is not supported by the simulator.
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { origin: element } )
+		.down()
+		.up()
+		.perform();
 
-// Long press to activate context menu.
-const longPressMiddleOfElement = async ( driver, element ) => {
 	const location = await element.getLocation();
 	const size = 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
-		.release();
-	await action.perform();
-};
-
-// Press "Select All" in floating context menu.
-const tapSelectAllAboveElement = async ( driver, element ) => {
-	const location = await element.getLocation();
-	const action = await new wd.TouchAction( driver );
-	const x = location.x + 300;
-	const y = location.y - 50;
-	action.press( { x, y } );
-	action.release();
-	await action.perform();
-};
+	let offsetX = offset.x;
+	if ( typeof offset.x === 'function' ) {
+		offsetX = offset.x( size.width );
+	}
+	let offsetY = offset.y;
+	if ( typeof offset.y === 'function' ) {
+		offsetY = offset.y( size.height );
+	}
 
-// Press "Copy" in floating context menu.
-const tapCopyAboveElement = async ( driver, element ) => {
-	const location = await element.getLocation();
-	const action = await new wd.TouchAction( driver );
-	const x = location.x + 220;
-	const y = location.y - 50;
-	action.wait( 2000 );
-	action.press( { x, y } );
-	action.wait( 2000 );
-	action.release();
-	await action.perform();
-};
+	// Long-press
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { x: location.x + offsetX, y: location.y + offsetY } )
+		.down()
+		.pause( waitTime )
+		.up()
+		.perform();
+}
 
-// Press "Paste" in floating context menu.
-const tapPasteAboveElement = async ( driver, element ) => {
-	await longPressMiddleOfElement( driver, element );
+// Long press to activate context menu.
+const longPressMiddleOfElement = async (
+	driver,
+	element,
+	{ waitTime = 1000 } = {}
+) => {
+	await longPressElement( driver, element, {
+		waitTime,
+		offset: {
+			x: ( width ) => width / 2,
+			y: ( height ) => height / 2,
+		},
+	} );
+};
+
+const tapStatusBariOS = async ( driver ) => {
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { x: 20, y: 20 } )
+		.down()
+		.up()
+		.pause( 100 )
+		.perform();
+
+	// Wait for the scroll animation to finish
+	await driver.pause( 3000 );
+};
+
+const selectTextFromElement = async ( driver, element ) => {
+	const timeout = 1000;
 
+	// On Android we can't "locate" the context menu options,
+	// To avoid having fixed coordinates to be able to
+	// select all text, it just selects all text by
+	// long-pressing and dragging.
 	if ( isAndroid() ) {
+		await element.click();
+
 		const location = await element.getLocation();
-		const action = await new wd.TouchAction( driver );
-		action.wait( 2000 );
-		action.press( { x: location.x + 100, y: location.y - 50 } );
-		action.wait( 2000 );
-		action.release();
-		await action.perform();
+		const size = await element.getSize();
+		const paddingPercentage = 0.2;
+		const leftPaddingOffset = size.width * paddingPercentage;
+		const startX = location.x + leftPaddingOffset;
+		const endX = location.x + size.width;
+		const centerY = location.y + size.height / 2;
+
+		await driver
+			.action( 'pointer', {
+				parameters: { pointerType: 'touch' },
+			} )
+			.move( { x: startX, y: centerY } )
+			.down()
+			.pause( timeout ) // Long-press at the start of the element
+			.move( { x: endX, y: centerY, duration: 1000 } ) // Slowly drag to the end of the element to highlight all text
+			.up()
+			.pause( timeout ) // Pause to wait for the context menu to show up
+			.perform();
 	} else {
-		const pasteButtonLocator = '//XCUIElementTypeMenuItem[@name="Paste"]';
-		await clickIfClickable( driver, pasteButtonLocator );
-		await driver.sleep( 3000 ); // Wait for paste notification to disappear.
+		// On iOS we can use the context menu to "Select all" text.
+		await longPressMiddleOfElement( driver, element );
+
+		const selectAllElement = await driver.$(
+			'//XCUIElementTypeMenuItem[@name="Select All"]'
+		);
+		await selectAllElement.waitForDisplayed( { timeout } );
+		await selectAllElement.click();
 	}
 };
 
-// Starts from the middle of the screen or the element(if specified)
-// and swipes upwards.
+/**
+ * Starts from the middle of the screen or the element(if specified)
+ * and swipes upwards.
+ *
+ * @param {Object} driver                  WebdriverIO driver
+ * @param {Object} element                 Element to swipe from
+ * @param {Object} options                 Options
+ * @param {number} options.delay           Delay between the swipe and the next action
+ * @param {number} options.endYCoefficient Multiplier for the end Y coordinate
+ */
 const swipeUp = async (
 	driver,
 	element = undefined,
-	delay = 3000,
-	endYCoefficient = 0.5
+	{ delay = 3000, endYCoefficient = 0.5 } = {}
 ) => {
 	let size = await driver.getWindowSize();
 	let y = 0;
@@ -403,25 +459,38 @@ const swipeFromTo = async (
 	driver,
 	from = defaultCoordinates,
 	to = defaultCoordinates,
-	delay
-) => {
-	const action = await new wd.TouchAction( driver );
-	action.press( from );
-	action.wait( delay );
-	action.moveTo( to );
-	action.release();
-	await action.perform();
-};
+	delay = 0
+) =>
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { ...from, duration: 0 } )
+		.down( { button: 0 } )
+		.move( { ...to, duration: 300 } )
+		.up( { button: 0 } )
+		.pause( delay )
+		.perform();
 
-// Starts from the middle of the screen and swipes downwards
-const swipeDown = async ( driver, delay = 3000 ) => {
+/**
+ * Starts from the middle of the screen and swipes downwards
+ *
+ * @param {Object} driver                  WebdriverIO driver
+ * @param {Object} options                 Options
+ * @param {number} options.delay           Delay between the swipe and the next action
+ * @param {number} options.endYCoefficient Multiplier for the end Y coordinate
+ */
+const swipeDown = async (
+	driver,
+	{ delay = 3000, endYCoefficient = 0.5 } = {}
+) => {
 	const size = await driver.getWindowSize();
 	const y = 0;
 
 	const startX = size.width / 2;
 	const startY = y + size.height / 3;
 	const endX = startX;
-	const endY = startY - startY * -1 * 0.5;
+	const endY = startY - startY * -1 * endYCoefficient;
 
 	await swipeFromTo(
 		driver,
@@ -446,39 +515,40 @@ const dragAndDropAfterElement = async ( driver, element, nextElement ) => {
 		? elementLocation.y + nextElementLocation.y + nextElementSize.height
 		: nextElementLocation.y + nextElementSize.height;
 
-	const action = new wd.TouchAction( driver )
-		.press( { x, y } )
-		.wait( 5000 )
-		.moveTo( { x, y: nextYPosition } )
-		.release();
-	await action.perform();
+	await driver
+		.action( 'pointer', {
+			parameters: { pointerType: 'touch' },
+		} )
+		.move( { x, y } )
+		.down()
+		.pause( 5000 )
+		.move( { x, y: nextYPosition, duration: 500 } )
+		.up()
+		.perform();
 };
 
 const toggleHtmlMode = async ( driver, toggleOn ) => {
 	if ( isAndroid() ) {
-		// Hit the "Menu" key.
-		await driver.pressKeycode( 82 );
+		const moreOptionsButton = await driver.$( '~More options' );
+		await moreOptionsButton.click();
 
 		const showHtmlButtonXpath =
 			'/hierarchy/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.FrameLayout/android.widget.LinearLayout/android.widget.FrameLayout/android.widget.ListView/android.widget.TextView[9]';
 
 		await clickIfClickable( driver, showHtmlButtonXpath );
 	} else if ( toggleOn ) {
-		await clickIfClickable(
-			driver,
-			'//XCUIElementTypeButton[@name="..."]'
-		);
+		const moreOptionsButton = await driver.$( '~editor-menu-button' );
+		await moreOptionsButton.click();
+
 		await clickIfClickable(
 			driver,
 			'//XCUIElementTypeButton[@name="Switch to HTML"]'
 		);
 	} else {
 		// This is to wait for the clipboard paste notification to disappear, currently it overlaps with the menu button
-		await driver.sleep( 3000 );
-		await clickIfClickable(
-			driver,
-			'//XCUIElementTypeButton[@name="..."]'
-		);
+		await driver.pause( 3000 );
+		const moreOptionsButton = await driver.$( '~editor-menu-button' );
+		await moreOptionsButton.click();
 		await clickIfClickable(
 			driver,
 			'//XCUIElementTypeButton[@name="Switch To Visual"]'
@@ -495,12 +565,34 @@ const toggleOrientation = async ( driver ) => {
 	}
 };
 
+/**
+ * Toggle the device dark mode.
+ *
+ * @param {Object}  driver   Driver
+ * @param {boolean} darkMode Whether to enable dark mode or not
+ */
+const toggleDarkMode = ( driver, darkMode = true ) => {
+	if ( isAndroid() ) {
+		return driver.executeScript( 'mobile: shell', [
+			{
+				command: `cmd uimode night  ${ darkMode ? 'yes' : 'no' }`,
+			},
+		] );
+	}
+
+	return driver.executeScript( 'mobile: setAppearance', [
+		{
+			style: darkMode ? 'dark' : 'light',
+		},
+	] );
+};
+
 const isEditorVisible = async ( driver ) => {
 	const postTitleLocator = isAndroid()
 		? `//android.widget.EditText[contains(@content-desc, "Post title")]`
 		: `(//XCUIElementTypeScrollView/XCUIElementTypeOther/XCUIElementTypeOther[contains(@name, "Post title")])`;
 
-	await waitForVisible( driver, postTitleLocator );
+	await driver.$( postTitleLocator ).waitForDisplayed( { timeout: 30000 } );
 };
 
 const waitForMediaLibrary = async ( driver ) => {
@@ -536,10 +628,10 @@ const waitForVisible = async (
 		return '';
 	} else if ( iteration !== 0 ) {
 		// wait before trying to locate element again
-		await driver.sleep( timeout );
+		await driver.pause( timeout );
 	}
 
-	const elements = await driver.elementsByXPath( elementLocator );
+	const elements = await driver.$$( elementLocator );
 	if ( elements.length === 0 ) {
 		// if locator is not visible, try again
 		return waitForVisible(
@@ -626,70 +718,55 @@ const clickIfClickable = async (
 	}
 };
 
-// Only for Android
-const waitIfAndroid = async () => {
+const launchApp = async ( driver, initialProps = {} ) => {
 	if ( isAndroid() ) {
-		await editorPage.driver.sleep( 1000 );
+		await driver.execute( 'mobile: startActivity', {
+			component: ANDROID_COMPONENT_NAME,
+			stop: true,
+			extras: [
+				[
+					's',
+					'initialProps',
+					`'${ JSON.stringify( initialProps ) }'`,
+				],
+			],
+		} );
+	} else {
+		await driver.execute( 'mobile: terminateApp', {
+			bundleId: IOS_BUNDLE_ID,
+		} );
+		await driver.execute( 'mobile: launchApp', {
+			bundleId: IOS_BUNDLE_ID,
+			arguments: [ 'uitesting', JSON.stringify( initialProps ) ],
+		} );
 	}
 };
 
-/**
- * Content type definitions.
- * Note: Android only supports plaintext.
- *
- * @typedef {"plaintext" | "image" | "url"} ClipboardContentType
- */
-
-/**
- * Helper to set content in the clipboard.
- *
- * @param {Object}               driver      Driver
- * @param {string}               content     Content to set in the clipboard
- * @param {ClipboardContentType} contentType Type of the content
- */
-const setClipboard = async ( driver, content, contentType = 'plaintext' ) => {
-	const base64String = Buffer.from( content ).toString( 'base64' );
-	await driver.setClipboard( base64String, contentType );
-};
-
-/**
- * Helper to clear the clipboard
- *
- * @param {Object}               driver      Driver
- * @param {ClipboardContentType} contentType Type of the content
- */
-const clearClipboard = async ( driver, contentType = 'plaintext' ) => {
-	await driver.setClipboard( '', contentType );
-};
-
 module.exports = {
 	backspace,
-	clearClipboard,
 	clickBeginningOfElement,
-	clickElementOutsideOfTextInput,
 	clickIfClickable,
 	clickMiddleOfElement,
-	doubleTap,
 	dragAndDropAfterElement,
 	isAndroid,
 	isEditorVisible,
 	isElementVisible,
 	isLocalEnvironment,
+	launchApp,
+	longPressElement,
 	longPressMiddleOfElement,
-	setClipboard,
+	selectTextFromElement,
 	setupDriver,
 	stopDriver,
 	swipeDown,
 	swipeFromTo,
 	swipeUp,
-	tapCopyAboveElement,
-	tapPasteAboveElement,
-	tapSelectAllAboveElement,
+	tapStatusBariOS,
 	timer,
+	toggleDarkMode,
 	toggleHtmlMode,
 	toggleOrientation,
 	typeString,
 	waitForMediaLibrary,
 	waitForVisible,
-	waitIfAndroid,
 };
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..77f4a700b11370 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -2,12 +2,8 @@
  * Internal dependencies
  */
 const {
-	doubleTap,
 	isAndroid,
 	isEditorVisible,
-	isElementVisible,
-	longPressMiddleOfElement,
-	setClipboard,
 	setupDriver,
 	stopDriver,
 	swipeDown,
@@ -17,11 +13,16 @@ const {
 	typeString,
 	waitForVisible,
 	clickIfClickable,
+	launchApp,
+	tapStatusBariOS,
+	longPressElement,
+	longPressMiddleOfElement,
 } = require( '../helpers/utils' );
 
-const initializeEditorPage = async () => {
+const ADD_BLOCK_ID = isAndroid() ? 'Add block' : 'add-block-button';
+
+const setupEditor = async () => {
 	const driver = await setupDriver();
-	await isEditorVisible( driver );
 	return new EditorPage( driver );
 };
 
@@ -37,6 +38,8 @@ class EditorPage {
 		this.driver = driver;
 		this.accessibilityIdKey = 'name';
 		this.accessibilityIdXPathAttrib = 'name';
+		this.initialValues = {};
+		this.blockNames = blockNames;
 
 		if ( isAndroid() ) {
 			this.accessibilityIdXPathAttrib = 'content-desc';
@@ -44,24 +47,57 @@ class EditorPage {
 		}
 	}
 
+	async initializeEditor( {
+		initialTitle,
+		initialData,
+		rawStyles,
+		rawFeatures,
+	} = {} ) {
+		await launchApp( this.driver, {
+			initialTitle,
+			initialData,
+			rawStyles,
+			rawFeatures,
+		} );
+
+		// Stores initial values from the editor for different helpers.
+		const addButton = await this.driver.$$( `~${ ADD_BLOCK_ID }` );
+
+		if ( addButton.length !== 0 ) {
+			this.initialValues.addButtonLocation =
+				await addButton[ 0 ].getLocation();
+		}
+
+		await isEditorVisible( this.driver );
+	}
+
 	async getBlockList() {
 		return await this.driver.hasElementByAccessibilityId( 'block-list' );
 	}
 
+	async getAddBlockButton() {
+		const elements = await this.driver.$$( `~${ ADD_BLOCK_ID }` );
+		return elements[ 0 ];
+	}
+
 	// ===============================
 	// Text blocks functions
 	// E.g. Paragraph, Heading blocks
 	// ===============================
-	async getTextBlockAtPosition( blockName, position = 1 ) {
+	async getTextBlockAtPosition(
+		blockName,
+		position = 1,
+		skipWrapperClick = false
+	) {
 		// iOS needs a click to get the text element
-		if ( ! isAndroid() ) {
+		if ( ! isAndroid() && ! skipWrapperClick ) {
 			const textBlockLocator = `(//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }")])`;
 
 			await clickIfClickable( this.driver, textBlockLocator );
 		}
 
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "${ blockName } Block. Row ${ position }.")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "${ blockName } Block. Row ${ position }.")]//android.widget.EditText`
 			: `//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }.")]//XCUIElementTypeTextView`;
 
 		return await waitForVisible( this.driver, blockLocator );
@@ -71,6 +107,57 @@ class EditorPage {
 		await typeString( this.driver, block, text, clear );
 	}
 
+	async typeKeyString( inputString ) {
+		const actions = this.driver.action( 'key' );
+
+		for ( const char of inputString ) {
+			await actions.down( char ).up( char );
+		}
+
+		await actions.perform();
+	}
+
+	async pasteClipboardToTextBlock( element, { timeout = 1000 } = {} ) {
+		if ( this.driver.isAndroid ) {
+			await longPressMiddleOfElement( this.driver, element );
+		} else {
+			await longPressElement( this.driver, element );
+		}
+
+		if ( this.driver.isAndroid ) {
+			// Long pressing seemingly results in drag-and-drop blurring the input, so
+			// we tap again to re-focus the input.
+			await this.driver
+				.action( 'pointer', {
+					parameters: { pointerType: 'touch' },
+				} )
+				.move( { origin: element } )
+				.down()
+				.up()
+				.perform();
+
+			const location = await element.getLocation();
+			const approximatePasteMenuLocation = {
+				x: location.x + 30,
+				y: location.y - 120,
+			};
+			await this.driver
+				.action( 'pointer', {
+					parameters: { pointerType: 'touch' },
+				} )
+				.move( approximatePasteMenuLocation )
+				.down()
+				.up()
+				.perform();
+		} else {
+			const pasteMenuItem = await this.driver.$(
+				'//XCUIElementTypeMenuItem[@name="Paste"]'
+			);
+			await pasteMenuItem.waitForDisplayed( { timeout } );
+			await pasteMenuItem.click();
+		}
+	}
+
 	// Finds the wd element for new block that was added and sets the element attribute
 	// and accessibilityId attributes on this object and selects the block
 	// position uses one based numbering.
@@ -79,23 +166,13 @@ class EditorPage {
 		position = 1,
 		options = { autoscroll: false }
 	) {
-		let elementType;
-		switch ( blockName ) {
-			case blockNames.cover:
-				elementType = 'XCUIElementTypeButton';
-				break;
-			default:
-				elementType = 'XCUIElementTypeOther';
-				break;
-		}
-
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`
-			: `(//${ elementType }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")])[1]`;
+			? `//android.widget.Button[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`
+			: `(//XCUIElementTypeOther[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")])[2]`;
 
 		await waitForVisible( this.driver, blockLocator );
 
-		const elements = await this.driver.elementsByXPath( blockLocator );
+		const elements = await this.driver.$$( blockLocator );
 		const lastElementFound = elements[ elements.length - 1 ];
 		if ( elements.length === 0 && options.autoscroll ) {
 			const firstBlockVisible = await this.getFirstBlockVisible();
@@ -138,6 +215,36 @@ class EditorPage {
 		return lastElementFound;
 	}
 
+	/**
+	 * Selects a block.
+	 *
+	 * @param {import('webdriverio').ChainablePromiseElement} block                           The block to select.
+	 * @param {Object}                                        options                         Configuration options.
+	 * @param {Object}                                        [options.offset={ x: 0, y: 0 }] The offset for the click position.
+	 * @param {number|Function}                               [options.offset.x=0]            The x-coordinate offset or a function that calculates the offset based on the block's width.
+	 * @param {number|Function}                               [options.offset.y=0]            The y-coordinate offset or a function that calculates the offset based on the block's height.
+	 *
+	 * @return {import('webdriverio').ChainablePromiseElement} The selected block.
+	 */
+	async selectBlock( block, options = {} ) {
+		const { offset = { x: 0, y: 0 } } = options;
+		const size = await block.getSize();
+
+		let offsetX = offset.x;
+		if ( typeof offset.x === 'function' ) {
+			offsetX = offset.x( size.width );
+		}
+
+		let offsetY = offset.y;
+		if ( typeof offset.y === 'function' ) {
+			offsetY = offset.y( size.height );
+		}
+
+		await block.click( { x: offsetX, y: offsetY } );
+
+		return block;
+	}
+
 	async getFirstBlockVisible() {
 		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
 		return await waitForVisible( this.driver, firstBlockLocator );
@@ -161,39 +268,93 @@ class EditorPage {
 	}
 
 	async addParagraphBlockByTappingEmptyAreaBelowLastBlock() {
-		const emptyAreaBelowLastBlock =
-			await this.driver.elementByAccessibilityId( 'Add paragraph block' );
+		const element = isAndroid()
+			? '~Add paragraph block'
+			: '(//XCUIElementTypeOther[@name="Add paragraph block"])';
+		const emptyAreaBelowLastBlock = await this.driver.$( element );
 		await emptyAreaBelowLastBlock.click();
 	}
 
-	async getTitleElement( options = { autoscroll: false } ) {
-		// TODO: Improve the identifier for this element
-		const elements = await this.driver.elementsByXPath(
-			`//*[contains(@${ this.accessibilityIdXPathAttrib }, "Post title.")]`
-		);
-		if ( elements.length === 0 && options.autoscroll ) {
-			await swipeDown( this.driver );
-			return this.getTitleElement( options );
+	async getDefaultBlockAppenderElement() {
+		const appenderElement = isAndroid()
+			? `//android.widget.EditText[@text='Start writing…']`
+			: '(//XCUIElementTypeOther[contains(@name, "Start writing…")])[2]';
+		return this.driver.$( appenderElement );
+	}
+
+	async getTitleElement( options = { autoscroll: false, isEmpty: false } ) {
+		const titleElement = isAndroid()
+			? `Post title. ${
+					options.isEmpty ? 'Empty' : 'Welcome to Gutenberg!'
+			  }`
+			: 'post-title';
+
+		if ( options.autoscroll ) {
+			if ( isAndroid() ) {
+				await swipeDown( this.driver, { endYCoefficient: 2 } );
+			} else {
+				await tapStatusBariOS( this.driver );
+			}
 		}
-		return elements[ elements.length - 1 ];
+
+		const elements = await this.driver.$$( `~${ titleElement }` );
+
+		if (
+			elements.length === 0 ||
+			! ( await elements[ 0 ].isDisplayed() )
+		) {
+			return await this.getTitleElement( options );
+		}
+		return elements[ 0 ];
+	}
+
+	async getEmptyTitleTextInputElement() {
+		const titleWrapperElement = await this.getTitleElement( {
+			isEmpty: true,
+		} );
+		await titleWrapperElement.click();
+
+		const titleElement = isAndroid()
+			? '//android.widget.EditText[@content-desc="Post title. Empty"]'
+			: '~Add title';
+		return this.driver.$( titleElement );
 	}
 
 	// iOS loads the block list more eagerly compared to Android.
 	// This makes this function return elements without scrolling on iOS.
 	// So we are keeping this Android only.
 	async androidScrollAndReturnElement( accessibilityLabel ) {
-		const elements = await this.driver.elementsByXPath(
+		const elements = await this.driver.$$(
 			`//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]`
 		);
 		if ( elements.length === 0 ) {
-			await swipeUp( this.driver, undefined, 100, 1 );
+			await swipeUp( this.driver, undefined, {
+				delay: 100,
+				endYCoefficient: 1,
+			} );
 			return this.androidScrollAndReturnElement( accessibilityLabel );
 		}
 		return elements[ elements.length - 1 ];
 	}
 
+	// For iOS, depending on the content and how fast the block list
+	// renders blocks, it won't need to scroll down as it would find
+	// the block right away.
+	async scrollAndReturnElementByAccessibilityId( id ) {
+		const elements = await this.driver.$$( `~${ id }` );
+
+		if ( elements.length === 0 ) {
+			await swipeUp( this.driver, undefined, {
+				delay: 100,
+				endYCoefficient: 1,
+			} );
+			return this.scrollAndReturnElementByAccessibilityId( id );
+		}
+		return elements[ elements.length - 1 ];
+	}
+
 	async getLastElementByXPath( accessibilityLabel ) {
-		const elements = await this.driver.elementsByXPath(
+		const elements = await this.driver.$$(
 			`//*[contains(@${ this.accessibilityIdXPathAttrib }, "${ accessibilityLabel }")]`
 		);
 		return elements[ elements.length - 1 ];
@@ -214,53 +375,60 @@ class EditorPage {
 		await toggleHtmlMode( this.driver, true );
 
 		const htmlContentView = await this.getTextViewForHtmlViewContent();
-		const text = await htmlContentView.text();
+		const text = await htmlContentView.getText();
 
 		await toggleHtmlMode( this.driver, false );
 		return text;
 	}
 
-	// Set html editor content explicitly.
-	async setHtmlContent( html ) {
-		await toggleHtmlMode( this.driver, true );
-
-		await setClipboard( this.driver, html );
-
-		const htmlContentView = await this.getTextViewForHtmlViewContent();
-
-		if ( isAndroid() ) {
-			// Attention! On Android `.type()` replaces the content of htmlContentView instead of appending
-			// contrary to what iOS is doing. On Android tried calling `driver.pressKeycode( 279 ) // KEYCODE_PASTE`
-			// before to paste, but for some reason it didn't work on GitHub Actions but worked only on Sauce Labs
-			await htmlContentView.type( html );
-		} else {
-			await htmlContentView.click();
-			await doubleTap( this.driver, htmlContentView );
-			// Sometimes double tap is not enough for paste menu to appear, so we also long press.
-			await longPressMiddleOfElement( this.driver, htmlContentView );
+	async dismissKeyboard() {
+		const orientation = await this.driver.getOrientation();
+		const keyboardShown = await this.driver.isKeyboardShown();
+		if ( ! keyboardShown ) {
+			return;
+		}
 
-			await clickIfClickable(
-				this.driver,
-				'//XCUIElementTypeMenuItem[@name="Paste"]'
-			);
+		// On Android with the landspace orientation set, we use the
+		// driver functionality to hide the keyboard.
+		if ( isAndroid() && orientation === 'LANDSCAPE' ) {
+			return await this.driver.hideKeyboard();
 		}
 
-		await toggleHtmlMode( this.driver, false );
+		const hideKeyboardButton = isAndroid()
+			? await this.waitForElementToBeDisplayedById( 'Hide keyboard' )
+			: await this.waitForElementToBeDisplayedByXPath(
+					'(//XCUIElementTypeOther[@name="Hide keyboard"])[1]'
+			  );
+
+		await hideKeyboardButton.click();
+		await this.waitForKeyboardToBeHidden();
 	}
 
-	async dismissKeyboard() {
-		const keyboardShown = await this.driver.isKeyboardShown();
-		if ( ! keyboardShown ) {
-			return;
+	// Takes the add block button as reference for the keyboard to be
+	// fully hidden.
+	async waitForKeyboardToBeHidden() {
+		const { addButtonLocation } = this.initialValues;
+		const addButton = await this.getAddBlockButton();
+		let location;
+		if ( addButton ) {
+			location = await addButton.getLocation();
 		}
-		if ( isAndroid() ) {
-			return await this.driver.hideDeviceKeyboard();
+		let YLocation = addButtonLocation?.y;
+		const currentOrientation = await this.driver.getOrientation();
+		const isLandscape = currentOrientation === 'LANDSCAPE';
+
+		if ( isLandscape ) {
+			const windowSize = await this.driver.getWindowSize();
+			const safeAreaOffset = 32;
+			YLocation = Math.floor(
+				( windowSize.height * YLocation ) / windowSize.width -
+					safeAreaOffset
+			);
 		}
 
-		await clickIfClickable(
-			this.driver,
-			'//XCUIElementTypeButton[@name="Hide keyboard"]'
-		);
+		if ( ! addButton || location?.y < YLocation ) {
+			await this.waitForKeyboardToBeHidden();
+		}
 	}
 
 	async dismissAndroidClipboardSmartSuggestion() {
@@ -269,7 +437,7 @@ class EditorPage {
 		}
 
 		const dismissClipboardSmartSuggestionLocator = `//*[@${ this.accessibilityIdXPathAttrib }="Dismiss Smart Suggestion"]`;
-		const smartSuggestions = await this.driver.elementsByXPath(
+		const smartSuggestions = await this.driver.$$(
 			dismissClipboardSmartSuggestionLocator
 		);
 		if ( smartSuggestions.length !== 0 ) {
@@ -277,56 +445,109 @@ class EditorPage {
 		}
 	}
 
-	async openBlockSettings( block ) {
-		await block.click();
+	async swipeToolbarToElement( elementSelector, options ) {
+		const { byId, swipeRight } = options || {};
+		const offset = isAndroid() ? 300 : 50;
+		const maxLocatorAttempts = 5;
+		let locatorAttempts = 0;
+		let element;
+
+		const toolbar = await this.getToolbar();
+		const toolbarLocation = await toolbar.getLocation();
+		const toolbarSize = await toolbar.getSize();
+
+		while ( locatorAttempts < maxLocatorAttempts ) {
+			element = byId
+				? await this.driver.$$( `~${ elementSelector }` )
+				: await this.driver.$$( elementSelector );
+			if ( await element[ 0 ]?.isDisplayed() ) {
+				break;
+			}
+
+			swipeFromTo(
+				this.driver,
+				{
+					x: ! swipeRight
+						? toolbarSize.width - offset
+						: toolbarSize.width / 2,
+					y: toolbarLocation.y + toolbarSize.height / 2,
+				},
+				{
+					x: ! swipeRight
+						? toolbarSize.width / 2
+						: toolbarSize.width - offset,
+					y: toolbarLocation.y + toolbarSize.height / 2,
+				},
+				1000
+			);
+			locatorAttempts++;
+		}
+		return element;
+	}
 
-		const settingsButton = await block.elementByAccessibilityId(
-			'Open Settings'
+	async openBlockSettings() {
+		const settingsButtonElement = isAndroid()
+			? '//android.widget.Button[@content-desc="Open Settings"]/android.view.ViewGroup'
+			: '//XCUIElementTypeButton[@name="Open Settings"]';
+		const settingsButton = await this.waitForElementToBeDisplayedByXPath(
+			settingsButtonElement
 		);
+
 		await settingsButton.click();
 	}
 
+	getBlockActionsMenuElement() {
+		return isAndroid()
+			? '//android.widget.Button[contains(@content-desc, "Open Block Actions Menu")]'
+			: '//XCUIElementTypeButton[@name="Open Block Actions Menu"]';
+	}
+
+	async removeBlock() {
+		const blockActionsButtonElement = this.getBlockActionsMenuElement();
+		const blockActionsMenu = await this.swipeToolbarToElement(
+			blockActionsButtonElement
+		);
+		await blockActionsMenu[ 0 ].click();
+
+		const removeElement = 'Remove block';
+		const removeBlockButton = await this.waitForElementToBeDisplayedById(
+			removeElement,
+			4000
+		);
+		return await removeBlockButton.click();
+	}
+
 	async dismissBottomSheet() {
 		return await swipeDown( this.driver );
 	}
 
+	async isBlockActionsMenuButtonDisplayed() {
+		const menuButtonElement = this.getBlockActionsMenuElement();
+		const elementsFound = await this.driver.$$( menuButtonElement );
+		return elementsFound.length !== 0;
+	}
+
 	// =========================
 	// Block toolbar functions
 	// =========================
 
-	async addNewBlock( blockName, relativePosition ) {
-		const addBlockButtonLocator = isAndroid()
-			? '//android.widget.Button[@content-desc="Add block, Double tap to add a block"]'
-			: '//XCUIElementTypeButton[@name="add-block-button"]';
-
-		const addButton = await waitForVisible(
-			this.driver,
-			addBlockButtonLocator
-		);
-
-		if ( relativePosition === 'before' ) {
-			await longPressMiddleOfElement( this.driver, addButton );
-			const addBlockBeforeButtonLocator = isAndroid()
-				? '//android.widget.Button[@content-desc="Add Block Before"]'
-				: '//XCUIElementTypeButton[@name="Add Block Before"]';
+	async getToolbar() {
+		return this.waitForElementToBeDisplayedById( 'Document tools', 4000 );
+	}
 
-			await clickIfClickable( this.driver, addBlockBeforeButtonLocator );
-		} else {
-			await addButton.click();
+	async addNewBlock( blockName, { skipInserterOpen = false } = {} ) {
+		if ( ! skipInserterOpen ) {
+			const addButton = await this.swipeToolbarToElement( ADD_BLOCK_ID, {
+				byId: true,
+				swipeRight: true,
+			} );
+			await addButton[ 0 ].click();
 		}
 
 		// Click on block of choice.
 		const blockButton = await this.findBlockButton( blockName );
 
-		if ( isAndroid() ) {
-			await blockButton.click();
-		} else {
-			await this.driver.execute( 'mobile: tap', {
-				element: blockButton,
-				x: 10,
-				y: 10,
-			} );
-		}
+		await blockButton.click();
 	}
 
 	static getInserterPageHeight( screenHeight ) {
@@ -334,14 +555,23 @@ class EditorPage {
 		return screenHeight * 0.82;
 	}
 
+	async waitForInserter() {
+		const inserterElement = isAndroid()
+			? 'Blocks menu'
+			: 'InserterUI-Blocks';
+		await this.driver
+			.$( `~${ inserterElement }` )
+			.waitForDisplayed( { timeout: 4000 } );
+	}
+
+	static async isElementOutOfBounds( element, { width, height } = {} ) {
+		const { x, y } = await element.getLocation();
+		return x > width || y > height;
+	}
+
 	// Attempts to find the given block button in the block inserter control.
 	async findBlockButton( blockName ) {
-		// Wait for the first block, Paragraph block, to load before looking for other blocks
-		const paragraphBlockLocator = isAndroid()
-			? '//android.widget.Button[@content-desc="Paragraph block"]/android.widget.TextView'
-			: '//XCUIElementTypeButton[@name="Paragraph block"]';
-
-		await waitForVisible( this.driver, paragraphBlockLocator );
+		await this.waitForInserter();
 		const blockAccessibilityLabel = `${ blockName } block`;
 		const blockAccessibilityLabelNewBlock = `${ blockAccessibilityLabel }, newly available`;
 
@@ -350,12 +580,12 @@ class EditorPage {
 			const x = size.width / 2;
 			// Checks if the Block Button is available, and if not will scroll to the second half of the available buttons.
 			while (
-				! ( await this.driver.hasElementByAccessibilityId(
-					blockAccessibilityLabel
-				) ) &&
-				! ( await this.driver.hasElementByAccessibilityId(
-					blockAccessibilityLabelNewBlock
-				) )
+				! ( await this.driver
+					.$( `~${ blockAccessibilityLabel }` )
+					.isDisplayed() ) &&
+				! ( await this.driver
+					.$( `~${ blockAccessibilityLabelNewBlock }` )
+					.isDisplayed() )
 			) {
 				swipeFromTo(
 					this.driver,
@@ -365,55 +595,89 @@ class EditorPage {
 			}
 
 			if (
-				await this.driver.hasElementByAccessibilityId(
-					blockAccessibilityLabelNewBlock
-				)
+				await this.driver
+					.$( `~${ blockAccessibilityLabelNewBlock }` )
+					.isDisplayed()
 			) {
-				return await this.driver.elementByAccessibilityId(
-					blockAccessibilityLabelNewBlock
+				return await this.driver.$(
+					`~${ blockAccessibilityLabelNewBlock }`
 				);
 			}
 
-			return await this.driver.elementByAccessibilityId(
-				blockAccessibilityLabel
-			);
+			return await this.driver.$( `~${ blockAccessibilityLabel }` );
 		}
 
-		const blockButton = ( await this.driver.hasElementByAccessibilityId(
-			blockAccessibilityLabelNewBlock
-		) )
-			? await this.driver.elementByAccessibilityId(
-					blockAccessibilityLabelNewBlock
-			  )
-			: await this.driver.elementByAccessibilityId(
-					blockAccessibilityLabel
-			  );
+		const blockButton = ( await this.driver
+			.$( `~${ blockAccessibilityLabelNewBlock }` )
+			.isDisplayed() )
+			? await this.driver.$( `~${ blockAccessibilityLabelNewBlock }` )
+			: await this.driver.$( `~${ blockAccessibilityLabel }` );
 
 		const size = await this.driver.getWindowSize();
 		// The virtual home button covers the bottom 34 in portrait and 21 on landscape on iOS.
 		// We start dragging a bit above it to not trigger home button.
 		const height = size.height - 50;
 
-		while ( ! ( await blockButton.isDisplayed() ) ) {
-			await this.driver.execute( 'mobile: dragFromToForDuration', {
-				fromX: 50,
-				fromY: height,
-				toX: 50,
-				toY: EditorPage.getInserterPageHeight( height ),
-				duration: 0.5,
-			} );
+		while (
+			! ( await blockButton.isDisplayed() ) ||
+			( await EditorPage.isElementOutOfBounds( blockButton, { height } ) )
+		) {
+			await swipeFromTo(
+				this.driver,
+				{ x: 50, y: height },
+				{ x: 50, y: EditorPage.getInserterPageHeight( height ) },
+				3000
+			);
+			// Wait for dragging gesture
+			await this.driver.pause( 2000 );
 		}
 
 		return blockButton;
 	}
 
 	async clickToolBarButton( buttonName ) {
-		const toolBarButton = await this.driver.elementByAccessibilityId(
-			buttonName
-		);
+		const toolBarButton =
+			await this.driver.elementByAccessibilityId( buttonName );
 		await toolBarButton.click();
 	}
 
+	async moveBlockSelectionUp( options = { toRoot: false } ) {
+		let navigateUpElements = [];
+		do {
+			await this.driver.pause( 2000 );
+			navigateUpElements = await this.driver.$$( `~Navigate Up` );
+			if ( navigateUpElements.length > 0 ) {
+				await navigateUpElements[ 0 ].click();
+			}
+			if ( ! options.toRoot ) {
+				break;
+			}
+		} while ( navigateUpElements.length > 0 );
+	}
+
+	// Adds a block by tapping on the appender button of blocks with inner blocks (e.g. Group block)
+	async addBlockUsingAppender( block, blockName ) {
+		const appenderButton = isAndroid()
+			? await this.waitForElementToBeDisplayedByXPath(
+					`//android.widget.Button[@resource-id="appender-button"]`
+			  )
+			: await this.waitForElementToBeDisplayedById( 'appender-button' );
+		await appenderButton.click();
+
+		// Click on block of choice.
+		const blockButton = await this.findBlockButton( blockName );
+
+		if ( isAndroid() ) {
+			await blockButton.click();
+		} else {
+			await this.driver.execute( 'mobile: tap', {
+				element: blockButton,
+				x: 10,
+				y: 10,
+			} );
+		}
+	}
+
 	// =========================
 	// Inline toolbar functions
 	// =========================
@@ -430,7 +694,7 @@ class EditorPage {
 		blockLocator += `[@${
 			this.accessibilityIdXPathAttrib
 		}="Move block up from row ${ position } to row ${ position - 1 }"]`;
-		const moveUpButton = await this.driver.elementByXPath( blockLocator );
+		const moveUpButton = await this.driver.$( `~${ blockLocator }` );
 		await moveUpButton.click();
 	}
 
@@ -450,59 +714,46 @@ class EditorPage {
 		await moveDownButton.click();
 	}
 
-	// Position of the block to remove
-	// Block will no longer be present if this succeeds.
-	async removeBlockAtPosition( blockName = '', position = 1 ) {
-		if ( ! ( await this.hasBlockAtPosition( position, blockName ) ) ) {
-			throw Error( `No Block at position ${ position }` );
-		}
+	// =========================
+	// Formatting toolbar functions
+	// =========================
 
-		const buttonElementName = isAndroid()
-			? '//*'
-			: '//XCUIElementTypeButton';
-		const blockActionsMenuButtonIdentifier = `Open Block Actions Menu`;
-		const blockActionsMenuButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockActionsMenuButtonIdentifier }")]`;
-		const blockActionsMenuButton = await waitForVisible(
-			this.driver,
-			blockActionsMenuButtonLocator
-		);
-		if ( isAndroid() ) {
-			const block = await this.getBlockAtPosition( blockName, position );
-			let checkList = await this.driver.elementsByXPath(
-				blockActionsMenuButtonLocator
-			);
-			while ( checkList.length === 0 ) {
-				await swipeUp( this.driver, block ); // Swipe up to show remove icon at the bottom.
-				checkList = await this.driver.elementsByXPath(
-					blockActionsMenuButtonLocator
-				);
-			}
-		}
+	async toggleFormatting( formatting ) {
+		const identifier = isAndroid()
+			? `//android.widget.Button[@content-desc="${ formatting }"]/android.view.ViewGroup`
+			: `//XCUIElementTypeButton[@name="${ formatting }"]`;
+		const toggleElement = await this.swipeToolbarToElement( identifier );
+		return await toggleElement[ 0 ].click();
+	}
 
-		await blockActionsMenuButton.click();
-		const removeActionButtonIdentifier = 'Remove block';
-		const removeActionButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ removeActionButtonIdentifier }")]`;
-		const removeActionButton = await waitForVisible(
-			this.driver,
-			removeActionButtonLocator
+	async openLinkToSettings() {
+		const element = await this.waitForElementToBeDisplayedById(
+			'Link to, Search or type URL'
 		);
 
-		await removeActionButton.click();
+		await element.click();
 	}
 
-	// =========================
-	// Paragraph Block functions
-	// =========================
+	async toggleHighlightColor( color ) {
+		await this.toggleFormatting( 'Text color' );
+		let element = `~${ color }`;
 
-	async getParagraphBlockWrapperAtPosition( position = 1 ) {
-		// iOS needs a click to get the text element
-		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row ${ position }")]`
-			: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row ${ position }")])`;
+		if ( ! color ) {
+			element = isAndroid()
+				? '~Clear selected color'
+				: '(//XCUIElementTypeOther[@name="Clear selected color"])[2]';
+		}
 
-		return await waitForVisible( this.driver, blockLocator );
+		await this.driver.waitUntil( this.driver.$( element ).isDisplayed );
+		const button = await this.driver.$( element );
+		await button.click();
+		await this.dismissBottomSheet();
 	}
 
+	// =========================
+	// Paragraph Block functions
+	// =========================
+
 	async sendTextToParagraphBlock( position, text, clear ) {
 		const paragraphs = text.split( '\n' );
 		for ( let i = 0; i < paragraphs.length; i++ ) {
@@ -517,7 +768,7 @@ class EditorPage {
 
 			await this.typeTextToTextBlock( block, paragraphs[ i ], clear );
 			if ( i !== paragraphs.length - 1 ) {
-				await this.typeTextToTextBlock( block, '\n', false );
+				await this.typeTextToTextBlock( block, '\n' );
 			}
 		}
 	}
@@ -528,26 +779,32 @@ class EditorPage {
 			position
 		);
 
-		return await blockLocator.text();
+		return await blockLocator.getText();
 	}
 
 	async getNumberOfParagraphBlocks() {
 		const paragraphBlockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "Paragraph Block. Row")]//android.widget.EditText`
 			: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row")])`;
 
-		const locator = await this.driver.elementsByXPath(
-			paragraphBlockLocator
-		);
+		const locator = await this.driver.$$( paragraphBlockLocator );
 		return locator.length;
 	}
 
 	async assertSlashInserterPresent() {
-		const slashInserterLocator = isAndroid()
-			? '//android.widget.HorizontalScrollView[@content-desc="Slash inserter results"]/android.view.ViewGroup'
-			: '(//XCUIElementTypeOther[@name="Slash inserter results"])[1]';
+		let isPresent = false;
+		const autocompleterElementId = isAndroid()
+			? 'Slash inserter results'
+			: 'autocompleter';
+		const autocompleterElement = await this.driver.$$(
+			`~${ autocompleterElementId }`
+		);
 
-		return await isElementVisible( this.driver, slashInserterLocator, 5 );
+		if ( autocompleterElement?.[ 0 ] ) {
+			isPresent = await autocompleterElement[ 0 ].isDisplayed();
+		}
+
+		return isPresent;
 	}
 
 	// =========================
@@ -578,7 +835,7 @@ class EditorPage {
 			: `//XCUIElementTypeButton[contains(@name, "List")]//XCUIElementTypeTextView`;
 
 		const listBlockTextLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "List Block. Row ${ position }")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "List Block. Row ${ position }")]//android.widget.EditText`
 			: listBlockTextLocatorIOS;
 
 		return await waitForVisible( this.driver, listBlockTextLocator );
@@ -603,9 +860,7 @@ class EditorPage {
 			this.driver,
 			'//XCUIElementTypeOther[@name="Media Add image or video"]'
 		);
-		const addMediaButton = await mediaSection.elementByAccessibilityId(
-			'Add image or video'
-		);
+		const addMediaButton = await mediaSection.$( '~Add image or video' );
 		await addMediaButton.click();
 	}
 
@@ -629,9 +884,7 @@ class EditorPage {
 			this.accessibilityIdKey
 		);
 		const blockLocator = `//*[@${ this.accessibilityIdXPathAttrib }="${ accessibilityId }"]//XCUIElementTypeButton[@name="Image block. Empty"]`;
-		const imageBlockInnerElement = await this.driver.elementByXPath(
-			blockLocator
-		);
+		const imageBlockInnerElement = await this.driver.$( blockLocator );
 		await imageBlockInnerElement.click();
 	}
 
@@ -643,28 +896,53 @@ class EditorPage {
 		await clickIfClickable( this.driver, mediaLibraryLocator );
 	}
 
+	async getImageBlockCaptionButton() {
+		const captionElement = isAndroid()
+			? '//android.widget.Button[starts-with(@content-desc, "Image caption")]'
+			: '//XCUIElementTypeButton[starts-with(@name, "Image caption.")]';
+		return this.driver.$( captionElement );
+	}
+
+	async getImageBlockCaptionInput( imageBlockCaptionButton ) {
+		const captionInputElement = isAndroid()
+			? '//android.widget.EditText'
+			: '//XCUIElementTypeTextView';
+		return imageBlockCaptionButton.$( captionInputElement );
+	}
+
 	async enterCaptionToSelectedImageBlock( caption, clear = true ) {
-		const imageBlockCaptionField = await this.driver.elementByXPath(
-			'//XCUIElementTypeButton[starts-with(@name, "Image caption.")]'
+		const imageBlockCaptionButton = await this.getImageBlockCaptionButton();
+		await imageBlockCaptionButton.click();
+		const imageBlockCaptionField = await this.getImageBlockCaptionInput(
+			imageBlockCaptionButton
 		);
-		await imageBlockCaptionField.click();
 		await typeString( this.driver, imageBlockCaptionField, caption, clear );
 	}
 
-	async closePicker() {
-		if ( isAndroid() ) {
-			// Wait for media block picker to load before closing
-			const locator =
-				'//android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup';
-			await waitForVisible( this.driver, locator );
+	async closeMediaPicker() {
+		// Wait for media block picker to load before closing
+		const locator = '~WordPress Media Library';
+		await this.driver.$( locator ).waitForDisplayed();
+
+		const { width, height } = await this.driver.getWindowSize();
+		await this.driver
+			.action( 'pointer', {
+				parameters: { pointerType: 'touch' },
+			} )
+			.move( { x: width * 0.5, y: height * 0.1 } )
+			.down( { button: 0 } )
+			.up( { button: 0 } )
+			.perform();
+	}
 
-			await swipeDown( this.driver );
-		} else {
-			await clickIfClickable(
-				this.driver,
-				'//XCUIElementTypeButton[@name="Cancel"]'
-			);
-		}
+	async isImageBlockSelected() {
+		// Since there isn't an easy way to see if a block is selected,
+		// it will check if the edit image button is visible
+		const editImageElement = isAndroid()
+			? '(//android.widget.Button[@content-desc="Edit image"])'
+			: '(//XCUIElementTypeButton[@name="Edit image"])';
+
+		return await this.driver.$( editImageElement ).isDisplayed();
 	}
 
 	// =============================
@@ -672,12 +950,12 @@ class EditorPage {
 	// =============================
 
 	async getSearchBlockTextElement( testID ) {
-		const child = await this.driver.elementByAccessibilityId( testID );
+		const child = await this.driver.$( `~${ testID }` );
 
 		if ( isAndroid() ) {
 			// Get the child EditText element of the ViewGroup returned by
 			// elementByAccessibilityId.
-			return await child.elementByClassName( 'android.widget.EditText' );
+			return await child.$( 'android.widget.EditText' );
 		}
 
 		return child;
@@ -688,8 +966,8 @@ class EditorPage {
 		return await typeString( this.driver, textViewElement, text );
 	}
 
-	async toggleHideSearchLabelSetting( block ) {
-		await this.openBlockSettings( block );
+	async toggleHideSearchLabelSetting() {
+		await this.openBlockSettings();
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther';
 
@@ -700,8 +978,8 @@ class EditorPage {
 		);
 	}
 
-	async changeSearchButtonPositionSetting( block, buttonPosition ) {
-		await this.openBlockSettings( block );
+	async changeSearchButtonPositionSetting( buttonPosition ) {
+		await this.openBlockSettings();
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeButton';
 
@@ -712,8 +990,8 @@ class EditorPage {
 		return await clickIfClickable( this.driver, optionMenuButtonLocator );
 	}
 
-	async toggleSearchIconOnlySetting( block ) {
-		await this.openBlockSettings( block );
+	async toggleSearchIconOnlySetting() {
+		await this.openBlockSettings();
 
 		const elementName = isAndroid() ? '//*' : '//XCUIElementTypeOther';
 
@@ -762,10 +1040,6 @@ class EditorPage {
 		await stopDriver( this.driver );
 	}
 
-	async sauceJobStatus( allPassed ) {
-		await this.driver.sauceJobStatus( allPassed );
-	}
-
 	// =========================
 	// Shortcode Block functions
 	// =========================
@@ -783,11 +1057,54 @@ class EditorPage {
 		}
 
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[@content-desc="Shortcode Block. Row ${ position }"]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
+			? `//android.widget.Button[@content-desc="Shortcode Block. Row ${ position }"]//android.widget.EditText`
 			: `//XCUIElementTypeButton[contains(@name, "Shortcode Block. Row ${ position }")]//XCUIElementTypeTextView`;
 
 		return await waitForVisible( this.driver, blockLocator );
 	}
+
+	// =========================
+	// Button Block functions
+	// =========================
+
+	async getButtonBlockTextInputAtPosition( position = 1 ) {
+		const blockLocator = isAndroid()
+			? `//android.widget.Button[@content-desc="Button Block. Row ${ position }"]//android.widget.EditText`
+			: `//XCUIElementTypeButton[contains(@name, "Button Block. Row ${ position }")]//XCUIElementTypeTextView`;
+
+		return await this.waitForElementToBeDisplayedByXPath( blockLocator );
+	}
+
+	async addButtonWithInlineAppender( position = 1 ) {
+		const appenderButton = isAndroid()
+			? await this.waitForElementToBeDisplayedByXPath(
+					`//android.widget.Button[@content-desc="Buttons Block. Row 1"]/android.view.ViewGroup/android.view.ViewGroup[1]/android.widget.Button[${ position }]`
+			  )
+			: await this.waitForElementToBeDisplayedById( 'appender-button' );
+		await appenderButton.click();
+	}
+
+	async waitForElementToBeDisplayedById( id, timeout = 2000 ) {
+		const element = await this.driver.$( `~${ id }` );
+
+		if ( element ) {
+			return element;
+		}
+
+		await element.waitForDisplayed( { timeout } );
+		return element;
+	}
+
+	async waitForElementToBeDisplayedByXPath( id, timeout = 2000 ) {
+		const element = await this.driver.$( `${ id }` );
+
+		if ( element ) {
+			return element;
+		}
+
+		await element.waitForDisplayed( { timeout } );
+		return element;
+	}
 }
 
 const blockNames = {
@@ -801,13 +1118,22 @@ const blockNames = {
 	image: 'Image',
 	latestPosts: 'Latest Posts',
 	list: 'List',
+	listItem: 'List item',
 	more: 'More',
 	paragraph: 'Paragraph',
 	search: 'Search',
 	separator: 'Separator',
+	socialIcons: 'Social Icons',
 	spacer: 'Spacer',
 	verse: 'Verse',
 	shortcode: 'Shortcode',
+	group: 'Group',
+	buttons: 'Buttons',
+	button: 'Button',
+	preformatted: 'Preformatted',
+	unsupported: 'Unsupported',
+	mediaText: 'Media & Text',
+	quote: 'Quote',
 };
 
-module.exports = { initializeEditorPage, blockNames };
+module.exports = { setupEditor, blockNames };
diff --git a/packages/react-native-editor/android/.java-version b/packages/react-native-editor/android/.java-version
new file mode 100644
index 00000000000000..03b6389f32ad57
--- /dev/null
+++ b/packages/react-native-editor/android/.java-version
@@ -0,0 +1 @@
+17.0
diff --git a/packages/react-native-editor/android/app/BUCK b/packages/react-native-editor/android/app/BUCK
deleted file mode 100644
index bd517c4b3f0328..00000000000000
--- a/packages/react-native-editor/android/app/BUCK
+++ /dev/null
@@ -1,55 +0,0 @@
-# To learn about Buck see [Docs](https://buckbuild.com/).
-# To run your application with Buck:
-# - install Buck
-# - `npm start` - to start the packager
-# - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
-# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
-# - `buck install -r android/app` - compile, install and run application
-#
-
-load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
-
-lib_deps = []
-
-create_aar_targets(glob(["libs/*.aar"]))
-
-create_jar_targets(glob(["libs/*.jar"]))
-
-android_library(
-    name = "all-libs",
-    exported_deps = lib_deps,
-)
-
-android_library(
-    name = "app-code",
-    srcs = glob([
-        "src/main/java/**/*.java",
-    ]),
-    deps = [
-        ":all-libs",
-        ":build_config",
-        ":res",
-    ],
-)
-
-android_build_config(
-    name = "build_config",
-    package = "com.gutenberg",
-)
-
-android_resource(
-    name = "res",
-    package = "com.gutenberg",
-    res = "src/main/res",
-)
-
-android_binary(
-    name = "app",
-    keystore = "//android/keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    package_type = "debug",
-    deps = [
-        ":app-code",
-    ],
-)
diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle
index e4b5d092724e26..09da2a438eae1d 100644
--- a/packages/react-native-editor/android/app/build.gradle
+++ b/packages/react-native-editor/android/app/build.gradle
@@ -1,127 +1,72 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
 apply from: "../../../react-native-bridge/android/extractPackageVersion.gradle"
 
-import com.android.build.OutputFile
-
-/**
- * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
- * and bundleReleaseJsAndAssets).
- * These basically call `react-native bundle` with the correct arguments during the Android build
- * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
- * bundle directly from the development server. Below you can see all the possible configurations
- * and their defaults. If you decide to add a configuration block, make sure to add it before the
- * `apply from: "../../node_modules/react-native/react.gradle"` line.
- *
- * project.ext.react = [
- *   // the name of the generated asset file containing your JS bundle
- *   bundleAssetName: "index.android.bundle",
- *
- *   // the entry file for bundle generation. If none specified and
- *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
- *   // default. Can be overridden with ENTRY_FILE environment variable.
- *   entryFile: "index.android.js",
- *
- *   // https://reactnative.dev/docs/performance#enable-the-ram-format
- *   bundleCommand: "ram-bundle",
- *
- *   // whether to bundle JS and assets in debug mode
- *   bundleInDebug: false,
- *
- *   // whether to bundle JS and assets in release mode
- *   bundleInRelease: true,
- *
- *   // whether to bundle JS and assets in another build variant (if configured).
- *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
- *   // The configuration property can be in the following formats
- *   //         'bundleIn${productFlavor}${buildType}'
- *   //         'bundleIn${buildType}'
- *   // bundleInFreeDebug: true,
- *   // bundleInPaidRelease: true,
- *   // bundleInBeta: true,
- *
- *   // whether to disable dev mode in custom build variants (by default only disabled in release)
- *   // for example: to disable dev mode in the staging build type (if configured)
- *   devDisabledInStaging: true,
- *   // The configuration property can be in the following formats
- *   //         'devDisabledIn${productFlavor}${buildType}'
- *   //         'devDisabledIn${buildType}'
- *
- *   // the root of your project, i.e. where "package.json" lives
- *   root: "../../",
- *
- *   // where to put the JS bundle asset in debug mode
- *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
- *
- *   // where to put the JS bundle asset in release mode
- *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in debug mode
- *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
- *
- *   // where to put drawable resources / React Native assets, e.g. the ones you use via
- *   // require('./image.png')), in release mode
- *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
- *
- *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
- *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
- *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
- *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
- *   // for example, you might want to remove it from here.
- *   inputExcludes: ["android/**", "ios/**"],
- *
- *   // override which node gets called and with what additional arguments
- *   nodeExecutableAndArgs: ["node"],
- *
- *   // supply additional arguments to the packager
- *   extraPackagerArgs: []
- * ]
- */
-
-project.ext.react = [
-    enableHermes: true,  // clean and rebuild if changing
-    cliPath: "../../../../node_modules/.bin/react-native",
-]
-
-apply from: "../../../../node_modules/react-native/react.gradle"
-
-/**
- * Set this to true to create two separate APKs instead of one:
- *   - An APK that only works on ARM devices
- *   - An APK that only works on x86 devices
- * The advantage is the size of the APK is reduced by about 4MB.
- * Upload all the APKs to the Play Store and people will download
- * the correct one based on the CPU architecture of their device.
- */
-def enableSeparateBuildPerCPUArchitecture = false
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    root = file("../../../../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../../../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+    // cliFile = file("../node_modules/react-native/cli.js")
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+}
 
 /**
- * Run Proguard to shrink the Java bytecode in release builds.
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
 def enableProguardInReleaseBuilds = false
 
-/**
- * Whether to enable the Hermes VM.
- *
- * This should be set on project.ext.react and mirrored here.  If it is not set
- * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
- * and the benefits of using Hermes will therefore be sharply reduced.
- */
-def enableHermes = project.ext.react.get("enableHermes", false);
-
-/**
- * Architectures to build native code for in debug.
- */
-def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures")
-
 android {
+    // IMPORTANT: Any updates to the namespace should be reflected in
+    // the `package` attribute of the main `AndroidManifest.xml` file.
+    // File reference: `react-native-editor/android/app/src/main/AndroidManifest.xml`
+    namespace "com.gutenberg"
     ndkVersion rootProject.ext.ndkVersion
 
+    buildToolsVersion rootProject.ext.buildToolsVersion
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    buildFeatures {
+        buildConfig true
     }
 
     defaultConfig {
@@ -130,39 +75,14 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
-        ndk {
-            abiFilters "armeabi", "armeabi-v7a", "arm64-v8a", "x86", "mips"
-
-        }
-    }
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
-        }
     }
+
     buildTypes {
         release {
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
     }
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
-            }
-        }
-    }
 
     packagingOptions {
         pickFirst 'META-INF/-no-jdk.kotlin_module'
@@ -172,33 +92,35 @@ android {
 dependencies {
     def packageJson = '../../package.json'
 
-    implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", {
-        exclude group: 'org.wordpress', module: 'utils'
-    })
+    implementation "org.wordpress.gutenberg-mobile:react-native-bridge"
     implementation 'androidx.appcompat:appcompat:1.2.0'
-    //noinspection GradleDynamicVersion
-    implementation "com.facebook.react:react-native:${extractPackageVersion(packageJson, 'react-native', 'dependencies')}" // From node_modules
+    implementation "com.google.android.material:material:1.9.0"
+    implementation "androidx.core:core-ktx:1.10.0"
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation "com.facebook.react:react-android"
+    implementation("com.facebook.react:flipper-integration")
 
-    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
-
-    implementation "org.wordpress-mobile:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-slider:${extractPackageVersion(packageJson, '@react-native-community/slider', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-masked-view:${extractPackageVersion(packageJson, '@react-native-masked-view/masked-view', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-screens:${extractPackageVersion(packageJson, 'react-native-screens', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-reanimated:${extractPackageVersion(packageJson, 'react-native-reanimated', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-prompt-android:${extractPackageVersion(packageJson, 'react-native-prompt-android', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-webview:${extractPackageVersion(packageJson, 'react-native-webview', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-clipboard:${extractPackageVersion(packageJson, '@react-native-clipboard/clipboard', 'dependencies')}"
-    implementation "org.wordpress-mobile:react-native-fast-image:${extractPackageVersion(packageJson, 'react-native-fast-image', 'dependencies')}"
-    
-    implementation("com.github.wordpress-mobile:react-native-gesture-handler:${extractPackageVersion(packageJson, 'react-native-gesture-handler', 'dependencies')}", {
-        // Remove Reanimated transitive dependency as it's already defined here
-        exclude group: 'com.github.wordpress-mobile', module: 'react-native-reanimated'
-    })
+
+    // Published by `wordpress-mobile/react-native-libraries-publisher`
+    // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`
+    def reactNativeLibrariesPublisherVersion = "v6"
+    def reactNativeLibrariesGroupId = "org.wordpress.react-native-libraries.$reactNativeLibrariesPublisherVersion"
+    implementation "$reactNativeLibrariesGroupId:react-native-get-random-values:${extractPackageVersion(packageJson, 'react-native-get-random-values', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-safe-area-context:${extractPackageVersion(packageJson, 'react-native-safe-area-context', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-screens:${extractPackageVersion(packageJson, 'react-native-screens', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-webview:${extractPackageVersion(packageJson, 'react-native-webview', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-masked-view:${extractPackageVersion(packageJson, '@react-native-masked-view/masked-view', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-clipboard:${extractPackageVersion(packageJson, '@react-native-clipboard/clipboard', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-fast-image:${extractPackageVersion(packageJson, 'react-native-fast-image', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-reanimated:${extractPackageVersion(packageJson, 'react-native-reanimated', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-gesture-handler:${extractPackageVersion(packageJson, 'react-native-gesture-handler', 'dependencies')}"
+    implementation "$reactNativeLibrariesGroupId:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}"
+
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation "com.facebook.react:hermes-android"
 }
 
 // Run this once to be able to run the application with BUCK
@@ -207,3 +129,5 @@ task copyDownloadableDepsToLibs(type: Copy) {
     from configurations.implementation
     into 'libs'
 }
+
+apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/build_defs.bzl b/packages/react-native-editor/android/app/build_defs.bzl
deleted file mode 100644
index fff270f8d1d484..00000000000000
--- a/packages/react-native-editor/android/app/build_defs.bzl
+++ /dev/null
@@ -1,19 +0,0 @@
-"""Helper definitions to glob .aar and .jar targets"""
-
-def create_aar_targets(aarfiles):
-    for aarfile in aarfiles:
-        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
-        lib_deps.append(":" + name)
-        android_prebuilt_aar(
-            name = name,
-            aar = aarfile,
-        )
-
-def create_jar_targets(jarfiles):
-    for jarfile in jarfiles:
-        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
-        lib_deps.append(":" + name)
-        prebuilt_jar(
-            name = name,
-            binary_jar = jarfile,
-        )
diff --git a/packages/react-native-editor/android/app/src/debug/AndroidManifest.xml b/packages/react-native-editor/android/app/src/debug/AndroidManifest.xml
index 179354e4c747ae..62d7d130c6b317 100644
--- a/packages/react-native-editor/android/app/src/debug/AndroidManifest.xml
+++ b/packages/react-native-editor/android/app/src/debug/AndroidManifest.xml
@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
+
     <application
-        android:networkSecurityConfig="@xml/react_native_config"
+        android:usesCleartextTraffic="true"
         tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning">
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
+        tools:ignore="GoogleAppIndexingWarning"/>
 </manifest>
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/AndroidManifest.xml b/packages/react-native-editor/android/app/src/main/AndroidManifest.xml
index 7323be781e80a9..8a25e1ad47d1ff 100644
--- a/packages/react-native-editor/android/app/src/main/AndroidManifest.xml
+++ b/packages/react-native-editor/android/app/src/main/AndroidManifest.xml
@@ -1,7 +1,9 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.gutenberg"
-    android:versionCode="1"
-    android:versionName="1.0">
+<!--
+    IMPORTANT: Any updates to the package name should be reflected in
+    the `namespace` property of the `build.gradle` file.
+    File reference: `react-native-editor/android/app/build.gradle`
+-->
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.gutenberg">
 
     <uses-permission android:name="android.permission.INTERNET" />
 
@@ -15,7 +17,7 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize"
         android:exported="true">
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
deleted file mode 100644
index 447f2d35ee4ded..00000000000000
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
+++ /dev/null
@@ -1,62 +0,0 @@
-package com.gutenberg;
-
-import android.os.Bundle;
-
-import androidx.annotation.Nullable;
-
-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactActivityDelegate;
-import com.facebook.react.ReactRootView;
-import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
-
-import org.wordpress.mobile.WPAndroidGlue.GutenbergProps;
-
-import java.util.Locale;
-
-public class MainActivity extends ReactActivity {
-
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "gutenberg";
-    }
-
-    @Override
-    protected ReactActivityDelegate createReactActivityDelegate() {
-        return new ReactActivityDelegate(this, getMainComponentName()) {
-            @Override
-            protected ReactRootView createRootView() {
-                return new RNGestureHandlerEnabledRootView(MainActivity.this);
-            }
-
-            @Nullable
-            @Override
-            protected Bundle getLaunchOptions() {
-                Bundle bundle = new Bundle();
-
-                // Add locale
-                String languageString = Locale.getDefault().toString();
-                String localeSlug = languageString.replace("_", "-").toLowerCase(Locale.ENGLISH);
-                bundle.putString(GutenbergProps.PROP_LOCALE, localeSlug);
-
-                // Add capabilities
-                Bundle capabilities = new Bundle();
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_MENTIONS, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_XPOSTS, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_REUSABLE_BLOCK, false);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_TILED_GALLERY_BLOCK, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_FACEBOOK_EMBED_BLOCK, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_LOOM_EMBED_BLOCK, true);
-                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK, true);
-                bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities);
-                return bundle;
-            }
-        };
-    }
-}
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.kt b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.kt
new file mode 100644
index 00000000000000..142122ed6a7e06
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.kt
@@ -0,0 +1,208 @@
+package com.gutenberg
+
+import android.os.Bundle
+import android.util.Log
+import android.view.Menu
+import android.view.MenuItem
+import android.view.View
+import android.view.ViewGroup
+import android.widget.LinearLayout
+import androidx.appcompat.widget.Toolbar
+import androidx.core.content.ContextCompat
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactRootView
+import org.json.JSONException
+import org.json.JSONObject
+import org.wordpress.mobile.WPAndroidGlue.GutenbergProps
+import java.util.Locale
+
+class MainActivity : ReactActivity() {
+    private var mReactRootView: ReactRootView? = null
+    private var mMenu: Menu? = null
+    private fun openReactNativeDebugMenu() {
+        val devSettingsModule = reactInstanceManager
+        devSettingsModule?.showDevOptionsDialog()
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu): Boolean {
+        mMenu = menu
+        menuInflater.inflate(R.menu.toolbar_menu, menu)
+
+        // Set opacity for menu items
+        val undoItem = menu.findItem(R.id.menuUndo)
+        undoItem.icon!!.alpha = 76
+        undoItem.setEnabled(false)
+        val redoItem = menu.findItem(R.id.menuRedo)
+        redoItem.icon!!.alpha = 76
+        redoItem.setEnabled(false)
+        return true
+    }
+
+    fun updateUndoItem(isDisabled: Boolean) {
+        if (mMenu != null) {
+            runOnUiThread {
+                val undoItem = mMenu!!.findItem(R.id.menuUndo)
+                undoItem.setEnabled(!isDisabled)
+                undoItem.icon!!.alpha = if (!isDisabled) 255 else 76
+            }
+        }
+    }
+
+    fun updateRedoItem(isDisabled: Boolean) {
+        if (mMenu != null) {
+            runOnUiThread {
+                val redoItem = mMenu!!.findItem(R.id.menuRedo)
+                redoItem.setEnabled(!isDisabled)
+                redoItem.icon!!.alpha = if (!isDisabled) 255 else 76
+            }
+        }
+    }
+
+    override fun onOptionsItemSelected(item: MenuItem): Boolean {
+        val mainApplication = application as MainApplication
+        val itemId = item.itemId
+        if (itemId == R.id.menuUndo) {
+            mainApplication.toggleUndo()
+            return true
+        }
+        if (itemId == R.id.menuRedo) {
+            mainApplication.toggleRedo()
+            return true
+        }
+        if (itemId == R.id.menuButton) {
+            openReactNativeDebugMenu()
+            return true
+        }
+        return super.onOptionsItemSelected(item)
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        instance = this
+
+        // Create a LinearLayout that will hold both the toolbar and React Native content
+        val linearLayout = LinearLayout(this)
+        linearLayout.orientation = LinearLayout.VERTICAL
+        linearLayout.layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+        linearLayout.isFocusable = false
+        linearLayout.isFocusableInTouchMode = true
+
+        // Create a Toolbar instance
+        val toolbar = Toolbar(this)
+
+        // Set toolbar properties (you can customize this as you want)
+        toolbar.layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+
+        // Set the toolbar as the Activity's action bar
+        setSupportActionBar(toolbar)
+
+        // Add the toolbar to the linear layout
+        linearLayout.addView(toolbar)
+
+        // Create a View to be used as the border
+        val borderView = View(this)
+        borderView.layoutParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1)
+        borderView.setBackgroundColor(ContextCompat.getColor(this, R.color.toolbarBorder))
+
+        // Add the border view to the linear layout
+        linearLayout.addView(borderView)
+
+        // Create a ReactRootView and assign it to mReactRootView
+        mReactRootView = ReactRootView(this)
+        val reactViewParams = LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0, 1f)
+        mReactRootView!!.layoutParams = reactViewParams
+
+        // Add ReactView to the linear layout
+        linearLayout.addView(mReactRootView)
+
+        // Set the linear layout as the content view
+        setContentView(linearLayout)
+
+        // Load the React application
+        mReactRootView!!.startReactApplication(
+                (application as MainApplication).reactNativeHost.reactInstanceManager,
+                mainComponentName,
+                appOptions
+        )
+    }
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    override fun getMainComponentName(): String {
+        return "gutenberg"
+    }
+
+    private val appOptions: Bundle
+        get() {
+            val bundle = Bundle()
+
+            // Parse initial props from launch arguments
+            var initialTitle: String? = null
+            var initialData: String? = null
+            var rawStyles: String? = null
+            var rawFeatures: String? = null
+            val extrasBundle = intent.extras
+            if (extrasBundle != null) {
+                val initialProps = extrasBundle.getString(EXTRAS_INITIAL_PROPS, "{}")
+                try {
+                    val jsonObject = JSONObject(initialProps)
+                    if (jsonObject.has(GutenbergProps.PROP_INITIAL_TITLE)) {
+                        initialTitle = jsonObject.getString(GutenbergProps.PROP_INITIAL_TITLE)
+                    }
+                    if (jsonObject.has(GutenbergProps.PROP_INITIAL_DATA)) {
+                        initialData = jsonObject.getString(GutenbergProps.PROP_INITIAL_DATA)
+                    }
+                    if (jsonObject.has(GutenbergProps.PROP_STYLES)) {
+                        rawStyles = jsonObject.getString(GutenbergProps.PROP_STYLES)
+                    }
+                    if (jsonObject.has(GutenbergProps.PROP_FEATURES)) {
+                        rawFeatures = jsonObject.getString(GutenbergProps.PROP_FEATURES)
+                    }
+                } catch (e: JSONException) {
+                    Log.e("MainActivity", "Json parsing error: " + e.message)
+                }
+            }
+
+            // Add locale
+            val languageString = Locale.getDefault().toString()
+            val localeSlug = languageString.replace("_", "-").lowercase()
+            bundle.putString(GutenbergProps.PROP_LOCALE, localeSlug)
+
+            // Add capabilities
+            val capabilities = Bundle()
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_MENTIONS, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_XPOSTS, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_REUSABLE_BLOCK, false)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_IS_AUDIO_BLOCK_MEDIA_UPLOAD_ENABLED, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_TILED_GALLERY_BLOCK, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_VIDEOPRESS_BLOCK, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_VIDEOPRESS_V5_SUPPORT, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_FACEBOOK_EMBED_BLOCK, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_INSTAGRAM_EMBED_BLOCK, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_LOOM_EMBED_BLOCK, true)
+            capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_SMARTFRAME_EMBED_BLOCK, true)
+            bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities)
+            if (initialTitle != null) {
+                bundle.putString(GutenbergProps.PROP_INITIAL_TITLE, initialTitle)
+            }
+            if (initialData != null) {
+                bundle.putString(GutenbergProps.PROP_INITIAL_DATA, initialData)
+            }
+            if (rawStyles != null) {
+                bundle.putString(GutenbergProps.PROP_STYLES, rawStyles)
+            }
+            if (rawFeatures != null) {
+                bundle.putString(GutenbergProps.PROP_FEATURES, rawFeatures)
+            }
+            return bundle
+        }
+
+    companion object {
+        var instance: MainActivity? = null
+            private set
+        private const val EXTRAS_INITIAL_PROPS = "initialProps"
+    }
+}
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
deleted file mode 100644
index fdcc5762139255..00000000000000
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
+++ /dev/null
@@ -1,383 +0,0 @@
-package com.gutenberg;
-
-import static org.wordpress.mobile.WPAndroidGlue.Media.createRNMediaUsingMimeType;
-
-import android.app.Application;
-import android.content.Intent;
-import android.content.res.Configuration;
-import android.os.Bundle;
-import android.util.Log;
-import android.widget.Toast;
-
-import androidx.core.util.Consumer;
-
-import com.facebook.react.ReactApplication;
-import com.BV.LinearGradient.LinearGradientPackage;
-import com.facebook.react.bridge.Arguments;
-import com.facebook.react.bridge.JSIModulePackage;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableMap;
-import com.reactnativecommunity.clipboard.ClipboardPackage;
-import com.reactnativecommunity.slider.ReactSliderPackage;
-import com.brentvatne.react.ReactVideoPackage;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.devsupport.interfaces.DevOptionHandler;
-import com.facebook.react.devsupport.interfaces.DevSupportManager;
-import com.horcrux.svg.SvgPackage;
-import org.linusu.RNGetRandomValuesPackage;
-import com.dylanvann.fastimage.FastImageViewPackage;
-
-import org.wordpress.mobile.ReactNativeAztec.ReactAztecPackage;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeInterface;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergWebViewActivity;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.RNMedia;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgePackage;
-import org.wordpress.mobile.WPAndroidGlue.Media;
-
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-import com.facebook.soloader.SoLoader;
-import com.reactnativecommunity.webview.RNCWebViewPackage;
-import com.swmansion.gesturehandler.RNGestureHandlerPackage;
-import com.swmansion.reanimated.ReanimatedJSIModulePackage;
-import com.swmansion.reanimated.ReanimatedPackage;
-import com.swmansion.rnscreens.RNScreensPackage;
-import com.th3rdwave.safeareacontext.SafeAreaContextPackage;
-import org.reactnative.maskedview.RNCMaskedViewPackage;
-import org.wordpress.mobile.WPAndroidGlue.MediaOption;
-
-import java.util.Arrays;
-import java.util.List;
-import java.util.ArrayList;
-
-import im.shimo.react.prompt.RNPromptPackage;
-
-public class MainApplication extends Application implements ReactApplication, GutenbergBridgeInterface {
-
-    private static final String TAG = "MainApplication";
-
-    private ReactNativeHost mReactNativeHost;
-    private RNReactNativeGutenbergBridgePackage mRnReactNativeGutenbergBridgePackage;
-    private GutenbergBridgeJS2Parent.ReplaceUnsupportedBlockCallback mReplaceUnsupportedBlockCallback;
-
-    private ReactNativeHost createReactNativeHost() {
-        mRnReactNativeGutenbergBridgePackage = new RNReactNativeGutenbergBridgePackage(new GutenbergBridgeJS2Parent() {
-            @Override
-            public void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo) {
-            }
-
-            @Override
-            public void requestMediaImport(String url, MediaSelectedCallback mediaSelectedCallback) {
-            }
-
-            @Override
-            public void requestMediaPickerFromDeviceCamera(MediaSelectedCallback mediaSelectedCallback, MediaType mediaType) {
-            }
-
-            @Override
-            public void requestMediaPickFromDeviceLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
-            }
-
-            @Override
-            public void requestMediaPickFromMediaLibrary(MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection, MediaType mediaType) {
-                List<RNMedia> rnMediaList = new ArrayList<>();
-
-                switch (mediaType) {
-                    case IMAGE:
-                        rnMediaList.add(createRNMediaUsingMimeType(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground"));
-                        break;
-                    case VIDEO:
-                        rnMediaList.add(createRNMediaUsingMimeType(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", ""));
-                        break;
-                    case ANY:
-                    case OTHER:
-                        rnMediaList.add(createRNMediaUsingMimeType(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip"));
-                        break;
-                    case AUDIO:
-                        rnMediaList.add(createRNMediaUsingMimeType(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", ""));
-                        break;
-                }
-                mediaSelectedCallback.onMediaFileSelected(rnMediaList);
-            }
-
-
-            @Override
-            public void mediaUploadSync(MediaSelectedCallback mediaSelectedCallback) {
-            }
-
-            @Override
-            public void mediaSaveSync(MediaSelectedCallback mediaSelectedCallback) {
-            }
-
-            @Override
-            public void requestImageFailedRetryDialog(int mediaId) {
-            }
-
-            @Override
-            public void requestImageUploadCancelDialog(int mediaId) {
-            }
-
-            @Override
-            public void requestImageUploadCancel(int mediaId) {
-            }
-
-            @Override
-            public void setFeaturedImage(int mediaId) {
-            }
-
-            @Override
-            public void editorDidMount(ReadableArray unsupportedBlockNames) {
-            }
-
-            @Override
-            public void editorDidAutosave() {
-            }
-
-            @Override
-            public void getOtherMediaPickerOptions(OtherMediaOptionsReceivedCallback otherMediaOptionsReceivedCallback, MediaType mediaType) {
-                if (mediaType == MediaType.ANY) {
-                    ArrayList<MediaOption> mediaOptions = new ArrayList<>();
-                    mediaOptions.add(new MediaOption("1", "Choose from device"));
-                    otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(mediaOptions);
-                }
-            }
-
-            @Override
-            public void requestMediaPickFrom(String mediaSource, MediaSelectedCallback mediaSelectedCallback, Boolean allowMultipleSelection) {
-                if (mediaSource.equals("1")) {
-                    List<RNMedia> rnMediaList = new ArrayList<>();
-                    rnMediaList.add(createRNMediaUsingMimeType(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "","cvsamples.pdf"));
-                    mediaSelectedCallback.onMediaFileSelected(rnMediaList);
-                }
-            }
-
-            @Override
-            public void requestImageFullscreenPreview(String mediaUrl) {
-
-            }
-
-            @Override
-            public void requestMediaEditor(MediaSelectedCallback mediaSelectedCallback, String mediaUrl) {
-
-            }
-
-            @Override
-            public void setFocalPointPickerTooltipShown(boolean tooltipShown) {
-            }
-
-            @Override
-            public void requestFocalPointPickerTooltipShown(FocalPointPickerTooltipShownCallback focalPointPickerTooltipShownCallback) {
-                focalPointPickerTooltipShownCallback.onRequestFocalPointPickerTooltipShown(false);
-            }
-
-            @Override
-            public void editorDidEmitLog(String message, LogLevel logLevel) {
-                switch (logLevel) {
-                    case TRACE:
-                        Log.d(TAG, message);
-                        break;
-                    case INFO:
-                        Log.i(TAG, message);
-                        break;
-                    case WARN:
-                        Log.w(TAG, message);
-                        break;
-                    case ERROR:
-                        Log.e(TAG, message);
-                        break;
-                }
-            }
-
-            @Override
-            public void performRequest(String path, boolean enableCaching, Consumer<String> onSuccess, Consumer<Bundle> onError) {}
-
-            @Override
-            public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback replaceUnsupportedBlockCallback,
-                                                                    String content,
-                                                                    String blockId,
-                                                                    String blockName,
-                                                                    String blockTitle) {
-                mReplaceUnsupportedBlockCallback = replaceUnsupportedBlockCallback;
-                openGutenbergWebView(content, blockId, blockTitle);
-            }
-
-            @Override
-            public void onShowUserSuggestions(Consumer<String> onResult) {
-                onResult.accept("matt");
-            }
-
-            @Override
-            public void onShowXpostSuggestions(Consumer<String> onResult) {
-                onResult.accept("ma.tt");
-            }
-
-            @Override
-            public void requestMediaFilesEditorLoad(
-                    ReadableArray mediaFiles,
-                    String blockId
-            ) {
-                Toast.makeText(MainApplication.this, "requestMediaFilesEditorLoad called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void requestMediaFilesFailedRetryDialog(ReadableArray mediaFiles) {
-                Toast.makeText(MainApplication.this, "requestMediaFilesFailedRetryDialog called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void requestMediaFilesUploadCancelDialog(ReadableArray mediaFiles) {
-                Toast.makeText(MainApplication.this, "requestMediaFilesUploadCancelDialog called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
-                Toast.makeText(MainApplication.this, "requestMediaFilesSaveCancelDialog called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void mediaFilesBlockReplaceSync(
-                    ReadableArray mediaFiles,
-                    String blockId
-            ) {
-                Toast.makeText(MainApplication.this, "mediaFilesBlockReplaceSync called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void gutenbergDidSendButtonPressedAction(String buttonType) {
-
-            }
-
-            @Override
-            public void requestPreview() {
-                Toast.makeText(MainApplication.this, "requestPreview called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void requestBlockTypeImpressions(BlockTypeImpressionsCallback blockTypeImpressionsCallback) {
-                ReadableMap impressions = Arguments.createMap();
-                blockTypeImpressionsCallback.onRequestBlockTypeImpressions(impressions);
-            }
-
-            @Override
-            public void setBlockTypeImpressions(ReadableMap impressions) {
-                Log.d("BlockTypeImpressions", String.format("Gutenberg requested setting block type impression to %s.", impressions));
-            }
-
-            @Override
-            public void requestContactCustomerSupport() {
-                Toast.makeText(MainApplication.this, "requestContactCustomerSupport called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void requestGotoCustomerSupportOptions() {
-                Toast.makeText(MainApplication.this, "requestGotoCustomerSupportOptions called", Toast.LENGTH_SHORT).show();
-            }
-
-            @Override
-            public void sendEventToHost(final String eventName, final ReadableMap properties) {
-                Log.d("SendEventToHost", String.format("Gutenberg requested sending '%s' event to host with properties: %s", eventName, properties));
-            }
-        }, isDarkMode());
-
-        return new ReactNativeHost(this) {
-            @Override
-            public boolean getUseDeveloperSupport() {
-                return BuildConfig.DEBUG;
-            }
-
-            @Override
-            protected List<ReactPackage> getPackages() {
-                return Arrays.asList(
-                        new MainReactPackage(),
-                        new ReactSliderPackage(),
-                        new ReactVideoPackage(),
-                        new SvgPackage(),
-                        // passing null because we do not need log handlers in the demo app
-                        new ReactAztecPackage(null, null),
-                        new LinearGradientPackage(),
-                        new RNGetRandomValuesPackage(),
-                        new RNCMaskedViewPackage(),
-                        new RNGestureHandlerPackage(),
-                        new ReanimatedPackage(),
-                        new SafeAreaContextPackage(),
-                        new RNScreensPackage(),
-                        new RNPromptPackage(),
-                        new RNCWebViewPackage(),
-                        new ClipboardPackage(),
-                        new FastImageViewPackage(),
-                        mRnReactNativeGutenbergBridgePackage);
-            }
-
-            @Override
-            protected String getJSMainModuleName() {
-                return "index";
-            }
-
-            @Override
-            protected JSIModulePackage getJSIModulePackage() {
-                return new ReanimatedJSIModulePackage();
-            }
-        };
-    }
-
-    private boolean isDarkMode() {
-        Configuration configuration = getResources().getConfiguration();
-        int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
-
-        return currentNightMode == Configuration.UI_MODE_NIGHT_YES;
-    }
-
-    private void openGutenbergWebView(String content,
-                                      String blockId,
-                                      String blockName) {
-        Intent intent = new Intent(this, GutenbergWebViewActivity.class);
-        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_CONTENT, content);
-        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_ID, blockId);
-        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_NAME, blockName);
-        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
-        startActivity(intent);
-    }
-
-    @Override
-    public ReactNativeHost getReactNativeHost() {
-        if (mReactNativeHost == null) {
-            mReactNativeHost = createReactNativeHost();
-            createCustomDevOptions(mReactNativeHost);
-        }
-
-        return mReactNativeHost;
-    }
-
-    @Override
-    public void onCreate() {
-        super.onCreate();
-        SoLoader.init(this, /* native exopackage */ false);
-    }
-
-    private void createCustomDevOptions(ReactNativeHost reactNativeHost) {
-        DevSupportManager devSupportManager = reactNativeHost.getReactInstanceManager().getDevSupportManager();
-
-        devSupportManager.addCustomDevOption("Show html", new DevOptionHandler() {
-            @Override
-            public void onOptionSelected() {
-                mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().toggleEditorMode();
-            }
-        });
-
-        devSupportManager.addCustomDevOption("Help", new DevOptionHandler() {
-            @Override
-            public void onOptionSelected() {
-                mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().showEditorHelp();
-            }
-        });
-    }
-
-    @Override
-    public void saveContent(String content, String blockId) {
-        if (mReplaceUnsupportedBlockCallback != null) {
-            mReplaceUnsupportedBlockCallback.replaceUnsupportedBlock(content, blockId);
-        }
-    }
-}
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.kt b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.kt
new file mode 100644
index 00000000000000..00f6d16b4ca2de
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.kt
@@ -0,0 +1,285 @@
+package com.gutenberg
+
+import android.app.Application
+import android.content.Intent
+import android.content.res.Configuration
+import android.os.Bundle
+import android.util.Log
+import android.widget.Toast
+import androidx.core.util.Consumer
+import com.BV.LinearGradient.LinearGradientPackage
+import com.brentvatne.react.ReactVideoPackage
+import com.dylanvann.fastimage.FastImageViewPackage
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.PackageList
+import com.facebook.react.ReactHost
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.flipper.ReactNativeFlipper
+import com.facebook.soloader.SoLoader
+import com.horcrux.svg.SvgPackage
+import com.reactnativecommunity.clipboard.ClipboardPackage
+import com.reactnativecommunity.slider.ReactSliderPackage
+import com.reactnativecommunity.webview.RNCWebViewPackage
+import com.swmansion.gesturehandler.RNGestureHandlerPackage
+import com.swmansion.reanimated.ReanimatedPackage
+import com.swmansion.rnscreens.RNScreensPackage
+import com.th3rdwave.safeareacontext.SafeAreaContextPackage
+import org.linusu.RNGetRandomValuesPackage
+import org.reactnative.maskedview.RNCMaskedViewPackage
+import org.wordpress.mobile.ReactNativeAztec.ReactAztecPackage
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeInterface
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.BlockTypeImpressionsCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ConnectionStatusCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.FocalPointPickerTooltipShownCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaSelectedCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.OtherMediaOptionsReceivedCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ReplaceUnsupportedBlockCallback
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergWebViewActivity
+import org.wordpress.mobile.ReactNativeGutenbergBridge.RNMedia
+import org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgePackage
+import org.wordpress.mobile.WPAndroidGlue.GutenbergJsException
+import org.wordpress.mobile.WPAndroidGlue.Media
+import org.wordpress.mobile.WPAndroidGlue.MediaOption
+
+class MainApplication : Application(), ReactApplication, GutenbergBridgeInterface {
+    private var mRnReactNativeGutenbergBridgePackage: RNReactNativeGutenbergBridgePackage? = null
+    private var mReplaceUnsupportedBlockCallback: ReplaceUnsupportedBlockCallback? = null
+
+    override val reactNativeHost: ReactNativeHost =
+        object : DefaultReactNativeHost(this) {
+            override fun getPackages(): List<ReactPackage> =
+                PackageList(this).packages.apply {
+                    add(ReactSliderPackage())
+                    add(ReactVideoPackage())
+                    add(SvgPackage()) // passing null because we do not need log handlers in the demo ap)p
+                    add(ReactAztecPackage(null, null))
+                    add(LinearGradientPackage())
+                    add(RNGetRandomValuesPackage())
+                    add(RNCMaskedViewPackage())
+                    add(RNGestureHandlerPackage())
+                    add(ReanimatedPackage())
+                    add(SafeAreaContextPackage())
+                    add(RNScreensPackage())
+                    add(RNCWebViewPackage())
+                    add(ClipboardPackage())
+                    add(FastImageViewPackage())
+                    add(mRnReactNativeGutenbergBridgePackage)
+                }
+
+            override fun getJSMainModuleName(): String {
+                return "index"
+            }
+
+            override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+            override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+            override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+        }
+
+    private fun initializeGutenbergBridge() {
+        mRnReactNativeGutenbergBridgePackage = RNReactNativeGutenbergBridgePackage(object : GutenbergBridgeJS2Parent {
+            override fun responseHtml(title: String, html: String, changed: Boolean, contentInfo: ReadableMap) {}
+            override fun requestMediaImport(url: String, mediaSelectedCallback: MediaSelectedCallback) {}
+            override fun requestMediaPickerFromDeviceCamera(mediaSelectedCallback: MediaSelectedCallback, mediaType: GutenbergBridgeJS2Parent.MediaType) {}
+            override fun requestMediaPickFromDeviceLibrary(mediaSelectedCallback: MediaSelectedCallback, allowMultipleSelection: Boolean, mediaType: GutenbergBridgeJS2Parent.MediaType) {}
+            override fun requestMediaPickFromMediaLibrary(mediaSelectedCallback: MediaSelectedCallback, allowMultipleSelection: Boolean, mediaType: GutenbergBridgeJS2Parent.MediaType) {
+                val rnMediaList: MutableList<RNMedia> = ArrayList()
+                val emptyMetadata = WritableNativeMap()
+                when (mediaType) {
+                    GutenbergBridgeJS2Parent.MediaType.IMAGE -> {
+                        val image = Media(1, "https://cldup.com/cXyG__fTLN.jpg", "image", "Mountain", "", "A snow-capped mountain top in a cloudy sky with red-leafed trees in the foreground", emptyMetadata)
+                        rnMediaList.add(image)
+                    }
+
+                    GutenbergBridgeJS2Parent.MediaType.VIDEO -> {
+                        val metadata = WritableNativeMap()
+                        metadata.putString("extraID", "AbCdE")
+                        val video = Media(2, "https://i.cloudup.com/YtZFJbuQCE.mov", "video", "Cloudup", "", "", metadata)
+                        rnMediaList.add(video)
+                    }
+
+                    GutenbergBridgeJS2Parent.MediaType.ANY, GutenbergBridgeJS2Parent.MediaType.OTHER -> {
+                        val other = Media(3, "https://wordpress.org/latest.zip", "zip", "WordPress latest version", "WordPress.zip", "", emptyMetadata)
+                        rnMediaList.add(other)
+                    }
+
+                    GutenbergBridgeJS2Parent.MediaType.AUDIO -> {
+                        val audio = Media(5, "https://cldup.com/59IrU0WJtq.mp3", "audio", "Summer presto", "", "", emptyMetadata)
+                        rnMediaList.add(audio)
+                    }
+
+                    else -> {}
+                }
+                mediaSelectedCallback.onMediaFileSelected(rnMediaList)
+            }
+
+            override fun mediaUploadSync(mediaSelectedCallback: MediaSelectedCallback) {}
+            override fun requestImageFailedRetryDialog(mediaId: Int) {}
+            override fun requestImageUploadCancelDialog(mediaId: Int) {}
+            override fun requestImageUploadCancel(mediaId: Int) {}
+            override fun setFeaturedImage(mediaId: Int) {}
+            override fun editorDidMount(unsupportedBlockNames: ReadableArray) {}
+            override fun editorDidAutosave() {}
+            override fun getOtherMediaPickerOptions(otherMediaOptionsReceivedCallback: OtherMediaOptionsReceivedCallback, mediaType: GutenbergBridgeJS2Parent.MediaType) {
+                if (mediaType == GutenbergBridgeJS2Parent.MediaType.ANY) {
+                    val mediaOptions = ArrayList<MediaOption>()
+                    mediaOptions.add(MediaOption("1", "Choose from device"))
+                    otherMediaOptionsReceivedCallback.onOtherMediaOptionsReceived(mediaOptions)
+                }
+            }
+
+            override fun requestMediaPickFrom(mediaSource: String, mediaSelectedCallback: MediaSelectedCallback, allowMultipleSelection: Boolean) {
+                if (mediaSource == "1") {
+                    val rnMediaList: MutableList<RNMedia> = ArrayList()
+                    val pdf = Media(1, "https://grad.illinois.edu/sites/default/files/pdfs/cvsamples.pdf", "other", "", "cvsamples.pdf", "", WritableNativeMap())
+                    rnMediaList.add(pdf)
+                    mediaSelectedCallback.onMediaFileSelected(rnMediaList)
+                }
+            }
+
+            override fun requestImageFullscreenPreview(mediaUrl: String) {}
+            override fun requestEmbedFullscreenPreview(content: String, title: String) {}
+            override fun requestMediaEditor(mediaSelectedCallback: MediaSelectedCallback, mediaUrl: String) {}
+            override fun setFocalPointPickerTooltipShown(tooltipShown: Boolean) {}
+            override fun requestFocalPointPickerTooltipShown(focalPointPickerTooltipShownCallback: FocalPointPickerTooltipShownCallback) {
+                focalPointPickerTooltipShownCallback.onRequestFocalPointPickerTooltipShown(false)
+            }
+
+            override fun editorDidEmitLog(message: String, logLevel: GutenbergBridgeJS2Parent.LogLevel) {
+                when (logLevel) {
+                    GutenbergBridgeJS2Parent.LogLevel.TRACE -> Log.d(TAG, message)
+                    GutenbergBridgeJS2Parent.LogLevel.INFO -> Log.i(TAG, message)
+                    GutenbergBridgeJS2Parent.LogLevel.WARN -> Log.w(TAG, message)
+                    GutenbergBridgeJS2Parent.LogLevel.ERROR -> Log.e(TAG, message)
+                }
+            }
+
+            override fun performGetRequest(path: String, enableCaching: Boolean, onSuccess: Consumer<String>, onError: Consumer<Bundle>) {}
+            override fun performPostRequest(path: String, data: ReadableMap, onSuccess: Consumer<String>, onError: Consumer<Bundle>) {}
+            override fun gutenbergDidRequestUnsupportedBlockFallback(replaceUnsupportedBlockCallback: ReplaceUnsupportedBlockCallback,
+                                                                     content: String,
+                                                                     blockId: String,
+                                                                     blockName: String,
+                                                                     blockTitle: String) {
+                mReplaceUnsupportedBlockCallback = replaceUnsupportedBlockCallback
+                openGutenbergWebView(content, blockId, blockTitle)
+            }
+
+            override fun onShowUserSuggestions(onResult: Consumer<String>) {
+                onResult.accept("matt")
+            }
+
+            override fun onShowXpostSuggestions(onResult: Consumer<String>) {
+                onResult.accept("ma.tt")
+            }
+
+            override fun gutenbergDidSendButtonPressedAction(buttonType: String) {}
+            override fun requestPreview() {
+                Toast.makeText(this@MainApplication, "requestPreview called", Toast.LENGTH_SHORT).show()
+            }
+
+            override fun requestBlockTypeImpressions(blockTypeImpressionsCallback: BlockTypeImpressionsCallback) {
+                val impressions: ReadableMap = Arguments.createMap()
+                blockTypeImpressionsCallback.onRequestBlockTypeImpressions(impressions)
+            }
+
+            override fun setBlockTypeImpressions(impressions: ReadableMap) {
+                Log.d("BlockTypeImpressions", String.format("Gutenberg requested setting block type impression to %s.", impressions))
+            }
+
+            override fun requestContactCustomerSupport() {
+                Toast.makeText(this@MainApplication, "requestContactCustomerSupport called", Toast.LENGTH_SHORT).show()
+            }
+
+            override fun requestGotoCustomerSupportOptions() {
+                Toast.makeText(this@MainApplication, "requestGotoCustomerSupportOptions called", Toast.LENGTH_SHORT).show()
+            }
+
+            override fun sendEventToHost(eventName: String, properties: ReadableMap) {
+                Log.d("SendEventToHost", String.format("Gutenberg requested sending '%s' event to host with properties: %s", eventName, properties))
+            }
+
+            override fun toggleUndoButton(isDisabled: Boolean) {
+                MainActivity.instance?.updateUndoItem(isDisabled)
+            }
+
+            override fun toggleRedoButton(isDisabled: Boolean) {
+                MainActivity.instance?.updateRedoItem(isDisabled)
+            }
+
+            override fun requestConnectionStatus(connectionStatusCallback: ConnectionStatusCallback) {
+                connectionStatusCallback.onRequestConnectionStatus(true)
+            }
+
+            override fun logException(exception: GutenbergJsException, logExceptionCallback: GutenbergBridgeJS2Parent.LogExceptionCallback) {}
+        }, isDarkMode)
+    }
+
+    private val isDarkMode: Boolean
+        get() {
+            val configuration = resources.configuration
+            val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+            return currentNightMode == Configuration.UI_MODE_NIGHT_YES
+        }
+
+    fun toggleUndo() {
+        mRnReactNativeGutenbergBridgePackage!!.rnReactNativeGutenbergBridgeModule.onUndoPressed()
+    }
+
+    fun toggleRedo() {
+        mRnReactNativeGutenbergBridgePackage!!.rnReactNativeGutenbergBridgeModule.onRedoPressed()
+    }
+
+    private fun openGutenbergWebView(content: String,
+                                     blockId: String,
+                                     blockName: String) {
+        val intent = Intent(this, GutenbergWebViewActivity::class.java)
+        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_CONTENT, content)
+        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_ID, blockId)
+        intent.putExtra(GutenbergWebViewActivity.ARG_BLOCK_NAME, blockName)
+        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+        startActivity(intent)
+    }
+
+    override val reactHost: ReactHost
+        get() = DefaultReactHost.getDefaultReactHost(this.applicationContext, reactNativeHost)
+
+    override fun onCreate() {
+        super.onCreate()
+        SoLoader.init(this,  /* native exopackage */false)
+
+        initializeGutenbergBridge()
+
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            // If you opted-in for the New Architecture, we load the native entry point for this app.
+            load()
+        }
+        ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
+        createCustomDevOptions(reactNativeHost)
+    }
+
+    private fun createCustomDevOptions(reactNativeHost: ReactNativeHost?) {
+        val devSupportManager = reactNativeHost!!.reactInstanceManager.devSupportManager
+        devSupportManager.addCustomDevOption("Show html") { mRnReactNativeGutenbergBridgePackage!!.rnReactNativeGutenbergBridgeModule.toggleEditorMode() }
+        devSupportManager.addCustomDevOption("Help") { mRnReactNativeGutenbergBridgePackage!!.rnReactNativeGutenbergBridgeModule.showEditorHelp() }
+    }
+
+    override fun saveContent(content: String, blockId: String) {
+        if (mReplaceUnsupportedBlockCallback != null) {
+            mReplaceUnsupportedBlockCallback!!.replaceUnsupportedBlock(content, blockId)
+        }
+    }
+
+    companion object {
+        private const val TAG = "MainApplication"
+    }
+}
diff --git a/packages/react-native-editor/android/app/src/main/res/drawable/more_vertical.xml b/packages/react-native-editor/android/app/src/main/res/drawable/more_vertical.xml
new file mode 100644
index 00000000000000..0a839eda9c3aff
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/drawable/more_vertical.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13,19H11V17H13V19ZM13,13H11V11H13V13ZM13,7H11V5H13V7Z"
+      android:fillColor="?attr/colorSecondary"/>
+</vector>
diff --git a/packages/react-native-editor/android/app/src/main/res/drawable/redo.xml b/packages/react-native-editor/android/app/src/main/res/drawable/redo.xml
new file mode 100644
index 00000000000000..062f14eb685268
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/drawable/redo.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M15.6,6.5L14.5,7.5L17.4,10.8H8C7.1,10.8 6.3,11.1 5.7,11.7C4.3,13.2 4.3,15.9 4.3,17.3V17.5H5.8V17.2C5.8,16.1 5.8,13.7 6.8,12.7C7.1,12.4 7.5,12.2 8.1,12.2H17.3L14.5,15L15.6,16.1L20.2,11.5L15.6,6.5Z"
+      android:fillColor="?attr/colorSecondary"/>
+</vector>
diff --git a/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml b/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml
new file mode 100644
index 00000000000000..986188ce0e448d
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
+
+    <selector>
+        <!-- 
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/main/res/drawable/undo.xml b/packages/react-native-editor/android/app/src/main/res/drawable/undo.xml
new file mode 100644
index 00000000000000..773dbf271cc886
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/drawable/undo.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.3,11.7C17.7,11.1 16.9,10.8 16,10.8H6.7L9.6,7.5L8.5,6.5L4,11.5L8.5,16L9.5,15L6.8,12.3H16C16.5,12.3 16.9,12.5 17.3,12.8C18.3,13.8 18.3,16.2 18.3,17.3V17.6H19.8V17.4C19.8,15.9 19.8,13.1 18.3,11.7Z"
+      android:fillColor="?attr/colorSecondary"/>
+</vector>
diff --git a/packages/react-native-editor/android/app/src/main/res/menu/toolbar_menu.xml b/packages/react-native-editor/android/app/src/main/res/menu/toolbar_menu.xml
new file mode 100644
index 00000000000000..6cc6c5213392d9
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/menu/toolbar_menu.xml
@@ -0,0 +1,21 @@
+<menu xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <item
+        android:id="@+id/menuUndo"
+        android:icon="@drawable/undo"
+        android:title="@string/undo"
+        app:showAsAction="ifRoom" />
+
+    <item
+        android:id="@+id/menuRedo"
+        android:icon="@drawable/redo"
+        android:title="@string/redo"
+        app:showAsAction="ifRoom" />
+
+    <item
+        android:id="@+id/menuButton"
+        android:icon="@drawable/more_vertical"
+        android:title="@string/more_options"
+        app:showAsAction="ifRoom" />
+</menu>
diff --git a/packages/react-native-editor/android/app/src/main/res/values-night/colors_dark.xml b/packages/react-native-editor/android/app/src/main/res/values-night/colors_dark.xml
new file mode 100644
index 00000000000000..7ae0b9e788f00c
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/values-night/colors_dark.xml
@@ -0,0 +1,6 @@
+<resources>
+    <color name="colorPrimary">#000000</color>
+    <color name="primary_dark">#000000</color>
+    <color name="colorPrimaryVariant">#FFFFFF</color>
+    <color name="toolbarBorder">#60FFFFFF</color>
+</resources>
diff --git a/packages/react-native-editor/android/app/src/main/res/values-night/styles.xml b/packages/react-native-editor/android/app/src/main/res/values-night/styles.xml
new file mode 100644
index 00000000000000..b8af6a19007138
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/values-night/styles.xml
@@ -0,0 +1,20 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/primary_dark</item>
+        <item name="colorOnPrimary">@android:color/white</item>
+        <item name="colorSecondary">@android:color/white</item>
+        <item name="colorOnSecondary">@android:color/white</item>
+        <item name="colorOnBackground">@android:color/black</item>
+        <item name="colorOnSurface">@color/colorPrimary</item>
+        
+        <item name="toolbarStyle">@style/Gutenberg.ToolBar</item>
+        
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:windowLightStatusBar">false</item>
+    </style>
+
+</resources>
diff --git a/packages/react-native-editor/android/app/src/main/res/values/colors.xml b/packages/react-native-editor/android/app/src/main/res/values/colors.xml
new file mode 100644
index 00000000000000..0f702bc1ea645b
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/values/colors.xml
@@ -0,0 +1,6 @@
+<resources>
+    <color name="colorPrimary">#FFFFFF</color>
+    <color name="primary_dark">#FFFFFF</color>
+    <color name="colorPrimaryVariant">#000000</color>
+    <color name="toolbarBorder">#3C3C435C</color>
+</resources>
diff --git a/packages/react-native-editor/android/app/src/main/res/values/strings.xml b/packages/react-native-editor/android/app/src/main/res/values/strings.xml
index 29e2e4d13944c2..df039af86cc8ce 100644
--- a/packages/react-native-editor/android/app/src/main/res/values/strings.xml
+++ b/packages/react-native-editor/android/app/src/main/res/values/strings.xml
@@ -1,3 +1,6 @@
 <resources>
     <string name="app_name">Gutenberg</string>
+    <string name="undo">Undo</string>
+    <string name="redo">Redo</string>
+    <string name="more_options">More options</string>
 </resources>
diff --git a/packages/react-native-editor/android/app/src/main/res/values/styles.xml b/packages/react-native-editor/android/app/src/main/res/values/styles.xml
index 24bc061368750c..1423d4e65c673d 100644
--- a/packages/react-native-editor/android/app/src/main/res/values/styles.xml
+++ b/packages/react-native-editor/android/app/src/main/res/values/styles.xml
@@ -1,8 +1,19 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
         <!-- Customize your theme here. -->
-    </style>
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/primary_dark</item>
+        <item name="colorOnPrimary">@android:color/white</item>
+        <item name="colorSecondary">@android:color/black</item>
+        <item name="colorOnSecondary">@android:color/white</item>
+        <item name="colorOnBackground">@android:color/black</item>
+        <item name="colorOnSurface">@color/colorPrimary</item>
+
+        <item name="toolbarStyle">@style/Gutenberg.ToolBar</item>
 
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+        <item name="android:windowLightStatusBar">true</item>
+    </style>
 </resources>
diff --git a/packages/react-native-editor/android/app/src/main/res/values/styles_toolbar.xml b/packages/react-native-editor/android/app/src/main/res/values/styles_toolbar.xml
new file mode 100644
index 00000000000000..dddd75b88b150d
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/main/res/values/styles_toolbar.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <style name="Gutenberg.ToolBar" parent="Widget.MaterialComponents.Toolbar.Surface">
+        <item name="titleTextColor">?attr/colorOnSurface</item>
+        <item name="android:elevation">0dp</item>
+        <item name="colorControlNormal">?attr/colorOnSurface</item>
+        <item name="android:background">?attr/colorOnSurface</item>
+    </style>
+
+</resources>
\ No newline at end of file
diff --git a/packages/react-native-editor/android/app/src/release/java/com/gutenberg/ReactNativeFlipper.java b/packages/react-native-editor/android/app/src/release/java/com/gutenberg/ReactNativeFlipper.java
new file mode 100644
index 00000000000000..4f93cbce69c158
--- /dev/null
+++ b/packages/react-native-editor/android/app/src/release/java/com/gutenberg/ReactNativeFlipper.java
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.rndiffapp;
+import android.content.Context;
+import com.facebook.react.ReactInstanceManager;
+/**
+ * Class responsible of loading Flipper inside your React Native application. This is the release
+ * flavor of it so it's empty as we don't want to load Flipper.
+ */
+public class ReactNativeFlipper {
+    public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+        // Do nothing as we don't want to initialize Flipper on Release.
+    }
+}
diff --git a/packages/react-native-editor/android/build.gradle b/packages/react-native-editor/android/build.gradle
index 480a6ff66e2492..cadcfa8704b51a 100644
--- a/packages/react-native-editor/android/build.gradle
+++ b/packages/react-native-editor/android/build.gradle
@@ -1,13 +1,14 @@
 buildscript {
     ext {
-        gradlePluginVersion = '7.2.1'
-        kotlinVersion = '1.5.32'
-        buildToolsVersion = "31.0.0"
-        minSdkVersion = 21
-        compileSdkVersion = 31
-        targetSdkVersion = 31
+        gradlePluginVersion = '8.5.1'
+        kotlinVersion = '1.8.0'
+        buildToolsVersion = "34.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 34
+        targetSdkVersion = 34
         supportLibVersion = '28.0.0'
-        ndkVersion = "21.4.7075529"
+
+        ndkVersion = "25.1.8937393"
     }
     repositories {
         google()
@@ -15,25 +16,34 @@ buildscript {
     }
     dependencies {
         classpath "com.android.tools.build:gradle:$gradlePluginVersion"
+        classpath("com.facebook.react:react-native-gradle-plugin")
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     }
+    // Fix AGP version to 8.1.0 until the main Android app upgrades to 8.1.1
+    configurations.all {
+        resolutionStrategy.eachDependency { DependencyResolveDetails details ->
+            if (details.requested.group == 'com.android.tools.build' && details.requested.name == 'gradle') {
+                details.useVersion gradlePluginVersion
+            }
+        }
+    }
 }
 
 allprojects {
     repositories {
         mavenCentral()
-        mavenLocal()
         maven {
             url "https://a8c-libs.s3.amazonaws.com/android"
             content {
                 includeGroup "org.wordpress"
                 includeGroup "org.wordpress.aztec"
-                includeGroup "org.wordpress-mobile"
+                includeGroupByRegex "org.wordpress.react-native-libraries.*"
             }
         }
-        maven { url "https://a8c-libs.s3.amazonaws.com/android/react-native-mirror" }
-        maven { url "https://a8c-libs.s3.amazonaws.com/android/hermes-mirror" }
         maven { url 'https://www.jitpack.io' }
         google()
+        mavenLocal()
     }
 }
+
+apply plugin: "com.facebook.react.rootproject"
diff --git a/packages/react-native-editor/android/gradle.properties b/packages/react-native-editor/android/gradle.properties
index 094d0de62d995d..b91742df522ade 100644
--- a/packages/react-native-editor/android/gradle.properties
+++ b/packages/react-native-editor/android/gradle.properties
@@ -24,5 +24,18 @@ org.gradle.jvmargs=-Xmx6g -XX:+HeapDumpOnOutOfMemoryError
 android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=false
-android.useDeprecatedNdk=true
-FLIPPER_VERSION=0.99.0
\ No newline at end of file
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+newArchEnabled=false
+
+# Use this property to enable or disable the Hermes JS engine.
+# If set to false, you will be using JSC instead.
+hermesEnabled=true
diff --git a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar
index 41d9927a4d4fb3..033e24c4cdf41a 100644
Binary files a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar and b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties
index 92f06b50fd65b4..515ab9d5f1822a 100644
--- a/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties
+++ b/packages/react-native-editor/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,8 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
+distributionSha256Sum=f8b4f4772d302c8ff580bc40d0f56e715de69b163546944f787c87abf209c961
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
+networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/packages/react-native-editor/android/gradlew b/packages/react-native-editor/android/gradlew
index 1b6c787337ffb7..fcb6fca147c0cd 100755
--- a/packages/react-native-editor/android/gradlew
+++ b/packages/react-native-editor/android/gradlew
@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,13 +80,10 @@ do
     esac
 done
 
-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -133,22 +130,29 @@ location of your Java installation."
     fi
 else
     JAVACMD=java
-    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
+    fi
 fi
 
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
     case $MAX_FD in #(
       max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
         MAX_FD=$( ulimit -H -n ) ||
             warn "Could not query maximum file descriptor limit"
     esac
     case $MAX_FD in  #(
       '' | soft) :;; #(
       *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045
         ulimit -n "$MAX_FD" ||
             warn "Could not set maximum file descriptor limit to $MAX_FD"
     esac
@@ -193,6 +197,10 @@ if "$cygwin" || "$msys" ; then
     done
 fi
 
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
 # Collect all arguments for the java command;
 #   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
 #     shell script including quotes and variable substitutions, so put them in
@@ -205,6 +213,12 @@ set -- \
         org.gradle.wrapper.GradleWrapperMain \
         "$@"
 
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
diff --git a/packages/react-native-editor/android/gradlew.bat b/packages/react-native-editor/android/gradlew.bat
index ac1b06f93825db..6689b85beecde6 100644
--- a/packages/react-native-editor/android/gradlew.bat
+++ b/packages/react-native-editor/android/gradlew.bat
@@ -14,7 +14,7 @@
 @rem limitations under the License.
 @rem
 
-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
 @rem ##########################################################################
 @rem
 @rem  Gradle startup script for Windows
@@ -25,7 +25,8 @@
 if "%OS%"=="Windows_NT" setlocal
 
 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
@@ -40,7 +41,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -75,13 +76,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
 :end
 @rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd
 
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
 
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
diff --git a/packages/react-native-editor/android/settings.gradle b/packages/react-native-editor/android/settings.gradle
index 00081747119a5d..1afaaf6df0be3a 100644
--- a/packages/react-native-editor/android/settings.gradle
+++ b/packages/react-native-editor/android/settings.gradle
@@ -3,3 +3,4 @@ rootProject.name = 'gutenberg'
 includeBuild("../../react-native-bridge/android")
 
 include ':app'
+includeBuild('../../../node_modules/@react-native/gradle-plugin')
diff --git a/packages/react-native-editor/babel.config.js b/packages/react-native-editor/babel.config.js
index 705c9cb820961a..7f81d06082b58f 100644
--- a/packages/react-native-editor/babel.config.js
+++ b/packages/react-native-editor/babel.config.js
@@ -6,13 +6,14 @@ const path = require( 'path' );
 module.exports = function ( api ) {
 	api.cache( true );
 	return {
-		presets: [ 'module:metro-react-native-babel-preset' ],
+		presets: [ 'module:@react-native/babel-preset' ],
 		plugins: [
 			path.resolve(
 				__dirname,
-				'../../node_modules/@babel/plugin-proposal-async-generator-functions'
+				'../../node_modules/@babel/plugin-transform-async-generator-functions'
 			),
 			'@babel/plugin-transform-runtime',
+			'@babel/plugin-transform-named-capturing-groups-regex',
 			[
 				'react-native-platform-specific-extensions',
 				{
@@ -40,14 +41,14 @@ module.exports = function ( api ) {
 					/node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
 			},
 			{
-				// Auto-add `import { createElement } from '@wordpress/element';` when JSX is found.
+				// Auto-add `import { createElement } from 'react';` when JSX is found.
 				plugins: [
 					[
 						'@wordpress/babel-plugin-import-jsx-pragma',
 						{
 							scopeVariable: 'createElement',
 							scopeVariableFrag: 'Fragment',
-							source: '@wordpress/element',
+							source: 'react',
 							isDefault: false,
 						},
 					],
diff --git a/packages/react-native-editor/bin/build-e2e-wda.sh b/packages/react-native-editor/bin/build-e2e-wda.sh
new file mode 100755
index 00000000000000..2b835fbd6e608f
--- /dev/null
+++ b/packages/react-native-editor/bin/build-e2e-wda.sh
@@ -0,0 +1,10 @@
+#!/bin/bash -eu
+
+set -o pipefail
+
+# Load configurations from JSON file
+CONFIG_FILE="$(pwd)/__device-tests__/helpers/device-config.json"
+IOS_DEVICE_NAME=$(jq -r '.ios.local.deviceName' "$CONFIG_FILE")
+IOS_PLATFORM_VERSION=$(jq -r '.ios.local.platformVersion' "$CONFIG_FILE")
+
+xcodebuild -project ~/.appium/node_modules/appium-xcuitest-driver/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj -scheme WebDriverAgentRunner -destination "platform=iOS Simulator,name=$IOS_DEVICE_NAME,OS=$IOS_PLATFORM_VERSION" -derivedDataPath ios/build/WDA
diff --git a/packages/react-native-editor/bin/build_e2e_ios_app b/packages/react-native-editor/bin/build_e2e_ios_app
new file mode 100755
index 00000000000000..2a0a293adedcb9
--- /dev/null
+++ b/packages/react-native-editor/bin/build_e2e_ios_app
@@ -0,0 +1,34 @@
+#!/bin/bash -eu
+
+set -o pipefail
+
+# Load configurations from JSON file
+CONFIG_FILE="$(pwd)/__device-tests__/helpers/device-config.json"
+IOS_DEVICE_NAME=$(jq -r '.ios.local.deviceName' "$CONFIG_FILE")
+IOS_PLATFORM_VERSION=$(jq -r '.ios.local.platformVersion' "$CONFIG_FILE")
+
+DEFAULT_DESTINATION="platform=iOS Simulator,name=$IOS_DEVICE_NAME,OS=$IOS_PLATFORM_VERSION"
+if [[ -z "${RN_EDITOR_E2E_IOS_DESTINATION-}" ]]; then
+	DESTINATION="$DEFAULT_DESTINATION"
+else
+	DESTINATION="$RN_EDITOR_E2E_IOS_DESTINATION"
+fi
+
+# Define xcodebuild in a variable so that we can conditionally pipe it through
+# the xcbeautify output parser
+XCODEBUILD_CMD="SKIP_BUNDLING=true \
+	xcodebuild \
+	-workspace ios/GutenbergDemo.xcworkspace \
+	-configuration Release \
+	-scheme GutenbergDemo \
+	-derivedDataPath ios/build/GutenbergDemo \
+	-destination '$DESTINATION'"
+
+# Check if xcbeautify is available
+if command -v xcbeautify >/dev/null 2>&1; then
+	# Pipe the output to xcbeautify
+	eval "$XCODEBUILD_CMD" | xcbeautify
+else
+	# Run xcodebuild without piping the output
+	eval "$XCODEBUILD_CMD"
+fi
diff --git a/packages/react-native-editor/bin/extract-used-strings.js b/packages/react-native-editor/bin/extract-used-strings.js
index c489668c8f035a..798cda36f7a4ba 100755
--- a/packages/react-native-editor/bin/extract-used-strings.js
+++ b/packages/react-native-editor/bin/extract-used-strings.js
@@ -155,11 +155,13 @@ if ( require.main === module ) {
 	const domains = [ 'gutenberg' ];
 	const otherPluginArgs = process.argv.slice( 3 );
 	const otherPlugins = [];
-	for ( let index = 0; index < otherPluginArgs.length; index += 2 ) {
+	for ( let index = 0; index < otherPluginArgs.length; index += 3 ) {
 		const pluginName = otherPluginArgs[ index ];
-		const pluginPath = path.resolve( otherPluginArgs[ index + 1 ] );
+		const projectSlug = otherPluginArgs[ index + 1 ];
+		const pluginPath = path.resolve( otherPluginArgs[ index + 2 ] );
 		otherPlugins.push( {
 			name: pluginName,
+			projectSlug,
 			sourcePath: pluginPath,
 		} );
 		domains.push( pluginName );
diff --git a/packages/react-native-editor/bin/generate-pot-files.sh b/packages/react-native-editor/bin/generate-pot-files.sh
index ac095d1442ed5f..5f00ca664d600c 100755
--- a/packages/react-native-editor/bin/generate-pot-files.sh
+++ b/packages/react-native-editor/bin/generate-pot-files.sh
@@ -191,7 +191,7 @@ fi
 # Define constants
 SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 GUTENBERG_SOURCE_CODE_DIR="$SCRIPT_DIR/../../.."
-WP_CLI="php -d memory_limit=4G $SCRIPT_DIR/wp-cli.phar"
+WP_CLI="php -d memory_limit=4G -d error_reporting=E_ALL&~E_DEPRECATED $SCRIPT_DIR/wp-cli.phar"
 BUNDLE_CLI="$GUTENBERG_SOURCE_CODE_DIR/node_modules/.bin/react-native bundle --config ${METRO_CONFIG:-metro.config.js}"
 
 # Set target path
diff --git a/packages/react-native-editor/bin/i18n-translations-download.js b/packages/react-native-editor/bin/i18n-translations-download.js
index 85d2f1b14e765a..24911a3ed64b3a 100644
--- a/packages/react-native-editor/bin/i18n-translations-download.js
+++ b/packages/react-native-editor/bin/i18n-translations-download.js
@@ -60,31 +60,69 @@ const supportedLocales = [
 	'zh-tw', // Chinese (Taiwan)
 ];
 
-const getLanguageUrl = ( locale, plugin ) =>
-	`https://translate.wordpress.org/projects/wp-plugins/${ plugin }/dev/${ locale }/default/export-translations\?format\=json`;
+const MAX_RETRIES = 5;
+const RETRY_DELAY = 2000;
+
+const getLanguageUrl = ( locale, projectSlug ) =>
+	`https://translate.wordpress.org/projects/${ projectSlug }/dev/${ locale }/default/export-translations/\?format\=json`;
 
 const getTranslationFilePath = ( locale ) => `./data/${ locale }.json`;
 
-const fetchTranslation = ( locale, plugin ) => {
-	const localeUrl = getLanguageUrl( locale, plugin );
-	return fetch( localeUrl )
-		.then( ( response ) => response.json() )
-		.then( ( body ) => {
-			return { response: body, locale };
-		} )
-		.catch( () => {
-			console.error( `Could not find translation file ${ localeUrl }` );
-		} );
+const fetchTranslation = ( locale, projectSlug ) => {
+	let retryCount = MAX_RETRIES;
+	const localeUrl = getLanguageUrl( locale, projectSlug );
+	const request = () =>
+		fetch( localeUrl )
+			.then( ( response ) => {
+				if ( ! response.ok ) {
+					const { status, statusText } = response;
+
+					// Retry when encountering "429 - Too Many Requests" error
+					if ( status === 429 && retryCount > 0 ) {
+						console.log(
+							`Translation file ${ localeUrl } for project slug ${ projectSlug } failed with error 429 - Too Many Requests, retrying (${ retryCount })...`
+						);
+						retryCount--;
+						return new Promise( ( resolve ) =>
+							setTimeout(
+								() => request().then( resolve ),
+								RETRY_DELAY
+							)
+						);
+					}
+
+					console.error(
+						`Could not find translation file ${ localeUrl } for project slug ${ projectSlug }`,
+						{ status, statusText }
+					);
+					return { locale, status, statusText };
+				}
+				return response.json();
+			} )
+			.then( ( body ) => {
+				return { response: body, locale };
+			} )
+			.catch( () => {
+				console.error(
+					`Could not find translation file ${ localeUrl } for project slug ${ projectSlug }`
+				);
+			} );
+	return request();
 };
 
-const fetchTranslations = ( { plugin, pluginDir, usedStrings } ) => {
+const fetchTranslations = ( {
+	plugin,
+	projectSlug,
+	pluginDir,
+	usedStrings,
+} ) => {
 	console.log(
-		`Fetching translations of plugin "${ plugin }" for the following locales:`,
+		`Fetching translations of plugin "${ plugin }" with project slug "${ projectSlug }" for the following locales:`,
 		supportedLocales
 	);
 
 	const fetchPromises = supportedLocales.map( ( locale ) =>
-		fetchTranslation( locale, plugin )
+		fetchTranslation( locale, projectSlug )
 	);
 
 	// Create data folder if it doesn't exist
@@ -97,7 +135,16 @@ const fetchTranslations = ( { plugin, pluginDir, usedStrings } ) => {
 	let extraTranslations = [];
 
 	return Promise.all( fetchPromises ).then( ( results ) => {
-		const fetchedTranslations = results.filter( Boolean );
+		const fetchedTranslations = results.filter(
+			( result ) => result.response
+		);
+
+		// Abort process if any translation can't be fetched
+		if ( fetchedTranslations.length !== supportedLocales.length ) {
+			process.exit( 1 );
+			return;
+		}
+
 		const translationFilePromises = fetchedTranslations.map(
 			( languageResult ) => {
 				return new Promise( ( resolve, reject ) => {
@@ -230,8 +277,9 @@ const generateIndexFile = ( translations, pluginDir ) => {
 if ( require.main === module ) {
 	const args = process.argv.slice( 2 );
 	const plugin = args[ 0 ] || 'gutenberg';
-	const destination = args[ 1 ] || './i18n-cache';
-	const usedStringsFile = args[ 2 ];
+	const projectSlug = args[ 1 ] || 'wp-plugins/gutenberg';
+	const destination = args[ 2 ] || './i18n-cache';
+	const usedStringsFile = args[ 3 ];
 
 	const translationsDir = path.resolve( destination );
 	const pluginDir = path.join( translationsDir, plugin );
@@ -243,6 +291,7 @@ if ( require.main === module ) {
 
 	fetchTranslations( {
 		plugin,
+		projectSlug,
 		pluginDir,
 		usedStrings,
 	} ).then( ( { translations, missingTranslations, extraTranslations } ) => {
diff --git a/packages/react-native-editor/bin/test-e2e-setup.sh b/packages/react-native-editor/bin/test-e2e-setup.sh
new file mode 100755
index 00000000000000..b4fd55c9bea122
--- /dev/null
+++ b/packages/react-native-editor/bin/test-e2e-setup.sh
@@ -0,0 +1,125 @@
+#!/bin/bash -e
+
+# =================================================================
+# Appium Drivers
+#
+# NOTE: Please update the following versions when upgrading Appium.
+# =================================================================
+UI_AUTOMATOR_2_VERSION="2.32.3"
+XCUITEST_VERSION="5.7.0"
+
+set -o pipefail
+
+if command -v appium >/dev/null 2>&1; then
+	APPIUM_CMD="appium"
+else
+	# Use relative path to access the locally installed appium
+	APPIUM_CMD="../../../node_modules/.bin/appium"
+fi
+
+function log_info() {
+	printf "ℹ️  $1\n"
+}
+
+function log_success {
+	printf "✅ $1\n"
+}
+
+function log_error() {
+	printf "❌ $1\n"
+}
+
+output=$($APPIUM_CMD driver list --installed --json)
+
+# UiAutomator2 driver installation
+matched_version=$(echo "$output" | jq -r '.uiautomator2.version // empty')
+if [ -z "$matched_version" ]; then
+	log_info "UiAutomator2 not installed, installing version $UI_AUTOMATOR_2_VERSION..."
+	$APPIUM_CMD driver install "uiautomator2@$UI_AUTOMATOR_2_VERSION"
+elif [ "$matched_version" = "$UI_AUTOMATOR_2_VERSION" ]; then
+	log_info "UiAutomator2 version $UI_AUTOMATOR_2_VERSION is available."
+else
+	log_info "UiAutomator2 version $matched_version is installed, replacing it with version $UI_AUTOMATOR_2_VERSION..."
+	$APPIUM_CMD driver uninstall uiautomator2
+	$APPIUM_CMD driver install "uiautomator2@$UI_AUTOMATOR_2_VERSION"
+fi
+
+# XCUITest driver installation
+matched_version=$(echo "$output" | jq -r '.xcuitest.version // empty')
+if [ -z "$matched_version" ]; then
+	log_info "XCUITest not installed, installing version $XCUITEST_VERSION..."
+	$APPIUM_CMD driver install "xcuitest@$XCUITEST_VERSION"
+elif [ "$matched_version" = "$XCUITEST_VERSION" ]; then
+	log_info "XCUITest version $XCUITEST_VERSION is available."
+else
+	log_info "XCUITest version $matched_version is installed, replacing it with version $XCUITEST_VERSION..."
+	$APPIUM_CMD driver uninstall xcuitest
+	$APPIUM_CMD driver install "xcuitest@$XCUITEST_VERSION"
+fi
+
+CONFIG_FILE="$(pwd)/__device-tests__/helpers/device-config.json"
+IOS_PLATFORM_VERSION=$(jq -r '.ios.local.platformVersion' "$CONFIG_FILE")
+
+# Throw an error if the required iOS runtime is not installed
+IOS_RUNTIME_INSTALLED=$(xcrun simctl list runtimes -j | jq -r --arg version "$IOS_PLATFORM_VERSION" '.runtimes | to_entries[] | select(.value.version | contains($version))')
+if [[ -z $IOS_RUNTIME_INSTALLED ]]; then
+	log_error "iOS $IOS_PLATFORM_VERSION runtime not found! Please install the iOS $IOS_PLATFORM_VERSION runtime using Xcode.\n    https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes#Install-and-manage-Simulator-runtimes-in-settings"
+	exit 1;
+fi
+
+function detect_or_create_simulator() {
+	local simulator_name=$1
+	local runtime_name_display=$(echo "iOS $IOS_PLATFORM_VERSION")
+	local runtime_name=$(echo "$runtime_name_display" | sed 's/ /-/g; s/\./-/g')
+	local simulators=$(xcrun simctl list devices -j | jq -r --arg runtime "$runtime_name" '.devices | to_entries[] | select(.key | contains($runtime)) | .value[] | .name + "," + .udid')
+
+	if ! echo "$simulators" | grep -q "$simulator_name"; then
+		log_info "$simulator_name ($runtime_name_display) not found, creating..."
+		xcrun simctl create "$simulator_name" "$simulator_name" "com.apple.CoreSimulator.SimRuntime.$runtime_name" > /dev/null
+		log_success "$simulator_name ($runtime_name_display) created."
+	else
+		log_info "$simulator_name ($runtime_name_display) available."
+	fi
+}
+
+IOS_DEVICE_NAME=$(jq -r '.ios.local.deviceName' "$CONFIG_FILE")
+IOS_DEVICE_TABLET_NAME=$(jq -r '.ios.local.deviceTabletName' "$CONFIG_FILE")
+
+# Create the required iOS simulators, if they don't exist
+detect_or_create_simulator "$IOS_DEVICE_NAME"
+detect_or_create_simulator "$IOS_DEVICE_TABLET_NAME"
+
+function detect_or_create_emulator() {
+	if [[ "${CI}" ]]; then
+		log_info "Detected CI server, skipping Android emulator creation."
+		return
+	fi
+
+	if [[ -z $(command -v avdmanager) ]]; then
+		log_error "avdmanager not found! Please install the Android SDK command-line tools.\n    https://developer.android.com/tools/"
+		exit 1;
+	fi
+
+	local emulator_name=$1
+	local emulator_id=$(echo "$emulator_name" | sed 's/ /_/g; s/\./_/g')
+	local device_id=$(echo "$emulator_id" | awk -F '_' '{print tolower($1)"_"tolower($2)"_"tolower($3)}')
+	local runtime_api=$(echo "$emulator_id" | awk -F '_' '{print $NF}')
+	local emulator=$(emulator -list-avds | grep "$emulator_id")
+
+	if [[ -z $emulator ]]; then
+		log_info "$emulator_name not found, creating..."
+		avdmanager create avd -n "$emulator_id" -k "system-images;android-$runtime_api;google_apis;arm64-v8a" -d "$device_id" > /dev/null
+		log_success "$emulator_name created."
+	else
+		log_info "$emulator_name available."
+	fi
+}
+
+ANDROID_DEVICE_NAME=$(jq -r '.android.local.deviceName' "$CONFIG_FILE")
+
+# Create the required Android emulators, if they don't exist
+detect_or_create_emulator $ANDROID_DEVICE_NAME
+
+# Mitigate conflicts between development server caches and E2E tests
+npm run clean:runtime > /dev/null
+log_info 'Runtime cache cleared.'
diff --git a/packages/react-native-editor/bin/test-e2e.sh b/packages/react-native-editor/bin/test-e2e.sh
new file mode 100755
index 00000000000000..2c2926b245edcd
--- /dev/null
+++ b/packages/react-native-editor/bin/test-e2e.sh
@@ -0,0 +1,24 @@
+#!/bin/bash -e
+
+set -o pipefail
+
+# If TEST_RN_PLATFORM is empty or equal to "android" and not the CI server, launch the Android emulator.
+if [ -z "$TEST_RN_PLATFORM" ] || [ "$TEST_RN_PLATFORM" = "android" ] && [ -z "$GITHUB_ACTIONS" ]; then
+	# Load configurations from JSON file
+	CONFIG_FILE="$(pwd)/__device-tests__/helpers/device-config.json"
+	ANDROID_DEVICE_NAME=$(jq -r '.android.local.deviceName' "$CONFIG_FILE")
+
+	# Start the emulator if it is not already running
+	if [ -z "$(pgrep -f "$ANDROID_DEVICE_NAME")" ]; then
+		echo "[info] Starting the Android emulator..."
+		emulator -avd "$ANDROID_DEVICE_NAME" -noaudio 2>&1 >/dev/null &
+		ANDROID_PID=$!
+
+		# Wait for the emulator to be ready.
+		echo "[info] Waiting for the Android emulator to be ready..."
+		adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed) ]]; do sleep 1; done; input keyevent 82'
+	fi
+fi
+
+# Pass along all arguments to Jest.
+cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --forceExit --config ./jest_ui.config.js "$@"
diff --git a/packages/react-native-editor/ios/.bundle/config b/packages/react-native-editor/ios/.bundle/config
index 2369228816d467..3e22e4d08d33ad 100644
--- a/packages/react-native-editor/ios/.bundle/config
+++ b/packages/react-native-editor/ios/.bundle/config
@@ -1,2 +1,2 @@
 ---
-BUNDLE_PATH: "vendor/bundle"
+BUNDLE_PATH: "../vendor/bundle"
diff --git a/packages/react-native-editor/ios/.ruby-version b/packages/react-native-editor/ios/.ruby-version
index a4dd9dba4fbfc5..be94e6f53db6b3 100644
--- a/packages/react-native-editor/ios/.ruby-version
+++ b/packages/react-native-editor/ios/.ruby-version
@@ -1 +1 @@
-2.7.4
+3.2.2
diff --git a/packages/react-native-editor/ios/.xcode.env b/packages/react-native-editor/ios/.xcode.env
new file mode 100644
index 00000000000000..772b339b4c8e49
--- /dev/null
+++ b/packages/react-native-editor/ios/.xcode.env
@@ -0,0 +1 @@
+export NODE_BINARY=$(command -v node)
diff --git a/packages/react-native-editor/ios/Colors.xcassets/Contents.json b/packages/react-native-editor/ios/Colors.xcassets/Contents.json
new file mode 100644
index 00000000000000..d458f1c5928f7d
--- /dev/null
+++ b/packages/react-native-editor/ios/Colors.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/Colors.xcassets/HeaderLine.colorset/Contents.json b/packages/react-native-editor/ios/Colors.xcassets/HeaderLine.colorset/Contents.json
new file mode 100644
index 00000000000000..5524b9950ee4c6
--- /dev/null
+++ b/packages/react-native-editor/ios/Colors.xcassets/HeaderLine.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+	"colors": [
+		{
+			"color": {
+				"color-space": "srgb",
+				"components": {
+					"alpha": "0.360",
+					"blue": "0.025",
+					"green": "0.025",
+					"red": "0.025"
+				}
+			},
+			"idiom": "universal"
+		},
+		{
+			"appearances": [
+				{
+					"appearance": "luminosity",
+					"value": "dark"
+				}
+			],
+			"color": {
+				"color-space": "srgb",
+				"components": {
+					"alpha": "0.360",
+					"blue": "0.025",
+					"green": "0.025",
+					"red": "0.025"
+				}
+			},
+			"idiom": "universal"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/Colors.xcassets/Primary.colorset/Contents.json b/packages/react-native-editor/ios/Colors.xcassets/Primary.colorset/Contents.json
new file mode 100644
index 00000000000000..7437866da3cfe0
--- /dev/null
+++ b/packages/react-native-editor/ios/Colors.xcassets/Primary.colorset/Contents.json
@@ -0,0 +1,33 @@
+{
+	"colors": [
+		{
+			"color": {
+				"color-space": "srgb",
+				"components": {
+					"alpha": "1.000",
+					"blue": "0.000",
+					"green": "0.000",
+					"red": "0.000"
+				}
+			},
+			"idiom": "universal"
+		},
+		{
+			"appearances": [
+				{
+					"appearance": "luminosity",
+					"value": "dark"
+				}
+			],
+			"color": {
+				"platform": "ios",
+				"reference": "labelColor"
+			},
+			"idiom": "universal"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/Gemfile b/packages/react-native-editor/ios/Gemfile
index 9536eabf7d5262..2a0889e80abc78 100644
--- a/packages/react-native-editor/ios/Gemfile
+++ b/packages/react-native-editor/ios/Gemfile
@@ -1,3 +1,6 @@
 source 'https://rubygems.org'
 
-gem 'cocoapods', '~> 1.10.0'
+ruby File.read(File.join(__dir__, '.ruby-version')).strip
+
+gem 'cocoapods', '>= 1.13', '< 1.15'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
diff --git a/packages/react-native-editor/ios/Gemfile.lock b/packages/react-native-editor/ios/Gemfile.lock
index 98d409730b4bd4..e8fbb72a6ca659 100644
--- a/packages/react-native-editor/ios/Gemfile.lock
+++ b/packages/react-native-editor/ios/Gemfile.lock
@@ -1,93 +1,105 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.3)
-    activesupport (5.2.5)
+    CFPropertyList (3.0.6)
+      rexml
+    activesupport (6.1.7.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 0.7, < 2)
-      minitest (~> 5.1)
-      tzinfo (~> 1.1)
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
-    claide (1.0.3)
-    cocoapods (1.10.1)
-      addressable (~> 2.6)
+    claide (1.1.0)
+    cocoapods (1.14.3)
+      addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.10.1)
+      cocoapods-core (= 1.14.3)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.4.0, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.4.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
       cocoapods-try (>= 1.1.0, < 2.0)
       colored2 (~> 3.1)
       escape (~> 0.0.4)
       fourflusher (>= 2.3.0, < 3.0)
       gh_inspector (~> 1.0)
-      molinillo (~> 0.6.6)
+      molinillo (~> 0.8.0)
       nap (~> 1.0)
-      ruby-macho (~> 1.4)
-      xcodeproj (>= 1.19.0, < 2.0)
-    cocoapods-core (1.10.1)
-      activesupport (> 5.0, < 6)
-      addressable (~> 2.6)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.14.3)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
       algoliasearch (~> 1.0)
       concurrent-ruby (~> 1.1)
       fuzzy_match (~> 2.0.4)
       nap (~> 1.0)
       netrc (~> 0.11)
-      public_suffix
+      public_suffix (~> 4.0)
       typhoeus (~> 1.0)
-    cocoapods-deintegrate (1.0.4)
-    cocoapods-downloader (1.6.3)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
     cocoapods-plugins (1.0.0)
       nap
-    cocoapods-search (1.0.0)
-    cocoapods-trunk (1.5.0)
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
       nap (>= 0.8, < 2.0)
       netrc (~> 0.11)
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
-    concurrent-ruby (1.1.8)
+    concurrent-ruby (1.2.2)
     escape (0.0.4)
-    ethon (0.14.0)
+    ethon (0.16.0)
       ffi (>= 1.15.0)
-    ffi (1.15.0)
+    ffi (1.16.3)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.8.10)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    json (2.5.1)
-    minitest (5.14.4)
-    molinillo (0.6.6)
+    json (2.7.1)
+    minitest (5.19.0)
+    molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
-    public_suffix (4.0.6)
-    ruby-macho (1.4.0)
-    thread_safe (0.3.6)
-    typhoeus (1.4.0)
+    public_suffix (4.0.7)
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
+    ruby-macho (2.5.1)
+    strscan (3.1.0)
+    typhoeus (1.4.1)
       ethon (>= 0.9.0)
-    tzinfo (1.2.10)
-      thread_safe (~> 0.1)
-    xcodeproj (1.19.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.24.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
+      rexml (~> 3.2.4)
+    zeitwerk (2.6.11)
 
 PLATFORMS
+  arm64-darwin-21
+  arm64-darwin-22
   ruby
 
 DEPENDENCIES
-  cocoapods (~> 1.10.0)
+  activesupport (>= 6.1.7.3, < 7.1.0)
+  cocoapods (>= 1.13, < 1.15)
+
+RUBY VERSION
+   ruby 3.2.2p53
 
 BUNDLED WITH
-   2.2.27
+   2.4.10
diff --git a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
index 60e0d221f169de..4b6938198c9423 100644
--- a/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
+++ b/packages/react-native-editor/ios/GutenbergDemo.xcodeproj/project.pbxproj
@@ -12,6 +12,7 @@
 		1E4F2E752459E6F200EB73E7 /* WebViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1E85944D2449D85A006CC6A0 /* WebViewController.swift */; };
 		1EFFAB71253EF6580062051E /* DocumentsMediaSource.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1EFFAB70253EF6580062051E /* DocumentsMediaSource.swift */; };
 		2F634FA02731D5ED00310CC3 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 2F634F9F2731D5ED00310CC3 /* LaunchScreen.storyboard */; };
+		561700D72A4C91E700E7CF18 /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 561700D62A4C91E700E7CF18 /* Colors.xcassets */; };
 		6EBC6CA237E4D4B00D5AC79F /* Pods_GutenbergDemo.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AB79EC55FB340834C8D3BAB6 /* Pods_GutenbergDemo.framework */; };
 		7EC7328F21907E3F00FED2E6 /* GutenbergViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7EC7328E21907E3F00FED2E6 /* GutenbergViewController.swift */; };
 		E8649334C74E9AB9AF90B020 /* Pods_GutenbergDemo_GutenbergDemoTests.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 6C4D4EB8326260FEFE8844CC /* Pods_GutenbergDemo_GutenbergDemoTests.framework */; };
@@ -49,6 +50,7 @@
 		1EFFAB70253EF6580062051E /* DocumentsMediaSource.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DocumentsMediaSource.swift; sourceTree = "<group>"; };
 		2F634F9F2731D5ED00310CC3 /* LaunchScreen.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
 		4EC14D7D4E04A462CB8AC230 /* Pods-GutenbergDemo-GutenbergDemoTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-GutenbergDemo-GutenbergDemoTests.release.xcconfig"; path = "Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests.release.xcconfig"; sourceTree = "<group>"; };
+		561700D62A4C91E700E7CF18 /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = "<group>"; };
 		66F6B74F51BD6921D3AF25F6 /* Pods-GutenbergDemoTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-GutenbergDemoTests.debug.xcconfig"; path = "Target Support Files/Pods-GutenbergDemoTests/Pods-GutenbergDemoTests.debug.xcconfig"; sourceTree = "<group>"; };
 		6C4D4EB8326260FEFE8844CC /* Pods_GutenbergDemo_GutenbergDemoTests.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_GutenbergDemo_GutenbergDemoTests.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		71AC74DFA49CB3BF62D440DB /* Pods-GutenbergDemoTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-GutenbergDemoTests.release.xcconfig"; path = "Target Support Files/Pods-GutenbergDemoTests/Pods-GutenbergDemoTests.release.xcconfig"; sourceTree = "<group>"; };
@@ -124,6 +126,7 @@
 				FF6836C722035EAB00A0C562 /* MediaUploadCoordinator.swift */,
 				F151983A2100DC3D000F6E97 /* MediaProvider.swift */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				561700D62A4C91E700E7CF18 /* Colors.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				FF83DAA82226905A00A34C93 /* CustomImageLoader.swift */,
 				2F634F9F2731D5ED00310CC3 /* LaunchScreen.storyboard */,
@@ -213,6 +216,7 @@
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
 				71C0B5FDA891DD4D469D2DFB /* [CP] Embed Pods Frameworks */,
+				6C6876BA82C8AB734B9EB348 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -234,6 +238,7 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				06CE89E9A162D62B604C3B6C /* [CP] Embed Pods Frameworks */,
+				BD87D2B56A91E91E3DFD2CBA /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -302,6 +307,7 @@
 				F1EE6F7A21E7F0A500241744 /* NotoSerif-Italic.ttf in Resources */,
 				2F634FA02731D5ED00310CC3 /* LaunchScreen.storyboard in Resources */,
 				F1EE6F7821E7F0A500241744 /* NotoSerif-BoldItalic.ttf in Resources */,
+				561700D72A4C91E700E7CF18 /* Colors.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -329,105 +335,55 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh",
-				"${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework",
-				"${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework",
-				"${BUILT_PRODUCTS_DIR}/FBReactNativeSpec/FBReactNativeSpec.framework",
-				"${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
-				"${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
-				"${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
-				"${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
-				"${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
-				"${BUILT_PRODUCTS_DIR}/RNFastImage/RNFastImage.framework",
-				"${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
-				"${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
-				"${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework",
-				"${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework",
-				"${BUILT_PRODUCTS_DIR}/RNTAztecView/RNTAztecView.framework",
-				"${BUILT_PRODUCTS_DIR}/React-Core/React.framework",
-				"${BUILT_PRODUCTS_DIR}/React-CoreModules/CoreModules.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTAnimation/RCTAnimation.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTBlob/RCTBlob.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTImage/RCTImage.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTLinking/RCTLinking.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTNetwork/RCTNetwork.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTSettings/RCTSettings.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTText/RCTText.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTVibration/RCTVibration.framework",
-				"${BUILT_PRODUCTS_DIR}/React-cxxreact/cxxreact.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsi/jsi.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsiexecutor/jsireact.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework",
-				"${BUILT_PRODUCTS_DIR}/React-logger/logger.framework",
-				"${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework",
-				"${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework",
-				"${BUILT_PRODUCTS_DIR}/SDWebImage/SDWebImage.framework",
-				"${BUILT_PRODUCTS_DIR}/SDWebImageWebPCoder/SDWebImageWebPCoder.framework",
-				"${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework",
-				"${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework",
-				"${BUILT_PRODUCTS_DIR}/fmt/fmt.framework",
-				"${BUILT_PRODUCTS_DIR}/glog/glog.framework",
-				"${BUILT_PRODUCTS_DIR}/libwebp/libwebp.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-get-random-values/react_native_get_random_values.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-keyboard-aware-scroll-view/react_native_keyboard_aware_scroll_view.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-safe-area/react_native_safe_area.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-safe-area-context/react_native_safe_area_context.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-slider/react_native_slider.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-webview/react_native_webview.framework",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FBReactNativeSpec.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNFastImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNTAztecView.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CoreModules.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTAnimation.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTBlob.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTLinking.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTNetwork.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTSettings.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTText.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTVibration.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/cxxreact.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsi.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsireact.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/logger.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImageWebPCoder.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/fmt.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/libwebp.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_get_random_values.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_keyboard_aware_scroll_view.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area_context.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_slider.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_webview.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		6C6876BA82C8AB734B9EB348 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-resources.sh",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/content-functions.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/gutenberg-observer.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/inject-css.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/insert-block.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/prevent-autosaves.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/wp-bar-override.css",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/WordPress-Aztec-iOS/WordPress-Aztec-iOS.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/content-functions.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-behavior-overrides.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-style-overrides.css",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/gutenberg-observer.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/inject-css.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/insert-block.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/local-storage-overrides.json",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/prevent-autosaves.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/wp-bar-override.css",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WordPress-Aztec-iOS.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 		70B839CE7B6A174DC4DE8FB6 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -457,99 +413,11 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo-GutenbergDemoTests/Pods-GutenbergDemo-GutenbergDemoTests-frameworks.sh",
-				"${BUILT_PRODUCTS_DIR}/BVLinearGradient/BVLinearGradient.framework",
-				"${BUILT_PRODUCTS_DIR}/DoubleConversion/DoubleConversion.framework",
-				"${BUILT_PRODUCTS_DIR}/FBReactNativeSpec/FBReactNativeSpec.framework",
-				"${BUILT_PRODUCTS_DIR}/Gutenberg/Gutenberg.framework",
-				"${BUILT_PRODUCTS_DIR}/RCT-Folly/folly.framework",
-				"${BUILT_PRODUCTS_DIR}/RCTTypeSafety/RCTTypeSafety.framework",
-				"${BUILT_PRODUCTS_DIR}/RNCClipboard/RNCClipboard.framework",
-				"${BUILT_PRODUCTS_DIR}/RNCMaskedView/RNCMaskedView.framework",
-				"${BUILT_PRODUCTS_DIR}/RNFastImage/RNFastImage.framework",
-				"${BUILT_PRODUCTS_DIR}/RNGestureHandler/RNGestureHandler.framework",
-				"${BUILT_PRODUCTS_DIR}/RNReanimated/RNReanimated.framework",
-				"${BUILT_PRODUCTS_DIR}/RNSVG/RNSVG.framework",
-				"${BUILT_PRODUCTS_DIR}/RNScreens/RNScreens.framework",
-				"${BUILT_PRODUCTS_DIR}/RNTAztecView/RNTAztecView.framework",
-				"${BUILT_PRODUCTS_DIR}/React-Core/React.framework",
-				"${BUILT_PRODUCTS_DIR}/React-CoreModules/CoreModules.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTAnimation/RCTAnimation.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTBlob/RCTBlob.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTImage/RCTImage.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTLinking/RCTLinking.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTNetwork/RCTNetwork.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTSettings/RCTSettings.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTText/RCTText.framework",
-				"${BUILT_PRODUCTS_DIR}/React-RCTVibration/RCTVibration.framework",
-				"${BUILT_PRODUCTS_DIR}/React-cxxreact/cxxreact.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsi/jsi.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsiexecutor/jsireact.framework",
-				"${BUILT_PRODUCTS_DIR}/React-jsinspector/jsinspector.framework",
-				"${BUILT_PRODUCTS_DIR}/React-logger/logger.framework",
-				"${BUILT_PRODUCTS_DIR}/React-perflogger/reactperflogger.framework",
-				"${BUILT_PRODUCTS_DIR}/ReactCommon/ReactCommon.framework",
-				"${BUILT_PRODUCTS_DIR}/SDWebImage/SDWebImage.framework",
-				"${BUILT_PRODUCTS_DIR}/SDWebImageWebPCoder/SDWebImageWebPCoder.framework",
-				"${BUILT_PRODUCTS_DIR}/WordPress-Aztec-iOS/Aztec.framework",
-				"${BUILT_PRODUCTS_DIR}/Yoga/yoga.framework",
-				"${BUILT_PRODUCTS_DIR}/fmt/fmt.framework",
-				"${BUILT_PRODUCTS_DIR}/glog/glog.framework",
-				"${BUILT_PRODUCTS_DIR}/libwebp/libwebp.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-blur/react_native_blur.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-get-random-values/react_native_get_random_values.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-keyboard-aware-scroll-view/react_native_keyboard_aware_scroll_view.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-safe-area/react_native_safe_area.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-safe-area-context/react_native_safe_area_context.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-slider/react_native_slider.framework",
-				"${BUILT_PRODUCTS_DIR}/react-native-webview/react_native_webview.framework",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/BVLinearGradient.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/DoubleConversion.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/FBReactNativeSpec.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Gutenberg.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/folly.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTTypeSafety.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCClipboard.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNCMaskedView.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNFastImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNGestureHandler.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNReanimated.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNSVG.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNScreens.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RNTAztecView.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CoreModules.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTAnimation.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTBlob.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTLinking.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTNetwork.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTSettings.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTText.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/RCTVibration.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/cxxreact.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsi.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsireact.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/jsinspector.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/logger.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/reactperflogger.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactCommon.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImage.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDWebImageWebPCoder.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Aztec.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/yoga.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/fmt.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/libwebp.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_blur.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_get_random_values.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_keyboard_aware_scroll_view.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_safe_area_context.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_slider.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/react_native_webview.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -578,6 +446,44 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
+		BD87D2B56A91E91E3DFD2CBA /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-resources.sh",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/content-functions.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-behavior-overrides.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/gutenberg-observer.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/inject-css.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/insert-block.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/local-storage-overrides.json",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/prevent-autosaves.js",
+				"${PODS_ROOT}/../../../react-native-bridge/common/gutenberg-web-single-block/wp-bar-override.css",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/WordPress-Aztec-iOS/WordPress-Aztec-iOS.bundle",
+			);
+			name = "[CP] Copy Pods Resources";
+			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/content-functions.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-behavior-overrides.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/editor-style-overrides.css",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/gutenberg-observer.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/inject-css.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/insert-block.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/local-storage-overrides.json",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/prevent-autosaves.js",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/wp-bar-override.css",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/WordPress-Aztec-iOS.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-GutenbergDemo/Pods-GutenbergDemo-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
@@ -635,6 +541,7 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
@@ -669,6 +576,7 @@
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
@@ -692,7 +600,6 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
@@ -710,7 +617,12 @@
 				INFOPLIST_FILE = GutenbergDemo/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(PROJECT_DIR)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
+					"$(inherited)",
+					"$(SDKROOT)/usr/lib/swift$(PROJECT_DIR)",
+				);
+				MARKETING_VERSION = 1.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -733,7 +645,6 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = PZYM8XX95Q;
@@ -744,7 +655,12 @@
 				INFOPLIST_FILE = GutenbergDemo/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(PROJECT_DIR)";
+				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
+					"$(inherited)",
+					"$(SDKROOT)/usr/lib/swift$(PROJECT_DIR)",
+				);
+				MARKETING_VERSION = 1.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -764,7 +680,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -777,16 +693,16 @@
 				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_OPTIMIZATION_LEVEL = 0;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -795,11 +711,27 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers/platform/ios",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-NativeModulesApple/React_NativeModulesApple.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
+				);
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_CFLAGS = "$(inherited)";
+				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = "$(inherited)";
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_VERSION = 5.0;
+				USE_HERMES = true;
 			};
 			name = Debug;
 		};
@@ -807,7 +739,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++20";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -820,22 +752,41 @@
 				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
 				CLANG_WARN_UNREACHABLE_CODE = YES;
 				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
+				);
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon-Samples/ReactCommon_Samples.framework/Headers/platform/ios",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/view/platform/cxx",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-NativeModulesApple/React_NativeModulesApple.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
+				);
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_CFLAGS = "$(inherited)";
+				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
+				OTHER_LDFLAGS = "$(inherited)";
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_VERSION = 5.0;
+				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};
 			name = Release;
diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
index f06be2f5b92202..c9c1bca191c22e 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -39,6 +39,61 @@ class GutenbergViewController: UIViewController {
     @objc func saveButtonPressed(sender: UIBarButtonItem) {
         gutenberg.requestHTML()
     }
+    
+    lazy var undoButton: UIButton = {
+        let isRTL = UIView.userInterfaceLayoutDirection(for: .unspecified) == .rightToLeft
+        let undoImage = UIImage(named: "undo")
+        let button = UIButton(type: .system)
+        button.setImage(isRTL ? undoImage?.withHorizontallyFlippedOrientation() : undoImage, for: .normal)
+        button.accessibilityIdentifier = "editor-undo-button"
+        button.accessibilityLabel = "Undo"
+        button.accessibilityHint = "Double tap to undo last change"
+        button.addTarget(self, action: #selector(undoButtonPressed(sender:)), for: .touchUpInside)
+        button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
+        button.sizeToFit()
+        button.alpha = 0.3
+        button.isUserInteractionEnabled = false
+        return button
+    }()
+    
+    lazy var redoButton: UIButton = {
+        let isRTL = UIView.userInterfaceLayoutDirection(for: .unspecified) == .rightToLeft
+        let redoImage = UIImage(named: "redo")
+        let button = UIButton(type: .system)
+        button.setImage(isRTL ? redoImage?.withHorizontallyFlippedOrientation() : redoImage, for: .normal)
+        button.accessibilityIdentifier = "editor-redo-button"
+        button.accessibilityLabel = "Redo"
+        button.accessibilityHint = "Double tap to redo last change"
+        button.addTarget(self, action: #selector(redoButtonPressed(sender:)), for: .touchUpInside)
+        button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
+        button.sizeToFit()
+        button.alpha = 0.3
+        button.isUserInteractionEnabled = false
+        return button
+    }()
+    
+    lazy var moreButton: UIButton = {
+        let moreImage = UIImage(named: "more")
+        let button = UIButton(type: .system)
+        button.setImage(moreImage, for: .normal)
+        button.titleLabel?.minimumScaleFactor = 0.5
+        button.accessibilityIdentifier = "editor-menu-button"
+        button.accessibilityLabel = "More options"
+        button.accessibilityHint = "Double tap to see options"
+        button.addTarget(self, action: #selector(moreButtonPressed(sender:)), for: .touchUpInside)
+        button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
+        button.sizeToFit()
+        return button
+    }()
+
+    
+    @objc func undoButtonPressed(sender: UIBarButtonItem) {
+        self.onUndoPressed()
+    }
+    
+    @objc func redoButtonPressed(sender: UIBarButtonItem) {
+        self.onRedoPressed()
+    }
 
     func registerLongPressGestureRecognizer() {
         longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPress))
@@ -51,7 +106,11 @@ class GutenbergViewController: UIViewController {
 }
 
 extension GutenbergViewController: GutenbergBridgeDelegate {
-    func gutenbergDidRequestFetch(path: String, completion: @escaping (Result<Any, NSError>) -> Void) {
+    func gutenbergDidGetRequestFetch(path: String, completion: @escaping (Result<Any, NSError>) -> Void) {
+        completion(Result.success([:]))
+    }
+    
+    func gutenbergDidPostRequestFetch(path: String, data: [String: AnyObject]?, completion: @escaping (Result<Any, NSError>) -> Void) {
         completion(Result.success([:]))
     }
 
@@ -97,7 +156,8 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
                     callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video"),
                               MediaInfo(id: 4, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video")])
                 } else {
-                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup")])
+                    let metadata = ["extraID": "AbCdE"]
+                    callback([MediaInfo(id: 2, url: "https://i.cloudup.com/YtZFJbuQCE.mov", type: "video", caption: "Cloudup", metadata: metadata)])
                 }
             case .other, .any:
                  callback([MediaInfo(id: 3, url: "https://wordpress.org/latest.zip", type: "zip", caption: "WordPress latest version", title: "WordPress.zip")])
@@ -228,14 +288,6 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         callback(.success("ma.tt"))
     }
 
-    func gutenbergDidRequestMediaSaveSync() {
-        print(#function)
-    }
-
-    func gutenbergDidRequestMediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {
-        print(#function)
-    }
-
     func gutenbergDidRequestFocalPointPickerTooltipShown() -> Bool {
         return false;
     }
@@ -267,6 +319,32 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
     func gutenbergDidRequestSendEventToHost(_ eventName: String, properties: [AnyHashable: Any]) -> Void {
         print("Gutenberg requested sending '\(eventName)' event to host with propreties: \(properties).")
     }
+    
+    func gutenbergDidRequestToggleUndoButton(_ isDisabled: Bool) -> Void {
+        DispatchQueue.main.async {
+            UIView.animate(withDuration: 0.2) {
+                self.undoButton.isUserInteractionEnabled = isDisabled ? false : true
+                self.undoButton.alpha = isDisabled ? 0.3 : 1.0
+            }
+        }
+    }
+   
+    func gutenbergDidRequestToggleRedoButton(_ isDisabled: Bool) -> Void {
+        DispatchQueue.main.async {
+            UIView.animate(withDuration: 0.2) {
+                self.redoButton.isUserInteractionEnabled = isDisabled ? false : true
+                self.redoButton.alpha = isDisabled ? 0.3 : 1.0
+            }
+        }
+    }
+
+    func gutenbergDidRequestConnectionStatus() -> Bool {
+        return true
+    }
+
+    func gutenbergDidRequestLogException(_ exception: GutenbergJSException, with callback: @escaping () -> Void) {
+        print(#function)
+    }
 }
 
 extension GutenbergViewController: GutenbergWebDelegate {
@@ -290,6 +368,14 @@ extension GutenbergViewController: GutenbergWebDelegate {
 }
 
 extension GutenbergViewController: GutenbergBridgeDataSource {
+    class EditorSettings: GutenbergEditorSettings {
+        var isFSETheme: Bool = true
+        var rawStyles: String? = nil
+        var rawFeatures: String? = nil
+        var colors: [[String: String]]? = nil
+        var gradients: [[String: String]]? = nil
+    }
+    
     func gutenbergLocale() -> String? {
         return Locale.preferredLanguages.first ?? "en"
     }
@@ -299,11 +385,17 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
     }
 
     func gutenbergInitialContent() -> String? {
-        return nil
+        guard isUITesting(), let initialProps = getInitialPropsFromArgs() else {
+            return nil
+        }
+        return initialProps["initialData"]
     }
 
     func gutenbergInitialTitle() -> String? {
-        return nil
+        guard isUITesting(), let initialProps = getInitialPropsFromArgs() else {
+            return nil
+        }
+        return initialProps["initialTitle"]
     }
 
     func gutenbergHostAppNamespace() -> String {
@@ -320,14 +412,16 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .xposts: true,
             .unsupportedBlockEditor: unsupportedBlockEnabled,
             .canEnableUnsupportedBlockEditor: unsupportedBlockCanBeActivated,
-            .mediaFilesCollectionBlock: true,
             .tiledGalleryBlock: true,
+            .videoPressBlock: true,
+            .videoPressV5Support: true,
             .isAudioBlockMediaUploadEnabled: true,
             .reusableBlock: false,
             .facebookEmbed: true,
             .instagramEmbed: true,
             .loomEmbed: true,
             .smartframeEmbed: true,
+            .supportSection: true
         ]
     }
 
@@ -336,12 +430,42 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
     }
 
     func gutenbergEditorSettings() -> GutenbergEditorSettings? {
-        return nil
+        guard isUITesting(), let initialProps = getInitialPropsFromArgs() else {
+            return nil
+        }
+        let settings = EditorSettings()
+        settings.rawStyles = initialProps["rawStyles"]
+        settings.rawFeatures = initialProps["rawFeatures"]
+
+        return settings
     }
 
     func gutenbergMediaSources() -> [Gutenberg.MediaSource] {
         return [.filesApp, .otherApps]
     }
+    
+    private func isUITesting() -> Bool {
+        guard ProcessInfo.processInfo.arguments.count >= 2 else {
+            return false
+        }
+        return ProcessInfo.processInfo.arguments[1] == "uitesting"
+    }
+    
+    private func getInitialPropsFromArgs() -> [String:String]? {
+        guard ProcessInfo.processInfo.arguments.count >= 3 else {
+            return nil
+        }
+        let initialProps = ProcessInfo.processInfo.arguments[2]
+        
+        if let data = initialProps.data(using: .utf8) {
+            do {
+                return try JSONSerialization.jsonObject(with: data, options: []) as? [String: String]
+            } catch {
+                print(error.localizedDescription)
+            }
+        }
+        return nil
+    }
 }
 
 extension Gutenberg.MediaSource {
@@ -355,7 +479,22 @@ extension GutenbergViewController {
 
     func configureNavigationBar() {
         addSaveButton()
-        addMoreButton()
+        addRightButtons()
+        
+        navigationController?.navigationBar.tintColor = UIColor(named: "Primary")
+        
+        // Add a bottom border to the navigation bar
+        let borderBottom = UIView()
+        borderBottom.backgroundColor = UIColor(named: "HeaderLine")
+        borderBottom.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
+        borderBottom.frame = CGRect(
+            x: 0,
+            y: navigationController?.navigationBar.frame.height ?? 0 - (1.0 / UIScreen.main.scale),
+            width: navigationController?.navigationBar.frame.width ?? 0,
+            height: 1.0 / UIScreen.main.scale
+        )
+        
+        navigationController?.navigationBar.addSubview(borderBottom)
     }
 
     func addSaveButton() {
@@ -364,11 +503,12 @@ extension GutenbergViewController {
                                                            action: #selector(saveButtonPressed(sender:)))
     }
 
-    func addMoreButton() {
-        navigationItem.rightBarButtonItem = UIBarButtonItem(title: "...",
-                                                            style: .plain,
-                                                            target: self,
-                                                            action: #selector(moreButtonPressed(sender:)))
+    func addRightButtons() {
+        let undoButton = UIBarButtonItem(customView: self.undoButton)
+        let redoButton = UIBarButtonItem(customView: self.redoButton)
+        let moreButton = UIBarButtonItem(customView: self.moreButton)
+        
+        navigationItem.rightBarButtonItems = [moreButton, redoButton, undoButton]
     }
 }
 
@@ -452,6 +592,10 @@ extension GutenbergViewController {
     }
 
     func toggleHTMLMode(_ action: UIAlertAction) {
+        if !htmlMode {
+            self.gutenbergDidRequestToggleUndoButton(true)
+            self.gutenbergDidRequestToggleRedoButton(true)
+        }
         htmlMode = !htmlMode
         gutenberg.toggleHTMLMode()
     }
@@ -459,4 +603,12 @@ extension GutenbergViewController {
     func showEditorHelp() {
         gutenberg.showEditorHelp()
     }
+    
+    func onUndoPressed() {
+        gutenberg.onUndoPressed()
+    }
+    
+    func onRedoPressed() {
+        gutenberg.onRedoPressed()
+    }
 }
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120 1.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120 1.png
new file mode 100644
index 00000000000000..c982afc10cfa18
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120 1.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120.png
new file mode 100644
index 00000000000000..c982afc10cfa18
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/120.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/167.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/167.png
new file mode 100644
index 00000000000000..aba493ba7e459b
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/167.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/180.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/180.png
new file mode 100644
index 00000000000000..bd9f312169115f
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/180.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/80.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/80.png
new file mode 100644
index 00000000000000..a20992fdb73eec
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/80.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/Contents.json
index 9138a0eee5c1d1..6a88a653cce095 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/AppIcon.appiconset/Contents.json
@@ -2,52 +2,82 @@
 	"images": [
 		{
 			"idiom": "iphone",
-			"size": "20x20",
-			"scale": "2x"
+			"scale": "2x",
+			"size": "20x20"
 		},
 		{
 			"idiom": "iphone",
-			"size": "20x20",
-			"scale": "3x"
+			"scale": "3x",
+			"size": "20x20"
 		},
 		{
 			"idiom": "iphone",
-			"size": "29x29",
-			"scale": "2x"
+			"scale": "2x",
+			"size": "29x29"
 		},
 		{
 			"idiom": "iphone",
-			"size": "29x29",
-			"scale": "3x"
+			"scale": "3x",
+			"size": "29x29"
 		},
 		{
+			"filename": "80.png",
 			"idiom": "iphone",
-			"size": "40x40",
-			"scale": "2x"
+			"scale": "2x",
+			"size": "40x40"
 		},
 		{
+			"filename": "120.png",
 			"idiom": "iphone",
-			"size": "40x40",
-			"scale": "3x"
+			"scale": "3x",
+			"size": "40x40"
 		},
 		{
+			"filename": "120 1.png",
 			"idiom": "iphone",
-			"size": "60x60",
-			"scale": "2x"
+			"scale": "2x",
+			"size": "60x60"
 		},
 		{
+			"filename": "180.png",
 			"idiom": "iphone",
-			"size": "60x60",
-			"scale": "3x"
+			"scale": "3x",
+			"size": "60x60"
+		},
+		{
+			"idiom": "ipad",
+			"scale": "2x",
+			"size": "20x20"
+		},
+		{
+			"idiom": "ipad",
+			"scale": "2x",
+			"size": "29x29"
+		},
+		{
+			"idiom": "ipad",
+			"scale": "2x",
+			"size": "40x40"
+		},
+		{
+			"idiom": "ipad",
+			"scale": "2x",
+			"size": "76x76"
+		},
+		{
+			"filename": "167.png",
+			"idiom": "ipad",
+			"scale": "2x",
+			"size": "83.5x83.5"
 		},
 		{
 			"idiom": "ios-marketing",
-			"size": "1024x1024",
-			"scale": "1x"
+			"scale": "1x",
+			"size": "1024x1024"
 		}
 	],
 	"info": {
-		"version": 1,
-		"author": "xcode"
+		"author": "xcode",
+		"version": 1
 	}
 }
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/Contents.json
index 9a38aea4a8b791..d458f1c5928f7d 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/Contents.json
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/Contents.json
@@ -1,6 +1,6 @@
 {
 	"info": {
-		"version": 1,
-		"author": "xcode"
+		"author": "xcode",
+		"version": 1
 	}
 }
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/Contents.json
new file mode 100644
index 00000000000000..4ac8d3b08a30f9
--- /dev/null
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+	"images": [
+		{
+			"filename": "GutenbergLogo.png",
+			"idiom": "universal",
+			"scale": "1x"
+		},
+		{
+			"filename": "GutenbergLogo@2x.png",
+			"idiom": "universal",
+			"scale": "2x"
+		},
+		{
+			"filename": "GutenbergLogo@3x.png",
+			"idiom": "universal",
+			"scale": "3x"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo.png
new file mode 100644
index 00000000000000..98cdf056bada2a
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@2x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@2x.png
new file mode 100644
index 00000000000000..e499f955231253
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@2x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@3x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@3x.png
new file mode 100644
index 00000000000000..a6f69b7a1f9ad2
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/GutenbergLogo.imageset/GutenbergLogo@3x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/Contents.json
new file mode 100644
index 00000000000000..a7ab9ab17cc084
--- /dev/null
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+	"images": [
+		{
+			"filename": "editor-more.png",
+			"idiom": "universal",
+			"scale": "1x"
+		},
+		{
+			"filename": "editor-more@2x.png",
+			"idiom": "universal",
+			"scale": "2x"
+		},
+		{
+			"filename": "editor-more@3x.png",
+			"idiom": "universal",
+			"scale": "3x"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more.png
new file mode 100644
index 00000000000000..50ae464cf9a0bd
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@2x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@2x.png
new file mode 100644
index 00000000000000..50f8ba4fa2991d
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@2x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@3x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@3x.png
new file mode 100644
index 00000000000000..933dee6311d135
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/more.imageset/editor-more@3x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/Contents.json
new file mode 100644
index 00000000000000..87d8d6ddf04bd8
--- /dev/null
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+	"images": [
+		{
+			"filename": "redo.png",
+			"idiom": "universal",
+			"scale": "1x"
+		},
+		{
+			"filename": "redo@2x.png",
+			"idiom": "universal",
+			"scale": "2x"
+		},
+		{
+			"filename": "redo@3x.png",
+			"idiom": "universal",
+			"scale": "3x"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo.png
new file mode 100644
index 00000000000000..d7c40357de3319
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@2x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@2x.png
new file mode 100644
index 00000000000000..7fcc8387ad5d98
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@2x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@3x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@3x.png
new file mode 100644
index 00000000000000..4bba41d8298731
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/redo.imageset/redo@3x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/Contents.json b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/Contents.json
new file mode 100644
index 00000000000000..e6ba640f73e246
--- /dev/null
+++ b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+	"images": [
+		{
+			"filename": "undo.png",
+			"idiom": "universal",
+			"scale": "1x"
+		},
+		{
+			"filename": "undo@2x.png",
+			"idiom": "universal",
+			"scale": "2x"
+		},
+		{
+			"filename": "undo@3x.png",
+			"idiom": "universal",
+			"scale": "3x"
+		}
+	],
+	"info": {
+		"author": "xcode",
+		"version": 1
+	}
+}
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo.png
new file mode 100644
index 00000000000000..5fde404937bb98
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@2x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@2x.png
new file mode 100644
index 00000000000000..8fb11c970db0bc
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@2x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@3x.png b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@3x.png
new file mode 100644
index 00000000000000..15703e1b6d6367
Binary files /dev/null and b/packages/react-native-editor/ios/GutenbergDemo/Images.xcassets/undo.imageset/undo@3x.png differ
diff --git a/packages/react-native-editor/ios/GutenbergDemo/Info.plist b/packages/react-native-editor/ios/GutenbergDemo/Info.plist
index 3929cb00cf60bf..5d511120c2c503 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/Info.plist
+++ b/packages/react-native-editor/ios/GutenbergDemo/Info.plist
@@ -17,23 +17,19 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1</string>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<false/>
+		<key>NSAllowsLocalNetworking</key>
+		<true/>
 	</dict>
 	<key>NSCameraUsageDescription</key>
 	<string>To take photos or videos to use in your posts.</string>
diff --git a/packages/react-native-editor/ios/GutenbergDemo/MediaUploadCoordinator.swift b/packages/react-native-editor/ios/GutenbergDemo/MediaUploadCoordinator.swift
index 2655af936b466b..e9183d33c70d02 100644
--- a/packages/react-native-editor/ios/GutenbergDemo/MediaUploadCoordinator.swift
+++ b/packages/react-native-editor/ios/GutenbergDemo/MediaUploadCoordinator.swift
@@ -70,7 +70,7 @@ class MediaUploadCoordinator: NSObject {
     if !successfullUpload {
       timer.invalidate()
       progress.setUserInfoObject("Network upload failed", forKey: .mediaError)
-      gutenberg.mediaUploadUpdate(id: mediaID, state: .failed, progress: 1, url: nil, serverID: nil)
+      gutenberg.mediaUploadUpdate(id: mediaID, state: .failed, progress: 1, url: nil, serverID: nil, metadata: ["demoApp" : true, "failReason" : "Network upload failed"])
       successfullUpload = true
       return
     }
@@ -80,7 +80,7 @@ class MediaUploadCoordinator: NSObject {
       gutenberg.mediaUploadUpdate(id: mediaID, state: .uploading, progress: Float(progress.fractionCompleted), url: nil, serverID: nil)
     } else if progress.fractionCompleted >= 1 {
       timer.invalidate()
-      gutenberg.mediaUploadUpdate(id: mediaID, state: .succeeded, progress: 1, url: mediaURL, serverID: mediaID)
+      gutenberg.mediaUploadUpdate(id: mediaID, state: .succeeded, progress: 1, url: mediaURL, serverID: mediaID, metadata: ["demoApp" : true])
       activeUploads[mediaID] = nil
     }
   }
diff --git a/packages/react-native-editor/ios/LaunchScreen.storyboard b/packages/react-native-editor/ios/LaunchScreen.storyboard
index 8306f30bc23285..d472b72a5ae627 100644
--- a/packages/react-native-editor/ios/LaunchScreen.storyboard
+++ b/packages/react-native-editor/ios/LaunchScreen.storyboard
@@ -1,8 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13142" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12042"/>
-        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21679"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -12,37 +13,31 @@
             <objects>
                 <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                     <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Copyright © 2021 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
-                                <rect key="frame" x="0.0" y="626.5" width="375" height="20.5"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="GutenbergDemo" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
-                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="GutenbergLogo" translatesAutoresizingMaskIntoConstraints="NO" id="ncC-dB-TVp">
+                                <rect key="frame" x="161.66666666666666" y="391" width="70" height="70"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="70" id="VX0-jg-Cfg"/>
+                                    <constraint firstAttribute="height" constant="70" id="aFA-Ec-hdU"/>
+                                </constraints>
+                            </imageView>
                         </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
-                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="SfN-ll-jLj"/>
-                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" constant="20" symbolic="YES" id="x7j-FC-K8j"/>
+                            <constraint firstItem="ncC-dB-TVp" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="8EG-mg-H5D"/>
+                            <constraint firstItem="ncC-dB-TVp" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="gmp-Oa-mLP"/>
                         </constraints>
-                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="53" y="375"/>
+            <point key="canvasLocation" x="52.671755725190835" y="374.64788732394368"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="GutenbergLogo" width="90" height="90"/>
+    </resources>
 </document>
diff --git a/packages/react-native-editor/ios/Podfile b/packages/react-native-editor/ios/Podfile
index a06d86872cc6d8..98187435f5b457 100644
--- a/packages/react-native-editor/ios/Podfile
+++ b/packages/react-native-editor/ios/Podfile
@@ -1,21 +1,51 @@
 project 'GutenbergDemo.xcodeproj'
 
-require_relative '../../../node_modules/react-native/scripts/react_native_pods'
-require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules'
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip
 
 # Uncomment the next line to define a global platform for your project
-app_ios_deployment_target = Gem::Version.new('13.0')
+app_ios_deployment_target = Gem::Version.new('13.4')
 platform :ios, app_ios_deployment_target.version
+install! 'cocoapods', min_ios_version_supported
+prepare_react_native_project!
+
+# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
+# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
+#
+# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
+# ```js
+# module.exports = {
+#   dependencies: {
+#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
+# ```
+flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
+
+linkage = ENV['USE_FRAMEWORKS']
+if linkage != nil
+  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
+  use_frameworks! :linkage => linkage.to_sym
+end
 
 target 'GutenbergDemo' do
   # Comment the next line if you don't want to use dynamic frameworks
-  use_frameworks!
+  use_frameworks! linkage: :static
 
   config = use_native_modules!
+
   use_react_native!(
     :path => config[:reactNativePath],
-    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => false
+    :fabric_enabled => false,
+    # Enables Flipper.
+    #
+    # Note that if you have use_frameworks! enabled, Flipper will not work and
+    # you should disable the next line.
+    # :flipper_configuration => flipper_config,
+    # An absolute path to the application root
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
   target 'GutenbergDemoTests' do
@@ -24,8 +54,12 @@ target 'GutenbergDemo' do
   end
 
   post_install do |installer|
-    react_native_post_install(installer)
-    __apply_Xcode_12_5_M1_post_install_workaround(installer)
+    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false
+    )
 
     # Let Pods targets inherit deployment target from the app
     # This solution is suggested here: https://github.com/CocoaPods/CocoaPods/issues/4859
@@ -58,16 +92,16 @@ target 'GutenbergDemo' do
         end
       end
     end
-		### End workaround for https://github.com/facebook/react-native/issues/31034
+    ### End workaround for https://github.com/facebook/react-native/issues/31034
 
-		### Begin workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
-		installer.pods_project.targets.each do |target|
-			if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
-				target.build_configurations.each do |config|
-						config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
-				end
-			end
-		end
-		### End workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
+    ### Begin workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
+    installer.pods_project.targets.each do |target|
+    	if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+        target.build_configurations.each do |config|
+            config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+        end
+    	end
+    end
+    ### End workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
   end
 end
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 2acf1d6734b88c..67dd8345fe5ac7 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -1,365 +1,1125 @@
 PODS:
-  - boost (1.76.0)
-  - BVLinearGradient (2.5.6-wp-3):
+  - boost (1.83.0)
+  - BVLinearGradient (2.7.3):
     - React-Core
   - DoubleConversion (1.1.6)
-  - FBLazyVector (0.66.2)
-  - FBReactNativeSpec (0.66.2):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.66.2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
+  - FBLazyVector (0.73.3)
+  - FBReactNativeSpec (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTRequired (= 0.73.3)
+    - RCTTypeSafety (= 0.73.3)
+    - React-Core (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - ReactCommon/turbomodule/core (= 0.73.3)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.85.0):
-    - React-Core (= 0.66.2)
-    - React-CoreModules (= 0.66.2)
-    - React-RCTImage (= 0.66.2)
+  - Gutenberg (1.121.0):
+    - React-Core (= 0.73.3)
+    - React-CoreModules (= 0.73.3)
+    - React-RCTImage (= 0.73.3)
     - RNTAztecView
-  - libwebp (1.2.1):
-    - libwebp/demux (= 1.2.1)
-    - libwebp/mux (= 1.2.1)
-    - libwebp/webp (= 1.2.1)
-  - libwebp/demux (1.2.1):
+  - hermes-engine (0.73.3):
+    - hermes-engine/Pre-built (= 0.73.3)
+  - hermes-engine/Pre-built (0.73.3)
+  - libevent (2.1.12)
+  - libwebp (1.2.3):
+    - libwebp/demux (= 1.2.3)
+    - libwebp/mux (= 1.2.3)
+    - libwebp/webp (= 1.2.3)
+  - libwebp/demux (1.2.3):
     - libwebp/webp
-  - libwebp/mux (1.2.1):
+  - libwebp/mux (1.2.3):
     - libwebp/demux
-  - libwebp/webp (1.2.1)
-  - RCT-Folly (2021.06.28.00-v2):
+  - libwebp/webp (1.2.3)
+  - RCT-Folly (2022.05.16.00):
     - boost
     - DoubleConversion
     - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly/Default (= 2021.06.28.00-v2)
-  - RCT-Folly/Default (2021.06.28.00-v2):
+    - RCT-Folly/Default (= 2022.05.16.00)
+  - RCT-Folly/Default (2022.05.16.00):
     - boost
     - DoubleConversion
     - fmt (~> 6.2.1)
     - glog
-  - RCTRequired (0.66.2)
-  - RCTTypeSafety (0.66.2):
-    - FBLazyVector (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.66.2)
-    - React-Core (= 0.66.2)
-  - React (0.66.2):
-    - React-Core (= 0.66.2)
-    - React-Core/DevSupport (= 0.66.2)
-    - React-Core/RCTWebSocket (= 0.66.2)
-    - React-RCTActionSheet (= 0.66.2)
-    - React-RCTAnimation (= 0.66.2)
-    - React-RCTBlob (= 0.66.2)
-    - React-RCTImage (= 0.66.2)
-    - React-RCTLinking (= 0.66.2)
-    - React-RCTNetwork (= 0.66.2)
-    - React-RCTSettings (= 0.66.2)
-    - React-RCTText (= 0.66.2)
-    - React-RCTVibration (= 0.66.2)
-  - React-callinvoker (0.66.2)
-  - React-Core (0.66.2):
-    - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+  - RCT-Folly/Fabric (2022.05.16.00):
+    - boost
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+  - RCT-Folly/Futures (2022.05.16.00):
+    - boost
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - libevent
+  - RCTRequired (0.73.3)
+  - RCTTypeSafety (0.73.3):
+    - FBLazyVector (= 0.73.3)
+    - RCTRequired (= 0.73.3)
+    - React-Core (= 0.73.3)
+  - React (0.73.3):
+    - React-Core (= 0.73.3)
+    - React-Core/DevSupport (= 0.73.3)
+    - React-Core/RCTWebSocket (= 0.73.3)
+    - React-RCTActionSheet (= 0.73.3)
+    - React-RCTAnimation (= 0.73.3)
+    - React-RCTBlob (= 0.73.3)
+    - React-RCTImage (= 0.73.3)
+    - React-RCTLinking (= 0.73.3)
+    - React-RCTNetwork (= 0.73.3)
+    - React-RCTSettings (= 0.73.3)
+    - React-RCTText (= 0.73.3)
+    - React-RCTVibration (= 0.73.3)
+  - React-callinvoker (0.73.3)
+  - React-Codegen (0.73.3):
+    - DoubleConversion
+    - FBReactNativeSpec
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-jsi
+    - React-jsiexecutor
+    - React-NativeModulesApple
+    - React-rncore
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+  - React-Core (0.73.3):
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core/Default (= 0.73.3)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/CoreModulesHeaders (0.66.2):
+  - React-Core/CoreModulesHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/Default (0.66.2):
+  - React-Core/Default (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/DevSupport (0.66.2):
-    - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.2)
-    - React-Core/RCTWebSocket (= 0.66.2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-jsinspector (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+  - React-Core/DevSupport (0.73.3):
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core/Default (= 0.73.3)
+    - React-Core/RCTWebSocket (= 0.73.3)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector (= 0.73.3)
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.66.2):
+  - React-Core/RCTActionSheetHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.66.2):
+  - React-Core/RCTAnimationHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTBlobHeaders (0.66.2):
+  - React-Core/RCTBlobHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTImageHeaders (0.66.2):
+  - React-Core/RCTImageHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.66.2):
+  - React-Core/RCTLinkingHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.66.2):
+  - React-Core/RCTNetworkHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.66.2):
+  - React-Core/RCTSettingsHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTTextHeaders (0.66.2):
+  - React-Core/RCTTextHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.66.2):
+  - React-Core/RCTVibrationHeaders (0.73.3):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core/Default
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-Core/RCTWebSocket (0.66.2):
-    - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.66.2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsiexecutor (= 0.66.2)
-    - React-perflogger (= 0.66.2)
+  - React-Core/RCTWebSocket (0.73.3):
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core/Default (= 0.73.3)
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-perflogger
+    - React-runtimescheduler
+    - React-utils
+    - SocketRocket (= 0.6.1)
     - Yoga
-  - React-CoreModules (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core/CoreModulesHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-RCTImage (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-cxxreact (0.66.2):
-    - boost (= 1.76.0)
+  - React-CoreModules (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTTypeSafety (= 0.73.3)
+    - React-Codegen
+    - React-Core/CoreModulesHeaders (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-NativeModulesApple
+    - React-RCTBlob
+    - React-RCTImage (= 0.73.3)
+    - ReactCommon
+    - SocketRocket (= 0.6.1)
+  - React-cxxreact (0.73.3):
+    - boost (= 1.83.0)
     - DoubleConversion
+    - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-jsinspector (= 0.66.2)
-    - React-logger (= 0.66.2)
-    - React-perflogger (= 0.66.2)
-    - React-runtimeexecutor (= 0.66.2)
-  - React-jsi (0.66.2):
-    - boost (= 1.76.0)
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-callinvoker (= 0.73.3)
+    - React-debug (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-jsinspector (= 0.73.3)
+    - React-logger (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+    - React-runtimeexecutor (= 0.73.3)
+  - React-debug (0.73.3)
+  - React-Fabric (0.73.3):
     - DoubleConversion
+    - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi/Default (= 0.66.2)
-  - React-jsi/Default (0.66.2):
-    - boost (= 1.76.0)
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-Fabric/animations (= 0.73.3)
+    - React-Fabric/attributedstring (= 0.73.3)
+    - React-Fabric/componentregistry (= 0.73.3)
+    - React-Fabric/componentregistrynative (= 0.73.3)
+    - React-Fabric/components (= 0.73.3)
+    - React-Fabric/core (= 0.73.3)
+    - React-Fabric/imagemanager (= 0.73.3)
+    - React-Fabric/leakchecker (= 0.73.3)
+    - React-Fabric/mounting (= 0.73.3)
+    - React-Fabric/scheduler (= 0.73.3)
+    - React-Fabric/telemetry (= 0.73.3)
+    - React-Fabric/templateprocessor (= 0.73.3)
+    - React-Fabric/textlayoutmanager (= 0.73.3)
+    - React-Fabric/uimanager (= 0.73.3)
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/animations (0.73.3):
     - DoubleConversion
+    - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-  - React-jsiexecutor (0.66.2):
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/attributedstring (0.73.3):
     - DoubleConversion
+    - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-perflogger (= 0.66.2)
-  - React-jsinspector (0.66.2)
-  - React-logger (0.66.2):
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/componentregistry (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
     - glog
-  - react-native-blur (0.8.0):
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - react-native-get-random-values (1.4.0):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/componentregistrynative (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - react-native-keyboard-aware-scroll-view (0.8.8-wp-1):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - react-native-safe-area (0.5.1):
+    - React-cxxreact
+    - React-debug
+    - React-Fabric/components/inputaccessory (= 0.73.3)
+    - React-Fabric/components/legacyviewmanagerinterop (= 0.73.3)
+    - React-Fabric/components/modal (= 0.73.3)
+    - React-Fabric/components/rncore (= 0.73.3)
+    - React-Fabric/components/root (= 0.73.3)
+    - React-Fabric/components/safeareaview (= 0.73.3)
+    - React-Fabric/components/scrollview (= 0.73.3)
+    - React-Fabric/components/text (= 0.73.3)
+    - React-Fabric/components/textinput (= 0.73.3)
+    - React-Fabric/components/unimplementedview (= 0.73.3)
+    - React-Fabric/components/view (= 0.73.3)
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/inputaccessory (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - react-native-safe-area-context (3.2.0):
-    - React-Core
-  - react-native-slider (3.0.2-wp-3):
-    - React-Core
-  - react-native-video (5.2.0-wp-4):
-    - React-Core
-    - react-native-video/Video (= 5.2.0-wp-4)
-  - react-native-video/Video (5.2.0-wp-4):
-    - React-Core
-  - react-native-webview (11.6.2):
-    - React-Core
-  - React-perflogger (0.66.2)
-  - React-RCTActionSheet (0.66.2):
-    - React-Core/RCTActionSheetHeaders (= 0.66.2)
-  - React-RCTAnimation (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core/RCTAnimationHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTBlob (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTBlobHeaders (= 0.66.2)
-    - React-Core/RCTWebSocket (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-RCTNetwork (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTImage (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core/RCTImageHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-RCTNetwork (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTLinking (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - React-Core/RCTLinkingHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTNetwork (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core/RCTNetworkHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTSettings (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.66.2)
-    - React-Core/RCTSettingsHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-RCTText (0.66.2):
-    - React-Core/RCTTextHeaders (= 0.66.2)
-  - React-RCTVibration (0.66.2):
-    - FBReactNativeSpec (= 0.66.2)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/RCTVibrationHeaders (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - ReactCommon/turbomodule/core (= 0.66.2)
-  - React-runtimeexecutor (0.66.2):
-    - React-jsi (= 0.66.2)
-  - ReactCommon/turbomodule/core (0.66.2):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.66.2)
-    - React-Core (= 0.66.2)
-    - React-cxxreact (= 0.66.2)
-    - React-jsi (= 0.66.2)
-    - React-logger (= 0.66.2)
-    - React-perflogger (= 0.66.2)
-  - RNCClipboard (1.9.0):
-    - React-Core
-  - RNCMaskedView (0.2.6):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/legacyviewmanagerinterop (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - RNFastImage (8.5.11):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/modal (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-    - SDWebImage (~> 5.11.1)
-    - SDWebImageWebPCoder (~> 0.8.4)
-  - RNGestureHandler (2.3.2-wp-2):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/rncore (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/root (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - RNReanimated (2.4.1-wp-4):
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/safeareaview (0.73.3):
     - DoubleConversion
-    - FBLazyVector
-    - FBReactNativeSpec
+    - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
     - RCTRequired
     - RCTTypeSafety
-    - React-callinvoker
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
     - React-cxxreact
+    - React-debug
+    - React-graphics
     - React-jsi
     - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTBlob
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/scrollview (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/text (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/textinput (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/unimplementedview (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/components/view (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - React-Fabric/core (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/imagemanager (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/leakchecker (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/mounting (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/scheduler (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/telemetry (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/templateprocessor (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/textlayoutmanager (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-Fabric/uimanager
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-Fabric/uimanager (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-cxxreact
+    - React-debug
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+  - React-FabricImage (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - RCTRequired (= 0.73.3)
+    - RCTTypeSafety (= 0.73.3)
+    - React-Fabric
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-jsiexecutor (= 0.73.3)
+    - React-logger
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon
+    - Yoga
+  - React-graphics (0.73.3):
+    - glog
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - React-Core/Default (= 0.73.3)
+    - React-utils
+  - React-hermes (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - RCT-Folly/Futures (= 2022.05.16.00)
+    - React-cxxreact (= 0.73.3)
+    - React-jsi
+    - React-jsiexecutor (= 0.73.3)
+    - React-jsinspector (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+  - React-ImageManager (0.73.3):
+    - glog
+    - RCT-Folly/Fabric
+    - React-Core/Default
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-rendererdebug
+    - React-utils
+  - React-jserrorhandler (0.73.3):
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - React-debug
+    - React-jsi
+    - React-Mapbuffer
+  - React-jsi (0.73.3):
+    - boost (= 1.83.0)
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+  - React-jsiexecutor (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-cxxreact (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+  - React-jsinspector (0.73.3)
+  - React-logger (0.73.3):
+    - glog
+  - React-Mapbuffer (0.73.3):
+    - glog
+    - React-debug
+  - react-native-blur (4.2.0):
+    - React-Core
+  - react-native-get-random-values (1.4.0):
+    - React-Core
+  - react-native-safe-area (0.5.1):
+    - React-Core
+  - react-native-safe-area-context (4.8.2):
+    - React-Core
+  - react-native-slider (3.0.2-wp-4):
+    - React-Core
+  - react-native-video (5.2.0-wp-7):
+    - React-Core
+    - react-native-video/Video (= 5.2.0-wp-7)
+  - react-native-video/Video (5.2.0-wp-7):
+    - React-Core
+  - react-native-webview (13.6.1):
+    - React-Core
+  - React-nativeconfig (0.73.3)
+  - React-NativeModulesApple (0.73.3):
+    - glog
+    - hermes-engine
+    - React-callinvoker
+    - React-Core
+    - React-cxxreact
+    - React-jsi
+    - React-runtimeexecutor
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+  - React-perflogger (0.73.3)
+  - React-RCTActionSheet (0.73.3):
+    - React-Core/RCTActionSheetHeaders (= 0.73.3)
+  - React-RCTAnimation (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core/RCTAnimationHeaders
+    - React-jsi
+    - React-NativeModulesApple
+    - ReactCommon
+  - React-RCTAppDelegate (0.73.3):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-CoreModules
+    - React-hermes
+    - React-nativeconfig
+    - React-NativeModulesApple
+    - React-RCTFabric
     - React-RCTImage
-    - React-RCTLinking
     - React-RCTNetwork
-    - React-RCTSettings
+    - React-runtimescheduler
+    - ReactCommon
+  - React-RCTBlob (0.73.3):
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Codegen
+    - React-Core/RCTBlobHeaders
+    - React-Core/RCTWebSocket
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTNetwork
+    - ReactCommon
+  - React-RCTFabric (0.73.3):
+    - glog
+    - hermes-engine
+    - RCT-Folly/Fabric (= 2022.05.16.00)
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-FabricImage
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-nativeconfig
+    - React-RCTImage
     - React-RCTText
-    - ReactCommon/turbomodule/core
+    - React-rendererdebug
+    - React-runtimescheduler
+    - React-utils
+    - Yoga
+  - React-RCTImage (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core/RCTImageHeaders
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTNetwork
+    - ReactCommon
+  - React-RCTLinking (0.73.3):
+    - React-Codegen
+    - React-Core/RCTLinkingHeaders (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-NativeModulesApple
+    - ReactCommon
+    - ReactCommon/turbomodule/core (= 0.73.3)
+  - React-RCTNetwork (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core/RCTNetworkHeaders
+    - React-jsi
+    - React-NativeModulesApple
+    - ReactCommon
+  - React-RCTSettings (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core/RCTSettingsHeaders
+    - React-jsi
+    - React-NativeModulesApple
+    - ReactCommon
+  - React-RCTText (0.73.3):
+    - React-Core/RCTTextHeaders (= 0.73.3)
     - Yoga
-  - RNScreens (2.9.0):
+  - React-RCTVibration (0.73.3):
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Codegen
+    - React-Core/RCTVibrationHeaders
+    - React-jsi
+    - React-NativeModulesApple
+    - ReactCommon
+  - React-rendererdebug (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - RCT-Folly (= 2022.05.16.00)
+    - React-debug
+  - React-rncore (0.73.3)
+  - React-runtimeexecutor (0.73.3):
+    - React-jsi (= 0.73.3)
+  - React-runtimescheduler (0.73.3):
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-callinvoker
+    - React-cxxreact
+    - React-debug
+    - React-jsi
+    - React-rendererdebug
+    - React-runtimeexecutor
+    - React-utils
+  - React-utils (0.73.3):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-debug
+  - ReactCommon (0.73.3):
+    - React-logger (= 0.73.3)
+    - ReactCommon/turbomodule (= 0.73.3)
+  - ReactCommon/turbomodule (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-callinvoker (= 0.73.3)
+    - React-cxxreact (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-logger (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+    - ReactCommon/turbomodule/bridging (= 0.73.3)
+    - ReactCommon/turbomodule/core (= 0.73.3)
+  - ReactCommon/turbomodule/bridging (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-callinvoker (= 0.73.3)
+    - React-cxxreact (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-logger (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+  - ReactCommon/turbomodule/core (0.73.3):
+    - DoubleConversion
+    - fmt (~> 6.2.1)
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2022.05.16.00)
+    - React-callinvoker (= 0.73.3)
+    - React-cxxreact (= 0.73.3)
+    - React-jsi (= 0.73.3)
+    - React-logger (= 0.73.3)
+    - React-perflogger (= 0.73.3)
+  - RNCClipboard (1.11.2):
+    - React-Core
+  - RNCMaskedView (0.3.0):
     - React-Core
-  - RNSVG (9.13.6):
+  - RNFastImage (8.5.11):
     - React-Core
-  - RNTAztecView (1.85.0):
+    - SDWebImage (~> 5.11.1)
+    - SDWebImageWebPCoder (~> 0.8.4)
+  - RNGestureHandler (2.14.1):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
     - React-Core
-    - WordPress-Aztec-iOS (~> 1.19.8)
+  - RNReanimated (3.6.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+    - ReactCommon/turbomodule/core
+  - RNScreens (3.29.0):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
+  - RNSVG (14.0.0):
+    - React-Core
+  - RNTAztecView (1.121.0):
+    - React-Core
+    - WordPress-Aztec-iOS (= 1.19.11)
   - SDWebImage (5.11.1):
     - SDWebImage/Core (= 5.11.1)
   - SDWebImage/Core (5.11.1)
   - SDWebImageWebPCoder (0.8.5):
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
-  - WordPress-Aztec-iOS (1.19.8)
+  - SocketRocket (0.6.1)
+  - WordPress-Aztec-iOS (1.19.11)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -370,39 +1130,57 @@ DEPENDENCIES:
   - FBReactNativeSpec (from `../../../node_modules/react-native/React/FBReactNativeSpec`)
   - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - Gutenberg (from `../../react-native-bridge`)
+  - hermes-engine (from `../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - libevent (~> 2.1.12)
   - RCT-Folly (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
+  - RCT-Folly/Fabric (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../../../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../../../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../../../node_modules/react-native/`)
   - React-callinvoker (from `../../../node_modules/react-native/ReactCommon/callinvoker`)
+  - React-Codegen (from `build/generated/ios`)
   - React-Core (from `../../../node_modules/react-native/`)
-  - React-Core/DevSupport (from `../../../node_modules/react-native/`)
   - React-Core/RCTWebSocket (from `../../../node_modules/react-native/`)
   - React-CoreModules (from `../../../node_modules/react-native/React/CoreModules`)
   - React-cxxreact (from `../../../node_modules/react-native/ReactCommon/cxxreact`)
+  - React-debug (from `../../../node_modules/react-native/ReactCommon/react/debug`)
+  - React-Fabric (from `../../../node_modules/react-native/ReactCommon`)
+  - React-FabricImage (from `../../../node_modules/react-native/ReactCommon`)
+  - React-graphics (from `../../../node_modules/react-native/ReactCommon/react/renderer/graphics`)
+  - React-hermes (from `../../../node_modules/react-native/ReactCommon/hermes`)
+  - React-ImageManager (from `../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
+  - React-jserrorhandler (from `../../../node_modules/react-native/ReactCommon/jserrorhandler`)
   - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
-  - React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector`)
+  - React-jsinspector (from `../../../node_modules/react-native/ReactCommon/jsinspector-modern`)
   - React-logger (from `../../../node_modules/react-native/ReactCommon/logger`)
+  - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
   - "react-native-blur (from `../../../node_modules/@react-native-community/blur`)"
   - react-native-get-random-values (from `../../../node_modules/react-native-get-random-values`)
-  - react-native-keyboard-aware-scroll-view (from `../../../node_modules/react-native-keyboard-aware-scroll-view`)
   - react-native-safe-area (from `../../../node_modules/react-native-safe-area`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../../../node_modules/@react-native-community/slider`)"
   - react-native-video (from `../../../node_modules/react-native-video`)
   - react-native-webview (from `../../../node_modules/react-native-webview`)
+  - React-nativeconfig (from `../../../node_modules/react-native/ReactCommon`)
+  - React-NativeModulesApple (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../../../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../../../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../../../node_modules/react-native/Libraries/NativeAnimation`)
+  - React-RCTAppDelegate (from `../../../node_modules/react-native/Libraries/AppDelegate`)
   - React-RCTBlob (from `../../../node_modules/react-native/Libraries/Blob`)
+  - React-RCTFabric (from `../../../node_modules/react-native/React`)
   - React-RCTImage (from `../../../node_modules/react-native/Libraries/Image`)
   - React-RCTLinking (from `../../../node_modules/react-native/Libraries/LinkingIOS`)
   - React-RCTNetwork (from `../../../node_modules/react-native/Libraries/Network`)
   - React-RCTSettings (from `../../../node_modules/react-native/Libraries/Settings`)
   - React-RCTText (from `../../../node_modules/react-native/Libraries/Text`)
   - React-RCTVibration (from `../../../node_modules/react-native/Libraries/Vibration`)
+  - React-rendererdebug (from `../../../node_modules/react-native/ReactCommon/react/renderer/debug`)
+  - React-rncore (from `../../../node_modules/react-native/ReactCommon`)
   - React-runtimeexecutor (from `../../../node_modules/react-native/ReactCommon/runtimeexecutor`)
+  - React-runtimescheduler (from `../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
+  - React-utils (from `../../../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - "RNCClipboard (from `../../../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../../../node_modules/@react-native-masked-view/masked-view`)"
@@ -417,9 +1195,11 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - fmt
+    - libevent
     - libwebp
     - SDWebImage
     - SDWebImageWebPCoder
+    - SocketRocket
     - WordPress-Aztec-iOS
 
 EXTERNAL SOURCES:
@@ -437,6 +1217,9 @@ EXTERNAL SOURCES:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
   Gutenberg:
     :path: "../../react-native-bridge"
+  hermes-engine:
+    :podspec: "../../../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
+    :tag: hermes-2023-11-17-RNv0.73.0-21043a3fc062be445e56a2c10ecd8be028dd9cc5
   RCT-Folly:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -447,26 +1230,42 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/"
   React-callinvoker:
     :path: "../../../node_modules/react-native/ReactCommon/callinvoker"
+  React-Codegen:
+    :path: build/generated/ios
   React-Core:
     :path: "../../../node_modules/react-native/"
   React-CoreModules:
     :path: "../../../node_modules/react-native/React/CoreModules"
   React-cxxreact:
     :path: "../../../node_modules/react-native/ReactCommon/cxxreact"
+  React-debug:
+    :path: "../../../node_modules/react-native/ReactCommon/react/debug"
+  React-Fabric:
+    :path: "../../../node_modules/react-native/ReactCommon"
+  React-FabricImage:
+    :path: "../../../node_modules/react-native/ReactCommon"
+  React-graphics:
+    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/graphics"
+  React-hermes:
+    :path: "../../../node_modules/react-native/ReactCommon/hermes"
+  React-ImageManager:
+    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios"
+  React-jserrorhandler:
+    :path: "../../../node_modules/react-native/ReactCommon/jserrorhandler"
   React-jsi:
     :path: "../../../node_modules/react-native/ReactCommon/jsi"
   React-jsiexecutor:
     :path: "../../../node_modules/react-native/ReactCommon/jsiexecutor"
   React-jsinspector:
-    :path: "../../../node_modules/react-native/ReactCommon/jsinspector"
+    :path: "../../../node_modules/react-native/ReactCommon/jsinspector-modern"
   React-logger:
     :path: "../../../node_modules/react-native/ReactCommon/logger"
+  React-Mapbuffer:
+    :path: "../../../node_modules/react-native/ReactCommon"
   react-native-blur:
     :path: "../../../node_modules/@react-native-community/blur"
   react-native-get-random-values:
     :path: "../../../node_modules/react-native-get-random-values"
-  react-native-keyboard-aware-scroll-view:
-    :path: "../../../node_modules/react-native-keyboard-aware-scroll-view"
   react-native-safe-area:
     :path: "../../../node_modules/react-native-safe-area"
   react-native-safe-area-context:
@@ -477,14 +1276,22 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-video"
   react-native-webview:
     :path: "../../../node_modules/react-native-webview"
+  React-nativeconfig:
+    :path: "../../../node_modules/react-native/ReactCommon"
+  React-NativeModulesApple:
+    :path: "../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
     :path: "../../../node_modules/react-native/ReactCommon/reactperflogger"
   React-RCTActionSheet:
     :path: "../../../node_modules/react-native/Libraries/ActionSheetIOS"
   React-RCTAnimation:
     :path: "../../../node_modules/react-native/Libraries/NativeAnimation"
+  React-RCTAppDelegate:
+    :path: "../../../node_modules/react-native/Libraries/AppDelegate"
   React-RCTBlob:
     :path: "../../../node_modules/react-native/Libraries/Blob"
+  React-RCTFabric:
+    :path: "../../../node_modules/react-native/React"
   React-RCTImage:
     :path: "../../../node_modules/react-native/Libraries/Image"
   React-RCTLinking:
@@ -497,8 +1304,16 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/Libraries/Text"
   React-RCTVibration:
     :path: "../../../node_modules/react-native/Libraries/Vibration"
+  React-rendererdebug:
+    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/debug"
+  React-rncore:
+    :path: "../../../node_modules/react-native/ReactCommon"
   React-runtimeexecutor:
     :path: "../../../node_modules/react-native/ReactCommon/runtimeexecutor"
+  React-runtimescheduler:
+    :path: "../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler"
+  React-utils:
+    :path: "../../../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
   RNCClipboard:
@@ -521,60 +1336,79 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
-  BVLinearGradient: ace34fab72158c068ae989a0ebdbf86cb4ef0e49
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
-  FBLazyVector: 57a8b34460679fb69e1ce7d625b04dbd1596b1f1
-  FBReactNativeSpec: 18438b1c04ce502ed681cd19db3f4508964c082a
+  boost: d3f49c53809116a5d38da093a8aa78bf551aed09
+  BVLinearGradient: fbe308a1d19a8133f69e033abc85d8008644f5e3
+  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  FBLazyVector: 70590b4f9e8ae9b0ce076efacea3abd7bc585ace
+  FBReactNativeSpec: 73b3972e2bd20b3235ff2014f06a3d3af675ed29
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 5337263514dd6f09803962437687240c5dc39aa4
-  Gutenberg: be3183da7eac3f9976b6705d209575564c7ff5cb
-  libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
-  RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
-  RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a
-  RCTTypeSafety: aba333d04d88d1f954e93666a08d7ae57a87ab30
-  React: a8f119296b97812f73af5ae0eb1f26cf262ae4b4
-  React-callinvoker: ce22372414af68085a32174d5dfbd41ea03799e6
-  React-Core: 9fb6365464ecc235d7023ee7f868dc643ca20f41
-  React-CoreModules: 9874a32779eadf7492fb85e71fbc5eeab733df32
-  React-cxxreact: e562a15aba33752febb3125bad4e329e8d024252
-  React-jsi: 78f1c0eb3f9054d15745e89e06f9dc17de4d07da
-  React-jsiexecutor: 573adf0d6ce5e05c55872dfde5b1589acb88a96f
-  React-jsinspector: b08b2d5e86cef9dc4bb69f0aa0bbe6d210fb7da5
-  React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993
-  react-native-blur: ef741a08d020010ba65e411be0ab82d1d325e7ad
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  Gutenberg: 7ab890c59b6a4df2fc30d4cc0a468e46bc6e888e
+  hermes-engine: 5420539d016f368cd27e008f65f777abd6098c56
+  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
+  RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
+  RCTRequired: 9b898847f76977a6dfed2a08f4c5ed37add75ec0
+  RCTTypeSafety: 0debdc4ba38c8138016d8d8ada4bdf9ec1b8aa82
+  React: f8afb04431634ac7e9b876dc96d30af9871f5946
+  React-callinvoker: 5ea86c3f93326867aa5114989d229db54d4759d0
+  React-Codegen: 0bf0f6934bc76ee750931467d2e3c5687e972560
+  React-Core: bbac074eba495788a01d1e5455b132872bf86843
+  React-CoreModules: 92fee6d8f4095e151b9678e44fcf0dc8eabeae37
+  React-cxxreact: e856e0370bf52aea71acce10007ad9ba6a63b66c
+  React-debug: c72219d497f675d547ce34cdc733e7e8fe2a5da3
+  React-Fabric: 59afb9db1a31cb7864196fa46bea99ab0033e0b1
+  React-FabricImage: 0ee33904487bbf1b96be2391195a059bbd416ead
+  React-graphics: 72181d50d637d5b982b6b8b8443390c84ca5147f
+  React-hermes: ac421eebea18bab58a57b70c590b7c11edaac00b
+  React-ImageManager: c9486ee6349a68aaa0d946ba65149590593bbd15
+  React-jserrorhandler: cbc83431c5f91521e4b75efb0b687168080781ee
+  React-jsi: 57498df51dfb8a37a996f470a457d8797e931eaa
+  React-jsiexecutor: d83a7d7aea2ffc60dbda0f3d523578a76820f0e1
+  React-jsinspector: 6fad0fe14882fb6b1c32e5cc8a4bd3d33a8b6790
+  React-logger: cb0dd15ac67b00e7b771ef15203edcb29d4a3f8e
+  React-Mapbuffer: ac7eff7bcdb1716d18eb7b305ee8c43a9a1ed7c8
+  react-native-blur: 3e9c8e8e9f7d17fa1b94e1a0ae9fd816675f5382
   react-native-get-random-values: b6fb85e7169b9822976793e467458c151c3e8b69
-  react-native-keyboard-aware-scroll-view: 0bc6c2dfe9056935a40dc1a70e764b7a1bbf6568
   react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f
-  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
-  react-native-slider: a433f1c13c5da3c17a587351bff7371f65cc9a07
-  react-native-video: bbc5d6759a481da913f1d917dd119c3366f4c36d
-  react-native-webview: 193d233c29eacce1f42ca2637dab7ba79c25a6de
-  React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da
-  React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec
-  React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea
-  React-RCTBlob: c8b58e70faa2ff482a8eb99491c8b12c4477bc74
-  React-RCTImage: 92a0471a03c55d445ede02516176d852120280bf
-  React-RCTLinking: 9a4482710586877671e19f0a564c2a745153f26f
-  React-RCTNetwork: 3801dd1ce7873db828a2d824ee2d4f25a0abf7d0
-  React-RCTSettings: a5d35733c27853177935185b76a3a0f7aa594dc9
-  React-RCTText: 6d8d3bc93c4595caf1f681198271cd4630759a74
-  React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb
-  React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01
-  ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6
-  RNCClipboard: 99fc8ad669a376b756fbc8098ae2fd05c0ed0668
-  RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd
+  react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
+  react-native-slider: dff0d8a46f368a8d1bacd8638570d75b9b0be400
+  react-native-video: 6768bf960f45c24bf75d2ba68d433d3ae3829a8e
+  react-native-webview: 02e4beee6b2b2b7391ee1c565788b8f8d6df9d05
+  React-nativeconfig: 4662ac75a0a77789c9ed896ed77baa1a25cdf006
+  React-NativeModulesApple: 92bc296f2ae166d10cb4d6a05498c80bf4ef9fa2
+  React-perflogger: 27ccacf853ba725524ef2b4e444f14e34d0837b0
+  React-RCTActionSheet: 77dd6a2a5cfab9e85b7f1add0f7e2e9cd697d936
+  React-RCTAnimation: 977a25a4e8007ecc90e556abcceb1b25602eea7c
+  React-RCTAppDelegate: 252a478047dbc9d0ac0dcda7440b4d3fbb6184a4
+  React-RCTBlob: 1e18ab09f57cf3bd2b9681cbeedfca866d971f50
+  React-RCTFabric: e52f9be153856408a06475bc90e97be0ba5a00b5
+  React-RCTImage: b1eac9526111cf7e37c304f94e81b76a5ae6a984
+  React-RCTLinking: d7f7dc665af6442ff38e18e34308da7865347bb1
+  React-RCTNetwork: c2c1df3a3c838e9547259e3638f6b290aebb3b72
+  React-RCTSettings: f3074b14047a57fa95499c28fb89028a894d3c18
+  React-RCTText: 9d48b2bbce5e1ed9c4d9514414dc6d99731d1b0a
+  React-RCTVibration: 394ea84082b08b5b3c211dc2bc9c0c4c163e7f23
+  React-rendererdebug: 5fb3c0f487cf77a9c87e6f8c3db21b996b669571
+  React-rncore: 333d0f6da78beb05dac8345669d987f0d65c9d7f
+  React-runtimeexecutor: 7e71a40def8262ef7d82a1145d873ea61b1a27b5
+  React-runtimescheduler: 06b3f2e3b3b6e9deb1fc63b543c7fd34177dbb07
+  React-utils: 2d25ca0a6e635c095bc5e67ac1202c7939ec4af3
+  ReactCommon: 8564d71cf76b1715740cb8bdc5b382d1ddd12dd1
+  RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
+  RNCMaskedView: f7c74478c83c4fdfc5cf4df51f80c0dd5cf125c6
   RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
-  RNGestureHandler: 3e0ea0c115175e66680032904339696bab928ca3
-  RNReanimated: 2366094144f5bfc2179b401237ef49034ecbee3e
-  RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
-  RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 89e6deac4c52300f6416702f49b8f402097d4e3e
+  RNGestureHandler: 28bdf9a766c081e603120f79e925b72817c751c6
+  RNReanimated: 6936b41d8afb97175e7c0ab40425b53103f71046
+  RNScreens: 2b73f5eb2ac5d94fbd61fa4be0bfebd345716825
+  RNSVG: 255767813dac22db1ec2062c8b7e7b856d4e5ae6
+  RNTAztecView: 8a6e9336ee33bfa61e05e2cdb0b128f9005ab6c6
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
-  WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
-  Yoga: 9a08effa851c1d8cc1647691895540bc168ea65f
+  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
+  WordPress-Aztec-iOS: 47311b8a342f2b12babb5b8a705ab20b281a83ae
+  Yoga: ff0382b894475dba0b4d2a5fda860bfee5a9afad
 
-PODFILE CHECKSUM: 855614b96eacd35e67d17c1a2818c71c67a28560
+PODFILE CHECKSUM: 4684cf41ccdeb5f720da9f11c8904f21ad9fcc7f
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.14.3
diff --git a/packages/react-native-editor/ios/gutenbergTests/Info.plist b/packages/react-native-editor/ios/gutenbergTests/Info.plist
index 886825ccc9bf0d..86d31dc8a65810 100644
--- a/packages/react-native-editor/ios/gutenbergTests/Info.plist
+++ b/packages/react-native-editor/ios/gutenbergTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
+	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1</string>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
 </dict>
 </plist>
diff --git a/packages/react-native-editor/ios/gutenbergTests/gutenbergTests.m b/packages/react-native-editor/ios/gutenbergTests/gutenbergTests.m
index a549f9a8783176..875c225324e2e8 100644
--- a/packages/react-native-editor/ios/gutenbergTests/gutenbergTests.m
+++ b/packages/react-native-editor/ios/gutenbergTests/gutenbergTests.m
@@ -20,7 +20,7 @@ @interface gutenbergTests : XCTestCase
 
 @implementation gutenbergTests
 
-- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
 {
   if (test(view)) {
     return YES;
@@ -50,12 +50,14 @@ - (void)testRendersWelcomeScreen
     [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
     [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
 
-    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
-      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
-        return YES;
-      }
-      return NO;
-    }];
+    foundElement = [self findSubviewInView:vc.view
+        matching:^BOOL(UIView *view) {
+          if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+            return YES;
+          }
+          return NO;
+        }];
+}
   }
 
   RCTSetLogFunction(RCTDefaultLogFunction);
diff --git a/packages/react-native-editor/jest_ui.config.js b/packages/react-native-editor/jest_ui.config.js
index e8579242c91a2b..f1dd087a5a9890 100644
--- a/packages/react-native-editor/jest_ui.config.js
+++ b/packages/react-native-editor/jest_ui.config.js
@@ -9,19 +9,21 @@ if ( process.env.TEST_RN_PLATFORM ) {
 }
 
 module.exports = {
-	verbose: true,
 	rootDir: './',
 	haste: {
 		defaultPlatform: rnPlatform,
 		platforms: [ 'android', 'ios', 'native' ],
 	},
 	transform: {
-		'^.+\\.(js|ts|tsx)$': 'babel-jest',
+		'^.+\\.(js|ts|tsx|cjs)$': 'babel-jest',
 	},
-	timers: 'real',
 	setupFilesAfterEnv: [ './jest_ui_setup_after_env.js' ],
 	testEnvironment: './jest_ui_test_environment.js',
 	testMatch: [ '**/__device-tests__/**/*.test.[jt]s?(x)' ],
 	testRunner: 'jest-jasmine2',
 	reporters: [ 'default', 'jest-junit' ],
+	watchPlugins: [
+		'jest-watch-typeahead/filename',
+		'jest-watch-typeahead/testname',
+	],
 };
diff --git a/packages/react-native-editor/jest_ui_setup_after_env.js b/packages/react-native-editor/jest_ui_setup_after_env.js
index c5ac13c44051c5..c3125003cc386b 100644
--- a/packages/react-native-editor/jest_ui_setup_after_env.js
+++ b/packages/react-native-editor/jest_ui_setup_after_env.js
@@ -8,15 +8,14 @@ const childProcess = require( 'child_process' );
 /**
  * Internal dependencies
  */
-const {
-	isAndroid,
-	isLocalEnvironment,
-} = require( './__device-tests__/helpers/utils' );
+const { isAndroid } = require( './__device-tests__/helpers/utils' );
+import { getAndroidEmulatorID } from './__device-tests__/helpers/get-android-emulator-id';
 
 jest.setTimeout( 1000000 ); // In milliseconds.
 
 let iOSScreenRecordingProcess;
 let androidScreenRecordingProcess;
+let androidDeviceID;
 
 const isMacOSEnvironment = () => {
 	return process.platform === 'darwin';
@@ -24,12 +23,26 @@ const isMacOSEnvironment = () => {
 
 const IOS_RECORDINGS_DIR = './ios-screen-recordings';
 const ANDROID_RECORDINGS_DIR = './android-screen-recordings';
+const ANDROID_EMULATOR_DIR = '/sdcard/';
 
 const getScreenRecordingFileNameBase = ( testPath, id ) => {
 	const suiteName = path.basename( testPath, '.test.js' );
 	return `${ suiteName }.${ id }`;
 };
 
+function deleteRecordingFile( filePath ) {
+	if ( fs.existsSync( filePath ) ) {
+		try {
+			fs.unlinkSync( filePath );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				`Failed to delete ${ filePath }. Error: ${ error.message }`
+			);
+		}
+	}
+}
+
 let allPassed = true;
 
 // eslint-disable-next-line jest/no-jasmine-globals, no-undef
@@ -43,11 +56,26 @@ jasmine.getEnv().addReporter( {
 			getScreenRecordingFileNameBase( testPath, id ) + '.mp4';
 
 		if ( isAndroid() ) {
+			androidDeviceID = getAndroidEmulatorID();
+
 			if ( ! fs.existsSync( ANDROID_RECORDINGS_DIR ) ) {
 				fs.mkdirSync( ANDROID_RECORDINGS_DIR );
 			}
 
+			// Use the "mkdir -p" command to create the
+			// ANDROID_EMULATOR_DIR directory if it doesn't exist.
+			try {
+				childProcess.execSync(
+					`adb -s ${ androidDeviceID } shell "mkdir -p ${ ANDROID_EMULATOR_DIR }" 2>/dev/null`
+				);
+			} catch ( error ) {
+				// eslint-disable-next-line no-console
+				console.error( `Failed to create the directory: ${ error }` );
+			}
+
 			androidScreenRecordingProcess = childProcess.spawn( 'adb', [
+				'-s',
+				androidDeviceID,
 				'shell',
 				'screenrecord',
 				'--verbose',
@@ -55,14 +83,13 @@ jasmine.getEnv().addReporter( {
 				'1M',
 				'--size',
 				'720x1280',
-				`/sdcard/${ fileName }`,
+				`${ ANDROID_EMULATOR_DIR }${ fileName }`,
 			] );
 
 			androidScreenRecordingProcess.stderr.on( 'data', ( data ) => {
 				// eslint-disable-next-line no-console
 				console.log( `Android screen recording error => ${ data }` );
 			} );
-
 			return;
 		}
 
@@ -88,6 +115,7 @@ jasmine.getEnv().addReporter( {
 	},
 	specDone: ( { testPath, id, status } ) => {
 		allPassed = allPassed && status !== 'failed';
+		const isTestSkipped = status === 'pending';
 
 		if ( ! isMacOSEnvironment() ) {
 			return;
@@ -100,9 +128,16 @@ jasmine.getEnv().addReporter( {
 			// Wait for kill.
 			childProcess.execSync( 'sleep 1' );
 
+			const recordingFilePath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
+
+			if ( isTestSkipped ) {
+				deleteRecordingFile( recordingFilePath );
+				return;
+			}
+
 			try {
 				childProcess.execSync(
-					`adb pull /sdcard/${ fileNameBase }.mp4 ${ ANDROID_RECORDINGS_DIR }`
+					`adb -s ${ androidDeviceID } pull ${ ANDROID_EMULATOR_DIR }${ fileNameBase }.mp4 ${ ANDROID_RECORDINGS_DIR }`
 				);
 			} catch ( error ) {
 				// Some (old) Android devices don't support screen recording or
@@ -116,27 +151,27 @@ jasmine.getEnv().addReporter( {
 				);
 			}
 
-			const oldPath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
 			const newPath = `${ ANDROID_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
 
-			if ( fs.existsSync( oldPath ) ) {
-				fs.renameSync( oldPath, newPath );
+			if ( fs.existsSync( recordingFilePath ) ) {
+				fs.renameSync( recordingFilePath, newPath );
 			}
 			return;
 		}
 
 		iOSScreenRecordingProcess.kill( 'SIGINT' );
 
-		const oldPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
-		const newPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
+		const recordingFilePath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.mp4`;
 
-		if ( fs.existsSync( oldPath ) ) {
-			fs.renameSync( oldPath, newPath );
+		if ( isTestSkipped ) {
+			deleteRecordingFile( recordingFilePath );
+			return;
 		}
-	},
-	suiteDone() {
-		if ( ! isLocalEnvironment() ) {
-			global.editorPage.sauceJobStatus( allPassed );
+
+		const newPath = `${ IOS_RECORDINGS_DIR }/${ fileNameBase }.${ status }.mp4`;
+
+		if ( fs.existsSync( recordingFilePath ) ) {
+			fs.renameSync( recordingFilePath, newPath );
 		}
 	},
 } );
diff --git a/packages/react-native-editor/jest_ui_test_environment.js b/packages/react-native-editor/jest_ui_test_environment.js
index 40095937e8629c..3813558ec3b111 100644
--- a/packages/react-native-editor/jest_ui_test_environment.js
+++ b/packages/react-native-editor/jest_ui_test_environment.js
@@ -1,21 +1,23 @@
 /**
  * Internal dependencies
  */
-const {
-	initializeEditorPage,
-} = require( './__device-tests__/pages/editor-page' );
+const { setupEditor } = require( './__device-tests__/pages/editor-page' );
+const utils = require( './__device-tests__/helpers/utils' );
+const testData = require( './__device-tests__/helpers/test-data' );
 
 /**
  * External dependencies
  */
 // eslint-disable-next-line import/no-extraneous-dependencies
-const JSDOMEnvironment = require( 'jest-environment-jsdom' );
+const JSDOMEnvironment = require( 'jest-environment-jsdom' ).default;
 
 class CustomEnvironment extends JSDOMEnvironment {
 	async setup() {
 		try {
 			await super.setup();
-			this.global.editorPage = await initializeEditorPage();
+			this.global.editorPage = await setupEditor();
+			this.global.e2eUtils = utils;
+			this.global.e2eTestData = testData;
 		} catch ( error ) {
 			// eslint-disable-next-line no-console
 			console.error( 'E2E setup exception:', error );
diff --git a/packages/react-native-editor/metro.config.js b/packages/react-native-editor/metro.config.js
index 73bc29c15d1b14..c63fade2c33659 100644
--- a/packages/react-native-editor/metro.config.js
+++ b/packages/react-native-editor/metro.config.js
@@ -3,6 +3,11 @@
  */
 const path = require( 'path' );
 const fs = require( 'fs' );
+const {
+	getDefaultConfig,
+	mergeConfig,
+	// eslint-disable-next-line import/no-extraneous-dependencies
+} = require( '@react-native/metro-config' );
 
 const PACKAGES_DIR = path.resolve( __dirname, '..' );
 const packageNames = fs.readdirSync( PACKAGES_DIR ).filter( ( file ) => {
@@ -10,10 +15,16 @@ const packageNames = fs.readdirSync( PACKAGES_DIR ).filter( ( file ) => {
 	return stats.isDirectory();
 } );
 
-module.exports = {
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
 	watchFolders: [ path.resolve( __dirname, '../..' ) ],
 	resolver: {
-		sourceExts: [ 'js', 'json', 'scss', 'sass', 'ts', 'tsx' ],
+		sourceExts: [ 'js', 'cjs', 'json', 'scss', 'sass', 'ts', 'tsx' ],
 		platforms: [ 'native', 'android', 'ios' ],
 	},
 	transformer: {
@@ -27,6 +38,7 @@ module.exports = {
 				inlineRequires: false,
 			},
 		} ),
+		unstable_allowRequireContext: true, // Used for optional setup configuration.
 	},
 	server: {
 		enhanceMiddleware: ( middleware ) => ( req, res, next ) => {
@@ -51,3 +63,5 @@ module.exports = {
 		},
 	},
 };
+
+module.exports = mergeConfig( getDefaultConfig( __dirname ), config );
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 19eb0be568db68..e6e53af1190ad7 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.0",
+	"version": "1.121.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,58 +23,54 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12",
-		"npm": ">=6.9"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "src/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@react-native-clipboard/clipboard": "1.9.0",
-		"@react-native-community/blur": "3.6.0",
-		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-3/react-native-community-slider-3.0.2-wp-3.tgz",
-		"@react-native-masked-view/masked-view": "0.2.6",
+		"@babel/runtime": "7.25.7",
+		"@react-native-clipboard/clipboard": "1.11.2",
+		"@react-native-community/blur": "4.2.0",
+		"@react-native-community/slider": "https://raw.githubusercontent.com/wordpress-mobile/react-native-slider/v3.0.2-wp-5/react-native-community-slider-3.0.2-wp-5.tgz",
+		"@react-native-masked-view/masked-view": "0.3.0",
 		"@react-navigation/core": "5.12.0",
-		"@react-navigation/native": "5.7.0",
+		"@react-navigation/native": "6.0.14",
 		"@react-navigation/routers": "5.4.9",
-		"@react-navigation/stack": "5.6.2",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/block-library": "file:../block-library",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/data": "file:../data",
-		"@wordpress/edit-post": "file:../edit-post",
-		"@wordpress/element": "file:../element",
-		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/react-native-aztec": "file:../react-native-aztec",
-		"@wordpress/react-native-bridge": "file:../react-native-bridge",
-		"core-js": "^3.19.1",
+		"@react-navigation/stack": "6.3.5",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/data": "*",
+		"@wordpress/edit-post": "*",
+		"@wordpress/element": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/react-native-aztec": "*",
+		"@wordpress/react-native-bridge": "*",
+		"core-js": "^3.31.0",
 		"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",
-		"node-fetch": "^2.6.0",
-		"react-native": "0.66.2",
+		"jsdom-jscore-rn": "0.1.8",
+		"node-fetch": "2.7.0",
+		"react-native": "0.73.3",
 		"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-gesture-handler": "2.14.1",
 		"react-native-get-random-values": "1.4.0",
-		"react-native-hr": "git+https://github.com/Riglerr/react-native-hr.git#2d01a5cf77212d100e8b99e0310cce5234f977b3",
-		"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",
-		"react-native-modal": "^11.10.0",
-		"react-native-prompt-android": "https://raw.githubusercontent.com/wordpress-mobile/react-native-prompt-android/v1.0.0-wp-3/react-native-prompt-android-1.0.0-wp-3.tgz",
-		"react-native-reanimated": "https://raw.githubusercontent.com/wordpress-mobile/react-native-reanimated/2.4.1-wp-4/react-native-reanimated-2.4.1-wp-4.tgz",
+		"react-native-linear-gradient": "2.7.3",
+		"react-native-modal": "13.0.1",
+		"react-native-reanimated": "3.6.2",
 		"react-native-safe-area": "^0.5.0",
-		"react-native-safe-area-context": "3.2.0",
+		"react-native-safe-area-context": "4.8.2",
 		"react-native-sass-transformer": "^1.1.1",
-		"react-native-screens": "2.9.0",
-		"react-native-svg": "9.13.6",
-		"react-native-url-polyfill": "^1.1.2",
-		"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-4/react-native-video-5.2.0-wp-4.tgz",
-		"react-native-webview": "11.6.2"
+		"react-native-screens": "3.29.0",
+		"react-native-svg": "14.0.0",
+		"react-native-url-polyfill": "1.3.0",
+		"react-native-video": "https://raw.githubusercontent.com/wordpress-mobile/react-native-video/5.2.0-wp-7/react-native-video-5.2.0-wp-7.tgz",
+		"react-native-webview": "13.6.1"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -83,50 +79,49 @@
 		"start": "echo \"\\x1b[33mThe start command is not available in this project. It is strongly recommended to use \\x1b[1:33mstart:reset\\x1b[0m\\x1b[33m to perform some cleanup when starting the metro bundler.\nOr you may use \\x1b[1:33mstart:quick\\x1b[0m\\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\\x1b[0m\"",
 		"start:debug": "node --inspect-brk node_modules/.bin/react-native start",
 		"start:reset": "npm run clean:runtime && npm run start:quick -- --reset-cache",
-		"start:quick": "react-native start",
+		"start:quick": "react-native start --experimental-debugger",
 		"prern-bundle": "cd ../.. && patch-package --patch-dir packages/react-native-editor/metro-patch",
 		"rn-bundle": "react-native bundle",
 		"postrn-bundle": "cd ../.. && patch-package --reverse --patch-dir packages/react-native-editor/metro-patch",
 		"prebundle": "npm run i18n-cache:force",
 		"bundle": "npm run bundle:android && npm run bundle:ios",
-		"bundle:android": "mkdir -p bundle/android && npm run rn-bundle -- --platform android --dev false --entry-file index.js --assets-dest bundle/android --bundle-output bundle/android/App.text.js --sourcemap-output bundle/android/App.text.js.map && ./../../node_modules/hermes-engine/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/android/App.js bundle/android/App.text.js -output-source-map",
-		"bundle:ios": "mkdir -p bundle/ios && npm run rn-bundle -- --platform ios --dev false --entry-file index.js --assets-dest bundle/ios --bundle-output bundle/ios/App.js --sourcemap-output bundle/ios/App.js.map",
+		"bundle:android": "mkdir -p bundle/android && npm run rn-bundle -- --platform android --dev false --entry-file index.js --assets-dest bundle/android --bundle-output bundle/android/App.text.js --sourcemap-output bundle/android/App.text.js.map && ./../../node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/android/App.js bundle/android/App.text.js -output-source-map",
+		"bundle:ios": "npm run bundle:ios:text && npm run bundle:ios:bytecode",
+		"bundle:ios:text": "mkdir -p bundle/ios && npm run rn-bundle -- --platform ios --dev false --minify false --entry-file ./index.js --assets-dest bundle/ios --bundle-output ./bundle/ios/App.text.js --sourcemap-output ./bundle/ios/App.text.js.map",
+		"bundle:ios:bytecode": "./../../node_modules/react-native/sdks/hermesc/`node -e \"const platform=require('os').platform();console.log(platform === 'darwin' ? 'osx-bin' : (platform === 'linux' ? 'linux64-bin' : (platform === 'win32' ? 'win64-bin' : 'unsupported-os')));\"`/hermesc -emit-binary -O -out bundle/ios/App.js bundle/ios/App.text.js -output-source-map",
 		"i18n-cache": "node i18n-cache/index.js",
 		"i18n-cache:force": "cross-env REFRESH_I18N_CACHE=1 node i18n-cache/index.js",
 		"i18n:extract-used-strings": "node bin/extract-used-strings",
 		"i18n:fetch-translations": "node bin/i18n-translations-download",
 		"postinstall": "npm run i18n-cache",
-		"android": "react-native run-android --no-packager --no-jetifier",
+		"android": "react-native run-android --no-packager",
 		"prewpandroid": "rm -Rf $TMPDIR/gbmobile-wpandroidfakernroot && mkdir $TMPDIR/gbmobile-wpandroidfakernroot && ln -s $(cd \"$(dirname \"../../../../../\")\"; pwd) $TMPDIR/gbmobile-wpandroidfakernroot/android",
 		"wpandroid": "npm run android -- --root $TMPDIR/gbmobile-wpandroidfakernroot --variant wasabiDebug --appIdSuffix beta --appFolder WordPress --main-activity=ui.WPLaunchActivity",
 		"preios": "cd ios && (bundle check > /dev/null || bundle install) && bundle exec pod install --repo-update",
 		"preios:carthage": "cd ../react-native-aztec && npm run install-aztec-ios",
 		"preios:carthage:update": "cd ../react-native-aztec && npm run update-aztec-ios",
-		"preios:xcode10": "cd ../../node_modules/react-native && ./scripts/ios-install-third-party.sh && cd third-party/glog-0.3.5 && [ -f libglog.pc ] || ../../scripts/ios-configure-glog.sh",
 		"ios": "react-native run-ios",
 		"ios:fast": "react-native run-ios",
-		"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-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": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --testPathIgnorePatterns='canary|gutenberg-editor-rendering' --config ./jest_ui.config.js",
+		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --config ./jest_ui.config.js",
+		"device-tests:local": "./bin/test-e2e.sh",
 		"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",
+		"appium:start": "node ./__device-tests__/helpers/appium-local-start.js",
+		"test:e2e:setup": "./bin/test-e2e-setup.sh",
 		"test:e2e:bundle:android": "mkdir -p android/app/src/main/assets && npm run rn-bundle -- --reset-cache --platform android --dev false --minify false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
 		"test:e2e:build-app:android": "cd android && ./gradlew clean && ./gradlew assembleDebug",
 		"test:e2e:android:local": "npm run test:e2e:bundle:android && npm run test:e2e:build-app:android && TEST_RN_PLATFORM=android npm run device-tests:local",
-		"test:e2e:bundle:ios": "mkdir -p ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app && npm run rn-bundle -- --reset-cache --platform=ios --dev=false --minify false --entry-file=index.js --bundle-output=./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle --assets-dest=./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app",
-		"test:e2e:build-app:ios": "npm run preios && SKIP_BUNDLING=true xcodebuild -workspace ios/GutenbergDemo.xcworkspace -configuration Release -scheme GutenbergDemo -destination 'platform=iOS Simulator,name=iPhone 13' -derivedDataPath ios/build/GutenbergDemo",
-		"test:e2e:build-wda": "xcodebuild -project ../../node_modules/appium/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj -scheme WebDriverAgentRunner -destination 'platform=iOS Simulator,name=iPhone 13' -derivedDataPath ios/build/WDA",
+		"test:e2e:bundle:ios": "mkdir -p ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app && npm run bundle:ios && cp bundle/ios/App.js ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle && cp -r bundle/ios/assets ./ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/",
+		"test:e2e:build-app:ios": "npm run preios && ./bin/build_e2e_ios_app",
+		"test:e2e:build-wda": "./bin/build-e2e-wda.sh",
 		"test:e2e:ios:local": "npm run test:e2e:bundle:ios && npm run test:e2e:build-app:ios && npm run test:e2e:build-wda && TEST_RN_PLATFORM=ios npm run device-tests:local",
 		"build:gutenberg": "cd gutenberg && npm ci && npm run build",
-		"clean": "npm run clean:build-artifacts; npm run clean:aztec; npm run clean:haste; npm run clean:jest; npm run clean:metro; npm run clean:watchman",
-		"clean:runtime": "npm run clean:haste; npm run clean:metro; npm run clean:jest; npm run clean:watchman; npm run clean:babel-cache",
+		"clean": "npm run clean:build-artifacts; npm run clean:aztec; npm run clean:haste; npm run clean:metro; npm run clean:watchman",
+		"clean:runtime": "npm run clean:haste; npm run clean:metro; npm run clean:watchman; npm run clean:babel-cache",
 		"clean:build-artifacts": "rm -rf ./ios/build && rm -rf ./ios/Pods",
 		"clean:aztec": "cd ../react-native-aztec && npm run clean",
 		"clean:haste": "rm -rf $TMPDIR/haste-map-metro-*",
 		"clean:install": "npm run clean; npm install",
-		"clean:jest": "jest --clearCache --config ../../test/native/jest.config.js; rm -rf $TMPDIR/jest_*",
 		"clean:metro": "rm -rf $TMPDIR/metro-cache/",
 		"clean:watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
 		"clean:babel-cache": "rm -rf ../../node_modules/.cache/babel-loader/*",
diff --git a/packages/react-native-editor/react-native.config.js b/packages/react-native-editor/react-native.config.js
new file mode 100644
index 00000000000000..2496210957d66a
--- /dev/null
+++ b/packages/react-native-editor/react-native.config.js
@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+/**
+ * The `null` value for the Android `platform` below disables auto-linking, as
+ * we manually link these library binaries to avoid a Node.js dependency
+ * using binaries from the React Native Libraries Publisher repository
+ * in the host WordPress Android app.
+ */
+module.exports = {
+	dependencies: {
+		'@wordpress/react-native-bridge': {
+			root: path.resolve( __dirname, '../react-native-bridge' ),
+			platforms: {
+				android: null,
+			},
+		},
+		'@wordpress/react-native-aztec': {
+			root: path.resolve( __dirname, '../react-native-aztec' ),
+			platforms: {
+				android: null,
+			},
+		},
+		'@react-native-clipboard/clipboard': {
+			platforms: {
+				android: null,
+			},
+		},
+		'@react-native-community/blur': {
+			platforms: {
+				android: null,
+			},
+		},
+		'@react-native-masked-view/masked-view': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-fast-image': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-gesture-handler': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-reanimated': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-get-random-values': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-linear-gradient': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-safe-area-context': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-screens': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-svg': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-video': {
+			platforms: {
+				android: null,
+			},
+		},
+		'react-native-webview': {
+			platforms: {
+				android: null,
+			},
+		},
+	},
+	project: {
+		ios: {
+			sourceDir: './ios/',
+		},
+	},
+};
diff --git a/packages/react-native-editor/sass-transformer.js b/packages/react-native-editor/sass-transformer.js
index e399c7c4c05564..3b561eca6d88bd 100644
--- a/packages/react-native-editor/sass-transformer.js
+++ b/packages/react-native-editor/sass-transformer.js
@@ -40,7 +40,7 @@ const sass = require( 'sass' );
 // eslint-disable-next-line import/no-extraneous-dependencies
 const css2rn = require( 'css-to-react-native-transform' ).default;
 // eslint-disable-next-line import/no-extraneous-dependencies
-const upstreamTransformer = require( 'metro-react-native-babel-transformer' );
+const upstreamTransformer = require( '@react-native/metro-babel-transformer' );
 
 // TODO: need to find a way to pass the include paths and the default asset files via some config.
 const autoImportIncludePaths = [
@@ -60,9 +60,14 @@ const imports =
 	'@import "' + autoImportAssets.join( '";\n@import "' ) + '";\n\n';
 
 // Iterate through the include paths and extensions to find the file variant.
-function findVariant( name, extensions, includePaths ) {
+function findVariant( name, extensions, includePaths, projectRoot ) {
 	for ( let i = 0; i < includePaths.length; i++ ) {
-		const includePath = includePaths[ i ];
+		let includePath = includePaths[ i ];
+
+		// Workaround for not having the full path when loaded from Gutenberg Mobile
+		if ( includePath.startsWith( 'gutenberg' ) ) {
+			includePath = `${ projectRoot }/${ includePath }`;
+		}
 
 		// Try to find the file iterating through the extensions, in order.
 		const foundExtention = extensions.find( ( extension ) => {
@@ -117,7 +122,12 @@ function transform( src, filename, options ) {
 						path.resolve( path.dirname( filename ), urlPath.dir )
 					); // Add the file's dir to the search array.
 				}
-				const f = findVariant( urlPath.name, exts, incPaths );
+				const f = findVariant(
+					urlPath.name,
+					exts,
+					incPaths,
+					options.projectRoot
+				);
 
 				if ( f ) {
 					return { file: f };
diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js
index e2d9d5d4ece97d..874728678f60c0 100644
--- a/packages/react-native-editor/src/api-fetch-setup.js
+++ b/packages/react-native-editor/src/api-fetch-setup.js
@@ -1,31 +1,79 @@
 /**
  * WordPress dependencies
  */
-import { fetchRequest } from '@wordpress/react-native-bridge';
+import { fetchRequest, postRequest } from '@wordpress/react-native-bridge';
 import apiFetch from '@wordpress/api-fetch';
+import { applyFilters } from '@wordpress/hooks';
 
+const SUPPORTED_METHODS = [ 'GET', 'POST' ];
 // Please add only wp.org API paths here!
-const SUPPORTED_ENDPOINTS = [
-	/wp\/v2\/(media|categories|blocks|themes)\/?\d*?.*/i,
-	/wp\/v2\/search\?.*/i,
-	/oembed\/1\.0\/proxy\?.*/i,
-];
+const SUPPORTED_ENDPOINTS = {
+	// Temporarily disabling themes endpoint calls within the editor.
+	// Issue: https://github.com/wordpress-mobile/WordPress-Android/issues/21034
+	// The editor's GET requests to the themes endpoint are not functioning as expected.
+	// This is likely due to the method used for performing GET requests within the host Android app.
+	// TODO: Investigate and resolve the issue with GET requests from the editor.
+	// Until then, themes endpoint calls are disabled to prevent unexpected behavior.
+	GET: [
+		/wp\/v2\/(media|categories|blocks)\/?\d*?.*/i,
+		/wp\/v2\/search\?.*/i,
+		/oembed\/1\.0\/proxy\?.*/i,
+	],
+	POST: [],
+};
 
 // [ONLY ON ANDROID] The requests made to these endpoints won't be cached.
-const DISABLED_CACHING_ENDPOINTS = [ /wp\/v2\/(blocks)\/?\d*?.*/i ];
+const DISABLED_CACHING_ENDPOINTS = [
+	/wp\/v2\/(blocks)\/?\d*?.*/i,
+	/oembed\/1\.0\/proxy\?.*/i,
+];
 
 const setTimeoutPromise = ( delay ) =>
 	new Promise( ( resolve ) => setTimeout( resolve, delay ) );
 
-const fetchHandler = ( { path }, retries = 20, retryCount = 1 ) => {
-	if ( ! isPathSupported( path ) ) {
-		return Promise.reject( `Unsupported path: ${ path }` );
+const fetchHandler = (
+	{ path, method = 'GET', data, parse },
+	retries = 20,
+	retryCount = 1
+) => {
+	if ( ! isMethodSupported( method ) ) {
+		return Promise.reject( `Unsupported method: ${ method }` );
+	}
+
+	if ( ! isPathSupported( path, method ) ) {
+		return Promise.reject(
+			`Unsupported path for method ${ method }: ${ path }`
+		);
 	}
 
-	const responsePromise = fetchRequest( path, shouldEnableCaching( path ) );
+	let responsePromise;
+	switch ( method ) {
+		case 'GET':
+			responsePromise = fetchRequest( path, shouldEnableCaching( path ) );
+			break;
+		case 'POST':
+			responsePromise = postRequest( path, data );
+			break;
+	}
 
 	const parseResponse = ( response ) => {
-		if ( typeof response === 'string' ) {
+		const isStringResponse = typeof response === 'string';
+
+		// If the 'parse' parameter is false, return the response as a new Response object
+		// with the JSON string. This is necessary because one of the middlewares in the API
+		// fetch library expects the response to be a JavaScript Response object with JSON
+		// functionality. By doing this, we ensure that the response is handled correctly
+		// by fetch-all-middleware.
+		if ( parse === false ) {
+			const body = isStringResponse
+				? response
+				: JSON.stringify( response );
+			return new Response( body, {
+				headers: { 'Content-Type': 'application/json' },
+			} );
+		}
+
+		if ( isStringResponse ) {
 			response = JSON.parse( response );
 		}
 		return response;
@@ -45,11 +93,27 @@ const fetchHandler = ( { path }, retries = 20, retryCount = 1 ) => {
 	} );
 };
 
-export const isPathSupported = ( path ) =>
-	SUPPORTED_ENDPOINTS.some( ( pattern ) => pattern.test( path ) );
+export const isMethodSupported = ( method ) =>
+	SUPPORTED_METHODS.includes( method );
 
-export const shouldEnableCaching = ( path ) =>
-	! DISABLED_CACHING_ENDPOINTS.some( ( pattern ) => pattern.test( path ) );
+export const isPathSupported = ( path, method ) => {
+	const supportedEndpoints = applyFilters(
+		'native.supported_endpoints',
+		SUPPORTED_ENDPOINTS
+	);
+	return supportedEndpoints[ method ].some( ( pattern ) =>
+		pattern.test( path )
+	);
+};
+
+export const shouldEnableCaching = ( path ) => {
+	const disabledEndpoints = applyFilters(
+		'native.disabled_caching_endpoints',
+		DISABLED_CACHING_ENDPOINTS
+	);
+
+	return ! disabledEndpoints.some( ( pattern ) => pattern.test( path ) );
+};
 
 export default () => {
 	apiFetch.setFetchHandler( ( options ) => fetchHandler( options ) );
diff --git a/packages/react-native-editor/src/globals.js b/packages/react-native-editor/src/globals.js
index c8a545a5c5acc9..9527f8b2f1caeb 100644
--- a/packages/react-native-editor/src/globals.js
+++ b/packages/react-native-editor/src/globals.js
@@ -11,6 +11,7 @@ import 'react-native-url-polyfill/auto';
  * Babel polyfills
  */
 import 'core-js/features/array/flat-map';
+import 'core-js/proposals/relative-indexing-method';
 
 /**
  * WordPress dependencies
@@ -44,6 +45,9 @@ doc.implementation.createHTMLDocument = function ( html ) {
 	return jsdom.html( html, null, null );
 };
 
+// Flag used to enable a patch to `react-devtools-core` to support `jsdom-jscore-rn`.
+doc.__isJsdom = true;
+
 // `hpq` depends on `document` be available globally.
 global.document = doc;
 
diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
index 965ca9300fa5ee..84828a19344174 100644
--- a/packages/react-native-editor/src/index.js
+++ b/packages/react-native-editor/src/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import 'react-native-gesture-handler';
-
 /**
  * WordPress dependencies
  */
@@ -56,6 +51,15 @@ const registerGutenberg = ( {
 			// Initialize editor
 			this.editorComponent = setup();
 
+			// TODO: Reinstate the optional setup configuration once we identify why
+			// it throws an error after the latest RN 0.73 upgrade.
+			// https://github.com/facebook/metro/blob/877933ddc03672a00214d26afe620b79479d6489/packages/metro-file-map/src/lib/TreeFS.js#L417
+			// Apply optional setup configuration, enabling modification via hooks.
+			// if ( __DEV__ && typeof require.context === 'function' ) {
+			// 	const req = require.context( './', false, /setup-local\.js$/ );
+			// 	req.keys().forEach( ( key ) => req( key ).default() );
+			// }
+
 			// Dispatch pre-render hooks.
 			doAction( 'native.pre-render', parentProps );
 
@@ -65,11 +69,6 @@ const registerGutenberg = ( {
 			);
 		}
 
-		componentDidMount() {
-			// Dispatch post-render hooks.
-			doAction( 'native.render', this.filteredProps );
-		}
-
 		render() {
 			return cloneElement( this.editorComponent, this.filteredProps );
 		}
diff --git a/packages/react-native-editor/src/initial-html.js b/packages/react-native-editor/src/initial-html.js
index ddea8594b720d1..684ca0dfbf8de4 100644
--- a/packages/react-native-editor/src/initial-html.js
+++ b/packages/react-native-editor/src/initial-html.js
@@ -1,6 +1,5 @@
-export default `
-<!-- wp:heading -->
-<h2 id="this-is-an-anchor">What is Gutenberg?</h2>
+export const textBlocks = `<!-- wp:heading -->
+<h2 class="wp-block-heading" id="this-is-an-anchor">What is Gutenberg?</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -8,11 +7,11 @@ export default `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading {"textAlign":"left","level":4,"className":"has-primary-background-color has-background","style":{"typography":{"lineHeight":"2.5"}}} -->
-<h4 class="has-text-align-left has-primary-background-color has-background" style="line-height:2.5">Heading with line-height set</h4>
+<h4 class="wp-block-heading has-text-align-left has-primary-background-color has-background" style="line-height:2.5">Heading with line-height set</h4>
 <!-- /wp:heading -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>First Item</li>
 <!-- /wp:list-item -->
 
@@ -53,9 +52,9 @@ else:
 
 <!-- wp:verse {"textAlign":"center"} -->
 <pre class="wp-block-verse has-text-align-center">Come<br>Home.</pre>
-<!-- /wp:verse -->
+<!-- /wp:verse -->`;
 
-<!-- wp:image -->
+export const mediaBlocks = `<!-- wp:image -->
 <figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->
 
@@ -145,6 +144,20 @@ else:
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->
 
+<!-- wp:media-text {"isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<p class="has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
+
+<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
+<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
+<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
+`;
+
+export const otherBlocks = `
 <!-- wp:nextpage -->
 <!--nextpage-->
 <!-- /wp:nextpage -->
@@ -201,18 +214,6 @@ else:
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
 
-<!-- wp:media-text {"isStackedOnMobile":false,"className":"is-stacked-on-mobile"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"className":"has-large-font-size"} -->
-<p class="has-large-font-size"></p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:media-text -->
-
-<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":890,"dimRatio":20,"overlayColor":"luminous-vivid-orange","focalPoint":{"x":"0.63","y":"0.83"},"minHeight":219} -->
-<div class="wp-block-cover" style="min-height:219px"><span aria-hidden="true" class="wp-block-cover__background has-luminous-vivid-orange-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-890" alt="" src="https://cldup.com/cXyG__fTLN.jpg" style="object-position:63% 83%" data-object-fit="cover" data-object-position="63% 83%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
-<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
-<!-- /wp:paragraph --></div></div>
-<!-- /wp:cover -->
-
 <!-- wp:latest-posts {"displayPostContent":true,"displayPostDate":true} /-->
 
 <!-- wp:buttons -->
@@ -230,8 +231,6 @@ else:
 <!-- /wp:shortcode -->
 
 <!-- wp:rss /-->
-
-<!-- wp:paragraph -->
-<p>This block is used in initial HTML e2e tests and should be kept as the last block.</p>
-<!-- /wp:paragraph -->
 `;
+
+export default textBlocks + mediaBlocks + otherBlocks;
diff --git a/packages/react-native-editor/src/jsdom-patches.js b/packages/react-native-editor/src/jsdom-patches.js
index 73f11ef55e4a4b..680bdcf1eb12e8 100644
--- a/packages/react-native-editor/src/jsdom-patches.js
+++ b/packages/react-native-editor/src/jsdom-patches.js
@@ -29,23 +29,25 @@ const { NO_MODIFICATION_ALLOWED_ERR, HIERARCHY_REQUEST_ERR, NOT_FOUND_ERR } =
 	core;
 
 /**
- * Simple recursive implementation of Node.contains method
+ * Copy of Node.contains polyfill from polyfill-library package (https://t.ly/mehjW).
+ * This polyfill was originally used in WordPress Core (https://t.ly/4o7wQ).
  *
- * @param {number} otherNode Another node (may be the same node).
- * @return {boolean} true if otherNode is a descendant of this node, or is this
- * node, false otherwise.
+ * @param {number} node Node to check.
+ * @return {boolean} true if passed node is a descendant of this node, or the
+ * same node, false otherwise.
  *
  * This function is necessary in the mobile environment, because there are code
  * paths that make use of functions in the Gutenberg (web) project, which has
  * expectation that this is implemented (as it is in the browser environment).
  */
-Node.prototype.contains = function ( otherNode ) {
-	return (
-		this === otherNode ||
-		Array.prototype.some.call( this._childNodes, ( childNode ) => {
-			return childNode.contains( otherNode );
-		} )
-	);
+Node.prototype.contains = function ( node ) {
+	do {
+		if ( this === node ) {
+			return true;
+		}
+	} while ( ( node = node && node.parentNode ) );
+
+	return false;
 };
 
 /**
@@ -169,6 +171,18 @@ Element.prototype.closest = function ( selector ) {
 	return null;
 };
 
+/**
+ * Implementation of Element.prototype.remove based on polyfills:
+ * - https://github.com/chenzhenxi/element-remove/blob/master/index.js
+ * (referenced in https://developer.mozilla.org/en-US/docs/Web/API/Element/remove#see_also)
+ * - https://github.com/JakeChampion/polyfill-library/blob/master/polyfills/Element/prototype/remove/polyfill.js
+ */
+Element.prototype.remove = function () {
+	if ( this.parentNode ) {
+		this.parentNode.removeChild( this );
+	}
+};
+
 /**
  * Helper function to check if a node implements the NonDocumentTypeChildNode
  * interface
@@ -243,6 +257,37 @@ Object.defineProperties( Node.prototype, {
 			return sibling;
 		},
 	},
+	dataset: {
+		get() {
+			const node = this;
+
+			// Helper function to convert property name to data-* attribute name
+			function toDataAttributeName( property ) {
+				return (
+					'data-' +
+					property.replace(
+						/[A-Z]/g,
+						( match ) => '-' + match.toLowerCase()
+					)
+				);
+			}
+			return new Proxy(
+				{},
+				{
+					set( _target, property, value ) {
+						const attributeName = toDataAttributeName( property );
+						node.setAttribute( attributeName, value );
+						return true;
+					},
+					get( _target, property ) {
+						const attributeName = toDataAttributeName( property );
+						return node.getAttribute( attributeName );
+					},
+				}
+			);
+		},
+		set() {},
+	},
 } );
 
 class DOMParser {
diff --git a/packages/react-native-editor/src/setup-locale.js b/packages/react-native-editor/src/setup-locale.js
index bb50c5e76d3fb9..a583f2e1e53192 100644
--- a/packages/react-native-editor/src/setup-locale.js
+++ b/packages/react-native-editor/src/setup-locale.js
@@ -35,16 +35,6 @@ export default (
 			...extraTranslations,
 		};
 
-		if ( domain === 'default' ) {
-			// eslint-disable-next-line no-console
-			console.log( 'locale', locale, allTranslations );
-		} else {
-			// Extra translations are already logged along with the default domain, so
-			// for other domains we can limit the output to their translations.
-			// eslint-disable-next-line no-console
-			console.log( `${ domain } - locale`, locale, translations );
-		}
-
 		// Only change the locale if it's supported by gutenberg
 		if ( translations || extraTranslations ) {
 			setLocaleData( allTranslations, domain );
diff --git a/packages/react-native-editor/src/setup.js b/packages/react-native-editor/src/setup.js
index 912efeaee94b97..d6da4cb0542a3c 100644
--- a/packages/react-native-editor/src/setup.js
+++ b/packages/react-native-editor/src/setup.js
@@ -7,10 +7,11 @@ import { I18nManager, LogBox } from 'react-native';
  * WordPress dependencies
  */
 import { unregisterBlockType, getBlockType } from '@wordpress/blocks';
-import { addAction, addFilter } from '@wordpress/hooks';
+import { addAction, addFilter, doAction } from '@wordpress/hooks';
 import * as wpData from '@wordpress/data';
-import { initializeEditor } from '@wordpress/edit-post';
 import { registerCoreBlocks } from '@wordpress/block-library';
+// eslint-disable-next-line no-restricted-imports
+import { initializeEditor } from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
@@ -21,21 +22,6 @@ import setupApiFetch from './api-fetch-setup';
 const reactNativeSetup = () => {
 	LogBox.ignoreLogs( [
 		'Require cycle:', // TODO: Refactor to remove require cycles
-		'lineHeight', // TODO: Remove lineHeight warning from Aztec
-		/**
-		 * TODO: Migrate to @gorhom/bottom-sheet or replace usage of
-		 * LayoutAnimation to Animated. KeyboardAvoidingView's usage of
-		 * LayoutAnimation collides with both BottomSheet and NavigationContainer
-		 * usage of LayoutAnimation simultaneously https://github.com/facebook/react-native/issues/12663,
-		 * https://github.com/facebook/react-native/issues/10606
-		 */
-		'Overriding previous layout animation',
-	] );
-
-	// "@react-navigation" package uses the old API of gesture handler,
-	// so the warning will be silenced until it gets updated.
-	LogBox.ignoreLogs( [
-		"[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!",
 	] );
 
 	I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.
@@ -49,10 +35,6 @@ const gutenbergSetup = () => {
 
 	setupApiFetch();
 
-	const isHermes = () => global.HermesInternal !== null;
-	// eslint-disable-next-line no-console
-	console.log( 'Hermes is: ' + isHermes() );
-
 	setupInitHooks();
 };
 
@@ -69,6 +51,8 @@ const setupInitHooks = () => {
 		) {
 			unregisterBlockType( 'core/block' );
 		}
+
+		doAction( 'native.post-register-core-blocks', props );
 	} );
 
 	// Map native props to Editor props
@@ -86,7 +70,6 @@ const setupInitHooks = () => {
 				featuredImageId,
 				rawStyles,
 				rawFeatures,
-				galleryWithImageBlocks,
 				locale,
 			} = props;
 
@@ -110,7 +93,6 @@ const setupInitHooks = () => {
 				capabilities,
 				rawStyles,
 				rawFeatures,
-				galleryWithImageBlocks,
 				locale,
 			};
 		}
diff --git a/packages/react-native-editor/src/test/api-fetch-setup.test.js b/packages/react-native-editor/src/test/api-fetch-setup.test.js
index 858e8ddb45ee52..efa31751ff7428 100644
--- a/packages/react-native-editor/src/test/api-fetch-setup.test.js
+++ b/packages/react-native-editor/src/test/api-fetch-setup.test.js
@@ -1,22 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
 import { isPathSupported, shouldEnableCaching } from '../api-fetch-setup';
 
-const supportedPaths = [
-	'wp/v2/media/54?context=edit&_locale=user',
-	'wp/v2/media/5?context=edit',
-	'wp/v2/media/54/',
-	'wp/v2/media/',
-	'wp/v2/media?context=edit&_locale=user',
-	'wp/v2/categories/',
-	'wp/v2/blocks/28?_locale=user',
-	'/wp/v2/blocks?per_page=100&context=edit&_locale=user',
-];
+const supportedPaths = {
+	GET: [
+		'wp/v2/media/54?context=edit&_locale=user',
+		'wp/v2/media/5?context=edit',
+		'wp/v2/media/54/',
+		'wp/v2/media/',
+		'wp/v2/media?context=edit&_locale=user',
+		'wp/v2/categories/',
+		'wp/v2/blocks/28?_locale=user',
+		'/wp/v2/blocks?per_page=100&context=edit&_locale=user',
+	],
+};
 
-const unsupportedPaths = [
-	'wp/v1/media/', // Made up example.
-];
+// Made up examples.
+const unsupportedPaths = {
+	GET: [ 'wp/v1/media/' ],
+	POST: [ 'wp/v2/categories' ],
+};
 
 const enabledCachingPaths = [
 	'wp/v2/media/54?context=edit&_locale=user',
@@ -33,17 +41,44 @@ const disabledCachingPaths = [
 ];
 
 describe( 'isPathSupported', () => {
-	supportedPaths.forEach( ( path ) => {
-		it( `supports ${ path }`, () => {
-			expect( isPathSupported( path ) ).toBe( true );
+	describe( 'GET requests', () => {
+		supportedPaths.GET.forEach( ( path ) => {
+			it( `supports ${ path }`, () => {
+				expect( isPathSupported( path, 'GET' ) ).toBe( true );
+			} );
+		} );
+
+		unsupportedPaths.GET.forEach( ( path ) => {
+			it( `does not support ${ path }`, () => {
+				expect( isPathSupported( path, 'GET' ) ).toBe( false );
+			} );
 		} );
 	} );
 
-	unsupportedPaths.forEach( ( path ) => {
-		it( `does not support ${ path }`, () => {
-			expect( isPathSupported( path ) ).toBe( false );
+	describe( 'POST requests', () => {
+		unsupportedPaths.POST.forEach( ( path ) => {
+			it( `does not support ${ path }`, () => {
+				expect( isPathSupported( path, 'POST' ) ).toBe( false );
+			} );
 		} );
 	} );
+
+	it( 'checks supported endpoints provided by WP hook', () => {
+		addFilter(
+			'native.supported_endpoints',
+			'gutenberg-mobile',
+			( endpoints ) => {
+				return {
+					GET: [ ...endpoints.GET, /test\/get-endpoint/i ],
+					POST: [ ...endpoints.POST, /test\/post-endpoint/i ],
+				};
+			}
+		);
+		expect( isPathSupported( 'test/get-endpoint', 'GET' ) ).toBe( true );
+		expect( isPathSupported( 'test/post-endpoint', 'POST' ) ).toBe( true );
+		expect( isPathSupported( 'test/bad-endpoint', 'GET' ) ).toBe( false );
+		expect( isPathSupported( 'test/bad-endpoint', 'POST' ) ).toBe( false );
+	} );
 } );
 
 describe( 'shouldEnableCaching', () => {
@@ -58,4 +93,17 @@ describe( 'shouldEnableCaching', () => {
 			expect( shouldEnableCaching( path ) ).toBe( false );
 		} );
 	} );
+
+	it( 'does not enable caching for endpoints provided to filter', () => {
+		addFilter(
+			'native.disabled_caching_endpoints',
+			'gutenberg-mobile',
+			( endpoints ) => {
+				return [ ...endpoints, /wp\/v2\/categories/i ];
+			}
+		);
+
+		// Filter was used to stop caching an endpoint from `enabledCachingPaths` array.
+		expect( shouldEnableCaching( 'wp/v2/categories' ) ).toBe( false );
+	} );
 } );
diff --git a/packages/react-native-editor/src/parser/block-parser-code.test.js b/packages/react-native-editor/src/test/block-parser-code.test.js
similarity index 94%
rename from packages/react-native-editor/src/parser/block-parser-code.test.js
rename to packages/react-native-editor/src/test/block-parser-code.test.js
index 276e73b6d7d5b7..e53433f67c5ec5 100644
--- a/packages/react-native-editor/src/parser/block-parser-code.test.js
+++ b/packages/react-native-editor/src/test/block-parser-code.test.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import '../globals';
-
 /**
  * WordPress dependencies
  */
diff --git a/packages/react-native-editor/src/parser/block-parser-more.test.js b/packages/react-native-editor/src/test/block-parser-more.test.js
similarity index 94%
rename from packages/react-native-editor/src/parser/block-parser-more.test.js
rename to packages/react-native-editor/src/test/block-parser-more.test.js
index c2f2360fc64a2c..4b7b91d5a90c72 100644
--- a/packages/react-native-editor/src/parser/block-parser-more.test.js
+++ b/packages/react-native-editor/src/test/block-parser-more.test.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import '../globals';
-
 /**
  * WordPress dependencies
  */
diff --git a/packages/react-native-editor/src/parser/block-parser-paragraph.test.js b/packages/react-native-editor/src/test/block-parser-paragraph.test.js
similarity index 94%
rename from packages/react-native-editor/src/parser/block-parser-paragraph.test.js
rename to packages/react-native-editor/src/test/block-parser-paragraph.test.js
index d9f451005901a4..823b85e4e29ccc 100644
--- a/packages/react-native-editor/src/parser/block-parser-paragraph.test.js
+++ b/packages/react-native-editor/src/test/block-parser-paragraph.test.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import '../globals';
-
 /**
  * WordPress dependencies
  */
diff --git a/packages/react-native-editor/src/test/index.test.js b/packages/react-native-editor/src/test/index.test.js
index 8e27cecf8e75b9..e64e5ff934b202 100644
--- a/packages/react-native-editor/src/test/index.test.js
+++ b/packages/react-native-editor/src/test/index.test.js
@@ -8,7 +8,9 @@ import { initializeEditor, render } from 'test/helpers';
  * WordPress dependencies
  */
 import * as wpHooks from '@wordpress/hooks';
-import '@wordpress/jest-console';
+import { registerCoreBlocks } from '@wordpress/block-library';
+// eslint-disable-next-line no-restricted-imports
+import * as wpEditPost from '@wordpress/edit-post';
 
 /**
  * Internal dependencies
@@ -18,6 +20,11 @@ import setupLocale from '../setup-locale';
 
 jest.mock( 'react-native/Libraries/ReactNative/AppRegistry' );
 jest.mock( '../setup-locale' );
+jest.mock( '@wordpress/block-library', () => ( {
+	__esModule: true,
+	registerCoreBlocks: jest.fn(),
+	NEW_BLOCK_TYPES: {},
+} ) );
 
 const getEditorComponent = ( registerParams ) => {
 	let EditorComponent;
@@ -150,50 +157,55 @@ describe( 'Register Gutenberg', () => {
 		expect( hookCallOrder ).toBeLessThan( onRenderEditorCallOrder );
 	} );
 
-	it( 'dispatches "native.render" hook after the editor is rendered', () => {
-		const doAction = jest.spyOn( wpHooks, 'doAction' );
-
+	it( 'dispatches "native.post-register-core-blocks" hook after core blocks are registered', async () => {
 		// An empty component is provided in order to listen for render calls of the editor component.
 		const onRenderEditor = jest.fn();
 		const MockEditor = () => {
 			onRenderEditor();
 			return null;
 		};
-		jest.mock( '../setup', () => ( {
-			__esModule: true,
-			default: jest.fn().mockReturnValue( <MockEditor /> ),
-		} ) );
+
+		// Unmock setup module to render the above mocked editor component.
+		jest.unmock( '../setup' );
+
+		// The mocked editor component is provided via `initializeEditor` function of
+		// `@wordpress/edit-post` package, instead of via the setup as above test cases.
+		const initializeEditorMock = jest
+			.spyOn( wpEditPost, 'initializeEditor' )
+			.mockReturnValue( <MockEditor /> );
+
+		// Listen to WP hook
+		const callback = jest.fn();
+		wpHooks.addAction(
+			'native.post-register-core-blocks',
+			'test',
+			callback
+		);
 
 		const EditorComponent = getEditorComponent();
-		// Modules are isolated upon editor rendering in order to guarantee that the setup module is imported on every test.
-		jest.isolateModules( () => render( <EditorComponent /> ) );
+		render( <EditorComponent /> );
 
-		const hookCallIndex = 1;
 		// "invocationCallOrder" can be used to compare call orders between different mocks.
 		// Reference: https://github.com/facebook/jest/issues/4402#issuecomment-534516219
-		const hookCallOrder =
-			doAction.mock.invocationCallOrder[ hookCallIndex ];
+		const callbackCallOrder = callback.mock.invocationCallOrder[ 0 ];
+		const registerCoreBlocksCallOrder =
+			registerCoreBlocks.mock.invocationCallOrder[ 0 ];
 		const onRenderEditorCallOrder =
 			onRenderEditor.mock.invocationCallOrder[ 0 ];
-		const hookName = doAction.mock.calls[ hookCallIndex ][ 0 ];
 
-		expect( hookName ).toBe( 'native.render' );
-		expect( hookCallOrder ).toBeGreaterThan( onRenderEditorCallOrder );
+		expect( callbackCallOrder ).toBeGreaterThan(
+			registerCoreBlocksCallOrder
+		);
+		expect( callbackCallOrder ).toBeLessThan( onRenderEditorCallOrder );
+
+		initializeEditorMock.mockRestore();
 	} );
 
 	it( 'initializes the editor', async () => {
-		// Unmock setup module to render the actual editor component.
-		jest.unmock( '../setup' );
-
-		const EditorComponent = getEditorComponent();
-		const screen = await initializeEditor(
-			{},
-			{ component: EditorComponent }
-		);
+		const screen = await initializeEditor();
 		// Inner blocks create BlockLists so let's take into account selecting the main one
 		const blockList = screen.getAllByTestId( 'block-list-wrapper' )[ 0 ];
 
 		expect( blockList ).toBeVisible();
-		expect( console ).toHaveLoggedWith( 'Hermes is: true' );
 	} );
 } );
diff --git a/packages/readable-js-assets-webpack-plugin/.npmrc b/packages/readable-js-assets-webpack-plugin/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/readable-js-assets-webpack-plugin/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 959107b5146029..08912695e5a8a5 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.41.0 (2024-05-16)
+
+## 2.40.0 (2024-05-02)
+
+## 2.39.0 (2024-04-19)
+
+## 2.38.0 (2024-04-03)
+
+## 2.37.0 (2024-03-21)
+
+## 2.36.0 (2024-03-06)
+
+## 2.35.0 (2024-02-21)
+
+## 2.34.0 (2024-02-09)
+
+## 2.33.0 (2024-01-24)
+
+## 2.32.0 (2024-01-10)
+
+## 2.31.0 (2023-12-13)
+
+## 2.30.0 (2023-11-29)
+
+## 2.29.0 (2023-11-16)
+
+## 2.28.0 (2023-11-02)
+
+## 2.27.0 (2023-10-18)
+
+## 2.26.0 (2023-10-05)
+
+## 2.25.0 (2023-09-20)
+
+## 2.24.0 (2023-08-31)
+
+## 2.23.0 (2023-08-16)
+
+## 2.22.0 (2023-08-10)
+
+## 2.21.0 (2023-07-20)
+
+## 2.20.0 (2023-07-05)
+
+## 2.19.0 (2023-06-23)
+
+## 2.18.0 (2023-06-07)
+
+## 2.17.0 (2023-05-24)
+
+## 2.16.0 (2023-05-10)
+
+## 2.15.0 (2023-04-26)
+
+## 2.14.0 (2023-04-12)
+
+## 2.13.0 (2023-03-29)
+
+## 2.12.0 (2023-03-15)
+
+## 2.11.0 (2023-03-01)
+
+## 2.10.0 (2023-02-15)
+
+## 2.9.0 (2023-02-01)
+
+## 2.8.0 (2023-01-11)
+
+## 2.7.0 (2023-01-02)
+
+## 2.6.0 (2022-12-14)
+
 ## 2.5.0 (2022-11-16)
 
 ## 2.4.0 (2022-11-02)
@@ -14,6 +118,6 @@
 
 ## 2.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
diff --git a/packages/readable-js-assets-webpack-plugin/README.md b/packages/readable-js-assets-webpack-plugin/README.md
index 47d75a6f00edff..eb3eda12692d21 100644
--- a/packages/readable-js-assets-webpack-plugin/README.md
+++ b/packages/readable-js-assets-webpack-plugin/README.md
@@ -14,7 +14,7 @@ Install the module
 npm install @wordpress/readable-js-assets-webpack-plugin --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It also requires webpack 4.8.3 and newer. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index c95434fd2f8af0..5fa231d98088db 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "2.5.0",
+	"version": "3.13.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14.0"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"index.js"
diff --git a/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap b/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
index ec163c00bd93de..92670d3d1cb376 100644
--- a/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/readable-js-assets-webpack-plugin/test/__snapshots__/build.js.snap
@@ -2,7 +2,6 @@
 
 exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file index.js should match snapshot 1`] = `
 "/******/ (() => { // webpackBootstrap
-var __webpack_exports__ = {};
 function notMinified() {
 	// eslint-disable-next-line no-console
 	console.log( 'hello' );
@@ -13,11 +12,10 @@ notMinified();
 ;"
 `;
 
-exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file index.min.js should match snapshot 1`] = `"console.log(\\"hello\\");"`;
+exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file index.min.js should match snapshot 1`] = `"console.log("hello");"`;
 
 exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file view.js should match snapshot 1`] = `
 "/******/ (() => { // webpackBootstrap
-var __webpack_exports__ = {};
 function notMinified() {
 	// eslint-disable-next-line no-console
 	console.log( 'hello' );
@@ -28,4 +26,4 @@ notMinified();
 ;"
 `;
 
-exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file view.min.js should match snapshot 1`] = `"console.log(\\"hello\\");"`;
+exports[`ReadableJsAssetsWebpackPlugin should produce the expected output: Asset file view.min.js should match snapshot 1`] = `"console.log("hello");"`;
diff --git a/packages/readable-js-assets-webpack-plugin/test/build.js b/packages/readable-js-assets-webpack-plugin/test/build.js
index e3a7e26dcdf12f..0b146db55d6c47 100644
--- a/packages/readable-js-assets-webpack-plugin/test/build.js
+++ b/packages/readable-js-assets-webpack-plugin/test/build.js
@@ -3,13 +3,11 @@
  */
 const fs = require( 'fs' );
 const glob = require( 'glob' ).sync;
-const mkdirp = require( 'mkdirp' ).sync;
+const mkdirp = require( 'mkdirp' ).mkdirp.sync;
 const path = require( 'path' );
 const rimraf = require( 'rimraf' ).sync;
 const webpack = require( 'webpack' );
 
-jest.useRealTimers();
-
 describe( 'ReadableJsAssetsWebpackPlugin', () => {
 	const outputDirectory = path.join( __dirname, 'build' );
 	const testDirectory = path.join( __dirname, 'fixtures' );
diff --git a/packages/redux-routine/.npmrc b/packages/redux-routine/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/redux-routine/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index 911f9dd922c7d3..afc65f590b5b66 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.58.0 (2024-05-16)
+
+## 4.57.0 (2024-05-02)
+
+## 4.56.0 (2024-04-19)
+
+## 4.55.0 (2024-04-03)
+
+## 4.54.0 (2024-03-21)
+
+## 4.53.0 (2024-03-06)
+
+## 4.52.0 (2024-02-21)
+
+## 4.51.0 (2024-02-09)
+
+## 4.50.0 (2024-01-24)
+
+## 4.49.0 (2024-01-10)
+
+## 4.48.0 (2023-12-13)
+
+## 4.47.0 (2023-11-29)
+
+## 4.46.0 (2023-11-16)
+
+## 4.45.0 (2023-11-02)
+
+## 4.44.0 (2023-10-18)
+
+## 4.43.0 (2023-10-05)
+
+## 4.42.0 (2023-09-20)
+
+## 4.41.0 (2023-08-31)
+
+## 4.40.0 (2023-08-16)
+
+## 4.39.0 (2023-08-10)
+
+## 4.38.0 (2023-07-20)
+
+## 4.37.0 (2023-07-05)
+
+## 4.36.0 (2023-06-23)
+
+## 4.35.0 (2023-06-07)
+
+## 4.34.0 (2023-05-24)
+
+## 4.33.0 (2023-05-10)
+
+## 4.32.0 (2023-04-26)
+
+## 4.31.0 (2023-04-12)
+
+## 4.30.0 (2023-03-29)
+
+## 4.29.0 (2023-03-15)
+
+## 4.28.0 (2023-03-01)
+
+## 4.27.0 (2023-02-15)
+
+## 4.26.0 (2023-02-01)
+
+## 4.25.0 (2023-01-11)
+
+## 4.24.0 (2023-01-02)
+
+## 4.23.0 (2022-12-14)
+
 ## 4.22.0 (2022-11-16)
 
 ## 4.21.0 (2022-11-02)
@@ -20,7 +124,7 @@
 
 ## 4.16.0 (2022-08-24)
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
@@ -69,7 +173,7 @@
 
 ## 3.7.0 (2020-02-04)
 
-### Bug Fix
+### Bug Fixes
 
 -   Change the `isGenerator` check for better compatibility with generator helper libraries ([#19666](https://github.com/WordPress/gutenberg/pull/19666)).
 
@@ -86,23 +190,23 @@
 
 ## 3.0.2 (2018-10-18)
 
-### Bug Fix
+### Bug Fixes
 
 -   Account for null value in redux-routine createRuntime (introduces `isAction` and `isActionOfType` methods to assist with that).
 
 ## 3.0.0 (2018-09-30)
 
-### Breaking change
+### Breaking Changes
 
 -   The middleware returns a promise resolving once the runtime finishes iterating over the generator.
 -   It's not possible to kill the execution of the runtime anymore by returning `undefined`
 
-## Bug Fixes
+### Bug Fixes
 
 -   Fix running routines in Firefox.
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/redux-routine/README.md b/packages/redux-routine/README.md
index 53a5086adbe865..b455d52db8b819 100644
--- a/packages/redux-routine/README.md
+++ b/packages/redux-routine/README.md
@@ -61,12 +61,7 @@ request has completed does the action creator procede to return the `SET_TEMPERA
 
 ### default
 
-Creates a Redux middleware, given an object of controls where each key is an
-action type for which to act upon, the value a function which returns either
-a promise which is to resolve when evaluation of the action should continue,
-or a value. The value or resolved promise value is assigned on the return
-value of the yield assignment. If the control handler returns undefined, the
-execution is not continued.
+Creates a Redux middleware, given an object of controls where each key is an action type for which to act upon, the value a function which returns either a promise which is to resolve when evaluation of the action should continue, or a value. The value or resolved promise value is assigned on the return value of the yield assignment. If the control handler returns undefined, the execution is not continued.
 
 _Parameters_
 
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 0eb270ec7cc576..4946cdf6dcaada 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "4.22.0",
+	"version": "5.13.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,15 +21,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
+		"@babel/runtime": "7.25.7",
 		"is-plain-object": "^5.0.0",
 		"is-promise": "^4.0.0",
 		"rungen": "^0.3.2"
diff --git a/packages/redux-routine/src/runtime.ts b/packages/redux-routine/src/runtime.ts
index 24289c4057037d..741a942fa01885 100644
--- a/packages/redux-routine/src/runtime.ts
+++ b/packages/redux-routine/src/runtime.ts
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { create, Control } from 'rungen';
+import type { Control } from 'rungen';
+import { create } from 'rungen';
 import isPromise from 'is-promise';
 import type { Dispatch, AnyAction } from 'redux';
 
@@ -13,8 +14,8 @@ import { isActionOfType, isAction } from './is-action';
 /**
  * Create a co-routine runtime.
  *
- * @param  controls Object of control handlers.
- * @param  dispatch Unhandled action dispatch.
+ * @param controls Object of control handlers.
+ * @param dispatch Unhandled action dispatch.
  */
 export default function createRuntime(
 	controls: Record<
diff --git a/packages/redux-routine/tsconfig.json b/packages/redux-routine/tsconfig.json
index f108b30216124f..6e33d8ff82d47e 100644
--- a/packages/redux-routine/tsconfig.json
+++ b/packages/redux-routine/tsconfig.json
@@ -1,9 +1,9 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types",
-		"noUnusedParameters": false
+		"declarationDir": "build-types"
 	},
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/report-flaky-tests/.npmrc b/packages/report-flaky-tests/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/report-flaky-tests/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/report-flaky-tests/action.yml b/packages/report-flaky-tests/action.yml
index 7cea6a50c23a3f..00b84b26687643 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'
+    using: 'node20'
     main: 'build/index.js'
diff --git a/packages/report-flaky-tests/package.json b/packages/report-flaky-tests/package.json
index 0bb58464d33238..77de2a4f3ddee0 100644
--- a/packages/report-flaky-tests/package.json
+++ b/packages/report-flaky-tests/package.json
@@ -20,16 +20,15 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.9"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"types": "build-types",
 	"dependencies": {
 		"@actions/core": "^1.8.0",
 		"@actions/github": "^5.0.1",
-		"jest-message-util": "^28.0.2",
-		"unzipper": "^0.10.11"
+		"jest-message-util": "^29.6.2"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/report-flaky-tests/src/__tests__/__snapshots__/markdown.test.ts.snap b/packages/report-flaky-tests/src/__tests__/__snapshots__/markdown.test.ts.snap
index 53068ae525a98f..c7c4e329955e11 100644
--- a/packages/report-flaky-tests/src/__tests__/__snapshots__/markdown.test.ts.snap
+++ b/packages/report-flaky-tests/src/__tests__/__snapshots__/markdown.test.ts.snap
@@ -34,7 +34,7 @@ exports[`formatTestErrorMessage should format test error message for jest-circus
     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')
+    ["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)
@@ -45,7 +45,7 @@ exports[`formatTestErrorMessage should format test error message for jest-circus
       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 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
@@ -53,7 +53,7 @@ exports[`formatTestErrorMessage should format test error message for jest-circus
     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')
+    ["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)
@@ -64,13 +64,13 @@ exports[`formatTestErrorMessage should format test error message for jest-circus
       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 unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)"]
           at runMicrotasks (<anonymous>)
 "
 `;
 
 exports[`parseIssueBody should parse issue body 1`] = `
-"<!-- __META_DATA__:{\\"failedTimes\\":5,\\"totalCommits\\":95} -->
+"<!-- __META_DATA__:{"failedTimes":5,"totalCommits":95} -->
 **Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
 ## Test title
@@ -81,10 +81,10 @@ Test title
 
 ## Errors
 <!-- __TEST_RESULTS_LIST__ -->
-<!-- __TEST_RESULT__ --><time datetime=\\"2020-08-01T00:00:00.000Z\\"><code>[2020-08-01T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href=\\"https://github.com/WordPress/gutenberg/actions/runs/2282393879\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
+<!-- __TEST_RESULT__ --><time datetime="2020-08-01T00:00:00.000Z"><code>[2020-08-01T00:00:00.000Z]</code></time> Test passed after 1 failed attempt on <a href="https://github.com/WordPress/gutenberg/actions/runs/2282393879"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->
 <!-- __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/2297863316\\"><code>try/some-branch</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/2297863316"><code>try/some-branch</code></a>.
 </summary>
 
 \`\`\`
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..8920f757c0efc6 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,127 @@
 // 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: 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>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.**
 
@@ -14,7 +135,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>trunk</code></a>.
 </summary>
 
 \`\`\`
@@ -23,7 +144,7 @@ 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')
+    ["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)
@@ -34,7 +155,7 @@ Should insert new template part on creation
       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 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
@@ -42,7 +163,7 @@ 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')
+    ["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)
@@ -53,7 +174,7 @@ Should insert new template part on creation
       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 unstable_runWithPriority (../../http:/localhost:8889/wp-content/plugins/gutenberg/build/vendors/react.min.js?ver=6.1-alpha-53362:1:7430)"]
           at runMicrotasks (<anonymous>)
 
 \`\`\`
@@ -62,8 +183,8 @@ Should insert new template part on creation
 "
 `;
 
-exports[`Report flaky tests should report flaky tests to issue: Updated existing flaky issue 1`] = `
-"<!-- __META_DATA__:{\\"failedTimes\\":58,\\"totalCommits\\":134,\\"baseCommit\\":\\"32bb60d08b75486341d8a63b9e786152889aa02d\\"} -->
+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
@@ -74,81 +195,81 @@ should copy only partial selection of text blocks
 
 ## 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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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__ -->
+<!-- __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=\\"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>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..4a0fa73f354924 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 type { ReportedIssue } from '../types';
 
 jest.useFakeTimers( 'modern' ).setSystemTime( new Date( '2020-05-10' ) );
 
@@ -50,7 +53,7 @@ describe( 'formatTestResults', () => {
 		} );
 
 		expect( formatted ).toMatchInlineSnapshot(
-			`"<!-- __TEST_RESULT__ --><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/2282393879\\"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->"`
+			`"<!-- __TEST_RESULT__ --><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/2282393879"><code>trunk</code></a>.<!-- /__TEST_RESULT__ -->"`
 		);
 
 		expect( renderToDisplayText( formatted ) ).toMatchInlineSnapshot(
@@ -70,7 +73,7 @@ describe( 'formatTestResults', () => {
 		expect( formatted ).toMatchInlineSnapshot( `
 		"<!-- __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/2282393879\\"><code>trunk</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/2282393879"><code>trunk</code></a>.
 		</summary>
 
 		\`\`\`
@@ -98,7 +101,7 @@ describe( 'renderIssueBody', () => {
 		} );
 
 		expect( body ).toMatchInlineSnapshot( `
-		"<!-- __META_DATA__:{\\"failedTimes\\":5,\\"totalCommits\\":100} -->
+		"<!-- __META_DATA__:{"failedTimes":5,"totalCommits":100} -->
 		**Flaky test detected. This is an auto-generated issue by GitHub Actions. Please do NOT edit this manually.**
 
 		## Test title
@@ -226,6 +229,58 @@ 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 commitSHA = 'commitSHA';
+
+		const commentBody = renderCommitComment( {
+			reportedIssues,
+			runURL,
+			commitSHA,
+		} );
+
+		expect( commentBody ).toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected in commitSHA.**
+		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: '',
+			commitSHA: 'commitSHA',
+		} );
+
+		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..f194d59c04fee6 100644
--- a/packages/report-flaky-tests/src/__tests__/run.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/run.test.ts
@@ -10,22 +10,43 @@ 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: {
+		number: 10,
+		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,20 @@ jest.mock( '@actions/core', () => ( {
 } ) );
 
 const mockAPI = {
-	downloadReportFromArtifact: jest.fn(),
 	fetchAllIssuesLabeledFlaky: jest.fn(),
 	findMergeBaseCommit: jest.fn(),
 	updateIssue: jest.fn(),
 	createIssue: jest.fn(),
+	createCommentOnPR: jest.fn(),
+	createCommentOnCommit: 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 +77,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 +89,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 +101,138 @@ 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.createCommentOnPR.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 ).not.toHaveBeenCalled();
+
+		expect( mockAPI.createCommentOnPR ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createCommentOnPR.mock.calls[ 0 ][ 0 ] ).toBe( 10 );
+		expect( mockAPI.createCommentOnPR.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected in headSHA.**
+		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\`"
+	` );
+	} );
+
+	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.createCommentOnCommit.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 +251,24 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.createIssue.mock.calls[ 0 ][ 0 ].body ).toMatchSnapshot(
 			'Created new flaky issue'
 		);
+
+		expect( mockAPI.createCommentOnCommit ).toHaveBeenCalledTimes( 1 );
+		expect( mockAPI.createCommentOnCommit.mock.calls[ 0 ][ 0 ] ).toBe(
+			'commitSHA'
+		);
+		expect( mockAPI.createCommentOnCommit.mock.calls[ 0 ][ 1 ] )
+			.toMatchInlineSnapshot( `
+		"<!-- flaky-tests-report-comment -->
+		**Flaky tests detected in commitSHA.**
+		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 +289,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 +313,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 +323,8 @@ describe( 'Report flaky tests', () => {
 		expect( mockAPI.findMergeBaseCommit ).toHaveBeenCalledTimes( 1 );
 
 		expect( mockAPI.updateIssue ).not.toHaveBeenCalled();
+
+		expect( mockAPI.createCommentOnPR ).not.toHaveBeenCalled();
+		expect( mockAPI.createCommentOnCommit ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/report-flaky-tests/src/github-api.ts b/packages/report-flaky-tests/src/github-api.ts
index b7aa0990085683..c4e52d229c612b 100644
--- a/packages/report-flaky-tests/src/github-api.ts
+++ b/packages/report-flaky-tests/src/github-api.ts
@@ -2,15 +2,9 @@
  * 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';
-
 type Octokit = InstanceType< typeof GitHub >;
 
 type Repo = {
@@ -27,44 +21,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 +72,85 @@ class GitHubAPI {
 
 		return data;
 	}
+
+	async createCommentOnCommit(
+		sha: string,
+		body: string,
+		isReportComment: ( body: string ) => boolean
+	) {
+		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;
+	}
+
+	async createCommentOnPR(
+		prNumber: number,
+		body: string,
+		isReportComment: ( body: string ) => boolean
+	) {
+		let reportComment;
+		let page = 1;
+
+		while ( ! reportComment ) {
+			const { data: comments } =
+				await this.#octokit.rest.issues.listComments( {
+					...this.#repo,
+					issue_number: prNumber,
+					page,
+				} );
+			reportComment = comments.find(
+				( comment ) => comment.body && isReportComment( comment.body )
+			);
+			if ( comments.length > 0 ) {
+				page += 1;
+			} else {
+				break;
+			}
+		}
+
+		if ( reportComment ) {
+			const { data } = await this.#octokit.rest.issues.updateComment( {
+				...this.#repo,
+				comment_id: reportComment.id,
+				body,
+			} );
+
+			return data;
+		}
+
+		const { data } = await this.#octokit.rest.issues.createComment( {
+			...this.#repo,
+			issue_number: prNumber,
+			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..0f55c12a247130 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,38 @@ function parseIssueBody( body: string ) {
 	};
 }
 
+const FLAKY_TESTS_REPORT_COMMENT_TOKEN = `flaky-tests-report-comment`;
+
+function renderCommitComment( {
+	reportedIssues,
+	runURL,
+	commitSHA,
+}: {
+	reportedIssues: ReportedIssue[];
+	runURL: string;
+	commitSHA: string;
+} ) {
+	return `<!-- ${ FLAKY_TESTS_REPORT_COMMENT_TOKEN } -->
+**Flaky tests detected in ${ commitSHA }.**
+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..d68ced5be24037 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,
+	isReportComment,
 } 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 isPR = github.context.eventName === 'pull_request';
+	const headBranch = isPR
+		? // 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;
@@ -130,7 +137,11 @@ async function run() {
 					formattedTestResults,
 				} ),
 			} );
-		} else {
+		} else if (
+			! reportedIssue &&
+			// Don't create a flaky test issue if the test was run inside a PR.
+			! isPR
+		) {
 			issue = await api.createIssue( {
 				title: issueTitle,
 				body: renderIssueBody( {
@@ -143,8 +154,44 @@ async function run() {
 			} );
 		}
 
-		core.info( `Reported flaky test to ${ issue.html_url }` );
+		if ( issue ) {
+			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 { html_url: commentUrl } = isPR
+		? await api.createCommentOnPR(
+				// Cast the payload type: https://github.com/actions/toolkit/tree/main/packages/github#webhook-payload-typescript-definitions
+				( github.context.payload as PullRequestEvent ).number,
+				renderCommitComment( {
+					runURL,
+					reportedIssues,
+					commitSHA: ( github.context.payload as PullRequestEvent )
+						.pull_request.head.sha,
+				} ),
+				isReportComment
+		  )
+		: await api.createCommentOnCommit(
+				github.context.sha,
+				renderCommitComment( {
+					runURL,
+					reportedIssues,
+					commitSHA: github.context.sha,
+				} ),
+				isReportComment
+		  );
+
+	core.info( `Reported the summary of the flaky tests to ${ commentUrl }` );
 }
 
 function getIssueTitle( testTitle: string ) {
diff --git a/packages/report-flaky-tests/src/strip-ansi.ts b/packages/report-flaky-tests/src/strip-ansi.ts
index 0aca50714cdd38..2cbd7abb27c8e1 100644
--- a/packages/report-flaky-tests/src/strip-ansi.ts
+++ b/packages/report-flaky-tests/src/strip-ansi.ts
@@ -4,7 +4,7 @@
  * @see https://github.com/chalk/strip-ansi
  * Licensed under MIT license.
  *
- * @param  string The ansi string.
+ * @param string The ansi string.
  */
 function stripAnsi( string: string ) {
 	return string.replace(
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;
+};
diff --git a/packages/report-flaky-tests/tsconfig.json b/packages/report-flaky-tests/tsconfig.json
index 3a3ae6ff9520af..09fc242db010db 100644
--- a/packages/report-flaky-tests/tsconfig.json
+++ b/packages/report-flaky-tests/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"module": "CommonJS",
diff --git a/packages/reusable-blocks/.npmrc b/packages/reusable-blocks/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/reusable-blocks/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 3bc91adf13fd33..83ee4e4c1add3f 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
@@ -42,7 +150,7 @@
 
 ## 3.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/compose` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,7 +158,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -69,7 +177,7 @@
 
 ## 1.1.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the reusable blocks namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 79808b21425ed7..b56837df1d34c5 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,29 +19,33 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/notices": "file:../notices",
-		"@wordpress/url": "file:../url"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/url": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js
index 3635c0d1c3e814..e0a7c5df4782ca 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/index.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -10,23 +9,23 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import ReusableBlockConvertButton from './reusable-block-convert-button';
 import ReusableBlocksManageButton from './reusable-blocks-manage-button';
 
-function ReusableBlocksMenuItems( { clientIds, rootClientId } ) {
+export default function ReusableBlocksMenuItems( { rootClientId } ) {
 	return (
-		<>
-			<ReusableBlockConvertButton
-				clientIds={ clientIds }
-				rootClientId={ rootClientId }
-			/>
-			{ clientIds.length === 1 && (
-				<ReusableBlocksManageButton clientId={ clientIds[ 0 ] } />
+		<BlockSettingsMenuControls>
+			{ ( { onClose, selectedClientIds } ) => (
+				<>
+					<ReusableBlockConvertButton
+						clientIds={ selectedClientIds }
+						rootClientId={ rootClientId }
+						onClose={ onClose }
+					/>
+					{ selectedClientIds.length === 1 && (
+						<ReusableBlocksManageButton
+							clientId={ selectedClientIds[ 0 ] }
+						/>
+					) }
+				</>
 			) }
-		</>
+		</BlockSettingsMenuControls>
 	);
 }
-
-export default withSelect( ( select ) => {
-	const { getSelectedBlockClientIds } = select( blockEditorStore );
-	return {
-		clientIds: getSelectedBlockClientIds(),
-	};
-} )( ReusableBlocksMenuItems );
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index 8762729a8f2261..e0d8592df4d8c3 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -2,22 +2,20 @@
  * WordPress dependencies
  */
 import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useCallback, useState } from '@wordpress/element';
 import {
 	MenuItem,
 	Modal,
 	Button,
 	TextControl,
-	Flex,
-	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	ToggleControl,
 } from '@wordpress/components';
 import { symbol } from '@wordpress/icons';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -32,19 +30,31 @@ import { store } from '../../store';
  * @param {Object}   props              Component props.
  * @param {string[]} props.clientIds    Client ids of selected blocks.
  * @param {string}   props.rootClientId ID of the currently selected top-level block.
- * @return {import('@wordpress/element').WPComponent} The menu control or null.
+ * @param {()=>void} props.onClose      Callback to close the menu.
+ * @return {import('react').ComponentType} The menu control or null.
  */
 export default function ReusableBlockConvertButton( {
 	clientIds,
 	rootClientId,
+	onClose,
 } ) {
+	const [ syncType, setSyncType ] = useState( undefined );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 	const canConvert = useSelect(
 		( select ) => {
 			const { canUser } = select( coreStore );
-			const { getBlocksByClientId, canInsertBlockType } =
-				select( blockEditorStore );
+			const {
+				getBlocksByClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+
+			const rootId =
+				rootClientId ||
+				( clientIds.length > 0
+					? getBlockRootClientId( clientIds[ 0 ] )
+					: undefined );
 
 			const blocks = getBlocksByClientId( clientIds ) ?? [];
 
@@ -62,7 +72,7 @@ export default function ReusableBlockConvertButton( {
 				// Hide when this is already a reusable block.
 				! isReusable &&
 				// Hide when reusable blocks are disabled.
-				canInsertBlockType( 'core/block', rootClientId ) &&
+				canInsertBlockType( 'core/block', rootId ) &&
 				blocks.every(
 					( block ) =>
 						// Guard against the case where a regular block has *just* been converted.
@@ -73,11 +83,15 @@ export default function ReusableBlockConvertButton( {
 						hasBlockSupport( block.name, 'reusable', true )
 				) &&
 				// Hide when current doesn't have permission to do that.
-				!! canUser( 'create', 'blocks' );
+				// Blocks refers to the wp_block post type, this checks the ability to create a post of that type.
+				!! canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_block',
+				} );
 
 			return _canConvert;
 		},
-		[ clientIds ]
+		[ clientIds, rootClientId ]
 	);
 
 	const { __experimentalConvertBlocksToReusable: convertBlocksToReusable } =
@@ -88,17 +102,42 @@ export default function ReusableBlockConvertButton( {
 	const onConvert = useCallback(
 		async function ( reusableBlockTitle ) {
 			try {
-				await convertBlocksToReusable( clientIds, reusableBlockTitle );
-				createSuccessNotice( __( 'Reusable block created.' ), {
-					type: 'snackbar',
-				} );
+				await convertBlocksToReusable(
+					clientIds,
+					reusableBlockTitle,
+					syncType
+				);
+				createSuccessNotice(
+					! syncType
+						? sprintf(
+								// translators: %s: the name the user has given to the pattern.
+								__( 'Synced pattern created: %s' ),
+								reusableBlockTitle
+						  )
+						: sprintf(
+								// translators: %s: the name the user has given to the pattern.
+								__( 'Unsynced pattern created: %s' ),
+								reusableBlockTitle
+						  ),
+					{
+						type: 'snackbar',
+						id: 'convert-to-reusable-block-success',
+					}
+				);
 			} catch ( error ) {
 				createErrorNotice( error.message, {
 					type: 'snackbar',
+					id: 'convert-to-reusable-block-error',
 				} );
 			}
 		},
-		[ clientIds ]
+		[
+			convertBlocksToReusable,
+			clientIds,
+			syncType,
+			createSuccessNotice,
+			createErrorNotice,
+		]
 	);
 
 	if ( ! canConvert ) {
@@ -106,67 +145,74 @@ export default function ReusableBlockConvertButton( {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
-					<MenuItem
-						icon={ symbol }
-						onClick={ () => {
-							setIsModalOpen( true );
+		<>
+			<MenuItem icon={ symbol } onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Create pattern' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Create pattern' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+						setTitle( '' );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							onConvert( title );
+							setIsModalOpen( false );
+							setTitle( '' );
+							onClose();
 						} }
 					>
-						{ __( 'Create Reusable block' ) }
-					</MenuItem>
-					{ isModalOpen && (
-						<Modal
-							title={ __( 'Create Reusable block' ) }
-							closeLabel={ __( 'Close' ) }
-							onRequestClose={ () => {
-								setIsModalOpen( false );
-								setTitle( '' );
-							} }
-							overlayClassName="reusable-blocks-menu-items__convert-modal"
-						>
-							<form
-								onSubmit={ ( event ) => {
-									event.preventDefault();
-									onConvert( title );
-									setIsModalOpen( false );
-									setTitle( '' );
-									onClose();
+						<VStack spacing="5">
+							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								placeholder={ __( 'My pattern' ) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ _x( 'Synced', 'pattern (singular)' ) }
+								help={ __(
+									'Sync this pattern across multiple locations.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
 								} }
-							>
-								<TextControl
-									label={ __( 'Name' ) }
-									value={ title }
-									onChange={ setTitle }
-								/>
-								<Flex
-									className="reusable-blocks-menu-items__convert-modal-actions"
-									justify="flex-end"
+							/>
+							<HStack justify="right">
+								<Button
+									__next40pxDefaultSize
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+										setTitle( '' );
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+
+								<Button
+									__next40pxDefaultSize
+									variant="primary"
+									type="submit"
 								>
-									<FlexItem>
-										<Button
-											variant="tertiary"
-											onClick={ () => {
-												setIsModalOpen( false );
-												setTitle( '' );
-											} }
-										>
-											{ __( 'Cancel' ) }
-										</Button>
-									</FlexItem>
-									<FlexItem>
-										<Button variant="primary" type="submit">
-											{ __( 'Save' ) }
-										</Button>
-									</FlexItem>
-								</Flex>
-							</form>
-						</Modal>
-					) }
-				</>
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
index ad6a68de9db889..47047fcc561e4e 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
@@ -5,10 +5,7 @@ import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { isReusableBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -18,9 +15,10 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as reusableBlocksStore } from '../../store';
 
 function ReusableBlocksManageButton( { clientId } ) {
-	const { canRemove, isVisible } = useSelect(
+	const { canRemove, isVisible, managePatternsUrl } = useSelect(
 		( select ) => {
-			const { getBlock, canRemoveBlock } = select( blockEditorStore );
+			const { getBlock, canRemoveBlock, getBlockCount } =
+				select( blockEditorStore );
 			const { canUser } = select( coreStore );
 			const reusableBlock = getBlock( clientId );
 
@@ -29,11 +27,25 @@ function ReusableBlocksManageButton( { clientId } ) {
 				isVisible:
 					!! reusableBlock &&
 					isReusableBlock( reusableBlock ) &&
-					!! canUser(
-						'update',
-						'blocks',
-						reusableBlock.attributes.ref
-					),
+					!! canUser( 'update', {
+						kind: 'postType',
+						name: 'wp_block',
+						id: reusableBlock.attributes.ref,
+					} ),
+				innerBlockCount: getBlockCount( clientId ),
+				// The site editor and templates both check whether the user
+				// has edit_theme_options capabilities. We can leverage that here
+				// and omit the manage patterns link if the user can't access it.
+				managePatternsUrl: canUser( 'create', {
+					kind: 'postType',
+					name: 'wp_template',
+				} )
+					? addQueryArgs( 'site-editor.php', {
+							path: '/patterns',
+					  } )
+					: addQueryArgs( 'edit.php', {
+							post_type: 'wp_block',
+					  } ),
 			};
 		},
 		[ clientId ]
@@ -47,18 +59,16 @@ function ReusableBlocksManageButton( { clientId } ) {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
-			<MenuItem
-				href={ addQueryArgs( 'edit.php', { post_type: 'wp_block' } ) }
-			>
-				{ __( 'Manage Reusable blocks' ) }
+		<>
+			<MenuItem href={ managePatternsUrl }>
+				{ __( 'Manage patterns' ) }
 			</MenuItem>
 			{ canRemove && (
 				<MenuItem onClick={ () => convertBlockToStatic( clientId ) }>
-					{ __( 'Convert to regular blocks' ) }
+					{ __( 'Detach' ) }
 				</MenuItem>
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }
 
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss
index e1e7564e1b93b4..b3c922076faf79 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss
@@ -1,7 +1,3 @@
 .reusable-blocks-menu-items__convert-modal {
 	z-index: z-index(".reusable-blocks-menu-items__convert-modal");
 }
-
-.reusable-blocks-menu-items__convert-modal-actions {
-	padding-top: $grid-unit-15;
-}
diff --git a/packages/reusable-blocks/src/lock-unlock.js b/packages/reusable-blocks/src/lock-unlock.js
new file mode 100644
index 00000000000000..4f637985155805
--- /dev/null
+++ b/packages/reusable-blocks/src/lock-unlock.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/reusable-blocks'
+);
diff --git a/packages/reusable-blocks/src/store/actions.js b/packages/reusable-blocks/src/store/actions.js
index b039c2e3883de1..85fe31138652a4 100644
--- a/packages/reusable-blocks/src/store/actions.js
+++ b/packages/reusable-blocks/src/store/actions.js
@@ -40,28 +40,41 @@ export const __experimentalConvertBlockToStatic =
 	};
 
 /**
- * Returns a generator converting one or more static blocks into a reusable block.
+ * Returns a generator converting one or more static blocks into a pattern.
  *
- * @param {string[]} clientIds The client IDs of the block to detach.
- * @param {string}   title     Reusable block title.
+ * @param {string[]}             clientIds The client IDs of the block to detach.
+ * @param {string}               title     Pattern title.
+ * @param {undefined|'unsynced'} syncType  They way block is synced, current undefined (synced) and 'unsynced'.
  */
 export const __experimentalConvertBlocksToReusable =
-	( clientIds, title ) =>
+	( clientIds, title, syncType ) =>
 	async ( { registry, dispatch } ) => {
+		const meta =
+			syncType === 'unsynced'
+				? {
+						wp_pattern_sync_status: syncType,
+				  }
+				: undefined;
+
 		const reusableBlock = {
-			title: title || __( 'Untitled Reusable block' ),
+			title: title || __( 'Untitled pattern block' ),
 			content: serialize(
 				registry
 					.select( blockEditorStore )
 					.getBlocksByClientId( clientIds )
 			),
 			status: 'publish',
+			meta,
 		};
 
 		const updatedRecord = await registry
 			.dispatch( 'core' )
 			.saveEntityRecord( 'postType', 'wp_block', reusableBlock );
 
+		if ( syncType === 'unsynced' ) {
+			return;
+		}
+
 		const newBlock = createBlock( 'core/block', {
 			ref: updatedRecord.id,
 		} );
diff --git a/packages/reusable-blocks/src/store/test/__snapshots__/actions.js.snap b/packages/reusable-blocks/src/store/test/__snapshots__/actions.js.snap
index 6b868bea66ed2c..d7b19b3605aa0f 100644
--- a/packages/reusable-blocks/src/store/test/__snapshots__/actions.js.snap
+++ b/packages/reusable-blocks/src/store/test/__snapshots__/actions.js.snap
@@ -1,48 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Actions __experimentalConvertBlockToStatic should convert a static reusable into a static block 1`] = `
-Array [
-  Object {
-    "attributes": Object {
+[
+  {
+    "attributes": {
       "name": "Big Bird",
     },
-    "innerBlocks": Array [
-      Object {
-        "attributes": Object {
+    "innerBlocks": [
+      {
+        "attributes": {
           "name": "Oscar the Grouch",
         },
-        "innerBlocks": Array [],
+        "innerBlocks": [],
         "isValid": true,
         "name": "core/test-block",
         "originalContent": "",
-        "validationIssues": Array [],
+        "validationIssues": [],
       },
-      Object {
-        "attributes": Object {
+      {
+        "attributes": {
           "name": "Cookie Monster",
         },
-        "innerBlocks": Array [],
+        "innerBlocks": [],
         "isValid": true,
         "name": "core/test-block",
         "originalContent": "",
-        "validationIssues": Array [],
+        "validationIssues": [],
       },
     ],
     "isValid": true,
     "name": "core/test-block",
     "originalContent": "",
-    "validationIssues": Array [],
+    "validationIssues": [],
   },
 ]
 `;
 
 exports[`Actions __experimentalConvertBlocksToReusable should convert a static block into a reusable block 1`] = `
-Array [
-  Object {
-    "attributes": Object {
+[
+  {
+    "attributes": {
       "ref": "new-id",
     },
-    "innerBlocks": Array [],
+    "innerBlocks": [],
     "isValid": true,
     "name": "core/block",
   },
diff --git a/packages/reusable-blocks/src/store/test/actions.js b/packages/reusable-blocks/src/store/test/actions.js
index ffa907b4b18a39..debd6568683891 100644
--- a/packages/reusable-blocks/src/store/test/actions.js
+++ b/packages/reusable-blocks/src/store/test/actions.js
@@ -12,6 +12,7 @@ import {
 
 import { store as coreStore } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ function createRegistryWithStores() {
 	registry.register( blockEditorStore );
 	registry.register( reusableBlocksStore );
 	registry.register( blocksStore );
+	registry.register( preferencesStore );
 
 	// Register entity here instead of mocking API handlers for loadPostTypeEntities()
 	registry.dispatch( coreStore ).addEntities( [
@@ -178,9 +180,7 @@ describe( 'Actions', () => {
 
 			await registry
 				.dispatch( reusableBlocksStore )
-				.__experimentalConvertBlockToStatic( [
-					associatedBlock.clientId,
-				] );
+				.__experimentalConvertBlockToStatic( associatedBlock.clientId );
 
 			// Check that blocks were converted to reusable.
 			const updatedBlocks = registry
diff --git a/packages/rich-text/.npmrc b/packages/rich-text/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/rich-text/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index de2b21d0cd0174..2239fbd11ceedc 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 7.13.0 (2024-11-27)
+
+## 7.12.0 (2024-11-16)
+
+## 7.11.0 (2024-10-30)
+
+## 7.10.0 (2024-10-16)
+
+## 7.9.0 (2024-10-03)
+
+## 7.8.0 (2024-09-19)
+
+## 7.7.0 (2024-09-05)
+
+## 7.6.0 (2024-08-21)
+
+## 7.5.0 (2024-08-07)
+
+## 7.4.0 (2024-07-24)
+
+## 7.3.0 (2024-07-10)
+
+## 7.2.0 (2024-06-26)
+
+## 7.1.0 (2024-06-15)
+
+## 7.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 6.35.0 (2024-05-16)
+
+## 6.34.0 (2024-05-02)
+
+## 6.33.0 (2024-04-19)
+
+## 6.32.0 (2024-04-03)
+
+## 6.31.0 (2024-03-21)
+
+## 6.30.0 (2024-03-06)
+
+## 6.29.0 (2024-02-21)
+
+## 6.28.0 (2024-02-09)
+
+## 6.27.0 (2024-01-24)
+
+## 6.26.0 (2024-01-10)
+
+## 6.25.0 (2023-12-13)
+
+## 6.24.0 (2023-11-29)
+
+## 6.23.0 (2023-11-16)
+
+## 6.22.0 (2023-11-02)
+
+## 6.21.0 (2023-10-18)
+
+## 6.20.0 (2023-10-05)
+
+## 6.19.0 (2023-09-20)
+
+## 6.18.0 (2023-08-31)
+
+## 6.17.0 (2023-08-16)
+
+## 6.16.0 (2023-08-10)
+
+## 6.15.0 (2023-07-20)
+
+## 6.14.0 (2023-07-05)
+
+## 6.13.0 (2023-06-23)
+
+## 6.12.0 (2023-06-07)
+
+## 6.11.0 (2023-05-24)
+
+## 6.10.0 (2023-05-10)
+
+## 6.9.0 (2023-04-26)
+
+## 6.8.0 (2023-04-12)
+
+## 6.7.0 (2023-03-29)
+
+## 6.6.0 (2023-03-15)
+
+## 6.5.0 (2023-03-01)
+
+## 6.4.0 (2023-02-15)
+
+## 6.3.0 (2023-02-01)
+
+## 6.2.0 (2023-01-11)
+
+## 6.1.0 (2023-01-02)
+
+## 6.0.0 (2022-12-14)
+
+### 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)
@@ -50,7 +158,7 @@
 
 ## 5.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/dom`, `@wordpress/is-shallow-equal` and `classnames` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -58,7 +166,7 @@
 
 ## 5.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -77,7 +185,7 @@
 
 ## 3.24.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the rich-text namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
@@ -101,7 +209,7 @@
 
 ## 3.1.0 (2019-03-06)
 
-### Enhancement
+### Enhancements
 
 -   Added format boundaries.
 -   Removed parameters from `create` to filter out content.
@@ -131,7 +239,7 @@
 
 ## 2.0.3 (2018-11-09)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix Format Type Assignment During Parsing.
 -   Fix applying formats on multiline values without wrapper tags.
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 6e5a01b3554629..033a4f2c747abe 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -22,7 +22,7 @@ Examples of rich formats include:
 
 -   bold, italic, superscript (etc)
 -   links
--   underordered/ordered lists
+-   unordered/ordered lists
 
 ### The RichTextValue object
 
@@ -124,9 +124,7 @@ Given that the selection has no "range" (i.e. there is no difference between `st
 
 ### applyFormat
 
-Apply a format object to a Rich Text value from the given `startIndex` to the
-given `endIndex`. Indices are retrieved from the selection if none are
-provided.
+Apply a format object to a Rich Text value from the given `startIndex` to the given `endIndex`. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -141,8 +139,7 @@ _Returns_
 
 ### concat
 
-Combine all Rich Text values into one. This is similar to
-`String.prototype.concat`.
+Combine all Rich Text values into one. This is similar to `String.prototype.concat`.
 
 _Parameters_
 
@@ -154,15 +151,9 @@ _Returns_
 
 ### create
 
-Create a RichText value from an `Element` tree (DOM), an HTML string or a
-plain text string, with optionally a `Range` object to set the selection. If
-called without any input, an empty value will be created. If
-`multilineTag` is provided, any content of direct children whose type matches
-`multilineTag` will be separated by two newlines. The optional functions can
-be used to filter out content.
+Create a RichText value from an `Element` tree (DOM), an HTML string or a plain text string, with optionally a `Range` object to set the selection. If called without any input, an empty value will be created. The optional functions can be used to filter out content.
 
-A value will have the following shape, which you are strongly encouraged not
-to modify without the use of helper functions:
+A value will have the following shape, which you are strongly encouraged not to modify without the use of helper functions:
 
 ```js
 {
@@ -174,12 +165,7 @@ to modify without the use of helper functions:
 }
 ```
 
-As you can see, text and formatting are separated. `text` holds the text,
-including any replacement characters for objects and lines. `formats`,
-`objects` and `lines` are all sparse arrays of the same length as `text`. It
-holds information about the formatting at the relevant text indices. Finally
-`start` and `end` state which text indices are selected. They are only
-provided if a `Range` was given.
+As you can see, text and formatting are separated. `text` holds the text, including any replacement characters for objects and lines. `formats`, `objects` and `lines` are all sparse arrays of the same length as `text`. It holds information about the formatting at the relevant text indices. Finally `start` and `end` state which text indices are selected. They are only provided if a `Range` was given.
 
 _Parameters_
 
@@ -188,9 +174,6 @@ _Parameters_
 -   _$1.text_ `[string]`: Text to create value from.
 -   _$1.html_ `[string]`: HTML to create value from.
 -   _$1.range_ `[Range]`: Range to create value from.
--   _$1.multilineTag_ `[string]`: Multiline tag if the structure is multiline.
--   _$1.multilineWrapperTags_ `[Array]`: Tags where lines can be found if nesting is possible.
--   _$1.preserveWhiteSpace_ `[boolean]`: Whether or not to collapse white space characters.
 -   _$1.\_\_unstableIsEditableTree_ `[boolean]`:
 
 _Returns_
@@ -199,10 +182,7 @@ _Returns_
 
 ### getActiveFormat
 
-Gets the format object by type at the start of the selection. This can be
-used to get e.g. the URL of a link format at the current selection, but also
-to check if a format is active at the selection. Returns undefined if there
-is no format at the selection.
+Gets the format object by type at the start of the selection. This can be used to get e.g. the URL of a link format at the current selection, but also to check if a format is active at the selection. Returns undefined if there is no format at the selection.
 
 _Parameters_
 
@@ -240,8 +220,7 @@ _Returns_
 
 ### getTextContent
 
-Get the textual content of a Rich Text value. This is similar to
-`Element.textContent`.
+Get the textual content of a Rich Text value. This is similar to `Element.textContent`.
 
 _Parameters_
 
@@ -253,10 +232,7 @@ _Returns_
 
 ### insert
 
-Insert a Rich Text value, an HTML string, or a plain text string, into a
-Rich Text value at the given `startIndex`. Any content between `startIndex`
-and `endIndex` will be removed. Indices are retrieved from the selection if
-none are provided.
+Insert a Rich Text value, an HTML string, or a plain text string, into a Rich Text value at the given `startIndex`. Any content between `startIndex` and `endIndex` will be removed. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -271,9 +247,7 @@ _Returns_
 
 ### insertObject
 
-Insert a format as an object into a Rich Text value at the given
-`startIndex`. Any content between `startIndex` and `endIndex` will be
-removed. Indices are retrieved from the selection if none are provided.
+Insert a format as an object into a Rich Text value at the given `startIndex`. Any content between `startIndex` and `endIndex` will be removed. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -288,23 +262,21 @@ _Returns_
 
 ### isCollapsed
 
-Check if the selection of a Rich Text value is collapsed or not. Collapsed
-means that no characters are selected, but there is a caret present. If there
-is no selection, `undefined` will be returned. This is similar to
-`window.getSelection().isCollapsed()`.
+Check if the selection of a Rich Text value is collapsed or not. Collapsed means that no characters are selected, but there is a caret present. If there is no selection, `undefined` will be returned. This is similar to `window.getSelection().isCollapsed()`.
 
 _Parameters_
 
--   _value_ `RichTextValue`: The rich text value to check.
+-   _props_ `RichTextValue`: The rich text value to check.
+-   _props.start_ `RichTextValue[ 'start' ]`:
+-   _props.end_ `RichTextValue[ 'end' ]`:
 
 _Returns_
 
--   `boolean|undefined`: True if the selection is collapsed, false if not, undefined if there is no selection.
+-   `boolean | undefined`: True if the selection is collapsed, false if not, undefined if there is no selection.
 
 ### isEmpty
 
-Check if a Rich Text value is Empty, meaning it contains no text or any
-objects (such as images).
+Check if a Rich Text value is Empty, meaning it contains no text or any objects (such as images).
 
 _Parameters_
 
@@ -316,9 +288,7 @@ _Returns_
 
 ### join
 
-Combine an array of Rich Text values into one, optionally separated by
-`separator`, which can be a Rich Text value, HTML string, or plain text
-string. This is similar to `Array.prototype.join`.
+Combine an array of Rich Text values into one, optionally separated by `separator`, which can be a Rich Text value, HTML string, or plain text string. This is similar to `Array.prototype.join`.
 
 _Parameters_
 
@@ -331,8 +301,7 @@ _Returns_
 
 ### registerFormatType
 
-Registers a new format provided a unique name and an object defining its
-behavior.
+Registers a new format provided a unique name and an object defining its behavior.
 
 _Parameters_
 
@@ -345,8 +314,7 @@ _Returns_
 
 ### remove
 
-Remove content from a Rich Text value between the given `startIndex` and
-`endIndex`. Indices are retrieved from the selection if none are provided.
+Remove content from a Rich Text value between the given `startIndex` and `endIndex`. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -360,9 +328,7 @@ _Returns_
 
 ### removeFormat
 
-Remove any format object from a Rich Text value by type from the given
-`startIndex` to the given `endIndex`. Indices are retrieved from the
-selection if none are provided.
+Remove any format object from a Rich Text value by type from the given `startIndex` to the given `endIndex`. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -377,8 +343,7 @@ _Returns_
 
 ### replace
 
-Search a Rich Text value and replace the match(es) with `replacement`. This
-is similar to `String.prototype.replace`.
+Search a Rich Text value and replace the match(es) with `replacement`. This is similar to `String.prototype.replace`.
 
 _Parameters_
 
@@ -390,11 +355,26 @@ _Returns_
 
 -   `RichTextValue`: A new value with replacements applied.
 
+### RichTextData
+
+The RichTextData class is used to instantiate a wrapper around rich text values, with methods that can be used to transform or manipulate the data.
+
+-   Create an empty instance: `new RichTextData()`.
+-   Create one from an HTML string: `RichTextData.fromHTMLString(
+'<em>hello</em>' )`.
+-   Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement(
+document.querySelector( 'p' ) )`.
+-   Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`.
+-   Create one from a rich text value: `new RichTextData( { text: '...',
+formats: [ ... ] } )`.
+
+### RichTextValue
+
+An object which represents a formatted string. See main `@wordpress/rich-text` documentation for more information.
+
 ### slice
 
-Slice a Rich Text value from `startIndex` to `endIndex`. Indices are
-retrieved from the selection if none are provided. This is similar to
-`String.prototype.slice`.
+Slice a Rich Text value from `startIndex` to `endIndex`. Indices are retrieved from the selection if none are provided. This is similar to `String.prototype.slice`.
 
 _Parameters_
 
@@ -408,9 +388,7 @@ _Returns_
 
 ### split
 
-Split a Rich Text value in two at the given `startIndex` and `endIndex`, or
-split at the given separator. This is similar to `String.prototype.split`.
-Indices are retrieved from the selection if none are provided.
+Split a Rich Text value in two at the given `startIndex` and `endIndex`, or split at the given separator. This is similar to `String.prototype.split`. Indices are retrieved from the selection if none are provided.
 
 _Parameters_
 
@@ -448,15 +426,13 @@ _Returns_
 
 ### toHTMLString
 
-Create an HTML string from a Rich Text value. If a `multilineTag` is
-provided, text separated by a line separator will be wrapped in it.
+Create an HTML string from a Rich Text value.
 
 _Parameters_
 
--   _$1_ `Object`: Named argements.
+-   _$1_ `Object`: Named arguments.
 -   _$1.value_ `RichTextValue`: Rich text value.
--   _$1.multilineTag_ `[string]`: Multiline tag.
--   _$1.preserveWhiteSpace_ `[boolean]`: Whether or not to use newline characters for line breaks.
+-   _$1.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
 
 _Returns_
 
@@ -472,21 +448,17 @@ _Parameters_
 
 _Returns_
 
--   `RichTextFormatType|undefined`: The previous format value, if it has been successfully unregistered; otherwise `undefined`.
+-   `WPFormat|undefined`: The previous format value, if it has been successfully unregistered; otherwise `undefined`.
 
 ### useAnchor
 
-This hook, to be used in a format type's Edit component, returns the active
-element that is formatted, or a virtual element for the selection range if
-no format is active. The returned value is meant to be used for positioning
-UI, e.g. by passing it to the `Popover` component via the `anchor` prop.
+This hook, to be used in a format type's Edit component, returns the active element that is formatted, or a virtual element for the selection range if no format is active. The returned value is meant to be used for positioning UI, e.g. by passing it to the `Popover` component via the `anchor` prop.
 
 _Parameters_
 
 -   _$1_ `Object`: Named parameters.
 -   _$1.editableContentElement_ `HTMLElement|null`: The element containing the editable content.
--   _$1.value_ `RichTextValue`: Value to check for selection.
--   _$1.settings_ `RichTextFormatType`: The format type's settings.
+-   _$1.settings_ `WPFormat=`: The format type's settings.
 
 _Returns_
 
@@ -494,17 +466,14 @@ _Returns_
 
 ### useAnchorRef
 
-This hook, to be used in a format type's Edit component, returns the active
-element that is formatted, or the selection range if no format is active.
-The returned value is meant to be used for positioning UI, e.g. by passing it
-to the `Popover` component.
+This hook, to be used in a format type's Edit component, returns the active element that is formatted, or the selection range if no format is active. The returned value is meant to be used for positioning UI, e.g. by passing it to the `Popover` component.
 
 _Parameters_
 
 -   _$1_ `Object`: Named parameters.
 -   _$1.ref_ `RefObject<HTMLElement>`: React ref of the element containing the editable content.
 -   _$1.value_ `RichTextValue`: Value to check for selection.
--   _$1.settings_ `RichTextFormatType`: The format type's settings.
+-   _$1.settings_ `WPFormat`: The format type's settings.
 
 _Returns_
 
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index 483df30480f2fe..99637e6023799e 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "5.20.0",
+	"version": "7.13.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,30 +19,32 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": [
 		"src/**/*.scss",
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data",
-		"@wordpress/deprecated": "file:../deprecated",
-		"@wordpress/element": "file:../element",
-		"@wordpress/escape-html": "file:../escape-html",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/keycodes": "file:../keycodes",
-		"memize": "^1.1.0",
-		"rememo": "^4.0.0"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/a11y": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/keycodes": "*",
+		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/rich-text/src/apply-format.js b/packages/rich-text/src/apply-format.js
index a0a5c5f4514303..c10f09bec852e4 100644
--- a/packages/rich-text/src/apply-format.js
+++ b/packages/rich-text/src/apply-format.js
@@ -4,8 +4,8 @@
 
 import { normaliseFormats } from './normalise-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 function replace( array, index, value ) {
 	array = array.slice();
diff --git a/packages/rich-text/src/component/event-listeners/copy-handler.js b/packages/rich-text/src/component/event-listeners/copy-handler.js
new file mode 100644
index 00000000000000..0cc1594c3ab914
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/copy-handler.js
@@ -0,0 +1,41 @@
+/**
+ * Internal dependencies
+ */
+import { toHTMLString } from '../../to-html-string';
+import { isCollapsed } from '../../is-collapsed';
+import { slice } from '../../slice';
+import { getTextContent } from '../../get-text-content';
+
+export default ( props ) => ( element ) => {
+	function onCopy( event ) {
+		const { record } = props.current;
+		const { ownerDocument } = element;
+		if (
+			isCollapsed( record.current ) ||
+			! element.contains( ownerDocument.activeElement )
+		) {
+			return;
+		}
+
+		const selectedRecord = slice( record.current );
+		const plainText = getTextContent( selectedRecord );
+		const html = toHTMLString( { value: selectedRecord } );
+		event.clipboardData.setData( 'text/plain', plainText );
+		event.clipboardData.setData( 'text/html', html );
+		event.clipboardData.setData( 'rich-text', 'true' );
+		event.preventDefault();
+
+		if ( event.type === 'cut' ) {
+			ownerDocument.execCommand( 'delete' );
+		}
+	}
+
+	const { defaultView } = element.ownerDocument;
+
+	defaultView.addEventListener( 'copy', onCopy );
+	defaultView.addEventListener( 'cut', onCopy );
+	return () => {
+		defaultView.removeEventListener( 'copy', onCopy );
+		defaultView.removeEventListener( 'cut', onCopy );
+	};
+};
diff --git a/packages/rich-text/src/component/event-listeners/delete.js b/packages/rich-text/src/component/event-listeners/delete.js
new file mode 100644
index 00000000000000..62dd06a0f2cdb5
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/delete.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { remove } from '../../remove';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+		const { createRecord, handleChange } = props.current;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( keyCode !== DELETE && keyCode !== BACKSPACE ) {
+			return;
+		}
+
+		const currentValue = createRecord();
+		const { start, end, text } = currentValue;
+
+		// Always handle full content deletion ourselves.
+		if ( start === 0 && end !== 0 && end === text.length ) {
+			handleChange( remove( currentValue ) );
+			event.preventDefault();
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};
diff --git a/packages/rich-text/src/component/event-listeners/format-boundaries.js b/packages/rich-text/src/component/event-listeners/format-boundaries.js
new file mode 100644
index 00000000000000..e9fdfd10ebfd5c
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/format-boundaries.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { LEFT, RIGHT } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { isCollapsed } from '../../is-collapsed';
+
+const EMPTY_ACTIVE_FORMATS = [];
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
+
+		if (
+			// Only override left and right keys without modifiers pressed.
+			shiftKey ||
+			altKey ||
+			metaKey ||
+			ctrlKey ||
+			( keyCode !== LEFT && keyCode !== RIGHT )
+		) {
+			return;
+		}
+
+		const { record, applyRecord, forceRender } = props.current;
+		const {
+			text,
+			formats,
+			start,
+			end,
+			activeFormats: currentActiveFormats = [],
+		} = record.current;
+		const collapsed = isCollapsed( record.current );
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		// To do: ideally, we should look at visual position instead.
+		const { direction } = defaultView.getComputedStyle( element );
+		const reverseKey = direction === 'rtl' ? RIGHT : LEFT;
+		const isReverse = event.keyCode === reverseKey;
+
+		// If the selection is collapsed and at the very start, do nothing if
+		// navigating backward.
+		// If the selection is collapsed and at the very end, do nothing if
+		// navigating forward.
+		if ( collapsed && currentActiveFormats.length === 0 ) {
+			if ( start === 0 && isReverse ) {
+				return;
+			}
+
+			if ( end === text.length && ! isReverse ) {
+				return;
+			}
+		}
+
+		// If the selection is not collapsed, let the browser handle collapsing
+		// the selection for now. Later we could expand this logic to set
+		// boundary positions if needed.
+		if ( ! collapsed ) {
+			return;
+		}
+
+		const formatsBefore = formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS;
+		const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS;
+		const destination = isReverse ? formatsBefore : formatsAfter;
+		const isIncreasing = currentActiveFormats.every(
+			( format, index ) => format === destination[ index ]
+		);
+
+		let newActiveFormatsLength = currentActiveFormats.length;
+
+		if ( ! isIncreasing ) {
+			newActiveFormatsLength--;
+		} else if ( newActiveFormatsLength < destination.length ) {
+			newActiveFormatsLength++;
+		}
+
+		if ( newActiveFormatsLength === currentActiveFormats.length ) {
+			record.current._newActiveFormats = destination;
+			return;
+		}
+
+		event.preventDefault();
+
+		const origin = isReverse ? formatsAfter : formatsBefore;
+		const source = isIncreasing ? destination : origin;
+		const newActiveFormats = source.slice( 0, newActiveFormatsLength );
+		const newValue = {
+			...record.current,
+			activeFormats: newActiveFormats,
+		};
+		record.current = newValue;
+		applyRecord( newValue );
+		forceRender();
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};
diff --git a/packages/rich-text/src/component/event-listeners/index.js b/packages/rich-text/src/component/event-listeners/index.js
new file mode 100644
index 00000000000000..d4f760abdc735a
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/index.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useRef, useInsertionEffect } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import copyHandler from './copy-handler';
+import selectObject from './select-object';
+import formatBoundaries from './format-boundaries';
+import deleteHandler from './delete';
+import inputAndSelection from './input-and-selection';
+import selectionChangeCompat from './selection-change-compat';
+import { preventFocusCapture } from './prevent-focus-capture';
+
+const allEventListeners = [
+	copyHandler,
+	selectObject,
+	formatBoundaries,
+	deleteHandler,
+	inputAndSelection,
+	selectionChangeCompat,
+	preventFocusCapture,
+];
+
+export function useEventListeners( props ) {
+	const propsRef = useRef( props );
+	useInsertionEffect( () => {
+		propsRef.current = props;
+	} );
+	const refEffects = useMemo(
+		() => allEventListeners.map( ( refEffect ) => refEffect( propsRef ) ),
+		[ propsRef ]
+	);
+
+	return useRefEffect(
+		( element ) => {
+			const cleanups = refEffects.map( ( effect ) => effect( element ) );
+			return () => {
+				cleanups.forEach( ( cleanup ) => cleanup() );
+			};
+		},
+		[ refEffects ]
+	);
+}
diff --git a/packages/rich-text/src/component/event-listeners/input-and-selection.js b/packages/rich-text/src/component/event-listeners/input-and-selection.js
new file mode 100644
index 00000000000000..621f1c59fab04e
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/input-and-selection.js
@@ -0,0 +1,259 @@
+/**
+ * Internal dependencies
+ */
+import { getActiveFormats } from '../../get-active-formats';
+import { updateFormats } from '../../update-formats';
+
+/**
+ * All inserting input types that would insert HTML into the DOM.
+ *
+ * @see https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes
+ *
+ * @type {Set}
+ */
+const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
+	'insertParagraph',
+	'insertOrderedList',
+	'insertUnorderedList',
+	'insertHorizontalRule',
+	'insertLink',
+] );
+
+const EMPTY_ACTIVE_FORMATS = [];
+
+const PLACEHOLDER_ATTR_NAME = 'data-rich-text-placeholder';
+
+/**
+ * If the selection is set on the placeholder element, collapse the selection to
+ * the start (before the placeholder).
+ *
+ * @param {Window} defaultView
+ */
+function fixPlaceholderSelection( defaultView ) {
+	const selection = defaultView.getSelection();
+	const { anchorNode, anchorOffset } = selection;
+
+	if ( anchorNode.nodeType !== anchorNode.ELEMENT_NODE ) {
+		return;
+	}
+
+	const targetNode = anchorNode.childNodes[ anchorOffset ];
+
+	if (
+		! targetNode ||
+		targetNode.nodeType !== targetNode.ELEMENT_NODE ||
+		! targetNode.hasAttribute( PLACEHOLDER_ATTR_NAME )
+	) {
+		return;
+	}
+
+	selection.collapseToStart();
+}
+
+export default ( props ) => ( element ) => {
+	const { ownerDocument } = element;
+	const { defaultView } = ownerDocument;
+
+	let isComposing = false;
+
+	function onInput( event ) {
+		// Do not trigger a change if characters are being composed. Browsers
+		// will usually emit a final `input` event when the characters are
+		// composed. As of December 2019, Safari doesn't support
+		// nativeEvent.isComposing.
+		if ( isComposing ) {
+			return;
+		}
+
+		let inputType;
+
+		if ( event ) {
+			inputType = event.inputType;
+		}
+
+		const { record, applyRecord, createRecord, handleChange } =
+			props.current;
+
+		// The browser formatted something or tried to insert HTML. Overwrite
+		// it. It will be handled later by the format library if needed.
+		if (
+			inputType &&
+			( inputType.indexOf( 'format' ) === 0 ||
+				INSERTION_INPUT_TYPES_TO_IGNORE.has( inputType ) )
+		) {
+			applyRecord( record.current );
+			return;
+		}
+
+		const currentValue = createRecord();
+		const { start, activeFormats: oldActiveFormats = [] } = record.current;
+
+		// Update the formats between the last and new caret position.
+		const change = updateFormats( {
+			value: currentValue,
+			start,
+			end: currentValue.start,
+			formats: oldActiveFormats,
+		} );
+
+		handleChange( change );
+	}
+
+	/**
+	 * Syncs the selection to local state. A callback for the `selectionchange`
+	 * event.
+	 */
+	function handleSelectionChange() {
+		const { record, applyRecord, createRecord, onSelectionChange } =
+			props.current;
+
+		// Check if the implementor disabled editing. `contentEditable` does
+		// disable input, but not text selection, so we must ignore selection
+		// changes.
+		if ( element.contentEditable !== 'true' ) {
+			return;
+		}
+
+		// Ensure the active element is the rich text element.
+		if ( ownerDocument.activeElement !== element ) {
+			// If it is not, we can stop listening for selection changes. We
+			// resume listening when the element is focused.
+			ownerDocument.removeEventListener(
+				'selectionchange',
+				handleSelectionChange
+			);
+			return;
+		}
+
+		// In case of a keyboard event, ignore selection changes during
+		// composition.
+		if ( isComposing ) {
+			return;
+		}
+
+		const { start, end, text } = createRecord();
+		const oldRecord = record.current;
+
+		// Fallback mechanism for IE11, which doesn't support the input event.
+		// Any input results in a selection change.
+		if ( text !== oldRecord.text ) {
+			onInput();
+			return;
+		}
+
+		if ( start === oldRecord.start && end === oldRecord.end ) {
+			// Sometimes the browser may set the selection on the placeholder
+			// element, in which case the caret is not visible. We need to set
+			// the caret before the placeholder if that's the case.
+			if ( oldRecord.text.length === 0 && start === 0 ) {
+				fixPlaceholderSelection( defaultView );
+			}
+
+			return;
+		}
+
+		const newValue = {
+			...oldRecord,
+			start,
+			end,
+			// _newActiveFormats may be set on arrow key navigation to control
+			// the right boundary position. If undefined, getActiveFormats will
+			// give the active formats according to the browser.
+			activeFormats: oldRecord._newActiveFormats,
+			_newActiveFormats: undefined,
+		};
+
+		const newActiveFormats = getActiveFormats(
+			newValue,
+			EMPTY_ACTIVE_FORMATS
+		);
+
+		// Update the value with the new active formats.
+		newValue.activeFormats = newActiveFormats;
+
+		// It is important that the internal value is updated first,
+		// otherwise the value will be wrong on render!
+		record.current = newValue;
+		applyRecord( newValue, { domOnly: true } );
+		onSelectionChange( start, end );
+	}
+
+	function onCompositionStart() {
+		isComposing = true;
+		// Do not update the selection when characters are being composed as
+		// this rerenders the component and might destroy internal browser
+		// editing state.
+		ownerDocument.removeEventListener(
+			'selectionchange',
+			handleSelectionChange
+		);
+		// Remove the placeholder. Since the rich text value doesn't update
+		// during composition, the placeholder doesn't get removed. There's no
+		// need to re-add it, when the value is updated on compositionend it
+		// will be re-added when the value is empty.
+		element.querySelector( `[${ PLACEHOLDER_ATTR_NAME }]` )?.remove();
+	}
+
+	function onCompositionEnd() {
+		isComposing = false;
+		// Ensure the value is up-to-date for browsers that don't emit a final
+		// input event after composition.
+		onInput( { inputType: 'insertText' } );
+		// Tracking selection changes can be resumed.
+		ownerDocument.addEventListener(
+			'selectionchange',
+			handleSelectionChange
+		);
+	}
+
+	function onFocus() {
+		const { record, isSelected, onSelectionChange, applyRecord } =
+			props.current;
+
+		// When the whole editor is editable, let writing flow handle
+		// selection.
+		if ( element.parentElement.closest( '[contenteditable="true"]' ) ) {
+			return;
+		}
+
+		if ( ! isSelected ) {
+			// We know for certain that on focus, the old selection is invalid.
+			// It will be recalculated on the next mouseup, keyup, or touchend
+			// event.
+			const index = undefined;
+
+			record.current = {
+				...record.current,
+				start: index,
+				end: index,
+				activeFormats: EMPTY_ACTIVE_FORMATS,
+			};
+		} else {
+			applyRecord( record.current, { domOnly: true } );
+		}
+
+		onSelectionChange( record.current.start, record.current.end );
+
+		// There is no selection change event when the element is focused, so
+		// we need to manually trigger it. The selection is also not available
+		// yet in this call stack.
+		window.queueMicrotask( handleSelectionChange );
+
+		ownerDocument.addEventListener(
+			'selectionchange',
+			handleSelectionChange
+		);
+	}
+
+	element.addEventListener( 'input', onInput );
+	element.addEventListener( 'compositionstart', onCompositionStart );
+	element.addEventListener( 'compositionend', onCompositionEnd );
+	element.addEventListener( 'focus', onFocus );
+
+	return () => {
+		element.removeEventListener( 'input', onInput );
+		element.removeEventListener( 'compositionstart', onCompositionStart );
+		element.removeEventListener( 'compositionend', onCompositionEnd );
+		element.removeEventListener( 'focus', onFocus );
+	};
+};
diff --git a/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js b/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js
new file mode 100644
index 00000000000000..8dc97f73673ce6
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js
@@ -0,0 +1,44 @@
+/**
+ * Prevents focus from being captured by the element when clicking _outside_
+ * around the element. This may happen when the parent element is flex.
+ * @see https://github.com/WordPress/gutenberg/pull/65857
+ * @see https://github.com/WordPress/gutenberg/pull/66402
+ */
+export function preventFocusCapture() {
+	return ( element ) => {
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+
+		let value = null;
+
+		function onPointerDown( event ) {
+			// Abort if the event is default prevented, we will not get a pointer up event.
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			if ( event.target === element ) {
+				return;
+			}
+			if ( ! event.target.contains( element ) ) {
+				return;
+			}
+			value = element.getAttribute( 'contenteditable' );
+			element.setAttribute( 'contenteditable', 'false' );
+			defaultView.getSelection().removeAllRanges();
+		}
+
+		function onPointerUp() {
+			if ( value !== null ) {
+				element.setAttribute( 'contenteditable', value );
+				value = null;
+			}
+		}
+
+		defaultView.addEventListener( 'pointerdown', onPointerDown );
+		defaultView.addEventListener( 'pointerup', onPointerUp );
+		return () => {
+			defaultView.removeEventListener( 'pointerdown', onPointerDown );
+			defaultView.removeEventListener( 'pointerup', onPointerUp );
+		};
+	};
+}
diff --git a/packages/rich-text/src/component/event-listeners/select-object.js b/packages/rich-text/src/component/event-listeners/select-object.js
new file mode 100644
index 00000000000000..2598b149d2418f
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/select-object.js
@@ -0,0 +1,54 @@
+export default () => ( element ) => {
+	function onClick( event ) {
+		const { target } = event;
+
+		// If the child element has no text content, it must be an object.
+		if (
+			target === element ||
+			( target.textContent && target.isContentEditable )
+		) {
+			return;
+		}
+
+		const { ownerDocument } = target;
+		const { defaultView } = ownerDocument;
+		const selection = defaultView.getSelection();
+
+		// If it's already selected, do nothing and let default behavior happen.
+		// This means it's "click-through".
+		if ( selection.containsNode( target ) ) {
+			return;
+		}
+
+		const range = ownerDocument.createRange();
+		// If the target is within a non editable element, select the non
+		// editable element.
+		const nodeToSelect = target.isContentEditable
+			? target
+			: target.closest( '[contenteditable]' );
+
+		range.selectNode( nodeToSelect );
+		selection.removeAllRanges();
+		selection.addRange( range );
+
+		event.preventDefault();
+	}
+
+	function onFocusIn( event ) {
+		// When there is incoming focus from a link, select the object.
+		if (
+			event.relatedTarget &&
+			! element.contains( event.relatedTarget ) &&
+			event.relatedTarget.tagName === 'A'
+		) {
+			onClick( event );
+		}
+	}
+
+	element.addEventListener( 'click', onClick );
+	element.addEventListener( 'focusin', onFocusIn );
+	return () => {
+		element.removeEventListener( 'click', onClick );
+		element.removeEventListener( 'focusin', onFocusIn );
+	};
+};
diff --git a/packages/rich-text/src/component/event-listeners/selection-change-compat.js b/packages/rich-text/src/component/event-listeners/selection-change-compat.js
new file mode 100644
index 00000000000000..f64f22658c329e
--- /dev/null
+++ b/packages/rich-text/src/component/event-listeners/selection-change-compat.js
@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import { isRangeEqual } from '../../is-range-equal';
+
+/**
+ * Sometimes some browsers are not firing a `selectionchange` event when
+ * changing the selection by mouse or keyboard. This hook makes sure that, if we
+ * detect no `selectionchange` or `input` event between the up and down events,
+ * we fire a `selectionchange` event.
+ */
+export default () => ( element ) => {
+	const { ownerDocument } = element;
+	const { defaultView } = ownerDocument;
+	const selection = defaultView?.getSelection();
+
+	let range;
+
+	function getRange() {
+		return selection.rangeCount ? selection.getRangeAt( 0 ) : null;
+	}
+
+	function onDown( event ) {
+		const type = event.type === 'keydown' ? 'keyup' : 'pointerup';
+
+		function onCancel() {
+			ownerDocument.removeEventListener( type, onUp );
+			ownerDocument.removeEventListener( 'selectionchange', onCancel );
+			ownerDocument.removeEventListener( 'input', onCancel );
+		}
+
+		function onUp() {
+			onCancel();
+			if ( isRangeEqual( range, getRange() ) ) {
+				return;
+			}
+			ownerDocument.dispatchEvent( new Event( 'selectionchange' ) );
+		}
+
+		ownerDocument.addEventListener( type, onUp );
+		ownerDocument.addEventListener( 'selectionchange', onCancel );
+		ownerDocument.addEventListener( 'input', onCancel );
+
+		range = getRange();
+	}
+
+	element.addEventListener( 'pointerdown', onDown );
+	element.addEventListener( 'keydown', onDown );
+	return () => {
+		element.removeEventListener( 'pointerdown', onDown );
+		element.removeEventListener( 'keydown', onDown );
+	};
+};
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
index 89007ef49791ba..600fc0faff5209 100644
--- a/packages/rich-text/src/component/index.js
+++ b/packages/rich-text/src/component/index.js
@@ -8,26 +8,21 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { create } from '../create';
+import { create, RichTextData } from '../create';
 import { apply } from '../to-dom';
 import { toHTMLString } from '../to-html-string';
 import { useDefaultStyle } from './use-default-style';
 import { useBoundaryStyle } from './use-boundary-style';
-import { useCopyHandler } from './use-copy-handler';
-import { useFormatBoundaries } from './use-format-boundaries';
-import { useSelectObject } from './use-select-object';
-import { useInputAndSelection } from './use-input-and-selection';
-import { useDelete } from './use-delete';
+import { useEventListeners } from './event-listeners';
 
 export function useRichText( {
 	value = '',
 	selectionStart,
 	selectionEnd,
 	placeholder,
-	preserveWhiteSpace,
 	onSelectionChange,
+	preserveWhiteSpace,
 	onChange,
-	__unstableMultilineTag: multilineTag,
 	__unstableDisableFormats: disableFormats,
 	__unstableIsSelected: isSelected,
 	__unstableDependencies = [],
@@ -50,11 +45,7 @@ export function useRichText( {
 		return create( {
 			element: ref.current,
 			range,
-			multilineTag,
-			multilineWrapperTags:
-				multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
 			__unstableIsEditableTree: true,
-			preserveWhiteSpace,
 		} );
 	}
 
@@ -62,9 +53,6 @@ export function useRichText( {
 		apply( {
 			value: newRecord,
 			current: ref.current,
-			multilineTag,
-			multilineWrapperTags:
-				multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
 			prepareEditableTree: __unstableAddInvisibleFormats,
 			__unstableDomOnly: domOnly,
 			placeholder,
@@ -72,57 +60,51 @@ export function useRichText( {
 	}
 
 	// Internal values are updated synchronously, unlike props and state.
-	const _value = useRef( value );
-	const record = useRef();
+	const _valueRef = useRef( value );
+	const recordRef = useRef();
 
 	function setRecordFromProps() {
-		_value.current = value;
-		record.current = create( {
-			html: value,
-			multilineTag,
-			multilineWrapperTags:
-				multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
-			preserveWhiteSpace,
-		} );
+		_valueRef.current = value;
+		recordRef.current = value;
+		if ( ! ( value instanceof RichTextData ) ) {
+			recordRef.current = value
+				? RichTextData.fromHTMLString( value, { preserveWhiteSpace } )
+				: RichTextData.empty();
+		}
+		// To do: make rich text internally work with RichTextData.
+		recordRef.current = {
+			text: recordRef.current.text,
+			formats: recordRef.current.formats,
+			replacements: recordRef.current.replacements,
+		};
 		if ( disableFormats ) {
-			record.current.formats = Array( value.length );
-			record.current.replacements = Array( value.length );
+			recordRef.current.formats = Array( value.length );
+			recordRef.current.replacements = Array( value.length );
 		}
 		if ( __unstableAfterParse ) {
-			record.current.formats = __unstableAfterParse( record.current );
+			recordRef.current.formats = __unstableAfterParse(
+				recordRef.current
+			);
 		}
-		record.current.start = selectionStart;
-		record.current.end = selectionEnd;
+		recordRef.current.start = selectionStart;
+		recordRef.current.end = selectionEnd;
 	}
 
-	const hadSelectionUpdate = useRef( false );
+	const hadSelectionUpdateRef = useRef( false );
 
-	if ( ! record.current ) {
+	if ( ! recordRef.current ) {
+		hadSelectionUpdateRef.current = isSelected;
 		setRecordFromProps();
-		// Sometimes formats are added programmatically and we need to make
-		// sure it's persisted to the block store / markup. If these formats
-		// are not applied, they could cause inconsistencies between the data
-		// in the visual editor and the frontend. Right now, it's only relevant
-		// to the `core/text-color` format, which is applied at runtime in
-		// certain circunstances. See the `__unstableFilterAttributeValue`
-		// function in `packages/format-library/src/text-color/index.js`.
-		// @todo find a less-hacky way of solving this.
-
-		const hasRelevantInitFormat =
-			record.current?.formats[ 0 ]?.[ 0 ]?.type === 'core/text-color';
-
-		if ( hasRelevantInitFormat ) {
-			handleChangesUponInit( record.current );
-		}
 	} else if (
-		selectionStart !== record.current.start ||
-		selectionEnd !== record.current.end
+		selectionStart !== recordRef.current.start ||
+		selectionEnd !== recordRef.current.end
 	) {
-		hadSelectionUpdate.current = isSelected;
-		record.current = {
-			...record.current,
+		hadSelectionUpdateRef.current = isSelected;
+		recordRef.current = {
+			...recordRef.current,
 			start: selectionStart,
 			end: selectionEnd,
+			activeFormats: undefined,
 		};
 	}
 
@@ -133,57 +115,34 @@ export function useRichText( {
 	 * @param {Object} newRecord The record to sync and apply.
 	 */
 	function handleChange( newRecord ) {
-		record.current = newRecord;
+		recordRef.current = newRecord;
 		applyRecord( newRecord );
 
 		if ( disableFormats ) {
-			_value.current = newRecord.text;
+			_valueRef.current = newRecord.text;
 		} else {
-			_value.current = toHTMLString( {
-				value: __unstableBeforeSerialize
-					? {
-							...newRecord,
-							formats: __unstableBeforeSerialize( newRecord ),
-					  }
-					: newRecord,
-				multilineTag,
-				preserveWhiteSpace,
-			} );
+			const newFormats = __unstableBeforeSerialize
+				? __unstableBeforeSerialize( newRecord )
+				: newRecord.formats;
+			newRecord = { ...newRecord, formats: newFormats };
+			if ( typeof value === 'string' ) {
+				_valueRef.current = toHTMLString( {
+					value: newRecord,
+					preserveWhiteSpace,
+				} );
+			} else {
+				_valueRef.current = new RichTextData( newRecord );
+			}
 		}
 
-		const { start, end, formats, text } = newRecord;
+		const { start, end, formats, text } = recordRef.current;
 
 		// Selection must be updated first, so it is recorded in history when
 		// the content change happens.
 		// We batch both calls to only attempt to rerender once.
 		registry.batch( () => {
 			onSelectionChange( start, end );
-			onChange( _value.current, {
-				__unstableFormats: formats,
-				__unstableText: text,
-			} );
-		} );
-		forceRender();
-	}
-
-	function handleChangesUponInit( newRecord ) {
-		record.current = newRecord;
-
-		_value.current = toHTMLString( {
-			value: __unstableBeforeSerialize
-				? {
-						...newRecord,
-						formats: __unstableBeforeSerialize( newRecord ),
-				  }
-				: newRecord,
-			multilineTag,
-			preserveWhiteSpace,
-		} );
-
-		const { formats, text } = newRecord;
-
-		registry.batch( () => {
-			onChange( _value.current, {
+			onChange( _valueRef.current, {
 				__unstableFormats: formats,
 				__unstableText: text,
 			} );
@@ -193,14 +152,14 @@ export function useRichText( {
 
 	function applyFromProps() {
 		setRecordFromProps();
-		applyRecord( record.current );
+		applyRecord( recordRef.current );
 	}
 
-	const didMount = useRef( false );
+	const didMountRef = useRef( false );
 
 	// Value updates must happen synchonously to avoid overwriting newer values.
 	useLayoutEffect( () => {
-		if ( didMount.current && value !== _value.current ) {
+		if ( didMountRef.current && value !== _valueRef.current ) {
 			applyFromProps();
 			forceRender();
 		}
@@ -208,7 +167,7 @@ export function useRichText( {
 
 	// Value updates must happen synchonously to avoid overwriting newer values.
 	useLayoutEffect( () => {
-		if ( ! hadSelectionUpdate.current ) {
+		if ( ! hadSelectionUpdateRef.current ) {
 			return;
 		}
 
@@ -216,38 +175,37 @@ export function useRichText( {
 			ref.current.focus();
 		}
 
-		applyFromProps();
-		hadSelectionUpdate.current = false;
-	}, [ hadSelectionUpdate.current ] );
+		applyRecord( recordRef.current );
+		hadSelectionUpdateRef.current = false;
+	}, [ hadSelectionUpdateRef.current ] );
 
 	const mergedRefs = useMergeRefs( [
 		ref,
 		useDefaultStyle(),
-		useBoundaryStyle( { record } ),
-		useCopyHandler( { record, multilineTag, preserveWhiteSpace } ),
-		useSelectObject(),
-		useFormatBoundaries( { record, applyRecord } ),
-		useDelete( {
-			createRecord,
+		useBoundaryStyle( { record: recordRef } ),
+		useEventListeners( {
+			record: recordRef,
 			handleChange,
-			multilineTag,
-		} ),
-		useInputAndSelection( {
-			record,
 			applyRecord,
 			createRecord,
-			handleChange,
 			isSelected,
 			onSelectionChange,
+			forceRender,
 		} ),
 		useRefEffect( () => {
 			applyFromProps();
-			didMount.current = true;
+			didMountRef.current = true;
 		}, [ placeholder, ...__unstableDependencies ] ),
 	] );
 
 	return {
-		value: record.current,
+		value: recordRef.current,
+		// A function to get the most recent value so event handlers in
+		// useRichText implementations have access to it. For example when
+		// listening to input events, we internally update the state, but this
+		// state is not yet available to the input event handler because React
+		// may re-render asynchronously.
+		getValue: () => recordRef.current,
 		onChange: handleChange,
 		ref: mergedRefs,
 	};
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
deleted file mode 100644
index 7fb9a25e1df63c..00000000000000
--- a/packages/rich-text/src/component/index.native.js
+++ /dev/null
@@ -1,1307 +0,0 @@
-/* eslint no-console: ["error", { allow: ["warn"] }] */
-
-/**
- * External dependencies
- */
-import { View, Platform, Dimensions } from 'react-native';
-import memize from 'memize';
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import RCTAztecView from '@wordpress/react-native-aztec';
-import {
-	showUserSuggestions,
-	showXpostSuggestions,
-} from '@wordpress/react-native-bridge';
-import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
-import {
-	compose,
-	debounce,
-	withPreferredColorScheme,
-} from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { childrenBlock } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
-import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
-import { isURL } from '@wordpress/url';
-import { atSymbol, plus } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useFormatTypes } from './use-format-types';
-import FormatEdit from './format-edit';
-import { applyFormat } from '../apply-format';
-import { getActiveFormat } from '../get-active-format';
-import { getActiveFormats } from '../get-active-formats';
-import { insert } from '../insert';
-import { getTextContent } from '../get-text-content';
-import { isEmpty, isEmptyLine } from '../is-empty';
-import { create } from '../create';
-import { toHTMLString } from '../to-html-string';
-import { removeLineSeparator } from '../remove-line-separator';
-import { isCollapsed } from '../is-collapsed';
-import { remove } from '../remove';
-import { getFormatColors } from '../get-format-colors';
-import styles from './style.scss';
-import ToolbarButtonWithOptions from './toolbar-button-with-options';
-
-const unescapeSpaces = ( text ) => {
-	return text.replace( /&nbsp;|&#160;/gi, ' ' );
-};
-
-// The flattened color palettes array is memoized to ensure that the same array instance is
-// returned for the colors palettes. This value might be used as a prop, so having the same
-// instance will prevent unnecessary re-renders of the RichText component.
-const flatColorPalettes = memize( ( colorsPalettes ) => [
-	...( colorsPalettes?.theme || [] ),
-	...( colorsPalettes?.custom || [] ),
-	...( colorsPalettes?.default || [] ),
-] );
-
-const gutenbergFormatNamesToAztec = {
-	'core/bold': 'bold',
-	'core/italic': 'italic',
-	'core/strikethrough': 'strikethrough',
-	'core/text-color': 'mark',
-};
-
-const EMPTY_PARAGRAPH_TAGS = '<p></p>';
-const DEFAULT_FONT_SIZE = 16;
-const MIN_LINE_HEIGHT = 1;
-
-export class RichText extends Component {
-	constructor( {
-		value,
-		selectionStart,
-		selectionEnd,
-		__unstableMultilineTag: multiline,
-	} ) {
-		super( ...arguments );
-
-		this.isMultiline = false;
-		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
-			this.multilineTag = multiline === true ? 'p' : multiline;
-			this.isMultiline = true;
-		}
-
-		if ( this.multilineTag === 'li' ) {
-			this.multilineWrapperTags = [ 'ul', 'ol' ];
-		}
-
-		this.isIOS = Platform.OS === 'ios';
-		this.createRecord = this.createRecord.bind( this );
-		this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
-		this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
-		this.handleEnter = this.handleEnter.bind( this );
-		this.handleDelete = this.handleDelete.bind( this );
-		this.onPaste = this.onPaste.bind( this );
-		this.onFocus = this.onFocus.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-		this.onTextUpdate = this.onTextUpdate.bind( this );
-		this.onContentSizeChange = this.onContentSizeChange.bind( this );
-		this.onFormatChange = this.onFormatChange.bind( this );
-		this.formatToValue = memize( this.formatToValue.bind( this ), {
-			maxSize: 1,
-		} );
-		this.debounceCreateUndoLevel = debounce( this.onCreateUndoLevel, 1000 );
-		// This prevents a bug in Aztec which triggers onSelectionChange twice on format change.
-		this.onSelectionChange = this.onSelectionChange.bind( this );
-		this.onSelectionChangeFromAztec =
-			this.onSelectionChangeFromAztec.bind( this );
-		this.valueToFormat = this.valueToFormat.bind( this );
-		this.getHtmlToRender = this.getHtmlToRender.bind( this );
-		this.handleSuggestionFunc = this.handleSuggestionFunc.bind( this );
-		this.handleUserSuggestion = this.handleSuggestionFunc(
-			showUserSuggestions,
-			'@'
-		).bind( this );
-		this.handleXpostSuggestion = this.handleSuggestionFunc(
-			showXpostSuggestions,
-			'+'
-		).bind( this );
-		this.suggestionOptions = this.suggestionOptions.bind( this );
-		this.insertString = this.insertString.bind( this );
-		this.manipulateEventCounterToForceNativeToRefresh =
-			this.manipulateEventCounterToForceNativeToRefresh.bind( this );
-		this.shouldDropEventFromAztec =
-			this.shouldDropEventFromAztec.bind( this );
-		this.state = {
-			activeFormats: [],
-			selectedFormat: null,
-			height: 0,
-			currentFontSize: this.getFontSize( arguments[ 0 ] ),
-		};
-		this.needsSelectionUpdate = false;
-		this.savedContent = '';
-		this.isTouched = false;
-		this.lastAztecEventType = null;
-
-		this.lastHistoryValue = value;
-
-		// Internal values that are update synchronously, unlike props.
-		this.value = value;
-		this.selectionStart = selectionStart;
-		this.selectionEnd = selectionEnd;
-	}
-
-	/**
-	 * Get the current record (value and selection) from props and state.
-	 *
-	 * @return {Object} The current record (value and selection).
-	 */
-	getRecord() {
-		const {
-			selectionStart: start,
-			selectionEnd: end,
-			colorPalette,
-		} = this.props;
-		const { value } = this.props;
-		const currentValue = this.formatToValue( value );
-
-		const { formats, replacements, text } = currentValue;
-		const { activeFormats } = this.state;
-		const newFormats = getFormatColors( value, formats, colorPalette );
-
-		return {
-			formats: newFormats,
-			replacements,
-			text,
-			start,
-			end,
-			activeFormats,
-		};
-	}
-
-	/**
-	 * Creates a RichText value "record" from the current content and selection
-	 * information
-	 *
-	 *
-	 * @return {Object} A RichText value with formats and selection.
-	 */
-	createRecord() {
-		const { preserveWhiteSpace } = this.props;
-		const value = {
-			start: this.selectionStart,
-			end: this.selectionEnd,
-			...create( {
-				html: this.value,
-				range: null,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
-				preserveWhiteSpace,
-			} ),
-		};
-		const start = Math.min( this.selectionStart, value.text.length );
-		const end = Math.min( this.selectionEnd, value.text.length );
-		return { ...value, start, end };
-	}
-
-	valueToFormat( value ) {
-		// Remove the outer root tags.
-		return this.removeRootTagsProduceByAztec(
-			toHTMLString( {
-				value,
-				multilineTag: this.multilineTag,
-			} )
-		);
-	}
-
-	getActiveFormatNames( record ) {
-		const { formatTypes } = this.props;
-
-		return formatTypes
-			.map( ( { name } ) => name )
-			.filter( ( name ) => {
-				return getActiveFormat( record, name ) !== undefined;
-			} )
-			.map( ( name ) => gutenbergFormatNamesToAztec[ name ] )
-			.filter( Boolean );
-	}
-
-	onFormatChange( record ) {
-		const { start = 0, end = 0, activeFormats = [] } = record;
-		const changeHandlers = Object.fromEntries(
-			Object.entries( this.props ).filter( ( [ key ] ) =>
-				key.startsWith( 'format_on_change_functions_' )
-			)
-		);
-
-		Object.values( changeHandlers ).forEach( ( changeHandler ) => {
-			changeHandler( record.formats, record.text );
-		} );
-
-		this.value = this.valueToFormat( record );
-		this.props.onChange( this.value );
-		this.setState( { activeFormats } );
-		this.props.onSelectionChange( start, end );
-		this.selectionStart = start;
-		this.selectionEnd = end;
-
-		this.onCreateUndoLevel();
-
-		this.lastAztecEventType = 'format change';
-	}
-
-	insertString( record, string ) {
-		if ( record && string ) {
-			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			const toInsert = insert( record, string );
-			this.onFormatChange( toInsert );
-		}
-	}
-
-	onCreateUndoLevel() {
-		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
-		// If the content is the same, no level needs to be created.
-		if ( this.lastHistoryValue === this.value ) {
-			return;
-		}
-
-		onCreateUndoLevel();
-		this.lastHistoryValue = this.value;
-	}
-
-	/*
-	 * Cleans up any root tags produced by aztec.
-	 * TODO: This should be removed on a later version when aztec doesn't return the top tag of the text being edited
-	 */
-	removeRootTagsProduceByAztec( html ) {
-		let result = this.removeRootTag( this.props.tagName, html );
-		// Temporary workaround for https://github.com/WordPress/gutenberg/pull/13763
-		if ( this.props.rootTagsToEliminate ) {
-			this.props.rootTagsToEliminate.forEach( ( element ) => {
-				result = this.removeRootTag( element, result );
-			} );
-		}
-
-		if ( this.props.tagsToEliminate ) {
-			this.props.tagsToEliminate.forEach( ( element ) => {
-				result = this.removeTag( element, result );
-			} );
-		}
-		return result;
-	}
-
-	removeRootTag( tag, html ) {
-		const openingTagRegexp = RegExp( '^<' + tag + '[^>]*>', 'gim' );
-		const closingTagRegexp = RegExp( '</' + tag + '>$', 'gim' );
-		return html
-			.replace( openingTagRegexp, '' )
-			.replace( closingTagRegexp, '' );
-	}
-	removeTag( tag, html ) {
-		const openingTagRegexp = RegExp( '<' + tag + '>', 'gim' );
-		const closingTagRegexp = RegExp( '</' + tag + '>', 'gim' );
-		return html
-			.replace( openingTagRegexp, '' )
-			.replace( closingTagRegexp, '' );
-	}
-
-	/*
-	 * Handles any case where the content of the AztecRN instance has changed
-	 */
-	onChangeFromAztec( event ) {
-		if ( this.shouldDropEventFromAztec( event, 'onChange' ) ) {
-			return;
-		}
-
-		const contentWithoutRootTag = this.removeRootTagsProduceByAztec(
-			unescapeSpaces( event.nativeEvent.text )
-		);
-		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
-		if ( contentWithoutRootTag === this.value ) {
-			return;
-		}
-		this.lastEventCount = event.nativeEvent.eventCount;
-		this.comesFromAztec = true;
-		this.firedAfterTextChanged = true; // The onChange event always fires after the fact.
-		this.onTextUpdate( event );
-		this.lastAztecEventType = 'input';
-	}
-
-	onTextUpdate( event ) {
-		const contentWithoutRootTag = this.removeRootTagsProduceByAztec(
-			unescapeSpaces( event.nativeEvent.text )
-		);
-		let formattedContent = contentWithoutRootTag;
-		if ( ! this.isIOS ) {
-			formattedContent = this.restoreParagraphTags(
-				contentWithoutRootTag,
-				this.multilineTag
-			);
-		}
-
-		this.debounceCreateUndoLevel();
-		const refresh = this.value !== formattedContent;
-		this.value = formattedContent;
-
-		// We don't want to refresh if our goal is just to create a record.
-		if ( refresh ) {
-			this.props.onChange( formattedContent );
-		}
-	}
-
-	restoreParagraphTags( value, tag ) {
-		if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
-			return '<p>' + value + '</p>';
-		}
-		return value;
-	}
-
-	/*
-	 * Handles any case where the content of the AztecRN instance has changed in size
-	 */
-	onContentSizeChange( contentSize ) {
-		this.setState( contentSize );
-		this.lastAztecEventType = 'content size change';
-	}
-
-	onKeyDown( event ) {
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		// Add stubs for conformance in downstream autocompleters logic.
-		this.customEditableOnKeyDown?.( {
-			preventDefault: () => undefined,
-			...event,
-		} );
-
-		this.handleDelete( event );
-		this.handleEnter( event );
-		this.handleTriggerKeyCodes( event );
-	}
-
-	handleEnter( event ) {
-		if ( event.keyCode !== ENTER ) {
-			return;
-		}
-		const { onEnter } = this.props;
-
-		if ( ! onEnter ) {
-			return;
-		}
-
-		onEnter( {
-			value: this.createRecord(),
-			onChange: this.onFormatChange,
-			shiftKey: event.shiftKey,
-		} );
-		this.lastAztecEventType = 'input';
-	}
-
-	handleDelete( event ) {
-		if ( this.shouldDropEventFromAztec( event, 'handleDelete' ) ) {
-			return;
-		}
-
-		const { keyCode } = event;
-
-		if ( keyCode !== DELETE && keyCode !== BACKSPACE ) {
-			return;
-		}
-		const isReverse = keyCode === BACKSPACE;
-
-		const { onDelete, __unstableMultilineTag: multilineTag } = this.props;
-		this.lastEventCount = event.nativeEvent.eventCount;
-		this.comesFromAztec = true;
-		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
-		const value = this.createRecord();
-		const { start, end, text } = value;
-		let newValue;
-
-		// Always handle full content deletion ourselves.
-		if ( start === 0 && end !== 0 && end >= text.length ) {
-			newValue = remove( value );
-			this.onFormatChange( newValue );
-			event.preventDefault();
-			return;
-		}
-
-		if ( multilineTag ) {
-			if (
-				isReverse &&
-				value.start === 0 &&
-				value.end === 0 &&
-				isEmptyLine( value )
-			) {
-				newValue = removeLineSeparator( value, ! isReverse );
-			} else {
-				newValue = removeLineSeparator( value, isReverse );
-			}
-			if ( newValue ) {
-				this.onFormatChange( newValue );
-				event.preventDefault();
-				return;
-			}
-		}
-
-		// Only process delete if the key press occurs at an uncollapsed edge.
-		if (
-			! onDelete ||
-			! isCollapsed( value ) ||
-			( isReverse && start !== 0 ) ||
-			( ! isReverse && end !== text.length )
-		) {
-			return;
-		}
-
-		onDelete( { isReverse, value } );
-
-		event.preventDefault();
-		this.lastAztecEventType = 'input';
-	}
-
-	handleTriggerKeyCodes( event ) {
-		const { keyCode } = event;
-		const triggeredOption = this.suggestionOptions().find( ( option ) => {
-			const triggeredKeyCode = option.triggerChar.charCodeAt( 0 );
-			return triggeredKeyCode === keyCode;
-		} );
-
-		if ( triggeredOption ) {
-			const record = this.getRecord();
-			const text = getTextContent( record );
-			// Only respond to the trigger if the selection is on the start of text or line
-			// or if the character before is a space.
-			const useTrigger =
-				text.length === 0 ||
-				record.start === 0 ||
-				text.charAt( record.start - 1 ) === '\n' ||
-				text.charAt( record.start - 1 ) === ' ';
-
-			if ( useTrigger && triggeredOption.onClick ) {
-				triggeredOption.onClick();
-			} else {
-				this.insertString( record, triggeredOption.triggerChar );
-			}
-		}
-	}
-
-	suggestionOptions() {
-		const { areMentionsSupported, areXPostsSupported } = this.props;
-		const allOptions = [
-			{
-				supported: areMentionsSupported,
-				title: __( 'Insert mention' ),
-				onClick: this.handleUserSuggestion,
-				triggerChar: '@',
-				value: 'mention',
-				label: __( 'Mention' ),
-				icon: atSymbol,
-			},
-			{
-				supported: areXPostsSupported,
-				title: __( 'Insert crosspost' ),
-				onClick: this.handleXpostSuggestion,
-				triggerChar: '+',
-				value: 'crosspost',
-				label: __( 'Crosspost' ),
-				icon: plus,
-			},
-		];
-		return allOptions.filter( ( op ) => op.supported );
-	}
-
-	handleSuggestionFunc( suggestionFunction, prefix ) {
-		return () => {
-			const record = this.getRecord();
-			suggestionFunction()
-				.then( ( suggestion ) => {
-					this.insertString( record, `${ prefix }${ suggestion } ` );
-				} )
-				.catch( () => {} );
-		};
-	}
-
-	/**
-	 * Handles a paste event from the native Aztec Wrapper.
-	 *
-	 * @param {Object} event The paste event which wraps `nativeEvent`.
-	 */
-	onPaste( event ) {
-		const { onPaste, onChange } = this.props;
-		const { activeFormats = [] } = this.state;
-
-		const { pastedText, pastedHtml, files } = event.nativeEvent;
-		const currentRecord = this.createRecord();
-
-		event.preventDefault();
-
-		// There is a selection, check if a URL is pasted.
-		if ( ! isCollapsed( currentRecord ) ) {
-			const trimmedText = ( pastedHtml || pastedText )
-				.replace( /<[^>]+>/g, '' )
-				.trim();
-
-			// A URL was pasted, turn the selection into a link.
-			if ( isURL( trimmedText ) ) {
-				const linkedRecord = applyFormat( currentRecord, {
-					type: 'a',
-					attributes: {
-						href: decodeEntities( trimmedText ),
-					},
-				} );
-				this.value = this.valueToFormat( linkedRecord );
-				onChange( this.value );
-
-				// Allows us to ask for this information when we get a report.
-				window.console.log( 'Created link:\n\n', trimmedText );
-
-				return;
-			}
-		}
-
-		if ( onPaste ) {
-			onPaste( {
-				value: currentRecord,
-				onChange: this.onFormatChange,
-				html: pastedHtml,
-				plainText: pastedText,
-				files,
-				activeFormats,
-			} );
-		}
-	}
-
-	onFocus() {
-		this.isTouched = true;
-
-		const { unstableOnFocus, onSelectionChange } = this.props;
-
-		if ( unstableOnFocus ) {
-			unstableOnFocus();
-		}
-
-		// We know for certain that on focus, the old selection is invalid. It
-		// will be recalculated on `selectionchange`.
-
-		onSelectionChange( this.selectionStart, this.selectionEnd );
-
-		this.lastAztecEventType = 'focus';
-	}
-
-	onBlur( event ) {
-		this.isTouched = false;
-
-		// Check if value is up to date with latest state of native AztecView.
-		if (
-			event.nativeEvent.text &&
-			event.nativeEvent.text !== this.props.value
-		) {
-			this.onTextUpdate( event );
-		}
-
-		if ( this.props.onBlur ) {
-			this.props.onBlur( event );
-		}
-
-		this.lastAztecEventType = 'blur';
-	}
-
-	onSelectionChange( start, end ) {
-		const hasChanged =
-			this.selectionStart !== start || this.selectionEnd !== end;
-
-		this.selectionStart = start;
-		this.selectionEnd = end;
-
-		// This is a manual selection change event if onChange was not triggered just before
-		// and we did not just trigger a text update
-		// `onChange` could be the last event and could have been triggered a long time ago so
-		// this approach is not perfectly reliable.
-		const isManual =
-			this.lastAztecEventType !== 'input' &&
-			this.props.value === this.value;
-		if ( hasChanged && isManual ) {
-			const value = this.createRecord();
-			const activeFormats = getActiveFormats( value );
-			this.setState( { activeFormats } );
-		}
-
-		this.props.onSelectionChange( start, end );
-	}
-
-	shouldDropEventFromAztec( event, logText ) {
-		const shouldDrop =
-			! this.isIOS && event.nativeEvent.eventCount <= this.lastEventCount;
-		if ( shouldDrop ) {
-			window.console.log(
-				`Dropping ${ logText } from Aztec as its event counter is older than latest sent to the native side. Got ${ event.nativeEvent.eventCount } but lastEventCount is ${ this.lastEventCount }.`
-			);
-		}
-		return shouldDrop;
-	}
-
-	onSelectionChangeFromAztec( start, end, text, event ) {
-		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
-			return;
-		}
-
-		// `end` can be less than `start` on iOS
-		// Let's fix that here so `rich-text/slice` can work properly.
-		const realStart = Math.min( start, end );
-		const realEnd = Math.max( start, end );
-
-		// Check and dicsard stray event, where the text and selection is equal to the ones already cached.
-		const contentWithoutRootTag = this.removeRootTagsProduceByAztec(
-			unescapeSpaces( event.nativeEvent.text )
-		);
-		if (
-			contentWithoutRootTag === this.value &&
-			realStart === this.selectionStart &&
-			realEnd === this.selectionEnd
-		) {
-			return;
-		}
-
-		this.comesFromAztec = true;
-		this.firedAfterTextChanged = true; // Selection change event always fires after the fact.
-
-		// Update text before updating selection
-		// Make sure there are changes made to the content before upgrading it upward.
-		this.onTextUpdate( event );
-
-		// Aztec can send us selection change events after it has lost focus.
-		// For instance the autocorrect feature will complete a partially written
-		// word when resigning focus, causing a selection change event.
-		// Forwarding this selection change could cause this RichText to regain
-		// focus and start a focus loop.
-		//
-		// See https://github.com/wordpress-mobile/gutenberg-mobile/issues/1696
-		if ( this.props.__unstableIsSelected ) {
-			this.onSelectionChange( realStart, realEnd );
-		}
-		// Update lastEventCount to prevent Aztec from re-rendering the content it just sent.
-		this.lastEventCount = event.nativeEvent.eventCount;
-
-		this.lastAztecEventType = 'selection change';
-	}
-
-	isEmpty() {
-		return isEmpty( this.formatToValue( this.props.value ) );
-	}
-
-	formatToValue( value ) {
-		const { preserveWhiteSpace } = this.props;
-		// Handle deprecated `children` and `node` sources.
-		if ( Array.isArray( value ) ) {
-			return create( {
-				html: childrenBlock.toHTML( value ),
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
-				preserveWhiteSpace,
-			} );
-		}
-
-		if ( this.props.format === 'string' ) {
-			return create( {
-				html: value,
-				multilineTag: this.multilineTag,
-				multilineWrapperTags: this.multilineWrapperTags,
-				preserveWhiteSpace,
-			} );
-		}
-
-		// Guard for blocks passing `null` in onSplit callbacks. May be removed
-		// if onSplit is revised to not pass a `null` value.
-		if ( value === null ) {
-			return create();
-		}
-
-		return value;
-	}
-
-	manipulateEventCounterToForceNativeToRefresh() {
-		if ( this.isIOS ) {
-			this.lastEventCount = undefined;
-			return;
-		}
-
-		if ( typeof this.lastEventCount !== 'undefined' ) {
-			this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
-		} // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
-		//   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
-	}
-
-	shouldComponentUpdate( nextProps, nextState ) {
-		if (
-			nextProps.tagName !== this.props.tagName ||
-			nextProps.reversed !== this.props.reversed ||
-			nextProps.start !== this.props.start
-		) {
-			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			this.value = undefined;
-			return true;
-		}
-
-		// TODO: Please re-introduce the check to avoid updating the content right after an `onChange` call.
-		// It was removed in https://github.com/WordPress/gutenberg/pull/12417 to fix undo/redo problem.
-
-		// If the component is changed React side (undo/redo/merging/splitting/custom text actions)
-		// we need to make sure the native is updated as well.
-
-		// Also, don't trust the "this.lastContent" as on Android, incomplete text events arrive
-		//  with only some of the text, while the virtual keyboard's suggestion system does its magic.
-		// ** compare with this.lastContent for optimizing performance by not forcing Aztec with text it already has
-		// , but compare with props.value to not lose "half word" text because of Android virtual keyb autosuggestion behavior
-		if (
-			typeof nextProps.value !== 'undefined' &&
-			typeof this.props.value !== 'undefined' &&
-			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
-			nextProps.value !== this.props.value
-		) {
-			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
-			//  let's force caret update if state has selection set.
-			if (
-				typeof nextProps.selectionStart !== 'undefined' &&
-				typeof nextProps.selectionEnd !== 'undefined'
-			) {
-				this.needsSelectionUpdate = true;
-			}
-
-			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-		}
-
-		if ( ! this.comesFromAztec ) {
-			if (
-				typeof nextProps.selectionStart !== 'undefined' &&
-				typeof nextProps.selectionEnd !== 'undefined' &&
-				nextProps.selectionStart !== this.props.selectionStart &&
-				nextProps.selectionStart !== this.selectionStart &&
-				nextProps.__unstableIsSelected
-			) {
-				this.needsSelectionUpdate = true;
-				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			}
-
-			// For font size changes from a prop value a force refresh
-			// is needed without the selection update.
-			if ( nextProps?.fontSize !== this.props?.fontSize ) {
-				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			}
-
-			if (
-				( nextProps?.style?.fontSize !== this.props?.style?.fontSize &&
-					nextState.currentFontSize !==
-						this.state.currentFontSize ) ||
-				nextState.currentFontSize !== this.state.currentFontSize ||
-				nextProps?.style?.lineHeight !== this.props?.style?.lineHeight
-			) {
-				this.needsSelectionUpdate = true;
-				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			}
-		}
-
-		return true;
-	}
-
-	componentDidMount() {
-		// Request focus if wrapping block is selected and parent hasn't inhibited the focus request. This method of focusing
-		//  is trying to implement the web-side counterpart of BlockList's `focusTabbable` where the BlockList is focusing an
-		//  inputbox by searching the DOM. We don't have the DOM in RN so, using the combination of blockIsSelected and __unstableMobileNoFocusOnMount
-		//  to determine if we should focus the RichText.
-		if (
-			this.props.blockIsSelected &&
-			! this.props.__unstableMobileNoFocusOnMount
-		) {
-			this._editor.focus();
-			this.onSelectionChange(
-				this.props.selectionStart || 0,
-				this.props.selectionEnd || 0
-			);
-		}
-	}
-
-	componentWillUnmount() {
-		if ( this._editor.isFocused() ) {
-			this._editor.blur();
-		}
-	}
-
-	componentDidUpdate( prevProps ) {
-		const { style, tagName } = this.props;
-		const { currentFontSize } = this.state;
-
-		if ( this.props.value !== this.value ) {
-			this.value = this.props.value;
-		}
-		const { __unstableIsSelected: isSelected } = this.props;
-
-		const { __unstableIsSelected: prevIsSelected } = prevProps;
-
-		if ( isSelected && ! prevIsSelected ) {
-			this._editor.focus();
-			// Update selection props explicitly when component is selected as Aztec won't call onSelectionChange
-			// if its internal value hasn't change. When created, default value is 0, 0.
-			this.onSelectionChange(
-				this.props.selectionStart || 0,
-				this.props.selectionEnd || 0
-			);
-		} else if ( ! isSelected && prevIsSelected ) {
-			this._editor.blur();
-		}
-
-		// For font size values changes from the font size picker
-		// we compare previous values to refresh the selected font size,
-		// this is also used when the tag name changes
-		// e.g Heading block and a level change like h1->h2.
-		const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
-		const prevFontSizeStyle = this.getParsedFontSize(
-			prevProps?.style?.fontSize
-		);
-		const isDifferentTag = prevProps.tagName !== tagName;
-		if (
-			( currentFontSize &&
-				( currentFontSizeStyle || prevFontSizeStyle ) &&
-				currentFontSizeStyle !== currentFontSize ) ||
-			isDifferentTag
-		) {
-			this.setState( {
-				currentFontSize: this.getFontSize( this.props ),
-			} );
-		}
-	}
-
-	getHtmlToRender( record, tagName ) {
-		// Save back to HTML from React tree.
-		let value = this.valueToFormat( record );
-
-		if ( value === undefined ) {
-			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
-			value = '';
-		}
-		// On android if content is empty we need to send no content or else the placeholder will not show.
-		if (
-			! this.isIOS &&
-			( value === '' || value === EMPTY_PARAGRAPH_TAGS )
-		) {
-			return '';
-		}
-
-		if ( tagName ) {
-			let extraAttributes = ``;
-			if ( tagName === `ol` ) {
-				if ( this.props.reversed ) {
-					extraAttributes += ` reversed`;
-				}
-				if ( this.props.start ) {
-					extraAttributes += ` start=${ this.props.start }`;
-				}
-			}
-			value = `<${ tagName }${ extraAttributes }>${ value }</${ tagName }>`;
-		}
-		return value;
-	}
-
-	getEditableProps() {
-		return {
-			// Overridable props.
-			style: {},
-			className: 'rich-text',
-			onKeyDown: () => null,
-		};
-	}
-
-	getParsedFontSize( fontSize ) {
-		const { height, width } = Dimensions.get( 'window' );
-		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
-
-		if ( ! fontSize ) {
-			return fontSize;
-		}
-
-		const selectedPxValue =
-			getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;
-
-		return parseFloat( selectedPxValue );
-	}
-
-	getFontSize( props ) {
-		const { baseGlobalStyles, tagName, fontSize, style } = props;
-		const tagNameFontSize =
-			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
-
-		let newFontSize = DEFAULT_FONT_SIZE;
-
-		// For block-based themes, get the default editor font size.
-		if ( baseGlobalStyles?.typography?.fontSize && tagName === 'p' ) {
-			newFontSize = baseGlobalStyles?.typography?.fontSize;
-		}
-
-		// For block-based themes, get the default element font size
-		// e.g h1, h2.
-		if ( tagNameFontSize ) {
-			newFontSize = tagNameFontSize;
-		}
-
-		// For font size values provided from the styles,
-		// usually from values set from the font size picker.
-		if ( style?.fontSize ) {
-			newFontSize = style.fontSize;
-		}
-
-		// Fall-back to a font size provided from its props (if there's any)
-		// and there are no other default values to use.
-		if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
-			newFontSize = fontSize;
-		}
-
-		// We need to always convert to px units because the selected value
-		// could be coming from the web where it could be stored as a different unit.
-		const selectedPxValue = this.getParsedFontSize( newFontSize );
-
-		return selectedPxValue;
-	}
-
-	getLineHeight() {
-		const { baseGlobalStyles, tagName, lineHeight, style } = this.props;
-		const tagNameLineHeight =
-			baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight;
-		let newLineHeight;
-
-		if ( ! this.getIsBlockBasedTheme() ) {
-			return;
-		}
-
-		// For block-based themes, get the default editor line height.
-		if ( baseGlobalStyles?.typography?.lineHeight && tagName === 'p' ) {
-			newLineHeight = parseFloat(
-				baseGlobalStyles?.typography?.lineHeight
-			);
-		}
-
-		// For block-based themes, get the default element line height
-		// e.g h1, h2.
-		if ( tagNameLineHeight ) {
-			newLineHeight = parseFloat( tagNameLineHeight );
-		}
-
-		// For line height values provided from the styles,
-		// usually from values set from the line height picker.
-		if ( style?.lineHeight ) {
-			newLineHeight = parseFloat( style.lineHeight );
-		}
-
-		// Fall-back to a line height provided from its props (if there's any)
-		// and there are no other default values to use.
-		if ( lineHeight && ! tagNameLineHeight && ! style?.lineHeight ) {
-			newLineHeight = lineHeight;
-		}
-
-		// Check the final value is not over the minimum supported value.
-		if ( newLineHeight && newLineHeight < MIN_LINE_HEIGHT ) {
-			newLineHeight = MIN_LINE_HEIGHT;
-		}
-
-		return newLineHeight;
-	}
-
-	getIsBlockBasedTheme() {
-		const { baseGlobalStyles } = this.props;
-
-		return (
-			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0
-		);
-	}
-
-	getBlockUseDefaultFont() {
-		// For block-based themes it enables using the defaultFont
-		// in Aztec for iOS so it allows customizing the font size
-		// for the Preformatted/Code and Heading blocks.
-		if ( ! this.isIOS ) {
-			return;
-		}
-
-		const { tagName } = this.props;
-		const isBlockBasedTheme = this.getIsBlockBasedTheme();
-		const tagsToMatch = /pre|h([1-6])$/gm;
-
-		return isBlockBasedTheme && tagsToMatch.test( tagName );
-	}
-
-	getLinkTextColor( defaultColor ) {
-		const { style } = this.props;
-		const customColor = style?.linkColor && colord( style.linkColor );
-
-		return customColor && customColor.isValid()
-			? customColor.toHex()
-			: defaultColor;
-	}
-
-	render() {
-		const {
-			tagName,
-			style,
-			__unstableIsSelected: isSelected,
-			children,
-			getStylesFromColorScheme,
-			minWidth,
-			maxWidth,
-			formatTypes,
-			parentBlockStyles,
-			accessibilityLabel,
-			disableEditingMenu = false,
-			baseGlobalStyles,
-			selectionStart,
-			selectionEnd,
-			disableSuggestions,
-			containerWidth,
-		} = this.props;
-		const { currentFontSize } = this.state;
-
-		const record = this.getRecord();
-		const html = this.getHtmlToRender( record, tagName );
-		const editableProps = this.getEditableProps();
-		const blockUseDefaultFont = this.getBlockUseDefaultFont();
-
-		const placeholderStyle = getStylesFromColorScheme(
-			styles.richTextPlaceholder,
-			styles.richTextPlaceholderDark
-		);
-
-		const { color: defaultPlaceholderTextColor } = placeholderStyle;
-		const fontSize = currentFontSize;
-		const lineHeight = this.getLineHeight();
-
-		const {
-			color: defaultColor,
-			textDecorationColor: defaultTextDecorationColor,
-			fontFamily: defaultFontFamily,
-		} = getStylesFromColorScheme( styles.richText, styles.richTextDark );
-		const linkTextColor = this.getLinkTextColor(
-			defaultTextDecorationColor
-		);
-
-		const currentSelectionStart = selectionStart ?? 0;
-		const currentSelectionEnd = selectionEnd ?? 0;
-		let selection = null;
-		if ( this.needsSelectionUpdate ) {
-			this.needsSelectionUpdate = false;
-			selection = {
-				start: currentSelectionStart,
-				end: currentSelectionEnd,
-			};
-
-			// On AztecAndroid, setting the caret to an out-of-bounds position will crash the editor so, let's check for some cases.
-			if ( ! this.isIOS ) {
-				// The following regular expression is used in Aztec here:
-				// https://github.com/wordpress-mobile/AztecEditor-Android/blob/b1fad439d56fa6d4aa0b78526fef355c59d00dd3/aztec/src/main/kotlin/org/wordpress/aztec/AztecParser.kt#L656
-				const brBeforeParaMatches = html.match( /(<br>)+<\/p>$/g );
-				if ( brBeforeParaMatches ) {
-					console.warn(
-						'Oops, BR tag(s) at the end of content. Aztec will remove them, adapting the selection...'
-					);
-					const count = (
-						brBeforeParaMatches[ 0 ].match( /br/g ) || []
-					).length;
-					if ( count > 0 ) {
-						let newSelectionStart = currentSelectionStart - count;
-						if ( newSelectionStart < 0 ) {
-							newSelectionStart = 0;
-						}
-						let newSelectionEnd = currentSelectionEnd - count;
-						if ( newSelectionEnd < 0 ) {
-							newSelectionEnd = 0;
-						}
-						selection = {
-							start: newSelectionStart,
-							end: newSelectionEnd,
-						};
-					}
-				}
-			}
-		}
-
-		if ( this.comesFromAztec ) {
-			this.comesFromAztec = false;
-			this.firedAfterTextChanged = false;
-		}
-
-		// Logic below assures that `RichText` width will always have equal value when container is almost fully filled.
-		const width =
-			maxWidth && this.state.width && maxWidth - this.state.width < 10
-				? maxWidth
-				: this.state.width;
-		const containerStyles = [
-			style?.padding &&
-				style?.backgroundColor && {
-					padding: style.padding,
-					backgroundColor: style.backgroundColor,
-				},
-			containerWidth && {
-				width: containerWidth,
-			},
-		];
-
-		const EditableView = ( props ) => {
-			this.customEditableOnKeyDown = props?.onKeyDown;
-
-			return <></>;
-		};
-
-		return (
-			<View style={ containerStyles }>
-				{ children &&
-					children( {
-						isSelected,
-						value: record,
-						onChange: this.onFormatChange,
-						onFocus: () => {},
-						editableProps,
-						editableTagName: EditableView,
-					} ) }
-				<RCTAztecView
-					accessibilityLabel={ accessibilityLabel }
-					ref={ ( ref ) => {
-						this._editor = ref;
-
-						if ( this.props.setRef ) {
-							this.props.setRef( ref );
-						}
-					} }
-					style={ {
-						backgroundColor: styles.richText.backgroundColor,
-						...style,
-						...( this.isIOS && minWidth && maxWidth
-							? { width }
-							: { maxWidth } ),
-						minHeight: this.state.height,
-					} }
-					blockUseDefaultFont={ blockUseDefaultFont }
-					text={ {
-						text: html,
-						eventCount: this.lastEventCount,
-						selection,
-						linkTextColor,
-						tag: tagName,
-					} }
-					placeholder={ this.props.placeholder }
-					placeholderTextColor={
-						style?.placeholderColor ||
-						this.props.placeholderTextColor ||
-						( baseGlobalStyles && baseGlobalStyles?.color?.text ) ||
-						defaultPlaceholderTextColor
-					}
-					deleteEnter={ this.props.deleteEnter }
-					onChange={ this.onChangeFromAztec }
-					onFocus={ this.onFocus }
-					onBlur={ this.onBlur }
-					onKeyDown={ this.onKeyDown }
-					triggerKeyCodes={
-						disableEditingMenu
-							? []
-							: this.suggestionOptions().map(
-									( op ) => op.triggerChar
-							  )
-					}
-					onPaste={ this.onPaste }
-					activeFormats={ this.getActiveFormatNames( record ) }
-					onContentSizeChange={ this.onContentSizeChange }
-					onCaretVerticalPositionChange={
-						this.props.onCaretVerticalPositionChange
-					}
-					onSelectionChange={ this.onSelectionChangeFromAztec }
-					blockType={ { tag: tagName } }
-					color={
-						( style && style.color ) ||
-						( parentBlockStyles && parentBlockStyles.color ) ||
-						( baseGlobalStyles && baseGlobalStyles?.color?.text ) ||
-						defaultColor
-					}
-					maxImagesWidth={ 200 }
-					fontFamily={ this.props.fontFamily || defaultFontFamily }
-					fontSize={ fontSize }
-					lineHeight={ lineHeight }
-					fontWeight={ this.props.fontWeight }
-					fontStyle={ this.props.fontStyle }
-					disableEditingMenu={ disableEditingMenu }
-					isMultiline={ this.isMultiline }
-					textAlign={ this.props.textAlign }
-					{ ...( this.isIOS ? { maxWidth } : {} ) }
-					minWidth={ minWidth }
-					id={ this.props.id }
-					selectionColor={ this.props.selectionColor }
-					disableAutocorrection={ this.props.disableAutocorrection }
-				/>
-				{ isSelected && (
-					<>
-						<FormatEdit
-							forwardedRef={ this._editor }
-							formatTypes={ formatTypes }
-							value={ record }
-							onChange={ this.onFormatChange }
-							onFocus={ () => {} }
-						/>
-						{ ! disableSuggestions && (
-							<BlockFormatControls>
-								<ToolbarButtonWithOptions
-									options={ this.suggestionOptions() }
-								/>
-							</BlockFormatControls>
-						) }
-					</>
-				) }
-			</View>
-		);
-	}
-}
-
-RichText.defaultProps = {
-	format: 'string',
-	value: '',
-	tagName: 'div',
-};
-
-const withFormatTypes = ( WrappedComponent ) => ( props ) => {
-	const {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} = props;
-	const { formatTypes } = useFormatTypes( {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats,
-	} );
-
-	return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
-};
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const { getBlockParents, getBlock, getSettings } =
-			select( 'core/block-editor' );
-		const parents = getBlockParents( clientId, true );
-		const parentBlock = parents ? getBlock( parents[ 0 ] ) : undefined;
-		const parentBlockStyles = parentBlock?.attributes?.childrenStyles;
-
-		const settings = getSettings();
-		const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles;
-
-		const colorPalettes = settings?.__experimentalFeatures?.color?.palette;
-		const colorPalette = colorPalettes
-			? flatColorPalettes( colorPalettes )
-			: settings?.colors;
-
-		return {
-			areMentionsSupported:
-				getSettings( 'capabilities' ).mentions === true,
-			areXPostsSupported: getSettings( 'capabilities' ).xposts === true,
-			...{ parentBlockStyles },
-			baseGlobalStyles,
-			colorPalette,
-		};
-	} ),
-	withPreferredColorScheme,
-	withFormatTypes,
-] )( RichText );
diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss
deleted file mode 100644
index 7a885c83063bba..00000000000000
--- a/packages/rich-text/src/component/style.native.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-
-.richText {
-	font-family: $default-regular-font;
-	color: $gray-900;
-	text-decoration-color: $blue-500;
-	background-color: transparent;
-}
-
-.richTextDark {
-	color: $white;
-	text-decoration-color: $blue-30;
-}
-
-.richTextPlaceholder {
-	color: $gray;
-}
-
-.richTextPlaceholderDark {
-	color: $gray-50;
-}
diff --git a/packages/rich-text/src/component/use-anchor-ref.js b/packages/rich-text/src/component/use-anchor-ref.js
index b8452b874f4404..023b42641fa29b 100644
--- a/packages/rich-text/src/component/use-anchor-ref.js
+++ b/packages/rich-text/src/component/use-anchor-ref.js
@@ -9,9 +9,12 @@ import deprecated from '@wordpress/deprecated';
  */
 import { getActiveFormat } from '../get-active-format';
 
-/** @typedef {import('@wordpress/element').RefObject} RefObject */
-/** @typedef {import('../register-format-type').RichTextFormatType} RichTextFormatType */
-/** @typedef {import('../create').RichTextValue} RichTextValue */
+/**
+ * @template T
+ * @typedef {import('@wordpress/element').RefObject<T>} RefObject<T>
+ */
+/** @typedef {import('../register-format-type').WPFormat} WPFormat */
+/** @typedef {import('../types').RichTextValue} RichTextValue */
 
 /**
  * This hook, to be used in a format type's Edit component, returns the active
@@ -23,7 +26,7 @@ import { getActiveFormat } from '../get-active-format';
  * @param {RefObject<HTMLElement>} $1.ref      React ref of the element
  *                                             containing  the editable content.
  * @param {RichTextValue}          $1.value    Value to check for selection.
- * @param {RichTextFormatType}     $1.settings The format type's settings.
+ * @param {WPFormat}               $1.settings The format type's settings.
  *
  * @return {Element|Range} The active element or selection range.
  */
@@ -37,7 +40,9 @@ export function useAnchorRef( { ref, value, settings = {} } ) {
 	const activeFormat = name ? getActiveFormat( value, name ) : undefined;
 
 	return useMemo( () => {
-		if ( ! ref.current ) return;
+		if ( ! ref.current ) {
+			return;
+		}
 		const {
 			ownerDocument: { defaultView },
 		} = ref.current;
diff --git a/packages/rich-text/src/component/use-anchor.js b/packages/rich-text/src/component/use-anchor.js
index 075515c1521cfc..412c31bf5b7072 100644
--- a/packages/rich-text/src/component/use-anchor.js
+++ b/packages/rich-text/src/component/use-anchor.js
@@ -1,21 +1,145 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import { useState, useLayoutEffect } from '@wordpress/element';
+
+/** @typedef {import('../register-format-type').WPFormat} WPFormat */
+/** @typedef {import('../types').RichTextValue} RichTextValue */
 
 /**
- * Internal dependencies
+ * Given a range and a format tag name and class name, returns the closest
+ * format element.
+ *
+ * @param {Range}       range                  The Range to check.
+ * @param {HTMLElement} editableContentElement The editable wrapper.
+ * @param {string}      tagName                The tag name of the format element.
+ * @param {string}      className              The class name of the format element.
+ *
+ * @return {HTMLElement|undefined} The format element, if found.
  */
-import { getActiveFormat } from '../get-active-format';
+function getFormatElement( range, editableContentElement, tagName, className ) {
+	let element = range.startContainer;
+
+	// Even if the active format is defined, the actualy DOM range's start
+	// container may be outside of the format's DOM element:
+	// `a‸<strong>b</strong>` (DOM) while visually it's `a<strong>‸b</strong>`.
+	// So at a given selection index, start with the deepest format DOM element.
+	if (
+		element.nodeType === element.TEXT_NODE &&
+		range.startOffset === element.length &&
+		element.nextSibling
+	) {
+		element = element.nextSibling;
+
+		while ( element.firstChild ) {
+			element = element.firstChild;
+		}
+	}
 
-/** @typedef {import('../register-format-type').RichTextFormatType} RichTextFormatType */
-/** @typedef {import('../create').RichTextValue} RichTextValue */
+	if ( element.nodeType !== element.ELEMENT_NODE ) {
+		element = element.parentElement;
+	}
+
+	if ( ! element ) {
+		return;
+	}
+	if ( element === editableContentElement ) {
+		return;
+	}
+	if ( ! editableContentElement.contains( element ) ) {
+		return;
+	}
+
+	const selector = tagName + ( className ? '.' + className : '' );
+
+	// .closest( selector ), but with a boundary. Check if the element matches
+	// the selector. If it doesn't match, try the parent element if it's not the
+	// editable wrapper. We don't want to try to match ancestors of the editable
+	// wrapper, which is what .closest( selector ) would do. When the element is
+	// the editable wrapper (which is most likely the case because most text is
+	// unformatted), this never runs.
+	while ( element !== editableContentElement ) {
+		if ( element.matches( selector ) ) {
+			return element;
+		}
+
+		element = element.parentElement;
+	}
+}
 
 /**
  * @typedef {Object} VirtualAnchorElement
- * @property {Function} getBoundingClientRect A function returning a DOMRect
- * @property {Document} ownerDocument         The element's ownerDocument
+ * @property {() => DOMRect} getBoundingClientRect A function returning a DOMRect
+ * @property {HTMLElement}   contextElement        The actual DOM element
+ */
+
+/**
+ * Creates a virtual anchor element for a range.
+ *
+ * @param {Range}       range                  The range to create a virtual anchor element for.
+ * @param {HTMLElement} editableContentElement The editable wrapper.
+ *
+ * @return {VirtualAnchorElement} The virtual anchor element.
+ */
+function createVirtualAnchorElement( range, editableContentElement ) {
+	return {
+		contextElement: editableContentElement,
+		getBoundingClientRect() {
+			return editableContentElement.contains( range.startContainer )
+				? range.getBoundingClientRect()
+				: editableContentElement.getBoundingClientRect();
+		},
+	};
+}
+
+/**
+ * Get the anchor: a format element if there is a matching one based on the
+ * tagName and className or a range otherwise.
+ *
+ * @param {HTMLElement} editableContentElement The editable wrapper.
+ * @param {string}      tagName                The tag name of the format
+ *                                             element.
+ * @param {string}      className              The class name of the format
+ *                                             element.
+ *
+ * @return {HTMLElement|VirtualAnchorElement|undefined} The anchor.
  */
+function getAnchor( editableContentElement, tagName, className ) {
+	if ( ! editableContentElement ) {
+		return;
+	}
+
+	const { ownerDocument } = editableContentElement;
+	const { defaultView } = ownerDocument;
+	const selection = defaultView.getSelection();
+
+	if ( ! selection ) {
+		return;
+	}
+	if ( ! selection.rangeCount ) {
+		return;
+	}
+
+	const range = selection.getRangeAt( 0 );
+
+	if ( ! range || ! range.startContainer ) {
+		return;
+	}
+
+	const formatElement = getFormatElement(
+		range,
+		editableContentElement,
+		tagName,
+		className
+	);
+
+	if ( formatElement ) {
+		return formatElement;
+	}
+
+	return createVirtualAnchorElement( range, editableContentElement );
+}
 
 /**
  * This hook, to be used in a format type's Edit component, returns the active
@@ -23,62 +147,65 @@ import { getActiveFormat } from '../get-active-format';
  * no format is active. The returned value is meant to be used for positioning
  * UI, e.g. by passing it to the `Popover` component via the `anchor` prop.
  *
- * @param {Object}             $1                        Named parameters.
- * @param {HTMLElement|null}   $1.editableContentElement The element containing
- *                                                       the editable content.
- * @param {RichTextValue}      $1.value                  Value to check for selection.
- * @param {RichTextFormatType} $1.settings               The format type's settings.
+ * @param {Object}           $1                        Named parameters.
+ * @param {HTMLElement|null} $1.editableContentElement The element containing
+ *                                                     the editable content.
+ * @param {WPFormat=}        $1.settings               The format type's settings.
  * @return {Element|VirtualAnchorElement|undefined|null} The active element or selection range.
  */
-export function useAnchor( { editableContentElement, value, settings = {} } ) {
-	const { tagName, className, name } = settings;
-	const activeFormat = name ? getActiveFormat( value, name ) : undefined;
-
-	return useMemo( () => {
-		if ( ! editableContentElement ) return;
-		const {
-			ownerDocument: { defaultView },
-		} = editableContentElement;
-		const selection = defaultView.getSelection();
-
-		if ( ! selection.rangeCount ) {
+export function useAnchor( { editableContentElement, settings = {} } ) {
+	const { tagName, className, isActive } = settings;
+	const [ anchor, setAnchor ] = useState( () =>
+		getAnchor( editableContentElement, tagName, className )
+	);
+	const wasActive = usePrevious( isActive );
+
+	useLayoutEffect( () => {
+		if ( ! editableContentElement ) {
 			return;
 		}
 
-		const selectionWithinEditableContentElement =
-			editableContentElement?.contains( selection?.anchorNode );
-
-		const range = selection.getRangeAt( 0 );
+		function callback() {
+			setAnchor(
+				getAnchor( editableContentElement, tagName, className )
+			);
+		}
 
-		if ( ! activeFormat ) {
-			return {
-				ownerDocument: range.startContainer.ownerDocument,
-				getBoundingClientRect() {
-					return selectionWithinEditableContentElement
-						? range.getBoundingClientRect()
-						: editableContentElement.getBoundingClientRect();
-				},
-			};
+		function attach() {
+			ownerDocument.addEventListener( 'selectionchange', callback );
 		}
 
-		let element = range.startContainer;
+		function detach() {
+			ownerDocument.removeEventListener( 'selectionchange', callback );
+		}
 
-		// If the caret is right before the element, select the next element.
-		element = element.nextElementSibling || element;
+		const { ownerDocument } = editableContentElement;
 
-		while ( element.nodeType !== element.ELEMENT_NODE ) {
-			element = element.parentNode;
+		if (
+			editableContentElement === ownerDocument.activeElement ||
+			// When a link is created, we need to attach the popover to the newly created anchor.
+			( ! wasActive && isActive ) ||
+			// Sometimes we're _removing_ an active anchor, such as the inline color popover.
+			// When we add the color, it switches from a virtual anchor to a `<mark>` element.
+			// When we _remove_ the color, it switches from a `<mark>` element to a virtual anchor.
+			( wasActive && ! isActive )
+		) {
+			setAnchor(
+				getAnchor( editableContentElement, tagName, className )
+			);
+			attach();
 		}
 
-		return element.closest(
-			tagName + ( className ? '.' + className : '' )
-		);
-	}, [
-		editableContentElement,
-		activeFormat,
-		value.start,
-		value.end,
-		tagName,
-		className,
-	] );
+		editableContentElement.addEventListener( 'focusin', attach );
+		editableContentElement.addEventListener( 'focusout', detach );
+
+		return () => {
+			detach();
+
+			editableContentElement.removeEventListener( 'focusin', attach );
+			editableContentElement.removeEventListener( 'focusout', detach );
+		};
+	}, [ editableContentElement, tagName, className, isActive, wasActive ] );
+
+	return anchor;
 }
diff --git a/packages/rich-text/src/component/use-boundary-style.js b/packages/rich-text/src/component/use-boundary-style.js
index 214fd6862c1733..9f29b24e3ecc6b 100644
--- a/packages/rich-text/src/component/use-boundary-style.js
+++ b/packages/rich-text/src/component/use-boundary-style.js
@@ -9,11 +9,15 @@ import { useEffect, useRef } from '@wordpress/element';
  */
 export function useBoundaryStyle( { record } ) {
 	const ref = useRef();
-	const { activeFormats = [] } = record.current;
+	const { activeFormats = [], replacements, start } = record.current;
+	const activeReplacement = replacements[ start ];
 	useEffect( () => {
 		// There's no need to recalculate the boundary styles if no formats are
 		// active, because no boundary styles will be visible.
-		if ( ! activeFormats || ! activeFormats.length ) {
+		if (
+			( ! activeFormats || ! activeFormats.length ) &&
+			! activeReplacement
+		) {
 			return;
 		}
 
@@ -46,6 +50,6 @@ export function useBoundaryStyle( { record } ) {
 		if ( globalStyle.innerHTML !== style ) {
 			globalStyle.innerHTML = style;
 		}
-	}, [ activeFormats ] );
+	}, [ activeFormats, activeReplacement ] );
 	return ref;
 }
diff --git a/packages/rich-text/src/component/use-copy-handler.js b/packages/rich-text/src/component/use-copy-handler.js
deleted file mode 100644
index 6093b615a77277..00000000000000
--- a/packages/rich-text/src/component/use-copy-handler.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { toHTMLString } from '../to-html-string';
-import { isCollapsed } from '../is-collapsed';
-import { slice } from '../slice';
-import { getTextContent } from '../get-text-content';
-
-export function useCopyHandler( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function onCopy( event ) {
-			const { record, multilineTag, preserveWhiteSpace } =
-				propsRef.current;
-			if (
-				isCollapsed( record.current ) ||
-				! element.contains( element.ownerDocument.activeElement )
-			) {
-				return;
-			}
-
-			const selectedRecord = slice( record.current );
-			const plainText = getTextContent( selectedRecord );
-			const html = toHTMLString( {
-				value: selectedRecord,
-				multilineTag,
-				preserveWhiteSpace,
-			} );
-			event.clipboardData.setData( 'text/plain', plainText );
-			event.clipboardData.setData( 'text/html', html );
-			event.clipboardData.setData( 'rich-text', 'true' );
-			event.clipboardData.setData(
-				'rich-text-multi-line-tag',
-				multilineTag || ''
-			);
-			event.preventDefault();
-		}
-
-		element.addEventListener( 'copy', onCopy );
-		return () => {
-			element.removeEventListener( 'copy', onCopy );
-		};
-	}, [] );
-}
diff --git a/packages/rich-text/src/component/use-default-style.js b/packages/rich-text/src/component/use-default-style.js
index 43908ae4f10a85..a4c8449076e886 100644
--- a/packages/rich-text/src/component/use-default-style.js
+++ b/packages/rich-text/src/component/use-default-style.js
@@ -33,7 +33,9 @@ const minWidth = '1px';
 
 export function useDefaultStyle() {
 	return useCallback( ( element ) => {
-		if ( ! element ) return;
+		if ( ! element ) {
+			return;
+		}
 		element.style.whiteSpace = whiteSpace;
 		element.style.minWidth = minWidth;
 	}, [] );
diff --git a/packages/rich-text/src/component/use-delete.js b/packages/rich-text/src/component/use-delete.js
deleted file mode 100644
index 3694db42c41b39..00000000000000
--- a/packages/rich-text/src/component/use-delete.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { BACKSPACE, DELETE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { remove } from '../remove';
-import { removeLineSeparator } from '../remove-line-separator';
-import { isEmptyLine } from '../is-empty';
-
-export function useDelete( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			const { keyCode } = event;
-			const { createRecord, handleChange, multilineTag } =
-				propsRef.current;
-
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( keyCode !== DELETE && keyCode !== BACKSPACE ) {
-				return;
-			}
-
-			const currentValue = createRecord();
-			const { start, end, text } = currentValue;
-			const isReverse = keyCode === BACKSPACE;
-
-			// Always handle full content deletion ourselves.
-			if ( start === 0 && end !== 0 && end === text.length ) {
-				handleChange( remove( currentValue ) );
-				event.preventDefault();
-				return;
-			}
-
-			if ( multilineTag ) {
-				let newValue;
-
-				// Check to see if we should remove the first item if empty.
-				if (
-					isReverse &&
-					currentValue.start === 0 &&
-					currentValue.end === 0 &&
-					isEmptyLine( currentValue )
-				) {
-					newValue = removeLineSeparator( currentValue, ! isReverse );
-				} else {
-					newValue = removeLineSeparator( currentValue, isReverse );
-				}
-
-				if ( newValue ) {
-					handleChange( newValue );
-					event.preventDefault();
-				}
-			}
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}
diff --git a/packages/rich-text/src/component/use-format-boundaries.js b/packages/rich-text/src/component/use-format-boundaries.js
deleted file mode 100644
index eec097672a1462..00000000000000
--- a/packages/rich-text/src/component/use-format-boundaries.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useReducer } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { isCollapsed } from '../is-collapsed';
-
-const EMPTY_ACTIVE_FORMATS = [];
-
-export function useFormatBoundaries( props ) {
-	const [ , forceRender ] = useReducer( () => ( {} ) );
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		function onKeyDown( event ) {
-			const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
-
-			if (
-				// Only override left and right keys without modifiers pressed.
-				shiftKey ||
-				altKey ||
-				metaKey ||
-				ctrlKey ||
-				( keyCode !== LEFT && keyCode !== RIGHT )
-			) {
-				return;
-			}
-
-			const { record, applyRecord } = propsRef.current;
-			const {
-				text,
-				formats,
-				start,
-				end,
-				activeFormats: currentActiveFormats = [],
-			} = record.current;
-			const collapsed = isCollapsed( record.current );
-			const { ownerDocument } = element;
-			const { defaultView } = ownerDocument;
-			// To do: ideally, we should look at visual position instead.
-			const { direction } = defaultView.getComputedStyle( element );
-			const reverseKey = direction === 'rtl' ? RIGHT : LEFT;
-			const isReverse = event.keyCode === reverseKey;
-
-			// If the selection is collapsed and at the very start, do nothing if
-			// navigating backward.
-			// If the selection is collapsed and at the very end, do nothing if
-			// navigating forward.
-			if ( collapsed && currentActiveFormats.length === 0 ) {
-				if ( start === 0 && isReverse ) {
-					return;
-				}
-
-				if ( end === text.length && ! isReverse ) {
-					return;
-				}
-			}
-
-			// If the selection is not collapsed, let the browser handle collapsing
-			// the selection for now. Later we could expand this logic to set
-			// boundary positions if needed.
-			if ( ! collapsed ) {
-				return;
-			}
-
-			const formatsBefore = formats[ start - 1 ] || EMPTY_ACTIVE_FORMATS;
-			const formatsAfter = formats[ start ] || EMPTY_ACTIVE_FORMATS;
-			const destination = isReverse ? formatsBefore : formatsAfter;
-			const isIncreasing = currentActiveFormats.every(
-				( format, index ) => format === destination[ index ]
-			);
-
-			let newActiveFormatsLength = currentActiveFormats.length;
-
-			if ( ! isIncreasing ) {
-				newActiveFormatsLength--;
-			} else if ( newActiveFormatsLength < destination.length ) {
-				newActiveFormatsLength++;
-			}
-
-			if ( newActiveFormatsLength === currentActiveFormats.length ) {
-				record.current._newActiveFormats = destination;
-				return;
-			}
-
-			event.preventDefault();
-
-			const origin = isReverse ? formatsAfter : formatsBefore;
-			const source = isIncreasing ? destination : origin;
-			const newActiveFormats = source.slice( 0, newActiveFormatsLength );
-			const newValue = {
-				...record.current,
-				activeFormats: newActiveFormats,
-			};
-			record.current = newValue;
-			applyRecord( newValue );
-			forceRender();
-		}
-
-		element.addEventListener( 'keydown', onKeyDown );
-		return () => {
-			element.removeEventListener( 'keydown', onKeyDown );
-		};
-	}, [] );
-}
diff --git a/packages/rich-text/src/component/use-input-and-selection.js b/packages/rich-text/src/component/use-input-and-selection.js
deleted file mode 100644
index b8c5c0915903ae..00000000000000
--- a/packages/rich-text/src/component/use-input-and-selection.js
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getActiveFormats } from '../get-active-formats';
-import { updateFormats } from '../update-formats';
-
-/**
- * All inserting input types that would insert HTML into the DOM.
- *
- * @see https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes
- *
- * @type {Set}
- */
-const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
-	'insertParagraph',
-	'insertOrderedList',
-	'insertUnorderedList',
-	'insertHorizontalRule',
-	'insertLink',
-] );
-
-const EMPTY_ACTIVE_FORMATS = [];
-
-const PLACEHOLDER_ATTR_NAME = 'data-rich-text-placeholder';
-
-/**
- * If the selection is set on the placeholder element, collapse the selection to
- * the start (before the placeholder).
- *
- * @param {Window} defaultView
- */
-function fixPlaceholderSelection( defaultView ) {
-	const selection = defaultView.getSelection();
-	const { anchorNode, anchorOffset } = selection;
-
-	if ( anchorNode.nodeType !== anchorNode.ELEMENT_NODE ) {
-		return;
-	}
-
-	const targetNode = anchorNode.childNodes[ anchorOffset ];
-
-	if (
-		! targetNode ||
-		targetNode.nodeType !== targetNode.ELEMENT_NODE ||
-		! targetNode.hasAttribute( PLACEHOLDER_ATTR_NAME )
-	) {
-		return;
-	}
-
-	selection.collapseToStart();
-}
-
-export function useInputAndSelection( props ) {
-	const propsRef = useRef( props );
-	propsRef.current = props;
-	return useRefEffect( ( element ) => {
-		const { ownerDocument } = element;
-		const { defaultView } = ownerDocument;
-
-		let isComposing = false;
-		let rafId;
-
-		function onInput( event ) {
-			// Do not trigger a change if characters are being composed.
-			// Browsers  will usually emit a final `input` event when the
-			// characters are composed.
-			// As of December 2019, Safari doesn't support
-			// nativeEvent.isComposing.
-			if ( isComposing ) {
-				return;
-			}
-
-			let inputType;
-
-			if ( event ) {
-				inputType = event.inputType;
-			}
-
-			const { record, applyRecord, createRecord, handleChange } =
-				propsRef.current;
-
-			// The browser formatted something or tried to insert HTML.
-			// Overwrite it. It will be handled later by the format library if
-			// needed.
-			if (
-				inputType &&
-				( inputType.indexOf( 'format' ) === 0 ||
-					INSERTION_INPUT_TYPES_TO_IGNORE.has( inputType ) )
-			) {
-				applyRecord( record.current );
-				return;
-			}
-
-			const currentValue = createRecord();
-			const { start, activeFormats: oldActiveFormats = [] } =
-				record.current;
-
-			// Update the formats between the last and new caret position.
-			const change = updateFormats( {
-				value: currentValue,
-				start,
-				end: currentValue.start,
-				formats: oldActiveFormats,
-			} );
-
-			handleChange( change );
-		}
-
-		/**
-		 * Syncs the selection to local state. A callback for the `selectionchange`
-		 * native events, `keyup`, `mouseup` and `touchend` synthetic events, and
-		 * animation frames after the `focus` event.
-		 *
-		 * @param {Event|DOMHighResTimeStamp} event
-		 */
-		function handleSelectionChange( event ) {
-			const {
-				record,
-				applyRecord,
-				createRecord,
-				isSelected,
-				onSelectionChange,
-			} = propsRef.current;
-
-			// Check if the implementor disabled editing. `contentEditable`
-			// does disable input, but not text selection, so we must ignore
-			// selection changes.
-			if ( element.contentEditable !== 'true' ) {
-				return;
-			}
-
-			// If the selection changes where the active element is a parent of
-			// the rich text instance (writing flow), call `onSelectionChange`
-			// for the rich text instance that contains the start or end of the
-			// selection.
-			if ( ownerDocument.activeElement !== element ) {
-				// Only process if the active elment is contentEditable, either
-				// this rich text instance or the writing flow parent. Fixes a
-				// bug in Firefox where it strangely selects the closest
-				// contentEditable element, even though the click was outside
-				// any contentEditable element.
-				if ( ownerDocument.activeElement.contentEditable !== 'true' ) {
-					return;
-				}
-
-				if ( ! ownerDocument.activeElement.contains( element ) ) {
-					return;
-				}
-
-				const selection = defaultView.getSelection();
-				const { anchorNode, focusNode } = selection;
-
-				if (
-					element.contains( anchorNode ) &&
-					element !== anchorNode &&
-					element.contains( focusNode ) &&
-					element !== focusNode
-				) {
-					const { start, end } = createRecord();
-					record.current.activeFormats = EMPTY_ACTIVE_FORMATS;
-					onSelectionChange( start, end );
-				} else if (
-					element.contains( anchorNode ) &&
-					element !== anchorNode
-				) {
-					const { start, end: offset = start } = createRecord();
-					record.current.activeFormats = EMPTY_ACTIVE_FORMATS;
-					onSelectionChange( offset );
-				} else if ( element.contains( focusNode ) ) {
-					const { start, end: offset = start } = createRecord();
-					record.current.activeFormats = EMPTY_ACTIVE_FORMATS;
-					onSelectionChange( undefined, offset );
-				}
-				return;
-			}
-
-			if ( event.type !== 'selectionchange' && ! isSelected ) {
-				return;
-			}
-
-			// In case of a keyboard event, ignore selection changes during
-			// composition.
-			if ( isComposing ) {
-				return;
-			}
-
-			const { start, end, text } = createRecord();
-			const oldRecord = record.current;
-
-			// Fallback mechanism for IE11, which doesn't support the input event.
-			// Any input results in a selection change.
-			if ( text !== oldRecord.text ) {
-				onInput();
-				return;
-			}
-
-			if ( start === oldRecord.start && end === oldRecord.end ) {
-				// Sometimes the browser may set the selection on the placeholder
-				// element, in which case the caret is not visible. We need to set
-				// the caret before the placeholder if that's the case.
-				if ( oldRecord.text.length === 0 && start === 0 ) {
-					fixPlaceholderSelection( defaultView );
-				}
-
-				return;
-			}
-
-			const newValue = {
-				...oldRecord,
-				start,
-				end,
-				// _newActiveFormats may be set on arrow key navigation to control
-				// the right boundary position. If undefined, getActiveFormats will
-				// give the active formats according to the browser.
-				activeFormats: oldRecord._newActiveFormats,
-				_newActiveFormats: undefined,
-			};
-
-			const newActiveFormats = getActiveFormats(
-				newValue,
-				EMPTY_ACTIVE_FORMATS
-			);
-
-			// Update the value with the new active formats.
-			newValue.activeFormats = newActiveFormats;
-
-			// It is important that the internal value is updated first,
-			// otherwise the value will be wrong on render!
-			record.current = newValue;
-			applyRecord( newValue, { domOnly: true } );
-			onSelectionChange( start, end );
-		}
-
-		function onCompositionStart() {
-			isComposing = true;
-			// Do not update the selection when characters are being composed as
-			// this rerenders the component and might destroy internal browser
-			// editing state.
-			ownerDocument.removeEventListener(
-				'selectionchange',
-				handleSelectionChange
-			);
-			// Remove the placeholder. Since the rich text value doesn't update
-			// during composition, the placeholder doesn't get removed. There's
-			// no need to re-add it, when the value is updated on compositionend
-			// it will be re-added when the value is empty.
-			element.querySelector( `[${ PLACEHOLDER_ATTR_NAME }]` )?.remove();
-		}
-
-		function onCompositionEnd() {
-			isComposing = false;
-			// Ensure the value is up-to-date for browsers that don't emit a final
-			// input event after composition.
-			onInput( { inputType: 'insertText' } );
-			// Tracking selection changes can be resumed.
-			ownerDocument.addEventListener(
-				'selectionchange',
-				handleSelectionChange
-			);
-		}
-
-		function onFocus() {
-			const { record, isSelected, onSelectionChange, applyRecord } =
-				propsRef.current;
-
-			// When the whole editor is editable, let writing flow handle
-			// selection.
-			if ( element.parentElement.closest( '[contenteditable="true"]' ) ) {
-				return;
-			}
-
-			if ( ! isSelected ) {
-				// We know for certain that on focus, the old selection is invalid.
-				// It will be recalculated on the next mouseup, keyup, or touchend
-				// event.
-				const index = undefined;
-
-				record.current = {
-					...record.current,
-					start: index,
-					end: index,
-					activeFormats: EMPTY_ACTIVE_FORMATS,
-				};
-				onSelectionChange( index, index );
-			} else {
-				applyRecord( record.current );
-				onSelectionChange( record.current.start, record.current.end );
-			}
-
-			// Update selection as soon as possible, which is at the next animation
-			// frame. The event listener for selection changes may be added too late
-			// at this point, but this focus event is still too early to calculate
-			// the selection.
-			rafId = defaultView.requestAnimationFrame( handleSelectionChange );
-		}
-
-		element.addEventListener( 'input', onInput );
-		element.addEventListener( 'compositionstart', onCompositionStart );
-		element.addEventListener( 'compositionend', onCompositionEnd );
-		element.addEventListener( 'focus', onFocus );
-		// Selection updates must be done at these events as they
-		// happen before the `selectionchange` event. In some cases,
-		// the `selectionchange` event may not even fire, for
-		// example when the window receives focus again on click.
-		element.addEventListener( 'keyup', handleSelectionChange );
-		element.addEventListener( 'mouseup', handleSelectionChange );
-		element.addEventListener( 'touchend', handleSelectionChange );
-		ownerDocument.addEventListener(
-			'selectionchange',
-			handleSelectionChange
-		);
-		return () => {
-			element.removeEventListener( 'input', onInput );
-			element.removeEventListener(
-				'compositionstart',
-				onCompositionStart
-			);
-			element.removeEventListener( 'compositionend', onCompositionEnd );
-			element.removeEventListener( 'focus', onFocus );
-			element.removeEventListener( 'keyup', handleSelectionChange );
-			element.removeEventListener( 'mouseup', handleSelectionChange );
-			element.removeEventListener( 'touchend', handleSelectionChange );
-			ownerDocument.removeEventListener(
-				'selectionchange',
-				handleSelectionChange
-			);
-			defaultView.cancelAnimationFrame( rafId );
-		};
-	}, [] );
-}
diff --git a/packages/rich-text/src/component/use-select-object.js b/packages/rich-text/src/component/use-select-object.js
deleted file mode 100644
index 0866815be15758..00000000000000
--- a/packages/rich-text/src/component/use-select-object.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-export function useSelectObject() {
-	return useRefEffect( ( element ) => {
-		function onClick( event ) {
-			const { target } = event;
-
-			// If the child element has no text content, it must be an object.
-			if ( target === element || target.textContent ) {
-				return;
-			}
-
-			const { ownerDocument } = target;
-			const { defaultView } = ownerDocument;
-			const range = ownerDocument.createRange();
-			const selection = defaultView.getSelection();
-
-			range.selectNode( target );
-			selection.removeAllRanges();
-			selection.addRange( range );
-		}
-
-		element.addEventListener( 'click', onClick );
-		return () => {
-			element.removeEventListener( 'click', onClick );
-		};
-	}, [] );
-}
diff --git a/packages/rich-text/src/concat.js b/packages/rich-text/src/concat.js
index e758b6085d6578..499015166dfa6b 100644
--- a/packages/rich-text/src/concat.js
+++ b/packages/rich-text/src/concat.js
@@ -5,7 +5,7 @@
 import { normaliseFormats } from './normalise-formats';
 import { create } from './create';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Concats a pair of rich text values. Not that this mutates `a` and does NOT
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index b9b31e14762573..a8fc4b92c49600 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -9,31 +9,11 @@ import { select } from '@wordpress/data';
 import { store as richTextStore } from './store';
 import { createElement } from './create-element';
 import { mergePair } from './concat';
-import {
-	LINE_SEPARATOR,
-	OBJECT_REPLACEMENT_CHARACTER,
-	ZWNBSP,
-} from './special-characters';
+import { OBJECT_REPLACEMENT_CHARACTER, ZWNBSP } from './special-characters';
+import { toHTMLString } from './to-html-string';
+import { getTextContent } from './get-text-content';
 
-/**
- * @typedef {Object} RichTextFormat
- *
- * @property {string} type Format type.
- */
-
-/**
- * @typedef {Array<RichTextFormat>} RichTextFormatList
- */
-
-/**
- * @typedef {Object} RichTextValue
- *
- * @property {string}                    text         Text.
- * @property {Array<RichTextFormatList>} formats      Formats.
- * @property {Array<RichTextFormat>}     replacements Replacements.
- * @property {number|undefined}          start        Selection start.
- * @property {number|undefined}          end          Selection end.
- */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 function createEmptyValue() {
 	return {
@@ -43,7 +23,7 @@ function createEmptyValue() {
 	};
 }
 
-function toFormat( { type, attributes } ) {
+function toFormat( { tagName, attributes } ) {
 	let formatType;
 
 	if ( attributes && attributes.class ) {
@@ -65,11 +45,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 +60,7 @@ function toFormat( { type, attributes } ) {
 	}
 
 	if ( ! attributes ) {
-		return { type: formatType.name };
+		return { formatType, type: formatType.name, tagName };
 	}
 
 	const registeredAttributes = {};
@@ -92,14 +72,6 @@ function toFormat( { type, attributes } ) {
 
 		registeredAttributes[ key ] = _attributes[ name ];
 
-		if ( formatType.__unstableFilterAttributeValue ) {
-			registeredAttributes[ key ] =
-				formatType.__unstableFilterAttributeValue(
-					key,
-					registeredAttributes[ key ]
-				);
-		}
-
 		// delete the attribute and what's left is considered
 		// to be unregistered.
 		delete _attributes[ name ];
@@ -113,20 +85,125 @@ function toFormat( { type, attributes } ) {
 		unregisteredAttributes[ name ] = attributes[ name ];
 	}
 
+	if ( formatType.contentEditable === false ) {
+		delete unregisteredAttributes.contenteditable;
+	}
+
 	return {
+		formatType,
 		type: formatType.name,
+		tagName,
 		attributes: registeredAttributes,
 		unregisteredAttributes,
 	};
 }
 
+/**
+ * The RichTextData class is used to instantiate a wrapper around rich text
+ * values, with methods that can be used to transform or manipulate the data.
+ *
+ * - Create an empty instance: `new RichTextData()`.
+ * - Create one from an HTML string: `RichTextData.fromHTMLString(
+ *   '<em>hello</em>' )`.
+ * - Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement(
+ *   document.querySelector( 'p' ) )`.
+ * - Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`.
+ * - Create one from a rich text value: `new RichTextData( { text: '...',
+ *   formats: [ ... ] } )`.
+ *
+ * @todo Add methods to manipulate the data, such as applyFormat, slice etc.
+ */
+export class RichTextData {
+	#value;
+
+	static empty() {
+		return new RichTextData();
+	}
+	static fromPlainText( text ) {
+		return new RichTextData( create( { text } ) );
+	}
+	static fromHTMLString( html ) {
+		return new RichTextData( create( { html } ) );
+	}
+	/**
+	 * Create a RichTextData instance from an HTML element.
+	 *
+	 * @param {HTMLElement}                    htmlElement The HTML element to create the instance from.
+	 * @param {{preserveWhiteSpace?: boolean}} options     Options.
+	 * @return {RichTextData} The RichTextData instance.
+	 */
+	static fromHTMLElement( htmlElement, options = {} ) {
+		const { preserveWhiteSpace = false } = options;
+		const element = preserveWhiteSpace
+			? htmlElement
+			: collapseWhiteSpace( htmlElement );
+		const richTextData = new RichTextData( create( { element } ) );
+		Object.defineProperty( richTextData, 'originalHTML', {
+			value: htmlElement.innerHTML,
+		} );
+		return richTextData;
+	}
+	constructor( init = createEmptyValue() ) {
+		this.#value = init;
+	}
+	toPlainText() {
+		return getTextContent( this.#value );
+	}
+	// We could expose `toHTMLElement` at some point as well, but we'd only use
+	// it internally.
+	/**
+	 * Convert the rich text value to an HTML string.
+	 *
+	 * @param {{preserveWhiteSpace?: boolean}} options Options.
+	 * @return {string} The HTML string.
+	 */
+	toHTMLString( { preserveWhiteSpace } = {} ) {
+		return (
+			this.originalHTML ||
+			toHTMLString( { value: this.#value, preserveWhiteSpace } )
+		);
+	}
+	valueOf() {
+		return this.toHTMLString();
+	}
+	toString() {
+		return this.toHTMLString();
+	}
+	toJSON() {
+		return this.toHTMLString();
+	}
+	get length() {
+		return this.text.length;
+	}
+	get formats() {
+		return this.#value.formats;
+	}
+	get replacements() {
+		return this.#value.replacements;
+	}
+	get text() {
+		return this.#value.text;
+	}
+}
+
+for ( const name of Object.getOwnPropertyNames( String.prototype ) ) {
+	if ( RichTextData.prototype.hasOwnProperty( name ) ) {
+		continue;
+	}
+
+	Object.defineProperty( RichTextData.prototype, name, {
+		value( ...args ) {
+			// Should we convert back to RichTextData?
+			return this.toHTMLString()[ name ]( ...args );
+		},
+	} );
+}
+
 /**
  * Create a RichText value from an `Element` tree (DOM), an HTML string or a
  * plain text string, with optionally a `Range` object to set the selection. If
- * called without any input, an empty value will be created. If
- * `multilineTag` is provided, any content of direct children whose type matches
- * `multilineTag` will be separated by two newlines. The optional functions can
- * be used to filter out content.
+ * called without any input, an empty value will be created. The optional
+ * functions can be used to filter out content.
  *
  * A value will have the following shape, which you are strongly encouraged not
  * to modify without the use of helper functions:
@@ -153,14 +230,7 @@ function toFormat( { type, attributes } ) {
  * @param {string}  [$1.text]                     Text to create value from.
  * @param {string}  [$1.html]                     HTML to create value from.
  * @param {Range}   [$1.range]                    Range to create value from.
- * @param {string}  [$1.multilineTag]             Multiline tag if the structure is
- *                                                multiline.
- * @param {Array}   [$1.multilineWrapperTags]     Tags where lines can be found if
- *                                                nesting is possible.
- * @param {boolean} [$1.preserveWhiteSpace]       Whether or not to collapse white
- *                                                space characters.
  * @param {boolean} [$1.__unstableIsEditableTree]
- *
  * @return {RichTextValue} A rich text value.
  */
 export function create( {
@@ -168,11 +238,16 @@ export function create( {
 	text,
 	html,
 	range,
-	multilineTag,
-	multilineWrapperTags,
 	__unstableIsEditableTree: isEditableTree,
-	preserveWhiteSpace,
 } = {} ) {
+	if ( html instanceof RichTextData ) {
+		return {
+			text: html.text,
+			formats: html.formats,
+			replacements: html.replacements,
+		};
+	}
+
 	if ( typeof text === 'string' && text.length > 0 ) {
 		return {
 			formats: Array( text.length ),
@@ -191,22 +266,10 @@ export function create( {
 		return createEmptyValue();
 	}
 
-	if ( ! multilineTag ) {
-		return createFromElement( {
-			element,
-			range,
-			isEditableTree,
-			preserveWhiteSpace,
-		} );
-	}
-
-	return createFromMultilineElement( {
+	return createFromElement( {
 		element,
 		range,
-		multilineTag,
-		multilineWrapperTags,
 		isEditableTree,
-		preserveWhiteSpace,
 	} );
 }
 
@@ -307,21 +370,73 @@ function filterRange( node, range, filter ) {
  * Collapse any whitespace used for HTML formatting to one space character,
  * because it will also be displayed as such by the browser.
  *
- * @param {string} string
+ * We need to strip it from the content because we use white-space: pre-wrap for
+ * displaying editable rich text. Without using white-space: pre-wrap, the
+ * browser will litter the content with non breaking spaces, among other issues.
+ * See packages/rich-text/src/component/use-default-style.js.
+ *
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse#collapsing_of_white_space
+ *
+ * @param {HTMLElement} element
+ * @param {boolean}     isRoot
+ *
+ * @return {HTMLElement} New element with collapsed whitespace.
  */
-function collapseWhiteSpace( string ) {
-	return string.replace( /[\n\r\t]+/g, ' ' );
+function collapseWhiteSpace( element, isRoot = true ) {
+	const clone = element.cloneNode( true );
+	clone.normalize();
+	Array.from( clone.childNodes ).forEach( ( node, i, nodes ) => {
+		if ( node.nodeType === node.TEXT_NODE ) {
+			let newNodeValue = node.nodeValue;
+
+			if ( /[\n\t\r\f]/.test( newNodeValue ) ) {
+				newNodeValue = newNodeValue.replace( /[\n\t\r\f]+/g, ' ' );
+			}
+
+			if ( newNodeValue.indexOf( '  ' ) !== -1 ) {
+				newNodeValue = newNodeValue.replace( / {2,}/g, ' ' );
+			}
+
+			if ( i === 0 && newNodeValue.startsWith( ' ' ) ) {
+				newNodeValue = newNodeValue.slice( 1 );
+			} else if (
+				isRoot &&
+				i === nodes.length - 1 &&
+				newNodeValue.endsWith( ' ' )
+			) {
+				newNodeValue = newNodeValue.slice( 0, -1 );
+			}
+
+			node.nodeValue = newNodeValue;
+		} else if ( node.nodeType === node.ELEMENT_NODE ) {
+			collapseWhiteSpace( node, false );
+		}
+	} );
+	return clone;
 }
 
 /**
- * Removes reserved characters used by rich-text (zero width non breaking spaces added by `toTree` and object replacement characters).
+ * We need to normalise line breaks to `\n` so they are consistent across
+ * platforms and serialised properly. Not removing \r would cause it to
+ * linger and result in double line breaks when whitespace is preserved.
+ */
+const CARRIAGE_RETURN = '\r';
+
+/**
+ * Removes reserved characters used by rich-text (zero width non breaking spaces
+ * added by `toTree` and object replacement characters).
  *
  * @param {string} string
  */
 export function removeReservedCharacters( string ) {
-	// with the global flag, note that we should create a new regex each time OR reset lastIndex state.
+	// with the global flag, note that we should create a new regex each time OR
+	// reset lastIndex state.
 	return string.replace(
-		new RegExp( `[${ ZWNBSP }${ OBJECT_REPLACEMENT_CHARACTER }]`, 'gu' ),
+		new RegExp(
+			`[${ ZWNBSP }${ OBJECT_REPLACEMENT_CHARACTER }${ CARRIAGE_RETURN }]`,
+			'gu'
+		),
 		''
 	);
 }
@@ -329,29 +444,14 @@ export function removeReservedCharacters( string ) {
 /**
  * Creates a Rich Text value from a DOM element and range.
  *
- * @param {Object}  $1                        Named argements.
- * @param {Element} [$1.element]              Element to create value from.
- * @param {Range}   [$1.range]                Range to create value from.
- * @param {string}  [$1.multilineTag]         Multiline tag if the structure is
- *                                            multiline.
- * @param {Array}   [$1.multilineWrapperTags] Tags where lines can be found if
- *                                            nesting is possible.
- * @param {boolean} [$1.preserveWhiteSpace]   Whether or not to collapse white
- *                                            space characters.
- * @param {Array}   [$1.currentWrapperTags]
+ * @param {Object}  $1                  Named arguments.
+ * @param {Element} [$1.element]        Element to create value from.
+ * @param {Range}   [$1.range]          Range to create value from.
  * @param {boolean} [$1.isEditableTree]
  *
  * @return {RichTextValue} A rich text value.
  */
-function createFromElement( {
-	element,
-	range,
-	multilineTag,
-	multilineWrapperTags,
-	currentWrapperTags = [],
-	isEditableTree,
-	preserveWhiteSpace,
-} ) {
+function createFromElement( { element, range, isEditableTree } ) {
 	const accumulator = createEmptyValue();
 
 	if ( ! element ) {
@@ -368,18 +468,11 @@ 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;
-
-			if ( ! preserveWhiteSpace ) {
-				filter = ( string ) =>
-					removeReservedCharacters( collapseWhiteSpace( string ) );
-			}
-
-			const text = filter( node.nodeValue );
-			range = filterRange( node, range, filter );
+			const text = removeReservedCharacters( node.nodeValue );
+			range = filterRange( node, range, removeReservedCharacters );
 			accumulateSelection( accumulator, node, range, { text } );
 			// Create a sparse array of the same length as `text`, in which
 			// formats can be added.
@@ -389,28 +482,54 @@ function createFromElement( {
 			continue;
 		}
 
+		if (
+			node.nodeType === node.COMMENT_NODE ||
+			( node.nodeType === node.ELEMENT_NODE &&
+				node.tagName === 'SPAN' &&
+				node.hasAttribute( 'data-rich-text-comment' ) )
+		) {
+			const value = {
+				formats: [ , ],
+				replacements: [
+					{
+						type: '#comment',
+						attributes: {
+							'data-rich-text-comment':
+								node.nodeType === node.COMMENT_NODE
+									? node.nodeValue
+									: node.getAttribute(
+											'data-rich-text-comment'
+									  ),
+						},
+					},
+				],
+				text: OBJECT_REPLACEMENT_CHARACTER,
+			};
+			accumulateSelection( accumulator, node, range, value );
+			mergePair( accumulator, value );
+			continue;
+		}
+
 		if ( node.nodeType !== node.ELEMENT_NODE ) {
 			continue;
 		}
 
 		if (
 			isEditableTree &&
-			// Ignore any placeholders.
-			( node.getAttribute( 'data-rich-text-placeholder' ) ||
-				// Ignore any line breaks that are not inserted by us.
-				( type === 'br' &&
-					! node.getAttribute( 'data-rich-text-line-break' ) ) )
+			// Ignore any line breaks that are not inserted by us.
+			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,48 +544,50 @@ 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
-		) {
-			const value = createFromMultilineElement( {
-				element: node,
-				range,
-				multilineTag,
-				multilineWrapperTags,
-				currentWrapperTags: [ ...currentWrapperTags, format ],
-				isEditableTree,
-				preserveWhiteSpace,
+		// When a format type is declared as not editable, replace it with an
+		// object replacement character and preserve the inner HTML.
+		if ( format?.formatType?.contentEditable === false ) {
+			delete format.formatType;
+			accumulateSelection( accumulator, node, range, createEmptyValue() );
+			mergePair( accumulator, {
+				formats: [ , ],
+				replacements: [
+					{
+						...format,
+						innerHTML: node.innerHTML,
+					},
+				],
+				text: OBJECT_REPLACEMENT_CHARACTER,
 			} );
-
-			accumulateSelection( accumulator, node, range, value );
-			mergePair( accumulator, value );
 			continue;
 		}
 
+		if ( format ) {
+			delete format.formatType;
+		}
+
 		const value = createFromElement( {
 			element: node,
 			range,
-			multilineTag,
-			multilineWrapperTags,
 			isEditableTree,
-			preserveWhiteSpace,
 		} );
 
 		accumulateSelection( accumulator, node, range, value );
 
-		if ( ! format ) {
+		// Ignore any placeholders, but keep their content since the browser
+		// might insert text inside them when the editable element is flex.
+		if ( ! format || node.getAttribute( 'data-rich-text-placeholder' ) ) {
 			mergePair( accumulator, value );
 		} else if ( value.text.length === 0 ) {
 			if ( format.attributes ) {
@@ -508,83 +629,10 @@ function createFromElement( {
 	return accumulator;
 }
 
-/**
- * Creates a rich text value from a DOM element and range that should be
- * multiline.
- *
- * @param {Object}  $1                        Named argements.
- * @param {Element} [$1.element]              Element to create value from.
- * @param {Range}   [$1.range]                Range to create value from.
- * @param {string}  [$1.multilineTag]         Multiline tag if the structure is
- *                                            multiline.
- * @param {Array}   [$1.multilineWrapperTags] Tags where lines can be found if
- *                                            nesting is possible.
- * @param {Array}   [$1.currentWrapperTags]   Whether to prepend a line
- *                                            separator.
- * @param {boolean} [$1.preserveWhiteSpace]   Whether or not to collapse white
- *                                            space characters.
- * @param {boolean} [$1.isEditableTree]
- *
- * @return {RichTextValue} A rich text value.
- */
-function createFromMultilineElement( {
-	element,
-	range,
-	multilineTag,
-	multilineWrapperTags,
-	currentWrapperTags = [],
-	isEditableTree,
-	preserveWhiteSpace,
-} ) {
-	const accumulator = createEmptyValue();
-
-	if ( ! element || ! element.hasChildNodes() ) {
-		return accumulator;
-	}
-
-	const length = element.children.length;
-
-	// Optimise for speed.
-	for ( let index = 0; index < length; index++ ) {
-		const node = element.children[ index ];
-
-		if ( node.nodeName.toLowerCase() !== multilineTag ) {
-			continue;
-		}
-
-		const value = createFromElement( {
-			element: node,
-			range,
-			multilineTag,
-			multilineWrapperTags,
-			currentWrapperTags,
-			isEditableTree,
-			preserveWhiteSpace,
-		} );
-
-		// Multiline value text should be separated by a line separator.
-		if ( index !== 0 || currentWrapperTags.length > 0 ) {
-			mergePair( accumulator, {
-				formats: [ , ],
-				replacements:
-					currentWrapperTags.length > 0
-						? [ currentWrapperTags ]
-						: [ , ],
-				text: LINE_SEPARATOR,
-			} );
-		}
-
-		accumulateSelection( accumulator, node, range, value );
-		mergePair( accumulator, value );
-	}
-
-	return accumulator;
-}
-
 /**
  * Gets the attributes of an element in object shape.
  *
- * @param {Object}  $1         Named argements.
+ * @param {Object}  $1         Named arguments.
  * @param {Element} $1.element Element to get attributes from.
  *
  * @return {Object|void} Attribute object or `undefined` if the element has no
diff --git a/packages/rich-text/src/get-active-format.js b/packages/rich-text/src/get-active-format.js
index 783177168b60ab..80c6f08ec88d9b 100644
--- a/packages/rich-text/src/get-active-format.js
+++ b/packages/rich-text/src/get-active-format.js
@@ -3,8 +3,8 @@
  */
 import { getActiveFormats } from './get-active-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 /**
  * Gets the format object by type at the start of the selection. This can be
@@ -19,7 +19,7 @@ import { getActiveFormats } from './get-active-formats';
  *                                    type, or undefined.
  */
 export function getActiveFormat( value, formatType ) {
-	return getActiveFormats( value )?.find(
+	return getActiveFormats( value ).find(
 		( { type } ) => type === formatType
 	);
 }
diff --git a/packages/rich-text/src/get-active-formats.js b/packages/rich-text/src/get-active-formats.js
index 256c95eca01431..e3bc7d8415de58 100644
--- a/packages/rich-text/src/get-active-formats.js
+++ b/packages/rich-text/src/get-active-formats.js
@@ -1,5 +1,10 @@
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormatList} RichTextFormatList */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormatList} RichTextFormatList */
+
+/**
+ * Internal dependencies
+ */
+import { isFormatEqual } from './is-format-equal';
 
 /**
  * Gets the all format objects at the start of the selection.
@@ -10,10 +15,8 @@
  *
  * @return {RichTextFormatList} Active format objects.
  */
-export function getActiveFormats(
-	{ formats, start, end, activeFormats },
-	EMPTY_ACTIVE_FORMATS = []
-) {
+export function getActiveFormats( value, EMPTY_ACTIVE_FORMATS = [] ) {
+	const { formats, start, end, activeFormats } = value;
 	if ( start === undefined ) {
 		return EMPTY_ACTIVE_FORMATS;
 	}
@@ -37,5 +40,49 @@ export function getActiveFormats(
 		return formatsAfter;
 	}
 
-	return formats[ start ] || EMPTY_ACTIVE_FORMATS;
+	// If there's no formats at the start index, there are not active formats.
+	if ( ! formats[ start ] ) {
+		return EMPTY_ACTIVE_FORMATS;
+	}
+
+	const selectedFormats = formats.slice( start, end );
+
+	// Clone the formats so we're not mutating the live value.
+	const _activeFormats = [ ...selectedFormats[ 0 ] ];
+	let i = selectedFormats.length;
+
+	// For performance reasons, start from the end where it's much quicker to
+	// realise that there are no active formats.
+	while ( i-- ) {
+		const formatsAtIndex = selectedFormats[ i ];
+
+		// If we run into any index without formats, we're sure that there's no
+		// active formats.
+		if ( ! formatsAtIndex ) {
+			return EMPTY_ACTIVE_FORMATS;
+		}
+
+		let ii = _activeFormats.length;
+
+		// Loop over the active formats and remove any that are not present at
+		// the current index.
+		while ( ii-- ) {
+			const format = _activeFormats[ ii ];
+
+			if (
+				! formatsAtIndex.find( ( _format ) =>
+					isFormatEqual( format, _format )
+				)
+			) {
+				_activeFormats.splice( ii, 1 );
+			}
+		}
+
+		// If there are no active formats, we can stop.
+		if ( _activeFormats.length === 0 ) {
+			return EMPTY_ACTIVE_FORMATS;
+		}
+	}
+
+	return _activeFormats || EMPTY_ACTIVE_FORMATS;
 }
diff --git a/packages/rich-text/src/get-active-object.js b/packages/rich-text/src/get-active-object.js
index 1c1ff4de552c90..a1e5623b65b73f 100644
--- a/packages/rich-text/src/get-active-object.js
+++ b/packages/rich-text/src/get-active-object.js
@@ -4,8 +4,8 @@
 
 import { OBJECT_REPLACEMENT_CHARACTER } from './special-characters';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 /**
  * Gets the active object, if there is any.
diff --git a/packages/rich-text/src/get-format-colors.native.js b/packages/rich-text/src/get-format-colors.native.js
deleted file mode 100644
index f9b3a9187ca2b9..00000000000000
--- a/packages/rich-text/src/get-format-colors.native.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { getColorObjectByAttributeValues } from '@wordpress/block-editor';
-
-const FORMAT_TYPE = 'core/text-color';
-const REGEX_TO_MATCH = /^has-(.*)-color$/;
-const TAGS_TO_SEARCH = /\<mark/;
-
-export function getFormatColors( value, formats, colors ) {
-	if ( value?.search( TAGS_TO_SEARCH ) !== -1 ) {
-		const newFormats = formats.slice();
-
-		newFormats.forEach( ( format ) => {
-			format.forEach( ( currentFormat ) => {
-				if ( currentFormat?.type === FORMAT_TYPE ) {
-					const className = currentFormat?.attributes?.class;
-					currentFormat.attributes.style =
-						currentFormat.attributes.style.replace( / /g, '' );
-
-					className?.split( ' ' ).forEach( ( currentClass ) => {
-						const match = currentClass.match( REGEX_TO_MATCH );
-						if ( match ) {
-							const [ , colorSlug ] =
-								currentClass.match( REGEX_TO_MATCH );
-							const colorObject = getColorObjectByAttributeValues(
-								colors,
-								colorSlug
-							);
-							const currentStyles =
-								currentFormat?.attributes?.style;
-							if (
-								colorObject &&
-								( ! currentStyles ||
-									currentStyles?.indexOf(
-										colorObject.color
-									) === -1 )
-							) {
-								currentFormat.attributes.style = [
-									`color: ${ colorObject.color }`,
-									currentStyles,
-								].join( ';' );
-							}
-						}
-					} );
-				}
-			} );
-		} );
-
-		return newFormats;
-	}
-
-	return formats;
-}
diff --git a/packages/rich-text/src/get-text-content.js b/packages/rich-text/src/get-text-content.js
index 17fb064eb36d8e..71fc9e7a749f0b 100644
--- a/packages/rich-text/src/get-text-content.js
+++ b/packages/rich-text/src/get-text-content.js
@@ -1,17 +1,9 @@
 /**
  * Internal dependencies
  */
-import {
-	OBJECT_REPLACEMENT_CHARACTER,
-	LINE_SEPARATOR,
-} from './special-characters';
+import { OBJECT_REPLACEMENT_CHARACTER } from './special-characters';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-
-const pattern = new RegExp(
-	`[${ OBJECT_REPLACEMENT_CHARACTER }${ LINE_SEPARATOR }]`,
-	'g'
-);
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Get the textual content of a Rich Text value. This is similar to
@@ -22,7 +14,5 @@ const pattern = new RegExp(
  * @return {string} The text content.
  */
 export function getTextContent( { text } ) {
-	return text.replace( pattern, ( c ) =>
-		c === OBJECT_REPLACEMENT_CHARACTER ? '' : '\n'
-	);
+	return text.replace( OBJECT_REPLACEMENT_CHARACTER, '' );
 }
diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js
deleted file mode 100644
index 33e6e054a68a63..00000000000000
--- a/packages/rich-text/src/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export { store } from './store';
-export { applyFormat } from './apply-format';
-export { concat } from './concat';
-export { create } from './create';
-export { getActiveFormat } from './get-active-format';
-export { getActiveFormats } from './get-active-formats';
-export { getActiveObject } from './get-active-object';
-export { getTextContent } from './get-text-content';
-export { isCollapsed } from './is-collapsed';
-export { isEmpty, isEmptyLine as __unstableIsEmptyLine } from './is-empty';
-export { join } from './join';
-export { registerFormatType } from './register-format-type';
-export { removeFormat } from './remove-format';
-export { remove } from './remove';
-export { replace } from './replace';
-export { insert } from './insert';
-export { insertLineSeparator as __unstableInsertLineSeparator } from './insert-line-separator';
-export { insertObject } from './insert-object';
-export { slice } from './slice';
-export { split } from './split';
-export { toDom as __unstableToDom } from './to-dom';
-export { toHTMLString } from './to-html-string';
-export { toggleFormat } from './toggle-format';
-export { LINE_SEPARATOR as __UNSTABLE_LINE_SEPARATOR } from './special-characters';
-export { unregisterFormatType } from './unregister-format-type';
-export { createElement as __unstableCreateElement } from './create-element';
-
-export { useAnchorRef } from './component/use-anchor-ref';
-export { useAnchor } from './component/use-anchor';
-
-export {
-	default as __experimentalRichText,
-	useRichText as __unstableUseRichText,
-} from './component';
-export { default as __unstableFormatEdit } from './component/format-edit';
diff --git a/packages/rich-text/src/index.ts b/packages/rich-text/src/index.ts
new file mode 100644
index 00000000000000..f82317d81573d0
--- /dev/null
+++ b/packages/rich-text/src/index.ts
@@ -0,0 +1,38 @@
+export { store } from './store';
+export { applyFormat } from './apply-format';
+export { concat } from './concat';
+export { RichTextData, create } from './create';
+export { getActiveFormat } from './get-active-format';
+export { getActiveFormats } from './get-active-formats';
+export { getActiveObject } from './get-active-object';
+export { getTextContent } from './get-text-content';
+export { isCollapsed } from './is-collapsed';
+export { isEmpty } from './is-empty';
+export { join } from './join';
+export { registerFormatType } from './register-format-type';
+export { removeFormat } from './remove-format';
+export { remove } from './remove';
+export { replace } from './replace';
+export { insert } from './insert';
+export { insertObject } from './insert-object';
+export { slice } from './slice';
+export { split } from './split';
+export { toDom as __unstableToDom } from './to-dom';
+export { toHTMLString } from './to-html-string';
+export { toggleFormat } from './toggle-format';
+export { unregisterFormatType } from './unregister-format-type';
+export { createElement as __unstableCreateElement } from './create-element';
+
+export { useAnchorRef } from './component/use-anchor-ref';
+export { useAnchor } from './component/use-anchor';
+
+export {
+	default as __experimentalRichText,
+	useRichText as __unstableUseRichText,
+} from './component';
+
+/**
+ * An object which represents a formatted string. See main `@wordpress/rich-text`
+ * documentation for more information.
+ */
+export type { RichTextValue } from './types';
diff --git a/packages/rich-text/src/insert-line-separator.js b/packages/rich-text/src/insert-line-separator.js
deleted file mode 100644
index cf87f1a184d2c4..00000000000000
--- a/packages/rich-text/src/insert-line-separator.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Internal dependencies
- */
-
-import { insert } from './insert';
-import { LINE_SEPARATOR } from './special-characters';
-
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-
-/**
- * Insert a line break character into a Rich Text value at the given
- * `startIndex`. Any content between `startIndex` and `endIndex` will be
- * removed. Indices are retrieved from the selection if none are provided.
- *
- * @param {RichTextValue} value        Value to modify.
- * @param {number}        [startIndex] Start index.
- * @param {number}        [endIndex]   End index.
- *
- * @return {RichTextValue} A new value with the value inserted.
- */
-export function insertLineSeparator(
-	value,
-	startIndex = value.start,
-	endIndex = value.end
-) {
-	const beforeText = value.text.slice( 0, startIndex );
-	const previousLineSeparatorIndex = beforeText.lastIndexOf( LINE_SEPARATOR );
-	const previousLineSeparatorFormats =
-		value.replacements[ previousLineSeparatorIndex ];
-	let replacements = [ , ];
-
-	if ( previousLineSeparatorFormats ) {
-		replacements = [ previousLineSeparatorFormats ];
-	}
-
-	const valueToInsert = {
-		formats: [ , ],
-		replacements,
-		text: LINE_SEPARATOR,
-	};
-
-	return insert( value, valueToInsert, startIndex, endIndex );
-}
diff --git a/packages/rich-text/src/insert-object.js b/packages/rich-text/src/insert-object.js
index ef5ad3da00df5f..ac8afb25b2010b 100644
--- a/packages/rich-text/src/insert-object.js
+++ b/packages/rich-text/src/insert-object.js
@@ -5,8 +5,8 @@
 import { insert } from './insert';
 import { OBJECT_REPLACEMENT_CHARACTER } from './special-characters';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 /**
  * Insert a format as an object into a Rich Text value at the given
diff --git a/packages/rich-text/src/insert.js b/packages/rich-text/src/insert.js
index 888e32bdc0dacc..e908c676505d3d 100644
--- a/packages/rich-text/src/insert.js
+++ b/packages/rich-text/src/insert.js
@@ -5,7 +5,7 @@
 import { create } from './create';
 import { normaliseFormats } from './normalise-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Insert a Rich Text value, an HTML string, or a plain text string, into a
diff --git a/packages/rich-text/src/is-collapsed.js b/packages/rich-text/src/is-collapsed.js
deleted file mode 100644
index 763ffae3bd0dba..00000000000000
--- a/packages/rich-text/src/is-collapsed.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-
-/**
- * Check if the selection of a Rich Text value is collapsed or not. Collapsed
- * means that no characters are selected, but there is a caret present. If there
- * is no selection, `undefined` will be returned. This is similar to
- * `window.getSelection().isCollapsed()`.
- *
- * @param {RichTextValue} value The rich text value to check.
- *
- * @return {boolean|undefined} True if the selection is collapsed, false if not,
- *                             undefined if there is no selection.
- */
-export function isCollapsed( { start, end } ) {
-	if ( start === undefined || end === undefined ) {
-		return;
-	}
-
-	return start === end;
-}
diff --git a/packages/rich-text/src/is-collapsed.ts b/packages/rich-text/src/is-collapsed.ts
new file mode 100644
index 00000000000000..fcde8014799206
--- /dev/null
+++ b/packages/rich-text/src/is-collapsed.ts
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import type { RichTextValue } from './types';
+
+/**
+ * Check if the selection of a Rich Text value is collapsed or not. Collapsed
+ * means that no characters are selected, but there is a caret present. If there
+ * is no selection, `undefined` will be returned. This is similar to
+ * `window.getSelection().isCollapsed()`.
+ *
+ * @param props       The rich text value to check.
+ * @param props.start
+ * @param props.end
+ * @return True if the selection is collapsed, false if not, undefined if there is no selection.
+ */
+export function isCollapsed( {
+	start,
+	end,
+}: RichTextValue ): boolean | undefined {
+	if ( start === undefined || end === undefined ) {
+		return;
+	}
+
+	return start === end;
+}
diff --git a/packages/rich-text/src/is-empty.js b/packages/rich-text/src/is-empty.js
index 1bc0a3525fce95..86bc64bb36b565 100644
--- a/packages/rich-text/src/is-empty.js
+++ b/packages/rich-text/src/is-empty.js
@@ -1,9 +1,4 @@
-/**
- * Internal dependencies
- */
-import { LINE_SEPARATOR } from './special-characters';
-
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Check if a Rich Text value is Empty, meaning it contains no text or any
@@ -16,34 +11,3 @@ import { LINE_SEPARATOR } from './special-characters';
 export function isEmpty( { text } ) {
 	return text.length === 0;
 }
-
-/**
- * Check if the current collapsed selection is on an empty line in case of a
- * multiline value.
- *
- * @param {RichTextValue} value Value te check.
- *
- * @return {boolean} True if the line is empty, false if not.
- */
-export function isEmptyLine( { text, start, end } ) {
-	if ( start !== end ) {
-		return false;
-	}
-
-	if ( text.length === 0 ) {
-		return true;
-	}
-
-	if ( start === 0 && text.slice( 0, 1 ) === LINE_SEPARATOR ) {
-		return true;
-	}
-
-	if ( start === text.length && text.slice( -1 ) === LINE_SEPARATOR ) {
-		return true;
-	}
-
-	return (
-		text.slice( start - 1, end + 1 ) ===
-		`${ LINE_SEPARATOR }${ LINE_SEPARATOR }`
-	);
-}
diff --git a/packages/rich-text/src/is-format-equal.js b/packages/rich-text/src/is-format-equal.js
index 1504923f2ba9e0..dc6d9653770b76 100644
--- a/packages/rich-text/src/is-format-equal.js
+++ b/packages/rich-text/src/is-format-equal.js
@@ -1,4 +1,4 @@
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 /**
  * Optimised equality check for format objects.
diff --git a/packages/rich-text/src/is-range-equal.js b/packages/rich-text/src/is-range-equal.js
new file mode 100644
index 00000000000000..70a70aa6af6d7d
--- /dev/null
+++ b/packages/rich-text/src/is-range-equal.js
@@ -0,0 +1,21 @@
+/**
+ * Returns true if two ranges are equal, or false otherwise. Ranges are
+ * considered equal if their start and end occur in the same container and
+ * offset.
+ *
+ * @param {Range|null} a First range object to test.
+ * @param {Range|null} b First range object to test.
+ *
+ * @return {boolean} Whether the two ranges are equal.
+ */
+export function isRangeEqual( a, b ) {
+	return (
+		a === b ||
+		( a &&
+			b &&
+			a.startContainer === b.startContainer &&
+			a.startOffset === b.startOffset &&
+			a.endContainer === b.endContainer &&
+			a.endOffset === b.endOffset )
+	);
+}
diff --git a/packages/rich-text/src/join.js b/packages/rich-text/src/join.js
index 3c113623d5c701..805d2528f0c688 100644
--- a/packages/rich-text/src/join.js
+++ b/packages/rich-text/src/join.js
@@ -5,7 +5,7 @@
 import { create } from './create';
 import { normaliseFormats } from './normalise-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Combine an array of Rich Text values into one, optionally separated by
diff --git a/packages/rich-text/src/normalise-formats.js b/packages/rich-text/src/normalise-formats.js
index 395aa336c4acc1..e73314151849e8 100644
--- a/packages/rich-text/src/normalise-formats.js
+++ b/packages/rich-text/src/normalise-formats.js
@@ -4,7 +4,7 @@
 
 import { isFormatEqual } from './is-format-equal';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Normalises formats: ensures subsequent adjacent equal formats have the same
diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js
index b271091cbe6a0a..c8aa45f022154c 100644
--- a/packages/rich-text/src/register-format-type.js
+++ b/packages/rich-text/src/register-format-type.js
@@ -9,14 +9,15 @@ import { store as richTextStore } from './store';
 /**
  * @typedef {Object} WPFormat
  *
- * @property {string}   name        A string identifying the format. Must be
- *                                  unique across all registered formats.
- * @property {string}   tagName     The HTML tag this format will wrap the
- *                                  selection with.
- * @property {string}   [className] A class to match the format.
- * @property {string}   title       Name of the format.
- * @property {Function} edit        Should return a component for the user to
- *                                  interact with the new registered format.
+ * @property {string}        name        A string identifying the format. Must be
+ *                                       unique across all registered formats.
+ * @property {string}        tagName     The HTML tag this format will wrap the
+ *                                       selection with.
+ * @property {boolean}       interactive Whether format makes content interactive or not.
+ * @property {string | null} [className] A class to match the format.
+ * @property {string}        title       Name of the format.
+ * @property {Function}      edit        Should return a component for the user to
+ *                                       interact with the new registered format.
  */
 
 /**
@@ -70,9 +71,9 @@ export function registerFormatType( name, settings ) {
 		return;
 	}
 
-	if ( ! /^[_a-zA-Z]+[a-zA-Z0-9-]*$/.test( settings.className ) ) {
+	if ( ! /^[_a-zA-Z]+[a-zA-Z0-9_-]*$/.test( settings.className ) ) {
 		window.console.error(
-			'A class name must begin with a letter, followed by any number of hyphens, letters, or numbers.'
+			'A class name must begin with a letter, followed by any number of hyphens, underscores, letters, or numbers.'
 		);
 		return;
 	}
@@ -82,7 +83,10 @@ export function registerFormatType( name, settings ) {
 			richTextStore
 		).getFormatTypeForBareElement( settings.tagName );
 
-		if ( formatTypeForBareElement ) {
+		if (
+			formatTypeForBareElement &&
+			formatTypeForBareElement.name !== 'core/unknown'
+		) {
 			window.console.error(
 				`Format "${ formatTypeForBareElement.name }" is already registered to handle bare tag name "${ settings.tagName }".`
 			);
diff --git a/packages/rich-text/src/remove-format.js b/packages/rich-text/src/remove-format.js
index 794a15de7e17e0..831b72e279faa9 100644
--- a/packages/rich-text/src/remove-format.js
+++ b/packages/rich-text/src/remove-format.js
@@ -4,7 +4,7 @@
 
 import { normaliseFormats } from './normalise-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Remove any format object from a Rich Text value by type from the given
diff --git a/packages/rich-text/src/remove-line-separator.js b/packages/rich-text/src/remove-line-separator.js
deleted file mode 100644
index 071bf9c524c46e..00000000000000
--- a/packages/rich-text/src/remove-line-separator.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Internal dependencies
- */
-
-import { LINE_SEPARATOR } from './special-characters';
-import { isCollapsed } from './is-collapsed';
-import { remove } from './remove';
-
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-
-/**
- * Removes a line separator character, if existing, from a Rich Text value at
- * the current indices. If no line separator exists on the indices it will
- * return undefined.
- *
- * @param {RichTextValue} value    Value to modify.
- * @param {boolean}       backward Indicates if are removing from the start
- *                                 index or the end index.
- *
- * @return {RichTextValue|undefined} A new value with the line separator
- *                                   removed. Or undefined if no line separator
- *                                   is found on the position.
- */
-export function removeLineSeparator( value, backward = true ) {
-	const { replacements, text, start, end } = value;
-	const collapsed = isCollapsed( value );
-	let index = start - 1;
-	let removeStart = collapsed ? start - 1 : start;
-	let removeEnd = end;
-	if ( ! backward ) {
-		index = end;
-		removeStart = start;
-		removeEnd = collapsed ? end + 1 : end;
-	}
-
-	if ( text[ index ] !== LINE_SEPARATOR ) {
-		return;
-	}
-
-	let newValue;
-	// If the line separator that is about te be removed
-	// contains wrappers, remove the wrappers first.
-	if ( collapsed && replacements[ index ] && replacements[ index ].length ) {
-		const newReplacements = replacements.slice();
-
-		newReplacements[ index ] = replacements[ index ].slice( 0, -1 );
-		newValue = {
-			...value,
-			replacements: newReplacements,
-		};
-	} else {
-		newValue = remove( value, removeStart, removeEnd );
-	}
-	return newValue;
-}
diff --git a/packages/rich-text/src/remove.js b/packages/rich-text/src/remove.js
index 71f981f8b55b14..c8db71949b35c2 100644
--- a/packages/rich-text/src/remove.js
+++ b/packages/rich-text/src/remove.js
@@ -5,7 +5,7 @@
 import { insert } from './insert';
 import { create } from './create';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Remove content from a Rich Text value between the given `startIndex` and
diff --git a/packages/rich-text/src/replace.js b/packages/rich-text/src/replace.js
index 98579a7bae739f..f95b37e925b462 100644
--- a/packages/rich-text/src/replace.js
+++ b/packages/rich-text/src/replace.js
@@ -4,7 +4,7 @@
 
 import { normaliseFormats } from './normalise-formats';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Search a Rich Text value and replace the match(es) with `replacement`. This
diff --git a/packages/rich-text/src/slice.js b/packages/rich-text/src/slice.js
index bba068835f5af6..94b48cbb47c491 100644
--- a/packages/rich-text/src/slice.js
+++ b/packages/rich-text/src/slice.js
@@ -1,4 +1,4 @@
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Slice a Rich Text value from `startIndex` to `endIndex`. Indices are
diff --git a/packages/rich-text/src/special-characters.js b/packages/rich-text/src/special-characters.js
index 078525ec1777e6..a05f614daf94b7 100644
--- a/packages/rich-text/src/special-characters.js
+++ b/packages/rich-text/src/special-characters.js
@@ -1,8 +1,3 @@
-/**
- * Line separator character, used for multiline text.
- */
-export const LINE_SEPARATOR = '\u2028';
-
 /**
  * Object replacement character, used as a placeholder for objects.
  */
diff --git a/packages/rich-text/src/split.js b/packages/rich-text/src/split.js
index 08071d17349d74..1853fb7bce585d 100644
--- a/packages/rich-text/src/split.js
+++ b/packages/rich-text/src/split.js
@@ -2,9 +2,7 @@
  * Internal dependencies
  */
 
-import { replace } from './replace';
-
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Split a Rich Text value in two at the given `startIndex` and `endIndex`, or
@@ -76,9 +74,5 @@ function splitAtSelection(
 		end: 0,
 	};
 
-	return [
-		// Ensure newlines are trimmed.
-		replace( before, /\u2028+$/, '' ),
-		replace( after, /^\u2028+/, '' ),
-	];
+	return [ before, after ];
 }
diff --git a/packages/rich-text/src/store/actions.js b/packages/rich-text/src/store/actions.js
index b8abea4d0aa29b..4fa522f5ec6e3c 100644
--- a/packages/rich-text/src/store/actions.js
+++ b/packages/rich-text/src/store/actions.js
@@ -1,6 +1,9 @@
 /**
  * Returns an action object used in signalling that format types have been
  * added.
+ * Ignored from documentation as registerFormatType should be used instead from @wordpress/rich-text
+ *
+ * @ignore
  *
  * @param {Array|Object} formatTypes Format types received.
  *
@@ -18,6 +21,10 @@ export function addFormatTypes( formatTypes ) {
 /**
  * Returns an action object used to remove a registered format type.
  *
+ * Ignored from documentation as unregisterFormatType should be used instead from @wordpress/rich-text
+ *
+ * @ignore
+ *
  * @param {string|Array} names Format name.
  *
  * @return {Object} Action object.
diff --git a/packages/rich-text/src/store/selectors.js b/packages/rich-text/src/store/selectors.js
index 32a50cf89020d2..df87c6a99211a2 100644
--- a/packages/rich-text/src/store/selectors.js
+++ b/packages/rich-text/src/store/selectors.js
@@ -1,13 +1,39 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import createSelector from 'rememo';
+import { createSelector } from '@wordpress/data';
 
 /**
  * Returns all the available format types.
  *
  * @param {Object} state Data state.
  *
+ * @example
+ * ```js
+ * import { __, sprintf } from '@wordpress/i18n';
+ * import { store as richTextStore } from '@wordpress/rich-text';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { getFormatTypes } = useSelect(
+ *        ( select ) => select( richTextStore ),
+ *        []
+ *    );
+ *
+ *    const availableFormats = getFormatTypes();
+ *
+ *    return availableFormats ? (
+ *        <ul>
+ *            { availableFormats?.map( ( format ) => (
+ *                <li>{ format.name }</li>
+ *           ) ) }
+ *        </ul>
+ *    ) : (
+ *        __( 'No Formats available' )
+ *    );
+ * };
+ * ```
+ *
  * @return {Array} Format types.
  */
 export const getFormatTypes = createSelector(
@@ -21,6 +47,34 @@ export const getFormatTypes = createSelector(
  * @param {Object} state Data state.
  * @param {string} name  Format type name.
  *
+ * @example
+ * ```js
+ * import { __, sprintf } from '@wordpress/i18n';
+ * import { store as richTextStore } from '@wordpress/rich-text';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { getFormatType } = useSelect(
+ *        ( select ) => select( richTextStore ),
+ *        []
+ *    );
+ *
+ *    const boldFormat = getFormatType( 'core/bold' );
+ *
+ *    return boldFormat ? (
+ *        <ul>
+ *            { Object.entries( boldFormat )?.map( ( [ key, value ] ) => (
+ *                <li>
+ *                    { key } : { value }
+ *                </li>
+ *           ) ) }
+ *       </ul>
+ *    ) : (
+ *        __( 'Not Found' )
+ *    ;
+ * };
+ * ```
+ *
  * @return {Object?} Format type.
  */
 export function getFormatType( state, name ) {
@@ -34,12 +88,37 @@ export function getFormatType( state, name ) {
  * @param {Object} state              Data state.
  * @param {string} bareElementTagName The tag name of the element to find a
  *                                    format type for.
+ *
+ * @example
+ * ```js
+ * import { __, sprintf } from '@wordpress/i18n';
+ * import { store as richTextStore } from '@wordpress/rich-text';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { getFormatTypeForBareElement } = useSelect(
+ *        ( select ) => select( richTextStore ),
+ *        []
+ *    );
+ *
+ *    const format = getFormatTypeForBareElement( 'strong' );
+ *
+ *    return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
+ * }
+ * ```
+ *
  * @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;
+		} )
+	);
 }
 
 /**
@@ -48,6 +127,25 @@ export function getFormatTypeForBareElement( state, bareElementTagName ) {
  * @param {Object} state            Data state.
  * @param {string} elementClassName The classes of the element to find a format
  *                                  type for.
+ *
+ * @example
+ * ```js
+ * import { __, sprintf } from '@wordpress/i18n';
+ * import { store as richTextStore } from '@wordpress/rich-text';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ *    const { getFormatTypeForClassName } = useSelect(
+ *        ( select ) => select( richTextStore ),
+ *        []
+ *    );
+ *
+ *    const format = getFormatTypeForClassName( 'has-inline-color' );
+ *
+ *    return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
+ * };
+ * ```
+ *
  * @return {?Object} Format type.
  */
 export function getFormatTypeForClassName( state, elementClassName ) {
diff --git a/packages/rich-text/src/test/__snapshots__/index.native.js.snap b/packages/rich-text/src/test/__snapshots__/index.native.js.snap
deleted file mode 100644
index 92e73606aea8fa..00000000000000
--- a/packages/rich-text/src/test/__snapshots__/index.native.js.snap
+++ /dev/null
@@ -1,79 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RichText/> Font Size renders component with style and font size 1`] = `
-"<!-- wp:paragraph {\\"style\\":{\\"color\\":{\\"text\\":\\"#fcb900\\"},\\"typography\\":{\\"fontSize\\":35.56}}} -->
-<p class=\\"has-text-color\\" style=\\"color:#fcb900;font-size:35.56px\\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
-<View
-  style={
-    Array [
-      undefined,
-      undefined,
-    ]
-  }
->
-  <TextInput
-    accessibilityLabel="Text input. Empty"
-    activeFormats={Array []}
-    blockType={
-      Object {
-        "tag": "div",
-      }
-    }
-    disableEditingMenu={false}
-    fontFamily="serif"
-    fontSize={12}
-    isMultiline={false}
-    maxImagesWidth={200}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onContentSizeChange={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onPaste={[Function]}
-    onSelectionChange={[Function]}
-    placeholderTextColor="gray"
-    triggerKeyCodes={Array []}
-    value=""
-  />
-</View>
-`;
-
-exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
-<View
-  style={
-    Array [
-      undefined,
-      undefined,
-    ]
-  }
->
-  <TextInput
-    accessibilityLabel="Text input. Empty"
-    activeFormats={Array []}
-    blockType={
-      Object {
-        "tag": "div",
-      }
-    }
-    disableEditingMenu={false}
-    fontFamily="serif"
-    fontSize={13}
-    isMultiline={false}
-    maxImagesWidth={200}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onContentSizeChange={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onPaste={[Function]}
-    onSelectionChange={[Function]}
-    placeholderTextColor="gray"
-    triggerKeyCodes={Array []}
-    value=""
-  />
-</View>
-`;
diff --git a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
index 756d06885ea14d..0e2ac57bea3704 100644
--- a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
+++ b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
@@ -61,9 +61,7 @@ exports[`recordToDom should create a value with image object and formatting 1`]
 
 exports[`recordToDom should create a value with image object and text after 1`] = `
 <body>
-  <em
-    data-rich-text-format-boundary="true"
-  >
+  <em>
     
     <img
       src=""
@@ -203,114 +201,6 @@ exports[`recordToDom should handle double br 1`] = `
 </body>
 `;
 
-exports[`recordToDom should handle empty list value 1`] = `
-<body>
-  <li>
-    
-    
-  </li>
-</body>
-`;
-
-exports[`recordToDom should handle empty multiline value 1`] = `
-<body>
-  <p>
-    
-    
-  </p>
-</body>
-`;
-
-exports[`recordToDom should handle middle empty list value 1`] = `
-<body>
-  <li>
-    
-    
-  </li>
-  <li>
-    
-    
-  </li>
-  <li>
-    
-    
-  </li>
-</body>
-`;
-
-exports[`recordToDom should handle multiline list value 1`] = `
-<body>
-  <li>
-    one
-    <ul>
-      <li>
-        a
-      </li>
-      <li>
-        b
-        <ol>
-          <li>
-            1
-          </li>
-          <li>
-            2
-          </li>
-        </ol>
-      </li>
-    </ul>
-  </li>
-  <li>
-    three
-  </li>
-</body>
-`;
-
-exports[`recordToDom should handle multiline value 1`] = `
-<body>
-  <p>
-    one
-  </p>
-  <p>
-    two
-  </p>
-</body>
-`;
-
-exports[`recordToDom should handle multiline value with element selection 1`] = `
-<body>
-  <li>
-    one
-  </li>
-</body>
-`;
-
-exports[`recordToDom should handle multiline value with empty 1`] = `
-<body>
-  <p>
-    one
-  </p>
-  <p>
-    
-    
-  </p>
-</body>
-`;
-
-exports[`recordToDom should handle nested empty list value 1`] = `
-<body>
-  <li>
-    
-    
-    <ul>
-      <li>
-        
-        
-      </li>
-    </ul>
-  </li>
-</body>
-`;
-
 exports[`recordToDom should handle selection before br 1`] = `
 <body>
   a
@@ -325,22 +215,6 @@ exports[`recordToDom should handle selection before br 1`] = `
 </body>
 `;
 
-exports[`recordToDom should ignore formats at line separator 1`] = `
-<body>
-  <p>
-    <em>
-      one
-    </em>
-  </p>
-  <p>
-    <em>
-      two
-    </em>
-    
-  </p>
-</body>
-`;
-
 exports[`recordToDom should ignore manually added object replacement character 1`] = `
 <body>
   test
@@ -398,6 +272,21 @@ exports[`recordToDom should not error with overlapping formats (2) 1`] = `
 </body>
 `;
 
+exports[`recordToDom should preserve comments 1`] = `
+<body>
+  
+  <span
+    contenteditable="false"
+    data-rich-text-comment="comment"
+  >
+    <span>
+      comment
+    </span>
+  </span>
+  
+</body>
+`;
+
 exports[`recordToDom should preserve emoji 1`] = `
 <body>
   🍒
@@ -415,6 +304,21 @@ exports[`recordToDom should preserve emoji in formatting 1`] = `
 </body>
 `;
 
+exports[`recordToDom should preserve funky comments 1`] = `
+<body>
+  
+  <span
+    contenteditable="false"
+    data-rich-text-comment="/funky"
+  >
+    <span>
+      /funky
+    </span>
+  </span>
+  
+</body>
+`;
+
 exports[`recordToDom should preserve non breaking space 1`] = `
 <body>
   test  test
@@ -427,9 +331,3 @@ exports[`recordToDom should remove padding 1`] = `
   
 </body>
 `;
-
-exports[`recordToDom should replace characters to format HTML with space 1`] = `
-<body>
-   
-</body>
-`;
diff --git a/packages/rich-text/src/test/create.js b/packages/rich-text/src/test/create.js
index cbe2d1e3985dde..212496c8cf6b8c 100644
--- a/packages/rich-text/src/test/create.js
+++ b/packages/rich-text/src/test/create.js
@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-
-import { JSDOM } from 'jsdom';
-
 /**
  * Internal dependencies
  */
@@ -14,9 +8,6 @@ import { registerFormatType } from '../register-format-type';
 import { unregisterFormatType } from '../unregister-format-type';
 import { getSparseArrayLength, spec, specWithRegistration } from './helpers';
 
-const { window } = new JSDOM();
-const { document } = window;
-
 describe( 'create', () => {
 	const em = { type: 'em' };
 	const strong = { type: 'strong' };
@@ -26,39 +17,28 @@ describe( 'create', () => {
 		require( '../store' );
 	} );
 
-	spec.forEach(
-		( {
-			description,
-			multilineTag,
-			multilineWrapperTags,
-			html,
-			createRange,
-			record,
-		} ) => {
-			if ( html === undefined ) {
-				return;
-			}
+	spec.forEach( ( { description, html, createRange, record } ) => {
+		if ( html === undefined ) {
+			return;
+		}
 
-			// eslint-disable-next-line jest/valid-title
-			it( description, () => {
-				const element = createElement( document, html );
-				const range = createRange( element );
-				const createdRecord = create( {
-					element,
-					range,
-					multilineTag,
-					multilineWrapperTags,
-				} );
-				const formatsLength = getSparseArrayLength( record.formats );
-				const createdFormatsLength = getSparseArrayLength(
-					createdRecord.formats
-				);
-
-				expect( createdRecord ).toEqual( record );
-				expect( createdFormatsLength ).toEqual( formatsLength );
+		// eslint-disable-next-line jest/valid-title
+		it( description, () => {
+			const element = createElement( document, html );
+			const range = createRange( element );
+			const createdRecord = create( {
+				element,
+				range,
 			} );
-		}
-	);
+			const formatsLength = getSparseArrayLength( record.formats );
+			const createdFormatsLength = getSparseArrayLength(
+				createdRecord.formats
+			);
+
+			expect( createdRecord ).toEqual( record );
+			expect( createdFormatsLength ).toEqual( formatsLength );
+		} );
+	} );
 
 	specWithRegistration.forEach(
 		( {
diff --git a/packages/rich-text/src/test/get-active-format.js b/packages/rich-text/src/test/get-active-format.js
index eba352783c39ab..6ba279c7df2439 100644
--- a/packages/rich-text/src/test/get-active-format.js
+++ b/packages/rich-text/src/test/get-active-format.js
@@ -17,17 +17,28 @@ describe( 'getActiveFormat', () => {
 		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
 	} );
 
-	it( 'should return format at first character for uncollapsed selection', () => {
+	it( 'should return format when active over whole selection', () => {
 		const record = {
 			formats: [ [ em ], [ strong ], , ],
 			text: 'one',
 			start: 0,
-			end: 2,
+			end: 1,
 		};
 
 		expect( getActiveFormat( record, 'em' ) ).toBe( em );
 	} );
 
+	it( 'should return not return format when not active over whole selection', () => {
+		const record = {
+			formats: [ [ em ], [ strong ], , ],
+			text: 'one',
+			start: 0,
+			end: 2,
+		};
+
+		expect( getActiveFormat( record, 'em' ) ).toBe( undefined );
+	} );
+
 	it( 'should return undefined if at the boundary before', () => {
 		const record = {
 			formats: [ [ em ], , [ em ] ],
diff --git a/packages/rich-text/src/test/helpers/index.js b/packages/rich-text/src/test/helpers/index.js
index 96090ea64b51a4..7658ede7e37737 100644
--- a/packages/rich-text/src/test/helpers/index.js
+++ b/packages/rich-text/src/test/helpers/index.js
@@ -11,8 +11,6 @@ const em = { type: 'em' };
 const strong = { type: 'strong' };
 const img = { type: 'img', attributes: { src: '' } };
 const a = { type: 'a', attributes: { href: '#' } };
-const ul = { type: 'ul' };
-const ol = { type: 'ol' };
 
 export const spec = [
 	{
@@ -74,25 +72,6 @@ export const spec = [
 			text: 'hi',
 		},
 	},
-	{
-		description: 'should replace characters to format HTML with space',
-		html: '\n\n\r\n\t',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element,
-			endOffset: 1,
-			endContainer: element,
-		} ),
-		startPath: [ 0, 0 ],
-		endPath: [ 0, 1 ],
-		record: {
-			start: 0,
-			end: 1,
-			formats: [ , ],
-			replacements: [ , ],
-			text: ' ',
-		},
-	},
 	{
 		description: 'should preserve non breaking space',
 		html: 'test\u00a0 test',
@@ -440,200 +419,6 @@ export const spec = [
 			end: 2,
 		},
 	},
-	{
-		description: 'should handle empty multiline value',
-		multilineTag: 'p',
-		html: '<p></p>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element.firstChild,
-			endOffset: 0,
-			endContainer: element.firstChild,
-		} ),
-		startPath: [ 0, 0, 0 ],
-		endPath: [ 0, 0, 0 ],
-		record: {
-			start: 0,
-			end: 0,
-			formats: [],
-			replacements: [],
-			text: '',
-		},
-	},
-	{
-		description: 'should handle multiline value',
-		multilineTag: 'p',
-		html: '<p>one</p><p>two</p>',
-		createRange: ( element ) => ( {
-			startOffset: 1,
-			startContainer: element.querySelector( 'p' ).firstChild,
-			endOffset: 0,
-			endContainer: element.lastChild,
-		} ),
-		startPath: [ 0, 0, 1 ],
-		endPath: [ 1, 0, 0 ],
-		record: {
-			start: 1,
-			end: 4,
-			formats: [ , , , , , , , ],
-			replacements: [ , , , , , , , ],
-			text: 'one\u2028two',
-		},
-	},
-	{
-		description: 'should handle multiline list value',
-		multilineTag: 'li',
-		multilineWrapperTags: [ 'ul', 'ol' ],
-		html: '<li>one<ul><li>a</li><li>b<ol><li>1</li><li>2</li></ol></li></ul></li><li>three</li>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element,
-			endOffset: 1,
-			endContainer: element.querySelector( 'ol > li' ).firstChild,
-		} ),
-		startPath: [ 0, 0, 0 ],
-		endPath: [ 0, 1, 1, 1, 0, 0, 1 ],
-		record: {
-			start: 0,
-			end: 9,
-			formats: [ , , , , , , , , , , , , , , , , , ],
-			replacements: [
-				,
-				,
-				,
-				[ ul ],
-				,
-				[ ul ],
-				,
-				[ ul, ol ],
-				,
-				[ ul, ol ],
-				,
-				,
-				,
-				,
-				,
-				,
-				,
-			],
-			text: 'one\u2028a\u2028b\u20281\u20282\u2028three',
-		},
-	},
-	{
-		description: 'should handle empty list value',
-		multilineTag: 'li',
-		multilineWrapperTags: [ 'ul', 'ol' ],
-		html: '<li></li>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element.firstChild,
-			endOffset: 0,
-			endContainer: element.firstChild,
-		} ),
-		startPath: [ 0, 0, 0 ],
-		endPath: [ 0, 0, 0 ],
-		record: {
-			start: 0,
-			end: 0,
-			formats: [],
-			replacements: [],
-			text: '',
-		},
-	},
-	{
-		description: 'should handle nested empty list value',
-		multilineTag: 'li',
-		multilineWrapperTags: [ 'ul', 'ol' ],
-		html: '<li><ul><li></li></ul></li>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element.querySelector( 'ul > li' ),
-			endOffset: 0,
-			endContainer: element.querySelector( 'ul > li' ),
-		} ),
-		startPath: [ 0, 2, 0, 0, 0 ],
-		endPath: [ 0, 2, 0, 0, 0 ],
-		record: {
-			start: 1,
-			end: 1,
-			formats: [ , ],
-			replacements: [ [ ul ] ],
-			text: '\u2028',
-		},
-	},
-	{
-		description: 'should handle middle empty list value',
-		multilineTag: 'li',
-		multilineWrapperTags: [ 'ul', 'ol' ],
-		html: '<li></li><li></li><li></li>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element.firstChild.nextSibling,
-			endOffset: 0,
-			endContainer: element.firstChild.nextSibling,
-		} ),
-		startPath: [ 1, 1, 1 ],
-		endPath: [ 1, 1, 1 ],
-		record: {
-			start: 1,
-			end: 1,
-			formats: [ , , ],
-			replacements: [ , , ],
-			text: '\u2028\u2028',
-		},
-	},
-	{
-		description: 'should handle multiline value with empty',
-		multilineTag: 'p',
-		html: '<p>one</p><p></p>',
-		createRange: ( element ) => ( {
-			startOffset: 0,
-			startContainer: element.lastChild,
-			endOffset: 0,
-			endContainer: element.lastChild,
-		} ),
-		startPath: [ 1, 0, 0 ],
-		endPath: [ 1, 0, 0 ],
-		record: {
-			start: 4,
-			end: 4,
-			formats: [ , , , , ],
-			replacements: [ , , , , ],
-			text: 'one\u2028',
-		},
-	},
-	{
-		description: 'should handle multiline value with element selection',
-		multilineTag: 'li',
-		multilineWrapperTags: [ 'ul', 'ol' ],
-		html: '<li>one</li>',
-		createRange: ( element ) => ( {
-			startOffset: 1,
-			startContainer: element.firstChild,
-			endOffset: 1,
-			endContainer: element.firstChild,
-		} ),
-		startPath: [ 0, 0, 3 ],
-		endPath: [ 0, 0, 3 ],
-		record: {
-			start: 3,
-			end: 3,
-			formats: [ , , , ],
-			replacements: [ , , , ],
-			text: 'one',
-		},
-	},
-	{
-		description: 'should ignore formats at line separator',
-		multilineTag: 'p',
-		startPath: [],
-		endPath: [],
-		record: {
-			formats: [ [ em ], [ em ], [ em ], [ em ], [ em ], [ em ], [ em ] ],
-			replacements: [ , , , , , , , ],
-			text: 'one\u2028two',
-		},
-	},
 	{
 		description: 'should remove padding',
 		html: ZWNBSP,
@@ -766,6 +551,58 @@ export const spec = [
 			text: '\ufffc',
 		},
 	},
+	{
+		description: 'should preserve comments',
+		html: '<!--comment-->',
+		createRange: ( element ) => ( {
+			startOffset: 0,
+			startContainer: element,
+			endOffset: 1,
+			endContainer: element,
+		} ),
+		startPath: [ 0, 0 ],
+		endPath: [ 2, 0 ],
+		record: {
+			start: 0,
+			end: 1,
+			formats: [ , ],
+			replacements: [
+				{
+					attributes: {
+						'data-rich-text-comment': 'comment',
+					},
+					type: '#comment',
+				},
+			],
+			text: '\ufffc',
+		},
+	},
+	{
+		description: 'should preserve funky comments',
+		html: '<//funky>',
+		createRange: ( element ) => ( {
+			startOffset: 0,
+			startContainer: element,
+			endOffset: 1,
+			endContainer: element,
+		} ),
+		startPath: [ 0, 0 ],
+		endPath: [ 2, 0 ],
+		record: {
+			start: 0,
+			end: 1,
+			formats: [ , ],
+			replacements: [
+				{
+					attributes: {
+						'data-rich-text-comment': '/funky',
+					},
+					type: '#comment',
+				},
+			],
+			text: '\ufffc',
+		},
+	},
 ];
 
 export const specWithRegistration = [
@@ -784,6 +621,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {},
 					},
@@ -808,6 +646,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {
 							class: 'test',
@@ -834,6 +673,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'core/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {
 							class: 'custom-format',
@@ -899,6 +739,7 @@ export const specWithRegistration = [
 				[
 					{
 						type: 'my-plugin/link',
+						tagName: 'a',
 						attributes: {},
 						unregisteredAttributes: {},
 					},
@@ -908,4 +749,29 @@ export const specWithRegistration = [
 			text: 'a',
 		},
 	},
+	{
+		description: 'should be non editable',
+		formatName: 'my-plugin/non-editable',
+		formatType: {
+			title: 'Non Editable',
+			tagName: 'a',
+			className: 'non-editable',
+			contentEditable: false,
+			edit() {},
+		},
+		html: '<a class="non-editable">a</a>',
+		value: {
+			formats: [ , ],
+			replacements: [
+				{
+					type: 'my-plugin/non-editable',
+					tagName: 'a',
+					attributes: {},
+					unregisteredAttributes: {},
+					innerHTML: 'a',
+				},
+			],
+			text: OBJECT_REPLACEMENT_CHARACTER,
+		},
+	},
 ];
diff --git a/packages/rich-text/src/test/index.native.js b/packages/rich-text/src/test/index.native.js
deleted file mode 100644
index 3f963fba32dc06..00000000000000
--- a/packages/rich-text/src/test/index.native.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * External dependencies
- */
-import { Dimensions } from 'react-native';
-import { getEditorHtml, render, initializeEditor } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { select } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { coreBlocks } from '@wordpress/block-library';
-import {
-	getBlockTypes,
-	setDefaultBlockName,
-	unregisterBlockType,
-} from '@wordpress/blocks';
-import '@wordpress/jest-console';
-
-/**
- * Internal dependencies
- */
-import { store as richTextStore } from '../store';
-import RichText from '../component/index.native';
-
-/**
- * Mock `useSelect` with various global application settings, e.g., styles.
- *
- * @param {Object} settings the global application settings you would like to mock.
- */
-const mockGlobalSettings = (
-	settings = { fontSize: 'var(--wp--preset--font-size--normal)' }
-) => {
-	const { fontSize } = settings;
-	const DEFAULT_GLOBAL_STYLES = {
-		__experimentalGlobalStylesBaseStyles: { typography: { fontSize } },
-	};
-	jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
-		DEFAULT_GLOBAL_STYLES
-	);
-	jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
-		[]
-	);
-};
-
-describe( '<RichText/>', () => {
-	/**
-	 * Capture initial `window` dimensions before our integration tests modify them to stage runtime fixtures.
-	 * Reset to the initial `window` dimensions after each test is executed in case they were modified.
-	 */
-	const window = Dimensions.get( 'window' );
-
-	const decimalUnitsData = [
-		[ '1.125rem', 18 ],
-		[ '10.52px', 11 ],
-		[ '2.3136em', 37 ],
-		[ '1.42vh', 19 ],
-	];
-
-	beforeAll( () => {
-		// Register Paragraph block.
-		const paragraph = coreBlocks[ 'core/paragraph' ];
-		paragraph.init();
-		setDefaultBlockName( paragraph.name );
-	} );
-
-	beforeEach( () => {
-		mockGlobalSettings( {} );
-	} );
-
-	afterEach( () => {
-		Dimensions.set( { window } );
-	} );
-
-	afterAll( () => {
-		// Clean up registered blocks.
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
-	} );
-
-	describe( 'Font Size', () => {
-		it( 'should display rich text at the DEFAULT font size.', () => {
-			// Arrange.
-			const expectedFontSize = 16;
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `fontSize` CSS.', () => {
-			// Arrange.
-			const expectedFontSize = 32;
-			// Act.
-			const { getByLabelText } = render(
-				<RichText
-					accessibilityLabel={ 'editor' }
-					fontSize={ 'min(2em, 3em)' }
-				/>
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( 'should display rich text at the PROVIDED font size computed from the LOCAL `style.fontSize` CSS.', () => {
-			// Arrange.
-			const expectedFontSize = 32;
-			// Act.
-			const { getByLabelText } = render(
-				<RichText
-					accessibilityLabel={ 'editor' }
-					style={ { fontSize: 'min(2em, 3em)' } }
-				/>
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( `should display rich text with the default editor font size value and not use the
-		\`default font size value from the global styles for a tag different than (p)`, () => {
-			// Arrange.
-			const defaultFontSize = 16;
-			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="div" />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( defaultFontSize );
-		} );
-
-		it( `should display rich text at the PROVIDED font size computed from the selected GLOBAL
-		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS.`, () => {
-			// Arrange.
-			const expectedFontSize = 32;
-			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } tagName="p" />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		test.each( decimalUnitsData )(
-			`should display rich text at the PROVIDED font size computed from the selected GLOBAL
-		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS with decimal value: %s`,
-			( unit, expected ) => {
-				// Arrange.
-				mockGlobalSettings( { fontSize: unit } );
-				// Act.
-				const { getByLabelText } = render(
-					<RichText accessibilityLabel={ 'editor' } tagName="p" />
-				);
-				// Assert.
-				const actualFontSize =
-					getByLabelText( 'editor' ).props.fontSize;
-				expect( actualFontSize ).toBe( expected );
-			}
-		);
-
-		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
-		when CSS is provided ambiguously from ALL possible sources.`, () => {
-			// Arrange.
-			const expectedFontSize = 1;
-			mockGlobalSettings( { fontSize: '0' } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText
-					accessibilityLabel={ 'editor' }
-					style={ { fontSize: '1' } }
-					fontSize={ '2' }
-					tagName="p"
-				/>
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with
-		NEXT PRIORITY when CSS is provided ambiguously from MULTIPLE possible sources EXCLUDING \`fontSize\`.`, () => {
-			// Arrange.
-			const expectedFontSize = 1;
-			mockGlobalSettings( { fontSize: '0' } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText
-					accessibilityLabel={ 'editor' }
-					style={ { fontSize: '1' } }
-					tagName="p"
-				/>
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT WIDTH.', () => {
-			// Arrange.
-			const expectedFontSize = 3;
-			Dimensions.set( { window: { ...window, width: 300 } } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vw' } />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( 'should display rich text at the font size computed from CSS relative to the VIEWPORT HEIGHT.', () => {
-			// Arrange.
-			const expectedFontSize = 3;
-			Dimensions.set( { window: { ...window, height: 300 } } );
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } fontSize={ '1vh' } />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.fontSize;
-			expect( actualFontSize ).toBe( expectedFontSize );
-		} );
-
-		it( 'should update the font size when style prop with font size property is provided', () => {
-			// Arrange.
-			const fontSize = '10';
-			const style = { fontSize: '12' };
-			// Act.
-			const screen = render( <RichText fontSize={ fontSize } /> );
-			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
-			// Assert.
-			expect( screen.toJSON() ).toMatchSnapshot();
-		} );
-
-		it( 'renders component with style and font size', async () => {
-			// Arrange.
-			const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
-					<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
-					<!-- /wp:paragraph -->`;
-			// Act.
-			await initializeEditor( { initialHtml } );
-			// Assert.
-			expect( getEditorHtml() ).toMatchSnapshot();
-		} );
-
-		it( 'should update the font size with decimals when style prop with font size property is provided', () => {
-			// Arrange.
-			const fontSize = '10';
-			const style = { fontSize: '12.56px' };
-			// Act.
-			const screen = render( <RichText fontSize={ fontSize } /> );
-			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
-			// Assert.
-			expect( screen.toJSON() ).toMatchSnapshot();
-		} );
-
-		it( 'should set the default minimum line height value if the provided value from the styles is lower', () => {
-			// Arrange.
-			const expectedLineHeight = 1;
-			const style = { lineHeight: 0.2 };
-			// Act.
-			const { getByLabelText } = render(
-				<RichText accessibilityLabel={ 'editor' } style={ style } />
-			);
-			// Assert.
-			const actualFontSize = getByLabelText( 'editor' ).props.lineHeight;
-			expect( actualFontSize ).toBe( expectedLineHeight );
-		} );
-	} );
-} );
diff --git a/packages/rich-text/src/test/insert-line-separator.js b/packages/rich-text/src/test/insert-line-separator.js
deleted file mode 100644
index 497555cc4a01a0..00000000000000
--- a/packages/rich-text/src/test/insert-line-separator.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * External dependencies
- */
-import deepFreeze from 'deep-freeze';
-
-/**
- * Internal dependencies
- */
-
-import { insertLineSeparator } from '../insert-line-separator';
-import { LINE_SEPARATOR } from '../special-characters';
-import { getSparseArrayLength } from './helpers';
-
-describe( 'insertLineSeparator', () => {
-	const ol = { type: 'ol' };
-
-	it( 'should insert line separator at end', () => {
-		const value = {
-			formats: [ , ],
-			replacements: [ , ],
-			text: '1',
-			start: 1,
-			end: 1,
-		};
-		const expected = {
-			formats: [ , , ],
-			replacements: [ , , ],
-			text: `1${ LINE_SEPARATOR }`,
-			start: 2,
-			end: 2,
-		};
-		const result = insertLineSeparator( deepFreeze( value ) );
-
-		expect( result ).not.toBe( value );
-		expect( result ).toEqual( expected );
-		expect( getSparseArrayLength( result.replacements ) ).toBe( 0 );
-	} );
-
-	it( 'should insert line separator at start', () => {
-		const value = {
-			formats: [ , ],
-			replacements: [ , ],
-			text: '1',
-			start: 0,
-			end: 0,
-		};
-		const expected = {
-			formats: [ , , ],
-			replacements: [ , , ],
-			text: `${ LINE_SEPARATOR }1`,
-			start: 1,
-			end: 1,
-		};
-		const result = insertLineSeparator( deepFreeze( value ) );
-
-		expect( result ).not.toBe( value );
-		expect( result ).toEqual( expected );
-		expect( getSparseArrayLength( result.replacements ) ).toBe( 0 );
-	} );
-
-	it( 'should insert line separator with previous line separator formats', () => {
-		const value = {
-			formats: [ , , , , , ],
-			replacements: [ , , , [ ol ], , ],
-			text: `1${ LINE_SEPARATOR }2${ LINE_SEPARATOR }a`,
-			start: 5,
-			end: 5,
-		};
-		const expected = {
-			formats: [ , , , , , , ],
-			replacements: [ , , , [ ol ], , [ ol ] ],
-			text: `1${ LINE_SEPARATOR }2${ LINE_SEPARATOR }a${ LINE_SEPARATOR }`,
-			start: 6,
-			end: 6,
-		};
-		const result = insertLineSeparator( deepFreeze( value ) );
-
-		expect( result ).not.toBe( value );
-		expect( result ).toEqual( expected );
-		expect( getSparseArrayLength( result.replacements ) ).toBe( 2 );
-	} );
-
-	it( 'should insert line separator without formats if previous line separator did not have any', () => {
-		const value = {
-			formats: [ , , , , , ],
-			replacements: [ , , , , , ],
-			text: `1${ LINE_SEPARATOR }2${ LINE_SEPARATOR }a`,
-			start: 5,
-			end: 5,
-		};
-		const expected = {
-			formats: [ , , , , , , ],
-			replacements: [ , , , , , , ],
-			text: `1${ LINE_SEPARATOR }2${ LINE_SEPARATOR }a${ LINE_SEPARATOR }`,
-			start: 6,
-			end: 6,
-		};
-		const result = insertLineSeparator( deepFreeze( value ) );
-
-		expect( result ).not.toBe( value );
-		expect( result ).toEqual( expected );
-		expect( getSparseArrayLength( result.replacements ) ).toBe( 0 );
-	} );
-} );
diff --git a/packages/rich-text/src/test/is-empty.js b/packages/rich-text/src/test/is-empty.js
index 0080ba3a0914fb..6cd1d0b6d08275 100644
--- a/packages/rich-text/src/test/is-empty.js
+++ b/packages/rich-text/src/test/is-empty.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 
-import { isEmpty, isEmptyLine } from '../is-empty';
+import { isEmpty } from '../is-empty';
 
 describe( 'isEmpty', () => {
 	it( 'should return true', () => {
@@ -23,62 +23,3 @@ describe( 'isEmpty', () => {
 		expect( isEmpty( one ) ).toBe( false );
 	} );
 } );
-
-describe( 'isEmptyLine', () => {
-	it( 'should return true', () => {
-		const one = {
-			formats: [],
-			text: '',
-			start: 0,
-			end: 0,
-		};
-		const two = {
-			formats: [ , , ],
-			text: '\u2028',
-			start: 0,
-			end: 0,
-		};
-		const three = {
-			formats: [ , , ],
-			text: '\u2028',
-			start: 1,
-			end: 1,
-		};
-		const four = {
-			formats: [ , , , , ],
-			text: '\u2028\u2028',
-			start: 1,
-			end: 1,
-		};
-		const five = {
-			formats: [ , , , , ],
-			text: 'a\u2028\u2028b',
-			start: 2,
-			end: 2,
-		};
-
-		expect( isEmptyLine( one ) ).toBe( true );
-		expect( isEmptyLine( two ) ).toBe( true );
-		expect( isEmptyLine( three ) ).toBe( true );
-		expect( isEmptyLine( four ) ).toBe( true );
-		expect( isEmptyLine( five ) ).toBe( true );
-	} );
-
-	it( 'should return false', () => {
-		const one = {
-			formats: [ , , , , ],
-			text: '\u2028a\u2028',
-			start: 1,
-			end: 1,
-		};
-		const two = {
-			formats: [ , , , , ],
-			text: '\u2028\n',
-			start: 1,
-			end: 1,
-		};
-
-		expect( isEmptyLine( one ) ).toBe( false );
-		expect( isEmptyLine( two ) ).toBe( false );
-	} );
-} );
diff --git a/packages/rich-text/src/test/register-format-type.js b/packages/rich-text/src/test/register-format-type.js
index 0d044d28facfae..a586e47945dd08 100644
--- a/packages/rich-text/src/test/register-format-type.js
+++ b/packages/rich-text/src/test/register-format-type.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { select } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -11,10 +11,21 @@ import { unregisterFormatType } from '../unregister-format-type';
 import { getFormatType } from '../get-format-type';
 import { store as richTextStore } from '../store';
 
+const UNKNOWN_FORMAT = {
+	name: 'core/unknown',
+	title: 'Clear Unknown Formatting',
+	tagName: '*',
+	className: null,
+	edit: () => null,
+};
+
 describe( 'registerFormatType', () => {
 	beforeAll( () => {
 		// Initialize the rich-text store.
 		require( '../store' );
+
+		// Register "core/unknown" format
+		dispatch( richTextStore ).addFormatTypes( UNKNOWN_FORMAT );
 	} );
 
 	afterEach( () => {
@@ -160,7 +171,7 @@ describe( 'registerFormatType', () => {
 			className: 'invalid class name',
 		} );
 		expect( console ).toHaveErroredWith(
-			'A class name must begin with a letter, followed by any number of hyphens, letters, or numbers.'
+			'A class name must begin with a letter, followed by any number of hyphens, underscores, letters, or numbers.'
 		);
 		expect( format ).toBeUndefined();
 	} );
diff --git a/packages/rich-text/src/test/split.js b/packages/rich-text/src/test/split.js
index 7de61c1b3efeb8..05a76889ee6864 100644
--- a/packages/rich-text/src/test/split.js
+++ b/packages/rich-text/src/test/split.js
@@ -112,39 +112,6 @@ describe( 'split', () => {
 		} );
 	} );
 
-	it( 'should split multiline', () => {
-		const record = {
-			formats: [ , , , , , , , , , , ],
-			replacements: [ , , , , , , , , , , ],
-			text: 'test\u2028\u2028test',
-			start: 5,
-			end: 5,
-		};
-		const expected = [
-			{
-				formats: [ , , , , ],
-				replacements: [ , , , , ],
-				text: 'test',
-			},
-			{
-				formats: [ , , , , ],
-				replacements: [ , , , , ],
-				text: 'test',
-				start: 0,
-				end: 0,
-			},
-		];
-		const result = split( deepFreeze( record ) );
-
-		expect( result ).toEqual( expected );
-		result.forEach( ( item, index ) => {
-			expect( item ).not.toBe( record );
-			expect( getSparseArrayLength( item.formats ) ).toBe(
-				getSparseArrayLength( expected[ index ].formats )
-			);
-		} );
-	} );
-
 	it( 'should split search', () => {
 		const record = {
 			start: 6,
diff --git a/packages/rich-text/src/test/to-dom.js b/packages/rich-text/src/test/to-dom.js
index 1d318fca88512f..4f9b2df86cad35 100644
--- a/packages/rich-text/src/test/to-dom.js
+++ b/packages/rich-text/src/test/to-dom.js
@@ -1,39 +1,26 @@
-/**
- * External dependencies
- */
-
-import { JSDOM } from 'jsdom';
-
 /**
  * Internal dependencies
  */
-
 import { toDom, applyValue } from '../to-dom';
 import { createElement } from '../create-element';
 import { spec } from './helpers';
 
-const { window } = new JSDOM();
-const { document } = window;
-
 describe( 'recordToDom', () => {
 	beforeAll( () => {
 		// Initialize the rich-text store.
 		require( '../store' );
 	} );
 
-	spec.forEach(
-		( { description, multilineTag, record, startPath, endPath } ) => {
-			// eslint-disable-next-line jest/valid-title
-			it( description, () => {
-				const { body, selection } = toDom( {
-					value: record,
-					multilineTag,
-				} );
-				expect( body ).toMatchSnapshot();
-				expect( selection ).toEqual( { startPath, endPath } );
+	spec.forEach( ( { description, record, startPath, endPath } ) => {
+		// eslint-disable-next-line jest/valid-title
+		it( description, () => {
+			const { body, selection } = toDom( {
+				value: record,
 			} );
-		}
-	);
+			expect( body ).toMatchSnapshot();
+			expect( selection ).toEqual( { startPath, endPath } );
+		} );
+	} );
 } );
 
 describe( 'applyValue', () => {
diff --git a/packages/rich-text/src/test/to-html-string.js b/packages/rich-text/src/test/to-html-string.js
index 251a29704f700e..32360e6805d69f 100644
--- a/packages/rich-text/src/test/to-html-string.js
+++ b/packages/rich-text/src/test/to-html-string.js
@@ -1,22 +1,12 @@
-/**
- * External dependencies
- */
-
-import { JSDOM } from 'jsdom';
-
 /**
  * Internal dependencies
  */
-
 import { create } from '../create';
 import { toHTMLString } from '../to-html-string';
 import { registerFormatType } from '../register-format-type';
 import { unregisterFormatType } from '../unregister-format-type';
 import { specWithRegistration } from './helpers';
 
-const { window } = new JSDOM();
-const { document } = window;
-
 function createNode( HTML ) {
 	const doc = document.implementation.createHTMLDocument( '' );
 	doc.body.innerHTML = HTML;
@@ -107,21 +97,6 @@ describe( 'toHTMLString', () => {
 		);
 	} );
 
-	it( 'should extract recreate HTML 6', () => {
-		const HTML = '<li>one<ul><li>two</li></ul></li><li>three</li>';
-		const element = createNode( `<ul>${ HTML }</ul>` );
-		const multilineTag = 'li';
-		const multilineWrapperTags = [ 'ul', 'ol' ];
-		const value = create( { element, multilineTag, multilineWrapperTags } );
-		const result = toHTMLString( {
-			value,
-			multilineTag,
-			multilineWrapperTags,
-		} );
-
-		expect( result ).toEqual( HTML );
-	} );
-
 	it( 'should serialize neighbouring formats of same type', () => {
 		const HTML = '<a href="a">a</a><a href="b">a</a>';
 		const element = createNode( `<p>${ HTML }</p>` );
diff --git a/packages/rich-text/src/test/toggle-format.js b/packages/rich-text/src/test/toggle-format.js
index 6a71412c413fb2..95f03947fa667d 100644
--- a/packages/rich-text/src/test/toggle-format.js
+++ b/packages/rich-text/src/test/toggle-format.js
@@ -14,15 +14,18 @@ describe( 'toggleFormat', () => {
 	const strong = { type: 'strong' };
 	const em = { type: 'em' };
 
-	it( 'should remove format if it exists at start of selection', () => {
+	it( 'should remove format if it is active', () => {
 		const record = {
 			formats: [
 				,
 				,
 				,
-				[ strong ],
+				// In reality, formats at a different index are never the same
+				// value. Only formats that create the same tag are the same
+				// value.
+				[ { type: 'strong' } ],
+				[ em, strong ],
 				[ em, strong ],
-				[ em ],
 				[ em ],
 				,
 				,
diff --git a/packages/rich-text/src/to-dom.js b/packages/rich-text/src/to-dom.js
index f540ad18d722f3..ac8308c7274b58 100644
--- a/packages/rich-text/src/to-dom.js
+++ b/packages/rich-text/src/to-dom.js
@@ -4,8 +4,9 @@
 
 import { toTree } from './to-tree';
 import { createElement } from './create-element';
+import { isRangeEqual } from './is-range-equal';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Creates a path as an array of indices from the given root node to the given
@@ -56,6 +57,10 @@ function getNodeByPath( node, path ) {
 }
 
 function append( element, child ) {
+	if ( child.html !== undefined ) {
+		return ( element.innerHTML += child.html );
+	}
+
 	if ( typeof child === 'string' ) {
 		child = element.ownerDocument.createTextNode( child );
 	}
@@ -63,10 +68,16 @@ function append( element, child ) {
 	const { type, attributes } = child;
 
 	if ( type ) {
-		child = element.ownerDocument.createElement( type );
+		if ( type === '#comment' ) {
+			child = element.ownerDocument.createComment(
+				attributes[ 'data-rich-text-comment' ]
+			);
+		} else {
+			child = element.ownerDocument.createElement( type );
 
-		for ( const key in attributes ) {
-			child.setAttribute( key, attributes[ key ] );
+			for ( const key in attributes ) {
+				child.setAttribute( key, attributes[ key ] );
+			}
 		}
 	}
 
@@ -99,7 +110,6 @@ function remove( node ) {
 
 export function toDom( {
 	value,
-	multilineTag,
 	prepareEditableTree,
 	isEditableTree = true,
 	placeholder,
@@ -129,7 +139,6 @@ export function toDom( {
 
 	const tree = toTree( {
 		value,
-		multilineTag,
 		createEmpty,
 		append,
 		getLastChild,
@@ -160,13 +169,11 @@ export function toDom( {
 
 /**
  * Create an `Element` tree from a Rich Text value and applies the difference to
- * the `Element` tree contained by `current`. If a `multilineTag` is provided,
- * text separated by two new lines will be wrapped in an `Element` of that type.
+ * the `Element` tree contained by `current`.
  *
  * @param {Object}        $1                       Named arguments.
  * @param {RichTextValue} $1.value                 Value to apply.
  * @param {HTMLElement}   $1.current               The live root node to apply the element tree to.
- * @param {string}        [$1.multilineTag]        Multiline tag.
  * @param {Function}      [$1.prepareEditableTree] Function to filter editorable formats.
  * @param {boolean}       [$1.__unstableDomOnly]   Only apply elements, no selection.
  * @param {string}        [$1.placeholder]         Placeholder text.
@@ -174,7 +181,6 @@ export function toDom( {
 export function apply( {
 	value,
 	current,
-	multilineTag,
 	prepareEditableTree,
 	__unstableDomOnly,
 	placeholder,
@@ -182,7 +188,6 @@ export function apply( {
 	// Construct a new element tree in memory.
 	const { body, selection } = toDom( {
 		value,
-		multilineTag,
 		prepareEditableTree,
 		placeholder,
 		doc: current.ownerDocument,
@@ -254,25 +259,6 @@ export function applyValue( future, current ) {
 	}
 }
 
-/**
- * Returns true if two ranges are equal, or false otherwise. Ranges are
- * considered equal if their start and end occur in the same container and
- * offset.
- *
- * @param {Range} a First range object to test.
- * @param {Range} b First range object to test.
- *
- * @return {boolean} Whether the two ranges are equal.
- */
-function isRangeEqual( a, b ) {
-	return (
-		a.startContainer === b.startContainer &&
-		a.startOffset === b.startOffset &&
-		a.endContainer === b.endContainer &&
-		a.endOffset === b.endOffset
-	);
-}
-
 export function applySelection( { startPath, endPath }, current ) {
 	const { node: startContainer, offset: startOffset } = getNodeByPath(
 		current,
diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js
index 05a77211db9831..a4c12b4c47f00d 100644
--- a/packages/rich-text/src/to-html-string.js
+++ b/packages/rich-text/src/to-html-string.js
@@ -14,24 +14,20 @@ import {
 
 import { toTree } from './to-tree';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
- * Create an HTML string from a Rich Text value. If a `multilineTag` is
- * provided, text separated by a line separator will be wrapped in it.
+ * Create an HTML string from a Rich Text value.
  *
- * @param {Object}        $1                      Named argements.
+ * @param {Object}        $1                      Named arguments.
  * @param {RichTextValue} $1.value                Rich text value.
- * @param {string}        [$1.multilineTag]       Multiline tag.
- * @param {boolean}       [$1.preserveWhiteSpace] Whether or not to use newline
- *                                                characters for line breaks.
+ * @param {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
  *
  * @return {string} HTML string.
  */
-export function toHTMLString( { value, multilineTag, preserveWhiteSpace } ) {
+export function toHTMLString( { value, preserveWhiteSpace } ) {
 	const tree = toTree( {
 		value,
-		multilineTag,
 		preserveWhiteSpace,
 		createEmpty,
 		append,
@@ -92,6 +88,15 @@ function remove( object ) {
 }
 
 function createElementHTML( { type, attributes, object, children } ) {
+	if ( type === '#comment' ) {
+		// We can't restore the original comment delimiters, because once parsed
+		// into DOM nodes, we don't have the information. But in the future we
+		// could allow comment handlers to specify custom delimiters, for
+		// example `</{comment-content}>` for Bits, where `comment-content`
+		// would be `/{bit-name}` or `__{translatable-string}` (TBD).
+		return `<!--${ attributes[ 'data-rich-text-comment' ] }-->`;
+	}
+
 	let attributeString = '';
 
 	for ( const key in attributes ) {
diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
index 8b2397013de4d5..0e3caad4f70c83 100644
--- a/packages/rich-text/src/to-tree.js
+++ b/packages/rich-text/src/to-tree.js
@@ -4,11 +4,7 @@
 
 import { getActiveFormats } from './get-active-formats';
 import { getFormatType } from './get-format-type';
-import {
-	LINE_SEPARATOR,
-	OBJECT_REPLACEMENT_CHARACTER,
-	ZWNBSP,
-} from './special-characters';
+import { OBJECT_REPLACEMENT_CHARACTER, ZWNBSP } from './special-characters';
 
 function restoreOnAttributes( attributes, isEditableTree ) {
 	if ( isEditableTree ) {
@@ -35,6 +31,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 +45,7 @@ function restoreOnAttributes( attributes, isEditableTree ) {
  */
 function fromFormat( {
 	type,
+	tagName,
 	attributes,
 	unregisteredAttributes,
 	object,
@@ -58,7 +56,7 @@ function fromFormat( {
 
 	let elementAttributes = {};
 
-	if ( boundaryClass ) {
+	if ( boundaryClass && isEditableTree ) {
 		elementAttributes[ 'data-rich-text-format-boundary' ] = 'true';
 	}
 
@@ -99,8 +97,14 @@ function fromFormat( {
 		}
 	}
 
+	// When a format is declared as non editable, make it non editable in the
+	// editor.
+	if ( isEditableTree && formatType.contentEditable === false ) {
+		elementAttributes.contenteditable = 'false';
+	}
+
 	return {
-		type: formatType.tagName,
+		type: tagName || formatType.tagName,
 		object: formatType.object,
 		attributes: restoreOnAttributes( elementAttributes, isEditableTree ),
 	};
@@ -125,7 +129,6 @@ function isEqualUntil( a, b, index ) {
 
 export function toTree( {
 	value,
-	multilineTag,
 	preserveWhiteSpace,
 	createEmpty,
 	append,
@@ -143,21 +146,13 @@ export function toTree( {
 	const { formats, replacements, text, start, end } = value;
 	const formatsLength = formats.length + 1;
 	const tree = createEmpty();
-	const multilineFormat = { type: multilineTag };
 	const activeFormats = getActiveFormats( value );
 	const deepestActiveFormat = activeFormats[ activeFormats.length - 1 ];
 
-	let lastSeparatorFormats;
 	let lastCharacterFormats;
 	let lastCharacter;
 
-	// If we're building a multiline tree, start off with a multiline element.
-	if ( multilineTag ) {
-		append( append( tree, { type: multilineTag } ), '' );
-		lastCharacterFormats = lastSeparatorFormats = [ multilineFormat ];
-	} else {
-		append( tree, '' );
-	}
+	append( tree, '' );
 
 	for ( let i = 0; i < formatsLength; i++ ) {
 		const character = text.charAt( i );
@@ -165,62 +160,13 @@ export function toTree( {
 			isEditableTree &&
 			// Pad the line if the line is empty.
 			( ! lastCharacter ||
-				lastCharacter === LINE_SEPARATOR ||
 				// Pad the line if the previous character is a line break, otherwise
 				// the line break won't be visible.
 				lastCharacter === '\n' );
 
-		let characterFormats = formats[ i ];
-
-		// Set multiline tags in queue for building the tree.
-		if ( multilineTag ) {
-			if ( character === LINE_SEPARATOR ) {
-				characterFormats = lastSeparatorFormats = (
-					replacements[ i ] || []
-				).reduce(
-					( accumulator, format ) => {
-						accumulator.push( format, multilineFormat );
-						return accumulator;
-					},
-					[ multilineFormat ]
-				);
-			} else {
-				characterFormats = [
-					...lastSeparatorFormats,
-					...( characterFormats || [] ),
-				];
-			}
-		}
-
+		const characterFormats = formats[ i ];
 		let pointer = getLastChild( tree );
 
-		if ( shouldInsertPadding && character === LINE_SEPARATOR ) {
-			let node = pointer;
-
-			while ( ! isText( node ) ) {
-				node = getLastChild( node );
-			}
-
-			append( getParent( node ), ZWNBSP );
-		}
-
-		// Set selection for the start of line.
-		if ( lastCharacter === LINE_SEPARATOR ) {
-			let node = pointer;
-
-			while ( ! isText( node ) ) {
-				node = getLastChild( node );
-			}
-
-			if ( onStartIndex && start === i ) {
-				onStartIndex( tree, node );
-			}
-
-			if ( onEndIndex && end === i ) {
-				onEndIndex( tree, node );
-			}
-		}
-
 		if ( characterFormats ) {
 			characterFormats.forEach( ( format, formatIndex ) => {
 				if (
@@ -231,28 +177,24 @@ export function toTree( {
 						characterFormats,
 						lastCharacterFormats,
 						formatIndex
-					) &&
-					// Do not reuse the last element if the character is a
-					// line separator.
-					( character !== LINE_SEPARATOR ||
-						characterFormats.length - 1 !== formatIndex )
+					)
 				) {
 					pointer = getLastChild( pointer );
 					return;
 				}
 
-				const { type, attributes, unregisteredAttributes } = format;
+				const { type, tagName, attributes, unregisteredAttributes } =
+					format;
 
 				const boundaryClass =
-					isEditableTree &&
-					character !== LINE_SEPARATOR &&
-					format === deepestActiveFormat;
+					isEditableTree && format === deepestActiveFormat;
 
 				const parent = getParent( pointer );
 				const newNode = append(
 					parent,
 					fromFormat( {
 						type,
+						tagName,
 						attributes,
 						unregisteredAttributes,
 						boundaryClass,
@@ -268,13 +210,6 @@ export function toTree( {
 			} );
 		}
 
-		// No need for further processing if the character is a line separator.
-		if ( character === LINE_SEPARATOR ) {
-			lastCharacterFormats = characterFormats;
-			lastCharacter = character;
-			continue;
-		}
-
 		// If there is selection at 0, handle it before characters are inserted.
 		if ( i === 0 ) {
 			if ( onStartIndex && start === 0 ) {
@@ -287,7 +222,27 @@ export function toTree( {
 		}
 
 		if ( character === OBJECT_REPLACEMENT_CHARACTER ) {
-			if ( ! isEditableTree && replacements[ i ]?.type === 'script' ) {
+			const replacement = replacements[ i ];
+			if ( ! replacement ) {
+				continue;
+			}
+			const { type, attributes, innerHTML } = replacement;
+			const formatType = getFormatType( type );
+
+			if ( isEditableTree && type === '#comment' ) {
+				pointer = append( getParent( pointer ), {
+					type: 'span',
+					attributes: {
+						contenteditable: 'false',
+						'data-rich-text-comment':
+							attributes[ 'data-rich-text-comment' ],
+					},
+				} );
+				append(
+					append( pointer, { type: 'span' } ),
+					attributes[ 'data-rich-text-comment' ].trim()
+				);
+			} else if ( ! isEditableTree && type === 'script' ) {
 				pointer = append(
 					getParent( pointer ),
 					fromFormat( {
@@ -297,14 +252,30 @@ export function toTree( {
 				);
 				append( pointer, {
 					html: decodeURIComponent(
-						replacements[ i ].attributes[ 'data-rich-text-script' ]
+						attributes[ 'data-rich-text-script' ]
 					),
 				} );
+			} else if ( formatType?.contentEditable === false ) {
+				// For non editable formats, render the stored inner HTML.
+				pointer = append(
+					getParent( pointer ),
+					fromFormat( {
+						...replacement,
+						isEditableTree,
+						boundaryClass: start === i && end === i + 1,
+					} )
+				);
+
+				if ( innerHTML ) {
+					append( pointer, {
+						html: innerHTML,
+					} );
+				}
 			} else {
 				pointer = append(
 					getParent( pointer ),
 					fromFormat( {
-						...replacements[ i ],
+						...replacement,
 						object: true,
 						isEditableTree,
 					} )
@@ -341,15 +312,15 @@ export function toTree( {
 		if ( shouldInsertPadding && i === text.length ) {
 			append( getParent( pointer ), ZWNBSP );
 
+			// We CANNOT use CSS to add a placeholder with pseudo elements on
+			// the main block wrappers because that could clash with theme CSS.
 			if ( placeholder && text.length === 0 ) {
 				append( getParent( pointer ), {
 					type: 'span',
 					attributes: {
 						'data-rich-text-placeholder': placeholder,
 						// Necessary to prevent the placeholder from catching
-						// selection. The placeholder is also not editable after
-						// all.
-						contenteditable: 'false',
+						// selection and being editable.
 						style: 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;',
 					},
 				} );
diff --git a/packages/rich-text/src/toggle-format.js b/packages/rich-text/src/toggle-format.js
index 747175c3d9d21b..11e61a9d3976f8 100644
--- a/packages/rich-text/src/toggle-format.js
+++ b/packages/rich-text/src/toggle-format.js
@@ -13,8 +13,8 @@ import { getActiveFormat } from './get-active-format';
 import { removeFormat } from './remove-format';
 import { applyFormat } from './apply-format';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
-/** @typedef {import('./create').RichTextFormat} RichTextFormat */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormat} RichTextFormat */
 
 /**
  * Toggles a format object to a Rich Text value at the current selection.
diff --git a/packages/rich-text/src/types.ts b/packages/rich-text/src/types.ts
new file mode 100644
index 00000000000000..5ef595fcdb7615
--- /dev/null
+++ b/packages/rich-text/src/types.ts
@@ -0,0 +1,31 @@
+/**
+ * Stores the type of a rich text format, such as core/bold.
+ */
+export type RichTextFormat = {
+	type:
+		| 'core/bold'
+		| 'core/italic'
+		| 'core/link '
+		| 'core/strikethrough'
+		| 'core/image'
+		| string;
+};
+
+/**
+ * A list of rich text format types.
+ */
+export type RichTextFormatList = Array< RichTextFormat >;
+
+/**
+ * An object which represents a formatted string. The text property contains the
+ * text to be formatted, and the formats property contains an array which indicates
+ * the formats that are applied to each character in the text. See the main
+ * `@wordpress/rich-text` documentation for more detail.
+ */
+export type RichTextValue = {
+	text: string;
+	formats: Array< RichTextFormatList >;
+	replacements: Array< RichTextFormat >;
+	start: number;
+	end: number;
+};
diff --git a/packages/rich-text/src/unregister-format-type.js b/packages/rich-text/src/unregister-format-type.js
index 519e33362d5b68..a1616568f148ec 100644
--- a/packages/rich-text/src/unregister-format-type.js
+++ b/packages/rich-text/src/unregister-format-type.js
@@ -8,14 +8,14 @@ import { select, dispatch } from '@wordpress/data';
  */
 import { store as richTextStore } from './store';
 
-/** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
+/** @typedef {import('./register-format-type').WPFormat} WPFormat */
 
 /**
  * Unregisters a format.
  *
  * @param {string} name Format name.
  *
- * @return {RichTextFormatType|undefined} The previous format value, if it has
+ * @return {WPFormat|undefined} The previous format value, if it has
  *                                        been successfully unregistered;
  *                                        otherwise `undefined`.
  */
diff --git a/packages/rich-text/src/update-formats.js b/packages/rich-text/src/update-formats.js
index 0b4fcf98d840bf..668e1a73db8dff 100644
--- a/packages/rich-text/src/update-formats.js
+++ b/packages/rich-text/src/update-formats.js
@@ -4,7 +4,7 @@
 
 import { isFormatEqual } from './is-format-equal';
 
-/** @typedef {import('./create').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextValue} RichTextValue */
 
 /**
  * Efficiently updates all the formats from `start` (including) until `end`
diff --git a/packages/rich-text/tsconfig.json b/packages/rich-text/tsconfig.json
new file mode 100644
index 00000000000000..57fe0ae604215f
--- /dev/null
+++ b/packages/rich-text/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ],
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../compose" },
+		{ "path": "../data" },
+		{ "path": "../deprecated" },
+		{ "path": "../element" },
+		{ "path": "../escape-html" },
+		{ "path": "../i18n" },
+		{ "path": "../keycodes" }
+	],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
new file mode 100644
index 00000000000000..07ff407d8435ce
--- /dev/null
+++ b/packages/router/CHANGELOG.md
@@ -0,0 +1,93 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+### Enhancements
+
+-   Rewrite the package in typescript ([#65854](https://github.com/WordPress/gutenberg/pull/65854)).
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.27.0 (2024-05-16)
+
+## 0.26.0 (2024-05-02)
+
+## 0.25.0 (2024-04-19)
+
+## 0.24.0 (2024-04-03)
+
+## 0.23.0 (2024-03-21)
+
+## 0.22.0 (2024-03-06)
+
+## 0.21.0 (2024-02-21)
+
+## 0.20.0 (2024-02-09)
+
+## 0.19.0 (2024-01-24)
+
+## 0.18.0 (2024-01-10)
+
+## 0.17.0 (2023-12-13)
+
+## 0.16.0 (2023-11-29)
+
+## 0.15.0 (2023-11-16)
+
+## 0.14.0 (2023-11-02)
+
+## 0.13.0 (2023-10-18)
+
+## 0.12.0 (2023-10-05)
+
+## 0.11.0 (2023-09-20)
+
+## 0.10.0 (2023-08-31)
+
+## 0.9.0 (2023-08-16)
+
+## 0.8.0 (2023-08-10)
+
+## 0.7.0 (2023-07-20)
+
+## 0.6.0 (2023-07-05)
+
+## 0.5.0 (2023-06-23)
+
+## 0.4.0 (2023-06-07)
+
+## 0.3.0 (2023-05-24)
+
+## 0.2.0 (2023-05-10)
+
+Initial release.
diff --git a/packages/router/README.md b/packages/router/README.md
new file mode 100644
index 00000000000000..9964c31dfe6a8a
--- /dev/null
+++ b/packages/router/README.md
@@ -0,0 +1,31 @@
+# Router
+
+Router is a generic package that allows to use browser routing in WordPress packages.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/router --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._
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### privateApis
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/router/package.json b/packages/router/package.json
new file mode 100644
index 00000000000000..66a64f4ddc5baa
--- /dev/null
+++ b/packages/router/package.json
@@ -0,0 +1,45 @@
+{
+	"name": "@wordpress/router",
+	"version": "1.13.0",
+	"description": "Router API for WordPress pages.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"router"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/router/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/router"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/compose": "*",
+		"@wordpress/element": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/url": "*",
+		"history": "^5.3.0",
+		"route-recognizer": "^0.3.4"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
new file mode 100644
index 00000000000000..94878a556278a4
--- /dev/null
+++ b/packages/router/src/index.ts
@@ -0,0 +1 @@
+export { privateApis } from './private-apis';
diff --git a/packages/router/src/link.tsx b/packages/router/src/link.tsx
new file mode 100644
index 00000000000000..d312a9da144601
--- /dev/null
+++ b/packages/router/src/link.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useMemo } from '@wordpress/element';
+import { getQueryArgs, getPath, buildQueryString } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { ConfigContext, type NavigationOptions, useHistory } from './router';
+
+export function useLink( to: string, options: NavigationOptions = {} ) {
+	const history = useHistory();
+	const { pathArg, beforeNavigate } = useContext( ConfigContext );
+	function onClick( event: React.SyntheticEvent< HTMLAnchorElement > ) {
+		event?.preventDefault();
+		history.navigate( to, options );
+	}
+	const query = getQueryArgs( to );
+	const path = getPath( 'http://domain.com/' + to ) ?? '';
+	const link = useMemo( () => {
+		return beforeNavigate
+			? beforeNavigate( { path, query } )
+			: { path, query };
+	}, [ path, query, beforeNavigate ] );
+
+	const [ before ] = window.location.href.split( '?' );
+
+	return {
+		href: `${ before }?${ buildQueryString( {
+			[ pathArg ]: link.path,
+			...link.query,
+		} ) }`,
+		onClick,
+	};
+}
+
+export function Link( {
+	to,
+	options,
+	children,
+	...props
+}: {
+	to: string;
+	options?: NavigationOptions;
+	children: React.ReactNode;
+} ) {
+	const { href, onClick } = useLink( to, options );
+
+	return (
+		<a href={ href } onClick={ onClick } { ...props }>
+			{ children }
+		</a>
+	);
+}
diff --git a/packages/router/src/lock-unlock.ts b/packages/router/src/lock-unlock.ts
new file mode 100644
index 00000000000000..e7323bd0270ea2
--- /dev/null
+++ b/packages/router/src/lock-unlock.ts
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/router'
+	);
diff --git a/packages/router/src/private-apis.ts b/packages/router/src/private-apis.ts
new file mode 100644
index 00000000000000..9ef316ed716cf4
--- /dev/null
+++ b/packages/router/src/private-apis.ts
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { useHistory, useLocation, RouterProvider } from './router';
+import { useLink, Link } from './link';
+import { lock } from './lock-unlock';
+
+export const privateApis = {};
+lock( privateApis, {
+	useHistory,
+	useLocation,
+	RouterProvider,
+	useLink,
+	Link,
+} );
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
new file mode 100644
index 00000000000000..8ad54e9264678a
--- /dev/null
+++ b/packages/router/src/router.tsx
@@ -0,0 +1,237 @@
+/**
+ * External dependencies
+ */
+import RouteRecognizer from 'route-recognizer';
+import { createBrowserHistory } from 'history';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useSyncExternalStore,
+	useMemo,
+} from '@wordpress/element';
+import {
+	addQueryArgs,
+	getQueryArgs,
+	getPath,
+	buildQueryString,
+} from '@wordpress/url';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import type { ReactNode } from 'react';
+
+const history = createBrowserHistory();
+interface Route {
+	name: string;
+	path: string;
+	areas: Record< string, ReactNode >;
+	widths: Record< string, number >;
+}
+
+type LocationWithQuery = Location & {
+	query?: Record< string, any >;
+};
+
+interface Match {
+	name: string;
+	path: string;
+	areas: Record< string, ReactNode >;
+	widths: Record< string, number >;
+	query?: Record< string, any >;
+	params?: Record< string, any >;
+}
+
+export type BeforeNavigate = ( arg: {
+	path: string;
+	query: Record< string, any >;
+} ) => {
+	path: string;
+	query: Record< string, any >;
+};
+
+interface Config {
+	pathArg: string;
+	beforeNavigate?: BeforeNavigate;
+}
+
+export interface NavigationOptions {
+	transition?: string;
+	state?: Record< string, any >;
+}
+
+const RoutesContext = createContext< Match | null >( null );
+export const ConfigContext = createContext< Config >( { pathArg: 'p' } );
+
+const locationMemo = new WeakMap();
+function getLocationWithQuery() {
+	const location = history.location;
+	let locationWithQuery = locationMemo.get( location );
+	if ( ! locationWithQuery ) {
+		locationWithQuery = {
+			...location,
+			query: Object.fromEntries( new URLSearchParams( location.search ) ),
+		};
+		locationMemo.set( location, locationWithQuery );
+	}
+	return locationWithQuery;
+}
+
+export function useLocation() {
+	const context = useContext( RoutesContext );
+	if ( ! context ) {
+		throw new Error( 'useLocation must be used within a RouterProvider' );
+	}
+	return context;
+}
+
+export function useHistory() {
+	const { pathArg, beforeNavigate } = useContext( ConfigContext );
+
+	const navigate = useEvent(
+		async ( rawPath: string, options: NavigationOptions = {} ) => {
+			const query = getQueryArgs( rawPath );
+			const path = getPath( 'http://domain.com/' + rawPath ) ?? '';
+			const performPush = () => {
+				const result = beforeNavigate
+					? beforeNavigate( { path, query } )
+					: { path, query };
+				return history.push(
+					{
+						search: buildQueryString( {
+							[ pathArg ]: result.path,
+							...result.query,
+						} ),
+					},
+					options.state
+				);
+			};
+
+			/*
+			 * Skip transition in mobile, otherwise it crashes the browser.
+			 * See: https://github.com/WordPress/gutenberg/pull/63002.
+			 */
+			const isMediumOrBigger =
+				window.matchMedia( '(min-width: 782px)' ).matches;
+			if (
+				! isMediumOrBigger ||
+				! document.startViewTransition ||
+				! options.transition
+			) {
+				performPush();
+				return;
+			}
+
+			await new Promise< void >( ( resolve ) => {
+				const classname = options.transition ?? '';
+				document.documentElement.classList.add( classname );
+				const transition = document.startViewTransition( () =>
+					performPush()
+				);
+				transition.finished.finally( () => {
+					document.documentElement.classList.remove( classname );
+					resolve();
+				} );
+			} );
+		}
+	);
+
+	return useMemo(
+		() => ( {
+			navigate,
+			back: history.back,
+		} ),
+		[ navigate ]
+	);
+}
+
+export default function useMatch(
+	location: LocationWithQuery,
+	matcher: RouteRecognizer,
+	pathArg: string
+): Match {
+	const { query: rawQuery = {} } = location;
+
+	return useMemo( () => {
+		const { [ pathArg ]: path = '/', ...query } = rawQuery;
+		const result = matcher.recognize( path )?.[ 0 ];
+		if ( ! result ) {
+			return {
+				name: '404',
+				path: addQueryArgs( path, query ),
+				areas: {},
+				widths: {},
+				query,
+				params: {},
+			};
+		}
+
+		const matchedRoute = result.handler as Route;
+		const resolveFunctions = ( record: Record< string, any > = {} ) => {
+			return Object.fromEntries(
+				Object.entries( record ).map( ( [ key, value ] ) => {
+					if ( typeof value === 'function' ) {
+						return [
+							key,
+							value( { query, params: result.params } ),
+						];
+					}
+					return [ key, value ];
+				} )
+			);
+		};
+		return {
+			name: matchedRoute.name,
+			areas: resolveFunctions( matchedRoute.areas ),
+			widths: resolveFunctions( matchedRoute.widths ),
+			params: result.params,
+			query,
+			path: addQueryArgs( path, query ),
+		};
+	}, [ matcher, rawQuery, pathArg ] );
+}
+
+export function RouterProvider( {
+	routes,
+	pathArg,
+	beforeNavigate,
+	children,
+}: {
+	routes: Route[];
+	pathArg: string;
+	beforeNavigate?: BeforeNavigate;
+	children: React.ReactNode;
+} ) {
+	const location = useSyncExternalStore(
+		history.listen,
+		getLocationWithQuery,
+		getLocationWithQuery
+	);
+	const matcher = useMemo( () => {
+		const ret = new RouteRecognizer();
+		routes.forEach( ( route ) => {
+			ret.add( [ { path: route.path, handler: route } ], {
+				as: route.name,
+			} );
+		} );
+		return ret;
+	}, [ routes ] );
+	const match = useMatch( location, matcher, pathArg );
+	const config = useMemo(
+		() => ( { beforeNavigate, pathArg } ),
+		[ beforeNavigate, pathArg ]
+	);
+
+	return (
+		<ConfigContext.Provider value={ config }>
+			<RoutesContext.Provider value={ match }>
+				{ children }
+			</RoutesContext.Provider>
+		</ConfigContext.Provider>
+	);
+}
diff --git a/packages/router/tsconfig.json b/packages/router/tsconfig.json
new file mode 100644
index 00000000000000..8706b546ff304d
--- /dev/null
+++ b/packages/router/tsconfig.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "gutenberg-env" ]
+	},
+	"references": [
+		{ "path": "../compose" },
+		{ "path": "../element" },
+		{ "path": "../private-apis" },
+		{ "path": "../url" }
+	],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/scripts/.npmrc b/packages/scripts/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/scripts/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 7600e10fdb7311..969b2ce0f68f00 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,269 @@
 
 ## Unreleased
 
+### Internal
+
+-   The bundled `sass` dependency has been updated from `^1.35.2` to `^1.50.1` ([#67572](https://github.com/WordPress/gutenberg/pull/67572)).
+-   The bundled `sass-loader` dependency has been updated from `^12.1.0` to `^16.0.3` ([#67572](https://github.com/WordPress/gutenberg/pull/67572)).
+-   The bundled `mini-css-extract-plugin` dependency has been updated from `^2.5.1` to `^2.9.2` ([#67572](https://github.com/WordPress/gutenberg/pull/67572)).
+-   The bundled `webpack` dependency has been updated from `^5.95.0` to `^5.97.0` ([#67572](https://github.com/WordPress/gutenberg/pull/67572)).
+
+### Bug Fix
+
+-   Make React Fast Refresh in the `start` command work with multiple blocks ([64924](https://github.com/WordPress/gutenberg/pull/64924)).
+
+## 30.6.0 (2024-11-27)
+
+## 30.5.1 (2024-11-18)
+
+### Bug Fix
+
+-   Revert changes from [#61121](https://github.com/WordPress/gutenberg/pull/61121) that inlined CSS files imported from other CSS files before optimization in the `build` command.
+
+## 30.5.0 (2024-11-16)
+
+### Bug Fix
+
+-   Make `start` script more resilient for developer errors ([#66752](https://github.com/WordPress/gutenberg/pull/66752)).
+
+## 30.4.0 (2024-10-30)
+
+### Enhancements
+
+-   Add BlueOak-1.0.0 the GPLv2-compatible licenses recognized by check-licenses ([#66139](https://github.com/WordPress/gutenberg/pull/66139)).
+-   Add an optional `--root-folder` argument to the `plugin-zip` command ([#61375](https://github.com/WordPress/gutenberg/pull/61375)). By default, the command will use the plugin's name as the root folder of the zip. If the change in the behavior impacted your workflow, you could pass `--no-root-folder` to remove the root folder.
+
+### Internal
+
+-   Refactor to extract license related logic to a reusable module ([#66179](https://github.com/WordPress/gutenberg/pull/66179)).
+
+## 30.3.0 (2024-10-17)
+
+### New Features
+
+-   Add new `build-blocks-manifest` command to generate a PHP file containing block metadata from all `block.json` files in a project ([#65866](https://github.com/WordPress/gutenberg/pull/65866)).
+
+## 30.2.0 (2024-10-16)
+
+## 30.1.0 (2024-10-03)
+
+## 30.0.0 (2024-09-19)
+
+### Breaking Changes
+
+-   Updated `stylelint` dependency to `^16.8.2` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+-   Switched default config from `@wordpress/stylelint-config/scss` to use `@wordpress/stylelint-config/scss-stylistic` to keep stylistic rules ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+
+## 29.0.0 (2024-09-05)
+
+### Breaking Changes
+
+-   Fixed the issue with having 5 high severity vulnerabilities by upgrading the `puppeteer-core` package to the latest major version `^23.1.0` ([#64597](https://github.com/WordPress/gutenberg/pull/64597)).
+
+### Enhancements
+
+-   Inlines CSS files imported from other CSS files before optimization in the `build` command ([#61121](https://github.com/WordPress/gutenberg/pull/61121)).
+
+### Bug Fixes
+
+-   Added chunk filename in webpack config to avoid reading stale files ([#58176](https://github.com/WordPress/gutenberg/pull/58176)).
+
+## 28.6.0 (2024-08-21)
+
+## 28.5.0 (2024-08-07)
+
+## 28.4.0 (2024-07-24)
+
+### New Features
+
+-   Update webpack configuration for the `build` and `start` commands to automatically copy PHP files listed in the `variations` field of `block.json` files from the source to the build folder ([#63098](https://github.com/WordPress/gutenberg/pull/63098)).
+
+## 28.3.0 (2024-07-10)
+
+## 28.2.0 (2024-06-26)
+
+## 28.1.0 (2024-06-15)
+
+## 28.0.0 (2024-05-31)
+
+### Breaking Changes
+
+**Note** If you're using @wordpress/scripts for building JS scripts to target WordPress 6.5 or earlier, you should not upgrade to this version and continue using @wordpress/scripts@27.
+
+-   Use React's automatic runtime to transform JSX ([#61692](https://github.com/WordPress/gutenberg/pull/61692)).
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 27.9.0 (2024-05-16)
+
+### New Features
+
+-   Add RTL support when building CSS styles with `build` and `start` scripts ([#61540](https://github.com/WordPress/gutenberg/pull/61540)).
+
+## 27.8.0 (2024-05-02)
+
+## 27.7.0 (2024-04-19)
+
+## 27.6.0 (2024-04-03)
+
+## 27.5.0 (2024-03-21)
+
+## 27.4.0 (2024-03-06)
+
+## 27.3.0 (2024-02-21)
+
+## 27.2.0 (2024-02-09)
+
+### New Features
+
+-   Add experimental support for `viewScriptModule` field in block.json for `build` and `start` scripts ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).
+
+### Enhancements
+
+-   Ensure that watched module builds detect block.json changes ([#57927](https://github.com/WordPress/gutenberg/pull/57927)).
+
+### Deprecations
+
+-   Experimental support for `viewModule` field in block.json is deprecated in favor of `viewScriptModule` ([#57437](https://github.com/WordPress/gutenberg/pull/57437)).
+
+## 27.1.0 (2024-01-24)
+
+## 27.0.0 (2024-01-10)
+
+### New Features
+
+-   Add experimental support for `viewModule` field in block.json for `build` and `start` scripts ([#57461](https://github.com/WordPress/gutenberg/pull/57461)).
+
+### Breaking Changes
+
+-   Drop support for Node.js versions < 18.
+
+## 26.19.0 (2023-12-13)
+
+### Bug Fixes
+
+-   Fix CSS imports not minified ([#56516](https://github.com/WordPress/gutenberg/pull/56516)).
+
+## 26.18.0 (2023-11-29)
+
+### Internal
+
+-   The bundled `jest-dev-server` dependency has been updated from `^6.0.2` to `^9.0.1` ([#33287](https://github.com/WordPress/gutenberg/pull/33287)).
+
+## 26.17.0 (2023-11-16)
+
+## 26.16.0 (2023-11-02)
+
+## 26.15.0 (2023-10-18)
+
+## 26.14.0 (2023-10-05)
+
+### Internal
+
+-   The bundled `@pmmmwh/react-refresh-webpack-plugin` dependency has been updated from requiring `^0.5.2` to requiring `^0.5.11` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `browserslist` dependency has been updated from requiring `^4.21.9` to requiring `^4.21.10` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `react-refresh` dependency has been updated from requiring `^0.10.0` to requiring `^0.14.0` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `webpack` dependency has been updated from requiring `^5.47.1` to requiring `^5.88.2` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `webpack-bundle-analyzer` dependency has been updated from requiring `^4.4.2` to requiring `^4.9.1` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `webpack-cli` dependency has been updated from requiring `^4.9.1` to requiring `^5.1.4` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+-   The bundled `webpack-dev-server` dependency has been updated from requiring `^4.4.0` to requiring `^4.15.1` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
+
+## 26.13.0 (2023-09-20)
+
+### Enhancements
+
+-   Added support for `test-playwright` script ([#53108](https://github.com/WordPress/gutenberg/pull/53108)).
+-   The bundled `wp-prettier` dependency has been upgraded from `2.8.5` to `3.0.3` ([#54539](https://github.com/WordPress/gutenberg/pull/54539)).
+
+### Bug Fixes
+
+-   Correctly resolve entry points when the directory is symlinked ([#54212](https://github.com/WordPress/gutenberg/pull/54212)).
+
+## 26.12.0 (2023-08-31)
+
+## 26.11.0 (2023-08-16)
+
+### Enhancements
+
+-   Updated `npm-package-json-lint` peer dependency to require v6.0.0 [#53636](https://github.com/WordPress/gutenberg/pull/53636).
+-   The bundled `@svgr/webpack` dependency has been updated from requiring ^6.2.1 to requiring ^8.0.1 ([#53630](https://github.com/WordPress/gutenberg/pull/53630)).
+-   The bundled `cssnano` dependency has been updated from requiring ^5.07 to requiring ^6.0.1 ([#53630](https://github.com/WordPress/gutenberg/pull/53630)).
+
+### Bug Fixes
+
+-   Fix prevent watch mode from aborting when encountering a `block.json` file that contains invalid JSON. ([#51971](https://github.com/WordPress/gutenberg/pull/51971))
+
+## 26.10.0 (2023-08-10)
+
+## 26.9.0 (2023-07-20)
+
+## 26.8.0 (2023-07-05)
+
+## 26.7.0 (2023-06-23)
+
+## 26.6.0 (2023-06-07)
+
+### Enhancements
+
+-   The bundled `terser-webpack-plugin` dependency has been updated from requiring `^5.1.4` to requiring `^5.3.9` ([#50994](https://github.com/WordPress/gutenberg/pull/50994)).
+-   Optimize updating render paths when developing blocks with the `start` command ([#51162](https://github.com/WordPress/gutenberg/pull/51162)).
+
+### Bug Fixes
+
+-   Ensure files listed in `render` field of `block.json` files are always copied to the build folder when using the `start` command ([#50939](https://github.com/WordPress/gutenberg/pull/50939)).
+
+## 26.5.0 (2023-05-24)
+
+## 26.4.0 (2023-05-10)
+
+## 26.3.0 (2023-04-26)
+
+### Enhancements
+
+-   License check script supports conjunctive (AND) licenses ([46801](https://github.com/WordPress/gutenberg/pull/46801)).
+
+## 26.2.0 (2023-04-12)
+
+## 26.1.0 (2023-03-29)
+
+### Enhancements
+
+-   The bundled `wp-prettier` dependency has been upgraded from `2.6.2` to `2.8.5` ([#49258](https://github.com/WordPress/gutenberg/pull/49258)).
+
+## 26.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-   Started using Jest v29 instead of v27 as a dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
+## 25.5.1 (2023-03-06)
+
+### Bug Fixes
+
+-   Fix `render.php` isn't copied in Windows OS ([#48735](https://github.com/WordPress/gutenberg/pull/48735)).
+
+## 25.5.0 (2023-03-01)
+
+## 25.4.0 (2023-02-15)
+
+### New Features
+
+-   The `WP_DEVTOOL` environment variable can now be used to set the Webpack devtool option for sourcemaps in production builds ([#46812](https://github.com/WordPress/gutenberg/pull/46812)). Previously, this only worked for development builds.
+-   Update default webpack config and lint-style script to allow PostCSS (`.pcss` extension) file usage ([#45352](https://github.com/WordPress/gutenberg/pull/45352)).
+-   Add `--no-watch` option to allow creating the unminified/dev JS without starting the watcher ([#44237](https://github.com/WordPress/gutenberg/pull/44237)).
+
+## 25.3.0 (2023-02-01)
+
+## 25.2.0 (2023-01-11)
+
+## 25.1.0 (2023-01-02)
+
+## 25.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 24.6.0 (2022-11-16)
 
 ## 24.5.0 (2022-11-02)
@@ -21,30 +284,30 @@
 
 ## 24.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 and minimum npm version to 6.14.4 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 -   The bundled `@wordpress/eslint-plugin` package got updated to the new major version and the default linting for Jest unit tests is now handled in the default config in this package ([#43272](https://github.com/WordPress/gutenberg/pull/43272)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Packages: Replace `is-plain-obj` with `is-plain-object` ([#43511](https://github.com/WordPress/gutenberg/pull/43511)).
 
 ## 23.7.2 (2022-08-17)
 
-### Bug Fix
+### Bug Fixes
 
 -   Jest Preset: Improve `is-plain-obj` transformation ignore ([#43271](https://github.com/WordPress/gutenberg/pull/43271)).
 
 ## 23.7.1 (2022-08-12)
 
-### Bug Fix
+### Bug Fixes
 
 -   Jest Preset: Ignore `is-plain-obj` transformation ([#43179](https://github.com/WordPress/gutenberg/pull/43179)).
 
 ## 23.6.0 (2022-07-27)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the incorrect exit error code when status missing in `webpack` call for `build` and `start` commands ([#42396](https://github.com/WordPress/gutenberg/pull/42396)).
 
@@ -56,13 +319,13 @@
 
 ## 23.2.0 (2022-06-01)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix incorrect handling in `plugin-zip` for root-level files and some specific platform conditions ([#41439](https://github.com/WordPress/gutenberg/pull/41439)).
 
 ## 23.1.0 (2022-05-18)
 
-### New Feature
+### New Features
 
 -   Enable by default code formatting for JSON files in the `format` command ([#40994](https://github.com/WordPress/gutenberg/pull/40994)). You can opt-out of this behavior by providing a custom file matcher, example: `wp-scripts format src/**/*.js`.
 -   Support tsx files in `viewScript`, `script`, `editorScript` ([#41068](https://github.com/WordPress/gutenberg/pull/41068)).
@@ -90,7 +353,7 @@
 
 ## 22.4.0 (2022-04-08)
 
-### New Feature
+### New Features
 
 -   Add `--webpack-src-dir` CLI flag to allow customizing the source code directory (`src` by default) ([#39618](https://github.com/WordPress/gutenberg/pull/39618)).
 
@@ -102,13 +365,13 @@
 
 ## 22.2.0 (2022-03-11)
 
-### Enhancement
+### Enhancements
 
 -   The bundled `@wordpress/eslint-plugin` package got updated to the new major version, but the breaking changes included don't affect this package ([#39244](https://github.com/WordPress/gutenberg/pull/39244)).
 
 ## 22.1.0 (2022-03-03)
 
-### New Feature
+### New Features
 
 -   Add `--webpack-copy-php` CLI flag to opt-in to copying php files from `src` and its subfolders to the output directory (`build` by default) ([#39171](https://github.com/WordPress/gutenberg/pull/39171)).
 
@@ -118,7 +381,7 @@
 
 -   The bundled `@svgr/webpack` dependency has been updated from requiring `^5.5.0` to requiring `^6.2.1` ([#38866](https://github.com/WordPress/gutenberg/pull/38866)). See [official migration guide to v6](https://react-svgr.com/docs/migrate/) for details.
 
-### New Feature
+### New Features
 
 -   Automatically copy PHP files located in the `src` folder and its subfolders to the output directory (`build` by default) ([#38715](https://github.com/WordPress/gutenberg/pull/38715)).
 
@@ -128,7 +391,7 @@
 
 ## 21.0.1 (2022-02-11)
 
-### Bug Fix
+### Bug Fixes
 
 -   Return a default entry object in the `build` command when no entry files discovered in the project ([#38737](https://github.com/WordPress/gutenberg/pull/38737)).
 
@@ -138,20 +401,20 @@
 
 -   The bundled `puppeteer-core` dependency has been updated from requiring `^11.0.0` to requiring `^13.2.0` ([#37078](https://github.com/WordPress/gutenberg/pull/37078)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the handling for entry points when running `build` command ([#38584](https://github.com/WordPress/gutenberg/pull/38584)).
 
 ## 20.0.2 (2022-01-31)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix the `build` command that does not generate assets on Windows OS ([#38348](https://github.com/WordPress/gutenberg/pull/38348)).
 -   Adds fallback to `src/index.js` when no valid scripts discovered in metadata files when running the `build` command ([#38367](https://github.com/WordPress/gutenberg/pull/38367)).
 
 ## 20.0.1 (2022-01-28)
 
-### Bug Fix
+### Bug Fixes
 
 -   Ensure that React Fast Refresh is not wired when it isn't explicitly enabled with `--hot` CLI argument when running the `start` command.
 
@@ -170,7 +433,7 @@
 ### New Features
 
 -   Added a new `plugin-zip` command to create a zip file for a WordPress plugin ([#37687](https://github.com/WordPress/gutenberg/pull/37687)).
--   Added optional support for React Fast Refresh in the `start` command. It can be activated with `--hot` CLI argument ([#28273](https://github.com/WordPress/gutenberg/pull/28273)). For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://wordpress.org/support/article/debugging-in-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed.
+-   Added optional support for React Fast Refresh in the `start` command. It can be activated with `--hot` CLI argument ([#28273](https://github.com/WordPress/gutenberg/pull/28273)). For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed.
 -   Automatically copy `block.json` files located in the `src` folder and its subfolders to the output folder (`build` by default) ([#37612](https://github.com/WordPress/gutenberg/pull/37612)).
 -   Scan the `src` directory for `block.json` files to detect defined scripts to use them as entry points with the `start` and `build` commands. ([#37661](https://github.com/WordPress/gutenberg/pull/37661)).
 
@@ -287,7 +550,7 @@
 
 ## 16.1.0 (2021-05-20)
 
-### Bug Fix
+### Bug Fixes
 
 -   The default Babel configuration has changed to respect a local Browserslist configuration.
 
@@ -305,13 +568,13 @@
 -   Have the `format` command ignore files listed in a `.prettierignore` file, add a fallback `.prettierignore` to the package ([30844](https://github.com/WordPress/gutenberg/pull/30844)).
 -   The e2e tests are now using [`jest-circus`](https://github.com/facebook/jest/tree/master/packages/jest-circus) as the test runner. This enable us to capture screenshots at the time the tests failed. The unit tests are also using the same test runner for consistency ([#28449](https://github.com/WordPress/gutenberg/pull/28449), [#31178](https://github.com/WordPress/gutenberg/pull/31178)).
 
-### Security Fix
+### Security
 
 -   Update `postcss` dependency to the latest patch version. Versions before 8.2.10 are vulnerable to Regular Expression Denial of Service (ReDoS) during source map parsing ([#31685](https://github.com/WordPress/gutenberg/pull/31685)).
 
 ## 15.0.1 (2021-04-30)
 
-### Bug Fix
+### Bug Fixes
 
 -   Add `postcss` as a dependency to ensure that the correct version gets installed.
 
@@ -376,7 +639,7 @@
 -   Make it possible to transpile `.jsx` files with `build` and `start` commands ([#28002](https://github.com/WordPress/gutenberg/pull/28002)).
 -   Add support for static assets (fonts and images) for `build` and `start` commands ([#28043](https://github.com/WordPress/gutenberg/pull/28043)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Ensure that `check-engines` uses the same default version of Node.js and npm as this package ([#28143](https://github.com/WordPress/gutenberg/pull/28143)).
 -   Prevent translation function names from being mangled to ensure stings are extracted ([#28231](https://github.com/WordPress/gutenberg/pull/28231)).
@@ -387,7 +650,7 @@
 
 ## 12.6.1 (2021-01-05)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix multiple build (`build` command) runtimes conflicting when using globals ([#27985](https://github.com/WordPress/gutenberg/pull/27985)).
 
@@ -446,7 +709,7 @@
 -   The bundled `wp-prettier` dependency has been upgraded from `1.19.1` to `2.0.5`. Refer to the [Prettier 2.0 "2020" blog post](https://prettier.io/blog/2020/03/21/2.0.0.html) for full details about the major changes included in Prettier 2.0.
 -   The bundled `eslint` dependency has been updated from requiring `^6.8.0` to requiring `^7.1.0`.
 
-### New Feature
+### New Features
 
 -   The PostCSS loader now gives preference to a `postcss.config.js` configuration file if present.
 
@@ -457,7 +720,7 @@
 
 ## 10.0.0 (2020-05-28)
 
-### New Feature
+### New Features
 
 -   New `--webpack-no-externals` flag added to `build` and `start` scripts. It disables scripts' assets generation, and omits the list of default externals ([#22310](https://github.com/WordPress/gutenberg/pull/22310)).
 -   New `--webpack-bundle-analyzer` flag added to `build` and `start` scripts. It enables visualization for the size of webpack output files with an interactive zoomable treemap ([#22310](https://github.com/WordPress/gutenberg/pull/22310)).
@@ -490,7 +753,7 @@
 -   Add debugging support for `test-unit-js` script ([#21631](https://github.com/WordPress/gutenberg/pull/21631)). Tests can be debugged by any [inspector client](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients) that supports the [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) using the `--inspect-brk` option.
 -   Add debugging support for `test-e2e` script ([#21861](https://github.com/WordPress/gutenberg/pull/21861)). Tests can be debugged by using the `--inspect-brk` option and a new `--puppeteer-devtools` option (or `PUPPETEER_DEVTOOLS="true"` environment variable).
 
-### Bug fix
+### Bug Fixes
 
 -   The bundled `npm-package-json-lint` dependency has been updated from requiring `^4.0.3` to requiring `^5.0.0` ([#21597](https://github.com/WordPress/gutenberg/pull/21597)). [Breaking changes](https://npmpackagejsonlint.org/docs/en/v4-to-v5) don't break anything in this package. It fixes the abrupt shutdown when `"description"` field in `package.json` is empty.
 -   Update `check-licenses` script to parse JSON dependency tree recursively so sub-dependencies of packages passed in `--ignore` flag are ignored as well.
@@ -605,7 +868,7 @@
 -   The bundled `eslint` dependency has been updated from requiring `^5.16.0` to requiring `^6.1.0`.
 -   The bundled `@wordpress/eslint-plugin` dependency has been updated to the next major version `^3.0.0` due to new ESLint rules enabled for all test files.
 
-### Bug Fix
+### Bug Fixes
 
 -   Use the SCSS shared `stylelint-config-wordpress` config so that both CSS and SCSS rules are used ([#17060](https://github.com/WordPress/gutenberg/pull/17060))
 
@@ -615,7 +878,7 @@
 
 -   The `build` and `start` commands supports simplified syntax for multiple entry points: `wp-scripts build entry-one.js entry-two.js` ([15982](https://github.com/WordPress/gutenberg/pull/15982)).
 
-### Bug Fix
+### Bug Fixes
 
 -   Added missing [babel-jest](https://www.npmjs.com/package/babel-jest) dependency ([#16259](https://github.com/WordPress/gutenberg/pull/16259)).
 
@@ -644,7 +907,7 @@
 
 ## 3.1.0 (2019-03-20)
 
-## New features
+### New Features
 
 -   The `build` and `start` commands will use a default webpack config if none is provided.
 
@@ -662,7 +925,7 @@
 -   Added support for `start` script ([#12837](https://github.com/WordPress/gutenberg/pull/12837))
 -   Updated `npm-package-json-lint` dependency [#14200](https://github.com/WordPress/gutenberg/pull/14200)
 
-### Bug Fix
+### Bug Fixes
 
 -   Avoid inheriting from ESLint configurations in ancestor directories when using the default configuration ([#13483](https://github.com/WordPress/gutenberg/pull/13483))
 
@@ -685,13 +948,13 @@
 
 ## 2.4.0 (2018-10-16)
 
-### New Feature
+### New Features
 
 -   Added support for `lint-js` script ([#10504](https://github.com/WordPress/gutenberg/pull/10504))
 
 ## 2.3.0 (2018-09-30)
 
-### Improvements
+### Enhancements
 
 -   New flag `--ignore` for `check-licenses` script
 -   Try deferring to LICENSE file for `license` fields which include filename
@@ -699,17 +962,17 @@
 
 ## 2.2.1 (2018-09-05)
 
-### Bug Fix
+### Bug Fixes
 
 -   Resolves an issue where npm package lint script did not work in Windows environments ([#9321](https://github.com/WordPress/gutenberg/pull/9321)
 
-### Polish
+### Internal
 
 -   Updated dependencies: `jest`, `npm-package-json-lint` and `read-pkg-up`
 
 ## 2.0.0 (2018-07-12)
 
-### Breaking Change
+### Breaking Changes
 
 -   Updated code to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
@@ -719,12 +982,12 @@
 
 ## 1.2.0 (2018-05-29)
 
-### New Feature
+### New Features
 
 -   Added support for `lint-pkg-json` script ([#128](https://github.com/WordPress/packages/pull/128))
 
 ## 1.1.5 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index 18b89521a2e1da..f86a4c6091c408 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -16,7 +16,7 @@ You only need to install one npm module:
 npm install @wordpress/scripts --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later, and `npm` 6.14.4 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Setup
 
@@ -48,7 +48,7 @@ It might also be a good idea to get familiar with the [JavaScript Build Setup tu
 
 ## Automatic block.json detection and the source code directory
 
-When using the `start` or `build` commands, the source code directory ( the default is `./src`) and its subdirectories are scanned for the existence of `block.json` files. If one or more are found, they are treated a entry points and will be output into corresponding folders in the `build` directory. This allows for the creation of multiple blocks that use a single build process. The source directory can be customized using the `--webpack-src-dir` flag.
+When using the `start` or `build` commands, the source code directory ( the default is `./src`) and its subdirectories are scanned for the existence of `block.json` files. If one or more are found, they are treated a entry points and will be output into corresponding folders in the `build` directory. This allows for the creation of multiple blocks that use a single build process. The source directory can be customized using the `--webpack-src-dir` flag and the output directory with the `--output-path` flag.
 
 ## Updating to New Release
 
@@ -97,8 +97,8 @@ This is how you execute the script with presented setup:
 
 -   `npm run build` - builds the code for production.
 -   `npm run build:custom` - builds the code for production with two entry points and a custom output directory. Paths for custom entry points are relative to the project root.
--   `npm run build:copy-php` - builds the code for production and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` field in the detected `block.json` files get copied.
--   `build:custom-directory` - builds the code for production using the `custom-directory` as the source code directory.
+-   `npm run build:copy-php` - builds the code for production and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` and `variations` fields in the detected `block.json` files get copied.
+-   `npm run build:custom-directory` - builds the code for production using the `custom-directory` as the source code directory.
 
 This script automatically use the optimized config but sometimes you may want to specify some custom options:
 
@@ -106,11 +106,52 @@ This script automatically use the optimized config but sometimes you may want to
 -   `--webpack-copy-php` – enables copying all PHP files from the source directory ( default is `src` ) and its subfolders to the output directory.
 -   `--webpack-no-externals` – disables scripts' assets generation, and omits the list of default externals.
 -   `--webpack-src-dir` – Allows customization of the source code directory. Default is `src`.
+-   `--output-path` – Allows customization of the output directory. Default is `build`.
+
+Experimental support for the block.json `viewScriptModule` field is available via the
+`--experimental-modules` option. With this option enabled, script and module fields will all be
+compiled. The `viewScriptModule` field is analogous to the `viewScript` field, but will compile a module
+and should be registered in WordPress using the Modules API.
 
 #### Advanced information
 
 This script uses [webpack](https://webpack.js.org/) behind the scenes. It’ll look for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it’ll use the default config provided by `@wordpress/scripts` packages. Learn more in the [Advanced Usage](#advanced-usage) section.
 
+
+### `build-blocks-manifest`
+
+This script generates a PHP file containing block metadata from all
+`block.json` files in the project. This is useful for enhancing performance
+when registering multiple block types, as it allows you to use
+`wp_register_block_metadata_collection()` in WordPress.
+
+Usage: `wp-scripts build-blocks-manifest [options]`
+
+Options:
+- `--input`: Specify the input directory (default: 'build')
+- `--output`: Specify the output file path (default: 'build/blocks-manifest.php')
+
+Example:
+```bash
+wp-scripts build-blocks-manifest --input=src --output=dist/blocks-manifest.php
+```
+
+This command will scan the specified input directory for `block.json` files,
+compile their metadata into a single PHP file, and output it to the specified
+location. You can then use this file with
+`wp_register_block_metadata_collection()` in your plugin:
+
+```php
+wp_register_block_metadata_collection(
+    plugin_dir_path( __FILE__ ) . 'dist',
+    plugin_dir_path( __FILE__ ) . 'dist/blocks-manifest.php'
+);
+```
+
+Using this approach can improve performance when registering multiple block
+types, especially for plugins with several custom blocks. Note that this
+feature is only available in WordPress 6.7 and later versions.
+
 ### `check-engines`
 
 Checks if the current `node`, `npm` (or `yarn`) versions match the given [semantic version](https://semver.org/) ranges. If the given version is not satisfied, information about installing the needed version is printed and the program exits with an error code.
@@ -275,7 +316,7 @@ _Example:_
 
 This is how you execute the script with presented setup:
 
--   `npm run lint:style` - lints CSS and SCSS files in the entire project’s directories.
+-   `npm run lint:style` - lints CSS, PCSS, and SCSS files in the entire project’s directories.
 -   `npm run lint:css:src` - lints only CSS files in the project’s `src` subfolder’s directories.
 
 When you run commands similar to the `npm run lint:css:src` example above, be sure to include the quotation marks around file globs. This ensures that you can use the powers of [globby](https://github.com/sindresorhus/globby) (like the `**` globstar) regardless of your shell. See [more examples](https://github.com/stylelint/stylelint/blob/HEAD/docs/user-guide/cli.md#examples).
@@ -337,6 +378,14 @@ In the case where the plugin author wants to customize the files included in the
 
 It reuses the same logic as `npm pack` command to create an npm package tarball.
 
+This is how you create a custom root folder inside the zip file.
+
+-   When updating a plugin, WordPress expects a folder in the root of the zip file which matches the plugin name. So be aware that this may affect the plugin update process.
+-   `--root-folder` - Add a custom root folder to the zip file.
+-   `npm run plugin-zip` - By default, unzipping your plugin's zip file will result in a folder with the same name as your plugin.
+-   `npm run plugin-zip --root-folder='custom-directory'` - Your plugin's zip file will be unzipped into a folder named `custom-directory`.
+-   `npm run plugin-zip --no-root-folder` - This will create a zip file that has no folder inside, your plugin files will be unzipped directly into the target directory.
+
 ### `start`
 
 Transforms your code according the configuration provided so it’s ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console.
@@ -376,17 +425,24 @@ This is how you execute the script with presented setup:
 -   `npm start` - starts the build for development.
 -   `npm run start:hot` - starts the build for development with "Fast Refresh". The page will automatically reload if you make changes to the files.
 -   `npm run start:custom` - starts the build for development which contains two entry points and a custom output directory. Paths for custom entry points are relative to the project root.
--   `npm run start:copy-php` - starts the build for development and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` field in the detected `block.json` files get copied.
+-   `npm run start:copy-php` - starts the build for development and opts into copying all PHP files from the `src` directory and its subfolders to the output directory. By default, only PHP files listed in the `render` and `variations` fields in the detected `block.json` files get copied.
 -   `npm run start:custom-directory` - builds the code for production using the `custom-directory` as the source code directory.
 
 This script automatically use the optimized config but sometimes you may want to specify some custom options:
 
--   `--hot` – enables "Fast Refresh". The page will automatically reload if you make changes to the code. _For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://wordpress.org/support/article/debugging-in-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed._
+-   `--hot` – enables "Fast Refresh". The page will automatically reload if you make changes to the code. _For now, it requires that WordPress has the [`SCRIPT_DEBUG`](https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/#script_debug) flag enabled and the [Gutenberg](https://wordpress.org/plugins/gutenberg/) plugin installed._
+-   `--no-watch` – Starts the build for development without starting the watcher.
 -   `--webpack-bundle-analyzer` – enables visualization for the size of webpack output files with an interactive zoomable treemap.
 -   `--webpack-copy-php` – enables copying all PHP files from the source directory ( default is `src` ) and its subfolders to the output directory.
 -   `--webpack-devtool` – controls how source maps are generated. See options at https://webpack.js.org/configuration/devtool/#devtool.
 -   `--webpack-no-externals` – disables scripts' assets generation, and omits the list of default externals.
 -   `--webpack-src-dir` – Allows customization of the source code directory. Default is `src`.
+-   `--output-path` – Allows customization of the output directory. Default is `build`.
+
+Experimental support for the block.json `viewScriptModule` field is available via the
+`--experimental-modules` option. With this option enabled, script and module fields will all be
+compiled. The `viewScriptModule` field is analogous to the `viewScript` field, but will compile a module
+and should be registered in WordPress using the Modules API.
 
 #### Advanced information
 
@@ -416,8 +472,8 @@ This is how you execute those scripts using the presented setup:
 
 -   `npm run test:e2e` - runs all e2e tests.
 -   `npm run test:e2e:help` - prints all available options to configure e2e test runner.
--   `npm run test-e2e -- --puppeteer-interactive` - runs all e2e tests interactively.
--   `npm run test-e2e FILE_NAME -- --puppeteer-interactive` - runs one test file interactively.
+-   `npm run test:e2e -- --puppeteer-interactive` - runs all e2e tests interactively.
+-   `npm run test:e2e FILE_NAME -- --puppeteer-interactive` - runs one test file interactively.
 -   `npm run test:e2e:watch -- --puppeteer-interactive` - runs all tests interactively and watch for changes.
 -   `npm run test:e2e:debug` - runs all tests interactively and enables [debugging tests](#debugging-e2e-tests).
 
@@ -490,6 +546,47 @@ Should there be any situation where you want to provide your own Jest config, yo
 -   there is a file called `jest-unit.config.js`, `jest-unit.config.json`, `jest.config.js`, or `jest.config.json` in the top-level directory of your package (at the same level than your `package.json`).
 -   a `jest` object can be provided in the `package.json` file with the test configuration.
 
+### `test-playwright`
+
+Launches the Playwright End-To-End (E2E) test runner. Similar to Puppeteer, it provides a high-level API to control a headless browser.
+
+Refer to the [Getting Started guide](https://playwright.dev/docs/writing-tests) to learn how to write tests.
+
+_Example:_
+
+```json
+{
+	"scripts": {
+		"test:playwright": "wp-scripts test-playwright",
+		"test:playwright:help": "wp-scripts test-playwright --help",
+		"test:playwright:debug": "wp-scripts test-playwright --debug"
+	}
+}
+```
+
+This is how you execute those scripts using the presented setup:
+
+-   `npm run test:playwright` - runs all tests.
+-   `npm run test:playwright:help` - prints all available options to configure the test runner.
+-   `npm run test:playwright:debug` - runs all tests interactively with the Playwright inspector.
+-   `npm run test:playwright FILE_NAME` - runs a specific test file.
+-   `npm run test:playwright -- --watch` - runs all tests interactively with watch mode and enhanced debugging.
+
+By default, Playwright looks for JavaScript or TypeScript files with `.test` or `.spec` suffix in the project root-level `/specs` folder, for example `/specs/login-screen.wrong-credentials.spec.ts`.
+
+This script automatically detects the best config to start Playwright, but sometimes you may need to specify custom options.
+To do so, you can add a file called `playwright.config.ts` or `playwright.config.js` in the top-level directory of your package (at the same level as your `package.json`).
+
+#### Failed Test Artifacts
+
+When tests fail, snapshots will be taken of the page and stored in the `artifacts/` directory at the root of your project. These snapshots may help debug failed tests during development or when running tests in a CI environment.
+
+The `artifacts/` directory can be customized by setting the `WP_ARTIFACTS_PATH` environment variable to the relative path of the desired directory within your project's root. For example: to change the default directory from `artifacts/` to `my/custom/artifacts`, you could use `WP_ARTIFACTS_PATH=my/custom/artifacts npm run test:playwright`.
+
+#### Advanced information
+
+You are able to use all of Playwright's [CLI options](https://playwright.dev/docs/test-cli#reference). You can also run `./node_modules/.bin/wp-scripts test-playwright --help` or `npm run test:playwright:help` (as mentioned above) to view all the available options. Learn more in the [Advanced Usage](#advanced-usage) section.
+
 ## Passing Node.js options
 
 `wp-scripts` supports the full array of [Node.js CLI options](https://nodejs.org/api/cli.html). They can be passed after the `wp-scripts` command and before the script name.
@@ -587,6 +684,7 @@ $body-color: red;
 
 ```js
 // index.js
+import './index.pcss';
 import './index.scss';
 import './style.css';
 ```
@@ -594,7 +692,7 @@ import './style.css';
 When you run the build using the default command `wp-scripts build` (also applies to `start`) in addition to the JavaScript file `index.js` generated in the `build` folder, you should see two more files:
 
 1. `index.css` – all imported CSS files are bundled into one chunk named after the entry point, which defaults to `index.js`, and thus the file created becomes `index.css`. This is for styles used only in the editor.
-2. `style-index.css` – imported `style.css` file(s) (applies to SASS and SCSS extensions) get bundled into one `style-index.css` file that is meant to be used both on the front-end and in the editor.
+2. `style-index.css` – imported `style.css` file(s) (applies to PCSS, SASS and SCSS extensions) get bundled into one `style-index.css` file that is meant to be used both on the front-end and in the editor.
 
 You can also have multiple entry points as described in the docs for the script:
 
@@ -678,8 +776,8 @@ module.exports = {
 
 If you follow this approach, please, be aware that:
 
-- You should keep using the `wp-scripts` commands (`start` and `build`). Do not use `webpack` directly.
-- Future versions of this package may change what webpack and Babel plugins we bundle, default configs, etc. Should those changes be necessary, they will be registered in the [package’s CHANGELOG](https://github.com/WordPress/gutenberg/blob/HEAD/packages/scripts/CHANGELOG.md), so make sure to read it before upgrading.
+-   You should keep using the `wp-scripts` commands (`start` and `build`). Do not use `webpack` directly.
+-   Future versions of this package may change what webpack and Babel plugins we bundle, default configs, etc. Should those changes be necessary, they will be registered in the [package’s CHANGELOG](https://github.com/WordPress/gutenberg/blob/HEAD/packages/scripts/CHANGELOG.md), so make sure to read it before upgrading.
 
 ## Contributing to this package
 
diff --git a/packages/scripts/config/.stylelintrc.json b/packages/scripts/config/.stylelintrc.json
index 1cfc8fc10ea564..96c4ccca749050 100644
--- a/packages/scripts/config/.stylelintrc.json
+++ b/packages/scripts/config/.stylelintrc.json
@@ -1,5 +1,5 @@
 {
-	"extends": "@wordpress/stylelint-config/scss",
+	"extends": "@wordpress/stylelint-config/scss-stylistic",
 	"rules": {
 		"selector-class-pattern": null
 	}
diff --git a/packages/scripts/config/jest-environment-puppeteer/global.js b/packages/scripts/config/jest-environment-puppeteer/global.js
index cbac21951c700e..76cd7bb5126996 100644
--- a/packages/scripts/config/jest-environment-puppeteer/global.js
+++ b/packages/scripts/config/jest-environment-puppeteer/global.js
@@ -30,8 +30,8 @@ const chalk = require( 'chalk' );
 const { readConfig, getPuppeteer } = require( './config' );
 
 let browser;
-
 let didAlreadyRunInWatchMode = false;
+let servers = [];
 
 async function setup( jestConfig = {} ) {
 	const config = await readConfig();
@@ -45,13 +45,15 @@ async function setup( jestConfig = {} ) {
 
 	// If we are in watch mode, - only setupServer() once.
 	if ( jestConfig.watch || jestConfig.watchAll ) {
-		if ( didAlreadyRunInWatchMode ) return;
+		if ( didAlreadyRunInWatchMode ) {
+			return;
+		}
 		didAlreadyRunInWatchMode = true;
 	}
 
 	if ( config.server ) {
 		try {
-			await setupServer( config.server );
+			servers = await setupServer( config.server );
 		} catch ( error ) {
 			const { error: printError } = console;
 			if ( error.code === ERROR_TIMEOUT ) {
@@ -89,7 +91,7 @@ async function teardown( jestConfig = {} ) {
 	}
 
 	if ( ! jestConfig.watch && ! jestConfig.watchAll ) {
-		await teardownServer();
+		await teardownServer( servers );
 	}
 }
 
diff --git a/packages/scripts/config/jest-environment-puppeteer/index.js b/packages/scripts/config/jest-environment-puppeteer/index.js
index 38f50b0e284610..9e903ab498e1df 100644
--- a/packages/scripts/config/jest-environment-puppeteer/index.js
+++ b/packages/scripts/config/jest-environment-puppeteer/index.js
@@ -19,7 +19,7 @@
 const path = require( 'path' );
 const { writeFile, mkdir } = require( 'fs' ).promises;
 const filenamify = require( 'filenamify' );
-const NodeEnvironment = require( 'jest-environment-node' );
+const NodeEnvironment = require( 'jest-environment-node' ).default;
 const chalk = require( 'chalk' );
 
 /**
@@ -42,21 +42,13 @@ const KEYS = {
 	ENTER: '\r',
 };
 
-const root = process.env.GITHUB_WORKSPACE || process.cwd();
-const ARTIFACTS_PATH = path.resolve(
-	root,
-	process.env.WP_ARTIFACTS_PATH || 'artifacts'
-);
+const { WP_ARTIFACTS_PATH } = process.env;
 
 class PuppeteerEnvironment extends NodeEnvironment {
 	// Jest is not available here, so we have to reverse engineer
 	// the setTimeout function, see https://github.com/facebook/jest/blob/v23.1.0/packages/jest-runtime/src/index.js#L823
 	setTimeout( timeout ) {
-		if ( this.global.jasmine ) {
-			this.global.jasmine.DEFAULT_TIMEOUT_INTERVAL = timeout;
-		} else {
-			this.global[ Symbol.for( 'TEST_TIMEOUT_SYMBOL' ) ] = timeout;
-		}
+		this.global[ Symbol.for( 'TEST_TIMEOUT_SYMBOL' ) ] = timeout;
 	}
 
 	async setup() {
@@ -176,7 +168,7 @@ class PuppeteerEnvironment extends NodeEnvironment {
 		await this.global.jestPuppeteer.resetBrowser();
 
 		try {
-			await mkdir( ARTIFACTS_PATH, { recursive: true } );
+			await mkdir( WP_ARTIFACTS_PATH, { recursive: true } );
 		} catch ( err ) {
 			if ( err.code !== 'EEXIST' ) {
 				throw err;
@@ -210,11 +202,11 @@ class PuppeteerEnvironment extends NodeEnvironment {
 			replacement: '-',
 		} );
 		await writeFile(
-			path.join( ARTIFACTS_PATH, `${ fileName }-snapshot.html` ),
+			path.join( WP_ARTIFACTS_PATH, `${ fileName }-snapshot.html` ),
 			await this.global.page.content()
 		);
 		await this.global.page.screenshot( {
-			path: path.join( ARTIFACTS_PATH, `${ fileName }.jpg` ),
+			path: path.join( WP_ARTIFACTS_PATH, `${ fileName }.jpg` ),
 		} );
 	}
 
diff --git a/packages/scripts/config/jest-github-actions-reporter/index.js b/packages/scripts/config/jest-github-actions-reporter/index.js
index 9a8f292beb80ce..8496373c38971f 100644
--- a/packages/scripts/config/jest-github-actions-reporter/index.js
+++ b/packages/scripts/config/jest-github-actions-reporter/index.js
@@ -35,7 +35,9 @@ class GithubActionsReporter {
 }
 
 function getMessages( results ) {
-	if ( ! results ) return [];
+	if ( ! results ) {
+		return [];
+	}
 
 	return results.reduce(
 		flatMap( ( { testFilePath, testResults } ) =>
diff --git a/packages/scripts/config/playwright.config.js b/packages/scripts/config/playwright.config.js
new file mode 100644
index 00000000000000..03ccbb848554b2
--- /dev/null
+++ b/packages/scripts/config/playwright.config.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const { defineConfig, devices } = require( '@playwright/test' );
+
+process.env.WP_ARTIFACTS_PATH ??= path.join( process.cwd(), 'artifacts' );
+process.env.STORAGE_STATE_PATH ??= path.join(
+	process.env.WP_ARTIFACTS_PATH,
+	'storage-states/admin.json'
+);
+
+const config = defineConfig( {
+	reporter: process.env.CI ? [ [ 'github' ] ] : [ [ 'list' ] ],
+	forbidOnly: !! process.env.CI,
+	// fullyParallel: false,
+	workers: 1,
+	retries: process.env.CI ? 2 : 0,
+	timeout: parseInt( process.env.TIMEOUT || '', 10 ) || 100_000, // Defaults to 100 seconds.
+	// Don't report slow test "files", as we will be running our tests in serial.
+	reportSlowTests: null,
+	testDir: './specs',
+	outputDir: path.join( process.env.WP_ARTIFACTS_PATH, 'test-results' ),
+	snapshotPathTemplate:
+		'{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}',
+	globalSetup: require.resolve( './playwright/global-setup.js' ),
+	use: {
+		baseURL: process.env.WP_BASE_URL || 'http://localhost:8889',
+		headless: true,
+		viewport: {
+			width: 960,
+			height: 700,
+		},
+		ignoreHTTPSErrors: true,
+		locale: 'en-US',
+		contextOptions: {
+			reducedMotion: 'reduce',
+			strictSelectors: true,
+		},
+		storageState: process.env.STORAGE_STATE_PATH,
+		actionTimeout: 10_000, // 10 seconds.
+		trace: 'retain-on-failure',
+		screenshot: 'only-on-failure',
+		video: 'on-first-retry',
+	},
+	webServer: {
+		command: 'npm run wp-env start',
+		port: 8889,
+		timeout: 120_000, // 120 seconds.
+		reuseExistingServer: true,
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices[ 'Desktop Chrome' ] },
+		},
+	],
+} );
+
+module.exports = config;
diff --git a/packages/scripts/config/playwright/global-setup.js b/packages/scripts/config/playwright/global-setup.js
new file mode 100644
index 00000000000000..0a45d7335590a4
--- /dev/null
+++ b/packages/scripts/config/playwright/global-setup.js
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+const { request } = require( '@playwright/test' );
+
+/**
+ * WordPress dependencies
+ */
+const { RequestUtils } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ *
+ * @param {import('@playwright/test').FullConfig} config
+ * @return {Promise<void>}
+ */
+async function globalSetup( config ) {
+	const { storageState, baseURL } = config.projects[ 0 ].use;
+	const storageStatePath =
+		typeof storageState === 'string' ? storageState : undefined;
+
+	const requestContext = await request.newContext( {
+		baseURL,
+	} );
+
+	const requestUtils = new RequestUtils( requestContext, {
+		storageStatePath,
+	} );
+
+	// Authenticate and save the storageState to disk.
+	await requestUtils.setupRest();
+
+	await requestContext.dispose();
+}
+
+module.exports = globalSetup;
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',
+		],
 	},
 };
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index 5347e126827cf7..1829da5cdc15da 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -4,11 +4,15 @@
 const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
 const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const webpack = require( 'webpack' );
 const browserslist = require( 'browserslist' );
 const MiniCSSExtractPlugin = require( 'mini-css-extract-plugin' );
-const { basename, dirname, resolve } = require( 'path' );
+const { basename, dirname, relative, resolve, sep } = require( 'path' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
+const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
+const { realpathSync } = require( 'fs' );
+const { sync: glob } = require( 'fast-glob' );
 
 /**
  * WordPress dependencies
@@ -27,7 +31,11 @@ const {
 	hasPostCSSConfig,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getAsBooleanFromENV,
+	getBlockJsonModuleFields,
+	getBlockJsonScriptFields,
+	fromProjectRoot,
+	PhpFilePathsPlugin,
 } = require( '../utils' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -37,9 +45,9 @@ if ( ! browserslist.findConfig( '.' ) ) {
 	target += ':' + fromConfigRoot( '.browserslistrc' );
 }
 const hasReactFastRefresh = hasArgInCLI( '--hot' ) && ! isProduction;
-
-// Get paths of the `render` props included in `block.json` files
-const renderPaths = getRenderPropPaths();
+const hasExperimentalModulesFlag = getAsBooleanFromENV(
+	'WP_EXPERIMENTAL_MODULES'
+);
 
 const cssLoaders = [
 	{
@@ -48,6 +56,7 @@ const cssLoaders = [
 	{
 		loader: require.resolve( 'css-loader' ),
 		options: {
+			importLoaders: 1,
 			sourceMap: ! isProduction,
 			modules: {
 				auto: true,
@@ -88,12 +97,13 @@ const cssLoaders = [
 	},
 ];
 
-const config = {
+/** @type {webpack.Configuration} */
+const baseConfig = {
 	mode,
 	target,
-	entry: getWebpackEntryPoints,
 	output: {
 		filename: '[name].js',
+		chunkFilename: '[name].js?ver=[chunkhash]',
 		path: resolve( process.cwd(), 'build' ),
 	},
 	resolve: {
@@ -105,11 +115,12 @@ const config = {
 	optimization: {
 		// Only concatenate modules in production, when not analyzing bundles.
 		concatenateModules: isProduction && ! process.env.WP_BUNDLE_ANALYZER,
+		runtimeChunk: hasReactFastRefresh && 'single',
 		splitChunks: {
 			cacheGroups: {
 				style: {
 					type: 'css/mini-extract',
-					test: /[\\/]style(\.module)?\.(sc|sa|c)ss$/,
+					test: /[\\/]style(\.module)?\.(pc|sc|sa|c)ss$/,
 					chunks: 'all',
 					enforce: true,
 					name( _, chunks, cacheGroupKey ) {
@@ -143,7 +154,7 @@ const config = {
 	module: {
 		rules: [
 			{
-				test: /\.(j|t)sx?$/,
+				test: /\.m?(j|t)sx?$/,
 				exclude: /node_modules/,
 				use: [
 					{
@@ -180,6 +191,10 @@ const config = {
 				test: /\.css$/,
 				use: cssLoaders,
 			},
+			{
+				test: /\.pcss$/,
+				use: cssLoaders,
+			},
 			{
 				test: /\.(sc|sa)ss$/,
 				use: [
@@ -200,7 +215,7 @@ const config = {
 			},
 			{
 				test: /\.svg$/,
-				issuer: /\.(sc|sa|c)ss$/,
+				issuer: /\.(pc|sc|sa|c)ss$/,
 				type: 'asset/inline',
 			},
 			{
@@ -219,16 +234,76 @@ const config = {
 			},
 		],
 	},
+	stats: {
+		children: false,
+	},
+};
+
+// WP_DEVTOOL global variable controls how source maps are generated.
+// See: https://webpack.js.org/configuration/devtool/#devtool.
+if ( process.env.WP_DEVTOOL ) {
+	baseConfig.devtool = process.env.WP_DEVTOOL;
+}
+
+if ( ! isProduction ) {
+	// Set default sourcemap mode if it wasn't set by WP_DEVTOOL.
+	baseConfig.devtool = baseConfig.devtool || 'source-map';
+}
+
+// Add source-map-loader if devtool is set, whether in dev mode or not.
+if ( baseConfig.devtool ) {
+	baseConfig.module.rules.unshift( {
+		test: /\.(j|t)sx?$/,
+		exclude: [ /node_modules/ ],
+		use: require.resolve( 'source-map-loader' ),
+		enforce: 'pre',
+	} );
+}
+
+/** @type {webpack.Configuration} */
+const scriptConfig = {
+	...baseConfig,
+
+	entry: getWebpackEntryPoints( 'script' ),
+
+	devServer: isProduction
+		? undefined
+		: {
+				devMiddleware: {
+					writeToDisk: true,
+				},
+				allowedHosts: 'auto',
+				host: 'localhost',
+				port: 8887,
+				proxy: {
+					'/build': {
+						pathRewrite: {
+							'^/build': '',
+						},
+					},
+				},
+		  },
+
 	plugins: [
-		// During rebuilds, all webpack assets that are not used anymore will be
-		// removed automatically. There is an exception added in watch mode for
-		// fonts and images. It is a known limitations:
-		// https://github.com/johnagan/clean-webpack-plugin/issues/159
-		new CleanWebpackPlugin( {
-			cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ],
-			// Prevent it from deleting webpack assets during builds that have
-			// multiple configurations returned in the webpack config.
-			cleanStaleWebpackAssets: false,
+		new webpack.DefinePlugin( {
+			// Inject the `SCRIPT_DEBUG` global, used for development features flagging.
+			'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ),
+			SCRIPT_DEBUG: JSON.stringify( ! isProduction ),
+		} ),
+
+		// If we run a modules build, the 2 compilations can "clean" each other's output
+		// Prevent the cleaning from happening
+		! hasExperimentalModulesFlag &&
+			new CleanWebpackPlugin( {
+				cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ],
+				// Prevent it from deleting webpack assets during builds that have
+				// multiple configurations returned in the webpack config.
+				cleanStaleWebpackAssets: false,
+			} ),
+
+		new PhpFilePathsPlugin( {
+			context: getWordPressSrcDirectory(),
+			props: [ 'render', 'variations' ],
 		} ),
 		new CopyWebpackPlugin( {
 			patterns: [
@@ -238,27 +313,59 @@ const config = {
 					noErrorOnMissing: true,
 					transform( content, absoluteFrom ) {
 						const convertExtension = ( path ) => {
-							return path.replace( /\.(j|t)sx?$/, '.js' );
+							return path.replace( /\.m?(j|t)sx?$/, '.js' );
 						};
 
 						if ( basename( absoluteFrom ) === 'block.json' ) {
 							const blockJson = JSON.parse( content.toString() );
-							[ 'viewScript', 'script', 'editorScript' ].forEach(
-								( key ) => {
-									if ( Array.isArray( blockJson[ key ] ) ) {
-										blockJson[ key ] =
-											blockJson[ key ].map(
-												convertExtension
-											);
-									} else if (
-										typeof blockJson[ key ] === 'string'
-									) {
-										blockJson[ key ] = convertExtension(
-											blockJson[ key ]
-										);
+
+							[
+								getBlockJsonScriptFields( blockJson ),
+								getBlockJsonModuleFields( blockJson ),
+							].forEach( ( fields ) => {
+								if ( fields ) {
+									for ( const [
+										key,
+										value,
+									] of Object.entries( fields ) ) {
+										if ( Array.isArray( value ) ) {
+											blockJson[ key ] =
+												value.map( convertExtension );
+										} else if (
+											typeof value === 'string'
+										) {
+											blockJson[ key ] =
+												convertExtension( value );
+										}
 									}
 								}
-							);
+							} );
+
+							if ( hasReactFastRefresh ) {
+								// Prepends the file reference to the shared runtime chunk to every script type defined for the block.
+								const runtimePath = relative(
+									dirname( absoluteFrom ),
+									fromProjectRoot(
+										getWordPressSrcDirectory() +
+											sep +
+											'runtime.js'
+									)
+								);
+								const fields =
+									getBlockJsonScriptFields( blockJson );
+								for ( const [ fieldName ] of Object.entries(
+									fields
+								) ) {
+									blockJson[ fieldName ] = [
+										`file:${ runtimePath }`,
+										...( Array.isArray(
+											blockJson[ fieldName ]
+										)
+											? blockJson[ fieldName ]
+											: [ blockJson[ fieldName ] ] ),
+									];
+								}
+							}
 
 							return JSON.stringify( blockJson, null, 2 );
 						}
@@ -273,7 +380,9 @@ const config = {
 					filter: ( filepath ) => {
 						return (
 							process.env.WP_COPY_PHP_FILES_TO_DIST ||
-							renderPaths.includes( filepath )
+							PhpFilePathsPlugin.paths.includes(
+								realpathSync( filepath ).replace( /\\/g, '/' )
+							)
 						);
 					},
 				},
@@ -283,7 +392,13 @@ const config = {
 		// bundle content as a convenient interactive zoomable treemap.
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 		// MiniCSSExtractPlugin to extract the CSS thats gets imported into JavaScript.
-		new MiniCSSExtractPlugin( { filename: '[name].css' } ),
+		new MiniCSSExtractPlugin( {
+			filename: '[name].css',
+		} ),
+		// RtlCssPlugin to generate RTL CSS files.
+		new RtlCssPlugin( {
+			filename: `[name]-rtl.css`,
+		} ),
 		// React Fast Refresh.
 		hasReactFastRefresh && new ReactRefreshWebpackPlugin(),
 		// WP_NO_EXTERNALS global variable controls whether scripts' assets get
@@ -291,36 +406,85 @@ const config = {
 		! process.env.WP_NO_EXTERNALS &&
 			new DependencyExtractionWebpackPlugin(),
 	].filter( Boolean ),
-	stats: {
-		children: false,
-	},
 };
 
-if ( ! isProduction ) {
-	// WP_DEVTOOL global variable controls how source maps are generated.
-	// See: https://webpack.js.org/configuration/devtool/#devtool.
-	config.devtool = process.env.WP_DEVTOOL || 'source-map';
-	config.module.rules.unshift( {
-		test: /\.(j|t)sx?$/,
-		exclude: [ /node_modules/ ],
-		use: require.resolve( 'source-map-loader' ),
-		enforce: 'pre',
-	} );
-	config.devServer = {
-		devMiddleware: {
-			writeToDisk: true,
+if ( hasExperimentalModulesFlag ) {
+	/**
+	 * Add block.json files to compilation to ensure changes trigger rebuilds when watching
+	 */
+	class BlockJsonDependenciesPlugin {
+		constructor() {
+			/** @type {ReadonlyArray<string>} */
+			this.blockJsonFiles = glob( '**/block.json', {
+				absolute: true,
+				cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+			} );
+		}
+
+		/**
+		 * Apply the plugin
+		 * @param {webpack.Compiler} compiler the compiler instance
+		 * @return {void}
+		 */
+		apply( compiler ) {
+			if ( this.blockJsonFiles.length ) {
+				compiler.hooks.compilation.tap(
+					'BlockJsonDependenciesPlugin',
+					( compilation ) => {
+						compilation.fileDependencies.addAll(
+							this.blockJsonFiles
+						);
+					}
+				);
+			}
+		}
+	}
+
+	/** @type {webpack.Configuration} */
+	const moduleConfig = {
+		...baseConfig,
+
+		entry: getWebpackEntryPoints( 'module' ),
+
+		experiments: {
+			...baseConfig.experiments,
+			outputModule: true,
 		},
-		allowedHosts: 'auto',
-		host: 'localhost',
-		port: 8887,
-		proxy: {
-			'/build': {
-				pathRewrite: {
-					'^/build': '',
-				},
+
+		output: {
+			...baseConfig.output,
+			module: true,
+			chunkFormat: 'module',
+			environment: {
+				...baseConfig.output.environment,
+				module: true,
+			},
+			library: {
+				...baseConfig.output.library,
+				type: 'module',
 			},
 		},
+
+		plugins: [
+			new webpack.DefinePlugin( {
+				// Inject the `SCRIPT_DEBUG` global, used for development features flagging.
+				'globalThis.SCRIPT_DEBUG': JSON.stringify( ! isProduction ),
+				SCRIPT_DEBUG: JSON.stringify( ! isProduction ),
+			} ),
+			// The WP_BUNDLE_ANALYZER global variable enables a utility that represents
+			// bundle content as a convenient interactive zoomable treemap.
+			process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
+			// MiniCSSExtractPlugin to extract the CSS thats gets imported into JavaScript.
+			new MiniCSSExtractPlugin( { filename: '[name].css' } ),
+			// WP_NO_EXTERNALS global variable controls whether scripts' assets get
+			// generated, and the default externals set.
+			! process.env.WP_NO_EXTERNALS &&
+				new DependencyExtractionWebpackPlugin(),
+			new BlockJsonDependenciesPlugin(),
+		].filter( Boolean ),
 	};
-}
 
-module.exports = config;
+	module.exports = [ scriptConfig, moduleConfig ];
+} else {
+	module.exports = scriptConfig;
+}
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 110b4da106246b..07d4dd27e4a450 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "24.6.0",
+	"version": "30.6.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,8 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14",
-		"npm": ">=6.14.4"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"bin",
@@ -32,65 +32,71 @@
 		"wp-scripts": "./bin/wp-scripts.js"
 	},
 	"dependencies": {
-		"@babel/core": "^7.16.0",
-		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.2",
-		"@svgr/webpack": "^6.2.1",
-		"@wordpress/babel-preset-default": "file:../babel-preset-default",
-		"@wordpress/browserslist-config": "file:../browserslist-config",
-		"@wordpress/dependency-extraction-webpack-plugin": "file:../dependency-extraction-webpack-plugin",
-		"@wordpress/eslint-plugin": "file:../eslint-plugin",
-		"@wordpress/jest-preset-default": "file:../jest-preset-default",
-		"@wordpress/npm-package-json-lint-config": "file:../npm-package-json-lint-config",
-		"@wordpress/postcss-plugins-preset": "file:../postcss-plugins-preset",
-		"@wordpress/prettier-config": "file:../prettier-config",
-		"@wordpress/stylelint-config": "file:../stylelint-config",
+		"@babel/core": "7.25.7",
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+		"@svgr/webpack": "^8.0.1",
+		"@wordpress/babel-preset-default": "*",
+		"@wordpress/browserslist-config": "*",
+		"@wordpress/dependency-extraction-webpack-plugin": "*",
+		"@wordpress/e2e-test-utils-playwright": "*",
+		"@wordpress/eslint-plugin": "*",
+		"@wordpress/jest-preset-default": "*",
+		"@wordpress/npm-package-json-lint-config": "*",
+		"@wordpress/postcss-plugins-preset": "*",
+		"@wordpress/prettier-config": "*",
+		"@wordpress/stylelint-config": "*",
 		"adm-zip": "^0.5.9",
-		"babel-jest": "^27.4.5",
-		"babel-loader": "^8.2.3",
-		"browserslist": "^4.17.6",
+		"babel-jest": "29.7.0",
+		"babel-loader": "9.2.1",
+		"browserslist": "^4.21.10",
 		"chalk": "^4.0.0",
 		"check-node-version": "^4.1.0",
 		"clean-webpack-plugin": "^3.0.0",
 		"copy-webpack-plugin": "^10.2.0",
 		"cross-spawn": "^5.1.0",
 		"css-loader": "^6.2.0",
-		"cssnano": "^5.0.7",
+		"cssnano": "^6.0.1",
 		"cwd": "^0.10.0",
 		"dir-glob": "^3.0.1",
 		"eslint": "^8.3.0",
 		"expect-puppeteer": "^4.4.0",
 		"fast-glob": "^3.2.7",
 		"filenamify": "^4.2.0",
-		"jest": "^27.4.5",
-		"jest-dev-server": "^6.0.2",
-		"jest-environment-node": "^27.4.4",
+		"jest": "^29.6.2",
+		"jest-dev-server": "^9.0.1",
+		"jest-environment-jsdom": "^29.6.2",
+		"jest-environment-node": "^29.6.2",
+		"json2php": "^0.0.9",
 		"markdownlint-cli": "^0.31.1",
 		"merge-deep": "^3.0.3",
-		"mini-css-extract-plugin": "^2.5.1",
+		"mini-css-extract-plugin": "^2.9.2",
 		"minimist": "^1.2.0",
-		"npm-package-json-lint": "^5.0.0",
+		"npm-package-json-lint": "^6.4.0",
 		"npm-packlist": "^3.0.0",
 		"postcss": "^8.4.5",
 		"postcss-loader": "^6.2.1",
-		"prettier": "npm:wp-prettier@2.6.2",
-		"puppeteer-core": "^13.2.0",
-		"react-refresh": "^0.10.0",
+		"prettier": "npm:wp-prettier@3.0.3",
+		"puppeteer-core": "^23.1.0",
+		"react-refresh": "^0.14.0",
 		"read-pkg-up": "^7.0.1",
 		"resolve-bin": "^0.4.0",
-		"sass": "^1.35.2",
-		"sass-loader": "^12.1.0",
+		"rtlcss-webpack-plugin": "^4.0.7",
+		"sass": "^1.50.1",
+		"sass-loader": "^16.0.3",
+		"schema-utils": "^4.2.0",
 		"source-map-loader": "^3.0.0",
-		"stylelint": "^14.2.0",
-		"terser-webpack-plugin": "^5.1.4",
+		"stylelint": "^16.8.2",
+		"terser-webpack-plugin": "^5.3.10",
 		"url-loader": "^4.1.1",
-		"webpack": "^5.47.1",
-		"webpack-bundle-analyzer": "^4.4.2",
-		"webpack-cli": "^4.9.1",
-		"webpack-dev-server": "^4.4.0"
+		"webpack": "^5.97.0",
+		"webpack-bundle-analyzer": "^4.9.1",
+		"webpack-cli": "^5.1.4",
+		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"@playwright/test": "^1.48.1",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/scripts/scripts/build-blocks-manifest.js b/packages/scripts/scripts/build-blocks-manifest.js
new file mode 100644
index 00000000000000..7138505de59ed6
--- /dev/null
+++ b/packages/scripts/scripts/build-blocks-manifest.js
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' );
+const path = require( 'path' );
+const { sync: glob } = require( 'fast-glob' );
+const json2php = require( 'json2php' );
+const chalk = require( 'chalk' );
+
+/**
+ * Internal dependencies
+ */
+const { getArgFromCLI } = require( '../utils' );
+
+// Set default paths
+const defaultInputDir = 'build';
+const defaultOutputFile = path.join( 'build', 'blocks-manifest.php' );
+
+// Parse command line arguments
+const inputDir = getArgFromCLI( '--input' ) || defaultInputDir;
+const outputFile = getArgFromCLI( '--output' ) || defaultOutputFile;
+
+const resolvedInputDir = path.resolve( process.cwd(), inputDir );
+if ( ! fs.existsSync( resolvedInputDir ) ) {
+	const ERROR = chalk.reset.inverse.bold.red( ' ERROR ' );
+	process.stdout.write(
+		`${ ERROR } Input directory "${ inputDir }" does not exist.\n`
+	);
+	process.exit( 1 );
+}
+
+// Find all block.json files
+const blockJsonFiles = glob( './**/block.json', {
+	cwd: resolvedInputDir,
+	absolute: true,
+} );
+
+const blocks = {};
+
+blockJsonFiles.forEach( ( file ) => {
+	const blockJson = JSON.parse( fs.readFileSync( file, 'utf8' ) );
+	const directoryName = path.basename( path.dirname( file ) );
+	blocks[ directoryName ] = blockJson;
+} );
+
+if ( Object.keys( blocks ).length === 0 ) {
+	const ERROR = chalk.reset.inverse.bold.red( ' ERROR ' );
+	process.stdout.write(
+		`${ ERROR } No block.json files were found in path: ${ inputDir }.\n`
+	);
+	process.exit( 1 );
+}
+
+// Generate PHP content
+const printer = json2php.make( { linebreak: '\n', indent: '\t' } );
+const phpContent = `<?php
+// This file is generated. Do not modify it manually.
+return ${ printer( blocks ) };
+`;
+
+// Ensure output directory exists
+const outputDir = path.dirname( outputFile );
+if ( ! fs.existsSync( outputDir ) ) {
+	fs.mkdirSync( outputDir, { recursive: true } );
+}
+
+// Write the file
+fs.writeFileSync( outputFile, phpContent );
+
+process.stdout.write(
+	`Block metadata PHP file generated at: ${ outputFile }\n`
+);
diff --git a/packages/scripts/scripts/build.js b/packages/scripts/scripts/build.js
index 714038fd80ee4e..0eef2afb451bfc 100644
--- a/packages/scripts/scripts/build.js
+++ b/packages/scripts/scripts/build.js
@@ -12,6 +12,10 @@ const EXIT_ERROR_CODE = 1;
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
+if ( hasArgInCLI( '--experimental-modules' ) ) {
+	process.env.WP_EXPERIMENTAL_MODULES = true;
+}
+
 if ( hasArgInCLI( '--webpack-no-externals' ) ) {
 	process.env.WP_NO_EXTERNALS = true;
 }
diff --git a/packages/scripts/scripts/check-licenses.js b/packages/scripts/scripts/check-licenses.js
index ad34c06e268a39..40537cf4880fce 100644
--- a/packages/scripts/scripts/check-licenses.js
+++ b/packages/scripts/scripts/check-licenses.js
@@ -2,13 +2,12 @@
  * External dependencies
  */
 const spawn = require( 'cross-spawn' );
-const { existsSync, readFileSync } = require( 'fs' );
-const chalk = require( 'chalk' );
 
 /**
  * Internal dependencies
  */
 const { getArgFromCLI, hasArgInCLI } = require( '../utils' );
+const { checkDepsInTree } = require( '../utils/license' );
 
 /*
  * WARNING: Changes to this file may inadvertently cause us to distribute code that
@@ -19,9 +18,6 @@ const { getArgFromCLI, hasArgInCLI } = require( '../utils' );
  * reviewed and approved.
  */
 
-const ERROR = chalk.reset.inverse.bold.red( ' ERROR ' );
-const WARNING = chalk.reset.inverse.bold.yellow( ' WARNING ' );
-
 const prod = hasArgInCLI( '--prod' ) || hasArgInCLI( '--production' );
 const dev = hasArgInCLI( '--dev' ) || hasArgInCLI( '--development' );
 const gpl2 = hasArgInCLI( '--gpl2' );
@@ -33,141 +29,6 @@ const ignored = hasArgInCLI( '--ignore' )
 			.map( ( moduleName ) => moduleName.trim() )
 	: [];
 
-/*
- * A list of license strings that we've found to be GPL2 compatible.
- *
- * Note the strings with "AND" in them at the bottom: these should only be added when
- * all the licenses in that string are GPL2 compatible.
- */
-const gpl2CompatibleLicenses = [
-	'0BSD',
-	'Apache-2.0 WITH LLVM-exception',
-	'Artistic-2.0',
-	'BSD-2-Clause',
-	'BSD-3-Clause-W3C',
-	'BSD-3-Clause',
-	'BSD',
-	'CC-BY-4.0',
-	'CC0-1.0',
-	'GPL-2.0-or-later',
-	'GPL-2.0',
-	'GPL-2.0+',
-	'ISC',
-	'LGPL-2.1',
-	'MIT',
-	'MIT/X11',
-	'MPL-2.0',
-	'ODC-By-1.0',
-	'Public Domain',
-	'Unlicense',
-	'W3C-20150513',
-	'WTFPL',
-	'Zlib',
-];
-
-/*
- * A list of OSS license strings that aren't GPL2 compatible.
- *
- * We're cool with using packages that are licensed under any of these if we're not
- * distributing them (for example, build tools), but we can't included them in a release.
- */
-const otherOssLicenses = [
-	'Apache-2.0',
-	'Apache License, Version 2.0',
-	'CC-BY-3.0',
-	'CC-BY-SA-2.0',
-	'LGPL',
-	'Python-2.0',
-];
-
-const licenses = [
-	...gpl2CompatibleLicenses,
-	...( gpl2 ? [] : otherOssLicenses ),
-];
-
-/*
- * Some packages don't included a license string in their package.json file, but they
- * do have a license listed elsewhere. These files are checked for matching license strings.
- */
-const licenseFiles = [
-	'LICENCE',
-	'license',
-	'LICENSE',
-	'LICENSE.md',
-	'LICENSE.txt',
-	'LICENSE-MIT',
-	'MIT-LICENSE.txt',
-	'Readme.md',
-	'README.md',
-];
-
-/*
- * When searching through files for licensing information, these are the strings we look for,
- * and their matching license.
- */
-const licenseFileStrings = {
-	'Apache-2.0': [ 'Licensed under the Apache License, Version 2.0' ],
-	BSD: [
-		'Redistributions in binary form must reproduce the above copyright notice,',
-	],
-	'BSD-3-Clause-W3C': [ 'W3C 3-clause BSD License' ],
-	MIT: [
-		'Permission is hereby granted, free of charge,',
-		'## License\n\nMIT',
-		'## License\n\n  MIT',
-	],
-};
-
-/**
- * Check if a license string matches the given license.
- *
- * The license string can be a single license, or an SPDX-compatible "OR" license string.
- * eg, "(MIT OR Zlib)".
- *
- * @param {string} allowedLicense The license that's allowed.
- * @param {string} licenseType    The license string to check.
- *
- * @return {boolean} true if the licenseType matches the allowedLicense, false if it doesn't.
- */
-const checkLicense = ( allowedLicense, licenseType ) => {
-	if ( ! licenseType ) {
-		return false;
-	}
-
-	// Some licenses have unusual capitalisation in them.
-	const formattedAllowedLicense = allowedLicense.toLowerCase();
-	const formattedlicenseType = licenseType.toLowerCase();
-
-	if ( formattedAllowedLicense === formattedlicenseType ) {
-		return true;
-	}
-
-	// We can skip the parsing below if there isn't an 'OR' in the license.
-	if ( ! formattedlicenseType.includes( ' or ' ) ) {
-		return false;
-	}
-
-	/*
-	 * In order to do a basic parse of SPDX-compatible "OR" license strings, we:
-	 * - Remove surrounding brackets: "(mit or zlib)" -> "mit or zlib"
-	 * - Split it into an array: "mit or zlib" -> [ "mit", "zlib" ]
-	 * - Trim any remaining whitespace from each element
-	 */
-	const subLicenseTypes = formattedlicenseType
-		.replace( /^\(*/g, '' )
-		.replace( /\)*$/, '' )
-		.split( ' or ' )
-		.map( ( e ) => e.trim() );
-
-	// We can then check our array of licenses against the allowedLicense.
-	return (
-		undefined !==
-		subLicenseTypes.find( ( subLicenseType ) =>
-			checkLicense( allowedLicense, subLicenseType )
-		)
-	);
-};
-
 // Use `npm ls` to grab a list of all the packages.
 const child = spawn.sync(
 	'npm',
@@ -176,8 +37,8 @@ const child = spawn.sync(
 		'--json',
 		'--long',
 		'--all',
-		...( prod ? [ '--prod' ] : [] ),
-		...( dev ? [ '--dev' ] : [] ),
+		...( prod ? [ '--omit=dev' ] : [] ),
+		...( dev ? [ '--include=dev' ] : [] ),
 	],
 	/*
 	 * Set the max buffer to ~157MB, since the output size for
@@ -190,140 +51,4 @@ const result = JSON.parse( child.stdout.toString() );
 
 const topLevelDeps = result.dependencies;
 
-function traverseDepTree( deps ) {
-	for ( const key in deps ) {
-		const dep = deps[ key ];
-
-		if ( ignored.includes( dep.name ) ) {
-			return;
-		}
-
-		if ( ! dep.hasOwnProperty( 'path' ) ) {
-			if ( dep.hasOwnProperty( 'peerMissing' ) ) {
-				process.stdout.write(
-					`${ WARNING } Unable to locate path for missing peer dep ${ dep.name }@${ dep.version }. `
-				);
-			} else {
-				process.exitCode = 1;
-				process.stdout.write(
-					`${ ERROR } Unable to locate path for ${ dep.name }@${ dep.version }. `
-				);
-			}
-		} else if ( dep.missing ) {
-			process.stdout.write(
-				`${ WARNING } missing dep ${ dep.name }@${ dep.version }. `
-			);
-		} else {
-			checkDepLicense( dep.path );
-		}
-
-		if ( dep.hasOwnProperty( 'dependencies' ) ) {
-			traverseDepTree( dep.dependencies );
-		} else {
-			return;
-		}
-	}
-}
-
-function detectTypeFromLicenseFiles( path ) {
-	return licenseFiles.reduce( ( detectedType, licenseFile ) => {
-		if ( detectedType ) {
-			return detectedType;
-		}
-
-		const licensePath = path + '/' + licenseFile;
-
-		if ( existsSync( licensePath ) ) {
-			const licenseText = readFileSync( licensePath ).toString();
-
-			// Check if the file contains any of the strings in licenseFileStrings.
-			return Object.keys( licenseFileStrings ).reduce(
-				( stringDetectedType, licenseStringType ) => {
-					const licenseFileString =
-						licenseFileStrings[ licenseStringType ];
-
-					return licenseFileString.reduce(
-						( currentDetectedType, fileString ) => {
-							if ( licenseText.includes( fileString ) ) {
-								return licenseStringType;
-							}
-							return currentDetectedType;
-						},
-						stringDetectedType
-					);
-				},
-				detectedType
-			);
-		}
-		return detectedType;
-	}, false );
-}
-
-function checkDepLicense( path ) {
-	if ( ! path ) {
-		return;
-	}
-
-	const filename = path + '/package.json';
-	if ( ! existsSync( filename ) ) {
-		process.stdout.write( `Unable to locate package.json in ${ path }.` );
-		process.exit( 1 );
-	}
-
-	/*
-	 * The package.json format can be kind of weird. We allow for the following formats:
-	 * - { license: 'MIT' }
-	 * - { license: { type: 'MIT' } }
-	 * - { licenses: [ 'MIT', 'Zlib' ] }
-	 * - { licenses: [ { type: 'MIT' }, { type: 'Zlib' } ] }
-	 */
-	const packageInfo = require( filename );
-	const license =
-		packageInfo.license ||
-		( packageInfo.licenses &&
-			packageInfo.licenses.map( ( l ) => l.type || l ).join( ' OR ' ) );
-	let licenseType = typeof license === 'object' ? license.type : license;
-
-	// Check if the license we've detected is telling us to look in the license file, instead.
-	if (
-		licenseType &&
-		licenseFiles.find( ( licenseFile ) =>
-			licenseType.includes( licenseFile )
-		)
-	) {
-		licenseType = undefined;
-	}
-
-	if ( licenseType ) {
-		const allowed = licenses.find( ( allowedLicense ) =>
-			checkLicense( allowedLicense, licenseType )
-		);
-		if ( allowed ) {
-			return;
-		}
-	}
-
-	/*
-	 * If we haven't been able to detect a license in the package.json file,
-	 * or the type was invalid, try reading it from the files defined in
-	 * license files, instead.
-	 */
-	const detectedLicenseType = detectTypeFromLicenseFiles( path );
-	if ( ! licenseType && ! detectedLicenseType ) {
-		return;
-	}
-
-	// Now that we have a license to check, see if any of the allowed licenses match.
-	const allowed = licenses.find( ( allowedLicense ) =>
-		checkLicense( allowedLicense, detectedLicenseType )
-	);
-
-	if ( ! allowed ) {
-		process.exitCode = 1;
-		process.stdout.write(
-			`${ ERROR } Module ${ packageInfo.name } has an incompatible license '${ licenseType }'.\n`
-		);
-	}
-}
-
-traverseDepTree( topLevelDeps );
+checkDepsInTree( topLevelDeps, { ignored, gpl2 } );
diff --git a/packages/scripts/scripts/lint-style.js b/packages/scripts/scripts/lint-style.js
index f9b28fc765e2a2..103ec6d5f9d2b4 100644
--- a/packages/scripts/scripts/lint-style.js
+++ b/packages/scripts/scripts/lint-style.js
@@ -18,7 +18,7 @@ const {
 
 const args = getArgsFromCLI();
 
-const defaultFilesArgs = hasFileArgInCLI() ? [] : [ '**/*.{css,scss}' ];
+const defaultFilesArgs = hasFileArgInCLI() ? [] : [ '**/*.{css,pcss,scss}' ];
 
 // See: https://stylelint.io/user-guide/configuration
 const hasLintConfig =
diff --git a/packages/scripts/scripts/plugin-zip.js b/packages/scripts/scripts/plugin-zip.js
index b7c2a4df485c27..75ef36a4edeadc 100644
--- a/packages/scripts/scripts/plugin-zip.js
+++ b/packages/scripts/scripts/plugin-zip.js
@@ -10,13 +10,16 @@ const { stdout } = require( 'process' );
 /**
  * Internal dependencies
  */
-const { hasPackageProp, getPackageProp } = require( '../utils' );
+const { hasPackageProp, getPackageProp, getArgFromCLI } = require( '../utils' );
 
 const name = getPackageProp( 'name' );
 stdout.write( `Creating archive for \`${ name }\` plugin... 🎁\n\n` );
 const zip = new AdmZip();
-
+const zipRootFolderArg = getArgFromCLI( '--root-folder' );
+const noRootFolderArg = getArgFromCLI( '--no-root-folder' );
+let zipRootFolder = `${ name }/`;
 let files = [];
+
 if ( hasPackageProp( 'files' ) ) {
 	stdout.write(
 		'Using the `files` field from `package.json` to detect files:\n\n'
@@ -47,10 +50,30 @@ if ( hasPackageProp( 'files' ) ) {
 	);
 }
 
+if ( noRootFolderArg !== undefined ) {
+	zipRootFolder = '';
+	stdout.write( '  Plugin files will be zipped without a root folder.\n\n' );
+} else if ( zipRootFolderArg !== undefined ) {
+	const trimmedZipRootFolderArg =
+		typeof zipRootFolderArg === 'string' ? zipRootFolderArg.trim() : null;
+	if ( trimmedZipRootFolderArg === null ) {
+		stdout.write(
+			'Unable to create zip package: please provide a `--root-folder` name or use `--no-root-folder.`\n\n'
+		);
+		process.exit( 1 );
+	}
+	zipRootFolder = `${ trimmedZipRootFolderArg }/`;
+	stdout.write(
+		`  Adding the provided folder \`${ zipRootFolder }\` to the root of the package.\n\n`
+	);
+}
 files.forEach( ( file ) => {
 	stdout.write( `  Adding \`${ file }\`.\n` );
 	const zipDirectory = dirname( file );
-	zip.addLocalFile( file, zipDirectory !== '.' ? zipDirectory : '' );
+	zip.addLocalFile(
+		file,
+		zipRootFolder + ( zipDirectory !== '.' ? zipDirectory : '' )
+	);
 } );
 
 zip.writeZip( `./${ name }.zip` );
diff --git a/packages/scripts/scripts/start.js b/packages/scripts/scripts/start.js
index 862f11a4d60756..6296192ef302b1 100644
--- a/packages/scripts/scripts/start.js
+++ b/packages/scripts/scripts/start.js
@@ -10,6 +10,10 @@ const { sync: resolveBin } = require( 'resolve-bin' );
 const { getArgFromCLI, getWebpackArgs, hasArgInCLI } = require( '../utils' );
 const EXIT_ERROR_CODE = 1;
 
+if ( hasArgInCLI( '--experimental-modules' ) ) {
+	process.env.WP_EXPERIMENTAL_MODULES = true;
+}
+
 if ( hasArgInCLI( '--webpack-no-externals' ) ) {
 	process.env.WP_NO_EXTERNALS = true;
 }
@@ -30,11 +34,14 @@ process.env.WP_SRC_DIRECTORY = hasArgInCLI( '--webpack-src-dir' )
 	? getArgFromCLI( '--webpack-src-dir' )
 	: 'src';
 
-const { status } = spawn(
-	resolveBin( 'webpack' ),
-	[ hasArgInCLI( '--hot' ) ? 'serve' : 'watch', ...getWebpackArgs() ],
-	{
-		stdio: 'inherit',
-	}
-);
+const webpackArgs = getWebpackArgs();
+if ( hasArgInCLI( '--hot' ) ) {
+	webpackArgs.unshift( 'serve' );
+} else if ( ! hasArgInCLI( '--no-watch' ) ) {
+	webpackArgs.unshift( 'watch' );
+}
+
+const { status } = spawn( resolveBin( 'webpack' ), webpackArgs, {
+	stdio: 'inherit',
+} );
 process.exit( status === null ? EXIT_ERROR_CODE : status );
diff --git a/packages/scripts/scripts/test-e2e.js b/packages/scripts/scripts/test-e2e.js
index 00e3f9de0883dd..bbaa2e910929c0 100644
--- a/packages/scripts/scripts/test-e2e.js
+++ b/packages/scripts/scripts/test-e2e.js
@@ -12,7 +12,7 @@ process.on( 'unhandledRejection', ( err ) => {
 /**
  * External dependencies
  */
-/* eslint-disable-next-line jest/no-jest-import */
+const path = require( 'path' );
 const jest = require( 'jest' );
 const { sync: spawn } = require( 'cross-spawn' );
 
@@ -52,6 +52,7 @@ const config = configFile
 	? [ '--config', JSON.stringify( require( configFile ) ) ]
 	: [];
 
+// Force e2e tests to run serially, not in parallel. They test against a shared Docker instance
 const hasRunInBand = hasArgInCLI( '--runInBand' ) || hasArgInCLI( '-i' );
 const runInBand = ! hasRunInBand ? [ '--runInBand' ] : [];
 
@@ -77,6 +78,14 @@ Object.entries( configsMapping ).forEach( ( [ envKey, argName ] ) => {
 	}
 } );
 
+// Set the default artifacts path.
+if ( ! process.env.WP_ARTIFACTS_PATH ) {
+	process.env.WP_ARTIFACTS_PATH = path.resolve(
+		process.env.GITHUB_WORKSPACE || process.cwd(),
+		'artifacts'
+	);
+}
+
 const cleanUpPrefixes = [ '--puppeteer-', '--wordpress-' ];
 
 jest.run( [ ...config, ...runInBand, ...getArgsFromCLI( cleanUpPrefixes ) ] );
diff --git a/packages/scripts/scripts/test-playwright.js b/packages/scripts/scripts/test-playwright.js
new file mode 100644
index 00000000000000..9657ef23bdfe70
--- /dev/null
+++ b/packages/scripts/scripts/test-playwright.js
@@ -0,0 +1,69 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on( 'unhandledRejection', ( err ) => {
+	throw err;
+} );
+
+/**
+ * External dependencies
+ */
+const { resolve } = require( 'node:path' );
+const { sync: spawn } = require( 'cross-spawn' );
+
+/**
+ * Internal dependencies
+ */
+const {
+	fromConfigRoot,
+	hasProjectFile,
+	hasArgInCLI,
+	getArgsFromCLI,
+	getAsBooleanFromENV,
+} = require( '../utils' );
+
+if ( ! getAsBooleanFromENV( 'PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD' ) ) {
+	const result = spawn( 'npx', [ 'playwright', 'install' ], {
+		stdio: 'inherit',
+	} );
+
+	if ( result.status > 0 ) {
+		process.exit( result.status );
+	}
+}
+
+const config =
+	! hasArgInCLI( '--config' ) &&
+	! hasProjectFile( 'playwright.config.ts' ) &&
+	! hasProjectFile( 'playwright.config.js' )
+		? [ '--config', fromConfigRoot( 'playwright.config.js' ) ]
+		: [];
+
+// Set the default artifacts path.
+if ( ! process.env.WP_ARTIFACTS_PATH ) {
+	process.env.WP_ARTIFACTS_PATH = resolve(
+		process.env.GITHUB_WORKSPACE || process.cwd(),
+		'artifacts'
+	);
+}
+
+const testResult = spawn(
+	'node',
+	[
+		require.resolve( '@playwright/test/cli' ),
+		'test',
+		...config,
+		...getArgsFromCLI(),
+	],
+	{
+		stdio: 'inherit',
+	}
+);
+
+if ( testResult.status > 0 ) {
+	process.exit( testResult.status );
+}
diff --git a/packages/scripts/scripts/test-unit-jest.js b/packages/scripts/scripts/test-unit-jest.js
index 35ecd68d1a8749..92a6580c266045 100644
--- a/packages/scripts/scripts/test-unit-jest.js
+++ b/packages/scripts/scripts/test-unit-jest.js
@@ -12,7 +12,6 @@ process.on( 'unhandledRejection', ( err ) => {
 /**
  * External dependencies
  */
-/* eslint-disable-next-line jest/no-jest-import */
 const jest = require( 'jest' );
 
 /**
diff --git a/packages/scripts/scripts/test/__snapshots__/build-blocks-manifest.js.snap b/packages/scripts/scripts/test/__snapshots__/build-blocks-manifest.js.snap
new file mode 100644
index 00000000000000..aa7cd50e3470ce
--- /dev/null
+++ b/packages/scripts/scripts/test/__snapshots__/build-blocks-manifest.js.snap
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`build-blocks-manifest script should generate expected blocks manifest 1`] = `
+"<?php
+// This file is generated. Do not modify it manually.
+return array(
+	'custom-header' => array(
+		'$schema' => 'https://schemas.wp.org/trunk/block.json',
+		'apiVersion' => 2,
+		'name' => 'my-plugin/custom-header',
+		'title' => 'Custom Header',
+		'category' => 'text',
+		'icon' => 'heading',
+		'description' => 'A custom header block with color options.',
+		'attributes' => array(
+			'content' => array(
+				'type' => 'string',
+				'source' => 'html',
+				'selector' => 'h2'
+			),
+			'textColor' => array(
+				'type' => 'string'
+			),
+			'backgroundColor' => array(
+				'type' => 'string'
+			)
+		),
+		'supports' => array(
+			'html' => false,
+			'color' => array(
+				'background' => true,
+				'text' => true
+			)
+		),
+		'textdomain' => 'my-plugin',
+		'editorScript' => 'file:./index.js',
+		'editorStyle' => 'file:./index.css',
+		'style' => 'file:./style-index.css'
+	),
+	'image-gallery' => array(
+		'$schema' => 'https://schemas.wp.org/trunk/block.json',
+		'apiVersion' => 2,
+		'name' => 'my-plugin/image-gallery',
+		'title' => 'Image Gallery',
+		'category' => 'media',
+		'icon' => 'format-gallery',
+		'description' => 'An image gallery block with customizable layout.',
+		'attributes' => array(
+			'images' => array(
+				'type' => 'array',
+				'default' => array(
+					
+				),
+				'source' => 'query',
+				'selector' => 'img',
+				'query' => array(
+					'url' => array(
+						'type' => 'string',
+						'source' => 'attribute',
+						'attribute' => 'src'
+					),
+					'alt' => array(
+						'type' => 'string',
+						'source' => 'attribute',
+						'attribute' => 'alt',
+						'default' => ''
+					),
+					'id' => array(
+						'type' => 'number',
+						'source' => 'attribute',
+						'attribute' => 'data-id'
+					)
+				)
+			),
+			'columns' => array(
+				'type' => 'number',
+				'default' => 3
+			),
+			'imageCrop' => array(
+				'type' => 'boolean',
+				'default' => true
+			)
+		),
+		'supports' => array(
+			'align' => array(
+				'wide',
+				'full'
+			)
+		),
+		'textdomain' => 'my-plugin',
+		'editorScript' => 'file:./index.js',
+		'editorStyle' => 'file:./index.css',
+		'style' => 'file:./style-index.css'
+	),
+	'simple-button' => array(
+		'$schema' => 'https://schemas.wp.org/trunk/block.json',
+		'apiVersion' => 2,
+		'name' => 'my-plugin/simple-button',
+		'title' => 'Simple Button',
+		'category' => 'design',
+		'icon' => 'button',
+		'description' => 'A simple button block.',
+		'supports' => array(
+			'html' => false
+		),
+		'textdomain' => 'my-plugin',
+		'editorScript' => 'file:./index.js',
+		'editorStyle' => 'file:./index.css',
+		'style' => 'file:./style-index.css'
+	)
+);
+"
+`;
diff --git a/packages/scripts/scripts/test/build-blocks-manifest.js b/packages/scripts/scripts/test/build-blocks-manifest.js
new file mode 100644
index 00000000000000..70009bd6087b56
--- /dev/null
+++ b/packages/scripts/scripts/test/build-blocks-manifest.js
@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' );
+const path = require( 'path' );
+const { execSync } = require( 'child_process' );
+const rimraf = require( 'rimraf' );
+
+const fixturesPath = path.join(
+	__dirname,
+	'fixtures',
+	'build-blocks-manifest'
+);
+const outputPath = path.join( __dirname, 'build', 'test-blocks-manifest' );
+
+describe( 'build-blocks-manifest script', () => {
+	beforeAll( () => {
+		if ( ! fs.existsSync( outputPath ) ) {
+			fs.mkdirSync( outputPath, { recursive: true } );
+		}
+		rimraf.sync( outputPath );
+	} );
+
+	afterAll( () => {
+		rimraf.sync( outputPath );
+	} );
+
+	it( 'should generate expected blocks manifest', () => {
+		const inputDir = path.join( fixturesPath, 'input' );
+		const outputFile = path.join( outputPath, 'blocks-manifest.php' );
+
+		// Run the build-blocks-manifest script
+		const scriptPath = path.resolve(
+			__dirname,
+			'..',
+			'build-blocks-manifest.js'
+		);
+		execSync(
+			`node ${ scriptPath } --input=${ inputDir } --output=${ outputFile }`
+		);
+
+		const generatedContent = fs.readFileSync( outputFile, 'utf8' );
+		expect( generatedContent ).toMatchSnapshot();
+	} );
+
+	it( 'should error on empty input directory', () => {
+		const emptyInputDir = path.join( fixturesPath, 'empty-input' );
+		const outputFile = path.join( outputPath, 'empty-blocks-manifest.php' );
+
+		const scriptPath = path.resolve(
+			__dirname,
+			'..',
+			'build-blocks-manifest.js'
+		);
+		let error;
+		try {
+			execSync(
+				`node ${ scriptPath } --input=${ emptyInputDir } --output=${ outputFile }`,
+				{ encoding: 'utf8' }
+			);
+		} catch ( e ) {
+			error = e;
+		}
+
+		// Check that an error was thrown.
+		expect( error ).toBeDefined();
+		expect( error.stdout ).toContain(
+			`No block.json files were found in path`
+		);
+
+		// Ensure that the output file was not created
+		expect( fs.existsSync( outputFile ) ).toBe( false );
+	} );
+
+	it( 'should error on missing input directory', () => {
+		const nonExistentInputDir = path.join( fixturesPath, 'missing-input' );
+		const outputFile = path.join( outputPath, 'empty-blocks-manifest.php' );
+
+		const scriptPath = path.resolve(
+			__dirname,
+			'..',
+			'build-blocks-manifest.js'
+		);
+		let error;
+		try {
+			execSync(
+				`node ${ scriptPath } --input=${ nonExistentInputDir } --output=${ outputFile }`,
+				{ encoding: 'utf8' }
+			);
+		} catch ( e ) {
+			error = e;
+		}
+
+		// Check that an error was thrown.
+		expect( error ).toBeDefined();
+		expect( error.stdout ).toContain( `does not exist` );
+
+		// Ensure that the output file was not created
+		expect( fs.existsSync( outputFile ) ).toBe( false );
+	} );
+} );
diff --git a/packages/scripts/scripts/test/fixtures/build-blocks-manifest/empty-input/.keep b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/empty-input/.keep
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/custom-header/block.json b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/custom-header/block.json
new file mode 100644
index 00000000000000..056bffbe28b184
--- /dev/null
+++ b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/custom-header/block.json
@@ -0,0 +1,33 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "my-plugin/custom-header",
+	"title": "Custom Header",
+	"category": "text",
+	"icon": "heading",
+	"description": "A custom header block with color options.",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": "h2"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"color": {
+			"background": true,
+			"text": true
+		}
+	},
+	"textdomain": "my-plugin",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}
diff --git a/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/image-gallery/block.json b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/image-gallery/block.json
new file mode 100644
index 00000000000000..9c84fff4338704
--- /dev/null
+++ b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/image-gallery/block.json
@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "my-plugin/image-gallery",
+	"title": "Image Gallery",
+	"category": "media",
+	"icon": "format-gallery",
+	"description": "An image gallery block with customizable layout.",
+	"attributes": {
+		"images": {
+			"type": "array",
+			"default": [],
+			"source": "query",
+			"selector": "img",
+			"query": {
+				"url": {
+					"type": "string",
+					"source": "attribute",
+					"attribute": "src"
+				},
+				"alt": {
+					"type": "string",
+					"source": "attribute",
+					"attribute": "alt",
+					"default": ""
+				},
+				"id": {
+					"type": "number",
+					"source": "attribute",
+					"attribute": "data-id"
+				}
+			}
+		},
+		"columns": {
+			"type": "number",
+			"default": 3
+		},
+		"imageCrop": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ]
+	},
+	"textdomain": "my-plugin",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}
diff --git a/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/simple-button/block.json b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/simple-button/block.json
new file mode 100644
index 00000000000000..23e607c411fbdc
--- /dev/null
+++ b/packages/scripts/scripts/test/fixtures/build-blocks-manifest/input/simple-button/block.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "my-plugin/simple-button",
+	"title": "Simple Button",
+	"category": "design",
+	"icon": "button",
+	"description": "A simple button block.",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "my-plugin",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}
diff --git a/packages/scripts/utils/block-json.js b/packages/scripts/utils/block-json.js
new file mode 100644
index 00000000000000..e086405dd7455f
--- /dev/null
+++ b/packages/scripts/utils/block-json.js
@@ -0,0 +1,41 @@
+const moduleFields = new Set( [ 'viewScriptModule', 'viewModule' ] );
+const scriptFields = new Set( [ 'viewScript', 'script', 'editorScript' ] );
+
+/**
+ * @param {Object} blockJson
+ * @return {null|Record<string, unknown>} Fields
+ */
+function getBlockJsonModuleFields( blockJson ) {
+	let result = null;
+	for ( const field of moduleFields ) {
+		if ( Object.hasOwn( blockJson, field ) ) {
+			if ( ! result ) {
+				result = {};
+			}
+			result[ field ] = blockJson[ field ];
+		}
+	}
+	return result;
+}
+
+/**
+ * @param {Object} blockJson
+ * @return {null|Record<string, unknown>} Fields
+ */
+function getBlockJsonScriptFields( blockJson ) {
+	let result = null;
+	for ( const field of scriptFields ) {
+		if ( Object.hasOwn( blockJson, field ) ) {
+			if ( ! result ) {
+				result = {};
+			}
+			result[ field ] = blockJson[ field ];
+		}
+	}
+	return result;
+}
+
+module.exports = {
+	getBlockJsonModuleFields,
+	getBlockJsonScriptFields,
+};
diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js
index 983706c98035c9..3d99f3784859df 100644
--- a/packages/scripts/utils/config.js
+++ b/packages/scripts/utils/config.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const chalk = require( 'chalk' );
 const { readFileSync } = require( 'fs' );
 const { basename, dirname, extname, join, sep } = require( 'path' );
 const { sync: glob } = require( 'fast-glob' );
@@ -17,7 +16,12 @@ const {
 } = require( './cli' );
 const { fromConfigRoot, fromProjectRoot, hasProjectFile } = require( './file' );
 const { hasPackageProp } = require( './package' );
-const { log } = console;
+const {
+	getBlockJsonModuleFields,
+	getBlockJsonScriptFields,
+} = require( './block-json' );
+
+const { warn } = console;
 
 // See https://babeljs.io/docs/en/config-files#configuration-file-types.
 const hasBabelConfig = () =>
@@ -50,7 +54,7 @@ const hasCssnanoConfig = () =>
  *
  * @param {"e2e"|"unit"} suffix Suffix of configuration file to accept.
  *
- * @return {string=} Override or fallback configuration file path.
+ * @return {string= | undefined} Override or fallback configuration file path.
  */
 function getJestOverrideConfigFile( suffix ) {
 	if ( hasArgInCLI( '-c' ) || hasArgInCLI( '--config' ) ) {
@@ -108,7 +112,10 @@ const hasPostCSSConfig = () =>
  */
 const getWebpackArgs = () => {
 	// Gets all args from CLI without those prefixed with `--webpack`.
-	let webpackArgs = getArgsFromCLI( [ '--webpack' ] );
+	let webpackArgs = getArgsFromCLI( [
+		'--experimental-modules',
+		'--webpack',
+	] );
 
 	const hasWebpackOutputOption =
 		hasArgInCLI( '-o' ) || hasArgInCLI( '--output' );
@@ -186,179 +193,221 @@ function getWordPressSrcDirectory() {
  *
  * @see https://webpack.js.org/concepts/entry-points/
  *
- * @return {Object<string,string>} The list of entry points.
+ * @param {'script' | 'module'} buildType
  */
-function getWebpackEntryPoints() {
-	// 1. Handles the legacy format for entry points when explicitly provided with the `process.env.WP_ENTRY`.
-	if ( process.env.WP_ENTRY ) {
-		return JSON.parse( process.env.WP_ENTRY );
-	}
+function getWebpackEntryPoints( buildType ) {
+	/**
+	 * @return {Object<string,string>} The list of entry points.
+	 */
+	return () => {
+		// 1. Handles the legacy format for entry points when explicitly provided with the `process.env.WP_ENTRY`.
+		if ( process.env.WP_ENTRY ) {
+			return buildType === 'script'
+				? JSON.parse( process.env.WP_ENTRY )
+				: {};
+		}
 
-	// Continue only if the source directory exists.
-	if ( ! hasProjectFile( getWordPressSrcDirectory() ) ) {
-		log(
-			chalk.yellow(
+		// Continue only if the source directory exists.
+		if ( ! hasProjectFile( getWordPressSrcDirectory() ) ) {
+			warn(
 				`Source directory "${ getWordPressSrcDirectory() }" was not found. Please confirm there is a "src" directory in the root or the value passed to --webpack-src-dir is correct.`
-			)
-		);
-		return {};
-	}
+			);
+			return {};
+		}
 
-	// 2. Checks whether any block metadata files can be detected in the defined source directory.
-	//    It scans all discovered files looking for JavaScript assets and converts them to entry points.
-	const blockMetadataFiles = glob(
-		`${ getWordPressSrcDirectory() }/**/block.json`,
-		{
+		// 2. Checks whether any block metadata files can be detected in the defined source directory.
+		//    It scans all discovered files looking for JavaScript assets and converts them to entry points.
+		const blockMetadataFiles = glob( '**/block.json', {
 			absolute: true,
-		}
-	);
-
-	if ( blockMetadataFiles.length > 0 ) {
-		const srcDirectory = fromProjectRoot(
-			getWordPressSrcDirectory() + sep
-		);
-		const entryPoints = blockMetadataFiles.reduce(
-			( accumulator, blockMetadataFile ) => {
-				const { editorScript, script, viewScript } = JSON.parse(
-					readFileSync( blockMetadataFile )
-				);
-				[ editorScript, script, viewScript ]
-					.flat()
-					.filter( ( value ) => value && value.startsWith( 'file:' ) )
-					.forEach( ( value ) => {
-						// Removes the `file:` prefix.
-						const filepath = join(
-							dirname( blockMetadataFile ),
-							value.replace( 'file:', '' )
-						);
+			cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+		} );
 
-						// Takes the path without the file extension, and relative to the defined source directory.
-						if ( ! filepath.startsWith( srcDirectory ) ) {
-							log(
-								chalk.yellow(
-									`Skipping "${ value.replace(
-										'file:',
-										''
-									) }" listed in "${ blockMetadataFile.replace(
-										fromProjectRoot( sep ),
-										''
-									) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
-								)
-							);
-							return;
+		if ( blockMetadataFiles.length > 0 ) {
+			const srcDirectory = fromProjectRoot(
+				getWordPressSrcDirectory() + sep
+			);
+
+			const entryPoints = {};
+
+			for ( const blockMetadataFile of blockMetadataFiles ) {
+				const fileContents = readFileSync( blockMetadataFile );
+				let parsedBlockJson;
+				// wrapping in try/catch in case the file is malformed
+				// this happens especially when new block.json files are added
+				// at which point they are completely empty and therefore not valid JSON
+				try {
+					parsedBlockJson = JSON.parse( fileContents );
+				} catch ( error ) {
+					warn(
+						`Not scanning "${ blockMetadataFile.replace(
+							fromProjectRoot( sep ),
+							''
+						) }" due to collect entry points due to malformed JSON.`
+					);
+					continue;
+				}
+
+				const fields =
+					buildType === 'script'
+						? getBlockJsonScriptFields( parsedBlockJson )
+						: getBlockJsonModuleFields( parsedBlockJson );
+
+				if ( ! fields ) {
+					continue;
+				}
+
+				for ( const value of Object.values( fields ).flat() ) {
+					if ( ! value.startsWith( 'file:' ) ) {
+						continue;
+					}
+
+					// Removes the `file:` prefix.
+					const filepath = join(
+						dirname( blockMetadataFile ),
+						value.replace( 'file:', '' )
+					);
+
+					// Takes the path without the file extension, and relative to the defined source directory.
+					if ( ! filepath.startsWith( srcDirectory ) ) {
+						warn(
+							`Skipping "${ value.replace(
+								'file:',
+								''
+							) }" listed in "${ blockMetadataFile.replace(
+								fromProjectRoot( sep ),
+								''
+							) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
+						);
+						continue;
+					}
+					const entryName = filepath
+						.replace( extname( filepath ), '' )
+						.replace( srcDirectory, '' )
+						.replace( /\\/g, '/' );
+
+					// Detects the proper file extension used in the defined source directory.
+					const [ entryFilepath ] = glob(
+						`${ entryName }.?(m)[jt]s?(x)`,
+						{
+							absolute: true,
+							cwd: fromProjectRoot( getWordPressSrcDirectory() ),
 						}
-						const entryName = filepath
-							.replace( extname( filepath ), '' )
-							.replace( srcDirectory, '' )
-							.replace( /\\/g, '/' );
-
-						// Detects the proper file extension used in the defined source directory.
-						const [ entryFilepath ] = glob(
-							`${ getWordPressSrcDirectory() }/${ entryName }.[jt]s?(x)`,
-							{
-								absolute: true,
-							}
+					);
+
+					if ( ! entryFilepath ) {
+						warn(
+							`Skipping "${ value.replace(
+								'file:',
+								''
+							) }" listed in "${ blockMetadataFile.replace(
+								fromProjectRoot( sep ),
+								''
+							) }". File does not exist in the "${ getWordPressSrcDirectory() }" directory.`
 						);
+						continue;
+					}
+					entryPoints[ entryName ] = entryFilepath;
+				}
+			}
 
-						if ( ! entryFilepath ) {
-							log(
-								chalk.yellow(
-									`Skipping "${ value.replace(
-										'file:',
-										''
-									) }" listed in "${ blockMetadataFile.replace(
-										fromProjectRoot( sep ),
-										''
-									) }". File does not exist in the "${ getWordPressSrcDirectory() }" directory.`
-								)
-							);
-							return;
-						}
-						accumulator[ entryName ] = entryFilepath;
-					} );
-				return accumulator;
-			},
-			{}
-		);
-
-		if ( Object.keys( entryPoints ).length > 0 ) {
-			return entryPoints;
+			if ( Object.keys( entryPoints ).length > 0 ) {
+				return entryPoints;
+			}
 		}
-	}
 
-	// 3. Checks whether a standard file name can be detected in the defined source directory,
-	//    and converts the discovered file to entry point.
-	const [ entryFile ] = glob(
-		`${ getWordPressSrcDirectory() }/index.[jt]s?(x)`,
-		{
-			absolute: true,
+		// Don't do any further processing if this is a module build.
+		// This only respects *module block.json fields.
+		if ( buildType === 'module' ) {
+			return {};
 		}
-	);
-	if ( ! entryFile ) {
-		log(
-			chalk.yellow(
+
+		// 3. Checks whether a standard file name can be detected in the defined source directory,
+		//  and converts the discovered file to entry point.
+		const [ entryFile ] = glob( 'index.[jt]s?(x)', {
+			absolute: true,
+			cwd: fromProjectRoot( getWordPressSrcDirectory() ),
+		} );
+
+		if ( ! entryFile ) {
+			warn(
 				`No entry file discovered in the "${ getWordPressSrcDirectory() }" directory.`
-			)
-		);
-		return {};
-	}
+			);
+			return {};
+		}
 
-	return {
-		index: entryFile,
+		return {
+			index: entryFile,
+		};
 	};
 }
 
 /**
- * Returns the list of paths included in the `render` props by scanning the `block.json` files.
+ * Returns the list of PHP file paths found in `block.json` files for the given props.
  *
- * @return {Array}  The list of all the `render` prop paths included in `block.json` files.
+ * @param {string}   context The path to search for `block.json` files.
+ * @param {string[]} props   The props to search for in the `block.json` files.
+ * @return {string[]} The list of PHP file paths.
  */
-function getRenderPropPaths() {
+function getPhpFilePaths( context, props ) {
 	// Continue only if the source directory exists.
-	if ( ! hasProjectFile( getWordPressSrcDirectory() ) ) {
+	if ( ! hasProjectFile( context ) ) {
 		return [];
 	}
 
 	// Checks whether any block metadata files can be detected in the defined source directory.
-	const blockMetadataFiles = glob(
-		`${ getWordPressSrcDirectory() }/**/block.json`,
-		{
-			absolute: true,
+	const blockMetadataFiles = glob( '**/block.json', {
+		absolute: true,
+		cwd: fromProjectRoot( context ),
+	} );
+
+	const srcDirectory = fromProjectRoot( context + sep );
+
+	return blockMetadataFiles.flatMap( ( blockMetadataFile ) => {
+		const paths = [];
+		let parsedBlockJson;
+		try {
+			parsedBlockJson = JSON.parse( readFileSync( blockMetadataFile ) );
+		} catch ( error ) {
+			warn(
+				`Not scanning "${ blockMetadataFile.replace(
+					fromProjectRoot( sep ),
+					''
+				) }" due to detect render files due to malformed JSON.`
+			);
+			return paths;
 		}
-	);
 
-	const srcDirectory = fromProjectRoot( getWordPressSrcDirectory() + sep );
+		for ( const prop of props ) {
+			if (
+				typeof parsedBlockJson?.[ prop ] !== 'string' ||
+				! parsedBlockJson[ prop ]?.startsWith( 'file:' )
+			) {
+				continue;
+			}
 
-	const renderPaths = blockMetadataFiles.map( ( blockMetadataFile ) => {
-		const { render } = JSON.parse( readFileSync( blockMetadataFile ) );
-		if ( render && render.startsWith( 'file:' ) ) {
 			// Removes the `file:` prefix.
 			const filepath = join(
 				dirname( blockMetadataFile ),
-				render.replace( 'file:', '' )
+				parsedBlockJson[ prop ].replace( 'file:', '' )
 			);
 
 			// Takes the path without the file extension, and relative to the defined source directory.
 			if ( ! filepath.startsWith( srcDirectory ) ) {
-				log(
-					chalk.yellow(
-						`Skipping "${ render.replace(
-							'file:',
-							''
-						) }" listed in "${ blockMetadataFile.replace(
-							fromProjectRoot( sep ),
-							''
-						) }". File is located outside of the "${ getWordPressSrcDirectory() }" directory.`
-					)
+				warn(
+					`Skipping "${ parsedBlockJson[ prop ].replace(
+						'file:',
+						''
+					) }" listed in "${ blockMetadataFile.replace(
+						fromProjectRoot( sep ),
+						''
+					) }". File is located outside of the "${ context }" directory.`
 				);
-				return false;
+				continue;
 			}
-			return filepath;
+			paths.push( filepath.replace( /\\/g, '/' ) );
 		}
-		return false;
+		return paths;
 	} );
-
-	return renderPaths.filter( ( renderPath ) => renderPath );
 }
 
 module.exports = {
@@ -366,7 +415,7 @@ module.exports = {
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getPhpFilePaths,
 	hasBabelConfig,
 	hasCssnanoConfig,
 	hasJestConfig,
diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js
index 870c2423361b53..cb7e592f83d554 100644
--- a/packages/scripts/utils/index.js
+++ b/packages/scripts/utils/index.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+const { getAsBooleanFromENV } = require( './process' );
 const {
 	getArgFromCLI,
 	getArgsFromCLI,
@@ -15,7 +16,7 @@ const {
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getPhpFilePaths,
 	hasBabelConfig,
 	hasCssnanoConfig,
 	hasJestConfig,
@@ -24,10 +25,16 @@ const {
 } = require( './config' );
 const { fromProjectRoot, fromConfigRoot, hasProjectFile } = require( './file' );
 const { getPackageProp, hasPackageProp } = require( './package' );
+const {
+	getBlockJsonModuleFields,
+	getBlockJsonScriptFields,
+} = require( './block-json' );
+const { PhpFilePathsPlugin } = require( './php-file-paths-plugin' );
 
 module.exports = {
 	fromProjectRoot,
 	fromConfigRoot,
+	getAsBooleanFromENV,
 	getArgFromCLI,
 	getArgsFromCLI,
 	getFileArgsFromCLI,
@@ -37,7 +44,9 @@ module.exports = {
 	getWebpackArgs,
 	getWordPressSrcDirectory,
 	getWebpackEntryPoints,
-	getRenderPropPaths,
+	getPhpFilePaths,
+	getBlockJsonModuleFields,
+	getBlockJsonScriptFields,
 	hasArgInCLI,
 	hasBabelConfig,
 	hasCssnanoConfig,
@@ -47,5 +56,6 @@ module.exports = {
 	hasPostCSSConfig,
 	hasPrettierConfig,
 	hasProjectFile,
+	PhpFilePathsPlugin,
 	spawnScript,
 };
diff --git a/packages/scripts/utils/license.js b/packages/scripts/utils/license.js
new file mode 100644
index 00000000000000..ae18bfb2535985
--- /dev/null
+++ b/packages/scripts/utils/license.js
@@ -0,0 +1,377 @@
+/**
+ * External dependencies
+ */
+const chalk = require( 'chalk' );
+const { existsSync, readFileSync } = require( 'node:fs' );
+
+const ERROR_TEXT = chalk.reset.inverse.bold.red( ' ERROR ' );
+const WARNING_TEXT = chalk.reset.inverse.bold.yellow( ' WARNING ' );
+
+/**
+ * @typedef {ReadonlyArray<string>} Licenses
+ */
+
+/**
+ * Some packages don't included a license string in their package.json file, but they
+ * do have a license listed elsewhere. These files are checked for matching license strings.
+ * Only the first matching license file with a matching license string is considered.
+ *
+ * See: licenseFileStrings.
+ * @type {ReadonlyArray<string>}
+ */
+const licenseFiles = [
+	'LICENCE',
+	'license',
+	'LICENSE',
+	'LICENSE.md',
+	'LICENSE.txt',
+	'LICENSE-MIT',
+	'MIT-LICENSE.txt',
+	'Readme.md',
+	'README.md',
+];
+
+/**
+ * When searching through files for licensing information, these are the strings we look for,
+ * and their matching license.
+ */
+const licenseFileStrings = {
+	'Apache-2.0': [ 'Licensed under the Apache License, Version 2.0' ],
+	BSD: [
+		'Redistributions in binary form must reproduce the above copyright notice,',
+	],
+	'BSD-3-Clause-W3C': [ 'W3C 3-clause BSD License' ],
+	MIT: [
+		'Permission is hereby granted, free of charge,',
+		'## License\n\nMIT',
+		'## License\n\n  MIT',
+	],
+};
+
+/*
+ * A list of license strings that we've found to be GPL2 compatible.
+ *
+ * Note the strings with "AND" in them at the bottom: these should only be added when
+ * all the licenses in that string are GPL2 compatible.
+ */
+const gpl2CompatibleLicenses = [
+	'0BSD',
+	'Apache-2.0 WITH LLVM-exception',
+	'Artistic-2.0',
+	'BlueOak-1.0.0',
+	'BSD-2-Clause',
+	'BSD-3-Clause-W3C',
+	'BSD-3-Clause',
+	'BSD',
+	'CC-BY-4.0',
+	'CC0-1.0',
+	'GPL-2.0-or-later',
+	'GPL-2.0',
+	'GPL-2.0+',
+	'ISC',
+	'LGPL-2.1',
+	'MIT',
+	'MIT/X11',
+	'MPL-2.0',
+	'ODC-By-1.0',
+	'Public Domain',
+	'Unlicense',
+	'W3C-20150513',
+	'WTFPL',
+	'Zlib',
+];
+
+/*
+ * A list of OSS license strings that aren't GPL2 compatible.
+ *
+ * We're cool with using packages that are licensed under any of these if we're not
+ * distributing them (for example, build tools), but we can't included them in a release.
+ */
+const otherOssLicenses = [
+	'Apache-2.0',
+	'Apache License, Version 2.0',
+	'CC-BY-3.0',
+	'CC-BY-SA-2.0',
+	'LGPL',
+	'Python-2.0',
+];
+
+/**
+ * @param {boolean} gpl2 Only allow GPL2 compatible licenses.
+ * @return {Licenses} Allowed licenses.
+ */
+const getLicenses = ( gpl2 ) => {
+	return [ ...gpl2CompatibleLicenses, ...( gpl2 ? [] : otherOssLicenses ) ];
+};
+
+/**
+ * Check if a license string matches the given license.
+ *
+ * The license string can be a single license, or an SPDX-compatible "OR" license string.
+ * eg, "(MIT OR Zlib)".
+ *
+ * @param {string} allowedLicense The license that's allowed.
+ * @param {string} licenseType    The license string to check.
+ *
+ * @return {boolean} true if the licenseType matches the allowedLicense, false if it doesn't.
+ */
+const checkLicense = ( allowedLicense, licenseType ) => {
+	if ( ! licenseType ) {
+		return false;
+	}
+
+	// Some licenses have unusual capitalisation in them.
+	const formattedAllowedLicense = allowedLicense.toLowerCase();
+	const formattedlicenseType = licenseType.toLowerCase();
+
+	if ( formattedAllowedLicense === formattedlicenseType ) {
+		return true;
+	}
+
+	// We can skip the parsing below if there isn't an 'OR' in the license.
+	if ( ! formattedlicenseType.includes( ' or ' ) ) {
+		return false;
+	}
+
+	/*
+	 * In order to do a basic parse of SPDX-compatible "OR" license strings, we:
+	 * - Remove surrounding brackets: "(mit or zlib)" -> "mit or zlib"
+	 * - Split it into an array: "mit or zlib" -> [ "mit", "zlib" ]
+	 * - Trim any remaining whitespace from each element
+	 */
+	const subLicenseTypes = formattedlicenseType
+		.replace( /^\(*/g, '' )
+		.replace( /\)*$/, '' )
+		.split( ' or ' )
+		.map( ( e ) => e.trim() );
+
+	// We can then check our array of licenses against the allowedLicense.
+	return (
+		undefined !==
+		subLicenseTypes.find( ( subLicenseType ) =>
+			checkLicense( allowedLicense, subLicenseType )
+		)
+	);
+};
+
+/**
+ * Check that all of the licenses for a package are compatible.
+ *
+ * This function is invoked when the licenses are a conjunctive ("AND") list of licenses.
+ * In that case, the software is only compatible if all of the licenses in the list are
+ * compatible.
+ *
+ * @param {Licenses} packageLicenses    The licenses that a package is licensed under.
+ * @param {Licenses} compatibleLicenses The list of compatible licenses.
+ *
+ * @return {boolean} true if all of the packageLicenses appear in compatibleLicenses.
+ */
+function checkAllCompatible( packageLicenses, compatibleLicenses ) {
+	return packageLicenses.reduce( ( compatible, packageLicense ) => {
+		return (
+			compatible &&
+			compatibleLicenses.reduce(
+				( found, allowedLicense ) =>
+					found || checkLicense( allowedLicense, packageLicense ),
+				false
+			)
+		);
+	}, true );
+}
+
+function detectTypeFromLicenseText( licenseText ) {
+	// Check if the file contains any of the strings in licenseFileStrings.
+	return Object.keys( licenseFileStrings ).reduce(
+		( stringDetectedType, licenseStringType ) => {
+			const licenseFileString = licenseFileStrings[ licenseStringType ];
+
+			return licenseFileString.reduce(
+				( currentDetectedType, fileString ) => {
+					if ( licenseText.includes( fileString ) ) {
+						if ( currentDetectedType ) {
+							return currentDetectedType.concat(
+								' AND ',
+								licenseStringType
+							);
+						}
+						return licenseStringType;
+					}
+					return currentDetectedType;
+				},
+				stringDetectedType
+			);
+		},
+		false
+	);
+}
+
+const reportedPackages = new Set();
+
+/**
+ * @param {string}   path
+ * @param {Licenses} licenses
+ * @return {void}
+ */
+function checkDepLicense( path, licenses ) {
+	if ( ! path ) {
+		return;
+	}
+
+	const filename = path + '/package.json';
+	if ( ! existsSync( filename ) ) {
+		process.stdout.write( `Unable to locate package.json in ${ path }.` );
+		process.exit( 1 );
+	}
+
+	/*
+	 * The package.json format can be kind of weird. We allow for the following formats:
+	 * - { license: 'MIT' }
+	 * - { license: { type: 'MIT' } }
+	 * - { licenses: [ 'MIT', 'Zlib' ] }
+	 * - { licenses: [ { type: 'MIT' }, { type: 'Zlib' } ] }
+	 */
+	const packageInfo = require( filename );
+	const license =
+		packageInfo.license ||
+		( packageInfo.licenses &&
+			packageInfo.licenses.map( ( l ) => l.type || l ).join( ' OR ' ) );
+	let licenseType = typeof license === 'object' ? license.type : license;
+
+	// Check if the license we've detected is telling us to look in the license file, instead.
+	if (
+		licenseType &&
+		licenseFiles.find( ( licenseFile ) =>
+			licenseType.includes( licenseFile )
+		)
+	) {
+		licenseType = undefined;
+	}
+
+	if ( licenseType !== undefined ) {
+		let licenseTypes = [ licenseType ];
+		if ( licenseType.includes( ' AND ' ) ) {
+			licenseTypes = licenseType
+				.replace( /^\(*/g, '' )
+				.replace( /\)*$/, '' )
+				.split( ' AND ' )
+				.map( ( e ) => e.trim() );
+		}
+
+		if ( checkAllCompatible( licenseTypes, licenses ) ) {
+			return;
+		}
+	}
+
+	/*
+	 * If we haven't been able to detect a license in the package.json file,
+	 * or the type was invalid, try reading it from the files defined in
+	 * license files, instead.
+	 */
+	const detectedLicenseType = detectTypeFromLicenseFiles( path );
+	if ( ! licenseType && ! detectedLicenseType ) {
+		return;
+	}
+
+	let detectedLicenseTypes = [ detectedLicenseType ];
+	if ( detectedLicenseType && detectedLicenseType.includes( ' AND ' ) ) {
+		detectedLicenseTypes = detectedLicenseType
+			.replace( /^\(*/g, '' )
+			.replace( /\)*$/, '' )
+			.split( ' AND ' )
+			.map( ( e ) => e.trim() );
+	}
+
+	if ( checkAllCompatible( detectedLicenseTypes, licenses ) ) {
+		return;
+	}
+
+	// Do not report same package twice.
+	if ( reportedPackages.has( packageInfo.name ) ) {
+		return;
+	}
+
+	reportedPackages.add( packageInfo.name );
+
+	process.exitCode = 1;
+	process.stdout.write(
+		`${ ERROR_TEXT } Module ${ packageInfo.name } has an incompatible license '${ licenseType }'.\n`
+	);
+}
+
+/**
+ *
+ * @typedef Options
+ * @property {boolean}       gpl2      Only allow GPL2 compatible licenses.
+ * @property {Array<string>} [ignored] The list of ignored packages.
+ */
+
+/**
+ * @param {Object}  deps    The dependencies tree.
+ * @param {Options} options
+ */
+function checkDepsInTree( deps, options ) {
+	const licenses = getLicenses( options.gpl2 );
+
+	for ( const key in deps ) {
+		const dep = deps[ key ];
+
+		if ( options.ignored?.includes( dep.name ) ) {
+			continue;
+		}
+
+		if ( Object.keys( dep ).length === 0 ) {
+			continue;
+		}
+
+		if ( ! dep.hasOwnProperty( 'path' ) && ! dep.missing ) {
+			if ( dep.hasOwnProperty( 'peerMissing' ) ) {
+				process.stdout.write(
+					`${ WARNING_TEXT } Unable to locate path for missing peer dep ${ dep.name }@${ dep.version }. `
+				);
+			} else {
+				process.exitCode = 1;
+				process.stdout.write(
+					`${ ERROR_TEXT } Unable to locate path for ${ dep.name }@${ dep.version }. `
+				);
+			}
+		} else if ( dep.missing ) {
+			for ( const problem of dep.problems ) {
+				process.stdout.write( `${ WARNING_TEXT } ${ problem }.\n` );
+			}
+		} else {
+			checkDepLicense( dep.path, licenses );
+		}
+
+		if ( dep.hasOwnProperty( 'dependencies' ) ) {
+			checkDepsInTree( dep.dependencies, options );
+		}
+	}
+}
+
+/**
+ * @param {string} path The path to the package.
+ * @return {boolean} true if the package has a license, false if it
+ */
+function detectTypeFromLicenseFiles( path ) {
+	return licenseFiles.reduce( ( detectedType, licenseFile ) => {
+		// If another LICENSE file already had licenses in it, use those.
+		if ( detectedType ) {
+			return detectedType;
+		}
+
+		const licensePath = path + '/' + licenseFile;
+
+		if ( existsSync( licensePath ) ) {
+			const licenseText = readFileSync( licensePath ).toString();
+			return detectTypeFromLicenseText( licenseText );
+		}
+
+		return detectedType;
+	}, false );
+}
+
+module.exports = {
+	detectTypeFromLicenseText,
+	checkAllCompatible,
+	checkDepsInTree,
+};
diff --git a/packages/scripts/utils/php-file-paths-plugin.js b/packages/scripts/utils/php-file-paths-plugin.js
new file mode 100644
index 00000000000000..6f95dae6505a80
--- /dev/null
+++ b/packages/scripts/utils/php-file-paths-plugin.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+const { validate } = require( 'schema-utils' );
+
+/**
+ * Internal dependencies
+ */
+const { getPhpFilePaths } = require( './config' );
+
+const phpFilePathsPluginSchema = {
+	type: 'object',
+	properties: {
+		context: {
+			type: 'string',
+		},
+		props: {
+			type: 'array',
+			items: {
+				type: 'string',
+			},
+		},
+	},
+};
+
+/**
+ * The plugin recomputes PHP file paths once on each compilation. It is necessary to avoid repeating processing
+ * when filtering every discovered PHP file in the source folder. This is the most performant way to ensure that
+ * changes in `block.json` files are picked up in watch mode.
+ */
+class PhpFilePathsPlugin {
+	/**
+	 * PHP file paths from `render` and `variations` props found in `block.json` files.
+	 *
+	 * @type {string[]}
+	 */
+	static paths;
+
+	constructor( options = {} ) {
+		validate( phpFilePathsPluginSchema, options, {
+			name: 'PHP File Paths Plugin',
+			baseDataPath: 'options',
+		} );
+
+		this.options = options;
+	}
+
+	apply( compiler ) {
+		const pluginName = this.constructor.name;
+
+		compiler.hooks.thisCompilation.tap( pluginName, () => {
+			this.constructor.paths = getPhpFilePaths(
+				this.options.context,
+				this.options.props
+			);
+		} );
+	}
+}
+
+module.exports = { PhpFilePathsPlugin };
diff --git a/packages/scripts/utils/process.js b/packages/scripts/utils/process.js
index de07d36a8b59c4..48b884dc085bce 100644
--- a/packages/scripts/utils/process.js
+++ b/packages/scripts/utils/process.js
@@ -1,3 +1,8 @@
+const getAsBooleanFromENV = ( name ) => {
+	const value = process.env[ name ];
+	return !! value && value !== 'false' && value !== '0';
+};
+
 const getArgsFromCLI = ( excludePrefixes ) => {
 	const args = process.argv.slice( 2 );
 	if ( excludePrefixes ) {
@@ -12,6 +17,7 @@ const getArgsFromCLI = ( excludePrefixes ) => {
 
 module.exports = {
 	exit: process.exit,
+	getAsBooleanFromENV,
 	getArgsFromCLI,
 	getCurrentWorkingDirectory: process.cwd,
 };
diff --git a/packages/scripts/utils/test/license.js b/packages/scripts/utils/test/license.js
new file mode 100644
index 00000000000000..2c188ba9a347da
--- /dev/null
+++ b/packages/scripts/utils/test/license.js
@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+const fs = require( 'fs' );
+const path = require( 'path' );
+
+/**
+ * Internal dependencies
+ */
+import { detectTypeFromLicenseText, checkAllCompatible } from '../license';
+
+describe( 'detectTypeFromLicenseText', () => {
+	let licenseText;
+
+	it( "should return 'Apache 2.0' when the license text is the Apache 2.0 license", () => {
+		licenseText = fs
+			.readFileSync( path.resolve( __dirname, 'licenses/apache2.txt' ) )
+			.toString();
+
+		expect( detectTypeFromLicenseText( licenseText ) ).toBe( 'Apache-2.0' );
+	} );
+
+	it( "should return 'BSD' when the license text is the BSD 3-clause license", () => {
+		licenseText = fs
+			.readFileSync(
+				path.resolve( __dirname, 'licenses/bsd3clause.txt' )
+			)
+			.toString();
+
+		expect( detectTypeFromLicenseText( licenseText ) ).toBe( 'BSD' );
+	} );
+
+	it( "should return 'BSD-3-Clause-W3C' when the license text is the W3C variation of the BSD 3-clause license", () => {
+		licenseText = fs
+			.readFileSync( path.resolve( __dirname, 'licenses/w3cbsd.txt' ) )
+			.toString();
+
+		expect( detectTypeFromLicenseText( licenseText ) ).toBe(
+			'BSD-3-Clause-W3C'
+		);
+	} );
+
+	it( "should return 'MIT' when the license text is the MIT license", () => {
+		licenseText = fs
+			.readFileSync( path.resolve( __dirname, 'licenses/mit.txt' ) )
+			.toString();
+
+		expect( detectTypeFromLicenseText( licenseText ) ).toBe( 'MIT' );
+	} );
+
+	it( "should return 'Apache2 AND MIT' when the license text is Apache2 followed by MIT license", () => {
+		licenseText = fs
+			.readFileSync(
+				path.resolve( __dirname, 'licenses/apache2-mit.txt' )
+			)
+			.toString();
+
+		expect( detectTypeFromLicenseText( licenseText ) ).toBe(
+			'Apache-2.0 AND MIT'
+		);
+	} );
+} );
+
+describe( 'checkAllCompatible', () => {
+	it( "should return 'true' when single license is in the allowed list", () => {
+		expect( checkAllCompatible( [ 'B' ], [ 'A', 'B', 'C' ] ) ).toBe( true );
+	} );
+
+	it( "should return 'false' when single license is not in the allowed list", () => {
+		expect( checkAllCompatible( [ 'D' ], [ 'A', 'B', 'C' ] ) ).toBe(
+			false
+		);
+	} );
+
+	it( "should return 'true' when all licenses are in the allowed list", () => {
+		expect( checkAllCompatible( [ 'A', 'C' ], [ 'A', 'B', 'C' ] ) ).toBe(
+			true
+		);
+	} );
+
+	it( "should return 'false' when any license is not in the allowed list", () => {
+		expect( checkAllCompatible( [ 'A', 'D' ], [ 'A', 'B', 'C' ] ) ).toBe(
+			false
+		);
+	} );
+} );
diff --git a/packages/scripts/utils/test/licenses/apache2-mit.txt b/packages/scripts/utils/test/licenses/apache2-mit.txt
new file mode 100644
index 00000000000000..ef274198b740db
--- /dev/null
+++ b/packages/scripts/utils/test/licenses/apache2-mit.txt
@@ -0,0 +1,227 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
+-----
+
+Contains code from https://github.com/mozilla/language-mapping-list
+
+The MIT License (MIT)
+
+Copyright (c) 2013 fullname
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/scripts/utils/test/licenses/apache2.txt b/packages/scripts/utils/test/licenses/apache2.txt
new file mode 100644
index 00000000000000..7a4a3ea2424c09
--- /dev/null
+++ b/packages/scripts/utils/test/licenses/apache2.txt
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
\ No newline at end of file
diff --git a/packages/scripts/utils/test/licenses/bsd3clause.txt b/packages/scripts/utils/test/licenses/bsd3clause.txt
new file mode 100644
index 00000000000000..ae5698f13265e4
--- /dev/null
+++ b/packages/scripts/utils/test/licenses/bsd3clause.txt
@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) [year], [fullname]
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
diff --git a/packages/scripts/utils/test/licenses/mit.txt b/packages/scripts/utils/test/licenses/mit.txt
new file mode 100644
index 00000000000000..00217dc586444b
--- /dev/null
+++ b/packages/scripts/utils/test/licenses/mit.txt
@@ -0,0 +1,7 @@
+Copyright <YEAR> <COPYRIGHT HOLDER>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/packages/scripts/utils/test/licenses/w3cbsd.txt b/packages/scripts/utils/test/licenses/w3cbsd.txt
new file mode 100644
index 00000000000000..dbab9e7687173c
--- /dev/null
+++ b/packages/scripts/utils/test/licenses/w3cbsd.txt
@@ -0,0 +1,9 @@
+# W3C 3-clause BSD License
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+*    Redistributions of works must retain the original copyright notice, this list of conditions and the following disclaimer.
+*    Redistributions in binary form must reproduce the original copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+*    Neither the name of the W3C nor the names of its contributors may be used to endorse or promote products derived from this work without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/server-side-render/.npmrc b/packages/server-side-render/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/server-side-render/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index 2852b799eb0c7a..66a8d7c03136bf 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,13 +2,121 @@
 
 ## Unreleased
 
+## 5.13.0 (2024-11-27)
+
+## 5.12.0 (2024-11-16)
+
+## 5.11.0 (2024-10-30)
+
+## 5.10.0 (2024-10-16)
+
+## 5.9.0 (2024-10-03)
+
+## 5.8.0 (2024-09-19)
+
+## 5.7.0 (2024-09-05)
+
+## 5.6.0 (2024-08-21)
+
+## 5.5.0 (2024-08-07)
+
+## 5.4.0 (2024-07-24)
+
+## 5.3.0 (2024-07-10)
+
+## 5.2.0 (2024-06-26)
+
+## 5.1.0 (2024-06-15)
+
+## 5.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 4.35.0 (2024-05-16)
+
+## 4.34.0 (2024-05-02)
+
+## 4.33.0 (2024-04-19)
+
+## 4.32.0 (2024-04-03)
+
+## 4.31.0 (2024-03-21)
+
+## 4.30.0 (2024-03-06)
+
+## 4.29.0 (2024-02-21)
+
+## 4.28.0 (2024-02-09)
+
+## 4.27.0 (2024-01-24)
+
+## 4.26.0 (2024-01-10)
+
+## 4.25.0 (2023-12-13)
+
+## 4.24.0 (2023-11-29)
+
+## 4.23.0 (2023-11-16)
+
+## 4.22.0 (2023-11-02)
+
+## 4.21.0 (2023-10-18)
+
+## 4.20.0 (2023-10-05)
+
+## 4.19.0 (2023-09-20)
+
+## 4.18.0 (2023-08-31)
+
+## 4.17.0 (2023-08-16)
+
+## 4.16.0 (2023-08-10)
+
+## 4.15.0 (2023-07-20)
+
+## 4.14.0 (2023-07-05)
+
+## 4.13.0 (2023-06-23)
+
+## 4.12.0 (2023-06-07)
+
+## 4.11.0 (2023-05-24)
+
+## 4.10.0 (2023-05-10)
+
+## 4.9.0 (2023-04-26)
+
+## 4.8.0 (2023-04-12)
+
+## 4.7.0 (2023-03-29)
+
+## 4.6.0 (2023-03-15)
+
+## 4.5.0 (2023-03-01)
+
+## 4.4.0 (2023-02-15)
+
+## 4.3.0 (2023-02-01)
+
+## 4.2.0 (2023-01-11)
+
+## 4.1.0 (2023-01-02)
+
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)
 
 ## 3.18.0 (2022-10-19)
 
-### Feature
+### New Features
 
 -   Add `skipBlockSupportAttributes` props to prevent duplication of styles in the block wrapper and the `ServerSideRender` components. [#44491](https://github.com/WordPress/gutenberg/pull/44491)
 
@@ -48,7 +156,7 @@
 
 ## 3.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -67,19 +175,19 @@
 
 ## 1.17.0 (2020-09-03)
 
-### Feature
+### New Features
 
 -   Add an optional prop `httpMethod`, which can be 'POST' or the default 'GET'. Requires WP 5.5 or later. When 'POST', this sends the attributes in the request body, not in the URL. This can allow a bigger attributes object. [#21068](https://github.com/WordPress/gutenberg/pull/21068)
 
 ## 1.7.0 (2020-02-04)
 
-### Bug
+### Bug Fixes
 
 -   Fix errant `className` being output on default empty placeholder. [#19555](https://github.com/WordPress/gutenberg/pull/19555)
 
 ## 1.2.0 (2019-08-29)
 
-### Feature
+### New Features
 
 -   Add `EmptyResponsePlaceholder`, `ErrorResponsePlaceholder` and `LoadingResponsePlaceholder` render props for parent components to swap out alternate placeholders for the various states (see https://github.com/WordPress/gutenberg/pull/16512).
 
diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md
index 9c780868931475..ef7cd9bf0189c1 100644
--- a/packages/server-side-render/README.md
+++ b/packages/server-side-render/README.md
@@ -79,7 +79,7 @@ add_filter( 'rest_endpoints', 'add_rest_method');
 
 ### skipBlockSupportAttributes
 
-Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `__experimentalSkipSerialization`, all attributes and style properties are removed.
+Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `skipSerialization`, all attributes and style properties are removed.
 
 -   Type: `Boolean`
 -   Required: No
@@ -170,7 +170,7 @@ If you pass `attributes` to `ServerSideRender`, the block must also be registere
 register_block_type(
 	'core/archives',
 	array(
-		'api_version' => 2,
+		'api_version' => 3,
 		'attributes'      => array(
 			'showPostCounts'    => array(
 				'type'      => 'boolean',
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 2c700e17077b16..d2cd9aa93d2cef 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "3.20.0",
+	"version": "5.13.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -20,27 +20,29 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/blocks": "file:../blocks",
-		"@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/url": "file:../url",
-		"lodash": "^4.17.21"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/url": "*",
+		"fast-deep-equal": "^3.1.3"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/server-side-render/src/index.js b/packages/server-side-render/src/index.js
index 80e0033707cd90..6dcdc31f461091 100644
--- a/packages/server-side-render/src/index.js
+++ b/packages/server-side-render/src/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, forwardRef } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -47,15 +46,4 @@ const ExportedServerSideRender = withSelect( ( select ) => {
 	return <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;
 } );
 
-if ( window && window.wp && window.wp.components ) {
-	window.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {
-		deprecated( 'wp.components.ServerSideRender', {
-			version: '6.2',
-			since: '5.3',
-			alternative: 'wp.serverSideRender',
-		} );
-		return <ExportedServerSideRender { ...props } ref={ ref } />;
-	} );
-}
-
 export default ExportedServerSideRender;
diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
index 07d120e11440d4..45a651e8cced6c 100644
--- a/packages/server-side-render/src/server-side-render.js
+++ b/packages/server-side-render/src/server-side-render.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -98,7 +98,7 @@ export default function ServerSideRender( props ) {
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
 	} = props;
 
-	const isMountedRef = useRef( true );
+	const isMountedRef = useRef( false );
 	const [ showLoader, setShowLoader ] = useState( false );
 	const fetchRequestRef = useRef();
 	const [ response, setResponse ] = useState( null );
@@ -112,6 +112,11 @@ export default function ServerSideRender( props ) {
 
 		setIsLoading( true );
 
+		// Schedule showing the Spinner after 1 second.
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, 1000 );
+
 		let sanitizedAttributes =
 			attributes &&
 			__experimentalSanitizeBlockAttributes( block, attributes );
@@ -165,6 +170,9 @@ export default function ServerSideRender( props ) {
 					fetchRequest === fetchRequestRef.current
 				) {
 					setIsLoading( false );
+					// Cancel the timeout to show the Spinner.
+					setShowLoader( false );
+					clearTimeout( timeout );
 				}
 			} ) );
 
@@ -175,38 +183,23 @@ export default function ServerSideRender( props ) {
 
 	// When the component unmounts, set isMountedRef to false. This will
 	// let the async fetch callbacks know when to stop.
-	useEffect(
-		() => () => {
+	useEffect( () => {
+		isMountedRef.current = true;
+		return () => {
 			isMountedRef.current = false;
-		},
-		[]
-	);
+		};
+	}, [] );
 
 	useEffect( () => {
 		// Don't debounce the first fetch. This ensures that the first render
 		// shows data as soon as possible.
 		if ( prevProps === undefined ) {
 			fetchData();
-		} else if ( ! isEqual( prevProps, props ) ) {
+		} else if ( ! fastDeepEqual( prevProps, props ) ) {
 			debouncedFetchData();
 		}
 	} );
 
-	/**
-	 * Effect to handle showing the loading placeholder.
-	 * Show it only if there is no previous response or
-	 * the request takes more than one second.
-	 */
-	useEffect( () => {
-		if ( ! isLoading ) {
-			return;
-		}
-		const timeout = setTimeout( () => {
-			setShowLoader( true );
-		}, 1000 );
-		return () => clearTimeout( timeout );
-	}, [ isLoading ] );
-
 	const hasResponse = !! response;
 	const hasEmptyResponse = response === '';
 	const hasError = response?.error;
diff --git a/packages/shortcode/.npmrc b/packages/shortcode/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/shortcode/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index 87b065ff0bc50f..2e461f1bc85c1b 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## Enhancements
+
+-   The package now has built-in TypeScript definitions 🎉 ([#67416](https://github.com/WordPress/gutenberg/pull/67416))
+
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -63,6 +171,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/shortcode/README.md b/packages/shortcode/README.md
index 4fd5f4eee58f9c..b6042ab284fe42 100644
--- a/packages/shortcode/README.md
+++ b/packages/shortcode/README.md
@@ -20,15 +20,11 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 Parse shortcode attributes.
 
-Shortcodes accept many types of attributes. These can chiefly be divided into
-named and numeric attributes:
+Shortcodes accept many types of attributes. These can chiefly be divided into named and numeric attributes:
 
-Named attributes are assigned on a key/value basis, while numeric attributes
-are treated as an array.
+Named attributes are assigned on a key/value basis, while numeric attributes are treated as an array.
 
-Named attributes can be formatted as either `name="value"`, `name='value'`,
-or `name=value`. Numeric attributes can be formatted as `"value"` or just
-`value`.
+Named attributes can be formatted as either `name="value"`, `name='value'`, or `name=value`. Numeric attributes can be formatted as `"value"` or just `value`.
 
 _Parameters_
 
@@ -36,40 +32,31 @@ _Parameters_
 
 _Returns_
 
--   `WPShortcodeAttrs`: Parsed shortcode attributes.
+-   `import('./types').ShortcodeAttrs`: Parsed shortcode attributes.
 
 ### default
 
 Creates a shortcode instance.
 
-To access a raw representation of a shortcode, pass an `options` object,
-containing a `tag` string, a string or object of `attrs`, a string indicating
-the `type` of the shortcode ('single', 'self-closing', or 'closed'), and a
-`content` string.
+To access a raw representation of a shortcode, pass an `options` object, containing a `tag` string, a string or object of `attrs`, a string indicating the `type` of the shortcode ('single', 'self-closing', or 'closed'), and a `content` string.
 
-_Parameters_
-
--   _options_ `Object`: Options as described.
-
-_Returns_
+_Type_
 
--   `WPShortcode`: Shortcode instance.
+-   `import('./types').shortcode`Shortcode instance.
 
 ### fromMatch
 
 Generate a Shortcode Object from a RegExp match.
 
-Accepts a `match` object from calling `regexp.exec()` on a `RegExp` generated
-by `regexp()`. `match` can also be set to the `arguments` from a callback
-passed to `regexp.replace()`.
+Accepts a `match` object from calling `regexp.exec()` on a `RegExp` generated by `regexp()`. `match` can also be set to the `arguments` from a callback passed to `regexp.replace()`.
 
 _Parameters_
 
--   _match_ `Array`: Match array.
+-   _match_ `import('./types').Match`: Match array.
 
 _Returns_
 
--   `WPShortcode`: Shortcode instance.
+-   `InstanceType<import('./types').shortcode>`: Shortcode instance.
 
 ### next
 
@@ -83,14 +70,13 @@ _Parameters_
 
 _Returns_
 
--   `?WPShortcodeMatch`: Matched information.
+-   `import('./types').ShortcodeMatch | undefined`: Matched information.
 
 ### regexp
 
 Generate a RegExp to identify a shortcode.
 
-The base regex is functionally equivalent to the one found in
-`get_shortcode_regex()` in `wp-includes/shortcodes.php`.
+The base regex is functionally equivalent to the one found in `get_shortcode_regex()` in `wp-includes/shortcodes.php`.
 
 Capture groups:
 
@@ -118,7 +104,7 @@ _Parameters_
 
 -   _tag_ `string`: Shortcode tag.
 -   _text_ `string`: Text to search.
--   _callback_ `Function`: Function to process the match and return replacement string.
+-   _callback_ `import('./types').ReplaceCallback`: Function to process the match and return replacement string.
 
 _Returns_
 
@@ -130,9 +116,7 @@ Generate a string from shortcode parameters.
 
 Creates a shortcode instance and returns a string.
 
-Accepts the same `options` as the `shortcode()` constructor, containing a
-`tag` string, a string or object of `attrs`, a boolean indicating whether to
-format the shortcode using a `single` tag, and a `content` string.
+Accepts the same `options` as the `shortcode()` constructor, containing a `tag` string, a string or object of `attrs`, a boolean indicating whether to format the shortcode using a `single` tag, and a `content` string.
 
 _Parameters_
 
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 3b9453340a85d5..c5495364a03c45 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,14 +19,17 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"memize": "^1.1.0"
+		"@babel/runtime": "7.25.7",
+		"memize": "^2.0.1"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/shortcode/src/index.js b/packages/shortcode/src/index.js
index ba72b6273877ed..4d99086033e957 100644
--- a/packages/shortcode/src/index.js
+++ b/packages/shortcode/src/index.js
@@ -3,34 +3,7 @@
  */
 import memize from 'memize';
 
-/**
- * Shortcode attributes object.
- *
- * @typedef {Object} WPShortcodeAttrs
- *
- * @property {Object} named   Object with named attributes.
- * @property {Array}  numeric Array with numeric attributes.
- */
-
-/**
- * Shortcode object.
- *
- * @typedef {Object} WPShortcode
- *
- * @property {string}           tag     Shortcode tag.
- * @property {WPShortcodeAttrs} attrs   Shortcode attributes.
- * @property {string}           content Shortcode content.
- * @property {string}           type    Shortcode type: `self-closing`,
- *                                      `closed`, or `single`.
- */
-
-/**
- * @typedef {Object} WPShortcodeMatch
- *
- * @property {number}      index     Index the shortcode is found at.
- * @property {string}      content   Matched content.
- * @property {WPShortcode} shortcode Shortcode instance of the match.
- */
+export * from './types';
 
 /**
  * Find the next matching shortcode.
@@ -39,7 +12,7 @@ import memize from 'memize';
  * @param {string} text  Text to search.
  * @param {number} index Index to start search from.
  *
- * @return {?WPShortcodeMatch} Matched information.
+ * @return {import('./types').ShortcodeMatch | undefined} Matched information.
  */
 export function next( tag, text, index = 0 ) {
 	const re = regexp( tag );
@@ -81,10 +54,10 @@ export function next( tag, text, index = 0 ) {
 /**
  * Replace matching shortcodes in a block of text.
  *
- * @param {string}   tag      Shortcode tag.
- * @param {string}   text     Text to search.
- * @param {Function} callback Function to process the match and return
- *                            replacement string.
+ * @param {string}                            tag      Shortcode tag.
+ * @param {string}                            text     Text to search.
+ * @param {import('./types').ReplaceCallback} callback Function to process the match and return
+ *                                                     replacement string.
  *
  * @return {string} Text with shortcodes replaced.
  */
@@ -169,7 +142,7 @@ export function regexp( tag ) {
  *
  * @param {string} text Serialised shortcode attributes.
  *
- * @return {WPShortcodeAttrs} Parsed shortcode attributes.
+ * @return {import('./types').ShortcodeAttrs} Parsed shortcode attributes.
  */
 export const attrs = memize( ( text ) => {
 	const named = {};
@@ -224,9 +197,9 @@ export const attrs = memize( ( text ) => {
  * by `regexp()`. `match` can also be set to the `arguments` from a callback
  * passed to `regexp.replace()`.
  *
- * @param {Array} match Match array.
+ * @param {import('./types').Match} match Match array.
  *
- * @return {WPShortcode} Shortcode instance.
+ * @return {InstanceType<import('./types').shortcode>} Shortcode instance.
  */
 export function fromMatch( match ) {
 	let type;
@@ -255,9 +228,7 @@ export function fromMatch( match ) {
  * the `type` of the shortcode ('single', 'self-closing', or 'closed'), and a
  * `content` string.
  *
- * @param {Object} options Options as described.
- *
- * @return {WPShortcode} Shortcode instance.
+ * @type {import('./types').shortcode} Shortcode instance.
  */
 const shortcode = Object.assign(
 	function ( options ) {
@@ -328,7 +299,7 @@ Object.assign( shortcode.prototype, {
 	 * @param {(number|string)} attr  Attribute key.
 	 * @param {string}          value Attribute value.
 	 *
-	 * @return {WPShortcode} Shortcode instance.
+	 * @return {InstanceType< import('./types').shortcode >} Shortcode instance.
 	 */
 	set( attr, value ) {
 		this.attrs[ typeof attr === 'number' ? 'numeric' : 'named' ][ attr ] =
diff --git a/packages/shortcode/src/types.ts b/packages/shortcode/src/types.ts
new file mode 100644
index 00000000000000..2b9ae084cc31a6
--- /dev/null
+++ b/packages/shortcode/src/types.ts
@@ -0,0 +1,210 @@
+/**
+ * Shortcode attributes object.
+ */
+export type ShortcodeAttrs = {
+	/**
+	 * Object with named attributes.
+	 */
+	named: Record< string, string | undefined >;
+
+	/**
+	 * Array with numeric attributes.
+	 */
+	numeric: string[];
+};
+
+export type ShortcodeMatch = {
+	/**
+	 * Index the shortcode is found at.
+	 */
+	index: number;
+
+	/**
+	 * Matched content.
+	 */
+	content: string;
+
+	/**
+	 * Shortcode instance of the match.
+	 */
+	shortcode: Shortcode;
+};
+
+/**
+ * Shortcode options.
+ */
+export interface ShortcodeOptions {
+	/**
+	 * Shortcode tag.
+	 */
+	tag: string;
+
+	/**
+	 * Shortcode attributes.
+	 */
+	attrs?: Partial< ShortcodeAttrs > | string;
+
+	/**
+	 * Shortcode content.
+	 */
+	content?: string;
+
+	/**
+	 * Shortcode type: `self-closing`, `closed`, or `single`.
+	 */
+	type?: 'self-closing' | 'closed' | 'single';
+}
+
+/**
+ * Shortcode object.
+ */
+export interface Shortcode extends ShortcodeOptions {
+	/**
+	 * Shortcode attributes.
+	 */
+	attrs: ShortcodeAttrs;
+}
+
+export type Match =
+	| NonNullable< ReturnType< RegExp[ 'exec' ] > >
+	| Array< string >;
+
+export type ReplaceCallback = ( shortcode: Shortcode ) => string;
+
+/**
+ * WordPress Shortcode instance.
+ */
+export interface shortcode {
+	new ( options: Partial< ShortcodeOptions > ): Shortcode & {
+		/**
+		 * Transform the shortcode into a string.
+		 *
+		 * @return {string} String representation of the shortcode.
+		 */
+		string: () => string;
+
+		/**
+		 * Get a shortcode attribute.
+		 *
+		 * Automatically detects whether `attr` is named or numeric and routes it
+		 * accordingly.
+		 *
+		 * @param {(number|string)} attr Attribute key.
+		 *
+		 * @return {string} Attribute value.
+		 */
+		get: ( attr: string | number ) => string | undefined;
+
+		/**
+		 * Set a shortcode attribute.
+		 *
+		 * Automatically detects whether `attr` is named or numeric and routes it
+		 * accordingly.
+		 *
+		 * @param {(number|string)} attr  Attribute key.
+		 * @param {string}          value Attribute value.
+		 *
+		 * @return {InstanceType< shortcode >} Shortcode instance.
+		 */
+		set: (
+			attr: string | number,
+			value: string
+		) => InstanceType< shortcode >;
+	};
+
+	/**
+	 * Parse shortcode attributes.
+	 *
+	 * Shortcodes accept many types of attributes. These can chiefly be divided into
+	 * named and numeric attributes:
+	 *
+	 * Named attributes are assigned on a key/value basis, while numeric attributes
+	 * are treated as an array.
+	 *
+	 * Named attributes can be formatted as either `name="value"`, `name='value'`,
+	 * or `name=value`. Numeric attributes can be formatted as `"value"` or just
+	 * `value`.
+	 *
+	 * @param text Serialised shortcode attributes.
+	 *
+	 * @return Parsed shortcode attributes.
+	 */
+	attrs: ( text: string ) => ShortcodeAttrs;
+
+	/**
+	 * Generate a Shortcode Object from a RegExp match.
+	 *
+	 * Accepts a `match` object from calling `regexp.exec()` on a `RegExp` generated
+	 * by `regexp()`. `match` can also be set to the `arguments` from a callback
+	 * passed to `regexp.replace()`.
+	 *
+	 * @param match Match array.
+	 *
+	 * @return  Shortcode instance.
+	 */
+	fromMatch: ( match: Match ) => InstanceType< shortcode >;
+
+	/**
+	 * Find the next matching shortcode.
+	 *
+	 * @param tag   Shortcode tag.
+	 * @param text  Text to search.
+	 * @param index Index to start search from.
+	 *
+	 * @return Matched information.
+	 */
+	next: (
+		tag: string,
+		text: string,
+		index?: number
+	) => ShortcodeMatch | undefined;
+
+	/**
+	 * Generate a RegExp to identify a shortcode.
+	 *
+	 * The base regex is functionally equivalent to the one found in
+	 * `get_shortcode_regex()` in `wp-includes/shortcodes.php`.
+	 *
+	 * Capture groups:
+	 *
+	 * 1. An extra `[` to allow for escaping shortcodes with double `[[]]`
+	 * 2. The shortcode name
+	 * 3. The shortcode argument list
+	 * 4. The self closing `/`
+	 * 5. The content of a shortcode when it wraps some content.
+	 * 6. The closing tag.
+	 * 7. An extra `]` to allow for escaping shortcodes with double `[[]]`
+	 *
+	 * @param tag Shortcode tag.
+	 *
+	 * @return Shortcode RegExp.
+	 */
+	regexp: ( tag: string ) => RegExp;
+
+	/**
+	 * Replace matching shortcodes in a block of text.
+	 *
+	 * @param tag      Shortcode tag.
+	 * @param text     Text to search.
+	 * @param callback Function to process the match and return
+	 *                 replacement string.
+	 *
+	 * @return Text with shortcodes replaced.
+	 */
+	replace: ( tag: string, text: string, callback: ReplaceCallback ) => string;
+
+	/**
+	 * Generate a string from shortcode parameters.
+	 *
+	 * Creates a shortcode instance and returns a string.
+	 *
+	 * Accepts the same `options` as the `shortcode()` constructor, containing a
+	 * `tag` string, a string or object of `attrs`, a boolean indicating whether to
+	 * format the shortcode using a `single` tag, and a `content` string.
+	 *
+	 * @param options
+	 *
+	 * @return  String representation of the shortcode.
+	 */
+	string: ( options: ShortcodeOptions ) => string;
+}
diff --git a/packages/shortcode/tsconfig.json b/packages/shortcode/tsconfig.json
new file mode 100644
index 00000000000000..79aa09d0ad56e3
--- /dev/null
+++ b/packages/shortcode/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false
+	},
+	"references": [],
+	"include": [ "src" ]
+}
diff --git a/packages/style-engine/.npmrc b/packages/style-engine/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/style-engine/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 4d6b59b54ff2f7..768ea039f24f36 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 2.13.0 (2024-11-27)
+
+## 2.12.0 (2024-11-16)
+
+## 2.11.0 (2024-10-30)
+
+## 2.10.0 (2024-10-16)
+
+## 2.9.0 (2024-10-03)
+
+## 2.8.0 (2024-09-19)
+
+## 2.7.0 (2024-09-05)
+
+## 2.6.0 (2024-08-21)
+
+### New Features
+
+-   Style engine: export util to compile CSS custom var from preset string. ([#64490](https://github.com/WordPress/gutenberg/pull/64490))
+
+## 2.5.0 (2024-08-07)
+
+## 2.4.0 (2024-07-24)
+
+## 2.3.0 (2024-07-10)
+
+## 2.2.0 (2024-06-26)
+
+## 2.1.0 (2024-06-15)
+
+## 2.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 1.41.0 (2024-05-16)
+
+## 1.40.0 (2024-05-02)
+
+## 1.39.0 (2024-04-19)
+
+## 1.38.0 (2024-04-03)
+
+## 1.37.0 (2024-03-21)
+
+## 1.36.0 (2024-03-06)
+
+## 1.35.0 (2024-02-21)
+
+## 1.34.0 (2024-02-09)
+
+## 1.33.0 (2024-01-24)
+
+## 1.32.0 (2024-01-10)
+
+## 1.31.0 (2023-12-13)
+
+## 1.30.0 (2023-11-29)
+
+## 1.29.0 (2023-11-16)
+
+## 1.28.0 (2023-11-02)
+
+## 1.27.0 (2023-10-18)
+
+## 1.26.0 (2023-10-05)
+
+## 1.25.0 (2023-09-20)
+
+## 1.24.0 (2023-08-31)
+
+## 1.23.0 (2023-08-16)
+
+## 1.22.0 (2023-08-10)
+
+### Bug Fixes
+
+-   Style engine: switch off optimize by default [#53085](https://github.com/WordPress/gutenberg/pull/53085).
+
+## 1.21.0 (2023-07-20)
+
+## 1.20.0 (2023-07-05)
+
+## 1.19.0 (2023-06-23)
+
+## 1.18.0 (2023-06-07)
+
+## 1.17.0 (2023-05-24)
+
+## 1.16.0 (2023-05-10)
+
+## 1.15.0 (2023-04-26)
+
+## 1.14.0 (2023-04-12)
+
+## 1.13.0 (2023-03-29)
+
+## 1.12.0 (2023-03-15)
+
+## 1.11.0 (2023-03-01)
+
+## 1.10.0 (2023-02-15)
+
+## 1.9.0 (2023-02-01)
+
+## 1.8.0 (2023-01-11)
+
+## 1.7.0 (2023-01-02)
+
+## 1.6.0 (2022-12-14)
+
 ## 1.5.0 (2022-11-16)
 
 ## 1.4.0 (2022-11-02)
@@ -9,24 +121,29 @@
 ## 1.3.0 (2022-10-19)
 
 ### Internal
+
 -   Style Engine: move PHP unit tests to Gutenberg [#44722](https://github.com/WordPress/gutenberg/pull/44722)
 
 ## 1.2.0 (2022-10-05)
 
 ### Internal
+
 -   Script loader: remove 6.1 wp actions ([#44519](https://github.com/WordPress/gutenberg/pull/44519))
 
 ## 1.1.0 (2022-09-21)
 
-### Enhancement
+### Enhancements
+
 -   Allow for prettified output ([#42909](https://github.com/WordPress/gutenberg/pull/42909)).
 -   Enqueue block supports styles in Gutenberg ([#42880](https://github.com/WordPress/gutenberg/pull/42880)).
 
 ### Internal
+
 -   Move backend scripts to package ([#39736](https://github.com/WordPress/gutenberg/pull/39736)).
 -   Updating docs, formatting, and separating global functions from the main class file ([#43840](https://github.com/WordPress/gutenberg/pull/43840)).
 
 ### New Features
+
 -   Add a WP_Style_Engine_Processor object ([#42463](https://github.com/WordPress/gutenberg/pull/42463)).
 -   Add a WP_Style_Engine_CSS_Declarations object ([#42043](https://github.com/WordPress/gutenberg/pull/42043)).
 -   Add Rules and Store objects ([#42222](https://github.com/WordPress/gutenberg/pull/42222)).
diff --git a/packages/style-engine/CONTRIBUTING.md b/packages/style-engine/CONTRIBUTING.md
index 70bfddb8eb5011..ab65920229b607 100644
--- a/packages/style-engine/CONTRIBUTING.md
+++ b/packages/style-engine/CONTRIBUTING.md
@@ -4,7 +4,7 @@ This document contains information you might need to know when extending or debu
 
 ## Workflow and build tooling
 
-The Style Engine PHP and Javascript (JS) files exist inside the `style-engine` package. 
+The Style Engine PHP and JavaScript (JS) files exist inside the `style-engine` package.
 
 In order to use the Style Engine in the Block Editor, these files must be compiled (in the case of JS) and copied to the build folder.
 
@@ -29,9 +29,9 @@ To start the JS unit tests, run:
 
 `npm run test:unit packages/style-engine/src/test/`
 
-[PHP unit tests](https://github.com/WordPress/gutenberg/tree/HEAD/phpunit/style-engine) are located in the root `phpunit` directory. 
+[PHP unit tests](https://github.com/WordPress/gutenberg/tree/HEAD/phpunit/style-engine) are located in the root `phpunit` directory.
 
-In order to test the latest version of the Style Engine and avoid conflicts with existing Core equivalents, all PHP unit tests call the `gutenberg_` functions and `_Gutenberg` classes. 
+In order to test the latest version of the Style Engine and avoid conflicts with existing Core equivalents, all PHP unit tests call the `gutenberg_` functions and `_Gutenberg` classes.
 
 Therefore, Style Engine PHP source files should be parsed and copied to the build folder before running tests. During development, this will happen as part of the `npm run dev` script. You can also trigger a build by executing `npm run build`.
 
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 999fab2aa835e9..a3e302fab4bb9a 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -17,7 +17,7 @@ Upcoming tasks on the roadmap include, but are not limited to, the following:
 -   Propose a way to control hierarchy and specificity, and make the style hierarchy cascade accessible and predictable. This might include preparing for CSS cascade layers until they become more widely supported, and allowing for opt-in support in Gutenberg via theme.json.
 -   Refactor all blocks to consistently use the "style" attribute for all customizations, that is, deprecate preset-specific attributes such as `attributes.fontSize`.
 
-For more information about the roadmap, please refer to [Block editor styles: initiatives and goals](https://make.wordpress.org/core/2022/06/24/block-editor-styles-initiatives-and-goals/) and the [Github project board](https://github.com/orgs/WordPress/projects/19).
+For more information about the roadmap, please refer to [Block editor styles: initiatives and goals](https://make.wordpress.org/core/2022/06/24/block-editor-styles-initiatives-and-goals/) and the [GitHub project board](https://github.com/orgs/WordPress/projects/19).
 
 If you're making changes or additions to the Style Engine, please take a moment to read the [notes on contributing](https://github.com/WordPress/gutenberg/tree/HEAD/packages/style-engine/CONTRIBUTING.md).
 
@@ -108,7 +108,7 @@ _Returns_
 
 Useful for when you wish to compile a bespoke set of CSS rules from a series of selector + declaration items.
 
-The Style Engine will return a sanitized and optimized stylesheet. By passing a `context` identifier in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
+The Style Engine will return a sanitized stylesheet. By passing a `context` identifier in the options, the Style Engine will store the styles for later retrieval, for example, should you wish to batch enqueue a set of CSS rules.
 
 You can call `wp_style_engine_get_stylesheet_from_css_rules()` multiple times, and, so long as your styles use the same `context` identifier, they will be stored together.
 
@@ -126,10 +126,31 @@ $styles = array(
         'selector'     => '.wp-tomato',
         'declarations' => array( 'padding' => '100px' )
     ),
+);
+
+$stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+    $styles,
+    array(
+        'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
+    )
+);
+print_r( $stylesheet ); // .wp-pumpkin{color:orange}.wp-tomato{color:red;padding:100px}
+```
+
+It's also possible to build simple, nested CSS rules using the `rules_group` key.
+
+```php
+$styles = array(
     array(
-        'selector'     => '.wp-kumquat',
+        'rules_group'  => '@media (min-width: 80rem)',
+        'selector'     => '.wp-carrot',
         'declarations' => array( 'color' => 'orange' )
     ),
+    array(
+        'rules_group'  => '@media (min-width: 80rem)',
+        'selector'     => '.wp-tomato',
+        'declarations' => array( 'color' => 'red' )
+    ),
 );
 
 $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
@@ -138,7 +159,7 @@ $stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
         'context' => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
     )
 );
-print_r( $stylesheet ); // .wp-pumpkin,.wp-kumquat{color:orange}.wp-tomato{color:red;padding:100px}
+print_r( $stylesheet ); // @media (min-width: 80rem){.wp-carrot{color:orange}}@media (min-width: 80rem){.wp-tomato{color:red;}}
 ```
 
 ### wp_style_engine_get_stylesheet_from_context()
@@ -237,6 +258,24 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
+### getCSSValueFromRawStyle
+
+Returns a WordPress CSS custom var value from incoming style preset value, if one is detected.
+
+The preset value is a string and follows the pattern `var:description|context|slug`.
+
+Example:
+
+`getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+
+_Parameters_
+
+-   _styleValue_ `StyleValue`: A string representing a raw CSS value. Non-strings won't be processed.
+
+_Returns_
+
+-   `StyleValue`: A CSS custom var value if the incoming style value is a preset value.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary
diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
index 6e7fdfc58e08ff..79d0c8a4afcb74 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -7,195 +7,162 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
-	return;
-}
+if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
 
-/**
- * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
- *
- * @access private
- */
-class WP_Style_Engine_CSS_Declarations {
 	/**
-	 * An array of valid CSS custom properties.
-	 * CSS custom properties are permitted by safecss_filter_attr()
-	 * since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
+	 * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
 	 *
-	 * This whitelist exists so that the Gutenberg plugin maintains
-	 * backwards compatibility with versions of WordPress < 6.1.
-	 *
-	 * It does not need to be backported to future versions of WordPress.
-	 *
-	 * @var array
+	 * @access private
 	 */
-	protected static $valid_custom_declarations = array(
-		'--wp--style--unstable-gallery-gap' => 'gap',
-	);
+	class WP_Style_Engine_CSS_Declarations {
+		/**
+		 * An array of CSS declarations (property => value pairs).
+		 *
+		 * @var array
+		 */
+		protected $declarations = array();
 
-	/**
-	 * An array of CSS declarations (property => value pairs).
-	 *
-	 * @var array
-	 */
-	protected $declarations = array();
+		/**
+		 * Constructor for this object.
+		 *
+		 * If a `$declarations` array is passed, it will be used to populate
+		 * the initial $declarations prop of the object by calling add_declarations().
+		 *
+		 * @param string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+		 */
+		public function __construct( $declarations = array() ) {
+			$this->add_declarations( $declarations );
+		}
 
-	/**
-	 * Constructor for this object.
-	 *
-	 * If a `$declarations` array is passed, it will be used to populate
-	 * the initial $declarations prop of the object by calling add_declarations().
-	 *
-	 * @param string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 */
-	public function __construct( $declarations = array() ) {
-		$this->add_declarations( $declarations );
-	}
+		/**
+		 * Adds a single declaration.
+		 *
+		 * @param string $property The CSS property.
+		 * @param string $value    The CSS value.
+		 *
+		 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
+		 */
+		public function add_declaration( $property, $value ) {
+			// Sanitizes the property.
+			$property = $this->sanitize_property( $property );
+			// Bails early if the property is empty.
+			if ( empty( $property ) ) {
+				return $this;
+			}
+
+			// Trims the value. If empty, bail early.
+			$value = trim( $value );
+			if ( '' === $value ) {
+				return $this;
+			}
+
+			// Adds the declaration property/value pair.
+			$this->declarations[ $property ] = $value;
 
-	/**
-	 * Adds a single declaration.
-	 *
-	 * @param string $property The CSS property.
-	 * @param string $value    The CSS value.
-	 *
-	 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
-	 */
-	public function add_declaration( $property, $value ) {
-		// Sanitizes the property.
-		$property = $this->sanitize_property( $property );
-		// Bails early if the property is empty.
-		if ( empty( $property ) ) {
 			return $this;
 		}
 
-		// Trims the value. If empty, bail early.
-		$value = trim( $value );
-		if ( '' === $value ) {
+		/**
+		 * Removes a single declaration.
+		 *
+		 * @param string $property The CSS property.
+		 *
+		 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
+		 */
+		public function remove_declaration( $property ) {
+			unset( $this->declarations[ $property ] );
 			return $this;
 		}
 
-		// Adds the declaration property/value pair.
-		$this->declarations[ $property ] = $value;
-
-		return $this;
-	}
-
-	/**
-	 * Removes a single declaration.
-	 *
-	 * @param string $property The CSS property.
-	 *
-	 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
-	 */
-	public function remove_declaration( $property ) {
-		unset( $this->declarations[ $property ] );
-		return $this;
-	}
-
-	/**
-	 * Adds multiple declarations.
-	 *
-	 * @param array $declarations An array of declarations.
-	 *
-	 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
-	 */
-	public function add_declarations( $declarations ) {
-		foreach ( $declarations as $property => $value ) {
-			$this->add_declaration( $property, $value );
+		/**
+		 * Adds multiple declarations.
+		 *
+		 * @param array $declarations An array of declarations.
+		 *
+		 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
+		 */
+		public function add_declarations( $declarations ) {
+			foreach ( $declarations as $property => $value ) {
+				$this->add_declaration( $property, $value );
+			}
+			return $this;
 		}
-		return $this;
-	}
 
-	/**
-	 * Removes multiple declarations.
-	 *
-	 * @param array $properties An array of properties.
-	 *
-	 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
-	 */
-	public function remove_declarations( $properties = array() ) {
-		foreach ( $properties as $property ) {
-			$this->remove_declaration( $property );
+		/**
+		 * Removes multiple declarations.
+		 *
+		 * @param array $properties An array of properties.
+		 *
+		 * @return WP_Style_Engine_CSS_Declarations Returns the object to allow chaining methods.
+		 */
+		public function remove_declarations( $properties = array() ) {
+			foreach ( $properties as $property ) {
+				$this->remove_declaration( $property );
+			}
+			return $this;
 		}
-		return $this;
-	}
-
-	/**
-	 * Gets the declarations array.
-	 *
-	 * @return array
-	 */
-	public function get_declarations() {
-		return $this->declarations;
-	}
-
-	/**
-	 * Filters a CSS property + value pair.
-	 *
-	 * @param string $property The CSS property.
-	 * @param string $value    The value to be filtered.
-	 * @param string $spacer   The spacer between the colon and the value. Defaults to an empty string.
-	 *
-	 * @return string The filtered declaration or an empty string.
-	 */
-	protected static function filter_declaration( $property, $value, $spacer = '' ) {
-		$filtered_value = wp_strip_all_tags( $value, true );
 
 		/**
-		 * Allows a specific list of CSS custom properties starting with `--wp--`.
+		 * Gets the declarations array.
 		 *
-		 * CSS custom properties are permitted by safecss_filter_attr()
-		 * since WordPress 6.1. See: https://core.trac.wordpress.org/ticket/56353.
+		 * @return array
+		 */
+		public function get_declarations() {
+			return $this->declarations;
+		}
+
+		/**
+		 * Filters a CSS property + value pair.
 		 *
-		 * This condition exists so that the Gutenberg plugin maintains
-		 * backwards compatibility with versions of WordPress < 6.1.
+		 * @param string $property The CSS property.
+		 * @param string $value    The value to be filtered.
+		 * @param string $spacer   The spacer between the colon and the value. Defaults to an empty string.
 		 *
-		 * It does not need to be backported to future versions of WordPress.
+		 * @return string The filtered declaration or an empty string.
 		 */
-		if ( '' !== $filtered_value && isset( static::$valid_custom_declarations[ $property ] ) ) {
-			return safecss_filter_attr( static::$valid_custom_declarations[ $property ] . ":{$spacer}{$value}" ) ?
-				"{$property}:{$spacer}{$value}" : '';
-		}
+		protected static function filter_declaration( $property, $value, $spacer = '' ) {
+			$filtered_value = wp_strip_all_tags( $value, true );
 
-		if ( '' !== $filtered_value ) {
-			return safecss_filter_attr( "{$property}:{$spacer}{$filtered_value}" );
+			if ( '' !== $filtered_value ) {
+				return safecss_filter_attr( "{$property}:{$spacer}{$filtered_value}" );
+			}
+			return '';
 		}
-		return '';
-	}
 
-	/**
-	 * Filters and compiles the CSS declarations.
-	 *
-	 * @param bool   $should_prettify Whether to add spacing, new lines and indents.
-	 * @param number $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
-	 *
-	 * @return string The CSS declarations.
-	 */
-	public function get_declarations_string( $should_prettify = false, $indent_count = 0 ) {
-		$declarations_array  = $this->get_declarations();
-		$declarations_output = '';
-		$indent              = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
-		$suffix              = $should_prettify ? ' ' : '';
-		$suffix              = $should_prettify && $indent_count > 0 ? "\n" : $suffix;
-		$spacer              = $should_prettify ? ' ' : '';
-
-		foreach ( $declarations_array as $property => $value ) {
-			$filtered_declaration = static::filter_declaration( $property, $value, $spacer );
-			if ( $filtered_declaration ) {
-				$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
+		/**
+		 * Filters and compiles the CSS declarations.
+		 *
+		 * @param bool   $should_prettify Whether to add spacing, new lines and indents.
+		 * @param number $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
+		 *
+		 * @return string The CSS declarations.
+		 */
+		public function get_declarations_string( $should_prettify = false, $indent_count = 0 ) {
+			$declarations_array  = $this->get_declarations();
+			$declarations_output = '';
+			$indent              = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
+			$suffix              = $should_prettify ? ' ' : '';
+			$suffix              = $should_prettify && $indent_count > 0 ? "\n" : $suffix;
+			$spacer              = $should_prettify ? ' ' : '';
+
+			foreach ( $declarations_array as $property => $value ) {
+				$filtered_declaration = static::filter_declaration( $property, $value, $spacer );
+				if ( $filtered_declaration ) {
+					$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
+				}
 			}
+			return rtrim( $declarations_output );
 		}
-		return rtrim( $declarations_output );
-	}
 
-	/**
-	 * Sanitizes property names.
-	 *
-	 * @param string $property The CSS property.
-	 *
-	 * @return string The sanitized property name.
-	 */
-	protected function sanitize_property( $property ) {
-		return sanitize_key( $property );
+		/**
+		 * Sanitizes property names.
+		 *
+		 * @param string $property The CSS property.
+		 *
+		 * @return string The sanitized property name.
+		 */
+		protected function sanitize_property( $property ) {
+			return sanitize_key( $property );
+		}
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 76ba12673aeda5..12fe5fab23f723 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -7,121 +7,160 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
-	return;
-}
-
-/**
- * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
- *
- * @access private
- */
-class WP_Style_Engine_CSS_Rule {
+if ( ! class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
 
 	/**
-	 * The selector.
+	 * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
 	 *
-	 * @var string
+	 * @access private
 	 */
-	protected $selector;
+	class WP_Style_Engine_CSS_Rule {
 
-	/**
-	 * The selector declarations.
-	 *
-	 * Contains a WP_Style_Engine_CSS_Declarations object.
-	 *
-	 * @var WP_Style_Engine_CSS_Declarations
-	 */
-	protected $declarations;
+		/**
+		 * The selector.
+		 *
+		 * @var string
+		 */
+		protected $selector;
 
-	/**
-	 * Constructor
-	 *
-	 * @param string                                    $selector     The CSS selector.
-	 * @param string[]|WP_Style_Engine_CSS_Declarations $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ),
-	 *                                                                or a WP_Style_Engine_CSS_Declarations object.
-	 */
-	public function __construct( $selector = '', $declarations = array() ) {
-		$this->set_selector( $selector );
-		$this->add_declarations( $declarations );
-	}
+		/**
+		 * The selector declarations.
+		 *
+		 * Contains a WP_Style_Engine_CSS_Declarations object.
+		 *
+		 * @var WP_Style_Engine_CSS_Declarations
+		 */
+		protected $declarations;
 
-	/**
-	 * Sets the selector.
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
-	 */
-	public function set_selector( $selector ) {
-		$this->selector = $selector;
-		return $this;
-	}
+		/**
+		 * A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`..
+		 *
+		 * @var string
+		 */
+		protected $rules_group;
 
-	/**
-	 * Sets the declarations.
-	 *
-	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
-	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
-	 *
-	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
-	 */
-	public function add_declarations( $declarations ) {
-		$is_declarations_object = ! is_array( $declarations );
-		$declarations_array     = $is_declarations_object ? $declarations->get_declarations() : $declarations;
-
-		if ( null === $this->declarations ) {
-			if ( $is_declarations_object ) {
-				$this->declarations = $declarations;
-				return $this;
+		/**
+		 * Constructor
+		 *
+		 * @param string                                    $selector     The CSS selector.
+		 * @param string[]|WP_Style_Engine_CSS_Declarations $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ),
+		 *                                                                or a WP_Style_Engine_CSS_Declarations object.
+		 * @param string                                    $rules_group  A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
+		 *
+		 */
+		public function __construct( $selector = '', $declarations = array(), $rules_group = '' ) {
+			$this->set_selector( $selector );
+			$this->add_declarations( $declarations );
+			$this->set_rules_group( $rules_group );
+		}
+
+		/**
+		 * Sets the selector.
+		 *
+		 * @param string $selector The CSS selector.
+		 *
+		 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+		 */
+		public function set_selector( $selector ) {
+			$this->selector = $selector;
+			return $this;
+		}
+
+		/**
+		 * Sets the declarations.
+		 *
+		 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+		 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+		 *
+		 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+		 */
+		public function add_declarations( $declarations ) {
+			$is_declarations_object = ! is_array( $declarations );
+			$declarations_array     = $is_declarations_object ? $declarations->get_declarations() : $declarations;
+
+			if ( null === $this->declarations ) {
+				if ( $is_declarations_object ) {
+					$this->declarations = $declarations;
+					return $this;
+				}
+				$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
 			}
-			$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
+			$this->declarations->add_declarations( $declarations_array );
+
+			return $this;
 		}
-		$this->declarations->add_declarations( $declarations_array );
 
-		return $this;
-	}
+		/**
+		 * Sets the rules group.
+		 *
+		 * @param string $rules_group A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
+		 *
+		 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+		 */
+		public function set_rules_group( $rules_group ) {
+			$this->rules_group = $rules_group;
+			return $this;
+		}
 
-	/**
-	 * Gets the declarations object.
-	 *
-	 * @return WP_Style_Engine_CSS_Declarations The declarations object.
-	 */
-	public function get_declarations() {
-		return $this->declarations;
-	}
+		/**
+		 * Gets the rules group.
+		 *
+		 * @return string
+		 */
+		public function get_rules_group() {
+			return $this->rules_group;
+		}
 
-	/**
-	 * Gets the full selector.
-	 *
-	 * @return string
-	 */
-	public function get_selector() {
-		return $this->selector;
-	}
+		/**
+		 * Gets the declarations object.
+		 *
+		 * @return WP_Style_Engine_CSS_Declarations The declarations object.
+		 */
+		public function get_declarations() {
+			return $this->declarations;
+		}
 
-	/**
-	 * Gets the CSS.
-	 *
-	 * @param bool   $should_prettify Whether to add spacing, new lines and indents.
-	 * @param number $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
-	 *
-	 * @return string
-	 */
-	public function get_css( $should_prettify = false, $indent_count = 0 ) {
-		$rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
-		$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
-		$suffix              = $should_prettify ? "\n" : '';
-		$spacer              = $should_prettify ? ' ' : '';
-		// Trims any multiple selectors strings.
-		$selector         = $should_prettify ? implode( ',', array_map( 'trim', explode( ',', $this->get_selector() ) ) ) : $this->get_selector();
-		$selector         = $should_prettify ? str_replace( array( ',' ), ",\n", $selector ) : $selector;
-		$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
-
-		if ( empty( $css_declarations ) ) {
-			return '';
+		/**
+		 * Gets the full selector.
+		 *
+		 * @return string
+		 */
+		public function get_selector() {
+			return $this->selector;
 		}
 
-		return "{$rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$rule_indent}}";
+		/**
+		 * Gets the CSS.
+		 *
+		 * @param bool   $should_prettify Whether to add spacing, new lines and indents.
+		 * @param number $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
+		 *
+		 * @return string
+		 */
+		public function get_css( $should_prettify = false, $indent_count = 0 ) {
+			$rule_indent                = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
+			$nested_rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count + 1 ) : '';
+			$declarations_indent        = $should_prettify ? $indent_count + 1 : 0;
+			$nested_declarations_indent = $should_prettify ? $indent_count + 2 : 0;
+			$suffix                     = $should_prettify ? "\n" : '';
+			$spacer                     = $should_prettify ? ' ' : '';
+			// Trims any multiple selectors strings.
+			$selector         = $should_prettify ? implode( ',', array_map( 'trim', explode( ',', $this->get_selector() ) ) ) : $this->get_selector();
+			$selector         = $should_prettify ? str_replace( array( ',' ), ",\n", $selector ) : $selector;
+			$rules_group      = $this->get_rules_group();
+			$has_rules_group  = ! empty( $rules_group );
+			$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $has_rules_group ? $nested_declarations_indent : $declarations_indent );
+
+			if ( empty( $css_declarations ) ) {
+				return '';
+			}
+
+			if ( $has_rules_group ) {
+				$selector = "{$rule_indent}{$rules_group}{$spacer}{{$suffix}{$nested_rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$nested_rule_indent}}{$suffix}{$rule_indent}}";
+				return $selector;
+			}
+
+			return "{$rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$rule_indent}}";
+		}
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index 5d083efbd1527a..50d1cff4142523 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -7,138 +7,146 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
-	return;
-}
-
-/**
- * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
- *
- * @access private
- */
-class WP_Style_Engine_CSS_Rules_Store {
-
-	/**
-	 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
-	 *
-	 * @static
-	 *
-	 * @var WP_Style_Engine_CSS_Rules_Store[]
-	 */
-	protected static $stores = array();
-
-	/**
-	 * The store name.
-	 *
-	 * @var string
-	 */
-	protected $name = '';
-
-	/**
-	 * An array of CSS Rules objects assigned to the store.
-	 *
-	 * @var WP_Style_Engine_CSS_Rule[]
-	 */
-	protected $rules = array();
+if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
 
 	/**
-	 * Gets an instance of the store.
-	 *
-	 * @param string $store_name The name of the store.
+	 * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
 	 *
-	 * @return WP_Style_Engine_CSS_Rules_Store|void
+	 * @access private
 	 */
-	public static function get_store( $store_name = 'default' ) {
-		if ( ! is_string( $store_name ) || empty( $store_name ) ) {
-			return;
+	class WP_Style_Engine_CSS_Rules_Store {
+
+		/**
+		 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
+		 *
+		 * @static
+		 *
+		 * @var WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		protected static $stores = array();
+
+		/**
+		 * The store name.
+		 *
+		 * @var string
+		 */
+		protected $name = '';
+
+		/**
+		 * An array of CSS Rules objects assigned to the store.
+		 *
+		 * @var WP_Style_Engine_CSS_Rule[]
+		 */
+		protected $rules = array();
+
+		/**
+		 * Gets an instance of the store.
+		 *
+		 * @param string $store_name The name of the store.
+		 *
+		 * @return WP_Style_Engine_CSS_Rules_Store|void
+		 */
+		public static function get_store( $store_name = 'default' ) {
+			if ( ! is_string( $store_name ) || empty( $store_name ) ) {
+				return;
+			}
+			if ( ! isset( static::$stores[ $store_name ] ) ) {
+				static::$stores[ $store_name ] = new static();
+				// Set the store name.
+				static::$stores[ $store_name ]->set_name( $store_name );
+			}
+			return static::$stores[ $store_name ];
 		}
-		if ( ! isset( static::$stores[ $store_name ] ) ) {
-			static::$stores[ $store_name ] = new static();
-			// Set the store name.
-			static::$stores[ $store_name ]->set_name( $store_name );
-		}
-		return static::$stores[ $store_name ];
-	}
 
-	/**
-	 * Gets an array of all available stores.
-	 *
-	 * @return WP_Style_Engine_CSS_Rules_Store[]
-	 */
-	public static function get_stores() {
-		return static::$stores;
-	}
-
-	/**
-	 * Clears all stores from static::$stores.
-	 *
-	 * @return void
-	 */
-	public static function remove_all_stores() {
-		static::$stores = array();
-	}
-
-	/**
-	 * Sets the store name.
-	 *
-	 * @param string $name The store name.
-	 *
-	 * @return void
-	 */
-	public function set_name( $name ) {
-		$this->name = $name;
-	}
-
-	/**
-	 * Gets the store name.
-	 *
-	 * @return string
-	 */
-	public function get_name() {
-		return $this->name;
-	}
+		/**
+		 * Gets an array of all available stores.
+		 *
+		 * @return WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		public static function get_stores() {
+			return static::$stores;
+		}
 
-	/**
-	 * Gets an array of all rules.
-	 *
-	 * @return WP_Style_Engine_CSS_Rule[]
-	 */
-	public function get_all_rules() {
-		return $this->rules;
-	}
+		/**
+		 * Clears all stores from static::$stores.
+		 *
+		 * @return void
+		 */
+		public static function remove_all_stores() {
+			static::$stores = array();
+		}
 
-	/**
-	 * Gets a WP_Style_Engine_CSS_Rule object by its selector.
-	 * If the rule does not exist, it will be created.
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @return WP_Style_Engine_CSS_Rule|void Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
-	 */
-	public function add_rule( $selector ) {
-		$selector = trim( $selector );
+		/**
+		 * Sets the store name.
+		 *
+		 * @param string $name The store name.
+		 *
+		 * @return void
+		 */
+		public function set_name( $name ) {
+			$this->name = $name;
+		}
 
-		// Bail early if there is no selector.
-		if ( empty( $selector ) ) {
-			return;
+		/**
+		 * Gets the store name.
+		 *
+		 * @return string
+		 */
+		public function get_name() {
+			return $this->name;
 		}
 
-		// Create the rule if it doesn't exist.
-		if ( empty( $this->rules[ $selector ] ) ) {
-			$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+		/**
+		 * Gets an array of all rules.
+		 *
+		 * @return WP_Style_Engine_CSS_Rule[]
+		 */
+		public function get_all_rules() {
+			return $this->rules;
 		}
 
-		return $this->rules[ $selector ];
-	}
+		/**
+		 * Gets a WP_Style_Engine_CSS_Rule object by its selector.
+		 * If the rule does not exist, it will be created.
+		 *
+		 * @param string $selector    The CSS selector.
+		 * @param string $rules_group A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`..
+		 *
+		 * @return WP_Style_Engine_CSS_Rule|void Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
+		 */
+		public function add_rule( $selector, $rules_group = '' ) {
+			$selector    = $selector ? trim( $selector ) : '';
+			$rules_group = $rules_group ? trim( $rules_group ) : '';
+
+			// Bail early if there is no selector.
+			if ( empty( $selector ) ) {
+				return;
+			}
+
+			if ( ! empty( $rules_group ) ) {
+				if ( empty( $this->rules[ "$rules_group $selector" ] ) ) {
+					$this->rules[ "$rules_group $selector" ] = new WP_Style_Engine_CSS_Rule( $selector, array(), $rules_group );
+				}
+				return $this->rules[ "$rules_group $selector" ];
+			}
+
+			// Create the rule if it doesn't exist.
+			if ( empty( $this->rules[ $selector ] ) ) {
+				$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+			}
+
+			return $this->rules[ $selector ];
+		}
 
-	/**
-	 * Removes a selector from the store.
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @return void
-	 */
-	public function remove_rule( $selector ) {
-		unset( $this->rules[ $selector ] );
+		/**
+		 * Removes a selector from the store.
+		 *
+		 * @param string $selector The CSS selector.
+		 *
+		 * @return void
+		 */
+		public function remove_rule( $selector ) {
+			unset( $this->rules[ $selector ] );
+		}
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php
index 9030cf8e24ca27..728b8029f26900 100644
--- a/packages/style-engine/class-wp-style-engine-processor.php
+++ b/packages/style-engine/class-wp-style-engine-processor.php
@@ -7,149 +7,167 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
-	return;
-}
-
-/**
- * Compiles styles from stores or collection of CSS rules.
- *
- * @access private
- */
-class WP_Style_Engine_Processor {
+if ( ! class_exists( 'WP_Style_Engine_Processor' ) ) {
 
 	/**
-	 * A collection of Style Engine Store objects.
+	 * Compiles styles from stores or collection of CSS rules.
 	 *
-	 * @var WP_Style_Engine_CSS_Rules_Store[]
+	 * @access private
 	 */
-	protected $stores = array();
+	class WP_Style_Engine_Processor {
+
+		/**
+		 * A collection of Style Engine Store objects.
+		 *
+		 * @var WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		protected $stores = array();
+
+		/**
+		 * The set of CSS rules that this processor will work on.
+		 *
+		 * @var WP_Style_Engine_CSS_Rule[]
+		 */
+		protected $css_rules = array();
+
+		/**
+		 * Add a store to the processor.
+		 *
+		 * @param WP_Style_Engine_CSS_Rules_Store $store The store to add.
+		 *
+		 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
+		 */
+		public function add_store( $store ) {
+			if ( ! $store instanceof WP_Style_Engine_CSS_Rules_Store ) {
+				_doing_it_wrong(
+					__METHOD__,
+					__( '$store must be an instance of WP_Style_Engine_CSS_Rules_Store', 'default' ),
+					'6.1.0'
+				);
+				return $this;
+			}
 
-	/**
-	 * The set of CSS rules that this processor will work on.
-	 *
-	 * @var WP_Style_Engine_CSS_Rule[]
-	 */
-	protected $css_rules = array();
+			$this->stores[ $store->get_name() ] = $store;
 
-	/**
-	 * Add a store to the processor.
-	 *
-	 * @param WP_Style_Engine_CSS_Rules_Store $store The store to add.
-	 *
-	 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
-	 */
-	public function add_store( $store ) {
-		if ( ! $store instanceof WP_Style_Engine_CSS_Rules_Store ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( '$store must be an instance of WP_Style_Engine_CSS_Rules_Store', 'default' ),
-				'6.1.0'
-			);
 			return $this;
 		}
 
-		$this->stores[ $store->get_name() ] = $store;
-
-		return $this;
-	}
-
-	/**
-	 * Adds rules to be processed.
-	 *
-	 * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise.
-	 *
-	 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
-	 */
-	public function add_rules( $css_rules ) {
-		if ( ! is_array( $css_rules ) ) {
-			$css_rules = array( $css_rules );
-		}
+		/**
+		 * Adds rules to be processed.
+		 *
+		 * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise.
+		 *
+		 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
+		 */
+		public function add_rules( $css_rules ) {
+			if ( ! is_array( $css_rules ) ) {
+				$css_rules = array( $css_rules );
+			}
 
-		foreach ( $css_rules as $rule ) {
-			$selector = $rule->get_selector();
-			if ( isset( $this->css_rules[ $selector ] ) ) {
-				$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
-				continue;
+			foreach ( $css_rules as $rule ) {
+				$selector    = $rule->get_selector();
+				$rules_group = $rule->get_rules_group();
+
+				/**
+				 * If there is an at_rule and it already exists in the css_rules array,
+				 * add the rule to it.
+				 * Otherwise, create a new entry for the at_rule
+				 */
+				if ( ! empty( $rules_group ) ) {
+					if ( isset( $this->css_rules[ "$rules_group $selector" ] ) ) {
+						$this->css_rules[ "$rules_group $selector" ]->add_declarations( $rule->get_declarations() );
+						continue;
+					}
+					$this->css_rules[ "$rules_group $selector" ] = $rule;
+					continue;
+				}
+
+				// If the selector already exists, add the declarations to it.
+				if ( isset( $this->css_rules[ $selector ] ) ) {
+					$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
+					continue;
+				}
+				$this->css_rules[ $rule->get_selector() ] = $rule;
 			}
-			$this->css_rules[ $rule->get_selector() ] = $rule;
+			return $this;
 		}
 
-		return $this;
-	}
-
-	/**
-	 * Get the CSS rules as a string.
-	 *
-	 * @param array $options   {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
-	 *     @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
-	 * }
-	 *
-	 * @return string The computed CSS.
-	 */
-	public function get_css( $options = array() ) {
-		$defaults = array(
-			'optimize' => true,
-			'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
-		);
-		$options  = wp_parse_args( $options, $defaults );
-
-		// If we have stores, get the rules from them.
-		foreach ( $this->stores as $store ) {
-			$this->add_rules( $store->get_all_rules() );
-		}
+		/**
+		 * Get the CSS rules as a string.
+		 *
+		 * Since 6.4.0 Optimization is no longer the default.
+		 *
+		 * @param array $options   {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
+		 *     @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
+		 * }
+		 *
+		 * @return string The computed CSS.
+		 */
+		public function get_css( $options = array() ) {
+			$defaults = array(
+				'optimize' => false,
+				'prettify' => SCRIPT_DEBUG,
+			);
+			$options  = wp_parse_args( $options, $defaults );
 
-		// Combine CSS selectors that have identical declarations.
-		if ( true === $options['optimize'] ) {
-			$this->combine_rules_selectors();
-		}
+			// If we have stores, get the rules from them.
+			foreach ( $this->stores as $store ) {
+				$this->add_rules( $store->get_all_rules() );
+			}
 
-		// Build the CSS.
-		$css = '';
-		foreach ( $this->css_rules as $rule ) {
-			$css .= $rule->get_css( $options['prettify'] );
-			$css .= $options['prettify'] ? "\n" : '';
-		}
-		return $css;
-	}
+			// Combine CSS selectors that have identical declarations.
+			if ( true === $options['optimize'] ) {
+				$this->combine_rules_selectors();
+			}
 
-	/**
-	 * Combines selectors from the rules store when they have the same styles.
-	 *
-	 * @return void
-	 */
-	private function combine_rules_selectors() {
-		// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
-		$selectors_json = array();
-		foreach ( $this->css_rules as $rule ) {
-			$declarations = $rule->get_declarations()->get_declarations();
-			ksort( $declarations );
-			$selectors_json[ $rule->get_selector() ] = wp_json_encode( $declarations );
+			// Build the CSS.
+			$css = '';
+			foreach ( $this->css_rules as $rule ) {
+				// See class WP_Style_Engine_CSS_Rule for the get_css method.
+				$css .= $rule->get_css( $options['prettify'] );
+				$css .= $options['prettify'] ? "\n" : '';
+			}
+			return $css;
 		}
 
-		// Combine selectors that have the same styles.
-		foreach ( $selectors_json as $selector => $json ) {
-			// Get selectors that use the same styles.
-			$duplicates = array_keys( $selectors_json, $json, true );
-			// Skip if there are no duplicates.
-			if ( 1 >= count( $duplicates ) ) {
-				continue;
+		/**
+		 * Combines selectors from the rules store when they have the same styles.
+		 *
+		 * @return void
+		 */
+		private function combine_rules_selectors() {
+			// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
+			$selectors_json = array();
+			foreach ( $this->css_rules as $rule ) {
+				$declarations = $rule->get_declarations()->get_declarations();
+				ksort( $declarations );
+				$selectors_json[ $rule->get_selector() ] = wp_json_encode( $declarations );
 			}
 
-			$declarations = $this->css_rules[ $selector ]->get_declarations();
-
-			foreach ( $duplicates as $key ) {
-				// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
-				unset( $selectors_json[ $key ] );
-				// Remove the rules from the rules collection.
-				unset( $this->css_rules[ $key ] );
+			// Combine selectors that have the same styles.
+			foreach ( $selectors_json as $selector => $json ) {
+				// Get selectors that use the same styles.
+				$duplicates = array_keys( $selectors_json, $json, true );
+				// Skip if there are no duplicates.
+				if ( 1 >= count( $duplicates ) ) {
+					continue;
+				}
+
+				$declarations = $this->css_rules[ $selector ]->get_declarations();
+
+				foreach ( $duplicates as $key ) {
+					// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
+					unset( $selectors_json[ $key ] );
+					// Remove the rules from the rules collection.
+					unset( $this->css_rules[ $key ] );
+				}
+				// Create a new rule with the combined selectors.
+				$duplicate_selectors                     = implode( ',', $duplicates );
+				$this->css_rules[ $duplicate_selectors ] = new WP_Style_Engine_CSS_Rule( $duplicate_selectors, $declarations );
 			}
-			// Create a new rule with the combined selectors.
-			$duplicate_selectors                     = implode( ',', $duplicates );
-			$this->css_rules[ $duplicate_selectors ] = new WP_Style_Engine_CSS_Rule( $duplicate_selectors, $declarations );
 		}
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f5636c150c3eeb..3c692719030053 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -7,548 +7,672 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine' ) ) {
-	return;
-}
+if ( ! class_exists( 'WP_Style_Engine' ) ) {
 
-/**
- * Class WP_Style_Engine.
- *
- * The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.
- *
- * This class is for internal Core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This class is final and should not be extended.
- * This is a low-level API that may need to do breaking changes. Please, use wp_style_engine_get_styles instead.
- *
- * @access private
- */
-final class WP_Style_Engine {
 	/**
-	 * Style definitions that contain the instructions to
-	 * parse/output valid Gutenberg styles from a block's attributes.
-	 * For every style definition, the follow properties are valid:
-	 *  - classnames    => (array) an array of classnames to be returned for block styles. The key is a classname or pattern.
-	 *                    A value of `true` means the classname should be applied always. Otherwise, a valid CSS property (string)
-	 *                    to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug.
-	 *  - css_vars      => (array) an array of key value pairs used to generate CSS var values. The key is a CSS var pattern, whose `$slug` fragment will be replaced with a preset slug.
-	 *                    The value should be a valid CSS property (string) to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug.
-	 *  - property_keys => (array) array of keys whose values represent a valid CSS property, e.g., "margin" or "border".
-	 *  - path          => (array) a path that accesses the corresponding style value in the block style object.
-	 *  - value_func    => (string) the name of a function to generate a CSS definition array for a particular style object. The output of this function should be `array( "$property" => "$value", ... )`.
+	 * Class WP_Style_Engine.
 	 *
-	 * @var array
+	 * The Style Engine aims to provide a consistent API for rendering styling for blocks across both client-side and server-side applications.
+	 *
+	 * This class is for internal Core usage and is not supposed to be used by extenders (plugins and/or themes).
+	 * This class is final and should not be extended.
+	 * This is a low-level API that may need to do breaking changes. Please, use wp_style_engine_get_styles instead.
+	 *
+	 * @access private
 	 */
-	const BLOCK_STYLE_DEFINITIONS_METADATA = array(
-		'color'      => array(
-			'text'       => array(
-				'property_keys' => array(
-					'default' => 'color',
-				),
-				'path'          => array( 'color', 'text' ),
-				'css_vars'      => array(
-					'color' => '--wp--preset--color--$slug',
-				),
-				'classnames'    => array(
-					'has-text-color'  => true,
-					'has-$slug-color' => 'color',
-				),
-			),
+	final class WP_Style_Engine {
+		/**
+		 * Style definitions that contain the instructions to parse/output valid Gutenberg styles from a block's attributes.
+		 *
+		 * For every style definition, the following properties are valid:
+		 *
+		 *  - classnames    => (array) an array of classnames to be returned for block styles. The key is a classname or pattern.
+		 *                    A value of `true` means the classname should be applied always. Otherwise, a valid CSS property (string)
+		 *                    to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug.
+		 *  - css_vars      => (array) an array of key value pairs used to generate CSS var values.
+		 *                     The key should be the CSS property name that matches the second element of the preset string value,
+		 *                     i.e., "color" in var:preset|color|somePresetSlug. The value is a CSS var pattern (e.g. `--wp--preset--color--$slug`),
+		 *                     whose `$slug` fragment will be replaced with the preset slug, which is the third element of the preset string value,
+		 *                     i.e., `somePresetSlug` in var:preset|color|somePresetSlug.
+		 *  - property_keys => (array) array of keys whose values represent a valid CSS property, e.g., "margin" or "border".
+		 *  - path          => (array) a path that accesses the corresponding style value in the block style object.
+		 *  - value_func    => (string) the name of a function to generate a CSS definition array for a particular style object. The output of this function should be `array( "$property" => "$value", ... )`.
+		 *
+		 * @var array
+		 */
+		const BLOCK_STYLE_DEFINITIONS_METADATA = array(
 			'background' => array(
-				'property_keys' => array(
-					'default' => 'background-color',
-				),
-				'path'          => array( 'color', 'background' ),
-				'classnames'    => array(
-					'has-background'             => true,
-					'has-$slug-background-color' => 'color',
-				),
-			),
-			'gradient'   => array(
-				'property_keys' => array(
-					'default' => 'background',
-				),
-				'path'          => array( 'color', 'gradient' ),
-				'classnames'    => array(
-					'has-background'                => true,
-					'has-$slug-gradient-background' => 'gradient',
-				),
-			),
-		),
-		'border'     => array(
-			'color'  => array(
-				'property_keys' => array(
-					'default'    => 'border-color',
-					'individual' => 'border-%s-color',
-				),
-				'path'          => array( 'border', 'color' ),
-				'classnames'    => array(
-					'has-border-color'       => true,
-					'has-$slug-border-color' => 'color',
-				),
-			),
-			'radius' => array(
-				'property_keys' => array(
-					'default'    => 'border-radius',
-					'individual' => 'border-%s-radius',
+				'backgroundImage'      => array(
+					'property_keys' => array(
+						'default' => 'background-image',
+					),
+					'value_func'    => array( self::class, 'get_url_or_value_css_declaration' ),
+					'path'          => array( 'background', 'backgroundImage' ),
+				),
+				'backgroundPosition'   => array(
+					'property_keys' => array(
+						'default' => 'background-position',
+					),
+					'path'          => array( 'background', 'backgroundPosition' ),
+				),
+				'backgroundRepeat'     => array(
+					'property_keys' => array(
+						'default' => 'background-repeat',
+					),
+					'path'          => array( 'background', 'backgroundRepeat' ),
+				),
+				'backgroundSize'       => array(
+					'property_keys' => array(
+						'default' => 'background-size',
+					),
+					'path'          => array( 'background', 'backgroundSize' ),
+				),
+				'backgroundAttachment' => array(
+					'property_keys' => array(
+						'default' => 'background-attachment',
+					),
+					'path'          => array( 'background', 'backgroundAttachment' ),
 				),
-				'path'          => array( 'border', 'radius' ),
 			),
-			'style'  => array(
-				'property_keys' => array(
-					'default'    => 'border-style',
-					'individual' => 'border-%s-style',
+			'color'      => array(
+				'text'       => array(
+					'property_keys' => array(
+						'default' => 'color',
+					),
+					'path'          => array( 'color', 'text' ),
+					'css_vars'      => array(
+						'color' => '--wp--preset--color--$slug',
+					),
+					'classnames'    => array(
+						'has-text-color'  => true,
+						'has-$slug-color' => 'color',
+					),
+				),
+				'background' => array(
+					'property_keys' => array(
+						'default' => 'background-color',
+					),
+					'path'          => array( 'color', 'background' ),
+					'css_vars'      => array(
+						'color' => '--wp--preset--color--$slug',
+					),
+					'classnames'    => array(
+						'has-background'             => true,
+						'has-$slug-background-color' => 'color',
+					),
+				),
+				'gradient'   => array(
+					'property_keys' => array(
+						'default' => 'background',
+					),
+					'css_vars'      => array(
+						'gradient' => '--wp--preset--gradient--$slug',
+					),
+					'path'          => array( 'color', 'gradient' ),
+					'classnames'    => array(
+						'has-background'                => true,
+						'has-$slug-gradient-background' => 'gradient',
+					),
 				),
-				'path'          => array( 'border', 'style' ),
 			),
-			'width'  => array(
-				'property_keys' => array(
-					'default'    => 'border-width',
-					'individual' => 'border-%s-width',
+			'border'     => array(
+				'color'  => array(
+					'property_keys' => array(
+						'default'    => 'border-color',
+						'individual' => 'border-%s-color',
+					),
+					'path'          => array( 'border', 'color' ),
+					'classnames'    => array(
+						'has-border-color'       => true,
+						'has-$slug-border-color' => 'color',
+					),
+				),
+				'radius' => array(
+					'property_keys' => array(
+						'default'    => 'border-radius',
+						'individual' => 'border-%s-radius',
+					),
+					'path'          => array( 'border', 'radius' ),
+				),
+				'style'  => array(
+					'property_keys' => array(
+						'default'    => 'border-style',
+						'individual' => 'border-%s-style',
+					),
+					'path'          => array( 'border', 'style' ),
+				),
+				'width'  => array(
+					'property_keys' => array(
+						'default'    => 'border-width',
+						'individual' => 'border-%s-width',
+					),
+					'path'          => array( 'border', 'width' ),
+				),
+				'top'    => array(
+					'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
+					'path'       => array( 'border', 'top' ),
+					'css_vars'   => array(
+						'color' => '--wp--preset--color--$slug',
+					),
+				),
+				'right'  => array(
+					'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
+					'path'       => array( 'border', 'right' ),
+					'css_vars'   => array(
+						'color' => '--wp--preset--color--$slug',
+					),
+				),
+				'bottom' => array(
+					'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
+					'path'       => array( 'border', 'bottom' ),
+					'css_vars'   => array(
+						'color' => '--wp--preset--color--$slug',
+					),
+				),
+				'left'   => array(
+					'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
+					'path'       => array( 'border', 'left' ),
+					'css_vars'   => array(
+						'color' => '--wp--preset--color--$slug',
+					),
 				),
-				'path'          => array( 'border', 'width' ),
 			),
-			'top'    => array(
-				'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
-				'path'       => array( 'border', 'top' ),
-				'css_vars'   => array(
-					'color' => '--wp--preset--color--$slug',
-				),
-			),
-			'right'  => array(
-				'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
-				'path'       => array( 'border', 'right' ),
-				'css_vars'   => array(
-					'color' => '--wp--preset--color--$slug',
-				),
-			),
-			'bottom' => array(
-				'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
-				'path'       => array( 'border', 'bottom' ),
-				'css_vars'   => array(
-					'color' => '--wp--preset--color--$slug',
-				),
-			),
-			'left'   => array(
-				'value_func' => array( self::class, 'get_individual_property_css_declarations' ),
-				'path'       => array( 'border', 'left' ),
-				'css_vars'   => array(
-					'color' => '--wp--preset--color--$slug',
-				),
-			),
-		),
-		'dimensions' => array(
-			'minHeight' => array(
-				'property_keys' => array(
-					'default' => 'min-height',
-				),
-				'path'          => array( 'dimensions', 'minHeight' ),
-				'css_vars'      => array(
-					'spacing' => '--wp--preset--spacing--$slug',
-				),
-			),
-		),
-		'spacing'    => array(
-			'padding' => array(
-				'property_keys' => array(
-					'default'    => 'padding',
-					'individual' => 'padding-%s',
-				),
-				'path'          => array( 'spacing', 'padding' ),
-				'css_vars'      => array(
-					'spacing' => '--wp--preset--spacing--$slug',
-				),
-			),
-			'margin'  => array(
-				'property_keys' => array(
-					'default'    => 'margin',
-					'individual' => 'margin-%s',
-				),
-				'path'          => array( 'spacing', 'margin' ),
-				'css_vars'      => array(
-					'spacing' => '--wp--preset--spacing--$slug',
-				),
-			),
-		),
-		'typography' => array(
-			'fontSize'       => array(
-				'property_keys' => array(
-					'default' => 'font-size',
-				),
-				'path'          => array( 'typography', 'fontSize' ),
-				'classnames'    => array(
-					'has-$slug-font-size' => 'font-size',
-				),
-			),
-			'fontFamily'     => array(
-				'property_keys' => array(
-					'default' => 'font-family',
-				),
-				'path'          => array( 'typography', 'fontFamily' ),
-				'classnames'    => array(
-					'has-$slug-font-family' => 'font-family',
+			'shadow'     => array(
+				'shadow' => array(
+					'property_keys' => array(
+						'default' => 'box-shadow',
+					),
+					'path'          => array( 'shadow' ),
+					'css_vars'      => array(
+						'shadow' => '--wp--preset--shadow--$slug',
+					),
 				),
 			),
-			'fontStyle'      => array(
-				'property_keys' => array(
-					'default' => 'font-style',
+			'dimensions' => array(
+				'aspectRatio' => array(
+					'property_keys' => array(
+						'default' => 'aspect-ratio',
+					),
+					'path'          => array( 'dimensions', 'aspectRatio' ),
+					'classnames'    => array(
+						'has-aspect-ratio' => true,
+					),
+				),
+				'minHeight'   => array(
+					'property_keys' => array(
+						'default' => 'min-height',
+					),
+					'path'          => array( 'dimensions', 'minHeight' ),
+					'css_vars'      => array(
+						'spacing' => '--wp--preset--spacing--$slug',
+					),
 				),
-				'path'          => array( 'typography', 'fontStyle' ),
 			),
-			'fontWeight'     => array(
-				'property_keys' => array(
-					'default' => 'font-weight',
+			'spacing'    => array(
+				'padding' => array(
+					'property_keys' => array(
+						'default'    => 'padding',
+						'individual' => 'padding-%s',
+					),
+					'path'          => array( 'spacing', 'padding' ),
+					'css_vars'      => array(
+						'spacing' => '--wp--preset--spacing--$slug',
+					),
+				),
+				'margin'  => array(
+					'property_keys' => array(
+						'default'    => 'margin',
+						'individual' => 'margin-%s',
+					),
+					'path'          => array( 'spacing', 'margin' ),
+					'css_vars'      => array(
+						'spacing' => '--wp--preset--spacing--$slug',
+					),
 				),
-				'path'          => array( 'typography', 'fontWeight' ),
 			),
-			'lineHeight'     => array(
-				'property_keys' => array(
-					'default' => 'line-height',
+			'typography' => array(
+				'fontSize'       => array(
+					'property_keys' => array(
+						'default' => 'font-size',
+					),
+					'css_vars'      => array(
+						'font-size' => '--wp--preset--font-size--$slug',
+					),
+					'path'          => array( 'typography', 'fontSize' ),
+					'classnames'    => array(
+						'has-$slug-font-size' => 'font-size',
+					),
+				),
+				'fontFamily'     => array(
+					'property_keys' => array(
+						'default' => 'font-family',
+					),
+					'css_vars'      => array(
+						'font-family' => '--wp--preset--font-family--$slug',
+					),
+					'path'          => array( 'typography', 'fontFamily' ),
+					'classnames'    => array(
+						'has-$slug-font-family' => 'font-family',
+					),
+				),
+				'fontStyle'      => array(
+					'property_keys' => array(
+						'default' => 'font-style',
+					),
+					'path'          => array( 'typography', 'fontStyle' ),
+				),
+				'fontWeight'     => array(
+					'property_keys' => array(
+						'default' => 'font-weight',
+					),
+					'path'          => array( 'typography', 'fontWeight' ),
+				),
+				'lineHeight'     => array(
+					'property_keys' => array(
+						'default' => 'line-height',
+					),
+					'path'          => array( 'typography', 'lineHeight' ),
+				),
+				'textColumns'    => array(
+					'property_keys' => array(
+						'default' => 'column-count',
+					),
+					'path'          => array( 'typography', 'textColumns' ),
+				),
+				'textDecoration' => array(
+					'property_keys' => array(
+						'default' => 'text-decoration',
+					),
+					'path'          => array( 'typography', 'textDecoration' ),
+				),
+				'textTransform'  => array(
+					'property_keys' => array(
+						'default' => 'text-transform',
+					),
+					'path'          => array( 'typography', 'textTransform' ),
+				),
+				'letterSpacing'  => array(
+					'property_keys' => array(
+						'default' => 'letter-spacing',
+					),
+					'path'          => array( 'typography', 'letterSpacing' ),
+				),
+				'writingMode'    => array(
+					'property_keys' => array(
+						'default' => 'writing-mode',
+					),
+					'path'          => array( 'typography', 'writingMode' ),
 				),
-				'path'          => array( 'typography', 'lineHeight' ),
 			),
-			'textDecoration' => array(
-				'property_keys' => array(
-					'default' => 'text-decoration',
-				),
-				'path'          => array( 'typography', 'textDecoration' ),
-			),
-			'textTransform'  => array(
-				'property_keys' => array(
-					'default' => 'text-transform',
-				),
-				'path'          => array( 'typography', 'textTransform' ),
-			),
-			'letterSpacing'  => array(
-				'property_keys' => array(
-					'default' => 'letter-spacing',
-				),
-				'path'          => array( 'typography', 'letterSpacing' ),
-			),
-		),
-	);
+		);
 
-	/**
-	 * Util: Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
-	 *
-	 * @param string $style_value  A single CSS preset value.
-	 * @param string $property_key The CSS property that is the second element of the preset string. Used for matching.
-	 *
-	 * @return string The slug, or empty string if not found.
-	 */
-	protected static function get_slug_from_preset_value( $style_value, $property_key ) {
-		if ( is_string( $style_value ) && is_string( $property_key ) && str_contains( $style_value, "var:preset|{$property_key}|" ) ) {
-			$index_to_splice = strrpos( $style_value, '|' ) + 1;
-			return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
+		/**
+		 * Util: Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
+		 *
+		 * @param string $style_value  A single CSS preset value.
+		 * @param string $property_key The CSS property that is the second element of the preset string. Used for matching.
+		 *
+		 * @return string The slug, or empty string if not found.
+		 */
+		protected static function get_slug_from_preset_value( $style_value, $property_key ) {
+			if ( is_string( $style_value ) && is_string( $property_key ) && str_contains( $style_value, "var:preset|{$property_key}|" ) ) {
+				$index_to_splice = strrpos( $style_value, '|' ) + 1;
+				return _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
+			}
+			return '';
 		}
-		return '';
-	}
 
-	/**
-	 * Util: Generates a CSS var string, e.g., var(--wp--preset--color--background) from a preset string such as `var:preset|space|50`.
-	 *
-	 * @param string   $style_value  A single CSS preset value.
-	 * @param string[] $css_vars     An associate array of CSS var patterns used to generate the var string.
-	 *
-	 * @return string The css var, or an empty string if no match for slug found.
-	 */
-	protected static function get_css_var_value( $style_value, $css_vars ) {
-		foreach ( $css_vars as  $property_key => $css_var_pattern ) {
-			$slug = static::get_slug_from_preset_value( $style_value, $property_key );
-			if ( static::is_valid_style_value( $slug ) ) {
-				$var = strtr(
-					$css_var_pattern,
-					array( '$slug' => $slug )
-				);
-				return "var($var)";
+		/**
+		 * Util: Generates a CSS var string, e.g., var(--wp--preset--color--background) from a preset string such as `var:preset|space|50`.
+		 *
+		 * @param string   $style_value  A single CSS preset value.
+		 * @param string[] $css_vars     An associate array of CSS var patterns used to generate the var string.
+		 *
+		 * @return string The css var, or an empty string if no match for slug found.
+		 */
+		protected static function get_css_var_value( $style_value, $css_vars ) {
+			foreach ( $css_vars as  $property_key => $css_var_pattern ) {
+				$slug = static::get_slug_from_preset_value( $style_value, $property_key );
+				if ( static::is_valid_style_value( $slug ) ) {
+					$var = strtr(
+						$css_var_pattern,
+						array( '$slug' => $slug )
+					);
+					return "var($var)";
+				}
 			}
+			return '';
 		}
-		return '';
-	}
 
-	/**
-	 * Util: Checks whether an incoming block style value is valid.
-	 *
-	 * @param string? $style_value  A single css preset value.
-	 *
-	 * @return bool
-	 */
-	protected static function is_valid_style_value( $style_value ) {
-		return '0' === $style_value || ! empty( $style_value );
-	}
-
-	/**
-	 * Stores a CSS rule using the provided CSS selector and CSS declarations.
-	 *
-	 * @param string   $store_name       A valid store key.
-	 * @param string   $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
-	 * @param string[] $css_declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 *
-	 * @return void.
-	 */
-	public static function store_css_rule( $store_name, $css_selector, $css_declarations ) {
-		if ( empty( $store_name ) || empty( $css_selector ) || empty( $css_declarations ) ) {
-			return;
+		/**
+		 * Util: Checks whether an incoming block style value is valid.
+		 *
+		 * @param string? $style_value  A single css preset value.
+		 *
+		 * @return bool
+		 */
+		protected static function is_valid_style_value( $style_value ) {
+			return '0' === $style_value || ! empty( $style_value );
 		}
-		static::get_store( $store_name )->add_rule( $css_selector )->add_declarations( $css_declarations );
-	}
 
-	/**
-	 * Returns a store by store key.
-	 *
-	 * @param string $store_name A store key.
-	 *
-	 * @return WP_Style_Engine_CSS_Rules_Store
-	 */
-	public static function get_store( $store_name ) {
-		return WP_Style_Engine_CSS_Rules_Store::get_store( $store_name );
-	}
+		/**
+		 * Stores a CSS rule using the provided CSS selector and CSS declarations.
+		 *
+		 * @param string   $store_name       A valid store key.
+		 * @param string   $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+		 * @param string[] $css_declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+		 * @param string $rules_group        Optional. A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
+		 *
+		 * @return void.
+		 */
+		public static function store_css_rule( $store_name, $css_selector, $css_declarations, $rules_group = '' ) {
+			if ( empty( $store_name ) || empty( $css_selector ) || empty( $css_declarations ) ) {
+				return;
+			}
+			static::get_store( $store_name )->add_rule( $css_selector, $rules_group )->add_declarations( $css_declarations );
+		}
 
-	/**
-	 * Returns classnames and CSS based on the values in a styles object.
-	 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
-	 *
-	 * @since 6.1.0
-	 *
-	 * @param array $block_styles The style object.
-	 * @param array $options      {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool        $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
-	 *     @type string      $selector                   Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
-	 *                                                   otherwise, the value will be a concatenated string of CSS declarations.
-	 * }
-	 *
-	 * @return array {
-	 *     @type string   $classnames   Classnames separated by a space.
-	 *     @type string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 * }
-	 */
-	public static function parse_block_styles( $block_styles, $options ) {
-		$parsed_styles = array(
-			'classnames'   => array(),
-			'declarations' => array(),
-		);
-		if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
-			return $parsed_styles;
+		/**
+		 * Returns a store by store key.
+		 *
+		 * @param string $store_name A store key.
+		 *
+		 * @return WP_Style_Engine_CSS_Rules_Store
+		 */
+		public static function get_store( $store_name ) {
+			return WP_Style_Engine_CSS_Rules_Store::get_store( $store_name );
 		}
 
-		// Collect CSS and classnames.
-		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
-			if ( empty( $block_styles[ $definition_group_key ] ) ) {
-				continue;
+		/**
+		 * Returns classnames and CSS based on the values in a styles object.
+		 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param array $block_styles The style object.
+		 * @param array $options      {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool        $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
+		 *     @type string      $selector                   Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
+		 *                                                   otherwise, the value will be a concatenated string of CSS declarations.
+		 * }
+		 *
+		 * @return array {
+		 *     @type string   $classnames   Classnames separated by a space.
+		 *     @type string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+		 * }
+		 */
+		public static function parse_block_styles( $block_styles, $options ) {
+			$parsed_styles = array(
+				'classnames'   => array(),
+				'declarations' => array(),
+			);
+			if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
+				return $parsed_styles;
 			}
-			foreach ( $definition_group_style as $style_definition ) {
-				$style_value = _wp_array_get( $block_styles, $style_definition['path'], null );
 
-				if ( ! static::is_valid_style_value( $style_value ) ) {
+			// Collect CSS and classnames.
+			foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
+				if ( empty( $block_styles[ $definition_group_key ] ) ) {
 					continue;
 				}
-
-				$parsed_styles['classnames']   = array_merge( $parsed_styles['classnames'], static::get_classnames( $style_value, $style_definition ) );
-				$parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], static::get_css_declarations( $style_value, $style_definition, $options ) );
+				foreach ( $definition_group_style as $style_definition ) {
+					$style_value = _wp_array_get( $block_styles, $style_definition['path'], null );
+
+					if ( ! static::is_valid_style_value( $style_value ) ) {
+						continue;
+					}
+
+					$classnames = static::get_classnames( $style_value, $style_definition );
+					if ( ! empty( $classnames ) ) {
+						$parsed_styles['classnames'] = array_merge( $parsed_styles['classnames'], $classnames );
+					}
+
+					$css_declarations = static::get_css_declarations( $style_value, $style_definition, $options );
+					if ( ! empty( $css_declarations ) ) {
+						$parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], $css_declarations );
+					}
+				}
 			}
-		}
-
-		return $parsed_styles;
-	}
 
-	/**
-	 * Returns classnames, and generates classname(s) from a CSS preset property pattern, e.g., '`var:preset|<PRESET_TYPE>|<PRESET_SLUG>`'.
-	 *
-	 * @param array $style_value      A single raw style value or css preset property from the $block_styles array.
-	 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 *
-	 * @return array|string[] An array of CSS classnames, or empty array.
-	 */
-	protected static function get_classnames( $style_value, $style_definition ) {
-		if ( empty( $style_value ) ) {
-			return array();
+			return $parsed_styles;
 		}
 
-		$classnames = array();
-		if ( ! empty( $style_definition['classnames'] ) ) {
-			foreach ( $style_definition['classnames'] as $classname => $property_key ) {
-				if ( true === $property_key ) {
-					$classnames[] = $classname;
-				}
-
-				$slug = static::get_slug_from_preset_value( $style_value, $property_key );
+		/**
+		 * Returns classnames, and generates classname(s) from a CSS preset property pattern, e.g., '`var:preset|<PRESET_TYPE>|<PRESET_SLUG>`'.
+		 *
+		 * @param array $style_value      A single raw style value or css preset property from the $block_styles array.
+		 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+		 *
+		 * @return array|string[] An array of CSS classnames, or empty array.
+		 */
+		protected static function get_classnames( $style_value, $style_definition ) {
+			if ( empty( $style_value ) ) {
+				return array();
+			}
 
-				if ( $slug ) {
-					/*
-					 * Right now we expect a classname pattern to be stored in BLOCK_STYLE_DEFINITIONS_METADATA.
-					 * One day, if there are no stored schemata, we could allow custom patterns or
-					 * generate classnames based on other properties
-					 * such as a path or a value or a prefix passed in options.
-					 */
-					$classnames[] = strtr( $classname, array( '$slug' => $slug ) );
+			$classnames = array();
+			if ( ! empty( $style_definition['classnames'] ) ) {
+				foreach ( $style_definition['classnames'] as $classname => $property_key ) {
+					if ( true === $property_key ) {
+						$classnames[] = $classname;
+						continue;
+					}
+
+					$slug = static::get_slug_from_preset_value( $style_value, $property_key );
+
+					if ( $slug ) {
+						/*
+						* Right now we expect a classname pattern to be stored in BLOCK_STYLE_DEFINITIONS_METADATA.
+						* One day, if there are no stored schemata, we could allow custom patterns or
+						* generate classnames based on other properties
+						* such as a path or a value or a prefix passed in options.
+						*/
+						$classnames[] = strtr( $classname, array( '$slug' => $slug ) );
+					}
 				}
 			}
-		}
-
-		return $classnames;
-	}
 
-	/**
-	 * Returns an array of CSS declarations based on valid block style values.
-	 *
-	 * @since 6.1.0
-	 *
-	 * @param array $style_value      A single raw style value from $block_styles array.
-	 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param array $options          {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
-	 * }
-	 *
-	 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 */
-	protected static function get_css_declarations( $style_value, $style_definition, $options = array() ) {
-		if ( isset( $style_definition['value_func'] ) && is_callable( $style_definition['value_func'] ) ) {
-			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $options );
+			return $classnames;
 		}
 
-		$css_declarations     = array();
-		$style_property_keys  = $style_definition['property_keys'];
-		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
-
-		/*
-		 * Build CSS var values from `var:preset|<PRESET_TYPE>|<PRESET_SLUG>` values, e.g, `var(--wp--css--rule-slug )`.
-		 * Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
+		/**
+		 * Returns an array of CSS declarations based on valid block style values.
+		 *
+		 * @since 6.1.0
+		 *
+		 * @param array $style_value      A single raw style value from $block_styles array.
+		 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+		 * @param array $options          {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
+		 * }
+		 *
+		 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
 		 */
-		if ( is_string( $style_value ) && str_contains( $style_value, 'var:' ) ) {
-			if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
-				$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
-				if ( static::is_valid_style_value( $css_var ) ) {
-					$css_declarations[ $style_property_keys['default'] ] = $css_var;
-				}
+		protected static function get_css_declarations( $style_value, $style_definition, $options = array() ) {
+			if ( isset( $style_definition['value_func'] ) && is_callable( $style_definition['value_func'] ) ) {
+				return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $options );
 			}
-			return $css_declarations;
-		}
 
-		/*
-		 * Default rule builder.
-		 * If the input contains an array, assume box model-like properties
-		 * for styles such as margins and padding.
-		 */
-		if ( is_array( $style_value ) ) {
-			// Bail out early if the `'individual'` property is not defined.
-			if ( ! isset( $style_property_keys['individual'] ) ) {
+			$css_declarations     = array();
+			$style_property_keys  = $style_definition['property_keys'];
+			$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
+
+			/*
+			* Build CSS var values from `var:preset|<PRESET_TYPE>|<PRESET_SLUG>` values, e.g, `var(--wp--css--rule-slug )`.
+			* Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
+			*/
+			if ( is_string( $style_value ) && str_contains( $style_value, 'var:' ) ) {
+				if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+					$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
+					if ( static::is_valid_style_value( $css_var ) ) {
+						$css_declarations[ $style_property_keys['default'] ] = $css_var;
+					}
+				}
 				return $css_declarations;
 			}
 
-			foreach ( $style_value as $key => $value ) {
-				if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
-					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
+			/*
+			* Default rule builder.
+			* If the input contains an array, assume box model-like properties
+			* for styles such as margins and padding.
+			*/
+			if ( is_array( $style_value ) ) {
+				// Bail out early if the `'individual'` property is not defined.
+				if ( ! isset( $style_property_keys['individual'] ) ) {
+					return $css_declarations;
 				}
 
-				$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
+				foreach ( $style_value as $key => $value ) {
+					if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+						$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
+					}
 
-				if ( $individual_property && static::is_valid_style_value( $value ) ) {
-					$css_declarations[ $individual_property ] = $value;
+					$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
+
+					if ( $individual_property && static::is_valid_style_value( $value ) ) {
+						$css_declarations[ $individual_property ] = $value;
+					}
 				}
+
+				return $css_declarations;
 			}
 
+			$css_declarations[ $style_property_keys['default'] ] = $style_value;
 			return $css_declarations;
 		}
 
-		$css_declarations[ $style_property_keys['default'] ] = $style_value;
-		return $css_declarations;
-	}
+		/**
+		 * Style value parser that returns a CSS definition array comprising style properties
+		 * that have keys representing individual style properties, otherwise known as longhand CSS properties.
+		 * e.g., "$style_property-$individual_feature: $value;", which could represent the following:
+		 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
+		 * "border-image-{outset|source|width|repeat|slice}: {value};"
+		 *
+		 * @param array $style_value                    A single raw style value from $block_styles array.
+		 * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA representing an individual property of a CSS property, e.g., 'top' in 'border-top'.
+		 * @param array $options                        {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
+		 * }
+		 *
+		 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+		 */
+		protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $options = array() ) {
+			if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
+				return array();
+			}
 
-	/**
-	 * Style value parser that returns a CSS definition array comprising style properties
-	 * that have keys representing individual style properties, otherwise known as longhand CSS properties.
-	 * e.g., "$style_property-$individual_feature: $value;", which could represent the following:
-	 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
-	 * "border-image-{outset|source|width|repeat|slice}: {value};"
-	 *
-	 * @param array $style_value                    A single raw style value from $block_styles array.
-	 * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA representing an individual property of a CSS property, e.g., 'top' in 'border-top'.
-	 * @param array $options                        {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
-	 * }
-	 *
-	 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 */
-	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $options = array() ) {
-		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
-			return array();
+			/*
+			* The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border".
+			* We use this to get a corresponding CSS style definition such as "color" or "width" from the same group.
+			* The second item in $individual_property_definition['path'] array refers to the individual property marker, e.g., "top".
+			*/
+			$definition_group_key    = $individual_property_definition['path'][0];
+			$individual_property_key = $individual_property_definition['path'][1];
+			$should_skip_css_vars    = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
+			$css_declarations        = array();
+
+			foreach ( $style_value as $css_property => $value ) {
+				if ( empty( $value ) ) {
+					continue;
+				}
+
+				// Build a path to the individual rules in definitions.
+				$style_definition_path = array( $definition_group_key, $css_property );
+				$style_definition      = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
+
+				if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
+					// Set a CSS var if there is a valid preset value.
+					if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
+						$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
+					}
+					$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
+					$css_declarations[ $individual_css_property ] = $value;
+				}
+			}
+			return $css_declarations;
 		}
 
-		/*
-		 * The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border".
-		 * We use this to get a corresponding CSS style definition such as "color" or "width" from the same group.
-		 * The second item in $individual_property_definition['path'] array refers to the individual property marker, e.g., "top".
+		/**
+		 * Style value parser that constructs a CSS definition array comprising a single CSS property and value.
+		 * If the provided value is an array containing a `url` property, the function will return a CSS definition array
+		 * with a single property and value, with `url` escaped and injected into a CSS `url()` function,
+		 * e.g., array( 'background-image' => "url( '...' )" ).
+		 *
+		 * @param array $style_value      A single raw style value from $block_styles array.
+		 * @param array $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+		 *
+		 * @return string[] An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
 		 */
-		$definition_group_key    = $individual_property_definition['path'][0];
-		$individual_property_key = $individual_property_definition['path'][1];
-		$should_skip_css_vars    = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
-		$css_declarations        = array();
-
-		foreach ( $style_value as $css_property => $value ) {
-			if ( empty( $value ) ) {
-				continue;
+		protected static function get_url_or_value_css_declaration( $style_value, $style_definition ) {
+			if ( empty( $style_value ) ) {
+				return array();
 			}
 
-			// Build a path to the individual rules in definitions.
-			$style_definition_path = array( $definition_group_key, $css_property );
-			$style_definition      = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
+			$css_declarations = array();
+
+			if ( isset( $style_definition['property_keys']['default'] ) ) {
+				$value = null;
 
-			if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
-				// Set a CSS var if there is a valid preset value.
-				if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
-					$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
+				if ( ! empty( $style_value['url'] ) ) {
+					$value = "url('" . $style_value['url'] . "')";
+				} elseif ( is_string( $style_value ) ) {
+					$value = $style_value;
+				}
+
+				if ( null !== $value ) {
+					$css_declarations[ $style_definition['property_keys']['default'] ] = $value;
 				}
-				$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
-				$css_declarations[ $individual_css_property ] = $value;
 			}
-		}
-		return $css_declarations;
-	}
 
-	/**
-	 * Returns compiled CSS from css_declarations.
-	 *
-	 * @param string[] $css_declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
-	 * @param string   $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
-	 *
-	 * @return string A compiled CSS string.
-	 */
-	public static function compile_css( $css_declarations, $css_selector ) {
-		if ( empty( $css_declarations ) || ! is_array( $css_declarations ) ) {
-			return '';
+			return $css_declarations;
 		}
 
-		// Return an entire rule if there is a selector.
-		if ( $css_selector ) {
-			$css_rule = new WP_Style_Engine_CSS_Rule( $css_selector, $css_declarations );
-			return $css_rule->get_css();
-		}
+		/**
+		 * Returns compiled CSS from css_declarations.
+		 *
+		 * @param string[] $css_declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
+		 * @param string   $css_selector     When a selector is passed, the function will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+		 *
+		 * @return string A compiled CSS string.
+		 */
+		public static function compile_css( $css_declarations, $css_selector ) {
+			if ( empty( $css_declarations ) || ! is_array( $css_declarations ) ) {
+				return '';
+			}
 
-		$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
-		return $css_declarations->get_declarations_string();
-	}
+			// Return an entire rule if there is a selector.
+			if ( $css_selector ) {
+				$css_rule = new WP_Style_Engine_CSS_Rule( $css_selector, $css_declarations );
+				return $css_rule->get_css();
+			}
 
-	/**
-	 * Returns a compiled stylesheet from stored CSS rules.
-	 *
-	 * @param WP_Style_Engine_CSS_Rule[] $css_rules An array of WP_Style_Engine_CSS_Rule objects from a store or otherwise.
-	 * @param array                      $options   {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
-	 *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
-	 * }
-	 *
-	 * @return string A compiled stylesheet from stored CSS rules.
-	 */
-	public static function compile_stylesheet_from_css_rules( $css_rules, $options = array() ) {
-		$processor = new WP_Style_Engine_Processor();
-		$processor->add_rules( $css_rules );
-		return $processor->get_css( $options );
+			$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
+			return $css_declarations->get_declarations_string();
+		}
+
+		/**
+		 * Returns a compiled stylesheet from stored CSS rules.
+		 *
+		 * @param WP_Style_Engine_CSS_Rule[] $css_rules An array of WP_Style_Engine_CSS_Rule objects from a store or otherwise.
+		 * @param array                      $options   {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
+		 *     @type bool $prettify Whether to add new lines and indents to output. Default is the test of whether the global constant `SCRIPT_DEBUG` is defined.
+		 * }
+		 *
+		 * @return string A compiled stylesheet from stored CSS rules.
+		 */
+		public static function compile_stylesheet_from_css_rules( $css_rules, $options = array() ) {
+			$processor = new WP_Style_Engine_Processor();
+			$processor->add_rules( $css_rules );
+			return $processor->get_css( $options );
+		}
 	}
 }
diff --git a/packages/style-engine/docs/using-the-style-engine-with-block-supports.md b/packages/style-engine/docs/using-the-style-engine-with-block-supports.md
index 3587a89388ed08..27d80df189cf3d 100644
--- a/packages/style-engine/docs/using-the-style-engine-with-block-supports.md
+++ b/packages/style-engine/docs/using-the-style-engine-with-block-supports.md
@@ -30,11 +30,11 @@ The global function `wp_style_engine_get_styles` accepts a style object as its f
 
 ```php
 $block_styles =  array(
-     'spacing' => array( 'padding' => '10px', 'margin' => array( 'top' => '1em') ),
-     'typography' => array( 'fontSize' => '2.2rem' ),
+	'spacing' => array( 'padding' => '10px', 'margin' => array( 'top' => '1em') ),
+	'typography' => array( 'fontSize' => '2.2rem' ),
 );
 $styles = wp_style_engine_get_styles(
-    $block_styles
+	$block_styles
 );
 print_r( $styles );
 
@@ -51,7 +51,7 @@ When [registering a block support](https://developer.wordpress.org/reference/cla
 
 If a block has opted into the block support, the values of "class" and "style" will be applied to the block element's "class" and "style" attributes accordingly when rendered in the frontend HTML. Note, this applies only to server-side rendered blocks, for example, the [Site Title block](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#site-title).
 
-The callback receives `$block_type` and `$block_attributes` as arguments. The `style` attribute within `$block_attributes` only contains the raw style object, if any styles have been set for the block, and not any CSS or classnames to be applied to the block's HTML elements. 
+The callback receives `$block_type` and `$block_attributes` as arguments. The `style` attribute within `$block_attributes` only contains the raw style object, if any styles have been set for the block, and not any CSS or classnames to be applied to the block's HTML elements.
 
 Here is where `wp_style_engine_get_styles` comes in handy: it will generate CSS and, if appropriate, classnames to be added to the "style" and "class" HTML attributes in the final rendered block markup.
 
@@ -100,7 +100,7 @@ Before passing the block style object to the Style Engine, you'll need to take i
 
 If a block either:
 
-- has no support for a style, or 
+- has no support for a style, or
 - skips serialization of that style
 
 it's likely that you'll want to remove those style values from the style object before passing it to the Style Engine with help of two functions:
@@ -108,24 +108,24 @@ it's likely that you'll want to remove those style values from the style object
 - wp_should_skip_block_supports_serialization()
 - block_has_support()
 
-We can now update the apply callback code above so that we'll only return "style" and "class", where a block has support and it doesn't skip serialization:
+We can now update the "apply" callback code above so that we'll only return "style" and "class", where a block has support, and it doesn't skip serialization:
 
 ```php
 function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 	// The return value.
 	$attributes = array();
-    
+
 	// Return early if the block skips all serialization for block supports.
 	if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'color' ) ) {
 		return $attributes;
 	}
 
 	// Checks for support and skip serialization.
-	$has_text_support                        = block_has_support( $block_type, array( 'color', 'text' ), false ); 
+	$has_text_support                        = block_has_support( $block_type, array( 'color', 'text' ), false );
 	$has_background_support                  = block_has_support( $block_type, array( 'color', 'background' ), false );
-	$skips_serialization_of_color_text       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' ); 
-	$skips_serialization_of_color_background = wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' ); 
-    
+	$skips_serialization_of_color_text       = wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' );
+	$skips_serialization_of_color_background = wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' );
+
 	// Get the color styles from the style object.
 	$block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;
 
@@ -133,8 +133,14 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 	$color_block_styles = array();
 
 	// Set the color style values according to whether the block has support and does not skip serialization.
-	$spacing_block_styles['text']       = $has_text_support && ! $skips_serialization_of_color_text ? _wp_array_get( $block_color_styles, array( 'text' ), null ) : null;
-	$spacing_block_styles['background'] = $has_background_support && ! $skips_serialization_of_color_background ? _wp_array_get( $block_color_styles, array( 'background' ), null ) : null;
+	$spacing_block_styles['text']       = null;
+	$spacing_block_styles['background'] = null;
+	if ( $has_text_support && ! $skips_serialization_of_color_text ) {
+		$spacing_block_styles['text'] = $block_color_styles['text'] ?? null;
+	}
+	if $has_background_support && ! $skips_serialization_of_color_background ) {
+		$spacing_block_styles['background'] = $block_color_styles['background'] ?? null;
+	}
 
 	// Pass the color styles, excluding those that have no support or skip serialization, to the Style Engine.
 	$styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );
@@ -155,7 +161,7 @@ Styling a block using these presets normally involves adding the selector to the
 
 For styles that can have preset values, such as text color and font family, the Style Engine knows how to construct the classnames using the preset slug.
 
-To discern CSS values from preset values however, the Style Engine expects a special format.
+To discern CSS values from preset values, the Style Engine expects a special format.
 
 Preset values must follow the pattern `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`.
 
@@ -165,13 +171,16 @@ Example:
 
 ```php
 // Let's say the block attributes styles contain a fontSize preset slug of "small".
+// $block_attributes['fontSize'] = 'var:preset|font-size|small';
 $preset_font_size        = "var:preset|font-size|{$block_attributes['fontSize']}";
 // Now let's say the block attributes styles contain a backgroundColor preset slug of "blue".
+// $block_attributes['backgroundColor'] = 'var:preset|color|blue';
 $preset_background_color = "var:preset|color|{$block_attributes['backgroundColor']}";
 
 $block_styles =  array(
 	'typography' => array( 'fontSize' => $preset_font_size ),
-	'color'      => array( 'background' => $preset_background_color )
+	'color'      => array( 'background' => $preset_background_color ),
+	'spacing'    => array( 'padding' => '10px', 'margin' => array( 'top' => '1em') ),
 );
 
 $styles = wp_style_engine_get_styles(
@@ -181,19 +190,29 @@ print_r( $styles );
 
 /*
 array(
-    'css'        => 'background-color:var(--wp--preset--color--blue);font-size:var(--wp--preset--font-size--small);',
-    'classnames' => 'has-background-color has-blue-background-color has-small-font-size',
+	'css'          => 'background-color:var(--wp--preset--color--blue);padding:10px;margin-top:1em;font-size:var(--wp--preset--font-size--small);',
+	'declarations' => array(
+		'background-color' => 'var(--wp--preset--color--blue)',
+		'padding' => '10px',
+		'margin-top' => '1em',
+		'font-size' => 'var(--wp--preset--font-size--small)',
+	),
+    'classnames'   => 'has-background has-blue-background-color has-small-font-size',
 )
 */
 ```
 
-If you don't want the Style Engine to output the CSS custom vars as well, which you might not if you're applying both the CSS and classnames to the block element, you can pass `'convert_vars_to_classnames' => true` in the options array.
+If you don't want the Style Engine to output the CSS custom vars in the generated CSS string as well, which you might not if you're applying both the CSS rules and classnames to the block element, you can pass `'convert_vars_to_classnames' => true` in the options array.
+
+This flag means "convert the vars to classnames and don't output the vars to the CSS". The Style Engine will therefore **only** generate the required classnames and omit the CSS custom vars in the CSS.
+
+Using the above example code, observe the different output when we pass the option:
 
 ```php
 $options = array(
-	// Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
-	'convert_vars_to_classnames' => 'true',
+	'convert_vars_to_classnames' => true,
 );
+
 $styles = wp_style_engine_get_styles(
 	$block_styles,
 	$options
@@ -202,10 +221,14 @@ print_r( $styles );
 
 /*
 array(
-    'css'        => 'letter-spacing:12px;', // non-preset-based CSS will still be compiled.
-    'classnames' => 'has-background-color has-blue-background-color has-small-font-size',
+	'css'          => 'padding:10px;margin-top:1em;',
+	'declarations' => array(
+		'padding' => '10px',
+		'margin-top' => '1em',
+	),
+	'classnames'   => 'has-background has-blue-background-color has-small-font-size',
 )
 */
 ```
 
-Read more about [global styles](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#global-styles) and [preset CSS custom properties](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#css-custom-properties-presets-custom) and [theme supports](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/).
+Read more about [global styles](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#global-styles) and [preset CSS custom properties](https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles.md#css-custom-properties-presets-custom) and [theme supports](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/).
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 5d962bff0630c9..bec29df32f7628 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "1.5.0",
+	"version": "2.13.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,16 +21,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"lodash": "^4.17.21"
+		"@babel/runtime": "7.25.7",
+		"change-case": "^4.1.2"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index 64e4e4a6edeb91..102d5842e7a0be 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { groupBy, kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * Internal dependencies
@@ -19,8 +19,8 @@ import { styleDefinitions } from './styles';
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
- * @param  options Options object with settings to adjust how the styles are generated.
+ * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
+ * @param options Options object with settings to adjust how the styles are generated.
  *
  * @return A generated stylesheet or inline style declarations.
  */
@@ -36,7 +36,20 @@ export function compileCSS( style: Style, options: StyleOptions = {} ): string {
 		return inlineRules.join( ' ' );
 	}
 
-	const groupedRules = groupBy( rules, 'selector' );
+	const groupedRules = rules.reduce(
+		( acc: Record< string, GeneratedCSSRule[] >, rule ) => {
+			const { selector } = rule;
+			if ( ! selector ) {
+				return acc;
+			}
+			if ( ! acc[ selector ] ) {
+				acc[ selector ] = [];
+			}
+			acc[ selector ].push( rule );
+			return acc;
+		},
+		{}
+	);
 	const selectorRules = Object.keys( groupedRules ).reduce(
 		( acc: string[], subSelector: string ) => {
 			acc.push(
@@ -60,8 +73,8 @@ export function compileCSS( style: Style, options: StyleOptions = {} ): string {
  *
  * @since 6.1.0 Introduced in WordPress core.
  *
- * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
- * @param  options Options object with settings to adjust how the styles are generated.
+ * @param style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
+ * @param options Options object with settings to adjust how the styles are generated.
  *
  * @return A collection of objects containing the selector, if any, the CSS property key (camelcase) and parsed CSS value.
  */
@@ -78,3 +91,6 @@ export function getCSSRules(
 
 	return rules;
 }
+
+// Export style utils.
+export { getCSSValueFromRawStyle } from './styles/utils';
diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
new file mode 100644
index 00000000000000..b943032f9c4417
--- /dev/null
+++ b/packages/style-engine/src/styles/background/index.ts
@@ -0,0 +1,93 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule, safeDecodeURI } from '../utils';
+
+const backgroundImage = {
+	name: 'backgroundImage',
+	generate: ( style: Style, options: StyleOptions ) => {
+		const _backgroundImage = style?.background?.backgroundImage;
+
+		/*
+		 * The background image can be a string or an object.
+		 * If the background image is a string, it could already contain a url() function,
+		 * or have a linear-gradient value.
+		 */
+		if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
+			return [
+				{
+					selector: options.selector,
+					key: 'backgroundImage',
+					// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
+					value: `url( '${ encodeURI(
+						safeDecodeURI( _backgroundImage.url )
+					) }' )`,
+				},
+			];
+		}
+
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundImage' ],
+			'backgroundImage'
+		);
+	},
+};
+
+const backgroundPosition = {
+	name: 'backgroundPosition',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundPosition' ],
+			'backgroundPosition'
+		);
+	},
+};
+
+const backgroundRepeat = {
+	name: 'backgroundRepeat',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundRepeat' ],
+			'backgroundRepeat'
+		);
+	},
+};
+
+const backgroundSize = {
+	name: 'backgroundSize',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundSize' ],
+			'backgroundSize'
+		);
+	},
+};
+
+const backgroundAttachment = {
+	name: 'backgroundAttachment',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundAttachment' ],
+			'backgroundAttachment'
+		);
+	},
+};
+
+export default [
+	backgroundImage,
+	backgroundPosition,
+	backgroundRepeat,
+	backgroundSize,
+	backgroundAttachment,
+];
diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 33ae2982e7deac..465e78a09aa5fc 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -7,7 +7,7 @@ import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
 /**
  * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
  *
- * @param  path An array of strings representing the path to the style value in the style object.
+ * @param path An array of strings representing the path to the style value in the style object.
  *
  * @return A function that generates CSS rules.
  */
@@ -19,7 +19,7 @@ function createBorderGenerateFunction( path: string[] ): GenerateFunction {
 /**
  * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
  *
- * @param  edge The edge to create CSS rules for.
+ * @param edge The edge to create CSS rules for.
  *
  * @return A function that generates CSS rules.
  */
diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts
index df3568f7799133..4ffb33e65686d6 100644
--- a/packages/style-engine/src/styles/dimensions/index.ts
+++ b/packages/style-engine/src/styles/dimensions/index.ts
@@ -16,4 +16,16 @@ const minHeight = {
 	},
 };
 
-export default [ minHeight ];
+const aspectRatio = {
+	name: 'aspectRatio',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'dimensions', 'aspectRatio' ],
+			'aspectRatio'
+		);
+	},
+};
+
+export default [ minHeight, aspectRatio ];
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index 5dc1b8743e2ab4..f59935ee3fc571 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -4,6 +4,7 @@
 import border from './border';
 import color from './color';
 import dimensions from './dimensions';
+import background from './background';
 import shadow from './shadow';
 import outline from './outline';
 import spacing from './spacing';
@@ -17,4 +18,5 @@ export const styleDefinitions = [
 	...spacing,
 	...typography,
 	...shadow,
+	...background,
 ];
diff --git a/packages/style-engine/src/styles/test/utils.js b/packages/style-engine/src/styles/test/utils.js
new file mode 100644
index 00000000000000..02f0adf494e71f
--- /dev/null
+++ b/packages/style-engine/src/styles/test/utils.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../utils';
+
+describe( 'utils', () => {
+	describe( 'upperFirst()', () => {
+		it( 'should return an string with a capitalized first letter', () => {
+			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
+		} );
+	} );
+
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
+
+	describe( 'getCSSValueFromRawStyle()', () => {
+		it.each( [
+			[ 'min(40%, 400px)', 'min(40%, 400px)' ],
+			[
+				'var(--wp--preset--color--yellow-bun)',
+				'var:preset|color|yellow-bun',
+			],
+			[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
+			[
+				'var(--wp--preset--font-size--1-px)',
+				'var:preset|font-size|1px',
+			],
+			[
+				'var(--wp--preset--color--orange-11-orange)',
+				'var:preset|color|orange11orange',
+			],
+			[
+				'var(--wp--preset--color--heavenly-blue)',
+				'var:preset|color|heavenlyBlue',
+			],
+			[
+				'var(--wp--preset--background--dark-secrets-100)',
+				'var:preset|background|dark_Secrets_100',
+			],
+			[ null, null ],
+			[ false, false ],
+			[ 1000, 1000 ],
+			[ undefined, undefined ],
+		] )(
+			'should return %s using an incoming value of %s',
+			( expected, value ) => {
+				expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
+			}
+		);
+	} );
+} );
diff --git a/packages/style-engine/src/styles/typography/index.ts b/packages/style-engine/src/styles/typography/index.ts
index 48effa0b2b8a95..92c40d2e156198 100644
--- a/packages/style-engine/src/styles/typography/index.ts
+++ b/packages/style-engine/src/styles/typography/index.ts
@@ -65,7 +65,7 @@ const letterSpacing = {
 };
 
 const lineHeight = {
-	name: 'letterSpacing',
+	name: 'lineHeight',
 	generate: ( style: Style, options: StyleOptions ) => {
 		return generateRule(
 			style,
@@ -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 ) => {
@@ -100,6 +112,18 @@ const textTransform = {
 	},
 };
 
+const writingMode = {
+	name: 'writingMode',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'writingMode' ],
+			'writingMode'
+		);
+	},
+};
+
 export default [
 	fontFamily,
 	fontSize,
@@ -107,6 +131,8 @@ export default [
 	fontWeight,
 	letterSpacing,
 	lineHeight,
+	textColumns,
 	textDecoration,
 	textTransform,
+	writingMode,
 ];
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index d5483e3750d98f..74a18d2c2a6e45 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * Internal dependencies
@@ -19,13 +19,32 @@ import {
 	VARIABLE_PATH_SEPARATOR_TOKEN_STYLE,
 } from './constants';
 
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as an array of properties, like `[ 'x', 'y' ]`.
+ *
+ * @param object Input object.
+ * @param path   Path to the object property.
+ * @return Value of the object property at the specified path.
+ */
+export const getStyleValueByPath = (
+	object: Record< any, any >,
+	path: string[]
+) => {
+	let value: any = object;
+	path.forEach( ( fieldName: string ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style   Style object.
- * @param  options Options object with settings to adjust how the styles are generated.
- * @param  path    An array of strings representing the path to the style value in the style object.
- * @param  ruleKey A CSS property key.
+ * @param style   Style object.
+ * @param options Options object with settings to adjust how the styles are generated.
+ * @param path    An array of strings representing the path to the style value in the style object.
+ * @param ruleKey A CSS property key.
  *
  * @return GeneratedCSSRule[] CSS rules.
  */
@@ -35,14 +54,14 @@ export function generateRule(
 	path: string[],
 	ruleKey: string
 ): GeneratedCSSRule[] {
-	const styleValue: string | undefined = get( style, path );
+	const styleValue: string | undefined = getStyleValueByPath( style, path );
 
 	return styleValue
 		? [
 				{
 					selector: options?.selector,
 					key: ruleKey,
-					value: getCSSVarFromStyleValue( styleValue ),
+					value: getCSSValueFromRawStyle( styleValue ),
 				},
 		  ]
 		: [];
@@ -51,11 +70,11 @@ export function generateRule(
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
- * @param  style                Style object.
- * @param  options              Options object with settings to adjust how the styles are generated.
- * @param  path                 An array of strings representing the path to the style value in the style object.
- * @param  ruleKeys             An array of CSS property keys and patterns.
- * @param  individualProperties The "sides" or individual properties for which to generate rules.
+ * @param style                Style object.
+ * @param options              Options object with settings to adjust how the styles are generated.
+ * @param path                 An array of strings representing the path to the style value in the style object.
+ * @param ruleKeys             An array of CSS property keys and patterns.
+ * @param individualProperties The "sides" or individual properties for which to generate rules.
  *
  * @return GeneratedCSSRule[]  CSS rules.
  */
@@ -66,7 +85,10 @@ export function generateBoxRules(
 	ruleKeys: CssRulesKeys,
 	individualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]
 ): GeneratedCSSRule[] {
-	const boxStyle: Box | string | undefined = get( style, path );
+	const boxStyle: Box | string | undefined = getStyleValueByPath(
+		style,
+		path
+	);
 	if ( ! boxStyle ) {
 		return [];
 	}
@@ -81,8 +103,8 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = getCSSVarFromStyleValue(
-					get( boxStyle, [ side ] )
+				const value = getCSSValueFromRawStyle(
+					getStyleValueByPath( boxStyle, [ side ] )
 				);
 				if ( value ) {
 					acc.push( {
@@ -105,13 +127,23 @@ export function generateBoxRules(
 }
 
 /**
- * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ * Returns a WordPress CSS custom var value from incoming style preset value,
+ * if one is detected.
  *
- * @param  styleValue A raw style value.
+ * The preset value is a string and follows the pattern `var:description|context|slug`.
  *
- * @return string A CSS var value.
+ * Example:
+ *
+ * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+ *
+ * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.
+ *
+ * @return A CSS custom var value if the incoming style value is a preset value.
  */
-export function getCSSVarFromStyleValue( styleValue: string ): string {
+
+export function getCSSValueFromRawStyle< StyleValue = string >(
+	styleValue: StyleValue
+): StyleValue {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
@@ -119,9 +151,18 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 		const variable = styleValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.map( ( presetVariable ) => kebabCase( presetVariable ) )
+			.map( ( presetVariable ) =>
+				kebabCase( presetVariable, {
+					splitRegexp: [
+						/([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar
+						/([0-9])([a-z])/g, // 3bar => 3-bar
+						/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3
+						/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar
+					],
+				} )
+			)
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
+		return `var(--wp--${ variable })` as StyleValue;
 	}
 	return styleValue;
 }
@@ -129,7 +170,7 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param  string The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
  * @return String with the first letter capitalized.
  */
@@ -141,7 +182,7 @@ export function upperFirst( string: string ): string {
 /**
  * Converts an array of strings into a camelCase string.
  *
- * @param  strings The strings to join into a camelCase string.
+ * @param strings The strings to join into a camelCase string.
  *
  * @return camelCase string.
  */
@@ -149,3 +190,24 @@ export function camelCaseJoin( strings: string[] ): string {
 	const [ firstItem, ...rest ] = strings;
 	return firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );
 }
+
+/**
+ * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if
+ * `decodeURI` throws an error.
+ *
+ * @param {string} uri URI to decode.
+ *
+ * @example
+ * ```js
+ * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'
+ * ```
+ *
+ * @return {string} Decoded URI if possible.
+ */
+export function safeDecodeURI( uri: string ): string {
+	try {
+		return decodeURI( uri );
+	} catch ( uriError ) {
+		return uri;
+	}
+}
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index a94bd8a4256810..f7960e19187a21 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; }"
 		);
 	} );
 
@@ -223,6 +224,15 @@ describe( 'getCSSRules', () => {
 		expect(
 			getCSSRules(
 				{
+					background: {
+						backgroundImage: {
+							url: 'https://example.com/image.jpg',
+						},
+						backgroundPosition: '50% 50%',
+						backgroundRepeat: 'no-repeat',
+						backgroundSize: '300px',
+						backgroundAttachment: 'fixed',
+					},
 					color: {
 						text: '#dddddd',
 						background: '#555555',
@@ -242,6 +252,7 @@ describe( 'getCSSRules', () => {
 						fontWeight: '800',
 						fontFamily: "'Helvetica Neue',sans-serif",
 						lineHeight: '3.3',
+						textColumns: '2',
 						textDecoration: 'line-through',
 						letterSpacing: '12px',
 						textTransform: 'uppercase',
@@ -349,6 +360,11 @@ describe( 'getCSSRules', () => {
 				key: 'lineHeight',
 				value: '3.3',
 			},
+			{
+				selector: '.some-selector',
+				key: 'columnCount',
+				value: '2',
+			},
 			{
 				selector: '.some-selector',
 				key: 'textDecoration',
@@ -364,6 +380,31 @@ describe( 'getCSSRules', () => {
 				key: 'boxShadow',
 				value: '10px 10px red',
 			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundImage',
+				value: "url( 'https://example.com/image.jpg' )",
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundPosition',
+				value: '50% 50%',
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundRepeat',
+				value: 'no-repeat',
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundSize',
+				value: '300px',
+			},
+			{
+				selector: '.some-selector',
+				key: 'backgroundAttachment',
+				value: 'fixed',
+			},
 		] );
 	} );
 
@@ -393,4 +434,26 @@ describe( 'getCSSRules', () => {
 			},
 		] );
 	} );
+
+	it( 'should output background image value when that value is a string', () => {
+		expect(
+			getCSSRules(
+				{
+					background: {
+						backgroundImage:
+							"linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
+					},
+				},
+				{
+					selector: '.some-selector',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'backgroundImage',
+				value: "linear-gradient(to bottom,rgb(255 255 0 / 50%),rgb(0 0 255 / 50%), url('https://example.com/image.jpg')",
+			},
+		] );
+	} );
 } );
diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
deleted file mode 100644
index a45d9256dc1c09..00000000000000
--- a/packages/style-engine/src/test/utils.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	camelCaseJoin,
-	getCSSVarFromStyleValue,
-	upperFirst,
-} from '../styles/utils';
-
-describe( 'utils', () => {
-	describe( 'upperFirst()', () => {
-		it( 'should return an string with a capitalized first letter', () => {
-			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
-		} );
-	} );
-
-	describe( 'camelCaseJoin()', () => {
-		it( 'should return a camelCase string', () => {
-			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
-		} );
-	} );
-
-	describe( 'getCSSVarFromStyleValue()', () => {
-		it( 'should return a compiled CSS var', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
-			).toEqual( 'var(--wp--preset--color--yellow-bun)' );
-		} );
-
-		it( 'should kebab case numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
-			).toEqual( 'var(--wp--preset--font-size--h-1)' );
-		} );
-
-		it( 'should kebab case camel case', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
-			).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
-		} );
-	} );
-} );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 0063cd56621c6c..8de623fcfcb2bf 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -21,6 +21,14 @@ export interface BorderIndividualStyles< T extends BoxEdge > {
 }
 
 export interface Style {
+	background?: {
+		backgroundImage?:
+			| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }
+			| CSSProperties[ 'backgroundImage' ];
+		backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
+		backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
+		backgroundSize?: CSSProperties[ 'backgroundSize' ];
+	};
 	border?: {
 		color?: CSSProperties[ 'borderColor' ];
 		radius?:
@@ -39,6 +47,7 @@ export interface Style {
 		left?: BorderIndividualStyles< 'left' >;
 	};
 	dimensions?: {
+		aspectRatio?: CSSProperties[ 'aspectRatio' ];
 		minHeight?: CSSProperties[ 'minHeight' ];
 	};
 	spacing?: {
@@ -52,8 +61,10 @@ export interface Style {
 		fontStyle?: CSSProperties[ 'fontStyle' ];
 		letterSpacing?: CSSProperties[ 'letterSpacing' ];
 		lineHeight?: CSSProperties[ 'lineHeight' ];
+		textColumns?: CSSProperties[ 'columnCount' ];
 		textDecoration?: CSSProperties[ 'textDecoration' ];
 		textTransform?: CSSProperties[ 'textTransform' ];
+		writingMode?: CSSProperties[ 'writingMode' ];
 	};
 	color?: {
 		text?: CSSProperties[ 'color' ];
@@ -83,7 +94,7 @@ export interface StyleOptions {
 
 export interface GeneratedCSSRule {
 	selector?: string;
-	value: string;
+	value: string | unknown;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
 	 * E.g. `paddingTop` instead of `padding-top`.
diff --git a/packages/style-engine/style-engine.php b/packages/style-engine/style-engine.php
index 4571a2fcce4ffe..74df1b1040f6c7 100644
--- a/packages/style-engine/style-engine.php
+++ b/packages/style-engine/style-engine.php
@@ -83,6 +83,7 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
  *     Required. A collection of CSS rules.
  *
  *     @type array ...$0 {
+ *         @type string   $rules_group  A parent CSS selector in the case of nested CSS, or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
  *         @type string   $selector     A CSS selector.
  *         @type string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
  *     }
@@ -116,11 +117,12 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a
 			continue;
 		}
 
+		$rules_group = $css_rule['rules_group'] ?? null;
 		if ( ! empty( $options['context'] ) ) {
-			WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'] );
+			WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'], $rules_group );
 		}
 
-		$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'] );
+		$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'], $rules_group );
 	}
 
 	if ( empty( $css_rule_objects ) ) {
diff --git a/packages/style-engine/tsconfig.json b/packages/style-engine/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/style-engine/tsconfig.json
+++ b/packages/style-engine/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/stylelint-config/.npmrc b/packages/stylelint-config/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/stylelint-config/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 52995b80fb321e..5e6fa218da6f85 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,124 @@
 
 ## Unreleased
 
+## 23.5.0 (2024-11-27)
+
+## 23.4.0 (2024-11-16)
+
+## 23.3.0 (2024-10-30)
+
+## 23.2.0 (2024-10-16)
+
+## 23.1.0 (2024-10-03)
+
+## 23.0.0 (2024-09-19)
+
+### Breaking Changes
+
+-   Updated `stylelint` peer dependency requirement to `^16.8.2` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+-   Updated `stylelint-config-recommended` to `^14.0.1` and disabled new rules ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+-   Updated `stylelint-config-recommended-scss` to `^14.1.0` and disabled new rules ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+-   Added `@stylistic/stylelint-plugin` dependency at `^3.0.1` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+-   Migrated stylelint's deprecated rules from v15 to use `@stylistic/stylelint-plugin` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)). For more information, see the [stylelint migration guide](https://stylelint.io/migration-guide/to-15). To migrate your rule overrides, you just need to add `@stylistic/` in front of the rule names.
+-   Created new `stylistic` and `scss-stylistic` configs ([#64828](https://github.com/WordPress/gutenberg/pull/64828)). If you want to continue using the exact same rule set as before, you should use these, however if you currently use something like `stylelint-config-prettier` to disable formatting rules, you will want to use the non-stylistic configs (using the same names as before).
+-   `scss/at-import-partial-extension` has been renamed ([#64828](https://github.com/WordPress/gutenberg/pull/64828)). You must convert this rule to `scss/load-partial-extension` instead (name only change).
+
+### Bug Fixes
+
+-   Fixes `declaration-block-no-duplicate-properties` in the `scss` config to use the same value as the base config ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
+
+## 22.7.0 (2024-09-05)
+
+## 22.6.0 (2024-08-21)
+
+## 22.5.0 (2024-08-07)
+
+## 22.4.0 (2024-07-24)
+
+## 22.3.0 (2024-07-10)
+
+## 22.2.0 (2024-06-26)
+
+## 22.1.0 (2024-06-15)
+
+## 22.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 21.41.0 (2024-05-16)
+
+## 21.40.0 (2024-05-02)
+
+## 21.39.0 (2024-04-19)
+
+## 21.38.0 (2024-04-03)
+
+## 21.37.0 (2024-03-21)
+
+## 21.36.0 (2024-03-06)
+
+## 21.35.0 (2024-02-21)
+
+## 21.34.0 (2024-02-09)
+
+## 21.33.0 (2024-01-24)
+
+## 21.32.0 (2024-01-10)
+
+## 21.31.0 (2023-12-13)
+
+## 21.30.0 (2023-11-29)
+
+## 21.29.0 (2023-11-16)
+
+## 21.28.0 (2023-11-02)
+
+## 21.27.0 (2023-10-18)
+
+## 21.26.0 (2023-10-05)
+
+## 21.25.0 (2023-09-20)
+
+## 21.24.0 (2023-08-31)
+
+## 21.23.0 (2023-08-16)
+
+## 21.22.0 (2023-08-10)
+
+## 21.21.0 (2023-07-20)
+
+## 21.20.0 (2023-07-05)
+
+## 21.19.0 (2023-06-23)
+
+## 21.18.0 (2023-06-07)
+
+## 21.17.0 (2023-05-24)
+
+## 21.16.0 (2023-05-10)
+
+## 21.15.0 (2023-04-26)
+
+## 21.14.0 (2023-04-12)
+
+## 21.13.0 (2023-03-29)
+
+## 21.12.0 (2023-03-15)
+
+## 21.11.0 (2023-03-01)
+
+## 21.10.0 (2023-02-15)
+
+## 21.9.0 (2023-02-01)
+
+## 21.8.0 (2023-01-11)
+
+## 21.7.0 (2023-01-02)
+
+## 21.6.0 (2022-12-14)
+
 ## 21.5.0 (2022-11-16)
 
 ## 21.4.0 (2022-11-02)
@@ -14,19 +132,19 @@
 
 ## 21.0.0 (2022-08-24)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 14 ([#43141](https://github.com/WordPress/gutenberg/pull/43141)).
 
 ## 20.0.0 (2022-01-27)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increased minimum peer dependency of `stylelint` to `14.2.0` ([#38091](https://github.com/WordPress/gutenberg/pull/38091)). See [official migration guide to v14](https://github.com/stylelint/stylelint/blob/14.0.0/docs/migration-guide/to-14.md) for details.
 
 ## 19.0.0 (2021-01-21)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 12 ([#27934](https://github.com/WordPress/gutenberg/pull/27934)).
 -   Increased minimum peer dependency of `stylelint` to `13.7.0`.
@@ -37,7 +155,7 @@
 
 ## 18.0.0 (2021-01-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   Increase the minimum Node.js version to 12 ([#27934](https://github.com/WordPress/gutenberg/pull/27934)).
 
diff --git a/packages/stylelint-config/README.md b/packages/stylelint-config/README.md
index 0e52e5ef190a42..5d760dddc8f920 100644
--- a/packages/stylelint-config/README.md
+++ b/packages/stylelint-config/README.md
@@ -8,7 +8,7 @@
 $ npm install @wordpress/stylelint-config --save-dev
 ```
 
-**Note**: This package requires Node.js 14.0.0 or later. It is not compatible with older versions.
+**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
 
 ## Usage
 
@@ -30,16 +30,38 @@ If you've globally installed `@wordpress/stylelint-config` using the `-g` flag,
 
 ## Presets
 
-In addition to the default preset, there is also a SCSS preset. This preset extends both `@wordpress/stylelint-config` and [`stylelint-config-recommended-scss`](https://github.com/kristerkari/stylelint-config-recommended-scss).
+In addition to the default preset, there is also a SCSS preset and 2 stylistic variant presets.
 
 ### SCSS
 
+This preset extends both `@wordpress/stylelint-config` and [`stylelint-config-recommended-scss`](https://github.com/kristerkari/stylelint-config-recommended-scss).
+
 ```json
 {
 	"extends": [ "@wordpress/stylelint-config/scss" ]
 }
 ```
 
+### Stylistic
+
+This preset extends `@wordpress/stylelint-config` and adds stylistic rules such as `indentation`.
+
+```json
+{
+	"extends": [ "@wordpress/stylelint-config/stylistic" ]
+}
+```
+
+### SCSS Stylistic
+
+This preset extends`@wordpress/stylelint-config`, `@wordpress/stylelint-config/stylistic` and `@wordpress/stylelint-config/scss`, and adapts some stylistic rules for SCSS.
+
+```json
+{
+	"extends": [ "@wordpress/stylelint-config/scss-stylistic" ]
+}
+```
+
 ## Extending the config
 
 Simply add a `"rules"` key to your config and add your overrides there.
@@ -48,10 +70,10 @@ For example, to change the `indentation` to four spaces and turn off the `number
 
 ```json
 {
-	"extends": "@wordpress/stylelint-config",
+	"extends": "@wordpress/stylelint-config/stylistic",
 	"rules": {
-		"indentation": 4,
-		"number-leading-zero": null
+		"@stylistic/indentation": 4,
+		"@stylistic/number-leading-zero": null
 	}
 }
 ```
diff --git a/packages/stylelint-config/index.js b/packages/stylelint-config/index.js
index 0ab4f954cb35bf..3e5e00b05a2a49 100644
--- a/packages/stylelint-config/index.js
+++ b/packages/stylelint-config/index.js
@@ -1,7 +1,8 @@
 'use strict';
 
+/** @type {import('stylelint').Config} */
 module.exports = {
-	extends: 'stylelint-config-recommended',
+	extends: [ 'stylelint-config-recommended' ].map( require.resolve ),
 	rules: {
 		'at-rule-empty-line-before': [
 			'always',
@@ -10,15 +11,7 @@ module.exports = {
 				ignore: [ 'after-comment' ],
 			},
 		],
-		'at-rule-name-case': 'lower',
-		'at-rule-name-space-after': 'always-single-line',
 		'at-rule-no-unknown': true,
-		'at-rule-semicolon-newline-after': 'always',
-		'block-closing-brace-newline-after': 'always',
-		'block-closing-brace-newline-before': 'always',
-		'block-opening-brace-newline-after': 'always',
-		'block-opening-brace-space-before': 'always',
-		'color-hex-case': 'lower',
 		'color-hex-length': 'short',
 		'color-named': 'never',
 		'comment-empty-line-before': [
@@ -27,20 +20,12 @@ module.exports = {
 				ignore: [ 'stylelint-commands' ],
 			},
 		],
-		'declaration-bang-space-after': 'never',
-		'declaration-bang-space-before': 'always',
 		'declaration-block-no-duplicate-properties': [
 			true,
 			{
 				ignore: [ 'consecutive-duplicates' ],
 			},
 		],
-		'declaration-block-semicolon-newline-after': 'always',
-		'declaration-block-semicolon-space-before': 'never',
-		'declaration-block-trailing-semicolon': 'always',
-		'declaration-colon-newline-after': 'always-multi-line',
-		'declaration-colon-space-after': 'always-single-line',
-		'declaration-colon-space-before': 'never',
 		'declaration-property-unit-allowed-list': {
 			'line-height': [ 'px' ],
 		},
@@ -51,51 +36,20 @@ module.exports = {
 				ignore: [ 'relative' ],
 			},
 		],
-		'function-comma-space-after': 'always',
-		'function-comma-space-before': 'never',
-		'function-max-empty-lines': 1,
 		'function-name-case': [
 			'lower',
 			{
 				ignoreFunctions: [ '/^DXImageTransform.Microsoft.*$/' ],
 			},
 		],
-		'function-parentheses-space-inside': 'never',
 		'function-url-quotes': 'never',
-		'function-whitespace-after': 'always',
-		indentation: 'tab',
 		'length-zero-no-unit': true,
-		'max-empty-lines': 2,
-		'max-line-length': [
-			80,
-			{
-				ignore: 'non-comments',
-				ignorePattern: [
-					'/(https?://[0-9,a-z]*.*)|(^description\\:.+)|(^tags\\:.+)/i',
-				],
-			},
-		],
-		'media-feature-colon-space-after': 'always',
-		'media-feature-colon-space-before': 'never',
-		'media-feature-range-operator-space-after': 'always',
-		'media-feature-range-operator-space-before': 'always',
-		'media-query-list-comma-newline-after': 'always-multi-line',
-		'media-query-list-comma-space-after': 'always-single-line',
-		'media-query-list-comma-space-before': 'never',
-		'no-eol-whitespace': true,
-		'no-missing-end-of-source-newline': true,
-		'number-leading-zero': 'always',
-		'number-no-trailing-zeros': true,
-		'property-case': 'lower',
 		'rule-empty-line-before': [
 			'always',
 			{
 				ignore: [ 'after-comment' ],
 			},
 		],
-		'selector-attribute-brackets-space-inside': 'never',
-		'selector-attribute-operator-space-after': 'never',
-		'selector-attribute-operator-space-before': 'never',
 		'selector-attribute-quotes': 'always',
 		'selector-class-pattern': [
 			'^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
@@ -111,21 +65,15 @@ module.exports = {
 					'Selector should use lowercase and separate words with hyphens (selector-id-pattern)',
 			},
 		],
-		'selector-combinator-space-after': 'always',
-		'selector-combinator-space-before': 'always',
-		'selector-list-comma-newline-after': 'always',
-		'selector-list-comma-space-before': 'never',
-		'selector-max-empty-lines': 0,
-		'selector-pseudo-class-case': 'lower',
-		'selector-pseudo-class-parentheses-space-inside': 'never',
-		'selector-pseudo-element-case': 'lower',
 		'selector-pseudo-element-colon-notation': 'double',
 		'selector-type-case': 'lower',
-		'string-quotes': 'double',
-		'unit-case': 'lower',
 		'value-keyword-case': 'lower',
-		'value-list-comma-newline-after': 'always-multi-line',
-		'value-list-comma-space-after': 'always-single-line',
-		'value-list-comma-space-before': 'never',
+
+		/* Disable new rules from stylelint-config-recommended 7 > 14 */
+		'function-no-unknown': null,
+		'keyframe-block-no-duplicate-selectors': null,
+		'annotation-no-unknown': null,
+		'selector-anb-no-unmatchable': null,
+		'media-query-no-invalid': null,
 	},
 };
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index bffd63cccd7093..0c35601e9c5353 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "21.5.0",
+	"version": "23.5.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
@@ -20,22 +20,26 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"files": [
 		"CHANGELOG.md",
 		"LICENSE",
 		"README.md",
 		"index.js",
-		"scss.js"
+		"scss.js",
+		"scss-stylistic.js",
+		"stylistic.js"
 	],
 	"main": "index.js",
 	"dependencies": {
-		"stylelint-config-recommended": "^6.0.0",
-		"stylelint-config-recommended-scss": "^5.0.2"
+		"@stylistic/stylelint-plugin": "^3.0.1",
+		"stylelint-config-recommended": "^14.0.1",
+		"stylelint-config-recommended-scss": "^14.1.0"
 	},
 	"peerDependencies": {
-		"stylelint": "^14.2"
+		"stylelint": "^16.8.2"
 	},
 	"npmpackagejsonlint": {
 		"extends": "@wordpress/npm-package-json-lint-config",
diff --git a/packages/stylelint-config/scss-stylistic.js b/packages/stylelint-config/scss-stylistic.js
new file mode 100644
index 00000000000000..5d9bbb50c7b66a
--- /dev/null
+++ b/packages/stylelint-config/scss-stylistic.js
@@ -0,0 +1,16 @@
+'use strict';
+
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: [ './stylistic', './scss' ].map( require.resolve ),
+	rules: {
+		'@stylistic/block-opening-brace-space-before': 'always',
+		'@stylistic/block-closing-brace-newline-after': [
+			'always',
+			{
+				ignoreAtRules: [ 'if', 'else' ],
+			},
+		],
+		'@stylistic/at-rule-name-space-after': 'always',
+	},
+};
diff --git a/packages/stylelint-config/scss.js b/packages/stylelint-config/scss.js
index 09940642b218b1..3f0aacce31d5a2 100644
--- a/packages/stylelint-config/scss.js
+++ b/packages/stylelint-config/scss.js
@@ -1,5 +1,6 @@
 'use strict';
 
+/** @type {import('stylelint').Config} */
 module.exports = {
 	extends: [ './', 'stylelint-config-recommended-scss' ].map(
 		require.resolve
@@ -18,19 +19,18 @@ module.exports = {
 			},
 		],
 
-		'block-opening-brace-space-before': 'always',
-		'block-closing-brace-newline-after': [
-			'always',
-			{
-				ignoreAtRules: [ 'if', 'else' ],
-			},
-		],
-		'at-rule-name-space-after': 'always',
 		'scss/at-else-closing-brace-newline-after': 'always-last-in-chain',
 		'scss/at-else-closing-brace-space-after': 'always-intermediate',
 		'scss/at-else-empty-line-before': 'never',
 		'scss/at-if-closing-brace-newline-after': 'always-last-in-chain',
 		'scss/at-if-closing-brace-space-after': 'always-intermediate',
 		'scss/selector-no-redundant-nesting-selector': true,
+		/* This value gets overwritten by stylelint-config-recommended-scss so we need to set it again. */
+		'declaration-block-no-duplicate-properties': [
+			true,
+			{
+				ignore: [ 'consecutive-duplicates' ],
+			},
+		],
 	},
 };
diff --git a/packages/stylelint-config/stylistic.js b/packages/stylelint-config/stylistic.js
new file mode 100644
index 00000000000000..54a1a2ca63dd7a
--- /dev/null
+++ b/packages/stylelint-config/stylistic.js
@@ -0,0 +1,72 @@
+'use strict';
+
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: [ './' ].map( require.resolve ),
+	plugins: [ '@stylistic/stylelint-plugin' ],
+	rules: {
+		'@stylistic/at-rule-name-case': 'lower',
+		'@stylistic/at-rule-name-space-after': 'always-single-line',
+		'@stylistic/at-rule-semicolon-newline-after': 'always',
+		'@stylistic/block-closing-brace-newline-after': 'always',
+		'@stylistic/block-closing-brace-newline-before': 'always',
+		'@stylistic/block-opening-brace-newline-after': 'always',
+		'@stylistic/block-opening-brace-space-before': 'always',
+		'@stylistic/color-hex-case': 'lower',
+		'@stylistic/declaration-bang-space-after': 'never',
+		'@stylistic/declaration-bang-space-before': 'always',
+		'@stylistic/declaration-block-semicolon-newline-after': 'always',
+		'@stylistic/declaration-block-semicolon-space-before': 'never',
+		'@stylistic/declaration-block-trailing-semicolon': 'always',
+		'@stylistic/declaration-colon-newline-after': 'always-multi-line',
+		'@stylistic/declaration-colon-space-after': 'always-single-line',
+		'@stylistic/declaration-colon-space-before': 'never',
+		'@stylistic/function-comma-space-after': 'always',
+		'@stylistic/function-comma-space-before': 'never',
+		'@stylistic/function-max-empty-lines': 1,
+		'@stylistic/function-parentheses-space-inside': 'never',
+		'@stylistic/function-whitespace-after': 'always',
+		'@stylistic/indentation': 'tab',
+		'@stylistic/max-empty-lines': 2,
+		'@stylistic/max-line-length': [
+			80,
+			{
+				ignore: 'non-comments',
+				ignorePattern: [
+					'/(https?://[0-9,a-z]*.*)|(^description\\:.+)|(^tags\\:.+)/i',
+				],
+			},
+		],
+		'@stylistic/media-feature-colon-space-after': 'always',
+		'@stylistic/media-feature-colon-space-before': 'never',
+		'@stylistic/media-feature-range-operator-space-after': 'always',
+		'@stylistic/media-feature-range-operator-space-before': 'always',
+		'@stylistic/media-query-list-comma-newline-after': 'always-multi-line',
+		'@stylistic/media-query-list-comma-space-after': 'always-single-line',
+		'@stylistic/media-query-list-comma-space-before': 'never',
+		'@stylistic/no-eol-whitespace': true,
+		'@stylistic/no-missing-end-of-source-newline': true,
+		'@stylistic/number-leading-zero': 'always',
+		'@stylistic/number-no-trailing-zeros': true,
+		'@stylistic/property-case': 'lower',
+		'@stylistic/selector-attribute-brackets-space-inside': 'never',
+		'@stylistic/selector-attribute-operator-space-after': 'never',
+		'@stylistic/selector-attribute-operator-space-before': 'never',
+		'@stylistic/selector-combinator-space-after': 'always',
+		'@stylistic/selector-combinator-space-before': 'always',
+		'@stylistic/selector-list-comma-newline-after': 'always',
+		'@stylistic/selector-list-comma-space-before': 'never',
+		'@stylistic/selector-max-empty-lines': 0,
+		'@stylistic/selector-pseudo-class-case': 'lower',
+		'@stylistic/selector-pseudo-class-parentheses-space-inside': 'never',
+		'@stylistic/selector-pseudo-element-case': 'lower',
+		'@stylistic/string-quotes': 'double',
+		'@stylistic/unit-case': 'lower',
+		'@stylistic/value-list-comma-newline-after': 'always-multi-line',
+		'@stylistic/value-list-comma-space-after': 'always-single-line',
+		'@stylistic/value-list-comma-space-before': 'never',
+
+		/* Add back deprecated rule from stylelint-config-recommended */
+		'@stylistic/no-extra-semicolons': true,
+	},
+};
diff --git a/packages/stylelint-config/test/.stylelintignore b/packages/stylelint-config/test/.stylelintignore
new file mode 100644
index 00000000000000..f74c877ecba44c
--- /dev/null
+++ b/packages/stylelint-config/test/.stylelintignore
@@ -0,0 +1 @@
+# This file needs to exist so test files have a way to unignore the files in this folder.
diff --git a/packages/stylelint-config/test/.stylelintrc.json b/packages/stylelint-config/test/.stylelintrc.json
index 1ea6c83527d288..059284930a130c 100644
--- a/packages/stylelint-config/test/.stylelintrc.json
+++ b/packages/stylelint-config/test/.stylelintrc.json
@@ -1,4 +1,13 @@
 {
-	"extends": "@wordpress/stylelint-config/scss",
-	"ignoreFiles": [ "*-invalid.scss" ]
+	"extends": "./.stylelintrc.tests.json",
+	"overrides": [
+		{
+			"files": [ "*.scss", "**/*.scss" ],
+			"ignoreFiles": [ "*-invalid.scss" ]
+		},
+		{
+			"files": [ "*.css", "**/*.css" ],
+			"ignoreFiles": [ "*-invalid.css" ]
+		}
+	]
 }
diff --git a/packages/stylelint-config/test/.stylelintrc.tests.json b/packages/stylelint-config/test/.stylelintrc.tests.json
new file mode 100644
index 00000000000000..c80288c8dc8bb7
--- /dev/null
+++ b/packages/stylelint-config/test/.stylelintrc.tests.json
@@ -0,0 +1,13 @@
+{
+	"rules": {},
+	"overrides": [
+		{
+			"files": [ "*.scss", "**/*.scss" ],
+			"extends": "@wordpress/stylelint-config/scss-stylistic"
+		},
+		{
+			"files": [ "*.css", "**/*.css" ],
+			"extends": "@wordpress/stylelint-config/stylistic"
+		}
+	]
+}
diff --git a/packages/stylelint-config/test/__snapshots__/commenting.js.snap b/packages/stylelint-config/test/__snapshots__/commenting.js.snap
index 82a5c3efe8ff03..ab191a80e1e73b 100644
--- a/packages/stylelint-config/test/__snapshots__/commenting.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/commenting.js.snap
@@ -1,27 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid commenting css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
+    "column": 131,
+    "endColumn": 132,
+    "endLine": 24,
+    "line": 24,
+    "rule": "@stylistic/max-line-length",
+    "severity": "error",
+    "text": "Expected line length to be no more than 80 characters (@stylistic/max-line-length)",
+  },
+  {
     "column": 1,
+    "endColumn": 3,
+    "endLine": 14,
     "line": 9,
     "rule": "comment-empty-line-before",
     "severity": "error",
     "text": "Expected empty line before comment (comment-empty-line-before)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 44,
+    "endLine": 18,
     "line": 18,
     "rule": "comment-empty-line-before",
     "severity": "error",
     "text": "Expected empty line before comment (comment-empty-line-before)",
   },
-  Object {
-    "column": 131,
-    "line": 24,
-    "rule": "max-line-length",
-    "severity": "error",
-    "text": "Expected line length to be no more than 80 characters (max-line-length)",
-  },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/functions.js.snap b/packages/stylelint-config/test/__snapshots__/functions.js.snap
index 0e75e70fcf7b49..aa3ee40e69cc66 100644
--- a/packages/stylelint-config/test/__snapshots__/functions.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/functions.js.snap
@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid functions css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 9,
+    "endColumn": 13,
+    "endLine": 4,
     "line": 4,
     "rule": "function-name-case",
     "severity": "error",
-    "text": "Expected \\"Calc\\" to be \\"calc\\" (function-name-case)",
+    "text": "Expected "Calc" to be "calc" (function-name-case)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/index.js.snap b/packages/stylelint-config/test/__snapshots__/index.js.snap
index b0df67be5d2f93..10c35b02e0e937 100644
--- a/packages/stylelint-config/test/__snapshots__/index.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/index.js.snap
@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 7,
+    "endColumn": 8,
+    "endLine": 2,
     "line": 2,
-    "rule": "number-leading-zero",
+    "rule": "@stylistic/number-leading-zero",
     "severity": "error",
-    "text": "Expected a leading zero (number-leading-zero)",
+    "text": "Expected a leading zero (@stylistic/number-leading-zero)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/media-queries.js.snap b/packages/stylelint-config/test/__snapshots__/media-queries.js.snap
index e5f02f1c72b828..93bcf3c13d399c 100644
--- a/packages/stylelint-config/test/__snapshots__/media-queries.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/media-queries.js.snap
@@ -1,83 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid media queries css snapshot matches warnings 1`] = `
-Array [
-  Object {
-    "column": 1,
-    "line": 31,
-    "rule": "at-rule-no-unknown",
-    "severity": "error",
-    "text": "Unexpected unknown at-rule \\"@mdia\\" (at-rule-no-unknown)",
-  },
-  Object {
+[
+  {
     "column": 26,
+    "endColumn": 27,
+    "endLine": 1,
     "line": 1,
-    "rule": "media-feature-colon-space-after",
+    "rule": "@stylistic/media-feature-colon-space-after",
     "severity": "error",
-    "text": "Expected single space after \\":\\" (media-feature-colon-space-after)",
+    "text": "Expected single space after ":" (@stylistic/media-feature-colon-space-after)",
   },
-  Object {
+  {
     "column": 27,
+    "endColumn": 28,
+    "endLine": 6,
     "line": 6,
-    "rule": "media-feature-colon-space-after",
+    "rule": "@stylistic/media-feature-colon-space-after",
     "severity": "error",
-    "text": "Expected single space after \\":\\" (media-feature-colon-space-after)",
+    "text": "Expected single space after ":" (@stylistic/media-feature-colon-space-after)",
   },
-  Object {
+  {
     "column": 27,
+    "endColumn": 28,
+    "endLine": 6,
     "line": 6,
-    "rule": "media-feature-colon-space-before",
-    "severity": "error",
-    "text": "Unexpected whitespace before \\":\\" (media-feature-colon-space-before)",
-  },
-  Object {
-    "column": 17,
-    "line": 11,
-    "rule": "media-feature-name-no-unknown",
+    "rule": "@stylistic/media-feature-colon-space-before",
     "severity": "error",
-    "text": "Unexpected unknown media feature name \\"max-width 699px\\" (media-feature-name-no-unknown)",
+    "text": "Unexpected whitespace before ":" (@stylistic/media-feature-colon-space-before)",
   },
-  Object {
+  {
     "column": 28,
+    "endColumn": 29,
+    "endLine": 16,
     "line": 16,
-    "rule": "media-feature-range-operator-space-after",
+    "rule": "@stylistic/media-feature-range-operator-space-after",
     "severity": "error",
-    "text": "Expected single space after range operator (media-feature-range-operator-space-after)",
+    "text": "Expected single space after range operator (@stylistic/media-feature-range-operator-space-after)",
   },
-  Object {
+  {
     "column": 29,
+    "endColumn": 30,
+    "endLine": 21,
     "line": 21,
-    "rule": "media-feature-range-operator-space-after",
+    "rule": "@stylistic/media-feature-range-operator-space-after",
     "severity": "error",
-    "text": "Expected single space after range operator (media-feature-range-operator-space-after)",
+    "text": "Expected single space after range operator (@stylistic/media-feature-range-operator-space-after)",
   },
-  Object {
+  {
     "column": 25,
+    "endColumn": 26,
+    "endLine": 16,
     "line": 16,
-    "rule": "media-feature-range-operator-space-before",
+    "rule": "@stylistic/media-feature-range-operator-space-before",
     "severity": "error",
-    "text": "Expected single space before range operator (media-feature-range-operator-space-before)",
+    "text": "Expected single space before range operator (@stylistic/media-feature-range-operator-space-before)",
   },
-  Object {
+  {
     "column": 25,
+    "endColumn": 26,
+    "endLine": 26,
     "line": 26,
-    "rule": "media-feature-range-operator-space-before",
+    "rule": "@stylistic/media-feature-range-operator-space-before",
     "severity": "error",
-    "text": "Expected single space before range operator (media-feature-range-operator-space-before)",
+    "text": "Expected single space before range operator (@stylistic/media-feature-range-operator-space-before)",
   },
-  Object {
+  {
     "column": 27,
+    "endColumn": 28,
+    "endLine": 36,
     "line": 36,
-    "rule": "media-query-list-comma-space-before",
+    "rule": "@stylistic/media-query-list-comma-space-before",
     "severity": "error",
-    "text": "Unexpected whitespace before \\",\\" (media-query-list-comma-space-before)",
+    "text": "Unexpected whitespace before "," (@stylistic/media-query-list-comma-space-before)",
   },
-  Object {
+  {
     "column": 27,
+    "endColumn": 28,
+    "endLine": 40,
     "line": 40,
-    "rule": "media-query-list-comma-space-before",
+    "rule": "@stylistic/media-query-list-comma-space-before",
+    "severity": "error",
+    "text": "Unexpected whitespace before "," (@stylistic/media-query-list-comma-space-before)",
+  },
+  {
+    "column": 1,
+    "endColumn": 6,
+    "endLine": 31,
+    "line": 31,
+    "rule": "at-rule-no-unknown",
+    "severity": "error",
+    "text": "Unexpected unknown at-rule "@mdia" (at-rule-no-unknown)",
+  },
+  {
+    "column": 17,
+    "endColumn": 24,
+    "endLine": 11,
+    "line": 11,
+    "rule": "media-feature-name-no-unknown",
     "severity": "error",
-    "text": "Unexpected whitespace before \\",\\" (media-query-list-comma-space-before)",
+    "text": "Unexpected unknown media feature name "unknown" (media-feature-name-no-unknown)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/properties.js.snap b/packages/stylelint-config/test/__snapshots__/properties.js.snap
index cb4c5a5bf2a9c4..a0c36aa885e1f8 100644
--- a/packages/stylelint-config/test/__snapshots__/properties.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/properties.js.snap
@@ -1,55 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid properties css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 13,
+    "endColumn": 14,
+    "endLine": 2,
     "line": 2,
-    "rule": "color-hex-case",
+    "rule": "@stylistic/color-hex-case",
     "severity": "error",
-    "text": "Expected \\"#FFFFFF\\" to be \\"#ffffff\\" (color-hex-case)",
+    "text": "Expected "#FFFFFF" to be "#ffffff" (@stylistic/color-hex-case)",
   },
-  Object {
+  {
     "column": 13,
+    "endColumn": 14,
+    "endLine": 2,
     "line": 2,
-    "rule": "color-hex-length",
+    "rule": "@stylistic/declaration-colon-space-after",
     "severity": "error",
-    "text": "Expected \\"#FFFFFF\\" to be \\"#FFF\\" (color-hex-length)",
+    "text": "Expected single space after ":" with a single-line declaration (@stylistic/declaration-colon-space-after)",
   },
-  Object {
-    "column": 2,
-    "line": 5,
-    "rule": "declaration-block-no-shorthand-property-overrides",
+  {
+    "column": 17,
+    "endColumn": 19,
+    "endLine": 4,
+    "line": 4,
+    "rule": "@stylistic/unit-case",
     "severity": "error",
-    "text": "Unexpected shorthand \\"margin\\" after \\"margin-left\\" (declaration-block-no-shorthand-property-overrides)",
+    "text": "Expected "PX" to be "px" (@stylistic/unit-case)",
   },
-  Object {
+  {
     "column": 13,
+    "endColumn": 20,
+    "endLine": 2,
     "line": 2,
-    "rule": "declaration-colon-space-after",
+    "rule": "color-hex-length",
     "severity": "error",
-    "text": "Expected single space after \\":\\" with a single-line declaration (declaration-colon-space-after)",
+    "text": "Expected "#FFFFFF" to be "#FFF" (color-hex-length)",
   },
-  Object {
+  {
     "column": 2,
-    "line": 6,
-    "rule": "property-no-unknown",
+    "endColumn": 8,
+    "endLine": 5,
+    "line": 5,
+    "rule": "declaration-block-no-shorthand-property-overrides",
     "severity": "error",
-    "text": "Unexpected unknown property \\"argin\\" (property-no-unknown)",
+    "text": "Unexpected shorthand "margin" after "margin-left" (declaration-block-no-shorthand-property-overrides)",
   },
-  Object {
-    "column": 15,
-    "line": 4,
-    "rule": "unit-case",
+  {
+    "column": 2,
+    "endColumn": 7,
+    "endLine": 6,
+    "line": 6,
+    "rule": "property-no-unknown",
     "severity": "error",
-    "text": "Expected \\"PX\\" to be \\"px\\" (unit-case)",
+    "text": "Unexpected unknown property "argin" (property-no-unknown)",
   },
-  Object {
+  {
     "column": 11,
+    "endColumn": 16,
+    "endLine": 3,
     "line": 3,
     "rule": "value-keyword-case",
     "severity": "error",
-    "text": "Expected \\"BLOCK\\" to be \\"block\\" (value-keyword-case)",
+    "text": "Expected "BLOCK" to be "block" (value-keyword-case)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/scss.js.snap b/packages/stylelint-config/test/__snapshots__/scss.js.snap
index d3ca3a505b7a44..a1abeef86ac963 100644
--- a/packages/stylelint-config/test/__snapshots__/scss.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/scss.js.snap
@@ -1,62 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid scss snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
+    "column": 5,
+    "endColumn": 6,
+    "endLine": 14,
+    "line": 14,
+    "rule": "@stylistic/block-opening-brace-space-before",
+    "severity": "error",
+    "text": "Expected single space before "{" (@stylistic/block-opening-brace-space-before)",
+  },
+  {
+    "column": 7,
+    "endColumn": 8,
+    "endLine": 31,
+    "line": 31,
+    "rule": "@stylistic/number-leading-zero",
+    "severity": "error",
+    "text": "Expected a leading zero (@stylistic/number-leading-zero)",
+  },
+  {
+    "column": 15,
+    "endColumn": 16,
+    "endLine": 28,
+    "line": 28,
+    "rule": "@stylistic/no-extra-semicolons",
+    "severity": "error",
+    "text": "Unexpected extra semicolon (@stylistic/no-extra-semicolons)",
+  },
+  {
     "column": 1,
+    "endColumn": 6,
+    "endLine": 14,
     "line": 14,
     "rule": "scss/at-else-empty-line-before",
     "severity": "error",
     "text": "Unexpected empty line before @else (scss/at-else-empty-line-before)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 12,
     "line": 12,
     "rule": "scss/at-if-closing-brace-newline-after",
     "severity": "error",
-    "text": "Unexpected newline after \\"}\\" of @if statement (scss/at-if-closing-brace-newline-after)",
+    "text": "Unexpected newline after "}" of @if statement (scss/at-if-closing-brace-newline-after)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 12,
     "line": 12,
     "rule": "scss/at-if-closing-brace-space-after",
     "severity": "error",
-    "text": "Expected single space after \\"}\\" of @if statement (scss/at-if-closing-brace-space-after)",
+    "text": "Expected single space after "}" of @if statement (scss/at-if-closing-brace-space-after)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 9,
+    "endLine": 1,
     "line": 1,
     "rule": "scss/at-rule-no-unknown",
     "severity": "error",
-    "text": "Unexpected unknown at-rule \\"@unknown\\" (scss/at-rule-no-unknown)",
+    "text": "Unexpected unknown at-rule "@unknown" (scss/at-rule-no-unknown)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 15,
+    "endLine": 22,
     "line": 22,
     "rule": "at-rule-empty-line-before",
     "severity": "error",
     "text": "Unexpected empty line before at-rule (at-rule-empty-line-before)",
   },
-  Object {
-    "column": 5,
-    "line": 14,
-    "rule": "block-opening-brace-space-before",
-    "severity": "error",
-    "text": "Expected single space before \\"{\\" (block-opening-brace-space-before)",
-  },
-  Object {
-    "column": 15,
-    "line": 28,
-    "rule": "no-extra-semicolons",
-    "severity": "error",
-    "text": "Unexpected extra semicolon (no-extra-semicolons)",
-  },
-  Object {
-    "column": 7,
-    "line": 31,
-    "rule": "number-leading-zero",
-    "severity": "error",
-    "text": "Expected a leading zero (number-leading-zero)",
-  },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap b/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap
index 30e2617192d204..ea1746c5383622 100644
--- a/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/selectors-scss.js.snap
@@ -1,44 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid selectors scss snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 3,
     "line": 3,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
     "text": "Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 10,
     "line": 10,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
     "text": "Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 17,
     "line": 17,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
     "text": "Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 24,
     "line": 24,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
     "text": "Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)",
   },
-  Object {
+  {
     "column": 2,
+    "endColumn": 3,
+    "endLine": 31,
     "line": 31,
     "rule": "scss/selector-no-redundant-nesting-selector",
     "severity": "error",
     "text": "Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)",
   },
-  Object {
+  {
     "column": 10,
+    "endColumn": 11,
+    "endLine": 31,
     "line": 31,
     "rule": "selector-pseudo-element-colon-notation",
     "severity": "error",
diff --git a/packages/stylelint-config/test/__snapshots__/selectors.js.snap b/packages/stylelint-config/test/__snapshots__/selectors.js.snap
index c170e000c6df52..f39edbfdb3fa51 100644
--- a/packages/stylelint-config/test/__snapshots__/selectors.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/selectors.js.snap
@@ -1,62 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid selectors css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
+    "column": 12,
+    "endColumn": 13,
+    "endLine": 17,
+    "line": 17,
+    "rule": "@stylistic/string-quotes",
+    "severity": "error",
+    "text": "Expected double quotes (@stylistic/string-quotes)",
+  },
+  {
     "column": 15,
+    "endColumn": 19,
+    "endLine": 18,
     "line": 18,
     "rule": "declaration-property-unit-allowed-list",
     "severity": "error",
-    "text": "Unexpected unit \\"%\\" for property \\"line-height\\" (declaration-property-unit-allowed-list)",
+    "text": "Unexpected unit "%" for property "line-height" (declaration-property-unit-allowed-list)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 11,
+    "endLine": 25,
     "line": 25,
     "rule": "selector-class-pattern",
     "severity": "error",
     "text": "Selector should use lowercase and separate words with hyphens (selector-class-pattern)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 13,
+    "endLine": 1,
     "line": 1,
     "rule": "selector-id-pattern",
     "severity": "error",
     "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 14,
+    "endLine": 5,
     "line": 5,
     "rule": "selector-id-pattern",
     "severity": "error",
     "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
   },
-  Object {
+  {
     "column": 4,
+    "endColumn": 17,
+    "endLine": 9,
     "line": 9,
     "rule": "selector-id-pattern",
     "severity": "error",
     "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 10,
+    "endLine": 21,
     "line": 21,
     "rule": "selector-id-pattern",
     "severity": "error",
     "text": "Selector should use lowercase and separate words with hyphens (selector-id-pattern)",
   },
-  Object {
+  {
     "column": 10,
+    "endColumn": 11,
+    "endLine": 29,
     "line": 29,
     "rule": "selector-pseudo-element-colon-notation",
     "severity": "error",
     "text": "Expected double colon pseudo-element notation (selector-pseudo-element-colon-notation)",
   },
-  Object {
-    "column": 12,
-    "line": 17,
-    "rule": "string-quotes",
-    "severity": "error",
-    "text": "Expected double quotes (string-quotes)",
-  },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/structure.js.snap b/packages/stylelint-config/test/__snapshots__/structure.js.snap
index 45da6df9648187..c59cfb0fc29186 100644
--- a/packages/stylelint-config/test/__snapshots__/structure.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/structure.js.snap
@@ -1,62 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid structure css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 45,
+    "endColumn": 46,
+    "endLine": 7,
     "line": 7,
-    "rule": "block-closing-brace-newline-before",
+    "rule": "@stylistic/block-closing-brace-newline-before",
     "severity": "error",
-    "text": "Expected newline before \\"}\\" (block-closing-brace-newline-before)",
+    "text": "Expected newline before "}" (@stylistic/block-closing-brace-newline-before)",
   },
-  Object {
+  {
     "column": 14,
+    "endColumn": 15,
+    "endLine": 7,
     "line": 7,
-    "rule": "block-opening-brace-newline-after",
+    "rule": "@stylistic/block-opening-brace-newline-after",
     "severity": "error",
-    "text": "Expected newline after \\"{\\" (block-opening-brace-newline-after)",
+    "text": "Expected newline after "{" (@stylistic/block-opening-brace-newline-after)",
   },
-  Object {
+  {
     "column": 32,
+    "endColumn": 33,
+    "endLine": 7,
     "line": 7,
-    "rule": "declaration-block-semicolon-newline-after",
+    "rule": "@stylistic/declaration-block-semicolon-newline-after",
     "severity": "error",
-    "text": "Expected newline after \\";\\" (declaration-block-semicolon-newline-after)",
+    "text": "Expected newline after ";" (@stylistic/declaration-block-semicolon-newline-after)",
   },
-  Object {
-    "column": 12,
-    "line": 1,
-    "rule": "selector-list-comma-newline-after",
-    "severity": "error",
-    "text": "Expected newline after \\",\\" (selector-list-comma-newline-after)",
-  },
-  Object {
-    "column": 25,
-    "line": 1,
-    "rule": "selector-list-comma-newline-after",
-    "severity": "error",
-    "text": "Expected newline after \\",\\" (selector-list-comma-newline-after)",
-  },
-  Object {
+  {
     "column": 3,
+    "endColumn": 4,
+    "endLine": 4,
     "line": 4,
-    "rule": "indentation",
+    "rule": "@stylistic/indentation",
     "severity": "error",
-    "text": "Expected indentation of 0 tabs (indentation)",
+    "text": "Expected indentation of 0 tabs (@stylistic/indentation)",
   },
-  Object {
+  {
     "column": 3,
+    "endColumn": 20,
+    "endLine": 2,
     "line": 2,
-    "rule": "indentation",
+    "rule": "@stylistic/indentation",
     "severity": "error",
-    "text": "Expected indentation of 1 tab (indentation)",
+    "text": "Expected indentation of 1 tab (@stylistic/indentation)",
   },
-  Object {
+  {
     "column": 3,
+    "endColumn": 15,
+    "endLine": 3,
     "line": 3,
-    "rule": "indentation",
+    "rule": "@stylistic/indentation",
+    "severity": "error",
+    "text": "Expected indentation of 1 tab (@stylistic/indentation)",
+  },
+  {
+    "column": 12,
+    "endColumn": 13,
+    "endLine": 1,
+    "line": 1,
+    "rule": "@stylistic/selector-list-comma-newline-after",
+    "severity": "error",
+    "text": "Expected newline after "," (@stylistic/selector-list-comma-newline-after)",
+  },
+  {
+    "column": 25,
+    "endColumn": 26,
+    "endLine": 1,
+    "line": 1,
+    "rule": "@stylistic/selector-list-comma-newline-after",
     "severity": "error",
-    "text": "Expected indentation of 1 tab (indentation)",
+    "text": "Expected newline after "," (@stylistic/selector-list-comma-newline-after)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/__snapshots__/values.js.snap b/packages/stylelint-config/test/__snapshots__/values.js.snap
index ef61bc15a2eed3..95c34fcbfc8d44 100644
--- a/packages/stylelint-config/test/__snapshots__/values.js.snap
+++ b/packages/stylelint-config/test/__snapshots__/values.js.snap
@@ -1,69 +1,87 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`flags warnings with invalid values css snapshot matches warnings 1`] = `
-Array [
-  Object {
+[
+  {
     "column": 16,
+    "endColumn": 17,
+    "endLine": 2,
     "line": 2,
-    "rule": "declaration-block-trailing-semicolon",
+    "rule": "@stylistic/declaration-block-trailing-semicolon",
     "severity": "error",
-    "text": "Expected a trailing semicolon (declaration-block-trailing-semicolon)",
+    "text": "Expected a trailing semicolon (@stylistic/declaration-block-trailing-semicolon)",
   },
-  Object {
+  {
     "column": 13,
+    "endColumn": 14,
+    "endLine": 2,
     "line": 2,
-    "rule": "declaration-colon-space-after",
+    "rule": "@stylistic/declaration-colon-space-after",
     "severity": "error",
-    "text": "Expected single space after \\":\\" with a single-line declaration (declaration-colon-space-after)",
+    "text": "Expected single space after ":" with a single-line declaration (@stylistic/declaration-colon-space-after)",
   },
-  Object {
+  {
     "column": 15,
+    "endColumn": 20,
+    "endLine": 12,
     "line": 12,
     "rule": "declaration-property-unit-allowed-list",
     "severity": "error",
-    "text": "Unexpected unit \\"em\\" for property \\"line-height\\" (declaration-property-unit-allowed-list)",
+    "text": "Unexpected unit "em" for property "line-height" (declaration-property-unit-allowed-list)",
   },
-  Object {
+  {
     "column": 15,
+    "endColumn": 30,
+    "endLine": 10,
     "line": 10,
     "rule": "font-family-name-quotes",
     "severity": "error",
-    "text": "Expected quotes around \\"Times New Roman\\" (font-family-name-quotes)",
+    "text": "Expected quotes around "Times New Roman" (font-family-name-quotes)",
   },
-  Object {
+  {
     "column": 15,
+    "endColumn": 19,
+    "endLine": 11,
     "line": 11,
     "rule": "font-weight-notation",
     "severity": "error",
-    "text": "Expected numeric font-weight notation (font-weight-notation)",
+    "text": "Expected "bold" to be "700" (font-weight-notation)",
   },
-  Object {
+  {
     "column": 11,
+    "endColumn": 13,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
     "text": "Unexpected unit (length-zero-no-unit)",
   },
-  Object {
+  {
     "column": 15,
+    "endColumn": 17,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
     "text": "Unexpected unit (length-zero-no-unit)",
   },
-  Object {
+  {
     "column": 24,
+    "endColumn": 26,
+    "endLine": 6,
     "line": 6,
     "rule": "length-zero-no-unit",
     "severity": "error",
     "text": "Unexpected unit (length-zero-no-unit)",
   },
-  Object {
+  {
     "column": 1,
+    "endColumn": 10,
+    "endLine": 15,
     "line": 15,
     "rule": "no-duplicate-selectors",
     "severity": "error",
-    "text": "Unexpected duplicate selector \\".selector\\", first used at line 1 (no-duplicate-selectors)",
+    "text": "Unexpected duplicate selector ".selector", first used at line 1 (no-duplicate-selectors)",
   },
 ]
 `;
diff --git a/packages/stylelint-config/test/commenting.js b/packages/stylelint-config/test/commenting.js
index 1a23a47434fc10..dde02f605faf14 100644
--- a/packages/stylelint-config/test/commenting.js
+++ b/packages/stylelint-config/test/commenting.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/commenting-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/commenting-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid commenting css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './commenting-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid commenting css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './commenting-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/functions.js b/packages/stylelint-config/test/functions.js
index 38b0fbf37a3a87..d6fb2a7ddf84e0 100644
--- a/packages/stylelint-config/test/functions.js
+++ b/packages/stylelint-config/test/functions.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/functions-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/functions-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid functions css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './functions-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid functions css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './functions-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/index.js b/packages/stylelint-config/test/index.js
index dfc857e8a45041..d974a9ac110f73 100644
--- a/packages/stylelint-config/test/index.js
+++ b/packages/stylelint-config/test/index.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/css-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/css-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './css-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './css-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/media-queries-invalid.css b/packages/stylelint-config/test/media-queries-invalid.css
index c89a2776bb807b..8fff7111065e0f 100644
--- a/packages/stylelint-config/test/media-queries-invalid.css
+++ b/packages/stylelint-config/test/media-queries-invalid.css
@@ -8,7 +8,7 @@
 	/* Your selectors */
 }
 
-@media all and (max-width 699px) {
+@media all and (unknown) {
 
 	/* Your selectors */
 }
diff --git a/packages/stylelint-config/test/media-queries.js b/packages/stylelint-config/test/media-queries.js
index a3b59aa0fb5413..6b8390e7933b99 100644
--- a/packages/stylelint-config/test/media-queries.js
+++ b/packages/stylelint-config/test/media-queries.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/media-queries-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/media-queries-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid media queries css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './media-queries-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid media queries css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './media-queries-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/properties.js b/packages/stylelint-config/test/properties.js
index 35cedc7697515d..51dded0543d438 100644
--- a/packages/stylelint-config/test/properties.js
+++ b/packages/stylelint-config/test/properties.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/properties-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/properties-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid properties css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './properties-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid properties css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './properties-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/scss.js b/packages/stylelint-config/test/scss.js
index 9372d502b0d8a4..efe01c3d0f2cc0 100644
--- a/packages/stylelint-config/test/scss.js
+++ b/packages/stylelint-config/test/scss.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../scss' ),
-	validScss = fs.readFileSync(
-		'./packages/stylelint-config/test/scss-valid.scss',
-		'utf-8'
-	),
-	invalidScss = fs.readFileSync(
-		'./packages/stylelint-config/test/scss-invalid.scss',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid scss', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validScss,
-			config,
-		} );
+		result = getStylelintResult( './scss-valid.scss' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid scss', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidScss,
-			config,
-		} );
+		result = getStylelintResult( './scss-invalid.scss' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/selectors-scss.js b/packages/stylelint-config/test/selectors-scss.js
index 94a85ff86543e0..5ec1f2fbd1b427 100644
--- a/packages/stylelint-config/test/selectors-scss.js
+++ b/packages/stylelint-config/test/selectors-scss.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../scss' ),
-	validScss = fs.readFileSync(
-		'./packages/stylelint-config/test/selectors-valid.scss',
-		'utf-8'
-	),
-	invalidScss = fs.readFileSync(
-		'./packages/stylelint-config/test/selectors-invalid.scss',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid selectors scss', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validScss,
-			config,
-		} );
+		result = getStylelintResult( './selectors-valid.scss' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid selectors scss', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidScss,
-			config,
-		} );
+		result = getStylelintResult( './selectors-invalid.scss' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/selectors.js b/packages/stylelint-config/test/selectors.js
index 337d1d00eed311..276ac875489613 100644
--- a/packages/stylelint-config/test/selectors.js
+++ b/packages/stylelint-config/test/selectors.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/selectors-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/selectors-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid selectors css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './selectors-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid selectors css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './selectors-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/structure.js b/packages/stylelint-config/test/structure.js
index 7ec03a3b667bac..29dc22a35daf14 100644
--- a/packages/stylelint-config/test/structure.js
+++ b/packages/stylelint-config/test/structure.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/structure-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/structure-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid structure css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './structure-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid structure css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './structure-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/themes.js b/packages/stylelint-config/test/themes.js
index f0016832b24d7b..0a25c6e871df7e 100644
--- a/packages/stylelint-config/test/themes.js
+++ b/packages/stylelint-config/test/themes.js
@@ -1,26 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/themes-valid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './themes-valid.css' );
 	} );
 
 	it( 'did not error', () => {
diff --git a/packages/stylelint-config/test/utils/index.js b/packages/stylelint-config/test/utils/index.js
new file mode 100644
index 00000000000000..c24e04f0a67a45
--- /dev/null
+++ b/packages/stylelint-config/test/utils/index.js
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+const util = require( 'node:util' ),
+	path = require( 'node:path' ),
+	childProcess = require( 'node:child_process' );
+
+const execute = util.promisify( childProcess.exec );
+
+const generateStylelintCommand = ( filename ) =>
+	'npx stylelint ' +
+	path.resolve( __dirname, '../', filename ) +
+	' -c' +
+	path.resolve( __dirname, '../', './.stylelintrc.tests.json' ) +
+	' --formatter json' +
+	' --ignore-path ' +
+	path.resolve( __dirname, '../', './.stylelintignore' );
+
+module.exports = {
+	getStylelintResult: ( filename ) =>
+		execute( generateStylelintCommand( filename ) )
+			.then( ( { stderr } ) => {
+				return {
+					errored: false,
+					results: JSON.parse( stderr ),
+				};
+			} )
+			.catch( ( { stderr } ) => {
+				return {
+					errored: true,
+					results: JSON.parse( stderr ),
+				};
+			} ),
+};
diff --git a/packages/stylelint-config/test/values.js b/packages/stylelint-config/test/values.js
index 97cbc58e02f3b4..749a50a94c2044 100644
--- a/packages/stylelint-config/test/values.js
+++ b/packages/stylelint-config/test/values.js
@@ -1,30 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/values-valid.css',
-		'utf-8'
-	),
-	invalidCss = fs.readFileSync(
-		'./packages/stylelint-config/test/values-invalid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid values css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './values-valid.css' );
 	} );
 
 	it( 'did not error', () => {
@@ -42,10 +26,7 @@ describe( 'flags warnings with invalid values css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: invalidCss,
-			config,
-		} );
+		result = getStylelintResult( './values-invalid.css' );
 	} );
 
 	it( 'did error', () => {
diff --git a/packages/stylelint-config/test/vendor-prefixes.js b/packages/stylelint-config/test/vendor-prefixes.js
index e3ec4d2a7e5dfc..bc3e1f571aee57 100644
--- a/packages/stylelint-config/test/vendor-prefixes.js
+++ b/packages/stylelint-config/test/vendor-prefixes.js
@@ -1,26 +1,14 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' ),
-	stylelint = require( 'stylelint' );
-
 /**
  * Internal dependencies
  */
-const config = require( '../' ),
-	validCss = fs.readFileSync(
-		'./packages/stylelint-config/test/vendor-prefixes-valid.css',
-		'utf-8'
-	);
+const utils = require( './utils' );
+const getStylelintResult = utils.getStylelintResult;
 
 describe( 'flags no warnings with valid vendor prefixes css', () => {
 	let result;
 
 	beforeEach( () => {
-		result = stylelint.lint( {
-			code: validCss,
-			config,
-		} );
+		result = getStylelintResult( './vendor-prefixes-valid.css' );
 	} );
 
 	it( 'did not error', () => {
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
new file mode 100644
index 00000000000000..b8ecad37f3f5d8
--- /dev/null
+++ b/packages/sync/CHANGELOG.md
@@ -0,0 +1,73 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.20.0 (2024-05-16)
+
+## 0.19.0 (2024-05-02)
+
+## 0.18.0 (2024-04-19)
+
+## 0.17.0 (2024-04-03)
+
+## 0.16.0 (2024-03-21)
+
+## 0.15.0 (2024-03-06)
+
+## 0.14.0 (2024-02-21)
+
+## 0.13.0 (2024-02-09)
+
+## 0.12.0 (2024-01-24)
+
+## 0.11.0 (2024-01-10)
+
+## 0.10.0 (2023-12-13)
+
+## 0.9.0 (2023-11-29)
+
+## 0.8.0 (2023-11-16)
+
+## 0.7.0 (2023-11-02)
+
+## 0.6.0 (2023-10-18)
+
+## 0.5.0 (2023-10-05)
+
+## 0.4.0 (2023-09-20)
+
+## 0.3.0 (2023-08-31)
+
+## 0.2.0 (2023-08-16)
diff --git a/packages/sync/CODE.md b/packages/sync/CODE.md
new file mode 100644
index 00000000000000..40a4b76d2cfd42
--- /dev/null
+++ b/packages/sync/CODE.md
@@ -0,0 +1,54 @@
+# Status of the sync experiment in Gutenberg
+
+The sync package is part of an ongoing research effort to lay the groundwork of Real-Time Collaboration in Gutenberg.
+
+Relevant docs:
+
+- https://make.wordpress.org/core/2023/07/13/real-time-collaboration-architecture/
+- https://github.com/WordPress/gutenberg/issues/52593
+- https://docs.yjs.dev/
+
+## Enable the experiment
+
+The experiment can be enabled in the "Guteberg > Experiments" page. When it is enabled (search for `gutenberg-sync-collaboration` in the codebase), the client receives two new pieces of data:
+
+- `window.__experimentalEnableSync`: boolean. Used by the `core-data` package to determine whether to bootstrap and use the sync provider offered by the `sync` package.
+- `window.__experimentalCollaborativeEditingSecret`: string. A secret used by the `sync` package to create a secure connection among peers.
+
+## The data flow
+
+The current experiment updates `core-data` to leverage the YJS library for synchronization and merging changes. Each core-data entity record represents a YJS document and updates to the `--edit` record are broadcasted among peers.
+
+These are the specific checkpoints:
+
+1. REGISTER.
+	- See `getSyncProvider().register( ... )` in `registerSyncConfigs`.
+	- Not all entity types are sync-enabled at the moment, look at those that declare a `syncConfig` and `syncObjectType` in `rootEntitiesConfig`.
+2. BOOTSTRAP.
+	- See `getSyncProvider().bootstrap( ... )` in `getEntityRecord`.
+	- The `bootstrap` function fetches the entity and sets up the callback that will dispatch the relevant Redux action when document changes are broadcasted from other peers.
+3. UPDATE.
+	- See `getSyncProvider().update( ... )` in `editEntityRecord`.
+	- Each change done by a peer to the `--edit` entity record (local changes, not persisted ones) is broadcasted to the others.
+	- The data that is shared is the whole block list.
+
+This is the data flow when the peer A makes a local change:
+
+- Peer A makes a local change.
+- Peer A triggers a `getSyncProvider().update( ... )` request (see `editEntityRecord`).
+- All peers (including A) receive the broadcasted change and execute the callback (see `updateHandler` in `createSyncProvider.bootstrap`).
+- All peers (including A) trigger a `EDIT_ENTITY_RECORD` redux action.
+
+## What works and what doesn't
+
+- Undo/redo does not work.
+- Changes can be persisted and the publish/update button should react accordingly for all peers.
+- Offline.
+	- Changes are stored in the browser's local storage (indexedDB) for each user/peer. Users can navigate away from the document and they'll see the changes when they come back.
+	- Offline changes can be deleted via visiting the browser's database in all peers, then reload the document.
+- Documents can get out of sync. For example:
+	- Two peers open the same document.
+	- One of them (A) leaves the document. Then, the remaining user (B) makes changes.
+	- When A comes back to the document, the changes B made are not visible to A.
+- Entities
+	- Not all entities are synced. For example, global styles are not. Look at the `base` entity config for an example (it declares `syncConfig` and `syncObjectType` properties).
diff --git a/packages/sync/README.md b/packages/sync/README.md
new file mode 100644
index 00000000000000..f15d61b5a1eb5f
--- /dev/null
+++ b/packages/sync/README.md
@@ -0,0 +1,66 @@
+# Sync
+
+Sync data between multiple peers and persist in a local database.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/sync --save
+```
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### connectIndexDb
+
+Connect function to the IndexedDB persistence provider.
+
+_Parameters_
+
+-   _objectId_ `ObjectID`: The object ID.
+-   _objectType_ `ObjectType`: The object type.
+-   _doc_ `CRDTDoc`: The CRDT document.
+
+_Returns_
+
+-   `Promise<() => void>`: Promise that resolves when the connection is established.
+
+### createSyncProvider
+
+Create a sync provider.
+
+_Parameters_
+
+-   _connectLocal_ `ConnectDoc`: Connect the document to a local database.
+-   _connectRemote_ `ConnectDoc`: Connect the document to a remote sync connection.
+
+_Returns_
+
+-   `SyncProvider`: Sync provider.
+
+### createWebRTCConnection
+
+Function that creates a new WebRTC Connection.
+
+_Parameters_
+
+-   _config_ `Object`: The object ID.
+-   _config.signaling_ `Array<string>`:
+-   _config.password_ `string`:
+
+_Returns_
+
+-   `Function`: Promise that resolves when the connection is established.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/sync/package.json b/packages/sync/package.json
new file mode 100644
index 00000000000000..042e1544199296
--- /dev/null
+++ b/packages/sync/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "@wordpress/sync",
+	"version": "1.13.0",
+	"description": "Sync Data.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"sync"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/sync/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/sync"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@types/simple-peer": "^9.11.5",
+		"@wordpress/url": "*",
+		"import-locals": "^2.0.0",
+		"lib0": "^0.2.42",
+		"simple-peer": "^9.11.0",
+		"y-indexeddb": "~9.0.11",
+		"y-protocols": "^1.0.5",
+		"y-webrtc": "~10.2.5",
+		"yjs": "~13.6.6"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/sync/src/connect-indexdb.js b/packages/sync/src/connect-indexdb.js
new file mode 100644
index 00000000000000..5523640408f575
--- /dev/null
+++ b/packages/sync/src/connect-indexdb.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+// @ts-ignore
+import { IndexeddbPersistence } from 'y-indexeddb';
+
+/** @typedef {import('./types').ObjectType} ObjectType */
+/** @typedef {import('./types').ObjectID} ObjectID */
+/** @typedef {import('./types').CRDTDoc} CRDTDoc */
+/** @typedef {import('./types').ConnectDoc} ConnectDoc */
+/** @typedef {import('./types').SyncProvider} SyncProvider */
+
+/**
+ * Connect function to the IndexedDB persistence provider.
+ *
+ * @param {ObjectID}   objectId   The object ID.
+ * @param {ObjectType} objectType The object type.
+ * @param {CRDTDoc}    doc        The CRDT document.
+ *
+ * @return {Promise<() => void>} Promise that resolves when the connection is established.
+ */
+export function connectIndexDb( objectId, objectType, doc ) {
+	const roomName = `${ objectType }-${ objectId }`;
+	const provider = new IndexeddbPersistence( roomName, doc );
+
+	return new Promise( ( resolve ) => {
+		provider.on( 'synced', () => {
+			resolve( () => provider.destroy() );
+		} );
+	} );
+}
diff --git a/packages/sync/src/create-webrtc-connection.js b/packages/sync/src/create-webrtc-connection.js
new file mode 100644
index 00000000000000..97fcddc727d024
--- /dev/null
+++ b/packages/sync/src/create-webrtc-connection.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+// import { WebrtcProvider } from 'y-webrtc';
+
+/**
+ * Internal dependencies
+ */
+import { WebrtcProviderWithHttpSignaling } from './webrtc-http-stream-signaling';
+
+/** @typedef {import('./types').ObjectType} ObjectType */
+/** @typedef {import('./types').ObjectID} ObjectID */
+/** @typedef {import('./types').CRDTDoc} CRDTDoc */
+
+/**
+ * Function that creates a new WebRTC Connection.
+ *
+ * @param {Object}        config           The object ID.
+ *
+ * @param {Array<string>} config.signaling
+ * @param {string}        config.password
+ * @return {Function} Promise that resolves when the connection is established.
+ */
+export function createWebRTCConnection( { signaling, password } ) {
+	return function (
+		/** @type {string} */ objectId,
+		/** @type {string} */ objectType,
+		/** @type {import("yjs").Doc} */ doc
+	) {
+		const roomName = `${ objectType }-${ objectId }`;
+		new WebrtcProviderWithHttpSignaling( roomName, doc, {
+			signaling,
+			// @ts-ignore
+			password,
+		} );
+
+		return Promise.resolve( () => true );
+	};
+}
diff --git a/packages/sync/src/index.js b/packages/sync/src/index.js
new file mode 100644
index 00000000000000..6c2b6899ffb618
--- /dev/null
+++ b/packages/sync/src/index.js
@@ -0,0 +1,3 @@
+export { connectIndexDb } from './connect-indexdb';
+export { createWebRTCConnection } from './create-webrtc-connection';
+export { createSyncProvider } from './provider';
diff --git a/packages/sync/src/provider.js b/packages/sync/src/provider.js
new file mode 100644
index 00000000000000..15d972dbcd4f09
--- /dev/null
+++ b/packages/sync/src/provider.js
@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+// @ts-ignore
+import * as Y from 'yjs';
+
+/** @typedef {import('./types').ObjectType} ObjectType */
+/** @typedef {import('./types').ObjectID} ObjectID */
+/** @typedef {import('./types').ObjectConfig} ObjectConfig */
+/** @typedef {import('./types').CRDTDoc} CRDTDoc */
+/** @typedef {import('./types').ConnectDoc} ConnectDoc */
+/** @typedef {import('./types').SyncProvider} SyncProvider */
+
+/**
+ * Create a sync provider.
+ *
+ * @param {ConnectDoc} connectLocal  Connect the document to a local database.
+ * @param {ConnectDoc} connectRemote Connect the document to a remote sync connection.
+ * @return {SyncProvider} Sync provider.
+ */
+export const createSyncProvider = ( connectLocal, connectRemote ) => {
+	/**
+	 * @type {Record<string,ObjectConfig>}
+	 */
+	const config = {};
+
+	/**
+	 * @type {Record<string,Record<string,()=>void>>}
+	 */
+	const listeners = {};
+
+	/**
+	 * @type {Record<string,Record<string,CRDTDoc>>}
+	 */
+	const docs = {};
+
+	/**
+	 * Registeres an object type.
+	 *
+	 * @param {ObjectType}   objectType   Object type to register.
+	 * @param {ObjectConfig} objectConfig Object config.
+	 */
+	function register( objectType, objectConfig ) {
+		config[ objectType ] = objectConfig;
+	}
+
+	/**
+	 * Fetch data from local database or remote source.
+	 *
+	 * @param {ObjectType} objectType    Object type to load.
+	 * @param {ObjectID}   objectId      Object ID to load.
+	 * @param {Function}   handleChanges Callback to call when data changes.
+	 */
+	async function bootstrap( objectType, objectId, handleChanges ) {
+		const doc = new Y.Doc();
+		docs[ objectType ] = docs[ objectType ] || {};
+		docs[ objectType ][ objectId ] = doc;
+
+		const updateHandler = () => {
+			const data = config[ objectType ].fromCRDTDoc( doc );
+			handleChanges( data );
+		};
+		doc.on( 'update', updateHandler );
+
+		// connect to locally saved database.
+		const destroyLocalConnection = await connectLocal(
+			objectId,
+			objectType,
+			doc
+		);
+
+		// Once the database syncing is done, start the remote syncing
+		if ( connectRemote ) {
+			await connectRemote( objectId, objectType, doc );
+		}
+
+		const loadRemotely = config[ objectType ].fetch;
+		if ( loadRemotely ) {
+			loadRemotely( objectId ).then( ( data ) => {
+				doc.transact( () => {
+					config[ objectType ].applyChangesToDoc( doc, data );
+				} );
+			} );
+		}
+
+		listeners[ objectType ] = listeners[ objectType ] || {};
+		listeners[ objectType ][ objectId ] = () => {
+			destroyLocalConnection();
+			doc.off( 'update', updateHandler );
+		};
+	}
+
+	/**
+	 * Fetch data from local database or remote source.
+	 *
+	 * @param {ObjectType} objectType Object type to load.
+	 * @param {ObjectID}   objectId   Object ID to load.
+	 * @param {any}        data       Updates to make.
+	 */
+	async function update( objectType, objectId, data ) {
+		const doc = docs[ objectType ][ objectId ];
+		if ( ! doc ) {
+			throw 'Error doc ' + objectType + ' ' + objectId + ' not found';
+		}
+		doc.transact( () => {
+			config[ objectType ].applyChangesToDoc( doc, data );
+		} );
+	}
+
+	/**
+	 * Stop updating a document and discard it.
+	 *
+	 * @param {ObjectType} objectType Object type to load.
+	 * @param {ObjectID}   objectId   Object ID to load.
+	 */
+	async function discard( objectType, objectId ) {
+		if ( listeners?.[ objectType ]?.[ objectId ] ) {
+			listeners[ objectType ][ objectId ]();
+		}
+	}
+
+	return {
+		register,
+		bootstrap,
+		update,
+		discard,
+	};
+};
diff --git a/packages/sync/src/types.ts b/packages/sync/src/types.ts
new file mode 100644
index 00000000000000..03439ecf280319
--- /dev/null
+++ b/packages/sync/src/types.ts
@@ -0,0 +1,27 @@
+export type ObjectID = string;
+export type ObjectType = string;
+export type ObjectData = any;
+export type CRDTDoc = any;
+
+export type ObjectConfig = {
+	fetch: ( id: ObjectID ) => Promise< ObjectData >;
+	applyChangesToDoc: ( doc: CRDTDoc, data: any ) => void;
+	fromCRDTDoc: ( doc: CRDTDoc ) => any;
+};
+
+export type ConnectDoc = (
+	id: ObjectID,
+	type: ObjectType,
+	doc: CRDTDoc
+) => Promise< () => void >;
+
+export type SyncProvider = {
+	register: ( type: ObjectType, config: ObjectConfig ) => void;
+	bootstrap: (
+		type: ObjectType,
+		id: ObjectID,
+		handleChanges: ( data: any ) => void
+	) => Promise< CRDTDoc >;
+	update: ( type: ObjectType, id: ObjectID, data: any ) => void;
+	discard: ( type: ObjectType, id: ObjectID ) => Promise< CRDTDoc >;
+};
diff --git a/packages/sync/src/webrtc-http-stream-signaling.js b/packages/sync/src/webrtc-http-stream-signaling.js
new file mode 100644
index 00000000000000..14f8aa0de221b8
--- /dev/null
+++ b/packages/sync/src/webrtc-http-stream-signaling.js
@@ -0,0 +1,401 @@
+/**
+ * External dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import {
+	WebrtcProvider,
+	SignalingConn,
+	WebrtcConn,
+	signalingConns,
+	rooms,
+	publishSignalingMessage,
+	log,
+} from './y-webrtc/y-webrtc';
+import * as cryptoutils from './y-webrtc/crypto';
+
+import * as map from 'lib0/map';
+import { Observable } from 'lib0/observable';
+import * as buffer from 'lib0/buffer';
+
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Method copied as is from the SignalingConn constructor.
+ * Setups the needed event handlers for an http signaling connection.
+ *
+ * @param {HttpSignalingConn} signalCon The signaling connection.
+ * @param {string}            url       The url.
+ */
+function setupSignalEventHandlers( signalCon, url ) {
+	signalCon.on( 'connect', () => {
+		log( `connected (${ url })` );
+		const topics = Array.from( rooms.keys() );
+		signalCon.send( { type: 'subscribe', topics } );
+		rooms.forEach( ( room ) =>
+			publishSignalingMessage( signalCon, room, {
+				type: 'announce',
+				from: room.peerId,
+			} )
+		);
+	} );
+	signalCon.on(
+		'message',
+		( /** @type {{ type: any; topic: any; data: string; }} */ m ) => {
+			switch ( m.type ) {
+				case 'publish': {
+					const roomName = m.topic;
+					const room = rooms.get( roomName );
+					if (
+						room === null ||
+						typeof roomName !== 'string' ||
+						room === undefined
+					) {
+						return;
+					}
+					const execMessage = ( /** @type {any} */ data ) => {
+						const webrtcConns = room.webrtcConns;
+						const peerId = room.peerId;
+						if (
+							data === null ||
+							data.from === peerId ||
+							( data.to !== undefined && data.to !== peerId ) ||
+							room.bcConns.has( data.from )
+						) {
+							// ignore messages that are not addressed to this conn, or from clients that are connected via broadcastchannel
+							return;
+						}
+						const emitPeerChange = webrtcConns.has( data.from )
+							? () => {}
+							: () =>
+									room.provider.emit( 'peers', [
+										{
+											removed: [],
+											added: [ data.from ],
+											webrtcPeers: Array.from(
+												room.webrtcConns.keys()
+											),
+											bcPeers: Array.from( room.bcConns ),
+										},
+									] );
+						switch ( data.type ) {
+							case 'announce':
+								if (
+									webrtcConns.size < room.provider.maxConns
+								) {
+									map.setIfUndefined(
+										webrtcConns,
+										data.from,
+										() =>
+											new WebrtcConn(
+												signalCon,
+												true,
+												data.from,
+												room
+											)
+									);
+									emitPeerChange();
+								}
+								break;
+							case 'signal':
+								if ( data.signal.type === 'offer' ) {
+									const existingConn = webrtcConns.get(
+										data.from
+									);
+									if ( existingConn ) {
+										const remoteToken = data.token;
+										const localToken =
+											existingConn.glareToken;
+										if (
+											localToken &&
+											localToken > remoteToken
+										) {
+											log(
+												'offer rejected: ',
+												data.from
+											);
+											return;
+										}
+										// if we don't reject the offer, we will be accepting it and answering it
+										existingConn.glareToken = undefined;
+									}
+								}
+								if ( data.signal.type === 'answer' ) {
+									log( 'offer answered by: ', data.from );
+									const existingConn = webrtcConns.get(
+										data.from
+									);
+									if ( existingConn ) {
+										existingConn.glareToken = undefined;
+									}
+								}
+								if ( data.to === peerId ) {
+									map.setIfUndefined(
+										webrtcConns,
+										data.from,
+										() =>
+											new WebrtcConn(
+												signalCon,
+												false,
+												data.from,
+												room
+											)
+									).peer.signal( data.signal );
+									emitPeerChange();
+								}
+								break;
+						}
+					};
+					if ( room.key ) {
+						if ( typeof m.data === 'string' ) {
+							cryptoutils
+								.decryptJson(
+									buffer.fromBase64( m.data ),
+									room.key
+								)
+								.then( execMessage );
+						}
+					} else {
+						execMessage( m.data );
+					}
+				}
+			}
+		}
+	);
+	signalCon.on( 'disconnect', () => log( `disconnect (${ url })` ) );
+}
+
+/**
+ * Method that instantiates the http signaling connection.
+ * Tries to implement the same methods a websocket provides using ajax requests
+ * to send messages and EventSource to retrieve messages.
+ *
+ * @param {HttpSignalingConn} httpClient The signaling connection.
+ */
+function setupHttpSignal( httpClient ) {
+	if ( httpClient.shouldConnect && httpClient.ws === null ) {
+		// eslint-disable-next-line no-restricted-syntax
+		const subscriberId = Math.floor( 100000 + Math.random() * 900000 );
+		const url = httpClient.url;
+		const eventSource = new window.EventSource(
+			addQueryArgs( url, {
+				subscriber_id: subscriberId,
+				action: 'gutenberg_signaling_server',
+			} )
+		);
+		/**
+		 * @type {any}
+		 */
+		let pingTimeout = null;
+		eventSource.onmessage = ( event ) => {
+			httpClient.lastMessageReceived = Date.now();
+			const data = event.data;
+			if ( data ) {
+				const messages = JSON.parse( data );
+				if ( Array.isArray( messages ) ) {
+					messages.forEach( onSingleMessage );
+				}
+			}
+		};
+		// @ts-ignore
+		httpClient.ws = eventSource;
+		httpClient.connecting = true;
+		httpClient.connected = false;
+		const onSingleMessage = ( /** @type {any} */ message ) => {
+			if ( message && message.type === 'pong' ) {
+				clearTimeout( pingTimeout );
+				pingTimeout = setTimeout(
+					sendPing,
+					messageReconnectTimeout / 2
+				);
+			}
+			httpClient.emit( 'message', [ message, httpClient ] );
+		};
+
+		/**
+		 * @param {any} error
+		 */
+		const onclose = ( error ) => {
+			if ( httpClient.ws !== null ) {
+				httpClient.ws.close();
+				httpClient.ws = null;
+				httpClient.connecting = false;
+				if ( httpClient.connected ) {
+					httpClient.connected = false;
+					httpClient.emit( 'disconnect', [
+						{ type: 'disconnect', error },
+						httpClient,
+					] );
+				} else {
+					httpClient.unsuccessfulReconnects++;
+				}
+			}
+			clearTimeout( pingTimeout );
+		};
+		const sendPing = () => {
+			if (
+				httpClient.ws &&
+				httpClient.ws.readyState === window.EventSource.OPEN
+			) {
+				httpClient.send( {
+					type: 'ping',
+				} );
+			}
+		};
+		if ( httpClient.ws ) {
+			httpClient.ws.onclose = () => {
+				onclose( null );
+			};
+			httpClient.ws.send = function send(
+				/** @type {string} */ message
+			) {
+				window
+					.fetch( url, {
+						body: new URLSearchParams( {
+							subscriber_id: subscriberId.toString(),
+							action: 'gutenberg_signaling_server',
+							message,
+						} ),
+						method: 'POST',
+					} )
+					.catch( () => {
+						log(
+							'Error sending to server with message: ' + message
+						);
+					} );
+			};
+		}
+		eventSource.onerror = () => {
+			// Todo: add an error handler
+		};
+		eventSource.onopen = () => {
+			if ( httpClient.connected ) {
+				return;
+			}
+			if ( eventSource.readyState === window.EventSource.OPEN ) {
+				httpClient.lastMessageReceived = Date.now();
+				httpClient.connecting = false;
+				httpClient.connected = true;
+				httpClient.unsuccessfulReconnects = 0;
+				httpClient.emit( 'connect', [
+					{ type: 'connect' },
+					httpClient,
+				] );
+				// set ping
+				pingTimeout = setTimeout(
+					sendPing,
+					messageReconnectTimeout / 2
+				);
+			}
+		};
+	}
+}
+const messageReconnectTimeout = 30000;
+
+/**
+ * @augments Observable<string>
+ */ export class HttpSignalingConn extends Observable {
+	/**
+	 * @param {string} url
+	 */
+	constructor( url ) {
+		super();
+
+		//WebsocketClient from lib0/websocket.js
+		this.url = url;
+		/**
+		 * @type {WebSocket?}
+		 */
+		this.ws = null;
+		// @ts-ignore
+		this.binaryType = null; // this.binaryType = binaryType
+		this.connected = false;
+		this.connecting = false;
+		this.unsuccessfulReconnects = 0;
+		this.lastMessageReceived = 0;
+		/**
+		 * Whether to connect to other peers or not
+		 *
+		 * @type {boolean}
+		 */
+		this.shouldConnect = true;
+		this._checkInterval = setInterval( () => {
+			if (
+				this.connected &&
+				messageReconnectTimeout <
+					Date.now() - this.lastMessageReceived &&
+				this.ws
+			) {
+				// no message received in a long time - not even your own awareness
+				// updates (which are updated every 15 seconds)
+				this.ws.close();
+			}
+		}, messageReconnectTimeout / 2 );
+		//setupWS( this );
+		setupHttpSignal( this );
+
+		// From SignalingConn
+		/**
+		 * @type {Set<WebrtcProvider>}
+		 */
+		this.providers = new Set();
+
+		setupSignalEventHandlers( this, url );
+	}
+
+	/**
+	 * @param {any} message
+	 */
+	send( message ) {
+		if ( this.ws ) {
+			this.ws.send( JSON.stringify( message ) );
+		}
+	}
+
+	destroy() {
+		clearInterval( this._checkInterval );
+		this.disconnect();
+		super.destroy();
+	}
+
+	disconnect() {
+		this.shouldConnect = false;
+		if ( this.ws !== null ) {
+			this.ws.close();
+		}
+	}
+
+	connect() {
+		this.shouldConnect = true;
+		if ( ! this.connected && this.ws === null ) {
+			setupHttpSignal( this );
+		}
+	}
+}
+
+export class WebrtcProviderWithHttpSignaling extends WebrtcProvider {
+	connect() {
+		this.shouldConnect = true;
+		this.signalingUrls.forEach( ( /** @type {string} */ url ) => {
+			const signalingConn = map.setIfUndefined(
+				signalingConns,
+				url,
+				// Only this conditional logic to create a normal websocket connection or
+				// an http signaling connection was added to the constructor when compared
+				// with the base class.
+				url.startsWith( 'ws://' ) || url.startsWith( 'wss://' )
+					? () => new SignalingConn( url )
+					: () => new HttpSignalingConn( url )
+			);
+			this.signalingConns.push( signalingConn );
+			signalingConn.providers.add( this );
+		} );
+		if ( this.room ) {
+			this.room.connect();
+		}
+	}
+}
diff --git a/packages/sync/src/y-webrtc/crypto.js b/packages/sync/src/y-webrtc/crypto.js
new file mode 100644
index 00000000000000..8fb549b5681e4e
--- /dev/null
+++ b/packages/sync/src/y-webrtc/crypto.js
@@ -0,0 +1,127 @@
+// File copied as is from the y-webrtc package.
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+// @ts-nocheck
+/* eslint-env browser */
+
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import * as promise from 'lib0/promise';
+import * as error from 'lib0/error';
+import * as string from 'lib0/string';
+
+/**
+ * @param {string} secret
+ * @param {string} roomName
+ * @return {PromiseLike<CryptoKey>}
+ */
+export const deriveKey = ( secret, roomName ) => {
+	const secretBuffer = string.encodeUtf8( secret ).buffer;
+	const salt = string.encodeUtf8( roomName ).buffer;
+	return crypto.subtle
+		.importKey( 'raw', secretBuffer, 'PBKDF2', false, [ 'deriveKey' ] )
+		.then( ( keyMaterial ) =>
+			crypto.subtle.deriveKey(
+				{
+					name: 'PBKDF2',
+					salt,
+					iterations: 100000,
+					hash: 'SHA-256',
+				},
+				keyMaterial,
+				{
+					name: 'AES-GCM',
+					length: 256,
+				},
+				true,
+				[ 'encrypt', 'decrypt' ]
+			)
+		);
+};
+
+/**
+ * @param {Uint8Array} data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} encrypted, base64 encoded message
+ */
+export const encrypt = ( data, key ) => {
+	if ( ! key ) {
+		return /** @type {PromiseLike<Uint8Array>} */ (
+			promise.resolve( data )
+		);
+	}
+	const iv = crypto.getRandomValues( new Uint8Array( 12 ) );
+	return crypto.subtle
+		.encrypt(
+			{
+				name: 'AES-GCM',
+				iv,
+			},
+			key,
+			data
+		)
+		.then( ( cipher ) => {
+			const encryptedDataEncoder = encoding.createEncoder();
+			encoding.writeVarString( encryptedDataEncoder, 'AES-GCM' );
+			encoding.writeVarUint8Array( encryptedDataEncoder, iv );
+			encoding.writeVarUint8Array(
+				encryptedDataEncoder,
+				new Uint8Array( cipher )
+			);
+			return encoding.toUint8Array( encryptedDataEncoder );
+		} );
+};
+
+/**
+ * @param {Object} data data to be encrypted
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} encrypted data, if key is provided
+ */
+export const encryptJson = ( data, key ) => {
+	const dataEncoder = encoding.createEncoder();
+	encoding.writeAny( dataEncoder, data );
+	return encrypt( encoding.toUint8Array( dataEncoder ), key );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Uint8Array>} decrypted buffer
+ */
+export const decrypt = ( data, key ) => {
+	if ( ! key ) {
+		return /** @type {PromiseLike<Uint8Array>} */ (
+			promise.resolve( data )
+		);
+	}
+	const dataDecoder = decoding.createDecoder( data );
+	const algorithm = decoding.readVarString( dataDecoder );
+	if ( algorithm !== 'AES-GCM' ) {
+		promise.reject( error.create( 'Unknown encryption algorithm' ) );
+	}
+	const iv = decoding.readVarUint8Array( dataDecoder );
+	const cipher = decoding.readVarUint8Array( dataDecoder );
+	return crypto.subtle
+		.decrypt(
+			{
+				name: 'AES-GCM',
+				iv,
+			},
+			key,
+			cipher
+		)
+		.then( ( data ) => new Uint8Array( data ) );
+};
+
+/**
+ * @param {Uint8Array} data
+ * @param {CryptoKey?} key
+ * @return {PromiseLike<Object>} decrypted object
+ */
+export const decryptJson = ( data, key ) =>
+	decrypt( data, key ).then( ( decryptedValue ) =>
+		decoding.readAny(
+			decoding.createDecoder( new Uint8Array( decryptedValue ) )
+		)
+	);
diff --git a/packages/sync/src/y-webrtc/y-webrtc.js b/packages/sync/src/y-webrtc/y-webrtc.js
new file mode 100644
index 00000000000000..fa1bed01d2d24a
--- /dev/null
+++ b/packages/sync/src/y-webrtc/y-webrtc.js
@@ -0,0 +1,858 @@
+// File copied as is from the y-webrtc package with only exports
+// added to the following vars/functions: signalingConns,rooms, publishSignalingMessage, log.
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable eslint-comments/no-unlimited-disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import * as ws from 'lib0/websocket';
+import * as map from 'lib0/map';
+import * as error from 'lib0/error';
+import * as random from 'lib0/random';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+import { Observable } from 'lib0/observable';
+import * as logging from 'lib0/logging';
+import * as promise from 'lib0/promise';
+import * as bc from 'lib0/broadcastchannel';
+import * as buffer from 'lib0/buffer';
+import * as math from 'lib0/math';
+import { createMutex } from 'lib0/mutex';
+
+import * as Y from 'yjs'; // eslint-disable-line
+import Peer from 'simple-peer/simplepeer.min.js';
+
+import * as syncProtocol from 'y-protocols/sync';
+import * as awarenessProtocol from 'y-protocols/awareness';
+
+import * as cryptoutils from './crypto.js';
+
+export const log = logging.createModuleLogger( 'y-webrtc' );
+
+const messageSync = 0;
+const messageQueryAwareness = 3;
+const messageAwareness = 1;
+const messageBcPeerId = 4;
+
+/**
+ * @type {Map<string, SignalingConn>}
+ */
+export const signalingConns = new Map();
+
+/**
+ * @type {Map<string,Room>}
+ */
+export const rooms = new Map();
+
+/**
+ * @param {Room} room
+ */
+const checkIsSynced = ( room ) => {
+	let synced = true;
+	room.webrtcConns.forEach( ( peer ) => {
+		if ( ! peer.synced ) {
+			synced = false;
+		}
+	} );
+	if ( ( ! synced && room.synced ) || ( synced && ! room.synced ) ) {
+		room.synced = synced;
+		room.provider.emit( 'synced', [ { synced } ] );
+		log(
+			'synced ',
+			logging.BOLD,
+			room.name,
+			logging.UNBOLD,
+			' with all peers'
+		);
+	}
+};
+
+/**
+ * @param {Room} room
+ * @param {Uint8Array} buf
+ * @param {function} syncedCallback
+ * @return {encoding.Encoder?}
+ */
+const readMessage = ( room, buf, syncedCallback ) => {
+	const decoder = decoding.createDecoder( buf );
+	const encoder = encoding.createEncoder();
+	const messageType = decoding.readVarUint( decoder );
+	if ( room === undefined ) {
+		return null;
+	}
+	const awareness = room.awareness;
+	const doc = room.doc;
+	let sendReply = false;
+	switch ( messageType ) {
+		case messageSync: {
+			encoding.writeVarUint( encoder, messageSync );
+			const syncMessageType = syncProtocol.readSyncMessage(
+				decoder,
+				encoder,
+				doc,
+				room
+			);
+			if (
+				syncMessageType === syncProtocol.messageYjsSyncStep2 &&
+				! room.synced
+			) {
+				syncedCallback();
+			}
+			if ( syncMessageType === syncProtocol.messageYjsSyncStep1 ) {
+				sendReply = true;
+			}
+			break;
+		}
+		case messageQueryAwareness:
+			encoding.writeVarUint( encoder, messageAwareness );
+			encoding.writeVarUint8Array(
+				encoder,
+				awarenessProtocol.encodeAwarenessUpdate(
+					awareness,
+					Array.from( awareness.getStates().keys() )
+				)
+			);
+			sendReply = true;
+			break;
+		case messageAwareness:
+			awarenessProtocol.applyAwarenessUpdate(
+				awareness,
+				decoding.readVarUint8Array( decoder ),
+				room
+			);
+			break;
+		case messageBcPeerId: {
+			const add = decoding.readUint8( decoder ) === 1;
+			const peerName = decoding.readVarString( decoder );
+			if (
+				peerName !== room.peerId &&
+				( ( room.bcConns.has( peerName ) && ! add ) ||
+					( ! room.bcConns.has( peerName ) && add ) )
+			) {
+				const removed = [];
+				const added = [];
+				if ( add ) {
+					room.bcConns.add( peerName );
+					added.push( peerName );
+				} else {
+					room.bcConns.delete( peerName );
+					removed.push( peerName );
+				}
+				room.provider.emit( 'peers', [
+					{
+						added,
+						removed,
+						webrtcPeers: Array.from( room.webrtcConns.keys() ),
+						bcPeers: Array.from( room.bcConns ),
+					},
+				] );
+				broadcastBcPeerId( room );
+			}
+			break;
+		}
+		default:
+			console.error( 'Unable to compute message' );
+			return encoder;
+	}
+	if ( ! sendReply ) {
+		// nothing has been written, no answer created
+		return null;
+	}
+	return encoder;
+};
+
+/**
+ * @param {WebrtcConn} peerConn
+ * @param {Uint8Array} buf
+ * @return {encoding.Encoder?}
+ */
+const readPeerMessage = ( peerConn, buf ) => {
+	const room = peerConn.room;
+	log(
+		'received message from ',
+		logging.BOLD,
+		peerConn.remotePeerId,
+		logging.GREY,
+		' (',
+		room.name,
+		')',
+		logging.UNBOLD,
+		logging.UNCOLOR
+	);
+	return readMessage( room, buf, () => {
+		peerConn.synced = true;
+		log(
+			'synced ',
+			logging.BOLD,
+			room.name,
+			logging.UNBOLD,
+			' with ',
+			logging.BOLD,
+			peerConn.remotePeerId
+		);
+		checkIsSynced( room );
+	} );
+};
+
+/**
+ * @param {WebrtcConn} webrtcConn
+ * @param {encoding.Encoder} encoder
+ */
+const sendWebrtcConn = ( webrtcConn, encoder ) => {
+	log(
+		'send message to ',
+		logging.BOLD,
+		webrtcConn.remotePeerId,
+		logging.UNBOLD,
+		logging.GREY,
+		' (',
+		webrtcConn.room.name,
+		')',
+		logging.UNCOLOR
+	);
+	try {
+		webrtcConn.peer.send( encoding.toUint8Array( encoder ) );
+	} catch ( e ) {}
+};
+
+/**
+ * @param {Room} room
+ * @param {Uint8Array} m
+ */
+const broadcastWebrtcConn = ( room, m ) => {
+	log( 'broadcast message in ', logging.BOLD, room.name, logging.UNBOLD );
+	room.webrtcConns.forEach( ( conn ) => {
+		try {
+			conn.peer.send( m );
+		} catch ( e ) {}
+	} );
+};
+
+export class WebrtcConn {
+	/**
+	 * @param {SignalingConn} signalingConn
+	 * @param {boolean} initiator
+	 * @param {string} remotePeerId
+	 * @param {Room} room
+	 */
+	constructor( signalingConn, initiator, remotePeerId, room ) {
+		log( 'establishing connection to ', logging.BOLD, remotePeerId );
+		this.room = room;
+		this.remotePeerId = remotePeerId;
+		this.glareToken = undefined;
+		this.closed = false;
+		this.connected = false;
+		this.synced = false;
+		/**
+		 * @type {any}
+		 */
+		this.peer = new Peer( { initiator, ...room.provider.peerOpts } );
+		this.peer.on( 'signal', ( signal ) => {
+			if ( this.glareToken === undefined ) {
+				// add some randomness to the timestamp of the offer
+				this.glareToken = Date.now() + Math.random();
+			}
+			publishSignalingMessage( signalingConn, room, {
+				to: remotePeerId,
+				from: room.peerId,
+				type: 'signal',
+				token: this.glareToken,
+				signal,
+			} );
+		} );
+		this.peer.on( 'connect', () => {
+			log( 'connected to ', logging.BOLD, remotePeerId );
+			this.connected = true;
+			// send sync step 1
+			const provider = room.provider;
+			const doc = provider.doc;
+			const awareness = room.awareness;
+			const encoder = encoding.createEncoder();
+			encoding.writeVarUint( encoder, messageSync );
+			syncProtocol.writeSyncStep1( encoder, doc );
+			sendWebrtcConn( this, encoder );
+			const awarenessStates = awareness.getStates();
+			if ( awarenessStates.size > 0 ) {
+				const encoder = encoding.createEncoder();
+				encoding.writeVarUint( encoder, messageAwareness );
+				encoding.writeVarUint8Array(
+					encoder,
+					awarenessProtocol.encodeAwarenessUpdate(
+						awareness,
+						Array.from( awarenessStates.keys() )
+					)
+				);
+				sendWebrtcConn( this, encoder );
+			}
+		} );
+		this.peer.on( 'close', () => {
+			this.connected = false;
+			this.closed = true;
+			if ( room.webrtcConns.has( this.remotePeerId ) ) {
+				room.webrtcConns.delete( this.remotePeerId );
+				room.provider.emit( 'peers', [
+					{
+						removed: [ this.remotePeerId ],
+						added: [],
+						webrtcPeers: Array.from( room.webrtcConns.keys() ),
+						bcPeers: Array.from( room.bcConns ),
+					},
+				] );
+			}
+			checkIsSynced( room );
+			this.peer.destroy();
+			log( 'closed connection to ', logging.BOLD, remotePeerId );
+			announceSignalingInfo( room );
+		} );
+		this.peer.on( 'error', ( err ) => {
+			log(
+				'Error in connection to ',
+				logging.BOLD,
+				remotePeerId,
+				': ',
+				err
+			);
+			announceSignalingInfo( room );
+		} );
+		this.peer.on( 'data', ( data ) => {
+			const answer = readPeerMessage( this, data );
+			if ( answer !== null ) {
+				sendWebrtcConn( this, answer );
+			}
+		} );
+	}
+
+	destroy() {
+		this.peer.destroy();
+	}
+}
+
+/**
+ * @param {Room} room
+ * @param {Uint8Array} m
+ */
+const broadcastBcMessage = ( room, m ) =>
+	cryptoutils
+		.encrypt( m, room.key )
+		.then( ( data ) => room.mux( () => bc.publish( room.name, data ) ) );
+
+/**
+ * @param {Room} room
+ * @param {Uint8Array} m
+ */
+const broadcastRoomMessage = ( room, m ) => {
+	if ( room.bcconnected ) {
+		broadcastBcMessage( room, m );
+	}
+	broadcastWebrtcConn( room, m );
+};
+
+/**
+ * @param {Room} room
+ */
+const announceSignalingInfo = ( room ) => {
+	signalingConns.forEach( ( conn ) => {
+		// only subscribe if connection is established, otherwise the conn automatically subscribes to all rooms
+		if ( conn.connected ) {
+			conn.send( { type: 'subscribe', topics: [ room.name ] } );
+			if ( room.webrtcConns.size < room.provider.maxConns ) {
+				publishSignalingMessage( conn, room, {
+					type: 'announce',
+					from: room.peerId,
+				} );
+			}
+		}
+	} );
+};
+
+/**
+ * @param {Room} room
+ */
+const broadcastBcPeerId = ( room ) => {
+	if ( room.provider.filterBcConns ) {
+		// broadcast peerId via broadcastchannel
+		const encoderPeerIdBc = encoding.createEncoder();
+		encoding.writeVarUint( encoderPeerIdBc, messageBcPeerId );
+		encoding.writeUint8( encoderPeerIdBc, 1 );
+		encoding.writeVarString( encoderPeerIdBc, room.peerId );
+		broadcastBcMessage( room, encoding.toUint8Array( encoderPeerIdBc ) );
+	}
+};
+
+export class Room {
+	/**
+	 * @param {Y.Doc} doc
+	 * @param {WebrtcProvider} provider
+	 * @param {string} name
+	 * @param {CryptoKey|null} key
+	 */
+	constructor( doc, provider, name, key ) {
+		/**
+		 * Do not assume that peerId is unique. This is only meant for sending signaling messages.
+		 *
+		 * @type {string}
+		 */
+		this.peerId = random.uuidv4();
+		this.doc = doc;
+		/**
+		 * @type {awarenessProtocol.Awareness}
+		 */
+		this.awareness = provider.awareness;
+		this.provider = provider;
+		this.synced = false;
+		this.name = name;
+		// @todo make key secret by scoping
+		this.key = key;
+		/**
+		 * @type {Map<string, WebrtcConn>}
+		 */
+		this.webrtcConns = new Map();
+		/**
+		 * @type {Set<string>}
+		 */
+		this.bcConns = new Set();
+		this.mux = createMutex();
+		this.bcconnected = false;
+		/**
+		 * @param {ArrayBuffer} data
+		 */
+		this._bcSubscriber = ( data ) =>
+			cryptoutils.decrypt( new Uint8Array( data ), key ).then( ( m ) =>
+				this.mux( () => {
+					const reply = readMessage( this, m, () => {} );
+					if ( reply ) {
+						broadcastBcMessage(
+							this,
+							encoding.toUint8Array( reply )
+						);
+					}
+				} )
+			);
+		/**
+		 * Listens to Yjs updates and sends them to remote peers
+		 *
+		 * @param {Uint8Array} update
+		 * @param {any} origin
+		 */
+		this._docUpdateHandler = ( update, origin ) => {
+			const encoder = encoding.createEncoder();
+			encoding.writeVarUint( encoder, messageSync );
+			syncProtocol.writeUpdate( encoder, update );
+			broadcastRoomMessage( this, encoding.toUint8Array( encoder ) );
+		};
+		/**
+		 * Listens to Awareness updates and sends them to remote peers
+		 *
+		 * @param {any} changed
+		 * @param {any} origin
+		 */
+		this._awarenessUpdateHandler = (
+			{ added, updated, removed },
+			origin
+		) => {
+			const changedClients = added.concat( updated ).concat( removed );
+			const encoderAwareness = encoding.createEncoder();
+			encoding.writeVarUint( encoderAwareness, messageAwareness );
+			encoding.writeVarUint8Array(
+				encoderAwareness,
+				awarenessProtocol.encodeAwarenessUpdate(
+					this.awareness,
+					changedClients
+				)
+			);
+			broadcastRoomMessage(
+				this,
+				encoding.toUint8Array( encoderAwareness )
+			);
+		};
+
+		this._beforeUnloadHandler = () => {
+			awarenessProtocol.removeAwarenessStates(
+				this.awareness,
+				[ doc.clientID ],
+				'window unload'
+			);
+			rooms.forEach( ( room ) => {
+				room.disconnect();
+			} );
+		};
+
+		if ( typeof window !== 'undefined' ) {
+			window.addEventListener(
+				'beforeunload',
+				this._beforeUnloadHandler
+			);
+		} else if ( typeof process !== 'undefined' ) {
+			process.on( 'exit', this._beforeUnloadHandler );
+		}
+	}
+
+	connect() {
+		this.doc.on( 'update', this._docUpdateHandler );
+		this.awareness.on( 'update', this._awarenessUpdateHandler );
+		// signal through all available signaling connections
+		announceSignalingInfo( this );
+		const roomName = this.name;
+		bc.subscribe( roomName, this._bcSubscriber );
+		this.bcconnected = true;
+		// broadcast peerId via broadcastchannel
+		broadcastBcPeerId( this );
+		// write sync step 1
+		const encoderSync = encoding.createEncoder();
+		encoding.writeVarUint( encoderSync, messageSync );
+		syncProtocol.writeSyncStep1( encoderSync, this.doc );
+		broadcastBcMessage( this, encoding.toUint8Array( encoderSync ) );
+		// broadcast local state
+		const encoderState = encoding.createEncoder();
+		encoding.writeVarUint( encoderState, messageSync );
+		syncProtocol.writeSyncStep2( encoderState, this.doc );
+		broadcastBcMessage( this, encoding.toUint8Array( encoderState ) );
+		// write queryAwareness
+		const encoderAwarenessQuery = encoding.createEncoder();
+		encoding.writeVarUint( encoderAwarenessQuery, messageQueryAwareness );
+		broadcastBcMessage(
+			this,
+			encoding.toUint8Array( encoderAwarenessQuery )
+		);
+		// broadcast local awareness state
+		const encoderAwarenessState = encoding.createEncoder();
+		encoding.writeVarUint( encoderAwarenessState, messageAwareness );
+		encoding.writeVarUint8Array(
+			encoderAwarenessState,
+			awarenessProtocol.encodeAwarenessUpdate( this.awareness, [
+				this.doc.clientID,
+			] )
+		);
+		broadcastBcMessage(
+			this,
+			encoding.toUint8Array( encoderAwarenessState )
+		);
+	}
+
+	disconnect() {
+		// signal through all available signaling connections
+		signalingConns.forEach( ( conn ) => {
+			if ( conn.connected ) {
+				conn.send( { type: 'unsubscribe', topics: [ this.name ] } );
+			}
+		} );
+		awarenessProtocol.removeAwarenessStates(
+			this.awareness,
+			[ this.doc.clientID ],
+			'disconnect'
+		);
+		// broadcast peerId removal via broadcastchannel
+		const encoderPeerIdBc = encoding.createEncoder();
+		encoding.writeVarUint( encoderPeerIdBc, messageBcPeerId );
+		encoding.writeUint8( encoderPeerIdBc, 0 ); // remove peerId from other bc peers
+		encoding.writeVarString( encoderPeerIdBc, this.peerId );
+		broadcastBcMessage( this, encoding.toUint8Array( encoderPeerIdBc ) );
+
+		bc.unsubscribe( this.name, this._bcSubscriber );
+		this.bcconnected = false;
+		this.doc.off( 'update', this._docUpdateHandler );
+		this.awareness.off( 'update', this._awarenessUpdateHandler );
+		this.webrtcConns.forEach( ( conn ) => conn.destroy() );
+	}
+
+	destroy() {
+		this.disconnect();
+		if ( typeof window !== 'undefined' ) {
+			window.removeEventListener(
+				'beforeunload',
+				this._beforeUnloadHandler
+			);
+		} else if ( typeof process !== 'undefined' ) {
+			process.off( 'exit', this._beforeUnloadHandler );
+		}
+	}
+}
+
+/**
+ * @param {Y.Doc} doc
+ * @param {WebrtcProvider} provider
+ * @param {string} name
+ * @param {CryptoKey|null} key
+ * @return {Room}
+ */
+const openRoom = ( doc, provider, name, key ) => {
+	// there must only be one room
+	if ( rooms.has( name ) ) {
+		throw error.create(
+			`A Yjs Doc connected to room "${ name }" already exists!`
+		);
+	}
+	const room = new Room( doc, provider, name, key );
+	rooms.set( name, /** @type {Room} */ ( room ) );
+	return room;
+};
+
+/**
+ * @param {SignalingConn} conn
+ * @param {Room} room
+ * @param {any} data
+ */
+export const publishSignalingMessage = ( conn, room, data ) => {
+	if ( room.key ) {
+		cryptoutils.encryptJson( data, room.key ).then( ( data ) => {
+			conn.send( {
+				type: 'publish',
+				topic: room.name,
+				data: buffer.toBase64( data ),
+			} );
+		} );
+	} else {
+		conn.send( { type: 'publish', topic: room.name, data } );
+	}
+};
+
+export class SignalingConn extends ws.WebsocketClient {
+	constructor( url ) {
+		super( url );
+		/**
+		 * @type {Set<WebrtcProvider>}
+		 */
+		this.providers = new Set();
+		this.on( 'connect', () => {
+			log( `connected (${ url })` );
+			const topics = Array.from( rooms.keys() );
+			this.send( { type: 'subscribe', topics } );
+			rooms.forEach( ( room ) =>
+				publishSignalingMessage( this, room, {
+					type: 'announce',
+					from: room.peerId,
+				} )
+			);
+		} );
+		this.on( 'message', ( m ) => {
+			switch ( m.type ) {
+				case 'publish': {
+					const roomName = m.topic;
+					const room = rooms.get( roomName );
+					if ( room == null || typeof roomName !== 'string' ) {
+						return;
+					}
+					const execMessage = ( data ) => {
+						const webrtcConns = room.webrtcConns;
+						const peerId = room.peerId;
+						if (
+							data == null ||
+							data.from === peerId ||
+							( data.to !== undefined && data.to !== peerId ) ||
+							room.bcConns.has( data.from )
+						) {
+							// ignore messages that are not addressed to this conn, or from clients that are connected via broadcastchannel
+							return;
+						}
+						const emitPeerChange = webrtcConns.has( data.from )
+							? () => {}
+							: () =>
+									room.provider.emit( 'peers', [
+										{
+											removed: [],
+											added: [ data.from ],
+											webrtcPeers: Array.from(
+												room.webrtcConns.keys()
+											),
+											bcPeers: Array.from( room.bcConns ),
+										},
+									] );
+						switch ( data.type ) {
+							case 'announce':
+								if (
+									webrtcConns.size < room.provider.maxConns
+								) {
+									map.setIfUndefined(
+										webrtcConns,
+										data.from,
+										() =>
+											new WebrtcConn(
+												this,
+												true,
+												data.from,
+												room
+											)
+									);
+									emitPeerChange();
+								}
+								break;
+							case 'signal':
+								if ( data.signal.type === 'offer' ) {
+									const existingConn = webrtcConns.get(
+										data.from
+									);
+									if ( existingConn ) {
+										const remoteToken = data.token;
+										const localToken =
+											existingConn.glareToken;
+										if (
+											localToken &&
+											localToken > remoteToken
+										) {
+											log(
+												'offer rejected: ',
+												data.from
+											);
+											return;
+										}
+										// if we don't reject the offer, we will be accepting it and answering it
+										existingConn.glareToken = undefined;
+									}
+								}
+								if ( data.signal.type === 'answer' ) {
+									log( 'offer answered by: ', data.from );
+									const existingConn = webrtcConns.get(
+										data.from
+									);
+									existingConn.glareToken = undefined;
+								}
+								if ( data.to === peerId ) {
+									map.setIfUndefined(
+										webrtcConns,
+										data.from,
+										() =>
+											new WebrtcConn(
+												this,
+												false,
+												data.from,
+												room
+											)
+									).peer.signal( data.signal );
+									emitPeerChange();
+								}
+								break;
+						}
+					};
+					if ( room.key ) {
+						if ( typeof m.data === 'string' ) {
+							cryptoutils
+								.decryptJson(
+									buffer.fromBase64( m.data ),
+									room.key
+								)
+								.then( execMessage );
+						}
+					} else {
+						execMessage( m.data );
+					}
+				}
+			}
+		} );
+		this.on( 'disconnect', () => log( `disconnect (${ url })` ) );
+	}
+}
+
+/**
+ * @typedef {Object} ProviderOptions
+ * @property {Array<string>} [signaling]
+ * @property {string} [password]
+ * @property {awarenessProtocol.Awareness} [awareness]
+ * @property {number} [maxConns]
+ * @property {boolean} [filterBcConns]
+ * @property {any} [peerOpts]
+ */
+
+/**
+ * @extends Observable<string>
+ */
+export class WebrtcProvider extends Observable {
+	/**
+	 * @param {string} roomName
+	 * @param {Y.Doc} doc
+	 * @param {ProviderOptions?} opts
+	 */
+	constructor(
+		roomName,
+		doc,
+		{
+			signaling = [ 'wss://y-webrtc-eu.fly.dev' ],
+			password = null,
+			awareness = new awarenessProtocol.Awareness( doc ),
+			maxConns = 20 + math.floor( random.rand() * 15 ), // the random factor reduces the chance that n clients form a cluster
+			filterBcConns = true,
+			peerOpts = {}, // simple-peer options. See https://github.com/feross/simple-peer#peer--new-peeropts
+		} = {}
+	) {
+		super();
+		this.roomName = roomName;
+		this.doc = doc;
+		this.filterBcConns = filterBcConns;
+		/**
+		 * @type {awarenessProtocol.Awareness}
+		 */
+		this.awareness = awareness;
+		this.shouldConnect = false;
+		this.signalingUrls = signaling;
+		this.signalingConns = [];
+		this.maxConns = maxConns;
+		this.peerOpts = peerOpts;
+		/**
+		 * @type {PromiseLike<CryptoKey | null>}
+		 */
+		this.key = password
+			? cryptoutils.deriveKey( password, roomName )
+			: /** @type {PromiseLike<null>} */ ( promise.resolve( null ) );
+		/**
+		 * @type {Room|null}
+		 */
+		this.room = null;
+		this.key.then( ( key ) => {
+			this.room = openRoom( doc, this, roomName, key );
+			if ( this.shouldConnect ) {
+				this.room.connect();
+			} else {
+				this.room.disconnect();
+			}
+		} );
+		this.connect();
+		this.destroy = this.destroy.bind( this );
+		doc.on( 'destroy', this.destroy );
+	}
+
+	/**
+	 * @type {boolean}
+	 */
+	get connected() {
+		return this.room !== null && this.shouldConnect;
+	}
+
+	connect() {
+		this.shouldConnect = true;
+		this.signalingUrls.forEach( ( url ) => {
+			const signalingConn = map.setIfUndefined(
+				signalingConns,
+				url,
+				() => new SignalingConn( url )
+			);
+			this.signalingConns.push( signalingConn );
+			signalingConn.providers.add( this );
+		} );
+		if ( this.room ) {
+			this.room.connect();
+		}
+	}
+
+	disconnect() {
+		this.shouldConnect = false;
+		this.signalingConns.forEach( ( conn ) => {
+			conn.providers.delete( this );
+			if ( conn.providers.size === 0 ) {
+				conn.destroy();
+				signalingConns.delete( conn.url );
+			}
+		} );
+		if ( this.room ) {
+			this.room.disconnect();
+		}
+	}
+
+	destroy() {
+		this.doc.off( 'destroy', this.destroy );
+		// need to wait for key before deleting room
+		this.key.then( () => {
+			/** @type {Room} */ ( this.room ).destroy();
+			rooms.delete( this.roomName );
+		} );
+		super.destroy();
+	}
+}
diff --git a/packages/sync/tsconfig.json b/packages/sync/tsconfig.json
new file mode 100644
index 00000000000000..40b3ecb72f9aba
--- /dev/null
+++ b/packages/sync/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "node" ]
+	},
+	"include": [ "src/**/*" ],
+	"references": [ { "path": "../url" } ]
+}
diff --git a/packages/token-list/.npmrc b/packages/token-list/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/token-list/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index fa6b96c428cfc0..0b72a43de88d4f 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+### Internal
+
+-   Refactor to TypeScript ([#62584](https://github.com/WordPress/gutenberg/pull/62584)).
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
+## 2.57.0 (2024-05-02)
+
+## 2.56.0 (2024-04-19)
+
+## 2.55.0 (2024-04-03)
+
+## 2.54.0 (2024-03-21)
+
+## 2.53.0 (2024-03-06)
+
+## 2.52.0 (2024-02-21)
+
+## 2.51.0 (2024-02-09)
+
+## 2.50.0 (2024-01-24)
+
+## 2.49.0 (2024-01-10)
+
+## 2.48.0 (2023-12-13)
+
+## 2.47.0 (2023-11-29)
+
+## 2.46.0 (2023-11-16)
+
+## 2.45.0 (2023-11-02)
+
+## 2.44.0 (2023-10-18)
+
+## 2.43.0 (2023-10-05)
+
+## 2.42.0 (2023-09-20)
+
+## 2.41.0 (2023-08-31)
+
+## 2.40.0 (2023-08-16)
+
+## 2.39.0 (2023-08-10)
+
+## 2.38.0 (2023-07-20)
+
+## 2.37.0 (2023-07-05)
+
+## 2.36.0 (2023-06-23)
+
+## 2.35.0 (2023-06-07)
+
+## 2.34.0 (2023-05-24)
+
+## 2.33.0 (2023-05-10)
+
+## 2.32.0 (2023-04-26)
+
+## 2.31.0 (2023-04-12)
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -57,7 +165,7 @@
 
 ## 1.10.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 3061259b5ec6ae..50fe379c1a08e0 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "2.22.0",
+	"version": "3.13.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,14 +19,16 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/token-list/src/index.js b/packages/token-list/src/index.js
deleted file mode 100644
index efd4ab68c478e5..00000000000000
--- a/packages/token-list/src/index.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * A set of tokens.
- *
- * @see https://dom.spec.whatwg.org/#domtokenlist
- */
-export default class TokenList {
-	/**
-	 * Constructs a new instance of TokenList.
-	 *
-	 * @param {string} initialValue Initial value to assign.
-	 */
-	constructor( initialValue = '' ) {
-		this.value = initialValue;
-
-		// Disable reason: These are type hints on the class.
-		/* eslint-disable no-unused-expressions */
-		/** @type {string} */
-		this._currentValue;
-
-		/** @type {string[]} */
-		this._valueAsArray;
-		/* eslint-enable no-unused-expressions */
-	}
-
-	/**
-	 * @param {Parameters<Array<string>['entries']>} args
-	 */
-	entries( ...args ) {
-		return this._valueAsArray.entries( ...args );
-	}
-
-	/**
-	 * @param {Parameters<Array<string>['forEach']>} args
-	 */
-	forEach( ...args ) {
-		return this._valueAsArray.forEach( ...args );
-	}
-
-	/**
-	 * @param {Parameters<Array<string>['keys']>} args
-	 */
-	keys( ...args ) {
-		return this._valueAsArray.keys( ...args );
-	}
-
-	/**
-	 * @param {Parameters<Array<string>['values']>} args
-	 */
-	values( ...args ) {
-		return this._valueAsArray.values( ...args );
-	}
-
-	/**
-	 * Returns the associated set as string.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-value
-	 *
-	 * @return {string} Token set as string.
-	 */
-	get value() {
-		return this._currentValue;
-	}
-
-	/**
-	 * Replaces the associated set with a new string value.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-value
-	 *
-	 * @param {string} value New token set as string.
-	 */
-	set value( value ) {
-		value = String( value );
-		this._valueAsArray = [
-			...new Set( value.split( /\s+/g ).filter( Boolean ) ),
-		];
-		this._currentValue = this._valueAsArray.join( ' ' );
-	}
-
-	/**
-	 * Returns the number of tokens.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-length
-	 *
-	 * @return {number} Number of tokens.
-	 */
-	get length() {
-		return this._valueAsArray.length;
-	}
-
-	/**
-	 * Returns the stringified form of the TokenList.
-	 *
-	 * @see https://dom.spec.whatwg.org/#DOMTokenList-stringification-behavior
-	 * @see https://www.ecma-international.org/ecma-262/9.0/index.html#sec-tostring
-	 *
-	 * @return {string} Token set as string.
-	 */
-	toString() {
-		return this.value;
-	}
-
-	/**
-	 * Returns an iterator for the TokenList, iterating items of the set.
-	 *
-	 * @see https://dom.spec.whatwg.org/#domtokenlist
-	 *
-	 * @return {IterableIterator<string>} TokenList iterator.
-	 */
-	*[ Symbol.iterator ]() {
-		return yield* this._valueAsArray;
-	}
-
-	/**
-	 * Returns the token with index `index`.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-item
-	 *
-	 * @param {number} index Index at which to return token.
-	 *
-	 * @return {string|undefined} Token at index.
-	 */
-	item( index ) {
-		return this._valueAsArray[ index ];
-	}
-
-	/**
-	 * Returns true if `token` is present, and false otherwise.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-contains
-	 *
-	 * @param {string} item Token to test.
-	 *
-	 * @return {boolean} Whether token is present.
-	 */
-	contains( item ) {
-		return this._valueAsArray.indexOf( item ) !== -1;
-	}
-
-	/**
-	 * Adds all arguments passed, except those already present.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-add
-	 *
-	 * @param {...string} items Items to add.
-	 */
-	add( ...items ) {
-		this.value += ' ' + items.join( ' ' );
-	}
-
-	/**
-	 * Removes arguments passed, if they are present.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-remove
-	 *
-	 * @param {...string} items Items to remove.
-	 */
-	remove( ...items ) {
-		this.value = this._valueAsArray
-			.filter( ( val ) => ! items.includes( val ) )
-			.join( ' ' );
-	}
-
-	/**
-	 * If `force` is not given, "toggles" `token`, removing it if it’s present
-	 * and adding it if it’s not present. If `force` is true, adds token (same
-	 * as add()). If force is false, removes token (same as remove()). Returns
-	 * true if `token` is now present, and false otherwise.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-toggle
-	 *
-	 * @param {string}  token   Token to toggle.
-	 * @param {boolean} [force] Presence to force.
-	 *
-	 * @return {boolean} Whether token is present after toggle.
-	 */
-	toggle( token, force ) {
-		if ( undefined === force ) {
-			force = ! this.contains( token );
-		}
-
-		if ( force ) {
-			this.add( token );
-		} else {
-			this.remove( token );
-		}
-
-		return force;
-	}
-
-	/**
-	 * Replaces `token` with `newToken`. Returns true if `token` was replaced
-	 * with `newToken`, and false otherwise.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-replace
-	 *
-	 * @param {string} token    Token to replace with `newToken`.
-	 * @param {string} newToken Token to use in place of `token`.
-	 *
-	 * @return {boolean} Whether replacement occurred.
-	 */
-	replace( token, newToken ) {
-		if ( ! this.contains( token ) ) {
-			return false;
-		}
-
-		this.remove( token );
-		this.add( newToken );
-
-		return true;
-	}
-
-	/**
-	 * Returns true if `token` is in the associated attribute’s supported
-	 * tokens. Returns false otherwise.
-	 *
-	 * Always returns `true` in this implementation.
-	 *
-	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-supports
-	 *
-	 * @return {boolean} Whether token is supported.
-	 */
-	supports() {
-		return true;
-	}
-}
diff --git a/packages/token-list/src/index.ts b/packages/token-list/src/index.ts
new file mode 100644
index 00000000000000..744afe54eb4928
--- /dev/null
+++ b/packages/token-list/src/index.ts
@@ -0,0 +1,212 @@
+/**
+ * A set of tokens.
+ *
+ * @see https://dom.spec.whatwg.org/#domtokenlist
+ */
+export default class TokenList {
+	private _currentValue: string;
+	private _valueAsArray: string[];
+
+	/**
+	 * Constructs a new instance of TokenList.
+	 *
+	 * @param initialValue Initial value to assign.
+	 */
+	constructor( initialValue: string = '' ) {
+		this._currentValue = '';
+		this._valueAsArray = [];
+		this.value = initialValue;
+	}
+
+	entries( ...args: Parameters< Array< string >[ 'entries' ] > ) {
+		return this._valueAsArray.entries( ...args );
+	}
+
+	forEach( ...args: Parameters< Array< string >[ 'forEach' ] > ) {
+		return this._valueAsArray.forEach( ...args );
+	}
+
+	keys( ...args: Parameters< Array< string >[ 'keys' ] > ) {
+		return this._valueAsArray.keys( ...args );
+	}
+
+	values( ...args: Parameters< Array< string >[ 'values' ] > ) {
+		return this._valueAsArray.values( ...args );
+	}
+
+	/**
+	 * Returns the associated set as string.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-value
+	 *
+	 * @return Token set as string.
+	 */
+	get value(): string {
+		return this._currentValue;
+	}
+
+	/**
+	 * Replaces the associated set with a new string value.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-value
+	 *
+	 * @param value New token set as string.
+	 */
+	set value( value: string ) {
+		value = String( value );
+		this._valueAsArray = [
+			...new Set( value.split( /\s+/g ).filter( Boolean ) ),
+		];
+		this._currentValue = this._valueAsArray.join( ' ' );
+	}
+
+	/**
+	 * Returns the number of tokens.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-length
+	 *
+	 * @return Number of tokens.
+	 */
+	get length(): number {
+		return this._valueAsArray.length;
+	}
+
+	/**
+	 * Returns the stringified form of the TokenList.
+	 *
+	 * @see https://dom.spec.whatwg.org/#DOMTokenList-stringification-behavior
+	 * @see https://www.ecma-international.org/ecma-262/9.0/index.html#sec-tostring
+	 *
+	 * @return Token set as string.
+	 */
+	toString(): string {
+		return this.value;
+	}
+
+	/**
+	 * Returns an iterator for the TokenList, iterating items of the set.
+	 *
+	 * @see https://dom.spec.whatwg.org/#domtokenlist
+	 *
+	 * @return TokenList iterator.
+	 */
+	*[ Symbol.iterator ](): IterableIterator< string > {
+		return yield* this._valueAsArray;
+	}
+
+	/**
+	 * Returns the token with index `index`.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-item
+	 *
+	 * @param index Index at which to return token.
+	 *
+	 * @return Token at index.
+	 */
+	item( index: number ): string | undefined {
+		return this._valueAsArray[ index ];
+	}
+
+	/**
+	 * Returns true if `token` is present, and false otherwise.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-contains
+	 *
+	 * @param item Token to test.
+	 *
+	 * @return Whether token is present.
+	 */
+	contains( item: string ): boolean {
+		return this._valueAsArray.indexOf( item ) !== -1;
+	}
+
+	/**
+	 * Adds all arguments passed, except those already present.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-add
+	 *
+	 * @param items Items to add.
+	 */
+	add( ...items: string[] ): void {
+		this.value += ' ' + items.join( ' ' );
+	}
+
+	/**
+	 * Removes arguments passed, if they are present.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-remove
+	 *
+	 * @param items Items to remove.
+	 */
+	remove( ...items: string[] ): void {
+		this.value = this._valueAsArray
+			.filter( ( val ) => ! items.includes( val ) )
+			.join( ' ' );
+	}
+
+	/**
+	 * If `force` is not given, "toggles" `token`, removing it if it’s present
+	 * and adding it if it’s not present. If `force` is true, adds token (same
+	 * as add()). If force is false, removes token (same as remove()). Returns
+	 * true if `token` is now present, and false otherwise.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-toggle
+	 *
+	 * @param token   Token to toggle.
+	 * @param [force] Presence to force.
+	 *
+	 * @return Whether token is present after toggle.
+	 */
+	toggle( token: string, force?: boolean ): boolean {
+		if ( undefined === force ) {
+			force = ! this.contains( token );
+		}
+
+		if ( force ) {
+			this.add( token );
+		} else {
+			this.remove( token );
+		}
+
+		return force;
+	}
+
+	/**
+	 * Replaces `token` with `newToken`. Returns true if `token` was replaced
+	 * with `newToken`, and false otherwise.
+	 *
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-replace
+	 *
+	 * @param token    Token to replace with `newToken`.
+	 * @param newToken Token to use in place of `token`.
+	 *
+	 * @return Whether replacement occurred.
+	 */
+	replace( token: string, newToken: string ): boolean {
+		if ( ! this.contains( token ) ) {
+			return false;
+		}
+
+		this.remove( token );
+		this.add( newToken );
+
+		return true;
+	}
+
+	/* eslint-disable @typescript-eslint/no-unused-vars */
+	/**
+	 * Returns true if `token` is in the associated attribute’s supported
+	 * tokens. Returns false otherwise.
+	 *
+	 * Always returns `true` in this implementation.
+	 *
+	 * @param _token
+	 * @see https://dom.spec.whatwg.org/#dom-domtokenlist-supports
+	 *
+	 * @return Whether token is supported.
+	 */
+	supports( _token: string ): boolean {
+		return true;
+	}
+	/* eslint-enable @typescript-eslint/no-unused-vars */
+}
diff --git a/packages/token-list/src/test/index.js b/packages/token-list/src/test/index.js
deleted file mode 100644
index e208742d0fc6cc..00000000000000
--- a/packages/token-list/src/test/index.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/**
- * Internal dependencies
- */
-import TokenList from '../';
-
-describe( 'token-list', () => {
-	describe( 'constructor', () => {
-		it( 'should instantiate instance with no initial value', () => {
-			const list = new TokenList();
-
-			expect( list.value ).toBe( '' );
-			expect( list ).toHaveLength( 0 );
-		} );
-
-		it( 'should instantiate instance with empty initial value', () => {
-			const list = new TokenList( '' );
-
-			expect( list.value ).toBe( '' );
-			expect( list ).toHaveLength( 0 );
-		} );
-
-		it( 'should instantiate instance with initial value', () => {
-			const list = new TokenList( 'abc   ' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-		} );
-
-		describe( 'array method inheritence', () => {
-			it( 'entries', () => {
-				const list = new TokenList( 'abc   ' );
-
-				expect( [ ...list.entries() ] ).toEqual( [ [ 0, 'abc' ] ] );
-			} );
-
-			it( 'forEach', () => {
-				expect.assertions( 1 );
-
-				const list = new TokenList( 'abc   ' );
-
-				list.forEach( ( item ) => expect( item ).toBe( 'abc' ) );
-			} );
-
-			it( 'values', () => {
-				const list = new TokenList( 'abc   ' );
-
-				expect( [ ...list.values() ] ).toEqual( [ 'abc' ] );
-			} );
-
-			it( 'keys', () => {
-				const list = new TokenList( 'abc   ' );
-
-				expect( [ ...list.keys() ] ).toEqual( [ 0 ] );
-			} );
-		} );
-	} );
-
-	describe( 'value', () => {
-		it( 'gets the stringified value', () => {
-			const list = new TokenList( 'abc   ' );
-
-			expect( list.value ).toBe( 'abc' );
-		} );
-
-		it( 'sets to stringified value', () => {
-			const list = new TokenList();
-			list.value = undefined;
-
-			expect( list.value ).toBe( 'undefined' );
-		} );
-
-		it( 'is the stringifier of the instance', () => {
-			const list = new TokenList( 'abc   ' );
-
-			expect( String( list ) ).toBe( 'abc' );
-		} );
-	} );
-
-	describe( 'Symbol.iterator', () => {
-		it( 'returns a generator', () => {
-			const list = new TokenList();
-
-			expect( list[ Symbol.iterator ]().next ).toEqual(
-				expect.any( Function )
-			);
-		} );
-
-		it( 'yields entries', () => {
-			expect.assertions( 2 );
-
-			const classes = [ 'abc', 'def' ];
-			const list = new TokenList( classes.join( ' ' ) );
-
-			let i = 0;
-			for ( const item of list ) {
-				expect( item ).toBe( classes[ i++ ] );
-			}
-		} );
-	} );
-
-	describe( 'item', () => {
-		it( 'should return undefined if item at index does not exist', () => {
-			const list = new TokenList();
-
-			expect( list.item( 0 ) ).toBeUndefined();
-		} );
-
-		it( 'should return item at index', () => {
-			const list = new TokenList( 'abc' );
-
-			expect( list.item( 0 ) ).toBe( 'abc' );
-		} );
-	} );
-
-	describe( 'contains', () => {
-		it( 'should return false if token does not exist', () => {
-			const list = new TokenList();
-
-			expect( list.contains( 'abc' ) ).toBe( false );
-		} );
-
-		it( 'should return true if token exists', () => {
-			const list = new TokenList( 'abc' );
-
-			expect( list.contains( 'abc' ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'add', () => {
-		it( 'does nothing if token already exists', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.add( 'abc' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'does nothing if token already exists (whitespace variation)', () => {
-			const list = new TokenList( 'abc   ' );
-			const returnValue = list.add( '' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'does not add an empty token', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.add( '' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'adds token to empty initial value', () => {
-			const list = new TokenList();
-			const returnValue = list.add( 'abc' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'adds token to non-empty initial value', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.add( 'def' );
-
-			expect( list.value ).toBe( 'abc def' );
-			expect( list ).toHaveLength( 2 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'adds multiple tokens, uniquely', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.add( 'abc', 'def', 'ghi' );
-
-			expect( list.value ).toBe( 'abc def ghi' );
-			expect( list ).toHaveLength( 3 );
-			expect( returnValue ).toBeUndefined();
-		} );
-	} );
-
-	describe( 'remove', () => {
-		it( 'does nothing if token does not exist', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.remove( 'def' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'removes token', () => {
-			const list = new TokenList( 'abc def' );
-			const returnValue = list.remove( 'def' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBeUndefined();
-		} );
-
-		it( 'removes multiple tokens', () => {
-			const list = new TokenList( 'abc def' );
-			const returnValue = list.remove( 'abc', 'def' );
-
-			expect( list.value ).toBe( '' );
-			expect( list ).toHaveLength( 0 );
-			expect( returnValue ).toBeUndefined();
-		} );
-	} );
-
-	describe( 'replace', () => {
-		it( 'does nothing if token does not exist', () => {
-			const list = new TokenList( 'abc' );
-			const returnValue = list.replace( 'def', 'ghi' );
-
-			expect( list.value ).toBe( 'abc' );
-			expect( list ).toHaveLength( 1 );
-			expect( returnValue ).toBe( false );
-		} );
-
-		it( 'removes token', () => {
-			const list = new TokenList( 'abc def' );
-			const returnValue = list.replace( 'def', 'ghi' );
-
-			expect( list.value ).toBe( 'abc ghi' );
-			expect( list ).toHaveLength( 2 );
-			expect( returnValue ).toBe( true );
-		} );
-	} );
-
-	describe( 'supports', () => {
-		it( 'returns true', () => {
-			const list = new TokenList( 'abc def' );
-
-			expect( list.supports( 'does-not-matter' ) ).toBe( true );
-		} );
-	} );
-
-	describe( 'toggle', () => {
-		describe( 'without force', () => {
-			it( 'toggles off', () => {
-				const list = new TokenList( 'abc' );
-				const returnValue = list.toggle( 'abc' );
-
-				expect( list.value ).toBe( '' );
-				expect( list ).toHaveLength( 0 );
-				expect( returnValue ).toBe( false );
-			} );
-
-			it( 'toggles on', () => {
-				const list = new TokenList();
-				const returnValue = list.toggle( 'abc' );
-
-				expect( list.value ).toBe( 'abc' );
-				expect( list ).toHaveLength( 1 );
-				expect( returnValue ).toBe( true );
-			} );
-		} );
-
-		describe( 'with force', () => {
-			it( 'toggles off', () => {
-				const list = new TokenList( 'abc' );
-				const returnValue = list.toggle( 'abc', false );
-
-				expect( list.value ).toBe( '' );
-				expect( list ).toHaveLength( 0 );
-				expect( returnValue ).toBe( false );
-			} );
-
-			it( 'toggles on', () => {
-				const list = new TokenList( 'abc' );
-				const returnValue = list.toggle( 'abc', true );
-
-				expect( list.value ).toBe( 'abc' );
-				expect( list ).toHaveLength( 1 );
-				expect( returnValue ).toBe( true );
-			} );
-		} );
-	} );
-} );
diff --git a/packages/token-list/src/test/index.ts b/packages/token-list/src/test/index.ts
new file mode 100644
index 00000000000000..fda0de0c53e489
--- /dev/null
+++ b/packages/token-list/src/test/index.ts
@@ -0,0 +1,284 @@
+/**
+ * Internal dependencies
+ */
+import TokenList from '../';
+
+describe( 'token-list', () => {
+	describe( 'constructor', () => {
+		it( 'should instantiate instance with no initial value', () => {
+			const list = new TokenList();
+
+			expect( list.value ).toBe( '' );
+			expect( list ).toHaveLength( 0 );
+		} );
+
+		it( 'should instantiate instance with empty initial value', () => {
+			const list = new TokenList( '' );
+
+			expect( list.value ).toBe( '' );
+			expect( list ).toHaveLength( 0 );
+		} );
+
+		it( 'should instantiate instance with initial value', () => {
+			const list = new TokenList( 'abc   ' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+		} );
+
+		describe( 'array method inheritence', () => {
+			it( 'entries', () => {
+				const list = new TokenList( 'abc   ' );
+
+				expect( [ ...list.entries() ] ).toEqual( [ [ 0, 'abc' ] ] );
+			} );
+
+			it( 'forEach', () => {
+				expect.assertions( 1 );
+
+				const list = new TokenList( 'abc   ' );
+
+				list.forEach( ( item ) => expect( item ).toBe( 'abc' ) );
+			} );
+
+			it( 'values', () => {
+				const list = new TokenList( 'abc   ' );
+
+				expect( [ ...list.values() ] ).toEqual( [ 'abc' ] );
+			} );
+
+			it( 'keys', () => {
+				const list = new TokenList( 'abc   ' );
+
+				expect( [ ...list.keys() ] ).toEqual( [ 0 ] );
+			} );
+		} );
+	} );
+
+	describe( 'value', () => {
+		it( 'gets the stringified value', () => {
+			const list = new TokenList( 'abc   ' );
+
+			expect( list.value ).toBe( 'abc' );
+		} );
+
+		it( 'sets to stringified value', () => {
+			const list = new TokenList();
+			// @ts-expect-error The value should be a string, for testing we pass a "bad" value.
+			list.value = undefined;
+
+			expect( list.value ).toBe( 'undefined' );
+		} );
+
+		it( 'is the stringifier of the instance', () => {
+			const list = new TokenList( 'abc   ' );
+
+			expect( String( list ) ).toBe( 'abc' );
+		} );
+	} );
+
+	describe( 'Symbol.iterator', () => {
+		it( 'returns a generator', () => {
+			const list = new TokenList();
+
+			expect( list[ Symbol.iterator ]().next ).toEqual(
+				expect.any( Function )
+			);
+		} );
+
+		it( 'yields entries', () => {
+			expect.assertions( 2 );
+
+			const classes = [ 'abc', 'def' ];
+			const list = new TokenList( classes.join( ' ' ) );
+
+			let i = 0;
+			for ( const item of list ) {
+				expect( item ).toBe( classes[ i++ ] );
+			}
+		} );
+	} );
+
+	describe( 'item', () => {
+		it( 'should return undefined if item at index does not exist', () => {
+			const list = new TokenList();
+
+			expect( list.item( 0 ) ).toBeUndefined();
+		} );
+
+		it( 'should return item at index', () => {
+			const list = new TokenList( 'abc' );
+
+			expect( list.item( 0 ) ).toBe( 'abc' );
+		} );
+	} );
+
+	describe( 'contains', () => {
+		it( 'should return false if token does not exist', () => {
+			const list = new TokenList();
+
+			expect( list.contains( 'abc' ) ).toBe( false );
+		} );
+
+		it( 'should return true if token exists', () => {
+			const list = new TokenList( 'abc' );
+
+			expect( list.contains( 'abc' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'add', () => {
+		it( 'does nothing if token already exists', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.add( 'abc' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'does nothing if token already exists (whitespace variation)', () => {
+			const list = new TokenList( 'abc   ' );
+			const returnValue = list.add( '' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'does not add an empty token', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.add( '' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'adds token to empty initial value', () => {
+			const list = new TokenList();
+			const returnValue = list.add( 'abc' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'adds token to non-empty initial value', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.add( 'def' );
+
+			expect( list.value ).toBe( 'abc def' );
+			expect( list ).toHaveLength( 2 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'adds multiple tokens, uniquely', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.add( 'abc', 'def', 'ghi' );
+
+			expect( list.value ).toBe( 'abc def ghi' );
+			expect( list ).toHaveLength( 3 );
+			expect( returnValue ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'remove', () => {
+		it( 'does nothing if token does not exist', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.remove( 'def' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'removes token', () => {
+			const list = new TokenList( 'abc def' );
+			const returnValue = list.remove( 'def' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBeUndefined();
+		} );
+
+		it( 'removes multiple tokens', () => {
+			const list = new TokenList( 'abc def' );
+			const returnValue = list.remove( 'abc', 'def' );
+
+			expect( list.value ).toBe( '' );
+			expect( list ).toHaveLength( 0 );
+			expect( returnValue ).toBeUndefined();
+		} );
+	} );
+
+	describe( 'replace', () => {
+		it( 'does nothing if token does not exist', () => {
+			const list = new TokenList( 'abc' );
+			const returnValue = list.replace( 'def', 'ghi' );
+
+			expect( list.value ).toBe( 'abc' );
+			expect( list ).toHaveLength( 1 );
+			expect( returnValue ).toBe( false );
+		} );
+
+		it( 'removes token', () => {
+			const list = new TokenList( 'abc def' );
+			const returnValue = list.replace( 'def', 'ghi' );
+
+			expect( list.value ).toBe( 'abc ghi' );
+			expect( list ).toHaveLength( 2 );
+			expect( returnValue ).toBe( true );
+		} );
+	} );
+
+	describe( 'supports', () => {
+		it( 'returns true', () => {
+			const list = new TokenList( 'abc def' );
+
+			expect( list.supports( 'does-not-matter' ) ).toBe( true );
+		} );
+	} );
+
+	describe( 'toggle', () => {
+		describe( 'without force', () => {
+			it( 'toggles off', () => {
+				const list = new TokenList( 'abc' );
+				const returnValue = list.toggle( 'abc' );
+
+				expect( list.value ).toBe( '' );
+				expect( list ).toHaveLength( 0 );
+				expect( returnValue ).toBe( false );
+			} );
+
+			it( 'toggles on', () => {
+				const list = new TokenList();
+				const returnValue = list.toggle( 'abc' );
+
+				expect( list.value ).toBe( 'abc' );
+				expect( list ).toHaveLength( 1 );
+				expect( returnValue ).toBe( true );
+			} );
+		} );
+
+		describe( 'with force', () => {
+			it( 'toggles off', () => {
+				const list = new TokenList( 'abc' );
+				const returnValue = list.toggle( 'abc', false );
+
+				expect( list.value ).toBe( '' );
+				expect( list ).toHaveLength( 0 );
+				expect( returnValue ).toBe( false );
+			} );
+
+			it( 'toggles on', () => {
+				const list = new TokenList( 'abc' );
+				const returnValue = list.toggle( 'abc', true );
+
+				expect( list.value ).toBe( 'abc' );
+				expect( list ).toHaveLength( 1 );
+				expect( returnValue ).toBe( true );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/token-list/tsconfig.json b/packages/token-list/tsconfig.json
index e22ff86abb6f2d..d1947d4c52ffdf 100644
--- a/packages/token-list/tsconfig.json
+++ b/packages/token-list/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
new file mode 100644
index 00000000000000..e84658632a054d
--- /dev/null
+++ b/packages/undo-manager/CHANGELOG.md
@@ -0,0 +1,69 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 1.13.0 (2024-11-27)
+
+## 1.12.0 (2024-11-16)
+
+## 1.11.0 (2024-10-30)
+
+## 1.10.0 (2024-10-16)
+
+## 1.9.0 (2024-10-03)
+
+## 1.8.0 (2024-09-19)
+
+## 1.7.0 (2024-09-05)
+
+## 1.6.0 (2024-08-21)
+
+## 1.5.0 (2024-08-07)
+
+## 1.4.0 (2024-07-24)
+
+## 1.3.0 (2024-07-10)
+
+## 1.2.0 (2024-06-26)
+
+## 1.1.0 (2024-06-15)
+
+## 1.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 0.18.0 (2024-05-16)
+
+## 0.17.0 (2024-05-02)
+
+## 0.16.0 (2024-04-19)
+
+## 0.15.0 (2024-04-03)
+
+## 0.14.0 (2024-03-21)
+
+## 0.13.0 (2024-03-06)
+
+## 0.12.0 (2024-02-21)
+
+## 0.11.0 (2024-02-09)
+
+## 0.10.0 (2024-01-24)
+
+## 0.9.0 (2024-01-10)
+
+## 0.8.0 (2023-12-13)
+
+## 0.7.0 (2023-11-29)
+
+## 0.6.0 (2023-11-16)
+
+## 0.5.0 (2023-11-02)
+
+## 0.4.0 (2023-10-18)
+
+## 0.3.0 (2023-10-05)
+
+## 0.2.0 (2023-09-20)
diff --git a/packages/undo-manager/README.md b/packages/undo-manager/README.md
new file mode 100644
index 00000000000000..cc9727469bcadf
--- /dev/null
+++ b/packages/undo-manager/README.md
@@ -0,0 +1,33 @@
+# Undo Manager
+
+A simple undo manager.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/undo-manager --save
+```
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### createUndoManager
+
+Creates an undo manager.
+
+_Returns_
+
+-   `UndoManager`: Undo manager.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## 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/undo-manager/package.json b/packages/undo-manager/package.json
new file mode 100644
index 00000000000000..5046d9591a8c08
--- /dev/null
+++ b/packages/undo-manager/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@wordpress/undo-manager",
+	"version": "1.13.0",
+	"description": "A small package to manage undo/redo.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"undo",
+		"history"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/undo-manager/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/undo-manager"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"wpScript": true,
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/is-shallow-equal": "*"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/undo-manager/src/index.js b/packages/undo-manager/src/index.js
new file mode 100644
index 00000000000000..2873fb7fde8af2
--- /dev/null
+++ b/packages/undo-manager/src/index.js
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+import isShallowEqual from '@wordpress/is-shallow-equal';
+
+/** @typedef {import('./types').HistoryRecord}  HistoryRecord */
+/** @typedef {import('./types').HistoryChange}  HistoryChange */
+/** @typedef {import('./types').HistoryChanges} HistoryChanges */
+/** @typedef {import('./types').UndoManager} UndoManager */
+
+/**
+ * Merge changes for a single item into a record of changes.
+ *
+ * @param {Record< string, HistoryChange >} changes1 Previous changes
+ * @param {Record< string, HistoryChange >} changes2 NextChanges
+ *
+ * @return {Record< string, HistoryChange >} Merged changes
+ */
+function mergeHistoryChanges( changes1, changes2 ) {
+	/**
+	 * @type {Record< string, HistoryChange >}
+	 */
+	const newChanges = { ...changes1 };
+	Object.entries( changes2 ).forEach( ( [ key, value ] ) => {
+		if ( newChanges[ key ] ) {
+			newChanges[ key ] = { ...newChanges[ key ], to: value.to };
+		} else {
+			newChanges[ key ] = value;
+		}
+	} );
+
+	return newChanges;
+}
+
+/**
+ * Adds history changes for a single item into a record of changes.
+ *
+ * @param {HistoryRecord}  record  The record to merge into.
+ * @param {HistoryChanges} changes The changes to merge.
+ */
+const addHistoryChangesIntoRecord = ( record, changes ) => {
+	const existingChangesIndex = record?.findIndex(
+		( { id: recordIdentifier } ) => {
+			return typeof recordIdentifier === 'string'
+				? recordIdentifier === changes.id
+				: isShallowEqual( recordIdentifier, changes.id );
+		}
+	);
+	const nextRecord = [ ...record ];
+
+	if ( existingChangesIndex !== -1 ) {
+		// If the edit is already in the stack leave the initial "from" value.
+		nextRecord[ existingChangesIndex ] = {
+			id: changes.id,
+			changes: mergeHistoryChanges(
+				nextRecord[ existingChangesIndex ].changes,
+				changes.changes
+			),
+		};
+	} else {
+		nextRecord.push( changes );
+	}
+	return nextRecord;
+};
+
+/**
+ * Creates an undo manager.
+ *
+ * @return {UndoManager} Undo manager.
+ */
+export function createUndoManager() {
+	/**
+	 * @type {HistoryRecord[]}
+	 */
+	let history = [];
+	/**
+	 * @type {HistoryRecord}
+	 */
+	let stagedRecord = [];
+	/**
+	 * @type {number}
+	 */
+	let offset = 0;
+
+	const dropPendingRedos = () => {
+		history = history.slice( 0, offset || undefined );
+		offset = 0;
+	};
+
+	const appendStagedRecordToLatestHistoryRecord = () => {
+		const index = history.length === 0 ? 0 : history.length - 1;
+		let latestRecord = history[ index ] ?? [];
+		stagedRecord.forEach( ( changes ) => {
+			latestRecord = addHistoryChangesIntoRecord( latestRecord, changes );
+		} );
+		stagedRecord = [];
+		history[ index ] = latestRecord;
+	};
+
+	/**
+	 * Checks whether a record is empty.
+	 * A record is considered empty if it the changes keep the same values.
+	 * Also updates to function values are ignored.
+	 *
+	 * @param {HistoryRecord} record
+	 * @return {boolean} Whether the record is empty.
+	 */
+	const isRecordEmpty = ( record ) => {
+		const filteredRecord = record.filter( ( { changes } ) => {
+			return Object.values( changes ).some(
+				( { from, to } ) =>
+					typeof from !== 'function' &&
+					typeof to !== 'function' &&
+					! isShallowEqual( from, to )
+			);
+		} );
+		return ! filteredRecord.length;
+	};
+
+	return {
+		/**
+		 * Record changes into the history.
+		 *
+		 * @param {HistoryRecord=} record   A record of changes to record.
+		 * @param {boolean}        isStaged Whether to immediately create an undo point or not.
+		 */
+		addRecord( record, isStaged = false ) {
+			const isEmpty = ! record || isRecordEmpty( record );
+			if ( isStaged ) {
+				if ( isEmpty ) {
+					return;
+				}
+				record.forEach( ( changes ) => {
+					stagedRecord = addHistoryChangesIntoRecord(
+						stagedRecord,
+						changes
+					);
+				} );
+			} else {
+				dropPendingRedos();
+				if ( stagedRecord.length ) {
+					appendStagedRecordToLatestHistoryRecord();
+				}
+				if ( isEmpty ) {
+					return;
+				}
+				history.push( record );
+			}
+		},
+
+		undo() {
+			if ( stagedRecord.length ) {
+				dropPendingRedos();
+				appendStagedRecordToLatestHistoryRecord();
+			}
+			const undoRecord = history[ history.length - 1 + offset ];
+			if ( ! undoRecord ) {
+				return;
+			}
+			offset -= 1;
+			return undoRecord;
+		},
+
+		redo() {
+			const redoRecord = history[ history.length + offset ];
+			if ( ! redoRecord ) {
+				return;
+			}
+			offset += 1;
+			return redoRecord;
+		},
+
+		hasUndo() {
+			return !! history[ history.length - 1 + offset ];
+		},
+
+		hasRedo() {
+			return !! history[ history.length + offset ];
+		},
+	};
+}
diff --git a/packages/undo-manager/src/test/index.js b/packages/undo-manager/src/test/index.js
new file mode 100644
index 00000000000000..97af523589c1c3
--- /dev/null
+++ b/packages/undo-manager/src/test/index.js
@@ -0,0 +1,260 @@
+/**
+ * Internal dependencies
+ */
+import { createUndoManager } from '../';
+
+describe( 'Undo Manager', () => {
+	it( 'stacks undo levels', () => {
+		const manager = createUndoManager();
+
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		manager.redo();
+
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 1, to: 2 } } },
+		] );
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 2, to: 3 } } },
+		] );
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 2, to: 3 } } },
+		] );
+	} );
+
+	it( 'handles undos/redos', () => {
+		const manager = createUndoManager();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 1, to: 2 } } },
+		] );
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 2, to: 3 } } },
+		] );
+
+		manager.undo();
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 1, to: 2 } } },
+		] );
+		manager.redo();
+		expect( manager.redo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 2, to: 3 } } },
+		] );
+
+		manager.undo();
+		manager.undo();
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		manager.redo();
+		expect( manager.redo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 1, to: 2 } } },
+		] );
+
+		manager.redo();
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 2, to: 3 } } },
+		] );
+		manager.redo();
+
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 3, to: 4 } } },
+		] );
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 3, to: 4 } } },
+		] );
+
+		// Check that undoing and editing will slice of
+		// all the levels after the current one.
+		manager.undo();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 2, to: 5 } } },
+		] );
+		manager.undo();
+		expect( manager.undo() ).toEqual( [
+			{ id: '1', changes: { value: { from: 1, to: 2 } } },
+		] );
+	} );
+
+	it( 'handles staged edits', () => {
+		const manager = createUndoManager();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		manager.addRecord(
+			[ { id: '1', changes: { value2: { from: undefined, to: 2 } } } ],
+			true
+		);
+		manager.addRecord(
+			[ { id: '1', changes: { value: { from: 1, to: 3 } } } ],
+			true
+		);
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 3, to: 4 } } },
+		] );
+		manager.undo();
+		expect( manager.undo() ).toEqual( [
+			{
+				id: '1',
+				changes: {
+					value: { from: undefined, to: 3 },
+					value2: { from: undefined, to: 2 },
+				},
+			},
+		] );
+	} );
+
+	it( 'handles explicit undo level creation', () => {
+		const manager = createUndoManager();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		// These three calls do nothing because they're empty.
+		manager.addRecord( [] );
+		manager.addRecord();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: 1, to: 1 } } },
+		] );
+		// Check that nothing happens if there are no pending
+		// transient edits.
+		manager.undo();
+		expect( manager.undo() ).toBe( undefined );
+		manager.redo();
+
+		// Check that transient edits are merged into the last
+		// edits.
+		manager.addRecord(
+			[ { id: '1', changes: { value2: { from: undefined, to: 2 } } } ],
+			true
+		);
+		manager.addRecord( [] ); // Records the staged edits.
+		manager.undo();
+		expect( manager.redo() ).toEqual( [
+			{
+				id: '1',
+				changes: {
+					value: { from: undefined, to: 1 },
+					value2: { from: undefined, to: 2 },
+				},
+			},
+		] );
+	} );
+
+	it( 'explicitly creates an undo level when undoing while there are pending transient edits', () => {
+		const manager = createUndoManager();
+		manager.addRecord( [
+			{ id: '1', changes: { value: { from: undefined, to: 1 } } },
+		] );
+		manager.addRecord(
+			[ { id: '1', changes: { value2: { from: undefined, to: 2 } } } ],
+			true
+		);
+		manager.undo();
+		expect( manager.redo() ).toEqual( [
+			{
+				id: '1',
+				changes: {
+					value: { from: undefined, to: 1 },
+					value2: { from: undefined, to: 2 },
+				},
+			},
+		] );
+	} );
+
+	it( 'supports records as ids', () => {
+		const manager = createUndoManager();
+
+		manager.addRecord(
+			[
+				{
+					id: { kind: 'postType', name: 'post', recordId: 1 },
+					changes: { value: { from: undefined, to: 1 } },
+				},
+			],
+			true
+		);
+		manager.addRecord(
+			[
+				{
+					id: { kind: 'postType', name: 'post', recordId: 1 },
+					changes: { value2: { from: undefined, to: 2 } },
+				},
+			],
+			true
+		);
+		manager.addRecord(
+			[
+				{
+					id: { kind: 'postType', name: 'post', recordId: 2 },
+					changes: { value: { from: undefined, to: 3 } },
+				},
+			],
+			true
+		);
+		manager.addRecord();
+		expect( manager.undo() ).toEqual( [
+			{
+				id: { kind: 'postType', name: 'post', recordId: 1 },
+				changes: {
+					value: { from: undefined, to: 1 },
+					value2: { from: undefined, to: 2 },
+				},
+			},
+			{
+				id: { kind: 'postType', name: 'post', recordId: 2 },
+				changes: {
+					value: { from: undefined, to: 3 },
+				},
+			},
+		] );
+	} );
+
+	it( 'should ignore empty records', () => {
+		const manager = createUndoManager();
+
+		// All the following changes are considered empty for different reasons.
+		manager.addRecord();
+		manager.addRecord( [] );
+		manager.addRecord( [
+			{ id: '1', changes: { a: { from: 'value', to: 'value' } } },
+		] );
+		manager.addRecord( [
+			{
+				id: '1',
+				changes: {
+					a: { from: 'value', to: 'value' },
+					b: { from: () => {}, to: () => {} },
+				},
+			},
+		] );
+
+		expect( manager.undo() ).toBeUndefined();
+
+		// The following changes is not empty
+		// and should also record the function changes in the history.
+
+		manager.addRecord( [
+			{
+				id: '1',
+				changes: {
+					a: { from: 'value1', to: 'value2' },
+					b: { from: () => {}, to: () => {} },
+				},
+			},
+		] );
+
+		const undoRecord = manager.undo();
+		expect( undoRecord ).not.toBeUndefined();
+		// b is included in the changes.
+		expect( Object.keys( undoRecord[ 0 ].changes ) ).toEqual( [
+			'a',
+			'b',
+		] );
+	} );
+} );
diff --git a/packages/undo-manager/src/types.ts b/packages/undo-manager/src/types.ts
new file mode 100644
index 00000000000000..ead93df121403b
--- /dev/null
+++ b/packages/undo-manager/src/types.ts
@@ -0,0 +1,19 @@
+export type HistoryChange = {
+	from: any;
+	to: any;
+};
+
+export type HistoryChanges = {
+	id: string | Record< string, any >;
+	changes: Record< string, HistoryChange >;
+};
+
+export type HistoryRecord = Array< HistoryChanges >;
+
+export type UndoManager = {
+	addRecord: ( record: HistoryRecord, isStaged: boolean ) => void;
+	undo: () => HistoryRecord | undefined;
+	redo: () => HistoryRecord | undefined;
+	hasUndo: () => boolean;
+	hasRedo: () => boolean;
+};
diff --git a/packages/undo-manager/tsconfig.json b/packages/undo-manager/tsconfig.json
new file mode 100644
index 00000000000000..055c19d5bf513d
--- /dev/null
+++ b/packages/undo-manager/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"types": [ "node" ]
+	},
+	"references": [ { "path": "../is-shallow-equal" } ],
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/url/.npmrc b/packages/url/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/url/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index 11092a18574450..e4273fc57f2e0f 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.59.0 (2024-05-16)
+
+## 3.58.0 (2024-05-02)
+
+## 3.57.0 (2024-04-19)
+
+## 3.56.0 (2024-04-03)
+
+## 3.55.0 (2024-03-21)
+
+## 3.54.0 (2024-03-06)
+
+## 3.53.0 (2024-02-21)
+
+## 3.52.0 (2024-02-09)
+
+## 3.51.0 (2024-01-24)
+
+## 3.50.0 (2024-01-10)
+
+## 3.49.0 (2023-12-13)
+
+## 3.48.0 (2023-11-29)
+
+## 3.47.0 (2023-11-16)
+
+## 3.46.0 (2023-11-02)
+
+## 3.45.0 (2023-10-18)
+
+## 3.44.0 (2023-10-05)
+
+## 3.43.0 (2023-09-20)
+
+## 3.42.0 (2023-08-31)
+
+## 3.41.0 (2023-08-16)
+
+## 3.40.0 (2023-08-10)
+
+## 3.39.0 (2023-07-20)
+
+## 3.38.0 (2023-07-05)
+
+## 3.37.0 (2023-06-23)
+
+## 3.36.0 (2023-06-07)
+
+## 3.35.0 (2023-05-24)
+
+## 3.34.0 (2023-05-10)
+
+## 3.33.0 (2023-04-26)
+
+## 3.32.0 (2023-04-12)
+
+## 3.31.0 (2023-03-29)
+
+## 3.30.0 (2023-03-15)
+
+## 3.29.0 (2023-03-01)
+
+## 3.28.0 (2023-02-15)
+
+## 3.27.0 (2023-02-01)
+
+## 3.26.0 (2023-01-11)
+
+## 3.25.0 (2023-01-02)
+
+## 3.24.0 (2022-12-14)
+
 ## 3.23.0 (2022-11-16)
 
 ## 3.22.0 (2022-11-02)
@@ -44,13 +148,13 @@
 
 ## 3.3.0 (2021-11-07)
 
-### New Feature
+### New Features
 
 -   Added new `normalizePath` function ([#35992](https://github.com/WordPress/gutenberg/pull/35992)).
 
 ## 3.2.3 (2021-10-12)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `react-native-url-polyfill` dependency ([#34687](https://github.com/WordPress/gutenberg/pull/34687)).
 
@@ -69,25 +173,25 @@
 
 ## 2.21.0 (2021-01-05)
 
-### New Feature
+### New Features
 
 -   Add optional argument `maxLength` for truncating URL in `filterURLForDisplay`
 
 ## 2.16.0 (2020-06-15)
 
-### New Feature
+### New Features
 
 -   Added `getPathAndQueryString`.
 
 ## 2.14.0 (2020-04-30)
 
-### Bug fix
+### Bug Fixes
 
 -   `addQueryArgs` arguments are optional ([#21926](https://github.com/WordPress/gutenberg/pull/21926))
 
 ## 2.13.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
@@ -114,7 +218,7 @@
 
 ## 2.3.1 (2018-11-20)
 
-### Bug fixes
+### Bug Fixes
 
 -   The `isValidProtocol` function now correctly considers the protocol of the URL as only incoporating characters up to and including the colon (':').
 -   `getFragment` is now greedier and matches fragments from the first occurrence of the '#' symbol instead of the last.
@@ -144,18 +248,18 @@
 
 ## 2.1.0 (2018-10-16)
 
-### New Feature
+### New Features
 
 -   Added `safeDecodeURI`.
 
 ## 2.0.1 (2018-09-30)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix typo in the `qs` dependency definition in the `package.json`
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/url/README.md b/packages/url/README.md
index eea0a41a1eb497..0e4628669d11f2 100644
--- a/packages/url/README.md
+++ b/packages/url/README.md
@@ -18,9 +18,7 @@ _This package assumes that your code will run in an **ES2015+** environment. If
 
 ### addQueryArgs
 
-Appends arguments as querystring to the provided URL. If the URL already
-includes query arguments, the arguments are merged with (and take precedent
-over) the existing set.
+Appends arguments as querystring to the provided URL. If the URL already includes query arguments, the arguments are merged with (and take precedent over) the existing set.
 
 _Usage_
 
@@ -41,8 +39,7 @@ _Returns_
 
 Generates URL-encoded query string using input query data.
 
-It is intended to behave equivalent as PHP's `http_build_query`, configured
-with encoding type PHP_QUERY_RFC3986 (spaces as `%20`).
+It is intended to behave equivalent as PHP's `http_build_query`, configured with encoding type PHP_QUERY_RFC3986 (spaces as `%20`).
 
 _Usage_
 
@@ -71,14 +68,9 @@ _Returns_
 
 Performs some basic cleanup of a string for use as a post slug.
 
-This replicates some of what `sanitize_title()` does in WordPress core, but
-is only designed to approximate what the slug will be.
+This replicates some of what `sanitize_title()` does in WordPress core, but is only designed to approximate what the slug will be.
 
-Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin
-letters. Removes combining diacritical marks. Converts whitespace, periods,
-and forward slashes to hyphens. Removes any remaining non-word characters
-except hyphens. Converts remaining string to lowercase. It does not account
-for octets, HTML entities, or other encoded characters.
+Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin letters. Removes combining diacritical marks. Converts whitespace, periods, and forward slashes to hyphens. Removes any remaining non-word characters except hyphens. Converts remaining string to lowercase. It does not account for octets, HTML entities, or other encoded characters.
 
 _Parameters_
 
@@ -256,8 +248,7 @@ _Returns_
 
 ### getQueryArgs
 
-Returns an object of query arguments of the given URL. If the given URL is
-invalid or has no querystring, an empty object is returned.
+Returns an object of query arguments of the given URL. If the given URL is invalid or has no querystring, an empty object is returned.
 
 _Usage_
 
@@ -331,6 +322,24 @@ _Returns_
 
 -   `boolean`: Whether or not it looks like an email.
 
+### isPhoneNumber
+
+Determines whether the given string looks like a phone number.
+
+_Usage_
+
+```js
+const isPhoneNumber = isPhoneNumber( '+1 (555) 123-4567' ); // true
+```
+
+_Parameters_
+
+-   _phoneNumber_ `string`: The string to scrutinize.
+
+_Returns_
+
+-   `boolean`: Whether or not it looks like a phone number.
+
 ### isURL
 
 Determines whether the given string looks like a URL.
@@ -451,9 +460,7 @@ _Returns_
 
 ### normalizePath
 
-Given a path, returns a normalized path where equal query parameter values
-will be treated as identical, regardless of order they appear in the original
-text.
+Given a path, returns a normalized path where equal query parameter values will be treated as identical, regardless of order they appear in the original text.
 
 _Parameters_
 
@@ -481,6 +488,26 @@ _Returns_
 
 -   `string`: The updated URL.
 
+### prependHTTPS
+
+Prepends "https\://" to a url, if it looks like something that is meant to be a TLD.
+
+Note: this will not replace "http\://" with "<https://">.
+
+_Usage_
+
+```js
+const actualURL = prependHTTPS( 'wordpress.org' ); // https://wordpress.org
+```
+
+_Parameters_
+
+-   _url_ `string`: The URL to test.
+
+_Returns_
+
+-   `string`: The updated URL.
+
 ### removeQueryArgs
 
 Removes arguments from the query string of the url
@@ -506,8 +533,7 @@ _Returns_
 
 ### safeDecodeURI
 
-Safely decodes a URI with `decodeURI`. Returns the URI unmodified if
-`decodeURI` throws an error.
+Safely decodes a URI with `decodeURI`. Returns the URI unmodified if `decodeURI` throws an error.
 
 _Usage_
 
@@ -525,8 +551,7 @@ _Returns_
 
 ### safeDecodeURIComponent
 
-Safely decodes a URI component with `decodeURIComponent`. Returns the URI component unmodified if
-`decodeURIComponent` throws an error.
+Safely decodes a URI component with `decodeURIComponent`. Returns the URI component unmodified if `decodeURIComponent` throws an error.
 
 _Parameters_
 
diff --git a/packages/url/package.json b/packages/url/package.json
index 189f820341c353..8e3fc0dc140cd8 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "3.23.0",
+	"version": "4.13.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,16 +19,18 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"remove-accents": "^0.4.2"
+		"@babel/runtime": "7.25.7",
+		"remove-accents": "^0.5.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/url/src/filter-url-for-display.js b/packages/url/src/filter-url-for-display.js
index 2d3247e6d1da91..436070b667a3e6 100644
--- a/packages/url/src/filter-url-for-display.js
+++ b/packages/url/src/filter-url-for-display.js
@@ -13,20 +13,27 @@
  * @return {string} Displayed URL.
  */
 export function filterURLForDisplay( url, maxLength = null ) {
+	if ( ! url ) {
+		return '';
+	}
+
 	// Remove protocol and www prefixes.
-	let filteredURL = url.replace( /^(?:https?:)\/\/(?:www\.)?/, '' );
+	let filteredURL = url
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
 
 	// Ends with / and only has that single slash, strip it.
 	if ( filteredURL.match( /^[^\/]+\/$/ ) ) {
 		filteredURL = filteredURL.replace( '/', '' );
 	}
 
-	const mediaRegexp = /([\w|:])*\.(?:jpg|jpeg|gif|png|svg)/;
+	// capture file name from URL
+	const fileRegexp = /\/([^\/?]+)\.(?:[\w]+)(?=\?|$)/;
 
 	if (
 		! maxLength ||
 		filteredURL.length <= maxLength ||
-		! filteredURL.match( mediaRegexp )
+		! filteredURL.match( fileRegexp )
 	) {
 		return filteredURL;
 	}
diff --git a/packages/url/src/get-filename.js b/packages/url/src/get-filename.js
index 2941f18fe07b4d..d744a8da6bccfe 100644
--- a/packages/url/src/get-filename.js
+++ b/packages/url/src/get-filename.js
@@ -13,6 +13,11 @@
  */
 export function getFilename( url ) {
 	let filename;
+
+	if ( ! url ) {
+		return;
+	}
+
 	try {
 		filename = new URL( url, 'http://example.com' ).pathname
 			.split( '/' )
diff --git a/packages/url/src/get-path-and-query-string.js b/packages/url/src/get-path-and-query-string.js
index 0256a809da6599..f858846b07802c 100644
--- a/packages/url/src/get-path-and-query-string.js
+++ b/packages/url/src/get-path-and-query-string.js
@@ -20,7 +20,11 @@ export function getPathAndQueryString( url ) {
 	const path = getPath( url );
 	const queryString = getQueryString( url );
 	let value = '/';
-	if ( path ) value += path;
-	if ( queryString ) value += `?${ queryString }`;
+	if ( path ) {
+		value += path;
+	}
+	if ( queryString ) {
+		value += `?${ queryString }`;
+	}
 	return value;
 }
diff --git a/packages/url/src/get-query-args.js b/packages/url/src/get-query-args.js
index 5ba4760a47af81..45626f1d8a1e94 100644
--- a/packages/url/src/get-query-args.js
+++ b/packages/url/src/get-query-args.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { safeDecodeURIComponent } from './safe-decode-uri-component';
 import { getQueryString } from './get-query-string';
 
 /** @typedef {import('./get-query-arg').QueryArgParsed} QueryArgParsed */
@@ -85,7 +86,7 @@ export function getQueryArgs( url ) {
 					// Filtering avoids decoding as `undefined` for value, where
 					// default is restored in destructuring assignment.
 					.filter( Boolean )
-					.map( decodeURIComponent );
+					.map( safeDecodeURIComponent );
 
 				if ( key ) {
 					const segments = key.replace( /\]/g, '' ).split( '[' );
diff --git a/packages/url/src/index.js b/packages/url/src/index.js
index 9baa7babdc7898..378334ba131a6a 100644
--- a/packages/url/src/index.js
+++ b/packages/url/src/index.js
@@ -1,5 +1,6 @@
 export { isURL } from './is-url';
 export { isEmail } from './is-email';
+export { isPhoneNumber } from './is-phone-number';
 export { getProtocol } from './get-protocol';
 export { isValidProtocol } from './is-valid-protocol';
 export { getAuthority } from './get-authority';
@@ -24,3 +25,4 @@ export { filterURLForDisplay } from './filter-url-for-display';
 export { cleanForSlug } from './clean-for-slug';
 export { getFilename } from './get-filename';
 export { normalizePath } from './normalize-path';
+export { prependHTTPS } from './prepend-https';
diff --git a/packages/url/src/is-phone-number.js b/packages/url/src/is-phone-number.js
new file mode 100644
index 00000000000000..857b468bc52398
--- /dev/null
+++ b/packages/url/src/is-phone-number.js
@@ -0,0 +1,19 @@
+const PHONE_REGEXP = /^(tel:)?(\+)?\d{6,15}$/;
+
+/**
+ * Determines whether the given string looks like a phone number.
+ *
+ * @param {string} phoneNumber The string to scrutinize.
+ *
+ * @example
+ * ```js
+ * const isPhoneNumber = isPhoneNumber('+1 (555) 123-4567'); // true
+ * ```
+ *
+ * @return {boolean} Whether or not it looks like a phone number.
+ */
+export function isPhoneNumber( phoneNumber ) {
+	// Remove any seperator from phone number.
+	phoneNumber = phoneNumber.replace( /[-.() ]/g, '' );
+	return PHONE_REGEXP.test( phoneNumber );
+}
diff --git a/packages/url/src/prepend-https.js b/packages/url/src/prepend-https.js
new file mode 100644
index 00000000000000..237bf3e18cff70
--- /dev/null
+++ b/packages/url/src/prepend-https.js
@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import { prependHTTP } from './prepend-http';
+
+/**
+ * Prepends "https://" to a url, if it looks like something that is meant to be a TLD.
+ *
+ * Note: this will not replace "http://" with "https://".
+ *
+ * @param {string} url The URL to test.
+ *
+ * @example
+ * ```js
+ * const actualURL = prependHTTPS( 'wordpress.org' ); // https://wordpress.org
+ * ```
+ *
+ * @return {string} The updated URL.
+ */
+export function prependHTTPS( url ) {
+	if ( ! url ) {
+		return url;
+	}
+
+	// If url starts with http://, return it as is.
+	if ( url.startsWith( 'http://' ) ) {
+		return url;
+	}
+
+	url = prependHTTP( url );
+
+	return url.replace( /^http:/, 'https:' );
+}
diff --git a/packages/url/src/test/fixtures/wpt-data.json b/packages/url/src/test/fixtures/wpt-data.json
index 6b5a2a24866c98..7072bddc7f7612 100644
--- a/packages/url/src/test/fixtures/wpt-data.json
+++ b/packages/url/src/test/fixtures/wpt-data.json
@@ -1 +1 @@
-[{"input":"https://test:@test"},{"input":"https://:@test"},{"input":"non-special://test:@test/x"},{"input":"non-special://:@test/x"},{"input":"lolscheme:x x#x x"},{"input":"file://example:1/","failure":true},{"input":"file://example:test/","failure":true},{"input":"file://example%/","failure":true},{"input":"file://[example]/","failure":true},{"input":"http://example.com/././foo"},{"input":"http://example.com/./.foo"},{"input":"http://example.com/foo/."},{"input":"http://example.com/foo/./"},{"input":"http://example.com/foo/bar/.."},{"input":"http://example.com/foo/bar/../"},{"input":"http://example.com/foo/..bar"},{"input":"http://example.com/foo/bar/../ton"},{"input":"http://example.com/foo/bar/../ton/../../a"},{"input":"http://example.com/foo/../../.."},{"input":"http://example.com/foo/../../../ton"},{"input":"http://example.com/foo/%2e"},{"input":"http://example.com/foo/%2e%2"},{"input":"http://example.com/foo/%2e./%2e%2e/.%2e/%2e.bar"},{"input":"http://example.com////../.."},{"input":"http://example.com/foo/bar//../.."},{"input":"http://example.com/foo/bar//.."},{"input":"http://example.com/foo"},{"input":"http://example.com/%20foo"},{"input":"http://example.com/foo%"},{"input":"http://example.com/foo%2"},{"input":"http://example.com/foo%2zbar"},{"input":"http://example.com/foo%2©zbar"},{"input":"http://example.com/foo%41%7a"},{"input":"http://example.com/foo\t‘%91"},{"input":"http://example.com/foo%00%51"},{"input":"http://example.com/(%28:%3A%29)"},{"input":"http://example.com/%3A%3a%3C%3c"},{"input":"http://example.com/foo\tbar"},{"input":"http://example.com\\\\foo\\\\bar"},{"input":"http://example.com/%7Ffp3%3Eju%3Dduvgw%3Dd"},{"input":"http://example.com/@asdf%40"},{"input":"http://example.com/你好你好"},{"input":"http://example.com/‥/foo"},{"input":"http://example.com//foo"},{"input":"http://example.com/‮/foo/‭/bar"},{"input":"http://www.google.com/foo?bar=baz#"},{"input":"http://www.google.com/foo?bar=baz# »"},{"input":"data:test# »"},{"input":"http://www.google.com"},{"input":"http://192.0x00A80001"},{"input":"http://www/foo%2Ehtml"},{"input":"http://www/foo/%2E/html"},{"input":"http://user:pass@/","failure":true},{"input":"http://%25DOMAIN:foobar@foodomain.com/"},{"input":"http:\\\\www.google.com\\foo"},{"input":"http://foo:80/"},{"input":"http://foo:81/"},{"input":"httpa://foo:80/"},{"input":"http://foo:-80/","failure":true},{"input":"https://foo:443/"},{"input":"https://foo:80/"},{"input":"ftp://foo:21/"},{"input":"ftp://foo:80/"},{"input":"gopher://foo:70/"},{"input":"gopher://foo:443/"},{"input":"ws://foo:80/"},{"input":"ws://foo:81/"},{"input":"ws://foo:443/"},{"input":"ws://foo:815/"},{"input":"wss://foo:80/"},{"input":"wss://foo:81/"},{"input":"wss://foo:443/"},{"input":"wss://foo:815/"},{"input":"http:/example.com/"},{"input":"ftp:/example.com/"},{"input":"https:/example.com/"},{"input":"madeupscheme:/example.com/"},{"input":"file:/example.com/"},{"input":"ftps:/example.com/"},{"input":"gopher:/example.com/"},{"input":"ws:/example.com/"},{"input":"wss:/example.com/"},{"input":"data:/example.com/"},{"input":"javascript:/example.com/"},{"input":"mailto:/example.com/"},{"input":"http:example.com/"},{"input":"ftp:example.com/"},{"input":"https:example.com/"},{"input":"madeupscheme:example.com/"},{"input":"ftps:example.com/"},{"input":"gopher:example.com/"},{"input":"ws:example.com/"},{"input":"wss:example.com/"},{"input":"data:example.com/"},{"input":"javascript:example.com/"},{"input":"mailto:example.com/"},{"input":"http:@www.example.com"},{"input":"http:/@www.example.com"},{"input":"http://@www.example.com"},{"input":"http:a:b@www.example.com"},{"input":"http:/a:b@www.example.com"},{"input":"http://a:b@www.example.com"},{"input":"http://@pple.com"},{"input":"http::b@www.example.com"},{"input":"http:/:b@www.example.com"},{"input":"http://:b@www.example.com"},{"input":"http:/:@/www.example.com","failure":true},{"input":"http://user@/www.example.com","failure":true},{"input":"http:@/www.example.com","failure":true},{"input":"http:/@/www.example.com","failure":true},{"input":"http://@/www.example.com","failure":true},{"input":"https:@/www.example.com","failure":true},{"input":"http:a:b@/www.example.com","failure":true},{"input":"http:/a:b@/www.example.com","failure":true},{"input":"http://a:b@/www.example.com","failure":true},{"input":"http::@/www.example.com","failure":true},{"input":"http:a:@www.example.com"},{"input":"http:/a:@www.example.com"},{"input":"http://a:@www.example.com"},{"input":"http://www.@pple.com"},{"input":"http:@:www.example.com","failure":true},{"input":"http:/@:www.example.com","failure":true},{"input":"http://@:www.example.com","failure":true},{"input":"http://:@www.example.com"},{"input":"\u0000\u001b\u0004\u0012 http://example.com/\u001f \r "},{"input":"https://�","failure":true},{"input":"https://%EF%BF%BD","failure":true},{"input":"https://x/�?�#�"},{"input":"http://a.b.c.xn--pokxncvks","failure":true},{"input":"http://10.0.0.xn--pokxncvks","failure":true},{"input":"https://faß.ExAmPlE/"},{"input":"sc://faß.ExAmPlE/"},{"input":"https://x x:12","failure":true},{"input":"http://./"},{"input":"http://../"},{"input":"http://0..0x300/"},{"input":"http://[www.google.com]/","failure":true},{"input":"http://host/?'"},{"input":"notspecial://host/?'"},{"input":"about:/../"},{"input":"data:/../"},{"input":"javascript:/../"},{"input":"mailto:/../"},{"input":"sc://ñ.test/"},{"input":"sc://\u0000/","failure":true},{"input":"sc:// /","failure":true},{"input":"sc://%/"},{"input":"sc://@/","failure":true},{"input":"sc://te@s:t@/","failure":true},{"input":"sc://:/","failure":true},{"input":"sc://:12/","failure":true},{"input":"sc://[/","failure":true},{"input":"sc://\\/","failure":true},{"input":"sc://]/","failure":true},{"input":"sc:\\../"},{"input":"sc::a@example.net"},{"input":"wow:%NBD"},{"input":"wow:%1G"},{"input":"wow:￿"},{"input":"http://example.com/\ud800𐟾\udfff﷐﷏﷯ﷰ￾￿?\ud800𐟾\udfff﷐﷏﷯ﷰ￾￿"},{"input":"http://a<b","failure":true},{"input":"http://a>b","failure":true},{"input":"http://a^b","failure":true},{"input":"non-special://a<b","failure":true},{"input":"non-special://a>b","failure":true},{"input":"non-special://a^b","failure":true},{"input":"foo://ho\u0000st/","failure":true},{"input":"foo://ho|st/","failure":true},{"input":"foo://ho\tst/"},{"input":"foo://ho\nst/"},{"input":"foo://ho\rst/"},{"input":"http://ho%00st/","failure":true},{"input":"http://ho%09st/","failure":true},{"input":"http://ho%0Ast/","failure":true},{"input":"http://ho%0Dst/","failure":true},{"input":"http://ho%20st/","failure":true},{"input":"http://ho%23st/","failure":true},{"input":"http://ho%2Fst/","failure":true},{"input":"http://ho%3Ast/","failure":true},{"input":"http://ho%3Cst/","failure":true},{"input":"http://ho%3Est/","failure":true},{"input":"http://ho%3Fst/","failure":true},{"input":"http://ho%40st/","failure":true},{"input":"http://ho%5Bst/","failure":true},{"input":"http://ho%5Cst/","failure":true},{"input":"http://ho%5Dst/","failure":true},{"input":"http://ho%7Cst/","failure":true},{"input":"http://\u001f!\"$&'()*+,-.;=_`{}~/"},{"input":"sc://\u001f!\"$&'()*+,-.;=_`{}~/"},{"input":"ftp://example.com%80/","failure":true},{"input":"ftp://example.com%A0/","failure":true},{"input":"https://example.com%80/","failure":true},{"input":"https://example.com%A0/","failure":true},{"input":"ftp://%e2%98%83"},{"input":"https://%e2%98%83"},{"input":"http://127.0.0.1:10100/relative_import.html"},{"input":"http://facebook.com/?foo=%7B%22abc%22"},{"input":"https://localhost:3000/jqueryui@1.2.3"},{"input":"h\tt\nt\rp://h\to\ns\rt:9\t0\n0\r0/p\ta\nt\rh?q\tu\ne\rry#f\tr\na\rg"},{"input":"http://foo.bar/baz?qux#foo\bbar"},{"input":"http://foo.bar/baz?qux#foo\"bar"},{"input":"http://foo.bar/baz?qux#foo<bar"},{"input":"http://foo.bar/baz?qux#foo>bar"},{"input":"http://foo.bar/baz?qux#foo`bar"},{"input":"https://0x.0x.0"},{"input":"https://0x100000000/test","failure":true},{"input":"https://256.0.0.1/test","failure":true},{"input":"file:///C%3A/"},{"input":"file:///C%7C/"},{"input":"file://%43%3A","failure":true},{"input":"file://%43%7C","failure":true},{"input":"file://%43|","failure":true},{"input":"file://C%7C","failure":true},{"input":"file://%43%7C/","failure":true},{"input":"https://%43%7C/","failure":true},{"input":"asdf://%43|/","failure":true},{"input":"asdf://%43%7C/"},{"input":"file:\\\\//"},{"input":"file:\\\\\\\\"},{"input":"file:\\\\\\\\?fox"},{"input":"file:\\\\\\\\#guppy"},{"input":"file://spider///"},{"input":"file:\\\\localhost//"},{"input":"file:///localhost//cat"},{"input":"file://\\/localhost//cat"},{"input":"file://localhost//a//../..//"},{"input":"file://example.net/C:/"},{"input":"file://1.2.3.4/C:/"},{"input":"file://[1::8]/C:/"},{"input":"file:/C|/"},{"input":"file://C|/"},{"input":"file:"},{"input":"file:?q=v"},{"input":"file:#frag"},{"input":"file:///Y:"},{"input":"file:///Y:/"},{"input":"file:///./Y"},{"input":"file:///./Y:"},{"input":"\\\\\\.\\Y:","failure":true},{"input":"file:///y:"},{"input":"file:///y:/"},{"input":"file:///./y"},{"input":"file:///./y:"},{"input":"\\\\\\.\\y:","failure":true},{"input":"file://localhost//a//../..//foo"},{"input":"file://localhost////foo"},{"input":"file:////foo"},{"input":"file:.//p"},{"input":"file:/.//p"},{"input":"https://[0::0::0]","failure":true},{"input":"https://[0:.0]","failure":true},{"input":"https://[0:0:]","failure":true},{"input":"https://[0:1:2:3:4:5:6:7.0.0.0.1]","failure":true},{"input":"https://[0:1.00.0.0.0]","failure":true},{"input":"https://[0:1.290.0.0.0]","failure":true},{"input":"https://[0:1.23.23]","failure":true},{"input":"http://?","failure":true},{"input":"http://#","failure":true},{"input":"sc://ñ"},{"input":"sc://ñ?x"},{"input":"sc://ñ#x"},{"input":"sc://?"},{"input":"sc://#"},{"input":"tftp://foobar.com/someconfig;mode=netascii"},{"input":"telnet://user:pass@foobar.com:23/"},{"input":"ut2004://10.10.10.10:7777/Index.ut2"},{"input":"redis://foo:bar@somehost:6379/0?baz=bam&qux=baz"},{"input":"rsync://foo@host:911/sup"},{"input":"git://github.com/foo/bar.git"},{"input":"irc://myserver.com:6999/channel?passwd"},{"input":"dns://fw.example.org:9999/foo.bar.org?type=TXT"},{"input":"ldap://localhost:389/ou=People,o=JNDITutorial"},{"input":"git+https://github.com/foo/bar"},{"input":"urn:ietf:rfc:2648"},{"input":"tag:joe@example.org,2001:foo/bar"},{"input":"non-spec:/.//"},{"input":"non-spec:/..//"},{"input":"non-spec:/a/..//"},{"input":"non-spec:/.//path"},{"input":"non-spec:/..//path"},{"input":"non-spec:/a/..//path"},{"input":"non-special://%E2%80%A0/"},{"input":"non-special://H%4fSt/path"},{"input":"non-special://[1:2:0:0:5:0:0:0]/"},{"input":"non-special://[1:2:0:0:0:0:0:3]/"},{"input":"non-special://[1:2::3]:80/"},{"input":"non-special://[:80/","failure":true},{"input":"blob:https://example.com:443/"},{"input":"blob:d3958f5c-0777-0845-9dcf-2cb28783acaf"},{"input":"http://0177.0.0.0189"},{"input":"http://0x7f.0.0.0x7g"},{"input":"http://0X7F.0.0.0X7G"},{"input":"http://[::127.0.0.0.1]","failure":true},{"input":"http://[0:1:0:1:0:1:0:1]"},{"input":"http://[1:0:1:0:1:0:1:0]"},{"input":"http://example.org/test?\""},{"input":"http://example.org/test?#"},{"input":"http://example.org/test?<"},{"input":"http://example.org/test?>"},{"input":"http://example.org/test?⌣"},{"input":"http://example.org/test?%23%23"},{"input":"http://example.org/test?%GH"},{"input":"http://example.org/test?a#%EF"},{"input":"http://example.org/test?a#%GH"},{"input":"a","failure":true},{"input":"a/","failure":true},{"input":"a//","failure":true},{"input":"http://example.org/test?a#b\u0000c"},{"input":"non-spec://example.org/test?a#b\u0000c"},{"input":"non-spec:/test?a#b\u0000c"},{"input":"file://a­b/p"},{"input":"file://a%C2%ADb/p"},{"input":"file://­/p","failure":true},{"input":"file://%C2%AD/p","failure":true},{"input":"file://xn--/p","failure":true},{"input":"non-special:cannot-be-a-base-url-\u0000\u0001\u001f\u001e~€"},{"input":"https://www.example.com/path{path.html?query'=query#fragment<fragment"},{"input":"foo:// !\"$%&'()*+,-.;<=>@[\\]^_`{|}~@host/"},{"input":"wss:// !\"$%&'()*+,-.;<=>@[]^_`{|}~@host/"},{"input":"foo://joe: !\"$%&'()*+,-.:;<=>@[\\]^_`{|}~@host/"},{"input":"wss://joe: !\"$%&'()*+,-.:;<=>@[]^_`{|}~@host/"},{"input":"foo://!\"$%&'()*+,-.;=_`{}~/"},{"input":"wss://!\"$&'()*+,-.;=_`{}~/"},{"input":"foo://host/ !\"$%&'()*+,-./:;<=>@[\\]^_`{|}~"},{"input":"wss://host/ !\"$%&'()*+,-./:;<=>@[\\]^_`{|}~"},{"input":"foo://host/dir/? !\"$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"wss://host/dir/? !\"$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"foo://host/dir/# !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"wss://host/dir/# !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"}]
\ No newline at end of file
+[{"input":"https://test:@test"},{"input":"https://:@test"},{"input":"non-special://test:@test/x"},{"input":"non-special://:@test/x"},{"input":"lolscheme:x x#x x"},{"input":"file://example:1/","failure":true},{"input":"file://example:test/","failure":true},{"input":"file://example%/","failure":true},{"input":"file://[example]/","failure":true},{"input":"http://example.com/././foo"},{"input":"http://example.com/./.foo"},{"input":"http://example.com/foo/."},{"input":"http://example.com/foo/./"},{"input":"http://example.com/foo/bar/.."},{"input":"http://example.com/foo/bar/../"},{"input":"http://example.com/foo/..bar"},{"input":"http://example.com/foo/bar/../ton"},{"input":"http://example.com/foo/bar/../ton/../../a"},{"input":"http://example.com/foo/../../.."},{"input":"http://example.com/foo/../../../ton"},{"input":"http://example.com/foo/%2e"},{"input":"http://example.com/foo/%2e%2"},{"input":"http://example.com/foo/%2e./%2e%2e/.%2e/%2e.bar"},{"input":"http://example.com////../.."},{"input":"http://example.com/foo/bar//../.."},{"input":"http://example.com/foo/bar//.."},{"input":"http://example.com/foo"},{"input":"http://example.com/%20foo"},{"input":"http://example.com/foo%"},{"input":"http://example.com/foo%2"},{"input":"http://example.com/foo%2zbar"},{"input":"http://example.com/foo%2©zbar"},{"input":"http://example.com/foo%41%7a"},{"input":"http://example.com/foo\t‘%91"},{"input":"http://example.com/foo%00%51"},{"input":"http://example.com/(%28:%3A%29)"},{"input":"http://example.com/%3A%3a%3C%3c"},{"input":"http://example.com/foo\tbar"},{"input":"http://example.com\\\\foo\\\\bar"},{"input":"http://example.com/%7Ffp3%3Eju%3Dduvgw%3Dd"},{"input":"http://example.com/@asdf%40"},{"input":"http://example.com/你好你好"},{"input":"http://example.com/‥/foo"},{"input":"http://example.com//foo"},{"input":"http://example.com/‮/foo/‭/bar"},{"input":"http://www.google.com/foo?bar=baz#"},{"input":"http://www.google.com/foo?bar=baz# »"},{"input":"data:test# »"},{"input":"http://www.google.com"},{"input":"http://192.0x00A80001"},{"input":"http://www/foo%2Ehtml"},{"input":"http://www/foo/%2E/html"},{"input":"http://user:pass@/","failure":true},{"input":"http://%25DOMAIN:foobar@foodomain.com/"},{"input":"http:\\\\www.google.com\\foo"},{"input":"http://foo:80/"},{"input":"http://foo:81/"},{"input":"httpa://foo:80/"},{"input":"http://foo:-80/","failure":true},{"input":"https://foo:443/"},{"input":"https://foo:80/"},{"input":"ftp://foo:21/"},{"input":"ftp://foo:80/"},{"input":"gopher://foo:70/"},{"input":"gopher://foo:443/"},{"input":"ws://foo:80/"},{"input":"ws://foo:81/"},{"input":"ws://foo:443/"},{"input":"ws://foo:815/"},{"input":"wss://foo:80/"},{"input":"wss://foo:81/"},{"input":"wss://foo:443/"},{"input":"wss://foo:815/"},{"input":"http:/example.com/"},{"input":"ftp:/example.com/"},{"input":"https:/example.com/"},{"input":"madeupscheme:/example.com/"},{"input":"file:/example.com/"},{"input":"ftps:/example.com/"},{"input":"gopher:/example.com/"},{"input":"ws:/example.com/"},{"input":"wss:/example.com/"},{"input":"data:/example.com/"},{"input":"javascript:/example.com/"},{"input":"mailto:/example.com/"},{"input":"http:example.com/"},{"input":"ftp:example.com/"},{"input":"https:example.com/"},{"input":"madeupscheme:example.com/"},{"input":"ftps:example.com/"},{"input":"gopher:example.com/"},{"input":"ws:example.com/"},{"input":"wss:example.com/"},{"input":"data:example.com/"},{"input":"javascript:example.com/"},{"input":"mailto:example.com/"},{"input":"http:@www.example.com"},{"input":"http:/@www.example.com"},{"input":"http://@www.example.com"},{"input":"http:a:b@www.example.com"},{"input":"http:/a:b@www.example.com"},{"input":"http://a:b@www.example.com"},{"input":"http://@pple.com"},{"input":"http::b@www.example.com"},{"input":"http:/:b@www.example.com"},{"input":"http://:b@www.example.com"},{"input":"http:/:@/www.example.com","failure":true},{"input":"http://user@/www.example.com","failure":true},{"input":"http:@/www.example.com","failure":true},{"input":"http:/@/www.example.com","failure":true},{"input":"http://@/www.example.com","failure":true},{"input":"https:@/www.example.com","failure":true},{"input":"http:a:b@/www.example.com","failure":true},{"input":"http:/a:b@/www.example.com","failure":true},{"input":"http://a:b@/www.example.com","failure":true},{"input":"http::@/www.example.com","failure":true},{"input":"http:a:@www.example.com"},{"input":"http:/a:@www.example.com"},{"input":"http://a:@www.example.com"},{"input":"http://www.@pple.com"},{"input":"http:@:www.example.com","failure":true},{"input":"http:/@:www.example.com","failure":true},{"input":"http://@:www.example.com","failure":true},{"input":"http://:@www.example.com"},{"input":"\u0000\u001b\u0004\u0012 http://example.com/\u001f \r "},{"input":"https://�","failure":true},{"input":"https://%EF%BF%BD","failure":true},{"input":"https://x/�?�#�"},{"input":"http://a.b.c.xn--pokxncvks","failure":true},{"input":"http://10.0.0.xn--pokxncvks","failure":true},{"input":"https://faß.ExAmPlE/"},{"input":"sc://faß.ExAmPlE/"},{"input":"https://x x:12","failure":true},{"input":"http://./"},{"input":"http://../"},{"input":"http://[www.google.com]/","failure":true},{"input":"http://host/?'"},{"input":"notspecial://host/?'"},{"input":"about:/../"},{"input":"data:/../"},{"input":"javascript:/../"},{"input":"mailto:/../"},{"input":"sc://ñ.test/"},{"input":"sc://\u0000/","failure":true},{"input":"sc:// /","failure":true},{"input":"sc://%/"},{"input":"sc://@/","failure":true},{"input":"sc://te@s:t@/","failure":true},{"input":"sc://:/","failure":true},{"input":"sc://:12/","failure":true},{"input":"sc://[/","failure":true},{"input":"sc://\\/","failure":true},{"input":"sc://]/","failure":true},{"input":"sc:\\../"},{"input":"sc::a@example.net"},{"input":"wow:%NBD"},{"input":"wow:%1G"},{"input":"wow:￿"},{"input":"http://example.com/\ud800𐟾\udfff﷐﷏﷯ﷰ￾￿?\ud800𐟾\udfff﷐﷏﷯ﷰ￾￿"},{"input":"http://a<b","failure":true},{"input":"http://a>b","failure":true},{"input":"http://a^b","failure":true},{"input":"non-special://a<b","failure":true},{"input":"non-special://a>b","failure":true},{"input":"non-special://a^b","failure":true},{"input":"foo://ho\u0000st/","failure":true},{"input":"foo://ho|st/","failure":true},{"input":"foo://ho\tst/"},{"input":"foo://ho\nst/"},{"input":"foo://ho\rst/"},{"input":"http://ho%00st/","failure":true},{"input":"http://ho%09st/","failure":true},{"input":"http://ho%0Ast/","failure":true},{"input":"http://ho%0Dst/","failure":true},{"input":"http://ho%20st/","failure":true},{"input":"http://ho%23st/","failure":true},{"input":"http://ho%2Fst/","failure":true},{"input":"http://ho%3Ast/","failure":true},{"input":"http://ho%3Cst/","failure":true},{"input":"http://ho%3Est/","failure":true},{"input":"http://ho%3Fst/","failure":true},{"input":"http://ho%40st/","failure":true},{"input":"http://ho%5Bst/","failure":true},{"input":"http://ho%5Cst/","failure":true},{"input":"http://ho%5Dst/","failure":true},{"input":"http://ho%7Cst/","failure":true},{"input":"sc://\u001f!\"$&'()*+,-.;=_`{}~/"},{"input":"ftp://example.com%80/","failure":true},{"input":"ftp://example.com%A0/","failure":true},{"input":"https://example.com%80/","failure":true},{"input":"https://example.com%A0/","failure":true},{"input":"ftp://%e2%98%83"},{"input":"https://%e2%98%83"},{"input":"http://127.0.0.1:10100/relative_import.html"},{"input":"http://facebook.com/?foo=%7B%22abc%22"},{"input":"https://localhost:3000/jqueryui@1.2.3"},{"input":"h\tt\nt\rp://h\to\ns\rt:9\t0\n0\r0/p\ta\nt\rh?q\tu\ne\rry#f\tr\na\rg"},{"input":"http://foo.bar/baz?qux#foo\bbar"},{"input":"http://foo.bar/baz?qux#foo\"bar"},{"input":"http://foo.bar/baz?qux#foo<bar"},{"input":"http://foo.bar/baz?qux#foo>bar"},{"input":"http://foo.bar/baz?qux#foo`bar"},{"input":"https://0x.0x.0"},{"input":"https://0x100000000/test","failure":true},{"input":"https://256.0.0.1/test","failure":true},{"input":"file:///C%3A/"},{"input":"file:///C%7C/"},{"input":"file://%43%3A","failure":true},{"input":"file://%43%7C","failure":true},{"input":"file://%43|","failure":true},{"input":"file://C%7C","failure":true},{"input":"file://%43%7C/","failure":true},{"input":"https://%43%7C/","failure":true},{"input":"asdf://%43|/","failure":true},{"input":"asdf://%43%7C/"},{"input":"file:\\\\//"},{"input":"file:\\\\\\\\"},{"input":"file:\\\\\\\\?fox"},{"input":"file:\\\\\\\\#guppy"},{"input":"file://spider///"},{"input":"file:\\\\localhost//"},{"input":"file:///localhost//cat"},{"input":"file://\\/localhost//cat"},{"input":"file://localhost//a//../..//"},{"input":"file://example.net/C:/"},{"input":"file://1.2.3.4/C:/"},{"input":"file://[1::8]/C:/"},{"input":"file:/C|/"},{"input":"file://C|/"},{"input":"file:"},{"input":"file:?q=v"},{"input":"file:#frag"},{"input":"file:///Y:"},{"input":"file:///Y:/"},{"input":"file:///./Y"},{"input":"file:///./Y:"},{"input":"\\\\\\.\\Y:","failure":true},{"input":"file:///y:"},{"input":"file:///y:/"},{"input":"file:///./y"},{"input":"file:///./y:"},{"input":"\\\\\\.\\y:","failure":true},{"input":"file://localhost//a//../..//foo"},{"input":"file://localhost////foo"},{"input":"file:////foo"},{"input":"file:.//p"},{"input":"file:/.//p"},{"input":"https://[0::0::0]","failure":true},{"input":"https://[0:.0]","failure":true},{"input":"https://[0:0:]","failure":true},{"input":"https://[0:1:2:3:4:5:6:7.0.0.0.1]","failure":true},{"input":"https://[0:1.00.0.0.0]","failure":true},{"input":"https://[0:1.290.0.0.0]","failure":true},{"input":"https://[0:1.23.23]","failure":true},{"input":"http://?","failure":true},{"input":"http://#","failure":true},{"input":"sc://ñ"},{"input":"sc://ñ?x"},{"input":"sc://ñ#x"},{"input":"sc://?"},{"input":"sc://#"},{"input":"tftp://foobar.com/someconfig;mode=netascii"},{"input":"telnet://user:pass@foobar.com:23/"},{"input":"ut2004://10.10.10.10:7777/Index.ut2"},{"input":"redis://foo:bar@somehost:6379/0?baz=bam&qux=baz"},{"input":"rsync://foo@host:911/sup"},{"input":"git://github.com/foo/bar.git"},{"input":"irc://myserver.com:6999/channel?passwd"},{"input":"dns://fw.example.org:9999/foo.bar.org?type=TXT"},{"input":"ldap://localhost:389/ou=People,o=JNDITutorial"},{"input":"git+https://github.com/foo/bar"},{"input":"urn:ietf:rfc:2648"},{"input":"tag:joe@example.org,2001:foo/bar"},{"input":"non-spec:/.//"},{"input":"non-spec:/..//"},{"input":"non-spec:/a/..//"},{"input":"non-spec:/.//path"},{"input":"non-spec:/..//path"},{"input":"non-spec:/a/..//path"},{"input":"non-special://%E2%80%A0/"},{"input":"non-special://H%4fSt/path"},{"input":"non-special://[1:2:0:0:5:0:0:0]/"},{"input":"non-special://[1:2:0:0:0:0:0:3]/"},{"input":"non-special://[1:2::3]:80/"},{"input":"non-special://[:80/","failure":true},{"input":"blob:https://example.com:443/"},{"input":"blob:d3958f5c-0777-0845-9dcf-2cb28783acaf"},{"input":"http://0x7f.0.0.0x7g"},{"input":"http://0X7F.0.0.0X7G"},{"input":"http://[::127.0.0.0.1]","failure":true},{"input":"http://[0:1:0:1:0:1:0:1]"},{"input":"http://[1:0:1:0:1:0:1:0]"},{"input":"http://example.org/test?\""},{"input":"http://example.org/test?#"},{"input":"http://example.org/test?<"},{"input":"http://example.org/test?>"},{"input":"http://example.org/test?⌣"},{"input":"http://example.org/test?%23%23"},{"input":"http://example.org/test?%GH"},{"input":"http://example.org/test?a#%EF"},{"input":"http://example.org/test?a#%GH"},{"input":"a","failure":true},{"input":"a/","failure":true},{"input":"a//","failure":true},{"input":"http://example.org/test?a#b\u0000c"},{"input":"non-spec://example.org/test?a#b\u0000c"},{"input":"non-spec:/test?a#b\u0000c"},{"input":"file://a­b/p"},{"input":"file://a%C2%ADb/p"},{"input":"file://­/p","failure":true},{"input":"file://%C2%AD/p","failure":true},{"input":"file://xn--/p","failure":true},{"input":"non-special:cannot-be-a-base-url-\u0000\u0001\u001f\u001e~€"},{"input":"https://www.example.com/path{path.html?query'=query#fragment<fragment"},{"input":"foo:// !\"$%&'()*+,-.;<=>@[\\]^_`{|}~@host/"},{"input":"wss:// !\"$%&'()*+,-.;<=>@[]^_`{|}~@host/"},{"input":"foo://joe: !\"$%&'()*+,-.:;<=>@[\\]^_`{|}~@host/"},{"input":"wss://joe: !\"$%&'()*+,-.:;<=>@[]^_`{|}~@host/"},{"input":"foo://!\"$%&'()*+,-.;=_`{}~/"},{"input":"wss://!\"$&'()*+,-.;=_`{}~/"},{"input":"foo://host/ !\"$%&'()*+,-./:;<=>@[\\]^_`{|}~"},{"input":"wss://host/ !\"$%&'()*+,-./:;<=>@[\\]^_`{|}~"},{"input":"foo://host/dir/? !\"$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"wss://host/dir/? !\"$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"foo://host/dir/# !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"},{"input":"wss://host/dir/# !\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"}]
\ No newline at end of file
diff --git a/packages/url/src/test/index.js b/packages/url/src/test/index.js
index 19a0bf161c34b8..4fc3d5e2970d67 100644
--- a/packages/url/src/test/index.js
+++ b/packages/url/src/test/index.js
@@ -2,30 +2,32 @@
  * Internal dependencies
  */
 import {
-	isURL,
-	isEmail,
-	getProtocol,
-	isValidProtocol,
-	getAuthority,
-	isValidAuthority,
-	getPath,
-	isValidPath,
-	getQueryString,
+	addQueryArgs,
 	buildQueryString,
-	isValidQueryString,
+	cleanForSlug,
+	filterURLForDisplay,
+	getAuthority,
+	getFilename,
 	getFragment,
-	isValidFragment,
-	addQueryArgs,
+	getPath,
+	getProtocol,
 	getQueryArg,
+	getQueryArgs,
+	getQueryString,
 	hasQueryArg,
-	removeQueryArgs,
+	isEmail,
+	isURL,
+	isPhoneNumber,
+	isValidAuthority,
+	isValidFragment,
+	isValidPath,
+	isValidProtocol,
+	isValidQueryString,
+	normalizePath,
 	prependHTTP,
+	prependHTTPS,
+	removeQueryArgs,
 	safeDecodeURI,
-	filterURLForDisplay,
-	cleanForSlug,
-	getQueryArgs,
-	getFilename,
-	normalizePath,
 } from '../';
 import wptData from './fixtures/wpt-data';
 
@@ -72,6 +74,52 @@ describe( 'isEmail', () => {
 	);
 } );
 
+describe( 'isPhoneNumber', () => {
+	it.each( [
+		'+1 (555) 123-4567',
+		'(555) 123-4567',
+		'555-123-4567',
+		'5551234567',
+		'+91 987 654 3210',
+		'123-456-7890',
+		'(123) 456-7890',
+		'123 456 7890',
+		'123.456.7890',
+		'+1 123 456 7890',
+		'1234567890',
+		'+44 791 112 3456',
+		'(123) 4567',
+		'+1 (123) 45678901',
+		'12-34-56',
+		'123456789012345',
+		'+12 3456789012345',
+		'tel:+1-123-456-7890',
+	] )(
+		'returns true when given things that look like a phone number: %s',
+		( phoneNumber ) => {
+			expect( isPhoneNumber( phoneNumber ) ).toBe( true );
+		}
+	);
+
+	it.each( [
+		'not a phone number',
+		'123',
+		'1234',
+		'12345',
+		'+91 123',
+		'abc-def-ghij',
+		'a123456789b',
+		'12-34-5',
+		'tel:911',
+		'tel:12345',
+	] )(
+		"returns false when given things that don't look like a phone number: %s",
+		( phoneNumber ) => {
+			expect( isPhoneNumber( phoneNumber ) ).toBe( false );
+		}
+	);
+} );
+
 describe( 'getProtocol', () => {
 	it( 'returns the protocol part of a URL', () => {
 		expect(
@@ -253,23 +301,20 @@ describe( 'isValidPath', () => {
 } );
 
 describe( 'getFilename', () => {
-	it( 'returns the filename part of the URL', () => {
-		expect( getFilename( 'https://wordpress.org/image.jpg' ) ).toBe(
-			'image.jpg'
-		);
-		expect(
-			getFilename( 'https://wordpress.org/image.jpg?query=test' )
-		).toBe( 'image.jpg' );
-		expect( getFilename( 'https://wordpress.org/image.jpg#anchor' ) ).toBe(
-			'image.jpg'
-		);
-		expect(
-			getFilename( 'http://localhost:8080/a/path/to/an/image.jpg' )
-		).toBe( 'image.jpg' );
-		expect( getFilename( '/path/to/an/image.jpg' ) ).toBe( 'image.jpg' );
-		expect( getFilename( 'path/to/an/image.jpg' ) ).toBe( 'image.jpg' );
-		expect( getFilename( '/image.jpg' ) ).toBe( 'image.jpg' );
-		expect( getFilename( 'image.jpg' ) ).toBe( 'image.jpg' );
+	it.each( [
+		[ 'https://wordpress.org/image.jpg', 'image.jpg' ],
+		[ 'https://wordpress.org/image.jpg?query=test', 'image.jpg' ],
+		[ 'https://wordpress.org/image.jpg#anchor', 'image.jpg' ],
+		[ 'http://localhost:8080/a/path/to/an/image.jpg', 'image.jpg' ],
+		[ '/path/to/an/image.jpg', 'image.jpg' ],
+		[ 'path/to/an/image.jpg', 'image.jpg' ],
+		[ '/image.jpg', 'image.jpg' ],
+		[ 'https://wordpress.org/file.pdf', 'file.pdf' ],
+		[ 'https://wordpress.org/image.webp?query=test', 'image.webp' ],
+		[ 'https://wordpress.org/video.mov#anchor', 'video.mov' ],
+		[ 'http://localhost:8080/a/path/to/audio.mp3', 'audio.mp3' ],
+	] )( 'returns the filename part of the URL: %s', ( url, filename ) => {
+		expect( getFilename( url ) ).toBe( filename );
 	} );
 
 	it( 'returns undefined when the provided value does not contain a filename', () => {
@@ -285,6 +330,8 @@ describe( 'getFilename', () => {
 		);
 		expect( getFilename( 'a/path/' ) ).toBe( undefined );
 		expect( getFilename( '/' ) ).toBe( undefined );
+		expect( getFilename( undefined ) ).toBe( undefined );
+		expect( getFilename( null ) ).toBe( undefined );
 	} );
 } );
 
@@ -723,6 +770,16 @@ describe( 'getQueryArgs', () => {
 				)
 			).toEqual( data );
 		} );
+
+		it( 'should not blow up on malformed params', () => {
+			const url = 'https://andalouses.example/beach?foo=bar&baz=%E0%A4%A';
+
+			expect( () => getQueryArgs( url ) ).not.toThrow();
+			expect( getQueryArgs( url ) ).toEqual( {
+				baz: '%E0%A4%A',
+				foo: 'bar',
+			} );
+		} );
 	} );
 } );
 
@@ -880,6 +937,92 @@ describe( 'prependHTTP', () => {
 	} );
 } );
 
+describe( 'prependHTTPS', () => {
+	it( 'should prepend https to a domain', () => {
+		const url = 'wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( 'https://' + url );
+	} );
+
+	it( 'should not prepend https to an email', () => {
+		const url = 'foo@wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to an absolute URL', () => {
+		const url = '/wordpress';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to a relative URL', () => {
+		const url = './wordpress';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to an anchor URL', () => {
+		const url = '#wordpress';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to a URL that already has https', () => {
+		const url = 'https://wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to a URL that already has http', () => {
+		const url = 'http://wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to a URL that already has ftp', () => {
+		const url = 'ftp://wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should not prepend https to a URL that already has mailto', () => {
+		const url = 'mailto:foo@wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( url );
+	} );
+
+	it( 'should remove leading whitespace before prepending HTTPs', () => {
+		const url = ' wordpress.org';
+
+		expect( prependHTTPS( url ) ).toBe( 'https://wordpress.org' );
+	} );
+
+	it( 'should not have trailing whitespaces', () => {
+		const url = 'wordpress.org ';
+
+		expect( prependHTTPS( url ) ).toBe( 'https://wordpress.org' );
+	} );
+} );
+
+it( 'should prepend https to a domain with an anchor', () => {
+	const url = 'wordpress.org#something';
+
+	expect( prependHTTPS( url ) ).toBe( 'https://' + url );
+} );
+
+it( 'should prepend https to a domain with path', () => {
+	const url = 'wordpress.org/some/thing';
+
+	expect( prependHTTPS( url ) ).toBe( 'https://' + url );
+} );
+
+it( 'should prepend https to a domain with query arguments', () => {
+	const url = 'wordpress.org?foo=bar';
+
+	expect( prependHTTPS( url ) ).toBe( 'https://' + url );
+} );
+
 describe( 'safeDecodeURI', () => {
 	it( 'should decode URI if formed well', () => {
 		const encoded = 'https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B';
@@ -896,11 +1039,23 @@ describe( 'safeDecodeURI', () => {
 } );
 
 describe( 'filterURLForDisplay', () => {
+	it( 'should return an empty string if the url is empty or falsy', () => {
+		let url = filterURLForDisplay( '' );
+		expect( url ).toBe( '' );
+		url = filterURLForDisplay( null );
+		expect( url ).toBe( '' );
+	} );
 	it( 'should remove protocol', () => {
 		let url = filterURLForDisplay( 'http://wordpress.org' );
 		expect( url ).toBe( 'wordpress.org' );
 		url = filterURLForDisplay( 'https://wordpress.org' );
 		expect( url ).toBe( 'wordpress.org' );
+		url = filterURLForDisplay( 'file:///folder/file.txt' );
+		expect( url ).toBe( '/folder/file.txt' );
+		url = filterURLForDisplay( 'tel:0123456789' );
+		expect( url ).toBe( '0123456789' );
+		url = filterURLForDisplay( 'blob:data' );
+		expect( url ).toBe( 'data' );
 	} );
 	it( 'should remove www subdomain', () => {
 		const url = filterURLForDisplay( 'http://www.wordpress.org' );
diff --git a/packages/url/tsconfig.json b/packages/url/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/url/tsconfig.json
+++ b/packages/url/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/viewport/.npmrc b/packages/viewport/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/viewport/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 6971ca44324725..faf1bd4b437f0d 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,114 @@
 
 ## Unreleased
 
+## 6.13.0 (2024-11-27)
+
+## 6.12.0 (2024-11-16)
+
+## 6.11.0 (2024-10-30)
+
+## 6.10.0 (2024-10-16)
+
+## 6.9.0 (2024-10-03)
+
+## 6.8.0 (2024-09-19)
+
+## 6.7.0 (2024-09-05)
+
+## 6.6.0 (2024-08-21)
+
+## 6.5.0 (2024-08-07)
+
+## 6.4.0 (2024-07-24)
+
+## 6.3.0 (2024-07-10)
+
+## 6.2.0 (2024-06-26)
+
+## 6.1.0 (2024-06-15)
+
+## 6.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 5.35.0 (2024-05-16)
+
+## 5.34.0 (2024-05-02)
+
+## 5.33.0 (2024-04-19)
+
+## 5.32.0 (2024-04-03)
+
+## 5.31.0 (2024-03-21)
+
+## 5.30.0 (2024-03-06)
+
+## 5.29.0 (2024-02-21)
+
+## 5.28.0 (2024-02-09)
+
+## 5.27.0 (2024-01-24)
+
+## 5.26.0 (2024-01-10)
+
+## 5.25.0 (2023-12-13)
+
+## 5.24.0 (2023-11-29)
+
+## 5.23.0 (2023-11-16)
+
+## 5.22.0 (2023-11-02)
+
+## 5.21.0 (2023-10-18)
+
+## 5.20.0 (2023-10-05)
+
+## 5.19.0 (2023-09-20)
+
+## 5.18.0 (2023-08-31)
+
+## 5.17.0 (2023-08-16)
+
+## 5.16.0 (2023-08-10)
+
+## 5.15.0 (2023-07-20)
+
+## 5.14.0 (2023-07-05)
+
+## 5.13.0 (2023-06-23)
+
+## 5.12.0 (2023-06-07)
+
+## 5.11.0 (2023-05-24)
+
+## 5.10.0 (2023-05-10)
+
+## 5.9.0 (2023-04-26)
+
+## 5.8.0 (2023-04-12)
+
+## 5.7.0 (2023-03-29)
+
+## 5.6.0 (2023-03-15)
+
+## 5.5.0 (2023-03-01)
+
+## 5.4.0 (2023-02-15)
+
+## 5.3.0 (2023-02-01)
+
+## 5.2.0 (2023-01-11)
+
+## 5.1.0 (2023-01-02)
+
+## 5.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 4.20.0 (2022-11-16)
 
 ## 4.19.0 (2022-11-02)
@@ -44,7 +152,7 @@
 
 ## 4.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
@@ -63,13 +171,13 @@
 
 ## 2.25.0 (2020-12-17)
 
-### New Feature
+### New Features
 
 -   Added a store definition `store` for the viewport namespace to use with `@wordpress/data` API ([#26655](https://github.com/WordPress/gutenberg/pull/26655)).
 
 ## 2.1.0 (2019-01-03)
 
-### Improvements
+### Enhancements
 
 -   The initial viewport state is assigned synchronously, rather than on the next process tick. This should have an impact of fewer callbacks made to data subscribers.
 
@@ -93,6 +201,6 @@
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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/viewport/README.md b/packages/viewport/README.md
index 6a756aab21abe6..8484e667e4a020 100644
--- a/packages/viewport/README.md
+++ b/packages/viewport/README.md
@@ -57,8 +57,7 @@ This package provides a set of HOCs to author components whose behavior should v
 
 #### ifViewportMatches
 
-Higher-order component creator, creating a new component which renders if
-the viewport query is satisfied.
+Higher-order component creator, creating a new component which renders if the viewport query is satisfied.
 
 _Related_
 
@@ -96,9 +95,7 @@ _Type_
 
 #### withViewportMatch
 
-Higher-order component creator, creating a new component which renders with
-the given prop names, where the value passed to the underlying component is
-the result of the query assigned as the object's value.
+Higher-order component creator, creating a new component which renders with the given prop names, where the value passed to the underlying component is the result of the query assigned as the object's value.
 
 _Related_
 
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index d094a2634d334c..a3d15a587645c9 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "4.20.0",
+	"version": "6.13.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,18 +19,21 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/data": "file:../data"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0"
+		"react": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/a11y/.npmrc b/packages/vips/.npmrc
similarity index 100%
rename from packages/a11y/.npmrc
rename to packages/vips/.npmrc
diff --git a/packages/vips/CHANGELOG.md b/packages/vips/CHANGELOG.md
new file mode 100644
index 00000000000000..691cb6760320f4
--- /dev/null
+++ b/packages/vips/CHANGELOG.md
@@ -0,0 +1,7 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+### New Features
+
+-   Initial public release.
diff --git a/packages/vips/README.md b/packages/vips/README.md
new file mode 100644
index 00000000000000..fe367e3bb6490c
--- /dev/null
+++ b/packages/vips/README.md
@@ -0,0 +1,98 @@
+# `@wordpress/vips`
+
+Helper package to interact with [`wasm-vips`](https://github.com/kleisauke/wasm-vips).
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/vips --save
+```
+
+## API Reference
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### cancelOperations
+
+Cancels all ongoing image operations for a given item ID.
+
+The onProgress callbacks check for an IDs existence in this list, killing the process if it's absent.
+
+_Parameters_
+
+-   _id_ `ItemId`: Item ID.
+
+_Returns_
+
+-   boolean Whether any operation was cancelled.
+
+### compressImage
+
+Compresses an existing image using vips.
+
+_Parameters_
+
+-   _id_ `ItemId`: Item ID.
+-   _buffer_ `ArrayBuffer`: Original file buffer.
+-   _type_ `string`: Mime type.
+-   _quality_ Desired quality.
+-   _interlaced_ Whether to use interlaced/progressive mode. Only used if the outputType supports it.
+
+_Returns_
+
+-   `Promise< ArrayBuffer | ArrayBufferLike >`: Compressed file data.
+
+### convertImageFormat
+
+Converts an image to a different format using vips.
+
+_Parameters_
+
+-   _id_ `ItemId`: Item ID.
+-   _buffer_ `ArrayBuffer`: Original file buffer.
+-   _inputType_ `string`: Input mime type.
+-   _outputType_ `string`: Output mime type.
+-   _quality_ Desired quality.
+-   _interlaced_ Whether to use interlaced/progressive mode. Only used if the outputType supports it.
+
+### hasTransparency
+
+Determines whether an image has an alpha channel.
+
+_Parameters_
+
+-   _buffer_ `ArrayBuffer`: Original file object.
+
+_Returns_
+
+-   `Promise< boolean >`: Whether the image has an alpha channel.
+
+### resizeImage
+
+Resizes an image using vips.
+
+_Parameters_
+
+-   _id_ `ItemId`: Item ID.
+-   _buffer_ `ArrayBuffer`: Original file buffer.
+-   _type_ `string`: Mime type.
+-   _resize_ `ImageSizeCrop`: Resize options.
+-   _smartCrop_ Whether to use smart cropping (i.e. saliency-aware).
+
+_Returns_
+
+-   `Promise< { buffer: ArrayBuffer | ArrayBufferLike; width: number; height: number; originalWidth: number; originalHeight: number; } >`: Processed file data plus the old and new dimensions.
+
+### setLocation
+
+Dynamically sets the location / public path to use for loading the WASM files.
+
+This is required when loading this module in an inline worker, where globals such as **webpack_public_path** are not available.
+
+_Parameters_
+
+-   _newLocation_ `string`: Location, typically a base URL such as "<https://example.com/path/to/js/...">.
+
+<!-- END TOKEN(Autogenerated API docs) -->
diff --git a/packages/vips/package.json b/packages/vips/package.json
new file mode 100644
index 00000000000000..69912b2eaed71e
--- /dev/null
+++ b/packages/vips/package.json
@@ -0,0 +1,36 @@
+{
+	"name": "@wordpress/vips",
+	"version": "1.0.0-prerelease",
+	"private": true,
+	"description": "Utils for working with libvips.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"media",
+		"libvips"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/vips/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/vips"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"wpScript": true,
+	"types": "build-types",
+	"dependencies": {
+		"wasm-vips": "^0.0.10"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/vips/src/index.ts b/packages/vips/src/index.ts
new file mode 100644
index 00000000000000..dcd1858f0e57fb
--- /dev/null
+++ b/packages/vips/src/index.ts
@@ -0,0 +1,366 @@
+/**
+ * External dependencies
+ */
+import Vips from 'wasm-vips';
+
+// @ts-expect-error
+// eslint-disable-next-line import/no-unresolved
+import VipsModule from 'wasm-vips/vips.wasm';
+
+// @ts-expect-error
+// eslint-disable-next-line import/no-unresolved
+import VipsHeifModule from 'wasm-vips/vips-heif.wasm';
+
+// @ts-expect-error
+// eslint-disable-next-line import/no-unresolved
+import VipsJxlModule from 'wasm-vips/vips-jxl.wasm';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	ItemId,
+	ImageSizeCrop,
+	LoadOptions,
+	SaveOptions,
+	ThumbnailOptions,
+} from './types';
+import { supportsAnimation, supportsInterlace, supportsQuality } from './utils';
+
+interface EmscriptenModule {
+	setAutoDeleteLater: ( autoDelete: boolean ) => void;
+	setDelayFunction: ( fn: ( fn: () => void ) => void ) => void;
+}
+
+let location = '';
+
+/**
+ * Dynamically sets the location / public path to use for loading the WASM files.
+ *
+ * This is required when loading this module in an inline worker,
+ * where globals such as __webpack_public_path__ are not available.
+ *
+ * @param newLocation Location, typically a base URL such as "https://example.com/path/to/js/...".
+ */
+export function setLocation( newLocation: string ) {
+	location = newLocation;
+}
+
+let cleanup: () => void;
+
+let vipsInstance: typeof Vips;
+
+/**
+ * Instantiates and returns a new vips instance.
+ *
+ * Reuses any existing instance.
+ */
+async function getVips(): Promise< typeof Vips > {
+	if ( vipsInstance ) {
+		return vipsInstance;
+	}
+
+	vipsInstance = await Vips( {
+		locateFile: ( fileName: string ) => {
+			if ( fileName.endsWith( 'vips.wasm' ) ) {
+				fileName = VipsModule;
+			} else if ( fileName.endsWith( 'vips-heif.wasm' ) ) {
+				fileName = VipsHeifModule;
+			} else if ( fileName.endsWith( 'vips-jxl.wasm' ) ) {
+				fileName = VipsJxlModule;
+			}
+
+			return location + fileName;
+		},
+		preRun: ( module: EmscriptenModule ) => {
+			// https://github.com/kleisauke/wasm-vips/issues/13#issuecomment-1073246828
+			module.setAutoDeleteLater( true );
+			module.setDelayFunction( ( fn: () => void ) => {
+				cleanup = fn;
+			} );
+		},
+	} );
+
+	return vipsInstance;
+}
+
+/**
+ * Holds a list of ongoing operations for a given ID.
+ *
+ * This way, operations can be cancelled mid-progress.
+ */
+const inProgressOperations = new Set< ItemId >();
+
+/**
+ * Cancels all ongoing image operations for a given item ID.
+ *
+ * The onProgress callbacks check for an IDs existence in this list,
+ * killing the process if it's absent.
+ *
+ * @param id Item ID.
+ * @return boolean Whether any operation was cancelled.
+ */
+export async function cancelOperations( id: ItemId ) {
+	return inProgressOperations.delete( id );
+}
+
+/**
+ * Converts an image to a different format using vips.
+ *
+ * @param id         Item ID.
+ * @param buffer     Original file buffer.
+ * @param inputType  Input mime type.
+ * @param outputType Output mime type.
+ * @param quality    Desired quality.
+ * @param interlaced Whether to use interlaced/progressive mode.
+ *                   Only used if the outputType supports it.
+ */
+export async function convertImageFormat(
+	id: ItemId,
+	buffer: ArrayBuffer,
+	inputType: string,
+	outputType: string,
+	quality = 0.82,
+	interlaced = false
+): Promise< ArrayBuffer | ArrayBufferLike > {
+	const ext = outputType.split( '/' )[ 1 ];
+
+	inProgressOperations.add( id );
+
+	let strOptions = '';
+	const loadOptions: LoadOptions< typeof inputType > = {};
+
+	// To ensure all frames are loaded in case the image is animated.
+	if ( supportsAnimation( inputType ) ) {
+		strOptions = '[n=-1]';
+		( loadOptions as LoadOptions< typeof inputType > ).n = -1;
+	}
+
+	const vips = await getVips();
+	const image = vips.Image.newFromBuffer( buffer, strOptions, loadOptions );
+
+	// TODO: Report progress, see https://github.com/swissspidy/media-experiments/issues/327.
+	image.onProgress = () => {
+		if ( ! inProgressOperations.has( id ) ) {
+			image.kill = true;
+		}
+	};
+
+	const saveOptions: SaveOptions< typeof outputType > = {};
+
+	if ( supportsQuality( outputType ) ) {
+		saveOptions.Q = quality * 100;
+	}
+
+	if ( interlaced && supportsInterlace( outputType ) ) {
+		saveOptions.interlace = interlaced;
+	}
+
+	// See https://github.com/swissspidy/media-experiments/issues/324.
+	if ( 'image/avif' === outputType ) {
+		saveOptions.effort = 2;
+	}
+
+	const outBuffer = image.writeToBuffer( `.${ ext }`, saveOptions );
+	const result = outBuffer.buffer;
+
+	cleanup?.();
+
+	return result;
+}
+
+/**
+ * Compresses an existing image using vips.
+ *
+ * @param id         Item ID.
+ * @param buffer     Original file buffer.
+ * @param type       Mime type.
+ * @param quality    Desired quality.
+ * @param interlaced Whether to use interlaced/progressive mode.
+ *                   Only used if the outputType supports it.
+ * @return Compressed file data.
+ */
+export async function compressImage(
+	id: ItemId,
+	buffer: ArrayBuffer,
+	type: string,
+	quality = 0.82,
+	interlaced = false
+): Promise< ArrayBuffer | ArrayBufferLike > {
+	return convertImageFormat( id, buffer, type, type, quality, interlaced );
+}
+
+/**
+ * Resizes an image using vips.
+ *
+ * @param id        Item ID.
+ * @param buffer    Original file buffer.
+ * @param type      Mime type.
+ * @param resize    Resize options.
+ * @param smartCrop Whether to use smart cropping (i.e. saliency-aware).
+ * @return Processed file data plus the old and new dimensions.
+ */
+export async function resizeImage(
+	id: ItemId,
+	buffer: ArrayBuffer,
+	type: string,
+	resize: ImageSizeCrop,
+	smartCrop = false
+): Promise< {
+	buffer: ArrayBuffer | ArrayBufferLike;
+	width: number;
+	height: number;
+	originalWidth: number;
+	originalHeight: number;
+} > {
+	const ext = type.split( '/' )[ 1 ];
+
+	inProgressOperations.add( id );
+
+	const vips = await getVips();
+	const thumbnailOptions: ThumbnailOptions = {
+		size: 'down',
+	};
+
+	let strOptions = '';
+	const loadOptions: LoadOptions< typeof type > = {};
+
+	// To ensure all frames are loaded in case the image is animated.
+	// But only if we're not cropping.
+	if ( supportsAnimation( type ) && ! resize.crop ) {
+		strOptions = '[n=-1]';
+		thumbnailOptions.option_string = strOptions;
+		( loadOptions as LoadOptions< typeof type > ).n = -1;
+	}
+
+	// TODO: Report progress, see https://github.com/swissspidy/media-experiments/issues/327.
+	const onProgress = () => {
+		if ( ! inProgressOperations.has( id ) ) {
+			image.kill = true;
+		}
+	};
+
+	let image = vips.Image.newFromBuffer( buffer, strOptions, loadOptions );
+
+	image.onProgress = onProgress;
+
+	const { width, pageHeight } = image;
+
+	// If resize.height is zero.
+	resize.height = resize.height || ( pageHeight / width ) * resize.width;
+
+	let resizeWidth = resize.width;
+	thumbnailOptions.height = resize.height;
+
+	if ( ! resize.crop ) {
+		image = vips.Image.thumbnailBuffer(
+			buffer,
+			resizeWidth,
+			thumbnailOptions
+		);
+
+		image.onProgress = onProgress;
+	} else if ( true === resize.crop ) {
+		thumbnailOptions.crop = smartCrop ? 'attention' : 'centre';
+
+		image = vips.Image.thumbnailBuffer(
+			buffer,
+			resizeWidth,
+			thumbnailOptions
+		);
+
+		image.onProgress = onProgress;
+	} else {
+		// First resize, then do the cropping.
+		// This allows operating on the second bitmap with the correct dimensions.
+
+		if ( width < pageHeight ) {
+			resizeWidth =
+				resize.width >= resize.height
+					? resize.width
+					: ( width / pageHeight ) * resize.height;
+			thumbnailOptions.height =
+				resize.width >= resize.height
+					? ( pageHeight / width ) * resizeWidth
+					: resize.height;
+		} else {
+			resizeWidth =
+				resize.width >= resize.height
+					? ( width / pageHeight ) * resize.height
+					: resize.width;
+			thumbnailOptions.height =
+				resize.width >= resize.height
+					? resize.height
+					: ( pageHeight / width ) * resizeWidth;
+		}
+
+		image = vips.Image.thumbnailBuffer(
+			buffer,
+			resizeWidth,
+			thumbnailOptions
+		);
+
+		image.onProgress = onProgress;
+
+		let left = 0;
+		if ( 'center' === resize.crop[ 0 ] ) {
+			left = ( image.width - resize.width ) / 2;
+		} else if ( 'right' === resize.crop[ 0 ] ) {
+			left = image.width - resize.width;
+		}
+
+		let top = 0;
+		if ( 'center' === resize.crop[ 1 ] ) {
+			top = ( image.height - resize.height ) / 2;
+		} else if ( 'bottom' === resize.crop[ 1 ] ) {
+			top = image.height - resize.height;
+		}
+
+		// Address rounding errors where `left` or `top` become negative integers
+		// and `resize.width` / `resize.height` are bigger than the actual dimensions.
+		// Downside: one side could be 1px smaller than the requested size.
+		left = Math.max( 0, left );
+		top = Math.max( 0, top );
+		resize.width = Math.min( image.width, resize.width );
+		resize.height = Math.min( image.height, resize.height );
+
+		image = image.crop( left, top, resize.width, resize.height );
+
+		image.onProgress = onProgress;
+	}
+
+	// TODO: Allow passing quality?
+	const saveOptions: SaveOptions< typeof type > = {};
+	const outBuffer = image.writeToBuffer( `.${ ext }`, saveOptions );
+
+	const result = {
+		buffer: outBuffer.buffer,
+		width: image.width,
+		height: image.pageHeight,
+		originalWidth: width,
+		originalHeight: pageHeight,
+	};
+
+	// Only call after `image` is no longer being used.
+	cleanup?.();
+
+	return result;
+}
+
+/**
+ * Determines whether an image has an alpha channel.
+ *
+ * @param buffer Original file object.
+ * @return Whether the image has an alpha channel.
+ */
+export async function hasTransparency(
+	buffer: ArrayBuffer
+): Promise< boolean > {
+	const vips = await getVips();
+	const image = vips.Image.newFromBuffer( buffer );
+	const hasAlpha = image.hasAlpha();
+
+	cleanup?.();
+
+	return hasAlpha;
+}
diff --git a/packages/vips/src/test/resize-image.ts b/packages/vips/src/test/resize-image.ts
new file mode 100644
index 00000000000000..1f1155d388d42c
--- /dev/null
+++ b/packages/vips/src/test/resize-image.ts
@@ -0,0 +1,223 @@
+/**
+ * Internal dependencies
+ */
+import { resizeImage } from '../';
+import type { ImageSizeCrop } from '../types';
+
+const mockThumbnailBuffer = jest.fn( () => new MockImage() );
+const mockCrop = jest.fn( () => new MockImage() );
+const mockNewFromBuffer = jest.fn( () => new MockImage() );
+
+class MockImage {
+	width = 100;
+	height = 100;
+	pageHeight = 100;
+	crop = mockCrop;
+	writeToBuffer = jest.fn( () => ( {
+		buffer: '',
+	} ) );
+}
+
+class MockVipsImage {
+	static thumbnailBuffer = mockThumbnailBuffer;
+	static newFromBuffer = mockNewFromBuffer;
+}
+
+jest.mock( 'wasm-vips', () =>
+	jest.fn( () => ( {
+		Image: MockVipsImage,
+	} ) )
+);
+
+describe( 'resizeImage', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'resizes without crop', async () => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage( 'itemId', buffer, 'image/jpeg', {
+			width: 100,
+			height: 100,
+		} );
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			height: 100,
+			size: 'down',
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resizes without crop and zero height', async () => {
+		const jpegFile = new File( [], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage( 'itemId', buffer, 'image/jpeg', {
+			width: 100,
+			height: 0,
+		} );
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			size: 'down',
+			height: 100,
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resizes with center crop', async () => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage( 'itemId', buffer, 'image/jpeg', {
+			width: 100,
+			height: 100,
+			crop: true,
+		} );
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			height: 100,
+			crop: 'centre',
+			size: 'down',
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resizes with center crop and zero height', async () => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage( 'itemId', buffer, 'image/jpeg', {
+			width: 100,
+			height: 0,
+			crop: true,
+		} );
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			crop: 'centre',
+			height: 100,
+			size: 'down',
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resizes without crop and attention strategy', async () => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage(
+			'itemId',
+			buffer,
+			'image/jpeg',
+			{
+				width: 100,
+				height: 100,
+			},
+			true
+		);
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			height: 100,
+			size: 'down',
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resizes with center crop and attention strategy', async () => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage(
+			'itemId',
+			buffer,
+			'image/jpeg',
+			{
+				width: 100,
+				height: 100,
+				crop: true,
+			},
+			true
+		);
+
+		expect( mockThumbnailBuffer ).toHaveBeenCalledWith( buffer, 100, {
+			height: 100,
+			crop: 'attention',
+			size: 'down',
+		} );
+		expect( mockCrop ).not.toHaveBeenCalled();
+	} );
+
+	it.each< [ ImageSizeCrop[ 'crop' ], [ number, number, number, number ] ] >(
+		[
+			[
+				[ 'left', 'top' ],
+				[ 0, 0, 25, 25 ],
+			],
+			[
+				[ 'center', 'top' ],
+				[ 37.5, 0, 25, 25 ],
+			],
+			[
+				[ 'right', 'top' ],
+				[ 75, 0, 25, 25 ],
+			],
+			[
+				[ 'left', 'center' ],
+				[ 0, 37.5, 25, 25 ],
+			],
+			[
+				[ 'center', 'center' ],
+				[ 37.5, 37.5, 25, 25 ],
+			],
+			[
+				[ 'right', 'center' ],
+				[ 75, 37.5, 25, 25 ],
+			],
+			[
+				[ 'left', 'bottom' ],
+				[ 0, 75, 25, 25 ],
+			],
+			[
+				[ 'center', 'bottom' ],
+				[ 37.5, 75, 25, 25 ],
+			],
+			[
+				[ 'right', 'bottom' ],
+				[ 75, 75, 25, 25 ],
+			],
+		]
+	)( 'resizes with %s param and crops %s', async ( crop, expected ) => {
+		const jpegFile = new File( [ '<BLOB>' ], 'example.jpg', {
+			lastModified: 1234567891,
+			type: 'image/jpeg',
+		} );
+		const buffer = await jpegFile.arrayBuffer();
+
+		await resizeImage( 'itemId', buffer, 'image/jpeg', {
+			width: 25,
+			height: 25,
+			crop,
+		} );
+
+		expect( mockCrop ).toHaveBeenCalledWith( ...expected );
+	} );
+} );
diff --git a/packages/vips/src/types.ts b/packages/vips/src/types.ts
new file mode 100644
index 00000000000000..d0978ff7979634
--- /dev/null
+++ b/packages/vips/src/types.ts
@@ -0,0 +1,170 @@
+export type ItemId = string;
+
+export interface ImageSizeCrop {
+	width: number;
+	height: number;
+	crop?:
+		| boolean
+		| [ 'left' | 'center' | 'right', 'top' | 'center' | 'bottom' ];
+}
+
+/**
+ * none: Do nothing. Same as low.
+ * centre: Just take the centre.
+ * entropy: Use an entropy measure
+ * attention: Look for features likely to draw human attention.
+ * low: Position the crop towards the low coordinate. Same as none.
+ * high: Position the crop towards the high coordinate.
+ * all: Everything is interesting.
+ */
+type Interesting =
+	| 'none'
+	| 'centre'
+	| 'entropy'
+	| 'attention'
+	| 'low'
+	| 'high'
+	| 'all';
+
+/**
+ * none: Don't attach metadata.
+ * exif: Keep Exif metadata.
+ * xmp: Keep XMP metadata.
+ * iptc: Keep IPTC metadata.
+ * icc: Keep ICC metadata.
+ * other: Keep other metadata (e.g. PNG comments and some TIFF tags).
+ * all: Keep all metadata.
+ */
+type ForeignKeep = 'none' | 'exif' | 'xmp' | 'iptc' | 'icc' | 'other' | 'all';
+
+/**
+ * The rendering intent.'absolute' is best for
+ * scientific work, 'relative' is usually best for
+ * accurate communication with other imaging libraries.
+ *
+ * perceptual: Perceptual rendering intent.
+ * relative: Relative colorimetric rendering intent.
+ * saturation: Saturation rendering intent.
+ * absolute: Absolute colorimetric rendering intent.
+ */
+type Intent = 'perceptual' | 'relative' | 'saturation' | 'absolute';
+
+/**
+ * How sensitive loaders are to errors, from never stop (very insensitive), to
+ * stop on the smallest warning (very sensitive).
+ *
+ * Each one implies the ones before it, so 'error' implies
+ * 'truncated'.
+ *
+ * none: Never stop.
+ * truncated: Stop on image truncated, nothing else.
+ * error: Stop on serious error or truncation.
+ * warning: Stop on anything, even warnings.
+ */
+type FailOn = 'none' | 'truncated' | 'error' | 'warning';
+
+/**
+ * The type of access an operation has to supply. See vips_tilecache()
+ * and #VipsForeign.
+ *
+ * random: means requests can come in any order.
+ *
+ * sequential: means requests will be top-to-bottom, but with some
+ * amount of buffering behind the read point for small non-local accesses.
+ */
+type Access = 'random' | 'sequential' | 'sequential-unbuffered';
+
+export interface LoadOptions< T extends string > {
+	/**
+	 * Number of pages to load, -1 for all.
+	 */
+	n?: T extends 'image/gif'
+		? number
+		: T extends 'image/webp'
+		? number
+		: never;
+	/**
+	 * Required access pattern for this file.
+	 */
+	access?: Access;
+	/**
+	 * Error level to fail on.
+	 */
+	fail_on?: FailOn;
+	/**
+	 * Don't use a cached result for this operation.
+	 */
+	revalidate?: boolean;
+}
+
+export interface SaveOptions< T extends string > {
+	/**
+	 * Quality factor.
+	 */
+	Q?: T extends 'image/gif' ? never : number;
+	/**
+	 * Which metadata to retain.
+	 */
+	keep?: ForeignKeep;
+	/**
+	 * Generate an interlaced (progressive) JPEG/PNG/GIF.
+	 * Do not provide for any other type!
+	 */
+	interlace?: boolean;
+	/**
+	 * Enable lossless compression (for WebP).
+	 * Do not provide for any other type!
+	 */
+	lossless?: T extends 'image/gif' ? never : boolean;
+	/**
+	 * CPU effort / encoding speed.
+	 *
+	 * While supported by other encoders as well,
+	 * it is most relevant for AVIF, as it is slow by default.
+	 */
+	effort?: number;
+}
+
+export interface ThumbnailOptions {
+	/**
+	 * Options that are passed on to the underlying loader.
+	 */
+	option_string?: string;
+	/**
+	 * Size to this height.
+	 */
+	height?: number;
+	/**
+	 * Whether to upsize, downsize, both up and
+	 * downsize, or force a size (breaks aspect ratio).
+	 */
+	size?: 'both' | 'up' | 'down' | 'force';
+	/**
+	 * Don't use orientation tags to rotate image upright.
+	 */
+	no_rotate?: boolean;
+	/**
+	 * Reduce to fill target rectangle, then crop.
+	 */
+	crop?: Interesting;
+	/**
+	 * Reduce in linear light.
+	 */
+	linear?: boolean;
+	/**
+	 * Fallback import profile.
+	 */
+	import_profile?: string;
+	/**
+	 * Fallback export profile.
+	 */
+	export_profile?: string;
+	/**
+	 * Rendering intent.
+	 */
+	intent?: Intent;
+	/**
+	 * Error level to fail on.
+	 */
+	fail_on?: FailOn;
+}
diff --git a/packages/vips/src/utils.ts b/packages/vips/src/utils.ts
new file mode 100644
index 00000000000000..924d28110b597e
--- /dev/null
+++ b/packages/vips/src/utils.ts
@@ -0,0 +1,43 @@
+/**
+ * Determines whether a given file type supports a quality setting,
+ *
+ * @todo Make this smarter.
+ *
+ * @param type Mime type.
+ * @return Whether the file supports a quality setting.
+ */
+export function supportsQuality(
+	type: string
+): type is 'image/jpeg' | 'image/png' | 'image/webp' | 'image/avif' {
+	return [ 'image/jpeg', 'image/png', 'image/webp', 'image/avif' ].includes(
+		type
+	);
+}
+
+/**
+ * Determines whether a given file type supports animation,
+ *
+ * @todo Make this smarter.
+ *
+ * @param type Mime type.
+ * @return Whether the file supports animation.
+ */
+export function supportsAnimation(
+	type: string
+): type is 'image/webp' | 'image/gif' {
+	return [ 'image/webp', 'image/gif' ].includes( type );
+}
+
+/**
+ * Determines whether a given file type supports interlaced/progressive output.
+ *
+ * @todo Make this smarter.
+ *
+ * @param type Mime type.
+ * @return Whether the file supports interlaced/progressive output.
+ */
+export function supportsInterlace(
+	type: string
+): type is 'image/jpeg' | 'image/gif' | 'image/png' {
+	return [ 'image/jpeg', 'image/gif', 'image/png' ].includes( type );
+}
diff --git a/packages/vips/tsconfig.json b/packages/vips/tsconfig.json
new file mode 100644
index 00000000000000..6e33d8ff82d47e
--- /dev/null
+++ b/packages/vips/tsconfig.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types"
+	},
+	"include": [ "src/**/*" ]
+}
diff --git a/packages/warning/.npmrc b/packages/warning/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/warning/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index a43e9bb8604981..424ab1403506a6 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,115 @@
 
 ## Unreleased
 
+## 3.13.0 (2024-11-27)
+
+## 3.12.0 (2024-11-16)
+
+## 3.11.0 (2024-10-30)
+
+## 3.10.0 (2024-10-16)
+
+## 3.9.0 (2024-10-03)
+
+## 3.8.0 (2024-09-19)
+
+## 3.7.0 (2024-09-05)
+
+## 3.6.0 (2024-08-21)
+
+## 3.5.0 (2024-08-07)
+
+## 3.4.0 (2024-07-24)
+
+## 3.3.0 (2024-07-10)
+
+## 3.2.0 (2024-06-26)
+
+## 3.1.0 (2024-06-15)
+
+### Internal
+
+-   Refactor to TypeScript ([#62557](https://github.com/WordPress/gutenberg/pull/62557)).
+
+## 3.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Variables like `process.env.IS_GUTENBERG_PLUGIN` have been replaced by `globalThis.IS_GUTENBERG_PLUGIN`. Build systems using `process.env` should be updated ([#61486](https://github.com/WordPress/gutenberg/pull/61486)).
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 2.58.0 (2024-05-16)
+
+## 2.57.0 (2024-05-02)
+
+## 2.56.0 (2024-04-19)
+
+## 2.55.0 (2024-04-03)
+
+## 2.54.0 (2024-03-21)
+
+## 2.53.0 (2024-03-06)
+
+## 2.52.0 (2024-02-21)
+
+## 2.51.0 (2024-02-09)
+
+## 2.50.0 (2024-01-24)
+
+## 2.49.0 (2024-01-10)
+
+## 2.48.0 (2023-12-13)
+
+## 2.47.0 (2023-11-29)
+
+## 2.46.0 (2023-11-16)
+
+## 2.45.0 (2023-11-02)
+
+## 2.44.0 (2023-10-18)
+
+## 2.43.0 (2023-10-05)
+
+## 2.42.0 (2023-09-20)
+
+## 2.41.0 (2023-08-31)
+
+## 2.40.0 (2023-08-16)
+
+## 2.39.0 (2023-08-10)
+
+## 2.38.0 (2023-07-20)
+
+## 2.37.0 (2023-07-05)
+
+## 2.36.0 (2023-06-23)
+
+## 2.35.0 (2023-06-07)
+
+## 2.34.0 (2023-05-24)
+
+## 2.33.0 (2023-05-10)
+
+## 2.32.0 (2023-04-26)
+
+## 2.31.0 (2023-04-12)
+
+## 2.30.0 (2023-03-29)
+
+## 2.29.0 (2023-03-15)
+
+## 2.28.0 (2023-03-01)
+
+## 2.27.0 (2023-02-15)
+
+## 2.26.0 (2023-02-01)
+
+## 2.25.0 (2023-01-11)
+
+## 2.24.0 (2023-01-02)
+
+## 2.23.0 (2022-12-14)
+
 ## 2.22.0 (2022-11-16)
 
 ## 2.21.0 (2022-11-02)
@@ -44,7 +153,7 @@
 
 ## 2.2.0 (2021-07-21)
 
-### Enhancement
+### Enhancements
 
 -   Ensure that the warning for a given message is logged only once.
 
@@ -61,7 +170,7 @@
 
 ## 1.1.0 (2020-04-15)
 
-### New feature
+### New Features
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
 
diff --git a/packages/warning/README.md b/packages/warning/README.md
index 6adfe73b6d4594..67b471d154eccf 100644
--- a/packages/warning/README.md
+++ b/packages/warning/README.md
@@ -20,7 +20,7 @@ To prevent that, you should:
 
 1.  Put `@wordpress/warning/babel-plugin` into your [babel config](https://babeljs.io/docs/en/plugins#plugin-options) or use [`@wordpress/babel-preset-default`](https://www.npmjs.com/package/@wordpress/babel-preset-default), which already includes the babel plugin.
 
-    This will make sure your `warning` calls are wrapped within a condition that checks if `process.env.NODE_ENV !== 'production'`.
+    This will make sure your `warning` calls are wrapped within a condition that checks if `SCRIPT_DEBUG === true`.
 
 2.  Use [UglifyJS](https://github.com/mishoo/UglifyJS2), [Terser](https://github.com/terser/terser) or any other JavaScript parser that performs [dead code elimination](https://en.wikipedia.org/wiki/Dead_code_elimination). This is usually used in conjunction with JavaScript bundlers, such as [webpack](https://github.com/webpack/webpack).
 
diff --git a/packages/warning/babel-plugin.js b/packages/warning/babel-plugin.js
index f94de3a4f4ca28..3cf32d311bd6cd 100644
--- a/packages/warning/babel-plugin.js
+++ b/packages/warning/babel-plugin.js
@@ -5,7 +5,7 @@ const pkg = require( './package.json' );
 
 /**
  * Babel plugin which transforms `warning` function calls to wrap within a
- * condition that checks if `process.env.NODE_ENV !== 'production'`.
+ * condition that checks if `SCRIPT_DEBUG === true`.
  *
  * @param {import('@babel/core')} babel Current Babel object.
  *
@@ -14,36 +14,13 @@ const pkg = require( './package.json' );
 function babelPlugin( { types: t } ) {
 	const seen = Symbol();
 
-	const typeofProcessExpression = t.binaryExpression(
-		'!==',
-		t.unaryExpression( 'typeof', t.identifier( 'process' ), false ),
-		t.stringLiteral( 'undefined' )
-	);
-
-	const processEnvExpression = t.memberExpression(
-		t.identifier( 'process' ),
-		t.identifier( 'env' ),
-		false
-	);
-
-	const nodeEnvCheckExpression = t.binaryExpression(
-		'!==',
+	const scriptDebugCheckExpression = t.binaryExpression(
+		'===',
 		t.memberExpression(
-			processEnvExpression,
-			t.identifier( 'NODE_ENV' ),
-			false
-		),
-		t.stringLiteral( 'production' )
-	);
-
-	const logicalExpression = t.logicalExpression(
-		'&&',
-		t.logicalExpression(
-			'&&',
-			typeofProcessExpression,
-			processEnvExpression
+			t.identifier( 'globalThis' ),
+			t.identifier( 'SCRIPT_DEBUG' )
 		),
-		nodeEnvCheckExpression
+		t.booleanLiteral( true )
 	);
 
 	return {
@@ -80,11 +57,11 @@ function babelPlugin( { types: t } ) {
 					// Turns this code:
 					// warning(argument);
 					// into this:
-					// typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning(argument) : void 0;
+					// typeof SCRIPT_DEBUG !== 'undefined' && SCRIPT_DEBUG === true ? warning(argument) : void 0;
 					node[ seen ] = true;
 					path.replaceWith(
 						t.ifStatement(
-							logicalExpression,
+							scriptDebugCheckExpression,
 							t.blockStatement( [
 								t.expressionStatement( node ),
 							] )
diff --git a/packages/warning/package.json b/packages/warning/package.json
index a8905d4292b172..e41b9205d6d374 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "2.22.0",
+	"version": "3.13.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,11 +19,13 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"types": "build-types",
 	"sideEffects": false,
 	"publishConfig": {
diff --git a/packages/warning/src/index.js b/packages/warning/src/index.js
deleted file mode 100644
index 38afc42caf0b0b..00000000000000
--- a/packages/warning/src/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Internal dependencies
- */
-import { logged } from './utils';
-
-function isDev() {
-	return (
-		typeof process !== 'undefined' &&
-		process.env &&
-		process.env.NODE_ENV !== 'production'
-	);
-}
-
-/**
- * Shows a warning with `message` if environment is not `production`.
- *
- * @param {string} message Message to show in the warning.
- *
- * @example
- * ```js
- * import warning from '@wordpress/warning';
- *
- * function MyComponent( props ) {
- *   if ( ! props.title ) {
- *     warning( '`props.title` was not passed' );
- *   }
- *   ...
- * }
- * ```
- */
-export default function warning( message ) {
-	if ( ! isDev() ) {
-		return;
-	}
-
-	// Skip if already logged.
-	if ( logged.has( message ) ) {
-		return;
-	}
-
-	// eslint-disable-next-line no-console
-	console.warn( message );
-
-	// Throwing an error and catching it immediately to improve debugging
-	// A consumer can use 'pause on caught exceptions'
-	// https://github.com/facebook/react/issues/4216
-	try {
-		throw Error( message );
-	} catch ( x ) {
-		// Do nothing.
-	}
-
-	logged.add( message );
-}
diff --git a/packages/warning/src/index.ts b/packages/warning/src/index.ts
new file mode 100644
index 00000000000000..a5a092abbd2121
--- /dev/null
+++ b/packages/warning/src/index.ts
@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import { logged } from './utils';
+
+function isDev(): boolean {
+	// eslint-disable-next-line @wordpress/wp-global-usage
+	return globalThis.SCRIPT_DEBUG === true;
+}
+
+/**
+ * Shows a warning with `message` if environment is not `production`.
+ *
+ * @param message Message to show in the warning.
+ *
+ * @example
+ * ```js
+ * import warning from '@wordpress/warning';
+ *
+ * function MyComponent( props ) {
+ *   if ( ! props.title ) {
+ *     warning( '`props.title` was not passed' );
+ *   }
+ *   ...
+ * }
+ * ```
+ */
+export default function warning( message: string ): void {
+	if ( ! isDev() ) {
+		return;
+	}
+
+	// Skip if already logged.
+	if ( logged.has( message ) ) {
+		return;
+	}
+
+	// eslint-disable-next-line no-console
+	console.warn( message );
+
+	// Throwing an error and catching it immediately to improve debugging
+	// A consumer can use 'pause on caught exceptions'
+	// https://github.com/facebook/react/issues/4216
+	try {
+		throw Error( message );
+	} catch ( x ) {
+		// Do nothing.
+	}
+	logged.add( message );
+}
diff --git a/packages/warning/src/test/index.js b/packages/warning/src/test/index.js
index a7ecbfb4a8ffec..5fdf67b05360c6 100644
--- a/packages/warning/src/test/index.js
+++ b/packages/warning/src/test/index.js
@@ -4,27 +4,31 @@
 import warning from '..';
 import { logged } from '../utils';
 
-const initialNodeEnv = process.env.NODE_ENV;
+// eslint-disable-next-line eslint-comments/disable-enable-pair
+/* eslint-disable @wordpress/wp-global-usage */
 
 describe( 'warning', () => {
+	const initialScriptDebug = globalThis.SCRIPT_DEBUG;
+
 	afterEach( () => {
-		process.env.NODE_ENV = initialNodeEnv;
+		globalThis.SCRIPT_DEBUG = initialScriptDebug;
 		logged.clear();
 	} );
 
-	it( 'logs to console.warn when NODE_ENV is not "production"', () => {
-		process.env.NODE_ENV = 'development';
+	it( 'logs to console.warn when SCRIPT_DEBUG is set to `true`', () => {
+		globalThis.SCRIPT_DEBUG = true;
 		warning( 'warning' );
 		expect( console ).toHaveWarnedWith( 'warning' );
 	} );
 
-	it( 'does not log to console.warn if NODE_ENV is "production"', () => {
-		process.env.NODE_ENV = 'production';
+	it( 'does not log to console.warn if SCRIPT_DEBUG not set to `true`', () => {
+		globalThis.SCRIPT_DEBUG = false;
 		warning( 'warning' );
 		expect( console ).not.toHaveWarned();
 	} );
 
 	it( 'should show a message once', () => {
+		globalThis.SCRIPT_DEBUG = true;
 		warning( 'warning' );
 		warning( 'warning' );
 
diff --git a/packages/warning/src/utils.js b/packages/warning/src/utils.js
deleted file mode 100644
index fb087255f6bf6b..00000000000000
--- a/packages/warning/src/utils.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Object map tracking messages which have been logged, for use in ensuring a
- * message is only logged once.
- *
- * @type {Set<string>}
- */
-export const logged = new Set();
diff --git a/packages/warning/src/utils.ts b/packages/warning/src/utils.ts
new file mode 100644
index 00000000000000..4f4b5d3e1f7976
--- /dev/null
+++ b/packages/warning/src/utils.ts
@@ -0,0 +1,5 @@
+/**
+ * Object map tracking messages which have been logged, for use in ensuring a
+ * message is only logged once.
+ */
+export const logged: Set< string > = new Set();
diff --git a/packages/warning/test/babel-plugin.js b/packages/warning/test/babel-plugin.js
index afff2c4e273a1c..c845d79d700caa 100644
--- a/packages/warning/test/babel-plugin.js
+++ b/packages/warning/test/babel-plugin.js
@@ -12,88 +12,92 @@ function join( ...strings ) {
 	return strings.join( '\n' );
 }
 
-function compare( input, output, options = {} ) {
+function transformCode( input, options = {} ) {
 	const { code } = transform( input, {
 		configFile: false,
 		plugins: [ [ babelPlugin, options ] ],
 	} );
-	expect( code ).toEqual( output );
+	return code;
 }
 
 describe( 'babel-plugin', () => {
 	it( 'should replace warning calls with import declaration', () => {
-		compare(
-			join(
-				'import warning from "@wordpress/warning";',
-				'warning("a");'
-			),
-			join(
-				'import warning from "@wordpress/warning";',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning("a") : void 0;'
-			)
+		const input = join(
+			'import warning from "@wordpress/warning";',
+			'warning("a");'
 		);
+		const expected = join(
+			'import warning from "@wordpress/warning";',
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;'
+		);
+
+		expect( transformCode( input ) ).toEqual( expected );
 	} );
 
 	it( 'should not replace warning calls without import declaration', () => {
-		compare( 'warning("a");', 'warning("a");' );
+		const input = 'warning("a");';
+		const expected = 'warning("a");';
+
+		expect( transformCode( input ) ).toEqual( expected );
 	} );
 
 	it( 'should replace warning calls without import declaration with plugin options', () => {
-		compare(
-			'warning("a");',
-			'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning("a") : void 0;',
-			{ callee: 'warning' }
-		);
+		const input = 'warning("a");';
+		const options = { callee: 'warning' };
+		const expected =
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;';
+
+		expect( transformCode( input, options ) ).toEqual( expected );
 	} );
 
 	it( 'should replace multiple warning calls', () => {
-		compare(
-			join(
-				'import warning from "@wordpress/warning";',
-				'warning("a");',
-				'warning("b");',
-				'warning("c");'
-			),
-			join(
-				'import warning from "@wordpress/warning";',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning("a") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning("b") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning("c") : void 0;'
-			)
+		const input = join(
+			'import warning from "@wordpress/warning";',
+			'warning("a");',
+			'warning("b");',
+			'warning("c");'
 		);
+		const expected = join(
+			'import warning from "@wordpress/warning";',
+			'globalThis.SCRIPT_DEBUG === true ? warning("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warning("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warning("c") : void 0;'
+		);
+
+		expect( transformCode( input ) ).toEqual( expected );
 	} );
 
 	it( 'should identify warning callee name', () => {
-		compare(
-			join(
-				'import warn from "@wordpress/warning";',
-				'warn("a");',
-				'warn("b");',
-				'warn("c");'
-			),
-			join(
-				'import warn from "@wordpress/warning";',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("a") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("b") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("c") : void 0;'
-			)
+		const input = join(
+			'import warn from "@wordpress/warning";',
+			'warn("a");',
+			'warn("b");',
+			'warn("c");'
+		);
+		const expected = join(
+			'import warn from "@wordpress/warning";',
+			'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;'
 		);
+
+		expect( transformCode( input ) ).toEqual( expected );
 	} );
 
 	it( 'should identify warning callee name by', () => {
-		compare(
-			join(
-				'import warn from "@wordpress/warning";',
-				'warn("a");',
-				'warn("b");',
-				'warn("c");'
-			),
-			join(
-				'import warn from "@wordpress/warning";',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("a") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("b") : void 0;',
-				'typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warn("c") : void 0;'
-			)
+		const input = join(
+			'import warn from "@wordpress/warning";',
+			'warn("a");',
+			'warn("b");',
+			'warn("c");'
+		);
+		const expected = join(
+			'import warn from "@wordpress/warning";',
+			'globalThis.SCRIPT_DEBUG === true ? warn("a") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("b") : void 0;',
+			'globalThis.SCRIPT_DEBUG === true ? warn("c") : void 0;'
 		);
+
+		expect( transformCode( input ) ).toEqual( expected );
 	} );
 } );
diff --git a/packages/warning/tsconfig.json b/packages/warning/tsconfig.json
index 671d4a5eba4403..9e3edfe0ae443c 100644
--- a/packages/warning/tsconfig.json
+++ b/packages/warning/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/packages/widgets/.npmrc b/packages/widgets/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/widgets/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index 8402e0e4d27756..b1c63a0ca7f4c2 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,118 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.35.0 (2024-05-16)
+
+### Internal
+
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+
+## 3.34.0 (2024-05-02)
+
+## 3.33.0 (2024-04-19)
+
+## 3.32.0 (2024-04-03)
+
+## 3.31.0 (2024-03-21)
+
+## 3.30.0 (2024-03-06)
+
+## 3.29.0 (2024-02-21)
+
+## 3.28.0 (2024-02-09)
+
+## 3.27.0 (2024-01-24)
+
+## 3.26.0 (2024-01-10)
+
+## 3.25.0 (2023-12-13)
+
+## 3.24.0 (2023-11-29)
+
+## 3.23.0 (2023-11-16)
+
+## 3.22.0 (2023-11-02)
+
+## 3.21.0 (2023-10-18)
+
+## 3.20.0 (2023-10-05)
+
+## 3.19.0 (2023-09-20)
+
+## 3.18.0 (2023-08-31)
+
+## 3.17.0 (2023-08-16)
+
+## 3.16.0 (2023-08-10)
+
+## 3.15.0 (2023-07-20)
+
+## 3.14.0 (2023-07-05)
+
+## 3.13.0 (2023-06-23)
+
+## 3.12.0 (2023-06-07)
+
+## 3.11.0 (2023-05-24)
+
+## 3.10.0 (2023-05-10)
+
+## 3.9.0 (2023-04-26)
+
+## 3.8.0 (2023-04-12)
+
+## 3.7.0 (2023-03-29)
+
+## 3.6.0 (2023-03-15)
+
+## 3.5.0 (2023-03-01)
+
+## 3.4.0 (2023-02-15)
+
+## 3.3.0 (2023-02-01)
+
+## 3.2.0 (2023-01-11)
+
+## 3.1.0 (2023-01-02)
+
+## 3.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 2.20.0 (2022-11-16)
 
 ## 2.19.0 (2022-11-02)
@@ -42,7 +154,7 @@
 
 ## 2.1.1 (2022-02-10)
 
-### Bug Fix
+### Bug Fixes
 
 -   Removed unused `@wordpress/url` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
@@ -50,7 +162,7 @@
 
 ## 2.0.0 (2021-07-29)
 
-### Breaking Change
+### Breaking Changes
 
 -   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).
 
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 01ac126c41c14d..0ab7fe138cf513 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "2.20.0",
+	"version": "4.13.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -16,27 +16,32 @@
 	"bugs": {
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0",
-		"@wordpress/api-fetch": "file:../api-fetch",
-		"@wordpress/block-editor": "file:../block-editor",
-		"@wordpress/blocks": "file:../blocks",
-		"@wordpress/components": "file:../components",
-		"@wordpress/compose": "file:../compose",
-		"@wordpress/core-data": "file:../core-data",
-		"@wordpress/data": "file:../data",
-		"@wordpress/element": "file:../element",
-		"@wordpress/i18n": "file:../i18n",
-		"@wordpress/icons": "file:../icons",
-		"@wordpress/notices": "file:../notices",
-		"classnames": "^2.3.1"
+		"@babel/runtime": "7.25.7",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/notices": "*",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/widgets/src/blocks/legacy-widget/block.json b/packages/widgets/src/blocks/legacy-widget/block.json
index 30b60c6448835e..a03eb090633fc7 100644
--- a/packages/widgets/src/blocks/legacy-widget/block.json
+++ b/packages/widgets/src/blocks/legacy-widget/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "core/legacy-widget",
 	"title": "Legacy Widget",
 	"category": "widgets",
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/form.js b/packages/widgets/src/blocks/legacy-widget/edit/form.js
index 3d0a1026db7067..1a6572e727c937 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/form.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/form.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -92,7 +92,7 @@ export default function Form( {
 	if ( isWide && isMediumLargeViewport ) {
 		return (
 			<div
-				className={ classnames( {
+				className={ clsx( {
 					'wp-block-legacy-widget__container': isVisible,
 				} ) }
 			>
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index a763bbd0dd4045..c5ca43211e58e6 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,13 +11,11 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockIcon,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Spinner, Placeholder } from '@wordpress/components';
+import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
 import { brush as brushIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { useEntityRecord } from '@wordpress/core-data';
 
 /**
@@ -35,7 +33,7 @@ export default function Edit( props ) {
 	const { isWide = false } = props;
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			'is-wide-widget': isWide,
 		} ),
 	} );
@@ -57,30 +55,34 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
 			icon={ <BlockIcon icon={ brushIcon } /> }
 			label={ __( 'Legacy Widget' ) }
 		>
-			<WidgetTypeSelector
-				selectedId={ id ?? idBase }
-				onSelect={ ( { selectedId, isMulti } ) => {
-					if ( ! selectedId ) {
-						setAttributes( {
-							id: null,
-							idBase: null,
-							instance: null,
-						} );
-					} else if ( isMulti ) {
-						setAttributes( {
-							id: null,
-							idBase: selectedId,
-							instance: {},
-						} );
-					} else {
-						setAttributes( {
-							id: selectedId,
-							idBase: null,
-							instance: null,
-						} );
-					}
-				} }
-			/>
+			<Flex>
+				<FlexBlock>
+					<WidgetTypeSelector
+						selectedId={ id ?? idBase }
+						onSelect={ ( { selectedId, isMulti } ) => {
+							if ( ! selectedId ) {
+								setAttributes( {
+									id: null,
+									idBase: null,
+									instance: null,
+								} );
+							} else if ( isMulti ) {
+								setAttributes( {
+									id: null,
+									idBase: selectedId,
+									instance: {},
+								} );
+							} else {
+								setAttributes( {
+									id: selectedId,
+									idBase: null,
+									instance: null,
+								} );
+							}
+						} }
+					/>
+				</FlexBlock>
+			</Flex>
 		</Placeholder>
 	);
 }
@@ -98,11 +100,6 @@ function NotEmpty( {
 	const { record: widgetType, hasResolved: hasResolvedWidgetType } =
 		useEntityRecord( 'root', 'widgetType', widgetTypeId );
 
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
 	const setInstance = useCallback( ( nextInstance ) => {
 		setAttributes( { instance: nextInstance } );
 	}, [] );
@@ -126,8 +123,7 @@ function NotEmpty( {
 		);
 	}
 
-	const mode =
-		idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
+	const mode = idBase && ! isSelected ? 'preview' : 'edit';
 
 	return (
 		<>
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/preview.js b/packages/widgets/src/blocks/legacy-widget/edit/preview.js
index a23e046572ce3e..92388e5e54f3f6 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/preview.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/preview.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -113,12 +113,9 @@ export default function Preview( { idBase, instance, isVisible } ) {
 				</Placeholder>
 			) }
 			<div
-				className={ classnames(
-					'wp-block-legacy-widget__edit-preview',
-					{
-						'is-offscreen': ! isVisible || ! isLoaded,
-					}
-				) }
+				className={ clsx( 'wp-block-legacy-widget__edit-preview', {
+					'is-offscreen': ! isVisible || ! isLoaded,
+				} ) }
 			>
 				<Disabled>
 					{ /*
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
index 4afe1ee1359eae..432588f6aea85f 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
@@ -27,7 +27,9 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 
 	return (
 		<SelectControl
-			label={ __( 'Select a legacy widget to display:' ) }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Legacy widget' ) }
 			value={ selectedId ?? '' }
 			options={ [
 				{ value: '', label: __( 'Select widget' ) },
diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
index 93e7ab374f70d1..8c213eec86f9fa 100644
--- a/packages/widgets/src/blocks/legacy-widget/editor.scss
+++ b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -3,10 +3,10 @@
 		display: flow-root;
 	}
 	background: $white;
-	border-radius: $radius-block-ui;
-	border: 1px solid $gray-900;
-	padding: $grid-unit-15 - 1px; // Subtract the border width.
-	max-height: calc(100vh - 2px); // Subtract the border width (both top and bottom).
+	border-radius: $radius-small;
+	border: $border-width solid $gray-900;
+	padding: $grid-unit-15 - $border-width;
+	max-height: calc(100vh - #{ $border-width } - #{ $border-width });
 	overflow-y: scroll;
 
 	.wp-block-legacy-widget__edit-form-title {
@@ -57,7 +57,7 @@
 			font-family: system-ui;
 			background-color: transparent;
 			box-sizing: border-box;
-			border: 1px solid $gray-700;
+			border: $border-width solid $gray-700;
 			border-radius: 3px;
 			box-shadow: none;
 			color: $black;
@@ -95,8 +95,8 @@
 	cursor: pointer;
 
 	&:hover::after {
-		border-radius: $radius-block-ui;
-		border: 1px solid $gray-600;
+		border-radius: $radius-small;
+		border: $border-width solid $gray-600;
 		bottom: 0;
 		content: "";
 		left: 0;
@@ -163,12 +163,3 @@
 	min-width: 400px;
 }
 
-.wp-block-legacy-widget {
-	.components-base-control {
-		width: 100%;
-	}
-	.components-select-control__input {
-		padding: 0;
-		font-family: system-ui;
-	}
-}
diff --git a/packages/widgets/src/blocks/legacy-widget/index.php b/packages/widgets/src/blocks/legacy-widget/index.php
index 94cfb9ba71ebfd..ee13ae9a1c612d 100644
--- a/packages/widgets/src/blocks/legacy-widget/index.php
+++ b/packages/widgets/src/blocks/legacy-widget/index.php
@@ -8,6 +8,10 @@
 /**
  * Renders the 'core/legacy-widget' block.
  *
+ * @since 5.8.0
+ *
+ * @global int $wp_widget_factory.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Rendered block.
@@ -54,6 +58,8 @@ function render_block_core_legacy_widget( $attributes ) {
 
 /**
  * Registers the 'core/legacy-widget' block.
+ *
+ * @since 5.8.0
  */
 function register_block_core_legacy_widget() {
 	register_block_type_from_metadata(
@@ -70,6 +76,8 @@ function register_block_core_legacy_widget() {
  * Intercepts any request with legacy-widget-preview in the query param and, if
  * set, renders a page containing a preview of the requested Legacy Widget
  * block.
+ *
+ * @since 5.8.0
  */
 function handle_legacy_widget_preview_iframe() {
 	if ( empty( $_GET['legacy-widget-preview'] ) ) {
diff --git a/packages/widgets/src/blocks/widget-group/block.json b/packages/widgets/src/blocks/widget-group/block.json
index ec48d90eda5ca7..6e7ba57b38dbcc 100644
--- a/packages/widgets/src/blocks/widget-group/block.json
+++ b/packages/widgets/src/blocks/widget-group/block.json
@@ -1,6 +1,8 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "core/widget-group",
+	"title": "Widget Group",
 	"category": "widgets",
 	"attributes": {
 		"title": {
diff --git a/packages/widgets/src/blocks/widget-group/edit.js b/packages/widgets/src/blocks/widget-group/edit.js
index 43fe2df0032530..b21049ca3b63c0 100644
--- a/packages/widgets/src/blocks/widget-group/edit.js
+++ b/packages/widgets/src/blocks/widget-group/edit.js
@@ -52,6 +52,7 @@ function PreviewContent( { attributes, setAttributes } ) {
 		<>
 			<RichText
 				tagName="h2"
+				identifier="title"
 				className="widget-title"
 				allowedFormats={ [] }
 				placeholder={ __( 'Title' ) }
diff --git a/packages/widgets/src/blocks/widget-group/editor.scss b/packages/widgets/src/blocks/widget-group/editor.scss
index f854c792eeb240..1cd179539bc1a9 100644
--- a/packages/widgets/src/blocks/widget-group/editor.scss
+++ b/packages/widgets/src/blocks/widget-group/editor.scss
@@ -1,7 +1,7 @@
 .wp-block-widget-group {
 	&.has-child-selected::after {
-		border-radius: $radius-block-ui;
-		border: 1px solid var(--wp-admin-theme-color);
+		border-radius: $radius-small;
+		border: $border-width solid var(--wp-admin-theme-color);
 		bottom: 0;
 		content: "";
 		left: 0;
diff --git a/packages/widgets/src/blocks/widget-group/index.php b/packages/widgets/src/blocks/widget-group/index.php
index 8c8584b296d57e..e8769612a2f170 100644
--- a/packages/widgets/src/blocks/widget-group/index.php
+++ b/packages/widgets/src/blocks/widget-group/index.php
@@ -8,6 +8,11 @@
 /**
  * Renders the 'core/widget-group' block.
  *
+ * @since 5.9.0
+ *
+ * @global array      $wp_registered_sidebars
+ * @global int|string $_sidebar_being_rendered
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content The block content.
  * @param WP_Block $block The block.
@@ -42,6 +47,8 @@ function render_block_core_widget_group( $attributes, $content, $block ) {
 
 /**
  * Registers the 'core/widget-group' block.
+ *
+ * @since 5.9.0
  */
 function register_block_core_widget_group() {
 	register_block_type_from_metadata(
@@ -59,6 +66,10 @@ function register_block_core_widget_group() {
  * it. This lets us get to the current sidebar in
  * render_block_core_widget_group().
  *
+ * @since 5.9.0
+ *
+ * @global int|string $_sidebar_being_rendered
+ *
  * @param int|string $index       Index, name, or ID of the dynamic sidebar.
  */
 function note_sidebar_being_rendered( $index ) {
@@ -70,6 +81,10 @@ function note_sidebar_being_rendered( $index ) {
 /**
  * Clear whatever we set in note_sidebar_being_rendered() after WordPress
  * finishes rendering a sidebar.
+ *
+ * @since 5.9.0
+ *
+ * @global int|string $_sidebar_being_rendered
  */
 function discard_sidebar_being_rendered() {
 	global $_sidebar_being_rendered;
diff --git a/packages/widgets/src/index.js b/packages/widgets/src/index.js
index 6c88d65556d8b0..9520943bcae873 100644
--- a/packages/widgets/src/index.js
+++ b/packages/widgets/src/index.js
@@ -18,19 +18,40 @@ 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,
+			},
+		}
+	);
 }
 
 /**
  * Registers the Widget Group block.
+ *
+ * @param {Object} supports Block support settings.
  */
-export function registerWidgetGroupBlock() {
+export function registerWidgetGroupBlock( supports = {} ) {
 	const { metadata, settings, name } = widgetGroup;
-	registerBlockType( { name, ...metadata }, settings );
+	registerBlockType(
+		{ name, ...metadata },
+		{
+			...settings,
+			supports: {
+				...settings.supports,
+				...supports,
+			},
+		}
+	);
 }
 
 export { default as registerLegacyWidgetVariations } from './register-legacy-widget-variations';
diff --git a/packages/wordcount/.npmrc b/packages/wordcount/.npmrc
deleted file mode 100644
index 43c97e719a5a82..00000000000000
--- a/packages/wordcount/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-package-lock=false
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index fce129515db418..f323aa3a810d7a 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,110 @@
 
 ## Unreleased
 
+## 4.13.0 (2024-11-27)
+
+## 4.12.0 (2024-11-16)
+
+## 4.11.0 (2024-10-30)
+
+## 4.10.0 (2024-10-16)
+
+## 4.9.0 (2024-10-03)
+
+## 4.8.0 (2024-09-19)
+
+## 4.7.0 (2024-09-05)
+
+## 4.6.0 (2024-08-21)
+
+## 4.5.0 (2024-08-07)
+
+## 4.4.0 (2024-07-24)
+
+## 4.3.0 (2024-07-10)
+
+## 4.2.0 (2024-06-26)
+
+## 4.1.0 (2024-06-15)
+
+## 4.0.0 (2024-05-31)
+
+### Breaking Changes
+
+-   Increase the minimum required Node.js version to v18.12.0 matching long-term support releases ([#31270](https://github.com/WordPress/gutenberg/pull/61930)). Learn more about [Node.js releases](https://nodejs.org/en/about/previous-releases).
+
+## 3.58.0 (2024-05-16)
+
+## 3.57.0 (2024-05-02)
+
+## 3.56.0 (2024-04-19)
+
+## 3.55.0 (2024-04-03)
+
+## 3.54.0 (2024-03-21)
+
+## 3.53.0 (2024-03-06)
+
+## 3.52.0 (2024-02-21)
+
+## 3.51.0 (2024-02-09)
+
+## 3.50.0 (2024-01-24)
+
+## 3.49.0 (2024-01-10)
+
+## 3.48.0 (2023-12-13)
+
+## 3.47.0 (2023-11-29)
+
+## 3.46.0 (2023-11-16)
+
+## 3.45.0 (2023-11-02)
+
+## 3.44.0 (2023-10-18)
+
+## 3.43.0 (2023-10-05)
+
+## 3.42.0 (2023-09-20)
+
+## 3.41.0 (2023-08-31)
+
+## 3.40.0 (2023-08-16)
+
+## 3.39.0 (2023-08-10)
+
+## 3.38.0 (2023-07-20)
+
+## 3.37.0 (2023-07-05)
+
+## 3.36.0 (2023-06-23)
+
+## 3.35.0 (2023-06-07)
+
+## 3.34.0 (2023-05-24)
+
+## 3.33.0 (2023-05-10)
+
+## 3.32.0 (2023-04-26)
+
+## 3.31.0 (2023-04-12)
+
+## 3.30.0 (2023-03-29)
+
+## 3.29.0 (2023-03-15)
+
+## 3.28.0 (2023-03-01)
+
+## 3.27.0 (2023-02-15)
+
+## 3.26.0 (2023-02-01)
+
+## 3.25.0 (2023-01-11)
+
+## 3.24.0 (2023-01-02)
+
+## 3.23.0 (2022-12-14)
+
 ## 3.22.0 (2022-11-16)
 
 ## 3.21.0 (2022-11-02)
@@ -46,7 +150,7 @@
 
 ## 3.1.0 (2021-05-20)
 
-### Enhancement
+### Enhancements
 
 -   Adjusted count logic to recognize also numbers as words ([#27288](https://github.com/WordPress/gutenberg/pull/27288)).
 
@@ -61,46 +165,46 @@
 
 ## 2.0.3 (2018-10-29)
 
-### Polish
+### Internal
 
 -   Fix: `count` returns 0 for empty strings ([#10602](https://github.com/WordPress/gutenberg/pull/10602))
 
 ## 2.0.0 (2018-09-05)
 
-### Breaking Change
+### Breaking Changes
 
 -   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.
 
 ## 1.1.0 (2018-07-12)
 
-### New Feature
+### New Features
 
 -   Updated build to work with Babel 7 ([#7832](https://github.com/WordPress/gutenberg/pull/7832))
 
-### Polish
+### Internal
 
 -   Moved `@WordPress/packages` repository to `@WordPress/gutenberg` ([#7805](https://github.com/WordPress/gutenberg/pull/7805))
 
 ## 1.0.3 (2018-05-18)
 
-### Polish
+### Internal
 
 -   Fix: Standardized `package.json` format ([#119](https://github.com/WordPress/packages/pull/119))
 
 ## 1.0.2 (2018-05-08)
 
-### Bug Fix
+### Bug Fixes
 
 -   Fix: Resolve error when input strings contains only whitespace ([#123](https://github.com/WordPress/packages/pull/123))
 
 ## 1.0.1 (2018-05-01)
 
-### Polish
+### Internal
 
 -   Internal: Include `publishConfig` configuration in `package.json`. ([#114](https://github.com/WordPress/packages/pull/114))
 
 ## 1.0.0 (2018-04-24)
 
-### New Feature
+### New Features
 
 -   Initial release
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index 178c938a893813..e4e7efbba33256 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "3.22.0",
+	"version": "4.13.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,14 +19,16 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": false,
 	"dependencies": {
-		"@babel/runtime": "^7.16.0"
+		"@babel/runtime": "7.25.7"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/wordcount/tsconfig.json b/packages/wordcount/tsconfig.json
index 3c2c31f506f132..6e33d8ff82d47e 100644
--- a/packages/wordcount/tsconfig.json
+++ b/packages/wordcount/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
diff --git a/patches/@react-navigation+native+5.7.0.patch b/patches/@react-navigation+native+5.7.0.patch
deleted file mode 100644
index 8f7cc19c1f9489..00000000000000
--- a/patches/@react-navigation+native+5.7.0.patch
+++ /dev/null
@@ -1,19 +0,0 @@
-diff --git a/node_modules/@react-navigation/native/src/useLinking.native.tsx b/node_modules/@react-navigation/native/src/useLinking.native.tsx
-index 22274f1..acc95f5 100644
---- a/node_modules/@react-navigation/native/src/useLinking.native.tsx
-+++ b/node_modules/@react-navigation/native/src/useLinking.native.tsx
-@@ -113,9 +113,12 @@ export default function useLinking(
-       }
-     };
- 
--    Linking.addEventListener('url', listener);
-+		// The following `linkingSubscription` changes were added via
-+		// patch-package. The patch can be removed once we upgrade to
-+		// react-navigation@^6.0.0. https://git.io/JP7OG
-+    const linkingSubscription = Linking.addEventListener('url', listener);
- 
--    return () => Linking.removeEventListener('url', listener);
-+    return () => linkingSubscription.remove();
-   }, [enabled, extractPathFromURL, ref]);
- 
-   return {
diff --git a/patches/README.md b/patches/README.md
new file mode 100644
index 00000000000000..b811c824532c37
--- /dev/null
+++ b/patches/README.md
@@ -0,0 +1,39 @@
+# Dependency patches
+
+Sometimes there are problems with dependencies that can be solved by patching them. Gutenberg uses
+[`patch-package`](https://www.npmjs.com/package/patch-package) to patch npm dependencies when
+they're installed.
+
+Existing patches should be described and justified here.
+
+## Patches
+
+### `patches/lighthouse+10.4.0.patch`
+
+No notes.
+
+### `patches/react-autosize-textarea+7.1.0.patch`
+
+This package is unmaintained. It's incompatible with some recent versions of React types in ways
+that are mostly harmless.
+
+The `onPointerEnterCapture` and `onPointerLeaveCapture` events were removed. The package is patched
+to remove those events as well.
+
+See https://github.com/facebook/react/pull/17883.
+
+### `patches/react-devtools-core+4.28.5.patch`
+
+The mobile editor relies upon `jsdom-jscore-rn` to create a partial DOM
+environment, which causes `react-devtools-core` to believe it's running in a
+browser environment. We added a custom conditional to disable browser-specific
+features when running in a `jsdom-jscore-rn` environment.
+
+See https://github.com/WordPress/gutenberg/pull/47616.
+
+### `patches/react-native+0.73.3.patch`
+
+Accessibility changes in React Native 0.73.0 resulted in a broken braille screen
+input on iOS. This patch is a workaround to restore the previous behavior.
+
+See https://github.com/WordPress/gutenberg/pull/53895.
diff --git a/patches/dom-scroll-into-view+1.2.1.patch b/patches/dom-scroll-into-view+1.2.1.patch
deleted file mode 100644
index abf9482fb11f06..00000000000000
--- a/patches/dom-scroll-into-view+1.2.1.patch
+++ /dev/null
@@ -1,25 +0,0 @@
-diff --git a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js
-index 557ed5c..23dfbad 100644
---- a/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js
-+++ b/node_modules/dom-scroll-into-view/lib/dom-scroll-into-view.js
-@@ -21,6 +21,7 @@ function scrollIntoView(elem, container, config) {
-   allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll;
- 
-   var isWin = util.isWindow(container);
-+  var isFramed = !!(isWin && container.frameElement);
-   var elemOffset = util.offset(elem);
-   var eh = util.outerHeight(elem);
-   var ew = util.outerWidth(elem);
-@@ -35,7 +36,11 @@ function scrollIntoView(elem, container, config) {
-   var ww = undefined;
-   var wh = undefined;
- 
--  if (isWin) {
-+  if (isFramed) {
-+    container = container.document.scrollingElement || container.document.body;
-+  }
-+
-+  if (isWin || isFramed) {
-     win = container;
-     wh = util.height(win);
-     ww = util.width(win);
diff --git a/patches/lighthouse+10.4.0.patch b/patches/lighthouse+10.4.0.patch
new file mode 100644
index 00000000000000..377647186d4b6b
--- /dev/null
+++ b/patches/lighthouse+10.4.0.patch
@@ -0,0 +1,11 @@
+diff --git a/node_modules/lighthouse/core/index.d.cts b/node_modules/lighthouse/core/index.d.cts
+index 1c399e1..23c3d1f 100644
+--- a/node_modules/lighthouse/core/index.d.cts
++++ b/node_modules/lighthouse/core/index.d.cts
+@@ -1,4 +1,6 @@
+ export = lighthouse;
+ /** @type {import('./index.js')['default']} */
++// Otherwise TS is confused when using ES types in CJS.
++// @ts-ignore
+ declare const lighthouse: typeof import("./index.js")['default'];
+ //# sourceMappingURL=index.d.cts.map
diff --git a/patches/react-autosize-textarea+7.1.0.patch b/patches/react-autosize-textarea+7.1.0.patch
new file mode 100644
index 00000000000000..7d67e58fd5fab6
--- /dev/null
+++ b/patches/react-autosize-textarea+7.1.0.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
+index ad6ff3f..e0a6d51 100644
+--- a/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
++++ b/node_modules/react-autosize-textarea/lib/TextareaAutosize.d.ts
+@@ -22,7 +22,7 @@ export declare namespace TextareaAutosize {
+         lineHeight: number | null;
+     };
+ }
+-export declare const TextareaAutosize: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & {
++export declare const TextareaAutosize: React.ForwardRefExoticComponent<Pick<React.HTMLProps<HTMLTextAreaElement>, "default" | "max" | "required" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "title" | "pattern" | "async" | "start" | "low" | "high" | "defer" | "open" | "disabled" | "color" | "content" | "size" | "wrap" | "multiple" | "summary" | "className" | "height" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "kind" | "src" | "srcLang" | "value" | "download" | "hrefLang" | "rel" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "readOnly" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "as" | "integrity" | "charSet" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster"> & {
+     /** Called whenever the textarea resizes */
+     onResize?: ((e: Event) => void) | undefined;
+     /** Minimum number of visible rows */
diff --git a/patches/react-devtools-core+4.28.5.patch b/patches/react-devtools-core+4.28.5.patch
new file mode 100644
index 00000000000000..8f395f09af519b
--- /dev/null
+++ b/patches/react-devtools-core+4.28.5.patch
@@ -0,0 +1,40 @@
+diff --git a/node_modules/react-devtools-core/dist/backend.js b/node_modules/react-devtools-core/dist/backend.js
+index d5837ee..1530af4 100644
+--- a/node_modules/react-devtools-core/dist/backend.js
++++ b/node_modules/react-devtools-core/dist/backend.js
+@@ -4671,7 +4671,7 @@ var SHOW_DURATION = 2000;
+ var timeoutID = null;
+ var overlay = null;
+ function hideOverlay(agent) {
+-  if (window.document == null) {
++  if (window.document == null || window.document.__isJsdom) {
+     agent.emit('hideNativeHighlight');
+     return;
+   }
+@@ -4684,7 +4684,7 @@ function hideOverlay(agent) {
+   }
+ }
+ function showOverlay(elements, componentName, agent, hideAfterTimeout) {
+-  if (window.document == null) {
++  if (window.document == null || window.document.__isJsdom) {
+     if (elements != null && elements[0] != null) {
+       agent.emit('showNativeHighlight', elements[0]);
+     }
+@@ -4918,7 +4918,7 @@ var OUTLINE_COLOR = '#f0f0f0'; // Note these colors are in sync with DevTools Pr
+ var COLORS = ['#37afa9', '#63b19e', '#80b393', '#97b488', '#abb67d', '#beb771', '#cfb965', '#dfba57', '#efbb49', '#febc38'];
+ var canvas = null;
+ function draw(nodeToData, agent) {
+-  if (window.document == null) {
++  if (window.document == null || window.document.__isJsdom) {
+     var nodesToDraw = [];
+     iterateNodes(nodeToData, function (_, color, node) {
+       nodesToDraw.push({
+@@ -4978,7 +4978,7 @@ function drawBorder(context, rect, color) {
+ }
+ 
+ function destroy(agent) {
+-  if (window.document == null) {
++  if (window.document == null || window.document.__isJsdom) {
+     agent.emit('disableTraceUpdates');
+     return;
+   }
diff --git a/patches/react-native+0.73.3.patch b/patches/react-native+0.73.3.patch
new file mode 100644
index 00000000000000..8b69616c0b33d7
--- /dev/null
+++ b/patches/react-native+0.73.3.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+index 481938f..9509857 100644
+--- a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
++++ b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+@@ -1452,7 +1452,6 @@ function InternalTextInput(props: Props): React.Node {
+         ref={ref}
+         {...otherProps}
+         {...eventHandlers}
+-        accessibilityState={_accessibilityState}
+         accessible={accessible}
+         submitBehavior={submitBehavior}
+         caretHidden={caretHidden}
diff --git a/patches/react-native-keyboard-aware-scroll-view+0.8.8-wp-1.patch b/patches/react-native-keyboard-aware-scroll-view+0.8.8-wp-1.patch
deleted file mode 100644
index fab58b9d3157d9..00000000000000
--- a/patches/react-native-keyboard-aware-scroll-view+0.8.8-wp-1.patch
+++ /dev/null
@@ -1,76 +0,0 @@
-diff --git a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
-index 30f62c9..83a6920 100644
---- a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
-+++ b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
-@@ -264,9 +264,13 @@ function KeyboardAwareHOC(
-       })
-     }
- 
--    componentWillReceiveProps(nextProps: KeyboardAwareHOCProps) {
--      if (nextProps.viewIsInsideTabBar !== this.props.viewIsInsideTabBar) {
--        const keyboardSpace: number = nextProps.viewIsInsideTabBar
-+    // This patch changed from the deprecated `componentWillReceiveProps` to
-+    // `componentDidUpdate`. We can remove this patch when we upgrade to
-+    // `react-native-keyboard-aware-scroll-view@^0.9.2`
-+    // https://git.io/JPbOK
-+    componentDidUpdate(prevProps: KeyboardAwareHOCProps) {
-+      if (this.props.viewIsInsideTabBar !== prevProps.viewIsInsideTabBar) {
-+        const keyboardSpace: number = this.props.viewIsInsideTabBar
-           ? _KAM_DEFAULT_TAB_BAR_HEIGHT
-           : 0
-         if (this.state.keyboardSpace !== keyboardSpace) {
-@@ -293,12 +297,33 @@ function KeyboardAwareHOC(
- 
-     scrollToPosition = (x: number, y: number, animated: boolean = true) => {
-       const responder = this.getScrollResponder()
--      responder && responder.scrollResponderScrollTo({ x, y, animated })
-+      // Patch applied to avoid invoking the removed `scrollResponderScrollTo`
-+      // method. This patch could be removed if we upgrade to
-+      // `react-native-keyboard-aware-view@^0.9.5` https://git.io/JPb6a
-+      if (!responder) return;
-+      if (responder.scrollResponderScrollTo) {
-+        // React Native < 0.65
-+        responder.scrollResponderScrollTo({ x, y, animated })
-+      } else if (responder.scrollTo) {
-+        // React Native >= 0.65
-+        responder.scrollTo({ x, y, animated })
-+      }
-     }
- 
-     scrollToEnd = (animated?: boolean = true) => {
-       const responder = this.getScrollResponder()
--      responder && responder.scrollResponderScrollToEnd({ animated })
-+      // Patch applied to avoid invoking the removed
-+      // `scrollResponderScrollToEnd` method. This patch could be removed if we
-+      // upgrade to `react-native-keyboard-aware-view@^0.9.5`
-+      // https://git.io/JPb6a
-+      if (!responder) return;
-+      if (responder.scrollResponderScrollToEnd) {
-+        // React Native < 0.65
-+        responder.scrollResponderScrollToEnd({ animated })
-+      } else if (responder.scrollToEnd) {
-+        // React Native >= 0.65
-+        responder.scrollToEnd({ animated })
-+      }
-     }
- 
-     scrollForExtraHeightOnAndroid = (extraHeight: number) => {
-@@ -553,7 +578,17 @@ function KeyboardAwareHOC(
- 
-         scrollOffsetY = Math.max(0, scrollOffsetY); //prevent negative scroll offset
-         const responder = this.getScrollResponder();
--        responder && responder.scrollResponderScrollTo( { x: 0, y: scrollOffsetY, animated: true } );
-+        // Patch applied to avoid invoking the removed `scrollResponderScrollTo`
-+        // method. This patch could be removed if we upgrade to
-+        // `react-native-keyboard-aware-view@^0.9.5` https://git.io/JPb6a
-+        if (!responder) return;
-+        if (responder.scrollResponderScrollTo) {
-+          // React Native < 0.65
-+          responder.scrollResponderScrollTo( { x: 0, y: scrollOffsetY, animated: true } )
-+        } else if (responder.scrollTo) {
-+          // React Native >= 0.65
-+          responder.scrollTo( { x: 0, y: scrollOffsetY, animated: true } )
-+        }
-       }
- 
-       const measureLayoutErrorHandler = ( e: Object ) => {
diff --git a/patches/react-native-modal+11.10.0.patch b/patches/react-native-modal+11.10.0.patch
deleted file mode 100644
index 0f94cc513322f4..00000000000000
--- a/patches/react-native-modal+11.10.0.patch
+++ /dev/null
@@ -1,33 +0,0 @@
-diff --git a/node_modules/react-native-modal/dist/modal.js b/node_modules/react-native-modal/dist/modal.js
-index 165cd55..85f820c 100644
---- a/node_modules/react-native-modal/dist/modal.js
-+++ b/node_modules/react-native-modal/dist/modal.js
-@@ -403,7 +403,13 @@ export class ReactNativeModal extends React.Component {
-         if (this.props.onSwipe) {
-             console.warn('`<Modal onSwipe="..." />` is deprecated and will be removed starting from 13.0.0. Use `<Modal onSwipeComplete="..." />` instead.');
-         }
--        DeviceEventEmitter.addListener('didUpdateDimensions', this.handleDimensionsUpdate);
-+		// The following `didUpdateDimensionsEmitter` changes were added via
-+		// patch-package. The patch can be removed once we upgrade to
-+		// react-native-modal@^13.0.0. https://git.io/JPQgq
-+        this.didUpdateDimensionsEmitter = DeviceEventEmitter.addListener(
-+            'didUpdateDimensions',
-+            this.handleDimensionsUpdate
-+        );
-         if (this.state.isVisible) {
-             this.open();
-         }
-@@ -411,7 +417,12 @@ export class ReactNativeModal extends React.Component {
-     }
-     componentWillUnmount() {
-         BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPress);
--        DeviceEventEmitter.removeListener('didUpdateDimensions', this.handleDimensionsUpdate);
-+		// The following `didUpdateDimensionsEmitter` changes were added via
-+		// patch-package. The patch can be removed once we upgrade to
-+		// react-native-modal@^13.0.0. https://git.io/JPQgq
-+        if ( this.didUpdateDimensionsEmitter ) {
-+            this.didUpdateDimensionsEmitter.remove();
-+        }
-     }
-     componentDidUpdate(prevProps) {
-         // If the animations have been changed then rebuild them to make sure we're
diff --git a/patches/wasm-vips+0.0.10.patch b/patches/wasm-vips+0.0.10.patch
new file mode 100644
index 00000000000000..3310b706e5a46b
--- /dev/null
+++ b/patches/wasm-vips+0.0.10.patch
@@ -0,0 +1,15 @@
+diff --git a/node_modules/wasm-vips/package.json b/node_modules/wasm-vips/package.json
+index c20f052..b26a38a 100644
+--- a/node_modules/wasm-vips/package.json
++++ b/node_modules/wasm-vips/package.json
+@@ -15,10 +15,6 @@
+   "type": "commonjs",
+   "exports": {
+     ".": {
+-      "browser": {
+-        "import": "./lib/vips-es6.js",
+-        "require": "./lib/vips.js"
+-      },
+       "node": {
+         "import": "./lib/vips-node.mjs",
+         "require": "./lib/vips-node.js"
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index 7473a44d819bc3..5bc7a5676e712b 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -2,22 +2,27 @@
 <ruleset name="WordPress Coding Standards for Gutenberg Plugin">
 	<description>Sniffs for WordPress plugins, with minor modifications for Gutenberg</description>
 
-	<config name="testVersion" value="5.6-"/>
+	<!-- Check for cross-version support for PHP 7.2 and higher. -->
+	<config name="testVersion" value="7.2-"/>
 	<rule ref="PHPCompatibilityWP">
 		<include-pattern>*\.php$</include-pattern>
 	</rule>
 
 	<rule ref="WordPress-Core"/>
-	<rule ref="WordPress-Docs"/>
-	<rule ref="WordPress.WP.I18n"/>
-	<config name="text_domain" value="gutenberg,default"/>
+	<rule ref="WordPress.WP.I18n">
+		<properties>
+			<property name="text_domain" type="array">
+				<element value="gutenberg"/>
+				<element value="default"/>
+			</property>
+		</properties>
+	</rule>
 
 	<rule ref="VariableAnalysis.CodeAnalysis.VariableAnalysis">
 		<properties>
 			<property name="allowUnusedParametersBeforeUsed" value="true"/>
 		</properties>
 	</rule>
-	<rule ref="WordPress.CodeAnalysis.EmptyStatement"/>
 
 	<rule ref="PEAR.Functions.FunctionCallSignature">
 		<properties>
@@ -26,12 +31,20 @@
 	</rule>
 
 	<rule ref="WordPress.WP.I18n.MissingArgDomainDefault">
-		<exclude-pattern>packages/block-library/src/*</exclude-pattern>
+		<exclude-pattern>/lib/compat/*</exclude-pattern>
+		<exclude-pattern>/packages/block-library/src/*</exclude-pattern>
+		<exclude-pattern>/build/block-library/*</exclude-pattern>
 	</rule>
 
 	<arg value="ps"/>
 	<arg name="extensions" value="php"/>
 
+	<!-- Cache the scan results and re-use those for unchanged files on the next scan. -->
+	<arg name="cache" value=".cache/phpcs.json"/>
+
+	<!-- Check up to 20 files simultaneously. -->
+	<arg name="parallel" value="20"/>
+
 	<file>./bin</file>
 	<file>./gutenberg.php</file>
 	<file>./lib</file>
@@ -40,63 +53,133 @@
 	<file>./post-content.php</file>
 
 	<!-- Exclude generated files -->
-	<exclude-pattern>./packages/block-serialization-spec-parser/parser.php</exclude-pattern>
+	<exclude-pattern>/packages/block-serialization-spec-parser/parser\.php$</exclude-pattern>
+	<exclude-pattern>/node_modules/*</exclude-pattern>
+	<exclude-pattern>/build/*</exclude-pattern>
 
-	<!-- These special comments are markers for the build process -->
-	<rule ref="Squiz.Commenting.InlineComment.WrongStyle">
-		<exclude-pattern>gutenberg.php</exclude-pattern>
-	</rule>
+	<!-- Exclude third party libraries -->
+	<exclude-pattern>/vendor/*</exclude-pattern>
+	<exclude-pattern>/test/php/gutenberg-coding-standards/*</exclude-pattern>
 
-	<!-- Do not require docblocks for unit tests -->
-	<rule ref="Squiz.Commenting.FunctionComment.Missing">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.FileComment.Missing">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.ClassComment.Missing">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.ClassComment.SpacingAfter">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.FunctionComment.MissingParamTag">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Generic.Commenting.DocComment.Empty">
-    	<exclude-pattern>phpunit/*</exclude-pattern>
-    </rule>
-	<rule ref="Generic.Commenting.DocComment.MissingShort">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.VariableComment.Missing">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
-	<rule ref="Squiz.Commenting.FunctionCommentThrowTag.Missing">
-		<exclude-pattern>phpunit/*</exclude-pattern>
-	</rule>
+	<!-- Exclude files maintained in WordPress Core and backported to Gutenberg
+	     DO NOT REMOVE these rules; these files are "built" artifacts from Core
+	     and when they are removed it prevents keeping the repos in sync. -->
+	<exclude-pattern>/lib/compat/wordpress-*/html-api/*\.php$</exclude-pattern>
 
-	<!-- Ignore snake case error in parser -->
-	<rule ref="WordPress.NamingConventions.ValidVariableName.PropertyNotSnakeCase">
-		<exclude-pattern>./packages/block-serialization-default-parser/parser.php</exclude-pattern>
-	</rule>
-	<rule ref="WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase">
-		<exclude-pattern>./packages/block-serialization-default-parser/parser.php</exclude-pattern>
-	</rule>
-	<rule ref="WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase">
-		<exclude-pattern>./packages/block-serialization-default-parser/parser.php</exclude-pattern>
-	</rule>
 	<!-- Ignore filename error since it requires WP core build process change -->
 	<rule ref="WordPress.Files.FileName.InvalidClassFileName">
-		<exclude-pattern>./packages/block-serialization-default-parser/parser.php</exclude-pattern>
 		<exclude-pattern>/phpunit/*</exclude-pattern>
+		<exclude-pattern>/packages/block-library/src/navigation/index\.php$</exclude-pattern>
+	</rule>
+
+	<!-- Ignore empty files in tests/gutenberg-test-themes -->
+	<rule ref="Internal.NoCodeFound">
+		<exclude-pattern>/test/gutenberg-test-themes/*</exclude-pattern>
 	</rule>
 
 	<!-- Exclude PHPUnit tests from file and class name sniffs (for Core parity). -->
 	<rule ref="WordPress.Files.FileName.NotHyphenatedLowercase">
 		<exclude-pattern>/phpunit/*</exclude-pattern>
+		<exclude-pattern>*\.asset\.php$</exclude-pattern>
 	</rule>
 	<rule ref="PEAR.NamingConventions.ValidClassName.Invalid">
 		<exclude-pattern>/phpunit/*</exclude-pattern>
 	</rule>
+
+	<!-- Enforce checks against redeclaration for functions and classes. -->
+	<rule ref="Gutenberg.CodeAnalysis.GuardedFunctionAndClassNames">
+		<exclude-pattern>/phpunit/*</exclude-pattern>
+		<exclude-pattern>/packages/*</exclude-pattern>
+		<exclude-pattern>/bin/generate-gutenberg-php\.php$</exclude-pattern>
+		<properties>
+			<property name="functionsWhiteList" type="array">
+				<element value="/^_?gutenberg.+/"/>
+			</property>
+			<property name="classesWhiteList" type="array">
+				<element value="/^Gutenberg.+/"/>
+				<element value="/^.+_Gutenberg$/"/>
+			</property>
+		</properties>
+	</rule>
+
+	<rule ref="Gutenberg.NamingConventions.ValidBlockLibraryFunctionName">
+		<include-pattern>/packages/block-library/src/*/*\.php$</include-pattern>
+		<properties>
+			<property name="prefixes" type="array">
+				<element value="block_core_"/>
+				<element value="render_block_core_"/>
+				<element value="register_block_core_"/>
+			</property>
+			<!--
+				The following list of functions is final and must not be extended.
+				It includes functions that cannot be renamed due to backward compatibility concerns.
+			-->
+			<property name="allowed_functions" type="array">
+				<element value="_delete_custom_logo_on_remove_site_logo"/>
+				<element value="_delete_site_logo_on_remove_custom_logo"/>
+				<element value="_delete_site_logo_on_remove_custom_logo_on_setup_theme"/>
+				<element value="_delete_site_logo_on_remove_theme_mods"/>
+				<element value="_override_custom_logo_theme_mod"/>
+				<element value="_sync_custom_logo_to_site_logo"/>
+				<element value="_wp_rest_api_autosave_meta"/>
+				<element value="_wp_rest_api_force_autosave_difference"/>
+				<element value="apply_block_core_search_border_style"/>
+				<element value="apply_block_core_search_border_styles"/>
+				<element value="build_dropdown_script_block_core_categories"/>
+				<element value="build_template_part_block_area_variations"/>
+				<element value="build_template_part_block_instance_variations"/>
+				<element value="build_template_part_block_variations"/>
+				<element value="build_variation_for_navigation_link"/>
+				<element value="classnames_for_block_core_search"/>
+				<element value="comments_block_form_defaults"/>
+				<element value="enqueue_legacy_post_comments_block_styles"/>
+				<element value="get_block_core_avatar_border_attributes"/>
+				<element value="get_block_core_post_featured_image_border_attributes"/>
+				<element value="get_block_core_post_featured_image_overlay_element_markup"/>
+				<element value="get_border_color_classes_for_block_core_search"/>
+				<element value="get_color_classes_for_block_core_search"/>
+				<element value="get_typography_classes_for_block_core_search"/>
+				<element value="get_typography_styles_for_block_core_search"/>
+				<element value="gutenberg_block_core_file_update_interactive_view_script"/>
+				<element value="gutenberg_block_core_navigation_update_interactive_view_script"/>
+				<element value="post_comments_form_block_form_defaults"/>
+				<element value="register_block_core_site_icon_setting"/>
+				<element value="register_legacy_post_comments_block"/>
+				<element value="styles_for_block_core_search"/>
+				<element value="wp_add_footnotes_revisions_to_post_meta"/>
+				<element value="wp_add_footnotes_to_revision"/>
+				<element value="wp_get_footnotes_from_revision"/>
+				<element value="wp_keep_footnotes_revision_id"/>
+				<element value="wp_latest_comments_draft_or_post_title"/>
+				<element value="wp_restore_footnotes_from_revision"/>
+				<element value="wp_save_footnotes_meta"/>
+			</property>
+		</properties>
+	</rule>
+	<rule ref="Gutenberg.CodeAnalysis.ForbiddenFunctionsAndClasses">
+		<include-pattern>/packages/block-library/src/.+/*\.php$</include-pattern>
+		<!--
+			Refactoring required: the functions and classes prefixed with 'Gutenberg_' in the files that are being excluded
+			through the 'exclude-pattern' statements below must be guarded, as they are available only in the Gutenberg context,
+			not in Core.
+		-->
+		<exclude-pattern>/packages/block-library/src/form-input/index\.php$</exclude-pattern>
+		<exclude-pattern>/packages/block-library/src/form-submission-notification/index\.php$</exclude-pattern>
+		<exclude-pattern>/packages/block-library/src/form/index\.php$</exclude-pattern>
+		<properties>
+			<property name="forbidden_functions" type="array">
+				<element value="[Gg]utenberg.*"/>
+			</property>
+			<property name="forbidden_classes" type="array">
+				<element value="[Gg]utenberg.*"/>
+			</property>
+		</properties>
+	</rule>
+	<rule ref="Gutenberg.Commenting.SinceTag">
+		<!-- The sniff ensures that functions have a valid @since tag but skips checking experimental blocks. -->
+		<include-pattern>/packages/block-library/src/.+/*\.php$</include-pattern>
+		<include-pattern>/packages/block-serialization-default-parser/.+/*\.php$</include-pattern>
+		<include-pattern>/packages/widgets/src/blocks/legacy-widget/index\.php$</include-pattern>
+		<include-pattern>/packages/widgets/src/blocks/widget-group/index\.php$</include-pattern>
+	</rule>
 </ruleset>
diff --git a/phpunit-watcher.yml.dist b/phpunit-watcher.yml.dist
index f2f9da5fbcdbfd..165a4d8e66e0b6 100644
--- a/phpunit-watcher.yml.dist
+++ b/phpunit-watcher.yml.dist
@@ -6,3 +6,6 @@ watch:
 notifications:
   passingTests: false
   failingTests: false
+
+phpunit:
+  arguments: '--filter Tests_Fonts_WpFontCollection_GetContent'
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 2bc6b7b29900de..c8dc2d34b0fed9 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -13,11 +13,14 @@
 	<testsuites>
 		<testsuite name="default">
 			<directory suffix="-test.php">./phpunit/</directory>
+			<directory suffix=".php">./phpunit/tests/</directory>
+			<directory suffix=".php">./phpunit/blocks/</directory>
 		</testsuite>
 	</testsuites>
 	<groups>
 		<exclude>
 			<group>ms-required</group>
+			<group>fontsapi</group>
 		</exclude>
 	</groups>
 </phpunit>
diff --git a/phpunit/block-supports/background-test.php b/phpunit/block-supports/background-test.php
new file mode 100644
index 00000000000000..c698f9e7c2f1c1
--- /dev/null
+++ b/phpunit/block-supports/background-test.php
@@ -0,0 +1,212 @@
+<?php
+
+/**
+ * Test the background block support.
+ *
+ * @package Gutenberg
+ */
+class WP_Block_Supports_Background_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	/**
+	 * Theme root directory.
+	 *
+	 * @var string
+	 */
+	private $theme_root;
+
+	/**
+	 * Original theme directory.
+	 *
+	 * @var string
+	 */
+	private $orig_theme_dir;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+		$this->theme_root      = realpath( __DIR__ . '/../data/themedir1' );
+		$this->orig_theme_dir  = $GLOBALS['wp_theme_directories'];
+
+		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+
+		// Clear up the filters to modify the theme root.
+		remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	public function filter_set_theme_root() {
+		return $this->theme_root;
+	}
+
+	/**
+	 * Tests that background image block support works as expected.
+	 *
+	 * @covers ::gutenberg_render_background_support
+	 *
+	 * @dataProvider data_background_block_support
+	 *
+	 * @param string $theme_name          The theme to switch to.
+	 * @param string $block_name          The test block name to register.
+	 * @param mixed  $background_settings The background block support settings.
+	 * @param mixed  $background_style    The background styles within the block attributes.
+	 * @param string $expected_wrapper    Expected markup for the block wrapper.
+	 * @param string $wrapper             Existing markup for the block wrapper.
+	 */
+	public function test_background_block_support( $theme_name, $block_name, $background_settings, $background_style, $expected_wrapper, $wrapper ) {
+		switch_theme( $theme_name );
+		$this->test_block_name = $block_name;
+
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 2,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'background' => $background_settings,
+				),
+			)
+		);
+
+		$block = array(
+			'blockName' => $block_name,
+			'attrs'     => array(
+				'style' => array(
+					'background' => $background_style,
+				),
+			),
+		);
+
+		$actual = gutenberg_render_background_support( $wrapper, $block );
+
+		$this->assertEquals(
+			$expected_wrapper,
+			$actual,
+			'Background block wrapper markup should be correct'
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_background_block_support() {
+		return array(
+			'background image style is applied' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.com/image.jpg',
+					),
+				),
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
+			'background image style is applied when backgroundImage is a string' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage' => "url('https://example.com/image.jpg')",
+				),
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
+			'background image style with contain, position, attachment, and repeat is applied' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage'      => array(
+						'url' => 'https://example.com/image.jpg',
+					),
+					'backgroundRepeat'     => 'no-repeat',
+					'backgroundSize'       => 'contain',
+					'backgroundAttachment' => 'fixed',
+				),
+				'expected_wrapper'    => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
+			'background image style is appended if a style attribute already exists' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.com/image.jpg',
+					),
+				),
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red">Content</div>',
+			),
+			'background image style is appended if a style attribute containing multiple styles already exists' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-output',
+				'background_settings' => array(
+					'backgroundImage' => true,
+				),
+				'background_style'    => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.com/image.jpg',
+					),
+				),
+				'expected_wrapper'    => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
+				'wrapper'             => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
+			),
+			'background image style is not applied if the block does not support background image' => array(
+				'theme_name'          => 'block-theme-child-with-fluid-typography',
+				'block_name'          => 'test/background-rules-are-not-output',
+				'background_settings' => array(
+					'backgroundImage' => false,
+				),
+				'background_style'    => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.com/image.jpg',
+					),
+				),
+				'expected_wrapper'    => '<div>Content</div>',
+				'wrapper'             => '<div>Content</div>',
+			),
+		);
+	}
+}
diff --git a/phpunit/block-supports/block-style-variations-test.php b/phpunit/block-supports/block-style-variations-test.php
new file mode 100644
index 00000000000000..350efb34730764
--- /dev/null
+++ b/phpunit/block-supports/block-style-variations-test.php
@@ -0,0 +1,264 @@
+<?php
+
+/**
+ * Test the block style variations block support.
+ *
+ * @since 6.6.0
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Block_Style_Variations_Test extends WP_UnitTestCase {
+	/**
+	 * Administrator ID.
+	 *
+	 * @var int
+	 */
+	protected static $administrator_id;
+
+	/**
+	 * WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache property.
+	 *
+	 * @var ReflectionProperty
+	 */
+	private static $property_blocks_cache;
+
+	/**
+	 * Original value of the WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache property.
+	 *
+	 * @var array
+	 */
+	private static $property_blocks_cache_orig_value;
+
+	/**
+	 * WP_Theme_JSON_Resolver_Gutenberg::$core property.
+	 *
+	 * @var ReflectionProperty
+	 */
+	private static $property_core;
+
+	/**
+	 * Original value of the WP_Theme_JSON_Resolver_Gutenberg::$core property.
+	 *
+	 * @var WP_Theme_JSON_Gutenberg
+	 */
+	private static $property_core_orig_value;
+
+	/**
+	 * Theme root directory.
+	 *
+	 * @var string|null
+	 */
+	private $theme_root;
+
+	/**
+	 * Original theme directory.
+	 *
+	 * @var array|null
+	 */
+	private $orig_theme_dir;
+
+	public function set_up() {
+		parent::set_up();
+		$this->theme_root = realpath( dirname( __DIR__ ) . '/data/themedir1' );
+
+		$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+
+		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+
+		// Reset data between tests.
+		_gutenberg_clean_theme_json_caches();
+		parent::tear_down();
+	}
+
+	public function filter_set_theme_root() {
+		return $this->theme_root;
+	}
+
+	/**
+	 * Tests that block style variations registered via either
+	 * `gutenberg_register_block_style` with a style object, or a standalone
+	 * block style variation file within `/styles`, are added to the theme data.
+	 */
+	public function test_add_registered_block_styles_to_theme_data() {
+		switch_theme( 'block-theme' );
+
+		$variation_styles_data = array(
+			'color'    => array(
+				'background' => 'darkslateblue',
+				'text'       => 'lavender',
+			),
+			'blocks'   => array(
+				'core/heading' => array(
+					'color' => array(
+						'text' => 'violet',
+					),
+				),
+			),
+			'elements' => array(
+				'link' => array(
+					'color'  => array(
+						'text' => 'fuchsia',
+					),
+					':hover' => array(
+						'color' => array(
+							'text' => 'deeppink',
+						),
+					),
+				),
+			),
+		);
+
+		/*
+		 * This style is to be deliberately overwritten by the theme.json partial
+		 * See `phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json`.
+		 */
+		register_block_style(
+			'core/group',
+			array(
+				'name'       => 'WithSlug',
+				'style_data' => array(
+					'color' => array(
+						'background' => 'whitesmoke',
+						'text'       => 'black',
+					),
+				),
+			)
+		);
+		register_block_style(
+			'core/group',
+			array(
+				'name'       => 'my-variation',
+				'style_data' => $variation_styles_data,
+			)
+		);
+
+		$theme_json   = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+		$group_styles = $theme_json['styles']['blocks']['core/group'] ?? array();
+		$expected     = array(
+			'variations' => array(
+
+				/*
+				 * The following block style variations are registered
+				 * automatically from their respective JSON files within the
+				 * theme's `/styles` directory.
+				 */
+				'block-style-variation-a' => array(
+					'color' => array(
+						'background' => 'indigo',
+						'text'       => 'plum',
+					),
+				),
+				'block-style-variation-b' => array(
+					'color' => array(
+						'background' => 'midnightblue',
+						'text'       => 'lightblue',
+					),
+				),
+
+				/*
+				 * Manually registered variations.
+				 */
+				'WithSlug'                => array(
+					'color' => array(
+						'background' => 'aliceblue',
+						'text'       => 'midnightblue',
+					),
+				),
+				'my-variation'            => $variation_styles_data,
+			),
+		);
+
+		unregister_block_style( 'core/group', 'my-variation' );
+		unregister_block_style( 'core/group', 'WithSlug' );
+
+		$this->assertSameSetsWithIndex( $expected, $group_styles, 'Variation data does not match' );
+	}
+
+	/**
+	 * Tests that block style variations resolve any `ref` values when generating styles.
+	 */
+	public function test_block_style_variation_ref_values() {
+		switch_theme( 'block-theme' );
+
+		$variation_data = array(
+			'color'    => array(
+				'text'       => array(
+					'ref' => 'styles.does-not-exist',
+				),
+				'background' => array(
+					'ref' => 'styles.blocks.core/group.variations.block-style-variation-a.color.text',
+				),
+			),
+			'blocks'   => array(
+				'core/heading' => array(
+					'color' => array(
+						'text'       => array(
+							'ref' => 'styles.blocks.core/group.variations.block-style-variation-a.color.background',
+						),
+						'background' => array(
+							'ref' => '',
+						),
+					),
+				),
+			),
+			'elements' => array(
+				'link' => array(
+					'color'  => array(
+						'text'       => array(
+							'ref' => 'styles.blocks.core/group.variations.block-style-variation-b.color.text',
+						),
+						'background' => array(
+							'ref' => null,
+						),
+					),
+					':hover' => array(
+						'color' => array(
+							'text' => array(
+								'ref' => 'styles.blocks.core/group.variations.block-style-variation-b.color.background',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+
+		gutenberg_resolve_block_style_variation_ref_values( $variation_data, $theme_json );
+
+		$expected = array(
+			'color'    => array( 'background' => 'plum' ),
+			'blocks'   => array(
+				'core/heading' => array(
+					'color' => array( 'text' => 'indigo' ),
+				),
+			),
+			'elements' => array(
+				'link' => array(
+					'color'  => array( 'text' => 'lightblue' ),
+					':hover' => array(
+						'color' => array( 'text' => 'midnightblue' ),
+					),
+				),
+			),
+		);
+
+		$this->assertSameSetsWithIndex( $expected, $variation_data, 'Variation data with resolved ref values does not match' );
+	}
+}
diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php
index 7c8bd9975d35bb..510633b48aab59 100644
--- a/phpunit/block-supports/border-test.php
+++ b/phpunit/block-supports/border-test.php
@@ -36,7 +36,7 @@ private function register_bordered_block_with_support( $block_name, $supports =
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'borderColor' => array(
 						'type' => 'string',
@@ -128,11 +128,11 @@ public function test_flat_border_with_skipped_serialization() {
 			'test/flat-border-with-skipped-serialization',
 			array(
 				'__experimentalBorder' => array(
-					'color'                           => true,
-					'radius'                          => true,
-					'width'                           => true,
-					'style'                           => true,
-					'__experimentalSkipSerialization' => true,
+					'color'             => true,
+					'radius'            => true,
+					'width'             => true,
+					'style'             => true,
+					'skipSerialization' => true,
 				),
 			)
 		);
@@ -459,4 +459,375 @@ public function test_split_borders_with_named_colors() {
 
 		$this->assertSame( $expected, $actual );
 	}
+	/**
+	 * Tests that stabilized border supports will also apply to blocks using
+	 * the experimental syntax, for backwards compatibility with existing blocks.
+	 *
+	 * @covers ::gutenberg_apply_border_support
+	 */
+	public function test_should_apply_experimental_border_supports() {
+		$this->test_block_name = 'test/experimental-border-supports';
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'__experimentalBorder' => array(
+						'color'                         => true,
+						'radius'                        => true,
+						'style'                         => true,
+						'width'                         => true,
+						'__experimentalDefaultControls' => array(
+							'color'  => true,
+							'radius' => true,
+							'style'  => true,
+							'width'  => true,
+						),
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( $this->test_block_name );
+		$block_atts = array(
+			'style' => array(
+				'border' => array(
+					'color'  => '#72aee6',
+					'radius' => '10px',
+					'style'  => 'dashed',
+					'width'  => '2px',
+				),
+			),
+		);
+
+		$actual   = gutenberg_apply_border_support( $block_type, $block_atts );
+		$expected = array(
+			'class' => 'has-border-color',
+			'style' => 'border-color:#72aee6;border-radius:10px;border-style:dashed;border-width:2px;',
+		);
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Tests that stabilized border supports are applied correctly.
+	 *
+	 * @covers ::gutenberg_apply_border_support
+	 */
+	public function test_should_apply_stabilized_border_supports() {
+		$this->test_block_name = 'test/stabilized-border-supports';
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'border' => array(
+						'color'                         => true,
+						'radius'                        => true,
+						'style'                         => true,
+						'width'                         => true,
+						'__experimentalDefaultControls' => array(
+							'color'  => true,
+							'radius' => true,
+							'style'  => true,
+							'width'  => true,
+						),
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( $this->test_block_name );
+		$block_atts = array(
+			'style' => array(
+				'border' => array(
+					'color'  => '#72aee6',
+					'radius' => '10px',
+					'style'  => 'dashed',
+					'width'  => '2px',
+				),
+			),
+		);
+
+		$actual   = gutenberg_apply_border_support( $block_type, $block_atts );
+		$expected = array(
+			'class' => 'has-border-color',
+			'style' => 'border-color:#72aee6;border-radius:10px;border-style:dashed;border-width:2px;',
+		);
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Tests that experimental border support configuration gets stabilized correctly.
+	 */
+	public function test_should_stabilize_border_supports() {
+		$block_type_args = array(
+			'supports' => array(
+				'__experimentalBorder' => array(
+					'color'                           => true,
+					'radius'                          => true,
+					'style'                           => true,
+					'width'                           => true,
+					'__experimentalSkipSerialization' => true,
+					'__experimentalDefaultControls'   => array(
+						'color'  => true,
+						'radius' => true,
+						'style'  => true,
+						'width'  => true,
+					),
+				),
+			),
+		);
+
+		$actual   = gutenberg_stabilize_experimental_block_supports( $block_type_args );
+		$expected = array(
+			'supports' => array(
+				'border' => array(
+					'color'                           => true,
+					'radius'                          => true,
+					'style'                           => true,
+					'width'                           => true,
+					'skipSerialization'               => true,
+					// Has to be kept due to core's `wp_should_skip_block_supports_serialization` only checking the experimental flag until 6.8.
+					'__experimentalSkipSerialization' => true,
+					'defaultControls'                 => array(
+						'color'  => true,
+						'radius' => true,
+						'style'  => true,
+						'width'  => true,
+					),
+				),
+			),
+		);
+
+		$this->assertSame( $expected, $actual, 'Stabilized border block support config does not match.' );
+	}
+
+	/**
+	 * Tests the merging of border support configuration when stabilizing
+	 * experimental config. Due to the ability to filter block type args, plugins
+	 * or themes could filter using outdated experimental keys. While not every
+	 * permutation of filtering can be covered, the majority of use cases are
+	 * served best by merging configs based on the order they were defined if possible.
+	 */
+	public function test_should_stabilize_border_supports_using_order_based_merge() {
+		$experimental_border_config = array(
+			'color'                           => true,
+			'radius'                          => true,
+			'style'                           => true,
+			'width'                           => true,
+			'__experimentalSkipSerialization' => true,
+			'__experimentalDefaultControls'   => array(
+				'color'  => true,
+				'radius' => true,
+				'style'  => true,
+				'width'  => true,
+			),
+
+			/*
+			 * The following simulates theme/plugin filtering using `__experimentalBorder`
+			 * key but stable serialization and default control keys.
+			 */
+			'skipSerialization'               => false,
+			'defaultControls'                 => array(
+				'color'  => true,
+				'radius' => false,
+				'style'  => true,
+				'width'  => true,
+			),
+		);
+		$stable_border_config = array(
+			'color'                           => true,
+			'radius'                          => true,
+			'style'                           => false,
+			'width'                           => true,
+			'skipSerialization'               => false,
+			'defaultControls'                 => array(
+				'color'  => true,
+				'radius' => false,
+				'style'  => false,
+				'width'  => true,
+			),
+
+			/*
+			 * The following simulates theme/plugin filtering using stable `border` key
+			 * but experimental serialization and default control keys.
+			 */
+			'__experimentalSkipSerialization' => true,
+			'__experimentalDefaultControls'   => array(
+				'color'  => false,
+				'radius' => false,
+				'style'  => false,
+				'width'  => false,
+			),
+		);
+
+		$experimental_first_args = array(
+			'supports' => array(
+				'__experimentalBorder' => $experimental_border_config,
+				'border'               => $stable_border_config,
+			),
+		);
+
+		$actual   = gutenberg_stabilize_experimental_block_supports( $experimental_first_args );
+		$expected = array(
+			'supports' => array(
+				'border' => array(
+					'color'                           => true,
+					'radius'                          => true,
+					'style'                           => false,
+					'width'                           => true,
+					'skipSerialization'               => true,
+					'__experimentalSkipSerialization' => true,
+					'defaultControls'                 => array(
+						'color'  => false,
+						'radius' => false,
+						'style'  => false,
+						'width'  => false,
+					),
+
+				),
+			),
+		);
+		$this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when experimental keys are first.' );
+
+		$stable_first_args = array(
+			'supports' => array(
+				'border'               => $stable_border_config,
+				'__experimentalBorder' => $experimental_border_config,
+			),
+		);
+
+		$actual   = gutenberg_stabilize_experimental_block_supports( $stable_first_args );
+		$expected = array(
+			'supports' => array(
+				'border' => array(
+					'color'                           => true,
+					'radius'                          => true,
+					'style'                           => true,
+					'width'                           => true,
+					'skipSerialization'               => false,
+					'__experimentalSkipSerialization' => false,
+					'defaultControls'                 => array(
+						'color'  => true,
+						'radius' => false,
+						'style'  => true,
+						'width'  => true,
+					),
+				),
+			),
+		);
+		$this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when stable keys are first.' );
+	}
+
+	/**
+	 * Tests that boolean border support configurations are handled correctly.
+	 *
+	 * @dataProvider data_boolean_border_supports
+	 *
+	 * @param array         $supports       The supports configuration to test.
+	 * @param boolean|array $expected_value The expected final border support value.
+	 */
+	public function test_should_handle_boolean_border_supports( $supports, $expected_value ) {
+		$args = array(
+			'supports' => $supports,
+		);
+
+		$actual = gutenberg_stabilize_experimental_block_supports( $args );
+
+		$this->assertSame( $expected_value, $actual['supports']['border'] );
+	}
+
+	/**
+	 * Data provider for boolean border support tests.
+	 *
+	 * @return array Test parameters.
+	 */
+	public function data_boolean_border_supports() {
+		return array(
+			'experimental true only'                   => array(
+				array(
+					'__experimentalBorder' => true,
+				),
+				true,
+			),
+			'experimental false only'                  => array(
+				array(
+					'__experimentalBorder' => false,
+				),
+				false,
+			),
+			'experimental true before stable false'    => array(
+				array(
+					'__experimentalBorder' => true,
+					'border'               => false,
+				),
+				false,
+			),
+			'stable true before experimental false'    => array(
+				array(
+					'border'               => true,
+					'__experimentalBorder' => false,
+				),
+				false,
+			),
+			'experimental array before stable boolean' => array(
+				array(
+					'__experimentalBorder' => array(
+						'color' => true,
+						'width' => true,
+					),
+					'border'               => false,
+				),
+				false,
+			),
+			'stable array before experimental boolean' => array(
+				array(
+					'border'               => array(
+						'color' => true,
+						'width' => true,
+					),
+					'__experimentalBorder' => true,
+				),
+				true,
+			),
+			'experimental boolean before stable array' => array(
+				array(
+					'__experimentalBorder' => true,
+					'border'               => array(
+						'color' => true,
+						'width' => true,
+					),
+				),
+				array(
+					'color' => true,
+					'width' => true,
+				),
+			),
+			'stable boolean before experimental array' => array(
+				array(
+					'border'               => false,
+					'__experimentalBorder' => array(
+						'color' => true,
+						'width' => true,
+					),
+				),
+				array(
+					'color' => true,
+					'width' => true,
+				),
+			),
+		);
+	}
 }
diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
index f21f6477f4162a..310b7e6c525cbf 100644
--- a/phpunit/block-supports/colors-test.php
+++ b/phpunit/block-supports/colors-test.php
@@ -28,7 +28,7 @@ public function test_color_slugs_with_numbers_are_kebab_cased_properly() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'textColor'       => array(
 						'type' => 'string',
@@ -69,7 +69,7 @@ public function test_color_with_skipped_serialization_block_supports() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -107,7 +107,7 @@ public function test_gradient_with_individual_skipped_serialization_block_suppor
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php
index 2ec0859b7cb7f8..d428977c2c0a6d 100644
--- a/phpunit/block-supports/dimensions-test.php
+++ b/phpunit/block-supports/dimensions-test.php
@@ -28,7 +28,7 @@ public function test_dimensions_style_is_applied() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -64,7 +64,7 @@ public function test_dimensions_with_skipped_serialization_block_supports() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -99,7 +99,7 @@ public function test_min_height_with_individual_skipped_serialization_block_supp
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
diff --git a/phpunit/block-supports/elements-test.php b/phpunit/block-supports/elements-test.php
new file mode 100644
index 00000000000000..f7351c0eb26ab3
--- /dev/null
+++ b/phpunit/block-supports/elements-test.php
@@ -0,0 +1,312 @@
+<?php
+
+/**
+ * Test the elements block support.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Elements_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+	}
+
+	public function tear_down() {
+		WP_Style_Engine_CSS_Rules_Store_Gutenberg::remove_all_stores();
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	/**
+	 * Registers a test block type with the provided color block supports.
+	 *
+	 * @param array $color_settings The color block support settings used for elements.
+	 */
+	public function register_block_with_color_settings( $color_settings ) {
+		$this->test_block_name = 'test/element-block-supports';
+
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'color' => $color_settings,
+				),
+			)
+		);
+	}
+
+	/**
+	 * Tests that elements block support applies the correct classname.
+	 *
+	 * @covers ::gutenberg_render_elements_support
+	 *
+	 * @dataProvider data_elements_block_support_class
+	 *
+	 * @param array  $color_settings  The color block support settings used for elements support.
+	 * @param array  $elements_styles The elements styles within the block attributes.
+	 * @param string $block_markup    Original block markup.
+	 * @param string $expected_markup Resulting markup after application of elements block support.
+	 */
+	public function test_elements_block_support_class( $color_settings, $elements_styles, $block_markup, $expected_markup ) {
+		$this->register_block_with_color_settings( $color_settings );
+
+		$block = array(
+			'blockName' => $this->test_block_name,
+			'attrs'     => array(
+				'style' => array(
+					'elements' => $elements_styles,
+				),
+			),
+		);
+
+		/*
+		 * To ensure a consistent elements class name it is generated within a
+		 * `render_block_data` filter and stored in the `className` attribute.
+		 * As a result the block data needs to be passed through the same
+		 * function for this test.
+		 */
+		$filtered_block = gutenberg_render_elements_support_styles( $block );
+		$actual         = gutenberg_render_elements_class_name( $block_markup, $filtered_block );
+
+		$this->assertMatchesRegularExpression(
+			$expected_markup,
+			$actual,
+			'Elements block wrapper markup should be correct'
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_elements_block_support_class() {
+		$color_styles = array(
+			'text'       => 'var:preset|color|vivid-red',
+			'background' => '#fff',
+		);
+
+		return array(
+			'button element styles with serialization skipped' => array(
+				'color_settings'  => array(
+					'button'                          => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'button' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'link element styles with serialization skipped' => array(
+				'color_settings'  => array(
+					'link'                            => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'link' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'heading element styles with serialization skipped' => array(
+				'color_settings'  => array(
+					'heading'                         => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'heading' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'button element styles apply class to wrapper' => array(
+				'color_settings'  => array( 'button' => true ),
+				'elements_styles' => array(
+					'button' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'link element styles apply class to wrapper'   => array(
+				'color_settings'  => array( 'link' => true ),
+				'elements_styles' => array(
+					'link' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'heading element styles apply class to wrapper' => array(
+				'color_settings'  => array( 'heading' => true ),
+				'elements_styles' => array(
+					'heading' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'element styles apply class to wrapper when it has other classes' => array(
+				'color_settings'  => array( 'link' => true ),
+				'elements_styles' => array(
+					'link' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p class="has-dark-gray-background-color has-background">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p class="has-dark-gray-background-color has-background wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+			'element styles apply class to wrapper when it has other attributes' => array(
+				'color_settings'  => array( 'link' => true ),
+				'elements_styles' => array(
+					'link' => array( 'color' => $color_styles ),
+				),
+				'block_markup'    => '<p id="anchor">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
+				'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}" id="anchor">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
+			),
+		);
+	}
+
+	/**
+	 * Tests that elements block support generates appropriate styles.
+	 *
+	 * @covers ::gutenberg_render_elements_support_styles
+	 *
+	 * @dataProvider data_elements_block_support_styles
+	 *
+	 * @param mixed  $color_settings  The color block support settings used for elements support.
+	 * @param mixed  $elements_styles The elements styles within the block attributes.
+	 * @param string $expected_styles Expected styles enqueued by the style engine.
+	 */
+	public function test_elements_block_support_styles( $color_settings, $elements_styles, $expected_styles ) {
+		$this->register_block_with_color_settings( $color_settings );
+
+		$block = array(
+			'blockName' => $this->test_block_name,
+			'attrs'     => array(
+				'style' => array(
+					'elements' => $elements_styles,
+				),
+			),
+		);
+
+		gutenberg_render_elements_support_styles( $block );
+		$actual_stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'block-supports' );
+
+		$this->assertMatchesRegularExpression(
+			$expected_styles,
+			$actual_stylesheet,
+			'Elements style rules output should be correct'
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_elements_block_support_styles() {
+		$color_styles    = array(
+			'text'       => 'var:preset|color|vivid-red',
+			'background' => '#fff',
+		);
+		$color_css_rules = preg_quote( '{color:var(--wp--preset--color--vivid-red);background-color:#fff;}' );
+
+		return array(
+			'button element styles are not applied if serialization is skipped' => array(
+				'color_settings'  => array(
+					'button'                          => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'button' => array( 'color' => $color_styles ),
+				),
+				'expected_styles' => '/^$/',
+			),
+			'link element styles are not applied if serialization is skipped' => array(
+				'color_settings'  => array(
+					'link'                            => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'link' => array(
+						'color'  => $color_styles,
+						':hover' => array(
+							'color' => $color_styles,
+						),
+					),
+				),
+				'expected_styles' => '/^$/',
+			),
+			'heading element styles are not applied if serialization is skipped' => array(
+				'color_settings'  => array(
+					'heading'                         => true,
+					'__experimentalSkipSerialization' => true,
+				),
+				'elements_styles' => array(
+					'heading' => array( 'color' => $color_styles ),
+					'h1'      => array( 'color' => $color_styles ),
+					'h2'      => array( 'color' => $color_styles ),
+					'h3'      => array( 'color' => $color_styles ),
+					'h4'      => array( 'color' => $color_styles ),
+					'h5'      => array( 'color' => $color_styles ),
+					'h6'      => array( 'color' => $color_styles ),
+				),
+				'expected_styles' => '/^$/',
+			),
+			'button element styles are applied'          => array(
+				'color_settings'  => array( 'button' => true ),
+				'elements_styles' => array(
+					'button' => array( 'color' => $color_styles ),
+				),
+				'expected_styles' => '/^.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/',
+			),
+			'link element styles are applied'            => array(
+				'color_settings'  => array( 'link' => true ),
+				'elements_styles' => array(
+					'link' => array(
+						'color'  => $color_styles,
+						':hover' => array(
+							'color' => $color_styles,
+						),
+					),
+				),
+				'expected_styles' => '/^.wp-elements-[a-f0-9]{32} a:where\(:not\(.wp-element-button\)\)' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} a:where\(:not\(.wp-element-button\)\):hover' . $color_css_rules . '$/',
+			),
+			'generic heading element styles are applied' => array(
+				'color_settings'  => array( 'heading' => true ),
+				'elements_styles' => array(
+					'heading' => array( 'color' => $color_styles ),
+				),
+				'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
+			),
+			'individual heading element styles are applied' => array(
+				'color_settings'  => array( 'heading' => true ),
+				'elements_styles' => array(
+					'h1' => array( 'color' => $color_styles ),
+					'h2' => array( 'color' => $color_styles ),
+					'h3' => array( 'color' => $color_styles ),
+					'h4' => array( 'color' => $color_styles ),
+					'h5' => array( 'color' => $color_styles ),
+					'h6' => array( 'color' => $color_styles ),
+				),
+				'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} h2' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} h3' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} h4' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} h5' . $color_css_rules .
+					'.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
+			),
+		);
+	}
+}
diff --git a/phpunit/block-supports/layout-test.php b/phpunit/block-supports/layout-test.php
index a22d77cf35408e..dd40283171e5cd 100644
--- a/phpunit/block-supports/layout-test.php
+++ b/phpunit/block-supports/layout-test.php
@@ -7,6 +7,21 @@
  */
 
 class WP_Block_Supports_Layout_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $theme_root;
+
+	/**
+	 * @var array|null
+	 */
+	private $orig_theme_dir;
+
+	/**
+	 * @var array|null
+	 */
+	private $queries;
+
 	public function set_up() {
 		parent::set_up();
 		$this->theme_root     = realpath( __DIR__ . '/../data/themedir1' );
@@ -173,7 +188,7 @@ public function data_gutenberg_get_layout_style() {
 					'has_block_gap_support' => true,
 					'gap_value'             => '1em',
 				),
-				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
+				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
 			),
 			'skip serialization should return empty value' => array(
 				'args'            => array(
@@ -190,7 +205,7 @@ public function data_gutenberg_get_layout_style() {
 					'has_block_gap_support' => true,
 					'gap_value'             => array( 'top' => '1em' ),
 				),
-				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
+				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout > * + *{margin-block-start:1em;margin-block-end:0;}',
 			),
 			'constrained layout with sizes'                => array(
 				'args'            => array(
@@ -229,7 +244,7 @@ public function data_gutenberg_get_layout_style() {
 					'has_block_gap_support' => true,
 					'gap_value'             => '2.5rem',
 				),
-				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
+				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
 			),
 			'constrained layout with axial block gap support' => array(
 				'args'            => array(
@@ -240,7 +255,7 @@ public function data_gutenberg_get_layout_style() {
 					'has_block_gap_support' => true,
 					'gap_value'             => array( 'top' => '2.5rem' ),
 				),
-				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
+				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout > * + *{margin-block-start:2.5rem;margin-block-end:0;}',
 			),
 			'constrained layout with block gap support and spacing preset' => array(
 				'args'            => array(
@@ -251,7 +266,7 @@ public function data_gutenberg_get_layout_style() {
 					'has_block_gap_support' => true,
 					'gap_value'             => 'var:preset|spacing|50',
 				),
-				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout.wp-layout > * + *{margin-block-start:var(--wp--preset--spacing--50);margin-block-end:0;}',
+				'expected_output' => '.wp-layout > *{margin-block-start:0;margin-block-end:0;}.wp-layout > * + *{margin-block-start:var(--wp--preset--spacing--50);margin-block-end:0;}',
 			),
 			'flex layout with no args should return empty value' => array(
 				'args'            => array(
@@ -347,7 +362,26 @@ public function data_gutenberg_get_layout_style() {
 						'verticalAlignment' => 'bottom',
 					),
 				),
-				'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;}',
+				'expected_output' => '.wp-layout{flex-wrap:nowrap;flex-direction:column;align-items:flex-start;justify-content:flex-end;}',
+			),
+			'default grid layout'                          => array(
+				'args'            => array(
+					'selector' => '.wp-layout',
+					'layout'   => array(
+						'type' => 'grid',
+					),
+				),
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(auto-fill, minmax(min(12rem, 100%), 1fr));container-type:inline-size;}',
+			),
+			'grid layout with columnCount'                 => array(
+				'args'            => array(
+					'selector' => '.wp-layout',
+					'layout'   => array(
+						'type'        => 'grid',
+						'columnCount' => 3,
+					),
+				),
+				'expected_output' => '.wp-layout{grid-template-columns:repeat(3, minmax(0, 1fr));}',
 			),
 			'default layout with blockGap to verify converting gap value into valid CSS' => array(
 				'args'            => array(
@@ -361,7 +395,201 @@ public function data_gutenberg_get_layout_style() {
 						'blockGap' => 'var(--wp--preset--spacing--70)',
 					),
 				),
-				'expected_output' => '.wp-block-group.wp-container-6 > *{margin-block-start:0;margin-block-end:0;}.wp-block-group.wp-container-6.wp-block-group.wp-container-6 > * + *{margin-block-start:var(--wp--preset--spacing--70);margin-block-end:0;}',
+				'expected_output' => '.wp-block-group.wp-container-6 > *{margin-block-start:0;margin-block-end:0;}.wp-block-group.wp-container-6 > * + *{margin-block-start:var(--wp--preset--spacing--70);margin-block-end:0;}',
+			),
+		);
+	}
+
+	/**
+	 * Check that gutenberg_render_layout_support_flag() renders the correct classnames on the wrapper.
+	 *
+	 * @dataProvider data_layout_support_flag_renders_classnames_on_wrapper
+	 *
+	 * @covers ::gutenberg_render_layout_support_flag
+	 *
+	 * @param array  $args            Dataset to test.
+	 * @param string $expected_output The expected output.
+	 */
+	public function test_layout_support_flag_renders_classnames_on_wrapper( $args, $expected_output ) {
+		switch_theme( 'default' );
+		$actual_output = gutenberg_render_layout_support_flag( $args['block_content'], $args['block'] );
+		$this->assertEquals( $expected_output, $actual_output );
+	}
+
+	/**
+	 * Data provider for test_layout_support_flag_renders_classnames_on_wrapper.
+	 *
+	 * @return array
+	 */
+	public function data_layout_support_flag_renders_classnames_on_wrapper() {
+		return array(
+			'single wrapper block layout with flow type'   => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group"></div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"></div>',
+			),
+			'single wrapper block layout with constrained type' => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'constrained',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group"></div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
+			),
+			'multiple wrapper block layout with flow type' => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper"></div></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper"></div></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group"><div class="wp-block-group__inner-wrapper">',
+							' ',
+							' </div></div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-wrapper is-layout-flow wp-block-group-is-layout-flow"></div></div>',
+			),
+			'block with child layout'                      => array(
+				'args'            => array(
+					'block_content' => '<p>Some text.</p>',
+					'block'         => array(
+						'blockName'    => 'core/paragraph',
+						'attrs'        => array(
+							'style' => array(
+								'layout' => array(
+									'columnSpan' => '2',
+								),
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<p>Some text.</p>',
+						'innerContent' => array(
+							'<p>Some text.</p>',
+						),
+					),
+				),
+				'expected_output' => '<p class="wp-container-content-1">Some text.</p>', // The generated classname number assumes `wp_unique_prefixed_id( 'wp-container-content-' )` will not have run previously in this test.
+			),
+		);
+	}
+
+	/**
+	 * Check that gutenberg_restore_group_inner_container() restores the legacy inner container on the Group block.
+	 *
+	 * @dataProvider data_restore_group_inner_container
+	 *
+	 * @covers ::gutenberg_restore_group_inner_container
+	 *
+	 * @param array  $args            Dataset to test.
+	 * @param string $expected_output The expected output.
+	 */
+	public function test_restore_group_inner_container( $args, $expected_output ) {
+		$actual_output = gutenberg_restore_group_inner_container( $args['block_content'], $args['block'] );
+		$this->assertEquals( $expected_output, $actual_output );
+	}
+
+	/**
+	 * Data provider for test_restore_group_inner_container.
+	 *
+	 * @return array
+	 */
+	public function data_restore_group_inner_container() {
+		return array(
+			'group block with existing inner container'    => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group"><div class="wp-block-group__inner-container">',
+							' ',
+							' </div></div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+			),
+			'group block with no existing inner container' => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group">',
+							' ',
+							' </div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div>',
+			),
+			'group block with layout classnames'           => array(
+				'args'            => array(
+					'block_content' => '<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"></div>',
+					'block'         => array(
+						'blockName'    => 'core/group',
+						'attrs'        => array(
+							'layout' => array(
+								'type' => 'default',
+							),
+						),
+						'innerBlocks'  => array(),
+						'innerHTML'    => '<div class="wp-block-group"></div>',
+						'innerContent' => array(
+							'<div class="wp-block-group">',
+							' ',
+							' </div>',
+						),
+					),
+				),
+				'expected_output' => '<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"></div></div>',
 			),
 		);
 	}
diff --git a/phpunit/block-supports/position-test.php b/phpunit/block-supports/position-test.php
new file mode 100644
index 00000000000000..d9f97060cf6478
--- /dev/null
+++ b/phpunit/block-supports/position-test.php
@@ -0,0 +1,172 @@
+<?php
+
+/**
+ * Test the position block support.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Position_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	/**
+	 * Theme root directory.
+	 *
+	 * @var string
+	 */
+	private $theme_root;
+
+	/**
+	 * Original theme directory.
+	 *
+	 * @var string
+	 */
+	private $orig_theme_dir;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+		$this->theme_root      = realpath( __DIR__ . '/../data/themedir1' );
+		$this->orig_theme_dir  = $GLOBALS['wp_theme_directories'];
+
+		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+		WP_Style_Engine_CSS_Rules_Store_Gutenberg::remove_all_stores();
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	public function filter_set_theme_root() {
+		return $this->theme_root;
+	}
+
+	/**
+	 * Tests that position block support works as expected.
+	 *
+	 * @covers ::gutenberg_render_position_support
+	 *
+	 * @dataProvider data_position_block_support
+	 *
+	 * @param string $theme_name        The theme to switch to.
+	 * @param string $block_name        The test block name to register.
+	 * @param mixed  $position_settings The position block support settings.
+	 * @param mixed  $position_style    The position styles within the block attributes.
+	 * @param string $expected_wrapper  Expected markup for the block wrapper.
+	 * @param string $expected_styles   Expected styles enqueued by the style engine.
+	 */
+	public function test_position_block_support( $theme_name, $block_name, $position_settings, $position_style, $expected_wrapper, $expected_styles ) {
+		switch_theme( $theme_name );
+		$this->test_block_name = $block_name;
+
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'position' => $position_settings,
+				),
+			)
+		);
+
+		$block = array(
+			'blockName' => 'test/position-rules-are-output',
+			'attrs'     => array(
+				'style' => array(
+					'position' => $position_style,
+				),
+			),
+		);
+
+		$actual = gutenberg_render_position_support( '<div>Content</div>', $block );
+
+		$this->assertMatchesRegularExpression(
+			$expected_wrapper,
+			$actual,
+			'Position block wrapper markup should be correct'
+		);
+
+		$actual_stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'block-supports' );
+
+		$this->assertMatchesRegularExpression(
+			$expected_styles,
+			$actual_stylesheet,
+			'Position style rules output should be correct'
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_position_block_support() {
+		return array(
+			'sticky position style is applied' => array(
+				'theme_name'        => 'block-theme-child-with-fluid-typography',
+				'block_name'        => 'test/position-rules-are-output',
+				'position_settings' => true,
+				'position_style'    => array(
+					'type' => 'sticky',
+					'top'  => '0px',
+				),
+				'expected_wrapper'  => '/^<div class="wp-container-\d+ is-position-sticky">Content<\/div>$/',
+				'expected_styles'   => '/^.wp-container-\d+' . preg_quote( '{top:calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));position:sticky;z-index:10;}' ) . '$/',
+			),
+			'sticky position style is not applied if theme does not support it' => array(
+				'theme_name'        => 'default',
+				'block_name'        => 'test/position-rules-without-theme-support',
+				'position_settings' => true,
+				'position_style'    => array(
+					'type' => 'sticky',
+					'top'  => '0px',
+				),
+				'expected_wrapper'  => '/^<div>Content<\/div>$/',
+				'expected_styles'   => '/^$/',
+			),
+			'sticky position style is not applied if block does not support it' => array(
+				'theme_name'        => 'block-theme-child-with-fluid-typography',
+				'block_name'        => 'test/position-rules-without-block-support',
+				'position_settings' => false,
+				'position_style'    => array(
+					'type' => 'sticky',
+					'top'  => '0px',
+				),
+				'expected_wrapper'  => '/^<div>Content<\/div>$/',
+				'expected_styles'   => '/^$/',
+			),
+			'sticky position style is not applied if type is not valid' => array(
+				'theme_name'        => 'block-theme-child-with-fluid-typography',
+				'block_name'        => 'test/position-rules-with-valid-type',
+				'position_settings' => true,
+				'position_style'    => array(
+					'type' => 'illegal-type',
+					'top'  => '0px',
+				),
+				'expected_wrapper'  => '/^<div>Content<\/div>$/',
+				'expected_styles'   => '/^$/',
+			),
+		);
+	}
+}
diff --git a/phpunit/block-supports/shadow-test.php b/phpunit/block-supports/shadow-test.php
new file mode 100644
index 00000000000000..c2fc0defe8199c
--- /dev/null
+++ b/phpunit/block-supports/shadow-test.php
@@ -0,0 +1,112 @@
+<?php
+
+/**
+ * Test the shadow block supports.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Block_Supports_Shadow_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $test_block_name;
+
+	public function set_up() {
+		parent::set_up();
+		$this->test_block_name = null;
+	}
+
+	public function tear_down() {
+		unregister_block_type( $this->test_block_name );
+		$this->test_block_name = null;
+		parent::tear_down();
+	}
+
+	/**
+	 * Registers a new block for testing shadow support.
+	 *
+	 * @param string $block_name Name for the test block.
+	 * @param array  $supports   Array defining block support configuration.
+	 *
+	 * @return WP_Block_Type The block type for the newly registered test block.
+	 */
+	private function register_shadow_block_with_support( $block_name, $supports = array() ) {
+		$this->test_block_name = $block_name;
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => $supports,
+			)
+		);
+		$registry = WP_Block_Type_Registry::get_instance();
+
+		return $registry->get_registered( $this->test_block_name );
+	}
+
+	/**
+	 * Tests the generation of shadow block support styles.
+	 *
+	 * @dataProvider data_generate_shadow_fixtures
+	 *
+	 * @param boolean|array $support Shadow block support configuration.
+	 * @param string        $value   Shadow style value for style attribute object.
+	 * @param array         $expected       Expected shadow block support styles.
+	 */
+	public function test_gutenberg_apply_shadow_support( $support, $value, $expected ) {
+		$block_type  = self::register_shadow_block_with_support(
+			'test/shadow-block',
+			array( 'shadow' => $support )
+		);
+		$block_attrs = array( 'style' => array( 'shadow' => $value ) );
+		$actual      = gutenberg_apply_shadow_support( $block_type, $block_attrs );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_generate_shadow_fixtures() {
+		return array(
+			'with no styles'               => array(
+				'support'  => true,
+				'value'    => '',
+				'expected' => array(),
+			),
+			'without support'              => array(
+				'support'  => false,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+			'with single shadow'           => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000;' ),
+			),
+			'with comma separated shadows' => array(
+				'support'  => true,
+				'value'    => '1px 1px 1px #000, 2px 2px 2px #fff',
+				'expected' => array( 'style' => 'box-shadow:1px 1px 1px #000, 2px 2px 2px #fff;' ),
+			),
+			'with preset shadow'           => array(
+				'support'  => true,
+				'value'    => 'var:preset|shadow|natural',
+				'expected' => array( 'style' => 'box-shadow:var(--wp--preset--shadow--natural);' ),
+			),
+			'with serialization skipped'   => array(
+				'support'  => array( '__experimentalSkipSerialization' => true ),
+				'value'    => '1px 1px 1px #000',
+				'expected' => array(),
+			),
+		);
+	}
+}
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 1ac0c86e620428..93df6f55ac109e 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -28,7 +28,7 @@ public function test_spacing_style_is_applied() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -73,7 +73,7 @@ public function test_spacing_with_skipped_serialization_block_supports() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -117,7 +117,7 @@ public function test_margin_with_individual_skipped_serialization_block_supports
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 63fd98d1e524ff..1804659c11af3c 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -78,7 +78,7 @@ public function test_should_kebab_case_font_size_slug_with_numbers() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'fontSize' => array(
 						'type' => 'string',
@@ -112,7 +112,7 @@ public function test_should_generate_font_family_with_legacy_inline_styles_using
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -145,7 +145,7 @@ public function test_should_skip_serialization_for_typography_block_supports() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -191,7 +191,7 @@ public function test_should_skip_serialization_for_letter_spacing_block_supports
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -227,7 +227,7 @@ public function test_should_generate_css_var_for_font_family_with_legacy_inline_
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -260,7 +260,7 @@ public function test_should_generate_classname_for_font_family() {
 		register_block_type(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -283,6 +283,111 @@ public function test_should_generate_classname_for_font_family() {
 		$this->assertSame( $expected, $actual );
 	}
 
+	/**
+	 * Tests that stabilized typography supports will also apply to blocks using
+	 * the experimental syntax, for backwards compatibility with existing blocks.
+	 *
+	 * @covers ::gutenberg_apply_typography_support
+	 */
+	public function test_should_apply_experimental_typography_supports() {
+		$this->test_block_name = 'test/experimental-typography-supports';
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'typography' => array(
+						'__experimentalFontFamily'     => true,
+						'__experimentalFontStyle'      => true,
+						'__experimentalFontWeight'     => true,
+						'__experimentalLetterSpacing'  => true,
+						'__experimentalTextDecoration' => true,
+						'__experimentalTextTransform'  => true,
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( $this->test_block_name );
+		$block_atts = array(
+			'fontFamily' => 'serif',
+			'style'      => array(
+				'typography' => array(
+					'fontStyle'      => 'italic',
+					'fontWeight'     => 'bold',
+					'letterSpacing'  => '1px',
+					'textDecoration' => 'underline',
+					'textTransform'  => 'uppercase',
+				),
+			),
+		);
+
+		$actual   = gutenberg_apply_typography_support( $block_type, $block_atts );
+		$expected = array(
+			'class' => 'has-serif-font-family',
+			'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;',
+		);
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Tests that stabilized typography supports are applied correctly.
+	 *
+	 * @covers ::gutenberg_apply_typography_support
+	 */
+	public function test_should_apply_stabilized_typography_supports() {
+		$this->test_block_name = 'test/experimental-typography-supports';
+		register_block_type(
+			$this->test_block_name,
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'style' => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'typography' => array(
+						'fontFamily'     => true,
+						'fontStyle'      => true,
+						'fontWeight'     => true,
+						'letterSpacing'  => true,
+						'textDecoration' => true,
+						'textTransform'  => true,
+					),
+				),
+			)
+		);
+		$registry   = WP_Block_Type_Registry::get_instance();
+		$block_type = $registry->get_registered( $this->test_block_name );
+		$block_atts = array(
+			'fontFamily' => 'serif',
+			'style'      => array(
+				'typography' => array(
+					'fontStyle'      => 'italic',
+					'fontWeight'     => 'bold',
+					'letterSpacing'  => '1px',
+					'textDecoration' => 'underline',
+					'textTransform'  => 'uppercase',
+				),
+			),
+		);
+
+		$actual   = gutenberg_apply_typography_support( $block_type, $block_atts );
+		$expected = array(
+			'class' => 'has-serif-font-family',
+			'style' => 'font-style:italic;font-weight:bold;text-decoration:underline;text-transform:uppercase;letter-spacing:1px;',
+		);
+
+		$this->assertSame( $expected, $actual );
+	}
+
 	/**
 	 * Tests generating font size values, including fluid formulae, from fontSizes preset.
 	 *
@@ -299,11 +404,11 @@ public function test_should_generate_classname_for_font_family() {
 	 *     @type string $slug Kebab-case unique identifier for the font size preset.
 	 *     @type string $size CSS font-size value, including units where applicable.
 	 * }
-	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+	 * @param bool   $settings        Theme JSON settings array that overrides any global theme settings.
 	 * @param string $expected_output Expected output of gutenberg_get_typography_font_size_value().
 	 */
-	public function test_gutenberg_get_typography_font_size_value( $font_size, $should_use_fluid_typography, $expected_output ) {
-		$actual = gutenberg_get_typography_font_size_value( $font_size, $should_use_fluid_typography );
+	public function test_gutenberg_get_typography_font_size_value( $font_size, $settings, $expected_output ) {
+		$actual = gutenberg_get_typography_font_size_value( $font_size, $settings );
 
 		$this->assertSame( $expected_output, $actual );
 	}
@@ -316,240 +421,632 @@ public function test_gutenberg_get_typography_font_size_value( $font_size, $shou
 	public function data_generate_font_size_preset_fixtures() {
 		return array(
 			'returns value when fluid typography is deactivated' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '28px',
 				),
-				'should_use_fluid_typography' => false,
-				'expected_output'             => '28px',
+				'settings'        => null,
+				'expected_output' => '28px',
 			),
 
 			'returns value where font size is 0'         => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => 0,
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 0,
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 0,
 			),
 
 			"returns value where font size is '0'"       => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '0',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '0',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => '0',
 			),
 
 			'returns value where `size` is `null`'       => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => null,
 				),
-				'should_use_fluid_typography' => false,
-				'expected_output'             => null,
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => null,
 			),
 
 			'returns value when fluid is `false`'        => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '28px',
 					'fluid' => false,
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '28px',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => false,
+					),
+				),
+				'expected_output' => '28px',
+			),
+
+			'returns value when fluid is empty array'    => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => array(),
+					),
+				),
+				'expected_output' => '28px',
+			),
+
+			'returns clamp value with minViewportWidth override' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => array(
+							'minViewportWidth' => '500px',
+						),
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
+			),
+
+			'returns clamp value with maxViewportWidth override' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => array(
+							'maxViewportWidth' => '500px',
+						),
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			),
+
+			'returns clamp value with layout.wideSize override' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+					'layout'     => array(
+						'wideSize' => '500px',
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
 			),
 
 			'returns already clamped value'              => array(
-				'font_size'                   => array(
-					'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					'fluid' => false,
+				'font_size'       => array(
+					'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
 			),
 
 			'returns value with unsupported unit'        => array(
-				'font_size'                   => array(
-					'size'  => '1000%',
-					'fluid' => false,
+				'font_size'       => array(
+					'size' => '1000%',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '1000%',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => '1000%',
 			),
 
 			'returns clamp value with rem min and max units' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '1.75rem',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
 			),
 
 			'returns clamp value with em min and max units' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '1.75em',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
 			),
 
 			'returns clamp value for floats'             => array(
-				'font_size'                   => array(
-					'size' => '100.175px',
+				'font_size'       => array(
+					'size' => '70.175px',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			),
 
 			'coerces integer to `px` and returns clamp value' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => 33,
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
 			),
 
 			'coerces float to `px` and returns clamp value' => array(
-				'font_size'                   => array(
-					'size' => 100.23,
+				'font_size'       => array(
+					'size' => 70.175,
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			),
 
 			'returns clamp value when `fluid` is empty array' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '28px',
 					'fluid' => array(),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			),
 
 			'returns clamp value when `fluid` is `null`' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '28px',
 					'fluid' => null,
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			),
+
+			'returns clamp value where min and max fluid values defined' => array(
+				'font_size'       => array(
+					'size'  => '80px',
+					'fluid' => array(
+						'min' => '70px',
+						'max' => '125px',
+					),
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
+			),
+
+			'returns clamp value where max is equal to size' => array(
+				'font_size'       => array(
+					'size'  => '7.8125rem',
+					'fluid' => array(
+						'min' => '4.375rem',
+						'max' => '7.8125rem',
+					),
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
 			),
 
 			'returns clamp value if min font size is greater than max' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '3rem',
 					'fluid' => array(
 						'min' => '5rem',
 						'max' => '32px',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
 			),
 
 			'returns value with invalid min/max fluid units' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '10em',
 					'fluid' => array(
 						'min' => '20vw',
 						'max' => '50%',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '10em',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => '10em',
 			),
 
 			'returns value when size is < lower bounds and no fluid min/max set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '3px',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '3px',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => '3px',
 			),
 
 			'returns value when size is equal to lower bounds and no fluid min/max set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size' => '14px',
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => '14px',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => '14px',
 			),
 
 			'returns clamp value with different min max units' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '28px',
 					'fluid' => array(
 						'min' => '20px',
 						'max' => '50rem',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
 			),
 
 			'returns clamp value where no fluid max size is set' => array(
-				'font_size'                   => array(
-					'size'  => '28px',
+				'font_size'       => array(
+					'size'  => '50px',
 					'fluid' => array(
 						'min' => '2.6rem',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
 			),
 
 			'returns clamp value where no fluid min size is set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '28px',
 					'fluid' => array(
 						'max' => '80px',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
 			),
 
 			'should not apply lower bound test when fluid values are set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '1.5rem',
 					'fluid' => array(
 						'min' => '0.5rem',
 						'max' => '5rem',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
 			),
 
 			'should not apply lower bound test when only fluid min is set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '20px',
 					'fluid' => array(
 						'min' => '12px',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
 			),
 
 			'should not apply lower bound test when only fluid max is set' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '0.875rem',
 					'fluid' => array(
 						'max' => '20rem',
 					),
 				),
-				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
 			),
 
 			'returns clamp value when min and max font sizes are equal' => array(
-				'font_size'                   => array(
+				'font_size'       => array(
 					'size'  => '4rem',
 					'fluid' => array(
 						'min' => '30px',
 						'max' => '30px',
 					),
 				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
+			),
+
+			'should apply scaled min font size for em values when custom min font size is not set' => array(
+				'font_size'       => array(
+					'size' => '12rem',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
+			),
+
+			'should apply scaled min font size for px values when custom min font size is not set' => array(
+				'font_size'       => array(
+					'size' => '200px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
+			),
+
+			'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
+				'font_size'       => array(
+					'size'  => '200px',
+					'fluid' => array(
+						'min' => '100px',
+					),
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => true,
+					),
+				),
+				'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
+			),
+
+			// Individual preset settings override global settings.
+			'should convert individual preset size to fluid if fluid is disabled in global settings' => array(
+				'font_size'       => array(
+					'size'  => '17px',
+					'fluid' => true,
+				),
+				'settings'        => array(
+					'typography' => array(),
+				),
+				'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
+			),
+			'should use individual preset settings if fluid is disabled in global settings' => array(
+				'font_size'       => array(
+					'size'  => '17px',
+					'fluid' => array(
+						'min' => '16px',
+						'max' => '26px',
+					),
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => false,
+					),
+				),
+				'expected_output' => 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
+			),
+		);
+	}
+
+	/**
+	 * Tests backwards compatibility for deprecated second argument $should_use_fluid_typography.
+	 *
+	 * @covers ::wp_get_typography_font_size_value
+	 *
+	 * @expectedDeprecated gutenberg_get_typography_font_size_value
+	 *
+	 * @dataProvider data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures
+	 *
+	 * @param array  $font_size                     {
+	 *     Required. A font size as represented in the fontSizes preset format as seen in theme.json.
+	 *
+	 *     @type string $name Name of the font size preset.
+	 *     @type string $slug Kebab-case unique identifier for the font size preset.
+	 *     @type string $size CSS font-size value, including units where applicable.
+	 * }
+	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+	 * @param string $expected_output Expected output of gutenberg_get_typography_font_size_value().
+	 */
+	public function test_gutenberg_get_typography_font_size_value_should_use_fluid_typography_deprecated( $font_size, $should_use_fluid_typography, $expected_output ) {
+		$actual = gutenberg_get_typography_font_size_value( $font_size, $should_use_fluid_typography );
+
+		$this->assertSame( $expected_output, $actual );
+	}
+
+	/**
+	 * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated.
+	 *
+	 * @return array
+	 */
+	public function data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures() {
+		return array(
+			'returns value when fluid typography is deactivated' => array(
+				'font_size'                   => array(
+					'size' => '28px',
+				),
+				'should_use_fluid_typography' => false,
+				'expected_output'             => '28px',
+			),
+			'returns clamp value when fluid typography is activated' => array(
+				'font_size'                   => array(
+					'size' => '28px',
+				),
 				'should_use_fluid_typography' => true,
-				'expected_output'             => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
+				'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			),
+		);
+	}
+
+	/**
+	 * Tests that theme json settings passed to gutenberg_get_typography_font_size_value
+	 * override global theme settings.
+	 *
+	 * @covers ::gutenberg_get_typography_font_size_value
+	 *
+	 * @dataProvider data_generate_should_override_theme_settings_fixtures
+	 *
+	 * @param array  $font_size                     {
+	 *     Required. A font size as represented in the fontSizes preset format as seen in theme.json.
+	 *
+	 *     @type string $name Name of the font size preset.
+	 *     @type string $slug Kebab-case unique identifier for the font size preset.
+	 *     @type string $size CSS font-size value, including units where applicable.
+	 * }
+	 * @param bool   $settings        Theme JSON settings array that overrides any global theme settings.
+	 * @param string $expected_output Expected output of gutenberg_get_typography_font_size_value().
+	 */
+	public function test_should_override_theme_settings( $font_size, $settings, $expected_output ) {
+		switch_theme( 'block-theme-child-with-fluid-typography' );
+		$actual = gutenberg_get_typography_font_size_value( $font_size, $settings );
+
+		$this->assertSame( $expected_output, $actual );
+	}
+
+	/**
+	 * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated.
+	 *
+	 * @return array
+	 */
+	public function data_generate_should_override_theme_settings_fixtures() {
+		return array(
+			'returns clamp value when theme activates fluid typography' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => null,
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
+			),
+			'returns value when settings argument deactivates fluid typography' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => false,
+					),
+				),
+				'expected_output' => '28px',
+			),
+
+			'returns clamp value when settings argument sets a fluid.minViewportWidth value' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => array(
+							'minViewportWidth' => '500px',
+						),
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
+			),
+
+			'returns clamp value when settings argument sets a layout.wideSize value' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'layout' => array(
+						'wideSize' => '500px',
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
+			),
+
+			'returns clamp value with maxViewportWidth preferred over fallback layout.wideSize value' => array(
+				'font_size'       => array(
+					'size' => '28px',
+				),
+				'settings'        => array(
+					'typography' => array(
+						'fluid' => array(
+							'maxViewportWidth' => '1000px',
+						),
+					),
+					'layout'     => array(
+						'wideSize' => '500px',
+					),
+				),
+				'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.485), 28px)',
 			),
 		);
 	}
@@ -557,28 +1054,24 @@ 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(
 			$this->test_block_name,
 			array(
-				'api_version' => 2,
+				'api_version' => 3,
 				'attributes'  => array(
 					'style' => array(
 						'type' => 'object',
@@ -614,15 +1107,35 @@ 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;',
+			'returns value when fluid typography is not active' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'default',
+				'expected_output' => 'font-size:15px;',
 			),
-			'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 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 - 3.2px) * 0.078), 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 - 6.4px) * 0.179), 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;',
+			),
+			'returns clamp value using default config if layout is fluid' => array(
+				'font_size_value' => '15px',
+				'theme_slug'      => 'block-theme-child-with-fluid-layout',
+				'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);',
 			),
 		);
 	}
@@ -680,7 +1193,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
 				'block_content'               => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
 				'font_size_value'             => '4rem',
 				'should_use_fluid_typography' => true,
-				'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(3rem, 3rem + ((1vw - 0.48rem) * 1.923), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
+				'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.25), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
 			),
 			'return_content_if_no_inline_font_size_found'  => array(
 				'block_content'               => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
@@ -698,13 +1211,13 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
 				'block_content'               => '<p class="has-medium-font-size" style="    font-size:   20px   ;    ">A paragraph inside a group</p>',
 				'font_size_value'             => '20px',
 				'should_use_fluid_typography' => true,
-				'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px);    ">A paragraph inside a group</p>',
+				'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);    ">A paragraph inside a group</p>',
 			),
 			'return_content_with_first_match_replace_only' => array(
 				'block_content'               => "<div class=\"wp-block-group\" style=\"font-size:1.5em\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
 				'font_size_value'             => '1.5em',
 				'should_use_fluid_typography' => true,
-				'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(1.125em, 1.125rem + ((1vw - 0.48em) * 0.721), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
+				'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
 			),
 		);
 	}
@@ -825,4 +1338,97 @@ public function data_invalid_size_wp_get_typography_value_and_unit() {
 			'size: array' => array( array( '10' ) ),
 		);
 	}
+
+	/**
+	 * Tests computed font size values.
+	 *
+	 * @covers ::gutenberg_get_computed_fluid_typography_value
+	 *
+	 * @dataProvider data_get_computed_fluid_typography_value
+	 *
+	 * @param array  $args {
+	 *      Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array.
+	 *
+	 *     @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
+	 *     @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
+	 *     @type string $maximum_font_size      Maximum font size for any clamp() calculation.
+	 *     @type string $minimum_font_size      Minimum font size for any clamp() calculation.
+	 *     @type int    $scale_factor           A scale factor to determine how fast a font scales within boundaries.
+	 * }
+	 * @param string $expected_output             Expected value of style property from gutenberg_apply_typography_support().
+	 */
+	public function test_get_computed_fluid_typography_value( $args, $expected_output ) {
+		$actual = gutenberg_get_computed_fluid_typography_value( $args );
+		$this->assertSame( $expected_output, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_computed_fluid_typography_value() {
+		return array(
+			'returns clamped value with valid args' => array(
+				'args'            => array(
+					'minimum_viewport_width' => '320px',
+					'maximum_viewport_width' => '1000px',
+					'minimum_font_size'      => '50px',
+					'maximum_font_size'      => '100px',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)',
+			),
+			'returns `null` when maximum and minimum viewport width are equal' => array(
+				'args'            => array(
+					'minimum_viewport_width' => '800px',
+					'maximum_viewport_width' => '800px',
+					'minimum_font_size'      => '50px',
+					'maximum_font_size'      => '100px',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => null,
+			),
+			'returns `null` when `maximum_viewport_width` is an unsupported unit' => array(
+				'args'            => array(
+					'minimum_viewport_width' => '320px',
+					'maximum_viewport_width' => 'calc(100% - 60px)',
+					'minimum_font_size'      => '50px',
+					'maximum_font_size'      => '100px',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => null,
+			),
+			'returns `null` when `minimum_viewport_width` is an unsupported unit' => array(
+				'args'            => array(
+					'minimum_viewport_width' => 'calc(100% - 60px)',
+					'maximum_viewport_width' => '1000px',
+					'minimum_font_size'      => '50px',
+					'maximum_font_size'      => '100px',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => null,
+			),
+			'returns `null` when `minimum_font_size` is an unsupported unit' => array(
+				'args'            => array(
+					'minimum_viewport_width' => '320em',
+					'maximum_viewport_width' => '1000em',
+					'minimum_font_size'      => '10vw',
+					'maximum_font_size'      => '100em',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => null,
+			),
+			'returns `null` when `maximum_font_size` is an unsupported unit' => array(
+				'args'            => array(
+					'minimum_viewport_width' => '320em',
+					'maximum_viewport_width' => '1000em',
+					'minimum_font_size'      => '50px',
+					'maximum_font_size'      => '100%',
+					'scale_factor'           => 1,
+				),
+				'expected_output' => null,
+			),
+		);
+	}
 }
diff --git a/phpunit/block-template-test.php b/phpunit/block-template-test.php
new file mode 100644
index 00000000000000..d3cfb1fe12f4f5
--- /dev/null
+++ b/phpunit/block-template-test.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Tests block template registry via block-related functions.
+ */
+class Tests_Block_Template extends WP_UnitTestCase {
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'block-theme' );
+	}
+
+	public function test_get_block_templates_from_registry() {
+		$template_name = 'test-plugin//test-template';
+
+		register_block_template( $template_name );
+
+		$templates = get_block_templates();
+
+		$this->assertArrayHasKey( $template_name, $templates );
+
+		unregister_block_template( $template_name );
+	}
+
+	public function test_get_block_template_from_registry() {
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'title' => 'Test Template',
+		);
+
+		register_block_template( $template_name, $args );
+
+		$template = get_block_template( 'block-theme//test-template' );
+
+		$this->assertEquals( 'Test Template', $template->title );
+
+		unregister_block_template( $template_name );
+	}
+}
diff --git a/phpunit/block-template-utils-test.php b/phpunit/block-template-utils-test.php
deleted file mode 100644
index ceffe180d98707..00000000000000
--- a/phpunit/block-template-utils-test.php
+++ /dev/null
@@ -1,164 +0,0 @@
-<?php
-/**
- * Tests_Block_Template_Utils class
- *
- * @package WordPress
- */
-
-class Tests_Block_Template_Utils extends WP_UnitTestCase {
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
-
-	public function test_get_template_hierarchy() {
-		$hierarchy = get_template_hierarchy( 'front-page' );
-		$this->assertEquals( array( 'front-page', 'home', 'index' ), $hierarchy );
-		// Custom templates.
-		$hierarchy = 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' );
-		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'tag' );
-		$this->assertEquals( array( 'tag', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'author' );
-		$this->assertEquals( array( 'author', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'date' );
-		$this->assertEquals( array( 'date', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'taxonomy' );
-		$this->assertEquals( array( 'taxonomy', 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'attachment' );
-		$this->assertEquals(
-			array(
-				'attachment',
-				'single',
-				'singular',
-				'index',
-			),
-			$hierarchy
-		);
-		$hierarchy = get_template_hierarchy( 'singular' );
-		$this->assertEquals( array( 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'single' );
-		$this->assertEquals( array( 'single', 'singular', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'archive' );
-		$this->assertEquals( array( 'archive', 'index' ), $hierarchy );
-		$hierarchy = get_template_hierarchy( 'index' );
-		$this->assertEquals( array( 'index' ), $hierarchy );
-
-		// Taxonomies.
-		$hierarchy = 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' );
-		$this->assertEquals(
-			array(
-				'category-fruits',
-				'category',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-		// Multi word category.
-		$hierarchy = get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
-		$this->assertEquals(
-			array(
-				'category-fruits-yellow',
-				'category',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-		// Single word taxonomy.
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
-		$this->assertEquals(
-			array(
-				'taxonomy-books-action',
-				'taxonomy-books',
-				'taxonomy',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-		$hierarchy = get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
-		$this->assertEquals(
-			array(
-				'taxonomy-books-action-adventure',
-				'taxonomy-books',
-				'taxonomy',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-		// Multi word taxonomy/terms.
-		$hierarchy = get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
-		$this->assertEquals(
-			array(
-				'taxonomy-greek-books-action-adventure',
-				'taxonomy-greek-books',
-				'taxonomy',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-		// Post types.
-		$hierarchy = get_template_hierarchy( 'single-book', false, 'single-book' );
-		$this->assertEquals(
-			array(
-				'single-book',
-				'single',
-				'singular',
-				'index',
-			),
-			$hierarchy
-		);
-		$hierarchy = get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
-		$this->assertEquals(
-			array(
-				'single-art-project',
-				'single',
-				'singular',
-				'index',
-			),
-			$hierarchy
-		);
-		$hierarchy = get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
-		$this->assertEquals(
-			array(
-				'single-art-project-imagine',
-				'single-art-project',
-				'single',
-				'singular',
-				'index',
-			),
-			$hierarchy
-		);
-		$hierarchy = get_template_hierarchy( 'page-hi', false, 'page' );
-		$this->assertEquals(
-			array(
-				'page-hi',
-				'page',
-				'singular',
-				'index',
-			),
-			$hierarchy
-		);
-		// Authors.
-		$hierarchy = get_template_hierarchy( 'author-rigas', false, 'author' );
-		$this->assertEquals(
-			array(
-				'author-rigas',
-				'author',
-				'archive',
-				'index',
-			),
-			$hierarchy
-		);
-	}
-}
diff --git a/phpunit/blocks/block-json-variations-filename-test.php b/phpunit/blocks/block-json-variations-filename-test.php
new file mode 100644
index 00000000000000..3cbbb05aa59b0d
--- /dev/null
+++ b/phpunit/blocks/block-json-variations-filename-test.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Test for the block.json's variations field being a PHP file.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Test that block variations can be registered from a PHP file.
+ *
+ * @group blocks
+ */
+class Block_Json_Variations_Filename_Test extends WP_UnitTestCase {
+	/**
+	 * Tear down each test method.
+	 */
+	public function tear_down() {
+		$registry = WP_Block_Type_Registry::get_instance();
+
+		if ( $registry->is_registered( 'my-plugin/notice' ) ) {
+			$registry->unregister( 'my-plugin/notice' );
+		}
+
+		parent::tear_down();
+	}
+
+	/**
+	 * Tests registering a block with variations from a PHP file.
+	 *
+	 * @covers ::register_block_type_from_metadata
+	 */
+	public function test_register_block_type_from_metadata_with_variations_php_file() {
+		$filter_metadata_registration = static function ( $metadata ) {
+			$metadata['variations'] = 'file:./variations.php';
+			return $metadata;
+		};
+
+		add_filter( 'block_type_metadata', $filter_metadata_registration, 10, 2 );
+		$result = register_block_type_from_metadata( GUTENBERG_DIR_TESTFIXTURES );
+		remove_filter( 'block_type_metadata', $filter_metadata_registration );
+
+		$this->assertInstanceOf( 'WP_Block_Type', $result, 'The block was not registered' );
+
+		$expected_variations = require GUTENBERG_DIR_TESTFIXTURES . '/variations.php';
+		$this->assertSame( $expected_variations, $result->variations, "Block variations haven't been set correctly." );
+	}
+}
diff --git a/phpunit/blocks/block-navigation-link-variations-test.php b/phpunit/blocks/block-navigation-link-variations-test.php
new file mode 100644
index 00000000000000..27711e1c03efb5
--- /dev/null
+++ b/phpunit/blocks/block-navigation-link-variations-test.php
@@ -0,0 +1,308 @@
+<?php
+/**
+ * Navigation block post type/taxonomies variations tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Navigation block variations for post types.
+ *
+ * @group blocks
+ */
+class Block_Navigation_Link_Variations_Test extends WP_UnitTestCase {
+
+	/**
+	 * Whether to use a shim/workaround for WordPress Core versions < 6.5.
+	 * See https://github.com/WordPress/gutenberg/pull/58389 for details.
+	 *
+	 * @var bool
+	 */
+	private $pre_65_compat = false;
+
+	public function set_up() {
+		parent::set_up();
+
+		$post_type         = register_post_type(
+			'custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Custom Book',
+				),
+				'public'            => true,
+				'show_in_rest'      => true,
+				'show_in_nav_menus' => true,
+			)
+		);
+		$private_post_type = register_post_type(
+			'private_custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Custom Book',
+				),
+				'public'            => false,
+				'show_in_rest'      => true,
+				'show_in_nav_menus' => false,
+			)
+		);
+		$taxonomy          = register_taxonomy(
+			'book_type',
+			'custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Book Type',
+				),
+				'show_in_nav_menus' => true,
+			)
+		);
+		$private_taxonomoy = register_taxonomy(
+			'private_book_type',
+			'private_custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Book Type',
+				),
+				'show_in_nav_menus' => false,
+			)
+		);
+
+		$this->pre_65_compat = ! method_exists( 'WP_Block_Type', 'get_variations' );
+
+		/*
+		 * In Core versions < 6.5, variations for post types/taxonomies registered after init#10 (= after the block type was registered)
+		 * need to be manually registered.
+		 * set_up runs after init#10, therefore register the variations here with the old deprecated functions.
+		 *
+		 * TODO: After two WP versions (6.7), we can remove this.
+		 */
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_post_type_variation_registration( $post_type );
+			$this->handle_pre_65_post_type_variation_registration( $private_post_type );
+			$this->handle_pre_65_taxonomy_variation_registration( $taxonomy );
+			$this->handle_pre_65_taxonomy_variation_registration( $private_taxonomoy );
+		}
+	}
+
+	public function tear_down() {
+		unregister_post_type( 'custom_book' );
+		unregister_post_type( 'private_custom_book' );
+		unregister_taxonomy( 'book_type' );
+		unregister_taxonomy( 'private_book_type' );
+		unregister_post_type( 'temp_custom_book' );
+		unregister_taxonomy( 'temp_book_type' );
+
+		// See comment in set_up for explanation.
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_post_type_variation_unregistration( 'custom_book' );
+			$this->handle_pre_65_post_type_variation_unregistration( 'private_custom_book' );
+			$this->handle_pre_65_post_type_variation_unregistration( 'temp_custom_book' );
+			$this->handle_pre_65_taxonomy_variation_unregistration( 'book_type' );
+			$this->handle_pre_65_taxonomy_variation_unregistration( 'private_book_type' );
+			$this->handle_pre_65_taxonomy_variation_unregistration( 'temp_book_type' );
+		}
+
+		parent::tear_down();
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_register_post_type_variation
+	 */
+	public function test_navigation_link_variations_custom_post_type() {
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'custom_book', $variations );
+		$this->assertIsArray( $variation, 'Block variation does not exist' );
+		$this->assertArrayHasKey( 'title', $variation, 'Block variation has no title' );
+		$this->assertEquals( 'Custom Book', $variation['title'], 'Variation title is different than the post type label' );
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_register_post_type_variation
+	 */
+	public function test_navigation_link_variations_private_custom_post_type() {
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'private_custom_book', $variations );
+		$this->assertEmpty( $variation, 'Block variation for private post type exists.' );
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_register_taxonomy_variation
+	 */
+	public function test_navigation_link_variations_custom_taxonomy() {
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'book_type', $variations );
+		$this->assertIsArray( $variation, 'Block variation does not exist' );
+		$this->assertArrayHasKey( 'title', $variation, 'Block variation has no title' );
+		$this->assertEquals( 'Book Type', $variation['title'], 'Variation title is different than the post type label' );
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_register_taxonomy_variation
+	 */
+	public function test_navigation_link_variations_private_custom_taxonomy() {
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'private_book_type', $variations );
+		$this->assertEmpty( $variation, 'Block variation for private taxonomy exists.' );
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_unregister_post_type_variation
+	 */
+	public function test_navigation_link_variations_unregister_post_type() {
+		$post_type = register_post_type(
+			'temp_custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Custom Book',
+				),
+				'public'            => true,
+				'show_in_rest'      => true,
+				'show_in_nav_menus' => true,
+			)
+		);
+
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_post_type_variation_registration( $post_type );
+		}
+
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'temp_custom_book', $variations );
+		$this->assertIsArray( $variation, 'Block variation does not exist' );
+
+		unregister_post_type( $post_type->name );
+
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_post_type_variation_unregistration( $post_type->name );
+		}
+
+		// Update array, since it's an dynamic built array
+		$variations = $nav_link_block->variations;
+		$variation  = $this->get_variation_by_name( 'temp_custom_book', $variations );
+		$this->assertEmpty( $variation, 'Block variation still exists' );
+	}
+
+	/**
+	 * @covers ::block_core_navigation_link_unregister_taxonomy_variation
+	 */
+	public function test_navigation_link_variations_unregister_taxonomy() {
+		$taxonomy = register_taxonomy(
+			'temp_book_type',
+			'custom_book',
+			array(
+				'labels'            => array(
+					'item_link' => 'Book Type',
+				),
+				'show_in_nav_menus' => true,
+			)
+		);
+
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_taxonomy_variation_registration( $taxonomy );
+		}
+
+		$registry       = WP_Block_Type_Registry::get_instance();
+		$nav_link_block = $registry->get_registered( 'core/navigation-link' );
+		// Use property and let __get handle it, so it works for core versions before adding get_variations as well
+		$variations = $nav_link_block->variations;
+		$this->assertNotEmpty( $variations, 'Block has no variations' );
+		$variation = $this->get_variation_by_name( 'temp_book_type', $variations );
+		$this->assertIsArray( $variation, 'Block variation does not exist' );
+
+		unregister_taxonomy( $taxonomy->name );
+
+		if ( $this->pre_65_compat ) {
+			$this->handle_pre_65_taxonomy_variation_unregistration( $taxonomy->name );
+		}
+
+		// Update array, since it's an dynamic built array
+		$variations = $nav_link_block->variations;
+		$variation  = $this->get_variation_by_name( 'temp_book_type', $variations );
+		$this->assertEmpty( $variation, 'Block variation still exists' );
+	}
+
+	/**
+	 * Get a variation by its name from an array of variations.
+	 *
+	 * @param string $variation_name The name (= slug) of the variation.
+	 * @param array  $variations An array of variations.
+	 * @return array|null The found variation or null.
+	 */
+	private function get_variation_by_name( $variation_name, $variations ) {
+		$found_variation = null;
+		foreach ( $variations as $variation ) {
+			if ( $variation['name'] === $variation_name ) {
+				$found_variation = $variation;
+			}
+		}
+
+		return $found_variation;
+	}
+
+	/**
+	 * Registers a block variation for a post type with the deprecated methods for Core versions < 6.5.
+	 * See comment in set_up for dexplanation.
+	 *
+	 * @param WP_Post_Type $post_type
+	 */
+	private function handle_pre_65_post_type_variation_registration( $post_type ) {
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_register_post_type_variation' );
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_register_variation' );
+		gutenberg_block_core_navigation_link_register_post_type_variation( $post_type->name, $post_type );
+	}
+
+	/**
+	 * Unregisters a block variation for a post type with the deprecated methods for Core versions < 6.5.
+	 * See comment in set_up for dexplanation.
+	 *
+	 * @param string $post_type
+	 */
+	private function handle_pre_65_post_type_variation_unregistration( $post_type ) {
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_unregister_post_type_variation' );
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_unregister_variation' );
+		gutenberg_block_core_navigation_link_unregister_post_type_variation( $post_type );
+	}
+
+	/**
+	 * Registers a block variation for a taxonomy with the deprecated methods for Core versions < 6.5.
+	 * See comment in set_up for dexplanation.
+	 *
+	 * @param WP_Taxonomy $post_type
+	 */
+	private function handle_pre_65_taxonomy_variation_registration( $taxonomy ) {
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_register_taxonomy_variation' );
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_register_variation' );
+		gutenberg_block_core_navigation_link_register_taxonomy_variation( $taxonomy->name, $taxonomy->object_type, (array) $taxonomy );
+	}
+
+	/**
+	 * Unregisters a block variation for a taxonomy with the deprecated methods for Core versions < 6.5.
+	 * See comment in set_up for dexplanation.
+	 *
+	 * @param string $post_type
+	 */
+	private function handle_pre_65_taxonomy_variation_unregistration( $taxonomy ) {
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_unregister_taxonomy_variation' );
+		$this->setExpectedDeprecated( 'gutenberg_block_core_navigation_link_unregister_variation' );
+		gutenberg_block_core_navigation_link_unregister_taxonomy_variation( $taxonomy );
+	}
+}
diff --git a/phpunit/blocks/class-block-library-navigation-link-test.php b/phpunit/blocks/class-block-library-navigation-link-test.php
new file mode 100644
index 00000000000000..993f93fb8cad02
--- /dev/null
+++ b/phpunit/blocks/class-block-library-navigation-link-test.php
@@ -0,0 +1,297 @@
+<?php
+/**
+ * Tests server side rendering of core/navigation-link
+ *
+ * @package    Gutenberg
+ * @subpackage block-library
+ */
+
+/**
+ * Tests for various cases in Navigation Link rendering
+ */
+class Block_Library_Navigation_Link_Test extends WP_UnitTestCase {
+	private static $category;
+	private static $page;
+	private static $draft;
+	private static $custom_draft;
+	private static $custom_post;
+
+	private static $pages;
+	private static $terms;
+	/**
+	 * @var array|null
+	 */
+	private $original_block_supports;
+
+	public static function wpSetUpBeforeClass() {
+
+		self::$draft   = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'page',
+				'post_status'  => 'draft',
+				'post_name'    => 'ceilingcat',
+				'post_title'   => 'Ceiling Cat',
+				'post_content' => 'Ceiling Cat content',
+				'post_excerpt' => 'Ceiling Cat',
+			)
+		);
+		self::$pages[] = self::$draft;
+
+		self::$custom_draft = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'cats',
+				'post_status'  => 'draft',
+				'post_name'    => 'metalcat',
+				'post_title'   => 'Metal Cat',
+				'post_content' => 'Metal Cat content',
+				'post_excerpt' => 'Metal Cat',
+			)
+		);
+		self::$pages[]      = self::$custom_draft;
+
+		self::$custom_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'dogs',
+				'post_status'  => 'publish',
+				'post_name'    => 'metaldog',
+				'post_title'   => 'Metal Dog',
+				'post_content' => 'Metal Dog content',
+				'post_excerpt' => 'Metal Dog',
+			)
+		);
+		self::$pages[]     = self::$custom_post;
+
+		self::$page    = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'page',
+				'post_status'  => 'publish',
+				'post_name'    => 'tabby',
+				'post_title'   => 'Tabby cats',
+				'post_content' => 'Tabby cat content',
+				'post_excerpt' => 'Tabby cat',
+			)
+		);
+		self::$pages[] = self::$page;
+
+		self::$category = self::factory()->category->create_and_get(
+			array(
+				'taxonomy'    => 'category',
+				'name'        => 'cats',
+				'slug'        => 'cats',
+				'description' => 'Cats Category',
+			)
+		);
+
+		self::$terms[] = self::$category;
+	}
+
+	public static function wpTearDownAfterClass() {
+		foreach ( self::$pages as $page_to_delete ) {
+			wp_delete_post( $page_to_delete->ID );
+		}
+		foreach ( self::$terms as $term_to_delete ) {
+			wp_delete_term( $term_to_delete->term_id, $term_to_delete->taxonomy );
+		}
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
+		WP_Block_Supports::$block_to_render = array(
+			'attrs'     => array(),
+			'blockName' => '',
+		);
+	}
+
+	public function tear_down() {
+		WP_Block_Supports::$block_to_render = $this->original_block_supports;
+		parent::tear_down();
+	}
+
+	public function test_returns_link_when_post_is_published() {
+		$page_id = self::$page->ID;
+		$url     = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"label\":\"Sample Page\",\"type\":\"page\",\"id\":{$page_id},\"url\":\"{$url}/?page_id={$page_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+		$this->assertEquals(
+			true,
+			strpos(
+				gutenberg_render_block_core_navigation_link(
+					$navigation_link_block->attributes,
+					array(),
+					$navigation_link_block
+				),
+				'Sample Page'
+			) !== false
+		);
+	}
+
+	public function test_returns_empty_when_label_is_missing() {
+		$page_id = self::$page->ID;
+		$url     = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"type\":\"page\",\"id\":{$page_id},\"url\":\"{$url}/?page_id={$page_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+		$this->assertEquals(
+			'',
+			gutenberg_render_block_core_navigation_link(
+				$navigation_link_block->attributes,
+				array(),
+				$navigation_link_block
+			)
+		);
+	}
+
+	public function test_returns_empty_when_draft() {
+		$page_id = self::$draft->ID;
+		$url     = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"label\":\"Draft Page\",\"type\":\"page\",\"id\":{$page_id},\"url\":\"{$url}/?page_id={$page_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+
+		$this->assertEquals(
+			'',
+			gutenberg_render_block_core_navigation_link(
+				$navigation_link_block->attributes,
+				array(),
+				$navigation_link_block
+			)
+		);
+	}
+
+	public function test_returns_link_for_category() {
+		$category_id = self::$category->term_id;
+		$url         = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"label\":\"Cats\",\"type\":\"category\",\"id\":{$category_id},\"url\":\"{$url}/?cat={$category_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+		$this->assertEquals(
+			true,
+			strpos(
+				gutenberg_render_block_core_navigation_link(
+					$navigation_link_block->attributes,
+					array(),
+					$navigation_link_block
+				),
+				'Cats'
+			) !== false
+		);
+	}
+
+	public function test_returns_link_for_plain_link() {
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-link {"label":"My Website","url":"https://example.com"} /-->'
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+		$this->assertEquals(
+			true,
+			strpos(
+				gutenberg_render_block_core_navigation_link(
+					$navigation_link_block->attributes,
+					array(),
+					$navigation_link_block
+				),
+				'My Website'
+			) !== false
+		);
+	}
+
+	public function test_returns_link_for_decoded_link() {
+
+		$urls_before_render = array(
+			'https://example.com/?id=10&data=lzB%252Fzd%252FZA%253D%253D',
+			'https://example.com/?id=10&data=lzB%2Fzd%FZA%3D%3D',
+			'https://example.com/?id=10&data=1234',
+			'https://example.com/?arrayParams[]=1&arrayParams[]=2&arrayParams[]=3',
+		);
+
+		$urls_after_render = array(
+			'https://example.com/?id=10&#038;data=lzB%2Fzd%2FZA%3D%3D',
+			'https://example.com/?id=10&#038;data=lzB%2Fzd%FZA%3D%3D',
+			'https://example.com/?id=10&#038;data=1234',
+			'https://example.com/?arrayParams%5B%5D=1&#038;arrayParams%5B%5D=2&#038;arrayParams%5B%5D=3',
+		);
+
+		foreach ( $urls_before_render as $idx => $link ) {
+				$parsed_blocks = parse_blocks( '<!-- wp:navigation-link {"label":"test label", "url": "' . $link . '"} /-->' );
+			$this->assertEquals( 1, count( $parsed_blocks ) );
+				$block             = $parsed_blocks[0];
+			$navigation_link_block = new WP_Block( $block, array() );
+				$this->assertEquals(
+					true,
+					strpos(
+						gutenberg_render_block_core_navigation_link(
+							$navigation_link_block->attributes,
+							array(),
+							$navigation_link_block
+						),
+						$urls_after_render[ $idx ]
+					) !== false
+				);
+		}
+	}
+
+	public function test_returns_empty_when_custom_post_type_draft() {
+		$page_id = self::$custom_draft->ID;
+		$url     = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"label\":\"Draft Custom Post Type\",\"type\":\"cats\",\"kind\":\"post-type\",\"id\":{$page_id},\"url\":\"{$url}/?page_id={$page_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+
+		$this->assertEquals(
+			'',
+			gutenberg_render_block_core_navigation_link(
+				$navigation_link_block->attributes,
+				array(),
+				$navigation_link_block
+			)
+		);
+	}
+
+	public function test_returns_link_when_custom_post_is_published() {
+		$page_id = self::$custom_post->ID;
+		$url     = 'http://' . WP_TESTS_DOMAIN;
+
+		$parsed_blocks = parse_blocks(
+			"<!-- wp:navigation-link {\"label\":\"Metal Dogs\",\"type\":\"dogs\",\"kind\":\"post-type\",\"id\":{$page_id},\"url\":\"{$url}/?page_id={$page_id}\"} /-->"
+		);
+		$this->assertEquals( 1, count( $parsed_blocks ) );
+
+		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
+		$this->assertEquals(
+			true,
+			strpos(
+				gutenberg_render_block_core_navigation_link(
+					$navigation_link_block->attributes,
+					array(),
+					$navigation_link_block
+				),
+				'Metal Dogs'
+			) !== false
+		);
+	}
+}
diff --git a/phpunit/blocks/class-wp-navigation-block-renderer-test.php b/phpunit/blocks/class-wp-navigation-block-renderer-test.php
new file mode 100644
index 00000000000000..63efc3bfe35de0
--- /dev/null
+++ b/phpunit/blocks/class-wp-navigation-block-renderer-test.php
@@ -0,0 +1,180 @@
+<?php
+
+/**
+ * Test the block WP_Navigation_Block_Renderer class.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Navigation_Block_Renderer_Test extends WP_UnitTestCase {
+
+	/**
+	 * Test that navigation links are wrapped in list items to preserve accessible markup
+	 *
+	 * @group navigation-renderer
+	 *
+	 * @covers WP_Navigation_Block_Renderer::get_markup_for_inner_block
+	 */
+	public function test_gutenberg_default_block_is_enclosed_in_li_tags() {
+
+		$parsed_blocks         = parse_blocks(
+			'<!-- wp:navigation-link {"label":"Sample Page","type":"page","kind":"post-type","url":"/hello-world"} /-->'
+		);
+		$parsed_block          = $parsed_blocks[0];
+		$context               = array();
+		$navigation_link_block = new WP_Block( $parsed_block, $context );
+
+		// Setup an empty testing instance of `WP_Navigation_Block_Renderer` and save the original.
+		$reflection = new ReflectionClass( 'WP_Navigation_Block_Renderer_Gutenberg' );
+		$method     = $reflection->getMethod( 'get_markup_for_inner_block' );
+		$method->setAccessible( true );
+		// Invoke the private method.
+		$result = $method->invoke( $reflection, $navigation_link_block );
+
+		$expected = '<li class=" wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content"  href="/hello-world"><span class="wp-block-navigation-item__label">Sample Page</span></a></li>';
+		$this->assertEquals( $expected, $result );
+	}
+
+	/**
+	 * Test that the site-title block is wrapped in a list item to preserve accessible markup
+	 *
+	 * @group navigation-renderer
+	 *
+	 * @covers WP_Navigation_Block_Renderer::get_markup_for_inner_block
+	 */
+	public function test_gutenberg_get_markup_for_inner_block_site_title() {
+
+		// We are testing the site title block because we manually add list items around it.
+		$parsed_blocks    = parse_blocks(
+			'<!-- wp:site-title /-->'
+		);
+		$parsed_block     = $parsed_blocks[0];
+		$context          = array();
+		$site_title_block = new WP_Block( $parsed_block, $context );
+
+		// Setup an empty testing instance of `WP_Navigation_Block_Renderer` and save the original.
+		$reflection = new ReflectionClass( 'WP_Navigation_Block_Renderer_Gutenberg' );
+		$method     = $reflection->getMethod( 'get_markup_for_inner_block' );
+		$method->setAccessible( true );
+		// Invoke the private method.
+		$result = $method->invoke( $reflection, $site_title_block );
+
+		$expected = '<li class="wp-block-navigation-item"><h1 class="wp-block-site-title"><a href="http://' . WP_TESTS_DOMAIN . '" target="_self" rel="home">Test Blog</a></h1></li>';
+		$this->assertEquals( $expected, $result );
+	}
+
+	/**
+	 * Test that a given block will not be automatically wrapped in a list item by default.
+	 *
+	 * @group navigation-renderer
+	 *
+	 * @covers WP_Navigation_Block_Renderer::get_markup_for_inner_block
+	 */
+	public function test_gutenberg_block_not_automatically_wrapped_with_li_tag() {
+
+		register_block_type(
+			'testsuite/sample-block',
+			array(
+				'api_version'     => 2,
+				'render_callback' => function ( $attributes ) {
+					return '<div class="wp-block-testsuite-sample-block">' . $attributes['content'] . '</div>';
+				},
+			)
+		);
+
+		// We are testing the site title block because we manually add list items around it.
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:testsuite/sample-block {"content":"Hello World"} /-->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array();
+		$heading_block = new WP_Block( $parsed_block, $context );
+
+		// Setup an empty testing instance of `WP_Navigation_Block_Renderer` and save the original.
+		$reflection = new ReflectionClass( 'WP_Navigation_Block_Renderer_Gutenberg' );
+		$method     = $reflection->getMethod( 'get_markup_for_inner_block' );
+		$method->setAccessible( true );
+		// Invoke the private method.
+		$result = $method->invoke( $reflection, $heading_block );
+
+		$expected = '<div class="wp-block-testsuite-sample-block">Hello World</div>';
+		$this->assertEquals( $expected, $result );
+
+		unregister_block_type( 'testsuite/sample-block' );
+	}
+
+	/**
+	 * Test that a block can be added to the list of blocks which require a wrapping list item.
+	 * This allows extenders to opt in to the rendering behavior of the Navigation block
+	 * which helps to preserve accessible markup.
+	 *
+	 * @group navigation-renderer
+	 *
+	 * @covers WP_Navigation_Block_Renderer::get_markup_for_inner_block
+	 */
+	public function test_gutenberg_block_is_automatically_wrapped_with_li_tag_when_filtered() {
+
+		register_block_type(
+			'testsuite/sample-block',
+			array(
+				'api_version'     => 2,
+				'render_callback' => function ( $attributes ) {
+					return '<div class="wp-block-testsuite-sample-block">' . $attributes['content'] . '</div>';
+				},
+			)
+		);
+
+		$filter_needs_list_item_wrapper_function = static function ( $needs_list_item_wrapper ) {
+			$needs_list_item_wrapper[] = 'testsuite/sample-block';
+			return $needs_list_item_wrapper;
+		};
+
+		add_filter(
+			'block_core_navigation_listable_blocks',
+			$filter_needs_list_item_wrapper_function,
+			10,
+			1
+		);
+
+		// We are testing the site title block because we manually add list items around it.
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:testsuite/sample-block {"content":"Hello World"} /-->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array();
+		$heading_block = new WP_Block( $parsed_block, $context );
+
+		// Setup an empty testing instance of `WP_Navigation_Block_Renderer` and save the original.
+		$reflection = new ReflectionClass( 'WP_Navigation_Block_Renderer_Gutenberg' );
+		$method     = $reflection->getMethod( 'get_markup_for_inner_block' );
+		$method->setAccessible( true );
+		// Invoke the private method.
+		$result = $method->invoke( $reflection, $heading_block );
+
+		$expected = '<li class="wp-block-navigation-item"><div class="wp-block-testsuite-sample-block">Hello World</div></li>';
+		$this->assertEquals( $expected, $result );
+
+		remove_filter( 'block_core_navigation_listable_blocks', $filter_needs_list_item_wrapper_function, 10, 1 );
+
+		unregister_block_type( 'testsuite/sample-block' );
+	}
+
+	/**
+	 * Test that the `get_inner_blocks_from_navigation_post` method returns an empty block list for a non-existent post.
+	 *
+	 * @group navigation-renderer
+	 *
+	 * @covers WP_Navigation_Block_Renderer::get_inner_blocks_from_navigation_post
+	 */
+	public function test_gutenberg_get_inner_blocks_from_navigation_post_returns_empty_block_list() {
+		$reflection = new ReflectionClass( 'WP_Navigation_Block_Renderer_Gutenberg' );
+		$method     = $reflection->getMethod( 'get_inner_blocks_from_navigation_post' );
+		$method->setAccessible( true );
+		$attributes = array( 'ref' => 0 );
+
+		$actual   = $method->invoke( $reflection, $attributes );
+		$expected = new WP_Block_List( array(), $attributes );
+		$this->assertEquals( $actual, $expected );
+		$this->assertCount( 0, $actual );
+	}
+}
diff --git a/phpunit/blocks/register-block-style-test.php b/phpunit/blocks/register-block-style-test.php
new file mode 100644
index 00000000000000..1becaff347e5fa
--- /dev/null
+++ b/phpunit/blocks/register-block-style-test.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Tests for `gutenberg_register_block_style`.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Tests for Gutenberg's extended block style registration function.
+ *
+ * @group blocks
+ */
+class Tests_Blocks_Register_Block_Style extends WP_UnitTestCase {
+	/**
+	 * Tests `gutenberg_register_block_style` registers block style
+	 * across multiple block types.
+	 */
+	public function test_gutenberg_register_block_style() {
+		$block_types      = array( 'core/group', 'core/columns', 'core/cover' );
+		$style_properties = array(
+			'name'  => 'fancy',
+			'label' => 'Fancy',
+		);
+
+		gutenberg_register_block_style( $block_types, $style_properties );
+		$registry = WP_Block_Styles_Registry::get_instance();
+
+		$this->assertTrue( $registry->is_registered( 'core/group', 'fancy' ) );
+		$this->assertTrue( $registry->is_registered( 'core/columns', 'fancy' ) );
+		$this->assertTrue( $registry->is_registered( 'core/cover', 'fancy' ) );
+	}
+}
diff --git a/phpunit/blocks/render-block-cover-test.php b/phpunit/blocks/render-block-cover-test.php
index 753aa14f2fe4db..8a249b2c119f01 100644
--- a/phpunit/blocks/render-block-cover-test.php
+++ b/phpunit/blocks/render-block-cover-test.php
@@ -15,7 +15,7 @@ class Tests_Blocks_Render_Cover extends WP_UnitTestCase {
 	/**
 	 * Post object.
 	 *
-	 * @var array
+	 * @var object
 	 */
 	protected static $post;
 
@@ -76,7 +76,7 @@ public function test_gutenberg_render_block_core_cover() {
 			'minHeight'        => '100px',
 		);
 
-		$content  = '<div class="wp-block-cover"><span></span><div class="wp-block-cover__inner-container"></div></div>';
+		$content  = '<div class="wp-block-cover" style="min-height:100px"><span></span><div class="wp-block-cover__inner-container"></div></div>';
 		$rendered = gutenberg_render_block_core_cover( $attributes, $content );
 
 		$this->assertStringContainsString( wp_get_attachment_image_url( self::$attachment_id, 'full' ), $rendered );
diff --git a/phpunit/blocks/render-block-file-test.php b/phpunit/blocks/render-block-file-test.php
index 7ffbb411038750..1dffc320d9671e 100644
--- a/phpunit/blocks/render-block-file-test.php
+++ b/phpunit/blocks/render-block-file-test.php
@@ -18,16 +18,22 @@ class Tests_Blocks_Render_File extends WP_UnitTestCase {
 	 */
 	public function test_render_block_core_file() {
 		$attributes = array(
-			'href'               => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'href'               => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'fileId'             => 'wp-block-file--media-_clientId_0',
-			'textLinkHref'       => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'textLinkHref'       => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'showDownloadButton' => true,
 			'displayPreview'     => true,
 			'previewHeight'      => 370,
 		);
-		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="yolo"></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
+		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="yolo"></object><a id="wp-block-file--media-_clientId_0" href="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
 
-		$new_content = gutenberg_render_block_core_file( $attributes, $content );
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:file {"href":"http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true} -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
+
+		$new_content = gutenberg_render_block_core_file( $attributes, $content, $block );
 		$this->assertStringContainsString( 'aria-label="Embed of yolo."', $new_content );
 	}
 
@@ -36,16 +42,22 @@ public function test_render_block_core_file() {
 	 */
 	public function test_render_block_core_file_custom_filename() {
 		$attributes = array(
-			'href'               => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'href'               => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'fileId'             => 'wp-block-file--media-_clientId_0',
-			'textLinkHref'       => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'textLinkHref'       => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'showDownloadButton' => true,
 			'displayPreview'     => true,
 			'previewHeight'      => 370,
 		);
-		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="custom filename"></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">custom filename</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
+		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="custom filename"></object><a id="wp-block-file--media-_clientId_0" href="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf">custom filename</a><a href="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:file {"href":"http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true} -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
 
-		$new_content = gutenberg_render_block_core_file( $attributes, $content );
+		$new_content = gutenberg_render_block_core_file( $attributes, $content, $block );
 		$this->assertStringContainsString( 'aria-label="Embed of custom filename."', $new_content );
 	}
 
@@ -54,16 +66,22 @@ public function test_render_block_core_file_custom_filename() {
 	 */
 	public function test_render_block_core_file_empty_filename() {
 		$attributes = array(
-			'href'               => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'href'               => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'fileId'             => 'wp-block-file--media-_clientId_0',
-			'textLinkHref'       => 'http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf',
+			'textLinkHref'       => 'http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf',
 			'showDownloadButton' => true,
 			'displayPreview'     => true,
 			'previewHeight'      => 370,
 		);
-		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="PDF embed"></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
+		$content    = '<div class="wp-block-file"><object class="wp-block-file__embed" data="' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="PDF embed"></object><a id="wp-block-file--media-_clientId_0" href="http://' . WP_TESTS_DOMAIN . 'wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>';
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:file {"href":"http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true} -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
 
-		$new_content = gutenberg_render_block_core_file( $attributes, $content );
+		$new_content = gutenberg_render_block_core_file( $attributes, $content, $block );
 		$this->assertStringContainsString( 'aria-label="PDF embed"', $new_content );
 	}
 }
diff --git a/phpunit/blocks/render-block-heading-test.php b/phpunit/blocks/render-block-heading-test.php
new file mode 100644
index 00000000000000..59425f25aafd62
--- /dev/null
+++ b/phpunit/blocks/render-block-heading-test.php
@@ -0,0 +1,86 @@
+<?php
+/**
+ * Heading block rendering tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Heading block.
+ *
+ * @group blocks
+ */
+class Render_Block_Heading_Test extends WP_UnitTestCase {
+
+
+	/**
+	 * @covers ::gutenberg_block_core_heading_render
+	 * @dataProvider add_css_class_test_examples
+	 */
+	public function test_block_core_heading_render_appends_css_class_to_a_vanilla_element( $input, $expected_result ) {
+		$actual = gutenberg_block_core_heading_render( array(), $input );
+		$this->assertEquals( $expected_result, $actual );
+	}
+
+	public function add_css_class_test_examples() {
+		return array(
+			'should add a class name to a vanilla h2 element' => array(
+				'<h2>Hello World</h2>',
+				'<h2 class="wp-block-heading">Hello World</h2>',
+			),
+			'should not add a class name to a header element' => array(
+				'<header>Hello World</header>',
+				'<header>Hello World</header>',
+			),
+			'should not add a class name to a span element' => array(
+				'<span>Hello World</span>',
+				'<span>Hello World</span>',
+			),
+			'should not add a class name to an invalid h7 element' => array(
+				'<h7>Hello World</h7>',
+				'<h7>Hello World</h7>',
+			),
+			'should add a class name even when the class attribute is already defined' => array(
+				'<h2 class="is-align-right">Hello World</h2>',
+				'<h2 class="is-align-right wp-block-heading">Hello World</h2>',
+			),
+			'should handle single quotes'                => array(
+				"<h2 class='is-align-right'>Hello World</h2>",
+				'<h2 class="is-align-right wp-block-heading">Hello World</h2>',
+			),
+			'should handle single quotes with double quotes inside' => array(
+				"<h2 class='\" is-align-right'>Hello World</h2>",
+				'<h2 class="&quot; is-align-right wp-block-heading">Hello World</h2>',
+			),
+			'should not add a class name even when it is already defined' => array(
+				'<h2 class="is-align-right wp-block-heading">Hello World</h2>',
+				'<h2 class="is-align-right wp-block-heading">Hello World</h2>',
+			),
+			'should add a class name even when there are other HTML attributes present' => array(
+				'<h2 style="display: block">Hello World</h2>',
+				'<h2 class="wp-block-heading" style="display: block">Hello World</h2>',
+			),
+			'should add a class name even when the class attribute is already defined and has many entries' => array(
+				'<h2 class="is-align-right custom   classes">Hello World</h2>',
+				'<h2 class="is-align-right custom   classes wp-block-heading">Hello World</h2>',
+			),
+			'should not add a class name to a nested h2' => array(
+				'<h2 class="is-align-right custom classes"><h2>Hello World</h2></h2>',
+				'<h2 class="is-align-right custom classes wp-block-heading"><h2>Hello World</h2></h2>',
+			),
+			'should not add a class name to a nested h2 when the parent has another attribute' => array(
+				'<h2 style="display: block" class="is-align-right"><h2>Hello World</h2></h2>',
+				'<h2 style="display: block" class="is-align-right wp-block-heading"><h2>Hello World</h2></h2>',
+			),
+			'should add a class name even when the class attribute is surrounded by other attributes' => array(
+				'<h2 style="display: block" class="is-align-right" data-class="corner case!"><h2>Hello World</h2></h2>',
+				'<h2 style="display: block" class="is-align-right wp-block-heading" data-class="corner case!"><h2>Hello World</h2></h2>',
+			),
+			'should add a class name without getting confused when there is a tricky data-class attribute present' => array(
+				'<h2 data-class="corner case!" style="display: block" class="is-align-right"><h2>Hello World</h2></h2>',
+				'<h2 data-class="corner case!" style="display: block" class="is-align-right wp-block-heading"><h2>Hello World</h2></h2>',
+			),
+		);
+	}
+}
diff --git a/phpunit/blocks/render-block-image-test.php b/phpunit/blocks/render-block-image-test.php
new file mode 100644
index 00000000000000..fe39aee8c50b9d
--- /dev/null
+++ b/phpunit/blocks/render-block-image-test.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Image block rendering tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Image block.
+ *
+ * @group blocks
+ */
+class Tests_Blocks_Render_Image extends WP_UnitTestCase {
+	/**
+	 * @covers ::render_block_core_image
+	 */
+	public function test_should_render_block_core_image_when_src_is_defined() {
+		$attributes    = array();
+		$content       = '<figure class="wp-block-image"><img src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/2021/04/canola.jpg" aria-label="test render"/></figure>';
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:image -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
+
+		$rendered_block = gutenberg_render_block_core_image( $attributes, $content, $block );
+		$this->assertStringContainsString( 'aria-label="test render"', $rendered_block );
+	}
+
+	/**
+	 * @covers ::render_block_core_image
+	 */
+	public function test_should_not_render_block_core_image_when_src_is_not_defined() {
+		$attributes    = array();
+		$content       = '<figure class="wp-block-image"><img /></figure>';
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:image -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
+
+		$rendered_block = gutenberg_render_block_core_image( $attributes, $content, $block );
+		$this->assertEquals( '', $rendered_block );
+	}
+
+	/**
+	 * @covers ::render_block_core_image
+	 */
+	public function test_should_not_render_block_core_image_when_src_is_empty_string() {
+		$attributes    = array();
+		$content       = '<figure class="wp-block-image"><img src=""/></figure>';
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:image -->'
+		);
+		$parsed_block  = $parsed_blocks[0];
+		$block         = new WP_Block( $parsed_block );
+
+		$rendered_block = gutenberg_render_block_core_image( $attributes, $content, $block );
+		$this->assertEquals( '', $rendered_block );
+	}
+}
diff --git a/phpunit/blocks/render-block-media-text-test.php b/phpunit/blocks/render-block-media-text-test.php
new file mode 100644
index 00000000000000..f5b67f0a8dc9b7
--- /dev/null
+++ b/phpunit/blocks/render-block-media-text-test.php
@@ -0,0 +1,175 @@
+<?php
+/**
+ * Media & Text block rendering tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Media & Text block.
+ *
+ * @group blocks
+ *
+ * @covers ::render_block_core_media_text
+ */
+class Render_Block_MediaText_Test extends WP_UnitTestCase {
+
+	/**
+	 * Post object.
+	 *
+	 * @var WP_Post
+	 */
+	protected static $post;
+
+	/**
+	 * Attachment id.
+	 *
+	 * @var int
+	 */
+	protected static $attachment_id;
+
+	/**
+	 * Setup method.
+	 */
+	public static function wpSetUpBeforeClass() {
+		self::$post = self::factory()->post->create_and_get();
+		$file       = DIR_TESTDATA . '/images/canola.jpg';
+
+		self::$attachment_id = self::factory()->attachment->create_upload_object(
+			$file,
+			self::$post->ID,
+			array(
+				'post_mime_type' => 'image/jpeg',
+			)
+		);
+
+		set_post_thumbnail( self::$post, self::$attachment_id );
+	}
+
+	/**
+	 * Tear down method.
+	 */
+	public static function wpTearDownAfterClass() {
+		wp_delete_post( self::$post->ID, true );
+		wp_delete_post( self::$attachment_id, true );
+	}
+
+	/**
+	 * Helper method for $wp_query.
+	 */
+	public static function setup_query() {
+		global $wp_query;
+		$wp_query->in_the_loop = true;
+		$wp_query->post        = self::$post;
+		$wp_query->posts       = array( self::$post );
+		$GLOBALS['post']       = self::$post;
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_media_text with the featured image on the left.
+	 */
+	public function test_render_block_core_media_text_featured_image() {
+		$this->setup_query();
+
+		$content = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div>';
+
+		// Assert that the rendered block contains the featured image.
+		$attributes = array(
+			'useFeaturedImage' => true,
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'imageFill'        => true,
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_media_text with the featured image on the left,
+	 * and a second media & text block nested inside the content area.
+	 */
+	public function test_render_block_core_media_text_featured_image_nested() {
+		$this->setup_query();
+		$content = '<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div></div></div>';
+
+		// Assert that the rendered block contains the featured image.
+		$attributes = array(
+			'useFeaturedImage' => true,
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'imageFill'        => true,
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_media_text with the featured image on the right.
+	 */
+	public function test_render_block_core_media_text_featured_image_media_on_right() {
+		$this->setup_query();
+
+		$content = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div>';
+
+		// Assert that the rendered block contains the featured image when media is on the right.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'mediaPosition'    => 'right',
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true and the media is on the right.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'mediaPosition'    => 'right',
+			'imageFill'        => true,
+		);
+		$rendered   = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_media_text with the featured image on the right,
+	 * and a second media & text block nested inside the content area.
+	 */
+	public function test_render_block_core_media_text_featured_image_media_on_right_nested() {
+		$this->setup_query();
+
+		$content = '<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile"><div class="wp-block-media-text__content"><div class="wp-block-media-text is-stacked-on-mobile"><div class="wp-block-media-text__content"><p></p></div><figure class="wp-block-media-text__media"></figure></div></div><figure class="wp-block-media-text__media"></figure></div>';
+
+		// Assert that the rendered block contains the featured image when media is on the right.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'mediaPosition'    => 'right',
+		);
+
+		$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+
+		// Assert that the rendered block contains the featured image as an image element,
+		// when image fill is true and the media is on the right.
+		$attributes = array(
+			'useFeaturedImage' => true,
+			'mediaPosition'    => 'right',
+			'imageFill'        => true,
+		);
+
+		$rendered = gutenberg_render_block_core_media_text( $attributes, $content );
+		$this->assertStringContainsString( '<img alt="" src="' . wp_get_attachment_image_url( self::$attachment_id, 'full' ) . '"', $rendered );
+	}
+}
diff --git a/phpunit/blocks/render-block-navigation-submenu-test.php b/phpunit/blocks/render-block-navigation-submenu-test.php
new file mode 100644
index 00000000000000..4b60cab4514c94
--- /dev/null
+++ b/phpunit/blocks/render-block-navigation-submenu-test.php
@@ -0,0 +1,212 @@
+<?php
+/**
+ * Tests server side rendering of core/navigation-submenu
+ *
+ * @package    Gutenberg
+ * @subpackage block-library
+ */
+
+/**
+ * Tests for various cases in Navigation Submenu rendering
+ */
+class Render_Block_Navigation_Submenu_Test extends WP_UnitTestCase {
+	private static $category;
+	private static $page;
+	private static $draft;
+	private static $custom_draft;
+	private static $custom_post;
+
+
+	/**
+	 * @var array|null
+	 */
+	private $original_block_supports;
+
+	public static function set_up_before_class() {
+		self::$page = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'page',
+				'post_status'  => 'publish',
+				'post_name'    => 'tabby',
+				'post_title'   => 'Tabby cats',
+				'post_content' => 'Tabby cat content',
+				'post_excerpt' => 'Tabby cat',
+			)
+		);
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
+		WP_Block_Supports::$block_to_render = array(
+			'attrs'     => array(),
+			'blockName' => '',
+		);
+	}
+
+	public function tear_down() {
+		WP_Block_Supports::$block_to_render = $this->original_block_supports;
+		parent::tear_down();
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_preset_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'       => 'purple',
+			'overlayBackgroundColor' => 'yellow',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$rendered_html = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$tags = new WP_HTML_Tag_Processor( $rendered_html );
+		$tags->next_tag(
+			array(
+				'tag_name'   => 'ul',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		);
+		$tags->get_attribute( 'class' );
+
+		$this->assertEquals(
+			'wp-block-navigation__submenu-container has-text-color has-purple-color has-background has-yellow-background-color',
+			$tags->get_attribute( 'class' ),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'customOverlayTextColor'       => '#BCC60A',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="color:' . $context['customOverlayTextColor'] . ';background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_apply_mix_of_preset_and_custom_colors_inherited_from_parent_block_via_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Colors inherited from parent Navigation block.
+		$context = array(
+			'overlayTextColor'             => 'purple',
+			'customOverlayBackgroundColor' => '#E10E0E',
+		);
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$this->assertStringContainsString(
+			'<ul style="background-color:' . $context['customOverlayBackgroundColor'] . ';" class="wp-block-navigation__submenu-container has-text-color has-' . $context['overlayTextColor'] . '-color has-background">',
+			gutenberg_render_block_core_navigation_submenu(
+				$navigation_submenu_block->attributes,
+				array(),
+				$navigation_submenu_block
+			),
+			'Submenu block colors inherited from context not applied correctly'
+		);
+	}
+
+	/**
+	 * @group submenu-color-inheritance
+	 * @covers ::gutenberg_render_block_core_navigation_submenu
+	 */
+	public function test_should_not_apply_custom_colors_if_missing_from_context() {
+		$page_id = self::$page->ID;
+
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:navigation-submenu {"label":"Submenu Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Submenu Item Link Label","type":"page","id":' . $page_id . ',"url":"http://localhost:8888/?page_id=' . $page_id . '","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->'
+		);
+
+		$this->assertEquals( 1, count( $parsed_blocks ), 'Submenu block not parsable.' );
+
+		$block = $parsed_blocks[0];
+
+		// Intentionally empty - no colors.
+		$context = array();
+
+		$navigation_submenu_block = new WP_Block( $block, $context );
+
+		$actual = gutenberg_render_block_core_navigation_submenu(
+			$navigation_submenu_block->attributes,
+			array(),
+			$navigation_submenu_block
+		);
+
+		$this->assertStringContainsString(
+			'<ul class="wp-block-navigation__submenu-container">',
+			$actual,
+			'Submenu block should not apply colors if missing from context'
+		);
+
+		$this->assertStringNotContainsString(
+			$actual,
+			'has-text-color has-background',
+			'Submenu block should not apply "has-*" color classes if missing from context'
+		);
+	}
+}
diff --git a/phpunit/blocks/render-block-navigation-test.php b/phpunit/blocks/render-block-navigation-test.php
index e2eab4b72ca319..c9b552d17f4e46 100644
--- a/phpunit/blocks/render-block-navigation-test.php
+++ b/phpunit/blocks/render-block-navigation-test.php
@@ -17,7 +17,7 @@ class Render_Block_Navigation_Test extends WP_UnitTestCase {
 	 */
 	public function test_block_core_navigation_get_post_ids_from_block() {
 		$parsed_blocks = parse_blocks(
-			'<!-- wp:navigation-link {"label":"Sample Page","type":"page","kind":"post-type","id":755,"url":"http://localhost:8888/?page_id=755"} /-->'
+			'<!-- wp:navigation-link {"label":"Sample Page","type":"page","kind":"post-type","id":755,"url":"http://' . WP_TESTS_DOMAIN . '/?page_id=755"} /-->'
 		);
 		$parsed_block  = $parsed_blocks[0];
 		$context       = array();
@@ -33,13 +33,13 @@ public function test_block_core_navigation_get_post_ids_from_block() {
 	public function test_block_core_navigation_get_post_ids_from_block_nested() {
 		$parsed_blocks = parse_blocks(
 			'<!-- wp:group -->
-					<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":20,"url":"http://localhost:8888/?page_id=20","kind":"post-type","isTopLevelLink":true} /-->
-					<!-- wp:navigation-link {"label":"Hello world!","type":"post","id":10,"url":"http://localhost:8888/?p=10","kind":"post-type","isTopLevelLink":true} /-->
-					<!-- wp:navigation-submenu {"label":"Uncategorized","type":"category","id":1,"url":"http://localhost:8888/?cat=1","kind":"taxonomy","isTopLevelItem":true} -->
-					<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":30,"url":"http://localhost:8888/?page_id=30","kind":"post-type","isTopLevelLink":false} /-->
-					<!-- wp:navigation-submenu {"label":"Hello world!","type":"post","id":40,"url":"http://localhost:8888/?p=40","kind":"post-type","isTopLevelItem":false} -->
-					<!-- wp:navigation-link {"label":"Uncategorized","type":"category","id":5,"url":"http://localhost:8888/?cat=5","kind":"taxonomy","isTopLevelLink":false} /-->
-					<!-- wp:navigation-link {"label":"Hello world!","type":"post","id":60,"url":"http://localhost:8888/?p=60","kind":"post-type","isTopLevelLink":false} /-->
+					<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":20,"url":"http://' . WP_TESTS_DOMAIN . '/?page_id=20","kind":"post-type","isTopLevelLink":true} /-->
+					<!-- wp:navigation-link {"label":"Hello world!","type":"post","id":10,"url":"http://' . WP_TESTS_DOMAIN . '/?p=10","kind":"post-type","isTopLevelLink":true} /-->
+					<!-- wp:navigation-submenu {"label":"Uncategorized","type":"category","id":1,"url":"http://' . WP_TESTS_DOMAIN . '/?cat=1","kind":"taxonomy","isTopLevelItem":true} -->
+					<!-- wp:navigation-link {"label":"Sample Page","type":"page","id":30,"url":"http://' . WP_TESTS_DOMAIN . '/?page_id=30","kind":"post-type","isTopLevelLink":false} /-->
+					<!-- wp:navigation-submenu {"label":"Hello world!","type":"post","id":40,"url":"http://' . WP_TESTS_DOMAIN . '/?p=40","kind":"post-type","isTopLevelItem":false} -->
+					<!-- wp:navigation-link {"label":"Uncategorized","type":"category","id":5,"url":"http://' . WP_TESTS_DOMAIN . '/?cat=5","kind":"taxonomy","isTopLevelLink":false} /-->
+					<!-- wp:navigation-link {"label":"Hello world!","type":"post","id":60,"url":"http:/' . WP_TESTS_DOMAIN . '/?p=60","kind":"post-type","isTopLevelLink":false} /-->
 					<!-- /wp:navigation-submenu -->
 					<!-- /wp:navigation-submenu -->
 					<!-- /wp:group -->'
@@ -56,7 +56,7 @@ public function test_block_core_navigation_get_post_ids_from_block_nested() {
 	 * @covers ::gutenberg_block_core_navigation_from_block_get_post_ids
 	 */
 	public function test_block_core_navigation_get_post_ids_from_block_with_submenu() {
-		$parsed_blocks = parse_blocks( '<!-- wp:navigation-submenu {"label":"Test","type":"post","id":789,"url":"http://localhost/blog/test-3","kind":"post-type","isTopLevelItem":true} -->\n<!-- wp:navigation-link {"label":"(no title)","type":"post","id":755,"url":"http://localhost/blog/755","kind":"post-type","isTopLevelLink":false} /-->\n<!-- /wp:navigation-submenu -->' );
+		$parsed_blocks = parse_blocks( '<!-- wp:navigation-submenu {"label":"Test","type":"post","id":789,"url":"http://' . WP_TESTS_DOMAIN . '/blog/test-3","kind":"post-type","isTopLevelItem":true} -->\n<!-- wp:navigation-link {"label":"(no title)","type":"post","id":755,"url":"http://' . WP_TESTS_DOMAIN . '/blog/755","kind":"post-type","isTopLevelLink":false} /-->\n<!-- /wp:navigation-submenu -->' );
 		$parsed_block  = $parsed_blocks[0];
 		$context       = array();
 		$block         = new WP_Block( $parsed_block, $context );
@@ -65,5 +65,24 @@ public function test_block_core_navigation_get_post_ids_from_block_with_submenu(
 		$this->assertSameSetsWithIndex( array( 755, 789 ), $post_ids );
 	}
 
+	/**
+	 * @covers :: block_core_navigation_block_contains_core_navigation
+	 */
+	public function test_block_core_navigation_block_contains_core_navigation() {
+		$parsed_blocks = parse_blocks( '<!-- wp:navigation /-->' );
+		$inner_blocks  = new WP_Block_List( $parsed_blocks );
+		$this->assertTrue( block_core_navigation_block_contains_core_navigation( $inner_blocks ) );
+	}
 
+	public function test_block_core_navigation_block_contains_core_navigation_deep() {
+		$parsed_blocks = parse_blocks( '<!-- wp:group --><!-- /wp:group --><!-- wp:group --><!-- wp:group --><!-- wp:navigation /--><!-- /wp:group --><!-- /wp:group -->' );
+		$inner_blocks  = new WP_Block_List( $parsed_blocks );
+		$this->assertTrue( block_core_navigation_block_contains_core_navigation( $inner_blocks ) );
+	}
+
+	public function test_block_core_navigation_block_contains_core_navigation_no_navigation() {
+		$parsed_blocks = parse_blocks( '<!-- wp:group --><!-- wp:group --><!-- /wp:group --><!-- /wp:group -->' );
+		$inner_blocks  = new WP_Block_List( $parsed_blocks );
+		$this->assertFalse( block_core_navigation_block_contains_core_navigation( $inner_blocks ) );
+	}
 }
diff --git a/phpunit/blocks/render-comment-template-test.php b/phpunit/blocks/render-comment-template-test.php
new file mode 100644
index 00000000000000..64700424473aad
--- /dev/null
+++ b/phpunit/blocks/render-comment-template-test.php
@@ -0,0 +1,175 @@
+<?php
+/**
+ * Tests for the Comment Template block rendering.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ * @since 6.3.0
+ *
+ * @group blocks
+ */
+class Tests_Blocks_RenderCommentTemplateBlock extends WP_UnitTestCase {
+
+	private static $custom_post;
+	private static $comment_ids;
+	private static $per_page = 5;
+
+	/**
+	 * Array of the comments options and their original values.
+	 * Used to reset the options after each test.
+	 *
+	 * @var array
+	 */
+	private static $original_options;
+
+	public static function set_up_before_class() {
+		parent::set_up_before_class();
+
+		// Store the original option values.
+		$options = array(
+			'comment_order',
+			'comments_per_page',
+			'default_comments_page',
+			'page_comments',
+			'previous_default_page',
+			'thread_comments_depth',
+		);
+		foreach ( $options as $option ) {
+			static::$original_options[ $option ] = get_option( $option );
+		}
+	}
+
+	public function tear_down() {
+		// Reset the comment options to their original values.
+		foreach ( static::$original_options as $option => $original_value ) {
+			update_option( $option, $original_value );
+		}
+
+		parent::tear_down();
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		update_option( 'page_comments', true );
+		update_option( 'comments_per_page', self::$per_page );
+
+		self::$custom_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'dogs',
+				'post_status'  => 'publish',
+				'post_name'    => 'metaldog',
+				'post_title'   => 'Metal Dog',
+				'post_content' => 'Metal Dog content',
+				'post_excerpt' => 'Metal Dog',
+			)
+		);
+
+		self::$comment_ids = self::factory()->comment->create_post_comments(
+			self::$custom_post->ID,
+			1,
+			array(
+				'comment_author'       => 'Test',
+				'comment_author_email' => 'test@example.org',
+				'comment_author_url'   => 'http://example.com/author-url/',
+				'comment_content'      => 'Hello world',
+			)
+		);
+	}
+
+	public function test_rendering_comment_template_sets_comment_id_context() {
+		$parsed_comment_author_name_block = parse_blocks( '<!-- wp:comment-author-name /-->' )[0];
+		$comment_author_name_block        = new WP_Block(
+			$parsed_comment_author_name_block,
+			array(
+				'commentId' => self::$comment_ids[0],
+			)
+		);
+		$comment_author_name_block_markup = $comment_author_name_block->render();
+		$this->assertNotEmpty(
+			$comment_author_name_block_markup,
+			'Comment Author Name block rendered markup is empty.'
+		);
+
+		$render_block_callback = static function ( $block_content, $block ) use ( $parsed_comment_author_name_block ) {
+			// Insert a Comment Author Name block (which requires `commentId`
+			// block context to work) after the Comment Content block.
+			if ( 'core/comment-content' !== $block['blockName'] ) {
+				return $block_content;
+			}
+
+			$inserted_content = render_block( $parsed_comment_author_name_block );
+			return $inserted_content . $block_content;
+		};
+
+		add_filter( 'render_block', $render_block_callback, 10, 3 );
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:comment-template --><!-- wp:comment-content /--><!-- /wp:comment-template -->'
+		);
+		$block         = new WP_Block(
+			$parsed_blocks[0],
+			array(
+				'postId' => self::$custom_post->ID,
+			)
+		);
+		$markup        = $block->render();
+		remove_filter( 'render_block', $render_block_callback );
+
+		$this->assertStringContainsString(
+			$comment_author_name_block_markup,
+			$markup,
+			"Rendered markup doesn't contain Comment Author Name block."
+		);
+	}
+
+	public function test_inner_block_inserted_by_render_block_data_is_retained() {
+		$render_block_callback = new MockAction();
+		add_filter( 'render_block', array( $render_block_callback, 'filter' ), 10, 3 );
+
+		$render_block_data_callback = static function ( $parsed_block ) {
+			// Add a Social Links block to a Comment Template block's inner blocks.
+			if ( 'core/comment-template' === $parsed_block['blockName'] ) {
+				$inserted_block_markup = <<<END
+<!-- wp:social-links -->
+<ul class="wp-block-social-links"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--></ul>
+<!-- /wp:social-links -->'
+END;
+
+				$inserted_blocks = parse_blocks( $inserted_block_markup );
+
+				$parsed_block['innerBlocks'][] = $inserted_blocks[0];
+			}
+			return $parsed_block;
+		};
+
+		add_filter( 'render_block_data', $render_block_data_callback, 10, 1 );
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:comments --><!-- wp:comment-template --><!-- wp:comment-content /--><!-- /wp:comment-template --><!-- /wp:comments -->'
+		);
+		$block         = new WP_Block(
+			$parsed_blocks[0],
+			array(
+				'postId' => self::$custom_post->ID,
+			)
+		);
+		$block->render();
+		remove_filter( 'render_block_data', $render_block_data_callback );
+
+		$this->assertSame( 5, $render_block_callback->get_call_count() );
+
+		$args = $render_block_callback->get_args();
+		$this->assertSame( 'core/comment-content', $args[0][2]->name );
+		$this->assertSame( 'core/comment-template', $args[1][2]->name );
+		$this->assertCount( 2, $args[1][2]->inner_blocks, "Inner block inserted by render_block_data filter wasn't retained." );
+		$this->assertInstanceOf(
+			'WP_Block',
+			$args[1][2]->inner_blocks[1],
+			"Inner block inserted by render_block_data isn't a WP_Block class instance."
+		);
+		$this->assertSame(
+			'core/social-links',
+			$args[1][2]->inner_blocks[1]->name,
+			"Inner block inserted by render_block_data isn't named as expected."
+		);
+	}
+}
diff --git a/phpunit/blocks/render-post-template-test.php b/phpunit/blocks/render-post-template-test.php
new file mode 100644
index 00000000000000..e929e459654fe7
--- /dev/null
+++ b/phpunit/blocks/render-post-template-test.php
@@ -0,0 +1,219 @@
+<?php
+/**
+ * Tests for the Post Template block rendering.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ * @since 6.0.0
+ *
+ * @group blocks
+ */
+class Tests_Blocks_RenderPostTemplateBlock extends WP_UnitTestCase {
+
+	private static $post;
+	private static $other_post;
+
+	public function set_up() {
+		parent::set_up();
+
+		self::$post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_status'  => 'publish',
+				'post_name'    => 'metaldog',
+				'post_title'   => 'Metal Dog',
+				'post_content' => 'Metal Dog content',
+				'post_excerpt' => 'Metal Dog',
+			)
+		);
+
+		self::$other_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_status'  => 'publish',
+				'post_name'    => 'ceilingcat',
+				'post_title'   => 'Ceiling Cat',
+				'post_content' => 'Ceiling Cat content',
+				'post_excerpt' => 'Ceiling Cat',
+			)
+		);
+	}
+
+	public function test_rendering_post_template() {
+		$parsed_blocks = parse_blocks(
+			'<!-- wp:post-template --><!-- wp:post-title /--><!-- wp:post-excerpt /--><!-- /wp:post-template -->'
+		);
+		$block         = new WP_Block( $parsed_blocks[0] );
+		$markup        = $block->render();
+
+		$post_id       = self::$post->ID;
+		$other_post_id = self::$other_post->ID;
+
+		$expected = <<<END
+<ul class="wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
+	<li class="wp-block-post post-$other_post_id post type-post status-publish format-standard hentry category-uncategorized">
+		<h2 class="wp-block-post-title">Ceiling Cat</h2>
+		<div class="wp-block-post-excerpt">
+			<p class="wp-block-post-excerpt__excerpt">Ceiling Cat </p>
+		</div>
+	</li>
+	<li class="wp-block-post post-$post_id post type-post status-publish format-standard hentry category-uncategorized">
+		<h2 class="wp-block-post-title">Metal Dog</h2>
+		<div class="wp-block-post-excerpt">
+			<p class="wp-block-post-excerpt__excerpt">Metal Dog </p>
+		</div>
+	</li>
+</ul>
+END;
+		$this->assertSame(
+			str_replace( array( "\n", "\t" ), '', $expected ),
+			str_replace( array( "\n", "\t" ), '', $markup )
+		);
+	}
+
+	/**
+	 * Tests that the `core/post-template` block triggers the main query loop when rendering within a corresponding
+	 * `core/query` block.
+	 */
+	public function test_rendering_post_template_with_main_query_loop() {
+		global $wp_query, $wp_the_query;
+
+		// Query block with post template block.
+		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content .= '<!-- wp:post-template {"align":"wide"} -->';
+		$content .= '<!-- wp:post-title /--><!-- wp:test/in-the-loop-logger /-->';
+		$content .= '<!-- /wp:post-template -->';
+		$content .= '<!-- /wp:query -->';
+
+		$expected  = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+		$expected .= '<li class="wp-block-post post-' . self::$post->ID . ' post type-post status-publish format-standard hentry category-uncategorized">';
+		$expected .= '<h2 class="wp-block-post-title">' . self::$post->post_title . '</h2>';
+		$expected .= '</li>';
+		$expected .= '</ul>';
+
+		// Set main query to single post.
+		$wp_query     = new WP_Query( array( 'p' => self::$post->ID ) );
+		$wp_the_query = $wp_query;
+
+		// Register test block to log `in_the_loop()` results.
+		$in_the_loop_logs = array();
+		register_block_type(
+			'test/in-the-loop-logger',
+			array(
+				'render_callback' => static function () use ( &$in_the_loop_logs ) {
+					$in_the_loop_logs[] = in_the_loop();
+					return '';
+				},
+			)
+		);
+
+		$output = do_blocks( $content );
+		$this->assertSame( $expected, $output, 'Unexpected parsed blocks content' );
+		$this->assertSame( array( true ), $in_the_loop_logs, 'Unexpected in_the_loop() result' );
+	}
+
+	/**
+	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a single post
+	 * as the main query loop has already been started. In this case, the main query object needs to be cloned to
+	 * prevent an infinite loop.
+	 * Also tests that the default query returns posts of the 'post' post type when in a single post of any post type.
+	 */
+	public function test_rendering_post_template_with_main_query_loop_already_started() {
+		global $wp_query, $wp_the_query;
+
+		// Query block with post template block.
+		$content  = '<!-- wp:query {"query":{"inherit":false}} -->';
+		$content .= '<!-- wp:post-template {"align":"wide"} -->';
+		$content .= '<!-- wp:post-title /-->';
+		$content .= '<!-- /wp:post-template -->';
+		$content .= '<!-- /wp:query -->';
+
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
+		$expected .= '</ul>';
+
+		// Update the post's content to have a query block for the same query as the main query.
+		wp_update_post(
+			array(
+				'ID'                    => self::$post->ID,
+				'post_content'          => $content,
+				'post_content_filtered' => $content,
+			)
+		);
+
+		// Set main query to single post.
+		$wp_query     = new WP_Query( array( 'p' => self::$post->ID ) );
+		$wp_the_query = $wp_query;
+
+		// Get post content within main query loop.
+		$output = '';
+		while ( $wp_query->have_posts() ) {
+			$wp_query->the_post();
+
+			$output = get_echo( 'the_content' );
+		}
+
+		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
+	}
+
+	/**
+	 * Tests that the `core/post-template` block rewinds the default query when not in a single post of any post type.
+	 */
+	public function test_rendering_post_template_with_main_query_loop_not_single_post() {
+		global $wp_query, $wp_the_query;
+
+		// Query block with post template block.
+		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content .= '<!-- wp:post-template {"align":"wide"} -->';
+		$content .= '<!-- wp:post-title /-->';
+		$content .= '<!-- /wp:post-template -->';
+		$content .= '<!-- /wp:query -->';
+
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
+		$expected .= '</ul>';
+
+		// Update the post's content to have a query block for the same query as the main query.
+		wp_update_post(
+			array(
+				'ID'                    => self::$post->ID,
+				'post_content'          => $content,
+				'post_content_filtered' => $content,
+			)
+		);
+
+		// Set main query to all posts.
+		$wp_query     = new WP_Query( array( 'post_type' => 'post' ) );
+		$wp_the_query = $wp_query;
+
+		// Get post content within main query loop.
+		$output = '';
+		while ( $wp_query->have_posts() ) {
+			$wp_query->the_post();
+
+			$output = get_echo( 'the_content' );
+		}
+
+		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
+	}
+}
diff --git a/phpunit/blocks/render-post-time-to-read-test.php b/phpunit/blocks/render-post-time-to-read-test.php
new file mode 100644
index 00000000000000..344b3fe0c71c9f
--- /dev/null
+++ b/phpunit/blocks/render-post-time-to-read-test.php
@@ -0,0 +1,187 @@
+<?php
+/**
+ * Post Time To Read block rendering tests.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ */
+
+/**
+ * Tests for the Post Time To Read block.
+ *
+ * @group blocks
+ */
+class Tests_Blocks_Render_Post_Time_To_Read extends WP_UnitTestCase {
+	/**
+	 * @var array
+	 */
+	protected static $posts;
+	/**
+	 * @var WP_Post
+	 */
+	protected static $no_content_post;
+	/**
+	 * @var WP_Post
+	 */
+	protected static $less_than_one_minute_post;
+	/**
+	 * @var WP_Post
+	 */
+	protected static $one_minute_post;
+	/**
+	 * @var WP_Post
+	 */
+	protected static $two_minutes_post;
+	/**
+	 * @var array|null
+	 */
+	private $original_block_supports;
+
+	public static function wpSetUpBeforeClass() {
+		$content = '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.';
+
+		self::$no_content_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_title'   => 'Post without content',
+				'post_content' => '',
+			)
+		);
+		self::$posts[]         = self::$no_content_post;
+
+		self::$less_than_one_minute_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_title'   => 'Post that takes less than 1 minute to read',
+				'post_content' => $content,
+			)
+		);
+		self::$posts[]                   = self::$less_than_one_minute_post;
+
+		self::$one_minute_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_title'   => 'Post that takes 1 minute to read',
+				'post_content' => str_repeat( $content, 2 ),
+			)
+		);
+		self::$posts[]         = self::$one_minute_post;
+
+		self::$two_minutes_post = self::factory()->post->create_and_get(
+			array(
+				'post_type'    => 'post',
+				'post_title'   => 'Post that takes 2 minutes to read',
+				'post_content' => str_repeat( $content, 5 ),
+			)
+		);
+		self::$posts[]          = self::$two_minutes_post;
+	}
+
+	public static function wpTearDownAfterClass() {
+		foreach ( self::$posts as $post_to_delete ) {
+			wp_delete_post( $post_to_delete->ID, true );
+		}
+	}
+
+	public function set_up() {
+		parent::set_up();
+		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
+		WP_Block_Supports::$block_to_render = array(
+			'attrs'     => array(),
+			'blockName' => 'core/post-time-to-read',
+		);
+	}
+
+	public function tear_down() {
+		WP_Block_Supports::$block_to_render = $this->original_block_supports;
+		parent::tear_down();
+	}
+
+	/**
+	 * @covers ::render_block_core_post_time_to_read
+	 */
+	public function test_no_content_post() {
+		global $wp_query;
+
+		$wp_query->post  = self::$no_content_post;
+		$GLOBALS['post'] = self::$no_content_post;
+
+		$page_id       = self::$no_content_post->ID;
+		$attributes    = array();
+		$parsed_blocks = parse_blocks( '<!-- wp:post-time-to-read /-->' );
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array( 'postId' => $page_id );
+		$block         = new WP_Block( $parsed_block, $context );
+
+		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * @covers ::render_block_core_post_time_to_read
+	 */
+	public function test_less_than_one_minute_post() {
+		global $wp_query;
+
+		$wp_query->post  = self::$less_than_one_minute_post;
+		$GLOBALS['post'] = self::$less_than_one_minute_post;
+
+		$page_id       = self::$less_than_one_minute_post->ID;
+		$attributes    = array();
+		$parsed_blocks = parse_blocks( '<!-- wp:post-time-to-read /-->' );
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array( 'postId' => $page_id );
+		$block         = new WP_Block( $parsed_block, $context );
+
+		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * @covers ::render_block_core_post_time_to_read
+	 */
+	public function test_one_minute_post() {
+		global $wp_query;
+
+		$wp_query->post  = self::$one_minute_post;
+		$GLOBALS['post'] = self::$one_minute_post;
+
+		$page_id       = self::$one_minute_post->ID;
+		$attributes    = array();
+		$parsed_blocks = parse_blocks( '<!-- wp:post-time-to-read /-->' );
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array( 'postId' => $page_id );
+		$block         = new WP_Block( $parsed_block, $context );
+
+		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
+		$expected = '<div class="wp-block-post-time-to-read">1 minute</div>';
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * @covers ::render_block_core_post_time_to_read
+	 */
+	public function test_two_minutes_post() {
+		global $wp_query;
+
+		$wp_query->post  = self::$two_minutes_post;
+		$GLOBALS['post'] = self::$two_minutes_post;
+
+		$page_id       = self::$two_minutes_post->ID;
+		$attributes    = array();
+		$parsed_blocks = parse_blocks( '<!-- wp:post-time-to-read /-->' );
+		$parsed_block  = $parsed_blocks[0];
+		$context       = array( 'postId' => $page_id );
+		$block         = new WP_Block( $parsed_block, $context );
+
+		$actual   = gutenberg_render_block_core_post_time_to_read( $attributes, '', $block );
+		$expected = '<div class="wp-block-post-time-to-read">2 minutes</div>';
+
+		$this->assertSame( $expected, $actual );
+	}
+}
diff --git a/phpunit/blocks/render-query-test.php b/phpunit/blocks/render-query-test.php
new file mode 100644
index 00000000000000..7fe39f390b2e62
--- /dev/null
+++ b/phpunit/blocks/render-query-test.php
@@ -0,0 +1,279 @@
+<?php
+/**
+ * Tests for the Query block rendering.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ * @since 6.0.0
+ *
+ * @group blocks
+ */
+class Tests_Blocks_RenderQueryBlock extends WP_UnitTestCase {
+
+	private static $posts;
+
+	private $original_wp_interactivity;
+
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$posts = $factory->post->create_many( 3 );
+
+		register_block_type(
+			'test/plugin-block',
+			array(
+				'render_callback' => static function () {
+					return '<div class="wp-block-test/plugin-block">Test</div>';
+				},
+			)
+		);
+	}
+
+	public static function wpTearDownAfterClass() {
+		unregister_block_type( 'test/plugin-block' );
+	}
+
+	public function set_up() {
+		parent::set_up();
+		global $wp_interactivity;
+		$this->original_wp_interactivity = $wp_interactivity;
+		$wp_interactivity                = new WP_Interactivity_API();
+	}
+
+	public function tear_down() {
+		global $wp_interactivity;
+		$wp_interactivity = $this->original_wp_interactivity;
+		parent::tear_down();
+	}
+
+
+	/**
+	 * Tests that the `core/query` block adds the corresponding directives when
+	 * the `enhancedPagination` attribute is set.
+	 */
+	public function test_rendering_query_with_enhanced_pagination() {
+		global $wp_query, $wp_the_query, $paged;
+
+		$content = <<<HTML
+		<!-- wp:query {"queryId":0,"query":{"inherit":true},"enhancedPagination":true} -->
+		<div class="wp-block-query">
+			<!-- wp:post-template {"align":"wide"} -->
+			<!-- /wp:post-template -->
+			<!-- wp:query-pagination -->
+				<!-- wp:query-pagination-previous /-->
+				<!-- wp:query-pagination-next /-->
+			<!-- /wp:query-pagination -->
+		</div>
+		<!-- /wp:query -->
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+				'paged'          => 2,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+		$prev_paged   = $paged;
+		$paged        = 2;
+
+		$output = do_blocks( $content );
+
+		$paged = $prev_paged;
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( '{}', $p->get_attribute( 'data-wp-context' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
+		$this->assertSame( 'core/query', $p->get_attribute( 'data-wp-interactive' ) );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-post' ) );
+		$this->assertSame( 'post-template-item-' . self::$posts[1], $p->get_attribute( 'data-wp-key' ) );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query-pagination-previous' ) );
+		$this->assertSame( 'query-pagination-previous', $p->get_attribute( 'data-wp-key' ) );
+		$this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) );
+		$this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query-pagination-next' ) );
+		$this->assertSame( 'query-pagination-next', $p->get_attribute( 'data-wp-key' ) );
+		$this->assertSame( 'core/query::actions.navigate', $p->get_attribute( 'data-wp-on--click' ) );
+		$this->assertSame( 'core/query::actions.prefetch', $p->get_attribute( 'data-wp-on-async--mouseenter' ) );
+		$this->assertSame( 'core/query::callbacks.prefetch', $p->get_attribute( 'data-wp-watch' ) );
+
+		$router_config = wp_interactivity_config( 'core/router' );
+		$this->assertEmpty( $router_config );
+	}
+
+	/**
+	 * Tests that the `core/query` block sets the option
+	 * `clientNavigationDisabled` to `true` in the `core/router` store config
+	 * when a plugin block is found inside.
+	 */
+	public function test_rendering_query_with_enhanced_pagination_auto_disabled_when_plugins_blocks_are_found() {
+		global $wp_query, $wp_the_query;
+
+		$content = <<<HTML
+		<!-- wp:query {"queryId":0,"query":{"inherit":true},"enhancedPagination":true} -->
+		<div class="wp-block-query">
+			<!-- wp:post-template {"align":"wide"} -->
+				<!-- wp:test/plugin-block /-->
+			<!-- /wp:post-template -->
+		</div>
+		<!-- /wp:query -->
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+
+		$output = do_blocks( $content );
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
+
+		$router_config = wp_interactivity_config( 'core/router' );
+		$this->assertTrue( $router_config['clientNavigationDisabled'] );
+	}
+
+	/**
+	 * Tests that the `core/query` block sets the option
+	 * `clientNavigationDisabled` to `true` in the `core/router` store config
+	 * when a post content block is found inside.
+	 */
+	public function test_rendering_query_with_enhanced_pagination_auto_disabled_when_post_content_block_is_found() {
+		global $wp_query, $wp_the_query;
+
+		$content = <<<HTML
+		<!-- wp:query {"queryId":0,"query":{"inherit":true},"enhancedPagination":true} -->
+		<div class="wp-block-query">
+			<!-- wp:post-template {"align":"wide"} -->
+				<!-- wp:post-content /-->
+			<!-- /wp:post-template -->
+		</div>
+		<!-- /wp:query -->
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+
+		$output = do_blocks( $content );
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
+		$router_config = wp_interactivity_config( 'core/router' );
+		$this->assertTrue( $router_config['clientNavigationDisabled'] );
+	}
+
+	/**
+	 * Tests that, whenever a `core/query` contains a descendant that is not
+	 * supported (i.e., a plugin block), the option `clientNavigationDisabled`
+	 * is set to `true` in the `core/router` store config.
+	 */
+	public function test_rendering_nested_queries_with_enhanced_pagination_auto_disabled() {
+		global $wp_query, $wp_the_query;
+
+		$content = <<<HTML
+			<!-- wp:query {"queryId":0,"query":{"inherit":true},"enhancedPagination":true} -->
+			<div class="wp-block-query">
+				<!-- wp:post-template {"align":"wide"} -->
+					<!-- wp:query {"queryId":1,"query":{"inherit":true},"enhancedPagination":true} -->
+					<div class="wp-block-query">
+						<!-- wp:post-template {"align":"wide"} -->
+						<!-- /wp:post-template -->
+					</div>
+					<!-- /wp:query-pagination -->
+					<!-- wp:query {"queryId":2,"query":{"inherit":true},"enhancedPagination":true} -->
+					<div class="wp-block-query">
+						<!-- wp:post-template {"align":"wide"} -->
+							<!-- wp:test/plugin-block /-->
+						<!-- /wp:post-template -->
+					</div>
+					<!-- /wp:query-pagination -->
+				<!-- /wp:post-template -->
+			</div>
+			<!-- /wp:query -->
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+
+		$output = do_blocks( $content );
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		// Query 0 contains a plugin block inside query-2 -> disabled.
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
+
+		// Query 1 does not contain a plugin block -> enabled.
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-1', $p->get_attribute( 'data-wp-router-region' ) );
+
+		// Query 2 contains a plugin block -> disabled.
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-2', $p->get_attribute( 'data-wp-router-region' ) );
+
+		$router_config = wp_interactivity_config( 'core/router' );
+		$this->assertTrue( $router_config['clientNavigationDisabled'] );
+	}
+
+	/**
+	 * Tests that the `core/query` block sets the option
+	 * `clientNavigationDisabled` to `true` in the `core/router` store config
+	 * when a plugin that does not define clientNavigation is found inside.
+	 */
+	public function test_rendering_query_with_enhanced_pagination_auto_disabled_when_there_is_a_non_compatible_block() {
+		global $wp_query, $wp_the_query;
+
+		$content = <<<HTML
+		<!-- wp:query {"queryId":0,"query":{"inherit":true},"enhancedPagination":true} -->
+		<div class="wp-block-query">
+			<!-- wp:post-content {"align":"wide"} --><!-- /wp:post-content -->
+		</div>
+		<!-- /wp:query -->
+HTML;
+
+		// Set main query to single post.
+		$wp_query = new WP_Query(
+			array(
+				'posts_per_page' => 1,
+			)
+		);
+
+		$wp_the_query = $wp_query;
+
+		$output = do_blocks( $content );
+
+		$p = new WP_HTML_Tag_Processor( $output );
+
+		$p->next_tag( array( 'class_name' => 'wp-block-query' ) );
+		$this->assertSame( 'query-0', $p->get_attribute( 'data-wp-router-region' ) );
+
+		$router_config = wp_interactivity_config( 'core/router' );
+		$this->assertTrue( $router_config['clientNavigationDisabled'] );
+	}
+}
diff --git a/phpunit/blocks/renderBlockCorePostExcerpt.php b/phpunit/blocks/renderBlockCorePostExcerpt.php
new file mode 100644
index 00000000000000..38c27bfde9b30a
--- /dev/null
+++ b/phpunit/blocks/renderBlockCorePostExcerpt.php
@@ -0,0 +1,147 @@
+<?php
+/**
+ * Tests for the gutenberg_render_block_core_post_excerpt() function.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ *
+ * @covers ::gutenberg_render_block_core_post_excerpt
+ * @group blocks
+ */
+class Tests_Blocks_RenderBlockCorePostExcerpt extends WP_UnitTestCase {
+
+	/**
+	 * Post object with data.
+	 *
+	 * @var array
+	 */
+	protected static $post;
+
+	/**
+	 * Array of Attributes.
+	 *
+	 * @var int
+	 */
+	protected static $attributes;
+
+	/**
+	 * Setup method.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+
+		self::$post = $factory->post->create_and_get(
+			array(
+				'post_title'   => 'Post Expert block Unit Test',
+				'post_excerpt' => 'Post Expert content',
+			)
+		);
+
+		self::$attributes = array(
+			'moreText'      => '',
+			'excerptLength' => 55,
+		);
+
+		$block = array(
+			'blockName'    => 'core/post-excerpt',
+			'attrs'        => array(
+				'moreText' => '',
+			),
+			'innerBlock'   => array(),
+			'innerContent' => array(),
+			'innerHTML'    => array(),
+		);
+
+		WP_Block_Supports::init();
+		WP_Block_Supports::$block_to_render = $block;
+	}
+
+	/**
+	 * Tear down method.
+	 */
+	public static function wpTearDownAfterClass() {
+		wp_delete_post( self::$post->ID, true );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_post_excerpt() method
+	 * with empty data.
+	 */
+	public function test_should_render_empty_string_when_excerpt_is_empty() {
+		$block = new stdClass();
+
+		// call render method with block context.
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertSame( '', $rendered, 'Failed to assert that $rendered is an empty string.' );
+	}
+
+	/**
+	 * Test gutenberg_render_block_core_post_excerpt() method.
+	 */
+	public function test_should_render_correct_exceprt() {
+
+		$block           = new stdClass();
+		$GLOBALS['post'] = self::$post;
+		$block->context  = array( 'postId' => self::$post->ID );
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertNotEmpty( $rendered, 'Failed to assert that $rendered is not empty.' );
+		$this->assertStringContainsString(
+			'Post Expert content',
+			$rendered,
+			'Failed to assert that $rendered contain the expected string.'
+		);
+		$this->assertStringContainsString(
+			'</p',
+			$rendered,
+			'Failed to assert that $rendered contains a closing html paragraph tag.'
+		);
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__excerpt',
+			$rendered,
+			'Failed to assert that $rendered contain the "wp-block-post-excerpt__excerpt" string.'
+		);
+		$this->assertStringNotContainsString(
+			'has-text-align',
+			$rendered,
+			'Failed to assert that $rendered  does not contain the has-text-align class.'
+		);
+
+		self::$attributes['textAlign'] = 'left';
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertStringContainsString(
+			'has-text-align-left',
+			$rendered,
+			'Failed to assert that $rendered contains the "has-text-align-left" class.'
+		);
+
+		self::$attributes = array(
+			'moreText'      => 'Read More',
+			'excerptLength' => 55,
+		);
+
+		$rendered = gutenberg_render_block_core_post_excerpt( self::$attributes, '', $block );
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__more-link',
+			$rendered,
+			'Failed to assert that $rendered contains the expected string.'
+		);
+
+		self::$attributes = array(
+			'moreText'          => 'Read More',
+			'showMoreOnNewLine' => true,
+		);
+		$this->assertStringContainsString(
+			'wp-block-post-excerpt__more-link',
+			$rendered,
+			'Failed to assert that $rendered contains the expected string.'
+		);
+		$this->assertStringContainsString(
+			get_permalink( self::$post->ID ),
+			$rendered,
+			'Failed to assert that $rendered contain expected post the expected post URL.'
+		);
+	}
+}
diff --git a/phpunit/blocks/renderBlockCorePostTitle.php b/phpunit/blocks/renderBlockCorePostTitle.php
new file mode 100644
index 00000000000000..4c080a1c905ff6
--- /dev/null
+++ b/phpunit/blocks/renderBlockCorePostTitle.php
@@ -0,0 +1,185 @@
+<?php
+/**
+ * Tests for the gutenberg_render_block_core_post_title() function.
+ *
+ * @package WordPress
+ * @subpackage Blocks
+ *
+ * @covers ::gutenberg_render_block_core_post_title
+ * @group blocks
+ */
+class Tests_Blocks_RenderBlockCorePostTitle extends WP_UnitTestCase {
+	/**
+	 * Post object.
+	 *
+	 * @var WP_Post
+	 */
+	protected static $post;
+
+	/**
+	 * Array of attributes.
+	 *
+	 * @var array
+	 */
+	protected static $attributes;
+
+	/**
+	 * Block object.
+	 *
+	 * @var WP_Block
+	 */
+	protected static $block;
+
+	/**
+	 * Setup method.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$post = $factory->post->create_and_get( array( 'post_title' => 'Post title block Unit Test' ) );
+
+		self::$attributes = array(
+			'textAlign'  => '',
+			'level'      => 2,
+			'isLink'     => false,
+			'linkTarget' => '',
+			'rel'        => '',
+		);
+
+		self::$block = new stdClass();
+
+		$block_args = array(
+			'blockName'    => 'core/post-title',
+			'attrs'        => array(
+				'textColor' => 'red',
+			),
+			'innerBlock'   => array(),
+			'innerContent' => array(),
+			'innerHTML'    => array(),
+		);
+
+		WP_Block_Supports::init();
+		WP_Block_Supports::$block_to_render = $block_args;
+	}
+
+	/**
+	 * Tear down method.
+	 */
+	public static function wpTearDownAfterClass() {
+		wp_delete_post( self::$post->ID, true );
+	}
+
+	/**
+	 * Test if the function returns an empty string when the post title is empty.
+	 *
+	 * @param mixed  $context         Block context.
+	 * @param string $failure_message Failure message.
+	 *
+	 * @dataProvider data_should_render_empty_string_when_title_is_empty
+	 */
+	public function test_should_render_empty_string_when_title_is_empty( $context, $failure_message ) {
+		if ( $context ) {
+			self::$block->context = $context;
+		}
+		$rendered = gutenberg_render_block_core_post_title( self::$attributes, '', self::$block );
+		$this->assertSame( '', $rendered, $failure_message );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_render_empty_string_when_title_is_empty() {
+		return array(
+			'empty block context' => array( null, 'Failed asserting that rendering result is an empty string when block context is not set.' ),
+			'incorrect post ID'   => array( array( 'postId' => 0 ), 'Failed asserting that rendering result is an empty string when post ID is incorrect.' ),
+		);
+	}
+
+	/**
+	 * Test if the function returns correct titles.
+	 */
+	public function test_should_render_correct_title() {
+
+		$GLOBALS['post']      = self::$post;
+		self::$block->context = array( 'postId' => self::$post->ID );
+
+		$rendered = gutenberg_render_block_core_post_title( self::$attributes, '', self::$block );
+		$this->assertNotEmpty(
+			$rendered,
+			'Failed to assert that $rendered is an non-empty string.'
+		);
+		$this->assertStringContainsString(
+			'Post title block Unit Test',
+			$rendered,
+			'Failed to assert that $rendered contain the post title string.'
+		);
+		$this->assertStringContainsString(
+			'</h2>',
+			$rendered,
+			'Failed to assert that $rendered contain a closing html heading tag.'
+		);
+		$this->assertStringNotContainsString(
+			get_permalink( self::$post->ID ),
+			$rendered,
+			'Failed to assert that $rendered does not contain the post link.'
+		);
+		$this->assertStringNotContainsString(
+			'<a href=',
+			$rendered,
+			'Failed to assert that $rendered does not contain a html anchor tag.'
+		);
+		$this->assertStringNotContainsString(
+			'has-text-align-left',
+			$rendered,
+			'Failed to assert that $rendered does not contain the has-text-align-left class.'
+		);
+
+		self::$attributes['level'] = '1';
+		$rendered                  = gutenberg_render_block_core_post_title( self::$attributes, '', self::$block );
+		$this->assertStringContainsString(
+			'<h1',
+			$rendered,
+			'Failed to assert that $rendered contain the HTML heading tag.'
+		);
+		$this->assertStringContainsString(
+			'</h1>',
+			$rendered,
+			'Failed to assert that $rendered contain a closing HTML heading tag.'
+		);
+
+		self::$attributes['textAlign'] = 'left';
+		$rendered                      = gutenberg_render_block_core_post_title( self::$attributes, '', self::$block );
+		$this->assertStringContainsString(
+			'has-text-align-left',
+			$rendered,
+			'Failed to assert that $rendered contain the has-text-align-left class.'
+		);
+
+		self::$attributes['isLink']     = true;
+		self::$attributes['linkTarget'] = '_blank';
+		self::$attributes['rel']        = 'no-relative';
+		$rendered                       = gutenberg_render_block_core_post_title( self::$attributes, '', self::$block );
+		$this->assertStringContainsString(
+			get_permalink( self::$post->ID ),
+			$rendered,
+			'Failed to assert that $rendered contain the post link.'
+		);
+		$this->assertStringContainsString(
+			'<a href=',
+			$rendered,
+			'Failed to assert that $rendered contain html anchor tag.'
+		);
+		$this->assertStringContainsString(
+			'_blank',
+			$rendered,
+			'Failed to assert that $rendered contain the link target attribute.'
+		);
+		$this->assertStringContainsString(
+			'no-relative',
+			$rendered,
+			'Failed to assert that $rendered contain the link relation attribute.'
+		);
+	}
+}
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index fac777864200a8..36746d05669519 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -21,6 +21,8 @@
 if ( ! defined( 'LOCAL_WP_ENVIRONMENT_TYPE' ) ) {
 	define( 'LOCAL_WP_ENVIRONMENT_TYPE', 'local' );
 }
+define( 'GUTENBERG_DIR_TESTDATA', __DIR__ . '/data/' );
+define( 'GUTENBERG_DIR_TESTFIXTURES', __DIR__ . '/fixtures/' );
 
 // Require composer dependencies.
 require_once dirname( __DIR__ ) . '/vendor/autoload.php';
@@ -86,60 +88,17 @@ function fail_if_died( $message ) {
 	'gutenberg-experiments' => array(
 		'gutenberg-widget-experiments' => '1',
 		'gutenberg-full-site-editing'  => 1,
+		'gutenberg-form-blocks'        => 1,
+		'gutenberg-block-experiments'  => 1,
+		'gutenberg-media-processing'   => 1,
 	),
 );
 
 // Enable the widget block editor.
 tests_add_filter( 'gutenberg_use_widgets_block_editor', '__return_true' );
 
-/**
- * Register test block prior to theme.json generating metadata.
- *
- * This new block is used to test experimental selectors. It is registered
- * via `tests_add_filter()` here during bootstrapping so that it occurs prior
- * to theme.json generating block metadata. Once a core block, such as Image,
- * uses feature level selectors we could remove this in favour of testing via
- * the core block.
- */
-function gutenberg_register_test_block_for_feature_selectors() {
-	WP_Block_Type_Registry::get_instance()->register(
-		'test/test',
-		array(
-			'api_version' => 2,
-			'attributes'  => array(
-				'textColor' => array(
-					'type' => 'string',
-				),
-				'style'     => array(
-					'type' => 'object',
-				),
-			),
-			'supports'    => array(
-				'__experimentalBorder'   => array(
-					'radius'                 => true,
-					'__experimentalSelector' => '.inner',
-				),
-				'color'                  => array(
-					'text' => true,
-				),
-				'spacing'                => array(
-					'padding'                => true,
-					'__experimentalSelector' => '.inner',
-				),
-				'typography'             => array(
-					'fontSize'               => true,
-					'__experimentalSelector' => '.sub-heading',
-				),
-				'__experimentalSelector' => '.wp-block-test, .wp-block-test__wrapper',
-			),
-		)
-	);
-}
-tests_add_filter( 'init', 'gutenberg_register_test_block_for_feature_selectors' );
-
 // Start up the WP testing environment.
 require $_tests_dir . '/includes/bootstrap.php';
 
 // Use existing behavior for wp_die during actual test execution.
 remove_filter( 'wp_die_handler', 'fail_if_died' );
-
diff --git a/phpunit/class-block-context-test.php b/phpunit/class-block-context-test.php
deleted file mode 100644
index 4cf30478aa5682..00000000000000
--- a/phpunit/class-block-context-test.php
+++ /dev/null
@@ -1,199 +0,0 @@
-<?php
-/**
- * Test block context.
- *
- * @package Gutenberg
- */
-
-class Block_Context_Test extends WP_UnitTestCase {
-
-	/**
-	 * Registered block names.
-	 *
-	 * @var string[]
-	 */
-	private $registered_block_names = array();
-
-	/**
-	 * Sets up each test method.
-	 */
-	public function set_up() {
-		global $post;
-
-		parent::set_up();
-
-		$args = array(
-			'post_content' => 'example',
-			'post_excerpt' => '',
-		);
-
-		$post = $this->factory()->post->create_and_get( $args );
-		setup_postdata( $post );
-	}
-
-	/**
-	 * Tear down each test method.
-	 */
-	public function tear_down() {
-		parent::tear_down();
-
-		while ( ! empty( $this->registered_block_names ) ) {
-			$block_name = array_pop( $this->registered_block_names );
-			unregister_block_type( $block_name );
-		}
-	}
-
-	/**
-	 * Registers a block type.
-	 *
-	 * @param string|WP_Block_Type $name Block type name including namespace, or alternatively a
-	 *                                   complete WP_Block_Type instance. In case a WP_Block_Type
-	 *                                   is provided, the $args parameter will be ignored.
-	 * @param array                $args {
-	 *     Optional. Array of block type arguments. Any arguments may be defined, however the
-	 *     ones described below are supported by default. Default empty array.
-	 *
-	 *     @type callable $render_callback Callback used to render blocks of this block type.
-	 * }
-	 */
-	protected function register_block_type( $name, $args ) {
-		register_block_type( $name, $args );
-
-		$this->registered_block_names[] = $name;
-	}
-
-	/**
-	 * Tests that a block which provides context makes that context available to
-	 * its inner blocks.
-	 */
-	public function test_provides_block_context() {
-		$provided_context = array();
-
-		$this->register_block_type(
-			'gutenberg/test-context-provider',
-			array(
-				'attributes'       => array(
-					'contextWithAssigned'   => array(
-						'type' => 'number',
-					),
-					'contextWithDefault'    => array(
-						'type'    => 'number',
-						'default' => 0,
-					),
-					'contextWithoutDefault' => array(
-						'type' => 'number',
-					),
-					'contextNotRequested'   => array(
-						'type' => 'number',
-					),
-				),
-				'provides_context' => array(
-					'gutenberg/contextWithAssigned'   => 'contextWithAssigned',
-					'gutenberg/contextWithDefault'    => 'contextWithDefault',
-					'gutenberg/contextWithoutDefault' => 'contextWithoutDefault',
-					'gutenberg/contextNotRequested'   => 'contextNotRequested',
-				),
-			)
-		);
-
-		$this->register_block_type(
-			'gutenberg/test-context-consumer',
-			array(
-				'uses_context'    => array(
-					'gutenberg/contextWithDefault',
-					'gutenberg/contextWithAssigned',
-					'gutenberg/contextWithoutDefault',
-				),
-				'render_callback' => function( $attributes, $content, $block ) use ( &$provided_context ) {
-					$provided_context[] = $block->context;
-
-					return '';
-				},
-			)
-		);
-
-		$parsed_blocks = parse_blocks(
-			'<!-- wp:gutenberg/test-context-provider {"contextWithAssigned":10} -->' .
-			'<!-- wp:gutenberg/test-context-consumer /-->' .
-			'<!-- /wp:gutenberg/test-context-provider -->'
-		);
-
-		render_block( $parsed_blocks[0] );
-
-		$this->assertEquals(
-			array(
-				'gutenberg/contextWithDefault'  => 0,
-				'gutenberg/contextWithAssigned' => 10,
-			),
-			$provided_context[0]
-		);
-	}
-
-	/**
-	 * Tests that a block can receive default-provided context through
-	 * render_block.
-	 */
-	public function test_provides_default_context() {
-		global $post;
-
-		$provided_context = array();
-
-		$this->register_block_type(
-			'gutenberg/test-context-consumer',
-			array(
-				'uses_context'    => array( 'postId', 'postType' ),
-				'render_callback' => function( $attributes, $content, $block ) use ( &$provided_context ) {
-					$provided_context[] = $block->context;
-
-					return '';
-				},
-			)
-		);
-
-		$parsed_blocks = parse_blocks( '<!-- wp:gutenberg/test-context-consumer /-->' );
-
-		render_block( $parsed_blocks[0] );
-
-		$this->assertEquals(
-			array(
-				'postId'   => $post->ID,
-				'postType' => $post->post_type,
-			),
-			$provided_context[0]
-		);
-	}
-
-	/**
-	 * Tests that default block context can be filtered.
-	 */
-	public function test_default_context_is_filterable() {
-		$provided_context = array();
-
-		$this->register_block_type(
-			'gutenberg/test-context-consumer',
-			array(
-				'uses_context'    => array( 'example' ),
-				'render_callback' => function( $attributes, $content, $block ) use ( &$provided_context ) {
-					$provided_context[] = $block->context;
-
-					return '';
-				},
-			)
-		);
-
-		$filter_block_context = function( $context ) {
-			$context['example'] = 'ok';
-			return $context;
-		};
-
-		$parsed_blocks = parse_blocks( '<!-- wp:gutenberg/test-context-consumer /-->' );
-
-		add_filter( 'render_block_context', $filter_block_context );
-
-		render_block( $parsed_blocks[0] );
-
-		remove_filter( 'render_block_context', $filter_block_context );
-
-		$this->assertEquals( array( 'example' => 'ok' ), $provided_context[0] );
-	}
-}
diff --git a/phpunit/class-block-fixture-test.php b/phpunit/class-block-fixture-test.php
index a3e47cc7b28337..adf49445261d15 100644
--- a/phpunit/class-block-fixture-test.php
+++ b/phpunit/class-block-fixture-test.php
@@ -7,6 +7,12 @@
 
 class Block_Fixture_Test extends WP_UnitTestCase {
 
+	public function filter_allowed_html( $tags ) {
+		$tags['form']['class']   = true;
+		$tags['form']['enctype'] = true;
+		return $tags;
+	}
+
 	/**
 	 * Tests that running the serialised block content through KSES doesn't cause the
 	 * HTML to change.
@@ -20,7 +26,9 @@ public function test_kses_doesnt_change_fixtures( $block, $filename ) {
 		$block = preg_replace( "/href=['\"]data:[^'\"]+['\"]/", 'href="https://wordpress.org/foo.jpg"', $block );
 		$block = preg_replace( '/url\(data:[^)]+\)/', 'url(https://wordpress.org/foo.jpg)', $block );
 
+		add_filter( 'wp_kses_allowed_html', array( $this, 'filter_allowed_html' ) );
 		$kses_block = wp_kses_post( $block );
+		remove_filter( 'wp_kses_allowed_html', array( $this, 'filter_allowed_html' ) );
 
 		// KSES adds a space at the end of self-closing tags, add it to the original to match.
 		$block = preg_replace( '|([^ ])/>|', '$1 />', $block );
diff --git a/phpunit/class-block-library-navigation-link-test.php b/phpunit/class-block-library-navigation-link-test.php
deleted file mode 100644
index bb6cc33fb2e8ba..00000000000000
--- a/phpunit/class-block-library-navigation-link-test.php
+++ /dev/null
@@ -1,256 +0,0 @@
-<?php
-/**
- * Tests server side rendering of core/navigation-link
- *
- * @package    Gutenberg
- * @subpackage block-library
- */
-
-/**
- * Tests for various cases in Navigation Link rendering
- */
-class Block_Library_Navigation_Link_Test extends WP_UnitTestCase {
-	private static $category;
-	private static $page;
-	private static $draft;
-	private static $custom_draft;
-	private static $custom_post;
-
-	private static $pages;
-	private static $terms;
-	/**
-	 * @var array|null
-	 */
-	private $original_block_supports;
-
-	public static function wpSetUpBeforeClass() {
-
-		self::$draft   = self::factory()->post->create_and_get(
-			array(
-				'post_type'    => 'page',
-				'post_status'  => 'draft',
-				'post_name'    => 'ceilingcat',
-				'post_title'   => 'Ceiling Cat',
-				'post_content' => 'Ceiling Cat content',
-				'post_excerpt' => 'Ceiling Cat',
-			)
-		);
-		self::$pages[] = self::$draft;
-
-		self::$custom_draft = self::factory()->post->create_and_get(
-			array(
-				'post_type'    => 'cats',
-				'post_status'  => 'draft',
-				'post_name'    => 'metalcat',
-				'post_title'   => 'Metal Cat',
-				'post_content' => 'Metal Cat content',
-				'post_excerpt' => 'Metal Cat',
-			)
-		);
-		self::$pages[]      = self::$custom_draft;
-
-		self::$custom_post = self::factory()->post->create_and_get(
-			array(
-				'post_type'    => 'dogs',
-				'post_status'  => 'publish',
-				'post_name'    => 'metaldog',
-				'post_title'   => 'Metal Dog',
-				'post_content' => 'Metal Dog content',
-				'post_excerpt' => 'Metal Dog',
-			)
-		);
-		self::$pages[]     = self::$custom_post;
-
-		self::$page    = self::factory()->post->create_and_get(
-			array(
-				'post_type'    => 'page',
-				'post_status'  => 'publish',
-				'post_name'    => 'tabby',
-				'post_title'   => 'Tabby cats',
-				'post_content' => 'Tabby cat content',
-				'post_excerpt' => 'Tabby cat',
-			)
-		);
-		self::$pages[] = self::$page;
-
-		self::$category = self::factory()->category->create_and_get(
-			array(
-				'taxonomy'    => 'category',
-				'name'        => 'cats',
-				'slug'        => 'cats',
-				'description' => 'Cats Category',
-			)
-		);
-
-		self::$terms[] = self::$category;
-	}
-
-	public static function wpTearDownAfterClass() {
-		foreach ( self::$pages as $page_to_delete ) {
-			wp_delete_post( $page_to_delete );
-		}
-		foreach ( self::$terms as $term_to_delete ) {
-			wp_delete_term( $term_to_delete->term_id, $term_to_delete->taxonomy );
-		}
-	}
-
-	public function set_up() {
-		parent::set_up();
-
-		$this->original_block_supports      = WP_Block_Supports::$block_to_render;
-		WP_Block_Supports::$block_to_render = array(
-			'attrs'     => array(),
-			'blockName' => '',
-		);
-	}
-
-	public function tear_down() {
-		WP_Block_Supports::$block_to_render = $this->original_block_supports;
-		parent::tear_down();
-	}
-
-	public function test_returns_link_when_post_is_published() {
-		$page_id = self::$page->ID;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"label\":\"Sample Page\",\"type\":\"page\",\"id\":{$page_id},\"url\":\"http://localhost:8888/?page_id={$page_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-		$this->assertEquals(
-			true,
-			strpos(
-				render_block_core_navigation_link(
-					$navigation_link_block->attributes,
-					array(),
-					$navigation_link_block
-				),
-				'Sample Page'
-			) !== false
-		);
-	}
-
-	public function test_returns_empty_when_label_is_missing() {
-		$page_id = self::$page->ID;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"type\":\"page\",\"id\":{$page_id},\"url\":\"http://localhost:8888/?page_id={$page_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-		$this->assertEquals(
-			'',
-			render_block_core_navigation_link(
-				$navigation_link_block->attributes,
-				array(),
-				$navigation_link_block
-			)
-		);
-	}
-
-	public function test_returns_empty_when_draft() {
-		$page_id = self::$draft->ID;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"label\":\"Draft Page\",\"type\":\"page\",\"id\":{$page_id},\"url\":\"http://localhost:8888/?page_id={$page_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-
-		$this->assertEquals(
-			'',
-			render_block_core_navigation_link(
-				$navigation_link_block->attributes,
-				array(),
-				$navigation_link_block
-			)
-		);
-	}
-
-	public function test_returns_link_for_category() {
-		$category_id = self::$category->term_id;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"label\":\"Cats\",\"type\":\"category\",\"id\":{$category_id},\"url\":\"http://localhost:8888/?cat={$category_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-		$this->assertEquals(
-			true,
-			strpos(
-				render_block_core_navigation_link(
-					$navigation_link_block->attributes,
-					array(),
-					$navigation_link_block
-				),
-				'Cats'
-			) !== false
-		);
-	}
-
-	public function test_returns_link_for_plain_link() {
-		$parsed_blocks = parse_blocks(
-			'<!-- wp:navigation-link {"label":"My Website","url":"https://example.com"} /-->'
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-		$this->assertEquals(
-			true,
-			strpos(
-				render_block_core_navigation_link(
-					$navigation_link_block->attributes,
-					array(),
-					$navigation_link_block
-				),
-				'My Website'
-			) !== false
-		);
-	}
-
-	public function test_returns_empty_when_custom_post_type_draft() {
-		$page_id = self::$custom_draft->ID;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"label\":\"Draft Custom Post Type\",\"type\":\"cats\",\"kind\":\"post-type\",\"id\":{$page_id},\"url\":\"http://localhost:8888/?page_id={$page_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-
-		$this->assertEquals(
-			'',
-			render_block_core_navigation_link(
-				$navigation_link_block->attributes,
-				array(),
-				$navigation_link_block
-			)
-		);
-	}
-
-	public function test_returns_link_when_custom_post_is_published() {
-		$page_id = self::$custom_post->ID;
-
-		$parsed_blocks = parse_blocks(
-			"<!-- wp:navigation-link {\"label\":\"Metal Dogs\",\"type\":\"dogs\",\"kind\":\"post-type\",\"id\":{$page_id},\"url\":\"http://localhost:8888/?page_id={$page_id}\"} /-->"
-		);
-		$this->assertEquals( 1, count( $parsed_blocks ) );
-
-		$navigation_link_block = new WP_Block( $parsed_blocks[0], array() );
-		$this->assertEquals(
-			true,
-			strpos(
-				render_block_core_navigation_link(
-					$navigation_link_block->attributes,
-					array(),
-					$navigation_link_block
-				),
-				'Metal Dogs'
-			) !== false
-		);
-	}
-}
diff --git a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php b/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
deleted file mode 100644
index ad6f42b033e84b..00000000000000
--- a/phpunit/class-gutenberg-rest-block-patterns-controller-test.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?php
-/**
- * Unit tests covering Gutenberg_REST_Block_Patterns_Controller functionality.
- *
- * @package WordPress
- * @subpackage REST_API
- */
-
-/**
- * Unit tests for REST API for Block Patterns.
- *
- * @group restapi
- * @covers Gutenberg_REST_Block_Patterns_Controller
- */
-class Gutenberg_REST_Block_Patterns_Controller_Test extends WP_Test_REST_Controller_Testcase {
-	protected static $admin_id;
-	protected static $orig_registry;
-
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
-
-	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 );
-
-		// Register some patterns in the test registry.
-		$test_registry->register(
-			'test/one',
-			array(
-				'title'         => 'Pattern One',
-				'categories'    => array( 'test' ),
-				'viewportWidth' => 1440,
-				'content'       => '<!-- wp:heading {"level":1} --><h1>One</h1><!-- /wp:heading -->',
-			)
-		);
-
-		$test_registry->register(
-			'test/two',
-			array(
-				'title'      => 'Pattern Two',
-				'categories' => array( 'test' ),
-				'content'    => '<!-- wp:paragraph --><p>Two</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 );
-	}
-
-	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 test_get_items() {
-		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';
-		$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 ) );
-		}
-	}
-
-	/**
-	 * Abstract methods that we must implement.
-	 */
-	public function test_context_param() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_create_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_update_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_delete_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_prepare_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item_schema() {
-		$this->markTestIncomplete();
-	}
-}
diff --git a/phpunit/class-gutenberg-rest-global-styles-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-controller-test.php
deleted file mode 100644
index 01063aa7e51bc1..00000000000000
--- a/phpunit/class-gutenberg-rest-global-styles-controller-test.php
+++ /dev/null
@@ -1,174 +0,0 @@
-<?php
-
-class Gutenberg_REST_Global_Styles_Controller_Test extends WP_Test_REST_Controller_Testcase {
-	/**
-	 * @var int
-	 */
-	protected static $admin_id;
-
-	/**
-	 * @var int
-	 */
-	protected static $global_styles_id;
-
-	private function find_and_normalize_global_styles_by_id( $global_styles, $id ) {
-		foreach ( $global_styles as $style ) {
-			if ( $style['id'] === $id ) {
-				unset( $style['_links'] );
-				return $style;
-			}
-		}
-
-		return null;
-	}
-
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
-
-	/**
-	 * Create fake data before our tests run.
-	 *
-	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
-	 */
-	public static function wpSetupBeforeClass( $factory ) {
-		self::$admin_id = $factory->user->create(
-			array(
-				'role' => 'administrator',
-			)
-		);
-		// This creates the global styles for the current theme.
-		self::$global_styles_id = wp_insert_post(
-			array(
-				'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
-				'post_status'  => 'publish',
-				'post_title'   => __( 'Custom Styles', 'default' ),
-				'post_type'    => 'wp_global_styles',
-				'post_name'    => 'wp-global-styles-emptytheme',
-				'tax_input'    => array(
-					'wp_theme' => 'emptytheme',
-				),
-			),
-			true
-		);
-	}
-
-
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-		$this->assertArrayHasKey(
-			// '/wp/v2/global-styles/(?P<id>[\/\s%\w\.\(\)\[\]\@_\-]+)',
-			'/wp/v2/global-styles/(?P<id>[\/\w-]+)',
-			$routes,
-			'Single global style based on the given ID route does not exist'
-		);
-		$this->assertArrayHasKey(
-			'/wp/v2/global-styles/themes/(?P<stylesheet>[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?)',
-			$routes,
-			'Theme global styles route does not exist'
-		);
-		$this->assertArrayHasKey(
-			'/wp/v2/global-styles/themes/(?P<stylesheet>[\/\s%\w\.\(\)\[\]\@_\-]+)/variations',
-			$routes,
-			'Theme global styles variations route does not exist'
-		);
-	}
-
-	public function test_context_param() {
-		// TODO: Implement test_context_param() method.
-		$this->markTestIncomplete();
-	}
-
-	public function test_get_theme_items() {
-		wp_set_current_user( self::$admin_id );
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme/variations' );
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-		$expected = array(
-			array(
-				'version'  => 2,
-				'settings' => array(
-					'color' => array(
-						'palette' => array(
-							'theme' => array(
-								array(
-									'slug'  => 'foreground',
-									'color' => '#3F67C6',
-									'name'  => 'Foreground',
-								),
-							),
-						),
-					),
-				),
-				'styles'   => array(
-					'blocks' => array(
-						'core/post-title' => array(
-							'typography' => array(
-								'fontWeight' => '700',
-							),
-						),
-					),
-				),
-				'title'    => 'variation',
-			),
-		);
-		$this->assertSameSetsWithIndex( $data, $expected );
-	}
-
-	public function test_get_items() {
-		$this->markTestIncomplete();
-	}
-
-	public function test_get_item() {
-		wp_set_current_user( self::$admin_id );
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-		unset( $data['_links'] );
-
-		$this->assertEquals(
-			array(
-				'id'       => self::$global_styles_id,
-				'title'    => array(
-					'raw'      => 'Custom Styles',
-					'rendered' => 'Custom Styles',
-				),
-				'settings' => new stdClass(),
-				'styles'   => new stdClass(),
-			),
-			$data
-		);
-	}
-
-	public function test_create_item() {
-		$this->markTestIncomplete();
-	}
-
-	public function test_update_item() {
-		wp_set_current_user( self::$admin_id );
-		$request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
-		$request->set_body_params(
-			array(
-				'title' => 'My new global styles title',
-			)
-		);
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-		$this->assertEquals( 'My new global styles title', $data['title']['raw'] );
-	}
-
-	public function test_delete_item() {
-		$this->markTestIncomplete();
-	}
-
-	public function test_prepare_item() {
-		// TODO: Implement test_prepare_item() method.
-		$this->markTestIncomplete();
-	}
-
-	public function test_get_item_schema() {
-		// TODO: Implement test_get_item_schema() method.
-		$this->markTestIncomplete();
-	}
-}
diff --git a/phpunit/class-gutenberg-rest-server-test.php b/phpunit/class-gutenberg-rest-server-test.php
new file mode 100644
index 00000000000000..943d5b34b999ec
--- /dev/null
+++ b/phpunit/class-gutenberg-rest-server-test.php
@@ -0,0 +1,88 @@
+<?php
+
+class Gutenberg_REST_Server_Test extends WP_Test_REST_TestCase {
+
+	protected static $admin_id;
+	protected static $post_id;
+
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+
+		self::$post_id = $factory->post->create();
+	}
+
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$admin_id );
+		wp_delete_post( self::$post_id );
+	}
+
+	public function set_up() {
+		parent::set_up();
+		add_filter(
+			'wp_rest_server_class',
+			function () {
+				return 'Gutenberg_REST_Server';
+			}
+		);
+	}
+
+	public function test_populates_target_hints_for_administrator() {
+		wp_set_current_user( self::$admin_id );
+		$response = rest_do_request( '/wp/v2/posts' );
+		$post     = $response->get_data()[0];
+
+		$link = $post['_links']['self'][0];
+		$this->assertArrayHasKey( 'targetHints', $link );
+		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
+		$this->assertSame( array( 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ), $link['targetHints']['allow'] );
+	}
+
+	public function test_populates_target_hints_for_logged_out_user() {
+		$response = rest_do_request( '/wp/v2/posts' );
+		$post     = $response->get_data()[0];
+
+		$link = $post['_links']['self'][0];
+		$this->assertArrayHasKey( 'targetHints', $link );
+		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
+		$this->assertSame( array( 'GET' ), $link['targetHints']['allow'] );
+	}
+
+	public function test_does_not_error_on_invalid_urls() {
+		$response = new WP_REST_Response();
+		$response->add_link( 'self', 'this is not a real URL' );
+
+		$links = rest_get_server()::get_response_links( $response );
+		$this->assertArrayNotHasKey( 'targetHints', $links['self'][0] );
+	}
+
+	public function test_does_not_error_on_bad_rest_api_routes() {
+		$response = new WP_REST_Response();
+		$response->add_link( 'self', rest_url( '/this/is/not/a/real/route' ) );
+
+		$links = rest_get_server()::get_response_links( $response );
+		$this->assertArrayNotHasKey( 'targetHints', $links['self'][0] );
+	}
+
+	public function test_prefers_developer_defined_target_hints() {
+		$response = new WP_REST_Response();
+		$response->add_link(
+			'self',
+			'/wp/v2/posts/' . self::$post_id,
+			array(
+				'targetHints' => array(
+					'allow' => array( 'GET', 'PUT' ),
+				),
+			)
+		);
+
+		$links = rest_get_server()::get_response_links( $response );
+		$link  = $links['self'][0];
+		$this->assertArrayHasKey( 'targetHints', $link );
+		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
+		$this->assertSame( array( 'GET', 'PUT' ), $link['targetHints']['allow'] );
+	}
+}
diff --git a/phpunit/class-gutenberg-rest-templates-controller-test.php b/phpunit/class-gutenberg-rest-templates-controller-test.php
index 2c8521d63fd825..b69416c675305b 100644
--- a/phpunit/class-gutenberg-rest-templates-controller-test.php
+++ b/phpunit/class-gutenberg-rest-templates-controller-test.php
@@ -1,21 +1,14 @@
 <?php
+/**
+ * Unit tests covering Gutenberg_REST_Templates_Controller_6_7 functionality.
+ */
+class Gutenberg_REST_Templates_Controller_6_7_Test extends WP_Test_REST_Controller_Testcase {
 
-class Gutenberg_REST_Templates_Controller_Test extends WP_Test_REST_Controller_Testcase {
 	/**
 	 * @var int
 	 */
 	protected static $admin_id;
 
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
-
-	/**
-	 * Create fake data before our tests run.
-	 *
-	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
-	 */
 	public static function wpSetupBeforeClass( $factory ) {
 		self::$admin_id = $factory->user->create(
 			array(
@@ -24,67 +17,103 @@ public static function wpSetupBeforeClass( $factory ) {
 		);
 	}
 
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-		$this->assertArrayHasKey(
-			'/wp/v2/templates/lookup',
-			$routes,
-			'Get template fallback content route does not exist'
-		);
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$admin_id );
 	}
 
-	public function test_get_template_fallback() {
+	public function test_get_item() {
 		wp_set_current_user( self::$admin_id );
-		$request = new WP_REST_Request( 'GET', '/wp/v2/templates/lookup' );
-		// Should fallback to `category.html`.
-		$request->set_param( 'slug', 'category-fruits' );
-		$request->set_param( 'is_custom', false );
-		$request->set_param( 'template_prefix', 'category' );
-		$response = rest_get_server()->dispatch( $request );
-		$this->assertSame( 'category', $response->get_data()['slug'], 'Should fallback to `category.html`.' );
-		// Should fallback to `singular.html`.
-		$request->set_param( 'slug', 'page-hello' );
-		$request->set_param( 'is_custom', false );
-		$request->set_param( 'template_prefix', 'page' );
+
+		$template_name = 'test-plugin//test-template';
+		$args          = array(
+			'content'     => 'Template content',
+			'title'       => 'Test Template',
+			'description' => 'Description of test template',
+			'post_types'  => array( 'post', 'page' ),
+		);
+
+		register_block_template( $template_name, $args );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertSame( 'singular', $response->get_data()['slug'], 'Should fallback to `singular.html`.' );
-		// Should fallback to `index.html`.
-		$request->set_param( 'slug', 'tag-rigas' );
-		$request->set_param( 'is_custom', false );
-		$request->set_param( 'template_prefix', 'tag' );
+
+		$this->assertNotWPError( $response, "Fetching a registered template shouldn't cause an error." );
+
+		$data = $response->get_data();
+
+		$this->assertSame( 'default//test-template', $data['id'], 'Template ID mismatch.' );
+		$this->assertSame( 'default', $data['theme'], 'Template theme mismatch.' );
+		$this->assertSame( 'Template content', $data['content']['raw'], 'Template content mismatch.' );
+		$this->assertSame( 'test-template', $data['slug'], 'Template slug mismatch.' );
+		$this->assertSame( 'plugin', $data['source'], "Template source should be 'plugin'." );
+		$this->assertSame( 'plugin', $data['origin'], "Template origin should be 'plugin'." );
+		$this->assertSame( 'test-plugin', $data['author_text'], 'Template author text mismatch.' );
+		$this->assertSame( 'Description of test template', $data['description'], 'Template description mismatch.' );
+		$this->assertSame( 'Test Template', $data['title']['rendered'], 'Template title mismatch.' );
+		$this->assertSame( 'test-plugin', $data['plugin'], 'Plugin name mismatch.' );
+
+		unregister_block_template( $template_name );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertSame( 'index', $response->get_data()['slug'], 'Should fallback to `index.html`.' );
-	}
 
-	public function test_context_param() {
-		$this->markTestIncomplete();
+		$this->assertNotWPError( $response, "Fetching an unregistered template shouldn't cause an error." );
+		$this->assertSame( 404, $response->get_status(), 'Fetching an unregistered template should return 404.' );
 	}
 
-	public function test_get_items() {
-		$this->markTestIncomplete();
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_register_routes() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
-	public function test_get_item() {
-		$this->markTestIncomplete();
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_items() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
+	/**
+	 * @doesNotPerformAssertions
+	 */
 	public function test_create_item() {
-		$this->markTestIncomplete();
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
+	/**
+	 * @doesNotPerformAssertions
+	 */
 	public function test_update_item() {
-		$this->markTestIncomplete();
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
+	/**
+	 * @doesNotPerformAssertions
+	 */
 	public function test_delete_item() {
-		$this->markTestIncomplete();
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_context_param() {
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
+	/**
+	 * @doesNotPerformAssertions
+	 */
 	public function test_prepare_item() {
-		$this->markTestIncomplete();
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 
+	/**
+	 * @doesNotPerformAssertions
+	 */
 	public function test_get_item_schema() {
-		$this->markTestIncomplete();
+		// Already present in core test class: Tests_REST_WpRestTemplatesController.
 	}
 }
diff --git a/phpunit/class-override-script-test.php b/phpunit/class-override-script-test.php
index b3af1acd80f446..0bc3bc5853ae1e 100644
--- a/phpunit/class-override-script-test.php
+++ b/phpunit/class-override-script-test.php
@@ -40,7 +40,7 @@ public function test_localizes_script() {
 		);
 
 		$script = $wp_scripts->query( 'gutenberg-dummy-script', 'registered' );
-		$this->assertEquals( array( 'dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'dependency' ), $script->deps );
 	}
 
 	/**
@@ -60,7 +60,7 @@ public function test_replaces_registered_properties() {
 
 		$script = $wp_scripts->query( 'gutenberg-dummy-script', 'registered' );
 		$this->assertEquals( 'https://example.com/updated', $script->src );
-		$this->assertEquals( array( 'updated-dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'updated-dependency' ), $script->deps );
 		$this->assertEquals( 'updated-version', $script->ver );
 		$this->assertSame( 1, $script->args );
 	}
@@ -82,7 +82,7 @@ public function test_registers_new_script() {
 
 		$script = $wp_scripts->query( 'gutenberg-second-dummy-script', 'registered' );
 		$this->assertEquals( 'https://example.com/', $script->src );
-		$this->assertEquals( array( 'dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'dependency' ), $script->deps );
 		$this->assertEquals( 'version', $script->ver );
 		$this->assertSame( 1, $script->args );
 	}
diff --git a/phpunit/class-phpunit-environment-setup-test.php b/phpunit/class-phpunit-environment-setup-test.php
index 6dd03a5a1f5afb..a704144ea17f0f 100644
--- a/phpunit/class-phpunit-environment-setup-test.php
+++ b/phpunit/class-phpunit-environment-setup-test.php
@@ -17,5 +17,4 @@ public function test_is_multisite_if_defined() {
 
 		$this->assertEquals( $is_multisite_in_env, is_multisite(), 'Despite WP_MULTISITE being set in the environment, the tests were not run in multisite mode. There is likely an issue with the phpunit setup.' );
 	}
-
 }
diff --git a/phpunit/class-test-plugin-version-meta-test.php b/phpunit/class-test-plugin-version-meta-test.php
new file mode 100644
index 00000000000000..f0dadf873166fd
--- /dev/null
+++ b/phpunit/class-test-plugin-version-meta-test.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Unit tests covering the version checks in the plugin file.
+ *
+ * @package Gutenberg
+ */
+class Test_PluginMetaData_Test extends WP_UnitTestCase {
+	/**
+	 * Test the minimum WordPress version check.
+	 *
+	 * Ensures the constant defined as the minimum required version of WordPress
+	 * matches the minimum version defined in the plugin header.
+	 */
+	public function test_minimum_required_wordpress_version() {
+		$file_meta = get_file_data( __DIR__ . '/../gutenberg.php', array( 'RequiresWP' => 'Requires at least' ) );
+		/*
+		 * Gutenberg.php isn't loaded in the test environment.
+		 *
+		 * Read the file directly and use regex to extract the constant.
+		 */
+		preg_match( '/GUTENBERG_MINIMUM_WP_VERSION\', \'(.*?)\'/', file_get_contents( __DIR__ . '/../gutenberg.php' ), $matches );
+		$version_in_file = $matches[1];
+
+		$this->assertSame( $file_meta['RequiresWP'], $version_in_file, 'The minimum required WordPress version does not match the plugin header.' );
+	}
+}
diff --git a/phpunit/class-wp-block-templates-registry-test.php b/phpunit/class-wp-block-templates-registry-test.php
new file mode 100644
index 00000000000000..fb8436eb6153d4
--- /dev/null
+++ b/phpunit/class-wp-block-templates-registry-test.php
@@ -0,0 +1,192 @@
+<?php
+/**
+ * Test WP_Block_Templates_Registry class.
+ *
+ * @covers WP_Block_Templates_Registry
+ */
+class WP_Block_Templates_Registry_Test extends WP_UnitTestCase {
+
+	/**
+	 * @var WP_Block_Templates_Registry
+	 */
+	protected static $registry;
+
+	public static function set_up_before_class() {
+		parent::set_up_before_class();
+
+		self::$registry = WP_Block_Templates_Registry::get_instance();
+	}
+
+	public function test_register_template() {
+		// Register a valid template.
+		$template_name = 'test-plugin//test-template';
+		$template      = self::$registry->register( $template_name );
+
+		$this->assertSame( $template->slug, 'test-template' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_register_template_invalid_name() {
+		// Try to register a template with invalid name (non-string).
+		$template_name = array( 'invalid-template-name' );
+
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_name_no_string', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must be strings.', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_invalid_name_uppercase() {
+		// Try to register a template with uppercase characters in the name.
+		$template_name = 'test-plugin//Invalid-Template-Name';
+
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_name_no_uppercase', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must not contain uppercase characters.', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_no_prefix() {
+		// Try to register a template without a namespace.
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( 'template-no-plugin', array() );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_no_prefix', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertSame( 'Template names must contain a namespace prefix. Example: my-plugin//my-custom-template', $result->get_error_message(), 'Error message mismatch.' );
+	}
+
+	public function test_register_template_already_exists() {
+		// Register the template for the first time.
+		$template_name = 'test-plugin//duplicate-template';
+		self::$registry->register( $template_name );
+
+		// Try to register the same template again.
+		$this->setExpectedIncorrectUsage( 'WP_Block_Templates_Registry::register' );
+		$result = self::$registry->register( $template_name );
+
+		$this->assertWPError( $result );
+		$this->assertSame( 'template_already_registered', $result->get_error_code(), 'Error code mismatch.' );
+		$this->assertStringContainsString( 'Template "test-plugin//duplicate-template" is already registered.', $result->get_error_message(), 'Error message mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_all_registered() {
+		$template_name_1 = 'test-plugin//template-1';
+		$template_name_2 = 'test-plugin//template-2';
+		self::$registry->register( $template_name_1 );
+		self::$registry->register( $template_name_2 );
+
+		$all_templates = self::$registry->get_all_registered();
+
+		$this->assertIsArray( $all_templates, 'Registered templates should be an array.' );
+		$this->assertCount( 2, $all_templates, 'Registered templates should contain 2 items.' );
+		$this->assertArrayHasKey( 'test-plugin//template-1', $all_templates, 'Registered templates should contain "test-plugin//template-1".' );
+		$this->assertArrayHasKey( 'test-plugin//template-2', $all_templates, 'Registered templates should contain "test-plugin//template-2".' );
+
+		self::$registry->unregister( $template_name_1 );
+		self::$registry->unregister( $template_name_2 );
+	}
+
+	public function test_get_registered() {
+		$template_name = 'test-plugin//registered-template';
+		$args          = array(
+			'content'     => 'Template content',
+			'title'       => 'Registered Template',
+			'description' => 'Description of registered template',
+			'post_types'  => array( 'post', 'page' ),
+		);
+		self::$registry->register( $template_name, $args );
+
+		$registered_template = self::$registry->get_registered( $template_name );
+
+		$this->assertSame( 'default', $registered_template->theme, 'Template theme mismatch.' );
+		$this->assertSame( 'registered-template', $registered_template->slug, 'Template slug mismatch.' );
+		$this->assertSame( 'default//registered-template', $registered_template->id, 'Template ID mismatch.' );
+		$this->assertSame( 'Registered Template', $registered_template->title, 'Template title mismatch.' );
+		$this->assertSame( 'Template content', $registered_template->content, 'Template content mismatch.' );
+		$this->assertSame( 'Description of registered template', $registered_template->description, 'Template description mismatch.' );
+		$this->assertSame( 'plugin', $registered_template->source, "Template source should be 'plugin'." );
+		$this->assertSame( 'plugin', $registered_template->origin, "Template origin should be 'plugin'." );
+		$this->assertEquals( array( 'post', 'page' ), $registered_template->post_types, 'Template post types mismatch.' );
+		$this->assertSame( 'test-plugin', $registered_template->plugin, 'Plugin name mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_by_slug() {
+		$slug          = 'slug-template';
+		$template_name = 'test-plugin//' . $slug;
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Slug Template',
+		);
+		self::$registry->register( $template_name, $args );
+
+		$registered_template = self::$registry->get_by_slug( $slug );
+
+		$this->assertNotNull( $registered_template, 'Registered template should not be null.' );
+		$this->assertSame( $slug, $registered_template->slug, 'Template slug mismatch.' );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_get_by_query() {
+		$template_name_1 = 'test-plugin//query-template-1';
+		$template_name_2 = 'test-plugin//query-template-2';
+		$args_1          = array(
+			'content' => 'Template content 1',
+			'title'   => 'Query Template 1',
+		);
+		$args_2          = array(
+			'content' => 'Template content 2',
+			'title'   => 'Query Template 2',
+		);
+		self::$registry->register( $template_name_1, $args_1 );
+		self::$registry->register( $template_name_2, $args_2 );
+
+		$query   = array(
+			'slug__in' => array( 'query-template-1' ),
+		);
+		$results = self::$registry->get_by_query( $query );
+
+		$this->assertCount( 1, $results, 'Query result should contain 1 item.' );
+		$this->assertArrayHasKey( $template_name_1, $results, 'Query result should contain "test-plugin//query-template-1".' );
+
+		self::$registry->unregister( $template_name_1 );
+		self::$registry->unregister( $template_name_2 );
+	}
+
+	public function test_is_registered() {
+		$template_name = 'test-plugin//is-registered-template';
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Is Registered Template',
+		);
+		self::$registry->register( $template_name, $args );
+
+		$this->assertTrue( self::$registry->is_registered( $template_name ) );
+
+		self::$registry->unregister( $template_name );
+	}
+
+	public function test_unregister() {
+		$template_name = 'test-plugin//unregister-template';
+		$args          = array(
+			'content' => 'Template content',
+			'title'   => 'Unregister Template',
+		);
+		$template      = self::$registry->register( $template_name, $args );
+
+		$unregistered_template = self::$registry->unregister( $template_name );
+
+		$this->assertEquals( $template, $unregistered_template, 'Unregistered template should be the same as the registered one.' );
+		$this->assertFalse( self::$registry->is_registered( $template_name ), 'Template should not be registered after unregistering.' );
+	}
+}
diff --git a/phpunit/class-wp-duotone-test.php b/phpunit/class-wp-duotone-test.php
new file mode 100644
index 00000000000000..57c5540b8a9f1c
--- /dev/null
+++ b/phpunit/class-wp-duotone-test.php
@@ -0,0 +1,130 @@
+<?php
+
+/**
+ * Test the block WP_Duotone_Gutenberg class.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Duotone_Gutenberg_Test extends WP_UnitTestCase {
+	/**
+	 * Cleans up CSS added to block-supports from duotone styles. We need to do this
+	 * in order to avoid impacting other tests.
+	 */
+	public static function wpTearDownAfterClass() {
+		WP_Style_Engine_CSS_Rules_Store_Gutenberg::remove_all_stores();
+	}
+
+	public function test_gutenberg_render_duotone_support_preset() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '<figure class="wp-block-image size-full wp-duotone-blue-orange"><img src="/my-image.jpg" /></figure>';
+		$this->assertSame( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+	public function test_gutenberg_render_duotone_support_css() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'unset' ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-unset-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+	public function test_gutenberg_render_duotone_support_custom() {
+		$block         = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => array( '#FFFFFF', '#000000' ) ) ) ),
+		);
+		$block_content = '<figure class="wp-block-image size-full"><img src="/my-image.jpg" /></figure>';
+		$expected      = '/<figure class="wp-block-image size-full wp-duotone-ffffff-000000-\d+"><img src="\\/my-image.jpg" \\/><\\/figure>/';
+		$this->assertMatchesRegularExpression( $expected, WP_Duotone_Gutenberg::render_duotone_support( $block_content, $block ) );
+	}
+
+
+	/**
+	 * Tests whether the CSS declarations are generated even if the block content is
+	 * empty. This is needed to make the CSS output stable across paginations for
+	 * features like the enhanced pagination of the Query block.
+	 *
+	 * @covers ::render_duotone_support
+	 */
+	public function test_gutenberg_css_declarations_are_generated_even_with_empty_block_content() {
+		$block    = array(
+			'blockName' => 'core/image',
+			'attrs'     => array( 'style' => array( 'color' => array( 'duotone' => 'var:preset|duotone|blue-orange' ) ) ),
+		);
+		$wp_block = new WP_Block( $block );
+
+		/*
+		 * Handling to access the static WP_Duotone::$block_css_declarations property.
+		 *
+		 * Why is an instance needed?
+		 * WP_Duotone is a static class by design, meaning it only contains static properties and methods.
+		 * In production, it should not be instantiated. However, as of PHP 8.3, ReflectionProperty::setValue()
+		 * needs an object.
+		 */
+		$wp_duotone                      = new WP_Duotone_Gutenberg();
+		$block_css_declarations_property = new ReflectionProperty( 'WP_Duotone_Gutenberg', 'block_css_declarations' );
+		$block_css_declarations_property->setAccessible( true );
+		$previous_value = $block_css_declarations_property->getValue();
+		$block_css_declarations_property->setValue( $wp_duotone, array() );
+		WP_Duotone_Gutenberg::render_duotone_support( '', $block, $wp_block );
+		$actual = $block_css_declarations_property->getValue();
+
+		// Reset the property.
+		$block_css_declarations_property->setValue( $wp_duotone, $previous_value );
+		$block_css_declarations_property->setAccessible( false );
+
+		$this->assertNotEmpty( $actual );
+	}
+
+	public function data_get_slug_from_attribute() {
+		return array(
+			'pipe-slug'                       => array( 'var:preset|duotone|blue-orange', 'blue-orange' ),
+			'css-var'                         => array( 'var(--wp--preset--duotone--blue-orange)', 'blue-orange' ),
+			'css-var-invalid-slug-chars'      => array( 'var(--wp--preset--duotone--.)', '.' ),
+			'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', '' ),
+			'invalid'                         => array( 'not a valid attribute', '' ),
+			'css-var-no-value'                => array( 'var(--wp--preset--duotone--)', '' ),
+			'pipe-slug-no-value'              => array( 'var:preset|duotone|', '' ),
+			'css-var-spaces'                  => array( 'var(--wp--preset--duotone--    ', '' ),
+			'pipe-slug-spaces'                => array( 'var:preset|duotone|  ', '' ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_get_slug_from_attribute
+	 */
+	public function test_get_slug_from_attribute( $data_attr, $expected ) {
+
+		$reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'get_slug_from_attribute' );
+		$reflection->setAccessible( true );
+
+		$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+	}
+
+	public function data_is_preset() {
+		return array(
+			'pipe-slug'                       => array( 'var:preset|duotone|blue-orange', true ),
+			'css-var'                         => array( 'var(--wp--preset--duotone--blue-orange)', true ),
+			'css-var-invalid-slug-chars'      => array( 'var(--wp--preset--duotone--.)', false ),
+			'css-var-missing-end-parenthesis' => array( 'var(--wp--preset--duotone--blue-orange', false ),
+			'invalid'                         => array( 'not a valid attribute', false ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_is_preset
+	 */
+	public function test_is_preset( $data_attr, $expected ) {
+		$reflection = new ReflectionMethod( 'WP_Duotone_Gutenberg', 'is_preset' );
+		$reflection->setAccessible( true );
+
+		$this->assertSame( $expected, $reflection->invoke( null, $data_attr ) );
+	}
+}
diff --git a/phpunit/class-wp-rest-block-pattern-categories-controller-test.php b/phpunit/class-wp-rest-block-pattern-categories-controller-test.php
deleted file mode 100644
index beadbfc75d073a..00000000000000
--- a/phpunit/class-wp-rest-block-pattern-categories-controller-test.php
+++ /dev/null
@@ -1,100 +0,0 @@
-<?php
-/**
- * Unit tests covering WP_REST_Block_Pattern_Categories_Controller functionality.
- *
- * @package WordPress
- * @subpackage REST_API
- */
-
-/**
- * Unit tests for REST API for Block Pattern Categories.
- *
- * @group restapi
- * @covers WP_REST_Block_Pattern_Categories_Controller
- */
-class WP_REST_Block_Pattern_Categories_Controller_Test extends WP_Test_REST_Controller_Testcase {
-	protected static $admin_id;
-	protected static $orig_registry;
-
-	public function set_up() {
-		parent::set_up();
-		switch_theme( 'emptytheme' );
-	}
-
-	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_Pattern_Categories_Registry` and save the original.
-		$reflection = new ReflectionClass( 'WP_Block_Pattern_Categories_Registry' );
-		$reflection->getProperty( 'instance' )->setAccessible( true );
-		self::$orig_registry = $reflection->getStaticPropertyValue( 'instance' );
-		$test_registry       = new WP_Block_Pattern_Categories_Registry();
-		$reflection->setStaticPropertyValue( 'instance', $test_registry );
-
-		// Register some categories in the test registry.
-		$test_registry->register( 'test', array( 'label' => 'Test' ) );
-		$test_registry->register( 'query', array( 'label' => 'Query' ) );
-	}
-
-	public static function wpTearDownAfterClass() {
-		// Delete the test user.
-		self::delete_user( self::$admin_id );
-
-		// Restore the original registry instance.
-		$reflection = new ReflectionClass( 'WP_Block_Pattern_Categories_Registry' );
-		$reflection->setStaticPropertyValue( 'instance', self::$orig_registry );
-	}
-
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-		$this->assertArrayHasKey(
-			'/wp/v2/block-patterns/categories',
-			$routes,
-			'The categories route does not exist'
-		);
-	}
-
-	public function test_get_items() {
-		wp_set_current_user( self::$admin_id );
-
-		$expected_names  = array( 'test', 'query' );
-		$expected_fields = array( 'name', 'label' );
-
-		$request            = new WP_REST_Request( 'GET', '/wp/v2/block-patterns/categories' );
-		$request['_fields'] = 'name,label';
-		$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 ) );
-		}
-	}
-
-	/**
-	 * Abstract methods that we must implement.
-	 */
-	public function test_context_param() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_create_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_update_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_delete_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_prepare_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item_schema() {
-		$this->markTestIncomplete();
-	}
-}
diff --git a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
new file mode 100644
index 00000000000000..c9453f4bd8e5c3
--- /dev/null
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -0,0 +1,692 @@
+<?php
+/**
+ * Unit tests covering WP_REST_Global_Styles_Controller_Gutenberg functionality.
+ *
+ * @package Gutenberg
+ *
+ * @covers WP_REST_Global_Styles_Controller_Gutenberg
+ */
+class WP_REST_Global_Styles_Controller_Gutenberg_Test extends WP_Test_REST_Controller_Testcase {
+	/**
+	 * @var int
+	 */
+	protected static $admin_id;
+
+	/**
+	 * @var int
+	 */
+	protected static $editor_id;
+
+	/**
+	 * @var int
+	 */
+	protected static $subscriber_id;
+
+	/**
+	 * @var int
+	 */
+	protected static $theme_manager_id;
+
+	/**
+	 * @var int
+	 */
+	protected static $global_styles_id;
+
+	/**
+	 * @var int
+	 */
+	protected static $post_id;
+
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'emptytheme' );
+	}
+
+	/**
+	 * Create fake data before our tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+
+		self::$editor_id = $factory->user->create(
+			array(
+				'role' => 'editor',
+			)
+		);
+
+		self::$subscriber_id = $factory->user->create(
+			array(
+				'role' => 'subscriber',
+			)
+		);
+
+		self::$theme_manager_id = $factory->user->create(
+			array(
+				'role' => 'subscriber',
+			)
+		);
+
+		// Add the 'edit_theme_options' capability to the theme manager (subscriber).
+		$theme_manager_id = get_user_by( 'id', self::$theme_manager_id );
+		if ( $theme_manager_id instanceof WP_User ) {
+			$theme_manager_id->add_cap( 'edit_theme_options' );
+		}
+
+		// This creates the global styles for the current theme.
+		self::$global_styles_id = $factory->post->create(
+			array(
+				'post_content' => '{"version": ' . WP_Theme_JSON_Gutenberg::LATEST_SCHEMA . ', "isGlobalStylesUserThemeJSON": true }',
+				'post_status'  => 'publish',
+				'post_title'   => 'Custom Styles',
+				'post_type'    => 'wp_global_styles',
+				'post_name'    => 'wp-global-styles-emptytheme',
+				'tax_input'    => array(
+					'wp_theme' => 'emptytheme',
+				),
+			)
+		);
+
+		self::$post_id = $factory->post->create();
+	}
+
+	/**
+	 *
+	 */
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$admin_id );
+		self::delete_user( self::$editor_id );
+		self::delete_user( self::$subscriber_id );
+		self::delete_user( self::$theme_manager_id );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::register_routes
+	 */
+	public function test_register_routes() {
+		// Register routes so that they overwrite identical Core routes.
+		$global_styles_controller = new WP_REST_Global_Styles_Controller_Gutenberg();
+		$global_styles_controller->register_routes();
+
+		$routes = rest_get_server()->get_routes();
+		$this->assertArrayHasKey(
+			'/wp/v2/global-styles/(?P<id>[\/\w-]+)',
+			$routes,
+			'Single global style based on the given ID route does not exist'
+		);
+		$this->assertCount(
+			2,
+			$routes['/wp/v2/global-styles/(?P<id>[\/\w-]+)'],
+			'Single global style based on the given ID route does not have exactly two elements'
+		);
+		$this->assertArrayHasKey(
+			'/wp/v2/global-styles/themes/(?P<stylesheet>[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?)',
+			$routes,
+			'Theme global styles route does not exist'
+		);
+		$this->assertCount(
+			1,
+			$routes['/wp/v2/global-styles/themes/(?P<stylesheet>[^\/:<>\*\?"\|]+(?:\/[^\/:<>\*\?"\|]+)?)'],
+			'Theme global styles route does not have exactly one element'
+		);
+		$this->assertArrayHasKey(
+			'/wp/v2/global-styles/themes/(?P<stylesheet>[\/\s%\w\.\(\)\[\]\@_\-]+)/variations',
+			$routes,
+			'Theme global styles variations route does not exist'
+		);
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_context_param() {
+		// Controller does not use get_context_param().
+	}
+
+	public function test_get_theme_items() {
+		wp_set_current_user( self::$admin_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme/variations' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$expected = array(
+			array(
+				'_links'   => array(
+					'curies'        => array(
+						array(
+							'name'      => 'wp',
+							'href'      => 'https://api.w.org/{rel}',
+							'templated' => true,
+						),
+					),
+					'wp:theme-file' => array(
+						array(
+							'href'   => 'http://localhost:8889/wp-content/themes/emptytheme/img/1024x768_emptytheme_test_image.jpg',
+							'name'   => 'file:./img/1024x768_emptytheme_test_image.jpg',
+							'target' => 'styles.background.backgroundImage.url',
+							'type'   => 'image/jpeg',
+						),
+					),
+				),
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color' => array(
+						'palette' => array(
+							'theme' => array(
+								array(
+									'slug'  => 'foreground',
+									'color' => '#3F67C6',
+									'name'  => 'Foreground',
+								),
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./img/1024x768_emptytheme_test_image.jpg',
+						),
+					),
+					'blocks'     => array(
+						'core/post-title' => array(
+							'typography' => array(
+								'fontWeight' => '700',
+							),
+						),
+					),
+				),
+				'title'    => 'variation',
+			),
+		);
+
+		wp_recursive_ksort( $data );
+		wp_recursive_ksort( $expected );
+
+		$this->assertSameSets( $expected, $data, 'Theme item should match expected schema' );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_items() {
+		// Controller does not implement get_items().
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_no_user() {
+		wp_set_current_user( 0 );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 401 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_subscriber_permission_check() {
+		wp_set_current_user( self::$subscriber_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_editor_permission_check() {
+		wp_set_current_user( self::$editor_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_theme_options_manager_permission_check() {
+		wp_set_current_user( self::$theme_manager_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_invalid() {
+		wp_set_current_user( self::$admin_id );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/invalid' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_theme_not_found', $response, 404 );
+	}
+
+	/**
+	 * @dataProvider data_get_theme_item_invalid_theme_dirname
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 *
+	 * @param string $theme_dirname Theme directory to test.
+	 * @param string $expected      Expected error code.
+	 */
+	public function test_get_theme_item_invalid_theme_dirname( $theme_dirname, $expected ) {
+		wp_set_current_user( self::$admin_id );
+		switch_theme( $theme_dirname );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/' . $theme_dirname );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( $expected, $response, 404 );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_theme_item_invalid_theme_dirname() {
+		return array(
+			'+'                      => array(
+				'theme_dirname' => 'my+theme+',
+				'expected'      => 'rest_theme_not_found',
+			),
+			':'                      => array(
+				'theme_dirname' => 'my:theme:',
+				'expected'      => 'rest_no_route',
+			),
+			'<>'                     => array(
+				'theme_dirname' => 'my<theme>',
+				'expected'      => 'rest_no_route',
+			),
+			'*'                      => array(
+				'theme_dirname' => 'my*theme*',
+				'expected'      => 'rest_no_route',
+			),
+			'?'                      => array(
+				'theme_dirname' => 'my?theme?',
+				'expected'      => 'rest_no_route',
+			),
+			'"'                      => array(
+				'theme_dirname' => 'my"theme?"',
+				'expected'      => 'rest_no_route',
+			),
+			'| (invalid on Windows)' => array(
+				'theme_dirname' => 'my|theme|',
+				'expected'      => 'rest_no_route',
+			),
+			// Themes deep in subdirectories.
+			'2 subdirectories deep'  => array(
+				'theme_dirname' => 'subdir/subsubdir/mytheme',
+				'expected'      => 'rest_global_styles_not_found',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_get_theme_item
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 *
+	 * @param string $theme Theme directory to test.
+	 */
+	public function test_get_theme_item( $theme ) {
+		wp_set_current_user( self::$admin_id );
+		switch_theme( $theme );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/' . $theme );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$links    = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
+		$this->assertStringContainsString( '/wp/v2/global-styles/themes/' . $theme, $links['self'][0]['href'] );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_theme_item() {
+		return array(
+			'alphabetic'                     => array( 'mytheme' ),
+			'alphanumeric'                   => array( 'mythemev1' ),
+			'àáâãäåæç'                       => array( 'àáâãäåæç' ),
+			'space'                          => array( 'my theme' ),
+			'-_.'                            => array( 'my_theme-0.1' ),
+			'[]'                             => array( 'my[theme]' ),
+			'()'                             => array( 'my(theme)' ),
+			'{}'                             => array( 'my{theme}' ),
+			'&=#@!$,^~%'                     => array( 'theme &=#@!$,^~%' ),
+			'all combined'                   => array( 'thémé {}&=@!$,^~%[0.1](-_-)' ),
+
+			// Themes in a subdirectory.
+			'subdir: alphabetic'             => array( 'subdir/mytheme' ),
+			'subdir: alphanumeric in theme'  => array( 'subdir/mythemev1' ),
+			'subdir: alphanumeric in subdir' => array( 'subdirv1/mytheme' ),
+			'subdir: alphanumeric in both'   => array( 'subdirv1/mythemev1' ),
+			'subdir: àáâãäåæç in theme'      => array( 'subdir/àáâãäåæç' ),
+			'subdir: àáâãäåæç in subdir'     => array( 'àáâãäåæç/mythemev1' ),
+			'subdir: àáâãäåæç in both'       => array( 'àáâãäåæç/àáâãäåæç' ),
+			'subdir: space in theme'         => array( 'subdir/my theme' ),
+			'subdir: space in subdir'        => array( 'sub dir/mytheme' ),
+			'subdir: space in both'          => array( 'sub dir/my theme' ),
+			'subdir: -_. in theme'           => array( 'subdir/my_theme-0.1' ),
+			'subdir: -_. in subdir'          => array( 'sub_dir-0.1/mytheme' ),
+			'subdir: -_. in both'            => array( 'sub_dir-0.1/my_theme-0.1' ),
+			'subdir: all combined in theme'  => array( 'subdir/thémé {}&=@!$,^~%[0.1](-_-)' ),
+			'subdir: all combined in subdir' => array( 'sűbdīr {}&=@!$,^~%[0.1](-_-)/mytheme' ),
+			'subdir: all combined in both'   => array( 'sűbdīr {}&=@!$,^~%[0.1](-_-)/thémé {}&=@!$,^~%[0.1](-_-)' ),
+		);
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_fields() {
+		wp_set_current_user( self::$admin_id );
+		$request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$request->set_param( '_fields', 'settings' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$this->assertArrayHasKey( 'settings', $data );
+		$this->assertArrayNotHasKey( 'styles', $data );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item_no_user() {
+		wp_set_current_user( 0 );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_view', $response, 401 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item_invalid_post() {
+		wp_set_current_user( self::$admin_id );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$post_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_global_styles_not_found', $response, 404 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item_permission_check() {
+		wp_set_current_user( self::$subscriber_id );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_view', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item_no_user_edit() {
+		wp_set_current_user( 0 );
+		$request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_param( 'context', 'edit' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_forbidden_context', $response, 401 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item_permission_check_edit() {
+		wp_set_current_user( self::$subscriber_id );
+		$request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_param( 'context', 'edit' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_forbidden_context', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item
+	 */
+	public function test_get_item() {
+		wp_set_current_user( self::$admin_id );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$links    = $response->get_links();
+
+		$this->assertEqualSets(
+			array(
+				'id'       => self::$global_styles_id,
+				'title'    => array(
+					'raw'      => 'Custom Styles',
+					'rendered' => 'Custom Styles',
+				),
+				'settings' => new stdClass(),
+				'styles'   => new stdClass(),
+			),
+			$data
+		);
+
+		$this->assertArrayHasKey( 'self', $links );
+		$this->assertStringContainsString( '/wp/v2/global-styles/' . self::$global_styles_id, $links['self'][0]['href'] );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_create_item() {
+		// Controller does not implement create_item().
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item() {
+		wp_set_current_user( self::$admin_id );
+		$request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_body_params(
+			array(
+				'title' => 'My new global styles title',
+			)
+		);
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$this->assertSame( 'My new global styles title', $data['title']['raw'] );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_no_user() {
+		wp_set_current_user( 0 );
+		$request  = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_edit', $response, 401 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_invalid_post() {
+		wp_set_current_user( self::$admin_id );
+		$request  = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$post_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_global_styles_not_found', $response, 404 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_permission_check() {
+		wp_set_current_user( self::$subscriber_id );
+		$request  = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_edit', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_valid_styles_css() {
+		wp_set_current_user( self::$admin_id );
+		if ( is_multisite() ) {
+			grant_super_admin( self::$admin_id );
+		}
+		$request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_body_params(
+			array(
+				'styles' => array( 'css' => 'body { color: red; }' ),
+			)
+		);
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$this->assertSame( 'body { color: red; }', $data['styles']['css'] );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_invalid_styles_css() {
+		wp_set_current_user( self::$admin_id );
+		if ( is_multisite() ) {
+			grant_super_admin( self::$admin_id );
+		}
+		$request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_body_params(
+			array(
+				'styles' => array( 'css' => '<p>test</p> body { color: red; }' ),
+			)
+		);
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_custom_css_illegal_markup', $response, 400 );
+	}
+
+	/**
+	 * Tests the submission of a custom block style variation that was defined
+	 * within a theme style variation and wouldn't be registered at the time
+	 * of saving via the API.
+	 *
+	 * @since 6.6.0
+	 *
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
+	 */
+	public function test_update_item_with_custom_block_style_variations() {
+		wp_set_current_user( self::$admin_id );
+		if ( is_multisite() ) {
+			grant_super_admin( self::$admin_id );
+		}
+
+		/*
+		 * For variations to be resolved they have to have been registered
+		 * via either a theme.json partial or through the WP_Block_Styles_Registry.
+		 */
+		register_block_style(
+			'core/group',
+			array(
+				'name'  => 'fromThemeStyleVariation',
+				'label' => 'From Theme Style Variation',
+			)
+		);
+
+		$group_variations = array(
+			'fromThemeStyleVariation' => array(
+				'color' => array(
+					'background' => '#ffffff',
+					'text'       => '#000000',
+				),
+			),
+		);
+
+		$request = new WP_REST_Request( 'PUT', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_body_params(
+			array(
+				'styles' => array(
+					'variations' => array(
+						'fromThemeStyleVariation' => array(
+							'blockTypes' => array( 'core/group', 'core/columns' ),
+							'color'      => array(
+								'background' => '#000000',
+								'text'       => '#ffffff',
+							),
+						),
+					),
+					'blocks'     => array(
+						'core/group' => array(
+							'variations' => $group_variations,
+						),
+					),
+				),
+			)
+		);
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+		$this->assertSame( $group_variations, $data['styles']['blocks']['core/group']['variations'] );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_delete_item() {
+		// Controller does not implement delete_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_prepare_item() {
+		// Controller does not implement prepare_item().
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_item_schema
+	 */
+	public function test_get_item_schema() {
+		$request    = new WP_REST_Request( 'OPTIONS', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$response   = rest_get_server()->dispatch( $request );
+		$data       = $response->get_data();
+		$properties = $data['schema']['properties'];
+		$this->assertCount( 4, $properties, 'Schema properties array does not have exactly 4 elements' );
+		$this->assertArrayHasKey( 'id', $properties, 'Schema properties array does not have "id" key' );
+		$this->assertArrayHasKey( 'styles', $properties, 'Schema properties array does not have "styles" key' );
+		$this->assertArrayHasKey( 'settings', $properties, 'Schema properties array does not have "settings" key' );
+		$this->assertArrayHasKey( 'title', $properties, 'Schema properties array does not have "title" key' );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_available_actions
+	 */
+	public function test_assign_edit_css_action_admin() {
+		wp_set_current_user( self::$admin_id );
+
+		$request = new WP_REST_Request( 'GET', '/wp/v2/global-styles/' . self::$global_styles_id );
+		$request->set_param( 'context', 'edit' );
+		$response = rest_do_request( $request );
+		$links    = $response->get_links();
+
+		// Admins can only edit css on single site.
+		if ( is_multisite() ) {
+			$this->assertArrayNotHasKey( 'https://api.w.org/action-edit-css', $links );
+		} else {
+			$this->assertArrayHasKey( 'https://api.w.org/action-edit-css', $links );
+		}
+	}
+}
diff --git a/phpunit/class-wp-rest-pattern-directory-controller-test.php b/phpunit/class-wp-rest-pattern-directory-controller-test.php
deleted file mode 100644
index c05e6b4be114ff..00000000000000
--- a/phpunit/class-wp-rest-pattern-directory-controller-test.php
+++ /dev/null
@@ -1,270 +0,0 @@
-<?php
-/**
- * Unit tests covering WP_REST_Pattern_Directory_Controller functionality.
- *
- * @package WordPress
- * @subpackage REST API
- */
-
-/**
- * @group restapi
- * @group pattern-directory
- */
-class WP_REST_Pattern_Directory_Controller_Test extends WP_Test_REST_Controller_Testcase {
-
-	/**
-	 * Contributor user id.
-	 *
-	 * @since 5.8.0
-	 *
-	 * @var int
-	 */
-	protected static $contributor_id;
-
-	/**
-	 * An instance of WP_REST_Pattern_Directory_Controller class.
-	 *
-	 * @since 6.0.0
-	 *
-	 * @var WP_REST_Pattern_Directory_Controller
-	 */
-	private static $controller;
-
-	/**
-	 * List of URLs captured.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var string[]
-	 */
-	protected static $http_request_urls;
-
-	/**
-	 * Set up class test fixtures.
-	 *
-	 * @param WP_UnitTest_Factory $factory WordPress unit test factory.
-	 */
-	public static function wpSetUpBeforeClass( $factory ) {
-		self::$contributor_id = $factory->user->create(
-			array(
-				'role' => 'contributor',
-			)
-		);
-
-		self::$http_request_urls = array();
-
-		static::$controller = new Gutenberg_REST_Pattern_Directory_Controller_6_2();
-	}
-
-	public static function wpTearDownAfterClass() {
-		self::delete_user( self::$contributor_id );
-	}
-
-	/**
-	 * Clear the captured request URLs after each test.
-	 */
-	public function tear_down() {
-		self::$http_request_urls = array();
-		parent::tear_down();
-	}
-
-	/**
-	 * @covers WP_REST_Pattern_Directory_Controller::register_routes
-	 *
-	 * @since 5.8.0
-	 * @since 6.2.0 Added pattern directory categories endpoint.
-	 */
-	public function test_register_routes() {
-		$routes = rest_get_server()->get_routes();
-
-		$this->assertArrayHasKey( '/wp/v2/pattern-directory/patterns', $routes );
-		$this->assertArrayHasKey( '/wp/v2/pattern-directory/categories', $routes );
-	}
-
-	/**
-	 * @covers WP_REST_Pattern_Directory_Controller::prepare_pattern_category_for_response
-	 *
-	 * @since 6.2.0
-	 */
-	public function test_prepare_pattern_category_for_response() {
-		$raw_categories = array(
-			(object) array(
-				'id'          => 3,
-				'name'        => 'Columns',
-				'slug'        => 'columns',
-				'description' => 'A description',
-			),
-		);
-
-		$prepared_category = static::$controller->prepare_response_for_collection(
-			static::$controller->prepare_pattern_category_for_response( $raw_categories[0], new WP_REST_Request() )
-		);
-
-		$this->assertSame(
-			array(
-				'id'   => 3,
-				'name' => 'Columns',
-				'slug' => 'columns',
-			),
-			$prepared_category
-		);
-	}
-
-
-	/**
-	 * Tests if the provided query args are passed through to the wp.org API.
-	 *
-	 * @dataProvider data_get_items_query_args
-	 *
-	 * @covers WP_REST_Pattern_Directory_Controller::get_items
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $param    Query parameter name (ex, page).
-	 * @param mixed  $value    Query value to test.
-	 * @param bool   $is_error Whether this value should error or not.
-	 * @param mixed  $expected Expected value (or expected error code).
-	 */
-	public function test_get_items_query_args( $param, $value, $is_error, $expected ) {
-		wp_set_current_user( self::$contributor_id );
-		self::capture_http_urls();
-
-		$request = new WP_REST_Request( 'GET', '/wp/v2/pattern-directory/patterns' );
-		if ( $value ) {
-			$request->set_query_params( array( $param => $value ) );
-		}
-
-		$response = rest_do_request( $request );
-		$data     = $response->get_data();
-		if ( $is_error ) {
-			$this->assertSame( $expected, $data['code'] );
-			$this->assertStringContainsString( $param, $data['message'] );
-		} else {
-			$this->assertCount( 1, self::$http_request_urls );
-			$this->assertStringContainsString( $param . '=' . $expected, self::$http_request_urls[0] );
-		}
-	}
-
-	/**
-	 * @since 6.2.0
-	 */
-	public function data_get_items_query_args() {
-		return array(
-			'per_page default'   => array( 'per_page', false, false, 100 ),
-			'per_page custom-1'  => array( 'per_page', 5, false, 5 ),
-			'per_page custom-2'  => array( 'per_page', 50, false, 50 ),
-			'per_page invalid-1' => array( 'per_page', 200, true, 'rest_invalid_param' ),
-			'per_page invalid-2' => array( 'per_page', 'abc', true, 'rest_invalid_param' ),
-
-			'page default'       => array( 'page', false, false, 1 ),
-			'page custom'        => array( 'page', 5, false, 5 ),
-			'page invalid'       => array( 'page', 'abc', true, 'rest_invalid_param' ),
-
-			'offset custom'      => array( 'offset', 5, false, 5 ),
-			'offset invalid-1'   => array( 'offset', 'abc', true, 'rest_invalid_param' ),
-
-			'order default'      => array( 'order', false, false, 'desc' ),
-			'order custom'       => array( 'order', 'asc', false, 'asc' ),
-			'order invalid-1'    => array( 'order', 10, true, 'rest_invalid_param' ),
-			'order invalid-2'    => array( 'order', 'fake', true, 'rest_invalid_param' ),
-
-			'orderby default'    => array( 'orderby', false, false, 'date' ),
-			'orderby custom-1'   => array( 'orderby', 'title', false, 'title' ),
-			'orderby custom-2'   => array( 'orderby', 'date', false, 'date' ),
-			'orderby custom-3'   => array( 'orderby', 'favorite_count', false, 'favorite_count' ),
-			'orderby invalid-1'  => array( 'orderby', 10, true, 'rest_invalid_param' ),
-			'orderby invalid-2'  => array( 'orderby', 'fake', true, 'rest_invalid_param' ),
-		);
-	}
-
-	/**
-	 * Attach a filter to capture requested wp.org URL.
-	 *
-	 * @since 6.2.0
-	 */
-	private static function capture_http_urls() {
-		add_filter(
-			'pre_http_request',
-			function ( $preempt, $args, $url ) {
-				if ( 'api.wordpress.org' !== wp_parse_url( $url, PHP_URL_HOST ) ) {
-					return $preempt;
-				}
-
-				self::$http_request_urls[] = $url;
-
-				// Return a response to prevent external API request.
-				$response = array(
-					'headers'  => array(),
-					'response' => array(
-						'code'    => 200,
-						'message' => 'OK',
-					),
-					'body'     => '[]',
-					'cookies'  => array(),
-					'filename' => null,
-				);
-
-				return $response;
-			},
-			10,
-			3
-		);
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_context_param() {
-		// Covered by the core test.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_items() {
-		// Covered by the core test.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_prepare_item() {
-		// Covered by the core test.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_item() {
-		// Controller does not implement get_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_create_item() {
-		// Controller does not implement create_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_update_item() {
-		// Controller does not implement update_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_delete_item() {
-		// Controller does not implement delete_item().
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_item_schema() {
-		// The controller's schema is hardcoded, so tests would not be meaningful.
-	}
-
-}
diff --git a/phpunit/class-wp-test-rest-users-controller.php b/phpunit/class-wp-test-rest-users-controller.php
deleted file mode 100644
index 59c7c1ca3f22ab..00000000000000
--- a/phpunit/class-wp-test-rest-users-controller.php
+++ /dev/null
@@ -1,251 +0,0 @@
-<?php
-/**
- * Unit tests covering WP_REST_Users_Controller functionality.
- *
- * @package WordPress
- * @subpackage REST API
- */
-
-/**
- * @group restapi
- */
-class WP_Test_REST_Users_Controller extends WP_Test_REST_Controller_Testcase {
-	protected static $superadmin;
-	protected static $user;
-	protected static $editor;
-	protected static $draft_editor;
-	protected static $subscriber;
-
-	protected static $authors     = array();
-	protected static $posts       = array();
-	protected static $user_ids    = array();
-	protected static $total_users = 30;
-	protected static $per_page    = 50;
-
-	protected static $site;
-
-	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
-		self::$superadmin   = $factory->user->create(
-			array(
-				'role'       => 'administrator',
-				'user_login' => 'superadmin',
-			)
-		);
-		self::$user         = $factory->user->create(
-			array(
-				'role' => 'administrator',
-			)
-		);
-		self::$editor       = $factory->user->create(
-			array(
-				'role'       => 'editor',
-				'user_email' => 'editor@example.com',
-			)
-		);
-		self::$draft_editor = $factory->user->create(
-			array(
-				'role'       => 'editor',
-				'user_email' => 'draft-editor@example.com',
-			)
-		);
-		self::$subscriber   = $factory->user->create(
-			array(
-				'role'         => 'subscriber',
-				'display_name' => 'subscriber',
-				'user_email'   => 'subscriber@example.com',
-			)
-		);
-
-		foreach ( array( true, false ) as $show_in_rest ) {
-			foreach ( array( true, false ) as $public ) {
-				$post_type_name = 'r_' . json_encode( $show_in_rest ) . '_p_' . json_encode( $public );
-				register_post_type(
-					$post_type_name,
-					array(
-						'public'                   => $public,
-						'show_in_rest'             => $show_in_rest,
-						'tests_no_auto_unregister' => true,
-					)
-				);
-				self::$authors[ $post_type_name ] = $factory->user->create(
-					array(
-						'role'       => 'editor',
-						'user_email' => 'author_' . $post_type_name . '@example.com',
-					)
-				);
-				self::$posts[ $post_type_name ]   = $factory->post->create(
-					array(
-						'post_type'   => $post_type_name,
-						'post_author' => self::$authors[ $post_type_name ],
-					)
-				);
-			}
-		}
-
-		self::$posts['post']                = $factory->post->create(
-			array(
-				'post_type'   => 'post',
-				'post_author' => self::$editor,
-			)
-		);
-		self::$posts['r_true_p_true_DRAFT'] = $factory->post->create(
-			array(
-				'post_type'   => 'r_true_p_true',
-				'post_author' => self::$draft_editor,
-				'post_status' => 'draft',
-			)
-		);
-
-		if ( is_multisite() ) {
-			self::$site = $factory->blog->create(
-				array(
-					'domain' => 'rest.wordpress.org',
-					'path'   => '/',
-				)
-			);
-			update_site_option( 'site_admins', array( 'superadmin' ) );
-		}
-
-		// Set up users for pagination tests.
-		for ( $i = 0; $i < self::$total_users - 10; $i++ ) {
-			self::$user_ids[] = $factory->user->create(
-				array(
-					'role'         => 'contributor',
-					'display_name' => "User {$i}",
-				)
-			);
-		}
-	}
-
-	public static function wpTearDownAfterClass() {
-		self::delete_user( self::$user );
-		self::delete_user( self::$editor );
-		self::delete_user( self::$draft_editor );
-
-		foreach ( self::$posts as $post ) {
-			wp_delete_post( $post, true );
-		}
-
-		foreach ( self::$authors as $author ) {
-			self::delete_user( $author );
-		}
-
-		_unregister_post_type( 'r_true_p_true' );
-		_unregister_post_type( 'r_true_p_false' );
-		_unregister_post_type( 'r_false_p_true' );
-		_unregister_post_type( 'r_false_p_false' );
-
-		if ( is_multisite() ) {
-			wp_delete_site( self::$site );
-		}
-
-		// Remove users for pagination tests.
-		foreach ( self::$user_ids as $user_id ) {
-			self::delete_user( $user_id );
-		}
-	}
-
-	/**
-	 * This function is run before each method
-	 */
-	public function set_up() {
-		parent::set_up();
-		$this->endpoint = new WP_REST_Users_Controller();
-	}
-
-	/**
-	 * The following methods are implemented in core and tested.
-	 * We need to define them here because they exist in the abstract parent.
-	 */
-	public function test_register_routes() {
-		$this->markTestIncomplete();
-	}
-	public function test_context_param() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_prepare_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_create_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_update_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_delete_item() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_items() {
-		$this->markTestIncomplete();
-	}
-	public function test_get_item_schema() {
-		$this->markTestIncomplete();
-	}
-
-	public function test_registered_query_params() {
-		$request  = new WP_REST_Request( 'OPTIONS', '/wp/v2/users' );
-		$response = rest_get_server()->dispatch( $request );
-		$data     = $response->get_data();
-		$keys     = array_keys( $data['endpoints'][0]['args'] );
-		sort( $keys );
-		$this->assertSame(
-			array(
-				'context',
-				'exclude',
-				'has_published_posts',
-				'include',
-				'offset',
-				'order',
-				'orderby',
-				'page',
-				'per_page',
-				'roles',
-				'search',
-				'slug',
-				'who',
-			),
-			$keys
-		);
-	}
-
-	/**
-	 * Test the has_published_posts param.
-	 */
-	public function test_get_items_has_published_posts_query() {
-		wp_set_current_user( self::$superadmin );
-
-		// Test all users who have authored a post.
-		$request = new WP_REST_Request( 'GET', '/wp/v2/users' );
-		$request->set_param( 'has_published_posts', true );
-		$response = rest_get_server()->dispatch( $request );
-		// Make sure the response status is successful.
-		$this->assertSame( 200, $response->get_status() );
-		// Make sure we have 3 authors.
-		$this->assertCount( 3, $response->get_data() );
-		// Make sure we have the right author IDs.
-		$this->assertSame( 4, $response->get_data()[0]['id'] );
-		$this->assertSame( 7, $response->get_data()[1]['id'] );
-		$this->assertSame( 8, $response->get_data()[2]['id'] );
-
-		// Test users for a specific post-type.
-		$request = new WP_REST_Request( 'GET', '/wp/v2/users' );
-		$request->set_param( 'has_published_posts', array( 'r_true_p_true' ) );
-		$response = rest_get_server()->dispatch( $request );
-		// Make sure the response status is successful.
-		$this->assertSame( 200, $response->get_status() );
-		// Make sure we only have 1 author.
-		$this->assertCount( 1, $response->get_data() );
-		// Make sure we got the correct author.
-		$this->assertSame( 7, $response->get_data()[0]['id'] );
-
-		// Test invalid post-type.
-		$request = new WP_REST_Request( 'GET', '/wp/v2/users' );
-		$request->set_param( 'has_published_posts', array( 'dummy' ) );
-		$response = rest_get_server()->dispatch( $request );
-		// Make sure the response has a status of 400.
-		$this->assertSame( 400, $response->get_status() );
-	}
-}
diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
index 153db8c5606791..d2339f2496290c 100644
--- a/phpunit/class-wp-theme-json-resolver-test.php
+++ b/phpunit/class-wp-theme-json-resolver-test.php
@@ -4,6 +4,8 @@
  * Test WP_Theme_JSON_Resolver_Gutenberg class.
  *
  * @package Gutenberg
+ *
+ * @since 5.8.0
  */
 
 class WP_Theme_JSON_Resolver_Gutenberg_Test extends WP_UnitTestCase {
@@ -16,33 +18,52 @@ class WP_Theme_JSON_Resolver_Gutenberg_Test extends WP_UnitTestCase {
 	protected static $administrator_id;
 
 	/**
-	 * WP_Theme_JSON_Resolver::$blocks_cache property.
+	 * WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache property.
 	 *
 	 * @var ReflectionProperty
 	 */
 	private static $property_blocks_cache;
 
 	/**
-	 * Original value of the WP_Theme_JSON_Resolver::$blocks_cache property.
+	 * Original value of the WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache property.
 	 *
 	 * @var array
 	 */
 	private static $property_blocks_cache_orig_value;
 
 	/**
-	 * WP_Theme_JSON_Resolver::$core property.
+	 * WP_Theme_JSON_Resolver_Gutenberg::$core property.
 	 *
 	 * @var ReflectionProperty
 	 */
 	private static $property_core;
 
 	/**
-	 * Original value of the WP_Theme_JSON_Resolver::$core property.
+	 * Original value of the WP_Theme_JSON_Resolver_Gutenberg::$core property.
 	 *
-	 * @var WP_Theme_JSON
+	 * @var WP_Theme_JSON_Gutenberg
 	 */
 	private static $property_core_orig_value;
 
+	/**
+	 * Theme root directory.
+	 *
+	 * @var string|null
+	 */
+	private $theme_root;
+
+	/**
+	 * Original theme directory.
+	 *
+	 * @var array|null
+	 */
+	private $orig_theme_dir;
+
+	/**
+	 * @var array|null
+	 */
+	private $queries;
+
 	public static function set_up_before_class() {
 		parent::set_up_before_class();
 
@@ -62,6 +83,12 @@ public static function set_up_before_class() {
 		static::$property_core_orig_value = static::$property_core->getValue();
 	}
 
+	public static function tear_down_after_class() {
+		static::$property_blocks_cache->setValue( null, static::$property_blocks_cache_orig_value );
+		static::$property_core->setValue( null, static::$property_core_orig_value );
+		parent::tear_down_after_class();
+	}
+
 	public function set_up() {
 		parent::set_up();
 		$this->theme_root = realpath( __DIR__ . '/data/themedir1' );
@@ -84,6 +111,9 @@ public function tear_down() {
 		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
 		wp_clean_themes_cache();
 		unset( $GLOBALS['wp_themes'] );
+
+		// Reset data between tests.
+		_gutenberg_clean_theme_json_caches();
 		parent::tear_down();
 	}
 
@@ -95,29 +125,24 @@ public function filter_set_locale_to_polish() {
 		return 'pl_PL';
 	}
 
-	public function filter_db_query( $query ) {
-		if ( preg_match( '#post_type = \'wp_global_styles\'#', $query ) ) {
-			$this->queries[] = $query;
-		}
-		return $query;
-	}
-
 	public function test_translations_are_applied() {
 		add_filter( 'locale', array( $this, 'filter_set_locale_to_polish' ) );
 		load_textdomain( 'block-theme', realpath( __DIR__ . '/data/languages/themes/block-theme-pl_PL.mo' ) );
 
 		switch_theme( 'block-theme' );
-		$actual = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data();
+		$theme_data       = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data();
+		$style_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations();
 
 		unload_textdomain( 'block-theme' );
 		remove_filter( 'locale', array( $this, 'filter_set_locale_to_polish' ) );
 
-		$this->assertSame( wp_get_theme()->get( 'TextDomain' ), 'block-theme' );
+		$this->assertSame( 'block-theme', wp_get_theme()->get( 'TextDomain' ) );
+		$this->assertSame( 'Motyw blokowy', $theme_data->get_data()['title'] );
 		$this->assertSame(
 			array(
 				'color'      => array(
 					'custom'         => false,
-					'customGradient' => true,
+					'customGradient' => false,
 					'palette'        => array(
 						'theme' => array(
 							array(
@@ -132,14 +157,58 @@ public function test_translations_are_applied() {
 							),
 						),
 					),
+					'gradients'      => array(
+						'theme' => array(
+							array(
+								'name'     => 'Custom gradient',
+								'gradient' => 'linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%)',
+								'slug'     => 'custom-gradient',
+							),
+						),
+					),
+					'duotone'        => array(
+						'theme' => array(
+							array(
+								'colors' => array( '#333333', '#aaaaaa' ),
+								'slug'   => 'custom-duotone',
+								'name'   => 'Custom Duotone',
+							),
+						),
+					),
 				),
 				'typography' => array(
-					'customFontSize' => true,
-					'lineHeight'     => false,
+					'customFontSize' => false,
+					'lineHeight'     => true,
+					'fontSizes'      => array(
+						'theme' => array(
+							array(
+								'name' => 'Custom',
+								'slug' => 'custom',
+								'size' => '100px',
+							),
+						),
+					),
 				),
 				'spacing'    => array(
-					'units'   => false,
-					'padding' => false,
+					'units'    => array( 'rem' ),
+					'padding'  => true,
+					'blockGap' => true,
+				),
+				'shadow'     => array(
+					'presets' => array(
+						'theme' => array(
+							array(
+								'name'   => 'Natural',
+								'slug'   => 'natural',
+								'shadow' => '2px 2px 3px #000',
+							),
+							array(
+								'name'   => 'Test',
+								'slug'   => 'test',
+								'shadow' => '2px 2px 3px #000',
+							),
+						),
+					),
 				),
 				'blocks'     => array(
 					'core/paragraph' => array(
@@ -157,28 +226,227 @@ public function test_translations_are_applied() {
 					),
 				),
 			),
-			$actual->get_settings()
+			$theme_data->get_settings()
 		);
+
+		$custom_templates = $theme_data->get_custom_templates();
+		$this->assertArrayHasKey( 'page-home', $custom_templates );
 		$this->assertSame(
-			$actual->get_custom_templates(),
 			array(
-				'page-home' => array(
-					'title'     => 'Szablon strony głównej',
-					'postTypes' => array( 'page' ),
-				),
-			)
+				'title'     => 'Szablon strony głównej',
+				'postTypes' => array( 'page' ),
+			),
+			$custom_templates['page-home']
 		);
-		$this->assertSame(
-			$actual->get_template_parts(),
+
+		$this->assertSameSets(
 			array(
 				'small-header' => array(
 					'title' => 'Mały nagłówek',
 					'area'  => 'header',
 				),
-			)
+			),
+			$theme_data->get_template_parts()
+		);
+
+		$this->assertSame(
+			'Wariant motywu blokowego',
+			$style_variations[2]['title']
+		);
+	}
+
+	private function get_registered_block_names( $hard_reset = false ) {
+		static $expected_block_names;
+
+		if ( ! $hard_reset && ! empty( $expected_block_names ) ) {
+			return $expected_block_names;
+		}
+
+		$expected_block_names = array();
+		$resolver             = WP_Block_Type_Registry::get_instance();
+		$blocks               = $resolver->get_all_registered();
+		foreach ( array_keys( $blocks ) as $block_name ) {
+			$expected_block_names[ $block_name ] = true;
+		}
+
+		return $expected_block_names;
+	}
+
+	/**
+	 * Tests when WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache is empty or
+	 * does not match the all registered blocks.
+	 *
+	 * Though this is a non-public method, it is vital to other functionality.
+	 * Therefore, tests are provided to validate it functions as expected.
+	 *
+	 * @dataProvider data_has_same_registered_blocks_when_all_blocks_not_cached
+	 *
+	 * @param string $origin The origin to test.
+	 */
+	public function test_has_same_registered_blocks_when_all_blocks_not_cached( $origin, array $cache = array() ) {
+		$has_same_registered_blocks = new ReflectionMethod( WP_Theme_JSON_Resolver_Gutenberg::class, 'has_same_registered_blocks' );
+		$has_same_registered_blocks->setAccessible( true );
+		$expected_cache = $this->get_registered_block_names();
+
+		// Set up the blocks cache for the origin.
+		$blocks_cache            = static::$property_blocks_cache->getValue();
+		$blocks_cache[ $origin ] = $cache;
+		static::$property_blocks_cache->setValue( null, $blocks_cache );
+
+		$this->assertFalse( $has_same_registered_blocks->invoke( null, $origin ), 'WP_Theme_JSON_Resolver_Gutenberg::has_same_registered_blocks() should return false when same blocks are not cached' );
+		$blocks_cache = static::$property_blocks_cache->getValue();
+		$this->assertSameSets( $expected_cache, $blocks_cache[ $origin ], 'WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache should contain all expected block names for the given origin' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_has_same_registered_blocks_when_all_blocks_not_cached() {
+		return array(
+			'origin: core; cache: empty'       => array(
+				'origin' => 'core',
+			),
+			'origin: blocks; cache: empty'     => array(
+				'origin' => 'blocks',
+			),
+			'origin: theme; cache: empty'      => array(
+				'origin' => 'theme',
+			),
+			'origin: user; cache: empty'       => array(
+				'origin' => 'user',
+			),
+			'origin: core; cache: not empty'   => array(
+				'origin' => 'core',
+				'cache'  => array(
+					'core/block' => true,
+				),
+			),
+			'origin: blocks; cache: not empty' => array(
+				'origin' => 'blocks',
+				'cache'  => array(
+					'core/block'    => true,
+					'core/comments' => true,
+				),
+			),
+			'origin: theme; cache: not empty'  => array(
+				'origin' => 'theme',
+				'cache'  => array(
+					'core/cover' => true,
+				),
+			),
+			'origin: user; cache: not empty'   => array(
+				'origin' => 'user',
+				'cache'  => array(
+					'core/gallery' => true,
+				),
+			),
+		);
+	}
+
+	/**
+	 * Tests when WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache is empty or
+	 * does not match the all registered blocks.
+	 *
+	 * Though this is a non-public method, it is vital to other functionality.
+	 * Therefore, tests are provided to validate it functions as expected.
+	 *
+	 * @dataProvider data_has_same_registered_blocks_when_all_blocks_are_cached
+	 *
+	 * @param string $origin The origin to test.
+	 */
+	public function test_has_same_registered_blocks_when_all_blocks_are_cached( $origin ) {
+		$has_same_registered_blocks = new ReflectionMethod( WP_Theme_JSON_Resolver_Gutenberg::class, 'has_same_registered_blocks' );
+		$has_same_registered_blocks->setAccessible( true );
+		$expected_cache = $this->get_registered_block_names();
+
+		// Set up the cache with all registered blocks.
+		$blocks_cache            = static::$property_blocks_cache->getValue();
+		$blocks_cache[ $origin ] = $this->get_registered_block_names();
+		static::$property_blocks_cache->setValue( null, $blocks_cache );
+
+		$this->assertTrue( $has_same_registered_blocks->invoke( null, $origin ), 'WP_Theme_JSON_Resolver_Gutenberg::has_same_registered_blocks() should return true when using the cache' );
+		$this->assertSameSets( $expected_cache, $blocks_cache[ $origin ], 'WP_Theme_JSON_Resolver_Gutenberg::$blocks_cache should contain all expected block names for the given origin' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_has_same_registered_blocks_when_all_blocks_are_cached() {
+		return array(
+			'core'   => array( 'core' ),
+			'blocks' => array( 'blocks' ),
+			'theme'  => array( 'theme' ),
+			'user'   => array( 'user' ),
+		);
+	}
+
+	/**
+	 * @dataProvider data_get_core_data
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_core_data
+	 */
+	public function test_get_core_data( $should_fire_filter, $core_is_cached, $blocks_are_cached ) {
+		_gutenberg_clean_theme_json_caches();
+
+		// If should cache core, then fire the method to cache it before running the tests.
+		if ( $core_is_cached ) {
+			WP_Theme_JSON_Resolver_Gutenberg::get_core_data();
+		}
+
+		// If should cache registered blocks, then set them up before running the tests.
+		if ( $blocks_are_cached ) {
+			$blocks_cache         = static::$property_blocks_cache->getValue();
+			$blocks_cache['core'] = $this->get_registered_block_names();
+			static::$property_blocks_cache->setValue( null, $blocks_cache );
+		}
+
+		$expected_filter_count = did_filter( 'wp_theme_json_data_default' );
+		$actual                = WP_Theme_JSON_Resolver_Gutenberg::get_core_data();
+		if ( $should_fire_filter ) {
+			++$expected_filter_count;
+		}
+
+		$this->assertSame( $expected_filter_count, did_filter( 'wp_theme_json_data_default' ), 'The filter "wp_theme_json_data_default" should fire the given number of times' );
+		$this->assertInstanceOf( WP_Theme_JSON_Gutenberg::class, $actual, 'WP_Theme_JSON_Resolver_Gutenberg::get_core_data() should return instance of WP_Theme_JSON_Gutenberg' );
+		$this->assertSame( static::$property_core->getValue(), $actual, 'WP_Theme_JSON_Resolver_Gutenberg::$core property should be the same object as returned from WP_Theme_JSON_Resolver_Gutenberg::get_core_data()' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_core_data() {
+		return array(
+			'When both caches are empty'     => array(
+				'should_fire_filter' => true,
+				'core_is_cached'     => false,
+				'blocks_are_cached'  => false,
+			),
+			'When the blocks_cache is not empty and matches' => array(
+				'should_fire_filter' => true,
+				'core_is_cached'     => false,
+				'blocks_are_cached'  => true,
+			),
+			'When blocks_cache is empty but core cache is not' => array(
+				'should_fire_filter' => true,
+				'core_is_cached'     => true,
+				'blocks_are_cached'  => false,
+			),
+			'When both caches are not empty' => array(
+				'should_fire_filter' => true,
+				'core_is_cached'     => true,
+				'blocks_are_cached'  => false,
+			),
 		);
 	}
 
+	/**
+	 * @covers ::add_theme_support
+	 */
 	public function test_add_theme_supports_are_loaded_for_themes_without_theme_json() {
 		switch_theme( 'default' );
 		$color_palette = array(
@@ -200,27 +468,32 @@ public function test_add_theme_supports_are_loaded_for_themes_without_theme_json
 		);
 		add_theme_support( 'editor-color-palette', $color_palette );
 		add_theme_support( 'custom-line-height' );
+		add_theme_support( 'appearance-tools' );
 
 		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_settings();
 
 		remove_theme_support( 'custom-line-height' );
 		remove_theme_support( 'editor-color-palette' );
+		remove_theme_support( 'appearance-tools' );
 
 		$this->assertFalse( wp_theme_has_theme_json() );
 		$this->assertTrue( $settings['typography']['lineHeight'] );
 		$this->assertSame( $color_palette, $settings['color']['palette']['theme'] );
+		$this->assertTrue( $settings['border']['color'], 'Support for "appearance-tools" was not added.' );
 	}
 
 	/**
-	 * Recursively applies ksort to an array.
+	 * Tests that classic themes still get core default settings such as color palette and duotone.
 	 */
-	private static function recursive_ksort( &$array ) {
-		foreach ( $array as &$value ) {
-			if ( is_array( $value ) ) {
-				self::recursive_ksort( $value );
-			}
-		}
-		ksort( $array );
+	public function test_core_default_settings_are_loaded_for_themes_without_theme_json() {
+		switch_theme( 'default' );
+
+		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' )->get_settings();
+
+		$this->assertFalse( wp_theme_has_theme_json() );
+		$this->assertTrue( $settings['color']['defaultPalette'] );
+		$this->assertTrue( $settings['color']['defaultDuotone'] );
+		$this->assertTrue( $settings['color']['defaultGradients'] );
 	}
 
 	public function test_merges_child_theme_json_into_parent_theme_json() {
@@ -230,7 +503,25 @@ public function test_merges_child_theme_json_into_parent_theme_json() {
 		$expected_settings = array(
 			'color'      => array(
 				'custom'         => false,
-				'customGradient' => true,
+				'customGradient' => false,
+				'duotone'        => array(
+					'theme' => array(
+						array(
+							'colors' => array( '#333333', '#aaaaaa' ),
+							'name'   => 'Custom Duotone',
+							'slug'   => 'custom-duotone',
+						),
+					),
+				),
+				'gradients'      => array(
+					'theme' => array(
+						array(
+							'name'     => 'Custom gradient',
+							'gradient' => 'linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%)',
+							'slug'     => 'custom-gradient',
+						),
+					),
+				),
 				'palette'        => array(
 					'theme' => array(
 						array(
@@ -253,12 +544,38 @@ public function test_merges_child_theme_json_into_parent_theme_json() {
 				'link'           => true,
 			),
 			'typography' => array(
-				'customFontSize' => true,
-				'lineHeight'     => false,
+				'customFontSize' => false,
+				'lineHeight'     => true,
+				'fontSizes'      => array(
+					'theme' => array(
+						array(
+							'name' => 'Custom',
+							'slug' => 'custom',
+							'size' => '100px',
+						),
+					),
+				),
+			),
+			'shadow'     => array(
+				'presets' => array(
+					'theme' => array(
+						array(
+							'name'   => 'Natural',
+							'slug'   => 'natural',
+							'shadow' => '2px 2px 3px #000',
+						),
+						array(
+							'name'   => 'Test',
+							'slug'   => 'test',
+							'shadow' => '2px 2px 3px #000',
+						),
+					),
+				),
 			),
 			'spacing'    => array(
-				'units'   => false,
-				'padding' => false,
+				'blockGap' => true,
+				'units'    => array( 'rem' ),
+				'padding'  => true,
 			),
 			'blocks'     => array(
 				'core/paragraph'  => array(
@@ -289,8 +606,8 @@ public function test_merges_child_theme_json_into_parent_theme_json() {
 				),
 			),
 		);
-		self::recursive_ksort( $actual_settings );
-		self::recursive_ksort( $expected_settings );
+		wp_recursive_ksort( $actual_settings );
+		wp_recursive_ksort( $expected_settings );
 
 		// Should merge settings.
 		$this->assertSame(
@@ -299,30 +616,44 @@ public function test_merges_child_theme_json_into_parent_theme_json() {
 		);
 
 		$this->assertSame(
-			WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_custom_templates(),
 			array(
-				'page-home' => array(
+				'page-home'                   => array(
 					'title'     => 'Homepage',
 					'postTypes' => array( 'page' ),
 				),
-			)
+				'custom-single-post-template' => array(
+					'title'     => 'Custom Single Post template',
+					'postTypes' => array( 'post' ),
+				),
+			),
+			WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_custom_templates()
 		);
 	}
 
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
+	 */
 	public function test_get_user_data_from_wp_global_styles_does_not_use_uncached_queries() {
 		// Switch to a theme that does have support.
 		switch_theme( 'block-theme' );
 		wp_set_current_user( self::$administrator_id );
 		$theme = wp_get_theme();
 		WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
-		add_filter( 'query', array( $this, 'filter_db_query' ) );
-		$query_count = count( $this->queries );
+		$global_styles_query_count = 0;
+		add_filter(
+			'query',
+			static function ( $query ) use ( &$global_styles_query_count ) {
+				if ( preg_match( '#post_type = \'wp_global_styles\'#', $query ) ) {
+					$global_styles_query_count++;
+				}
+				return $query;
+			}
+		);
 		for ( $i = 0; $i < 3; $i++ ) {
 			WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
-			WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+			_gutenberg_clean_theme_json_caches();
 		}
-		$query_count = count( $this->queries ) - $query_count;
-		$this->assertSame( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type prior to creation.' );
+		$this->assertSame( 0, $global_styles_query_count, 'Unexpected SQL queries detected for the wp_global_style post type prior to creation.' );
 
 		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
 		$this->assertEmpty( $user_cpt, 'User CPT is expected to be empty.' );
@@ -330,32 +661,781 @@ public function test_get_user_data_from_wp_global_styles_does_not_use_uncached_q
 		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true );
 		$this->assertNotEmpty( $user_cpt, 'User CPT is expected not to be empty.' );
 
-		$query_count = count( $this->queries );
-		for ( $i = 0; $i < 3; $i ++ ) {
+		$global_styles_query_count = 0;
+		for ( $i = 0; $i < 3; $i++ ) {
 			$new_user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
-			WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+			_gutenberg_clean_theme_json_caches();
 			$this->assertSameSets( $user_cpt, $new_user_cpt, "User CPTs do not match on run {$i}." );
 		}
-		$query_count = count( $this->queries ) - $query_count;
-		$this->assertSame( 1, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type after creation.' );
+		$this->assertSame( 1, $global_styles_query_count, 'Unexpected SQL queries detected for the wp_global_style post type after creation.' );
 	}
 
 	/**
-	 * @covers WP_Theme_JSON_Resolver::get_user_data_from_wp_global_styles
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
 	 */
 	public function test_get_user_data_from_wp_global_styles_does_not_use_uncached_queries_for_logged_out_users() {
+		// Switch to a theme that does have support.
+		switch_theme( 'block-theme' );
 		$theme = wp_get_theme();
 		WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
-		add_filter( 'query', array( $this, 'filter_db_query' ) );
-		$query_count = count( $this->queries );
+		$query_count = get_num_queries();
 		for ( $i = 0; $i < 3; $i++ ) {
 			WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
-			WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+			_gutenberg_clean_theme_json_caches();
 		}
-		$query_count = count( $this->queries ) - $query_count;
+		$query_count = get_num_queries() - $query_count;
 		$this->assertSame( 0, $query_count, 'Unexpected SQL queries detected for the wp_global_style post type prior to creation.' );
 
 		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
 		$this->assertEmpty( $user_cpt, 'User CPT is expected to be empty.' );
 	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
+	 */
+	public function test_get_user_data_from_wp_global_styles_does_not_run_for_theme_without_support() {
+		// The 'default' theme does not support theme.json.
+		switch_theme( 'default' );
+		wp_set_current_user( self::$administrator_id );
+		$theme = wp_get_theme();
+
+		$start_queries = get_num_queries();
+
+		// When theme.json is not supported, the method should not run a query and always return an empty result.
+		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
+		$this->assertEmpty( $user_cpt, 'User CPT is expected to be empty.' );
+		$this->assertSame( 0, get_num_queries() - $start_queries, 'Unexpected SQL query detected for theme without theme.json support.' );
+
+		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true );
+		$this->assertEmpty( $user_cpt, 'User CPT is expected to be empty.' );
+		$this->assertSame( 0, get_num_queries() - $start_queries, 'Unexpected SQL query detected for theme without theme.json support.' );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
+	 */
+	public function test_get_user_data_from_wp_global_styles_does_exist() {
+		// Switch to a theme that does have support.
+		switch_theme( 'block-theme' );
+		$theme = wp_get_theme();
+		$post1 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true );
+		$this->assertIsArray( $post1 );
+		$this->assertArrayHasKey( 'ID', $post1 );
+		wp_delete_post( $post1['ID'], true );
+		$post2 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true );
+		$this->assertIsArray( $post2 );
+		$this->assertArrayHasKey( 'ID', $post2 );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
+	 */
+	public function test_get_user_data_from_wp_global_styles_create_post() {
+		// Switch to a theme that does have support.
+		switch_theme( 'block-theme' );
+		$theme = wp_get_theme( 'testing' );
+		$post1 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
+		$this->assertIsArray( $post1 );
+		$this->assertSameSets( array(), $post1 );
+		$post2 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme );
+		$this->assertIsArray( $post2 );
+		$this->assertSameSets( array(), $post2 );
+		$post3 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true );
+		$this->assertIsArray( $post3 );
+		$this->assertArrayHasKey( 'ID', $post3 );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles
+	 */
+	public function test_get_user_data_from_wp_global_styles_filter_state() {
+		// Switch to a theme that does have support.
+		switch_theme( 'block-theme' );
+		$theme = wp_get_theme( 'foo' );
+		$post1 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, true, array( 'publish' ) );
+		$this->assertIsArray( $post1 );
+		$this->assertArrayHasKey( 'ID', $post1 );
+		$post2 = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( $theme, false, array( 'draft' ) );
+		$this->assertIsArray( $post2 );
+		$this->assertSameSets( array(), $post2 );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_theme_data
+	 */
+	public function test_get_theme_data_theme_supports_overrides_theme_json() {
+		switch_theme( 'default' );
+
+		// Test that get_theme_data() returns a WP_Theme_JSON_Gutenberg object.
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json_resolver->get_merged_data();
+		$theme_data = $theme_json_resolver->get_theme_data();
+		$this->assertInstanceOf( 'WP_Theme_JSON_Gutenberg', $theme_data, 'Theme data should be an instance of WP_Theme_JSON_Gutenberg.' );
+
+		// Test that wp_theme_json_data_theme filter has been called.
+		$this->assertGreaterThan( 0, did_filter( 'wp_theme_json_data_default' ), 'The filter "wp_theme_json_data_default" should fire.' );
+
+		// Test that data from theme.json is backfilled from existing theme supports.
+		$previous_settings    = $theme_data->get_settings();
+		$previous_line_height = $previous_settings['typography']['lineHeight'];
+		$this->assertFalse( $previous_line_height, 'lineHeight setting from theme.json should be false.' );
+
+		add_theme_support( 'custom-line-height' );
+		$current_settings = $theme_json_resolver->get_theme_data()->get_settings();
+		$line_height      = $current_settings['typography']['lineHeight'];
+		$this->assertTrue( $line_height, 'lineHeight setting after add_theme_support() should be true.' );
+		remove_theme_support( 'custom-line-height' );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_theme_data
+	 */
+	public function test_get_theme_data_does_not_parse_theme_json_if_not_present() {
+		// The 'default' theme does not support theme.json.
+		switch_theme( 'default' );
+
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+
+		// Force-unset $i18n_schema property to "unload" translation schema.
+		$property = new ReflectionProperty( $theme_json_resolver, 'i18n_schema' );
+		$property->setAccessible( true );
+		$property->setValue( null, null );
+
+		// A completely empty theme.json data set still has the 'version' key when parsed.
+		$empty_theme_json = array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA );
+
+		// Call using 'with_supports' set to false, so that the method only considers theme.json.
+		$theme_data = $theme_json_resolver->get_theme_data( array(), array( 'with_supports' => false ) );
+		$this->assertInstanceOf( 'WP_Theme_JSON_Gutenberg', $theme_data, 'Theme data should be an instance of WP_Theme_JSON_Gutenberg.' );
+		$this->assertSame( $empty_theme_json, $theme_data->get_raw_data(), 'Theme data should be empty without theme support.' );
+		$this->assertNull( $property->getValue(), 'Theme i18n schema should not have been loaded without theme support.' );
+	}
+
+	/**
+	 * Tests that get_merged_data returns the data merged up to the proper origin.
+	 *
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_merged_data
+	 *
+	 * @dataProvider data_get_merged_data_returns_origin
+	 *
+	 * @param string $origin             What origin to get data from.
+	 * @param bool   $core_palette       Whether the core palette is present.
+	 * @param string $core_palette_text  Message.
+	 * @param string $block_styles       Whether the block styles are present.
+	 * @param string $block_styles_text  Message.
+	 * @param bool   $theme_palette      Whether the theme palette is present.
+	 * @param string $theme_palette_text Message.
+	 * @param bool   $user_palette       Whether the user palette is present.
+	 * @param string $user_palette_text  Message.
+	 */
+	public function test_get_merged_data_returns_origin( $origin, $core_palette, $core_palette_text, $block_styles, $block_styles_text, $theme_palette, $theme_palette_text, $user_palette, $user_palette_text ) {
+		// Make sure there is data from the blocks origin.
+		register_block_type(
+			'my/block-with-styles',
+			array(
+				'api_version' => 3,
+				'attributes'  => array(
+					'borderColor' => array(
+						'type' => 'string',
+					),
+					'style'       => array(
+						'type' => 'object',
+					),
+				),
+				'supports'    => array(
+					'__experimentalStyle' => array(
+						'typography' => array(
+							'fontSize' => '42rem',
+						),
+					),
+				),
+			)
+		);
+
+		// Make sure there is data from the theme origin.
+		switch_theme( 'block-theme' );
+
+		// Make sure there is data from the user origin.
+		wp_set_current_user( self::$administrator_id );
+		$user_cpt = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( wp_get_theme(), true );
+		$config   = json_decode( $user_cpt['post_content'], true );
+		$config['settings']['color']['palette']['custom'] = array(
+			array(
+				'color' => 'hotpink',
+				'name'  => 'My color',
+				'slug'  => 'my-color',
+			),
+		);
+		$user_cpt['post_content']                         = wp_json_encode( $config );
+		wp_update_post( $user_cpt, true, false );
+
+		$theme_json = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin );
+		$settings   = $theme_json->get_settings();
+		$styles     = $theme_json->get_styles_block_nodes();
+		$styles     = array_filter(
+			$styles,
+			static function ( $element ) {
+				return isset( $element['name'] ) && 'my/block-with-styles' === $element['name'];
+			}
+		);
+		unregister_block_type( 'my/block-with-styles' );
+
+		$this->assertSame( $core_palette, isset( $settings['color']['palette']['default'] ), $core_palette_text );
+		$this->assertSame( $block_styles, count( $styles ) === 1, $block_styles_text );
+		$this->assertSame( $theme_palette, isset( $settings['color']['palette']['theme'] ), $theme_palette_text );
+		$this->assertSame( $user_palette, isset( $settings['color']['palette']['custom'] ), $user_palette_text );
+	}
+
+	/**
+	 * Tests that get_merged_data returns the data merged up to the proper origin
+	 * and that the core values have the proper data.
+	 *
+	 * @covers WP_Theme_JSON_Resolver_Gutenberg::get_merged_data
+	 */
+	public function test_get_merged_data_returns_origin_proper() {
+		// Make sure the theme has a theme.json
+		// though it doesn't have any data for styles.spacing.padding.
+		switch_theme( 'block-theme' );
+
+		// Make sure the user defined some data for styles.spacing.padding.
+		wp_set_current_user( self::$administrator_id );
+		$user_cpt                               = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( wp_get_theme(), true );
+		$config                                 = json_decode( $user_cpt['post_content'], true );
+		$config['styles']['spacing']['padding'] = array(
+			'top'    => '23px',
+			'left'   => '23px',
+			'bottom' => '23px',
+			'right'  => '23px',
+		);
+		$user_cpt['post_content']               = wp_json_encode( $config );
+		wp_update_post( $user_cpt, true, false );
+
+		// Query data from the user origin and then for the theme origin.
+		$theme_json_user  = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'custom' );
+		$padding_user     = $theme_json_user->get_raw_data()['styles']['spacing']['padding'];
+		$theme_json_theme = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( 'theme' );
+		$padding_theme    = $theme_json_theme->get_raw_data()['styles']['spacing']['padding'];
+
+		$this->assertSame( '23px', $padding_user['top'] );
+		$this->assertSame( '23px', $padding_user['right'] );
+		$this->assertSame( '23px', $padding_user['bottom'] );
+		$this->assertSame( '23px', $padding_user['left'] );
+		$this->assertSame( '0px', $padding_theme['top'] );
+		$this->assertSame( '0px', $padding_theme['right'] );
+		$this->assertSame( '0px', $padding_theme['bottom'] );
+		$this->assertSame( '0px', $padding_theme['left'] );
+	}
+
+	/**
+	 * Data provider for test_get_merged_data_returns_origin.
+	 *
+	 * @return array[]
+	 */
+	public function data_get_merged_data_returns_origin() {
+		return array(
+			'origin_default' => array(
+				'origin'             => 'default',
+				'core_palette'       => true,
+				'core_palette_text'  => 'Core palette must be present',
+				'block_styles'       => false,
+				'block_styles_text'  => 'Block styles should not be present',
+				'theme_palette'      => false,
+				'theme_palette_text' => 'Theme palette should not be present',
+				'user_palette'       => false,
+				'user_palette_text'  => 'User palette should not be present',
+			),
+			'origin_blocks'  => array(
+				'origin'             => 'blocks',
+				'core_palette'       => true,
+				'core_palette_text'  => 'Core palette must be present',
+				'block_styles'       => true,
+				'block_styles_text'  => 'Block styles must be present',
+				'theme_palette'      => false,
+				'theme_palette_text' => 'Theme palette should not be present',
+				'user_palette'       => false,
+				'user_palette_text'  => 'User palette should not be present',
+			),
+			'origin_theme'   => array(
+				'origin'             => 'theme',
+				'core_palette'       => true,
+				'core_palette_text'  => 'Core palette must be present',
+				'block_styles'       => true,
+				'block_styles_text'  => 'Block styles must be present',
+				'theme_palette'      => true,
+				'theme_palette_text' => 'Theme palette must be present',
+				'user_palette'       => false,
+				'user_palette_text'  => 'User palette should not be present',
+			),
+			'origin_custom'  => array(
+				'origin'             => 'custom',
+				'core_palette'       => true,
+				'core_palette_text'  => 'Core palette must be present',
+				'block_styles'       => true,
+				'block_styles_text'  => 'Block styles must be present',
+				'theme_palette'      => true,
+				'theme_palette_text' => 'Theme palette must be present',
+				'user_palette'       => true,
+				'user_palette_text'  => 'User palette must be present',
+			),
+		);
+	}
+
+	/**
+	 * Tests that `get_style_variations` returns all the appropriate variations,
+	 * including parent variations if the theme is a child, and that the child
+	 * variation overwrites the parent variation of the same name.
+	 *
+	 * Note: This covers both theme and block style variations.
+	 *
+	 * @covers WP_Theme_JSON_Resolver::get_style_variations
+	 *
+	 * @dataProvider data_get_style_variations
+	 *
+	 * @since 6.6.0 Added tests for block style variations.
+	 *
+	 * @param string $theme               Name of the theme to use.
+	 * @param string $scope               Scope to filter variations by e.g. theme vs block.
+	 * @param array  $expected_variations Collection of expected variations.
+	 */
+	public function test_get_style_variations( $theme, $scope, $expected_variations ) {
+		switch_theme( $theme );
+		wp_set_current_user( self::$administrator_id );
+
+		$actual_variations = WP_Theme_JSON_Resolver_Gutenberg::get_style_variations( $scope );
+
+		wp_recursive_ksort( $actual_variations );
+		wp_recursive_ksort( $expected_variations );
+
+		$this->assertSame( $expected_variations, $actual_variations );
+	}
+
+	/**
+	 * Data provider for test_get_style_variations
+	 *
+	 * @since 6.6.0 Added data provider for testing theme and block style variations.
+	 *
+	 * @return array
+	 */
+	public function data_get_style_variations() {
+		return array(
+			'theme_style_variations' => array(
+				'theme'               => 'block-theme-child',
+				'scope'               => 'theme',
+				'expected_variations' => array(
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'variation-a',
+						'settings' => array(
+							'blocks' => array(
+								'core/paragraph' => array(
+									'color' => array(
+										'palette' => array(
+											'theme' => array(
+												array(
+													'slug' => 'dark',
+													'name' => 'Dark',
+													'color' => '#010101',
+												),
+											),
+										),
+									),
+								),
+							),
+						),
+					),
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'variation-b',
+						'settings' => array(
+							'blocks' => array(
+								'core/post-title' => array(
+									'color' => array(
+										'palette' => array(
+											'theme' => array(
+												array(
+													'slug' => 'dark',
+													'name' => 'Dark',
+													'color' => '#010101',
+												),
+											),
+										),
+									),
+								),
+							),
+						),
+					),
+					array(
+						'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'    => 'Block theme variation',
+						'settings' => array(
+							'color' => array(
+								'palette' => array(
+									'theme' => array(
+										array(
+											'slug'  => 'foreground',
+											'name'  => 'Foreground',
+											'color' => '#3F67C6',
+										),
+									),
+								),
+							),
+						),
+						'styles'   => array(
+							'blocks' => array(
+								'core/post-title' => array(
+									'typography' => array(
+										'fontWeight' => '700',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+			'block_style_variations' => array(
+				'theme'               => 'block-theme-child-with-block-style-variations',
+				'scope'               => 'block',
+				'expected_variations' => array(
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns', 'core/media-text' ),
+						'version'    => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'      => 'block-style-variation-a',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'darkcyan',
+								'text'       => 'aliceblue',
+							),
+						),
+					),
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns' ),
+						'version'    => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+						'title'      => 'block-style-variation-b',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'midnightblue',
+								'text'       => 'lightblue',
+							),
+						),
+					),
+					array(
+						'blockTypes' => array( 'core/group', 'core/columns' ),
+						'version'    => 3,
+						'slug'       => 'WithSlug',
+						'title'      => 'With Slug',
+						'styles'     => array(
+							'color' => array(
+								'background' => 'aliceblue',
+								'text'       => 'midnightblue',
+							),
+						),
+					),
+				),
+			),
+		);
+	}
+
+	public function test_theme_shadow_presets_do_not_override_default_shadow_presets() {
+		switch_theme( 'block-theme' );
+
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+		$actual_settings     = $theme_json->get_settings()['shadow']['presets'];
+
+		$expected_settings = array(
+			'default' => array(
+				array(
+					'name'   => 'Natural',
+					'shadow' => '6px 6px 9px rgba(0, 0, 0, 0.2)',
+					'slug'   => 'natural',
+				),
+				array(
+					'name'   => 'Deep',
+					'shadow' => '12px 12px 50px rgba(0, 0, 0, 0.4)',
+					'slug'   => 'deep',
+				),
+				array(
+					'name'   => 'Sharp',
+					'shadow' => '6px 6px 0px rgba(0, 0, 0, 0.2)',
+					'slug'   => 'sharp',
+				),
+				array(
+					'name'   => 'Outlined',
+					'shadow' => '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					'slug'   => 'outlined',
+				),
+				array(
+					'name'   => 'Crisp',
+					'shadow' => '6px 6px 0px rgba(0, 0, 0, 1)',
+					'slug'   => 'crisp',
+				),
+			),
+			'theme'   => array(
+				array(
+					'name'   => 'Test',
+					'shadow' => '2px 2px 3px #000',
+					'slug'   => 'test',
+				),
+			),
+		);
+
+		wp_recursive_ksort( $actual_settings );
+		wp_recursive_ksort( $expected_settings );
+
+		$this->assertSame(
+			$expected_settings,
+			$actual_settings
+		);
+	}
+
+	public function test_shadow_default_presets_value_for_block_and_classic_themes() {
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+
+		$default_presets_for_classic = $theme_json->get_settings()['shadow']['defaultPresets'];
+		$this->assertFalse( $default_presets_for_classic );
+
+		switch_theme( 'block-theme' );
+		$theme_json_resolver = new WP_Theme_JSON_Resolver_Gutenberg();
+		$theme_json          = $theme_json_resolver->get_merged_data();
+
+		$default_presets_for_block = $theme_json->get_settings()['shadow']['defaultPresets'];
+		$this->assertTrue( $default_presets_for_block );
+	}
+
+	/**
+	 * Tests that relative paths are resolved and merged into the theme.json data.
+	 */
+	public function test_resolve_theme_file_uris() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./example/img/image.png',
+						),
+					),
+					'blocks'     => array(
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'file:./example/img/quote.png',
+								),
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'file:./example/img/verse.png',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_data = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'https://example.org/wp-content/themes/example-theme/example/img/image.png',
+					),
+				),
+				'blocks'     => array(
+					'core/quote' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'url' => 'https://example.org/wp-content/themes/example-theme/example/img/quote.png',
+							),
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'url' => 'https://example.org/wp-content/themes/example-theme/example/img/verse.png',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		/*
+		 * This filter callback normalizes the return value from `get_theme_file_uri`
+		 * to guard against changes in test environments.
+		 * The test suite otherwise returns full system dir path, e.g.,
+		 * /wordpress-phpunit/includes/../data/themedir1/default/example/img/image.png
+		 */
+		$filter_theme_file_uri_callback = function ( $file ) {
+			return 'https://example.org/wp-content/themes/example-theme/example/' . explode( 'example/', $file )[1];
+		};
+		add_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+		$actual = WP_Theme_JSON_Resolver_Gutenberg::resolve_theme_file_uris( $theme_json );
+		remove_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+
+		$this->assertSame( $expected_data, $actual->get_raw_data() );
+	}
+
+	/**
+	 * Tests that them uris are resolved and bundled with other metadata
+	 * in an array.
+	 */
+	public function test_get_resolved_theme_uris() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'url' => 'file:./example/img/image.png',
+						),
+					),
+					'blocks'     => array(
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'file:./example/img/quote.jpg',
+								),
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'file:./example/img/verse.gif',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_data = array(
+			array(
+				'name'   => 'file:./example/img/image.png',
+				'href'   => 'https://example.org/wp-content/themes/example-theme/example/img/image.png',
+				'target' => 'styles.background.backgroundImage.url',
+				'type'   => 'image/png',
+			),
+			array(
+				'name'   => 'file:./example/img/quote.jpg',
+				'href'   => 'https://example.org/wp-content/themes/example-theme/example/img/quote.jpg',
+				'target' => 'styles.blocks.core/quote.background.backgroundImage.url',
+				'type'   => 'image/jpeg',
+			),
+			array(
+				'name'   => 'file:./example/img/verse.gif',
+				'href'   => 'https://example.org/wp-content/themes/example-theme/example/img/verse.gif',
+				'target' => 'styles.blocks.core/verse.background.backgroundImage.url',
+				'type'   => 'image/gif',
+			),
+		);
+
+		/*
+		 * This filter callback normalizes the return value from `get_theme_file_uri`
+		 * to guard against changes in test environments.
+		 * The test suite otherwise returns full system dir path, e.g.,
+		 * /wordpress-phpunit/includes/../data/themedir1/default/example/img/image.png
+		 */
+		$filter_theme_file_uri_callback = function ( $file ) {
+			return 'https://example.org/wp-content/themes/example-theme/example/' . explode( 'example/', $file )[1];
+		};
+		add_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+		$actual = WP_Theme_JSON_Resolver_Gutenberg::get_resolved_theme_uris( $theme_json );
+		remove_filter( 'theme_file_uri', $filter_theme_file_uri_callback );
+
+		$this->assertSame( $expected_data, $actual );
+	}
+
+	/**
+	 * Tests that block style variations data gets merged in the following
+	 * priority order, from highest priority to lowest.
+	 *
+	 * - `styles.blocks.blockType.variations` from theme.json
+	 * - `styles.variations` from theme.json
+	 * - variations from block style variation files under `/styles`
+	 * - variations from `WP_Block_Styles_Registry`
+	 */
+	public function test_block_style_variation_merge_order() {
+		switch_theme( 'block-theme-child-with-block-style-variations' );
+
+		/*
+		 * Register style for a block that isn't included in the block style variation's partial
+		 * theme.json's blockTypes. The name must match though so we can ensure the partial's
+		 * styles do not get applied to this block.
+		 */
+		register_block_style(
+			'core/heading',
+			array(
+				'name'  => 'block-style-variation-b',
+				'label' => 'Heading only variation',
+			)
+		);
+
+		// Register variation for a block that will be partially overridden at all levels.
+		register_block_style(
+			'core/media-text',
+			array(
+				'name'       => 'block-style-variation-a',
+				'label'      => 'Block Style Variation A',
+				'style_data' => array(
+					'color' => array(
+						'background' => 'pink',
+						'gradient'   => 'var(--custom)',
+					),
+				),
+			)
+		);
+
+		$data         = WP_Theme_JSON_Resolver_Gutenberg::get_theme_data()->get_raw_data();
+		$block_styles = $data['styles']['blocks'] ?? array();
+		$actual       = array_intersect_key(
+			$block_styles,
+			array_flip( array( 'core/button', 'core/media-text', 'core/heading' ) )
+		);
+		$expected     = array(
+			'core/button'     => array(
+				'variations' => array(
+					'outline' => array(
+						'color' => array(
+							'background' => 'red',
+							'text'       => 'white',
+						),
+					),
+				),
+			),
+			'core/media-text' => array(
+				'variations' => array(
+					'block-style-variation-a' => array(
+						'color'      => array(
+							'background' => 'blue',
+							'gradient'   => 'var(--custom)',
+							'text'       => 'aliceblue',
+						),
+						'typography' => array(
+							'fontSize'   => '1.5em',
+							'lineHeight' => '1.4em',
+						),
+					),
+				),
+			),
+			'core/heading'    => array(
+				'variations' => array(
+					'block-style-variation-b' => array(
+						'typography' => array(
+							'fontSize' => '3em',
+						),
+					),
+				),
+			),
+		);
+
+		unregister_block_style( 'core/heading', 'block-style-variation-b' );
+		unregister_block_style( 'core/media-text', 'block-style-variation-a' );
+
+		$this->assertSameSetsWithIndex( $expected, $actual, 'Merged variation styles do not match.' );
+	}
 }
diff --git a/phpunit/class-wp-theme-json-schema-test.php b/phpunit/class-wp-theme-json-schema-test.php
new file mode 100644
index 00000000000000..24a7cf0e2e43d2
--- /dev/null
+++ b/phpunit/class-wp-theme-json-schema-test.php
@@ -0,0 +1,283 @@
+<?php
+
+/**
+ * Test WP_Theme_JSON_Schema_Gutenberg class.
+ *
+ * @package Gutenberg
+ *
+ * @since 5.9.0
+ */
+class WP_Theme_JSON_Schema_Gutenberg_Test extends WP_UnitTestCase {
+	public function test_migrate_v1_to_latest() {
+		$theme_json_v1 = array(
+			'version'  => 1,
+			'settings' => array(
+				'color'      => array(
+					'palette' => array(
+						array(
+							'name'  => 'Pale Pink',
+							'slug'  => 'pale-pink',
+							'color' => '#f78da7',
+						),
+						array(
+							'name'  => 'Vivid Red',
+							'slug'  => 'vivid-red',
+							'color' => '#cf2e2e',
+						),
+					),
+					'custom'  => false,
+					'link'    => true,
+				),
+				'border'     => array(
+					'color'        => false,
+					'customRadius' => false,
+					'style'        => false,
+					'width'        => false,
+				),
+				'typography' => array(
+					'fontSizes'      => array(
+						array(
+							'name' => 'Small',
+							'slug' => 'small',
+							'size' => 12,
+						),
+						array(
+							'name' => 'Normal',
+							'slug' => 'normal',
+							'size' => 16,
+						),
+					),
+					'fontStyle'      => false,
+					'fontWeight'     => false,
+					'letterSpacing'  => false,
+					'textDecoration' => false,
+					'textTransform'  => false,
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'border'     => array(
+							'color'        => true,
+							'customRadius' => true,
+							'style'        => true,
+							'width'        => true,
+						),
+						'typography' => array(
+							'fontStyle'      => true,
+							'fontWeight'     => true,
+							'letterSpacing'  => true,
+							'textDecoration' => true,
+							'textTransform'  => true,
+						),
+					),
+				),
+			),
+			'styles'   => array(
+				'color'    => array(
+					'background' => 'purple',
+				),
+				'blocks'   => array(
+					'core/group' => array(
+						'color'    => array(
+							'background' => 'red',
+						),
+						'spacing'  => array(
+							'padding' => array(
+								'top' => '10px',
+							),
+						),
+						'elements' => array(
+							'link' => array(
+								'color' => array(
+									'text' => 'yellow',
+								),
+							),
+						),
+					),
+				),
+				'elements' => array(
+					'link' => array(
+						'color' => array(
+							'text' => 'red',
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json_v1 );
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'palette' => array(
+						array(
+							'name'  => 'Pale Pink',
+							'slug'  => 'pale-pink',
+							'color' => '#f78da7',
+						),
+						array(
+							'name'  => 'Vivid Red',
+							'slug'  => 'vivid-red',
+							'color' => '#cf2e2e',
+						),
+					),
+					'custom'  => false,
+					'link'    => true,
+				),
+				'border'     => array(
+					'color'  => false,
+					'radius' => false,
+					'style'  => false,
+					'width'  => false,
+				),
+				'typography' => array(
+					'defaultFontSizes' => false,
+					'fontSizes'        => array(
+						array(
+							'name' => 'Small',
+							'slug' => 'small',
+							'size' => 12,
+						),
+						array(
+							'name' => 'Normal',
+							'slug' => 'normal',
+							'size' => 16,
+						),
+					),
+					'fontStyle'        => false,
+					'fontWeight'       => false,
+					'letterSpacing'    => false,
+					'textDecoration'   => false,
+					'textTransform'    => false,
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'border'     => array(
+							'color'  => true,
+							'radius' => true,
+							'style'  => true,
+							'width'  => true,
+						),
+						'typography' => array(
+							'fontStyle'      => true,
+							'fontWeight'     => true,
+							'letterSpacing'  => true,
+							'textDecoration' => true,
+							'textTransform'  => true,
+						),
+					),
+				),
+			),
+			'styles'   => array(
+				'color'    => array(
+					'background' => 'purple',
+				),
+				'blocks'   => array(
+					'core/group' => array(
+						'color'    => array(
+							'background' => 'red',
+						),
+						'spacing'  => array(
+							'padding' => array(
+								'top' => '10px',
+							),
+						),
+						'elements' => array(
+							'link' => array(
+								'color' => array(
+									'text' => 'yellow',
+								),
+							),
+						),
+					),
+				),
+				'elements' => array(
+					'link' => array(
+						'color' => array(
+							'text' => 'red',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_migrate_v2_to_latest() {
+		$theme_json_v2 = array(
+			'version'  => 2,
+			'settings' => array(
+				'typography' => array(
+					'fontSizes' => array(
+						array(
+							'name' => 'Small',
+							'slug' => 'small',
+							'size' => 12,
+						),
+						array(
+							'name' => 'Normal',
+							'slug' => 'normal',
+							'size' => 16,
+						),
+					),
+				),
+				'spacing'    => array(
+					'spacingSizes' => array(
+						array(
+							'name' => 'Small',
+							'slug' => 20,
+							'size' => '20px',
+						),
+						array(
+							'name' => 'Large',
+							'slug' => 80,
+							'size' => '80px',
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json_v2 );
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'typography' => array(
+					'defaultFontSizes' => false,
+					'fontSizes'        => array(
+						array(
+							'name' => 'Small',
+							'slug' => 'small',
+							'size' => 12,
+						),
+						array(
+							'name' => 'Normal',
+							'slug' => 'normal',
+							'size' => 16,
+						),
+					),
+				),
+				'spacing'    => array(
+					'defaultSpacingSizes' => false,
+					'spacingSizes'        => array(
+						array(
+							'name' => 'Small',
+							'slug' => 20,
+							'size' => '20px',
+						),
+						array(
+							'name' => 'Large',
+							'slug' => 80,
+							'size' => '80px',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index b6a82e2fb2b7cf..e47a36f73f4188 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -4,297 +4,262 @@
  * Test WP_Theme_JSON_Gutenberg class.
  *
  * @package Gutenberg
+ *
+ * @covers WP_Theme_JSON_Gutenberg
  */
 
 class WP_Theme_JSON_Gutenberg_Test extends WP_UnitTestCase {
 	/**
-	 * @dataProvider data_get_layout_definitions
+	 * Administrator ID.
 	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
+	 * @var int
 	 */
-	public function test_get_stylesheet_generates_layout_styles( $layout_definitions ) {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
-					),
-					'spacing' => array(
-						'blockGap' => true,
-					),
-				),
-				'styles'   => array(
-					'spacing' => array(
-						'blockGap' => '1em',
-					),
-				),
-			),
-			'default'
-		);
+	private static $administrator_id;
 
-		// Results also include root site blocks styles.
-		$this->assertEquals(
-			'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1em; }body { --wp--style--block-gap: 1em; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1em;margin-block-end: 0;}body .is-layout-flex{gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
-			$theme_json->get_stylesheet( array( 'styles' ) )
-		);
-	}
+	/**
+	 * User ID.
+	 *
+	 * @var int
+	 */
+	private static $user_id;
 
 	/**
-	 * @dataProvider data_get_layout_definitions
+	 * Base Styles.
 	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
+	 * @var string
 	 */
-	public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values( $layout_definitions ) {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
+	private static $base_styles = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+
+	public static function set_up_before_class() {
+		parent::set_up_before_class();
+
+		static::$administrator_id = self::factory()->user->create(
 			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
-					),
-					'spacing' => array(
-						'blockGap' => true,
-					),
-				),
-				'styles'   => array(
-					'spacing' => array(
-						'blockGap' => '1rem',
-					),
-					'blocks'  => array(
-						'core/post-content' => array(
-							'color' => array(
-								'text' => 'gray', // This value should not render block layout styles.
-							),
-						),
-						'core/social-links' => array(
-							'spacing' => array(
-								'blockGap' => '0', // This value should render block layout gap as zero.
-							),
-						),
-						'core/buttons'      => array(
-							'spacing' => array(
-								'blockGap' => 0, // This value should render block layout gap as zero.
-							),
-						),
-						'core/columns'      => array(
-							'spacing' => array(
-								'blockGap' => false, // This value should be ignored. The block will use the global layout value.
-							),
-						),
-					),
-				),
-			),
-			'default'
+				'role' => 'administrator',
+			)
 		);
 
-		$this->assertEquals(
-			'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: 1rem; }body { --wp--style--block-gap: 1rem; }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: 1rem;margin-block-end: 0;}body .is-layout-flex{gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links.is-layout-flex{gap: 0;}.wp-block-buttons.is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons.is-layout-flex{gap: 0;}',
-			$theme_json->get_stylesheet()
-		);
+		if ( is_multisite() ) {
+			grant_super_admin( self::$administrator_id );
+		}
+
+		static::$user_id = self::factory()->user->create();
 	}
 
 	/**
-	 * @dataProvider data_get_layout_definitions
+	 * Pretty print CSS in test assertions so that it provides a better diff when a test fails.
+	 * Without this: the failing test outputs the entire css string as being different.
+	 * With this: the failing test only highlights the specific CSS rule that is different.
 	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
+	 * @param string $css A string of raw css with no line breaks.
+	 * @return string The css with line breaks.
 	 */
-	public function test_get_stylesheet_generates_layout_styles_with_spacing_presets( $layout_definitions ) {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
-					),
-					'spacing' => array(
-						'blockGap' => true,
-					),
-				),
-				'styles'   => array(
-					'spacing' => array(
-						'blockGap' => 'var:preset|spacing|60',
-					),
-				),
-			),
-			'default'
-		);
-
-		// Results also include root site blocks styles.
-		$this->assertEquals(
-			'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var(--wp--preset--spacing--60); }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }body .is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}body .is-layout-flow > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}body .is-layout-flex{gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
-			$theme_json->get_stylesheet( array( 'styles' ) )
-		);
+	private static function pretty_print_css( $css ) {
+		$css = str_replace( '{', " {\n", $css );
+		$css = str_replace( '}', "}\n\n", $css );
+		$css = str_replace( ';', ";\n", $css );
+		return $css;
 	}
 
 	/**
-	 * @dataProvider data_get_layout_definitions
+	 * Asserts that two CSS strings are equivalent, but outputs
+	 * pretty printed test failures along with the raw css.
+	 *
+	 * - The pretty printed assertions are useful for understanding what actually changed.
+	 * - The raw css is included as it's useful for updating the test case's expected CSS.
 	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
+	 * Inspired by:
+	 * https://stackoverflow.com/questions/6832263/phpunit-assertion-failed-but-i-want-to-continue-testing
+	 *
+	 * @param string $expected The expected CSS.
+	 * @param string $actual   The actual CSS.
 	 */
-	public function test_get_stylesheet_generates_fallback_gap_layout_styles( $layout_definitions ) {
+	private function assertSameCSS( $expected, $actual, $message = '' ) {
+		$pretty_expected = self::pretty_print_css( $expected );
+		$pretty_actual   = self::pretty_print_css( $actual );
+
+		try {
+			$this->assertSame( $pretty_expected, $pretty_actual, $message );
+		} catch ( PHPUnit_Framework_ExpectationFailedException $e ) {
+			// Test failures are thrown as exceptions by PHPUnit.
+			// Catch the exception and re-throw it, but with the
+			// raw css appended.
+			$raw_actual_output =
+				"\n\nIf the change is expected, update the test case to this CSS:\n$actual";
+			throw new PHPUnit_Framework_ExpectationFailedException(
+				"$e$raw_actual_output"
+			);
+		}
+	}
+
+	public function test_get_settings() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
+					'color'       => array(
+						'custom' => false,
 					),
-					'spacing' => array(
-						'blockGap' => null,
+					'layout'      => array(
+						'contentSize' => 'value',
+						'invalid/key' => 'value',
+					),
+					'invalid/key' => 'value',
+					'blocks'      => array(
+						'core/group' => array(
+							'color'       => array(
+								'custom' => false,
+							),
+							'invalid/key' => 'value',
+						),
 					),
 				),
 				'styles'   => array(
-					'spacing' => array(
-						'blockGap' => '1em',
+					'elements' => array(
+						'link' => array(
+							'color' => array(
+								'text' => '#111',
+							),
+						),
 					),
 				),
-			),
-			'default'
+			)
 		);
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
 
-		// Results also include root site blocks styles.
-		$this->assertEquals(
-			'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',
-			$stylesheet
-		);
-	}
+		$actual = $theme_json->get_settings();
 
-	/**
-	 * @dataProvider data_get_layout_definitions
-	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
-	 */
-	public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $layout_definitions ) {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
-					),
-					'spacing' => array(
-						'blockGap' => null,
+		$expected = array(
+			'color'  => array(
+				'custom' => false,
+			),
+			'layout' => array(
+				'contentSize' => 'value',
+			),
+			'blocks' => array(
+				'core/group' => array(
+					'color' => array(
+						'custom' => false,
 					),
 				),
 			),
-			'default'
 		);
-		$stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
 
-		// Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
-		$this->assertEquals(
-			':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}',
-			$stylesheet
-		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
 	}
 
-	/**
-	 * @dataProvider data_get_layout_definitions
-	 *
-	 * @param array $layout_definitions Layout definitions as stored in core theme.json.
-	 */
-	public function test_get_stylesheet_skips_layout_styles( $layout_definitions ) {
-		add_theme_support( 'disable-layout-styles' );
-		$theme_json = new WP_Theme_JSON_Gutenberg(
+	public function test_get_settings_presets_are_keyed_by_origin() {
+		$default_origin = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
-					'layout'  => array(
-						'definitions' => $layout_definitions,
+					'color'       => array(
+						'palette' => array(
+							array(
+								'slug'  => 'white',
+								'color' => 'white',
+							),
+						),
 					),
-					'spacing' => array(
-						'blockGap' => null,
+					'invalid/key' => 'value',
+					'blocks'      => array(
+						'core/group' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'white',
+										'color' => 'white',
+									),
+								),
+							),
+						),
 					),
 				),
 			),
 			'default'
 		);
-		$stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
-		remove_theme_support( 'disable-layout-styles' );
-
-		// All Layout styles should be skipped.
-		$this->assertEquals(
-			'',
-			$stylesheet
-		);
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array
-	 */
-	public function data_get_layout_definitions() {
-		return array(
-			'layout definitions' => array(
-				array(
-					'default' => array(
-						'name'          => 'default',
-						'slug'          => 'flow',
-						'className'     => 'is-layout-flow',
-						'baseStyles'    => array(
-							array(
-								'selector' => ' > .alignleft',
-								'rules'    => array(
-									'float'               => 'left',
-									'margin-inline-start' => '0',
-									'margin-inline-end'   => '2em',
-								),
-							),
+		$no_origin      = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'       => array(
+						'palette' => array(
 							array(
-								'selector' => ' > .alignright',
-								'rules'    => array(
-									'float'               => 'right',
-									'margin-inline-start' => '2em',
-									'margin-inline-end'   => '0',
-								),
+								'slug'  => 'black',
+								'color' => 'black',
 							),
-							array(
-								'selector' => ' > .aligncenter',
-								'rules'    => array(
-									'margin-left'  => 'auto !important',
-									'margin-right' => 'auto !important',
+						),
+					),
+					'invalid/key' => 'value',
+					'blocks'      => array(
+						'core/group' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'black',
+										'color' => 'black',
+									),
 								),
 							),
 						),
-						'spacingStyles' => array(
+					),
+				),
+			)
+		);
+
+		$actual_default   = $default_origin->get_raw_data();
+		$actual_no_origin = $no_origin->get_raw_data();
+
+		$expected_default   = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'  => array(
+					'palette' => array(
+						'default' => array(
 							array(
-								'selector' => ' > *',
-								'rules'    => array(
-									'margin-block-start' => '0',
-									'margin-block-end'   => '0',
-								),
+								'slug'  => 'white',
+								'color' => 'white',
 							),
-							array(
-								'selector' => ' > * + *',
-								'rules'    => array(
-									'margin-block-start' => null,
-									'margin-block-end'   => '0',
+						),
+					),
+				),
+				'blocks' => array(
+					'core/group' => array(
+						'color' => array(
+							'palette' => array(
+								'default' => array(
+									array(
+										'slug'  => 'white',
+										'color' => 'white',
+									),
 								),
 							),
 						),
 					),
-					'flex'    => array(
-						'name'          => 'flex',
-						'slug'          => 'flex',
-						'className'     => 'is-layout-flex',
-						'displayMode'   => 'flex',
-						'baseStyles'    => array(
+				),
+			),
+		);
+		$expected_no_origin = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'  => array(
+					'palette' => array(
+						'theme' => array(
 							array(
-								'selector' => '',
-								'rules'    => array(
-									'flex-wrap'   => 'wrap',
-									'align-items' => 'center',
-								),
+								'slug'  => 'black',
+								'color' => 'black',
 							),
 						),
-						'spacingStyles' => array(
-							array(
-								'selector' => '',
-								'rules'    => array(
-									'gap' => null,
+					),
+				),
+				'blocks' => array(
+					'core/group' => array(
+						'color' => array(
+							'palette' => array(
+								'theme' => array(
+									array(
+										'slug'  => 'black',
+										'color' => 'black',
+									),
 								),
 							),
 						),
@@ -302,63 +267,255 @@ public function data_get_layout_definitions() {
 				),
 			),
 		);
+
+		$this->assertEqualSetsWithIndex( $expected_default, $actual_default );
+		$this->assertEqualSetsWithIndex( $expected_no_origin, $actual_no_origin );
 	}
 
-	public function test_get_stylesheet() {
+	public function test_get_settings_appearance_true_opts_in() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
-					'color'      => array(
-						'text'    => 'value',
-						'palette' => array(
-							array(
-								'slug'  => 'grey',
-								'color' => 'grey',
+					'appearanceTools' => true,
+					'spacing'         => array(
+						'blockGap' => false, // This should override appearanceTools.
+					),
+					'blocks'          => array(
+						'core/paragraph' => array(
+							'typography' => array(
+								'lineHeight' => false,
 							),
 						),
-					),
-					'typography' => array(
-						'fontFamilies' => array(
-							array(
-								'slug'       => 'small',
-								'fontFamily' => '14px',
+						'core/group'     => array(
+							'appearanceTools' => true,
+							'typography'      => array(
+								'lineHeight' => false, // This should override appearanceTools.
 							),
-							array(
-								'slug'       => 'big',
-								'fontFamily' => '41px',
+							'spacing'         => array(
+								'blockGap' => null,
 							),
 						),
 					),
-					'misc'       => 'value',
-					'blocks'     => array(
-						'core/group' => array(
-							'custom' => array(
-								'base-font'   => 16,
-								'line-height' => array(
-									'small'  => 1.2,
-									'medium' => 1.4,
-									'large'  => 1.8,
-								),
-							),
-						),
+				),
+			)
+		);
+
+		$actual   = $theme_json->get_settings();
+		$expected = array(
+			'background' => array(
+				'backgroundImage' => true,
+				'backgroundSize'  => true,
+			),
+			'border'     => array(
+				'width'  => true,
+				'style'  => true,
+				'radius' => true,
+				'color'  => true,
+			),
+			'color'      => array(
+				'link'    => true,
+				'heading' => true,
+				'button'  => true,
+				'caption' => true,
+			),
+			'dimensions' => array(
+				'aspectRatio' => true,
+				'minHeight'   => true,
+			),
+			'position'   => array(
+				'sticky' => true,
+				'fixed'  => true,
+			),
+			'spacing'    => array(
+				'blockGap' => false,
+				'margin'   => true,
+				'padding'  => true,
+			),
+			'typography' => array(
+				'lineHeight' => true,
+			),
+			'blocks'     => array(
+				'core/paragraph' => array(
+					'typography' => array(
+						'lineHeight' => false,
 					),
 				),
-				'styles'   => array(
-					'color'    => array(
+				'core/group'     => array(
+					'background' => array(
+						'backgroundImage' => true,
+						'backgroundSize'  => true,
+					),
+					'border'     => array(
+						'width'  => true,
+						'style'  => true,
+						'radius' => true,
+						'color'  => true,
+					),
+					'color'      => array(
+						'link'    => true,
+						'heading' => true,
+						'button'  => true,
+						'caption' => true,
+					),
+					'dimensions' => array(
+						'aspectRatio' => true,
+						'minHeight'   => true,
+					),
+					'position'   => array(
+						'sticky' => true,
+						'fixed'  => true,
+					),
+					'spacing'    => array(
+						'blockGap' => false,
+						'margin'   => true,
+						'padding'  => true,
+					),
+					'typography' => array(
+						'lineHeight' => false,
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_settings_appearance_false_does_not_opt_in() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'appearanceTools' => false,
+					'border'          => array(
+						'width' => true,
+					),
+					'blocks'          => array(
+						'core/paragraph' => array(
+							'typography' => array(
+								'lineHeight' => false,
+							),
+						),
+						'core/group'     => array(
+							'typography' => array(
+								'lineHeight' => false,
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$actual   = $theme_json->get_settings();
+		$expected = array(
+			'appearanceTools' => false,
+			'border'          => array(
+				'width' => true,
+			),
+			'blocks'          => array(
+				'core/paragraph' => array(
+					'typography' => array(
+						'lineHeight' => false,
+					),
+				),
+				'core/group'     => array(
+					'typography' => array(
+						'lineHeight' => false,
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_stylesheet() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'text'      => 'value',
+						'palette'   => array(
+							array(
+								'slug'  => 'grey',
+								'color' => 'grey',
+							),
+						),
+						'gradients' => array(
+							array(
+								'gradient' => 'linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%)',
+								'name'     => 'Custom gradient',
+								'slug'     => 'custom-gradient',
+							),
+						),
+						'duotone'   => array(
+							array(
+								'colors' => array( '#333333', '#aaaaaa' ),
+								'name'   => 'Custom Duotone',
+								'slug'   => 'custom-duotone',
+							),
+						),
+					),
+					'typography' => array(
+						'fontFamilies' => array(
+							array(
+								'name'       => 'Arial',
+								'slug'       => 'arial',
+								'fontFamily' => 'Arial, serif',
+							),
+						),
+						'fontSizes'    => array(
+							array(
+								'slug' => 'small',
+								'size' => '14px',
+							),
+							array(
+								'slug' => 'big',
+								'size' => '41px',
+							),
+						),
+					),
+					'misc'       => 'value',
+					'blocks'     => array(
+						'core/group' => array(
+							'custom' => array(
+								'base-font'   => 16,
+								'line-height' => array(
+									'small'  => 1.2,
+									'medium' => 1.4,
+									'large'  => 1.8,
+								),
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'color'    => array(
 						'text' => 'var:preset|color|grey',
 					),
 					'misc'     => 'value',
 					'elements' => array(
-						'link' => array(
+						'link'   => array(
 							'color' => array(
 								'text'       => '#111',
 								'background' => '#333',
 							),
 						),
+						'button' => array(
+							'shadow' => '10px 10px 5px 0px rgba(0,0,0,0.66)',
+						),
 					),
 					'blocks'   => array(
-						'core/group'     => array(
+						'core/cover'        => array(
+							'dimensions' => array(
+								'aspectRatio' => '16/9',
+							),
+						),
+						'core/group'        => array(
+							'color'      => array(
+								'gradient' => 'var:preset|gradient|custom-gradient',
+							),
 							'border'     => array(
 								'radius' => '10px',
 							),
@@ -376,7 +533,7 @@ public function test_get_stylesheet() {
 								'padding' => '24px',
 							),
 						),
-						'core/heading'   => array(
+						'core/heading'      => array(
 							'color'    => array(
 								'text' => '#123456',
 							),
@@ -392,7 +549,12 @@ public function test_get_stylesheet() {
 								),
 							),
 						),
-						'core/post-date' => array(
+						'core/media-text'   => array(
+							'typography' => array(
+								'textAlign' => 'center',
+							),
+						),
+						'core/post-date'    => array(
 							'color'    => array(
 								'text' => '#123456',
 							),
@@ -405,7 +567,12 @@ public function test_get_stylesheet() {
 								),
 							),
 						),
-						'core/image'     => array(
+						'core/post-excerpt' => array(
+							'typography' => array(
+								'textColumns' => 2,
+							),
+						),
+						'core/image'        => array(
 							'border'  => array(
 								'radius' => array(
 									'topLeft'     => '10px',
@@ -417,49 +584,58 @@ public function test_get_stylesheet() {
 									'bottom' => '30px',
 								),
 							),
+							'filter'  => array(
+								'duotone' => 'var:preset|duotone|custom-duotone',
+							),
 						),
 					),
+					'spacing'  => array(
+						'blockGap' => '24px',
+					),
 				),
 				'misc'     => 'value',
 			)
 		);
 
-		$variables = 'body{--wp--preset--color--grey: grey;--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
-		$styles    = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;min-height: 50vh;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
-		$presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';
+		$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
+		$styles    = static::$base_styles . 'body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
+		$presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-big-font-size{font-size: var(--wp--preset--font-size--big) !important;}.has-arial-font-family{font-family: var(--wp--preset--font-family--arial) !important;}';
 		$all       = $variables . $styles . $presets;
 
-		$this->assertEquals( $all, $theme_json->get_stylesheet() );
-		$this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
-		$this->assertEquals( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
-		$this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+		$this->assertSameCSS( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+		$this->assertSameCSS( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$this->assertSameCSS( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+		$this->assertSameCSS( $all, $theme_json->get_stylesheet() );
 	}
 
-	public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() {
+	public function test_get_styles_for_block_support_for_shorthand_and_longhand_values() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
-					'elements' => array(
-						'link' => array(
-							'color'  => array(
-								'text'       => 'green',
-								'background' => 'red',
+					'blocks' => array(
+						'core/group' => array(
+							'border'  => array(
+								'radius' => '10px',
 							),
-							':hover' => array(
-								'color'      => array(
-									'text'       => 'red',
-									'background' => 'green',
-								),
-								'typography' => array(
-									'textTransform' => 'uppercase',
-									'fontSize'      => '10em',
+							'spacing' => array(
+								'padding' => '24px',
+								'margin'  => '1em',
+							),
+						),
+						'core/image' => array(
+							'border'  => array(
+								'radius' => array(
+									'topLeft'     => '10px',
+									'bottomRight' => '1em',
 								),
 							),
-							':focus' => array(
-								'color' => array(
-									'text'       => 'yellow',
-									'background' => 'black',
+							'spacing' => array(
+								'padding' => array(
+									'top' => '15px',
+								),
+								'margin'  => array(
+									'bottom' => '30px',
 								),
 							),
 						),
@@ -468,38 +644,47 @@ public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors
 			)
 		);
 
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';
-
-		$expected = $base_styles . $element_styles;
+		$group_node = array(
+			'name'      => 'core/group',
+			'path'      => array( 'styles', 'blocks', 'core/group' ),
+			'selector'  => '.wp-block-group',
+			'selectors' => array(
+				'root' => '.wp-block-group',
+			),
+		);
+		$image_node = array(
+			'name'      => 'core/image',
+			'path'      => array( 'styles', 'blocks', 'core/image' ),
+			'selector'  => '.wp-block-image',
+			'selectors' => array(
+				'root'   => '.wp-block-image',
+				'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder',
+			),
+		);
 
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$group_styles = ':root :where(.wp-block-group){border-radius: 10px;margin: 1em;padding: 24px;}';
+		$image_styles = ':root :where(.wp-block-image){margin-bottom: 30px;padding-top: 15px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';
+		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ) );
+		$this->assertSameCSS( $image_styles, $theme_json->get_styles_for_block( $image_node ) );
 	}
 
-	public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given_property() {
+	public function test_get_stylesheet_skips_disabled_protected_properties() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'elements' => array(
-						'link' => array(
-							':hover' => array(
-								'color'      => array(
-									'text'       => 'red',
-									'background' => 'green',
-								),
-								'typography' => array(
-									'textTransform' => 'uppercase',
-									'fontSize'      => '10em',
-								),
-							),
-							':focus' => array(
-								'color' => array(
-									'text'       => 'yellow',
-									'background' => 'black',
-								),
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'blockGap' => null,
+					),
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '1em',
+					),
+					'blocks'  => array(
+						'core/columns' => array(
+							'spacing' => array(
+								'blockGap' => '24px',
 							),
 						),
 					),
@@ -507,76 +692,46 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given
 			)
 		);
 
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = 'a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';
-
-		$expected = $base_styles . $element_styles;
-
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$expected = static::$base_styles . ':where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
 
-	public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {
+	public function test_get_stylesheet_renders_enabled_protected_properties() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'elements' => array(
-						'h4' => array(
-							'color'  => array(
-								'text'       => 'green',
-								'background' => 'red',
-							),
-							':hover' => array(
-								'color' => array(
-									'text'       => 'red',
-									'background' => 'green',
-								),
-							),
-							':focus' => array(
-								'color' => array(
-									'text'       => 'yellow',
-									'background' => 'black',
-								),
-							),
-						),
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'blockGap' => true,
+					),
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '1em',
 					),
 				),
 			)
 		);
 
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = 'h4{background-color: red;color: green;}';
-
-		$expected = $base_styles . $element_styles;
-
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1em;}:root :where(.is-layout-grid){gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet() );
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
 
-	public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
+	public function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'elements' => array(
-						'link' => array(
-							'color'     => array(
-								'text'       => 'green',
-								'background' => 'red',
-							),
-							':hover'    => array(
-								'color' => array(
-									'text'       => 'red',
-									'background' => 'green',
-								),
-							),
-							':levitate' => array(
-								'color' => array(
-									'text'       => 'yellow',
-									'background' => 'black',
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'blocks' => array(
+						'core/heading' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'white',
+										'color' => '#fff',
+									),
 								),
 							),
 						),
@@ -585,94 +740,35 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
 			)
 		);
 
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}';
-
-		$expected = $base_styles . $element_styles;
-
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
-		$this->assertStringNotContainsString( 'a:levitate{', $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$this->assertSameCSS(
+			'.wp-block-heading.has-white-color{color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
+			$theme_json->get_stylesheet( array( 'presets' ) )
+		);
 	}
 
-	public function test_get_stylesheet_handles_priority_of_elements_vs_block_elements_pseudo_selectors() {
+	public function test_get_stylesheet_preset_rules_come_after_block_rules() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
 					'blocks' => array(
 						'core/group' => array(
-							'elements' => array(
-								'link' => array(
-									'color'  => array(
-										'text'       => 'green',
-										'background' => 'red',
-									),
-									':hover' => array(
-										'color'      => array(
-											'text'       => 'red',
-											'background' => 'green',
-										),
-										'typography' => array(
-											'textTransform' => 'uppercase',
-											'fontSize' => '10em',
-										),
-									),
-									':focus' => array(
-										'color' => array(
-											'text'       => 'yellow',
-											'background' => 'black',
-										),
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'grey',
+										'color' => 'grey',
 									),
 								),
 							),
 						),
 					),
 				),
-			)
-		);
-
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color: red;color: green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';
-
-		$expected = $base_styles . $element_styles;
-
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
-	}
-
-	public function test_get_stylesheet_handles_whitelisted_block_level_element_pseudo_selectors() {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'elements' => array(
-						'link' => array(
-							'color'  => array(
-								'text'       => 'green',
-								'background' => 'red',
-							),
-							':hover' => array(
-								'color' => array(
-									'text'       => 'red',
-									'background' => 'green',
-								),
-							),
-						),
-					),
-					'blocks'   => array(
+				'styles'   => array(
+					'blocks' => array(
 						'core/group' => array(
-							'elements' => array(
-								'link' => array(
-									':hover' => array(
-										'color' => array(
-											'text'       => 'yellow',
-											'background' => 'black',
-										),
-									),
-								),
+							'color' => array(
+								'text' => 'red',
 							),
 						),
 					),
@@ -680,156 +776,140 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu
 			)
 		);
 
-		$base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-		$element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: black;color: yellow;}';
+		$styles    = ':root :where(.wp-block-group){color: red;}';
+		$presets   = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
+		$variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
 
-		$expected = $base_styles . $element_styles;
+		$all = $variables . $styles . $presets;
 
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
-		$this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+		$this->assertSameCSS( $all, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $styles, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertSameCSS( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+		$this->assertSameCSS( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
 	}
 
-	/**
-	 * This test relies on a block having already been registered prior to
-	 * theme.json generating block metadata. Until a core block, such as Image,
-	 * opts into feature level selectors, we need to register a test block.
-	 * This is achieved via `tests_add_filter()` in Gutenberg's phpunit
-	 * bootstrap. After a core block adopts feature level selectors we could
-	 * remove that filter and instead use the core block for the following test.
-	 */
-	public function test_get_stylesheet_with_block_support_feature_level_selectors() {
+	public function test_get_stylesheet_generates_proper_classes_and_css_vars_from_slugs() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
-					'border'     => array(
-						'radius' => true,
-					),
-					'color'      => array(
-						'custom'  => false,
+					'color'  => array(
 						'palette' => array(
 							array(
-								'slug'  => 'green',
-								'color' => 'green',
-							),
-						),
-					),
-					'spacing'    => array(
-						'padding' => true,
-					),
-					'typography' => array(
-						'fontSize' => true,
-					),
-				),
-				'styles'   => array(
-					'blocks' => array(
-						'test/test' => array(
-							'border'     => array(
-								'radius' => '9999px',
+								'slug'  => 'grey',
+								'color' => 'grey',
 							),
-							'color'      => array(
-								'text' => 'green',
+							array(
+								'slug'  => 'dark grey',
+								'color' => 'grey',
 							),
-							'spacing'    => array(
-								'padding' => '20px',
+							array(
+								'slug'  => 'light-grey',
+								'color' => 'grey',
 							),
-							'typography' => array(
-								'fontSize' => '3em',
+							array(
+								'slug'  => 'white2black',
+								'color' => 'grey',
 							),
 						),
 					),
+					'custom' => array(
+						'white2black' => 'value',
+					),
 				),
 			)
 		);
 
-		$base_styles   = 'body{--wp--preset--color--green: green;}body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-		$block_styles  = '.wp-block-test, .wp-block-test__wrapper{color: green;}.wp-block-test .inner, .wp-block-test__wrapper .inner{border-radius: 9999px;padding: 20px;}.wp-block-test .sub-heading, .wp-block-test__wrapper .sub-heading{font-size: 3em;}';
-		$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
-		$expected      = $base_styles . $block_styles . $preset_styles;
-
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
+		$this->assertSameCSS(
+			'.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}',
+			$theme_json->get_stylesheet( array( 'presets' ) )
+		);
+		$this->assertSameCSS(
+			':root{--wp--preset--color--grey: grey;--wp--preset--color--dark-grey: grey;--wp--preset--color--light-grey: grey;--wp--preset--color--white-2-black: grey;--wp--custom--white-2-black: value;}',
+			$theme_json->get_stylesheet( array( 'variables' ) )
+		);
 	}
 
-	public function test_remove_invalid_element_pseudo_selectors() {
-		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+	public function test_get_styles_for_block_handles_whitelisted_element_pseudo_selectors() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
 				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
 					'elements' => array(
 						'link' => array(
 							'color'  => array(
-								'text'       => 'hotpink',
-								'background' => 'yellow',
+								'text'       => 'green',
+								'background' => 'red',
 							),
 							':hover' => array(
-								'color' => array(
+								'color'      => array(
 									'text'       => 'red',
-									'background' => 'blue',
+									'background' => 'green',
+								),
+								'typography' => array(
+									'textTransform' => 'uppercase',
+									'fontSize'      => '10em',
 								),
 							),
-						),
-					),
-				),
-			),
-			true
-		);
-
-		$expected = array(
-			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-			'styles'  => array(
-				'elements' => array(
-					'link' => array(
-						'color'  => array(
-							'text'       => 'hotpink',
-							'background' => 'yellow',
-						),
-						':hover' => array(
-							'color' => array(
-								'text'       => 'red',
-								'background' => 'blue',
+							':focus' => array(
+								'color' => array(
+									'text'       => 'yellow',
+									'background' => 'black',
+								),
 							),
 						),
 					),
 				),
-			),
+			)
 		);
 
-		$this->assertEqualSetsWithIndex( $expected, $actual );
-	}
-
-	public function test_get_element_class_name_button() {
-		$expected = 'wp-element-button';
-		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
-
-		$this->assertEquals( $expected, $actual );
-	}
+		$link_node  = array(
+			'path'     => array( 'styles', 'elements', 'link' ),
+			'selector' => 'a:where(:not(.wp-element-button))',
+		);
+		$hover_node = array(
+			'path'     => array( 'styles', 'elements', 'link' ),
+			'selector' => 'a:where(:not(.wp-element-button)):hover',
+		);
+		$focus_node = array(
+			'path'     => array( 'styles', 'elements', 'link' ),
+			'selector' => 'a:where(:not(.wp-element-button)):focus',
+		);
 
-	public function test_get_element_class_name_invalid() {
-		$expected = '';
-		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'unknown-element' );
+		$link_style  = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}';
+		$hover_style = ':root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}';
+		$focus_style = ':root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
 
-		$this->assertEquals( $expected, $actual );
+		$this->assertSameCSS( $link_style, $theme_json->get_styles_for_block( $link_node ) );
+		$this->assertSameCSS( $hover_style, $theme_json->get_styles_for_block( $hover_node ) );
+		$this->assertSameCSS( $focus_style, $theme_json->get_styles_for_block( $focus_node ) );
 	}
 
 	/**
-	 * Testing that dynamic properties in theme.json return the value they reference, e.g.
-	 * array( 'ref' => 'styles.color.background' ) => "#ffffff".
+	 * Tests that if an element has nothing but pseudo selector styles, they are still output by get_stylesheet.
 	 */
-	public function test_get_property_value_valid() {
+	public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given_property() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => 2,
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
-					'color'    => array(
-						'background' => '#ffffff',
-						'text'       => '#000000',
-					),
 					'elements' => array(
-						'button' => array(
-							'color' => array(
-								'background' => array( 'ref' => 'styles.color.text' ),
-								'text'       => array( 'ref' => 'styles.color.background' ),
+						'link' => array(
+							':hover' => array(
+								'color'      => array(
+									'text'       => 'red',
+									'background' => 'green',
+								),
+								'typography' => array(
+									'textTransform' => 'uppercase',
+									'fontSize'      => '10em',
+								),
+							),
+							':focus' => array(
+								'color' => array(
+									'text'       => 'yellow',
+									'background' => 'black',
+								),
 							),
 						),
 					),
@@ -837,31 +917,32 @@ public function test_get_property_value_valid() {
 			)
 		);
 
-		$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;color: #000000;}.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
+		$expected = ':root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
-	/**
-	 * Testing that dynamic properties in theme.json that
-	 * refer to other dynamic properties in a loop
-	 * then they should be left untouched.
-	 *
-	 * @expectedIncorrectUsage get_property_value
-	 */
-	public function test_get_property_value_loop() {
+	public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => 2,
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
-					'color'    => array(
-						'background' => '#ffffff',
-						'text'       => array( 'ref' => 'styles.elements.button.color.background' ),
-					),
 					'elements' => array(
-						'button' => array(
-							'color' => array(
-								'background' => array( 'ref' => 'styles.color.text' ),
-								'text'       => array( 'ref' => 'styles.color.background' ),
+						'h4' => array(
+							'color'  => array(
+								'text'       => 'green',
+								'background' => 'red',
+							),
+							':hover' => array(
+								'color' => array(
+									'text'       => 'red',
+									'background' => 'green',
+								),
+							),
+							':focus' => array(
+								'color' => array(
+									'text'       => 'yellow',
+									'background' => 'black',
+								),
 							),
 						),
 					),
@@ -869,30 +950,32 @@ public function test_get_property_value_loop() {
 			)
 		);
 
-		$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
-		$this->assertSame( $expected, $theme_json->get_stylesheet() );
+		$expected = 'h4{background-color: red;color: green;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
-	/**
-	 * Testing that dynamic properties in theme.json that
-	 * refer to other dynamic properties then they should be left unprocessed.
-	 *
-	 * @expectedIncorrectUsage get_property_value
-	 */
-	public function test_get_property_value_recursion() {
+	public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => 2,
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
-					'color'    => array(
-						'background' => '#ffffff',
-						'text'       => array( 'ref' => 'styles.color.background' ),
-					),
 					'elements' => array(
-						'button' => array(
-							'color' => array(
-								'background' => array( 'ref' => 'styles.color.text' ),
-								'text'       => array( 'ref' => 'styles.color.background' ),
+						'link' => array(
+							'color'     => array(
+								'text'       => 'green',
+								'background' => 'red',
+							),
+							':hover'    => array(
+								'color' => array(
+									'text'       => 'red',
+									'background' => 'green',
+								),
+							),
+							':levitate' => array(
+								'color' => array(
+									'text'       => 'yellow',
+									'background' => 'black',
+								),
 							),
 						),
 					),
@@ -900,557 +983,5121 @@ public function test_get_property_value_recursion() {
 			)
 		);
 
-		$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
+		$expected = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}:root :where(a:where(:not(.wp-element-button)):hover){background-color: green;color: red;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+		$this->assertStringNotContainsString( 'a:levitate{', $theme_json->get_stylesheet( array( 'styles' ) ) );
 	}
 
 	/**
-	 * Testing that dynamic properties in theme.json that
-	 * refer to themselves then they should be left unprocessed.
-	 *
-	 * @expectedIncorrectUsage get_property_value
+	 * Tests that element pseudo selectors are output before block element pseudo selectors, and that whitelisted
+	 * block element pseudo selectors are output correctly.
 	 */
-	public function test_get_property_value_self() {
+	public function test_get_stylesheet_handles_priority_of_elements_vs_block_elements_pseudo_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => 2,
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'styles'  => array(
-					'color' => array(
-						'background' => '#ffffff',
-						'text'       => array( 'ref' => 'styles.color.text' ),
+					'blocks' => array(
+						'core/group' => array(
+							'elements' => array(
+								'link' => array(
+									'color'  => array(
+										'text'       => 'green',
+										'background' => 'red',
+									),
+									':hover' => array(
+										'color'      => array(
+											'text'       => 'red',
+											'background' => 'green',
+										),
+										'typography' => array(
+											'textTransform' => 'uppercase',
+											'fontSize' => '10em',
+										),
+									),
+									':focus' => array(
+										'color' => array(
+											'text'       => 'yellow',
+											'background' => 'black',
+										),
+									),
+								),
+							),
+						),
 					),
 				),
 			)
 		);
 
-		$expected = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;}';
-		$this->assertEquals( $expected, $theme_json->get_stylesheet() );
+		$expected = ':root :where(.wp-block-group a:where(:not(.wp-element-button))){background-color: red;color: green;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){background-color: green;color: red;font-size: 10em;text-transform: uppercase;}:root :where(.wp-block-group a:where(:not(.wp-element-button)):focus){background-color: black;color: yellow;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
 	/**
-	 * Tests generating the spacing presets array based on the spacing scale provided.
-	 *
-	 * @dataProvider data_generate_spacing_scale_fixtures
+	 * This test checks that feature selectors defined as `__experimentalSelector` inside
+	 * the `supports` property are correctly output in the stylesheet.
 	 */
-	public function test_set_spacing_sizes( $spacing_scale, $expected_output ) {
+	public function test_get_stylesheet_with_deprecated_feature_level_selectors() {
 		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version'  => 2,
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
 				'settings' => array(
-					'spacing' => array(
-						'spacingScale' => $spacing_scale,
+					'color'      => array(
+						'custom'  => false,
+						'palette' => array(
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+							),
+						),
+					),
+					'typography' => array(
+						'fontSize' => true,
+					),
+				),
+				'styles'   => array(
+					'blocks' => array(
+						'core/calendar' => array(
+							'color'      => array(
+								'text' => 'green',
+							),
+							'typography' => array(
+								'fontSize' => '3em',
+							),
+						),
 					),
 				),
 			)
 		);
 
-		$theme_json->set_spacing_sizes();
-		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
+		$base_styles   = ':root{--wp--preset--color--green: green;}';
+		$block_styles  = ':root :where(.wp-block-calendar){font-size: 3em;}:root :where(.wp-block-calendar table, .wp-block-calendar th){color: green;}';
+		$preset_styles = '.has-green-color{color: var(--wp--preset--color--green) !important;}.has-green-background-color{background-color: var(--wp--preset--color--green) !important;}.has-green-border-color{border-color: var(--wp--preset--color--green) !important;}';
+		$expected      = $base_styles . $block_styles . $preset_styles;
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
 	}
 
+
 	/**
-	 * Data provider for spacing scale tests.
-	 *
-	 * @return array
+	 * This test checks that feature selectors defined in the stable `selectors`
+	 * property are correctly output in the stylesheet.
 	 */
-	public function data_generate_spacing_scale_fixtures() {
-		return array(
-			'one_step_spacing_scale' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 1,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '50',
-						'size' => '4rem',
+	public function test_get_stylesheet_with_block_json_selectors() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'border' => array(
+						'radius' => true,
 					),
 				),
-			),
-
-			'two_step_spacing_scale_should_add_step_above_medium' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 2,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '50',
-						'size' => '4rem',
-					),
-					array(
-						'name' => '2',
-						'slug' => '60',
-						'size' => '5.5rem',
+				'styles'   => array(
+					'blocks' => array(
+						'core/image' => array(
+							'border' => array(
+								'radius' => '374px',
+							),
+						),
 					),
 				),
-			),
+			)
+		);
 
-			'three_step_spacing_scale_should_add_step_above_and_below_medium' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 3,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '40',
-						'size' => '2.5rem',
+		$expected = ':root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-radius: 374px;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	public function test_get_stylesheet_generates_layout_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'layout'  => array(
+						'contentSize' => '640px',
+						'wideSize'    => '1200px',
 					),
-					array(
-						'name' => '2',
-						'slug' => '50',
-						'size' => '4rem',
+					'spacing' => array(
+						'blockGap' => true,
 					),
-					array(
-						'name' => '3',
-						'slug' => '60',
-						'size' => '5.5rem',
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '1em',
 					),
 				),
 			),
+			'default'
+		);
 
-			'even_step_spacing_scale_steps_should_add_extra_step_above_medium' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 4,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '40',
-						'size' => '2.5rem',
-					),
-					array(
-						'name' => '2',
-						'slug' => '50',
-						'size' => '4rem',
+		// Results also include root site blocks styles.
+		$this->assertSameCSS(
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1em; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1em;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1em;}:root :where(.is-layout-grid){gap: 1em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+			$theme_json->get_stylesheet( array( 'styles' ) )
+		);
+	}
+
+	public function test_get_stylesheet_generates_layout_styles_with_spacing_presets() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'layout'  => array(
+						'contentSize' => '640px',
+						'wideSize'    => '1200px',
 					),
-					array(
-						'name' => '3',
-						'slug' => '60',
-						'size' => '5.5rem',
+					'spacing' => array(
+						'blockGap' => true,
 					),
-					array(
-						'name' => '4',
-						'slug' => '70',
-						'size' => '7rem',
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => 'var:preset|spacing|60',
 					),
 				),
 			),
+			'default'
+		);
 
-			'if_bottom_end_will_go_below_zero_should_add_extra_steps_above_medium_instead' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 2.5,
-					'steps'      => 5,
-					'mediumStep' => 5,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '40',
-						'size' => '2.5rem',
-					),
-					array(
-						'name' => '2',
-						'slug' => '50',
-						'size' => '5rem',
-					),
-					array(
-						'name' => '3',
-						'slug' => '60',
-						'size' => '7.5rem',
+		// Results also include root site blocks styles.
+		$this->assertSameCSS(
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: var(--wp--preset--spacing--60); }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:root :where(.is-layout-flex){gap: var(--wp--preset--spacing--60);}:root :where(.is-layout-grid){gap: var(--wp--preset--spacing--60);}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+			$theme_json->get_stylesheet( array( 'styles' ) )
+		);
+	}
+
+	public function test_get_stylesheet_generates_fallback_gap_layout_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'layout'  => array(
+						'contentSize' => '640px',
+						'wideSize'    => '1200px',
 					),
-					array(
-						'name' => '4',
-						'slug' => '70',
-						'size' => '10rem',
+					'spacing' => array(
+						'blockGap' => null,
 					),
-					array(
-						'name' => '5',
-						'slug' => '80',
-						'size' => '12.5rem',
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '1em',
 					),
 				),
 			),
+			'default'
+		);
+		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
 
-			'multiplier_should_correctly_calculate_above_and_below_medium' => array(
-				'spacingScale'    => array(
-					'operator'   => '*',
-					'increment'  => 1.5,
-					'steps'      => 5,
-					'mediumStep' => 1.5,
-					'unit'       => 'rem',
-				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '30',
-						'size' => '0.67rem',
-					),
-					array(
-						'name' => '2',
-						'slug' => '40',
-						'size' => '1rem',
-					),
-					array(
-						'name' => '3',
-						'slug' => '50',
-						'size' => '1.5rem',
-					),
-					array(
-						'name' => '4',
-						'slug' => '60',
-						'size' => '2.25rem',
-					),
-					array(
-						'name' => '5',
-						'slug' => '70',
-						'size' => '3.38rem',
+		// Results also include root site blocks styles.
+		$this->assertSameCSS(
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}',
+			$stylesheet
+		);
+	}
+
+	public function test_get_stylesheet_generates_base_fallback_gap_layout_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'blockGap' => null,
 					),
 				),
 			),
-
-			'increment_<_1_combined_with_*_operator_should_act_as_divisor_to_calculate_above_and_below_medium' => array(
-				'spacingScale'    => array(
-					'operator'   => '*',
-					'increment'  => 0.25,
-					'steps'      => 5,
-					'mediumStep' => 1.5,
-					'unit'       => 'rem',
+			'default'
+		);
+		$stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
+
+		// Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.
+		$this->assertSameCSS(
+			':where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}',
+			$stylesheet
+		);
+	}
+
+	public function test_get_stylesheet_skips_layout_styles() {
+		add_theme_support( 'disable-layout-styles' );
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'blockGap' => null,
+					),
 				),
-				'expected_output' => array(
-					array(
-						'name' => '1',
-						'slug' => '30',
-						'size' => '0.09rem',
+			),
+			'default'
+		);
+		$stylesheet = $theme_json->get_stylesheet( array( 'base-layout-styles' ) );
+		remove_theme_support( 'disable-layout-styles' );
+
+		// All Layout styles should be skipped.
+		$this->assertSameCSS(
+			'',
+			$stylesheet
+		);
+	}
+
+	public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'layout'  => array(
+						'contentSize' => '640px',
+						'wideSize'    => '1200px',
 					),
-					array(
-						'name' => '2',
-						'slug' => '40',
-						'size' => '0.38rem',
+					'spacing' => array(
+						'blockGap' => true,
 					),
-					array(
-						'name' => '3',
-						'slug' => '50',
-						'size' => '1.5rem',
+				),
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '1rem',
 					),
-					array(
-						'name' => '4',
-						'slug' => '60',
-						'size' => '6rem',
+					'blocks'  => array(
+						'core/post-content' => array(
+							'color' => array(
+								'text' => 'gray', // This value should not render block layout styles.
+							),
+						),
+						'core/social-links' => array(
+							'spacing' => array(
+								'blockGap' => '0', // This value should render block layout gap as zero.
+							),
+						),
+						'core/buttons'      => array(
+							'spacing' => array(
+								'blockGap' => 0, // This value should render block layout gap as zero.
+							),
+						),
+						'core/columns'      => array(
+							'spacing' => array(
+								'blockGap' => false, // This value should be ignored. The block will use the global layout value.
+							),
+						),
 					),
-					array(
-						'name' => '5',
-						'slug' => '70',
-						'size' => '24rem',
+				),
+			),
+			'default'
+		);
+
+		$this->assertSameCSS(
+			':root { --wp--style--global--content-size: 640px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1rem;}:root :where(.is-layout-grid){gap: 1rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(.wp-block-post-content){color: gray;}:root :where(.wp-block-social-links-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.wp-block-social-links-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-social-links-is-layout-flex){gap: 0;}:root :where(.wp-block-social-links-is-layout-grid){gap: 0;}:root :where(.wp-block-buttons-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.wp-block-buttons-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-flow) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-constrained) > *{margin-block-start: 0;margin-block-end: 0;}:root :where(.wp-block-buttons-is-layout-flex){gap: 0;}:root :where(.wp-block-buttons-is-layout-grid){gap: 0;}',
+			$theme_json->get_stylesheet()
+		);
+	}
+
+	public function test_get_stylesheet_returns_outline_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'elements' => array(
+						'button' => array(
+							'outline' => array(
+								'offset' => '3px',
+								'width'  => '3px',
+								'style'  => 'dashed',
+								'color'  => 'red',
+							),
+							':hover'  => array(
+								'outline' => array(
+									'offset' => '3px',
+									'width'  => '3px',
+									'style'  => 'solid',
+									'color'  => 'blue',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = ':root :where(.wp-element-button, .wp-block-button__link){outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';
+
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	public function test_get_stylesheet_custom_root_selector() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color' => array(
+						'text' => 'teal',
+					),
+				),
+			),
+			'default'
+		);
+
+		// Custom root selector is unrelated to root layout styles so they don't need to be output for this test.
+		$options = array(
+			'root_selector'           => '.custom',
+			'skip_root_layout_styles' => true,
+		);
+		$actual  = $theme_json->get_stylesheet( array( 'styles' ), null, $options );
+
+		$this->assertSameCSS(
+			':root :where(.custom){color: teal;}',
+			$actual
+		);
+	}
+
+	public function test_get_stylesheet_generates_fluid_typography_values() {
+		register_block_type(
+			'test/clamp-me',
+			array(
+				'api_version' => 3,
+			)
+		);
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'typography' => array(
+						'fluid'     => true,
+						'fontSizes' => array(
+							array(
+								'size' => '16px',
+								'slug' => 'pickles',
+								'name' => 'Pickles',
+							),
+							array(
+								'size' => '22px',
+								'slug' => 'toast',
+								'name' => 'Toast',
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'typography' => array(
+						'fontSize' => '1em',
+					),
+					'elements'   => array(
+						'h1' => array(
+							'typography' => array(
+								'fontSize' => '100px',
+							),
+						),
+					),
+					'blocks'     => array(
+						'test/clamp-me' => array(
+							'typography' => array(
+								'fontSize' => '48px',
+							),
+						),
+					),
+				),
+			),
+			'default'
+		);
+
+		unregister_block_type( 'test/clamp-me' );
+
+		$this->assertSameCSS(
+			':root{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}body{font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}h1{font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}:root :where(.wp-block-test-clamp-me){font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}',
+			$theme_json->get_stylesheet( array( 'styles', 'variables', 'presets' ), null, array( 'skip_root_layout_styles' => true ) )
+		);
+	}
+
+	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',
+					),
+				),
+				'settings' => array(
+					'layout' => array(
+						'contentSize' => '800px',
+						'wideSize'    => '1000px',
+					),
+				),
+			)
+		);
+
+		$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',
+				),
+			),
+			'settings' => array(
+				'layout' => array(
+					'contentSize' => '800px',
+					'wideSize'    => '1000px',
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'  => array(
+						'custom'  => false,
+						'palette' => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+							),
+						),
+					),
+					'blocks' => array(
+						'core/paragraph' => array(
+							'color' => array(
+								'custom' => false,
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'typography' => array(
+						'fontSize' => '12',
+					),
+				),
+			)
+		);
+
+		$add_new_block = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'blocks' => array(
+					'core/list' => array(
+						'color' => array(
+							'custom' => false,
+						),
+					),
+				),
+			),
+			'styles'   => array(
+				'blocks' => array(
+					'core/list' => array(
+						'typography' => array(
+							'fontSize' => '12',
+						),
+						'color'      => array(
+							'background' => 'brown',
+						),
+					),
+				),
+			),
+		);
+
+		$add_key_in_settings = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color' => array(
+					'customGradient' => true,
+				),
+			),
+		);
+
+		$update_key_in_settings = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color' => array(
+					'custom' => true,
+				),
+			),
+		);
+
+		$add_styles = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/group' => array(
+						'spacing' => array(
+							'padding' => array(
+								'top' => '12px',
+							),
+						),
 					),
 				),
 			),
 		);
+
+		$add_key_in_styles = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/group' => array(
+						'spacing' => array(
+							'padding' => array(
+								'bottom' => '12px',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$add_invalid_context = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/para' => array(
+						'typography' => array(
+							'lineHeight' => '12',
+						),
+					),
+				),
+			),
+		);
+
+		$update_presets = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'palette'   => array(
+						array(
+							'slug'  => 'blue',
+							'color' => 'blue',
+						),
+					),
+					'gradients' => array(
+						array(
+							'slug'     => 'gradient',
+							'gradient' => 'gradient',
+						),
+					),
+				),
+				'typography' => array(
+					'fontSizes'    => array(
+						array(
+							'slug' => 'fontSize',
+							'size' => 'fontSize',
+						),
+					),
+					'fontFamilies' => array(
+						array(
+							'slug'       => 'fontFamily',
+							'fontFamily' => 'fontFamily',
+						),
+					),
+				),
+			),
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'custom'         => true,
+					'customGradient' => true,
+					'palette'        => array(
+						'theme' => array(
+							array(
+								'slug'  => 'blue',
+								'color' => 'blue',
+							),
+						),
+					),
+					'gradients'      => array(
+						'theme' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+					),
+				),
+				'typography' => array(
+					'fontSizes'    => array(
+						'theme' => array(
+							array(
+								'slug' => 'fontSize',
+								'size' => 'fontSize',
+							),
+						),
+					),
+					'fontFamilies' => array(
+						'theme' => array(
+							array(
+								'slug'       => 'fontFamily',
+								'fontFamily' => 'fontFamily',
+							),
+						),
+					),
+				),
+				'blocks'     => array(
+					'core/paragraph' => array(
+						'color' => array(
+							'custom' => false,
+						),
+					),
+					'core/list'      => array(
+						'color' => array(
+							'custom' => false,
+						),
+					),
+				),
+			),
+			'styles'   => array(
+				'typography' => array(
+					'fontSize' => '12',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'spacing' => array(
+							'padding' => array(
+								'top'    => '12px',
+								'bottom' => '12px',
+							),
+						),
+					),
+					'core/list'  => array(
+						'typography' => array(
+							'fontSize' => '12',
+						),
+						'color'      => array(
+							'background' => 'brown',
+						),
+					),
+				),
+			),
+		);
+
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_new_block ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_settings ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_key_in_settings ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_styles ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_key_in_styles ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $add_invalid_context ) );
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_presets ) );
+		$actual = $theme_json->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_empty_presets() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'duotone'   => array(
+							array(
+								'slug'   => 'value',
+								'colors' => array( 'red', 'green' ),
+							),
+						),
+						'gradients' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+						'palette'   => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+					'spacing'    => array(
+						'units' => array( 'px', 'em' ),
+					),
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$theme_json->merge(
+			new WP_Theme_JSON_Gutenberg(
+				array(
+					'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'settings' => array(
+						'color'      => array(
+							'duotone'   => array(),
+							'gradients' => array(),
+							'palette'   => array(),
+						),
+						'spacing'    => array(
+							'units' => array(),
+						),
+						'typography' => array(
+							'fontSizes' => array(),
+						),
+					),
+				)
+			)
+		);
+
+		$actual   = $theme_json->get_raw_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'duotone'   => array(
+						'theme' => array(),
+					),
+					'gradients' => array(
+						'theme' => array(),
+					),
+					'palette'   => array(
+						'theme' => array(),
+					),
+				),
+				'spacing'    => array(
+					'units' => array(),
+				),
+				'typography' => array(
+					'fontSizes' => array(
+						'theme' => array(),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_null_presets() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'duotone'   => array(
+							array(
+								'slug'   => 'value',
+								'colors' => array( 'red', 'green' ),
+							),
+						),
+						'gradients' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+						'palette'   => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+					'spacing'    => array(
+						'units' => array( 'px', 'em' ),
+					),
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$theme_json->merge(
+			new WP_Theme_JSON_Gutenberg(
+				array(
+					'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'settings' => array(
+						'color'      => array(
+							'custom' => false,
+						),
+						'spacing'    => array(
+							'margin' => false,
+						),
+						'typography' => array(
+							'lineHeight' => false,
+						),
+					),
+				)
+			)
+		);
+
+		$actual   = $theme_json->get_raw_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'custom'    => false,
+					'duotone'   => array(
+						'theme' => array(
+							array(
+								'slug'   => 'value',
+								'colors' => array( 'red', 'green' ),
+							),
+						),
+					),
+					'gradients' => array(
+						'theme' => array(
+							array(
+								'slug'     => 'gradient',
+								'gradient' => 'gradient',
+							),
+						),
+					),
+					'palette'   => array(
+						'theme' => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+							),
+						),
+					),
+				),
+				'spacing'    => array(
+					'margin' => false,
+					'units'  => array( 'px', 'em' ),
+				),
+				'typography' => array(
+					'lineHeight' => false,
+					'fontSizes'  => array(
+						'theme' => array(
+							array(
+								'slug'  => 'size',
+								'value' => 'size',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_color_presets_with_same_slugs_as_default_are_removed() {
+		$defaults = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'  => array(
+						'defaultPalette' => true,
+						'palette'        => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+								'name'  => 'Red',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Green',
+							),
+						),
+					),
+					'blocks' => array(
+						'core/paragraph' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Blue',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+			'default'
+		);
+		$theme    = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'  => array(
+						'palette' => array(
+							array(
+								'slug'  => 'pink',
+								'color' => 'pink',
+								'name'  => 'Pink',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Greenish',
+							),
+						),
+					),
+					'blocks' => array(
+						'core/paragraph' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Bluish',
+									),
+									array(
+										'slug'  => 'yellow',
+										'color' => 'yellow',
+										'name'  => 'Yellow',
+									),
+									array(
+										'slug'  => 'green',
+										'color' => 'green',
+										'name'  => 'Block Green',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'  => array(
+					'palette'        => array(
+						'default' => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+								'name'  => 'Red',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Green',
+							),
+						),
+						'theme'   => array(
+							array(
+								'slug'  => 'pink',
+								'color' => 'pink',
+								'name'  => 'Pink',
+							),
+						),
+					),
+					'defaultPalette' => true,
+				),
+				'blocks' => array(
+					'core/paragraph' => array(
+						'color' => array(
+							'palette' => array(
+								'default' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Blue',
+									),
+								),
+								'theme'   => array(
+									array(
+										'slug'  => 'yellow',
+										'color' => 'yellow',
+										'name'  => 'Yellow',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$defaults->merge( $theme );
+		$actual = $defaults->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_color_presets_with_same_slugs_as_default_are_not_removed_if_defaults_are_disabled() {
+		$defaults = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'  => array(
+						'defaultPalette' => true, // Emulate the defaults from core theme.json.
+						'palette'        => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+								'name'  => 'Red',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Green',
+							),
+						),
+					),
+					'blocks' => array(
+						'core/paragraph' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Blue',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+			'default'
+		);
+		$theme    = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'  => array(
+						'defaultPalette' => false,
+						'palette'        => array(
+							array(
+								'slug'  => 'pink',
+								'color' => 'pink',
+								'name'  => 'Pink',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Greenish',
+							),
+						),
+					),
+					'blocks' => array(
+						'core/paragraph' => array(
+							'color' => array(
+								'palette' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Bluish',
+									),
+									array(
+										'slug'  => 'yellow',
+										'color' => 'yellow',
+										'name'  => 'Yellow',
+									),
+									array(
+										'slug'  => 'green',
+										'color' => 'green',
+										'name'  => 'Block Green',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'  => array(
+					'defaultPalette' => false,
+					'palette'        => array(
+						'default' => array(
+							array(
+								'slug'  => 'red',
+								'color' => 'red',
+								'name'  => 'Red',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Green',
+							),
+						),
+						'theme'   => array(
+							array(
+								'slug'  => 'pink',
+								'color' => 'pink',
+								'name'  => 'Pink',
+							),
+							array(
+								'slug'  => 'green',
+								'color' => 'green',
+								'name'  => 'Greenish',
+							),
+						),
+					),
+				),
+				'blocks' => array(
+					'core/paragraph' => array(
+						'color' => array(
+							'palette' => array(
+								'default' => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Blue',
+									),
+								),
+								'theme'   => array(
+									array(
+										'slug'  => 'blue',
+										'color' => 'blue',
+										'name'  => 'Bluish',
+									),
+									array(
+										'slug'  => 'yellow',
+										'color' => 'yellow',
+										'name'  => 'Yellow',
+									),
+									array(
+										'slug'  => 'green',
+										'color' => 'green',
+										'name'  => 'Block Green',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$defaults->merge( $theme );
+		$actual = $defaults->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_data_presets_use_default_names() {
+		$defaults   = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'name' => 'Small',
+								'slug' => 'small',
+								'size' => '12px',
+							),
+							array(
+								'name' => 'Large',
+								'slug' => 'large',
+								'size' => '20px',
+							),
+						),
+					),
+				),
+			),
+			'default'
+		);
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'slug' => 'small',
+								'size' => '1.1rem',
+							),
+							array(
+								'slug' => 'large',
+								'size' => '1.75rem',
+							),
+							array(
+								'name' => 'Huge',
+								'slug' => 'huge',
+								'size' => '3rem',
+							),
+						),
+					),
+				),
+			),
+			'theme'
+		);
+		$expected   = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'typography' => array(
+					'fontSizes' => array(
+						'default' => array(
+							array(
+								'name' => 'Small',
+								'slug' => 'small',
+								'size' => '12px',
+							),
+							array(
+								'name' => 'Large',
+								'slug' => 'large',
+								'size' => '20px',
+							),
+						),
+						'theme'   => array(
+							array(
+								'slug' => 'small',
+								'size' => '1.1rem',
+								'name' => 'Small',
+							),
+							array(
+								'slug' => 'large',
+								'size' => '1.75rem',
+								'name' => 'Large',
+							),
+							array(
+								'name' => 'Huge',
+								'slug' => 'huge',
+								'size' => '3rem',
+							),
+						),
+					),
+				),
+			),
+		);
+		$defaults->merge( $theme_json );
+		$actual = $defaults->get_raw_data();
+		$this->assertSameSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_merge_incoming_background_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage' => array(
+							'id'     => 'uploaded',
+							'source' => 'file',
+							'url'    => 'http://example.org/quote.png',
+						),
+						'backgroundSize'  => 'cover',
+					),
+					'blocks'     => array(
+						'core/group' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'ref' => 'styles.blocks.core/verse.background.backgroundImage',
+								),
+								'backgroundAttachment' => 'fixed',
+							),
+						),
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'url' => 'http://example.org/quote.png',
+								),
+								'backgroundAttachment' => array(
+									'ref' => 'styles.blocks.core/group.background.backgroundAttachment',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$update_background_image_styles = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'http://example.org/site.png',
+					),
+					'backgroundSize'  => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'url' => 'http://example.org/group.png',
+							),
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$expected                       = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'background' => array(
+					'backgroundImage' => array(
+						'url' => 'http://example.org/site.png',
+					),
+					'backgroundSize'  => 'contain',
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/group.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/quote' => array(
+						'background' => array(
+							'backgroundImage'      => array(
+								'url' => 'http://example.org/quote.png',
+							),
+							'backgroundAttachment' => 'fixed',
+						),
+					),
+					'core/verse' => array(
+						'background' => array(
+							'backgroundImage' => array(
+								'ref' => 'styles.blocks.core/group.background.backgroundImage',
+							),
+						),
+					),
+				),
+			),
+		);
+		$theme_json->merge( new WP_Theme_JSON_Gutenberg( $update_background_image_styles ) );
+		$actual = $theme_json->get_raw_data();
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_insecure_properties_removes_unsafe_styles() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
+						'text'     => 'var:preset|color|dark-red',
+					),
+					'elements' => array(
+						'link' => array(
+							'color' => array(
+								'gradient'   => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
+								'text'       => 'var:preset|color|dark-pink',
+								'background' => 'var:preset|color|dark-red',
+							),
+						),
+					),
+					'blocks'   => array(
+						'core/image'  => array(
+							'filter' => array(
+								'duotone' => 'var:preset|duotone|blue-red',
+							),
+						),
+						'core/cover'  => array(
+							'filter' => array(
+								'duotone' => 'var(--invalid',
+							),
+						),
+						'core/group'  => array(
+							'color'    => array(
+								'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
+								'text'     => 'var:preset|color|dark-gray',
+							),
+							'elements' => array(
+								'link' => array(
+									'color' => array(
+										'gradient' => 'url(\'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHNjcmlwdD5hbGVydCgnb2snKTwvc2NyaXB0PjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZGllbnQnPjxzdG9wIG9mZnNldD0nMTAlJyBzdG9wLWNvbG9yPScjRjAwJy8+PHN0b3Agb2Zmc2V0PSc5MCUnIHN0b3AtY29sb3I9JyNmY2MnLz4gPC9saW5lYXJHcmFkaWVudD48cmVjdCBmaWxsPSd1cmwoI2dyYWRpZW50KScgeD0nMCcgeT0nMCcgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScvPjwvc3ZnPg==\')',
+										'text'     => 'var:preset|color|dark-pink',
+									),
+								),
+							),
+						),
+						'invalid/key' => array(
+							'background' => 'green',
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'color'    => array(
+					'text' => 'var(--wp--preset--color--dark-red)',
+				),
+				'elements' => array(
+					'link' => array(
+						'color' => array(
+							'text'       => 'var(--wp--preset--color--dark-pink)',
+							'background' => 'var(--wp--preset--color--dark-red)',
+						),
+					),
+				),
+				'blocks'   => array(
+					'core/image' => array(
+						'filter' => array(
+							'duotone' => 'var(--wp--preset--duotone--blue-red)',
+						),
+					),
+					'core/group' => array(
+						'color'    => array(
+							'text' => 'var(--wp--preset--color--dark-gray)',
+						),
+						'elements' => array(
+							'link' => array(
+								'color' => array(
+									'text' => 'var(--wp--preset--color--dark-pink)',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_insecure_properties_removes_unsafe_styles_sub_properties() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'border'   => array(
+						'radius' => array(
+							'topLeft'     => '6px',
+							'topRight'    => 'var(--invalid',
+							'bottomRight' => '6px',
+							'bottomLeft'  => '6px',
+						),
+					),
+					'spacing'  => array(
+						'padding' => array(
+							'top'    => '1px',
+							'right'  => '1px',
+							'bottom' => 'var(--invalid',
+							'left'   => '1px',
+						),
+					),
+					'elements' => array(
+						'link' => array(
+							'spacing' => array(
+								'padding' => array(
+									'top'    => '2px',
+									'right'  => '2px',
+									'bottom' => 'var(--invalid',
+									'left'   => '2px',
+								),
+							),
+						),
+					),
+					'blocks'   => array(
+						'core/group' => array(
+							'border'   => array(
+								'radius' => array(
+									'topLeft'     => '5px',
+									'topRight'    => 'var(--invalid',
+									'bottomRight' => '5px',
+									'bottomLeft'  => '5px',
+								),
+							),
+							'spacing'  => array(
+								'padding' => array(
+									'top'    => '3px',
+									'right'  => '3px',
+									'bottom' => 'var(--invalid',
+									'left'   => '3px',
+								),
+							),
+							'elements' => array(
+								'link' => array(
+									'spacing' => array(
+										'padding' => array(
+											'top'    => '4px',
+											'right'  => '4px',
+											'bottom' => 'var(--invalid',
+											'left'   => '4px',
+										),
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+			true
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'border'   => array(
+					'radius' => array(
+						'topLeft'     => '6px',
+						'bottomRight' => '6px',
+						'bottomLeft'  => '6px',
+					),
+				),
+				'spacing'  => array(
+					'padding' => array(
+						'top'   => '1px',
+						'right' => '1px',
+						'left'  => '1px',
+					),
+				),
+				'elements' => array(
+					'link' => array(
+						'spacing' => array(
+							'padding' => array(
+								'top'   => '2px',
+								'right' => '2px',
+								'left'  => '2px',
+							),
+						),
+					),
+				),
+				'blocks'   => array(
+					'core/group' => array(
+						'border'   => array(
+							'radius' => array(
+								'topLeft'     => '5px',
+								'bottomRight' => '5px',
+								'bottomLeft'  => '5px',
+							),
+						),
+						'spacing'  => array(
+							'padding' => array(
+								'top'   => '3px',
+								'right' => '3px',
+								'left'  => '3px',
+							),
+						),
+						'elements' => array(
+							'link' => array(
+								'spacing' => array(
+									'padding' => array(
+										'top'   => '4px',
+										'right' => '4px',
+										'left'  => '4px',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_insecure_properties_removes_non_preset_settings() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'   => array(
+						'custom'  => true,
+						'palette' => array(
+							'custom' => array(
+								array(
+									'name'  => 'Red',
+									'slug'  => 'red',
+									'color' => '#ff0000',
+								),
+								array(
+									'name'  => 'Green',
+									'slug'  => 'green',
+									'color' => '#00ff00',
+								),
+								array(
+									'name'  => 'Blue',
+									'slug'  => 'blue',
+									'color' => '#0000ff',
+								),
+							),
+						),
+					),
+					'spacing' => array(
+						'padding' => false,
+					),
+					'blocks'  => array(
+						'core/group' => array(
+							'color'   => array(
+								'custom'  => true,
+								'palette' => array(
+									'custom' => array(
+										array(
+											'name'  => 'Yellow',
+											'slug'  => 'yellow',
+											'color' => '#ff0000',
+										),
+										array(
+											'name'  => 'Pink',
+											'slug'  => 'pink',
+											'color' => '#00ff00',
+										),
+										array(
+											'name'  => 'Orange',
+											'slug'  => 'orange',
+											'color' => '#0000ff',
+										),
+									),
+								),
+							),
+							'spacing' => array(
+								'padding' => false,
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'  => array(
+					'palette' => array(
+						'custom' => array(
+							array(
+								'name'  => 'Red',
+								'slug'  => 'red',
+								'color' => '#ff0000',
+							),
+							array(
+								'name'  => 'Green',
+								'slug'  => 'green',
+								'color' => '#00ff00',
+							),
+							array(
+								'name'  => 'Blue',
+								'slug'  => 'blue',
+								'color' => '#0000ff',
+							),
+						),
+					),
+				),
+				'blocks' => array(
+					'core/group' => array(
+						'color' => array(
+							'palette' => array(
+								'custom' => array(
+									array(
+										'name'  => 'Yellow',
+										'slug'  => 'yellow',
+										'color' => '#ff0000',
+									),
+									array(
+										'name'  => 'Pink',
+										'slug'  => 'pink',
+										'color' => '#00ff00',
+									),
+									array(
+										'name'  => 'Orange',
+										'slug'  => 'orange',
+										'color' => '#0000ff',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_insecure_properties_removes_unsafe_preset_settings() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'palette' => array(
+							'custom' => array(
+								array(
+									'name'  => 'Red/><b>ok</ok>',
+									'slug'  => 'red',
+									'color' => '#ff0000',
+								),
+								array(
+									'name'  => 'Green',
+									'slug'  => 'a" attr',
+									'color' => '#00ff00',
+								),
+								array(
+									'name'  => 'Blue',
+									'slug'  => 'blue',
+									'color' => 'var(--invalid',
+								),
+								array(
+									'name'  => 'Pink',
+									'slug'  => 'pink',
+									'color' => '#FFC0CB',
+								),
+							),
+						),
+					),
+					'typography' => array(
+						'fontFamilies' => array(
+							'custom' => array(
+								array(
+									'name'       => 'Helvetica Arial/><b>test</b>',
+									'slug'       => 'helvetica-arial',
+									'fontFamily' => 'Helvetica Neue, Helvetica, Arial, sans-serif',
+								),
+								array(
+									'name'       => 'Geneva',
+									'slug'       => 'geneva#asa',
+									'fontFamily' => 'Geneva, Tahoma, Verdana, sans-serif',
+								),
+								array(
+									'name'       => 'Cambria',
+									'slug'       => 'cambria',
+									'fontFamily' => 'Cambria, Georgia, serif',
+								),
+								array(
+									'name'       => 'Helvetica Arial',
+									'slug'       => 'helvetica-arial',
+									'fontFamily' => 'var(--invalid',
+								),
+							),
+						),
+					),
+					'blocks'     => array(
+						'core/group' => array(
+							'color' => array(
+								'palette' => array(
+									'custom' => array(
+										array(
+											'name'  => 'Red/><b>ok</ok>',
+											'slug'  => 'red',
+											'color' => '#ff0000',
+										),
+										array(
+											'name'  => 'Green',
+											'slug'  => 'a" attr',
+											'color' => '#00ff00',
+										),
+										array(
+											'name'  => 'Blue',
+											'slug'  => 'blue',
+											'color' => 'var(--invalid',
+										),
+										array(
+											'name'  => 'Pink',
+											'slug'  => 'pink',
+											'color' => '#FFC0CB',
+										),
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'palette' => array(
+						'custom' => array(
+							array(
+								'name'  => 'Pink',
+								'slug'  => 'pink',
+								'color' => '#FFC0CB',
+							),
+						),
+					),
+				),
+				'typography' => array(
+					'fontFamilies' => array(
+						'custom' => array(
+							array(
+								'name'       => 'Cambria',
+								'slug'       => 'cambria',
+								'fontFamily' => 'Cambria, Georgia, serif',
+							),
+						),
+					),
+				),
+				'blocks'     => array(
+					'core/group' => array(
+						'color' => array(
+							'palette' => array(
+								'custom' => array(
+									array(
+										'name'  => 'Pink',
+										'slug'  => 'pink',
+										'color' => '#FFC0CB',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_insecure_properties_applies_safe_styles() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color' => array(
+						'text' => '#abcabc ', // Trailing space.
+					),
+				),
+			),
+			true
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'color' => array(
+					'text' => '#abcabc ',
+				),
+			),
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	/**
+	 * @covers WP_Theme_JSON_Gutenberg::remove_insecure_properties
+	 */
+	public function test_remove_insecure_properties_should_allow_indirect_properties() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'   => array(
+					'spacing' => array(
+						'blockGap' => '3em',
+					),
+					'blocks'  => array(
+						'core/social-links' => array(
+							'spacing' => array(
+								'blockGap' => array(
+									'left' => '2em',
+									'top'  => '1em',
+								),
+							),
+						),
+					),
+				),
+				'settings' => array(
+					'layout' => array(
+						'contentSize' => '800px',
+						'wideSize'    => '1000px',
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'   => array(
+				'spacing' => array(
+					'blockGap' => '3em',
+				),
+				'blocks'  => array(
+					'core/social-links' => array(
+						'spacing' => array(
+							'blockGap' => array(
+								'left' => '2em',
+								'top'  => '1em',
+							),
+						),
+					),
+				),
+			),
+			'settings' => array(
+				'layout' => array(
+					'contentSize' => '800px',
+					'wideSize'    => '1000px',
+				),
+			),
+		);
+
+		$this->assertSameSetsWithIndex( $expected, $actual );
+	}
+
+
+	public function test_remove_invalid_element_pseudo_selectors() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'elements' => array(
+						'link' => array(
+							'color'  => array(
+								'text'       => 'hotpink',
+								'background' => 'yellow',
+							),
+							':hover' => array(
+								'color' => array(
+									'text'       => 'red',
+									'background' => 'blue',
+								),
+							),
+							':seen'  => array(
+								'color' => array(
+									'background' => 'ivory',
+								),
+							),
+						),
+					),
+				),
+			),
+			true
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'elements' => array(
+					'link' => array(
+						'color'  => array(
+							'text'       => 'hotpink',
+							'background' => 'yellow',
+						),
+						':hover' => array(
+							'color' => array(
+								'text'       => 'red',
+								'background' => 'blue',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_custom_templates() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'         => 1,
+				'customTemplates' => array(
+					array(
+						'name'  => 'page-home',
+						'title' => 'Homepage template',
+					),
+				),
+			)
+		);
+
+		$page_templates = $theme_json->get_custom_templates();
+
+		$this->assertEqualSetsWithIndex(
+			$page_templates,
+			array(
+				'page-home' => array(
+					'title'     => 'Homepage template',
+					'postTypes' => array( 'page' ),
+				),
+			)
+		);
+	}
+
+	public function test_get_template_parts() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'       => 1,
+				'templateParts' => array(
+					array(
+						'name'  => 'small-header',
+						'title' => 'Small Header',
+						'area'  => 'header',
+					),
+				),
+			)
+		);
+
+		$template_parts = $theme_json->get_template_parts();
+
+		$this->assertEqualSetsWithIndex(
+			$template_parts,
+			array(
+				'small-header' => array(
+					'title' => 'Small Header',
+					'area'  => 'header',
+				),
+			)
+		);
+	}
+
+	public function test_get_from_editor_settings() {
+		$input = array(
+			'disableCustomColors'    => true,
+			'disableCustomGradients' => true,
+			'disableCustomFontSizes' => true,
+			'enableCustomLineHeight' => true,
+			'enableCustomUnits'      => true,
+			'colors'                 => array(
+				array(
+					'slug'  => 'color-slug',
+					'name'  => 'Color Name',
+					'color' => 'colorvalue',
+				),
+			),
+			'gradients'              => array(
+				array(
+					'slug'     => 'gradient-slug',
+					'name'     => 'Gradient Name',
+					'gradient' => 'gradientvalue',
+				),
+			),
+			'fontSizes'              => array(
+				array(
+					'slug' => 'size-slug',
+					'name' => 'Size Name',
+					'size' => 'sizevalue',
+				),
+			),
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'custom'         => false,
+					'customGradient' => false,
+					'gradients'      => array(
+						array(
+							'slug'     => 'gradient-slug',
+							'name'     => 'Gradient Name',
+							'gradient' => 'gradientvalue',
+						),
+					),
+					'palette'        => array(
+						array(
+							'slug'  => 'color-slug',
+							'name'  => 'Color Name',
+							'color' => 'colorvalue',
+						),
+					),
+				),
+				'spacing'    => array(
+					'units' => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
+				),
+				'typography' => array(
+					'customFontSize' => false,
+					'lineHeight'     => true,
+					'fontSizes'      => array(
+						array(
+							'slug' => 'size-slug',
+							'name' => 'Size Name',
+							'size' => 'sizevalue',
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $input );
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_editor_settings_no_theme_support() {
+		$input = array(
+			'__unstableEnableFullSiteEditingBlocks' => false,
+			'disableCustomColors'                   => false,
+			'disableCustomFontSizes'                => false,
+			'disableCustomGradients'                => false,
+			'enableCustomLineHeight'                => false,
+			'enableCustomUnits'                     => false,
+			'imageSizes'                            => array(
+				array(
+					'slug' => 'thumbnail',
+					'name' => 'Thumbnail',
+				),
+				array(
+					'slug' => 'medium',
+					'name' => 'Medium',
+				),
+				array(
+					'slug' => 'large',
+					'name' => 'Large',
+				),
+				array(
+					'slug' => 'full',
+					'name' => 'Full Size',
+				),
+			),
+			'isRTL'                                 => false,
+			'maxUploadFileSize'                     => 123,
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color'      => array(
+					'custom'         => true,
+					'customGradient' => true,
+				),
+				'spacing'    => array(
+					'units' => false,
+				),
+				'typography' => array(
+					'customFontSize' => true,
+					'lineHeight'     => false,
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( $input );
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_editor_settings_blank() {
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(),
+		);
+		$actual   = WP_Theme_JSON_Gutenberg::get_from_editor_settings( array() );
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_editor_settings_custom_units_can_be_disabled() {
+		add_theme_support( 'custom-units', array() );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		remove_theme_support( 'custom-units' );
+
+		$expected = array(
+			'units'   => array( array() ),
+			'padding' => false,
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
+	}
+
+	public function test_get_editor_settings_custom_units_can_be_enabled() {
+		add_theme_support( 'custom-units' );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		remove_theme_support( 'custom-units' );
+
+		$expected = array(
+			'units'   => array( 'px', 'em', 'rem', 'vh', 'vw', '%' ),
+			'padding' => false,
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
+	}
+
+	public function test_get_editor_settings_custom_units_can_be_filtered() {
+		add_theme_support( 'custom-units', 'rem', 'em' );
+		$actual = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_classic_theme_supports_block_editor_settings() );
+		remove_theme_support( 'custom-units' );
+
+		$expected = array(
+			'units'   => array( 'rem', 'em' ),
+			'padding' => false,
+		);
+		$this->assertEqualSetsWithIndex( $expected, $actual['settings']['spacing'] );
+	}
+
+	public function test_export_data() {
+		$theme = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color' => array(
+						'palette' => array(
+							array(
+								'slug'  => 'white',
+								'color' => 'white',
+								'label' => 'White',
+							),
+							array(
+								'slug'  => 'black',
+								'color' => 'black',
+								'label' => 'Black',
+							),
+						),
+					),
+				),
+			)
+		);
+		$user  = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color' => array(
+						'palette' => array(
+							array(
+								'slug'  => 'white',
+								'color' => '#fff',
+								'label' => 'User White',
+							),
+							array(
+								'slug'  => 'hotpink',
+								'color' => 'hotpink',
+								'label' => 'hotpink',
+							),
+						),
+					),
+				),
+			),
+			'custom'
+		);
+
+		$theme->merge( $user );
+		$actual   = $theme->get_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color' => array(
+					'palette' => array(
+						array(
+							'slug'  => 'white',
+							'color' => '#fff',
+							'label' => 'User White',
+						),
+						array(
+							'slug'  => 'black',
+							'color' => 'black',
+							'label' => 'Black',
+						),
+						array(
+							'slug'  => 'hotpink',
+							'color' => 'hotpink',
+							'label' => 'hotpink',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_export_data_deals_with_empty_user_data() {
+		$theme = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color' => array(
+						'palette' => array(
+							array(
+								'slug'  => 'white',
+								'color' => 'white',
+								'label' => 'White',
+							),
+							array(
+								'slug'  => 'black',
+								'color' => 'black',
+								'label' => 'Black',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$actual   = $theme->get_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color' => array(
+					'palette' => array(
+						array(
+							'slug'  => 'white',
+							'color' => 'white',
+							'label' => 'White',
+						),
+						array(
+							'slug'  => 'black',
+							'color' => 'black',
+							'label' => 'Black',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_export_data_deals_with_empty_theme_data() {
+		$user = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color' => array(
+						'palette' => array(
+							array(
+								'slug'  => 'white',
+								'color' => '#fff',
+								'label' => 'User White',
+							),
+							array(
+								'slug'  => 'hotpink',
+								'color' => 'hotpink',
+								'label' => 'hotpink',
+							),
+						),
+					),
+				),
+			),
+			'custom'
+		);
+
+		$actual   = $user->get_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'color' => array(
+					'palette' => array(
+						array(
+							'slug'  => 'white',
+							'color' => '#fff',
+							'label' => 'User White',
+						),
+						array(
+							'slug'  => 'hotpink',
+							'color' => 'hotpink',
+							'label' => 'hotpink',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_export_data_deals_with_empty_data() {
+		$theme    = new WP_Theme_JSON_Gutenberg(
+			array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA ),
+			'theme'
+		);
+		$actual   = $theme->get_data();
+		$expected = array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA );
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_export_data_sets_appearance_tools() {
+		$theme = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'appearanceTools' => true,
+					'blocks'          => array(
+						'core/paragraph' => array(
+							'appearanceTools' => true,
+						),
+					),
+				),
+			)
+		);
+
+		$actual   = $theme->get_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'appearanceTools' => true,
+				'blocks'          => array(
+					'core/paragraph' => array(
+						'appearanceTools' => true,
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_export_data_sets_use_root_padding_aware_alignments() {
+		$theme = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'useRootPaddingAwareAlignments' => true,
+					'blocks'                        => array(
+						'core/paragraph' => array(
+							'useRootPaddingAwareAlignments' => true,
+						),
+					),
+				),
+			)
+		);
+
+		$actual   = $theme->get_data();
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'useRootPaddingAwareAlignments' => true,
+				'blocks'                        => array(
+					'core/paragraph' => array(
+						'useRootPaddingAwareAlignments' => true,
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_remove_invalid_font_family_settings() {
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'typography' => array(
+						'fontFamilies' => array(
+							'custom' => array(
+								array(
+									'name'       => 'Open Sans',
+									'slug'       => 'open-sans',
+									'fontFamily' => '"Open Sans", sans-serif</style><script>alert("xss")</script>',
+								),
+								array(
+									'name'       => 'Arial',
+									'slug'       => 'arial',
+									'fontFamily' => 'Arial, serif',
+								),
+							),
+						),
+					),
+				),
+			),
+			true
+		);
+
+		$expected = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'typography' => array(
+					'fontFamilies' => array(
+						'custom' => array(
+							array(
+								'name'       => 'Arial',
+								'slug'       => 'arial',
+								'fontFamily' => 'Arial, serif',
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_get_element_class_name_button() {
+		$expected = 'wp-element-button';
+		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	public function test_get_element_class_name_invalid() {
+		$expected = '';
+		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'unknown-element' );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * Testing that dynamic properties in theme.json return the value they reference,
+	 * e.g. array( 'ref' => 'styles.color.background' ) => "#ffffff".
+	 */
+	public function test_get_property_value_valid() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'background' => '#ffffff',
+						'text'       => '#000000',
+					),
+					'elements' => array(
+						'button' => array(
+							'color' => array(
+								'background' => array( 'ref' => 'styles.color.text' ),
+								'text'       => array( 'ref' => 'styles.color.background' ),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = 'body{background-color: #ffffff;color: #000000;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #000000;color: #ffffff;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	/**
+	 * Tests that get_property_value() static method returns an empty string
+	 * if the path is invalid or the value is null.
+	 *
+	 * Also, tests that PHP 8.1 "passing null to non-nullable" deprecation notice
+	 * is not thrown when passing the value to strncmp() in the method.
+	 *
+	 * The notice that we should not see:
+	 * `Deprecated: strncmp(): Passing null to parameter #1 ($string1) of type string is deprecated`.
+	 *
+	 * @dataProvider data_get_property_value_should_return_string_for_invalid_paths_or_null_values
+	 *
+	 * @covers WP_Theme_JSON_Gutenberg::get_property_value
+	 *
+	 * @param array $styles An array with style definitions.
+	 * @param array $path   Path to the desired properties.
+	 */
+	public function test_get_property_value_should_return_string_for_invalid_paths_or_null_values( $styles, $path ) {
+		$reflection_class = new ReflectionClass( WP_Theme_JSON_Gutenberg::class );
+
+		$get_property_value_method = $reflection_class->getMethod( 'get_property_value' );
+		$get_property_value_method->setAccessible( true );
+		$result = $get_property_value_method->invoke( null, $styles, $path );
+
+		$this->assertSame( '', $result );
+	}
+
+	/**
+	 * Data provider for test_get_property_value_should_return_string_for_invalid_paths_or_null_values().
+	 *
+	 * @return array
+	 */
+	public function data_get_property_value_should_return_string_for_invalid_paths_or_null_values() {
+		return array(
+			'empty string' => array(
+				'styles' => array(),
+				'path'   => array( 'non_existent_path' ),
+			),
+			'null'         => array(
+				'styles' => array( 'some_null_value' => null ),
+				'path'   => array( 'some_null_value' ),
+			),
+		);
+	}
+
+	/**
+	 * Testing that dynamic properties in theme.json that
+	 * refer to other dynamic properties in a loop
+	 * should be left untouched.
+	 *
+	 * @expectedIncorrectUsage get_property_value
+	 */
+	public function test_get_property_value_loop() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'background' => '#ffffff',
+						'text'       => array( 'ref' => 'styles.elements.button.color.background' ),
+					),
+					'elements' => array(
+						'button' => array(
+							'color' => array(
+								'background' => array( 'ref' => 'styles.color.text' ),
+								'text'       => array( 'ref' => 'styles.color.background' ),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = 'body{background-color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	/**
+	 * Testing that dynamic properties in theme.json that
+	 * refer to other dynamic properties
+	 * should be left unprocessed.
+	 *
+	 * @expectedIncorrectUsage get_property_value
+	 */
+	public function test_get_property_value_recursion() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'background' => '#ffffff',
+						'text'       => array( 'ref' => 'styles.color.background' ),
+					),
+					'elements' => array(
+						'button' => array(
+							'color' => array(
+								'background' => array( 'ref' => 'styles.color.text' ),
+								'text'       => array( 'ref' => 'styles.color.background' ),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = 'body{background-color: #ffffff;color: #ffffff;}:root :where(.wp-element-button, .wp-block-button__link){color: #ffffff;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	/**
+	 * Testing that dynamic properties in theme.json that
+	 * refer to themselves should be left unprocessed.
+	 *
+	 * @expectedIncorrectUsage get_property_value
+	 */
+	public function test_get_property_value_self() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color' => array(
+						'background' => '#ffffff',
+						'text'       => array( 'ref' => 'styles.color.text' ),
+					),
+				),
+			)
+		);
+
+		$expected = 'body{background-color: #ffffff;}';
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	public function test_get_styles_for_block_with_padding_aware_alignments() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'   => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '10px',
+							'right'  => '12px',
+							'bottom' => '10px',
+							'left'   => '12px',
+						),
+					),
+				),
+				'settings' => array(
+					'useRootPaddingAwareAlignments' => true,
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array( 'styles' ),
+			'selector' => 'body',
+		);
+
+		$expected    = ':where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}';
+		$root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata );
+		$style_rules = $theme_json->get_styles_for_block( $metadata );
+		$this->assertSameCSS( $expected, $root_rules . $style_rules );
+	}
+
+	public function test_get_styles_for_block_without_padding_aware_alignments() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '10px',
+							'right'  => '12px',
+							'bottom' => '10px',
+							'left'   => '12px',
+						),
+					),
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array( 'styles' ),
+			'selector' => 'body',
+		);
+
+		$expected    = static::$base_styles . 'body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';
+		$root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata );
+		$style_rules = $theme_json->get_styles_for_block( $metadata );
+		$this->assertSameCSS( $expected, $root_rules . $style_rules );
+	}
+
+	public function test_get_styles_with_content_width() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'layout' => array(
+						'contentSize' => '800px',
+						'wideSize'    => '1000px',
+					),
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array( 'settings' ),
+			'selector' => 'body',
+		);
+
+		$expected = ':root { --wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+		$this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata ) );
+	}
+
+	public function test_get_styles_with_appearance_tools() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'appearanceTools' => true,
+				),
+			)
+		);
+
+		$metadata = array(
+			'path'     => array( 'settings' ),
+			'selector' => 'body',
+		);
+
+		$expected = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: ; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1;}:root :where(.is-layout-grid){gap: 1;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}';
+		$this->assertSameCSS( $expected, $theme_json->get_root_layout_rules( WP_Theme_JSON_Gutenberg::ROOT_BLOCK_SELECTOR, $metadata ) );
+	}
+
+	public function test_sanitization() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'spacing' => array(
+						'blockGap' => 'valid value',
+					),
+					'blocks'  => array(
+						'core/group' => array(
+							'spacing' => array(
+								'margin'  => 'valid value',
+								'display' => 'none',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$actual   = $theme_json->get_raw_data();
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'spacing' => array(
+					'blockGap' => 'valid value',
+				),
+				'blocks'  => array(
+					'core/group' => array(
+						'spacing' => array(
+							'margin' => 'valid value',
+						),
+					),
+				),
+			),
+		);
+
+		$this->assertEqualSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_sanitize_for_unregistered_style_variations() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/quote' => array(
+							'variations' => array(
+								'unregisteredVariation' => array(
+									'color' => array(
+										'background' => 'hotpink',
+									),
+								),
+								'plain'                 => array(
+									'color' => array(
+										'background' => 'hotpink',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$sanitized_theme_json = $theme_json->get_raw_data();
+		$expected             = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/quote' => array(
+						'variations' => array(
+							'plain' => array(
+								'color' => array(
+									'background' => 'hotpink',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertSameSetsWithIndex( $expected, $sanitized_theme_json, 'Sanitized theme.json styles does not match' );
+	}
+
+	public function test_unwraps_block_style_variations() {
+		gutenberg_register_block_style(
+			array( 'core/paragraph', 'core/group' ),
+			array(
+				'name'  => 'myVariation',
+				'label' => 'My variation',
+			)
+		);
+
+		$input = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'variations' => array(
+						'myVariation' => array(
+							'color'      => array(
+								'background' => 'topLevel',
+								'gradient'   => 'topLevel',
+							),
+							'typography' => array(
+								'fontFamily' => 'topLevel',
+							),
+						),
+					),
+					'blocks'     => array(
+						'core/paragraph' => array(
+							'variations' => array(
+								'myVariation' => array(
+									'color'   => array(
+										'background' => 'blockLevel',
+										'text'       => 'blockLevel',
+									),
+									'outline' => array(
+										'offset' => 'blockLevel',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/paragraph' => array(
+						'variations' => array(
+							'myVariation' => array(
+								'color'      => array(
+									'background' => 'blockLevel',
+									'gradient'   => 'topLevel',
+									'text'       => 'blockLevel',
+								),
+								'typography' => array(
+									'fontFamily' => 'topLevel',
+								),
+								'outline'    => array(
+									'offset' => 'blockLevel',
+								),
+							),
+						),
+					),
+					'core/group'     => array(
+						'variations' => array(
+							'myVariation' => array(
+								'color'      => array(
+									'background' => 'topLevel',
+									'gradient'   => 'topLevel',
+								),
+								'typography' => array(
+									'fontFamily' => 'topLevel',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$this->assertSameSetsWithIndex( $expected, $input->get_raw_data(), 'Unwrapped block style variations do not match' );
+	}
+
+	/**
+	 * @dataProvider data_sanitize_for_block_with_style_variations
+	 *
+	 * @param array $theme_json_variations Theme.json variations to test.
+	 * @param array $expected_sanitized    Expected results after sanitizing.
+	 */
+	public function test_sanitize_for_block_with_style_variations( $theme_json_variations, $expected_sanitized ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/quote' => $theme_json_variations,
+					),
+				),
+			)
+		);
+
+		// Validate structure is sanitized.
+		$sanitized_theme_json = $theme_json->get_raw_data();
+		$this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
+		$this->assertArrayHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json does not have an "styles" key' );
+		$this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json['styles'], 'Sanitized theme.json styles does not match' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_sanitize_for_block_with_style_variations() {
+		return array(
+			'1 variation with 1 valid property'     => array(
+				'theme_json_variations' => array(
+					'variations' => array(
+						'plain' => array(
+							'color' => array(
+								'background' => 'hotpink',
+							),
+						),
+					),
+				),
+				'expected_sanitized'    => array(
+					'blocks' => array(
+						'core/quote' => array(
+							'variations' => array(
+								'plain' => array(
+									'color' => array(
+										'background' => 'hotpink',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+			'1 variation with 2 invalid properties' => array(
+				'theme_json_variations' => array(
+					'variations' => array(
+						'plain' => array(
+							'color'            => array(
+								'background' => 'hotpink',
+							),
+							'invalidProperty1' => 'value1',
+							'invalidProperty2' => 'value2',
+						),
+					),
+				),
+				'expected_sanitized'    => array(
+					'blocks' => array(
+						'core/quote' => array(
+							'variations' => array(
+								'plain' => array(
+									'color' => array(
+										'background' => 'hotpink',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Tests that invalid properties are removed from the theme.json inside indexed arrays as settings.typography.fontFamilies.
+	 */
+	public function test_sanitize_indexed_arrays() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'badKey2'  => 'I am Evil!',
+				'settings' => array(
+					'badKey3'    => 'I am Evil!',
+					'typography' => array(
+						'badKey4'      => 'I am Evil!',
+						'fontFamilies' => array(
+							'custom' => array(
+								array(
+									'badKey4'    => 'I am Evil!',
+									'name'       => 'Arial',
+									'slug'       => 'arial',
+									'fontFamily' => 'Arial, sans-serif',
+								),
+							),
+							'theme'  => array(
+								array(
+									'badKey5'    => 'I am Evil!',
+									'name'       => 'Piazzolla',
+									'slug'       => 'piazzolla',
+									'fontFamily' => 'Piazzolla',
+									'fontFace'   => array(
+										array(
+											'badKey6'    => 'I am Evil!',
+											'fontFamily' => 'Piazzolla',
+											'fontStyle'  => 'italic',
+											'fontWeight' => '400',
+											'src'        => 'https://example.com/font.ttf',
+										),
+										array(
+											'badKey7'    => 'I am Evil!',
+											'fontFamily' => 'Piazzolla',
+											'fontStyle'  => 'italic',
+											'fontWeight' => '400',
+											'src'        => 'https://example.com/font.ttf',
+										),
+									),
+								),
+								array(
+									'badKey8'    => 'I am Evil!',
+									'name'       => 'Inter',
+									'slug'       => 'Inter',
+									'fontFamily' => 'Inter',
+									'fontFace'   => array(
+										array(
+											'badKey9'    => 'I am Evil!',
+											'fontFamily' => 'Inter',
+											'fontStyle'  => 'italic',
+											'fontWeight' => '400',
+											'src'        => 'https://example.com/font.ttf',
+										),
+										array(
+											'badKey10'   => 'I am Evil!',
+											'fontFamily' => 'Inter',
+											'fontStyle'  => 'italic',
+											'fontWeight' => '400',
+											'src'        => 'https://example.com/font.ttf',
+										),
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_sanitized   = array(
+			'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'settings' => array(
+				'typography' => array(
+					'fontFamilies' => array(
+						'custom' => array(
+							array(
+								'name'       => 'Arial',
+								'slug'       => 'arial',
+								'fontFamily' => 'Arial, sans-serif',
+							),
+						),
+						'theme'  => array(
+							array(
+								'name'       => 'Piazzolla',
+								'slug'       => 'piazzolla',
+								'fontFamily' => 'Piazzolla',
+								'fontFace'   => array(
+									array(
+										'fontFamily' => 'Piazzolla',
+										'fontStyle'  => 'italic',
+										'fontWeight' => '400',
+										'src'        => 'https://example.com/font.ttf',
+									),
+									array(
+										'fontFamily' => 'Piazzolla',
+										'fontStyle'  => 'italic',
+										'fontWeight' => '400',
+										'src'        => 'https://example.com/font.ttf',
+									),
+								),
+							),
+							array(
+								'name'       => 'Inter',
+								'slug'       => 'Inter',
+								'fontFamily' => 'Inter',
+								'fontFace'   => array(
+									array(
+										'fontFamily' => 'Inter',
+										'fontStyle'  => 'italic',
+										'fontWeight' => '400',
+										'src'        => 'https://example.com/font.ttf',
+									),
+									array(
+										'fontFamily' => 'Inter',
+										'fontStyle'  => 'italic',
+										'fontWeight' => '400',
+										'src'        => 'https://example.com/font.ttf',
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+		$sanitized_theme_json = $theme_json->get_raw_data();
+		$this->assertSameSetsWithIndex( $expected_sanitized, $sanitized_theme_json, 'Sanitized theme.json does not match' );
+	}
+
+	/**
+	 * @dataProvider data_sanitize_with_invalid_style_variation
+	 *
+	 * @param array $theme_json_variations The theme.json variations to test.
+	 */
+	public function test_sanitize_with_invalid_style_variation( $theme_json_variations ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/quote' => $theme_json_variations,
+					),
+				),
+			)
+		);
+
+		// Validate structure is sanitized.
+		$sanitized_theme_json = $theme_json->get_raw_data();
+		$this->assertIsArray( $sanitized_theme_json, 'Sanitized theme.json is not an array data type' );
+		$this->assertArrayNotHasKey( 'styles', $sanitized_theme_json, 'Sanitized theme.json should not have a "styles" key' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_sanitize_with_invalid_style_variation() {
+		return array(
+			'empty string variation' => array(
+				array(
+					'variations' => '',
+				),
+			),
+			'boolean variation'      => array(
+				array(
+					'variations' => false,
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_get_styles_for_block_with_style_variations
+	 *
+	 * @param array  $theme_json_variations Theme.json variations to test.
+	 * @param string $metadata_variations   Style variations to test.
+	 * @param string $expected              Expected results for styling.
+	 */
+	public function test_get_styles_for_block_with_style_variations( $theme_json_variations, $metadata_variations, $expected ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/quote' => $theme_json_variations,
+					),
+				),
+			)
+		);
+
+		// Validate styles are generated properly.
+		$metadata      = array(
+			'path'       => array( 'styles', 'blocks', 'core/quote' ),
+			'selector'   => '.wp-block-quote',
+			'variations' => $metadata_variations,
+		);
+		$actual_styles = $theme_json->get_styles_for_block( $metadata );
+		$this->assertSame( $expected, $actual_styles );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_styles_for_block_with_style_variations() {
+		$plain = array(
+			'metadata' => array(
+				'path'     => array( 'styles', 'blocks', 'core/quote', 'variations', 'plain' ),
+				'selector' => '.is-style-plain.wp-block-quote',
+			),
+			'styles'   => ':root :where(.is-style-plain.wp-block-quote){background-color: hotpink;}',
+		);
+
+		return array(
+			'1 variation with 1 invalid property'   => array(
+				'theme_json_variations' => array(
+					'variations' => array(
+						'plain' => array(
+							'color' => array(
+								'background' => 'hotpink',
+							),
+						),
+					),
+				),
+				'metadata_variation'    => array( $plain['metadata'] ),
+				'expected'              => $plain['styles'],
+			),
+			'1 variation with 2 invalid properties' => array(
+				'theme_json_variations' => array(
+					'variations' => array(
+						'plain' => array(
+							'color'            => array(
+								'background' => 'hotpink',
+							),
+							'invalidProperty1' => 'value1',
+							'invalidProperty2' => 'value2',
+						),
+					),
+				),
+				'metadata_variation'    => array( $plain['metadata'] ),
+				'expected'              => $plain['styles'],
+			),
+		);
+	}
+
+	public function test_get_styles_for_block_with_style_variations_and_custom_selectors() {
+		register_block_type(
+			'test/milk',
+			array(
+				'api_version' => 3,
+				'selectors'   => array(
+					'root'  => '.milk',
+					'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
+				),
+			)
+		);
+
+		register_block_style(
+			'test/milk',
+			array(
+				'name'  => 'chocolate',
+				'label' => 'Chocolate',
+			)
+		);
+
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'test/milk' => array(
+							'color'      => array(
+								'background' => 'white',
+							),
+							'variations' => array(
+								'chocolate' => array(
+									'color' => array(
+										'background' => '#35281E',
+									),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$metadata = array(
+			'name'       => 'test/milk',
+			'path'       => array( 'styles', 'blocks', 'test/milk' ),
+			'selector'   => '.wp-block-test-milk',
+			'selectors'  => array(
+				'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
+			),
+			'variations' => array(
+				'chocolate' => array(
+					'path'     => array( 'styles', 'blocks', 'test/milk', 'variations', 'chocolate' ),
+					'selector' => '.is-style-chocolate.wp-block-test-milk',
+				),
+			),
+		);
+
+		$actual_styles    = $theme_json->get_styles_for_block( $metadata );
+		$default_styles   = ':root :where(.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle){background-color: white;}';
+		$variation_styles = ':root :where(.is-style-chocolate.wp-block-test-milk .liquid,.is-style-chocolate.wp-block-test-milk:not(.spoiled),.is-style-chocolate.wp-block-test-milk.in-bottle){background-color: #35281E;}';
+		$expected         = $default_styles . $variation_styles;
+
+		unregister_block_style( 'test/milk', 'chocolate' );
+		unregister_block_type( 'test/milk' );
+
+		$this->assertSame( $expected, $actual_styles );
+	}
+
+	public function test_block_style_variations() {
+		wp_set_current_user( static::$administrator_id );
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/button' => array(
+						'color'      => array(
+							'background' => 'blue',
+						),
+						'variations' => array(
+							'outline' => array(
+								'color' => array(
+									'background' => 'purple',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $expected );
+
+		$this->assertSameSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_block_style_variations_with_invalid_properties() {
+		wp_set_current_user( static::$administrator_id );
+
+		$partially_invalid_variation = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/button' => array(
+						'color'      => array(
+							'background' => 'blue',
+						),
+						'variations' => array(
+							'outline' => array(
+								'color'   => array(
+									'background' => 'purple',
+								),
+								'invalid' => array(
+									'value' => 'should be stripped',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/button' => array(
+						'color'      => array(
+							'background' => 'blue',
+						),
+						'variations' => array(
+							'outline' => array(
+								'color' => array(
+									'background' => 'purple',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $partially_invalid_variation );
+
+		$this->assertSameSetsWithIndex( $expected, $actual );
+	}
+
+	public function test_block_style_variations_with_inner_blocks_and_elements() {
+		wp_set_current_user( static::$administrator_id );
+		gutenberg_register_block_style(
+			array( 'core/group' ),
+			array(
+				'name'  => 'custom-group',
+				'label' => 'Custom Group',
+			)
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/group' => array(
+						'color'      => array(
+							'background' => 'blue',
+						),
+						'variations' => array(
+							'custom-group' => array(
+								'color'    => array(
+									'background' => 'purple',
+								),
+								'blocks'   => array(
+									'core/paragraph' => array(
+										'color'    => array(
+											'text' => 'red',
+										),
+										'elements' => array(
+											'link' => array(
+												'color'  => array(
+													'text' => 'blue',
+												),
+												':hover' => array(
+													'color' => array(
+														'text' => 'green',
+													),
+												),
+											),
+										),
+									),
+									'core/heading'   => array(
+										'typography' => array(
+											'fontSize' => '24px',
+										),
+									),
+								),
+								'elements' => array(
+									'link' => array(
+										'color'  => array(
+											'text' => 'yellow',
+										),
+										':hover' => array(
+											'color' => array(
+												'text' => 'orange',
+											),
+										),
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $expected );
+
+		// The sanitization processes blocks in a specific order which might differ to the theme.json input.
+		$this->assertEqualsCanonicalizing(
+			$expected,
+			$actual,
+			'Block style variations data does not match when inner blocks or element styles present'
+		);
+	}
+
+	public function test_block_style_variations_with_invalid_inner_block_or_element_styles() {
+		wp_set_current_user( static::$administrator_id );
+		gutenberg_register_block_style(
+			array( 'core/group' ),
+			array(
+				'name'  => 'custom-group',
+				'label' => 'Custom Group',
+			)
+		);
+
+		$input = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/group' => array(
+						'variations' => array(
+							'custom-group' => array(
+								'blocks'   => array(
+									'core/paragraph' => array(
+										'color'      => array(
+											'text' => 'red',
+										),
+										'typography' => array(
+											'fontSize' => 'alert(1)', // Should be removed.
+										),
+										'elements'   => array(
+											'link' => array(
+												'color' => array(
+													'text' => 'blue',
+												),
+												'css'   => 'unsafe-value', // Should be removed.
+											),
+										),
+										'custom'     => 'unsafe-value', // Should be removed.
+									),
+								),
+								'elements' => array(
+									'link' => array(
+										'color'      => array(
+											'text' => 'yellow',
+										),
+										'javascript' => 'alert(1)', // Should be removed.
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$expected = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/group' => array(
+						'variations' => array(
+							'custom-group' => array(
+								'blocks'   => array(
+									'core/paragraph' => array(
+										'color'    => array(
+											'text' => 'red',
+										),
+										'elements' => array(
+											'link' => array(
+												'color' => array(
+													'text' => 'blue',
+												),
+											),
+										),
+									),
+								),
+								'elements' => array(
+									'link' => array(
+										'color' => array(
+											'text' => 'yellow',
+										),
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties( $input );
+
+		// The sanitization processes blocks in a specific order which might differ to the theme.json input.
+		$this->assertEqualsCanonicalizing(
+			$expected,
+			$actual,
+			'Insecure properties were not removed from block style variation inner block types or elements'
+		);
+	}
+
+	/**
+	 * Tests generating the spacing presets array based on the spacing scale provided.
+	 *
+	 * @dataProvider data_set_spacing_sizes
+	 */
+	public function test_set_spacing_sizes( $spacing_scale, $expected_output ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'spacingScale' => $spacing_scale,
+					),
+				),
+			),
+			'default'
+		);
+
+		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
+	}
+
+	/**
+	 * Data provider for spacing scale tests.
+	 *
+	 * @return array
+	 */
+	public function data_set_spacing_sizes() {
+		return array(
+			'only one value when single step in spacing scale' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 1,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '4rem',
+					),
+				),
+			),
+			'one step above medium when two steps in spacing scale' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 2,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '4rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '5.5rem',
+					),
+				),
+			),
+			'one step above medium and one below when three steps in spacing scale' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 3,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '2.5rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '4rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '5.5rem',
+					),
+				),
+			),
+			'extra step added above medium when an even number of steps > 2 specified' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 4,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '2.5rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '4rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '5.5rem',
+					),
+					array(
+						'name' => 'X-Large',
+						'slug' => '70',
+						'size' => '7rem',
+					),
+				),
+			),
+			'extra steps above medium if bottom end will go below zero' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 2.5,
+					'steps'      => 5,
+					'mediumStep' => 5,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '2.5rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '5rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '7.5rem',
+					),
+					array(
+						'name' => 'X-Large',
+						'slug' => '70',
+						'size' => '10rem',
+					),
+					array(
+						'name' => '2X-Large',
+						'slug' => '80',
+						'size' => '12.5rem',
+					),
+				),
+			),
+			'multiplier correctly calculated above and below medium' => array(
+				'spacing_scale'   => array(
+					'operator'   => '*',
+					'increment'  => 1.5,
+					'steps'      => 5,
+					'mediumStep' => 1.5,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'X-Small',
+						'slug' => '30',
+						'size' => '0.67rem',
+					),
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '1rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '1.5rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '2.25rem',
+					),
+					array(
+						'name' => 'X-Large',
+						'slug' => '70',
+						'size' => '3.38rem',
+					),
+				),
+			),
+			'increment < 1 combined showing * operator acting as divisor above and below medium' => array(
+				'spacing_scale'   => array(
+					'operator'   => '*',
+					'increment'  => 0.25,
+					'steps'      => 5,
+					'mediumStep' => 1.5,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => 'X-Small',
+						'slug' => '30',
+						'size' => '0.09rem',
+					),
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '0.38rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '1.5rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '6rem',
+					),
+					array(
+						'name' => 'X-Large',
+						'slug' => '70',
+						'size' => '24rem',
+					),
+				),
+			),
+			't-shirt sizing used if more than 7 steps in scale' => array(
+				'spacing_scale'   => array(
+					'operator'   => '*',
+					'increment'  => 1.5,
+					'steps'      => 8,
+					'mediumStep' => 1.5,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(
+					array(
+						'name' => '2X-Small',
+						'slug' => '20',
+						'size' => '0.44rem',
+					),
+					array(
+						'name' => 'X-Small',
+						'slug' => '30',
+						'size' => '0.67rem',
+					),
+					array(
+						'name' => 'Small',
+						'slug' => '40',
+						'size' => '1rem',
+					),
+					array(
+						'name' => 'Medium',
+						'slug' => '50',
+						'size' => '1.5rem',
+					),
+					array(
+						'name' => 'Large',
+						'slug' => '60',
+						'size' => '2.25rem',
+					),
+					array(
+						'name' => 'X-Large',
+						'slug' => '70',
+						'size' => '3.38rem',
+					),
+					array(
+						'name' => '2X-Large',
+						'slug' => '80',
+						'size' => '5.06rem',
+					),
+					array(
+						'name' => '3X-Large',
+						'slug' => '90',
+						'size' => '7.59rem',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Tests generating the spacing presets array based on the spacing scale provided.
+	 *
+	 * @dataProvider data_set_spacing_sizes_when_invalid
+	 *
+	 * @param array $spacing_scale   Example spacing scale definitions from the data provider.
+	 * @param array $expected_output Expected output from data provider.
+	 */
+	public function test_set_spacing_sizes_when_invalid( $spacing_scale, $expected_output ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'spacing' => array(
+						'spacingScale' => $spacing_scale,
+					),
+				),
+			),
+			'default'
+		);
+
+		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
+	}
+
+	/**
+	 * Data provider for spacing scale tests.
+	 *
+	 * @return array
+	 */
+	public function data_set_spacing_sizes_when_invalid() {
+		return array(
+			'missing operator value'  => array(
+				'spacing_scale'   => array(
+					'operator'   => '',
+					'increment'  => 1.5,
+					'steps'      => 1,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(),
+			),
+			'non numeric increment'   => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 'add two to previous value',
+					'steps'      => 1,
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(),
+			),
+			'non numeric steps'       => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 'spiral staircase preferred',
+					'mediumStep' => 4,
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(),
+			),
+			'non numeric medium step' => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 5,
+					'mediumStep' => 'That which is just right',
+					'unit'       => 'rem',
+				),
+				'expected_output' => array(),
+			),
+			'missing unit value'      => array(
+				'spacing_scale'   => array(
+					'operator'   => '+',
+					'increment'  => 1.5,
+					'steps'      => 5,
+					'mediumStep' => 4,
+				),
+				'expected_output' => array(),
+			),
+		);
+	}
+
+	/**
+	 * Tests the core separator block outbut based on various provided settings.
+	 *
+	 * @dataProvider data_update_separator_declarations
+	 *
+	 * @param array $separator_block_settings Example separator block settings from the data provider.
+	 * @param array $expected_output          Expected output from data provider.
+	 */
+	public function test_update_separator_declarations( $separator_block_settings, $expected_output ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/separator' => $separator_block_settings,
+					),
+				),
+			),
+			'default'
+		);
+
+		$separator_node = array(
+			'path'     => array( 'styles', 'blocks', 'core/separator' ),
+			'selector' => '.wp-block-separator',
+		);
+		$this->assertSame( $expected_output, $theme_json->get_styles_for_block( $separator_node ) );
+	}
+
+	/**
+	 * Data provider for separator declaration tests.
+	 *
+	 * @return array
+	 */
+	public function data_update_separator_declarations() {
+		return array(
+			// If only background is defined, test that includes border-color to the style so it is applied on the front end.
+			'only background'                      => array(
+				array(
+					'color' => array(
+						'background' => 'blue',
+					),
+				),
+				'expected_output' => ':root :where(.wp-block-separator){background-color: blue;color: blue;}',
+			),
+			// If background and text are defined, do not include border-color, as text color is enough.
+			'background and text, no border-color' => array(
+				array(
+					'color' => array(
+						'background' => 'blue',
+						'text'       => 'red',
+					),
+				),
+				'expected_output' => ':root :where(.wp-block-separator){background-color: blue;color: red;}',
+			),
+			// If only text is defined, do not include border-color, as by itself is enough.
+			'only text'                            => array(
+				array(
+					'color' => array(
+						'text' => 'red',
+					),
+				),
+				'expected_output' => ':root :where(.wp-block-separator){color: red;}',
+			),
+			// If background, text, and border-color are defined, include everything, CSS specificity will decide which to apply.
+			'background, text, and border-color'   => array(
+				array(
+					'color'  => array(
+						'background' => 'blue',
+						'text'       => 'red',
+					),
+					'border' => array(
+						'color' => 'pink',
+					),
+				),
+				'expected_output' => ':root :where(.wp-block-separator){background-color: blue;border-color: pink;color: red;}',
+			),
+			// If background and border color are defined, include everything, CSS specificity will decide which to apply.
+			'background, and border-color'         => array(
+				array(
+					'color'  => array(
+						'background' => 'blue',
+					),
+					'border' => array(
+						'color' => 'pink',
+					),
+				),
+				'expected_output' => ':root :where(.wp-block-separator){background-color: blue;border-color: pink;}',
+			),
+		);
+	}
+
+	public function test_shadow_preset_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'presets' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 5px 0 black',
+							),
+							array(
+								'slug'   => 'sharp',
+								'shadow' => '5px 5px black',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected_styles = ':root{--wp--preset--shadow--natural: 5px 5px 5px 0 black;--wp--preset--shadow--sharp: 5px 5px black;}';
+		$this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" does not match expectations' );
+		$this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet( array( 'variables' ) ), 'Styles returned from "::get_stylesheet()" when requiring "variables" type does not match expectations' );
+	}
+
+	public function test_get_shadow_styles_for_blocks() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'shadow' => array(
+						'presets' => array(
+							array(
+								'slug'   => 'natural',
+								'shadow' => '5px 5px 0 0 black',
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'blocks'   => array(
+						'core/paragraph' => array(
+							'shadow' => 'var(--wp--preset--shadow--natural)',
+						),
+					),
+					'elements' => array(
+						'button' => array(
+							'shadow' => 'var:preset|shadow|natural',
+						),
+						'link'   => array(
+							'shadow' => array( 'ref' => 'styles.elements.button.shadow' ),
+						),
+					),
+				),
+			)
+		);
+
+		$variable_styles = ':root{--wp--preset--shadow--natural: 5px 5px 0 0 black;}';
+		$element_styles  = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: var(--wp--preset--shadow--natural);}:root :where(p){box-shadow: var(--wp--preset--shadow--natural);}';
+		$expected_styles = $variable_styles . $element_styles;
+		$this->assertSameCSS( $expected_styles, $theme_json->get_stylesheet( array( 'styles', 'presets', 'variables' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	public function test_get_top_level_background_image_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage'      => array(
+							'url' => 'http://example.org/image.png',
+						),
+						'backgroundRepeat'     => 'no-repeat',
+						'backgroundPosition'   => 'center center',
+						'backgroundAttachment' => 'fixed',
+					),
+				),
+			)
+		);
+
+		$body_node = array(
+			'path'     => array( 'styles' ),
+			'selector' => 'body',
+		);
+
+		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
+		$this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background styles do not match expectations' );
+
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage'      => "url('http://example.org/image.png')",
+						'backgroundSize'       => 'contain',
+						'backgroundRepeat'     => 'no-repeat',
+						'backgroundPosition'   => 'center center',
+						'backgroundAttachment' => 'fixed',
+					),
+				),
+			)
+		);
+
+		$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
+		$this->assertSameCSS( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_styles_for_block()" with top-level background image as string type do not match expectations' );
+	}
+
+	public function test_get_block_background_image_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/group' => array(
+							'background' => array(
+								'backgroundImage'      => "url('http://example.org/group.png')",
+								'backgroundRepeat'     => 'no-repeat',
+								'backgroundPosition'   => 'center center',
+								'backgroundAttachment' => 'fixed',
+							),
+						),
+						'core/quote' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'http://example.org/quote.png',
+									'id'  => 321,
+								),
+								'backgroundSize'  => 'contain',
+							),
+						),
+						'core/verse' => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'url' => 'http://example.org/verse.png',
+									'id'  => 123,
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$group_node = array(
+			'name'      => 'core/group',
+			'path'      => array( 'styles', 'blocks', 'core/group' ),
+			'selector'  => '.wp-block-group',
+			'selectors' => array(
+				'root' => '.wp-block-group',
+			),
+		);
+
+		$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-attachment: fixed;}";
+		$this->assertSameCSS( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with core/group background styles as string type do not match expectations' );
+
+		$quote_node = array(
+			'name'      => 'core/quote',
+			'path'      => array( 'styles', 'blocks', 'core/quote' ),
+			'selector'  => '.wp-block-quote',
+			'selectors' => array(
+				'root' => '.wp-block-quote',
+			),
+		);
+
+		$quote_styles = ":root :where(.wp-block-quote){background-image: url('http://example.org/quote.png');background-position: 50% 50%;background-size: contain;}";
+		$this->assertSameCSS( $quote_styles, $theme_json->get_styles_for_block( $quote_node ), 'Styles returned from "::get_styles_for_block()" with core/quote default background styles do not match expectations' );
+
+		$verse_node = array(
+			'name'      => 'core/verse',
+			'path'      => array( 'styles', 'blocks', 'core/verse' ),
+			'selector'  => '.wp-block-verse',
+			'selectors' => array(
+				'root' => '.wp-block-verse',
+			),
+		);
+
+		$verse_styles = ":root :where(.wp-block-verse){background-image: url('http://example.org/verse.png');background-size: cover;}";
+		$this->assertSameCSS( $verse_styles, $theme_json->get_styles_for_block( $verse_node ), 'Styles returned from "::get_styles_for_block()" with default core/verse background styles as string type do not match expectations' );
+	}
+
+	/**
+	 * Testing background dynamic properties in theme.json.
+	 */
+	public function test_get_resolved_background_image_styles() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'background' => array(
+						'backgroundImage'      => array(
+							'url' => 'http://example.org/top.png',
+						),
+						'backgroundSize'       => 'contain',
+						'backgroundRepeat'     => 'repeat',
+						'backgroundPosition'   => '10% 20%',
+						'backgroundAttachment' => 'scroll',
+					),
+					'blocks'     => array(
+						'core/group'        => array(
+							'background' => array(
+								'backgroundImage' => array(
+									'id'  => 123,
+									'url' => 'http://example.org/group.png',
+								),
+							),
+						),
+						'core/post-content' => array(
+							'background' => array(
+								'backgroundImage'      => array(
+									'ref' => 'styles.background.backgroundImage',
+								),
+								'backgroundSize'       => array(
+									'ref' => 'styles.background.backgroundSize',
+								),
+								'backgroundRepeat'     => array(
+									'ref' => 'styles.background.backgroundRepeat',
+								),
+								'backgroundPosition'   => array(
+									'ref' => 'styles.background.backgroundPosition',
+								),
+								'backgroundAttachment' => array(
+									'ref' => 'styles.background.backgroundAttachment',
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$expected = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}body{background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}:root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-size: cover;}:root :where(.wp-block-post-content){background-image: url('http://example.org/top.png');background-position: 10% 20%;background-repeat: repeat;background-size: contain;background-attachment: scroll;}";
+		$this->assertSameCSS( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+	}
+
+	/**
+	 * Tests that base custom CSS is generated correctly.
+	 */
+	public function test_get_stylesheet_handles_base_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->assertSame( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) );
+	}
+
+	/**
+	 * Tests that block custom CSS is generated correctly.
+	 */
+	public function test_get_styles_for_block_handles_block_custom_css() {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'blocks' => array(
+						'core/paragraph' => array(
+							'css' => 'color:red;',
+						),
+					),
+				),
+			)
+		);
+
+		$paragraph_node = array(
+			'name'      => 'core/paragraph',
+			'path'      => array( 'styles', 'blocks', 'core/paragraph' ),
+			'selector'  => 'p',
+			'selectors' => array(
+				'root' => 'p',
+			),
+		);
+
+		$custom_css = ':root :where(p){color:red;}';
+		$this->assertSame( $custom_css, $theme_json->get_styles_for_block( $paragraph_node ) );
+	}
+
+	/**
+	 * Tests that custom CSS is kept for users with correct capabilities and removed for others.
+	 *
+	 * @dataProvider data_custom_css_for_user_caps
+	 *
+	 * @param string $user_property The property name for current user.
+	 * @param array  $expected      Expected results.
+	 */
+	public function test_custom_css_for_user_caps( $user_property, array $expected ) {
+		wp_set_current_user( static::${$user_property} );
+
+		$actual = WP_Theme_JSON_Gutenberg::remove_insecure_properties(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'css'    => 'body { color:purple; }',
+					'blocks' => array(
+						'core/separator' => array(
+							'color' => array(
+								'background' => 'blue',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$this->assertSameSetsWithIndex( $expected, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public function data_custom_css_for_user_caps() {
+		return array(
+			'allows custom css for users with caps'     => array(
+				'user_property' => 'administrator_id',
+				'expected'      => array(
+					'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'styles'  => array(
+						'css'    => 'body { color:purple; }',
+						'blocks' => array(
+							'core/separator' => array(
+								'color' => array(
+									'background' => 'blue',
+								),
+							),
+						),
+					),
+				),
+			),
+			'removes custom css for users without caps' => array(
+				'user_property' => 'user_id',
+				'expected'      => array(
+					'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+					'styles'  => array(
+						'blocks' => array(
+							'core/separator' => array(
+								'color' => array(
+									'background' => 'blue',
+								),
+							),
+						),
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_process_blocks_custom_css
+	 *
+	 * @param array  $input    An array containing the selector and css to test.
+	 * @param string $expected Expected results.
+	 */
+	public function test_process_blocks_custom_css( $input, $expected ) {
+		$theme_json = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(),
+			)
+		);
+		$reflection = new ReflectionMethod( $theme_json, 'process_blocks_custom_css' );
+		$reflection->setAccessible( true );
+
+		$this->assertSame( $expected, $reflection->invoke( $theme_json, $input['css'], $input['selector'] ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public function data_process_blocks_custom_css() {
+		return array(
+			// Simple CSS without any nested selectors.
+			'empty css'                    => array(
+				'input'    => array(
+					'selector' => '.foo',
+					'css'      => '',
+				),
+				'expected' => '',
+			),
+			'no nested selectors'          => array(
+				'input'    => array(
+					'selector' => '.foo',
+					'css'      => 'color: red; margin: auto;',
+				),
+				'expected' => ':root :where(.foo){color: red; margin: auto;}',
+			),
+			'no root styles'               => array(
+				'input'    => array(
+					'selector' => '.foo',
+					'css'      => '&::before{color: red;}',
+				),
+				'expected' => ':root :where(.foo)::before{color: red;}',
+			),
+			// CSS with nested selectors.
+			'with nested selector'         => array(
+				'input'    => array(
+					'selector' => '.foo',
+					'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+				),
+				'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo.one){color: blue;}:root :where(.foo .two){color: green;}',
+			),
+			// CSS with pseudo elements.
+			'with pseudo elements'         => array(
+				'input'    => array(
+					'selector' => '.foo',
+					'css'      => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+				),
+				'expected' => ':root :where(.foo){color: red; margin: auto;}:root :where(.foo)::before{color: blue;}:root :where(.foo) ::before{color: green;}:root :where(.foo.one)::before{color: yellow;}:root :where(.foo .two)::before{color: purple;}',
+			),
+			// CSS with multiple root selectors.
+			'with multiple root selectors' => array(
+				'input'    => array(
+					'selector' => '.foo, .bar',
+					'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+				),
+				'expected' => ':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo, .bar)::before{color: yellow;}:root :where(.foo, .bar) ::before{color: purple;}:root :where(.foo.three, .bar.three)::before{color: orange;}:root :where(.foo .four, .bar .four)::before{color: skyblue;}',
+			),
+		);
+	}
+
+	public function test_internal_syntax_is_converted_to_css_variables() {
+		$result = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'background' => 'var:preset|color|primary',
+						'text'       => 'var(--wp--preset--color--secondary)',
+					),
+					'elements' => array(
+						'link' => array(
+							'color' => array(
+								'background' => 'var:preset|color|pri',
+								'text'       => 'var(--wp--preset--color--sec)',
+							),
+						),
+					),
+					'blocks'   => array(
+						'core/post-terms' => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
+							'color'      => array( 'background' => 'var:preset|color|secondary' ),
+						),
+						'core/navigation' => array(
+							'elements' => array(
+								'link' => array(
+									'color' => array(
+										'background' => 'var:preset|color|p',
+										'text'       => 'var(--wp--preset--color--s)',
+									),
+								),
+							),
+						),
+						'core/quote'      => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ),
+							'color'      => array( 'background' => 'var:preset|color|d' ),
+							'variations' => array(
+								'plain' => array(
+									'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ),
+									'color'      => array( 'background' => 'var:preset|color|s' ),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+		$styles = $result->get_raw_data()['styles'];
+
+		$this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--font-size--small)', $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Top block level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['blocks']['core/post-terms']['color']['background'], 'Top block level: Assert the internal variables are convert to CSS custom variables.' );
+
+		$this->assertEquals( 'var(--wp--preset--color--p)', $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Elements block level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Elements block level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--font-size--s)', $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Style variations: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' );
+	}
+
+	/*
+	 * Tests that the theme.json file is correctly parsed and the variables are resolved.
+	 *
+	 * @ticket 58588
+	 *
+	 * @covers WP_Theme_JSON_Gutenberg::resolve_variables
+	 * @covers WP_Theme_JSON_Gutenberg::convert_variables_to_value
+	 */
+	public function test_resolve_variables() {
+		$primary_color   = '#9DFF20';
+		$secondary_color = '#9DFF21';
+		$contrast_color  = '#000';
+		$raw_color_value = '#efefef';
+		$large_font      = '18px';
+		$small_font      = '12px';
+		$spacing         = 'clamp(1.5rem, 5vw, 2rem)';
+		$theme_json      = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version'  => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'settings' => array(
+					'color'      => array(
+						'palette' => array(
+							'theme' => array(
+								array(
+									'color' => $primary_color,
+									'name'  => 'Primary',
+									'slug'  => 'primary',
+								),
+								array(
+									'color' => $secondary_color,
+									'name'  => 'Secondary',
+									'slug'  => 'secondary',
+								),
+								array(
+									'color' => $contrast_color,
+									'name'  => 'Contrast',
+									'slug'  => 'contrast',
+								),
+							),
+						),
+					),
+					'typography' => array(
+						'fontSizes' => array(
+							array(
+								'size' => $small_font,
+								'name' => 'Font size small',
+								'slug' => 'small',
+							),
+							array(
+								'size' => $large_font,
+								'name' => 'Font size large',
+								'slug' => 'large',
+							),
+						),
+					),
+					'spacing'    => array(
+						'spacingSizes' => array(
+							array(
+								'size' => $spacing,
+								'name' => '100',
+								'slug' => '100',
+							),
+						),
+					),
+				),
+				'styles'   => array(
+					'color'    => array(
+						'background' => 'var(--wp--preset--color--primary)',
+						'text'       => $raw_color_value,
+					),
+					'elements' => array(
+						'button' => array(
+							'color'      => array(
+								'text' => 'var(--wp--preset--color--contrast)',
+							),
+							'typography' => array(
+								'fontSize' => 'var(--wp--preset--font-size--small)',
+							),
+						),
+					),
+					'blocks'   => array(
+						'core/post-terms'      => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
+							'color'      => array( 'background' => $raw_color_value ),
+						),
+						'core/more'            => array(
+							'typography' => array( 'fontSize' => 'var(--undefined--font-size--small)' ),
+							'color'      => array( 'background' => 'linear-gradient(90deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 35%, var(--wp--undefined--color--secondary) 100%)' ),
+						),
+						'core/comment-content' => array(
+							'typography' => array( 'fontSize' => 'calc(var(--wp--preset--font-size--small, 12px) + 20px)' ),
+							'color'      => array(
+								'text'       => 'var(--wp--preset--color--primary, red)',
+								'background' => 'var(--wp--preset--color--primary, var(--wp--preset--font-size--secondary))',
+								'link'       => 'var(--undefined--color--primary, var(--wp--preset--font-size--secondary))',
+							),
+						),
+						'core/comments'        => array(
+							'color' => array(
+								'text'       => 'var(--undefined--color--primary, var(--wp--preset--font-size--small))',
+								'background' => 'var(--wp--preset--color--primary, var(--undefined--color--primary))',
+							),
+						),
+						'core/navigation'      => array(
+							'elements' => array(
+								'link' => array(
+									'color'      => array(
+										'background' => 'var(--wp--preset--color--primary)',
+										'text'       => 'var(--wp--preset--color--secondary)',
+									),
+									'typography' => array(
+										'fontSize' => 'var(--wp--preset--font-size--large)',
+									),
+								),
+							),
+						),
+						'core/quote'           => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--large)' ),
+							'color'      => array( 'background' => 'var(--wp--preset--color--primary)' ),
+							'variations' => array(
+								'plain' => array(
+									'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
+									'color'      => array( 'background' => 'var(--wp--preset--color--secondary)' ),
+								),
+							),
+						),
+						'core/post-template'   => array(
+							'spacing' => array(
+								'blockGap' => null,
+							),
+						),
+						'core/columns'         => array(
+							'spacing' => array(
+								'blockGap' => 'var(--wp--preset--spacing--100)',
+							),
+						),
+					),
+				),
+			)
+		);
+
+		$styles = $theme_json::resolve_variables( $theme_json )->get_raw_data()['styles'];
+
+		$this->assertEquals( $primary_color, $styles['color']['background'], 'Top level: Assert values are converted' );
+		$this->assertEquals( $raw_color_value, $styles['color']['text'], 'Top level: Assert raw values stay intact' );
+
+		$this->assertEquals( $contrast_color, $styles['elements']['button']['color']['text'], 'Elements: color' );
+		$this->assertEquals( $small_font, $styles['elements']['button']['typography']['fontSize'], 'Elements: font-size' );
+
+		$this->assertEquals( $large_font, $styles['blocks']['core/quote']['typography']['fontSize'], 'Blocks: font-size' );
+		$this->assertEquals( $primary_color, $styles['blocks']['core/quote']['color']['background'], 'Blocks: color' );
+		$this->assertEquals( $raw_color_value, $styles['blocks']['core/post-terms']['color']['background'], 'Blocks: Raw color value stays intact' );
+		$this->assertEquals( $small_font, $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Block core/post-terms: font-size' );
+		$this->assertEquals(
+			"linear-gradient(90deg, $primary_color 0%, $secondary_color 35%, var(--wp--undefined--color--secondary) 100%)",
+			$styles['blocks']['core/more']['color']['background'],
+			'Blocks: multiple colors and undefined color'
+		);
+		$this->assertEquals( 'var(--undefined--font-size--small)', $styles['blocks']['core/more']['typography']['fontSize'], 'Blocks: undefined font-size ' );
+		$this->assertEquals( "calc($small_font + 20px)", $styles['blocks']['core/comment-content']['typography']['fontSize'], 'Blocks: font-size in random place' );
+		$this->assertEquals( $primary_color, $styles['blocks']['core/comment-content']['color']['text'], 'Blocks: text color with fallback' );
+		$this->assertEquals( $primary_color, $styles['blocks']['core/comment-content']['color']['background'], 'Blocks: background color with var as fallback' );
+		$this->assertEquals( $primary_color, $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Block element: background color' );
+		$this->assertEquals( $secondary_color, $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Block element: text color' );
+		$this->assertEquals( $large_font, $styles['blocks']['core/navigation']['elements']['link']['typography']['fontSize'], 'Block element: font-size' );
+
+		$this->assertEquals(
+			"var(--undefined--color--primary, $small_font)",
+			$styles['blocks']['core/comments']['color']['text'],
+			'Blocks: text color with undefined var and fallback'
+		);
+		$this->assertEquals(
+			$primary_color,
+			$styles['blocks']['core/comments']['color']['background'],
+			'Blocks: background color with variable and undefined fallback'
+		);
+
+		$this->assertEquals( $small_font, $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Block variations: font-size' );
+		$this->assertEquals( $secondary_color, $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Block variations: color' );
+		/*
+		 * WP_Theme_JSON_Gutenberg::resolve_variables may be called with merged data from WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()
+		 * WP_Theme_JSON_Resolver_Gutenberg::get_block_data() sets blockGap for supported blocks to `null` if the value is not defined.
+		 */
+		$this->assertNull( $styles['blocks']['core/post-template']['spacing']['blockGap'], 'core/post-template block: blockGap' );
+		$this->assertEquals( $spacing, $styles['blocks']['core/columns']['spacing']['blockGap'], 'core/columns block: blockGap' );
 	}
 
 	/**
-	 * Tests generating the spacing presets array based on the spacing scale provided.
+	 * Tests the correct application of a block style variation's selector to
+	 * a block's selector.
 	 *
-	 * @dataProvider data_set_spacing_sizes_when_invalid
+	 * @dataProvider data_get_block_style_variation_selector
+	 *
+	 * @param string $selector  CSS selector.
+	 * @param string $expected  Expected block style variation CSS selector.
 	 */
-	public function test_set_spacing_sizes_when_invalid( $spacing_scale, $expected_output ) {
-		$this->expectNotice();
-		$this->expectNoticeMessage( 'Some of the theme.json settings.spacing.spacingScale values are invalid' );
+	public function test_get_block_style_variation_selector( $selector, $expected ) {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
 
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => 2,
-				'settings' => array(
-					'spacing' => array(
-						'spacingScale' => $spacing_scale,
-					),
-				),
-			)
-		);
+		$func = $theme_json->getMethod( 'get_block_style_variation_selector' );
+		$func->setAccessible( true );
 
-		$theme_json->set_spacing_sizes();
-		$this->assertSame( $expected_output, _wp_array_get( $theme_json->get_raw_data(), array( 'settings', 'spacing', 'spacingSizes', 'default' ) ) );
+		$actual = $func->invoke( null, 'custom', $selector );
+
+		$this->assertEquals( $expected, $actual );
 	}
 
 	/**
-	 * Data provider for spacing scale tests.
+	 * Data provider for generating block style variation selectors.
 	 *
-	 * @return array
+	 * @return array[]
 	 */
-	public function data_set_spacing_sizes_when_invalid() {
+	public function data_get_block_style_variation_selector() {
 		return array(
-
-			'invalid_spacing_scale_values_missing_operator' => array(
-				'spacingScale'    => array(
-					'operator'   => '',
-					'increment'  => 1.5,
-					'steps'      => 1,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => null,
+			'empty block selector'     => array(
+				'selector' => '',
+				'expected' => '.is-style-custom',
 			),
-
-			'invalid_spacing_scale_values_non_numeric_increment' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 'add two to previous value',
-					'steps'      => 1,
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => null,
+			'class selector'           => array(
+				'selector' => '.wp-block',
+				'expected' => '.wp-block.is-style-custom',
 			),
-
-			'invalid_spacing_scale_values_non_numeric_steps' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 'spiral staircase preferred',
-					'mediumStep' => 4,
-					'unit'       => 'rem',
-				),
-				'expected_output' => null,
+			'id selector'              => array(
+				'selector' => '#wp-block',
+				'expected' => '#wp-block.is-style-custom',
 			),
-
-			'invalid_spacing_scale_values_non_numeric_medium_step' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 5,
-					'mediumStep' => 'That which is just right',
-					'unit'       => 'rem',
-				),
-				'expected_output' => null,
+			'element tag selector'     => array(
+				'selector' => 'p',
+				'expected' => 'p.is-style-custom',
 			),
-
-			'invalid_spacing_scale_values_missing_unit' => array(
-				'spacingScale'    => array(
-					'operator'   => '+',
-					'increment'  => 1.5,
-					'steps'      => 5,
-					'mediumStep' => 4,
-				),
-				'expected_output' => null,
+			'attribute selector'       => array(
+				'selector' => '[style*="color"]',
+				'expected' => '[style*="color"].is-style-custom',
+			),
+			'descendant selector'      => array(
+				'selector' => '.wp-block .inner',
+				'expected' => '.wp-block.is-style-custom .inner',
+			),
+			'comma separated selector' => array(
+				'selector' => '.wp-block .inner, .wp-block .alternative',
+				'expected' => '.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
+			),
+			'pseudo selector'          => array(
+				'selector' => 'div:first-child',
+				'expected' => 'div.is-style-custom:first-child',
+			),
+			':is selector'             => array(
+				'selector' => '.wp-block:is(.outer .inner:first-child)',
+				'expected' => '.wp-block.is-style-custom:is(.outer .inner:first-child)',
+			),
+			':not selector'            => array(
+				'selector' => '.wp-block:not(.outer .inner:first-child)',
+				'expected' => '.wp-block.is-style-custom:not(.outer .inner:first-child)',
+			),
+			':has selector'            => array(
+				'selector' => '.wp-block:has(.outer .inner:first-child)',
+				'expected' => '.wp-block.is-style-custom:has(.outer .inner:first-child)',
+			),
+			':where selector'          => array(
+				'selector' => '.wp-block:where(.outer .inner:first-child)',
+				'expected' => '.wp-block.is-style-custom:where(.outer .inner:first-child)',
+			),
+			'wrapping :where selector' => array(
+				'selector' => ':where(.outer .inner:first-child)',
+				'expected' => ':where(.outer.is-style-custom .inner:first-child)',
+			),
+			'complex'                  => array(
+				'selector' => '.wp:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+				'expected' => '.wp.is-style-custom:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp.is-style-custom:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
 			),
 		);
 	}
 
-	public function test_get_styles_for_block_with_padding_aware_alignments() {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => 2,
-				'styles'   => array(
-					'spacing' => array(
-						'padding' => array(
-							'top'    => '10px',
-							'right'  => '12px',
-							'bottom' => '10px',
-							'left'   => '12px',
-						),
-					),
+	/**
+	 * Tests the correct scoping of selectors for a style node.
+	 */
+	public function test_scope_style_node_selectors() {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
+
+		$func = $theme_json->getMethod( 'scope_style_node_selectors' );
+		$func->setAccessible( true );
+
+		$node = array(
+			'name'      => 'core/image',
+			'path'      => array( 'styles', 'blocks', 'core/image' ),
+			'selector'  => '.wp-block-image',
+			'selectors' => array(
+				'root'       => '.wp-block-image',
+				'border'     => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder',
+				'typography' => array(
+					'textDecoration' => '.wp-block-image caption',
 				),
-				'settings' => array(
-					'useRootPaddingAwareAlignments' => true,
+				'filter'     => array(
+					'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder',
 				),
-			)
+			),
 		);
 
-		$metadata = array(
-			'path'     => array(
-				'0' => 'styles',
+		$actual   = $func->invoke( null, '.custom-scope', $node );
+		$expected = array(
+			'name'      => 'core/image',
+			'path'      => array( 'styles', 'blocks', 'core/image' ),
+			'selector'  => '.custom-scope .wp-block-image',
+			'selectors' => array(
+				'root'       => '.custom-scope .wp-block-image',
+				'border'     => '.custom-scope .wp-block-image img, .custom-scope .wp-block-image .wp-block-image__crop-area, .custom-scope .wp-block-image .components-placeholder',
+				'typography' => array(
+					'textDecoration' => '.custom-scope .wp-block-image caption',
+				),
+				'filter'     => array(
+					'duotone' => '.custom-scope .wp-block-image img, .custom-scope .wp-block-image .components-placeholder',
+				),
 			),
-			'selector' => 'body',
 		);
 
-		$expected    = 'body { margin: 0;}.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }.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); }.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; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}';
-		$root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
-		$style_rules = $theme_json->get_styles_for_block( $metadata );
-		$this->assertEquals( $expected, $root_rules . $style_rules );
+		$this->assertEquals( $expected, $actual );
 	}
 
-	public function test_get_styles_for_block_without_padding_aware_alignments() {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version' => 2,
-				'styles'  => array(
-					'spacing' => array(
-						'padding' => array(
-							'top'    => '10px',
-							'right'  => '12px',
-							'bottom' => '10px',
-							'left'   => '12px',
+	/**
+	 * Block style variations styles aren't generated by default. This test covers
+	 * the `get_block_nodes` does not include variations by default, preventing
+	 * the inclusion of their styles.
+	 */
+	public function test_opt_out_of_block_style_variations_by_default() {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
+
+		$func = $theme_json->getMethod( 'get_block_nodes' );
+		$func->setAccessible( true );
+
+		$theme_json = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/button' => array(
+						'variations' => array(
+							'outline' => array(
+								'color' => array(
+									'background' => 'red',
+								),
+							),
 						),
 					),
 				),
-			)
-		);
-
-		$metadata = array(
-			'path'     => array(
-				'0' => 'styles',
 			),
-			'selector' => 'body',
 		);
+		$selectors  = array();
 
-		$expected    = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';
-		$root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
-		$style_rules = $theme_json->get_styles_for_block( $metadata );
-		$this->assertEquals( $expected, $root_rules . $style_rules );
+		$block_nodes       = $func->invoke( null, $theme_json, $selectors );
+		$button_variations = $block_nodes[0]['variations'] ?? array();
+
+		$this->assertEquals( array(), $button_variations );
 	}
 
-	public function test_get_styles_for_block_with_content_width() {
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version'  => 2,
-				'settings' => array(
-					'layout' => array(
-						'contentSize' => '800px',
-						'wideSize'    => '1000px',
+	/**
+	 * Block style variations styles aren't generated by default. This test ensures
+	 * variations are included by `get_block_nodes` when requested.
+	 */
+	public function test_opt_in_to_block_style_variations() {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
+
+		$func = $theme_json->getMethod( 'get_block_nodes' );
+		$func->setAccessible( true );
+
+		$theme_json = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'blocks' => array(
+					'core/button' => array(
+						'variations' => array(
+							'outline' => array(
+								'color' => array(
+									'background' => 'red',
+								),
+							),
+						),
 					),
 				),
-			)
+			),
 		);
+		$selectors  = array();
+		$options    = array( 'include_block_style_variations' => true );
 
-		$metadata = array(
-			'path'     => array(
-				'0' => 'settings',
+		$block_nodes       = $func->invoke( null, $theme_json, $selectors, $options );
+		$button_variations = $block_nodes[0]['variations'] ?? array();
+
+		$expected = array(
+			array(
+				'path'     => array( 'styles', 'blocks', 'core/button', 'variations', 'outline' ),
+				'selector' => '.wp-block-button.is-style-outline .wp-block-button__link',
 			),
-			'selector' => 'body',
 		);
 
-		$expected    = 'body { margin: 0;--wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-		$root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );
-		$style_rules = $theme_json->get_styles_for_block( $metadata );
-		$this->assertEquals( $expected, $root_rules . $style_rules );
+		$this->assertEquals( $expected, $button_variations );
 	}
 
-	public function test_update_separator_declarations() {
-		// If only background is defined, test that includes border-color to the style so it is applied on the front end.
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'blocks' => array(
-						'core/separator' => array(
-							'color' => array(
-								'background' => 'blue',
+	/**
+	 * This test covers `get_block_nodes` with the `$include_node_paths_only` option.
+	 * When `true`, `$include_node_paths_only` should return only the paths of the block nodes.
+	 */
+	public function test_return_block_node_paths() {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
+
+		$func = $theme_json->getMethod( 'get_block_nodes' );
+		$func->setAccessible( true );
+
+		$theme_json = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'typography' => array(
+					'fontSize' => '16px',
+				),
+				'blocks'     => array(
+					'core/button' => array(
+						'color' => array(
+							'background' => 'red',
+						),
+					),
+					'core/group'  => array(
+						'elements' => array(
+							'link' => array(
+								'color' => array(
+									'background' => 'blue',
+								),
 							),
 						),
 					),
 				),
 			),
-			'default'
 		);
-		$expected   = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: blue;}';
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-		$this->assertEquals( $expected, $stylesheet );
 
-		// If background and text are defined, do not include border-color, as text color is enough.
-		$theme_json = new WP_Theme_JSON_Gutenberg(
+		$block_nodes = $func->invoke( null, $theme_json, array(), array( 'include_node_paths_only' => true ) );
+
+		$expected = array(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'blocks' => array(
-						'core/separator' => array(
-							'color' => array(
-								'background' => 'blue',
-								'text'       => 'red',
-							),
-						),
-					),
-				),
+				'path' => array( 'styles', 'blocks', 'core/button' ),
+			),
+			array(
+				'path' => array( 'styles', 'blocks', 'core/group' ),
+			),
+			array(
+				'path' => array( 'styles', 'blocks', 'core/group', 'elements', 'link' ),
 			),
-			'default'
 		);
-		$expected   = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: red;}';
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-		$this->assertEquals( $expected, $stylesheet );
 
-		// If only text is defined, do not include border-color, as by itself is enough.
-		$theme_json = new WP_Theme_JSON_Gutenberg(
-			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'blocks' => array(
-						'core/separator' => array(
-							'color' => array(
-								'text' => 'red',
+		$this->assertEquals( $expected, $block_nodes );
+	}
+
+	/**
+	 * This test covers `get_block_nodes` with the `$include_node_paths_only`
+	 * and `include_block_style_variations` options.
+	 */
+	public function test_return_block_node_paths_with_variations() {
+		$theme_json = new ReflectionClass( 'WP_Theme_JSON_Gutenberg' );
+
+		$func = $theme_json->getMethod( 'get_block_nodes' );
+		$func->setAccessible( true );
+
+		$theme_json = array(
+			'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+			'styles'  => array(
+				'typography' => array(
+					'fontSize' => '16px',
+				),
+				'blocks'     => array(
+					'core/button' => array(
+						'color'      => array(
+							'background' => 'red',
+						),
+						'variations' => array(
+							'cheese' => array(
+								'color' => array(
+									'background' => 'cheese',
+								),
+							),
+						),
+					),
+					'core/group'  => array(
+						'color'      => array(
+							'background' => 'blue',
+						),
+						'variations' => array(
+							'apricot' => array(
+								'color' => array(
+									'background' => 'apricot',
+								),
 							),
 						),
 					),
 				),
 			),
-			'default'
 		);
-		$expected   = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{color: red;}';
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-		$this->assertEquals( $expected, $stylesheet );
 
-		// If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply.
-		$theme_json = new WP_Theme_JSON_Gutenberg(
+		$block_nodes = $func->invoke(
+			null,
+			$theme_json,
+			array(),
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'blocks' => array(
-						'core/separator' => array(
-							'color'  => array(
-								'background' => 'blue',
-								'text'       => 'red',
-							),
-							'border' => array(
-								'color' => 'pink',
-							),
-						),
+				'include_node_paths_only'        => true,
+				'include_block_style_variations' => true,
+			)
+		);
+
+		$expected = array(
+			array(
+				'path'       => array( 'styles', 'blocks', 'core/button' ),
+				'variations' => array(
+					array(
+						'path' => array( 'styles', 'blocks', 'core/button', 'variations', 'cheese' ),
 					),
 				),
 			),
-			'default'
-		);
-		$expected   = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;color: red;}';
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-		$this->assertEquals( $expected, $stylesheet );
-
-		// If background and border color are defined, include everything, CSS specifity will decide which to apply.
-		$theme_json = new WP_Theme_JSON_Gutenberg(
 			array(
-				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
-				'styles'  => array(
-					'blocks' => array(
-						'core/separator' => array(
-							'color'  => array(
-								'background' => 'blue',
-							),
-							'border' => array(
-								'color' => 'pink',
-							),
-						),
+				'path'       => array( 'styles', 'blocks', 'core/group' ),
+				'variations' => array(
+					array(
+						'path' => array( 'styles', 'blocks', 'core/group', 'variations', 'apricot' ),
 					),
 				),
 			),
-			'default'
 		);
-		$expected   = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;}';
-		$stylesheet = $theme_json->get_stylesheet( array( 'styles' ) );
-		$this->assertEquals( $expected, $stylesheet );
 
+		$this->assertEquals( $expected, $block_nodes );
 	}
 }
diff --git a/phpunit/class-wp-webfonts-local-provider-test.php b/phpunit/class-wp-webfonts-local-provider-test.php
deleted file mode 100644
index 43ef4a84951c84..00000000000000
--- a/phpunit/class-wp-webfonts-local-provider-test.php
+++ /dev/null
@@ -1,149 +0,0 @@
-<?php
-
-/**
- * @group  webfonts
- * @covers WP_WebfontsLocal_Provider
- */
-class WP_Webfonts_Provider_Local_Test extends WP_UnitTestCase {
-	private $provider;
-	private $theme_root;
-	private $orig_theme_dir;
-
-	public function set_up() {
-		parent::set_up();
-
-		$this->provider = new WP_Webfonts_Provider_Local();
-
-		$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;
-		wp_clean_themes_cache();
-		unset( $GLOBALS['wp_themes'] );
-
-		parent::tear_down();
-	}
-
-	/**
-	 * @covers WP_Webfonts_Provider_Local::set_webfonts
-	 */
-	public function test_set_webfonts() {
-		$webfonts = array(
-			'source-serif-pro-200-900-normal-local' => 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',
-			),
-			'source-serif-pro-200-900-italic-local' => 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',
-			),
-		);
-
-		$this->provider->set_webfonts( $webfonts );
-
-		$property = $this->get_webfonts_property();
-		$this->assertSame( $webfonts, $property->getValue( $this->provider ) );
-	}
-
-	/**
-	 * @covers WP_Webfonts_Provider_Local::get_css
-	 *
-	 * @dataProvider data_get_css
-	 *
-	 * @param array  $webfonts Prepared webfonts (to store in WP_Webfonts_Provider_Local::$webfonts property).
-	 * @param string $expected Expected CSS.
-	 */
-	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() );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array
-	 */
-	public function data_get_css() {
-		return array(
-			'truetype format' => array(
-				'webfonts' => array(
-					'open-sans-bold-italic-local' => array(
-						'provider'    => 'local',
-						'font-family' => 'Open Sans',
-						'font-style'  => 'italic',
-						'font-weight' => 'bold',
-						'src'         => 'http://example.org/assets/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf',
-					),
-				),
-				'expected' => <<<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(
-					'source-serif-pro-200-900-normal-local' => array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'normal',
-						'font-weight'  => '200 900',
-						'font-stretch' => 'normal',
-						'src'          => 'http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-					),
-					'source-serif-pro-400-900-italic-local' => array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'italic',
-						'font-weight'  => '200 900',
-						'font-stretch' => 'normal',
-						'src'          => 'http://example.org/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-					),
-				),
-				'expected' => <<<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
-			,
-			),
-		);
-	}
-
-	private function get_webfonts_property() {
-		$property = new ReflectionProperty( $this->provider, 'webfonts' );
-		$property->setAccessible( true );
-
-		return $property;
-	}
-}
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/data/fonts/OpenSans-Regular.otf b/phpunit/data/fonts/OpenSans-Regular.otf
new file mode 100644
index 00000000000000..8db0f64c67ddd5
Binary files /dev/null and b/phpunit/data/fonts/OpenSans-Regular.otf differ
diff --git a/phpunit/data/fonts/OpenSans-Regular.ttf b/phpunit/data/fonts/OpenSans-Regular.ttf
new file mode 100644
index 00000000000000..ae716936e9e4c1
Binary files /dev/null and b/phpunit/data/fonts/OpenSans-Regular.ttf differ
diff --git a/phpunit/data/fonts/OpenSans-Regular.woff b/phpunit/data/fonts/OpenSans-Regular.woff
new file mode 100644
index 00000000000000..bd0f824b207d60
Binary files /dev/null and b/phpunit/data/fonts/OpenSans-Regular.woff differ
diff --git a/phpunit/data/fonts/OpenSans-Regular.woff2 b/phpunit/data/fonts/OpenSans-Regular.woff2
new file mode 100644
index 00000000000000..f778f9c8455f26
Binary files /dev/null and b/phpunit/data/fonts/OpenSans-Regular.woff2 differ
diff --git a/phpunit/data/languages/themes/block-theme-pl_PL.mo b/phpunit/data/languages/themes/block-theme-pl_PL.mo
index ff89f87f127f15..d819be9b57e3cd 100644
Binary files a/phpunit/data/languages/themes/block-theme-pl_PL.mo and b/phpunit/data/languages/themes/block-theme-pl_PL.mo differ
diff --git a/phpunit/data/languages/themes/block-theme-pl_PL.po b/phpunit/data/languages/themes/block-theme-pl_PL.po
index 0aa4bbd52d34fc..6ac5a6967e73c4 100644
--- a/phpunit/data/languages/themes/block-theme-pl_PL.po
+++ b/phpunit/data/languages/themes/block-theme-pl_PL.po
@@ -2,22 +2,30 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "POT-Creation-Date: 2015-12-31 16:31+0100\n"
-"PO-Revision-Date: 2021-03-15 13:10+0100\n"
+"PO-Revision-Date: 2022-08-31 11:08+0200\n"
+"Last-Translator: \n"
+"Language-Team: \n"
 "Language: pl_PL\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"X-Generator: Poedit 2.4.2\n"
-"X-Poedit-Basepath: .\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"X-Generator: Poedit 3.1.1\n"
+"X-Poedit-Basepath: .\n"
 "X-Poedit-KeywordsList: __;_e;_x:1,2c;_ex:1,2c;_n:1,2;_nx:1,2,4c;_n_noop:1,2;"
 "_nx_noop:1,2,3c;esc_attr__;esc_html__;esc_attr_e;esc_html_e;esc_attr_x:1,2c;"
 "esc_html_x:1,2c\n"
 "X-Textdomain-Support: yes\n"
-"Last-Translator: \n"
-"Language-Team: \n"
 "X-Poedit-SearchPath-0: .\n"
 
+msgctxt "Style variation name"
+msgid "Block theme"
+msgstr "Motyw blokowy"
+
+msgctxt "Style variation name"
+msgid "Block theme variation"
+msgstr "Wariant motywu blokowego"
+
 msgctxt "Custom template name"
 msgid "Homepage template"
 msgstr "Szablon strony głównej"
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
new file mode 100644
index 00000000000000..c1cc20aaf1f101
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child With Block Style Variations Theme
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-block-style-variations
+*/
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
new file mode 100644
index 00000000000000..195321a33b3366
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
+	"styles": {
+		"color": {
+			"background": "darkcyan",
+			"text": "aliceblue"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
new file mode 100644
index 00000000000000..fee9382dce1472
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
@@ -0,0 +1,55 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"styles": {
+		"variations": {
+			"outline": {
+				"color": {
+					"background": "green",
+					"text": "white"
+				}
+			},
+			"block-style-variation-a": {
+				"color": {
+					"background": "darkseagreen"
+				},
+				"typography": {
+					"fontSize": "2em",
+					"lineHeight": "1.4em"
+				}
+			}
+		},
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"color": {
+							"background": "red"
+						}
+					}
+				}
+			},
+			"core/media-text": {
+				"variations": {
+					"block-style-variation-a": {
+						"color": {
+							"background": "blue"
+						},
+						"typography": {
+							"fontSize": "1.5em"
+						}
+					}
+				}
+			},
+			"core/heading": {
+				"variations": {
+					"block-style-variation-b": {
+						"typography": {
+							"fontSize": "3em"
+						}
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-layout/style.css b/phpunit/data/themedir1/block-theme-child-with-fluid-layout/style.css
new file mode 100644
index 00000000000000..193b8f098af64b
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-layout/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child Theme With Fluid Layout
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-fluid-layout
+*/
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-layout/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-layout/theme.json
new file mode 100644
index 00000000000000..10d3384195ede6
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-layout/theme.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"wideSize": "clamp(1000px, 85vw, 2000px)"
+		},
+		"typography": {
+			"fluid": true
+		}
+	}
+}
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..fcb5167ee71d01
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"wideSize": "1000px"
+		},
+		"typography": {
+			"fluid": {
+				"minFontSize": "16px",
+				"maxViewportWidth": "1200px",
+				"minViewportWidth": "640px"
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
index 93234766eddd2a..11f1eba417ea7d 100644
--- a/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
@@ -1,5 +1,6 @@
 {
-	"version": 2,
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
 	"settings": {
 		"appearanceTools": true,
 		"typography": {
diff --git a/phpunit/data/themedir1/block-theme-child/styles/variation-a.json b/phpunit/data/themedir1/block-theme-child/styles/variation-a.json
new file mode 100644
index 00000000000000..53c3ef60619b5b
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child/styles/variation-a.json
@@ -0,0 +1,18 @@
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/paragraph": {
+				"color": {
+					"palette": [
+						{
+							"slug": "dark",
+							"name": "Dark",
+							"color": "#010101"
+						}
+					]
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child/styles/variation-b.json b/phpunit/data/themedir1/block-theme-child/styles/variation-b.json
new file mode 100644
index 00000000000000..4e949f24c7f401
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child/styles/variation-b.json
@@ -0,0 +1,18 @@
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/post-title": {
+				"color": {
+					"palette": [
+						{
+							"slug": "dark",
+							"name": "Dark",
+							"color": "#010101"
+						}
+					]
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme-child/theme.json b/phpunit/data/themedir1/block-theme-child/theme.json
index 90fe35e758b455..4c394ed4910720 100644
--- a/phpunit/data/themedir1/block-theme-child/theme.json
+++ b/phpunit/data/themedir1/block-theme-child/theme.json
@@ -1,5 +1,6 @@
 {
-	"version": 1,
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
 	"settings": {
 		"color": {
 			"palette": [
diff --git a/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json b/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
new file mode 100644
index 00000000000000..356bc4fc3de7d3
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"styles": {
+		"color": {
+			"background": "indigo",
+			"text": "plum"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json b/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
new file mode 100644
index 00000000000000..8b79948517255f
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
@@ -0,0 +1,10 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"styles": {
+		"color": {
+			"background": "midnightblue",
+			"text": "lightblue"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json b/phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json
new file mode 100644
index 00000000000000..d938a8a0db833c
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json
@@ -0,0 +1,12 @@
+{
+	"version": 3,
+	"blockTypes": [ "core/group", "core/columns" ],
+	"slug": "WithSlug",
+	"title": "With Slug",
+	"styles": {
+		"color": {
+			"background": "aliceblue",
+			"text": "midnightblue"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/variation-a.json b/phpunit/data/themedir1/block-theme/styles/variation-a.json
new file mode 100644
index 00000000000000..eb08d0090c177c
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/variation-a.json
@@ -0,0 +1,18 @@
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/paragraph": {
+				"color": {
+					"palette": [
+						{
+							"slug": "light",
+							"name": "Light",
+							"color": "#f2f2f2"
+						}
+					]
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/variation-b.json b/phpunit/data/themedir1/block-theme/styles/variation-b.json
new file mode 100644
index 00000000000000..efdbe8aa86650b
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/variation-b.json
@@ -0,0 +1,18 @@
+{
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/post-title": {
+				"color": {
+					"palette": [
+						{
+							"slug": "light",
+							"name": "Light",
+							"color": "#f1f1f1"
+						}
+					]
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/styles/variation.json b/phpunit/data/themedir1/block-theme/styles/variation.json
new file mode 100644
index 00000000000000..debb3666a767bd
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/styles/variation.json
@@ -0,0 +1,24 @@
+{
+	"version": 3,
+	"title": "Block theme variation",
+	"settings": {
+		"color": {
+			"palette": [
+				{
+					"slug": "foreground",
+					"color": "#3F67C6",
+					"name": "Foreground"
+				}
+			]
+		}
+	},
+	"styles": {
+		"blocks": {
+			"core/post-title": {
+				"typography": {
+					"fontWeight": "700"
+				}
+			}
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/block-theme/templates/custom-hero-template.html b/phpunit/data/themedir1/block-theme/templates/custom-hero-template.html
new file mode 100644
index 00000000000000..0a62cda60641a1
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/templates/custom-hero-template.html
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>Custom Hero template</p>
+<!-- /wp:paragraph -->
diff --git a/phpunit/data/themedir1/block-theme/templates/custom-single-post-template.html b/phpunit/data/themedir1/block-theme/templates/custom-single-post-template.html
new file mode 100644
index 00000000000000..fc0a5f8a4b154d
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/templates/custom-single-post-template.html
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>Custom Single Post template</p>
+<!-- /wp:paragraph -->
diff --git a/phpunit/data/themedir1/block-theme/templates/index.html b/phpunit/data/themedir1/block-theme/templates/index.html
new file mode 100644
index 00000000000000..451c2c1a5c159b
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/templates/index.html
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>Index Template</p>
+<!-- /wp:paragraph -->
diff --git a/phpunit/data/themedir1/block-theme/templates/page-home.html b/phpunit/data/themedir1/block-theme/templates/page-home.html
new file mode 100644
index 00000000000000..fd46fc0018fff4
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme/templates/page-home.html
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>Page (Home) Template</p>
+<!-- /wp:paragraph -->
diff --git a/phpunit/data/themedir1/block-theme/theme.json b/phpunit/data/themedir1/block-theme/theme.json
index fdedf31009473d..c455d87e504a2d 100644
--- a/phpunit/data/themedir1/block-theme/theme.json
+++ b/phpunit/data/themedir1/block-theme/theme.json
@@ -1,5 +1,7 @@
 {
-	"version": 1,
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"title": "Block theme",
 	"settings": {
 		"color": {
 			"palette": [
@@ -14,7 +16,52 @@
 					"color": "#000"
 				}
 			],
-			"custom": false
+			"gradients": [
+				{
+					"name": "Custom gradient",
+					"gradient": "linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%)",
+					"slug": "custom-gradient"
+				}
+			],
+			"duotone": [
+				{
+					"colors": [ "#333333", "#aaaaaa" ],
+					"slug": "custom-duotone",
+					"name": "Custom Duotone"
+				}
+			],
+			"custom": false,
+			"customGradient": false
+		},
+		"typography": {
+			"fontSizes": [
+				{
+					"name": "Custom",
+					"slug": "custom",
+					"size": "100px"
+				}
+			],
+			"customFontSize": false,
+			"lineHeight": true
+		},
+		"spacing": {
+			"units": [ "rem" ],
+			"padding": true,
+			"blockGap": true
+		},
+		"shadow": {
+			"presets": [
+				{
+					"name": "Natural",
+					"slug": "natural",
+					"shadow": "2px 2px 3px #000"
+				},
+				{
+					"name": "Test",
+					"slug": "test",
+					"shadow": "2px 2px 3px #000"
+				}
+			]
 		},
 		"blocks": {
 			"core/paragraph": {
@@ -30,10 +77,66 @@
 			}
 		}
 	},
+	"styles": {
+		"blocks": {
+			"core/post-featured-image": {
+				"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)",
+				"filter": {
+					"duotone": "var(--wp--preset--duotone--custom-duotone)"
+				}
+			},
+			"my/third-party-block": {
+				"color": {
+					"background": "hotpink"
+				},
+				"elements": {
+					"cite": {
+						"color": {
+							"text": "white"
+						}
+					}
+				}
+			}
+		},
+		"elements": {
+			"button": {
+				"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
+			},
+			"link": {
+				"typography": {
+					"textDecoration": "none"
+				},
+				"border": {
+					"bottom": {
+						"width": "2px",
+						"color": "currentColor",
+						"style": "solid"
+					}
+				},
+				":hover": {
+					"typography": {
+						"textDecoration": "none"
+					},
+					"border": {
+						"bottom": {
+							"width": "2px",
+							"color": "#000",
+							"style": "dotted"
+						}
+					}
+				}
+			}
+		}
+	},
 	"customTemplates": [
 		{
 			"name": "page-home",
 			"title": "Homepage template"
+		},
+		{
+			"name": "custom-single-post-template",
+			"title": "Custom Single Post template",
+			"postTypes": [ "post" ]
 		}
 	],
 	"templateParts": [
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold-Italic.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold-Italic.woff2
new file mode 100644
index 00000000000000..e8f46699012bbe
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold-Italic.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold.woff2
new file mode 100644
index 00000000000000..9a7696df2ade09
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Bold.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Medium.ttf b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Medium.ttf
new file mode 100644
index 00000000000000..aa3c2a2cabb099
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Medium.ttf differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-MediumItalic.ttf b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-MediumItalic.ttf
new file mode 100644
index 00000000000000..4365309cf2ccd3
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-MediumItalic.ttf differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular-Italic.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular-Italic.woff2
new file mode 100644
index 00000000000000..773b7277fbb297
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular-Italic.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular.woff2
new file mode 100644
index 00000000000000..b8f0bd8ae02f18
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/DMSans-Regular.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/LICENSE.txt b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/LICENSE.txt
new file mode 100644
index 00000000000000..02d522fe581f57
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/dm-sans/LICENSE.txt
@@ -0,0 +1,94 @@
+Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com). Copyright 2019 Google LLC.
+Copyright 2014-2018 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries. Copyright 2019 Google LLC.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OFL.txt b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OFL.txt
new file mode 100644
index 00000000000000..57eeaca60ab1cd
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf
new file mode 100644
index 00000000000000..f7328a583fb7a5
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf
new file mode 100644
index 00000000000000..ad86e00ccddbfa
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/LICENSE.md b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/LICENSE.md
new file mode 100644
index 00000000000000..7cd3e749de2ab1
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/LICENSE.md
@@ -0,0 +1,93 @@
+Copyright 2014 - 2021 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+   in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the corresponding
+   Copyright Holder. This restriction only applies to the primary font name as
+   presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+   must be distributed entirely under this license, and must not be
+   distributed under any other license. The requirement for fonts to
+   remain under this license does not apply to any document created
+   using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2
new file mode 100644
index 00000000000000..23878491546624
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.otf.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2
new file mode 100644
index 00000000000000..4cbd4c351f178d
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2
new file mode 100644
index 00000000000000..28701e68424b15
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.otf.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2
new file mode 100644
index 00000000000000..3b74d300ad0032
Binary files /dev/null and b/phpunit/data/themedir1/fonts-block-theme/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2 differ
diff --git a/phpunit/data/themedir1/fonts-block-theme/style.css b/phpunit/data/themedir1/fonts-block-theme/style.css
new file mode 100644
index 00000000000000..f2d153ec7d673f
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/style.css
@@ -0,0 +1,7 @@
+/*
+Theme Name: Block Theme with defined Typography Fonts.
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Version: 1.0.0
+Text Domain: fonts-block-theme
+*/
diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-duplicate-fonts.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-duplicate-fonts.json
new file mode 100644
index 00000000000000..c24a4a85a4f673
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-duplicate-fonts.json
@@ -0,0 +1,40 @@
+{
+	"version": 3,
+	"title": "Variation: duplicate fonts",
+	"settings": {
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"name": "DM Sans",
+					"slug": "dm-sans",
+					"fontFace": [
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "400",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
+							]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "700",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Bold.woff2"
+							]
+						}
+					]
+				}
+			]
+		}
+	},
+	"styles": {
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--dm-sans)"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-family.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-family.json
new file mode 100644
index 00000000000000..dfc83f3726d798
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-family.json
@@ -0,0 +1,40 @@
+{
+	"version": 3,
+	"title": "Variation: new font family",
+	"settings": {
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "\"Open Sans\", serif",
+					"name": "Open Sans",
+					"slug": "open-sans",
+					"fontFace": [
+						{
+							"fontFamily": "Open Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "400",
+							"src": [
+								"file:./assets/fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf"
+							]
+						},
+						{
+							"fontFamily": "Open Sans",
+							"fontStretch": "normal",
+							"fontStyle": "italic",
+							"fontWeight": "400",
+							"src": [
+								"file:./assets/fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf"
+							]
+						}
+					]
+				}
+			]
+		}
+	},
+	"styles": {
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--open-sans)"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json
new file mode 100644
index 00000000000000..95cb7b88d0fb78
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-new-font-variations.json
@@ -0,0 +1,40 @@
+{
+	"version": 3,
+	"title": "Variation: new font variations",
+	"settings": {
+		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"name": "DM Sans",
+					"slug": "dm-sans",
+					"fontFace": [
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "500",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Medium.woff2"
+							]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "italic",
+							"fontWeight": "500",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Medium-Italic.woff2"
+							]
+						}
+					]
+				}
+			]
+		}
+	},
+	"styles": {
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--dm-sans)"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/fonts-block-theme/styles/variation-no-fonts.json b/phpunit/data/themedir1/fonts-block-theme/styles/variation-no-fonts.json
new file mode 100644
index 00000000000000..fcdd368ec691b8
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/styles/variation-no-fonts.json
@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"title": "Variation - no fonts",
+	"styles": {
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--dm-sans)"
+		}
+	}
+}
diff --git a/phpunit/data/themedir1/fonts-block-theme/theme.json b/phpunit/data/themedir1/fonts-block-theme/theme.json
new file mode 100644
index 00000000000000..e69d83e924c1bc
--- /dev/null
+++ b/phpunit/data/themedir1/fonts-block-theme/theme.json
@@ -0,0 +1,113 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"color": {
+			"palette": [
+				{
+					"slug": "light",
+					"name": "Light",
+					"color": "#f5f7f9"
+				},
+				{
+					"slug": "dark",
+					"name": "Dark",
+					"color": "#000"
+				}
+			]
+		},
+		"typography": {
+			"dropCap": false,
+			"fluid": true,
+			"fontFamilies": [
+				{
+					"fontFace": [
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "400",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Regular.woff2"
+							]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "italic",
+							"fontWeight": "400",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Regular-Italic.woff2"
+							]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "700",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Bold.woff2"
+							]
+						},
+						{
+							"fontFamily": "DM Sans",
+							"fontStretch": "normal",
+							"fontStyle": "italic",
+							"fontWeight": "700",
+							"src": [
+								"file:./assets/fonts/dm-sans/DMSans-Bold-Italic.woff2"
+							]
+						}
+					],
+					"fontFamily": "\"DM Sans\", sans-serif",
+					"name": "DM Sans",
+					"slug": "dm-sans"
+				},
+				{
+					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
+					"name": "System Font",
+					"slug": "system-font"
+				},
+				{
+					"fontFace": [
+						{
+							"fontFamily": "Source Serif Pro",
+							"fontStretch": "normal",
+							"fontStyle": "normal",
+							"fontWeight": "200 900",
+							"src": [
+								"file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2"
+							]
+						},
+						{
+							"fontFamily": "Source Serif Pro",
+							"fontStretch": "normal",
+							"fontStyle": "italic",
+							"fontWeight": "200 900",
+							"src": [
+								"file:./assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2"
+							]
+						}
+					],
+					"fontFamily": "\"Source Serif Pro\", serif",
+					"name": "Source Serif Pro",
+					"slug": "source-serif-pro"
+				}
+			]
+		},
+		"useRootPaddingAwareAlignments": true
+	},
+	"styles": {
+		"typography": {
+			"fontFamily": "var(--wp--preset--font-family--system-font)"
+		}
+	},
+	"templateParts": [
+		{
+			"name": "small-header",
+			"title": "Small Header",
+			"area": "header"
+		}
+	]
+}
diff --git a/phpunit/experimental/block-editor-settings-mobile-test.php b/phpunit/experimental/block-editor-settings-mobile-test.php
new file mode 100644
index 00000000000000..967efebc346fc8
--- /dev/null
+++ b/phpunit/experimental/block-editor-settings-mobile-test.php
@@ -0,0 +1,115 @@
+<?php
+/**
+ * Unit tests covering WP_REST_Block_Editor_Settings_Controller functionality.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Unit tests for the mobile block editor settings.
+ *
+ * @covers WP_REST_Block_Editor_Settings_Controller
+ */
+class Gutenberg_REST_Block_Editor_Settings_Controller_Test extends WP_Test_REST_Controller_Testcase {
+	/**
+	 * @var int
+	 */
+	protected static $admin_id;
+
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'block-theme' );
+		remove_action( 'wp_print_styles', 'print_emoji_styles' );
+	}
+
+	/**
+	 * Create fake admin user before our tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public static function wpTearDownAfterClass() {
+		// Delete the test user.
+		self::delete_user( self::$admin_id );
+	}
+
+	public function test_register_routes() {
+		$routes = rest_get_server()->get_routes();
+		$this->assertArrayHasKey(
+			'/wp-block-editor/v1/settings',
+			$routes
+		);
+	}
+
+	public function test_get_items() {
+		wp_set_current_user( self::$admin_id );
+		$request = new WP_REST_Request( 'GET', '/wp-block-editor/v1/settings' );
+		$request->set_param( 'context', 'mobile' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$this->assertArrayHasKey( '__experimentalStyles', $data, '__experimentalStyles should be in the returned data' );
+		$this->assertArrayHasKey( '__experimentalFeatures', $data, '__experimentalFeatures should be in the returned data' );
+		$this->assertArrayHasKey( '__experimentalEnableQuoteBlockV2', $data, '__experimentalEnableQuoteBlockV2 should be in the returned data' );
+		$this->assertArrayHasKey( '__experimentalEnableListBlockV2', $data, '__experimentalEnableListBlockV2 should be in the returned data' );
+		$this->assertArrayHasKey( 'colors', $data, 'colors should be in the returned data' );
+		$this->assertArrayHasKey( 'gradients', $data, 'gradients should be in the returned data' );
+		$this->assertArrayHasKey( 'fontSizes', $data, 'fontSizes should be in the returned data' );
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_context_param() {
+		// Covered by the core test.
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_prepare_item() {
+		// Controller does not implement prepare_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_item() {
+		// Controller does not implement get_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_create_item() {
+		// Controller does not implement create_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_update_item() {
+		// Controller does not implement update_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_delete_item() {
+		// Controller does not implement delete_item().
+	}
+
+	/**
+	 * @doesNotPerformAssertions
+	 */
+	public function test_get_item_schema() {
+		// The controller's schema is hardcoded, so tests would not be meaningful.
+	}
+}
diff --git a/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php b/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php
new file mode 100644
index 00000000000000..56286f76ace836
--- /dev/null
+++ b/phpunit/experimental/media/class-gutenberg-rest-attachments-controller-test.php
@@ -0,0 +1,314 @@
+<?php
+
+/**
+ * @coversDefaultClass \Gutenberg_REST_Attachments_Controller
+ */
+class Gutenberg_REST_Attachments_Controller_Test extends WP_Test_REST_Post_Type_Controller_Testcase {
+	/**
+	 * @var int Administrator ID.
+	 */
+	protected static $admin_id;
+
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->remove_added_uploads();
+	}
+
+	public function tear_down() {
+		$this->remove_added_uploads();
+
+		parent::tear_down();
+	}
+
+	/**
+	 * @covers ::register_routes
+	 */
+	public function test_register_routes() {
+		$routes = rest_get_server()->get_routes();
+		$this->assertArrayHasKey( '/wp/v2/media', $routes );
+		$this->assertCount( 2, $routes['/wp/v2/media'] );
+		$this->assertArrayHasKey( '/wp/v2/media/(?P<id>[\d]+)', $routes );
+		$this->assertCount( 3, $routes['/wp/v2/media/(?P<id>[\d]+)'] );
+		$this->assertArrayHasKey( '/wp/v2/media/(?P<id>[\d]+)/sideload', $routes );
+		$this->assertCount( 1, $routes['/wp/v2/media/(?P<id>[\d]+)/sideload'] );
+	}
+
+	public function test_get_items() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	public function test_get_item() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	public function test_update_item() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	public function test_delete_item() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	public function test_get_item_schema() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	public function test_context_param() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	/**
+	 * Verifies that skipping sub-size generation works.
+	 *
+	 * @covers ::create_item
+	 * @covers ::create_item_permissions_check
+	 */
+	public function test_create_item() {
+		wp_set_current_user( self::$admin_id );
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/media' );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola.jpg' );
+		$request->set_param( 'title', 'My title is very cool' );
+		$request->set_param( 'caption', 'This is a better caption.' );
+		$request->set_param( 'description', 'Without a description, my attachment is descriptionless.' );
+		$request->set_param( 'alt_text', 'Alt text is stored outside post schema.' );
+		$request->set_param( 'generate_sub_sizes', false );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$this->assertSame( 201, $response->get_status() );
+		$this->assertSame( 'image', $data['media_type'] );
+		$this->assertArrayHasKey( 'missing_image_sizes', $data );
+		$this->assertNotEmpty( $data['missing_image_sizes'] );
+	}
+
+	/**
+	 * Verifies that skipping sub-size generation works.
+	 *
+	 * @covers ::create_item
+	 * @covers ::create_item_permissions_check
+	 */
+	public function test_create_item_insert_additional_metadata() {
+		wp_set_current_user( self::$admin_id );
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/media' );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola.jpg' );
+		$request->set_param( 'title', 'My title is very cool' );
+		$request->set_param( 'caption', 'This is a better caption.' );
+		$request->set_param( 'description', 'Without a description, my attachment is descriptionless.' );
+		$request->set_param( 'alt_text', 'Alt text is stored outside post schema.' );
+		$request->set_param( 'generate_sub_sizes', false );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+
+		remove_filter( 'wp_generate_attachment_metadata', '__return_empty_array', 1 );
+
+		$this->assertSame( 201, $response->get_status() );
+
+		$data = $response->get_data();
+
+		$this->assertArrayHasKey( 'media_details', $data );
+		$this->assertArrayHasKey( 'image_meta', $data['media_details'] );
+	}
+
+	public function test_prepare_item() {
+		$this->markTestSkipped( 'No need to implement' );
+	}
+
+	/**
+	 * @covers ::prepare_item_for_response
+	 */
+	public function test_prepare_item_lists_missing_image_sizes_for_pdfs() {
+		wp_set_current_user( self::$admin_id );
+
+		$attachment_id = self::factory()->attachment->create_object(
+			DIR_TESTDATA . '/images/test-alpha.pdf',
+			0,
+			array(
+				'post_mime_type' => 'application/pdf',
+				'post_excerpt'   => 'A sample caption',
+			)
+		);
+
+		$request = new WP_REST_Request( 'GET', sprintf( '/wp/v2/media/%d', $attachment_id ) );
+		$request->set_param( 'context', 'edit' );
+
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$this->assertArrayHasKey( 'missing_image_sizes', $data );
+		$this->assertNotEmpty( $data['missing_image_sizes'] );
+		$this->assertArrayHasKey( 'filename', $data );
+		$this->assertArrayHasKey( 'filesize', $data );
+	}
+
+	/**
+	 * @covers ::sideload_item
+	 * @covers ::sideload_item_permissions_check
+	 */
+	public function test_sideload_item() {
+		wp_set_current_user( self::$admin_id );
+
+		$attachment_id = self::factory()->attachment->create_object(
+			DIR_TESTDATA . '/images/canola.jpg',
+			0,
+			array(
+				'post_mime_type' => 'image/jpeg',
+				'post_excerpt'   => 'A sample caption',
+			)
+		);
+
+		wp_update_attachment_metadata(
+			$attachment_id,
+			wp_generate_attachment_metadata( $attachment_id, DIR_TESTDATA . '/images/canola.jpg' )
+		);
+
+		$request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola-777x777.jpg' );
+		$request->set_param( 'image_size', 'medium' );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$this->assertSame( 200, $response->get_status() );
+		$this->assertSame( 'image', $data['media_type'] );
+		$this->assertArrayHasKey( 'missing_image_sizes', $data );
+		$this->assertEmpty( $data['missing_image_sizes'] );
+		$this->assertArrayHasKey( 'media_details', $data );
+		$this->assertArrayHasKey( 'sizes', $data['media_details'] );
+		$this->assertArrayHasKey( 'medium', $data['media_details']['sizes'] );
+		$this->assertArrayHasKey( 'file', $data['media_details']['sizes']['medium'] );
+		$this->assertSame( 'canola-777x777.jpg', $data['media_details']['sizes']['medium']['file'] );
+	}
+
+	/**
+	 * @covers ::sideload_item
+	 * @covers ::sideload_item_permissions_check
+	 */
+	public function test_sideload_item_year_month_based_folders() {
+		if ( version_compare( get_bloginfo( 'version' ), '6.6-beta1', '<' ) ) {
+			$this->markTestSkipped( 'This test requires WordPress 6.6+' );
+		}
+
+		update_option( 'uploads_use_yearmonth_folders', 1 );
+
+		wp_set_current_user( self::$admin_id );
+
+		$published_post = self::factory()->post->create(
+			array(
+				'post_status'   => 'publish',
+				'post_date'     => '2017-02-14 00:00:00',
+				'post_date_gmt' => '2017-02-14 00:00:00',
+			)
+		);
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/media' );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month.jpg' );
+		$request->set_param( 'post', $published_post );
+		$request->set_param( 'generate_sub_sizes', false );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$attachment_id = $data['id'];
+
+		$request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-777x777.jpg' );
+		$request->set_param( 'image_size', 'medium' );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		update_option( 'uploads_use_yearmonth_folders', 0 );
+
+		$this->assertSame( 200, $response->get_status() );
+
+		$attachment = get_post( $data['id'] );
+
+		$this->assertSame( $attachment->post_parent, $data['post'] );
+		$this->assertSame( $attachment->post_parent, $published_post );
+		$this->assertSame( wp_get_attachment_url( $attachment->ID ), $data['source_url'] );
+		$this->assertStringContainsString( '2017/02', $data['source_url'] );
+	}
+
+	/**
+	 * @covers ::sideload_item
+	 * @covers ::sideload_item_permissions_check
+	 */
+	public function test_sideload_item_year_month_based_folders_page_post_type() {
+		if ( version_compare( get_bloginfo( 'version' ), '6.6-beta1', '<' ) ) {
+			$this->markTestSkipped( 'This test requires WordPress 6.6+' );
+		}
+
+		update_option( 'uploads_use_yearmonth_folders', 1 );
+
+		wp_set_current_user( self::$admin_id );
+
+		$published_post = self::factory()->post->create(
+			array(
+				'post_type'     => 'page',
+				'post_status'   => 'publish',
+				'post_date'     => '2017-02-14 00:00:00',
+				'post_date_gmt' => '2017-02-14 00:00:00',
+			)
+		);
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/media' );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-page.jpg' );
+		$request->set_param( 'post', $published_post );
+		$request->set_param( 'generate_sub_sizes', false );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		$attachment_id = $data['id'];
+
+		$request = new WP_REST_Request( 'POST', "/wp/v2/media/$attachment_id/sideload" );
+		$request->set_header( 'Content-Type', 'image/jpeg' );
+		$request->set_header( 'Content-Disposition', 'attachment; filename=canola-year-month-page-777x777.jpg' );
+		$request->set_param( 'image_size', 'medium' );
+
+		$request->set_body( file_get_contents( DIR_TESTDATA . '/images/canola.jpg' ) );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data();
+
+		update_option( 'uploads_use_yearmonth_folders', 0 );
+
+		$time   = current_time( 'mysql' );
+		$y      = substr( $time, 0, 4 );
+		$m      = substr( $time, 5, 2 );
+		$subdir = "/$y/$m";
+
+		$this->assertSame( 200, $response->get_status() );
+
+		$attachment = get_post( $data['id'] );
+
+		$this->assertSame( $attachment->post_parent, $data['post'] );
+		$this->assertSame( $attachment->post_parent, $published_post );
+		$this->assertSame( wp_get_attachment_url( $attachment->ID ), $data['source_url'] );
+		$this->assertStringNotContainsString( '2017/02', $data['source_url'] );
+		$this->assertStringContainsString( $subdir, $data['source_url'] );
+	}
+}
diff --git a/phpunit/experimental/media/media-processing-test.php b/phpunit/experimental/media/media-processing-test.php
new file mode 100644
index 00000000000000..2717d2582879ff
--- /dev/null
+++ b/phpunit/experimental/media/media-processing-test.php
@@ -0,0 +1,197 @@
+<?php
+
+/**
+ * Tests for experimental client-side media processing.
+ */
+class Media_Processing_Test extends WP_UnitTestCase {
+	/**
+	 * @var int Administrator ID.
+	 */
+	protected static $admin_id;
+
+	/**
+	 * @var string Image file path.
+	 */
+	private static $image_file;
+
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public function set_up() {
+		parent::set_up();
+
+		self::$image_file = get_temp_dir() . 'canola.jpg';
+		if ( ! file_exists( self::$image_file ) ) {
+			copy( DIR_TESTDATA . '/images/canola.jpg', self::$image_file );
+		}
+	}
+
+	public function tear_down() {
+		$this->remove_added_uploads();
+
+		parent::tear_down();
+	}
+
+	/**
+	 * @covers gutenberg_get_all_image_sizes
+	 */
+	public function test_get_all_image_sizes() {
+		$sizes = gutenberg_get_all_image_sizes();
+		$this->assertNotEmpty( $sizes );
+		foreach ( $sizes as $size ) {
+			$this->assertIsInt( $size['width'] );
+			$this->assertIsInt( $size['height'] );
+			$this->assertIsString( $size['name'] );
+		}
+	}
+
+	/**
+	 * @covers gutenberg_filter_attachment_post_type_args
+	 */
+	public function test_filter_attachment_post_type_args() {
+		$post_type_object = get_post_type_object( 'attachment' );
+		$this->assertInstanceOf( Gutenberg_REST_Attachments_Controller::class, $post_type_object->get_rest_controller() );
+
+		$this->assertSame(
+			array( 'rest_controller_class' => Gutenberg_REST_Attachments_Controller::class ),
+			gutenberg_filter_attachment_post_type_args( array(), 'attachment' )
+		);
+		$this->assertSame(
+			array(),
+			gutenberg_filter_attachment_post_type_args( array(), 'post' )
+		);
+	}
+
+	/**
+	 * @covers ::gutenberg_rest_get_attachment_filesize
+	 */
+	public function test_rest_get_attachment_filesize() {
+		$attachment_id = self::factory()->attachment->create_object(
+			self::$image_file,
+			0,
+			array(
+				'post_mime_type' => 'image/jpeg',
+				'post_excerpt'   => 'A sample caption',
+			)
+		);
+
+		$this->assertSame( wp_filesize( self::$image_file ), gutenberg_rest_get_attachment_filesize( array( 'id' => $attachment_id ) ) );
+	}
+
+	/**
+	 * @covers ::gutenberg_rest_get_attachment_filename
+	 */
+	public function test_rest_get_attachment_filename() {
+		$attachment_id = self::factory()->attachment->create_object(
+			self::$image_file,
+			0,
+			array(
+				'post_mime_type' => 'image/jpeg',
+				'post_excerpt'   => 'A sample caption',
+			)
+		);
+
+		$this->assertSame( 'canola.jpg', gutenberg_rest_get_attachment_filename( array( 'id' => $attachment_id ) ) );
+	}
+
+	/**
+	 * @covers ::gutenberg_media_processing_filter_rest_index
+	 */
+	public function test_get_rest_index_should_return_additional_settings() {
+		$server = new WP_REST_Server();
+
+		$request = new WP_REST_Request( 'GET', '/' );
+		$index   = $server->dispatch( $request );
+		$data    = $index->get_data();
+
+		$this->assertArrayNotHasKey( 'image_size_threshold', $data );
+		$this->assertArrayNotHasKey( 'image_output_formats', $data );
+		$this->assertArrayNotHasKey( 'jpeg_interlaced', $data );
+		$this->assertArrayNotHasKey( 'png_interlaced', $data );
+		$this->assertArrayNotHasKey( 'gif_interlaced', $data );
+		$this->assertArrayNotHasKey( 'image_sizes', $data );
+	}
+
+	/**
+	 * @covers ::gutenberg_media_processing_filter_rest_index
+	 */
+	public function test_get_rest_index_should_return_additional_settings_can_upload_files() {
+		wp_set_current_user( self::$admin_id );
+
+		$server = new WP_REST_Server();
+
+		$request = new WP_REST_Request( 'GET', '/' );
+		$index   = $server->dispatch( $request );
+		$data    = $index->get_data();
+
+		$this->assertArrayHasKey( 'image_size_threshold', $data );
+		$this->assertArrayHasKey( 'image_output_formats', $data );
+		$this->assertArrayHasKey( 'jpeg_interlaced', $data );
+		$this->assertArrayHasKey( 'png_interlaced', $data );
+		$this->assertArrayHasKey( 'gif_interlaced', $data );
+		$this->assertArrayHasKey( 'image_sizes', $data );
+	}
+
+	/**
+	 * @covers ::gutenberg_add_crossorigin_attributes
+	 */
+	public function test_add_crossorigin_attributes() {
+		$html = <<<HTML
+<img src="https://www.someothersite.com/test1.jpg" />
+<img src="test2.jpg" />
+<audio><source src="https://www.someothersite.com/test1.mp3"></audio>
+<audio src="https://www.someothersite.com/test1.mp3"></audio>
+<audio src="/test2.mp3"></audio>
+<video><source src="https://www.someothersite.com/test1.mp4"></video>
+<video src="https://www.someothersite.com/test1.mp4"></video>
+<video src="/test2.mp4"></video>
+<script src="https://www.someothersite.com/test1.js"></script>
+<script src="/test2.js"></script>
+<link href="https://www.someothersite.com/test1.css"></link>
+<link href="/test2.css"></link>
+HTML;
+
+		$expected = <<<HTML
+<img crossorigin="anonymous" src="https://www.someothersite.com/test1.jpg" />
+<img crossorigin="anonymous" src="test2.jpg" />
+<audio crossorigin="anonymous"><source src="https://www.someothersite.com/test1.mp3"></audio>
+<audio crossorigin="anonymous" src="https://www.someothersite.com/test1.mp3"></audio>
+<audio src="/test2.mp3"></audio>
+<video crossorigin="anonymous"><source src="https://www.someothersite.com/test1.mp4"></video>
+<video crossorigin="anonymous" src="https://www.someothersite.com/test1.mp4"></video>
+<video src="/test2.mp4"></video>
+<script crossorigin="anonymous" src="https://www.someothersite.com/test1.js"></script>
+<script src="/test2.js"></script>
+<link crossorigin="anonymous" href="https://www.someothersite.com/test1.css"></link>
+<link href="/test2.css"></link>
+HTML;
+
+		$actual = gutenberg_add_crossorigin_attributes( $html );
+
+		$this->assertSame( $expected, $actual );
+	}
+
+	/**
+	 * @covers ::gutenberg_override_media_templates
+	 */
+	public function test_gutenberg_override_media_templates(): void {
+		if ( ! function_exists( '\wp_print_media_templates' ) ) {
+			require_once ABSPATH . WPINC . '/media-template.php';
+		}
+
+		gutenberg_override_media_templates();
+
+		ob_start();
+		do_action( 'admin_footer' ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
+		$output = ob_get_clean();
+
+		$this->assertStringContainsString( '<audio crossorigin="anonymous"', $output );
+		$this->assertStringContainsString( '<img crossorigin="anonymous"', $output );
+		$this->assertStringContainsString( '<video crossorigin="anonymous"', $output );
+	}
+}
diff --git a/phpunit/fixtures/block.json b/phpunit/fixtures/block.json
index 41904ae8119623..f4ef1b313c4e5f 100644
--- a/phpunit/fixtures/block.json
+++ b/phpunit/fixtures/block.json
@@ -1,5 +1,6 @@
 {
-	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
 	"name": "my-plugin/notice",
 	"title": "Notice",
 	"category": "common",
@@ -11,7 +12,7 @@
 	"icon": "star",
 	"description": "Shows warning, error or success notices…",
 	"keywords": [ "alert", "message" ],
-	"textDomain": "my-plugin",
+	"textdomain": "my-plugin",
 	"attributes": {
 		"message": {
 			"type": "string",
diff --git a/phpunit/fixtures/hooked-block/block.json b/phpunit/fixtures/hooked-block/block.json
new file mode 100644
index 00000000000000..791bc7b0a7dba5
--- /dev/null
+++ b/phpunit/fixtures/hooked-block/block.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"title": "Hooked Block",
+	"name": "tests/hooked-block",
+	"blockHooks": {
+		"tests/group-first-child": "firstChild",
+		"tests/group-last-child": "lastChild"
+	}
+}
diff --git a/phpunit/fixtures/mock-provider.php b/phpunit/fixtures/mock-provider.php
new file mode 100644
index 00000000000000..5d5d2286a1209d
--- /dev/null
+++ b/phpunit/fixtures/mock-provider.php
@@ -0,0 +1,26 @@
+<?php
+
+class Mock_Provider extends WP_Fonts_Provider {
+	/**
+	 * The provider's unique ID.
+	 *
+	 * @var string
+	 */
+	protected $id = 'mock';
+
+	public function get_css() {
+		$handles = array_keys( $this->fonts );
+		return 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-fonts-mock" attr="some-attr">%s</mock>\n';
+	}
+}
diff --git a/phpunit/fixtures/pattern-directory/browse-all.json b/phpunit/fixtures/pattern-directory/browse-all.json
new file mode 100644
index 00000000000000..27dca1b4b38867
--- /dev/null
+++ b/phpunit/fixtures/pattern-directory/browse-all.json
@@ -0,0 +1,56 @@
+[
+	{
+		"id": 31,
+		"title": { "rendered": "Heading and paragraph" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"has-large-font-size\"><span style=\"color:#ba0c49\" class=\"has-inline-color\"><strong>2</strong>.</span><br>Which treats of the first sally the ingenious Don Quixote made from home</h2>\n\n\n\n<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A heading preceded by a chapter number, and followed by a paragraph.",
+			"wpop_keywords": "blog post",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": [ "core/heading" ]
+		},
+		"category_slugs": [ "text" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"fontSize\":\"large\"} -->\n<h2 class=\"has-large-font-size\"><span style=\"color:#ba0c49\" class=\"has-inline-color\"><strong>2</strong>.</span><br>Which treats of the first sally the ingenious Don Quixote made from home</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->"
+	},
+	{
+		"id": 25,
+		"title": { "rendered": "Large header with a heading" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-cover alignwide has-background-dim-20 has-background-dim is-position-center-center\" style=\"background-image:url(https://s.w.org/images/core/5.5/don-quixote-06.jpg);min-height:375px;background-position:40% 26%\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-text-color\" style=\"color:#fffffa;font-size:74px;line-height:1.1\"><strong>Don Quixote</strong></p>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A large hero section with an example background image and a heading in the center.",
+			"wpop_keywords": "header, hero",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": []
+		},
+		"category_slugs": [ "header" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:cover {\"url\":\"https:\\/\\/s.w.org\\/images\\/core\\/5.5\\/don-quixote-06.jpg\",\"id\":165,\"dimRatio\":15,\"focalPoint\":{\"x\":\"0.40\",\"y\":\"0.26\"},\"minHeight\":375,\"minHeightUnit\":\"px\",\"contentPosition\":\"center center\",\"align\":\"wide\",\"className\":\"is-position-center-center\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim-20 has-background-dim is-position-center-center\" style=\"background-image:url(https://s.w.org/images/core/5.5/don-quixote-06.jpg);min-height:375px;background-position:40% 26%\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title\\u2026\",\"style\":{\"typography\":{\"fontSize\":74,\"lineHeight\":\"1.1\"},\"color\":{\"text\":\"#fffffa\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#fffffa;font-size:74px;line-height:1.1\"><strong>Don Quixote</strong></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->"
+	},
+	{
+		"id": 26,
+		"title": { "rendered": "Large header with a heading and a button" },
+		"content": {
+			"rendered": "\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center\" style=\"background:linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%);min-height:575px\"><div class=\"wp-block-cover__inner-container\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:12%\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n\n\n\n<div class=\"wp-block-column\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n\n\n\n<p class=\"has-text-align-left has-text-color\" style=\"color:#fffffa;font-size:68px;line-height:1.2\"><strong>Thou hast seen</strong><br><strong>nothing yet</strong></p>\n\n\n\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:3px;background-color:#fffffa;color:#00000a\">Read now</a></div>\n</div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:12%\">\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n</div>\n</div>\n</div></div>\n",
+			"protected": false
+		},
+		"meta": {
+			"spay_email": "",
+			"wpop_description": "A large hero section with a bright gradient background, a big heading and a filled button.",
+			"wpop_keywords": "call to action, hero section",
+			"wpop_viewport_width": 1000,
+			"wpop_block_types": []
+		},
+		"category_slugs": [ "header" ],
+		"keyword_slugs": [ "core" ],
+		"pattern_content": "<!-- wp:cover {\"minHeight\":575,\"minHeightUnit\":\"px\",\"customGradient\":\"linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%)\",\"contentPosition\":\"center center\",\"align\":\"wide\",\"className\":\"is-position-center-center\"} -->\n<div class=\"wp-block-cover alignwide has-background-dim has-background-gradient is-position-center-center\" style=\"background:linear-gradient(135deg,rgb(249,72,72) 1%,rgb(179,22,22) 100%);min-height:575px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"width\":\"12%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:12%\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:paragraph {\"align\":\"left\",\"placeholder\":\"Write title\\u2026\",\"style\":{\"typography\":{\"fontSize\":68,\"lineHeight\":\"1.2\"},\"color\":{\"text\":\"#fffffa\"}}} -->\n<p class=\"has-text-align-left has-text-color\" style=\"color:#fffffa;font-size:68px;line-height:1.2\"><strong>Thou hast seen</strong><br><strong>nothing yet</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":3,\"style\":{\"color\":{\"background\":\"#fffffa\",\"text\":\"#00000a\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:3px;background-color:#fffffa;color:#00000a\">Read now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->\n\n<!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":\"12%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:12%\"><!-- wp:spacer -->\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:cover -->"
+	}
+]
diff --git a/phpunit/fixtures/variations.php b/phpunit/fixtures/variations.php
new file mode 100644
index 00000000000000..bed66d9544176b
--- /dev/null
+++ b/phpunit/fixtures/variations.php
@@ -0,0 +1,10 @@
+<?php
+
+return array(
+	array(
+		'name'        => 'warning',
+		'title'       => 'warning',
+		'description' => 'Shows warning.',
+		'keywords'    => array( 'warning' ),
+	),
+);
diff --git a/phpunit/html/wp-html-tag-processor-test.php b/phpunit/html/wp-html-tag-processor-test.php
deleted file mode 100644
index 273cbddddea4bf..00000000000000
--- a/phpunit/html/wp-html-tag-processor-test.php
+++ /dev/null
@@ -1,1325 +0,0 @@
-<?php
-/**
- * Unit tests covering WP_HTML_Tag_Processor functionality.
- *
- * @package WordPress
- * @subpackage HTML
- */
-
-require_once __DIR__ . '/../../lib/experimental/html/index.php';
-
-/**
- * @group html
- *
- * @coversDefaultClass WP_HTML_Tag_Processor
- */
-class WP_HTML_Tag_Processor_Test extends WP_UnitTestCase {
-	const HTML_SIMPLE       = '<div id="first"><span id="second">Text</span></div>';
-	const HTML_WITH_CLASSES = '<div class="main with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>';
-	const HTML_MALFORMED    = '<div><span class="d-md-none" Notifications</span><span class="d-none d-md-inline">Back to notifications</span></div>';
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers get_tag
-	 */
-	public function test_get_tag_returns_null_before_finding_tags() {
-		$p = new WP_HTML_Tag_Processor( '<div>Test</div>' );
-		$this->assertNull( $p->get_tag() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_tag
-	 */
-	public function test_get_tag_returns_null_when_not_in_open_tag() {
-		$p = new WP_HTML_Tag_Processor( '<div>Test</div>' );
-		$this->assertFalse( $p->next_tag( 'p' ), 'Querying a non-existing tag did not return false' );
-		$this->assertNull( $p->get_tag(), 'Accessing a non-existing tag did not return null' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_tag
-	 */
-	public function test_get_tag_returns_open_tag_name() {
-		$p = new WP_HTML_Tag_Processor( '<div>Test</div>' );
-		$this->assertTrue( $p->next_tag( 'div' ), 'Querying an existing tag did not return true' );
-		$this->assertSame( 'DIV', $p->get_tag(), 'Accessing an existing tag name did not return "div"' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_null_before_finding_tags() {
-		$p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-		$this->assertNull( $p->get_attribute( 'class' ) );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_null_when_not_in_open_tag() {
-		$p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-		$this->assertFalse( $p->next_tag( 'p' ), 'Querying a non-existing tag did not return false' );
-		$this->assertNull( $p->get_attribute( 'class' ), 'Accessing an attribute of a non-existing tag did not return null' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_null_when_attribute_missing() {
-		$p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-		$this->assertTrue( $p->next_tag( 'div' ), 'Querying an existing tag did not return true' );
-		$this->assertNull( $p->get_attribute( 'test-id' ), 'Accessing a non-existing attribute did not return null' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_attribute_value() {
-		$p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-		$this->assertTrue( $p->next_tag( 'div' ), 'Querying an existing tag did not return true' );
-		$this->assertSame( 'test', $p->get_attribute( 'class' ), 'Accessing a class="test" attribute value did not return "test"' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_true_for_boolean_attribute() {
-		$p = new WP_HTML_Tag_Processor( '<div enabled class="test">Test</div>' );
-		$this->assertTrue( $p->next_tag( array( 'class_name' => 'test' ) ), 'Querying an existing tag did not return true' );
-		$this->assertTrue( $p->get_attribute( 'enabled' ), 'Accessing a boolean "enabled" attribute value did not return true' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_get_attribute_returns_string_for_truthy_attributes() {
-		$p = new WP_HTML_Tag_Processor( '<div enabled=enabled checked=1 hidden="true" class="test">Test</div>' );
-		$this->assertTrue( $p->next_tag( array() ), 'Querying an existing tag did not return true' );
-		$this->assertSame( 'enabled', $p->get_attribute( 'enabled' ), 'Accessing a boolean "enabled" attribute value did not return true' );
-		$this->assertSame( '1', $p->get_attribute( 'checked' ), 'Accessing a checked=1 attribute value did not return "1"' );
-		$this->assertSame( 'true', $p->get_attribute( 'hidden' ), 'Accessing a hidden="true" attribute value did not return "true"' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers WP_HTML_Tag_Processor::get_attribute
-	 */
-	public function test_get_attribute_decodes_html_character_references() {
-		$p = new WP_HTML_Tag_Processor( '<div id="the &quot;grande&quot; is &lt; &#x033;&#50;oz&dagger;"></div>' );
-		$p->next_tag();
-		$this->assertSame( 'the "grande" is < 32oz†', $p->get_attribute( 'id' ), 'HTML Attribute value was returned without decoding character references' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_attribute
-	 */
-	public function test_attributes_parser_treats_slash_as_attribute_separator() {
-		$p = new WP_HTML_Tag_Processor( '<div a/b/c/d/e="test">Test</div>' );
-		$this->assertTrue( $p->next_tag( array() ), 'Querying an existing tag did not return true' );
-		$this->assertTrue( $p->get_attribute( 'a' ), 'Accessing an existing attribute did not return true' );
-		$this->assertTrue( $p->get_attribute( 'b' ), 'Accessing an existing attribute did not return true' );
-		$this->assertTrue( $p->get_attribute( 'c' ), 'Accessing an existing attribute did not return true' );
-		$this->assertTrue( $p->get_attribute( 'd' ), 'Accessing an existing attribute did not return true' );
-		$this->assertSame( 'test', $p->get_attribute( 'e' ), 'Accessing an existing e="test" did not return "test"' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers __toString
-	 */
-	public function tostring_returns_updated_html() {
-		$p = new WP_HTML_Tag_Processor( '<hr id="remove" /><div enabled class="test">Test</div><span id="span-id"></span>' );
-		$p->next_tag();
-		$p->remove_attribute( 'id' );
-
-		$p->next_tag();
-		$p->set_attribute( 'id', 'div-id-1' );
-		$p->add_class( 'new_class_1' );
-
-		$this->assertEquals(
-			$p->get_updated_html(),
-			(string) $p
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers get_updated_html
-	 */
-	public function test_get_updated_html_applies_the_updates_so_far_and_keeps_the_processor_on_the_current_tag() {
-		$p = new WP_HTML_Tag_Processor( '<hr id="remove" /><div enabled class="test">Test</div><span id="span-id"></span>' );
-		$p->next_tag();
-		$p->remove_attribute( 'id' );
-
-		$p->next_tag();
-		$p->set_attribute( 'id', 'div-id-1' );
-		$p->add_class( 'new_class_1' );
-		$this->assertSame(
-			'<hr  /><div id="div-id-1" enabled class="test new_class_1">Test</div><span id="span-id"></span>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating the attributes of the second tag returned different HTML than expected'
-		);
-
-		$p->set_attribute( 'id', 'div-id-2' );
-		$p->add_class( 'new_class_2' );
-		$this->assertSame(
-			'<hr  /><div id="div-id-2" enabled class="test new_class_1 new_class_2">Test</div><span id="span-id"></span>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating the attributes of the second tag for the second time returned different HTML than expected'
-		);
-
-		$p->next_tag();
-		$p->remove_attribute( 'id' );
-		$this->assertSame(
-			'<hr  /><div id="div-id-2" enabled class="test new_class_1 new_class_2">Test</div><span ></span>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after removing the id attribute of the third tag returned different HTML than expected'
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers get_updated_html
-	 */
-	public function test_get_updated_html_without_updating_any_attributes_returns_the_original_html() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$this->assertSame( self::HTML_SIMPLE, $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 */
-	public function test_next_tag_with_no_arguments_should_find_the_next_existing_tag() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$this->assertTrue( $p->next_tag(), 'Querying an existing tag did not return true' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 */
-	public function test_next_tag_should_return_false_for_a_non_existing_tag() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$this->assertFalse( $p->next_tag( 'p' ), 'Querying a non-existing tag did not return false' );
-	}
-
-	/**
-	 * @covers next_tag
-	 * @covers is_tag_closer
-	 */
-	public function test_next_tag_should_stop_on_closers_only_when_requested() {
-		$p = new WP_HTML_Tag_Processor( '<div><img /></div>' );
-		$this->assertTrue( $p->next_tag( array( 'tag_name' => 'div' ) ), 'Did not find desired tag opener' );
-		$this->assertFalse( $p->next_tag( array( 'tag_name' => 'div' ) ), 'Visited an unwanted tag, a tag closer' );
-
-		$p = new WP_HTML_Tag_Processor( '<div><img /></div>' );
-		$p->next_tag(
-			array(
-				'tag_name'    => 'div',
-				'tag_closers' => 'visit',
-			)
-		);
-		$this->assertFalse( $p->is_tag_closer(), 'Indicated a tag opener is a tag closer' );
-		$this->assertTrue(
-			$p->next_tag(
-				array(
-					'tag_name'    => 'div',
-					'tag_closers' => 'visit',
-				)
-			),
-			'Did not stop at desired tag closer'
-		);
-		$this->assertTrue( $p->is_tag_closer(), 'Indicated a tag closer is a tag opener' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers get_updated_html
-	 */
-	public function test_set_attribute_on_a_non_existing_tag_does_not_change_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$this->assertFalse( $p->next_tag( 'p' ), 'Querying a non-existing tag did not return false' );
-		$this->assertFalse( $p->next_tag( 'div' ), 'Querying a non-existing tag did not return false' );
-		$p->set_attribute( 'id', 'primary' );
-		$this->assertSame(
-			self::HTML_SIMPLE,
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating a non-existing tag returned an HTML that was different from the original HTML'
-		);
-	}
-
-	public function test_attribute_ops_on_tag_closer_do_not_change_the_markup() {
-		$p = new WP_HTML_Tag_Processor( '<div id=3></div invalid-id=4>' );
-		$p->next_tag(
-			array(
-				'tag_name'    => 'div',
-				'tag_closers' => 'visit',
-			)
-		);
-		$this->assertFalse( $p->is_tag_closer(), 'Skipped tag opener' );
-		$p->next_tag(
-			array(
-				'tag_name'    => 'div',
-				'tag_closers' => 'visit',
-			)
-		);
-		$this->assertTrue( $p->is_tag_closer(), 'Skipped tag closer' );
-		$this->assertFalse( $p->set_attribute( 'id', 'test' ), "Allowed setting an attribute on a tag closer when it shouldn't have" );
-		$this->assertFalse( $p->remove_attribute( 'invalid-id' ), "Allowed removing an attribute on a tag closer when it shouldn't have" );
-		$this->assertFalse( $p->add_class( 'sneaky' ), "Allowed adding a class on a tag closer when it shouldn't have" );
-		$this->assertFalse( $p->remove_class( 'not-appearing-in-this-test' ), "Allowed removing a class on a tag closer when it shouldn't have" );
-		$this->assertSame(
-			'<div id=3></div invalid-id=4>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating a non-existing tag returned an HTML that was different from the original HTML'
-		);
-	}
-
-	/**
-	 * Passing a double quote inside of an attribute values could lead to an XSS attack as follows:
-	 *
-	 * <code>
-	 *     $p = new WP_HTML_Tag_Processor( '<div class="header"></div>' );
-	 *     $p->next_tag();
-	 *     $p->set_attribute('class', '" onclick="alert');
-	 *     echo $p;
-	 *     // <div class="" onclick="alert"></div>
-	 * </code>
-	 *
-	 * To prevent it, `set_attribute` calls `esc_attr()` on its given values.
-	 *
-	 * <code>
-	 *    <div class="&quot; onclick=&quot;alert"></div>
-	 * </code>
-	 *
-	 * @ticket 56299
-	 *
-	 * @dataProvider data_set_attribute_escapable_values
-	 * @covers set_attribute
-	 */
-	public function test_set_attribute_prevents_xss( $attribute_value ) {
-		$p = new WP_HTML_Tag_Processor( '<div></div>' );
-		$p->next_tag();
-		$p->set_attribute( 'test', $attribute_value );
-
-		/*
-		 * Testing the escaping is hard using tools that properly parse
-		 * HTML because they might interpret the escaped values. It's hard
-		 * with tools that don't understand HTML because they might get
-		 * confused by improperly-escaped values.
-		 *
-		 * For this test, since we control the input HTML we're going to
-		 * do what looks like the opposite of what we want to be doing with
-		 * this library but are only doing so because we have full control
-		 * over the content and because we want to look at the raw values.
-		 */
-		$match = null;
-		preg_match( '~^<div test=(.*)></div>$~', $p->get_updated_html(), $match );
-		list( , $actual_value ) = $match;
-
-		$this->assertEquals( $actual_value, '"' . esc_attr( $attribute_value ) . '"' );
-	}
-
-	/**
-	 * Data provider with HTML attribute values that might need escaping.
-	 */
-	public function data_set_attribute_escapable_values() {
-		return array(
-			array( '"' ),
-			array( '&quot;' ),
-			array( '&' ),
-			array( '&amp;' ),
-			array( '&euro;' ),
-			array( "'" ),
-			array( '<>' ),
-			array( '&quot";' ),
-			array( '" onclick="alert(\'1\');"><span onclick=""></span><script>alert("1")</script>' ),
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_set_attribute_with_a_non_existing_attribute_adds_a_new_attribute_to_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->set_attribute( 'test-attribute', 'test-value' );
-		$this->assertSame( '<div test-attribute="test-value" id="first"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * According to HTML spec, only the first instance of an attribute counts.
-	 * The other ones are ignored.
-	 *
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_update_first_when_duplicated_attribute() {
-		$p = new WP_HTML_Tag_Processor( '<div id="update-me" id="ignored-id"><span id="second">Text</span></div>' );
-		$p->next_tag();
-		$p->set_attribute( 'id', 'updated-id' );
-		$this->assertSame( '<div id="updated-id" id="ignored-id"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_set_attribute_with_an_existing_attribute_name_updates_its_value_in_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->set_attribute( 'id', 'new-id' );
-		$this->assertSame( '<div id="new-id"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_next_tag_and_set_attribute_in_a_loop_update_all_tags_in_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		while ( $p->next_tag() ) {
-			$p->set_attribute( 'data-foo', 'bar' );
-		}
-
-		$this->assertSame( '<div data-foo="bar" id="first"><span data-foo="bar" id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * Removing an attribute that's listed many times, e.g. `<div id="a" id="b" />` should remove
-	 * all its instances and output just `<div />`.
-	 *
-	 * Today, however, WP_HTML_Tag_Processor only removes the first such attribute. It seems like a corner case
-	 * and introducing additional complexity to correctly handle this scenario doesn't seem to be worth it.
-	 * Let's revisit if and when this becomes a problem.
-	 *
-	 * This test is in place to confirm this behavior, while incorrect, is well-defined.
-	 *
-	 * @ticket 56299
-	 *
-	 * @covers remove_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_remove_first_when_duplicated_attribute() {
-		$p = new WP_HTML_Tag_Processor( '<div id="update-me" id="ignored-id"><span id="second">Text</span></div>' );
-		$p->next_tag();
-		$p->remove_attribute( 'id' );
-		$this->assertSame( '<div  id="ignored-id"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_remove_attribute_with_an_existing_attribute_name_removes_it_from_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->remove_attribute( 'id' );
-		$this->assertSame( '<div ><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_remove_attribute_with_a_non_existing_attribute_name_does_not_change_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->remove_attribute( 'no-such-attribute' );
-		$this->assertSame( self::HTML_SIMPLE, $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_add_class_creates_a_class_attribute_when_there_is_none() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->add_class( 'foo-class' );
-		$this->assertSame( '<div class="foo-class" id="first"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_calling_add_class_twice_creates_a_class_attribute_with_both_class_names_when_there_is_no_class_attribute() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->add_class( 'foo-class' );
-		$p->add_class( 'bar-class' );
-		$this->assertSame( '<div class="foo-class bar-class" id="first"><span id="second">Text</span></div>', $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_remove_class_does_not_change_the_markup_when_there_is_no_class_attribute() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_SIMPLE );
-		$p->next_tag();
-		$p->remove_class( 'foo-class' );
-		$this->assertSame( self::HTML_SIMPLE, $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_add_class_appends_class_names_to_the_existing_class_attribute_when_one_already_exists() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->add_class( 'foo-class' );
-		$p->add_class( 'bar-class' );
-		$this->assertSame(
-			'<div class="main with-border foo-class bar-class" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_remove_class_removes_a_single_class_from_the_class_attribute_when_one_exists() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->remove_class( 'main' );
-		$this->assertSame(
-			'<div class=" with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_calling_remove_class_with_all_listed_class_names_removes_the_existing_class_attribute_from_the_markup() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->remove_class( 'main' );
-		$p->remove_class( 'with-border' );
-		$this->assertSame(
-			'<div  id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_add_class_does_not_add_duplicate_class_names() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->add_class( 'with-border' );
-		$this->assertSame(
-			'<div class="main with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_add_class_preserves_class_name_order_when_a_duplicate_class_name_is_added() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->add_class( 'main' );
-		$this->assertSame(
-			'<div class="main with-border" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers get_updated_html
-	 */
-	public function test_add_class_when_there_is_a_class_attribute_with_excessive_whitespaces() {
-		$p = new WP_HTML_Tag_Processor(
-			'<div class="   main   with-border   " id="first"><span class="not-main bold with-border" id="second">Text</span></div>'
-		);
-		$p->next_tag();
-		$p->add_class( 'foo-class' );
-		$this->assertSame(
-			'<div class="   main   with-border foo-class" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_remove_class_preserves_whitespaces_when_there_is_a_class_attribute_with_excessive_whitespaces() {
-		$p = new WP_HTML_Tag_Processor(
-			'<div class="   main   with-border   " id="first"><span class="not-main bold with-border" id="second">Text</span></div>'
-		);
-		$p->next_tag();
-		$p->remove_class( 'with-border' );
-		$this->assertSame(
-			'<div class="   main" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_removing_all_classes_removes_the_existing_class_attribute_from_the_markup_even_when_excessive_whitespaces_are_present() {
-		$p = new WP_HTML_Tag_Processor(
-			'<div class="   main   with-border   " id="first"><span class="not-main bold with-border" id="second">Text</span></div>'
-		);
-		$p->next_tag();
-		$p->remove_class( 'main' );
-		$p->remove_class( 'with-border' );
-		$this->assertSame(
-			'<div  id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * When both set_attribute('class', $value) and add_class( $different_value ) are called,
-	 * the final class name should be $value. In other words, the `add_class` call should be ignored,
-	 * and the `set_attribute` call should win. This holds regardless of the order in which these methods
-	 * are called.
-	 *
-	 * @ticket 56299
-	 *
-	 * @covers add_class
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_set_attribute_takes_priority_over_add_class() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->add_class( 'add_class' );
-		$p->set_attribute( 'class', 'set_attribute' );
-		$this->assertSame(
-			'<div class="set_attribute" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating first tag\'s attributes did not return the expected HTML'
-		);
-
-		$p = new WP_HTML_Tag_Processor( self::HTML_WITH_CLASSES );
-		$p->next_tag();
-		$p->set_attribute( 'class', 'set_attribute' );
-		$p->add_class( 'add_class' );
-		$this->assertSame(
-			'<div class="set_attribute" id="first"><span class="not-main bold with-border" id="second">Text</span></div>',
-			$p->get_updated_html(),
-			'Calling get_updated_html after updating second tag\'s attributes did not return the expected HTML'
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers remove_attribute
-	 * @covers add_class
-	 * @covers remove_class
-	 * @covers get_updated_html
-	 */
-	public function test_advanced_use_case() {
-		$input = <<<HTML
-<div selected class="merge-message" checked>
-	<div class="select-menu d-inline-block">
-		<div checked class="BtnGroup MixedCaseHTML position-relative" />
-		<div checked class="BtnGroup MixedCaseHTML position-relative">
-			<button type="button" class="merge-box-button btn-group-merge rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Merge pull request
-			</button>
-
-			<button type="button" class="merge-box-button btn-group-squash rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Squash and merge
-			</button>
-
-			<button type="button" class="merge-box-button btn-group-rebase rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Rebase and merge
-			</button>
-
-			<button aria-label="Select merge method" disabled="disabled" type="button" data-view-component="true" class="select-menu-button btn BtnGroup-item"></button>
-		</div>
-	</div>
-</div>
-HTML;
-
-		$expected_output = <<<HTML
-<div data-details="{ &quot;key&quot;: &quot;value&quot; }" selected class="merge-message is-processed" checked>
-	<div class="select-menu d-inline-block">
-		<div checked class=" MixedCaseHTML position-relative button-group Another-Mixed-Case" />
-		<div checked class=" MixedCaseHTML position-relative button-group Another-Mixed-Case">
-			<button type="button" class="merge-box-button btn-group-merge rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Merge pull request
-			</button>
-
-			<button type="button" class="merge-box-button btn-group-squash rounded-left-2 btn  BtnGroup-item js-details-target hx_create-pr-button" aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Squash and merge
-			</button>
-
-			<button type="button"  aria-expanded="false" data-details-container=".js-merge-pr" disabled="">
-			  Rebase and merge
-			</button>
-
-			<button aria-label="Select merge method" disabled="disabled" type="button" data-view-component="true" class="select-menu-button btn BtnGroup-item"></button>
-		</div>
-	</div>
-</div>
-HTML;
-
-		$p = new WP_HTML_Tag_Processor( $input );
-		$this->assertTrue( $p->next_tag( 'div' ), 'Querying an existing tag did not return true' );
-		$p->set_attribute( 'data-details', '{ "key": "value" }' );
-		$p->add_class( 'is-processed' );
-		$this->assertTrue(
-			$p->next_tag(
-				array(
-					'tag_name'   => 'div',
-					'class_name' => 'BtnGroup',
-				)
-			),
-			'Querying an existing tag did not return true'
-		);
-		$p->remove_class( 'BtnGroup' );
-		$p->add_class( 'button-group' );
-		$p->add_class( 'Another-Mixed-Case' );
-		$this->assertTrue(
-			$p->next_tag(
-				array(
-					'tag_name'   => 'div',
-					'class_name' => 'BtnGroup',
-				)
-			),
-			'Querying an existing tag did not return true'
-		);
-		$p->remove_class( 'BtnGroup' );
-		$p->add_class( 'button-group' );
-		$p->add_class( 'Another-Mixed-Case' );
-		$this->assertTrue(
-			$p->next_tag(
-				array(
-					'tag_name'     => 'button',
-					'class_name'   => 'btn',
-					'match_offset' => 3,
-				)
-			),
-			'Querying an existing tag did not return true'
-		);
-		$p->remove_attribute( 'class' );
-		$this->assertFalse( $p->next_tag( 'non-existent' ), 'Querying a non-existing tag did not return false' );
-		$p->set_attribute( 'class', 'test' );
-		$this->assertSame( $expected_output, $p->get_updated_html(), 'Calling get_updated_html after updating the attributes did not return the expected HTML' );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers remove_attribute
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_correctly_parses_html_attributes_wrapped_in_single_quotation_marks() {
-		$p = new WP_HTML_Tag_Processor(
-			'<div id=\'first\'><span id=\'second\'>Text</span></div>'
-		);
-		$p->next_tag(
-			array(
-				'tag_name' => 'div',
-				'id'       => 'first',
-			)
-		);
-		$p->remove_attribute( 'id' );
-		$p->next_tag(
-			array(
-				'tag_name' => 'span',
-				'id'       => 'second',
-			)
-		);
-		$p->set_attribute( 'id', 'single-quote' );
-		$this->assertSame(
-			'<div ><span id="single-quote">Text</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_set_attribute_with_value_equals_to_true_adds_a_boolean_html_attribute_with_implicit_value() {
-		$p = new WP_HTML_Tag_Processor(
-			'<form action="/action_page.php"><input type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>'
-		);
-		$p->next_tag( 'input' );
-		$p->set_attribute( 'checked', true );
-		$this->assertSame(
-			'<form action="/action_page.php"><input checked type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_setting_a_boolean_attribute_to_false_removes_it_from_the_markup() {
-		$p = new WP_HTML_Tag_Processor(
-			'<form action="/action_page.php"><input checked type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>'
-		);
-		$p->next_tag( 'input' );
-		$p->set_attribute( 'checked', false );
-		$this->assertSame(
-			'<form action="/action_page.php"><input  type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_setting_a_missing_attribute_to_false_does_not_change_the_markup() {
-		$html_input = '<form action="/action_page.php"><input type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>';
-		$p          = new WP_HTML_Tag_Processor( $html_input );
-		$p->next_tag( 'input' );
-		$p->set_attribute( 'checked', false );
-		$this->assertSame( $html_input, $p->get_updated_html() );
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_setting_a_boolean_attribute_to_a_string_value_adds_explicit_value_to_the_markup() {
-		$p = new WP_HTML_Tag_Processor(
-			'<form action="/action_page.php"><input checked type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>'
-		);
-		$p->next_tag( 'input' );
-		$p->set_attribute( 'checked', 'checked' );
-		$this->assertSame(
-			'<form action="/action_page.php"><input checked="checked" type="checkbox" name="vehicle" value="Bike"><label for="vehicle">I have a bike</label></form>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers get_tag
-	 * @covers next_tag
-	 */
-	public function test_unclosed_script_tag_should_not_cause_an_infinite_loop() {
-		$p = new WP_HTML_Tag_Processor( '<script>' );
-		$p->next_tag();
-		$this->assertSame( 'SCRIPT', $p->get_tag() );
-		$p->next_tag();
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 *
-	 * @dataProvider data_script_state
-	 */
-	public function test_next_tag_ignores_the_contents_of_a_script_tag( $script_then_div ) {
-		$p = new WP_HTML_Tag_Processor( $script_then_div );
-		$p->next_tag();
-		$this->assertSame( 'SCRIPT', $p->get_tag(), 'The first found tag was not "script"' );
-		$p->next_tag();
-		$this->assertSame( 'DIV', $p->get_tag(), 'The second found tag was not "div"' );
-	}
-
-	/**
-	 * Data provider for test_ignores_contents_of_a_script_tag().
-	 *
-	 * @return array {
-	 *     @type array {
-	 *         @type string $script_then_div The HTML snippet containing script and div tags.
-	 *     }
-	 * }
-	 */
-	public function data_script_state() {
-		$examples = array();
-
-		$examples['Simple script tag'] = array(
-			'<script><span class="d-none d-md-inline">Back to notifications</span></script><div></div>',
-		);
-
-		$examples['Simple uppercase script tag'] = array(
-			'<script><span class="d-none d-md-inline">Back to notifications</span></SCRIPT><div></div>',
-		);
-
-		$examples['Script with a comment opener inside should end at the next script tag closer (dash dash escaped state)'] = array(
-			'<script class="d-md-none"><!--</script><div></div>-->',
-		);
-
-		$examples['Script with a comment opener and a script tag opener inside should end two script tag closer later (double escaped state)'] = array(
-			'<script class="d-md-none"><!--<script><span1></script><span2></span2></script><div></div>-->',
-		);
-
-		$examples['Double escaped script with a tricky opener'] = array(
-			'<script class="d-md-none"><!--<script attr="</script>"></script>"><div></div>',
-		);
-
-		$examples['Double escaped script with a tricky closer'] = array(
-			'<script class="d-md-none"><!--<script><span></script attr="</script>"><div></div>',
-		);
-
-		$examples['Double escaped, then escaped, then double escaped'] = array(
-			'<script class="d-md-none"><!--<script></script><script></script><span></span></script><div></div>',
-		);
-
-		$examples['Script with a commented a script tag opener inside should at the next tag closer (dash dash escaped state)'] = array(
-			'<script class="d-md-none"><!--<script>--><span></script><div></div>-->',
-		);
-
-		$examples['Script closer with another script tag in closer attributes'] = array(
-			'<script><span class="d-none d-md-inline">Back to notifications</title</span></script <script><div></div>',
-		);
-
-		$examples['Script closer with attributes'] = array(
-			'<script class="d-md-none"><span class="d-none d-md-inline">Back to notifications</span></script id="test"><div></div>',
-		);
-
-		$examples['Script opener with title closer inside'] = array(
-			'<script class="d-md-none"></title></script><div></div>',
-		);
-
-		$examples['Complex script with many parsing states'] = array(
-			'<script class="d-md-none"><!--<script>--><scRipt><span><!--<span><Script</script>--></scripT><div></div>-->',
-		);
-		return $examples;
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 *
-	 * @dataProvider data_rcdata_state
-	 */
-	public function test_next_tag_ignores_the_contents_of_a_rcdata_tag( $rcdata_then_div, $rcdata_tag ) {
-		$p = new WP_HTML_Tag_Processor( $rcdata_then_div );
-		$p->next_tag();
-		$this->assertSame( strtoupper( $rcdata_tag ), $p->get_tag(), "The first found tag was not '$rcdata_tag'" );
-		$p->next_tag();
-		$this->assertSame( 'DIV', $p->get_tag(), "The second found tag was not 'div'" );
-	}
-
-	/**
-	 * Data provider for test_ignores_contents_of_a_rcdata_tag().
-	 *
-	 * @return array {
-	 *     @type array {
-	 *         @type string $rcdata_then_div The HTML snippet containing RCDATA and div tags.
-	 *         @type string $rcdata_tag      The RCDATA tag.
-	 *     }
-	 * }
-	 */
-	public function data_rcdata_state() {
-		$examples                    = array();
-		$examples['Simple textarea'] = array(
-			'<textarea><span class="d-none d-md-inline">Back to notifications</span></textarea><div></div>',
-			'TEXTAREA',
-		);
-
-		$examples['Simple title'] = array(
-			'<title><span class="d-none d-md-inline">Back to notifications</title</span></title><div></div>',
-			'TITLE',
-		);
-
-		$examples['Comment opener inside a textarea tag should be ignored'] = array(
-			'<textarea class="d-md-none"><!--</textarea><div></div>-->',
-			'TEXTAREA',
-		);
-
-		$examples['Textarea closer with another textarea tag in closer attributes'] = array(
-			'<textarea><span class="d-none d-md-inline">Back to notifications</title</span></textarea <textarea><div></div>',
-			'TEXTAREA',
-		);
-
-		$examples['Textarea closer with attributes'] = array(
-			'<textarea class="d-md-none"><span class="d-none d-md-inline">Back to notifications</span></textarea id="test"><div></div>',
-			'TEXTAREA',
-		);
-
-		$examples['Textarea opener with title closer inside'] = array(
-			'<textarea class="d-md-none"></title></textarea><div></div>',
-			'TEXTAREA',
-		);
-		return $examples;
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_can_query_and_update_wrongly_nested_tags() {
-		$p = new WP_HTML_Tag_Processor(
-			'<span>123<p>456</span>789</p>'
-		);
-		$p->next_tag( 'span' );
-		$p->set_attribute( 'class', 'span-class' );
-		$p->next_tag( 'p' );
-		$p->set_attribute( 'class', 'p-class' );
-		$this->assertSame(
-			'<span class="span-class">123<p class="p-class">456</span>789</p>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers remove_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_removing_attributes_works_even_in_malformed_html() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_MALFORMED );
-		$p->next_tag( 'span' );
-		$p->remove_attribute( 'Notifications<' );
-		$this->assertSame(
-			'<div><span class="d-md-none" /span><span class="d-none d-md-inline">Back to notifications</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_Tag
-	 * @covers set_attribute
-	 * @covers get_updated_html
-	 */
-	public function test_updating_attributes_works_even_in_malformed_html_1() {
-		$p = new WP_HTML_Tag_Processor( self::HTML_MALFORMED );
-		$p->next_tag( 'span' );
-		$p->set_attribute( 'id', 'first' );
-		$p->next_tag( 'span' );
-		$p->set_attribute( 'id', 'second' );
-		$this->assertSame(
-			'<div><span id="first" class="d-md-none" Notifications</span><span id="second" class="d-none d-md-inline">Back to notifications</span></div>',
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * @ticket 56299
-	 *
-	 * @covers next_tag
-	 * @covers set_attribute
-	 * @covers add_class
-	 * @covers get_updated_html
-	 *
-	 * @dataProvider data_malformed_tag
-	 */
-	public function test_updating_attributes_works_even_in_malformed_html_2( $html_input, $html_expected ) {
-		$p = new WP_HTML_Tag_Processor( $html_input );
-		$p->next_tag();
-		$p->set_attribute( 'foo', 'bar' );
-		$p->add_class( 'firstTag' );
-		$p->next_tag();
-		$p->add_class( 'secondTag' );
-		$this->assertSame(
-			$html_expected,
-			$p->get_updated_html()
-		);
-	}
-
-	/**
-	 * Data provider for test_updates_when_malformed_tag().
-	 *
-	 * @return array {
-	 *     @type array {
-	 *         @type string $html_input    The input HTML snippet.
-	 *         @type string $html_expected The expected HTML snippet after processing.
-	 *     }
-	 * }
-	 */
-	public function data_malformed_tag() {
-		$null_byte = chr( 0 );
-		$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>',
-		);
-
-		$examples['HTML tag opening inside attribute value'] = array(
-			'<pre id="<code" class="wp-block-code <code is poetry&gt;"><code>This &lt;is> a &lt;strong is="true">thing.</code></pre><span>test</span>',
-			'<pre foo="bar" id="<code" class="wp-block-code &lt;code is poetry&gt; firstTag"><code class="secondTag">This &lt;is> a &lt;strong is="true">thing.</code></pre><span>test</span>',
-		);
-
-		$examples['HTML tag brackets in attribute values and data markup'] = array(
-			'<pre id="<code-&gt;-block-&gt;" class="wp-block-code <code is poetry&gt;"><code>This &lt;is> a &lt;strong is="true">thing.</code></pre><span>test</span>',
-			'<pre foo="bar" id="<code-&gt;-block-&gt;" class="wp-block-code &lt;code is poetry&gt; firstTag"><code class="secondTag">This &lt;is> a &lt;strong is="true">thing.</code></pre><span>test</span>',
-		);
-
-		$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>',
-		);
-
-		$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>',
-		);
-
-		$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>',
-		);
-
-		$examples['Unquoted attribute value'] = array(
-			'<hr id=code><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		$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>',
-		);
-
-		$examples['1'] = array(
-			'<hr id=&quo;code><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		$examples['4'] = array(
-			'<hr title="<hr>"><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		$examples['6'] = array(
-			'<hr id"quo="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		$examples['8'] = array(
-			'<hr >id="test"><span>test</span>',
-			'<hr foo="bar" class="firstTag" >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>',
-		);
-
-		$examples['10'] = array(
-			'</><span>test</span>',
-			'</><span foo="bar" class="firstTag">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>',
-		);
-
-		$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>',
-		);
-
-		$examples['13'] = array(
-			'<?comment --><span>test</span>',
-			'<?comment --><span foo="bar" class="firstTag">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>',
-		);
-
-		$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>',
-		);
-
-		$examples['16'] = array(
-			'<hr ===name="value"><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===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>',
-		);
-
-		$examples['18'] = array(
-			'<hr =asdf="tes"><span>test</span>',
-			'<hr foo="bar" class="firstTag" =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>',
-		);
-
-		$examples['20'] = array(
-			'<hr =><span>test</span>',
-			'<hr foo="bar" class="firstTag" =><span class="secondTag">test</span>',
-		);
-
-		$examples['21'] = array(
-			'<hr =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" =5><span class="secondTag">test</span>',
-		);
-
-		$examples['22'] = array(
-			'<hr ==><span>test</span>',
-			'<hr foo="bar" class="firstTag" ==><span class="secondTag">test</span>',
-		);
-
-		$examples['23'] = array(
-			'<hr ===><span>test</span>',
-			'<hr foo="bar" class="firstTag" ===><span class="secondTag">test</span>',
-		);
-
-		$examples['24'] = array(
-			'<hr disabled><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		$examples['Multiple unclosed tags treated as a single tag'] = array(
-			'<hr id=">"code
-<hr id="value>"code
-<hr id="/>"code
-<hr id="value/>"code
-/>
-<span>test</span>',
-			'<hr foo="bar" class="firstTag" id=">"code
-<hr id="value>"code
-<hr id="/>"code
-<hr id="value/>"code
-/>
-<span class="secondTag">test</span>',
-		);
-
-		$examples['27'] = array(
-			'<hr id   =5><span>test</span>',
-			'<hr foo="bar" class="firstTag" 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>',
-		);
-
-		return $examples;
-	}
-}
diff --git a/phpunit/l10n-test.php b/phpunit/l10n-test.php
new file mode 100644
index 00000000000000..b191bbd1babc38
--- /dev/null
+++ b/phpunit/l10n-test.php
@@ -0,0 +1,100 @@
+<?php
+/**
+ * Tests_L10n_wpWordcount class
+ *
+ * @package WordPress
+ */
+
+class Tests_L10n_wpWordcount extends WP_UnitTestCase {
+	/**
+	 * Tests that words are counted correctly based on the type
+	 *
+	 * @covers ::wp_word_count
+	 *
+	 * @dataProvider data_get_string_variations
+	 *
+	 * @param string $input_string                String to count words.
+	 * @param int    $words                       Expected value if the count type is based on word.
+	 * @param int    $characters_excluding_spaces Expected value if the count type is based on single character excluding spaces.
+	 * @param int    $characters_including_spaces Expected value if the count type is based on single character including spaces.
+	 */
+	public function test_word_count( $input_string, $words, $characters_excluding_spaces, $characters_including_spaces ) {
+		$settings = array(
+			'shortcodes' => array( 'shortcode' ),
+		);
+
+		$this->assertEquals( wp_word_count( $input_string, 'words', $settings ), $words );
+		$this->assertEquals( wp_word_count( $input_string, 'characters_excluding_spaces', $settings ), $characters_excluding_spaces );
+		$this->assertEquals( wp_word_count( $input_string, 'characters_including_spaces', $settings ), $characters_including_spaces );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_get_string_variations() {
+		return array(
+			'Basic test'     => array(
+				'string'                      => 'one two three',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 13,
+			),
+			'HTML tags'      => array(
+				'string'                      => 'one <em class="test">two</em><br />three',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 12,
+			),
+			'Line breaks'    => array(
+				'string'                      => "one\ntwo\nthree",
+				'words'                       => 3,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 11,
+			),
+			'Encoded spaces' => array(
+				'string'                      => 'one&nbsp;two&#160;three',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 13,
+			),
+			'Punctuation'    => array(
+				'string'                      => "It's two three " . json_decode( '"\u2026"' ) . ' 4?',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 15,
+				'characters_including_spaces' => 19,
+			),
+			'Em dash'        => array(
+				'string'                      => 'one' . json_decode( '"\u2014"' ) . 'two--three',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 14,
+				'characters_including_spaces' => 14,
+			),
+			'Shortcodes'     => array(
+				'string'                      => 'one [shortcode attribute="value"]two[/shortcode]three',
+				'words'                       => 3,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 12,
+			),
+			'Astrals'        => array(
+				'string'                      => json_decode( '"\uD83D\uDCA9"' ),
+				'words'                       => 1,
+				'characters_excluding_spaces' => 1,
+				'characters_including_spaces' => 1,
+			),
+			'HTML comment'   => array(
+				'string'                      => 'one<!-- comment -->two three',
+				'words'                       => 2,
+				'characters_excluding_spaces' => 11,
+				'characters_including_spaces' => 12,
+			),
+			'HTML entity'    => array(
+				'string'                      => '&gt; test',
+				'words'                       => 1,
+				'characters_excluding_spaces' => 5,
+				'characters_including_spaces' => 6,
+			),
+		);
+	}
+}
diff --git a/phpunit/multisite.xml b/phpunit/multisite.xml
index 494c9a4610d07b..73bc572ab9f183 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" />
@@ -13,11 +14,13 @@
 	<testsuites>
 		<testsuite name="default">
 			<directory suffix="-test.php">./</directory>
+			<directory suffix=".php">./tests/</directory>
 		</testsuite>
 	</testsuites>
 	<groups>
 		<exclude>
 			<group>ms-excluded</group>
+			<group>fontsapi</group>
 		</exclude>
 	</groups>
 </phpunit>
diff --git a/phpunit/navigation-page-test.php b/phpunit/navigation-page-test.php
deleted file mode 100644
index 3209f77d824497..00000000000000
--- a/phpunit/navigation-page-test.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php
-/**
- * This class is supposed to test the functionality of the navigation-page.php
- *
- * @package Gutenberg
- */
-
-class WP_Navigation_Page_Test extends WP_UnitTestCase {
-	/**
-	 * @var WP_Navigation_Page_Test_Callback
-	 */
-	private $callback;
-
-	/** @var WP_Scripts */
-	private static $wp_scripts;
-
-	public static function set_up_before_class() {
-		parent::set_up_before_class();
-		global $wp_scripts;
-		static::$wp_scripts = clone $wp_scripts;
-	}
-
-	public static function tear_down_after_class() {
-		parent::tear_down_after_class();
-		global $wp_scripts;
-		$wp_scripts = static::$wp_scripts;
-	}
-
-	public function set_up() {
-		parent::set_up();
-		$this->callback = $this->createMock( WP_Navigation_Page_Test_Callback::class );
-	}
-
-	public function tear_down() {
-		parent::tear_down();
-		remove_filter( 'navigation_editor_preload_paths', array( $this->callback, 'preload_paths_callback' ) );
-		remove_filter( 'wp_get_nav_menus', array( $this->callback, 'wp_nav_menus_callback' ) );
-		remove_filter( 'rest_pre_dispatch', array( $this->callback, 'preload_menus_rest_pre_dispatch_callback' ) );
-	}
-
-	public function test_gutenberg_navigation_init_function_generates_correct_preload_paths() {
-		add_filter( 'navigation_editor_preload_paths', array( $this->callback, 'preload_paths_callback' ) );
-		add_filter( 'wp_get_nav_menus', array( $this->callback, 'wp_nav_menus_callback' ) );
-
-		$menu_id                = mt_rand( 1, 1000 );
-		$expected_preload_paths = array(
-			'/wp/v2/menu-locations',
-			array(
-				'/wp/v2/pages',
-				'OPTIONS',
-			),
-			array(
-				'/wp/v2/posts',
-				'OPTIONS',
-			),
-			'/wp/v2/types?context=edit',
-			"/wp/v2/menu-items?context=edit&menus={$menu_id}&per_page=100&_locale=user",
-		);
-
-		$this->callback->expects( $this->once() )
-			->method( 'preload_paths_callback' )
-			->with( $expected_preload_paths )
-			->willReturn( array() );
-
-		$menu          = new stdClass();
-		$menu->term_id = $menu_id;
-		$this->callback->expects( $this->once() )
-			->method( 'wp_nav_menus_callback' )
-			->with( array() )
-			->willReturn( array( new WP_Term( $menu ) ) );
-
-		set_current_screen( 'gutenberg_page_gutenberg-navigation' );
-		gutenberg_navigation_init( 'gutenberg_page_gutenberg-navigation' );
-	}
-
-	public function test_gutenberg_navigation_editor_preload_menus_initializes_createMenuPreloadingMiddleware() {
-		add_filter( 'rest_pre_dispatch', array( $this->callback, 'preload_menus_rest_pre_dispatch_callback' ) );
-		$scripts = wp_scripts();
-		$handle  = 'wp-edit-navigation';
-		$scripts->remove( $handle );
-		$scripts->add( $handle, 'https://test.test/test.js' );
-		$response = new WP_REST_Response( array( 'someData' ) );
-		$this->callback
-			->expects( $this->once() )
-			->method( 'preload_menus_rest_pre_dispatch_callback' )
-			->willReturn( $response );
-
-		gutenberg_navigation_editor_preload_menus();
-
-		/** @var _WP_Dependency $result */
-		$result = $scripts->get_data( $handle, 'after' );
-		$this->assertIsArray( $result );
-		$this->assertArrayHasKey( 1, $result );
-		$this->assertStringContainsString( 'wp.editNavigation.__unstableCreateMenuPreloadingMiddleware', $result[1] );
-	}
-}
-
-/**
- * This is a utility test class for creating mocks of the callback functions
- */
-class WP_Navigation_Page_Test_Callback {
-
-	public function preload_paths_callback() {}
-	public function wp_nav_menus_callback() {}
-	public function preload_menus_rest_pre_dispatch_callback() {}
-}
diff --git a/phpunit/style-engine/class-wp-style-engine-css-rule-test.php b/phpunit/style-engine/class-wp-style-engine-css-rule-test.php
index 444c83f150f911..3a513ebb8b3bdd 100644
--- a/phpunit/style-engine/class-wp-style-engine-css-rule-test.php
+++ b/phpunit/style-engine/class-wp-style-engine-css-rule-test.php
@@ -34,6 +34,22 @@ public function test_should_instantiate_with_selector_and_rules() {
 		$this->assertSame( $expected, $css_rule->get_css(), 'Value returned by get_css() does not match expected declarations string.' );
 	}
 
+	/**
+	 * Tests setting and getting a rules group.
+	 *
+	 * @covers ::set_rules_group
+	 * @covers ::get_rules_group
+	 */
+	public function test_should_set_rules_group() {
+		$rule = new WP_Style_Engine_CSS_Rule_Gutenberg( '.heres-johnny', array(), '@layer state' );
+
+		$this->assertSame( '@layer state', $rule->get_rules_group(), 'Return value of get_rules_group() does not match value passed to constructor.' );
+
+		$rule->set_rules_group( '@layer pony' );
+
+		$this->assertSame( '@layer pony', $rule->get_rules_group(), 'Return value of get_rules_group() does not match value passed to set_rules_group().' );
+	}
+
 	/**
 	 * Tests that declaration properties are deduplicated.
 	 *
diff --git a/phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php b/phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php
index 8529bff78e22c8..297e05b5580d58 100644
--- a/phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php
+++ b/phpunit/style-engine/class-wp-style-engine-css-rules-store-test.php
@@ -170,4 +170,20 @@ public function test_should_get_all_rule_objects_for_a_store() {
 
 		$this->assertSame( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations after adding new rules to store.' );
 	}
+
+	/**
+	 * Tests adding rules group keys to store.
+	 *
+	 * @covers ::add_rule
+	 */
+	public function test_should_store_as_concatenated_rules_groups_and_selector() {
+		$store_one      = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'one' );
+		$store_one_rule = $store_one->add_rule( '.tony', '.one' );
+
+		$this->assertSame(
+			'.one .tony',
+			"{$store_one_rule->get_rules_group()} {$store_one_rule->get_selector()}",
+			'add_rule() does not concatenate rules group and selector.'
+		);
+	}
 }
diff --git a/phpunit/style-engine/class-wp-style-engine-processor-test.php b/phpunit/style-engine/class-wp-style-engine-processor-test.php
index 18392f5156fcc5..6d3a5a812e4fd3 100644
--- a/phpunit/style-engine/class-wp-style-engine-processor-test.php
+++ b/phpunit/style-engine/class-wp-style-engine-processor-test.php
@@ -44,6 +44,41 @@ public function test_should_return_rules_as_compiled_css() {
 		);
 	}
 
+	/**
+	 * Tests adding nested rules with at-rules and returning compiled CSS rules.
+	 *
+	 * @covers ::add_rules
+	 * @covers ::get_css
+	 */
+	public function test_should_return_nested_rules_as_compiled_css() {
+		$a_nice_css_rule = new WP_Style_Engine_CSS_Rule_Gutenberg( '.a-nice-rule' );
+		$a_nice_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--nice-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nice_css_rule->set_rules_group( '@media (min-width: 80rem)' );
+
+		$a_nicer_css_rule = new WP_Style_Engine_CSS_Rule_Gutenberg( '.a-nicer-rule' );
+		$a_nicer_css_rule->add_declarations(
+			array(
+				'font-family'      => 'Nice sans',
+				'font-size'        => '1em',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nicer_css_rule->set_rules_group( '@layer nicety' );
+
+		$a_nice_processor = new WP_Style_Engine_Processor_Gutenberg();
+		$a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
+
+		$this->assertSame(
+			'@media (min-width: 80rem){.a-nice-rule{color:var(--nice-color);background-color:purple;}}@layer nicety{.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}}',
+			$a_nice_processor->get_css( array( 'prettify' => false ) )
+		);
+	}
+
 	/**
 	 * Tests compiling CSS rules and formatting them with new lines and indents.
 	 *
@@ -75,16 +110,65 @@ public function test_should_return_prettified_css_rules() {
 		$a_wonderful_processor = new WP_Style_Engine_Processor_Gutenberg();
 		$a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) );
 
-		$expected = '.a-more-wonderful-rule {
-	font-family: Wonderful sans;
-	font-size: 1em;
+		$expected = '.a-wonderful-rule {
+	color: var(--wonderful-color);
 	background-color: orange;
 }
-.a-wonderful-rule,
 .a-very_wonderful-rule {
 	color: var(--wonderful-color);
 	background-color: orange;
 }
+.a-more-wonderful-rule {
+	font-family: Wonderful sans;
+	font-size: 1em;
+	background-color: orange;
+}
+';
+		$this->assertSame(
+			$expected,
+			$a_wonderful_processor->get_css( array( 'prettify' => true ) )
+		);
+	}
+
+	/**
+	 * Tests compiling nested CSS rules and formatting them with new lines and indents.
+	 *
+	 * @covers ::get_css
+	 */
+	public function test_should_return_prettified_nested_css_rules() {
+		$a_wonderful_css_rule = new WP_Style_Engine_CSS_Rule_Gutenberg( '.a-wonderful-rule' );
+		$a_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_wonderful_css_rule->set_rules_group( '@media (min-width: 80rem)' );
+
+		$a_very_wonderful_css_rule = new WP_Style_Engine_CSS_Rule_Gutenberg( '.a-very_wonderful-rule' );
+		$a_very_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_very_wonderful_css_rule->set_rules_group( '@layer wonderfulness' );
+
+		$a_wonderful_processor = new WP_Style_Engine_Processor_Gutenberg();
+		$a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule ) );
+
+		$expected = '@media (min-width: 80rem) {
+	.a-wonderful-rule {
+		color: var(--wonderful-color);
+		background-color: orange;
+	}
+}
+@layer wonderfulness {
+	.a-very_wonderful-rule {
+		color: var(--wonderful-color);
+		background-color: orange;
+	}
+}
 ';
 		$this->assertSame(
 			$expected,
@@ -170,6 +254,9 @@ public function test_should_dedupe_and_merge_css_declarations() {
 
 	/**
 	 * Tests printing out 'unoptimized' CSS, that is, uncombined selectors and duplicate CSS rules.
+	 * This is the default.
+	 *
+	 * @ticket 58811
 	 *
 	 * @covers ::get_css
 	 */
@@ -215,9 +302,11 @@ public function test_should_not_optimize_css_output() {
 	/**
 	 * Tests that 'optimized' CSS is output, that is, that duplicate CSS rules are combined under their corresponding selectors.
 	 *
+	 * @ticket 58811
+	 *
 	 * @covers ::get_css
 	 */
-	public function test_should_optimize_css_output_by_default() {
+	public function test_should_not_optimize_css_output_by_default() {
 		$a_sweet_rule = new WP_Style_Engine_CSS_Rule_Gutenberg(
 			'.a-sweet-rule',
 			array(
@@ -238,13 +327,15 @@ public function test_should_optimize_css_output_by_default() {
 		$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );
 
 		$this->assertSame(
-			'.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
+			'.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
 			$a_sweet_processor->get_css( array( 'prettify' => false ) )
 		);
 	}
 
 	/**
-	 * Tests that incoming CSS rules are merged with existing CSS rules.
+	 * Tests that incoming CSS rules are optimized and merged with existing CSS rules.
+	 *
+	 * @ticket 58811
 	 *
 	 * @covers ::add_rules
 	 */
@@ -266,7 +357,12 @@ public function test_should_combine_previously_added_css_rules() {
 		$a_lovely_processor->add_rules( $a_lovelier_rule );
 		$this->assertSame(
 			'.a-lovely-rule,.a-lovelier-rule{border-color:purple;}',
-			$a_lovely_processor->get_css( array( 'prettify' => false ) ),
+			$a_lovely_processor->get_css(
+				array(
+					'prettify' => false,
+					'optimize' => true,
+				)
+			),
 			'Return value of get_css() does not match expectations when combining 2 CSS rules'
 		);
 
@@ -288,7 +384,12 @@ public function test_should_combine_previously_added_css_rules() {
 
 		$this->assertSame(
 			'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
-			$a_lovely_processor->get_css( array( 'prettify' => false ) ),
+			$a_lovely_processor->get_css(
+				array(
+					'prettify' => false,
+					'optimize' => true,
+				)
+			),
 			'Return value of get_css() does not match expectations when combining 4 CSS rules'
 		);
 	}
diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
index 66d8dd62865272..fdf5ccebabef99 100644
--- a/phpunit/style-engine/style-engine-test.php
+++ b/phpunit/style-engine/style-engine-test.php
@@ -23,7 +23,7 @@ public function tear_down() {
 	/**
 	 * Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
 	 *
-	 * @covers ::gutenberg_style_engine_get_styles
+	 * @covers ::wp_style_engine_get_styles
 	 * @covers WP_Style_Engine_Gutenberg::parse_block_styles
 	 * @covers WP_Style_Engine_Gutenberg::compile_css
 	 *
@@ -188,23 +188,27 @@ public function data_wp_style_engine_get_styles() {
 						'fontStyle'      => 'italic',
 						'fontWeight'     => '800',
 						'lineHeight'     => '1.3',
+						'textColumns'    => '2',
 						'textDecoration' => 'underline',
 						'textTransform'  => 'uppercase',
 						'letterSpacing'  => '2',
+						'writingMode'    => 'vertical-rl',
 					),
 				),
 				'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;writing-mode:vertical-rl;',
 					'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',
+						'writing-mode'    => 'vertical-rl',
 					),
 				),
 			),
@@ -234,19 +238,26 @@ public function data_wp_style_engine_get_styles() {
 
 			'elements_with_css_var_value'                  => array(
 				'block_styles'    => array(
-					'color' => array(
+					'color'      => array(
 						'text' => 'var:preset|color|my-little-pony',
 					),
+					'typography' => array(
+						'fontSize'   => 'var:preset|font-size|cabbage-patch',
+						'fontFamily' => 'var:preset|font-family|transformers',
+					),
 				),
 				'options'         => array(
 					'selector' => '.wp-selector',
 				),
 				'expected_output' => array(
-					'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
+					'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);font-size:var(--wp--preset--font-size--cabbage-patch);font-family:var(--wp--preset--font-family--transformers);}',
 					'declarations' => array(
-						'color' => 'var(--wp--preset--color--my-little-pony)',
+						'color'       => 'var(--wp--preset--color--my-little-pony)',
+						'font-size'   => 'var(--wp--preset--font-size--cabbage-patch)',
+						'font-family' => 'var(--wp--preset--font-family--transformers)',
+
 					),
-					'classnames'   => 'has-text-color has-my-little-pony-color',
+					'classnames'   => 'has-text-color has-my-little-pony-color has-cabbage-patch-font-size has-transformers-font-family',
 				),
 			),
 
@@ -491,13 +502,38 @@ public function data_wp_style_engine_get_styles() {
 					),
 				),
 			),
+
+			'inline_background_image_url_with_background_size' => array(
+				'block_styles'    => array(
+					'background' => array(
+						'backgroundImage'      => array(
+							'url' => 'https://example.com/image.jpg',
+						),
+						'backgroundPosition'   => 'center',
+						'backgroundRepeat'     => 'no-repeat',
+						'backgroundSize'       => 'cover',
+						'backgroundAttachment' => 'fixed',
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;",
+					'declarations' => array(
+						'background-image'      => "url('https://example.com/image.jpg')",
+						'background-position'   => 'center',
+						'background-repeat'     => 'no-repeat',
+						'background-size'       => 'cover',
+						'background-attachment' => 'fixed',
+					),
+				),
+			),
 		);
 	}
 
 	/**
 	 * Tests adding rules to a store and retrieving a generated stylesheet.
 	 *
-	 * @covers ::gutenberg_style_engine_get_styles
+	 * @covers ::wp_style_engine_get_styles
 	 * @covers WP_Style_Engine_Gutenberg::store_css_rule
 	 */
 	public function test_should_store_block_styles_using_context() {
@@ -630,7 +666,9 @@ public function test_should_return_stylesheet_from_css_rules() {
 	/**
 	 * Tests that incoming styles are deduped and merged.
 	 *
-	 * @covers ::gutenberg_style_engine_get_stylesheet_from_css_rules
+	 * @ticket 58811
+	 *
+	 * @covers ::wp_style_engine_get_stylesheet_from_css_rules
 	 * @covers WP_Style_Engine_Gutenberg::compile_stylesheet_from_css_rules
 	 */
 	public function test_should_dedupe_and_merge_css_rules() {
@@ -672,6 +710,88 @@ public function test_should_dedupe_and_merge_css_rules() {
 
 		$compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
 
-		$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
+		$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore{color:grey;height:90px;border-style:dotted;}.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
+	}
+
+	/**
+	 * Tests returning a generated stylesheet from a set of duotone rules.
+	 *
+	 * This is testing this fix: https://github.com/WordPress/gutenberg/pull/49004
+	 *
+	 * @covers ::wp_style_engine_get_stylesheet_from_css_rules
+	 * @covers WP_Style_Engine_Gutenberg::compile_stylesheet_from_css_rules
+	 */
+	public function test_should_return_stylesheet_from_duotone_css_rules() {
+		$css_rules = array(
+			array(
+				'selector'     => '.wp-duotone-ffffff-000000-1',
+				'declarations' => array(
+					// !important is needed because these styles
+					// render before global styles,
+					// and they should be overriding the duotone
+					// filters set by global styles.
+					'filter' => "url('#wp-duotone-ffffff-000000-1') !important",
+				),
+			),
+		);
+
+		$compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
+		$this->assertSame( ".wp-duotone-ffffff-000000-1{filter:url('#wp-duotone-ffffff-000000-1') !important;}", $compiled_stylesheet );
+	}
+
+	/**
+	 * Tests returning a generated stylesheet from a set of nested rules and merging their declarations.
+	 */
+	public function test_should_merge_declarations_for_rules_groups() {
+		$css_rules = array(
+			array(
+				'selector'     => '.saruman',
+				'rules_group'  => '@container (min-width: 700px)',
+				'declarations' => array(
+					'color'        => 'white',
+					'height'       => '100px',
+					'border-style' => 'solid',
+					'align-self'   => 'stretch',
+				),
+			),
+			array(
+				'selector'     => '.saruman',
+				'rules_group'  => '@container (min-width: 700px)',
+				'declarations' => array(
+					'color'       => 'black',
+					'font-family' => 'The-Great-Eye',
+				),
+			),
+		);
+
+		$compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
+
+		$this->assertSame( '@container (min-width: 700px){.saruman{color:black;height:100px;border-style:solid;align-self:stretch;font-family:The-Great-Eye;}}', $compiled_stylesheet );
+	}
+
+	/**
+	 * Tests returning a generated stylesheet from a set of nested rules.
+	 */
+	public function test_should_return_stylesheet_with_nested_rules() {
+		$css_rules = array(
+			array(
+				'rules_group'  => '.foo',
+				'selector'     => '@media (orientation: landscape)',
+				'declarations' => array(
+					'background-color' => 'blue',
+				),
+			),
+			array(
+				'rules_group'  => '.foo',
+				'selector'     => '@media (min-width > 1024px)',
+				'declarations' => array(
+					'background-color' => 'cotton-blue',
+				),
+			),
+		);
+
+		$compiled_stylesheet = gutenberg_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
+
+		$this->assertSame( '.foo{@media (orientation: landscape){background-color:blue;}}.foo{@media (min-width > 1024px){background-color:cotton-blue;}}', $compiled_stylesheet );
 	}
 }
diff --git a/phpunit/tests/data/fonts/DMSans.woff2 b/phpunit/tests/data/fonts/DMSans.woff2
new file mode 100644
index 00000000000000..9a7696df2ade09
Binary files /dev/null and b/phpunit/tests/data/fonts/DMSans.woff2 differ
diff --git a/phpunit/tests/data/fonts/Merriweather.ttf b/phpunit/tests/data/fonts/Merriweather.ttf
new file mode 100644
index 00000000000000..3fecc77777abf2
Binary files /dev/null and b/phpunit/tests/data/fonts/Merriweather.ttf differ
diff --git a/phpunit/tests/data/fonts/cooper-hewitt.woff b/phpunit/tests/data/fonts/cooper-hewitt.woff
new file mode 100644
index 00000000000000..8f395dec215013
Binary files /dev/null and b/phpunit/tests/data/fonts/cooper-hewitt.woff differ
diff --git a/packages/create-block-tutorial-template/assets/gilbert-color.otf b/phpunit/tests/data/fonts/gilbert-color.otf
similarity index 100%
rename from packages/create-block-tutorial-template/assets/gilbert-color.otf
rename to phpunit/tests/data/fonts/gilbert-color.otf
diff --git a/phpunit/tests/fonts/font-library/fontDeleteFilesFromWpContentFolder.php b/phpunit/tests/fonts/font-library/fontDeleteFilesFromWpContentFolder.php
new file mode 100644
index 00000000000000..dfba431306a0d0
--- /dev/null
+++ b/phpunit/tests/fonts/font-library/fontDeleteFilesFromWpContentFolder.php
@@ -0,0 +1,194 @@
+<?php
+// @core-merge: Do not include these tests, they are for Gutenberg only.
+
+/**
+ * Tests deleting font files from the previous fonts folder default (wp-content/fonts).
+ *
+ * This covers cases where fonts were installed with older versions of Gutenberg, but are then deleted with
+ * newer versions of Gutenberg and/or WordPress.
+ *
+ * @package WordPress
+ * @subpackage Font Library
+ *
+ * @group fonts
+ * @group font-library
+ */
+class Tests_Font_Delete_Files_From_Wp_Content_Folder extends WP_UnitTestCase {
+	/**
+	 * ID of a super admin user.
+	 *
+	 * @var int
+	 */
+	protected static $super_admin_id;
+
+	/**
+	 * Sets up test class.
+	 *
+	 * @param WP_UnitTest_Factory $factory Unit test factory instance.
+	 */
+	public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
+		self::$super_admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+		grant_super_admin( self::$super_admin_id );
+	}
+
+	/**
+	 * Tears down test class.
+	 */
+	public static function wpTearDownAfterClass() {
+		self::delete_user( self::$super_admin_id );
+	}
+
+	/**
+	 * Tests that font files uploaded to wp-content/fonts are deleted when the associated font face post is deleted.
+	 *
+	 * @covers ::gutenberg_before_delete_font_face
+	 */
+	public function test_uploaded_font_files_are_deleted_from_wp_content_fonts_folder() {
+		wp_set_current_user( self::$super_admin_id );
+		$font_family_id = $this->create_font_family();
+
+		// Upload the font file to wp-content/fonts, the previous directory used for fonts.
+		add_filter( 'font_dir', array( $this, 'filter_font_dir' ) );
+		$response = $this->create_font_face( $font_family_id );
+		remove_filter( 'font_dir', array( $this, 'filter_font_dir' ) );
+
+		$this->assertSame( 201, $response->get_status(), 'The font face should be created successfully.' );
+
+		$data      = $response->get_data();
+		$font_path = str_replace( content_url(), WP_CONTENT_DIR, $data['font_face_settings']['src'] );
+
+		// Ensure the file was uploaded to the correct location.
+		$this->assertFalse( str_contains( $font_path, 'uploads' ), 'The font file should not be in the uploads folder.' );
+		$this->assertTrue( file_exists( $font_path ), 'The font file should exist in the wp-content/fonts folder.' );
+
+		// Ensure the file is deleted when the font face post is deleted, even when the directory is not filtered.
+		wp_delete_post( $font_family_id, true );
+		$this->assertTrue( str_contains( wp_get_font_dir()['path'], 'uploads' ), 'The font directory should be in uploads.' );
+		$this->assertFalse( file_exists( $font_path ), 'The font file should be deleted from the wp-content/fonts folder.' );
+	}
+
+	/**
+	 * Tests that font files uploaded to wp-content/fonts are deleted when the associated font face post is deleted on multisite.
+	 *
+	 * @group multisite
+	 * @group ms-required
+	 *
+	 * @covers ::gutenberg_before_delete_font_face
+	 */
+	public function test_uploaded_font_files_are_deleted_from_wp_content_fonts_folder_multisite() {
+		wp_set_current_user( self::$super_admin_id );
+		$blog_id = self::factory()->blog->create();
+
+		switch_to_blog( $blog_id );
+		$font_family_id = $this->create_font_family();
+
+		// Upload the font file to wp-content/fonts, the previous directory used for fonts.
+		add_filter( 'font_dir', array( $this, 'filter_font_dir' ) );
+		$response = $this->create_font_face( $font_family_id );
+		remove_filter( 'font_dir', array( $this, 'filter_font_dir' ) );
+		restore_current_blog();
+
+		$this->assertSame( 201, $response->get_status(), 'The font face should be created successfully.' );
+
+		$data      = $response->get_data();
+		$font_path = str_replace( content_url(), WP_CONTENT_DIR, $data['font_face_settings']['src'] );
+
+		// Ensure the file was uploaded to the correct location.
+		$this->assertFalse( str_contains( $font_path, 'uploads' ), 'The font file should not be in the uploads folder.' );
+		$this->assertTrue( file_exists( $font_path ), 'The font file should exist in the wp-content/fonts folder.' );
+
+		// Ensure the file is deleted when the font face post is deleted, even when the directory is not filtered.
+		switch_to_blog( $blog_id );
+		wp_delete_post( $font_family_id, true );
+		restore_current_blog();
+
+		$this->assertTrue( str_contains( wp_get_font_dir()['path'], 'uploads' ), 'The font directory should be in uploads.' );
+		$this->assertFalse( file_exists( $font_path ), 'The font file should be deleted from the wp-content/fonts folder.' );
+	}
+
+	/**
+	 * Sets the font upload directory to wp-content/fonts, the default previously used in Gutenberg.
+	 *
+	 * @param array $font_dir Font directory settings.
+	 * @return array Filtered font directory settings.
+	 */
+	public function filter_font_dir( $font_dir ) {
+		$site_path = '';
+		if ( is_multisite() && ! ( is_main_network() && is_main_site() ) ) {
+			$site_path = '/sites/' . get_current_blog_id();
+		}
+
+		$font_dir['path']    = path_join( WP_CONTENT_DIR, 'fonts' ) . $site_path;
+		$font_dir['url']     = untrailingslashit( content_url( 'fonts' ) ) . $site_path;
+		$font_dir['basedir'] = path_join( WP_CONTENT_DIR, 'fonts' ) . $site_path;
+		$font_dir['baseurl'] = untrailingslashit( content_url( 'fonts' ) ) . $site_path;
+
+		return $font_dir;
+	}
+
+	/**
+	 * Creates a font family post for testing.
+	 *
+	 * @return int Font family post ID.
+	 */
+	protected function create_font_family() {
+		return self::factory()->post->create(
+			wp_slash(
+				array(
+					'post_type'    => 'wp_font_family',
+					'post_status'  => 'publish',
+					'post_title'   => 'Open Sans',
+					'post_name'    => 'open-sans',
+					'post_content' => wp_json_encode(
+						array(
+							'fontFamily' => '"Open Sans"',
+						)
+					),
+				)
+			)
+		);
+	}
+
+	/**
+	 * Creates a font face post under the specified font family for testing.
+	 *
+	 * @param int $font_family_id Font family post ID.
+	 * @return WP_REST_Response REST response object for font face creation.
+	 */
+	protected function create_font_face( $font_family_id ) {
+		// Create a new font face with a font file upload.
+		$font_file = GUTENBERG_DIR_TESTDATA . '/fonts/OpenSans-Regular.woff2';
+		$font_path = wp_tempnam( 'OpenSans-Regular.woff2' );
+		copy( $font_file, $font_path );
+
+		$files = array(
+			'file-0' => array(
+				'name'      => 'OpenSans-Regular.woff2',
+				'full_path' => 'OpenSans-Regular.woff2',
+				'type'      => 'font/woff2',
+				'tmp_name'  => $font_path,
+				'error'     => 0,
+				'size'      => filesize( $font_path ),
+			),
+		);
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/font-families/' . $font_family_id . '/font-faces' );
+		$request->set_param(
+			'font_face_settings',
+			wp_json_encode(
+				array(
+					'fontFamily' => '"Open Sans"',
+					'fontWeight' => '200',
+					'fontStyle'  => 'normal',
+					'src'        => 'file-0',
+				)
+			)
+		);
+		$request->set_file_params( $files );
+		return rest_get_server()->dispatch( $request );
+	}
+}
diff --git a/phpunit/wp-get-global-stylesheet-test.php b/phpunit/wp-get-global-stylesheet-test.php
deleted file mode 100644
index cb4d0242ce3e3a..00000000000000
--- a/phpunit/wp-get-global-stylesheet-test.php
+++ /dev/null
@@ -1,98 +0,0 @@
-<?php
-/**
- * Tests wp_get_global_stylesheet().
- *
- * @package Gutenberg
- */
-
-class WP_Get_Global_Stylesheet_Test extends WP_UnitTestCase {
-
-	/**
-	 * Administrator ID.
-	 *
-	 * @var int
-	 */
-	protected static $administrator_id;
-
-	/**
-	 * Theme root directory.
-	 *
-	 * @var string
-	 */
-	private $theme_root;
-
-	/**
-	 * Original theme directory.
-	 *
-	 * @var string
-	 */
-	private $orig_theme_dir;
-
-	public static function set_up_before_class() {
-		parent::set_up_before_class();
-
-		self::$administrator_id = self::factory()->user->create(
-			array(
-				'role'       => 'administrator',
-				'user_email' => 'administrator@example.com',
-			)
-		);
-	}
-
-	public function set_up() {
-		parent::set_up();
-
-		$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
-		$this->theme_root     = realpath( DIR_TESTDATA . '/themedir1' );
-
-		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
-		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
-
-		// Set up the new root.
-		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
-		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
-		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
-
-		// Clear caches.
-		wp_clean_themes_cache();
-		unset( $GLOBALS['wp_themes'] );
-	}
-
-	public function tear_down() {
-		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
-
-		// Clear up the filters to modify the theme root.
-		remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
-		remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
-		remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
-
-		wp_clean_themes_cache();
-		unset( $GLOBALS['wp_themes'] );
-
-		parent::tear_down();
-	}
-
-	public function filter_set_theme_root() {
-		return $this->theme_root;
-	}
-
-	public function test_global_styles_user_cpt_change_invalidates_cached_stylesheet() {
-		add_filter( 'wp_get_global_stylesheet_can_use_cache', '__return_true' );
-		switch_theme( 'block-theme' );
-		wp_set_current_user( self::$administrator_id );
-
-		$styles = gutenberg_get_global_stylesheet();
-		$this->assertStringNotContainsString( 'background-color: hotpink;', $styles );
-
-		$user_cpt                                = WP_Theme_JSON_Resolver_Gutenberg::get_user_data_from_wp_global_styles( wp_get_theme(), true );
-		$config                                  = json_decode( $user_cpt['post_content'], true );
-		$config['styles']['color']['background'] = 'hotpink';
-		$user_cpt['post_content']                = wp_json_encode( $config );
-
-		wp_update_post( $user_cpt, true, false );
-
-		$styles = gutenberg_get_global_stylesheet();
-		$this->assertStringContainsString( 'background-color: hotpink;', $styles );
-		remove_filter( 'wp_get_global_stylesheet_can_use_cache', '__return_true' );
-	}
-}
diff --git a/phpunit/wp-theme-json-test.php b/phpunit/wp-theme-json-test.php
index 0d92d33faf88de..96fd1ec82c5f19 100644
--- a/phpunit/wp-theme-json-test.php
+++ b/phpunit/wp-theme-json-test.php
@@ -6,6 +6,20 @@
  */
 
 class WP_Theme_Json_Test extends WP_UnitTestCase {
+	/**
+	 * @var string|null
+	 */
+	private $theme_root;
+
+	/**
+	 * @var array|null
+	 */
+	private $orig_theme_dir;
+
+	/**
+	 * @var array|null
+	 */
+	private $queries;
 
 	public function set_up() {
 		parent::set_up();
diff --git a/platform-docs/.eslintrc.js b/platform-docs/.eslintrc.js
new file mode 100644
index 00000000000000..81578e070ea502
--- /dev/null
+++ b/platform-docs/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+	root: true,
+	plugins: [ 'react' ],
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
+	settings: {
+		react: {
+			pragma: 'React',
+			version: 'detect',
+			flowVersion: '0.92.0',
+		},
+		'import/resolver': require.resolve( '../tools/eslint/import-resolver' ),
+	},
+	overrides: [
+		{
+			files: [ '**/*.js' ],
+			rules: {
+				'import/no-unresolved': 'off',
+			},
+		},
+	],
+};
diff --git a/platform-docs/.gitignore b/platform-docs/.gitignore
new file mode 100644
index 00000000000000..b2d6de30624f65
--- /dev/null
+++ b/platform-docs/.gitignore
@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/platform-docs/README.md b/platform-docs/README.md
new file mode 100644
index 00000000000000..200a752f06e71d
--- /dev/null
+++ b/platform-docs/README.md
@@ -0,0 +1,25 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm run start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
diff --git a/platform-docs/babel.config.js b/platform-docs/babel.config.js
new file mode 100644
index 00000000000000..05bbdfb96d5bea
--- /dev/null
+++ b/platform-docs/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [ require.resolve( '@docusaurus/core/lib/babel/preset' ) ],
+};
diff --git a/platform-docs/docs/basic-concepts/_category_.json b/platform-docs/docs/basic-concepts/_category_.json
new file mode 100644
index 00000000000000..211a193f6937ca
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/_category_.json
@@ -0,0 +1,10 @@
+{
+	"position": 2,
+	"label": "Basic Concepts",
+	"collapsible": true,
+	"collapsed": false,
+	"link": {
+		"type": "generated-index",
+		"title": "Basic Concepts"
+	}
+}
diff --git a/platform-docs/docs/basic-concepts/block-library.md b/platform-docs/docs/basic-concepts/block-library.md
new file mode 100644
index 00000000000000..563b7ca6c9e4c5
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/block-library.md
@@ -0,0 +1,112 @@
+---
+sidebar_position: 4
+---
+
+# Block Library
+
+The block editor relies on a registry of block types to render and edit blocks. The `@wordpress/block-library` package provides a set of core blocks that you can register in your application.
+
+## Registering all block types
+
+Registering blocks requires both loading the JavaScript code that makes the block type available for use and including the corresponding stylesheets.
+
+To register all blocks from the block library, you can use the `registerCoreBlocks` function:
+
+```js
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+registerCoreBlocks();
+```
+
+And make sure to also load the stylesheets required for these blocks.
+
+```js
+import "@wordpress/block-library/build-style/common.css";
+import "@wordpress/block-library/build-style/style.css";
+import "@wordpress/block-library/build-style/editor.css";
+```
+
+## Registering individual blocks
+
+That said, by default the block library includes a very big number of blocks and some of them may contain some WordPress-specific logic. For this reason, if you're building a third-party block editor, it's recommended to only register the blocks that you need.
+
+### The paragraph block type
+
+The main block type that almost all block editors need is the paragraph block. You can register it with the following code:
+
+```js
+import '@wordpress/block-library/build-module/paragraph/init';
+import '@wordpress/block-library/build-style/paragraph/style.css';
+import '@wordpress/block-library/build-style/paragraph/editor.css';
+```
+
+Also, the paragraph block is often used as the "default block" in the block editor. The default block has multiple purposes:
+
+ - It's the block that is selected when the user starts typing or hits Enter.
+ - It's the block that is inserted when the user clicks on the "Add block" button.
+ - It's the block where the user can hit `/` to search for alternative block types.
+
+You can mark the paragraph block as the default block with the following code:
+
+```js
+import { setDefaultBlockName } from '@wordpress/blocks';
+
+setDefaultBlockName( 'core/paragraph' );
+```
+
+### The HTML block type
+
+Another important block type that most block editors would want to use is the HTML block. This block allows users to insert arbitrary HTML code in the block editor and is often used to insert embeds or external content.
+
+It is also used by the block editor to render blocks that are not registered in the block editor or as a fallback block type for random HTML content that can't be properly parsed into blocks.
+
+You can register the HTML block with the following code:
+
+```js
+import '@wordpress/block-library/build-module/html/init';
+import '@wordpress/block-library/build-style/html/editor.css';
+```
+
+And mark it as the fallback block type with the following code:
+
+```js
+import {
+    setFreeformContentHandlerName,
+    setUnregisteredTypeHandlerName
+} from '@wordpress/blocks';
+
+setFreeformContentHandlerName( 'core/html' );
+setUnregisteredTypeHandlerName( 'core/html' );
+```
+
+### Extra blocks
+
+In addition to these two default blocks, here's a non-exhaustive list of blocks that can be registered and used by any block editor:
+
+ - **Heading block**: `heading`
+ - **List block**: `list` and `list-item`
+ - **Quote block**: `quote`
+ - **Image block**: `image`
+ - **Gallery block**: `gallery`
+ - **Video block**: `video`
+ - **Audio block**: `audio`
+ - **Cover block**: `cover`
+ - **File block**: `file`
+ - **Code block**: `code`
+ - **Preformatted block**: `preformatted`
+ - **Pullquote block**: `pullquote`
+ - **Table block**: `table`
+ - **Verse block**: `verse`
+ - **Separator block**: `separator`
+ - **Spacer block**: `spacer`
+ - **Columns block**: `columns` and `column`
+ - **Group block**: `group`
+ - **Button block**: `buttons` and `button`
+ - **Social links block**: `social-links` and `social-link`
+
+For each block, you'll need to load the JavaScript code and stylesheets. Some blocks have two stylesheets (`style.css` and `editor.css`). For example, to register the heading block, you can use the following code:
+
+```js
+import '@wordpress/block-library/build-module/heading/init';
+import '@wordpress/block-library/build-style/heading/editor.css';
+```
diff --git a/platform-docs/docs/basic-concepts/data.md b/platform-docs/docs/basic-concepts/data.md
new file mode 100644
index 00000000000000..3bcb06841a95d2
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/data.md
@@ -0,0 +1,119 @@
+---
+sidebar_position: 2
+---
+
+# Data Format
+
+A block editor document is a collection of semantically consistent descriptions of what each block is and what its essential data is.
+
+The input and output of the block editor is a tree of block objects with the current format:
+
+```js
+const value = [ block1, block2, block3 ];
+```
+
+### The block object
+
+Each block object has an id, a set of attributes and potentially a list of child blocks.
+
+```js
+const block = {
+	clientId, // unique string identifier.
+	type, // The block type (paragraph, image...)
+	attributes, // (key, value) set of attributes representing the direct properties/content of the current block.
+	innerBlocks, // An array of child blocks or inner blocks.
+};
+```
+
+Note the attributes keys and types, the allowed inner blocks are defined by the block type. For example, the core quote block has a `cite` string attribute representing the cite content while a heading block has a numeric `level` attribute, representing the level of the heading (1 to 6).
+
+During the lifecycle of the block in the editor, the block object can receive extra metadata:
+
+-   `isValid`: A boolean representing whether the block is valid or not;
+-   `originalContent`: The original HTML serialization of the block.
+
+**Examples**
+
+```js
+// A simple paragraph block.
+const paragraphBlock1 = {
+	clientId: '51828be1-5f0d-4a6b-8099-f4c6f897e0a3',
+	type: 'core/paragraph',
+	attributes: {
+		content: 'This is the <strong>content</strong> of the paragraph block',
+		dropCap: true,
+	},
+};
+
+// A separator block.
+const separatorBlock = {
+	clientId: '51828be1-5f0d-4a6b-8099-f4c6f897e0a4',
+	type: 'core/separator',
+	attributes: {},
+};
+
+// A columns block with a paragraph block on each column.
+const columnsBlock = {
+	clientId: '51828be1-5f0d-4a6b-8099-f4c6f897e0a7',
+	type: 'core/columns',
+	attributes: {},
+	innerBlocks: [
+		{
+			clientId: '51828be1-5f0d-4a6b-8099-f4c6f897e0a5',
+			type: 'core/column',
+			attributes: {},
+			innerBlocks: [ paragraphBlock1 ],
+		},
+		{
+			clientId: '51828be1-5f0d-4a6b-8099-f4c6f897e0a6',
+			type: 'core/column',
+			attributes: {},
+			innerBlocks: [ paragraphBlock2 ],
+		},
+	],
+};
+```
+
+## HTML serialization and parsing
+
+While block editors powered by Gutenberg manipulate and edit the content as a JavaScript array of blocks, the Gutenberg framework also offers a way to serialize the blocks into HTML and parse them back.
+
+```js
+import { serialize, parse } from '@wordpress/blocks';
+
+const value = [ block1, block2, block3 ];
+
+const html = serialize( value );
+
+const parsedValue = parse( html ); // This should be equivalent to value.
+```
+
+### Delimiters and Parsing Expression Grammar
+
+In order to keep the metadata of the blocks within the serialized HTML, we chose to use HTML comments in order to keep the formality, explicitness, and unambiguity in the existing HTML syntax.
+
+By storing data in HTML comments, we would know that we wouldn't break the rest of the HTML in the document, that browsers should ignore it, and that we could simplify our approach to parsing the document.
+
+Unique to HTML comments is the fact that they cannot legitimately exist in ambiguous places, such as inside of HTML attributes like `<img alt='data-id="14"'>`. Comments are also quite permissive. Whereas HTML attributes are complicated to parse properly, comments are quite easily described by a leading `<!--` followed by anything except `--` until the first `-->`. This simplicity and permissiveness means that the parser can be implemented in several ways without needing to understand HTML properly, and we have the liberty to use more convenient syntax inside of the comment: we only need to escape double-hyphen sequences. We take advantage of this in how we store block attributes: as JSON literals inside the comment.
+
+After running this through the parser, we're left with a simple object we can manipulate idiomatically, and we don't have to worry about escaping or unescaping the data. It's handled for us through the serialization process. Because the comments are so different from other HTML tags and because we can perform a first-pass to extract the top-level blocks, we don't actually depend on having fully valid HTML!
+
+This has dramatic implications for how simple and performant we can make our parser. These explicit boundaries also protect damage to a single block from bleeding into other blocks or tarnishing the entire document. It also allows the system to identify unrecognized blocks before rendering them.
+
+_N.B.:_ The defining aspects of blocks are their semantics and the isolation mechanism they provide: in other words, their identity. On the other hand, where their data is stored is a more liberal aspect. Blocks support more than just static local data (via JSON literals inside the HTML comment or within the block's HTML), and more mechanisms (_e.g._, global blocks or otherwise resorting to storage in complementary `WP_Post` objects) are expected.
+
+### The Anatomy of a Serialized Block
+
+When blocks are serialized as HTML, their attributes—depending on the nature of the block—are serialized to these explicit comment delimiters.
+
+```html
+<!-- wp:image -->
+<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
+<!-- /wp:image -->
+```
+
+A purely dynamic block that is to be server-rendered before display could look like this:
+
+```html
+<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->
+```
diff --git a/platform-docs/docs/basic-concepts/internationalization.md b/platform-docs/docs/basic-concepts/internationalization.md
new file mode 100644
index 00000000000000..654d70070f1cba
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/internationalization.md
@@ -0,0 +1,39 @@
+---
+sidebar_position: 7
+---
+
+# Internationalization
+
+The Gutenberg block editor uses the `@wordpress/i18n` package to provide internationalization support.
+
+Translations can be provided by calling the `setLocaleData` function with a domain and a locale data object. The locale data object should be in the [Jed-formatted JSON object shape](http://messageformat.github.io/Jed/).
+
+```js
+import { setLocaleData } from '@wordpress/i18n';
+
+setLocaleData( { 'Type / to choose a block': [ 'Taper / pour choisir un bloc' ] } );
+```
+
+# RTL Support
+
+By default, the Gutenberg UI is optimized for left-to-right (LTR) languages. But Gutenberg scripts and styles include support for right-to-left (RTL) languages as well. To enable RTL support, we need to perform a few actions:
+
+First, we need to define that our locale is RTL using `@wordpress/i18n`.
+
+```js
+import { setLocaleData } from '@wordpress/i18n';
+
+setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } );
+```
+
+Second, we need to load the RTL CSS stylesheets instead of the LTR ones. For each of the stylesheets that you load from `@wordpress` packages, there's an RTL version that you can use instead.
+
+For example, when loading the `@wordpress/components` stylesheet, you can load the RTL version by using `@wordpress/components/build-style/style-rtl.css` instead of `@wordpress/components/build-style/style.css`.
+
+Finally, make sure to add a `dir` property to the `html` element of your document (or any parent element of your editor).
+
+```html
+<html dir="rtl">
+    <!-- rest of your app -->
+</html>
+```
diff --git a/platform-docs/docs/basic-concepts/rendering.md b/platform-docs/docs/basic-concepts/rendering.md
new file mode 100644
index 00000000000000..adf5a4992df4da
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/rendering.md
@@ -0,0 +1,40 @@
+---
+sidebar_position: 8
+---
+
+# Rendering blocks
+
+## HTML Serialization and Parsing
+
+After editing your blocks, you may choose to persist them as JSON or serialize them to HTML.
+
+Given a block list object, you can retrieve an initial HTML version like so:
+
+```js
+import { serialize } from '@wordpress/blocks';
+
+const blockList = [
+    {
+        name: 'core/paragraph',
+        attributes: {
+            content: 'Hello world!',
+        },
+    },
+];
+
+const html = serialize( blockList );
+```
+
+If needed, it is also possible to parse back the HTML into a block list object:
+
+```js
+import { parse } from '@wordpress/blocks';
+
+const blockList = parse( html );
+```
+
+## Going further
+
+Some of the customizations that the core blocks offer, like layout styles, do not output the necessary CSS using the `serialize` function. Instead in the editor, an additional style element is appended to the document head. This is done to avoid bloating the HTML output with unnecessary CSS.
+
+We're currently working on providing a utility that allows you to render blocks with all the necessary CSS.
diff --git a/platform-docs/docs/basic-concepts/rich-text.md b/platform-docs/docs/basic-concepts/rich-text.md
new file mode 100644
index 00000000000000..bfd8119f02ce41
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/rich-text.md
@@ -0,0 +1,20 @@
+---
+sidebar_position: 5
+---
+
+# RichText and Format Library
+
+Several block types (like paragraph, heading, and more) allow users to type and manipulate rich text content. In order to do so, they use the `RichText` component and the `@wordpress/rich-text` package.
+
+The `RichText` component is a wrapper around the `@wordpress/rich-text` package that provides a React-friendly API to manipulate rich text content. It allows the user to add and apply formats to the text content.
+
+By default, no format is available. You need to register formats in order to make them available to the user. The `@wordpress/format-library` provides a set of default formats to include in your application. It includes:
+
+-   bold, italic, superscript, subscript, strikethrough, links, inline code, inline image, text color, keyboard input (kbd), language (bdo).
+
+In order to register all formats from the format library, add the `@wordpress/format-library` as a dependency of your app and you can use the following code.
+
+```js
+import '@wordpress/format-library';
+import '@wordpress/format-library/build-style/style.css';
+```
diff --git a/platform-docs/docs/basic-concepts/settings.md b/platform-docs/docs/basic-concepts/settings.md
new file mode 100644
index 00000000000000..955f9ec31ad3f0
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/settings.md
@@ -0,0 +1,184 @@
+---
+sidebar_position: 3
+---
+
+# Block Editor Settings
+
+You can customize the block editor by providing a `settings` prop to the `BlockEditorProvider` component. This prop accepts an object with the following properties:
+
+## __experimentalFeatures
+
+The experimental features setting is an object that allows you to enable/disable common block editor features. For instance, the following settings enables support for text, background colors and allow users to pick a custom color or one of the defined theme palette colors. Core block types and third-party block types using the block supports feature will automatically take these settings into account.
+
+```js
+import { BlockEditorProvider, BlockCanvas } from '@wordpress/block-editor';
+
+const features = {
+	color: {
+		custom: true,
+		text: true,
+		background: true,
+		palette: {
+			theme: [
+				{ name: 'red', color: '#f00', slug: 'red' },
+				{ name: 'white', color: '#fff', slug: 'white' },
+				{ name: 'blue', color: '#00f', slug: 'blue' },
+			],
+		},
+	},
+};
+
+export default function App() {
+	return (
+		<BlockEditorProvider settings={ { __experimentalFeatures: features } }>
+			<BlockCanvas />
+		</BlockEditorProvider>
+	);
+}
+```
+
+## styles
+
+The styles setting is an array of editor styles to enqueue in the iframe/canvas of the block editor. Each style is an object with a `css` property. Example:
+
+```jsx
+const styles = [
+	{
+		css: `
+			body {
+				font-family: Arial;
+				font-size: 16px;
+			}
+
+			p {
+				font-size: inherit;
+				line-height: inherit;
+			}
+
+			ul {
+				list-style-type: disc;
+			}
+
+			ol {
+				list-style-type: decimal;
+			}
+		`,
+	},
+];
+```
+
+## mediaUpload
+
+Some core blocks, like the image or video blocks, allow users to render media within the block editor. By default, you can use external URLs but if you want to allow users to upload media from their computer, you need to provide a `mediaUpload` function. Here's a quick example of such function:
+
+```jsx
+async function mediaUpload( {
+	additionalData = {},
+	filesList,
+	onError = noop,
+	onFileChange,
+} ) {
+	const uploadedMedia = [];
+	for ( const file of filesList ) {
+		try {
+			const data = await someApiCallToUploadTheFile( file );
+			const mediaObject = {
+				alt: data.alt,
+				caption: data.caption,
+				title: data.title,
+				url: data.url,
+			};
+			uploadedMedia.push( mediaObject );
+		} catch ( error ) {
+			onError( {
+				code: 'SOME_ERROR_CODE',
+				message:
+					mediaFile.name +
+					' : Sorry, an error happened while uploading this file.',
+				file: mediaFile,
+			} );
+		}
+		if ( uploadedMedia.length ) {
+			onFileChange( uploadedMedia );
+		}
+	}
+}
+```
+
+Providing a `mediaUpload` function also enables drag and dropping files into the editor to upload them.
+
+## inserterMediaCategories
+
+The inserter media categories setting is an array of media categories to display in the inserter. Each category is an object with `name` and `labels` values, a `fetch` function and a few extra keys. Example:
+
+```jsx
+const inserterMediaCategories = {
+    name: 'openverse',
+    labels: {
+        name: 'Openverse',
+        search_items: 'Search Openverse',
+    },
+    mediaType: 'image',
+    async fetch( query = {} ) {
+        const defaultArgs = {
+            mature: false,
+            excluded_source: 'flickr,inaturalist,wikimedia',
+            license: 'pdm,cc0',
+        };
+        const finalQuery = { ...query, ...defaultArgs };
+        // Sometimes you might need to map the supported request params according to the `InserterMediaRequest`
+        // interface. In this example the `search` query param is named `q`.
+        const mapFromInserterMediaRequest = {
+            per_page: 'page_size',
+            search: 'q',
+        };
+        const url = new URL( 'https://api.openverse.engineering/v1/images/' );
+        Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
+            const queryKey = mapFromInserterMediaRequest[ key ] || key;
+            url.searchParams.set( queryKey, value );
+        } );
+        const response = await window.fetch( url, {
+            headers: {
+                'User-Agent': 'WordPress/inserter-media-fetch',
+            },
+        } );
+        const jsonResponse = await response.json();
+        const results = jsonResponse.results;
+        return results.map( ( result ) => ( {
+            ...result,
+            // If your response result includes an `id` prop that you want to access later, it should
+            // be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
+            // a report URL getter.
+            // Additionally you should always clear the `id` value of your response results because
+            // it is used to identify WordPress media items.
+            sourceId: result.id,
+            id: undefined,
+            caption: result.caption,
+            previewUrl: result.thumbnail,
+        } ) );
+    },
+    getReportUrl: ( { sourceId } ) =>
+        `https://wordpress.org/openverse/image/${ sourceId }/report/`,
+    isExternalResource: true,
+}
+```
+
+## hasFixedToolbar
+
+Whether the `BlockTools` component renders the toolbar in a fixed position or if follows the position of the selected block. Defaults to `false`.
+
+## focusMode
+
+The focus mode is a special mode where any block that is not selected is shown with a reduced opacity, giving more prominence to the selected block. Defaults to `false`.
+
+## keepCaretInsideBlock
+
+By default, arrow keys can be used to navigate across blocks. You can turn off that behavior and keep the caret inside the currently selected block using this setting. Defaults to `false`.
+
+## codeEditingEnabled
+
+Allows the user to edit the currently selected block using an HTML code editor. Note that using the code editor is not supported by all blocks and that it has the potential to create invalid blocks depending on the markup the user provides. Defaults to `true`.
+
+## canLockBlocks
+
+Whether the user can lock blocks. Defaults to `true`.
diff --git a/platform-docs/docs/basic-concepts/ui.md b/platform-docs/docs/basic-concepts/ui.md
new file mode 100644
index 00000000000000..0dccef3c239b03
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/ui.md
@@ -0,0 +1,29 @@
+---
+sidebar_position: 1
+---
+
+# Compose the UI
+
+## Building blocks
+
+The interface of the block editor is composed of several UI elements:
+
+ - The block list is the main area where you can interact and edit the blocks.
+ - The block toolbar: When a block is selected, the main tools to manipulate the blocks are rendered in a block toolbar. This toolbar can be rendered adjacent to the block or separate depending on the design you want to achieve for your block editor.
+ - The block inspector: Generally shown as a sidebar or a modal, the inspector shows advanced tools to manipulate the selected block.
+ - Block inserter: Can be used to select blocks to insert to your block editor.
+
+The Gutenberg platform allows you to render these pieces separately and lay them out as you wish to achieve the desired design for your interface.
+
+## The Block Toolbar
+
+The block toolbar is rendered automatically next to the selected block by default. But if you set the flag `hasFixedToolbar` to true in your `BlockEditorProvider` settings, you will be able to use the `BlockToolbar` component to render the block toolbar in your place of choice.
+
+## The Block Inspector
+
+You can use the `BlockInspector` to render what is called the block inspector. It's a set of tools that are specific to the selected block.
+While the block toolbar contains what are considered to be the "main tools" to manipulate each block, the block inspector is meant to render advanced tools and customization options. It is generally rendered as a sidebar or a modal.
+
+## The Block Inserter
+
+By default the block editor renders a block inserter at the end of the canvas if there's no block selected. It also renders an inserter if you hover over the area between two consecutive blocks. That said, you can also decide to render a permanent inserter, for instance in a header of your editor. You can do so by using the `Inserter` component.
diff --git a/platform-docs/docs/basic-concepts/undo-redo.md b/platform-docs/docs/basic-concepts/undo-redo.md
new file mode 100644
index 00000000000000..d3041a21eebe9b
--- /dev/null
+++ b/platform-docs/docs/basic-concepts/undo-redo.md
@@ -0,0 +1,68 @@
+---
+sidebar_position: 6
+---
+
+# Undo Redo
+
+## Undo/Redo using `useStateWithHistory`
+
+By default, the block editor doesn't enable undo/redo. This is because in most scenarios, the block editor is rendered as part of a larger application that already has its own undo/redo functionality. However, to help you implement undo/redo in your application, the block editor provides a set of APIs that you can use.
+
+The simplest approach is to rely on the `useStateWithHistory` hook provided by the `@wordpress/compose` package. This hook is a wrapper around the `useState` hook that adds undo/redo functionality to the state. 
+
+First, make sure you add the `@wordpress/compose` package to your dependencies, then use the hook like so:
+
+```jsx
+import { useStateWithHistory } from '@wordpress/compose';
+import { createElement, useState } from "react";
+import { createRoot } from 'react-dom/client';
+import {
+  BlockEditorProvider,
+  BlockCanvas,
+} from "@wordpress/block-editor";
+
+function Editor() {
+	const { value, setValue, hasUndo, hasRedo, undo, redo } =
+		useStateWithHistory( { blocks: [] } );
+
+	return (
+        <BlockEditorProvider
+            value={ value.blocks }
+            selection={ value.selection }
+            onInput={ ( blocks, { selection } ) =>
+                setValue( { blocks, selection }, true )
+            }
+            onChange={ ( blocks, { selection } ) =>
+                setValue( { blocks, selection }, false )
+            }
+        >
+            <div className="undo-redo-toolbar">
+                <button onClick={ undo } disabled={ ! hasUndo }>
+                    Undo
+                </button>
+                <button onClick={ redo } disabled={ ! hasRedo }>
+                    Redo
+                </button>
+            </div>
+            <BlockCanvas />
+        </BlockEditorProvider>
+	);
+}
+```
+
+The `useStateWithHistory` hook returns an object with the following properties:
+
+- `value`: the current value of the state.
+- `setValue`: a function that can be used to update the state.
+- `hasUndo`: a boolean indicating whether there are any actions that can be undone.
+- `hasRedo`: a boolean indicating whether there are any actions that can be redone.
+- `undo`: a function that can be used to undo the last action.
+- `redo`: a function that can be used to redo the last action.
+
+Notice that in addition to the `blocks` property, the `value` object also tracks a `selection` property. This property is used to store and control the cursor position within the block editor. This allows the editor to restore the right position when undoing or redoing changes.
+
+## Going Further...
+
+Oftentimes, editors allow to track changes across multiple objects and properties. For instance, a basic writing experience might allow editing the title of a post in a normal input and the content of the post in the block editor. Or your editor might allow edits to related objects like categories, tags, etc... In these cases, you might want to implement undo/redo functionality that can be used to track changes across all of these objects and properties.
+
+The `useStateWithHistory` might not always be the right approach in these situations. Consider checking the `@wordpress/undo-manager` package that offers a lower level undo manager that can be adapted more easily to your specific needs.
diff --git a/platform-docs/docs/create-block/_category_.json b/platform-docs/docs/create-block/_category_.json
new file mode 100644
index 00000000000000..13d354a69f3036
--- /dev/null
+++ b/platform-docs/docs/create-block/_category_.json
@@ -0,0 +1,10 @@
+{
+	"position": 3,
+	"label": "Create a block type",
+	"collapsible": true,
+	"collapsed": true,
+	"link": {
+		"type": "generated-index",
+		"title": "Create a block type"
+	}
+}
diff --git a/platform-docs/docs/create-block/attributes.md b/platform-docs/docs/create-block/attributes.md
new file mode 100644
index 00000000000000..03d389cab94c97
--- /dev/null
+++ b/platform-docs/docs/create-block/attributes.md
@@ -0,0 +1,87 @@
+---
+sidebar_position: 2
+---
+
+# Block Attributes
+
+Attributes are the way a block stores data, they define the structure of a block. Upon serialization, some attributes are saved into the HTML output while others are kept in a the HTML block comment delimiters.
+
+For this block tutorial, we want to allow the user to type a message that we will display stylized in the saved content. So, we need to add a **message** attribute that will hold the user message. The following code defines a **message** attribute; the attribute type is a string. When serializing the blocks, the message will be saved within a `div`container. This means that we're going to source the value attribute using `text` source from the selector, which is a `div` tag.
+
+```js
+const attributes = {
+	message: {
+		type: 'string',
+		source: 'text',
+		selector: 'div',
+		'default': ''
+	}
+};
+```
+
+Add this to the settings arguments of the `registerBlockType` function call. 
+
+**Note:** The text source is equivalent to `innerText` attribute of a DOM element.
+
+## Edit and Save
+
+The **attributes** are passed to both the `edit` and `save` functions. The **setAttributes** function is also passed, but only to the `edit` function. The **setAttributes** function is used to set the values.
+
+The `attributes` is a JavaScript object containing the values of each attribute, or default values if defined. The `setAttributes` is a function to update an attribute.
+
+```js
+function Edit( { attributes, setAttributes } ) {
+	// ...
+}
+
+function Save( { attributes } ) {
+	// ...
+}
+
+registerBlockType( 'create-block/gutenpride', {
+    // ...
+    attributes,
+    edit: Edit,
+    save: Save,
+} );
+```
+
+## PlainText Component
+
+For our example block, the component we are going to use is the **PlainText** component, which allows the user to type some unformatted text. The **PlainText** component is imported from the `@wordpress/block-editor` package.
+
+The component is added similar to an HTML tag, the `value` is set to the `attributes.message` and the `onChange` function uses the `setAttributes` to update the message attribute value.
+
+The save function will simply write the `attributes.message` as a `div` tag since that is how we defined it to be parsed. Update the `edit.js` and `save.js` files to the following, replacing the existing functions.
+
+**edit.js** file:
+
+```js
+import { useBlockProps, PlainText } from '@wordpress/block-editor';
+
+function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	return (
+		<PlainText
+			{ ...blockProps }
+			tagName="div"
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+			__experimentalVersion={ 2 }
+		/>
+	);
+}
+```
+
+**save.js** file:
+
+```jsx
+import { useBlockProps } from '@wordpress/block-editor';
+
+function Save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	return <div { ...blockProps }>{ attributes.message }</div>;
+}
+```
+
+Reload the editor and add the block. You can now type a message in the editor and it will be included in the serialized HTML output.
diff --git a/platform-docs/docs/create-block/block-supports.md b/platform-docs/docs/create-block/block-supports.md
new file mode 100644
index 00000000000000..a24f0b858d4731
--- /dev/null
+++ b/platform-docs/docs/create-block/block-supports.md
@@ -0,0 +1,33 @@
+---
+sidebar_position: 3
+---
+
+# Block Supports
+
+A lot of blocks, including core blocks, offer similar customization options. Whether that is to change the background color, text color, or to add padding, margin customization options.
+
+To avoid duplicating the same logic over and over in your blocks and to align the behavior of your block with core blocks, Gutenberg provides a list of reusable block supports.
+
+Let's augment our Gutenberg pride block with some of these supports. To do so, we just update the `registerBlockType` call with an additional `supports` key like so:
+
+```jsx
+registerBlockType( 'create-block/gutenpride', {
+	// ...
+	supports: {
+		color: {
+			text: true,
+			background: true,
+		},
+	},
+} );
+```
+
+If your block editor allows text and background colors, the block inspector will now show a panel that allows users to customize these colors for the selected block.
+
+In addition to colors, the block editor provides by default a number of built-in block supports that any block type can use to quickly add customization options. These block supports include:
+
+ - colors
+ - typography
+ - borders
+ - dimensions and spacing
+ - and more...
diff --git a/platform-docs/docs/create-block/first-block-type.md b/platform-docs/docs/create-block/first-block-type.md
new file mode 100644
index 00000000000000..437f4ec43b3e53
--- /dev/null
+++ b/platform-docs/docs/create-block/first-block-type.md
@@ -0,0 +1,56 @@
+---
+sidebar_position: 1
+---
+
+# Your first block type
+
+In addition to the built-in block types, Gutenberg offers a flexible API to build any kind of block type you can imagine.
+
+The `registerBlockType` function registers the block we are going to create and specifies the block type settings.
+
+```js
+import { createElement } from 'react';
+import { registerBlockType } from '@wordpress/blocks';
+
+registerBlockType( 'create-block/gutenpride', {
+	// This is just a flag that tells the block editor that this block
+	// is using the API version 3 (the latest block type API).
+	apiVersion: 3,
+
+	// This is the display title for your block type.
+	title: 'Gutenpride',
+
+	// This is the category this block type will be listed in.
+	// Default categories include: text, media, design, widgets, theme and embed.
+	category: 'widgets',
+
+	// This is a short description for your block type.
+	// It will be shown in various places in the Gutenberg user interface.
+	description: 'Example static block scaffolded with Create Block tool.',
+
+	// This is an icon for your block type.
+	icon: (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
+		</svg>
+	),
+
+	edit() {
+		return <p>Hello from the editor!</p>;
+	},
+
+	save() {
+		return <p>Hello from the saved content!</p>;
+	},
+} );
+```
+
+The first parameter in the **registerBlockType** function is the block name. It's composed of two segments: a namespace and a specific name. The namespace is used to avoid collisions with other block types from different sources. The specific name is the name of the block type. The namespace and the specific name are separated by a slash.
+
+The second parameter to the function is the block type object. Two common object properties are **edit** and **save** — these are the key parts of a block.
+
+The result of the edit function is what the editor will render to the editor page when the block is inserted.
+
+The result of the save function is what the editor will produce as HTML when calling the `serialize` function.
+
+The `create-block/gutenpride` block type produces a static block at the moment, in the following sections of the tutorial, we will see how to make it editable.
diff --git a/platform-docs/docs/create-block/nested-blocks.md b/platform-docs/docs/create-block/nested-blocks.md
new file mode 100644
index 00000000000000..e5090d4f36113c
--- /dev/null
+++ b/platform-docs/docs/create-block/nested-blocks.md
@@ -0,0 +1,231 @@
+---
+sidebar_position: 5
+---
+
+# Nested Blocks
+
+You can create a single block that nests other blocks using the [InnerBlocks](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inner-blocks/README.md) component. This is used in the Columns block, Social Links block, or any block you want to contain other blocks.
+
+**Note:** A single block can only contain one `InnerBlocks` component.
+
+Here is the basic InnerBlocks usage.
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+registerBlockType( 'create-block/gutenpride-container', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks />
+			</div>
+		);
+	},
+
+	save: () => {
+		const blockProps = useBlockProps.save();
+
+		return (
+			<div { ...blockProps }>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+} );
+```
+
+## Allowed Blocks
+
+Using the `allowedBlocks` property, you can define the set of blocks allowed in your InnerBlock. This restricts the blocks that can be included only to those listed, all other blocks will not show in the inserter.
+
+```jsx
+const ALLOWED_BLOCKS = [ 'core/heading', 'core/paragraph' ];
+//...
+<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;
+```
+
+## Default Block
+
+By default `InnerBlocks` opens a list of permitted blocks via `allowedBlocks` when the block appender is clicked. You can modify the default block and its attributes that are inserted when the initial block appender is clicked by using the `defaultBlock` property. For example:
+
+```jsx
+<InnerBlocks
+	defaultBlock={ [ 'core/paragraph', { placeholder: 'Lorem ipsum...' } ] }
+	directInsert
+/>
+```
+
+By default this behavior is disabled until the `directInsert` prop is set to `true`. This allows you to specify conditions for when the default block should or should not be inserted.
+
+## Template
+
+Use the template property to define a set of blocks that prefill the InnerBlocks component when inserted. You can set attributes on the blocks to define their use. The example below shows a book review template using the InnerBlocks component and setting placeholder values to show the block usage.
+
+```js
+const MY_TEMPLATE = [
+	[ 'core/image', {} ],
+	[ 'core/heading', { placeholder: 'Book Title' } ],
+	[ 'core/paragraph', { placeholder: 'Summary' } ],
+];
+
+//...
+
+	edit: () => {
+		return (
+			<InnerBlocks
+				template={ MY_TEMPLATE }
+				templateLock="all"
+			/>
+		);
+	},
+```
+
+Use the `templateLock` property to lock down the template. Using `all` locks the template completely so no changes can be made. Using `insert` prevents additional blocks from being inserted, but existing blocks can be reordered. See [templateLock documentation](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/inner-blocks/README.md#templatelock) for additional information.
+
+## Using Parent and Ancestor Relationships in Blocks
+
+A common pattern for using InnerBlocks is to create a custom block that will only be available if its parent block is inserted. This allows builders to establish a relationship between blocks while limiting a nested block's discoverability. Currently, there are two relationships builders can use: `parent` and `ancestor`. The differences are:
+
+-   If you assign a `parent` then you’re stating that the nested block can only be used and inserted as a **direct descendant of the parent**.
+-   If you assign an `ancestor` then you’re stating that the nested block can only be used and inserted as a **descendent of the parent**.
+
+The key difference between `parent` and `ancestor` is that `parent` has finer specificity, while an `ancestor` has greater flexibility in its nested hierarchy.
+
+### Defining Parent Block Relationship
+
+An example of this is the Column block, which is assigned the `parent` block setting. This allows the Column block to only be available as a nested direct descendant in its parent Columns block. Otherwise, the Column block will not be available as an option within the block inserter. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column).
+
+When defining a direct descendent block, use the `parent` block setting to define which block is the parent. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
+
+```js
+{
+	title: 'Column',
+	parent: [ 'core/columns' ],
+	// ...
+}
+```
+
+### Defining Ancestor Block Relationship
+
+An example of this is the Comment Author Name block, which is assigned the `ancestor` block setting. This allows the Comment Author Name block to only be available as a nested descendant in its ancestral Comment Template block. Otherwise, the Comment Author Name block will not be available as an option within the block inserter. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name).
+
+The `ancestor` relationship allows the Comment Author Name block to be anywhere in the hierarchical tree, and not _just_ a direct child of the parent Comment Template block, while still limiting its availability within the block inserter to only be visible an an option to insert if the Comment Template block is available.
+
+When defining a descendent block, use the `ancestor` block setting. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
+
+```js
+{
+	title: 'Comment Author Name',
+	ancestor: [ 'core/comment-template' ]
+	// ...
+}
+```
+
+## Using a React Hook
+
+You can use a react hook called `useInnerBlocksProps` instead of the `InnerBlocks` component. This hook allows you to take more control over the markup of inner blocks areas.
+
+The `useInnerBlocksProps` is exported from the `@wordpress/block-editor` package same as the `InnerBlocks` component itself and supports everything the component does. It also works like the `useBlockProps` hook.
+
+Here is the basic `useInnerBlocksProps` hook usage.
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'create-block/gutenpride-container', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const innerBlocksProps = useInnerBlocksProps();
+
+		return (
+			<div { ...blockProps }>
+				<div { ...innerBlocksProps } />
+			</div>
+		);
+	},
+
+	save: () => {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save();
+
+		return (
+			<div { ...blockProps }>
+				<div { ...innerBlocksProps } />
+			</div>
+		);
+	},
+} );
+```
+
+This hook can also pass objects returned from the `useBlockProps` hook to the `useInnerBlocksProps` hook. This reduces the number of elements we need to create.
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'gcreate-block/gutenpride-container', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const innerBlocksProps = useInnerBlocksProps( blockProps );
+
+		return <div { ...innerBlocksProps } />;
+	},
+
+	save: () => {
+		const blockProps = useBlockProps.save();
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+		return <div { ...innerBlocksProps } />;
+	},
+} );
+```
+
+The above code will render to the following markup in the editor:
+
+```html
+<div>
+	<!-- Inner Blocks get inserted here -->
+</div>
+```
+
+Another benefit of the hook approach is using the returned value, which is just an object, and deconstructing to get the react children from the object. This property contains the actual child inner blocks thus we can place elements on the same level as our inner blocks.
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+registerBlockType( 'gutenberg-examples/example-06', {
+	// ...
+
+	edit: () => {
+		const blockProps = useBlockProps();
+		const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps );
+
+		return (
+			<div {...innerBlocksProps}>
+    			{ children }
+				<!-- Insert any arbitrary html here at the same level as the children -->
+			</div>
+		);
+	},
+
+	// ...
+} );
+```
+
+```html
+<div>
+	<!-- Inner Blocks get inserted here -->
+	<!-- The custom html gets rendered on the same level -->
+</div>
+```
diff --git a/platform-docs/docs/create-block/transforms.md b/platform-docs/docs/create-block/transforms.md
new file mode 100644
index 00000000000000..4a4118d6850b9e
--- /dev/null
+++ b/platform-docs/docs/create-block/transforms.md
@@ -0,0 +1,90 @@
+---
+sidebar_position: 4
+---
+
+# Transforms
+
+Block Transforms is the API that allows a block to be transformed _from_ and _to_ other blocks, as well as _from_ other entities. Existing entities that work with this API include shortcodes, files, regular expressions, and raw DOM nodes.
+
+## Transform direction: `to` and `from`
+
+A block declares which transformations it supports via the optional `transforms` key of the block configuration object passed to the `registerBlockType` function call, whose subkeys `to` and `from` hold an array of available transforms for every direction. Example:
+
+```jsx
+registerBlockType( 'create-block/gutenpride', {
+	// ...
+	transforms: {
+		from: [
+			/* supported from transforms */
+		],
+		to: [
+			/* supported to transforms */
+		],
+	},
+} );
+```
+
+## Transformations Types
+
+### Block
+
+This type of transformations support both _from_ and _to_ directions, allowing blocks to be converted into a different one. It has a corresponding UI control within the block toolbar.
+
+A transformation of type `block` is an object that takes the following parameters:
+
+-   **type** _(string)_: the value `block`.
+-   **blocks** _(array)_: a list of known block types. It also accepts the wildcard value (`"*"`), meaning that the transform is available to _all_ block types (eg: all blocks can transform into `core/group`).
+-   **transform** _(function)_: a callback that receives the attributes and inner blocks of the block being processed. It should return a block object or an array of block objects.
+-   **isMatch** _(function, optional)_: a callback that receives the block attributes as the first argument and the block object as the second argument and should return a boolean. Returning `false` from this function will prevent the transform from being available and displayed as an option to the user.
+-   **isMultiBlock** _(boolean, optional)_: whether the transformation can be applied when multiple blocks are selected. If `true`, the `transform` function's first parameter will be an array containing each selected block's attributes, and the second an array of each selected block's inner blocks. Returns `false` by default.
+-   **priority** _(number, optional)_: controls the priority with which a transformation is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
+
+**Example: Let's declare a transform from our Gutenpride block to Heading block**
+
+To declare this transformation we add the following code into our Gutenpride block configuration, which uses the `createBlock` function from the `@wordpress/blocks` package to create a new block:
+
+```js
+transforms: {
+    from: [
+      {
+        type: "block",
+        blocks: ["core/heading"],
+        transform: ({ content }) => {
+          return createBlock("create-block/gutenpride", {
+            message: content,
+          });
+        },
+      },
+    ],
+},
+```
+
+In the code above, the `transform` function receives the attributes of the block being processed as the first argument, and the inner blocks as the second. In this case, the `content` attribute of the heading block is used to set the `message` attribute of the `create-block/gutenpride` block.
+
+In the exact same way we can declare a transform from the `core/heading` block to our `create-block/gutenpride` block:
+
+```js
+transforms: {
+    to: [
+        {
+            type: 'block',
+            blocks: [ 'core/heading' ],
+            transform: ( { content } ) => {
+                return createBlock( 'core/heading', {
+                    content: message,
+                } );
+            },
+        },
+    ]
+},
+```
+
+### Other transforms:
+
+To cover other writing flows and interactions, the block editor also supports other transformations types for blocks:
+
+    - Enter: transforms a block when the user presses the enter key.
+    - Files: transforms a block when the user drags a file or multiple into the block editor.
+    - Prefix: transforms a block when the user types a prefix.
+    - Raw: transforms a block when the user pastes raw content.
+    - Ungroup: transforms a block when the user ungroups a block.
diff --git a/platform-docs/docs/intro.md b/platform-docs/docs/intro.md
new file mode 100644
index 00000000000000..05cfa103492f33
--- /dev/null
+++ b/platform-docs/docs/intro.md
@@ -0,0 +1,85 @@
+---
+sidebar_position: 1
+---
+
+# Getting Started
+
+Let's discover how to use the **Gutenberg Block Editor** to build your own block editor in less than 10 minutes**.
+
+
+## What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 20.10 or above.
+- We're going to be using "vite" to setup our single page application (SPA) that contains a block editor. You can use your own setup, and your own application for this.
+
+## Preparing the SPA powered by Vite.
+
+First bootstrap a vite project using `npm create vite@latest` and pick `Vanilla` variant and `JavaScript` as a language.
+
+Once done, you can navigate to your application folder and run it locally using `npm run dev`. Open the displayed local URL in a browser.
+
+## Installing dependencies
+
+To build a block editor, you need to install the following dependencies:
+
+ - `@wordpress/block-editor`
+ - `@wordpress/block-library`
+ - `@wordpress/components`
+
+## JSX
+
+We're going to be using JSX to write our UI and components. So one of the first steps we need to do is to configure our build tooling, By default vite supports JSX and and outputs the result as a React pragma. The Block editor uses React so there's no need to configure anything here but if you're using a different bundler/build tool, make sure the JSX transpilation is setup properly.
+
+## Bootstrap your block editor
+
+It's time to render our first block editor.
+
+ - Update your `index.jsx` file with the following code:
+```jsx
+import { createElement, useState } from "react";
+import { createRoot } from 'react-dom/client';
+import {
+  BlockEditorProvider,
+  BlockCanvas,
+} from "@wordpress/block-editor";
+import { registerCoreBlocks } from "@wordpress/block-library";
+
+// Default styles that are needed for the editor.
+import "@wordpress/components/build-style/style.css";
+import "@wordpress/block-editor/build-style/style.css";
+
+// Default styles that are needed for the core blocks.
+import "@wordpress/block-library/build-style/common.css";
+import "@wordpress/block-library/build-style/style.css";
+import "@wordpress/block-library/build-style/editor.css";
+
+// Register the default core block types.
+registerCoreBlocks();
+
+function Editor() {
+  const [blocks, setBlocks] = useState([]);
+  return (
+    /*
+      The BlockEditorProvider is the wrapper of the block editor's state.
+      All the UI elements of the block editor need to be rendered within this provider.
+    */
+    <BlockEditorProvider
+      value={blocks}
+      onChange={setBlocks}
+      onInput={setBlocks}
+    >
+      {/*
+          The BlockCanvas component renders the block list within an iframe
+          and wire up all the necessary events to make the block editor work.
+        */}
+      <BlockCanvas height="500px" />
+    </BlockEditorProvider>
+  );
+}
+
+// Render your React component instead
+const root = createRoot(document.getElementById("app"));
+root.render(<Editor />);
+```
+
+That's it! You now have a very basic block editor with several block types included by default: paragraphs, headings, lists, quotes, images...
diff --git a/platform-docs/docusaurus.config.js b/platform-docs/docusaurus.config.js
new file mode 100644
index 00000000000000..ff86ee3eea4492
--- /dev/null
+++ b/platform-docs/docusaurus.config.js
@@ -0,0 +1,76 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+/**
+ * External dependencies
+ */
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+	title: 'Gutenberg Block Editor',
+	tagline: 'Build block based editors, with HTML and JSON output',
+	favicon: 'https://s.w.org/images/wmark.png',
+
+	// Set the production url of your site here
+	url: 'https://your-docusaurus-test-site.com',
+	// Set the /<baseUrl>/ pathname under which your site is served
+	baseUrl: '/',
+
+	onBrokenLinks: 'throw',
+	onBrokenMarkdownLinks: 'warn',
+
+	// Even if you don't use internationalization, you can use this field to set useful
+	// metadata like html lang. For example, if your site is in Chinese, you may want
+	// to replace "en" with "zh-Hans".
+	i18n: {
+		defaultLocale: 'en',
+		locales: [ 'en' ],
+	},
+
+	presets: [
+		[
+			'classic',
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			( {
+				docs: {
+					sidebarPath: require.resolve( './sidebars.js' ),
+					editUrl:
+						'https://github.com/WordPress/gutenberg/tree/trunk/platform-docs/',
+				},
+				theme: {
+					customCss: require.resolve( './src/css/custom.css' ),
+				},
+			} ),
+		],
+	],
+
+	plugins: [ require.resolve( 'docusaurus-lunr-search' ) ],
+
+	themeConfig:
+		/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+		( {
+			// Replace with your project's social card
+			image: 'https://s.w.org/images/wmark.png',
+			navbar: {
+				title: 'Gutenberg Block Editor',
+				logo: {
+					alt: 'Gutenberg logo',
+					src: 'img/logo.svg',
+				},
+				items: [
+					{
+						type: 'docSidebar',
+						sidebarId: 'tutorialSidebar',
+						position: 'left',
+						label: 'Docs',
+					},
+					{
+						href: 'https://github.com/WordPress/gutenberg',
+						label: 'GitHub',
+						position: 'right',
+					},
+				],
+			},
+		} ),
+};
+
+module.exports = config;
diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
new file mode 100644
index 00000000000000..ce0969c3928a48
--- /dev/null
+++ b/platform-docs/package-lock.json
@@ -0,0 +1,15663 @@
+{
+	"name": "platform-docs",
+	"version": "0.0.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "platform-docs",
+			"version": "0.0.1",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@docusaurus/core": "^3.1.1",
+				"@docusaurus/preset-classic": "^3.1.1",
+				"@mdx-js/react": "^3.0.0",
+				"clsx": "^1.2.1",
+				"docusaurus-lunr-search": "^3.3.2",
+				"react": "^18.3.0",
+				"react-dom": "^18.3.0"
+			},
+			"devDependencies": {
+				"@docusaurus/module-type-aliases": "^3.1.1",
+				"@docusaurus/types": "^3.1.1"
+			},
+			"engines": {
+				"node": ">=20.10.0",
+				"npm": ">=10.2.3"
+			}
+		},
+		"node_modules/@algolia/autocomplete-core": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+			"integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+			"dependencies": {
+				"@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+				"@algolia/autocomplete-shared": "1.9.3"
+			}
+		},
+		"node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+			"integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+			"dependencies": {
+				"@algolia/autocomplete-shared": "1.9.3"
+			},
+			"peerDependencies": {
+				"search-insights": ">= 1 < 3"
+			}
+		},
+		"node_modules/@algolia/autocomplete-preset-algolia": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+			"integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+			"dependencies": {
+				"@algolia/autocomplete-shared": "1.9.3"
+			},
+			"peerDependencies": {
+				"@algolia/client-search": ">= 4.9.1 < 6",
+				"algoliasearch": ">= 4.9.1 < 6"
+			}
+		},
+		"node_modules/@algolia/autocomplete-shared": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+			"integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+			"peerDependencies": {
+				"@algolia/client-search": ">= 4.9.1 < 6",
+				"algoliasearch": ">= 4.9.1 < 6"
+			}
+		},
+		"node_modules/@algolia/cache-browser-local-storage": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.22.1.tgz",
+			"integrity": "sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==",
+			"dependencies": {
+				"@algolia/cache-common": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/cache-common": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.22.1.tgz",
+			"integrity": "sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA=="
+		},
+		"node_modules/@algolia/cache-in-memory": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.22.1.tgz",
+			"integrity": "sha512-ve+6Ac2LhwpufuWavM/aHjLoNz/Z/sYSgNIXsinGofWOysPilQZPUetqLj8vbvi+DHZZaYSEP9H5SRVXnpsNNw==",
+			"dependencies": {
+				"@algolia/cache-common": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/client-account": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.22.1.tgz",
+			"integrity": "sha512-k8m+oegM2zlns/TwZyi4YgCtyToackkOpE+xCaKCYfBfDtdGOaVZCM5YvGPtK+HGaJMIN/DoTL8asbM3NzHonw==",
+			"dependencies": {
+				"@algolia/client-common": "4.22.1",
+				"@algolia/client-search": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/client-analytics": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.22.1.tgz",
+			"integrity": "sha512-1ssi9pyxyQNN4a7Ji9R50nSdISIumMFDwKNuwZipB6TkauJ8J7ha/uO60sPJFqQyqvvI+px7RSNRQT3Zrvzieg==",
+			"dependencies": {
+				"@algolia/client-common": "4.22.1",
+				"@algolia/client-search": "4.22.1",
+				"@algolia/requester-common": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/client-common": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.22.1.tgz",
+			"integrity": "sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==",
+			"dependencies": {
+				"@algolia/requester-common": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/client-personalization": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.22.1.tgz",
+			"integrity": "sha512-sl+/klQJ93+4yaqZ7ezOttMQ/nczly/3GmgZXJ1xmoewP5jmdP/X/nV5U7EHHH3hCUEHeN7X1nsIhGPVt9E1cQ==",
+			"dependencies": {
+				"@algolia/client-common": "4.22.1",
+				"@algolia/requester-common": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/client-search": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.22.1.tgz",
+			"integrity": "sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==",
+			"dependencies": {
+				"@algolia/client-common": "4.22.1",
+				"@algolia/requester-common": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/events": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz",
+			"integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
+		},
+		"node_modules/@algolia/logger-common": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.22.1.tgz",
+			"integrity": "sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg=="
+		},
+		"node_modules/@algolia/logger-console": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.22.1.tgz",
+			"integrity": "sha512-O99rcqpVPKN1RlpgD6H3khUWylU24OXlzkavUAMy6QZd1776QAcauE3oP8CmD43nbaTjBexZj2nGsBH9Tc0FVA==",
+			"dependencies": {
+				"@algolia/logger-common": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/requester-browser-xhr": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.22.1.tgz",
+			"integrity": "sha512-dtQGYIg6MteqT1Uay3J/0NDqD+UciHy3QgRbk7bNddOJu+p3hzjTRYESqEnoX/DpEkaNYdRHUKNylsqMpgwaEw==",
+			"dependencies": {
+				"@algolia/requester-common": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/requester-common": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.22.1.tgz",
+			"integrity": "sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg=="
+		},
+		"node_modules/@algolia/requester-node-http": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.22.1.tgz",
+			"integrity": "sha512-JfmZ3MVFQkAU+zug8H3s8rZ6h0ahHZL/SpMaSasTCGYR5EEJsCc8SI5UZ6raPN2tjxa5bxS13BRpGSBUens7EA==",
+			"dependencies": {
+				"@algolia/requester-common": "4.22.1"
+			}
+		},
+		"node_modules/@algolia/transporter": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.22.1.tgz",
+			"integrity": "sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==",
+			"dependencies": {
+				"@algolia/cache-common": "4.22.1",
+				"@algolia/logger-common": "4.22.1",
+				"@algolia/requester-common": "4.22.1"
+			}
+		},
+		"node_modules/@ampproject/remapping": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/code-frame": {
+			"version": "7.23.5",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+			"integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+			"dependencies": {
+				"@babel/highlight": "^7.23.4",
+				"chalk": "^2.4.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+		},
+		"node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/code-frame/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/compat-data": {
+			"version": "7.23.5",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+			"integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/core": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
+			"integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+			"dependencies": {
+				"@ampproject/remapping": "^2.2.0",
+				"@babel/code-frame": "^7.23.5",
+				"@babel/generator": "^7.23.6",
+				"@babel/helper-compilation-targets": "^7.23.6",
+				"@babel/helper-module-transforms": "^7.23.3",
+				"@babel/helpers": "^7.24.0",
+				"@babel/parser": "^7.24.0",
+				"@babel/template": "^7.24.0",
+				"@babel/traverse": "^7.24.0",
+				"@babel/types": "^7.24.0",
+				"convert-source-map": "^2.0.0",
+				"debug": "^4.1.0",
+				"gensync": "^1.0.0-beta.2",
+				"json5": "^2.2.3",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/babel"
+			}
+		},
+		"node_modules/@babel/core/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/generator": {
+			"version": "7.23.6",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+			"integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+			"dependencies": {
+				"@babel/types": "^7.23.6",
+				"@jridgewell/gen-mapping": "^0.3.2",
+				"@jridgewell/trace-mapping": "^0.3.17",
+				"jsesc": "^2.5.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-annotate-as-pure": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+			"integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+			"version": "7.22.15",
+			"resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
+			"integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+			"dependencies": {
+				"@babel/types": "^7.22.15"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets": {
+			"version": "7.23.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+			"integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+			"dependencies": {
+				"@babel/compat-data": "^7.23.5",
+				"@babel/helper-validator-option": "^7.23.5",
+				"browserslist": "^4.22.2",
+				"lru-cache": "^5.1.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz",
+			"integrity": "sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-function-name": "^7.23.0",
+				"@babel/helper-member-expression-to-functions": "^7.23.0",
+				"@babel/helper-optimise-call-expression": "^7.22.5",
+				"@babel/helper-replace-supers": "^7.22.20",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+				"@babel/helper-split-export-declaration": "^7.22.6",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-create-regexp-features-plugin": {
+			"version": "7.22.15",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
+			"integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"regexpu-core": "^5.3.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-define-polyfill-provider": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.2.tgz",
+			"integrity": "sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.22.6",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"debug": "^4.1.1",
+				"lodash.debounce": "^4.0.8",
+				"resolve": "^1.14.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/@babel/helper-environment-visitor": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+			"integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-function-name": {
+			"version": "7.23.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+			"integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+			"dependencies": {
+				"@babel/template": "^7.22.15",
+				"@babel/types": "^7.23.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-hoist-variables": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+			"integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-member-expression-to-functions": {
+			"version": "7.23.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+			"integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+			"dependencies": {
+				"@babel/types": "^7.23.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-imports": {
+			"version": "7.22.15",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+			"integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+			"dependencies": {
+				"@babel/types": "^7.22.15"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-transforms": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+			"integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+			"dependencies": {
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-module-imports": "^7.22.15",
+				"@babel/helper-simple-access": "^7.22.5",
+				"@babel/helper-split-export-declaration": "^7.22.6",
+				"@babel/helper-validator-identifier": "^7.22.20"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-optimise-call-expression": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+			"integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-plugin-utils": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+			"integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-remap-async-to-generator": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
+			"integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-wrap-function": "^7.22.20"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-replace-supers": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+			"integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+			"dependencies": {
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-member-expression-to-functions": "^7.22.15",
+				"@babel/helper-optimise-call-expression": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-simple-access": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+			"integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+			"integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-split-export-declaration": {
+			"version": "7.22.6",
+			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+			"integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+			"dependencies": {
+				"@babel/types": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+			"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+			"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-option": {
+			"version": "7.23.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+			"integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-wrap-function": {
+			"version": "7.22.20",
+			"resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz",
+			"integrity": "sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==",
+			"dependencies": {
+				"@babel/helper-function-name": "^7.22.5",
+				"@babel/template": "^7.22.15",
+				"@babel/types": "^7.22.19"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helpers": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
+			"integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
+			"dependencies": {
+				"@babel/template": "^7.24.0",
+				"@babel/traverse": "^7.24.0",
+				"@babel/types": "^7.24.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/highlight": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+			"integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+			"dependencies": {
+				"@babel/helper-validator-identifier": "^7.22.20",
+				"chalk": "^2.4.2",
+				"js-tokens": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/ansi-styles": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+			"dependencies": {
+				"color-convert": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/chalk": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+			"dependencies": {
+				"ansi-styles": "^3.2.1",
+				"escape-string-regexp": "^1.0.5",
+				"supports-color": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/color-convert": {
+			"version": "1.9.3",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+			"dependencies": {
+				"color-name": "1.1.3"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/color-name": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+		},
+		"node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/has-flag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/highlight/node_modules/supports-color": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+			"dependencies": {
+				"has-flag": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+			"integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz",
+			"integrity": "sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz",
+			"integrity": "sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+				"@babel/plugin-transform-optional-chaining": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.13.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+			"version": "7.23.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz",
+			"integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==",
+			"dependencies": {
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-private-property-in-object": {
+			"version": "7.21.0-placeholder-for-preset-env.2",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+			"integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-async-generators": {
+			"version": "7.8.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+			"integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-class-properties": {
+			"version": "7.12.13",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+			"integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.12.13"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-class-static-block": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+			"integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-dynamic-import": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+			"integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-export-namespace-from": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+			"integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.3"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-assertions": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz",
+			"integrity": "sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-attributes": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz",
+			"integrity": "sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-meta": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+			"integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-json-strings": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+			"integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-jsx": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+			"integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+			"integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+			"integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-numeric-separator": {
+			"version": "7.10.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+			"integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.10.4"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-object-rest-spread": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+			"integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-optional-catch-binding": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+			"integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-optional-chaining": {
+			"version": "7.8.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+			"integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.8.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-private-property-in-object": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+			"integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-top-level-await": {
+			"version": "7.14.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+			"integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-typescript": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
+			"integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+			"integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-arrow-functions": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz",
+			"integrity": "sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-async-generator-functions": {
+			"version": "7.23.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz",
+			"integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==",
+			"dependencies": {
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-remap-async-to-generator": "^7.22.20",
+				"@babel/plugin-syntax-async-generators": "^7.8.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-async-to-generator": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz",
+			"integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-remap-async-to-generator": "^7.22.20"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoped-functions": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz",
+			"integrity": "sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoping": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz",
+			"integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-class-properties": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz",
+			"integrity": "sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-class-static-block": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz",
+			"integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-class-static-block": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-classes": {
+			"version": "7.23.8",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz",
+			"integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-compilation-targets": "^7.23.6",
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-function-name": "^7.23.0",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-replace-supers": "^7.22.20",
+				"@babel/helper-split-export-declaration": "^7.22.6",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-computed-properties": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz",
+			"integrity": "sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/template": "^7.22.15"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-destructuring": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz",
+			"integrity": "sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-dotall-regex": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz",
+			"integrity": "sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-duplicate-keys": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz",
+			"integrity": "sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-dynamic-import": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz",
+			"integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-exponentiation-operator": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz",
+			"integrity": "sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==",
+			"dependencies": {
+				"@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-export-namespace-from": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz",
+			"integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-for-of": {
+			"version": "7.23.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz",
+			"integrity": "sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-function-name": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz",
+			"integrity": "sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.22.15",
+				"@babel/helper-function-name": "^7.23.0",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-json-strings": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz",
+			"integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-json-strings": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-literals": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz",
+			"integrity": "sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-logical-assignment-operators": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz",
+			"integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-member-expression-literals": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz",
+			"integrity": "sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-amd": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz",
+			"integrity": "sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.23.3",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-commonjs": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
+			"integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.23.3",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-simple-access": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-systemjs": {
+			"version": "7.23.9",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz",
+			"integrity": "sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==",
+			"dependencies": {
+				"@babel/helper-hoist-variables": "^7.22.5",
+				"@babel/helper-module-transforms": "^7.23.3",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-validator-identifier": "^7.22.20"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-umd": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz",
+			"integrity": "sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.23.3",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+			"integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.22.5",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-new-target": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz",
+			"integrity": "sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz",
+			"integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-numeric-separator": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz",
+			"integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-numeric-separator": "^7.10.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-object-rest-spread": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.0.tgz",
+			"integrity": "sha512-y/yKMm7buHpFFXfxVFS4Vk1ToRJDilIa6fKRioB9Vjichv58TDGXTvqV0dN7plobAmTW5eSEGXDngE+Mm+uO+w==",
+			"dependencies": {
+				"@babel/compat-data": "^7.23.5",
+				"@babel/helper-compilation-targets": "^7.23.6",
+				"@babel/helper-plugin-utils": "^7.24.0",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-transform-parameters": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-object-super": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz",
+			"integrity": "sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-replace-supers": "^7.22.20"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-optional-catch-binding": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz",
+			"integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-optional-chaining": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz",
+			"integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-parameters": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz",
+			"integrity": "sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-private-methods": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz",
+			"integrity": "sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-private-property-in-object": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz",
+			"integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-create-class-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-property-literals": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz",
+			"integrity": "sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-constant-elements": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.23.3.tgz",
+			"integrity": "sha512-zP0QKq/p6O42OL94udMgSfKXyse4RyJ0JqbQ34zDAONWjyrEsghYEyTSK5FIpmXmCpB55SHokL1cRRKHv8L2Qw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-display-name": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz",
+			"integrity": "sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-jsx": {
+			"version": "7.23.4",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz",
+			"integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-module-imports": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-jsx": "^7.23.3",
+				"@babel/types": "^7.23.4"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-jsx-development": {
+			"version": "7.22.5",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+			"integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
+			"dependencies": {
+				"@babel/plugin-transform-react-jsx": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-react-pure-annotations": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz",
+			"integrity": "sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-regenerator": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz",
+			"integrity": "sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"regenerator-transform": "^0.15.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-reserved-words": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz",
+			"integrity": "sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-runtime": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.0.tgz",
+			"integrity": "sha512-zc0GA5IitLKJrSfXlXmp8KDqLrnGECK7YRfQBmEKg1NmBOQ7e+KuclBEKJgzifQeUYLdNiAw4B4bjyvzWVLiSA==",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.24.0",
+				"babel-plugin-polyfill-corejs2": "^0.4.8",
+				"babel-plugin-polyfill-corejs3": "^0.9.0",
+				"babel-plugin-polyfill-regenerator": "^0.5.5",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/plugin-transform-shorthand-properties": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz",
+			"integrity": "sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-spread": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz",
+			"integrity": "sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-sticky-regex": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz",
+			"integrity": "sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-template-literals": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz",
+			"integrity": "sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-typeof-symbol": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz",
+			"integrity": "sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-typescript": {
+			"version": "7.23.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
+			"integrity": "sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.22.5",
+				"@babel/helper-create-class-features-plugin": "^7.23.6",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/plugin-syntax-typescript": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-escapes": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz",
+			"integrity": "sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-property-regex": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.23.3.tgz",
+			"integrity": "sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-regex": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz",
+			"integrity": "sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-sets-regex": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.23.3.tgz",
+			"integrity": "sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.22.15",
+				"@babel/helper-plugin-utils": "^7.22.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/preset-env": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.0.tgz",
+			"integrity": "sha512-ZxPEzV9IgvGn73iK0E6VB9/95Nd7aMFpbE0l8KQFDG70cOV9IxRP7Y2FUPmlK0v6ImlLqYX50iuZ3ZTVhOF2lA==",
+			"dependencies": {
+				"@babel/compat-data": "^7.23.5",
+				"@babel/helper-compilation-targets": "^7.23.6",
+				"@babel/helper-plugin-utils": "^7.24.0",
+				"@babel/helper-validator-option": "^7.23.5",
+				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
+				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
+				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
+				"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+				"@babel/plugin-syntax-async-generators": "^7.8.4",
+				"@babel/plugin-syntax-class-properties": "^7.12.13",
+				"@babel/plugin-syntax-class-static-block": "^7.14.5",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+				"@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+				"@babel/plugin-syntax-import-assertions": "^7.23.3",
+				"@babel/plugin-syntax-import-attributes": "^7.23.3",
+				"@babel/plugin-syntax-import-meta": "^7.10.4",
+				"@babel/plugin-syntax-json-strings": "^7.8.3",
+				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+				"@babel/plugin-syntax-numeric-separator": "^7.10.4",
+				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+				"@babel/plugin-syntax-optional-chaining": "^7.8.3",
+				"@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+				"@babel/plugin-syntax-top-level-await": "^7.14.5",
+				"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+				"@babel/plugin-transform-arrow-functions": "^7.23.3",
+				"@babel/plugin-transform-async-generator-functions": "^7.23.9",
+				"@babel/plugin-transform-async-to-generator": "^7.23.3",
+				"@babel/plugin-transform-block-scoped-functions": "^7.23.3",
+				"@babel/plugin-transform-block-scoping": "^7.23.4",
+				"@babel/plugin-transform-class-properties": "^7.23.3",
+				"@babel/plugin-transform-class-static-block": "^7.23.4",
+				"@babel/plugin-transform-classes": "^7.23.8",
+				"@babel/plugin-transform-computed-properties": "^7.23.3",
+				"@babel/plugin-transform-destructuring": "^7.23.3",
+				"@babel/plugin-transform-dotall-regex": "^7.23.3",
+				"@babel/plugin-transform-duplicate-keys": "^7.23.3",
+				"@babel/plugin-transform-dynamic-import": "^7.23.4",
+				"@babel/plugin-transform-exponentiation-operator": "^7.23.3",
+				"@babel/plugin-transform-export-namespace-from": "^7.23.4",
+				"@babel/plugin-transform-for-of": "^7.23.6",
+				"@babel/plugin-transform-function-name": "^7.23.3",
+				"@babel/plugin-transform-json-strings": "^7.23.4",
+				"@babel/plugin-transform-literals": "^7.23.3",
+				"@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
+				"@babel/plugin-transform-member-expression-literals": "^7.23.3",
+				"@babel/plugin-transform-modules-amd": "^7.23.3",
+				"@babel/plugin-transform-modules-commonjs": "^7.23.3",
+				"@babel/plugin-transform-modules-systemjs": "^7.23.9",
+				"@babel/plugin-transform-modules-umd": "^7.23.3",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+				"@babel/plugin-transform-new-target": "^7.23.3",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+				"@babel/plugin-transform-numeric-separator": "^7.23.4",
+				"@babel/plugin-transform-object-rest-spread": "^7.24.0",
+				"@babel/plugin-transform-object-super": "^7.23.3",
+				"@babel/plugin-transform-optional-catch-binding": "^7.23.4",
+				"@babel/plugin-transform-optional-chaining": "^7.23.4",
+				"@babel/plugin-transform-parameters": "^7.23.3",
+				"@babel/plugin-transform-private-methods": "^7.23.3",
+				"@babel/plugin-transform-private-property-in-object": "^7.23.4",
+				"@babel/plugin-transform-property-literals": "^7.23.3",
+				"@babel/plugin-transform-regenerator": "^7.23.3",
+				"@babel/plugin-transform-reserved-words": "^7.23.3",
+				"@babel/plugin-transform-shorthand-properties": "^7.23.3",
+				"@babel/plugin-transform-spread": "^7.23.3",
+				"@babel/plugin-transform-sticky-regex": "^7.23.3",
+				"@babel/plugin-transform-template-literals": "^7.23.3",
+				"@babel/plugin-transform-typeof-symbol": "^7.23.3",
+				"@babel/plugin-transform-unicode-escapes": "^7.23.3",
+				"@babel/plugin-transform-unicode-property-regex": "^7.23.3",
+				"@babel/plugin-transform-unicode-regex": "^7.23.3",
+				"@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
+				"@babel/preset-modules": "0.1.6-no-external-plugins",
+				"babel-plugin-polyfill-corejs2": "^0.4.8",
+				"babel-plugin-polyfill-corejs3": "^0.9.0",
+				"babel-plugin-polyfill-regenerator": "^0.5.5",
+				"core-js-compat": "^3.31.0",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/preset-env/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/preset-modules": {
+			"version": "0.1.6-no-external-plugins",
+			"resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+			"integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.0.0",
+				"@babel/types": "^7.4.4",
+				"esutils": "^2.0.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/@babel/preset-react": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.23.3.tgz",
+			"integrity": "sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-validator-option": "^7.22.15",
+				"@babel/plugin-transform-react-display-name": "^7.23.3",
+				"@babel/plugin-transform-react-jsx": "^7.22.15",
+				"@babel/plugin-transform-react-jsx-development": "^7.22.5",
+				"@babel/plugin-transform-react-pure-annotations": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/preset-typescript": {
+			"version": "7.23.3",
+			"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz",
+			"integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"@babel/helper-validator-option": "^7.22.15",
+				"@babel/plugin-syntax-jsx": "^7.23.3",
+				"@babel/plugin-transform-modules-commonjs": "^7.23.3",
+				"@babel/plugin-transform-typescript": "^7.23.3"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/regjsgen": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+			"integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+			"integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/runtime-corejs3": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.24.0.tgz",
+			"integrity": "sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==",
+			"dependencies": {
+				"core-js-pure": "^3.30.2",
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/template": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+			"integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+			"dependencies": {
+				"@babel/code-frame": "^7.23.5",
+				"@babel/parser": "^7.24.0",
+				"@babel/types": "^7.24.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
+			"integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
+			"dependencies": {
+				"@babel/code-frame": "^7.23.5",
+				"@babel/generator": "^7.23.6",
+				"@babel/helper-environment-visitor": "^7.22.20",
+				"@babel/helper-function-name": "^7.23.0",
+				"@babel/helper-hoist-variables": "^7.22.5",
+				"@babel/helper-split-export-declaration": "^7.22.6",
+				"@babel/parser": "^7.24.0",
+				"@babel/types": "^7.24.0",
+				"debug": "^4.3.1",
+				"globals": "^11.1.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.24.0",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+			"integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.23.4",
+				"@babel/helper-validator-identifier": "^7.22.20",
+				"to-fast-properties": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@colors/colors": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+			"integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=0.1.90"
+			}
+		},
+		"node_modules/@discoveryjs/json-ext": {
+			"version": "0.5.7",
+			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+			"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/@docsearch/css": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.0.tgz",
+			"integrity": "sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ=="
+		},
+		"node_modules/@docsearch/react": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.0.tgz",
+			"integrity": "sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==",
+			"dependencies": {
+				"@algolia/autocomplete-core": "1.9.3",
+				"@algolia/autocomplete-preset-algolia": "1.9.3",
+				"@docsearch/css": "3.6.0",
+				"algoliasearch": "^4.19.1"
+			},
+			"peerDependencies": {
+				"@types/react": ">= 16.8.0 < 19.0.0",
+				"react": ">= 16.8.0 < 19.0.0",
+				"react-dom": ">= 16.8.0 < 19.0.0",
+				"search-insights": ">= 1 < 3"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"react": {
+					"optional": true
+				},
+				"react-dom": {
+					"optional": true
+				},
+				"search-insights": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@docusaurus/core": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.1.1.tgz",
+			"integrity": "sha512-2nQfKFcf+MLEM7JXsXwQxPOmQAR6ytKMZVSx7tVi9HEm9WtfwBH1fp6bn8Gj4zLUhjWKCLoysQ9/Wm+EZCQ4yQ==",
+			"dependencies": {
+				"@babel/core": "^7.23.3",
+				"@babel/generator": "^7.23.3",
+				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
+				"@babel/plugin-transform-runtime": "^7.22.9",
+				"@babel/preset-env": "^7.22.9",
+				"@babel/preset-react": "^7.22.5",
+				"@babel/preset-typescript": "^7.22.5",
+				"@babel/runtime": "^7.22.6",
+				"@babel/runtime-corejs3": "^7.22.6",
+				"@babel/traverse": "^7.22.8",
+				"@docusaurus/cssnano-preset": "3.1.1",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/react-loadable": "5.5.2",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-common": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"@slorber/static-site-generator-webpack-plugin": "^4.0.7",
+				"@svgr/webpack": "^6.5.1",
+				"autoprefixer": "^10.4.14",
+				"babel-loader": "9.2.1",
+				"babel-plugin-dynamic-import-node": "^2.3.3",
+				"boxen": "^6.2.1",
+				"chalk": "^4.1.2",
+				"chokidar": "^3.5.3",
+				"clean-css": "^5.3.2",
+				"cli-table3": "^0.6.3",
+				"combine-promises": "^1.1.0",
+				"commander": "^5.1.0",
+				"copy-webpack-plugin": "^11.0.0",
+				"core-js": "^3.31.1",
+				"css-loader": "^6.8.1",
+				"css-minimizer-webpack-plugin": "^4.2.2",
+				"cssnano": "^5.1.15",
+				"del": "^6.1.1",
+				"detect-port": "^1.5.1",
+				"escape-html": "^1.0.3",
+				"eta": "^2.2.0",
+				"file-loader": "^6.2.0",
+				"fs-extra": "^11.1.1",
+				"html-minifier-terser": "^7.2.0",
+				"html-tags": "^3.3.1",
+				"html-webpack-plugin": "^5.5.3",
+				"leven": "^3.1.0",
+				"lodash": "^4.17.21",
+				"mini-css-extract-plugin": "^2.7.6",
+				"postcss": "^8.4.26",
+				"postcss-loader": "^7.3.3",
+				"prompts": "^2.4.2",
+				"react-dev-utils": "^12.0.1",
+				"react-helmet-async": "^1.3.0",
+				"react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
+				"react-loadable-ssr-addon-v5-slorber": "^1.0.1",
+				"react-router": "^5.3.4",
+				"react-router-config": "^5.1.1",
+				"react-router-dom": "^5.3.4",
+				"rtl-detect": "^1.0.4",
+				"semver": "^7.5.4",
+				"serve-handler": "^6.1.5",
+				"shelljs": "^0.8.5",
+				"terser-webpack-plugin": "^5.3.9",
+				"tslib": "^2.6.0",
+				"update-notifier": "^6.0.2",
+				"url-loader": "^4.1.1",
+				"webpack": "^5.88.1",
+				"webpack-bundle-analyzer": "^4.9.0",
+				"webpack-dev-server": "^4.15.1",
+				"webpack-merge": "^5.9.0",
+				"webpackbar": "^5.0.2"
+			},
+			"bin": {
+				"docusaurus": "bin/docusaurus.mjs"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/cssnano-preset": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.1.1.tgz",
+			"integrity": "sha512-LnoIDjJWbirdbVZDMq+4hwmrTl2yHDnBf9MLG9qyExeAE3ac35s4yUhJI8yyTCdixzNfKit4cbXblzzqMu4+8g==",
+			"dependencies": {
+				"cssnano-preset-advanced": "^5.3.10",
+				"postcss": "^8.4.26",
+				"postcss-sort-media-queries": "^4.4.1",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			}
+		},
+		"node_modules/@docusaurus/logger": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.1.1.tgz",
+			"integrity": "sha512-BjkNDpQzewcTnST8trx4idSoAla6zZ3w22NqM/UMcFtvYJgmoE4layuTzlfql3VFPNuivvj7BOExa/+21y4X2Q==",
+			"dependencies": {
+				"chalk": "^4.1.2",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			}
+		},
+		"node_modules/@docusaurus/mdx-loader": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.1.1.tgz",
+			"integrity": "sha512-xN2IccH9+sv7TmxwsDJNS97BHdmlqWwho+kIVY4tcCXkp+k4QuzvWBeunIMzeayY4Fu13A6sAjHGv5qm72KyGA==",
+			"dependencies": {
+				"@babel/parser": "^7.22.7",
+				"@babel/traverse": "^7.22.8",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"@mdx-js/mdx": "^3.0.0",
+				"@slorber/remark-comment": "^1.0.0",
+				"escape-html": "^1.0.3",
+				"estree-util-value-to-estree": "^3.0.1",
+				"file-loader": "^6.2.0",
+				"fs-extra": "^11.1.1",
+				"image-size": "^1.0.2",
+				"mdast-util-mdx": "^3.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"rehype-raw": "^7.0.0",
+				"remark-directive": "^3.0.0",
+				"remark-emoji": "^4.0.0",
+				"remark-frontmatter": "^5.0.0",
+				"remark-gfm": "^4.0.0",
+				"stringify-object": "^3.3.0",
+				"tslib": "^2.6.0",
+				"unified": "^11.0.3",
+				"unist-util-visit": "^5.0.0",
+				"url-loader": "^4.1.1",
+				"vfile": "^6.0.1",
+				"webpack": "^5.88.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/module-type-aliases": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.1.1.tgz",
+			"integrity": "sha512-xBJyx0TMfAfVZ9ZeIOb1awdXgR4YJMocIEzTps91rq+hJDFJgJaylDtmoRhUxkwuYmNK1GJpW95b7DLztSBJ3A==",
+			"dependencies": {
+				"@docusaurus/react-loadable": "5.5.2",
+				"@docusaurus/types": "3.1.1",
+				"@types/history": "^4.7.11",
+				"@types/react": "*",
+				"@types/react-router-config": "*",
+				"@types/react-router-dom": "*",
+				"react-helmet-async": "*",
+				"react-loadable": "npm:@docusaurus/react-loadable@5.5.2"
+			},
+			"peerDependencies": {
+				"react": "*",
+				"react-dom": "*"
+			}
+		},
+		"node_modules/@docusaurus/plugin-content-blog": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.1.1.tgz",
+			"integrity": "sha512-ew/3VtVoG3emoAKmoZl7oKe1zdFOsI0NbcHS26kIxt2Z8vcXKCUgK9jJJrz0TbOipyETPhqwq4nbitrY3baibg==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-common": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"cheerio": "^1.0.0-rc.12",
+				"feed": "^4.2.2",
+				"fs-extra": "^11.1.1",
+				"lodash": "^4.17.21",
+				"reading-time": "^1.5.0",
+				"srcset": "^4.0.0",
+				"tslib": "^2.6.0",
+				"unist-util-visit": "^5.0.0",
+				"utility-types": "^3.10.0",
+				"webpack": "^5.88.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-content-docs": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.1.1.tgz",
+			"integrity": "sha512-lhFq4E874zw0UOH7ujzxnCayOyAt0f9YPVYSb9ohxrdCM8B4szxitUw9rIX4V9JLLHVoqIJb6k+lJJ1jrcGJ0A==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/module-type-aliases": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"@types/react-router-config": "^5.0.7",
+				"combine-promises": "^1.1.0",
+				"fs-extra": "^11.1.1",
+				"js-yaml": "^4.1.0",
+				"lodash": "^4.17.21",
+				"tslib": "^2.6.0",
+				"utility-types": "^3.10.0",
+				"webpack": "^5.88.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-content-pages": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.1.1.tgz",
+			"integrity": "sha512-NQHncNRAJbyLtgTim9GlEnNYsFhuCxaCNkMwikuxLTiGIPH7r/jpb7O3f3jUMYMebZZZrDq5S7om9a6rvB/YCA==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"fs-extra": "^11.1.1",
+				"tslib": "^2.6.0",
+				"webpack": "^5.88.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-debug": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.1.1.tgz",
+			"integrity": "sha512-xWeMkueM9wE/8LVvl4+Qf1WqwXmreMjI5Kgr7GYCDoJ8zu4kD+KaMhrh7py7MNM38IFvU1RfrGKacCEe2DRRfQ==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"fs-extra": "^11.1.1",
+				"react-json-view-lite": "^1.2.0",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-google-analytics": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.1.1.tgz",
+			"integrity": "sha512-+q2UpWTqVi8GdlLoSlD5bS/YpxW+QMoBwrPrUH/NpvpuOi0Of7MTotsQf9JWd3hymZxl2uu1o3PIrbpxfeDFDQ==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-google-gtag": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.1.1.tgz",
+			"integrity": "sha512-0mMPiBBlQ5LFHTtjxuvt/6yzh8v7OxLi3CbeEsxXZpUzcKO/GC7UA1VOWUoBeQzQL508J12HTAlR3IBU9OofSw==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"@types/gtag.js": "^0.0.12",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-google-tag-manager": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.1.1.tgz",
+			"integrity": "sha512-d07bsrMLdDIryDtY17DgqYUbjkswZQr8cLWl4tzXrt5OR/T/zxC1SYKajzB3fd87zTu5W5klV5GmUwcNSMXQXA==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/plugin-sitemap": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.1.1.tgz",
+			"integrity": "sha512-iJ4hCaMmDaUqRv131XJdt/C/jJQx8UreDWTRqZKtNydvZVh/o4yXGRRFOplea1D9b/zpwL1Y+ZDwX7xMhIOTmg==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-common": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"fs-extra": "^11.1.1",
+				"sitemap": "^7.1.1",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/preset-classic": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.1.1.tgz",
+			"integrity": "sha512-jG4ys/hWYf69iaN/xOmF+3kjs4Nnz1Ay3CjFLDtYa8KdxbmUhArA9HmP26ru5N0wbVWhY+6kmpYhTJpez5wTyg==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/plugin-content-blog": "3.1.1",
+				"@docusaurus/plugin-content-docs": "3.1.1",
+				"@docusaurus/plugin-content-pages": "3.1.1",
+				"@docusaurus/plugin-debug": "3.1.1",
+				"@docusaurus/plugin-google-analytics": "3.1.1",
+				"@docusaurus/plugin-google-gtag": "3.1.1",
+				"@docusaurus/plugin-google-tag-manager": "3.1.1",
+				"@docusaurus/plugin-sitemap": "3.1.1",
+				"@docusaurus/theme-classic": "3.1.1",
+				"@docusaurus/theme-common": "3.1.1",
+				"@docusaurus/theme-search-algolia": "3.1.1",
+				"@docusaurus/types": "3.1.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/react-loadable": {
+			"version": "5.5.2",
+			"resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+			"integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+			"dependencies": {
+				"@types/react": "*",
+				"prop-types": "^15.6.2"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
+		"node_modules/@docusaurus/theme-classic": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.1.1.tgz",
+			"integrity": "sha512-GiPE/jbWM8Qv1A14lk6s9fhc0LhPEQ00eIczRO4QL2nAQJZXkjPG6zaVx+1cZxPFWbAsqSjKe2lqkwF3fGkQ7Q==",
+			"dependencies": {
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/module-type-aliases": "3.1.1",
+				"@docusaurus/plugin-content-blog": "3.1.1",
+				"@docusaurus/plugin-content-docs": "3.1.1",
+				"@docusaurus/plugin-content-pages": "3.1.1",
+				"@docusaurus/theme-common": "3.1.1",
+				"@docusaurus/theme-translations": "3.1.1",
+				"@docusaurus/types": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-common": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"@mdx-js/react": "^3.0.0",
+				"clsx": "^2.0.0",
+				"copy-text-to-clipboard": "^3.2.0",
+				"infima": "0.2.0-alpha.43",
+				"lodash": "^4.17.21",
+				"nprogress": "^0.2.0",
+				"postcss": "^8.4.26",
+				"prism-react-renderer": "^2.3.0",
+				"prismjs": "^1.29.0",
+				"react-router-dom": "^5.3.4",
+				"rtlcss": "^4.1.0",
+				"tslib": "^2.6.0",
+				"utility-types": "^3.10.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/theme-classic/node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@docusaurus/theme-common": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.1.1.tgz",
+			"integrity": "sha512-38urZfeMhN70YaXkwIGXmcUcv2CEYK/2l4b05GkJPrbEbgpsIZM3Xc+Js2ehBGGZmfZq8GjjQ5RNQYG+MYzCYg==",
+			"dependencies": {
+				"@docusaurus/mdx-loader": "3.1.1",
+				"@docusaurus/module-type-aliases": "3.1.1",
+				"@docusaurus/plugin-content-blog": "3.1.1",
+				"@docusaurus/plugin-content-docs": "3.1.1",
+				"@docusaurus/plugin-content-pages": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-common": "3.1.1",
+				"@types/history": "^4.7.11",
+				"@types/react": "*",
+				"@types/react-router-config": "*",
+				"clsx": "^2.0.0",
+				"parse-numeric-range": "^1.3.0",
+				"prism-react-renderer": "^2.3.0",
+				"tslib": "^2.6.0",
+				"utility-types": "^3.10.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/theme-common/node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@docusaurus/theme-search-algolia": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.1.1.tgz",
+			"integrity": "sha512-tBH9VY5EpRctVdaAhT+b1BY8y5dyHVZGFXyCHgTrvcXQy5CV4q7serEX7U3SveNT9zksmchPyct6i1sFDC4Z5g==",
+			"dependencies": {
+				"@docsearch/react": "^3.5.2",
+				"@docusaurus/core": "3.1.1",
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/plugin-content-docs": "3.1.1",
+				"@docusaurus/theme-common": "3.1.1",
+				"@docusaurus/theme-translations": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"@docusaurus/utils-validation": "3.1.1",
+				"algoliasearch": "^4.18.0",
+				"algoliasearch-helper": "^3.13.3",
+				"clsx": "^2.0.0",
+				"eta": "^2.2.0",
+				"fs-extra": "^11.1.1",
+				"lodash": "^4.17.21",
+				"tslib": "^2.6.0",
+				"utility-types": "^3.10.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/theme-search-algolia/node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@docusaurus/theme-translations": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.1.1.tgz",
+			"integrity": "sha512-xvWQFwjxHphpJq5fgk37FXCDdAa2o+r7FX8IpMg+bGZBNXyWBu3MjZ+G4+eUVNpDhVinTc+j6ucL0Ain5KCGrg==",
+			"dependencies": {
+				"fs-extra": "^11.1.1",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			}
+		},
+		"node_modules/@docusaurus/types": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.1.1.tgz",
+			"integrity": "sha512-grBqOLnubUecgKFXN9q3uit2HFbCxTWX4Fam3ZFbMN0sWX9wOcDoA7lwdX/8AmeL20Oc4kQvWVgNrsT8bKRvzg==",
+			"dependencies": {
+				"@mdx-js/mdx": "^3.0.0",
+				"@types/history": "^4.7.11",
+				"@types/react": "*",
+				"commander": "^5.1.0",
+				"joi": "^17.9.2",
+				"react-helmet-async": "^1.3.0",
+				"utility-types": "^3.10.0",
+				"webpack": "^5.88.1",
+				"webpack-merge": "^5.9.0"
+			},
+			"peerDependencies": {
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"node_modules/@docusaurus/utils": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.1.1.tgz",
+			"integrity": "sha512-ZJfJa5cJQtRYtqijsPEnAZoduW6sjAQ7ZCWSZavLcV10Fw0Z3gSaPKA/B4micvj2afRZ4gZxT7KfYqe5H8Cetg==",
+			"dependencies": {
+				"@docusaurus/logger": "3.1.1",
+				"@svgr/webpack": "^6.5.1",
+				"escape-string-regexp": "^4.0.0",
+				"file-loader": "^6.2.0",
+				"fs-extra": "^11.1.1",
+				"github-slugger": "^1.5.0",
+				"globby": "^11.1.0",
+				"gray-matter": "^4.0.3",
+				"jiti": "^1.20.0",
+				"js-yaml": "^4.1.0",
+				"lodash": "^4.17.21",
+				"micromatch": "^4.0.5",
+				"resolve-pathname": "^3.0.0",
+				"shelljs": "^0.8.5",
+				"tslib": "^2.6.0",
+				"url-loader": "^4.1.1",
+				"webpack": "^5.88.1"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"@docusaurus/types": "*"
+			},
+			"peerDependenciesMeta": {
+				"@docusaurus/types": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@docusaurus/utils-common": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.1.1.tgz",
+			"integrity": "sha512-eGne3olsIoNfPug5ixjepZAIxeYFzHHnor55Wb2P57jNbtVaFvij/T+MS8U0dtZRFi50QU+UPmRrXdVUM8uyMg==",
+			"dependencies": {
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"@docusaurus/types": "*"
+			},
+			"peerDependenciesMeta": {
+				"@docusaurus/types": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@docusaurus/utils-validation": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.1.1.tgz",
+			"integrity": "sha512-KlY4P9YVDnwL+nExvlIpu79abfEv6ZCHuOX4ZQ+gtip+Wxj0daccdReIWWtqxM/Fb5Cz1nQvUCc7VEtT8IBUAA==",
+			"dependencies": {
+				"@docusaurus/logger": "3.1.1",
+				"@docusaurus/utils": "3.1.1",
+				"joi": "^17.9.2",
+				"js-yaml": "^4.1.0",
+				"tslib": "^2.6.0"
+			},
+			"engines": {
+				"node": ">=18.0"
+			}
+		},
+		"node_modules/@hapi/hoek": {
+			"version": "9.3.0",
+			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+			"integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+		},
+		"node_modules/@hapi/topo": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+			"integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+			"dependencies": {
+				"@hapi/hoek": "^9.0.0"
+			}
+		},
+		"node_modules/@jest/schemas": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+			"integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+			"dependencies": {
+				"@sinclair/typebox": "^0.27.8"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jest/types": {
+			"version": "29.6.3",
+			"resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+			"integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+			"dependencies": {
+				"@jest/schemas": "^29.6.3",
+				"@types/istanbul-lib-coverage": "^2.0.0",
+				"@types/istanbul-reports": "^3.0.0",
+				"@types/node": "*",
+				"@types/yargs": "^17.0.8",
+				"chalk": "^4.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+			"dependencies": {
+				"@jridgewell/set-array": "^1.2.1",
+				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/set-array": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/source-map": {
+			"version": "0.3.6",
+			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+			"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.25"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.4.15",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.25",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@leichtgewicht/ip-codec": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+			"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
+		},
+		"node_modules/@mdx-js/mdx": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.1.tgz",
+			"integrity": "sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdx": "^2.0.0",
+				"collapse-white-space": "^2.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-build-jsx": "^3.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"estree-util-to-js": "^2.0.0",
+				"estree-walker": "^3.0.0",
+				"hast-util-to-estree": "^3.0.0",
+				"hast-util-to-jsx-runtime": "^2.0.0",
+				"markdown-extensions": "^2.0.0",
+				"periscopic": "^3.0.0",
+				"remark-mdx": "^3.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-rehype": "^11.0.0",
+				"source-map": "^0.7.0",
+				"unified": "^11.0.0",
+				"unist-util-position-from-estree": "^2.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/@mdx-js/react": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
+			"integrity": "sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==",
+			"dependencies": {
+				"@types/mdx": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			},
+			"peerDependencies": {
+				"@types/react": ">=16",
+				"react": ">=16"
+			}
+		},
+		"node_modules/@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"dependencies": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"dependencies": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@pnpm/config.env-replace": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
+			"integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==",
+			"engines": {
+				"node": ">=12.22.0"
+			}
+		},
+		"node_modules/@pnpm/network.ca-file": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz",
+			"integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==",
+			"dependencies": {
+				"graceful-fs": "4.2.10"
+			},
+			"engines": {
+				"node": ">=12.22.0"
+			}
+		},
+		"node_modules/@pnpm/npm-conf": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz",
+			"integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==",
+			"dependencies": {
+				"@pnpm/config.env-replace": "^1.1.0",
+				"@pnpm/network.ca-file": "^1.0.1",
+				"config-chain": "^1.1.11"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.25",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
+			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
+		},
+		"node_modules/@sideway/address": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+			"integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+			"dependencies": {
+				"@hapi/hoek": "^9.0.0"
+			}
+		},
+		"node_modules/@sideway/formula": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+			"integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+		},
+		"node_modules/@sideway/pinpoint": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+			"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+		},
+		"node_modules/@sinclair/typebox": {
+			"version": "0.27.8",
+			"resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+			"integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
+		},
+		"node_modules/@sindresorhus/is": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+			"integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/is?sponsor=1"
+			}
+		},
+		"node_modules/@slorber/remark-comment": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz",
+			"integrity": "sha512-RCE24n7jsOj1M0UPvIQCHTe7fI0sFL4S2nwKVWwHyVr/wI/H8GosgsJGyhnsZoGFnD/P2hLf1mSbrrgSLN93NA==",
+			"dependencies": {
+				"micromark-factory-space": "^1.0.0",
+				"micromark-util-character": "^1.1.0",
+				"micromark-util-symbol": "^1.0.1"
+			}
+		},
+		"node_modules/@slorber/static-site-generator-webpack-plugin": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz",
+			"integrity": "sha512-Ug7x6z5lwrz0WqdnNFOMYrDQNTPAprvHLSh6+/fmml3qUiz6l5eq+2MzLKWtn/q5K5NpSiFsZTP/fck/3vjSxA==",
+			"dependencies": {
+				"eval": "^0.1.8",
+				"p-map": "^4.0.0",
+				"webpack-sources": "^3.2.2"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
+			"integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+			"integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+			"integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
+			"integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
+			"integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
+			"integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
+			"integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-plugin-transform-svg-component": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
+			"integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/babel-preset": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz",
+			"integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==",
+			"dependencies": {
+				"@svgr/babel-plugin-add-jsx-attribute": "^6.5.1",
+				"@svgr/babel-plugin-remove-jsx-attribute": "*",
+				"@svgr/babel-plugin-remove-jsx-empty-expression": "*",
+				"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1",
+				"@svgr/babel-plugin-svg-dynamic-title": "^6.5.1",
+				"@svgr/babel-plugin-svg-em-dimensions": "^6.5.1",
+				"@svgr/babel-plugin-transform-react-native-svg": "^6.5.1",
+				"@svgr/babel-plugin-transform-svg-component": "^6.5.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@svgr/core": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz",
+			"integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
+			"dependencies": {
+				"@babel/core": "^7.19.6",
+				"@svgr/babel-preset": "^6.5.1",
+				"@svgr/plugin-jsx": "^6.5.1",
+				"camelcase": "^6.2.0",
+				"cosmiconfig": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@svgr/hast-util-to-babel-ast": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz",
+			"integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==",
+			"dependencies": {
+				"@babel/types": "^7.20.0",
+				"entities": "^4.4.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@svgr/plugin-jsx": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz",
+			"integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==",
+			"dependencies": {
+				"@babel/core": "^7.19.6",
+				"@svgr/babel-preset": "^6.5.1",
+				"@svgr/hast-util-to-babel-ast": "^6.5.1",
+				"svg-parser": "^2.0.4"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@svgr/core": "^6.0.0"
+			}
+		},
+		"node_modules/@svgr/plugin-svgo": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz",
+			"integrity": "sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==",
+			"dependencies": {
+				"cosmiconfig": "^7.0.1",
+				"deepmerge": "^4.2.2",
+				"svgo": "^2.8.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			},
+			"peerDependencies": {
+				"@svgr/core": "*"
+			}
+		},
+		"node_modules/@svgr/webpack": {
+			"version": "6.5.1",
+			"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz",
+			"integrity": "sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==",
+			"dependencies": {
+				"@babel/core": "^7.19.6",
+				"@babel/plugin-transform-react-constant-elements": "^7.18.12",
+				"@babel/preset-env": "^7.19.4",
+				"@babel/preset-react": "^7.18.6",
+				"@babel/preset-typescript": "^7.18.6",
+				"@svgr/core": "^6.5.1",
+				"@svgr/plugin-jsx": "^6.5.1",
+				"@svgr/plugin-svgo": "^6.5.1"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/gregberge"
+			}
+		},
+		"node_modules/@szmarczak/http-timer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz",
+			"integrity": "sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==",
+			"dependencies": {
+				"defer-to-connect": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/@trysound/sax": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+			"integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/@types/acorn": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
+			"integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@types/body-parser": {
+			"version": "1.19.5",
+			"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
+			"integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
+			"dependencies": {
+				"@types/connect": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/bonjour": {
+			"version": "3.5.13",
+			"resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
+			"integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/connect": {
+			"version": "3.4.38",
+			"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+			"integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/connect-history-api-fallback": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+			"integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
+			"dependencies": {
+				"@types/express-serve-static-core": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/debug": {
+			"version": "4.1.12",
+			"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+			"integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+			"dependencies": {
+				"@types/ms": "*"
+			}
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+		},
+		"node_modules/@types/estree-jsx": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+			"integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/@types/express": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
+			"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
+			"dependencies": {
+				"@types/body-parser": "*",
+				"@types/express-serve-static-core": "^4.17.33",
+				"@types/qs": "*",
+				"@types/serve-static": "*"
+			}
+		},
+		"node_modules/@types/express-serve-static-core": {
+			"version": "4.17.43",
+			"resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz",
+			"integrity": "sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==",
+			"dependencies": {
+				"@types/node": "*",
+				"@types/qs": "*",
+				"@types/range-parser": "*",
+				"@types/send": "*"
+			}
+		},
+		"node_modules/@types/gtag.js": {
+			"version": "0.0.12",
+			"resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz",
+			"integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg=="
+		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/history": {
+			"version": "4.7.11",
+			"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+			"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+		},
+		"node_modules/@types/html-minifier-terser": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+			"integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
+		},
+		"node_modules/@types/http-cache-semantics": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+			"integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
+		},
+		"node_modules/@types/http-errors": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
+			"integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA=="
+		},
+		"node_modules/@types/http-proxy": {
+			"version": "1.17.14",
+			"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
+			"integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/istanbul-lib-coverage": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+			"integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
+		},
+		"node_modules/@types/istanbul-lib-report": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+			"integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+			"dependencies": {
+				"@types/istanbul-lib-coverage": "*"
+			}
+		},
+		"node_modules/@types/istanbul-reports": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+			"integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+			"dependencies": {
+				"@types/istanbul-lib-report": "*"
+			}
+		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
+		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
+			"integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/mdx": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.11.tgz",
+			"integrity": "sha512-HM5bwOaIQJIQbAYfax35HCKxx7a3KrK3nBtIqJgSOitivTD1y3oW9P3rxY9RkXYPUk7y/AjAohfHKmFpGE79zw=="
+		},
+		"node_modules/@types/mime": {
+			"version": "1.3.5",
+			"resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+			"integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+		},
+		"node_modules/@types/ms": {
+			"version": "0.7.34",
+			"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+			"integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+		},
+		"node_modules/@types/node": {
+			"version": "17.0.45",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+			"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+			"license": "MIT"
+		},
+		"node_modules/@types/node-forge": {
+			"version": "1.3.11",
+			"resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+			"integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/parse-json": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+			"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+		},
+		"node_modules/@types/parse5": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
+			"integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
+		},
+		"node_modules/@types/prismjs": {
+			"version": "1.26.3",
+			"resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz",
+			"integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw=="
+		},
+		"node_modules/@types/prop-types": {
+			"version": "15.7.11",
+			"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+			"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
+		},
+		"node_modules/@types/qs": {
+			"version": "6.9.12",
+			"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.12.tgz",
+			"integrity": "sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg=="
+		},
+		"node_modules/@types/range-parser": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+			"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
+		},
+		"node_modules/@types/react": {
+			"version": "18.2.65",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.65.tgz",
+			"integrity": "sha512-98TsY0aW4jqx/3RqsUXwMDZSWR1Z4CUlJNue8ueS2/wcxZOsz4xmW1X8ieaWVRHcmmQM3R8xVA4XWB3dJnWwDQ==",
+			"dependencies": {
+				"@types/prop-types": "*",
+				"@types/scheduler": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"node_modules/@types/react-router": {
+			"version": "5.1.20",
+			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+			"integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+			"dependencies": {
+				"@types/history": "^4.7.11",
+				"@types/react": "*"
+			}
+		},
+		"node_modules/@types/react-router-config": {
+			"version": "5.0.11",
+			"resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.11.tgz",
+			"integrity": "sha512-WmSAg7WgqW7m4x8Mt4N6ZyKz0BubSj/2tVUMsAHp+Yd2AMwcSbeFq9WympT19p5heCFmF97R9eD5uUR/t4HEqw==",
+			"dependencies": {
+				"@types/history": "^4.7.11",
+				"@types/react": "*",
+				"@types/react-router": "^5.1.0"
+			}
+		},
+		"node_modules/@types/react-router-dom": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+			"integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+			"dependencies": {
+				"@types/history": "^4.7.11",
+				"@types/react": "*",
+				"@types/react-router": "*"
+			}
+		},
+		"node_modules/@types/retry": {
+			"version": "0.12.0",
+			"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+			"integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
+		},
+		"node_modules/@types/sax": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+			"integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/scheduler": {
+			"version": "0.16.8",
+			"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+			"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+		},
+		"node_modules/@types/send": {
+			"version": "0.17.4",
+			"resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
+			"integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
+			"dependencies": {
+				"@types/mime": "^1",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/serve-index": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
+			"integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+			"dependencies": {
+				"@types/express": "*"
+			}
+		},
+		"node_modules/@types/serve-static": {
+			"version": "1.15.5",
+			"resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.5.tgz",
+			"integrity": "sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==",
+			"dependencies": {
+				"@types/http-errors": "*",
+				"@types/mime": "*",
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/sockjs": {
+			"version": "0.3.36",
+			"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
+			"integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
+		},
+		"node_modules/@types/ws": {
+			"version": "8.5.10",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+			"integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
+		"node_modules/@types/yargs": {
+			"version": "17.0.32",
+			"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
+			"integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+			"dependencies": {
+				"@types/yargs-parser": "*"
+			}
+		},
+		"node_modules/@types/yargs-parser": {
+			"version": "21.0.3",
+			"resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+			"integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
+		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
+		},
+		"node_modules/@webassemblyjs/ast": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
+			"integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==",
+			"dependencies": {
+				"@webassemblyjs/helper-numbers": "1.11.6",
+				"@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+			}
+		},
+		"node_modules/@webassemblyjs/floating-point-hex-parser": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+			"integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
+		},
+		"node_modules/@webassemblyjs/helper-api-error": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+			"integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
+		},
+		"node_modules/@webassemblyjs/helper-buffer": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz",
+			"integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw=="
+		},
+		"node_modules/@webassemblyjs/helper-numbers": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+			"integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+			"dependencies": {
+				"@webassemblyjs/floating-point-hex-parser": "1.11.6",
+				"@webassemblyjs/helper-api-error": "1.11.6",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webassemblyjs/helper-wasm-bytecode": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+			"integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
+		},
+		"node_modules/@webassemblyjs/helper-wasm-section": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz",
+			"integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+				"@webassemblyjs/wasm-gen": "1.12.1"
+			}
+		},
+		"node_modules/@webassemblyjs/ieee754": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+			"integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+			"dependencies": {
+				"@xtuc/ieee754": "^1.2.0"
+			}
+		},
+		"node_modules/@webassemblyjs/leb128": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+			"integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+			"dependencies": {
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@webassemblyjs/utf8": {
+			"version": "1.11.6",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+			"integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
+		},
+		"node_modules/@webassemblyjs/wasm-edit": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz",
+			"integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+				"@webassemblyjs/helper-wasm-section": "1.12.1",
+				"@webassemblyjs/wasm-gen": "1.12.1",
+				"@webassemblyjs/wasm-opt": "1.12.1",
+				"@webassemblyjs/wasm-parser": "1.12.1",
+				"@webassemblyjs/wast-printer": "1.12.1"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-gen": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz",
+			"integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+				"@webassemblyjs/ieee754": "1.11.6",
+				"@webassemblyjs/leb128": "1.11.6",
+				"@webassemblyjs/utf8": "1.11.6"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-opt": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz",
+			"integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-buffer": "1.12.1",
+				"@webassemblyjs/wasm-gen": "1.12.1",
+				"@webassemblyjs/wasm-parser": "1.12.1"
+			}
+		},
+		"node_modules/@webassemblyjs/wasm-parser": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz",
+			"integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@webassemblyjs/helper-api-error": "1.11.6",
+				"@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+				"@webassemblyjs/ieee754": "1.11.6",
+				"@webassemblyjs/leb128": "1.11.6",
+				"@webassemblyjs/utf8": "1.11.6"
+			}
+		},
+		"node_modules/@webassemblyjs/wast-printer": {
+			"version": "1.12.1",
+			"resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz",
+			"integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==",
+			"dependencies": {
+				"@webassemblyjs/ast": "1.12.1",
+				"@xtuc/long": "4.2.2"
+			}
+		},
+		"node_modules/@xtuc/ieee754": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+			"integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+		},
+		"node_modules/@xtuc/long": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+			"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+		},
+		"node_modules/abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+		},
+		"node_modules/accepts": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+			"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+			"dependencies": {
+				"mime-types": "~2.1.34",
+				"negotiator": "0.6.3"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/accepts/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/accepts/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/acorn": {
+			"version": "8.11.3",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+			"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-import-attributes": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+			"integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8"
+			}
+		},
+		"node_modules/acorn-jsx": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+			"peerDependencies": {
+				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/acorn-walk": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+			"integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/address": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+			"integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/aggregate-error": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+			"integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+			"dependencies": {
+				"clean-stack": "^2.0.0",
+				"indent-string": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/ajv-formats": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+			"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+			"dependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ajv-keywords": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+			"integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3"
+			},
+			"peerDependencies": {
+				"ajv": "^8.8.2"
+			}
+		},
+		"node_modules/algoliasearch": {
+			"version": "4.22.1",
+			"resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.22.1.tgz",
+			"integrity": "sha512-jwydKFQJKIx9kIZ8Jm44SdpigFwRGPESaxZBaHSV0XWN2yBJAOT4mT7ppvlrpA4UGzz92pqFnVKr/kaZXrcreg==",
+			"dependencies": {
+				"@algolia/cache-browser-local-storage": "4.22.1",
+				"@algolia/cache-common": "4.22.1",
+				"@algolia/cache-in-memory": "4.22.1",
+				"@algolia/client-account": "4.22.1",
+				"@algolia/client-analytics": "4.22.1",
+				"@algolia/client-common": "4.22.1",
+				"@algolia/client-personalization": "4.22.1",
+				"@algolia/client-search": "4.22.1",
+				"@algolia/logger-common": "4.22.1",
+				"@algolia/logger-console": "4.22.1",
+				"@algolia/requester-browser-xhr": "4.22.1",
+				"@algolia/requester-common": "4.22.1",
+				"@algolia/requester-node-http": "4.22.1",
+				"@algolia/transporter": "4.22.1"
+			}
+		},
+		"node_modules/algoliasearch-helper": {
+			"version": "3.16.3",
+			"resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.16.3.tgz",
+			"integrity": "sha512-1OuJT6sONAa9PxcOmWo5WCAT3jQSpCR9/m5Azujja7nhUQwAUDvaaAYrcmUySsrvHh74usZHbE3jFfGnWtZj8w==",
+			"dependencies": {
+				"@algolia/events": "^4.0.1"
+			},
+			"peerDependencies": {
+				"algoliasearch": ">= 3.1 < 6"
+			}
+		},
+		"node_modules/ansi-align": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+			"integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+			"dependencies": {
+				"string-width": "^4.1.0"
+			}
+		},
+		"node_modules/ansi-align/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/ansi-align/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-html-community": {
+			"version": "0.0.8",
+			"resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+			"integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+			"engines": [
+				"node >= 0.8.0"
+			],
+			"bin": {
+				"ansi-html": "bin/ansi-html"
+			}
+		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/anymatch": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+			"dependencies": {
+				"normalize-path": "^3.0.0",
+				"picomatch": "^2.0.4"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/aproba": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+			"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
+		},
+		"node_modules/arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+		},
+		"node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+		},
+		"node_modules/array-flatten": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+			"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+		},
+		"node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/astring": {
+			"version": "1.8.6",
+			"resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz",
+			"integrity": "sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==",
+			"bin": {
+				"astring": "bin/astring"
+			}
+		},
+		"node_modules/at-least-node": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+			"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/autocomplete.js": {
+			"version": "0.37.1",
+			"resolved": "https://registry.npmjs.org/autocomplete.js/-/autocomplete.js-0.37.1.tgz",
+			"integrity": "sha512-PgSe9fHYhZEsm/9jggbjtVsGXJkPLvd+9mC7gZJ662vVL5CRWEtm/mIrrzCx0MrNxHVwxD5d00UOn6NsmL2LUQ==",
+			"dependencies": {
+				"immediate": "^3.2.3"
+			}
+		},
+		"node_modules/autoprefixer": {
+			"version": "10.4.18",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
+			"integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/autoprefixer"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"browserslist": "^4.23.0",
+				"caniuse-lite": "^1.0.30001591",
+				"fraction.js": "^4.3.7",
+				"normalize-range": "^0.1.2",
+				"picocolors": "^1.0.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"bin": {
+				"autoprefixer": "bin/autoprefixer"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/babel-loader": {
+			"version": "9.2.1",
+			"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz",
+			"integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==",
+			"license": "MIT",
+			"dependencies": {
+				"find-cache-dir": "^4.0.0",
+				"schema-utils": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0",
+				"webpack": ">=5"
+			}
+		},
+		"node_modules/babel-plugin-dynamic-import-node": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+			"integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+			"dependencies": {
+				"object.assign": "^4.1.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2": {
+			"version": "0.4.10",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz",
+			"integrity": "sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==",
+			"dependencies": {
+				"@babel/compat-data": "^7.22.6",
+				"@babel/helper-define-polyfill-provider": "^0.6.1",
+				"semver": "^6.3.1"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs3": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz",
+			"integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.5.0",
+				"core-js-compat": "^3.34.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs3/node_modules/@babel/helper-define-polyfill-provider": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
+			"integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.22.6",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"debug": "^4.1.1",
+				"lodash.debounce": "^4.0.8",
+				"resolve": "^1.14.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-regenerator": {
+			"version": "0.5.5",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz",
+			"integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.5.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-regenerator/node_modules/@babel/helper-define-polyfill-provider": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
+			"integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.22.6",
+				"@babel/helper-plugin-utils": "^7.22.5",
+				"debug": "^4.1.1",
+				"lodash.debounce": "^4.0.8",
+				"resolve": "^1.14.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/bail": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+			"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+		},
+		"node_modules/batch": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+			"integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+		},
+		"node_modules/bcp-47-match": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
+			"integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/big.js": {
+			"version": "5.2.2",
+			"resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+			"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/binary-extensions": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/body-parser": {
+			"version": "1.20.3",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+			"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"content-type": "~1.0.5",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"on-finished": "2.4.1",
+				"qs": "6.13.0",
+				"raw-body": "2.5.2",
+				"type-is": "~1.6.18",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/body-parser/node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/body-parser/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/body-parser/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
+		},
+		"node_modules/bonjour-service": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz",
+			"integrity": "sha512-oSzCS2zV14bh2kji6vNe7vrpJYCHGvcZnlffFQ1MEoX/WOeQ/teD8SYWKR942OI3INjq8OMNJlbPK5LLLUxFDw==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"multicast-dns": "^7.2.5"
+			}
+		},
+		"node_modules/boolbase": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+			"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+		},
+		"node_modules/boxen": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/boxen/-/boxen-6.2.1.tgz",
+			"integrity": "sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==",
+			"dependencies": {
+				"ansi-align": "^3.0.1",
+				"camelcase": "^6.2.0",
+				"chalk": "^4.1.2",
+				"cli-boxes": "^3.0.0",
+				"string-width": "^5.0.1",
+				"type-fest": "^2.5.0",
+				"widest-line": "^4.0.1",
+				"wrap-ansi": "^8.0.1"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/braces": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+			"license": "MIT",
+			"dependencies": {
+				"fill-range": "^7.1.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/browserslist": {
+			"version": "4.23.0",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+			"integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"caniuse-lite": "^1.0.30001587",
+				"electron-to-chromium": "^1.4.668",
+				"node-releases": "^2.0.14",
+				"update-browserslist-db": "^1.0.13"
+			},
+			"bin": {
+				"browserslist": "cli.js"
+			},
+			"engines": {
+				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+			}
+		},
+		"node_modules/buffer-from": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+		},
+		"node_modules/bytes": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+			"integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/cacheable-lookup": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
+			"integrity": "sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==",
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/cacheable-request": {
+			"version": "10.2.14",
+			"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-10.2.14.tgz",
+			"integrity": "sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==",
+			"dependencies": {
+				"@types/http-cache-semantics": "^4.0.2",
+				"get-stream": "^6.0.1",
+				"http-cache-semantics": "^4.1.1",
+				"keyv": "^4.5.3",
+				"mimic-response": "^4.0.0",
+				"normalize-url": "^8.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			}
+		},
+		"node_modules/cacheable-request/node_modules/normalize-url": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.1.tgz",
+			"integrity": "sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==",
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/call-bind": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+			"integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"set-function-length": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/callsites": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/camel-case": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+			"dependencies": {
+				"pascal-case": "^3.1.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/camelcase": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+			"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/caniuse-api": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+			"integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+			"dependencies": {
+				"browserslist": "^4.0.0",
+				"caniuse-lite": "^1.0.0",
+				"lodash.memoize": "^4.1.2",
+				"lodash.uniq": "^4.5.0"
+			}
+		},
+		"node_modules/caniuse-lite": {
+			"version": "1.0.30001597",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz",
+			"integrity": "sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			]
+		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/char-regex": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+			"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/character-entities": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+			"integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-reference-invalid": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+			"integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/cheerio": {
+			"version": "1.0.0-rc.12",
+			"resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+			"integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+			"dependencies": {
+				"cheerio-select": "^2.1.0",
+				"dom-serializer": "^2.0.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1",
+				"htmlparser2": "^8.0.1",
+				"parse5": "^7.0.0",
+				"parse5-htmlparser2-tree-adapter": "^7.0.0"
+			},
+			"engines": {
+				"node": ">= 6"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+			}
+		},
+		"node_modules/cheerio-select": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+			"integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-select": "^5.1.0",
+				"css-what": "^6.1.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"dependencies": {
+				"anymatch": "~3.1.2",
+				"braces": "~3.0.2",
+				"glob-parent": "~5.1.2",
+				"is-binary-path": "~2.1.0",
+				"is-glob": "~4.0.1",
+				"normalize-path": "~3.0.0",
+				"readdirp": "~3.6.0"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/chrome-trace-event": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+			"integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/ci-info": {
+			"version": "3.9.0",
+			"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+			"integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/sibiraj-s"
+				}
+			],
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/clean-css": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+			"integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+			"dependencies": {
+				"source-map": "~0.6.0"
+			},
+			"engines": {
+				"node": ">= 10.0"
+			}
+		},
+		"node_modules/clean-css/node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/clean-stack": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+			"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/cli-boxes": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
+			"integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/cli-table3": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+			"integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+			"dependencies": {
+				"string-width": "^4.2.0"
+			},
+			"engines": {
+				"node": "10.* || >= 12.*"
+			},
+			"optionalDependencies": {
+				"@colors/colors": "1.5.0"
+			}
+		},
+		"node_modules/cli-table3/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/cli-table3/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/clone-deep": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+			"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+			"dependencies": {
+				"is-plain-object": "^2.0.4",
+				"kind-of": "^6.0.2",
+				"shallow-clone": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/clone-deep/node_modules/is-plain-object": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+			"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+			"dependencies": {
+				"isobject": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+			"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/collapse-white-space": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+			"integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+		},
+		"node_modules/color-support": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+			"bin": {
+				"color-support": "bin.js"
+			}
+		},
+		"node_modules/colord": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+		},
+		"node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
+		},
+		"node_modules/combine-promises": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/combine-promises/-/combine-promises-1.2.0.tgz",
+			"integrity": "sha512-VcQB1ziGD0NXrhKxiwyNbCDmRzs/OShMs2GqW2DlU2A/Sd0nQxE1oWDAE5O0ygSx5mgQOn9eIFh7yKPgFRVkPQ==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/comma-separated-tokens": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+			"integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/commander": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+			"integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/common-path-prefix": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+			"integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
+		},
+		"node_modules/compressible": {
+			"version": "2.0.18",
+			"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+			"integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+			"dependencies": {
+				"mime-db": ">= 1.43.0 < 2"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/compressible/node_modules/mime-db": {
+			"version": "1.53.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.53.0.tgz",
+			"integrity": "sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/compression": {
+			"version": "1.7.4",
+			"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+			"integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+			"dependencies": {
+				"accepts": "~1.3.5",
+				"bytes": "3.0.0",
+				"compressible": "~2.0.16",
+				"debug": "2.6.9",
+				"on-headers": "~1.0.2",
+				"safe-buffer": "5.1.2",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/compression/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/compression/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/compression/node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+		},
+		"node_modules/config-chain": {
+			"version": "1.1.13",
+			"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+			"integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+			"dependencies": {
+				"ini": "^1.3.4",
+				"proto-list": "~1.2.1"
+			}
+		},
+		"node_modules/configstore": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/configstore/-/configstore-6.0.0.tgz",
+			"integrity": "sha512-cD31W1v3GqUlQvbBCGcXmd2Nj9SvLDOP1oQ0YFuLETufzSPaKp11rYBsSOm7rCsW3OnIRAFM3OxRhceaXNYHkA==",
+			"dependencies": {
+				"dot-prop": "^6.0.1",
+				"graceful-fs": "^4.2.6",
+				"unique-string": "^3.0.0",
+				"write-file-atomic": "^3.0.3",
+				"xdg-basedir": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/yeoman/configstore?sponsor=1"
+			}
+		},
+		"node_modules/connect-history-api-fallback": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+			"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+			"engines": {
+				"node": ">=0.8"
+			}
+		},
+		"node_modules/consola": {
+			"version": "2.15.3",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+			"integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
+		},
+		"node_modules/console-control-strings": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
+		},
+		"node_modules/content-disposition": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+			"integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/content-type": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+		},
+		"node_modules/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/cookie-signature": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+			"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+		},
+		"node_modules/copy-text-to-clipboard": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
+			"integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+			"integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+			"dependencies": {
+				"fast-glob": "^3.2.11",
+				"glob-parent": "^6.0.1",
+				"globby": "^13.1.1",
+				"normalize-path": "^3.0.0",
+				"schema-utils": "^4.0.0",
+				"serialize-javascript": "^6.0.0"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/globby": {
+			"version": "13.2.2",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+			"integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+			"dependencies": {
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.3.0",
+				"ignore": "^5.2.4",
+				"merge2": "^1.4.1",
+				"slash": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/copy-webpack-plugin/node_modules/slash": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+			"integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/core-js": {
+			"version": "3.36.0",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+			"integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-js-compat": {
+			"version": "3.36.0",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.0.tgz",
+			"integrity": "sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==",
+			"dependencies": {
+				"browserslist": "^4.22.3"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-js-pure": {
+			"version": "3.36.0",
+			"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.36.0.tgz",
+			"integrity": "sha512-cN28qmhRNgbMZZMc/RFu5w8pK9VJzpb2rJVR/lHuZJKwmXnoWOpXmMkxqBB514igkp1Hu8WGROsiOAzUcKdHOQ==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/core-util-is": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+			"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+		},
+		"node_modules/cosmiconfig": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+			"integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+			"dependencies": {
+				"@types/parse-json": "^4.0.0",
+				"import-fresh": "^3.2.1",
+				"parse-json": "^5.0.0",
+				"path-type": "^4.0.0",
+				"yaml": "^1.10.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/cross-spawn": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"dependencies": {
+				"path-key": "^3.1.0",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/crypto-random-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-4.0.0.tgz",
+			"integrity": "sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==",
+			"dependencies": {
+				"type-fest": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/crypto-random-string/node_modules/type-fest": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+			"integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/css-declaration-sorter": {
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+			"integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.9"
+			}
+		},
+		"node_modules/css-loader": {
+			"version": "6.10.0",
+			"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz",
+			"integrity": "sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==",
+			"dependencies": {
+				"icss-utils": "^5.1.0",
+				"postcss": "^8.4.33",
+				"postcss-modules-extract-imports": "^3.0.0",
+				"postcss-modules-local-by-default": "^4.0.4",
+				"postcss-modules-scope": "^3.1.1",
+				"postcss-modules-values": "^4.0.0",
+				"postcss-value-parser": "^4.2.0",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || 1.x",
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
+				},
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/css-minimizer-webpack-plugin": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-4.2.2.tgz",
+			"integrity": "sha512-s3Of/4jKfw1Hj9CxEO1E5oXhQAxlayuHO2y/ML+C6I9sQ7FdzfEV6QgMLN3vI+qFsjJGIAFLKtQK7t8BOXAIyA==",
+			"dependencies": {
+				"cssnano": "^5.1.8",
+				"jest-worker": "^29.1.2",
+				"postcss": "^8.4.17",
+				"schema-utils": "^4.0.0",
+				"serialize-javascript": "^6.0.0",
+				"source-map": "^0.6.1"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@parcel/css": {
+					"optional": true
+				},
+				"@swc/css": {
+					"optional": true
+				},
+				"clean-css": {
+					"optional": true
+				},
+				"csso": {
+					"optional": true
+				},
+				"esbuild": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/css-minimizer-webpack-plugin/node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/css-select": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+			"integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-what": "^6.1.0",
+				"domhandler": "^5.0.2",
+				"domutils": "^3.0.1",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/css-selector-parser": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz",
+			"integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g=="
+		},
+		"node_modules/css-tree": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+			"dependencies": {
+				"mdn-data": "2.0.14",
+				"source-map": "^0.6.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/css-tree/node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/css-what": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+			"integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+			"engines": {
+				"node": ">= 6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/cssnano": {
+			"version": "5.1.15",
+			"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+			"integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+			"dependencies": {
+				"cssnano-preset-default": "^5.2.14",
+				"lilconfig": "^2.0.3",
+				"yaml": "^1.10.2"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/cssnano"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/cssnano-preset-advanced": {
+			"version": "5.3.10",
+			"resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
+			"integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
+			"dependencies": {
+				"autoprefixer": "^10.4.12",
+				"cssnano-preset-default": "^5.2.14",
+				"postcss-discard-unused": "^5.1.0",
+				"postcss-merge-idents": "^5.1.1",
+				"postcss-reduce-idents": "^5.2.0",
+				"postcss-zindex": "^5.1.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/cssnano-preset-default": {
+			"version": "5.2.14",
+			"resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+			"integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+			"dependencies": {
+				"css-declaration-sorter": "^6.3.1",
+				"cssnano-utils": "^3.1.0",
+				"postcss-calc": "^8.2.3",
+				"postcss-colormin": "^5.3.1",
+				"postcss-convert-values": "^5.1.3",
+				"postcss-discard-comments": "^5.1.2",
+				"postcss-discard-duplicates": "^5.1.0",
+				"postcss-discard-empty": "^5.1.1",
+				"postcss-discard-overridden": "^5.1.0",
+				"postcss-merge-longhand": "^5.1.7",
+				"postcss-merge-rules": "^5.1.4",
+				"postcss-minify-font-values": "^5.1.0",
+				"postcss-minify-gradients": "^5.1.1",
+				"postcss-minify-params": "^5.1.4",
+				"postcss-minify-selectors": "^5.2.1",
+				"postcss-normalize-charset": "^5.1.0",
+				"postcss-normalize-display-values": "^5.1.0",
+				"postcss-normalize-positions": "^5.1.1",
+				"postcss-normalize-repeat-style": "^5.1.1",
+				"postcss-normalize-string": "^5.1.0",
+				"postcss-normalize-timing-functions": "^5.1.0",
+				"postcss-normalize-unicode": "^5.1.1",
+				"postcss-normalize-url": "^5.1.0",
+				"postcss-normalize-whitespace": "^5.1.1",
+				"postcss-ordered-values": "^5.1.3",
+				"postcss-reduce-initial": "^5.1.2",
+				"postcss-reduce-transforms": "^5.1.0",
+				"postcss-svgo": "^5.1.0",
+				"postcss-unique-selectors": "^5.1.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/cssnano-utils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+			"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/csso": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+			"integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+			"dependencies": {
+				"css-tree": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/csstype": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+		},
+		"node_modules/debounce": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+			"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+		},
+		"node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/decode-named-character-reference": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+			"integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+			"dependencies": {
+				"character-entities": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/decompress-response": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+			"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+			"dependencies": {
+				"mimic-response": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/decompress-response/node_modules/mimic-response": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+			"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/deep-extend": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+			"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/deepmerge": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/default-gateway": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+			"integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+			"dependencies": {
+				"execa": "^5.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/defer-to-connect": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+			"integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/define-data-property": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/define-lazy-prop": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+			"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/define-properties": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+			"integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+			"dependencies": {
+				"define-data-property": "^1.0.1",
+				"has-property-descriptors": "^1.0.0",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/del": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+			"integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+			"dependencies": {
+				"globby": "^11.0.1",
+				"graceful-fs": "^4.2.4",
+				"is-glob": "^4.0.1",
+				"is-path-cwd": "^2.2.0",
+				"is-path-inside": "^3.0.2",
+				"p-map": "^4.0.0",
+				"rimraf": "^3.0.2",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/dequal": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/destroy": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8",
+				"npm": "1.2.8000 || >= 1.4.16"
+			}
+		},
+		"node_modules/detect-node": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+			"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+		},
+		"node_modules/detect-port": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+			"integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+			"dependencies": {
+				"address": "^1.0.1",
+				"debug": "4"
+			},
+			"bin": {
+				"detect": "bin/detect-port.js",
+				"detect-port": "bin/detect-port.js"
+			}
+		},
+		"node_modules/detect-port-alt": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+			"integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+			"dependencies": {
+				"address": "^1.0.1",
+				"debug": "^2.6.0"
+			},
+			"bin": {
+				"detect": "bin/detect-port",
+				"detect-port": "bin/detect-port"
+			},
+			"engines": {
+				"node": ">= 4.2.1"
+			}
+		},
+		"node_modules/detect-port-alt/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/detect-port-alt/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/direction": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
+			"integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
+			"bin": {
+				"direction": "cli.js"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/dns-packet": {
+			"version": "5.6.1",
+			"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
+			"integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+			"dependencies": {
+				"@leichtgewicht/ip-codec": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/docusaurus-lunr-search": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/docusaurus-lunr-search/-/docusaurus-lunr-search-3.3.2.tgz",
+			"integrity": "sha512-+TXfiRAwIAaNwME8bBZvC+osfoXjJSNs5BcZu92lIHoWc3Myct4Nw3jU0FMXQCQGQcQ0FgFqMDoh56LPCLVaxQ==",
+			"dependencies": {
+				"autocomplete.js": "^0.37.0",
+				"clsx": "^1.2.1",
+				"gauge": "^3.0.0",
+				"hast-util-select": "^4.0.0",
+				"hast-util-to-text": "^2.0.0",
+				"hogan.js": "^3.0.2",
+				"lunr": "^2.3.8",
+				"lunr-languages": "^1.4.0",
+				"mark.js": "^8.11.1",
+				"minimatch": "^3.0.4",
+				"rehype-parse": "^7.0.1",
+				"to-vfile": "^6.1.0",
+				"unified": "^9.0.0",
+				"unist-util-is": "^4.0.2"
+			},
+			"engines": {
+				"node": ">= 8.10.0"
+			},
+			"peerDependencies": {
+				"@docusaurus/core": "^2.0.0-alpha.60 || ^2.0.0 || ^3.0.0",
+				"react": "^16.8.4 || ^17 || ^18",
+				"react-dom": "^16.8.4 || ^17 || ^18"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/bail": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+			"integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/is-plain-obj": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+			"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/trough": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+			"integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/unified": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-9.2.2.tgz",
+			"integrity": "sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==",
+			"dependencies": {
+				"bail": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-buffer": "^2.0.0",
+				"is-plain-obj": "^2.0.0",
+				"trough": "^1.0.0",
+				"vfile": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/vfile": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+			"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"is-buffer": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0",
+				"vfile-message": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/docusaurus-lunr-search/node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/dom-converter": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+			"integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+			"dependencies": {
+				"utila": "~0.4"
+			}
+		},
+		"node_modules/dom-serializer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+			"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.2",
+				"entities": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			]
+		},
+		"node_modules/domhandler": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+			"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+			"dependencies": {
+				"domelementtype": "^2.3.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+			"integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+			"dependencies": {
+				"dom-serializer": "^2.0.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/dot-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/dot-prop": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
+			"integrity": "sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==",
+			"dependencies": {
+				"is-obj": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/dot-prop/node_modules/is-obj": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+			"integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/duplexer": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+			"integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+		},
+		"node_modules/eastasianwidth": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
+		},
+		"node_modules/electron-to-chromium": {
+			"version": "1.4.704",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.704.tgz",
+			"integrity": "sha512-OK01+86Qvby1V6cTiowVbhp25aX4DLZnwar+NocAOXdzKAByd+jq5156bmo4kHwevWMknznW18Y/Svfk2dU91A=="
+		},
+		"node_modules/emoji-regex": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+		},
+		"node_modules/emojilib": {
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+			"integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
+		},
+		"node_modules/emojis-list": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+			"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/emoticon": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
+			"integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.17.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+			"integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/error-ex": {
+			"version": "1.3.2",
+			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+			"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+			"dependencies": {
+				"is-arrayish": "^0.2.1"
+			}
+		},
+		"node_modules/es-define-property": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+			"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+			"dependencies": {
+				"get-intrinsic": "^1.2.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-module-lexer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
+		},
+		"node_modules/escalade": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+			"integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/escape-goat": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-4.0.0.tgz",
+			"integrity": "sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+		},
+		"node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint-scope": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+			"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^4.1.1"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/esrecurse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+			"dependencies": {
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/esrecurse/node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estraverse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+			"integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estree-util-attach-comments": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
+			"integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/estree-util-build-jsx": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
+			"integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"estree-walker": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/estree-util-is-identifier-name": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+			"integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/estree-util-to-js": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
+			"integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"astring": "^1.8.0",
+				"source-map": "^0.7.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/estree-util-value-to-estree": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.0.1.tgz",
+			"integrity": "sha512-b2tdzTurEIbwRh+mKrEcaWfu1wgb8J1hVsgREg7FFiecWwK/PhO8X0kyc+0bIcKNtD4sqxIdNoRy6/p/TvECEA==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"is-plain-obj": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/remcohaszing"
+			}
+		},
+		"node_modules/estree-util-visit": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+			"integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/estree-walker": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			}
+		},
+		"node_modules/esutils": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/eta": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/eta/-/eta-2.2.0.tgz",
+			"integrity": "sha512-UVQ72Rqjy/ZKQalzV5dCCJP80GrmPrMxh6NlNf+erV6ObL0ZFkhCstWRawS85z3smdr3d2wXPsZEY7rDPfGd2g==",
+			"engines": {
+				"node": ">=6.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/eta-dev/eta?sponsor=1"
+			}
+		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/eval": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/eval/-/eval-0.1.8.tgz",
+			"integrity": "sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==",
+			"dependencies": {
+				"@types/node": "*",
+				"require-like": ">= 0.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/eventemitter3": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+		},
+		"node_modules/events": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+			"engines": {
+				"node": ">=0.8.x"
+			}
+		},
+		"node_modules/execa": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+			"integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+			"dependencies": {
+				"cross-spawn": "^7.0.3",
+				"get-stream": "^6.0.0",
+				"human-signals": "^2.1.0",
+				"is-stream": "^2.0.0",
+				"merge-stream": "^2.0.0",
+				"npm-run-path": "^4.0.1",
+				"onetime": "^5.1.2",
+				"signal-exit": "^3.0.3",
+				"strip-final-newline": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/execa?sponsor=1"
+			}
+		},
+		"node_modules/express": {
+			"version": "4.21.0",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+			"integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+			"license": "MIT",
+			"dependencies": {
+				"accepts": "~1.3.8",
+				"array-flatten": "1.1.1",
+				"body-parser": "1.20.3",
+				"content-disposition": "0.5.4",
+				"content-type": "~1.0.4",
+				"cookie": "0.6.0",
+				"cookie-signature": "1.0.6",
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"finalhandler": "1.3.1",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"merge-descriptors": "1.0.3",
+				"methods": "~1.1.2",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"path-to-regexp": "0.1.10",
+				"proxy-addr": "~2.0.7",
+				"qs": "6.13.0",
+				"range-parser": "~1.2.1",
+				"safe-buffer": "5.2.1",
+				"send": "0.19.0",
+				"serve-static": "1.16.2",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"type-is": "~1.6.18",
+				"utils-merge": "1.0.1",
+				"vary": "~1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.10.0"
+			}
+		},
+		"node_modules/express/node_modules/content-disposition": {
+			"version": "0.5.4",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+			"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+			"dependencies": {
+				"safe-buffer": "5.2.1"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/express/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/express/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/express/node_modules/path-to-regexp": {
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+			"integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+			"license": "MIT"
+		},
+		"node_modules/express/node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+		},
+		"node_modules/extend-shallow": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+			"integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+			"dependencies": {
+				"is-extendable": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/fast-deep-equal": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+		},
+		"node_modules/fast-glob": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+			"integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/fast-json-stable-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+		},
+		"node_modules/fast-uri": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+			"integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+			"license": "MIT"
+		},
+		"node_modules/fast-url-parser": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+			"integrity": "sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
+			"dependencies": {
+				"punycode": "^1.3.2"
+			}
+		},
+		"node_modules/fastq": {
+			"version": "1.17.1",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+			"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+			"dependencies": {
+				"reusify": "^1.0.4"
+			}
+		},
+		"node_modules/fault": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+			"integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+			"dependencies": {
+				"format": "^0.2.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/faye-websocket": {
+			"version": "0.11.4",
+			"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+			"integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+			"dependencies": {
+				"websocket-driver": ">=0.5.1"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/feed": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/feed/-/feed-4.2.2.tgz",
+			"integrity": "sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==",
+			"dependencies": {
+				"xml-js": "^1.6.11"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/file-loader": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+			"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+			"dependencies": {
+				"loader-utils": "^2.0.0",
+				"schema-utils": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.0.0 || ^5.0.0"
+			}
+		},
+		"node_modules/file-loader/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/file-loader/node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/file-loader/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/file-loader/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/filesize": {
+			"version": "8.0.7",
+			"resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+			"integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
+		"node_modules/fill-range": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+			"license": "MIT",
+			"dependencies": {
+				"to-regex-range": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/finalhandler": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+			"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "2.6.9",
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"on-finished": "2.4.1",
+				"parseurl": "~1.3.3",
+				"statuses": "2.0.1",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/finalhandler/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/finalhandler/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
+		},
+		"node_modules/find-cache-dir": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
+			"integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==",
+			"dependencies": {
+				"common-path-prefix": "^3.0.0",
+				"pkg-dir": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/find-up": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
+			"integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
+			"dependencies": {
+				"locate-path": "^7.1.0",
+				"path-exists": "^5.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/flat": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+			"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+			"bin": {
+				"flat": "cli.js"
+			}
+		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.6",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+			"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin": {
+			"version": "6.5.3",
+			"resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
+			"integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
+			"dependencies": {
+				"@babel/code-frame": "^7.8.3",
+				"@types/json-schema": "^7.0.5",
+				"chalk": "^4.1.0",
+				"chokidar": "^3.4.2",
+				"cosmiconfig": "^6.0.0",
+				"deepmerge": "^4.2.2",
+				"fs-extra": "^9.0.0",
+				"glob": "^7.1.6",
+				"memfs": "^3.1.2",
+				"minimatch": "^3.0.4",
+				"schema-utils": "2.7.0",
+				"semver": "^7.3.2",
+				"tapable": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=10",
+				"yarn": ">=1.0.0"
+			},
+			"peerDependencies": {
+				"eslint": ">= 6",
+				"typescript": ">= 2.7",
+				"vue-template-compiler": "*",
+				"webpack": ">= 4"
+			},
+			"peerDependenciesMeta": {
+				"eslint": {
+					"optional": true
+				},
+				"vue-template-compiler": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+			"integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+			"dependencies": {
+				"@types/parse-json": "^4.0.0",
+				"import-fresh": "^3.1.0",
+				"parse-json": "^5.0.0",
+				"path-type": "^4.0.0",
+				"yaml": "^1.7.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+			"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+			"dependencies": {
+				"at-least-node": "^1.0.0",
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+			"integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.4",
+				"ajv": "^6.12.2",
+				"ajv-keywords": "^3.4.1"
+			},
+			"engines": {
+				"node": ">= 8.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+			"integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/form-data-encoder": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-2.1.4.tgz",
+			"integrity": "sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==",
+			"engines": {
+				"node": ">= 14.17"
+			}
+		},
+		"node_modules/format": {
+			"version": "0.2.2",
+			"resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+			"integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+			"engines": {
+				"node": ">=0.4.x"
+			}
+		},
+		"node_modules/forwarded": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+			"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fraction.js": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+			"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "patreon",
+				"url": "https://github.com/sponsors/rawify"
+			}
+		},
+		"node_modules/fresh": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fs-extra": {
+			"version": "11.2.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+			"integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+			"dependencies": {
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=14.14"
+			}
+		},
+		"node_modules/fs-monkey": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.5.tgz",
+			"integrity": "sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew=="
+		},
+		"node_modules/fs.realpath": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"hasInstallScript": true,
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/gauge": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+			"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.2",
+				"console-control-strings": "^1.0.0",
+				"has-unicode": "^2.0.1",
+				"object-assign": "^4.1.1",
+				"signal-exit": "^3.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/gauge/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/gauge/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/gensync": {
+			"version": "1.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+			"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"has-proto": "^1.0.1",
+				"has-symbols": "^1.0.3",
+				"hasown": "^2.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-own-enumerable-property-symbols": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+			"integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+		},
+		"node_modules/get-stream": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+			"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/github-slugger": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+			"integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
+		},
+		"node_modules/glob": {
+			"version": "7.2.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+			"dependencies": {
+				"fs.realpath": "^1.0.0",
+				"inflight": "^1.0.4",
+				"inherits": "2",
+				"minimatch": "^3.1.1",
+				"once": "^1.3.0",
+				"path-is-absolute": "^1.0.0"
+			},
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/glob-to-regexp": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+			"integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+		},
+		"node_modules/global-dirs": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
+			"integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
+			"dependencies": {
+				"ini": "2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/global-dirs/node_modules/ini": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+			"integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/global-modules": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+			"integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+			"dependencies": {
+				"global-prefix": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/global-prefix": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+			"integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+			"dependencies": {
+				"ini": "^1.3.5",
+				"kind-of": "^6.0.2",
+				"which": "^1.3.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/global-prefix/node_modules/which": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+			"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"which": "bin/which"
+			}
+		},
+		"node_modules/globals": {
+			"version": "11.12.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+			"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dependencies": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/gopd": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+			"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+			"dependencies": {
+				"get-intrinsic": "^1.1.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/got": {
+			"version": "12.6.1",
+			"resolved": "https://registry.npmjs.org/got/-/got-12.6.1.tgz",
+			"integrity": "sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==",
+			"dependencies": {
+				"@sindresorhus/is": "^5.2.0",
+				"@szmarczak/http-timer": "^5.0.1",
+				"cacheable-lookup": "^7.0.0",
+				"cacheable-request": "^10.2.8",
+				"decompress-response": "^6.0.0",
+				"form-data-encoder": "^2.1.2",
+				"get-stream": "^6.0.1",
+				"http2-wrapper": "^2.1.10",
+				"lowercase-keys": "^3.0.0",
+				"p-cancelable": "^3.0.0",
+				"responselike": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/got?sponsor=1"
+			}
+		},
+		"node_modules/got/node_modules/@sindresorhus/is": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-5.6.0.tgz",
+			"integrity": "sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==",
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sindresorhus/is?sponsor=1"
+			}
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.10",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+			"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+			"license": "ISC"
+		},
+		"node_modules/gray-matter": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+			"integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+			"dependencies": {
+				"js-yaml": "^3.13.1",
+				"kind-of": "^6.0.2",
+				"section-matter": "^1.0.0",
+				"strip-bom-string": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=6.0"
+			}
+		},
+		"node_modules/gray-matter/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
+		"node_modules/gray-matter/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/gzip-size": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+			"integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+			"dependencies": {
+				"duplexer": "^0.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/handle-thing": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+			"integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
+		},
+		"node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/has-property-descriptors": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+			"dependencies": {
+				"es-define-property": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-proto": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+			"integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+			"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-unicode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=="
+		},
+		"node_modules/has-yarn": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-3.0.0.tgz",
+			"integrity": "sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/hast-util-from-parse5": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-6.0.1.tgz",
+			"integrity": "sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA==",
+			"dependencies": {
+				"@types/parse5": "^5.0.0",
+				"hastscript": "^6.0.0",
+				"property-information": "^5.0.0",
+				"vfile": "^4.0.0",
+				"vfile-location": "^3.2.0",
+				"web-namespaces": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/hast-util-from-parse5/node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-parse5/node_modules/vfile": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+			"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"is-buffer": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0",
+				"vfile-message": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-parse5/node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-has-property": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.4.tgz",
+			"integrity": "sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-is-element": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz",
+			"integrity": "sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-parse-selector": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+			"integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.2.tgz",
+			"integrity": "sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"hast-util-to-parse5": "^8.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"parse5": "^7.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/hast-util-from-parse5": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+			"integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hastscript": "^8.0.0",
+				"property-information": "^6.0.0",
+				"vfile": "^6.0.0",
+				"vfile-location": "^5.0.0",
+				"web-namespaces": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/hast-util-parse-selector": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+			"integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/hastscript": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+			"integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-parse-selector": "^4.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/vfile-location": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+			"integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-raw/node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-select": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/hast-util-select/-/hast-util-select-4.0.2.tgz",
+			"integrity": "sha512-8EEG2//bN5rrzboPWD2HdS3ugLijNioS1pqOTIolXNf67xxShYw4SQEmVXd3imiBG+U2bC2nVTySr/iRAA7Cjg==",
+			"dependencies": {
+				"bcp-47-match": "^1.0.0",
+				"comma-separated-tokens": "^1.0.0",
+				"css-selector-parser": "^1.0.0",
+				"direction": "^1.0.0",
+				"hast-util-has-property": "^1.0.0",
+				"hast-util-is-element": "^1.0.0",
+				"hast-util-to-string": "^1.0.0",
+				"hast-util-whitespace": "^1.0.0",
+				"not": "^0.1.0",
+				"nth-check": "^2.0.0",
+				"property-information": "^5.0.0",
+				"space-separated-tokens": "^1.0.0",
+				"unist-util-visit": "^2.0.0",
+				"zwitch": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/hast-util-select/node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-select/node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-estree": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
+			"integrity": "sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-attach-comments": "^3.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"mdast-util-mdx-expression": "^2.0.0",
+				"mdast-util-mdx-jsx": "^3.0.0",
+				"mdast-util-mdxjs-esm": "^2.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"style-to-object": "^0.4.0",
+				"unist-util-position": "^5.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-estree/node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-estree/node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-estree/node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-estree/node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-estree/node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
+			"integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"mdast-util-mdx-expression": "^2.0.0",
+				"mdast-util-mdx-jsx": "^3.0.0",
+				"mdast-util-mdxjs-esm": "^2.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"style-to-object": "^1.0.0",
+				"unist-util-position": "^5.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+			"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
+			"license": "MIT"
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+			"integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+			"license": "MIT",
+			"dependencies": {
+				"inline-style-parser": "0.2.4"
+			}
+		},
+		"node_modules/hast-util-to-parse5": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+			"integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-parse5/node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-parse5/node_modules/property-information": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+			"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-parse5/node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-parse5/node_modules/web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-parse5/node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/hast-util-to-string": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
+			"integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-text": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-2.0.1.tgz",
+			"integrity": "sha512-8nsgCARfs6VkwH2jJU9b8LNTuR4700na+0h3PqCaEk4MAnMDeu5P0tP8mjk9LLNGxIeQRLbiDbZVw6rku+pYsQ==",
+			"dependencies": {
+				"hast-util-is-element": "^1.0.0",
+				"repeat-string": "^1.0.0",
+				"unist-util-find-after": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-whitespace": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz",
+			"integrity": "sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hastscript": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+			"integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+			"dependencies": {
+				"@types/hast": "^2.0.0",
+				"comma-separated-tokens": "^1.0.0",
+				"hast-util-parse-selector": "^2.0.0",
+				"property-information": "^5.0.0",
+				"space-separated-tokens": "^1.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hastscript/node_modules/@types/hast": {
+			"version": "2.3.10",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+			"integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+			"dependencies": {
+				"@types/unist": "^2"
+			}
+		},
+		"node_modules/hastscript/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/he": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+			"bin": {
+				"he": "bin/he"
+			}
+		},
+		"node_modules/history": {
+			"version": "4.10.1",
+			"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+			"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2",
+				"loose-envify": "^1.2.0",
+				"resolve-pathname": "^3.0.0",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0",
+				"value-equal": "^1.0.1"
+			}
+		},
+		"node_modules/hogan.js": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz",
+			"integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==",
+			"dependencies": {
+				"mkdirp": "0.3.0",
+				"nopt": "1.0.10"
+			},
+			"bin": {
+				"hulk": "bin/hulk"
+			}
+		},
+		"node_modules/hoist-non-react-statics": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+			"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+			"dependencies": {
+				"react-is": "^16.7.0"
+			}
+		},
+		"node_modules/hpack.js": {
+			"version": "2.1.6",
+			"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+			"integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+			"dependencies": {
+				"inherits": "^2.0.1",
+				"obuf": "^1.0.0",
+				"readable-stream": "^2.0.1",
+				"wbuf": "^1.1.0"
+			}
+		},
+		"node_modules/hpack.js/node_modules/isarray": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+			"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+		},
+		"node_modules/hpack.js/node_modules/readable-stream": {
+			"version": "2.3.8",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+			"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+			"dependencies": {
+				"core-util-is": "~1.0.0",
+				"inherits": "~2.0.3",
+				"isarray": "~1.0.0",
+				"process-nextick-args": "~2.0.0",
+				"safe-buffer": "~5.1.1",
+				"string_decoder": "~1.1.1",
+				"util-deprecate": "~1.0.1"
+			}
+		},
+		"node_modules/hpack.js/node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+		},
+		"node_modules/html-entities": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
+			"integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/mdevils"
+				},
+				{
+					"type": "patreon",
+					"url": "https://patreon.com/mdevils"
+				}
+			]
+		},
+		"node_modules/html-escaper": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+			"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+		},
+		"node_modules/html-minifier-terser": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz",
+			"integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==",
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"clean-css": "~5.3.2",
+				"commander": "^10.0.0",
+				"entities": "^4.4.0",
+				"param-case": "^3.0.4",
+				"relateurl": "^0.2.7",
+				"terser": "^5.15.1"
+			},
+			"bin": {
+				"html-minifier-terser": "cli.js"
+			},
+			"engines": {
+				"node": "^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/html-minifier-terser/node_modules/commander": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+			"integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/html-tags": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+			"integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/html-webpack-plugin": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
+			"integrity": "sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==",
+			"dependencies": {
+				"@types/html-minifier-terser": "^6.0.0",
+				"html-minifier-terser": "^6.0.2",
+				"lodash": "^4.17.21",
+				"pretty-error": "^4.0.0",
+				"tapable": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/html-webpack-plugin"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || 1.x",
+				"webpack": "^5.20.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
+				},
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/html-webpack-plugin/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/html-webpack-plugin/node_modules/html-minifier-terser": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+			"integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+			"dependencies": {
+				"camel-case": "^4.1.2",
+				"clean-css": "^5.2.2",
+				"commander": "^8.3.0",
+				"he": "^1.2.0",
+				"param-case": "^3.0.4",
+				"relateurl": "^0.2.7",
+				"terser": "^5.10.0"
+			},
+			"bin": {
+				"html-minifier-terser": "cli.js"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/htmlparser2": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+			"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1",
+				"entities": "^4.4.0"
+			}
+		},
+		"node_modules/http-cache-semantics": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+			"integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
+		},
+		"node_modules/http-deceiver": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+			"integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+		},
+		"node_modules/http-errors": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"license": "MIT",
+			"dependencies": {
+				"depd": "2.0.0",
+				"inherits": "2.0.4",
+				"setprototypeof": "1.2.0",
+				"statuses": "2.0.1",
+				"toidentifier": "1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/http-parser-js": {
+			"version": "0.5.8",
+			"resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+			"integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+		},
+		"node_modules/http-proxy": {
+			"version": "1.18.1",
+			"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+			"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+			"dependencies": {
+				"eventemitter3": "^4.0.0",
+				"follow-redirects": "^1.0.0",
+				"requires-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/http-proxy-middleware": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+			"integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+			"dependencies": {
+				"@types/http-proxy": "^1.17.8",
+				"http-proxy": "^1.18.1",
+				"is-glob": "^4.0.1",
+				"is-plain-obj": "^3.0.0",
+				"micromatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"@types/express": "^4.17.13"
+			},
+			"peerDependenciesMeta": {
+				"@types/express": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+			"integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/http2-wrapper": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.2.1.tgz",
+			"integrity": "sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==",
+			"dependencies": {
+				"quick-lru": "^5.1.1",
+				"resolve-alpn": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=10.19.0"
+			}
+		},
+		"node_modules/human-signals": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+			"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+			"engines": {
+				"node": ">=10.17.0"
+			}
+		},
+		"node_modules/iconv-lite": {
+			"version": "0.4.24",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/icss-utils": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+			"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/ignore": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+			"integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/image-size": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
+			"integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+			"dependencies": {
+				"queue": "6.0.2"
+			},
+			"bin": {
+				"image-size": "bin/image-size.js"
+			},
+			"engines": {
+				"node": ">=16.x"
+			}
+		},
+		"node_modules/immediate": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+			"integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
+		},
+		"node_modules/immer": {
+			"version": "9.0.21",
+			"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+			"integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/immer"
+			}
+		},
+		"node_modules/import-fresh": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+			"dependencies": {
+				"parent-module": "^1.0.0",
+				"resolve-from": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-lazy": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+			"integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/imurmurhash": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+			"engines": {
+				"node": ">=0.8.19"
+			}
+		},
+		"node_modules/indent-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/infima": {
+			"version": "0.2.0-alpha.43",
+			"resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.43.tgz",
+			"integrity": "sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/inflight": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+			"dependencies": {
+				"once": "^1.3.0",
+				"wrappy": "1"
+			}
+		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+		},
+		"node_modules/ini": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+			"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+		},
+		"node_modules/inline-style-parser": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+			"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+		},
+		"node_modules/interpret": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+			"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/invariant": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+			"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+			"dependencies": {
+				"loose-envify": "^1.0.0"
+			}
+		},
+		"node_modules/ipaddr.js": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+			"integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/is-alphabetical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+			"integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-alphanumerical": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+			"integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+			"dependencies": {
+				"is-alphabetical": "^2.0.0",
+				"is-decimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-arrayish": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+			"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+		},
+		"node_modules/is-binary-path": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"dependencies": {
+				"binary-extensions": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-buffer": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+			"integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/is-ci": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+			"integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+			"dependencies": {
+				"ci-info": "^3.2.0"
+			},
+			"bin": {
+				"is-ci": "bin.js"
+			}
+		},
+		"node_modules/is-core-module": {
+			"version": "2.13.1",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+			"integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+			"dependencies": {
+				"hasown": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-decimal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+			"integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-docker": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+			"bin": {
+				"is-docker": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-extendable": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+			"integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-hexadecimal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+			"integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/is-installed-globally": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+			"integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+			"dependencies": {
+				"global-dirs": "^3.0.0",
+				"is-path-inside": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-npm": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/is-npm/-/is-npm-6.0.0.tgz",
+			"integrity": "sha512-JEjxbSmtPSt1c8XTkVrlujcXdKV1/tvuQ7GwKcAlyiVLeYFQ2VHat8xfrDJsIkhCdF/tZ7CiIR3sy141c6+gPQ==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-number": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.12.0"
+			}
+		},
+		"node_modules/is-obj": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+			"integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-path-cwd": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+			"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-path-inside": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-reference": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+			"dependencies": {
+				"@types/estree": "*"
+			}
+		},
+		"node_modules/is-regexp": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+			"integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-root": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+			"integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-typedarray": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+			"integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+		},
+		"node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dependencies": {
+				"is-docker": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/is-yarn-global": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.4.1.tgz",
+			"integrity": "sha512-/kppl+R+LO5VmhYSEWARUFjodS25D68gvj8W7z0I7OWhUla5xWu8KL6CtB2V0R6yqhnRgbcaREMr4EEM6htLPQ==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/isarray": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+			"integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+		},
+		"node_modules/isexe": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+		},
+		"node_modules/isobject": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+			"integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/jest-util": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+			"integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+			"dependencies": {
+				"@jest/types": "^29.6.3",
+				"@types/node": "*",
+				"chalk": "^4.0.0",
+				"ci-info": "^3.2.0",
+				"graceful-fs": "^4.2.9",
+				"picomatch": "^2.2.3"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-worker": {
+			"version": "29.7.0",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
+			"integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
+			"dependencies": {
+				"@types/node": "*",
+				"jest-util": "^29.7.0",
+				"merge-stream": "^2.0.0",
+				"supports-color": "^8.0.0"
+			},
+			"engines": {
+				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+			}
+		},
+		"node_modules/jest-worker/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
+		"node_modules/jiti": {
+			"version": "1.21.0",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+			"integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+			"bin": {
+				"jiti": "bin/jiti.js"
+			}
+		},
+		"node_modules/joi": {
+			"version": "17.12.2",
+			"resolved": "https://registry.npmjs.org/joi/-/joi-17.12.2.tgz",
+			"integrity": "sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==",
+			"dependencies": {
+				"@hapi/hoek": "^9.3.0",
+				"@hapi/topo": "^5.1.0",
+				"@sideway/address": "^4.1.5",
+				"@sideway/formula": "^3.0.1",
+				"@sideway/pinpoint": "^2.0.0"
+			}
+		},
+		"node_modules/js-tokens": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+		},
+		"node_modules/js-yaml": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/jsesc": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+			"integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/json-buffer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+		},
+		"node_modules/json-parse-even-better-errors": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+			"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+		},
+		"node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/json5": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"bin": {
+				"json5": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsonfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/keyv": {
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+			"dependencies": {
+				"json-buffer": "3.0.1"
+			}
+		},
+		"node_modules/kind-of": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+			"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/latest-version": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz",
+			"integrity": "sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==",
+			"dependencies": {
+				"package-json": "^8.1.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/launch-editor": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
+			"integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+			"dependencies": {
+				"picocolors": "^1.0.0",
+				"shell-quote": "^1.8.1"
+			}
+		},
+		"node_modules/leven": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+			"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/lilconfig": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/lines-and-columns": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+		},
+		"node_modules/loader-runner": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+			"integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+			"engines": {
+				"node": ">=6.11.5"
+			}
+		},
+		"node_modules/loader-utils": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+			"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+			"dependencies": {
+				"big.js": "^5.2.2",
+				"emojis-list": "^3.0.0",
+				"json5": "^2.1.2"
+			},
+			"engines": {
+				"node": ">=8.9.0"
+			}
+		},
+		"node_modules/locate-path": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+			"integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+			"dependencies": {
+				"p-locate": "^6.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+		},
+		"node_modules/lodash.memoize": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+			"integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+		},
+		"node_modules/lodash.uniq": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+			"integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+		},
+		"node_modules/longest-streak": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+			"integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/loose-envify": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+			"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+			"dependencies": {
+				"js-tokens": "^3.0.0 || ^4.0.0"
+			},
+			"bin": {
+				"loose-envify": "cli.js"
+			}
+		},
+		"node_modules/lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/lowercase-keys": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
+			"integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lru-cache": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dependencies": {
+				"yallist": "^3.0.2"
+			}
+		},
+		"node_modules/lunr": {
+			"version": "2.3.9",
+			"resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+			"integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+		},
+		"node_modules/lunr-languages": {
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/lunr-languages/-/lunr-languages-1.14.0.tgz",
+			"integrity": "sha512-hWUAb2KqM3L7J5bcrngszzISY4BxrXn/Xhbb9TTCJYEGqlR1nG67/M14sp09+PTIRklobrn57IAxcdcO/ZFyNA=="
+		},
+		"node_modules/mark.js": {
+			"version": "8.11.1",
+			"resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
+			"integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ=="
+		},
+		"node_modules/markdown-extensions": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
+			"integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/markdown-table": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+			"integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/mdast-util-directive": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz",
+			"integrity": "sha512-JUpYOqKI4mM3sZcNxmF/ox04XYFFkNwr0CFlrQIkCwbvH0xzMCqkMqAde9wRd80VAhaUrwFwKm2nxretdT1h7Q==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"parse-entities": "^4.0.0",
+				"stringify-entities": "^4.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-find-and-replace": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
+			"integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"escape-string-regexp": "^5.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mdast-util-find-and-replace/node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-from-markdown": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
+			"integrity": "sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark": "^4.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-from-markdown/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/mdast-util-frontmatter": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-2.0.1.tgz",
+			"integrity": "sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"escape-string-regexp": "^5.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"micromark-extension-frontmatter": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-frontmatter/node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mdast-util-gfm": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
+			"integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
+			"dependencies": {
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-gfm-autolink-literal": "^2.0.0",
+				"mdast-util-gfm-footnote": "^2.0.0",
+				"mdast-util-gfm-strikethrough": "^2.0.0",
+				"mdast-util-gfm-table": "^2.0.0",
+				"mdast-util-gfm-task-list-item": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-autolink-literal": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.0.tgz",
+			"integrity": "sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"ccount": "^2.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-find-and-replace": "^3.0.0",
+				"micromark-util-character": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-autolink-literal/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/mdast-util-gfm-autolink-literal/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/mdast-util-gfm-footnote": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
+			"integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.1.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-strikethrough": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+			"integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-table": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+			"integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"markdown-table": "^3.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-task-list-item": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+			"integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdx": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+			"integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+			"dependencies": {
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-mdx-expression": "^2.0.0",
+				"mdast-util-mdx-jsx": "^3.0.0",
+				"mdast-util-mdxjs-esm": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdx-expression": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
+			"integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdx-jsx": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
+			"integrity": "sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"devlop": "^1.1.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"parse-entities": "^4.0.0",
+				"stringify-entities": "^4.0.0",
+				"unist-util-remove-position": "^5.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-mdxjs-esm": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+			"integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+			"dependencies": {
+				"@types/estree-jsx": "^1.0.0",
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-phrasing": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+			"integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-phrasing/node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+			"integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-markdown": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+			"integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"longest-streak": "^3.0.0",
+				"mdast-util-phrasing": "^4.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"unist-util-visit": "^5.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-markdown/node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/mdast-util-to-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+			"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdn-data": {
+			"version": "2.0.14",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+		},
+		"node_modules/media-typer": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/memfs": {
+			"version": "3.5.3",
+			"resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
+			"integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
+			"dependencies": {
+				"fs-monkey": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/merge-descriptors": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+			"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/merge-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+			"integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+		},
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/methods": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+			"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/micromark": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+			"integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"@types/debug": "^4.0.0",
+				"debug": "^4.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.0.tgz",
+			"integrity": "sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-factory-destination": "^2.0.0",
+				"micromark-factory-label": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-factory-title": "^2.0.0",
+				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-html-tag-name": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-directive": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-3.0.0.tgz",
+			"integrity": "sha512-61OI07qpQrERc+0wEysLHMvoiO3s2R56x5u7glHq2Yqq6EHbH4dW25G9GfDdGCDYqA21KE6DWgNSzxSwHc2hSg==",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"parse-entities": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-directive/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-directive/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-directive/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-frontmatter": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-2.0.0.tgz",
+			"integrity": "sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==",
+			"dependencies": {
+				"fault": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-frontmatter/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-frontmatter/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-gfm": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+			"integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+			"dependencies": {
+				"micromark-extension-gfm-autolink-literal": "^2.0.0",
+				"micromark-extension-gfm-footnote": "^2.0.0",
+				"micromark-extension-gfm-strikethrough": "^2.0.0",
+				"micromark-extension-gfm-table": "^2.0.0",
+				"micromark-extension-gfm-tagfilter": "^2.0.0",
+				"micromark-extension-gfm-task-list-item": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-autolink-literal": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.0.0.tgz",
+			"integrity": "sha512-rTHfnpt/Q7dEAK1Y5ii0W8bhfJlVJFnJMHIPisfPK3gpVNuOP0VnRl96+YJ3RYWV/P4gFeQoGKNlT3RhuvpqAg==",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-autolink-literal/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-autolink-literal/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-gfm-footnote": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.0.0.tgz",
+			"integrity": "sha512-6Rzu0CYRKDv3BfLAUnZsSlzx3ak6HAoI85KTiijuKIz5UxZxbUI+pD6oHgw+6UtQuiRwnGRhzMmPRv4smcz0fg==",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-footnote/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-footnote/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-footnote/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-gfm-strikethrough": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.0.0.tgz",
+			"integrity": "sha512-c3BR1ClMp5fxxmwP6AoOY2fXO9U8uFMKs4ADD66ahLTNcwzSCyRVU4k7LPV5Nxo/VJiR4TdzxRQY2v3qIUceCw==",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-strikethrough/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-gfm-table": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.0.0.tgz",
+			"integrity": "sha512-PoHlhypg1ItIucOaHmKE8fbin3vTLpDOUg8KAr8gRCF1MOZI9Nquq2i/44wFvviM4WuxJzc3demT8Y3dkfvYrw==",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-table/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-table/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-table/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-gfm-tagfilter": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+			"integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.0.1.tgz",
+			"integrity": "sha512-cY5PzGcnULaN5O7T+cOzfMoHjBW7j+T9D2sucA5d/KbsBTPcYdebm9zUd9zzdgJGCwahV+/W78Z3nbulBYVbTw==",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-mdx-expression": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz",
+			"integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-factory-mdx-expression": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-events-to-acorn": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdx-expression/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdx-expression/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdx-expression/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-mdx-jsx": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.0.tgz",
+			"integrity": "sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==",
+			"dependencies": {
+				"@types/acorn": "^4.0.0",
+				"@types/estree": "^1.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-is-identifier-name": "^3.0.0",
+				"micromark-factory-mdx-expression": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-mdx-jsx/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdx-jsx/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdx-jsx/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-extension-mdx-md": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+			"integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-mdxjs": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+			"integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+			"dependencies": {
+				"acorn": "^8.0.0",
+				"acorn-jsx": "^5.0.0",
+				"micromark-extension-mdx-expression": "^3.0.0",
+				"micromark-extension-mdx-jsx": "^3.0.0",
+				"micromark-extension-mdx-md": "^2.0.0",
+				"micromark-extension-mdxjs-esm": "^3.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-mdxjs-esm": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+			"integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-events-to-acorn": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-position-from-estree": "^2.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-mdxjs-esm/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-mdxjs-esm/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-destination": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+			"integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-destination/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-destination/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-label": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+			"integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-label/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-label/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-mdx-expression": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.1.tgz",
+			"integrity": "sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-events-to-acorn": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-position-from-estree": "^2.0.0",
+				"vfile-message": "^4.0.0"
+			}
+		},
+		"node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-space": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+			"integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^1.0.0",
+				"micromark-util-types": "^1.0.0"
+			}
+		},
+		"node_modules/micromark-factory-space/node_modules/micromark-util-types": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+			"integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-title": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+			"integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-factory-whitespace": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+			"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-character": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+			"integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^1.0.0",
+				"micromark-util-types": "^1.0.0"
+			}
+		},
+		"node_modules/micromark-util-character/node_modules/micromark-util-types": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+			"integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-chunked": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+			"integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-chunked/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-classify-character": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+			"integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-classify-character/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-classify-character/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-combine-extensions": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+			"integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-numeric-character-reference": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+			"integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-numeric-character-reference/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-decode-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+			"integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-string/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-string/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-events-to-acorn": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz",
+			"integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"@types/acorn": "^4.0.0",
+				"@types/estree": "^1.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"estree-util-visit": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"vfile-message": "^4.0.0"
+			}
+		},
+		"node_modules/micromark-util-events-to-acorn/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-html-tag-name": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+			"integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-normalize-identifier": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+			"integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-normalize-identifier/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-resolve-all": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+			"integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-subtokenize": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz",
+			"integrity": "sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-subtokenize/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+			"integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark/node_modules/micromark-factory-space": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+			"integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark/node_modules/micromark-util-character": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+			"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark/node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromatch": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"license": "MIT",
+			"dependencies": {
+				"braces": "^3.0.3",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/mime": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"license": "MIT",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.33.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+			"integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.18",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+			"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+			"dependencies": {
+				"mime-db": "~1.33.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mimic-fn": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+			"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/mimic-response": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-4.0.0.tgz",
+			"integrity": "sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mini-css-extract-plugin": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz",
+			"integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==",
+			"dependencies": {
+				"schema-utils": "^4.0.0",
+				"tapable": "^2.2.1"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/minimalistic-assert": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+			"integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+		},
+		"node_modules/minimatch": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/mkdirp": {
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz",
+			"integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==",
+			"deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/mrmime": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
+		},
+		"node_modules/multicast-dns": {
+			"version": "7.2.5",
+			"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+			"integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+			"dependencies": {
+				"dns-packet": "^5.2.2",
+				"thunky": "^1.0.2"
+			},
+			"bin": {
+				"multicast-dns": "cli.js"
+			}
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.7",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
+		"node_modules/negotiator": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+			"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/neo-async": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+			"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+		},
+		"node_modules/no-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+			"dependencies": {
+				"lower-case": "^2.0.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/node-emoji": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz",
+			"integrity": "sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==",
+			"dependencies": {
+				"@sindresorhus/is": "^4.6.0",
+				"char-regex": "^1.0.2",
+				"emojilib": "^2.4.0",
+				"skin-tone": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/node-forge": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+			"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+			"engines": {
+				"node": ">= 6.13.0"
+			}
+		},
+		"node_modules/node-releases": {
+			"version": "2.0.14",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+			"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+		},
+		"node_modules/nopt": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+			"integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+			"dependencies": {
+				"abbrev": "1"
+			},
+			"bin": {
+				"nopt": "bin/nopt.js"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/normalize-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/normalize-range": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/normalize-url": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+			"integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/not": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/not/-/not-0.1.0.tgz",
+			"integrity": "sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA=="
+		},
+		"node_modules/npm-run-path": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+			"integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+			"dependencies": {
+				"path-key": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/nprogress": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+			"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+		},
+		"node_modules/nth-check": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+			"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+			"dependencies": {
+				"boolbase": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/nth-check?sponsor=1"
+			}
+		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/object-inspect": {
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+			"integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object-keys": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/object.assign": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+			"integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+			"dependencies": {
+				"call-bind": "^1.0.5",
+				"define-properties": "^1.2.1",
+				"has-symbols": "^1.0.3",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/obuf": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+			"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+		},
+		"node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/on-headers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
+		"node_modules/onetime": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+			"dependencies": {
+				"mimic-fn": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/open": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+			"integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+			"dependencies": {
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/opener": {
+			"version": "1.5.2",
+			"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+			"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+			"bin": {
+				"opener": "bin/opener-bin.js"
+			}
+		},
+		"node_modules/p-cancelable": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz",
+			"integrity": "sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==",
+			"engines": {
+				"node": ">=12.20"
+			}
+		},
+		"node_modules/p-limit": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+			"integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+			"dependencies": {
+				"yocto-queue": "^1.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+			"integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+			"dependencies": {
+				"p-limit": "^4.0.0"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-map": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+			"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+			"dependencies": {
+				"aggregate-error": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-retry": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+			"integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+			"dependencies": {
+				"@types/retry": "0.12.0",
+				"retry": "^0.13.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/package-json": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/package-json/-/package-json-8.1.1.tgz",
+			"integrity": "sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==",
+			"dependencies": {
+				"got": "^12.1.0",
+				"registry-auth-token": "^5.0.1",
+				"registry-url": "^6.0.0",
+				"semver": "^7.3.7"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/param-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+			"dependencies": {
+				"dot-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/parent-module": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+			"dependencies": {
+				"callsites": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/parse-entities": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+			"integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"character-entities": "^2.0.0",
+				"character-entities-legacy": "^3.0.0",
+				"character-reference-invalid": "^2.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"is-alphanumerical": "^2.0.0",
+				"is-decimal": "^2.0.0",
+				"is-hexadecimal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/parse-entities/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/parse-json": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+			"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+			"dependencies": {
+				"@babel/code-frame": "^7.0.0",
+				"error-ex": "^1.3.1",
+				"json-parse-even-better-errors": "^2.3.0",
+				"lines-and-columns": "^1.1.6"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/parse-numeric-range": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+			"integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+		},
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
+		"node_modules/parse5-htmlparser2-tree-adapter": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+			"integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+			"dependencies": {
+				"domhandler": "^5.0.2",
+				"parse5": "^7.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/pascal-case": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/path-exists": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+			"integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/path-is-absolute": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/path-is-inside": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+			"integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w=="
+		},
+		"node_modules/path-key": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/path-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+		},
+		"node_modules/path-to-regexp": {
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+			"integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
+			"license": "MIT",
+			"dependencies": {
+				"isarray": "0.0.1"
+			}
+		},
+		"node_modules/path-type": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+			"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/periscopic": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^3.0.0",
+				"is-reference": "^3.0.0"
+			}
+		},
+		"node_modules/picocolors": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+		},
+		"node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/pkg-dir": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
+			"integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==",
+			"dependencies": {
+				"find-up": "^6.3.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pkg-up": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+			"integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+			"dependencies": {
+				"find-up": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/pkg-up/node_modules/find-up": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+			"integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+			"dependencies": {
+				"locate-path": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/locate-path": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+			"integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+			"dependencies": {
+				"p-locate": "^3.0.0",
+				"path-exists": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pkg-up/node_modules/p-locate": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+			"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+			"dependencies": {
+				"p-limit": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/pkg-up/node_modules/path-exists": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+			"integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss": {
+			"version": "8.4.35",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+			"integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.0.0",
+				"source-map-js": "^1.0.2"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/postcss-calc": {
+			"version": "8.2.4",
+			"resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+			"integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.9",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.2"
+			}
+		},
+		"node_modules/postcss-colormin": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+			"integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0",
+				"colord": "^2.9.1",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-convert-values": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+			"integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-discard-comments": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+			"integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-discard-duplicates": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+			"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-discard-empty": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+			"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-discard-overridden": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+			"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-discard-unused": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-5.1.0.tgz",
+			"integrity": "sha512-KwLWymI9hbwXmJa0dkrzpRbSJEh0vVUd7r8t0yOGPcfKzyJJxFM8kLyC5Ev9avji6nY95pOp1W6HqIrfT+0VGw==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-loader": {
+			"version": "7.3.4",
+			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
+			"integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==",
+			"dependencies": {
+				"cosmiconfig": "^8.3.5",
+				"jiti": "^1.20.0",
+				"semver": "^7.5.4"
+			},
+			"engines": {
+				"node": ">= 14.15.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"postcss": "^7.0.0 || ^8.0.1",
+				"webpack": "^5.0.0"
+			}
+		},
+		"node_modules/postcss-loader/node_modules/cosmiconfig": {
+			"version": "8.3.6",
+			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+			"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+			"dependencies": {
+				"import-fresh": "^3.3.0",
+				"js-yaml": "^4.1.0",
+				"parse-json": "^5.2.0",
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/d-fischer"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.9.5"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/postcss-merge-idents": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-5.1.1.tgz",
+			"integrity": "sha512-pCijL1TREiCoog5nQp7wUe+TUonA2tC2sQ54UGeMmryK3UFGIYKqDyjnqd6RcuI4znFn9hWSLNN8xKE/vWcUQw==",
+			"dependencies": {
+				"cssnano-utils": "^3.1.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-merge-longhand": {
+			"version": "5.1.7",
+			"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+			"integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0",
+				"stylehacks": "^5.1.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-merge-rules": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+			"integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0",
+				"cssnano-utils": "^3.1.0",
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-font-values": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+			"integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-gradients": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+			"integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+			"dependencies": {
+				"colord": "^2.9.1",
+				"cssnano-utils": "^3.1.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-params": {
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+			"integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"cssnano-utils": "^3.1.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-minify-selectors": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+			"integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-modules-extract-imports": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+			"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/postcss-modules-local-by-default": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz",
+			"integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==",
+			"dependencies": {
+				"icss-utils": "^5.0.0",
+				"postcss-selector-parser": "^6.0.2",
+				"postcss-value-parser": "^4.1.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/postcss-modules-scope": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz",
+			"integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.4"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/postcss-modules-values": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+			"integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+			"dependencies": {
+				"icss-utils": "^5.0.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >= 14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
+		"node_modules/postcss-normalize-charset": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+			"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-display-values": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+			"integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-positions": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+			"integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-repeat-style": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+			"integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-string": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+			"integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-timing-functions": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+			"integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-unicode": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+			"integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-url": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+			"integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+			"dependencies": {
+				"normalize-url": "^6.0.1",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-normalize-whitespace": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+			"integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-ordered-values": {
+			"version": "5.1.3",
+			"resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+			"integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+			"dependencies": {
+				"cssnano-utils": "^3.1.0",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-reduce-idents": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-5.2.0.tgz",
+			"integrity": "sha512-BTrLjICoSB6gxbc58D5mdBK8OhXRDqud/zodYfdSi52qvDHdMwk+9kB9xsM8yJThH/sZU5A6QVSmMmaN001gIg==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-reduce-initial": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+			"integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"caniuse-api": "^3.0.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-reduce-transforms": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+			"integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+			"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/postcss-sort-media-queries": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.4.1.tgz",
+			"integrity": "sha512-QDESFzDDGKgpiIh4GYXsSy6sek2yAwQx1JASl5AxBtU1Lq2JfKBljIPNdil989NcSKRQX1ToiaKphImtBuhXWw==",
+			"dependencies": {
+				"sort-css-media-queries": "2.1.0"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.16"
+			}
+		},
+		"node_modules/postcss-svgo": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+			"integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0",
+				"svgo": "^2.7.0"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-unique-selectors": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+			"integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.5"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/postcss-value-parser": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+		},
+		"node_modules/postcss-zindex": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz",
+			"integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==",
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/pretty-error": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+			"integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+			"dependencies": {
+				"lodash": "^4.17.20",
+				"renderkid": "^3.0.0"
+			}
+		},
+		"node_modules/pretty-time": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+			"integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/prism-react-renderer": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz",
+			"integrity": "sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==",
+			"dependencies": {
+				"@types/prismjs": "^1.26.0",
+				"clsx": "^2.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=16.0.0"
+			}
+		},
+		"node_modules/prism-react-renderer/node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/prismjs": {
+			"version": "1.29.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/process-nextick-args": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+			"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+		},
+		"node_modules/prompts": {
+			"version": "2.4.2",
+			"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+			"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+			"dependencies": {
+				"kleur": "^3.0.3",
+				"sisteransi": "^1.0.5"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/prop-types": {
+			"version": "15.8.1",
+			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+			"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+			"dependencies": {
+				"loose-envify": "^1.4.0",
+				"object-assign": "^4.1.1",
+				"react-is": "^16.13.1"
+			}
+		},
+		"node_modules/property-information": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+			"integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+			"dependencies": {
+				"xtend": "^4.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/proto-list": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+			"integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
+		},
+		"node_modules/proxy-addr": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+			"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+			"dependencies": {
+				"forwarded": "0.2.0",
+				"ipaddr.js": "1.9.1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/proxy-addr/node_modules/ipaddr.js": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/punycode": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+			"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+		},
+		"node_modules/pupa": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/pupa/-/pupa-3.1.0.tgz",
+			"integrity": "sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==",
+			"dependencies": {
+				"escape-goat": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/qs": {
+			"version": "6.13.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"side-channel": "^1.0.6"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/queue": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+			"integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+			"dependencies": {
+				"inherits": "~2.0.3"
+			}
+		},
+		"node_modules/queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/randombytes": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+			"integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+			"dependencies": {
+				"safe-buffer": "^5.1.0"
+			}
+		},
+		"node_modules/range-parser": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+			"integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/raw-body": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "3.1.2",
+				"http-errors": "2.0.0",
+				"iconv-lite": "0.4.24",
+				"unpipe": "1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/raw-body/node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/rc": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+			"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+			"dependencies": {
+				"deep-extend": "^0.6.0",
+				"ini": "~1.3.0",
+				"minimist": "^1.2.0",
+				"strip-json-comments": "~2.0.1"
+			},
+			"bin": {
+				"rc": "cli.js"
+			}
+		},
+		"node_modules/rc/node_modules/strip-json-comments": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+			"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/react": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+			"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/react-dev-utils": {
+			"version": "12.0.1",
+			"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+			"integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
+			"dependencies": {
+				"@babel/code-frame": "^7.16.0",
+				"address": "^1.1.2",
+				"browserslist": "^4.18.1",
+				"chalk": "^4.1.2",
+				"cross-spawn": "^7.0.3",
+				"detect-port-alt": "^1.1.6",
+				"escape-string-regexp": "^4.0.0",
+				"filesize": "^8.0.6",
+				"find-up": "^5.0.0",
+				"fork-ts-checker-webpack-plugin": "^6.5.0",
+				"global-modules": "^2.0.0",
+				"globby": "^11.0.4",
+				"gzip-size": "^6.0.0",
+				"immer": "^9.0.7",
+				"is-root": "^2.1.0",
+				"loader-utils": "^3.2.0",
+				"open": "^8.4.0",
+				"pkg-up": "^3.1.0",
+				"prompts": "^2.4.2",
+				"react-error-overlay": "^6.0.11",
+				"recursive-readdir": "^2.2.2",
+				"shell-quote": "^1.7.3",
+				"strip-ansi": "^6.0.1",
+				"text-table": "^0.2.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/find-up": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/loader-utils": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
+			"integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12.13.0"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/p-limit": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+			"dependencies": {
+				"yocto-queue": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/react-dev-utils/node_modules/yocto-queue": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/react-dom": {
+			"version": "18.3.1",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+			"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.2"
+			},
+			"peerDependencies": {
+				"react": "^18.3.1"
+			}
+		},
+		"node_modules/react-error-overlay": {
+			"version": "6.0.11",
+			"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
+			"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
+		},
+		"node_modules/react-fast-compare": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+			"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+		},
+		"node_modules/react-helmet-async": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+			"integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"invariant": "^2.2.4",
+				"prop-types": "^15.7.2",
+				"react-fast-compare": "^3.2.0",
+				"shallowequal": "^1.1.0"
+			},
+			"peerDependencies": {
+				"react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/react-is": {
+			"version": "16.13.1",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+		},
+		"node_modules/react-json-view-lite": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.2.1.tgz",
+			"integrity": "sha512-Itc0g86fytOmKZoIoJyGgvNqohWSbh3NXIKNgH6W6FT9PC1ck4xas1tT3Rr/b3UlFXyA9Jjaw9QSXdZy2JwGMQ==",
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+			}
+		},
+		"node_modules/react-loadable": {
+			"name": "@docusaurus/react-loadable",
+			"version": "5.5.2",
+			"resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+			"integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+			"dependencies": {
+				"@types/react": "*",
+				"prop-types": "^15.6.2"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
+		"node_modules/react-loadable-ssr-addon-v5-slorber": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz",
+			"integrity": "sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==",
+			"dependencies": {
+				"@babel/runtime": "^7.10.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"peerDependencies": {
+				"react-loadable": "*",
+				"webpack": ">=4.41.1 || 5.x"
+			}
+		},
+		"node_modules/react-router": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+			"integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.13",
+				"history": "^4.9.0",
+				"hoist-non-react-statics": "^3.1.0",
+				"loose-envify": "^1.3.1",
+				"path-to-regexp": "^1.7.0",
+				"prop-types": "^15.6.2",
+				"react-is": "^16.6.0",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=15"
+			}
+		},
+		"node_modules/react-router-config": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/react-router-config/-/react-router-config-5.1.1.tgz",
+			"integrity": "sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==",
+			"dependencies": {
+				"@babel/runtime": "^7.1.2"
+			},
+			"peerDependencies": {
+				"react": ">=15",
+				"react-router": ">=5"
+			}
+		},
+		"node_modules/react-router-dom": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+			"integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.13",
+				"history": "^4.9.0",
+				"loose-envify": "^1.3.1",
+				"prop-types": "^15.6.2",
+				"react-router": "5.3.4",
+				"tiny-invariant": "^1.0.2",
+				"tiny-warning": "^1.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=15"
+			}
+		},
+		"node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+			"dependencies": {
+				"picomatch": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=8.10.0"
+			}
+		},
+		"node_modules/reading-time": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+			"integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
+		},
+		"node_modules/rechoir": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+			"integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+			"dependencies": {
+				"resolve": "^1.1.6"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/recursive-readdir": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+			"integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
+			"dependencies": {
+				"minimatch": "^3.0.5"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/regenerate": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+			"integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+		},
+		"node_modules/regenerate-unicode-properties": {
+			"version": "10.1.1",
+			"resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz",
+			"integrity": "sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==",
+			"dependencies": {
+				"regenerate": "^1.4.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+		},
+		"node_modules/regenerator-transform": {
+			"version": "0.15.2",
+			"resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+			"integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+			"dependencies": {
+				"@babel/runtime": "^7.8.4"
+			}
+		},
+		"node_modules/regexpu-core": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+			"integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+			"dependencies": {
+				"@babel/regjsgen": "^0.8.0",
+				"regenerate": "^1.4.2",
+				"regenerate-unicode-properties": "^10.1.0",
+				"regjsparser": "^0.9.1",
+				"unicode-match-property-ecmascript": "^2.0.0",
+				"unicode-match-property-value-ecmascript": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/registry-auth-token": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz",
+			"integrity": "sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==",
+			"dependencies": {
+				"@pnpm/npm-conf": "^2.1.0"
+			},
+			"engines": {
+				"node": ">=14"
+			}
+		},
+		"node_modules/registry-url": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/registry-url/-/registry-url-6.0.1.tgz",
+			"integrity": "sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==",
+			"dependencies": {
+				"rc": "1.2.8"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/regjsparser": {
+			"version": "0.9.1",
+			"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+			"integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+			"dependencies": {
+				"jsesc": "~0.5.0"
+			},
+			"bin": {
+				"regjsparser": "bin/parser"
+			}
+		},
+		"node_modules/regjsparser/node_modules/jsesc": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+			"integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			}
+		},
+		"node_modules/rehype-parse": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-7.0.1.tgz",
+			"integrity": "sha512-fOiR9a9xH+Le19i4fGzIEowAbwG7idy2Jzs4mOrFWBSJ0sNUgy0ev871dwWnbOo371SjgjG4pwzrbgSVrKxecw==",
+			"dependencies": {
+				"hast-util-from-parse5": "^6.0.0",
+				"parse5": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/rehype-parse/node_modules/parse5": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+			"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+		},
+		"node_modules/rehype-raw": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+			"integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hast-util-raw": "^9.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/relateurl": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+			"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/remark-directive": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-3.0.0.tgz",
+			"integrity": "sha512-l1UyWJ6Eg1VPU7Hm/9tt0zKtReJQNOA4+iDMAxTyZNWnJnFlbS/7zhiel/rogTLQ2vMYwDzSJa4BiVNqGlqIMA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-directive": "^3.0.0",
+				"micromark-extension-directive": "^3.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-emoji": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-4.0.1.tgz",
+			"integrity": "sha512-fHdvsTR1dHkWKev9eNyhTo4EFwbUvJ8ka9SgeWkMPYFX4WoI7ViVBms3PjlQYgw5TLvNQso3GUB/b/8t3yo+dg==",
+			"dependencies": {
+				"@types/mdast": "^4.0.2",
+				"emoticon": "^4.0.1",
+				"mdast-util-find-and-replace": "^3.0.1",
+				"node-emoji": "^2.1.0",
+				"unified": "^11.0.4"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
+		"node_modules/remark-frontmatter": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-5.0.0.tgz",
+			"integrity": "sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-frontmatter": "^2.0.0",
+				"micromark-extension-frontmatter": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-gfm": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
+			"integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-gfm": "^3.0.0",
+				"micromark-extension-gfm": "^3.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-stringify": "^11.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-mdx": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz",
+			"integrity": "sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==",
+			"dependencies": {
+				"mdast-util-mdx": "^3.0.0",
+				"micromark-extension-mdxjs": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-parse": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+			"integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-rehype": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+			"integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"unified": "^11.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-stringify": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+			"integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/renderkid": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+			"integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+			"dependencies": {
+				"css-select": "^4.1.3",
+				"dom-converter": "^0.2.0",
+				"htmlparser2": "^6.1.0",
+				"lodash": "^4.17.21",
+				"strip-ansi": "^6.0.1"
+			}
+		},
+		"node_modules/renderkid/node_modules/css-select": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+			"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-what": "^6.0.1",
+				"domhandler": "^4.3.1",
+				"domutils": "^2.8.0",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/renderkid/node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/renderkid/node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/renderkid/node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/renderkid/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/renderkid/node_modules/htmlparser2": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+			"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.0.0",
+				"domutils": "^2.5.2",
+				"entities": "^2.0.0"
+			}
+		},
+		"node_modules/repeat-string": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+			"integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/require-from-string": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/require-like": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
+			"integrity": "sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==",
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/requires-port": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+		},
+		"node_modules/resolve": {
+			"version": "1.22.8",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+			"integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+			"dependencies": {
+				"is-core-module": "^2.13.0",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/resolve-alpn": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+			"integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
+		},
+		"node_modules/resolve-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/resolve-pathname": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+			"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+		},
+		"node_modules/responselike": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/responselike/-/responselike-3.0.0.tgz",
+			"integrity": "sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==",
+			"dependencies": {
+				"lowercase-keys": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/retry": {
+			"version": "0.13.1",
+			"resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+			"integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/reusify": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"engines": {
+				"iojs": ">=1.0.0",
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/rimraf": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+			"dependencies": {
+				"glob": "^7.1.3"
+			},
+			"bin": {
+				"rimraf": "bin.js"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/rtl-detect": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz",
+			"integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ=="
+		},
+		"node_modules/rtlcss": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
+			"integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
+			"dependencies": {
+				"escalade": "^3.1.1",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.21",
+				"strip-json-comments": "^3.1.1"
+			},
+			"bin": {
+				"rtlcss": "bin/rtlcss.js"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"dependencies": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+			"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			]
+		},
+		"node_modules/safer-buffer": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
+		},
+		"node_modules/sax": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+			"integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+		},
+		"node_modules/scheduler": {
+			"version": "0.23.2",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+			"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+			"license": "MIT",
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			}
+		},
+		"node_modules/schema-utils": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
+			"integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.9",
+				"ajv": "^8.9.0",
+				"ajv-formats": "^2.1.1",
+				"ajv-keywords": "^5.1.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/search-insights": {
+			"version": "2.13.0",
+			"resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.13.0.tgz",
+			"integrity": "sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==",
+			"peer": true
+		},
+		"node_modules/section-matter": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+			"integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+			"dependencies": {
+				"extend-shallow": "^2.0.1",
+				"kind-of": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/select-hose": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+			"integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
+		},
+		"node_modules/selfsigned": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
+			"integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+			"dependencies": {
+				"@types/node-forge": "^1.3.0",
+				"node-forge": "^1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/semver": {
+			"version": "7.6.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/semver-diff": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-4.0.0.tgz",
+			"integrity": "sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==",
+			"dependencies": {
+				"semver": "^7.3.5"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/send": {
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "2.6.9",
+				"depd": "2.0.0",
+				"destroy": "1.2.0",
+				"encodeurl": "~1.0.2",
+				"escape-html": "~1.0.3",
+				"etag": "~1.8.1",
+				"fresh": "0.5.2",
+				"http-errors": "2.0.0",
+				"mime": "1.6.0",
+				"ms": "2.1.3",
+				"on-finished": "2.4.1",
+				"range-parser": "~1.2.1",
+				"statuses": "2.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/send/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/send/node_modules/debug/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
+		},
+		"node_modules/send/node_modules/encodeurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/send/node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/serialize-javascript": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+			"integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+			"dependencies": {
+				"randombytes": "^2.1.0"
+			}
+		},
+		"node_modules/serve-handler": {
+			"version": "6.1.5",
+			"resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+			"integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
+			"dependencies": {
+				"bytes": "3.0.0",
+				"content-disposition": "0.5.2",
+				"fast-url-parser": "1.1.3",
+				"mime-types": "2.1.18",
+				"minimatch": "3.1.2",
+				"path-is-inside": "1.0.2",
+				"path-to-regexp": "2.2.1",
+				"range-parser": "1.2.0"
+			}
+		},
+		"node_modules/serve-handler/node_modules/path-to-regexp": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+			"integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ=="
+		},
+		"node_modules/serve-index": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+			"integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+			"dependencies": {
+				"accepts": "~1.3.4",
+				"batch": "0.6.1",
+				"debug": "2.6.9",
+				"escape-html": "~1.0.3",
+				"http-errors": "~1.6.2",
+				"mime-types": "~2.1.17",
+				"parseurl": "~1.3.2"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/serve-index/node_modules/debug": {
+			"version": "2.6.9",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"dependencies": {
+				"ms": "2.0.0"
+			}
+		},
+		"node_modules/serve-index/node_modules/depd": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+			"integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/serve-index/node_modules/http-errors": {
+			"version": "1.6.3",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+			"integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+			"dependencies": {
+				"depd": "~1.1.2",
+				"inherits": "2.0.3",
+				"setprototypeof": "1.1.0",
+				"statuses": ">= 1.4.0 < 2"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/serve-index/node_modules/inherits": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+			"integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+		},
+		"node_modules/serve-index/node_modules/ms": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+		},
+		"node_modules/serve-index/node_modules/setprototypeof": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+			"integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+		},
+		"node_modules/serve-index/node_modules/statuses": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+			"integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/serve-static": {
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+			"license": "MIT",
+			"dependencies": {
+				"encodeurl": "~2.0.0",
+				"escape-html": "~1.0.3",
+				"parseurl": "~1.3.3",
+				"send": "0.19.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/set-function-length": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+			"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+			"dependencies": {
+				"define-data-property": "^1.1.4",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"gopd": "^1.0.1",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
+		},
+		"node_modules/shallow-clone": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+			"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+			"dependencies": {
+				"kind-of": "^6.0.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shallowequal": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+		},
+		"node_modules/shebang-command": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+			"dependencies": {
+				"shebang-regex": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shebang-regex": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shell-quote": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+			"integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/shelljs": {
+			"version": "0.8.5",
+			"resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+			"integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+			"dependencies": {
+				"glob": "^7.0.0",
+				"interpret": "^1.0.0",
+				"rechoir": "^0.6.2"
+			},
+			"bin": {
+				"shjs": "bin/shjs"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/side-channel": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+			"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.7",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.4",
+				"object-inspect": "^1.13.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+		},
+		"node_modules/sirv": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/sisteransi": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+		},
+		"node_modules/sitemap": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+			"integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+			"dependencies": {
+				"@types/node": "^17.0.5",
+				"@types/sax": "^1.2.1",
+				"arg": "^5.0.0",
+				"sax": "^1.2.4"
+			},
+			"bin": {
+				"sitemap": "dist/cli.js"
+			},
+			"engines": {
+				"node": ">=12.0.0",
+				"npm": ">=5.6.0"
+			}
+		},
+		"node_modules/skin-tone": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+			"integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+			"dependencies": {
+				"unicode-emoji-modifier-base": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/sockjs": {
+			"version": "0.3.24",
+			"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+			"integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+			"dependencies": {
+				"faye-websocket": "^0.11.3",
+				"uuid": "^8.3.2",
+				"websocket-driver": "^0.7.4"
+			}
+		},
+		"node_modules/sort-css-media-queries": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
+			"integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==",
+			"engines": {
+				"node": ">= 6.3.0"
+			}
+		},
+		"node_modules/source-map": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+			"integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/source-map-support": {
+			"version": "0.5.21",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
+		"node_modules/source-map-support/node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/space-separated-tokens": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+			"integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/spdy": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+			"integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+			"dependencies": {
+				"debug": "^4.1.0",
+				"handle-thing": "^2.0.0",
+				"http-deceiver": "^1.2.7",
+				"select-hose": "^2.0.0",
+				"spdy-transport": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/spdy-transport": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+			"integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+			"dependencies": {
+				"debug": "^4.1.0",
+				"detect-node": "^2.0.4",
+				"hpack.js": "^2.1.6",
+				"obuf": "^1.1.2",
+				"readable-stream": "^3.0.6",
+				"wbuf": "^1.7.3"
+			}
+		},
+		"node_modules/sprintf-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+			"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+		},
+		"node_modules/srcset": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/srcset/-/srcset-4.0.0.tgz",
+			"integrity": "sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/stable": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+			"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+			"deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+		},
+		"node_modules/statuses": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/std-env": {
+			"version": "3.7.0",
+			"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+			"integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg=="
+		},
+		"node_modules/string_decoder": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+			"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+			"license": "MIT",
+			"dependencies": {
+				"safe-buffer": "~5.1.0"
+			}
+		},
+		"node_modules/string_decoder/node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+			"license": "MIT"
+		},
+		"node_modules/string-width": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+			"dependencies": {
+				"eastasianwidth": "^0.2.0",
+				"emoji-regex": "^9.2.2",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/string-width/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/string-width/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
+			"integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/stringify-object": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+			"integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+			"dependencies": {
+				"get-own-enumerable-property-symbols": "^3.0.0",
+				"is-obj": "^1.0.1",
+				"is-regexp": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-bom-string": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+			"integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/strip-final-newline": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+			"integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/style-to-object": {
+			"version": "0.4.4",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
+			"integrity": "sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==",
+			"dependencies": {
+				"inline-style-parser": "0.1.1"
+			}
+		},
+		"node_modules/stylehacks": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+			"integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+			"dependencies": {
+				"browserslist": "^4.21.4",
+				"postcss-selector-parser": "^6.0.4"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.15"
+			}
+		},
+		"node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/svg-parser": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+			"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+		},
+		"node_modules/svgo": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+			"integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+			"dependencies": {
+				"@trysound/sax": "0.2.0",
+				"commander": "^7.2.0",
+				"css-select": "^4.1.3",
+				"css-tree": "^1.1.3",
+				"csso": "^4.2.0",
+				"picocolors": "^1.0.0",
+				"stable": "^0.1.8"
+			},
+			"bin": {
+				"svgo": "bin/svgo"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/svgo/node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/svgo/node_modules/css-select": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+			"integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+			"dependencies": {
+				"boolbase": "^1.0.0",
+				"css-what": "^6.0.1",
+				"domhandler": "^4.3.1",
+				"domutils": "^2.8.0",
+				"nth-check": "^2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/fb55"
+			}
+		},
+		"node_modules/svgo/node_modules/dom-serializer": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+			"integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+			"dependencies": {
+				"domelementtype": "^2.0.1",
+				"domhandler": "^4.2.0",
+				"entities": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/svgo/node_modules/domhandler": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+			"integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+			"dependencies": {
+				"domelementtype": "^2.2.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/svgo/node_modules/domutils": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+			"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+			"dependencies": {
+				"dom-serializer": "^1.0.1",
+				"domelementtype": "^2.2.0",
+				"domhandler": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/svgo/node_modules/entities": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+			"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/tapable": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+			"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/terser": {
+			"version": "5.29.1",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz",
+			"integrity": "sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==",
+			"dependencies": {
+				"@jridgewell/source-map": "^0.3.3",
+				"acorn": "^8.8.2",
+				"commander": "^2.20.0",
+				"source-map-support": "~0.5.20"
+			},
+			"bin": {
+				"terser": "bin/terser"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/terser-webpack-plugin": {
+			"version": "5.3.10",
+			"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+			"integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.20",
+				"jest-worker": "^27.4.5",
+				"schema-utils": "^3.1.1",
+				"serialize-javascript": "^6.0.1",
+				"terser": "^5.26.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^5.1.0"
+			},
+			"peerDependenciesMeta": {
+				"@swc/core": {
+					"optional": true
+				},
+				"esbuild": {
+					"optional": true
+				},
+				"uglify-js": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+			"version": "27.5.1",
+			"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+			"integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+			"dependencies": {
+				"@types/node": "*",
+				"merge-stream": "^2.0.0",
+				"supports-color": "^8.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/terser-webpack-plugin/node_modules/supports-color": {
+			"version": "8.1.1",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+			"integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/supports-color?sponsor=1"
+			}
+		},
+		"node_modules/terser/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+		},
+		"node_modules/text-table": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+		},
+		"node_modules/thunky": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+			"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+		},
+		"node_modules/tiny-invariant": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+			"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+		},
+		"node_modules/tiny-warning": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+			"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+		},
+		"node_modules/to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/to-regex-range": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+			"license": "MIT",
+			"dependencies": {
+				"is-number": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=8.0"
+			}
+		},
+		"node_modules/to-vfile": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-6.1.0.tgz",
+			"integrity": "sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==",
+			"dependencies": {
+				"is-buffer": "^2.0.0",
+				"vfile": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/to-vfile/node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
+		},
+		"node_modules/to-vfile/node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/to-vfile/node_modules/vfile": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+			"integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"is-buffer": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0",
+				"vfile-message": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/to-vfile/node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/trough": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+			"integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/tslib": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+		},
+		"node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/type-is": {
+			"version": "1.6.18",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+			"license": "MIT",
+			"dependencies": {
+				"media-typer": "0.3.0",
+				"mime-types": "~2.1.24"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/type-is/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/type-is/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/typedarray-to-buffer": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+			"integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+			"dependencies": {
+				"is-typedarray": "^1.0.0"
+			}
+		},
+		"node_modules/typescript": {
+			"version": "5.4.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+			"integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+			"peer": true,
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/unicode-canonical-property-names-ecmascript": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+			"integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-emoji-modifier-base": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+			"integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-match-property-ecmascript": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+			"integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+			"dependencies": {
+				"unicode-canonical-property-names-ecmascript": "^2.0.0",
+				"unicode-property-aliases-ecmascript": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-match-property-value-ecmascript": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+			"integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-property-aliases-ecmascript": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+			"integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unified": {
+			"version": "11.0.5",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+			"integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"bail": "^2.0.0",
+				"devlop": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^4.0.0",
+				"trough": "^2.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unique-string": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-3.0.0.tgz",
+			"integrity": "sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==",
+			"dependencies": {
+				"crypto-random-string": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/unist-util-find-after": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-3.0.0.tgz",
+			"integrity": "sha512-ojlBqfsBftYXExNu3+hHLfJQ/X1jYY/9vdm4yZWjIbf0VuWF6CRufci1ZyoD/wV2TYMKxXUoNuoqwy+CkgzAiQ==",
+			"dependencies": {
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position-from-estree": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+			"integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-remove-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+			"integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+			"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+			"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents/node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit/node_modules/unist-util-is": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+			"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"engines": {
+				"node": ">= 10.0.0"
+			}
+		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/update-browserslist-db": {
+			"version": "1.0.13",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+			"integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"dependencies": {
+				"escalade": "^3.1.1",
+				"picocolors": "^1.0.0"
+			},
+			"bin": {
+				"update-browserslist-db": "cli.js"
+			},
+			"peerDependencies": {
+				"browserslist": ">= 4.21.0"
+			}
+		},
+		"node_modules/update-notifier": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-6.0.2.tgz",
+			"integrity": "sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==",
+			"dependencies": {
+				"boxen": "^7.0.0",
+				"chalk": "^5.0.1",
+				"configstore": "^6.0.0",
+				"has-yarn": "^3.0.0",
+				"import-lazy": "^4.0.0",
+				"is-ci": "^3.0.1",
+				"is-installed-globally": "^0.4.0",
+				"is-npm": "^6.0.0",
+				"is-yarn-global": "^0.4.0",
+				"latest-version": "^7.0.0",
+				"pupa": "^3.1.0",
+				"semver": "^7.3.7",
+				"semver-diff": "^4.0.0",
+				"xdg-basedir": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/yeoman/update-notifier?sponsor=1"
+			}
+		},
+		"node_modules/update-notifier/node_modules/boxen": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/boxen/-/boxen-7.1.1.tgz",
+			"integrity": "sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==",
+			"dependencies": {
+				"ansi-align": "^3.0.1",
+				"camelcase": "^7.0.1",
+				"chalk": "^5.2.0",
+				"cli-boxes": "^3.0.0",
+				"string-width": "^5.1.2",
+				"type-fest": "^2.13.0",
+				"widest-line": "^4.0.1",
+				"wrap-ansi": "^8.1.0"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/update-notifier/node_modules/camelcase": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
+			"integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/update-notifier/node_modules/chalk": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+			"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+			"engines": {
+				"node": "^12.17.0 || ^14.13 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/uri-js": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+			"dependencies": {
+				"punycode": "^2.1.0"
+			}
+		},
+		"node_modules/uri-js/node_modules/punycode": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/url-loader": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+			"integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+			"dependencies": {
+				"loader-utils": "^2.0.0",
+				"mime-types": "^2.1.27",
+				"schema-utils": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"file-loader": "*",
+				"webpack": "^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"file-loader": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/url-loader/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/url-loader/node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/url-loader/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/url-loader/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/url-loader/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/url-loader/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+		},
+		"node_modules/utila": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+			"integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
+		},
+		"node_modules/utility-types": {
+			"version": "3.11.0",
+			"resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+			"integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/utils-merge": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+			"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
+		"node_modules/uuid": {
+			"version": "8.3.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
+		"node_modules/value-equal": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+			"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+		},
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-location": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz",
+			"integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/watchpack": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
+			"integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==",
+			"dependencies": {
+				"glob-to-regexp": "^0.4.1",
+				"graceful-fs": "^4.1.2"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/wbuf": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+			"integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+			"dependencies": {
+				"minimalistic-assert": "^1.0.0"
+			}
+		},
+		"node_modules/web-namespaces": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz",
+			"integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/webpack": {
+			"version": "5.94.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+			"integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.5",
+				"@webassemblyjs/ast": "^1.12.1",
+				"@webassemblyjs/wasm-edit": "^1.12.1",
+				"@webassemblyjs/wasm-parser": "^1.12.1",
+				"acorn": "^8.7.1",
+				"acorn-import-attributes": "^1.9.5",
+				"browserslist": "^4.21.10",
+				"chrome-trace-event": "^1.0.2",
+				"enhanced-resolve": "^5.17.1",
+				"es-module-lexer": "^1.2.1",
+				"eslint-scope": "5.1.1",
+				"events": "^3.2.0",
+				"glob-to-regexp": "^0.4.1",
+				"graceful-fs": "^4.2.11",
+				"json-parse-even-better-errors": "^2.3.1",
+				"loader-runner": "^4.2.0",
+				"mime-types": "^2.1.27",
+				"neo-async": "^2.6.2",
+				"schema-utils": "^3.2.0",
+				"tapable": "^2.1.1",
+				"terser-webpack-plugin": "^5.3.10",
+				"watchpack": "^2.4.1",
+				"webpack-sources": "^3.2.3"
+			},
+			"bin": {
+				"webpack": "bin/webpack.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependenciesMeta": {
+				"webpack-cli": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/webpack-bundle-analyzer": {
+			"version": "4.10.1",
+			"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+			"integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+			"dependencies": {
+				"@discoveryjs/json-ext": "0.5.7",
+				"acorn": "^8.0.4",
+				"acorn-walk": "^8.0.0",
+				"commander": "^7.2.0",
+				"debounce": "^1.2.1",
+				"escape-string-regexp": "^4.0.0",
+				"gzip-size": "^6.0.0",
+				"html-escaper": "^2.0.2",
+				"is-plain-object": "^5.0.0",
+				"opener": "^1.5.2",
+				"picocolors": "^1.0.0",
+				"sirv": "^2.0.3",
+				"ws": "^7.3.1"
+			},
+			"bin": {
+				"webpack-bundle-analyzer": "lib/bin/analyzer.js"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			}
+		},
+		"node_modules/webpack-bundle-analyzer/node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/webpack-dev-middleware": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+			"integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
+			"license": "MIT",
+			"dependencies": {
+				"colorette": "^2.0.10",
+				"memfs": "^3.4.3",
+				"mime-types": "^2.1.31",
+				"range-parser": "^1.2.1",
+				"schema-utils": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.0.0 || ^5.0.0"
+			}
+		},
+		"node_modules/webpack-dev-middleware/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/webpack-dev-middleware/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/webpack-dev-middleware/node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/webpack-dev-server": {
+			"version": "4.15.1",
+			"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+			"integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
+			"dependencies": {
+				"@types/bonjour": "^3.5.9",
+				"@types/connect-history-api-fallback": "^1.3.5",
+				"@types/express": "^4.17.13",
+				"@types/serve-index": "^1.9.1",
+				"@types/serve-static": "^1.13.10",
+				"@types/sockjs": "^0.3.33",
+				"@types/ws": "^8.5.5",
+				"ansi-html-community": "^0.0.8",
+				"bonjour-service": "^1.0.11",
+				"chokidar": "^3.5.3",
+				"colorette": "^2.0.10",
+				"compression": "^1.7.4",
+				"connect-history-api-fallback": "^2.0.0",
+				"default-gateway": "^6.0.3",
+				"express": "^4.17.3",
+				"graceful-fs": "^4.2.6",
+				"html-entities": "^2.3.2",
+				"http-proxy-middleware": "^2.0.3",
+				"ipaddr.js": "^2.0.1",
+				"launch-editor": "^2.6.0",
+				"open": "^8.0.9",
+				"p-retry": "^4.5.0",
+				"rimraf": "^3.0.2",
+				"schema-utils": "^4.0.0",
+				"selfsigned": "^2.1.1",
+				"serve-index": "^1.9.1",
+				"sockjs": "^0.3.24",
+				"spdy": "^4.0.2",
+				"webpack-dev-middleware": "^5.3.1",
+				"ws": "^8.13.0"
+			},
+			"bin": {
+				"webpack-dev-server": "bin/webpack-dev-server.js"
+			},
+			"engines": {
+				"node": ">= 12.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"webpack": "^4.37.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"webpack": {
+					"optional": true
+				},
+				"webpack-cli": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/webpack-dev-server/node_modules/ws": {
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/webpack-merge": {
+			"version": "5.10.0",
+			"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+			"integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+			"dependencies": {
+				"clone-deep": "^4.0.1",
+				"flat": "^5.0.2",
+				"wildcard": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/webpack-sources": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/webpack/node_modules/ajv": {
+			"version": "6.12.6",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/webpack/node_modules/ajv-keywords": {
+			"version": "3.5.2",
+			"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+			"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+			"peerDependencies": {
+				"ajv": "^6.9.1"
+			}
+		},
+		"node_modules/webpack/node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"license": "ISC"
+		},
+		"node_modules/webpack/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+		},
+		"node_modules/webpack/node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/webpack/node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/webpack/node_modules/schema-utils": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+			"integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+			"dependencies": {
+				"@types/json-schema": "^7.0.8",
+				"ajv": "^6.12.5",
+				"ajv-keywords": "^3.5.2"
+			},
+			"engines": {
+				"node": ">= 10.13.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/webpackbar": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.2.tgz",
+			"integrity": "sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==",
+			"dependencies": {
+				"chalk": "^4.1.0",
+				"consola": "^2.15.3",
+				"pretty-time": "^1.1.0",
+				"std-env": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"webpack": "3 || 4 || 5"
+			}
+		},
+		"node_modules/websocket-driver": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+			"integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+			"dependencies": {
+				"http-parser-js": ">=0.5.1",
+				"safe-buffer": ">=5.1.0",
+				"websocket-extensions": ">=0.1.1"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/websocket-extensions": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+			"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/which": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dependencies": {
+				"isexe": "^2.0.0"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/wide-align": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+			"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+			"dependencies": {
+				"string-width": "^1.0.2 || 2 || 3 || 4"
+			}
+		},
+		"node_modules/wide-align/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+		},
+		"node_modules/wide-align/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/widest-line": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
+			"integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
+			"dependencies": {
+				"string-width": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/wildcard": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+			"integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ=="
+		},
+		"node_modules/wrap-ansi": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+			"dependencies": {
+				"ansi-styles": "^6.1.0",
+				"string-width": "^5.0.1",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/ansi-regex": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/ansi-styles": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+			"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/strip-ansi": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+			"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+			"dependencies": {
+				"ansi-regex": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+		},
+		"node_modules/write-file-atomic": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+			"integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+			"dependencies": {
+				"imurmurhash": "^0.1.4",
+				"is-typedarray": "^1.0.0",
+				"signal-exit": "^3.0.2",
+				"typedarray-to-buffer": "^3.1.5"
+			}
+		},
+		"node_modules/ws": {
+			"version": "7.5.10",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.3.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": "^5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/xdg-basedir": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-5.1.0.tgz",
+			"integrity": "sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/xml-js": {
+			"version": "1.6.11",
+			"resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+			"integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+			"dependencies": {
+				"sax": "^1.2.4"
+			},
+			"bin": {
+				"xml-js": "bin/cli.js"
+			}
+		},
+		"node_modules/xtend": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+			"engines": {
+				"node": ">=0.4"
+			}
+		},
+		"node_modules/yallist": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+		},
+		"node_modules/yaml": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/yocto-queue": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+			"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/zwitch": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
+			"integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		}
+	}
+}
diff --git a/platform-docs/package.json b/platform-docs/package.json
new file mode 100644
index 00000000000000..d2d40a9258a0b9
--- /dev/null
+++ b/platform-docs/package.json
@@ -0,0 +1,58 @@
+{
+	"name": "platform-docs",
+	"version": "0.0.1",
+	"private": true,
+	"description": "Documentation for Gutenberg usage as a Framework.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"WordPress",
+		"editor",
+		"documentation"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/",
+	"repository": "git+https://github.com/WordPress/gutenberg.git",
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
+	},
+	"dependencies": {
+		"@docusaurus/core": "^3.1.1",
+		"@docusaurus/preset-classic": "^3.1.1",
+		"@mdx-js/react": "^3.0.0",
+		"clsx": "^1.2.1",
+		"docusaurus-lunr-search": "^3.3.2",
+		"react": "^18.3.0",
+		"react-dom": "^18.3.0"
+	},
+	"devDependencies": {
+		"@docusaurus/module-type-aliases": "^3.1.1",
+		"@docusaurus/types": "^3.1.1"
+	},
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "docusaurus start",
+		"build": "docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids"
+	},
+	"browserslist": {
+		"production": [
+			">0.5%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}
diff --git a/platform-docs/sidebars.js b/platform-docs/sidebars.js
new file mode 100644
index 00000000000000..4489934c9ce002
--- /dev/null
+++ b/platform-docs/sidebars.js
@@ -0,0 +1,29 @@
+// @ts-check
+/**
+ * Creating a sidebar enables you to:
+ * - create an ordered group of docs
+ * - render a sidebar for each doc of that group
+ * - provide next/previous navigation
+ * The sidebars can be generated from the filesystem, or explicitly defined here.
+ *  Create as many sidebars as you want.
+ */
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+	// By default, Docusaurus generates a sidebar from the docs folder structure
+	tutorialSidebar: [ { type: 'autogenerated', dirName: '.' } ],
+
+	// But you can create a sidebar manually
+	/*
+	tutorialSidebar: [
+		'intro',
+		'hello',
+		{
+			type: 'category',
+			label: 'Tutorial',
+			items: ['tutorial-basics/create-a-document'],
+		},
+	],
+	*/
+};
+
+module.exports = sidebars;
diff --git a/platform-docs/src/components/HomepageBlocks/index.js b/platform-docs/src/components/HomepageBlocks/index.js
new file mode 100644
index 00000000000000..c36f643c3213b9
--- /dev/null
+++ b/platform-docs/src/components/HomepageBlocks/index.js
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+const blocks = [
+	{
+		title: 'Paragraph',
+		img: require( '@site/static/img/paragraph.png' ).default,
+	},
+	{
+		title: 'Heading',
+		img: require( '@site/static/img/heading.png' ).default,
+	},
+	{
+		title: 'Media & Text',
+		img: require( '@site/static/img/media-text.png' ).default,
+	},
+	{
+		title: 'Image',
+		img: require( '@site/static/img/image.png' ).default,
+	},
+	{
+		title: 'Cover',
+		img: require( '@site/static/img/cover.png' ).default,
+	},
+	{
+		title: 'Gallery',
+		img: require( '@site/static/img/gallery.png' ).default,
+	},
+	{
+		title: 'Video',
+		img: require( '@site/static/img/video.png' ).default,
+	},
+	{
+		title: 'Audio',
+		img: require( '@site/static/img/audio.png' ).default,
+	},
+	{
+		title: 'Columns',
+		img: require( '@site/static/img/columns.png' ).default,
+	},
+	{
+		title: 'File',
+		img: require( '@site/static/img/file.png' ).default,
+	},
+	{
+		title: 'Code',
+		img: require( '@site/static/img/code.png' ).default,
+	},
+	{
+		title: 'List',
+		img: require( '@site/static/img/list.png' ).default,
+	},
+];
+
+function Block( { img, title } ) {
+	return (
+		<div className={ styles.block }>
+			<div>
+				<img className={ styles.image } src={ img } alt={ title } />
+			</div>
+			<h3 className={ styles.blockTitle }>{ title }</h3>
+		</div>
+	);
+}
+
+export default function HomepageBlocks() {
+	return (
+		<section className={ styles.blocks }>
+			<div className={ clsx( 'container', styles.titleContainer ) }>
+				<h2 className={ styles.title }>Be your own builder.</h2>
+				<p className={ styles.description }>
+					Blocks allow users to build their own content without any
+					coding knowledge. Here’s a selection of the default blocks
+					included with Gutenberg:
+				</p>
+			</div>
+			<div className={ clsx( 'container', styles.grid ) }>
+				{ blocks.map( ( props, idx ) => (
+					<Block key={ idx } { ...props } />
+				) ) }
+			</div>
+		</section>
+	);
+}
diff --git a/platform-docs/src/components/HomepageBlocks/styles.module.css b/platform-docs/src/components/HomepageBlocks/styles.module.css
new file mode 100644
index 00000000000000..71607c085b81bb
--- /dev/null
+++ b/platform-docs/src/components/HomepageBlocks/styles.module.css
@@ -0,0 +1,52 @@
+.blocks {
+	padding: 8rem 0;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.titleContainer {
+	max-width: 1000px;
+}
+
+.title {
+	font-weight: 400;
+	font-size: 60px;
+}
+
+[data-theme="dark"] .title {
+	color: #fff;
+}
+
+.description {
+	font-size: 20px;
+}
+
+.grid {
+	max-width: 1000px;
+	display: grid;
+	gap: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+}
+
+.image {
+	width: 100%;
+	aspect-ratio: 1/1;
+}
+
+.block {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.blockTitle {
+	padding: 0;
+	margin: 0;
+	font-weight: 400;
+	text-align: center;
+}
+
+[data-theme="dark"] .blockTitle {
+	color: #fff;
+}
diff --git a/platform-docs/src/components/HomepageFeatures/index.js b/platform-docs/src/components/HomepageFeatures/index.js
new file mode 100644
index 00000000000000..d4fabec827d1a2
--- /dev/null
+++ b/platform-docs/src/components/HomepageFeatures/index.js
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+const FeatureList = [
+	{
+		title: 'Easy to Use',
+		img: require( '@site/static/img/block-media-text.png' ).default,
+		description: (
+			<>
+				Gutenberg was designed from the ground up to be easily installed
+				and used for your authors.
+			</>
+		),
+	},
+	{
+		title: 'Flexible',
+		img: require( '@site/static/img/plugin-icon.png' ).default,
+		description: (
+			<>
+				Gutenberg allows you to customize the UI of your block editor as
+				you wish.
+			</>
+		),
+	},
+	{
+		title: 'Multi devices',
+		img: require( '@site/static/img/mobile-icon.png' ).default,
+		description: <>Work across screen sizes and devices.</>,
+	},
+	{
+		title: 'Powered by React',
+		svg: require( '@site/static/img/react-icon.svg' ).default,
+		description: <>Extend or customize your block editor using React.</>,
+	},
+];
+
+function Feature( { svg: Svg, img, title, description } ) {
+	return (
+		<div className={ styles.feature }>
+			<div>
+				{ !! Svg && <Svg className={ styles.featureSvg } role="img" /> }
+				{ !! img && (
+					<img
+						className={ styles.featureSvg }
+						src={ img }
+						alt={ title }
+					/>
+				) }
+			</div>
+			<h3 className={ styles.title }>{ title }</h3>
+			<p>{ description }</p>
+		</div>
+	);
+}
+
+export default function HomepageFeatures() {
+	return (
+		<section className={ styles.features }>
+			<div className={ clsx( 'container', styles.grid ) }>
+				{ FeatureList.map( ( props, idx ) => (
+					<Feature key={ idx } { ...props } />
+				) ) }
+			</div>
+		</section>
+	);
+}
diff --git a/platform-docs/src/components/HomepageFeatures/styles.module.css b/platform-docs/src/components/HomepageFeatures/styles.module.css
new file mode 100644
index 00000000000000..c8c8228422d40b
--- /dev/null
+++ b/platform-docs/src/components/HomepageFeatures/styles.module.css
@@ -0,0 +1,34 @@
+.features {
+	padding: 4rem 0;
+	background: url(@site/static/img/gradient_background.png);
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: 50% 50%;
+	color: #fff;
+}
+
+.grid {
+	max-width: 800px;
+	display: grid;
+	gap: 6rem;
+	grid-template-columns: 1fr 1fr;
+}
+
+.featureSvg {
+	height: 40px;
+	width: 40px;
+	fill: #fff;
+}
+
+.feature {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.title {
+	color: #fff;
+	padding: 0;
+	margin: 0;
+}
diff --git a/platform-docs/src/components/HomepageThanks/index.js b/platform-docs/src/components/HomepageThanks/index.js
new file mode 100644
index 00000000000000..61cfddf2a8fb96
--- /dev/null
+++ b/platform-docs/src/components/HomepageThanks/index.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+export default function HomepageThanks() {
+	return (
+		<section className={ styles.thanks }>
+			<div className={ clsx( 'container', styles.container ) }>
+				<h2 className={ styles.title }>Thanks for trying Gutenberg.</h2>
+				<div className={ styles.columns }>
+					<p className={ styles.description }>
+						Gutenberg is a project by the WordPress community. New
+						developments and experiments will continue in the{ ' ' }
+						<a href="http://github.com/wordPress/gutenberg/">
+							Gutenberg repository
+						</a>
+						.
+					</p>
+					<div className={ styles.links }>
+						<div>
+							<a href="https://twitter.com/WordPress">
+								Twitter ↗
+							</a>
+						</div>
+						<div>
+							<a href="http://github.com/wordPress/gutenberg/">
+								GitHub ↗
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/platform-docs/src/components/HomepageThanks/styles.module.css b/platform-docs/src/components/HomepageThanks/styles.module.css
new file mode 100644
index 00000000000000..a54b6f5601e886
--- /dev/null
+++ b/platform-docs/src/components/HomepageThanks/styles.module.css
@@ -0,0 +1,31 @@
+.thanks {
+	padding: 8rem 0;
+	background: rgb(236, 246, 250);
+	color: #000;
+}
+
+[data-theme="dark"] .thanks a {
+	color: var(--ifm-color-secondary);
+}
+
+.container {
+	max-width: 1000px;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.title {
+	font-weight: 400;
+	font-size: 60px;
+}
+
+.description {
+	font-size: 20px;
+}
+
+.columns {
+	display: grid;
+	gap: 4rem;
+	grid-template-columns: 1fr 1fr;
+}
diff --git a/platform-docs/src/components/HomepageTrustedBy/index.js b/platform-docs/src/components/HomepageTrustedBy/index.js
new file mode 100644
index 00000000000000..f48205e0a057c4
--- /dev/null
+++ b/platform-docs/src/components/HomepageTrustedBy/index.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+const Users = [
+	{
+		title: 'WordPress',
+		img: require( '@site/static/img/wordpress.png' ).default,
+		height: 60,
+	},
+	{
+		title: 'Tumblr',
+		img: require( '@site/static/img/tumblr.png' ).default,
+		height: 18,
+	},
+	{
+		title: 'Day One',
+		img: require( '@site/static/img/dayone.png' ).default,
+		height: 100,
+	},
+];
+
+function User( { img, title, height } ) {
+	return (
+		<div className={ styles.col }>
+			<img src={ img } alt={ title } style={ { height } } />
+		</div>
+	);
+}
+
+export default function HomepageTrustedBy() {
+	return (
+		<section className={ styles.container }>
+			<div>
+				<h2 className={ styles.title }>Trusted by</h2>
+				<div className={ styles.row }>
+					{ Users.map( ( props, idx ) => (
+						<User key={ idx } { ...props } />
+					) ) }
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/platform-docs/src/components/HomepageTrustedBy/styles.module.css b/platform-docs/src/components/HomepageTrustedBy/styles.module.css
new file mode 100644
index 00000000000000..c06a34f9c05283
--- /dev/null
+++ b/platform-docs/src/components/HomepageTrustedBy/styles.module.css
@@ -0,0 +1,27 @@
+.container {
+	padding: 5rem 0 4rem;
+	background: #fff;
+	color: var(--ifm-color-gray-800);
+}
+
+.container > div {
+	margin: auto;
+	max-width: var(--ifm-container-width);
+}
+
+.title {
+	text-align: center;
+	margin-bottom: 0;
+	flex-shrink: 0;
+}
+
+.row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 2rem;
+}
+
+.col > img {
+	filter: grayscale(1);
+}
diff --git a/platform-docs/src/css/custom.css b/platform-docs/src/css/custom.css
new file mode 100644
index 00000000000000..d85df1a98291b7
--- /dev/null
+++ b/platform-docs/src/css/custom.css
@@ -0,0 +1,40 @@
+body {
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Oxygen-Sans,
+		Ubuntu,
+		Cantarell,
+		"Helvetica Neue",
+		sans-serif;
+}
+
+:root {
+	--ifm-color-primary: #3858e9;
+	--ifm-color-primary-dark: #1e42e6;
+	--ifm-color-primary-darker: #183cdd;
+	--ifm-color-primary-darkest: #1431b6;
+	--ifm-color-primary-light: #526eec;
+	--ifm-color-primary-lighter: #5f79ed;
+	--ifm-color-primary-lightest: #869af2;
+	--ifm-color-secondary: #e9edfd;
+	--ifm-code-font-size: 95%;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+	--ifm-heading-color: #000;
+	--ifm-navbar-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px 0;
+}
+
+[data-theme="dark"] {
+	--ifm-color-primary: #c6d0ff;
+	--ifm-color-primary-dark: #c6d0ff;
+	--ifm-color-primary-darker: #c6d0ff;
+	--ifm-color-primary-darkest: #c6d0ff;
+	--ifm-color-primary-light: #c6d0ff;
+	--ifm-color-primary-lighter: #c6d0ff;
+	--ifm-color-primary-lightest: #c6d0ff;
+	--ifm-color-secondary: #3858e9;
+	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
diff --git a/platform-docs/src/pages/index.js b/platform-docs/src/pages/index.js
new file mode 100644
index 00000000000000..d820e6fdcdc8cf
--- /dev/null
+++ b/platform-docs/src/pages/index.js
@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+/**
+ * Internal dependencies
+ */
+import styles from './index.module.css';
+import HomepageTrustedBy from '../components/HomepageTrustedBy';
+import HomepageBlocks from '../components/HomepageBlocks';
+import HomepageThanks from '../components/HomepageThanks';
+
+function HomepageHeader() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<header className={ clsx( 'hero hero-secondary', styles.heroBanner ) }>
+			<div className={ clsx( 'container', styles.container ) }>
+				<div className={ styles.heroLogo }>
+					<img
+						src={
+							require( '@site/static/img/gutenberg_icon.png' )
+								.default
+						}
+						alt="Gutenberg"
+						width="38"
+						height="38"
+					/>
+				</div>
+				<h1 className={ styles.heroTitle }>
+					Say hello to Gutenberg, the block editor.
+				</h1>
+				<p className="hero__subtitle">{ siteConfig.tagline }</p>
+				<div className={ styles.buttons }>
+					<Link
+						className="button button--primary button--outline"
+						to="/docs/intro"
+					>
+						Getting started - 10min ⏱️
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export default function Home() {
+	const { siteConfig } = useDocusaurusContext();
+	return (
+		<Layout
+			title={ `Hello from ${ siteConfig.title }` }
+			description="Build block editors using Gutenberg as a Framework"
+		>
+			<HomepageHeader />
+			<main>
+				<HomepageFeatures />
+				<HomepageBlocks />
+				<HomepageThanks />
+				<HomepageTrustedBy />
+			</main>
+		</Layout>
+	);
+}
diff --git a/platform-docs/src/pages/index.module.css b/platform-docs/src/pages/index.module.css
new file mode 100644
index 00000000000000..5f79b7562f5797
--- /dev/null
+++ b/platform-docs/src/pages/index.module.css
@@ -0,0 +1,31 @@
+.heroLogo {
+	padding-bottom: 3rem;
+}
+
+.heroTitle {
+	font-weight: 400;
+	font-size: 80px;
+}
+
+[data-theme="dark"] .heroTitle {
+	color: #fff;
+}
+
+.heroBanner {
+	position: relative;
+	overflow: hidden;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	max-width: 800px;
+	padding: 5rem 0;
+}
+
+.buttons {
+	--ifm-button-border-radius: 50px;
+	--ifm-button-size-multiplier: 1.5;
+	--ifm-button-font-weight: 500;
+}
diff --git a/platform-docs/static/.nojekyll b/platform-docs/static/.nojekyll
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/platform-docs/static/img/audio.png b/platform-docs/static/img/audio.png
new file mode 100644
index 00000000000000..513caf78e57050
Binary files /dev/null and b/platform-docs/static/img/audio.png differ
diff --git a/platform-docs/static/img/block-media-text.png b/platform-docs/static/img/block-media-text.png
new file mode 100644
index 00000000000000..9e7b78a96dcdfa
Binary files /dev/null and b/platform-docs/static/img/block-media-text.png differ
diff --git a/platform-docs/static/img/code.png b/platform-docs/static/img/code.png
new file mode 100644
index 00000000000000..2ca9e3404890da
Binary files /dev/null and b/platform-docs/static/img/code.png differ
diff --git a/platform-docs/static/img/columns.png b/platform-docs/static/img/columns.png
new file mode 100644
index 00000000000000..2f12fca11824a3
Binary files /dev/null and b/platform-docs/static/img/columns.png differ
diff --git a/platform-docs/static/img/cover.png b/platform-docs/static/img/cover.png
new file mode 100644
index 00000000000000..0ad011f85a27ee
Binary files /dev/null and b/platform-docs/static/img/cover.png differ
diff --git a/platform-docs/static/img/dayone.png b/platform-docs/static/img/dayone.png
new file mode 100644
index 00000000000000..7fab9ab6ec2b46
Binary files /dev/null and b/platform-docs/static/img/dayone.png differ
diff --git a/platform-docs/static/img/file.png b/platform-docs/static/img/file.png
new file mode 100644
index 00000000000000..d0fc342541baa7
Binary files /dev/null and b/platform-docs/static/img/file.png differ
diff --git a/platform-docs/static/img/gallery.png b/platform-docs/static/img/gallery.png
new file mode 100644
index 00000000000000..de1bc9689f1549
Binary files /dev/null and b/platform-docs/static/img/gallery.png differ
diff --git a/platform-docs/static/img/gradient_background.png b/platform-docs/static/img/gradient_background.png
new file mode 100644
index 00000000000000..851e12b1a91d1b
Binary files /dev/null and b/platform-docs/static/img/gradient_background.png differ
diff --git a/platform-docs/static/img/gutenberg_icon.png b/platform-docs/static/img/gutenberg_icon.png
new file mode 100644
index 00000000000000..44f41d0019552c
Binary files /dev/null and b/platform-docs/static/img/gutenberg_icon.png differ
diff --git a/platform-docs/static/img/heading.png b/platform-docs/static/img/heading.png
new file mode 100644
index 00000000000000..2432805003d671
Binary files /dev/null and b/platform-docs/static/img/heading.png differ
diff --git a/platform-docs/static/img/image.png b/platform-docs/static/img/image.png
new file mode 100644
index 00000000000000..6a4459d791c6bf
Binary files /dev/null and b/platform-docs/static/img/image.png differ
diff --git a/platform-docs/static/img/list.png b/platform-docs/static/img/list.png
new file mode 100644
index 00000000000000..59b848107ac8b2
Binary files /dev/null and b/platform-docs/static/img/list.png differ
diff --git a/platform-docs/static/img/logo.svg b/platform-docs/static/img/logo.svg
new file mode 100644
index 00000000000000..ed2d0d8621db5a
--- /dev/null
+++ b/platform-docs/static/img/logo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" role="img" width="28" height="28" viewBox="0 0 28 28">
+	<title>WordPress.org</title>
+	<path fill="currentColor" d="M13.6052 0.923525C16.1432 0.923525 18.6137 1.67953 20.7062 3.09703C22.7447 4.47403 24.3512 6.41803 25.3097 8.68603C26.9837 12.6415 26.5382 17.164 24.1352 20.7145C22.7582 22.753 20.8142 24.3595 18.5462 25.318C14.5907 26.992 10.0682 26.5465 6.51772 24.1435C4.47922 22.7665 2.87272 20.8225 1.91422 18.5545C0.240225 14.599 0.685725 10.0765 3.08872 6.52603C4.46572 4.48753 6.40973 2.88103 8.67772 1.92253C10.2302 1.26103 11.9177 0.923525 13.6052 0.923525ZM13.6052 0.113525C6.15322 0.113525 0.105225 6.16153 0.105225 13.6135C0.105225 21.0655 6.15322 27.1135 13.6052 27.1135C21.0572 27.1135 27.1052 21.0655 27.1052 13.6135C27.1052 6.16153 21.0572 0.113525 13.6052 0.113525Z"></path>
+	<path fill="currentColor" d="M2.36011 13.6133C2.36011 17.9198 4.81711 21.8618 8.70511 23.7383L3.33211 9.03684C2.68411 10.4813 2.36011 12.0338 2.36011 13.6133ZM21.2061 13.0463C21.2061 11.6558 20.7066 10.6973 20.2746 9.94134C19.8426 9.18534 19.1676 8.22684 19.1676 7.30884C19.1676 6.39084 19.9506 5.31084 21.0576 5.31084H21.2061C16.6296 1.11234 9.51511 1.42284 5.31661 6.01284C4.91161 6.45834 4.53361 6.93084 4.20961 7.43034H4.93861C6.11311 7.43034 7.93561 7.28184 7.93561 7.28184C8.54311 7.24134 8.61061 8.13234 8.00311 8.21334C8.00311 8.21334 7.39561 8.28084 6.72061 8.32134L10.8111 20.5118L13.2681 13.1273L11.5131 8.32134C10.9056 8.28084 10.3386 8.21334 10.3386 8.21334C9.73111 8.17284 9.79861 7.25484 10.4061 7.28184C10.4061 7.28184 12.2691 7.43034 13.3626 7.43034C14.4561 7.43034 16.3596 7.28184 16.3596 7.28184C16.9671 7.24134 17.0346 8.13234 16.4271 8.21334C16.4271 8.21334 15.8196 8.28084 15.1446 8.32134L19.2081 20.4173L20.3691 16.7453C20.8821 15.1388 21.1926 14.0048 21.1926 13.0328L21.2061 13.0463ZM13.7946 14.5853L10.4196 24.3998C12.6876 25.0613 15.1041 25.0073 17.3316 24.2243L17.2506 24.0758L13.7946 14.5853ZM23.4741 8.21334C23.5281 8.59134 23.5551 8.98284 23.5551 9.37434C23.5551 10.5218 23.3391 11.8043 22.7046 13.3973L19.2621 23.3333C24.5271 20.2688 26.4036 13.5593 23.4741 8.21334Z"></path>
+</svg>
\ No newline at end of file
diff --git a/platform-docs/static/img/media-text.png b/platform-docs/static/img/media-text.png
new file mode 100644
index 00000000000000..36d4d2b6a2f1c3
Binary files /dev/null and b/platform-docs/static/img/media-text.png differ
diff --git a/platform-docs/static/img/mobile-icon.png b/platform-docs/static/img/mobile-icon.png
new file mode 100644
index 00000000000000..1decbca5daa2f6
Binary files /dev/null and b/platform-docs/static/img/mobile-icon.png differ
diff --git a/platform-docs/static/img/paragraph.png b/platform-docs/static/img/paragraph.png
new file mode 100644
index 00000000000000..4a47dfd6edaf15
Binary files /dev/null and b/platform-docs/static/img/paragraph.png differ
diff --git a/platform-docs/static/img/plugin-icon.png b/platform-docs/static/img/plugin-icon.png
new file mode 100644
index 00000000000000..fcb257e46e16b6
Binary files /dev/null and b/platform-docs/static/img/plugin-icon.png differ
diff --git a/platform-docs/static/img/react-icon.svg b/platform-docs/static/img/react-icon.svg
new file mode 100644
index 00000000000000..1c5118db70fb62
--- /dev/null
+++ b/platform-docs/static/img/react-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><g transform="matrix(.05696 0 0 .05696 .647744 2.43826)" fill="none" fill-rule="evenodd"><circle r="50.167" cy="237.628" cx="269.529" fill="#00d8ff"/><g stroke="#00d8ff" stroke-width="24"><path d="M269.53 135.628c67.356 0 129.928 9.665 177.107 25.907 56.844 19.57 91.794 49.233 91.794 76.093 0 27.99-37.04 59.503-98.083 79.728-46.15 15.29-106.88 23.272-170.818 23.272-65.554 0-127.63-7.492-174.3-23.44-59.046-20.182-94.61-52.103-94.61-79.56 0-26.642 33.37-56.076 89.415-75.616 47.355-16.51 111.472-26.384 179.486-26.384z"/><path d="M180.736 186.922c33.65-58.348 73.28-107.724 110.92-140.48C337.006 6.976 380.163-8.48 403.43 4.937c24.248 13.983 33.042 61.814 20.067 124.796-9.8 47.618-33.234 104.212-65.176 159.6-32.75 56.788-70.25 106.82-107.377 139.272-46.98 41.068-92.4 55.93-116.185 42.213-23.08-13.3-31.906-56.92-20.834-115.233 9.355-49.27 32.832-109.745 66.8-168.664z"/><path d="M180.82 289.482C147.075 231.2 124.1 172.195 114.51 123.227c-11.544-59-3.382-104.11 19.864-117.566 24.224-14.024 70.055 2.244 118.14 44.94 36.356 32.28 73.688 80.837 105.723 136.173 32.844 56.733 57.46 114.21 67.036 162.582 12.117 61.213 2.31 107.984-21.453 121.74-23.057 13.348-65.25-.784-110.24-39.5-38.013-32.71-78.682-83.253-112.76-142.115z"/></g></g></svg>
\ No newline at end of file
diff --git a/platform-docs/static/img/tumblr.png b/platform-docs/static/img/tumblr.png
new file mode 100644
index 00000000000000..333aac82b419a4
Binary files /dev/null and b/platform-docs/static/img/tumblr.png differ
diff --git a/platform-docs/static/img/video.png b/platform-docs/static/img/video.png
new file mode 100644
index 00000000000000..d24f2a75547f4c
Binary files /dev/null and b/platform-docs/static/img/video.png differ
diff --git a/platform-docs/static/img/wordpress.png b/platform-docs/static/img/wordpress.png
new file mode 100644
index 00000000000000..eb195a12c14bf9
Binary files /dev/null and b/platform-docs/static/img/wordpress.png differ
diff --git a/post-content.php b/post-content.php
index 2d65eeff8b87c9..3c9b18087b0e84 100644
--- a/post-content.php
+++ b/post-content.php
@@ -6,7 +6,7 @@
  */
 
 ?>
-<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","className":"alignwide"} -->
+<!-- wp:cover {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
 <div class="wp-block-cover has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","textColor":"white","fontSize":"large"} -->
 <p class="has-text-align-center has-white-color has-text-color has-large-font-size"><?php _e( 'Of Mountains &amp; Printing Presses', 'gutenberg' ); ?></p>
 <!-- /wp:paragraph --></div></div>
@@ -61,7 +61,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul>
+<ul class="wp-block-list">
 	<li><?php _e( 'Text &amp; Headings', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Images &amp; Videos', 'gutenberg' ); ?></li>
 	<li><?php _e( 'Galleries', 'gutenberg' ); ?></li>
diff --git a/react-scanner.config.js b/react-scanner.config.js
new file mode 100644
index 00000000000000..7501e7e8fc3ab0
--- /dev/null
+++ b/react-scanner.config.js
@@ -0,0 +1,31 @@
+module.exports = {
+	// Crawl the entire repo
+	crawlFrom: './',
+	// Needed for properly reporting components with dot notation
+	includeSubComponents: true,
+	// Exclude usage in tests, stories, and React Native files.
+	globs: [ '**/!(test|stories)/!(*native).@(js|ts)?(x)' ],
+	// Exclude any vendor or docs directories
+	exclude: [
+		'bin',
+		'build',
+		'build-module',
+		'docs',
+		'node_modules',
+		'patches',
+		'platform-docs',
+		'results',
+		'schemas',
+		'storybook',
+		'test',
+		'tools',
+		'typings',
+		'vendor',
+	],
+	/*
+	 * Filter out any non-component React elements and consider only imports of
+	 * `@wordpress/components` outside of the package.
+	 */
+	importedFrom: '@wordpress/components',
+	processors: [ [ 'raw-report', { outputTo: './results/gutenberg.json' } ] ],
+};
diff --git a/readme.txt b/readme.txt
index c87aff308e1c52..066de4a678a552 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,11 +1,11 @@
 === Gutenberg ===
 Contributors: matveb, joen, karmatosed
-Tested up to: 6.1
+Tested up to: 6.7
 Stable tag: V.V.V
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
-The Gutenberg plugin provides editing, customization, and site building features to WordPress. This beta plugin allows you to test bleeding-edge features before they land in future WordPress releases.
+The Gutenberg plugin adds editing, customization, and site building to WordPress. Use it to test beta features before their official release.
 
 == Description ==
 
@@ -31,7 +31,7 @@ For the adventurous and tech-savvy, the Gutenberg plugin gives you the latest an
 
 ### Discover More
 
-- **User Documentation:** Review the <a href="https://wordpress.org/support/article/wordpress-editor/">WordPress Editor documentation</a> for detailed instructions on using the editor as an author to create posts, pages, and more.
+- **User Documentation:** Review the <a href="https://wordpress.org/documentation/article/wordpress-block-editor/">WordPress Editor documentation</a> for detailed instructions on using the editor as an author to create posts, pages, and more.
 
 - **Developer Documentation:** Explore the <a href="https://developer.wordpress.org/block-editor/">Developer Documentation</a> for extensive tutorials, documentation, and API references on how to extend the editor.
 
@@ -47,9 +47,15 @@ The best place to report bugs, feature suggestions, or any other feedback is at
 
 While we try to triage issues reported here on the plugin forum, you’ll get a faster response (and reduce duplication of effort) by keeping feedback centralized in GitHub.
 
+= Where can I report security bugs? =
+
+The Gutenberg team and WordPress community take security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, please visit the [WordPress HackerOne](https://hackerone.com/wordpress) program.
+
 = Do I have to use the Gutenberg plugin to get access to these features? =
 
-Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the <a href="https://wordpress.org/support/article/wordpress-editor/">WordPress Editor</a>. You are likely already benefitting from stable features!
+Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the <a href="https://wordpress.org/documentation/article/wordpress-block-editor/">WordPress Editor</a>. You are likely already benefiting from stable features!
 
 But if you want cutting edge beta features, including more experimental items, you will need to use the plugin. You can <a href="https://wordpress.org/news/2021/04/become-an-early-adopter-with-the-gutenberg-plugin/">read more here</a> to help decide whether the plugin is right for you.
 
diff --git a/schemas/README.md b/schemas/README.md
index 1b2d8992cccb90..fa695115f33abe 100644
--- a/schemas/README.md
+++ b/schemas/README.md
@@ -1,6 +1,6 @@
 # Schemas
 
-The collection of schemas used in WordPress, including the `theme.json` and `block.json` schemas.
+The collection of schemas used in WordPress, including the `theme.json`, `block.json` and `font-collection.json` schemas.
 
 JSON schemas are used by code editors to offer tooltips, autocomplete, and validation.
 
@@ -24,6 +24,14 @@ Or in your `theme.json`:
 }
 ```
 
+Or in your `font-collection.json`:
+
+```json
+{
+	"$schema": "https://schemas.wp.org/trunk/font-collection.json"
+}
+```
+
 For a specific version of the schema, replace `trunk` with `wp/X.X`:
 
 ```json
@@ -56,8 +64,16 @@ To allow this you will need to:
 }
 ```
 
+-   update your font collections's `font-collection.json` to include:
+
+```json
+{
+	"$schema": "file://{{FULL_FILE_PATH}}/schemas/json/font-collection.json"
+}
+```
+
 Be sure to replace `{{FULL_FILE_PATH}}` with the full local path to your Gutenberg repo.
 
-With this in place you should now be able to edit either `schemas/json/theme .json` or `schemas/json/block.json` in order to see changes reflected in `theme.json` or `block.json` in your IDE.
+With this in place you should now be able to edit either `schemas/json/theme .json`, `schemas/json/block.json` or `schemas/json/font-collection.json` in order to see changes reflected in `theme.json`, `block.json` or `font-collection.json` in your IDE.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 93ed4e5a12b944..8e314a45ae1cff 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -1,6 +1,6 @@
 {
 	"title": "JSON schema for WordPress blocks",
-	"$schema": "http://json-schema.org/draft-04/schema#",
+	"$schema": "http://json-schema.org/draft-07/schema#",
 	"definitions": {
 		"//": {
 			"reference": "https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/",
@@ -16,15 +16,15 @@
 			"type": "string"
 		},
 		"apiVersion": {
+			"description": "The version of the Block API used by the block. The most recent version is 3 and it was introduced in WordPress 6.3.\n\n See the API versions documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ for more details.",
 			"type": "integer",
-			"description": "The version of the Block API used by the block. The most recent version is 2 and it was introduced in WordPress 5.6.\n\n See the API versions documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/ for more details.",
-			"default": 1,
-			"enum": [ 1, 2 ]
+			"enum": [ 1, 2, 3 ],
+			"default": 1
 		},
 		"name": {
+			"description": "The name for a block is a unique string that identifies a block. Names have to be structured as `namespace/block-name`, where namespace is the name of your plugin or theme.",
 			"type": "string",
-			"pattern": "^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$",
-			"description": "The name for a block is a unique string that identifies a block. Names have to be structured as `namespace/block-name`, where namespace is the name of your plugin or theme."
+			"pattern": "^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$"
 		},
 		"__experimental": {
 			"description": "The name of the experiment this block is a part of, or boolean true if there is no specific experiment name.",
@@ -38,8 +38,8 @@
 			]
 		},
 		"title": {
-			"type": "string",
-			"description": "This is the display title for your block, which can be translated with our translation functions. The block inserter will show this name."
+			"description": "This is the display title for your block, which can be translated with our translation functions. The block inserter will show this name.",
+			"type": "string"
 		},
 		"category": {
 			"description": "Blocks are grouped into categories to help users browse and discover them.\n Core provided categories are: text, media, design, widgets, theme, embed\n\nPlugins and Themes can also register custom block categories.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#managing-block-categories",
@@ -48,6 +48,7 @@
 					"type": "string"
 				},
 				{
+					"type": "string",
 					"enum": [
 						"text",
 						"media",
@@ -60,45 +61,52 @@
 			]
 		},
 		"parent": {
-			"type": "array",
 			"description": "Setting parent lets a block require that it is only available when nested within the specified blocks. For example, you might want to allow an ‘Add to Cart’ block to only be available within a ‘Product’ block.",
+			"type": "array",
 			"items": {
 				"type": "string"
 			}
 		},
 		"ancestor": {
-			"type": "array",
 			"description": "The `ancestor` property makes a block available inside the specified block types at any position of the ancestor block subtree. That allows, for example, to place a ‘Comment Content’ block inside a ‘Column’ block, as long as ‘Column’ is somewhere within a ‘Comment Template’ block.",
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"allowedBlocks": {
+			"description": "The `allowedBlocks` property specifies that only the listed block types can be the children of this block. For example, a ‘List’ block allows only ‘List Item’ blocks as direct children.",
+			"type": "array",
 			"items": {
 				"type": "string"
 			}
 		},
 		"icon": {
-			"type": "string",
-			"description": "An icon property should be specified to make it easier to identify a block. These can be any of WordPress’ Dashicons (slug serving also as a fallback in non-js contexts)."
+			"description": "An icon property should be specified to make it easier to identify a block. These can be any of WordPress’ Dashicons (slug serving also as a fallback in non-js contexts).",
+			"type": "string"
 		},
 		"description": {
-			"type": "string",
-			"description": "This is a short description for your block, which can be translated with our translation functions. This will be shown in the block inspector."
+			"description": "This is a short description for your block, which can be translated with our translation functions. This will be shown in the block inspector.",
+			"type": "string"
 		},
 		"keywords": {
-			"type": "array",
 			"description": "Sometimes a block could have aliases that help users discover it while searching. For example, an image block could also want to be discovered by photo. You can do so by providing an array of unlimited terms (which are translated).",
+			"type": "array",
 			"items": {
 				"type": "string"
 			}
 		},
 		"version": {
-			"type": "string",
-			"description": "The current version number of the block, such as 1.0 or 1.0.3. It’s similar to how plugins are versioned. This field might be used with block assets to control cache invalidation, and when the block author omits it, then the installed version of WordPress is used instead."
+			"description": "The current version number of the block, such as 1.0 or 1.0.3. It’s similar to how plugins are versioned. This field might be used with block assets to control cache invalidation, and when the block author omits it, then the installed version of WordPress is used instead.",
+			"type": "string"
 		},
 		"textdomain": {
-			"type": "string",
-			"description": "The gettext text domain of the plugin/block. More information can be found in the Text Domain section of the How to Internationalize your Plugin page.\n\nhttps://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/"
+			"description": "The gettext text domain of the plugin/block. More information can be found in the Text Domain section of the How to Internationalize your Plugin page.\n\nhttps://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/",
+			"type": "string"
 		},
 		"attributes": {
-			"type": "object",
 			"description": "Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.\n\nSee the attributes documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/ for more details.",
+			"type": "object",
 			"patternProperties": {
 				"[a-zA-Z]": {
 					"type": "object",
@@ -114,6 +122,7 @@
 										"object",
 										"array",
 										"string",
+										"rich-text",
 										"integer",
 										"number"
 									]
@@ -137,65 +146,60 @@
 							]
 						},
 						"enum": {
-							"type": "array",
 							"description": "An attribute can be defined as one of a fixed set of values. This is specified by an enum, which contains an array of allowed values:",
+							"type": "array",
 							"items": {
 								"oneOf": [
-									{
-										"type": "boolean"
-									},
-									{
-										"type": "number"
-									},
-									{
-										"type": "string"
-									}
+									{ "type": "boolean" },
+									{ "type": "number" },
+									{ "type": "string" }
 								]
 							}
 						},
 						"source": {
-							"type": "string",
 							"description": "Attribute sources are used to define how the attribute values are extracted from saved post content. They provide a mechanism to map from the saved markup to a JavaScript representation of a block.",
+							"type": "string",
 							"enum": [
 								"attribute",
 								"text",
+								"rich-text",
 								"html",
+								"raw",
 								"query",
 								"meta"
 							]
 						},
 						"selector": {
-							"type": "string",
-							"description": "The selector can be an HTML tag, or anything queryable with querySelector, such as a class or id attribute. Examples are given below.\n\nFor example, a selector of img will match an img element, and img.class will match an img element that has a class of class."
+							"description": "The selector can be an HTML tag, or anything queryable with querySelector, such as a class or id attribute. Examples are given below.\n\nFor example, a selector of img will match an img element, and img.class will match an img element that has a class of class.",
+							"type": "string"
 						},
 						"attribute": {
-							"type": "string",
-							"description": "Use an attribute source to extract the value from an attribute in the markup. The attribute is specified by the attribute field, which must be supplied.\n\nExample: Extract the src attribute from an image found in the block’s markup."
-						},
-						"multiline": {
-							"type": "string",
-							"description": "Use the multiline property to extract the inner HTML of matching tag names for the use in RichText with the multiline prop."
+							"description": "Use an attribute source to extract the value from an attribute in the markup. The attribute is specified by the attribute field, which must be supplied.\n\nExample: Extract the src attribute from an image found in the block’s markup.",
+							"type": "string"
 						},
 						"query": {
-							"type": "object",
-							"description": "Use query to extract an array of values from markup. Entries of the array are determined by the selector argument, where each matched element within the block will have an entry structured corresponding to the second argument, an object of attribute sources."
+							"description": "Use query to extract an array of values from markup. Entries of the array are determined by the selector argument, where each matched element within the block will have an entry structured corresponding to the second argument, an object of attribute sources.",
+							"type": "object"
 						},
 						"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",
+							"type": "string"
 						},
 						"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."
 						}
 					},
-					"required": [ "type" ]
+					"anyOf": [
+						{ "required": [ "type" ] },
+						{ "required": [ "enum" ] }
+					]
 				}
 			},
 			"additionalProperties": false
 		},
 		"providesContext": {
-			"type": "object",
 			"description": "Context provided for available access by descendants of blocks of this type, in the form of an object which maps a context name to one of the block’s own attribute.\n\nSee the block context documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/ for more details.",
+			"type": "object",
 			"patternProperties": {
 				"[a-zA-Z]": {
 					"type": "string"
@@ -203,23 +207,22 @@
 			}
 		},
 		"usesContext": {
-			"type": "array",
 			"description": "Array of the names of context values to inherit from an ancestor provider.\n\nSee the block context documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/ for more details.",
+			"type": "array",
 			"items": {
 				"type": "string"
 			}
 		},
 		"supports": {
-			"type": "object",
 			"description": "It contains as set of options to control features used in the editor. See the supports documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/ for more details.",
+			"type": "object",
 			"properties": {
 				"anchor": {
-					"type": "boolean",
 					"description": "Anchors let you link directly to a specific block on a page. This property adds a field to define an id for the block and a button to copy the direct link.",
+					"type": "boolean",
 					"default": false
 				},
 				"align": {
-					"default": false,
 					"description": "This property adds block controls which allow to change block’s alignment.",
 					"oneOf": [
 						{
@@ -238,92 +241,272 @@
 								]
 							}
 						}
-					]
+					],
+					"default": false
 				},
 				"alignWide": {
-					"type": "boolean",
 					"description": "This property allows to enable wide alignment for your theme. To disable this behavior for a single block, set this flag to false.",
+					"type": "boolean",
 					"default": true
 				},
 				"ariaLabel": {
-					"type": "boolean",
 					"description": "ARIA-labels let you define an accessible label for elements. This property allows enabling the definition of an aria-label for the block, without exposing a UI field.",
+					"type": "boolean",
 					"default": false
 				},
 				"className": {
-					"type": "boolean",
 					"description": "By default, the class .wp-block-your-block-name is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If, for whatever reason, a class is not desired on the markup, this functionality can be disabled.",
+					"type": "boolean",
 					"default": true
 				},
 				"color": {
-					"type": "object",
 					"description": "This value signals that a block supports some of the properties related to color. When it does, the block editor will show UI controls for the user to set their values.\n\nNote that the background and text keys have a default value of true, so if the color property is present they’ll also be considered enabled",
+					"type": "object",
 					"properties": {
 						"background": {
+							"description": "This property adds UI controls which allow the user to apply a solid background color to a block.\n\nWhen color support is declared, this property is enabled by default (along with text), so simply setting color will enable background color.\n\nTo disable background support while keeping other color supports enabled, set to false.\n\nWhen the block declares support for color.background, its attributes definition is extended to include two new attributes: backgroundColor and style",
 							"type": "boolean",
-							"description": "This property adds UI controls which allow the user to apply a solid background color to a block.\n\nWhen color support is declared, this property is enabled by default (along with text), so simply setting color will enable background color.\n\nTo disable background support while keeping other color supports enabled, set to false.\n\nWhen the block declares support for color.background, the attributes definition is extended to include two new attributes: backgroundColor and style",
 							"default": true
 						},
 						"gradients": {
+							"description": "This property adds UI controls which allow the user to apply a gradient background to a block.\n\nGradient presets are sourced from editor-gradient-presets theme support.\n\nWhen the block declares support for color.gradient, its attributes definition is extended to include two new attributes: gradient and style",
 							"type": "boolean",
-							"description": "This property adds UI controls which allow the user to apply a gradient background to a block.\n\nGradient presets are sourced from editor-gradient-presets theme support.\n\nWhen the block declares support for color.gradient, the attributes definition is extended to include two new attributes: gradient and style",
 							"default": false
 						},
 						"link": {
+							"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, its attributes definition is extended to include the style attribute",
 							"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",
 							"default": false
 						},
 						"text": {
+							"description": "This property adds block controls which allow the user to set text color in a block.\n\nWhen color support is declared, this property is enabled by default (along with background), so simply setting color will enable text color.\n\nText color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.text, its attributes definition is extended to include two new attributes: textColor and style",
 							"type": "boolean",
-							"description": "This property adds block controls which allow the user to set text color in a block.\n\nWhen color support is declared, this property is enabled by default (along with background), so simply setting color will enable text color.\n\nText color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.text, the attributes definition is extended to include two new attributes: textColor and style",
 							"default": true
 						},
-						"enableContrastChecker": {
+						"heading": {
+							"description": "This property adds block controls which allow the user to set heading colors in a block. Heading color is disabled by default.\n\nHeading color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.heading, its attributes definition is extended to include the style attribute",
 							"type": "boolean",
+							"default": false
+						},
+						"button": {
+							"description": "This property adds block controls which allow the user to set button colors in a block. Button color is disabled by default.\n\nButton color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.button, its attributes definition is extended to include the style attribute",
+							"type": "boolean",
+							"default": false
+						},
+						"enableContrastChecker": {
 							"description": "Determines whether the contrast checker widget displays in the block editor UI.\n\nThe contrast checker appears only if the block declares support for color. It tests the readability of color combinations and warns if there is a potential issue. The property is enabled by default.\n\nSet to `false` to explicitly disable.",
+							"type": "boolean",
 							"default": true
 						}
 					}
 				},
 				"customClassName": {
-					"type": "boolean",
 					"description": "This property adds a field to define a custom className for the block’s wrapper.",
-					"default": true
-				},
-				"defaultStylePicker": {
 					"type": "boolean",
-					"description": "When the style picker is shown, a dropdown is displayed so the user can select a default style for this block type. If you prefer not to show the dropdown, set this property to false.",
 					"default": true
 				},
+				"dimensions": {
+					"description": "This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific dimensions property, its attributes definition is extended to include the style attribute.",
+					"type": "object",
+					"properties": {
+						"aspectRatio": {
+							"description": "Allow blocks to define an aspect ratio value.",
+							"type": "boolean",
+							"default": false
+						},
+						"minHeight": {
+							"description": "Allow blocks to define a minimum height value.",
+							"type": "boolean",
+							"default": false
+						}
+					}
+				},
+				"filter": {
+					"description": "This value signals that a block supports some of the properties related to filters. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific filter property, its attributes definition is extended to include the style attribute.",
+					"type": "object",
+					"properties": {
+						"duotone": {
+							"description": "Allow blocks to define a duotone filter.",
+							"type": "boolean",
+							"default": false
+						}
+					}
+				},
+				"background": {
+					"description": "This value signals that a block supports some of the CSS style properties related to background. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific background property, its attributes definition is extended to include the style attribute.",
+					"type": "object",
+					"properties": {
+						"backgroundImage": {
+							"description": "Allow blocks to define a background image.",
+							"type": "boolean",
+							"default": false
+						},
+						"backgroundSize": {
+							"description": "Allow blocks to define values related to the size of a background image, including size, position, and repeat controls",
+							"type": "boolean",
+							"default": false
+						}
+					}
+				},
 				"html": {
-					"type": "boolean",
 					"description": "By default, a block’s markup can be edited individually. To disable this behavior, set html to false.",
+					"type": "boolean",
 					"default": true
 				},
 				"inserter": {
+					"description": "By default, all blocks will appear in the inserter, block transforms menu, Style Book, etc. To hide a block from all parts of the user interface so that it can only be inserted programmatically, set inserter to false.",
 					"type": "boolean",
-					"description": "By default, all blocks will appear in the inserter. To hide a block so that it can only be inserted programmatically, set inserter to false.",
 					"default": true
 				},
-				"multiple": {
+				"renaming": {
+					"description": "By default, a block can be renamed by a user from the block 'Options' dropdown or the 'Advanced' panel. To disable this behavior, set renaming to false.",
 					"type": "boolean",
+					"default": true
+				},
+				"layout": {
+					"description": "This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object.",
+					"oneOf": [
+						{ "type": "boolean" },
+						{
+							"type": "object",
+							"properties": {
+								"default": {
+									"description": "Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type, e.g., for a `flex` layout, a default value can be set for `flexWrap`.",
+									"type": "object",
+									"properties": {
+										"type": {
+											"description": "The layout type.",
+											"type": "string",
+											"enum": [
+												"constrained",
+												"grid",
+												"flex"
+											]
+										},
+										"contentSize": {
+											"description": "The content size used on all children.",
+											"type": "string"
+										},
+										"wideSize": {
+											"description": "The wide size used on alignwide children.",
+											"type": "string"
+										},
+										"justifyContent": {
+											"description": "Content justification value.",
+											"type": "string",
+											"enum": [
+												"right",
+												"center",
+												"space-between",
+												"left",
+												"stretch"
+											]
+										},
+										"orientation": {
+											"description": "The orientation of the layout.",
+											"type": "string",
+											"enum": [ "horizontal", "vertical" ]
+										},
+										"flexWrap": {
+											"description": "The flex wrap value.",
+											"type": "string",
+											"enum": [ "wrap", "nowrap" ]
+										},
+										"verticalAlignment": {
+											"description": "The vertical alignment value.",
+											"type": "string",
+											"enum": [
+												"top",
+												"center",
+												"bottom",
+												"space-between",
+												"stretch"
+											]
+										},
+										"minimumColumnWidth": {
+											"description": "The minimum column width value.",
+											"type": "string"
+										},
+										"columnCount": {
+											"description": "The column count value.",
+											"type": "number"
+										}
+									}
+								},
+								"allowSwitching": {
+									"description": "Exposes a switcher control that allows toggling between all existing layout types.",
+									"type": "boolean",
+									"default": false
+								},
+								"allowEditing": {
+									"description": "Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.",
+									"type": "boolean",
+									"default": true
+								},
+								"allowInheriting": {
+									"description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.",
+									"type": "boolean",
+									"default": true
+								},
+								"allowSizingOnChildren": {
+									"description": "For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block.",
+									"type": "boolean",
+									"default": false
+								},
+								"allowVerticalAlignment": {
+									"description": "For the `flex` layout type only, determines display of vertical alignment controls in the block toolbar.",
+									"type": "boolean",
+									"default": true
+								},
+								"allowJustification": {
+									"description": "For the `flex` layout type, determines display of justification controls in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar.",
+									"type": "boolean",
+									"default": true
+								},
+								"allowOrientation": {
+									"description": "For the `flex` layout type only, determines display of the orientation control in the block toolbar.",
+									"type": "boolean",
+									"default": true
+								},
+								"allowCustomContentAndWideSize": {
+									"description": "For the `constrained` layout type only, determines display of the custom content and wide size controls in the block sidebar.",
+									"type": "boolean",
+									"default": true
+								}
+							}
+						}
+					],
+					"default": false
+				},
+				"multiple": {
 					"description": "A non-multiple block can be inserted into each post, one time only. For example, the built-in ‘More’ block cannot be inserted again if it already exists in the post being edited. A non-multiple block’s icon is automatically dimmed (unclickable) to prevent multiple instances.",
+					"type": "boolean",
 					"default": true
 				},
 				"reusable": {
-					"type": "boolean",
 					"description": "A block may want to disable the ability of being converted into a reusable block. By default all blocks can be converted to a reusable block. If supports reusable is set to false, the option to convert the block into a reusable block will not appear.",
+					"type": "boolean",
 					"default": true
 				},
 				"lock": {
-					"type": "boolean",
 					"description": "A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block 'Options' dropdown by default. To disable this behavior, set lock to false.",
+					"type": "boolean",
 					"default": true
 				},
+				"position": {
+					"description": "This value signals that a block supports some of the CSS style properties related to position. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific position property, its attributes definition is extended to include the style attribute.",
+					"type": "object",
+					"properties": {
+						"sticky": {
+							"description": "Allow blocks to stick to their immediate parent when scrolling the page.",
+							"type": "boolean",
+							"default": false
+						}
+					}
+				},
 				"spacing": {
+					"description": "This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific spacing property, its attributes definition is extended to include the style attribute.",
 					"type": "object",
-					"description": "This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values, if the theme declares support.\n\nWhen the block declares support for a specific spacing property, the attributes definition is extended to include the style attribute.",
 					"properties": {
 						"margin": {
 							"oneOf": [
@@ -379,28 +562,186 @@
 						}
 					}
 				},
+				"shadow": {
+					"description": "Allow blocks to define a box shadow.",
+					"oneOf": [
+						{
+							"description": "Defines whether a box shadow is enabled or not.",
+							"type": "boolean"
+						},
+						{
+							"type": "object"
+						}
+					],
+					"default": false
+				},
 				"typography": {
+					"description": "This value signals that a block supports some of the CSS style properties related to typography. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.\n\nWhen the block declares support for a specific typography property, its attributes definition is extended to include the style attribute.",
 					"type": "object",
-					"description": "This value signals that a block supports some of the CSS style properties related to typography. When it does, the block editor will show UI controls for the user to set their values, if the theme declares support.\n\nWhen the block declares support for a specific typography property, the attributes definition is extended to include the style attribute.",
 					"properties": {
 						"fontSize": {
+							"description": "This value signals that a block supports the font-size CSS style property. When it does, the block editor will show an UI control for the user to set its value.\n\nThe values shown in this control are the ones declared by the theme via the editor-font-sizes theme support, or the default ones if none is provided.\n\nWhen the block declares support for fontSize, its attributes definition is extended to include two new attributes: fontSize and style",
 							"type": "boolean",
-							"description": "This value signals that a block supports the font-size CSS style property. When it does, the block editor will show an UI control for the user to set its value.\n\nThe values shown in this control are the ones declared by the theme via the editor-font-sizes theme support, or the default ones if none is provided.\n\nWhen the block declares support for fontSize, the attributes definition is extended to include two new attributes: fontSize and style",
 							"default": false
 						},
 						"lineHeight": {
+							"description": "This value signals that a block supports the line-height CSS style property. When it does, the block editor will show an UI control for the user to set its value if the theme declares support.\n\nWhen the block declares support for lineHeight, its attributes definition is extended to include a new attribute style of object type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own style attribute with a default",
 							"type": "boolean",
-							"description": "This value signals that a block supports the line-height CSS style property. When it does, the block editor will show an UI control for the user to set its value if the theme declares support.\n\nWhen the block declares support for lineHeight, the attributes definition is extended to include a new attribute style of object type with no default assigned. It stores the custom value set by the user. The block can apply a default style by specifying its own style attribute with a default",
+							"default": false
+						},
+						"textAlign": {
+							"description": "This property adds block toolbar controls which allow to change block's text alignment.",
+							"oneOf": [
+								{
+									"type": "boolean"
+								},
+								{
+									"type": "array",
+									"items": {
+										"type": "string",
+										"enum": [ "left", "center", "right" ]
+									}
+								}
+							],
 							"default": false
 						}
 					}
+				},
+				"interactivity": {
+					"description": "Indicates if the block is using Interactivity API features.",
+					"oneOf": [
+						{
+							"description": "Indicates whether the block is using the Interactivity API directives.",
+							"type": "boolean",
+							"default": false
+						},
+						{
+							"type": "object",
+							"properties": {
+								"clientNavigation": {
+									"description": "Indicates whether a block is compatible with the Interactivity API client-side navigation.\n\nSet it to true only if the block is not interactive or if it is interactive using the Interactivity API. Set it to false if the block is interactive but uses vanilla JS, jQuery or another JS framework/library other than the Interactivity API.",
+									"type": "boolean",
+									"default": false
+								},
+								"interactive": {
+									"description": "Indicates whether the block is using the Interactivity API directives.",
+									"type": "boolean",
+									"default": false
+								}
+							}
+						}
+					]
+				},
+				"splitting": {
+					"description": "This property indicates whether the block can split when the Enter key is pressed or when blocks are pasted.",
+					"type": "boolean",
+					"default": false
 				}
 			},
 			"additionalProperties": true
 		},
+		"selectors": {
+			"description": "Provides custom CSS selectors and mappings for the block. Selectors may be set for the block itself or per-feature e.g. typography. Custom selectors per feature or sub-feature, allow different block styles to be applied to different elements within the block.",
+			"type": "object",
+			"properties": {
+				"root": {
+					"description": "The primary CSS class to apply to the block. This replaces the `.wp-block-name` class if set.",
+					"type": "string"
+				},
+				"border": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json border styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"color": { "type": "string" },
+								"radius": { "type": "string" },
+								"style": { "type": "string" },
+								"width": { "type": "string" }
+							}
+						}
+					]
+				},
+				"color": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json color styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"text": { "type": "string" },
+								"background": { "type": "string" }
+							}
+						}
+					]
+				},
+				"dimensions": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json dimensions styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"aspectRatio": { "type": "string" },
+								"minHeight": { "type": "string" }
+							}
+						}
+					]
+				},
+				"spacing": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json spacing styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"blockGap": { "type": "string" },
+								"padding": { "type": "string" },
+								"margin": { "type": "string" }
+							}
+						}
+					]
+				},
+				"typography": {
+					"description": "Custom CSS selector used to generate rules for the block's theme.json typography styles.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "object",
+							"properties": {
+								"root": { "type": "string" },
+								"fontFamily": { "type": "string" },
+								"fontSize": { "type": "string" },
+								"fontStyle": { "type": "string" },
+								"fontWeight": { "type": "string" },
+								"lineHeight": { "type": "string" },
+								"letterSpacing": { "type": "string" },
+								"textDecoration": { "type": "string" },
+								"textTransform": { "type": "string" }
+							}
+						}
+					]
+				}
+			}
+		},
 		"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",
 			"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",
 			"items": {
 				"type": "object",
 				"properties": {
@@ -420,24 +761,35 @@
 			}
 		},
 		"example": {
-			"type": "object",
 			"description": "It provides structured example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block.\n\nSee the example documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#example-optional for more details.",
+			"type": "object",
 			"properties": {
 				"viewportWidth": {
-					"type": "number",
 					"description": "The viewportWidth controls the width of the iFrame container in which the block preview will get rendered",
+					"type": "number",
 					"default": 1200
 				},
 				"attributes": {
-					"type": "object",
-					"description": "Set the attribues for the block example"
+					"description": "Set the attributes for the block example",
+					"type": "object"
 				},
 				"innerBlocks": {
-					"type": "array",
-					"description": "Set the inner blocks that should be used within the block example. The blocks should be defined as a nested array like this: \n\n [ [ 'core/heading', { content: 'This is an Example' }, [] ] ]\n\n Where each block itself is an array that contains the block name, the block attributes, and the blocks inner blocks."
+					"description": "Set the inner blocks that should be used within the block example. The blocks should be defined as a nested array like this:\n\n[ { \"name\": \"core/heading\", \"attributes\": { \"content\": \"This is an Example\" } } ]\n\nWhere each block itself is an object that contains the block name, the block attributes, and the blocks inner blocks.",
+					"type": "array"
 				}
 			}
 		},
+		"blockHooks": {
+			"description": "Block Hooks allow a block to automatically insert itself next to all instances of a given block type.\n\nSee the Block Hooks documentation at https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#block-hooks-optional for more details.",
+			"type": "object",
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$": {
+					"type": "string",
+					"enum": [ "before", "after", "firstChild", "lastChild" ]
+				}
+			},
+			"additionalProperties": false
+		},
 		"editorScript": {
 			"description": "Block type editor script definition. It will only be enqueued in the context of the editor.",
 			"oneOf": [
@@ -480,6 +832,20 @@
 				}
 			]
 		},
+		"viewScriptModule": {
+			"description": "Block type frontend script module definition. It will be enqueued only when viewing the content on the front of the site.",
+			"oneOf": [
+				{
+					"type": "string"
+				},
+				{
+					"type": "array",
+					"items": {
+						"type": "string"
+					}
+				}
+			]
+		},
 		"editorStyle": {
 			"description": "Block type editor style definition. It will only be enqueued in the context of the editor.",
 			"oneOf": [
@@ -508,96 +874,121 @@
 				}
 			]
 		},
+		"viewStyle": {
+			"description": "Block type frontend style definition. It will be enqueued only when viewing the content on the front of the site.",
+			"oneOf": [
+				{
+					"type": "string"
+				},
+				{
+					"type": "array",
+					"items": {
+						"type": "string"
+					}
+				}
+			]
+		},
 		"variations": {
-			"type": "array",
 			"description": "Block Variations is the API that allows a block to have similar versions of it, but all these versions share some common functionality.",
-			"items": {
-				"type": "object",
-				"required": [ "name", "title" ],
-				"additionalProperties": false,
-				"properties": {
-					"name": {
-						"type": "string",
-						"description": "The unique and machine-readable name."
-					},
-					"title": {
-						"type": "string",
-						"description": "A human-readable variation title."
-					},
-					"description": {
-						"type": "string",
-						"description": "A detailed variation description."
-					},
-					"category": {
-						"description": "A category classification, used in search interfaces to arrange block types by category.",
-						"anyOf": [
-							{
+			"oneOf": [
+				{
+					"description": "The path to a PHP file that returns an array of block variations.",
+					"type": "string"
+				},
+				{
+					"description": "An array of block variations.",
+					"type": "array",
+					"items": {
+						"type": "object",
+						"properties": {
+							"name": {
+								"description": "The unique and machine-readable name.",
 								"type": "string"
 							},
-							{
-								"enum": [
-									"text",
-									"media",
-									"design",
-									"widgets",
-									"theme",
-									"embed"
+							"title": {
+								"description": "A human-readable variation title.",
+								"type": "string"
+							},
+							"description": {
+								"description": "A detailed variation description.",
+								"type": "string"
+							},
+							"category": {
+								"description": "A category classification, used in search interfaces to arrange block types by category.",
+								"anyOf": [
+									{
+										"type": "string"
+									},
+									{
+										"type": "string",
+										"enum": [
+											"text",
+											"media",
+											"design",
+											"widgets",
+											"theme",
+											"embed"
+										]
+									}
 								]
+							},
+							"icon": {
+								"description": "An icon helping to visualize the variation. It can have the same shape as the block type.",
+								"type": "string"
+							},
+							"isDefault": {
+								"description": "Indicates whether the current variation is the default one.",
+								"type": "boolean",
+								"default": false
+							},
+							"attributes": {
+								"description": "Values that override block attributes.",
+								"type": "object"
+							},
+							"innerBlocks": {
+								"description": "Initial configuration of nested blocks.",
+								"type": "array",
+								"items": {
+									"type": "array"
+								}
+							},
+							"example": {
+								"description": "Example provides structured data for the block preview. You can set to undefined to disable the preview shown for the block type.",
+								"type": "object"
+							},
+							"scope": {
+								"description": "The list of scopes where the variation is applicable.",
+								"type": "array",
+								"items": {
+									"type": "string",
+									"enum": [ "inserter", "block", "transform" ]
+								},
+								"default": [ "inserter", "block" ]
+							},
+							"keywords": {
+								"description": "An array of terms (which can be translated) that help users discover the variation while searching.",
+								"type": "array",
+								"items": {
+									"type": "string"
+								}
+							},
+							"isActive": {
+								"description": "The list of attributes that should be compared. Each attributes will be matched and the variation will be active if all of them are matching.",
+								"type": "array",
+								"items": {
+									"type": "string"
+								}
 							}
-						]
-					},
-					"icon": {
-						"description": "An icon helping to visualize the variation. It can have the same shape as the block type.",
-						"type": "string"
-					},
-					"isDefault": {
-						"type": "boolean",
-						"default": false,
-						"description": "Indicates whether the current variation is the default one."
-					},
-					"attributes": {
-						"type": "object",
-						"description": "Values that override block attributes."
-					},
-					"innerBlocks": {
-						"type": "array",
-						"items": {
-							"type": "array"
-						},
-						"description": "Initial configuration of nested blocks."
-					},
-					"example": {
-						"type": "object",
-						"description": "Example provides structured data for the block preview. You can set to undefined to disable the preview shown for the block type."
-					},
-					"scope": {
-						"type": "array",
-						"description": "The list of scopes where the variation is applicable.",
-						"items": {
-							"enum": [ "inserter", "block", "transform" ]
 						},
-						"default": [ "inserter", "block" ]
-					},
-					"keywords": {
-						"type": "array",
-						"description": "An array of terms (which can be translated) that help users discover the variation while searching.",
-						"items": {
-							"type": "string"
-						}
-					},
-					"isActive": {
-						"type": "array",
-						"items": {
-							"type": "string"
-						},
-						"description": "The list of attributes that should be compared. Each attributes will be matched and the variation will be active if all of them are matching."
+						"required": [ "name", "title" ],
+						"additionalProperties": false
 					}
 				}
-			}
+			]
 		},
 		"render": {
-			"type": "string",
-			"description": "Template file loaded on the server when rendering a block."
+			"description": "Template file loaded on the server when rendering a block.",
+			"type": "string"
 		}
 	},
 	"required": [ "name", "title" ],
diff --git a/schemas/json/font-collection.json b/schemas/json/font-collection.json
new file mode 100644
index 00000000000000..7b5bd8f7979ba7
--- /dev/null
+++ b/schemas/json/font-collection.json
@@ -0,0 +1,146 @@
+{
+	"title": "JSON schema for WordPress Font Collections",
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"definitions": {
+		"fontFace": {
+			"description": "Font face settings, with added preview property.",
+			"type": "object",
+			"properties": {
+				"preview": {
+					"description": "URL to a preview image of the font.",
+					"type": "string"
+				},
+				"fontFamily": {
+					"description": "CSS font-family value.",
+					"type": "string",
+					"default": ""
+				},
+				"fontStyle": {
+					"description": "CSS font-style value.",
+					"type": "string",
+					"default": "normal"
+				},
+				"fontWeight": {
+					"description": "List of available font weights, separated by a space.",
+					"oneOf": [ { "type": "string" }, { "type": "integer" } ],
+					"default": "400"
+				},
+				"fontDisplay": {
+					"description": "CSS font-display value.",
+					"type": "string",
+					"enum": [ "auto", "block", "fallback", "swap", "optional" ],
+					"default": "fallback"
+				},
+				"src": {
+					"description": "Paths or URLs to the font files.",
+					"oneOf": [
+						{ "type": "string" },
+						{
+							"type": "array",
+							"items": {
+								"type": "string"
+							}
+						}
+					],
+					"default": []
+				},
+				"fontStretch": {
+					"description": "CSS font-stretch value.",
+					"type": "string"
+				},
+				"ascentOverride": {
+					"description": "CSS ascent-override value.",
+					"type": "string"
+				},
+				"descentOverride": {
+					"description": "CSS descent-override value.",
+					"type": "string"
+				},
+				"fontVariant": {
+					"description": "CSS font-variant value.",
+					"type": "string"
+				},
+				"fontFeatureSettings": {
+					"description": "CSS font-feature-settings value.",
+					"type": "string"
+				},
+				"fontVariationSettings": {
+					"description": "CSS font-variation-settings value.",
+					"type": "string"
+				},
+				"lineGapOverride": {
+					"description": "CSS line-gap-override value.",
+					"type": "string"
+				},
+				"sizeAdjust": {
+					"description": "CSS size-adjust value.",
+					"type": "string"
+				},
+				"unicodeRange": {
+					"description": "CSS unicode-range value.",
+					"type": "string"
+				}
+			},
+			"required": [ "fontFamily", "src" ],
+			"additionalProperties": false
+		}
+	},
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"description": "JSON schema URI for font-collection.json.",
+			"type": "string"
+		},
+		"font_families": {
+			"description": "Array of font families ready to be installed.",
+			"type": "array",
+			"items": {
+				"type": "object",
+				"properties": {
+					"font_family_settings": {
+						"description": "Font family settings, with added preview property.",
+						"type": "object",
+						"properties": {
+							"name": {
+								"description": "Name of the font family preset, translatable.",
+								"type": "string"
+							},
+							"slug": {
+								"description": "Kebab-case unique identifier for the font family preset.",
+								"type": "string"
+							},
+							"fontFamily": {
+								"description": "CSS font-family value.",
+								"type": "string"
+							},
+							"preview": {
+								"description": "URL to a preview image of the font family.",
+								"type": "string"
+							},
+							"fontFace": {
+								"description": "Array of font-face definitions.",
+								"type": "array",
+								"items": {
+									"$ref": "#/definitions/fontFace"
+								}
+							}
+						},
+						"required": [ "name", "fontFamily", "slug" ],
+						"additionalProperties": false
+					},
+					"categories": {
+						"description": "Array of category slugs.",
+						"type": "array",
+						"items": {
+							"type": "string"
+						}
+					}
+				},
+				"required": [ "font_family_settings" ],
+				"additionalProperties": false
+			}
+		}
+	},
+	"additionalProperties": false,
+	"required": [ "font_families" ]
+}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index d42706bec8df96..a1f51ace920259 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -1,32 +1,55 @@
 {
 	"title": "JSON schema for WordPress block theme global settings and styles",
-	"$schema": "http://json-schema.org/draft-04/schema#",
+	"$schema": "http://json-schema.org/draft-07/schema#",
 	"definitions": {
 		"//": {
 			"explainer": "https://developer.wordpress.org/themes/advanced-topics/theme-json/",
-			"createTheme": "https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/",
+			"createTheme": "https://developer.wordpress.org/themes/",
 			"reference": "https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/"
 		},
-		"settingsPropertiesAppearanceTools": {
+		"refComplete": {
+			"type": "object",
+			"properties": {
+				"ref": {
+					"description": "A reference to another property value. e.g. `styles.color.text`",
+					"type": "string"
+				}
+			},
+			"additionalProperties": false
+		},
+		"settingsAppearanceToolsProperties": {
 			"type": "object",
 			"properties": {
 				"appearanceTools": {
-					"description": "Setting that enables the following UI tools:\n\n- border: color, radius, style, width\n- color: link\n- spacing: blockGap, margin, padding\n- typography: lineHeight",
+					"description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight",
 					"type": "boolean",
 					"default": false
 				}
 			}
 		},
-		"settingsPropertiesUseRootPaddingAwareAlignments": {
+		"settingsBackgroundProperties": {
+			"type": "object",
 			"properties": {
-				"useRootPaddingAwareAlignments": {
-					"description": "_**Note:** Since WordPress 6.1._\n\nEnables root padding (the values from `styles.spacing.padding`) to be applied to the contents of full-width blocks instead of the root block.\n\nPlease note that when using this setting, `styles.spacing.padding` should always be set as an object with `top`, `right`, `bottom`, `left` values declared separately.",
-					"type": "boolean",
-					"default": false
+				"background": {
+					"description": "Settings related to background.",
+					"type": "object",
+					"properties": {
+						"backgroundImage": {
+							"description": "Allow users to set a background image.",
+							"type": "boolean",
+							"default": false
+						},
+						"backgroundSize": {
+							"description": "Allow users to set values related to the size of a background image, including size, position, and repeat controls.",
+							"type": "boolean",
+							"default": false
+						}
+					},
+					"additionalProperties": false
 				}
 			}
 		},
-		"settingsPropertiesBorder": {
+		"settingsBorderProperties": {
 			"type": "object",
 			"properties": {
 				"border": {
@@ -58,7 +81,7 @@
 				}
 			}
 		},
-		"settingsPropertiesColor": {
+		"settingsColorProperties": {
 			"type": "object",
 			"properties": {
 				"color": {
@@ -151,7 +174,7 @@
 							}
 						},
 						"link": {
-							"description": "Allow users to set link colors.",
+							"description": "Allow users to set link colors in a block.",
 							"type": "boolean",
 							"default": false
 						},
@@ -179,7 +202,22 @@
 							}
 						},
 						"text": {
-							"description": "Allow users to set text colors.",
+							"description": "Allow users to set text colors in a block.",
+							"type": "boolean",
+							"default": true
+						},
+						"heading": {
+							"description": "Allow users to set heading colors in a block.",
+							"type": "boolean",
+							"default": true
+						},
+						"button": {
+							"description": "Allow users to set button colors in a block.",
+							"type": "boolean",
+							"default": true
+						},
+						"caption": {
+							"description": "Allow users to set caption colors in a block.",
 							"type": "boolean",
 							"default": true
 						}
@@ -188,12 +226,44 @@
 				}
 			}
 		},
-		"settingsPropertiesDimensions": {
+		"settingsDimensionsProperties": {
+			"type": "object",
 			"properties": {
 				"dimensions": {
 					"description": "Settings related to dimensions.",
 					"type": "object",
 					"properties": {
+						"aspectRatio": {
+							"description": "Allow users to set an aspect ratio.",
+							"type": "boolean",
+							"default": false
+						},
+						"defaultAspectRatios": {
+							"description": "Allow users to choose aspect ratios from the default set of aspect ratios.",
+							"type": "boolean",
+							"default": true
+						},
+						"aspectRatios": {
+							"description": "Allow users to define aspect ratios for some blocks.",
+							"type": "array",
+							"items": {
+								"type": "object",
+								"properties": {
+									"name": {
+										"description": "Name of the aspect ratio preset.",
+										"type": "string"
+									},
+									"slug": {
+										"description": "Kebab-case unique identifier for the aspect ratio preset.",
+										"type": "string"
+									},
+									"ratio": {
+										"description": "Aspect ratio expressed as a division or decimal.",
+										"type": "string"
+									}
+								}
+							}
+						},
 						"minHeight": {
 							"description": "Allow users to set custom minimum height.",
 							"type": "boolean",
@@ -204,7 +274,7 @@
 				}
 			}
 		},
-		"settingsPropertiesLayout": {
+		"settingsLayoutProperties": {
 			"type": "object",
 			"properties": {
 				"layout": {
@@ -216,15 +286,102 @@
 							"type": "string"
 						},
 						"wideSize": {
-							"description": "Sets the max-width of wide (`.alignwide`) content.",
+							"description": "Sets the max-width of wide (`.alignwide`) content. Also used as the maximum viewport when calculating fluid font sizes",
 							"type": "string"
+						},
+						"allowEditing": {
+							"description": "Disable the layout UI controls.",
+							"type": "boolean",
+							"default": true
+						},
+						"allowCustomContentAndWideSize": {
+							"description": "Enable or disable the custom content and wide size controls.",
+							"type": "boolean",
+							"default": true
+						}
+					},
+					"additionalProperties": false
+				}
+			}
+		},
+		"settingsLightboxProperties": {
+			"type": "object",
+			"properties": {
+				"lightbox": {
+					"description": "Settings related to the lightbox.",
+					"type": "object",
+					"properties": {
+						"enabled": {
+							"description": "Defines whether the lightbox is enabled or not.",
+							"type": "boolean"
+						},
+						"allowEditing": {
+							"description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.",
+							"type": "boolean"
+						}
+					},
+					"additionalProperties": false
+				}
+			}
+		},
+		"settingsPositionProperties": {
+			"type": "object",
+			"properties": {
+				"position": {
+					"description": "Settings related to position.",
+					"type": "object",
+					"properties": {
+						"sticky": {
+							"description": "Allow users to set sticky position.",
+							"type": "boolean",
+							"default": false
+						}
+					},
+					"additionalProperties": false
+				}
+			}
+		},
+		"settingsShadowProperties": {
+			"type": "object",
+			"properties": {
+				"shadow": {
+					"description": "Settings related to shadows.",
+					"type": "object",
+					"properties": {
+						"defaultPresets": {
+							"description": "Allow users to choose shadows from the default shadow presets.",
+							"type": "boolean",
+							"default": true
+						},
+						"presets": {
+							"description": "Shadow presets for the shadow picker.\nGenerates a single custom property (`--wp--preset--shadow--{slug}`) per preset value.",
+							"type": "array",
+							"items": {
+								"type": "object",
+								"properties": {
+									"name": {
+										"description": "Name of the shadow preset, translatable.",
+										"type": "string"
+									},
+									"slug": {
+										"description": "Kebab-case unique identifier for the shadow preset.",
+										"type": "string"
+									},
+									"shadow": {
+										"description": "CSS box-shadow value",
+										"type": "string"
+									}
+								},
+								"required": [ "name", "slug", "shadow" ],
+								"additionalProperties": false
+							}
 						}
 					},
 					"additionalProperties": false
 				}
 			}
 		},
-		"settingsPropertiesSpacing": {
+		"settingsSpacingProperties": {
 			"type": "object",
 			"properties": {
 				"spacing": {
@@ -255,6 +412,7 @@
 							"items": {
 								"type": "string"
 							},
+							"minItems": 1,
 							"default": [ "px", "em", "rem", "vh", "vw", "%" ]
 						},
 						"customSpacingSize": {
@@ -262,8 +420,13 @@
 							"type": "boolean",
 							"default": true
 						},
+						"defaultSpacingSizes": {
+							"description": "Allow users to choose space sizes from the default space size presets.",
+							"type": "boolean",
+							"default": true
+						},
 						"spacingSizes": {
-							"description": "Space size presets for the space size selector.\nGenerates a custom property (`--wp--preset--space-size--{slug}`) per preset value.",
+							"description": "Space size presets for the space size selector.\nGenerates a custom property (`--wp--preset--spacing--{slug}`) per preset value.",
 							"type": "array",
 							"items": {
 								"type": "object",
@@ -273,7 +436,7 @@
 										"type": "string"
 									},
 									"slug": {
-										"description": "Unique identifier for the space size preset. For best cross theme compatibility these should be in the form '10','20','30','40','50','60', etc. with '50' representing the 'Medium' size step.",
+										"description": "Unique identifier for the space size preset. For best cross theme compatibility these should be in the form '10','20','30','40','50','60', etc. with '50' representing the 'Medium' size step. If all slugs begin with a number they will be merged with default and user slugs and sorted numerically.",
 										"type": "string"
 									},
 									"size": {
@@ -285,11 +448,11 @@
 							}
 						},
 						"spacingScale": {
-							"description": "Settings to auto-generate space size presets for the space size selector.\nGenerates a custom property (`--wp--preset--space-size--{slug}`) per preset value.",
+							"description": "Settings to auto-generate space size presets for the space size selector.\nGenerates a custom property (--wp--preset--spacing--{slug}`) per preset value.",
 							"type": "object",
 							"properties": {
 								"operator": {
-									"description": "With + or * depending on whether scale is generated by increment or mulitplier.",
+									"description": "With + or * depending on whether scale is generated by increment or multiplier.",
 									"type": "string",
 									"enum": [ "+", "*" ],
 									"default": "*"
@@ -297,16 +460,20 @@
 								"increment": {
 									"description": "The amount to increment each step by.",
 									"type": "number",
+									"exclusiveMinimum": 0,
 									"default": 1.5
 								},
 								"steps": {
 									"description": "Number of steps to generate in scale.",
 									"type": "integer",
+									"minimum": 1,
+									"maximum": 10,
 									"default": 7
 								},
 								"mediumStep": {
 									"description": "The value to medium setting in the scale.",
 									"type": "number",
+									"exclusiveMinimum": 0,
 									"default": 1.5
 								},
 								"unit": {
@@ -316,9 +483,31 @@
 										"px",
 										"em",
 										"rem",
-										"vh",
+										"%",
 										"vw",
-										"%"
+										"svw",
+										"lvw",
+										"dvw",
+										"vh",
+										"svh",
+										"lvh",
+										"dvh",
+										"vi",
+										"svi",
+										"lvi",
+										"dvi",
+										"vb",
+										"svb",
+										"lvb",
+										"dvb",
+										"vmin",
+										"svmin",
+										"lvmin",
+										"dvmin",
+										"vmax",
+										"svmax",
+										"lvmax",
+										"dvmax"
 									],
 									"default": "rem"
 								}
@@ -330,13 +519,18 @@
 				}
 			}
 		},
-		"settingsPropertiesTypography": {
+		"settingsTypographyProperties": {
 			"type": "object",
 			"properties": {
 				"typography": {
 					"description": "Settings related to typography.",
 					"type": "object",
 					"properties": {
+						"defaultFontSizes": {
+							"description": "Allow users to choose font sizes from the default font size presets.",
+							"type": "boolean",
+							"default": true
+						},
 						"customFontSize": {
 							"description": "Allow users to set custom font sizes.",
 							"type": "boolean",
@@ -353,8 +547,31 @@
 							"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, at a minimum, this value.",
+											"type": "string"
+										},
+										"maxViewportWidth": {
+											"description": "Allow users to set custom a max viewport width in px, rem or em, used to set the maximum size boundary of a fluid font size.",
+											"type": "string"
+										},
+										"minViewportWidth": {
+											"description": "Allow users to set a custom min viewport width in px, rem or em, used to set the minimum size boundary of a fluid font size.",
+											"type": "string"
+										}
+									},
+									"additionalProperties": false
+								},
+								{
+									"type": "boolean"
+								}
+							],
+							"default": false
 						},
 						"letterSpacing": {
 							"description": "Allow users to set custom letter spacing.",
@@ -366,11 +583,26 @@
 							"type": "boolean",
 							"default": false
 						},
+						"textAlign": {
+							"description": "Allow users to set the text align.",
+							"type": "boolean",
+							"default": true
+						},
+						"textColumns": {
+							"description": "Allow users to set the number of text columns.",
+							"type": "boolean",
+							"default": false
+						},
 						"textDecoration": {
 							"description": "Allow users to set custom text decorations.",
 							"type": "boolean",
 							"default": true
 						},
+						"writingMode": {
+							"description": "Allow users to set the writing mode.",
+							"type": "boolean",
+							"default": false
+						},
 						"textTransform": {
 							"description": "Allow users to set custom text transforms.",
 							"type": "boolean",
@@ -400,7 +632,7 @@
 										"type": "string"
 									},
 									"fluid": {
-										"description": "Specifics the minimum and maximum font size value of a fluid font size. Set to `false` to bypass fluid calculations and use the static `size` value.",
+										"description": "Specifies the minimum and maximum font size value of a fluid font size. Set to `false` to bypass fluid calculations and use the static `size` value.",
 										"oneOf": [
 											{
 												"type": "object",
@@ -429,6 +661,7 @@
 							"description": "Font family presets for the font family selector.\nGenerates a single custom property (`--wp--preset--font-family--{slug}`) per preset value.",
 							"type": "array",
 							"items": {
+								"description": "Font family preset",
 								"type": "object",
 								"properties": {
 									"name": {
@@ -461,7 +694,6 @@
 												},
 												"fontWeight": {
 													"description": "List of available font weights, separated by a space.",
-													"default": "400",
 													"oneOf": [
 														{
 															"type": "string"
@@ -469,19 +701,20 @@
 														{
 															"type": "integer"
 														}
-													]
+													],
+													"default": "400"
 												},
 												"fontDisplay": {
 													"description": "CSS font-display value.",
 													"type": "string",
-													"default": "fallback",
 													"enum": [
 														"auto",
 														"block",
 														"fallback",
 														"swap",
 														"optional"
-													]
+													],
+													"default": "fallback"
 												},
 												"src": {
 													"description": "Paths or URLs to the font files.",
@@ -548,53 +781,65 @@
 				}
 			}
 		},
-		"settingsPropertiesCustom": {
+		"settingsCustomProperties": {
 			"type": "object",
 			"properties": {
 				"custom": {
-					"description": "Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.",
 					"$ref": "#/definitions/settingsCustomAdditionalProperties"
 				}
 			}
 		},
 		"settingsProperties": {
 			"allOf": [
-				{ "$ref": "#/definitions/settingsPropertiesAppearanceTools" },
-				{ "$ref": "#/definitions/settingsPropertiesBorder" },
-				{ "$ref": "#/definitions/settingsPropertiesColor" },
-				{ "$ref": "#/definitions/settingsPropertiesLayout" },
-				{ "$ref": "#/definitions/settingsPropertiesSpacing" },
-				{ "$ref": "#/definitions/settingsPropertiesTypography" },
-				{ "$ref": "#/definitions/settingsPropertiesCustom" }
+				{ "$ref": "#/definitions/settingsAppearanceToolsProperties" },
+				{ "$ref": "#/definitions/settingsBackgroundProperties" },
+				{ "$ref": "#/definitions/settingsBorderProperties" },
+				{ "$ref": "#/definitions/settingsColorProperties" },
+				{ "$ref": "#/definitions/settingsDimensionsProperties" },
+				{ "$ref": "#/definitions/settingsLayoutProperties" },
+				{ "$ref": "#/definitions/settingsLightboxProperties" },
+				{ "$ref": "#/definitions/settingsPositionProperties" },
+				{ "$ref": "#/definitions/settingsShadowProperties" },
+				{ "$ref": "#/definitions/settingsSpacingProperties" },
+				{ "$ref": "#/definitions/settingsTypographyProperties" },
+				{ "$ref": "#/definitions/settingsCustomProperties" }
+			]
+		},
+		"settingsPropertyNames": {
+			"enum": [
+				"appearanceTools",
+				"background",
+				"border",
+				"color",
+				"dimensions",
+				"layout",
+				"lightbox",
+				"position",
+				"shadow",
+				"spacing",
+				"typography",
+				"custom"
 			]
 		},
 		"settingsPropertiesComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/settingsProperties"
 				},
 				{
-					"properties": {
-						"appearanceTools": {},
-						"border": {},
-						"color": {},
-						"layout": {},
-						"spacing": {},
-						"typography": {},
-						"custom": {}
-					},
-					"additionalProperties": false
+					"type": "object",
+					"propertyNames": {
+						"$ref": "#/definitions/settingsPropertyNames"
+					}
 				}
 			]
 		},
 		"settingsBlocksPropertiesComplete": {
+			"description": "Settings defined on a per-block basis.",
 			"type": "object",
 			"properties": {
 				"core/archives": {
-					"type": "object",
-					"description": "Archive block. Display a monthly archive of your posts. This block has no block-level settings",
-					"additionalProperties": false
+					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/audio": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
@@ -606,35 +851,7 @@
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/button": {
-					"type": "object",
-					"allOf": [
-						{
-							"$ref": "#/definitions/settingsPropertiesAppearanceTools"
-						},
-						{
-							"type": "object",
-							"properties": {
-								"border": {
-									"description": "Settings related to borders.\nGutenberg plugin required.",
-									"type": "object",
-									"properties": {
-										"radius": {
-											"description": "Allow users to set custom border radius.\nGutenberg plugin required.",
-											"type": "boolean",
-											"default": false
-										}
-									}
-								}
-							}
-						},
-						{ "$ref": "#/definitions/settingsPropertiesColor" },
-						{ "$ref": "#/definitions/settingsPropertiesLayout" },
-						{ "$ref": "#/definitions/settingsPropertiesSpacing" },
-						{
-							"$ref": "#/definitions/settingsPropertiesTypography"
-						},
-						{ "$ref": "#/definitions/settingsPropertiesCustom" }
-					]
+					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/buttons": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
@@ -654,6 +871,9 @@
 				"core/columns": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/comment-author-avatar": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/comment-author-name": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -669,15 +889,33 @@
 				"core/comment-reply-link": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
-				"core/comment-template": {
+				"core/comments": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
-				"core/comments": {
+				"core/comments-pagination": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/comments-pagination-next": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/comments-pagination-numbers": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/comments-pagination-previous": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/comments-title": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/comment-template": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/cover": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/details": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/embed": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -714,6 +952,9 @@
 				"core/list": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/list-item": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/loginout": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -732,19 +973,31 @@
 				"core/navigation-link": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/navigation-submenu": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/nextpage": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/page-list": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/page-list-item": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/paragraph": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/post-author": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
-				"core/post-comments": {
+				"core/post-author-biography": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/post-author-name": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
+				"core/post-comment": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
 				"core/post-comments-count": {
@@ -777,6 +1030,9 @@
 				"core/post-terms": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/post-time-to-read": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/post-title": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -789,6 +1045,9 @@
 				"core/query": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/query-no-results": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/query-pagination": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -807,6 +1066,9 @@
 				"core/quote": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
+				"core/read-more": {
+					"$ref": "#/definitions/settingsPropertiesComplete"
+				},
 				"core/rss": {
 					"$ref": "#/definitions/settingsPropertiesComplete"
 				},
@@ -879,6 +1141,7 @@
 			"additionalProperties": false
 		},
 		"settingsCustomAdditionalProperties": {
+			"description": "Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.",
 			"type": "object",
 			"additionalProperties": {
 				"oneOf": [
@@ -897,38 +1160,112 @@
 		"stylesProperties": {
 			"type": "object",
 			"properties": {
+				"background": {
+					"description": "Background styles.",
+					"type": "object",
+					"properties": {
+						"backgroundImage": {
+							"description": "Sets the `background-image` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" },
+								{
+									"type": "object",
+									"properties": {
+										"url": {
+											"description": "A URL to an image file, or a path to a file relative to the theme root directory, and prefixed with `file:`, e.g., 'file:./path/to/file.png'.",
+											"type": "string"
+										}
+									},
+									"additionalProperties": false
+								}
+							]
+						},
+						"backgroundPosition": {
+							"description": "Sets the `background-position` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"backgroundRepeat": {
+							"description": "Sets the `background-repeat` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"backgroundSize": {
+							"description": "Sets the `background-size` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"backgroundAttachment": {
+							"description": "Sets the `background-attachment` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						}
+					},
+					"additionalProperties": false
+				},
 				"border": {
 					"description": "Border styles.",
 					"type": "object",
 					"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.",
 							"anyOf": [
-								{
-									"type": "string"
-								},
+								{ "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"
+												}
+											]
 										}
 									}
 								}
@@ -936,26 +1273,41 @@
 						},
 						"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
@@ -965,15 +1317,24 @@
 							"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
@@ -983,15 +1344,24 @@
 							"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
@@ -1001,15 +1371,24 @@
 							"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
@@ -1023,26 +1402,118 @@
 					"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
+				},
+				"css": {
+					"description": "Sets custom CSS to apply styling not covered by other theme.json properties.",
+					"type": "string"
+				},
+				"dimensions": {
+					"description": "Dimensions styles.",
+					"type": "object",
+					"properties": {
+						"aspectRatio": {
+							"description": "Sets the `aspect-ratio` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"minHeight": {
+							"description": "Sets the `min-height` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						}
+					}
+				},
+				"filter": {
+					"description": "CSS and SVG filter styles.",
+					"type": "object",
+					"properties": {
+						"duotone": {
+							"description": "Sets the duotone filter.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						}
+					},
+					"additionalProperties": false
+				},
+				"outline": {
+					"description": "Outline styles.",
+					"type": "object",
+					"properties": {
+						"color": {
+							"description": "Sets the `outline-color` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"offset": {
+							"description": "Sets the `outline-offset` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"style": {
+							"description": "Sets the `outline-style` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"width": {
+							"description": "Sets the `outline-width` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						}
 					},
 					"additionalProperties": false
 				},
+				"shadow": {
+					"description": "Box shadow styles.",
+					"oneOf": [
+						{ "type": "string" },
+						{ "$ref": "#/definitions/refComplete" }
+					]
+				},
 				"spacing": {
 					"description": "Spacing styles.",
 					"type": "object",
 					"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.",
@@ -1050,19 +1521,31 @@
 							"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
@@ -1073,19 +1556,31 @@
 							"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
@@ -1099,160 +1594,193 @@
 					"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" }
+							]
+						},
+						"textAlign": {
+							"description": "Sets the `text-align` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"textColumns": {
+							"description": "Sets the `column-count` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						},
 						"textDecoration": {
 							"description": "Sets the `text-decoration` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
+						},
+						"writingMode": {
+							"description": "Sets the `writing-mode` CSS property.",
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						},
 						"textTransform": {
 							"description": "Sets the `text-transform` CSS property.",
-							"type": "string"
-						}
-					},
-					"additionalProperties": false
-				},
-				"filter": {
-					"description": "CSS and SVG filter styles.",
-					"type": "object",
-					"properties": {
-						"duotone": {
-							"description": "Sets the duotone filter.",
-							"type": "string"
-						}
-					},
-					"additionalProperties": false
-				},
-				"shadow": {
-					"description": "Box shadow styles.",
-					"type": "string"
-				},
-				"outline": {
-					"description": "Outline styles.",
-					"type": "object",
-					"properties": {
-						"color": {
-							"description": "Sets the `outline-color` CSS property.",
-							"type": "string"
-						},
-						"offset": {
-							"description": "Sets the `outline-offset` CSS property.",
-							"type": "string"
-						},
-						"style": {
-							"description": "Sets the `outline-style` CSS property.",
-							"type": "string"
-						},
-						"width": {
-							"description": "Sets the `outline-width` CSS property.",
-							"type": "string"
+							"oneOf": [
+								{ "type": "string" },
+								{ "$ref": "#/definitions/refComplete" }
+							]
 						}
 					},
 					"additionalProperties": false
 				}
 			}
 		},
+		"stylesPropertyNames": {
+			"enum": [
+				"background",
+				"border",
+				"color",
+				"css",
+				"dimensions",
+				"filter",
+				"outline",
+				"shadow",
+				"spacing",
+				"typography"
+			]
+		},
 		"stylesPropertiesComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
-					"properties": {
-						"border": {},
-						"color": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {}
-					},
-					"additionalProperties": false
+					"type": "object",
+					"propertyNames": {
+						"$ref": "#/definitions/stylesPropertyNames"
+					}
+				}
+			]
+		},
+		"stylesElementsPseudoSelectorsProperties": {
+			"type": "object",
+			"properties": {
+				":active": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				":any-link": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				":focus": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				":hover": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				":link": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
+				},
+				":visited": {
+					"$ref": "#/definitions/stylesPropertiesComplete"
 				}
+			}
+		},
+		"stylesElementsPseudoSelectorsPropertyNames": {
+			"enum": [
+				":active",
+				":any-link",
+				":focus",
+				":hover",
+				":link",
+				":visited"
 			]
 		},
 		"stylesElementsPropertiesComplete": {
+			"description": "Styles defined on a per-element basis using the element's selector.",
 			"type": "object",
 			"properties": {
 				"button": {
-					"type": "object",
 					"allOf": [
 						{
 							"$ref": "#/definitions/stylesProperties"
 						},
 						{
-							"properties": {
-								"border": {},
-								"color": {},
-								"filter": {},
-								"shadow": {},
-								"outline": {},
-								"spacing": {},
-								"typography": {},
-								":hover": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":focus": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":active": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":visited": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								}
-							},
-							"additionalProperties": false
+							"$ref": "#/definitions/stylesElementsPseudoSelectorsProperties"
+						},
+						{
+							"type": "object",
+							"propertyNames": {
+								"anyOf": [
+									{
+										"$ref": "#/definitions/stylesPropertyNames"
+									},
+									{
+										"$ref": "#/definitions/stylesElementsPseudoSelectorsPropertyNames"
+									}
+								]
+							}
 						}
 					]
 				},
 				"link": {
-					"type": "object",
 					"allOf": [
 						{
 							"$ref": "#/definitions/stylesProperties"
 						},
 						{
-							"properties": {
-								"border": {},
-								"color": {},
-								"spacing": {},
-								"typography": {},
-								":hover": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":focus": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":active": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								},
-								":visited": {
-									"$ref": "#/definitions/stylesPropertiesComplete"
-								}
-							},
-							"additionalProperties": false
+							"$ref": "#/definitions/stylesElementsPseudoSelectorsProperties"
+						},
+						{
+							"type": "object",
+							"propertyNames": {
+								"anyOf": [
+									{
+										"$ref": "#/definitions/stylesPropertyNames"
+									},
+									{
+										"$ref": "#/definitions/stylesElementsPseudoSelectorsPropertyNames"
+									}
+								]
+							}
 						}
 					]
 				},
@@ -1287,6 +1815,7 @@
 			"additionalProperties": false
 		},
 		"stylesBlocksPropertiesComplete": {
+			"description": "Styles defined on a per-block basis using the block's selector.",
 			"type": "object",
 			"properties": {
 				"core/archives": {
@@ -1322,6 +1851,9 @@
 				"core/columns": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/comment-author-avatar": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/comment-author-name": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1337,15 +1869,33 @@
 				"core/comment-reply-link": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
-				"core/comment-template": {
+				"core/comments": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
-				"core/comments": {
+				"core/comments-pagination": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/comments-pagination-next": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/comments-pagination-numbers": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/comments-pagination-previous": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/comments-title": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/comment-template": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
 				"core/cover": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/details": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/embed": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1382,6 +1932,9 @@
 				"core/list": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/list-item": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/loginout": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1400,19 +1953,31 @@
 				"core/navigation-link": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/navigation-submenu": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/nextpage": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
 				"core/page-list": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/page-list-item": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/paragraph": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
 				"core/post-author": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
-				"core/post-comments": {
+				"core/post-author-biography": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/post-author-name": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
+				"core/post-comment": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
 				"core/post-comments-count": {
@@ -1445,6 +2010,9 @@
 				"core/post-terms": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/post-time-to-read": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/post-title": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1457,6 +2025,9 @@
 				"core/query": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/query-no-results": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/query-pagination": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1475,6 +2046,9 @@
 				"core/quote": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
+				"core/read-more": {
+					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
+				},
 				"core/rss": {
 					"$ref": "#/definitions/stylesPropertiesAndElementsComplete"
 				},
@@ -1547,98 +2121,547 @@
 			"additionalProperties": false
 		},
 		"stylesPropertiesAndElementsComplete": {
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"border": {},
-						"color": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
 						"elements": {
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"variations": {
+							"$ref": "#/definitions/stylesVariationsPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "variations" ]
+							}
+						]
+					}
 				}
 			]
-		}
-	},
-	"type": "object",
-	"properties": {
-		"$schema": {
-			"description": "JSON schema URI for theme.json.",
-			"type": "string"
-		},
-		"version": {
-			"description": "Version of theme.json to use.",
-			"type": "integer",
-			"enum": [ 2 ]
-		},
-		"title": {
-			"type": "string",
-			"description": "Title of the global styles variation. If not defined, the file name will be used."
 		},
-		"settings": {
-			"description": "Settings for the block editor and individual blocks. These include things like:\n- Which customization options should be available to the user. \n- The default colors, font sizes... available to the user. \n- CSS custom properties and class names used in styles.\n- And the default layout of the editor (widths and available alignments).",
+		"stylesVariationsProperties": {
 			"type": "object",
-			"allOf": [
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesVariationProperties"
+				}
+			}
+		},
+		"stylesVariationProperties": {
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"type": "object",
+					"properties": {
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"blocks": {
+							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
+						}
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "blocks" ]
+							}
+						]
+					}
+				}
+			]
+		},
+		"stylesVariationsPropertiesComplete": {
+			"type": "object",
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesVariationPropertiesComplete"
+				}
+			}
+		},
+		"stylesVariationPropertiesComplete": {
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"type": "object",
+					"properties": {
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						},
+						"blocks": {
+							"$ref": "#/definitions/stylesVariationBlocksPropertiesComplete"
+						}
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "blocks" ]
+							}
+						]
+					}
+				}
+			]
+		},
+		"stylesVariationBlocksPropertiesComplete": {
+			"type": "object",
+			"properties": {
+				"core/archives": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/audio": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/avatar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/block": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/button": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/buttons": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/calendar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/categories": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/code": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/column": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/columns": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-author-avatar": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-author-name": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-content": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-date": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-edit-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-reply-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-next": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-numbers": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-pagination-previous": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comments-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/comment-template": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/cover": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/details": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/embed": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/file": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/freeform": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/gallery": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/group": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/heading": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/home-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/html": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/image": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/latest-comments": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/latest-posts": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/list": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/list-item": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/loginout": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/media-text": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/missing": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/more": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/navigation-submenu": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/nextpage": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/page-list": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/page-list-item": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/paragraph": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author-biography": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-author-name": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comment": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-count": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-form": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-comments-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-content": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-date": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-excerpt": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-featured-image": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-navigation-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-template": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-terms": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-time-to-read": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/post-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/preformatted": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/pullquote": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-no-results": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-next": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-numbers": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-pagination-previous": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/query-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/quote": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/read-more": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/rss": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/search": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/separator": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/shortcode": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-logo": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-tagline": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/site-title": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/social-link": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/social-links": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/spacer": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/table": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/table-of-contents": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/tag-cloud": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/template-part": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/term-description": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/text-columns": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/verse": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/video": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/widget-area": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/legacy-widget": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				},
+				"core/widget-group": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				}
+			},
+			"patternProperties": {
+				"^[a-z][a-z0-9-]*/[a-z][a-z0-9-]*$": {
+					"$ref": "#/definitions/stylesVariationBlockPropertiesComplete"
+				}
+			},
+			"additionalProperties": false
+		},
+		"stylesVariationBlockPropertiesComplete": {
+			"allOf": [
+				{
+					"$ref": "#/definitions/stylesProperties"
+				},
+				{
+					"type": "object",
+					"properties": {
+						"elements": {
+							"$ref": "#/definitions/stylesElementsPropertiesComplete"
+						}
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements" ]
+							}
+						]
+					}
+				}
+			]
+		}
+	},
+	"type": "object",
+	"properties": {
+		"$schema": {
+			"description": "JSON schema URI for theme.json.",
+			"type": "string"
+		},
+		"version": {
+			"description": "Version of theme.json to use.",
+			"type": "integer",
+			"const": 3
+		},
+		"title": {
+			"description": "Title of the global styles variation. If not defined, the file name will be used.",
+			"type": "string"
+		},
+		"slug": {
+			"description": "Slug of the global styles variation. If not defined, the kebab-case title will be used.",
+			"type": "string"
+		},
+		"description": {
+			"description": "Description of the global styles variation.",
+			"type": "string"
+		},
+		"blockTypes": {
+			"description": "List of block types that can use the block style variation this theme.json file represents.",
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"settings": {
+			"description": "Settings for the block editor and individual blocks. These include things like:\n- Which customization options should be available to the user. \n- The default colors, font sizes... available to the user. \n- CSS custom properties and class names used in styles.\n- And the default layout of the editor (widths and available alignments).",
+			"allOf": [
 				{
 					"$ref": "#/definitions/settingsProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"appearanceTools": {},
 						"useRootPaddingAwareAlignments": {
-							"$ref": "#/definitions/settingsPropertiesUseRootPaddingAwareAlignments/properties/useRootPaddingAwareAlignments"
-						},
-						"color": {},
-						"layout": {},
-						"spacing": {},
-						"typography": {},
-						"border": {},
-						"custom": {},
+							"description": "Enables root padding (the values from `styles.spacing.padding`) to be applied to the contents of full-width blocks instead of the root block.\n\nPlease note that when using this setting, `styles.spacing.padding` should always be set as an object with `top`, `right`, `bottom`, `left` values declared separately.",
+							"type": "boolean",
+							"default": false
+						},
 						"blocks": {
-							"description": "Settings defined on a per-block basis.",
 							"$ref": "#/definitions/settingsBlocksPropertiesComplete"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/settingsPropertyNames"
+							},
+							{
+								"enum": [
+									"useRootPaddingAwareAlignments",
+									"blocks"
+								]
+							}
+						]
+					}
 				}
 			]
 		},
 		"styles": {
 			"description": "Organized way to set CSS properties. Styles in the top-level will be added in the `body` selector.",
-			"type": "object",
 			"allOf": [
 				{
 					"$ref": "#/definitions/stylesProperties"
 				},
 				{
+					"type": "object",
 					"properties": {
-						"border": {},
-						"color": {},
-						"spacing": {},
-						"typography": {},
-						"filter": {},
-						"shadow": {},
-						"outline": {},
 						"elements": {
-							"description": "Styles defined on a per-element basis using the element's selector.",
 							"$ref": "#/definitions/stylesElementsPropertiesComplete"
 						},
 						"blocks": {
-							"description": "Styles defined on a per-block basis using the block's selector.",
 							"$ref": "#/definitions/stylesBlocksPropertiesComplete"
+						},
+						"variations": {
+							"$ref": "#/definitions/stylesVariationsProperties"
 						}
-					},
-					"additionalProperties": false
+					}
+				},
+				{
+					"type": "object",
+					"propertyNames": {
+						"anyOf": [
+							{
+								"$ref": "#/definitions/stylesPropertyNames"
+							},
+							{
+								"enum": [ "elements", "blocks", "variations" ]
+							}
+						]
+					}
 				}
 			]
 		},
diff --git a/schemas/json/wp-env.json b/schemas/json/wp-env.json
new file mode 100644
index 00000000000000..491d1f8cf73017
--- /dev/null
+++ b/schemas/json/wp-env.json
@@ -0,0 +1,124 @@
+{
+	"title": "JSON schema for WordPress wp-env configuration files",
+	"$schema": "http://json-schema.org/draft-07/schema#",
+	"definitions": {
+		"//": {
+			"reference": "https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/"
+		},
+		"wpEnvProperties": {
+			"type": "object",
+			"properties": {
+				"core": {
+					"description": "The WordPress installation to use. If null is specified, wp-env will use the latest production release of WordPress.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "null"
+						}
+					],
+					"default": null
+				},
+				"phpVersion": {
+					"description": "The PHP version to use. If null is specified, wp-env will use the default version used with production release of WordPress.",
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "null"
+						}
+					],
+					"default": null
+				},
+				"plugins": {
+					"description": "A list of plugins to install and activate in the environment.",
+					"type": "array",
+					"items": {
+						"type": "string"
+					},
+					"default": []
+				},
+				"themes": {
+					"description": "A list of themes to install in the environment.",
+					"type": "array",
+					"items": {
+						"type": "string"
+					},
+					"default": []
+				},
+				"port": {
+					"description": "The primary port number to use for the installation. You'll access the instance through the port: 'http://localhost:8888'.",
+					"type": "integer",
+					"default": 8888
+				},
+				"config": {
+					"description": "Mapping of wp-config.php constants to their desired values.",
+					"type": "object",
+					"default": {}
+				},
+				"mappings": {
+					"description": "Mapping of WordPress directories to local directories to be mounted in the WordPress instance.",
+					"type": "object",
+					"default": {}
+				}
+			}
+		},
+		"wpEnvPropertyNames": {
+			"enum": [
+				"core",
+				"phpVersion",
+				"plugins",
+				"themes",
+				"port",
+				"config",
+				"mappings"
+			]
+		}
+	},
+	"allOf": [
+		{
+			"$ref": "#/definitions/wpEnvProperties"
+		},
+		{
+			"type": "object",
+			"properties": {
+				"$schema": {
+					"type": "string"
+				},
+				"env": {
+					"description": "The key env is available to override any of the above options on an individual-environment basis.",
+					"type": "object",
+					"patternProperties": {
+						"[a-zA-Z]": {
+							"allOf": [
+								{ "$ref": "#/definitions/wpEnvProperties" },
+								{
+									"type": "object",
+									"propertyNames": {
+										"$ref": "#/definitions/wpEnvPropertyNames"
+									}
+								}
+							]
+						}
+					},
+					"default": {}
+				}
+			}
+		},
+		{
+			"type": "object",
+			"propertyNames": {
+				"anyOf": [
+					{
+						"$ref": "#/definitions/wpEnvPropertyNames"
+					},
+					{
+						"enum": [ "$schema", "env" ]
+					}
+				]
+			}
+		}
+	]
+}
diff --git a/storybook/badges.js b/storybook/badges.js
new file mode 100644
index 00000000000000..abde7948c923a7
--- /dev/null
+++ b/storybook/badges.js
@@ -0,0 +1,36 @@
+/**
+ * Provides badge configuration options.
+ *
+ * To apply a badge to a story, add a badge identifier prefixed by "status-" to
+ * the `tags` array in the story's metadata. For example, to apply the "private"
+ * badge, add "status-private" to the `tags` array.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see './webpack/copy-tags-to-badges.js' - Webpack loader that processes the tags
+ */
+
+export default {
+	private: {
+		icon: '🔒',
+		title: '🔒 Private',
+		tooltip: {
+			title: 'Component is locked as a private API',
+			desc: 'We do not yet recommend using this outside of the Gutenberg codebase.',
+			links: [
+				{
+					title: 'About @wordpress/private-apis',
+					href: 'https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/',
+				},
+			],
+		},
+	},
+	wip: {
+		icon: '🚧',
+		title: '🚧 WIP',
+		styles: { backgroundColor: '#FFF0BD' },
+		tooltip: {
+			title: 'Component is a work in progress',
+			desc: 'This component is not ready for use in production, including the Gutenberg codebase. DO NOT export outside of @wordpress/components.',
+		},
+	},
+};
diff --git a/storybook/decorators/with-global-css.js b/storybook/decorators/with-global-css.js
index 680f3359e0aadc..d3d283234be1e5 100644
--- a/storybook/decorators/with-global-css.js
+++ b/storybook/decorators/with-global-css.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,11 @@ import { useEffect } from '@wordpress/element';
 import basicStyles from '../global-basic.lazy.scss';
 import wordPressStyles from '../global-wordpress.lazy.scss';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * A Storybook decorator to inject global CSS.
  *
@@ -59,7 +59,7 @@ export const WithGlobalCSS = ( Story, context ) => {
 	}, [ context.globals.css ] );
 
 	return (
-		<div className={ classnames( classes ) }>
+		<div className={ clsx( classes ) }>
 			{ externalStyles.map( ( stylesheet ) => (
 				<link key={ stylesheet } rel="stylesheet" href={ stylesheet } />
 			) ) }
diff --git a/storybook/decorators/with-rtl.js b/storybook/decorators/with-rtl.js
index 2a2a8cb8f0da53..3eab5a7c39e230 100644
--- a/storybook/decorators/with-rtl.js
+++ b/storybook/decorators/with-rtl.js
@@ -12,8 +12,7 @@ import {
 /**
  * Internal dependencies
  */
-import ltrStyles from '../style-ltr.lazy.scss';
-import rtlStyles from '../style-rtl.lazy.scss';
+import CONFIG from '../package-styles/config';
 
 export const WithRTL = ( Story, context ) => {
 	const [ rerenderKey, setRerenderKey ] = useState( 0 );
@@ -43,17 +42,20 @@ export const WithRTL = ( Story, context ) => {
 	}, [ context.globals.direction ] );
 
 	useLayoutEffect( () => {
-		if ( context.globals.direction === 'rtl' ) {
-			rtlStyles.use();
-		} else {
-			ltrStyles.use();
-		}
+		const stylesToUse = [];
+
+		CONFIG.forEach( ( item ) => {
+			if ( item.componentIdMatcher.test( context.componentId ) ) {
+				stylesToUse.push( ...item[ context.globals.direction ] );
+			}
+		} );
+
+		stylesToUse.forEach( ( style ) => style.use() );
 
 		return () => {
-			ltrStyles.unuse();
-			rtlStyles.unuse();
+			stylesToUse.forEach( ( style ) => style.unuse() );
 		};
-	}, [ context.globals.direction ] );
+	}, [ context.componentId, context.globals.direction ] );
 
 	return (
 		<div ref={ ref } key={ rerenderKey }>
diff --git a/storybook/decorators/with-theme.js b/storybook/decorators/with-theme.js
index 4c0696f7bfe721..083d929a5865a4 100644
--- a/storybook/decorators/with-theme.js
+++ b/storybook/decorators/with-theme.js
@@ -1,28 +1,93 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
 import Theme from '../../packages/components/src/theme';
 
+const themes = {
+	default: {},
+	darkBg: {
+		accent: '#f7c849',
+		background: '#1e1e1e',
+	},
+	lightGrayBg: {
+		accent: '#3858e9',
+		background: '#f0f0f0',
+	},
+	classic: {
+		accent: '#007cba',
+	},
+};
+
+const backgroundStyles = ( { background } ) => {
+	if ( background ) {
+		return css`
+			background: ${ background };
+			padding: 20px 20px 8px;
+			outline: 1px dashed #ccc;
+			outline-offset: 2px;
+		`;
+	}
+};
+
+const BackgroundColorWrapper = styled.div`
+	${ backgroundStyles }
+`;
+
+const BackgroundIndicator = styled.small`
+	display: block;
+	opacity: 0.3;
+	margin-top: 20px;
+	font-size: 10px;
+	color: var( --wp-components-color-foreground );
+	text-transform: uppercase;
+	text-align: end;
+`;
+
+const Notice = styled.small`
+	display: block;
+	margin-top: 20px;
+	font-size: 12px;
+	color: var( --wp-components-color-foreground );
+`;
+
 /**
  *  A Storybook decorator to show a div before and after the story to check for unwanted margins.
  */
 
 export const WithTheme = ( Story, context ) => {
-	const themes = {
-		default: {},
-		modern: {
-			accent: '#3858e9',
-		},
-		sunrise: {
-			// This color was chosen intentionally, because for sufficient contrast,
-			// the foreground text should be black when this orange is used as a background color.
-			accent: '#dd823b',
-		},
-	};
+	const selectedTheme = themes[ context.globals.componentsTheme ];
+	const selectedBackground = selectedTheme.background;
+
+	if ( context.componentId === 'components-experimental-theme' ) {
+		return (
+			<>
+				<Story />
+				{ context.globals.componentsTheme !== 'default' && (
+					<Notice>
+						The Theme toolbar addon is disabled for this story. Use
+						Controls to change the values.
+					</Notice>
+				) }
+			</>
+		);
+	}
 
 	return (
-		<Theme { ...themes[ context.globals.componentsTheme ] }>
-			<Story { ...context } />
-		</Theme>
+		<BackgroundColorWrapper background={ selectedBackground }>
+			<Theme { ...themes[ context.globals.componentsTheme ] }>
+				<Story { ...context } />
+				{ selectedBackground && (
+					<BackgroundIndicator>
+						Themed background { selectedBackground }
+					</BackgroundIndicator>
+				) }
+			</Theme>
+		</BackgroundColorWrapper>
 	);
 };
diff --git a/storybook/main.js b/storybook/main.js
index 29880d64557001..66aed2f00a2fb9 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -1,50 +1,117 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const DefinePlugin = require( 'webpack' ).DefinePlugin;
+
+/**
+ * WordPress dependencies
+ */
+const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
+
+const scssLoaders = ( { isLazy } ) => [
+	{
+		loader: 'style-loader',
+		options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
+	},
+	'css-loader',
+	{
+		loader: 'postcss-loader',
+		options: {
+			postcssOptions: {
+				ident: 'postcss',
+				plugins: postcssPlugins,
+			},
+		},
+	},
+	'sass-loader',
+];
+
 const stories = [
-	process.env.NODE_ENV !== 'test' && './stories/**/*.@(js|tsx|mdx)',
-	'../packages/block-editor/src/**/stories/*.@(js|tsx|mdx)',
-	'../packages/components/src/**/stories/*.@(js|tsx|mdx)',
-	'../packages/icons/src/**/stories/*.@(js|tsx|mdx)',
+	process.env.NODE_ENV !== 'test' && './stories/**/*.story.@(js|tsx)',
+	process.env.NODE_ENV !== 'test' && './stories/**/*.mdx',
+	'../packages/block-editor/src/**/stories/*.story.@(js|tsx|mdx)',
+	'../packages/components/src/**/stories/*.story.@(js|tsx|mdx)',
+	'../packages/icons/src/**/stories/*.story.@(js|tsx|mdx)',
+	'../packages/edit-site/src/**/stories/*.story.@(js|tsx|mdx)',
+	'../packages/dataviews/src/**/stories/*.story.@(js|tsx|mdx)',
 ].filter( Boolean );
 
-const customEnvVariables = {};
-
 module.exports = {
 	core: {
-		builder: 'webpack5',
+		disableTelemetry: true,
 	},
 	stories,
+	staticDirs: [ './static' ],
 	addons: [
 		{
 			name: '@storybook/addon-docs',
 			options: { configureJSX: true },
 		},
 		'@storybook/addon-controls',
-		'@storybook/addon-knobs', // Deprecated, new stories should use addon-controls.
 		'@storybook/addon-viewport',
 		'@storybook/addon-a11y',
 		'@storybook/addon-toolbars',
 		'@storybook/addon-actions',
 		'storybook-source-link',
+		'@geometricpanda/storybook-addon-badges',
 	],
-	framework: '@storybook/react',
-	features: {
-		babelModeV7: true,
-		emotionAlias: false,
-		storyStoreV7: true,
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {},
+	},
+	docs: {
+		autodocs: true,
 	},
-	// Workaround:
-	// https://github.com/storybookjs/storybook/issues/12270
 	webpackFinal: async ( config ) => {
-		// Find the DefinePlugin.
-		const plugin = config.plugins.find( ( p ) => {
-			return p.definitions && p.definitions[ 'process.env' ];
-		} );
-		// Add custom env variables.
-		Object.keys( customEnvVariables ).forEach( ( key ) => {
-			plugin.definitions[ 'process.env' ][ key ] = JSON.stringify(
-				customEnvVariables[ key ]
-			);
-		} );
-
-		return config;
+		return {
+			...config,
+			module: {
+				...config.module,
+				rules: [
+					...config.module.rules,
+					{
+						test: /\/stories\/.+\.story\.(j|t)sx?$/,
+						use: [
+							{
+								// Adds a `sourceLink` parameter to the story metadata, based on the file path
+								loader: path.resolve(
+									__dirname,
+									'./webpack/source-link-loader.js'
+								),
+							},
+							{
+								// Reads `tags` from the story metadata and copies them to `badges`
+								loader: path.resolve(
+									__dirname,
+									'./webpack/copy-tags-to-badges.js'
+								),
+							},
+						],
+						enforce: 'post',
+					},
+					{
+						test: /\.scss$/,
+						exclude: /\.lazy\.scss$/,
+						use: scssLoaders( { isLazy: false } ),
+						include: path.resolve( __dirname ),
+					},
+					{
+						test: /\.lazy\.scss$/,
+						use: scssLoaders( { isLazy: true } ),
+						include: path.resolve( __dirname ),
+					},
+				],
+			},
+			plugins: [
+				...config.plugins,
+				new DefinePlugin( {
+					// Ensures that `@wordpress/warning` can properly detect dev mode.
+					'globalThis.SCRIPT_DEBUG': JSON.stringify(
+						process.env.NODE_ENV === 'development'
+					),
+				} ),
+			],
+		};
 	},
 };
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
new file mode 100644
index 00000000000000..d3f156a6eb788b
--- /dev/null
+++ b/storybook/manager-head.html
@@ -0,0 +1,55 @@
+<script>
+	( function redirectIfStoryMoved() {
+		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
+			'alignmentmatrixcontrol',
+			'borderboxcontrol',
+			'bordercontrol',
+			'boxcontrol',
+			'customselectcontrol-v2',
+			'dimensioncontrol',
+			'navigation',
+			'navigator',
+			'progressbar',
+			'tabs',
+			'theme',
+		];
+		const REDIRECTS = [
+			{
+				from: /\/components-deprecated-/,
+				to: '/components-',
+			},
+			{
+				from: new RegExp(
+					`\/components-experimental-(?=${ PREVIOUSLY_EXPERIMENTAL_COMPONENTS.map(
+						( str ) => `${ str }\\b`
+					).join( '|' ) })`
+				),
+				to: '/components-',
+			},
+		];
+
+		const params = new URLSearchParams( window.location.search );
+
+		const matchedRedirect = REDIRECTS.find( ( { from } ) =>
+			from.test( params.get( 'path' ) )
+		);
+
+		if ( ! matchedRedirect ) {
+			return;
+		}
+
+		params.set(
+			'path',
+			params
+				.get( 'path' )
+				.replace( matchedRedirect.from, matchedRedirect.to )
+		);
+
+		const { pathname, origin } = window.location;
+		// The decodeURIComponent keeps the slashes intact, to match how Storybook presents the `path` param.
+		const newUrl =
+			new URL( pathname, origin ) + '?' + decodeURIComponent( params );
+
+		window.location.replace( newUrl );
+	} )();
+</script>
diff --git a/storybook/manager.js b/storybook/manager.js
index 25969095c8c49c..d519de312737a9 100644
--- a/storybook/manager.js
+++ b/storybook/manager.js
@@ -1,13 +1,15 @@
 /**
  * External dependencies
  */
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 
 /**
  * Internal dependencies
  */
 import theme from './theme';
+import sidebar from './sidebar';
 
 addons.setConfig( {
+	sidebar,
 	theme,
 } );
diff --git a/storybook/package-styles/block-editor-ltr.lazy.scss b/storybook/package-styles/block-editor-ltr.lazy.scss
new file mode 100644
index 00000000000000..4a84559461387f
--- /dev/null
+++ b/storybook/package-styles/block-editor-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style";
diff --git a/storybook/package-styles/block-editor-rtl.lazy.scss b/storybook/package-styles/block-editor-rtl.lazy.scss
new file mode 100644
index 00000000000000..d8eacb3d25b585
--- /dev/null
+++ b/storybook/package-styles/block-editor-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/block-editor/build-style/style-rtl";
diff --git a/storybook/package-styles/block-library-ltr.lazy.scss b/storybook/package-styles/block-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..a5e373b1c061cd
--- /dev/null
+++ b/storybook/package-styles/block-library-ltr.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style";
+@import "../../packages/block-library/build-style/theme";
+@import "../../packages/block-library/build-style/editor";
diff --git a/storybook/package-styles/block-library-rtl.lazy.scss b/storybook/package-styles/block-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de83f997385539
--- /dev/null
+++ b/storybook/package-styles/block-library-rtl.lazy.scss
@@ -0,0 +1,3 @@
+@import "../../packages/block-library/build-style/style-rtl";
+@import "../../packages/block-library/build-style/theme-rtl";
+@import "../../packages/block-library/build-style/editor-rtl";
diff --git a/storybook/package-styles/components-ltr.lazy.scss b/storybook/package-styles/components-ltr.lazy.scss
new file mode 100644
index 00000000000000..e7891f25026c4c
--- /dev/null
+++ b/storybook/package-styles/components-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style";
diff --git a/storybook/package-styles/components-rtl.lazy.scss b/storybook/package-styles/components-rtl.lazy.scss
new file mode 100644
index 00000000000000..6cba6edf353da5
--- /dev/null
+++ b/storybook/package-styles/components-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/components/build-style/style-rtl";
diff --git a/storybook/package-styles/config.js b/storybook/package-styles/config.js
new file mode 100644
index 00000000000000..d3614a0594b45c
--- /dev/null
+++ b/storybook/package-styles/config.js
@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies
+ */
+import blockEditorLtr from '../package-styles/block-editor-ltr.lazy.scss';
+import blockEditorRtl from '../package-styles/block-editor-rtl.lazy.scss';
+import blockLibraryLtr from '../package-styles/block-library-ltr.lazy.scss';
+import blockLibraryRtl from '../package-styles/block-library-rtl.lazy.scss';
+import componentsLtr from '../package-styles/components-ltr.lazy.scss';
+import componentsRtl from '../package-styles/components-rtl.lazy.scss';
+import formatLibraryLtr from '../package-styles/format-library-ltr.lazy.scss';
+import formatLibraryRtl from '../package-styles/format-library-rtl.lazy.scss';
+import editSiteLtr from '../package-styles/edit-site-ltr.lazy.scss';
+import editSiteRtl from '../package-styles/edit-site-rtl.lazy.scss';
+import dataviewsLtr from '../package-styles/dataviews-ltr.lazy.scss';
+import dataviewsRtl from '../package-styles/dataviews-rtl.lazy.scss';
+
+/**
+ * Stylesheets to lazy load when the story's context.componentId matches the
+ * componentIdMatcher regex.
+ *
+ * To prevent problematically overscoped styles in a package stylesheet
+ * from leaking into stories for other packages, we should explicitly declare
+ * stylesheet dependencies for each story group.
+ */
+const CONFIG = [
+	{
+		componentIdMatcher: /^playground-/,
+		ltr: [
+			componentsLtr,
+			blockEditorLtr,
+			blockLibraryLtr,
+			formatLibraryLtr,
+		],
+		rtl: [
+			componentsRtl,
+			blockEditorRtl,
+			blockLibraryRtl,
+			formatLibraryRtl,
+		],
+	},
+	{
+		componentIdMatcher: /^blockeditor-/,
+		ltr: [ componentsLtr, blockEditorLtr ],
+		rtl: [ componentsRtl, blockEditorRtl ],
+	},
+	{
+		componentIdMatcher: /^editsite-/,
+		ltr: [ componentsLtr, editSiteLtr ],
+		rtl: [ componentsRtl, editSiteRtl ],
+	},
+	{
+		componentIdMatcher: /^components-/,
+		ltr: [ componentsLtr ],
+		rtl: [ componentsRtl ],
+	},
+	{
+		componentIdMatcher: /^dataviews-/,
+		ltr: [ componentsLtr, dataviewsLtr ],
+		rtl: [ componentsRtl, dataviewsRtl ],
+	},
+];
+
+export default CONFIG;
diff --git a/storybook/package-styles/dataviews-ltr.lazy.scss b/storybook/package-styles/dataviews-ltr.lazy.scss
new file mode 100644
index 00000000000000..b5e1aa042803aa
--- /dev/null
+++ b/storybook/package-styles/dataviews-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/dataviews/build-style/style";
diff --git a/storybook/package-styles/dataviews-rtl.lazy.scss b/storybook/package-styles/dataviews-rtl.lazy.scss
new file mode 100644
index 00000000000000..d97479a1a5658e
--- /dev/null
+++ b/storybook/package-styles/dataviews-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/dataviews/build-style/style-rtl";
diff --git a/storybook/package-styles/edit-site-ltr.lazy.scss b/storybook/package-styles/edit-site-ltr.lazy.scss
new file mode 100644
index 00000000000000..c704fe9d9530ae
--- /dev/null
+++ b/storybook/package-styles/edit-site-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/edit-site/build-style/style";
diff --git a/storybook/package-styles/edit-site-rtl.lazy.scss b/storybook/package-styles/edit-site-rtl.lazy.scss
new file mode 100644
index 00000000000000..ae9ac27d6b51ef
--- /dev/null
+++ b/storybook/package-styles/edit-site-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/edit-site/build-style/style-rtl";
diff --git a/storybook/package-styles/format-library-ltr.lazy.scss b/storybook/package-styles/format-library-ltr.lazy.scss
new file mode 100644
index 00000000000000..0f7db59c5d5dfb
--- /dev/null
+++ b/storybook/package-styles/format-library-ltr.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style";
diff --git a/storybook/package-styles/format-library-rtl.lazy.scss b/storybook/package-styles/format-library-rtl.lazy.scss
new file mode 100644
index 00000000000000..de2553bb5efa20
--- /dev/null
+++ b/storybook/package-styles/format-library-rtl.lazy.scss
@@ -0,0 +1 @@
+@import "../../packages/format-library/build-style/style-rtl";
diff --git a/storybook/preview.js b/storybook/preview.js
index c7c2463f797d74..a7c9aa0c085fc1 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -1,3 +1,15 @@
+/**
+ * External dependencies
+ */
+import {
+	ArgsTable,
+	Description,
+	Primary,
+	Stories,
+	Subtitle,
+	Title,
+} from '@storybook/blocks';
+
 /**
  * Internal dependencies
  */
@@ -6,7 +18,7 @@ import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithMaxWidthWrapper } from './decorators/with-max-width-wrapper';
 import { WithRTL } from './decorators/with-rtl';
 import { WithTheme } from './decorators/with-theme';
-import './style.scss';
+import badgesConfig from './badges';
 
 export const globalTypes = {
 	direction: {
@@ -29,8 +41,9 @@ export const globalTypes = {
 			icon: 'paintbrush',
 			items: [
 				{ value: 'default', title: 'Default' },
-				{ value: 'modern', title: 'Modern' },
-				{ value: 'sunrise', title: 'Sunrise' },
+				{ value: 'darkBg', title: 'Dark (background)' },
+				{ value: 'lightGrayBg', title: 'Light gray (background)' },
+				{ value: 'classic', title: 'Classic (accent)' },
 			],
 		},
 	},
@@ -79,21 +92,33 @@ export const globalTypes = {
 };
 
 export const decorators = [
-	WithTheme,
 	WithGlobalCSS,
 	WithMarginChecker,
 	WithRTL,
 	WithMaxWidthWrapper,
+	WithTheme,
 ];
 
 export const parameters = {
+	// For @geometricpanda/storybook-addon-badges
+	badgesConfig,
 	controls: {
 		sort: 'requiredFirst',
 	},
-	knobs: {
-		// Knobs are deprecated, and new stories should use addon-controls.
-		// Will be enabled on a per-story basis until migration is complete.
-		disable: true,
+	docs: {
+		// Flips the order of the description and the primary component story
+		// so the component is always visible before the fold.
+		page: () => (
+			<>
+				<Title />
+				<Subtitle />
+				<Primary />
+				<Description />
+				{ /* `story="^"` enables Controls for the primary props table */ }
+				<ArgsTable story="^" />
+				<Stories includePrimary={ false } />
+			</>
+		),
 	},
 	options: {
 		storySort: {
@@ -102,7 +127,29 @@ export const parameters = {
 				'Playground',
 				'BlockEditor',
 				'Components',
+				[
+					'Introduction',
+					'Contributing Guidelines',
+					'Actions',
+					'Containers',
+					'Feedback',
+					'Layout',
+					'Navigation',
+					'Overlays',
+					'Selection & Input',
+					[ 'Color', 'Common', 'File Upload', 'Time & Date' ],
+					'Typography',
+					'Utilities',
+				],
 				'Components (Experimental)',
+				[
+					'Actions',
+					'Layout',
+					'Navigation',
+					'Overlays',
+					'Selection & Input',
+					'Typography',
+				],
 				'Icons',
 			],
 		},
diff --git a/storybook/sidebar.js b/storybook/sidebar.js
new file mode 100644
index 00000000000000..d8ff2ba777dd7d
--- /dev/null
+++ b/storybook/sidebar.js
@@ -0,0 +1,79 @@
+/**
+ * Provides sidebar configuration options.
+ * See https://storybook.js.org/docs/configure/features-and-behavior
+ */
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { createElement, useMemo } from 'react';
+import { useStorybookApi } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
+
+/**
+ * Internal dependencies
+ */
+import badges from './badges';
+
+const Wrapper = styled.span( {
+	flexGrow: 1,
+	display: 'flex',
+	paddingRight: '20px',
+} );
+
+const Title = styled.span( {
+	flexGrow: 1,
+} );
+
+const Icons = styled.span( {} );
+
+const Icon = styled.span( {} );
+
+/**
+ * Fetches tags from the Storybook API, and returns Icon
+ * elements for any that have matching badge data
+ */
+function useIcons( item ) {
+	const api = useStorybookApi();
+	const prefix = 'status-';
+
+	return useMemo( () => {
+		let data = {};
+
+		if ( item.isComponent && item.children?.length ) {
+			data = api.getData( item.children[ 0 ] ) ?? {};
+		}
+
+		const { tags = [] } = data;
+
+		return tags
+			.filter( ( tag ) => tag.startsWith( prefix ) )
+			.map( ( tag ) => badges[ tag.substring( prefix.length ) ] )
+			.map( ( { icon, title, tooltip } ) =>
+				icon
+					? createElement(
+							Icon,
+							{ title: tooltip?.title ?? title },
+							icon
+					  )
+					: null
+			);
+	}, [ api, item.children, item.isComponent ] );
+}
+
+/**
+ * Renders the item name and any associated badge icons.
+ */
+function Label( { item } ) {
+	const iconSet = useIcons( item );
+	const title = createElement( Title, {}, item.name );
+	const icons = createElement( Icons, { 'aria-hidden': true }, ...iconSet );
+
+	return createElement( Wrapper, {}, title, icons );
+}
+
+export default {
+	// Renders status icons for items tagged with `status-*`
+	renderLabel: ( item ) => createElement( Label, { item } ),
+};
diff --git a/storybook/static/wp-logo@2x.png b/storybook/static/wp-logo@2x.png
new file mode 100644
index 00000000000000..a95cd961902b01
Binary files /dev/null and b/storybook/static/wp-logo@2x.png differ
diff --git a/storybook/stories/docs/components/contributing.mdx b/storybook/stories/docs/components/contributing.mdx
new file mode 100644
index 00000000000000..7593cdd97a810e
--- /dev/null
+++ b/storybook/stories/docs/components/contributing.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import Contributing from '@wordpress/components/CONTRIBUTING.md?raw';
+
+<Meta title="Components/Contributing Guidelines" />
+
+<Markdown>{Contributing}</Markdown>
diff --git a/storybook/stories/docs/components/readme.mdx b/storybook/stories/docs/components/readme.mdx
new file mode 100644
index 00000000000000..61f3c222e9f550
--- /dev/null
+++ b/storybook/stories/docs/components/readme.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import Readme from '@wordpress/components/README.md?raw';
+
+<Meta title="Components/Introduction" />
+
+<Markdown>{Readme}</Markdown>
diff --git a/storybook/stories/docs/inline-icon.js b/storybook/stories/docs/inline-icon.js
index 2a1056b0069b74..d7d1fafc28723d 100644
--- a/storybook/stories/docs/inline-icon.js
+++ b/storybook/stories/docs/inline-icon.js
@@ -9,6 +9,4 @@ const StyledIcons = styled( Icons )`
 	width: 14px;
 `;
 
-export const InlineIcon = ( props ) => (
-	<StyledIcons aria-hidden={ true } { ...props } />
-);
+export const InlineIcon = ( props ) => <StyledIcons aria-hidden { ...props } />;
diff --git a/storybook/stories/docs/introduction.mdx b/storybook/stories/docs/introduction.mdx
new file mode 100644
index 00000000000000..731c570942f6b8
--- /dev/null
+++ b/storybook/stories/docs/introduction.mdx
@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/blocks';
+import { InlineIcon } from './inline-icon';
+
+<Meta title="Docs/Introduction" name="page" />
+
+# Introduction
+
+## Welcome!
+
+The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in WordPress packages, especially [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components).
+
+On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.
+
+The components displayed on this site can be used in your code to build the editor's UI for your custom blocks or other pages.
+Import them from the components root directory like in below example:
+
+```jsx
+import { Button } from '@wordpress/components';
+
+export default function MyButton() {
+	return <Button>Click Me!</Button>;
+}
+```
+
+## How this site works
+
+The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the **Canvas** tab. If the component also has controls/arguments, you can modify them on the **Controls** tab on the lower half of the screen.
+
+To view the documentation for each component use the **Docs** menu item in the top toolbar.
+
+To view the source code for the component and its stories on GitHub, click the <InlineIcon icon="repository" /> View Source Repository button in the top right corner.
+
+To use it in your local development environment run the following command in the top level Gutenberg directory:
+
+```bash
+npm run storybook:dev
+```
+
+## Resources to learn more:
+
+-   [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation.
+-   [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo
diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.story.mdx
deleted file mode 100644
index f353cf7c7e0abc..00000000000000
--- a/storybook/stories/docs/introduction.story.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { InlineIcon } from './inline-icon';
-
-<Meta title="Docs/Introduction" />
-
-# Introduction
-
-## Welcome!
-
-The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in the WordPress package [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components).
-
-On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.
-
-The components displayed on this site can be used in your code to build the editor's UI for your custom blocks or other pages.
-Import them from the components root directory like in below example:
-
-```jsx
-import { Button } from '@wordpress/components';
-
-export default function MyButton() {
-	return <Button>Click Me!</Button>;
-}
-```
-
-## How this site works
-
-The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the **Canvas** tab. If the component also has controls/arguments, you can modify them on the **Controls** tab on the lower half of the screen.
-
-To view the documentation for each component use the **Docs** menu item in the top toolbar.
-
-To view the source code for the component and its stories on GitHub, click the <InlineIcon icon="repository" /> View Source Repository button in the top right corner.
-
-To use it in your local development environment run the following command in the top level Gutenberg directory:
-
-```bash
-npm run storybook:dev
-```
-
-## Resources to learn more:
-
--   [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation.
--   [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo
diff --git a/storybook/stories/foundations/design-language/elevation.mdx b/storybook/stories/foundations/design-language/elevation.mdx
new file mode 100644
index 00000000000000..11591568b3600c
--- /dev/null
+++ b/storybook/stories/foundations/design-language/elevation.mdx
@@ -0,0 +1,87 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+import elevation from './static/elevation.svg';
+import elevationExamples from './static/elevation-examples.svg';
+
+<Meta title="Foundations/Design Language/Elevation" name="page" />
+
+# Elevation
+
+{/* Leaving alt text empty since this image is presentational */}
+
+<img src={ elevation } alt="" width="100%" />
+
+Elevation, through the use of shadows, visually indicates the layers where overlapping UI elements reside. Shadows create the illusion of depth, showing how one UI element is positioned above another on the z-axis. Elevation should be used to organize elements, establish a clear hierarchy, and draw focus to key components.
+
+In the WordPress Design System there are four levels of elevation correlating to specific uses:
+
+<table>
+	<thead>
+		<tr>
+			<th>Elevation</th>
+			<th>Usage</th>
+			<th>Examples</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>Extra small</td>
+			<td>
+				Applied to large sections and containers that group related content 
+				and controls. These containers may shift or overlap other content 
+				without causing too much visual disruption
+			</td>
+			<td>Preview Frame, Content Frame</td>
+		</tr>
+		<tr>
+			<td>Small</td>
+			<td>
+				Used for components that provide contextual feedback without being 
+				overly intrusive. Small elevation is ideal for non-interruptive elements 
+				that subtly surface additional information or actions.
+			</td>
+			<td>Tooltips, Snackbars</td>
+		</tr>
+		<tr>
+			<td>Medium</td>
+			<td>
+				Applied to components that offer additional actions to the user. This 
+				elevation level helps differentiate actionable elements that appear in 
+				context without requiring major focus shifts.
+			</td>
+			<td>Menus, Command Palette</td>
+		</tr>
+		<tr>
+			<td>Large</td>
+			<td>
+				Reserved for components that confirm actions or require decisions, large 
+				elevation is used for more interruptive elements that demand user attention 
+				to complete important tasks.
+			</td>
+			<td>Modals</td>
+		</tr>
+	</tbody>
+</table>
+
+## Accessibility considerations
+
+* Interactive Elements: Elevation can be an important visual cue to indicate which elements are interactive, 
+particularly for folks with monochromatic color blindness. Elevating buttons, handles, and other interactive 
+elements makes them stand out, helping users quickly identify where they can take action.
+* Focus: Higher levels of elevation can be used to draw attention to components that require user interaction 
+or confirmation, such as modals, guides, and decision-based tasks, enhancing accessibility by reducing 
+cognitive load.
+
+## Examples
+
+The diagram below visually demonstrates the examples outlined in the table above.
+
+<img src={ elevationExamples } alt="Diagram illustrating elevation levels" width="100%" />
+
+1. Content frame and Preview frame
+2. Snackbar
+3. Menu
+4. Modal
+
+## Tokens
+
+Use tokens to apply elevation in your work. Please refer to the [Tokens section](?path=/docs/tokens-elevation--page) to learn more.
diff --git a/storybook/stories/foundations/design-language/radius.mdx b/storybook/stories/foundations/design-language/radius.mdx
new file mode 100644
index 00000000000000..9117bf940d45a2
--- /dev/null
+++ b/storybook/stories/foundations/design-language/radius.mdx
@@ -0,0 +1,55 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+import radius from './static/radius.svg';
+import radiusDo from './static/radius-do.svg';
+import radiusDont from './static/radius-dont.svg';
+
+<Meta title="Foundations/Design Language/Radius" name="page" />
+
+# Radius
+
+<img src={ radius } alt="Radius" width="100%" />
+
+The radius scale is designed to provide a consistent, elegant appearance across nested elements. The defined values help maintain visual harmony between smaller primitives and larger containers, ensuring a cohesive user experience.
+
+## Scale
+
+The scale includes the following steps:
+
+-   `radius-x-small`: Applied to the smallest elements, such as buttons inside inputs or similar small primitives. This ensures subtle rounding without distracting from the core design.
+-   `radius-small`: The most commonly used radius value, applied to many primitives like buttons, inputs, and other standalone controls. It provides a moderate rounding that feels balanced and polished.
+-   `radius-medium`: Used for medium-sized containers like dropdown menus, popovers, and other mid-level components. This value is slightly more pronounced, giving these elements a soft but noticeable edge.
+-   `radius-large`: Reserved for larger containers such as cards and modals. The larger radius ensures that these elements have a smooth, elegant appearance that enhances their prominence on the page.
+-   `radius-full`: Applies a `border-radius` of `9999px`, this value creates a highly rounded appearance, often used on pill-shaped buttons or other components where extreme rounding is desired but full circularity is not necessary.
+-   `radius-round`: This value applies a `border-radius` of `100%`, making elements fully circular. It's typically used for circular avatars or buttons where complete rounding is required.
+
+These steps are defined as tokens. To view the values and understand how to use them please view the [Tokens section](?path=/docs/tokens-radius--page).
+
+## Usage Guidelines
+
+-   Consistency: To maintain visual cohesion, adhere to the radius scale when styling elements. Avoid custom radius values unless there is a specific need.
+-   Nested Elements: When combining elements of different sizes (e.g., buttons within inputs or cards within modals), ensure that smaller nested elements use the appropriate radius value for their size.
+-   Accessibility: Larger radius values can create a more approachable and friendly appearance, especially for larger components like cards and modals that demand more attention from users.
+
+<table>
+  <tr>
+    <th width="50%">✅ Do</th>
+    <th width="50%">🚫 Don't</th>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src={ radiusDo } alt="Radius do" width="100%" />
+
+      - Scale application of radius with element or container size.
+
+      - Use `radius-round` for circles and `radius-full` for pills.
+    </td>
+    <td width="50%" valign="top">
+      <img src={ radiusDont } alt="Radius don't" width="100%" />
+
+        -   Don't nest larger radii inside smaller radii.
+
+        -   Don't apply the same
+    radius value to container and immediate descendent.
+    </td>
+  </tr>
+</table>
diff --git a/storybook/stories/foundations/design-language/static/elevation-examples.svg b/storybook/stories/foundations/design-language/static/elevation-examples.svg
new file mode 100644
index 00000000000000..516313cbca4df3
--- /dev/null
+++ b/storybook/stories/foundations/design-language/static/elevation-examples.svg
@@ -0,0 +1,170 @@
+<svg width="1123" height="736" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1123" height="736" rx="8" fill="#E4E4E4"/>
+  <g filter="url(#a)">
+    <path fill="#F1F1F1" d="M304 12h309v712H304z"/>
+    <rect x="565" y="20" width="40" height="40" rx="20" fill="#1E1E1E"/>
+    <path d="M586.923 34.364V46h-2.108v-9.585h-.068l-2.721 1.738v-1.931l2.892-1.858h2.005Z" fill="#fff"/>
+  </g>
+  <g filter="url(#b)">
+    <path fill="#F1F1F1" d="M625 12h486v712H625z"/>
+    <rect x="1063" y="20" width="40" height="40" rx="20" fill="#1E1E1E"/>
+    <path d="M1084.92 34.364V46h-2.1v-9.585h-.07l-2.72 1.738v-1.931l2.89-1.858h2Z" fill="#fff"/>
+  </g>
+  <g filter="url(#c)">
+    <path fill="#FAFAFA" d="M273 44h149v219H273z"/>
+    <rect x="374" y="52" width="40" height="40" rx="20" fill="#1E1E1E"/>
+    <path d="M393.999 78.16c-.818 0-1.545-.141-2.182-.421-.632-.28-1.132-.67-1.5-1.17a3.039 3.039 0 0 1-.585-1.734h2.137c.019.315.123.59.312.824.19.231.441.411.756.54.314.129.666.193 1.057.193.416 0 .786-.072 1.108-.216.322-.148.573-.352.755-.614a1.51 1.51 0 0 0 .267-.903 1.571 1.571 0 0 0-.272-.932c-.186-.269-.455-.479-.807-.63-.349-.152-.769-.228-1.262-.228h-1.028v-1.625h1.028c.406 0 .76-.07 1.063-.21.307-.14.547-.337.721-.59.175-.258.26-.556.256-.893.004-.33-.07-.615-.221-.858a1.497 1.497 0 0 0-.631-.574 2.074 2.074 0 0 0-.949-.204c-.356 0-.686.064-.989.193a1.801 1.801 0 0 0-.733.551 1.398 1.398 0 0 0-.295.841h-2.028c.015-.651.202-1.224.562-1.716a3.634 3.634 0 0 1 1.455-1.159c.606-.28 1.286-.42 2.039-.42.777 0 1.451.145 2.023.437.576.288 1.021.676 1.335 1.165.315.489.472 1.028.472 1.62.004.654-.189 1.204-.58 1.647-.386.443-.894.733-1.522.87v.09c.818.114 1.445.417 1.88.91.44.488.658 1.096.654 1.823a2.92 2.92 0 0 1-.557 1.75c-.367.511-.875.913-1.523 1.205-.644.291-1.382.437-2.216.437Z" fill="#fff"/>
+  </g>
+  <g filter="url(#d)">
+    <path fill="#F6F6F6" d="M32 643h287v61H32z"/>
+    <rect x="271" y="651" width="40" height="40" rx="20" fill="#1E1E1E"/>
+    <path d="M287.065 677v-1.523l4.04-3.96c.386-.39.708-.737.966-1.04.258-.303.451-.596.58-.88.128-.285.193-.588.193-.909 0-.368-.084-.682-.25-.944a1.664 1.664 0 0 0-.688-.613 2.214 2.214 0 0 0-.994-.216c-.383 0-.718.079-1.006.238a1.644 1.644 0 0 0-.67.665c-.156.288-.233.631-.233 1.029h-2.006c0-.739.169-1.381.506-1.927a3.42 3.42 0 0 1 1.392-1.267c.595-.299 1.276-.448 2.045-.448.781 0 1.466.145 2.057.437.591.292 1.049.691 1.375 1.199.33.507.494 1.087.494 1.739 0 .435-.083.863-.25 1.284-.166.42-.46.886-.88 1.397-.417.512-1.002 1.131-1.756 1.858l-2.006 2.04v.08h5.069V677h-7.978Z" fill="#fff"/>
+  </g>
+  <g filter="url(#e)">
+    <path fill="#fff" d="M349 205h425v327H349z"/>
+    <rect x="726" y="213" width="40" height="40" rx="20" fill="#1E1E1E"/>
+    <path d="M741.496 236.841v-1.676l4.937-7.801h1.398v2.386h-.852l-3.324 5.267v.091h6.892v1.733h-9.051Zm5.551 2.159v-2.67l.023-.75v-8.216h1.988V239h-2.011Z" fill="#fff"/>
+  </g>
+  <defs>
+    <filter id="a" x="300" y="11" width="317" height="721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="3"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect1_dropShadow_15809_7029" result="effect2_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect2_dropShadow_15809_7029" result="effect3_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation=".5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect3_dropShadow_15809_7029" result="effect4_dropShadow_15809_7029"/>
+      <feBlend in="SourceGraphic" in2="effect4_dropShadow_15809_7029" result="shape"/>
+    </filter>
+    <filter id="b" x="621" y="11" width="494" height="721" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="3"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect1_dropShadow_15809_7029" result="effect2_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect2_dropShadow_15809_7029" result="effect3_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation=".5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect3_dropShadow_15809_7029" result="effect4_dropShadow_15809_7029"/>
+      <feBlend in="SourceGraphic" in2="effect4_dropShadow_15809_7029" result="shape"/>
+    </filter>
+    <filter id="c" x="257" y="43" width="181" height="252" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="16"/>
+      <feGaussianBlur stdDeviation="8"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect1_dropShadow_15809_7029" result="effect2_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect2_dropShadow_15809_7029" result="effect3_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="effect3_dropShadow_15809_7029" result="effect4_dropShadow_15809_7029"/>
+      <feBlend in="SourceGraphic" in2="effect4_dropShadow_15809_7029" result="shape"/>
+    </filter>
+    <filter id="d" x="24" y="642" width="303" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="8"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="effect1_dropShadow_15809_7029" result="effect2_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="effect2_dropShadow_15809_7029" result="effect3_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="effect3_dropShadow_15809_7029" result="effect4_dropShadow_15809_7029"/>
+      <feBlend in="SourceGraphic" in2="effect4_dropShadow_15809_7029" result="shape"/>
+    </filter>
+    <filter id="e" x="306" y="193" width="511" height="432" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="50"/>
+      <feGaussianBlur stdDeviation="21.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="30"/>
+      <feGaussianBlur stdDeviation="18"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_dropShadow_15809_7029" result="effect2_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="15"/>
+      <feGaussianBlur stdDeviation="13.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/>
+      <feBlend in2="effect2_dropShadow_15809_7029" result="effect3_dropShadow_15809_7029"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="5"/>
+      <feGaussianBlur stdDeviation="7.5"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+      <feBlend in2="effect3_dropShadow_15809_7029" result="effect4_dropShadow_15809_7029"/>
+      <feBlend in="SourceGraphic" in2="effect4_dropShadow_15809_7029" result="shape"/>
+    </filter>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/storybook/stories/foundations/design-language/static/elevation.svg b/storybook/stories/foundations/design-language/static/elevation.svg
new file mode 100644
index 00000000000000..737e7955ad9df6
--- /dev/null
+++ b/storybook/stories/foundations/design-language/static/elevation.svg
@@ -0,0 +1,208 @@
+<svg width="1123" height="439" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <rect width="1123" height="439" rx="8" fill="#3858E9"/>
+    <g filter="url(#b)">
+      <rect width="705" height="924" rx="12" transform="matrix(.86603 -.5 .86603 .5 184.238 -6.64)" fill="#617CF4"/>
+      <rect width="705" height="924" rx="12" transform="matrix(.86603 -.5 .86603 .5 184.238 -6.64)" fill="url(#c)" fill-opacity=".4"/>
+    </g>
+    <g filter="url(#d)">
+      <rect width="705" height="924" rx="12" transform="matrix(.86603 -.5 .86603 .5 -442.398 355.146)" fill="#617CF4"/>
+      <rect width="705" height="924" rx="12" transform="matrix(.86603 -.5 .86603 .5 -442.398 355.146)" fill="url(#e)" fill-opacity=".4"/>
+    </g>
+    <g filter="url(#f)">
+      <rect width="397.5" height="88.5" rx="12" transform="matrix(.86603 -.5 .86603 .5 455 608.75)" fill="#A7B8FF" fill-opacity=".9"/>
+      <rect width="397.5" height="88.5" rx="12" transform="matrix(.86603 -.5 .86603 .5 455 608.75)" fill="url(#g)" fill-opacity=".8"/>
+    </g>
+    <g filter="url(#h)">
+      <rect width="270.418" height="316.5" rx="24" transform="matrix(.86603 -.5 .86603 .5 102 363.209)" fill="#859BFB" fill-opacity=".9"/>
+      <rect width="270.418" height="316.5" rx="24" transform="matrix(.86603 -.5 .86603 .5 102 363.209)" fill="url(#i)" fill-opacity=".6"/>
+    </g>
+    <g filter="url(#j)">
+      <rect width="270.418" height="316.5" rx="24" transform="matrix(.86603 -.5 .86603 .5 439 48.209)" fill="#859BFB" fill-opacity=".9"/>
+      <rect width="270.418" height="316.5" rx="24" transform="matrix(.86603 -.5 .86603 .5 439 48.209)" fill="url(#k)" fill-opacity=".6"/>
+    </g>
+    <g filter="url(#l)">
+      <rect width="521.081" height="725.336" rx="36" transform="matrix(.86603 -.5 .86603 .5 20.979 165.499)" fill="#C2CCFF" fill-opacity=".9"/>
+      <rect width="521.081" height="725.336" rx="36" transform="matrix(.86603 -.5 .86603 .5 20.979 165.499)" fill="url(#m)" fill-opacity=".2"/>
+    </g>
+  </g>
+  <defs>
+    <linearGradient id="c" x1="352.5" y1="0" x2="352.5" y2="924" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <linearGradient id="e" x1="352.5" y1="0" x2="352.5" y2="924" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <linearGradient id="g" x1="198.75" y1="0" x2="198.75" y2="88.5" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <linearGradient id="i" x1="135.209" y1="0" x2="135.209" y2="316.5" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <linearGradient id="k" x1="135.209" y1="0" x2="135.209" y2="316.5" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <linearGradient id="m" x1="260.541" y1="0" x2="260.541" y2="725.336" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#fff" stop-opacity=".25"/>
+    </linearGradient>
+    <filter id="b" x="182.326" y="-363.626" width="1414.58" height="831.471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="3"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="11"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <filter id="d" x="-444.31" y="-1.839" width="1414.58" height="831.471" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="3"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="6"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="11"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <filter id="f" x="453.088" y="405.515" width="424.713" height="254.971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation=".5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="8"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <filter id="h" x="105.175" y="227.029" width="501.936" height="318.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="5"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="12"/>
+      <feGaussianBlur stdDeviation="3.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="22"/>
+      <feGaussianBlur stdDeviation="4.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <filter id="j" x="442.175" y="-87.971" width="501.936" height="318.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="5"/>
+      <feGaussianBlur stdDeviation="2.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="12"/>
+      <feGaussianBlur stdDeviation="3.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="22"/>
+      <feGaussianBlur stdDeviation="4.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <filter id="l" x="15.242" y="-92.498" width="1090.9" height="693.121" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+      <feBlend in2="effect1_backgroundBlur_15773_6493" result="effect2_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="15"/>
+      <feGaussianBlur stdDeviation="7.5"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
+      <feBlend in2="effect2_dropShadow_15773_6493" result="effect3_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="33"/>
+      <feGaussianBlur stdDeviation="10"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
+      <feBlend in2="effect3_dropShadow_15773_6493" result="effect4_dropShadow_15773_6493"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="59"/>
+      <feGaussianBlur stdDeviation="12"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.01 0"/>
+      <feBlend in2="effect4_dropShadow_15773_6493" result="effect5_dropShadow_15773_6493"/>
+      <feBlend in="SourceGraphic" in2="effect5_dropShadow_15773_6493" result="shape"/>
+    </filter>
+    <clipPath id="a">
+      <rect width="1123" height="439" rx="8" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/storybook/stories/foundations/design-language/static/radius-do.svg b/storybook/stories/foundations/design-language/static/radius-do.svg
new file mode 100644
index 00000000000000..baec81e98456a4
--- /dev/null
+++ b/storybook/stories/foundations/design-language/static/radius-do.svg
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="821" height="400" fill="none">
+	<g clip-path="url(#a)">
+		<rect width="821" height="400" fill="#3858E9" rx="8"/>
+		<rect width="835" height="662" x="-211" y="60" fill="#607AEE" rx="48"/>
+		<rect width="834" height="661" x="-210.5" y="60.5" stroke="#fff" stroke-opacity=".2" rx="47.5"/>
+		<rect width="111" height="40" x="-34" y="107" fill="#7D92F1" rx="20"/>
+		<rect width="110" height="39" x="-33.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="111" height="40" x="93" y="107" fill="#7D92F1" rx="20"/>
+		<rect width="110" height="39" x="93.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="111" height="40" x="220" y="107" fill="#7D92F1" rx="20"/>
+		<rect width="110" height="39" x="220.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="40" height="40" x="537" y="107" fill="#7D92F1" rx="12"/>
+		<rect width="39" height="39" x="537.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<g filter="url(#b)">
+			<rect width="335" height="502" x="242" y="163" fill="#93A4F4" rx="24"/>
+			<rect width="334" height="501" x="242.5" y="163.5" stroke="#fff" stroke-opacity=".2" rx="23.5"/>
+		</g>
+		<rect width="287" height="62" x="266" y="187" fill="#ADBBFB" rx="12"/>
+		<rect width="286" height="61" x="266.5" y="187.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<rect width="40" height="40" x="266" y="281" fill="#ADBBFB" rx="20"/>
+		<rect width="39" height="39" x="266.5" y="281.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="40" height="40" x="266" y="337" fill="#ADBBFB" rx="20"/>
+		<rect width="39" height="39" x="266.5" y="337.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="40" height="40" x="266" y="393" fill="#ADBBFB" rx="20"/>
+		<rect width="39" height="39" x="266.5" y="393.5" stroke="#fff" stroke-opacity=".2" rx="19.5"/>
+		<rect width="40" height="40" x="502" y="198" fill="#CCD4FF" rx="6"/>
+		<rect width="39" height="39" x="502.5" y="198.5" stroke="#fff" stroke-opacity=".2" rx="5.5"/>
+	</g>
+	<defs>
+		<clipPath id="a">
+			<rect width="821" height="400" fill="#fff" rx="8"/>
+		</clipPath>
+		<filter id="b" width="533" height="867" x="143" y="144" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="15"/>
+			<feGaussianBlur stdDeviation="17"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.1 0"/>
+			<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15778_6552"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="62"/>
+			<feGaussianBlur stdDeviation="31"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.09 0"/>
+			<feBlend in2="effect1_dropShadow_15778_6552" result="effect2_dropShadow_15778_6552"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="139"/>
+			<feGaussianBlur stdDeviation="41.5"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.05 0"/>
+			<feBlend in2="effect2_dropShadow_15778_6552" result="effect3_dropShadow_15778_6552"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="247"/>
+			<feGaussianBlur stdDeviation="49.5"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.01 0"/>
+			<feBlend in2="effect3_dropShadow_15778_6552" result="effect4_dropShadow_15778_6552"/>
+			<feBlend in="SourceGraphic" in2="effect4_dropShadow_15778_6552" result="shape"/>
+		</filter>
+	</defs>
+</svg>
diff --git a/storybook/stories/foundations/design-language/static/radius-dont.svg b/storybook/stories/foundations/design-language/static/radius-dont.svg
new file mode 100644
index 00000000000000..b4426b2fdd9199
--- /dev/null
+++ b/storybook/stories/foundations/design-language/static/radius-dont.svg
@@ -0,0 +1,58 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="821" height="400" fill="none">
+	<g clip-path="url(#a)">
+		<rect width="821" height="400" fill="#3858E9" rx="8"/>
+		<rect width="835" height="662" x="-211" y="60" fill="#607AEE" rx="6"/>
+		<rect width="834" height="661" x="-210.5" y="60.5" stroke="#fff" stroke-opacity=".2" rx="5.5"/>
+		<rect width="111" height="40" x="-34" y="107" fill="#7D92F1" rx="12"/>
+		<rect width="110" height="39" x="-33.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<rect width="111" height="40" x="93" y="107" fill="#7D92F1" rx="12"/>
+		<rect width="110" height="39" x="93.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<rect width="111" height="40" x="220" y="107" fill="#7D92F1" rx="12"/>
+		<rect width="110" height="39" x="220.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<rect width="40" height="40" x="537" y="107" fill="#7D92F1" rx="12"/>
+		<rect width="39" height="39" x="537.5" y="107.5" stroke="#fff" stroke-opacity=".2" rx="11.5"/>
+		<g filter="url(#b)">
+			<rect width="335" height="502" x="242" y="163" fill="#93A4F4" rx="6"/>
+			<rect width="334" height="501" x="242.5" y="163.5" stroke="#fff" stroke-opacity=".2" rx="5.5"/>
+		</g>
+		<rect width="40" height="40" x="266" y="281" fill="#ADBBFB" rx="16"/>
+		<rect width="39" height="39" x="266.5" y="281.5" stroke="#fff" stroke-opacity=".2" rx="15.5"/>
+		<rect width="40" height="40" x="266" y="337" fill="#ADBBFB" rx="16"/>
+		<rect width="39" height="39" x="266.5" y="337.5" stroke="#fff" stroke-opacity=".2" rx="15.5"/>
+		<rect width="40" height="40" x="266" y="393" fill="#ADBBFB" rx="16"/>
+		<rect width="39" height="39" x="266.5" y="393.5" stroke="#fff" stroke-opacity=".2" rx="15.5"/>
+		<rect width="287" height="62" x="266" y="187" fill="#ADBBFB" rx="6"/>
+		<rect width="286" height="61" x="266.5" y="187.5" stroke="#fff" stroke-opacity=".2" rx="5.5"/>
+		<rect width="40" height="40" x="502" y="198" fill="#CCD4FF" rx="9"/>
+		<rect width="39" height="39" x="502.5" y="198.5" stroke="#fff" stroke-opacity=".2" rx="8.5"/>
+	</g>
+	<defs>
+		<clipPath id="a">
+			<rect width="821" height="400" fill="#fff" rx="8"/>
+		</clipPath>
+		<filter id="b" width="533" height="867" x="143" y="144" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="15"/>
+			<feGaussianBlur stdDeviation="17"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.1 0"/>
+			<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_15779_6567"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="62"/>
+			<feGaussianBlur stdDeviation="31"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.09 0"/>
+			<feBlend in2="effect1_dropShadow_15779_6567" result="effect2_dropShadow_15779_6567"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="139"/>
+			<feGaussianBlur stdDeviation="41.5"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.05 0"/>
+			<feBlend in2="effect2_dropShadow_15779_6567" result="effect3_dropShadow_15779_6567"/>
+			<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="247"/>
+			<feGaussianBlur stdDeviation="49.5"/>
+			<feColorMatrix values="0 0 0 0 0.0117647 0 0 0 0 0.0627451 0 0 0 0 0.329412 0 0 0 0.01 0"/>
+			<feBlend in2="effect3_dropShadow_15779_6567" result="effect4_dropShadow_15779_6567"/>
+			<feBlend in="SourceGraphic" in2="effect4_dropShadow_15779_6567" result="shape"/>
+		</filter>
+	</defs>
+</svg>
diff --git a/storybook/stories/foundations/design-language/static/radius.svg b/storybook/stories/foundations/design-language/static/radius.svg
new file mode 100644
index 00000000000000..a5d81ef7ca0535
--- /dev/null
+++ b/storybook/stories/foundations/design-language/static/radius.svg
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1091" height="395" fill="none">
+	<g clip-path="url(#a)">
+		<rect width="1091" height="395" fill="#3858E9" rx="8"/>
+		<g filter="url(#b)">
+			<path fill="url(#c)" fill-opacity=".8" d="M73.06 344.57c-31.45-117.36 38.2-238 155.56-269.44L1091.2-156l166.69 622.08L182.8 754.14 73.07 344.57Z"/>
+		</g>
+		<g filter="url(#d)">
+			<path fill="url(#e)" fill-opacity=".8" d="M130.76 328.07c-22.73-84.82 27.6-172 112.43-194.73l863.53-231.38 145.37 542.51L234.97 717.02 130.76 328.07Z"/>
+		</g>
+		<g filter="url(#f)">
+			<path fill="url(#g)" fill-opacity=".8" d="M188.71 312.55c-14.15-52.82 17.2-107.1 70-121.25l863.55-231.4 127.94 477.48-959.16 257-102.32-381.84Z"/>
+		</g>
+		<g filter="url(#h)">
+			<path fill="url(#i)" fill-opacity=".8" d="M246.93 297.98A40 40 0 0 1 275.2 249l862.57-231.12 103.79 387.33-901.2 241.48-93.44-348.7Z"/>
+		</g>
+	</g>
+	<defs>
+		<linearGradient id="c" x1="553.66" x2="720.34" y1="-11.97" y2="610.11" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#fff" stop-opacity=".25"/>
+			<stop offset="1" stop-color="#fff" stop-opacity=".1"/>
+		</linearGradient>
+		<linearGradient id="e" x1="598.16" x2="743.53" y1="38.22" y2="580.74" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#fff" stop-opacity=".25"/>
+			<stop offset="1" stop-color="#fff" stop-opacity=".1"/>
+		</linearGradient>
+		<linearGradient id="g" x1="642.67" x2="770.61" y1="88.42" y2="565.89" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#fff" stop-opacity=".25"/>
+			<stop offset="1" stop-color="#fff" stop-opacity=".1"/>
+		</linearGradient>
+		<linearGradient id="i" x1="687.18" x2="790.97" y1="138.61" y2="525.94" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#fff" stop-opacity=".25"/>
+			<stop offset="1" stop-color="#fff" stop-opacity=".1"/>
+		</linearGradient>
+		<filter id="b" width="1208.37" height="926.14" x="57.51" y="-164" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+			<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6502"/>
+			<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_15773_6502" result="shape"/>
+		</filter>
+		<filter id="d" width="1142.79" height="831.06" x="117.3" y="-106.05" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+			<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6502"/>
+			<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_15773_6502" result="shape"/>
+		</filter>
+		<filter id="f" width="1080.88" height="750.49" x="177.31" y="-48.09" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+			<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6502"/>
+			<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_15773_6502" result="shape"/>
+		</filter>
+		<filter id="h" width="1012.02" height="644.81" x="237.55" y="9.87" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feGaussianBlur in="BackgroundImageFix" stdDeviation="4"/>
+			<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_15773_6502"/>
+			<feBlend in="SourceGraphic" in2="effect1_backgroundBlur_15773_6502" result="shape"/>
+		</filter>
+		<clipPath id="a">
+			<rect width="1091" height="395" fill="#fff" rx="8"/>
+		</clipPath>
+	</defs>
+</svg>
diff --git a/storybook/stories/foundations/design-language/static/wp-logo@2x.png b/storybook/stories/foundations/design-language/static/wp-logo@2x.png
new file mode 100644
index 00000000000000..a95cd961902b01
Binary files /dev/null and b/storybook/stories/foundations/design-language/static/wp-logo@2x.png differ
diff --git a/storybook/stories/playground/box/index.js b/storybook/stories/playground/box/index.js
new file mode 100644
index 00000000000000..cca522a90c1441
--- /dev/null
+++ b/storybook/stories/playground/box/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import {
+	BlockEditorProvider,
+	BlockCanvas,
+	BlockToolbar,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import editorStyles from '../editor-styles';
+import './style.css';
+
+export default function EditorBox() {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-box"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+				settings={ {
+					hasFixedToolbar: true,
+				} }
+			>
+				<BlockToolbar hideDragHandle />
+				<BlockCanvas height="500px" styles={ editorStyles } />
+			</BlockEditorProvider>
+		</div>
+	);
+}
diff --git a/storybook/stories/playground/box/style.css b/storybook/stories/playground/box/style.css
new file mode 100644
index 00000000000000..f0f0329e0e2bc4
--- /dev/null
+++ b/storybook/stories/playground/box/style.css
@@ -0,0 +1,3 @@
+.editor-box {
+	border: 1px solid #ddd;
+}
diff --git a/storybook/stories/playground/editor-styles.js b/storybook/stories/playground/editor-styles.js
new file mode 100644
index 00000000000000..5e1c6f644685a3
--- /dev/null
+++ b/storybook/stories/playground/editor-styles.js
@@ -0,0 +1,51 @@
+export const editorStyles = [
+	{
+		css: `
+        body {
+            font-family: Arial;
+            font-size: 16px;
+        }
+        p {
+            font-size: inherit;
+            line-height: inherit;
+        }
+        ul,
+        ol {
+            margin: 0;
+            padding: 0;
+        }
+    
+        ul li,
+        ol li {
+            margin-bottom: initial;
+        }
+    
+        ul {
+            list-style-type: disc;
+        }
+    
+        ol {
+            list-style-type: decimal;
+        }
+    
+        ul ul,
+        ol ul {
+            list-style-type: circle;
+        }
+    
+        .wp-block {
+            max-width: 700px;    
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .wp-block[data-align="wide"],
+        .wp-block.alignwide {
+            max-width: 900px;
+        }
+        .wp-block[data-align="full"],
+        .wp-block.alignfull {
+            max-width: none;
+        }
+        `,
+	},
+];
diff --git a/storybook/stories/playground/editor-styles.scss b/storybook/stories/playground/editor-styles.scss
deleted file mode 100644
index ed5ec78977dbbd..00000000000000
--- a/storybook/stories/playground/editor-styles.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.editor-styles-wrapper {
-	font-family: $default-font;
-	font-size: $editor-font-size;
-	line-height: $editor-line-height;
-	color: $gray-900;
-
-	p {
-		font-size: inherit;
-		line-height: inherit;
-	}
-
-	ul,
-	ol {
-		margin: 0;
-		padding: 0;
-	}
-
-	ul li,
-	ol li {
-		// This overrides a bottom margin globally applied to list items in wp-admin.
-		margin-bottom: initial;
-	}
-
-	ul {
-		list-style-type: disc;
-	}
-
-	ol {
-		list-style-type: decimal;
-	}
-
-	ul ul,
-	ol ul {
-		list-style-type: circle;
-	}
-
-	// These are default editor styles
-	.wp-block {
-		max-width: 700px;
-
-		// TODO: the default padding/margin of the block editor content are not set properly
-		margin-left: auto;
-		margin-right: auto;
-	}
-	.wp-block[data-align="wide"],
-	.wp-block.alignwide {
-		max-width: $content-width;
-	}
-	.wp-block[data-align="full"],
-	.wp-block.alignfull {
-		max-width: none;
-	}
-}
diff --git a/storybook/stories/playground/fullpage/index.js b/storybook/stories/playground/fullpage/index.js
new file mode 100644
index 00000000000000..8b8c037ceb72a3
--- /dev/null
+++ b/storybook/stories/playground/fullpage/index.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import {
+	BlockCanvas,
+	BlockEditorProvider,
+	BlockInspector,
+} from '@wordpress/block-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.lazy.scss';
+import { editorStyles } from '../editor-styles';
+
+export default function EditorFullPage() {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	// Ensures that the CSS intended for the playground (especially the style resets)
+	// are only loaded for the playground and don't leak into other stories.
+	useEffect( () => {
+		styles.use();
+
+		return styles.unuse;
+	} );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="playground"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+			>
+				<div className="playground__sidebar">
+					<BlockInspector />
+				</div>
+				<div className="playground__content">
+					<BlockCanvas height="100%" styles={ editorStyles } />
+				</div>
+			</BlockEditorProvider>
+		</div>
+	);
+}
diff --git a/storybook/stories/playground/reset.scss b/storybook/stories/playground/fullpage/reset.scss
similarity index 100%
rename from storybook/stories/playground/reset.scss
rename to storybook/stories/playground/fullpage/reset.scss
diff --git a/storybook/stories/playground/fullpage/style.lazy.scss b/storybook/stories/playground/fullpage/style.lazy.scss
new file mode 100644
index 00000000000000..0249011c3e960e
--- /dev/null
+++ b/storybook/stories/playground/fullpage/style.lazy.scss
@@ -0,0 +1,48 @@
+@import "~@wordpress/base-styles/colors";
+@import "~@wordpress/base-styles/variables";
+@import "~@wordpress/base-styles/mixins";
+@import "~@wordpress/base-styles/breakpoints";
+@import "~@wordpress/base-styles/animations";
+@import "~@wordpress/base-styles/z-index";
+
+@import "./reset";
+
+.playground {
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+
+	iframe {
+		width: 100%;
+	}
+}
+
+.playground__content {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	@include break-small() {
+		right: $sidebar-width;
+	}
+}
+
+.playground__sidebar {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: $sidebar-width;
+	border-left: $border-width solid $gray-300;
+	height: auto;
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+
+	// Temporarily disable the sidebar on mobile
+	display: none;
+	@include break-small() {
+		display: block;
+	}
+}
diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.js
deleted file mode 100644
index 92ccd78ae58b74..00000000000000
--- a/storybook/stories/playground/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-import {
-	BlockEditorKeyboardShortcuts,
-	BlockEditorProvider,
-	BlockList,
-	BlockTools,
-	BlockInspector,
-	WritingFlow,
-	ObserveTyping,
-} from '@wordpress/block-editor';
-import { Popover, SlotFillProvider } from '@wordpress/components';
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
-import '@wordpress/format-library';
-
-/**
- * Internal dependencies
- */
-import styles from './style.lazy.scss';
-
-function App() {
-	const [ blocks, updateBlocks ] = useState( [] );
-
-	useEffect( () => {
-		registerCoreBlocks();
-	}, [] );
-
-	// Ensures that the CSS intended for the playground (especially the style resets)
-	// are only loaded for the playground and don't leak into other stories.
-	useEffect( () => {
-		styles.use();
-
-		return styles.unuse;
-	} );
-
-	return (
-		<div className="playground">
-			<ShortcutProvider>
-				<SlotFillProvider>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ updateBlocks }
-						onChange={ updateBlocks }
-					>
-						<div className="playground__sidebar">
-							<BlockInspector />
-						</div>
-						<div className="playground__content">
-							<BlockTools>
-								<div className="editor-styles-wrapper">
-									<BlockEditorKeyboardShortcuts.Register />
-									<WritingFlow>
-										<ObserveTyping>
-											<BlockList />
-										</ObserveTyping>
-									</WritingFlow>
-								</div>
-							</BlockTools>
-						</div>
-						<Popover.Slot />
-					</BlockEditorProvider>
-				</SlotFillProvider>
-			</ShortcutProvider>
-		</div>
-	);
-}
-
-export default {
-	title: 'Playground/Block Editor',
-	parameters: {
-		sourceLink: 'storybook/stories/playground',
-	},
-};
-
-export const _default = () => {
-	return <App />;
-};
diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js
new file mode 100644
index 00000000000000..eab17455c2954e
--- /dev/null
+++ b/storybook/stories/playground/index.story.js
@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import EditorFullPage from './fullpage';
+import EditorBox from './box';
+import EditorWithUndoRedo from './with-undo-redo';
+import EditorZoomOut from './zoom-out';
+
+export default {
+	title: 'Playground/Block Editor',
+	parameters: {
+		sourceLink: 'storybook/stories/playground',
+	},
+};
+
+export const _default = () => {
+	return <EditorFullPage />;
+};
+
+_default.parameters = {
+	sourceLink: 'storybook/stories/playground/fullpage/index.js',
+};
+
+export const Box = () => {
+	return <EditorBox />;
+};
+
+Box.parameters = {
+	sourceLink: 'storybook/stories/playground/box/index.js',
+};
+
+export const UndoRedo = () => {
+	return <EditorWithUndoRedo />;
+};
+
+UndoRedo.parameters = {
+	sourceLink: 'storybook/stories/playground/with-undo-redo/index.js',
+};
+
+export const ZoomOut = ( props ) => {
+	return <EditorZoomOut { ...props } />;
+};
+
+ZoomOut.parameters = {
+	sourceLink: 'storybook/stories/playground/zoom-out/index.js',
+};
+ZoomOut.argTypes = {
+	zoomLevel: { control: { type: 'range', min: 10, max: 100, step: 5 } },
+};
diff --git a/storybook/stories/playground/style.lazy.scss b/storybook/stories/playground/style.lazy.scss
deleted file mode 100644
index af3cf09dd36c7f..00000000000000
--- a/storybook/stories/playground/style.lazy.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@import "~@wordpress/base-styles/colors";
-@import "~@wordpress/base-styles/variables";
-@import "~@wordpress/base-styles/mixins";
-@import "~@wordpress/base-styles/breakpoints";
-@import "~@wordpress/base-styles/animations";
-@import "~@wordpress/base-styles/z-index";
-
-@import "./reset";
-@import "./editor-styles";
-
-.playground {
-	@include break-small() {
-		width: calc(100% - #{$sidebar-width});
-	}
-	padding-top: 20px;
-
-	img {
-		max-width: 100%;
-		height: auto;
-	}
-
-	iframe {
-		width: 100%;
-	}
-}
-
-.playground__content {
-	// Reference element for the block popover position.
-	position: relative;
-}
-
-.playground__sidebar {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: $sidebar-width;
-	border-left: $border-width solid $gray-300;
-	height: auto;
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-
-	// Temporarily disable the sidebar on mobile
-	display: none;
-	@include break-small() {
-		display: block;
-	}
-}
-
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
diff --git a/storybook/stories/playground/with-undo-redo/index.js b/storybook/stories/playground/with-undo-redo/index.js
new file mode 100644
index 00000000000000..b5a6067cad24b7
--- /dev/null
+++ b/storybook/stories/playground/with-undo-redo/index.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useStateWithHistory } from '@wordpress/compose';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import {
+	BlockEditorProvider,
+	BlockCanvas,
+	BlockToolbar,
+} from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import editorStyles from '../editor-styles';
+import './style.css';
+
+export default function EditorWithUndoRedo() {
+	const { value, setValue, hasUndo, hasRedo, undo, redo } =
+		useStateWithHistory( { blocks: [] } );
+
+	useEffect( () => {
+		registerCoreBlocks();
+	}, [] );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-with-undo-redo"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+		>
+			<BlockEditorProvider
+				value={ value.blocks }
+				selection={ value.selection }
+				onInput={ ( blocks, { selection } ) =>
+					setValue( { blocks, selection }, true )
+				}
+				onChange={ ( blocks, { selection } ) =>
+					setValue( { blocks, selection }, false )
+				}
+				settings={ {
+					hasFixedToolbar: true,
+				} }
+			>
+				<div className="editor-with-undo-redo__toolbar">
+					<Button
+						onClick={ undo }
+						disabled={ ! hasUndo }
+						accessibleWhenDisabled
+						icon={ undoIcon }
+						label="Undo"
+						size="compact"
+					/>
+					<Button
+						onClick={ redo }
+						disabled={ ! hasRedo }
+						accessibleWhenDisabled
+						icon={ redoIcon }
+						label="Redo"
+						size="compact"
+					/>
+					<BlockToolbar hideDragHandle />
+				</div>
+				<BlockCanvas height="100%" styles={ editorStyles } />
+			</BlockEditorProvider>
+		</div>
+	);
+}
diff --git a/storybook/stories/playground/with-undo-redo/style.css b/storybook/stories/playground/with-undo-redo/style.css
new file mode 100644
index 00000000000000..6ed082a1de7196
--- /dev/null
+++ b/storybook/stories/playground/with-undo-redo/style.css
@@ -0,0 +1,14 @@
+.editor-with-undo-redo {
+	border: 1px solid #ddd;
+}
+
+.editor-with-undo-redo__toolbar {
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #ddd;
+	height: 46px;
+}
+
+.editor-with-undo-redo__toolbar .components-accessible-toolbar.block-editor-block-contextual-toolbar {
+	border-bottom: none;
+}
\ No newline at end of file
diff --git a/storybook/stories/playground/zoom-out/index.js b/storybook/stories/playground/zoom-out/index.js
new file mode 100644
index 00000000000000..8b72a831d710e8
--- /dev/null
+++ b/storybook/stories/playground/zoom-out/index.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { useDispatch } from '@wordpress/data';
+import {
+	BlockEditorProvider,
+	BlockCanvas,
+	store as blockEditorStore,
+	BlockList,
+} from '@wordpress/block-editor';
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import editorStyles from '../editor-styles';
+// eslint-disable-next-line @wordpress/dependency-group
+import contentCss from '!!raw-loader!../../../../packages/block-editor/build-style/content.css';
+import { pattern } from './pattern';
+
+// Temporary hack to access private APIs before stabilizing zoom level.
+const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/edit-site'
+);
+
+function EnableZoomOut( { zoomLevel } ) {
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	useEffect( () => {
+		setZoomLevel( zoomLevel ? zoomLevel / 100 : 'auto-scaled' );
+	}, [ setZoomLevel, zoomLevel ] );
+
+	return null;
+}
+
+export default function EditorZoomOut( { zoomLevel } ) {
+	const [ blocks, updateBlocks ] = useState( [] );
+
+	useEffect( () => {
+		registerCoreBlocks();
+		updateBlocks( parse( pattern ) );
+	}, [] );
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="editor-zoom-out"
+			onKeyDown={ ( event ) => event.stopPropagation() }
+			style={ { border: '1px solid gray' } }
+		>
+			<BlockEditorProvider
+				value={ blocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+			>
+				<EnableZoomOut zoomLevel={ zoomLevel } />
+				<BlockCanvas height="500px" styles={ editorStyles }>
+					<style>{ contentCss }</style>
+					<BlockList />
+				</BlockCanvas>
+			</BlockEditorProvider>
+		</div>
+	);
+}
diff --git a/storybook/stories/playground/zoom-out/pattern.js b/storybook/stories/playground/zoom-out/pattern.js
new file mode 100644
index 00000000000000..7c58486de55235
--- /dev/null
+++ b/storybook/stories/playground/zoom-out/pattern.js
@@ -0,0 +1,39 @@
+export const pattern = `<!-- wp:cover {"customOverlayColor":"#eb4c77","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"6vw","right":"6vw","bottom":"6vw","left":"6vw"},"margin":{"top":"0"}}}} -->
+<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:6vw;padding-right:6vw;padding-bottom:6vw;padding-left:6vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#eb4c77"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0vw"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"top"}} -->
+<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill"}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"600px"}} -->
+<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontSize":"100px","textTransform":"none","fontStyle":"normal","fontWeight":"500","lineHeight":"0.9"}},"textColor":"contrast"} -->
+<h2 class="wp-block-heading alignwide has-text-align-left has-contrast-color has-text-color" style="font-size:100px;font-style:normal;font-weight:500;line-height:0.9;text-transform:none">Time for an adventure</h2>
+<!-- /wp:heading -->
+
+<!-- wp:spacer {"height":"24px"} -->
+<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:paragraph {"align":"left","textColor":"contrast"} -->
+<p class="has-text-align-left has-contrast-color has-text-color">Explore our network of trails that lead through a variety of woodland habitats and observe the diverse flora that call this area home. </p>
+<!-- /wp:paragraph -->
+
+<!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrast","textColor":"base","style":{"spacing":{"padding":{"top":"24px","right":"48px","bottom":"24px","left":"48px"}},"typography":{"fontSize":"16px","fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0px"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
+<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px;font-style:normal;font-weight:500;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px">Sign up</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"blockGap":"24px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"right"}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}},"layout":{"type":"default"}} -->
+<div class="wp-block-group"><!-- wp:spacer {"height":"8vw"} -->
+<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+</div>
+<!-- /wp:group -->
+
+</div>
+<!-- /wp:group --></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover -->`;
diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx
new file mode 100644
index 00000000000000..0f99303500ca96
--- /dev/null
+++ b/storybook/stories/tokens/color.mdx
@@ -0,0 +1,61 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Tokens/Color" name="page" />
+
+# Color
+
+This document outlines the default color set of the WordPress component system as it ships. The page is a work in progress. 
+
+## Colors
+
+<ColorPalette>
+	<ColorItem
+		title="Black & White"
+		subtitle=""
+		colors={{
+			'$black': '#000',
+			'$white': '#fff',
+		}}
+	/>
+</ColorPalette>
+
+<ColorPalette>
+	<ColorItem
+		title="Gray Tones"
+		subtitle=""
+		colors={{
+			'$gray-900': '#1e1e1e',
+			'$gray-800': '#2f2f2f',
+			'$gray-700': '#757575',
+			'$gray-600': '#949494',
+			'$gray-400': '#ccc',
+			'$gray-300': '#ddd',
+			'$gray-200': '#e0e0e0',
+			'$gray-100': '#f0f0f0',
+		}}
+	/>
+</ColorPalette>
+
+<ColorPalette>
+	<ColorItem
+		title="Alert colors"
+		subtitle=""
+		colors={{
+			'$alert-yellow': '#f0b849',
+			'$alert-red': '#cc1818',
+			'$alert-green': '#4ab866',
+		}}
+	/>
+</ColorPalette>
+
+## Contrast
+
+Ensure proper contrast is met between text, icons, UI, and backgrounds. Text needs to meet a 4.5:1 ratio to meet AA standards, while large text (16px+) and UI elements (borders, etc.) need to meet a 3:1 ratio. In this section is a list of tokens you can use to meet these criteria.
+
+Against a white background:
+
+* **Gray 700**\
+Meets 4.6:1, lightest gray you can use and meet 4.5:1 text contrast.
+
+* **Gray 600**\
+Lightest gray you can use and meet 3:1 UI contrast.
diff --git a/storybook/stories/tokens/components.tsx b/storybook/stories/tokens/components.tsx
new file mode 100644
index 00000000000000..1144bc10d625d3
--- /dev/null
+++ b/storybook/stories/tokens/components.tsx
@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import React from 'react';
+
+export const TokensTable = ( { tokenCategory, tokens, applyTokenStyle } ) => {
+	return (
+		<table style={ { width: '100%' } }>
+			<thead>
+				<tr>
+					<th>Token</th>
+					<th>Value</th>
+					<th>Example</th>
+				</tr>
+			</thead>
+			<tbody>
+				{ tokens.map( ( { name, valueShow, valueCode } ) => (
+					<tr key={ name }>
+						<td style={ { whiteSpace: 'nowrap' } }>{ name }</td>
+						<td>
+							<code
+								style={ {
+									lineHeight: 1,
+									margin: '0 2px',
+									padding: '3px 5px',
+									borderRadius: '3px',
+									fontSize: '13px',
+									border: '1px solid #ECF4F9',
+									color: 'rgba(46, 52, 56, 0.9)',
+									backgroundColor: '#F7FAFC',
+								} }
+							>
+								{ valueShow }
+							</code>
+						</td>
+						<td style={ { padding: '24px' } }>
+							<div
+								aria-label={ `A shape showing an example of the '${ name }' ${ tokenCategory } token` }
+								style={ {
+									width: '100px',
+									height: '100px',
+									background: 'white',
+									...applyTokenStyle( valueCode ),
+								} }
+							></div>
+						</td>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
+	);
+};
diff --git a/storybook/stories/tokens/elevation.mdx b/storybook/stories/tokens/elevation.mdx
new file mode 100644
index 00000000000000..5afb7e75266c4a
--- /dev/null
+++ b/storybook/stories/tokens/elevation.mdx
@@ -0,0 +1,90 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { TokensTable } from './components.tsx';
+
+<Meta title="Tokens/Elevation" name="page" />
+
+# Elevation tokens
+
+This document outlines the various tokens relating to [elevation](?path=/docs/foundations-design-language-elevation--page) in the WordPress design system.
+
+## Values
+
+Tokens can be used in different ways, but regardless of which method is used, each one is meant to be used as the value of the CSS `box-shadow` property, and references the following values:
+
+<TokensTable
+	tokenCategory="elevation"
+	tokens={ [
+		{
+			name: 'Extra small',
+			valueShow:
+				'0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01)',
+			valueCode:
+				'0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)',
+		},
+		{
+			name: 'Small',
+			valueShow:
+				'0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02)',
+			valueCode:
+				'0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)',
+		},
+		{
+			name: 'Medium',
+			valueShow:
+				'0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02)',
+			valueCode:
+				'0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)',
+		},
+		{
+			name: 'Large',
+			valueShow:
+				'0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02)',
+			valueCode:
+				'0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)',
+		},
+	] }
+	applyTokenStyle={ ( valueCode ) => ( { boxShadow: valueCode } ) }
+/>
+
+## CSS tokens
+
+Elevation tokens are defined as SASS variables:
+
+-   `$elevation-x-small`
+-   `$elevation-small`
+-   `$elevation-medium`
+-   `$elevation-large`
+
+They can be used like so:
+
+```css
+.elevation-extra-small {
+	box-shadow: $elevation-x-small;
+}
+.elevation-small {
+	box-shadow: $elevation-small;
+}
+.elevation-medium {
+	box-shadow: $elevation-medium;
+}
+.elevation-large {
+	box-shadow: $elevation-large;
+}
+```
+
+## JS tokens
+
+When working in the `@wordpress/components` package, the elevation tokens can also be consumed as JavaScript variables via the `CONFIG` object found in the `packages/components/src/utils/index.js` file:
+
+-   `CONFIG.elevationXSmall`
+-   `CONFIG.elevationSmall`
+-   `CONFIG.elevationMedium`
+-   `CONFIG.elevationLarge`
+
+```js
+// Note: the `CONFIG` object is only available within the `@wordpress/components` package.
+import { CONFIG } from '../utils';
+
+// Later in the code:
+box-shadow: ${ CONFIG.elevationXSmall };
+```
diff --git a/storybook/stories/tokens/radius.mdx b/storybook/stories/tokens/radius.mdx
new file mode 100644
index 00000000000000..49eeb4a3c312b9
--- /dev/null
+++ b/storybook/stories/tokens/radius.mdx
@@ -0,0 +1,105 @@
+import { Meta } from '@storybook/blocks';
+import { TokensTable } from './components.tsx';
+
+<Meta title="Tokens/Radius" name="page" />
+
+# Radius
+
+This document outlines the various tokens relating to radius in the WordPress design system.
+
+## Values
+
+Tokens can be used in different ways, but regardless of which method is used, each one is meant to be used as the value of the CSS `border-radius` property, and references the following values:
+
+<TokensTable
+	tokenCategory="radius"
+	tokens={ [
+		{
+			name: 'Extra small',
+			valueShow: '1px',
+			valueCode: '1px',
+		},
+		{
+			name: 'Small',
+			valueShow: '2px',
+			valueCode: '2px',
+		},
+		{
+			name: 'Medium',
+			valueShow: '4px',
+			valueCode: '4px',
+		},
+		{
+			name: 'Large',
+			valueShow: '8px',
+			valueCode: '8px',
+		},
+		{
+			name: 'Full',
+			valueShow: '9999px',
+			valueCode: '9999px',
+		},
+		{
+			name: 'Round',
+			valueShow: '100%',
+			valueCode: '100%',
+		},
+	] }
+	applyTokenStyle={ ( valueCode ) => ( {
+		borderRadius: valueCode,
+		border: '1px solid #1e1e1e',
+	} ) }
+/>
+
+## CSS tokens
+
+Radius tokens are defined as SASS variables:
+
+-   `$radius-x-small`
+-   `$radius-small`
+-   `$radius-medium`
+-   `$radius-large`
+-   `$radius-full`
+-   `$radius-round`
+
+They can be used like so:
+
+```css
+.radius-extra-small {
+	border-radius: $radius-x-small;
+}
+.radius-small {
+	border-radius: $radius-small;
+}
+.radius-medium {
+	border-radius: $radius-medium;
+}
+.radius-large {
+	border-radius: $radius-large;
+}
+.radius-full {
+	border-radius: $radius-full;
+}
+.radius-round {
+	border-radius: $radius-round;
+}
+```
+
+## JS tokens
+
+When working in the `@wordpress/components` package, the radius tokens can also be consumed as JavaScript variables via the `CONFIG` object found in the `packages/components/src/utils/index.js` file:
+
+-   `CONFIG.radiusXSmall`
+-   `CONFIG.radiusSmall`
+-   `CONFIG.radiusMedium`
+-   `CONFIG.radiusLarge`
+-   `CONFIG.radiusFull`
+-   `CONFIG.radiusRound`
+
+```js
+// Note: the `CONFIG` object is only available within the `@wordpress/components` package.
+import { CONFIG } from '../utils';
+
+// Later in the code:
+border-radius: ${ CONFIG.radiusXSmall };
+```
diff --git a/storybook/stories/tokens/typography.mdx b/storybook/stories/tokens/typography.mdx
new file mode 100644
index 00000000000000..c3b49b2865f186
--- /dev/null
+++ b/storybook/stories/tokens/typography.mdx
@@ -0,0 +1,178 @@
+import { Meta, Typeset } from '@storybook/addon-docs/blocks';
+
+<Meta title="Tokens/Typography" name="page" />
+ 
+export const typography = {
+	type: {
+		primary: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+	},
+	weight: {
+		regular: '400',
+		medium: '500',
+	},
+	size: {
+		s1: 11,
+		s2: 12,
+		s3: 13,
+		s4: 15,
+		s5: 20,
+		s6: 32,
+	},
+};
+ 
+export const SampleTextHeading = 'Code is Poetry.';
+export const SampleTextParagraph = 'WordPress grows when people like you tell their friends about it, and the thousands of businesses and services that are built on and around WordPress share that fact with their users.'
+ 
+# Typography tokens
+
+This document outlines the various tokens relating to typography in the WordPress components system.
+
+## Semantic tokens
+
+Semantic tokens compose primitive tokens to create reusable type styles enhancing consistency across the software.
+
+They are defined as SASS mixins and can be used like so:
+
+```css
+.my-component {
+	@include heading-large();
+}
+```
+
+### Headings
+
+<Typeset
+	fontSizes={[
+		Number(typography.size.s6),
+		Number(typography.size.s5),
+		Number(typography.size.s4),
+		Number(typography.size.s3),
+		Number(typography.size.s2),
+		Number(typography.size.s1),
+	]}
+	fontWeight={typography.weight.medium}
+	sampleText={SampleTextHeading}
+	fontFamily={typography.type.primary}
+/>
+
+<table>
+	<thead>
+		<tr>
+			<th>Style</th>
+			<th>Primitives</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>heading-2x-large</td>
+			<td>`$font-family-headings`, `font-weight-medium`, `font-size-2x-large`, `line-height-2x-large`</td>
+		</tr>
+		<tr>
+			<td>heading-x-large</td>
+			<td>`$font-family-headings`, `font-weight-medium`, `font-size-x-large`, `line-height-medium`</td>
+		</tr>
+		<tr>
+			<td>heading-large</td>
+			<td>`$font-family-headings`, `font-weight-medium`, `font-size-large`, `line-height-small`</td>
+		</tr>
+		<tr>
+			<td>heading-medium</td>
+			<td>`$font-family-headings`, `font-weight-medium`, `font-size-medium`, `line-height-small`</td>
+		</tr>
+		<tr>
+			<td>heading-small</td>
+			<td>`$font-family-headings`, `font-weight-medium`, `font-size-x-small`, `line-height-x-small`</td>
+		</tr>
+	</tbody>
+</table>
+
+### Body
+
+<Typeset
+	fontSizes={[
+		Number(typography.size.s5),
+		Number(typography.size.s4),
+		Number(typography.size.s3),
+		Number(typography.size.s2),
+	]}
+	fontWeight={typography.weight.regular}
+	sampleText={SampleTextParagraph}
+	fontFamily={typography.type.primary}
+/>
+
+<table>
+	<thead>
+		<tr>
+			<th>Style</th>
+			<th>Primitives</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>body-x-large</td>
+			<td>`$font-family-body`, `font-weight-regular`, `font-size-x-large`, `line-height-x-large`</td>
+		</tr>
+		<tr>
+			<td>body-large</td>
+			<td>`$font-family-body`, `font-weight-regular`, `font-size-large`, `line-height-medium`</td>
+		</tr>
+		<tr>
+			<td>body-medium</td>
+			<td>`$font-family-body`, `font-weight-regular`, `font-size-medium`, `line-height-small`</td>
+		</tr>
+		<tr>
+			<td>body-small</td>
+			<td>`$font-family-body`, `font-weight-regular`, `font-size-small`, `line-height-x-small`</td>
+		</tr>
+	</tbody>
+</table>
+
+## Primitive tokens
+ 
+Primitive tokens are organized into 4 sets relating to `size`, `line-height`, `weight`, and `family`, defined as SASS variables.
+
+### Size
+```css
+$font-size-x-small: 11px;
+$font-size-small: 12px;
+$font-size-medium: 13px;
+$font-size-large: 15px;
+$font-size-x-large: 20px;
+$font-size-2x-large: 32px;
+```
+
+### Line-height
+
+```css
+$font-line-height-x-small: 16px;
+$font-line-height-small: 20px;
+$font-line-height-medium: 24px;
+$font-line-height-large: 28px;
+$font-line-height-x-large: 32px;
+$font-line-height-2x-large: 40px;
+```
+
+### Weight
+
+```css
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+```
+
+### Families
+
+```css
+$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-mono: Menlo, Consolas, monaco, monospace;
+```
+
+Generally use of semantic tokens is encouraged, but it is possible to create ad hoc styles by referencing primitives, for example:
+
+```css
+.my-type-style {
+	font-family: $font-family-headings;
+	line-height: $font-line-height-x-small;
+	font-weight: $font-weight-regular;
+}
+```
diff --git a/storybook/style-ltr.lazy.scss b/storybook/style-ltr.lazy.scss
deleted file mode 100644
index a799679206e50d..00000000000000
--- a/storybook/style-ltr.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (ltr)
-@import "../packages/components/build-style/style";
-@import "../packages/block-editor/build-style/style";
-@import "../packages/block-library/build-style/style";
-@import "../packages/block-library/build-style/theme";
-@import "../packages/block-library/build-style/editor";
-@import "../packages/format-library/build-style/style";
diff --git a/storybook/style-rtl.lazy.scss b/storybook/style-rtl.lazy.scss
deleted file mode 100644
index 0aae79416b079a..00000000000000
--- a/storybook/style-rtl.lazy.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// @wordpress package styles (rtl)
-@import "../packages/components/build-style/style-rtl";
-@import "../packages/block-editor/build-style/style-rtl";
-@import "../packages/block-library/build-style/style-rtl";
-@import "../packages/block-library/build-style/theme-rtl";
-@import "../packages/block-library/build-style/editor-rtl";
-@import "../packages/format-library/build-style/style-rtl";
diff --git a/storybook/style.scss b/storybook/style.scss
deleted file mode 100644
index 172fc48710b801..00000000000000
--- a/storybook/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "sass:math";
-
-// Loading @wordpress/base-styles as they have mixins and other dependencies
-// used within @wordpress/*/src/*.scss
-@import "~@wordpress/base-styles/animations";
-@import "~@wordpress/base-styles/breakpoints";
-@import "~@wordpress/base-styles/colors";
-@import "~@wordpress/base-styles/mixins";
-@import "~@wordpress/base-styles/default-custom-properties";
-@import "~@wordpress/base-styles/variables";
-@import "~@wordpress/base-styles/z-index";
diff --git a/storybook/theme.js b/storybook/theme.js
index c13de5b53d4f53..9e340119eb48f8 100644
--- a/storybook/theme.js
+++ b/storybook/theme.js
@@ -6,6 +6,37 @@ import { create } from '@storybook/theming/create';
 export default create( {
 	base: 'light',
 	brandTitle: 'WordPress Components',
-	brandImage:
-		'https://s.w.org/style/images/about/WordPress-logotype-wmark.png',
+	brandImage: './wp-logo@2x.png',
+
+	// Typography
+	fontBase:
+		'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+	fontCode: 'monospace',
+
+	//
+	colorPrimary: '#3858E9',
+	colorSecondary: '#3858E9',
+
+	// UI
+	appBg: '#ffffff',
+	appContentBg: '#ffffff',
+	appPreviewBg: '#ffffff',
+	appBorderColor: '#DCDCDE',
+	appBorderRadius: 4,
+
+	// Text colors
+	textColor: '#10162F',
+	textInverseColor: '#ffffff',
+
+	// Toolbar default and active colors
+	barTextColor: '#9E9E9E',
+	barSelectedColor: '#3858E9',
+	barHoverColor: '#3858E9',
+	barBg: '#ffffff',
+
+	// Form colors
+	inputBg: '#ffffff',
+	inputBorder: '#10162F',
+	inputTextColor: '#10162F',
+	inputBorderRadius: 2,
 } );
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
deleted file mode 100644
index 1747cc2f9caa0a..00000000000000
--- a/storybook/webpack.config.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-const path = require( 'path' );
-
-/**
- * WordPress dependencies
- */
-const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
-
-const scssLoaders = ( { isLazy } ) => [
-	{
-		loader: 'style-loader',
-		options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
-	},
-	'css-loader',
-	{
-		loader: 'postcss-loader',
-		options: {
-			postcssOptions: {
-				ident: 'postcss',
-				plugins: postcssPlugins,
-			},
-		},
-	},
-	'sass-loader',
-];
-
-module.exports = ( { config } ) => {
-	config.module.rules.push(
-		{
-			// Currently does not work with our tsx stories
-			// See https://github.com/storybookjs/storybook/issues/17275
-			test: /\/stories\/.+\.(j|t)sx?$/,
-			loader: require.resolve( '@storybook/source-loader' ),
-			enforce: 'pre',
-		},
-		{
-			// Allows a story description to be written as a doc comment above the exported story
-			test: /\/stories\/.+\.(j|t)sx?$/,
-			loader: path.resolve(
-				__dirname,
-				'./webpack/description-loader.js'
-			),
-			enforce: 'post',
-		},
-		{
-			// Adds a `sourceLink` parameter to the story metadata, based on the file path
-			test: /\/stories\/.+\.(j|t)sx?$/,
-			loader: path.resolve(
-				__dirname,
-				'./webpack/source-link-loader.js'
-			),
-			enforce: 'post',
-		},
-		{
-			test: /\.scss$/,
-			exclude: /\.lazy\.scss$/,
-			use: scssLoaders( { isLazy: false } ),
-			include: path.resolve( __dirname ),
-		},
-		{
-			test: /\.lazy\.scss$/,
-			use: scssLoaders( { isLazy: true } ),
-			include: path.resolve( __dirname ),
-		}
-	);
-
-	return config;
-};
diff --git a/storybook/webpack/copy-tags-to-badges.js b/storybook/webpack/copy-tags-to-badges.js
new file mode 100644
index 00000000000000..07dc068135cc5f
--- /dev/null
+++ b/storybook/webpack/copy-tags-to-badges.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+const babel = require( '@babel/core' );
+
+/**
+ * Reads `tags` from the story metadata and copies them to `badges`.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see '../badges.js' - Badges config
+ */
+function copyTagsToBadgePlugin() {
+	return {
+		visitor: {
+			ExportDefaultDeclaration( visitorPath ) {
+				const properties =
+					// When default export is anonymous, the declaration is an object expression
+					visitorPath.node?.declaration.properties ??
+					// When default export is named, the declaration is an identifier, usually the previous node
+					visitorPath.getPrevSibling().node.declarations[ 0 ].init
+						.properties;
+
+				alterParameters( properties );
+			},
+		},
+	};
+}
+
+function alterParameters( properties ) {
+	const STATUS_PREFIX = 'status-';
+
+	const tags =
+		properties
+			.find( ( op ) => op.key.name === 'tags' )
+			?.value.elements.map( ( tag ) => tag.value ) ?? [];
+	const statusTags = tags.filter( ( tag ) =>
+		tag.startsWith( STATUS_PREFIX )
+	);
+
+	const badges = babel.types.objectProperty(
+		babel.types.identifier( 'badges' ),
+		babel.types.arrayExpression(
+			statusTags.map( ( tag ) =>
+				babel.types.stringLiteral(
+					tag.substring( STATUS_PREFIX.length )
+				)
+			)
+		)
+	);
+
+	let parameters = properties.find( ( op ) => op.key.name === 'parameters' );
+
+	if ( ! parameters ) {
+		parameters = babel.types.objectProperty(
+			babel.types.identifier( 'parameters' ),
+			babel.types.objectExpression( [] )
+		);
+		properties.push( parameters );
+	}
+
+	parameters.value.properties = [ badges, ...parameters.value.properties ];
+}
+
+module.exports = function ( source ) {
+	const output = babel.transform( source, {
+		plugins: [ copyTagsToBadgePlugin ],
+		filename: this.resourcePath,
+		sourceType: 'module',
+	} );
+	return output.code;
+};
diff --git a/storybook/webpack/description-loader.js b/storybook/webpack/description-loader.js
deleted file mode 100644
index 93d9fabfb09ff6..00000000000000
--- a/storybook/webpack/description-loader.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-const babel = require( '@babel/core' );
-
-/**
- * Allows a story description to be written as a doc comment above the exported story.
- *
- * Based on https://github.com/izhan/storybook-description-loader
- *
- * @example
- * ```jsx
- * // This comment will become the description for the story in the generated docs.
- * export const MyStory = Template.bind({});
- * ```
- */
-function annotateDescriptionPlugin() {
-	return {
-		visitor: {
-			ExportNamedDeclaration( path ) {
-				if ( ! path.node.leadingComments ) {
-					return;
-				}
-
-				const commentValues = path.node.leadingComments.map(
-					( node ) => {
-						if ( node.type === 'CommentLine' ) {
-							return node.value.trimLeft();
-						}
-						// else, node.type === 'CommentBlock'
-						return node.value
-							.split( '\n' )
-							.map( ( line ) => {
-								// stripping out the whitespace and * from comment blocks
-								return line.replace(
-									/^(\s+)?(\*+)?(\s+)?/,
-									''
-								);
-							} )
-							.join( '\n' )
-							.trim();
-					}
-				);
-				const description = commentValues.join( '\n' );
-				const storyId = path.node.declaration.declarations[ 0 ].id.name;
-
-				path.container.push(
-					...babel.template.ast`
-							${ storyId }.parameters ??= {};
-							${ storyId }.parameters.docs ??= {};
-							${ storyId }.parameters.docs.description ??= {};
-							${ storyId }.parameters.docs.description.story ??= ${ JSON.stringify(
-						description
-					) };
-					`
-				);
-			},
-		},
-	};
-}
-
-module.exports = function ( source ) {
-	const output = babel.transform( source, {
-		plugins: [ annotateDescriptionPlugin ],
-		filename: __filename,
-		sourceType: 'module',
-	} );
-	return output.code;
-};
diff --git a/storybook/webpack/source-link-loader.js b/storybook/webpack/source-link-loader.js
index d9501aa737dad3..f8702c1c367174 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 );
 	}
@@ -57,10 +58,10 @@ function alterParameters( properties, componentPath ) {
 	];
 }
 
-module.exports = function ( source, { sources } ) {
+module.exports = function ( source ) {
 	const output = babel.transform( source, {
 		plugins: [ addSourceLinkPlugin ],
-		filename: sources[ 0 ],
+		filename: this.resourcePath,
 		sourceType: 'module',
 	} );
 	return output.code;
diff --git a/test/e2e/MIGRATION.md b/test/e2e/MIGRATION.md
deleted file mode 100644
index aad4305aa8c3a9..00000000000000
--- a/test/e2e/MIGRATION.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Migration guide
-
-## Migration steps for tests
-
-1. Choose a test suite to migrate in `packages/e2e-tests/specs`, rename `.test.js` into `.spec.js` and put it in the same folder structure inside `test/e2e/specs`.
-2. Require the test helpers from `@wordpress/e2e-test-utils-playwright`:
-    ```js
-    const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-    ```
-3. Change all occurrences of `describe`, `beforeAll`, `beforeEach`, `afterEach` and `afterAll` with the `test.` prefix. For instance, `describe` turns into `test.describe`.
-4. Use the [fixtures API](https://playwright.dev/docs/test-fixtures) to require previously global variables like `page` and `browser`.
-5. Delete all the imports of `e2e-test-utils`. Instead, use the fixtures API to directly get the `admin`, `editor`, `pageUtils` and `requestUtils`. (However, `admin`, `editor` and `pageUtils` are not allowed in `beforeAll` and `afterAll`, rewrite them using `requestUtils` instead.)
-6. If tests are for the site editor, configure the editor utils to use an iframe:
-    ```js
-    const {
-        test,
-        expect,
-        Editor,
-    } = require( '@wordpress/e2e-test-utils-playwright' );
-
-    test.use( {
-        editor: async ( { page }, use ) => {
-            await use( new Editor( { page, hasIframe: true } ) );
-        },
-    } );
-    ```
-7. If there's a missing util, go ahead and [migrate it](#migration-steps-for-test-utils).
-8. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required.
-
-## Migration steps for test utils
-
-Playwright utilities are organized a little differently to those in the `e2e-test-utils` package. The `e2e-test-utils-playwright` package has the following folders that utils are divided up into:
-- `admin` - Utilities related to WordPress admin or WordPress admin's user interface (e.g. `visitAdminPage`).
-- `editor` - Utilities for the block editor (e.g. `clickBlockToolbarButton`).
-- `pageUtils` - General utilities for interacting with the browser (e.g. `pressKeyWithModifier`).
-- `requestUtils` - Utilities for making REST API requests (e.g. `activatePlugin`). These utilities are used for setup and teardown of tests.
-
-1. Copy the existing file in `e2e-test-utils` and paste it in the `admin`, `editor`, `page` or `request` folder in `e2e-test-utils-playwright` depending on the type of util.
-2. Update any parts of the util that need to be rewritten:
-    - The `page` and `browser` variables are available in `admin`, `editor` and `pageUtils` as `this.page` and `this.browser`.
-    - All the other utils in the same class are available in `this` and bound to the same instance. You can remove any `import` statements and use `this` to access them.
-    - Consider updating the util to use TypeScript if you're comfortable doing so.
-3. Import the newly migrated util in `index.ts` and put it inside the `Admin`/`Editor`/`PageUtils`/`RequestUtils` class as an instance field.
diff --git a/test/e2e/README.md b/test/e2e/README.md
index c39501e866172c..5f353211b2178f 100644
--- a/test/e2e/README.md
+++ b/test/e2e/README.md
@@ -2,114 +2,9 @@
 
 End-To-End (E2E) tests for WordPress.
 
-This directory is the new place for E2E tests in Gutenberg. We expect new tests to be placed here and follow the [best practices](#best-practices) listed below. We use [Playwright](https://playwright.dev/) and its test runner to run the tests in Chromium by default. [`@wordpress/e2e-test-utils-playwright`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/e2e-test-utils-playwright) is used as a helper package to simplify the usages. See the documentation of both for more information.
+This directory is the new place for E2E tests in Gutenberg. We expect new tests to be placed here. We use [Playwright](https://playwright.dev/) and its test runner to run the tests in Chromium by default. [`@wordpress/e2e-test-utils-playwright`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/e2e-test-utils-playwright) is used as a helper package to simplify the usage. See the documentation of both for more information.
 
-See the [migration guide](https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/MIGRATION.md) if you're coming from the previous Jest + Puppeteer framework.
+> **Note**
+> See the [migration guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/migration.md) if you're coming from the previous Jest + Puppeteer framework.
 
-## Best practices
-
-### Forbid `$`, use `locator` instead
-
-In fact, any API that returns `ElementHandle` is [discouraged](https://playwright.dev/docs/api/class-page#page-query-selector). This includes `$`, `$$`, `$eval`, `$$eval`, etc. [`Locator`](https://playwright.dev/docs/api/class-locator) is a much better API and can be used with playwright's [assertions](https://playwright.dev/docs/api/class-locatorassertions). This also works great with Page Object Model since that locator is lazy and doesn't return a promise.
-
-### Use accessible selectors
-
-Use the selector engine [role-selector](https://playwright.dev/docs/selectors#role-selector) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations. The syntax should be straightforward and looks like this:
-
-```js
-// Select a button with the accessible name "Hello World" (case-insensitive).
-page.locator( 'role=button[name="Hello World"i]' );
-
-// Using short-form API, the `name` is case-insensitive by default.
-page.getByRole( 'button', { name: 'Hello World' } );
-```
-
-It's recommended to append `i` to the name attribute to match it case-insensitively wherever it makes sense. It can also be chained with built-in selector engines to perform complex queries:
-
-```js
-// Select a button with a name ends with `Back` and is visible on the screen.
-page.locator( 'role=button[name=/Back$/] >> visible=true' );
-// Select a button with the (exact) name "View options" under `#some-section`.
-page.locator( 'css=#some-section >> role=button[name="View options"]' );
-```
-
-See the [official documentation](https://playwright.dev/docs/selectors#role-selector) for more info on how to use them.
-
-### Selectors are strict by default
-
-To encourage better practices for querying elements, selectors are [strict](https://playwright.dev/docs/api/class-browser#browser-new-page-option-strict-selectors) by default, meaning that it will throw an error if the query returns more than one element.
-
-### Don't overload test-utils, inline simple utils
-
-`e2e-test-utils` are too bloated with too many utils. Most of them are simple enough to be inlined directly in tests. With the help of accessible selectors, simple utils are easier to write now. For utils that only take place on a certain page, use Page Object Model instead (with an exception of clearing states with `requestUtils` which are better placed in `e2e-test-utils`). Otherwise, only create an util if the action is complex and repetitive enough.
-
-### Favor Page Object Model over utils
-
-As mentioned above, [Page Object Model](https://playwright.dev/docs/test-pom) is the preferred way to create reusable utility functions on a certain page.
-
-The rationale behind using a POM is to group utils under namespaces to be easier to discover and use. In fact, `PageUtils` in the `e2e-test-utils-playwright` package is also a POM, which avoids the need for global variables, and utils can reference each other with `this`.
-
-### Restify actions to clear or set states.
-
-It's slow to set states manually before or after tests, especially when they're repeated multiple times between tests. It's recommended to set them via API calls. Use `requestUtils.rest` and `requestUtils.batchRest` instead to call the [REST API](https://developer.wordpress.org/rest-api/reference/) (and add them to `requestUtils` if needed). We should still add a test for manually setting them, but that should only be tested once.
-
-### Avoid global variables
-
-Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed as global variables. This makes it harder to work with when we have multiple pages/tabs in the same test, or if we want to run multiple tests in parallel. `@playwright/test` has the concept of [fixtures](https://playwright.dev/docs/test-fixtures) which allows us to inject `page`, `browser`, and other parameters into the tests.
-
-### Make explicit assertions
-
-We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read.
-
-## Cross-browser testing
-
-By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
-
-```js
-test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
-	// ...
-} );
-
-test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
-	// ...
-} );
-
-test.describe( 'Grouping tests (@webkit, -chromium)', () => {
-	test( 'I will only run in webkit', async ( { page } ) => {
-		// ...
-	} );
-} );
-```
-
-## Commands
-
-```bash
-# Run all available tests.
-npm run test:e2e:playwright
-
-# Run in headed mode.
-npm run test:e2e:playwright -- --headed
-
-# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
-npm run test:e2e:playwright -- --project=webkit --project=firefox
-
-# Run a single test file.
-npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
-
-# Debugging.
-npm run test:e2e:playwright -- --debug
-```
-
-If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
-
-```bash
-# Run all available tests.
-xvfb-run npm run test:e2e:playwright
-
-# Only run webkit tests.
-xvfb-run -- npm run test:e2e:playwright -- --project=webkit
-```
-
-**Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
-
-<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+**The [guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md) has been moved to the documentation folder.**
diff --git a/test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg b/test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg
new file mode 100644
index 00000000000000..620ba3599922cd
Binary files /dev/null and b/test/e2e/assets/3200x2400_e2e_test_image_responsive_lightbox.jpeg differ
diff --git a/test/e2e/assets/Exo2-Regular.woff b/test/e2e/assets/Exo2-Regular.woff
new file mode 100644
index 00000000000000..15077e740383f6
Binary files /dev/null and b/test/e2e/assets/Exo2-Regular.woff differ
diff --git a/test/e2e/assets/Exo2-SemiBoldItalic.woff2 b/test/e2e/assets/Exo2-SemiBoldItalic.woff2
new file mode 100644
index 00000000000000..d8f26bc4217549
Binary files /dev/null and b/test/e2e/assets/Exo2-SemiBoldItalic.woff2 differ
diff --git a/packages/e2e-tests/assets/greeting-reusable-block.json b/test/e2e/assets/greeting-reusable-block.json
similarity index 100%
rename from packages/e2e-tests/assets/greeting-reusable-block.json
rename to test/e2e/assets/greeting-reusable-block.json
diff --git a/test/e2e/config/global-setup.ts b/test/e2e/config/global-setup.ts
index 10f2822fdfe1ae..787488ac72fcab 100644
--- a/test/e2e/config/global-setup.ts
+++ b/test/e2e/config/global-setup.ts
@@ -25,6 +25,19 @@ async function globalSetup( config: FullConfig ) {
 	// Authenticate and save the storageState to disk.
 	await requestUtils.setupRest();
 
+	// Reset the test environment before running the tests.
+	await Promise.all( [
+		requestUtils.activateTheme( 'twentytwentyone' ),
+		// Disable this test plugin as it's conflicting with some of the tests.
+		// We already have reduced motion enabled and Playwright will wait for most of the animations anyway.
+		requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-disables-the-css-animations'
+		),
+		requestUtils.deleteAllPosts(),
+		requestUtils.deleteAllBlocks(),
+		requestUtils.resetPreferences(),
+	] );
+
 	await requestContext.dispose();
 }
 
diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
index 8796de6fdb28b0..f5410f2230372b 100644
--- a/test/e2e/playwright.config.ts
+++ b/test/e2e/playwright.config.ts
@@ -2,55 +2,23 @@
  * External dependencies
  */
 import os from 'os';
-import path from 'path';
 import { fileURLToPath } from 'url';
-import { devices } from '@playwright/test';
-import type { PlaywrightTestConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
 
-const STORAGE_STATE_PATH =
-	process.env.STORAGE_STATE_PATH ||
-	path.join( process.cwd(), 'artifacts/storage-states/admin.json' );
+/**
+ * WordPress dependencies
+ */
+const baseConfig = require( '@wordpress/scripts/config/playwright.config' );
 
-const config: PlaywrightTestConfig = {
+const config = defineConfig( {
+	...baseConfig,
 	reporter: process.env.CI
 		? [ [ 'github' ], [ './config/flaky-tests-reporter.ts' ] ]
 		: 'list',
-	forbidOnly: !! process.env.CI,
 	workers: 1,
-	retries: process.env.CI ? 2 : 0,
-	timeout: parseInt( process.env.TIMEOUT || '', 10 ) || 100_000, // Defaults to 100 seconds.
-	// Don't report slow test "files", as we will be running our tests in serial.
-	reportSlowTests: null,
-	testDir: fileURLToPath( new URL( './specs', 'file:' + __filename ).href ),
-	outputDir: path.join( process.cwd(), 'artifacts/test-results' ),
 	globalSetup: fileURLToPath(
 		new URL( './config/global-setup.ts', 'file:' + __filename ).href
 	),
-	use: {
-		baseURL: process.env.WP_BASE_URL || 'http://localhost:8889',
-		headless: true,
-		viewport: {
-			width: 960,
-			height: 700,
-		},
-		ignoreHTTPSErrors: true,
-		locale: 'en-US',
-		contextOptions: {
-			reducedMotion: 'reduce',
-			strictSelectors: true,
-		},
-		storageState: STORAGE_STATE_PATH,
-		actionTimeout: 10_000, // 10 seconds.
-		trace: 'retain-on-failure',
-		screenshot: 'only-on-failure',
-		video: 'on-first-retry',
-	},
-	webServer: {
-		command: 'npm run wp-env start',
-		port: 8889,
-		timeout: 120_000, // 120 seconds.
-		reuseExistingServer: true,
-	},
 	projects: [
 		{
 			name: 'chromium',
@@ -65,7 +33,7 @@ const config: PlaywrightTestConfig = {
 				 * Headless webkit won't receive dataTransfer with custom types in the
 				 * drop event on Linux. The solution is to use `xvfb-run` to run the tests.
 				 * ```sh
-				 * xvfb-run npm run test:e2e:playwright
+				 * xvfb-run npm run test:e2e
 				 * ```
 				 * See `.github/workflows/end2end-test-playwright.yml` for advanced usages.
 				 */
@@ -81,6 +49,6 @@ const config: PlaywrightTestConfig = {
 			grepInvert: /-firefox/,
 		},
 	],
-};
+} );
 
 export default config;
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png
new file mode 100644
index 00000000000000..b488fe1a7e4833
Binary files /dev/null and b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png differ
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.txt
deleted file mode 100644
index 023f807dff9f36..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-Snapshot Diff:
-- First value
-+ Second value
-
-- data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q==
-+ data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAYACgMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAABwn/xAAgEAABAgUFAAAAAAAAAAAAAAAABAUBAwYJNTh0d7K1/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJTZU1T1Tx+u9FuNXnbKrdxM7RAA/9k=
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.png b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.png
new file mode 100644
index 00000000000000..470cb2fe3a4590
Binary files /dev/null and b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.png differ
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.txt
deleted file mode 100644
index 4409ceaca181e3..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-Snapshot Diff:
-- First value
-+ Second value
-
-- data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q==
-+ data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAWAAEBAQAAAAAAAAAAAAAAAAAABwn/xAAhEAAAAgsBAAAAAAAAAAAAAAAABQIEBwgVGVVWk5XR1P/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCUyVHp7+ZVtTHwhJUenv5lW1MfCNXosa1NbzJdCLGtTW8yXQH/2Q==
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.png b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.png
new file mode 100644
index 00000000000000..90f3057d4d52d8
Binary files /dev/null and b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.png differ
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.txt
deleted file mode 100644
index 5f53c934223d3c..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-Snapshot Diff:
-- First value
-+ Second value
-
-- data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAoACgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAJB//EACAQAAADCQEAAAAAAAAAAAAAAAAEBQEDBgk1OHR3srX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlMlS6eKdfnvRTgrytVTuQ86aChkqXTxTr896KcFeVqqdyHnTQH//2Q==
-+ data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAwICAgICAwICAgMDAwMEBgQEBAQECAYGBQYJCAoKCQgJCQoMDwwKCw4LCQkNEQ0ODxAQERAKDBITEhATDxAQEP/bAEMBAwMDBAMECAQECBALCQsQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEP/AABEIAAUABQMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABoQAQABBQAAAAAAAAAAAAAAAAAEBwk4hbX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Aqm1xgnTLddiaAD//2Q==
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-created-by-pasting-an-empty-list-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-created-by-pasting-an-empty-list-1-chromium.txt
deleted file mode 100644
index a947833fba19d5..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-created-by-pasting-an-empty-list-1-chromium.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-exited-to-selected-paragraph-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-exited-to-selected-paragraph-1-chromium.txt
deleted file mode 100644
index 468d73c8514442..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/List-can-be-exited-to-selected-paragraph-1-chromium.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-1-chromium.txt
deleted file mode 100644
index cbf68836cabedb..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-1-chromium.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-2-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-2-chromium.txt
deleted file mode 100644
index 2b3650ed64426e..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-2-chromium.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>2</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-3-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-3-chromium.txt
deleted file mode 100644
index 2b3650ed64426e..00000000000000
--- a/test/e2e/specs/editor/blocks/__snapshots__/List-selects-all-transformed-output-3-chromium.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>2</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-character-newlines-2-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-character-newlines-2-chromium.txt
index d1e3a3869958bf..46e5991e532132 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-character-newlines-2-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-character-newlines-2-chromium.txt
@@ -1,5 +1,3 @@
 <!-- wp:preformatted -->
-<pre class="wp-block-preformatted">0
-1
-2</pre>
+<pre class="wp-block-preformatted">0<br>1<br>2</pre>
 <!-- /wp:preformatted -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-white-space-when-merging-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-white-space-when-merging-1-chromium.txt
index a89cb7555bbf83..be7745e6bc1207 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-white-space-when-merging-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Preformatted-should-preserve-white-space-when-merging-1-chromium.txt
@@ -1,5 +1,3 @@
 <!-- wp:preformatted -->
-<pre class="wp-block-preformatted">1
-2
-3</pre>
+<pre class="wp-block-preformatted">1<br>2<br><br>3</pre>
 <!-- /wp:preformatted -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-a-caption-to-be-added-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-a-caption-to-be-added-1-chromium.txt
index 144b62e5e5341f..cf4c71986ba857 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-a-caption-to-be-added-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-a-caption-to-be-added-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><figcaption class="wp-element-caption">Caption!</figcaption></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><figcaption class="wp-element-caption">Caption!</figcaption></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-1-chromium.txt
index 12024dcd6a8a09..c29304a4c7480e 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-2-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-2-chromium.txt
index 867cde963258b7..c17f3e08254169 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-2-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-adding-and-deleting-columns-across-the-table-header-body-and-footer-2-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-cells-to-be-selected-when-the-cell-area-outside-of-the-RichText-is-clicked-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-cells-to-be-selected-when-the-cell-area-outside-of-the-RichText-is-clicked-1-chromium.txt
index 6be90e739c1bb5..06a2ec73cd7e92 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-cells-to-be-selected-when-the-cell-area-outside-of-the-RichText-is-clicked-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-cells-to-be-selected-when-the-cell-area-outside-of-the-RichText-is-clicked-1-chromium.txt
@@ -1,3 +1,3 @@
-<!-- wp:table {"hasFixedLayout":true} -->
+<!-- wp:table -->
 <figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td><br><br><br><br></td><td>Second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-columns-to-be-aligned-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-columns-to-be-aligned-1-chromium.txt
index 6986d5c5b54cd5..fbc0a773057dc4 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-columns-to-be-aligned-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-columns-to-be-aligned-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>None</td><td class="has-text-align-left" data-align="left">To the left</td><td class="has-text-align-center" data-align="center">Centered</td><td class="has-text-align-right" data-align="right">Right aligned</td></tr><tr><td></td><td class="has-text-align-left" data-align="left"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-right" data-align="right"></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>None</td><td class="has-text-align-left" data-align="left">To the left</td><td class="has-text-align-center" data-align="center">Centered</td><td class="has-text-align-right" data-align="right">Right aligned</td></tr><tr><td></td><td class="has-text-align-left" data-align="left"></td><td class="has-text-align-center" data-align="center"></td><td class="has-text-align-right" data-align="right"></td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-1-chromium.txt
index 467ab42d768051..1d20e6018be8d6 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th>header</th><th></th></tr></thead><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td>footer</td><td></td></tr></tfoot></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>header</th><th></th></tr></thead><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td>footer</td><td></td></tr></tfoot></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-2-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-2-chromium.txt
index 0aa0e667b7141d..8fbd8207d2f1a4 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-2-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-header-and-footer-rows-to-be-switched-on-and-off-2-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-text-to-by-typed-into-cells-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-text-to-by-typed-into-cells-1-chromium.txt
index adce67703575d2..80c17e6de4f55f 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-text-to-by-typed-into-cells-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-allows-text-to-by-typed-into-cells-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>This</td><td>is</td></tr><tr><td>table</td><td>block</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>This</td><td>is</td></tr><tr><td>table</td><td>block</td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-displays-a-form-for-choosing-the-row-and-column-count-of-the-table-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-displays-a-form-for-choosing-the-row-and-column-count-of-the-table-1-chromium.txt
index 39b6f395f28ada..3688278430c929 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-displays-a-form-for-choosing-the-row-and-column-count-of-the-table-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-displays-a-form-for-choosing-the-row-and-column-count-of-the-table-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Table-up-and-down-arrow-navigation-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Table-up-and-down-arrow-navigation-1-chromium.txt
index ea42038e553f94..9c0a994f5d294d 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Table-up-and-down-arrow-navigation-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Table-up-and-down-arrow-navigation-1-chromium.txt
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>1</td><td>4</td></tr><tr><td>2</td><td>3</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>1</td><td>4</td></tr><tr><td>2</td><td>3</td></tr></tbody></table></figure>
 <!-- /wp:table -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/avatar.spec.js b/test/e2e/specs/editor/blocks/avatar.spec.js
index 70c7f7bd681936..8bf39a7a60dbac 100644
--- a/test/e2e/specs/editor/blocks/avatar.spec.js
+++ b/test/e2e/specs/editor/blocks/avatar.spec.js
@@ -37,7 +37,7 @@ test.describe( 'Avatar', () => {
 
 		const username = 'Gravatar Gravatar';
 
-		const avatarBlock = page.locator(
+		const avatarBlock = editor.canvas.locator(
 			'role=document[name="Block: Avatar"i]'
 		);
 
@@ -52,6 +52,9 @@ test.describe( 'Avatar', () => {
 		);
 
 		await expect( blockInspectorControls ).toBeVisible();
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 
 		const userInput = page.locator(
 			'role=region[name="Editor settings"i] >> role=combobox[name="User"i]'
@@ -64,7 +67,8 @@ test.describe( 'Avatar', () => {
 
 		await newUser.click();
 
-		const newSrc = await avatarImage.getAttribute( 'src' );
+		const updatedAvatarImage = avatarBlock.locator( 'img' );
+		const newSrc = await updatedAvatarImage.getAttribute( 'src' );
 
 		expect( newSrc ).not.toBe( originalSrc );
 	} );
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index ece3d06a5e9e8e..d6b0a0a15c4ea2 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -10,6 +10,9 @@ test.describe( 'Buttons', () => {
 
 	test( 'has focus on button content', async ( { editor, page } ) => {
 		await editor.insertBlock( { name: 'core/buttons' } );
+		await expect(
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
+		).toBeFocused();
 		await page.keyboard.type( 'Content' );
 
 		// Check the content.
@@ -27,7 +30,9 @@ test.describe( 'Buttons', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/buttons' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Content' );
@@ -50,13 +55,16 @@ test.describe( 'Buttons', () => {
 	} ) => {
 		// Regression: https://github.com/WordPress/gutenberg/pull/19885
 		await editor.insertBlock( { name: 'core/buttons' } );
-		await pageUtils.pressKeyWithModifier( 'primary', 'k' );
 		await expect(
-			page.locator( 'role=combobox[name="URL"i]' )
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'primary+k' );
+		await expect(
+			page.locator( 'role=combobox[name="Search or type URL"i]' )
 		).toBeFocused();
 		await page.keyboard.press( 'Escape' );
 		await expect(
-			page.locator( 'role=textbox[name="Button text"i]' )
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
 		).toBeFocused();
 		await page.keyboard.type( 'WordPress' );
 
@@ -78,9 +86,12 @@ test.describe( 'Buttons', () => {
 	} ) => {
 		// Regression: https://github.com/WordPress/gutenberg/issues/34307
 		await editor.insertBlock( { name: 'core/buttons' } );
-		await pageUtils.pressKeyWithModifier( 'primary', 'k' );
 		await expect(
-			page.locator( 'role=combobox[name="URL"i]' )
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'primary+k' );
+		await expect(
+			page.locator( 'role=combobox[name="Search or type URL"i]' )
 		).toBeFocused();
 		await page.keyboard.type( 'https://example.com' );
 		await page.keyboard.press( 'Enter' );
@@ -91,7 +102,7 @@ test.describe( 'Buttons', () => {
 
 		// Focus should move from the link control to the button block's text.
 		await expect(
-			page.locator( 'role=textbox[name="Button text"i]' )
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
 		).toBeFocused();
 
 		// The link control should still be visible when a URL is set.
@@ -100,6 +111,34 @@ test.describe( 'Buttons', () => {
 		).toBeVisible();
 	} );
 
+	test( 'appends http protocol to links added which are missing a protocol', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Regression: https://github.com/WordPress/gutenberg/issues/34307
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await expect(
+			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'primary+k' );
+
+		const urlInput = page.locator(
+			'role=combobox[name="Search or type URL"i]'
+		);
+
+		await expect( urlInput ).toBeFocused();
+		await page.keyboard.type( 'example.com' );
+		await page.keyboard.press( 'Enter' );
+
+		// Move to "Edit" and switch UI back to edit mode
+		await pageUtils.pressKeys( 'Tab' );
+		await page.keyboard.press( 'Enter' );
+
+		// Check the value of the URL input has had http:// prepended.
+		await expect( urlInput ).toHaveValue( 'http://example.com' );
+	} );
+
 	test( 'can jump to the link editor using the keyboard shortcut', async ( {
 		editor,
 		page,
@@ -107,7 +146,7 @@ test.describe( 'Buttons', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/buttons' } );
 		await page.keyboard.type( 'WordPress' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'k' );
+		await pageUtils.pressKeys( 'primary+k' );
 		await page.keyboard.type( 'https://www.wordpress.org/' );
 		await page.keyboard.press( 'Enter' );
 		// Make sure that the dialog is still opened, and that focus is retained
@@ -126,4 +165,322 @@ test.describe( 'Buttons', () => {
 <!-- /wp:buttons -->`
 		);
 	} );
+
+	test( 'can toggle button link settings', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/buttons' } );
+		await page.keyboard.type( 'WordPress' );
+		await pageUtils.pressKeys( 'primary+k' );
+		await page.keyboard.type( 'https://www.wordpress.org/' );
+		await page.keyboard.press( 'Enter' );
+
+		// Edit link.
+		await page.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Open Advanced settings panel.
+		await page
+			.getByRole( 'region', {
+				name: 'Editor content',
+			} )
+			.getByRole( 'button', {
+				name: 'Advanced',
+			} )
+			.click();
+
+		const newTabCheckbox = page.getByLabel( 'Open in new tab' );
+		const noFollowCheckbox = page.getByLabel( 'nofollow' );
+
+		// Navigate to and toggle the "Open in new tab" checkbox.
+		await newTabCheckbox.click();
+
+		// Toggle should still have focus and be checked.
+		await expect( newTabCheckbox ).toBeChecked();
+		await expect( newTabCheckbox ).toBeFocused();
+
+		await page
+			//TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+			.locator( '.block-editor-link-control' )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+
+		// The link should have been inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							text: 'WordPress',
+							url: 'https://www.wordpress.org/',
+							rel: 'noreferrer noopener',
+							linkTarget: '_blank',
+						},
+					},
+				],
+			},
+		] );
+
+		// Edit link again.
+		await page.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Navigate to and toggle the "nofollow" checkbox.
+		await noFollowCheckbox.click();
+
+		// expect settings for `Open in new tab` and `No follow`
+		await expect( newTabCheckbox ).toBeChecked();
+		await expect( noFollowCheckbox ).toBeChecked();
+
+		await page
+			//TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.
+			.locator( '.block-editor-link-control' )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+
+		// Check the content again.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							text: 'WordPress',
+							url: 'https://www.wordpress.org/',
+							rel: 'noreferrer noopener nofollow',
+							linkTarget: '_blank',
+						},
+					},
+				],
+			},
+		] );
+	} );
+
+	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=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
+		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();
+
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+		);
+		await page.click( 'role=option[name="Color: Cyan bluish gray"i]' );
+		await page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+		);
+		await page.click( 'role=option[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\",\"style\":{\"elements\":{\"link\":{\"color\":{\"text\":\"var:preset|color|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 has-link-color 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();
+
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
+		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\"},\"elements\":{\"link\":{\"color\":{\"text\":\"#ff0000\"}}}}} -->
+<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background has-link-color 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();
+
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
+		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=option[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();
+
+		// Switch to the Styles tab.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
+		);
+		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 -->`
+		);
+	} );
+
+	test.describe( 'Block transforms', () => {
+		test.describe( 'FROM paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect( buttonBlock.attributes.text ).toBe( 'initial content' );
+			} );
+
+			test( 'should preserve the metadata attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect( buttonBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+
+			test( 'should preserve the block bindings', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'custom_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/buttons' );
+				const buttonBlock = ( await editor.getBlocks() )[ 0 ]
+					.innerBlocks[ 0 ];
+				expect( buttonBlock.name ).toBe( 'core/button' );
+				expect(
+					buttonBlock.attributes.metadata.bindings
+				).toMatchObject( {
+					text: {
+						source: 'core/post-meta',
+						args: {
+							key: 'custom_field',
+						},
+					},
+				} );
+			} );
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js
new file mode 100644
index 00000000000000..95d39906b0d8bb
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/classic.spec.js
@@ -0,0 +1,172 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const fs = require( 'fs/promises' );
+const os = require( 'os' );
+const { v4: uuid } = require( 'uuid' );
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	mediaUtils: async ( { page }, use ) => {
+		await use( new MediaUtils( { page } ) );
+	},
+} );
+
+test.describe( 'Classic', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test( 'should be inserted', async ( { editor, page, pageUtils } ) => {
+		await editor.insertBlock( { name: 'core/freeform' } );
+		// Ensure there is focus.
+		await page.click( '.mce-content-body' );
+		await page.keyboard.type( 'test' );
+		// Move focus away.
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		await expect.poll( editor.getEditedPostContent ).toBe( 'test' );
+	} );
+
+	test( 'should insert media, convert to blocks, and undo in one step', async ( {
+		editor,
+		mediaUtils,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/freeform' } );
+		// Ensure there is focus.
+		await page.click( '.mce-content-body' );
+		await page.keyboard.type( 'test' );
+
+		await page.getByRole( 'button', { name: /Add Media/i } ).click();
+
+		const modalGalleryTab = page.getByRole( 'tab', {
+			name: 'Create gallery',
+		} );
+
+		await expect( modalGalleryTab ).toBeVisible();
+		await modalGalleryTab.click();
+
+		const filename = await mediaUtils.upload(
+			page.locator( '.media-modal .moxie-shim input[type=file]' )
+		);
+
+		// Wait for upload
+		await expect(
+			page.locator( `role=checkbox[name="${ filename }"i]` )
+		).toBeChecked();
+
+		const createGallery = page.getByRole( 'button', {
+			name: 'Create a new gallery',
+		} );
+		await expect( createGallery ).toBeEnabled();
+		await createGallery.click();
+		await page.click( 'role=button[name="Insert gallery"i]' );
+
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toMatch( /\[gallery ids=\"\d+\"\]/ );
+
+		await editor.clickBlockToolbarButton( 'Convert to blocks' );
+		const galleryBlock = page.locator(
+			'role=document[name="Block: Gallery"i]'
+		);
+		await expect( galleryBlock ).toBeVisible();
+
+		// Check that you can undo back to a Classic block gallery in one step.
+		await pageUtils.pressKeys( 'primary+z' );
+		await expect(
+			page.locator( 'role=document[name="Block: Classic"i]' )
+		).toBeVisible();
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toMatch( /\[gallery ids=\"\d+\"\]/ );
+
+		await editor.clickBlockToolbarButton( 'Convert to blocks' );
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toMatch( /<!-- wp:gallery/ );
+	} );
+
+	test( 'Should not fail after save/reload', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Based on docs routing diables caching.
+		// See: https://playwright.dev/docs/api/class-page#page-route
+		await page.route( '**', async ( route ) => {
+			await route.continue();
+		} );
+
+		await editor.insertBlock( { name: 'core/freeform' } );
+		// Ensure there is focus.
+		await page.click( '.mce-content-body' );
+		await page.keyboard.type( 'test' );
+		// Move focus away.
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		await editor.saveDraft();
+		await page.reload();
+		await page.unroute( '**' );
+
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		const errors = [];
+		page.on( 'pageerror', ( exception ) => {
+			errors.push( exception );
+		} );
+
+		const classicBlock = page.locator(
+			'role=document[name="Block: Classic"i]'
+		);
+
+		await expect( classicBlock ).toBeVisible();
+		await classicBlock.click();
+
+		expect( errors.length ).toBe( 0 );
+		await expect.poll( editor.getEditedPostContent ).toBe( 'test' );
+	} );
+} );
+
+class MediaUtils {
+	constructor( { page } ) {
+		this.page = page;
+
+		this.TEST_IMAGE_FILE_PATH = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'10x10_e2e_test_image_z9T8jK.png'
+		);
+	}
+
+	async upload( inputElement ) {
+		const tmpDirectory = await fs.mkdtemp(
+			path.join( os.tmpdir(), 'gutenberg-test-image-' )
+		);
+		const filename = uuid();
+		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
+		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
+
+		await inputElement.setInputFiles( tmpFileName );
+
+		return filename;
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/code.spec.js b/test/e2e/specs/editor/blocks/code.spec.js
index ae62e5c1a10923..ba5af46f69cfd5 100644
--- a/test/e2e/specs/editor/blocks/code.spec.js
+++ b/test/e2e/specs/editor/blocks/code.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Code', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '```' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '<?php' );
@@ -38,10 +40,126 @@ test.describe( 'Code', () => {
 		await editor.insertBlock( { name: 'core/code' } );
 
 		// Test to see if HTML and white space is kept.
-		await pageUtils.setClipboardData( { plainText: '<img />\n\t<br>' } );
+		pageUtils.setClipboardData( { plainText: '<img />\n\t<br>' } );
 
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test.describe( 'Block transforms', () => {
+		test.describe( 'FROM paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/code' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/code' );
+				expect( codeBlock.attributes.content ).toBe(
+					'initial content'
+				);
+			} );
+
+			test( 'should preserve the metadata name attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/code' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/code' );
+				expect( codeBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+		} );
+
+		test.describe( 'FROM HTML', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/html',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/code' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/code' );
+				expect( codeBlock.attributes.content ).toBe(
+					'initial content'
+				);
+			} );
+
+			test( 'should preserve the metadata name attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/html',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/code' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/code' );
+				expect( codeBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+		} );
+
+		test.describe( 'TO paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/code',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/paragraph' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/paragraph' );
+				expect( codeBlock.attributes.content ).toBe(
+					'initial content'
+				);
+			} );
+
+			test( 'should preserve the metadata name attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/code',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/paragraph' );
+				const codeBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( codeBlock.name ).toBe( 'core/paragraph' );
+				expect( codeBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index 7fb6b6cf9230ab..eea6e321aacb11 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -18,7 +18,9 @@ test.describe( 'Columns', () => {
 	} ) => {
 		// Open Columns
 		await editor.insertBlock( { name: 'core/columns' } );
-		await page.locator( '[aria-label="Two columns; equal split"]' ).click();
+		await editor.canvas
+			.locator( '[aria-label="Two columns; equal split"]' )
+			.click();
 
 		// Open List view toggle
 		await page.locator( 'role=button[name="Document Overview"i]' ).click();
@@ -26,21 +28,383 @@ test.describe( 'Columns', () => {
 		// block column add
 		await page
 			.locator(
-				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column link"i]'
+				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column"i]'
 			)
 			.first()
 			.click();
 
-		// Toggle Block inserter
-		await page
-			.locator( 'role=button[name="Toggle block inserter"i]' )
-			.click();
+		// Block Inserter
+		await page.locator( 'role=button[name="Block Inserter"i]' ).click();
 
 		// Verify Column
 		const inserterOptions = page.locator(
-			'role=region[name="Block Library"i] >> role=option'
+			'role=region[name="Block Library"i] >> .block-editor-inserter__insertable-blocks-at-selection >> role=option'
 		);
 		await expect( inserterOptions ).toHaveCount( 1 );
 		await expect( inserterOptions ).toHaveText( 'Column' );
 	} );
+
+	test( 'prevent the removal of locked column block from the column count change UI', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Open Columns
+		await editor.insertBlock( { name: 'core/columns' } );
+		await editor.canvas
+			.locator( '[aria-label="Three columns; equal split"]' )
+			.click();
+
+		// Lock last column block
+		await editor.selectBlocks(
+			editor.canvas.locator(
+				'role=document[name="Block: Column (3 of 3)"i]'
+			)
+		);
+		await editor.clickBlockToolbarButton( 'Options' );
+		await page.click( 'role=menuitem[name="Lock"i]' );
+		await page.locator( 'role=checkbox[name="Prevent removal"i]' ).check();
+		await page.click( 'role=button[name="Apply"i]' );
+
+		// Select columns block
+		await editor.selectBlocks(
+			editor.canvas.locator( 'role=document[name="Block: Columns"i]' )
+		);
+		await editor.openDocumentSettingsSidebar();
+
+		const columnsChangeInput = page.locator(
+			'role=spinbutton[name="Columns"i]'
+		);
+
+		// The min attribute should take into account locked columns
+		await expect( columnsChangeInput ).toHaveAttribute( 'min', '3' );
+
+		// Changing the number of columns should take into account locked columns
+		await page.fill( 'role=spinbutton[name="Columns"i]', '1' );
+		await pageUtils.pressKeys( 'Tab' );
+		await expect( columnsChangeInput ).toHaveValue( '3' );
+	} );
+	test( 'Ungroup properly', async ( { editor } ) => {
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+					],
+				},
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2' },
+						},
+					],
+				},
+			],
+		} );
+		await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
+	test( 'can exit on Enter', async ( { editor, page } ) => {
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+					],
+				},
+				{
+					name: 'core/column',
+				},
+			],
+		} );
+
+		await editor.selectBlocks(
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
+		);
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/columns',
+				innerBlocks: [
+					{
+						name: 'core/column',
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: '1' },
+							},
+						],
+					},
+					{
+						name: 'core/column',
+					},
+				],
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
+	test.describe( 'should update the column widths correctly', () => {
+		const initialColumnWidths = [ '10%', '20%', '30%', '40%' ];
+
+		const expected = [
+			{
+				newColumnCount: 2,
+				newColumnWidths: [ '33.33%', '66.67%' ],
+			},
+			{
+				newColumnCount: 3,
+				newColumnWidths: [ '16.67%', '33.33%', '50%' ],
+			},
+			{
+				newColumnCount: 5,
+				newColumnWidths: [ '8%', '16%', '24%', '32%', '20%' ],
+			},
+			{
+				newColumnCount: 6,
+				newColumnWidths: [
+					'6.67%',
+					'13.33%',
+					'20%',
+					'26.66%',
+					'16.67%',
+					'16.67%',
+				],
+			},
+		];
+
+		expected.forEach( ( { newColumnCount, newColumnWidths } ) => {
+			test( `when the column count is changed to ${ newColumnCount }`, async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/columns',
+					attributes: {
+						columns: initialColumnWidths.length,
+					},
+					innerBlocks: initialColumnWidths.map( ( width ) => ( {
+						name: 'core/column',
+						attributes: { width },
+					} ) ),
+				} );
+
+				await editor.selectBlocks(
+					editor.canvas.getByRole( 'document', {
+						name: 'Block: Columns',
+					} )
+				);
+				await editor.openDocumentSettingsSidebar();
+
+				await page
+					.getByRole( 'spinbutton', { name: 'Columns' } )
+					.fill( newColumnCount.toString() );
+
+				await expect( editor.getBlocks() ).resolves.toMatchObject( [
+					{
+						name: 'core/columns',
+						innerBlocks: newColumnWidths.map( ( width ) => ( {
+							name: 'core/column',
+							attributes: { width },
+						} ) ),
+					},
+				] );
+			} );
+		} );
+	} );
+
+	test( 'should not split in middle', async ( { editor, page } ) => {
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2' },
+						},
+					],
+				},
+				{
+					name: 'core/column',
+				},
+			],
+		} );
+
+		await editor.selectBlocks(
+			editor.canvas.locator(
+				'role=document[name="Block: Paragraph"i] >> text="1"'
+			)
+		);
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/columns',
+				innerBlocks: [
+					{
+						name: 'core/column',
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: '1' },
+							},
+							{
+								name: 'core/paragraph',
+								attributes: { content: '' },
+							},
+							{
+								name: 'core/paragraph',
+								attributes: { content: '3' },
+							},
+							{
+								name: 'core/paragraph',
+								attributes: { content: '2' },
+							},
+						],
+					},
+					{
+						name: 'core/column',
+					},
+				],
+			},
+		] );
+	} );
+
+	test.describe( 'following paragraph', () => {
+		const columnsBlock = {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+					],
+				},
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2' },
+						},
+					],
+				},
+			],
+		};
+
+		test( 'should be deleted on Backspace when empty', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( columnsBlock );
+			await editor.insertBlock( { name: 'core/paragraph' } );
+
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [
+				columnsBlock,
+			] );
+
+			// Ensure focus is on the columns block.
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [] );
+		} );
+
+		test( 'should only select Columns on Backspace when non-empty', async ( {
+			editor,
+			page,
+		} ) => {
+			const paragraphBlock = {
+				name: 'core/paragraph',
+				attributes: { content: 'a' },
+			};
+			await editor.insertBlock( columnsBlock );
+			await editor.insertBlock( paragraphBlock );
+
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [
+				columnsBlock,
+				paragraphBlock,
+			] );
+
+			// Ensure focus is on the columns block.
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [
+				paragraphBlock,
+			] );
+		} );
+	} );
+
+	test( 'should arrow up into empty columns', async ( { editor, page } ) => {
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [ { name: 'core/column' }, { name: 'core/column' } ],
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Delete' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/columns',
+				innerBlocks: [
+					{
+						name: 'core/column',
+					},
+				],
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+		] );
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
index 581027f53a09ec..7fddb22f6a763b 100644
--- a/test/e2e/specs/editor/blocks/comments.spec.js
+++ b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -45,14 +45,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 +146,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 +153,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,9 +165,11 @@ 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
+			.locator( 'role=button[name="Switch to editable mode"i]' )
+			.click();
 
-		const commentTemplate = block.locator(
+		const commentTemplate = editor.canvas.locator(
 			'role=document[name="Block: Comment Template"i]'
 		);
 		await expect( block ).toHaveClass( /has-vivid-purple-color/ );
@@ -301,12 +305,22 @@ 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();
-		expect( content ).toBe( '<!-- wp:comments {"legacy":true} /-->' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/comments',
+				attributes: {
+					legacy: true,
+				},
+			},
+		] );
 
 		// Visit post
 		await page.goto( `/?p=${ postId }` );
diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
new file mode 100644
index 00000000000000..a9a93caa4f4341
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -0,0 +1,329 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+const fs = require( 'fs/promises' );
+const os = require( 'os' );
+const { v4: uuid } = require( 'uuid' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	coverBlockUtils: async ( { page }, use ) => {
+		await use( new CoverBlockUtils( { page } ) );
+	},
+} );
+
+test.describe( 'Cover', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can set overlay color using color picker on block placeholder', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		// Locate the Black color swatch.
+		const blackColorSwatch = coverBlock.getByRole( 'option', {
+			name: 'Color: Black',
+		} );
+		await expect( blackColorSwatch ).toBeVisible();
+
+		// Create the block by clicking selected color button.
+		await blackColorSwatch.click();
+
+		// Assert that after clicking black, the background color is black.
+		await expect( coverBlock ).toHaveCSS(
+			'background-color',
+			'rgb(0, 0, 0)'
+		);
+	} );
+
+	test( 'can set background image using image upload on block placeholder', async ( {
+		editor,
+		coverBlockUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		const filename = await coverBlockUtils.upload(
+			coverBlock.getByTestId( 'form-file-upload-input' )
+		);
+		const fileBasename = path.basename( filename );
+
+		// Wait for the img's src attribute to be prefixed with http.
+		// Otherwise, the URL for the img src attribute starts is a placeholder
+		// beginning with `blob`.
+		await expect( async () => {
+			const src = await coverBlock.locator( 'img' ).getAttribute( 'src' );
+			expect( src.includes( fileBasename ) ).toBe( true );
+		} ).toPass();
+	} );
+
+	test( 'dims background image down by 50% with the average image color when an image is uploaded', async ( {
+		editor,
+		coverBlockUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		await coverBlockUtils.upload(
+			coverBlock.getByTestId( 'form-file-upload-input' )
+		);
+
+		// The overlay is a separate aria-hidden span before the image.
+		const overlay = coverBlock.locator( '.wp-block-cover__background' );
+
+		await expect( overlay ).toHaveCSS(
+			'background-color',
+			'rgb(179, 179, 179)'
+		);
+		await expect( overlay ).toHaveCSS( 'opacity', '0.5' );
+	} );
+
+	test( 'can have the title edited', async ( { editor } ) => {
+		const titleText = 'foo';
+
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		// Choose a color swatch to transform the placeholder block into
+		// a functioning block.
+		await coverBlock
+			.getByRole( 'option', {
+				name: 'Color: Black',
+			} )
+			.click();
+
+		// Activate the paragraph block inside the Cover block.
+		// The name of the block differs depending on whether text has been entered or not.
+		const coverBlockParagraph = coverBlock.getByRole( 'document', {
+			name: /Block: Paragraph|Empty block; start writing or type forward slash to choose a block/,
+		} );
+		await expect( coverBlockParagraph ).toBeEditable();
+
+		await coverBlockParagraph.fill( titleText );
+
+		await expect( coverBlockParagraph ).toContainText( titleText );
+	} );
+
+	test( 'can be resized using drag & drop', async ( { page, editor } ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+		await coverBlock
+			.getByRole( 'option', {
+				name: 'Color: Black',
+			} )
+			.click();
+
+		// Open the document sidebar.
+		await editor.openDocumentSettingsSidebar();
+
+		// Open the block list viewer from the Editor toolbar.
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		// Select the Cover block from the Document Overview.
+		await page
+			.getByRole( 'region', { name: 'Document Overview' } )
+			.getByRole( 'link', { name: 'Cover' } )
+			.click();
+
+		// In the Block Editor Settings panel, click on the Styles subpanel.
+		const coverBlockEditorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await coverBlockEditorSettings
+			.getByRole( 'tab', { name: 'Styles' } )
+			.click();
+
+		// Ensure there the default value for the minimum height of cover is undefined.
+		const defaultHeightValue = await coverBlockEditorSettings
+			.getByLabel( 'Minimum height' )
+			.inputValue();
+		expect( defaultHeightValue ).toBeFalsy();
+
+		// There is no accessible locator for the draggable block resize edge,
+		// which is he bottom edge of the Cover block.
+		// Therefore a CSS selector must be used.
+		const coverBlockResizeHandle = page.locator(
+			'.components-resizable-box__handle-bottom'
+		);
+
+		// Establish the existing bounding boxes for the Cover block
+		// and the Cover block's resizing handle.
+		const coverBlockBox = await coverBlock.boundingBox();
+		const coverBlockResizeHandleBox =
+			await coverBlockResizeHandle.boundingBox();
+		expect( coverBlockBox.height ).toBeTruthy();
+		expect( coverBlockResizeHandleBox.height ).toBeTruthy();
+
+		// Increse the Cover block height by 100px.
+		await coverBlockResizeHandle.hover();
+		await page.mouse.down();
+
+		// Counter-intuitively, the mouse movement calculation should not be made using the
+		// Cover block's bounding box, but rather based on the coordinates of the
+		// resize handle.
+		await page.mouse.move(
+			coverBlockResizeHandleBox.x + coverBlockResizeHandleBox.width / 2,
+			coverBlockResizeHandleBox.y + 100
+		);
+		await page.mouse.up();
+
+		const newCoverBlockBox = await coverBlock.boundingBox();
+		expect( newCoverBlockBox.height ).toBe( coverBlockBox.height + 100 );
+	} );
+
+	test( 'dims the background image down by 50% black when transformed from the Image block', async ( {
+		editor,
+		coverBlockUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+
+		await coverBlockUtils.upload(
+			imageBlock.getByTestId( 'form-file-upload-input' )
+		);
+
+		await expect(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Image' } )
+				.locator( 'img' )
+		).toBeVisible();
+
+		await editor.transformBlockTo( 'core/cover' );
+
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		// The overlay is a separate aria-hidden span before the image.
+		const overlay = coverBlock.locator( '.wp-block-cover__background' );
+
+		await expect( overlay ).toHaveCSS( 'background-color', 'rgb(0, 0, 0)' );
+		await expect( overlay ).toHaveCSS( 'opacity', '0.5' );
+	} );
+
+	test( 'other cover blocks are not over the navigation block when the menu is open', async ( {
+		editor,
+		page,
+	} ) => {
+		// Insert a Cover block
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		// Choose a color swatch to transform the placeholder block into
+		// a functioning block.
+		await coverBlock
+			.getByRole( 'option', {
+				name: 'Color: Black',
+			} )
+			.click();
+
+		// Insert a Navigation block inside the Cover block
+		await editor.selectBlocks( coverBlock );
+		await coverBlock.getByRole( 'button', { name: 'Add block' } ).click();
+		await page.keyboard.type( 'Navigation' );
+		const blockResults = page.getByRole( 'listbox', {
+			name: 'Blocks',
+		} );
+		const blockResultOptions = blockResults.getByRole( 'option' );
+		await blockResultOptions.nth( 0 ).click();
+
+		// Insert a second Cover block.
+		await editor.insertBlock( { name: 'core/cover' } );
+		const secondCoverBlock = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Cover',
+			} )
+			.last();
+
+		// Choose a color swatch to transform the placeholder block into
+		// a functioning block.
+		await secondCoverBlock
+			.getByRole( 'option', {
+				name: 'Color: Black',
+			} )
+			.click();
+
+		// Set the viewport to a small screen and open menu.
+		await page.setViewportSize( { width: 375, height: 1000 } );
+		const navigationBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Navigation',
+		} );
+		await editor.selectBlocks( navigationBlock );
+		await editor.canvas
+			.getByRole( 'button', { name: 'Open menu' } )
+			.click();
+
+		// Check if inner container of the second cover is clickable.
+		const secondInnerContainer = secondCoverBlock.locator(
+			'.wp-block-cover__inner-container'
+		);
+		let isClickable;
+		try {
+			isClickable = await secondInnerContainer.click( {
+				trial: true,
+				timeout: 1000, // This test will always take 1 second to run.
+			} );
+		} catch ( error ) {
+			isClickable = false;
+		}
+
+		expect( isClickable ).toBe( false );
+	} );
+} );
+
+class CoverBlockUtils {
+	constructor( { page } ) {
+		/** @type {Page} */
+		this.page = page;
+
+		this.TEST_IMAGE_FILE_PATH = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'10x10_e2e_test_image_z9T8jK.png'
+		);
+	}
+
+	async upload( locator ) {
+		const tmpDirectory = await fs.mkdtemp(
+			path.join( os.tmpdir(), 'gutenberg-test-image-' )
+		);
+		const filename = uuid();
+		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
+		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
+
+		await locator.setInputFiles( tmpFileName );
+
+		return filename;
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js
index 936942c9688fa5..ef693cb8b5bb9e 100644
--- a/test/e2e/specs/editor/blocks/gallery.spec.js
+++ b/test/e2e/specs/editor/blocks/gallery.spec.js
@@ -47,14 +47,16 @@ test.describe( 'Gallery', () => {
 	} ) => {
 		await admin.createNewPost();
 
-		await pageUtils.setClipboardData( {
+		pageUtils.setClipboardData( {
 			plainText: `[gallery ids="${ uploadedMedia.id }"]`,
 		} );
 
-		await page.click( 'role=button[name="Add default block"i]' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+v' );
 
-		const img = page.locator(
+		const img = editor.canvas.locator(
 			'role=document[name="Block: Image"i] >> role=img'
 		);
 
@@ -87,12 +89,11 @@ test.describe( 'Gallery', () => {
 	test( 'can be created using uploaded images', async ( {
 		admin,
 		editor,
-		page,
 		galleryBlockUtils,
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/gallery' } );
-		const galleryBlock = page.locator(
+		const galleryBlock = editor.canvas.locator(
 			'role=document[name="Block: Gallery"i]'
 		);
 		await expect( galleryBlock ).toBeVisible();
@@ -132,16 +133,18 @@ test.describe( 'Gallery', () => {
 			],
 		} );
 
-		const gallery = page.locator( 'role=document[name="Block: Gallery"i]' );
+		const gallery = editor.canvas.locator(
+			'role=document[name="Block: Gallery"i]'
+		);
 
 		await expect( gallery ).toBeVisible();
 		await editor.selectBlocks( gallery );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 
 		const caption = gallery.locator(
 			'role=textbox[name="Gallery caption text"i]'
 		);
-		await expect( caption ).toBeVisible();
-		await caption.click();
+		await expect( caption ).toBeFocused();
 
 		await page.keyboard.type( galleryCaption );
 
@@ -173,7 +176,7 @@ test.describe( 'Gallery', () => {
 			],
 		} );
 
-		const galleryImage = page.locator(
+		const galleryImage = editor.canvas.locator(
 			'role=document[name="Block: Gallery"i] >> role=document[name="Block: Image"i]'
 		);
 		const imageCaption = galleryImage.locator(
@@ -203,7 +206,9 @@ test.describe( 'Gallery', () => {
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/gallery' } );
-		await page.click( 'role=button[name="Media Library"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Media Library"i]' )
+			.click();
 
 		const mediaLibrary = page.locator(
 			'role=dialog[name="Create gallery"i]'
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 4cf284a0cdf69a..0d815872c0bbb2 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -14,24 +14,23 @@ test.describe( 'Group', () => {
 	} ) => {
 		// Search for the group block and insert it.
 		const inserterButton = page.locator(
-			'role=button[name="Toggle block inserter"i]'
+			'role=button[name="Block Inserter"i]'
 		);
 
 		await inserterButton.click();
 
-		await page.type(
-			'role=searchbox[name="Search for blocks and patterns"i]',
-			'Group'
-		);
+		await page.type( 'role=searchbox[name="Search"i]', 'Group' );
 
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
 		);
 
 		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'role=button[name="Group: Gather blocks in a container."i]'
-		);
+		await editor.canvas
+			.locator(
+				'role=button[name="Group: Gather blocks in a container."i]'
+			)
+			.click();
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -40,7 +39,9 @@ test.describe( 'Group', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/group' );
 		await expect(
 			page.locator( 'role=option[name="Group"i][selected]' )
@@ -48,9 +49,11 @@ test.describe( 'Group', () => {
 		await page.keyboard.press( 'Enter' );
 
 		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'role=button[name="Group: Gather blocks in a container."i]'
-		);
+		await editor.canvas
+			.locator(
+				'role=button[name="Group: Gather blocks in a container."i]'
+			)
+			.click();
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -60,10 +63,12 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
-		await page.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		await page.click( 'role=button[name="Add block"i]' );
+		await editor.canvas
+			.locator(
+				'button[aria-label="Group: Gather blocks in a container."]'
+			)
+			.click();
+		await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
new file mode 100644
index 00000000000000..4670196c485f5f
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -0,0 +1,573 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Heading', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created by prefixing number sign and a space', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '### 3' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: '3', level: 3 },
+			},
+		] );
+	} );
+
+	test( 'can be created by prefixing existing content with number signs and a space', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '4' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( '#### ' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: '4', level: 4 },
+			},
+		] );
+	} );
+
+	test( 'should not work with the list input rule', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## 1. H' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: '1. H', level: 2 },
+			},
+		] );
+	} );
+
+	test( 'should work with the format input rules', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## `code`' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: '<code>code</code>', level: 2 },
+			},
+		] );
+	} );
+
+	test( 'should create a paragraph block above when pressing enter at the start', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## a' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+			{
+				name: 'core/heading',
+				attributes: { content: 'a', level: 2 },
+			},
+		] );
+	} );
+
+	test( 'should create a paragraph block below when pressing enter at the end', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## a' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: 'a', level: 2 },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+		] );
+	} );
+
+	test( 'should create a empty paragraph block when pressing backspace at the beginning of the first empty heading block', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## a' );
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toEqual( [] );
+	} );
+
+	test( 'should transform to a paragraph block when pressing backspace at the beginning of the first heading block', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## a' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'a' },
+			},
+		] );
+	} );
+
+	test( 'should keep the heading when there is an empty paragraph block before and backspace is pressed at the start', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## a' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { content: 'a', level: 2 },
+			},
+		] );
+	} );
+
+	test( 'should correctly apply custom colors', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '### Heading' );
+		await editor.openDocumentSettingsSidebar();
+
+		const textColor = page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Text' } );
+
+		await textColor.click();
+		await page
+			.getByRole( 'button', { name: /Custom color picker./i } )
+			.click();
+
+		await page
+			.getByRole( 'textbox', { name: 'Hex color' } )
+			.fill( '4b7f4d' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Heading',
+					level: 3,
+					style: { color: { text: '#4b7f4d' } },
+				},
+			},
+		] );
+	} );
+
+	test( 'should correctly apply named colors', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## Heading' );
+		await editor.openDocumentSettingsSidebar();
+
+		const textColor = page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Text' } );
+
+		await textColor.click();
+
+		await page
+			.getByRole( 'option', {
+				name: 'Color: Luminous vivid orange',
+			} )
+			.click();
+
+		// Close the popover.
+		await textColor.click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Heading',
+					level: 2,
+					textColor: 'luminous-vivid-orange',
+				},
+			},
+		] );
+	} );
+
+	test( 'should change heading level with keyboard shortcuts', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## Heading' );
+
+		// Change text alignment
+		await editor.clickBlockToolbarButton( 'Align text' );
+		const textAlignButton = page.locator(
+			'role=menuitemradio[name="Align text center"i]'
+		);
+		await textAlignButton.click();
+
+		// Focus the block content
+		await pageUtils.pressKeys( 'Tab' );
+
+		await pageUtils.pressKeys( 'access+4' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Heading',
+					textAlign: 'center',
+					level: 4,
+				},
+			},
+		] );
+	} );
+
+	test( 'should be converted from a paragraph to a heading with keyboard shortcuts', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Paragraph' );
+
+		// Change text alignment
+		await editor.clickBlockToolbarButton( 'Align text' );
+		const textAlignButton = page.locator(
+			'role=menuitemradio[name="Align text center"i]'
+		);
+		await textAlignButton.click();
+
+		// Focus the block content
+		await pageUtils.pressKeys( 'Tab' );
+
+		await pageUtils.pressKeys( 'access+2' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Paragraph',
+					textAlign: 'center',
+					level: 2,
+				},
+			},
+		] );
+	} );
+
+	test( 'should be converted from a heading to a paragraph with keyboard shortcuts', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## Heading' );
+
+		// Change text alignment
+		await editor.clickBlockToolbarButton( 'Align text' );
+		const textAlignButton = page.locator(
+			'role=menuitemradio[name="Align text center"i]'
+		);
+
+		await textAlignButton.click();
+
+		// Focus the block content
+		await pageUtils.pressKeys( 'Tab' );
+
+		await pageUtils.pressKeys( 'access+0' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Heading',
+					align: 'center',
+				},
+			},
+		] );
+	} );
+
+	test( 'Should have proper label in the list view', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+
+		await editor.publishPost();
+		await page.reload();
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		const headingListViewItem = listView.getByRole( 'link' );
+
+		await expect(
+			headingListViewItem,
+			'should show default block name if the content is empty'
+		).toHaveText( 'Heading' );
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Heading',
+			} )
+			.fill( 'Heading content' );
+
+		await expect( headingListViewItem, 'should show content' ).toHaveText(
+			'Heading content'
+		);
+
+		await editor.clickBlockOptionsMenuItem( 'Rename' );
+		await page
+			.getByRole( 'dialog', { name: 'Rename' } )
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'My new name' );
+
+		await page
+			.getByRole( 'dialog', { name: 'Rename' } )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+
+		await expect(
+			headingListViewItem,
+			'should show custom name'
+		).toHaveText( 'My new name' );
+	} );
+
+	test.describe( 'Block transforms', () => {
+		test.describe( 'FROM paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/heading' );
+				const headingBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( headingBlock.name ).toBe( 'core/heading' );
+				expect( headingBlock.attributes.content ).toBe(
+					'initial content'
+				);
+			} );
+
+			test( 'should preserve the text align attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						align: 'right',
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/heading' );
+				const headingBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( headingBlock.name ).toBe( 'core/heading' );
+				expect( headingBlock.attributes.textAlign ).toBe( 'right' );
+			} );
+
+			test( 'should preserve the metadata attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/heading' );
+				const headingBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( headingBlock.name ).toBe( 'core/heading' );
+				expect( headingBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+
+			test( 'should preserve the block bindings', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'custom_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/heading' );
+				const headingBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( headingBlock.name ).toBe( 'core/heading' );
+				expect(
+					headingBlock.attributes.metadata.bindings
+				).toMatchObject( {
+					content: {
+						source: 'core/post-meta',
+						args: {
+							key: 'custom_field',
+						},
+					},
+				} );
+			} );
+		} );
+
+		test.describe( 'TO paragraph', () => {
+			test( 'should preserve the content', async ( { editor } ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/paragraph' );
+				const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( paragraphBlock.name ).toBe( 'core/paragraph' );
+				expect( paragraphBlock.attributes.content ).toBe(
+					'initial content'
+				);
+			} );
+
+			test( 'should preserve the text align attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						textAlign: 'right',
+						content: 'initial content',
+					},
+				} );
+				await editor.transformBlockTo( 'core/paragraph' );
+				const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( paragraphBlock.name ).toBe( 'core/paragraph' );
+				expect( paragraphBlock.attributes.align ).toBe( 'right' );
+			} );
+
+			test( 'should preserve the metadata attribute', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							name: 'Custom name',
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/paragraph' );
+				const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( paragraphBlock.name ).toBe( 'core/paragraph' );
+				expect( paragraphBlock.attributes.metadata ).toMatchObject( {
+					name: 'Custom name',
+				} );
+			} );
+
+			test( 'should preserve the block bindings', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'initial content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'custom_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+
+				await editor.transformBlockTo( 'core/paragraph' );
+				const paragraphBlock = ( await editor.getBlocks() )[ 0 ];
+				expect( paragraphBlock.name ).toBe( 'core/paragraph' );
+				expect(
+					paragraphBlock.attributes.metadata.bindings
+				).toMatchObject( {
+					content: {
+						source: 'core/post-meta',
+						args: {
+							key: 'custom_field',
+						},
+					},
+				} );
+			} );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/html.spec.js b/test/e2e/specs/editor/blocks/html.spec.js
index dedb9197984fc5..f034da6efe6173 100644
--- a/test/e2e/specs/editor/blocks/html.spec.js
+++ b/test/e2e/specs/editor/blocks/html.spec.js
@@ -10,7 +10,9 @@ test.describe( 'HTML block', () => {
 
 	test( 'can be created by typing "/html"', async ( { editor, page } ) => {
 		// Create a Custom HTML block with the slash shortcut.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
 		await page.keyboard.type( '/html' );
 		await expect(
 			page.locator( 'role=option[name="Custom HTML"i][selected]' )
@@ -30,4 +32,22 @@ test.describe( 'HTML block', () => {
 <!-- /wp:html -->`
 		);
 	} );
+
+	test( 'should not encode <', async ( { editor, page } ) => {
+		// Create a Custom HTML block with the slash shortcut.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '/html' );
+		await expect(
+			page.locator( 'role=option[name="Custom HTML"i][selected]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '1 < 2' );
+		await editor.publishPost();
+		await page.reload();
+		await expect(
+			editor.canvas.locator( '[data-type="core/html"] textarea' )
+		).toBeVisible();
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 209511d2d1cfa5..d3cddd9c3a51cd 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -5,7 +5,8 @@ const path = require( 'path' );
 const fs = require( 'fs/promises' );
 const os = require( 'os' );
 const { v4: uuid } = require( 'uuid' );
-const snapshotDiff = require( 'snapshot-diff' );
+
+/** @typedef {import('@playwright/test').Page} Page */
 
 /**
  * WordPress dependencies
@@ -31,10 +32,13 @@ test.describe( 'Image', () => {
 		await requestUtils.deleteAllMedia();
 	} );
 
-	test( 'can be inserted', async ( { editor, page, imageBlockUtils } ) => {
+	test( 'can be inserted via image upload', async ( {
+		editor,
+		imageBlockUtils,
+	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
 		await expect( imageBlock ).toBeVisible();
@@ -43,7 +47,9 @@ test.describe( 'Image', () => {
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 		await expect( image ).toBeVisible();
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
 
@@ -55,92 +61,6 @@ test.describe( 'Image', () => {
 		expect( await editor.getEditedPostContent() ).toMatch( regex );
 	} );
 
-	test( 'should replace, reset size, and keep selection', async ( {
-		editor,
-		page,
-		imageBlockUtils,
-	} ) => {
-		await editor.insertBlock( { name: 'core/image' } );
-
-		const imageBlock = page.locator(
-			'role=document[name="Block: Image"i]'
-		);
-		const image = imageBlock.locator( 'role=img' );
-
-		const filename = await imageBlockUtils.upload(
-			imageBlock.locator( 'data-testid=form-file-upload-input' )
-		);
-
-		{
-			await expect( image ).toBeVisible();
-			await expect( image ).toHaveAttribute(
-				'src',
-				new RegExp( filename )
-			);
-
-			const regex = new RegExp(
-				`<!-- wp:image {"id":(\\d+),"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
-<!-- \\/wp:image -->`
-			);
-			expect( await editor.getEditedPostContent() ).toMatch( regex );
-		}
-
-		{
-			await editor.openDocumentSettingsSidebar();
-			await page.click(
-				'role=group[name="Image size presets"i] >> role=button[name="25%"i]'
-			);
-
-			await expect( image ).toHaveCSS( 'width', '3px' );
-			await expect( image ).toHaveCSS( 'height', '3px' );
-
-			const regex = new RegExp(
-				`<!-- wp:image {"id":(\\d+),"width":3,"height":3,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full is-resized"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1" width="3" height="3"\\/><\\/figure>
-<!-- /wp:image -->`
-			);
-
-			expect( await editor.getEditedPostContent() ).toMatch( regex );
-		}
-
-		{
-			await editor.showBlockToolbar();
-			await page.click( 'role=button[name="Replace"i]' );
-
-			const replacedFilename = await imageBlockUtils.upload(
-				page
-					// Ideally the menu should have the name of "Replace" but is currently missing.
-					// Hence, we fallback to using CSS classname instead.
-					.locator( '.block-editor-media-replace-flow__options' )
-					.locator( 'data-testid=form-file-upload-input' )
-			);
-
-			await expect( image ).toHaveAttribute(
-				'src',
-				new RegExp( replacedFilename )
-			);
-			await expect( image ).toBeVisible();
-
-			const regex = new RegExp(
-				`<!-- wp:image {"id":(\\d+),"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="[^"]+\\/${ replacedFilename }\\.png" alt="" class="wp-image-\\1"/></figure>
-<!-- \\/wp:image -->`
-			);
-			expect( await editor.getEditedPostContent() ).toMatch( regex );
-		}
-
-		{
-			// Focus outside the block to avoid the image caption being selected
-			// It can happen on CI specially.
-			await page.click( 'role=textbox[name="Add title"i]' );
-			await image.click();
-			await page.keyboard.press( 'Backspace' );
-
-			expect( await editor.getEditedPostContent() ).toBe( '' );
-		}
-	} );
-
 	test( 'should place caret on caption when clicking to add one', async ( {
 		editor,
 		page,
@@ -148,10 +68,12 @@ test.describe( 'Image', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const filename = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -164,7 +86,9 @@ test.describe( 'Image', () => {
 		await page.keyboard.type( '2' );
 
 		expect(
-			await page.evaluate( () => document.activeElement.innerHTML )
+			await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.innerHTML )
 		).toBe( '12' );
 	} );
 
@@ -175,10 +99,12 @@ test.describe( 'Image', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -192,7 +118,9 @@ test.describe( 'Image', () => {
 		await page.keyboard.press( 'Enter' );
 
 		expect(
-			await page.evaluate( () => document.activeElement.innerHTML )
+			await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.innerHTML )
 		).toBe( '1<br data-rich-text-line-break="true">2' );
 	} );
 
@@ -204,10 +132,12 @@ test.describe( 'Image', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -218,8 +148,8 @@ test.describe( 'Image', () => {
 
 		// Add caption and navigate to inline toolbar.
 		await editor.clickBlockToolbarButton( 'Add caption' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
-		await expect(
+		await pageUtils.pressKeys( 'shift+Tab' );
+		expect(
 			await page.evaluate( () =>
 				document.activeElement.getAttribute( 'aria-label' )
 			)
@@ -233,7 +163,7 @@ test.describe( 'Image', () => {
 		await page.keyboard.press( 'ArrowLeft' );
 		// Italic to bold.
 		await page.keyboard.press( 'ArrowLeft' );
-		await expect(
+		expect(
 			await page.evaluate( () =>
 				document.activeElement.getAttribute( 'aria-label' )
 			)
@@ -244,7 +174,9 @@ test.describe( 'Image', () => {
 		await page.keyboard.press( 'ArrowRight' );
 
 		expect(
-			await page.evaluate( () => document.activeElement.innerHTML )
+			await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.innerHTML )
 		).toBe( '<strong>a</strong>' );
 	} );
 
@@ -255,10 +187,12 @@ test.describe( 'Image', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const tmpInput = await page.evaluateHandle( () => {
 			const input = document.createElement( 'input' );
@@ -299,10 +233,12 @@ test.describe( 'Image', () => {
 		// Insert the block, upload a file and crop.
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const filename = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -312,7 +248,12 @@ test.describe( 'Image', () => {
 
 		// Assert that the image is initially unscaled and unedited.
 		const initialImageSrc = await image.getAttribute( 'src' );
-		const initialImageDataURL = await imageBlockUtils.getDataURL( image );
+		await expect
+			.poll( () => image.boundingBox() )
+			.toMatchObject( {
+				height: 10,
+				width: 10,
+			} );
 
 		// Zoom in to twice the amount using the zoom input.
 		await editor.clickBlockToolbarButton( 'Crop' );
@@ -321,30 +262,34 @@ test.describe( 'Image', () => {
 			page.locator( 'role=slider[name="Zoom"i]' )
 		).toBeFocused();
 
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 		await expect(
 			page.locator( 'role=spinbutton[name="Zoom"i]' )
 		).toBeFocused();
 
-		await pageUtils.pressKeyWithModifier( 'primary', 'a' );
+		await pageUtils.pressKeys( 'primary+a' );
 		await page.keyboard.type( '200' );
 		await page.keyboard.press( 'Escape' );
 		await editor.clickBlockToolbarButton( 'Apply' );
 
 		// Wait for the cropping tools to disappear.
 		await expect(
-			page.locator( 'role=button[name="Apply"i]' )
+			page.locator( 'role=button[name="Save"i]' )
 		).toBeHidden();
 
 		// Assert that the image is edited.
 		const updatedImageSrc = await image.getAttribute( 'src' );
 		expect( initialImageSrc ).not.toEqual( updatedImageSrc );
 
-		const updatedImageDataURL = await imageBlockUtils.getDataURL( image );
-		expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
+		await expect
+			.poll( () => image.boundingBox() )
+			.toMatchObject( {
+				height: 5,
+				width: 5,
+			} );
 
 		expect(
-			snapshotDiff( initialImageDataURL, updatedImageDataURL )
+			await imageBlockUtils.getImageBuffer( updatedImageSrc )
 		).toMatchSnapshot();
 	} );
 
@@ -356,10 +301,12 @@ test.describe( 'Image', () => {
 		// Insert the block, upload a file and crop.
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const filename = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -369,30 +316,39 @@ test.describe( 'Image', () => {
 
 		// Assert that the image is initially unscaled and unedited.
 		const initialImageSrc = await image.getAttribute( 'src' );
-		const initialImageDataURL = await imageBlockUtils.getDataURL( image );
+		await expect
+			.poll( () => image.boundingBox() )
+			.toMatchObject( {
+				height: 10,
+				width: 10,
+			} );
 
 		// Zoom in to twice the amount using the zoom input.
 		await editor.clickBlockToolbarButton( 'Crop' );
 		await editor.clickBlockToolbarButton( 'Aspect Ratio' );
 		await page.click(
-			'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="16:10"i]'
+			'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="Wide - 16:9"i]'
 		);
 		await editor.clickBlockToolbarButton( 'Apply' );
 
 		// Wait for the cropping tools to disappear.
 		await expect(
-			page.locator( 'role=button[name="Apply"i]' )
+			page.locator( 'role=button[name="Save"i]' )
 		).toBeHidden();
 
 		// Assert that the image is edited.
 		const updatedImageSrc = await image.getAttribute( 'src' );
-		const updatedImageDataURL = await imageBlockUtils.getDataURL( image );
+		expect( updatedImageSrc ).not.toEqual( initialImageSrc );
 
-		expect( initialImageSrc ).not.toEqual( updatedImageSrc );
-		expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
+		await expect
+			.poll( () => image.boundingBox() )
+			.toMatchObject( {
+				height: 6,
+				width: 10,
+			} );
 
 		expect(
-			snapshotDiff( initialImageDataURL, updatedImageDataURL )
+			await imageBlockUtils.getImageBuffer( updatedImageSrc )
 		).toMatchSnapshot();
 	} );
 
@@ -404,10 +360,12 @@ test.describe( 'Image', () => {
 		// Insert the block, upload a file and crop.
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
 
 		const filename = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
@@ -415,9 +373,6 @@ test.describe( 'Image', () => {
 
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
 
-		// Assert that the image is initially unscaled and unedited.
-		const initialImageDataURL = await imageBlockUtils.getDataURL( image );
-
 		// Rotate the image.
 		await editor.clickBlockToolbarButton( 'Crop' );
 		await editor.clickBlockToolbarButton( 'Rotate' );
@@ -425,144 +380,747 @@ test.describe( 'Image', () => {
 
 		// Wait for the cropping tools to disappear.
 		await expect(
-			page.locator( 'role=button[name="Apply"i]' )
+			page.locator( 'role=button[name="Save"i]' )
 		).toBeHidden();
 
 		// Assert that the image is edited.
-		await expect
-			.poll( async () => imageBlockUtils.getDataURL( image ) )
-			.not.toBe( initialImageDataURL );
-
-		const updatedImageDataURL = await imageBlockUtils.getDataURL( image );
+		const updatedImageSrc = await image.getAttribute( 'src' );
 
 		expect(
-			snapshotDiff( initialImageDataURL, updatedImageDataURL )
+			await imageBlockUtils.getImageBuffer( updatedImageSrc )
 		).toMatchSnapshot();
 	} );
 
-	test( 'Should reset dimensions on change URL', async ( {
+	test( 'should undo without broken temporary state', async ( {
 		editor,
-		page,
+		pageUtils,
 		imageBlockUtils,
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
+
+		const filename = await imageBlockUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
+
+		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await editor.canvas.locator( '.wp-block-image' ).focus();
+		await pageUtils.pressKeys( 'primary+z' );
 
-		{
-			// Upload an initial image.
-			const filename = await imageBlockUtils.upload(
-				imageBlock.locator( 'data-testid=form-file-upload-input' )
+		// Expect an empty image block (placeholder) rather than one with a
+		// broken temporary URL.
+		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->` );
+	} );
+
+	test( 'can be replaced by dragging-and-dropping images from the inserter', async ( {
+		page,
+		editor,
+	} ) => {
+		// This is a temp workaround for dragging and dropping images from the inserter.
+		// This should be removed when we have the zoom out view for media categories.
+		await page.setViewportSize( { width: 1400, height: 800 } );
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		async function openMediaTab() {
+			const blockInserter = page.getByRole( 'button', {
+				name: 'Block Inserter',
+				exact: true,
+			} );
+			const isClosed =
+				( await blockInserter.getAttribute( 'aria-pressed' ) ) ===
+				'false';
+
+			if ( isClosed ) {
+				await blockInserter.click();
+			}
+
+			await blockLibrary.getByRole( 'tab', { name: 'Media' } ).click();
+
+			await blockLibrary
+				.getByRole( 'tabpanel', { name: 'Media' } )
+				.getByRole( 'tab', { name: 'Openverse' } )
+				.click();
+		}
+
+		await openMediaTab();
+
+		// Drag the first image from the media library into the image block.
+		await blockLibrary
+			.getByRole( 'listbox', { name: 'Media List' } )
+			.getByRole( 'option' )
+			.first()
+			.dragTo( imageBlock );
+
+		await expect( async () => {
+			const blocks = await editor.getBlocks();
+			expect( blocks ).toHaveLength( 1 );
+
+			const [
+				{
+					attributes: { url },
+				},
+			] = blocks;
+			await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+				'src',
+				url
 			);
-			await expect( image ).toHaveAttribute(
+			expect(
+				new URL( url ).host,
+				'should be updated to the media library'
+			).toBe( new URL( page.url() ).host );
+		}, 'should update the image from the media inserter' ).toPass();
+		const [
+			{
+				attributes: { url: firstUrl },
+			},
+		] = await editor.getBlocks();
+
+		await openMediaTab();
+
+		// Drag the second image from the media library into the image block.
+		await blockLibrary
+			.getByRole( 'listbox', { name: 'Media List' } )
+			.getByRole( 'option' )
+			.nth( 1 )
+			.dragTo( imageBlock );
+
+		await expect( async () => {
+			const blocks = await editor.getBlocks();
+			expect( blocks ).toHaveLength( 1 );
+
+			const [
+				{
+					attributes: { url },
+				},
+			] = blocks;
+			expect( url ).not.toBe( firstUrl );
+			await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
 				'src',
-				new RegExp( filename )
+				url
 			);
+			expect(
+				new URL( url ).host,
+				'should be updated to the media library'
+			).toBe( new URL( page.url() ).host );
+		}, 'should replace the original image with the second image' ).toPass();
+	} );
 
-			// Resize the Uploaded Image.
-			await editor.openDocumentSettingsSidebar();
-			await page.click(
-				'role=group[name="Image size presets"i] >> role=button[name="25%"i]'
-			);
+	test( 'should allow dragging and dropping HTML to media placeholder', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
 
-			const regex = new RegExp(
-				`<!-- wp:image {"id":(\\d+),"width":3,"height":3,"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full is-resized"><img src="[^"]+/${ filename }\\.png" alt="" class="wp-image-\\1" width="3" height="3"/></figure>
-<!-- /wp:image -->`
-			);
+		await page.evaluate( () => {
+			const { createBlock } = window.wp.blocks;
+			const block = createBlock( 'core/image', {
+				url: 'https://live.staticflickr.com/3894/14962688165_04759a8b03_b.jpg',
+				alt: 'Cat',
+				caption: `"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.`,
+			} );
+			const dummy = document.createElement( 'div' );
+			dummy.style.width = '10px';
+			dummy.style.height = '10px';
+			dummy.style.zIndex = 99999;
+			dummy.style.position = 'fixed';
+			dummy.style.top = 0;
+			dummy.style.left = 0;
+			dummy.draggable = 'true';
+			dummy.addEventListener( 'dragstart', ( event ) => {
+				event.dataTransfer.setData(
+					'wp-blocks',
+					JSON.stringify( { blocks: [ block ] } )
+				);
+				event.dataTransfer.setData( 'wp-block:core/image', '' );
+				setTimeout( () => {
+					dummy.remove();
+				}, 0 );
+			} );
+			document.body.appendChild( dummy );
+		} );
 
-			// Check if dimensions are changed.
-			expect( await editor.getEditedPostContent() ).toMatch( regex );
-		}
+		await page.mouse.move( 0, 0 );
+		await page.mouse.down();
+		await imageBlock.hover();
+		await page.mouse.up();
+
+		const host = new URL( page.url() ).host;
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/image',
+				attributes: {
+					link: expect.stringContaining( host ),
+					url: expect.stringContaining( host ),
+					id: expect.any( Number ),
+					alt: 'Cat',
+					caption: `"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.`,
+				},
+			},
+		] );
+		const url = ( await editor.getBlocks() )[ 0 ].attributes.url;
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			url
+		);
+	} );
 
-		{
-			const imageUrl = '/wp-includes/images/w-logo-blue.png';
+	test( 'image inserted via upload should appear in the frontend published post content', async ( {
+		editor,
+		imageBlockUtils,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
 
-			// Replace uploaded image with an URL.
-			await editor.clickBlockToolbarButton( 'Replace' );
-			await page.click( 'role=button[name="Edit"i]' );
-			// Replace the url.
-			await page.fill( 'role=combobox[name="URL"i]', imageUrl );
-			await page.click( 'role=button[name="Submit"i]' );
+		const filename = await imageBlockUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
 
-			const regex = new RegExp(
-				`<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image size-large"><img src="${ imageUrl }" alt=""/></figure>
-<!-- /wp:image -->`
-			);
+		const imageInEditor = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
+		await expect( imageInEditor ).toBeVisible();
+		await expect( imageInEditor ).toHaveAttribute(
+			'src',
+			new RegExp( filename )
+		);
 
-			// Check if dimensions are reset.
-			expect( await editor.getEditedPostContent() ).toMatch( regex );
-		}
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		const figureDom = page.getByRole( 'figure' );
+		await expect( figureDom ).toBeVisible();
+
+		const imageDom = figureDom.locator( 'img' );
+		await expect( imageDom ).toBeVisible();
+		await expect( imageDom ).toHaveAttribute(
+			'src',
+			new RegExp( filename )
+		);
 	} );
 
-	test( 'should undo without broken temporary state', async ( {
+	test( 'image inserted via link should appear in the frontend published post content', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
+
+		await imageBlock
+			.getByRole( 'button' )
+			.filter( { hasText: 'Insert from URL' } )
+			.click();
+
+		// This form lacks distinguishing qualities other than the
+		// class name, so we use page.locator() instead of page.getByRole()
+		const form = page.locator(
+			'form.block-editor-media-placeholder__url-input-form'
+		);
+
+		const imgUrl =
+			'https://wp20.wordpress.net/wp-content/themes/twentyseventeen-wp20/images/wp20-logo-white.svg';
+
+		await form.getByLabel( 'URL' ).fill( imgUrl );
+		await form.getByRole( 'button', { name: 'Apply' } ).click();
+
+		const imageInEditor = imageBlock.locator( 'role=img' );
+		await expect( imageInEditor ).toBeVisible();
+		await expect( imageInEditor ).toHaveAttribute( 'src', imgUrl );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		const figureDom = page.getByRole( 'figure' );
+		await expect( figureDom ).toBeVisible();
+
+		const imageDom = figureDom.locator( 'img' );
+		await expect( imageDom ).toBeVisible();
+		await expect( imageDom ).toHaveAttribute( 'src', imgUrl );
+	} );
+
+	test( 'adding a link should reflect configuration in published post content', async ( {
+		editor,
+		page,
+		imageBlockUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
+
+		await imageBlockUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
+
+		await page.getByLabel( 'Block tools' ).getByLabel( 'Link' ).click();
+
+		// This form lacks distinguishing qualities other than the
+		// class name, so we use page.locator() instead of page.getByRole()
+		const form = page.locator( '.block-editor-url-popover__link-editor' );
+
+		const url = 'https://wordpress.org';
+
+		await form.getByLabel( 'URL' ).fill( url );
+
+		await form.getByRole( 'button', { name: 'Apply' } ).click();
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		const figureDom = page.getByRole( 'figure' );
+		await expect( figureDom ).toBeVisible();
+
+		const linkDom = figureDom.locator( 'a' );
+		await expect( linkDom ).toBeVisible();
+		await expect( linkDom ).toHaveAttribute( 'href', url );
+	} );
+
+	test( 'should upload external image to media library', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				url: 'https://cldup.com/cXyG__fTLN.jpg',
+			},
+		} );
+
+		await editor.clickBlockToolbarButton( 'Upload to Media Library' );
+
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
+		);
+	} );
+
+	test( 'should upload through prepublish panel', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				url: 'https://cldup.com/cXyG__fTLN.jpg',
+			},
+		} );
+
+		await page
+			.getByRole( 'button', { name: 'Publish', exact: true } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Upload', exact: true } )
+			.click();
+
+		await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 );
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
+		);
+	} );
+
+	test( 'uploads data url through blobs from raw handling', async ( {
 		editor,
 		page,
 		pageUtils,
+	} ) => {
+		const blobUrl = await page.evaluate( async () => {
+			const canvas = document.createElement( 'canvas' );
+			canvas.width = 20;
+			canvas.height = 20;
+
+			const ctx = canvas.getContext( '2d' );
+			ctx.fillStyle = 'red';
+			ctx.fillRect( 0, 0, 20, 20 );
+
+			return canvas.toDataURL( 'image/png' );
+		} );
+
+		pageUtils.setClipboardData( { html: `<img src="${ blobUrl }">` } );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect(
+			editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.locator( 'img[src^="http"]' )
+		).toHaveAttribute(
+			'src',
+			expect.stringMatching( /\/wp-content\/uploads\// )
+		);
+	} );
+
+	test( 'should have keyboard navigable link UI popover', async ( {
+		editor,
+		page,
+		pageUtils,
+		imageBlockUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
+
+		await imageBlockUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
+
+		await page.getByLabel( 'Block tools' ).getByLabel( 'Link' ).click();
+
+		const uriInput = page.getByRole( 'combobox', {
+			name: 'URL',
+		} );
+
+		await expect( uriInput ).toBeFocused();
+
+		// Enter a link.
+		await uriInput.fill( 'https://example.com' );
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			page.getByRole( 'link', {
+				name: 'example.com',
+			} )
+		).toBeFocused();
+
+		// Edit a link.
+		await pageUtils.pressKeys( 'Tab' );
+		await page.keyboard.press( 'Enter' );
+		await expect( uriInput ).toBeFocused();
+		await uriInput.fill( 'https://example.com/updated/' );
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			page.getByRole( 'link', {
+				name: 'example.com/updated/',
+			} )
+		).toBeFocused();
+
+		// Remove a link.
+		await pageUtils.pressKeys( 'Tab', { times: 2 } );
+		await expect(
+			page.getByRole( 'button', { name: 'Remove link' } )
+		).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+		await expect( uriInput ).toBeFocused();
+		await expect( uriInput ).toBeEmpty();
+
+		// Select "Link to image file".
+		await pageUtils.pressKeys( 'Tab', { times: 3 } );
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Link to image file' } )
+		).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			page.getByRole( 'link', {
+				name: 'Link to image file',
+			} )
+		).toBeFocused();
+
+		// Select "Link to attachment page".
+		await pageUtils.pressKeys( 'Tab' );
+		await page.keyboard.press( 'Enter' );
+		await pageUtils.pressKeys( 'Tab', { times: 4 } );
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Link to attachment page' } )
+		).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			page.getByRole( 'link', {
+				name: 'Link to attachment page',
+			} )
+		).toBeFocused();
+
+		// Select "Expand on click", then remove it.
+		await pageUtils.pressKeys( 'Tab' );
+		await page.keyboard.press( 'Enter' );
+		await pageUtils.pressKeys( 'Tab', { times: 5 } );
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Expand on click' } )
+		).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Disable expand on click',
+			} )
+		).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+		await expect( uriInput ).toBeFocused();
+		await expect( uriInput ).toBeEmpty();
+	} );
+} );
+
+test.describe( 'Image - lightbox', () => {
+	let uploadedMedia;
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		uploadedMedia = await requestUtils.uploadMedia(
+			path.resolve(
+				process.cwd(),
+				'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png'
+			)
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'should respect theme.json settings and block overrides', () => {
+		test.describe( 'Theme.json settings - allow editing FALSE, enabled FALSE', () => {
+			test.beforeAll( async ( { requestUtils } ) => {
+				await requestUtils.activatePlugin(
+					'lightbox-allow-editing-false-enabled-false'
+				);
+			} );
+
+			test.afterAll( async ( { requestUtils } ) => {
+				await requestUtils.deactivatePlugin(
+					'lightbox-allow-editing-false-enabled-false'
+				);
+			} );
+
+			test( 'Block settings - link DISABLED, lightbox UNDEFINED - should hide UI when block override is undefined', async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.setContent( `<!-- wp:image {"id":${ uploadedMedia.id },"sizeSlug":"full","linkDestination":"none"} -->
+				<figure class="wp-block-image size-full"><img src="${ uploadedMedia.source_url }" alt="" class="wp-image-${ uploadedMedia.id }"/></figure>
+				<!-- /wp:image --> ` );
+
+				const imageBlock = editor.canvas.locator(
+					'role=document[name="Block: Image"i]'
+				);
+
+				await imageBlock.click();
+				await page
+					.getByLabel( 'Block tools' )
+					.getByLabel( 'Link' )
+					.click();
+
+				await expect(
+					page.getByRole( 'menuitem', {
+						name: 'Expand on click',
+					} )
+				).toBeHidden();
+			} );
+
+			test( 'Block settings - link DISABLED, lightbox ENABLED - should show UI while block override is active, but hide UI if override is removed', async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.setContent( `<!-- wp:image {"id":${ uploadedMedia.id },"sizeSlug":"full","linkDestination":"none","lightbox":{"enabled":true}} -->
+				<figure class="wp-block-image size-full"><img src="${ uploadedMedia.source_url }" alt="" class="wp-image-${ uploadedMedia.id }"/></figure>
+				<!-- /wp:image --> ` );
+
+				const imageBlock = editor.canvas.locator(
+					'role=document[name="Block: Image"i]'
+				);
+
+				await imageBlock.click();
+				await page
+					.getByLabel( 'Block tools' )
+					.getByLabel( 'Link' )
+					.click();
+
+				await page
+					.getByRole( 'button', {
+						name: 'Disable expand on click',
+					} )
+					.click();
+
+				await expect(
+					page.getByRole( 'menuitem', {
+						name: 'Expand on click',
+					} )
+				).toBeHidden();
+			} );
+		} );
+	} );
+
+	test.describe( 'should render as expected on front end', () => {
+		test( "Overlay image should not inherit content image's margins", async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.setContent( `<!-- wp:image {"id":${ uploadedMedia.id },"sizeSlug":"full","linkDestination":"none",
+			"lightbox":{"enabled":true},"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}}} -->
+			<figure class="wp-block-image size-full" style="margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--40)">
+			<img src="${ uploadedMedia.source_url }" alt="" class="wp-image-${ uploadedMedia.id }"/></figure>
+			<!-- /wp:image --> ` );
+
+			const postId = await editor.publishPost();
+			await page.goto( `/?p=${ postId }` );
+
+			const lightboxImage = page.locator( '.wp-lightbox-container img' );
+			await expect( lightboxImage ).toBeVisible();
+			await lightboxImage.click();
+
+			const figure = page
+				.locator( '.wp-lightbox-overlay .wp-block-image' )
+				.first();
+			await expect( figure ).toBeVisible();
+			const margin = await figure.evaluate( ( element ) => {
+				return window
+					.getComputedStyle( element )
+					.getPropertyValue( 'margin' );
+			} );
+			expect( margin ).toBe( '0px' );
+		} );
+	} );
+} );
+
+// Added to prevent regressions of https://github.com/WordPress/gutenberg/pull/57040.
+test.describe( 'Image - Site editor', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'can be inserted via image upload', async ( {
+		editor,
 		imageBlockUtils,
 	} ) => {
 		await editor.insertBlock( { name: 'core/image' } );
 
-		const imageBlock = page.locator(
+		const imageBlock = editor.canvas.locator(
 			'role=document[name="Block: Image"i]'
 		);
-		const image = imageBlock.locator( 'role=img' );
+		await expect( imageBlock ).toBeVisible();
 
 		const filename = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
+		const image = imageBlock.getByRole( 'img', {
+			name: 'This image has an empty alt attribute',
+		} );
+		await expect( image ).toBeVisible();
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
-		await page.focus( '.wp-block-image' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'z' );
 
-		// Expect an empty image block (placeholder) rather than one with a
-		// broken temporary URL.
-		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:image -->
-<figure class="wp-block-image"><img alt=""/></figure>
-<!-- /wp:image -->` );
+		const regex = new RegExp(
+			`<!-- wp:image {"id":(\\d+),"sizeSlug":"full","linkDestination":"none"} -->
+<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
+<!-- \\/wp:image -->`
+		);
+		expect( await editor.getEditedPostContent() ).toMatch( regex );
 	} );
 } );
 
 class ImageBlockUtils {
 	constructor( { page } ) {
+		/** @type {Page} */
 		this.page = page;
+		this.basePath = path.join( __dirname, '..', '..', '..', 'assets' );
 
 		this.TEST_IMAGE_FILE_PATH = path.join(
-			__dirname,
-			'..',
-			'..',
-			'..',
-			'assets',
+			this.basePath,
 			'10x10_e2e_test_image_z9T8jK.png'
 		);
 	}
 
-	async upload( inputElement ) {
+	async upload( inputElement, customFile = null ) {
 		const tmpDirectory = await fs.mkdtemp(
 			path.join( os.tmpdir(), 'gutenberg-test-image-' )
 		);
 		const filename = uuid();
 		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
-		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
+		const filepath = customFile
+			? path.join( this.basePath, customFile )
+			: this.TEST_IMAGE_FILE_PATH;
+		await fs.copyFile( filepath, tmpFileName );
 
 		await inputElement.setInputFiles( tmpFileName );
 
 		return filename;
 	}
 
-	async getDataURL( element ) {
+	async getImageBuffer( url ) {
+		const response = await this.page.request.get( url );
+		return await response.body();
+	}
+
+	async getHexString( element ) {
 		return element.evaluate( ( node ) => {
 			const canvas = document.createElement( 'canvas' );
-			const context = canvas.getContext( '2d' );
 			canvas.width = node.width;
 			canvas.height = node.height;
+
+			const context = canvas.getContext( '2d' );
 			context.drawImage( node, 0, 0 );
-			return canvas.toDataURL( 'image/jpeg' );
+			const imageData = context.getImageData(
+				0,
+				0,
+				canvas.width,
+				canvas.height
+			);
+			const pixels = imageData.data;
+
+			let hexString = '';
+			for ( let i = 0; i < pixels.length; i += 4 ) {
+				if ( i !== 0 && i % ( canvas.width * 4 ) === 0 ) {
+					hexString += '\n';
+				}
+
+				const r = pixels[ i ].toString( 16 ).padStart( 2, '0' );
+				const g = pixels[ i + 1 ].toString( 16 ).padStart( 2, '0' );
+				const b = pixels[ i + 2 ].toString( 16 ).padStart( 2, '0' );
+				const a = pixels[ i + 3 ].toString( 16 ).padStart( 2, '0' );
+				hexString += '#' + r + g + b + a;
+			}
+			return hexString;
 		} );
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
new file mode 100644
index 00000000000000..95e9c65b6ec190
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/links.spec.js
@@ -0,0 +1,1230 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Links', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.use( {
+		LinkUtils: async ( { editor, page, pageUtils }, use ) => {
+			await use( new LinkUtils( { editor, page, pageUtils } ) );
+		},
+	} );
+
+	test( `will use Post title as link text if link to existing post is created without any text selected`, async ( {
+		admin,
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		const titleText = 'Post to create a link to';
+		const { id: postId } = await requestUtils.createPost( {
+			title: titleText,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'Here comes a link: ' );
+
+		// Insert a link deliberately not selecting any text.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		// Trigger the autocomplete suggestion list and select the first suggestion.
+		await page.keyboard.type( 'Post to create a' );
+		await page.getByRole( 'option', { name: titleText } ).click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'Here comes a link: <a href="http://localhost:8889/?p=' +
+						postId +
+						'" data-type="post" data-id="' +
+						postId +
+						'">' +
+						titleText +
+						'</a>',
+				},
+			},
+		] );
+	} );
+
+	test( `can be created by selecting text and clicking link insertion button in block toolbar`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Click on the Link button in the Block Toolbar.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		// Type a URL.
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Submit the link.
+		await pageUtils.pressKeys( 'Enter' );
+
+		// The link should have been inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="https://wordpress.org/gutenberg">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
+	test( `will not automatically create a link if selected text is not a valid HTTP based URL`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This: is not a link' );
+
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Click on the Link button.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		await expect(
+			page.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} )
+		).toHaveValue( '' );
+	} );
+
+	test( `will automatically create a link if selected text is a valid HTTP based URL`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type(
+			'This is Gutenberg: https://wordpress.org/gutenberg'
+		);
+
+		// Select the URL.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft', { times: 7 } );
+
+		// Click on the Link button.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		// A link with the selected URL as its href should have been inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is Gutenberg: <a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
+	test( `does not create link when link ui is closed without submission`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Click on the Link button.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		// Type a URL.
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Click somewhere else - it doesn't really matter where.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.focus();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is Gutenberg',
+				},
+			},
+		] );
+	} );
+
+	test( `can edit existing links`, async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		await LinkUtils.createLink();
+
+		// Click on the Edit button.
+		await page
+			.getByRole( 'button', { name: 'Edit link', exact: true } )
+			.click();
+
+		// Change the URL.
+		// getByPlaceholder required in order to handle Link Control component
+		// managing focus onto other inputs within the control.
+		await page.getByPlaceholder( 'Search or type URL' ).fill( '' );
+		await page.keyboard.type( '/handbook' );
+
+		// Submit the link.
+		await pageUtils.pressKeys( 'Enter' );
+
+		// The link should have been updated.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is <a href="/handbook">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
+	test( `can remove existing links`, async ( { editor, LinkUtils } ) => {
+		await LinkUtils.createLink();
+
+		const linkPopover = LinkUtils.getLinkPopover();
+
+		await linkPopover
+			.getByRole( 'button', { name: 'Remove link' } )
+			.click();
+
+		// The link should have been removed.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is Gutenberg',
+				},
+			},
+		] );
+	} );
+
+	test( `allows arrow keys to be pressed during link creation when the toolbar is fixed to top`, async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		await LinkUtils.toggleFixedToolbar( true );
+
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'Text' );
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		const linkPopover = LinkUtils.getLinkPopover();
+		await expect( linkPopover ).toBeVisible();
+
+		// Pressing "left" should not close the dialog.
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await expect( linkPopover ).toBeVisible();
+
+		// Escape should close the dialog.
+		await page.keyboard.press( 'Escape' );
+
+		await expect( linkPopover ).toBeHidden();
+	} );
+
+	test( `allows arrow keys to be pressed during link creation in "Docked Toolbar" mode`, async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		await LinkUtils.toggleFixedToolbar( false );
+
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'Text' );
+
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		const linkPopover = LinkUtils.getLinkPopover();
+
+		await expect( linkPopover ).toBeVisible();
+
+		// Pressing arrow key should not close the dialog.
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await expect( linkPopover ).toBeVisible();
+
+		// Escape should close the dialog still.
+		await page.keyboard.press( 'Escape' );
+
+		await expect( linkPopover ).toBeHidden();
+	} );
+
+	test( `can be edited when within a link but no selection has been made ("collapsed")`, async ( {
+		page,
+		editor,
+		LinkUtils,
+		pageUtils,
+	} ) => {
+		await LinkUtils.createLink();
+		await pageUtils.pressKeys( 'Escape' );
+		// Make a collapsed selection inside the link.
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowRight' );
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		const linkPopover = LinkUtils.getLinkPopover();
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Change the URL.
+		// getByPlaceholder required in order to handle Link Control component
+		// managing focus onto other inputs within the control.
+		await page.getByPlaceholder( 'Search or type URL' ).fill( '' );
+		await page.keyboard.type( '/handbook' );
+
+		// Submit the link.
+		await pageUtils.pressKeys( 'Enter' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is <a href="/handbook">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
+	test( `escape dismisses the Link UI popover and returns focus`, async ( {
+		admin,
+		page,
+		editor,
+		pageUtils,
+		requestUtils,
+		LinkUtils,
+	} ) => {
+		const titleText = 'Test post escape';
+		await requestUtils.createPost( {
+			title: titleText,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		// Now in a new post and try to create a link from an autocomplete suggestion using the keyboard.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+
+		await page.keyboard.type( 'This is Gutenberg' );
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Insert a link.
+		await pageUtils.pressKeys( 'primary+k' );
+
+		const urlInput = page.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		// Expect the "Link" combobox to be visible and focused
+		await expect( urlInput ).toBeVisible();
+		await expect( urlInput ).toBeFocused();
+
+		// Trigger the autocomplete suggestion list.
+		await page.keyboard.type( titleText );
+		await expect(
+			page.getByRole( 'option', {
+				// "post" disambiguates from the "Create page" option.
+				name: `${ titleText } post`,
+			} )
+		).toBeVisible();
+
+		// Move into the suggestions list.
+		await page.keyboard.press( 'ArrowDown' );
+
+		// Expect the escape key to dismiss the popover when the autocomplete suggestion list is open.
+		// Note that these have their own keybindings thus why we need to assert on this behaviour.
+		await page.keyboard.press( 'Escape' );
+		await expect( LinkUtils.getLinkPopover() ).toBeHidden();
+
+		// Confirm that selection is returned to where it was before launching
+		// the link editor, with "Gutenberg" as an uncollapsed selection.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( ' and more!' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is Gutenberg and more!',
+				},
+			},
+		] );
+
+		// Test pressing escape from the toolbar button should return focus to the toolbar button
+		// Insert a link.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		// Expect the "Link" combobox to be visible and focused
+		await expect( urlInput ).toBeVisible();
+		await expect( urlInput ).toBeFocused();
+
+		await page.keyboard.press( 'Escape' );
+		await expect( LinkUtils.getLinkPopover() ).toBeHidden();
+
+		// Focus should return to the Link Toolbar Button that opened the popover
+		await expect(
+			page.getByLabel( 'Link', { exact: true } )
+		).toBeFocused();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is Gutenberg and more!',
+				},
+			},
+		] );
+	} );
+
+	test( `can be created and modified using only the keyboard`, async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		const URL = 'https://wordpress.org/gutenberg';
+
+		// Create a block with some text and format it as a link.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+K' );
+		const linkPopover = LinkUtils.getLinkPopover();
+		await page.keyboard.type( URL );
+		await pageUtils.pressKeys( 'Enter' );
+
+		await expect( linkPopover ).toBeVisible();
+		// Close the link control to return the caret to the canvas
+		await pageUtils.pressKeys( 'Escape' );
+
+		// Deselect the link text by moving the caret to the end of the line
+		// and the link popover should not be displayed.
+		await pageUtils.pressKeys( 'End' );
+		await expect( linkPopover ).toBeHidden();
+
+		// Move the caret back into and selects the link text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+		await expect( linkPopover ).toBeHidden();
+
+		// Switch the Link UI into "Edit" mode via keyboard shortcut
+		// and check that the input has the correct value.
+		await pageUtils.pressKeys( 'primary+K' );
+		await pageUtils.pressKeys( 'Tab' );
+		await pageUtils.pressKeys( 'Enter' );
+
+		await expect(
+			linkPopover.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} )
+		).toHaveValue( URL );
+
+		// Confirm that submitting the input without any changes keeps the same
+		// value and moves focus back to the paragraph.
+
+		// Submit without changes - should return to preview mode.
+		await pageUtils.pressKeys( 'Enter' );
+
+		// Move back into the RichText.
+		await pageUtils.pressKeys( 'Escape' );
+		// Link Popover should be hidden even though it's within the linked text.
+		await expect( linkPopover ).toBeHidden();
+
+		// Move outside of the link entirely.
+		await pageUtils.pressKeys( 'ArrowRight' );
+
+		// Append some text to the paragraph to assert that focus has been returned
+		// to the correct location within the RichText.
+		await page.keyboard.type( ' and more!' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="' + URL + '">Gutenberg</a> and more!',
+				},
+			},
+		] );
+	} );
+
+	test( `adds an assertive message for screenreader users when an invalid link is set`, async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Insert a Link.
+		await editor.clickBlockToolbarButton( 'Link' );
+
+		await page.keyboard.type( 'http://#test.com' );
+		await pageUtils.pressKeys( 'Enter' );
+		expect(
+			page.getByText(
+				'Warning: the link has been inserted but may have errors. Please test it.'
+			)
+		).toBeTruthy();
+	} );
+
+	test( `can be created by selecting text and using keyboard shortcuts`, async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text.
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Press Cmd+K to insert a link.
+		await pageUtils.pressKeys( 'primary+K' );
+
+		const linkPopover = LinkUtils.getLinkPopover();
+
+		// Expect link popover to be visible
+		await expect( linkPopover ).toBeVisible();
+
+		// Type a URL.
+		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Ensure that the contents of the post have not been changed, since at
+		// this point the link is still not inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'This is Gutenberg' },
+			},
+		] );
+
+		// Submit the link.
+		await page.keyboard.press( 'Enter' );
+
+		// Expect the Link UI to still be visible
+		await expect( linkPopover ).toBeVisible();
+
+		// Tab to "Edit" button and enter edit mode again.
+		await pageUtils.pressKeys( 'Tab' );
+		await pageUtils.pressKeys( 'Enter' );
+
+		// Open settings.
+		await linkPopover
+			.getByRole( 'button', {
+				name: 'Advanced',
+			} )
+			.click();
+
+		// Navigate to and toggle the "Open in new tab" checkbox.
+		const checkbox = linkPopover.getByLabel( 'Open in new tab' );
+		await checkbox.click();
+
+		// Toggle should still have focus and be checked.
+		await expect( checkbox ).toBeChecked();
+		await expect( checkbox ).toBeFocused();
+
+		// Tab back to the Submit and apply the link.
+		await linkPopover.getByRole( 'button', { name: 'Save' } ).click();
+
+		// The link should have been inserted.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a>',
+				},
+			},
+		] );
+	} );
+
+	test( 'can update the url of an existing link', async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is WordPress' );
+
+		// Select "WordPress".
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+k' );
+
+		// Close the link control to return the caret to the canvas
+		const linkPopover = LinkUtils.getLinkPopover();
+
+		await page.keyboard.type( 'w.org' );
+
+		// Submit the link
+		await page.keyboard.press( 'Enter' );
+
+		// Close the Link Popover.
+		await pageUtils.pressKeys( 'Escape' );
+
+		await expect( linkPopover ).toBeHidden();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'This is <a href="http://w.org">WordPress</a>',
+				},
+			},
+		] );
+
+		// Edit the link again.
+		await pageUtils.pressKeys( 'primary+k' );
+
+		// Expect Link UI to be visible again
+		await expect( linkPopover ).toBeVisible();
+
+		// Click on the `Edit` button.
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Change the URL.
+		// Note: getByPlaceholder required in order to handle Link Control component
+		// managing focus onto other inputs within the control.
+		await linkPopover.getByPlaceholder( 'Search or type URL' ).fill( '' );
+		await page.keyboard.type( 'wordpress.org' );
+
+		// Save the link.
+		await linkPopover.getByRole( 'button', { name: 'Save' } ).click();
+
+		// Link UI should be closed.
+		await expect( linkPopover ).toBeHidden();
+
+		// The link should have been updated.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'This is <a href="http://wordpress.org">WordPress</a>',
+				},
+			},
+		] );
+	} );
+
+	test( 'toggle state of advanced link settings is preserved across editing links', async ( {
+		page,
+		editor,
+		pageUtils,
+		LinkUtils,
+	} ) => {
+		// Create a block with some text.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await page.keyboard.type( 'This is Gutenberg WordPress' );
+
+		// Select "WordPress".
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Create a link.
+		await pageUtils.pressKeys( 'primary+k' );
+		await page.keyboard.type( 'w.org' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Escape' );
+
+		// Move to edge of text "Gutenberg".
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		// Select "Gutenberg".
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' ); // If you just use Alt here it won't work on windows.
+
+		// Create a link.
+		await pageUtils.pressKeys( 'primary+k' );
+
+		await page.keyboard.type( 'https://wordpress.org/plugins/gutenberg/' );
+		await page.keyboard.press( 'Enter' );
+
+		// Press the "Edit" button
+		const linkPopover = LinkUtils.getLinkPopover();
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Toggle the Advanced settings to be open.
+		// This should set the editor preference to persist this
+		// UI state.
+		await linkPopover
+			.getByRole( 'button', {
+				name: 'Advanced',
+			} )
+			.click();
+
+		// Move focus out of Link UI and into Paragraph block.
+		await pageUtils.pressKeys( 'Escape' );
+
+		// Click on the "WordPress" link
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'WordPress',
+			} )
+			.click();
+
+		// press the "edit" button
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Check that the Advanced settings are still expanded/open
+		// and I can see the open in new tab checkbox. This verifies
+		// that the editor preference was persisted.
+		await expect(
+			linkPopover.getByLabel( 'Open in new tab' )
+		).toBeVisible();
+
+		// Toggle the Advanced settings back to being closed.
+		await linkPopover
+			.getByRole( 'button', {
+				name: 'Advanced',
+			} )
+			.click();
+
+		// Move focus out of Link UI and into Paragraph block.
+		await pageUtils.pressKeys( 'Escape' );
+
+		// Move caret back into the "Gutenberg" link and open
+		// the Link UI for that link.
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'Gutenberg',
+			} )
+			.click();
+
+		// Switch to "Edit" mode.
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Check that the Advanced settings are still closed.
+		// This verifies that the editor preference was persisted.
+		await expect(
+			linkPopover.getByLabel( 'Open in new tab' )
+		).toBeHidden();
+	} );
+
+	test( 'can toggle link settings and save', async ( {
+		editor,
+		LinkUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content:
+					'<a href="https://wordpress.org/gutenberg">Gutenberg</a>',
+			},
+		} );
+
+		// Click on "Gutenberg" link in the canvas
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'Gutenberg',
+			} )
+			.click();
+
+		// Get the Link Popover using the LinkUtils helper
+		const linkPopover = LinkUtils.getLinkPopover();
+
+		// Switch to Edit the link
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Open Advanced Settings
+		await linkPopover
+			.getByRole( 'button', {
+				name: 'Advanced',
+			} )
+			.click();
+
+		// expect settings for `Open in new tab` and `No follow`
+		await expect(
+			linkPopover.getByLabel( 'Open in new tab' )
+		).not.toBeChecked();
+		await expect( linkPopover.getByLabel( 'nofollow' ) ).not.toBeChecked();
+
+		// Toggle both of the settings
+		await linkPopover.getByLabel( 'Open in new tab' ).click();
+		await linkPopover.getByLabel( 'nofollow' ).click();
+
+		// Save the link
+		await linkPopover.getByRole( 'button', { name: 'Save' } ).click();
+
+		// Expect correct attributes to be set on the underlying link.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `<a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener nofollow">Gutenberg</a>`,
+				},
+			},
+		] );
+
+		// Click on "Gutenberg" link in the canvas again
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'Gutenberg',
+			} )
+			.click();
+
+		// Edit the link
+		await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+		// Toggle both the settings to be off.
+		// Note: no need to toggle settings again because the open setting should be persisted.
+		await linkPopover.getByLabel( 'Open in new tab' ).click();
+		await linkPopover.getByLabel( 'nofollow' ).click();
+
+		// Save the link
+		await linkPopover.getByRole( 'button', { name: 'Save' } ).click();
+
+		// Expect correct attributes to be set on the underlying link.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `<a href="https://wordpress.org/gutenberg">Gutenberg</a>`,
+				},
+			},
+		] );
+	} );
+
+	// Fix for https://github.com/WordPress/gutenberg/issues/58322
+	test( 'can click links within the same paragraph to open the correct link preview (@firefox)', async ( {
+		editor,
+		LinkUtils,
+	} ) => {
+		// Create a paragraph with two links
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: `<a href="https://wordpressfoundation.org/donate/">Donate to the WordPress Foundation</a> to support <a href="https://wordpress.org/gutenberg">Gutenberg</a>`,
+			},
+		} );
+
+		// Click on "Gutenberg" link in the canvas
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'Gutenberg',
+			} )
+			.click();
+
+		const linkPopover = LinkUtils.getLinkPopover();
+		await expect( linkPopover ).toBeVisible();
+		await expect(
+			linkPopover.getByText( 'wordpress.org/gutenberg' )
+		).toBeVisible();
+
+		// Click the other link in the same paragraph. We need a short delay between mousdown and mouseup to get the popover to show
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'WordPress',
+			} )
+			.click( { delay: 100 } );
+
+		await expect( linkPopover ).toBeVisible();
+		await expect(
+			linkPopover.getByText( 'wordpress.org/gutenberg' )
+		).toBeHidden();
+		await expect(
+			linkPopover.getByText( 'wordpressfoundation.org/donate/' )
+		).toBeVisible();
+	} );
+
+	test.describe( 'Editing link text', () => {
+		test( 'should allow editing text underneath popover when activated via mouse', async ( {
+			page,
+			editor,
+			LinkUtils,
+		} ) => {
+			await LinkUtils.createLink();
+
+			// Click on some other part of the text to move the caret.
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.click();
+
+			// Click on the link to activate the Link UI.
+			const richTextLink = editor.canvas.getByRole( 'link', {
+				name: 'Gutenberg',
+			} );
+
+			await richTextLink.click();
+
+			// Check focus remains in the RichText.
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+			).toBeFocused();
+
+			// Type to modify the link text.
+			await page.keyboard.type( ' is awesome' );
+
+			// expect link UI to be visible
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			await expect( linkPopover ).toBeVisible();
+
+			// Press "Edit" on Link UI
+			await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+			// Check that the Link Text input reflects the change to the text
+			// made in the RichText.
+			const textInput = linkPopover.getByLabel( 'Text', { exact: true } );
+			await expect( textInput ).toHaveValue( 'Gute is awesomenberg' );
+		} );
+
+		test( 'should allow for modification of link text via the Link UI', async ( {
+			page,
+			pageUtils,
+			editor,
+			LinkUtils,
+		} ) => {
+			await LinkUtils.createLink();
+
+			const originalLinkText = 'Gutenberg';
+			const changedLinkText =
+				'    link text that was modified via the Link UI to include spaces     ';
+
+			// Get the LinkPopover using the LinkUtils
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+			const textInput = page.getByLabel( 'Text', { exact: true } );
+
+			// At this point, we still expect the text input
+			// to reflect the original value with no modifications.
+			await expect( textInput ).toHaveValue( originalLinkText );
+
+			// Select all the link text in the input.
+			await pageUtils.pressKeys( 'primary+a' );
+
+			// Modify the link text value.
+			await page.keyboard.type( changedLinkText );
+
+			// Submit the change.
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check the created link reflects the link text.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content:
+							'This is <a href="https://wordpress.org/gutenberg">' +
+							changedLinkText +
+							'</a>',
+					},
+				},
+			] );
+		} );
+
+		test( 'should not display text input when initially creating the link', async ( {
+			page,
+			editor,
+			LinkUtils,
+		} ) => {
+			// Create a block with some text.
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.keyboard.type( 'This is Gutenberg: ' );
+
+			// Insert a link
+			await editor.clickBlockToolbarButton( 'Link' );
+
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			// Check the Link UI is open before asserting on presence of text input
+			// within that control.
+			await expect( linkPopover ).toBeVisible();
+
+			// Let's check we've focused a text input.
+			const textInput = linkPopover.getByLabel( 'Text', { exact: true } );
+			await expect( textInput ).toBeHidden();
+		} );
+
+		test( 'should display text input when the link has a valid URL value', async ( {
+			pageUtils,
+			LinkUtils,
+		} ) => {
+			await LinkUtils.createLink();
+			await pageUtils.pressKeys( 'Escape' );
+
+			// Make a collapsed selection inside the link. This is used
+			// as a stress test to ensure we can find the link text from a
+			// collapsed RichTextValue that contains a link format.
+			await pageUtils.pressKeys( 'End' );
+			await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+			await pageUtils.pressKeys( 'primary+k' );
+
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+			// Check Text input is visible and is the focused field.
+			const textInput = linkPopover.getByLabel( 'Text', { exact: true } );
+			await expect( textInput ).toBeVisible();
+			await expect( textInput ).toBeFocused();
+
+			// Link was created on text value "Gutenberg". We expect
+			// the text input to reflect that value.
+			await expect( textInput ).toHaveValue( 'Gutenberg' );
+		} );
+
+		test( 'should show any trailing and/or leading whitespace from linked text within the text input', async ( {
+			page,
+			pageUtils,
+			editor,
+		} ) => {
+			const textToSelect = `         spaces     `;
+			const textWithWhitespace = `Text with leading and trailing${ textToSelect }`;
+
+			// Create a block with some text.
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.keyboard.type( textWithWhitespace );
+
+			// Use arrow keys to select only the text with the leading
+			// and trailing whitespace.
+			await pageUtils.pressKeys( 'shift+ArrowLeft', {
+				times: textToSelect.length,
+			} );
+
+			// Click on the Link button.
+			await editor.clickBlockToolbarButton( 'Link' );
+
+			// Type a URL.
+			await page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+			// Click on the Submit button.
+			await pageUtils.pressKeys( 'Enter' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content:
+							'Text with leading and trailing<a href="https://wordpress.org/gutenberg">' +
+							textToSelect +
+							'</a>',
+					},
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'Disabling Link UI active state', () => {
+		test( 'should correctly move focus when link control closes on click outside', async ( {
+			page,
+			pageUtils,
+			LinkUtils,
+		} ) => {
+			await LinkUtils.createLink();
+
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			await expect( linkPopover ).toBeVisible();
+
+			const optionsButton = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Options' } );
+
+			await optionsButton.click();
+
+			await expect( linkPopover ).toBeHidden();
+			// Expect focus on Top toolbar button within dropdown
+			await expect(
+				page.getByRole( 'menuitemcheckbox', {
+					name: 'Top toolbar Access all block and document tools in a single place',
+				} )
+			).toBeFocused();
+			// Press Escape
+			await pageUtils.pressKeys( 'Escape' );
+			// Expect focus on Top toolbar Options button
+			await expect( optionsButton ).toBeFocused();
+		} );
+
+		// Based on issue reported in https://github.com/WordPress/gutenberg/issues/41771/.
+		test( `should correctly replace active link's text value within rich text even when multiple matching text values exist within the rich text`, async ( {
+			page,
+			editor,
+			pageUtils,
+			LinkUtils,
+		} ) => {
+			// Create a block with some text.
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+
+			// Note the two instances of the string "a".
+			await page.keyboard.type( `a b c a` );
+
+			// Select the last "a" only.
+			await pageUtils.pressKeys( 'shift+ArrowLeft' );
+
+			// Click on the Link button.
+			await editor.clickBlockToolbarButton( 'Link' );
+
+			// Type a URL.
+			await page.keyboard.type( 'www.wordpress.org' );
+
+			// Update the link.
+			await pageUtils.pressKeys( 'Enter' );
+
+			await pageUtils.pressKeys( 'ArrowLeft' );
+
+			const linkPopover = LinkUtils.getLinkPopover();
+
+			// Click the "Edit" button in Link UI
+			await linkPopover.getByRole( 'button', { name: 'Edit' } ).click();
+
+			// Focus the "Text" field within the linkPopover
+			await linkPopover
+				.getByRole( 'textbox', {
+					name: 'Text',
+				} )
+				.focus();
+
+			// Delete existing value from "Text" field
+			await pageUtils.pressKeys( 'Backspace' );
+
+			// Change text to "z"
+			await page.keyboard.type( 'z' );
+
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the correct (i.e. last) instance of "a" was replaced with "z".
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content:
+							'a b c <a href="http://www.wordpress.org">z</a>',
+					},
+				},
+			] );
+		} );
+	} );
+} );
+
+class LinkUtils {
+	constructor( { editor, page, pageUtils } ) {
+		this.page = page;
+		this.editor = editor;
+		this.pageUtils = pageUtils;
+	}
+
+	async toggleFixedToolbar( isFixed ) {
+		await this.page.evaluate( ( _isFixed ) => {
+			const { select, dispatch } = window.wp.data;
+			const isCurrentlyFixed =
+				select( 'core/preferences' ).get( 'fixedToolbar' );
+
+			if ( isCurrentlyFixed !== _isFixed ) {
+				dispatch( 'core/preferences' ).toggle( 'fixedToolbar' );
+			}
+		}, isFixed );
+	}
+
+	async createLink() {
+		// Create a block with some text.
+		await this.editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await this.page.keyboard.type( 'This is Gutenberg' );
+
+		// Select some text.
+		await this.pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
+
+		// Click on the Link button.
+		await this.pageUtils.pressKeys( 'primary+k' );
+
+		// get the link popover
+		const linkPopover = this.getLinkPopover();
+
+		// Expect link popover to be visible
+		await expect( linkPopover ).toBeVisible();
+
+		// Type a URL.
+		await this.page.keyboard.type( 'https://wordpress.org/gutenberg' );
+
+		// Submit the link.
+		await this.pageUtils.pressKeys( 'Enter' );
+	}
+
+	/**
+	 * This method is used as a temporary workaround for retriveing the
+	 * LinkControl component. This is because it currently does not expose
+	 * any accessible attributes. In general we should avoid using this method
+	 * and instead rely on locating the sub elements of the component directly.
+	 * Remove / update method once the following PR has landed:
+	 * https://github.com/WordPress/gutenberg/pull/54063.
+	 */
+	getLinkPopover() {
+		return this.page.locator(
+			'.components-popover__content .block-editor-link-control'
+		);
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js
index daa23241a4e8e9..16126cf9cd29f6 100644
--- a/test/e2e/specs/editor/blocks/list.spec.js
+++ b/test/e2e/specs/editor/blocks/list.spec.js
@@ -3,17 +3,49 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'List', () => {
+test.describe( 'List (@firefox)', () => {
 	test.beforeEach( async ( { admin } ) => {
 		await admin.createNewPost();
 	} );
 
+	test( 'can be copied from multi selection', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/list' } );
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		const copied = `<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>two</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->`;
+
+		expect( await editor.getEditedPostContent() ).toBe(
+			copied + '\n\n' + copied
+		);
+	} );
+
 	test( 'can be created by using an asterisk at the start of a paragraph block', async ( {
 		editor,
 		page,
 	} ) => {
 		// Create a block with some text that will trigger a list creation.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* A list item' );
 
 		// Create a second list item.
@@ -21,7 +53,7 @@ test.describe( 'List', () => {
 		await page.keyboard.type( 'Another list item' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item -->
 
@@ -38,13 +70,15 @@ test.describe( 'List', () => {
 		pageUtils,
 	} ) => {
 		// Create a list with the slash block shortcut.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'test' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 4 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } );
 		await page.keyboard.type( '* ' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -56,12 +90,14 @@ test.describe( 'List', () => {
 		page,
 	} ) => {
 		// Create a block with some text that will trigger a list creation.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '1) A list item' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>A list item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -73,9 +109,11 @@ test.describe( 'List', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '1. ' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'z' );
+		await pageUtils.pressKeys( 'primary+z' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:paragraph -->
@@ -84,11 +122,13 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should undo asterisk transform with backspace', async ( {
+	test( 'should undo asterisk transform with backspace (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
 		await page.keyboard.press( 'Backspace' );
 
@@ -99,13 +139,17 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should undo asterisk transform with backspace after selection changes', async ( {
+	test( 'should undo asterisk transform with backspace after selection changes (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
-		await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/list"]' )
+		).toBeVisible();
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -115,11 +159,13 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should undo asterisk transform with backspace setting isTyping state', async ( {
+	test( 'should undo asterisk transform with backspace setting isTyping state (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
 		await editor.showBlockToolbar();
 		await page.keyboard.press( 'Backspace' );
@@ -131,14 +177,18 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should undo asterisk transform with backspace after selection changes without requestIdleCallback', async ( {
+	test( 'should undo asterisk transform with backspace after selection changes without requestIdleCallback (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.evaluate( () => delete window.requestIdleCallback );
 		await page.keyboard.type( '* ' );
-		await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/list"]' )
+		).toBeVisible();
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -148,11 +198,13 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should undo asterisk transform with escape', async ( {
+	test( 'should undo asterisk transform with escape (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
 		await page.keyboard.press( 'Escape' );
 
@@ -167,7 +219,9 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* a' );
 		await page.keyboard.press( 'Backspace' );
 		await page.keyboard.press( 'Backspace' );
@@ -179,9 +233,16 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
-		await expect( page.locator( '[data-type="core/list"]' ) ).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/list"]' )
+		).toBeVisible();
+		// Wait until the automatic change is marked as "final", which is done
+		// with an idle callback, see __unstableMarkAutomaticChange.
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'ArrowDown' );
 		await page.keyboard.press( 'Backspace' );
@@ -191,7 +252,9 @@ test.describe( 'List', () => {
 
 	test( 'can be created by typing "/list"', async ( { editor, page } ) => {
 		// Create a list with the slash block shortcut.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/list' );
 		await expect(
 			page.locator( 'role=option[name="List"i][selected]' )
@@ -201,7 +264,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>I’m a list</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -212,13 +275,15 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'test' );
 		await editor.transformBlockTo( 'core/list' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>test</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -229,18 +294,22 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		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"] >> nth=0' );
+		await editor.canvas
+			.locator( '[data-type="core/paragraph"] >> nth=0' )
+			.click();
 		await page.keyboard.up( 'Shift' );
 		await editor.transformBlockTo( 'core/list' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -256,15 +325,17 @@ test.describe( 'List', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'one' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( 'two' );
 		await editor.transformBlockTo( 'core/list' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -280,20 +351,24 @@ test.describe( 'List', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'one' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( '...' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
 		await page.keyboard.down( 'Shift' );
-		await page.click( '[data-type="core/paragraph"] >> nth=0' );
+		await editor.canvas
+			.locator( '[data-type="core/paragraph"] >> nth=0' )
+			.click();
 		await page.keyboard.up( 'Shift' );
 		await editor.transformBlockTo( 'core/list' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<br>...</li>
 <!-- /wp:list-item -->
 
@@ -309,7 +384,7 @@ test.describe( 'List', () => {
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.transformBlockTo( 'core/paragraph' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -333,7 +408,7 @@ test.describe( 'List', () => {
 		await page.keyboard.press( 'Enter' );
 		await editor.clickBlockToolbarButton( 'Indent' );
 		await page.keyboard.type( 'two' );
-		await pageUtils.pressKeyTimes( 'ArrowUp', 4 );
+		await pageUtils.pressKeys( 'ArrowUp', { times: 4 } );
 		await editor.transformBlockTo( 'core/paragraph' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
@@ -352,13 +427,13 @@ test.describe( 'List', () => {
 		await page.keyboard.type( 'one' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.transformBlockTo( 'core/quote' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -382,7 +457,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -393,12 +468,12 @@ test.describe( 'List', () => {
 		);
 
 		await page.keyboard.type( 'two' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 'two'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 'two'.length } );
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -423,7 +498,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
@@ -441,7 +516,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -451,7 +526,7 @@ test.describe( 'List', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -462,32 +537,97 @@ test.describe( 'List', () => {
 
 		// Should merge lists into one.
 		await page.keyboard.press( 'ArrowDown' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 'two'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 'two'.length } );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li></li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->
+<!-- /wp:list-item -->
 
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
 		);
 	} );
 
+	test( 'should keep nested list items when merging with paragraph', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		const startingContent = [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'p' },
+			},
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1' },
+						innerBlocks: [
+							{
+								name: 'core/list',
+								innerBlocks: [
+									{
+										name: 'core/list-item',
+										attributes: { content: 'i' },
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+		];
+		for ( const block of startingContent ) {
+			await editor.insertBlock( block );
+		}
+
+		// Move the caret in front of "1" in the first list item.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'p' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: 'i' },
+					},
+				],
+			},
+		] );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( startingContent );
+	} );
+
 	test( 'should split into two ordered lists with paragraph', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '1. one' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'two' );
@@ -497,7 +637,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
@@ -507,7 +647,7 @@ test.describe( 'List', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -525,9 +665,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>two</li>
 <!-- /wp:list-item -->
 
@@ -551,9 +691,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>one<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -564,11 +704,11 @@ test.describe( 'List', () => {
 
 	test( 'should change the base list type', async ( { editor } ) => {
 		await editor.insertBlock( { name: 'core/list' } );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->`
@@ -584,14 +724,14 @@ test.describe( 'List', () => {
 		await page.keyboard.press( 'Enter' );
 		await editor.clickBlockToolbarButton( 'Indent' );
 		await page.keyboard.type( '1' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
@@ -614,7 +754,7 @@ test.describe( 'List', () => {
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:quote -->
 <blockquote class="wp-block-quote"><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>aaa</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
@@ -635,9 +775,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -649,7 +789,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -672,11 +812,11 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -690,9 +830,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -711,9 +851,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -742,11 +882,11 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -756,18 +896,18 @@ test.describe( 'List', () => {
 <!-- /wp:list -->`
 		);
 
-		await pageUtils.pressKeyTimes( 'ArrowUp', 3 );
+		await pageUtils.pressKeys( 'ArrowUp', { times: 3 } );
 		await editor.clickBlockToolbarButton( 'Outdent' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>b<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -783,11 +923,11 @@ test.describe( 'List', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/list' } );
 		await page.keyboard.type( 'a' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<br></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -806,11 +946,11 @@ test.describe( 'List', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'c' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -829,7 +969,9 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 
 		await page.keyboard.type( '* 1' ); // Should be at level 0.
 		await page.keyboard.press( 'Enter' );
@@ -839,11 +981,11 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>i</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -858,9 +1000,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -876,9 +1018,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -894,9 +1036,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -909,7 +1051,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -923,7 +1065,7 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->`
@@ -943,24 +1085,26 @@ test.describe( 'List', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* 1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( ' a' );
-		await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
 		await page.keyboard.press( 'Enter' );
 		// The caret should land in the second item.
 		await page.keyboard.type( '2' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>2<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -974,15 +1118,17 @@ test.describe( 'List', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 
 		await page.keyboard.type( '* 1' );
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Space' );
+		await pageUtils.pressKeys( 'shift+Space' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -997,7 +1143,9 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 
 		// Tests the shortcut with a non breaking space.
 		await page.keyboard.type( '*\u00a0' );
@@ -1009,11 +1157,13 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'should preserve indentation after merging backward and forward', async ( {
+	test( 'should preserve indentation after merging backward and forward (-firefox)', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 
 		// Tests the shortcut with a non breaking space.
 		await page.keyboard.type( '* 1' );
@@ -1032,9 +1182,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1058,9 +1208,9 @@ test.describe( 'List', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>1<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>2</li>
 <!-- /wp:list-item -->
 
@@ -1077,7 +1227,9 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* 1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
@@ -1090,9 +1242,11 @@ test.describe( 'List', () => {
 <p></p>
 <!-- /wp:paragraph -->
 
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->`
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->`
 		);
 	} );
 
@@ -1100,18 +1254,20 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* 1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '3' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Ordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item -->
 
@@ -1130,18 +1286,20 @@ test.describe( 'List', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '1. a' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'b' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'c' );
-		await editor.clickBlockToolbarButton( 'Select List' );
+		await editor.clickBlockToolbarButton( 'Select parent block: List' );
 		await editor.clickBlockToolbarButton( 'Unordered' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1156,32 +1314,40 @@ test.describe( 'List', () => {
 		);
 	} );
 
-	test( 'can be created by pasting an empty list', async ( {
+	test( 'can be created by pasting an empty list (-firefox)', async ( {
 		editor,
+		page,
 		pageUtils,
 	} ) => {
 		// Open code editor
-		await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+		await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
 
-		// Paste empty list block
-		await pageUtils.setClipboardData( {
-			plainText:
-				'<!-- wp:list -->\n<ul><li></li></ul>\n<!-- /wp:list -->',
-		} );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		// Add empty list block
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->` );
 
 		// Go back to normal editor
-		await pageUtils.pressKeyWithModifier( 'secondary', 'M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+		await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
 
 		// Verify no WSOD and content is proper.
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->` );
 	} );
 
 	test( 'should merge two list with same attributes', async ( {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* a' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'b' );
@@ -1190,7 +1356,7 @@ test.describe( 'List', () => {
 		await page.keyboard.type( '* c' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1200,7 +1366,7 @@ test.describe( 'List', () => {
 <!-- /wp:list -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>c</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -1209,7 +1375,7 @@ test.describe( 'List', () => {
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>a</li>
 <!-- /wp:list-item -->
 
@@ -1224,12 +1390,22 @@ test.describe( 'List', () => {
 	} );
 
 	test( 'can be exited to selected paragraph', async ( { editor, page } ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '* ' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->` );
 	} );
 
 	test( 'selects all transformed output', async ( { editor, page } ) => {
@@ -1242,17 +1418,195 @@ test.describe( 'List', () => {
 		} );
 
 		await editor.selectBlocks(
-			page.locator( 'role=document[name="Block: List"i]' )
+			editor.canvas.locator( 'role=document[name="Block: List"i]' )
 		);
 
-		await page.getByRole( 'button', { name: 'List' } ).click();
+		await page.getByRole( 'button', { name: 'List', exact: true } ).click();
 		await page.getByRole( 'menuitem', { name: 'Paragraph' } ).click();
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getEditedPostContent() )
+			.toBe( `<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->` );
 
-		await page.getByRole( 'button', { name: 'Paragraph' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Multiple blocks selected' } )
+			.click();
 		await page.getByRole( 'menuitem', { name: 'List' } ).click();
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->` );
+	} );
+
+	test.describe( 'should merge two list items with nested lists', () => {
+		const start = {
+			name: 'core/list',
+			innerBlocks: [
+				{
+					name: 'core/list-item',
+					attributes: { content: '1' },
+					innerBlocks: [
+						{
+							name: 'core/list',
+							innerBlocks: [
+								{
+									name: 'core/list-item',
+									attributes: { content: 'a' },
+								},
+							],
+						},
+					],
+				},
+				{
+					name: 'core/list-item',
+					attributes: { content: '2' },
+					innerBlocks: [
+						{
+							name: 'core/list',
+							innerBlocks: [
+								{
+									name: 'core/list-item',
+									attributes: { content: 'b' },
+								},
+							],
+						},
+					],
+				},
+			],
+		};
+		const end = [
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1' },
+						innerBlocks: [
+							{
+								name: 'core/list',
+								innerBlocks: [
+									{
+										name: 'core/list-item',
+										attributes: { content: 'a‸2' },
+									},
+									{
+										name: 'core/list-item',
+										attributes: { content: 'b' },
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+		];
+
+		test( 'Backspace', async ( { editor, page } ) => {
+			await editor.insertBlock( start );
+
+			// Navigate to the start of the third item.
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+
+			await page.keyboard.press( 'Backspace' );
+
+			// Test caret position.
+			await page.keyboard.type( '‸' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( end );
+		} );
+
+		test( 'Delete (forward)', async ( { editor, page } ) => {
+			await editor.insertBlock( start );
+
+			// Navigate to the end of the second item.
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'ArrowRight' );
+
+			await page.keyboard.press( 'Delete' );
+
+			// Test caret position.
+			await page.keyboard.type( '‸' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( end );
+		} );
+	} );
+
+	test( 'should leave nested list intact when deleting the parent item', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/list',
+			innerBlocks: [
+				{
+					name: 'core/list-item',
+					attributes: { content: '1' },
+				},
+				{
+					name: 'core/list-item',
+					attributes: { content: '' },
+					innerBlocks: [
+						{
+							name: 'core/list',
+							innerBlocks: [
+								{
+									name: 'core/list-item',
+									attributes: { content: 'a' },
+								},
+							],
+						},
+					],
+				},
+				{ name: 'core/list-item', attributes: { content: '3' } },
+			],
+		} );
+
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1' },
+						innerBlocks: [
+							{
+								name: 'core/list',
+								innerBlocks: [
+									{
+										name: 'core/list-item',
+										attributes: { content: 'a' },
+									},
+								],
+							},
+						],
+					},
+					{ name: 'core/list-item', attributes: { content: '3' } },
+				],
+			},
+		] );
 	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/missing.spec.js b/test/e2e/specs/editor/blocks/missing.spec.js
index 69c26c3f858762..9186bac17f3484 100644
--- a/test/e2e/specs/editor/blocks/missing.spec.js
+++ b/test/e2e/specs/editor/blocks/missing.spec.js
@@ -9,6 +9,7 @@ test.describe( 'missing block', () => {
 	} );
 
 	test( 'should strip potentially malicious on* attributes', async ( {
+		editor,
 		page,
 	} ) => {
 		let hasAlert = false;
@@ -17,12 +18,9 @@ test.describe( 'missing block', () => {
 			hasAlert = true;
 		} );
 
-		await page.evaluate( () => {
-			const block = window.wp.blocks.parse(
-				`<!-- wp:non-existing-block-here --><img src onerror=alert(1)>`
-			);
-			window.wp.data.dispatch( 'core/block-editor' ).resetBlocks( block );
-		} );
+		await editor.setContent(
+			`<!-- wp:non-existing-block-here --><img src onerror=alert(1)>`
+		);
 
 		// Give the browser time to show the alert.
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
@@ -31,6 +29,7 @@ test.describe( 'missing block', () => {
 	} );
 
 	test( 'should strip potentially malicious script tags', async ( {
+		editor,
 		page,
 	} ) => {
 		let hasAlert = false;
@@ -39,12 +38,9 @@ test.describe( 'missing block', () => {
 			hasAlert = true;
 		} );
 
-		await page.evaluate( () => {
-			const block = window.wp.blocks.parse(
-				`<!-- wp:non-existing-block-here --><script>alert("EVIL");</script>`
-			);
-			window.wp.data.dispatch( 'core/block-editor' ).resetBlocks( block );
-		} );
+		await editor.setContent(
+			`<!-- wp:non-existing-block-here --><script>alert("EVIL");</script>`
+		);
 
 		// Give the browser time to show the alert.
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
new file mode 100644
index 00000000000000..8692b184fb13f9
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -0,0 +1,507 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Navigation colors', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		// We want emptytheme because it doesn't have any styles.
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllMenus(),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+		const { id: pageId } = await requestUtils.createPage( {
+			title: 'Test Page',
+			status: 'publish',
+		} );
+
+		const { id: menuId } = await requestUtils.createNavigationMenu( {
+			title: 'Colored menu',
+			content: `<!-- wp:navigation-submenu {"label":"Custom Link","type":"custom","url":"https://wordpress.org","kind":"custom"} --><!-- wp:navigation-link {"label":"Submenu Link","type":"custom","url":"https://wordpress.org","kind":"custom"} /--><!-- /wp:navigation-submenu --><!-- wp:navigation-link {"label":"Page Link","type":"page","id": ${ pageId },"url":"http://localhost:8889/?page_id=${ pageId }","kind":"post-type"} /-->`,
+			attributes: { openSubmenusOnClick: true },
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: menuId,
+			},
+		} );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllMenus(),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+		] );
+	} );
+
+	test.use( {
+		colorControl: async ( { admin, editor, page, pageUtils }, use ) => {
+			await use( new ColorControl( { admin, editor, page, pageUtils } ) );
+		},
+	} );
+
+	test( 'All navigation links should default to the body color and submenus and mobile overlay should default to a white background with black text', async ( {
+		editor,
+		page,
+		colorControl,
+	} ) => {
+		const expectedNavigationColors = {
+			textColor: colorControl.black,
+			backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black.
+			submenuTextColor: colorControl.black,
+			submenuBackgroundColor: colorControl.white,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+
+	test( 'Top level navigation links inherit the text color from the theme/group but do not apply to the submenu or overlay text', async ( {
+		page,
+		editor,
+		colorControl,
+	} ) => {
+		// Set the text and background styles for the group. The text color should apply to the top level links but not the submenu or overlay.
+		// We wrap the nav block inside a group block.
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Group' } ).click();
+
+		// In the sidebar inspector we add a link color and link hover color to the group block.
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Text' } ).click();
+		await page
+			.getByRole( 'option', { name: 'Color: White' } )
+			.click( { force: true } );
+
+		await page
+			.getByRole( 'button', { name: 'Background', exact: true } )
+			.click();
+		await page
+			.getByRole( 'option', { name: 'Color: Black' } )
+			.click( { force: true } );
+
+		// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
+		await page
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.click( { force: true } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+
+		const expectedNavigationColors = {
+			textColor: colorControl.white,
+			backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black.
+			submenuTextColor: colorControl.black,
+			submenuBackgroundColor: colorControl.white,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+
+	test( 'Navigation text does not inherit the link color from the theme/group', async ( {
+		page,
+		editor,
+		colorControl,
+	} ) => {
+		// Wrap the nav block inside a group block.
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Group' } ).click();
+
+		// In the sidebar inspector we add a link color and link hover color to the group block.
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Color options' } ).click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
+			.click();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Link', exact: true } ).click();
+		// rga(207, 46 ,46) is the color of the "vivid red" color preset.
+		await page
+			.getByRole( 'option', { name: 'Color: Vivid red' } )
+			.click( { force: true } );
+		await page.getByRole( 'tab', { name: 'Hover' } ).click();
+		// rgb(155, 81, 224) is the color of the "vivid purple" color preset.
+		await page
+			.getByRole( 'option', { name: 'Color: Vivid purple' } )
+			.click( { force: true } );
+
+		// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
+		await page
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.click( { force: true } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+
+		const expectedNavigationColors = {
+			textColor: colorControl.black,
+			backgroundColor: colorControl.transparent,
+			submenuTextColor: colorControl.black,
+			submenuBackgroundColor: colorControl.white,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+
+	test( 'The navigation text color should apply to all navigation links including submenu and overlay text', async ( {
+		page,
+		editor,
+		colorControl,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// In the inspector sidebar, we change the nav block colors.
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		// Pale pink for the text color.
+		await page.getByRole( 'button', { name: 'Text', exact: true } ).click();
+		// 247, 141, 167 is the color of the "Pale pink" color preset.
+		const palePink = 'rgb(247, 141, 167)';
+		await page
+			.getByRole( 'option', { name: 'Color: Pale pink' } )
+			.click( { force: true } );
+
+		// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
+		await page
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.click( { force: true } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+
+		const expectedNavigationColors = {
+			textColor: palePink,
+			backgroundColor: colorControl.transparent, // There should be no background color set.
+			submenuTextColor: palePink,
+			submenuBackgroundColor: colorControl.white,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+
+	test( 'The navigation background color should apply to all navigation links including submenu and overlay backgrounds', async ( {
+		page,
+		editor,
+		colorControl,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// In the inspector sidebar, we change the nav block colors.
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		// Pale pink for the text color.
+		await page
+			.getByRole( 'button', { name: 'Background', exact: true } )
+			.click();
+		// 142, 209, 252 is the color of the "Pale cyan blue" color preset.
+		const paleCyan = 'rgb(142, 209, 252)';
+		await page
+			.getByRole( 'option', { name: 'Color: Pale cyan blue' } )
+			.click( { force: true } );
+
+		// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
+		await page
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.click( { force: true } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+
+		// The navigation background, submenu background and overlay background should all be paleCyan.
+		const expectedNavigationColors = {
+			textColor: colorControl.black,
+			backgroundColor: paleCyan,
+			submenuTextColor: colorControl.black,
+			submenuBackgroundColor: paleCyan,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+
+	test( 'As a user I expect my navigation to use the colors I selected for it', async ( {
+		editor,
+		page,
+		colorControl,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// In the inspector sidebar, we change the nav block colors.
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		// Pale pink for the text color.
+		await page.getByRole( 'button', { name: 'Text', exact: true } ).click();
+		// 247, 141, 167 is the color of the "Pale pink" color preset.
+		const palePink = 'rgb(247, 141, 167)';
+		await page
+			.getByRole( 'option', { name: 'Color: Pale pink' } )
+			.click( { force: true } );
+		// Pale cyan blue for the background color.
+		await page
+			.getByRole( 'button', { name: 'Background', exact: true } )
+			.click();
+		// 142, 209, 252 is the color of the "Pale cyan blue" color preset.
+		const paleCyan = 'rgb(142, 209, 252)';
+		await page
+			.getByRole( 'option', { name: 'Color: Pale cyan blue' } )
+			.click( { force: true } );
+		// Cyan bluish gray for the submenu and overlay text color.
+		await page
+			.getByRole( 'button', { name: 'Submenu & overlay text' } )
+			.click();
+		// 171, 184, 195 is the color of the "Cyan bluish gray" color preset.
+		const cyanBluishGray = 'rgb(171, 184, 195)';
+		await page
+			.getByRole( 'option', { name: 'Color: Cyan bluish gray' } )
+			.click( { force: true } );
+		// Luminous vivid amber for the submenu and overlay background color.
+		await page
+			.getByRole( 'button', { name: 'Submenu & overlay background' } )
+			.click();
+		// 252, 185, 0 is the color of the "Luminous vivid amber" color preset.
+		const vividAmber = 'rgb(252, 185, 0)';
+		await page
+			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
+			.click( { force: true } );
+
+		// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
+		await page
+			.getByRole( 'button', { name: 'Close Settings' } )
+			.click( { force: true } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+
+		const expectedNavigationColors = {
+			textColor: palePink,
+			backgroundColor: paleCyan, // There should be no background color set.
+			submenuTextColor: cyanBluishGray,
+			submenuBackgroundColor: vividAmber,
+		};
+
+		await colorControl.testEditorColors( expectedNavigationColors );
+
+		// Check the colors of the links on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await colorControl.testFrontendColors( expectedNavigationColors );
+	} );
+} );
+
+class ColorControl {
+	constructor( { admin, editor, page, pageUtils } ) {
+		this.admin = admin;
+		this.editor = editor;
+		this.page = page;
+		this.pageUtils = pageUtils;
+
+		// Colors for readability.
+		this.black = 'rgb(0, 0, 0)';
+		this.white = 'rgb(255, 255, 255)';
+		// If there is no background color set, it will not have any background, which computes to 'rgab(0, 0, 0, 0)'.
+		this.transparent = 'rgba(0, 0, 0, 0)';
+	}
+
+	async testEditorColors( {
+		textColor,
+		backgroundColor,
+		submenuTextColor,
+		submenuBackgroundColor,
+	} ) {
+		// Editor elements.
+		const customLink = this.editor.canvas
+			.locator( 'a' )
+			.filter( { hasText: 'Custom Link' } );
+		const pageLink = this.editor.canvas
+			.locator( 'a' )
+			.filter( { hasText: 'Page Link' } );
+
+		await expect( customLink ).toHaveCSS( 'color', textColor );
+		await expect( pageLink ).toHaveCSS( 'color', textColor );
+		// Navigation background.
+		const navigationWrapper = this.editor.canvas.getByRole( 'document', {
+			name: 'Block: Navigation',
+		} );
+		await expect( navigationWrapper ).toHaveCSS(
+			'background-color',
+			backgroundColor
+		);
+
+		await customLink.click();
+
+		// Submenu elements.
+		const submenuWrapper = this.editor.canvas
+			.getByRole( 'document', { name: 'Block: Custom Link' } )
+			.filter( { hasText: 'Submenu Link' } );
+		const submenuLink = submenuWrapper
+			.locator( 'a' )
+			.filter( { hasText: 'Submenu Link' } );
+
+		// Submenu link color.
+		await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor );
+
+		// Submenu background color.
+		await expect( submenuWrapper ).toHaveCSS(
+			'background-color',
+			submenuBackgroundColor
+		);
+
+		// Switch to mobile view for the rest of the editor color tests.
+		// Focus the navigation block.
+		await this.editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.click();
+		await this.editor.openDocumentSettingsSidebar();
+		// Switch to settings tab.
+		await this.page.getByRole( 'tab', { name: 'Settings' } ).click();
+		// Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors.
+		await this.page.getByRole( 'radio', { name: 'Always' } ).click();
+		await this.editor.canvas
+			.getByRole( 'button', { name: 'Open menu' } )
+			.click();
+
+		// Move the mouse to avoid accidentally triggering hover
+		// state on the links once the overlay opens.
+		await this.page.mouse.move( 1000, 1000 );
+
+		const overlay = this.editor.canvas
+			.locator( '.wp-block-navigation__responsive-container' )
+			.filter( { hasText: 'Submenu Link' } );
+
+		// All of the mobile menu navigation links should be the same color as the submenuTextColor.
+		await expect( customLink ).toHaveCSS( 'color', submenuTextColor );
+		await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor );
+		await expect( pageLink ).toHaveCSS( 'color', submenuTextColor );
+
+		// The mobile menu background should be the same color as the submenu background.
+		await expect( overlay ).toHaveCSS(
+			'background-color',
+			submenuBackgroundColor
+		);
+
+		// Set the mobile view option back to mobile
+		await this.page.getByRole( 'radio', { name: 'Mobile' } ).click();
+	}
+
+	async testFrontendColors( {
+		textColor,
+		backgroundColor,
+		submenuTextColor,
+		submenuBackgroundColor,
+	} ) {
+		// Top level link elements.
+		const customLink = this.page
+			.locator( 'a' )
+			.filter( { hasText: 'Custom Link' } );
+		const pageLink = this.page
+			.locator( 'a' )
+			.filter( { hasText: 'Page Link' } );
+
+		// Top level link colors.
+		await expect( customLink ).toHaveCSS( 'color', textColor );
+		await expect( pageLink ).toHaveCSS( 'color', textColor );
+
+		// Navigation background.
+		const menuWrapperFront = this.page
+			.getByRole( 'navigation', { name: 'Colored menu' } )
+			.getByRole( 'list' );
+		await expect( menuWrapperFront ).toHaveCSS(
+			'background-color',
+			backgroundColor
+		);
+
+		await customLink.hover();
+
+		// Submenu elements.
+		const submenuLink = this.page
+			.locator( 'a' )
+			.filter( { hasText: 'Submenu Link' } );
+		const submenuWrapper = this.page
+			.locator( '.wp-block-navigation__submenu-container' )
+			.filter( { has: submenuLink } );
+
+		// Submenu link color.
+		await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor );
+
+		// Submenu background color.
+		await expect( submenuWrapper ).toHaveCSS(
+			'background-color',
+			submenuBackgroundColor
+		);
+
+		// Open the frontend overlay so we can test the colors.
+		await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } );
+		await this.page.getByRole( 'button', { name: 'Open menu' } ).click();
+
+		// All of the mobile menu navigation links should be the same color as the submenuTextColor.
+		await expect( customLink ).toHaveCSS( 'color', submenuTextColor );
+		await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor );
+		await expect( pageLink ).toHaveCSS( 'color', submenuTextColor );
+
+		const overlayFront = this.page
+			.locator( '.wp-block-navigation__responsive-container' )
+			.filter( { hasText: 'Submenu Link' } );
+
+		// The mobile menu background should be the same color as the submenu background.
+		await expect( overlayFront ).toHaveCSS(
+			'background-color',
+			submenuBackgroundColor
+		);
+
+		// We need to reset the overlay to the default viewport if something runs after these tests.
+		await this.pageUtils.setBrowserViewport( 'large' );
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
new file mode 100644
index 00000000000000..b31533d0d17c24
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
@@ -0,0 +1,508 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Navigation block - Frontend interactivity', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.deleteAllPages();
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.deleteAllPages();
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.describe( 'Overlay menu', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+				canvas: 'edit',
+			} );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-link {"label":"Item 1","type":"custom","url":"http://www.wordpress.org/"} /-->
+					<!-- wp:navigation-link {"label":"Item 2","type":"custom","url":"http://www.wordpress.org/"} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'always' },
+			} );
+			await editor.saveSiteEditorEntities( {
+				isOnlyCurrentEntityDirty: true,
+			} );
+		} );
+
+		test( 'Overlay menu interactions', async ( { page, pageUtils } ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+
+			const closeMenuButton = page.getByRole( 'button', {
+				name: 'Close menu',
+			} );
+
+			// Test: overlay menu opens on click on open menu button
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+
+			// Test: overlay menu focuses on first element after opening
+			await expect( overlayMenuFirstElement ).toBeFocused();
+
+			// Test: overlay menu traps focus
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( closeMenuButton ).toBeFocused();
+			await pageUtils.pressKeys( 'Shift+Tab', { times: 2, delay: 50 } );
+			await expect( overlayMenuFirstElement ).toBeFocused();
+
+			// Test: overlay menu closes on click on close menu button
+			await closeMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeHidden();
+
+			// Test: overlay menu closes on ESC key
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await expect( openMenuButton ).toBeFocused();
+		} );
+
+		/**
+		 * These are already tested within the Overlay Interactions test above, but Safari is flakey on the Tab
+		 * keypresses (passes 50 - 70% of the time). Tab keypresses are testing fine manually in Safari, but not
+		 * in the test. nce we figure out why the Tab keypresses are flakey in the test, we can
+		 * remove this test and only rely on the Overlay Interactions test above and add a (@firefox, @webkit)
+		 * directive to the describe() statement. https://github.com/WordPress/gutenberg/pull/55198
+		 */
+		test( 'Overlay menu interactions in Safari (@webkit)', async ( {
+			page,
+			pageUtils,
+		} ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+
+			const closeMenuButton = page.getByRole( 'button', {
+				name: 'Close menu',
+			} );
+
+			// Test: overlay menu opens on click on open menu button
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+
+			// Test: overlay menu focuses on first element after opening
+			await expect( overlayMenuFirstElement ).toBeFocused();
+
+			// Test: overlay menu traps focus
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( closeMenuButton ).toBeFocused();
+			await pageUtils.pressKeys( 'Shift+Tab', { times: 2, delay: 50 } );
+			await expect( overlayMenuFirstElement ).toBeFocused();
+
+			// Test: overlay menu closes on click on close menu button
+			await closeMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeHidden();
+
+			// Test: overlay menu closes on ESC key
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await expect( openMenuButton ).toBeFocused();
+		} );
+	} );
+
+	test.describe( 'Submenu mouse and keyboard interactions', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+				canvas: 'edit',
+			} );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-link {"label":"Link 1","type":"custom","url":"http://www.wordpress.org/"} /-->
+					<!-- wp:navigation-submenu {"label":"Simple Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Simple Submenu Link 1","type":"custom","url":"http://www.wordpress.org/"} /-->
+					<!-- /wp:navigation-submenu -->
+					<!-- wp:navigation-submenu {"label":"Complex Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Complex Submenu Link 1","type":"custom","url":"http://www.wordpress.org/"} /-->
+						<!-- wp:navigation-submenu {"label":"Nested Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+							<!-- wp:navigation-link {"label":"Nested Submenu Link 1","type":"custom","url":"http://www.wordpress.org/"} /-->
+						<!-- /wp:navigation-submenu -->
+						<!-- wp:navigation-link {"label":"Complex Submenu Link 2","type":"custom","url":"http://www.wordpress.org/"} /-->
+					<!-- /wp:navigation-submenu -->
+					<!-- wp:navigation-link {"label":"Link 2","type":"custom","url":"http://www.wordpress.org/"} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off', openSubmenusOnClick: true },
+			} );
+			await editor.saveSiteEditorEntities( {
+				isOnlyCurrentEntityDirty: true,
+			} );
+		} );
+
+		test( 'Submenu interactions', async ( { page, pageUtils } ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+			const lastFirstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 2',
+			} );
+
+			// Test: submenu opens on click
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.click();
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeVisible();
+
+			// Test: submenu closes on click outside submenu
+			await page.click( 'body' );
+			await expect( innerElement ).toBeHidden();
+
+			// Test: nested submenu opens on click
+			await complexSubmenuButton.click();
+			await expect( complexSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Test: nested submenus close on click outside submenu
+			await page.click( 'body' );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Test: submenu opens on Enter keypress
+			await simpleSubmenuButton.focus();
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeVisible();
+
+			// Test: submenu closes on ESC key and focuses parent link
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( innerElement ).toBeHidden();
+			await expect( simpleSubmenuButton ).toBeFocused();
+
+			// Test: submenu closes on tab outside submenu
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeVisible();
+			// Tab to first element, then tab outside the submenu.
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( complexSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeHidden();
+
+			// Test: only nested submenu closes on tab outside
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( complexSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Tab to nested submenu first element, then tab outside the nested
+			// submenu.
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( lastFirstLevelElement ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+			// Tab outside the complex submenu.
+			await page.keyboard.press( 'Tab' );
+			await expect( firstLevelElement ).toBeHidden();
+		} );
+
+		/**
+		 * These are already tested within the Submenu Interactions test above, but Safari is flakey on the
+		 * Tab keypresses (passes 50 - 70% of the time). Tab keypresses are testing fine manually in Safari,
+		 * but not in the test. Once we figure out why the Tab keypresses are flakey in the test, we can
+		 * remove this test and only rely on the Submenu interactions test above and add a (@firefox, @webkit)
+		 * directive to the describe() statement. https://github.com/WordPress/gutenberg/pull/55198
+		 */
+		test( 'Submenu interactions on Safari (@webkit)', async ( {
+			page,
+			pageUtils,
+		} ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+
+			// Test: submenu opens on click and focuses the button
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.click();
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeVisible();
+
+			// Test: a second click closes the submenu
+			await simpleSubmenuButton.click();
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeHidden();
+
+			// Test: submenu opens on Enter keypress
+			await simpleSubmenuButton.focus();
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( simpleSubmenuButton ).toBeFocused();
+			await expect( innerElement ).toBeVisible();
+
+			// Test: submenu closes on second Enter keypress
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( innerElement ).toBeHidden();
+			await expect( simpleSubmenuButton ).toBeFocused();
+
+			// Test: inner submenu opens on click and focuses the button
+			await complexSubmenuButton.click();
+			await expect( complexSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+			// Click the inner menu button and check it opens the third level menu
+			await nestedSubmenuButton.click();
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Click the inner menu button and check it closes the third level menu
+			await nestedSubmenuButton.click();
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Do the same with Enter keypresses: open the third level menu
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Close the third level menu
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( nestedSubmenuButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Close the menu via click on the body
+			await page.click( 'body' );
+			await expect( firstLevelElement ).toBeHidden();
+
+			// Tests not covered: Tabbing to close menus
+		} );
+	} );
+
+	test.describe( 'Submenus (Arrow setting) (@firefox, @webkit)', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+				canvas: 'edit',
+			} );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-submenu {"label":"Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Submenu Link","type":"custom","url":"http://www.wordpress.org/"} /-->
+						<!-- wp:navigation-submenu {"label":"Nested Menu","type":"internal","url":"#heading","kind":"custom"} -->
+							<!-- wp:navigation-link {"label":"Nested Menu Link","type":"custom","url":"http://www.wordpress.org/"} /-->
+						<!-- /wp:navigation-submenu -->
+					<!-- /wp:navigation-submenu -->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off' },
+			} );
+			await editor.saveSiteEditorEntities( {
+				isOnlyCurrentEntityDirty: true,
+			} );
+		} );
+
+		test( 'submenu click on the arrow interactions', async ( { page } ) => {
+			await page.goto( '/' );
+			const arrowButton = page.getByRole( 'button', {
+				name: 'Submenu submenu',
+			} );
+			const nestedSubmenuArrowButton = page.getByRole( 'button', {
+				name: 'Nested Menu submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Submenu Link',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Menu Link',
+			} );
+
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+			// Open first submenu level
+			await arrowButton.click();
+			await expect( arrowButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Close first submenu level, check that it closes and focus is on the arrow button
+			await arrowButton.click();
+			await expect( arrowButton ).toBeFocused();
+			// Move the mouse so the hover on the button doesn't keep the menu open
+			await page.mouse.move( 400, 400 );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Open first submenu level one more time so we can test the nested submenu
+			await arrowButton.click();
+			await expect( arrowButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Nested submenu open
+			await nestedSubmenuArrowButton.click();
+			await expect( nestedSubmenuArrowButton ).toBeFocused();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Nested submenu close
+			await nestedSubmenuArrowButton.click();
+			await expect( nestedSubmenuArrowButton ).toBeFocused();
+			// Move the mouse so the hover on the button doesn't keep the menu open
+			await page.mouse.move( 400, 400 );
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			// Close menu via click on the body
+			await page.click( 'body' );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'Page list block (@firefox, @webkit)', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			const parentPage = await requestUtils.createPage( {
+				title: 'Parent Page',
+				status: 'publish',
+			} );
+
+			await requestUtils.createPage( {
+				title: 'Subpage',
+				status: 'publish',
+				parent: parentPage.id,
+			} );
+
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+				canvas: 'edit',
+			} );
+			await requestUtils.createNavigationMenu( {
+				title: 'Page list menu',
+				content: `
+					<!-- wp:page-list /-->
+					<!-- wp:navigation-link {"label":"Link","type":"custom","url":"http://www.wordpress.org/"} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off', openSubmenusOnClick: true },
+			} );
+			await editor.saveSiteEditorEntities( {
+				isOnlyCurrentEntityDirty: true,
+			} );
+		} );
+
+		test( 'page-list submenu user interactions', async ( {
+			page,
+			pageUtils,
+		} ) => {
+			await page.goto( '/' );
+			const submenuButton = page.getByRole( 'button', {
+				name: 'Parent',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Subpage',
+			} );
+			await expect( innerElement ).toBeHidden();
+
+			// page-list submenu opens on click
+			await submenuButton.click();
+			await expect( innerElement ).toBeVisible();
+
+			// page-list submenu closes on click outside
+			await page.click( 'body' );
+			await expect( innerElement ).toBeHidden();
+
+			// page-list submenu opens on enter keypress
+			await submenuButton.focus();
+			await pageUtils.pressKeys( 'Enter' );
+			await expect( innerElement ).toBeVisible();
+
+			// page-list submenu closes on ESC key and focuses submenu button
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( innerElement ).toBeHidden();
+			await expect( submenuButton ).toBeFocused();
+
+			// page-list submenu closes on tab outside submenu
+			await pageUtils.pressKeys( 'Enter', { delay: 50 } );
+			// Tab to first element, then tab outside the submenu.
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( innerElement ).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
new file mode 100644
index 00000000000000..2f9963169a5230
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -0,0 +1,639 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Navigation block - List view editing', () => {
+	const navMenuBlocksFixture = {
+		title: 'Test Menu',
+		content: `<!-- wp:navigation-link {"label":"Top Level Item 1","type":"page","id":250,"url":"http://localhost:8888/quod-error-esse-nemo-corporis-rerum-repellendus/","kind":"post-type"} /-->
+        <!-- wp:navigation-submenu {"label":"Top Level Item 2","type":"page","id":250,"url":"http://localhost:8888/quod-error-esse-nemo-corporis-rerum-repellendus/","kind":"post-type"} -->
+            <!-- wp:navigation-link {"label":"Test Submenu Item","type":"page","id":270,"url":"http://localhost:8888/et-aspernatur-recusandae-non-sint/","kind":"post-type"} /-->
+        <!-- /wp:navigation-submenu -->`,
+	};
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		// We need pages to be published so the Link Control can return pages
+		await requestUtils.createPage( {
+			title: 'Test Page 1',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Test Page 2',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Test Page 3',
+			status: 'publish',
+		} );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPages(),
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllMenus(),
+		] );
+	} );
+
+	test.use( {
+		linkControl: async ( { page }, use ) => {
+			await use( new LinkControl( { page } ) );
+		},
+	} );
+
+	test( 'show a list view in the inspector controls', async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		await expect(
+			page.getByRole( 'tab', {
+				name: 'List View',
+			} )
+		).toBeVisible();
+
+		const listViewPanel = page.getByRole( 'tabpanel', {
+			name: 'List View',
+		} );
+
+		await expect( listViewPanel ).toBeVisible();
+
+		await expect(
+			listViewPanel.getByRole( 'heading', {
+				name: 'Menu',
+			} )
+		).toBeVisible();
+
+		await expect(
+			listViewPanel.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+				description: 'Structure for navigation menu: Test Menu',
+			} )
+		).toBeVisible();
+	} );
+
+	test( `list view should correctly reflect navigation items' structure`, async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		// Check the structure of the individual menu items matches the one that was created.
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Top Level Item 1',
+				} )
+				.filter( {
+					hasText: 'Block 1 of 2, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Top Level Item 2',
+				} )
+				.filter( {
+					hasText: 'Block 2 of 2, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Test Submenu Item',
+				} )
+				.filter( {
+					hasText: 'Block 1 of 1, Level 2.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+	} );
+
+	test( `can add new menu items`, async ( {
+		page,
+		editor,
+		requestUtils,
+		linkControl,
+	} ) => {
+		const { id: menuId } =
+			await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		// Insert x2 blocks as a stress test as several bugs have been found with inserting
+		// blocks into the navigation block when there are multiple blocks referencing the
+		// **same** menu.
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: menuId,
+			},
+		} );
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: menuId,
+			},
+		} );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		const appender = listView.getByRole( 'button', {
+			name: 'Add block',
+		} );
+
+		await expect( appender ).toBeVisible();
+
+		await appender.click();
+
+		// Expect to see the block inserter.
+		await expect(
+			page.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+		).toBeFocused();
+
+		const blockResults = page.getByRole( 'listbox', {
+			name: 'Blocks',
+		} );
+
+		await expect( blockResults ).toBeVisible();
+
+		const blockResultOptions = blockResults.getByRole( 'option' );
+
+		// Expect to see the Page Link and Custom Link blocks as the nth(0) and nth(1) results.
+		// This is important for usability as the Page Link block is the most likely to be used.
+		await expect( blockResultOptions.nth( 0 ) ).toHaveText( 'Page Link' );
+		await expect( blockResultOptions.nth( 1 ) ).toHaveText( 'Custom Link' );
+
+		// Select the Page Link option.
+		const customLinkResult = blockResultOptions.nth( 1 );
+		await customLinkResult.click();
+
+		// Expect to see the Link creation UI be focused.
+		const linkUIInput = linkControl.getSearchInput();
+
+		// Coverage for bug whereby Link UI input would be incorrectly prepopulated.
+		// It should:
+		// - be focused - should not be in "preview" mode but rather ready to accept input.
+		// - be empty - not pre-populated
+		// See: https://github.com/WordPress/gutenberg/issues/50733
+		await expect( linkUIInput ).toBeFocused();
+		await expect( linkUIInput ).toBeEmpty();
+
+		// Provides test coverage for feature whereby Custom Link type
+		// should default to `Pages` when displaying the "initial suggestions"
+		// in the Link UI.
+		// See https://github.com/WordPress/gutenberg/pull/54622.
+		const firstResult = await linkControl.getNthSearchResult( 0 );
+		const secondResult = await linkControl.getNthSearchResult( 1 );
+		const thirdResult = await linkControl.getNthSearchResult( 2 );
+
+		const firstResultType =
+			await linkControl.getSearchResultType( firstResult );
+
+		const secondResultType =
+			await linkControl.getSearchResultType( secondResult );
+
+		const thirdResultType =
+			await linkControl.getSearchResultType( thirdResult );
+
+		expect( firstResultType ).toBe( 'Page' );
+		expect( secondResultType ).toBe( 'Page' );
+		expect( thirdResultType ).toBe( 'Page' );
+
+		// Grab the text from the first result so we can check (later on) that it was inserted.
+		const firstResultText =
+			await linkControl.getSearchResultText( firstResult );
+
+		// Create the link.
+		await firstResult.click();
+
+		// Check the new menu item was inserted at the end of the existing menu.
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: firstResultText,
+				} )
+				.filter( {
+					hasText: 'Block 3 of 3, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+	} );
+
+	test( `can remove menu items`, async ( { page, editor, requestUtils } ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		const subMenuItem = listView
+			.getByRole( 'gridcell', {
+				name: 'Top Level Item 2',
+			} )
+			.filter( {
+				hasText: 'Block 2 of 2, Level 1.', // proxy for filtering by description.
+			} );
+
+		// The options menu button is a sibling of the menu item gridcell.
+		const subMenuItemActions = subMenuItem
+			.locator( '..' ) // parent selector.
+			.getByRole( 'button', {
+				name: 'Options',
+			} );
+
+		// Open the actions menu.
+		await subMenuItemActions.click();
+
+		// usage of `page` is required because the options menu is rendered into a slot
+		// outside of the treegrid.
+		const removeBlockAction = page
+			.getByRole( 'menu', {
+				name: 'Options',
+			} )
+			.getByRole( 'menuitem', {
+				name: 'Remove Top Level Item 2',
+			} );
+
+		await removeBlockAction.click();
+
+		// Check the menu item was removed.
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Top Level Item 2',
+				} )
+				.filter( {
+					hasText: 'Block 2 of 2, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeHidden();
+	} );
+
+	test( `can edit menu items`, async ( { page, editor, requestUtils } ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		// Click on the first menu item to open its settings.
+		const firstMenuItemAnchor = listView.getByRole( 'link', {
+			name: 'Top Level Item 1',
+		} );
+		await firstMenuItemAnchor.click();
+
+		// Get the settings panel.
+		const blockSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		await expect( blockSettings ).toBeVisible();
+
+		await expect(
+			blockSettings.getByRole( 'heading', {
+				name: 'Page Link',
+			} )
+		).toBeVisible();
+
+		await expect(
+			blockSettings.getByRole( 'tab', {
+				name: 'Settings',
+				selected: true,
+			} )
+		).toBeVisible();
+
+		await expect(
+			blockSettings
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByRole( 'heading', {
+					name: 'Settings',
+				} )
+		).toBeVisible();
+
+		const labelInput = blockSettings.getByRole( 'textbox', {
+			name: 'Text',
+		} );
+
+		await expect( labelInput ).toHaveValue( 'Top Level Item 1' );
+
+		await labelInput.focus();
+
+		await page.keyboard.type( 'Changed label' );
+
+		// Click the back button to go back to the Nav block.
+		await blockSettings
+			.getByRole( 'button', {
+				name: 'Go to parent Navigation block',
+			} )
+			.click();
+
+		// Check we're back on the Nav block list view.
+		const listViewPanel = page.getByRole( 'tabpanel', {
+			name: 'List View',
+		} );
+
+		await expect( listViewPanel ).toBeVisible();
+
+		// Check the label was updated.
+		await expect(
+			listViewPanel
+				.getByRole( 'gridcell', {
+					name: 'Changed label', // new menu item text
+				} )
+				.filter( {
+					hasText: 'Block 1 of 2, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+	} );
+
+	test( `can add submenus`, async ( {
+		page,
+		editor,
+		requestUtils,
+		linkControl,
+	} ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		// click on options menu for the first menu item and select remove.
+		const firstMenuItem = listView
+			.getByRole( 'gridcell', {
+				name: 'Top Level Item 1',
+			} )
+			.filter( {
+				hasText: 'Block 1 of 2, Level 1.', // proxy for filtering by description.
+			} );
+
+		// The options menu button is a sibling of the menu item gridcell.
+		const firstItemActions = firstMenuItem
+			.locator( '..' ) // parent selector.
+			.getByRole( 'button', {
+				name: 'Options',
+			} );
+
+		// Open the actions menu.
+		await firstItemActions.click();
+
+		// Add the submenu.
+		// usage of `page` is required because the options menu is rendered into a slot
+		// outside of the treegrid.
+		const addSubmenuAction = page
+			.getByRole( 'menu', {
+				name: 'Options',
+			} )
+			.getByRole( 'menuitem', {
+				name: 'Add submenu',
+			} );
+
+		await addSubmenuAction.click();
+
+		await linkControl.searchFor( 'https://wordpress.org' );
+
+		await page.keyboard.press( 'Enter' );
+
+		// Check the new item was inserted in the correct place.
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'wordpress.org',
+				} )
+				.filter( {
+					hasText: 'Block 1 of 1, Level 2.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+
+		// Check that the original item is still there but that it is now
+		// a submenu item.
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Top Level Item 1',
+				} )
+				.filter( {
+					hasText: 'Block 1 of 2, Level 1.', // proxy for filtering by description.
+				} )
+		).toBeVisible();
+	} );
+
+	test( `does not display link interface for blocks that have not just been inserted`, async ( {
+		page,
+		editor,
+		requestUtils,
+		linkControl,
+	} ) => {
+		// Provides coverage for a bug whereby the Link UI would be unexpectedly displayed for the last
+		// inserted block even if the block had been deselected and then reselected.
+		// See: https://github.com/WordPress/gutenberg/issues/50601
+
+		const { id: menuId } =
+			await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		// Insert x2 blocks as a stress test as several bugs have been found with inserting
+		// blocks into the navigation block when there are multiple blocks referencing the
+		// **same** menu.
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: menuId,
+			},
+		} );
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: menuId,
+			},
+		} );
+
+		await editor.openDocumentSettingsSidebar();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+			description: 'Structure for navigation menu: Test Menu',
+		} );
+
+		await listView
+			.getByRole( 'button', {
+				name: 'Add block',
+			} )
+			.click();
+
+		const blockResults = page.getByRole( 'listbox', {
+			name: 'Blocks',
+		} );
+
+		await expect( blockResults ).toBeVisible();
+
+		const blockResultOptions = blockResults.getByRole( 'option' );
+
+		// Select the Page Link option.
+		await blockResultOptions.nth( 0 ).click();
+
+		// Immediately dismiss the Link UI thereby not populating the `url` attribute
+		// of the block.
+		await page.keyboard.press( 'Escape' );
+
+		// Get the Inspector Tabs.
+		const blockSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		// Trigger "unmount" of the List View.
+		await blockSettings
+			.getByRole( 'tab', {
+				name: 'Settings',
+			} )
+			.click();
+
+		// "Remount" the List View.
+		// this is where the bug previously occurred.
+		await blockSettings
+			.getByRole( 'tab', {
+				name: 'List View',
+			} )
+			.click();
+
+		// Check that despite being the last inserted block, the Link UI is not displayed
+		// in this scenario because it was not **just** inserted into the List View (i.e.
+		// we have unmounted the list view and then remounted it).
+		await expect( linkControl.getSearchInput() ).toBeHidden();
+	} );
+
+	test( `can create a new menu without losing focus`, async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		await editor.openDocumentSettingsSidebar();
+
+		await page.getByLabel( 'Test Menu' ).click();
+
+		await page.keyboard.press( 'ArrowUp' );
+
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Create new Menu' } )
+		).toBeFocused();
+
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			page.getByText( 'This Navigation Menu is empty.' )
+		).toBeVisible();
+
+		// Move focus to the appender
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Navigation',
+				} )
+				.getByLabel( 'Add block' )
+		).toBeFocused();
+	} );
+} );
+
+class LinkControl {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	getSearchInput() {
+		return this.page.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+	}
+
+	async getSearchResults() {
+		const searchInput = this.getSearchInput();
+
+		const resultsRef = await searchInput.getAttribute( 'aria-owns' );
+
+		const linkUIResults = this.page.locator( `#${ resultsRef }` );
+
+		await expect( linkUIResults ).toBeVisible();
+
+		return linkUIResults.getByRole( 'option' );
+	}
+
+	async getNthSearchResult( index = 0 ) {
+		const results = await this.getSearchResults();
+		return results.nth( index );
+	}
+
+	async searchFor( searchTerm = 'https://wordpress.org' ) {
+		const input = this.getSearchInput();
+
+		await expect( input ).toBeFocused();
+
+		await this.page.keyboard.type( searchTerm );
+
+		await expect( input ).toHaveValue( searchTerm );
+
+		return input;
+	}
+
+	async getSearchResultText( result ) {
+		await expect( result ).toBeVisible();
+
+		return result
+			.locator( '.components-menu-item__item' ) // this is the only way to get the label text without the URL.
+			.innerText();
+	}
+
+	async getSearchResultType( result ) {
+		await expect( result ).toBeVisible();
+
+		return result
+			.locator( '.components-menu-item__shortcut' ) // this is the only way to get the type text.
+			.innerText();
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
new file mode 100644
index 00000000000000..83e95a08c0f6a2
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -0,0 +1,814 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Navigation block', () => {
+	test.beforeEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		// We need pages to be published so the Link Control can return pages
+		await requestUtils.createPage( {
+			title: 'Cat',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Dog',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Walrus',
+			status: 'publish',
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllPages(),
+			requestUtils.deleteAllMenus(),
+		] );
+	} );
+
+	test.use( {
+		navigation: async ( { page, pageUtils, editor }, use ) => {
+			await use( new Navigation( { page, pageUtils, editor } ) );
+		},
+	} );
+
+	test.describe( 'As a user I want the navigation block to fallback to the best possible default', () => {
+		test( 'default to a list of pages if there are no menus', async ( {
+			admin,
+			editor,
+		} ) => {
+			await admin.createNewPost();
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			const pageListBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Page List',
+			} );
+
+			await expect( pageListBlock ).toBeVisible( {
+				// Wait for the Nav and Page List block API requests to resolve.
+				// Note: avoid waiting on network requests as these are not perceivable
+				// to the user.
+				// See: https://github.com/WordPress/gutenberg/pull/45070#issuecomment-1373712007.
+				timeout: 10000,
+			} );
+
+			// Check the markup of the block is correct.
+			await editor.publishPost();
+			const content = await editor.getEditedPostContent();
+
+			expect( content ).toMatch( /<!-- wp:navigation {"ref":\d+} \/-->/ );
+		} );
+
+		test( 'default to my only existing menu', async ( {
+			admin,
+			editor,
+			page,
+			requestUtils,
+		} ) => {
+			await admin.createNewPost();
+			const createdMenu = await requestUtils.createNavigationMenu( {
+				title: 'Test Menu 1',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
+			} );
+
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			// Check the block in the canvas.
+			await expect(
+				editor.canvas.locator(
+					`role=textbox[name="Navigation link text"i] >> text="WordPress"`
+				)
+			).toBeVisible();
+
+			const postId = await editor.publishPost();
+
+			// Check the markup of the block is correct.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/navigation',
+					attributes: { ref: createdMenu.id },
+				},
+			] );
+
+			// Check the block in the frontend.
+			await page.goto( `/?p=${ postId }` );
+
+			await expect(
+				page.locator(
+					`role=navigation >> role=link[name="WordPress"i]`
+				)
+			).toBeVisible();
+		} );
+
+		test( 'default to the only existing classic menu if there are no block menus', async ( {
+			admin,
+			page,
+			editor,
+			requestUtils,
+		} ) => {
+			// Create a classic menu.
+			await requestUtils.createClassicMenu( 'Test Classic 1' );
+			await admin.createNewPost();
+
+			await editor.insertBlock( { name: 'core/navigation' } );
+			// We need to check the canvas after inserting the navigation block to be able to target the block.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/navigation',
+				},
+			] );
+
+			// Check the block in the canvas.
+			await expect(
+				editor.canvas.locator(
+					`role=textbox[name="Navigation link text"i] >> text="Custom link"`
+				)
+			).toBeVisible( { timeout: 10000 } ); // allow time for network request.
+
+			const postId = await editor.publishPost();
+			// Check the block in the frontend.
+			await page.goto( `/?p=${ postId }` );
+
+			await expect(
+				page.locator(
+					`role=navigation >> role=link[name="Custom link"i]`
+				)
+			).toBeVisible();
+		} );
+
+		test( 'default to my most recently created menu', async ( {
+			admin,
+			page,
+			editor,
+			requestUtils,
+		} ) => {
+			await admin.createNewPost();
+			await requestUtils.createNavigationMenu( {
+				title: 'Test Menu 1',
+				content:
+					'<!-- wp:navigation-link {"label":"Menu 1 Link","type":"custom","url":"http://localhost:8889/#menu-1-link","kind":"custom"} /-->',
+			} );
+
+			//FIXME this is needed because if the two menus are created at the same time, the API will return them in the wrong order.
+			//https://core.trac.wordpress.org/ticket/57914
+			await editor.page.waitForTimeout( 1000 );
+
+			const latestMenu = await requestUtils.createNavigationMenu( {
+				title: 'Test Menu 2',
+				content:
+					'<!-- wp:navigation-link {"label":"Menu 2 Link","type":"custom","url":"http://localhost:8889/#menu-2-link","kind":"custom"} /-->',
+			} );
+
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			// Check the markup of the block is correct.
+			const postId = await editor.publishPost();
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/navigation',
+					attributes: { ref: latestMenu.id },
+				},
+			] );
+
+			// Check the block in the canvas.
+			await expect(
+				editor.canvas.locator(
+					`role=textbox[name="Navigation link text"i] >> text="Menu 2 Link"`
+				)
+			).toBeVisible();
+
+			// Check the block in the frontend.
+			await page.goto( `/?p=${ postId }` );
+
+			await expect(
+				page.locator(
+					`role=navigation >> role=link[name="Menu 2 Link"i]`
+				)
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'As a user I want to create submenus using the navigation block', () => {
+		test( 'create a submenu', async ( {
+			admin,
+			page,
+			editor,
+			requestUtils,
+		} ) => {
+			await admin.createNewPost();
+			await requestUtils.createNavigationMenu( {
+				title: 'Test Menu',
+				content: '',
+			} );
+
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			const navBlockInserter = editor.canvas.getByRole( 'button', {
+				name: 'Add block',
+			} );
+			await navBlockInserter.click();
+
+			await page.keyboard.type( 'https://example.com' );
+			await page.keyboard.press( 'Enter' );
+
+			const addSubmenuButton = page.getByRole( 'button', {
+				name: 'Add submenu',
+			} );
+			await addSubmenuButton.click();
+			await page.keyboard.type( '#yup' );
+			await page.keyboard.press( 'Enter' );
+
+			const postId = await editor.publishPost();
+			await page.goto( `/?p=${ postId }` );
+
+			await expect(
+				page.locator(
+					`role=navigation >> role=button[name="example.com submenu "i]`
+				)
+			).toBeVisible();
+		} );
+
+		test( 'submenu converts to link automatically', async ( {
+			admin,
+			pageUtils,
+			editor,
+			requestUtils,
+		} ) => {
+			await admin.createNewPost();
+			await requestUtils.createNavigationMenu( {
+				title: 'Test Menu',
+				content:
+					'<!-- wp:navigation-submenu {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} --><!-- wp:navigation-link {"label":"WordPress Child","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /--><!-- /wp:navigation-submenu -->',
+			} );
+
+			await editor.insertBlock( { name: 'core/navigation' } );
+
+			await expect(
+				editor.canvas.locator(
+					`role=textbox[name="Navigation link text"i] >> text="WordPress"`
+				)
+			).toBeVisible();
+
+			const navigationBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Navigation',
+			} );
+			await editor.selectBlocks( navigationBlock );
+
+			const submenuBlock1 = editor.canvas.getByRole( 'document', {
+				name: 'Block: Submenu',
+			} );
+			await expect( submenuBlock1 ).toBeVisible();
+
+			// select the child link via keyboard
+			await pageUtils.pressKeys( 'ArrowDown' );
+			await pageUtils.pressKeys( 'ArrowDown' );
+			await pageUtils.pressKeys( 'ArrowDown' );
+
+			// remove the child link
+			await pageUtils.pressKeys( 'access+z' );
+
+			const submenuBlock2 = editor.canvas.getByRole( 'document', {
+				name: 'Block: Submenu',
+			} );
+			await expect( submenuBlock2 ).toBeHidden();
+		} );
+	} );
+
+	test( 'As a user I want to see a warning if the menu referenced by a navigation block is not available', async ( {
+		admin,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: 1,
+			},
+		} );
+
+		// Check the markup of the block is correct.
+		await editor.publishPost();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/navigation',
+				attributes: { ref: 1 },
+			},
+		] );
+
+		// Find the warning message
+		const warningMessage = editor.canvas
+			.getByRole( 'document', { name: 'Block: Navigation' } )
+			.getByText( 'Navigation Menu has been deleted or is unavailable.' );
+		await expect( warningMessage ).toBeVisible();
+	} );
+
+	test( 'navigation manages focus for creating, editing, and deleting items', async ( {
+		admin,
+		page,
+		pageUtils,
+		editor,
+		requestUtils,
+		navigation,
+	} ) => {
+		await admin.createNewPost();
+
+		await requestUtils.createNavigationMenu( {
+			title: 'Animals',
+			content: '',
+		} );
+
+		await editor.insertBlock( { name: 'core/navigation' } );
+
+		const navBlock = navigation.getNavBlock();
+
+		const navBlockInserter = navigation.getNavBlockInserter();
+		// Wait until the nav block inserter is visible before we continue. Otherwise the navigation block may not have finished being created.
+		await expect( navBlockInserter ).toBeVisible();
+
+		/**
+		 * Test: We don't lose focus when using the navigation link appender
+		 */
+		await pageUtils.pressKeys( 'ArrowDown' );
+		await navigation.useBlockInserter();
+		await navigation.addLinkClose();
+		/**
+		 * TODO: This is not desired behavior. Ideally the
+		 * Appender should be focused again since it opened
+		 * the link control.
+		 * IMPORTANT: This check is not to enforce this behavior,
+		 * but to make sure focus is kept nearby until we are able
+		 * to send focus to the appender.
+		 */
+		await expect( navBlock ).toBeFocused();
+
+		/**
+		 * Test: Creating a link sends focus to the newly created navigation link item
+		 */
+		await pageUtils.pressKeys( 'ArrowDown' );
+
+		await navigation.useBlockInserter();
+		await navigation.addPage( 'Cat' );
+		/**
+		 * Test: We can open and close the preview with the keyboard and escape
+		 *       buttons from a top-level nav item using both the shortcut and toolbar
+		 */
+		await navigation.useLinkShortcut();
+		await navigation.previewIsOpenAndCloses();
+		await navigation.checkLabelFocus( 'Cat' );
+
+		await navigation.canUseToolbarLink();
+
+		/**
+		 * Test: Creating a link from a url-string (https://www.example.com) returns
+		 *       focus to the newly created link with the text selected
+		 */
+		// Move focus to the Add Block Appender.
+		await page.keyboard.press( 'Escape' );
+		await pageUtils.pressKeys( 'ArrowDown' );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 2 } );
+
+		await navigation.useBlockInserter();
+		await navigation.addCustomURL( 'https://example.com' );
+		await navigation.expectToHaveTextSelected( 'example.com' );
+
+		/**
+		 * Test: We can open and close the preview with the keyboard and escape
+		 *       buttons from a top-level nav link with a url-like label using
+		 *       both the shortcut and toolbar
+		 */
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await navigation.useLinkShortcut();
+		await navigation.previewIsOpenAndCloses();
+		await navigation.checkLabelFocus( 'example.com' );
+
+		await navigation.canUseToolbarLink();
+
+		/**
+		 * Test: Can add submenu item using the keyboard
+		 */
+		navigation.useToolbarButton( 'Add submenu' );
+
+		// Expect the submenu Add link to be present
+		await expect(
+			editor.canvas.locator( 'a' ).filter( { hasText: 'Add link' } )
+		).toBeVisible();
+
+		await pageUtils.pressKeys( 'ArrowDown' );
+		// There is a bug that won't allow us to press Enter to add the link: https://github.com/WordPress/gutenberg/issues/60051
+		// TODO: Use Enter after that bug is resolved
+		await navigation.useLinkShortcut();
+
+		await navigation.addPage( 'Dog' );
+
+		/**
+		 * Test: We can open and close the preview with the keyboard and escape
+		 *       buttons from a submenu nav item using both the shortcut and toolbar
+		 */
+		await navigation.useLinkShortcut();
+		await navigation.previewIsOpenAndCloses();
+		await navigation.checkLabelFocus( 'Dog' );
+
+		await navigation.canUseToolbarLink();
+
+		// Return to nav label from toolbar
+		await page.keyboard.press( 'Escape' );
+
+		// We should be at the first position on the label
+		await navigation.checkLabelFocus( 'Dog' );
+
+		/**
+		 * Test: We don't lose focus when closing the submenu appender
+		 */
+
+		// Move focus to the submenu navigation appender
+		await page.keyboard.press( 'End' );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 2 } );
+		await navigation.useBlockInserter();
+		await navigation.addLinkClose();
+		/**
+		 * TODO: This is not desired behavior. Ideally the
+		 * Appender should be focused again since it opened
+		 * the link control.
+		 * IMPORTANT: This check is not to enforce this behavior,
+		 * but to make sure focus is kept nearby until we are able
+		 * to send focus to the appender. It is falling back to the previous sibling.
+		 */
+		await navigation.checkLabelFocus( 'Dog' );
+
+		/**
+		 * Test: Use the submenu nav item appender to add a custom link
+		 */
+		await page.keyboard.press( 'End' );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 2 } );
+		await navigation.useBlockInserter();
+		await navigation.addCustomURL( 'https://wordpress.org' );
+		await navigation.expectToHaveTextSelected( 'wordpress.org' );
+
+		/**
+		 * Test: We can open and close the preview with the keyboard and escape
+		 *       both the shortcut and toolbar
+		 */
+		await pageUtils.pressKeys( 'ArrowLeft' );
+		await navigation.useLinkShortcut();
+		await navigation.previewIsOpenAndCloses();
+		await navigation.checkLabelFocus( 'wordpress.org' );
+		await navigation.canUseToolbarLink();
+
+		/**
+		 * Test: We can open and close the preview from a submenu navigation block (the top-level parent of a submenu)
+		 * using both the shortcut and toolbar
+		 */
+		// Exit the toolbar
+		await page.keyboard.press( 'Escape' );
+		// Move to the submenu item
+		await pageUtils.pressKeys( 'ArrowUp', { times: 4 } );
+		await page.keyboard.press( 'Home' );
+
+		// Check we're on our submenu link
+		await navigation.checkLabelFocus( 'example.com' );
+		// Test the shortcut
+		await navigation.useLinkShortcut();
+		await navigation.previewIsOpenAndCloses();
+		await navigation.checkLabelFocus( 'example.com' );
+		// Test the toolbar
+		await navigation.canUseToolbarLink();
+		await page.keyboard.press( 'Escape' );
+		await navigation.checkLabelFocus( 'example.com' );
+
+		/**
+		 * Deleting returns items focus to its sibling
+		 */
+		await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );
+		await navigation.checkLabelFocus( 'wordpress.org' );
+		// Delete the nav link
+		await pageUtils.pressKeys( 'access+z' );
+		// Focus moved to sibling
+		await navigation.checkLabelFocus( 'Dog' );
+		// Add a link back so we can delete the first submenu link and see if focus returns to the parent submenu item
+		await page.keyboard.press( 'End' );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 2 } );
+		await navigation.useBlockInserter();
+		await navigation.addCustomURL( 'https://wordpress.org' );
+		await navigation.expectToHaveTextSelected( 'wordpress.org' );
+
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+		await navigation.checkLabelFocus( 'Dog' );
+		// Delete the nav link
+		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'ArrowDown' );
+		// Focus moved to parent submenu item
+		await navigation.checkLabelFocus( 'example.com' );
+		// Deleting this should move focus to the sibling item
+		await pageUtils.pressKeys( 'access+z' );
+		await navigation.checkLabelFocus( 'Cat' );
+		// Deleting with no more siblings should focus the navigation block again
+		await pageUtils.pressKeys( 'access+z' );
+		await expect( navBlock ).toBeFocused();
+		// Wait until the nav block inserter is visible before we continue.
+		await expect( navBlockInserter ).toBeVisible();
+		// Now the appender should be visible and reachable with an arrow down
+		await pageUtils.pressKeys( 'ArrowDown' );
+		await expect( navBlockInserter ).toBeFocused();
+	} );
+
+	test( 'Adding new links to a navigation block with existing inner blocks triggers creation of a single Navigation Menu', async ( {
+		admin,
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		// As this test depends on there being no menus,
+		// we need to delete any existing menus as an explicit
+		// precondition rather than rely on global test setup.
+		await requestUtils.deleteAllMenus();
+
+		// Ensure that there are no menus before beginning the test.
+		expect(
+			await requestUtils.getNavigationMenus( {
+				status: [ 'publish', 'draft' ],
+			} )
+		).toHaveLength( 0 );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/page-list',
+				},
+			],
+		} );
+
+		const navBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Navigation',
+		} );
+
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Page List',
+			} )
+		).toBeVisible();
+
+		await expect( navBlock ).toBeVisible();
+
+		await editor.selectBlocks( navBlock );
+
+		await navBlock.getByRole( 'button', { name: 'Add block' } ).click();
+
+		// This relies on network so allow additional time for
+		// the request to complete.
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Dismiss this notice',
+				text: 'Navigation Menu successfully created',
+			} )
+		).toBeVisible( { timeout: 10000 } );
+
+		// The creation Navigation Menu will be a draft
+		// so we need to check for both publish and draft.
+		expect(
+			await requestUtils.getNavigationMenus( {
+				status: [ 'publish', 'draft' ],
+			} )
+		).toHaveLength( 1 );
+	} );
+} );
+
+class Navigation {
+	constructor( { page, pageUtils, editor } ) {
+		this.page = page;
+		this.pageUtils = pageUtils;
+		this.editor = editor;
+	}
+
+	getLinkControlLink( linkName ) {
+		return this.page.getByRole( 'link', {
+			name: `${ linkName } (opens in a new tab)`,
+			exact: true,
+		} );
+	}
+
+	getNavBlock() {
+		return this.editor.canvas.getByRole( 'document', {
+			name: 'Block: Navigation',
+		} );
+	}
+
+	getNavBlockInserter() {
+		return this.getNavBlock().getByLabel( 'Add block' );
+	}
+
+	getLinkControlSearch() {
+		return this.page.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+	}
+
+	getToolbarLinkButton() {
+		return this.page.getByRole( 'button', {
+			name: 'Link',
+			exact: true,
+		} );
+	}
+
+	async useBlockInserter() {
+		const navBlockInserter = this.getNavBlockInserter();
+
+		// Wait until the nav block inserter is visible before we move on to using it
+		await expect( navBlockInserter ).toBeVisible();
+
+		await expect( navBlockInserter ).toBeFocused();
+
+		await this.page.keyboard.press( 'Enter' );
+	}
+
+	async useLinkShortcut() {
+		await this.pageUtils.pressKeys( 'primary+k' );
+	}
+
+	/**
+	 * Moves focus to the toolbar and arrows to the button and activates it.
+	 *
+	 * @param {string} name the name of the toolbar button
+	 */
+	async useToolbarButton( name ) {
+		await this.pageUtils.pressKeys( 'alt+F10' );
+		await this.arrowToLabel( name );
+		await expect(
+			this.page.getByRole( 'button', {
+				name,
+				exact: true,
+			} )
+		).toBeFocused();
+
+		await this.page.keyboard.press( 'Enter' );
+	}
+
+	/**
+	 * Adds a page via the link control and closes it.
+	 * Usage:
+	 * - Open the new link control however you'd like (block appender, command+k on Add link label...)
+	 *
+	 * @param {string} label Text of page you want added. Must be a part of the pages added in the beforeAll in this test suite.
+	 */
+	async addPage( label ) {
+		const linkControlSearch = this.page.getByRole( 'combobox', {
+			name: 'Search or type URL',
+		} );
+
+		await expect( linkControlSearch ).toBeFocused();
+
+		await this.page.keyboard.type( label, { delay: 50 } );
+
+		await this.pageUtils.pressKeys( 'ArrowDown' );
+
+		await this.page.keyboard.press( 'Enter' );
+
+		const linkControlLink = await this.getLinkControlLink( label );
+		await expect( linkControlLink ).toBeFocused();
+
+		await this.page.keyboard.press( 'Escape' );
+
+		await expect( linkControlSearch ).toBeHidden();
+
+		await this.checkLabelFocus( label );
+	}
+
+	/**
+	 * Adds a custom url via the link control.
+	 * Usage:
+	 * - Open the new link control however you'd like (block appender, command+k on Add link label...)
+	 * - Expect focus to return to the canvas with the url label highlighted
+	 *
+	 * @param {string} url URL you want added to the navigation
+	 */
+	async addCustomURL( url ) {
+		await expect( this.getLinkControlSearch() ).toBeFocused();
+
+		await this.page.keyboard.type( url, { delay: 50 } );
+		await this.page.keyboard.press( 'Enter' );
+	}
+
+	/**
+	 * Checks if the passed string matches the current editor selection
+	 *
+	 * @param {string} text Text you want to see if it's selected
+	 */
+	async expectToHaveTextSelected( text ) {
+		expect(
+			await this.editor.canvas
+				.locator( ':root' )
+				.evaluate( () => window.getSelection().toString() )
+		).toBe( text );
+	}
+
+	/**
+	 * Closes the new link popover when used from the block appender
+	 */
+	async addLinkClose() {
+		const linkControlSearch = this.getLinkControlSearch();
+
+		await expect( linkControlSearch ).toBeFocused();
+
+		await this.page.keyboard.press( 'Escape' );
+
+		await expect( linkControlSearch ).toBeHidden();
+	}
+
+	/**
+	 * Checks that we are focused on a specific navigation item.
+	 * It will return the caret to the beginning of the item.
+	 *
+	 * @param {string} label Nav label text
+	 */
+	async checkLabelFocus( label ) {
+		await this.page.keyboard.press( 'Home' );
+		// Select all the text
+		await this.pageUtils.pressKeys( 'Shift+End' );
+		await this.expectToHaveTextSelected( label );
+		// Move caret back to starting position
+		await this.pageUtils.pressKeys( 'ArrowLeft' );
+	}
+
+	/**
+	 * Checks:
+	 * - the preview is open
+	 * - has focus within it
+	 * - closes with Escape
+	 * - The popover is now hidden
+	 */
+	async previewIsOpenAndCloses() {
+		const linkPopover = this.getLinkPopover();
+		await expect( linkPopover ).toBeVisible();
+		// Expect focus to be within the link control. We could be more exact here, but it would be more brittle that way. We really care if focus is within it or not.
+		expect(
+			await this.page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return !! activeElement.closest(
+					'.components-popover__content .block-editor-link-control'
+				);
+			} )
+		).toBe( true );
+
+		await this.page.keyboard.press( 'Escape' );
+
+		await expect( linkPopover ).toBeHidden();
+	}
+
+	/**
+	 * When focus is within a navigation link item, we should be able to:
+	 * - use the toolbar link button to open the popover
+	 * - have focus within the popover
+	 * - close it usingn escape to return focus to the toolbar button
+	 */
+	async canUseToolbarLink() {
+		await this.useToolbarButton( 'Link' );
+		await this.previewIsOpenAndCloses();
+		await expect( this.getToolbarLinkButton() ).toBeFocused();
+	}
+
+	async arrowToLabel( label, times = 15 ) {
+		for ( let i = 0; i < times; i++ ) {
+			await this.pageUtils.pressKeys( 'ArrowRight' );
+			const activeLabel = await this.page.evaluate( () => {
+				return (
+					document.activeElement.getAttribute( 'aria-label' ) ||
+					document.activeElement.textContent
+				);
+			} );
+			if ( activeLabel === label ) {
+				return;
+			}
+		}
+	}
+
+	/**
+	 * This method is used as a temporary workaround for retriveing the
+	 * LinkControl component. This is because it currently does not expose
+	 * any accessible attributes. In general we should avoid using this method
+	 * and instead rely on locating the sub elements of the component directly.
+	 * Remove / update method once the following PR has landed:
+	 * https://github.com/WordPress/gutenberg/pull/54063.
+	 */
+	getLinkPopover() {
+		return this.page.locator(
+			'.components-popover__content .block-editor-link-control'
+		);
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js
index 1285955b667343..4918ac3d619b5a 100644
--- a/test/e2e/specs/editor/blocks/paragraph.spec.js
+++ b/test/e2e/specs/editor/blocks/paragraph.spec.js
@@ -28,11 +28,11 @@ test.describe( 'Paragraph', () => {
 		} );
 		await page.keyboard.type( '1' );
 
-		const firstBlockTagName = await page.evaluate( () => {
-			return document.querySelector(
-				'.block-editor-block-list__layout .wp-block'
-			).tagName;
-		} );
+		const firstBlockTagName = await editor.canvas
+			.locator( ':root' )
+			.evaluate( () => {
+				return document.querySelector( '[data-block]' ).tagName;
+			} );
 
 		// The outer element should be a paragraph. Blocks should never have any
 		// additional div wrappers so the markup remains simple and easy to
@@ -61,7 +61,6 @@ test.describe( 'Paragraph', () => {
 
 		test( 'should allow dropping an image on an empty paragraph block', async ( {
 			editor,
-			page,
 			pageUtils,
 			draggingUtils,
 		} ) => {
@@ -74,18 +73,19 @@ test.describe( 'Paragraph', () => {
 				testImageName
 			);
 
-			const { dragOver, drop } = await pageUtils.dragFiles(
-				testImagePath
-			);
+			const { dragOver, drop } =
+				await pageUtils.dragFiles( testImagePath );
 
-			await dragOver( '[data-type="core/paragraph"]' );
+			await dragOver(
+				editor.canvas.locator( '[data-type="core/paragraph"]' )
+			);
 
 			await expect( draggingUtils.dropZone ).toBeVisible();
-			await expect( draggingUtils.insertionIndicator ).not.toBeVisible();
+			await expect( draggingUtils.insertionIndicator ).toBeHidden();
 
 			await drop();
 
-			const imageBlock = page.locator(
+			const imageBlock = editor.canvas.locator(
 				'role=document[name="Block: Image"i]'
 			);
 			await expect( imageBlock ).toBeVisible();
@@ -105,7 +105,7 @@ test.describe( 'Paragraph', () => {
 				attributes: { content: 'My Heading' },
 			} );
 			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.focus( 'text=My Heading' );
+			await editor.canvas.locator( 'text=My Heading' ).focus();
 			await editor.showBlockToolbar();
 
 			const dragHandle = page.locator(
@@ -114,20 +114,20 @@ test.describe( 'Paragraph', () => {
 			await dragHandle.hover();
 			await page.mouse.down();
 
-			const emptyParagraph = page.locator(
+			const emptyParagraph = editor.canvas.locator(
 				'[data-type="core/paragraph"][data-empty="true"]'
 			);
 			const boundingBox = await emptyParagraph.boundingBox();
 			await draggingUtils.dragOver( boundingBox.x, boundingBox.y );
 
 			await expect( draggingUtils.dropZone ).toBeVisible();
-			await expect( draggingUtils.insertionIndicator ).not.toBeVisible();
+			await expect( draggingUtils.insertionIndicator ).toBeHidden();
 
 			await page.mouse.up();
 
 			await expect.poll( editor.getEditedPostContent )
 				.toBe( `<!-- wp:heading -->
-<h2>My Heading</h2>
+<h2 class="wp-block-heading">My Heading</h2>
 <!-- /wp:heading -->` );
 		} );
 
@@ -138,29 +138,30 @@ test.describe( 'Paragraph', () => {
 		} ) => {
 			await editor.insertBlock( { name: 'core/paragraph' } );
 
-			await draggingUtils.simulateDraggingHTML( '<h2>My Heading</h2>' );
+			await draggingUtils.simulateDraggingHTML(
+				'<h2 class="wp-block-heading">My Heading</h2>'
+			);
 
-			const emptyParagraph = page.locator(
+			const emptyParagraph = editor.canvas.locator(
 				'[data-type="core/paragraph"][data-empty="true"]'
 			);
 			const boundingBox = await emptyParagraph.boundingBox();
 			await draggingUtils.dragOver( boundingBox.x, boundingBox.y );
 
 			await expect( draggingUtils.dropZone ).toBeVisible();
-			await expect( draggingUtils.insertionIndicator ).not.toBeVisible();
+			await expect( draggingUtils.insertionIndicator ).toBeHidden();
 
 			await page.mouse.up();
 
 			await expect.poll( editor.getEditedPostContent )
 				.toBe( `<!-- wp:heading -->
-<h2>My Heading</h2>
+<h2 class="wp-block-heading">My Heading</h2>
 <!-- /wp:heading -->` );
 		} );
 
 		test.describe( 'Dragging positions', () => {
 			test( 'Only the first block is an empty paragraph block', async ( {
 				editor,
-				page,
 				draggingUtils,
 			} ) => {
 				await editor.setContent( `
@@ -173,10 +174,10 @@ test.describe( 'Paragraph', () => {
 					<!-- /wp:heading -->
 				` );
 
-				const emptyParagraph = page.locator(
+				const emptyParagraph = editor.canvas.locator(
 					'[data-type="core/paragraph"]'
 				);
-				const heading = page.locator( 'text=Heading' );
+				const heading = editor.canvas.locator( 'text=Heading' );
 
 				await draggingUtils.simulateDraggingHTML(
 					'<h2>Draggable</h2>'
@@ -193,8 +194,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -205,8 +210,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -217,29 +226,39 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
 					// Dragging on the top half of the heading block.
+					// Make sure to target the top dropzone by dragging > 30px inside the block.
 					await draggingUtils.dragOver(
-						headingBox.x,
+						headingBox.x + 32,
 						headingBox.y + 1
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
 					// Dragging on the bottom half of the heading block.
+					// Make sure to target the bottom dropzone by dragging > 30px inside the block.
 					await draggingUtils.dragOver(
-						headingBox.x,
+						headingBox.x + 32,
 						headingBox.y + headingBox.height - 1
 					);
-					await expect( draggingUtils.dropZone ).not.toBeVisible();
+					await expect( draggingUtils.dropZone ).toBeHidden();
 					await expect(
 						draggingUtils.insertionIndicator
 					).toBeVisible();
@@ -251,11 +270,30 @@ test.describe( 'Paragraph', () => {
 						)
 						.toBeGreaterThan( headingBox.y + headingBox.height );
 				}
+
+				{
+					// Dragging on the right edge of the heading block.
+					// Targets the right hand dropzone.
+					await draggingUtils.dragOver(
+						headingBox.x + headingBox.width - 1,
+						headingBox.y + headingBox.height - 1
+					);
+					await expect( draggingUtils.dropZone ).toBeHidden();
+					await expect(
+						draggingUtils.insertionIndicator
+					).toBeVisible();
+					await expect
+						.poll( () =>
+							draggingUtils.insertionIndicator
+								.boundingBox()
+								.then( ( { x, width } ) => x + width )
+						)
+						.toBe( headingBox.x + headingBox.width );
+				}
 			} );
 
 			test( 'Only the second block is an empty paragraph block', async ( {
 				editor,
-				page,
 				draggingUtils,
 			} ) => {
 				await editor.setContent( `
@@ -268,10 +306,10 @@ test.describe( 'Paragraph', () => {
 					<!-- /wp:paragraph -->
 				` );
 
-				const emptyParagraph = page.locator(
+				const emptyParagraph = editor.canvas.locator(
 					'[data-type="core/paragraph"]'
 				);
-				const heading = page.locator( 'text=Heading' );
+				const heading = editor.canvas.locator( 'text=Heading' );
 
 				await draggingUtils.simulateDraggingHTML(
 					'<h2>Draggable</h2>'
@@ -283,10 +321,10 @@ test.describe( 'Paragraph', () => {
 				{
 					// Dragging on the top half of the heading block.
 					await draggingUtils.dragOver(
-						headingBox.x,
+						headingBox.x + 32,
 						headingBox.y + 1
 					);
-					await expect( draggingUtils.dropZone ).not.toBeVisible();
+					await expect( draggingUtils.dropZone ).toBeHidden();
 					await expect(
 						draggingUtils.insertionIndicator
 					).toBeVisible();
@@ -302,13 +340,17 @@ test.describe( 'Paragraph', () => {
 				{
 					// Dragging on the bottom half of the heading block.
 					await draggingUtils.dragOver(
-						headingBox.x,
+						headingBox.x + 32,
 						headingBox.y + headingBox.height - 1
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -319,8 +361,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -331,8 +377,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -343,14 +393,17 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 			} );
 
 			test( 'Both blocks are empty paragraph blocks', async ( {
 				editor,
-				page,
 				draggingUtils,
 			} ) => {
 				await editor.setContent( `
@@ -363,10 +416,10 @@ test.describe( 'Paragraph', () => {
 					<!-- /wp:paragraph -->
 				` );
 
-				const firstEmptyParagraph = page
+				const firstEmptyParagraph = editor.canvas
 					.locator( '[data-type="core/paragraph"]' )
 					.first();
-				const secondEmptyParagraph = page
+				const secondEmptyParagraph = editor.canvas
 					.locator( '[data-type="core/paragraph"]' )
 					.nth( 1 );
 
@@ -385,8 +438,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -397,8 +454,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -409,8 +470,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( firstBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								firstBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -421,8 +486,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -433,8 +502,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 
 				{
@@ -445,8 +518,12 @@ test.describe( 'Paragraph', () => {
 					);
 					await expect( draggingUtils.dropZone ).toBeVisible();
 					await expect
-						.poll( () => draggingUtils.dropZone.boundingBox() )
-						.toEqual( secondBlockBox );
+						.poll( () =>
+							draggingUtils.confirmValidDropZonePosition(
+								secondBlockBox
+							)
+						)
+						.toBeTruthy();
 				}
 			} );
 		} );
@@ -506,4 +583,18 @@ 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();
+		if ( ! box ) {
+			return false;
+		}
+
+		return (
+			Math.abs( element.x - box.x ) < 1 &&
+			Math.abs( element.y - box.y ) < 1
+		);
+	}
 }
diff --git a/test/e2e/specs/editor/blocks/post-comments-form.spec.js b/test/e2e/specs/editor/blocks/post-comments-form.spec.js
new file mode 100644
index 00000000000000..db75771dc09154
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/post-comments-form.spec.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Comments Form', () => {
+	let originalCommentStatus;
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+	} );
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		const siteSettings = await requestUtils.getSiteSettings();
+		originalCommentStatus = siteSettings.default_comment_status;
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.updateSiteSettings( {
+			default_comment_status: originalCommentStatus,
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'placeholder displays in the site editor even when comments are closed by default', async ( {
+		admin,
+		editor,
+	} ) => {
+		// Navigate to "Singular" post template
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//singular',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+
+		// Insert post comments form
+		await editor.insertBlock( { name: 'core/post-comments-form' } );
+
+		// Ensure the placeholder is there
+		const postCommentsFormBlock = editor.canvas.locator(
+			'role=document[name="Block: Comments Form"i]'
+		);
+		await expect( postCommentsFormBlock.locator( 'form' ) ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/post-title.spec.js b/test/e2e/specs/editor/blocks/post-title.spec.js
new file mode 100644
index 00000000000000..b5c536c0ff2460
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/post-title.spec.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post Title block', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'Can edit the post title', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/post-title' } );
+
+		// Add the post title
+		await editor.canvas
+			.getByRole( 'textbox', {
+				name: 'Add title',
+			} )
+			.fill( 'Just tweaking the post title' );
+
+		// Save the post draft and reload.
+		await editor.saveDraft();
+		await page.reload();
+
+		const titleBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Title',
+		} );
+		await expect( titleBlock ).toBeVisible();
+		await expect( titleBlock ).toHaveText( 'Just tweaking the post title' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/preformatted.spec.js b/test/e2e/specs/editor/blocks/preformatted.spec.js
index d359ec9def85cc..5cd20a051c4fb8 100644
--- a/test/e2e/specs/editor/blocks/preformatted.spec.js
+++ b/test/e2e/specs/editor/blocks/preformatted.spec.js
@@ -33,7 +33,6 @@ test.describe( 'Preformatted', () => {
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'Enter' );
 		await editor.insertBlock( { name: 'core/paragraph' } );
 		await page.keyboard.type( '3' );
 		await page.keyboard.press( 'ArrowLeft' );
diff --git a/test/e2e/specs/editor/blocks/pullquote.spec.js b/test/e2e/specs/editor/blocks/pullquote.spec.js
new file mode 100644
index 00000000000000..33f833ca536788
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/pullquote.spec.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Quote', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created by converting a quote and converted back to quote', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		await page.keyboard.type( 'test' );
+		await editor.transformBlockTo( 'core/quote' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/quote',
+				attributes: { value: '' },
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'test' },
+					},
+				],
+			},
+		] );
+
+		await editor.transformBlockTo( 'core/pullquote' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/pullquote',
+				attributes: { value: 'test' },
+				innerBlocks: [],
+			},
+		] );
+		await editor.transformBlockTo( 'core/quote' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/quote',
+				attributes: { value: '' },
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'test' },
+					},
+				],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/query.spec.js b/test/e2e/specs/editor/blocks/query.spec.js
new file mode 100644
index 00000000000000..dbefb66e353bc7
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/query.spec.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Query block', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activatePlugin( 'gutenberg-test-query-block' ),
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllPages(),
+		] );
+		await requestUtils.createPost( { title: 'Post 1', status: 'publish' } );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deactivatePlugin( 'gutenberg-test-query-block' ),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( {
+			postType: 'page',
+			title: 'Query Page',
+		} );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPages();
+	} );
+
+	test.describe( 'Query block insertion', () => {
+		test( 'List', async ( { page, editor } ) => {
+			await editor.insertBlock( { name: 'core/query' } );
+
+			await editor.canvas
+				.getByRole( 'document', { name: 'Block: Query Loop' } )
+				.getByRole( 'button', { name: 'Choose' } )
+				.click();
+
+			await page
+				.getByRole( 'dialog', { name: 'Choose a pattern' } )
+				.getByRole( 'option', { name: 'Standard' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/query',
+					innerBlocks: [
+						{
+							name: 'core/post-template',
+							innerBlocks: [
+								{ name: 'core/post-title' },
+								{ name: 'core/post-featured-image' },
+								{ name: 'core/post-excerpt' },
+								{ name: 'core/separator' },
+								{ name: 'core/post-date' },
+							],
+						},
+					],
+				},
+			] );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/quote.spec.js b/test/e2e/specs/editor/blocks/quote.spec.js
index 69d69f0003489f..d5457ad10bbd08 100644
--- a/test/e2e/specs/editor/blocks/quote.spec.js
+++ b/test/e2e/specs/editor/blocks/quote.spec.js
@@ -3,30 +3,352 @@
  */
 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 editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		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 editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'test' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: '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 editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		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 editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		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 -->`
+		);
+	} );
 
-		// Inserting a quote block
-		await editor.insertBlock( {
-			name: 'core/quote',
+	test( 'can be created by converting multiple paragraphs', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'one' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'two' );
+		await page.keyboard.down( 'Shift' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i] >> text=one' )
+			.click();
+		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 -->`
+		);
+	} );
+
+	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' );
+			await editor.clickBlockToolbarButton(
+				'Select parent block: Quote'
+			);
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			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 editor.clickBlockToolbarButton(
+				'Select parent block: Quote'
+			);
+			await editor.clickBlockToolbarButton( 'Add citation' );
+			await page.keyboard.type( 'cite' );
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			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( 'ArrowUp' );
+			await editor.clickBlockToolbarButton( 'Add citation' );
+			await page.keyboard.type( 'cite' );
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			expect( await editor.getEditedPostContent() ).toBe(
+				`<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- 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( 'ArrowUp' );
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			expect( await editor.getEditedPostContent() ).toBe( '' );
+		} );
+	} );
 
-		// Check the content
-		const content = await editor.getEditedPostContent();
-		expect( content ).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 editor.clickBlockToolbarButton( 'Select parent block: Quote' );
+		await editor.clickBlockToolbarButton( 'Add citation' );
+		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( 'ArrowUp' );
+		await editor.clickBlockToolbarButton( 'Add citation' );
+		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.pressKeys( 'ArrowLeft', { times: 3 } );
+		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 -->`
+		);
+	} );
+
+	test( `shouldn't crash selecting content + cite and pressing backspace.`, async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'ArrowUp' );
+		await editor.clickBlockToolbarButton( 'Add citation' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'Shift+ArrowUp' );
+		let error;
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'error' ) {
+				error = msg.text();
+			}
+		} );
+		await page.keyboard.press( 'Backspace' );
+		expect( error ).toBeUndefined();
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/rss.spec.js b/test/e2e/specs/editor/blocks/rss.spec.js
new file mode 100644
index 00000000000000..1f6b640926b7c0
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/rss.spec.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RSS', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	// See: https://github.com/WordPress/gutenberg/pull/61389.
+	test( 'should retain native copy/paste behavior for input fields', async ( {
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/rss' } );
+		pageUtils.setClipboardData( {
+			plainText: 'https://developer.wordpress.org/news/feed/',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/rss',
+				attributes: {
+					feedURL: 'https://developer.wordpress.org/news/feed/',
+				},
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/search.spec.js b/test/e2e/specs/editor/blocks/search.spec.js
new file mode 100644
index 00000000000000..3a72f99b7cf0b3
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/search.spec.js
@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Search', () => {
+	test.beforeEach( async ( { admin, requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllMenus(),
+		] );
+	} );
+
+	test( 'should auto-configure itself to sensible defaults when inserted into a Navigation block', async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		const createdMenu = await requestUtils.createNavigationMenu( {
+			title: 'Test Menu',
+			content: `<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->`,
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/navigation',
+			attributes: {
+				ref: createdMenu?.id,
+			},
+		} );
+
+		const navBlockInserter = editor.canvas.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await navBlockInserter.click();
+
+		await page.getByRole( 'button', { name: 'Add block' } ).click();
+
+		// Click on the Search block option.
+		await page.getByRole( 'option', { name: 'Search' } ).click();
+
+		// Expect to see the Search block.
+		const searchBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Search',
+		} );
+
+		await expect( searchBlock ).toBeVisible();
+
+		// The only way to access the inner controlled blocks of the Navigation block
+		// is to access the edited entity record for the associated Navigation Menu record.
+		const editedMenuRecord = await page.evaluate( ( menuId ) => {
+			return window.wp.data
+				.select( 'core' )
+				.getEditedEntityRecord( 'postType', 'wp_navigation', menuId );
+		}, createdMenu?.id );
+
+		// The 2nd block in the Navigation block is the Search block.
+		const searchBlockAttributes = editedMenuRecord.blocks[ 1 ].attributes;
+
+		expect( searchBlockAttributes ).toMatchObject( {
+			showLabel: false,
+			buttonUseIcon: true,
+			buttonPosition: 'button-inside',
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/separator.spec.js b/test/e2e/specs/editor/blocks/separator.spec.js
index 8f195392641c87..70c61535e71bf7 100644
--- a/test/e2e/specs/editor/blocks/separator.spec.js
+++ b/test/e2e/specs/editor/blocks/separator.spec.js
@@ -12,7 +12,9 @@ test.describe( 'Separator', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '---' );
 		await page.keyboard.press( 'Enter' );
 
diff --git a/test/e2e/specs/editor/blocks/site-title.spec.js b/test/e2e/specs/editor/blocks/site-title.spec.js
new file mode 100644
index 00000000000000..acc3ada55ce8cb
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/site-title.spec.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site Title block', () => {
+	let originalSiteTitle;
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		originalSiteTitle = ( await requestUtils.getSiteSettings() ).title;
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.updateSiteSettings( { title: originalSiteTitle } );
+	} );
+
+	test( 'Can edit the site title as admin', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/site-title' } );
+
+		const siteTitleBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Site Title',
+		} );
+
+		// Update the site title
+		await siteTitleBlock
+			.getByRole( 'textbox', {
+				name: 'Site title text',
+			} )
+			.fill( 'New Site Title' );
+
+		await editor.publishPost();
+		await page.reload();
+
+		await expect( siteTitleBlock ).toBeVisible();
+		await expect( siteTitleBlock ).toHaveText( 'New Site Title' );
+	} );
+
+	// Reason: The current e2e test setup doesn't provide an easy way to switch between user roles.
+	// eslint-disable-next-line playwright/expect-expect
+	test.fixme( 'Cannot edit the site title as editor', async () => {} );
+} );
diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js
index 41e63c2e4e9dec..da262c9b4e26d9 100644
--- a/test/e2e/specs/editor/blocks/spacer.spec.js
+++ b/test/e2e/specs/editor/blocks/spacer.spec.js
@@ -10,7 +10,9 @@ test.describe( 'Spacer', () => {
 
 	test( 'can be created by typing "/spacer"', async ( { editor, page } ) => {
 		// Create a spacer with the slash block shortcut.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/spacer' );
 		await page.keyboard.press( 'Enter' );
 
@@ -22,11 +24,13 @@ test.describe( 'Spacer', () => {
 		editor,
 	} ) => {
 		// Create a spacer with the slash block shortcut.
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/spacer' );
 		await page.keyboard.press( 'Enter' );
 
-		const resizableHandle = page.locator(
+		const resizableHandle = editor.canvas.locator(
 			// Use class name selector until we have `data-testid` for the resize handles.
 			'role=document[name="Block: Spacer"i] >> css=.components-resizable-box__handle'
 		);
@@ -39,7 +43,9 @@ test.describe( 'Spacer', () => {
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
 		await expect(
-			page.locator( 'role=document[name="Block: Spacer"i]' )
+			editor.canvas.locator(
+				'role=document[name="Block: Spacer"i] >> css=.components-resizable-box__handle >> [tabindex]'
+			)
 		).toBeFocused();
 	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/table.spec.js b/test/e2e/specs/editor/blocks/table.spec.js
index 689682e77b92d0..92e209e88aeb17 100644
--- a/test/e2e/specs/editor/blocks/table.spec.js
+++ b/test/e2e/specs/editor/blocks/table.spec.js
@@ -15,7 +15,7 @@ test.describe( 'Table', () => {
 		await editor.insertBlock( { name: 'core/table' } );
 
 		// Check for existence of the column count field.
-		const columnCountInput = page.locator(
+		const columnCountInput = editor.canvas.locator(
 			'role=spinbutton[name="Column count"i]'
 		);
 		await expect( columnCountInput ).toBeVisible();
@@ -27,7 +27,7 @@ test.describe( 'Table', () => {
 		await page.keyboard.type( '5' );
 
 		// Check for existence of the row count field.
-		const rowCountInput = page.locator(
+		const rowCountInput = editor.canvas.locator(
 			'role=spinbutton[name="Row count"i]'
 		);
 		await expect( rowCountInput ).toBeVisible();
@@ -39,7 +39,9 @@ test.describe( 'Table', () => {
 		await page.keyboard.type( '10' );
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Expect the post content to have a correctly sized table.
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -49,10 +51,14 @@ test.describe( 'Table', () => {
 		await editor.insertBlock( { name: 'core/table' } );
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Click the first cell and add some text.
-		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
 		await page.keyboard.type( 'This' );
 
 		// Navigate to the next cell and add some text.
@@ -90,9 +96,14 @@ test.describe( 'Table', () => {
 		await expect( footerSwitch ).toBeHidden();
 
 		// // Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Expect the header and footer switches to be present now that the table has been created.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 		await expect( headerSwitch ).toBeVisible();
 		await expect( footerSwitch ).toBeVisible();
 
@@ -100,19 +111,25 @@ test.describe( 'Table', () => {
 		await headerSwitch.check();
 		await footerSwitch.check();
 
-		await page.click(
-			'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0'
-		);
+		await editor.canvas
+			.locator(
+				'role=rowgroup >> nth=0 >> role=textbox[name="Header cell text"i] >> nth=0'
+			)
+			.click();
 		await page.keyboard.type( 'header' );
 
-		await page.click(
-			'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0'
-		);
+		await editor.canvas
+			.locator(
+				'role=rowgroup >> nth=1 >> role=textbox[name="Body cell text"i] >> nth=0'
+			)
+			.click();
 		await page.keyboard.type( 'body' );
 
-		await page.click(
-			'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0'
-		);
+		await editor.canvas
+			.locator(
+				'role=rowgroup >> nth=2 >> role=textbox[name="Footer cell text"i] >> nth=0'
+			)
+			.click();
 		await page.keyboard.type( 'footer' );
 
 		// Expect the table to have a header, body and footer with written content.
@@ -134,12 +151,19 @@ test.describe( 'Table', () => {
 		await editor.openDocumentSettingsSidebar();
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Toggle on the switches and add some content.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 		await page.locator( 'role=checkbox[name="Header section"i]' ).check();
 		await page.locator( 'role=checkbox[name="Footer section"i]' ).check();
-		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
 
 		// Add a column.
 		await editor.clickBlockToolbarButton( 'Edit table' );
@@ -148,7 +172,9 @@ test.describe( 'Table', () => {
 		// Expect the table to have 3 columns across the header, body and footer.
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
-		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
 
 		// Delete a column.
 		await editor.clickBlockToolbarButton( 'Edit table' );
@@ -161,15 +187,21 @@ test.describe( 'Table', () => {
 	test( 'allows columns to be aligned', async ( { editor, page } ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 
-		await page.click( 'role=spinbutton[name="Column count"i]' );
+		await editor.canvas
+			.locator( 'role=spinbutton[name="Column count"i]' )
+			.click();
 		await page.keyboard.press( 'Backspace' );
 		await page.keyboard.type( '4' );
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Click the first cell and add some text. Don't align.
-		const cells = page.locator( 'role=textbox[name="Body cell text"i]' );
+		const cells = editor.canvas.locator(
+			'role=textbox[name="Body cell text"i]'
+		);
 		await cells.nth( 0 ).click();
 		await page.keyboard.type( 'None' );
 
@@ -204,19 +236,26 @@ test.describe( 'Table', () => {
 		await editor.openDocumentSettingsSidebar();
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
-		// Enable fixed width as it exascerbates the amount of empty space around the RichText.
+		// Enable fixed width as it exacerbates the amount of empty space around the RichText.
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 		await page
 			.locator( 'role=checkbox[name="Fixed width table cells"i]' )
 			.check();
 
 		// Add multiple new lines to the first cell to make it taller.
-		await page.click( 'role=textbox[name="Body cell text"i] >> nth=0' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
 		await page.keyboard.type( '\n\n\n\n' );
 
 		// Get the bounding client rect for the second cell.
-		const { x: secondCellX, y: secondCellY } = await page
+		const { x: secondCellX, y: secondCellY } = await editor.canvas
 			.locator( 'role=textbox[name="Body cell text"] >> nth=1' )
 			.boundingBox();
 
@@ -232,10 +271,15 @@ test.describe( 'Table', () => {
 		await editor.insertBlock( { name: 'core/table' } );
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
-		// Click the first cell and add some text.
-		await page.click( 'role=document[name="Block: Table"i] >> figcaption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
+		const caption = editor.canvas.locator(
+			'role=textbox[name="Table caption text"i]'
+		);
+		await expect( caption ).toBeFocused();
 		await page.keyboard.type( 'Caption!' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -243,7 +287,9 @@ test.describe( 'Table', () => {
 	test( 'up and down arrow navigation', async ( { editor, page } ) => {
 		await editor.insertBlock( { name: 'core/table' } );
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'ArrowDown' );
 		await page.keyboard.type( '2' );
@@ -254,19 +300,20 @@ test.describe( 'Table', () => {
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	test( 'should not have focus loss after creation', async ( {
-		editor,
-		page,
-	} ) => {
+	test( 'should not have focus loss after creation', async ( { editor } ) => {
 		// Insert table block.
 		await editor.insertBlock( { name: 'core/table' } );
 
 		// Create the table.
-		await page.click( 'role=button[name="Create Table"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
 
 		// Focus should be in first td.
 		await expect(
-			page.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			editor.canvas.locator(
+				'role=textbox[name="Body cell text"i] >> nth=0'
+			)
 		).toBeFocused();
 	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js b/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js
new file mode 100644
index 00000000000000..fdb76a8277a462
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/verse-code-preformatted.spec.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+// This spec tests common behavior of Verse, Code, and Preformatted blocks.
+[ 'core/verse', 'core/code', 'core/preformatted' ].forEach( ( blockName ) => {
+	test.describe( blockName, () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost();
+		} );
+
+		test( 'should exit on triple Enter and merge back', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: blockName } );
+			await page.keyboard.type( 'a' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'b' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [
+				{
+					name: blockName,
+					attributes: {
+						content: 'a',
+					},
+				},
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'b',
+					},
+				},
+			] );
+
+			await page.keyboard.press( 'ArrowLeft' );
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( [
+				{
+					name: blockName,
+					attributes: {
+						content: 'a<br><br>b',
+					},
+				},
+			] );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/local/demo.spec.js b/test/e2e/specs/editor/local/demo.spec.js
new file mode 100644
index 00000000000000..2782461812ea84
--- /dev/null
+++ b/test/e2e/specs/editor/local/demo.spec.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'New editor state', () => {
+	test( 'content should load, making the post dirty', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		await admin.visitAdminPage( 'post-new.php', 'gutenberg-demo' );
+		await editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+			fullscreenMode: false,
+		} );
+
+		const isDirty = await page.evaluate( () => {
+			return window.wp.data.select( 'core/editor' ).isEditedPostDirty();
+		} );
+		expect( isDirty ).toBe( true );
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save draft' } )
+		).toBeEnabled();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/__snapshots__/Iframed-block-Should-save-the-changes-1-chromium.txt b/test/e2e/specs/editor/plugins/__snapshots__/Iframed-block-should-load-script-and-dependencies-in-iframe-1-chromium.txt
similarity index 100%
rename from test/e2e/specs/editor/plugins/__snapshots__/Iframed-block-Should-save-the-changes-1-chromium.txt
rename to test/e2e/specs/editor/plugins/__snapshots__/Iframed-block-should-load-script-and-dependencies-in-iframe-1-chromium.txt
diff --git a/test/e2e/specs/editor/plugins/__snapshots__/templates-Using-a-CPT-with-a-predefined-templa-7538a--custom-post-types-with-a-predefined-template-1-chromium.txt b/test/e2e/specs/editor/plugins/__snapshots__/Post-type-templates-Using-a-CPT-with-a-predefi-fffe1--custom-post-types-with-a-predefined-template-1-chromium.txt
similarity index 100%
rename from test/e2e/specs/editor/plugins/__snapshots__/templates-Using-a-CPT-with-a-predefined-templa-7538a--custom-post-types-with-a-predefined-template-1-chromium.txt
rename to test/e2e/specs/editor/plugins/__snapshots__/Post-type-templates-Using-a-CPT-with-a-predefi-fffe1--custom-post-types-with-a-predefined-template-1-chromium.txt
diff --git a/test/e2e/specs/editor/plugins/align-hook.spec.js b/test/e2e/specs/editor/plugins/align-hook.spec.js
new file mode 100644
index 00000000000000..6929022a2c6f87
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/align-hook.spec.js
@@ -0,0 +1,304 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const alignLabels = {
+	none: 'None',
+	left: 'Align left',
+	center: 'Align center',
+	right: 'Align right',
+	wide: 'Wide width',
+	full: 'Full width',
+};
+
+test.describe( 'Align Hook Works as Expected', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-align-hook' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-align-hook' );
+	} );
+
+	test.describe( 'Block with no alignment set', () => {
+		test( 'shows no alignment buttons on the alignment toolbar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-no-alignment-set' } );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Align', exact: true } )
+			).toBeHidden();
+		} );
+
+		test( 'does not save any alignment related attribute or class', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-no-alignment-set' } );
+
+			await expect
+				.poll( editor.getEditedPostContent )
+				.not.toContain( '"align":' );
+		} );
+	} );
+
+	test.describe( 'Block with align true', () => {
+		test( 'shows the expected buttons on the alignment toolbar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-true' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio' )
+			).toHaveText( Object.values( alignLabels ) );
+		} );
+
+		test( 'applies none alignment by default', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-true' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio', { name: 'None' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+		} );
+
+		test( 'correctly applies the selected alignment and correctly removes the alignment', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-true' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			const dropdown = page.getByRole( 'menu', {
+				name: 'Align',
+			} );
+
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Align right' } )
+				.click();
+
+			// Verify the button of the specified alignment is pressed.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'Align right' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify the markup of the selected alignment was generated.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.toContain( 'alignright' );
+
+			// Remove the alignment. Dropdown should be open.
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Align right' } )
+				.click();
+
+			// Verify 'none' alignment button is in pressed state.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify alignment markup was removed from the block.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.not.toContain( 'alignright' );
+		} );
+	} );
+
+	test.describe( 'Block with align array', () => {
+		test( 'shows the expected buttons on the alignment toolbar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-array' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio' )
+			).toHaveText( [
+				alignLabels.none,
+				alignLabels.left,
+				alignLabels.center,
+			] );
+		} );
+
+		test( 'applies none alignment by default', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-array' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio', { name: 'None' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+		} );
+
+		test( 'correctly applies the selected alignment and correctly removes the alignment', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-align-array' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			const dropdown = page.getByRole( 'menu', {
+				name: 'Align',
+			} );
+
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Center' } )
+				.click();
+
+			// Verify the button of the specified alignment is pressed.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'Center' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify the markup of the selected alignment was generated.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.toContain( 'aligncenter' );
+
+			// Remove the alignment. Dropdown should be open.
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Center' } )
+				.click();
+
+			// Verify 'none' alignment button is in pressed state.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify alignment markup was removed from the block.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.not.toContain( 'aligncenter' );
+		} );
+	} );
+
+	test.describe( 'Block with default align', () => {
+		test( 'shows the expected buttons on the alignment toolbar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-default-align' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio' )
+			).toHaveText( Object.values( alignLabels ) );
+		} );
+
+		test( 'applies the selected alignment by default', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-default-align' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Align' } )
+					.getByRole( 'menuitemradio', { name: 'Align right' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+		} );
+
+		test( 'the default markup does not contain the alignment attribute but contains the alignment class', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-default-align' } );
+
+			const markup = await editor.getEditedPostContent();
+			expect( markup ).toContain( 'alignright' );
+			expect( markup ).not.toContain( '"align":"right"' );
+		} );
+
+		test( 'can remove the default alignment and the align attribute equals none but alignnone class is not applied', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-default-align' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			// Remove the alignment.
+			await page
+				.getByRole( 'menu', { name: 'Align' } )
+				.getByRole( 'menuitemradio', { name: 'Align right' } )
+				.click();
+
+			const markup = await editor.getEditedPostContent();
+			expect( markup ).not.toContain( 'alignnone' );
+			expect( markup ).toContain( '"align":""' );
+		} );
+
+		test( 'correctly applies the selected alignment and correctly removes the alignment', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'test/test-default-align' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+
+			const dropdown = page.getByRole( 'menu', {
+				name: 'Align',
+			} );
+
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Align center' } )
+				.click();
+
+			// Verify the button of the specified alignment is pressed.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'Align center' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify the markup of the selected alignment was generated.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.toContain( 'aligncenter' );
+
+			// Remove the alignment. Dropdown should be open.
+			await dropdown
+				.getByRole( 'menuitemradio', { name: 'Align center' } )
+				.click();
+
+			// Verify 'none' alignment button is in pressed state.
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				dropdown.getByRole( 'menuitemradio', { name: 'None' } )
+			).toHaveAttribute( 'aria-checked', 'true' );
+
+			// Verify alignment markup was removed from the block.
+			await expect
+				.poll( editor.getEditedPostContent )
+				.not.toContain( 'aligncenter' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/allowed-blocks.spec.js
new file mode 100644
index 00000000000000..ed7490afe84fe9
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/allowed-blocks.spec.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Allowed Blocks Filter', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-allowed-blocks' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-allowed-blocks' );
+	} );
+
+	test( 'should restrict the allowed blocks in the inserter', async ( {
+		page,
+	} ) => {
+		// The paragraph block is available.
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const searchbox = page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} );
+
+		await searchbox.fill( 'Paragraph' );
+
+		await expect(
+			page.getByRole( 'option', { name: 'Paragraph' } )
+		).toBeVisible();
+
+		// The gallery block is not available.
+		await searchbox.click( {
+			clickCount: 3,
+		} );
+		await page.keyboard.press( 'Backspace' );
+
+		await searchbox.fill( 'Gallery' );
+
+		await expect(
+			page.getByRole( 'option', { name: 'Gallery' } )
+		).toBeHidden();
+	} );
+
+	test( 'should remove not allowed blocks from the block manager', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+
+		await page.getByRole( 'menuitem', { name: 'Preferences' } ).click();
+
+		await page.getByRole( 'tab', { name: 'Blocks' } ).click();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Available block types' } )
+				.getByRole( 'listitem' )
+		).toHaveText( [ 'Paragraph', 'Image' ] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/annotations.spec.js b/test/e2e/specs/editor/plugins/annotations.spec.js
new file mode 100644
index 00000000000000..bf0ac00857260f
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/annotations.spec.js
@@ -0,0 +1,212 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+
+test.use( {
+	annotations: async ( { page, editor }, use ) => {
+		await use( new AnnotationsUtils( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Annotations', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-plugins-api'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-plugins-api'
+		);
+	} );
+
+	test( 'allows a block to be annotated', async ( {
+		editor,
+		page,
+		annotations,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Title' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Paragraph to annotate' );
+
+		await annotations.openAnnotationsSidebar();
+		await annotations.annotateFirstBlock( 9, 13 );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const blockAnnotation = block.locator( '.annotation-text-e2e-tests' );
+
+		await expect( blockAnnotation ).toBeVisible();
+		await expect( blockAnnotation ).toHaveText( ' to ' );
+
+		await editor.clickBlockOptionsMenuItem( 'Edit as HTML' );
+
+		// There should be no <mark> tags in the raw content.
+		await expect(
+			block.locator( '.block-editor-block-list__block-html-textarea' )
+		).toHaveValue( '<p>Paragraph to annotate</p>' );
+	} );
+
+	test( 'keeps the cursor in the same location when applying annotation', async ( {
+		editor,
+		page,
+		annotations,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Title' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'ABC' );
+
+		await annotations.openAnnotationsSidebar();
+		await annotations.annotateFirstBlock( 1, 2 );
+
+		// The selection should still be at the end, so test that by typing:
+		await page.keyboard.type( 'D' );
+		await annotations.removeAnnotations();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'ABCD' },
+			},
+		] );
+	} );
+
+	test( 'moves when typing before it', async ( {
+		editor,
+		page,
+		pageUtils,
+		annotations,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Title' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'ABC' );
+
+		await annotations.openAnnotationsSidebar();
+		await annotations.annotateFirstBlock( 1, 2 );
+
+		// Requires pressing `ArrowLeft` four times to exit the annotation boundary.
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 4 } );
+
+		// Put an 1 after the A, it should not be annotated.
+		await page.keyboard.type( '1' );
+
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.locator( '.annotation-text-e2e-tests' )
+		).toHaveText( 'B' );
+
+		await annotations.removeAnnotations();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'A1BC' },
+			},
+		] );
+	} );
+
+	test( 'grows when typing inside it', async ( {
+		editor,
+		page,
+		pageUtils,
+		annotations,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Title' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'ABC' );
+
+		await annotations.openAnnotationsSidebar();
+		await annotations.annotateFirstBlock( 1, 2 );
+
+		// Pressing `ArrowLeft` two times enter annotation boundary.
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } );
+
+		// Put an 2 before the B, it should be annotated.
+		await page.keyboard.type( '2' );
+
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.locator( '.annotation-text-e2e-tests' )
+		).toHaveText( 'B2' );
+
+		await annotations.removeAnnotations();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'AB2C' },
+			},
+		] );
+	} );
+} );
+
+class AnnotationsUtils {
+	constructor( { page, editor } ) {
+		/** @type {Page} */
+		this.page = page;
+		this.editor = editor;
+	}
+
+	async openAnnotationsSidebar() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Annotations' } )
+			.click();
+	}
+
+	async annotateFirstBlock( start, end ) {
+		const editorSettings = this.page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		await editorSettings
+			.locator( '#annotations-tests-range-start' )
+			.fill( `${ start }` );
+		await editorSettings
+			.locator( '#annotations-tests-range-end' )
+			.fill( `${ end }` );
+		await editorSettings
+			.getByRole( 'button', { name: 'Add annotation' } )
+			.click();
+
+		// Return focus to the first block.
+		await this.editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.focus();
+	}
+
+	async removeAnnotations() {
+		await this.page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Remove annotations' } )
+			.click();
+
+		// Return focus to the first block.
+		await this.editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.focus();
+	}
+}
diff --git a/test/e2e/specs/editor/plugins/block-api.spec.js b/test/e2e/specs/editor/plugins/block-api.spec.js
index 1d4802b2262913..dd2a89cd2beca2 100644
--- a/test/e2e/specs/editor/plugins/block-api.spec.js
+++ b/test/e2e/specs/editor/plugins/block-api.spec.js
@@ -15,13 +15,14 @@ test.describe( 'Using Block API', () => {
 	test( 'Inserts the filtered hello world block even when filter added after block registration', async ( {
 		admin,
 		editor,
-		page,
 	} ) => {
 		await admin.createNewPost();
 
 		await editor.insertBlock( { name: 'e2e-tests/hello-world' } );
 
-		const block = page.locator( '[data-type="e2e-tests/hello-world"]' );
+		const block = editor.canvas.locator(
+			'[data-type="e2e-tests/hello-world"]'
+		);
 		await expect( block ).toHaveText( 'Hello Editor!' );
 	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/block-context.spec.js b/test/e2e/specs/editor/plugins/block-context.spec.js
new file mode 100644
index 00000000000000..c819f29bc7383d
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/block-context.spec.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block context', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-block-context' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-context' );
+	} );
+
+	test( 'Block context propagates to inner blocks', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'gutenberg/test-context-provider' } );
+
+		const providerBlock = page.getByRole( 'document', {
+			name: 'Block: Test Context Provider',
+		} );
+		const consumerBlock = page.getByRole( 'document', {
+			name: 'Block: Test Context Consumer',
+		} );
+
+		await expect( consumerBlock ).toBeVisible();
+
+		// Verify initial contents of consumer.
+		await expect( consumerBlock ).toHaveText( 'The record ID is: 0' );
+
+		// Change the attribute value associated with the context.
+		await providerBlock.getByRole( 'textbox' ).fill( '123' );
+
+		await expect( consumerBlock ).toHaveText( 'The record ID is: 123' );
+	} );
+
+	test( 'Block context is reflected in the preview', async ( {
+		editor,
+		page,
+	} ) => {
+		const editorPage = page;
+
+		await editor.insertBlock( { name: 'gutenberg/test-context-provider' } );
+
+		// Open the preview page.
+		const previewPage = await editor.openPreviewPage();
+		const previewContent = previewPage.locator( '.entry-content p' );
+
+		await expect( previewContent ).toHaveText( /^0,\d+,post$/ );
+
+		// Return to editor to change context value to non-default.
+		await editorPage.bringToFront();
+		await editorPage
+			.getByRole( 'document', {
+				name: 'Block: Test Context Provider',
+			} )
+			.getByRole( 'textbox' )
+			.fill( '123' );
+
+		await editorPage
+			.getByRole( 'button', {
+				name: 'View',
+				expanded: false,
+				exact: true,
+			} )
+			.click();
+		await editorPage
+			.getByRole( 'menuitem', { name: 'Preview in new tab' } )
+			.click();
+
+		// Check non-default context values are populated.
+		await expect( previewContent ).toHaveText( /^123,\d+,post$/ );
+		await editorPage.bringToFront();
+		await previewPage.close();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-directory.spec.js b/test/e2e/specs/editor/plugins/block-directory.spec.js
new file mode 100644
index 00000000000000..2fa4ee33e6c1ab
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/block-directory.spec.js
@@ -0,0 +1,248 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const BLOCK1_NAME = 'block-directory-test-block/main-block';
+
+// Urls to mock.
+const SEARCH_URLS = [
+	'/wp/v2/block-directory/search',
+	`rest_route=${ encodeURIComponent( '/wp/v2/block-directory/search' ) }`,
+];
+
+const BLOCK_TYPE_URLS = [
+	`/wp/v2/block-types/${ BLOCK1_NAME }`,
+	`rest_route=${ encodeURIComponent(
+		`/wp/v2/block-types/${ BLOCK1_NAME }`
+	) }`,
+];
+
+const INSTALL_URLS = [
+	'/wp/v2/plugins',
+	`rest_route=${ encodeURIComponent( '/wp/v2/plugins' ) }`,
+];
+
+// Example Blocks.
+const MOCK_BLOCK1 = {
+	name: BLOCK1_NAME,
+	title: 'Block Directory Test Block',
+	description: 'This plugin is useful for the block.',
+	id: 'block-directory-test-block',
+	rating: 0,
+	rating_count: 0,
+	active_installs: 0,
+	author_block_rating: 0,
+	author_block_count: 1,
+	author: 'No Author',
+	icon: 'block-default',
+	assets: [
+		'https://fake_url.com/block.js', // We will mock this.
+	],
+	humanized_updated: '5 months ago',
+	links: {},
+};
+
+const MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS = {
+	plugin: 'block-directory-test-block',
+	status: 'active',
+	name: 'Block Directory',
+	plugin_uri: '',
+	author: 'No Author',
+	author_uri: '',
+	description: {
+		raw: 'This plugin is useful for the block.',
+		rendered: 'This plugin is useful for the block.',
+	},
+	version: '1.0',
+	network_only: false,
+	requires_wp: '',
+	requires_php: '',
+	text_domain: 'block-directory-test-block',
+	_links: {
+		self: [
+			{
+				href: '',
+			},
+		],
+	},
+};
+
+const MOCK_BLOCK2 = {
+	...MOCK_BLOCK1,
+	name: 'block-directory-test-block/secondary-block',
+	title: 'Block Directory Test Block - Pt Deux',
+	id: 'block-directory-test-secondary-block',
+};
+
+// Block that will be registered.
+const block = `( function() {
+	var registerBlockType = wp.blocks.registerBlockType;
+	var el = wp.element.createElement;
+
+	registerBlockType( '${ MOCK_BLOCK1.name }', {
+		title: 'Block Directory Test Block',
+		icon: 'hammer',
+		category: 'text',
+		attributes: {},
+		edit: function( props ) {
+			return el( 'p', null, 'Test Copy' );
+		},
+		save: function() {
+			return null;
+		},
+	} );
+} )();`;
+
+function matchUrl( requestUrl, urls ) {
+	return urls.some( ( url ) => requestUrl.href.includes( url ) );
+}
+
+test.describe( 'Block Directory', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'Should show an empty state when no plugin is found', async ( {
+		page,
+	} ) => {
+		// Return an empty list of plugins.
+		await page.route(
+			( url ) => matchUrl( url, SEARCH_URLS ),
+			async ( route, request ) => {
+				if ( request.method() === 'GET' ) {
+					await route.fulfill( {
+						json: [],
+					} );
+				} else {
+					await route.continue();
+				}
+			}
+		);
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		/**
+		 * Search for the block via the inserter.
+		 * Be super weird so there won't be a matching block installed.
+		 */
+		await blockLibrary
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( '@$@@Dsdsdfw2$@' );
+
+		/**
+		 * The inserter can flash "No results found" before requesting results from the directory,
+		 * fulfilling the first assertion.
+		 * Waiting for these two elements ensures that the request was dispatched.
+		 */
+		await expect( blockLibrary ).toContainText( 'No results found.' );
+		await expect( blockLibrary ).toContainText(
+			'Interested in creating your own block?'
+		);
+	} );
+
+	test( 'Should be able to add (the first) block', async ( { page } ) => {
+		// Mock response for search with the block.
+		await page.route(
+			( url ) => matchUrl( url, SEARCH_URLS ),
+			async ( route, request ) => {
+				if ( request.method() === 'GET' ) {
+					await route.fulfill( {
+						json: [ MOCK_BLOCK1, MOCK_BLOCK2 ],
+					} );
+				} else {
+					await route.continue();
+				}
+			}
+		);
+
+		// Mock response for block type.
+		await page.route(
+			( url ) => matchUrl( url, BLOCK_TYPE_URLS ),
+			async ( route ) => {
+				await route.fulfill( {
+					json: {},
+				} );
+			}
+		);
+
+		// Mock response for install.
+		await page.route(
+			( url ) => matchUrl( url, INSTALL_URLS ),
+			async ( route ) => {
+				await route.fulfill( {
+					json: MOCK_INSTALLED_BLOCK_PLUGIN_DETAILS,
+				} );
+			}
+		);
+
+		// Mock the response for the js asset once it gets injected.
+		await page.route(
+			( url ) => url.href.includes( MOCK_BLOCK1.assets[ 0 ] ),
+			async ( route ) => {
+				await route.fulfill( {
+					contentType: 'application/javascript; charset=utf-8',
+					body: Buffer.from( block, 'utf8' ),
+				} );
+			}
+		);
+
+		// Mock the post-new page as requested via apiFetch for determining new CSS/JS assets.
+		await page.route(
+			( url ) => url.href.includes( '/post-new.php' ),
+			async ( route ) => {
+				await route.fulfill( {
+					contentType: 'text/html; charset=UTF-8',
+					body: `<html><head><script id="mock-block-js" src="${ MOCK_BLOCK1.assets[ 0 ] }"></script></head><body/></html>`,
+				} );
+			}
+		);
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+		const downloadableBlock = page
+			.getByRole( 'listbox', {
+				name: 'Blocks available for install',
+			} )
+			.getByRole( 'option', {
+				name: `Install ${ MOCK_BLOCK1.title }.`,
+				exact: true,
+			} );
+
+		await blockLibrary
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( MOCK_BLOCK1.title );
+
+		await expect( downloadableBlock ).toBeVisible();
+
+		// Install the block.
+		await downloadableBlock.click();
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: MOCK_BLOCK1.title } )
+			.waitFor();
+
+		await expect(
+			page.getByRole( 'document', {
+				name: `Block: ${ MOCK_BLOCK1.title }`,
+			} )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-icons.spec.js b/test/e2e/specs/editor/plugins/block-icons.spec.js
new file mode 100644
index 00000000000000..3a00b41b9e71ed
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/block-icons.spec.js
@@ -0,0 +1,228 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const dashIconRegex = /<span.*?class=".*?dashicons-cart.*?">.*?<\/span>/;
+const circleString =
+	'<circle cx="10" cy="10" r="10" fill="red" stroke="blue" stroke-width="10"></circle>';
+const svgIcon = new RegExp(
+	`<svg.*?viewBox="0 0 20 20".*?>${ circleString }</svg>`
+);
+
+test.describe( 'Block Icons', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-block-icons' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-icons' );
+	} );
+
+	test( 'Block with svg icon', async ( { editor, page } ) => {
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockLibrary.getByRole( 'searchbox' ).fill( 'TestSimpleSvgIcon' );
+
+		const blockOption = blockLibrary.getByRole( 'option', {
+			name: 'TestSimpleSvgIcon',
+		} );
+		const blockIcon = blockOption.locator( '.block-editor-block-icon' );
+
+		// Renders correctly the icon in the inserter.
+		await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon );
+
+		// Can insert the block.
+		await blockOption.click();
+		await expect(
+			page.getByRole( 'document', { name: 'Block: TestSimpleSvgIcon' } )
+		).toBeVisible();
+
+		// Renders correctly the icon on the inspector.
+		await editor.openDocumentSettingsSidebar();
+		const inspectorIcon = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.locator( '.block-editor-block-icon' );
+		await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon );
+	} );
+
+	test( 'Block with dash icon', async ( { editor, page } ) => {
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockLibrary
+			.getByRole( 'searchbox' )
+			.fill( 'TestSimpleDashIcon' );
+
+		const blockOption = blockLibrary.getByRole( 'option', {
+			name: 'TestSimpleDashIcon',
+		} );
+		const blockIcon = blockOption.locator( '.block-editor-block-icon' );
+
+		// Renders correctly the icon in the inserter.
+		await expect
+			.poll( () => blockIcon.innerHTML() )
+			.toMatch( dashIconRegex );
+
+		// Can insert the block
+		await blockOption.click();
+		await expect(
+			page.getByRole( 'document', { name: 'Block: TestSimpleDashIcon' } )
+		).toBeVisible();
+
+		// Renders correctly the icon on the inspector.
+		await editor.openDocumentSettingsSidebar();
+		const inspectorIcon = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.locator( '.block-editor-block-icon' );
+		await expect
+			.poll( () => inspectorIcon.innerHTML() )
+			.toMatch( dashIconRegex );
+	} );
+
+	test( 'Block with function icon', async ( { editor, page } ) => {
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockLibrary.getByRole( 'searchbox' ).fill( 'TestFunctionIcon' );
+
+		const blockOption = blockLibrary.getByRole( 'option', {
+			name: 'TestFunctionIcon',
+		} );
+		const blockIcon = blockOption.locator( '.block-editor-block-icon' );
+
+		// Renders correctly the icon in the inserter.
+		await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon );
+
+		// Can insert the block.
+		await blockOption.click();
+		await expect(
+			page.getByRole( 'document', { name: 'Block: TestFunctionIcon' } )
+		).toBeVisible();
+
+		// Renders correctly the icon on the inspector.
+		await editor.openDocumentSettingsSidebar();
+		const inspectorIcon = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.locator( '.block-editor-block-icon' );
+		await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon );
+	} );
+
+	test( 'Block with dash icon and background/foreground colors', async ( {
+		editor,
+		page,
+	} ) => {
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockLibrary
+			.getByRole( 'searchbox' )
+			.fill( 'TestDashIconColors' );
+
+		const blockOption = blockLibrary.getByRole( 'option', {
+			name: 'TestDashIconColors',
+		} );
+		const blockIcon = blockOption.locator( '.block-editor-block-icon' );
+
+		await expect( blockIcon ).toHaveCSS(
+			'background-color',
+			'rgb(1, 0, 0)'
+		);
+		await expect( blockIcon ).toHaveCSS( 'color', 'rgb(254, 0, 0)' );
+		await expect
+			.poll( () => blockIcon.innerHTML() )
+			.toMatch( dashIconRegex );
+
+		await blockOption.click();
+		await editor.openDocumentSettingsSidebar();
+
+		const inspectorIcon = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.locator( '.block-editor-block-icon' );
+
+		await expect( inspectorIcon ).toHaveCSS(
+			'background-color',
+			'rgb(1, 0, 0)'
+		);
+		await expect( inspectorIcon ).toHaveCSS( 'color', 'rgb(254, 0, 0)' );
+		await expect
+			.poll( () => inspectorIcon.innerHTML() )
+			.toMatch( dashIconRegex );
+	} );
+
+	test( 'Block with svg icon and background should compute a readable foreground color', async ( {
+		editor,
+		page,
+	} ) => {
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockLibrary
+			.getByRole( 'searchbox' )
+			.fill( 'TestSvgIconBackground' );
+
+		const blockOption = blockLibrary.getByRole( 'option', {
+			name: 'TestSvgIconBackground',
+		} );
+		const blockIcon = blockOption.locator( '.block-editor-block-icon' );
+
+		await expect( blockIcon ).toHaveCSS(
+			'background-color',
+			'rgb(1, 0, 0)'
+		);
+		await expect( blockIcon ).toHaveCSS( 'color', 'rgb(248, 249, 249)' );
+		await expect.poll( () => blockIcon.innerHTML() ).toMatch( svgIcon );
+
+		await blockOption.click();
+		await editor.openDocumentSettingsSidebar();
+
+		const inspectorIcon = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.locator( '.block-editor-block-icon' );
+
+		await expect( inspectorIcon ).toHaveCSS(
+			'background-color',
+			'rgb(1, 0, 0)'
+		);
+		await expect( inspectorIcon ).toHaveCSS(
+			'color',
+			'rgb(248, 249, 249)'
+		);
+		await expect.poll( () => inspectorIcon.innerHTML() ).toMatch( svgIcon );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js
new file mode 100644
index 00000000000000..3f71d2b57d9fd1
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/block-variations.spec.js
@@ -0,0 +1,232 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block variations', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-block-variations' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-variations'
+		);
+	} );
+
+	test( 'Search for the overridden default Quote block', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Quote' );
+
+		await expect(
+			page
+				.getByRole( 'listbox', { name: 'Blocks' } )
+				.getByRole( 'option', { name: 'Quote', exact: true } )
+		).toBeHidden();
+		await expect(
+			page
+				.getByRole( 'listbox', { name: 'Blocks' } )
+				.getByRole( 'option', { name: 'Large Quote' } )
+		).toBeVisible();
+	} );
+
+	test( 'Insert the overridden default Quote block variation', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Large Quote' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Quote' } )
+		).toHaveClass( /is-style-large/ );
+	} );
+
+	test( 'Search for the Paragraph block with 2 additional variations', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Paragraph' );
+
+		await expect(
+			page
+				.getByRole( 'listbox', { name: 'Blocks' } )
+				.getByRole( 'option' )
+		).toHaveText( [ 'Paragraph', 'Success Message', 'Warning Message' ] );
+	} );
+
+	test( 'Insert the Success Message block variation', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Heading' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/Success Message' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
+		).toHaveText( 'This is a success message!' );
+	} );
+
+	test( 'Pick the additional variation in the inserted Columns block', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Columns' );
+		await page.keyboard.press( 'Enter' );
+
+		await editor.canvas
+			.getByRole( 'list', { name: 'Block variations' } )
+			.getByRole( 'button', { name: 'Four columns' } )
+			.click();
+
+		await expect(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Columns' } )
+				.getByRole( 'document' )
+		).toHaveCount( 4 );
+	} );
+
+	// Tests the `useBlockDisplayInformation` hook.
+	test( 'should show block information when no matching variation is found', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Large Quote' );
+		await page.keyboard.press( 'Enter' );
+
+		// Select the quote block.
+		await page.keyboard.press( 'ArrowUp' );
+
+		await expect(
+			page
+				.getByRole( 'list', { name: 'Block breadcrumb' } )
+				.getByRole( 'listitem' )
+				.filter( { hasText: 'Quote' } )
+		).toHaveAttribute( 'aria-current', 'true' );
+
+		await pageUtils.pressKeys( 'access+o' );
+
+		await expect(
+			page
+				.getByRole( 'treegrid', { name: 'Block navigation structure' } )
+				.getByRole( 'link' )
+		).toHaveText( 'Quote' );
+
+		await expect(
+			page.locator( '.block-editor-block-card__description' )
+		).toHaveText(
+			'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar'
+		);
+	} );
+
+	test( 'should display variations info if all declared', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Heading' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/Success Message' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			page
+				.getByRole( 'list', { name: 'Block breadcrumb' } )
+				.getByRole( 'listitem' )
+				.filter( { hasText: 'Success Message' } )
+		).toHaveAttribute( 'aria-current', 'true' );
+
+		await pageUtils.pressKeys( 'access+o' );
+
+		await expect(
+			page
+				.getByRole( 'treegrid', { name: 'Block navigation structure' } )
+				.getByRole( 'link' )
+		).toHaveText( 'Success Message' );
+
+		await expect(
+			page.locator( '.block-editor-block-card__description' )
+		).toHaveText(
+			'This block displays a success message. This description overrides the default one provided for the Paragraph block.'
+		);
+	} );
+
+	test( 'should display mixed block and variation match information', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Heading' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/Warning Message' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			page
+				.getByRole( 'list', { name: 'Block breadcrumb' } )
+				.getByRole( 'listitem' )
+				.filter( { hasText: 'Warning Message' } )
+		).toHaveAttribute( 'aria-current', 'true' );
+
+		await pageUtils.pressKeys( 'access+o' );
+
+		await expect(
+			page
+				.getByRole( 'treegrid', {
+					name: 'Block navigation structure',
+				} )
+				.getByRole( 'link' )
+		).toHaveText( 'Warning Message' );
+
+		// Warning Message variation is missing the `description`.
+		await expect(
+			page.locator( '.block-editor-block-card__description' )
+		).toHaveText( 'Start with the basic building block of all narrative.' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js
new file mode 100644
index 00000000000000..765b4040a4b976
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Child Blocks', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-child-blocks' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-child-blocks' );
+	} );
+
+	test( 'are hidden from the global block inserter', async ( { page } ) => {
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		expect( blockLibrary.getByRole( 'option' ) ).not.toContain( [
+			'Child Blocks Child',
+		] );
+	} );
+
+	test( 'shows up in a parent block', async ( { page, editor } ) => {
+		await editor.insertBlock( {
+			name: 'test/child-blocks-unrestricted-parent',
+		} );
+
+		await page
+			.getByRole( 'document', {
+				name: 'Block: Child Blocks Unrestricted Parent',
+			} )
+			.getByRole( 'button', {
+				name: 'Add default block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		await expect( blockLibrary.getByRole( 'option' ) ).toContainText( [
+			'Child Blocks Child',
+		] );
+		expect(
+			await blockLibrary.getByRole( 'option' ).count()
+		).toBeGreaterThan( 10 );
+	} );
+
+	test( 'display in a parent block with allowedItems', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/child-blocks-restricted-parent',
+		} );
+
+		await page
+			.getByRole( 'document', {
+				name: 'Block: Child Blocks Restricted Parent',
+			} )
+			.getByRole( 'button', {
+				name: 'Add default block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [
+			'Paragraph',
+			'Child Blocks Child',
+			'Image',
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/container-blocks.spec.js b/test/e2e/specs/editor/plugins/container-blocks.spec.js
new file mode 100644
index 00000000000000..616f219fee5153
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/container-blocks.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Container block without paragraph support', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-container-block-without-paragraph'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-container-block-without-paragraph'
+		);
+	} );
+
+	test( 'ensures we can use the alternative block appender properly', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/container-without-paragraph',
+		} );
+
+		await page
+			.getByRole( 'document', {
+				name: 'Block: Container without paragraph',
+			} )
+			.getByRole( 'button', { name: 'Add block' } )
+			.click();
+
+		await page
+			.getByRole( 'listbox', { name: 'Blocks' } )
+			.getByRole( 'option', { name: 'Image' } )
+			.click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/container-without-paragraph',
+				innerBlocks: [ { name: 'core/image' } ],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
new file mode 100644
index 00000000000000..67372d46c61a70
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Test Custom Post Types', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-custom-post-types' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-custom-post-types'
+		);
+	} );
+
+	test( 'should be able to create an hierarchical post without title support', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'hierar-no-title' } );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Parent Post' );
+		await editor.publishPost();
+
+		// Create a post that is a child of the previously created post.
+		await admin.createNewPost( { postType: 'hierar-no-title' } );
+		await editor.openDocumentSettingsSidebar();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'tab', {
+				name: 'Hierarchical No Title',
+			} )
+			.click();
+
+		await page.locator( '.editor-post-parent__panel-toggle' ).click();
+
+		const parentPageLocator = page.getByRole( 'combobox', {
+			name: 'Parent',
+		} );
+
+		await parentPageLocator.click();
+		await page.getByRole( 'listbox' ).getByRole( 'option' ).first().click();
+		const parentPage = await parentPageLocator.inputValue();
+
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Child Post' );
+		await editor.publishPost();
+		await page.reload();
+
+		await page.locator( '.editor-post-parent__panel-toggle' ).click();
+
+		// Confirm parent page selection matches after reloading.
+		await expect( parentPageLocator ).toHaveValue( parentPage );
+	} );
+
+	test( 'should not be able to rename a post that lacks title support', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'hierar-no-title' } );
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'button', { name: 'Actions' } ).click();
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Rename' } )
+		).toHaveCount( 0 );
+	} );
+
+	test( 'should create a cpt with a legacy block in its template without WSOD', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'leg_block_in_tpl' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Hello there' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/embed',
+				attributes: { providerNameSlug: 'wordpress-tv' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello there' },
+			},
+		] );
+
+		await editor.publishPost();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/custom-taxonomies.spec.js b/test/e2e/specs/editor/plugins/custom-taxonomies.spec.js
new file mode 100644
index 00000000000000..9ac8df327a3a11
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/custom-taxonomies.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Custom Taxonomies labels are used', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-custom-taxonomies' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-custom-taxonomies'
+		);
+	} );
+
+	test( 'Ensures the custom taxonomy labels are respected', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		const modelPanel = editorSettings.getByRole( 'button', {
+			name: 'Model',
+		} );
+
+		// Open the panel if needed.
+		if (
+			( await modelPanel.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await modelPanel.click();
+		}
+
+		// Check the add new button.
+		await editorSettings
+			.getByRole( 'combobox', { name: 'Add New Model' } )
+			.fill( 'Model 1' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editorSettings.getByRole( 'button', { name: 'Remove Mode' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js
index fd57954e9905da..58f742341ebc3b 100644
--- a/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js
+++ b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js
@@ -27,7 +27,6 @@ test.describe( 'Deprecated Node Matcher', () => {
 		page,
 		editor,
 	} ) => {
-		// await insertBlock( 'Deprecated Node Matcher' );
 		await editor.insertBlock( { name: 'core/deprecated-node-matcher' } );
 		await page.keyboard.type( 'test' );
 		await page.keyboard.press( 'Enter' );
@@ -39,7 +38,6 @@ test.describe( 'Deprecated Node Matcher', () => {
 		editor,
 		pageUtils,
 	} ) => {
-		// await insertBlock( 'Deprecated Children Matcher' );
 		await editor.insertBlock( {
 			name: 'core/deprecated-children-matcher',
 		} );
@@ -49,7 +47,7 @@ test.describe( 'Deprecated Node Matcher', () => {
 		await page.keyboard.down( 'Shift' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/format-api.spec.js b/test/e2e/specs/editor/plugins/format-api.spec.js
index a294a2034f0558..1e631615313bd1 100644
--- a/test/e2e/specs/editor/plugins/format-api.spec.js
+++ b/test/e2e/specs/editor/plugins/format-api.spec.js
@@ -21,9 +21,11 @@ test.describe( 'Using Format API', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'First paragraph' );
-		await pageUtils.pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'shiftAlt+ArrowLeft' );
 		await editor.clickBlockToolbarButton( 'More' );
 
 		// Used a regex to tackle the  in name of menuitem.(Custom Link).
@@ -34,6 +36,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 -->`
 		);
 	} );
diff --git a/test/e2e/specs/editor/plugins/hooks-api.spec.js b/test/e2e/specs/editor/plugins/hooks-api.spec.js
index 47512d32c387f7..95bc5bf8bfd2c0 100644
--- a/test/e2e/specs/editor/plugins/hooks-api.spec.js
+++ b/test/e2e/specs/editor/plugins/hooks-api.spec.js
@@ -19,9 +19,16 @@ test.describe( 'Using Hooks API', () => {
 
 	test( 'Should contain a reset block button on the sidebar', async ( {
 		page,
+		editor,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'First paragraph' );
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 		await expect(
 			page.locator( 'role=button[name="Reset Block"i]' )
 		).toBeVisible();
@@ -31,13 +38,19 @@ test.describe( 'Using Hooks API', () => {
 		editor,
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'First paragraph' );
 
-		const paragraphBlock = page.locator(
-			'role=document[name="Paragraph block"i]'
+		const paragraphBlock = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i]'
 		);
 		await expect( paragraphBlock ).toHaveText( 'First paragraph' );
+		await page.click(
+			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
+		);
 		await page.click( 'role=button[name="Reset Block"i]' );
 		expect( await editor.getEditedPostContent() ).toEqual( '' );
 	} );
diff --git a/test/e2e/specs/editor/plugins/iframed-block.spec.js b/test/e2e/specs/editor/plugins/iframed-block.spec.js
index 55b67cb70fe86e..0b5343169d5bf8 100644
--- a/test/e2e/specs/editor/plugins/iframed-block.spec.js
+++ b/test/e2e/specs/editor/plugins/iframed-block.spec.js
@@ -13,34 +13,17 @@ test.describe( 'Iframed block', () => {
 		await requestUtils.deactivatePlugin( 'gutenberg-test-iframed-block' );
 	} );
 
-	test( 'Should save the changes', async ( { editor, page } ) => {
+	test( 'should load script and dependencies in iframe', async ( {
+		editor,
+	} ) => {
 		await editor.insertBlock( { name: 'test/iframed-block' } );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
+		// Expect the script to load in the iframe, which replaces the block text.
 		await expect(
-			page.locator( 'role=document[name="Block: Iframed Block"i]' )
+			editor.canvas.locator(
+				'role=document[name="Block: Iframed Block"i]'
+			)
 		).toContainText( 'Iframed Block (set with jQuery)' );
-
-		// open page from sidebar settings
-		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Page"i]'
-		);
-
-		// Opens the template editor with a newly created template.
-		await page.click( 'role=button[name="Select template"i]' );
-		await page.click( 'role=button[name="Add template"i]' );
-		await page.fill( 'role=textbox[name="NAME"i]', 'Test template' );
-		await page.click( 'role=button[name="Create"i]' );
-
-		// Expect iframe canvas to be visible
-		await expect(
-			page.locator( 'iframe[name="editor-canvas"]' )
-		).toBeVisible();
-
-		// Expect the script to load in the iframe, which replaces the block text.
-		const iframedText = page.frameLocator( 'iframe' ).locator( 'body' );
-		await expect( iframedText ).toContainText(
-			'Iframed Block (set with jQuery)'
-		);
 	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js
new file mode 100644
index 00000000000000..b4f502b2c9d0ba
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed block editor settings styles', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-iframed-enqueue-block-editor-settings'
+		);
+	} );
+
+	test( 'should load styles added through block editor settings', async ( {
+		editor,
+		page,
+	} ) => {
+		const defaultBlock = editor.canvas.getByRole( 'button', {
+			name: 'Add default block',
+		} );
+
+		// Expect a red border (added in PHP).
+		await expect( defaultBlock ).toHaveCSS(
+			'border-color',
+			'rgb(255, 0, 0)'
+		);
+
+		await page.evaluate( () => {
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'plugin',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 2px border (added in JS).
+		await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' );
+	} );
+
+	test( 'should load theme styles added through block editor settings', async ( {
+		editor,
+		page,
+	} ) => {
+		const defaultBlock = editor.canvas.getByRole( 'button', {
+			name: 'Add default block',
+		} );
+
+		await page.evaluate( () => {
+			// Make sure that theme styles are added even if the theme styles
+			// preference is off.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+			const settings = window.wp.data
+				.select( 'core/editor' )
+				.getEditorSettings();
+			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+				...settings,
+				styles: [
+					...settings.styles,
+					{
+						css: 'p { border-width: 2px; }',
+						__unstableType: 'theme',
+					},
+				],
+			} );
+		} );
+
+		// Expect a 1px border because theme styles are disabled.
+		await expect( defaultBlock ).toHaveCSS( 'border-width', '1px' );
+
+		await page.evaluate( () => {
+			// Now enable theme styles.
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.toggleFeature( 'themeStyles' );
+		} );
+
+		// Expect a 2px border because theme styles are enabled.
+		await expect( defaultBlock ).toHaveCSS( 'border-width', '2px' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js b/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js
new file mode 100644
index 00000000000000..a523ba1f8e9e3d
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-equeue-block-assets.spec.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed enqueue block assets', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.activatePlugin(
+				'gutenberg-test-iframed-enqueue-block-assets'
+			),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deactivatePlugin(
+				'gutenberg-test-iframed-enqueue-block-assets'
+			),
+		] );
+	} );
+
+	test( 'should load styles added through enqueue_block_assets', async ( {
+		editor,
+	} ) => {
+		const canvasBody = editor.canvas.locator( 'body' );
+
+		await expect( canvasBody ).toHaveCSS(
+			'background-color',
+			'rgb(33, 117, 155)'
+		);
+		await expect( canvasBody ).toHaveCSS( 'padding', '20px' );
+		await expect( canvasBody ).toHaveAttribute(
+			'data-iframed-enqueue-block-assets-l10n',
+			'Iframed Enqueue Block Assets!'
+		);
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js b/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js
new file mode 100644
index 00000000000000..8fa4cbffa9df8c
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-inline-styles.spec.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed inline styles', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-iframed-inline-styles'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-iframed-inline-styles'
+		);
+	} );
+
+	test( 'should load inline styles in iframe', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		let hasWarning;
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'warning' ) {
+				hasWarning = true;
+			}
+		} );
+
+		await admin.createNewPost( { postType: 'page' } );
+		await editor.insertBlock( { name: 'test/iframed-inline-styles' } );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Iframed Inline Styles',
+		} );
+		await expect( block ).toBeVisible();
+
+		// Inline styles of properly enqueued stylesheet should load.
+		await expect( block ).toHaveCSS( 'padding', '20px' );
+
+		// Inline styles of stylesheet loaded with the compatibility layer should load.
+		await expect( block ).toHaveCSS( 'border-width', '2px' );
+		expect( hasWarning ).toBe( true );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js b/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js
new file mode 100644
index 00000000000000..edc6b0a68cd4ab
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-masonry-block.spec.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed masonry block', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-iframed-masonry-block'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-iframed-masonry-block'
+		);
+	} );
+
+	test( 'should load script and dependencies in iframe', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'test/iframed-masonry-block' } );
+
+		const masonry = editor.canvas.getByRole( 'document', {
+			name: 'Block: Iframed Masonry Block',
+		} );
+		await expect( masonry ).toBeVisible();
+
+		const masonryBox = await masonry.boundingBox();
+
+		// Expect Masonry to set a non-zero height.
+		expect( masonryBox.height ).toBeGreaterThan( 0 );
+
+		// Expect Masonry to absolute position items.
+		await expect( masonry.locator( '.grid-item' ).first() ).toHaveCSS(
+			'position',
+			'absolute'
+		);
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js b/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js
new file mode 100644
index 00000000000000..2e6f5b6b0cb6a0
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/iframed-multiple-block-stylesheets.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'iframed multiple block stylesheets', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-iframed-multiple-stylesheets'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( { postType: 'page' } );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-iframed-multiple-stylesheets'
+		);
+	} );
+
+	test( 'should load multiple block stylesheets in iframe', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/iframed-multiple-stylesheets',
+		} );
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Iframed Multiple Stylesheets',
+		} );
+
+		await expect( block ).toBeVisible();
+
+		// Style loaded from the main stylesheet.
+		await expect( block ).toHaveCSS( 'border-style', 'dashed' );
+		// Style loaded from the additional stylesheet.
+		await expect( block ).toHaveCSS( 'border-color', 'rgb(255, 0, 0)' );
+		// Style loaded from the a stylesheet using path instead of handle.
+		await expect( block ).toHaveCSS( 'border-color', 'rgb(255, 0, 0)' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js
index 1b516dbcf05ef9..1e0bc91407565d 100644
--- a/test/e2e/specs/editor/plugins/image-size.spec.js
+++ b/test/e2e/specs/editor/plugins/image-size.spec.js
@@ -46,16 +46,16 @@ test.describe( 'changing image size', () => {
 
 		// Select the new size updated with the plugin.
 		await editor.openDocumentSettingsSidebar();
-		await page.selectOption( 'role=combobox[name="Image size"i]', {
+		await page.selectOption( 'role=combobox[name="Resolution"i]', {
 			label: 'Custom Size One',
 		} );
 
 		// Verify that the custom size was applied to the image.
 		await expect(
-			page.locator( `role=img[name="${ filename }"]` )
+			editor.canvas.locator( `role=img[name="${ filename }"]` )
 		).toHaveCSS( 'width', '499px' );
 		await expect(
 			page.locator( 'role=spinbutton[name="Width"i]' )
-		).toHaveValue( '499' );
+		).toHaveValue( '' );
 	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
new file mode 100644
index 00000000000000..4ee6d7a0fc4fec
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-allowed-blocks'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-allowed-blocks'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'allows all blocks if the allowed blocks setting was not set', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'constrained' },
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { placeholder: 'Add a description' },
+				},
+			],
+		} );
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		expect(
+			await blockLibrary.getByRole( 'option' ).count()
+		).toBeGreaterThan( 10 );
+	} );
+
+	test( 'limits the blocks if the allowed blocks setting was set', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'constrained' },
+				allowedBlocks: [
+					'core/paragraph',
+					'core/heading',
+					'core/image',
+				],
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { placeholder: 'Add a description' },
+				},
+			],
+		} );
+
+		// Select inner block.
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+			.click();
+
+		const blockInserter = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		const blockLibrary = page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.locator(
+				'.block-editor-inserter__insertable-blocks-at-selection'
+			);
+
+		await blockInserter.click();
+		await expect( blockLibrary ).toBeVisible();
+		await expect( blockLibrary.getByRole( 'option' ) ).toHaveText( [
+			'Paragraph',
+			'Heading',
+			'Image',
+		] );
+	} );
+
+	// Note: This behavior isn't fully supported. See https://github.com/WordPress/gutenberg/issues/14515.
+	test( 'correctly applies dynamic allowed blocks restrictions', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/Allowed Blocks Dynamic' );
+		await page.keyboard.press( 'Enter' );
+
+		const blockAppender = editor.canvas.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await expect( blockAppender ).toBeVisible();
+		await blockAppender.click();
+
+		const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
+		await expect( blockListBox ).toBeVisible();
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Image',
+			'List',
+		] );
+
+		// Insert list block.
+		await blockListBox.getByRole( 'option', { name: 'List' } ).click();
+		// Select the list wrapper and then parent block.
+		await page.keyboard.press( 'ArrowUp' );
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
+
+		// Insert the image.
+		await blockAppender.click();
+		await blockListBox.getByRole( 'option', { name: 'Image' } ).click();
+
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
+		await blockAppender.click();
+
+		// It should display a different allowed block list.
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Gallery',
+			'Video',
+		] );
+
+		await blockListBox.getByRole( 'option', { name: 'Gallery' } ).click();
+
+		await editor.clickBlockToolbarButton(
+			'Select parent block: Allowed Blocks Dynamic'
+		);
+		await blockAppender.click();
+
+		// It should display a different allowed block list.
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Gallery',
+			'List',
+			'Video',
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-locking-all-embed.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-locking-all-embed.spec.js
new file mode 100644
index 00000000000000..3bf0ff459cb7fe
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/inner-blocks-locking-all-embed.spec.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const EMBED_URLS = [
+	'/oembed/1.0/proxy',
+	`rest_route=${ encodeURIComponent( '/oembed/1.0/proxy' ) }`,
+];
+const MOCK_RESPONSES = {
+	url: 'https://twitter.com/wordpress',
+	html: '<p>Mock success response.</p>',
+	type: 'rich',
+	provider_name: 'Twitter',
+	provider_url: 'https://twitter.com',
+	version: '1.0',
+};
+
+test.describe( 'Embed block inside a locked all parent', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-locking-all-embed'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-locking-all-embed'
+		);
+	} );
+
+	test( 'embed block should be able to embed external content', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await page.route(
+			( url ) => EMBED_URLS.some( ( u ) => url.href.includes( u ) ),
+			async ( route ) => {
+				await route.fulfill( {
+					json: MOCK_RESPONSES,
+				} );
+			}
+		);
+
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-locking-all-embed',
+		} );
+		await page
+			.getByRole( 'textbox', { name: 'Embed URL' } )
+			.fill( 'https://twitter.com/wordpress' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			page.getByRole( 'document', { name: 'Block: Twitter' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.spec.js
new file mode 100644
index 00000000000000..746d27d992bbc7
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.spec.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	test.describe( 'Quick Inserter', () => {
+		test( 'uses defaulting ordering if prioritzed blocks setting was not set', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'test/prioritized-inserter-blocks-unset',
+			} );
+
+			const block = page.getByRole( 'document', {
+				name: 'Block: Prioritized Inserter Blocks Unset',
+			} );
+
+			await block
+				.getByRole( 'button', {
+					name: 'Add block',
+				} )
+				.click();
+
+			const blockListBox = page.getByRole( 'listbox', {
+				name: 'Blocks',
+			} );
+			await expect( blockListBox ).toBeVisible();
+			await expect( blockListBox.getByRole( 'option' ) ).toHaveCount( 6 );
+		} );
+
+		test( 'uses the priority ordering if prioritzed blocks setting is set', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'test/prioritized-inserter-blocks-set',
+			} );
+
+			const block = page.getByRole( 'document', {
+				name: 'Block: Prioritized Inserter Blocks Set',
+			} );
+
+			await block
+				.getByRole( 'button', {
+					name: 'Add block',
+				} )
+				.click();
+
+			const blockListBox = page.getByRole( 'listbox', {
+				name: 'Blocks',
+			} );
+			await expect( blockListBox ).toBeVisible();
+
+			// Should still be only 6 results regardless of the priority ordering.
+			await expect( blockListBox.getByRole( 'option' ) ).toHaveCount( 6 );
+			await expect( blockListBox.getByRole( 'option' ) ).toContainText( [
+				'Audio',
+				'Spacer',
+				'Code',
+			] );
+		} );
+
+		test( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks',
+			} );
+
+			const block = page.getByRole( 'document', {
+				name: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks',
+			} );
+
+			await block
+				.getByRole( 'button', {
+					name: 'Add block',
+				} )
+				.click();
+
+			const blockListBox = page.getByRole( 'listbox', {
+				name: 'Blocks',
+			} );
+			await expect( blockListBox ).toBeVisible();
+
+			await expect( blockListBox.getByRole( 'option' ) ).toContainText( [
+				'Spacer',
+				'Code',
+				'Paragraph',
+			] );
+			await expect(
+				blockListBox.getByRole( 'option' )
+			).not.toContainText( [ 'Audio' ] );
+		} );
+	} );
+
+	test.describe( 'Slash inserter', () => {
+		test( 'uses the priority ordering if prioritzed blocks setting is set', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'test/prioritized-inserter-blocks-set',
+			} );
+
+			const imageBlock = page
+				.getByRole( 'document', {
+					name: 'Block: Prioritized Inserter Blocks Set',
+				} )
+				.getByRole( 'document', { name: 'Block: Image' } );
+
+			await imageBlock.click();
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( '/' );
+
+			const blockAutocompleter = page.getByRole( 'listbox' );
+			await expect( blockAutocompleter ).toBeVisible();
+
+			// Default suggested blocks number.
+			await expect(
+				blockAutocompleter.getByRole( 'option' )
+			).toHaveCount( 9 );
+			await expect(
+				blockAutocompleter.getByRole( 'option' )
+			).toContainText( [ 'Audio', 'Spacer', 'Code' ] );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js
new file mode 100644
index 00000000000000..a76d6c6439e2ef
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/inner-blocks-render-appender.spec.js
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RenderAppender prop of InnerBlocks', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-render-appender'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-render-appender'
+		);
+	} );
+
+	test( 'Users can customize the appender and can still insert blocks using exposed components', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/inner-blocks-render-appender',
+		} );
+
+		const customAppender = page.locator( '.my-custom-awesome-appender' );
+
+		// Verify if the custom block appender text is the expected one.
+		await expect( customAppender ).toContainText(
+			'My custom awesome appender'
+		);
+
+		// Open the inserter of our custom block appender.
+		await customAppender
+			.getByRole( 'button', { name: 'Add block' } )
+			.click();
+
+		// Verify if the blocks the custom inserter is rendering are the expected ones.
+		const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Quote',
+			'Video',
+		] );
+
+		// Insert a quote block.
+		await blockListBox.getByRole( 'option', { name: 'Quote' } ).click();
+
+		// Verify if the post content is the expected one.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/inner-blocks-render-appender',
+				innerBlocks: [
+					{
+						name: 'core/quote',
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'Users can dynamically customize the appender', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/inner-blocks-render-appender-dynamic',
+		} );
+
+		const dynamimcAppender = page.locator( '.my-dynamic-blocks-appender' );
+		const addBlockBtn = dynamimcAppender.getByRole( 'button', {
+			name: 'Add block',
+		} );
+
+		// Verify if the custom block appender text is the expected one.
+		await expect( dynamimcAppender ).toContainText(
+			'Empty Blocks Appender'
+		);
+
+		// Open the inserter of our custom block appender.
+		await addBlockBtn.click();
+
+		// Verify if the blocks the custom inserter is rendering are the expected ones.
+		const blockListBox = page.getByRole( 'listbox', { name: 'Blocks' } );
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Quote',
+			'Video',
+		] );
+
+		// Insert a quote block.
+		await blockListBox.getByRole( 'option', { name: 'Quote' } ).click();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		// Verify if the custom block appender text changed as expected.
+		await expect(
+			dynamimcAppender.getByText( 'Single Blocks Appender' )
+		).toBeVisible();
+
+		// Insert a video block.
+		await addBlockBtn.click();
+		await blockListBox.getByRole( 'option', { name: 'Video' } ).click();
+
+		// Verify if the custom block appender text changed as expected.
+		await expect(
+			dynamimcAppender.getByText( 'Multiple Blocks Appender' )
+		).toBeVisible();
+
+		// Verify that the custom appender button is now not being rendered.
+		await expect( addBlockBtn ).toBeHidden();
+
+		// Verify if the post content is the expected one.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/inner-blocks-render-appender-dynamic',
+				innerBlocks: [
+					{
+						name: 'core/quote',
+					},
+					{
+						name: 'core/video',
+					},
+				],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-template-sync.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-template-sync.spec.js
new file mode 100644
index 00000000000000..9790d873d898d4
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/inner-blocks-template-sync.spec.js
@@ -0,0 +1,178 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'InnerBlocks Template Sync', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-templates'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-templates'
+		);
+	} );
+
+	test( 'Ensures blocks without locking are kept intact even if they do not match the template', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-no-locking',
+		} );
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		await page.getByRole( 'textbox', {
+			name: 'Type text or HTML',
+		} ).fill( `<!-- wp:test/test-inner-blocks-no-locking -->
+<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Content…</p>
+<!-- /wp:paragraph -->
+<!-- wp:paragraph -->
+<p>added paragraph</p>
+<!-- /wp:paragraph -->
+<!-- /wp:test/test-inner-blocks-no-locking -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/test-inner-blocks-no-locking',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Content…',
+						},
+					},
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'added paragraph',
+						},
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'Removes blocks that are not expected by the template if a lock all exists', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-locking-all',
+		} );
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		await page.getByRole( 'textbox', {
+			name: 'Type text or HTML',
+		} ).fill( `<!-- wp:test/test-inner-blocks-locking-all -->
+<!-- wp:paragraph {"fontSize":"large"} -->
+<p class="has-large-font-size">Content…</p>
+<!-- /wp:paragraph -->
+<!-- wp:paragraph -->
+<p>added paragraph</p>
+<!-- /wp:paragraph -->
+<!-- /wp:test/test-inner-blocks-locking-all -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/test-inner-blocks-locking-all',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Content…',
+						},
+					},
+				],
+			},
+		] );
+	} );
+
+	// Test for regressions of https://github.com/WordPress/gutenberg/issues/27897.
+	test( `Synchronizes blocks if lock 'all' is set and the template prop is changed`, async ( {
+		editor,
+	} ) => {
+		// Insert the template and assert that the template has its initial value.
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-update-locked-template',
+		} );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/test-inner-blocks-update-locked-template',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Content…',
+						},
+					},
+				],
+			},
+		] );
+
+		// Trigger a template update and assert that a second block is now present.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Update template' } )
+			.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/test-inner-blocks-update-locked-template',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Content…',
+						},
+					},
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Two',
+						},
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'Ensure inner block writing flow works as expected without additional paragraphs added', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-paragraph-placeholder',
+		} );
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+			.fill( 'Test Paragraph' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'test/test-inner-blocks-paragraph-placeholder',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Test Paragraph',
+						},
+					},
+				],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/meta-attribute-block.spec.js b/test/e2e/specs/editor/plugins/meta-attribute-block.spec.js
new file mode 100644
index 00000000000000..f11d59b39dc6d8
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/meta-attribute-block.spec.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const VARIATIONS = [
+	[ 'Early Registration', 'test/test-meta-attribute-block-early' ],
+	[ 'Late Registration', 'test/test-meta-attribute-block-late' ],
+];
+
+test.describe( 'Block with a meta attribute', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-meta-attribute-block'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-meta-attribute-block'
+		);
+	} );
+
+	for ( const [ title, blockName ] of VARIATIONS ) {
+		test.describe( title, () => {
+			test( 'Should persist the meta attribute properly', async ( {
+				admin,
+				editor,
+				page,
+				pageUtils,
+			} ) => {
+				await admin.createNewPost();
+				await editor.insertBlock( { name: blockName } );
+				await page.keyboard.type( 'Value' );
+
+				// Regression Test: Previously the caret would wrongly reset to the end
+				// of any input for meta-sourced attributes, due to syncing behavior of
+				// meta attribute updates.
+				//
+				// See: https://github.com/WordPress/gutenberg/issues/15739
+				await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+				await page.keyboard.type( 'Meta ' );
+
+				await editor.saveDraft();
+				await page.reload();
+
+				const block = page.getByRole( 'document', {
+					name: `Block: Test Meta Attribute Block (${ title })`,
+				} );
+				await expect( block ).toBeVisible();
+				await expect( block.locator( '.my-meta-input' ) ).toHaveValue(
+					'Meta Value'
+				);
+			} );
+
+			test( 'Should use the same value in all the blocks', async ( {
+				admin,
+				editor,
+				page,
+			} ) => {
+				await admin.createNewPost();
+				await editor.insertBlock( { name: blockName } );
+				await editor.insertBlock( { name: blockName } );
+				await editor.insertBlock( { name: blockName } );
+				await page.keyboard.type( 'Meta Value' );
+
+				const inputs = await page.locator( '.my-meta-input' ).all();
+				for ( const input of inputs ) {
+					await expect( input ).toHaveValue( 'Meta Value' );
+				}
+			} );
+
+			test( 'Should persist the meta attribute properly in a different post type', async ( {
+				admin,
+				editor,
+				page,
+				pageUtils,
+			} ) => {
+				await admin.createNewPost( { postType: 'page' } );
+				await editor.insertBlock( { name: blockName } );
+				await page.keyboard.type( 'Value' );
+
+				// Regression Test: Previously the caret would wrongly reset to the end
+				// of any input for meta-sourced attributes, due to syncing behavior of
+				// meta attribute updates.
+				//
+				// See: https://github.com/WordPress/gutenberg/issues/15739
+				await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+				await page.keyboard.type( 'Meta ' );
+
+				await editor.saveDraft();
+				await page.reload();
+
+				const block = page.getByRole( 'document', {
+					name: `Block: Test Meta Attribute Block (${ title })`,
+				} );
+				await expect( block ).toBeVisible();
+				await expect( block.locator( '.my-meta-input' ) ).toHaveValue(
+					'Meta Value'
+				);
+			} );
+		} );
+	}
+} );
diff --git a/test/e2e/specs/editor/plugins/meta-boxes.spec.js b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
new file mode 100644
index 00000000000000..511b3837f80303
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/meta-boxes.spec.js
@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Meta boxes', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-plugin-meta-box' );
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-plugin-meta-box' );
+	} );
+
+	test( 'Should save the post', async ( { editor, page } ) => {
+		const saveDraft = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save draft' } );
+
+		// Save should not be an option for new empty post.
+		await expect( saveDraft ).toBeDisabled();
+
+		// Add title to enable valid non-empty post save.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello Meta' );
+
+		await expect( saveDraft ).toBeEnabled();
+
+		await editor.saveDraft();
+
+		// After saving, affirm that the button returns to Save Draft.
+		await expect( saveDraft ).toBeEnabled();
+	} );
+
+	test( 'Should render dynamic blocks when the meta box uses the excerpt for front end rendering', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		// Publish a post so there's something for the latest posts dynamic block to render.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'A published post' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Hello there!' );
+		await editor.publishPost();
+
+		// Publish a post with the latest posts dynamic block.
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Dynamic block test' );
+		await editor.insertBlock( { name: 'core/latest-posts' } );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await expect(
+			page.locator( '.entry-content .wp-block-latest-posts__post-title' )
+		).toContainText( [ 'Dynamic block test', 'A published post' ] );
+	} );
+
+	test( 'Should render the excerpt in meta based on post content if no explicit excerpt exists', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'A published post' );
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Excerpt from content.' );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await expect(
+			page.locator( 'meta[property="gutenberg:hello"]' )
+		).toHaveAttribute( 'content', 'Excerpt from content.' );
+	} );
+
+	test( 'Should render the explicitly set excerpt in meta instead of the content based one', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Excerpt from content.' );
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'A published post' );
+
+		const excerptButton = page.getByRole( 'button', {
+			name: 'Add an excerpt…',
+		} );
+		await excerptButton.click();
+
+		await page
+			.getByRole( 'textbox', { name: 'Write an Excerpt' } )
+			.fill( 'Explicitly set excerpt.' );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		await expect(
+			page.locator( 'meta[property="gutenberg:hello"]' )
+		).toHaveAttribute( 'content', 'Explicitly set excerpt.' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/nonce.spec.js b/test/e2e/specs/editor/plugins/nonce.spec.js
index d29911b230ea96..1fbb6add87ff7b 100644
--- a/test/e2e/specs/editor/plugins/nonce.spec.js
+++ b/test/e2e/specs/editor/plugins/nonce.spec.js
@@ -12,11 +12,13 @@ test.describe( 'Nonce', () => {
 		page,
 		admin,
 		requestUtils,
+		editor,
 	} ) => {
 		await admin.createNewPost();
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeFocused();
 		await page.keyboard.press( 'Enter' );
-		// Wait until the network is idle.
-		await page.waitForLoadState( 'networkidle' );
 		await page.keyboard.type( 'test' );
 
 		/**
@@ -44,11 +46,11 @@ test.describe( 'Nonce', () => {
 					url.href.startsWith(
 						requestUtils.storageState.rootURL.slice( 0, -1 )
 					),
-				( route ) => {
+				async ( route ) => {
 					if ( refreshed ) {
-						route.continue();
+						await route.continue();
 					} else {
-						route.fulfill( {
+						await route.fulfill( {
 							status: 403,
 							contentType: 'application/json; charset=UTF-8',
 							body: JSON.stringify( {
@@ -63,7 +65,7 @@ test.describe( 'Nonce', () => {
 		}
 
 		const saveDraftResponses = [];
-		page.on( 'response', async ( response ) => {
+		page.on( 'response', ( response ) => {
 			const request = response.request();
 			if (
 				request.method() === 'POST' &&
@@ -73,11 +75,8 @@ test.describe( 'Nonce', () => {
 			}
 		} );
 
-		await page.click( 'role=button[name=/Save draft/i]' );
 		// Saving draft should still succeed after retrying.
-		await expect(
-			page.locator( 'role=button[name="Dismiss this notice"i]' )
-		).toContainText( /Draft saved/i );
+		await editor.saveDraft();
 
 		// We expect a 403 status only once.
 		expect( saveDraftResponses ).toEqual( [ 403, 200 ] );
diff --git a/test/e2e/specs/editor/plugins/pattern-recursion.spec.js b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js
new file mode 100644
index 00000000000000..c688f3580c3701
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js
@@ -0,0 +1,85 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preventing Pattern Recursion (client)', () => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.evaluate( () => {
+			window.wp.data.dispatch( 'core/block-editor' ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'evil/recursive',
+						title: 'Evil recursive',
+						description: 'Evil recursive',
+						content:
+							'<!-- wp:paragraph --><p>Hello</p><!-- /wp:paragraph --><!-- wp:pattern {"slug":"evil/recursive"} /-->',
+					},
+				],
+			} );
+		} );
+	} );
+
+	test( 'prevents infinite loops due to recursive patterns', async ( {
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/pattern',
+			attributes: { slug: 'evil/recursive' },
+		} );
+		const warning = editor.canvas.getByText(
+			'Pattern "evil/recursive" cannot be rendered inside itself'
+		);
+		await expect( warning ).toBeVisible();
+	} );
+} );
+
+test.describe( 'Preventing Pattern Recursion (server)', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-protection-against-recursive-patterns'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-protection-against-recursive-patterns'
+		);
+	} );
+
+	test( 'prevents infinite loops due to recursive patterns', async ( {
+		page,
+		editor,
+	} ) => {
+		// Click the Block Inserter button
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		// Click the Patterns tab
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+		// Click the Uncategorized tab
+		await page.getByRole( 'tab', { name: 'Uncategorized' } ).click();
+		// Click the Evil recursive pattern
+		await page.getByRole( 'option', { name: 'Evil recursive' } ).click();
+		// By simply checking the editor content, we know that the pattern
+		// endpoint did not crash.
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello' },
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/plugins-api-error-boundary.spec.js b/test/e2e/specs/editor/plugins/plugins-api-error-boundary.spec.js
new file mode 100644
index 00000000000000..99423a4c247dbf
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/plugins-api-error-boundary.spec.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Plugins API Error Boundary', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-plugins-error-boundary'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-plugins-error-boundary'
+		);
+	} );
+
+	test( 'Should create notice using plugin error boundary callback', async ( {
+		admin,
+		page,
+	} ) => {
+		let hasError = false;
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'error' && msg.text().includes( 'Whoops!' ) ) {
+				hasError = true;
+			}
+		} );
+
+		await admin.createNewPost();
+
+		expect( hasError ).toBe( true );
+		await expect(
+			page.locator( '.is-error .components-notice__content' )
+		).toContainText(
+			'The "my-error-plugin" plugin has encountered an error and cannot be rendered.'
+		);
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/plugins-api.spec.js b/test/e2e/specs/editor/plugins/plugins-api.spec.js
new file mode 100644
index 00000000000000..c7f3a655e14240
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/plugins-api.spec.js
@@ -0,0 +1,254 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Plugins API', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-plugins-api'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-plugins-api'
+		);
+	} );
+
+	test.describe( 'Post Status Info', () => {
+		test( 'Should render post status info inside Document Setting sidebar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.locator( '.my-post-status-info-plugin' )
+			).toHaveText( 'My post status info' );
+		} );
+	} );
+
+	test.describe( 'Publish Panel', () => {
+		test( 'Should render publish panel inside Pre-publish sidebar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'textbox', { name: 'Add title' } )
+				.fill( 'A post' );
+
+			// Open pre-publish panel.
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Publish' } )
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor publish' } )
+					.getByRole( 'button', { name: 'My pre publish panel' } )
+			).toBeVisible();
+		} );
+
+		test( 'Should render publish panel inside Post-publish sidebar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'textbox', { name: 'Add title' } )
+				.fill( 'A post' );
+			await editor.publishPost();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor publish' } )
+					.getByRole( 'button', { name: 'My post publish panel' } )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'Sidebar', () => {
+		test( 'Should open plugins sidebar using More Menu item and render content', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Options' } )
+				.click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Plugin more menu title',
+				} )
+				.click();
+
+			const settingsSidebar = page.getByRole( 'region', {
+				name: 'Editor settings',
+			} );
+
+			await expect(
+				settingsSidebar.getByRole( 'textbox', {
+					name: 'Title',
+				} )
+			).toBeVisible();
+			await expect(
+				settingsSidebar.getByRole( 'button', {
+					name: 'Reset',
+				} )
+			).toBeVisible();
+		} );
+
+		test( 'Should be pinned by default and can be opened and closed using pinned items', async ( {
+			page,
+		} ) => {
+			const pinnedButton = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Plugin title' } );
+			const pluginField = page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByRole( 'textbox', {
+					name: 'Title',
+				} );
+
+			await pinnedButton.click();
+			await expect( pluginField ).toBeVisible();
+
+			await pinnedButton.click();
+			await expect( pluginField ).toBeHidden();
+		} );
+
+		test( 'Can be pinned and unpinned', async ( { page } ) => {
+			const pinnedButton = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Plugin title' } );
+
+			await pinnedButton.click();
+			await page
+				.getByRole( 'button', { name: 'Unpin from toolbar' } )
+				.click();
+
+			await expect( pinnedButton ).toBeHidden();
+
+			await page.getByRole( 'button', { name: 'Close plugin' } ).click();
+			await page.reload();
+
+			await expect( pinnedButton ).toBeHidden();
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Options' } )
+				.click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Plugin more menu title',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', { name: 'Pin to toolbar' } )
+				.click();
+
+			await expect( pinnedButton ).toBeVisible();
+			await page.reload();
+			await expect( pinnedButton ).toBeVisible();
+		} );
+
+		test( 'Should close plugins sidebar using More Menu item', async ( {
+			page,
+		} ) => {
+			const options = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Options' } );
+			const moreMenuItem = page.getByRole( 'menuitemcheckbox', {
+				name: 'Plugin more menu title',
+			} );
+			const pluginField = page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByRole( 'textbox', {
+					name: 'Title',
+				} );
+
+			await options.click();
+			await moreMenuItem.click();
+			await expect( pluginField ).toBeVisible();
+
+			await options.click();
+			await moreMenuItem.click();
+			await expect( pluginField ).toBeHidden();
+		} );
+
+		test( 'Should open plugins sidebar using More Menu item on smaller screens', async ( {
+			page,
+			pageUtils,
+		} ) => {
+			await pageUtils.setBrowserViewport( 'medium' );
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Options' } )
+				.click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Plugin more menu title',
+				} )
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'region', {
+						name: 'Editor settings',
+					} )
+					.getByRole( 'textbox', {
+						name: 'Title',
+					} )
+			).toBeVisible();
+
+			await pageUtils.setBrowserViewport( 'large' );
+		} );
+	} );
+
+	test.describe( 'Document Setting Custom Panel', () => {
+		test( 'Should render a custom panel inside Document Setting sidebar', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'button', { name: 'My Custom Panel' } )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'Preview Menu Item', () => {
+		test( 'Should render and interact with PluginPreviewMenuItem', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.locator( '.editor-preview-dropdown__toggle' )
+				.click();
+
+			const customPreviewItem = page.getByRole( 'menuitem', {
+				name: 'Custom Preview',
+			} );
+
+			await expect( customPreviewItem ).toBeVisible();
+
+			await customPreviewItem.click();
+
+			await expect( customPreviewItem ).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/post-type-locking.spec.js b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
new file mode 100644
index 00000000000000..ff02d18c51464b
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
@@ -0,0 +1,465 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post-type locking', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-cpt-locking'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-cpt-locking'
+		);
+	} );
+
+	test.describe( 'template_lock all', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'locked-all-post' } );
+		} );
+
+		test( 'should not allow blocks to be removed', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.fill( 'p1' );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should not allow blocks to be moved', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+		} );
+
+		test( 'should not error when deleting the contents of a paragraph', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			const firstParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first();
+			await firstParagraph.click();
+
+			const textToType = 'Paragraph';
+			await page.keyboard.type( textToType );
+			await pageUtils.pressKeys( 'Backspace', textToType.length + 1 );
+
+			await expect( firstParagraph ).toHaveText( '' );
+		} );
+
+		test( 'should insert line breaks when using enter and shift-enter', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.click();
+
+			await page.keyboard.type( 'First line' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'Second line' );
+			await pageUtils.pressKeys( 'shift+Enter' );
+			await page.keyboard.type( 'Third line' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/image',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'First line<br>Second line<br>Third line',
+					},
+				},
+				{
+					name: 'core/quote',
+				},
+				{
+					name: 'core/columns',
+				},
+			] );
+		} );
+
+		test( 'should show invalid template notice if the blocks do not match the templte', async ( {
+			page,
+			pageUtils,
+		} ) => {
+			// Open the code editor.
+			await pageUtils.pressKeys( 'secondary+M' );
+
+			// Modify template.
+			await page.getByRole( 'textbox', { name: 'Type text or HTML' } )
+				.fill( `<!-- wp:paragraph {"placeholder":"Add a description"} -->
+<p></p>
+<!-- /wp:paragraph -->` );
+
+			// Go back to the visual editor.
+			await pageUtils.pressKeys( 'secondary+M' );
+
+			await expect(
+				page.locator(
+					'.editor-template-validation-notice .components-notice__content'
+				)
+			).toContainText(
+				'The content of your post doesn’t match the template assigned to your post type.'
+			);
+		} );
+	} );
+
+	test.describe( 'template_lock insert', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'locked-insert-post' } );
+		} );
+
+		test( 'should not allow blocks to be removed', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.fill( 'p1' );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should allow blocks to be moved', async ( { editor, page } ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.click();
+
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Move up' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/image',
+				},
+				{
+					name: 'core/quote',
+				},
+				{
+					name: 'core/columns',
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'template_lock false', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'not-locked-post' } );
+		} );
+
+		test( 'should allow blocks to be inserted', async ( {
+			editor,
+			page,
+		} ) => {
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Document tools' } )
+					.getByRole( 'button', {
+						name: 'Block Inserter',
+						exact: true,
+					} )
+			).toBeEnabled();
+
+			await editor.insertBlock( { name: 'core/list' } );
+			await editor.canvas
+				.getByRole( 'textbox', { name: 'List text' } )
+				.fill( 'List content' );
+
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Block: List item',
+				} )
+			).toHaveText( 'List content' );
+		} );
+
+		test( 'should allow blocks to be removed', async ( { editor } ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.fill( 'p1' );
+
+			await editor.clickBlockOptionsMenuItem( 'Delete' );
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/image',
+				},
+				{
+					name: 'core/quote',
+				},
+				{
+					name: 'core/columns',
+				},
+			] );
+		} );
+
+		test( 'should allow blocks to be moved', async ( { editor, page } ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.click();
+
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Move up' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/image',
+				},
+				{
+					name: 'core/quote',
+				},
+				{
+					name: 'core/columns',
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'template_lock all unlocked group', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'l-post-ul-group' } );
+		} );
+
+		test( 'should allow blocks to be removed', async ( { editor } ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.fill( 'p1' );
+
+			await editor.clickBlockOptionsMenuItem( 'Delete' );
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/quote',
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'should allow blocks to be moved', async ( { editor, page } ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.click();
+
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Move up' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+						},
+						{
+							name: 'core/quote',
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'should allow blocks to be switched to other types', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.first()
+				.fill( 'p1' );
+
+			const blockSwitcher = page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Paragraph' } );
+
+			// Verify the block switcher exists.
+			await expect( blockSwitcher ).toHaveAttribute(
+				'aria-haspopup',
+				'true'
+			);
+
+			// Verify the correct block transforms appear.
+			await blockSwitcher.click();
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Paragraph' } )
+					.getByRole( 'menuitem' )
+			).toHaveText( [
+				'Heading',
+				'List',
+				'Quote',
+				'Buttons',
+				'Code',
+				'Columns',
+				'Details',
+				'Group',
+				'Preformatted',
+				'Pullquote',
+				'Verse',
+			] );
+		} );
+	} );
+
+	test.describe( 'template_lock all locked group', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'l-post-l-group' } );
+		} );
+
+		test( 'should not allow blocks to be removed', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.fill( 'p1' );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should not allow blocks to be moved', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'template_lock all inherited group', () => {
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'l-post-i-group' } );
+		} );
+
+		test( 'should not allow blocks to be removed', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.fill( 'p1' );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should not allow blocks to be moved', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Empty block',
+				} )
+				.last()
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/post-type-templates.spec.js b/test/e2e/specs/editor/plugins/post-type-templates.spec.js
new file mode 100644
index 00000000000000..a95f826c1f74c7
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/post-type-templates.spec.js
@@ -0,0 +1,141 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post type templates', () => {
+	test.describe( 'Using a CPT with a predefined template', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-plugin-templates'
+			);
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'book' } );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-plugin-templates'
+			);
+		} );
+
+		test( 'Should add a custom post types with a predefined template', async ( {
+			editor,
+		} ) => {
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		} );
+
+		test( 'Should respect user edits to not re-apply template after save (single block removal)', async ( {
+			page,
+			editor,
+		} ) => {
+			const beforeContent = await editor.getEditedPostContent();
+
+			// Remove a block from the template to verify that it's not
+			// re-added after saving and reloading the editor.
+			await editor.canvas
+				.locator( 'role=textbox[name="Add title"i]' )
+				.focus();
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'Backspace' );
+			await editor.saveDraft();
+			await page.reload();
+
+			const expectedContent = await page.evaluate( ( content ) => {
+				const blocks = window.wp.blocks.parse( content );
+				blocks.splice( 0, 1 );
+				return window.wp.blocks.serialize( blocks );
+			}, beforeContent );
+
+			await expect
+				.poll( editor.getEditedPostContent )
+				.toBe( expectedContent );
+		} );
+
+		test( 'Should respect user edits to not re-apply template after save (full delete)', async ( {
+			page,
+			pageUtils,
+			editor,
+		} ) => {
+			// Remove all blocks from the template to verify that they're not
+			// re-added after saving and reloading the editor.
+			await editor.canvas
+				.locator( 'role=textbox[name="Add title"i]' )
+				.fill( 'My Empty Book' );
+			await page.keyboard.press( 'ArrowDown' );
+			await pageUtils.pressKeys( 'primary+A' );
+			await page.keyboard.press( 'Backspace' );
+			await editor.saveDraft();
+			await page.reload();
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+	} );
+
+	test.describe( 'With default post format assigned', () => {
+		const STANDARD_FORMAT_VALUE = '0';
+
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-plugin-post-formats-support'
+			);
+			await requestUtils.updateSiteSettings( {
+				default_post_format: 'image',
+			} );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.updateSiteSettings( {
+				default_post_format: STANDARD_FORMAT_VALUE,
+			} );
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-plugin-post-formats-support'
+			);
+		} );
+
+		test( 'should populate new post with default block for format', async ( {
+			admin,
+			editor,
+		} ) => {
+			await admin.createNewPost();
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->` );
+		} );
+
+		test( 'should not populate edited post with default block for format', async ( {
+			admin,
+			page,
+			editor,
+		} ) => {
+			await admin.createNewPost();
+
+			// Remove the default block template to verify that it's not
+			// re-added after saving and reloading the editor.
+			await editor.canvas
+				.locator( 'role=textbox[name="Add title"i]' )
+				.fill( 'My Image Format' );
+			await editor.canvas
+				.locator( 'role=document[name="Block: Image"i]' )
+				.focus();
+			await page.keyboard.press( 'Backspace' );
+			await editor.saveDraft();
+			await page.reload();
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+
+		test( 'should not populate new page with default block for format', async ( {
+			admin,
+			editor,
+		} ) => {
+			await admin.createNewPost( { postType: 'page' } );
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js b/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
index 2ec62ffd056d31..a7e6f970179a4a 100644
--- a/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
+++ b/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Register block type hooks', () => {
 	} );
 
 	test( 'has a custom category for Paragraph block', async ( { page } ) => {
-		await page.click( 'role=button[name="Toggle block inserter"i]' );
+		await page.click( 'role=button[name="Block Inserter"i]' );
 
 		expect(
 			page.locator(
diff --git a/test/e2e/specs/editor/plugins/templates.spec.js b/test/e2e/specs/editor/plugins/templates.spec.js
deleted file mode 100644
index bab5cdd739baf6..00000000000000
--- a/test/e2e/specs/editor/plugins/templates.spec.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'templates', () => {
-	test.describe( 'Using a CPT with a predefined template', () => {
-		test.beforeAll( async ( { requestUtils } ) => {
-			await requestUtils.activatePlugin(
-				'gutenberg-test-plugin-templates'
-			);
-		} );
-
-		test.beforeEach( async ( { admin } ) => {
-			await admin.createNewPost( { postType: 'book' } );
-		} );
-
-		test.afterAll( async ( { requestUtils } ) => {
-			await requestUtils.deactivatePlugin(
-				'gutenberg-test-plugin-templates'
-			);
-		} );
-
-		test( 'Should add a custom post types with a predefined template', async ( {
-			editor,
-		} ) => {
-			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		test( 'Should respect user edits to not re-apply template after save (single block removal)', async ( {
-			page,
-			editor,
-		} ) => {
-			const beforeContent = await editor.getEditedPostContent();
-
-			// Remove a block from the template to verify that it's not
-			// re-added after saving and reloading the editor.
-			await page.focus( 'role=textbox[name="Add title"i]' );
-			await page.keyboard.press( 'ArrowDown' );
-			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
-			await page.reload();
-
-			const expectedContent = await page.evaluate( ( content ) => {
-				const blocks = window.wp.blocks.parse( content );
-				blocks.splice( 0, 1 );
-				return window.wp.blocks.serialize( blocks );
-			}, beforeContent );
-
-			await expect
-				.poll( editor.getEditedPostContent )
-				.toBe( expectedContent );
-		} );
-
-		test( 'Should respect user edits to not re-apply template after save (full delete)', async ( {
-			page,
-			pageUtils,
-			editor,
-		} ) => {
-			// Remove all blocks from the template to verify that they're not
-			// re-added after saving and reloading the editor.
-			await page.fill(
-				'role=textbox[name="Add title"i]',
-				'My Empty Book'
-			);
-			await page.keyboard.press( 'ArrowDown' );
-			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
-			await page.reload();
-
-			await expect.poll( editor.getEditedPostContent ).toBe( '' );
-		} );
-	} );
-
-	test.describe( 'With default post format assigned', () => {
-		const STANDARD_FORMAT_VALUE = '0';
-
-		test.beforeAll( async ( { requestUtils } ) => {
-			await requestUtils.activatePlugin(
-				'gutenberg-test-plugin-post-formats-support'
-			);
-			await requestUtils.updateSiteSettings( {
-				default_post_format: 'image',
-			} );
-		} );
-
-		test.afterAll( async ( { requestUtils } ) => {
-			await requestUtils.updateSiteSettings( {
-				default_post_format: STANDARD_FORMAT_VALUE,
-			} );
-			await requestUtils.deactivatePlugin(
-				'gutenberg-test-plugin-post-formats-support'
-			);
-		} );
-
-		test( 'should populate new post with default block for format', async ( {
-			admin,
-			editor,
-		} ) => {
-			await admin.createNewPost();
-
-			await expect.poll( editor.getEditedPostContent )
-				.toBe( `<!-- wp:image -->
-<figure class="wp-block-image"><img alt=""/></figure>
-<!-- /wp:image -->` );
-		} );
-
-		test( 'should not populate edited post with default block for format', async ( {
-			admin,
-			page,
-			editor,
-		} ) => {
-			await admin.createNewPost();
-
-			// Remove the default block template to verify that it's not
-			// re-added after saving and reloading the editor.
-			await page.fill(
-				'role=textbox[name="Add title"i]',
-				'My Image Format'
-			);
-			await page.focus( 'role=document[name="Block: Image"i]' );
-			await page.keyboard.press( 'Backspace' );
-			await page.click( 'role=button[name="Save draft"i]' );
-			await expect(
-				page.locator(
-					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
-				)
-			).toBeVisible();
-			await page.reload();
-
-			await expect.poll( editor.getEditedPostContent ).toBe( '' );
-		} );
-
-		test( 'should not populate new page with default block for format', async ( {
-			admin,
-			editor,
-		} ) => {
-			await admin.createNewPost( { postType: 'page' } );
-
-			await expect.poll( editor.getEditedPostContent ).toBe( '' );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
index 27cf0b7b160bde..c5eafdafe918db 100644
--- a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -20,28 +20,26 @@ test.describe( 'WP Editor Meta Boxes', () => {
 		await admin.createNewPost();
 
 		// Add title to enable valid non-empty post save.
-		await page.type( 'role=textbox[name="Add title"i]', 'Hello Meta' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'Hello Meta' );
 
-		// Type something.
-		await page.click( 'role=button[name="Text"i]' );
-		await page.click( '#test_tinymce_id' );
-		await page.keyboard.type( 'Typing in a metabox' );
-		await page.type( '#test_tinymce_id-html', 'Typing in a metabox' );
-		await page.click( 'role=button[name="Visual"i]' );
+		// Switch tinymce to Text mode, first waiting for it to initialize
+		// because otherwise it will flip back to Visual mode once initialized.
+		await page.locator( '#test_tinymce_id_ifr' ).waitFor();
+		await page.locator( 'role=button[name="Text"i]' ).click();
 
-		await editor.publishPost();
-
-		// Close the publish panel so that it won't cover the tinymce editor.
-		await page.click(
-			'role=region[name="Editor publish"i] >> role=button[name="Close panel"i]'
-		);
+		// Type something in the tinymce Text mode textarea.
+		const metaBoxField = page.locator( '#test_tinymce_id' );
+		await metaBoxField.type( 'Typing in a metabox' );
 
-		await expect( page.locator( '.edit-post-layout' ) ).toBeVisible();
+		// Switch tinymce back to Visual mode.
+		await page.locator( 'role=button[name="Visual"i]' ).click();
 
-		await page.click( 'role=button[name="Text"i]' );
+		await editor.publishPost();
+		await page.reload();
 
-		// Expect the typed text on the tinymce editor
-		const content = page.locator( '#test_tinymce_id' );
-		await expect( content ).toHaveValue( 'Typing in a metabox' );
+		// Expect the typed text in the tinymce Text mode textarea.
+		await expect( metaBoxField ).toHaveValue( 'Typing in a metabox' );
 	} );
 } );
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/__snapshots__/Copy-cut-paste-should-copy-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-copy-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
index 3dac62748e8e02..4d6ec0a8f5f5b5 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-copy-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-copy-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
@@ -3,9 +3,5 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Copy - collapsed selection</p>
+<p>2Copy - collapsed selection</p>
 <!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
index ad1a1ef6e5c723..4a58677b62c4c3 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-and-paste-individual-blocks-with-collapsed-selection-2-chromium.txt
@@ -1,7 +1,3 @@
 <!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Cut - collapsed selection</p>
+<p>2Cut - collapsed selection</p>
 <!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-1-chromium.txt
index aac1718cdb7ffc..beef4f8f37b1f3 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-1-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-1-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class="wp-block-heading">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-2-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-2-chromium.txt
index ba33f4cbc7c75f..4423570da521f7 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-2-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-cut-partial-selection-and-merge-like-a-normal-delete---not-forward-2-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:heading -->
-<h2>ading</h2>
+<h2 class="wp-block-heading">ading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -7,5 +7,5 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Heph</h2>
+<h2 class="wp-block-heading">Heph</h2>
 <!-- /wp:heading -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
new file mode 100644
index 00000000000000..73ed4090549910
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p><strong>t<a href="https://wordpress.org/gutenberg">es</a>t</strong></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-list-in-list-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-list-in-list-1-chromium.txt
new file mode 100644
index 00000000000000..7f74d7fd8b3d03
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-list-in-list-1-chromium.txt
@@ -0,0 +1,9 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>x</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>y‸</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-paragraphs-in-list-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-paragraphs-in-list-1-chromium.txt
new file mode 100644
index 00000000000000..7f74d7fd8b3d03
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-paragraphs-in-list-1-chromium.txt
@@ -0,0 +1,9 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>x</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>y‸</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-1-chromium.txt
index aac1718cdb7ffc..beef4f8f37b1f3 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-1-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-1-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class="wp-block-heading">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt
index e16ec5279cca68..2f13cd0939822f 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-plain-text-in-plain-text-context-when-cross-block-selection-is-copied-2-chromium.txt
@@ -1,5 +1,5 @@
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class="wp-block-heading">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
new file mode 100644
index 00000000000000..d46df0dfb55d44
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-preformatted-in-list-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>xy</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
index d5575ed006e9f3..753c30a0926707 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
@@ -2,10 +2,18 @@
 <p>Dummy text</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
-<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"metadata":{"categories":["posts"],"patternName":"core/query-standard-posts","name":"Standard"}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:post-title {"isLink":true} /-->
 
-<!-- wp:social-link {"url":"#","service":"chain"} /-->
+<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
 
-<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
-<!-- /wp:social-links -->
\ No newline at end of file
+<!-- wp:post-excerpt /-->
+
+<!-- wp:separator {"opacity":"css"} -->
+<hr class="wp-block-separator has-css-opacity"/>
+<!-- /wp:separator -->
+
+<!-- wp:post-date /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
index d5575ed006e9f3..753c30a0926707 100644
--- a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
+++ b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
@@ -2,10 +2,18 @@
 <p>Dummy text</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
-<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+<!-- wp:query {"queryId":1,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"metadata":{"categories":["posts"],"patternName":"core/query-standard-posts","name":"Standard"}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+<!-- wp:post-title {"isLink":true} /-->
 
-<!-- wp:social-link {"url":"#","service":"chain"} /-->
+<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
 
-<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
-<!-- /wp:social-links -->
\ No newline at end of file
+<!-- wp:post-excerpt /-->
+
+<!-- wp:separator {"opacity":"css"} -->
+<hr class="wp-block-separator has-css-opacity"/>
+<!-- /wp:separator -->
+
+<!-- wp:post-date /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-Should-navigate-inner-blocks-with-arrow-keys-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-Should-navigate-inner-blocks-with-arrow-keys-1-chromium.txt
deleted file mode 100644
index f6834177f03b73..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-Should-navigate-inner-blocks-with-arrow-keys-1-chromium.txt
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- wp:paragraph -->
-<p>First paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:paragraph -->
-<p>1st col</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:paragraph -->
-<p>2nd col</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->
-
-<!-- wp:paragraph -->
-<p>Second paragraph</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-create-valid-paragraph-blocks-when-rapidly-pressing-Enter-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-create-valid-paragraph-blocks-when-rapidly-pressing-Enter-1-chromium.txt
deleted file mode 100644
index 8b3e8afd099094..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-create-valid-paragraph-blocks-when-rapidly-pressing-Enter-1-chromium.txt
+++ /dev/null
@@ -1,43 +0,0 @@
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-around-inline-boundaries-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-around-inline-boundaries-1-chromium.txt
deleted file mode 100644
index 1ad3516b59244a..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-around-inline-boundaries-1-chromium.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:paragraph -->
-<p>FirstAfter</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Before<strong>InsideSecondInside</strong>After</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>BeforeThird</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-normal-line-height-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-normal-line-height-1-chromium.txt
deleted file mode 100644
index c5276526e35be3..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-normal-line-height-1-chromium.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-padding-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-padding-1-chromium.txt
deleted file mode 100644
index cbf68836cabedb..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-padding-1-chromium.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-side-padding-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-side-padding-1-chromium.txt
deleted file mode 100644
index 9c3517aa3a5946..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-contenteditable-with-side-padding-1-chromium.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt
deleted file mode 100644
index 0e4af197a8815d..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-navigate-empty-paragraphs-1-chromium.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-not-prematurely-multi-select-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-not-prematurely-multi-select-1-chromium.txt
deleted file mode 100644
index 21ee0884f979d1..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/Writing-Flow-should-not-prematurely-multi-select-1-chromium.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>></p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt
deleted file mode 100644
index e6b19a3a16b457..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- wp:paragraph -->
-<p>First</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt
deleted file mode 100644
index 2c788e94846abb..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:paragraph -->
-<p>12</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt
deleted file mode 100644
index cb5b5fcf148b3c..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:paragraph -->
-<p>hi-</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt
deleted file mode 100644
index 33adf8bef295a9..00000000000000
--- a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- wp:paragraph -->
-<p>hi</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>-item 1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>item 2</p>
-<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
index 7eee32af2b08eb..d8dda0cabdf843 100644
--- a/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
+++ b/test/e2e/specs/editor/various/a11y-region-navigation.spec.js
@@ -22,7 +22,18 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => {
 			attributes: { content: 'Dummy text' },
 		} );
 
-		// Navigate to first region and check that we made it.
+		const dummyParagraph = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+			.filter( { hasText: 'Dummy text' } );
+
+		await expect( dummyParagraph ).toBeFocused();
+
+		// Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field.
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
 		await page.keyboard.press( 'Control+`' );
 		const editorTopBar = page.locator(
 			'role=region[name="Editor top bar"i]'
diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js
new file mode 100644
index 00000000000000..f116476989a133
--- /dev/null
+++ b/test/e2e/specs/editor/various/a11y.spec.js
@@ -0,0 +1,233 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	// Make the viewport tall enough so that some tabs panels within the
+	// Preferences modal are not scrollable and other tab panels are.
+	viewport: {
+		width: 1280,
+		height: 1024,
+	},
+} );
+
+test.describe( 'a11y (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'navigating through the Editor regions four times should land on the Editor top bar region', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		// On a new post, initial focus is set on the Post title.
+		await expect(
+			page.locator( 'role=textbox[name=/Add title/i]' )
+		).toBeFocused();
+		// Navigate to the 'Editor settings' region.
+		await pageUtils.pressKeys( 'ctrl+`' );
+		// Navigate to the 'Editor publish' region.
+		await pageUtils.pressKeys( 'ctrl+`' );
+		// Navigate to the 'Editor footer' region.
+		await pageUtils.pressKeys( 'ctrl+`' );
+		// Navigate to the 'Editor top bar' region.
+		await pageUtils.pressKeys( 'ctrl+`' );
+
+		// This test assumes the Editor is not in Fullscreen mode. Check the
+		// first tabbable element within the 'Editor top bar' region is the
+		// 'Block Inserter' button.
+		await pageUtils.pressKeys( 'Tab' );
+		await expect(
+			page.locator( 'role=button[name=/Block Inserter/i]' )
+		).toBeFocused();
+	} );
+
+	test( 'should constrain tabbing within a modal', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		// Open keyboard shortcuts modal.
+		await pageUtils.pressKeys( 'access+h' );
+
+		const modalContent = page.locator(
+			'role=dialog[name="Keyboard shortcuts"i] >> role=document'
+		);
+
+		const closeButton = page.locator(
+			'role=dialog[name="Keyboard shortcuts"i] >> role=button[name="Close"i]'
+		);
+		// The close button should not be focused by default; this is a strange UX
+		// experience.
+		// See: https://github.com/WordPress/gutenberg/issues/9410
+		await expect( closeButton ).not.toBeFocused();
+
+		// Open keyboard shortcuts modal.
+		await pageUtils.pressKeys( 'Tab' );
+		await expect( modalContent ).toBeFocused();
+
+		await pageUtils.pressKeys( 'Tab' );
+		await expect( closeButton ).toBeFocused();
+
+		await pageUtils.pressKeys( 'Tab' );
+		await expect( modalContent ).toBeFocused();
+	} );
+
+	test( 'should return focus to the first tabbable in a modal after blurring a tabbable', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.pressKeys( 'access+h' );
+
+		// Click a non-focusable element after the last tabbable within the modal.
+		const last = page
+			.locator( 'role=dialog[name="Keyboard shortcuts"i] >> div' )
+			.last();
+		await last.click();
+
+		await pageUtils.pressKeys( 'Tab' );
+
+		await expect(
+			page.locator(
+				'role=dialog[name="Keyboard shortcuts"i] >> role=button[name="Close"i]'
+			)
+		).toBeFocused();
+	} );
+
+	test( 'should return focus to the last tabbable in a modal after blurring a tabbable and tabbing in reverse direction', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.pressKeys( 'access+h' );
+
+		// Click a non-focusable element before the first tabbable within the modal.
+		await page.click( 'role=heading[name="Keyboard shortcuts"i]' );
+
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		await expect(
+			page.locator(
+				'role=dialog[name="Keyboard shortcuts"i] >> role=button[name="Close"i]'
+			)
+		).toBeFocused();
+	} );
+
+	test( 'should make the modal content focusable when it is scrollable', async ( {
+		page,
+		pageUtils,
+		browserName,
+	} ) => {
+		// eslint-disable-next-line playwright/no-skipped-test
+		test.skip(
+			browserName === 'webkit',
+			'Known bug with focus order in Safari.'
+		);
+
+		// Note: this test depends on a particular viewport height to determine whether or not
+		// the modal content is scrollable. If this tests fails and needs to be debugged locally,
+		// double-check the viewport height when running locally versus in CI. Additionally,
+		// when adding or removing items from the preference menu, this test may need to be updated
+		// if the height of panels has changed. It would be good to find a more robust way to test
+		// this behavior.
+
+		// Open the top bar Options menu.
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+		);
+
+		// Open the Preferences modal.
+		await page.click(
+			'role=menu[name="Options"i] >> role=menuitem[name="Preferences"i]'
+		);
+
+		const preferencesModal = page.locator(
+			'role=dialog[name="Preferences"i]'
+		);
+		const preferencesModalContent =
+			preferencesModal.locator( 'role=document' );
+		const closeButton = preferencesModal.locator(
+			'role=button[name="Close"i]'
+		);
+		const generalTab = preferencesModal.locator(
+			'role=tab[name="General"i]'
+		);
+		const accessibilityTab = preferencesModal.locator(
+			'role=tab[name="Accessibility"i]'
+		);
+		const blocksTab = preferencesModal.locator(
+			'role=tab[name="Blocks"i]'
+		);
+
+		// Check initial focus is on the modal dialog container.
+		await expect( preferencesModal ).toBeFocused();
+
+		// Check the General tab panel is visible by default.
+		await expect(
+			preferencesModal.locator( 'role=tabpanel[name="General"i]' )
+		).toBeVisible();
+
+		async function clickAndFocusTab( tab ) {
+			// Some browsers, e.g. Safari, don't set focus after a click. We need
+			// to ensure focus is set to start tabbing from a predictable place
+			// in the UI. This isn't part of the user flow we want to test.
+			await tab.click();
+			await tab.focus();
+		}
+
+		// The Accessibility tab is currently short and not scrollable.
+		// Check that it cannot be focused by tabbing. Note: this test depends
+		// on a particular viewport height to determine whether or not the
+		// modal content is scrollable. If additional Accessibility options are
+		// added, then eventually this test will fail.
+		// TODO: find a more robust way to test this behavior.
+		await clickAndFocusTab( generalTab );
+		// Navigate down to the Accessibility tab.
+		await pageUtils.pressKeys( 'ArrowDown', { times: 2 } );
+		// Check the Accessibility tab panel is visible.
+		await expect(
+			preferencesModal.locator( 'role=tabpanel[name="Accessibility"i]' )
+		).toBeVisible();
+		await expect( accessibilityTab ).toBeFocused();
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( closeButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( preferencesModalContent ).not.toBeFocused();
+
+		// The Blocks tab panel content is long and scrollable.
+		// Check it's focusable.
+		await clickAndFocusTab( blocksTab );
+		// Explicitly wait for the modal content to be attached with certain attributes.
+		// This is necessary for solving a flaky result where Playwright runs too fast
+		// before DOM catching up.
+		await expect( preferencesModalContent ).toHaveAttribute(
+			'tabindex',
+			'0'
+		);
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( closeButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( preferencesModalContent ).toBeFocused();
+
+		// Make the Blocks tab panel content shorter by searching for a block
+		// that doesn't exist. The content only shows 'No blocks found' and it's
+		// not scrollable any longer. Check it's not focusable.
+		await clickAndFocusTab( blocksTab );
+		await page.type(
+			'role=searchbox[name="Search for a block"i]',
+			'qwerty'
+		);
+		await clickAndFocusTab( blocksTab );
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( closeButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Shift+Tab' );
+		await expect( preferencesModalContent ).not.toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
new file mode 100644
index 00000000000000..c7826ebf262822
--- /dev/null
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import fs from 'fs';
+import os from 'os';
+import { v4 as uuid } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'adding inline tokens', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should insert inline image', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a paragraph.
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		await page.keyboard.type( 'a ' );
+
+		await editor.showBlockToolbar();
+		await page.click( 'role=button[name="More"i]' );
+		await page.click( 'role=menuitem[name="Inline image"i]' );
+
+		const testImagePath = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'10x10_e2e_test_image_z9T8jK.png'
+		);
+		const filename = uuid();
+		const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
+		fs.copyFileSync( testImagePath, tmpFileName );
+		await page
+			.locator( '.media-modal .moxie-shim input[type=file]' )
+			.setInputFiles( tmpFileName );
+
+		// Insert the uploaded image.
+		await page.click( 'role=button[name="Select"i]' );
+
+		// Check the content.
+		const contentRegex = new RegExp(
+			`a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?>`
+		);
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: expect.stringMatching( contentRegex ) },
+			},
+		] );
+
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.locator( 'role=spinbutton[name="Width"i]' )
+		).toBeFocused();
+		await page.fill( 'role=spinbutton[name="Width"i]', '20' );
+		await page.fill( 'role=textbox[name="Alternative text"i]', 'Alt' );
+		await page.click( 'role=button[name="Apply"i]' );
+
+		// Check the content.
+		const contentRegex2 = new RegExp(
+			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt="Alt"\\/?>`
+		);
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: expect.stringMatching( contentRegex2 ) },
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/adding-patterns.spec.js b/test/e2e/specs/editor/various/adding-patterns.spec.js
new file mode 100644
index 00000000000000..3226965b18d703
--- /dev/null
+++ b/test/e2e/specs/editor/various/adding-patterns.spec.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'adding patterns', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should insert a block pattern', async ( { page, editor } ) => {
+		await page.getByLabel( 'Block Inserter' ).click();
+
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
+			'Standard'
+		);
+
+		await page.getByRole( 'option', { name: 'Standard' } ).click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/query',
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js
new file mode 100644
index 00000000000000..01ca5ba0480c3a
--- /dev/null
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Allowed Patterns', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-allowed-patterns' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-allowed-patterns'
+		);
+	} );
+
+	test( 'should show all patterns by default', async ( { admin, page } ) => {
+		await admin.createNewPost();
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		await page
+			.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Test:' );
+
+		await expect(
+			page
+				.getByRole( 'listbox', { name: 'Block patterns' } )
+				.getByRole( 'option' )
+		).toHaveText( [
+			'Test: Single heading',
+			'Test: Single paragraph',
+			'Test: Paragraph inside group',
+		] );
+	} );
+
+	test.describe( 'with a small subset of allowed blocks', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-allowed-patterns-disable-blocks'
+			);
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-allowed-patterns-disable-blocks'
+			);
+		} );
+
+		test( 'should hide patterns with only hidden blocks', async ( {
+			admin,
+			page,
+		} ) => {
+			await admin.createNewPost();
+			await page
+				.getByRole( 'toolbar', { name: 'Document tools' } )
+				.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+				.click();
+
+			await page
+				.getByRole( 'region', {
+					name: 'Block Library',
+				} )
+				.getByRole( 'searchbox', {
+					name: 'Search',
+				} )
+				.fill( 'Test:' );
+
+			await expect(
+				page
+					.getByRole( 'listbox', { name: 'Block patterns' } )
+					.getByRole( 'option' )
+			).toHaveText( [ 'Test: Single heading' ] );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
index 67270fb2cc3570..059f3a73ee13d8 100644
--- a/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
+++ b/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
@@ -47,7 +47,7 @@ const userList = [
 		password: 'sm1lingsmyfavorite',
 	},
 ];
-test.describe( 'Autocomplete', () => {
+test.describe( 'Autocomplete (@firefox, @webkit)', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
 		await Promise.all(
 			userList.map( ( user ) =>
@@ -57,12 +57,14 @@ test.describe( 'Autocomplete', () => {
 				} )
 			)
 		);
+		await requestUtils.activateTheme( 'emptytheme' );
 		await requestUtils.activatePlugin( 'gutenberg-test-autocompleter' );
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllUsers();
 		await requestUtils.deactivatePlugin( 'gutenberg-test-autocompleter' );
+		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
 	test.beforeEach( async ( { admin } ) => {
@@ -98,11 +100,30 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( testData.triggerString );
 			await expect(
 				page.locator( `role=option[name="${ testData.optionText }"i]` )
 			).toBeVisible();
+			const ariaOwns = await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => {
+					return document.activeElement.getAttribute( 'aria-owns' );
+				} );
+			const ariaActiveDescendant = await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => {
+					return document.activeElement.getAttribute(
+						'aria-activedescendant'
+					);
+				} );
+			// Ensure `aria-owns` is part of the same document and ensure the
+			// selected option is equal to the active descendant.
+			await expect(
+				editor.canvas.locator( `#${ ariaOwns } [aria-selected="true"]` )
+			).toHaveAttribute( 'id', ariaActiveDescendant );
 			await page.keyboard.press( 'Enter' );
 			await page.keyboard.type( '.' );
 
@@ -131,9 +152,11 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( 'Stuck in the middle with you.' );
-			await pageUtils.pressKeyTimes( 'ArrowLeft', 'you.'.length );
+			await pageUtils.pressKeys( 'ArrowLeft', { times: 'you.'.length } );
 			await page.keyboard.type( testData.triggerString );
 			await expect(
 				page.locator( `role=option[name="${ testData.optionText }"i]` )
@@ -169,7 +192,9 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( testData.firstTriggerString );
 			await expect(
 				page.locator(
@@ -209,15 +234,16 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( testData.triggerString );
 			await expect(
 				page.locator( `role=option[name="${ testData.optionText }"i]` )
 			).toBeVisible();
-			await page;
-			page.locator(
-				`role=option[name="${ testData.optionText }"i]`
-			).click();
+			await page
+				.locator( `role=option[name="${ testData.optionText }"i]` )
+				.click();
 
 			await expect
 				.poll( editor.getEditedPostContent )
@@ -247,12 +273,14 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( testData.triggerString );
 			await expect(
 				page.locator( `role=option[name="${ testData.optionText }"i]` )
 			).toBeVisible();
-			await pageUtils.pressKeyTimes( 'ArrowDown', 6 );
+			await pageUtils.pressKeys( 'ArrowDown', { times: 6 } );
 			await page.keyboard.press( 'Enter' );
 
 			await expect
@@ -282,7 +310,9 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 			await page.keyboard.type( testData.triggerString );
 			await expect(
 				page.locator( `role=option[name="${ testData.optionText }"i]` )
@@ -301,7 +331,9 @@ test.describe( 'Autocomplete', () => {
 				page,
 				editor,
 			} ) => {
-				await page.click( 'role=button[name="Add default block"i]' );
+				await editor.canvas
+					.locator( 'role=button[name="Add default block"i]' )
+					.click();
 				// The 'Grapes' option is disabled in our test plugin, so it should not insert the grapes emoji
 				await page.keyboard.type( 'Sorry, we are all out of ~g' );
 				await expect(
@@ -367,7 +399,9 @@ test.describe( 'Autocomplete', () => {
 <!-- /wp:paragraph -->`;
 			}
 
-			await page.click( 'role=button[name="Add default block"i]' );
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
 
 			for ( let i = 0; i < 4; i++ ) {
 				await page.keyboard.type( testData.triggerString );
@@ -387,26 +421,155 @@ test.describe( 'Autocomplete', () => {
 		} );
 	} );
 
+	test( `should insert mention in a table block`, async ( {
+		page,
+		editor,
+	} ) => {
+		// Insert table block.
+		await editor.insertBlock( { name: 'core/table' } );
+
+		// Create the table.
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
+
+		// Select the first cell.
+		await editor.canvas
+			.locator( 'role=textbox[name="Body cell text"i] >> nth=0' )
+			.click();
+
+		// Type autocomplete text.
+		await page.keyboard.type( '@j' );
+
+		// Verify that option is selected.
+		const selectedOption = page.getByRole( 'option', {
+			name: 'Jane Doe',
+			selected: true,
+		} );
+		await expect( selectedOption ).toBeVisible();
+
+		// Insert the option.
+		await selectedOption.click();
+
+		// Verify it's been inserted.
+		const snapshot = `<!-- wp:table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>@testuser</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<!-- /wp:table -->`;
+		await expect.poll( editor.getEditedPostContent ).toBe( snapshot );
+	} );
+
 	// The following test concerns an infinite loop regression (https://github.com/WordPress/gutenberg/issues/41709).
 	// When present, the regression will cause this test to time out.
 	test( 'should insert elements from multiple completers in a single block', async ( {
 		page,
 		editor,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+
 		await page.keyboard.type( '@fr' );
 		await expect(
-			page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+			page.getByRole( 'option', {
+				name: 'Frodo Baggins',
+				selected: true,
+			} )
 		).toBeVisible();
+
 		await page.keyboard.press( 'Enter' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '@ringbearer' },
+			},
+		] );
+
 		await page.keyboard.type( ' +bi' );
 		await expect(
-			page.locator( 'role=option', { hasText: 'Bilbo Baggins' } )
+			page.getByRole( 'option', {
+				name: 'Bilbo Baggins',
+				selected: true,
+			} )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
-		await expect.poll( editor.getEditedPostContent )
-			.toBe( `<!-- wp:paragraph -->
-<p>@ringbearer +thebetterhobbit</p>
-<!-- /wp:paragraph -->` );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '@ringbearer +thebetterhobbit' },
+			},
+		] );
+	} );
+
+	test( 'should hide UI when selection changes (by keyboard)', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '@fr' );
+		await expect(
+			page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+		).toBeVisible();
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect(
+			page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+		).toBeHidden();
+	} );
+
+	test( 'should hide UI when selection changes (by mouse)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '@' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( 'f' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( 'r' );
+		await expect(
+			page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+		).toBeVisible();
+		// Use the strong tag to move the selection by mouse within the mention.
+		await editor.canvas
+			.locator( '[data-type="core/paragraph"] strong' )
+			.click();
+		await expect(
+			page.locator( 'role=option', { hasText: 'Frodo Baggins' } )
+		).toBeHidden();
+	} );
+
+	test( 'should allow speaking number of initial results', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '/' );
+		await expect(
+			page.locator( `role=option[name="Image"i]` )
+		).toBeVisible();
+		// Get the assertive live region screen reader announcement.
+		await expect(
+			page.getByText(
+				'Initial 9 results loaded. Type to filter all available results. Use up and down arrow keys to navigate.'
+			)
+		).toBeVisible();
+
+		await page.keyboard.type( 'heading' );
+		await expect(
+			page.locator( `role=option[name="Heading"i]` )
+		).toBeVisible();
+		// Get the assertive live region screen reader announcement.
+		await expect(
+			page.getByText(
+				'2 results found, use up and down arrow keys to navigate.'
+			)
+		).toBeVisible();
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/autosave.spec.js b/test/e2e/specs/editor/various/autosave.spec.js
new file mode 100644
index 00000000000000..01d53f0bf2d085
--- /dev/null
+++ b/test/e2e/specs/editor/various/autosave.spec.js
@@ -0,0 +1,378 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Autosave', () => {
+	test.beforeEach( async ( { admin, page } ) => {
+		await admin.createNewPost();
+		await page.evaluate( () => window.sessionStorage.clear() );
+	} );
+
+	test.afterEach( async ( { page } ) => {
+		await page.evaluate( () => window.sessionStorage.clear() );
+	} );
+
+	test( 'should save to sessionStorage', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		const autosave = await page.evaluate( () => {
+			const postId = window.wp.data
+				.select( 'core/editor' )
+				.getCurrentPostId();
+
+			return window.sessionStorage.getItem(
+				`wp-autosave-block-editor-post-${
+					postId ? postId : 'auto-draft'
+				}`
+			);
+		} );
+
+		const { content } = JSON.parse( autosave );
+		expect( content ).toBe( `<!-- wp:paragraph -->
+<p>before save after save</p>
+<!-- /wp:paragraph -->` );
+	} );
+
+	test( 'should recover from sessionStorage', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		// Trigger local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+		// Reload without saving on the server.
+		await page.reload();
+
+		await expect(
+			page.locator( '.components-notice__content' )
+		).toContainText(
+			'The backup of this post in your browser is different from the version below.'
+		);
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before save' },
+			},
+		] );
+
+		await page
+			.getByRole( 'button', { name: 'Restore the backup' } )
+			.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before save after save' },
+			},
+		] );
+	} );
+
+	test( "shouldn't contaminate other posts", async ( {
+		admin,
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 1 );
+
+		await page.reload();
+		await expect(
+			page.locator( '.components-notice__content' )
+		).toContainText(
+			'The backup of this post in your browser is different from the version below.'
+		);
+
+		await admin.createNewPost();
+		await expect(
+			page.locator( '.components-notice__content' )
+		).toBeHidden();
+	} );
+
+	test( 'should clear local autosave after successful remote autosave', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		// Trigger local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBeGreaterThanOrEqual( 1 );
+
+		// Trigger remote autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave()
+		);
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 0 );
+	} );
+
+	test( "shouldn't clear local autosave if remote autosave fails", async ( {
+		editor,
+		context,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		// Trigger local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBeGreaterThanOrEqual( 1 );
+
+		// Intercept autosave request and abort it.
+		await context.setOffline( true );
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave()
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 1 );
+	} );
+
+	test( 'should clear local autosave after successful save', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		const notice = page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } );
+
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await notice.waitFor();
+		await page.keyboard.type( ' after save' );
+		await notice.click();
+
+		// Trigger local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBeGreaterThanOrEqual( 1 );
+
+		await pageUtils.pressKeys( 'primary+s' );
+		await notice.waitFor();
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 0 );
+	} );
+
+	test( "shouldn't clear local autosave if save fails", async ( {
+		editor,
+		context,
+		page,
+		pageUtils,
+	} ) => {
+		const notice = page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } );
+
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await notice.waitFor();
+		await page.keyboard.type( ' after save' );
+		await notice.click();
+
+		// Trigger local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBeGreaterThanOrEqual( 1 );
+
+		await context.setOffline( true );
+		await pageUtils.pressKeys( 'primary+s' );
+
+		await expect(
+			page.locator( '.components-notice__content' )
+		).toContainText( 'Updating failed. You are probably offline.' );
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 1 );
+	} );
+
+	// See https://github.com/WordPress/gutenberg/pull/17501.
+	test( "shouldn't conflict with server-side autosave", async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'before save' );
+		await editor.publishPost();
+
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await paragraph.click();
+		await page.keyboard.type( ' after save' );
+
+		// Trigger remote autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave()
+		);
+
+		await expect
+			.poll( async () => {
+				return await page.evaluate( () => {
+					const postId = window.wp.data
+						.select( 'core/editor' )
+						.getCurrentPostId();
+					const autosaves = window.wp.data
+						.select( 'core' )
+						.getAutosaves( 'post', postId );
+
+					return autosaves?.length ?? 0;
+				} );
+			} )
+			.toBeGreaterThanOrEqual( 1 );
+
+		// Force conflicting local autosave.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBeGreaterThanOrEqual( 1 );
+
+		await page.reload();
+		await page.waitForFunction( () => window?.wp?.data );
+
+		// FIXME: Occasionally, upon reload, there is no server-provided
+		// autosave value available, despite our having previously explicitly
+		// autosaved. The reasons for this are still unknown. Since this is
+		// unrelated to *local* autosave, until we can understand them, we'll
+		// drop this test's expectations if we don't have an autosave object
+		// available.
+		const stillHasRemoteAutosave = await page.evaluate(
+			() =>
+				window.wp.data.select( 'core/editor' ).getEditorSettings()
+					.autosave
+		);
+		if ( ! stillHasRemoteAutosave ) {
+			return;
+		}
+
+		// Only remote autosave notice should be applied.
+		await expect(
+			page.locator( '.components-notice__content' )
+		).toContainText(
+			'There is an autosave of this post that is more recent than the version below.'
+		);
+	} );
+
+	test.skip( 'should clear sessionStorage upon user logout', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'before save' );
+		await pageUtils.pressKeys( 'primary+s' );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Draft saved' } )
+			.waitFor();
+		await page.keyboard.type( ' after save' );
+
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave( { local: true } )
+		);
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 1 );
+
+		await page.locator( '#wp-admin-bar-my-account' ).hover();
+		await page.locator( '#wp-admin-bar-logout' ).click();
+
+		expect(
+			await page.evaluate( () => window.sessionStorage.length )
+		).toBe( 0 );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
new file mode 100644
index 00000000000000..033a69e2d61707
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
@@ -0,0 +1,1210 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Registered sources', () => {
+	let imagePlaceholderSrc;
+	let testingImgSrc;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+		await requestUtils.deleteAllMedia();
+		const placeholderMedia = await requestUtils.uploadMedia(
+			path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
+		);
+		imagePlaceholderSrc = placeholderMedia.source_url;
+
+		const testingImgMedia = await requestUtils.uploadMedia(
+			path.join(
+				'./test/e2e/assets',
+				'1024x768_e2e_test_image_size.jpeg'
+			)
+		);
+		testingImgSrc = testingImgMedia.source_url;
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( { title: 'Test bindings' } );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'getValues', () => {
+		test( 'should show the returned value in paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned value in heading content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'connected-heading',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await expect( headingBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-heading' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned values in button attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'connected-button',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+									url: {
+										source: 'testing/complete-source',
+										args: { key: 'url_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const buttonDom = previewPage.locator( '#connected-button a' );
+			await expect( buttonDom ).toHaveText( 'Text Field Value' );
+			await expect( buttonDom ).toHaveAttribute( 'href', testingImgSrc );
+		} );
+		test( 'should show the returned values in image attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'connected-image',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/complete-source',
+								args: { key: 'url_field' },
+							},
+							alt: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			// Playwright will complain that the pointer events are captured by
+			// the parent, but that's fine.
+			// eslint-disable-next-line playwright/no-force-option
+			await imageBlockImg.click( { force: true } );
+
+			// Image src is the custom field value.
+			await expect( imageBlockImg ).toHaveAttribute(
+				'src',
+				testingImgSrc
+			);
+
+			// Alt textarea should have the custom field value.
+			const altValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' )
+				.inputValue();
+			expect( altValue ).toBe( 'Text Field Value' );
+
+			// Title input should have the original value.
+			const advancedButton = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByRole( 'button', {
+					name: 'Advanced',
+				} );
+			const isAdvancedPanelOpen =
+				await advancedButton.getAttribute( 'aria-expanded' );
+			if ( isAdvancedPanelOpen === 'false' ) {
+				await advancedButton.click();
+			}
+			const titleValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Title attribute' )
+				.inputValue();
+			expect( titleValue ).toBe( 'default title value' );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const imageDom = previewPage.locator( '#connected-image img' );
+			await expect( imageDom ).toHaveAttribute( 'src', testingImgSrc );
+			await expect( imageDom ).toHaveAttribute(
+				'alt',
+				'Text Field Value'
+			);
+			await expect( imageDom ).toHaveAttribute(
+				'title',
+				'default title value'
+			);
+		} );
+		test( 'should fall back to source label when `getValues` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/server-only-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Server Source' );
+		} );
+		test( 'should fall back to null when `getValues` is undefined in URL attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/server-only-source',
+								args: { key: 'url_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Image',
+			} );
+			await expect(
+				imageBlock.locator( '.components-placeholder__fieldset' )
+			).toHaveText( 'Connected to Server Source' );
+		} );
+	} );
+
+	test.describe( 'should lock editing', () => {
+		// Logic reused accross all the tests that check paragraph editing is locked.
+		async function testParagraphControlsAreLocked( {
+			source,
+			editor,
+			page,
+		} ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source,
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await paragraphBlock.click();
+
+			// Alignment controls exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Align text' } )
+			).toBeVisible();
+
+			// Format controls don't exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', {
+						name: 'Bold',
+					} )
+			).toBeHidden();
+
+			// Paragraph is not editable.
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		}
+		test.describe( 'canUserEditValue returns false', () => {
+			test( 'paragraph', async ( { editor, page } ) => {
+				await testParagraphControlsAreLocked( {
+					source: 'testing/can-user-edit-false',
+					editor,
+					page,
+				} );
+			} );
+			test( 'heading', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'heading default content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const headingBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Heading',
+				} );
+				await headingBlock.click();
+
+				// Alignment controls exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Heading is not editable.
+				await expect( headingBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'button', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/buttons',
+					innerBlocks: [
+						{
+							name: 'core/button',
+							attributes: {
+								text: 'button default text',
+								url: '#default-url',
+								metadata: {
+									bindings: {
+										text: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'text_field' },
+										},
+										url: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'url_field' },
+										},
+									},
+								},
+							},
+						},
+					],
+				} );
+				const buttonBlock = editor.canvas
+					.getByRole( 'document', {
+						name: 'Block: Button',
+						exact: true,
+					} )
+					.getByRole( 'textbox' );
+				await buttonBlock.click();
+
+				// Alignment controls are visible.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Button is not editable.
+				await expect( buttonBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+
+				// Link controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Link' } )
+				).toBeHidden();
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Unlink' } )
+				).toBeHidden();
+			} );
+			test( 'image', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/image',
+					attributes: {
+						url: imagePlaceholderSrc,
+						alt: 'default alt value',
+						title: 'default title value',
+						metadata: {
+							bindings: {
+								url: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'url_field' },
+								},
+								alt: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+								title: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const imageBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Image',
+				} );
+				await imageBlock.click();
+
+				// Replace controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Replace',
+						} )
+				).toBeHidden();
+
+				// Image placeholder doesn't show the upload button.
+				await expect(
+					imageBlock.getByRole( 'button', { name: 'Upload' } )
+				).toBeHidden();
+
+				// Alt textarea is disabled and with the custom field value.
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Alternative text' )
+				).toHaveAttribute( 'readonly' );
+				const altValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Alternative text' )
+					.inputValue();
+				expect( altValue ).toBe( 'Text Field Value' );
+
+				// Title input is enabled and with the original value.
+				await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByRole( 'button', { name: 'Advanced' } )
+					.click();
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Title attribute' )
+				).toHaveAttribute( 'readonly' );
+				const titleValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Title attribute' )
+					.inputValue();
+				expect( titleValue ).toBe( 'Text Field Value' );
+			} );
+		} );
+		// The following tests just check the paragraph and assume is the case for the rest of the blocks.
+		test( 'canUserEditValue is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/can-user-edit-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'setValues is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/complete-source-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'source is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/undefined-source',
+				editor,
+				page,
+			} );
+		} );
+	} );
+
+	// Use `core/post-meta` source to test editing to avoid overcomplicating custom sources.
+	// It needs a source that can be consumed and edited from the server and the editor.
+	test.describe( 'setValues', () => {
+		test( 'should be possible to edit the value from paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'paragraph default content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		// Related issue: https://github.com/WordPress/gutenberg/issues/62347
+		test( 'should be possible to use symbols and numbers as the custom field value', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'paragraph-binding',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( '$10.00' );
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#paragraph-binding' )
+			).toHaveText( '$10.00' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the button', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-url-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									url: {
+										source: 'core/post-meta',
+										args: { key: 'url_custom_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Edit the url.
+			const buttonBlock = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' );
+			await buttonBlock.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( '#url-custom-field-modified' );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the button url attribute didn't change.
+			const [ buttonsObject ] = await editor.getBlocks();
+			expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
+				'#default-url'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#button-url-binding a' )
+			).toHaveAttribute( 'href', '#url-custom-field-modified' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the image', async ( {
+			editor,
+			page,
+			pageUtils,
+			requestUtils,
+		} ) => {
+			const customFieldMedia = await requestUtils.uploadMedia(
+				path.join(
+					'./test/e2e/assets',
+					'1024x768_e2e_test_image_size.jpeg'
+				)
+			);
+			testingImgSrc = customFieldMedia.source_url;
+
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-url-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/post-meta',
+								args: { key: 'url_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Edit image url.
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', {
+					name: 'Replace',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( testingImgSrc );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the image url attribute didn't change and still uses the placeholder.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.url ).toBe(
+				imagePlaceholderSrc
+			);
+
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-url-binding img' )
+			).toHaveAttribute( 'src', testingImgSrc );
+		} );
+		test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-alt-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					metadata: {
+						bindings: {
+							alt: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			// Playwright will complain that the pointer events are captured by
+			// the parent, but that's fine.
+			// eslint-disable-next-line playwright/no-force-option
+			await imageBlockImg.click( { force: true } );
+
+			// Edit the custom field value in the alt textarea.
+			const altInputArea = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' );
+			await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
+			await altInputArea.fill( 'new value' );
+
+			// Check that the image alt attribute didn't change.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.alt ).toBe(
+				'default alt value'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-alt-binding img' )
+			).toHaveAttribute( 'alt', 'new value' );
+		} );
+	} );
+
+	test.describe( 'getFieldsList', () => {
+		test( 'should be possible to update attribute value through bindings UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			await page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } )
+				.click();
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should be possible to connect the paragraph content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the heading content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the button supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const textAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show text',
+			} );
+			await expect( textAttribute ).toBeVisible();
+			const linkTargetAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkTarget',
+			} );
+			await expect( linkTargetAttribute ).toBeVisible();
+			const relAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show rel',
+			} );
+			await expect( relAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const tagNameAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show tagName',
+			} );
+			await expect( tagNameAttribute ).toBeHidden();
+		} );
+		test( 'should be possible to connect the image supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+			} );
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const idAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show id',
+			} );
+			await expect( idAttribute ).toBeVisible();
+			const titleAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show title',
+			} );
+			await expect( titleAttribute ).toBeVisible();
+			const altAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show alt',
+			} );
+			await expect( altAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const linkClassAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkClass',
+			} );
+			await expect( linkClassAttribute ).toBeHidden();
+		} );
+		test( 'should show all the available fields in the dropdown UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			const textField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( textField ).toBeVisible();
+			await expect( textField ).toBeChecked();
+			const urlField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'URL Field Label' } );
+			await expect( urlField ).toBeVisible();
+			await expect( urlField ).not.toBeChecked();
+		} );
+		test( 'should show the connected fields in the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const contentButton = page.getByRole( 'button', {
+				name: 'content',
+			} );
+			await expect( contentButton ).toContainText( 'Text Field Label' );
+		} );
+	} );
+
+	test.describe( 'RichText workflows', () => {
+		test( 'should add empty paragraph block when pressing enter in paragraph', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			// Select the paragraph and press Enter at the end of it.
+			const paragraph = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await editor.selectBlocks( paragraph );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialParagraph, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-type="core/paragraph"]' )
+				.all();
+			await expect( initialParagraph ).toHaveText( 'Text Field Value' );
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty paragraph block when pressing enter in heading', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'heading-binding',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Select the heading and press Enter at the end of it.
+			const heading = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await editor.selectBlocks( heading );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			// Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
+			const [ initialHeading, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-block]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialHeading ).toHaveAttribute(
+				'data-type',
+				'core/heading'
+			);
+			await expect( initialHeading ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyParagraph ).toHaveAttribute(
+				'data-type',
+				'core/paragraph'
+			);
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty button block when pressing enter in button', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-text-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialButton, newEmptyButton ] = await editor.canvas
+				.locator( '[data-type="core/button"]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialButton ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyButton ).toHaveText( '' );
+			await expect( newEmptyButton ).toBeEditable();
+		} );
+		test( 'should show placeholder prompt when value is empty and can edit', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'Empty empty_field; start writing to edit its value',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Add Empty Field Label'
+			);
+		} );
+		test( 'should show source label when value is empty, cannot edit, and `getFieldsList` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/can-user-edit-false',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+			await expect( paragraphBlock ).toBeEmpty();
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Can User Edit: False'
+			);
+		} );
+		test( 'should show placeholder attribute over bindings placeholder', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					placeholder: 'My custom placeholder',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'My custom placeholder'
+			);
+		} );
+	} );
+
+	test( 'should show the label of a source only registered in the server in blocks connected', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/server-only-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Server Source' );
+	} );
+	test( 'should show an "Invalid source" warning for not registered sources', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/undefined-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Invalid source' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
new file mode 100644
index 00000000000000..32334bfc777f2a
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
@@ -0,0 +1,600 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post Meta source', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'Movie CPT template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//single-movie',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test.describe( 'Block attributes values', () => {
+			test( 'should not be possible to edit connected blocks', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should fall back to the field label if the default value is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_with_only_label',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Field with only label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_without_label_or_default',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Attributes panel', () => {
+			test( 'should show the field label if it is defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'Movie field label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'field_without_label_or_default' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Fields list dropdown', () => {
+			// Insert block and open the dropdown for every test.
+			test.beforeEach( async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				await page
+					.getByRole( 'button', {
+						name: 'content',
+					} )
+					.click();
+			} );
+
+			test( 'should include movie fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const movieField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( movieField ).toBeVisible();
+			} );
+			test( 'should include global fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+			} );
+			test( 'should not include protected fields', async ( { page } ) => {
+				// Ensure the fields have loaded by checking the field is visible.
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+				// Check the protected fields are not visible.
+				const protectedField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: '_protected_field' } );
+				await expect( protectedField ).toBeHidden();
+				const showInRestFalseField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'show_in_rest_false_field' } );
+				await expect( showInRestFalseField ).toBeHidden();
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( fieldButton ).toContainText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should not show anything if the default value is not defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Field with only label' } );
+				// Check it only contains the field label.
+				await expect( fieldButton ).toHaveText(
+					'Field with only label'
+				);
+			} );
+		} );
+	} );
+
+	test.describe( 'Custom template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//custom-template',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test( 'should not include post meta fields in UI to connect attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			// Check the fields registered by other sources are there.
+			const customSourceField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( customSourceField ).toBeVisible();
+			// Check the post meta fields are not visible.
+			const globalField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'text_custom_field' } );
+			await expect( globalField ).toBeHidden();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeHidden();
+		} );
+		test( 'should show the key in attributes connected to post meta', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'text_custom_field' );
+		} );
+	} );
+
+	test.describe( 'Movie CPT post', () => {
+		test.beforeEach( async ( { admin } ) => {
+			// CHECK HOW TO CREATE A MOVIE.
+			await admin.createNewPost( {
+				postType: 'movie',
+				title: 'Test bindings',
+			} );
+		} );
+
+		test( 'should show the custom field value of that specific post', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Movie field default value' );
+		} );
+		test( 'should fall back to the key when custom field is not accessible', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'unaccessible_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'unaccessible_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a protected field', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: '_protected_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( '_protected_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a field with `show_in_rest` set to false', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'show_in_rest_false_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'show_in_rest_false_field'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should be possible to edit the value of the connected custom fields', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'fallback content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		test( 'should be possible to connect movie fields through the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeVisible();
+		} );
+		test( 'should not be possible to connect non-supported fields through the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'String custom field',
+				} )
+			).toBeVisible();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Number custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Integer custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Boolean custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Object custom field',
+				} )
+			).toBeHidden();
+			await expect(
+				page.getByRole( 'menuitemradio', {
+					name: 'Array custom field',
+				} )
+			).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
new file mode 100644
index 00000000000000..9346412c46bcb2
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -0,0 +1,390 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block deletion', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'deleting the last block via its options menu', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a couple of paragraphs.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'First' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Third' },
+		} );
+
+		// Ensure the last paragraph is focused.
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last()
+		).toBeFocused();
+
+		// Remove the current paragraph via the Block Toolbar options menu.
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+
+		// Ensure the last block was removed.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+		] );
+
+		// Ensure the caret is in a correct position.
+		await page.keyboard.type( '| ← caret was here' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second| ← caret was here' },
+			},
+		] );
+	} );
+
+	// this test should be moved to a new testing story about focus management.
+	test( 'deleting a block focuses the parent block', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a group with a paragraph in it.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Paragraph child of group' },
+				},
+			],
+		} );
+
+		// Select the paragraph.
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await editor.selectBlocks( paragraph );
+
+		// Remove the current paragraph via the Block Toolbar options menu.
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+
+		// Ensure the paragraph was removed.
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/group', attributes: {} } ] );
+
+		// Ensure the group block is focused.
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Group',
+				} )
+				.last()
+		).toBeFocused();
+	} );
+
+	test( 'deleting the last block via the keyboard shortcut', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add a couple of paragraphs.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'First' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Third' },
+		} );
+
+		// Ensure the last paragraph is focused.
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last()
+		).toBeFocused();
+
+		// Remove the current paragraph via dedicated keyboard shortcut.
+		await pageUtils.pressKeys( 'access+z' );
+
+		// Ensure the last block was removed.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+		] );
+
+		// Ensure the caret is in a correct position.
+		await page.keyboard.type( '| ← caret was here' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second| ← caret was here' },
+			},
+		] );
+	} );
+
+	test( 'deleting the last block via backspace from an empty paragraph', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a couple of paragraphs.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'First' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second' },
+		} );
+
+		// Leave last paragraph empty and ensure it's focused.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Empty block' } )
+		).toBeFocused();
+
+		// Hit backspace to remove the empty paragraph.
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure the last block was removed.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+		] );
+
+		// Ensure the caret is in a correct position.
+		await page.keyboard.type( '| ← caret was here' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second| ← caret was here' },
+			},
+		] );
+	} );
+
+	test( 'deleting last selected block via backspace', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a couple of paragraphs.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'First' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second' },
+		} );
+
+		// Add the Image block and focus it.
+		await editor.insertBlock( {
+			name: 'core/image',
+		} );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await expect(
+			imageBlock.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( imageBlock ).toBeFocused();
+
+		// Hit backspace and ensure the Image block was removed.
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+		] );
+
+		// Ensure the caret is in a correct position.
+		await page.keyboard.type( '| ← caret was here' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second| ← caret was here' },
+			},
+		] );
+	} );
+
+	test( 'deleting the last two selected blocks via backspace', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add a couple of paragraphs.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'First' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Third' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+		} );
+
+		// Ensure the empty paragraph is focused.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+		).toBeFocused();
+
+		// Select the last two paragraphs.
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await expect
+			.poll( () =>
+				page.evaluate( () =>
+					window.wp.data
+						.select( 'core/block-editor' )
+						.getMultiSelectedBlocks()
+				)
+			)
+			.toHaveLength( 2 );
+
+		// Hit backspace and ensure the last two paragraphs were deleted, and an
+		// empty block was created.
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: 'First' } },
+			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+			{ name: 'core/paragraph', attributes: { content: '' } },
+		] );
+
+		// Ensure that the newly created empty block is focused.
+		await expect.poll( editor.getBlocks ).toHaveLength( 3 );
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+		).toBeFocused();
+	} );
+
+	test( 'deleting all blocks', async ( { editor, page } ) => {
+		// Add one paragraph with content and ensure it's focused.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+		).toBeFocused();
+
+		// Remove that paragraph via its options menu.
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+
+		// Ensure an empty block was created and focused.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Empty block',
+			} )
+		).toBeFocused();
+		await expect.poll( editor.getBlocks ).toEqual( [] );
+	} );
+
+	/**
+	 * Regression Test: Previously, removing a block would not clear
+	 * selection state when there were no other blocks to select.
+	 *
+	 * See: https://github.com/WordPress/gutenberg/issues/15458
+	 * See: https://github.com/WordPress/gutenberg/pull/15543
+	 */
+	test( 'deleting all blocks when the default block is unavailable', async ( {
+		editor,
+		page,
+	} ) => {
+		// Unregister default block type. This may happen if the editor is
+		// configured to not allow the default (paragraph) block type, either
+		// by plugin editor settings filtering or user block preferences.
+		await page.waitForFunction( () => {
+			try {
+				const defaultBlockName = window.wp.data
+					.select( 'core/blocks' )
+					.getDefaultBlockName();
+				window.wp.data
+					.dispatch( 'core/blocks' )
+					.removeBlockTypes( defaultBlockName );
+				return true;
+			} catch {
+				return false;
+			}
+		} );
+
+		// Add the Image block.
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+
+		// Initially, the "Upload" button is focused, so we need to move focus
+		// up to the block wrapper.
+		await expect(
+			imageBlock.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( imageBlock ).toBeFocused();
+
+		// Hit backspace to remove the Image block.
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure that there's no blocks.
+		await expect.poll( editor.getBlocks ).toHaveLength( 0 );
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Empty block' } )
+		).toBeHidden();
+
+		// Ensure that the block appender button is visible.
+		await expect(
+			editor.canvas.getByRole( 'button', { name: 'Add block' } )
+		).toBeVisible();
+
+		// TODO: There should be expectations around where focus is placed in
+		// this scenario. Currently, a focus loss occurs, which is unacceptable.
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
new file mode 100644
index 00000000000000..967baccfcbe4ef
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js
@@ -0,0 +1,284 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function addTestParagraphBlocks( { editor, page } ) {
+	await test.step( 'add test paragraph blocks', async () => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1st' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2nd' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3rd' );
+	} );
+}
+
+test.describe( 'Block editor keyboard shortcuts', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'move blocks - single block selected', () => {
+		test( 'should move the block up', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			await pageUtils.pressKeys( 'secondary+t', { times: 2 } );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+			] );
+		} );
+
+		test( 'should move the block down', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			await page.keyboard.press( 'ArrowUp' );
+			await pageUtils.pressKeys( 'secondary+y' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'move blocks - multiple blocks selected', () => {
+		test( 'should move the blocks up', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			await pageUtils.pressKeys( 'shift+ArrowUp' );
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Multiple blocks selected' } )
+			).toBeVisible();
+			await pageUtils.pressKeys( 'secondary+t' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+			] );
+		} );
+
+		test( 'should move the blocks down', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			await page.keyboard.press( 'ArrowUp' );
+			await pageUtils.pressKeys( 'shift+ArrowUp' );
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Multiple blocks selected' } )
+			).toBeVisible();
+			await pageUtils.pressKeys( 'secondary+y' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'test shortcuts handling through portals in the same tree', () => {
+		test( 'should propagate properly and duplicate selected blocks', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Duplicate' } )
+			).toBeVisible();
+
+			// Duplicate via keyboard.
+			await pageUtils.pressKeys( 'primaryShift+d' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/paragraph',
+				},
+				{
+					name: 'core/paragraph',
+				},
+			] );
+		} );
+
+		test( 'should prevent deleting multiple selected blocks from inputs', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+			await page
+				.getByRole( 'menu', { name: 'Options' } )
+				.getByRole( 'menuitem', { name: 'Create pattern' } )
+				.click();
+			await page
+				.getByRole( 'dialog', { name: 'add new pattern' } )
+				.getByRole( 'textbox', { name: 'Name' } )
+				.fill( 'hi' );
+
+			await page.keyboard.press( 'Backspace' );
+			await page.keyboard.press( 'ArrowLeft' );
+			await page.keyboard.press( 'Delete' );
+			await page.keyboard.press( 'Escape' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'create a group block from the selected blocks', () => {
+		test( 'should propagate properly if multiple blocks are selected.', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			await pageUtils.pressKeys( 'primary+g' ); // Keyboard shortcut for Insert before.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1st' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2nd' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '3rd' },
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'should prevent if a single block is selected.', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await addTestParagraphBlocks( { editor, page } );
+			const firstParagraphBlock = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			await editor.selectBlocks( firstParagraphBlock );
+			await pageUtils.pressKeys( 'primary+g' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1st' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2nd' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: '3rd' },
+				},
+			] );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-grouping.spec.js b/test/e2e/specs/editor/various/block-grouping.spec.js
new file mode 100644
index 00000000000000..ec09edc4160d08
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-grouping.spec.js
@@ -0,0 +1,462 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').Editor} Editor */
+
+test.use( {
+	groupingUtils: async ( { page, editor }, use ) => {
+		await use( new GroupingUtils( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Block Grouping', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Group creation', () => {
+		test( 'creates a group from multiple blocks of the same type via block transforms', async ( {
+			editor,
+			page,
+			pageUtils,
+			groupingUtils,
+		} ) => {
+			await groupingUtils.insertBlocksOfSameType();
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Multiple blocks selected' } )
+				.click();
+			await page
+				.getByRole( 'menu', { name: 'Multiple blocks selected' } )
+				.getByRole( 'menuitem', { name: 'Group' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'First Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Second Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Third Paragraph' },
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'creates a group from multiple blocks of different types via block transforms', async ( {
+			editor,
+			page,
+			pageUtils,
+			groupingUtils,
+		} ) => {
+			await groupingUtils.insertBlocksOfMultipleTypes();
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Multiple blocks selected' } )
+				.click();
+			await page
+				.getByRole( 'menu', { name: 'Multiple blocks selected' } )
+				.getByRole( 'menuitem', { name: 'Group' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/heading',
+							attributes: { content: 'Group Heading', level: 2 },
+						},
+						{
+							name: 'core/image',
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Some paragraph' },
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'creates a group from multiple blocks of the same type via options toolbar', async ( {
+			editor,
+			pageUtils,
+			groupingUtils,
+		} ) => {
+			await groupingUtils.insertBlocksOfSameType();
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+			await editor.clickBlockOptionsMenuItem( 'Group' );
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'First Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Second Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Third Paragraph' },
+						},
+					],
+				},
+			] );
+		} );
+
+		test( 'groups and ungroups multiple blocks of different types via options toolbar', async ( {
+			editor,
+			pageUtils,
+			groupingUtils,
+		} ) => {
+			await groupingUtils.insertBlocksOfMultipleTypes();
+
+			// Multiselect via keyboard.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			await editor.clickBlockOptionsMenuItem( 'Group' );
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/heading',
+							attributes: { content: 'Group Heading', level: 2 },
+						},
+						{
+							name: 'core/image',
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Some paragraph' },
+						},
+					],
+				},
+			] );
+
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/heading',
+					attributes: { content: 'Group Heading', level: 2 },
+				},
+				{
+					name: 'core/image',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Some paragraph' },
+				},
+			] );
+		} );
+
+		test( 'does not allow ungrouping a group block that has no children', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( { name: 'core/group' } );
+			await editor.clickBlockToolbarButton( 'Options' );
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Ungroup' } )
+			).toBeHidden();
+		} );
+
+		test( 'should group and ungroup a controlled block properly', async ( {
+			editor,
+			requestUtils,
+		} ) => {
+			const { id: ref } = await requestUtils.createBlock( {
+				title: 'Block',
+				status: 'publish',
+				content: `<!-- wp:paragraph -->\n<p>Hey!</p>\n<!-- /wp:paragraph -->`,
+				wp_pattern_category: [],
+			} );
+
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref },
+			} );
+			await editor.clickBlockOptionsMenuItem( 'Group' );
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Block: Group',
+				} )
+			).toContainText( 'Hey!' );
+
+			await editor.clickBlockOptionsMenuItem( 'Ungroup' );
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Block: Pattern',
+				} )
+			).toContainText( 'Hey!' );
+		} );
+
+		test( 'should group another Group block via options toolbar', async ( {
+			page,
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			} );
+
+			const group = page
+				.getByRole( 'menu', { name: 'Options' } )
+				.getByRole( 'menuitem', { name: 'Group', exact: true } );
+
+			await editor.clickBlockToolbarButton( 'Options' );
+			await group.click();
+			await editor.clickBlockToolbarButton( 'Options' );
+			await group.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [
+						{
+							name: 'core/group',
+							innerBlocks: [
+								{
+									name: 'core/paragraph',
+									attributes: { content: '1' },
+								},
+							],
+						},
+					],
+				},
+			] );
+		} );
+	} );
+
+	test.describe( 'Grouping Block availability', () => {
+		test.beforeEach( async ( { page, pageUtils, groupingUtils } ) => {
+			// Disable the Group block.
+			await page.evaluate( () => {
+				window.wp.data
+					.dispatch( 'core/edit-post' )
+					.hideBlockTypes( [ 'core/group' ] );
+			} );
+
+			await groupingUtils.insertBlocksOfMultipleTypes();
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+		} );
+
+		test.afterEach( async ( { page } ) => {
+			// Re-enable the Group block.
+			await page.evaluate( () => {
+				window.wp.data
+					.dispatch( 'core/edit-post' )
+					.showBlockTypes( [ 'core/group' ] );
+			} );
+		} );
+
+		test( 'does not show group transform if Grouping block is disabled', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Multiple blocks selected' } )
+				.click();
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Multiple blocks selected' } )
+					.getByRole( 'menuitem', { name: 'Group' } )
+			).toBeHidden();
+		} );
+
+		test( 'does not show group option in the options toolbar if Grouping block is disabled', async ( {
+			page,
+			editor,
+		} ) => {
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Group' } )
+			).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'Preserving selected blocks attributes', () => {
+		test( 'preserves width alignment settings of selected blocks', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: { content: 'Heading', level: 2 },
+			} );
+			const alignOptions = page.getByRole( 'menu', { name: 'Align' } );
+
+			// Full width image.
+			await editor.insertBlock( { name: 'core/image' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+			await alignOptions
+				.getByRole( 'menuitemradio', { name: 'Full width' } )
+				.click();
+
+			// Wide width image.
+			await editor.insertBlock( { name: 'core/image' } );
+			await editor.clickBlockToolbarButton( 'Align' );
+			await alignOptions
+				.getByRole( 'menuitemradio', {
+					name: 'Wide width',
+				} )
+				.click();
+
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Some paragraph' },
+			} );
+
+			// Select everythinga and group.
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+			await editor.transformBlockTo( 'core/group' );
+
+			// We expect Group block align setting to match that
+			// of the widest of it's "child" innerBlocks
+			await editor.clickBlockToolbarButton( 'Align' );
+			await expect(
+				alignOptions.getByRole( 'menuitemradio', { checked: true } )
+			).toHaveText( 'Full width' );
+		} );
+	} );
+
+	test.describe( 'Registering alternative Blocks to handle Grouping interactions', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-custom-grouping-block'
+			);
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-custom-grouping-block'
+			);
+		} );
+
+		test( 'should use registered grouping block for grouping interactions', async ( {
+			editor,
+			page,
+			pageUtils,
+			groupingUtils,
+		} ) => {
+			// Set custom Block as the Block to use for Grouping.
+			await page.evaluate( () => {
+				window.wp.blocks.setGroupingBlockName(
+					'test/alternative-group-block'
+				);
+			} );
+
+			await groupingUtils.insertBlocksOfSameType();
+			await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+			// Group - this will use whichever Block is registered as the Grouping Block
+			// as opposed to "transformTo()" which uses whatever is passed to it. To
+			// ensure this test is meaningful we must rely on what is registered.
+			await editor.clickBlockOptionsMenuItem( 'Group' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'test/alternative-group-block',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'First Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Second Paragraph' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: 'Third Paragraph' },
+						},
+					],
+				},
+			] );
+		} );
+	} );
+} );
+
+class GroupingUtils {
+	/** @type {import('@playwright/test').Page} */
+	#page;
+	/** @type {Editor} */
+	#editor;
+
+	constructor( { page, editor } ) {
+		this.#page = page;
+		this.#editor = editor;
+	}
+
+	async insertBlocksOfSameType() {
+		await test.step(
+			'insert blocks of the same type',
+			async () => {
+				await this.#editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				} );
+				await this.#editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: { content: 'Second Paragraph' },
+				} );
+				await this.#editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: { content: 'Third Paragraph' },
+				} );
+			},
+			{ box: true }
+		);
+	}
+
+	async insertBlocksOfMultipleTypes() {
+		await test.step(
+			'insert blocks of multiple types',
+			async () => {
+				await this.#editor.insertBlock( {
+					name: 'core/heading',
+					attributes: { content: 'Group Heading', level: 2 },
+				} );
+				await this.#editor.insertBlock( {
+					name: 'core/image',
+				} );
+				await this.#editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: { content: 'Some paragraph' },
+				} );
+			},
+			{ box: true }
+		);
+	}
+}
diff --git a/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
new file mode 100644
index 00000000000000..f0bfe5bff203fb
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js
@@ -0,0 +1,249 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const COLUMNS_BLOCK = [
+	{
+		name: 'core/columns',
+		innerBlocks: [
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'First column' },
+					},
+				],
+			},
+			{
+				name: 'core/column',
+			},
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Third column' },
+					},
+				],
+			},
+		],
+	},
+];
+
+test.describe( 'Navigating the block hierarchy', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should navigate using the list view sidebar', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.insertBlock( { name: 'core/columns' } );
+		await editor.canvas
+			.locator( 'role=button[name="Two columns; equal split"i]' )
+			.click();
+
+		// Open the block inserter.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
+
+		// Add a paragraph in the first column.
+		const paragraph = page.getByRole( 'option', { name: 'Paragraph' } );
+		await expect( paragraph ).toBeVisible();
+		await paragraph.click();
+		await page.keyboard.type( 'First column' );
+
+		await pageUtils.pressKeys( 'access+o' );
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		await expect( listView ).toBeVisible();
+		await listView
+			.getByRole( 'gridcell', { name: 'Columns', exact: true } )
+			.click();
+
+		// Tweak the columns count.
+		await page.getByRole( 'spinbutton', { name: 'Columns' } ).fill( '3' );
+
+		// Wait for the new column block to appear in the list view
+		const column = listView.getByRole( 'gridcell', {
+			name: 'Column',
+			exact: true,
+		} );
+		await expect( column ).toHaveCount( 3 );
+
+		await column.last().click();
+
+		// Open the block inserter.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect( paragraph ).toBeVisible();
+		await paragraph.click();
+		await page.keyboard.type( 'Third column' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( COLUMNS_BLOCK );
+	} );
+
+	test( 'should navigate block hierarchy using only the keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.insertBlock( { name: 'core/columns' } );
+		await editor.canvas
+			.locator( 'role=button[name="Two columns; equal split"i]' )
+			.click();
+
+		// Open the block inserter.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
+
+		// Add a paragraph in the first column.
+		const paragraph = page.getByRole( 'option', { name: 'Paragraph' } );
+		await expect( paragraph ).toBeVisible();
+		await paragraph.click();
+		await page.keyboard.type( 'First column' );
+
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		await expect( listView ).toBeVisible();
+
+		// Navigate to the columns blocks using the keyboard.
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+		await page.keyboard.press( 'Enter' );
+
+		// Move focus to the sidebar area.
+		await pageUtils.pressKeys( 'ctrl+`' );
+
+		// Navigate to the block settings sidebar and tweak the column count.
+		await pageUtils.pressKeys( 'Tab', { times: 5 } );
+		await expect(
+			page.getByRole( 'slider', { name: 'Columns' } )
+		).toBeFocused();
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Navigate to the third column in the columns block via List View.
+		await pageUtils.pressKeys( 'ctrlShift+`', { times: 2 } );
+		await pageUtils.pressKeys( 'Tab', { times: 3 } );
+		await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );
+
+		// Insert text in the last column block.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect( paragraph ).toBeVisible();
+		await paragraph.click();
+		await page.keyboard.type( 'Third column' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( COLUMNS_BLOCK );
+	} );
+
+	test( 'should appear and function even without nested blocks', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'You say goodbye' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## Hello, hello' );
+
+		// Open list view and return to the first block.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect(
+			page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+			} )
+		).toBeVisible();
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Space' );
+
+		// Replace its contents.
+		await pageUtils.pressKeys( 'primary+a' );
+		await page.keyboard.type( 'and I say hello' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'and I say hello' },
+			},
+			{
+				name: 'core/heading',
+			},
+		] );
+	} );
+
+	test( 'should select the wrapper div for a group', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.canvas
+			.locator(
+				'role=button[name="Group: Gather blocks in a container."i]'
+			)
+			.click();
+
+		// Open the block inserter.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Enter' );
+
+		// Add some random blocks.
+		const paragraph = page.getByRole( 'option', { name: 'Paragraph' } );
+		await expect( paragraph ).toBeVisible();
+		await paragraph.click();
+		await page.keyboard.type( 'just a paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/spacer' );
+		await page.keyboard.press( 'Enter' );
+
+		// Verify group block contents.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'just a paragraph' },
+					},
+					{
+						name: 'core/spacer',
+					},
+				],
+			},
+		] );
+
+		// Deselect the blocks.
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.click();
+
+		// Open list view and return to the first block.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect(
+			page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+			} )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Group' } )
+		).toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index 7398cc6be7b185..eafb468902ef92 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -8,79 +8,147 @@ test.describe( 'Block Locking', () => {
 		await admin.createNewPost();
 	} );
 
-	test.describe( 'General', () => {
-		test( 'can prevent removal', async ( { editor, page } ) => {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( 'Some paragraph' );
+	test( 'can prevent removal', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Some paragraph' );
 
-			await editor.clickBlockOptionsMenuItem( 'Lock' );
+		await editor.clickBlockOptionsMenuItem( 'Lock' );
 
-			await page.click( 'role=checkbox[name="Prevent removal"]' );
-			await page.click( 'role=button[name="Apply"]' );
+		await page.click( 'role=checkbox[name="Prevent removal"]' );
+		await page.click( 'role=button[name="Apply"]' );
 
-			await expect(
-				page.locator( 'role=menuitem[name="Remove Paragraph"]' )
-			).not.toBeVisible();
-		} );
+		await expect(
+			page.locator( 'role=menuitem[name="Delete"]' )
+		).toBeHidden();
+	} );
 
-		test( 'can disable movement', async ( { editor, page } ) => {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( 'First paragraph' );
+	test( 'can disable movement', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'First paragraph' );
 
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( 'Second paragraph' );
+		await page.keyboard.type( 'Enter' );
+		await page.keyboard.type( 'Second paragraph' );
 
-			await editor.clickBlockOptionsMenuItem( 'Lock' );
+		await editor.clickBlockOptionsMenuItem( 'Lock' );
 
-			await page.click( 'role=checkbox[name="Disable movement"]' );
-			await page.click( 'role=button[name="Apply"]' );
+		await page.click( 'role=checkbox[name="Disable movement"]' );
+		await page.click( 'role=button[name="Apply"]' );
 
-			// Hide options.
-			await editor.clickBlockToolbarButton( 'Options' );
+		// Hide options.
+		await editor.clickBlockToolbarButton( 'Options' );
 
-			// Drag handle is hidden.
-			await expect(
-				page.locator( 'role=button[name="Drag"]' )
-			).not.toBeVisible();
+		// Drag handle is hidden.
+		await expect( page.locator( 'role=button[name="Drag"]' ) ).toBeHidden();
 
-			// Movers are hidden. No need to check for both.
-			await expect(
-				page.locator( 'role=button[name="Move up"]' )
-			).not.toBeVisible();
-		} );
+		// Movers are hidden. No need to check for both.
+		await expect(
+			page.locator( 'role=button[name="Move up"]' )
+		).toBeHidden();
+	} );
 
-		test( 'can lock everything', async ( { editor, page } ) => {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( 'Some paragraph' );
+	test( 'can lock everything', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Some paragraph' );
 
-			await editor.clickBlockOptionsMenuItem( 'Lock' );
+		await editor.clickBlockOptionsMenuItem( 'Lock' );
 
-			await page.click( 'role=checkbox[name="Lock all"]' );
-			await page.click( 'role=button[name="Apply"]' );
+		await page.click( 'role=checkbox[name="Lock all"]' );
+		await page.click( 'role=button[name="Apply"]' );
 
-			expect( await editor.getEditedPostContent() )
-				.toBe( `<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
+		expect( await editor.getEditedPostContent() )
+			.toBe( `<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
 <p>Some paragraph</p>
 <!-- /wp:paragraph -->` );
-		} );
+	} );
 
-		test( 'can unlock from toolbar', async ( { editor, page } ) => {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( 'Some paragraph' );
+	test( 'can unlock from toolbar', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Some paragraph' );
 
-			await editor.clickBlockOptionsMenuItem( 'Lock' );
+		await editor.clickBlockOptionsMenuItem( 'Lock' );
 
-			await page.click( 'role=checkbox[name="Lock all"]' );
-			await page.click( 'role=button[name="Apply"]' );
+		await page.click( 'role=checkbox[name="Lock all"]' );
+		await page.click( 'role=button[name="Apply"]' );
 
-			await editor.clickBlockToolbarButton( 'Unlock Paragraph' );
-			await page.click( 'role=checkbox[name="Lock all"]' );
-			await page.click( 'role=button[name="Apply"]' );
+		await editor.clickBlockToolbarButton( 'Unlock' );
+		await page.click( 'role=checkbox[name="Lock all"]' );
+		await page.click( 'role=button[name="Apply"]' );
 
-			expect( await editor.getEditedPostContent() )
-				.toBe( `<!-- wp:paragraph {"lock":{"move":false,"remove":false}} -->
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Lock' } )
+		).toBeFocused();
+
+		expect( await editor.getEditedPostContent() )
+			.toBe( `<!-- wp:paragraph {"lock":{"move":false,"remove":false}} -->
 <p>Some paragraph</p>
 <!-- /wp:paragraph -->` );
+	} );
+
+	test( 'block locking supersedes template locking', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'constrained' },
+				templateLock: 'all',
+			},
+			innerBlocks: [
+				{
+					name: 'core/heading',
+					attributes: { content: 'Hello, hello' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'WordPress' },
+				},
+			],
+		} );
+
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
 		} );
+		await paragraph.click();
+
+		await editor.clickBlockToolbarButton( 'Unlock' );
+		await page.click( 'role=checkbox[name="Lock all"]' );
+		await page.click( 'role=button[name="Apply"]' );
+
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Move up' } )
+		).toBeVisible();
+
+		await paragraph.click();
+		await pageUtils.pressKeys( 'access+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: {
+					layout: { type: 'constrained' },
+					templateLock: 'all',
+				},
+				innerBlocks: [
+					{
+						name: 'core/heading',
+						attributes: { content: 'Hello, hello' },
+					},
+				],
+			},
+		] );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/block-mover.spec.js b/test/e2e/specs/editor/various/block-mover.spec.js
index e90ee5f7f0122d..5c3b04a0697743 100644
--- a/test/e2e/specs/editor/various/block-mover.spec.js
+++ b/test/e2e/specs/editor/various/block-mover.spec.js
@@ -23,7 +23,7 @@ test.describe( 'block mover', () => {
 		} );
 
 		// Select a block so the block mover is rendered.
-		await page.focus( 'text=First Paragraph' );
+		await editor.canvas.locator( 'text=First Paragraph' ).focus();
 		await editor.showBlockToolbar();
 
 		const moveDownButton = page.locator(
@@ -47,7 +47,7 @@ test.describe( 'block mover', () => {
 			attributes: { content: 'First Paragraph' },
 		} );
 		// Select a block so the block mover has the possibility of being rendered.
-		await page.focus( 'text=First Paragraph' );
+		await editor.canvas.locator( 'text=First Paragraph' ).focus();
 		await editor.showBlockToolbar();
 
 		// Ensure no block mover exists when only one block exists on the page.
diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js
new file mode 100644
index 00000000000000..6998683cb96163
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-renaming.spec.js
@@ -0,0 +1,247 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block Renaming', () => {
+	test.beforeEach( async ( { admin, page } ) => {
+		await admin.createNewPost();
+
+		// Registering block must be after creation of Post.
+		await page.evaluate( () => {
+			const registerBlockType = window.wp.blocks.registerBlockType;
+
+			registerBlockType(
+				'my-plugin/block-that-does-not-support-renaming',
+				{
+					title: 'No Rename Support Block',
+					icon: 'smiley',
+					supports: {
+						renaming: false,
+					},
+					edit() {
+						return null;
+					},
+					save() {
+						return null;
+					},
+				}
+			);
+		} );
+	} );
+
+	test.describe( 'Dialog renaming', () => {
+		test( 'allows renaming of blocks that support the feature via dialog-based UI', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( { name: 'core/group' } );
+
+			// Select via keyboard.
+			await pageUtils.pressKeys( 'primary+a' );
+			await editor.clickBlockOptionsMenuItem( 'Rename' );
+
+			const renameMenuItem = page.getByRole( 'menuitem', {
+				name: 'Rename',
+				includeHidden: true, // the option is hidden behind modal but assertion is still valid.
+			} );
+
+			await expect( renameMenuItem ).toHaveAttribute(
+				'aria-expanded',
+				'true'
+			);
+
+			const renameModal = page.getByRole( 'dialog', {
+				name: 'Rename',
+			} );
+
+			// Check the Modal is perceivable.
+			await expect( renameModal ).toBeVisible();
+
+			const nameInput = renameModal.getByRole( 'textbox', {
+				name: 'Name',
+			} );
+
+			// Check focus is transferred into the input within the Modal.
+			await expect( nameInput ).toBeFocused();
+
+			const saveButton = renameModal.getByRole( 'button', {
+				name: 'Save',
+				type: 'submit',
+			} );
+
+			await expect( saveButton ).toBeDisabled();
+
+			await expect( nameInput ).toHaveAttribute( 'placeholder', 'Group' );
+
+			await nameInput.fill( 'My new name' );
+
+			await expect( saveButton ).toBeEnabled();
+
+			await saveButton.click();
+
+			await expect( renameModal ).toBeHidden();
+
+			// Check that focus is transferred back to original "Rename" menu item.
+			await expect( renameMenuItem ).toBeFocused();
+
+			await expect( renameMenuItem ).toHaveAttribute(
+				'aria-expanded',
+				'false'
+			);
+
+			await pageUtils.pressKeys( 'access+o' );
+			const listView = page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+			} );
+
+			await expect(
+				listView.getByRole( 'link', {
+					name: 'My new name',
+				} ),
+				'should reflect custom name in List View'
+			).toBeVisible();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					attributes: {
+						metadata: {
+							name: 'My new name',
+						},
+					},
+				},
+			] );
+
+			// Re-trigger the rename dialog from the List View.
+			await listView.getByRole( 'button', { name: 'Options' } ).click();
+			await renameMenuItem.click();
+
+			// Expect modal input to contain the custom name.
+			await expect( nameInput ).toHaveValue( 'My new name' );
+
+			// Clear the input of text content.
+			await nameInput.focus();
+			await pageUtils.pressKeys( 'primary+a' );
+			await page.keyboard.press( 'Delete' );
+
+			// Check placeholder for input is the original block name.
+			await expect( nameInput ).toHaveAttribute( 'placeholder', 'Group' );
+
+			// It should be possible to submit empty.
+			await expect( saveButton ).toBeEnabled();
+
+			await saveButton.click();
+
+			await expect(
+				listView.getByRole( 'link', {
+					name: 'Group',
+				} ),
+				'should reflect original name in List View'
+			).toBeVisible();
+
+			// Expect block to have no custom name (i.e. it should be reset to the original block name).
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					attributes: {
+						metadata: {
+							name: undefined,
+						},
+					},
+				},
+			] );
+		} );
+
+		test( 'does not allow renaming of blocks that do not support the feature', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await pageUtils.pressKeys( 'access+o' );
+
+			const listView = page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+			} );
+
+			await editor.insertBlock( {
+				name: 'my-plugin/block-that-does-not-support-renaming',
+			} );
+
+			// Select via keyboard.
+			await pageUtils.pressKeys( 'primary+a' );
+
+			const blockActionsTrigger = listView.getByRole( 'button', {
+				name: 'Options',
+			} );
+
+			await blockActionsTrigger.click();
+
+			const renameMenuItem = page
+				.getByRole( 'menu', {
+					name: 'Options',
+				} )
+				.getByRole( 'menuitem', {
+					name: 'Rename',
+				} );
+
+			// Expect the Rename menu item not to exist at all.
+			await expect( renameMenuItem ).toBeHidden();
+		} );
+
+		test( 'displays Rename action in related menu when block is not selected', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await pageUtils.pressKeys( 'access+o' );
+
+			const listView = page.getByRole( 'treegrid', {
+				name: 'Block navigation structure',
+			} );
+
+			await editor.insertBlock( {
+				name: 'core/heading',
+			} );
+
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+
+			// Select the Paragraph block.
+			await listView
+				.getByRole( 'link', {
+					name: 'Paragraph',
+				} )
+				.click();
+
+			// Trigger actions menu for the Heading (not the selected block).
+			const headingItem = listView.getByRole( 'gridcell', {
+				name: 'Heading',
+			} );
+
+			// The options menu button is a sibling of the menu item gridcell.
+			const headingItemActions = headingItem
+				.locator( '..' ) // parent selector.
+				.getByRole( 'button', {
+					name: 'Options',
+				} );
+
+			await headingItemActions.click();
+
+			// usage of `page` is required because the options menu is rendered
+			// into a slot outside of the treegrid.
+			const renameMenuItem = page
+				.getByRole( 'menu', {
+					name: 'Options',
+				} )
+				.getByRole( 'menuitem', {
+					name: 'Rename',
+				} );
+
+			// Expect the Rename menu item not to exist at all.
+			await expect( renameMenuItem ).toBeVisible();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-switcher.spec.js b/test/e2e/specs/editor/various/block-switcher.spec.js
new file mode 100644
index 00000000000000..41b0b1ee49c88c
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-switcher.spec.js
@@ -0,0 +1,250 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block Switcher', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'Should show the expected block transforms on the list block when the blocks are removed', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '- List content' );
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'alt+F10' );
+
+		const blockSwitcher = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'List' } );
+
+		// Verify the block switcher exists.
+		await expect( blockSwitcher ).toHaveAttribute(
+			'aria-haspopup',
+			'true'
+		);
+
+		// Verify the correct block transforms appear.
+		await blockSwitcher.click();
+		await expect(
+			page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
+		).toHaveText( [
+			'Paragraph',
+			'Heading',
+			'Quote',
+			'Columns',
+			'Details',
+			'Group',
+		] );
+	} );
+
+	test( 'Should show the expected block transforms on the list block when the quote block is removed', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Remove the quote block from the list of registered blocks.
+		await page.waitForFunction( () => {
+			try {
+				window.wp.blocks.unregisterBlockType( 'core/quote' );
+				return true;
+			} catch {
+				return false;
+			}
+		} );
+
+		// Insert a list block.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '- List content' );
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'alt+F10' );
+
+		const blockSwitcher = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'List' } );
+
+		// Verify the block switcher exists.
+		await expect( blockSwitcher ).toHaveAttribute(
+			'aria-haspopup',
+			'true'
+		);
+
+		// Verify the correct block transforms appear.
+		await blockSwitcher.click();
+		await expect(
+			page.getByRole( 'menu', { name: 'List' } ).getByRole( 'menuitem' )
+		).toHaveText( [
+			'Paragraph',
+			'Heading',
+			'Columns',
+			'Details',
+			'Group',
+		] );
+	} );
+
+	test( 'Should not show the block switcher if the block has no styles and cannot be removed', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a list block.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'alt+F10' );
+		const button = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Paragraph' } );
+		await expect( button ).toBeEnabled();
+
+		await editor.clickBlockOptionsMenuItem( 'Lock' );
+		await page.click( 'role=checkbox[name="Prevent removal"]' );
+		await page.click( 'role=button[name="Apply"]' );
+
+		// Verify the block switcher isn't enabled.
+		await expect( button ).toBeDisabled();
+	} );
+
+	test( 'Should show a message if there are no transforms or styles available', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a list block.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '- List content' );
+		await pageUtils.pressKeys( 'alt+F10' );
+
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'List item' } )
+			.click();
+		await expect( page.getByText( 'No transforms.' ) ).toBeVisible();
+	} );
+
+	test( 'Should show Columns block only if selected blocks are between limits (1-6)', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '- List content' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## I am a header' );
+		await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Multiple blocks selected' } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'menu', { name: 'Multiple blocks selected' } )
+				.getByRole( 'menuitem', { name: 'Columns' } )
+		).toBeVisible();
+	} );
+
+	test( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '- List content' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## I am a header' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'First paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Third paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Fourth paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Fifth paragraph' );
+		await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Multiple blocks selected' } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'menu', { name: 'Multiple blocks selected' } )
+				.getByRole( 'menuitem', { name: 'Columns' } )
+		).toBeHidden();
+	} );
+
+	test( 'should be able to transform to block variations', async ( {
+		editor,
+		page,
+	} ) => {
+		// This is the `stack` Group variation.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: {
+					type: 'flex',
+					orientation: 'vertical',
+				},
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '1' },
+				},
+			],
+		} );
+		// Transform to `Stack` variation.
+		await editor.clickBlockToolbarButton( 'Stack' );
+		const variations = page
+			.getByRole( 'menu', { name: 'Stack' } )
+			.getByRole( 'group' );
+		await expect(
+			variations.getByRole( 'menuitem', { name: 'Stack' } )
+		).toBeHidden();
+		await variations.getByRole( 'menuitem', { name: 'Row' } ).click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: expect.objectContaining( {
+					layout: {
+						type: 'flex',
+						flexWrap: 'nowrap',
+						orientation: undefined,
+					},
+				} ),
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: '1' },
+					},
+				],
+			},
+		] );
+		await editor.clickBlockToolbarButton( 'Row' );
+		await expect(
+			page.locator( 'role=menuitem[name="Stack"i]' )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-visibility.spec.js b/test/e2e/specs/editor/various/block-visibility.spec.js
new file mode 100644
index 00000000000000..6e4163f4ed5839
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-visibility.spec.js
@@ -0,0 +1,258 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	BlockVisibilityUtils: async ( { page }, use ) => {
+		await use( new BlockVisibilityUtils( { page } ) );
+	},
+} );
+
+test.describe( 'Block Visibility', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { page } ) => {
+		// Re-enable all blocks.
+		await page.evaluate( () => {
+			const blockTypes = window.wp.data
+				.select( 'core/blocks' )
+				.getBlockTypes();
+			window.wp.data
+				.dispatch( 'core/edit-post' )
+				.showBlockTypes( blockTypes );
+		} );
+	} );
+
+	test( 'should hide/show the block', async ( {
+		page,
+		BlockVisibilityUtils,
+	} ) => {
+		// Hide heading block.
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'Heading' } )
+			.uncheck();
+		await page
+			.getByRole( 'dialog', {
+				name: 'Preferences',
+			} )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Heading' );
+
+		await expect(
+			page
+				.getByRole( 'tabpanel', { name: 'Blocks' } )
+				.getByRole( 'option', { name: 'Heading' } ),
+			'Heading block should not be visible'
+		).toBeHidden();
+
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		// Show heading block again.
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Available block types' } )
+				.getByRole( 'checkbox', { name: 'Heading' } ),
+			'Heading block should be unchecked'
+		).not.toBeChecked();
+
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'Heading' } )
+			.check();
+		await page
+			.getByRole( 'dialog', {
+				name: 'Preferences',
+			} )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Block Library' } )
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Heading' );
+
+		await expect(
+			page
+				.getByRole( 'tabpanel', { name: 'Blocks' } )
+				.getByRole( 'option', { name: 'Heading' } ),
+			'Heading block should be visible'
+		).toBeVisible();
+	} );
+
+	test( 'should hide/show all blocks in a category at once', async ( {
+		page,
+		BlockVisibilityUtils,
+	} ) => {
+		// Hide Media category blocks.
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'Media', exact: true } )
+			.uncheck();
+		await page
+			.getByRole( 'dialog', {
+				name: 'Preferences',
+			} )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'tabpanel', { name: 'Blocks' } )
+				.getByRole( 'heading', { name: 'Media' } ),
+			'Media category should not be visible'
+		).toBeHidden();
+
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		// Show Media category blocks again.
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Available block types' } )
+				.getByRole( 'checkbox', { name: 'Media', exact: true } ),
+			'Media category should be unchecked'
+		).not.toBeChecked();
+
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'Media', exact: true } )
+			.check();
+		await page
+			.getByRole( 'dialog', {
+				name: 'Preferences',
+			} )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'tabpanel', { name: 'Blocks' } )
+				.getByRole( 'heading', { name: 'Media' } ),
+			'Media category should be visible'
+		).toBeVisible();
+	} );
+
+	test( 'should search for blocks by keyword', async ( {
+		page,
+		BlockVisibilityUtils,
+	} ) => {
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+		await page
+			.getByRole( 'searchbox', {
+				name: 'Search for a block',
+			} )
+			.fill( 'verse' );
+		const blockCategories = page
+			.getByRole( 'region', {
+				name: 'Available block types',
+			} )
+			.getByRole( 'group' );
+
+		await expect(
+			blockCategories,
+			'Only one category should be visible'
+		).toHaveCount( 1 );
+
+		await expect(
+			blockCategories.first().getByRole( 'checkbox', { name: 'Text' } ),
+			'Text category should be visible'
+		).toBeVisible();
+
+		const textCategoryBlocksList = blockCategories
+			.first()
+			.getByRole( 'list' );
+
+		await expect(
+			textCategoryBlocksList.getByRole( 'checkbox' ),
+			'Only one block should be visible'
+		).toHaveCount( 1 );
+
+		await expect(
+			textCategoryBlocksList.getByRole( 'checkbox', { name: 'Verse' } ),
+			'Verse block should be visible'
+		).toBeVisible();
+	} );
+
+	test( 'should reset hidden blocks', async ( {
+		page,
+		BlockVisibilityUtils,
+	} ) => {
+		await BlockVisibilityUtils.openBlockVisibilityManager();
+
+		// Hide Heading and List blocks.
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'Heading' } )
+			.uncheck();
+		await page
+			.getByRole( 'region', { name: 'Available block types' } )
+			.getByRole( 'checkbox', { name: 'List', exact: true } )
+			.uncheck();
+
+		// Reset hidden blocks.
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Available block types' } )
+				.getByRole( 'checkbox', { name: 'Heading' } ),
+			'Heading block should be checked'
+		).toBeChecked();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Available block types' } )
+				.getByRole( 'checkbox', { name: 'List', exact: true } ),
+			'List block should be checked'
+		).toBeChecked();
+	} );
+} );
+
+class BlockVisibilityUtils {
+	constructor( { page, admin, requestUtils } ) {
+		this.page = page;
+		this.admin = admin;
+		this.requestUtils = requestUtils;
+	}
+	async openBlockVisibilityManager() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await this.page
+			.getByRole( 'menuitem', { name: 'Preferences' } )
+			.click();
+		await this.page.getByRole( 'tab', { name: 'Blocks' } ).click();
+	}
+}
diff --git a/test/e2e/specs/editor/various/change-detection.spec.js b/test/e2e/specs/editor/various/change-detection.spec.js
new file mode 100644
index 00000000000000..12d13b4890e368
--- /dev/null
+++ b/test/e2e/specs/editor/various/change-detection.spec.js
@@ -0,0 +1,556 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test: base,
+	expect,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ * @typedef {import('@playwright/test').Page} Page
+ */
+
+/** @type {ReturnType<typeof base.extend<{changeDetectionUtils: ChangeDetectionUtils}>>} */
+const test = base.extend( {
+	changeDetectionUtils: async ( { page }, use ) => {
+		await use( new ChangeDetectionUtils( { page } ) );
+	},
+} );
+
+const POST_URLS = [
+	'/wp/v2/posts',
+	`rest_route=${ encodeURIComponent( '/wp/v2/posts' ) }`,
+];
+
+test.describe( 'Change detection', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { changeDetectionUtils } ) => {
+		await changeDetectionUtils.releaseSaveIntercept();
+	} );
+
+	test( 'Should not save on new unsaved post', async ( {
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		const getHadInterceptedSave =
+			await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		await expect.poll( getHadInterceptedSave ).toBe( false );
+	} );
+
+	test( 'Should autosave post', async ( {
+		page,
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Force autosave to occur immediately.
+		await Promise.all( [
+			page.evaluate( () =>
+				window.wp.data.dispatch( 'core/editor' ).autosave()
+			),
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'saved' } )
+			).toBeDisabled(),
+		] );
+
+		// Autosave draft as same user should do full save, i.e. not dirty.
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( false );
+	} );
+
+	test( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async ( {
+		page,
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Toggle post as needing review (not persisted for autosave).
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
+		await page.getByRole( 'radio', { name: 'Pending' } ).click();
+		// Force autosave to occur immediately.
+		await Promise.all( [
+			page.evaluate( () =>
+				window.wp.data.dispatch( 'core/editor' ).autosave()
+			),
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'saved' } )
+			).toBeHidden(),
+		] );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt to confirm unsaved changes for autosaved published post', async ( {
+		page,
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		await editor.publishPost();
+
+		// Close publish panel.
+		await page
+			.getByRole( 'region', { name: 'Editor publish' } )
+			.getByRole( 'button', { name: 'Close panel' } )
+			.click();
+
+		const updateButton = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save' } );
+		await expect( updateButton ).toBeDisabled();
+
+		// Should be dirty after autosave change of published post.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.type( '!' );
+
+		// Force autosave to occur immediately.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/editor' ).autosave()
+		);
+		await expect( updateButton ).toBeEnabled();
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should not prompt to confirm unsaved changes for new post', async ( {
+		changeDetectionUtils,
+	} ) => {
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( false );
+	} );
+
+	test( 'Should prompt to confirm unsaved changes for new post with initial edits', async ( {
+		admin,
+		changeDetectionUtils,
+	} ) => {
+		await admin.createNewPost( {
+			title: 'My New Post',
+			content: 'My content',
+			excerpt: 'My excerpt',
+		} );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if property changed without save', async ( {
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if content added without save', async ( {
+		editor,
+		page,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Paragraph' );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should not prompt if changes saved', async ( {
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		await editor.saveDraft();
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( false );
+	} );
+
+	test( 'Should not prompt if changes saved right after typing', async ( {
+		page,
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Hello World' );
+
+		await editor.saveDraft();
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( false );
+	} );
+
+	test( 'Should not save if all changes saved', async ( {
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		await editor.saveDraft();
+
+		const getHadInterceptedSave =
+			await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		await expect.poll( getHadInterceptedSave ).toBe( false );
+	} );
+
+	test( 'Should prompt if save failed', async ( {
+		page,
+		context,
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		await context.setOffline( true );
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+		// Ensure save update fails and presents button.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor content' } )
+				.getByText( 'Updating failed. You are probably offline.' )
+		).toBeVisible();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save draft' } )
+		).toBeEnabled();
+
+		// Need to disable offline to allow reload.
+		await context.setOffline( false );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if changes and save is in-flight', async ( {
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Hold the posts request so we don't deal with race conditions of the
+		// save completing early. Other requests should be allowed to continue,
+		// for example the page reload test.
+		await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if changes made while save is in-flight', async ( {
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Hold the posts request so we don't deal with race conditions of the
+		// save completing early. Other requests should be allowed to continue,
+		// for example the page reload test.
+		await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World!' );
+
+		await changeDetectionUtils.releaseSaveIntercept();
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if property changes made while save is in-flight, and save completes', async ( {
+		page,
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Hold the posts request so we don't deal with race conditions of the
+		// save completing early.
+		await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		// Dirty post while save is in-flight.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.type( '!' );
+
+		// Allow save to complete. Disabling interception flushes pending.
+		await Promise.all( [
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'Saved' } )
+			).toBeDisabled(),
+			changeDetectionUtils.releaseSaveIntercept(),
+		] );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'Should prompt if block revision is made while save is in-flight, and save completes', async ( {
+		page,
+		editor,
+		pageUtils,
+		changeDetectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Hold the posts request so we don't deal with race conditions of the
+		// save completing early.
+		await changeDetectionUtils.interceptSave();
+
+		// Keyboard shortcut Ctrl+S save.
+		await pageUtils.pressKeys( 'primary+s' );
+
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Paragraph' );
+
+		// Allow save to complete. Disabling interception flushes pending.
+		await Promise.all( [
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'Saved' } )
+			).toBeDisabled(),
+			changeDetectionUtils.releaseSaveIntercept(),
+		] );
+
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( true );
+	} );
+
+	test( 'should save posts without titles and persist and overwrite the auto draft title', async ( {
+		page,
+		editor,
+		changeDetectionUtils,
+	} ) => {
+		// Enter content.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Paragraph' );
+
+		// Save.
+		await editor.saveDraft();
+
+		// Verify that the title is empty.
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toHaveText( '' );
+
+		// Verify that the post is not dirty.
+		expect( await changeDetectionUtils.getIsDirty() ).toBe( false );
+	} );
+
+	test( 'should not prompt to confirm unsaved changes when trashing an existing post', async ( {
+		page,
+		editor,
+	} ) => {
+		// Enter title.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+
+		// Save.
+		await editor.saveDraft();
+
+		// Trash post.
+		await editor.openDocumentSettingsSidebar();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Actions' } )
+			.click();
+		await page
+			.getByRole( 'menu' )
+			.getByRole( 'menuitem', { name: 'Move to trash' } )
+			.click();
+		await page
+			.getByRole( 'dialog' )
+			.getByRole( 'button', { name: 'Trash' } )
+			.click();
+
+		await expect( page ).toHaveURL( '/wp-admin/edit.php?post_type=post' );
+	} );
+
+	test( 'consecutive edits to the same attribute should mark the post as dirty after a save', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Open the sidebar block settings.
+		await editor.openDocumentSettingsSidebar();
+
+		// Insert a paragraph.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'Hello, World!' );
+
+		// Save and wait till the post is clean.
+		await Promise.all( [
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'saved' } )
+			).toBeDisabled(),
+			pageUtils.pressKeys( 'primary+s' ),
+		] );
+
+		// Change the paragraph's `drop cap`.
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await page
+			.getByRole( 'menu', { name: 'Typography options' } )
+			.getByRole( 'menuitemcheckbox', { name: 'Show drop cap' } )
+			.click();
+
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'checkbox', { name: 'Drop cap' } )
+			.setChecked( true );
+
+		// Check that the post is dirty.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save draft' } )
+		).toBeEnabled();
+
+		// Save and wait till the post is clean.
+		await Promise.all( [
+			expect(
+				page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'saved' } )
+			).toBeDisabled(),
+			pageUtils.pressKeys( 'primary+s' ),
+		] );
+
+		// Change the paragraph's `drop cap` again.
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'checkbox', { name: 'Drop cap' } )
+			.setChecked( false );
+
+		// Check that the post is dirty.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save draft' } )
+		).toBeEnabled();
+	} );
+} );
+
+class ChangeDetectionUtils {
+	/** @type {Page} */
+	#page;
+	/** @type {(() => void) | null} */
+	#continueInterceptedSave = null;
+
+	constructor( { page } ) {
+		this.#page = page;
+	}
+
+	/**
+	 * @return {Promise<boolean>} Whether the post is dirty.
+	 */
+	getIsDirty = async () => {
+		return await test.step(
+			'assert the post is dirty',
+			async () => {
+				const hasDialog = new Promise( ( resolve ) => {
+					this.#page.on( 'dialog', ( dialog ) => {
+						void dialog.accept();
+						resolve( dialog.type() === 'beforeunload' );
+					} );
+					this.#page.on( 'load', () => resolve( false ) );
+				} );
+				await this.#page.reload( { waitUntil: 'commit' } ); // No need to wait for the full load.
+				return hasDialog;
+			},
+			{ box: true }
+		);
+	};
+
+	interceptSave = async () => {
+		let hadInterceptedSave = false;
+
+		const deferred = new Promise( ( res ) => {
+			this.#continueInterceptedSave = res;
+		} );
+
+		await this.#page.route(
+			( url ) =>
+				POST_URLS.some( ( postUrl ) => url.href.includes( postUrl ) ),
+			async ( route ) => {
+				hadInterceptedSave = true;
+				await deferred;
+				await route.continue();
+			}
+		);
+
+		return () => hadInterceptedSave;
+	};
+
+	releaseSaveIntercept = async () => {
+		this.#continueInterceptedSave?.();
+		await this.#page.unroute( ( url ) =>
+			POST_URLS.some( ( postUrl ) => url.href.includes( postUrl ) )
+		);
+		this.#continueInterceptedSave = null;
+	};
+}
diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
index 0ea1908cd90ef5..71522c1d439a54 100644
--- a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
+++ b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
@@ -17,7 +17,7 @@ test.describe( 'Compatibility with classic editor', () => {
 		editor,
 	} ) => {
 		await editor.insertBlock( { name: 'core/html' } );
-		await page.focus( 'role=textbox[name="HTML"i]' );
+		await editor.canvas.locator( 'role=textbox[name="HTML"i]' ).focus();
 		await page.keyboard.type( '<a>' );
 		await page.keyboard.type( 'Random Link' );
 		await page.keyboard.type( '</a> ' );
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..9784aea1ee068f
--- /dev/null
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -0,0 +1,131 @@
+/**
+ * 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.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Hello</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i]' )
+			.click();
+		await page.keyboard.type( ' World' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	// See: https://github.com/WordPress/gutenberg/pull/54618
+	test( 'should be able to edit the content of deeply nested blocks', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add content only locked block in the code editor
+		await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Hello</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i]' )
+			.click();
+		await page.keyboard.type( ' WP' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: {
+					layout: { type: 'constrained' },
+					templateLock: 'contentOnly',
+				},
+				innerBlocks: [
+					{
+						name: 'core/group',
+						attributes: { layout: { type: 'constrained' } },
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: 'Hello WP' },
+							},
+						],
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'should be able to automatically stop temporarily modify as blocks when an outside block is selected', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add content only locked block in the code editor
+		await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+			<div class="wp-block-group"><!-- wp:paragraph -->
+			<p>Locked block a</p>
+			<!-- /wp:paragraph -->
+			
+			<!-- wp:paragraph -->
+			<p>Locked block b</p>
+			<!-- /wp:paragraph --></div>
+			<!-- /wp:group -->
+			
+			<!-- wp:heading -->
+			<h2 class="wp-block-heading"><strong>outside block</strong></h2>
+			<!-- /wp:heading -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		// Select the content locked block.
+		await editor.canvas
+			.locator( 'role=document[name="Block: Group"i]' )
+			.click();
+		// Press modify to temporarily edit as blocks.
+		await editor.clickBlockOptionsMenuItem( 'Modify' );
+		// Selected a nest paragraph verify Block is not content locked
+		// Styles can be changed and nested blocks can be removed
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i]' )
+			.first()
+			.click();
+		await expect(
+			page.locator( '.color-block-support-panel' )
+		).toBeAttached();
+		await editor.clickBlockOptionsMenuItem( 'Delete' );
+		// Select an outside block
+		await editor.canvas
+			.locator( 'role=document[name="Block: Heading"i]' )
+			.click();
+		// Select a locked nested paragraph block again
+		await pageUtils.pressKeys( 'ArrowUp' );
+		// Block is content locked again simple styles like position can not be changed.
+		await expect(
+			page.locator( '.color-block-support-panel' )
+		).not.toBeAttached();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index c7041a8634e323..bca062b06416a1 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -13,16 +13,18 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'Copy - collapsed selection' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
+		await pageUtils.pressKeys( 'primary+c' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
 		await page.keyboard.press( 'ArrowDown' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -31,17 +33,20 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		await page.locator( 'role=button[name="Add default block"i]' ).click();
 		await page.keyboard.type( 'Cut - collapsed selection' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
+		await pageUtils.pressKeys( 'primary+x' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 		await page.keyboard.press( 'ArrowDown' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -52,15 +57,15 @@ test.describe( 'Copy/cut/paste', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/spacer' } );
 		// At this point the spacer wrapper should be focused.
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
+		await pageUtils.pressKeys( 'primary+c' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
 		// The block appender is only visible when there's no selection.
 		await page.evaluate( () => {
 			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
 		} );
-		await page.click( 'role=button[name="Add default block"i]' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -71,15 +76,15 @@ test.describe( 'Copy/cut/paste', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/spacer' } );
 		// At this point the spacer wrapper should be focused.
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
+		await pageUtils.pressKeys( 'primary+x' );
 		expect( await editor.getEditedPostContent() ).toBe( '' );
 
 		// The block appender is only visible when there's no selection.
 		await page.evaluate( () => {
 			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock();
 		} );
-		await page.click( 'role=button[name="Add default block"i]' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -88,21 +93,23 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 
 		await page.keyboard.type( 'First block' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Second block' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
 
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
+		await pageUtils.pressKeys( 'primary+c' );
 		await page.keyboard.press( 'ArrowRight' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -113,17 +120,17 @@ test.describe( 'Copy/cut/paste', () => {
 	} ) => {
 		await editor.insertBlock( { name: 'core/shortcode' } );
 		await page.keyboard.type( '[my-shortcode]' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
 
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
+		await pageUtils.pressKeys( 'primary+c' );
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'ArrowRight' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 
 		await editor.insertBlock( { name: 'core/paragraph' } );
 		await page.keyboard.type( 'Pasted: ' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -143,7 +150,7 @@ test.describe( 'Copy/cut/paste', () => {
 			],
 		} );
 		// Cut group.
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
+		await pageUtils.pressKeys( 'primary+x' );
 		expect( await editor.getEditedPostContent() ).toBe( '' );
 
 		await page.keyboard.press( 'Enter' );
@@ -170,7 +177,7 @@ test.describe( 'Copy/cut/paste', () => {
 		} );
 
 		// Paste.
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 
 		// Blocks should only be modified once, not twice with new clientIds on a single paste action.
 		const blocksUpdated = await page.evaluate(
@@ -197,7 +204,7 @@ test.describe( 'Copy/cut/paste', () => {
 			],
 		} );
 		// Cut group.
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
+		await pageUtils.pressKeys( 'primary+x' );
 		expect( await editor.getEditedPostContent() ).toBe( '' );
 
 		// Insert a non textual element (a spacer)
@@ -224,7 +231,7 @@ test.describe( 'Copy/cut/paste', () => {
 			} );
 		} );
 
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 
 		// Paste should be handled on non-textual elements and only handled once.
 		const blocksUpdated = await page.evaluate(
@@ -240,25 +247,31 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'A block' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'B block' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from both blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 5 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new block at the top of the document to paste there.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -267,26 +280,32 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'A block' );
 		await editor.insertBlock( { name: 'core/spacer' } );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'B block' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from outer blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 5 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new block at the top of the document to paste there.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -295,25 +314,31 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'A block' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'B block' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from both blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 5 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new block at the top of the document to paste there.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -322,26 +347,32 @@ test.describe( 'Copy/cut/paste', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'A block' );
 		await editor.insertBlock( { name: 'core/spacer' } );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'B block' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from outer blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 5 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new block at the top of the document to paste there.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -356,19 +387,23 @@ test.describe( 'Copy/cut/paste', () => {
 		await page.keyboard.type( 'Paragraph' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from outer blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 2 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'x' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new block at the top of the document to paste there.
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -383,54 +418,309 @@ test.describe( 'Copy/cut/paste', () => {
 		await page.keyboard.type( 'Paragraph' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 		// Partial select from outer blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 2 );
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'c' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowLeft' );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await pageUtils.pressKeys( 'primary+ArrowLeft' );
 		// Sometimes the caret has not moved to the correct position before pressing Enter.
 		// @see https://github.com/WordPress/gutenberg/issues/40303#issuecomment-1109434887
-		await page.waitForFunction(
-			() => window.getSelection().type === 'Caret'
-		);
+		await expect
+			.poll( async () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().type )
+			)
+			.toBe( 'Caret' );
 		// Create a new code block to paste there.
 		await editor.insertBlock( { name: 'core/code' } );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	test( 'should paste single line in post title', async ( {
-		page,
 		pageUtils,
+		editor,
 	} ) => {
 		// This test checks whether we are correctly handling single line
 		// pasting in the post title. Previously we were accidentally falling
 		// back to default browser behaviour, allowing the browser to insert
 		// unfiltered HTML. When we swap out the post title in the post editor
 		// with the proper block, this test can be removed.
-		await pageUtils.setClipboardData( {
+		pageUtils.setClipboardData( {
 			html: '<span style="border: 1px solid black">Hello World</span>',
 		} );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		// Expect the span to be filtered out.
 		expect(
-			await page.evaluate( () => document.activeElement.innerHTML )
+			await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.innerHTML )
 		).toMatchSnapshot();
 	} );
 
 	test( 'should paste single line in post title with existing content', async ( {
 		page,
 		pageUtils,
+		editor,
 	} ) => {
 		await page.keyboard.type( 'ab' );
 		await page.keyboard.press( 'ArrowLeft' );
-		await pageUtils.setClipboardData( {
+		pageUtils.setClipboardData( {
 			html: '<span style="border: 1px solid black">x</span>',
 		} );
-		await pageUtils.pressKeyWithModifier( 'primary', 'v' );
+		await pageUtils.pressKeys( 'primary+v' );
 		// Ensure the selection is correct.
 		await page.keyboard.type( 'y' );
 		expect(
-			await page.evaluate( () => document.activeElement.innerHTML )
+			await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.innerHTML )
 		).toBe( 'axyb' );
 	} );
+
+	test( 'should paste preformatted in list', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		pageUtils.setClipboardData( {
+			html: '<pre>x</pre>',
+			plainText: 'x',
+		} );
+		await editor.insertBlock( { name: 'core/list' } );
+		await pageUtils.pressKeys( 'primary+v' );
+		// Ensure the selection is correct.
+		await page.keyboard.type( 'y' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should paste list in list', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		pageUtils.setClipboardData( { html: '<ul><li>x</li><li>y</li></ul>' } );
+		await editor.insertBlock( { name: 'core/list' } );
+		await pageUtils.pressKeys( 'primary+v' );
+		// Ensure the selection is correct.
+		await page.keyboard.type( '‸' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should paste paragraphs in list', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		pageUtils.setClipboardData( { html: '<p>x</p><p>y</p>' } );
+		await editor.insertBlock( { name: 'core/list' } );
+		await pageUtils.pressKeys( 'primary+v' );
+		// Ensure the selection is correct.
+		await page.keyboard.type( '‸' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should link selection', async ( { pageUtils, editor } ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'a' },
+		} );
+		await pageUtils.pressKeys( 'primary+a' );
+		pageUtils.setClipboardData( {
+			plainText: 'https://wordpress.org/gutenberg',
+			html: '<a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a>',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '<a href="https://wordpress.org/gutenberg">a</a>',
+				},
+			},
+		] );
+	} );
+
+	test( 'should link selection on internal paste', async ( {
+		pageUtils,
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'https://w.org' },
+		} );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await page.keyboard.type( 'a' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '<a href="https://w.org">a</a>',
+				},
+			},
+		] );
+	} );
+
+	test( 'should paste link to formatted text', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '<strong>test</strong>' },
+		} );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		pageUtils.setClipboardData( {
+			plainText: 'https://wordpress.org/gutenberg',
+			html: 'https://wordpress.org/gutenberg',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should auto-link', async ( { pageUtils, editor } ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'a' },
+		} );
+		pageUtils.setClipboardData( {
+			plainText: 'https://wordpress.org/gutenberg',
+			html: 'https://wordpress.org/gutenberg',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'<a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a>a',
+				},
+			},
+		] );
+	} );
+
+	test( 'should embed on paste', async ( { pageUtils, editor } ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		pageUtils.setClipboardData( {
+			plainText: 'https://www.youtube.com/watch?v=FcTLMTyD2DU',
+			html: 'https://www.youtube.com/watch?v=FcTLMTyD2DU',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{ name: 'core/embed' },
+		] );
+	} );
+
+	test( 'should not link selection for non http(s) protocol', async ( {
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'a',
+			},
+		} );
+		await pageUtils.pressKeys( 'primary+a' );
+		pageUtils.setClipboardData( {
+			plainText: 'movie: b',
+			html: 'movie: b',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'movie: b',
+				},
+			},
+		] );
+	} );
+
+	test( 'should inherit existing block type on paste', async ( {
+		pageUtils,
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/heading',
+			attributes: {
+				content: 'A',
+			},
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'b',
+			},
+		} );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+c' );
+
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( '[]' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '[A',
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'b]',
+				},
+			},
+		] );
+	} );
+
+	// See https://github.com/WordPress/gutenberg/pull/61900
+	test( 'should inherit heading attributes on paste split', async ( {
+		pageUtils,
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/heading',
+			attributes: {
+				content: 'AB',
+			},
+		} );
+		await page.keyboard.press( 'ArrowRight' );
+
+		pageUtils.setClipboardData( {
+			html: '<p>a</p><p>b</p>',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: {
+					content: 'Aa',
+					level: 2,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'bB',
+				},
+			},
+		] );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/core-settings.spec.js b/test/e2e/specs/editor/various/core-settings.spec.js
new file mode 100644
index 00000000000000..9dddc273e6b16e
--- /dev/null
+++ b/test/e2e/specs/editor/various/core-settings.spec.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function getOptionsValues( selector, admin, page ) {
+	await admin.visitAdminPage( 'options.php' );
+	return page.evaluate( ( theSelector ) => {
+		const inputs = Array.from( document.querySelectorAll( theSelector ) );
+		return inputs.reduce( ( memo, input ) => {
+			memo[ input.id ] = input.value;
+			return memo;
+		}, {} );
+	}, selector );
+}
+
+// It might make sense to include a similar test in WP core (or move this one over).
+// See discussion here: https://github.com/WordPress/gutenberg/pull/32797#issuecomment-864192088.
+test.describe( 'Settings', () => {
+	test( 'Regression: updating a specific option will only change its value and will not corrupt others', async ( {
+		page,
+		admin,
+	} ) => {
+		// We won't select the option that we updated and will also remove some
+		// _transient options that seem to change at every update.
+		const optionsInputsSelector =
+			'form#all-options table.form-table input:not([id*="_transient"]):not([id="blogdescription"])';
+		const optionsBefore = await getOptionsValues(
+			optionsInputsSelector,
+			admin,
+			page
+		);
+
+		await admin.visitAdminPage( 'options-general.php' );
+		await page
+			.getByRole( 'textbox', { name: 'Tagline' } )
+			.fill( 'Just another Gutenberg site' );
+		await page.getByRole( 'button', { name: 'Save Changes' } ).click();
+
+		const optionsAfter = await getOptionsValues(
+			optionsInputsSelector,
+			admin,
+			page
+		);
+
+		Object.entries( optionsBefore ).forEach( ( optionBefore ) => {
+			const [ id ] = optionBefore;
+			const optionAfter = [ id, optionsAfter[ id ] ];
+			expect( optionAfter ).toStrictEqual( optionBefore );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/datepicker.spec.js b/test/e2e/specs/editor/various/datepicker.spec.js
new file mode 100644
index 00000000000000..00030efa1fe274
--- /dev/null
+++ b/test/e2e/specs/editor/various/datepicker.spec.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+// Set browser to a timezone that's different to `timezone`.
+test.use( {
+	timezoneId: 'America/New_York',
+} );
+
+// The `timezone` setting exposed via REST API only accepts `UTC`
+// and timezone strings by location.
+const TIMEZONES = [ 'Pacific/Honolulu', 'UTC', 'Australia/Sydney' ];
+
+TIMEZONES.forEach( ( timezone ) => {
+	test.describe( `Datepicker: ${ timezone }`, () => {
+		let orignalTimezone;
+		test.beforeAll( async ( { requestUtils } ) => {
+			orignalTimezone = ( await requestUtils.getSiteSettings() ).timezone;
+			await requestUtils.updateSiteSettings( { timezone } );
+		} );
+
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.createNewPost();
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.updateSiteSettings( {
+				timezone: orignalTimezone,
+			} );
+		} );
+
+		test( 'should show the publishing date as "Immediately" if the date is not altered', async ( {
+			page,
+		} ) => {
+			await expect(
+				page.getByRole( 'button', { name: 'Change date' } )
+			).toHaveText( 'Immediately' );
+		} );
+
+		test( 'should show the publishing date if the date is in the past', async ( {
+			page,
+		} ) => {
+			const datepicker = page.getByRole( 'button', {
+				name: 'Change date',
+			} );
+			await datepicker.click();
+
+			// Change the publishing date to a year in the future.
+			await page
+				.getByRole( 'group', { name: 'Date' } )
+				.getByRole( 'spinbutton', { name: 'Year' } )
+				.click();
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'Escape' );
+
+			// The expected date format will be "Sep 26, 2018 11:52 pm".
+			await expect(
+				page.getByRole( 'button', { name: 'Change date' } )
+			).toContainText( /^[A-Za-z]+\s\d{1,2},\s\d{1,4}/ );
+		} );
+
+		test( 'should show the publishing date if the date is in the future', async ( {
+			page,
+		} ) => {
+			const datepicker = page.getByRole( 'button', {
+				name: 'Change date',
+			} );
+			await datepicker.click();
+
+			// Change the publishing date to a year in the future.
+			await page
+				.getByRole( 'group', { name: 'Date' } )
+				.getByRole( 'spinbutton', { name: 'Year' } )
+				.click();
+			await page.keyboard.press( 'ArrowUp' );
+			await page.keyboard.press( 'Escape' );
+
+			// The expected date format will be "Sep 26, 2018 11:52 pm".
+			await expect(
+				page.getByRole( 'button', { name: 'Change date' } )
+			).toContainText( /^[A-Za-z]+\s\d{1,2},\s\d{1,4}/ );
+		} );
+
+		test( 'should show the publishing date as "Immediately" if the date is cleared', async ( {
+			page,
+		} ) => {
+			const datepicker = page.getByRole( 'button', {
+				name: 'Change date',
+			} );
+			await datepicker.click();
+
+			// Change the publishing date to a year in the future.
+			await page
+				.getByRole( 'group', { name: 'Date' } )
+				.getByRole( 'spinbutton', { name: 'Year' } )
+				.click();
+			await page.keyboard.press( 'ArrowUp' );
+			await page.keyboard.press( 'Escape' );
+
+			// Clear the date.
+			await datepicker.click();
+			await page
+				.getByLabel( 'Change publish date' )
+				.getByRole( 'button', { name: 'Now' } )
+				.click();
+
+			await expect(
+				page.getByRole( 'button', { name: 'Change date' } )
+			).toHaveText( 'Immediately' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js
index 59b7ad86abe07c..704817f4a2c38a 100644
--- a/test/e2e/specs/editor/various/draggable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
 /**
  * WordPress dependencies
  */
@@ -13,6 +18,14 @@ test.use( {
 	},
 } );
 
+async function dragTo( page, x, y ) {
+	// Call the move function twice to make sure the `dragOver` event is sent.
+	// @see https://github.com/microsoft/playwright/issues/17153
+	for ( let i = 0; i < 2; i += 1 ) {
+		await page.mouse.move( x, y );
+	}
+}
+
 test.describe( 'Draggable block', () => {
 	test.beforeEach( async ( { admin } ) => {
 		await admin.createNewPost();
@@ -37,7 +50,9 @@ test.describe( 'Draggable block', () => {
 <p>2</p>
 <!-- /wp:paragraph -->` );
 
-		await page.focus( 'role=document[name="Paragraph block"i] >> text=2' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i] >> text=2' )
+			.focus();
 		await editor.showBlockToolbar();
 
 		const dragHandle = page.locator(
@@ -49,18 +64,11 @@ test.describe( 'Draggable block', () => {
 		await page.mouse.down();
 
 		// Move to and hover on the upper half of the paragraph block to trigger the indicator.
-		const firstParagraph = page.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+		const firstParagraph = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				firstParagraphBound.x,
-				firstParagraphBound.y
-			);
-		}
+		await dragTo( page, firstParagraphBound.x, firstParagraphBound.y );
 
 		await expect(
 			page.locator( 'data-testid=block-draggable-chip >> visible=true' )
@@ -107,7 +115,9 @@ test.describe( 'Draggable block', () => {
 <p>2</p>
 <!-- /wp:paragraph -->` );
 
-		await page.focus( 'role=document[name="Paragraph block"i] >> text=1' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i] >> text=1' )
+			.focus();
 		await editor.showBlockToolbar();
 
 		const dragHandle = page.locator(
@@ -119,18 +129,15 @@ test.describe( 'Draggable block', () => {
 		await page.mouse.down();
 
 		// Move to and hover on the bottom half of the paragraph block to trigger the indicator.
-		const secondParagraph = page.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+		const secondParagraph = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				secondParagraphBound.x,
-				secondParagraphBound.y + secondParagraphBound.height * 0.75
-			);
-		}
+		await dragTo(
+			page,
+			secondParagraphBound.x + 32,
+			secondParagraphBound.y + secondParagraphBound.height * 0.75
+		);
 
 		await expect(
 			page.locator( 'data-testid=block-draggable-chip >> visible=true' )
@@ -188,7 +195,9 @@ test.describe( 'Draggable block', () => {
 			],
 		} );
 
-		await page.focus( 'role=document[name="Paragraph block"i] >> text=2' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i] >> text=2' )
+			.focus();
 		await editor.showBlockToolbar();
 
 		const dragHandle = page.locator(
@@ -200,18 +209,15 @@ test.describe( 'Draggable block', () => {
 		await page.mouse.down();
 
 		// Move to and hover on the left half of the paragraph block to trigger the indicator.
-		const firstParagraph = page.locator(
-			'role=document[name="Paragraph block"i] >> text=1'
+		const firstParagraph = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i] >> text=1'
 		);
 		const firstParagraphBound = await firstParagraph.boundingBox();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				firstParagraphBound.x + firstParagraphBound.width * 0.25,
-				firstParagraphBound.y
-			);
-		}
+		await dragTo(
+			page,
+			firstParagraphBound.x + firstParagraphBound.width * 0.25,
+			firstParagraphBound.y
+		);
 
 		await expect(
 			page.locator( 'data-testid=block-draggable-chip >> visible=true' )
@@ -267,7 +273,9 @@ test.describe( 'Draggable block', () => {
 			],
 		} );
 
-		await page.focus( 'role=document[name="Paragraph block"i] >> text=1' );
+		await editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i] >> text=1' )
+			.focus();
 		await editor.showBlockToolbar();
 
 		const dragHandle = page.locator(
@@ -279,18 +287,15 @@ test.describe( 'Draggable block', () => {
 		await page.mouse.down();
 
 		// Move to and hover on the right half of the paragraph block to trigger the indicator.
-		const secondParagraph = page.locator(
-			'role=document[name="Paragraph block"i] >> text=2'
+		const secondParagraph = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i] >> text=2'
 		);
 		const secondParagraphBound = await secondParagraph.boundingBox();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				secondParagraphBound.x + secondParagraphBound.width * 0.75,
-				secondParagraphBound.y
-			);
-		}
+		await dragTo(
+			page,
+			secondParagraphBound.x + secondParagraphBound.width * 0.75,
+			secondParagraphBound.y
+		);
 
 		await expect(
 			page.locator( 'data-testid=block-draggable-chip >> visible=true' )
@@ -323,4 +328,175 @@ test.describe( 'Draggable block', () => {
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->` );
 	} );
+
+	test( 'can drag and drop to an empty parent block like Group or Columns', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Insert a row.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				layout: { type: 'flex', flexWrap: 'nowrap' },
+			},
+		} );
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+					],
+				},
+				{ name: 'core/column' },
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '3' },
+						},
+					],
+				},
+			],
+		} );
+
+		// Deselect the block to hide the block toolbar.
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
+
+		const testImageName = '10x10_e2e_test_image_z9T8jK.png';
+		const testImagePath = path.join(
+			__dirname,
+			'../../../assets',
+			testImageName
+		);
+
+		{
+			const { dragOver, drop } =
+				await pageUtils.dragFiles( testImagePath );
+
+			const rowBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Row',
+			} );
+			const rowAppender = rowBlock.getByRole( 'button', {
+				name: 'Add block',
+			} );
+
+			await dragOver( rowAppender );
+			// Expect to show the drop indicator blue background.
+			// This is technically an implementation detail but easier to test in this case.
+			await expect(
+				rowAppender,
+				'Dragging over the button block appender should show the blue background'
+			).toHaveCSS( 'background-color', 'rgb(0, 124, 186)' );
+
+			const { width: rowWidth } = await rowBlock.boundingBox();
+			await dragOver( rowBlock, { position: { x: rowWidth - 10 } } );
+			// Expect to show the drop indicator blue background.
+			// This is technically an implementation detail but easier to test in this case.
+			await expect(
+				rowAppender,
+				'Dragging over the empty group block but outside the appender should still show the blue background'
+			).toHaveCSS( 'background-color', 'rgb(0, 124, 186)' );
+
+			await drop();
+			await expect( rowAppender ).toBeHidden();
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/group',
+					innerBlocks: [ { name: 'core/image' } ],
+				},
+				{ name: 'core/columns' },
+			] );
+		}
+
+		{
+			const { dragOver, drop } =
+				await pageUtils.dragFiles( testImagePath );
+
+			const columnAppender = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Column',
+				} )
+				.getByRole( 'button', {
+					name: 'Add block',
+					includeHidden: true,
+				} );
+
+			await dragOver( columnAppender );
+			// Expect to show the drop indicator blue background.
+			// This is technically an implementation detail but easier to test in this case.
+			await expect( columnAppender ).toHaveCSS(
+				'background-color',
+				'rgb(0, 124, 186)'
+			);
+
+			await drop();
+			await expect( columnAppender ).toBeHidden();
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{ name: 'core/group' },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{ name: 'core/column' },
+						{
+							name: 'core/column',
+							innerBlocks: [ { name: 'core/image' } ],
+						},
+						{ name: 'core/column' },
+					],
+				},
+			] );
+		}
+	} );
+
+	test( 'can directly drag an image', async ( { page, editor } ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: { layout: { type: 'constrained' } },
+			innerBlocks: [ { name: 'core/paragraph' } ],
+		} );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+
+		const groupBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Group',
+		} );
+
+		await imageBlock.hover();
+		await page.mouse.down();
+		const groupBlockBox = await groupBlock.boundingBox();
+		await dragTo(
+			page,
+			groupBlockBox.x + groupBlockBox.width * 0.5,
+			groupBlockBox.y + groupBlockBox.height * 0.5
+		);
+		await page.mouse.up();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: {
+					tagName: 'div',
+					layout: { type: 'constrained' },
+				},
+				innerBlocks: [
+					{
+						name: 'core/image',
+						attributes: { alt: '', caption: '' },
+					},
+				],
+			},
+		] );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/dropdown-menu.spec.js b/test/e2e/specs/editor/various/dropdown-menu.spec.js
new file mode 100644
index 00000000000000..4c656fd3d6994a
--- /dev/null
+++ b/test/e2e/specs/editor/various/dropdown-menu.spec.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Dropdown Menu', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'keyboard navigiation', async ( { page, pageUtils } ) => {
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		const menuItems = page
+			.getByRole( 'menu', { name: 'Options' } )
+			.locator(
+				'[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'
+			);
+		const totalItems = await menuItems.count();
+
+		// Catch any issues with the selector, which could cause a false positive test result.
+		expect( totalItems ).toBeGreaterThan( 0 );
+
+		await test.step( 'allows navigation through each item using arrow keys', async () => {
+			// Expect the first menu item to be focused.
+			await expect( menuItems.first() ).toBeFocused();
+
+			// Arrow down to the last item.
+			await pageUtils.pressKeys( 'ArrowDown', { times: totalItems - 1 } );
+			await expect( menuItems.last() ).toBeFocused();
+
+			// Arrow back up to the first item.
+			await pageUtils.pressKeys( 'ArrowUp', { times: totalItems - 1 } );
+			await expect( menuItems.first() ).toBeFocused();
+		} );
+
+		await test.step( 'loops to the beginning and end when navigating past the boundaries of the menu', async () => {
+			// Expect the first menu item to be focused.
+			await expect( menuItems.first() ).toBeFocused();
+
+			// Arrow up to the last item.
+			await page.keyboard.press( 'ArrowUp' );
+			await expect( menuItems.last() ).toBeFocused();
+
+			// Arrow back down to the first item.
+			await page.keyboard.press( 'ArrowDown' );
+			await expect( menuItems.first() ).toBeFocused();
+		} );
+
+		await test.step( 'ignores arrow key navigation that is orthogonal to the orientation of the menu, but stays open', async () => {
+			// Expect the first menu item to be focused.
+			await expect( menuItems.first() ).toBeFocused();
+
+			// Press left and right keys an arbitrary (but > 1) number of times.
+			await pageUtils.pressKeys( 'ArrowLeft', { times: 5 } );
+			await pageUtils.pressKeys( 'ArrowRight', { times: 5 } );
+
+			// Expect the first menu item to still be focused.
+			await expect( menuItems.first() ).toBeFocused();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/duplicating-blocks.spec.js b/test/e2e/specs/editor/various/duplicating-blocks.spec.js
index 1878db2013dc44..aabb93e2295722 100644
--- a/test/e2e/specs/editor/various/duplicating-blocks.spec.js
+++ b/test/e2e/specs/editor/various/duplicating-blocks.spec.js
@@ -8,7 +8,7 @@ test.describe( 'Duplicating blocks', () => {
 		await admin.createNewPost();
 	} );
 
-	test( 'should duplicate blocks using the block settings menu', async ( {
+	test( 'should duplicate blocks using the block settings menu and keyboard shortcut', async ( {
 		page,
 		pageUtils,
 		editor,
@@ -16,11 +16,7 @@ test.describe( 'Duplicating blocks', () => {
 		await editor.insertBlock( { name: 'core/paragraph' } );
 		await page.keyboard.type( 'Clone me' );
 
-		// Select the test we just typed
-		// This doesn't do anything but we previously had a duplicationi bug
-		// When the selection was not collapsed.
-		await pageUtils.pressKeyWithModifier( 'primary', 'a' );
-
+		// Test: Duplicate using the block settings menu.
 		await editor.clickBlockToolbarButton( 'Options' );
 		await page.click( 'role=menuitem[name=/Duplicate/i]' );
 
@@ -33,29 +29,19 @@ test.describe( 'Duplicating blocks', () => {
 <p>Clone me</p>
 <!-- /wp:paragraph -->`
 		);
-	} );
-
-	test( 'should duplicate blocks using the keyboard shortcut', async ( {
-		page,
-		pageUtils,
-		editor,
-	} ) => {
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await page.keyboard.type( 'Clone me' );
 
-		// Select the test we just typed
-		// This doesn't do anything but we previously had a duplicationi bug
-		// When the selection was not collapsed.
-		await pageUtils.pressKeyWithModifier( 'primary', 'a' );
-
-		// Duplicate using the keyboard shortccut.
-		await pageUtils.pressKeyWithModifier( 'primaryShift', 'd' );
+		// Test: Duplicate using the keyboard shortccut.
+		await pageUtils.pressKeys( 'primaryShift+d' );
 
 		expect( await editor.getEditedPostContent() ).toBe(
 			`<!-- wp:paragraph -->
 <p>Clone me</p>
 <!-- /wp:paragraph -->
 
+<!-- wp:paragraph -->
+<p>Clone me</p>
+<!-- /wp:paragraph -->
+
 <!-- wp:paragraph -->
 <p>Clone me</p>
 <!-- /wp:paragraph -->`
diff --git a/test/e2e/specs/editor/various/editor-modes.spec.js b/test/e2e/specs/editor/various/editor-modes.spec.js
new file mode 100644
index 00000000000000..4e856e6214ca8c
--- /dev/null
+++ b/test/e2e/specs/editor/various/editor-modes.spec.js
@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Editing modes (visual/HTML)', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello world!' },
+		} );
+	} );
+
+	test( 'should switch between visual and HTML modes', async ( {
+		editor,
+	} ) => {
+		const paragraphBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+
+		// This block should be in "visual" mode by default.
+		await expect( paragraphBlock ).toHaveClass( /rich-text/ );
+
+		// Change editing mode from "Visual" to "HTML".
+		await editor.clickBlockOptionsMenuItem( 'Edit as HTML' );
+
+		// Wait for the block to be converted to HTML editing mode.
+		await expect( paragraphBlock.getByRole( 'textbox' ) ).toBeVisible();
+
+		// Change editing mode from "HTML" back to "Visual".
+		await editor.clickBlockOptionsMenuItem( 'Edit visually' );
+
+		// This block should be in "visual" mode again.
+		await expect( paragraphBlock ).toHaveClass( /rich-text/ );
+	} );
+
+	test( 'should display sidebar in HTML mode', async ( { editor, page } ) => {
+		await editor.clickBlockOptionsMenuItem( 'Edit as HTML' );
+		await editor.openDocumentSettingsSidebar();
+
+		// The `drop cap` toggle for the paragraph block should appear, even in
+		// HTML editing mode.
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Show Drop cap' } )
+			.click();
+
+		await expect(
+			page.getByRole( 'checkbox', { name: 'Drop cap' } )
+		).toBeVisible();
+	} );
+
+	test( 'should update HTML in HTML mode when sidebar is used', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.clickBlockOptionsMenuItem( 'Edit as HTML' );
+		await editor.openDocumentSettingsSidebar();
+
+		const paragraphHTML = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+			.getByRole( 'textbox' );
+
+		// Make sure the paragraph content is rendered as expected.
+		await expect( paragraphHTML ).toHaveValue( '<p>Hello world!</p>' );
+
+		// Change the `drop cap` using the sidebar.
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Show Drop cap' } )
+			.click();
+		await page.getByRole( 'checkbox', { name: 'Drop cap' } ).check();
+
+		// Make sure the HTML content updated.
+		await expect( paragraphHTML ).toHaveValue(
+			'<p class="has-drop-cap">Hello world!</p>'
+		);
+	} );
+
+	test( 'the code editor should unselect blocks and disable the inserter', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		const activeTab = editorSettings.getByRole( 'tab', { selected: true } );
+
+		// The Block inspector should be active.
+		await expect( activeTab ).toHaveText( 'Block' );
+		await expect(
+			editorSettings.locator( '.block-editor-block-card__title' )
+		).toHaveText( 'Paragraph' );
+
+		// Open the code editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		// The Block inspector should not be active anymore.
+		await expect( activeTab ).not.toHaveText( 'Block' );
+
+		await editorSettings.getByRole( 'tab', { name: 'Block' } ).click();
+		await expect(
+			editorSettings.locator( '.block-editor-block-inspector__no-blocks' )
+		).toHaveText( 'No block selected.' );
+
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Document tools' } )
+				.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+		).toBeDisabled();
+
+		// Go back to the visual editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+	} );
+
+	// Test for regressions of https://github.com/WordPress/gutenberg/issues/24054.
+	test( 'saves content when using the shortcut in the Code Editor', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Open the code editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		// Change content.
+		await page.getByRole( 'textbox', { name: 'Type text or HTML' } )
+			.fill( `<!-- wp:paragraph -->
+<p>Hi world!</p>
+<!-- /wp:paragraph -->` );
+
+		// Save the post using the shortcut.
+		await pageUtils.pressKeys( 'primary+s' );
+		await expect(
+			page
+				.getByRole( 'button', { name: 'Dismiss this notice' } )
+				.filter( { hasText: 'Draft saved' } )
+		).toBeVisible();
+
+		// Go back to the visual editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hi world!' },
+			},
+		] );
+	} );
+
+	test( 'should reparse changes from code editor', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Open the code editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		// Change the content.
+		await page.getByRole( 'textbox', { name: 'Type text or HTML' } )
+			.fill( `<!-- wp:paragraph -->
+<p>abc</p>
+<!-- /wp:paragraph -->` );
+
+		// Go back to the visual editor.
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'abc' },
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/embedding.spec.js b/test/e2e/specs/editor/various/embedding.spec.js
new file mode 100644
index 00000000000000..fe488f91301749
--- /dev/null
+++ b/test/e2e/specs/editor/various/embedding.spec.js
@@ -0,0 +1,311 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').Editor} Editor */
+
+const EMBED_URLS = [
+	'/oembed/1.0/proxy',
+	`rest_route=${ encodeURIComponent( '/oembed/1.0/proxy' ) }`,
+];
+
+const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
+	url: 'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/',
+	html: '<div class="wp-embedded-content" data-secret="shhhh it is a secret"></div>',
+	type: 'rich',
+	provider_name: 'WordPress',
+	provider_url: 'https://wordpress.org',
+	version: '1.0',
+};
+
+const MOCK_EMBED_RICH_SUCCESS_RESPONSE = {
+	url: 'https://twitter.com/notnownikki',
+	html: '<p>Mock success response.</p>',
+	type: 'rich',
+	provider_name: 'Twitter',
+	provider_url: 'https://twitter.com',
+	version: '1.0',
+};
+
+const MOCK_EMBED_PHOTO_SUCCESS_RESPONSE = {
+	url: 'https://cloudup.com/cQFlxqtY4ob',
+	html: '<p>Mock success response.</p>',
+	type: 'photo',
+	provider_name: 'Cloudup',
+	provider_url: 'https://cloudup.com',
+	version: '1.0',
+};
+
+const MOCK_EMBED_VIDEO_SUCCESS_RESPONSE = {
+	url: 'https://www.youtube.com/watch?v=lXMskKTw3Bc',
+	html: '<iframe width="16" height="9"></iframe>',
+	type: 'video',
+	provider_name: 'YouTube',
+	provider_url: 'https://youtube.com',
+	version: '1.0',
+};
+
+const MOCK_BAD_EMBED_PROVIDER_RESPONSE = {
+	url: 'https://twitter.com/thatbunty',
+	html: false,
+	provider_name: 'Embed Provider',
+	version: '1.0',
+};
+
+const MOCK_CANT_EMBED_RESPONSE = {
+	provider_name: 'Embed Handler',
+	html: '<a href="https://twitter.com/wooyaygutenberg123454312">https://twitter.com/wooyaygutenberg123454312</a>',
+};
+
+const MOCK_BAD_WORDPRESS_RESPONSE = {
+	code: 'oembed_invalid_url',
+	message: 'Not Found',
+	data: {
+		status: 404,
+	},
+	html: false,
+};
+
+test.use( {
+	embedUtils: async ( { page, editor }, use ) => {
+		await use( new EmbedUtils( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Embedding content', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should render embeds in the correct state', async ( {
+		editor,
+		embedUtils,
+	} ) => {
+		await embedUtils.interceptRequests( {
+			'https://twitter.com/notnownikki': MOCK_EMBED_RICH_SUCCESS_RESPONSE,
+			'https://twitter.com/wooyaygutenberg123454312':
+				MOCK_CANT_EMBED_RESPONSE,
+			'https://wordpress.org/gutenberg/handbook/':
+				MOCK_BAD_WORDPRESS_RESPONSE,
+			'https://twitter.com/thatbunty': MOCK_BAD_EMBED_PROVIDER_RESPONSE,
+			'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/':
+				MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE,
+			'https://www.youtube.com/watch?v=lXMskKTw3Bc':
+				MOCK_EMBED_VIDEO_SUCCESS_RESPONSE,
+			'https://cloudup.com/cQFlxqtY4ob':
+				MOCK_EMBED_PHOTO_SUCCESS_RESPONSE,
+		} );
+
+		const currenEmbedBlock = editor.canvas
+			.getByRole( 'document', { name: 'Block' } )
+			.last();
+
+		await embedUtils.insertEmbed( 'https://twitter.com/notnownikki' );
+		await expect(
+			currenEmbedBlock.locator( 'iframe' ),
+			'Valid embed. Should render valid element.'
+		).toHaveAttribute( 'title', 'Embedded content from twitter.com' );
+
+		await embedUtils.insertEmbed(
+			'https://twitter.com/wooyaygutenberg123454312'
+		);
+		await expect(
+			currenEmbedBlock.getByRole( 'textbox', { name: 'Embed URL' } ),
+			'Valid provider; invalid content. Should render failed, edit state.'
+		).toHaveValue( 'https://twitter.com/wooyaygutenberg123454312' );
+
+		await embedUtils.insertEmbed(
+			'https://wordpress.org/gutenberg/handbook/'
+		);
+		await expect(
+			currenEmbedBlock.getByRole( 'textbox', { name: 'Embed URL' } ),
+			'WordPress invalid content. Should render failed, edit state.'
+		).toHaveValue( 'https://wordpress.org/gutenberg/handbook' );
+
+		await embedUtils.insertEmbed( 'https://twitter.com/thatbunty' );
+		await expect(
+			currenEmbedBlock.getByRole( 'textbox', { name: 'Embed URL' } ),
+			'Provider whose oembed API has gone wrong. Should render failed, edit state.'
+		).toHaveValue( 'https://twitter.com/thatbunty' );
+
+		await embedUtils.insertEmbed(
+			'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/'
+		);
+		await expect(
+			currenEmbedBlock,
+			'WordPress valid content. Should render valid figure element.'
+		).toHaveClass( /wp-block-embed/ );
+
+		await embedUtils.insertEmbed(
+			'https://www.youtube.com/watch?v=lXMskKTw3Bc'
+		);
+		await expect(
+			currenEmbedBlock,
+			'Video content. Should render valid figure element, and include the aspect ratio class.'
+		).toHaveClass( /wp-embed-aspect-16-9/ );
+
+		await embedUtils.insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
+		await expect(
+			currenEmbedBlock.locator( 'iframe' ),
+			'Photo content. Should render valid iframe element.'
+		).toHaveAttribute( 'title', 'Embedded content from cloudup.com' );
+	} );
+
+	test( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async ( {
+		editor,
+		embedUtils,
+	} ) => {
+		await embedUtils.interceptRequests( {
+			'https://twitter.com/wooyaygutenberg123454312':
+				MOCK_CANT_EMBED_RESPONSE,
+		} );
+		await embedUtils.insertEmbed(
+			'https://twitter.com/wooyaygutenberg123454312'
+		);
+
+		const embedBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Embed',
+		} );
+
+		await expect( embedBlock ).toContainText(
+			'Sorry, this content could not be embedded.'
+		);
+
+		await embedBlock
+			.getByRole( 'button', { name: 'Convert to link' } )
+			.click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'<a href="https://twitter.com/wooyaygutenberg123454312">https://twitter.com/wooyaygutenberg123454312</a>',
+				},
+			},
+		] );
+	} );
+
+	// Reason: A possible regression of https://github.com/WordPress/gutenberg/pull/14705.
+	test( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async ( {
+		editor,
+		embedUtils,
+	} ) => {
+		await embedUtils.interceptRequests( {
+			'https://twitter.com/notnownikki/':
+				MOCK_BAD_EMBED_PROVIDER_RESPONSE,
+			'https://twitter.com/notnownikki': MOCK_EMBED_RICH_SUCCESS_RESPONSE,
+		} );
+		await embedUtils.insertEmbed( 'https://twitter.com/notnownikki/' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Twitter',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'should allow the user to try embedding a failed URL again', async ( {
+		editor,
+		embedUtils,
+	} ) => {
+		await embedUtils.interceptRequests( {
+			'https://twitter.com/wooyaygutenberg123454312':
+				MOCK_CANT_EMBED_RESPONSE,
+		} );
+		await embedUtils.insertEmbed(
+			'https://twitter.com/wooyaygutenberg123454312'
+		);
+
+		const embedBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Embed',
+		} );
+
+		await expect( embedBlock ).toContainText(
+			'Sorry, this content could not be embedded.'
+		);
+
+		await embedUtils.interceptRequests( {
+			'https://twitter.com/wooyaygutenberg123454312':
+				MOCK_EMBED_RICH_SUCCESS_RESPONSE,
+		} );
+
+		await embedBlock.getByRole( 'button', { name: 'Try again' } ).click();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Twitter',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'should switch to the WordPress block correctly', async ( {
+		editor,
+		embedUtils,
+		requestUtils,
+	} ) => {
+		const post = await requestUtils.createPost( {
+			title: 'Local embed test',
+			content: 'Hello there!',
+			status: 'publish',
+		} );
+
+		await embedUtils.insertEmbed( post.link );
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Embed' } )
+		).toBeVisible();
+	} );
+} );
+
+class EmbedUtils {
+	/** @type {Page} */
+	#page;
+	/** @type {Editor} */
+	#editor;
+
+	constructor( { page, editor } ) {
+		this.#page = page;
+		this.#editor = editor;
+	}
+
+	/**
+	 * @param {URL} url
+	 */
+	isRESTRoute( url ) {
+		return EMBED_URLS.some( ( route ) => {
+			return url.href.includes( route );
+		} );
+	}
+
+	async interceptRequests( responses ) {
+		await this.#page.route(
+			( url ) => this.isRESTRoute( url ),
+			async ( route, request ) => {
+				const embedUrl = new URL( request.url() ).searchParams.get(
+					'url'
+				);
+				const response = responses[ embedUrl ];
+
+				if ( response ) {
+					await route.fulfill( {
+						json: response,
+					} );
+				} else {
+					await route.continue();
+				}
+			}
+		);
+	}
+
+	async insertEmbed( url ) {
+		await test.step( `Inserting embed ${ url }`, async () => {
+			await this.#editor.insertBlock( { name: 'core/embed' } );
+			await this.#editor.canvas
+				.getByRole( 'textbox', { name: 'Embed URL' } )
+				.last()
+				.fill( url );
+			await this.#page.keyboard.press( 'Enter' );
+		} );
+	}
+}
diff --git a/test/e2e/specs/editor/various/font-appearance-control.spec.js b/test/e2e/specs/editor/various/font-appearance-control.spec.js
new file mode 100644
index 00000000000000..4b148b6dd8587c
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-appearance-control.spec.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Appearance Control dropdown menu', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should apply available font weight and styles from active font family', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Regular',
+				style: {
+					typography: { fontWeight: '400', fontStyle: 'normal' },
+				},
+			},
+		} );
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await expect(
+			page.getByRole( 'combobox', { name: 'Appearance' } )
+		).toHaveText( 'Regular' );
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Extra Light Italic',
+				style: {
+					typography: { fontWeight: '200', fontStyle: 'italic' },
+				},
+			},
+		} );
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await expect(
+			page.getByRole( 'combobox', { name: 'Appearance' } )
+		).toHaveText( 'Extra Light Italic' );
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Bold Italic',
+				style: {
+					typography: { fontWeight: '700', fontStyle: 'italic' },
+				},
+			},
+		} );
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await expect(
+			page.getByRole( 'combobox', { name: 'Appearance' } )
+		).toHaveText( 'Bold Italic' );
+	} );
+
+	test( 'should apply Default appearance if weight and style are invalid', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Default',
+				style: {
+					typography: {
+						fontWeight: '',
+						fontStyle: 'invalid-style',
+					},
+				},
+			},
+		} );
+		await page
+			.getByRole( 'button', { name: 'Typography options' } )
+			.click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Show Appearance' } )
+			.click();
+		await expect(
+			page.getByRole( 'combobox', { name: 'Appearance' } )
+		).toHaveText( 'Default' );
+	} );
+} );
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..597b458d682e84
--- /dev/null
+++ b/test/e2e/specs/editor/various/font-size-picker.spec.js
@@ -0,0 +1,312 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Size Picker', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { page } ) => {
+		const closeButton = page.locator(
+			'role=region[name="Editor settings"i] >> role=button[name^="Close settings"i]'
+		);
+
+		if ( await closeButton.isVisible() ) {
+			await closeButton.click();
+		}
+	} );
+
+	test.describe( 'Common', () => {
+		test( 'should apply a custom font size using the font size input', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+			await editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			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.pressKeys( 'Backspace', { times: 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/editor' ).updateEditorSettings(
+					setDeep(
+						window.wp.data
+							.select( 'core/editor' )
+							.getEditorSettings(),
+						[
+							'__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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			await page.keyboard.type( 'Paragraph to be made "large"' );
+			await page.click(
+				'role=group[name="Font size"i] >> role=combobox[name="Font size"i]'
+			);
+			await pageUtils.pressKeys( 'ArrowDown', { times: 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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			await page.keyboard.type(
+				'Paragraph with font size reset using tools panel menu'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=combobox[name="Font size"i]'
+			);
+			await pageUtils.pressKeys( 'ArrowDown', { times: 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 Size"i]' );
+			await page.keyboard.press( 'Escape' ); // Close the menu
+
+			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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			await page.keyboard.type(
+				'Paragraph with font size reset using input field'
+			);
+			await page.click(
+				'role=group[name="Font size"i] >> role=combobox[name="Font size"i]'
+			);
+			await pageUtils.pressKeys( 'ArrowDown', { times: 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.pressKeys( '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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			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 Size"i]' );
+			await page.keyboard.press( 'Escape' ); // Close the menu
+
+			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 editor.canvas
+				.locator( 'role=button[name="Add default block"i]' )
+				.click();
+			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.pressKeys( '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 -->` );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/footnotes.spec.js b/test/e2e/specs/editor/various/footnotes.spec.js
new file mode 100644
index 00000000000000..d9f571414bacf3
--- /dev/null
+++ b/test/e2e/specs/editor/various/footnotes.spec.js
@@ -0,0 +1,491 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function getFootnotes( page, withoutSave = false ) {
+	// Save post so we can check meta.
+	if ( ! withoutSave ) {
+		await page.click( 'button:text("Save draft")' );
+	}
+	await page.waitForSelector( 'button:text("Saved")' );
+	const footnotes = await page.evaluate( () => {
+		return window.wp.data
+			.select( 'core' )
+			.getEntityRecord(
+				'postType',
+				'post',
+				window.wp.data.select( 'core/editor' ).getCurrentPostId()
+			).meta.footnotes;
+	} );
+	return JSON.parse( footnotes );
+}
+
+test.describe( 'Footnotes', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be inserted', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'first paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'second paragraph' );
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( 'first footnote' );
+
+		const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'first paragraph' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `second paragraph<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">1</a></sup>`,
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		// Check if the numbers in the editor content updated.
+		await expect( editor.canvas.locator( '.fn' ) ).toHaveText( '1' );
+
+		await editor.canvas.locator( 'p:text("first paragraph")' ).click();
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( 'second footnote' );
+
+		const id2 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `first paragraph<sup data-fn="${ id2 }" class="fn"><a href="#${ id2 }" id="${ id2 }-link">1</a></sup>`,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `second paragraph<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">2</a></sup>`,
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'second footnote',
+				id: id2,
+			},
+			{
+				content: 'first footnote',
+				id: id1,
+			},
+		] );
+
+		await editor.canvas.locator( 'p:text("first paragraph")' ).click();
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'Move down' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `second paragraph<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">1</a></sup>`,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `first paragraph<sup data-fn="${ id2 }" class="fn"><a href="#${ id2 }" id="${ id2 }-link">2</a></sup>`,
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'first footnote',
+				id: id1,
+			},
+			{
+				content: 'second footnote',
+				id: id2,
+			},
+		] );
+
+		await editor.canvas.locator( `a[href="#${ id2 }-link"]` ).click();
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `second paragraph<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">1</a></sup>`,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `first paragraph`,
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'first footnote',
+				id: id1,
+			},
+		] );
+
+		await editor.canvas.locator( `a[href="#${ id1 }-link"]` ).click();
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `second paragraph`,
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: `first paragraph`,
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [] );
+	} );
+
+	test( 'can be inserted in a list', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '* 1' );
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( 'a' );
+
+		const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: {
+							content: `1<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">1</a></sup>`,
+						},
+					},
+				],
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'a',
+				id: id1,
+			},
+		] );
+	} );
+
+	test( 'can be inserted in a table', async ( { editor, page } ) => {
+		await editor.insertBlock( { name: 'core/table' } );
+		await editor.canvas
+			.locator( 'role=button[name="Create Table"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( 'a' );
+
+		const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/table',
+				attributes: {
+					body: [
+						{
+							cells: [
+								{
+									content: `1<sup data-fn="${ id1 }" class="fn"><a href="#${ id1 }" id="${ id1 }-link">1</a></sup>`,
+									tag: 'td',
+								},
+								{
+									content: '',
+									tag: 'td',
+								},
+							],
+						},
+						{
+							cells: [
+								{
+									content: '',
+									tag: 'td',
+								},
+								{
+									content: '',
+									tag: 'td',
+								},
+							],
+						},
+					],
+				},
+			},
+			{
+				name: 'core/footnotes',
+			},
+		] );
+
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'a',
+				id: id1,
+			},
+		] );
+	} );
+
+	test( 'works with revisions', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'first paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'second paragraph' );
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		// Check if content is correctly slashed on save and restore.
+		await page.keyboard.type( 'first footnote"' );
+
+		const id1 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		await editor.canvas.locator( 'p:text("first paragraph")' ).click();
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( 'second footnote' );
+
+		const id2 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			return document.activeElement.id;
+		} );
+
+		// This also saves the post!
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'second footnote',
+				id: id2,
+			},
+			{
+				content: 'first footnote"',
+				id: id1,
+			},
+		] );
+
+		await editor.canvas.locator( 'p:text("first paragraph")' ).click();
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'Move down' );
+
+		// This also saves the post!
+		expect( await getFootnotes( page ) ).toMatchObject( [
+			{
+				content: 'first footnote"',
+				id: id1,
+			},
+			{
+				content: 'second footnote',
+				id: id2,
+			},
+		] );
+
+		const editorPage = page;
+		const previewPage = await editor.openPreviewPage();
+
+		await expect(
+			previewPage.locator( 'ol.wp-block-footnotes' )
+		).toHaveText( 'first footnote” ↩︎second footnote ↩︎' );
+
+		await previewPage.close();
+		await editorPage.bringToFront();
+		await editor.canvas.locator( 'p:text("first paragraph")' ).click();
+
+		// Open revisions.
+		await editor.openDocumentSettingsSidebar();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'tab', { name: 'Post' } )
+			.click();
+		await page
+			.locator( '.editor-private-post-last-revision__button' )
+			.click();
+		await page.locator( '.revisions-controls .ui-slider-handle' ).focus();
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.locator( 'input:text("Restore This Revision")' ).click();
+
+		expect( await getFootnotes( page, true ) ).toMatchObject( [
+			{
+				content: 'second footnote',
+				id: id2,
+			},
+			{
+				content: 'first footnote"',
+				id: id1,
+			},
+		] );
+
+		const previewPage2 = await editor.openPreviewPage();
+
+		await expect(
+			previewPage2.locator( 'ol.wp-block-footnotes' )
+		).toHaveText( 'second footnote ↩︎first footnote” ↩︎' );
+
+		await previewPage2.close();
+		await editorPage.bringToFront();
+	} );
+
+	test( 'can be previewed when published', async ( { editor, page } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'a' );
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+
+		await page.keyboard.type( '1' );
+
+		// Publish post with the footnote set to "1".
+		const postId = await editor.publishPost();
+
+		// Test previewing changes to meta.
+		await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click();
+		await page.keyboard.press( 'End' );
+		await page.keyboard.type( '2' );
+
+		const editorPage = page;
+		const previewPage = await editor.openPreviewPage();
+
+		await expect(
+			previewPage.locator( 'ol.wp-block-footnotes li' )
+		).toHaveText( '12 ↩︎' );
+
+		await previewPage.close();
+		await editorPage.bringToFront();
+
+		// Test again, this time with an existing revision (different code
+		// path).
+		await editor.canvas.locator( 'ol.wp-block-footnotes li span' ).click();
+		await page.keyboard.press( 'End' );
+		// Test slashing.
+		await page.keyboard.type( '3"' );
+
+		const previewPage2 = await editor.openPreviewPage();
+
+		// Note: quote will get curled by wptexturize.
+		await expect(
+			previewPage2.locator( 'ol.wp-block-footnotes li' )
+		).toHaveText( '123″  ↩︎' );
+
+		// Verify that the published post is unchanged after previewing changes to meta.
+		await previewPage2.close();
+		await editorPage.bringToFront();
+		await editor.openDocumentSettingsSidebar();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'tab', { name: 'Post' } )
+			.click();
+
+		// Visit the published post.
+		await page.goto( `/?p=${ postId }` );
+
+		// Verify that the published post footnote still says "1".
+		await expect( page.locator( 'ol.wp-block-footnotes li' ) ).toHaveText(
+			'1 ↩︎'
+		);
+	} );
+
+	test( 'should leave alone other block attributes', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.evaluate( () => {
+			window.wp.blocks.registerBlockType( 'core/test-block-string', {
+				apiVersion: 3,
+				title: 'Block with string attribute',
+				attributes: { string: { type: 'string' } },
+				edit: () => null,
+				save: () => null,
+			} );
+		} );
+		await editor.insertBlock( {
+			name: 'core/test-block-string',
+			attributes: { string: 'a\nb' },
+		} );
+
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'a' );
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Footnote")' ).click();
+		await page.keyboard.type( '1' );
+
+		expect( ( await editor.getBlocks() )[ 0 ] ).toMatchObject( {
+			name: 'core/test-block-string',
+			// This should NOT be 'a<br>b'!
+			attributes: { string: 'a\nb' },
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/format-library/text-color.spec.js b/test/e2e/specs/editor/various/format-library/text-color.spec.js
new file mode 100644
index 00000000000000..aba77251e38336
--- /dev/null
+++ b/test/e2e/specs/editor/various/format-library/text-color.spec.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Format Library - Text color', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should remove highlighting element', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await editor.clickBlockToolbarButton( 'More' );
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Highlight' } )
+			.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const color = page
+			.getByRole( 'listbox', { name: 'Custom color picker' } )
+			.getByRole( 'option', { name: 'Color: Cyan bluish gray' } );
+
+		await color.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">1</mark>',
+				},
+			},
+		] );
+
+		await color.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '1',
+				},
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/inner-blocks-templates.spec.js b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js
new file mode 100644
index 00000000000000..eb34b00e8e69dc
--- /dev/null
+++ b/test/e2e/specs/editor/various/inner-blocks-templates.spec.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Inner blocks templates', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-innerblocks-templates'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-innerblocks-templates'
+		);
+	} );
+
+	test( 'applying block templates asynchronously does not create a persistent change in the editor', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-async-template',
+		} );
+
+		const blockWithTemplateContent = editor.canvas.locator(
+			'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo'
+		);
+
+		// The block template content appears asynchronously, so wait for it.
+		await expect( blockWithTemplateContent ).toBeVisible();
+
+		// Publish the post, then reload.
+		await editor.publishPost();
+		await page.reload();
+
+		// Wait for the block that was inserted to appear with its templated content.
+		await expect( blockWithTemplateContent ).toBeVisible();
+
+		// The template resolution shouldn't cause the post to be dirty.
+		const editorTopBar = page.locator(
+			'role=region[name="Editor top bar"i]'
+		);
+		const undoButton = editorTopBar.locator( 'role=button[name="Undo"i]' );
+		const updateButton = editorTopBar.locator(
+			'role=button[name="Save"i]'
+		);
+		await expect( undoButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		await expect( updateButton ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index cc75245d48bac3..3cc369f75f2237 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
 /**
  * WordPress dependencies
  */
@@ -10,15 +15,44 @@ test.use( {
 } );
 
 test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
-	test.beforeEach( async ( { admin } ) => {
-		await admin.createNewPost();
-	} );
-
 	test.afterAll( async ( { requestUtils } ) => {
 		await requestUtils.deleteAllPosts();
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test( 'inserts a default block on bottom padding click', async ( {
+		admin,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/image' } );
+		const body = editor.canvas.locator( 'body' );
+		const box = await body.boundingBox();
+		await body.click( {
+			position: {
+				x: box.width / 2,
+				y: box.height - 10,
+			},
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{ name: 'core/image' },
+			{ name: 'core/paragraph' },
+		] );
+
+		await expect(
+			editor.canvas.locator( '[data-type="core/paragraph"]' )
+		).toBeFocused();
 	} );
 
 	test( 'inserts blocks by dragging and dropping from the global inserter', async ( {
+		admin,
 		page,
 		editor,
 		insertingBlocksUtils,
@@ -28,6 +62,9 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			'The clientX value is always 0 in firefox, see https://github.com/microsoft/playwright/issues/17761 for more info.'
 		);
 
+		await admin.createNewPost();
+		await editor.switchToLegacyCanvas();
+
 		// We need a dummy block in place to display the drop indicator due to a bug.
 		// @see https://github.com/WordPress/gutenberg/issues/44064
 		await editor.insertBlock( {
@@ -39,11 +76,11 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		);
 
 		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+			'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
 		);
 
 		await page.fill(
-			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
 			'Heading'
 		);
 
@@ -53,34 +90,16 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		const paragraphBoundingBox = await paragraphBlock.boundingBox();
 
 		await expect( insertingBlocksUtils.indicator ).toBeVisible();
-		// Expect the indicator to be below the paragraph block.
-		await expect
-			.poll( () =>
-				insertingBlocksUtils.indicator
-					.boundingBox()
-					.then( ( { y } ) => y )
-			)
-			.toBeGreaterThan( paragraphBoundingBox.y );
+		await insertingBlocksUtils.expectIndicatorBelowParagraph(
+			paragraphBoundingBox
+		);
 
 		await page.mouse.down();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				// Hover on the right side of the block to avoid collapsing with the preview.
-				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
-				// Hover on the bottom of the paragraph block.
-				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
-			);
-		}
-		// Expect the indicator to be below the paragraph block.
-		await expect
-			.poll( () =>
-				insertingBlocksUtils.indicator
-					.boundingBox()
-					.then( ( { y } ) => y )
-			)
-			.toBeGreaterThan( paragraphBoundingBox.y );
+
+		await insertingBlocksUtils.dragOver( paragraphBoundingBox );
+		await insertingBlocksUtils.expectIndicatorBelowParagraph(
+			paragraphBoundingBox
+		);
 
 		// Expect the draggable-chip to appear.
 		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
@@ -93,15 +112,19 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->` );
 	} );
 
 	test( 'cancels dragging blocks from the global inserter by pressing Escape', async ( {
+		admin,
 		page,
 		editor,
 		insertingBlocksUtils,
 	} ) => {
+		await admin.createNewPost();
+		await editor.switchToLegacyCanvas();
+
 		// We need a dummy block in place to display the drop indicator due to a bug.
 		// @see https://github.com/WordPress/gutenberg/issues/44064
 		await editor.insertBlock( {
@@ -116,11 +139,11 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		);
 
 		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+			'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
 		);
 
 		await page.fill(
-			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
 			'Heading'
 		);
 
@@ -130,24 +153,16 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		const paragraphBoundingBox = await paragraphBlock.boundingBox();
 
 		await page.mouse.down();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				// Hover on the right side of the block to avoid collapsing with the preview.
-				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
-				// Hover on the bottom of the paragraph block.
-				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
-			);
-		}
+
+		await insertingBlocksUtils.dragOver( paragraphBoundingBox );
 
 		await expect( insertingBlocksUtils.indicator ).toBeVisible();
 		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
 
 		await page.keyboard.press( 'Escape' );
 
-		await expect( insertingBlocksUtils.indicator ).not.toBeVisible();
-		await expect( insertingBlocksUtils.draggableChip ).not.toBeVisible();
+		await expect( insertingBlocksUtils.indicator ).toBeHidden();
+		await expect( insertingBlocksUtils.draggableChip ).toBeHidden();
 
 		await page.mouse.up();
 
@@ -155,6 +170,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 	} );
 
 	test( 'inserts patterns by dragging and dropping from the global inserter', async ( {
+		admin,
 		page,
 		editor,
 		insertingBlocksUtils,
@@ -164,6 +180,9 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			'The clientX value is always 0 in firefox, see https://github.com/microsoft/playwright/issues/17761 for more info.'
 		);
 
+		await admin.createNewPost();
+		await editor.switchToLegacyCanvas();
+
 		// We need a dummy block in place to display the drop indicator due to a bug.
 		// @see https://github.com/WordPress/gutenberg/issues/44064
 		await editor.insertBlock( {
@@ -176,13 +195,13 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		);
 
 		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+			'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
 		);
 
-		const PATTERN_NAME = 'Social links with a shared background color';
+		const PATTERN_NAME = 'Standard';
 
 		await page.fill(
-			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
 			PATTERN_NAME
 		);
 
@@ -197,26 +216,13 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		const paragraphBoundingBox = await paragraphBlock.boundingBox();
 
 		await page.mouse.down();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				// Hover on the right side of the block to avoid collapsing with the preview.
-				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
-				// Hover on the bottom of the paragraph block.
-				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
-			);
-		}
+
+		await insertingBlocksUtils.dragOver( paragraphBoundingBox );
 
 		await expect( insertingBlocksUtils.indicator ).toBeVisible();
-		// Expect the indicator to be below the paragraph block.
-		await expect
-			.poll( () =>
-				insertingBlocksUtils.indicator
-					.boundingBox()
-					.then( ( { y } ) => y )
-			)
-			.toBeGreaterThan( paragraphBoundingBox.y );
+		await insertingBlocksUtils.expectIndicatorBelowParagraph(
+			paragraphBoundingBox
+		);
 
 		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
 
@@ -225,11 +231,112 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
+	test( 'inserts synced patterns by dragging and dropping from the global inserter', async ( {
+		admin,
+		page,
+		editor,
+		insertingBlocksUtils,
+	}, testInfo ) => {
+		testInfo.fixme(
+			testInfo.project.name === 'firefox',
+			'The clientX value is always 0 in firefox, see https://github.com/microsoft/playwright/issues/17761 for more info.'
+		);
+		const PATTERN_NAME = 'My synced pattern';
+
+		await admin.createNewPost();
+		await editor.switchToLegacyCanvas();
+
+		// We need a dummy block in place to display the drop indicator due to a bug.
+		// @see https://github.com/WordPress/gutenberg/issues/44064
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+
+		const paragraphBlock = page.locator(
+			'[data-type="core/paragraph"] >> text=Dummy text'
+		);
+
+		// Create a synced pattern from the paragraph block.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'A useful paragraph to reuse' },
+		} );
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( PATTERN_NAME );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( true );
+		await createPatternDialog
+			.getByRole( 'button', { name: 'Add' } )
+			.click();
+		const patternBlock = page.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		await expect( patternBlock ).toBeFocused();
+
+		// Insert a synced pattern.
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
+		);
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
+			PATTERN_NAME
+		);
+		await page.hover(
+			`role=listbox[name="Block Patterns"i] >> role=option[name="${ PATTERN_NAME }"i]`
+		);
+
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+
+		await page.mouse.down();
+
+		await insertingBlocksUtils.dragOver( paragraphBoundingBox );
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+		await insertingBlocksUtils.expectIndicatorBelowParagraph(
+			paragraphBoundingBox
+		);
+		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
+
+		await page.mouse.up();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Dummy text',
+				},
+			},
+			{
+				name: 'core/block',
+				attributes: { ref: expect.any( Number ) },
+			},
+			{
+				name: 'core/block',
+				attributes: { ref: expect.any( Number ) },
+			},
+		] );
+	} );
+
 	test( 'cancels dragging patterns from the global inserter by pressing Escape', async ( {
+		admin,
 		page,
 		editor,
 		insertingBlocksUtils,
 	} ) => {
+		await admin.createNewPost();
+		await editor.switchToLegacyCanvas();
+
 		// We need a dummy block in place to display the drop indicator due to a bug.
 		// @see https://github.com/WordPress/gutenberg/issues/44064
 		await editor.insertBlock( {
@@ -244,13 +351,13 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		);
 
 		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+			'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
 		);
 
-		const PATTERN_NAME = 'Social links with a shared background color';
+		const PATTERN_NAME = 'Standard';
 
 		await page.fill(
-			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
 			PATTERN_NAME
 		);
 
@@ -261,29 +368,379 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 		const paragraphBoundingBox = await paragraphBlock.boundingBox();
 
 		await page.mouse.down();
-		// Call the move function twice to make sure the `dragOver` event is sent.
-		// @see https://github.com/microsoft/playwright/issues/17153
-		for ( let i = 0; i < 2; i += 1 ) {
-			await page.mouse.move(
-				// Hover on the right side of the block to avoid collapsing with the preview.
-				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
-				// Hover on the bottom of the paragraph block.
-				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
-			);
-		}
+
+		await insertingBlocksUtils.dragOver( paragraphBoundingBox );
 
 		await expect( insertingBlocksUtils.indicator ).toBeVisible();
 		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
 
 		await page.keyboard.press( 'Escape' );
 
-		await expect( insertingBlocksUtils.indicator ).not.toBeVisible();
-		await expect( insertingBlocksUtils.draggableChip ).not.toBeVisible();
+		await expect( insertingBlocksUtils.indicator ).toBeHidden();
+		await expect( insertingBlocksUtils.draggableChip ).toBeHidden();
 
 		await page.mouse.up();
 
 		await expect.poll( editor.getEditedPostContent ).toBe( beforeContent );
 	} );
+
+	// A test for https://github.com/WordPress/gutenberg/issues/43090.
+	test( 'should close the inserter when clicking on the toggle button', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+
+		const inserterButton = page.getByRole( 'button', {
+			name: 'Block Inserter',
+			exact: true,
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await inserterButton.click();
+
+		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/buttons' } ] );
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+	} );
+
+	test( 'should insert block with the slash inserter when using multiple words', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '/tag cloud' );
+
+		await expect(
+			page.getByRole( 'option', { name: 'Tag Cloud', selected: true } )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Tag Cloud' } )
+		).toBeVisible();
+	} );
+
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/24262.
+	test( 'inserts a block in proper place after having clicked `Browse All` from inline inserter', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'First paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '## Heading' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second paragraph' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Third paragraph' );
+
+		const boundingBox = await editor.canvas
+			.getByRole( 'document', { name: 'Block: Heading' } )
+			.boundingBox();
+
+		// Using the between inserter.
+		await page.mouse.move(
+			boundingBox.x + boundingBox.width / 2,
+			boundingBox.y - 10,
+			// An arbitrary number of `steps` imitates cursor movement in the test environment,
+			// activating the in-between inserter.
+			{ steps: 10 }
+		);
+
+		await page
+			.getByRole( 'button', {
+				name: 'Add block',
+			} )
+			.click();
+		await page.getByRole( 'button', { name: 'Browse All' } ).click();
+		await page
+			.getByRole( 'listbox', { name: 'Media' } )
+			.getByRole( 'option', { name: 'Image' } )
+			.click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [
+				{ name: 'core/paragraph' },
+				{ name: 'core/image' },
+				{ name: 'core/heading' },
+				{ name: 'core/paragraph' },
+				{ name: 'core/paragraph' },
+			] );
+	} );
+
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/25785.
+	test( 'inserts a block should show a blue line indicator', async ( {
+		admin,
+		editor,
+		page,
+		insertingBlocksUtils,
+	} ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'First paragraph' );
+		await editor.insertBlock( { name: 'core/image' } );
+
+		const paragraphBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+
+		await editor.selectBlocks( paragraphBlock );
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page
+			.getByRole( 'listbox', { name: 'Text' } )
+			.getByRole( 'option', { name: 'Heading' } )
+			.hover();
+
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+		const indicatorBoundingBox =
+			await insertingBlocksUtils.indicator.boundingBox();
+
+		// Expect the indicator to be below the selected block.
+		expect( indicatorBoundingBox.y ).toBeGreaterThan(
+			paragraphBoundingBox.y
+		);
+	} );
+
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403.
+	test( 'inserts a block in proper place after having clicked `Browse All` from block appender', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph after group' },
+		} );
+
+		await editor.canvas
+			.getByRole( 'button', {
+				name: 'Group: Gather blocks in a container.',
+			} )
+			.click();
+		await editor.canvas
+			.getByRole( 'button', {
+				name: 'Add block',
+			} )
+			.click();
+		await page.getByRole( 'button', { name: 'Browse All' } ).click();
+		await page
+			.getByRole( 'listbox', { name: 'Text' } )
+			.getByRole( 'option', { name: 'Paragraph' } )
+			.click();
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.fill( 'Paragraph inside group' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Paragraph inside group' },
+					},
+				],
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Paragraph after group' },
+			},
+		] );
+	} );
+
+	test( 'passes the search value in the main inserter when clicking `Browse all`', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph after group' },
+		} );
+
+		await editor.canvas
+			.getByRole( 'button', {
+				name: 'Group: Gather blocks in a container.',
+			} )
+			.click();
+		await editor.canvas
+			.getByRole( 'button', {
+				name: 'Add block',
+			} )
+			.click();
+
+		await page
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.first()
+			.fill( 'Verse' );
+		await page.getByRole( 'button', { name: 'Browse All' } ).click();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Block Library' } )
+				.getByRole( 'searchbox', {
+					name: 'Search',
+				} )
+				.first()
+		).toHaveValue( 'Verse' );
+		await expect(
+			page.getByRole( 'listbox', { name: 'Blocks' } ).first()
+		).toHaveCount( 1 );
+	} );
+
+	// Check for regression of https://github.com/WordPress/gutenberg/issues/27586.
+	test( 'can close the main inserter after inserting a single-use block, like the More block', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page.getByRole( 'option', { name: 'More', exact: true } ).click();
+
+		// Moving focus to the More block should not close the inserter.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Read more' } )
+			.fill( 'More' );
+		await expect(
+			page.getByRole( 'region', {
+				name: 'Block Library',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'shows block preview when hovering over block in inserter', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page
+			.getByRole( 'listbox', { name: 'Text' } )
+			.getByRole( 'option', { name: 'Paragraph' } )
+			.hover();
+
+		await expect(
+			page.locator( '.block-editor-inserter__preview' )
+		).toBeInViewport();
+	} );
+
+	[ 'large', 'small' ].forEach( ( viewport ) => {
+		test( `last-inserted block should be given and keep the selection (${ viewport } viewport)`, async ( {
+			admin,
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await pageUtils.setBrowserViewport( viewport );
+			await admin.createNewPost();
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Testing inserted block selection' },
+			} );
+
+			await page
+				.getByRole( 'toolbar', { name: 'Document tools' } )
+				.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+				.click();
+			await page
+				.getByRole( 'listbox', { name: 'Media' } )
+				.getByRole( 'option', { name: 'Image' } )
+				.click();
+
+			await expect(
+				editor.canvas.getByRole( 'document', { name: 'Block: Image' } )
+			).toBeVisible();
+			await expect
+				.poll( () =>
+					page.evaluate(
+						() =>
+							window.wp.data
+								.select( 'core/block-editor' )
+								.getSelectedBlock()?.name
+					)
+				)
+				.toBe( 'core/image' );
+
+			// Restore the viewport.
+			await pageUtils.setBrowserViewport( 'large' );
+		} );
+	} );
+} );
+
+test.describe( 'insert media from inserter', () => {
+	let uploadedMedia;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		uploadedMedia = await requestUtils.uploadMedia(
+			path.resolve(
+				process.cwd(),
+				'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png'
+			)
+		);
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllMedia(),
+			requestUtils.deleteAllPosts(),
+		] );
+	} );
+
+	test( 'insert media from the global inserter', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+
+		await page.getByLabel( 'Block Inserter' ).click();
+		await page.getByRole( 'tab', { name: 'Media' } ).click();
+		await page.getByRole( 'tab', { name: 'Images' } ).click();
+		await page.getByLabel( uploadedMedia.title.raw ).click();
+		await expect.poll( editor.getEditedPostContent ).toBe(
+			`<!-- wp:image {"id":${ uploadedMedia.id }} -->
+<figure class="wp-block-image"><img src="${ uploadedMedia.source_url }" alt="${ uploadedMedia.alt_text }" class="wp-image-${ uploadedMedia.id }"/></figure>
+<!-- /wp:image -->`
+		);
+	} );
 } );
 
 class InsertingBlocksUtils {
@@ -298,4 +755,24 @@ class InsertingBlocksUtils {
 			'data-testid=block-draggable-chip >> visible=true'
 		);
 	}
+	async dragOver( boundingBox ) {
+		// Call the move function twice to make sure the `dragOver` event is sent.
+		// @see https://github.com/microsoft/playwright/issues/17153
+		for ( let i = 0; i < 2; i += 1 ) {
+			await this.page.mouse.move(
+				// Hover on the right side of the block to avoid collapsing with the preview.
+				// But not too far to avoid triggering the grouping block inserter.
+				boundingBox.x + boundingBox.width - 32,
+				// Hover on the bottom of the paragraph block.
+				boundingBox.y + boundingBox.height - 1
+			);
+		}
+	}
+
+	async expectIndicatorBelowParagraph( paragraphBoundingBox ) {
+		// Expect the indicator to be below the paragraph block.
+		await expect
+			.poll( () => this.indicator.boundingBox().then( ( { y } ) => y ) )
+			.toBeGreaterThan( paragraphBoundingBox.y );
+	}
 }
diff --git a/test/e2e/specs/editor/various/invalid-block.spec.js b/test/e2e/specs/editor/various/invalid-block.spec.js
new file mode 100644
index 00000000000000..3487c326d2851f
--- /dev/null
+++ b/test/e2e/specs/editor/various/invalid-block.spec.js
@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Invalid blocks', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should show an invalid block message with clickable options', async ( {
+		editor,
+		page,
+	} ) => {
+		// Create an empty paragraph with the focus in the block.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'hello' );
+
+		// Change to HTML mode and close the options.
+		await editor.clickBlockOptionsMenuItem( 'Edit as HTML' );
+
+		// Focus on the textarea and enter an invalid paragraph.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.getByRole( 'textbox' )
+			.fill( '<p>invalid paragraph' );
+
+		// Takes the focus away from the block so the invalid warning is triggered.
+		await editor.saveDraft();
+
+		// Click on the 'three-dots' menu toggle.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.getByRole( 'button', { name: 'More options' } )
+			.click();
+
+		await page
+			.getByRole( 'menu', { name: 'More options' } )
+			.getByRole( 'menuitem', { name: 'Resolve' } )
+			.click();
+
+		// Check we get the resolve modal with the appropriate contents.
+		await expect(
+			page
+				.getByRole( 'dialog', { name: 'Resolve Block' } )
+				.locator( '.block-editor-block-compare__html' )
+		).toHaveText( [ '<p>invalid paragraph', '<p>invalid paragraph</p>' ] );
+	} );
+
+	test( 'should strip potentially malicious on* attributes', async ( {
+		editor,
+		page,
+	} ) => {
+		let hasAlert = false;
+		let error = '';
+		let warning = '';
+
+		page.on( 'dialog', () => {
+			hasAlert = true;
+		} );
+
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'error' ) {
+				error = msg.text();
+			}
+
+			if ( msg.type() === 'warning' ) {
+				warning = msg.text();
+			}
+		} );
+
+		await editor.setContent( `
+			<!-- wp:paragraph -->
+			<p>aaaa <img src onerror=alert(1)></x dde></x>1
+			<!-- /wp:paragraph -->
+		` );
+
+		// Give the browser time to show the alert.
+		await expect(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Paragraph' } )
+				.getByRole( 'button', { name: 'Attempt recovery' } )
+		).toBeVisible();
+
+		expect( hasAlert ).toBe( false );
+		expect( error ).toContain(
+			'Block validation: Block validation failed'
+		);
+		expect( warning ).toContain(
+			'Block validation: Malformed HTML detected'
+		);
+	} );
+
+	test( 'should not trigger malicious script tags when using a shortcode block', async ( {
+		editor,
+		page,
+	} ) => {
+		let hasAlert = false;
+
+		page.on( 'dialog', () => {
+			hasAlert = true;
+		} );
+
+		await editor.setContent( `
+			<!-- wp:shortcode -->
+			<animate onbegin=alert(1) attributeName=x dur=1s><script>alert("EVIL");</script><style>@keyframes x{}</style><a style="animation-name:x" onanimationstart="alert(2)"></a>
+			<!-- /wp:shortcode -->
+		` );
+
+		// Give the browser time to show the alert.
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Shortcode' } )
+		).toBeVisible();
+
+		expect( hasAlert ).toBe( false );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js
new file mode 100644
index 00000000000000..da4492a89bef34
--- /dev/null
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'isTyping', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-observe-typing' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-observe-typing' );
+	} );
+
+	test( 'should hide the toolbar when typing', async ( { editor, page } ) => {
+		// Enter to reach paragraph block.
+		await page.keyboard.press( 'Enter' );
+		// Insert paragraph
+		await page.keyboard.type( 'Type' );
+
+		const blockToolbarPopover = page.locator(
+			'[data-wp-component="Popover"]',
+			{
+				has: page.locator( 'role=toolbar[name="Block tools"i]' ),
+			}
+		);
+
+		// Toolbar Popover should not be showing
+		await expect( blockToolbarPopover ).toBeHidden();
+
+		// Moving the mouse shows the toolbar.
+		await editor.showBlockToolbar();
+
+		// Toolbar Popover is visible.
+		await expect( blockToolbarPopover ).toBeVisible();
+
+		// Typing again hides the toolbar
+		await page.keyboard.type( ' and continue' );
+
+		// Toolbar Popover is hidden again
+		await expect( blockToolbarPopover ).toBeHidden();
+	} );
+
+	test( 'should not close the dropdown when typing in it', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a block with a dropdown in the toolbar that contains an input.
+		await editor.insertBlock( { name: 'e2e-tests/observe-typing' } );
+
+		// Moving the mouse shows the toolbar.
+		await editor.showBlockToolbar();
+		// Open the dropdown.
+		await page
+			.getByRole( 'button', {
+				name: 'Open Dropdown',
+			} )
+			.click();
+
+		const textControl = page.getByRole( 'textbox', {
+			name: 'Dropdown field',
+		} );
+		// Type inside the dropdown's input
+		await textControl.pressSequentially( 'Hello' );
+		// The input should still be visible.
+		await expect( textControl ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
new file mode 100644
index 00000000000000..32e3def9154ed1
--- /dev/null
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Keep styles on block transforms', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'Should keep colors during a transform', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '## Heading' );
+		await page.click( 'role=button[name="Text"i]' );
+		await page.click( 'role=option[name="Color: Luminous vivid orange"i]' );
+
+		await page.click( 'role=button[name="Heading"i]' );
+		await page.click( 'role=menuitem[name="Paragraph"i]' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Heading',
+					textColor: 'luminous-vivid-orange',
+				},
+			},
+		] );
+	} );
+
+	test( 'Should keep the font size during a transform from multiple blocks into multiple blocks', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Line 1 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 2 to be made large' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Line 3 to be made large' );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await page.click( 'role=radio[name="Large"i]' );
+		await page.click( 'role=button[name="Multiple blocks selected"i]' );
+		await page.click( 'role=menuitem[name="Heading"i]' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { fontSize: 'large' },
+			},
+			{
+				name: 'core/heading',
+				attributes: { fontSize: 'large' },
+			},
+			{
+				name: 'core/heading',
+				attributes: { fontSize: 'large' },
+			},
+		] );
+	} );
+
+	test( 'Should not include styles in the group block when grouping a block', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Line 1 to be made large' );
+		await page.click( 'role=radio[name="Large"i]' );
+		await editor.showBlockToolbar();
+		await page.click( 'role=button[name="Paragraph"i]' );
+		await page.click( 'role=menuitem[name="Group"i]' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: expect.not.objectContaining( {
+					fontSize: 'large',
+				} ),
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content: 'Line 1 to be made large',
+							fontSize: 'large',
+						},
+					},
+				],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
new file mode 100644
index 00000000000000..e1ca121040b974
--- /dev/null
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -0,0 +1,161 @@
+/* eslint-disable playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	KeyboardNavigableBlocks: async ( { editor, page, pageUtils }, use ) => {
+		await use( new KeyboardNavigableBlocks( { editor, page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Order of block keyboard navigation', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
+		editor,
+		KeyboardNavigableBlocks,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert three paragraph blocks.
+		for ( let i = 0; i < 3; i++ ) {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( `Paragraph ${ i + 1 }` );
+		}
+		// Select the middle paragraph block.
+		await page.keyboard.press( 'ArrowUp' );
+		await editor.showBlockToolbar();
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+		await page.keyboard.press( 'Tab' );
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+			'Block: Paragraph'
+		);
+	} );
+
+	test( 'should navigate correctly with multi selection', async ( {
+		editor,
+		KeyboardNavigableBlocks,
+		page,
+		pageUtils,
+	} ) => {
+		const paragraphBlocks = [ '0', '1', '2', '3' ];
+
+		// Create 4 paragraphs blocks with some content.
+		for ( const paragraphBlock of paragraphBlocks ) {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( paragraphBlock );
+		}
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+			'Multiple selected blocks'
+		);
+
+		await page.keyboard.press( 'Tab' );
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block' );
+
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
+			'Multiple selected blocks'
+		);
+
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await page.keyboard.press( 'ArrowRight' );
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Move up' );
+	} );
+
+	test( 'allows the first element within a block to receive focus', async ( {
+		editor,
+		KeyboardNavigableBlocks,
+		page,
+	} ) => {
+		// Insert a image block.
+		await editor.insertBlock( { name: 'core/image' } );
+
+		// Make sure the upload button has focus.
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Upload' );
+
+		// Try to focus the image block wrapper.
+		await page.keyboard.press( 'ArrowUp' );
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block: Image' );
+	} );
+
+	test( 'allows the block wrapper to gain focus for a group block instead of the first element', async ( {
+		editor,
+		KeyboardNavigableBlocks,
+	} ) => {
+		// Insert a group block.
+		await editor.insertBlock( { name: 'core/group' } );
+		// Select the default, selected Group layout from the variation picker.
+		const groupButton = editor.canvas.locator(
+			'button[aria-label="Group: Gather blocks in a container."]'
+		);
+
+		await groupButton.click();
+
+		// If active label matches, that means focus did not change from group block wrapper.
+		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Block: Group' );
+	} );
+} );
+
+class KeyboardNavigableBlocks {
+	constructor( { editor, page, pageUtils } ) {
+		this.editor = editor;
+		this.page = page;
+		this.pageUtils = pageUtils;
+	}
+
+	async expectLabelToHaveFocus( label ) {
+		const ariaLabel = await this.page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement.contentDocument ?? document;
+			return (
+				activeElement.getAttribute( 'aria-label' ) ||
+				activeElement.innerText
+			);
+		} );
+
+		expect( ariaLabel ).toBe( label );
+	}
+
+	async navigateThroughBlockToolbar() {
+		await this.expectLabelToHaveFocus( 'Paragraph' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Move down' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Align text' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Bold' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Italic' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Link' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'More' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Options' );
+
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( 'Paragraph' );
+	}
+}
+
+/* eslint-enable playwright/expect-expect */
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
new file mode 100644
index 00000000000000..531faa8bea049d
--- /dev/null
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -0,0 +1,1232 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'List View', () => {
+	test.use( {
+		listViewUtils: async ( { page, pageUtils, editor }, use ) => {
+			await use( new ListViewUtils( { page, pageUtils, editor } ) );
+		},
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'allows a user to drag a block to a new sibling position', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a couple of blocks of different types.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The last inserted block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Ensure the setup is correct before dragging.
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [
+				{ name: 'core/heading' },
+				{ name: 'core/image' },
+				{ name: 'core/paragraph' },
+			] );
+
+		// Drag the paragraph above the heading.
+		const paragraphBlockItem = listView.getByRole( 'gridcell', {
+			name: 'Paragraph',
+			exact: true,
+		} );
+		const imageBlockItem = listView.getByRole( 'gridcell', {
+			name: 'Image',
+			exact: true,
+		} );
+		const headingBlockItem = listView.getByRole( 'gridcell', {
+			name: 'Heading',
+			exact: true,
+		} );
+
+		await paragraphBlockItem.hover();
+		await page.mouse.down();
+
+		// To work around a drag and drop bug in Safari, the list view applies
+		// `pointer-events: none` to the list view while dragging, so that
+		// `onDragLeave` is not fired when dragging within the list view.
+		// Without the `force: true` option, the `hover` action will fail
+		// as playwright will complain that pointer-events are intercepted.
+		// https://bugs.webkit.org/show_bug.cgi?id=66547
+		// See: https://github.com/WordPress/gutenberg/pull/56625
+
+		// Hover over each block to mimic moving up the list view.
+		// Also, hover twice to ensure a dragover event is dispatched.
+		// See: https://playwright.dev/docs/input#dragging-manually
+		await imageBlockItem.hover( { force: true } );
+		await imageBlockItem.hover( { force: true } );
+		await headingBlockItem.hover( { force: true } );
+		await headingBlockItem.hover( { force: true } );
+
+		// Disable reason: Need to wait until the throttle timeout of 250ms has passed.
+		/* eslint-disable playwright/no-wait-for-timeout */
+		await editor.page.waitForTimeout( 300 );
+		/* eslint-enable playwright/no-wait-for-timeout */
+
+		await page.mouse.up();
+
+		// Ensure the block was dropped correctly.
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [
+				{ name: 'core/paragraph' },
+				{ name: 'core/heading' },
+				{ name: 'core/image' },
+			] );
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38763.
+	test( 'shows the correct amount of blocks after a block is removed in the canvas', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a couple of blocks of different types.
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The last inserted block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Go to the image block in List View.
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Image',
+			} )
+		).toBeFocused();
+
+		// Select the image block in the canvas.
+		await page.keyboard.press( 'Enter' );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await expect(
+			imageBlock.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( imageBlock ).toBeFocused();
+
+		// Delete the image block in the canvas.
+		await page.keyboard.press( 'Backspace' );
+
+		// List View should have two rows.
+		await expect( listView.getByRole( 'row' ) ).toHaveCount( 2 );
+	} );
+
+	test( 'expands and collapses nested list items', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		await editor.insertBlock( { name: 'core/group' } );
+
+		// Click first color option from the block placeholder's color picker to
+		// make the inner blocks appear.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Cover' } )
+			.getByRole( 'option', { name: /Color: /i } )
+			.first()
+			.click();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// Things start off expanded.
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Cover',
+				expanded: true,
+			} )
+		).toBeVisible();
+
+		// The child paragraph block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Collapse the Cover block.
+		await listView
+			.getByRole( 'gridcell', { name: 'Cover', exact: true } )
+			.getByTestId( 'list-view-expander', { includeHidden: true } )
+			// Force the click to bypass the visibility check. The expander is
+			// intentionally aria-hidden. See the implementation for details.
+			.click( { force: true } );
+
+		// Check that blocks are collapsed:
+		// 2 blocks: (one Cover block, one Group block).
+		await expect( listView.getByRole( 'row' ) ).toHaveCount( 2 );
+
+		// Click the Cover block List View item.
+		await listView
+			.getByRole( 'link', {
+				name: 'Cover',
+				expanded: false,
+			} )
+			.click();
+
+		// Click the Cover block title placeholder.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Cover' } )
+			.getByRole( 'document', { name: /Empty block/i } )
+			.click();
+
+		// The child paragraph block in List View should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Check that blocks are expanded:
+		// 3 blocks: (one Cover block containing a Paragraph block, one Group block).
+		await expect( listView.getByRole( 'row' ) ).toHaveCount( 3 );
+
+		await listView
+			.getByRole( 'gridcell', { name: 'Paragraph', exact: true } )
+			.click();
+
+		// Move down to the Group block.
+		await page.keyboard.press( 'ArrowDown' );
+
+		// Collapse all but the Group block.
+		await pageUtils.pressKeys( 'alt+l' );
+
+		// Check that the Cover block is collapsed.
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Cover',
+				expanded: false,
+			} )
+		).toBeVisible();
+
+		// Check that blocks are collapsed:
+		// 2 blocks: (one Cover block, one Group block).
+		await expect( listView.getByRole( 'row' ) ).toHaveCount( 2 );
+	} );
+
+	test( 'moves focus to start/end of list with Home/End keys', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a couple of blocks of different types.
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await editor.insertBlock( { name: 'core/columns' } );
+		await editor.insertBlock( { name: 'core/group' } );
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The last inserted block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Group',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Press Home to go to the first inserted block (image).
+		await page.keyboard.press( 'Home' );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Image',
+			} )
+		).toBeFocused();
+
+		// Press End followed by Arrow Up to go to the second to last block (columns).
+		await page.keyboard.press( 'End' );
+		await page.keyboard.press( 'ArrowUp' );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Columns',
+				exact: true,
+			} )
+		).toBeFocused();
+
+		// Navigate the right column to image block options button via Home key.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Home' );
+
+		const imageItem = listView.getByRole( 'gridcell', {
+			name: 'Image',
+		} );
+
+		await expect(
+			imageItem
+				.locator( '..' ) // parent selector.
+				.getByRole( 'button', {
+					name: 'Options',
+				} )
+		).toBeFocused();
+
+		// Navigate the right column to group block options button.
+		await page.keyboard.press( 'End' );
+
+		const groupItem = listView.getByRole( 'gridcell', {
+			name: 'Group',
+		} );
+
+		await expect(
+			groupItem
+				.locator( '..' ) // parent selector.
+				.getByRole( 'button', {
+					name: 'Options',
+				} )
+		).toBeFocused();
+	} );
+
+	// If list view sidebar is open and focus is not inside the sidebar, move
+	// focus to the sidebar when using the shortcut. If focus is inside the
+	// sidebar, shortcut should close the sidebar.
+	test( 'ensures List View global shortcut works properly', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph text' },
+		} );
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+		).toBeFocused();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The paragraph item should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Navigate to the image block item.
+		await page.keyboard.press( 'ArrowUp' );
+		const imageItem = listView.getByRole( 'link', {
+			name: 'Image',
+		} );
+
+		await expect( imageItem ).toBeFocused();
+
+		// Hit enter to focus the Image block.
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+
+		// Since focus is now at the image block upload button in the canvas,
+		// pressing the list view shortcut should bring focus back to the image
+		// block in the list view.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( imageItem ).toBeFocused();
+
+		// Since focus is now inside the list view, the shortcut should close
+		// the sidebar.
+		await pageUtils.pressKeys( 'access+o' );
+
+		// Focus should now be on the list view toggle button.
+		await expect(
+			page.getByRole( 'button', { name: 'Document Overview' } )
+		).toBeFocused();
+
+		// List View should be closed.
+		await expect( listView ).toBeHidden();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+
+		// Focus the list view close button and make sure the shortcut will
+		// close the list view. This is to catch a bug where elements could be
+		// out of range of the sidebar region. Must shift+tab 2 times to reach
+		// close button before tab panel.
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Document Overview' } )
+				.getByRole( 'button', {
+					name: 'Close',
+				} )
+		).toBeFocused();
+
+		// Close List View and ensure it's closed.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( listView ).toBeHidden();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+
+		// Focus the outline tab and select it. This test ensures the outline
+		// tab receives similar focus events based on the shortcut.
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await page.keyboard.press( 'ArrowRight' );
+		const outlineButton = page.getByRole( 'tab', {
+			name: 'Outline',
+		} );
+		await expect( outlineButton ).toBeFocused();
+		await page.keyboard.press( 'Enter' );
+
+		// From here, tab in to the editor so focus can be checked on return to
+		// the outline tab in the sidebar.
+		await pageUtils.pressKeys( 'Tab', { times: 2 } );
+		// Focus should be placed on the outline tab button since there is
+		// nothing to focus inside the tab itself.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( outlineButton ).toBeFocused();
+
+		// Close List View and ensure it's closed.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( listView ).toBeHidden();
+	} );
+
+	test( 'should place focus on the currently selected block in the canvas', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a couple of blocks of different types.
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The last inserted block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph',
+				exact: true,
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Go to the image block in List View.
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Image',
+			} )
+		).toBeFocused();
+
+		// Select the image block in the canvas.
+		await page.keyboard.press( 'Enter' );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await expect(
+			imageBlock.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+
+		// Triggering the List View shortcut should result in the image block gaining focus.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Image',
+			} )
+		).toBeFocused();
+	} );
+
+	test( 'should cut, copy, paste, select, duplicate, insert, delete, and deselect blocks using keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [ { name: 'core/pullquote' } ],
+		} );
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{ name: 'core/heading' },
+						{ name: 'core/paragraph' },
+					],
+				},
+				{
+					name: 'core/column',
+					innerBlocks: [ { name: 'core/verse' } ],
+				},
+			],
+		} );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'The last inserted block should be selected and focused.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/columns' },
+				{ name: 'core/file', selected: true, focused: true },
+			] );
+
+		// Move up to columns block, expand, and then move to the first column block.
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'The last inserted block should be selected, while the first column block should be focused.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{ name: 'core/column', selected: false, focused: true },
+						{ name: 'core/column' },
+					],
+				},
+				{ name: 'core/file', selected: true, focused: false },
+			] );
+
+		// Select all sibling column blocks at current level.
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'All column blocks should be selected, with the first one focused.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group', selected: false, focused: false },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{ name: 'core/column', selected: true, focused: true },
+						{ name: 'core/column', selected: true, focused: false },
+					],
+					selected: false,
+				},
+				{ name: 'core/file', selected: false, focused: false },
+			] );
+
+		// Select next parent (the columns block).
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'The columns block should be selected and focused.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group', selected: false, focused: false },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{ name: 'core/column' },
+						{ name: 'core/column' },
+					],
+					selected: true,
+					focused: true,
+				},
+				{ name: 'core/file', selected: false, focused: false },
+			] );
+
+		// Select all siblings at root level.
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'All blocks should be selected.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group', selected: true, focused: false },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{ name: 'core/column' },
+						{ name: 'core/column' },
+					],
+					selected: true,
+					focused: true,
+				},
+				{ name: 'core/file', selected: true, focused: false },
+			] );
+
+		// Deselect blocks via Escape key.
+		await page.keyboard.press( 'Escape' );
+		// Collapse the columns block.
+		await page.keyboard.press( 'ArrowLeft' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'All blocks should be deselected, with focus on the Columns block.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group', selected: false, focused: false },
+				{
+					name: 'core/columns',
+					selected: false,
+					focused: true,
+				},
+				{ name: 'core/file', selected: false, focused: false },
+			] );
+
+		// Move focus and selection to the file block to set up for testing duplication.
+		await listView
+			.getByRole( 'gridcell', { name: 'File', exact: true } )
+			.dblclick();
+
+		// Test duplication behaviour.
+		await pageUtils.pressKeys( 'primaryShift+d' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Duplicating a block should retain selection on existing block, move focus to duplicated block.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/columns' },
+				{ name: 'core/file', selected: true },
+				{ name: 'core/file', focused: true },
+			] );
+
+		// Test insert before.
+		await pageUtils.pressKeys( 'primaryAlt+t' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Inserting a block before should move selection and focus to the inserted block.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/columns' },
+				{ name: 'core/file', selected: false },
+				{ name: 'core/paragraph', focused: true, selected: true },
+				{ name: 'core/file', selected: false },
+			] );
+
+		// Test insert after.
+		await pageUtils.pressKeys( 'primaryAlt+y' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Inserting a block before should move selection and focus to the inserted block.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/columns' },
+				{ name: 'core/file', selected: false },
+				{ name: 'core/paragraph', focused: false, selected: false },
+				{ name: 'core/paragraph', focused: true, selected: true },
+				{ name: 'core/file', selected: false },
+			] );
+
+		// Remove the inserted blocks.
+		await page.keyboard.press( 'Delete' );
+		await page.keyboard.press( 'Delete' );
+
+		// Delete the first File block.
+		await page.keyboard.press( 'Delete' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting a block should move focus and selection to the previous block'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/columns', selected: true, focused: true },
+				{ name: 'core/file' },
+			] );
+
+		// Expand the current column.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Move focus but do not select the second column'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{
+					name: 'core/columns',
+					selected: true,
+					innerBlocks: [
+						{ name: 'core/column' },
+						{ name: 'core/column', focused: true },
+					],
+				},
+				{ name: 'core/file' },
+			] );
+
+		await page.keyboard.press( 'Delete' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting a inner block moves focus to the previous inner block'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{
+					name: 'core/columns',
+					selected: true,
+					innerBlocks: [
+						{
+							name: 'core/column',
+							selected: false,
+							focused: true,
+						},
+					],
+				},
+				{ name: 'core/file' },
+			] );
+
+		// Expand the current column.
+		await page.keyboard.press( 'ArrowRight' );
+		// Move focus and select the Heading block.
+		await listView
+			.getByRole( 'gridcell', { name: 'Heading', exact: true } )
+			.dblclick();
+		// Select both inner blocks in the column.
+		await page.keyboard.press( 'Shift+ArrowDown' );
+
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting multiple blocks moves focus to the parent block'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{
+					name: 'core/columns',
+					innerBlocks: [
+						{
+							name: 'core/column',
+							selected: true,
+							focused: true,
+							innerBlocks: [],
+						},
+					],
+				},
+				{ name: 'core/file' },
+			] );
+
+		// Move focus and select the first block.
+		await listView
+			.getByRole( 'gridcell', { name: 'Group', exact: true } )
+			.dblclick();
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting the first block moves focus to the second block'
+			)
+			.toMatchObject( [
+				{
+					name: 'core/columns',
+					selected: true,
+					focused: true,
+				},
+				{ name: 'core/file' },
+			] );
+
+		// Delete remaining blocks.
+		// Keyboard shortcut should also work.
+		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'access+z' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting the only blocks left will create a default block and focus/select it'
+			)
+			.toMatchObject( [
+				{
+					name: 'core/paragraph',
+					selected: true,
+					focused: true,
+				},
+			] );
+
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.evaluate( () =>
+			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
+		);
+		await listView
+			.getByRole( 'gridcell', { name: 'Paragraph' } )
+			.getByRole( 'link' )
+			.focus();
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Block selection is cleared and focus is on the paragraph block'
+			)
+			.toMatchObject( [
+				{ name: 'core/paragraph', selected: false, focused: true },
+				{ name: 'core/heading', selected: false },
+			] );
+
+		await pageUtils.pressKeys( 'access+z' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting blocks without existing selection will not select blocks'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: true },
+			] );
+
+		// Insert a block that is locked and cannot be removed.
+		await editor.insertBlock( {
+			name: 'core/file',
+			attributes: { lock: { move: false, remove: true } },
+		} );
+		// Click on the Heading block to select it.
+		await listView
+			.getByRole( 'gridcell', { name: 'Heading', exact: true } )
+			.click();
+		await listView
+			.getByRole( 'gridcell', { name: 'File' } )
+			.getByRole( 'link' )
+			.focus();
+		for ( const keys of [ 'Delete', 'Backspace', 'access+z' ] ) {
+			await pageUtils.pressKeys( keys );
+			await expect
+				.poll(
+					listViewUtils.getBlocksWithA11yAttributes,
+					'Trying to delete locked blocks should not do anything'
+				)
+				.toMatchObject( [
+					{ name: 'core/heading', selected: true, focused: false },
+					{ name: 'core/file', selected: false, focused: true },
+				] );
+		}
+
+		// Deselect blocks via Escape key.
+		await page.keyboard.press( 'Escape' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Pressing Escape should deselect blocks'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{ name: 'core/file', selected: false, focused: true },
+			] );
+
+		// Copy and paste blocks. To begin, add another Group block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph' },
+				{ name: 'core/pullquote' },
+			],
+		} );
+
+		// Click the newly inserted Group block List View item to ensure it is focused.
+		await listView
+			.getByRole( 'link', {
+				name: 'Group',
+				expanded: false,
+			} )
+			.click();
+
+		// Move down to group block, expand, and then move to the paragraph block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to copy focused block and paste in the list view via keyboard shortcuts'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{ name: 'core/file', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					innerBlocks: [
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: true,
+						},
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+
+		// Cut and paste blocks.
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'primary+x' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to cut a block in the list view, with the preceding block being selected'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{ name: 'core/file', selected: true, focused: true },
+			] );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to paste previously cut block in the list view via keyboard shortcuts'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					focused: true,
+					innerBlocks: [
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+	} );
+
+	test( 'should create a group block from the selected multiple blocks', async ( {
+		editor,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		await listViewUtils.openListView();
+
+		// Group Heading and File blocks.
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
+		await pageUtils.pressKeys( 'primary+g' );
+		await expect
+			.poll( listViewUtils.getBlocksWithA11yAttributes )
+			.toMatchObject( [
+				{ name: 'core/paragraph', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					focused: true,
+					innerBlocks: [
+						{
+							name: 'core/heading',
+							selected: false,
+							focused: false,
+						},
+						{
+							name: 'core/file',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+	} );
+
+	test( 'block settings dropdown menu', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		await listView
+			.getByRole( 'button', { name: 'Options' } )
+			.first()
+			.click();
+
+		await page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem', { name: 'Duplicate' } )
+			.click();
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should duplicate a block and move focus'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false },
+				{ name: 'core/heading', selected: false, focused: true },
+				{ name: 'core/file', selected: true },
+			] );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await listView
+			.getByRole( 'button', { name: 'Options' } )
+			.first()
+			.click();
+		await page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem', { name: 'Delete' } )
+			.click();
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should delete multiple selected blocks using the dropdown menu'
+			)
+			.toMatchObject( [
+				{ name: 'core/file', selected: true, focused: true },
+			] );
+
+		await page.keyboard.press( 'ArrowRight' );
+		const optionsForFileToggle = listView
+			.getByRole( 'row' )
+			.filter( {
+				has: page.getByRole( 'gridcell', { name: 'File' } ),
+			} )
+			.getByRole( 'button', { name: 'Options' } );
+		const optionsForFileMenu = page.getByRole( 'menu', {
+			name: 'Options',
+		} );
+		await expect(
+			optionsForFileToggle,
+			'Pressing arrow right should move focus to the menu dropdown toggle button'
+		).toBeFocused();
+
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			optionsForFileMenu,
+			'Pressing Enter should open the menu dropdown'
+		).toBeVisible();
+
+		await page.keyboard.press( 'Escape' );
+		await expect(
+			optionsForFileMenu,
+			'Pressing Escape should close the menu dropdown'
+		).toBeHidden();
+		await expect(
+			optionsForFileToggle,
+			'Should move focus back to the toggle button'
+		).toBeFocused();
+
+		await page.keyboard.press( 'Space' );
+		await expect(
+			optionsForFileMenu,
+			'Pressing Space should also open the menu dropdown'
+		).toBeVisible();
+
+		await pageUtils.pressKeys( 'primaryAlt+t' ); // Keyboard shortcut for Insert before.
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Pressing keyboard shortcut should also work when the menu is opened and focused'
+			)
+			.toMatchObject( [
+				{ name: 'core/paragraph', selected: true, focused: true },
+				{ name: 'core/file', selected: false, focused: false },
+			] );
+		await expect(
+			optionsForFileMenu,
+			'The menu should be closed after pressing keyboard shortcut'
+		).toBeHidden();
+
+		await optionsForFileToggle.click();
+		await expect(
+			optionsForFileMenu,
+			'Pressing Space should also open the menu dropdown'
+		).toBeVisible();
+		await pageUtils.pressKeys( 'access+z' ); // Keyboard shortcut for Delete.
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Deleting blocks should move focus and selection'
+			)
+			.toMatchObject( [
+				{ name: 'core/paragraph', selected: true, focused: true },
+			] );
+
+		// Insert a block that is locked and cannot be removed.
+		await editor.insertBlock( {
+			name: 'core/file',
+			attributes: { lock: { move: false, remove: true } },
+		} );
+		await optionsForFileToggle.click();
+		await expect(
+			optionsForFileMenu.getByRole( 'menuitem', { name: 'Delete' } ),
+			'The delete menu item should be hidden for locked blocks'
+		).toBeHidden();
+		await pageUtils.pressKeys( 'access+z' );
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Pressing keyboard shortcut should not delete locked blocks either'
+			)
+			.toMatchObject( [
+				{ name: 'core/paragraph' },
+				{ name: 'core/file', selected: true },
+			] );
+		await expect(
+			optionsForFileMenu,
+			'The dropdown menu should also be visible'
+		).toBeVisible();
+	} );
+} );
+
+/** @typedef {import('@playwright/test').Locator} Locator */
+class ListViewUtils {
+	#page;
+	#pageUtils;
+	#editor;
+
+	constructor( { page, pageUtils, editor } ) {
+		this.#page = page;
+		this.#pageUtils = pageUtils;
+		this.#editor = editor;
+
+		/** @type {Locator} */
+		this.listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+	}
+
+	/**
+	 * @return {Promise<Locator>} The list view locator.
+	 */
+	openListView = async () => {
+		await this.#pageUtils.pressKeys( 'access+o' );
+		return this.listView;
+	};
+
+	getBlocksWithA11yAttributes = async () => {
+		const selectedRows = await this.listView
+			.getByRole( 'row' )
+			.filter( {
+				has: this.#page.getByRole( 'gridcell', { selected: true } ),
+			} )
+			.all();
+		const selectedClientIds = await Promise.all(
+			selectedRows.map( ( row ) => row.getAttribute( 'data-block' ) )
+		);
+		const focusedRows = await this.listView
+			.getByRole( 'row' )
+			.filter( { has: this.#page.locator( ':focus' ) } )
+			.all();
+		const focusedClientId =
+			focusedRows.length > 0
+				? await focusedRows[ focusedRows.length - 1 ].getAttribute(
+						'data-block'
+				  )
+				: null;
+		// Don't use the util to get the unmodified default block when it's empty.
+		const blocks = await this.#page.evaluate( () =>
+			window.wp.data.select( 'core/block-editor' ).getBlocks()
+		);
+		function recursivelyApplyAttributes( _blocks ) {
+			return _blocks.map( ( block ) => ( {
+				name: block.name,
+				selected: selectedClientIds.includes( block.clientId ),
+				focused: block.clientId === focusedClientId,
+				innerBlocks: recursivelyApplyAttributes( block.innerBlocks ),
+			} ) );
+		}
+		return recursivelyApplyAttributes( blocks );
+	};
+}
diff --git a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js
new file mode 100644
index 00000000000000..bb390d2b39a8e4
--- /dev/null
+++ b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Managing reusable blocks', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitAdminPage( 'edit.php', 'post_type=wp_block' );
+	} );
+
+	test( 'Should import reusable blocks', async ( { page } ) => {
+		const originalEntries = await page.locator( '.hentry' ).count();
+
+		// Import Reusable block.
+		await page.click( 'role=button[name="Import from JSON"i]' );
+
+		// Select the file to upload.
+		const testReusableBlockFile = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'greeting-reusable-block.json'
+		);
+		await page.setInputFiles( 'input[type="file"]', testReusableBlockFile );
+
+		// Submit the form.
+		await page.click( 'role=button[name="Import"i]' );
+
+		// Wait for the success notice.
+		await expect(
+			page.locator( 'text=Pattern imported successfully!' )
+		).toBeVisible();
+
+		// Refresh the page.
+		await page.reload();
+
+		await expect( page.locator( '.hentry' ) ).toHaveCount(
+			originalEntries + 1
+		);
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/mentions.spec.js b/test/e2e/specs/editor/various/mentions.spec.js
index 878cf148e8abf5..fef3b1c3e3d2e1 100644
--- a/test/e2e/specs/editor/various/mentions.spec.js
+++ b/test/e2e/specs/editor/various/mentions.spec.js
@@ -23,7 +23,9 @@ test.describe( 'autocomplete mentions', () => {
 	} );
 
 	test( 'should insert mention', async ( { page, editor } ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'I am @ad' );
 		await expect(
 			page.locator( 'role=listbox >> role=option[name=/admin/i]' )
@@ -42,9 +44,11 @@ test.describe( 'autocomplete mentions', () => {
 		editor,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'Stuck in the middle with you' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 'you'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 'you'.length } );
 		await page.keyboard.type( '@j' );
 		await expect(
 			page.locator( 'role=listbox >> role=option[name=/testuser/i]' )
@@ -62,7 +66,9 @@ test.describe( 'autocomplete mentions', () => {
 		page,
 		editor,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( 'I am @j' );
 		await expect(
 			page.locator( 'role=listbox >> role=option[name=/testuser/i]' )
diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js
new file mode 100644
index 00000000000000..41fb120023541a
--- /dev/null
+++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js
@@ -0,0 +1,1487 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').Editor} Editor */
+
+/**
+ * Some tests in this file use the character `|` to represent the caret's position
+ * in a more readable format.
+ */
+test.describe( 'Multi-block selection (@firefox, @webkit)', () => {
+	test.use( {
+		multiBlockSelectionUtils: async ( { page, editor }, use ) => {
+			await use( new MultiBlockSelectionUtils( { page, editor } ) );
+		},
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should select with double ctrl+a and speak', async ( {
+		page,
+		editor,
+		pageUtils,
+		multiBlockSelectionUtils,
+	} ) => {
+		for ( let i = 1; i <= 3; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+
+		// Multiselect via keyboard.
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2, 3 ] );
+
+		await expect( page.locator( '[aria-live="assertive"]' ) ).toHaveText(
+			'3 blocks selected.'
+		);
+	} );
+
+	// See #14448: an incorrect buffer may trigger multi-selection too soon.
+	test( 'should only trigger multi-selection when at the end (-webkit)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// Create a paragraph with four lines.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1.<br>2.<br>3.<br>4.' },
+		} );
+		// Create a second block and focus it.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '' },
+		} );
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.click();
+		// Move to the middle of the first line.
+		await pageUtils.pressKeys( 'ArrowUp', { times: 4 } );
+		await page.keyboard.press( 'ArrowRight' );
+		// Select mid line one to mid line four.
+		await pageUtils.pressKeys( 'Shift+ArrowDown', { times: 3 } );
+		// Delete the text to see if the selection was correct.
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '1.' } },
+			{ name: 'core/paragraph', attributes: { content: '' } },
+		] );
+	} );
+
+	test( 'should use selection direction to determine vertical edge', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Shift+Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '3' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.type( '2' );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await page.keyboard.press( 'Shift+ArrowDown' );
+
+		// Should type at the end of the paragraph.
+		await page.keyboard.type( '|' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '1<br>2|' } },
+			{ name: 'core/paragraph', attributes: { content: '3' } },
+		] );
+	} );
+
+	test( 'should always expand single line selection', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Shift+ArrowLeft' );
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
+	test( 'should allow selecting outer edge if there is no sibling block', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		// This should replace the content.
+		await page.keyboard.type( '2' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
+	test( 'should select and deselect with shift and arrow keys', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		for ( let i = 1; i <= 5; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: '3' } )
+			.click();
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 3, 4 ] );
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 3, 4, 5 ] );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 3, 4 ] );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 3 ] );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 2, 3 ] );
+
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2, 3 ] );
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 2, 3 ] );
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 3 ] );
+	} );
+
+	test( 'should deselect with Escape', async ( {
+		page,
+		editor,
+		pageUtils,
+		multiBlockSelectionUtils,
+	} ) => {
+		for ( let i = 1; i <= 3; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2, 3 ] );
+
+		await page.keyboard.press( 'Escape' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1 ] );
+	} );
+
+	test( 'should select with shift + click', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: '1' } )
+			.click( { modifiers: [ 'Shift' ] } );
+
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+
+		// Group the blocks and test that multiselection also works for nested
+		// blocks. Checks for regressions of
+		// https://github.com/WordPress/gutenberg/issues/32056
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Group' } )
+			.click();
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: '1' } )
+			.click();
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: '2' } )
+			.click( { modifiers: [ 'Shift' ] } );
+
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 2, 3 ] );
+	} );
+
+	// @see https://github.com/WordPress/gutenberg/issues/34118
+	test( 'should properly select a single block even if `shift` was held for the selection (-firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'test' },
+		} );
+
+		await editor.saveDraft();
+		await page.reload();
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		await page
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.click( { modifiers: [ 'Shift' ] } );
+		await pageUtils.pressKeys( 'primary+a' );
+		await page.keyboard.type( 'new content' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'new content' },
+			},
+		] );
+	} );
+
+	test( 'should properly select multiple blocks if selected nested blocks belong to different parent (-webkit)', async ( {
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph', attributes: { content: 'first' } },
+				{ name: 'core/paragraph', attributes: { content: 'group' } },
+			],
+		} );
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph', attributes: { content: 'second' } },
+				{ name: 'core/paragraph', attributes: { content: 'group' } },
+			],
+		} );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: 'group' } )
+			.nth( 1 )
+			.click();
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: 'first' } )
+			.click( { modifiers: [ 'Shift' ] } );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 4 ] );
+	} );
+
+	test( 'should properly select part of nested rich text block while holding shift (-firefox)', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'rich text in group' },
+				},
+			],
+		} );
+
+		const paragraphBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const { height } = await paragraphBlock.boundingBox();
+		await paragraphBlock.click( { position: { x: 0, y: height / 2 } } );
+		await paragraphBlock.click( {
+			position: { x: 25, y: height / 2 },
+			modifiers: [ 'Shift' ],
+		} );
+		await page.keyboard.type( 'hi' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'hih text in group' },
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'should select by dragging', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '2' },
+		} );
+		// To hide the block tool bar.
+		await page.keyboard.press( 'ArrowDown' );
+
+		const [ paragraph1, paragraph2 ] = await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.all();
+
+		await paragraph1.hover();
+		await page.mouse.down();
+		await paragraph2.hover();
+		await page.mouse.up();
+
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+	} );
+
+	test( 'should select by dragging into nested block', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '2' },
+				},
+			],
+		} );
+		// To hide the block tool bar.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+
+		const [ paragraph1, paragraph2 ] = await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.all();
+
+		await paragraph1.hover();
+		await page.mouse.down();
+		await paragraph2.hover();
+		await page.mouse.up();
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+	} );
+
+	test( 'should cut and paste', async ( { editor, pageUtils } ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '2' },
+		} );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+x' );
+
+		await expect.poll( editor.getBlocks ).toEqual( [] );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '1' } },
+			{ name: 'core/paragraph', attributes: { content: '2' } },
+		] );
+	} );
+
+	test( 'should copy and paste', async ( { page, editor, pageUtils } ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'first paragraph' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'second paragraph' },
+		} );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+c' );
+
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'should select all blocks after copying' )
+			.toEqual( [] );
+
+		await pageUtils.pressKeys( 'primary+v' );
+		await expect
+			.poll( editor.getBlocks, 'should copy and paste multiple blocks' )
+			.toMatchObject( [
+				{ attributes: { content: 'first paragraph' } },
+				{ attributes: { content: 'second paragraph' } },
+			] );
+
+		await page.keyboard.type( '|' );
+		await expect
+			.poll(
+				editor.getBlocks,
+				'should place the caret at the end of last pasted paragraph'
+			)
+			.toMatchObject( [
+				{ attributes: { content: 'first paragraph' } },
+				{ attributes: { content: 'second paragraph|' } },
+			] );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+v' );
+		await page.keyboard.type( '|' );
+		await expect
+			.poll( editor.getBlocks, 'should replace blocks' )
+			.toMatchObject( [
+				{ attributes: { content: 'first paragraph' } },
+				{ attributes: { content: 'second paragraph|' } },
+			] );
+		await page.keyboard.press( 'Backspace' );
+
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } );
+		await pageUtils.pressKeys( 'primary+v' );
+		await page.keyboard.type( '|' );
+		await expect
+			.poll( editor.getBlocks, 'should paste mid-block' )
+			.toMatchObject( [
+				{ attributes: { content: 'first paragraph' } },
+				{ attributes: { content: 'second paragrfirst paragraph' } },
+				{ attributes: { content: 'second paragraph|aph' } },
+			] );
+	} );
+
+	// This test MUST fail when this line is removed:
+	// https://github.com/WordPress/gutenberg/blob/eb2bb1d3456ea98db74b4518e3394ed6aed9e79f/packages/block-editor/src/components/writing-flow/use-drag-selection.js#L68
+	test( 'should return original focus after failed multi selection attempt', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		const [ coord1, coord2 ] = await editor.canvas
+			.locator( ':root' )
+			.evaluate( () => {
+				const selection = window.getSelection();
+
+				if ( ! selection.rangeCount ) {
+					return;
+				}
+
+				const range = selection.getRangeAt( 0 );
+				const rect1 = range.getClientRects()[ 0 ];
+				const element = document.querySelector(
+					'[data-type="core/paragraph"]'
+				);
+				const rect2 = element.getBoundingClientRect();
+				const iframeOffset =
+					window.frameElement.getBoundingClientRect();
+
+				return [
+					{
+						x: iframeOffset.x + rect1.x,
+						y: iframeOffset.y + rect1.y + rect1.height / 2,
+					},
+					{
+						// Move a bit outside the paragraph.
+						x: iframeOffset.x + rect2.x - 5,
+						y: iframeOffset.y + rect2.y + rect2.height / 2,
+					},
+				];
+			} );
+
+		await page.mouse.click( coord1.x, coord1.y );
+		await page.mouse.down();
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		// Simulate moving once in and out of the paragraph.
+		// Fixes https://github.com/WordPress/gutenberg/issues/48747.
+		await page.mouse.move( coord1.x, coord1.y, { steps: 10 } );
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		await page.mouse.up();
+
+		// Wait for:
+		// https://github.com/WordPress/gutenberg/blob/eb2bb1d3456ea98db74b4518e3394ed6aed9e79f/packages/block-editor/src/components/writing-flow/use-drag-selection.js#L47
+		await page.evaluate(
+			() => new Promise( window.requestAnimationFrame )
+		);
+
+		// Only "1" should be deleted.
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+	} );
+
+	test( 'should keep correct selection when dragging outside block (-firefox)', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '123' );
+		await page.keyboard.press( 'ArrowLeft' );
+
+		const coord2 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			const selection = window.getSelection();
+			const range = selection.getRangeAt( 0 );
+			const rect1 = range.getClientRects()[ 0 ];
+			const iframeOffset = window.frameElement.getBoundingClientRect();
+			return {
+				x: iframeOffset.x + rect1.x,
+				y: iframeOffset.y + rect1.y + rect1.height / 2,
+			};
+		} );
+
+		await page.keyboard.press( 'ArrowLeft' );
+
+		const coord1 = await editor.canvas.locator( ':root' ).evaluate( () => {
+			const selection = window.getSelection();
+			const range = selection.getRangeAt( 0 );
+			const rect1 = range.getClientRects()[ 0 ];
+			const iframeOffset = window.frameElement.getBoundingClientRect();
+
+			return {
+				x: iframeOffset.x + rect1.x,
+				y: iframeOffset.y + rect1.y + rect1.height / 2,
+			};
+		} );
+
+		const coord3Y = await editor.canvas.locator( ':root' ).evaluate( () => {
+			const element = document.querySelector(
+				'[data-type="core/paragraph"]'
+			);
+			const rect2 = element.getBoundingClientRect();
+			const iframeOffset = window.frameElement.getBoundingClientRect();
+			// Move a bit outside the paragraph, downwards.
+			return iframeOffset.y + rect2.y + rect2.height + 5;
+		} );
+
+		await page.mouse.click( coord1.x, coord1.y );
+		await page.mouse.down();
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		await page.mouse.move( coord2.x, coord3Y, { steps: 10 } );
+		await page.mouse.up();
+
+		// Wait for:
+		// https://github.com/WordPress/gutenberg/blob/eb2bb1d3456ea98db74b4518e3394ed6aed9e79f/packages/block-editor/src/components/writing-flow/use-drag-selection.js#L47
+		await page.evaluate(
+			() => new Promise( window.requestAnimationFrame )
+		);
+
+		// "23" should be deleted.
+		await page.keyboard.press( 'Backspace' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+		] );
+	} );
+
+	test( 'should preserve dragged selection on move', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		for ( let i = 1; i <= 3; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+
+		const [ , paragraph2, paragraph3 ] = await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.all();
+
+		// Focus the last paragraph block and hide the block toolbar.
+		await paragraph3.click();
+		await page.keyboard.press( 'ArrowRight' );
+
+		await paragraph3.hover();
+		await page.mouse.down();
+		await paragraph2.hover();
+		await page.mouse.up();
+
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 2, 3 ] );
+
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Move up' } )
+			.click();
+
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '2' } },
+			{ name: 'core/paragraph', attributes: { content: '3' } },
+			{ name: 'core/paragraph', attributes: { content: '1' } },
+		] );
+	} );
+
+	test( 'should clear selection when clicking next to blocks', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', {
+				name: 'Add default block',
+			} )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect( multiBlockSelectionUtils.assertNativeSelection ).toPass();
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+
+		const paragraph1 = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+			.filter( { hasText: '1' } );
+		// For some reason in Chrome it requires two clicks, even though it
+		// doesn't when testing manually.
+		await paragraph1.click( {
+			position: { x: -1, y: 0 },
+			// Use force since it's outside the bounding box of the element.
+			force: true,
+		} );
+		await paragraph1.click( {
+			position: { x: -1, y: 0 },
+			// Use force since it's outside the bounding box of the element.
+			force: true,
+		} );
+
+		await expect
+			.poll( () =>
+				page.evaluate( () => window.getSelection().rangeCount )
+			)
+			.toBe( 0 );
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [] );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '1' } },
+			{ name: 'core/paragraph', attributes: { content: '2' } },
+		] );
+	} );
+
+	test( 'should set attributes for multiple paragraphs', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		for ( let i = 1; i <= 2; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Align text' } )
+			.click();
+		await page
+			.getByRole( 'menu', { name: 'Align text' } )
+			.getByRole( 'menuitemradio', { name: 'Align text center' } )
+			.click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [
+				{ attributes: { align: 'center', content: '1' } },
+				{ attributes: { align: 'center', content: '2' } },
+			] );
+	} );
+
+	// Previously we would unexpectedly duplicate the block on Enter.
+	test( 'should not multi select single block', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1' );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{ name: 'core/paragraph', attributes: { content: '' } },
+			{ name: 'core/paragraph', attributes: { content: '' } },
+		] );
+	} );
+
+	test( 'should gradually multi-select', async ( {
+		page,
+		editor,
+		pageUtils,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: { content: '1' },
+						},
+						{
+							name: 'core/paragraph',
+							attributes: { content: '2' },
+						},
+					],
+				},
+				{ name: 'core/column' },
+			],
+		} );
+		// Focus the last paragraph block.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.nth( 1 )
+			.click();
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [
+				{ name: 'core/paragraph' },
+				{ name: 'core/paragraph' },
+			] );
+
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [ { name: 'core/column' } ] );
+
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [
+				{ name: 'core/column' },
+				{ name: 'core/column' },
+			] );
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect both columns to be deleted.
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/columns', innerBlocks: [] } ] );
+	} );
+
+	test( 'should multi-select from within the list block', async ( {
+		editor,
+		pageUtils,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/list',
+			innerBlocks: [
+				{
+					name: 'core/list-item',
+					attributes: { content: '1' },
+				},
+			],
+		} );
+		// Focus on the list item.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: List item' } )
+			.getByRole( 'textbox' )
+			.click();
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [ { name: 'core/list-item' } ] );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [ { name: 'core/list' } ] );
+
+		await pageUtils.pressKeys( 'primary+a' );
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toMatchObject( [
+				{ name: 'core/paragraph' },
+				{ name: 'core/list' },
+			] );
+	} );
+
+	test( 'should select title if the cursor is on title', async ( {
+		editor,
+		pageUtils,
+		multiBlockSelectionUtils,
+	} ) => {
+		for ( let i = 1; i <= 2; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.type( 'Post title' );
+
+		await pageUtils.pressKeys( 'primary+a' );
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedBlocks )
+			.toEqual( [] );
+		await expect
+			.poll( () =>
+				editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().toString() )
+			)
+			.toBe( 'Post title' );
+	} );
+
+	test( 'should multi-select in the ListView component with shift + click', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+		pageUtils,
+	} ) => {
+		for ( let i = 1; i <= 4; i += 1 ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: `${ i }` },
+			} );
+		}
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		const navButtons = listView.getByRole( 'link', {
+			name: 'Paragraph',
+		} );
+
+		await navButtons.nth( 1 ).click();
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Clicking on the second list item should result in the second block being selected.'
+			)
+			.toEqual( [ 2 ] );
+
+		await navButtons.nth( 3 ).click( { modifiers: [ 'Shift' ] } );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Shift clicking the fourth list item should result in blocks 2 through 4 being selected.'
+			)
+			.toEqual( [ 2, 3, 4 ] );
+
+		await navButtons.nth( 0 ).click( { modifiers: [ 'Shift' ] } );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'With the shift key still held down, clicking the first block should result in the first two blocks being selected.'
+			)
+			.toEqual( [ 1, 2 ] );
+
+		await navButtons.nth( 3 ).click();
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'With the shift key up, clicking the fourth block should result in only that block being selected.'
+			)
+			.toEqual( [ 4 ] );
+
+		// Move focus to the list view link to prepare for the keyboard navigation.
+		await navButtons.nth( 3 ).click();
+		await expect( navButtons.nth( 3 ) ).toBeFocused();
+		// Press Up twice to highlight the second block.
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Shift + press Down to select the 2nd and 3rd blocks.'
+			)
+			.toEqual( [ 2, 3 ] );
+
+		await page.keyboard.press( 'Shift+ArrowDown' );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Press Down once more to also select the 4th block.'
+			)
+			.toEqual( [ 2, 3, 4 ] );
+
+		await pageUtils.pressKeys( 'Shift+ArrowUp', { times: 3 } );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Press Up three times to adjust the selection to only include the first two blocks.'
+			)
+			.toEqual( [ 1, 2 ] );
+
+		// Navigate to the bottom of the list of blocks.
+		await pageUtils.pressKeys( 'ArrowDown', { times: 3 } );
+
+		// This tests that shift selecting blocks by keyboard that are not adjacent
+		// to an existing selection resets the selection.
+		await page.keyboard.press( 'Shift+ArrowUp' );
+		await expect
+			.poll(
+				multiBlockSelectionUtils.getSelectedFlatIndices,
+				'Shift + press UP to select the 3rd and 4th blocks.'
+			)
+			.toEqual( [ 3, 4 ] );
+	} );
+
+	test( 'should forward delete across blocks', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1[' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '.' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/heading',
+			attributes: { level: 2, content: ']2' },
+		} );
+		// Focus the heading block.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Heading' } )
+			.click();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 5 } );
+
+		await page.keyboard.press( 'Delete' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { level: 2, content: '1|2' },
+			},
+		] );
+	} );
+
+	test( 'should write over selection (-firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 3 } );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1|2' },
+			},
+		] );
+	} );
+
+	test( 'should write over selection (-chromium, -webkit, @firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '1[' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ']2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 3 } );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		// For some reason, this works completely fine when testing manually in
+		// Firefox, but with Playwright it only merges the blocks but doesn't
+		// insert the character.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '12' },
+			},
+		] );
+	} );
+
+	test( 'should handle Enter across blocks', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1[' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '.' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/heading',
+			attributes: { level: 2, content: ']2' },
+		} );
+		// Focus the heading block.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Heading' } )
+			.click();
+		await page.keyboard.press( 'ArrowLeft' );
+		// Select everything between [].
+		await pageUtils.pressKeys( 'Shift+ArrowLeft', { times: 5 } );
+
+		await page.keyboard.press( 'Enter' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/heading',
+				attributes: { level: 2, content: '|2' },
+			},
+		] );
+	} );
+
+	test( 'should select separator (single element block)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'a' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '' },
+		} );
+		await editor.insertBlock( { name: 'core/separator' } );
+
+		// Focus and move the caret to the right of the first paragraph.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: 'a' } )
+			.click();
+
+		await pageUtils.pressKeys( 'Shift+ArrowDown', { times: 2 } );
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '|' },
+			},
+		] );
+	} );
+
+	test( 'should partially select with shift + click', async ( {
+		page,
+		editor,
+	} ) => {
+		// To do: run with iframe.
+		await editor.switchToLegacyCanvas();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '<strong>1</strong>[' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: ']2' },
+		} );
+		// Focus and move the caret to the end.
+		const secondParagraphBlock = page
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: ']2' } );
+		const secondParagraphBlockBox =
+			await secondParagraphBlock.boundingBox();
+		await secondParagraphBlock.click( {
+			position: {
+				x: secondParagraphBlockBox.width - 1,
+				y: secondParagraphBlockBox.height / 2,
+			},
+		} );
+
+		await page.keyboard.press( 'ArrowLeft' );
+		const strongText = page
+			.getByRole( 'region', { name: 'Editor content' } )
+			.getByText( '1', { exact: true } );
+		const strongBox = await strongText.boundingBox();
+		// Focus and move the caret to the end.
+		await strongText.click( {
+			// Ensure clicking on the right half of the element.
+			position: { x: strongBox.width - 1, y: strongBox.height / 2 },
+			modifiers: [ 'Shift' ],
+		} );
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure selection is in the correct place.
+		await page.keyboard.type( '|' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>1</strong>|2' },
+			},
+		] );
+	} );
+
+	test.describe( 'shift+click multi-selection', () => {
+		test( 'should multi-select block with text selection and a block without text selection', async ( {
+			page,
+			editor,
+			multiBlockSelectionUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			} );
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'hi' },
+			} );
+			await editor.insertBlock( { name: 'core/spacer' } );
+			await page.keyboard.press( 'ArrowUp' );
+
+			await editor.canvas
+				.getByRole( 'document', { name: 'Block: Spacer' } )
+				.click( { modifiers: [ 'Shift' ] } );
+
+			await expect
+				.poll( multiBlockSelectionUtils.getSelectedBlocks )
+				.toMatchObject( [
+					{ name: 'core/paragraph', attributes: { content: 'hi' } },
+					{ name: 'core/spacer' },
+				] );
+		} );
+
+		test( 'should multi-select blocks without text selection', async ( {
+			editor,
+			multiBlockSelectionUtils,
+		} ) => {
+			await editor.insertBlock( { name: 'core/spacer' } );
+			await editor.insertBlock( { name: 'core/spacer' } );
+
+			const spacerBlocks = editor.canvas.getByRole( 'document', {
+				name: 'Block: Spacer',
+			} );
+
+			await spacerBlocks.nth( 1 ).click();
+			await spacerBlocks.nth( 0 ).click( { modifiers: [ 'Shift' ] } );
+
+			await expect
+				.poll( multiBlockSelectionUtils.getSelectedBlocks )
+				.toMatchObject( [
+					{ name: 'core/spacer' },
+					{ name: 'core/spacer' },
+				] );
+		} );
+	} );
+
+	test( 'should select by dragging into separator', async ( {
+		page,
+		editor,
+		multiBlockSelectionUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '1' },
+		} );
+		await editor.insertBlock( { name: 'core/separator' } );
+		// Hide the block toolbar.
+		await page.keyboard.press( 'ArrowUp' );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.hover();
+		await page.mouse.down();
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Separator' } )
+			.hover();
+		await page.mouse.up();
+
+		await expect
+			.poll( multiBlockSelectionUtils.getSelectedFlatIndices )
+			.toEqual( [ 1, 2 ] );
+	} );
+} );
+
+class MultiBlockSelectionUtils {
+	/** @type {Page} */
+	#page;
+	/** @type {Editor} */
+	#editor;
+
+	constructor( { page, editor } ) {
+		this.#page = page;
+		this.#editor = editor;
+	}
+
+	getSelectedBlocks = async () => {
+		return await this.#page.evaluate( () => {
+			const {
+				hasMultiSelection,
+				hasSelectedBlock,
+				getMultiSelectedBlocks,
+				getSelectedBlock,
+			} = window.wp.data.select( 'core/block-editor' );
+			if ( hasMultiSelection() ) {
+				return getMultiSelectedBlocks();
+			} else if ( hasSelectedBlock() ) {
+				return [ getSelectedBlock() ];
+			}
+			return [];
+		} );
+	};
+
+	getSelectedFlatIndices = async () => {
+		return await this.#page.evaluate( () => {
+			const { getSelectedBlockClientIds, getClientIdsWithDescendants } =
+				window.wp.data.select( 'core/block-editor' );
+			const selectedClientIds = getSelectedBlockClientIds();
+			const allClientIds = getClientIdsWithDescendants();
+			return selectedClientIds.map(
+				( clientId ) => allClientIds.indexOf( clientId ) + 1
+			);
+		} );
+	};
+
+	/**
+	 * Tests if the native selection matches the block selection.
+	 */
+	assertNativeSelection = async () => {
+		const selection = await this.#editor.canvas
+			.locator( ':root' )
+			.evaluateHandle( () => window.getSelection() );
+
+		const { isMultiSelected, selectionStart, selectionEnd } =
+			await this.#page.evaluate( () => {
+				const {
+					hasMultiSelection,
+					getSelectionStart,
+					getSelectionEnd,
+				} = window.wp.data.select( 'core/block-editor' );
+				return {
+					isMultiSelected: hasMultiSelection(),
+					selectionStart: getSelectionStart().clientId,
+					selectionEnd: getSelectionEnd().clientId,
+				};
+			} );
+		const startBlock = this.#editor.canvas.locator(
+			`[data-block="${ selectionStart }"]`
+		);
+		const endBlock = this.#editor.canvas.locator(
+			`[data-block="${ selectionEnd }"]`
+		);
+
+		expect(
+			await selection.evaluate( ( _selection ) => _selection.rangeCount ),
+			'Expected one range'
+		).toBe( 1 );
+
+		const range = await selection.evaluateHandle( ( _selection ) =>
+			_selection.getRangeAt( 0 )
+		);
+		const isCollapsed = await range.evaluate(
+			( { collapsed } ) => collapsed
+		);
+
+		if ( isMultiSelected ) {
+			expect( isCollapsed, 'Expected an uncollapsed selection' ).toBe(
+				false
+			);
+
+			expect(
+				await startBlock.evaluate(
+					( block, _selection ) =>
+						_selection.containsNode( block, true ),
+					selection
+				),
+				'Expected selection to include in the first selected block'
+			).toBe( true );
+			expect(
+				await endBlock.evaluate(
+					( block, _selection ) =>
+						_selection.containsNode( block, true ),
+					selection
+				),
+				'Expected selection to include in the last selected block'
+			).toBe( true );
+		} else {
+			expect( isCollapsed, 'Expected a collapsed selection' ).toBe(
+				true
+			);
+
+			expect(
+				await startBlock.evaluate(
+					( block, { startContainer, endContainer } ) =>
+						block.contains( startContainer ) &&
+						block.contains( endContainer ),
+					range
+				),
+				'Expected selection to start and end in the selected block'
+			).toBe( true );
+		}
+	};
+}
diff --git a/test/e2e/specs/editor/various/multi-entity-saving.spec.js b/test/e2e/specs/editor/various/multi-entity-saving.spec.js
new file mode 100644
index 00000000000000..30496fac32aec4
--- /dev/null
+++ b/test/e2e/specs/editor/various/multi-entity-saving.spec.js
@@ -0,0 +1,210 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Editor - Multi-entity save flow', () => {
+	let originalSiteTitle, originalBlogDescription;
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		const siteSettings = await requestUtils.getSiteSettings();
+
+		originalSiteTitle = siteSettings.title;
+		originalBlogDescription = siteSettings.description;
+	} );
+
+	test.afterEach( async ( { requestUtils, editor } ) => {
+		await requestUtils.updateSiteSettings( {
+			title: originalSiteTitle,
+			description: originalBlogDescription,
+		} );
+
+		// Restore the Publish sidebar.
+		await editor.setPreferences( 'core', {
+			isPublishSidebarEnabled: true,
+		} );
+	} );
+
+	test( 'Save flow should work as expected', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Test Post...' );
+		await page.keyboard.press( 'Enter' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		const publishButton = topBar.getByRole( 'button', { name: 'Publish' } );
+		const saveButton = topBar.getByRole( 'button', {
+			name: 'Save',
+			exact: true,
+		} );
+
+		// Should not trigger multi-entity save button with only post edited.
+		await expect( publishButton ).toBeEnabled();
+
+		const openPublishPanel = page.getByRole( 'button', {
+			name: 'Open publish panel',
+		} );
+		const openSavePanel = page.getByRole( 'button', {
+			name: 'Open save panel',
+		} );
+		const publishPanel = page.getByRole( 'region', {
+			name: 'Editor publish',
+		} );
+
+		// Should only have publish panel a11y button active with only post edited.
+		await expect( openPublishPanel ).toBeVisible();
+		await expect( openSavePanel ).toBeHidden();
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to publish?'
+		);
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to save?'
+		);
+
+		// Add a title block and edit it.
+		await editor.insertBlock( {
+			name: 'core/site-title',
+		} );
+		const siteTitleField = editor.canvas.getByRole( 'textbox', {
+			name: 'Site title text',
+		} );
+		await siteTitleField.fill( `${ originalSiteTitle }...` );
+
+		// Should trigger multi-entity save button once template part edited.
+		await expect( saveButton ).toBeVisible();
+
+		// Should only have save panel a11y button active after child entities edited.
+		await expect( openPublishPanel ).toBeHidden();
+		await expect( openSavePanel ).toBeVisible();
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to publish?'
+		);
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to save?'
+		);
+
+		// Opening panel has boxes checked by default.
+		await saveButton.click();
+		await expect( publishPanel ).toContainText( 'Are you ready to save?' );
+		const allCheckboxes = await publishPanel
+			.getByRole( 'checkbox' )
+			.count();
+		await expect(
+			publishPanel.getByRole( 'checkbox', { checked: true } )
+		).toHaveCount( allCheckboxes );
+
+		// Should not show other panels (or their a11y buttons) while save panel opened.
+		await expect( openPublishPanel ).toBeHidden();
+		await expect( openSavePanel ).toBeHidden();
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to publish?'
+		);
+
+		// Publish panel should open after saving.
+		await publishPanel.getByRole( 'button', { name: 'Save' } ).click();
+		await expect( publishPanel ).toContainText(
+			'Are you ready to publish?'
+		);
+
+		// No other panels (or their a11y buttons) should be present with publish panel open.
+		await expect( openPublishPanel ).toBeHidden();
+		await expect( openSavePanel ).toBeHidden();
+		await expect( publishPanel ).not.toContainText(
+			'Are you ready to save?'
+		);
+
+		// Close publish panel.
+		await publishPanel.getByRole( 'button', { name: 'Cancel' } ).click();
+
+		// Verify saving is disabled.
+		await expect(
+			topBar.getByRole( 'button', { name: 'Saved' } )
+		).toBeDisabled();
+		await expect( openSavePanel ).toBeHidden();
+
+		await editor.publishPost();
+
+		// Update the post.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Updated post title' );
+
+		// Verify update button is enabled.
+		await expect( saveButton ).toBeEnabled();
+
+		// Verify multi-entity saving not enabled.
+		await expect( publishPanel ).toBeHidden();
+
+		await siteTitleField.fill( `${ originalSiteTitle }!` );
+
+		// Multi-entity saving should be enabled.
+		await expect( openSavePanel ).toBeEnabled();
+	} );
+
+	test( 'Site blocks should save individually', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.setPreferences( 'core', {
+			isPublishSidebarEnabled: false,
+		} );
+
+		// Add site blocks.
+		await editor.insertBlock( {
+			name: 'core/site-title',
+		} );
+		await editor.insertBlock( {
+			name: 'core/site-tagline',
+		} );
+
+		const siteTitleField = editor.canvas.getByRole( 'textbox', {
+			name: 'Site title text',
+		} );
+
+		// Ensure title is retrieved before typing.
+		await expect( siteTitleField ).toHaveText( originalSiteTitle );
+
+		await siteTitleField.fill( `${ originalSiteTitle }...` );
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Site Tagline',
+			} )
+			.fill( 'Just another WordPress site' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		const publishPanel = page.getByRole( 'region', {
+			name: 'Editor publish',
+		} );
+
+		await topBar
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
+		await expect( publishPanel.getByRole( 'checkbox' ) ).toHaveCount( 3 );
+
+		// Skip site title saving.
+		await publishPanel
+			.getByRole( 'checkbox', {
+				name: 'Title',
+			} )
+			.setChecked( false );
+
+		await publishPanel.getByRole( 'button', { name: 'Save' } ).click();
+
+		// Wait for the snackbar notice that the post has been published.
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'published' } )
+			.waitFor();
+
+		await topBar.getByRole( 'button', { name: 'Save' } ).click();
+
+		await expect( publishPanel.getByRole( 'checkbox' ) ).toHaveCount( 1 );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/navigable-toolbar.spec.js b/test/e2e/specs/editor/various/navigable-toolbar.spec.js
new file mode 100644
index 00000000000000..4cfc3f9c210086
--- /dev/null
+++ b/test/e2e/specs/editor/various/navigable-toolbar.spec.js
@@ -0,0 +1,356 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	BlockToolbarUtils: async ( { editor, page, pageUtils }, use ) => {
+		await use( new BlockToolbarUtils( { editor, page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Block Toolbar', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Contextual Toolbar', () => {
+		test( 'should not scroll page', async ( { page, pageUtils } ) => {
+			while (
+				await page.evaluate( () => {
+					const { activeElement } =
+						document.activeElement?.contentDocument ?? document;
+					const scrollable =
+						window.wp.dom.getScrollContainer( activeElement );
+					return ! scrollable || scrollable.scrollTop === 0;
+				} )
+			) {
+				await page.keyboard.press( 'Enter' );
+			}
+
+			await page.keyboard.type( 'a' );
+
+			const scrollTopBefore = await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				window.scrollContainer =
+					window.wp.dom.getScrollContainer( activeElement );
+				return window.scrollContainer.scrollTop;
+			} );
+
+			await pageUtils.pressKeys( 'alt+F10' );
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block Tools' } )
+					.getByRole( 'button', { name: 'Paragraph' } )
+			).toBeFocused();
+
+			const scrollTopAfter = await page.evaluate( () => {
+				return window.scrollContainer.scrollTop;
+			} );
+			expect( scrollTopBefore ).toBe( scrollTopAfter );
+		} );
+
+		test( 'can navigate to the block toolbar and back to block using the keyboard', async ( {
+			BlockToolbarUtils,
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			// Test navigating to block toolbar
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( 'Paragraph' );
+			await BlockToolbarUtils.focusBlockToolbar();
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Paragraph' );
+			// // Navigate to Align Text
+			await page.keyboard.press( 'ArrowRight' );
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Align text' );
+			// // Open the dropdown
+			await page.keyboard.press( 'Enter' );
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Align text left' );
+			await page.keyboard.press( 'ArrowDown' );
+			await BlockToolbarUtils.expectLabelToHaveFocus(
+				'Align text center'
+			);
+			await page.keyboard.press( 'Escape' );
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Align text' );
+
+			// Navigate to the Bold item. Testing items via the fills within the block toolbar are especially important
+			await page.keyboard.press( 'ArrowRight' );
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Bold' );
+
+			await BlockToolbarUtils.focusBlock();
+			await BlockToolbarUtils.expectLabelToHaveFocus(
+				'Block: Paragraph'
+			);
+
+			await BlockToolbarUtils.focusBlockToolbar();
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Bold' );
+
+			await BlockToolbarUtils.focusBlock();
+
+			// Try selecting text and navigating to block toolbar
+			await pageUtils.pressKeys( 'Shift+ArrowLeft', {
+				times: 4,
+				delay: 50,
+			} );
+			expect(
+				await editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().toString() )
+			).toBe( 'raph' );
+
+			// Go back to the toolbar and apply a formatting option
+			await BlockToolbarUtils.focusBlockToolbar();
+			await BlockToolbarUtils.expectLabelToHaveFocus( 'Bold' );
+			await page.keyboard.press( 'Enter' );
+			// Should focus the selected text again
+			expect(
+				await editor.canvas
+					.locator( ':root' )
+					.evaluate( () => window.getSelection().toString() )
+			).toBe( 'raph' );
+		} );
+	} );
+
+	test( 'should focus with Shift+Tab', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'a' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Block Tools' } )
+				.getByRole( 'button', { name: 'Paragraph' } )
+		).toBeFocused();
+	} );
+
+	// If this test breaks, it's likely that a new div has been added to wrap the top toolbar, which will need an additional
+	// overflow-x property set to allow the block toolbar to scroll.
+	test( 'Block toolbar will scroll to reveal hidden buttons with fixed toolbar', async ( {
+		editor,
+		BlockToolbarUtils,
+		page,
+		pageUtils,
+	} ) => {
+		/* eslint-disable playwright/expect-expect */
+		/* eslint-disable playwright/no-wait-for-timeout */
+		// Set the fixed toolbar
+		await editor.setIsFixedToolbar( true );
+		// Insert a block with a lot of tool buttons
+		await editor.insertBlock( { name: 'core/buttons' } );
+		// Set the locators we'll need to check for visibility
+		const blockButton = page.getByRole( 'button', {
+			name: 'Button',
+			exact: true,
+		} );
+
+		const blockToolbar = page.getByRole( 'toolbar', {
+			name: 'Block tools',
+		} );
+
+		// Test: Top Toolbar can scroll to reveal hidden block tools.
+		await pageUtils.setBrowserViewport( { width: 960, height: 700 } );
+
+		// Test: Block toolbar can scroll on top toolbar mode
+		await BlockToolbarUtils.testScrollable( blockToolbar, blockButton );
+
+		// Test: Fixed toolbar can scroll.
+
+		// Make the viewport very small to force the fixed to bottom toolbar overflow
+		await pageUtils.setBrowserViewport( { width: 400, height: 700 } );
+
+		await BlockToolbarUtils.testScrollable( blockToolbar, blockButton );
+
+		// Test cleanup
+		await editor.setIsFixedToolbar( false );
+		await pageUtils.setBrowserViewport( 'large' );
+		/* eslint-enable playwright/expect-expect */
+		/* eslint-enable playwright/no-wait-for-timeout */
+	} );
+
+	test( 'Tab order of the block toolbar aligns with visual order', async ( {
+		editor,
+		BlockToolbarUtils,
+		page,
+		pageUtils,
+	} ) => {
+		// On default floating toolbar
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+
+		// shift + tab
+		await pageUtils.pressKeys( 'shift+Tab' );
+		// check focus is within the block toolbar
+		const blockToolbarParagraphButton = page.getByRole( 'button', {
+			name: 'Paragraph',
+			exact: true,
+		} );
+		await expect( blockToolbarParagraphButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Tab' );
+		// check focus is on the block
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Block: Paragraph' );
+
+		// set the screen size to mobile
+		await pageUtils.setBrowserViewport( 'small' );
+
+		// TEST: Small screen toolbar without fixed toolbar setting should be the first tabstop before the editor
+		await pageUtils.pressKeys( 'shift+Tab' );
+		// check focus is within the block toolbar
+		await expect( blockToolbarParagraphButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Tab' );
+		// check focus is on the block
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Block: Paragraph' );
+		// TEST: Fixed toolbar should be within the header dom
+		// Changed to Fixed top toolbar setting and large viewport to test fixed toolbar
+		await pageUtils.setBrowserViewport( 'large' );
+		await editor.setIsFixedToolbar( true );
+		// shift + tab
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		// Options button is the last one in the top toolbar, the first item outside of the editor canvas, so it should get focused.
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Options' );
+
+		await pageUtils.pressKeys( 'Tab' );
+		// check focus is on the block
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Block: Paragraph' );
+		// Move to block, alt + f10
+		await pageUtils.pressKeys( 'alt+F10' );
+		// check focus in block toolbar
+		await expect( blockToolbarParagraphButton ).toBeFocused();
+		// escape back to block
+		await pageUtils.pressKeys( 'Escape' );
+		// check block focus
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Block: Paragraph' );
+
+		// TEST: Small screen toolbar with fixed toolbar setting should be the first tabstop before the editor. Even though the fixed toolbar setting is on, it should not render within the header since it's visually after it.
+		await pageUtils.setBrowserViewport( 'small' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		// check focus is within the block toolbar
+		await expect( blockToolbarParagraphButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Tab' );
+		// check focus is on the block
+		await BlockToolbarUtils.expectLabelToHaveFocus( 'Block: Paragraph' );
+
+		// Test cleanup
+		await editor.setIsFixedToolbar( false );
+		await pageUtils.setBrowserViewport( 'large' );
+	} );
+
+	test( 'Focus should remain on mover when moving blocks', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// On default floating toolbar
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph 1' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph 2' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Paragraph 3' },
+		} );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		// check focus is within the block toolbar
+		const blockToolbarParagraphButton = page.getByRole( 'button', {
+			name: 'Paragraph',
+			exact: true,
+		} );
+		await expect( blockToolbarParagraphButton ).toBeFocused();
+		// Go to Move Up Button
+		await pageUtils.pressKeys( 'ArrowRight' );
+		const blockToolbarMoveUpButton = page.getByRole( 'button', {
+			name: 'Move up',
+			exact: true,
+		} );
+
+		// Make sure it's in an acvite state for now
+		await expect( blockToolbarMoveUpButton ).toBeEnabled();
+
+		await expect( blockToolbarMoveUpButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		await expect( blockToolbarMoveUpButton ).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		await expect( blockToolbarMoveUpButton ).toBeFocused();
+		await expect( blockToolbarMoveUpButton ).toBeDisabled();
+
+		// Check to make sure focus returns to the Move Up button roving index after all of this
+		await pageUtils.pressKeys( 'Tab' );
+		// Hide the block toolbar
+		await pageUtils.pressKeys( 'ArrowRight' );
+		// Check the block toolbar is hidden
+		const blockToolbar = page.getByRole( 'toolbar', {
+			name: 'Block tools',
+		} );
+		await expect( blockToolbar ).toBeHidden();
+		await pageUtils.pressKeys( 'shift+Tab' );
+		// We should be on the Move Up button again
+		await expect( blockToolbarMoveUpButton ).toBeFocused();
+	} );
+} );
+
+class BlockToolbarUtils {
+	constructor( { editor, page, pageUtils } ) {
+		this.editor = editor;
+		this.page = page;
+		this.pageUtils = pageUtils;
+	}
+
+	async focusBlockToolbar() {
+		await this.pageUtils.pressKeys( 'alt+F10' );
+	}
+
+	async focusBlock() {
+		await this.pageUtils.pressKeys( 'Escape' );
+	}
+
+	async expectLabelToHaveFocus( label ) {
+		const ariaLabel = await this.page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement.contentDocument ?? document;
+			return (
+				activeElement.getAttribute( 'aria-label' ) ||
+				activeElement.innerText
+			);
+		} );
+
+		expect( ariaLabel ).toBe( label );
+	}
+
+	async testScrollable( scrollableElement, elementToTest ) {
+		// We can't use `not.toBeVisible()` here since Playwright's definition of visible or not visible is not the same
+		// as being human visible. It will pass if the element is off screen, but not human visible. Instead, we check the x
+		// position of the element. It should change as we scroll. But we also can't programmatically use scroll, as it will
+		// allow a scroll even if the element is not scrollable. So we use the mouse wheel event to scroll the element.
+		const initialBox = await elementToTest.boundingBox();
+
+		// Scroll the block toolbar to the right to reveal the hidden block tools
+		await scrollableElement.hover();
+		await this.page.mouse.wheel( 60, 0 );
+		// Wait for the scroll to complete. Playwright doesn't wait for the scroll from the mouse event to complete before returning.
+		await this.editor.page.waitForTimeout( 500 );
+
+		let currentBox = await elementToTest.boundingBox();
+
+		// The x position of the button should now be 60px lower.
+		expect( currentBox.x ).toEqual( initialBox.x - 60 );
+
+		// Scroll the block toolbar back to the left to hide the block tools again
+		await this.page.mouse.wheel( -60, 0 );
+		// Wait for the scroll to complete. Playwright doesn't wait for the scroll from the mouse event to complete before returning.
+		await this.editor.page.waitForTimeout( 500 );
+
+		currentBox = await elementToTest.boundingBox();
+
+		// The x positions should return to their initial values
+		expect( initialBox.x ).toEqual( currentBox.x );
+	}
+}
diff --git a/test/e2e/specs/editor/various/new-post-default-content.spec.js b/test/e2e/specs/editor/various/new-post-default-content.spec.js
index 82c8e3a948f31b..6f38f7ffbd1cae 100644
--- a/test/e2e/specs/editor/various/new-post-default-content.spec.js
+++ b/test/e2e/specs/editor/various/new-post-default-content.spec.js
@@ -23,17 +23,16 @@ test.describe( 'new editor filtered state', () => {
 
 	test( 'should respect default content', async ( { editor, page } ) => {
 		await editor.openDocumentSettingsSidebar();
-		await page.click( 'role=button[name="Excerpt"i]' );
-
 		// Assert they match what the plugin set.
 		await expect(
-			page.locator( 'role=textbox[name="Add title"i]' )
+			editor.canvas.locator( 'role=textbox[name="Add title"i]' )
 		).toHaveText( 'My default title' );
 		await expect
 			.poll( editor.getEditedPostContent )
 			.toBe( 'My default content' );
+		await page.getByRole( 'button', { name: 'Edit excerpt' } ).click();
 		await expect(
-			page.locator( 'role=textbox[name="Write an excerpt (optional)"i]' )
-		).toHaveText( 'My default excerpt' );
+			page.getByRole( 'textbox', { name: 'Write an excerpt (optional)' } )
+		).toHaveValue( 'My default excerpt' );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js
index e58e8ed94ffc56..68d983e91045b7 100644
--- a/test/e2e/specs/editor/various/new-post.spec.js
+++ b/test/e2e/specs/editor/various/new-post.spec.js
@@ -26,19 +26,21 @@ test.describe( 'new editor state', () => {
 		await expect( page ).toHaveURL( /post-new.php/ );
 
 		// Should display the blank title.
-		const title = page.locator( 'role=textbox[name="Add title"i]' );
+		const title = editor.canvas.locator(
+			'role=textbox[name="Add title"i]'
+		);
 		await expect( title ).toBeEditable();
 		await expect( title ).toHaveText( '' );
 
-		// Should display the Preview button.
+		// Should display the View button.
 		await expect(
-			page.locator( 'role=button[name="Preview"i]' )
+			page.locator( 'role=button[name="View"i]' )
 		).toBeVisible();
 
 		// Should display the Post Formats UI.
 		await editor.openDocumentSettingsSidebar();
 		await expect(
-			page.locator( 'role=combobox[name="Post Format"i]' )
+			page.locator( 'role=button[name="Change Format: Standard"i]' )
 		).toBeVisible();
 	} );
 
@@ -55,31 +57,28 @@ test.describe( 'new editor state', () => {
 
 	test( 'should focus the title if the title is empty', async ( {
 		admin,
-		page,
+		editor,
 	} ) => {
 		await admin.createNewPost();
 
 		await expect(
-			page.locator( 'role=textbox[name="Add title"i]' )
+			editor.canvas.locator( 'role=textbox[name="Add title"i]' )
 		).toBeFocused();
 	} );
 
 	test( 'should not focus the title if the title exists', async ( {
 		admin,
 		page,
+		editor,
 	} ) => {
 		await admin.createNewPost();
 
 		// Enter a title for this post.
-		await page.type(
-			'role=textbox[name="Add title"i]',
-			'Here is the title'
-		);
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'Here is the title' );
 		// Save the post as a draft.
-		await page.click( 'role=button[name="Save draft"i]' );
-		await page.waitForSelector(
-			'role=button[name="Dismiss this notice"] >> text=Draft saved'
-		);
+		await editor.saveDraft();
 
 		// Reload the browser so a post is loaded with a title.
 		await page.reload();
diff --git a/test/e2e/specs/editor/various/nux.spec.js b/test/e2e/specs/editor/various/nux.spec.js
new file mode 100644
index 00000000000000..424647f4072eaa
--- /dev/null
+++ b/test/e2e/specs/editor/various/nux.spec.js
@@ -0,0 +1,130 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'New User Experience (NUX)', () => {
+	test( 'should show the guide to first-time users', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { showWelcomeGuide: true } );
+
+		const welcomeGuide = page.getByRole( 'dialog', {
+			name: 'Welcome to the editor',
+		} );
+		const guideHeading = welcomeGuide.getByRole( 'heading', { level: 1 } );
+		const nextButton = welcomeGuide.getByRole( 'button', { name: 'Next' } );
+		const prevButton = welcomeGuide.getByRole( 'button', {
+			name: 'Previous',
+		} );
+
+		await expect( guideHeading ).toHaveText( 'Welcome to the editor' );
+
+		await nextButton.click();
+		await expect( guideHeading ).toHaveText( 'Customize each block' );
+
+		await prevButton.click();
+		// Guide should be on page 1 of 4
+		await expect( guideHeading ).toHaveText( 'Welcome to the editor' );
+
+		// Press the button for Page 2.
+		await welcomeGuide
+			.getByRole( 'button', { name: 'Page 2 of 4' } )
+			.click();
+		await expect( guideHeading ).toHaveText( 'Customize each block' );
+
+		// Press the right arrow key for Page 3.
+		await page.keyboard.press( 'ArrowRight' );
+		await expect( guideHeading ).toHaveText( 'Explore all blocks' );
+
+		// Press the right arrow key for Page 4.
+		await page.keyboard.press( 'ArrowRight' );
+		await expect( guideHeading ).toHaveText( 'Learn more' );
+
+		// Click on the *visible* 'Get started' button.
+		await welcomeGuide
+			.getByRole( 'button', { name: 'Get started' } )
+			.click();
+
+		// Guide should be closed.
+		await expect( welcomeGuide ).toBeHidden();
+
+		// Reload the editor.
+		await page.reload();
+
+		// Guide should be closed.
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeVisible();
+		await expect( welcomeGuide ).toBeHidden();
+	} );
+
+	test( 'should not show the welcome guide again if it is dismissed', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { showWelcomeGuide: true } );
+
+		const welcomeGuide = page.getByRole( 'dialog', {
+			name: 'Welcome to the editor',
+		} );
+
+		await expect( welcomeGuide ).toBeVisible();
+		await welcomeGuide.getByRole( 'button', { name: 'Close' } ).click();
+
+		// Reload the editor.
+		await page.reload();
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeFocused();
+
+		await expect( welcomeGuide ).toBeHidden();
+	} );
+
+	test( 'should focus post title field after welcome guide is dismissed and post is empty', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { showWelcomeGuide: true } );
+
+		const welcomeGuide = page.getByRole( 'dialog', {
+			name: 'Welcome to the editor',
+		} );
+
+		await expect( welcomeGuide ).toBeVisible();
+		await welcomeGuide.getByRole( 'button', { name: 'Close' } ).click();
+
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeFocused();
+	} );
+
+	test( 'should show the welcome guide if it is manually opened', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		const welcomeGuide = page.getByRole( 'dialog', {
+			name: 'Welcome to the editor',
+		} );
+
+		await expect( welcomeGuide ).toBeHidden();
+
+		// Manually open the guide
+		await page
+			.getByRole( 'region', {
+				name: 'Editor top bar',
+			} )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Welcome Guide' } )
+			.click();
+
+		await expect( welcomeGuide ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/parsing-patterns.spec.js b/test/e2e/specs/editor/various/parsing-patterns.spec.js
new file mode 100644
index 00000000000000..98261804acb586
--- /dev/null
+++ b/test/e2e/specs/editor/various/parsing-patterns.spec.js
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Parsing patterns', () => {
+	test( 'Considers a pattern with whitespace an allowed pattern', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'core/buttons',
+			innerBlocks: [ { name: 'core/button', attributes: { text: 'a' } } ],
+		} );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.getByLabel( 'Block Inserter' ).click();
+
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+		await page.evaluate( () => {
+			window.wp.data.dispatch( 'core/block-editor' ).updateSettings( {
+				__experimentalBlockPatterns: [
+					{
+						name: 'test/whitespace',
+						title: 'Pattern with top-level whitespace',
+						description: '',
+						content: `<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">test</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">test</a></div>
+<!-- /wp:button -->`,
+					},
+				],
+			} );
+		} );
+
+		// Select the inner buttons block to ensure
+		// the correct insertion point is selected.
+		await editor.selectBlocks(
+			editor.canvas.locator( 'role=document[name="Block: Button"i]' )
+		);
+
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
+			'whitespace'
+		);
+		await page
+			.locator( 'role=option[name="Pattern with top-level whitespace"i]' )
+			.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/buttons',
+				innerBlocks: [
+					{ name: 'core/button', attributes: { text: 'a' } },
+					{ name: 'core/button', attributes: { text: 'test' } },
+					{ name: 'core/button', attributes: { text: 'test' } },
+				],
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
new file mode 100644
index 00000000000000..7d2be84187ef61
--- /dev/null
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -0,0 +1,1423 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+test.describe( 'Pattern Overrides', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllBlocks(),
+		] );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+		] );
+	} );
+
+	test( 'Create a pattern with overrides', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		let patternId;
+		const editableParagraphName = 'Editable Paragraph';
+
+		await test.step( 'Create a synced pattern and assign blocks to allow overrides', async () => {
+			await admin.visitSiteEditor( { postType: 'wp_block' } );
+
+			await page
+				.getByRole( 'region', { name: 'Patterns content' } )
+				.getByRole( 'button', { name: 'add new pattern' } )
+				.click();
+
+			await page
+				.getByRole( 'menu', { name: 'add new pattern' } )
+				.getByRole( 'menuitem', { name: 'add new pattern' } )
+				.click();
+
+			const createPatternDialog = page.getByRole( 'dialog', {
+				name: 'add new pattern',
+			} );
+			await createPatternDialog
+				.getByRole( 'textbox', { name: 'Name' } )
+				.fill( 'Pattern with overrides' );
+			await createPatternDialog
+				.getByRole( 'checkbox', { name: 'Synced' } )
+				.setChecked( true );
+			await createPatternDialog
+				.getByRole( 'button', { name: 'Add' } )
+				.click();
+
+			await editor.canvas
+				.getByRole( 'button', { name: 'Add default block' } )
+				.click();
+			await page.keyboard.type( 'This paragraph can be edited' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( "This one can't" );
+
+			await editor.canvas
+				.getByRole( 'document', { name: 'Block: Paragraph' } )
+				.filter( { hasText: 'This paragraph can be edited' } )
+				.focus();
+
+			await editor.clickBlockOptionsMenuItem( 'Rename' );
+			await page
+				.getByRole( 'dialog', { name: 'Rename' } )
+				.getByRole( 'textbox', { name: 'Name' } )
+				.fill( editableParagraphName );
+			await page
+				.getByRole( 'dialog', { name: 'Rename' } )
+				.getByRole( 'button', { name: 'Save' } )
+				.click();
+
+			await editor.openDocumentSettingsSidebar();
+			const editorSettings = page.getByRole( 'region', {
+				name: 'Editor settings',
+			} );
+			await editorSettings
+				.getByRole( 'button', { name: 'Advanced' } )
+				.click();
+			await editorSettings
+				.getByRole( 'button', { name: 'Enable overrides' } )
+				.click();
+			await page
+				.getByRole( 'dialog', { name: 'Enable overrides' } )
+				.getByRole( 'button', { name: 'Enable' } )
+				.click();
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'This paragraph can be edited',
+						metadata: {
+							name: editableParagraphName,
+							bindings: {
+								__default: {
+									source: 'core/pattern-overrides',
+								},
+							},
+						},
+					},
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: "This one can't" },
+				},
+			] );
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+				.click();
+
+			await expect(
+				page.getByRole( 'button', { name: 'Dismiss this notice' } )
+			).toBeVisible();
+
+			patternId = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getCurrentPostId();
+			} );
+		} );
+
+		await test.step( 'Create a post and insert the pattern with overrides', async () => {
+			await admin.createNewPost();
+
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref: patternId },
+			} );
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref: patternId },
+			} );
+
+			const patternBlocks = editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} );
+			const paragraphs = patternBlocks.first().getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			// Ensure the first pattern is selected.
+			await patternBlocks.first().selectText();
+			await expect( paragraphs.first() ).not.toHaveAttribute(
+				'inert',
+				'true'
+			);
+			await expect( paragraphs.last() ).toHaveAttribute(
+				'inert',
+				'true'
+			);
+
+			await expect( paragraphs.first() ).toHaveText(
+				'This paragraph can be edited'
+			);
+
+			await paragraphs.first().selectText();
+			await page.keyboard.type( 'I would word it this way' );
+
+			// Ensure the second pattern is selected.
+			await patternBlocks.last().selectText();
+			await patternBlocks
+				.last()
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first()
+				.selectText();
+			await page.keyboard.type( 'This one is different' );
+
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/block',
+					attributes: {
+						ref: patternId,
+						content: {
+							[ editableParagraphName ]: {
+								content: 'I would word it this way',
+							},
+						},
+					},
+				},
+				{
+					name: 'core/block',
+					attributes: {
+						ref: patternId,
+						content: {
+							[ editableParagraphName ]: {
+								content: 'This one is different',
+							},
+						},
+					},
+				},
+			] );
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Publish' } )
+				.click();
+			const editorPublishPanel = page.getByRole( 'region', {
+				name: 'Editor publish',
+			} );
+			await editorPublishPanel
+				.getByRole( 'button', { name: 'Publish', exact: true } )
+				.click();
+			await editorPublishPanel
+				.getByRole( 'link', { name: 'View post' } )
+				.click();
+
+			await expect( page.locator( 'p' ) ).toContainText( [
+				'I would word it this way',
+				'This one can’t',
+				'This one is different',
+				'This one can’t',
+			] );
+		} );
+	} );
+
+	test.describe( 'block editing modes', () => {
+		test.beforeEach( async ( { page } ) => {
+			await page.addInitScript( () => {
+				window.__experimentalEditorWriteMode = true;
+			} );
+		} );
+
+		test( 'blocks with bindings in a synced pattern are editable, and all other blocks are disabled', async ( {
+			admin,
+			editor,
+			page,
+			requestUtils,
+		} ) => {
+			const content = `
+			<!-- wp:paragraph {"metadata":{"name":"Pattern Overrides","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+			<p>Pattern Overrides</p>
+			<!-- /wp:paragraph -->
+			<!-- wp:paragraph {"metadata":{"name":"Post Meta Binding","bindings":{"content":{"source":"core/post-meta","args":{"key":"Post Meta Binding"}}}}} -->
+			<p>Post Meta Binding</p>
+			<!-- /wp:paragraph -->
+			<!-- wp:paragraph {"metadata":{"name":"No Overrides or Binding"}} -->
+			<p>No Overrides or Binding</p>
+			<!-- /wp:paragraph -->
+			`;
+
+			const { id } = await requestUtils.createBlock( {
+				title: 'Pattern',
+				content,
+				status: 'publish',
+			} );
+
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//index',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+
+			await editor.setContent( '' );
+			await editor.switchEditorTool( 'Design' );
+
+			// Insert a `<main>` group block.
+			// In zoomed out and write mode it acts as the section root.
+			// Inside is a pattern that acts as a section.
+			await editor.insertBlock( {
+				name: 'core/group',
+				attributes: { tagName: 'main' },
+				innerBlocks: [
+					{
+						name: 'core/block',
+						attributes: { ref: id },
+					},
+				],
+			} );
+
+			const groupBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Group',
+			} );
+			const patternBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} );
+			const paragraphs = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			const blockWithOverrides = paragraphs.filter( {
+				hasText: 'Pattern Overrides',
+			} );
+			const blockWithBindings = paragraphs.filter( {
+				hasText: 'Post Meta Binding',
+			} );
+			const blockWithoutOverridesOrBindings = paragraphs.filter( {
+				hasText: 'No Overrides or Binding',
+			} );
+
+			await test.step( 'Click-through behavior', async () => {
+				// With the group block selected, all the inner blocks of the pattern
+				// are inert due to the 'click-through' behavior, that requires the
+				// pattern block be selected first before its inner blocks are selectable.
+				await editor.selectBlocks( groupBlock );
+				await expect( patternBlock ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithOverrides ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed in / Design mode', async () => {
+				await editor.selectBlocks( patternBlock );
+
+				// Once selected and in zoomed in/design mode the child blocks
+				// of the pattern with bindings are editable, but unbound
+				// blocks are inert.
+				await expect( blockWithOverrides ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed in / Write mode - pattern as a section', async () => {
+				await editor.switchEditorTool( 'Write' );
+
+				// The pattern block is still editable as a section.
+				await expect( patternBlock ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+
+				// Ensure the pattern block is selected.
+				await editor.selectBlocks( patternBlock );
+
+				// Child blocks of the pattern with bindings are editable.
+				await expect( blockWithOverrides ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed out / Write mode - pattern as a section', async () => {
+				await page.getByLabel( 'Zoom Out' ).click();
+				// In zoomed out only the pattern block is editable,
+				// as in this scenario it's a section.
+				await expect( patternBlock ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+
+				// Ensure the pattern block is selected before checking the child blocks
+				// to ensure the click-through behavior isn't interfering.
+				await editor.selectBlocks( patternBlock );
+
+				// None of the child blocks are editable in zoomed out mode.
+				await expect( blockWithOverrides ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed out / Design mode - pattern as a section', async () => {
+				await editor.switchEditorTool( 'Design' );
+				// In zoomed out only the pattern block is editable,
+				// as in this scenario it's a section.
+				await expect( patternBlock ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+
+				// Ensure the pattern block is selected before checking the child blocks
+				// to ensure the click-through behavior isn't interfering.
+				await editor.selectBlocks( patternBlock );
+
+				await expect( blockWithOverrides ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			// Zoom out and group the pattern so that it's no longer a section.
+			await page.getByLabel( 'Zoom Out' ).click();
+			await editor.selectBlocks( patternBlock );
+			await editor.clickBlockOptionsMenuItem( 'Group' );
+
+			await test.step( 'Zoomed in / Write mode - pattern nested in a section', async () => {
+				await editor.switchEditorTool( 'Write' );
+				// The pattern block is not inert as it has editable content, but it shouldn't be selectable.
+				// TODO: find a way to test that the block is not selectable.
+				await expect( patternBlock ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				// Child blocks of the pattern are editable as normal.
+				await expect( blockWithOverrides ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).not.toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed out / Write mode - pattern nested in a section', async () => {
+				await page.getByLabel( 'Zoom Out' ).click();
+				// None of the pattern is editable in zoomed out when nested in a section.
+				await expect( patternBlock ).toHaveAttribute( 'inert', 'true' );
+				await expect( blockWithOverrides ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+
+			await test.step( 'Zoomed out / Design mode - pattern nested in a section', async () => {
+				await editor.switchEditorTool( 'Design' );
+				// None of the pattern is editable in zoomed out when nested in a section.
+				await expect( patternBlock ).toHaveAttribute( 'inert', 'true' );
+				await expect( blockWithOverrides ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+				await expect( blockWithoutOverridesOrBindings ).toHaveAttribute(
+					'inert',
+					'true'
+				);
+			} );
+		} );
+
+		test( 'disables editing of nested patterns', async ( {
+			page,
+			admin,
+			requestUtils,
+			editor,
+		} ) => {
+			const paragraphName = 'Editable paragraph';
+			const headingName = 'Editable heading';
+			const innerPattern = await requestUtils.createBlock( {
+				title: 'Inner Pattern',
+				content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+	<p>Inner paragraph</p>
+	<!-- /wp:paragraph -->`,
+				status: 'publish',
+			} );
+			const outerPattern = await requestUtils.createBlock( {
+				title: 'Outer Pattern',
+				content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+	<h2 class="wp-block-heading">Outer heading</h2>
+	<!-- /wp:heading -->
+	<!-- wp:block {"ref":${ innerPattern.id },"content":{"${ paragraphName }":{"content":"Inner paragraph (edited)"}}} /-->`,
+				status: 'publish',
+			} );
+
+			await admin.createNewPost();
+
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref: outerPattern.id },
+			} );
+
+			// Make an edit to the outer pattern heading.
+			await editor.canvas
+				.getByRole( 'document', { name: 'Block: Heading' } )
+				.fill( 'Outer heading (edited)' );
+
+			const postId = await editor.publishPost();
+
+			// Check the pattern has the correct attributes.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/block',
+					attributes: {
+						ref: outerPattern.id,
+						content: {
+							[ headingName ]: {
+								content: 'Outer heading (edited)',
+							},
+						},
+					},
+					innerBlocks: [],
+				},
+			] );
+			// Check it renders correctly.
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( headingBlock ).toHaveText( 'Outer heading (edited)' );
+			await expect( headingBlock ).not.toHaveAttribute( 'inert', 'true' );
+			await expect( paragraphBlock ).toHaveText(
+				'Inner paragraph (edited)'
+			);
+			await expect( paragraphBlock ).toHaveAttribute( 'inert', 'true' );
+
+			// Edit the outer pattern.
+			await editor.selectBlocks(
+				editor.canvas
+					.getByRole( 'document', { name: 'Block: Pattern' } )
+					.first()
+			);
+			await editor.showBlockToolbar();
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', { name: 'Edit original' } )
+				.click();
+
+			// The inner paragraph should be editable in the pattern focus mode.
+			await editor.selectBlocks(
+				editor.canvas
+					.getByRole( 'document', { name: 'Block: Pattern' } )
+					.first()
+			);
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} ),
+				'The inner paragraph should be editable'
+			).not.toHaveAttribute( 'inert', 'true' );
+
+			// Visit the post on the frontend.
+			await page.goto( `/?p=${ postId }` );
+
+			await expect(
+				page.getByRole( 'heading', { level: 2 } )
+			).toHaveText( 'Outer heading (edited)' );
+			await expect(
+				page.getByText( 'Inner paragraph (edited)' )
+			).toBeVisible();
+		} );
+	} );
+
+	test( 'retains override values when converting a pattern block to regular blocks', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphName = 'paragraph-name';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<p>Editable</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Make an edit to the pattern.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.focus();
+		await page.keyboard.type( 'edited ' );
+
+		// Convert back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		// Check that the overrides remain.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'edited Editable',
+					metadata: { name: paragraphName },
+				},
+			},
+		] );
+	} );
+
+	// See https://github.com/WordPress/gutenberg/pull/62014.
+	test( 'can convert a pattern block to regular blocks when the pattern supports overrides but not override values', async ( {
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphName = 'paragraph-name';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+<p>Editable</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Convert back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		// Check that the overrides remain.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Editable',
+					metadata: { name: paragraphName },
+				},
+			},
+		] );
+	} );
+
+	test( "handles button's link settings", async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+		context,
+	} ) => {
+		const buttonName = 'Editable button';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Button with target',
+			content: `<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"metadata":{"name":"${ buttonName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="http://wp.org" target="_blank" rel="noreferrer noopener nofollow">Button</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Focus the button, open the link popup.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Button' } )
+			.getByRole( 'textbox', { name: 'Button text' } )
+			.focus();
+		await expect(
+			page.getByRole( 'link', { name: 'wp.org' } ).getByText( '↗' )
+		).toHaveAttribute( 'aria-label', '(opens in a new tab)' );
+
+		// The link popup doesn't have a role which is a bit unfortunate.
+		// These are the buttons in the link popup.
+		const advancedPanel = page.getByRole( 'button', {
+			name: 'Advanced',
+			exact: true,
+		} );
+		const editLinkButton = page.getByRole( 'button', {
+			name: 'Edit link',
+			exact: true,
+		} );
+
+		const saveLinkButton = page.locator(
+			'.block-editor-link-control__search-submit'
+		);
+
+		await editLinkButton.click();
+		if (
+			( await advancedPanel.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await advancedPanel.click();
+		}
+
+		const openInNewTabCheckbox = page.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+		const markAsNoFollowCheckbox = page.getByRole( 'checkbox', {
+			name: 'Mark as nofollow',
+		} );
+		// Both checkboxes are checked.
+		await expect( openInNewTabCheckbox ).toBeChecked();
+		await expect( markAsNoFollowCheckbox ).toBeChecked();
+
+		// Check only the "open in new tab" checkbox.
+		await markAsNoFollowCheckbox.setChecked( false );
+		await saveLinkButton.click();
+
+		const postId = await editor.publishPost();
+		const previewPage = await context.newPage();
+		await previewPage.goto( `/?p=${ postId }` );
+		const buttonLink = previewPage.getByRole( 'link', { name: 'Button' } );
+
+		await expect( buttonLink ).toHaveAttribute( 'target', '_blank' );
+		await expect( buttonLink ).toHaveAttribute(
+			'rel',
+			'noreferrer noopener'
+		);
+
+		// Uncheck both checkboxes.
+		await editLinkButton.click();
+		await openInNewTabCheckbox.setChecked( false );
+		await saveLinkButton.click();
+
+		// Update the post.
+		const updateButton = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save' } );
+		await updateButton.click();
+		await expect( updateButton ).toBeDisabled();
+
+		await previewPage.reload();
+		await expect( buttonLink ).toHaveAttribute( 'target', '' );
+		await expect( buttonLink ).toHaveAttribute( 'rel', '' );
+
+		// Check only the "mark as nofollow" checkbox.
+		await editLinkButton.click();
+		await markAsNoFollowCheckbox.setChecked( true );
+		await saveLinkButton.click();
+
+		// Update the post.
+		await updateButton.click();
+		await expect( updateButton ).toBeDisabled();
+
+		await previewPage.reload();
+		await expect( buttonLink ).toHaveAttribute( 'target', '' );
+		await expect( buttonLink ).toHaveAttribute( 'rel', /^\s*nofollow\s*$/ );
+	} );
+
+	test( 'resets overrides after clicking the reset button', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const headingName = 'Editable heading';
+		const paragraphName = 'Editable paragraph';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:heading {"metadata":{"name":"${ headingName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<h2 class="wp-block-heading">Heading</h2>
+<!-- /wp:heading -->
+<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<p>Paragraph</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Make an edit to the heading.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Heading' } )
+			.fill( 'Heading (edited)' );
+
+		const patternBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		const headingBlock = patternBlock.getByRole( 'document', {
+			name: 'Block: Heading',
+		} );
+		const paragraphBlock = patternBlock.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const resetButton = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Reset' } );
+
+		// Assert the pattern block.
+		await editor.selectBlocks( patternBlock );
+		await editor.showBlockToolbar();
+		await expect(
+			resetButton,
+			'The pattern block should have the reset button enabled'
+		).toBeEnabled();
+
+		// Assert the modified heading block with overrides.
+		await editor.selectBlocks( headingBlock );
+		await editor.showBlockToolbar();
+		await expect(
+			resetButton,
+			'The heading block should have the reset button enabled'
+		).toBeEnabled();
+
+		// Assert the unmodified paragraph block (no overrides).
+		await editor.selectBlocks( paragraphBlock );
+		await editor.showBlockToolbar();
+		await expect(
+			resetButton,
+			'The paragraph block should not have the reset button enabled'
+		).toBeDisabled();
+
+		// Reset the whole pattern.
+		await editor.selectBlocks( patternBlock );
+		await editor.showBlockToolbar();
+		await resetButton.click();
+		await expect( headingBlock ).toHaveText( 'Heading' );
+
+		// Undo should work
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Undo' } )
+			.click();
+		await expect( headingBlock ).toHaveText( 'Heading (edited)' );
+
+		// Reset the individual heading block.
+		await editor.selectBlocks( headingBlock );
+		await editor.showBlockToolbar();
+		await resetButton.click();
+		await expect( headingBlock ).toHaveText( 'Heading' );
+		await editor.selectBlocks( patternBlock );
+		await editor.showBlockToolbar();
+		await expect( resetButton ).toBeDisabled();
+	} );
+
+	// A Undo/Redo bug found when implementing and fixing https://github.com/WordPress/gutenberg/pull/60721.
+	// This could be merged into an existing test after we fully test it.
+	test( 'resets overrides immediately should not break undo/redo', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphName = 'Editable paragraph';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+<p>Paragraph</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const patternBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		const paragraphBlock = patternBlock.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const resetButton = page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Reset' } );
+		const documentTools = page.getByRole( 'toolbar', {
+			name: 'Document tools',
+		} );
+		const undoButton = documentTools.getByRole( 'button', {
+			name: 'Undo',
+		} );
+		const redoButton = documentTools.getByRole( 'button', {
+			name: 'Redo',
+		} );
+
+		// Make an edit to the paragraph.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.click();
+		await page.keyboard.type( '*' );
+		await expect( paragraphBlock ).toHaveText( 'Paragraph*' );
+
+		// Reset immediately after making the edit.
+		await editor.selectBlocks( paragraphBlock );
+		await editor.showBlockToolbar();
+		await expect( resetButton ).toBeEnabled();
+		await resetButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph' );
+
+		// Undo/Redo should work
+		await undoButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph*' );
+		await redoButton.click();
+		await expect( paragraphBlock ).toHaveText( 'Paragraph' );
+	} );
+
+	// Fix https://github.com/WordPress/gutenberg/issues/58708.
+	test( 'overridden empty images should not have upload button', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const imageName = 'Editable image';
+		const TEST_IMAGE_FILE_PATH = path.resolve(
+			__dirname,
+			'../../../assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await editor.selectBlocks( imageBlock );
+		await imageBlock
+			.getByTestId( 'form-file-upload-input' )
+			.setInputFiles( TEST_IMAGE_FILE_PATH );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+
+		await editor.publishPost();
+		await page.reload();
+
+		await editor.selectBlocks( imageBlock );
+		await editor.showBlockToolbar();
+		const blockToolbar = page.getByRole( 'toolbar', {
+			name: 'Block tools',
+		} );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+		await expect(
+			blockToolbar.getByRole( 'button', { name: 'Replace' } )
+		).toBeEnabled();
+		await expect(
+			blockToolbar.getByRole( 'button', {
+				name: 'Upload to Media Library',
+			} )
+		).toBeHidden();
+	} );
+
+	test( 'overridden images should not have unsupported attributes set', async ( {
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const imageName = 'Editable image';
+		const TEST_IMAGE_FILE_PATH = path.resolve(
+			__dirname,
+			'../../../assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"__default":{"source":"core/pattern-overrides"}}}} -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await editor.selectBlocks( imageBlock );
+		await imageBlock
+			.getByTestId( 'form-file-upload-input' )
+			.setInputFiles( TEST_IMAGE_FILE_PATH );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+
+		// Because the image is an inner block of a controlled pattern block,
+		// `getBlocks` has to be called using the pattern block's client id.
+		const patternBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		const patternClientId = await patternBlock.getAttribute( 'data-block' );
+		const patternInnerBlocks = await editor.getBlocks( {
+			clientId: patternClientId,
+		} );
+
+		// Link is an unsupported attribute, so should be undefined, even though
+		// the image block tries to set its attribute.
+		expect( patternInnerBlocks[ 0 ].attributes.link ).toBe( undefined );
+	} );
+
+	test( 'image block classname and data-id attributes contain the correct media ids when used in a gallery', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+	} ) => {
+		// Upload two images, one for the original pattern, one for the override.
+		const { id: originalImageId, source_url: originalImageSrc } =
+			await requestUtils.uploadMedia(
+				path.resolve(
+					process.cwd(),
+					'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png'
+				)
+			);
+		const { id: overrideImageId, source_url: overrideImageSrc } =
+			await requestUtils.uploadMedia(
+				path.resolve(
+					process.cwd(),
+					'test/e2e/assets/1024x768_e2e_test_image_size.jpeg'
+				)
+			);
+		const overrideName = 'test';
+
+		// Might be overkill, but check that the ids are actually different.
+		expect( overrideImageId ).not.toBe( originalImageId );
+
+		// Create a pattern with a gallery that has a single image with pattern overrides enabled.
+		// It has media that is not yet uploaded.
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":${ originalImageId },"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"${ overrideName }"}} -->
+<figure class="wp-block-image size-large"><img src="${ originalImageSrc }" alt="" class="wp-image-${ originalImageId }"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->`,
+			status: 'publish',
+		} );
+
+		// Insert the pattern into a new post, overriding the image via the pattern block attributes.
+		await admin.createNewPost();
+		const imageAlt = 'Overridden Image';
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: {
+				ref: id,
+				content: {
+					[ overrideName ]: {
+						id: overrideImageId,
+						url: overrideImageSrc,
+						alt: imageAlt,
+					},
+				},
+			},
+		} );
+
+		// Check the image attributes on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+		const imageBlock = page.getByAltText( imageAlt );
+		await expect( imageBlock ).toHaveAttribute(
+			'data-id',
+			`${ overrideImageId }`
+		);
+		await expect( imageBlock ).toHaveAttribute(
+			'class',
+			`wp-image-${ overrideImageId }`
+		);
+	} );
+
+	test( 'image block classname contains the correct media id and has no data-id attribute when used as a standalone image', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+	} ) => {
+		// Upload two images, one for the original pattern, one for the override.
+		const { id: originalImageId, source_url: originalImageSrc } =
+			await requestUtils.uploadMedia(
+				path.resolve(
+					process.cwd(),
+					'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png'
+				)
+			);
+		const { id: overrideImageId, source_url: overrideImageSrc } =
+			await requestUtils.uploadMedia(
+				path.resolve(
+					process.cwd(),
+					'test/e2e/assets/1024x768_e2e_test_image_size.jpeg'
+				)
+			);
+		const overrideName = 'test';
+
+		// Might be overkill, but check that the ids are actually different.
+		expect( overrideImageId ).not.toBe( originalImageId );
+
+		// Create a pattern with a gallery that has a single image with pattern overrides enabled.
+		// It has media that is not yet uploaded.
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"id":${ originalImageId },"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"${ overrideName }"}} -->
+<figure class="wp-block-image size-large"><img src="${ originalImageSrc }" alt="" class="wp-image-${ originalImageId }"/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		// Insert the pattern into a new post, overriding the image via the pattern block attributes.
+		await admin.createNewPost();
+		const imageAlt = 'Overridden Image';
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: {
+				ref: id,
+				content: {
+					[ overrideName ]: {
+						id: overrideImageId,
+						url: overrideImageSrc,
+						alt: imageAlt,
+					},
+				},
+			},
+		} );
+
+		// Check the image attributes on the frontend.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+		const imageBlock = page.getByAltText( imageAlt );
+		await expect( imageBlock ).not.toHaveAttribute( 'data-id' );
+		await expect( imageBlock ).toHaveAttribute(
+			'class',
+			`wp-image-${ overrideImageId }`
+		);
+	} );
+
+	test( 'blocks with the same name should be synced', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		let patternId;
+		const sharedName = 'Shared Name';
+
+		await test.step( 'create a pattern with synced blocks with the same name', async () => {
+			const { id } = await requestUtils.createBlock( {
+				title: 'Blocks with the same name',
+				content: `<!-- wp:heading {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<h2>default name</h2>
+			<!-- /wp:heading -->
+			<!-- wp:paragraph {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<p>default content</p>
+			<!-- /wp:paragraph -->
+			<!-- wp:paragraph {"metadata":{"name":"${ sharedName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			<p>default content</p>
+			<!-- /wp:paragraph -->`,
+				status: 'publish',
+			} );
+			await admin.visitSiteEditor( {
+				postId: id,
+				postType: 'wp_block',
+				canvas: 'edit',
+			} );
+
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			const firstParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			const secondParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last();
+
+			// Update the content of one of the blocks.
+			await headingBlock.fill( 'updated content' );
+
+			// Check that every content has been updated.
+			for ( const block of [
+				headingBlock,
+				firstParagraph,
+				secondParagraph,
+			] ) {
+				await expect( block ).toHaveText( 'updated content' );
+			}
+
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+				.click();
+
+			await expect(
+				page.getByRole( 'button', { name: 'Dismiss this notice' } )
+			).toBeVisible();
+
+			patternId = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getCurrentPostId();
+			} );
+		} );
+
+		await test.step( 'create a post and insert the pattern with synced values', async () => {
+			await admin.createNewPost();
+
+			await editor.insertBlock( {
+				name: 'core/block',
+				attributes: { ref: patternId },
+			} );
+
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			const firstParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.first();
+			const secondParagraph = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} )
+				.last();
+
+			await firstParagraph.fill( 'overriden content' );
+			await expect( headingBlock ).toHaveText( 'overriden content' );
+			await expect( firstParagraph ).toHaveText( 'overriden content' );
+			await expect( secondParagraph ).toHaveText( 'overriden content' );
+		} );
+	} );
+
+	// https://github.com/WordPress/gutenberg/issues/61610.
+	test( 'unsynced patterns should not be able to enable overrides', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const pattern = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph -->
+<p>paragraph</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+			meta: {
+				wp_pattern_sync_status: 'unsynced',
+			},
+		} );
+
+		await admin.visitSiteEditor( {
+			postId: pattern.id,
+			postType: 'wp_block',
+			canvas: 'edit',
+		} );
+
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await editor.selectBlocks( paragraph );
+		await editor.openDocumentSettingsSidebar();
+
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await editorSettings
+			.getByRole( 'button', { name: 'Advanced' } )
+			.click();
+		await expect(
+			editorSettings.getByRole( 'button', { name: 'Enable overrides' } )
+		).toBeHidden();
+	} );
+
+	// @see https://github.com/WordPress/gutenberg/pull/60694
+	test( 'handles back-compat from individual attributes to __default', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const imageName = 'Editable image';
+		const TEST_IMAGE_FILE_PATH = path.resolve(
+			__dirname,
+			'../../../assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:image {"metadata":{"name":"${ imageName }","bindings":{"id":{"source":"core/pattern-overrides"},"url":{"source":"core/pattern-overrides"},"title":{"source":"core/pattern-overrides"},"alt":{"source":"core/pattern-overrides"}}}} -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const blocks = await editor.getBlocks( { full: true } );
+		expect( blocks ).toMatchObject( [
+			{
+				name: 'core/block',
+				attributes: { ref: id },
+			},
+		] );
+		expect(
+			await editor.getBlocks( { clientId: blocks[ 0 ].clientId } )
+		).toMatchObject( [
+			{
+				name: 'core/image',
+				attributes: {
+					metadata: {
+						name: imageName,
+						bindings: {
+							__default: {
+								source: 'core/pattern-overrides',
+							},
+						},
+					},
+				},
+			},
+		] );
+
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await editor.selectBlocks( imageBlock );
+		await imageBlock
+			.getByTestId( 'form-file-upload-input' )
+			.setInputFiles( TEST_IMAGE_FILE_PATH );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveCount( 1 );
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			/\/wp-content\/uploads\//
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'More' );
+		await page
+			.getByRole( 'menuitem', { name: 'Alternative text' } )
+			.click();
+		await page
+			.getByRole( 'textbox', { name: 'alternative text' } )
+			.fill( 'Test Image' );
+
+		const postId = await editor.publishPost();
+
+		await page.goto( `/?p=${ postId }` );
+		await expect(
+			page.getByRole( 'img', { name: 'Test Image' } )
+		).toHaveAttribute( 'src', /\/wp-content\/uploads\// );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js
new file mode 100644
index 00000000000000..00a68a9f08ea55
--- /dev/null
+++ b/test/e2e/specs/editor/various/patterns.spec.js
@@ -0,0 +1,629 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Unsynced pattern', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test( 'create a new unsynced pattern via the block options menu', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'A useful paragraph to reuse' },
+		} );
+		const before = await editor.getBlocks();
+
+		// Create an unsynced pattern from the paragraph block.
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
+
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'My unsynced pattern' );
+		const newCategory = 'Contact details';
+		await createPatternDialog
+			.getByRole( 'combobox', { name: 'Categories' } )
+			.fill( newCategory );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( false );
+
+		await page.keyboard.press( 'Enter' );
+
+		// Check that the block content is still the same. If the pattern was added as synced
+		// the content would be wrapped by a pattern block.
+		await expect
+			.poll(
+				editor.getBlocks,
+				'The block content should be the same after converting to an unsynced pattern'
+			)
+			.toEqual( before );
+
+		// Check that the new pattern is available in the inserter and that it gets inserted as
+		// a plain paragraph block.
+		await page.getByLabel( 'Block Inserter' ).click();
+		await page
+			.getByRole( 'tab', {
+				name: 'Patterns',
+			} )
+			.click();
+		await page
+			.getByRole( 'tab', {
+				name: newCategory,
+			} )
+			.click();
+		const pattern = page.getByLabel( 'My unsynced pattern' ).first();
+
+		const insertedPatternId = await pattern.evaluate(
+			( element ) => element.id
+		);
+
+		await pattern.click();
+
+		await expect.poll( editor.getBlocks ).toEqual( [
+			...before,
+			{
+				...before[ 0 ],
+				attributes: {
+					...before[ 0 ].attributes,
+					metadata: {
+						categories: [ 'contact-details' ],
+						name: 'My unsynced pattern',
+						patternName: insertedPatternId,
+					},
+				},
+			},
+		] );
+	} );
+} );
+
+test.describe( 'Synced pattern', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+		await requestUtils.deleteAllBlocks();
+		await requestUtils.deleteAllPatternCategories();
+	} );
+
+	test( 'create a new synced pattern via the block options menu', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				anchor: 'reused-paragraph',
+				content: 'A useful paragraph to reuse',
+			},
+		} );
+
+		// Create a synced pattern from the paragraph block.
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click();
+
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'My synced pattern' );
+		const newCategory = 'Contact details';
+		await createPatternDialog
+			.getByRole( 'combobox', { name: 'Categories' } )
+			.fill( newCategory );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( true );
+
+		await createPatternDialog
+			.getByRole( 'button', { name: 'Add' } )
+			.click();
+
+		// Check the pattern is focused.
+		const patternBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Pattern',
+		} );
+		await expect( patternBlock ).toBeFocused();
+
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+
+		// Check that the new pattern is available in the inserter.
+		await page.getByLabel( 'Block Inserter' ).click();
+		await page
+			.getByRole( 'tab', {
+				name: 'Patterns',
+			} )
+			.click();
+		await page
+			.getByRole( 'tab', {
+				name: newCategory,
+			} )
+			.click();
+		await page.getByRole( 'option', { name: 'My synced pattern' } ).click();
+
+		const [ firstSyncedPattern, secondSyncedPattern ] =
+			await editor.getBlocks();
+		// Check they are both patterns.
+		expect( firstSyncedPattern.name ).toBe( 'core/block' );
+		expect( secondSyncedPattern.name ).toBe( 'core/block' );
+		// Check they have the same ref.
+		expect( firstSyncedPattern.attributes.ref ).toEqual(
+			secondSyncedPattern.attributes.ref
+		);
+
+		// Check that the frontend shows the content of the pattern.
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+		const [ firstParagraph, secondParagraph ] = await page
+			.locator( '#reused-paragraph' )
+			.all();
+
+		await expect( firstParagraph ).toHaveText(
+			'A useful paragraph to reuse'
+		);
+		await expect( secondParagraph ).toHaveText(
+			'A useful paragraph to reuse'
+		);
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/33072.
+	test( 'can be saved when modified inside of a published post', async ( {
+		page,
+		requestUtils,
+		editor,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Alternative greeting block',
+			content:
+				'<!-- wp:paragraph -->\n<p id="reused-paragraph">Guten Tag!</p>\n<!-- /wp:paragraph -->',
+			status: 'publish',
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		const postId = await editor.publishPost();
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', {
+				name: 'Edit original',
+			} )
+			.click();
+
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		// Navigate to the pattern focus mode.
+		await expect(
+			editorTopBar.getByRole( 'heading', {
+				name: 'Alternative greeting block',
+				level: 1,
+			} )
+		).toBeVisible();
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
+		);
+
+		// Change the block's content.
+		await page.keyboard.type( 'Einen ' );
+
+		// Save the reusable block and update the post.
+		await editorTopBar.getByRole( 'button', { name: 'Save' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Pattern updated.' } )
+			.click();
+
+		// Check that the frontend shows the updated content.
+		await page.goto( `/?p=${ postId }` );
+		await expect( page.locator( '#reused-paragraph' ) ).toHaveText(
+			'Einen Guten Tag!'
+		);
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
+	test( 'allows conversion back to blocks when the reusable block has unsaved edits', async ( {
+		page,
+		requestUtils,
+		editor,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Synced pattern',
+			content:
+				'<!-- wp:paragraph -->\n<p>Before Edit</p>\n<!-- /wp:paragraph -->',
+			status: 'publish',
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', {
+				name: 'Edit original',
+			} )
+			.click();
+
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		// Navigate to the pattern focus mode.
+		await expect(
+			editorTopBar.getByRole( 'heading', {
+				name: 'Synced pattern',
+				level: 1,
+			} )
+		).toBeVisible();
+
+		// Make an edit to the source pattern.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.fill( 'After Edit' );
+
+		// Go back to the post.
+		await editorTopBar.getByRole( 'button', { name: 'Back' } ).click();
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'After Edit' },
+			},
+		] );
+	} );
+
+	test( 'can be created, inserted, and converted to a regular block', async ( {
+		editor,
+		requestUtils,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Greeting block',
+			content:
+				'<!-- wp:paragraph -->\n<p>Hello there!</p>\n<!-- /wp:paragraph -->',
+			status: 'publish',
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello there!' },
+			},
+		] );
+	} );
+
+	test( 'can be inserted after refresh', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Awesome Paragraph' },
+		} );
+		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
+
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'Awesome block' );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( true );
+		await createPatternDialog
+			.getByRole( 'button', { name: 'Add' } )
+			.click();
+
+		// Wait until the pattern is created.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} )
+		).toBeVisible();
+
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( '/Awesome block' );
+		await page.getByRole( 'option', { name: 'Awesome block' } ).click();
+
+		// Check that the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+	} );
+
+	test( 'can be created from multiselection and converted back to regular blocks', async ( {
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Hello there!' },
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Second paragraph' },
+		} );
+
+		await pageUtils.pressKeys( 'primary+a', { times: 2 } );
+		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
+
+		const createPatternDialog = editor.page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'Multi-selection reusable block' );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( true );
+		await createPatternDialog
+			.getByRole( 'button', { name: 'Add' } )
+			.click();
+
+		// Wait until the pattern is created.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Pattern',
+			} )
+		).toBeVisible();
+
+		// Check that only the pattern block is present.
+		const existingBlocks = await editor.getBlocks();
+		expect(
+			existingBlocks.every( ( block ) => block.name === 'core/block' )
+		).toBe( true );
+
+		// Convert the pattern back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Hello there!' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second paragraph' },
+			},
+		] );
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/pull/26484.
+	test( 'will not break the editor if empty', async ( {
+		editor,
+		page,
+		requestUtils,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Awesome empty',
+			content: '',
+			status: 'publish',
+		} );
+
+		let hasError = false;
+		page.on( 'console', ( msg ) => {
+			if ( msg.type() === 'error' ) {
+				hasError = true;
+			}
+		} );
+
+		// Need to reload the page to make pattern available in the store.
+		await page.reload();
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		await page
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		await page
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( 'Awesome empty' );
+
+		await expect(
+			page
+				.getByRole( 'listbox', { name: 'Block patterns' } )
+				.getByRole( 'option', {
+					name: 'Awesome empty',
+				} )
+		).toBeVisible();
+		expect( hasError ).toBe( false );
+	} );
+
+	test( 'should show a proper message when the reusable block is missing', async ( {
+		editor,
+	} ) => {
+		// Insert a non-existant reusable block.
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: 123456 },
+		} );
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		).toContainText( 'Block has been deleted or is unavailable.' );
+	} );
+
+	test( 'should be able to insert a reusable block twice', async ( {
+		editor,
+		page,
+		pageUtils,
+		requestUtils,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Duplicated reusable block',
+			content:
+				'<!-- wp:paragraph -->\n<p>Awesome Paragraph</p>\n<!-- /wp:paragraph -->',
+			status: 'publish',
+		} );
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		await editor.saveDraft();
+		await editor.selectBlocks(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Pattern' } )
+				.first()
+		);
+		await editor.showBlockToolbar();
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'button', { name: 'Edit original' } )
+			.click();
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.click();
+		await pageUtils.pressKeys( 'primary+a' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.type( ' modified' );
+
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		await editorTopBar.getByRole( 'button', { name: 'Save' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.filter( { hasText: 'Pattern updated.' } )
+			.click();
+		await editorTopBar.getByRole( 'button', { name: 'Back' } ).click();
+
+		await expect(
+			editor.canvas
+				.getByRole( 'document', { name: 'Block: Paragraph' } )
+				.filter( { hasText: 'Awesome Paragraph modified' } )
+		).toHaveCount( 2 );
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/27243.
+	test( 'should allow a block with styles to be converted to a reusable block', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/quote' } );
+		await editor.saveDraft();
+		await page.reload();
+
+		await editor.openDocumentSettingsSidebar();
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Quote' } )
+		);
+
+		// The quote block should have a visible preview in the sidebar for this test to be valid.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByRole( 'button', { name: 'Styles', exact: true } )
+		).toBeVisible();
+
+		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
+
+		const createPatternDialog = editor.page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'Block with styles' );
+		await createPatternDialog
+			.getByRole( 'checkbox', { name: 'Synced' } )
+			.setChecked( true );
+		await createPatternDialog
+			.getByRole( 'button', { name: 'Add' } )
+			.click();
+
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/popovers.spec.js b/test/e2e/specs/editor/various/popovers.spec.js
index 3191db464e223a..149e188db46f28 100644
--- a/test/e2e/specs/editor/various/popovers.spec.js
+++ b/test/e2e/specs/editor/various/popovers.spec.js
@@ -14,14 +14,14 @@ test.describe( 'popovers', () => {
 			const moreMenuToggleButton = page.locator(
 				'role=button[name="Options"i]'
 			);
-			await expect( moreMenu ).not.toBeVisible();
+			await expect( moreMenu ).toBeHidden();
 			// Toggle opened.
 			await moreMenuToggleButton.click();
 			await expect( moreMenu ).toBeVisible();
 
 			// Toggle closed.
 			await moreMenuToggleButton.click();
-			await expect( moreMenu ).not.toBeVisible();
+			await expect( moreMenu ).toBeHidden();
 		} );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
index f9a7aa8970d3e6..981f8ccbbd5d38 100644
--- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
+++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
@@ -57,8 +57,15 @@ test.describe( 'Post Editor Template mode', () => {
 		);
 
 		// Save changes.
-		await page.click( 'role=button[name="Publish"i]' );
-		await page.click( 'role=button[name="Save"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Editor publish' } )
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
 
 		// Preview changes.
 		const previewPage = await editor.openPreviewPage();
@@ -70,6 +77,42 @@ test.describe( 'Post Editor Template mode', () => {
 		).toBeVisible();
 	} );
 
+	test( 'Swap templates and proper template resolution when switching to default template', async ( {
+		editor,
+		page,
+		requestUtils,
+		postEditorTemplateMode,
+	} ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await postEditorTemplateMode.createPostAndSaveDraft();
+		await page.reload();
+		await postEditorTemplateMode.disableTemplateWelcomeGuide();
+		await postEditorTemplateMode.openTemplatePopover();
+		// Swap to a custom template, save and reload.
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Swap template',
+			} )
+			.click();
+		await page
+			.getByRole( 'option', {
+				name: 'Custom',
+			} )
+			.click();
+		await editor.saveDraft();
+		await page.reload();
+		// Swap to the default template.
+		await postEditorTemplateMode.openTemplatePopover();
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Use default template',
+			} )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Template options' } )
+		).toHaveText( 'Single Entries' );
+	} );
+
 	test( 'Allow creating custom block templates in classic themes', async ( {
 		editor,
 		page,
@@ -101,162 +144,6 @@ test.describe( 'Post Editor Template mode', () => {
 			)
 		).toBeVisible();
 	} );
-
-	test.describe( 'Delete Post Template Confirmation Dialog', () => {
-		test.beforeAll( async ( { requestUtils } ) => {
-			await requestUtils.activateTheme( 'twentytwentyone' );
-		} );
-
-		test.beforeEach( async ( { postEditorTemplateMode } ) => {
-			await postEditorTemplateMode.createPostAndSaveDraft();
-		} );
-
-		[ 'large', 'small' ].forEach( ( viewport ) => {
-			test( `should retain template if deletion is canceled when the viewport is ${ viewport }`, async ( {
-				editor,
-				page,
-				pageUtils,
-				postEditorTemplateMode,
-			} ) => {
-				await pageUtils.setBrowserViewport( viewport );
-
-				await postEditorTemplateMode.disableTemplateWelcomeGuide();
-
-				const templateTitle = `${ viewport } Viewport Deletion Test`;
-
-				await postEditorTemplateMode.createNewTemplate( templateTitle );
-
-				// Close the settings in small viewport.
-				if ( viewport === 'small' ) {
-					await page.click( 'role=button[name="Close settings"i]' );
-				}
-
-				// Edit the template.
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type(
-					'Just a random paragraph added to the template'
-				);
-
-				await postEditorTemplateMode.saveTemplateWithoutPublishing();
-
-				// Test deletion dialog.
-				{
-					const templateDropdown =
-						postEditorTemplateMode.editorTopBar.locator(
-							'role=button[name="Template Options"i]'
-						);
-					await templateDropdown.click();
-					await page.click(
-						'role=menuitem[name="Delete template"i]'
-					);
-
-					const confirmDeletionDialog = page.locator( 'role=dialog' );
-					await expect( confirmDeletionDialog ).toBeFocused();
-					await expect(
-						confirmDeletionDialog.locator(
-							`text=Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts.`
-						)
-					).toBeVisible();
-
-					await confirmDeletionDialog
-						.locator( 'role=button[name="Cancel"i]' )
-						.click();
-				}
-
-				// Exit template mode.
-				await page.click( 'role=button[name="Back"i]' );
-
-				await editor.openDocumentSettingsSidebar();
-
-				// Move focus to the "Post" panel in the editor sidebar.
-				const postPanel =
-					postEditorTemplateMode.editorSettingsSidebar.locator(
-						'role=button[name="Post"i]'
-					);
-				await postPanel.click();
-
-				await postEditorTemplateMode.openTemplatePopover();
-
-				const templateSelect = page.locator(
-					'role=combobox[name="Template"i]'
-				);
-				await expect( templateSelect ).toHaveValue(
-					`${ viewport }-viewport-deletion-test`
-				);
-			} );
-
-			test( `should delete template if deletion is confirmed when the viewport is ${ viewport }`, async ( {
-				editor,
-				page,
-				pageUtils,
-				postEditorTemplateMode,
-			} ) => {
-				const templateTitle = `${ viewport } Viewport Deletion Test`;
-
-				await pageUtils.setBrowserViewport( viewport );
-
-				await postEditorTemplateMode.createNewTemplate( templateTitle );
-
-				// Close the settings in small viewport.
-				if ( viewport === 'small' ) {
-					await page.click( 'role=button[name="Close settings"i]' );
-				}
-
-				// Edit the template.
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type(
-					'Just a random paragraph added to the template'
-				);
-
-				await postEditorTemplateMode.saveTemplateWithoutPublishing();
-
-				{
-					const templateDropdown =
-						postEditorTemplateMode.editorTopBar.locator(
-							'role=button[name="Template Options"i]'
-						);
-					await templateDropdown.click();
-					await page.click(
-						'role=menuitem[name="Delete template"i]'
-					);
-
-					const confirmDeletionDialog = page.locator( 'role=dialog' );
-					await expect( confirmDeletionDialog ).toBeFocused();
-					await expect(
-						confirmDeletionDialog.locator(
-							`text=Are you sure you want to delete the ${ templateTitle } template? It may be used by other pages or posts.`
-						)
-					).toBeVisible();
-
-					await confirmDeletionDialog
-						.locator( 'role=button[name="OK"i]' )
-						.click();
-				}
-
-				// Saving isn't technically necessary, but for themes without any specified templates,
-				// the removal of the Templates dropdown is delayed. A save and reload allows for this
-				// delay and prevents flakiness
-				{
-					await page.click( 'role=button[name="Save draft"i]' );
-					await page.waitForSelector(
-						'role=button[name="Dismiss this notice"] >> text=Draft saved'
-					);
-					await page.reload();
-				}
-
-				const templateOptions =
-					postEditorTemplateMode.editorSettingsSidebar.locator(
-						'role=combobox[name="Template:"i] >> role=menuitem'
-					);
-				const availableTemplates =
-					await templateOptions.allTextContents();
-
-				expect( availableTemplates ).not.toContain(
-					`${ viewport } Viewport Deletion Test`
-				);
-			} );
-		} );
-	} );
 } );
 
 class PostEditorTemplateMode {
@@ -277,10 +164,8 @@ class PostEditorTemplateMode {
 
 	async disableTemplateWelcomeGuide() {
 		// Turn off the welcome guide.
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-post', 'welcomeGuideTemplate', false );
+		await this.editor.setPreferences( 'core/edit-post', {
+			welcomeGuideTemplate: false,
 		} );
 	}
 
@@ -289,7 +174,9 @@ class PostEditorTemplateMode {
 
 		// Only match the beginning of Select template: because it contains the template name or slug afterwards.
 		await this.editorSettingsSidebar
-			.locator( 'role=button[name^="Select template"i]' )
+			.getByRole( 'button', {
+				name: 'Template options',
+			} )
 			.click();
 	}
 
@@ -297,15 +184,22 @@ class PostEditorTemplateMode {
 		await this.disableTemplateWelcomeGuide();
 
 		await this.openTemplatePopover();
-
-		await this.page.locator( 'role=button[name="Edit template"i]' ).click();
+		await this.page
+			.getByRole( 'menuitem', {
+				name: 'Edit template',
+			} )
+			.click();
 
 		// Check that we switched properly to edit mode.
 		await this.page.waitForSelector(
 			'role=button[name="Dismiss this notice"] >> text=Editing template. Changes made here affect all posts and pages that use the template.'
 		);
 
-		await expect( this.editorTopBar ).toHaveText( /Just an FSE Post/ );
+		const title = this.editorTopBar.getByRole( 'heading', {
+			name: 'Single Entries',
+		} );
+
+		await expect( title ).toBeVisible();
 	}
 
 	async createPostAndSaveDraft() {
@@ -323,10 +217,7 @@ class PostEditorTemplateMode {
 		// Save the post
 		// Saving shouldn't be necessary but unfortunately,
 		// there's a template resolution bug forcing us to do so.
-		await this.page.click( 'role=button[name="Save draft"i]' );
-		await this.page.waitForSelector(
-			'role=button[name="Dismiss this notice"] >> text=Draft saved'
-		);
+		await this.editor.saveDraft();
 	}
 
 	async createNewTemplate( templateName ) {
@@ -360,22 +251,25 @@ class PostEditorTemplateMode {
 		// Without this, the editor will move focus to body while still typing.
 		// And the save states will not be counted as dirty.
 		// There is likely a bug in the code, waiting for the snackbar above should be enough.
+		// eslint-disable-next-line playwright/no-networkidle
 		await this.page.waitForLoadState( 'networkidle' );
 	}
 
 	async saveTemplateWithoutPublishing() {
-		await this.page.click( 'role=button[name="Publish"i]' );
-		const editorPublishRegion = this.page.locator(
-			'role=region[name="Editor publish"i]'
-		);
-		const saveButton = editorPublishRegion.locator(
-			'role=button[name="Save"i]'
-		);
-		await saveButton.click();
+		await this.page.click( 'role=button[name="Back"i]' );
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
+		const editorPublishRegion = this.page.getByRole( 'region', {
+			name: 'Editor publish',
+		} );
+		await editorPublishRegion
+			.getByRole( 'button', { name: 'Save', exact: true } )
+			.click();
 		// Avoid publishing the post.
-		const cancelButton = editorPublishRegion.locator(
-			'role=button[name="Cancel"i]'
-		);
-		await cancelButton.click();
+		await editorPublishRegion
+			.getByRole( 'button', { name: 'Cancel' } )
+			.click();
 	}
 }
diff --git a/test/e2e/specs/editor/various/post-title.spec.js b/test/e2e/specs/editor/various/post-title.spec.js
new file mode 100644
index 00000000000000..1abf94f821574b
--- /dev/null
+++ b/test/e2e/specs/editor/various/post-title.spec.js
@@ -0,0 +1,367 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post title', () => {
+	test.describe( 'Focus handling', () => {
+		test( 'should focus on the post title field when creating a new post in visual mode', async ( {
+			editor,
+			page,
+			admin,
+		} ) => {
+			await admin.createNewPost();
+
+			const pageTitleField = editor.canvas.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toBeFocused();
+			await page.keyboard.press( 'Enter' );
+			await expect(
+				editor.canvas.getByRole( 'document', {
+					name: 'Empty block',
+				} ),
+				'sould move focus to an empty paragraph block when the Enter key is pressed'
+			).toBeFocused();
+		} );
+
+		test( 'should focus on the post title field when creating a new post in code editor mode', async ( {
+			page,
+
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			// switch Editor to code editor mode
+			// Open code editor
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			// Check we're in Code view mode.
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Editing code',
+				} )
+			).toBeVisible();
+
+			const pageTitleField = page.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toBeFocused();
+		} );
+	} );
+	test.describe( 'HTML handling', () => {
+		test( `should (visually) render any HTML in Post Editor's post title field when in Visual editing mode`, async ( {
+			page,
+			editor,
+			admin,
+			requestUtils,
+		} ) => {
+			const { id: postId } = await requestUtils.createPost( {
+				title: 'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>',
+				content: 'Hello world',
+				status: 'publish',
+			} );
+
+			await admin.visitAdminPage(
+				'post.php',
+				`post=${ postId }&action=edit`
+			);
+
+			await page.evaluate( () => {
+				window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( 'core/edit-post', 'welcomeGuide', false );
+
+				window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( 'core/edit-post', 'fullscreenMode', false );
+			}, false );
+
+			const pageTitleField = editor.canvas.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toHaveText(
+				'I am emphasis I am bold I am anchor'
+			);
+
+			// Check the HTML elements have been **rendered** rather than
+			// output in raw form.
+			await expect( pageTitleField.locator( 'css=em' ) ).toHaveText(
+				'emphasis'
+			);
+
+			await expect( pageTitleField.locator( 'css=strong' ) ).toHaveText(
+				'bold'
+			);
+
+			await expect( pageTitleField.locator( 'css=a' ) ).toHaveText(
+				'anchor'
+			);
+		} );
+
+		test( `should show raw HTML in the post title field when in Code view mode `, async ( {
+			page,
+			admin,
+			requestUtils,
+			pageUtils,
+		} ) => {
+			const { id: postId } = await requestUtils.createPost( {
+				title: 'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>',
+				content: 'Hello world',
+				status: 'publish',
+			} );
+
+			await admin.visitAdminPage(
+				'post.php',
+				`post=${ postId }&action=edit`
+			);
+
+			await page.evaluate( () => {
+				window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( 'core/edit-post', 'welcomeGuide', false );
+
+				window.wp.data
+					.dispatch( 'core/preferences' )
+					.set( 'core/edit-post', 'fullscreenMode', false );
+			}, false );
+
+			// switch Editor to code editor mode
+			// Open code editor
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			// Check we're in Code view mode.
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Editing code',
+				} )
+			).toBeVisible();
+
+			const codeViewPageTitleField = page.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			// Check that the pageTitleField has the raw HTML
+			await expect( codeViewPageTitleField ).toHaveText(
+				'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>'
+			);
+		} );
+
+		test( 'should strip HTML tags when pasting string of HTML into the post title field in Visual mode', async ( {
+			editor,
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			const pageTitleField = editor.canvas.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toBeFocused();
+
+			pageUtils.setClipboardData( {
+				html: 'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>',
+			} );
+			await pageUtils.pressKeys( 'primary+v' );
+
+			await expect( pageTitleField ).toHaveText(
+				'I am emphasis I am bold I am anchor'
+			);
+
+			// Check the HTML elements have been stripped and are not rendered.
+			await expect( pageTitleField.locator( 'css=em' ) ).toBeHidden();
+
+			await expect( pageTitleField.locator( 'css=strong' ) ).toBeHidden();
+
+			await expect( pageTitleField.locator( 'css=a' ) ).toBeHidden();
+		} );
+
+		// Reinstate once the PR to fix paste events is merged:
+		// https://github.com/WordPress/gutenberg/pull/55030.
+		// eslint-disable-next-line playwright/no-skipped-test
+		test.skip( 'should retain HTML tags when pasting string of HTML into the post title field in Code view mode', async ( {
+			page,
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			// switch Editor to code editor mode
+			// Open code editor
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			// Check we're in Code view mode.
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Editing code',
+				} )
+			).toBeVisible();
+
+			const pageTitleField = page.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			pageUtils.setClipboardData( {
+				plainText:
+					'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>',
+				html: 'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>',
+			} );
+
+			// focus on the title field
+			await pageTitleField.focus();
+
+			await pageUtils.pressKeys( 'primary+v' );
+
+			await expect( pageTitleField ).toHaveText(
+				'I am <em>emphasis</em> I am <strong>bold</strong> I am <a href="#">anchor</a>'
+			);
+		} );
+
+		test( 'should strip HTML tags from Post Title when pasted text is transformed to blocks', async ( {
+			editor,
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			const pageTitleField = editor.canvas.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toBeFocused();
+
+			// This HTML will ultimately be parsed into two blocks
+			// The first will have it's `content` attribute stripped of HTML
+			// and used as the Page Title.
+			// The second will be inserted into the post contents and will
+			// retain its HTML.
+			pageUtils.setClipboardData( {
+				html: `
+					<h2>I am heading block title with <strong> HTML tag</strong></h2>
+					<p>And I am the rest of titles with <em>emphasis tag</em>!</p>
+				`,
+			} );
+			await pageUtils.pressKeys( 'primary+v' );
+
+			// Check the HTML elements have been stripped from the first block's
+			// `content` attribute...
+			await expect( pageTitleField ).toHaveText(
+				'I am heading block title with HTML tag'
+			);
+
+			// ...and are not rendered.
+			await expect( pageTitleField.locator( 'css=strong' ) ).toBeHidden();
+
+			// Check the 2nd block ended up in the post contents and did not
+			// have its HTML stripped out.
+			await expect.poll( editor.getBlocks ).toMatchObject( [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content:
+							'And I am the rest of titles with <em>emphasis tag</em>!',
+					},
+				},
+			] );
+		} );
+
+		test( 'should output HTML tags in plaintext when added into Post Title field in visual editor mode', async ( {
+			editor,
+			page,
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			const pageTitleField = editor.canvas.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await expect( pageTitleField ).toBeFocused();
+
+			await page.keyboard.type( 'I am <em>emphasis</em>' );
+
+			// Expect that manually inputting HTML does not result in any
+			// unexpected transformations into rendered output.
+			await expect( pageTitleField ).toHaveText(
+				'I am <em>emphasis</em>'
+			);
+
+			// Check that the `em` tag was output in plaintext and not rendered.
+			await expect( pageTitleField.locator( 'css=em' ) ).toBeHidden();
+
+			// Switch to code view
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			const codeViewPageTitleField = page.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			// Check that the `em` tag was output in plaintext (HTML entities)
+			// Note that the `>` is not required to be converted to entity form
+			// (see https://github.com/WordPress/gutenberg/pull/54718/files#r1347124685).
+			await expect( codeViewPageTitleField ).toHaveText(
+				'I am &lt;em>emphasis&lt;/em>'
+			);
+		} );
+
+		test( 'should output HTML tags in plaintext in visual editor mode when HTML is added in plaintext in code editor mode', async ( {
+			editor,
+			page,
+			admin,
+			pageUtils,
+		} ) => {
+			await admin.createNewPost();
+
+			// switch Editor to code editor mode
+			// Open code editor
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			// Check we're in Code view mode.
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Editing code',
+				} )
+			).toBeVisible();
+
+			const codeViewPageTitleField = page.getByRole( 'textbox', {
+				name: 'Add title',
+			} );
+
+			await codeViewPageTitleField.focus();
+
+			// Also verifies that the field handles typing into the field.
+			await page.keyboard.type( 'I am &lt;em&gt;emphasis&lt;/em&gt;' );
+
+			await expect( codeViewPageTitleField ).toHaveText(
+				'I am &lt;em&gt;emphasis&lt;/em&gt;'
+			);
+
+			// Switch to visual view
+			await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+			const visualViewPageTitleField = editor.canvas.getByRole(
+				'textbox',
+				{
+					name: 'Add title',
+					editable: 'richtext',
+				}
+			);
+
+			// Check that the `em` tag was output in plaintext
+			await expect( visualViewPageTitleField ).toHaveText(
+				'I am <em>emphasis</em>'
+			);
+
+			// Check that no HTML tags were rendered.
+			await expect(
+				visualViewPageTitleField.locator( 'css=em' )
+			).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/post-visibility.spec.js b/test/e2e/specs/editor/various/post-visibility.spec.js
new file mode 100644
index 00000000000000..67c8597953815b
--- /dev/null
+++ b/test/e2e/specs/editor/various/post-visibility.spec.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post visibility', () => {
+	[ 'large', 'small' ].forEach( ( viewport ) => {
+		test( `can be changed when the viewport is ${ viewport }`, async ( {
+			page,
+			admin,
+			pageUtils,
+			editor,
+		} ) => {
+			await pageUtils.setBrowserViewport( viewport );
+
+			await admin.createNewPost();
+
+			await editor.openDocumentSettingsSidebar();
+
+			await page
+				.getByRole( 'button', { name: 'Change status:' } )
+				.click();
+			await page.getByRole( 'radio', { name: 'Private' } ).click();
+
+			const currentStatus = await page.evaluate( () => {
+				return window.wp.data
+					.select( 'core/editor' )
+					.getEditedPostAttribute( 'status' );
+			} );
+
+			expect( currentStatus ).toBe( 'private' );
+		} );
+	} );
+
+	test( 'visibility remains private even if the publish date is in the future', async ( {
+		page,
+		admin,
+		editor,
+	} ) => {
+		await admin.createNewPost();
+
+		// Enter a title for this post.
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'Title' );
+
+		await editor.openDocumentSettingsSidebar();
+
+		// Set a publish date for the next month.
+		await page.click( 'role=button[name="Change date: Immediately"i]' );
+
+		await page.click( 'role=button[name="View next month"i]' );
+		await page.click( 'role=application[name="Calendar"] >> text=15' );
+		await page
+			.locator( '.block-editor-publish-date-time-picker' )
+			.getByRole( 'button', {
+				name: 'Close',
+			} )
+			.click();
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
+		await page.getByRole( 'radio', { name: 'Private' } ).click();
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', {
+				name: 'Save',
+				exact: true,
+			} )
+			.click();
+
+		const currentStatus = await page.evaluate( () => {
+			return window.wp.data
+				.select( 'core/editor' )
+				.getEditedPostAttribute( 'status' );
+		} );
+
+		expect( currentStatus ).toBe( 'private' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/pref-modal.spec.js b/test/e2e/specs/editor/various/pref-modal.spec.js
new file mode 100644
index 00000000000000..08c3cd322586a1
--- /dev/null
+++ b/test/e2e/specs/editor/various/pref-modal.spec.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preferences modal', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Preferences modal adaps to viewport', () => {
+		test( 'Enable pre-publish checks is visible on desktop ', async ( {
+			page,
+		} ) => {
+			await page.click(
+				'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+			);
+			await page.click( 'role=menuitem[name="Preferences"i]' );
+
+			const prePublishToggle = page.locator(
+				'role=checkbox[name="Enable pre-publish checks"i]'
+			);
+
+			await expect( prePublishToggle ).toBeVisible();
+		} );
+	} );
+	test.describe( 'Preferences modal adaps to viewport', () => {
+		test( 'Enable pre-publish checks is not visible on mobile ', async ( {
+			page,
+		} ) => {
+			await page.setViewportSize( { width: 500, height: 800 } );
+
+			await page.click(
+				'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+			);
+			await page.click( 'role=menuitem[name="Preferences"i]' );
+
+			const generalButton = page.locator(
+				'role=button[name="General"i]'
+			);
+
+			const generalTabPanel = page.locator(
+				'role=tabPanel[name="General"i]'
+			);
+
+			const prePublishToggle = page.locator(
+				'role=checkbox[name="Enable pre-publish checks"i]'
+			);
+
+			await expect( generalButton ).toBeVisible();
+			await expect( generalTabPanel ).toBeHidden();
+			await expect( prePublishToggle ).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/preferences.spec.js b/test/e2e/specs/editor/various/preferences.spec.js
new file mode 100644
index 00000000000000..89df0ae7ed9f77
--- /dev/null
+++ b/test/e2e/specs/editor/various/preferences.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preferences', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'remembers sidebar dismissal between sessions', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		const activeTab = editorSettings.getByRole( 'tab', { selected: true } );
+
+		// Open by default.
+		await expect( activeTab ).toHaveText( 'Post' );
+
+		// Change to "Block" tab.
+		await editorSettings.getByRole( 'tab', { name: 'Block' } ).click();
+		await expect( activeTab ).toHaveText( 'Block' );
+
+		/**
+		 * Regression test: Reload resets to document tab.
+		 *
+		 * See: https://github.com/WordPress/gutenberg/issues/6377
+		 * See: https://github.com/WordPress/gutenberg/pull/8995
+		 */
+		await page.reload();
+		await expect( activeTab ).toHaveText( 'Post' );
+
+		// Dismiss.
+		await editorSettings
+			.getByRole( 'button', {
+				name: 'Close Settings',
+			} )
+			.click();
+		await expect( activeTab ).toBeHidden();
+
+		// Remember after reload.
+		await page.reload();
+		await expect( activeTab ).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
index be2f4ddb65d27b..e15f143983b742 100644
--- a/test/e2e/specs/editor/various/preview.spec.js
+++ b/test/e2e/specs/editor/various/preview.spec.js
@@ -22,15 +22,9 @@ test.describe( 'Preview', () => {
 	} ) => {
 		const editorPage = page;
 
-		// Disabled until content present.
-		await expect(
-			editorPage.locator( 'role=button[name="Preview"i]' )
-		).toBeDisabled();
-
-		await editorPage.type(
-			'role=textbox[name="Add title"i]',
-			'Hello World'
-		);
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'Hello World' );
 
 		const previewPage = await editor.openPreviewPage( editorPage );
 		const previewTitle = previewPage.locator( 'role=heading[level=1]' );
@@ -48,7 +42,9 @@ test.describe( 'Preview', () => {
 
 		// Return to editor to change title.
 		await editorPage.bringToFront();
-		await editorPage.type( 'role=textbox[name="Add title"i]', '!' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( '!' );
 		await previewUtils.waitForPreviewNavigation( previewPage );
 
 		// Title in preview should match updated input.
@@ -70,10 +66,9 @@ test.describe( 'Preview', () => {
 
 		// Return to editor to change title.
 		await editorPage.bringToFront();
-		await editorPage.fill(
-			'role=textbox[name="Add title"i]',
-			'Hello World! And more.'
-		);
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.fill( 'Hello World! And more.' );
 		await previewUtils.waitForPreviewNavigation( previewPage );
 
 		// Title in preview should match updated input.
@@ -104,10 +99,14 @@ test.describe( 'Preview', () => {
 		page,
 		previewUtils,
 	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
 		const editorPage = page;
 
 		// Type aaaaa in the title field.
-		await editorPage.type( 'role=textbox[name="Add title"]', 'aaaaa' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"]' )
+			.type( 'aaaaa' );
 		await editorPage.keyboard.press( 'Tab' );
 
 		// Save the post as a draft.
@@ -127,10 +126,9 @@ test.describe( 'Preview', () => {
 		await editorPage.bringToFront();
 
 		// Append bbbbb to the title, and tab away from the title so blur event is triggered.
-		await editorPage.fill(
-			'role=textbox[name="Add title"i]',
-			'aaaaabbbbb'
-		);
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.fill( 'aaaaabbbbb' );
 		await editorPage.keyboard.press( 'Tab' );
 
 		// Save draft and open the preview page right after.
@@ -155,7 +153,10 @@ test.describe( 'Preview', () => {
 		const editorPage = page;
 
 		// Type Lorem in the title field.
-		await editorPage.type( 'role=textbox[name="Add title"i]', 'Lorem' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'Lorem' );
+		await editor.openDocumentSettingsSidebar();
 
 		// Open the preview page.
 		const previewPage = await editor.openPreviewPage( editorPage );
@@ -172,7 +173,9 @@ test.describe( 'Preview', () => {
 		await page.click( 'role=button[name="Close panel"i]' );
 
 		// Change the title and preview again.
-		await editorPage.type( 'role=textbox[name="Add title"i]', ' Ipsum' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( ' Ipsum' );
 		await previewUtils.waitForPreviewNavigation( previewPage );
 
 		// Title in preview should match updated input.
@@ -180,9 +183,15 @@ test.describe( 'Preview', () => {
 
 		// Return to editor and switch to Draft.
 		await editorPage.bringToFront();
-		await page.click( 'role=button[name="Switch to draft"i]' );
-		// FIXME: The confirmation dialog is not named yet.
-		await page.click( 'role=dialog >> role=button[name="OK"i]' );
+		await page.getByRole( 'button', { name: 'Change status:' } ).click();
+		await page.getByRole( 'radio', { name: 'Draft' } ).click();
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', {
+				name: 'Save',
+				exact: true,
+			} )
+			.click();
 
 		// Wait for the status change.
 		// @see https://github.com/WordPress/gutenberg/pull/43933
@@ -191,7 +200,9 @@ test.describe( 'Preview', () => {
 		).toBeVisible();
 
 		// Change the title.
-		await editorPage.type( 'role=textbox[name="Add title"i]', ' Draft' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( ' Draft' );
 
 		// Open the preview page.
 		await previewUtils.waitForPreviewNavigation( previewPage );
@@ -222,7 +233,9 @@ test.describe( 'Preview with Custom Fields enabled', () => {
 		const editorPage = page;
 
 		// Add an initial title and content.
-		await editorPage.type( 'role=textbox[name="Add title"i]', 'title 1' );
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.type( 'title 1' );
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: { content: 'content 1' },
@@ -246,11 +259,12 @@ test.describe( 'Preview with Custom Fields enabled', () => {
 
 		// Return to editor and modify the title and content.
 		await editorPage.bringToFront();
-		await editorPage.fill( 'role=textbox[name="Add title"i]', 'title 2' );
-		await editorPage.fill(
-			'role=document >> text="content 1"',
-			'content 2'
-		);
+		await editor.canvas
+			.locator( 'role=textbox[name="Add title"i]' )
+			.fill( 'title 2' );
+		await editor.canvas
+			.locator( 'role=document >> text="content 1"' )
+			.fill( 'content 2' );
 
 		// Open the preview page.
 		await previewUtils.waitForPreviewNavigation( previewPage );
@@ -279,14 +293,17 @@ test.describe( 'Preview with private custom post type', () => {
 		admin,
 		page,
 	} ) => {
-		await admin.createNewPost( { postType: 'not_public', title: 'aaaaa' } );
+		await admin.createNewPost( {
+			postType: 'not_public',
+			title: 'aaaaa',
+		} );
 
 		// Open the view menu.
-		await page.click( 'role=button[name="Preview"i]' );
+		await page.click( 'role=button[name="View"i]' );
 
 		await expect(
 			page.locator( 'role=menuitem[name="Preview in new tab"i]' )
-		).not.toBeVisible();
+		).toBeHidden();
 	} );
 } );
 
@@ -297,7 +314,7 @@ class PreviewUtils {
 
 	async waitForPreviewNavigation( previewPage ) {
 		const previewToggle = this.page.locator(
-			'role=button[name="Preview"i][expanded=false]'
+			'role=button[name="View"i][expanded=false]'
 		);
 		const isDropdownClosed = await previewToggle.isVisible();
 		if ( isDropdownClosed ) {
@@ -316,9 +333,9 @@ class PreviewUtils {
 		);
 		await this.page.click( 'role=menuitem[name="Preferences"i]' );
 
-		// Navigate to panels section.
+		// Navigate to general section.
 		await this.page.click(
-			'role=dialog[name="Preferences"i] >> role=tab[name="Panels"i]'
+			'role=dialog[name="Preferences"i] >> role=tab[name="General"i]'
 		);
 
 		// Find custom fields checkbox.
@@ -343,6 +360,8 @@ class PreviewUtils {
 			return;
 		}
 
-		await this.page.click( 'role=button[name="Close dialog"i]' );
+		await this.page.click(
+			'role=dialog[name="Preferences"i] >> role=button[name="Close"i]'
+		);
 	}
 }
diff --git a/test/e2e/specs/editor/various/publish-button.spec.js b/test/e2e/specs/editor/various/publish-button.spec.js
new file mode 100644
index 00000000000000..cdc9c1a9936361
--- /dev/null
+++ b/test/e2e/specs/editor/various/publish-button.spec.js
@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+function defer() {
+	let resolve;
+	const deferred = new Promise( ( res ) => {
+		resolve = res;
+	} );
+	deferred.resolve = resolve;
+	return deferred;
+}
+
+test.describe( 'Post publish button', () => {
+	test( 'should be disabled when post is not saveable', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Publish' } )
+		).toBeDisabled();
+	} );
+
+	test( 'should be disabled when post is being saved', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'textbox', {
+				name: 'Add title',
+			} )
+			.fill( 'Test post' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		await expect(
+			topBar.getByRole( 'button', { name: 'Publish' } )
+		).toBeEnabled();
+
+		const deferred = defer();
+
+		await page.route(
+			( url ) =>
+				url.href.includes(
+					`rest_route=${ encodeURIComponent( '/wp/v2/posts/' ) }`
+				),
+			async ( route, request ) => {
+				if ( request.method() === 'POST' ) {
+					await deferred;
+					await route.continue();
+				} else {
+					await route.continue();
+				}
+			}
+		);
+
+		await topBar.getByRole( 'button', { name: 'Save draft' } ).click();
+		await expect(
+			topBar.getByRole( 'button', { name: 'Publish' } )
+		).toBeDisabled();
+		deferred.resolve();
+	} );
+
+	test( 'should be disabled when metabox is being saved', async ( {
+		admin,
+		page,
+		requestUtils,
+		editor,
+	} ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-plugin-meta-box' );
+		await admin.createNewPost();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Test post' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		await expect(
+			topBar.getByRole( 'button', { name: 'Publish' } )
+		).toBeEnabled();
+
+		const deferred = defer();
+
+		await page.route(
+			( url ) => url.searchParams.has( 'meta-box-loader', 1 ),
+			async ( route ) => {
+				await deferred;
+				await route.continue();
+			}
+		);
+
+		await topBar.getByRole( 'button', { name: 'Save draft' } ).click();
+		await expect(
+			topBar.getByRole( 'button', { name: 'Publish' } )
+		).toBeDisabled();
+		deferred.resolve();
+
+		await requestUtils.deactivatePlugin( 'gutenberg-test-plugin-meta-box' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 1ea72d7eb11a22..1fe94ff334f3b2 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -53,8 +53,64 @@ test.describe( 'Post publish panel', () => {
 		// Test focus is moved back to the Publish panel toggle button.
 		await expect(
 			page.locator(
-				'role=region[name="Editor top bar"i] >> role=button[name="Update"i]'
+				'role=region[name="Editor top bar"i] >> role=button[name="Save"i]'
 			)
 		).toBeFocused();
 	} );
+
+	test( 'should move focus to the cancel button in the panel', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Test Post' );
+		await page
+			.getByRole( 'region', 'Editor top bar' )
+			.getByRole( 'button', { name: 'Publish', exact: true } )
+			.click();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor publish' } )
+				.locator( ':focus' )
+		).toHaveText( 'Cancel' );
+	} );
+
+	test( 'should focus on the post list after publishing', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Test Post' );
+		await editor.publishPost();
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor publish' } )
+				.locator( ':focus' )
+		).toHaveText( 'Test Post' );
+	} );
+
+	test( 'should retain focus within the panel', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Test Post' );
+		await page
+			.getByRole( 'region', 'Editor top bar' )
+			.getByRole( 'button', { name: 'Publish', exact: true } )
+			.click();
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		await expect(
+			page.getByRole( 'checkbox', {
+				name: 'Always show pre-publish checks.',
+			} )
+		).toBeFocused();
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/publishing.spec.js b/test/e2e/specs/editor/various/publishing.spec.js
new file mode 100644
index 00000000000000..fdecbad69eed0d
--- /dev/null
+++ b/test/e2e/specs/editor/various/publishing.spec.js
@@ -0,0 +1,164 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const POST_TYPES = [ 'post', 'page' ];
+
+test.describe( 'Publishing', () => {
+	POST_TYPES.forEach( ( postType ) => {
+		test.describe( `${ postType } locking prevent saving`, () => {
+			test.beforeEach( async ( { admin } ) => {
+				await admin.createNewPost( { postType } );
+			} );
+
+			test( `disables the publish button when a ${ postType } is locked`, async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.canvas
+					.getByRole( 'textbox', { name: 'Add title' } )
+					.fill( 'E2E Test Post' );
+
+				await page.evaluate( () =>
+					window.wp.data
+						.dispatch( 'core/editor' )
+						.lockPostSaving( 'futurelock' )
+				);
+
+				// Open publish panel.
+				await page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'Publish' } )
+					.click();
+
+				// Publish button should be disabled.
+				await expect(
+					page
+						.getByRole( 'region', { name: 'Editor publish' } )
+						.getByRole( 'button', { name: 'Publish', exact: true } )
+				).toBeDisabled();
+			} );
+
+			test( `disables the save shortcut when a ${ postType } is locked`, async ( {
+				editor,
+				page,
+				pageUtils,
+			} ) => {
+				await editor.canvas
+					.getByRole( 'textbox', { name: 'Add title' } )
+					.fill( 'E2E Test Post' );
+
+				await page.evaluate( () =>
+					window.wp.data
+						.dispatch( 'core/editor' )
+						.lockPostSaving( 'futurelock' )
+				);
+
+				await pageUtils.pressKeys( 'primary+s' );
+
+				await expect(
+					page
+						.getByRole( 'region', { name: 'Editor top bar' } )
+						.getByRole( 'button', { name: 'Save draft' } )
+				).toBeEnabled();
+			} );
+		} );
+	} );
+
+	POST_TYPES.forEach( ( postType ) => {
+		test.describe( `a ${ postType } with pre-publish checks disabled`, () => {
+			test.beforeEach( async ( { admin, editor } ) => {
+				await admin.createNewPost( { postType } );
+				await editor.setPreferences( 'core', {
+					isPublishSidebarEnabled: false,
+				} );
+			} );
+
+			test.afterEach( async ( { editor } ) => {
+				await editor.setPreferences( 'core', {
+					isPublishSidebarEnabled: true,
+				} );
+			} );
+
+			test( `should publish the ${ postType } without opening the post-publish sidebar`, async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.canvas
+					.getByRole( 'textbox', { name: 'Add title' } )
+					.fill( 'E2E Test Post' );
+
+				// Publish the post.
+				await page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'Publish' } )
+					.click();
+
+				const publishPanel = page.getByRole( 'region', {
+					name: 'Editor publish',
+				} );
+
+				// The pre-publishing panel should have been not shown.
+				await expect(
+					publishPanel.getByRole( 'button', {
+						name: 'Publish',
+						exact: true,
+					} )
+				).toBeHidden();
+
+				// The post-publishing panel should have been not shown.
+				await expect(
+					publishPanel.getByRole( 'button', {
+						name: 'View Post',
+					} )
+				).toBeHidden();
+
+				await expect(
+					page
+						.getByRole( 'button', { name: 'Dismiss this notice' } )
+						.filter( { hasText: 'published' } )
+				).toBeVisible();
+			} );
+		} );
+	} );
+
+	POST_TYPES.forEach( ( postType ) => {
+		test.describe( `a ${ postType } in small viewports`, () => {
+			test.beforeEach( async ( { admin, editor, pageUtils } ) => {
+				await admin.createNewPost( { postType } );
+				await editor.setPreferences( 'core', {
+					isPublishSidebarEnabled: false,
+				} );
+				await pageUtils.setBrowserViewport( 'small' );
+			} );
+
+			test.afterEach( async ( { editor, pageUtils } ) => {
+				await editor.setPreferences( 'core', {
+					isPublishSidebarEnabled: true,
+				} );
+				await pageUtils.setBrowserViewport( 'large' );
+			} );
+
+			test( 'should ignore the pre-publish checks and show the publish panel', async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.canvas
+					.getByRole( 'textbox', { name: 'Add title' } )
+					.fill( 'E2E Test Post' );
+
+				await page
+					.getByRole( 'region', { name: 'Editor top bar' } )
+					.getByRole( 'button', { name: 'Publish' } )
+					.click();
+
+				await expect(
+					page
+						.getByRole( 'region', { name: 'Editor publish' } )
+						.getByRole( 'button', { name: 'Publish', exact: true } )
+				).toBeVisible();
+			} );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/rich-text-deprecated-multiline.spec.js b/test/e2e/specs/editor/various/rich-text-deprecated-multiline.spec.js
new file mode 100644
index 00000000000000..9fa3fef903c7fc
--- /dev/null
+++ b/test/e2e/specs/editor/various/rich-text-deprecated-multiline.spec.js
@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RichText deprecated multiline', () => {
+	test.beforeEach( async ( { admin, page, editor } ) => {
+		await admin.createNewPost();
+		await page.evaluate( () => {
+			const registerBlockType = window.wp.blocks.registerBlockType;
+			const { useBlockProps, RichText } = window.wp.blockEditor;
+			const el = window.wp.element.createElement;
+			registerBlockType( 'core/rich-text-deprecated-multiline', {
+				apiVersion: 3,
+				title: 'Deprecated RichText multiline',
+				attributes: {
+					value: {
+						type: 'string',
+						source: 'html',
+						selector: 'blockquote',
+					},
+				},
+				edit: function Edit( { attributes, setAttributes } ) {
+					return el( RichText, {
+						...useBlockProps(),
+						tagName: 'blockquote',
+						multiline: 'p',
+						value: attributes.value,
+						onChange( value ) {
+							setAttributes( { value } );
+						},
+					} );
+				},
+				save( { attributes } ) {
+					return el( RichText.Content, {
+						tagName: 'blockquote',
+						multiline: 'p',
+						value: attributes.value,
+					} );
+				},
+			} );
+		} );
+		await editor.insertBlock( {
+			name: 'core/rich-text-deprecated-multiline',
+		} );
+		await page.keyboard.press( 'ArrowDown' );
+	} );
+
+	test( 'should save', async ( { page, editor } ) => {
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/rich-text-deprecated-multiline',
+				attributes: {
+					value: '<p>1</p><p>2</p>',
+				},
+			},
+		] );
+
+		// Test serialised output.
+		expect( await editor.getEditedPostContent() ).toBe(
+			`<!-- wp:rich-text-deprecated-multiline -->
+<blockquote><p>1</p><p>2</p></blockquote>
+<!-- /wp:rich-text-deprecated-multiline -->`
+		);
+	} );
+
+	test( 'should split in middle', async ( { page, editor } ) => {
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Enter' );
+		// Test selection after split.
+		await page.keyboard.type( '‸' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/rich-text-deprecated-multiline',
+				attributes: {
+					value: '<p>1</p><p>‸2</p>',
+				},
+			},
+		] );
+	} );
+
+	test( 'should merge two lines', async ( { page, editor } ) => {
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Backspace' );
+		// Test selection after merge.
+		await page.keyboard.type( '‸' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/rich-text-deprecated-multiline',
+				attributes: {
+					value: '<p>1‸2</p>',
+				},
+			},
+		] );
+	} );
+
+	test( 'should merge two lines (forward)', async ( { page, editor } ) => {
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Delete' );
+		// Test selection after merge.
+		await page.keyboard.type( '‸' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/rich-text-deprecated-multiline',
+				attributes: {
+					value: '<p>1‸2</p>',
+				},
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/rich-text-deprecated-on-split.spec.js b/test/e2e/specs/editor/various/rich-text-deprecated-on-split.spec.js
new file mode 100644
index 00000000000000..30531ae2d0aed2
--- /dev/null
+++ b/test/e2e/specs/editor/various/rich-text-deprecated-on-split.spec.js
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RichText deprecated onSplit', () => {
+	test.beforeEach( async ( { admin, page, editor } ) => {
+		await admin.createNewPost();
+		await page.evaluate( () => {
+			const registerBlockType = window.wp.blocks.registerBlockType;
+			const { useBlockProps, RichText } = window.wp.blockEditor;
+			const { createBlock, setDefaultBlockName } = window.wp.blocks;
+			const el = window.wp.element.createElement;
+			registerBlockType( 'core/rich-text-deprecated-on-split', {
+				apiVersion: 3,
+				title: 'Deprecated RichText onSplit',
+				attributes: {
+					value: {
+						type: 'string',
+						source: 'html',
+						selector: 'div',
+					},
+				},
+				edit: function Edit( {
+					attributes,
+					setAttributes,
+					onReplace,
+				} ) {
+					return el( RichText, {
+						...useBlockProps(),
+						value: attributes.value,
+						onChange( value ) {
+							setAttributes( { value } );
+						},
+						onReplace,
+						onSplit( value ) {
+							return createBlock(
+								'core/rich-text-deprecated-on-split',
+								{ value }
+							);
+						},
+					} );
+				},
+				save( { attributes } ) {
+					return el( RichText.Content, { value: attributes.value } );
+				},
+			} );
+			setDefaultBlockName( 'core/rich-text-deprecated-on-split' );
+		} );
+		await editor.insertBlock( {
+			name: 'core/rich-text-deprecated-on-split',
+		} );
+	} );
+
+	test( 'should split', async ( { page, editor } ) => {
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/rich-text-deprecated-on-split',
+				attributes: {
+					value: '1',
+				},
+			},
+			{
+				name: 'core/rich-text-deprecated-on-split',
+				attributes: {
+					value: '2',
+				},
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/rich-text.spec.js b/test/e2e/specs/editor/various/rich-text.spec.js
new file mode 100644
index 00000000000000..29b4fb3d589018
--- /dev/null
+++ b/test/e2e/specs/editor/various/rich-text.spec.js
@@ -0,0 +1,849 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'RichText (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should handle change in tag name gracefully', async ( {
+		page,
+		editor,
+	} ) => {
+		// Regression test: The heading block changes the tag name of its
+		// RichText element. Historically this has been prone to breakage,
+		// because the Editable component prevents rerenders, so React cannot
+		// update the element by itself.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/3091
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.clickBlockToolbarButton( 'Change level' );
+		await page.locator( 'role=menuitemradio[name="Heading 3"]' ).click();
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/heading',
+				attributes: { level: 3 },
+			},
+		] );
+	} );
+
+	test( 'should apply formatting with primary shortcut', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'test' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+b' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>test</strong>' },
+			},
+		] );
+	} );
+
+	test( 'should apply formatting when selection is collapsed', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Some ' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( 'bold' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '.' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Some <strong>bold</strong>.' },
+			},
+		] );
+	} );
+
+	test( 'should apply multiple formats when selection is collapsed', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
+		await pageUtils.pressKeys( 'primary+i' );
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+i' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '.' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong><em>1</em></strong>.' },
+			},
+		] );
+	} );
+
+	test( 'should not highlight more than one format', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( ' 2' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+b' );
+
+		const count = await editor.canvas
+			.locator( ':root' )
+			.evaluate(
+				() =>
+					document.querySelectorAll(
+						'*[data-rich-text-format-boundary]'
+					).length
+			);
+		expect( count ).toBe( 1 );
+	} );
+
+	test( 'should return focus when pressing formatting button (-firefox)', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'Some ' );
+		await editor.clickBlockToolbarButton( 'Bold' );
+		await page.keyboard.type( 'bold' );
+		await editor.clickBlockToolbarButton( 'Bold' );
+		await page.keyboard.type( '.' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Some <strong>bold</strong>.' },
+			},
+		] );
+	} );
+
+	test( 'should transform backtick to code', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'A `backtick`' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'A <code>backtick</code>' },
+			},
+		] );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{ name: 'core/paragraph' },
+		] );
+	} );
+
+	test( 'should undo backtick transform with backspace', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '`a`' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '`a`' },
+			},
+		] );
+	} );
+
+	test( 'should not undo backtick transform with backspace after typing', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '`a`' );
+		await page.keyboard.type( 'b' );
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [] );
+	} );
+
+	test( 'should not undo backtick transform with backspace after selection change', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '`a`' );
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
+		// Move inside format boundary.
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [] );
+	} );
+
+	test( 'should not format text after code backtick', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'A `backtick` and more.' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'A <code>backtick</code> and more.' },
+			},
+		] );
+	} );
+
+	test( 'should transform when typing backtick over selection', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'A selection test.' );
+		await page.keyboard.press( 'Home' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pageUtils.pressKeys( 'shiftAlt+ArrowRight' );
+		await page.keyboard.type( '`' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'A <code>selection</code> test.' },
+			},
+		] );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'A `selection` test.' },
+			},
+		] );
+	} );
+
+	test( 'should only mutate text data on input', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '3' );
+
+		await editor.canvas.locator( ':root' ).evaluate( () => {
+			let called;
+			const { body } = document;
+			const config = {
+				attributes: true,
+				childList: true,
+				characterData: true,
+				subtree: true,
+			};
+
+			const mutationObserver = new MutationObserver( ( records ) => {
+				if ( called || records.length > 1 ) {
+					throw new Error( 'Typing should only mutate once.' );
+				}
+
+				records.forEach( ( record ) => {
+					if ( record.type !== 'characterData' ) {
+						throw new Error(
+							`Typing mutated more than character data: ${ record.type }`
+						);
+					}
+				} );
+
+				called = true;
+			} );
+
+			mutationObserver.observe( body, config );
+
+			window.unsubscribes = [ () => mutationObserver.disconnect() ];
+
+			document.addEventListener(
+				'selectionchange',
+				() => {
+					function throwMultipleSelectionChange() {
+						throw new Error(
+							'Typing should only emit one selection change event.'
+						);
+					}
+
+					document.addEventListener(
+						'selectionchange',
+						throwMultipleSelectionChange,
+						{
+							once: true,
+						}
+					);
+
+					window.unsubscribes.push( () => {
+						document.removeEventListener(
+							'selectionchange',
+							throwMultipleSelectionChange
+						);
+					} );
+				},
+				{ once: true }
+			);
+		} );
+
+		await page.keyboard.type( '4' );
+
+		await editor.canvas.locator( ':root' ).evaluate( () => {
+			// The selection change event should be called once. If there's only
+			// one item in `window.unsubscribes`, it means that only one
+			// function is present to disconnect the `mutationObserver`.
+			if ( window.unsubscribes.length === 1 ) {
+				throw new Error(
+					'The selection change event listener was never called.'
+				);
+			}
+
+			window.unsubscribes.forEach( ( unsubscribe ) => unsubscribe() );
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1<strong>2</strong>34' },
+			},
+		] );
+	} );
+
+	test( 'should not lose selection direction', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '23' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.up( 'Shift' );
+
+		// There should be no selection. The following should insert "-" without
+		// deleting the numbers.
+		await page.keyboard.type( '-' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>1</strong>2-3' },
+			},
+		] );
+	} );
+
+	test( 'should handle Home and End keys', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '12' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.press( 'Home' );
+		await page.keyboard.type( '-' );
+		await page.keyboard.press( 'End' );
+		await page.keyboard.type( '+' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '-<strong>12</strong>+' },
+			},
+		] );
+	} );
+
+	test( 'should update internal selection after fresh focus (-firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+b' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1<strong>2</strong>' },
+			},
+		] );
+	} );
+
+	test( 'should keep internal selection after blur (-webkit)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		// Simulate moving focus to a different app, then moving focus back,
+		// without selection being changed.
+		await editor.canvas.locator( ':root' ).evaluate( () => {
+			const activeElement = document.activeElement;
+			activeElement.blur();
+			activeElement.focus();
+		} );
+		// Wait for the next animation frame, see the focus event listener in
+		// RichText.
+		await page.evaluate(
+			() => new Promise( window.requestAnimationFrame )
+		);
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+b' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1<strong>2</strong>' },
+			},
+		] );
+	} );
+
+	test( 'should split rich text on paste', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await page.keyboard.type( 'ab' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'a1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2b' },
+			},
+		] );
+	} );
+
+	test( 'should not split rich text on inline paste', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await page.keyboard.type( '13' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '123' },
+			},
+		] );
+	} );
+
+	test( 'should not split rich text on inline paste with formatting', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '3' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+x' );
+		await page.keyboard.type( 'ab' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'a1<strong>2</strong>3b' },
+			},
+		] );
+	} );
+
+	test( 'should make bold after split and merge', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Backspace' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '2' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1<strong>2</strong>' },
+			},
+		] );
+	} );
+
+	test( 'should apply active formatting for inline paste', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '3' );
+		await pageUtils.pressKeys( 'shift+ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>132</strong>3' },
+			},
+		] );
+	} );
+
+	// For some reason, tabbing in the highlight popover doesn't work in WebKit.
+	test( 'should preserve internal formatting (-webkit, -firefox)', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		// Add text and select to color.
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await editor.clickBlockToolbarButton( 'More' );
+		await page.locator( 'button:text("Highlight")' ).click();
+
+		// Initial focus is on the "Text" tab.
+		// Tab to the "Custom color picker".
+		await page.keyboard.press( 'Tab' );
+		// Tab to black.
+		await page.keyboard.press( 'Tab' );
+		// Select color other than black.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+
+		const result = {
+			name: 'core/paragraph',
+			attributes: {
+				content:
+					'<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">1</mark>',
+			},
+		};
+
+		expect( await editor.getBlocks() ).toMatchObject( [ result ] );
+
+		// Dismiss color picker popover.
+		await page.keyboard.press( 'Escape' );
+
+		// Navigate to the block.
+		await page.keyboard.press( 'Tab' );
+
+		// Copy the colored text.
+		await pageUtils.pressKeys( 'primary+c' );
+
+		// Collapse the selection to the end.
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Create a new paragraph.
+		await page.keyboard.press( 'Enter' );
+
+		// Paste the colored text.
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject(
+			Array( 2 ).fill( result )
+		);
+	} );
+
+	test( 'should paste paragraph contents into list', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		// Create two lines of text in a paragraph.
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'shift+Enter' );
+		await page.keyboard.type( '2' );
+
+		// Select all and copy.
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+c' );
+
+		// Collapse the selection to the end.
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Create a list.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '* ' );
+
+		// Paste paragraph contents.
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1<br>2' },
+			},
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1<br>2' },
+					},
+				],
+			},
+		] );
+	} );
+
+	test( 'should paste list contents into paragraph', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		// Create an indented list of two lines.
+		await page.keyboard.type( '* 1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( ' 2' );
+
+		// Select all text.
+		await pageUtils.pressKeys( 'primary+a' );
+		// Select the nested list.
+		await pageUtils.pressKeys( 'primary+a' );
+		// Select the parent list item.
+		await pageUtils.pressKeys( 'primary+a' );
+		// Select all the parent list item text.
+		await pageUtils.pressKeys( 'primary+a' );
+		// Select the entire list.
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+c' );
+
+		await page.keyboard.press( 'Enter' );
+
+		// Paste paragraph contents.
+		await pageUtils.pressKeys( 'primary+v' );
+
+		expect( await editor.getBlocks() ).toMatchObject(
+			Array( 2 ).fill( {
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: { content: '1' },
+						innerBlocks: [
+							{
+								name: 'core/list',
+								innerBlocks: [
+									{
+										name: 'core/list-item',
+										attributes: { content: '2' },
+									},
+								],
+							},
+						],
+					},
+				],
+			} )
+		);
+	} );
+
+	test( 'should navigate arround emoji', async ( { page, editor } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '🍓' );
+		// Only one press on arrow left should be required to move in front of
+		// the emoji.
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.type( '1' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1🍓' },
+			},
+		] );
+	} );
+
+	test( 'should run input rules after composition end', async ( {
+		editor,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		// Playwright doesn't support composition, so emulate it by inserting
+		// text in the DOM directly, setting selection in the right place, and
+		// firing `compositionend`.
+		// See https://github.com/puppeteer/puppeteer/issues/4981.
+		await editor.canvas.locator( ':root' ).evaluate( async () => {
+			document.activeElement.textContent = '`a`';
+			const selection = window.getSelection();
+			// The `selectionchange` and `compositionend` events should run in separate event
+			// loop ticks to process all data store updates in time. Native events would be
+			// scheduled the same way.
+			selection.selectAllChildren( document.activeElement );
+			selection.collapseToEnd();
+			await new Promise( ( r ) => setTimeout( r, 0 ) );
+			document.activeElement.dispatchEvent(
+				new CompositionEvent( 'compositionend' )
+			);
+		} );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<code>a</code>' },
+			},
+		] );
+	} );
+
+	test( 'should navigate consecutive format boundaries', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await pageUtils.pressKeys( 'primary+i' );
+		await page.keyboard.type( '2' );
+		await pageUtils.pressKeys( 'primary+i' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>1</strong><em>2</em>' },
+			},
+		] );
+
+		// Should move into the second format.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Should move to the start of the second format.
+		await page.keyboard.press( 'ArrowLeft' );
+		// Should move between the first and second format.
+		await page.keyboard.press( 'ArrowLeft' );
+
+		await page.keyboard.type( '-' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '<strong>1</strong>-<em>2</em>' },
+			},
+		] );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/rtl.spec.js b/test/e2e/specs/editor/various/rtl.spec.js
index d06c0ec8a43894..aaf1186cc5abae 100644
--- a/test/e2e/specs/editor/various/rtl.spec.js
+++ b/test/e2e/specs/editor/various/rtl.spec.js
@@ -150,10 +150,12 @@ test.describe( 'RTL', () => {
 		page,
 		pageUtils,
 	} ) => {
-		await page.click( 'role=button[name="Add default block"i]' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await pageUtils.pressKeys( 'primary+b' );
 		await page.keyboard.type( ARABIC_ONE );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		await page.keyboard.type( ARABIC_TWO );
 
 		// Insert a character at each boundary position.
diff --git a/test/e2e/specs/editor/various/scheduling.spec.js b/test/e2e/specs/editor/various/scheduling.spec.js
new file mode 100644
index 00000000000000..2ea05589d02744
--- /dev/null
+++ b/test/e2e/specs/editor/various/scheduling.spec.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+// The `timezone` setting exposed via REST API only accepts `UTC`
+// and timezone strings by location.
+const TIMEZONES = [ 'Pacific/Honolulu', 'UTC', 'Australia/Sydney' ];
+
+test.describe( 'Scheduling', () => {
+	TIMEZONES.forEach( ( timezone ) => {
+		test.describe( `Timezone ${ timezone }`, () => {
+			let orignalTimezone;
+			test.beforeAll( async ( { requestUtils } ) => {
+				orignalTimezone = ( await requestUtils.getSiteSettings() )
+					.timezone;
+
+				await requestUtils.updateSiteSettings( { timezone } );
+			} );
+
+			test.afterAll( async ( { requestUtils } ) => {
+				await requestUtils.updateSiteSettings( {
+					timezone: orignalTimezone,
+				} );
+			} );
+
+			test( 'Should change publishing button text from "Publish" to "Schedule"', async ( {
+				admin,
+				editor,
+				page,
+			} ) => {
+				await admin.createNewPost();
+				await editor.openDocumentSettingsSidebar();
+
+				const topBar = page.getByRole( 'region', {
+					name: 'Editor top bar',
+				} );
+
+				await expect(
+					topBar.getByRole( 'button', { name: 'Publish' } )
+				).toBeVisible();
+
+				// Open the datepicker.
+				await page
+					.getByRole( 'button', { name: 'Change date' } )
+					.click();
+
+				// Change the publishing date to a year in the future.
+				await page
+					.getByRole( 'group', { name: 'Date' } )
+					.getByRole( 'spinbutton', { name: 'Year' } )
+					.click();
+				await page.keyboard.press( 'ArrowUp' );
+
+				// Close the datepicker.
+				await page.keyboard.press( 'Escape' );
+
+				await expect(
+					topBar.getByRole( 'button', { name: 'Schedule' } )
+				).toBeVisible();
+			} );
+		} );
+	} );
+
+	test( 'should keep date time UI focused when the previous and next month buttons are clicked', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'button', { name: 'Change date' } ).click();
+
+		const calendar = page.getByRole( 'application', { name: 'Calendar' } );
+		const prevMonth = calendar.getByRole( 'button', {
+			name: 'View previous month',
+		} );
+		const nextMonth = calendar.getByRole( 'button', {
+			name: 'View next month',
+		} );
+
+		await prevMonth.click();
+		await expect( prevMonth ).toBeFocused();
+		await expect( calendar ).toBeVisible();
+
+		await nextMonth.click();
+		await expect( nextMonth ).toBeFocused();
+		await expect( calendar ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
new file mode 100644
index 00000000000000..fc54a1a71c8daa
--- /dev/null
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -0,0 +1,227 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	toolbarUtils: async ( { page, pageUtils }, use ) => {
+		await use( new ToolbarUtils( { page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'Focuses correct toolbar in default view options in edit mode', async ( {
+		editor,
+		page,
+		toolbarUtils,
+	} ) => {
+		// Test: Focus the top level toolbar from title
+		await toolbarUtils.moveToToolbarShortcut();
+		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+		// Test: Focus document toolbar from empty block
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await toolbarUtils.moveToToolbarShortcut();
+		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+		// Test: Focus block toolbar from block content when block toolbar isn't visible
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type(
+			"Focus to block toolbar when block toolbar isn't visible"
+		);
+		await toolbarUtils.moveToToolbarShortcut();
+		await expect( toolbarUtils.blockToolbarParagraphButton ).toBeFocused();
+		await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+
+		// Test: Focus block toolbar from block content when block toolbar is visible
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type(
+			'Focus to block toolbar when block toolbar is visible'
+		);
+		// We need to force the toolbar to show. Otherwise, the bug from
+		// https://github.com/WordPress/gutenberg/pull/49644 won't surface in the e2e tests.
+		await editor.showBlockToolbar();
+		await toolbarUtils.moveToToolbarShortcut();
+		await expect( toolbarUtils.blockToolbarParagraphButton ).toBeFocused();
+		await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+	} );
+
+	test.describe( 'In Top Toolbar option:', () => {
+		test.beforeEach( async ( { editor } ) => {
+			// Ensure the fixed toolbar option is on
+			await editor.setIsFixedToolbar( true );
+		} );
+
+		test.afterEach( async ( { editor } ) => {
+			// Ensure the fixed toolbar option is off
+			await editor.setIsFixedToolbar( false );
+		} );
+
+		test( 'Focuses the correct toolbar in edit mode', async ( {
+			editor,
+			page,
+			toolbarUtils,
+		} ) => {
+			// Test: Focus the document toolbar from title
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+			// Test: Focus the block toolbar from empty block
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			// This fails if we don't wait for the block toolbar to show.
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeVisible();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+
+			// Test: Focus the block toolbar from paragraph block with content
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type(
+				'Focus the block toolbar from paragraph block with content'
+			);
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+		} );
+
+		test( 'Focuses the correct toolbar in select mode', async ( {
+			editor,
+			page,
+			toolbarUtils,
+		} ) => {
+			// Test: Focus the document toolbar from title
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+			// Test: Focus the block toolbar from empty block
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+
+			// Test: Focus the block toolbar from paragraph in select mode
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type(
+				'Focus the block toolbar from paragraph in select mode'
+			);
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+		} );
+	} );
+
+	test.describe( 'Smaller than large viewports', () => {
+		test.use( {
+			// Make the viewport small enough to trigger the fixed toolbar
+			viewport: {
+				width: 700,
+				height: 700,
+			},
+		} );
+
+		test( 'Focuses the correct toolbar in edit mode', async ( {
+			editor,
+			page,
+			toolbarUtils,
+		} ) => {
+			// Test: Focus the document toolbar from title
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+			// Test: Focus the block toolbar from empty block
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+			await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+
+			// Test: Focus the block toolbar from paragraph block with content
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type(
+				'Focus the block toolbar from paragraph block with content'
+			);
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+			await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+		} );
+
+		test( 'Focuses the correct toolbar in select mode', async ( {
+			editor,
+			page,
+			toolbarUtils,
+		} ) => {
+			// Test: Focus the document toolbar from title
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
+
+			// Test: Focus the block toolbar from empty block
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+			await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+
+			// Test: Focus the block toolbar from paragraph in select mode
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type(
+				'Focus the block toolbar from paragraph in select mode'
+			);
+			await toolbarUtils.useSelectMode();
+			await toolbarUtils.moveToToolbarShortcut();
+			await expect(
+				toolbarUtils.blockToolbarParagraphButton
+			).toBeFocused();
+			await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
+		} );
+	} );
+} );
+
+class ToolbarUtils {
+	constructor( { page, pageUtils } ) {
+		this.page = page;
+		this.pageUtils = pageUtils;
+
+		this.documentToolbarButton = this.page.getByRole( 'button', {
+			name: 'Block Inserter',
+			exact: true,
+		} );
+		this.documentToolbarTooltip = this.page.locator(
+			'text=Block Inserter'
+		);
+		this.blockToolbarParagraphButton = this.page.getByRole( 'button', {
+			name: 'Paragraph',
+			exact: true,
+		} );
+		this.blockToolbarShowDocumentButton = this.page.getByRole( 'button', {
+			name: 'Hide block tools',
+			exact: true,
+		} );
+	}
+
+	async useSelectMode() {
+		await this.page.keyboard.press( 'Escape' );
+	}
+
+	async moveToToolbarShortcut() {
+		await this.pageUtils.pressKeys( 'alt+F10' );
+	}
+}
diff --git a/test/e2e/specs/editor/various/shortcut-help.spec.js b/test/e2e/specs/editor/various/shortcut-help.spec.js
new file mode 100644
index 00000000000000..1aaf5e93c975c5
--- /dev/null
+++ b/test/e2e/specs/editor/various/shortcut-help.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'keyboard shortcut help modal', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'opens from the options menu, closes with its close button and returns focus', async ( {
+		page,
+	} ) => {
+		await page
+			.locator( 'role=region[name="Editor top bar"]' )
+			.locator( '[aria-label="Options"]' )
+			.click();
+		const menuItem = page.locator( 'role=menuitem', {
+			hasText: /^Keyboard shortcuts/i,
+		} );
+		const dialog = page.locator( 'role=dialog[name="Keyboard shortcuts"]' );
+
+		await menuItem.click();
+		await expect( dialog ).toBeVisible();
+
+		await page.locator( 'role=button[name="Close"]' ).click();
+		await expect( dialog ).toBeHidden();
+		await expect( menuItem ).toBeFocused();
+	} );
+
+	test( 'toggles open/closed using the keyboard shortcut (access+h)', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.pressKeys( 'access+h' );
+		const dialog = page.locator( 'role=dialog[name="Keyboard shortcuts"]' );
+		await expect( dialog ).toBeVisible();
+
+		await pageUtils.pressKeys( 'access+h' );
+		await expect( dialog ).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/sidebar-permalink.spec.js b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
new file mode 100644
index 00000000000000..a21cc13ea5c2e2
--- /dev/null
+++ b/test/e2e/specs/editor/various/sidebar-permalink.spec.js
@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+// This tests are not together with the remaining sidebar tests,
+// because we need to publish/save a post, to correctly test the permalink row.
+// The sidebar test suit enforces that focus is never lost, but during save operations
+// the focus is lost and a new element is focused once the save is completed.
+test.describe( 'Sidebar Permalink', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-custom-post-types' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-custom-post-types'
+		);
+	} );
+
+	test( 'should not render URL when post is publicly queryable but not public', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'public_q_not_public' } );
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaaa' );
+		await editor.publishPost();
+		// Start editing again.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaa (Updated)' );
+		await expect(
+			page.getByRole( 'button', { name: 'Change link' } )
+		).toBeHidden();
+	} );
+
+	test( 'should not render URL when post is public but not publicly queryable', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'not_public_q_public' } );
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaaa' );
+		await editor.publishPost();
+		// Start editing again.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaa (Updated)' );
+		await expect(
+			page.getByRole( 'button', { name: 'Change link' } )
+		).toBeHidden();
+	} );
+
+	test( 'should render URL when post is public and publicly queryable', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( { postType: 'public_q_public' } );
+		await editor.openDocumentSettingsSidebar();
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaaa' );
+		await editor.publishPost();
+
+		// Start editing again.
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'aaaa (Updated)' );
+		await expect(
+			page.getByRole( 'button', { name: 'Change link' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js
new file mode 100644
index 00000000000000..153a48e325c887
--- /dev/null
+++ b/test/e2e/specs/editor/various/sidebar.spec.js
@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Sidebar', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		// The test expects clean user preferences.
+		await requestUtils.resetPreferences();
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should have sidebar visible at the start with document sidebar active on desktop', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.setBrowserViewport( 'large' );
+
+		const activeTab = page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'tab', { selected: true } );
+
+		await expect( activeTab ).toBeVisible();
+		await expect( activeTab ).toHaveText( 'Post' );
+	} );
+
+	test( 'should have the sidebar closed by default on mobile', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.setBrowserViewport( 'small' );
+
+		await expect(
+			page.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+		).toBeHidden();
+	} );
+
+	test( 'should close the sidebar when resizing from desktop to mobile', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.setBrowserViewport( 'large' );
+		const settingsSideber = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		await expect( settingsSideber ).toBeVisible();
+
+		await pageUtils.setBrowserViewport( 'small' );
+
+		// Sidebar should be closed when resizing to mobile.
+		await expect( settingsSideber ).toBeHidden();
+	} );
+
+	test( 'should reopen sidebar the sidebar when resizing from mobile to desktop if the sidebar was closed automatically', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.setBrowserViewport( 'large' );
+		await pageUtils.setBrowserViewport( 'small' );
+		const settingsSideber = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		await expect( settingsSideber ).toBeHidden();
+		await pageUtils.setBrowserViewport( 'large' );
+		await expect( settingsSideber ).toBeVisible();
+	} );
+
+	test( 'should preserve tab order while changing active tab', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		// Region navigate to Sidebar.
+		await pageUtils.pressKeys( 'ctrl+`' );
+
+		// Tab lands at first (presumed selected) option "Post".
+		await page.keyboard.press( 'Tab' );
+
+		const activeTab = page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'tab', { selected: true } );
+
+		// The Post tab should be focused and selected.
+		await expect( activeTab ).toHaveText( 'Post' );
+		await expect( activeTab ).toBeFocused();
+
+		// Arrow key into and activate "Block".
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Space' );
+
+		// The Block tab should be focused and selected.
+		await expect( activeTab ).toHaveText( 'Block' );
+		await expect( activeTab ).toBeFocused();
+	} );
+
+	test( 'should be possible to programmatically remove Document Settings panels', async ( {
+		page,
+	} ) => {
+		const documentSettingsPanels = page
+			.getByRole( 'tabpanel', { name: 'Post' } )
+			.getByRole( 'heading', { level: 2 } );
+
+		await expect( documentSettingsPanels ).toHaveText( [
+			'No title',
+			'Categories',
+			'Tags',
+		] );
+		// Also check 'panels' that are not rendered as TabPanels.
+		const postExcerptPanel = page.getByRole( 'button', {
+			name: 'Add an excerpt…',
+		} );
+		const postFeaturedImagePanel = page.getByRole( 'button', {
+			name: 'Set featured image',
+		} );
+		const postDiscussionPanel = page.getByRole( 'button', {
+			name: 'Change discussion options',
+		} );
+		const postAuthorPanel = page.getByRole( 'button', {
+			name: 'admin',
+		} );
+
+		await expect( postExcerptPanel ).toBeVisible();
+		await expect( postFeaturedImagePanel ).toBeVisible();
+		await expect( postAuthorPanel ).toBeVisible();
+		await expect( postDiscussionPanel ).toHaveCount( 1 );
+
+		await page.evaluate( () => {
+			const { removeEditorPanel } =
+				window.wp.data.dispatch( 'core/editor' );
+
+			removeEditorPanel( 'taxonomy-panel-category' );
+			removeEditorPanel( 'taxonomy-panel-post_tag' );
+			removeEditorPanel( 'featured-image' );
+			removeEditorPanel( 'post-excerpt' );
+			removeEditorPanel( 'discussion-panel' );
+			removeEditorPanel( 'post-status' );
+		} );
+
+		await expect( documentSettingsPanels ).toHaveCount( 1 );
+		await expect( postExcerptPanel ).toBeHidden();
+		await expect( postFeaturedImagePanel ).toBeHidden();
+		await expect( postAuthorPanel ).toBeHidden();
+		await expect( postDiscussionPanel ).toHaveCount( 0 );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 45f4d9347edcc2..146039a7c7d1bf 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -3,9 +3,12 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'splitting and merging blocks', () => {
-	test.beforeEach( async ( { admin } ) => {
+test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.createNewPost();
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeFocused();
 	} );
 
 	test.afterEach( async ( { requestUtils } ) => {
@@ -23,7 +26,7 @@ test.describe( 'splitting and merging blocks', () => {
 
 		// Move caret between 'First' and 'Second' and press Enter to split
 		// paragraph blocks.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
 		await page.keyboard.press( 'Enter' );
 
 		// Assert that there are now two paragraph blocks with correct content.
@@ -55,16 +58,16 @@ test.describe( 'splitting and merging blocks', () => {
 <!-- /wp:paragraph -->`
 		);
 
-		await pageUtils.pressKeyTimes( 'Backspace', 7 ); // Delete "Between"
+		await pageUtils.pressKeys( 'Backspace', { times: 7 } ); // Delete "Between"
 
 		// Edge case: Without ensuring that the editor still has focus when
 		// restoring a bookmark, the caret may be inadvertently moved back to
 		// an inline boundary after a split occurs.
 		await page.keyboard.press( 'Home' );
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowRight', 5 );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 5 } );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		// Collapse selection, still within inline boundary.
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
@@ -90,13 +93,13 @@ test.describe( 'splitting and merging blocks', () => {
 		// Regression Test: Caret should reset to end of inline boundary when
 		// backspacing to delete second paragraph.
 		await editor.insertBlock( { name: 'core/paragraph' } );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		await page.keyboard.type( 'Foo' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Backspace' );
 
 		// Replace contents of first paragraph with "Bar".
-		await pageUtils.pressKeyTimes( 'Backspace', 4 );
+		await pageUtils.pressKeys( 'Backspace', { times: 4 } );
 		await page.keyboard.type( 'Bar' );
 
 		const content = await editor.getEditedPostContent();
@@ -161,7 +164,7 @@ test.describe( 'splitting and merging blocks', () => {
 
 		// Select text.
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 3 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } );
 		await page.keyboard.up( 'Shift' );
 
 		// Delete selection.
@@ -194,9 +197,9 @@ test.describe( 'splitting and merging blocks', () => {
 		// The regression appeared to only affect paragraphs created while
 		// within an inline boundary.
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 3 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
@@ -306,11 +309,11 @@ test.describe( 'splitting and merging blocks', () => {
 
 		// There is a default block and post title:
 		await expect(
-			page.locator( 'role=document[name=/Empty block/i]' )
+			editor.canvas.locator( 'role=document[name=/Empty block/i]' )
 		).toBeVisible();
 
 		await expect(
-			page.locator( 'role=textbox[name="Add title"i]' )
+			editor.canvas.locator( 'role=textbox[name="Add title"i]' )
 		).toBeVisible();
 
 		// But the effective saved content is still empty:
@@ -318,7 +321,7 @@ test.describe( 'splitting and merging blocks', () => {
 
 		// And focus is retained:
 		await expect(
-			page.locator( 'role=document[name=/Empty block/i]' )
+			editor.canvas.locator( 'role=document[name=/Empty block/i]' )
 		).toBeFocused();
 	} );
 
@@ -331,13 +334,20 @@ test.describe( 'splitting and merging blocks', () => {
 		await page.keyboard.type( '12' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'z' );
+		await pageUtils.pressKeys( 'primary+z' );
 
 		// Check the content.
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '12',
+				},
+			},
+		] );
 	} );
 
-	test( 'should not split with line break in front', async ( {
+	test( 'should not split with line break in front (-firefox)', async ( {
 		editor,
 		page,
 		pageUtils,
@@ -345,7 +355,7 @@ test.describe( 'splitting and merging blocks', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'Backspace' );
@@ -363,45 +373,198 @@ test.describe( 'splitting and merging blocks', () => {
 		);
 	} );
 
-	test.describe(
-		'test restore selection when merge produces more than one block',
-		() => {
-			test( 'on forward delete', async ( {
-				editor,
-				page,
-				pageUtils,
-			} ) => {
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type( 'hi' );
-				await editor.insertBlock( { name: 'core/list' } );
-				await page.keyboard.type( 'item 1' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'item 2' );
-				await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
-				await page.keyboard.press( 'Delete' );
-				// Carret should be in the first block and at the proper position.
-				await page.keyboard.type( '-' );
-
-				// Check the content.
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-			} );
-
-			test( 'on backspace', async ( { editor, page, pageUtils } ) => {
-				await editor.insertBlock( { name: 'core/paragraph' } );
-				await page.keyboard.type( 'hi' );
-				await editor.insertBlock( { name: 'core/list' } );
-				await page.keyboard.type( 'item 1' );
-				await page.keyboard.press( 'Enter' );
-				await page.keyboard.type( 'item 2' );
-				await page.keyboard.press( 'ArrowUp' );
-				await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
-				await page.keyboard.press( 'Backspace' );
-				// Carret should be in the first block and at the proper position.
-				await page.keyboard.type( '-' );
-
-				// Check the content.
-				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-			} );
-		}
-	);
+	// Fix for https://github.com/WordPress/gutenberg/issues/65174.
+	test( 'should handle unwrapping and merging blocks with empty contents', async ( {
+		editor,
+		page,
+	} ) => {
+		const emptyAlignedParagraph = {
+			name: 'core/paragraph',
+			attributes: { content: '', align: 'center', dropCap: false },
+			innerBlocks: [],
+		};
+		const emptyAlignedHeading = {
+			name: 'core/heading',
+			attributes: { content: '', textAlign: 'center', level: 2 },
+			innerBlocks: [],
+		};
+		const headingWithContent = {
+			name: 'core/heading',
+			attributes: { content: 'heading', level: 2 },
+			innerBlocks: [],
+		};
+		const paragraphWithContent = {
+			name: 'core/paragraph',
+			attributes: { content: 'heading', dropCap: false },
+			innerBlocks: [],
+		};
+		const placeholderBlock = { name: 'core/separator' };
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				emptyAlignedParagraph,
+				emptyAlignedHeading,
+				headingWithContent,
+				placeholderBlock,
+			],
+		} );
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.focus();
+
+		// Remove the alignment.
+		await page.keyboard.press( 'Backspace' );
+		// Remove the empty paragraph block.
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Remove the default empty block' )
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedHeading,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+
+		// Convert the heading to a default block.
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll(
+				editor.getBlocks,
+				'Convert the non-default empty block to a default block'
+			)
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedParagraph,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+		// Remove the alignment.
+		await page.keyboard.press( 'Backspace' );
+		// Remove the empty default block.
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toEqual( [
+			{
+				name: 'core/group',
+				attributes: { tagName: 'div' },
+				innerBlocks: [
+					headingWithContent,
+					expect.objectContaining( placeholderBlock ),
+				],
+			},
+		] );
+
+		// Convert a non-empty non-default block to a default block.
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Lift the non-empty non-default block' )
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						paragraphWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+	} );
+
+	test.describe( 'test restore selection when merge produces more than one block', () => {
+		const snap1 = [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'hi',
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'item 1',
+				},
+			},
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: {
+							content: 'item 2',
+						},
+					},
+				],
+			},
+		];
+
+		const snap2 = [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'hi-item 1',
+				},
+			},
+			{
+				name: 'core/list',
+				innerBlocks: [
+					{
+						name: 'core/list-item',
+						attributes: {
+							content: 'item 2',
+						},
+					},
+				],
+			},
+		];
+
+		test( 'on forward delete', async ( { editor, page, pageUtils } ) => {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( 'hi' );
+			await editor.insertBlock( { name: 'core/list' } );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await pageUtils.pressKeys( 'ArrowUp', { times: 3 } );
+			await page.keyboard.press( 'Delete' );
+
+			expect( await editor.getBlocks() ).toMatchObject( snap1 );
+
+			await page.keyboard.press( 'Delete' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+
+			// Check the content.
+			expect( await editor.getBlocks() ).toMatchObject( snap2 );
+		} );
+
+		test( 'on backspace', async ( { editor, page, pageUtils } ) => {
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			await page.keyboard.type( 'hi' );
+			await editor.insertBlock( { name: 'core/list' } );
+			await page.keyboard.type( 'item 1' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( 'item 2' );
+			await page.keyboard.press( 'ArrowUp' );
+			await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
+			await page.keyboard.press( 'Backspace' );
+
+			expect( await editor.getBlocks() ).toMatchObject( snap1 );
+
+			await page.keyboard.press( 'Backspace' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+
+			// Check the content.
+			expect( await editor.getBlocks() ).toMatchObject( snap2 );
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/style-variation.spec.js b/test/e2e/specs/editor/various/style-variation.spec.js
index cc13dd1ad9238e..136b8284b1ecff 100644
--- a/test/e2e/specs/editor/various/style-variation.spec.js
+++ b/test/e2e/specs/editor/various/style-variation.spec.js
@@ -17,9 +17,6 @@ test.describe( 'adding blocks', () => {
 			attributes: { value: '<p>Quote content</p>' },
 		} );
 
-		// Select the quote block.
-		await page.keyboard.press( 'ArrowDown' );
-
 		await editor.clickBlockToolbarButton( 'Quote' );
 
 		await page.click( 'role=menuitem[name="Plain"i]' );
diff --git a/test/e2e/specs/editor/various/styles.spec.js b/test/e2e/specs/editor/various/styles.spec.js
new file mode 100644
index 00000000000000..0aa1f3007d2419
--- /dev/null
+++ b/test/e2e/specs/editor/various/styles.spec.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Styles', () => {
+	test( 'should override reset styles', async ( { admin, editor } ) => {
+		await admin.createNewPost( { postType: 'page' } );
+		await editor.insertBlock( { name: 'core/social-links' } );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Social Icons',
+		} );
+
+		await expect( block ).toHaveCSS( 'padding-left', '0px' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/switch-to-draft.spec.js b/test/e2e/specs/editor/various/switch-to-draft.spec.js
new file mode 100644
index 00000000000000..81652d9c11e2bb
--- /dev/null
+++ b/test/e2e/specs/editor/various/switch-to-draft.spec.js
@@ -0,0 +1,139 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').Admin} Admin */
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').RequestUtils} RequestUtils */
+
+test.use( {
+	switchToDraftUtils: async ( { page, admin, requestUtils }, use ) => {
+		await use( new SwitchToDraftUtils( { page, admin, requestUtils } ) );
+	},
+} );
+
+test.beforeAll( async ( { requestUtils } ) => {
+	await Promise.all( [
+		requestUtils.deleteAllPosts(),
+		requestUtils.deleteAllPages(),
+	] );
+} );
+
+test.afterAll( async ( { requestUtils } ) => {
+	await Promise.all( [
+		requestUtils.deleteAllPosts(),
+		requestUtils.deleteAllPages(),
+	] );
+} );
+
+test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page', () => {
+	[ 'schedule', 'publish' ].forEach( ( postStatus ) => {
+		[ 'large', 'small' ].forEach( ( viewport ) => {
+			[ 'post', 'page' ].forEach( ( postType ) => {
+				test( `should switch a ${ postStatus }-ed ${ postType } to draft in a ${ viewport } viewport`, async ( {
+					page,
+					switchToDraftUtils,
+					pageUtils,
+					editor,
+				} ) => {
+					await pageUtils.setBrowserViewport( viewport );
+
+					await switchToDraftUtils.createTestPost(
+						postType,
+						viewport,
+						postStatus === 'schedule'
+					);
+
+					await editor.openDocumentSettingsSidebar();
+					await page
+						.getByRole( 'button', { name: 'Change status:' } )
+						.click();
+					await page.getByRole( 'radio', { name: 'Draft' } ).click();
+
+					if ( viewport === 'small' ) {
+						await page
+							.getByRole( 'region', { name: 'Editor settings' } )
+							.getByRole( 'button', { name: 'Close Settings' } )
+							.click();
+					}
+					await page
+						.getByRole( 'region', { name: 'Editor top bar' } )
+						.getByRole( 'button', { name: 'Save', exact: true } )
+						.click();
+					await expect(
+						page.getByRole( 'button', {
+							name: 'Dismiss this notice',
+						} )
+					).toHaveText( `${ postType } reverted to draft.`, {
+						ignoreCase: true,
+					} );
+
+					await expect
+						.poll(
+							switchToDraftUtils.getPostStatus,
+							`should revert a ${ postStatus }-ed ${ postType } to a draft if confirmed`
+						)
+						.toBe( 'draft' );
+				} );
+			} );
+		} );
+	} );
+} );
+
+class SwitchToDraftUtils {
+	/** @type {Page} */
+	#page;
+	/** @type {Admin} */
+	#admin;
+	/** @type {RequestUtils} */
+	#requestUtils;
+
+	constructor( { page, admin, requestUtils } ) {
+		this.#page = page;
+		this.#admin = admin;
+		this.#requestUtils = requestUtils;
+	}
+
+	/**
+	 * Create a test post.
+	 *
+	 * @param {'post' | 'page'}   postType    The post type.
+	 * @param {'large' | 'small'} viewport    The viewport.
+	 * @param {boolean}           isScheduled Whether the post is scheduled.
+	 */
+	createTestPost = async ( postType, viewport, isScheduled = false ) => {
+		const payload = {
+			title: `Switch scheduled ${ postType } to draft`,
+			status: 'publish',
+			content: `<!-- wp:paragraph -->
+<p>This will be a scheduled ${ postType } edited in a ${ viewport } viewport</p>
+<!-- /wp:paragraph -->`,
+		};
+
+		if ( isScheduled ) {
+			const scheduledDate = new Date();
+			scheduledDate.setMonth( scheduledDate.getMonth() + 1 );
+			payload.date_gmt = scheduledDate.toISOString();
+		}
+
+		let id;
+		if ( postType === 'post' ) {
+			const post = await this.#requestUtils.createPost( payload );
+			id = post.id;
+		} else {
+			const page = await this.#requestUtils.createPage( payload );
+			id = page.id;
+		}
+
+		await this.#admin.editPost( id );
+	};
+
+	getPostStatus = async () => {
+		return this.#page.evaluate( () =>
+			window.wp.data
+				.select( 'core/editor' )
+				.getEditedPostAttribute( 'status' )
+		);
+	};
+}
diff --git a/test/e2e/specs/editor/various/taxonomies.spec.js b/test/e2e/specs/editor/various/taxonomies.spec.js
new file mode 100644
index 00000000000000..efd8c9c6ee7fe0
--- /dev/null
+++ b/test/e2e/specs/editor/various/taxonomies.spec.js
@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+function generateRandomNumber() {
+	return Math.round( 1 + Math.random() * ( Number.MAX_SAFE_INTEGER - 1 ) );
+}
+
+test.describe( 'Taxonomies', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'should be able to open the categories panel and create a new main category', async ( {
+		editor,
+		page,
+	} ) => {
+		// Open the Document -> Categories panel.
+		const panelToggle = page.getByRole( 'button', {
+			name: 'Categories',
+		} );
+
+		if (
+			( await panelToggle.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await panelToggle.click();
+		}
+
+		await page
+			.getByRole( 'button', {
+				name: 'Add New Category',
+				expanded: false,
+			} )
+			.click();
+		await page
+			.getByRole( 'textbox', { name: 'New Category Name' } )
+			.fill( 'z rand category 1' );
+		await page.keyboard.press( 'Enter' );
+
+		const categories = page.getByRole( 'group', { name: 'Categories' } );
+		const selectedCategories = categories.getByRole( 'checkbox', {
+			checked: true,
+		} );
+		const newCategory = categories.getByRole( 'checkbox', {
+			name: 'z rand category 1',
+		} );
+
+		await expect( selectedCategories ).toHaveCount( 1 );
+		await expect( newCategory ).toBeChecked();
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+		await editor.publishPost();
+		await page.reload();
+
+		// The category selection was persisted after the publish process.
+		await expect( selectedCategories ).toHaveCount( 1 );
+		await expect( newCategory ).toBeChecked();
+	} );
+
+	test( 'should be able to open the tags panel and create a new tag', async ( {
+		editor,
+		page,
+	} ) => {
+		// Open the Document -> Tags panel.
+		const panelToggle = page.getByRole( 'button', {
+			name: 'Tags',
+		} );
+
+		if (
+			( await panelToggle.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await panelToggle.click();
+		}
+
+		const tagName = 'tag-' + generateRandomNumber();
+		const tags = page.locator( '.components-form-token-field__token-text' );
+
+		await page
+			.getByRole( 'combobox', { name: 'Add New Tag' } )
+			.fill( tagName );
+		await page.keyboard.press( 'Enter' );
+
+		await expect( tags ).toHaveCount( 1 );
+		await expect( tags ).toContainText( tagName );
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+		await editor.publishPost();
+		await page.reload();
+
+		await expect( tags ).toHaveCount( 1 );
+		await expect( tags ).toContainText( tagName );
+	} );
+
+	// See: https://github.com/WordPress/gutenberg/pull/21693.
+	test( `should be able to create a new tag with ' on the name`, async ( {
+		editor,
+		page,
+	} ) => {
+		// Open the Document -> Tags panel.
+		const panelToggle = page.getByRole( 'button', {
+			name: 'Tags',
+		} );
+
+		if (
+			( await panelToggle.getAttribute( 'aria-expanded' ) ) === 'false'
+		) {
+			await panelToggle.click();
+		}
+
+		const tagName = "tag'-" + generateRandomNumber();
+		const tags = page.locator( '.components-form-token-field__token-text' );
+
+		await page
+			.getByRole( 'combobox', { name: 'Add New Tag' } )
+			.fill( tagName );
+		await page.keyboard.press( 'Enter' );
+
+		await expect( tags ).toHaveCount( 1 );
+		await expect( tags ).toContainText( tagName );
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.fill( 'Hello World' );
+		await editor.publishPost();
+		await page.reload();
+
+		await expect( tags ).toHaveCount( 1 );
+		await expect( tags ).toContainText( tagName );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/template-resolution.spec.js b/test/e2e/specs/editor/various/template-resolution.spec.js
new file mode 100644
index 00000000000000..13503ddaf23d5b
--- /dev/null
+++ b/test/e2e/specs/editor/various/template-resolution.spec.js
@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function updateSiteSettings( { pageId, requestUtils } ) {
+	return requestUtils.updateSiteSettings( {
+		show_on_front: 'page',
+		page_on_front: 0,
+		page_for_posts: pageId,
+	} );
+}
+
+test.describe( 'Template resolution', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPages(),
+			requestUtils.updateSiteSettings( {
+				show_on_front: 'posts',
+				page_on_front: 0,
+				page_for_posts: 0,
+			} ),
+		] );
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+	test( 'Site editor proper front page template resolution when we have only set posts page in settings', async ( {
+		page,
+		admin,
+		requestUtils,
+	} ) => {
+		const newPage = await requestUtils.createPage( {
+			title: 'Posts Page',
+			status: 'publish',
+		} );
+		await updateSiteSettings( { requestUtils, pageId: newPage.id } );
+		await admin.visitSiteEditor();
+		await expect( page.locator( '.edit-site-canvas-loader' ) ).toHaveCount(
+			0
+		);
+	} );
+	test.describe( '`page_for_posts` setting', () => {
+		test( 'Post editor proper template resolution', async ( {
+			page,
+			admin,
+			editor,
+			requestUtils,
+		} ) => {
+			const newPage = await requestUtils.createPage( {
+				title: 'Posts Page',
+				status: 'publish',
+			} );
+			await admin.editPost( newPage.id );
+			await editor.openDocumentSettingsSidebar();
+			await expect(
+				page.getByRole( 'button', { name: 'Template options' } )
+			).toHaveText( 'Single Entries' );
+			await updateSiteSettings( { requestUtils, pageId: newPage.id } );
+			await page.reload();
+			await expect(
+				page.getByRole( 'button', { name: 'Template options' } )
+			).toHaveText( 'Index' );
+		} );
+		test( 'Site editor proper template resolution', async ( {
+			page,
+			editor,
+			admin,
+			requestUtils,
+		} ) => {
+			const newPage = await requestUtils.createPage( {
+				title: 'Posts Page',
+				status: 'publish',
+			} );
+			await updateSiteSettings( { requestUtils, pageId: newPage.id } );
+			await admin.visitSiteEditor( {
+				postId: newPage.id,
+				postType: 'page',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+			await expect(
+				page.getByRole( 'button', { name: 'Template options' } )
+			).toHaveText( 'Index' );
+		} );
+	} );
+} );
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..2dc1e7c6b50515
--- /dev/null
+++ b/test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js
@@ -0,0 +1,205 @@
+/**
+ * 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' );
+
+		// Ensure the fixed toolbar option is off.
+		// See: https://github.com/WordPress/gutenberg/pull/54785.
+		await editor.setIsFixedToolbar( false );
+	} );
+
+	test( 'ensures base block toolbars use roving tabindex', async ( {
+		editor,
+		page,
+		pageUtils,
+		ToolbarRovingTabindexUtils,
+	} ) => {
+		// ensures paragraph block toolbar uses roving tabindex
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Paragraph' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Paragraph',
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup(
+			'Paragraph'
+		);
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Paragraph',
+			'Paragraph'
+		);
+
+		// test: ensures heading block toolbar uses roving tabindex
+		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'
+		);
+
+		// ensures list block toolbar uses roving tabindex
+		await editor.insertBlock( { name: 'core/list' } );
+		await page.keyboard.type( 'List' );
+		await ToolbarRovingTabindexUtils.focusBlockToolbar();
+		await page.click( `role=button[name="Select parent block: List"i]` );
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'List' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: List',
+			'List'
+		);
+
+		// ensures table block toolbar uses roving tabindex
+		await editor.insertBlock( { name: 'core/table' } );
+		await page.keyboard.press( 'ArrowLeft' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+
+		// Move focus to the first toolbar item.
+		await page.keyboard.press( 'Home' );
+		await ToolbarRovingTabindexUtils.expectLabelToHaveFocus( 'Table' );
+		await editor.canvas
+			.locator( `role=button[name="Create Table"i]` )
+			.click();
+		await pageUtils.pressKeys( 'Tab' );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Body cell text',
+			'Table'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Table' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Table',
+			'Table'
+		);
+
+		// ensures custom html block toolbar uses roving tabindex
+		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'
+		);
+
+		// ensures image block toolbar uses roving tabindex
+		// This also tests if shift + tab works as expected to move focus to the toolbar when the preceding block has a form element.
+		await editor.insertBlock( { name: 'core/image' } );
+		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+		await ToolbarRovingTabindexUtils.wrapCurrentBlockWithGroup( 'Image' );
+		await ToolbarRovingTabindexUtils.testGroupKeyboardNavigation(
+			'Block: Image',
+			'Image'
+		);
+	} );
+
+	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 pageUtils.pressKeys( 'Tab' );
+		await pageUtils.pressKeys( '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.pressKeys( '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.pressKeys( '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.pageUtils.pressKeys( 'Tab' );
+		await this.expectLabelToHaveFocus( currentBlockLabel );
+		await this.pageUtils.pressKeys( 'shift+Tab' );
+		await this.expectLabelToHaveFocus( 'Move up' );
+	}
+
+	async expectLabelToHaveFocus( label ) {
+		let ariaLabel = await this.page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement.contentDocument ?? document;
+			return 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( () => {
+				const { activeElement } =
+					document.activeElement.contentDocument ?? document;
+				return activeElement.getAttribute( 'aria-label' );
+			} );
+		}
+		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.pressKeys( 'shift+Tab' );
+		await this.expectLabelToHaveFocus( 'Select parent block: Group' );
+		await this.page.keyboard.press( 'ArrowRight' );
+		await this.expectLabelToHaveFocus( currentBlockTitle );
+	}
+}
diff --git a/test/e2e/specs/editor/various/typewriter.spec.js b/test/e2e/specs/editor/various/typewriter.spec.js
new file mode 100644
index 00000000000000..abf24cbfc298ec
--- /dev/null
+++ b/test/e2e/specs/editor/various/typewriter.spec.js
@@ -0,0 +1,303 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@playwright/test').Page} Page */
+
+// Allow the scroll position to be 1px off.
+const BUFFER = 1;
+
+test.use( {
+	typewriterUtils: async ( { page }, use ) => {
+		await use( new TypewriterUtils( { page } ) );
+	},
+} );
+
+test.describe( 'Typewriter', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should maintain caret position', async ( {
+		page,
+		typewriterUtils,
+	} ) => {
+		// Create test blocks.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		const initialPosition = await typewriterUtils.getCaretPosition();
+
+		// The page shouldn't be scrolled when it's being filled.
+		await page.keyboard.press( 'Enter' );
+
+		expect( await typewriterUtils.getCaretPosition() ).toBeGreaterThan(
+			initialPosition
+		);
+
+		// Create blocks until the typewriter effect kicks in.
+		while (
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					window.wp.dom.getScrollContainer( activeElement )
+						.scrollTop === 0
+				);
+			} )
+		) {
+			await page.keyboard.press( 'Enter' );
+		}
+
+		const newPosition = await typewriterUtils.getCaretPosition();
+
+		// Now the scroll position should be maintained.
+		await page.keyboard.press( 'Enter' );
+
+		expect(
+			await typewriterUtils.getDiff( newPosition )
+		).toBeLessThanOrEqual( BUFFER );
+
+		// Type until the text wraps.
+		while (
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					activeElement.clientHeight <=
+					parseInt(
+						window.getComputedStyle( activeElement ).lineHeight,
+						10
+					)
+				);
+			} )
+		) {
+			await page.keyboard.type( 'a' );
+		}
+
+		expect(
+			await typewriterUtils.getDiff( newPosition )
+		).toBeLessThanOrEqual( BUFFER );
+
+		// Pressing backspace will reposition the caret to the previous line.
+		// Scroll position should be adjusted again.
+		await page.keyboard.press( 'Backspace' );
+
+		expect(
+			await typewriterUtils.getDiff( newPosition )
+		).toBeLessThanOrEqual( BUFFER );
+
+		// Should reset scroll position to maintain.
+		await page.keyboard.press( 'ArrowUp' );
+
+		const positionAfterArrowUp = await typewriterUtils.getCaretPosition();
+
+		expect( positionAfterArrowUp ).toBeLessThanOrEqual( newPosition );
+
+		// Should be scrolled to new position.
+		await page.keyboard.press( 'Enter' );
+
+		expect(
+			await typewriterUtils.getDiff( positionAfterArrowUp )
+		).toBeLessThanOrEqual( BUFFER );
+	} );
+
+	test( 'should maintain caret position after scroll', async ( {
+		page,
+		typewriterUtils,
+	} ) => {
+		// Create first block.
+		await page.keyboard.press( 'Enter' );
+
+		// Create zero or more blocks until there is a scrollable container.
+		// No blocks should be created if there's already a scrollbar.
+		while (
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				const scrollContainer =
+					window.wp.dom.getScrollContainer( activeElement );
+				return (
+					scrollContainer.scrollHeight ===
+					scrollContainer.clientHeight
+				);
+			} )
+		) {
+			await page.keyboard.press( 'Enter' );
+		}
+
+		const scrollPosition = await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			return window.wp.dom.getScrollContainer( activeElement ).scrollTop;
+		} );
+
+		// Expect scrollbar to be at the top.
+		expect( scrollPosition ).toBe( 0 );
+
+		// Move the mouse to the scroll container, and scroll down
+		// a small amount to trigger the typewriter mode.
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			window.wp.dom.getScrollContainer( activeElement ).scrollTop += 2;
+		} );
+		// Wait for the caret rectangle to be recalculated.
+		await page.evaluate(
+			() => new Promise( window.requestAnimationFrame )
+		);
+
+		// After hitting Enter to create a new block, the caret screen
+		// coordinates should be the same.
+		const initialPosition = await typewriterUtils.getCaretPosition();
+		await page.keyboard.press( 'Enter' );
+		await page.waitForFunction( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			// Wait for the Typewriter to scroll down past the initial position.
+			return (
+				window.wp.dom.getScrollContainer( activeElement ).scrollTop > 2
+			);
+		} );
+
+		expect( await typewriterUtils.getDiff( initialPosition ) ).toBe( 0 );
+	} );
+
+	test( 'should maintain caret position after leaving last editable', async ( {
+		page,
+		typewriterUtils,
+	} ) => {
+		// Create test blocks.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		// Move to first block.
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		const initialPosition = await typewriterUtils.getCaretPosition();
+
+		// Should maintain scroll position.
+		expect(
+			await typewriterUtils.getDiff( initialPosition )
+		).toBeLessThanOrEqual( BUFFER );
+	} );
+
+	test( 'should scroll caret into view from the top', async ( {
+		page,
+		typewriterUtils,
+	} ) => {
+		// Create first block.
+		await page.keyboard.press( 'Enter' );
+
+		// Create blocks until there is a scrollable container.
+		while (
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return ! window.wp.dom.getScrollContainer( activeElement );
+			} )
+		) {
+			await page.keyboard.press( 'Enter' );
+		}
+
+		let count = 0;
+
+		// Create blocks until the typewriter effect kicks in, create at
+		// least 10 blocks to properly test it.
+		while (
+			( await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					window.wp.dom.getScrollContainer( activeElement )
+						.scrollTop === 0
+				);
+			} ) ) ||
+			count < 10
+		) {
+			await page.keyboard.press( 'Enter' );
+			count++;
+		}
+
+		// Scroll the active element to the very bottom of the scroll container,
+		// then scroll up, so the caret is partially hidden.
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			activeElement.scrollIntoView( false );
+			window.wp.dom.getScrollContainer( activeElement ).scrollTop -=
+				activeElement.offsetHeight + 10;
+		} );
+
+		const bottomPostition = await typewriterUtils.getCaretPosition();
+
+		// Should scroll the caret back into view (preserve browser behaviour).
+		await page.keyboard.type( 'a' );
+
+		const newBottomPosition = await typewriterUtils.getCaretPosition();
+
+		expect( newBottomPosition ).toBeLessThanOrEqual( bottomPostition );
+
+		// Should maintain new caret position.
+		await page.keyboard.press( 'Enter' );
+
+		expect(
+			await typewriterUtils.getDiff( newBottomPosition )
+		).toBeLessThanOrEqual( BUFFER );
+
+		await page.keyboard.press( 'Backspace' );
+
+		while ( count-- ) {
+			await page.keyboard.press( 'ArrowUp' );
+		}
+
+		// Scroll the active element to the very top of the scroll container,
+		// then scroll down, so the caret is partially hidden.
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			activeElement.scrollIntoView();
+			window.wp.dom.getScrollContainer( activeElement ).scrollTop +=
+				activeElement.offsetHeight + 10;
+		} );
+
+		const topPostition = await typewriterUtils.getCaretPosition();
+
+		// Should scroll the caret back into view (preserve browser behaviour).
+		await page.keyboard.type( 'a' );
+
+		const newTopPosition = await typewriterUtils.getCaretPosition();
+
+		expect( newTopPosition ).toBeGreaterThan( topPostition );
+
+		// Should maintain new caret position.
+		await page.keyboard.press( 'Enter' );
+
+		expect(
+			await typewriterUtils.getDiff( newTopPosition )
+		).toBeLessThanOrEqual( BUFFER );
+	} );
+} );
+
+class TypewriterUtils {
+	/** @type {Page} */
+	#page;
+
+	constructor( { page } ) {
+		this.#page = page;
+	}
+
+	async getCaretPosition() {
+		return await this.#page.evaluate( () => {
+			return window.wp.dom.computeCaretRect(
+				document.activeElement?.contentWindow ?? window
+			).y;
+		} );
+	}
+
+	async getDiff( caretPosition ) {
+		return Math.abs( ( await this.getCaretPosition() ) - caretPosition );
+	}
+}
diff --git a/test/e2e/specs/editor/various/undo.spec.js b/test/e2e/specs/editor/various/undo.spec.js
new file mode 100644
index 00000000000000..9df1c43b594746
--- /dev/null
+++ b/test/e2e/specs/editor/various/undo.spec.js
@@ -0,0 +1,533 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	undoUtils: async ( { page }, use ) => {
+		await use( new UndoUtils( { page } ) );
+	},
+} );
+
+test.describe( 'undo', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should undo typing after a pause', async ( {
+		editor,
+		page,
+		pageUtils,
+		undoUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'before pause' );
+		await editor.page.waitForTimeout( 1000 );
+		await page.keyboard.type( ' after pause' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before pause after pause' },
+			},
+		] );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before pause' },
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before pause'.length,
+			endOffset: 'before pause'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before pause' },
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before pause'.length,
+			endOffset: 'before pause'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'before pause after pause' },
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before pause after pause'.length,
+			endOffset: 'before pause after pause'.length,
+		} );
+	} );
+
+	test( 'should undo typing after non input change', async ( {
+		editor,
+		page,
+		pageUtils,
+		undoUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		await page.keyboard.type( 'before keyboard ' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await page.keyboard.type( 'after keyboard' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'before keyboard <strong>after keyboard</strong>',
+				},
+			},
+		] );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'before keyboard ',
+				},
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before keyboard '.length,
+			endOffset: 'before keyboard '.length,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'before keyboard ',
+				},
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before keyboard '.length,
+			endOffset: 'before keyboard '.length,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'before keyboard <strong>after keyboard</strong>',
+				},
+			},
+		] );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'before keyboard after keyboard'.length,
+			endOffset: 'before keyboard after keyboard'.length,
+		} );
+	} );
+
+	test( 'should undo bold', async ( { page, pageUtils, editor } ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'test' );
+		await editor.saveDraft();
+		await page.reload();
+		await editor.canvas.locator( '[data-type="core/paragraph"]' ).click();
+		await pageUtils.pressKeys( 'primary+a' );
+		await pageUtils.pressKeys( 'primary+b' );
+		await pageUtils.pressKeys( 'primary+z' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'test',
+				},
+			},
+		] );
+	} );
+
+	test( 'Should undo/redo to expected level intervals', async ( {
+		editor,
+		page,
+		pageUtils,
+		undoUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		const firstBlock = await editor.getEditedPostContent();
+
+		await page.keyboard.type( 'This' );
+
+		const firstText = await editor.getEditedPostContent();
+
+		await page.keyboard.press( 'Enter' );
+
+		const secondBlock = await editor.getEditedPostContent();
+
+		await page.keyboard.type( 'is' );
+
+		const secondText = await editor.getEditedPostContent();
+
+		await page.keyboard.press( 'Enter' );
+
+		const thirdBlock = await editor.getEditedPostContent();
+
+		await page.keyboard.type( 'test' );
+
+		const thirdText = await editor.getEditedPostContent();
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 3rd paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( thirdBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 2,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 3rd block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( secondText );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 1,
+			startOffset: 'is'.length,
+			endOffset: 'is'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 2nd paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( secondBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 1,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 2nd block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( firstText );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'This'.length,
+			endOffset: 'This'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 1st paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( firstBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+		} );
+
+		await pageUtils.pressKeys( 'primary+z' ); // Undo 1st block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		await expect.poll( undoUtils.getSelection ).toEqual( {} );
+		// After undoing every action, there should be no more undo history.
+		await expect(
+			page.locator( 'role=button[name="Undo"]' )
+		).toBeDisabled();
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 1st block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( firstBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 0,
+			endOffset: 0,
+		} );
+		// After redoing one change, the undo button should be enabled again.
+		await expect(
+			page.locator( 'role=button[name="Undo"]' )
+		).toBeEnabled();
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 1st paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( firstText );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 0,
+			startOffset: 'This'.length,
+			endOffset: 'This'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 2nd block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( secondBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 1,
+			startOffset: 0,
+			endOffset: 0,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 2nd paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( secondText );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 1,
+			startOffset: 'is'.length,
+			endOffset: 'is'.length,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 3rd block.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( thirdBlock );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 2,
+			startOffset: 0,
+			endOffset: 0,
+		} );
+
+		await pageUtils.pressKeys( 'primaryShift+z' ); // Redo 3rd paragraph text.
+
+		await expect.poll( editor.getEditedPostContent ).toBe( thirdText );
+		await expect.poll( undoUtils.getSelection ).toEqual( {
+			blockIndex: 2,
+			startOffset: 'test'.length,
+			endOffset: 'test'.length,
+		} );
+	} );
+
+	test( 'should undo for explicit persistence editing post', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		// Regression test: An issue had occurred where the creation of an
+		// explicit undo level would interfere with blocks values being synced
+		// correctly to the block editor.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/14950
+
+		// Issue is demonstrated from an edited post: create, save, and reload.
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( 'original' );
+		await editor.saveDraft();
+		await page.reload();
+
+		// Issue is demonstrated by forcing state merges (multiple inputs) on
+		// an existing text after a fresh reload.
+		await editor.canvas
+			.locator( '[data-type="core/paragraph"] >> nth=0' )
+			.click();
+		await page.keyboard.type( 'modified' );
+
+		// The issue is demonstrated after the one second delay to trigger the
+		// creation of an explicit undo persistence level.
+		await editor.page.waitForTimeout( 1000 );
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		// Assert against the _visible_ content. Since editor state with the
+		// regression present was accurate, it would produce the correct
+		// content. The issue had manifested in the form of what was shown to
+		// the user since the blocks state failed to sync to block editor.
+		const activeElementLocator = editor.canvas.locator(
+			'[data-type="core/paragraph"] >> nth=0'
+		);
+		await expect( activeElementLocator ).toHaveText( 'original' );
+	} );
+
+	test( 'should not create undo levels when saving', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await editor.saveDraft();
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+	} );
+
+	test( 'should not create undo levels when publishing', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( '1' );
+		await editor.publishPost();
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+	} );
+
+	test( 'should immediately create an undo level on typing', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+
+		await page.keyboard.type( '1' );
+		await editor.saveDraft();
+		await page.reload();
+
+		// Expect undo button to be disabled.
+		await expect(
+			page.locator( 'role=button[name="Undo"]' )
+		).toBeDisabled();
+		await editor.canvas.locator( '[data-type="core/paragraph"]' ).click();
+
+		await page.keyboard.type( '2' );
+
+		// Expect undo button to be enabled.
+		await expect(
+			page.locator( 'role=button[name="Undo"]' )
+		).toBeEnabled();
+
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '1',
+				},
+			},
+		] );
+	} );
+
+	test( 'should be able to undo and redo when transient changes have been made and we update/publish', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Typing consecutive characters in a `Paragraph` block updates the same
+		// block attribute as in the previous action and results in transient edits
+		// and skipping `undo` history steps.
+		const text = 'tonis';
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
+		await page.keyboard.type( text );
+		await editor.publishPost();
+		await pageUtils.pressKeys( 'primary+z' );
+		await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		await expect(
+			page.locator( 'role=button[name="Redo"]' )
+		).toBeEnabled();
+		await page.click( 'role=button[name="Redo"]' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'tonis',
+				},
+			},
+		] );
+	} );
+
+	// @see https://github.com/WordPress/gutenberg/issues/12075
+	test( 'should be able to undo and redo property cross property changes', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Add title' } )
+			.type( 'a' ); // First step.
+		await page.keyboard.press( 'Backspace' ); // Second step.
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click(); // third step.
+
+		// Title should be empty
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toHaveText( '' );
+
+		// First undo removes the block.
+		// Second undo restores the title.
+		await pageUtils.pressKeys( 'primary+z' );
+		await pageUtils.pressKeys( 'primary+z' );
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toHaveText( 'a' );
+
+		// Redoing the "backspace" should clear the title again.
+		await pageUtils.pressKeys( 'primaryShift+z' );
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toHaveText( '' );
+	} );
+} );
+
+class UndoUtils {
+	constructor( { page } ) {
+		this.page = page;
+
+		this.getSelection = this.getSelection.bind( this );
+	}
+
+	async getSelection() {
+		return await this.page.evaluate( () => {
+			const selectedBlockId = window.wp.data
+				.select( 'core/block-editor' )
+				.getSelectedBlockClientId();
+			const blockIndex = window.wp.data
+				.select( 'core/block-editor' )
+				.getBlockIndex( selectedBlockId );
+
+			if ( blockIndex === -1 ) {
+				return {};
+			}
+
+			return {
+				blockIndex,
+				startOffset: window.wp.data
+					.select( 'core/block-editor' )
+					.getSelectionStart().offset,
+				endOffset: window.wp.data
+					.select( 'core/block-editor' )
+					.getSelectionEnd().offset,
+			};
+		} );
+	}
+}
diff --git a/test/e2e/specs/editor/various/validate-multiple-use.spec.js b/test/e2e/specs/editor/various/validate-multiple-use.spec.js
new file mode 100644
index 00000000000000..4ab455d22cf299
--- /dev/null
+++ b/test/e2e/specs/editor/various/validate-multiple-use.spec.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Validate multiple use', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should display correct number of warning messages', async ( {
+		editor,
+		pageUtils,
+	} ) => {
+		// Insert a block with the `multiple` feature enabled, such as `core/more`
+		await editor.insertBlock( {
+			name: 'core/more',
+		} );
+
+		// Group the block
+		await pageUtils.pressKeys( 'primary+a' );
+		await editor.clickBlockOptionsMenuItem( 'Group' );
+
+		// Duplicate the block
+		await pageUtils.pressKeys( 'primary+a' );
+		await editor.clickBlockOptionsMenuItem( 'Duplicate' );
+
+		// Check if warning is visible
+		await expect(
+			editor.canvas.getByRole( 'button', {
+				name: 'Find original',
+			} )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
new file mode 100644
index 00000000000000..2892b4aea89e91
--- /dev/null
+++ b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Write/Design mode', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+	test.beforeEach( async ( { admin, page } ) => {
+		await page.addInitScript( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+	test( 'Should prevent selecting intermediary blocks', async ( {
+		editor,
+		page,
+	} ) => {
+		// Clear all content
+		await editor.setContent( '' );
+
+		// Insert a section with a nested block and an editable block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				style: {
+					spacing: {
+						padding: '20px',
+					},
+					color: {
+						background: 'darkgray',
+					},
+				},
+			},
+			innerBlocks: [
+				{
+					name: 'core/group',
+					attributes: {
+						style: {
+							spacing: {
+								padding: '20px',
+							},
+							color: {
+								background: 'lightgray',
+							},
+						},
+					},
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: {
+								content: 'Something',
+							},
+						},
+					],
+				},
+			],
+		} );
+
+		// Switch to write mode.
+		await editor.switchEditorTool( 'Write' );
+
+		const sectionBlock = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Group',
+			} )
+			.nth( 0 );
+		const sectionClientId = await sectionBlock.getAttribute( 'data-block' );
+		const nestedGroupBlock = sectionBlock.getByRole( 'document', {
+			name: 'Block: Group',
+		} );
+		const paragraph = nestedGroupBlock.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		const paragraphClientId = await paragraph.getAttribute( 'data-block' );
+
+		// We should not be able to select the intermediary group block.
+		// if we try to click on it (the padding area)
+		// The selection should land on the top level block.
+		const nestedGroupPosition = await nestedGroupBlock.boundingBox();
+		await page.mouse.click(
+			nestedGroupPosition.x + 5,
+			nestedGroupPosition.y + 5
+		);
+
+		const getSelectedBlock = async () =>
+			await page.evaluate( () =>
+				window.wp.data
+					.select( 'core/block-editor' )
+					.getSelectedBlockClientId()
+			);
+
+		expect( await getSelectedBlock() ).toEqual( sectionClientId );
+
+		// We should be able to select the paragraph block and write in it.
+		await paragraph.click();
+		await page.keyboard.type( ' something' );
+		expect( await getSelectedBlock() ).toEqual( paragraphClientId );
+		await expect( paragraph ).toHaveText( 'Something something' );
+
+		// Check that the inspector still shows the group block with the content panel.
+		await editor.openDocumentSettingsSidebar();
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await expect(
+			// Ideally we should not be using CSS selectors
+			// but in this case there's no easy role/label
+			// to retrieve the "selected block title"
+			editorSettings.locator( '.block-editor-block-card__title' )
+		).toHaveText( 'Group' );
+		await expect(
+			editorSettings.getByRole( 'button', { name: 'Content' } )
+		).toBeVisible();
+	} );
+
+	test( 'hides the blocks that cannot be interacted with in List View', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.setContent( '' );
+
+		// Insert a section with a nested block and an editable block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/group',
+					attributes: {
+						metadata: {
+							name: 'Non-content block',
+						},
+					},
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: {
+								content: 'Something',
+							},
+						},
+					],
+				},
+			],
+		} );
+
+		// Select the inner paragraph block so that List View is expanded.
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} )
+			.click();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		const nonContentBlock = listView.getByRole( 'link', {
+			name: 'Non-content block',
+		} );
+
+		await expect( nonContentBlock ).toBeVisible();
+
+		// Switch to write mode.
+		await editor.switchEditorTool( 'Write' );
+
+		await expect( nonContentBlock ).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 64f28c4f5a0931..4077d6dcc58200 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -4,14 +4,17 @@
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.use( {
-	writingFlowUtils: async ( { page }, use ) => {
-		await use( new WritingFlowUtils( { page } ) );
+	writingFlowUtils: async ( { page, editor }, use ) => {
+		await use( new WritingFlowUtils( { page, editor } ) );
 	},
 } );
 
-test.describe( 'Writing Flow', () => {
-	test.beforeEach( async ( { admin } ) => {
+test.describe( 'Writing Flow (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.createNewPost();
+		await expect(
+			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+		).toBeFocused();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
@@ -29,7 +32,7 @@ test.describe( 'Writing Flow', () => {
 		// See: https://github.com/WordPress/gutenberg/issues/18928
 		await writingFlowUtils.addDemoContent();
 
-		const activeElementLocator = page.locator( ':focus' );
+		const activeElementLocator = editor.canvas.locator( ':focus' );
 
 		// Arrow up into nested context focuses last text input.
 		await page.keyboard.press( 'ArrowUp' );
@@ -46,9 +49,11 @@ test.describe( 'Writing Flow', () => {
 			.poll( writingFlowUtils.getActiveBlockName )
 			.toBe( 'core/column' );
 		await page.keyboard.press( 'ArrowUp' );
-		const activeElementBlockType = await page.evaluate( () =>
-			document.activeElement.getAttribute( 'data-type' )
-		);
+		const activeElementBlockType = await editor.canvas
+			.locator( ':root' )
+			.evaluate( () =>
+				document.activeElement.getAttribute( 'data-type' )
+			);
 		expect( activeElementBlockType ).toBe( 'core/columns' );
 		await expect
 			.poll( writingFlowUtils.getActiveBlockName )
@@ -63,49 +68,42 @@ test.describe( 'Writing Flow', () => {
 		await expect( activeElementLocator ).toBeFocused();
 		await expect( activeElementLocator ).toHaveText( 'First paragraph' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	test( 'Should navigate between inner and root blocks in navigation mode', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await writingFlowUtils.addDemoContent();
-
-		// Switch to navigation mode.
-		await page.keyboard.press( 'Escape' );
-		// Arrow up to Columns block.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow right into Column block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow down to reach second Column block.
-		await page.keyboard.press( 'ArrowDown' );
-		// Arrow right again into Paragraph block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-		// Arrow left back to Column block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow left back to Columns block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow up to first paragraph.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'First paragraph' },
+			},
+			{
+				name: 'core/columns',
+				attributes: {},
+				innerBlocks: [
+					{
+						name: 'core/column',
+						attributes: {},
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: '1st col' },
+							},
+						],
+					},
+					{
+						name: 'core/column',
+						attributes: {},
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: '2nd col' },
+							},
+						],
+					},
+				],
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second paragraph' },
+			},
+		] );
 	} );
 
 	test( 'should navigate around inline boundaries', async ( {
@@ -122,13 +120,13 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( 'Third' );
 
 		// Navigate to second paragraph.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
 
 		// Bold second paragraph text.
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 
 		// Arrow left from selected bold should collapse to before the inline
 		// boundary. Arrow once more to traverse into first paragraph.
@@ -138,18 +136,18 @@ test.describe( 'Writing Flow', () => {
 
 		// Arrow right from end of first should traverse to second, *BEFORE*
 		// the bolded text. Another press should move within inline boundary.
-		await pageUtils.pressKeyTimes( 'ArrowRight', 2 );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 2 } );
 		await page.keyboard.type( 'Inside' );
 
 		// Arrow left from end of beginning of inline boundary should move to
 		// the outside of the inline boundary.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 6 } );
 		await page.keyboard.press( 'ArrowLeft' ); // Separate for emphasis.
 		await page.keyboard.type( 'Before' );
 
 		// Likewise, test at the end of the inline boundary for same effect.
 		await page.keyboard.press( 'ArrowRight' ); // Move inside
-		await pageUtils.pressKeyTimes( 'ArrowRight', 12 );
+		await pageUtils.pressKeys( 'ArrowRight', { times: 12 } );
 		await page.keyboard.type( 'Inside' );
 		await page.keyboard.press( 'ArrowRight' );
 
@@ -167,7 +165,22 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.type( 'Before' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'FirstAfter' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Before<strong>InsideSecondInside</strong>After',
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'BeforeThird' },
+			},
+		] );
 	} );
 
 	test( 'should navigate around nested inline boundaries', async ( {
@@ -176,18 +189,18 @@ test.describe( 'Writing Flow', () => {
 		pageUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 		await page.keyboard.type( '1 2' );
 		await page.keyboard.down( 'Shift' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'i' );
+		await pageUtils.pressKeys( 'primary+i' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.down( 'Shift' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'i' );
+		await pageUtils.pressKeys( 'primary+i' );
 		await page.keyboard.press( 'ArrowLeft' );
 
 		await expect.poll( editor.getEditedPostContent )
@@ -228,7 +241,7 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
 <p>a<br></p>
@@ -242,7 +255,7 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( 'b' );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
@@ -258,7 +271,7 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'ab' );
 		await page.keyboard.press( 'ArrowLeft' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
 <p>a<br>b</p>
@@ -273,7 +286,7 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'ArrowLeft' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
 <p><br>a</p>
@@ -286,7 +299,7 @@ test.describe( 'Writing Flow', () => {
 		pageUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
 <p><br></p>
@@ -301,7 +314,7 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Backspace' );
 		await expect.poll( editor.getEditedPostContent ).toBe( `<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->` );
@@ -317,25 +330,25 @@ test.describe( 'Writing Flow', () => {
 		await editor.insertBlock( { name: 'core/paragraph' } );
 		await page.keyboard.type( 'abc' ); // Need content to remove placeholder label.
 		await editor.selectBlocks(
-			page.locator( 'role=document[name="Block: Shortcode"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' )
 		);
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
 		await expect(
-			page.locator( 'role=document[name="Block: Shortcode"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' )
 		).toHaveClass( /is-selected/ );
 
 		// Should remain in title upon modifier + ArrowDown:
-		await pageUtils.pressKeyWithModifier( 'primary', 'ArrowDown' );
+		await pageUtils.pressKeys( 'primary+ArrowDown' );
 		await expect(
-			page.locator( 'role=document[name="Block: Shortcode"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Shortcode"i]' )
 		).toHaveClass( /is-selected/ );
 
 		// Should navigate to the next block.
 		await page.keyboard.press( 'ArrowDown' );
 		await expect(
-			page.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveClass( /is-selected/ );
 	} );
 
@@ -346,7 +359,7 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1 2 3' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', ' 3'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: ' 3'.length } );
 		await page.keyboard.press( 'Backspace' );
 
 		await expect.poll( editor.getEditedPostContent )
@@ -369,11 +382,10 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'alpha beta gamma' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', ' gamma'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: ' gamma'.length } );
 
-		await pageUtils.pressKeyWithModifier(
-			process.platform === 'darwin' ? 'alt' : 'primary',
-			'Backspace'
+		await pageUtils.pressKeys(
+			`${ process.platform === 'darwin' ? 'Alt' : 'primary' }+Backspace`
 		);
 
 		await expect.poll( editor.getEditedPostContent )
@@ -396,9 +408,9 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'alpha beta gamma' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', ' gamma'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: ' gamma'.length } );
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 'beta'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 'beta'.length } );
 		await page.keyboard.up( 'Shift' );
 
 		await page.keyboard.press( 'Backspace' );
@@ -422,10 +434,15 @@ test.describe( 'Writing Flow', () => {
 		pageUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyTimes( 'Enter', 10 );
+		await pageUtils.pressKeys( 'Enter', { times: 10 } );
 
 		// Check that none of the paragraph blocks have <br> in them.
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject(
+			Array( 11 ).fill( {
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			} )
+		);
 	} );
 
 	test( 'should navigate empty paragraphs', async ( { editor, page } ) => {
@@ -439,7 +456,20 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.type( '3' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '3' },
+			},
+		] );
 	} );
 
 	test( 'should navigate contenteditable with padding', async ( {
@@ -448,18 +478,27 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
-		await page.evaluate( () => {
+		await editor.canvas.locator( ':root' ).evaluate( () => {
 			document.activeElement.style.paddingTop = '100px';
 		} );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.type( '1' );
-		await page.evaluate( () => {
+		await editor.canvas.locator( ':root' ).evaluate( () => {
 			document.activeElement.style.paddingBottom = '100px';
 		} );
 		await page.keyboard.press( 'ArrowDown' );
 		await page.keyboard.type( '2' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
 	} );
 
 	test( 'should navigate contenteditable with normal line height', async ( {
@@ -468,13 +507,22 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
-		await page.evaluate( () => {
+		await editor.canvas.locator( ':root' ).evaluate( () => {
 			document.activeElement.style.lineHeight = 'normal';
 		} );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.type( '1' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+		] );
 	} );
 
 	test( 'should not prematurely multi-select', async ( {
@@ -486,14 +534,54 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '><<' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( '<<<' );
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', '<<\n<<<'.length );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: '<<\n<<<'.length } );
 		await page.keyboard.up( 'Shift' );
 		await page.keyboard.press( 'Backspace' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '>' },
+			},
+		] );
+	} );
+
+	test( 'should remove first empty paragraph on Backspace', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		// Ensure setup is correct.
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
+
+		await page.keyboard.press( 'Backspace' );
+
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '2' },
+			},
+		] );
 	} );
 
 	test( 'should merge paragraphs', async ( { editor, page } ) => {
@@ -578,8 +666,8 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '3' );
-		await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
-		await pageUtils.pressKeyTimes( 'Delete', 2 );
+		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
+		await pageUtils.pressKeys( 'Delete', { times: 2 } );
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
 <p>1</p>
@@ -597,7 +685,7 @@ test.describe( 'Writing Flow', () => {
 <!-- /wp:paragraph -->` );
 	} );
 
-	test( 'should preserve horizontal position when navigating vertically between blocks', async ( {
+	test( 'should preserve horizontal position when navigating vertically between blocks (-webkit)', async ( {
 		editor,
 		page,
 	} ) => {
@@ -629,7 +717,7 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
-		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await pageUtils.pressKeys( 'shift+Enter' );
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'ArrowUp' );
@@ -651,7 +739,7 @@ test.describe( 'Writing Flow', () => {
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
-		await page.evaluate( () => {
+		await editor.canvas.locator( ':root' ).evaluate( () => {
 			document.activeElement.style.paddingLeft = '100px';
 		} );
 		await page.keyboard.press( 'Enter' );
@@ -659,7 +747,20 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.type( '1' );
 
-		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: { content: '1' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+			{
+				name: 'core/paragraph',
+				attributes: { content: '' },
+			},
+		] );
 	} );
 
 	test( 'should extend selection into paragraph for list with longer last item', async ( {
@@ -675,10 +776,10 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( 'cd' );
 
 		// Selects part of the first list item, although invisible.
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 		// Extends selection into the first paragraph
-		await pageUtils.pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await pageUtils.pressKeys( 'shift+ArrowUp' );
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 
 		// Mixed selection, so all content will be removed.
@@ -697,8 +798,8 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( '2' );
 		await page.keyboard.press( 'ArrowUp' );
 
-		const paragraphBlock = page
-			.locator( 'role=document[name="Paragraph block"i]' )
+		const paragraphBlock = editor.canvas
+			.locator( 'role=document[name="Block: Paragraph"i]' )
 			.first();
 		const paragraphRect = await paragraphBlock.boundingBox();
 		const x = paragraphRect.x + ( 2 * paragraphRect.width ) / 3;
@@ -731,6 +832,7 @@ test.describe( 'Writing Flow', () => {
 	test( 'should not have a dead zone above an aligned block', async ( {
 		editor,
 		page,
+		pageUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
@@ -745,7 +847,7 @@ test.describe( 'Writing Flow', () => {
 		await wideButton.click();
 
 		// Focus the block content
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 
 		// Select the previous block.
 		await page.keyboard.press( 'ArrowUp' );
@@ -761,8 +863,8 @@ test.describe( 'Writing Flow', () => {
 <figure class="wp-block-image alignwide"><img alt=""/></figure>
 <!-- /wp:image -->` );
 
-		const paragraphBlock = page.locator(
-			'role=document[name="Paragraph block"i]'
+		const paragraphBlock = editor.canvas.locator(
+			'role=document[name="Block: Paragraph"i]'
 		);
 
 		// Find a point outside the paragraph between the blocks where it's
@@ -784,24 +886,25 @@ test.describe( 'Writing Flow', () => {
 		await page.mouse.click( x, lowerInserterY );
 
 		await expect(
-			page.locator( 'role=document[name="Block: Image"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Image"i]' )
 		).toHaveClass( /is-selected/ );
 	} );
 
 	test( 'should only consider the content as one tab stop', async ( {
 		editor,
 		page,
+		pageUtils,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '/table' );
 		await page.keyboard.press( 'Enter' );
 		// Tab to the "Create table" button.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 		// Create the table.
 		await page.keyboard.press( 'Space' );
 		await expect(
-			page.locator( 'role=document[name="Block: Table"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Table"i]' )
 		).toBeVisible();
 		// Navigate to the second cell.
 		await page.keyboard.press( 'ArrowRight' );
@@ -809,34 +912,10 @@ test.describe( 'Writing Flow', () => {
 		// Confirm correct setup.
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td></td><td>2</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td></td><td>2</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
 <!-- /wp:table -->` );
 	} );
 
-	test( 'should unselect all blocks when hitting double escape', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Random Paragraph' );
-
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// First escape enters navigaiton mode.
-		await page.keyboard.press( 'Escape' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// Second escape unselects the blocks.
-		await page.keyboard.press( 'Escape' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( undefined );
-	} );
-
 	// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
 	test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
 		editor,
@@ -866,7 +945,7 @@ test.describe( 'Writing Flow', () => {
 		await page.mouse.up();
 
 		await expect(
-			page.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveClass( /is-selected/ );
 	} );
 
@@ -881,12 +960,12 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.type( 'second' );
 
 		// Multi select both paragraphs.
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 2 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } );
 		await page.keyboard.down( 'Shift' );
-		await pageUtils.pressKeyTimes( 'ArrowLeft', 2 );
+		await pageUtils.pressKeys( 'ArrowLeft', { times: 2 } );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.up( 'Shift' );
-		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await pageUtils.pressKeys( 'primary+b' );
 
 		await expect.poll( editor.getEditedPostContent )
 			.toBe( `<!-- wp:paragraph -->
@@ -898,16 +977,17 @@ test.describe( 'Writing Flow', () => {
 <!-- /wp:paragraph -->` );
 	} );
 
-	test( 'should move to the start of the first line on ArrowUp', async ( {
+	test( 'should move to the start of the first line on ArrowUp (-firefox)', async ( {
 		page,
+		editor,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
 
 		async function getHeight() {
-			return await page.evaluate(
-				() => document.activeElement.offsetHeight
-			);
+			return await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.offsetHeight );
 		}
 
 		const height = await getHeight();
@@ -927,20 +1007,21 @@ test.describe( 'Writing Flow', () => {
 
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
-			page.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveText( /^\.a+$/ );
 	} );
 
-	test( 'should vertically move the caret from corner to corner', async ( {
+	test( 'should vertically move the caret from corner to corner (-webkit)', async ( {
 		page,
+		editor,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
 
 		async function getHeight() {
-			return await page.evaluate(
-				() => document.activeElement.offsetHeight
-			);
+			return await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.offsetHeight );
 		}
 
 		const height = await getHeight();
@@ -960,21 +1041,22 @@ test.describe( 'Writing Flow', () => {
 
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
-			page.locator( 'role=document[name="Paragraph block"i]' )
+			editor.canvas.locator( 'role=document[name="Block: Paragraph"i]' )
 		).toHaveText( /^a+\.a$/ );
 	} );
 
 	test( 'should vertically move the caret when pressing Alt', async ( {
 		page,
 		pageUtils,
+		editor,
 	} ) => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'a' );
 
 		async function getHeight() {
-			return await page.evaluate(
-				() => document.activeElement.offsetHeight
-			);
+			return await editor.canvas
+				.locator( ':root' )
+				.evaluate( () => document.activeElement.offsetHeight );
 		}
 
 		const height = await getHeight();
@@ -989,19 +1071,50 @@ test.describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'b' );
 		await page.keyboard.press( 'ArrowLeft' );
-		await pageUtils.pressKeyWithModifier( 'alt', 'ArrowUp' );
+		await pageUtils.pressKeys( 'alt+ArrowUp' );
 		await page.keyboard.type( '.' );
 
 		// Expect the "." to be added at the start of the paragraph
 		await expect(
-			page.locator( 'role=document[name="Paragraph block"i] >> nth = 0' )
+			editor.canvas.locator(
+				'role=document[name="Block: Paragraph"i] >> nth = 0'
+			)
 		).toHaveText( /^.a+$/ );
 	} );
+
+	test( 'should select synced pattern', async ( { page, editor } ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'synced' );
+
+		await editor.clickBlockOptionsMenuItem( 'Create pattern' );
+		const createPatternDialog = editor.page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'test' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect(
+			editor.canvas.locator(
+				'[data-type="core/block"] [data-type="core/paragraph"]'
+			)
+		).toBeVisible();
+
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		await page.keyboard.press( 'ArrowUp' );
+
+		await expect(
+			editor.canvas.locator( '[data-type="core/block"]' )
+		).toBeFocused();
+	} );
 } );
 
 class WritingFlowUtils {
-	constructor( { page } ) {
+	constructor( { page, editor } ) {
 		this.page = page;
+		this.editor = editor;
 
 		this.getActiveBlockName = this.getActiveBlockName.bind( this );
 	}
@@ -1020,28 +1133,32 @@ class WritingFlowUtils {
 		await this.page.keyboard.press( 'Enter' );
 		await this.page.keyboard.type( '/columns' );
 		await this.page.keyboard.press( 'Enter' );
-		await this.page.click(
-			'role=button[name="Two columns; equal split"i]'
-		);
-		await this.page.click( 'role=button[name="Add block"i]' );
+		await this.editor.canvas
+			.locator( 'role=button[name="Two columns; equal split"i]' )
+			.click();
+		await this.editor.canvas
+			.locator( '.is-selected >> role=button[name="Add block"i]' )
+			.click();
 		await this.page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);
 		await this.page.keyboard.type( '1st col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "1st" instead of "First" here.
 
-		await this.page.focus(
-			'role=document[name="Block: Column (2 of 2)"i]'
-		);
-		await this.page.click( 'role=button[name="Add block"i]' );
+		await this.editor.canvas
+			.locator( 'role=document[name="Block: Column (2 of 2)"i]' )
+			.focus();
+		await this.editor.canvas
+			.locator( 'role=button[name="Add block"i]' )
+			.click();
 		await this.page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);
 		await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
-
-		await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
-		await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
+		await this.editor.showBlockToolbar();
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the column block.
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
 		await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 		await this.page.keyboard.type( 'Second paragraph' );
 	}
diff --git a/test/e2e/specs/interactivity/async-actions.spec.ts b/test/e2e/specs/interactivity/async-actions.spec.ts
new file mode 100644
index 00000000000000..55e44d6cd4a085
--- /dev/null
+++ b/test/e2e/specs/interactivity/async-actions.spec.ts
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'async actions', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/generator-scope' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/generator-scope' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Promise generator callbacks should restore scope on resolve and reject', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveValue( '' );
+
+		await page.getByTestId( 'resolve' ).click();
+		await expect( resultInput ).toHaveValue( 'ok' );
+
+		await page.getByTestId( 'reject' ).click();
+		await expect( resultInput ).toHaveValue( 'Error: 😘' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/deferred-store.spec.ts b/test/e2e/specs/interactivity/deferred-store.spec.ts
new file mode 100644
index 00000000000000..0ddbcb0a60d2f4
--- /dev/null
+++ b/test/e2e/specs/interactivity/deferred-store.spec.ts
@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'deferred store', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/deferred-store' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/deferred-store' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Ensure that a store can be subscribed to before it is initialized', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveText( '' );
+		await page.evaluate( () => {
+			window.dispatchEvent( new Event( '_test_proceed_' ) );
+		} );
+		await expect( resultInput ).toHaveText( 'Hello, world!' );
+	} );
+
+	test( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result-getter' );
+		await expect( resultInput ).toHaveText( '' );
+		await page.evaluate( () => {
+			window.dispatchEvent( new Event( '_test_proceed_' ) );
+		} );
+		await expect( resultInput ).toHaveText( 'Hello, world!' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-bind.spec.ts b/test/e2e/specs/interactivity/directive-bind.spec.ts
new file mode 100644
index 00000000000000..11902018e0753a
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-bind.spec.ts
@@ -0,0 +1,271 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-bind', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-bind' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-bind' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'add missing href at hydration', async ( { page } ) => {
+		const el = page.getByTestId( 'add missing href at hydration' );
+		await expect( el ).toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'change href at hydration', async ( { page } ) => {
+		const el = page.getByTestId( 'change href at hydration' );
+		await expect( el ).toHaveAttribute( 'href', '/some-url' );
+	} );
+
+	test( 'update missing href at hydration', async ( { page } ) => {
+		const el = page.getByTestId( 'add missing href at hydration' );
+		await expect( el ).toHaveAttribute( 'href', '/some-url' );
+		await page.getByTestId( 'toggle' ).click();
+		await expect( el ).toHaveAttribute( 'href', '/some-other-url' );
+	} );
+
+	test( 'add missing checked at hydration', async ( { page } ) => {
+		const el = page.getByTestId( 'add missing checked at hydration' );
+		await expect( el ).toBeChecked();
+	} );
+
+	test( 'remove existing checked at hydration', async ( { page } ) => {
+		const el = page.getByTestId( 'remove existing checked at hydration' );
+		await expect( el ).not.toBeChecked();
+	} );
+
+	test( 'update existing checked', async ( { page } ) => {
+		const el = page.getByTestId( 'add missing checked at hydration' );
+		const el2 = page.getByTestId( 'remove existing checked at hydration' );
+		let checked = await el.evaluate(
+			( element: HTMLInputElement ) => element.checked
+		);
+		let checked2 = await el2.evaluate(
+			( element: HTMLInputElement ) => element.checked
+		);
+		expect( checked ).toBe( true );
+		expect( checked2 ).toBe( false );
+		await page.getByTestId( 'toggle' ).click();
+		checked = await el.evaluate(
+			( element: HTMLInputElement ) => element.checked
+		);
+		checked2 = await el2.evaluate(
+			( element: HTMLInputElement ) => element.checked
+		);
+		expect( checked ).toBe( false );
+		expect( checked2 ).toBe( true );
+	} );
+
+	test( 'nested binds', async ( { page } ) => {
+		const el = page.getByTestId( 'nested binds - 1' );
+		await expect( el ).toHaveAttribute( 'href', '/some-url' );
+		const el2 = page.getByTestId( 'nested binds - 2' );
+		await expect( el2 ).toHaveAttribute( 'width', '1' );
+		await page.getByTestId( 'toggle' ).click();
+		await expect( el ).toHaveAttribute( 'href', '/some-other-url' );
+		await expect( el2 ).toHaveAttribute( 'width', '2' );
+	} );
+
+	test( 'check enumerated attributes with true/false values', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'check enumerated attributes with true/false exist and have a string value'
+		);
+		await expect( el ).toHaveAttribute( 'hidden', '' );
+		await expect( el ).toHaveAttribute( 'aria-hidden', 'true' );
+		await expect( el ).toHaveAttribute( 'aria-expanded', 'false' );
+		await expect( el ).toHaveAttribute( 'data-some-value', 'false' );
+		await page.getByTestId( 'toggle' ).click();
+		await expect( el ).not.toHaveAttribute( 'hidden', '' );
+		await expect( el ).toHaveAttribute( 'aria-hidden', 'false' );
+		await expect( el ).toHaveAttribute( 'aria-expanded', 'true' );
+		await expect( el ).toHaveAttribute( 'data-some-value', 'true' );
+	} );
+
+	test.describe( 'attribute hydration', () => {
+		/**
+		 * Data structure to define a hydration test case.
+		 */
+		type MatrixEntry = {
+			/**
+			 * Test ID of the element (the `data-testid` attr).
+			 */
+			testid: string;
+			/**
+			 *  Name of the attribute being hydrated.
+			 */
+			name: string;
+			/**
+			 * Array of different values to test.
+			 */
+			values: Record<
+				/**
+				 * The type of value we are hydrating. E.g., false is `false`,
+				 * undef is `undefined`, emptyString is `''`, etc.
+				 */
+				string,
+				[
+					/**
+					 * Value that the attribute should contain after hydration.
+					 * If the attribute is missing, this value is `null`.
+					 */
+					attributeValue: any,
+					/**
+					 * Value that the HTMLElement instance property should
+					 * contain after hydration.
+					 */
+					entityPropValue: any,
+				]
+			>;
+		};
+
+		const matrix: MatrixEntry[] = [
+			{
+				testid: 'image',
+				name: 'width',
+				values: {
+					false: [ null, 5 ],
+					true: [ 'true', 5 ],
+					null: [ null, 5 ],
+					undef: [ null, 5 ],
+					emptyString: [ '', 5 ],
+					anyString: [ 'any', 5 ],
+					number: [ '10', 10 ],
+				},
+			},
+			{
+				testid: 'input',
+				name: 'name',
+				values: {
+					false: [ 'false', 'false' ],
+					true: [ 'true', 'true' ],
+					null: [ '', '' ],
+					undef: [ '', '' ],
+					emptyString: [ '', '' ],
+					anyString: [ 'any', 'any' ],
+					number: [ '10', '10' ],
+				},
+			},
+			{
+				testid: 'input',
+				name: 'value',
+				values: {
+					false: [ null, 'false' ],
+					true: [ null, 'true' ],
+					null: [ null, '' ],
+					undef: [ null, '' ],
+					emptyString: [ null, '' ],
+					anyString: [ null, 'any' ],
+					number: [ null, '10' ],
+				},
+			},
+			{
+				testid: 'input',
+				name: 'disabled',
+				values: {
+					false: [ null, false ],
+					true: [ '', true ],
+					null: [ null, false ],
+					undef: [ null, false ],
+					emptyString: [ null, false ],
+					anyString: [ '', true ],
+					number: [ '', true ],
+				},
+			},
+			{
+				testid: 'input',
+				name: 'aria-disabled',
+				values: {
+					false: [ 'false', undefined ],
+					true: [ 'true', undefined ],
+					null: [ null, undefined ],
+					undef: [ null, undefined ],
+					emptyString: [ '', undefined ],
+					anyString: [ 'any', undefined ],
+					number: [ '10', undefined ],
+				},
+			},
+		];
+
+		for ( const { testid, name, values } of matrix ) {
+			test( `${ name } is correctly hydrated for different values`, async ( {
+				page,
+			} ) => {
+				for ( const type in values ) {
+					const [ attrValue, propValue ] = values[ type ];
+
+					const container = page.getByTestId( `hydrating ${ type }` );
+					const el = container.getByTestId( testid );
+					const toggle = container.getByTestId( 'toggle value' );
+
+					// Ensure hydration has happened.
+					const checkbox = page.getByTestId(
+						'add missing checked at hydration'
+					);
+					await expect( checkbox ).toBeChecked();
+
+					const hydratedAttr = await el.getAttribute( name );
+					const hydratedProp = await el.evaluate(
+						( node, propName ) => ( node as any )[ propName ],
+						name
+					);
+					expect( [ type, hydratedAttr ] ).toEqual( [
+						type,
+						attrValue,
+					] );
+					expect( [ type, hydratedProp ] ).toEqual( [
+						type,
+						propValue,
+					] );
+
+					// Only check the rendered value if the new value is not
+					// `undefined` and the attibute is neither `value` nor
+					// `disabled` because Preact doesn't update the attribute
+					// for those cases.
+					// See https://github.com/preactjs/preact/blob/099c38c6ef92055428afbc116d18a6b9e0c2ea2c/src/diff/index.js#L471-L494
+					if (
+						type === 'undef' &&
+						( name === 'value' || name === 'undefined' )
+					) {
+						return;
+					}
+
+					await toggle.click( { clickCount: 2 } );
+
+					// Ensure values have been updated after toggling.
+					await expect( toggle ).toHaveAttribute(
+						'data-toggle-count',
+						'2'
+					);
+
+					// Values should be the same as before.
+					const renderedAttr = await el.getAttribute( name );
+					const renderedProp = await el.evaluate(
+						( node, propName ) => ( node as any )[ propName ],
+						name
+					);
+					expect( [ type, renderedAttr ] ).toEqual( [
+						type,
+						attrValue,
+					] );
+					expect( [ type, renderedProp ] ).toEqual( [
+						type,
+						propValue,
+					] );
+				}
+			} );
+		}
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-class.spec.ts b/test/e2e/specs/interactivity/directive-class.spec.ts
new file mode 100644
index 00000000000000..96b725568767ae
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-class.spec.ts
@@ -0,0 +1,121 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-class', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-class' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-class' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'remove class if callback returns falsy value', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'remove class if callback returns falsy value'
+		);
+		await expect( el ).toHaveClass( 'bar' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( 'foo bar' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( 'bar' );
+	} );
+
+	test( 'add class if callback returns truthy value', async ( { page } ) => {
+		const el = page.getByTestId(
+			'add class if callback returns truthy value'
+		);
+		await expect( el ).toHaveClass( 'foo bar' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo bar' );
+	} );
+
+	test( 'handles multiple classes and callbacks', async ( { page } ) => {
+		const el = page.getByTestId( 'handles multiple classes and callbacks' );
+		await expect( el ).toHaveClass( 'bar baz' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( '' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'bar baz' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( 'foo bar baz' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo' );
+	} );
+
+	test( 'handles class names that are contained inside other class names', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'handles class names that are contained inside other class names'
+		);
+		await expect( el ).toHaveClass( 'foo-bar' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( 'foo foo-bar' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo' );
+	} );
+
+	test( 'can toggle class in the middle', async ( { page } ) => {
+		const el = page.getByTestId( 'can toggle class in the middle' );
+		await expect( el ).toHaveClass( 'foo bar baz' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo baz' );
+		await page.getByTestId( 'toggle trueValue' ).click();
+		await expect( el ).toHaveClass( 'foo bar baz' );
+	} );
+
+	test( 'can toggle class when class attribute is missing', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'can toggle class when class attribute is missing'
+		);
+		await expect( el ).toHaveClass( '' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( 'foo' );
+		await page.getByTestId( 'toggle falseValue' ).click();
+		await expect( el ).toHaveClass( '' );
+	} );
+
+	test( 'can use context values', async ( { page } ) => {
+		const el = page.getByTestId( 'can use context values' );
+		await expect( el ).toHaveClass( '' );
+		await page.getByTestId( 'toggle context false value' ).click();
+		await expect( el ).toHaveClass( 'foo' );
+		await page.getByTestId( 'toggle context false value' ).click();
+		await expect( el ).toHaveClass( '' );
+	} );
+
+	test( 'can use BEM notation classes', async ( { page } ) => {
+		const el = page.getByTestId( 'can use BEM notation classes' );
+		await expect( el ).toHaveClass( 'block__element--modifier' );
+	} );
+
+	test( 'can use classes with several dashes', async ( { page } ) => {
+		const el = page.getByTestId( 'can use classes with several dashes' );
+		await expect( el ).toHaveClass( 'main-bg----color' );
+	} );
+
+	test( 'can use "default" as a class name', async ( { page } ) => {
+		const el = page.getByTestId( 'class name default' );
+		const btn = page.getByTestId( 'toggle class name default' );
+		await expect( el ).not.toHaveClass( 'default' );
+		await btn.click();
+		await expect( el ).toHaveClass( 'default' );
+		await btn.click();
+		await expect( el ).not.toHaveClass( 'default' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-context.spec.ts b/test/e2e/specs/interactivity/directive-context.spec.ts
new file mode 100644
index 00000000000000..0a27fe258d5a8d
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-context.spec.ts
@@ -0,0 +1,398 @@
+/**
+ * External dependencies
+ */
+import type { Locator } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+const parseContent = async ( loc: Locator ) =>
+	JSON.parse( ( await loc.textContent() ) || '' );
+
+test.describe( 'data-wp-context', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-context' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-context' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'is correctly initialized', async ( { page } ) => {
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext ).toMatchObject( {
+			prop1: 'parent',
+			prop2: 'parent',
+			obj: { prop4: 'parent', prop5: 'parent' },
+			array: [ 1, 2, 3 ],
+		} );
+	} );
+
+	test( 'is correctly extended (shallow)', async ( { page } ) => {
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext ).toMatchObject( {
+			prop1: 'parent',
+			prop2: 'child',
+			prop3: 'child',
+			obj: { prop5: 'child', prop6: 'child' },
+			array: [ 4, 5, 6 ],
+		} );
+	} );
+
+	test( "changes in inherited properties are reflected and don't leak down (child)", async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'child prop1' ).click();
+		await page.getByTestId( 'child obj.prop4' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.prop1 ).toBe( 'modifiedFromChild' );
+		expect( childContext.obj.prop4 ).toBe( 'modifiedFromChild' );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.prop1 ).toBe( 'modifiedFromChild' );
+		expect( parentContext.obj.prop4 ).toBe( 'parent' );
+	} );
+
+	test( "changes in inherited properties are reflected and don't leak up (parent)", async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'parent prop1' ).click();
+		await page.getByTestId( 'parent obj.prop4' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.prop1 ).toBe( 'modifiedFromParent' );
+		expect( childContext.obj.prop4 ).toBeUndefined();
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.prop1 ).toBe( 'modifiedFromParent' );
+		expect( parentContext.obj.prop4 ).toBe( 'modifiedFromParent' );
+	} );
+
+	test( 'changes in shadowed properties do not leak (child)', async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'child prop2' ).click();
+		await page.getByTestId( 'child obj.prop5' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.prop2 ).toBe( 'modifiedFromChild' );
+		expect( childContext.obj.prop5 ).toBe( 'modifiedFromChild' );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.prop2 ).toBe( 'parent' );
+		expect( parentContext.obj.prop5 ).toBe( 'parent' );
+	} );
+
+	test( 'changes in shadowed properties do not leak (parent)', async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'parent prop2' ).click();
+		await page.getByTestId( 'parent obj.prop5' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.prop2 ).toBe( 'child' );
+		expect( childContext.obj.prop5 ).toBe( 'child' );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.prop2 ).toBe( 'modifiedFromParent' );
+		expect( parentContext.obj.prop5 ).toBe( 'modifiedFromParent' );
+	} );
+
+	test( 'new inherited properties update child contexts', async ( {
+		page,
+	} ) => {
+		const childContextBefore = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+		expect( childContextBefore.new ).toBeUndefined();
+
+		await page.getByTestId( 'parent new' ).click();
+
+		const childContextAfter = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+		expect( childContextAfter.new ).toBe( 'modifiedFromParent' );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+		expect( parentContext.new ).toBe( 'modifiedFromParent' );
+	} );
+
+	test( 'Array properties are shadowed', async ( { page } ) => {
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( parentContext.array ).toMatchObject( [ 1, 2, 3 ] );
+		expect( childContext.array ).toMatchObject( [ 4, 5, 6 ] );
+	} );
+
+	test( "overwritten objects don't inherit values (shallow)", async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'parent replace' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.obj.prop4 ).toBeUndefined();
+		expect( childContext.obj.prop5 ).toBe( 'child' );
+		expect( childContext.obj.prop6 ).toBe( 'child' );
+		expect( childContext.obj.overwritten ).toBeUndefined();
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.obj.prop4 ).toBeUndefined();
+		expect( parentContext.obj.prop5 ).toBeUndefined();
+		expect( parentContext.obj.prop6 ).toBeUndefined();
+		expect( parentContext.obj.overwritten ).toBe( true );
+	} );
+
+	test( 'overwritten objects do not inherit values', async ( { page } ) => {
+		await page.getByTestId( 'child replace' ).click();
+
+		const childContext = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContext.obj.prop4 ).toBeUndefined();
+		expect( childContext.obj.prop5 ).toBeUndefined();
+		expect( childContext.obj.prop6 ).toBeUndefined();
+		expect( childContext.obj.overwritten ).toBe( true );
+
+		const parentContext = await parseContent(
+			page.getByTestId( 'parent context' )
+		);
+
+		expect( parentContext.obj.prop4 ).toBe( 'parent' );
+		expect( parentContext.obj.prop5 ).toBe( 'parent' );
+		expect( parentContext.obj.prop6 ).toBeUndefined();
+		expect( parentContext.obj.overwritten ).toBeUndefined();
+	} );
+
+	test( 'can be accessed in other directives on the same element', async ( {
+		page,
+	} ) => {
+		const element = page.getByTestId( 'context & other directives' );
+		await expect( element ).toHaveText( 'Text 1' );
+		await expect( element ).toHaveAttribute( 'value', 'Text 1' );
+		await element.click();
+		await expect( element ).toHaveText( 'Text 2' );
+		await expect( element ).toHaveAttribute( 'value', 'Text 2' );
+		await element.click();
+		await expect( element ).toHaveText( 'Text 1' );
+		await expect( element ).toHaveAttribute( 'value', 'Text 1' );
+	} );
+
+	test( 'should preserve values on navigation', async ( { page } ) => {
+		const element = page.getByTestId( 'navigation text' );
+		await expect( element ).toHaveText( 'first page' );
+		await page.getByTestId( 'toggle text' ).click();
+		await expect( element ).toHaveText( 'changed dynamically' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'changed dynamically' );
+	} );
+
+	test( 'should preserve the previous context values', async ( { page } ) => {
+		const element = page.getByTestId( 'navigation new text' );
+		await expect( element ).toHaveText( '' );
+		await page.getByTestId( 'add new text' ).click();
+		await expect( element ).toHaveText( 'some new text' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'some new text' );
+	} );
+
+	test( 'should preserve values when navigating back or forward', async ( {
+		page,
+	} ) => {
+		const element = page.getByTestId( 'navigation text' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( element ).toHaveText( 'first page' );
+		await page.goBack();
+		await expect( element ).toHaveText( 'first page' );
+		await page.goForward();
+		await expect( element ).toHaveText( 'first page' );
+	} );
+
+	test( 'should inherit values on navigation', async ( { page } ) => {
+		const text = page.getByTestId( 'navigation inherited text' );
+		const text2 = page.getByTestId( 'navigation inherited text2' );
+		await expect( text ).toHaveText( 'first page' );
+		await expect( text2 ).toBeEmpty();
+		await page.getByTestId( 'toggle text' ).click();
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await page.getByTestId( 'add text2' ).click();
+		await expect( text2 ).toHaveText( 'some new text' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
+		await page.goBack();
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
+		await page.goForward();
+		await expect( text ).toHaveText( 'changed dynamically' );
+		await expect( text2 ).toHaveText( 'some new text' );
+	} );
+
+	test( 'should maintain the same context reference on async actions', async ( {
+		page,
+	} ) => {
+		const element = page.getByTestId( 'navigation new text' );
+		await expect( element ).toHaveText( '' );
+		await page.getByTestId( 'async navigate' ).click();
+		await expect( element ).toHaveText( 'changed from async action' );
+	} );
+
+	test( 'should bail out if the context is not a default directive', async ( {
+		page,
+	} ) => {
+		/*
+		 * This test is to ensure that the context directive is only applied to the
+		 * default directive and not to any other directive.
+		 */
+		const defaultElement = page.getByTestId( 'default suffix context' );
+		await expect( defaultElement ).toHaveText( 'default' );
+		const element = page.getByTestId( 'non-default suffix context' );
+		await expect( element ).toHaveText( '' );
+	} );
+
+	test( 'references to objects are kept', async ( { page } ) => {
+		const selected = page.getByTestId( 'selected' );
+		const select1 = page.getByTestId( 'select 1' );
+		const select2 = page.getByTestId( 'select 2' );
+
+		await expect( selected ).toBeEmpty();
+
+		await select1.click();
+		await expect( selected ).toHaveText( 'Text 1' );
+
+		await select2.click();
+		await expect( selected ).toHaveText( 'Text 2' );
+	} );
+
+	test( 'should not subscribe to parent context props if those also exist in child', async ( {
+		page,
+	} ) => {
+		const counterParent = page.getByTestId( 'counter parent' );
+		const counterChild = page.getByTestId( 'counter child' );
+		const changes = page.getByTestId( 'counter changes' );
+
+		await expect( counterParent ).toHaveText( '0' );
+		await expect( counterChild ).toHaveText( '0' );
+		// The first render counts, so the changes counter starts at 1.
+		await expect( changes ).toHaveText( '1' );
+
+		await counterParent.click();
+		await expect( counterParent ).toHaveText( '1' );
+		await expect( counterChild ).toHaveText( '0' );
+		await expect( changes ).toHaveText( '1' );
+
+		await counterChild.click();
+		await expect( counterParent ).toHaveText( '1' );
+		await expect( counterChild ).toHaveText( '1' );
+		await expect( changes ).toHaveText( '2' );
+	} );
+
+	test( 'references to the same context object should be preserved', async ( {
+		page,
+	} ) => {
+		const isProxyPreserved = page.getByTestId( 'is proxy preserved' );
+		await expect( isProxyPreserved ).toHaveText( 'true' );
+	} );
+
+	test( 'references to copied context objects should be preserved', async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'child copy obj' ).click();
+		const isProxyPreservedOnCopy = page.getByTestId(
+			'is proxy preserved on copy'
+		);
+		await expect( isProxyPreservedOnCopy ).toHaveText( 'true' );
+	} );
+
+	test( 'objects referenced from the context inherit properties where they are originally defined ', async ( {
+		page,
+	} ) => {
+		await page.getByTestId( 'child copy obj' ).click();
+
+		const childContextBefore = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContextBefore.obj2.prop4 ).toBeUndefined();
+		expect( childContextBefore.obj2.prop5 ).toBe( 'child' );
+		expect( childContextBefore.obj2.prop6 ).toBe( 'child' );
+
+		await page.getByTestId( 'parent replace' ).click();
+
+		const childContextAfter = await parseContent(
+			page.getByTestId( 'child context' )
+		);
+
+		expect( childContextAfter.obj2.prop4 ).toBeUndefined();
+		expect( childContextAfter.obj2.prop5 ).toBe( 'child' );
+		expect( childContextAfter.obj2.prop6 ).toBe( 'child' );
+		expect( childContextAfter.obj2.overwritten ).toBeUndefined();
+	} );
+
+	test( 'properties from other namespaces defined in a parent context are inherited', async ( {
+		page,
+	} ) => {
+		const childProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'child' );
+
+		const parentProp = page
+			.getByTestId( 'inheritance from other namespaces' )
+			.getByTestId( 'parent' );
+
+		await expect( childProp ).toHaveText( 'fromChildNs' );
+		await expect( parentProp ).toHaveText( 'fromParentNs' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-each.spec.ts b/test/e2e/specs/interactivity/directive-each.spec.ts
new file mode 100644
index 00000000000000..511b38e7ddbb8b
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-each.spec.ts
@@ -0,0 +1,503 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-each', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-each' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-each' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should use `item` as the defaul item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'letters' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'A', 'B', 'C' ] );
+	} );
+
+	test( 'should use the specified item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [
+			'avocado',
+			'banana',
+			'cherimoya',
+		] );
+	} );
+
+	test( 'should convert from kebab-case to camelCase the specified item name in the context', async ( {
+		page,
+	} ) => {
+		const elements = page
+			.getByTestId( 'letters-kebab-case' )
+			.getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'A', 'B', 'C' ] );
+	} );
+
+	test.describe( 'without `wp-each-key`', () => {
+		test.beforeEach( async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			// These tags are included to check that the elements are not unmounted
+			// and mounted again. If an element remounts, its tag should be missing.
+			await elements.evaluateAll( ( refs ) =>
+				refs.forEach( ( ref, index ) => {
+					if ( ref instanceof HTMLElement ) {
+						ref.dataset.tag = `${ index }`;
+					}
+				} )
+			);
+		} );
+
+		test( 'should preserve elements on deletion', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			// An item is removed when clicked.
+			await elements.first().click();
+
+			await expect( elements ).toHaveText( [ 'banana', 'cherimoya' ] );
+			await expect( elements.getByText( 'avocado' ) ).toBeHidden();
+
+			// Get the tags. They should not have disappeared.
+			const [ banana, cherimoya ] = await elements.all();
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on reordering', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'rotate' ).click();
+
+			await expect( elements ).toHaveText( [
+				'cherimoya',
+				'avocado',
+				'banana',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ cherimoya, avocado, banana ] = await elements.all();
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+			await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+		} );
+
+		test( 'should preserve elements on addition', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'add' ).click();
+
+			await expect( elements ).toHaveText( [
+				'ananas',
+				'avocado',
+				'banana',
+				'cherimoya',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ ananas, avocado, banana, cherimoya ] = await elements.all();
+			await expect( ananas ).not.toHaveAttribute( 'data-tag' );
+			await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on replacement', async ( { page } ) => {
+			const elements = page.getByTestId( 'fruits' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'fruits' ).getByTestId( 'replace' ).click();
+
+			await expect( elements ).toHaveText( [
+				'ananas',
+				'banana',
+				'cherimoya',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ ananas, banana, cherimoya ] = await elements.all();
+			await expect( ananas ).not.toHaveAttribute( 'data-tag' );
+			await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+			await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		} );
+	} );
+
+	test.describe( 'with `wp-each-key`', () => {
+		test.beforeEach( async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			// These tags are included to check that the elements are not unmounted
+			// and mounted again. If an element remounts, its tag should be missing.
+			await elements.evaluateAll( ( refs ) =>
+				refs.forEach( ( ref, index ) => {
+					if ( ref instanceof HTMLElement ) {
+						ref.dataset.tag = `${ index }`;
+					}
+				} )
+			);
+		} );
+
+		test( 'should preserve elements on deletion', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await expect( elements ).toHaveText( [
+				'A Game of Thrones',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// An item is removed when clicked.
+			await elements.first().click();
+
+			await expect( elements ).toHaveText( [
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared.
+			const [ acok, asos ] = await elements.all();
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on reordering', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'rotate' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Storm of Swords',
+				'A Game of Thrones',
+				'A Clash of Kings',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ asos, agot, acok ] = await elements.all();
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+		} );
+
+		test( 'should preserve elements on addition', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'add' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Feast for Crows',
+				'A Game of Thrones',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ affc, agot, acok, asos ] = await elements.all();
+			await expect( affc ).not.toHaveAttribute( 'data-tag' );
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on replacement', async ( { page } ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'replace' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A Feast for Crows',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed,
+			// except for the newly created element.
+			const [ affc, acok, asos ] = await elements.all();
+			await expect( affc ).not.toHaveAttribute( 'data-tag' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+
+		test( 'should preserve elements on modification', async ( {
+			page,
+		} ) => {
+			const elements = page.getByTestId( 'books' ).getByTestId( 'item' );
+
+			await page.getByTestId( 'books' ).getByTestId( 'modify' ).click();
+
+			await expect( elements ).toHaveText( [
+				'A GAME OF THRONES',
+				'A Clash of Kings',
+				'A Storm of Swords',
+			] );
+
+			// Get the tags. They should not have disappeared or changed.
+			const [ agot, acok, asos ] = await elements.all();
+			await expect( agot ).toHaveAttribute( 'data-tag', '0' );
+			await expect( acok ).toHaveAttribute( 'data-tag', '1' );
+			await expect( asos ).toHaveAttribute( 'data-tag', '2' );
+		} );
+	} );
+
+	test( 'should respect elements after', async ( { page } ) => {
+		const elements = page.getByTestId( 'numbers' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ '1', '2', '3', '4' ] );
+		await page.getByTestId( 'numbers' ).getByTestId( 'shift' ).click();
+		await expect( elements ).toHaveText( [ '2', '3', '4' ] );
+		await page
+			.getByTestId( 'numbers' )
+			.getByTestId( 'unshift' )
+			.click( { clickCount: 2 } );
+		await expect( elements ).toHaveText( [ '0', '1', '2', '3', '4' ] );
+	} );
+
+	test( 'should support initial empty lists', async ( { page } ) => {
+		const elements = page.getByTestId( 'empty' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [ 'item X' ] );
+		await page
+			.getByTestId( 'empty' )
+			.getByTestId( 'add' )
+			.click( { clickCount: 2 } );
+
+		await expect( elements ).toHaveText( [ 'item 0', 'item 1', 'item X' ] );
+	} );
+
+	test( 'should support multiple siblings inside the template', async ( {
+		page,
+	} ) => {
+		const elements = page.getByTestId( 'siblings' ).getByTestId( 'item' );
+		await expect( elements ).toHaveText( [
+			'two',
+			'2',
+			'three',
+			'3',
+			'four',
+			'4',
+		] );
+		await page.getByTestId( 'siblings' ).getByTestId( 'unshift' ).click();
+		await expect( elements ).toHaveText( [
+			'one',
+			'1',
+			'two',
+			'2',
+			'three',
+			'3',
+			'four',
+			'4',
+		] );
+	} );
+
+	test( 'should work on navigation', async ( { page } ) => {
+		const elements = page
+			.getByTestId( 'navigation-updated list' )
+			.getByTestId( 'item' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		await elements.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await expect( elements ).toHaveText( [ 'b', 'c', 'd' ] );
+
+		await page
+			.getByTestId( 'navigation-updated list' )
+			.getByTestId( 'navigate' )
+			.click();
+
+		await expect( elements ).toHaveText( [ 'a', 'b', 'c', 'd' ] );
+
+		// Get the tags. They should not have disappeared or changed,
+		// except for the newly created element.
+		const [ alpha, beta, gamma, delta ] = await elements.all();
+		await expect( alpha ).not.toHaveAttribute( 'data-tag' );
+		await expect( beta ).toHaveAttribute( 'data-tag', '0' );
+		await expect( gamma ).toHaveAttribute( 'data-tag', '1' );
+		await expect( delta ).toHaveAttribute( 'data-tag', '2' );
+	} );
+
+	test( 'should work with nested lists', async ( { page } ) => {
+		const mainElement = page.getByTestId( 'nested' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		const listItems = mainElement.getByRole( 'listitem' );
+		await listItems.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		const animals = mainElement.getByTestId( 'animal' );
+
+		{
+			// Ensure it hydrates correctly.
+			const [ dog, cat ] = await animals.all();
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'sphynx',
+				'siamese',
+			] );
+		}
+
+		await mainElement.getByTestId( 'add animal' ).click();
+
+		{
+			// Ensure it works when the top list is modified.
+			const [ rat, dog, cat ] = await animals.all();
+			await expect( rat.getByTestId( 'name' ) ).toHaveText( 'Rat' );
+			await expect( rat.getByRole( 'listitem' ) ).toHaveText( [
+				'dumbo',
+				'rex',
+			] );
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'sphynx',
+				'siamese',
+			] );
+			await expect( rat ).not.toHaveAttribute( 'data-tag' );
+			const [ d1, d2 ] = await dog.getByRole( 'listitem' ).all();
+			await expect( dog ).toHaveAttribute( 'data-tag', '0' );
+			await expect( d1 ).toHaveAttribute( 'data-tag', '1' );
+			await expect( d2 ).toHaveAttribute( 'data-tag', '2' );
+			const [ c1, c2 ] = await cat.getByRole( 'listitem' ).all();
+			await expect( cat ).toHaveAttribute( 'data-tag', '3' );
+			await expect( c1 ).toHaveAttribute( 'data-tag', '4' );
+			await expect( c2 ).toHaveAttribute( 'data-tag', '5' );
+		}
+
+		// Reset tags so the added elements have one.
+		await listItems.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await mainElement.getByTestId( 'add breeds' ).click();
+
+		{
+			// Ensure it works when the top list is modified.
+			const [ rat, dog, cat ] = await animals.all();
+			await expect( rat.getByTestId( 'name' ) ).toHaveText( 'Rat' );
+			await expect( rat.getByRole( 'listitem' ) ).toHaveText( [
+				'satin',
+				'dumbo',
+				'rex',
+			] );
+			await expect( dog.getByTestId( 'name' ) ).toHaveText( 'Dog' );
+			await expect( dog.getByRole( 'listitem' ) ).toHaveText( [
+				'german shepherd',
+				'chihuahua',
+				'rottweiler',
+			] );
+			await expect( cat.getByTestId( 'name' ) ).toHaveText( 'Cat' );
+			await expect( cat.getByRole( 'listitem' ) ).toHaveText( [
+				'maine coon',
+				'sphynx',
+				'siamese',
+			] );
+			const [ r1, r2, r3 ] = await rat.getByRole( 'listitem' ).all();
+			await expect( rat ).toHaveAttribute( 'data-tag', '0' );
+			await expect( r1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( r2 ).toHaveAttribute( 'data-tag', '1' );
+			await expect( r3 ).toHaveAttribute( 'data-tag', '2' );
+			const [ d1, d2, d3 ] = await dog.getByRole( 'listitem' ).all();
+			await expect( dog ).toHaveAttribute( 'data-tag', '3' );
+			await expect( d1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( d2 ).toHaveAttribute( 'data-tag', '4' );
+			await expect( d3 ).toHaveAttribute( 'data-tag', '5' );
+			const [ c1, c2, c3 ] = await cat.getByRole( 'listitem' ).all();
+			await expect( cat ).toHaveAttribute( 'data-tag', '6' );
+			await expect( c1 ).not.toHaveAttribute( 'data-tag' );
+			await expect( c2 ).toHaveAttribute( 'data-tag', '7' );
+			await expect( c3 ).toHaveAttribute( 'data-tag', '8' );
+		}
+	} );
+
+	test( 'should do nothing when used on non-template elements', async ( {
+		page,
+	} ) => {
+		const elements = page
+			.getByTestId( 'invalid tag' )
+			.getByTestId( 'item' );
+
+		await expect( elements ).toHaveCount( 1 );
+		await expect( elements ).toBeEmpty();
+	} );
+
+	test( 'should work with derived state as keys', async ( { page } ) => {
+		const elements = page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'item' );
+
+		// These tags are included to check that the elements are not unmounted
+		// and mounted again. If an element remounts, its tag should be missing.
+		await elements.evaluateAll( ( refs ) =>
+			refs.forEach( ( ref, index ) => {
+				if ( ref instanceof HTMLElement ) {
+					ref.dataset.tag = `${ index }`;
+				}
+			} )
+		);
+
+		await page
+			.getByTestId( 'derived state' )
+			.getByTestId( 'rotate' )
+			.click();
+
+		await expect( elements ).toHaveText( [
+			'cherimoya',
+			'avocado',
+			'banana',
+		] );
+
+		// Get the tags. They should not have disappeared or changed.
+		const [ cherimoya, avocado, banana ] = await elements.all();
+		await expect( cherimoya ).toHaveAttribute( 'data-tag', '2' );
+		await expect( avocado ).toHaveAttribute( 'data-tag', '0' );
+		await expect( banana ).toHaveAttribute( 'data-tag', '1' );
+	} );
+
+	test( 'directives inside elements with `wp-each-child` should not run', async ( {
+		page,
+	} ) => {
+		const element = page
+			.getByTestId( 'elements with directives' )
+			.getByTestId( 'item' );
+		const callbackRunCount = page
+			.getByTestId( 'elements with directives' )
+			.getByTestId( 'callbackRunCount' );
+		await expect( element ).toHaveText( 'beta' );
+		await expect( callbackRunCount ).toHaveText( '1' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-init.spec.ts b/test/e2e/specs/interactivity/directive-init.spec.ts
new file mode 100644
index 00000000000000..e18341a48fa3f4
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-init.spec.ts
@@ -0,0 +1,76 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-init', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-init' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-init' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should run when the block renders', async ( { page } ) => {
+		const el = page.getByTestId( 'single init' );
+		await expect( el.getByTestId( 'isReady' ) ).toHaveText( 'true' );
+		await expect( el.getByTestId( 'calls' ) ).toHaveText( '1' );
+	} );
+
+	test( 'should not run again if accessed signals change', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'single init' );
+		await expect( el.getByTestId( 'isReady' ) ).toHaveText( 'true' );
+		await el.getByRole( 'button' ).click();
+		await expect( el.getByTestId( 'isReady' ) ).toHaveText( 'false' );
+		await expect( el.getByTestId( 'calls' ) ).toHaveText( '1' );
+	} );
+
+	test( 'should run multiple inits if defined', async ( { page } ) => {
+		const el = page.getByTestId( 'multiple inits' );
+		await expect( el.getByTestId( 'isReady' ) ).toHaveText( 'true,true' );
+		await expect( el.getByTestId( 'calls' ) ).toHaveText( '1,1' );
+	} );
+
+	test( 'should run the init callback when the element is unmounted', async ( {
+		page,
+	} ) => {
+		const container = page.getByTestId( 'init show' );
+		const show = container.getByTestId( 'show' );
+		const toggle = container.getByTestId( 'toggle' );
+		const isMounted = container.getByTestId( 'isMounted' );
+
+		await expect( show ).toHaveText( 'Initially visible' );
+		await expect( isMounted ).toHaveText( 'true' );
+
+		await toggle.click();
+
+		await expect( show ).toBeHidden();
+		await expect( isMounted ).toHaveText( 'false' );
+	} );
+
+	test( 'should run init when the element is mounted', async ( { page } ) => {
+		const container = page.getByTestId( 'init show' );
+		const show = container.getByTestId( 'show' );
+		const toggle = container.getByTestId( 'toggle' );
+		const isMounted = container.getByTestId( 'isMounted' );
+
+		await toggle.click();
+
+		await expect( show ).toBeHidden();
+		await expect( isMounted ).toHaveText( 'false' );
+
+		await toggle.click();
+
+		await expect( show ).toHaveText( 'Initially visible' );
+		await expect( isMounted ).toHaveText( 'true' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-key.spec.ts b/test/e2e/specs/interactivity/directive-key.spec.ts
new file mode 100644
index 00000000000000..b780100b92a6dc
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-key.spec.ts
@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-key', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-key' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-key' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should keep the elements when adding items to the start of the array', async ( {
+		page,
+	} ) => {
+		// Add a number to the node so we can check later that it is still there.
+		await page
+			.getByTestId( 'first-item' )
+			.evaluate( ( n ) => ( ( n as any )._id = 123 ) );
+		await page.getByTestId( 'navigate' ).click();
+		const id = await page
+			.getByTestId( 'second-item' )
+			.evaluate( ( n ) => ( n as any )._id );
+		expect( id ).toBe( 123 );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-on-document.spec.ts b/test/e2e/specs/interactivity/directive-on-document.spec.ts
new file mode 100644
index 00000000000000..62d122ee2359e8
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-on-document.spec.ts
@@ -0,0 +1,89 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-on-document', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-on-document' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-on-document' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'the event listener is attached when the element is added', async ( {
+		page,
+	} ) => {
+		const counter = page.getByTestId( 'counter' );
+		const visibilityButton = page.getByTestId( 'visibility' );
+
+		// Initial value.
+		await expect( counter ).toHaveText( '0' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( counter ).toHaveText( '1' );
+
+		// Remove the element.
+		await visibilityButton.click();
+
+		// Make sure the event listener is not attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'no' } )
+			.waitFor();
+
+		// This keyboard press should not increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+
+		// Add the element back.
+		await visibilityButton.click();
+
+		// The counter should have the same value as before.
+		await expect( counter ).toHaveText( '1' );
+
+		// Make sure the event listener is re-attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( counter ).toHaveText( '2' );
+	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const keydownHandler = page.getByTestId( 'keydownHandler' );
+		const keydownSecondHandler = page.getByTestId( 'keydownSecondHandler' );
+
+		// Initial value.
+		await expect( keydownHandler ).toHaveText( 'no' );
+		await expect( keydownSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( keydownHandler ).toHaveText( 'yes' );
+		await expect( keydownSecondHandler ).toHaveText( 'yes' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-on-window.spec.ts b/test/e2e/specs/interactivity/directive-on-window.spec.ts
new file mode 100644
index 00000000000000..ed090839c49ade
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-on-window.spec.ts
@@ -0,0 +1,89 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-on-window', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-on-window' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-on-window' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'the event listener is attached when the element is added', async ( {
+		page,
+	} ) => {
+		const counter = page.getByTestId( 'counter' );
+		const visibilityButton = page.getByTestId( 'visibility' );
+
+		// Initial value.
+		await expect( counter ).toHaveText( '0' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// Change the viewport size.
+		await page.setViewportSize( { width: 600, height: 600 } );
+		await expect( counter ).toHaveText( '1' );
+
+		// Remove the element.
+		await visibilityButton.click();
+
+		// Make sure the event listener is not attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'no' } )
+			.waitFor();
+
+		// This resize should not increase the counter.
+		await page.setViewportSize( { width: 300, height: 600 } );
+
+		// Add the element back.
+		await visibilityButton.click();
+
+		// The counter should have the same value as before.
+		await expect( counter ).toHaveText( '1' );
+
+		// Make sure the event listener is re-attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This resize should increase the counter.
+		await page.setViewportSize( { width: 200, height: 600 } );
+		await expect( counter ).toHaveText( '2' );
+	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const resizeHandler = page.getByTestId( 'resizeHandler' );
+		const resizeSecondHandler = page.getByTestId( 'resizeSecondHandler' );
+
+		// Initial value.
+		await expect( resizeHandler ).toHaveText( 'no' );
+		await expect( resizeSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.setViewportSize( { width: 600, height: 600 } );
+		await expect( resizeHandler ).toHaveText( 'yes' );
+		await expect( resizeSecondHandler ).toHaveText( 'yes' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-on.spec.ts b/test/e2e/specs/interactivity/directive-on.spec.ts
new file mode 100644
index 00000000000000..886f74335e7aee
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-on.spec.ts
@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-on', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-on' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-on' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'callbacks should run whenever the specified event is dispatched', async ( {
+		page,
+	} ) => {
+		const counter = page.getByTestId( 'counter' );
+		await page
+			.getByTestId( 'button' )
+			.click( { clickCount: 3, delay: 100 } );
+		await expect( counter ).toHaveText( '3' );
+	} );
+
+	test( 'callbacks should receive the dispatched event', async ( {
+		page,
+	} ) => {
+		const text = page.getByTestId( 'text' );
+		await page.getByTestId( 'input' ).fill( 'hello!' );
+		await expect( text ).toHaveText( 'hello!' );
+	} );
+
+	test( 'callbacks should be able to access the context', async ( {
+		page,
+	} ) => {
+		const option = page.getByTestId( 'option' );
+		await page.getByTestId( 'select' ).selectOption( 'dog' );
+		await expect( option ).toHaveText( 'dog' );
+	} );
+
+	test( 'should work with custom events', async ( { page } ) => {
+		const counter = page.getByTestId( 'custom events counter' );
+		await page
+			.getByTestId( 'custom events button' )
+			.click( { clickCount: 3, delay: 100 } );
+		await expect( counter ).toHaveText( '3' );
+	} );
+
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const button = page.getByTestId( 'multiple handlers button' );
+		const isOpen = page.getByTestId( 'multiple handlers isOpen' );
+		const clicked = page.getByTestId( 'multiple handlers clicked' );
+		const clickCount = page.getByTestId( 'multiple handlers clickCount' );
+
+		await expect( clicked ).toHaveText( 'false' );
+		await expect( clickCount ).toHaveText( '0' );
+		await expect( isOpen ).toHaveText( 'true' );
+
+		await button.click();
+
+		await expect( clicked ).toHaveText( 'true' );
+		await expect( clickCount ).toHaveText( '1' );
+		await expect( isOpen ).toHaveText( 'false' );
+
+		await button.click();
+
+		await expect( clicked ).toHaveText( 'true' );
+		await expect( clickCount ).toHaveText( '2' );
+		await expect( isOpen ).toHaveText( 'true' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-priorities.spec.ts b/test/e2e/specs/interactivity/directive-priorities.spec.ts
new file mode 100644
index 00000000000000..56745bfad0c433
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-priorities.spec.ts
@@ -0,0 +1,101 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Directives (w/ priority)', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-priorities' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-priorities' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should run in priority order', async ( { page } ) => {
+		const executionOrder = page.getByTestId( 'execution order' );
+		await expect( executionOrder ).toHaveText(
+			'context, attribute, text, children'
+		);
+	} );
+
+	test( 'should wrap those with less priority', async ( { page } ) => {
+		// Check that attribute value is correctly received from Provider.
+		const element = page.getByTestId( 'test directives' );
+		await expect( element ).toHaveAttribute(
+			'data-attribute',
+			'from context'
+		);
+
+		// Check that text value is correctly received from Provider, and text
+		// wrapped with an element with `data-testid=text`.
+		const text = element.getByTestId( 'text' );
+		await expect( text ).toHaveText( 'from context' );
+	} );
+
+	test( 'should propagate element modifications top-down', async ( {
+		page,
+	} ) => {
+		const executionOrder = page.getByTestId( 'execution order' );
+		const element = page.getByTestId( 'test directives' );
+		const text = element.getByTestId( 'text' );
+
+		// Get buttons.
+		const updateAttribute = element.getByRole( 'button', {
+			name: 'Update attribute',
+		} );
+		const updateText = element.getByRole( 'button', {
+			name: 'Update text',
+		} );
+
+		// Modify `attribute` inside context. This triggers a re-render for the
+		// component that wraps the `attribute` directive, evaluating it again.
+		// Nested components are re-rendered as well, so their directives are
+		// also re-evaluated (note how `text` and `children` have run).
+		await updateAttribute.click();
+		await expect( element ).toHaveAttribute( 'data-attribute', 'updated' );
+		await expect( executionOrder ).toHaveText(
+			[
+				'context, attribute, text, children',
+				'attribute, text, children',
+			].join( ', ' )
+		);
+
+		// Modify `text` inside context. This triggers a re-render of the
+		// component that wraps the `text` directive. In this case, only
+		// `children` run as well, right after `text`.
+		await updateText.click();
+		await expect( element ).toHaveAttribute( 'data-attribute', 'updated' );
+		await expect( text ).toHaveText( 'updated' );
+		await expect( executionOrder ).toHaveText(
+			[
+				'context, attribute, text, children',
+				'attribute, text, children',
+				'text, children',
+			].join( ', ' )
+		);
+	} );
+
+	test( 'should not create a Directives component if none of the directives are registered', async ( {
+		page,
+	} ) => {
+		const nonExistentDirectives = page.getByTestId(
+			'non-existent-directives'
+		);
+		expect(
+			await nonExistentDirectives.evaluate(
+				// This returns undefined if type is a component.
+				( node ) => {
+					return ( node as any ).__k.__k.__k[ 0 ].__k[ 0 ].__k[ 0 ]
+						.type;
+				}
+			)
+		).toBe( 'div' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-run.spec.ts b/test/e2e/specs/interactivity/directive-run.spec.ts
new file mode 100644
index 00000000000000..0348bdb95c2ab7
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-run.spec.ts
@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-run', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-run' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-run' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should execute each element render', async ( { page } ) => {
+		await expect( page.getByTestId( 'hydrated' ) ).toHaveText( 'yes' );
+		await expect( page.getByTestId( 'renderCount' ) ).toHaveText( '1' );
+		await page.getByTestId( 'increment' ).click();
+		await expect( page.getByTestId( 'renderCount' ) ).toHaveText( '2' );
+		await page.getByTestId( 'increment' ).click();
+		await expect( page.getByTestId( 'renderCount' ) ).toHaveText( '3' );
+	} );
+
+	test( 'should execute when an element is mounted', async ( { page } ) => {
+		await expect( page.getByTestId( 'mounted' ) ).toHaveText( 'no' );
+		await page.getByTestId( 'toggle' ).click();
+		await expect( page.getByTestId( 'mounted' ) ).toHaveText( 'yes' );
+	} );
+
+	test( 'should work with client-side navigation', async ( { page } ) => {
+		await page.getByTestId( 'increment' ).click();
+		await page.getByTestId( 'increment' ).click();
+		await expect( page.getByTestId( 'navigated' ) ).toHaveText( 'no' );
+		await expect( page.getByTestId( 'renderCount' ) ).toHaveText( '3' );
+		await page.getByTestId( 'navigate' ).click();
+		await expect( page.getByTestId( 'navigated' ) ).toHaveText( 'yes' );
+		await expect( page.getByTestId( 'renderCount' ) ).toHaveText( '4' );
+	} );
+
+	test( 'should allow executing hooks', async ( { page } ) => {
+		await page.getByTestId( 'toggle' ).click();
+		const results = page.getByTestId( 'wp-run hooks results' );
+		await expect( results ).toHaveAttribute( 'data-init', 'initialized' );
+
+		await expect( results ).toHaveAttribute( 'data-watch', '0' );
+		await page.getByTestId( 'increment' ).click();
+		await expect( results ).toHaveAttribute( 'data-watch', '1' );
+		await page.getByTestId( 'increment' ).click();
+		await expect( results ).toHaveAttribute( 'data-watch', '2' );
+
+		await page.getByTestId( 'toggle' ).click();
+		await expect( results ).toHaveAttribute( 'data-init', 'cleaned up' );
+		await expect( results ).toHaveAttribute( 'data-watch', 'cleaned up' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-style.spec.ts b/test/e2e/specs/interactivity/directive-style.spec.ts
new file mode 100644
index 00000000000000..033f6b26057c50
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-style.spec.ts
@@ -0,0 +1,118 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-style', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-style' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-style' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'dont change style if callback returns same value on hydration', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'dont change style if callback returns same value on hydration'
+		);
+		await expect( el ).toHaveAttribute(
+			'style',
+			'color: red; background: green;'
+		);
+	} );
+
+	test( 'remove style if callback returns falsy value on hydration', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'remove style if callback returns falsy value on hydration'
+		);
+		await expect( el ).toHaveAttribute( 'style', 'background: green;' );
+	} );
+
+	test( 'change style if callback returns a new value on hydration', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'change style if callback returns a new value on hydration'
+		);
+		await expect( el ).toHaveAttribute(
+			'style',
+			'color: red; background: green;'
+		);
+	} );
+
+	test( 'handles multiple styles and callbacks on hydration', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'handles multiple styles and callbacks on hydration'
+		);
+		await expect( el ).toHaveAttribute(
+			'style',
+			'background: red; border: 2px solid yellow;'
+		);
+	} );
+
+	test( 'can add style when style attribute is missing on hydration', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'can add style when style attribute is missing on hydration'
+		);
+		await expect( el ).toHaveAttribute( 'style', 'color: red;' );
+	} );
+
+	test( 'can toggle style', async ( { page } ) => {
+		const el = page.getByTestId( 'can toggle style' );
+		await expect( el ).toHaveAttribute( 'style', 'color: red;' );
+		await page.getByTestId( 'toggle color' ).click();
+		await expect( el ).toHaveAttribute( 'style', 'color: blue;' );
+	} );
+
+	test( 'can remove style', async ( { page } ) => {
+		const el = page.getByTestId( 'can remove style' );
+		await expect( el ).toHaveAttribute( 'style', 'color: red;' );
+		await page.getByTestId( 'switch color to false' ).click();
+		await expect( el ).toHaveAttribute( 'style', '' );
+	} );
+
+	test( 'can toggle style in the middle', async ( { page } ) => {
+		const el = page.getByTestId( 'can toggle style in the middle' );
+		await expect( el ).toHaveAttribute(
+			'style',
+			'color: blue; background: red; border: 1px solid black;'
+		);
+		await page.getByTestId( 'toggle color' ).click();
+		await expect( el ).toHaveAttribute(
+			'style',
+			'color: blue; background: blue; border: 1px solid black;'
+		);
+	} );
+
+	test( 'handles styles names with hyphens', async ( { page } ) => {
+		const el = page.getByTestId( 'handles styles names with hyphens' );
+		await expect( el ).toHaveAttribute( 'style', 'background-color: red;' );
+		await page.getByTestId( 'toggle color' ).click();
+		await expect( el ).toHaveAttribute(
+			'style',
+			'background-color: blue;'
+		);
+	} );
+
+	test( 'can use context values', async ( { page } ) => {
+		const el = page.getByTestId( 'can use context values' );
+		await expect( el ).toHaveAttribute( 'style', 'color: blue;' );
+		await page.getByTestId( 'toggle context' ).click();
+		await expect( el ).toHaveAttribute( 'style', 'color: red;' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-text.spec.ts b/test/e2e/specs/interactivity/directive-text.spec.ts
new file mode 100644
index 00000000000000..3670c5931e15d8
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-text.spec.ts
@@ -0,0 +1,45 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-text', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-text' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-text' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'show proper text reading from state', async ( { page } ) => {
+		const el = page.getByTestId( 'show state text' );
+		await expect( el ).toHaveText( 'Text 1' );
+		await page.getByTestId( 'toggle state text' ).click();
+		await expect( el ).toHaveText( 'Text 2' );
+		await page.getByTestId( 'toggle state text' ).click();
+		await expect( el ).toHaveText( 'Text 1' );
+	} );
+
+	test( 'show proper text reading from context', async ( { page } ) => {
+		const el = page.getByTestId( 'show context text' );
+		await expect( el ).toHaveText( 'Text 1' );
+		await page.getByTestId( 'toggle context text' ).click();
+		await expect( el ).toHaveText( 'Text 2' );
+		await page.getByTestId( 'toggle context text' ).click();
+		await expect( el ).toHaveText( 'Text 1' );
+	} );
+
+	test( 'Transforms results into strings', async ( { page } ) => {
+		const elObject = page.getByTestId( 'show state component' );
+		await expect( elObject ).toBeHidden();
+		const elNumber = page.getByTestId( 'show state number' );
+		await expect( elNumber ).toHaveText( '1' );
+		const elBool = page.getByTestId( 'show state boolean' );
+		await expect( elBool ).toHaveText( 'true' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/directive-watch.spec.ts b/test/e2e/specs/interactivity/directive-watch.spec.ts
new file mode 100644
index 00000000000000..09bd0214c0a51e
--- /dev/null
+++ b/test/e2e/specs/interactivity/directive-watch.spec.ts
@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'data-wp-watch', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/directive-watch' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/directive-watch' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'check that watch runs when it is added', async ( { page } ) => {
+		const el = page.getByTestId( 'element in the DOM' );
+		await expect( el ).toContainText( 'element is in the DOM' );
+	} );
+
+	test( 'check that watch runs when it is removed', async ( { page } ) => {
+		await page.getByTestId( 'toggle' ).click();
+		const el = page.getByTestId( 'element in the DOM' );
+		await expect( el ).toContainText( 'element is not in the DOM' );
+	} );
+
+	test( 'change focus after DOM changes', async ( { page } ) => {
+		const el = page.getByTestId( 'input' );
+		await expect( el ).toBeFocused();
+		await page.getByTestId( 'toggle' ).click();
+		await page.getByTestId( 'toggle' ).click();
+		await expect( el ).toBeFocused();
+	} );
+
+	test( 'short-circuit infinite loops', async ( { page } ) => {
+		const el = page.getByTestId( 'short-circuit infinite loops' );
+		await expect( el ).toContainText( '1' );
+		await page.getByTestId( 'increment' ).click();
+		await expect( el ).toContainText( '3' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/fixtures/index.ts b/test/e2e/specs/interactivity/fixtures/index.ts
new file mode 100644
index 00000000000000..607221ffb1ec43
--- /dev/null
+++ b/test/e2e/specs/interactivity/fixtures/index.ts
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { test as base } from '@wordpress/e2e-test-utils-playwright';
+export { expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import InteractivityUtils from './interactivity-utils';
+
+type Fixtures = {
+	interactivityUtils: InteractivityUtils;
+};
+
+export const test = base.extend< Fixtures >( {
+	interactivityUtils: [
+		async ( { requestUtils }, use ) => {
+			await use( new InteractivityUtils( { requestUtils } ) );
+		},
+		// @ts-ignore: The required type is 'test', but can be 'worker' too. See
+		// https://playwright.dev/docs/test-fixtures#worker-scoped-fixtures
+		{ scope: 'worker' },
+	],
+} );
diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
new file mode 100644
index 00000000000000..fd850a6e39fae2
--- /dev/null
+++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import type { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
+
+type AddPostWithBlockOptions = {
+	alias?: string;
+	attributes?: Record< string, any >;
+};
+
+export default class InteractivityUtils {
+	links: Map< string, string >;
+	requestUtils: RequestUtils;
+
+	constructor( { requestUtils }: { requestUtils: RequestUtils } ) {
+		this.links = new Map();
+		this.requestUtils = requestUtils;
+	}
+
+	getLink( blockName: string ) {
+		const link = this.links.get( blockName );
+		if ( ! link ) {
+			throw new Error(
+				`No link found for post with block '${ blockName }'`
+			);
+		}
+
+		/*
+		 * Add an extra param to disable directives SSR. This is required at
+		 * this moment, as SSR for directives is not stabilized yet and we need
+		 * to ensure hydration works, even when the SSR'ed HTML is not correct.
+		 */
+		const url = new URL( link );
+		url.searchParams.append(
+			'disable_server_directive_processing',
+			'true'
+		);
+		return url.href;
+	}
+
+	async addPostWithBlock(
+		name: string,
+		{ attributes, alias }: AddPostWithBlockOptions = {}
+	) {
+		const block = attributes
+			? `${ name } ${ JSON.stringify( attributes ) }`
+			: name;
+
+		if ( ! alias ) {
+			alias = block;
+		}
+
+		const payload = {
+			content: `<!-- wp:${ block } /-->`,
+			status: 'publish' as 'publish',
+			date_gmt: '2023-01-01T00:00:00',
+			title: alias,
+		};
+
+		const { link } = await this.requestUtils.createPost( payload );
+		this.links.set( alias, link );
+		return this.getLink( alias );
+	}
+
+	async deleteAllPosts() {
+		await this.requestUtils.deleteAllPosts();
+		this.links.clear();
+	}
+
+	async activatePlugins() {
+		await this.requestUtils.activateTheme( 'emptytheme' );
+		await this.requestUtils.activatePlugin(
+			'gutenberg-test-interactive-blocks'
+		);
+	}
+
+	async deactivatePlugins() {
+		await this.requestUtils.activateTheme( 'twentytwentyone' );
+		await this.requestUtils.deactivatePlugin(
+			'gutenberg-test-interactive-blocks'
+		);
+	}
+}
diff --git a/test/e2e/specs/interactivity/get-sever-context.spec.ts b/test/e2e/specs/interactivity/get-sever-context.spec.ts
new file mode 100644
index 00000000000000..d7bc4075f97604
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-context.spec.ts
@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerContext()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		const parent = {
+			prop: 'parent',
+			nested: {
+				prop: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+			},
+		};
+
+		const parentModified = {
+			prop: 'parentModified',
+			nested: {
+				prop: 'parentModified',
+			},
+			inherited: {
+				prop: 'parentModified',
+			},
+		};
+
+		const parentNewProps = {
+			prop: 'parent',
+			newProp: 'parent',
+			nested: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+		};
+
+		const child = {
+			prop: 'child',
+			nested: {
+				prop: 'child',
+			},
+		};
+
+		const childModified = {
+			prop: 'childModified',
+			nested: {
+				prop: 'childModified',
+			},
+		};
+
+		const childNewProps = {
+			prop: 'child',
+			newProp: 'child',
+			nested: {
+				prop: 'child',
+				newProp: 'child',
+			},
+		};
+
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - modified',
+			attributes: {
+				parentContext: parentModified,
+				childContext: childModified,
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - new props',
+			attributes: {
+				parentContext: parentNewProps,
+				childContext: childNewProps,
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - main',
+			attributes: {
+				links: { modified: link1, newProps: link2 },
+				parentContext: parent,
+				childContext: child,
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerContext() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update modified props on navigation', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+		const inheritedProp = page.getByTestId( 'inherited.prop' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+
+		await page.getByTestId( 'modified' ).click();
+
+		await expect( prop ).toHaveText( 'childModified' );
+		await expect( nestedProp ).toHaveText( 'childModified' );
+		await expect( inheritedProp ).toHaveText( 'parentModified' );
+
+		await page.goBack();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should add new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+		await expect( inheritedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should keep new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+
+		await page.goBack();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerContext' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/get-sever-state.spec.ts b/test/e2e/specs/interactivity/get-sever-state.spec.ts
new file mode 100644
index 00000000000000..16406c1d824463
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-state.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerState()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 1',
+			attributes: {
+				state: {
+					prop: 'link 1',
+					newProp: 'link 1',
+					nested: {
+						prop: 'link 1',
+						newProp: 'link 1',
+					},
+				},
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 2',
+			attributes: {
+				state: {
+					prop: 'link 2',
+					newProp: 'link 2',
+					nested: {
+						prop: 'link 2',
+						newProp: 'link 2',
+					},
+				},
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - main',
+			attributes: {
+				title: 'Main',
+				links: [ link1, link2 ],
+				state: {
+					prop: 'main',
+					nested: {
+						prop: 'main',
+					},
+				},
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerState() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update existing state props on navigation', async ( {
+		page,
+	} ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( prop ).toHaveText( 'link 1' );
+		await expect( nestedProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( prop ).toHaveText( 'link 2' );
+		await expect( nestedProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should add new state props and keep them on navigation', async ( {
+		page,
+	} ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( newProp ).toHaveText( 'link 2' );
+		await expect( nestedNewProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerState' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/interactivity-data.spec.ts b/test/e2e/specs/interactivity/interactivity-data.spec.ts
new file mode 100644
index 00000000000000..80f9acfad93358
--- /dev/null
+++ b/test/e2e/specs/interactivity/interactivity-data.spec.ts
@@ -0,0 +1,86 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'store tag', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/store-tag {"condition":"ok"}' );
+		await utils.addPostWithBlock(
+			'test/store-tag {"condition":"missing"}'
+		);
+		await utils.addPostWithBlock(
+			'test/store-tag {"condition":"corrupted-json"}'
+		);
+		await utils.addPostWithBlock(
+			'test/store-tag {"condition":"invalid-state"}'
+		);
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'hydrates when it is well defined', async ( {
+		interactivityUtils: utils,
+		page,
+	} ) => {
+		const block = 'test/store-tag {"condition":"ok"}';
+		await page.goto( utils.getLink( block ) );
+
+		const value = page.getByTestId( 'counter value' );
+		const double = page.getByTestId( 'counter double' );
+		const clicks = page.getByTestId( 'counter clicks' );
+
+		await expect( value ).toHaveText( '3' );
+		await expect( double ).toHaveText( '6' );
+		await expect( clicks ).toHaveText( '0' );
+
+		await page.getByTestId( 'counter button' ).click();
+
+		await expect( value ).toHaveText( '4' );
+		await expect( double ).toHaveText( '8' );
+		await expect( clicks ).toHaveText( '1' );
+	} );
+
+	test( 'does not break the page when missing', async ( {
+		interactivityUtils: utils,
+		page,
+	} ) => {
+		const block = 'test/store-tag {"condition":"missing"}';
+		await page.goto( utils.getLink( block ) );
+
+		const clicks = page.getByTestId( 'counter clicks' );
+		await expect( clicks ).toHaveText( '0' );
+		await page.getByTestId( 'counter button' ).click();
+		await expect( clicks ).toHaveText( '1' );
+	} );
+
+	test( 'does not break the page when corrupted', async ( {
+		interactivityUtils: utils,
+		page,
+	} ) => {
+		const block = 'test/store-tag {"condition":"corrupted-json"}';
+		await page.goto( utils.getLink( block ) );
+
+		const clicks = page.getByTestId( 'counter clicks' );
+		await expect( clicks ).toHaveText( '0' );
+		await page.getByTestId( 'counter button' ).click();
+		await expect( clicks ).toHaveText( '1' );
+	} );
+
+	test( 'does not break the page when it contains an invalid state', async ( {
+		interactivityUtils: utils,
+		page,
+	} ) => {
+		const block = 'test/store-tag {"condition":"invalid-state"}';
+		await page.goto( utils.getLink( block ) );
+
+		const clicks = page.getByTestId( 'counter clicks' );
+		await expect( clicks ).toHaveText( '0' );
+		await page.getByTestId( 'counter button' ).click();
+		await expect( clicks ).toHaveText( '1' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/namespace.spec.ts b/test/e2e/specs/interactivity/namespace.spec.ts
new file mode 100644
index 00000000000000..9d0edc997886cb
--- /dev/null
+++ b/test/e2e/specs/interactivity/namespace.spec.ts
@@ -0,0 +1,87 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Namespaces', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test-namespace/directive-bind' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test-namespace/directive-bind' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'Empty string as namespace should not work', async ( { page } ) => {
+		const el = page.getByTestId( 'empty namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/empty-string-url' );
+	} );
+
+	test( 'A string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'correct namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/namespace-url' );
+	} );
+
+	test( 'An empty object as namespace should not work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/object-url' );
+	} );
+
+	test( 'A wrong namespace should not break the runtime', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'object namespace' );
+		await expect( el ).not.toHaveAttribute( 'href', '/namespace-url' );
+		const correct = page.getByTestId( 'correct namespace' );
+		await expect( correct ).toHaveAttribute( 'href', '/namespace-url' );
+	} );
+
+	test( 'A different store namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'other namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/other-store-url' );
+	} );
+
+	test( 'A number as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'number namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/number-url' );
+	} );
+
+	test( 'A null as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'null namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/null-url' );
+	} );
+
+	test( 'A true as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( 'true namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/true-url' );
+	} );
+
+	test( 'A false as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'false namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/false-url' );
+	} );
+
+	test( 'A [] as a string as namespace should work', async ( { page } ) => {
+		const el = page.getByTestId( '[] namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/array-url' );
+	} );
+
+	test( 'A "quoted string" as a string as namespace should work', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'quoted namespace' );
+		await expect( el ).toHaveAttribute( 'href', '/quoted-url' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/negation-operator.spec.ts b/test/e2e/specs/interactivity/negation-operator.spec.ts
new file mode 100644
index 00000000000000..da5670a0e57824
--- /dev/null
+++ b/test/e2e/specs/interactivity/negation-operator.spec.ts
@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'negation-operator', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/negation-operator' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/negation-operator' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'add hidden attribute when !state.active', async ( { page } ) => {
+		const el = page.getByTestId(
+			'add hidden attribute if state is not active'
+		);
+
+		await expect( el ).toHaveAttribute( 'hidden', '' );
+		await page.getByTestId( 'toggle active value' ).click();
+		await expect( el ).not.toHaveAttribute( 'hidden', '' );
+		await page.getByTestId( 'toggle active value' ).click();
+		await expect( el ).toHaveAttribute( 'hidden', '' );
+	} );
+
+	test( 'add hidden attribute when !selectors.active', async ( { page } ) => {
+		const el = page.getByTestId(
+			'add hidden attribute if selector is not active'
+		);
+
+		await expect( el ).toHaveAttribute( 'hidden', '' );
+		await page.getByTestId( 'toggle active value' ).click();
+		await expect( el ).not.toHaveAttribute( 'hidden', '' );
+		await page.getByTestId( 'toggle active value' ).click();
+		await expect( el ).toHaveAttribute( 'hidden', '' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/router-navigate.spec.ts b/test/e2e/specs/interactivity/router-navigate.spec.ts
new file mode 100644
index 00000000000000..d1ac30783ee2b7
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-navigate.spec.ts
@@ -0,0 +1,288 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Router navigate', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - link 1',
+			attributes: {
+				title: 'Link 1',
+				data: {
+					getterProp: 'value from link1',
+					prop1: 'link 1',
+					prop3: 'link 1',
+				},
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - link 2',
+			attributes: { title: 'Link 2' },
+		} );
+		const link3 = await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - disabled',
+			attributes: {
+				title: 'Main (navigation disabled)',
+				links: [ link1, link2 ],
+				disableNavigation: true,
+				data: {
+					getterProp: 'value from main (navigation disabled)',
+					prop1: 'main (navigation disabled)',
+				},
+			},
+		} );
+		await utils.addPostWithBlock( 'test/router-navigate', {
+			alias: 'router navigate - main',
+			attributes: {
+				title: 'Main',
+				links: [ link1, link2, link3 ],
+				data: {
+					getterProp: 'value from main',
+					prop1: 'main',
+					prop2: 'main',
+				},
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'router navigate - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update the HTML only for the latest navigation', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		const link1 = utils.getLink( 'router navigate - link 1' );
+		const link2 = utils.getLink( 'router navigate - link 2' );
+
+		const navigations = page.getByTestId( 'router navigations pending' );
+		const status = page.getByTestId( 'router status' );
+		const title = page.getByTestId( 'title' );
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+
+		let resolveLink1: Function;
+		let resolveLink2: Function;
+
+		await page.route( link1, async ( route ) => {
+			await new Promise( ( r ) => ( resolveLink1 = r ) );
+			await route.continue();
+		} );
+		await page.route( link2, async ( route ) => {
+			await new Promise( ( r ) => ( resolveLink2 = r ) );
+			await route.continue();
+		} );
+
+		await page.getByTestId( 'link 1' ).click();
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( navigations ).toHaveText( '2' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Main' );
+
+		await Promise.resolve().then( () => resolveLink2() );
+
+		await expect( navigations ).toHaveText( '1' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Link 2' );
+
+		await Promise.resolve().then( () => resolveLink1() );
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+		await expect( title ).toHaveText( 'Link 2' );
+	} );
+
+	test( 'should update the URL from the last navigation if only varies in the URL fragment', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		const link1 = utils.getLink( 'router navigate - link 1' );
+
+		const navigations = page.getByTestId( 'router navigations pending' );
+		const status = page.getByTestId( 'router status' );
+		const title = page.getByTestId( 'title' );
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+
+		const resolvers: Function[] = [];
+
+		await page.route( link1, async ( route ) => {
+			await new Promise( ( r ) => resolvers.push( r ) );
+			await route.continue();
+		} );
+
+		await page.getByTestId( 'link 1' ).click();
+		await page.getByTestId( 'link 1 with hash' ).click();
+
+		const href = ( await page
+			.getByTestId( 'link 1 with hash' )
+			.getAttribute( 'href' ) ) as string;
+
+		await expect( navigations ).toHaveText( '2' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Main' );
+
+		resolvers.pop()!();
+
+		await expect( navigations ).toHaveText( '1' );
+		await expect( status ).toHaveText( 'busy' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( page ).toHaveURL( href );
+
+		resolvers.pop()!();
+
+		await expect( navigations ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( page ).toHaveURL( href );
+	} );
+
+	test( 'should reload the next page when the timeout ends', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		const link1 = utils.getLink( 'router navigate - link 1' );
+
+		const title = page.getByTestId( 'title' );
+		const toggleTimeout = page.getByTestId( 'toggle timeout' );
+
+		let resolver: Function;
+
+		await page.route( link1, async ( route ) => {
+			// Only capture the first request.
+			if ( ! resolver ) {
+				await new Promise( ( r ) => ( resolver = r ) );
+				await route.abort();
+			} else {
+				await route.continue();
+			}
+		} );
+
+		await expect( toggleTimeout ).toHaveText( 'Timeout 10000' );
+
+		// Set timeout to 0.
+		await toggleTimeout.click();
+		await expect( toggleTimeout ).toHaveText( 'Timeout 0' );
+
+		// Navigation should timeout almost instantly.
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( page ).toHaveURL( link1 );
+		await expect( title ).toHaveText( 'Link 1' );
+
+		// If timeout is 10000, that means the page has been reloaded.
+		await expect( toggleTimeout ).toHaveText( 'Timeout 10000' );
+
+		// Make the fetch abort, just in case.
+		resolver!();
+	} );
+
+	test( 'should force a page reload when the `clientNavigationDisabled` config is set to true', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		await page.goto( utils.getLink( 'router navigate - disabled' ) );
+
+		const count = page.getByTestId( 'router navigations count' );
+		const status = page.getByTestId( 'router status' );
+		const title = page.getByTestId( 'title' );
+
+		// Check some elements to ensure the page has hydrated.
+		await expect( count ).toHaveText( '0' );
+		await expect( status ).toHaveText( 'idle' );
+
+		await page.getByTestId( 'link 1' ).click();
+
+		// Check the page has updated.
+		await expect( title ).toHaveText( 'Link 1' );
+
+		// Check that client-navigations count has not increased.
+		await expect( count ).toHaveText( '0' );
+	} );
+
+	test( 'should merge the state with the one serialized in the new page', async ( {
+		page,
+	} ) => {
+		const prop1 = page.getByTestId( 'prop1' );
+		const prop2 = page.getByTestId( 'prop2' );
+		const prop3 = page.getByTestId( 'prop3' );
+		const title = page.getByTestId( 'title' );
+
+		await expect( prop1 ).toHaveText( 'main' );
+		await expect( prop2 ).toHaveText( 'main' );
+		await expect( prop3 ).toBeEmpty();
+
+		await page.getByTestId( 'link 1' ).click();
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( prop1 ).toHaveText( 'main' );
+		await expect( prop2 ).toHaveText( 'main' );
+		await expect( prop3 ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( title ).toHaveText( 'Main' );
+		await expect( prop1 ).toHaveText( 'main' );
+		await expect( prop2 ).toHaveText( 'main' );
+		await expect( prop3 ).toHaveText( 'link 1' );
+	} );
+
+	test( 'should not try to overwrite getters with values from the initial data', async ( {
+		page,
+	} ) => {
+		const title = page.getByTestId( 'title' );
+		const getter = page.getByTestId( 'getterProp' );
+
+		await expect( title ).toHaveText( 'Main' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
+
+		await page.getByTestId( 'link 1' ).click();
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
+
+		await page.goBack();
+		await expect( title ).toHaveText( 'Main' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
+
+		await page.goForward();
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( getter ).toHaveText( 'value from getter (main)' );
+	} );
+
+	test( 'should force a page reload when navigating to a page with `clientNavigationDisabled`', async ( {
+		page,
+	} ) => {
+		const count = page.getByTestId( 'router navigations count' );
+		const title = page.getByTestId( 'title' );
+
+		// Check the cound to ensure the page has hydrated.
+		await expect( count ).toHaveText( '0' );
+
+		// Navigate to a page without clientNavigationDisabled.
+		await page.getByTestId( 'link 1' ).click();
+
+		// Check the page has updated and the navigation count has increased.
+		await expect( title ).toHaveText( 'Link 1' );
+		await expect( count ).toHaveText( '1' );
+
+		await page.goBack();
+		await expect( title ).toHaveText( 'Main' );
+		await expect( count ).toHaveText( '1' );
+
+		// Navigate to a page with clientNavigationDisabled.
+		await page.getByTestId( 'link 3' ).click();
+
+		// Check the page has updated and the navigation count is zero.
+		await expect( title ).toHaveText( 'Main (navigation disabled)' );
+		await expect( count ).toHaveText( '0' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/router-regions.spec.ts b/test/e2e/specs/interactivity/router-regions.spec.ts
new file mode 100644
index 00000000000000..f1ea308d6c2563
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-regions.spec.ts
@@ -0,0 +1,114 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Router regions', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const next = await utils.addPostWithBlock( 'test/router-regions', {
+			alias: 'router regions - page 2',
+			attributes: { page: 2 },
+		} );
+		await utils.addPostWithBlock( 'test/router-regions', {
+			alias: 'router regions - page 1',
+			attributes: { page: 1, next },
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'router regions - page 1' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should be the only part hydrated', async ( { page } ) => {
+		const region1Text = page.getByTestId( 'region-1-text' );
+		const region2Text = page.getByTestId( 'region-2-text' );
+		const noRegionText1 = page.getByTestId( 'no-region-text-1' );
+		const noRegionText2 = page.getByTestId( 'no-region-text-2' );
+
+		await expect( region1Text ).toHaveText( 'hydrated' );
+		await expect( region2Text ).toHaveText( 'hydrated' );
+		await expect( noRegionText1 ).toHaveText( 'not hydrated' );
+		await expect( noRegionText2 ).toHaveText( 'not hydrated' );
+	} );
+
+	test( 'should update after navigation', async ( { page } ) => {
+		const region1Ssr = page.getByTestId( 'region-1-ssr' );
+		const region2Ssr = page.getByTestId( 'region-2-ssr' );
+
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+		await expect( region2Ssr ).toHaveText( 'content from page 1' );
+
+		await page.getByTestId( 'next' ).click();
+
+		await expect( region1Ssr ).toHaveText( 'content from page 2' );
+		await expect( region2Ssr ).toHaveText( 'content from page 2' );
+
+		await page.getByTestId( 'back' ).click();
+
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+		await expect( region2Ssr ).toHaveText( 'content from page 1' );
+	} );
+
+	test( 'should preserve state across pages', async ( { page } ) => {
+		const counter = page.getByTestId( 'state-counter' );
+		await expect( counter ).toHaveText( '0' );
+
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '3' );
+
+		await page.getByTestId( 'next' ).click();
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '6' );
+
+		await page.getByTestId( 'back' ).click();
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '9' );
+	} );
+
+	test( 'should preserve context across pages', async ( { page } ) => {
+		const counter = page.getByTestId( 'context-counter' );
+		await expect( counter ).toHaveText( '0' );
+
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '3' );
+
+		await page.getByTestId( 'next' ).click();
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '6' );
+
+		await page.getByTestId( 'back' ).click();
+		await counter.click( { clickCount: 3, delay: 50 } );
+		await expect( counter ).toHaveText( '9' );
+	} );
+
+	test( 'can be nested', async ( { page } ) => {
+		const nestedRegionSsr = page.getByTestId( 'nested-region-ssr' );
+		await expect( nestedRegionSsr ).toHaveText( 'content from page 1' );
+
+		await page.getByTestId( 'next' ).click();
+		await expect( nestedRegionSsr ).toHaveText( 'content from page 2' );
+
+		await page.getByTestId( 'back' ).click();
+		await expect( nestedRegionSsr ).toHaveText( 'content from page 1' );
+	} );
+
+	test( 'Page title is updated 2', async ( { page } ) => {
+		await expect( page ).toHaveTitle(
+			'router regions – page 1 – gutenberg'
+		);
+		await page.getByTestId( 'next' ).click();
+		await expect( page ).toHaveTitle(
+			'router regions – page 2 – gutenberg'
+		);
+		await page.getByTestId( 'back' ).click();
+		await expect( page ).toHaveTitle(
+			'router regions – page 1 – gutenberg'
+		);
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/store.spec.ts b/test/e2e/specs/interactivity/store.spec.ts
new file mode 100644
index 00000000000000..fc94103168752e
--- /dev/null
+++ b/test/e2e/specs/interactivity/store.spec.ts
@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'store', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/store' );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/store' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'non-plain objects are not proxified', async ( { page } ) => {
+		const el = page.getByTestId( 'non-plain object' );
+		await expect( el ).toHaveText( 'true' );
+	} );
+
+	test( 'Ensures that state cannot be set to a non-object', async ( {
+		page,
+	} ) => {
+		const element = page.getByTestId( 'state-0' );
+		await expect( element ).toHaveText( 'right' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/tovdom-islands.spec.ts b/test/e2e/specs/interactivity/tovdom-islands.spec.ts
new file mode 100644
index 00000000000000..da4839c18afb2e
--- /dev/null
+++ b/test/e2e/specs/interactivity/tovdom-islands.spec.ts
@@ -0,0 +1,72 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'toVdom - islands', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/tovdom-islands' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/tovdom-islands' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'directives that are not inside islands should not be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'not inside an island' );
+		await expect( el ).toBeVisible();
+	} );
+
+	test( 'directives that are inside islands with json objects should be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'inside an island with json object' );
+		await expect( el ).toBeHidden();
+	} );
+
+	test( 'directives that are inside islands with strings should be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'inside an island with string' );
+		await expect( el ).toBeHidden();
+	} );
+
+	test( 'directives that are inside inner blocks of isolated islands should not be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'inside an inner block of an isolated island'
+		);
+		await expect( el ).toBeVisible();
+	} );
+
+	test( 'directives inside islands should not be hydrated twice', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'island inside another island' );
+		const templates = el.locator( 'template' );
+		await expect( templates ).toHaveCount( 1 );
+	} );
+
+	test( 'islands inside inner blocks of isolated islands should be hydrated', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId(
+			'island inside inner block of isolated island'
+		);
+		await expect( el ).toBeHidden();
+	} );
+
+	test( 'islands should recover their namespace if an inner island has changed it', async ( {
+		page,
+	} ) => {
+		const el = page.getByTestId( 'directive after different namespace' );
+		await expect( el ).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/tovdom.spec.ts b/test/e2e/specs/interactivity/tovdom.spec.ts
new file mode 100644
index 00000000000000..cf08fb115db4fd
--- /dev/null
+++ b/test/e2e/specs/interactivity/tovdom.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'toVdom', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/tovdom' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/tovdom' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'it should delete comments', async ( { page } ) => {
+		const el = page.getByTestId( 'it should delete comments' );
+		const c = await el.innerHTML();
+		expect( c ).not.toContain( '##1##' );
+		expect( c ).not.toContain( '##2##' );
+		const el2 = page.getByTestId(
+			'it should keep this node between comments'
+		);
+		await expect( el2 ).toBeVisible();
+	} );
+
+	test( 'it should delete processing instructions', async ( { page } ) => {
+		const el = page.getByTestId(
+			'it should delete processing instructions'
+		);
+		const c = await el.innerHTML();
+		expect( c ).not.toContain( '##1##' );
+		expect( c ).not.toContain( '##2##' );
+		const el2 = page.getByTestId(
+			'it should keep this node between processing instructions'
+		);
+		await expect( el2 ).toBeVisible();
+	} );
+
+	test( 'it should replace CDATA with text nodes', async ( { page } ) => {
+		const el = page.getByTestId(
+			'it should replace CDATA with text nodes'
+		);
+		const c = await el.innerHTML();
+		expect( c ).toContain( '##1##' );
+		expect( c ).toContain( '##2##' );
+		const el2 = page.getByTestId(
+			'it should keep this node between CDATA'
+		);
+		await expect( el2 ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/with-scope.spec.ts b/test/e2e/specs/interactivity/with-scope.spec.ts
new file mode 100644
index 00000000000000..1cb73cc915aca7
--- /dev/null
+++ b/test/e2e/specs/interactivity/with-scope.spec.ts
@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'withScope', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		await utils.addPostWithBlock( 'test/with-scope' );
+	} );
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'test/with-scope' ) );
+	} );
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'directives using withScope should work with async and sync functions', async ( {
+		page,
+	} ) => {
+		const asyncCounter = page.getByTestId( 'asyncCounter' );
+		await expect( asyncCounter ).toHaveText( '1' );
+		const syncCounter = page.getByTestId( 'syncCounter' );
+		await expect( syncCounter ).toHaveText( '1' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/activate-theme.spec.js b/test/e2e/specs/site-editor/activate-theme.spec.js
new file mode 100644
index 00000000000000..a5fb4b3be0b73c
--- /dev/null
+++ b/test/e2e/specs/site-editor/activate-theme.spec.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Activate theme', () => {
+	test.beforeEach( async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'themes.php' );
+		await page.getByLabel( 'Live Preview Emptytheme' ).click();
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+	test( 'activate block theme when live previewing from sidebar save button', async ( {
+		admin,
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Activate Emptytheme' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Activate', exact: true } )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Dismiss this notice' } )
+		).toContainText( 'Site updated' );
+		await admin.visitAdminPage( 'themes.php' );
+		await expect( page.getByLabel( 'Customize Emptytheme' ) ).toBeVisible();
+	} );
+	test( 'activate block theme when live previewing in edit mode', async ( {
+		editor,
+		admin,
+		page,
+	} ) => {
+		// Wait for the loading to complete.
+		await expect( page.locator( '.edit-site-canvas-loader' ) ).toHaveCount(
+			0
+		);
+		await editor.canvas.locator( 'body' ).click();
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Activate Emptytheme' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Activate', exact: true } )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Dismiss this notice' } )
+		).toContainText( 'Site updated' );
+		await admin.visitAdminPage( 'themes.php' );
+		await expect( page.getByLabel( 'Customize Emptytheme' ) ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js b/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
deleted file mode 100644
index af56a2c3d3ee9c..00000000000000
--- a/test/e2e/specs/site-editor/block-list-panel-preference.spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block list view', () => {
-	test.beforeAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'emptytheme' );
-	} );
-
-	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'twentytwentyone' );
-	} );
-
-	test( 'Should open by default', async ( { admin, page } ) => {
-		await admin.visitSiteEditor( {
-			postId: 'emptytheme//index',
-			postType: 'wp_template',
-		} );
-
-		// Should display the Preview button.
-		await expect(
-			page.locator( 'role=region[name="List View"i]' )
-		).not.toBeVisible();
-
-		// Turn on block list view by default.
-		await page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'showListViewByDefault', true );
-		} );
-
-		await page.reload();
-
-		// Should display the Preview button.
-		await expect(
-			page.locator( 'role=region[name="List View"i]' )
-		).toBeVisible();
-	} );
-} );
diff --git a/test/e2e/specs/site-editor/block-removal.spec.js b/test/e2e/specs/site-editor/block-removal.spec.js
new file mode 100644
index 00000000000000..7fc547c19e59e3
--- /dev/null
+++ b/test/e2e/specs/site-editor/block-removal.spec.js
@@ -0,0 +1,111 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor block removal prompt', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'should appear when attempting to remove Query Block', async ( {
+		page,
+	} ) => {
+		// Open and focus List View
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		// Select and try to remove Query Loop block
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
+		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect the block removal prompt to have appeared
+		await expect(
+			page.getByText(
+				'Some of the deleted blocks will stop your post or page content from displaying on this template. It is not recommended.'
+			)
+		).toBeVisible();
+	} );
+
+	test( 'should appear when attempting to remove Post Template Block', async ( {
+		page,
+	} ) => {
+		// Open and focus List View
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		// Select and open child blocks of Query Loop block
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
+		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Select and try to remove Post Template block
+		await listView.getByRole( 'link', { name: 'Post Template' } ).click();
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect the block removal prompt to have appeared
+		await expect(
+			page.getByText(
+				'Some of the deleted blocks will stop your post or page content from displaying on this template. It is not recommended.'
+			)
+		).toBeVisible();
+	} );
+
+	test( 'should not appear when attempting to remove something else', async ( {
+		editor,
+		page,
+	} ) => {
+		// Open and focus List View
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		await topBar
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		// Select Query Loop list item
+		const listView = page.getByRole( 'region', {
+			name: 'Document Overview',
+		} );
+		await listView.getByRole( 'link', { name: 'Query Loop' } ).click();
+
+		// Reveal its inner blocks in the list view
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Select its Post Template inner block
+		await listView.getByRole( 'link', { name: 'Post Template' } ).click();
+
+		// Reveal its inner blocks in the list view
+		await page.keyboard.press( 'ArrowRight' );
+
+		// Select and remove its Title inner block
+		await listView.getByRole( 'link', { name: 'Title' } ).click();
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect the block to have been removed with no prompt
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Title',
+			} )
+		).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
new file mode 100644
index 00000000000000..03fc5398f4a0a5
--- /dev/null
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -0,0 +1,365 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const TEST_PAGE_TITLE = 'Test Page for Block Style Variations';
+test.use( {
+	siteEditorBlockStyleVariations: async ( { page, editor }, use ) => {
+		await use( new SiteEditorBlockStyleVariations( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Block Style Variations', () => {
+	let stylesPostId;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme(
+				'gutenberg-test-themes/style-variations'
+			),
+		] );
+		stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { requestUtils, admin } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPages(),
+			admin.visitSiteEditor(),
+		] );
+	} );
+
+	test( 'apply block styles variations to nested blocks', async ( {
+		editor,
+		page,
+	} ) => {
+		await draftNewPage( page );
+		await addPageContent( editor, page );
+		const firstGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const secondGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const thirdGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Apply a block style to the parent Group block.
+		await editor.selectBlocks( firstGroup );
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click();
+
+		// Check parent styles have variation A styles.
+		await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( firstGroup ).toHaveCSS( 'border-width', '1px' );
+
+		// Check nested child and grandchild group block variation A inherited styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'solid' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '11px' );
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'solid' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '11px' );
+
+		// Apply a block style to the nested child Group block.
+		await editor.selectBlocks( secondGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation B' } )
+			.click();
+
+		// Check nested child styles have variation B styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'dashed' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '2px' );
+
+		// Check nested grandchild Group block variation B inherited styles.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// Apply a block style to the nested grandchild Group block.
+		await editor.selectBlocks( thirdGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click();
+
+		// Check that the child's inner block styles from variation B are overridden by the grandchild's block style variation A.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '1px' );
+	} );
+
+	test( 'update block style variations in global styles and check revisions match styles', async ( {
+		editor,
+		page,
+		siteEditorBlockStyleVariations,
+	} ) => {
+		await draftNewPage( page );
+		await addPageContent( editor, page );
+		const firstGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const secondGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const thirdGroup = editor.canvas
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Apply a block style to the parent Group block.
+		await editor.selectBlocks( firstGroup );
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation A' } )
+			.click();
+
+		// Apply a block style to the first, nested Group block.
+		await editor.selectBlocks( secondGroup );
+		await page.getByRole( 'tab', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Block Style Variation B' } )
+			.click();
+
+		// Update user global styles with new block style variation values.
+		// First revision.
+		await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
+			blocks: {
+				'core/group': {
+					variations: {
+						'block-style-variation-a': {
+							border: {
+								width: '3px',
+								style: 'outset',
+							},
+						},
+						'block-style-variation-b': {
+							border: {
+								width: '4px',
+								style: 'double',
+							},
+						},
+					},
+				},
+			},
+		} );
+
+		// Wait for the save button to be re-enabled.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+		).toBeVisible();
+
+		// Second revision (current).
+		await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
+			blocks: {
+				'core/group': {
+					variations: {
+						'block-style-variation-a': {
+							border: {
+								width: '7px',
+								style: 'dotted',
+							},
+						},
+						'block-style-variation-b': {
+							border: {
+								width: '8px',
+								style: 'dotted',
+							},
+						},
+					},
+				},
+			},
+		} );
+
+		// Check parent styles.
+		await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( firstGroup ).toHaveCSS( 'border-width', '7px' );
+
+		// Check nested child styles.
+		await expect( secondGroup ).toHaveCSS( 'border-style', 'dotted' );
+		await expect( secondGroup ).toHaveCSS( 'border-width', '8px' );
+
+		// Check nested grandchild group block inherited styles.
+		await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
+		await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// The initial revision styles should match the editor canvas.
+		await siteEditorBlockStyleVariations.openStylesPanel();
+		const revisionsButton = page.getByRole( 'button', {
+			name: 'Revisions',
+			exact: true,
+		} );
+		await revisionsButton.click();
+		await expect(
+			page.locator( 'iframe[name="revisions"]' )
+		).toBeVisible();
+		const revisionIframe = page.frameLocator( '[name="revisions"]' );
+
+		const revisionFirstGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.first();
+		const revisionSecondGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.nth( 1 );
+		const revisionThirdGroup = revisionIframe
+			.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+			.locator( '[data-type="core/group"]' )
+			.nth( 2 );
+
+		// Check parent styles have current revision.
+		await expect( revisionFirstGroup ).toHaveCSS(
+			'border-style',
+			'dotted'
+		);
+		await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '7px' );
+
+		// Check nested child styles have current revision.
+		await expect( revisionSecondGroup ).toHaveCSS(
+			'border-style',
+			'dotted'
+		);
+		await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '8px' );
+
+		// Check nested grandchild group block inherited styles from current revision.
+		await expect( revisionThirdGroup ).toHaveCSS(
+			'border-style',
+			'groove'
+		);
+		await expect( revisionThirdGroup ).toHaveCSS( 'border-width', '22px' );
+
+		// Click on previous revision.
+		await page
+			.getByRole( 'option', {
+				name: /^Changes saved by /,
+			} )
+			.nth( 1 )
+			.click();
+
+		// Check parent styles have previous revision.
+		await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '3px' );
+
+		// Check nested child style have previous revision.
+		await expect( revisionSecondGroup ).toHaveCSS(
+			'border-style',
+			'double'
+		);
+		await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '4px' );
+
+		// Check nested grandchild group block inherited styles from previous revision.
+		await expect( revisionThirdGroup ).toHaveCSS(
+			'border-style',
+			'groove'
+		);
+		await expect( revisionThirdGroup ).toHaveCSS( 'border-width', '22px' );
+	} );
+} );
+
+class SiteEditorBlockStyleVariations {
+	constructor( { page, editor } ) {
+		this.page = page;
+		this.editor = editor;
+	}
+
+	async openStylesPanel() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+	}
+
+	async saveRevision( stylesPostId, styles = {}, settings = {} ) {
+		await this.page.evaluate(
+			async ( [ _stylesPostId, _styles, _settings ] ) => {
+				window.wp.data
+					.dispatch( 'core' )
+					.editEntityRecord( 'root', 'globalStyles', _stylesPostId, {
+						id: _stylesPostId,
+						settings: _settings,
+						styles: _styles,
+					} );
+			},
+			[ stylesPostId, styles, settings ]
+		);
+		await this.editor.saveSiteEditorEntities();
+	}
+}
+
+async function draftNewPage( page ) {
+	await page.getByRole( 'button', { name: 'Pages' } ).click();
+	await page.getByRole( 'button', { name: 'Add new page' } ).click();
+	await page
+		.locator( 'role=dialog[name="Draft new: page"i]' )
+		.locator( 'role=textbox[name="title"i]' )
+		.fill( TEST_PAGE_TITLE );
+	await page.keyboard.press( 'Enter' );
+	await expect(
+		page.locator(
+			`role=button[name="Dismiss this notice"i] >> text='"${ TEST_PAGE_TITLE }" successfully created.'`
+		)
+	).toBeVisible();
+}
+
+// Create a Group block with 2 nested Group blocks.
+async function addPageContent( editor, page ) {
+	const inserterButton = page.locator(
+		'role=button[name="Block Inserter"i]'
+	);
+	await inserterButton.click();
+	await page.type( 'role=searchbox[name="Search"i]', 'Group' );
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
+	);
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Parent Group Block with a Paragraph' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( '/group' );
+	await expect(
+		page.locator( 'role=option[name="Group"i][selected]' )
+	).toBeVisible();
+	await page.keyboard.press( 'Enter' );
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Child Group Block with a Paragraph' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( '/group' );
+	await expect(
+		page.locator( 'role=option[name="Group"i][selected]' )
+	).toBeVisible();
+	await page.keyboard.press( 'Enter' );
+	await editor.canvas
+		.locator( 'role=button[name="Group: Gather blocks in a container."i]' )
+		.click();
+	await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
+	await page.click(
+		'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+	);
+	await page.keyboard.type( 'Grandchild Group Block with a Paragraph' );
+	await page.getByRole( 'button', { name: 'Publish', exact: true } ).click();
+}
diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js
new file mode 100644
index 00000000000000..c3eb2ac5e3a2fa
--- /dev/null
+++ b/test/e2e/specs/site-editor/browser-history.spec.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor browser history', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Back button works properly', async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'index.php' );
+		await admin.visitSiteEditor();
+		await expect( page ).toHaveURL( '/wp-admin/site-editor.php' );
+
+		// Navigate to a single template
+		await page.click( 'role=button[name="Templates"]' );
+		await page
+			.locator( '.fields-field__title', { hasText: 'Index' } )
+			.click();
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit'
+		);
+
+		// Navigate back to the template list
+		await page.goBack();
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?p=%2Ftemplate'
+		);
+
+		// Navigate back to the dashboard
+		await page.goBack();
+		await page.goBack();
+		await expect( page ).toHaveURL( '/wp-admin/index.php' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
new file mode 100644
index 00000000000000..197a01c43c8b46
--- /dev/null
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor command palette', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		// Navigate to the site editor.
+		await admin.visitSiteEditor();
+	} );
+
+	test( 'Open the command palette and navigate to the page create page', async ( {
+		page,
+		editor,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.focus();
+		await page.keyboard.press( 'Meta+k' );
+		await page.keyboard.type( 'new page' );
+		await page.getByRole( 'option', { name: 'Add new page' } ).click();
+		await expect( page ).toHaveURL(
+			/\/wp-admin\/site-editor.php\?p=%2Fpage%2F(\d+)&canvas=edit/
+		);
+		await expect(
+			editor.canvas
+				.getByLabel( 'Block: Title' )
+				.locator( '[data-rich-text-placeholder="No title"]' )
+		).toBeVisible();
+	} );
+
+	test( 'Open the command palette and navigate to a template', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.click();
+		await page.keyboard.type( 'index' );
+		await page.getByRole( 'option', { name: 'index' } ).click();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'heading', { level: 1 } )
+		).toContainText( 'Index' );
+	} );
+
+	test( 'Open the command palette and navigate to Customize CSS', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'button', { name: 'Open command palette' } )
+			.click();
+		await page.keyboard.type( 'Customize' );
+		await page.getByRole( 'option', { name: 'customize css' } ).click();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByLabel( 'Additional CSS' )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
new file mode 100644
index 00000000000000..0ff375a9f45a33
--- /dev/null
+++ b/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js
@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Dataviews List Layout', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		// Activate a theme with permissions to access the site editor.
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.createPage( {
+			title: 'Privacy Policy',
+			status: 'publish',
+		} );
+		await requestUtils.createPage( {
+			title: 'Sample Page',
+			status: 'publish',
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		// Go back to the default theme.
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin, page } ) => {
+		// Go to the pages page, as it has the list layout enabled by default.
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Pages' } ).click();
+	} );
+
+	test( 'Items list is reachable via TAB', async ( { page } ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'Add filter' } )
+		).toBeFocused();
+
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'Layout' } )
+		).toBeFocused();
+
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'button', { name: 'View options' } )
+		).toBeFocused();
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page.getByRole( 'grid' ).getByRole( 'button' ).first()
+		).toBeFocused();
+	} );
+
+	test( 'Navigates from items list to preview via TAB, and vice versa', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		const firstItem = page
+			.getByRole( 'grid' )
+			.getByRole( 'button' )
+			.first();
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+		await expect( firstItem ).toBeFocused();
+
+		// Go to the preview.
+		await page.keyboard.press( 'Tab' );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor content' } )
+				.getByRole( 'button', { name: 'Edit' } )
+		).toBeFocused();
+
+		// Go back to the items list using SHIFT+TAB.
+		await page.keyboard.press( 'Shift+Tab' );
+		await expect( firstItem ).toBeFocused();
+	} );
+
+	test( 'Navigates the items list via UP/DOWN arrow keys', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use arrow up/down to move through the list.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( page.getByLabel( 'Sample Page' ) ).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Actions are reachable via RIGHT/LEFT arrow keys', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use right/left arrow keys to move horizontally.
+		await page.keyboard.press( 'ArrowRight' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowRight' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect( page.getByLabel( 'Privacy Policy' ) ).toBeFocused();
+	} );
+
+	test( 'Navigates the list via UP/DOWN arrow keys from action buttons', async ( {
+		page,
+	} ) => {
+		// Start the sequence on the search component.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).click();
+
+		// Tab until reaching the items list.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+
+		// Make sure the items have loaded before reaching for the 1st item in the list.
+		await expect( page.getByRole( 'grid' ) ).toBeVisible();
+		await page.keyboard.press( 'Tab' );
+
+		// Use arrow up/down to move through the list from the edit primary action button.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Edit' )
+		).toBeFocused();
+
+		// Use arrow up/down to move through the list from the all actions button.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Sample Page Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+
+		await page.keyboard.press( 'ArrowUp' );
+		await expect(
+			page
+				.getByRole( 'row', { name: 'Privacy Policy Edit Actions' } )
+				.getByLabel( 'Actions' )
+		).toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
new file mode 100644
index 00000000000000..1824257df12fd3
--- /dev/null
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -0,0 +1,294 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Font Library', () => {
+	test.describe( 'When a blank theme is active', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'emptytheme' );
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//index',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+		} );
+
+		test( 'should display the "no font installed." message', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			await page
+				.getByRole( 'button', {
+					name: 'Add fonts',
+				} )
+				.click();
+			await page.getByRole( 'tab', { name: 'Library' } ).click();
+			await expect(
+				page.getByLabel( 'library' ).getByText( 'No fonts installed.' )
+			).toBeVisible();
+		} );
+
+		test( 'should display the "Manage fonts" icon', async ( { page } ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			const manageFontsIcon = page.getByRole( 'button', {
+				name: 'Manage fonts',
+			} );
+			await expect( manageFontsIcon ).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'When a theme with bundled fonts is active', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentythree' );
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'twentytwentythree//index',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+		} );
+
+		test( 'should display the "Manage fonts" icon', async ( { page } ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			const manageFontsIcon = page.getByRole( 'button', {
+				name: 'Manage fonts',
+			} );
+			await expect( manageFontsIcon ).toBeVisible();
+		} );
+
+		test( 'should open the "Manage fonts" modal when clicking the "Manage fonts" icon', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			await page
+				.getByRole( 'button', {
+					name: 'Manage fonts',
+				} )
+				.click();
+			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
+			await expect(
+				page.getByRole( 'heading', { name: 'Fonts', exact: true } )
+			).toBeVisible();
+		} );
+
+		test( 'should show font variant panel when clicking on a font family', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			await page
+				.getByRole( 'button', {
+					name: 'Manage fonts',
+				} )
+				.click();
+			await page.getByRole( 'button', { name: 'System Font' } ).click();
+			await expect(
+				page.getByRole( 'heading', { name: 'System Font' } )
+			).toBeVisible();
+			await expect(
+				page.getByRole( 'checkbox', { name: 'System Font Normal' } )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'When a user manages custom fonts via the UI', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'emptytheme' );
+			/*
+			 * Delete all installed fonts, font files, the fonts directory, and user font settings
+			 * in global styles for the active theme before and after starting the tests.
+			 */
+			await requestUtils.activatePlugin(
+				'gutenberg-test-delete-installed-fonts'
+			);
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-delete-installed-fonts'
+			);
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//index',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+		} );
+
+		test( 'should allow user to add and remove multiple local font files', async ( {
+			page,
+			editor,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+			await page
+				.getByRole( 'button', {
+					name: 'Add fonts',
+				} )
+				.click();
+
+			// Upload local fonts.
+			const fileChooserPromise = page.waitForEvent( 'filechooser' );
+			await page.getByRole( 'button', { name: 'Upload Font' } ).click();
+			const fileChooser = await fileChooserPromise;
+			// Provides coverage for https://github.com/WordPress/gutenberg/issues/59023.
+			await fileChooser.setFiles( [
+				'./test/e2e/assets/Exo2-Regular.woff',
+				'./test/e2e/assets/Exo2-SemiBoldItalic.woff2',
+			] );
+
+			// Check fonts were installed.
+			await expect(
+				page
+					.getByLabel( 'Upload' )
+					.getByText( 'Fonts were installed successfully.' )
+			).toBeVisible();
+			await page.getByRole( 'tab', { name: 'Library' } ).click();
+			// Provides coverage for https://github.com/WordPress/gutenberg/issues/60040.
+			await page.getByRole( 'button', { name: 'Exo 2' } ).click();
+			await expect( page.getByLabel( 'Exo 2 Normal' ) ).toBeVisible();
+			await expect(
+				page.getByLabel( 'Exo 2 Semi-bold Italic' )
+			).toBeVisible();
+
+			// Check CSS preset was created.
+			await page.getByRole( 'button', { name: 'Close' } ).click();
+			await page
+				.getByRole( 'button', { name: 'Headings', exact: true } )
+				.click();
+			await page.getByRole( 'combobox', { name: 'Font' } ).click();
+			await page.getByRole( 'option', { name: 'Exo 2' } ).click();
+			await expect(
+				editor.canvas.locator( '.is-root-container h1' )
+			).toHaveCSS( 'font-family', '"Exo 2"' );
+
+			// Check fonts can be uninstalled.
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+			await page
+				.getByRole( 'button', {
+					name: 'Manage fonts',
+				} )
+				.click();
+
+			await page.getByRole( 'button', { name: 'Exo 2' } ).click();
+			await page.getByRole( 'button', { name: 'Delete' } ).click();
+			await page.getByRole( 'button', { name: 'Delete' } ).click();
+			await expect(
+				page
+					.getByLabel( 'Library' )
+					.getByText( 'Font family uninstalled successfully.' )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'When switching Theme Style variations', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'twentytwentyfour//home',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+		} );
+
+		test( 'clicking on a font in the global styles sidebar should activate the font in the overlay when switching Theme Style variation', async ( {
+			page,
+		} ) => {
+			await page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Styles' } )
+				.click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			// Activate "Ember" Theme Variation.
+			await page.getByRole( 'button', { name: 'Ember' } ).click();
+
+			// Click "Back" button
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+
+			// Click "Jost 2 variants" button
+			await page
+				.getByRole( 'button', { name: 'Jost 2 variants' } )
+				.click();
+
+			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
+			await expect(
+				page.getByRole( 'heading', { name: 'Fonts' } )
+			).toBeVisible();
+
+			// Check correct font is displayed in Font Library
+			await expect(
+				page.getByRole( 'heading', { name: 'Jost' } )
+			).toBeVisible();
+
+			// Close the Font Library dialog
+			await page.getByRole( 'button', { name: 'Close' } ).click();
+
+			// Click "Back"
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			// Click "Browse styles"
+			await page.getByRole( 'button', { name: 'Browse styles' } ).click();
+
+			// Activate "Maelstrom" Theme Variation.
+			await page.getByRole( 'button', { name: 'Maelstrom' } ).click();
+
+			// Click "Back" button
+			await page.getByRole( 'button', { name: 'Back' } ).click();
+
+			await page.getByRole( 'button', { name: 'Typography' } ).click();
+
+			// Click Cardo font-family.
+			await page
+				.getByRole( 'button', { name: 'Cardo 3 variants' } )
+				.click();
+
+			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
+			await expect(
+				page.getByRole( 'heading', { name: 'Fonts' } )
+			).toBeVisible();
+
+			// Check correct font is displayed in Font Library
+			await expect(
+				page.getByRole( 'heading', { name: 'Cardo' } )
+			).toBeVisible();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/global-styles-sidebar.spec.js b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
new file mode 100644
index 00000000000000..7f1b818df4ce0a
--- /dev/null
+++ b/test/e2e/specs/site-editor/global-styles-sidebar.spec.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Global styles sidebar', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'should filter blocks list results', async ( { page } ) => {
+		// Navigate to Styles -> Blocks.
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Blocks' } )
+			.click();
+
+		await page
+			.getByRole( 'searchbox', { name: 'Search' } )
+			.fill( 'heading' );
+
+		// Matches both Heading and Table of Contents blocks.
+		// The latter contains "heading" in its description.
+		await expect(
+			page.getByRole( 'button', { name: 'Heading', exact: true } )
+		).toBeVisible();
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Table of Contents',
+			} )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/homepage-settings.spec.js b/test/e2e/specs/site-editor/homepage-settings.spec.js
new file mode 100644
index 00000000000000..d53130af23ac8b
--- /dev/null
+++ b/test/e2e/specs/site-editor/homepage-settings.spec.js
@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Homepage Settings via Editor', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [ requestUtils.activateTheme( 'emptytheme' ) ] );
+		await requestUtils.createPage( {
+			title: 'Homepage',
+			status: 'publish',
+		} );
+	} );
+
+	test.beforeEach( async ( { admin, page } ) => {
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Pages' } ).click();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPages(),
+			requestUtils.updateSiteSettings( {
+				show_on_front: 'posts',
+				page_on_front: 0,
+				page_for_posts: 0,
+			} ),
+		] );
+	} );
+
+	test( 'should show "Set as homepage" action on pages with `publish` status', async ( {
+		page,
+	} ) => {
+		const samplePage = page
+			.getByRole( 'gridcell' )
+			.getByLabel( 'Homepage' );
+		const samplePageRow = page
+			.getByRole( 'row' )
+			.filter( { has: samplePage } );
+		await samplePageRow.hover();
+		await samplePageRow
+			.getByRole( 'button', {
+				name: 'Actions',
+			} )
+			.click();
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Set as homepage' } )
+		).toBeVisible();
+	} );
+
+	test( 'should not show "Set as homepage" action on current homepage', async ( {
+		page,
+	} ) => {
+		const samplePage = page
+			.getByRole( 'gridcell' )
+			.getByLabel( 'Homepage' );
+		const samplePageRow = page
+			.getByRole( 'row' )
+			.filter( { has: samplePage } );
+		await samplePageRow.click();
+		await samplePageRow
+			.getByRole( 'button', {
+				name: 'Actions',
+			} )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Set as homepage' } ).click();
+		await page.getByRole( 'button', { name: 'Set homepage' } ).click();
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Set as homepage' } )
+		).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/hybrid-theme.spec.js b/test/e2e/specs/site-editor/hybrid-theme.spec.js
new file mode 100644
index 00000000000000..042cb1042cac22
--- /dev/null
+++ b/test/e2e/specs/site-editor/hybrid-theme.spec.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Hybrid theme', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptyhybrid' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'can access Patterns page', async ( { admin, page } ) => {
+		await admin.visitAdminPage( 'site-editor.php', 'path=/patterns' );
+
+		await expect(
+			page.getByRole( 'heading', { level: 1, text: 'Patterns' } )
+		).toBeVisible();
+		await expect(
+			page.getByRole( 'heading', { level: 2, text: 'All patterns' } )
+		).toBeVisible();
+	} );
+
+	test( 'should redirect to Patterns page when accessing template parts list page', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitAdminPage(
+			'site-editor.php',
+			'path=/wp_template_part/all'
+		);
+
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?p=%2Fpattern&postType=wp_template_part'
+		);
+
+		await expect(
+			page.getByRole( 'heading', { level: 1, text: 'Patterns' } )
+		).toBeVisible();
+		await expect(
+			page.getByRole( 'heading', { level: 2, text: 'All patterns' } )
+		).toBeVisible();
+	} );
+
+	test( 'can view a template part list', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.visitAdminPage( 'site-editor.php', 'path=/patterns' );
+
+		await page
+			.getByRole( 'button', { name: 'All template parts' } )
+			.click();
+		await page.getByText( 'header', { exact: true } ).click();
+
+		await expect(
+			page.getByRole( 'region', { name: 'Editor content' } )
+		).toBeVisible();
+
+		await editor.canvas.locator( 'body' ).click();
+
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Site Title',
+			} )
+		).toBeVisible();
+
+		await expect(
+			page.locator( 'role=dialog[name="Welcome to the site editor"i]' )
+		).toBeHidden();
+	} );
+
+	test( 'can not export Site Editor Templates', async ( { admin, page } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'gutenberg-test-themes/emptyhybrid//header',
+			postType: 'wp_template_part',
+			canvas: 'edit',
+		} );
+
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+
+		await expect(
+			page.getByRole( 'menuitem', { name: 'Export' } )
+		).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js
index 02389cc936f06c..9c25ef504637e4 100644
--- a/test/e2e/specs/site-editor/iframe-rendering.spec.js
+++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js
@@ -14,16 +14,16 @@ test.describe( 'Site editor iframe rendering mode', () => {
 
 	test( 'Should render editor in standards mode.', async ( {
 		admin,
-		page,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
-
-		const compatMode = await page
-			.locator( 'iframe[name="editor-canvas"]' )
-			.evaluate( ( iframe ) => iframe.contentDocument.compatMode );
+		const compatMode = await editor.canvas
+			.locator( ':root' )
+			.evaluate( () => document.compatMode );
 
 		// CSS1Compat = expected standards mode.
 		// BackCompat = quirks mode.
diff --git a/test/e2e/specs/site-editor/list-view.spec.js b/test/e2e/specs/site-editor/list-view.spec.js
new file mode 100644
index 00000000000000..db514463a73d76
--- /dev/null
+++ b/test/e2e/specs/site-editor/list-view.spec.js
@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site Editor List View', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		// Select a template part with a few blocks.
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'should open by default when preference is enabled', async ( {
+		page,
+		editor,
+	} ) => {
+		await expect(
+			page.locator( 'role=region[name="Document Overview"i]' )
+		).toBeHidden();
+
+		// Turn on block list view by default.
+		await editor.setPreferences( 'core', {
+			showListViewByDefault: true,
+		} );
+
+		await page.reload();
+
+		await expect(
+			page.locator( 'role=region[name="Document Overview"i]' )
+		).toBeVisible();
+
+		// The preferences cleanup.
+		await editor.setPreferences( 'core', {
+			showListViewByDefault: false,
+		} );
+	} );
+
+	// If list view sidebar is open and focus is not inside the sidebar, move
+	// focus to the sidebar when using the shortcut. If focus is inside the
+	// sidebar, shortcut should close the sidebar.
+	test( 'ensures List View global shortcut works properly', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Current starting focus should be at Open Navigation button.
+		const openNavigationButton = page.getByRole( 'button', {
+			name: 'Open Navigation',
+			exact: true,
+		} );
+		await openNavigationButton.focus();
+		await expect( openNavigationButton ).toBeFocused();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		await expect( listView ).toBeVisible();
+
+		// The site title block should have focus.
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Site Title',
+				exact: true,
+			} )
+		).toBeFocused();
+
+		// Navigate to the site tagline block.
+		await page.keyboard.press( 'ArrowDown' );
+		const siteTaglineItem = listView.getByRole( 'link', {
+			name: 'Site Tagline',
+			exact: true,
+		} );
+		await expect( siteTaglineItem ).toBeFocused();
+
+		// Hit enter to focus the site tagline block in the canvas.
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Site Tagline',
+			} )
+		).toBeFocused();
+
+		// Since focus is now at the site tagline block in the canvas,
+		// pressing the list view shortcut should bring focus back to the site tagline
+		// block in the list view.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( siteTaglineItem ).toBeFocused();
+
+		// Since focus is now inside the list view, the shortcut should close
+		// the sidebar.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( listView ).toBeHidden();
+
+		// Focus should now be on the list view toggle button.
+		await expect(
+			page.getByRole( 'button', { name: 'Document Overview' } )
+		).toBeFocused();
+
+		// Open List View.
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( listView ).toBeVisible();
+
+		// Focus the list view close button and make sure the shortcut will
+		// close the list view. This is to catch a bug where elements could be
+		// out of range of the sidebar region. Must shift+tab 1 time to reach
+		// close button before list view area.
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Document Overview' } )
+				.getByRole( 'button', {
+					name: 'Close',
+				} )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'access+o' );
+		await expect( listView ).toBeHidden();
+		await expect(
+			page.getByRole( 'button', { name: 'Document Overview' } )
+		).toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/multi-entity-saving.spec.js b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
new file mode 100644
index 00000000000000..cbc3bfde457a14
--- /dev/null
+++ b/test/e2e/specs/site-editor/multi-entity-saving.spec.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site Editor - Multi-entity save flow', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'save flow should work as expected', async ( { editor, page } ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Testing',
+			},
+		} );
+
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+		).toBeEnabled();
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor publish' } )
+				.getByRole( 'button', { name: 'Open save panel' } )
+		).toBeVisible();
+
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+		const saveButton = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save' } );
+		await expect( saveButton ).toBeDisabled();
+
+		// Check focus returns to Saved button.
+		await expect( saveButton ).toBeFocused();
+	} );
+
+	test( 'save flow should allow re-saving after changing the same block attribute', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Testing',
+			},
+		} );
+
+		const fontSizePicker = page
+			.getByRole( 'region', { name: 'Editor Settings' } )
+			.getByRole( 'group', { name: 'Font size' } );
+
+		// Change font size.
+		await fontSizePicker.getByRole( 'radio', { name: 'Small' } ).click();
+
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		// Change font size again.
+		await fontSizePicker.getByRole( 'radio', { name: 'Medium' } ).click();
+
+		// The save button has been re-enabled.
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', { name: 'Save' } )
+		).toBeEnabled();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js
new file mode 100644
index 00000000000000..64a80e814d6298
--- /dev/null
+++ b/test/e2e/specs/site-editor/navigation-editor.spec.js
@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Editing Navigation Menus', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test( 'it should lock the root Navigation block in the editor', async ( {
+		admin,
+		page,
+		pageUtils,
+		requestUtils,
+		editor,
+	} ) => {
+		await test.step( 'Check Navigation block is present and locked', async () => {
+			// Create a Navigation Menu called "Primary Menu" using the REST API helpers.
+			const createdMenu = await requestUtils.createNavigationMenu( {
+				title: 'Primary Menu',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
+			} );
+
+			// Add another so we get a list of Navigation menus in the editor.
+			await requestUtils.createNavigationMenu( {
+				title: 'Another One',
+				content:
+					'<!-- wp:navigation-link {"label":"Another Item","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
+			} );
+
+			await admin.visitSiteEditor( {
+				postId: createdMenu?.id,
+				postType: 'wp_navigation',
+				canvas: 'edit',
+			} );
+
+			// Open List View.
+			await pageUtils.pressKeys( 'access+o' );
+
+			const listView = page
+				.getByRole( 'region', {
+					name: 'Document Overview',
+				} )
+				.getByRole( 'treegrid', {
+					name: 'Block navigation structure',
+				} );
+
+			await expect( listView ).toBeVisible();
+
+			const navBlockNode = listView.getByRole( 'link', {
+				name: 'Navigation',
+				exact: true,
+			} );
+
+			// The Navigation block should be present.
+			await expect( navBlockNode ).toBeVisible();
+
+			// The Navigation block description should contain the locked state information.
+			await expect( navBlockNode ).toHaveAccessibleDescription(
+				/This block is locked./
+			);
+
+			// The block should have no options menu.
+			await expect(
+				navBlockNode
+					.locator( '..' ) // parent selector.
+					.getByRole( 'button', {
+						name: 'Options',
+					} )
+			).toBeHidden();
+
+			// Select the Navigation block.
+			await navBlockNode.click();
+		} );
+
+		await test.step( 'Check Navigation block has no controls other than editable list view', async () => {
+			// Open the document settings sidebar
+			await editor.openDocumentSettingsSidebar();
+
+			const sidebar = page.getByRole( 'region', {
+				name: 'Editor settings',
+			} );
+
+			await expect( sidebar ).toBeVisible();
+
+			// Check that the `Menu` control is visible.
+			// This is effectively the contents of the "List View" tab.
+			await expect(
+				sidebar.getByRole( 'heading', { name: 'Menu', exact: true } )
+			).toBeVisible();
+
+			// Check the standard tabs are not present.
+			await expect(
+				sidebar.getByRole( 'tab', { name: 'Document Overview' } )
+			).toBeHidden();
+			await expect(
+				sidebar.getByRole( 'tab', { name: 'Settings' } )
+			).toBeHidden();
+			await expect(
+				sidebar.getByRole( 'tab', { name: 'Styles' } )
+			).toBeHidden();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
new file mode 100644
index 00000000000000..1b92ef2e850e67
--- /dev/null
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editorNavigationUtils: async ( { page, pageUtils }, use ) => {
+		await use( new EditorNavigationUtils( { page, pageUtils } ) );
+	},
+} );
+
+test.describe( 'Site editor navigation', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Can use keyboard to navigate the site editor', async ( {
+		admin,
+		editorNavigationUtils,
+		page,
+		pageUtils,
+	} ) => {
+		await admin.visitSiteEditor();
+
+		// Test: Can navigate to a sidebar item and into its subnavigation frame without losing focus
+		// Go to the Pages button
+
+		await editorNavigationUtils.tabToLabel( 'Pages' );
+
+		await expect(
+			page.getByRole( 'button', { name: 'Pages' } )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		// We should be in the Pages sidebar
+		await expect(
+			page.getByRole( 'button', { name: 'Back', exact: true } )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+		// Go back to the main navigation
+		await expect(
+			page.getByRole( 'button', { name: 'Pages' } )
+		).toBeFocused();
+
+		// Navigate to the Saved button first, as it precedes the editor iframe.
+		await editorNavigationUtils.tabToLabel( 'Saved' );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await expect( savedButton ).toBeFocused();
+
+		// Get the iframe when it has a role=button and Edit label.
+		const editorCanvasRegion = page.getByRole( 'region', {
+			name: 'Editor content',
+		} );
+		const editorCanvasButton = editorCanvasRegion.getByRole( 'button', {
+			name: 'Edit',
+		} );
+
+		// Test that there are no tab stops between the Saved button and the
+		// focusable iframe with role=button.
+		await pageUtils.pressKeys( 'Tab' );
+		await expect( editorCanvasButton ).toBeFocused();
+
+		// Tab to the Pages item to move focus back in the UI.
+		await editorNavigationUtils.tabToLabel( 'Pages' );
+		await expect(
+			page.getByRole( 'button', { name: 'Pages' } )
+		).toBeFocused();
+
+		// Test again can navigate into the iframe using the keyboard.
+		await editorNavigationUtils.tabToLabel( 'Edit' );
+
+		// Enter into the site editor frame
+		await pageUtils.pressKeys( 'Enter' );
+		// Focus should be on the iframe without the button role
+		await expect(
+			page.locator( 'iframe[name="editor-canvas"]' )
+		).toBeFocused();
+		// The button role should have been removed from the iframe.
+		await expect( editorCanvasButton ).toBeHidden();
+
+		// Test: We can go back to the main navigation from the editor frame
+		// Move to the document toolbar
+		await pageUtils.pressKeys( 'alt+F10' );
+		// Go to the open navigation button
+		await pageUtils.pressKeys( 'shift+Tab' );
+
+		// Open the sidebar again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Open Navigation',
+				exact: true,
+			} )
+		).toBeFocused();
+		await pageUtils.pressKeys( 'Enter' );
+
+		await expect(
+			page.getByLabel( 'Go to the Dashboard' ).first()
+		).toBeFocused();
+		// We should have our editor canvas button back
+		await expect( editorCanvasButton ).toBeVisible();
+	} );
+} );
+
+class EditorNavigationUtils {
+	constructor( { page, pageUtils } ) {
+		this.page = page;
+		this.pageUtils = pageUtils;
+	}
+
+	async tabToLabel( label, times = 10 ) {
+		for ( let i = 0; i < times; i++ ) {
+			await this.pageUtils.pressKeys( 'Tab' );
+			const activeLabel = await this.page.evaluate( () => {
+				return (
+					document.activeElement.getAttribute( 'aria-label' ) ||
+					document.activeElement.textContent
+				);
+			} );
+			if ( activeLabel === label ) {
+				return;
+			}
+		}
+	}
+}
diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js
new file mode 100644
index 00000000000000..d26306a6c8e3b5
--- /dev/null
+++ b/test/e2e/specs/site-editor/new-templates-list.spec.js
@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Templates', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+	} );
+
+	test( 'Sorting', async ( { admin, page } ) => {
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
+
+		// Wait for the template list to be visible.
+		await expect(
+			page.locator( '[aria-label="Templates"]' )
+		).toBeVisible();
+
+		const firstTitle = page.locator( '.fields-field__title' ).first();
+
+		// Descending by title.
+		await page.getByRole( 'button', { name: 'View options' } ).click();
+		await page.getByRole( 'radio', { name: 'Sort descending' } ).click();
+		await expect( firstTitle ).toHaveText( 'Tag Archives' );
+
+		// Ascending by title.
+		await page.getByRole( 'radio', { name: 'Sort ascending' } ).click();
+		await expect( firstTitle ).toHaveText( 'Category Archives' );
+	} );
+
+	test( 'Filtering', async ( { requestUtils, admin, page } ) => {
+		await requestUtils.createTemplate( 'wp_template', {
+			slug: 'date',
+			title: 'Date Archives',
+			content: 'hi',
+		} );
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
+		// Global search.
+		await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' );
+		const titles = page.locator( '.fields-field__title' );
+		await expect( titles ).toHaveCount( 1 );
+		await expect( titles.first() ).toHaveText( 'Tag Archives' );
+		await page
+			.getByRole( 'button', { name: 'Reset search', exact: true } )
+			.click();
+		await expect( titles ).toHaveCount( 6 );
+
+		// Filter by author.
+		await page.getByRole( 'button', { name: 'Add filter' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Author' } ).click();
+		await page.getByRole( 'option', { name: 'admin' } ).click();
+		await page.keyboard.press( 'Escape' ); // close the menu.
+		await expect( titles ).toHaveCount( 1 );
+		await expect( titles.first() ).toHaveText( 'Date Archives' );
+
+		// Filter by author and text.
+		await page
+			.getByRole( 'button', { name: 'Reset', exact: true } )
+			.click();
+		await page
+			.getByRole( 'searchbox', { name: 'Search' } )
+			.fill( 'archives' );
+		await expect( titles ).toHaveCount( 3 );
+		await page.getByRole( 'button', { name: 'Add filter' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Author' } ).click();
+		await page.getByRole( 'option', { name: 'Emptytheme' } ).click();
+		await page.keyboard.press( 'Escape' ); // close the menu.
+		await expect( titles ).toHaveCount( 2 );
+	} );
+
+	test( 'Field visibility', async ( { admin, page } ) => {
+		await admin.visitSiteEditor( { postType: 'wp_template' } );
+
+		await page.getByRole( 'button', { name: 'Layout' } ).click();
+		await page.getByRole( 'menuitemradio', { name: 'Table' } ).click();
+
+		await page.getByRole( 'button', { name: 'Author' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Hide' } ).click();
+
+		await expect(
+			page.getByRole( 'button', { name: 'Author' } )
+		).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
new file mode 100644
index 00000000000000..4817651bac8f9d
--- /dev/null
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -0,0 +1,324 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+async function draftNewPage( page ) {
+	await page.getByRole( 'button', { name: 'Pages' } ).click();
+	await page.getByRole( 'button', { name: 'Add new page' } ).click();
+	await page
+		.locator( 'role=dialog[name="Draft new: page"i]' )
+		.locator( 'role=textbox[name="title"i]' )
+		.fill( 'Test Page' );
+	await page.keyboard.press( 'Enter' );
+	await expect(
+		page.locator(
+			`role=button[name="Dismiss this notice"i] >> text='"Test Page" successfully created.'`
+		)
+	).toBeVisible();
+}
+
+async function addPageContent( editor, page ) {
+	await editor.canvas
+		.getByRole( 'document', {
+			name: 'Block: Content',
+		} )
+		.getByRole( 'document', {
+			name: 'Empty block; start writing or type forward slash to choose a block',
+		} )
+		.click();
+
+	// Insert into Page Content using default block.
+	await editor.canvas
+		.getByRole( 'document', {
+			name: 'Empty block; start writing or type forward slash to choose a block',
+		} )
+		.fill( 'Lorem ipsum dolor sit amet' );
+
+	// Insert into Page Content using global inserter.
+	await page
+		.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+		.click();
+	await page.getByRole( 'option', { name: 'Heading', exact: true } ).click();
+	await editor.canvas
+		.getByRole( 'document', {
+			name: 'Block: Heading',
+		} )
+		.fill( 'A sweet heading 1' );
+
+	// Add some regular content blocks.
+	await page.keyboard.press( 'Enter' );
+	await editor.insertBlock( { name: 'core/paragraph' } );
+	await page.keyboard.type( 'A sweet paragraph 1' );
+	await page.keyboard.press( 'Enter' );
+	await editor.insertBlock( { name: 'core/paragraph' } );
+	await page.keyboard.type( 'A sweet paragraph 2' );
+
+	// Insert into Page Content using appender.
+	await page
+		.getByRole( 'region', { name: 'Editor footer' } )
+		.getByRole( 'button', { name: 'Content' } )
+		.click();
+	await editor.canvas.getByRole( 'button', { name: 'Add block' } ).click();
+	await page.getByPlaceholder( 'Search' ).fill( 'list' );
+	await page.getByRole( 'option', { name: 'List', exact: true } ).click();
+	await page.keyboard.type( 'Sweet list 1' );
+	await page.keyboard.press( 'Enter' );
+	await page.keyboard.type( 'Sweet list 2' );
+}
+
+test.describe( 'Pages', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await Promise.all( [
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await Promise.all( [
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllPages(),
+		] );
+	} );
+
+	test.beforeEach( async ( { requestUtils, admin } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllPages(),
+		] );
+		await admin.visitSiteEditor();
+	} );
+
+	test.skip( 'create a new page, edit template and toggle page template preview', async ( {
+		page,
+		editor,
+	} ) => {
+		// Set up
+		await draftNewPage( page );
+		await addPageContent( editor, page );
+		await editor.openDocumentSettingsSidebar();
+
+		// Switch to template editing focus.
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		await editorSettings.getByRole( 'tab', { name: 'Page' } ).click();
+		await editorSettings
+			.getByRole( 'button', { name: 'Template options' } )
+			.click();
+		await page.getByRole( 'menuitem', { name: 'Edit template' } ).click();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+		).toContainText(
+			'This is the Content block, it will display all the blocks in any single post or page.'
+		);
+		await expect(
+			page.locator(
+				'role=button[name="Dismiss this notice"i] >> text="Editing template. Changes made here affect all posts and pages that use the template."'
+			)
+		).toBeVisible();
+
+		// Edit blocks that are in the template.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Title' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Move down', exact: true } )
+			.click();
+
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Site title text' } )
+			.click( { force: true } );
+		await editor.canvas
+			.getByRole( 'textbox', { name: 'Site title text' } )
+			.fill( 'New Site Title' );
+
+		// Go back to page editing focus.
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Back' } )
+			.click();
+
+		// Site Title and Page entities should have been modified.
+		await page.getByRole( 'button', { name: 'Save', exact: true } ).click();
+		await expect(
+			page.locator(
+				'role=region[name="Editor publish"] >> role=checkbox[name="Title"]'
+			)
+		).toBeVisible();
+		await expect(
+			page.locator(
+				'role=region[name="Editor publish"] >> role=checkbox[name="Test Page"]'
+			)
+		).toBeVisible();
+		await page
+			.getByRole( 'button', { name: 'Cancel', exact: true } )
+			.click();
+
+		/*
+		 * Test toggling preview mode.
+		 */
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Content',
+			} )
+		).toBeVisible();
+
+		// Ensure order is preserved between toggling.
+		await page
+			.locator(
+				'[aria-label="Block: Content"] + [aria-label="Block: Title"]'
+			)
+			.isVisible();
+
+		await editor.openDocumentSettingsSidebar();
+		// Toggle template preview to "off".
+		const templateOptionsButton = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Template options' } );
+		await templateOptionsButton.click();
+		const templatePreviewButton = page
+			.getByRole( 'menu', { name: 'Template options' } )
+			.getByRole( 'menuitemcheckbox', { name: 'Show template' } );
+
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-checked',
+			'true'
+		);
+		await templatePreviewButton.click();
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-checked',
+			'false'
+		);
+
+		// Header template area should be hidden.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeHidden();
+
+		// Ensure post title component to be visible.
+		await expect(
+			editor.canvas.getByRole( 'textbox', {
+				name: 'Add Title',
+			} )
+		).toBeVisible();
+
+		// Remove focus from templateOptionsButton button.
+		await editor.canvas.locator( 'body' ).click();
+
+		// Toggle template preview to "on".
+		await templateOptionsButton.click();
+		await templatePreviewButton.click();
+		await expect( templatePreviewButton ).toHaveAttribute(
+			'aria-checked',
+			'true'
+		);
+
+		// Header template area and page content are once again visible.
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: header',
+			} )
+		).toBeVisible();
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Title',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'swap template and reset to default', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		// Create a custom template first.
+		const templateName = 'demo';
+		await page.getByRole( 'button', { name: 'Templates' } ).click();
+		await page.getByRole( 'button', { name: 'Add New Template' } ).click();
+		await page
+			.getByRole( 'button', {
+				name: 'A custom template can be manually applied to any post or page.',
+			} )
+			.click();
+		// Fill the template title and submit.
+		const newTemplateDialog = page.locator(
+			'role=dialog[name="Create custom template"i]'
+		);
+		const templateNameInput = newTemplateDialog.locator(
+			'role=textbox[name="Name"i]'
+		);
+		await templateNameInput.fill( templateName );
+		await page.keyboard.press( 'Enter' );
+		await page
+			.locator( '.block-editor-block-patterns-list__list-item' )
+			.click();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+		await admin.visitSiteEditor();
+
+		// Create new page that has the default template so as to swap it.
+		await draftNewPage( page );
+		await editor.openDocumentSettingsSidebar();
+		const templateOptionsButton = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Template options' } );
+		await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
+		await templateOptionsButton.click();
+		await page
+			.getByRole( 'menu', { name: 'Template options' } )
+			.getByText( 'Swap template' )
+			.click();
+		const templateItem = page.locator(
+			'.block-editor-block-patterns-list__item-title'
+		);
+		// Empty theme's custom template with `postTypes: ['post']`, should not be suggested.
+		await expect( templateItem ).toHaveCount( 1 );
+		await templateItem.click();
+		await expect( templateOptionsButton ).toHaveText( 'demo' );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		// Now reset, and apply the default template back.
+		await templateOptionsButton.click();
+		const resetButton = page
+			.getByRole( 'menu', { name: 'Template options' } )
+			.getByText( 'Use default template' );
+		await expect( resetButton ).toBeVisible();
+		await resetButton.click();
+		await expect( templateOptionsButton ).toHaveText( 'Single Entries' );
+	} );
+
+	test( 'swap template options should respect the declared `postTypes`', async ( {
+		page,
+		editor,
+	} ) => {
+		await draftNewPage( page );
+		await editor.openDocumentSettingsSidebar();
+		const templateOptionsButton = page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Template options' } );
+		await templateOptionsButton.click();
+		// Empty theme has only one custom template with `postTypes: ['post']`,
+		// so it should not be suggested.
+		await expect(
+			page
+				.getByRole( 'menu', { name: 'Template options' } )
+				.getByText( 'Swap template' )
+		).toHaveCount( 0 );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
new file mode 100644
index 00000000000000..162ec15146c67e
--- /dev/null
+++ b/test/e2e/specs/site-editor/patterns.spec.js
@@ -0,0 +1,210 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test: base,
+	expect,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @type {ReturnType<typeof base.extend<{patterns: Patterns}>>} */
+const test = base.extend( {
+	patterns: async ( { page }, use ) => {
+		await use( new Patterns( { page } ) );
+	},
+} );
+
+test.describe( 'Patterns', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllBlocks();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllBlocks();
+	} );
+
+	test( 'create a new pattern', async ( {
+		page,
+		editor,
+		admin,
+		patterns,
+	} ) => {
+		await admin.visitSiteEditor( { postType: 'wp_block' } );
+		await expect(
+			patterns.navigation.getByRole( 'heading', {
+				name: 'Patterns',
+				level: 1,
+			} )
+		).toBeVisible();
+		await expect( patterns.content ).toContainText( 'No results' );
+
+		await patterns.content
+			.getByRole( 'button', { name: 'add new pattern' } )
+			.click();
+
+		const addNewMenuItem = page
+			.getByRole( 'menu', {
+				name: 'add new pattern',
+			} )
+			.getByRole( 'menuitem', {
+				name: 'add new pattern',
+			} );
+		await expect( addNewMenuItem ).toBeFocused();
+		await addNewMenuItem.click();
+
+		const createPatternDialog = page.getByRole( 'dialog', {
+			name: 'add new pattern',
+		} );
+		await createPatternDialog
+			.getByRole( 'textbox', { name: 'Name' } )
+			.fill( 'My pattern' );
+		await page.keyboard.press( 'Enter' );
+
+		await expect( page ).toHaveTitle( /^My pattern/ );
+		await expect(
+			page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'heading', { name: 'My pattern', level: 1 } )
+		).toBeVisible();
+
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+		await page.keyboard.type( 'My pattern' );
+
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Save' } )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Dismiss this notice' } )
+		).toContainText( 'Pattern updated' );
+
+		await page.getByRole( 'button', { name: 'Open navigation' } ).click();
+
+		await expect(
+			patterns.navigation.getByRole( 'button', {
+				name: 'All patterns',
+			} )
+		).toContainText( '1' );
+		await expect(
+			patterns.navigation.getByRole( 'button', {
+				name: 'My patterns',
+			} )
+		).toContainText( '1' );
+		await expect(
+			patterns.navigation.getByRole( 'button', {
+				name: 'Uncategorized',
+			} )
+		).toContainText( '1' );
+
+		await expect(
+			patterns.content.getByRole( 'heading', {
+				name: 'All patterns',
+				level: 2,
+			} )
+		).toBeVisible();
+		await expect( patterns.item ).toHaveCount( 1 );
+		await expect(
+			patterns.itemsList.getByText( 'My pattern', {
+				exact: true,
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'search and filter patterns', async ( {
+		admin,
+		requestUtils,
+		patterns,
+		page,
+	} ) => {
+		await Promise.all( [
+			requestUtils.createBlock( {
+				title: 'Unsynced header',
+				meta: { wp_pattern_sync_status: 'unsynced' },
+				status: 'publish',
+				content: `<!-- wp:heading -->\n<h2>Unsynced header</h2>\n<!-- /wp:heading -->`,
+				wp_pattern_category: [],
+			} ),
+			requestUtils.createBlock( {
+				title: 'Unsynced footer',
+				meta: { wp_pattern_sync_status: 'unsynced' },
+				status: 'publish',
+				content: `<!-- wp:paragraph -->\n<p>Unsynced footer</p>\n<!-- /wp:paragraph -->`,
+				wp_pattern_category: [],
+			} ),
+			requestUtils.createBlock( {
+				title: 'Synced footer',
+				status: 'publish',
+				content: `<!-- wp:paragraph -->\n<p>Synced footer</p>\n<!-- /wp:paragraph -->`,
+				wp_pattern_category: [],
+			} ),
+		] );
+
+		await admin.visitSiteEditor( { postType: 'wp_block' } );
+
+		await expect( patterns.item ).toHaveCount( 3 );
+
+		const searchBox = patterns.content.getByRole( 'searchbox', {
+			name: 'Search',
+		} );
+		await searchBox.fill( 'footer' );
+		await expect( patterns.item ).toHaveCount( 2 );
+		expect(
+			await patterns.item.getByRole( 'button' ).allInnerTexts()
+		).toEqual(
+			expect.arrayContaining( [ 'Unsynced footer', 'Synced footer' ] )
+		);
+
+		await searchBox.fill( 'no match' );
+		await expect( patterns.content ).toContainText( 'No results' );
+
+		await patterns.content
+			.getByRole( 'button', { name: 'Reset search', exact: true } )
+			.click();
+		await expect( searchBox ).toHaveValue( '' );
+		await expect( patterns.item ).toHaveCount( 3 );
+
+		await patterns.content
+			.getByRole( 'button', { name: 'Sync Status' } )
+			.click();
+		await page.getByRole( 'option', { name: /^Synced/ } ).click();
+
+		await expect( patterns.item ).toHaveCount( 1 );
+		await expect( patterns.item ).toContainText( 'Synced footer' );
+
+		await page.getByRole( 'option', { name: /^Not synced/ } ).click();
+		await expect( patterns.item ).toHaveCount( 2 );
+		expect(
+			await patterns.item.getByRole( 'button' ).allInnerTexts()
+		).toEqual(
+			expect.arrayContaining( [ 'Unsynced header', 'Unsynced footer' ] )
+		);
+
+		await searchBox.fill( 'footer' );
+		await expect( patterns.item ).toHaveCount( 1 );
+		await expect( patterns.item ).toContainText( 'Unsynced footer' );
+	} );
+} );
+
+class Patterns {
+	/** @type {import('@playwright/test').Page} */
+	#page;
+
+	constructor( { page } ) {
+		this.#page = page;
+
+		this.content = this.#page.getByRole( 'region', {
+			name: 'Patterns content',
+		} );
+		this.navigation = this.#page.getByRole( 'region', {
+			name: 'Navigation',
+		} );
+		this.itemsList = this.content.locator( '.dataviews-view-grid' );
+		this.item = this.itemsList.locator( '.dataviews-view-grid__card' );
+	}
+}
diff --git a/test/e2e/specs/site-editor/preload.spec.js b/test/e2e/specs/site-editor/preload.spec.js
new file mode 100644
index 00000000000000..2cd61283fbd9e8
--- /dev/null
+++ b/test/e2e/specs/site-editor/preload.spec.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preload', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should make no requests before the iframe is loaded', async ( {
+		page,
+		admin,
+	} ) => {
+		const requests = [];
+
+		function onRequest( request ) {
+			if (
+				request.resourceType() === 'document' &&
+				request.url().startsWith( 'blob:' )
+			) {
+				// Stop recording when the iframe is initialized.
+				page.off( 'request', onRequest );
+			} else if ( request.resourceType() === 'fetch' ) {
+				const url = request.url();
+				const urlObject = new URL( url );
+				const restRoute = urlObject.searchParams.get( 'rest_route' );
+				if ( restRoute ) {
+					requests.push( restRoute );
+				} else {
+					requests.push( url );
+				}
+			}
+		}
+
+		page.on( 'request', onRequest );
+
+		await admin.visitSiteEditor();
+
+		// To do: these should all be removed or preloaded.
+		expect( requests ).toEqual( [
+			// There are two separate settings OPTIONS requests. We should fix
+			// so the one for canUser and getEntityRecord are reused.
+			'/wp/v2/settings',
+			// Seems to be coming from `enableComplementaryArea`.
+			'/wp/v2/users/me',
+		] );
+	} );
+} );
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..3e30f764811b1f
--- /dev/null
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Push to Global Styles button', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	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' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		const settingsPanel = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await topBar.getByRole( 'button', { name: 'Styles' } ).click();
+		await settingsPanel.getByRole( 'button', { name: 'Blocks' } ).click();
+		await settingsPanel.getByRole( 'button', { name: 'Heading' } ).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 topBar.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Push button should be disabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Apply globally',
+			} )
+		).toBeDisabled();
+
+		// Enable letter case.
+		const typographyOptions = page.getByRole( 'button', {
+			name: 'Typography options',
+		} );
+		await typographyOptions.click();
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Letter case' } )
+			.click();
+		await typographyOptions.click();
+
+		// Make the Heading block uppercase
+		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
+
+		// Push button should now be enabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Apply globally',
+			} )
+		).toBeEnabled();
+
+		// Press the Push button
+		await page.getByRole( 'button', { name: 'Apply globally' } ).click();
+
+		// Snackbar notification should appear
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Dismiss this notice',
+				text: 'Heading styles applied.',
+			} )
+		).toBeVisible();
+
+		// Push button should be disabled again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Apply globally',
+			} )
+		).toBeDisabled();
+
+		// Navigate again to Styles -> Blocks -> Heading -> Typography
+		await page
+			.getByRole( 'button', { name: 'Styles', exact: true } )
+			.click();
+		await page.getByRole( 'button', { name: 'Blocks' } ).click();
+		await settingsPanel
+			.getByRole( 'button', { name: 'Heading', exact: true } )
+			.click();
+
+		// Headings should now have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'true' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/settings-sidebar.spec.js b/test/e2e/specs/site-editor/settings-sidebar.spec.js
new file mode 100644
index 00000000000000..87e9023401109d
--- /dev/null
+++ b/test/e2e/specs/site-editor/settings-sidebar.spec.js
@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Settings sidebar', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'twentytwentyone' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.describe( 'Template tab', () => {
+		test( 'should open template tab by default if no block is selected', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Template' );
+		} );
+
+		test( `should show the currently selected template's title and description`, async ( {
+			admin,
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+
+			const settingsSideber = page.getByRole( 'region', {
+				name: 'Editor settings',
+			} );
+			const templateTitle = settingsSideber.locator(
+				'.editor-post-card-panel__title'
+			);
+
+			await expect( templateTitle ).toHaveText( 'Index' );
+			await expect( settingsSideber ).toContainText(
+				'Used as a fallback template for all pages when a more specific template is not defined.'
+			);
+
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//singular',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+
+			await expect( templateTitle ).toHaveText( 'Single Entries' );
+			await expect( settingsSideber ).toContainText(
+				'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g. Single Post, Page, or Attachment) cannot be found.'
+			);
+		} );
+	} );
+
+	test.describe( 'Block tab', () => {
+		test( 'should open block tab by default if a block is selected', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByRole( 'document', { name: 'Block' } ).first()
+			);
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Block' );
+		} );
+	} );
+
+	test.describe( 'Tab switch based on selection', () => {
+		test( 'should switch to block tab if we select a block, when Template is selected', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Template' );
+
+			// By inserting the block is also selected.
+			await editor.insertBlock( { name: 'core/heading' } );
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Block' );
+		} );
+
+		test( 'should switch to Template tab when a block was selected and we select the Template', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByRole( 'document', { name: 'Block' } ).first()
+			);
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Block' );
+
+			await page.evaluate( () => {
+				window.wp.data
+					.dispatch( 'core/block-editor' )
+					.clearSelectedBlock();
+			} );
+
+			await expect(
+				page
+					.getByRole( 'region', { name: 'Editor settings' } )
+					.getByRole( 'tab', { selected: true } )
+			).toHaveText( 'Template' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/site-editor-export.spec.js b/test/e2e/specs/site-editor/site-editor-export.spec.js
new file mode 100644
index 00000000000000..a0a56c18089cc2
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-export.spec.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site Editor Templates Export', () => {
+	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( 'clicking export should download emptytheme.zip file', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+		await page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Options' } )
+			.click();
+
+		const promise = page.waitForEvent( 'download' );
+		await page.getByRole( 'menuitem', { name: 'Export' } ).click();
+		const download = await promise;
+		expect( download.suggestedFilename() ).toBe( 'emptytheme.zip' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index d079176bace94e..04075cbedab308 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -16,27 +16,52 @@ test.describe( 'Site Editor Inserter', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor();
+		await editor.canvas.locator( 'body' ).click();
 	} );
 
 	test( 'inserter toggle button should toggle global inserter', async ( {
 		page,
 	} ) => {
-		await page.click( 'role=button[name="Toggle block inserter"i]' );
+		await page.click( 'role=button[name="Block Inserter"i]' );
 
 		// Visibility check
 		await expect(
-			page.locator(
-				'role=searchbox[name="Search for blocks and patterns"i]'
-			)
+			page.locator( 'role=searchbox[name="Search"i]' )
 		).toBeVisible();
-		await page.click( 'role=button[name="Toggle block inserter"i]' );
+		await page.click( 'role=button[name="Block Inserter"i]' );
 		//Hidden State check
 		await expect(
-			page.locator(
-				'role=searchbox[name="Search for blocks and patterns"i]'
-			)
+			page.locator( 'role=searchbox[name="Search"i]' )
 		).toBeHidden();
 	} );
+
+	// A test for https://github.com/WordPress/gutenberg/issues/43090.
+	test( 'should close the inserter when clicking on the toggle button', async ( {
+		page,
+		editor,
+	} ) => {
+		const inserterButton = page.getByRole( 'button', {
+			name: 'Block Inserter',
+			exact: true,
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		const beforeBlocks = await editor.getBlocks();
+
+		await inserterButton.click();
+		await blockLibrary.getByRole( 'tab', { name: 'Blocks' } ).click();
+		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] );
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+	} );
 } );
diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
new file mode 100644
index 00000000000000..a0cc0af5463aed
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor url navigation', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.deleteAllPosts(),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test( 'Redirection after template creation', async ( {
+		admin,
+		page,
+		requestUtils,
+	} ) => {
+		await requestUtils.createPost( {
+			title: 'Demo',
+			content: 'Hello there!',
+			status: 'publish',
+		} );
+
+		await admin.visitSiteEditor();
+		await page.click( 'role=button[name="Templates"]' );
+		await page.click( 'role=button[name="Add New Template"i]' );
+		await page
+			.getByRole( 'button', {
+				name: 'Single item: Post',
+			} )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'For a specific item' } )
+			.click();
+		await page.getByRole( 'option', { name: 'Demo' } ).click();
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Fsingle-post-demo&canvas=edit'
+		);
+	} );
+
+	test( 'Redirection after template part creation', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor();
+		await page.click( 'role=button[name="Patterns"i]' );
+		await page.click( 'role=button[name="add new pattern"i]' );
+		await page
+			.getByRole( 'menu', { name: 'add new pattern' } )
+			.getByRole( 'menuitem', { name: 'add new template part' } )
+			.click();
+		// Fill in a name in the dialog that pops up.
+		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Demo' );
+		await page.keyboard.press( 'Enter' );
+		await expect( page ).toHaveURL(
+			'/wp-admin/site-editor.php?p=%2Fwp_template_part%2Femptytheme%2F%2Fdemo&canvas=edit'
+		);
+	} );
+
+	test( 'The Patterns page should keep the previously selected template part category', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor();
+		const navigation = page.getByRole( 'region', {
+			name: 'Navigation',
+		} );
+		await navigation.getByRole( 'button', { name: 'Patterns' } ).click();
+		await navigation.getByRole( 'button', { name: 'General' } ).click();
+		await page
+			.getByRole( 'region', {
+				name: 'Patterns content',
+			} )
+			.getByText( 'header', { exact: true } )
+			.click();
+		await expect(
+			page.getByRole( 'region', { name: 'Editor content' } )
+		).toBeVisible();
+		await page.getByRole( 'button', { name: 'Open navigation' } ).click();
+		await expect(
+			navigation.getByRole( 'button', { name: 'All template parts' } )
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
new file mode 100644
index 00000000000000..38030892826ec7
--- /dev/null
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -0,0 +1,204 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	styleBook: async ( { page }, use ) => {
+		await use( new StyleBook( { page } ) );
+	},
+} );
+
+test.describe( 'Style Book', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin, editor, styleBook, page } ) => {
+		await page.addInitScript( () => {
+			window.__experimentalEditorWriteMode = true;
+		} );
+		await admin.visitSiteEditor();
+		await editor.canvas.locator( 'body' ).click();
+		await styleBook.open();
+		await expect(
+			page.locator( 'role=region[name="Style Book"i]' )
+		).toBeVisible();
+	} );
+
+	test( 'should disable toolbar buttons when open', async ( { page } ) => {
+		await expect(
+			page.locator( 'role=button[name="Block Inserter"i]' )
+		).toBeDisabled();
+		await expect(
+			page.locator( 'role=button[name="Tools"i]' )
+		).toBeDisabled();
+		await expect(
+			page.locator( 'role=button[name="Document Overview"i]' )
+		).toBeDisabled();
+	} );
+
+	test( 'should have tabs containing block examples', async ( { page } ) => {
+		await expect( page.locator( 'role=tab[name="Text"i]' ) ).toBeVisible();
+		await expect( page.locator( 'role=tab[name="Media"i]' ) ).toBeVisible();
+		await expect(
+			page.locator( 'role=tab[name="Widgets"i]' )
+		).toBeVisible();
+		await expect( page.locator( 'role=tab[name="Theme"i]' ) ).toBeVisible();
+
+		// Buttons to select block examples are rendered within the Style Book iframe.
+		const styleBookIframe = page.frameLocator(
+			'[name="style-book-canvas"]'
+		);
+
+		// In the Overview tab, expect a button for the main typography section.
+		await expect(
+			styleBookIframe.getByRole( 'button', {
+				name: 'Open Typography styles in Styles panel',
+			} )
+		).toBeVisible();
+
+		await page.click( 'role=tab[name="Media"i]' );
+
+		await expect(
+			styleBookIframe.getByRole( 'button', {
+				name: 'Open Image styles in Styles panel',
+			} )
+		).toBeVisible();
+		await expect(
+			styleBookIframe.getByRole( 'button', {
+				name: 'Open Gallery styles in Styles panel',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'should open correct Global Styles panel when example is clicked', async ( {
+		page,
+	} ) => {
+		await page
+			.frameLocator( '[name="style-book-canvas"]' )
+			.getByRole( 'button', {
+				name: 'Open Image styles in Styles panel',
+			} )
+			.click();
+
+		await expect(
+			page.locator(
+				'role=region[name="Editor settings"i] >> role=heading[name="Image"i]'
+			)
+		).toBeVisible();
+	} );
+
+	test( 'should allow to return Global Styles root when example is clicked', async ( {
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Blocks"]' );
+		await page.click( 'role=button[name="Heading"]' );
+
+		await page
+			.frameLocator( '[name="style-book-canvas"]' )
+			.getByRole( 'button', {
+				name: 'Open Pullquote styles in Styles panel',
+			} )
+			.click();
+
+		await page.click( 'role=button[name="Back"]' );
+		await page.click( 'role=button[name="Back"]' );
+
+		await expect(
+			page.locator( 'role=button[name="Blocks"]' )
+		).toBeVisible();
+	} );
+
+	test( 'should disappear when closed via click event or Escape key', async ( {
+		page,
+	} ) => {
+		const styleBookRegion = page.getByRole( 'region', {
+			name: 'Style Book',
+		} );
+
+		// Close Style Book via click event.
+		await styleBookRegion.getByRole( 'button', { name: 'Close' } ).click();
+
+		await expect(
+			styleBookRegion,
+			'should close when close button is clicked'
+		).toBeHidden();
+
+		// Open Style Book again.
+		await page.getByRole( 'button', { name: 'Style Book' } ).click();
+		await expect(
+			styleBookRegion,
+			'style book should be visible'
+		).toBeVisible();
+
+		// Close Style Book via Escape key.
+		await page.keyboard.press( 'Escape' );
+		await expect(
+			styleBookRegion,
+			'should close when Escape key is pressed'
+		).toBeHidden();
+	} );
+
+	test( 'should persist when navigating the global styles sidebar', async ( {
+		page,
+	} ) => {
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Browse styles' } )
+			.click();
+
+		const styleBookRegion = page.getByRole( 'region', {
+			name: 'Style Book',
+		} );
+		await expect(
+			styleBookRegion,
+			'style book should be visible'
+		).toBeVisible();
+
+		await page.click( 'role=button[name="Back"]' );
+
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Typography' } )
+			.click();
+
+		await expect(
+			styleBookRegion,
+			'style book should be visible'
+		).toBeVisible();
+	} );
+
+	test( 'should allow opening the command menu from the header when open', async ( {
+		page,
+	} ) => {
+		// Open the command menu from the header.
+		await page
+			.getByRole( 'heading', {
+				name: 'Style Book',
+			} )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Search commands and settings' )
+		).toBeVisible();
+	} );
+} );
+
+class StyleBook {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async open() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+		await this.page.getByRole( 'button', { name: 'Style Book' } ).click();
+	}
+}
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 56de0ac0de2194..9c4243b0d171f6 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -37,6 +37,7 @@ test.describe( 'Global styles variations', () => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 
 		await siteEditorStyleVariations.browseStyles();
@@ -72,31 +73,28 @@ test.describe( 'Global styles variations', () => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
-		await page.click(
-			'role=button[name="Navigate to the previous view"i]'
-		);
-		await page.click( 'role=button[name="Colors styles"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors background styles"i] >> data-testid=background-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors text styles"i] >> data-testid=text-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
 
-		await page.click(
-			'role=button[name="Navigate to the previous view"i]'
-		);
-		await page.click( 'role=button[name="Typography styles"i]' );
-		await page.click( 'role=button[name="Typography Text styles"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page.click( 'role=button[name="Typography"i]' );
+		await page.click( 'role=button[name="Text"i]' );
 
 		await expect(
 			page.locator( 'css=.components-font-size-picker__header__hint' )
@@ -111,31 +109,28 @@ test.describe( 'Global styles variations', () => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
-		await page.click(
-			'role=button[name="Navigate to the previous view"i]'
-		);
-		await page.click( 'role=button[name="Colors styles"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors background styles"i] >> data-testid=background-color-indicator'
+				'role=button[name="Background"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Colors text styles"i] >> data-testid=text-color-indicator'
+				'role=button[name="Text"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
 
-		await page.click(
-			'role=button[name="Navigate to the previous view"i]'
-		);
-		await page.click( 'role=button[name="Typography styles"i]' );
-		await page.click( 'role=button[name="Typography Text styles"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page.click( 'role=button[name="Typography"i]' );
+		await page.click( 'role=button[name="Text"i]' );
 
 		// TODO: to avoid use classnames to locate these elements,
 		//  we could provide accessible attributes to the source code in packages/components/src/font-size-picker/index.js.
@@ -156,25 +151,24 @@ test.describe( 'Global styles variations', () => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
-		await page.click(
-			'role=button[name="Navigate to the previous view"i]'
-		);
-		await page.click( 'role=button[name="Colors styles"i]' );
-		await page.click( 'role=button[name="Color palettes"i]' );
+		await page.click( 'role=button[name="Back"i]' );
+		await page.click( 'role=button[name="Colors"i]' );
+		await page.click( 'role=button[name="Edit palette"i]' );
 
 		await expect(
-			page.locator( 'role=button[name="Color: Foreground"i]' )
+			page.locator( 'role=option[name="Color: Foreground"i]' )
 		).toHaveCSS( 'background-color', 'rgb(74, 7, 74)' );
 
 		await expect(
-			page.locator( 'role=button[name="Color: Background"i]' )
+			page.locator( 'role=option[name="Color: Background"i]' )
 		).toHaveCSS( 'background-color', 'rgb(202, 105, 211)' );
 
 		await expect(
-			page.locator( 'role=button[name="Color: Awesome pink"i]' )
+			page.locator( 'role=option[name="Color: Awesome pink"i]' )
 		).toHaveCSS( 'background-color', 'rgba(204, 0, 255, 0.77)' );
 	} );
 
@@ -182,19 +176,22 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 
-		const frame = page.frame( 'editor-canvas' );
-		const paragraph = frame.locator( 'text="My awesome paragraph"' );
+		const paragraph = editor.canvas.locator(
+			'text="My awesome paragraph"'
+		);
 		await expect( paragraph ).toHaveCSS( 'color', 'rgb(25, 25, 17)' );
 
-		const body = frame.locator( 'css=body' );
+		const body = editor.canvas.locator( 'css=body' );
 		await expect( body ).toHaveCSS(
 			'background-color',
 			'rgb(255, 239, 11)'
@@ -207,17 +204,7 @@ class SiteEditorStyleVariations {
 		this.page = page;
 	}
 
-	async disableWelcomeGuide() {
-		// Turn off the welcome guide.
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/edit-site', 'welcomeGuideStyles', false );
-		} );
-	}
-
 	async browseStyles() {
-		await this.disableWelcomeGuide();
 		await this.page.click( 'role=button[name="Styles"i]' );
 		await this.page.click( 'role=button[name="Browse styles"i]' );
 	}
diff --git a/test/e2e/specs/site-editor/styles.spec.js b/test/e2e/specs/site-editor/styles.spec.js
new file mode 100644
index 00000000000000..63a051bf6b92d7
--- /dev/null
+++ b/test/e2e/specs/site-editor/styles.spec.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Styles', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentythree' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'should override reset styles and library styles', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+	} ) => {
+		const { id } = await requestUtils.createPage( {
+			title: 'Social Icons',
+			content: `<!-- wp:social-links -->
+<ul class="wp-block-social-links"></ul>
+<!-- /wp:social-links -->`,
+			status: 'publish',
+		} );
+		await admin.visitSiteEditor( {
+			postId: id,
+			postType: 'page',
+			canvas: 'edit',
+		} );
+
+		const block = editor.canvas.getByRole( 'document', {
+			name: 'Block: Social Icons',
+		} );
+
+		await expect( block ).toHaveCSS( 'padding-left', '0px' );
+
+		const topBar = page.getByRole( 'region', { name: 'Editor top bar' } );
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await topBar.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Social Icons', exact: true } )
+			.click();
+
+		// Find the second padding control and change the padding value
+		await page
+			.getByRole( 'button', { name: 'Set custom size' } )
+			.nth( 1 )
+			.click();
+		await page.getByRole( 'spinbutton', { name: 'padding' } ).fill( '35' );
+
+		// Check the padding value
+		await expect( block ).toHaveCSS( 'padding-left', '35px' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/template-hierarchy.spec.js b/test/e2e/specs/site-editor/template-hierarchy.spec.js
new file mode 100644
index 00000000000000..5fcc77da9942ce
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-hierarchy.spec.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Template hierarchy', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'shows correct template with page on front option', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		await admin.visitAdminPage( 'options-reading.php' );
+		await page.click( 'input[name="show_on_front"][value="page"]' );
+		await page.selectOption( 'select[name="page_on_front"]', '2' );
+		await page.click( 'input[type="submit"]' );
+		await admin.visitSiteEditor();
+
+		// Title block should contain "Sample Page"
+		await expect(
+			editor.canvas.locator( 'role=document[name="Block: Title"]' )
+		).toContainText( 'Sample Page' );
+
+		await admin.visitAdminPage( 'options-reading.php' );
+		await page.click( 'input[name="show_on_front"][value="posts"]' );
+		await page.click( 'input[type="submit"]' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/template-part-focus-mode.spec.js b/test/e2e/specs/site-editor/template-part-focus-mode.spec.js
new file mode 100644
index 00000000000000..29e6788779ed98
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-part-focus-mode.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Template Part Focus mode', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should navigate to template part and back.', async ( {
+		admin,
+		page,
+		editor,
+	} ) => {
+		await admin.visitAdminPage( 'site-editor.php?canvas=edit' );
+		await editor.setPreferences( 'core/edit-site', {
+			welcomeGuide: false,
+		} );
+
+		// Check that we're editing the template
+		await expect( page.locator( 'h1' ) ).toContainText( 'Blog Home' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template' );
+
+		// Click Template Part
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Header',
+			} )
+			.click();
+
+		// Navigate to Focus mode
+		await editor.clickBlockToolbarButton( 'Edit' );
+
+		// Check if focus mode is active
+		await expect( page.locator( 'h1' ) ).toContainText( 'Header' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template Part' );
+
+		// Go back
+		await page.getByRole( 'button', { name: 'Back' } ).click();
+
+		// Check that we're editing the template
+		await expect( page.locator( 'h1' ) ).toContainText( 'Blog Home' );
+		await expect( page.locator( 'h1' ) ).toContainText( 'Template' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index a793e97158a11f..d88273574bc4b0 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -1,17 +1,7 @@
 /**
  * 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 } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Template Part', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
@@ -37,11 +27,14 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
 
 		// Insert a new template block and 'start blank'.
 		await editor.insertBlock( { name: 'core/template-part' } );
-		await editor.canvas.click( 'role=button[name="Start blank"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Start blank"i]' )
+			.click();
 
 		// Fill in a name in the dialog that pops up.
 		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'New' );
@@ -64,8 +57,7 @@ test.describe( 'Template Part', () => {
 		page,
 	} ) => {
 		// Visit the index.
-		await admin.visitSiteEditor();
-
+		await admin.visitSiteEditor( { canvas: 'edit' } );
 		const headerTemplateParts = editor.canvas.locator(
 			'[data-type="core/template-part"]'
 		);
@@ -75,7 +67,7 @@ test.describe( 'Template Part', () => {
 
 		// Insert a new template block and choose an existing header pattern.
 		await editor.insertBlock( { name: 'core/template-part' } );
-		await editor.canvas.click( 'role=button[name="Choose"i]' );
+		await editor.canvas.locator( 'role=button[name="Choose"i]' ).click();
 		await page.click(
 			'role=listbox[name="Block Patterns"i] >> role=option[name="header"i]'
 		);
@@ -91,8 +83,7 @@ test.describe( 'Template Part', () => {
 	} ) => {
 		const paragraphText = 'Test 2';
 
-		await admin.visitSiteEditor();
-
+		await admin.visitSiteEditor( { canvas: 'edit' } );
 		// Add a block and select it.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -117,7 +108,7 @@ test.describe( 'Template Part', () => {
 		// Check that the header contains the paragraph added earlier.
 		const templatePartWithParagraph = editor.canvas.locator(
 			'[data-type="core/template-part"]',
-			{ has: paragraphBlock }
+			{ hasText: paragraphText }
 		);
 
 		await expect( templatePartWithParagraph ).toBeVisible();
@@ -131,8 +122,7 @@ test.describe( 'Template Part', () => {
 		const paragraphText1 = 'Test 3';
 		const paragraphText2 = 'Test 4';
 
-		await admin.visitSiteEditor();
-
+		await admin.visitSiteEditor( { canvas: 'edit' } );
 		// Add a block and select it.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -156,7 +146,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( paragraphBlock1, paragraphBlock2 );
 
 		// Convert block to a template part.
-		await editor.clickBlockOptionsMenuItem( 'Create Template part' );
+		await editor.clickBlockOptionsMenuItem( 'Create template part' );
 		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Test' );
 		await page.keyboard.press( 'Enter' );
 
@@ -167,11 +157,11 @@ test.describe( 'Template Part', () => {
 		// Check that the header contains the paragraph added earlier.
 		const templatePartWithParagraph1 = editor.canvas.locator(
 			'[data-type="core/template-part"]',
-			{ has: paragraphBlock1 }
+			{ hasText: paragraphText1 }
 		);
 		const templatePartWithParagraph2 = editor.canvas.locator(
 			'[data-type="core/template-part"]',
-			{ has: paragraphBlock2 }
+			{ hasText: paragraphText2 }
 		);
 
 		// TODO: I couldn't find an easy way to assert that the same template
@@ -193,38 +183,37 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-
 		await editor.insertBlock( {
 			name: 'core/paragraph',
 			attributes: {
 				content: paragraphText,
 			},
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 
 		// Visit the index.
-		await admin.visitSiteEditor();
-
+		await admin.visitSiteEditor( { canvas: 'edit' } );
 		// Check that the header contains the paragraph added earlier.
 		const paragraph = editor.canvas.locator(
 			`p >> text="${ paragraphText }"`
 		);
 		const templatePartWithParagraph = editor.canvas.locator(
 			'[data-type="core/template-part"]',
-			{ has: paragraph }
+			{ hasText: paragraphText }
 		);
 		await expect( templatePartWithParagraph ).toBeVisible();
 
 		// Detach the paragraph from the header template part.
 		await editor.selectBlocks( templatePartWithParagraph );
-		await editor.clickBlockOptionsMenuItem(
-			'Detach blocks from template part'
-		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
 
 		// There should be a paragraph but no header template part.
 		await expect( paragraph ).toBeVisible();
-		await expect( templatePartWithParagraph ).not.toBeVisible();
+		await expect( templatePartWithParagraph ).toBeHidden();
 	} );
 
 	test( 'shows changes in a template when a template part it contains is modified', async ( {
@@ -236,8 +225,8 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-
 		// Edit the header.
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -246,11 +235,13 @@ test.describe( 'Template Part', () => {
 			},
 		} );
 
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 
 		// Visit the index.
 		await admin.visitSiteEditor();
-
+		await editor.canvas.locator( 'body' ).click();
 		const paragraph = editor.canvas.locator(
 			`p >> text="${ paragraphText }"`
 		);
@@ -269,6 +260,7 @@ test.describe( 'Template Part', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
 		await editor.insertBlock( {
 			name: 'core/paragraph',
@@ -300,4 +292,123 @@ test.describe( 'Template Part', () => {
 
 		await expect( paragraph ).toBeVisible();
 	} );
+
+	// Reason: https://github.com/WordPress/gutenberg/issues/47003.
+	test.skip( 'can import a widget area into an empty template part', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+
+		// Add a block and select it.
+		await editor.insertBlock( {
+			name: 'core/template-part',
+		} );
+
+		// Open Block Inspector -> Advanced.
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Import the widget area.
+		await page
+			.getByRole( 'combobox', { name: 'Import widget area' } )
+			.selectOption( 'sidebar-1' );
+		await page.getByRole( 'button', { name: 'Import' } ).click();
+
+		// Verify that the widget area was imported.
+		await expect(
+			editor.canvas.locator( '[data-type="core/search"]' )
+		).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/latest-posts"]' )
+		).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/latest-comments"]' )
+		).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/archives"]' )
+		).toBeVisible();
+		await expect(
+			editor.canvas.locator( '[data-type="core/categories"]' )
+		).toBeVisible();
+	} );
+
+	test( 'can not import a widget area into a non-empty template part', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+
+		// Select existing header template part.
+		await editor.selectBlocks(
+			editor.canvas.locator( '[data-type="core/template-part"]' )
+		);
+
+		// Go to Block Inspector -> Advanced.
+		await editor.openDocumentSettingsSidebar();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Verify that the widget area import button is not there.
+		await expect(
+			page.getByRole( 'combobox', { name: 'Import widget area' } )
+		).toBeHidden();
+	} );
+
+	test( 'Keeps focus in place on undo in template parts', async ( {
+		admin,
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//header',
+			postType: 'wp_template_part',
+			canvas: 'edit',
+		} );
+
+		// Select the site title block.
+		const siteTitle = editor.canvas.getByRole( 'document', {
+			name: 'Site title',
+		} );
+		await editor.selectBlocks( siteTitle );
+
+		// Remove the default site title block.
+		await pageUtils.pressKeys( 'access+z' );
+
+		// Insert a group block with a Site Title block inside.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph', attributes: { content: 'Hello' } },
+				{ name: 'core/site-title' },
+			],
+		} );
+
+		// Type within a first block.
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Paragraph',
+		} );
+		await editor.selectBlocks( paragraph );
+		await page.keyboard.type( 'Modify' );
+
+		// Select the Site Title block inside the group.
+		const siteTitleInGroup = editor.canvas.getByRole( 'document', {
+			name: 'Site title',
+		} );
+		await editor.selectBlocks( siteTitleInGroup );
+
+		// Change heading level of the Site Title block.
+		await editor.clickBlockToolbarButton( 'Change level' );
+		const Heading3Button = page.getByRole( 'menuitemradio', {
+			name: 'Heading 3',
+		} );
+		await Heading3Button.click();
+
+		// Undo the change.
+		await pageUtils.pressKeys( 'primary+z' );
+
+		await expect( paragraph ).toBeFocused();
+	} );
 } );
diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js
new file mode 100644
index 00000000000000..ed89c7d18bf3fb
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-registration.spec.js
@@ -0,0 +1,369 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	blockTemplateRegistrationUtils: async ( { editor, page }, use ) => {
+		await use( new BlockTemplateRegistrationUtils( { editor, page } ) );
+	},
+} );
+
+test.describe( 'Block template registration', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'templates can be registered and edited', async ( {
+		admin,
+		editor,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Verify template is applied to the frontend.
+		await page.goto( '/?cat=1' );
+		await expect(
+			page.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+
+		// Verify template is listed in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		await expect( page.getByText( 'Plugin Template' ) ).toBeVisible();
+		await expect(
+			page.getByText( 'A template registered by a plugin.' )
+		).toBeVisible();
+		await expect( page.getByText( 'AuthorGutenberg' ) ).toBeVisible();
+
+		// Verify the template contents are rendered in the editor.
+		await page.getByText( 'Plugin Template' ).click();
+		await expect(
+			editor.canvas.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+
+		// Verify edits persist in the frontend.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-edited template' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+		await page.goto( '/?cat=1' );
+		await expect( page.getByText( 'User-edited template' ) ).toBeVisible();
+
+		// Verify template can be reset.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		const resetNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Plugin Template" reset.` );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		const searchResults = page.getByLabel( 'Actions' );
+		await searchResults.first().click();
+		await page.getByRole( 'menuitem', { name: 'Reset' } ).click();
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect( resetNotice ).toBeVisible();
+		await expect( savedButton ).toBeVisible();
+		await page.goto( '/?cat=1' );
+		await expect(
+			page.getByText( 'Content edited template.' )
+		).toBeHidden();
+	} );
+
+	test( 'registered templates are available in the Swap template screen', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		// Create a post.
+		await admin.visitAdminPage( '/post-new.php' );
+		await page.getByLabel( 'Close', { exact: true } ).click();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-created post.' },
+		} );
+
+		// Swap template.
+		await page.getByRole( 'button', { name: 'Post', exact: true } ).click();
+		await page.getByRole( 'button', { name: 'Template options' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
+		await page.getByText( 'Plugin Template' ).click();
+
+		// Verify the template is applied.
+		const postId = await editor.publishPost();
+		await page.goto( `?p=${ postId }` );
+		await expect(
+			page.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+	} );
+
+	test( 'themes can override registered templates', async ( {
+		admin,
+		editor,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Create a post.
+		await admin.visitAdminPage( '/post-new.php' );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-created post.' },
+		} );
+
+		// Swap template.
+		await page.getByRole( 'button', { name: 'Post', exact: true } ).click();
+		await page.getByRole( 'button', { name: 'Template options' } ).click();
+		await page.getByRole( 'menuitem', { name: 'Swap template' } ).click();
+		await page.getByText( 'Custom', { exact: true } ).click();
+
+		// Verify the theme template is applied.
+		const postId = await editor.publishPost();
+		await page.goto( `?p=${ postId }` );
+		await expect(
+			page.getByText( 'Custom template for Posts' )
+		).toBeVisible();
+		await expect(
+			page.getByText(
+				'This is a plugin-registered template and overridden by a theme.'
+			)
+		).toBeHidden();
+
+		// Verify the plugin-registered template doesn't appear in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate( 'Custom' );
+		await expect(
+			page.getByText( 'Custom Template (overridden by the theme)' )
+		).toBeHidden();
+		// Verify the template description fall backs to the plugin registered description.
+		await expect(
+			page.getByText(
+				'A custom template registered by a plugin and overridden by a theme.'
+			)
+		).toBeVisible();
+		// Verify the theme template shows the theme name as the author.
+		await expect( page.getByText( 'AuthorEmptytheme' ) ).toBeVisible();
+	} );
+
+	test( 'templates can be deleted if the registered plugin is deactivated', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		// Make an edit to the template.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		await page.getByText( 'Plugin Template' ).click();
+		await expect(
+			editor.canvas.getByText( 'This is a plugin-registered template.' )
+		).toBeVisible();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'User-customized template' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		// Deactivate plugin.
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Verify template can be deleted.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		const deletedNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Plugin Template" deleted.` );
+		const savedButton = page.getByRole( 'button', {
+			name: 'Saved',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Template'
+		);
+		const searchResults = page.getByLabel( 'Actions' );
+		await searchResults.first().click();
+		await page.getByRole( 'menuitem', { name: 'Delete' } ).click();
+		await page.getByRole( 'button', { name: 'Delete' } ).click();
+
+		await expect( deletedNotice ).toBeVisible();
+		await expect( savedButton ).toBeVisible();
+
+		// Expect template to no longer appear in the Site Editor.
+		await expect( page.getByLabel( 'Actions' ) ).toBeHidden();
+
+		// Reactivate plugin.
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+	} );
+
+	test( 'registered templates can be unregistered', async ( {
+		admin,
+		page,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Unregistered Template'
+		);
+		await expect(
+			page.getByText( 'Plugin Unregistered Template' )
+		).toBeHidden();
+	} );
+
+	test( 'WP default templates can be overridden by plugins', async ( {
+		page,
+		requestUtils,
+	} ) => {
+		const { id } = await requestUtils.createPage( {
+			title: 'Plugin override page',
+			status: 'publish',
+		} );
+		await page.goto( `?page_id=${ id }` );
+		await expect(
+			page.getByText( 'This is a plugin-registered page template.' )
+		).toBeVisible();
+	} );
+
+	test( 'user-customized templates cannot be overridden by plugins', async ( {
+		admin,
+		editor,
+		page,
+		requestUtils,
+		blockTemplateRegistrationUtils,
+	} ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Create an author template.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await page.getByLabel( 'Add New Template' ).click();
+		await page.getByRole( 'button', { name: 'Author Archives' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Author For a specific item' } )
+			.click();
+		await page.getByRole( 'option', { name: 'admin' } ).click();
+		await expect( page.getByText( 'Choose a pattern' ) ).toBeVisible();
+		await page.getByLabel( 'Close', { exact: true } ).click();
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Author template customized by the user.' },
+		} );
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+
+		await requestUtils.activatePlugin(
+			'gutenberg-test-block-template-registration'
+		);
+
+		// Verify the template edited by the user has priority over the one registered by the theme.
+		await page.goto( '?author=1' );
+		await expect(
+			page.getByText( 'Author template customized by the user.' )
+		).toBeVisible();
+		await expect(
+			page.getByText( 'This is a plugin-registered author template.' )
+		).toBeHidden();
+
+		// Verify the template registered by the plugin is not visible in the Site Editor.
+		await admin.visitSiteEditor( {
+			postType: 'wp_template',
+		} );
+		await blockTemplateRegistrationUtils.searchForTemplate(
+			'Plugin Author Template'
+		);
+		await expect( page.getByText( 'Plugin Author Template' ) ).toBeHidden();
+
+		// Reset the user-modified template.
+		const resetNotice = page
+			.getByLabel( 'Dismiss this notice' )
+			.getByText( `"Author: Admin" reset.` );
+		await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' );
+		await page
+			.locator( '.fields-field__title', { hasText: 'Author: Admin' } )
+			.click();
+		const actions = page.getByLabel( 'Actions' );
+		await actions.first().click();
+		await page.getByRole( 'menuitem', { name: 'Reset' } ).click();
+		await page.getByRole( 'button', { name: 'Reset' } ).click();
+
+		await expect( resetNotice ).toBeVisible();
+
+		// Verify the template registered by the plugin is applied in the editor...
+		await expect(
+			editor.canvas.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			editor.canvas.getByText(
+				'This is a plugin-registered author template.'
+			)
+		).toBeVisible();
+
+		// ... and the frontend.
+		await page.goto( '?author=1' );
+		await expect(
+			page.getByText( 'Author template customized by the user.' )
+		).toBeHidden();
+		await expect(
+			page.getByText( 'This is a plugin-registered author template.' )
+		).toBeVisible();
+	} );
+} );
+
+class BlockTemplateRegistrationUtils {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async searchForTemplate( searchTerm ) {
+		const searchResults = this.page.getByLabel( 'Actions' );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeGreaterThan( 0 );
+		const initialSearchResultsCount = await searchResults.count();
+		await this.page.getByPlaceholder( 'Search' ).fill( searchTerm );
+		await expect
+			.poll( async () => await searchResults.count() )
+			.toBeLessThan( initialSearchResultsCount );
+	}
+}
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
index 6a6ba6353a5e71..50a5598f400ebd 100644
--- a/test/e2e/specs/site-editor/template-revert.spec.js
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -4,8 +4,8 @@
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.use( {
-	templateRevertUtils: async ( { page }, use ) => {
-		await use( new TemplateRevertUtils( { page } ) );
+	templateRevertUtils: async ( { editor, page }, use ) => {
+		await use( new TemplateRevertUtils( { editor, page } ) );
 	},
 } );
 
@@ -22,7 +22,7 @@ test.describe( 'Template Revert', () => {
 	} );
 	test.beforeEach( async ( { admin, requestUtils } ) => {
 		await requestUtils.deleteAllTemplates( 'wp_template' );
-		await admin.visitSiteEditor();
+		await admin.visitSiteEditor( { canvas: 'edit' } );
 	} );
 
 	test( 'should delete the template after saving the reverted template', async ( {
@@ -34,16 +34,28 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 
-		await page.click( 'role=button[name="Show template details"i]' );
+		const isTemplateTabVisible = await page
+			.locator(
+				'role=region[name="Editor settings"i] >> role=button[name="Template"i]'
+			)
+			.isVisible();
+		if ( isTemplateTabVisible ) {
+			await page.click(
+				'role=region[name="Editor settings"i] >> role=button[name="Template"i]'
+			);
+		}
 
 		// The revert button isn't visible anymore.
 		await expect(
-			page.locator( 'role=menuitem[name=/Clear customizations/i]' )
-		).not.toBeVisible();
+			page.locator(
+				'role=region[name="Editor settings"i] >> role=button[name="Actions"i]'
+			)
+		).toBeDisabled();
 	} );
 
 	test( 'should show the original content after revert', async ( {
@@ -57,9 +69,10 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 
 		const contentAfter =
 			await templateRevertUtils.getCurrentSiteEditorContent();
@@ -78,9 +91,10 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 		await admin.visitSiteEditor();
 
 		const contentAfter =
@@ -97,13 +111,14 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 		const contentBefore =
 			await templateRevertUtils.getCurrentSiteEditorContent();
 
 		// Revert template and check state.
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 		const contentAfterSave =
 			await templateRevertUtils.getCurrentSiteEditorContent();
 		expect( contentAfterSave ).not.toEqual( contentBefore );
@@ -117,32 +132,6 @@ test.describe( 'Template Revert', () => {
 		expect( contentAfterUndo ).toEqual( contentBefore );
 	} );
 
-	test( 'should show the edited content after revert and clicking undo in the notice', async ( {
-		editor,
-		page,
-		templateRevertUtils,
-	} ) => {
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Test' },
-		} );
-		await editor.saveSiteEditorEntities();
-		const contentBefore =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-
-		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
-
-		// Click the snackbar "Undo" button.
-		await page.click(
-			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
-		);
-
-		const contentAfter =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-		expect( contentAfter ).toEqual( contentBefore );
-	} );
-
 	test( 'should show the original content after revert, clicking undo then redo in the header toolbar', async ( {
 		editor,
 		page,
@@ -155,9 +144,10 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 		await page.click(
 			'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
 		);
@@ -175,43 +165,6 @@ test.describe( 'Template Revert', () => {
 		expect( contentAfterRedo ).toEqual( contentBefore );
 	} );
 
-	test( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async ( {
-		editor,
-		page,
-		templateRevertUtils,
-	} ) => {
-		const contentBefore =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Test' },
-		} );
-		await editor.saveSiteEditorEntities();
-		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
-
-		// Click undo in the snackbar. This reverts revert template action.
-		await page.click(
-			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
-		);
-
-		//Check we have dummy content.
-		const contentAfterFirstUndo =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-		expect( contentAfterFirstUndo ).not.toEqual( contentBefore );
-
-		// Click undo again, this time in the header. Reverts initial dummy content.
-		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
-		);
-
-		// Check dummy content is gone.
-		const contentAfterSecondUndo =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-		expect( contentAfterSecondUndo ).toEqual( contentBefore );
-	} );
-
 	test( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async ( {
 		admin,
 		editor,
@@ -222,48 +175,24 @@ test.describe( 'Template Revert', () => {
 			name: 'core/paragraph',
 			attributes: { content: 'Test' },
 		} );
-		await editor.saveSiteEditorEntities();
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
+		} );
+		await page
+			.getByRole( 'button', { name: 'Dismiss this notice' } )
+			.getByText( /(updated|published)\./ )
+			.click();
 		const contentBefore =
 			await templateRevertUtils.getCurrentSiteEditorContent();
 
 		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
 
 		await page.click(
 			'role=region[name="Editor top bar"i] >> role=button[name="Undo"i]'
 		);
-
-		await editor.saveSiteEditorEntities();
-
-		await admin.visitSiteEditor();
-
-		const contentAfter =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-		expect( contentAfter ).toEqual( contentBefore );
-	} );
-
-	test( 'should show the edited content after revert, clicking undo in the notice and reload', async ( {
-		admin,
-		editor,
-		page,
-		templateRevertUtils,
-	} ) => {
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Test' },
+		await editor.saveSiteEditorEntities( {
+			isOnlyCurrentEntityDirty: true,
 		} );
-		await editor.saveSiteEditorEntities();
-		const contentBefore =
-			await templateRevertUtils.getCurrentSiteEditorContent();
-
-		await templateRevertUtils.revertTemplate();
-		await editor.saveSiteEditorEntities();
-
-		await page.click(
-			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
-		);
-
-		await editor.saveSiteEditorEntities();
 		await admin.visitSiteEditor();
 
 		const contentAfter =
@@ -273,26 +202,41 @@ test.describe( 'Template Revert', () => {
 } );
 
 class TemplateRevertUtils {
-	constructor( { page } ) {
+	constructor( { editor, page } ) {
+		this.editor = editor;
 		this.page = page;
 	}
 
 	async revertTemplate() {
-		await this.page.click( 'role=button[name="Show template details"i]' );
-		await this.page.click( 'role=menuitem[name=/Clear customizations/i]' );
+		await this.editor.openDocumentSettingsSidebar();
+		const isTemplateTabVisible = await this.page
+			.locator(
+				'role=region[name="Editor settings"i] >> role=tab[name="Template"i]'
+			)
+			.isVisible();
+		if ( isTemplateTabVisible ) {
+			await this.page.click(
+				'role=region[name="Editor settings"i] >> role=tab[name="Template"i]'
+			);
+		}
+		await this.page.click(
+			'role=region[name="Editor settings"i] >> role=button[name="Actions"i]'
+		);
+		await this.page.click( 'role=menuitem[name=/Reset/i]' );
+		await this.page.getByRole( 'button', { name: 'Reset' } ).click();
 		await this.page.waitForSelector(
-			'role=button[name="Dismiss this notice"i] >> text="Template reverted."'
+			'role=button[name="Dismiss this notice"i] >> text=/ reset./'
 		);
 	}
 
 	async getCurrentSiteEditorContent() {
 		return this.page.evaluate( () => {
 			const postId = window.wp.data
-				.select( 'core/edit-site' )
-				.getEditedPostId();
+				.select( 'core/editor' )
+				.getCurrentPostId();
 			const postType = window.wp.data
-				.select( 'core/edit-site' )
-				.getEditedPostType();
+				.select( 'core/editor' )
+				.getCurrentPostType();
 			const record = window.wp.data
 				.select( 'core' )
 				.getEditedEntityRecord( 'postType', postType, postId );
diff --git a/test/e2e/specs/site-editor/templates.spec.js b/test/e2e/specs/site-editor/templates.spec.js
new file mode 100644
index 00000000000000..c0dbadad2dbfb9
--- /dev/null
+++ b/test/e2e/specs/site-editor/templates.spec.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Templates', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+	} );
+	test( 'Create a custom template', async ( { admin, page } ) => {
+		const templateName = 'demo';
+		await admin.visitSiteEditor();
+		await page.getByRole( 'button', { name: 'Templates' } ).click();
+		await page.getByRole( 'button', { name: 'Add New Template' } ).click();
+		await page
+			.getByRole( 'button', {
+				name: 'A custom template can be manually applied to any post or page.',
+			} )
+			.click();
+		// Fill the template title and submit.
+		const newTemplateDialog = page.locator(
+			'role=dialog[name="Create custom template"i]'
+		);
+		const templateNameInput = newTemplateDialog.locator(
+			'role=textbox[name="Name"i]'
+		);
+		await templateNameInput.fill( templateName );
+		await page.keyboard.press( 'Enter' );
+		// Close the pattern suggestions dialog.
+		await page
+			.getByRole( 'dialog', { name: 'Choose a pattern' } )
+			.getByRole( 'button', { name: 'Close' } )
+			.click();
+		await expect(
+			page.locator(
+				`role=button[name="Dismiss this notice"i] >> text="${ templateName }" successfully created.`
+			)
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index 6d00c4ad7c3a2a..8f6c5252c9f41b 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -20,13 +20,15 @@ test.describe( 'Site editor title', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			canvas: 'edit',
 		} );
+		const title = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'heading', {
+				name: 'Index',
+			} );
 
-		const title = await page.locator(
-			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
-		);
-
-		await expect( title ).toHaveText( 'Editing template: Index' );
+		await expect( title ).toBeVisible();
 	} );
 
 	test( 'displays the selected template name in the title for the header template', async ( {
@@ -37,37 +39,14 @@ test.describe( 'Site editor title', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
+		const title = page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'heading', {
+				name: 'header',
+			} );
 
-		const title = await page.locator(
-			'role=region[name="Editor top bar"i] >> role=heading[level=1]'
-		);
-
-		await expect( title ).toHaveText( 'Editing template part: header' );
-	} );
-
-	test( "displays the selected template part's name in the secondary title when a template part is selected from List View", async ( {
-		admin,
-		page,
-	} ) => {
-		await admin.visitSiteEditor( {
-			postId: 'emptytheme//index',
-			postType: 'wp_template',
-		} );
-
-		// Select the header template part via list view.
-		await page.click( 'role=button[name="List View"i]' );
-		const listView = await page.locator(
-			'role=treegrid[name="Block navigation structure"i]'
-		);
-		await listView.locator( 'role=gridcell >> text="header"' ).click();
-		await page.click( 'role=button[name="Close List View Sidebar"i]' );
-
-		// Evaluate the document settings secondary title.
-		const secondaryTitle = await page.locator(
-			'.edit-site-document-actions__secondary-item'
-		);
-
-		await expect( secondaryTitle ).toHaveText( 'header' );
+		await expect( title ).toBeVisible();
 	} );
 } );
diff --git a/test/e2e/specs/site-editor/undo.spec.js b/test/e2e/specs/site-editor/undo.spec.js
new file mode 100644
index 00000000000000..17c4e4ada6e61b
--- /dev/null
+++ b/test/e2e/specs/site-editor/undo.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'undo', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'does not empty header', async ( { admin, page, editor } ) => {
+		await admin.visitSiteEditor( { canvas: 'edit' } );
+
+		// Check if there's a valid child block with a type (not appender).
+		await expect(
+			editor.canvas.locator(
+				'[data-type="core/template-part"] [data-type]'
+			)
+		).not.toHaveCount( 0 );
+
+		// insert a block
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// undo
+		await page
+			.getByRole( 'button', {
+				name: 'Undo',
+			} )
+			.click();
+
+		// Check if there's a valid child block with a type (not appender).
+		await expect(
+			editor.canvas.locator(
+				'[data-type="core/template-part"] [data-type]'
+			)
+		).not.toHaveCount( 0 );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
new file mode 100644
index 00000000000000..91142d5395640c
--- /dev/null
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -0,0 +1,319 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	userGlobalStylesRevisions: async (
+		{ editor, page, requestUtils },
+		use
+	) => {
+		await use(
+			new UserGlobalStylesRevisions( { editor, page, requestUtils } )
+		);
+	},
+} );
+
+test.describe( 'Style Revisions', () => {
+	let stylesPostId;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+		stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test( 'should display revisions UI when there is 1 revision', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		const currentRevisions =
+			await userGlobalStylesRevisions.getGlobalStylesRevisions();
+		// Create a revision: change a style and save it.
+		await userGlobalStylesRevisions.saveRevision( stylesPostId, {
+			color: { background: 'blue' },
+		} );
+		await userGlobalStylesRevisions.openStylesPanel();
+
+		// Now there should be enough revisions to show the revisions UI.
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+
+		const revisionButtons = page.getByRole( 'option', {
+			name: /^Changes saved by /,
+		} );
+
+		// Shows changes made in the revision.
+		await expect(
+			page
+				.getByTestId( 'global-styles-revision-changes' )
+				.getByRole( 'listitem' )
+				.first()
+		).toHaveText( 'Colors styles.' );
+
+		// There should be 2 revisions not including the reset to theme defaults button.
+		await expect( revisionButtons ).toHaveCount(
+			currentRevisions.length + 1
+		);
+	} );
+
+	test( 'should warn of unsaved changes before loading reset revision', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page.getByRole( 'button', { name: 'Colors' } ).click();
+		await page.getByRole( 'button', { name: 'Background' } ).click();
+		await page
+			.getByRole( 'option', { name: 'Color: Luminous vivid amber' } )
+			.click( { force: true } );
+
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+
+		const unSavedButton = page.getByRole( 'option', {
+			name: /^Unsaved changes/,
+		} );
+
+		await expect( unSavedButton ).toBeVisible();
+
+		await page
+			.getByRole( 'option', { name: /^Changes saved by / } )
+			.last()
+			.click();
+
+		await page.getByRole( 'button', { name: 'Apply' } ).click();
+
+		const confirm = page.getByRole( 'dialog' );
+		await expect( confirm ).toBeVisible();
+		await expect( confirm ).toHaveText(
+			/^Are you sure you want to apply this revision\? Any unsaved changes will be lost./
+		);
+
+		// This is to make sure there are no lingering unsaved changes.
+		await page
+			.getByRole( 'dialog' )
+			.getByRole( 'button', { name: 'Cancel' } )
+			.click();
+		await editor.saveSiteEditorEntities();
+	} );
+
+	test( 'should have a reset to defaults button', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		const lastRevisionItem = page
+			.getByLabel( 'Global styles revisions list' )
+			.getByRole( 'option' )
+			.last();
+		await expect( lastRevisionItem ).toContainText( 'Default styles' );
+		await lastRevisionItem.click();
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Apply the selected revision to your site.',
+			} )
+		).toBeVisible();
+	} );
+
+	test( 'should access from the site editor sidebar', async ( { page } ) => {
+		const navigationContainer = page.getByRole( 'region', {
+			name: 'Navigation',
+		} );
+		await navigationContainer
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+
+		await navigationContainer
+			.getByRole( 'button', { name: 'Revisions' } )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeVisible();
+	} );
+
+	test( 'should allow switching to style book view', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		// Search for exact names to avoid selecting the command bar button in the header.
+		const revisionsButton = page.getByRole( 'button', {
+			name: 'Revisions',
+			exact: true,
+		} );
+		const styleBookButton = page.getByRole( 'button', {
+			name: 'Style Book',
+			exact: true,
+		} );
+		await revisionsButton.click();
+		// We can see the Revisions list.
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeVisible();
+		await expect(
+			page.locator( 'iframe[name="revisions"]' )
+		).toBeVisible();
+		await expect(
+			page.locator( 'iframe[name="style-book-canvas"]' )
+		).toBeHidden();
+		await styleBookButton.click();
+		await expect(
+			page.locator( 'iframe[name="style-book-canvas"]' )
+		).toBeVisible();
+		await expect( page.locator( 'iframe[name="revisions"]' ) ).toBeHidden();
+
+		// Deactivating revisions view while the style book is open should close revisions,
+		// but not the style book.
+		await revisionsButton.click();
+
+		// Style book is still visible but...
+		await expect(
+			page.locator( 'iframe[name="style-book-canvas"]' )
+		).toBeVisible();
+		// The Revisions list is hidden.
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeHidden();
+	} );
+
+	test( 'should close revisions panel and leave style book open if activated', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		const revisionsButton = page.getByRole( 'button', {
+			name: 'Revisions',
+		} );
+		const styleBookButton = page.getByRole( 'button', {
+			name: 'Style Book',
+		} );
+		await revisionsButton.click();
+		await styleBookButton.click();
+
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeVisible();
+
+		await page.click( 'role=button[name="Back"]' );
+
+		await expect(
+			page.getByLabel( 'Global styles revisions list' )
+		).toBeHidden();
+
+		// The site editor canvas has been restored.
+		await expect(
+			page.locator( 'iframe[name="style-book-canvas"]' )
+		).toBeVisible();
+	} );
+
+	test( 'should allow opening the command menu from the header when open', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page
+			.getByRole( 'button', {
+				name: 'Revisions',
+				exact: true,
+			} )
+			.click();
+
+		// Open the command menu from the header.
+		await page
+			.getByRole( 'heading', {
+				name: 'Style Revisions',
+			} )
+			.click();
+
+		await expect(
+			page.getByLabel( 'Search commands and settings' )
+		).toBeVisible();
+	} );
+
+	test( 'should paginate', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await editor.canvas.locator( 'body' ).click();
+		// Create > 10 revisions to display pagination navigation component.
+		for ( let i = 9; i < 21; i++ ) {
+			await userGlobalStylesRevisions.saveRevision( stylesPostId, {
+				typography: { fontSize: `${ i }px` },
+			} );
+		}
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page.getByRole( 'button', { name: 'Revisions' } ).click();
+		const pagination = page.getByLabel(
+			'Global Styles pagination navigation'
+		);
+		await expect( pagination ).toContainText( '1 of 2' );
+		await pagination.getByRole( 'button', { name: 'Next page' } ).click();
+		await expect( pagination ).toContainText( '2 of 2' );
+	} );
+} );
+
+class UserGlobalStylesRevisions {
+	constructor( { editor, page, requestUtils } ) {
+		this.page = page;
+		this.editor = editor;
+		this.requestUtils = requestUtils;
+	}
+
+	async getGlobalStylesRevisions() {
+		const stylesPostId =
+			await this.requestUtils.getCurrentThemeGlobalStylesPostId();
+		if ( stylesPostId ) {
+			return await this.requestUtils.getThemeGlobalStylesRevisions(
+				stylesPostId
+			);
+		}
+		return [];
+	}
+
+	async openStylesPanel() {
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+	}
+
+	async saveRevision( stylesPostId, styles = {}, settings = {} ) {
+		await this.page.evaluate(
+			async ( [ _stylesPostId, _styles, _settings ] ) => {
+				window.wp.data
+					.dispatch( 'core' )
+					.editEntityRecord( 'root', 'globalStyles', _stylesPostId, {
+						id: _stylesPostId,
+						settings: _settings,
+						styles: _styles,
+					} );
+			},
+			[ stylesPostId, styles, settings ]
+		);
+		await this.editor.saveSiteEditorEntities();
+	}
+}
diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js
index e854b31cee481d..ad661175b6bdfe 100644
--- a/test/e2e/specs/site-editor/writing-flow.spec.js
+++ b/test/e2e/specs/site-editor/writing-flow.spec.js
@@ -1,17 +1,7 @@
 /**
  * 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 } ) );
-	},
-} );
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
 test.describe( 'Site editor writing flow', () => {
 	test.beforeAll( async ( { requestUtils } ) => {
@@ -33,8 +23,8 @@ test.describe( 'Site editor writing flow', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-
 		// Select the first site title block.
 		const siteTitleBlock = editor.canvas.locator(
 			'role=document[name="Block: Site Title"i]'
@@ -43,7 +33,7 @@ test.describe( 'Site editor writing flow', () => {
 		await editor.selectBlocks( siteTitleBlock );
 
 		// Shift tab to the toolbar.
-		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await pageUtils.pressKeys( 'shift+Tab' );
 		const blockToolbarButton = page.locator(
 			'role=toolbar[name="Block tools"i] >> role=button[name="Site Title"i]'
 		);
@@ -61,8 +51,8 @@ test.describe( 'Site editor writing flow', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//header',
 			postType: 'wp_template_part',
+			canvas: 'edit',
 		} );
-
 		// Make sure the sidebar is open.
 		await editor.openDocumentSettingsSidebar();
 
@@ -74,10 +64,10 @@ test.describe( 'Site editor writing flow', () => {
 		await editor.selectBlocks( siteTaglineBlock );
 
 		// Tab to the inspector, tabbing three times to go past the two resize handles.
-		await pageUtils.pressKeyTimes( 'Tab', 3 );
-		const inspectorTemplateTab = page.locator(
-			'role=region[name="Editor settings"i] >> role=button[name="Template"i]'
+		await pageUtils.pressKeys( 'Tab', { times: 3 } );
+		const inspectorBlockTab = page.locator(
+			'role=region[name="Editor settings"i] >> role=tab[name="Block"i]'
 		);
-		await expect( inspectorTemplateTab ).toBeFocused();
+		await expect( inspectorBlockTab ).toBeFocused();
 	} );
 } );
diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js
new file mode 100644
index 00000000000000..77d121e1999397
--- /dev/null
+++ b/test/e2e/specs/site-editor/zoom-out.spec.js
@@ -0,0 +1,261 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+const EDITOR_ZOOM_OUT_CONTENT = `
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
+<main class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-2-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>First Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>First Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>First Section End</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>Second Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>Second Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second Section End</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-2-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>Third Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>Third Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Third Section End</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>Fourth Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>Fourth Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Fourth Section End</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></main>
+<!-- /wp:group -->`;
+
+const EDITOR_ZOOM_OUT_CONTENT_NO_SECTION_ROOT = `<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base-2","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
+<div class="wp-block-group has-base-2-background-color has-background" style="min-height:100vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph -->
+<p>First Section Start</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
+<p>First Section Center</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>First Section End</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->`;
+
+test.describe( 'Zoom Out', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			postId: 'twentytwentyfour//index',
+			postType: 'wp_template',
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'Entering zoomed out mode zooms the canvas', async ( {
+		page,
+		editor,
+	} ) => {
+		await page.getByLabel( 'Zoom Out' ).click();
+		const iframe = page.locator( 'iframe[name="editor-canvas"]' );
+		const html = editor.canvas.locator( 'html' );
+
+		// Check that the html is scaled.
+		await expect( html ).toHaveCSS(
+			'scale',
+			new RegExp( /0\.[5-8][0-9]*/, 'i' )
+		);
+		const iframeRect = await iframe.boundingBox();
+		const htmlRect = await html.boundingBox();
+
+		// Check that the iframe is larger than the html.
+		expect( iframeRect.width ).toBeGreaterThan( htmlRect.width );
+
+		// Check that the zoomed out content has a frame around it.
+		const paddingTop = await html.evaluate( ( element ) => {
+			const paddingValue = window.getComputedStyle( element ).paddingTop;
+			return parseFloat( paddingValue );
+		} );
+		expect( htmlRect.y + paddingTop ).toBeGreaterThan( iframeRect.y );
+		expect( htmlRect.x ).toBeGreaterThan( iframeRect.x );
+	} );
+
+	test( 'Toggling zoom state should keep content centered', async ( {
+		page,
+		editor,
+	} ) => {
+		// Add some patterns into the page.
+		await editor.setContent( EDITOR_ZOOM_OUT_CONTENT );
+		// Find the scroll container element
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			window.scrollContainer =
+				window.wp.dom.getScrollContainer( activeElement );
+			return window.scrollContainer;
+		} );
+
+		// Test: Test from top of page (scrollTop 0)
+		// Enter Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+
+		const scrollTopZoomed = await page.evaluate( () => {
+			return window.scrollContainer.scrollTop;
+		} );
+
+		expect( scrollTopZoomed ).toBe( 0 );
+
+		// Exit Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+
+		const scrollTopNoZoom = await page.evaluate( () => {
+			return window.scrollContainer.scrollTop;
+		} );
+
+		expect( scrollTopNoZoom ).toBe( 0 );
+
+		// Test: Should center the scroll position when zooming out/in
+		const firstSectionEnd = editor.canvas.locator(
+			'text=First Section End'
+		);
+		const secondSectionStart = editor.canvas.locator(
+			'text=Second Section Start'
+		);
+		const secondSectionCenter = editor.canvas.locator(
+			'text=Second Section Center'
+		);
+		const secondSectionEnd = editor.canvas.locator(
+			'text=Second Section End'
+		);
+		const thirdSectionStart = editor.canvas.locator(
+			'text=Third Section Start'
+		);
+		const thirdSectionCenter = editor.canvas.locator(
+			'text=Third Section Center'
+		);
+		const thirdSectionEnd = editor.canvas.locator(
+			'text=Third Section End'
+		);
+		const fourthSectionStart = editor.canvas.locator(
+			'text=Fourth Section Start'
+		);
+
+		// Test for second section
+		// Playwright scrolls it to the center of the viewport, so this is what we scroll to.
+		await secondSectionCenter.scrollIntoViewIfNeeded();
+
+		// Because the text is spread with a group height of 100vh, they should both be visible.
+		await expect( firstSectionEnd ).not.toBeInViewport();
+		await expect( secondSectionStart ).toBeInViewport();
+		await expect( secondSectionEnd ).toBeInViewport();
+		await expect( thirdSectionStart ).not.toBeInViewport();
+
+		// After zooming, if we zoomed out with the correct central point, they should both still be visible when toggling zoom out state
+		// Enter Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+		await expect( firstSectionEnd ).toBeInViewport();
+		await expect( secondSectionStart ).toBeInViewport();
+		await expect( secondSectionEnd ).toBeInViewport();
+		await expect( thirdSectionStart ).toBeInViewport();
+
+		// Exit Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+		await expect( firstSectionEnd ).not.toBeInViewport();
+		await expect( secondSectionStart ).toBeInViewport();
+		await expect( secondSectionEnd ).toBeInViewport();
+		await expect( thirdSectionStart ).not.toBeInViewport();
+
+		// Test for third section
+		// Playwright scrolls it to the center of the viewport, so this is what we scroll to.
+		await thirdSectionCenter.scrollIntoViewIfNeeded();
+
+		// Because the text is spread with a group height of 100vh, they should both be visible.
+		await expect( secondSectionEnd ).not.toBeInViewport();
+		await expect( thirdSectionStart ).toBeInViewport();
+		await expect( thirdSectionEnd ).toBeInViewport();
+		await expect( fourthSectionStart ).not.toBeInViewport();
+
+		// After zooming, if we zoomed out with the correct central point, they should both still be visible when toggling zoom out state
+		// Enter Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+		await expect( secondSectionEnd ).toBeInViewport();
+		await expect( thirdSectionStart ).toBeInViewport();
+		await expect( thirdSectionEnd ).toBeInViewport();
+		await expect( fourthSectionStart ).toBeInViewport();
+
+		// Exit Zoom Out
+		await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+		await expect( secondSectionEnd ).not.toBeInViewport();
+		await expect( thirdSectionStart ).toBeInViewport();
+		await expect( thirdSectionEnd ).toBeInViewport();
+		await expect( fourthSectionStart ).not.toBeInViewport();
+	} );
+
+	test( 'Zoom Out cannot be activated when the section root is missing', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.setContent( EDITOR_ZOOM_OUT_CONTENT_NO_SECTION_ROOT );
+
+		// Check that the Zoom Out toggle button is not visible.
+		await expect(
+			page.getByRole( 'button', { name: 'Zoom Out' } )
+		).toBeHidden();
+
+		// Check that activating the Patterns tab in the Inserter does not activate
+		// Zoom Out.
+		await page
+			.getByRole( 'button', {
+				name: 'Block Inserter',
+				exact: true,
+			} )
+			.click();
+
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+
+		await expect( page.locator( '.is-zoomed-out' ) ).toBeHidden();
+	} );
+} );
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 6b2b06d970e53d..04b09da84928e1 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -12,11 +12,17 @@ const {
  * @typedef {import('@playwright/test').FrameLocator} FrameLocator
  * @typedef {import('@wordpress/e2e-test-utils-playwright').PageUtils} PageUtils
  * @typedef {import('@wordpress/e2e-test-utils-playwright').RequestUtils} RequestUtils
+ * @typedef {import('@wordpress/e2e-test-utils-playwright').Editor} Editor
  */
 
 test.use( {
-	widgetsCustomizerPage: async ( { admin, page, pageUtils }, use ) => {
-		await use( new WidgetsCustomizerPage( { admin, page, pageUtils } ) );
+	widgetsCustomizerPage: async (
+		{ admin, page, pageUtils, editor },
+		use
+	) => {
+		await use(
+			new WidgetsCustomizerPage( { admin, page, pageUtils, editor } )
+		);
 	},
 } );
 
@@ -73,7 +79,7 @@ test.describe( 'Widgets Customizer', () => {
 		);
 
 		const inlineInserterSearchBox = page.locator(
-			'role=searchbox[name="Search for blocks and patterns"i]'
+			'role=searchbox[name="Search"i]'
 		);
 
 		await expect( inlineInserterSearchBox ).toBeFocused();
@@ -82,9 +88,11 @@ test.describe( 'Widgets Customizer', () => {
 
 		await page.click( 'role=option[name="Search"i]' );
 
-		await page.focus(
-			'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]'
-		);
+		await page
+			.locator(
+				'role=document[name="Block: Search"i] >> role=textbox[name="Label text"i]'
+			)
+			.focus();
 
 		await page.keyboard.type( 'My ' );
 
@@ -143,7 +151,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Go back to the widgets editor.
 		await backButton.click();
 		await expect( widgetsFooter1Heading ).toBeVisible();
-		await expect( inspectorHeading ).not.toBeVisible();
+		await expect( inspectorHeading ).toBeHidden();
 
 		await editor.clickBlockToolbarButton( 'Options' );
 		await showMoreSettingsButton.click();
@@ -157,7 +165,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Go back to the widgets editor.
 		await expect( widgetsFooter1Heading ).toBeVisible();
 
-		await expect( inspectorHeading ).not.toBeVisible();
+		await expect( inspectorHeading ).toBeHidden();
 	} );
 
 	test( 'should handle the inserter outer section', async ( {
@@ -203,11 +211,11 @@ test.describe( 'Widgets Customizer', () => {
 		await expect( publishSettings ).toBeVisible();
 
 		// Expect the inserter outer section to be closed.
-		await expect( inserterHeading ).not.toBeVisible();
+		await expect( inserterHeading ).toBeHidden();
 
 		// Focus the block and start typing to hide the block toolbar.
 		// Shouldn't be needed if we automatically hide the toolbar on blur.
-		await page.focus( 'role=document[name="Paragraph block"i]' );
+		await page.focus( 'role=document[name="Block: Paragraph"i]' );
 		await page.keyboard.type( ' ' );
 
 		// Open the inserter outer section.
@@ -222,7 +230,7 @@ test.describe( 'Widgets Customizer', () => {
 		await page.click( 'role=button[name=/Back$/] >> visible=true' );
 
 		// Expect the inserter outer section to be closed.
-		await expect( inserterHeading ).not.toBeVisible();
+		await expect( inserterHeading ).toBeHidden();
 	} );
 
 	test( 'should move focus to the block', async ( {
@@ -235,7 +243,7 @@ test.describe( 'Widgets Customizer', () => {
 			'sidebar-1'
 		);
 		await requestUtils.addWidgetBlock(
-			`<!-- wp:heading -->\n<h2>First Heading</h2>\n<!-- /wp:heading -->`,
+			`<!-- wp:heading -->\n<h2 class="wp-block-heading">First Heading</h2>\n<!-- /wp:heading -->`,
 			'sidebar-1'
 		);
 
@@ -257,11 +265,12 @@ test.describe( 'Widgets Customizer', () => {
 		await editParagraphWidget.click();
 
 		const firstParagraphBlock = page.locator(
-			'role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await expect( firstParagraphBlock ).toBeFocused();
 
 		// Expect to focus on a already focused widget.
+		await paragraphWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar
 		await editParagraphWidget.click();
 		await expect( firstParagraphBlock ).toBeFocused();
 
@@ -272,6 +281,8 @@ test.describe( 'Widgets Customizer', () => {
 		const editHeadingWidget = headingWidget.locator(
 			'role=button[name="Click to edit this widget."i]'
 		);
+
+		await headingWidget.click(); // noop click on the widget text to unfocus the editor and hide toolbar
 		await editHeadingWidget.click();
 
 		const headingBlock = page.locator(
@@ -307,7 +318,7 @@ test.describe( 'Widgets Customizer', () => {
 			await page.click(
 				'role=heading[name="Customizing ▸ Widgets Footer #1"i][level=3]'
 			);
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 
 			await paragraphBlock.focus();
 			await editor.showBlockToolbar();
@@ -316,7 +327,7 @@ test.describe( 'Widgets Customizer', () => {
 		// Expect clicking on the preview iframe should clear the selection.
 		{
 			await page.click( '#customize-preview' );
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 
 			await paragraphBlock.focus();
 			await editor.showBlockToolbar();
@@ -331,7 +342,7 @@ test.describe( 'Widgets Customizer', () => {
 			const { x, y, width, height } = await editorContainer.boundingBox();
 			// Simulate Clicking on the empty space at the end of the editor.
 			await page.mouse.click( x + width / 2, y + height + 10 );
-			await expect( blockToolbar ).not.toBeVisible();
+			await expect( blockToolbar ).toBeHidden();
 		}
 	} );
 
@@ -339,17 +350,15 @@ test.describe( 'Widgets Customizer', () => {
 		editor,
 		page,
 		widgetsCustomizerPage,
+		pageUtils,
 	} ) => {
 		await widgetsCustomizerPage.visitCustomizerPage();
 		await widgetsCustomizerPage.expandWidgetArea( 'Footer #1' );
 
-		const legacyWidgetBlock = await widgetsCustomizerPage.addBlock(
-			'Legacy Widget'
-		);
+		const legacyWidgetBlock =
+			await widgetsCustomizerPage.addBlock( 'Legacy Widget' );
 		await page
-			.locator(
-				'role=combobox[name="Select a legacy widget to display:"i]'
-			)
+			.locator( 'role=combobox[name="Legacy widget"i]' )
 			.selectOption( 'test_widget' );
 
 		await expect(
@@ -365,7 +374,7 @@ test.describe( 'Widgets Customizer', () => {
 		await titleInput.type( 'Hello Title' );
 
 		// Unfocus the current legacy widget.
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 
 		const previewFrame = widgetsCustomizerPage.previewFrame;
 		const legacyWidgetPreviewFrame = page.frameLocator(
@@ -389,18 +398,17 @@ test.describe( 'Widgets Customizer', () => {
 
 		// Testing removing the block.
 		await editor.clickBlockToolbarButton( 'Options' );
-		await page.click( 'role=menuitem[name=/Remove Legacy Widget/]' );
+		await page.click( 'role=menuitem[name=/Delete/]' );
 
 		// Add it back again using the variant.
-		const testWidgetBlock = await widgetsCustomizerPage.addBlock(
-			'Test Widget'
-		);
+		const testWidgetBlock =
+			await widgetsCustomizerPage.addBlock( 'Test Widget' );
 
 		titleInput = testWidgetBlock.locator( 'role=textbox[name="Title:"i]' );
 
 		await titleInput.type( 'Hello again!' );
 		// Unfocus the current legacy widget.
-		await page.keyboard.press( 'Tab' );
+		await pageUtils.pressKeys( 'Tab' );
 
 		// Expect the preview in block to show when unfocusing the legacy widget block.
 		await expect(
@@ -453,20 +461,10 @@ test.describe( 'Widgets Customizer', () => {
 		// Expect pressing the Escape key to close the dropdown,
 		// but not close the editor.
 		await page.keyboard.press( 'Escape' );
-		await expect( optionsMenu ).not.toBeVisible();
+		await expect( optionsMenu ).toBeHidden();
 		await expect( paragraphBlock ).toBeVisible();
 
 		await paragraphBlock.focus();
-
-		// Expect pressing the Escape key to enter navigation mode,
-		// but not close the editor.
-		await page.keyboard.press( 'Escape' );
-		await expect(
-			page.locator(
-				'*[aria-live="polite"][aria-relevant="additions text"] >> text=/^You are currently in navigation mode./'
-			)
-		).toHaveCount( 1 );
-		await expect( paragraphBlock ).toBeVisible();
 	} );
 
 	test( 'should move (inner) blocks to another sidebar', async ( {
@@ -489,7 +487,7 @@ test.describe( 'Widgets Customizer', () => {
 
 		// Refocus the paragraph block.
 		await page.focus(
-			'*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await editor.clickBlockToolbarButton( 'Move to widget area' );
 
@@ -504,7 +502,7 @@ test.describe( 'Widgets Customizer', () => {
 
 		// The paragraph block should be moved to the new sidebar and have focus.
 		const movedParagraphBlock = page.locator(
-			'*role=document[name="Paragraph block"i] >> text="First Paragraph"'
+			'*role=document[name="Block: Paragraph"i] >> text="First Paragraph"'
 		);
 		await expect( movedParagraphBlock ).toBeVisible();
 		await expect( movedParagraphBlock ).toBeFocused();
@@ -521,7 +519,7 @@ test.describe( 'Widgets Customizer', () => {
 		// integrate the G sidebar inside the customizer.
 		await expect(
 			page.locator( 'role=heading[name=/Block Settings/][level=3]' )
-		).not.toBeVisible();
+		).toBeHidden();
 	} );
 
 	test( 'should stay in block settings after making a change in that area', async ( {
@@ -547,7 +545,7 @@ test.describe( 'Widgets Customizer', () => {
 		).toBeDisabled();
 
 		// Select the paragraph block
-		await page.focus( 'role=document[name="Paragraph block"i]' );
+		await page.focus( 'role=document[name="Block: Paragraph"i]' );
 
 		// Click the three dots button, then click "Show More Settings".
 		await editor.clickBlockToolbarButton( 'Options' );
@@ -609,11 +607,13 @@ class WidgetsCustomizerPage {
 	 * @param {Admin}     config.admin
 	 * @param {Page}      config.page
 	 * @param {PageUtils} config.pageUtils
+	 * @param {Editor}    config.editor
 	 */
-	constructor( { admin, page, pageUtils } ) {
+	constructor( { admin, page, pageUtils, editor } ) {
 		this.admin = admin;
 		this.page = page;
 		this.pageUtils = pageUtils;
+		this.editor = editor;
 
 		/** @type {FrameLocator} */
 		this.previewFrame = this.page
@@ -627,10 +627,8 @@ class WidgetsCustomizerPage {
 		await this.admin.visitAdminPage( 'customize.php' );
 
 		// Disable welcome guide.
-		await this.page.evaluate( () => {
-			window.wp.data
-				.dispatch( 'core/preferences' )
-				.set( 'core/customize-widgets', 'welcomeGuide', false );
+		await this.editor.setPreferences( 'core/customize-widgets', {
+			welcomeGuide: false,
 		} );
 	}
 
@@ -653,9 +651,7 @@ class WidgetsCustomizerPage {
 			'role=toolbar[name="Document tools"i] >> role=button[name="Add block"i]'
 		);
 
-		const searchBox = this.page.locator(
-			'role=searchbox[name="Search for blocks and patterns"i]'
-		);
+		const searchBox = this.page.locator( 'role=searchbox[name="Search"i]' );
 
 		// Clear the input.
 		await searchBox.evaluate( ( node ) => {
diff --git a/test/e2e/specs/widgets/editing-widgets.spec.js b/test/e2e/specs/widgets/editing-widgets.spec.js
new file mode 100644
index 00000000000000..019e07fe87daac
--- /dev/null
+++ b/test/e2e/specs/widgets/editing-widgets.spec.js
@@ -0,0 +1,724 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test: base,
+	expect,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+/** @typedef {import('@wordpress/e2e-test-utils-playwright').Editor} Editor */
+/** @typedef {import('@playwright/test').Locator} Locator */
+
+/** @type {ReturnType<typeof base.extend<{widgetsScreen: WidgetsScreen}>>} */
+const test = base.extend( {
+	widgetsScreen: async ( { page, editor }, use ) => {
+		await use( new WidgetsScreen( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Widgets screen', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.visitAdminPage( 'widgets.php' );
+
+		await editor.setPreferences( 'core/edit-widgets', {
+			welcomeGuide: false,
+		} );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllWidgets();
+	} );
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			// TODO: Ideally we can bundle our test theme directly in the repo.
+			requestUtils.activateTheme( 'twentytwenty' ),
+			requestUtils.deleteAllWidgets(),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should insert content using the global inserter', async ( {
+		page,
+		pageUtils,
+		widgetsScreen,
+	} ) => {
+		await expect(
+			widgetsScreen.updateButton,
+			'Update button should start out disabled'
+		).toBeDisabled();
+
+		const [ firstWidgetArea, secondWidgetArea ] =
+			await widgetsScreen.widgetAreas.all();
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+			.click();
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await expect(
+			blockLibrary.getByRole( 'heading', { level: 2 } ).nth( 0 ),
+			'Check that there are categorizations in the inserter (#26329)'
+		).toBeVisible();
+
+		const addParagraphBlock =
+			await widgetsScreen.getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.hover();
+		// TODO: We can add a test for the insertion indicator here.
+		await addParagraphBlock.click();
+
+		await expect(
+			widgetsScreen.updateButton,
+			'Adding content should enable the Update button'
+		).toBeEnabled();
+
+		const addedParagraphBlockInFirstWidgetArea = firstWidgetArea.getByRole(
+			'document',
+			{ name: /^Empty block/ }
+		);
+
+		await addedParagraphBlockInFirstWidgetArea.focus();
+		await page.keyboard.type( 'First Paragraph' );
+
+		await widgetsScreen.getBlockInGlobalInserter( 'Paragraph' );
+		await pageUtils.pressKeys( 'Tab', { times: 2 } );
+		// TODO: We can add a test for the insertion indicator here.
+		await addParagraphBlock.click();
+
+		await addedParagraphBlockInFirstWidgetArea.focus();
+		await page.keyboard.type( 'Second Paragraph' );
+
+		const addShortCodeBlock =
+			await widgetsScreen.getBlockInGlobalInserter( 'Shortcode' );
+		await addShortCodeBlock.click();
+
+		const shortCodeInput = page.getByRole( 'textbox', {
+			name: 'Shortcode text',
+		} );
+		await shortCodeInput.focus();
+		// The famous Big Buck Bunny video.
+		await shortCodeInput.type(
+			'[video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"]'
+		);
+
+		// Add to the second widget area.
+		await secondWidgetArea.click();
+		await widgetsScreen.getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.click();
+
+		const addedParagraphBlockInSecondWidgetArea =
+			secondWidgetArea.getByRole( 'document', {
+				name: /^Empty block/,
+			} );
+		await addedParagraphBlockInSecondWidgetArea.focus();
+		await page.keyboard.type( 'Third Paragraph' );
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Second Paragraph' },
+				},
+				{
+					name: 'core/shortcode',
+					attributes: {
+						text: '[video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"]',
+					},
+				},
+			],
+			'sidebar-2': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Third Paragraph' },
+				},
+			],
+		} );
+	} );
+
+	test( 'Should insert content using the inline inserter', async ( {
+		page,
+		widgetsScreen,
+	} ) => {
+		const firstWidgetArea = widgetsScreen.widgetAreas.first();
+
+		const inlineInserterButton = firstWidgetArea.getByRole( 'button', {
+			name: 'Add block',
+		} );
+		await inlineInserterButton.click();
+
+		const inlineQuickInserter = page.getByRole( 'listbox', {
+			name: 'Blocks',
+		} );
+
+		const paragraphBlock = inlineQuickInserter.getByRole( 'option', {
+			name: 'Paragraph',
+		} );
+		await paragraphBlock.click();
+
+		const firstParagraphBlock = firstWidgetArea.getByRole( 'document', {
+			name: /^Empty block/,
+		} );
+		await firstParagraphBlock.focus();
+		await page.keyboard.type( 'First Paragraph' );
+
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second Paragraph' );
+
+		const secondParagraphBlock = firstWidgetArea
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: 'Second Paragraph' } );
+
+		const secondParagraphBlockBoundingBox =
+			await secondParagraphBlock.boundingBox();
+
+		// Click outside the block to move the focus back to the widget area.
+		await firstWidgetArea.click( {
+			position: {
+				x: 0,
+				y: ( await firstWidgetArea.boundingBox() ).height - 1,
+			},
+		} );
+
+		// Hover above the last block to trigger the inline inserter between blocks.
+		await page.mouse.move(
+			secondParagraphBlockBoundingBox.x +
+				secondParagraphBlockBoundingBox.width / 2,
+			secondParagraphBlockBoundingBox.y - 10
+		);
+
+		// There will be 2 matches here.
+		// One is the in-between inserter,
+		// and the other one is the button block appender.
+		const inBetweenInserterButton = page
+			.getByRole( 'button', {
+				name: 'Add block',
+			} )
+			.first();
+		await inBetweenInserterButton.click();
+
+		const inserterSearchBox = page.getByRole( 'searchbox', {
+			name: 'Search',
+		} );
+		await expect( inserterSearchBox ).toBeFocused();
+
+		await page.keyboard.type( 'Heading' );
+
+		await inlineQuickInserter
+			.getByRole( 'option', { name: 'Heading' } )
+			.click();
+
+		await expect(
+			firstWidgetArea.getByRole( 'document', {
+				name: 'Block: Heading',
+			} )
+		).toBeFocused();
+		await page.keyboard.type( 'My Heading' );
+
+		await widgetsScreen.saveWidgets();
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+				{
+					name: 'core/heading',
+					attributes: { content: 'My Heading' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Second Paragraph' },
+				},
+			],
+		} );
+	} );
+
+	// This test is broken because the REST API endpoint to delete the marquee doesn't work.
+	// eslint-disable-next-line playwright/no-skipped-test
+	test.describe.skip( 'Function widgets', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.deleteAllWidgets();
+			await requestUtils.activatePlugin(
+				'gutenberg-test-marquee-widget'
+			);
+		} );
+
+		test.beforeEach( async ( { requestUtils } ) => {
+			await requestUtils.deleteAllWidgets();
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-marquee-widget'
+			);
+		} );
+
+		test( 'Should add and save the marquee widget', async ( {
+			page,
+			editor,
+			widgetsScreen,
+		} ) => {
+			const firstWidgetArea = widgetsScreen.widgetAreas.first();
+			await firstWidgetArea.waitFor();
+			{
+				const [ { clientId: firstWidgetAreaClientId } ] =
+					await editor.getBlocks( { full: true } );
+
+				await editor.insertBlock(
+					{
+						name: 'core/legacy-widget',
+						attributes: { id: 'marquee_greeting' },
+					},
+					{ clientId: firstWidgetAreaClientId }
+				);
+			}
+
+			const marqueeInputs = page.getByTestId( 'marquee-greeting' );
+
+			await marqueeInputs.fill( 'Howdy' );
+
+			// The first marquee is saved after clicking the form save button.
+			await page
+				.getByRole( 'document', { name: 'Block: Legacy Widget' } )
+				.getByRole( 'button', { name: 'Save' } )
+				.click();
+
+			await widgetsScreen.saveWidgets();
+
+			await expect
+				.poll( widgetsScreen.getWidgetAreaBlocks )
+				.toMatchObject( {
+					'sidebar-1': [
+						{
+							name: 'core/legacy-widget',
+							attributes: {
+								id: 'marquee_greeting',
+								instance: { raw: { title: 'Howdy' } },
+							},
+						},
+					],
+				} );
+
+			await page.reload();
+
+			await expect
+				.poll( widgetsScreen.getWidgetAreaBlocks )
+				.toMatchObject( {
+					'sidebar-1': [
+						{
+							name: 'core/legacy-widget',
+							attributes: {
+								id: 'marquee_greeting',
+								instance: { raw: { title: 'Howdy' } },
+							},
+						},
+					],
+				} );
+
+			await firstWidgetArea.waitFor();
+			{
+				const [ { clientId: firstWidgetAreaClientId } ] =
+					await editor.getBlocks( { full: true } );
+
+				await editor.insertBlock(
+					{
+						name: 'core/legacy-widget',
+						attributes: { id: 'marquee_greeting' },
+					},
+					{ clientId: firstWidgetAreaClientId }
+				);
+			}
+
+			await expect( marqueeInputs ).toHaveCount( 2 );
+			await marqueeInputs.first().fill( 'first Howdy' );
+			await marqueeInputs.last().fill( 'Second Howdy' );
+
+			// No marquee should be changed without clicking on their "save" button.
+			// The second marquee shouldn't be stored as a widget.
+			// See #32978 for more info.
+			{
+				await widgetsScreen.saveWidgets();
+
+				await page.reload();
+
+				await expect( marqueeInputs ).toHaveCount( 1 );
+				await expect
+					.poll( widgetsScreen.getWidgetAreaBlocks )
+					.toMatchObject( {
+						'sidebar-1': [
+							{
+								name: 'core/legacy-widget',
+								attributes: {
+									id: 'marquee_greeting',
+									instance: { raw: { title: 'Howdy' } },
+								},
+							},
+						],
+					} );
+			}
+		} );
+	} );
+
+	test( 'Should duplicate the widgets', async ( {
+		page,
+		editor,
+		widgetsScreen,
+	} ) => {
+		const firstWidgetArea = widgetsScreen.widgetAreas.first();
+		await firstWidgetArea.waitFor();
+		const [ { clientId: firstWidgetAreaClientId } ] =
+			await editor.getBlocks( { full: true } );
+
+		await editor.insertBlock(
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'First Paragraph' },
+			},
+			{ clientId: firstWidgetAreaClientId }
+		);
+
+		const firstParagraphBlock = firstWidgetArea.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await firstParagraphBlock.focus();
+
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'Options' );
+		await page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem', { name: 'Duplicate' } )
+			.click();
+
+		const firstWidgetAreaBlocks = await editor.getBlocks( {
+			clientId: firstWidgetAreaClientId,
+			full: true,
+		} );
+		expect( firstWidgetAreaBlocks[ 0 ].name ).toBe(
+			firstWidgetAreaBlocks[ 1 ].name
+		);
+		expect( firstWidgetAreaBlocks[ 0 ].content ).toBe(
+			firstWidgetAreaBlocks[ 1 ].content
+		);
+		expect( firstWidgetAreaBlocks[ 0 ].clientId ).not.toBe(
+			firstWidgetAreaBlocks[ 1 ].clientId
+		);
+	} );
+
+	test( 'Should display legacy widgets', async ( {
+		page,
+		requestUtils,
+		widgetsScreen,
+	} ) => {
+		// Get the default empty instance of a legacy search widget.
+		const { instance: defaultSearchInstance } = await requestUtils.rest( {
+			method: 'POST',
+			path: '/wp/v2/widget-types/search/encode',
+			data: { instance: {} },
+		} );
+
+		// Create a search widget in the first sidebar using the default instance.
+		const widget = await requestUtils.rest( {
+			method: 'POST',
+			path: '/wp/v2/widgets',
+			data: {
+				id_base: 'search',
+				sidebar: 'sidebar-1',
+				instance: defaultSearchInstance,
+			},
+		} );
+		// Add it to the first widget area. The above request for some reason isn't enough.
+		await requestUtils.rest( {
+			method: 'POST',
+			path: '/wp/v2/sidebars/sidebar-1',
+			data: {
+				widgets: [ widget.id ],
+			},
+		} );
+
+		await page.reload();
+
+		const legacyWidgetPreviewFrame = page.frameLocator(
+			'[title="Legacy Widget Preview"]'
+		);
+
+		// Expect to have search input.
+		await expect(
+			legacyWidgetPreviewFrame.getByRole( 'searchbox', {
+				includeHidden: true,
+			} )
+		).toBeVisible();
+
+		// Focus the Legacy Widget block.
+		const legacyWidget = page.getByRole( 'document', {
+			name: 'Block: Legacy Widget',
+		} );
+		await legacyWidget.focus();
+
+		// There should be a title at the top of the widget form.
+		await expect(
+			legacyWidget.getByRole( 'heading', { level: 3 } )
+		).toHaveText( 'Search' );
+
+		// Update the widget form.
+		await legacyWidget
+			.getByRole( 'textbox', { name: 'Title' } )
+			.fill( 'Search Title' );
+
+		// Switch to Navigation mode.
+		await page.keyboard.press( 'Escape' );
+
+		// Expect to have search title.
+		await expect(
+			legacyWidgetPreviewFrame.getByRole( 'heading', {
+				includeHidden: true,
+			} )
+		).toHaveText( 'Search Title' );
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/legacy-widget',
+					attributes: {
+						idBase: 'search',
+						instance: { raw: { title: 'Search Title' } },
+					},
+				},
+			],
+		} );
+	} );
+
+	test( 'allows widgets to be moved between widget areas using the dropdown in the block toolbar', async ( {
+		page,
+		editor,
+		widgetsScreen,
+	} ) => {
+		const firstWidgetArea = widgetsScreen.widgetAreas.first();
+		await firstWidgetArea.waitFor();
+		const [ { clientId: firstWidgetAreaClientId } ] =
+			await editor.getBlocks( { full: true } );
+
+		// Insert a paragraph in the first widget area.
+		await editor.insertBlock(
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'First Paragraph' },
+			},
+			{ clientId: firstWidgetAreaClientId }
+		);
+
+		const firstParagraphBlock = firstWidgetArea.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+		await firstParagraphBlock.focus();
+		// Move the block to the second widget area.
+		await editor.showBlockToolbar();
+		await editor.clickBlockToolbarButton( 'Move to widget area' );
+		await page
+			.getByRole( 'menu', { name: 'Move to widget area' } )
+			.getByRole( 'menuitemradio', { name: 'Footer #2' } )
+			.click();
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [],
+			'sidebar-2': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+			],
+		} );
+	} );
+
+	test( 'Allows widget deletion to be undone', async ( {
+		page,
+		editor,
+		pageUtils,
+		widgetsScreen,
+	} ) => {
+		const firstWidgetArea = widgetsScreen.widgetAreas.first();
+		await firstWidgetArea.waitFor();
+		const [ { clientId: firstWidgetAreaClientId } ] =
+			await editor.getBlocks( { full: true } );
+
+		await editor.insertBlock(
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'First Paragraph' },
+			},
+			{ clientId: firstWidgetAreaClientId }
+		);
+		await editor.insertBlock(
+			{
+				name: 'core/paragraph',
+				attributes: { content: 'Second Paragraph' },
+			},
+			{ clientId: firstWidgetAreaClientId }
+		);
+
+		await widgetsScreen.saveWidgets();
+
+		// Delete the last block and save again.
+		await firstWidgetArea
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.filter( { hasText: 'Second Paragraph' } )
+			.focus();
+		await pageUtils.pressKeys( 'access+z' );
+		await widgetsScreen.saveWidgets();
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+			],
+		} );
+
+		// Undo block deletion and save again.
+		await pageUtils.pressKeys( 'primary+z' );
+		await widgetsScreen.saveWidgets();
+
+		// Reload the page to make sure changes were actually saved.
+		await page.reload();
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Second Paragraph' },
+				},
+			],
+		} );
+	} );
+
+	test( 'can toggle sidebar list view', async ( { page } ) => {
+		const toggleListViewButton = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'List View' } );
+		await toggleListViewButton.click();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+		await expect( listView ).toBeVisible();
+
+		await expect( listView.getByRole( 'gridcell' ) ).toHaveCount( 3 );
+
+		await toggleListViewButton.click();
+		await expect( listView ).toBeHidden();
+	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/38002.
+	test( 'allows blocks to be added on mobile viewports', async ( {
+		page,
+		pageUtils,
+		widgetsScreen,
+	} ) => {
+		await pageUtils.setBrowserViewport( 'small' );
+
+		const firstWidgetArea = widgetsScreen.widgetAreas.first();
+
+		const addParagraphBlock =
+			await widgetsScreen.getBlockInGlobalInserter( 'Paragraph' );
+		await addParagraphBlock.click();
+
+		await firstWidgetArea
+			.getByRole( 'document', {
+				name: /^Empty block/,
+			} )
+			.focus();
+		await page.keyboard.type( 'First Paragraph' );
+
+		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
+			'sidebar-1': [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'First Paragraph' },
+				},
+			],
+		} );
+	} );
+} );
+
+class WidgetsScreen {
+	/** @type {import('@playwright/test').Page} */
+	#page;
+	/** @type {Editor} */
+	#editor;
+
+	constructor( { page, editor } ) {
+		this.#page = page;
+		this.#editor = editor;
+
+		/** @type {Locator} */
+		this.widgetAreas = this.#page.getByRole( 'document', {
+			name: 'Block: Widget Area',
+		} );
+		/** @type {Locator} */
+		this.updateButton = this.#page.getByRole( 'button', {
+			name: 'Update',
+		} );
+	}
+
+	getWidgetAreaBlocks = async () => {
+		const widgetAreas = await this.#editor.getBlocks( { full: true } );
+		/** @type {Record<string, Awaited<ReturnType<Editor['getBlocks']>>>} */
+		const widgetAreaBlocks = {};
+		for ( const widgetArea of widgetAreas ) {
+			const widgetAreaId = widgetArea.attributes.id;
+			widgetAreaBlocks[ widgetAreaId ] = await this.#editor.getBlocks( {
+				clientId: widgetArea.clientId,
+			} );
+		}
+		return widgetAreaBlocks;
+	};
+
+	/**
+	 * @param {string} blockName
+	 */
+	getBlockInGlobalInserter = async ( blockName ) => {
+		const blockLibrary = this.#page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+		if ( await blockLibrary.isHidden() ) {
+			await this.#page
+				.getByRole( 'toolbar', { name: 'Document tools' } )
+				.getByRole( 'button', { name: 'Block Inserter', exact: true } )
+				.click();
+		}
+
+		await blockLibrary
+			.getByRole( 'searchbox', {
+				name: 'Search',
+			} )
+			.fill( blockName );
+
+		return blockLibrary.getByRole( 'option', { name: blockName } );
+	};
+
+	saveWidgets = async () => {
+		await test.step(
+			'save widgets',
+			async () => {
+				await this.updateButton.click();
+				await expect( this.updateButton ).toBeDisabled();
+			},
+			{ box: true }
+		);
+	};
+}
diff --git a/test/e2e/tsconfig.json b/test/e2e/tsconfig.json
index 7f855fd0ba69c8..28d349fc19bef7 100644
--- a/test/e2e/tsconfig.json
+++ b/test/e2e/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"noEmit": true,
diff --git a/test/emptytheme/functions.php b/test/emptytheme/functions.php
index 5ee5593c5c8e4e..79ae16f9694a1f 100644
--- a/test/emptytheme/functions.php
+++ b/test/emptytheme/functions.php
@@ -1,7 +1,15 @@
 <?php
+/**
+ * Empty theme functions and definitions.
+ *
+ * @package Gutenberg
+ */
 
 if ( ! function_exists( 'emptytheme_support' ) ) :
-	function emptytheme_support()  {
+	/**
+	 * Add theme support for various features.
+	 */
+	function emptytheme_support() {
 
 		// Adding support for core block visual styles.
 		add_theme_support( 'wp-block-styles' );
@@ -12,12 +20,13 @@ function emptytheme_support()  {
 	add_action( 'after_setup_theme', 'emptytheme_support' );
 endif;
 
-/**
- * Enqueue scripts and styles.
- */
-function emptytheme_scripts() {
-	// Enqueue theme stylesheet.
-	wp_enqueue_style( 'emptytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
-}
-
-add_action( 'wp_enqueue_scripts', 'emptytheme_scripts' );
+if ( ! function_exists( 'emptytheme_scripts' ) ) :
+	/**
+	 * Enqueue scripts and styles.
+	 */
+	function emptytheme_scripts() {
+		// Enqueue theme stylesheet.
+		wp_enqueue_style( 'emptytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+	}
+	add_action( 'wp_enqueue_scripts', 'emptytheme_scripts' );
+endif;
diff --git a/test/emptytheme/img/1024x768_emptytheme_test_image.jpg b/test/emptytheme/img/1024x768_emptytheme_test_image.jpg
new file mode 100644
index 00000000000000..694e710f77c527
Binary files /dev/null and b/test/emptytheme/img/1024x768_emptytheme_test_image.jpg differ
diff --git a/test/emptytheme/index.php b/test/emptytheme/index.php
index e69de29bb2d1d6..2b6276e2baac50 100644
--- a/test/emptytheme/index.php
+++ b/test/emptytheme/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Empty theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
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/styles/variation.json b/test/emptytheme/styles/variation.json
index 0ab221d087035a..7210001d22e820 100644
--- a/test/emptytheme/styles/variation.json
+++ b/test/emptytheme/styles/variation.json
@@ -1,5 +1,5 @@
 {
-	"version": 2,
+	"version": 3,
 	"settings": {
 		"color": {
 			"palette": [
@@ -12,6 +12,11 @@
 		}
 	},
 	"styles": {
+		"background": {
+			"backgroundImage": {
+				"url": "file:./img/1024x768_emptytheme_test_image.jpg"
+			}
+		},
 		"blocks": {
 			"core/post-title": {
 				"typography": {
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/templates/custom-template.html b/test/emptytheme/templates/custom-template.html
new file mode 100644
index 00000000000000..e4e8c11a39ef6f
--- /dev/null
+++ b/test/emptytheme/templates/custom-template.html
@@ -0,0 +1,3 @@
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Custom template for Posts</h2>
+<!-- /wp:heading -->
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/templates/tag.html b/test/emptytheme/templates/tag.html
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json
index ed2d7b8d0946aa..09f11eeeff8cfb 100644
--- a/test/emptytheme/theme.json
+++ b/test/emptytheme/theme.json
@@ -1,5 +1,6 @@
 {
-	"version": 2,
+	"$schema": "../../schemas/json/theme.json",
+	"version": 3,
 	"settings": {
 		"appearanceTools": true,
 		"layout": {
@@ -7,5 +8,12 @@
 			"wideSize": "1100px"
 		}
 	},
+	"customTemplates": [
+		{
+			"name": "custom-template",
+			"title": "Custom",
+			"postTypes": [ "post" ]
+		}
+	],
 	"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
 }
diff --git a/test/gutenberg-test-themes/block-bindings/index.php b/test/gutenberg-test-themes/block-bindings/index.php
new file mode 100644
index 00000000000000..0c6530acc1aaff
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
diff --git a/test/gutenberg-test-themes/block-bindings/style.css b/test/gutenberg-test-themes/block-bindings/style.css
new file mode 100644
index 00000000000000..a6b91a613da6e6
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Block Bindings
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: Block bindings test theme.
+Requires at least: 6.7
+Tested up to: 6.7
+Requires PHP: 7.2
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: block-bindings
+Block bindings WordPress Theme, (C) 2024 WordPress.org
+Block bindings is distributed under the terms of the GNU GPL.
+*/
diff --git a/test/gutenberg-test-themes/block-bindings/templates/custom-template.html b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
new file mode 100644
index 00000000000000..a8602b1c679a8c
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
@@ -0,0 +1,3 @@
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Custom template</h2>
+<!-- /wp:heading -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/index.html b/test/gutenberg-test-themes/block-bindings/templates/index.html
new file mode 100644
index 00000000000000..ab136ac8df9a7d
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/index.html
@@ -0,0 +1,8 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single-movie.html b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single.html b/test/gutenberg-test-themes/block-bindings/templates/single.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/theme.json b/test/gutenberg-test-themes/block-bindings/theme.json
new file mode 100644
index 00000000000000..c996b014328398
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/theme.json
@@ -0,0 +1,18 @@
+{
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"contentSize": "840px",
+			"wideSize": "1100px"
+		}
+	},
+	"customTemplates": [
+		{
+			"name": "custom-template",
+			"title": "Custom",
+			"postTypes": [ "post", "movie" ]
+		}
+	]
+}
diff --git a/test/gutenberg-test-themes/emptyhybrid/functions.php b/test/gutenberg-test-themes/emptyhybrid/functions.php
new file mode 100644
index 00000000000000..9d7b70f052d6a2
--- /dev/null
+++ b/test/gutenberg-test-themes/emptyhybrid/functions.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Empty theme functions and definitions.
+ *
+ * @package Gutenberg
+ */
+
+if ( ! function_exists( 'emptyhybrid_support' ) ) :
+	/**
+	 * Add theme support for various features.
+	 */
+	function emptyhybrid_support() {
+
+		// Adding support for core block visual styles.
+		add_theme_support( 'wp-block-styles' );
+
+		// Enqueue editor styles.
+		add_editor_style( 'style.css' );
+
+		// Enable block-based template parts support.
+		add_theme_support( 'block-template-parts' );
+	}
+	add_action( 'after_setup_theme', 'emptyhybrid_support' );
+endif;
+
+if ( ! function_exists( 'emptyhybrid_scripts' ) ) :
+	/**
+	 * Enqueue scripts and styles.
+	 */
+	function emptyhybrid_scripts() {
+		// Enqueue theme stylesheet.
+		wp_enqueue_style( 'emptyhybrid-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
+	}
+	add_action( 'wp_enqueue_scripts', 'emptyhybrid_scripts' );
+endif;
diff --git a/test/gutenberg-test-themes/emptyhybrid/index.php b/test/gutenberg-test-themes/emptyhybrid/index.php
new file mode 100644
index 00000000000000..8f7e81b407e937
--- /dev/null
+++ b/test/gutenberg-test-themes/emptyhybrid/index.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * Empty-Hybrid theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+?>
+<!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
+<div id="page" class="site">
+	<?php block_template_part( 'header' ); ?>
+</div>
+</body>
+</html>
diff --git a/test/gutenberg-test-themes/emptyhybrid/parts/header.html b/test/gutenberg-test-themes/emptyhybrid/parts/header.html
new file mode 100644
index 00000000000000..388c223268a37a
--- /dev/null
+++ b/test/gutenberg-test-themes/emptyhybrid/parts/header.html
@@ -0,0 +1,3 @@
+<!-- wp:site-title /-->
+
+<!-- wp:site-tagline /-->
\ No newline at end of file
diff --git a/test/gutenberg-test-themes/emptyhybrid/style.css b/test/gutenberg-test-themes/emptyhybrid/style.css
new file mode 100644
index 00000000000000..956b544b86f7b3
--- /dev/null
+++ b/test/gutenberg-test-themes/emptyhybrid/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Emptyhybrid
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: The testing hybrid theme.
+Requires at least: 6.0
+Tested up to: 6.2
+Requires PHP: 5.6
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: Emptyhybrid
+Emptytheme WordPress Theme, (C) 2021 WordPress.org
+Emptytheme is distributed under the terms of the GNU GPL.
+*/
diff --git a/test/gutenberg-test-themes/style-variations/block-templates/singular.html b/test/gutenberg-test-themes/style-variations/block-templates/singular.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/block-templates/singular.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/style-variations/index.php b/test/gutenberg-test-themes/style-variations/index.php
index e69de29bb2d1d6..0c6530acc1aaff 100644
--- a/test/gutenberg-test-themes/style-variations/index.php
+++ b/test/gutenberg-test-themes/style-variations/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json
new file mode 100644
index 00000000000000..92a11d953cdb5c
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-a.json
@@ -0,0 +1,20 @@
+{
+	"version": 3,
+	"title": "Block Style Variation A",
+	"slug": "block-style-variation-a",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"border": {
+			"width": "1px",
+			"style": "dotted"
+		},
+		"blocks": {
+			"core/group": {
+				"border": {
+					"width": "11px",
+					"style": "solid"
+				}
+			}
+		}
+	}
+}
diff --git a/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json
new file mode 100644
index 00000000000000..79644689d18402
--- /dev/null
+++ b/test/gutenberg-test-themes/style-variations/styles/block-style-variation-b.json
@@ -0,0 +1,20 @@
+{
+	"version": 3,
+	"title": "Block Style Variation B",
+	"slug": "block-style-variation-b",
+	"blockTypes": [ "core/group" ],
+	"styles": {
+		"border": {
+			"width": "2px",
+			"style": "dashed"
+		},
+		"blocks": {
+			"core/group": {
+				"border": {
+					"width": "22px",
+					"style": "groove"
+				}
+			}
+		}
+	}
+}
diff --git a/test/gutenberg-test-themes/style-variations/styles/pink.json b/test/gutenberg-test-themes/style-variations/styles/pink.json
index bdbf2829eb5528..c9e4ac85c1c795 100644
--- a/test/gutenberg-test-themes/style-variations/styles/pink.json
+++ b/test/gutenberg-test-themes/style-variations/styles/pink.json
@@ -1,5 +1,5 @@
 {
-	"version": 2,
+	"version": 3,
 	"settings": {
 		"color": {
 			"palette": [
diff --git a/test/gutenberg-test-themes/style-variations/styles/yellow.json b/test/gutenberg-test-themes/style-variations/styles/yellow.json
index 9bf00e21b42205..df82e52408da36 100644
--- a/test/gutenberg-test-themes/style-variations/styles/yellow.json
+++ b/test/gutenberg-test-themes/style-variations/styles/yellow.json
@@ -1,5 +1,5 @@
 {
-	"version": 2,
+	"version": 3,
 	"styles": {
 		"color": {
 			"background": "#ffef0b",
diff --git a/test/gutenberg-test-themes/style-variations/theme.json b/test/gutenberg-test-themes/style-variations/theme.json
index 5fa12e236592d8..e565be10125644 100644
--- a/test/gutenberg-test-themes/style-variations/theme.json
+++ b/test/gutenberg-test-themes/style-variations/theme.json
@@ -1,5 +1,6 @@
 {
-	"version": 2,
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
 	"styles": {
 		"color": {
 			"background": "red"
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index 6c341c815e035b..2ceadd67d4d1f4 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
@@ -1,5 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Blocks raw handling pasteHandler apple 1`] = `"<strong>This is a </strong>title<br><br><br><strong>This is a <em>heading</em></strong><br><br><br>This is a <strong>paragraph</strong> with a <a href="https://w.org">link</a>.<br><br><br>A<br>Bulleted<br>Indented<br>List<br><br><br>One<br>Two<br>Three<br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br>An image:<br>"`;
+
+exports[`Blocks raw handling pasteHandler classic 1`] = `"First paragraph<br><br>Second paragraph<br>Third paragraph<br>Fourth paragraph<br>Fifth paragraph<br>Sixth paragraph"`;
+
+exports[`Blocks raw handling pasteHandler evernote 1`] = `"This is a <em>paragraph</em>.<br><br><br>This is a <a href="https://w.org">link</a>.<br><br><br>An<br>Unordered<br>Indented<br>List<br><br><br>One<br>Two<br>Indented<br>Three<br><br><br><br><br><br><br>One<br>Two<br>Three<br>Four<br>Five<br>Six<br><img src="data:image/jpeg;base64,###">"`;
+
+exports[`Blocks raw handling pasteHandler google-docs 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href="https://w.org/">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src="https://lh4.googleusercontent.com/ID" width="544" height="184"><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-list-only 1`] = `"My first list item<br>A sub list item<br>A second sub list item<br>My second list item<br>My third list item"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-colspan 1`] = `"<br><br>Test colspan<br><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-comments 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-rowspan 1`] = `"<br><br>Test rowspan<br><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-with-comments 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href="https://w.org/">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src="https://lh4.googleusercontent.com/ID" width="544" height="184"><br><br>"`;
+
+exports[`Blocks raw handling pasteHandler gutenberg 1`] = `"Test"`;
+
+exports[`Blocks raw handling pasteHandler iframe-embed 1`] = `""`;
+
+exports[`Blocks raw handling pasteHandler markdown 1`] = `"This is a heading with <em>italic</em><br>This is a paragraph with a <a href="https://w.org/">link</a>, <strong>bold</strong>, and <del>strikethrough</del>.<br>Preserve<br>line breaks please.<br>Lists<br>A<br>Bulleted Indented<br>List<br>One<br>Two<br>Three<br>Table<br>First Header<br>Second Header<br>Content from cell 1<br>Content from cell 2<br>Content in the first column<br>Content in the second column<br><br><br><br>Table with empty cells.<br>Quote<br>First<br>Second<br>Code<br>Inline <code>code</code> tags should work.<br><code>This is a code block.</code>"`;
+
+exports[`Blocks raw handling pasteHandler mixed-content 1`] = `"Some heading<br><br>Content we need to preserve"`;
+
+exports[`Blocks raw handling pasteHandler ms-word 1`] = `"This is a title<br>&nbsp;<br>This is a subtitle<br>&nbsp;<br>This is a heading level 1<br>&nbsp;<br>This is a heading level 2<br>&nbsp;<br>This is a <strong>paragraph</strong> with a <a href="https://w.org/">link</a>.<br>&nbsp;<br>A<br>Bulleted<br>Indented<br>List<br>&nbsp;<br>One<br>Two<br>Three<br>&nbsp;<br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br>&nbsp;<br>An image:<br>&nbsp;<br><img width="451" height="338" src="file:LOW-RES.png"><br><a href="#anchor">This is an anchor link</a> that leads to the next paragraph.<br><a id="anchor">This is the paragraph with the anchor.</a><br><a href="#nowhere">This is an anchor link</a> that leads nowhere.<br><a>This is a paragraph with an anchor with no link pointing to it.</a><br>This is a reference to a footnote<a href="#_ftn1" id="_ftnref1">[1]</a>.<br>This is a reference to an endnote<a href="#_edn1" id="_ednref1">[i]</a>.<br><br><br><a href="#_ftnref1" id="_ftn1">[1]</a> This is a footnote.<br><br><br><a href="#_ednref1" id="_edn1">[i]</a> This is an endnote."`;
+
+exports[`Blocks raw handling pasteHandler ms-word-list 1`] = `"<a>This is a headline?</a><br>This is a text:<br>One<br>Two<br>Three<br><a>Lorem Ipsum.</a><br>&nbsp;"`;
+
+exports[`Blocks raw handling pasteHandler ms-word-online 1`] = `"This is a <em>heading</em>&nbsp;<br>This is a <strong>paragraph </strong>with a <a href="https://w.org/" target="_blank" rel="noreferrer noopener">link</a>.&nbsp;<br>A&nbsp;<br>Bulleted&nbsp;<br>Indented&nbsp;<br>List&nbsp;<br>&nbsp;<br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br><br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br>1&nbsp;<br>2&nbsp;<br>3&nbsp;<br>I&nbsp;<br>II&nbsp;<br>III&nbsp;<br>&nbsp;<br>An image:&nbsp;<br><img src="data:image/jpeg;base64,###">&nbsp;"`;
+
+exports[`Blocks raw handling pasteHandler ms-word-styled 1`] = `"<br><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</strong><br><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut."`;
+
+exports[`Blocks raw handling pasteHandler nested-divs 1`] = `"First paragraph<br><br>Second paragraph<br>Third paragraph<br>Fourth paragraph<br>Fifth paragraph<br>Sixth paragraph"`;
+
+exports[`Blocks raw handling pasteHandler one-image 1`] = `"<img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" width="300" height="137">"`;
+
+exports[`Blocks raw handling pasteHandler plain 1`] = `"test<br>test<br><br>test"`;
+
+exports[`Blocks raw handling pasteHandler shortcode-matching 1`] = `"[gallery ids="40,41,42"]<br>[gallery ids="1000"]<br>[gallery ids="42"]"`;
+
 exports[`Blocks raw handling pasteHandler should remove extra blank lines 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>
@@ -20,7 +64,7 @@ exports[`Blocks raw handling pasteHandler should strip some text-level elements
 
 exports[`Blocks raw handling pasteHandler should strip windows data 1`] = `
 "<!-- wp:heading -->
-<h2>Heading Win</h2>
+<h2 class="wp-block-heading">Heading Win</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -28,10 +72,18 @@ exports[`Blocks raw handling pasteHandler should strip windows data 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Blocks raw handling pasteHandler slack-paragraphs 1`] = `"test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a><br>a new line<br><br>a new paragraph<br>another new line<br><br>another paragraph"`;
+
+exports[`Blocks raw handling pasteHandler slack-quote 1`] = `"Test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a>."`;
+
+exports[`Blocks raw handling pasteHandler two-images 1`] = `"<img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" width="300" height="137"> <img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" width="300" height="248">"`;
+
+exports[`Blocks raw handling pasteHandler wordpress 1`] = `"Howdy<br>This is a paragraph.<br>More tag<br><br>Shortcode<br>[gallery ids="1"]<br><img src="block.png" alt=""><br><img src="aligned.png" alt=""> test<br><img src="not-aligned.png" alt=""> test"`;
+
 exports[`Blocks raw handling should correctly handle quotes with mixed content 1`] = `
 "<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:heading {\\"level\\":1} -->
-<h1>chicken</h1>
+<blockquote class="wp-block-quote"><!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">chicken</h1>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -42,11 +94,11 @@ exports[`Blocks raw handling should correctly handle quotes with mixed content 1
 
 exports[`rawHandler should convert HTML post to blocks with minimal content changes 1`] = `
 "<!-- wp:heading -->
-<h2>Howdy</h2>
+<h2 class="wp-block-heading">Howdy</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://w.org\\" alt=\\"\\"/></figure>
+<figure class="wp-block-image"><img src="https://w.org" alt=""/></figure>
 <!-- /wp:image -->
 
 <!-- wp:paragraph -->
@@ -54,24 +106,24 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Preserve <span style=\\"color:red\\">me</span>!</p>
+<p>Preserve <span style="color:red">me</span>!</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:heading {\\"level\\":3} -->
-<h3>More tag</h3>
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">More tag</h3>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
 <!--more-->
 <!-- /wp:more -->
 
-<!-- wp:heading {\\"level\\":3} -->
-<h3>Shortcode</h3>
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Shortcode</h3>
 <!-- /wp:heading -->
 
-<!-- wp:gallery {\\"columns\\":3,\\"linkTo\\":\\"none\\"} -->
-<figure class=\\"wp-block-gallery has-nested-images columns-3 is-cropped\\"><!-- wp:image {\\"id\\":1} -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\" class=\\"wp-image-1\\"/></figure>
+<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-3 is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img alt="" class="wp-image-1"/></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->
 
@@ -84,21 +136,21 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 </dl>
 <!-- /wp:html -->
 
-<!-- wp:list {\\"ordered\\":true} -->
-<ol><!-- wp:list-item -->
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Item</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
 
 <!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
 <p>Text.</p>
 <!-- /wp:paragraph --></blockquote>
 <!-- /wp:quote -->
 
 <!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:heading {\\"level\\":1} -->
-<h1>Heading</h1>
+<blockquote class="wp-block-quote"><!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Heading</h1>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -108,28 +160,28 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 `;
 
 exports[`rawHandler should convert a caption shortcode 1`] = `
-"<!-- wp:image {\\"align\\":\\"none\\",\\"id\\":122,\\"className\\":\\"size-medium wp-image-122\\"} -->
-<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\">test</figcaption></figure>
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
+<figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption">test</figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with caption 1`] = `
-"<!-- wp:image {\\"align\\":\\"none\\",\\"id\\":122,\\"className\\":\\"size-medium wp-image-122\\"} -->
-<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\"><a href=\\"https://w.org\\">test</a></figcaption></figure>
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
+<figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption"><a href="https://w.org">test</a></figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with link 1`] = `
-"<!-- wp:image {\\"align\\":\\"none\\",\\"id\\":754} -->
-<figure class=\\"wp-block-image alignnone\\"><a href=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg\\"><img src=\\"http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604\\" alt=\\"Bell on Wharf\\" class=\\"wp-image-754\\"/></a><figcaption class=\\"wp-element-caption\\">Bell on wharf in San Francisco</figcaption></figure>
+"<!-- wp:image {"id":754,"align":"none"} -->
+<figure class="wp-block-image alignnone"><a href="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg"><img src="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604" alt="Bell on Wharf" class="wp-image-754"/></a><figcaption class="wp-element-caption">Bell on wharf in San Francisco</figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a list with attributes 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"type\\":\\"i\\",\\"start\\":2,\\"reversed\\":true} -->
-<ol type=\\"i\\" reversed start=\\"2\\"><!-- wp:list-item -->
-<li>1<!-- wp:list {\\"ordered\\":true,\\"type\\":\\"i\\",\\"start\\":2,\\"reversed\\":true} -->
-<ol type=\\"i\\" reversed start=\\"2\\"><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
+<li>1<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman" class="wp-block-list"><!-- wp:list-item -->
 <li>1</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
@@ -144,7 +196,25 @@ exports[`rawHandler should not strip any text-level elements 1`] = `
 `;
 
 exports[`rawHandler should preserve alignment 1`] = `
-"<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
-<p class=\\"has-text-align-center\\">center</p>
+"<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">center</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`rawHandler should preserve all paragraphs 1`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>&nbsp;&nbsp;</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph {"className":"p"} -->
+<p class="p"></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph -->"
 `;
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
index 2bc08c9a7b35a2..70af14f3290460 100644
--- a/test/integration/blocks-raw-handling.test.js
+++ b/test/integration/blocks-raw-handling.test.js
@@ -177,7 +177,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -202,7 +202,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>one</li>
 		<!-- /wp:list-item -->
 
@@ -249,7 +249,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toBe(
-			'<h1>Some <em>heading</em></h1><p>A paragraph.</p>'
+			'<h1 class="wp-block-heading">Some <em>heading</em></h1><p>A paragraph.</p>'
 		);
 		expect( console ).toHaveLogged();
 	} );
@@ -318,7 +318,7 @@ describe( 'Blocks raw handling', () => {
 			.join( '' );
 
 		expect( filtered ).toMatchInlineSnapshot( `
-		"<ul><!-- wp:list-item -->
+		"<ul class="wp-block-list"><!-- wp:list-item -->
 		<li>One</li>
 		<!-- /wp:list-item -->
 
@@ -336,7 +336,7 @@ describe( 'Blocks raw handling', () => {
 	it( 'should correctly handle quotes with mixed content', () => {
 		const filtered = serialize(
 			pasteHandler( {
-				HTML: '<blockquote><h1>chicken</h1><p>ribs</p></blockquote>',
+				HTML: '<blockquote><h1 class="wp-block-heading">chicken</h1><p>ribs</p></blockquote>',
 				mode: 'AUTO',
 			} )
 		);
@@ -369,6 +369,34 @@ describe( 'Blocks raw handling', () => {
 		expect( console ).toHaveLogged();
 	} );
 
+	it( 'should convert pre', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre>1\n2</pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-preformatted">1\n2</pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should convert code', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre><code>1\n2</code></pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-code"><code>1\n2</code></pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
 	describe( 'pasteHandler', () => {
 		[
 			'plain',
@@ -378,9 +406,12 @@ describe( 'Blocks raw handling', () => {
 			'google-docs',
 			'google-docs-list-only',
 			'google-docs-table',
+			'google-docs-table-with-colspan',
+			'google-docs-table-with-rowspan',
 			'google-docs-table-with-comments',
 			'google-docs-with-comments',
 			'ms-word',
+			'ms-word-list',
 			'ms-word-styled',
 			'ms-word-online',
 			'evernote',
@@ -393,6 +424,7 @@ describe( 'Blocks raw handling', () => {
 			'shortcode-matching',
 			'slack-quote',
 			'slack-paragraphs',
+			'mixed-content',
 		].forEach( ( type ) => {
 			// eslint-disable-next-line jest/valid-title
 			it( type, () => {
@@ -427,10 +459,14 @@ describe( 'Blocks raw handling', () => {
 
 				expect( serialized ).toBe( output );
 
-				if ( type !== 'gutenberg' ) {
-					// eslint-disable-next-line jest/no-conditional-expect
-					expect( console ).toHaveLogged();
-				}
+				const convertedInline = pasteHandler( {
+					HTML,
+					plainText,
+					mode: 'INLINE',
+				} );
+
+				expect( convertedInline ).toMatchSnapshot();
+				expect( console ).toHaveLogged();
 			} );
 		} );
 
@@ -525,4 +561,12 @@ describe( 'rawHandler', () => {
 		const HTML = '<p style="text-align:center">center</p>';
 		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
 	} );
+
+	it( 'should preserve all paragraphs', () => {
+		const HTML = `<p></p>
+<p>&nbsp;&nbsp;</p>
+<p class="p"></p>
+<p style="border: 1px solid tomato;"></p>`;
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
 } );
diff --git a/test/integration/blocks-schema.test.js b/test/integration/blocks-schema.test.js
index 1bc75555d6b880..37137ddd09d211 100644
--- a/test/integration/blocks-schema.test.js
+++ b/test/integration/blocks-schema.test.js
@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import Ajv from 'ajv-draft-04';
+import Ajv from 'ajv';
 import glob from 'fast-glob';
-import path from 'path';
 
 /**
  * Internal dependencies
@@ -11,17 +10,13 @@ import path from 'path';
 import blockSchema from '../../schemas/json/block.json';
 
 describe( 'block.json schema', () => {
-	const blockFolders = glob.sync( 'packages/block-library/src/*', {
-		onlyDirectories: true,
-		ignore: [ 'packages/block-library/src/utils' ],
-	} );
-	const testData = blockFolders.map( ( blockFolder ) => [
-		'core/' + path.basename( blockFolder ),
-		path.join( blockFolder, 'block.json' ),
-	] );
+	const jsonFiles = glob.sync(
+		[ 'packages/*/src/**/block.json', '{lib,phpunit,test}/**/block.json' ],
+		{ onlyFiles: true }
+	);
 	const ajv = new Ajv();
 
-	test( 'strictly adheres to the draft-04 meta schema', () => {
+	test( 'strictly adheres to the draft-07 meta schema', () => {
 		// Use ajv.compile instead of ajv.validateSchema to validate the schema
 		// because validateSchema only checks syntax, whereas, compile checks
 		// if the schema is semantically correct with strict mode.
@@ -31,22 +26,18 @@ describe( 'block.json schema', () => {
 		expect( result.errors ).toBe( null );
 	} );
 
-	test( 'found block folders', () => {
-		expect( blockFolders.length ).toBeGreaterThan( 0 );
+	test( 'found block.json files', () => {
+		expect( jsonFiles.length ).toBeGreaterThan( 0 );
 	} );
 
-	test.each( testData )(
-		'validates schema for `%s`',
-		( blockName, filepath ) => {
-			// We want to validate the block.json file using the local schema.
-			const { $schema, ...blockMetadata } = require( filepath );
+	test.each( jsonFiles )( 'validates schema for `%s`', ( filepath ) => {
+		// We want to validate the block.json file using the local schema.
+		const { $schema, ...blockMetadata } = require( filepath );
 
-			expect( $schema ).toBe( 'https://schemas.wp.org/trunk/block.json' );
+		expect( $schema ).toBe( 'https://schemas.wp.org/trunk/block.json' );
 
-			const result =
-				ajv.validate( blockSchema, blockMetadata ) || ajv.errors;
+		const result = ajv.validate( blockSchema, blockMetadata ) || ajv.errors;
 
-			expect( result ).toBe( true );
-		}
-	);
+		expect( result ).toBe( true );
+	} );
 } );
diff --git a/test/integration/fixtures/blocks/core__avatar.json b/test/integration/fixtures/blocks/core__avatar.json
index 6d21f8bebfc7b0..9c1aeef62009c3 100644
--- a/test/integration/fixtures/blocks/core__avatar.json
+++ b/test/integration/fixtures/blocks/core__avatar.json
@@ -7,8 +7,8 @@
 			"size": 85,
 			"isLink": true,
 			"linkTarget": "_self",
-			"align": "right",
 			"borderColor": "vivid-red",
+			"align": "right",
 			"style": {
 				"spacing": {
 					"margin": {
diff --git a/test/integration/fixtures/blocks/core__avatar.serialized.html b/test/integration/fixtures/blocks/core__avatar.serialized.html
index 6965019bf96dbe..260cacb274b57e 100644
--- a/test/integration/fixtures/blocks/core__avatar.serialized.html
+++ b/test/integration/fixtures/blocks/core__avatar.serialized.html
@@ -1 +1 @@
-<!-- wp:avatar {"userId":4,"size":85,"isLink":true,"align":"right","borderColor":"vivid-red","style":{"spacing":{"margin":{"bottom":"40px"}},"border":{"radius":"47px","width":"3px"},"color":{"duotone":["#000000","#ffe2c7"]}}} /-->
+<!-- wp:avatar {"userId":4,"size":85,"isLink":true,"borderColor":"vivid-red","align":"right","style":{"spacing":{"margin":{"bottom":"40px"}},"border":{"radius":"47px","width":"3px"},"color":{"duotone":["#000000","#ffe2c7"]}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block.json b/test/integration/fixtures/blocks/core__block.json
index a4ce0bf8c95456..d7c28bacfe137d 100644
--- a/test/integration/fixtures/blocks/core__block.json
+++ b/test/integration/fixtures/blocks/core__block.json
@@ -3,7 +3,8 @@
 		"name": "core/block",
 		"isValid": true,
 		"attributes": {
-			"ref": 123
+			"ref": 123,
+			"content": {}
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__block__overrides.html b/test/integration/fixtures/blocks/core__block__overrides.html
new file mode 100644
index 00000000000000..0fd835b5013a82
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides.html
@@ -0,0 +1 @@
+<!-- wp:core/block {"ref":123,"content":{"Nice paragraph":{"content":"Some value"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block__overrides.json b/test/integration/fixtures/blocks/core__block__overrides.json
new file mode 100644
index 00000000000000..7d72f03e00072b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/block",
+		"isValid": true,
+		"attributes": {
+			"ref": 123,
+			"content": {
+				"Nice paragraph": {
+					"content": "Some value"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides.parsed.json b/test/integration/fixtures/blocks/core__block__overrides.parsed.json
new file mode 100644
index 00000000000000..ce5a0ab732c7f1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides.parsed.json
@@ -0,0 +1,16 @@
+[
+	{
+		"blockName": "core/block",
+		"attrs": {
+			"ref": 123,
+			"content": {
+				"Nice paragraph": {
+					"content": "Some value"
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides.serialized.html b/test/integration/fixtures/blocks/core__block__overrides.serialized.html
new file mode 100644
index 00000000000000..5c8716afd6a2ad
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides.serialized.html
@@ -0,0 +1 @@
+<!-- wp:block {"ref":123,"content":{"Nice paragraph":{"content":"Some value"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.html b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.html
new file mode 100644
index 00000000000000..5b7b2cdf95cfb8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.html
@@ -0,0 +1 @@
+<!-- wp:core/block {"ref":123,"overrides":{"V98q_x":{"content":"Some value"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.json b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.json
new file mode 100644
index 00000000000000..3f0292c83ac35e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/block",
+		"isValid": true,
+		"attributes": {
+			"ref": 123,
+			"content": {
+				"V98q_x": {
+					"content": "Some value"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.parsed.json
new file mode 100644
index 00000000000000..2cf2ac37974450
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.parsed.json
@@ -0,0 +1,16 @@
+[
+	{
+		"blockName": "core/block",
+		"attrs": {
+			"ref": 123,
+			"overrides": {
+				"V98q_x": {
+					"content": "Some value"
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.serialized.html
new file mode 100644
index 00000000000000..3d91f47859d018
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-1.serialized.html
@@ -0,0 +1 @@
+<!-- wp:block {"ref":123,"content":{"V98q_x":{"content":"Some value"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.html b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.html
new file mode 100644
index 00000000000000..d75c773c630efd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.html
@@ -0,0 +1 @@
+<!-- wp:core/block {"ref":123,"content":{"V98q_x":{"values":{"content":"Some value"}}}} /-->
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.json b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.json
new file mode 100644
index 00000000000000..3f0292c83ac35e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/block",
+		"isValid": true,
+		"attributes": {
+			"ref": 123,
+			"content": {
+				"V98q_x": {
+					"content": "Some value"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.parsed.json
new file mode 100644
index 00000000000000..41cd1dc9afd443
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.parsed.json
@@ -0,0 +1,18 @@
+[
+	{
+		"blockName": "core/block",
+		"attrs": {
+			"ref": 123,
+			"content": {
+				"V98q_x": {
+					"values": {
+						"content": "Some value"
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.serialized.html
new file mode 100644
index 00000000000000..3d91f47859d018
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__block__overrides__deprecated-2.serialized.html
@@ -0,0 +1 @@
+<!-- wp:block {"ref":123,"content":{"V98q_x":{"content":"Some value"}}} /-->
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.html b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.html
index dec35ad302a827..3f1e98db096739 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.html
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"borderRadius":25} -->
 <div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
-<!-- /wp:button --></div>
\ No newline at end of file
+<!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
index 4ed92273906548..35a26785fb4218 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.json
@@ -11,13 +11,5 @@
 			}
 		},
 		"innerBlocks": []
-	},
-	{
-		"name": "core/freeform",
-		"isValid": true,
-		"attributes": {
-			"content": ""
-		},
-		"innerBlocks": []
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.parsed.json b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
index 952ca954b416c6..ea2f81c2fa71a5 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.parsed.json
@@ -9,12 +9,5 @@
 		"innerContent": [
 			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" style=\"border-radius:25px\">My button</a></div>\n"
 		]
-	},
-	{
-		"blockName": null,
-		"attrs": {},
-		"innerBlocks": [],
-		"innerHTML": "</div>",
-		"innerContent": [ "</div>" ]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
index 48f9a291337304..6f40053b5d8d76 100644
--- a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
+++ b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
@@ -1,5 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":"25px"}}} -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:25px">My button</a></div>
 <!-- /wp:button -->
-
-
diff --git a/test/integration/fixtures/blocks/core__button__squared.json b/test/integration/fixtures/blocks/core__button__squared.json
index 8cc161cf5c8767..ef629c91d4be93 100644
--- a/test/integration/fixtures/blocks/core__button__squared.json
+++ b/test/integration/fixtures/blocks/core__button__squared.json
@@ -3,6 +3,8 @@
 		"name": "core/button",
 		"isValid": true,
 		"attributes": {
+			"tagName": "a",
+			"type": "button",
 			"text": "My button",
 			"style": {
 				"border": {
diff --git a/test/integration/fixtures/blocks/core__buttons.html b/test/integration/fixtures/blocks/core__buttons.html
index 282f38c7ddb11d..e130ce79258c7f 100644
--- a/test/integration/fixtures/blocks/core__buttons.html
+++ b/test/integration/fixtures/blocks/core__buttons.html
@@ -7,5 +7,13 @@
 	<!-- wp:button -->
 	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
 	<!-- /wp:button -->
+
+	<!-- wp:button {"tagName":"a"} -->
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
+	<!-- /wp:button -->
+
+	<!-- wp:button {"tagName":"button"} -->
+	<div class="wp-block-button"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
+	<!-- /wp:button -->
 </div>
 <!-- /wp:buttons -->
diff --git a/test/integration/fixtures/blocks/core__buttons.json b/test/integration/fixtures/blocks/core__buttons.json
index 6b9f8ada321e2f..74d0c140360609 100644
--- a/test/integration/fixtures/blocks/core__buttons.json
+++ b/test/integration/fixtures/blocks/core__buttons.json
@@ -14,6 +14,8 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
+					"tagName": "a",
+					"type": "button",
 					"text": "My button 1"
 				},
 				"innerBlocks": []
@@ -22,9 +24,31 @@
 				"name": "core/button",
 				"isValid": true,
 				"attributes": {
+					"tagName": "a",
+					"type": "button",
 					"text": "My button 2"
 				},
 				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "a",
+					"type": "button",
+					"text": "My button 3"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/button",
+				"isValid": true,
+				"attributes": {
+					"tagName": "button",
+					"type": "button",
+					"text": "My button 4"
+				},
+				"innerBlocks": []
 			}
 		]
 	}
diff --git a/test/integration/fixtures/blocks/core__buttons.parsed.json b/test/integration/fixtures/blocks/core__buttons.parsed.json
index d15ccdcd2012dd..849adbaf491fcb 100644
--- a/test/integration/fixtures/blocks/core__buttons.parsed.json
+++ b/test/integration/fixtures/blocks/core__buttons.parsed.json
@@ -26,14 +26,40 @@
 				"innerContent": [
 					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 2</a></div>\n\t"
 				]
+			},
+			{
+				"blockName": "core/button",
+				"attrs": {
+					"tagName": "a"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 3</a></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\">My button 3</a></div>\n\t"
+				]
+			},
+			{
+				"blockName": "core/button",
+				"attrs": {
+					"tagName": "button"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<div class=\"wp-block-button\"><button type=\"button\" class=\"wp-block-button__link wp-element-button\">My button 4</button></div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-button\"><button type=\"button\" class=\"wp-block-button__link wp-element-button\">My button 4</button></div>\n\t"
+				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-buttons alignwide\">\n\t\n\n\t\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-buttons alignwide\">\n\t\n\n\t\n\n\t\n\n\t\n</div>\n",
 		"innerContent": [
 			"\n<div class=\"wp-block-buttons alignwide\">\n\t",
 			null,
 			"\n\n\t",
 			null,
+			"\n\n\t",
+			null,
+			"\n\n\t",
+			null,
 			"\n</div>\n"
 		]
 	}
diff --git a/test/integration/fixtures/blocks/core__buttons.serialized.html b/test/integration/fixtures/blocks/core__buttons.serialized.html
index 7da8f97de51eba..452f3e167e78d8 100644
--- a/test/integration/fixtures/blocks/core__buttons.serialized.html
+++ b/test/integration/fixtures/blocks/core__buttons.serialized.html
@@ -5,5 +5,13 @@
 
 <!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"tagName":"button"} -->
+<div class="wp-block-button"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
diff --git a/test/integration/fixtures/blocks/core__categories.json b/test/integration/fixtures/blocks/core__categories.json
index 013418065bbbb1..698105d8921341 100644
--- a/test/integration/fixtures/blocks/core__categories.json
+++ b/test/integration/fixtures/blocks/core__categories.json
@@ -3,11 +3,13 @@
 		"name": "core/categories",
 		"isValid": true,
 		"attributes": {
+			"taxonomy": "category",
 			"displayAsDropdown": false,
 			"showHierarchy": false,
 			"showPostCounts": false,
 			"showOnlyTopLevel": false,
-			"showEmpty": false
+			"showEmpty": false,
+			"showLabel": true
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__column.html b/test/integration/fixtures/blocks/core__column.html
index a18d2ee30a3eb4..3bf672232a906d 100644
--- a/test/integration/fixtures/blocks/core__column.html
+++ b/test/integration/fixtures/blocks/core__column.html
@@ -7,4 +7,4 @@
 	<p>Column One, Paragraph Two</p>
 	<!-- /wp:paragraph -->
 </div>
-<!-- /wp:columns -->
+<!-- /wp:column -->
diff --git a/test/integration/fixtures/blocks/core__cover.html b/test/integration/fixtures/blocks/core__cover.html
index 5c69931dd22691..889a2393424c13 100644
--- a/test/integration/fixtures/blocks/core__cover.html
+++ b/test/integration/fixtures/blocks/core__cover.html
@@ -1,7 +1,7 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
 <div class="wp-block-cover">
-    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
     <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover" />
+    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
     <div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 		<p class="has-text-align-center has-large-font-size">
diff --git a/test/integration/fixtures/blocks/core__cover.json b/test/integration/fixtures/blocks/core__cover.json
index 7d01fcfee0778e..a7ed06e153012d 100644
--- a/test/integration/fixtures/blocks/core__cover.json
+++ b/test/integration/fixtures/blocks/core__cover.json
@@ -10,7 +10,8 @@
 			"isRepeated": false,
 			"dimRatio": 40,
 			"backgroundType": "image",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover.parsed.json b/test/integration/fixtures/blocks/core__cover.parsed.json
index 4df6d84c29cef2..8b340629ad19b6 100644
--- a/test/integration/fixtures/blocks/core__cover.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover.parsed.json
@@ -20,9 +20,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\" />\n    <div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\" />\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n    <div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\" />\n    <div class=\"wp-block-cover__inner-container\">\n\t\t",
+			"\n<div class=\"wp-block-cover\">\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\" />\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n    <div class=\"wp-block-cover__inner-container\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__cover.serialized.html b/test/integration/fixtures/blocks/core__cover.serialized.html
index b7eeb8cf4b85d8..78b88ede59d38b 100644
--- a/test/integration/fixtures/blocks/core__cover.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html
new file mode 100644
index 00000000000000..0b45adb59f1f40
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light has-parallax"><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json
new file mode 100644
index 00000000000000..d848174278dabe
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.json
@@ -0,0 +1,35 @@
+[
+	{
+		"name": "core/cover",
+		"isValid": true,
+		"attributes": {
+			"url": "https://w.wiki/59So",
+			"useFeaturedImage": false,
+			"id": 612,
+			"alt": "Custom alt text",
+			"hasParallax": true,
+			"isRepeated": false,
+			"dimRatio": 50,
+			"backgroundType": "image",
+			"isDark": false,
+			"tagName": "div",
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"align": "center",
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json
new file mode 100644
index 00000000000000..76e0f603020621
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.parsed.json
@@ -0,0 +1,37 @@
+[
+	{
+		"blockName": "core/cover",
+		"attrs": {
+			"url": "https://w.wiki/59So",
+			"id": 612,
+			"alt": "Custom alt text",
+			"hasParallax": true,
+			"dimRatio": 50,
+			"isDark": false,
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"align": "center",
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<p class=\"has-text-align-center has-large-font-size\"></p>\n",
+				"innerContent": [
+					"\n<p class=\"has-text-align-center has-large-font-size\"></p>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax\"><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div class=\"wp-block-cover__inner-container\"></div></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-cover is-light has-parallax\"><div role=\"img\" aria-label=\"Custom alt text\" class=\"wp-block-cover__image-background wp-image-612 has-parallax\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"></span><div class=\"wp-block-cover__inner-container\">",
+			null,
+			"</div></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html
new file mode 100644
index 00000000000000..0b45adb59f1f40
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__alt-fixed-background.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"https://w.wiki/59So","id":612,"alt":"Custom alt text","hasParallax":true,"dimRatio":50,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light has-parallax"><div role="img" aria-label="Custom alt text" class="wp-block-cover__image-background wp-image-612 has-parallax" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-1.json b/test/integration/fixtures/blocks/core__cover__deprecated-1.json
index 5ee05744c69d77..a432e9992fd33a 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-1.json
@@ -7,7 +7,8 @@
 			"id": 34,
 			"hasParallax": false,
 			"dimRatio": 50,
-			"backgroundType": "image"
+			"backgroundType": "image",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
index 0a535e66bff5b4..09ed14e47707f2 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Image</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-10.json b/test/integration/fixtures/blocks/core__cover__deprecated-10.json
index b252836a2a3b37..ce3dc9eb1d553e 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-10.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-10.json
@@ -4,14 +4,15 @@
 		"isValid": true,
 		"attributes": {
 			"url": "https://w.wiki/59Sd",
-			"useFeaturedImage": false,
 			"id": 609,
 			"alt": "",
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 50,
 			"backgroundType": "image",
-			"isDark": true
+			"isDark": true,
+			"useFeaturedImage": false,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-10.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-10.serialized.html
index d48a8b8e983945..88edf18b50c19e 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-10.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-10.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"https://w.wiki/59Sd","id":609,"dimRatio":50} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-609" alt="" src="https://w.wiki/59Sd" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background wp-image-609" alt="" src="https://w.wiki/59Sd" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.html b/test/integration/fixtures/blocks/core__cover__deprecated-12.html
new file mode 100644
index 00000000000000..1ae933aed80105
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"customOverlayColor":"#3615d9","layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#3615d9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+	<p class="has-text-align-center has-large-font-size"></p>
+	<!-- /wp:paragraph --></div></div>
+	<!-- /wp:cover -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.json b/test/integration/fixtures/blocks/core__cover__deprecated-12.json
new file mode 100644
index 00000000000000..5991bbfd165bfb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.json
@@ -0,0 +1,35 @@
+[
+	{
+		"name": "core/cover",
+		"isValid": true,
+		"attributes": {
+			"alt": "",
+			"hasParallax": false,
+			"isRepeated": false,
+			"dimRatio": 50,
+			"customOverlayColor": "#3615d9",
+			"backgroundType": "image",
+			"isDark": true,
+			"useFeaturedImage": true,
+			"tagName": "div",
+			"layout": {
+				"type": "constrained"
+			},
+			"isUserOverlayColor": true
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"align": "center",
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json b/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json
new file mode 100644
index 00000000000000..f4e2e302cf52e7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.parsed.json
@@ -0,0 +1,34 @@
+[
+	{
+		"blockName": "core/cover",
+		"attrs": {
+			"useFeaturedImage": true,
+			"dimRatio": 50,
+			"customOverlayColor": "#3615d9",
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"align": "center",
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t",
+				"innerContent": [
+					"\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#3615d9\"></span><div class=\"wp-block-cover__inner-container\"></div></div>\n\t",
+		"innerContent": [
+			"\n<div class=\"wp-block-cover\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\" style=\"background-color:#3615d9\"></span><div class=\"wp-block-cover__inner-container\">",
+			null,
+			"</div></div>\n\t"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html
new file mode 100644
index 00000000000000..d51734e18a5418
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-12.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"customOverlayColor":"#3615d9","isUserOverlayColor":true,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#3615d9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-14.html b/test/integration/fixtures/blocks/core__cover__deprecated-14.html
new file mode 100644
index 00000000000000..184d74cf12a6f0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-14.html
@@ -0,0 +1,5 @@
+	<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":36,"dimRatio":50,"overlayColor":"base","isUserOverlayColor":true,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-36" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+	<p class="has-text-align-center has-large-font-size"></p>
+	<!-- /wp:paragraph --></div></div>
+	<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-14.json b/test/integration/fixtures/blocks/core__cover__deprecated-14.json
new file mode 100644
index 00000000000000..206e3e4c0d7e14
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-14.json
@@ -0,0 +1,37 @@
+[
+	{
+		"name": "core/cover",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"id": 36,
+			"alt": "",
+			"hasParallax": false,
+			"isRepeated": false,
+			"dimRatio": 50,
+			"overlayColor": "base",
+			"backgroundType": "image",
+			"isDark": false,
+			"useFeaturedImage": false,
+			"tagName": "div",
+			"isUserOverlayColor": true,
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"align": "center",
+					"content": "",
+					"dropCap": false,
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-14.parsed.json b/test/integration/fixtures/blocks/core__cover__deprecated-14.parsed.json
new file mode 100644
index 00000000000000..3a9d21e938c643
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-14.parsed.json
@@ -0,0 +1,37 @@
+[
+	{
+		"blockName": "core/cover",
+		"attrs": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"id": 36,
+			"dimRatio": 50,
+			"overlayColor": "base",
+			"isUserOverlayColor": true,
+			"isDark": false,
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"align": "center",
+					"placeholder": "Write title…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t",
+				"innerContent": [
+					"\n\t<p class=\"has-text-align-center has-large-font-size\"></p>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-base-background-color has-background-dim\"></span><img class=\"wp-block-cover__image-background wp-image-36\" alt=\"\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" data-object-fit=\"cover\"/><div class=\"wp-block-cover__inner-container\"></div></div>\n\t",
+		"innerContent": [
+			"\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-base-background-color has-background-dim\"></span><img class=\"wp-block-cover__image-background wp-image-36\" alt=\"\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" data-object-fit=\"cover\"/><div class=\"wp-block-cover__inner-container\">",
+			null,
+			"</div></div>\n\t"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-14.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-14.serialized.html
new file mode 100644
index 00000000000000..1d9b7d596d962f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-14.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":36,"dimRatio":50,"overlayColor":"base","isUserOverlayColor":true,"isDark":false,"layout":{"type":"constrained"}} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-36" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size"></p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-2.json b/test/integration/fixtures/blocks/core__cover__deprecated-2.json
index 89303981ff3211..7b9f5696d34ae2 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-2.json
@@ -7,7 +7,8 @@
 			"id": 34,
 			"hasParallax": false,
 			"dimRatio": 50,
-			"backgroundType": "image"
+			"backgroundType": "image",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
index 361eb663bf1f62..078084707fc164 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34,"dimRatio":50} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-3.json b/test/integration/fixtures/blocks/core__cover__deprecated-3.json
index 349ecd3709366b..d2fcf5074b1dd3 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-3.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-3.json
@@ -7,7 +7,8 @@
 			"id": 35,
 			"hasParallax": false,
 			"dimRatio": 50,
-			"backgroundType": "image"
+			"backgroundType": "image",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
index c1cd5a78fbee56..345054f081abeb 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-4.json b/test/integration/fixtures/blocks/core__cover__deprecated-4.json
index 7e1d207b58333d..48c677038ba872 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-4.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-4.json
@@ -11,7 +11,8 @@
 			"focalPoint": {
 				"x": "0.07",
 				"y": "0.07"
-			}
+			},
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
index be37f15331a564..e4fec9b98e228a 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"dimRatio":50,"focalPoint":{"x":"0.07","y":"0.07"}} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-5.json b/test/integration/fixtures/blocks/core__cover__deprecated-5.json
index e4a22443134f25..9eee3c4a016840 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-5.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-5.json
@@ -7,7 +7,8 @@
 			"hasParallax": false,
 			"dimRatio": 50,
 			"backgroundType": "image",
-			"gradient": "midnight"
+			"gradient": "midnight",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
index 2d9a20ba12791e..35f8479c58169f 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":50,"gradient":"midnight"} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim wp-block-cover__gradient-background has-background-gradient has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim wp-block-cover__gradient-background has-background-gradient has-midnight-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cover</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.json b/test/integration/fixtures/blocks/core__cover__deprecated-6.json
index 5cb841feaec073..62bea629e8efe6 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-6.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.json
@@ -7,7 +7,8 @@
 			"hasParallax": false,
 			"dimRatio": 40,
 			"backgroundType": "image",
-			"isRepeated": false
+			"isRepeated": false,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
@@ -40,7 +41,8 @@
 			"isRepeated": false,
 			"minHeight": 48,
 			"minHeightUnit": "vw",
-			"align": "full"
+			"align": "full",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
@@ -65,7 +67,8 @@
 			"backgroundType": "image",
 			"isRepeated": false,
 			"contentPosition": "bottom right",
-			"alt": ""
+			"alt": "",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
index 657c10cc928964..e6f3628a1401f3 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
@@ -7,13 +7,13 @@
 <!-- /wp:cover -->
 
 <!-- wp:cover {"url":"https://example.com/some-background-image.png","id":1933,"dimRatio":0,"focalPoint":{"x":"0.50","y":"0.40"},"minHeight":48,"minHeightUnit":"vw","align":"full"} -->
-<div class="wp-block-cover alignfull is-light" style="min-height:48vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
+<div class="wp-block-cover alignfull is-light" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
 <p></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
 
 <!-- wp:cover {"url":"http://localhost:8888/wp-content/uploads/2021/02/percy.jpg","id":134,"dimRatio":50,"contentPosition":"bottom right"} -->
-<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-right"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-134" alt="" src="http://localhost:8888/wp-content/uploads/2021/02/percy.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-right"><img class="wp-block-cover__image-background wp-image-134" alt="" src="http://localhost:8888/wp-content/uploads/2021/02/percy.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">test</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-7.json b/test/integration/fixtures/blocks/core__cover__deprecated-7.json
index 1b6f77f8a69f2f..1ebd864bd38301 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-7.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-7.json
@@ -8,7 +8,8 @@
 			"dimRatio": 40,
 			"backgroundType": "image",
 			"isRepeated": false,
-			"alt": ""
+			"alt": "",
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html
index baa8e32e7e8238..758219f8b0e440 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-7.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
-<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-8.json b/test/integration/fixtures/blocks/core__cover__deprecated-8.json
index afdd357c65076b..9d5142e60fdd53 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-8.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-8.json
@@ -9,7 +9,8 @@
 			"isRepeated": false,
 			"dimRatio": 40,
 			"backgroundType": "image",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-8.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-8.serialized.html
index fd99791a8e5247..7edbc1f1552679 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-8.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-8.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
                 Guten Berg!
         </p>
diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-9.json b/test/integration/fixtures/blocks/core__cover__deprecated-9.json
index a66655321fffa8..0f492be44c9681 100644
--- a/test/integration/fixtures/blocks/core__cover__deprecated-9.json
+++ b/test/integration/fixtures/blocks/core__cover__deprecated-9.json
@@ -10,7 +10,8 @@
 			"overlayColor": "primary",
 			"backgroundType": "image",
 			"minHeightUnit": "%",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
index 019385914ed580..d94cec5a8e21c7 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
-<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-parallax is-repeated"><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     <p class="has-text-align-center has-large-font-size"></p>
     <!-- /wp:paragraph --></div></div>
-    <!-- /wp:cover -->
\ No newline at end of file
+    <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.json b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.json
index 9412c6dffb399e..a85f0b4554f2a1 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.json
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.json
@@ -12,6 +12,7 @@
 			"dimRatio": 10,
 			"backgroundType": "image",
 			"isDark": false,
+			"tagName": "div",
 			"style": {
 				"color": {
 					"duotone": [ "#8c00b7", "#fcff41" ]
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
index 814565d144f08d..da2ecc1b779706 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.parsed.json
@@ -29,9 +29,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\"></div></div>\n    ",
+		"innerHTML": "\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__inner-container\"></div></div>\n    ",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><div class=\"wp-block-cover__inner-container\">",
+			"\n<div class=\"wp-block-cover is-light has-parallax is-repeated\"><div class=\"wp-block-cover__image-background wp-image-612 has-parallax is-repeated\" style=\"background-position:50% 50%;background-image:url(https://w.wiki/59So)\"></div><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\"></span><div class=\"wp-block-cover__inner-container\">",
 			null,
 			"</div></div>\n    "
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
index 3af9171f1fa60c..cd838bdc2b49df 100644
--- a/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__duotone-fixed-background.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"https://w.wiki/59So","id":612,"hasParallax":true,"isRepeated":true,"dimRatio":10,"isDark":false,"style":{"color":{"duotone":["#8c00b7","#fcff41"]}}} -->
-<div class="wp-block-cover is-light has-parallax is-repeated"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div role="img" class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover is-light has-parallax is-repeated"><div class="wp-block-cover__image-background wp-image-612 has-parallax is-repeated" style="background-position:50% 50%;background-image:url(https://w.wiki/59So)"></div><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-custom.json b/test/integration/fixtures/blocks/core__cover__gradient-custom.json
index e93e3e3591a0de..f2d911a74be4cb 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-custom.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-custom.json
@@ -10,7 +10,8 @@
 			"dimRatio": 100,
 			"backgroundType": "image",
 			"customGradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.html b/test/integration/fixtures/blocks/core__cover__gradient-image.html
index dba861ef5bf3f3..b10e6d215be80e 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-image.html
+++ b/test/integration/fixtures/blocks/core__cover__gradient-image.html
@@ -1,7 +1,7 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":30,"customGradient":"linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"} -->
 <div class="wp-block-cover">
-    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"></span>
     <img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/>
+    <span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"></span>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 		<p class="has-text-align-center has-large-font-size"> Cover! </p>
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.json b/test/integration/fixtures/blocks/core__cover__gradient-image.json
index 5faa75f6061366..5be874e5064346 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-image.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-image.json
@@ -11,7 +11,8 @@
 			"dimRatio": 30,
 			"backgroundType": "image",
 			"customGradient": "linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.parsed.json b/test/integration/fixtures/blocks/core__cover__gradient-image.parsed.json
index e5e97653e27459..38a5afd8aa1dad 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-image.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-image.parsed.json
@@ -21,9 +21,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover\">\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)\"></span>\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+			"\n<div class=\"wp-block-cover\">\n    <img class=\"wp-block-cover__image-background\" alt=\"\" src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" data-object-fit=\"cover\"/>\n    <span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.serialized.html b/test/integration/fixtures/blocks/core__cover__gradient-image.serialized.html
index 135949383f712c..22fbae8ff0ec36 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-image.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__gradient-image.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":30,"customGradient":"linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"></span><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background" alt="" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"> Cover! </p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.html b/test/integration/fixtures/blocks/core__cover__gradient-video.html
index 1081afe2518b3a..b2450400dd6853 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-video.html
+++ b/test/integration/fixtures/blocks/core__cover__gradient-video.html
@@ -1,7 +1,7 @@
 <!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":70,"backgroundType":"video","customGradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"} -->
 <div class="wp-block-cover">
-	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"></span>
 	<video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video>
+	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"></span>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 		<p class="has-text-align-center has-large-font-size">Cover!</p>
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.json b/test/integration/fixtures/blocks/core__cover__gradient-video.json
index f00cfdf16ade1c..fac1cefde8cd04 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-video.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-video.json
@@ -11,7 +11,8 @@
 			"dimRatio": 70,
 			"backgroundType": "video",
 			"customGradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.parsed.json b/test/integration/fixtures/blocks/core__cover__gradient-video.parsed.json
index 8ad72c9c549b24..95e30ce99f9d7b 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-video.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient-video.parsed.json
@@ -22,9 +22,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+			"\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient\" style=\"background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.serialized.html b/test/integration/fixtures/blocks/core__cover__gradient-video.serialized.html
index 417d8666481dcd..ab6f8bdd2a4ddf 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient-video.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__gradient-video.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":70,"backgroundType":"video","customGradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim-70 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cover!</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->
diff --git a/test/integration/fixtures/blocks/core__cover__gradient.json b/test/integration/fixtures/blocks/core__cover__gradient.json
index 87e3c40f7e6b7d..fe217953d90fb9 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient.json
@@ -10,7 +10,8 @@
 			"dimRatio": 100,
 			"backgroundType": "image",
 			"gradient": "luminous-dusk",
-			"isDark": false
+			"isDark": false,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__gradient__deprecated-8.json b/test/integration/fixtures/blocks/core__cover__gradient__deprecated-8.json
index 36bab506a84f99..e4db2a2ece377e 100644
--- a/test/integration/fixtures/blocks/core__cover__gradient__deprecated-8.json
+++ b/test/integration/fixtures/blocks/core__cover__gradient__deprecated-8.json
@@ -9,7 +9,8 @@
 			"dimRatio": 100,
 			"backgroundType": "image",
 			"gradient": "electric-grass",
-			"isDark": false
+			"isDark": false,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.json b/test/integration/fixtures/blocks/core__cover__solid-color.json
index fc06cc97cbf0d8..4d06b3e616e164 100644
--- a/test/integration/fixtures/blocks/core__cover__solid-color.json
+++ b/test/integration/fixtures/blocks/core__cover__solid-color.json
@@ -3,14 +3,16 @@
 		"name": "core/cover",
 		"isValid": true,
 		"attributes": {
-			"useFeaturedImage": false,
 			"alt": "",
 			"hasParallax": false,
 			"isRepeated": false,
 			"dimRatio": 100,
 			"overlayColor": "primary",
 			"backgroundType": "image",
-			"isDark": true
+			"isDark": true,
+			"useFeaturedImage": false,
+			"tagName": "div",
+			"isUserOverlayColor": true
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html b/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
index 4ac6a07e4769d0..333fb817b7283f 100644
--- a/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__solid-color.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:cover {"overlayColor":"primary"} -->
+<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true} -->
 <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size"></p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.html b/test/integration/fixtures/blocks/core__cover__video-overlay.html
index 3d78269821c152..ee45ce3355ebf2 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.html
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.html
@@ -1,7 +1,7 @@
-<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","backgroundType":"video"} -->
+<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","backgroundType":"video","isUserOverlayColor":true} -->
 <div class="wp-block-cover">
-	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim" style="background-color:#3615d9"></span>
 	<video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video>
+	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim" style="background-color:#3615d9"></span>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 		<p class="has-text-align-center has-large-font-size">
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.json b/test/integration/fixtures/blocks/core__cover__video-overlay.json
index 91c90b033550e8..a4171b22c98423 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.json
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.json
@@ -10,8 +10,10 @@
 			"isRepeated": false,
 			"dimRatio": 10,
 			"customOverlayColor": "#3615d9",
+			"isUserOverlayColor": true,
 			"backgroundType": "video",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.parsed.json b/test/integration/fixtures/blocks/core__cover__video-overlay.parsed.json
index c766000af56727..25bc07b02d873e 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.parsed.json
@@ -5,7 +5,8 @@
 			"url": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"dimRatio": 10,
 			"customOverlayColor": "#3615d9",
-			"backgroundType": "video"
+			"backgroundType": "video",
+			"isUserOverlayColor": true
 		},
 		"innerBlocks": [
 			{
@@ -22,9 +23,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\" style=\"background-color:#3615d9\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\" style=\"background-color:#3615d9\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\" style=\"background-color:#3615d9\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+			"\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-10 has-background-dim\" style=\"background-color:#3615d9\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html b/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
index cf13928cd9d204..f46a2b18c7044c 100644
--- a/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__video-overlay.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","backgroundType":"video"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim" style="background-color:#3615d9"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":10,"customOverlayColor":"#3615d9","isUserOverlayColor":true,"backgroundType":"video"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim" style="background-color:#3615d9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
diff --git a/test/integration/fixtures/blocks/core__cover__video.html b/test/integration/fixtures/blocks/core__cover__video.html
index 6dc5bfae8a15e4..84402f3079748d 100644
--- a/test/integration/fixtures/blocks/core__cover__video.html
+++ b/test/integration/fixtures/blocks/core__cover__video.html
@@ -1,7 +1,7 @@
 <!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":40,"backgroundType":"video"} -->
 <div class="wp-block-cover">
-	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
 	<video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video>
+	<span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span>
 	<div class="wp-block-cover__inner-container">
 		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 		<p class="has-text-align-center has-large-font-size">
diff --git a/test/integration/fixtures/blocks/core__cover__video.json b/test/integration/fixtures/blocks/core__cover__video.json
index 7568b269ef1946..698239ef191838 100644
--- a/test/integration/fixtures/blocks/core__cover__video.json
+++ b/test/integration/fixtures/blocks/core__cover__video.json
@@ -10,7 +10,8 @@
 			"isRepeated": false,
 			"dimRatio": 40,
 			"backgroundType": "video",
-			"isDark": true
+			"isDark": true,
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__cover__video.parsed.json b/test/integration/fixtures/blocks/core__cover__video.parsed.json
index 0ac0886db52f1f..652886567348f8 100644
--- a/test/integration/fixtures/blocks/core__cover__video.parsed.json
+++ b/test/integration/fixtures/blocks/core__cover__video.parsed.json
@@ -21,9 +21,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-cover\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+			"\n<div class=\"wp-block-cover\">\n\t<video class=\"wp-block-cover__video-background intrinsic-ignore\" autoplay muted loop playsinline src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\" data-object-fit=\"cover\"></video>\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-40 has-background-dim\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__cover__video.serialized.html b/test/integration/fixtures/blocks/core__cover__video.serialized.html
index 0fb6cbf9e1266e..9670adfd6c3cbd 100644
--- a/test/integration/fixtures/blocks/core__cover__video.serialized.html
+++ b/test/integration/fixtures/blocks/core__cover__video.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover {"url":"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=","dimRatio":40,"backgroundType":"video"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">
 			Guten Berg!
 		</p>
diff --git a/test/integration/fixtures/blocks/core__details.html b/test/integration/fixtures/blocks/core__details.html
new file mode 100644
index 00000000000000..855ea3f0a4f556
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.html
@@ -0,0 +1,7 @@
+<!-- wp:details {"summary":"Details Summary"} -->
+<details class="wp-block-details"><summary>Details Summary</summary>
+	<!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
+	<p>Details Content</p>
+	<!-- /wp:paragraph -->
+</details>
+<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__details.json b/test/integration/fixtures/blocks/core__details.json
new file mode 100644
index 00000000000000..e3873e4702db3f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/details",
+		"isValid": true,
+		"attributes": {
+			"showContent": false,
+			"summary": "Details Summary"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "Details Content",
+					"dropCap": false,
+					"placeholder": "Type / to add a hidden block"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details.parsed.json b/test/integration/fixtures/blocks/core__details.parsed.json
new file mode 100644
index 00000000000000..3240c013e8e866
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.parsed.json
@@ -0,0 +1,25 @@
+[
+	{
+		"blockName": "core/details",
+		"attrs": {
+			"summary": "Details Summary"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Type / to add a hidden block"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<p>Details Content</p>\n\t",
+				"innerContent": [ "\n\t<p>Details Content</p>\n\t" ]
+			}
+		],
+		"innerHTML": "\n<details class=\"wp-block-details\"><summary>Details Summary</summary>\n\t\n</details>\n",
+		"innerContent": [
+			"\n<details class=\"wp-block-details\"><summary>Details Summary</summary>\n\t",
+			null,
+			"\n</details>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__details.serialized.html b/test/integration/fixtures/blocks/core__details.serialized.html
new file mode 100644
index 00000000000000..a3e979414ac0d0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__details.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:details -->
+<details class="wp-block-details"><summary>Details Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
+<p>Details Content</p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->
diff --git a/test/integration/fixtures/blocks/core__footnotes.html b/test/integration/fixtures/blocks/core__footnotes.html
new file mode 100644
index 00000000000000..2a8de4f0687041
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.html
@@ -0,0 +1 @@
+<!-- wp:footnotes /-->
diff --git a/test/integration/fixtures/blocks/core__footnotes.json b/test/integration/fixtures/blocks/core__footnotes.json
new file mode 100644
index 00000000000000..eba2053ad810f4
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.json
@@ -0,0 +1,8 @@
+[
+	{
+		"name": "core/footnotes",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__footnotes.parsed.json b/test/integration/fixtures/blocks/core__footnotes.parsed.json
new file mode 100644
index 00000000000000..22375acad02853
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.parsed.json
@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/footnotes",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__footnotes.serialized.html b/test/integration/fixtures/blocks/core__footnotes.serialized.html
new file mode 100644
index 00000000000000..2a8de4f0687041
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__footnotes.serialized.html
@@ -0,0 +1 @@
+<!-- wp:footnotes /-->
diff --git a/test/integration/fixtures/blocks/core__form-input.html b/test/integration/fixtures/blocks/core__form-input.html
new file mode 100644
index 00000000000000..81ff6cf53534e8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.html
@@ -0,0 +1,20 @@
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input.json b/test/integration/fixtures/blocks/core__form-input.json
new file mode 100644
index 00000000000000..2d9865ef735562
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.json
@@ -0,0 +1,67 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "text",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "email",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "number",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "tel",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "url",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input.parsed.json b/test/integration/fixtures/blocks/core__form-input.parsed.json
new file mode 100644
index 00000000000000..439943df2841c8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.parsed.json
@@ -0,0 +1,83 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "email"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "number"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"number\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"number\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "tel"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"tel\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"tel\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "url"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"label\" aria-required=\"false\"/></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"label\" aria-required=\"false\"/></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input.serialized.html b/test/integration/fixtures/blocks/core__form-input.serialized.html
new file mode 100644
index 00000000000000..d66cedcf9215b8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input.serialized.html
@@ -0,0 +1,19 @@
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.html b/test/integration/fixtures/blocks/core__form-input__checkbox.html
new file mode 100644
index 00000000000000..fd08525a17eb33
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="checkbox" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.json b/test/integration/fixtures/blocks/core__form-input__checkbox.json
new file mode 100644
index 00000000000000..cc86ecd2a9080b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": true,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json
new file mode 100644
index 00000000000000..60b7b7dd37b091
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox",
+			"inlineLabel": true
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
new file mode 100644
index 00000000000000..fd08525a17eb33
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="checkbox" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
new file mode 100644
index 00000000000000..bd64e201e19185
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.html
@@ -0,0 +1,7 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json
new file mode 100644
index 00000000000000..162304dc84b0c2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json
new file mode 100644
index 00000000000000..2a2490e5c12607
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
new file mode 100644
index 00000000000000..66705934019701
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
new file mode 100644
index 00000000000000..3f1de1c6028470
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.html
@@ -0,0 +1,8 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<div class="wp-block-form-input">
+	<label class="wp-block-form-input__label">
+		<span class="wp-block-form-input__label-content">Label</span>
+		<input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/>
+	</label>
+</div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json
new file mode 100644
index 00000000000000..162304dc84b0c2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "checkbox",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json
new file mode 100644
index 00000000000000..dfa57c0755f685
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "checkbox"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"checkbox\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
new file mode 100644
index 00000000000000..66705934019701
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__checkbox__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"checkbox"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="checkbox" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
new file mode 100644
index 00000000000000..5f043b0b2ef644
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.html
@@ -0,0 +1,36 @@
+<!-- wp:form-input -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+
+<!-- wp:form-input {"type":"email"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
new file mode 100644
index 00000000000000..2d9865ef735562
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.json
@@ -0,0 +1,67 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "text",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "email",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "number",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "tel",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	},
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "url",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
new file mode 100644
index 00000000000000..963614974675d5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.parsed.json
@@ -0,0 +1,83 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"text\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n\n",
+		"innerContent": [ "\n\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "email"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"email\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"email\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "number"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"number\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"number\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "tel"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"tel\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"tel\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n\n",
+		"innerContent": [ "\n\n" ]
+	},
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "url"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"url\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"url\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
new file mode 100644
index 00000000000000..d66cedcf9215b8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__deprecated-v1.serialized.html
@@ -0,0 +1,19 @@
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="text" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="email" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"number"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="number" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"tel"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="tel" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><input class="wp-block-form-input__input" type="url" name="label" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.html b/test/integration/fixtures/blocks/core__form-input__radio.html
new file mode 100644
index 00000000000000..1e6c76424334fb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.json b/test/integration/fixtures/blocks/core__form-input__radio.json
new file mode 100644
index 00000000000000..18cec11e3305b1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": true,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio.parsed.json
new file mode 100644
index 00000000000000..8dbb5b5a09942a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio",
+			"inlineLabel": true
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label is-label-inline\"><input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" required aria-required=\"true\"/><span class=\"wp-block-form-input__label-content\">Label</span></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio.serialized.html
new file mode 100644
index 00000000000000..1e6c76424334fb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio","inlineLabel":true} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label is-label-inline"><input class="wp-block-form-input__input" type="radio" name="label" required aria-required="true"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
new file mode 100644
index 00000000000000..8c41e02f10f04a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.html
@@ -0,0 +1,7 @@
+<!-- wp:form-input {"type":"radio"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/>
+</label>
+<!-- /wp:form-input -->
+
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json
new file mode 100644
index 00000000000000..113ce01f7ab7ef
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json
new file mode 100644
index 00000000000000..7433a6c7e9c508
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
new file mode 100644
index 00000000000000..be1ae98e023107
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
new file mode 100644
index 00000000000000..a1c1b58f9b7fc5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.html
@@ -0,0 +1,8 @@
+<!-- wp:form-input {"type":"radio"} -->
+<div class="wp-block-form-input">
+	<label class="wp-block-form-input__label">
+		<span class="wp-block-form-input__label-content">Label</span>
+		<input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/>
+	</label>
+</div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json
new file mode 100644
index 00000000000000..113ce01f7ab7ef
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "radio",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json
new file mode 100644
index 00000000000000..14c7828b1c890d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "radio"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\">\n\t<label class=\"wp-block-form-input__label\">\n\t\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t\t<input class=\"wp-block-form-input__input\" type=\"radio\" name=\"label\" aria-required=\"false\"/>\n\t</label>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
new file mode 100644
index 00000000000000..be1ae98e023107
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__radio__deprecated-v2.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"radio"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><input class="wp-block-form-input__input" type="radio" name="label" aria-required="false"/><span class="wp-block-form-input__label-content">Label</span></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.html b/test/integration/fixtures/blocks/core__form-input__textarea.html
new file mode 100644
index 00000000000000..b39e1c8b51166f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><textarea class="wp-block-form-input__input" name="label" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.json b/test/integration/fixtures/blocks/core__form-input__textarea.json
new file mode 100644
index 00000000000000..62ae6f76a0e9d2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "textarea",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": true,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json b/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json
new file mode 100644
index 00000000000000..3f76a2194f27e4
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "textarea"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><textarea class=\"wp-block-form-input__input\" name=\"label\" required aria-required=\"true\"></textarea></label></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Label</span><textarea class=\"wp-block-form-input__input\" name=\"label\" required aria-required=\"true\"></textarea></label></div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html b/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
new file mode 100644
index 00000000000000..b39e1c8b51166f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><textarea class="wp-block-form-input__input" name="label" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
new file mode 100644
index 00000000000000..8f7722f81ccc57
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.html
@@ -0,0 +1,6 @@
+<!-- wp:form-input {"type":"textarea"} -->
+<label class="wp-block-form-input__label">
+	<span class="wp-block-form-input__label-content">Label</span>
+	<textarea class="wp-block-form-input__input" name="label" aria-required="false"></textarea>
+</label>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json
new file mode 100644
index 00000000000000..398106d8de1caf
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/form-input",
+		"isValid": true,
+		"attributes": {
+			"type": "textarea",
+			"label": "Label",
+			"inlineLabel": false,
+			"required": false,
+			"value": "",
+			"visibilityPermissions": "all"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json
new file mode 100644
index 00000000000000..e5e11f26d99606
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/form-input",
+		"attrs": {
+			"type": "textarea"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<textarea class=\"wp-block-form-input__input\" name=\"label\" aria-required=\"false\"></textarea>\n</label>\n",
+		"innerContent": [
+			"\n<label class=\"wp-block-form-input__label\">\n\t<span class=\"wp-block-form-input__label-content\">Label</span>\n\t<textarea class=\"wp-block-form-input__input\" name=\"label\" aria-required=\"false\"></textarea>\n</label>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html
new file mode 100644
index 00000000000000..530403c4964fae
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-input__textarea__deprecated-v1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Label</span><textarea class="wp-block-form-input__input" name="label" aria-required="false"></textarea></label></div>
+<!-- /wp:form-input -->
diff --git a/test/integration/fixtures/blocks/core__form-submission-notification.html b/test/integration/fixtures/blocks/core__form-submission-notification.html
new file mode 100644
index 00000000000000..04eaeef77097a2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submission-notification.html
@@ -0,0 +1,5 @@
+<!-- wp:form-submission-notification -->
+<div class="wp-block-form-submission-notification form-notification-type-success"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#000000"}}}},"backgroundColor":"#00D084","textColor":"#000000"} -->
+<p class="has-000000-color has-00-d-084-background-color has-text-color has-background has-link-color">Your form has been submitted successfully.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:form-submission-notification -->
diff --git a/test/integration/fixtures/blocks/core__form-submission-notification.json b/test/integration/fixtures/blocks/core__form-submission-notification.json
new file mode 100644
index 00000000000000..dac7502e9716ca
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submission-notification.json
@@ -0,0 +1,31 @@
+[
+	{
+		"name": "core/form-submission-notification",
+		"isValid": true,
+		"attributes": {
+			"type": "success"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "Your form has been submitted successfully.",
+					"dropCap": false,
+					"backgroundColor": "#00D084",
+					"textColor": "#000000",
+					"style": {
+						"elements": {
+							"link": {
+								"color": {
+									"text": "#000000"
+								}
+							}
+						}
+					}
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-submission-notification.parsed.json b/test/integration/fixtures/blocks/core__form-submission-notification.parsed.json
new file mode 100644
index 00000000000000..c339aef3b765c5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submission-notification.parsed.json
@@ -0,0 +1,35 @@
+[
+	{
+		"blockName": "core/form-submission-notification",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"style": {
+						"elements": {
+							"link": {
+								"color": {
+									"text": "#000000"
+								}
+							}
+						}
+					},
+					"backgroundColor": "#00D084",
+					"textColor": "#000000"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<p class=\"has-000000-color has-00-d-084-background-color has-text-color has-background has-link-color\">Your form has been submitted successfully.</p>\n",
+				"innerContent": [
+					"\n<p class=\"has-000000-color has-00-d-084-background-color has-text-color has-background has-link-color\">Your form has been submitted successfully.</p>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-form-submission-notification form-notification-type-success\"></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-submission-notification form-notification-type-success\">",
+			null,
+			"</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-submission-notification.serialized.html b/test/integration/fixtures/blocks/core__form-submission-notification.serialized.html
new file mode 100644
index 00000000000000..696d0ff2118489
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submission-notification.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:form-submission-notification -->
+<div class="wp-block-form-submission-notification form-notification-type-success"><!-- wp:paragraph {"backgroundColor":"#00D084","textColor":"#000000","style":{"elements":{"link":{"color":{"text":"#000000"}}}}} -->
+<p class="has-000000-color has-00-d-084-background-color has-text-color has-background has-link-color">Your form has been submitted successfully.</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:form-submission-notification -->
diff --git a/test/integration/fixtures/blocks/core__form-submit-button.html b/test/integration/fixtures/blocks/core__form-submit-button.html
new file mode 100644
index 00000000000000..a47c4642327505
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submit-button.html
@@ -0,0 +1,7 @@
+<!-- wp:form-submit-button -->
+<div class="wp-block-form-submit-button"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"tagName":"button","type":"submit"} -->
+<div class="wp-block-button"><button type="submit" class="wp-block-button__link wp-element-button">Submit</button></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:form-submit-button -->
diff --git a/test/integration/fixtures/blocks/core__form-submit-button.json b/test/integration/fixtures/blocks/core__form-submit-button.json
new file mode 100644
index 00000000000000..eca9cbb3f1a5d8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submit-button.json
@@ -0,0 +1,26 @@
+[
+	{
+		"name": "core/form-submit-button",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": [
+			{
+				"name": "core/buttons",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"name": "core/button",
+						"isValid": true,
+						"attributes": {
+							"tagName": "button",
+							"type": "submit",
+							"text": "Submit"
+						},
+						"innerBlocks": []
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-submit-button.parsed.json b/test/integration/fixtures/blocks/core__form-submit-button.parsed.json
new file mode 100644
index 00000000000000..3c674769ca06d5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submit-button.parsed.json
@@ -0,0 +1,38 @@
+[
+	{
+		"blockName": "core/form-submit-button",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/buttons",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/button",
+						"attrs": {
+							"tagName": "button",
+							"type": "submit"
+						},
+						"innerBlocks": [],
+						"innerHTML": "\n<div class=\"wp-block-button\"><button type=\"submit\" class=\"wp-block-button__link wp-element-button\">Submit</button></div>\n",
+						"innerContent": [
+							"\n<div class=\"wp-block-button\"><button type=\"submit\" class=\"wp-block-button__link wp-element-button\">Submit</button></div>\n"
+						]
+					}
+				],
+				"innerHTML": "\n<div class=\"wp-block-buttons\"></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-buttons\">",
+					null,
+					"</div>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-form-submit-button\"></div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-form-submit-button\">",
+			null,
+			"</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form-submit-button.serialized.html b/test/integration/fixtures/blocks/core__form-submit-button.serialized.html
new file mode 100644
index 00000000000000..a47c4642327505
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form-submit-button.serialized.html
@@ -0,0 +1,7 @@
+<!-- wp:form-submit-button -->
+<div class="wp-block-form-submit-button"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"tagName":"button","type":"submit"} -->
+<div class="wp-block-button"><button type="submit" class="wp-block-button__link wp-element-button">Submit</button></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:form-submit-button -->
diff --git a/test/integration/fixtures/blocks/core__form.html b/test/integration/fixtures/blocks/core__form.html
new file mode 100644
index 00000000000000..825389eb75ecd3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.html
@@ -0,0 +1,27 @@
+<!-- wp:form -->
+<form class="wp-block-form" enctype="text/plain">
+<!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-submit-button -->
+<div class="wp-block-form-submit-button"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"tagName":"button","type":"submit"} -->
+<div class="wp-block-button"><button type="submit" class="wp-block-button__link wp-element-button">Submit</button></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:form-submit-button -->
+</form>
+<!-- /wp:form -->
diff --git a/test/integration/fixtures/blocks/core__form.json b/test/integration/fixtures/blocks/core__form.json
new file mode 100644
index 00000000000000..d1dd3738a5801b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.json
@@ -0,0 +1,88 @@
+[
+	{
+		"name": "core/form",
+		"isValid": true,
+		"attributes": {
+			"submissionMethod": "email",
+			"method": "post"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/form-input",
+				"isValid": true,
+				"attributes": {
+					"type": "text",
+					"label": "Name",
+					"inlineLabel": false,
+					"required": true,
+					"value": "",
+					"visibilityPermissions": "all"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/form-input",
+				"isValid": true,
+				"attributes": {
+					"type": "email",
+					"label": "Email",
+					"inlineLabel": false,
+					"required": true,
+					"value": "",
+					"visibilityPermissions": "all"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/form-input",
+				"isValid": true,
+				"attributes": {
+					"type": "url",
+					"label": "Website",
+					"inlineLabel": false,
+					"required": false,
+					"value": "",
+					"visibilityPermissions": "all"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/form-input",
+				"isValid": true,
+				"attributes": {
+					"type": "textarea",
+					"label": "Comment",
+					"inlineLabel": false,
+					"required": true,
+					"value": "",
+					"visibilityPermissions": "all"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/form-submit-button",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"name": "core/buttons",
+						"isValid": true,
+						"attributes": {},
+						"innerBlocks": [
+							{
+								"name": "core/button",
+								"isValid": true,
+								"attributes": {
+									"tagName": "button",
+									"type": "submit",
+									"text": "Submit"
+								},
+								"innerBlocks": []
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form.parsed.json b/test/integration/fixtures/blocks/core__form.parsed.json
new file mode 100644
index 00000000000000..e33849b5be5041
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.parsed.json
@@ -0,0 +1,100 @@
+[
+	{
+		"blockName": "core/form",
+		"attrs": {},
+		"innerBlocks": [
+			{
+				"blockName": "core/form-input",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Name</span><input class=\"wp-block-form-input__input\" type=\"text\" name=\"name\" required aria-required=\"true\"/></label></div>\n"
+				]
+			},
+			{
+				"blockName": "core/form-input",
+				"attrs": {
+					"type": "email"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Email</span><input class=\"wp-block-form-input__input\" type=\"email\" name=\"email\" required aria-required=\"true\"/></label></div>\n"
+				]
+			},
+			{
+				"blockName": "core/form-input",
+				"attrs": {
+					"type": "url"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Website</span><input class=\"wp-block-form-input__input\" type=\"url\" name=\"website\" aria-required=\"false\"/></label></div>\n"
+				]
+			},
+			{
+				"blockName": "core/form-input",
+				"attrs": {
+					"type": "textarea"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-form-input\"><label class=\"wp-block-form-input__label\"><span class=\"wp-block-form-input__label-content\">Comment</span><textarea class=\"wp-block-form-input__input\" name=\"comment\" required aria-required=\"true\"></textarea></label></div>\n"
+				]
+			},
+			{
+				"blockName": "core/form-submit-button",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/buttons",
+						"attrs": {},
+						"innerBlocks": [
+							{
+								"blockName": "core/button",
+								"attrs": {
+									"tagName": "button",
+									"type": "submit"
+								},
+								"innerBlocks": [],
+								"innerHTML": "\n<div class=\"wp-block-button\"><button type=\"submit\" class=\"wp-block-button__link wp-element-button\">Submit</button></div>\n",
+								"innerContent": [
+									"\n<div class=\"wp-block-button\"><button type=\"submit\" class=\"wp-block-button__link wp-element-button\">Submit</button></div>\n"
+								]
+							}
+						],
+						"innerHTML": "\n<div class=\"wp-block-buttons\"></div>\n",
+						"innerContent": [
+							"\n<div class=\"wp-block-buttons\">",
+							null,
+							"</div>\n"
+						]
+					}
+				],
+				"innerHTML": "\n<div class=\"wp-block-form-submit-button\"></div>\n",
+				"innerContent": [
+					"\n<div class=\"wp-block-form-submit-button\">",
+					null,
+					"</div>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<form class=\"wp-block-form\" enctype=\"text/plain\">\n\n\n\n\n\n\n\n\n\n</form>\n",
+		"innerContent": [
+			"\n<form class=\"wp-block-form\" enctype=\"text/plain\">\n",
+			null,
+			"\n\n",
+			null,
+			"\n\n",
+			null,
+			"\n\n",
+			null,
+			"\n\n",
+			null,
+			"\n</form>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__form.serialized.html b/test/integration/fixtures/blocks/core__form.serialized.html
new file mode 100644
index 00000000000000..e3209102ce20be
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__form.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:form -->
+<form class="wp-block-form" enctype="text/plain"><!-- wp:form-input -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Name</span><input class="wp-block-form-input__input" type="text" name="name" required aria-required="true"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"email"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Email</span><input class="wp-block-form-input__input" type="email" name="email" required aria-required="true"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"url"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Website</span><input class="wp-block-form-input__input" type="url" name="website" aria-required="false"/></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-input {"type":"textarea"} -->
+<div class="wp-block-form-input"><label class="wp-block-form-input__label"><span class="wp-block-form-input__label-content">Comment</span><textarea class="wp-block-form-input__input" name="comment" required aria-required="true"></textarea></label></div>
+<!-- /wp:form-input -->
+
+<!-- wp:form-submit-button -->
+<div class="wp-block-form-submit-button"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"tagName":"button","type":"submit"} -->
+<div class="wp-block-button"><button type="submit" class="wp-block-button__link wp-element-button">Submit</button></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:form-submit-button --></form>
+<!-- /wp:form -->
diff --git a/test/integration/fixtures/blocks/core__gallery-with-caption.json b/test/integration/fixtures/blocks/core__gallery-with-caption.json
index 12b516606641d4..1106c8ccb64b2a 100644
--- a/test/integration/fixtures/blocks/core__gallery-with-caption.json
+++ b/test/integration/fixtures/blocks/core__gallery-with-caption.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "Gallery Caption",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",
diff --git a/test/integration/fixtures/blocks/core__gallery.json b/test/integration/fixtures/blocks/core__gallery.json
index 8b7a1000d37ccc..27fc4c75dc8dc0 100644
--- a/test/integration/fixtures/blocks/core__gallery.json
+++ b/test/integration/fixtures/blocks/core__gallery.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",
diff --git a/test/integration/fixtures/blocks/core__gallery__columns.json b/test/integration/fixtures/blocks/core__gallery__columns.json
index d0c40b3d3a9a93..beb97c3ac50802 100644
--- a/test/integration/fixtures/blocks/core__gallery__columns.json
+++ b/test/integration/fixtures/blocks/core__gallery__columns.json
@@ -9,6 +9,7 @@
 			"columns": 1,
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "none",
 			"sizeSlug": "large",
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
index 9e15ee7f1c7149..bd6108a97230a3 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-1.json
@@ -16,6 +16,7 @@
 				"attributes": {
 					"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 					"alt": "title",
+					"caption": "",
 					"linkDestination": "none"
 				},
 				"innerBlocks": []
@@ -26,6 +27,7 @@
 				"attributes": {
 					"url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 					"alt": "title",
+					"caption": "",
 					"linkDestination": "none"
 				},
 				"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
index 4eaf85b46906d6..05a630370f9b09 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
@@ -8,6 +8,7 @@
 			"shortCodeTransforms": [],
 			"caption": "",
 			"imageCrop": true,
+			"randomOrder": false,
 			"fixedHeight": true,
 			"linkTo": "media",
 			"sizeSlug": "large",
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html
index 0aed527cce98c9..b0f29b4126b333 100644
--- a/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html
@@ -12,7 +12,7 @@
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->
 
-<!-- wp:gallery {"ids":[],"shortCodeTransforms":[],"linkTo":"media"} -->
+<!-- wp:gallery {"linkTo":"media"} -->
 <figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
 <figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
 <!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__heading__deprecated-1.serialized.html
index 0a2f890302c3f0..a064b6f60cf049 100644
--- a/test/integration/fixtures/blocks/core__heading__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textAlign":"right","level":3} -->
-<h3 class="has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
+<h3 class="wp-block-heading has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__heading__deprecated-2.serialized.html
index 1dbaea2593eb91..989d82a8d7fca8 100644
--- a/test/integration/fixtures/blocks/core__heading__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">text</h2>
+<h2 class="wp-block-heading has-accent-color has-text-color">text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__heading__deprecated-3.serialized.html
index c2c4470e500f1e..2e04a7e01f9778 100644
--- a/test/integration/fixtures/blocks/core__heading__deprecated-3.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-3.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"style":{"color":{"text":"#268ebb"}}} -->
-<h2 class="has-text-color" style="color:#268ebb">Text</h2>
+<h2 class="wp-block-heading has-text-color" style="color:#268ebb">Text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__heading__deprecated-4.serialized.html
index 2e4f98cda15fff..cc4218e776a73a 100644
--- a/test/integration/fixtures/blocks/core__heading__deprecated-4.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-4.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textAlign":"center","textColor":"accent"} -->
-<h2 class="has-text-align-center has-accent-color has-text-color">Text</h2>
+<h2 class="wp-block-heading has-text-align-center has-accent-color has-text-color">Text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.html b/test/integration/fixtures/blocks/core__heading__deprecated-5.html
new file mode 100644
index 00000000000000..c66e23d5ef74ed
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-5.html
@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"right","textColor":"primary"} -->
+<h2 class="has-text-align-right has-primary-color has-text-color">Text</h2>
+<!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.json b/test/integration/fixtures/blocks/core__heading__deprecated-5.json
new file mode 100644
index 00000000000000..64c89ad0cd9793
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-5.json
@@ -0,0 +1,13 @@
+[
+	{
+		"name": "core/heading",
+		"isValid": true,
+		"attributes": {
+			"textAlign": "right",
+			"content": "Text",
+			"level": 2,
+			"textColor": "primary"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.parsed.json b/test/integration/fixtures/blocks/core__heading__deprecated-5.parsed.json
new file mode 100644
index 00000000000000..b15597658da02c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-5.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/heading",
+		"attrs": {
+			"textAlign": "right",
+			"textColor": "primary"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<h2 class=\"has-text-align-right has-primary-color has-text-color\">Text</h2>\n",
+		"innerContent": [
+			"\n<h2 class=\"has-text-align-right has-primary-color has-text-color\">Text</h2>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__heading__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__heading__deprecated-5.serialized.html
new file mode 100644
index 00000000000000..a81affa226f771
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__heading__deprecated-5.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:heading {"textAlign":"right","textColor":"primary"} -->
+<h2 class="wp-block-heading has-text-align-right has-primary-color has-text-color">Text</h2>
+<!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__h2-color.html b/test/integration/fixtures/blocks/core__heading__h2-color.html
index 23c39f701c7651..7d1dee6d706321 100644
--- a/test/integration/fixtures/blocks/core__heading__h2-color.html
+++ b/test/integration/fixtures/blocks/core__heading__h2-color.html
@@ -1,4 +1,4 @@
 <!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<h2 class="wp-block-heading has-accent-color has-text-color">Text</h2>
 <!-- /wp:heading -->
 
diff --git a/test/integration/fixtures/blocks/core__heading__h2-color.parsed.json b/test/integration/fixtures/blocks/core__heading__h2-color.parsed.json
index 64a2fb552e7fb2..763648f6d61126 100644
--- a/test/integration/fixtures/blocks/core__heading__h2-color.parsed.json
+++ b/test/integration/fixtures/blocks/core__heading__h2-color.parsed.json
@@ -5,9 +5,9 @@
 			"textColor": "accent"
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n",
+		"innerHTML": "\n<h2 class=\"wp-block-heading has-accent-color has-text-color\">Text</h2>\n",
 		"innerContent": [
-			"\n<h2 class=\"has-accent-color has-text-color\">Text</h2>\n"
+			"\n<h2 class=\"wp-block-heading has-accent-color has-text-color\">Text</h2>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__heading__h2-color.serialized.html b/test/integration/fixtures/blocks/core__heading__h2-color.serialized.html
index 862a62b2d79751..73bb9438502720 100644
--- a/test/integration/fixtures/blocks/core__heading__h2-color.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__h2-color.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textColor":"accent"} -->
-<h2 class="has-accent-color has-text-color">Text</h2>
+<h2 class="wp-block-heading has-accent-color has-text-color">Text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__h2.html b/test/integration/fixtures/blocks/core__heading__h2.html
index a55b391a250578..d7b487af0b670d 100644
--- a/test/integration/fixtures/blocks/core__heading__h2.html
+++ b/test/integration/fixtures/blocks/core__heading__h2.html
@@ -1,3 +1,3 @@
 <!-- wp:core/heading -->
-<h2>A picture is worth a thousand words, or so the saying goes</h2>
+<h2 class="wp-block-heading">A picture is worth a thousand words, or so the saying goes</h2>
 <!-- /wp:core/heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__h2.parsed.json b/test/integration/fixtures/blocks/core__heading__h2.parsed.json
index 7e8932f95e5de2..ab763edaea5ec0 100644
--- a/test/integration/fixtures/blocks/core__heading__h2.parsed.json
+++ b/test/integration/fixtures/blocks/core__heading__h2.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/heading",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<h2>A picture is worth a thousand words, or so the saying goes</h2>\n",
+		"innerHTML": "\n<h2 class=\"wp-block-heading\">A picture is worth a thousand words, or so the saying goes</h2>\n",
 		"innerContent": [
-			"\n<h2>A picture is worth a thousand words, or so the saying goes</h2>\n"
+			"\n<h2 class=\"wp-block-heading\">A picture is worth a thousand words, or so the saying goes</h2>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__heading__h2.serialized.html b/test/integration/fixtures/blocks/core__heading__h2.serialized.html
index 1212bf83c30297..96cc3063da1059 100644
--- a/test/integration/fixtures/blocks/core__heading__h2.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__h2.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading -->
-<h2>A picture is worth a thousand words, or so the saying goes</h2>
+<h2 class="wp-block-heading">A picture is worth a thousand words, or so the saying goes</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__h4-em.html b/test/integration/fixtures/blocks/core__heading__h4-em.html
index bd13c30bb968d1..0a72af58e24db7 100644
--- a/test/integration/fixtures/blocks/core__heading__h4-em.html
+++ b/test/integration/fixtures/blocks/core__heading__h4-em.html
@@ -1,3 +1,3 @@
 <!-- wp:core/heading {"level":4} -->
-<h4>The <em>Inserter</em> Tool</h4>
+<h4 class="wp-block-heading">The <em>Inserter</em> Tool</h4>
 <!-- /wp:core/heading -->
diff --git a/test/integration/fixtures/blocks/core__heading__h4-em.parsed.json b/test/integration/fixtures/blocks/core__heading__h4-em.parsed.json
index 283fd532b3fd2f..b8cd44ca0471ed 100644
--- a/test/integration/fixtures/blocks/core__heading__h4-em.parsed.json
+++ b/test/integration/fixtures/blocks/core__heading__h4-em.parsed.json
@@ -5,7 +5,9 @@
 			"level": 4
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<h4>The <em>Inserter</em> Tool</h4>\n",
-		"innerContent": [ "\n<h4>The <em>Inserter</em> Tool</h4>\n" ]
+		"innerHTML": "\n<h4 class=\"wp-block-heading\">The <em>Inserter</em> Tool</h4>\n",
+		"innerContent": [
+			"\n<h4 class=\"wp-block-heading\">The <em>Inserter</em> Tool</h4>\n"
+		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__heading__h4-em.serialized.html b/test/integration/fixtures/blocks/core__heading__h4-em.serialized.html
index 051e1c9f39b273..d7a3b904dbd9ab 100644
--- a/test/integration/fixtures/blocks/core__heading__h4-em.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading__h4-em.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"level":4} -->
-<h4>The <em>Inserter</em> Tool</h4>
+<h4 class="wp-block-heading">The <em>Inserter</em> Tool</h4>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading_align-textalign.html b/test/integration/fixtures/blocks/core__heading_align-textalign.html
index 26c8041d1b97a5..3f7fb12335b4b8 100644
--- a/test/integration/fixtures/blocks/core__heading_align-textalign.html
+++ b/test/integration/fixtures/blocks/core__heading_align-textalign.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textAlign":"center","align":"wide"} -->
-<h2 class="alignwide has-text-align-center">Text</h2>
+<h2 class="wp-block-heading alignwide has-text-align-center">Text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__heading_align-textalign.parsed.json b/test/integration/fixtures/blocks/core__heading_align-textalign.parsed.json
index 918ba0e5c79bba..bd378de8f71dc1 100644
--- a/test/integration/fixtures/blocks/core__heading_align-textalign.parsed.json
+++ b/test/integration/fixtures/blocks/core__heading_align-textalign.parsed.json
@@ -6,9 +6,9 @@
 			"align": "wide"
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n",
+		"innerHTML": "\n<h2 class=\"wp-block-heading alignwide has-text-align-center\">Text</h2>\n",
 		"innerContent": [
-			"\n<h2 class=\"alignwide has-text-align-center\">Text</h2>\n"
+			"\n<h2 class=\"wp-block-heading alignwide has-text-align-center\">Text</h2>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__heading_align-textalign.serialized.html b/test/integration/fixtures/blocks/core__heading_align-textalign.serialized.html
index 26c8041d1b97a5..3f7fb12335b4b8 100644
--- a/test/integration/fixtures/blocks/core__heading_align-textalign.serialized.html
+++ b/test/integration/fixtures/blocks/core__heading_align-textalign.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:heading {"textAlign":"center","align":"wide"} -->
-<h2 class="alignwide has-text-align-center">Text</h2>
+<h2 class="wp-block-heading alignwide has-text-align-center">Text</h2>
 <!-- /wp:heading -->
diff --git a/test/integration/fixtures/blocks/core__image__center-caption.json b/test/integration/fixtures/blocks/core__image__center-caption.json
index a369e433b4028e..034047c07089b9 100644
--- a/test/integration/fixtures/blocks/core__image__center-caption.json
+++ b/test/integration/fixtures/blocks/core__image__center-caption.json
@@ -3,10 +3,10 @@
 		"name": "core/image",
 		"isValid": true,
 		"attributes": {
-			"align": "center",
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"alt": "",
-			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar."
+			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar.",
+			"align": "center"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.json b/test/integration/fixtures/blocks/core__image__deprecated-1.json
deleted file mode 100644
index e5d1dcba576aaf..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-1.json
+++ /dev/null
@@ -1,13 +0,0 @@
-[
-	{
-		"name": "core/image",
-		"isValid": true,
-		"attributes": {
-			"align": "left",
-			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
-			"alt": "",
-			"caption": ""
-		},
-		"innerBlocks": []
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.json b/test/integration/fixtures/blocks/core__image__deprecated-2.json
deleted file mode 100644
index bae213510011ac..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-2.json
+++ /dev/null
@@ -1,15 +0,0 @@
-[
-	{
-		"name": "core/image",
-		"isValid": true,
-		"attributes": {
-			"align": "left",
-			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
-			"alt": "",
-			"caption": "",
-			"width": 100,
-			"height": 100
-		},
-		"innerBlocks": []
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html
deleted file mode 100644
index eb06f249748638..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
-<figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" width="100" height="100"/></figure>
-<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.json b/test/integration/fixtures/blocks/core__image__deprecated-3.json
deleted file mode 100644
index bae213510011ac..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-3.json
+++ /dev/null
@@ -1,15 +0,0 @@
-[
-	{
-		"name": "core/image",
-		"isValid": true,
-		"attributes": {
-			"align": "left",
-			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
-			"alt": "",
-			"caption": "",
-			"width": 100,
-			"height": 100
-		},
-		"innerBlocks": []
-	}
-]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html
deleted file mode 100644
index eb06f249748638..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
-<figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" width="100" height="100"/></figure>
-<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html
deleted file mode 100644
index 5ba1eb754e83f6..00000000000000
--- a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- wp:image {"align":"left","id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none"} -->
-<figure class="wp-block-image alignleft size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-13" width="358" height="164"/></figure>
-<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.html b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
new file mode 100644
index 00000000000000..6b2f1a80f52c6d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json
@@ -0,0 +1,13 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": [],
+			"align": "left"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
new file mode 100644
index 00000000000000..a0ad3b755587b8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": [],
+			"align": "left",
+			"width": 100,
+			"height": 100
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-2.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
new file mode 100644
index 00000000000000..c03189e9b456c0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"width":100,"height":100,"align":"left"} -->
+<figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json
new file mode 100644
index 00000000000000..644f9629ea8d86
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"align": "left",
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"width": "100px",
+			"height": "100px"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-3.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
new file mode 100644
index 00000000000000..2c0d6f487d57b1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"width":"100px","height":"100px","align":"left"} -->
+<figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
new file mode 100644
index 00000000000000..b9e58cc24fddb4
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
+<figure class="wp-block-image alignleft size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-13" style="width:358px;height:164px"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.parsed.json
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.parsed.json
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.parsed.json
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.serialized.html
similarity index 100%
rename from test/integration/fixtures/blocks/core__image__deprecated-border-radius-5.serialized.html
rename to test/integration/fixtures/blocks/core__image__deprecated-v5-move-border-radius-style.serialized.html
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html
new file mode 100644
index 00000000000000..6c113ee0f09ee0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","style":{"border":{"radius":"100%"}},"className":"is-style-rounded"} -->
+<figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%" width="164" height="164"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json
new file mode 100644
index 00000000000000..1acdf6f92453c8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"align": "left",
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"width": "164px",
+			"height": "164px",
+			"sizeSlug": "large",
+			"className": "is-style-rounded",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json
new file mode 100644
index 00000000000000..e9c061bb19125e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.parsed.json
@@ -0,0 +1,22 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"align": "left",
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large",
+			"style": {
+				"border": {
+					"radius": "100%"
+				}
+			},
+			"className": "is-style-rounded"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"border-radius:100%\" width=\"164\" height=\"164\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"border-radius:100%\" width=\"164\" height=\"164\"/></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
new file mode 100644
index 00000000000000..5ffd11a5baa8e7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"width":"164px","height":"164px","sizeSlug":"large","align":"left","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
+<figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%;width:164px;height:164px"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.html b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.html
new file mode 100644
index 00000000000000..7210aee3564b5f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"width":164,"height":164,"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:164px;height:164px;" width="164" height="164"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.json b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.json
new file mode 100644
index 00000000000000..b49c515f8e5ab6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.json
@@ -0,0 +1,15 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"sizeSlug": "large",
+			"width": "164px",
+			"height": "164px"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.parsed.json
new file mode 100644
index 00000000000000..fbd8627807b3da
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.parsed.json
@@ -0,0 +1,15 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"width": 164,
+			"height": 164,
+			"sizeSlug": "large"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"width:164px;height:164px;\" width=\"164\" height=\"164\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" style=\"width:164px;height:164px;\" width=\"164\" height=\"164\"/></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.serialized.html
new file mode 100644
index 00000000000000..5392d261af89d6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v7-string-width-height-attributes.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"width":"164px","height":"164px","sizeSlug":"large"} -->
+<figure class="wp-block-image size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:164px;height:164px"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html
new file mode 100644
index 00000000000000..3cdb772864b4d8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"behaviors":{"lightbox":{"enabled": true,	"animation": "fade"}},"id":8,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-8"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json
new file mode 100644
index 00000000000000..73a483d911a780
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json
@@ -0,0 +1,18 @@
+[
+	{
+		"name": "core/image",
+		"isValid": true,
+		"attributes": {
+			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+			"alt": "",
+			"caption": "",
+			"id": 8,
+			"sizeSlug": "large",
+			"linkDestination": "none",
+			"lightbox": {
+				"enabled": true
+			}
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json
new file mode 100644
index 00000000000000..a582b93cab43b7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json
@@ -0,0 +1,21 @@
+[
+	{
+		"blockName": "core/image",
+		"attrs": {
+			"behaviors": {
+				"lightbox": {
+					"enabled": true,
+					"animation": "fade"
+				}
+			},
+			"id": 8,
+			"sizeSlug": "large",
+			"linkDestination": "none"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-image size-large\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" class=\"wp-image-8\"/></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-image size-large\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" class=\"wp-image-8\"/></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html
new file mode 100644
index 00000000000000..9feeb105951daa
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:image {"lightbox":{"enabled":true},"id":8,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-8"/></figure>
+<!-- /wp:image -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
index fa50fb5db17e7b..ad0919beb9bde4 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v0.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list {"fontFamily":"cambria-georgia"} -->
-<ul class="has-cambria-georgia-font-family"><!-- wp:list-item -->
+<ul class="wp-block-list has-cambria-georgia-font-family"><!-- wp:list-item -->
 <li>one</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
index 61e33d3dc0e156..39a3efa2eabed8 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
@@ -1,9 +1,9 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -11,7 +11,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -19,7 +19,7 @@
 
 <!-- wp:list-item -->
 <li><strong>Item</strong><!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.html b/test/integration/fixtures/blocks/core__list__deprecated-v2.html
new file mode 100644
index 00000000000000..9969965e5a56ce
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.html
@@ -0,0 +1,7 @@
+<!-- wp:list {"ordered":true,"type":"A"} -->
+<ol type="A">
+	<!-- wp:list-item -->
+	<li>Item 1</li>
+	<!-- /wp:list-item -->
+</ol>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.json b/test/integration/fixtures/blocks/core__list__deprecated-v2.json
new file mode 100644
index 00000000000000..be078f2f8208e4
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.json
@@ -0,0 +1,21 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": true,
+			"values": "",
+			"type": "upper-alpha"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Item 1"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v2.parsed.json
new file mode 100644
index 00000000000000..7ddda9e08da5ab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.parsed.json
@@ -0,0 +1,20 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {
+			"ordered": true,
+			"type": "A"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/list-item",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<li>Item 1</li>\n\t",
+				"innerContent": [ "\n\t<li>Item 1</li>\n\t" ]
+			}
+		],
+		"innerHTML": "\n<ol type=\"A\">\n\t\n</ol>\n",
+		"innerContent": [ "\n<ol type=\"A\">\n\t", null, "\n</ol>\n" ]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
new file mode 100644
index 00000000000000..6fdf3ad84feeb9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v2.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:list {"ordered":true,"type":"upper-alpha"} -->
+<ol style="list-style-type:upper-alpha" class="wp-block-list"><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
new file mode 100644
index 00000000000000..aef6bf669f2c98
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.html
@@ -0,0 +1,3 @@
+<!-- wp:core/list -->
+<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>
+<!-- /wp:core/list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
new file mode 100644
index 00000000000000..80cd87e4eb69e8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.json
@@ -0,0 +1,60 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": false,
+			"values": ""
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Text &amp; Headings"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Images &amp; Videos"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Galleries"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Embeds, like YouTube, Tweets, or other WordPress posts."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "Layout blocks, like Buttons, Hero Images, Separators, etc."
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "And <em>Lists</em> like this one of course :)"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
new file mode 100644
index 00000000000000..427f4c3a975cfd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n",
+		"innerContent": [
+			"\n<ul><li>Text & Headings</li><li>Images & Videos</li><li>Galleries</li><li>Embeds, like YouTube, Tweets, or other WordPress posts.</li><li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li><li>And <em>Lists</em> like this one of course :)</li></ul>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
new file mode 100644
index 00000000000000..4d74394771fcb5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v3-css-class.serialized.html
@@ -0,0 +1,25 @@
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>Text &amp; Headings</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Images &amp; Videos</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Galleries</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Embeds, like YouTube, Tweets, or other WordPress posts.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Layout blocks, like Buttons, Hero Images, Separators, etc.</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>And <em>Lists</em> like this one of course :)</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__ul.html b/test/integration/fixtures/blocks/core__list__ul.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__ul.html
+++ b/test/integration/fixtures/blocks/core__list__ul.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__list__ul.parsed.json b/test/integration/fixtures/blocks/core__list__ul.parsed.json
index 2853bc5558ebe3..4639b007c777b7 100644
--- a/test/integration/fixtures/blocks/core__list__ul.parsed.json
+++ b/test/integration/fixtures/blocks/core__list__ul.parsed.json
@@ -52,9 +52,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<ul>\n\n\n\n\n\n\n\n\n\n</ul>\n",
+		"innerHTML": "\n<ul class=\"wp-block-list\">\n\n\n\n\n\n\n\n\n\n</ul>\n",
 		"innerContent": [
-			"\n<ul>",
+			"\n<ul class=\"wp-block-list\">",
 			null,
 			"\n\n",
 			null,
diff --git a/test/integration/fixtures/blocks/core__list__ul.serialized.html b/test/integration/fixtures/blocks/core__list__ul.serialized.html
index c09708d51db0bb..4d74394771fcb5 100644
--- a/test/integration/fixtures/blocks/core__list__ul.serialized.html
+++ b/test/integration/fixtures/blocks/core__list__ul.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Text &amp; Headings</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/blocks/core__media-text.html b/test/integration/fixtures/blocks/core__media-text.html
index 8c05e44479a5ab..52ed3cb3c8a496 100644
--- a/test/integration/fixtures/blocks/core__media-text.html
+++ b/test/integration/fixtures/blocks/core__media-text.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile">
+<div class="wp-block-media-text is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
 	</figure>
diff --git a/test/integration/fixtures/blocks/core__media-text.json b/test/integration/fixtures/blocks/core__media-text.json
index 99158c68ba3371..dd86e7d9dd8dd0 100644
--- a/test/integration/fixtures/blocks/core__media-text.json
+++ b/test/integration/fixtures/blocks/core__media-text.json
@@ -3,13 +3,14 @@
 		"name": "core/media-text",
 		"isValid": true,
 		"attributes": {
-			"align": "wide",
+			"align": "none",
 			"mediaAlt": "",
 			"mediaPosition": "left",
 			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text.parsed.json b/test/integration/fixtures/blocks/core__media-text.parsed.json
index 84a992af2abc86..c7876c627eef07 100644
--- a/test/integration/fixtures/blocks/core__media-text.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text.parsed.json
@@ -18,9 +18,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text.serialized.html b/test/integration/fixtures/blocks/core__media-text.serialized.html
index 3a0190e7eeb8e7..eae92996876bf9 100644
--- a/test/integration/fixtures/blocks/core__media-text.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"mediaType":"image"} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v2.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.html
new file mode 100644
index 00000000000000..e258c04a8a8f83
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaType":"image"} -->
+<div class="wp-block-media-text">
+	<figure class="wp-block-media-text__media">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
+	</figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…"} -->
+		<p>My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v2.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.json
new file mode 100644
index 00000000000000..ca2b0016872687
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.json
@@ -0,0 +1,27 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": false,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v2.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.parsed.json
new file mode 100644
index 00000000000000..46b59fa2cac5f3
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.parsed.json
@@ -0,0 +1,25 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p>My Content</p>\n\t\t",
+				"innerContent": [ "\n\t\t<p>My Content</p>\n\t\t" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v2.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.serialized.html
new file mode 100644
index 00000000000000..0c0fb613d64b53
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v2.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image","isStackedOnMobile":false} -->
+<div class="wp-block-media-text alignwide"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
+<p>My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
index 9b33221d935d55..8c88b8b67795d7 100644
--- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56% 57%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:56% 57%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
 <p>My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html
new file mode 100644
index 00000000000000..8c05e44479a5ab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaType":"image"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/>
+	</figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
new file mode 100644
index 00000000000000..bbe1bf7fc90ded
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.json
@@ -0,0 +1,28 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
new file mode 100644
index 00000000000000..84a992af2abc86
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.parsed.json
@@ -0,0 +1,28 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"\"/>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
new file mode 100644
index 00000000000000..aa018a73342161
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v6-wide-default-align.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html
new file mode 100644
index 00000000000000..22a2a3e18f74f6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media"
+		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+			alt="My alt text" /></figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json
new file mode 100644
index 00000000000000..bf195f6fa1c953
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.json
@@ -0,0 +1,29 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json
new file mode 100644
index 00000000000000..2e878c98a18a89
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.parsed.json
@@ -0,0 +1,29 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
new file mode 100644
index 00000000000000..b9d5e14f90277c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html
new file mode 100644
index 00000000000000..47a0f0c126fa70
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media"
+		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+			alt="My alt text" /></figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json
new file mode 100644
index 00000000000000..986e049099541f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.json
@@ -0,0 +1,33 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true,
+			"focalPoint": {
+				"x": 0.84,
+				"y": 0.84
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json
new file mode 100644
index 00000000000000..175fbad27927b7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.parsed.json
@@ -0,0 +1,33 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true,
+			"focalPoint": {
+				"x": 0.84,
+				"y": 0.84
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
new file mode 100644
index 00000000000000..4b001f4f27c8ad
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html
new file mode 100644
index 00000000000000..92b4b4d2754133
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.html
@@ -0,0 +1,13 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text is-image-fill is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media"
+		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
+			alt="My alt text" /></figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json
new file mode 100644
index 00000000000000..a6f0dff927874d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.json
@@ -0,0 +1,30 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "none",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true,
+			"useFeaturedImage": false
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json
new file mode 100644
index 00000000000000..49b392d4231384
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.parsed.json
@@ -0,0 +1,29 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…",
+					"fontSize": "large"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t",
+				"innerContent": [
+					"\n\t\t<p class=\"has-large-font-size\">My Content</p>\n\t\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html
new file mode 100644
index 00000000000000..b44ebe1c4ee896
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json
index 3dc31821fc3720..e8a9ad70ae0132 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json
@@ -9,7 +9,8 @@
 			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
index 064b2c772f6a7c..cd01616afd42e0 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-alt-no-align.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"align":"none","mediaType":"image"} -->
+<!-- wp:media-text {"mediaType":"image"} -->
 <div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="my alt"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
index 22a2a3e18f74f6..30667e0dd24dc5 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html
@@ -1,9 +1,8 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
-	<figure class="wp-block-media-text__media"
-		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%">
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
-			alt="My alt text" /></figure>
+			alt="My alt text" style="object-position:50% 50%"/></figure>
 	<div class="wp-block-media-text__content">
 		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 		<p class="has-large-font-size">My Content</p>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
index 9e184932848ca5..bb57f08ad5cfa7 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.json
@@ -10,7 +10,8 @@
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
-			"imageFill": true
+			"imageFill": true,
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
index 2e878c98a18a89..674b3724af8e88 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -2,6 +2,7 @@
 	{
 		"blockName": "core/media-text",
 		"attrs": {
+			"align": "wide",
 			"mediaType": "image",
 			"imageFill": true
 		},
@@ -19,9 +20,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
index 2a1c3c68cc1bf8..b9d5e14f90277c 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:50% 50%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
index 47a0f0c126fa70..60e2cc7be572d4 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
@@ -1,9 +1,8 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
-	<figure class="wp-block-media-text__media"
-		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%">
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
-			alt="My alt text" /></figure>
+			alt="My alt text" style="object-position:84% 84%" /></figure>
 	<div class="wp-block-media-text__content">
 		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 		<p class="has-large-font-size">My Content</p>
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
index fcae892bf1304a..0de71c867457ef 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
@@ -14,7 +14,8 @@
 			"focalPoint": {
 				"x": 0.84,
 				"y": 0.84
-			}
+			},
+			"useFeaturedImage": false
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
index 175fbad27927b7..92bd57443a1c34 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -2,6 +2,7 @@
 	{
 		"blockName": "core/media-text",
 		"attrs": {
+			"align": "wide",
 			"mediaType": "image",
 			"imageFill": true,
 			"focalPoint": {
@@ -23,9 +24,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
index a1d3bb9c40fcc7..4b001f4f27c8ad 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
index 4536d933eb8dd0..cce4ca41239c5f 100644
--- a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
+++ b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "",
 			"mediaPosition": "left",
-			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"mediaType": "video",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
index 654e79b68edf08..bd86c13cac2b11 100644
--- a/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__is-stacked-on-mobile.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"video"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"video"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
index f4f729efb84e8b..f7d0516a85a648 100644
--- a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
+++ b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "My alt text",
 			"mediaPosition": "left",
-			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"mediaType": "image",
 			"mediaWidth": 50,
 			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
 			"verticalAlignment": "bottom"
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
index 5557277fd6c308..2c1772e0edb762 100644
--- a/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"image","verticalAlignment":"bottom"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"image","verticalAlignment":"bottom"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__media-text__video.json b/test/integration/fixtures/blocks/core__media-text__video.json
index 4536d933eb8dd0..cce4ca41239c5f 100644
--- a/test/integration/fixtures/blocks/core__media-text__video.json
+++ b/test/integration/fixtures/blocks/core__media-text__video.json
@@ -6,10 +6,10 @@
 			"align": "wide",
 			"mediaAlt": "",
 			"mediaPosition": "left",
-			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"mediaType": "video",
 			"mediaWidth": 50,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__media-text__video.serialized.html b/test/integration/fixtures/blocks/core__media-text__video.serialized.html
index 654e79b68edf08..bd86c13cac2b11 100644
--- a/test/integration/fixtures/blocks/core__media-text__video.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__video.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:media-text {"mediaType":"video"} -->
+<!-- wp:media-text {"align":"wide","mediaType":"video"} -->
 <div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
diff --git a/test/integration/fixtures/blocks/core__more.json b/test/integration/fixtures/blocks/core__more.json
index 29ec11579a2d96..f9f34aecd1f202 100644
--- a/test/integration/fixtures/blocks/core__more.json
+++ b/test/integration/fixtures/blocks/core__more.json
@@ -3,6 +3,7 @@
 		"name": "core/more",
 		"isValid": true,
 		"attributes": {
+			"customText": "",
 			"noTeaser": false
 		},
 		"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__page-list-item.html b/test/integration/fixtures/blocks/core__page-list-item.html
new file mode 100644
index 00000000000000..2b1b33d71231cf
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.html
@@ -0,0 +1 @@
+<!-- wp:core/page-list-item {"id":"1","label":"Page","link":"https://example.com","hasChildren":"false"} /-->
diff --git a/test/integration/fixtures/blocks/core__page-list-item.json b/test/integration/fixtures/blocks/core__page-list-item.json
new file mode 100644
index 00000000000000..5e6f09eb971eb7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/page-list-item",
+		"isValid": true,
+		"attributes": {
+			"label": "Page",
+			"link": "https://example.com"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__page-list-item.parsed.json b/test/integration/fixtures/blocks/core__page-list-item.parsed.json
new file mode 100644
index 00000000000000..e93cff97dd385e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.parsed.json
@@ -0,0 +1,14 @@
+[
+	{
+		"blockName": "core/page-list-item",
+		"attrs": {
+			"id": "1",
+			"label": "Page",
+			"link": "https://example.com",
+			"hasChildren": "false"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__page-list-item.serialized.html b/test/integration/fixtures/blocks/core__page-list-item.serialized.html
new file mode 100644
index 00000000000000..d61659fe1899a9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__page-list-item.serialized.html
@@ -0,0 +1 @@
+<!-- wp:page-list-item {"label":"Page","link":"https://example.com"} /-->
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": []
 	}
diff --git a/test/integration/fixtures/blocks/core__post-excerpt.json b/test/integration/fixtures/blocks/core__post-excerpt.json
index 57775868bdc862..827deda1b7215a 100644
--- a/test/integration/fixtures/blocks/core__post-excerpt.json
+++ b/test/integration/fixtures/blocks/core__post-excerpt.json
@@ -3,7 +3,8 @@
 		"name": "core/post-excerpt",
 		"isValid": true,
 		"attributes": {
-			"showMoreOnNewLine": true
+			"showMoreOnNewLine": true,
+			"excerptLength": 55
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__post-featured-image.json b/test/integration/fixtures/blocks/core__post-featured-image.json
index 158007533a3f2b..dec6e14712a3a2 100644
--- a/test/integration/fixtures/blocks/core__post-featured-image.json
+++ b/test/integration/fixtures/blocks/core__post-featured-image.json
@@ -7,7 +7,8 @@
 			"scale": "cover",
 			"rel": "",
 			"linkTarget": "_self",
-			"dimRatio": 0
+			"dimRatio": 0,
+			"useFirstImageFromPost": false
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__post-navigation-link.json b/test/integration/fixtures/blocks/core__post-navigation-link.json
index 9689f956f11509..b226c04855e359 100644
--- a/test/integration/fixtures/blocks/core__post-navigation-link.json
+++ b/test/integration/fixtures/blocks/core__post-navigation-link.json
@@ -6,7 +6,8 @@
 			"type": "next",
 			"showTitle": false,
 			"linkLabel": false,
-			"arrow": "none"
+			"arrow": "none",
+			"taxonomy": ""
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__post-time-to-read.html b/test/integration/fixtures/blocks/core__post-time-to-read.html
new file mode 100644
index 00000000000000..d3e2d54b8e40a0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-time-to-read.html
@@ -0,0 +1 @@
+<!-- wp:post-time-to-read /-->
diff --git a/test/integration/fixtures/blocks/core__post-time-to-read.json b/test/integration/fixtures/blocks/core__post-time-to-read.json
new file mode 100644
index 00000000000000..535fc5f158fd0a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-time-to-read.json
@@ -0,0 +1,8 @@
+[
+	{
+		"name": "core/post-time-to-read",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-time-to-read.parsed.json b/test/integration/fixtures/blocks/core__post-time-to-read.parsed.json
new file mode 100644
index 00000000000000..ac1e6486dfac51
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-time-to-read.parsed.json
@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/post-time-to-read",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-time-to-read.serialized.html b/test/integration/fixtures/blocks/core__post-time-to-read.serialized.html
new file mode 100644
index 00000000000000..d3e2d54b8e40a0
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__post-time-to-read.serialized.html
@@ -0,0 +1 @@
+<!-- wp:post-time-to-read /-->
diff --git a/test/integration/fixtures/blocks/core__query-pagination-numbers.json b/test/integration/fixtures/blocks/core__query-pagination-numbers.json
index e5ef189320be2f..16ac2fb469f98a 100644
--- a/test/integration/fixtures/blocks/core__query-pagination-numbers.json
+++ b/test/integration/fixtures/blocks/core__query-pagination-numbers.json
@@ -2,7 +2,9 @@
 	{
 		"name": "core/query-pagination-numbers",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"midSize": 2
+		},
 		"innerBlocks": []
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__query-pagination.json b/test/integration/fixtures/blocks/core__query-pagination.json
index 66b604f14b8a17..49d6992bac3a53 100644
--- a/test/integration/fixtures/blocks/core__query-pagination.json
+++ b/test/integration/fixtures/blocks/core__query-pagination.json
@@ -3,7 +3,8 @@
 		"name": "core/query-pagination",
 		"isValid": true,
 		"attributes": {
-			"paginationArrow": "none"
+			"paginationArrow": "none",
+			"showLabel": true
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__query.json b/test/integration/fixtures/blocks/core__query.json
index 4c7ce920a04506..a5ee4523128df8 100644
--- a/test/integration/fixtures/blocks/core__query.json
+++ b/test/integration/fixtures/blocks/core__query.json
@@ -16,12 +16,11 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"format": []
 			},
 			"tagName": "div",
-			"displayLayout": {
-				"type": "list"
-			}
+			"enhancedPagination": false
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
index 39f889cfae97e1..915726d992a8f9 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:query {"query":{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list"}} -->
+<!-- wp:query {"query":{"perPage":null,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 <div class="wp-block-query"></div>
 <!-- /wp:query -->
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..8a048667f55afd
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2-with-colors.json
@@ -0,0 +1,73 @@
+[
+	{
+		"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"
+		},
+		"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": {
+							"layout": {
+								"type": "default"
+							}
+						},
+						"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..b9e6b50deb0677
--- /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]}}} -->
+<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 {"layout":{"type":"default"}} -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query -->
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.json b/test/integration/fixtures/blocks/core__query__deprecated-2.json
index a63ad1c007b6b1..b0a1aea41ea506 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2.json
@@ -21,16 +21,17 @@
 					"post_tag": [ 6 ]
 				}
 			},
-			"tagName": "div",
-			"displayLayout": {
-				"type": "list"
-			}
+			"tagName": "div"
 		},
 		"innerBlocks": [
 			{
 				"name": "core/post-template",
 				"isValid": true,
-				"attributes": {},
+				"attributes": {
+					"layout": {
+						"type": "default"
+					}
+				},
 				"innerBlocks": [
 					{
 						"name": "core/post-title",
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
index 5804c54e577f14..2016bea9635928 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__query__deprecated-2.serialized.html
@@ -1,5 +1,5 @@
-<!-- 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:post-template -->
+<!-- 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]}}} -->
+<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
 <!-- wp:post-title /-->
 <!-- /wp:post-template --></div>
 <!-- /wp:query -->
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..d41ce2c5c826b7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -0,0 +1,137 @@
+[
+	{
+		"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",
+			"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",
+							"layout": {
+								"type": "grid",
+								"columnCount": 3
+							}
+						},
+						"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,
+									"excerptLength": 55
+								},
+								"innerBlocks": []
+							}
+						]
+					},
+					{
+						"name": "core/query-pagination",
+						"isValid": true,
+						"attributes": {
+							"paginationArrow": "none",
+							"showLabel": true
+						},
+						"innerBlocks": [
+							{
+								"name": "core/query-pagination-previous",
+								"isValid": true,
+								"attributes": {},
+								"innerBlocks": []
+							},
+							{
+								"name": "core/query-pagination-numbers",
+								"isValid": true,
+								"attributes": {
+									"midSize": 2
+								},
+								"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..86c87dde71c3bd
--- /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},"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","layout":{"type":"grid","columnCount":3}} -->
+<!-- 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 -->
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.html b/test/integration/fixtures/blocks/core__query__deprecated-4.html
new file mode 100644
index 00000000000000..9a2b39db018f56
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.html
@@ -0,0 +1,6 @@
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list"},"layout":{"inherit":true}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+    <!-- wp:post-title /-->
+    <!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.json b/test/integration/fixtures/blocks/core__query__deprecated-4.json
new file mode 100644
index 00000000000000..620e1ecefef130
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.json
@@ -0,0 +1,51 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 0,
+			"query": {
+				"perPage": 10,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": true
+			},
+			"tagName": "div",
+			"layout": {
+				"contentSize": null,
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/post-template",
+				"isValid": true,
+				"attributes": {
+					"layout": {
+						"type": "default"
+					}
+				},
+				"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-4.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json
new file mode 100644
index 00000000000000..1ce908fa81ac70
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.parsed.json
@@ -0,0 +1,50 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 0,
+			"query": {
+				"perPage": 10,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": true
+			},
+			"displayLayout": {
+				"type": "list"
+			},
+			"layout": {
+				"inherit": true
+			}
+		},
+		"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\">\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query\">",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html
new file mode 100644
index 00000000000000..1ab2470d36159a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-4.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"contentSize":null,"type":"constrained"}} -->
+<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:query -->
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.html b/test/integration/fixtures/blocks/core__query__deprecated-5.html
new file mode 100644
index 00000000000000..d040961172cb98
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.html
@@ -0,0 +1,6 @@
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list"},"layout":{"type":"constrained"}} -->
+<div class="wp-block-query"><!-- wp:post-template -->
+    <!-- wp:post-title /-->
+    <!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.json b/test/integration/fixtures/blocks/core__query__deprecated-5.json
new file mode 100644
index 00000000000000..f74e9496b23902
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.json
@@ -0,0 +1,50 @@
+[
+	{
+		"name": "core/query",
+		"isValid": true,
+		"attributes": {
+			"queryId": 0,
+			"query": {
+				"perPage": 10,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": true
+			},
+			"tagName": "div",
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/post-template",
+				"isValid": true,
+				"attributes": {
+					"layout": {
+						"type": "default"
+					}
+				},
+				"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-5.parsed.json b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json
new file mode 100644
index 00000000000000..54a9d08581cb90
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.parsed.json
@@ -0,0 +1,50 @@
+[
+	{
+		"blockName": "core/query",
+		"attrs": {
+			"queryId": 0,
+			"query": {
+				"perPage": 10,
+				"pages": 0,
+				"offset": 0,
+				"postType": "post",
+				"order": "desc",
+				"orderBy": "date",
+				"author": "",
+				"search": "",
+				"exclude": [],
+				"sticky": "",
+				"inherit": true
+			},
+			"displayLayout": {
+				"type": "list"
+			},
+			"layout": {
+				"type": "constrained"
+			}
+		},
+		"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\">\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-query\">",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html
new file mode 100644
index 00000000000000..a185cf3285299b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__query__deprecated-5.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"type":"constrained"}} -->
+<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"default"}} -->
+<!-- wp:post-title /-->
+<!-- /wp:post-template --></div>
+<!-- /wp:query -->
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-2.json b/test/integration/fixtures/blocks/core__quote__deprecated-2.json
index 2599674eeec7fe..2af2f38fa9e937 100644
--- a/test/integration/fixtures/blocks/core__quote__deprecated-2.json
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-2.json
@@ -4,7 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"citation": "...with a caption",
-			"align": "right"
+			"textAlign": "right"
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__quote__deprecated-2.serialized.html
index 024531d165d7e8..3d135fffad4374 100644
--- a/test/integration/fixtures/blocks/core__quote__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-2.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:quote {"align":"right"} -->
+<!-- wp:quote {"textAlign":"right"} -->
 <blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
 <p>Testing deprecated quote block...</p>
 <!-- /wp:paragraph --><cite>...with a caption</cite></blockquote>
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.html b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.html
new file mode 100644
index 00000000000000..218b75debb682d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.html
@@ -0,0 +1,5 @@
+<!-- wp:quote {"align":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
+<p>Quote with the align attribute. Example: {"align":"right"}</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.json b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.json
new file mode 100644
index 00000000000000..c5b6d35aa427fc
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.json
@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/quote",
+		"isValid": true,
+		"attributes": {
+			"value": "",
+			"citation": "",
+			"textAlign": "right"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "Quote with the align attribute. Example: {\"align\":\"right\"}",
+					"dropCap": false
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.parsed.json b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.parsed.json
new file mode 100644
index 00000000000000..e7dddc8ecbb604
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.parsed.json
@@ -0,0 +1,25 @@
+[
+	{
+		"blockName": "core/quote",
+		"attrs": {
+			"align": "right"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {},
+				"innerBlocks": [],
+				"innerHTML": "\n<p>Quote with the align attribute. Example: {\"align\":\"right\"}</p>\n",
+				"innerContent": [
+					"\n<p>Quote with the align attribute. Example: {\"align\":\"right\"}</p>\n"
+				]
+			}
+		],
+		"innerHTML": "\n<blockquote class=\"wp-block-quote has-text-align-right\"></blockquote>\n",
+		"innerContent": [
+			"\n<blockquote class=\"wp-block-quote has-text-align-right\">",
+			null,
+			"</blockquote>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.serialized.html b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.serialized.html
new file mode 100644
index 00000000000000..dfad3d54b991e4
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__quote__deprecated-4-align-attribute.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:quote {"textAlign":"right"} -->
+<blockquote class="wp-block-quote has-text-align-right"><!-- wp:paragraph -->
+<p>Quote with the align attribute. Example: {"align":"right"}</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
diff --git a/test/integration/fixtures/blocks/core__search.json b/test/integration/fixtures/blocks/core__search.json
index 7b6125b5016b37..ec961ed41b0244 100644
--- a/test/integration/fixtures/blocks/core__search.json
+++ b/test/integration/fixtures/blocks/core__search.json
@@ -7,7 +7,8 @@
 			"placeholder": "",
 			"buttonPosition": "button-outside",
 			"buttonUseIcon": false,
-			"query": {}
+			"query": {},
+			"isSearchFieldHidden": false
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__search__custom-text.json b/test/integration/fixtures/blocks/core__search__custom-text.json
index 6e874946117966..3738816762ba1e 100644
--- a/test/integration/fixtures/blocks/core__search__custom-text.json
+++ b/test/integration/fixtures/blocks/core__search__custom-text.json
@@ -9,7 +9,8 @@
 			"buttonText": "Custom button text",
 			"buttonPosition": "button-outside",
 			"buttonUseIcon": false,
-			"query": {}
+			"query": {},
+			"isSearchFieldHidden": false
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__separator-color.json b/test/integration/fixtures/blocks/core__separator-color.json
index d32cb34f1871ec..d66a8b2e1a242e 100644
--- a/test/integration/fixtures/blocks/core__separator-color.json
+++ b/test/integration/fixtures/blocks/core__separator-color.json
@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"opacity": "alpha-channel",
-			"backgroundColor": "accent"
+			"backgroundColor": "accent",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__separator-custom-color.json b/test/integration/fixtures/blocks/core__separator-custom-color.json
index 7b0e6c3a7127af..9b126f2b5be6c7 100644
--- a/test/integration/fixtures/blocks/core__separator-custom-color.json
+++ b/test/integration/fixtures/blocks/core__separator-custom-color.json
@@ -8,7 +8,8 @@
 				"color": {
 					"background": "#5da54c"
 				}
-			}
+			},
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__separator.json b/test/integration/fixtures/blocks/core__separator.json
index 3d69d4e24413c7..aaeb9bc916f38d 100644
--- a/test/integration/fixtures/blocks/core__separator.json
+++ b/test/integration/fixtures/blocks/core__separator.json
@@ -3,7 +3,8 @@
 		"name": "core/separator",
 		"isValid": true,
 		"attributes": {
-			"opacity": "alpha-channel"
+			"opacity": "alpha-channel",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json
index 6e0ddf0dbef553..29f520c266f597 100644
--- a/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json
+++ b/test/integration/fixtures/blocks/core__separator__deprecated-color-v1.json
@@ -4,7 +4,8 @@
 		"isValid": true,
 		"attributes": {
 			"backgroundColor": "accent",
-			"opacity": "css"
+			"opacity": "css",
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json
index bc2de191b19cd3..556305633861bb 100644
--- a/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json
+++ b/test/integration/fixtures/blocks/core__separator__deprecated-custom-color-v1.json
@@ -8,7 +8,8 @@
 				"color": {
 					"background": "#cc1d1d"
 				}
-			}
+			},
+			"tagName": "hr"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__site-tagline.json b/test/integration/fixtures/blocks/core__site-tagline.json
index 7e15e1e8bb75cd..fe837d41df43bf 100644
--- a/test/integration/fixtures/blocks/core__site-tagline.json
+++ b/test/integration/fixtures/blocks/core__site-tagline.json
@@ -2,7 +2,10 @@
 	{
 		"name": "core/site-tagline",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"level": 0,
+			"levelOptions": [ 0, 1, 2, 3, 4, 5, 6 ]
+		},
 		"innerBlocks": []
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__site-title.json b/test/integration/fixtures/blocks/core__site-title.json
index 12f32615473cc8..8ca7091f30d5e7 100644
--- a/test/integration/fixtures/blocks/core__site-title.json
+++ b/test/integration/fixtures/blocks/core__site-title.json
@@ -4,6 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"level": 1,
+			"levelOptions": [ 0, 1, 2, 3, 4, 5, 6 ],
 			"isLink": true,
 			"linkTarget": "_self"
 		},
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.html b/test/integration/fixtures/blocks/core__social-link-bluesky.html
new file mode 100644
index 00000000000000..b210fb03361e79
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.html
@@ -0,0 +1 @@
+<!-- wp:social-link-bluesky {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.json b/test/integration/fixtures/blocks/core__social-link-bluesky.json
new file mode 100644
index 00000000000000..47276685491b8f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "bluesky"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json b/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json
new file mode 100644
index 00000000000000..5f51994005b45c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-bluesky",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html b/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html
new file mode 100644
index 00000000000000..954f0eb1f101e7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-bluesky.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"bluesky"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-gravatar.html b/test/integration/fixtures/blocks/core__social-link-gravatar.html
new file mode 100644
index 00000000000000..c4137b8a083176
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-gravatar.html
@@ -0,0 +1 @@
+<!-- wp:social-link-gravatar {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-gravatar.json b/test/integration/fixtures/blocks/core__social-link-gravatar.json
new file mode 100644
index 00000000000000..2f4035d97640b2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-gravatar.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "gravatar"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-gravatar.parsed.json b/test/integration/fixtures/blocks/core__social-link-gravatar.parsed.json
new file mode 100644
index 00000000000000..b4c7a8c146e142
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-gravatar.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-gravatar",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-gravatar.serialized.html b/test/integration/fixtures/blocks/core__social-link-gravatar.serialized.html
new file mode 100644
index 00000000000000..83a449d4e1f53c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-gravatar.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"gravatar"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-patreon.html b/test/integration/fixtures/blocks/core__social-link-patreon.html
new file mode 100644
index 00000000000000..e1880adaf1f599
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-patreon.html
@@ -0,0 +1 @@
+<!-- wp:social-link-patreon {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-patreon.json b/test/integration/fixtures/blocks/core__social-link-patreon.json
new file mode 100644
index 00000000000000..935f138ac9f09a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-patreon.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "patreon"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-patreon.parsed.json b/test/integration/fixtures/blocks/core__social-link-patreon.parsed.json
new file mode 100644
index 00000000000000..069bdad26ca109
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-patreon.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-patreon",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-patreon.serialized.html b/test/integration/fixtures/blocks/core__social-link-patreon.serialized.html
new file mode 100644
index 00000000000000..831e1926b4f64a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-patreon.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"patreon"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-threads.html b/test/integration/fixtures/blocks/core__social-link-threads.html
new file mode 100644
index 00000000000000..3189c247c825fb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-threads.html
@@ -0,0 +1 @@
+<!-- wp:social-link-threads {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-threads.json b/test/integration/fixtures/blocks/core__social-link-threads.json
new file mode 100644
index 00000000000000..334725c6441810
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-threads.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "threads"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-threads.parsed.json b/test/integration/fixtures/blocks/core__social-link-threads.parsed.json
new file mode 100644
index 00000000000000..31274f0ac3e943
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-threads.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-threads",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-threads.serialized.html b/test/integration/fixtures/blocks/core__social-link-threads.serialized.html
new file mode 100644
index 00000000000000..cc93afc92ce47b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-threads.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"threads"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-x.html b/test/integration/fixtures/blocks/core__social-link-x.html
new file mode 100644
index 00000000000000..a587f2d0962f6a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.html
@@ -0,0 +1 @@
+<!-- wp:social-link-x {"url":"https://example.com/"} /-->
diff --git a/test/integration/fixtures/blocks/core__social-link-x.json b/test/integration/fixtures/blocks/core__social-link-x.json
new file mode 100644
index 00000000000000..d0cf492d2aa03e
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.json
@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "x"
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-x.parsed.json b/test/integration/fixtures/blocks/core__social-link-x.parsed.json
new file mode 100644
index 00000000000000..2119720f5db0f5
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-x",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__social-link-x.serialized.html b/test/integration/fixtures/blocks/core__social-link-x.serialized.html
new file mode 100644
index 00000000000000..be00807af4c9ea
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__social-link-x.serialized.html
@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"x"} /-->
diff --git a/test/integration/fixtures/blocks/core__table-of-contents__empty.json b/test/integration/fixtures/blocks/core__table-of-contents__empty.json
index 396280b2892af8..62e5d60f0ddaed 100644
--- a/test/integration/fixtures/blocks/core__table-of-contents__empty.json
+++ b/test/integration/fixtures/blocks/core__table-of-contents__empty.json
@@ -3,6 +3,7 @@
 		"name": "core/table-of-contents",
 		"isValid": true,
 		"attributes": {
+			"headings": [],
 			"onlyIncludeCurrentPage": false
 		},
 		"innerBlocks": []
diff --git a/test/integration/fixtures/blocks/core__table.html b/test/integration/fixtures/blocks/core__table.html
index 7cc12a4efb3b5b..3ea74325cfb8c1 100644
--- a/test/integration/fixtures/blocks/core__table.html
+++ b/test/integration/fixtures/blocks/core__table.html
@@ -1,3 +1,3 @@
 <!-- wp:core/table -->
-<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
 <!-- /wp:core/table -->
diff --git a/test/integration/fixtures/blocks/core__table.json b/test/integration/fixtures/blocks/core__table.json
index a694b52a94c390..015e57d8a45d7d 100644
--- a/test/integration/fixtures/blocks/core__table.json
+++ b/test/integration/fixtures/blocks/core__table.json
@@ -3,7 +3,7 @@
 		"name": "core/table",
 		"isValid": true,
 		"attributes": {
-			"hasFixedLayout": false,
+			"hasFixedLayout": true,
 			"caption": "",
 			"head": [
 				{
diff --git a/test/integration/fixtures/blocks/core__table.parsed.json b/test/integration/fixtures/blocks/core__table.parsed.json
index 7bf372efab4c0a..c93936d8343ba9 100644
--- a/test/integration/fixtures/blocks/core__table.parsed.json
+++ b/test/integration/fixtures/blocks/core__table.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/table",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n"
+			"\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__table.serialized.html b/test/integration/fixtures/blocks/core__table.serialized.html
index 95fc72534da7db..0a8200ad804bda 100644
--- a/test/integration/fixtures/blocks/core__table.serialized.html
+++ b/test/integration/fixtures/blocks/core__table.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__caption.html b/test/integration/fixtures/blocks/core__table__caption.html
index 110d0695e5a937..26bf3950799d99 100644
--- a/test/integration/fixtures/blocks/core__table__caption.html
+++ b/test/integration/fixtures/blocks/core__table__caption.html
@@ -1,3 +1,3 @@
 <!-- wp:core/table -->
-<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
 <!-- /wp:core/table -->
diff --git a/test/integration/fixtures/blocks/core__table__caption.json b/test/integration/fixtures/blocks/core__table__caption.json
index 4f500a7691fa8a..ca284f20bdfa74 100644
--- a/test/integration/fixtures/blocks/core__table__caption.json
+++ b/test/integration/fixtures/blocks/core__table__caption.json
@@ -3,7 +3,7 @@
 		"name": "core/table",
 		"isValid": true,
 		"attributes": {
-			"hasFixedLayout": false,
+			"hasFixedLayout": true,
 			"caption": "A table for testing",
 			"head": [
 				{
diff --git a/test/integration/fixtures/blocks/core__table__caption.parsed.json b/test/integration/fixtures/blocks/core__table__caption.parsed.json
index 531c2d7e605c6f..bd6f605085e6f1 100644
--- a/test/integration/fixtures/blocks/core__table__caption.parsed.json
+++ b/test/integration/fixtures/blocks/core__table__caption.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/table",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class=\"wp-element-caption\">A table for testing</figcaption></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class=\"wp-element-caption\">A table for testing</figcaption></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class=\"wp-element-caption\">A table for testing</figcaption></figure>\n"
+			"\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class=\"wp-element-caption\">A table for testing</figcaption></figure>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__table__caption.serialized.html b/test/integration/fixtures/blocks/core__table__caption.serialized.html
index 66246c83295a9e..3cff780e78c3a6 100644
--- a/test/integration/fixtures/blocks/core__table__caption.serialized.html
+++ b/test/integration/fixtures/blocks/core__table__caption.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-1.serialized.html
index 061aa7a2248b10..3f72ff591d56e7 100644
--- a/test/integration/fixtures/blocks/core__table__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__table__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:table {"backgroundColor":"subtle-pale-blue"} -->
+<!-- wp:table {"hasFixedLayout":false,"backgroundColor":"subtle-pale-blue"} -->
 <figure class="wp-block-table"><table class="has-subtle-pale-blue-background-color has-background"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">Table Caption</figcaption></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-2.serialized.html
index 95fc72534da7db..2ee8e6d7345433 100644
--- a/test/integration/fixtures/blocks/core__table__deprecated-2.serialized.html
+++ b/test/integration/fixtures/blocks/core__table__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:table -->
+<!-- wp:table {"hasFixedLayout":false} -->
 <figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
index 66246c83295a9e..3f2f2b362e378c 100644
--- a/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:table -->
+<!-- wp:table {"hasFixedLayout":false} -->
 <figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-4.html b/test/integration/fixtures/blocks/core__table__deprecated-4.html
new file mode 100644
index 00000000000000..a22436c55bdb1f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-4.html
@@ -0,0 +1,3 @@
+<!-- wp:core/table -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>
+<!-- /wp:core/table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-4.json b/test/integration/fixtures/blocks/core__table__deprecated-4.json
new file mode 100644
index 00000000000000..4f500a7691fa8a
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-4.json
@@ -0,0 +1,144 @@
+[
+	{
+		"name": "core/table",
+		"isValid": true,
+		"attributes": {
+			"hasFixedLayout": false,
+			"caption": "A table for testing",
+			"head": [
+				{
+					"cells": [
+						{
+							"content": "Version",
+							"tag": "th"
+						},
+						{
+							"content": "Musician",
+							"tag": "th"
+						},
+						{
+							"content": "Date",
+							"tag": "th"
+						}
+					]
+				}
+			],
+			"body": [
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a>",
+							"tag": "td"
+						},
+						{
+							"content": "No musician chosen.",
+							"tag": "td"
+						},
+						{
+							"content": "May 27, 2003",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Miles Davis",
+							"tag": "td"
+						},
+						{
+							"content": "January 3, 2004",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a>",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Clifford Brown",
+							"tag": "td"
+						},
+						{
+							"content": "December 8, 2015",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Coleman Hawkins",
+							"tag": "td"
+						},
+						{
+							"content": "April 12, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Pepper Adams",
+							"tag": "td"
+						},
+						{
+							"content": "August 16, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Sarah Vaughan",
+							"tag": "td"
+						},
+						{
+							"content": "December 6, 2016",
+							"tag": "td"
+						}
+					]
+				}
+			],
+			"foot": []
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-4.parsed.json b/test/integration/fixtures/blocks/core__table__deprecated-4.parsed.json
new file mode 100644
index 00000000000000..030ced272fcab6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-4.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/table",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-4.serialized.html
new file mode 100644
index 00000000000000..3f2f2b362e378c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-4.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:table {"hasFixedLayout":false} -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
+<!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__scope-attribute.html b/test/integration/fixtures/blocks/core__table__scope-attribute.html
index dfe5cdd5c26168..65f558aa5c08a1 100644
--- a/test/integration/fixtures/blocks/core__table__scope-attribute.html
+++ b/test/integration/fixtures/blocks/core__table__scope-attribute.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th scope="col">Version</th><th scope="col">Musician</th><th scope="col">Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th scope="col">Version</th><th scope="col">Musician</th><th scope="col">Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__table__scope-attribute.json b/test/integration/fixtures/blocks/core__table__scope-attribute.json
index 0b6f1634893813..5cdf1d0ddd2fcb 100644
--- a/test/integration/fixtures/blocks/core__table__scope-attribute.json
+++ b/test/integration/fixtures/blocks/core__table__scope-attribute.json
@@ -3,7 +3,7 @@
 		"name": "core/table",
 		"isValid": true,
 		"attributes": {
-			"hasFixedLayout": false,
+			"hasFixedLayout": true,
 			"caption": "",
 			"head": [
 				{
diff --git a/test/integration/fixtures/blocks/core__table__scope-attribute.parsed.json b/test/integration/fixtures/blocks/core__table__scope-attribute.parsed.json
index 42844cfdf62c6f..ec184dfefdf966 100644
--- a/test/integration/fixtures/blocks/core__table__scope-attribute.parsed.json
+++ b/test/integration/fixtures/blocks/core__table__scope-attribute.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/table",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Version</th><th scope=\"col\">Musician</th><th scope=\"col\">Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th scope=\"col\">Version</th><th scope=\"col\">Musician</th><th scope=\"col\">Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-table\"><table><thead><tr><th scope=\"col\">Version</th><th scope=\"col\">Musician</th><th scope=\"col\">Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n"
+			"\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th scope=\"col\">Version</th><th scope=\"col\">Musician</th><th scope=\"col\">Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__table__scope-attribute.serialized.html b/test/integration/fixtures/blocks/core__table__scope-attribute.serialized.html
index dfe5cdd5c26168..65f558aa5c08a1 100644
--- a/test/integration/fixtures/blocks/core__table__scope-attribute.serialized.html
+++ b/test/integration/fixtures/blocks/core__table__scope-attribute.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th scope="col">Version</th><th scope="col">Musician</th><th scope="col">Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th scope="col">Version</th><th scope="col">Musician</th><th scope="col">Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html
index b5ee414dc68910..6a1cb7ab46c8d7 100644
--- a/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html
+++ b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
-<!-- wp:video {"tracks":[]} -->
+<!-- wp:video -->
 <figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption class="wp-element-caption">My video</figcaption></figure>
 <!-- /wp:video -->
diff --git a/test/integration/fixtures/documents/apple-out.html b/test/integration/fixtures/documents/apple-out.html
index d873c942ea9ce1..d6112309af9f03 100644
--- a/test/integration/fixtures/documents/apple-out.html
+++ b/test/integration/fixtures/documents/apple-out.html
@@ -11,13 +11,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
@@ -43,7 +43,7 @@
 <!-- /wp:list -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/fixtures/documents/evernote-out.html b/test/integration/fixtures/documents/evernote-out.html
index 19102ab70dc487..2a7212f2e29b3d 100644
--- a/test/integration/fixtures/documents/evernote-out.html
+++ b/test/integration/fixtures/documents/evernote-out.html
@@ -7,13 +7,13 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>An</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Unordered<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -25,13 +25,13 @@
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Two<!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list --></li>
@@ -47,7 +47,7 @@
 <!-- /wp:separator -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>Four</td><td>Five</td><td>Six</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>Four</td><td>Five</td><td>Six</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:image -->
diff --git a/test/integration/fixtures/documents/google-docs-list-only-out.html b/test/integration/fixtures/documents/google-docs-list-only-out.html
index 642dc168bb5bb9..ec14d44d2b9224 100644
--- a/test/integration/fixtures/documents/google-docs-list-only-out.html
+++ b/test/integration/fixtures/documents/google-docs-list-only-out.html
@@ -1,7 +1,7 @@
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>My first list item<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A sub list item</li>
 <!-- /wp:list-item -->
 
diff --git a/test/integration/fixtures/documents/google-docs-out.html b/test/integration/fixtures/documents/google-docs-out.html
index db8bc81948fcca..3ee7d25875abc6 100644
--- a/test/integration/fixtures/documents/google-docs-out.html
+++ b/test/integration/fixtures/documents/google-docs-out.html
@@ -3,7 +3,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>This is a <em>heading</em></h2>
+<h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -11,13 +11,13 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
@@ -43,7 +43,7 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:separator -->
diff --git a/test/integration/fixtures/documents/google-docs-table-out.html b/test/integration/fixtures/documents/google-docs-table-out.html
index 07fe4106f3a6a7..da51f75f3644e0 100644
--- a/test/integration/fixtures/documents/google-docs-table-out.html
+++ b/test/integration/fixtures/documents/google-docs-table-out.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/documents/google-docs-table-with-colspan-in.html b/test/integration/fixtures/documents/google-docs-table-with-colspan-in.html
new file mode 100644
index 00000000000000..99f41829e6c8e6
--- /dev/null
+++ b/test/integration/fixtures/documents/google-docs-table-with-colspan-in.html
@@ -0,0 +1 @@
+<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b0f68bdd-7fff-a054-94d1-43c2fdedca2a"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;"><colgroup><col width="185"/><col width="439"/></colgroup><tbody><tr style="height:21pt"><td colspan="2"style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Test colspan</span></p></td></tr></tbody></table></div><br/><br/></b>
diff --git a/test/integration/fixtures/documents/google-docs-table-with-colspan-out.html b/test/integration/fixtures/documents/google-docs-table-with-colspan-out.html
new file mode 100644
index 00000000000000..f063d499b0179c
--- /dev/null
+++ b/test/integration/fixtures/documents/google-docs-table-with-colspan-out.html
@@ -0,0 +1,3 @@
+<!-- wp:table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td colspan="2">Test colspan</td></tr></tbody></table></figure>
+<!-- /wp:table -->
diff --git a/test/integration/fixtures/documents/google-docs-table-with-comments-out.html b/test/integration/fixtures/documents/google-docs-table-with-comments-out.html
index 07fe4106f3a6a7..da51f75f3644e0 100644
--- a/test/integration/fixtures/documents/google-docs-table-with-comments-out.html
+++ b/test/integration/fixtures/documents/google-docs-table-with-comments-out.html
@@ -1,3 +1,3 @@
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
diff --git a/test/integration/fixtures/documents/google-docs-table-with-rowspan-in.html b/test/integration/fixtures/documents/google-docs-table-with-rowspan-in.html
new file mode 100644
index 00000000000000..5665f905752c56
--- /dev/null
+++ b/test/integration/fixtures/documents/google-docs-table-with-rowspan-in.html
@@ -0,0 +1 @@
+<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-b0f68bdd-7fff-a054-94d1-43c2fdedca2a"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;"><colgroup><col width="185"/><col width="439"/></colgroup><tbody><tr style="height:21pt"><td rowspan="2"style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Test rowspan</span></p></td></tr></tbody></table></div><br/><br/></b>
diff --git a/test/integration/fixtures/documents/google-docs-table-with-rowspan-out.html b/test/integration/fixtures/documents/google-docs-table-with-rowspan-out.html
new file mode 100644
index 00000000000000..94e0124e280e08
--- /dev/null
+++ b/test/integration/fixtures/documents/google-docs-table-with-rowspan-out.html
@@ -0,0 +1,3 @@
+<!-- wp:table -->
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td rowspan="2">Test rowspan</td></tr></tbody></table></figure>
+<!-- /wp:table -->
diff --git a/test/integration/fixtures/documents/google-docs-with-comments-out.html b/test/integration/fixtures/documents/google-docs-with-comments-out.html
index db8bc81948fcca..3ee7d25875abc6 100644
--- a/test/integration/fixtures/documents/google-docs-with-comments-out.html
+++ b/test/integration/fixtures/documents/google-docs-with-comments-out.html
@@ -3,7 +3,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>This is a <em>heading</em></h2>
+<h2 class="wp-block-heading">This is a <em>heading</em></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -11,13 +11,13 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -29,7 +29,7 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
@@ -43,7 +43,7 @@ <h2>This is a <em>heading</em></h2>
 <!-- /wp:list -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:separator -->
diff --git a/test/integration/fixtures/documents/markdown-out.html b/test/integration/fixtures/documents/markdown-out.html
index c1237925a750bd..9ed72f6d3ef6d3 100644
--- a/test/integration/fixtures/documents/markdown-out.html
+++ b/test/integration/fixtures/documents/markdown-out.html
@@ -1,5 +1,5 @@
 <!-- wp:heading {"level":1} -->
-<h1>This is a heading with <em>italic</em></h1>
+<h1 class="wp-block-heading">This is a heading with <em>italic</em></h1>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -11,17 +11,17 @@ <h1>This is a heading with <em>italic</em></h1>
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Lists</h2>
+<h2 class="wp-block-heading">Lists</h2>
 <!-- /wp:heading -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -33,7 +33,7 @@ <h2>Lists</h2>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true} -->
-<ol><!-- wp:list-item -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
@@ -47,19 +47,19 @@ <h2>Lists</h2>
 <!-- /wp:list -->
 
 <!-- wp:heading -->
-<h2>Table</h2>
+<h2 class="wp-block-heading">Table</h2>
 <!-- /wp:heading -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th>First Header</th><th>Second Header</th></tr></thead><tbody><tr><td>Content from cell 1</td><td>Content from cell 2</td></tr><tr><td>Content in the first column</td><td>Content in the second column</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>First Header</th><th>Second Header</th></tr></thead><tbody><tr><td>Content from cell 1</td><td>Content from cell 2</td></tr><tr><td>Content in the first column</td><td>Content in the second column</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td>Table with empty cells.</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td>Table with empty cells.</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:heading -->
-<h2>Quote</h2>
+<h2 class="wp-block-heading">Quote</h2>
 <!-- /wp:heading -->
 
 <!-- wp:quote -->
@@ -73,7 +73,7 @@ <h2>Quote</h2>
 <!-- /wp:quote -->
 
 <!-- wp:heading -->
-<h2>Code</h2>
+<h2 class="wp-block-heading">Code</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/fixtures/documents/mixed-content-in.html b/test/integration/fixtures/documents/mixed-content-in.html
new file mode 100644
index 00000000000000..a190f8523cd6c7
--- /dev/null
+++ b/test/integration/fixtures/documents/mixed-content-in.html
@@ -0,0 +1,7 @@
+<h3>Some heading</h3>
+<ul>
+<li style="list-style-type: none;">
+<ul><!-- /wp:list-item --> <!-- wp:list-item --></ul>
+</li>
+<li>Content we need to preserve</li>
+</ul>
diff --git a/test/integration/fixtures/documents/mixed-content-out.html b/test/integration/fixtures/documents/mixed-content-out.html
new file mode 100644
index 00000000000000..fc285c38c21023
--- /dev/null
+++ b/test/integration/fixtures/documents/mixed-content-out.html
@@ -0,0 +1,13 @@
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Some heading</h3>
+<!-- /wp:heading -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Content we need to preserve</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
\ No newline at end of file
diff --git a/test/integration/fixtures/documents/ms-word-list-in.html b/test/integration/fixtures/documents/ms-word-list-in.html
new file mode 100644
index 00000000000000..8cf79b8f7e5db7
--- /dev/null
+++ b/test/integration/fixtures/documents/ms-word-list-in.html
@@ -0,0 +1,28 @@
+<h3><a name="_Hlk64885792">This is a headline?<o:p></o:p></a></h3>
+
+<p class=MsoNormal><span style='mso-bookmark:_Hlk64885792'>This is a text:<o:p></o:p></span></p>
+
+<p class=MsoListParagraphCxSpFirst style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><span
+style='mso-bookmark:_Hlk64885792'><![if !supportLists]><span style='font-family:
+Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span
+style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</span></span></span><![endif]>One <o:p></o:p></span></p>
+
+<p class=MsoListParagraphCxSpMiddle style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><span
+style='mso-bookmark:_Hlk64885792'><![if !supportLists]><span style='font-family:
+Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span
+style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</span></span></span><![endif]>Two<o:p></o:p></span></p>
+
+<p class=MsoListParagraphCxSpLast style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'><span
+style='mso-bookmark:_Hlk64885792'><![if !supportLists]><span style='font-family:
+Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol'><span
+style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</span></span></span><![endif]>Three<o:p></o:p></span></p>
+
+<span style='mso-bookmark:_Hlk64885792'></span>
+
+<p class=MsoNormal><a name="_Hlk64885540">Lorem Ipsum. </a><o:p></o:p></p>
+
+<p class=MsoNormal><span style='font-family:"Calibri",sans-serif;mso-ascii-theme-font:
+minor-latin;mso-hansi-theme-font:minor-latin;mso-bidi-theme-font:minor-latin'><o:p>&nbsp;</o:p></span></p>
\ No newline at end of file
diff --git a/test/integration/fixtures/documents/ms-word-list-out.html b/test/integration/fixtures/documents/ms-word-list-out.html
new file mode 100644
index 00000000000000..2e55413b159a6a
--- /dev/null
+++ b/test/integration/fixtures/documents/ms-word-list-out.html
@@ -0,0 +1,25 @@
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading"><a>This is a headline?</a></h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a text:</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- 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 -->
+
+<!-- wp:paragraph -->
+<p><a>Lorem Ipsum.</a></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/integration/fixtures/documents/ms-word-online-out.html b/test/integration/fixtures/documents/ms-word-online-out.html
index 398281520f2542..13698a929d9b13 100644
--- a/test/integration/fixtures/documents/ms-word-online-out.html
+++ b/test/integration/fixtures/documents/ms-word-online-out.html
@@ -7,39 +7,39 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>A&nbsp;</li>
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>A </li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
-<li>Bulleted&nbsp;</li>
+<li>Bulleted </li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
-<li>Indented&nbsp;</li>
+<li>Indented </li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
-<li>List&nbsp;</li>
+<li>List </li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
 
 <!-- wp:list {"ordered":true,"start":1} -->
-<ol start="1"><!-- wp:list-item -->
-<li>One&nbsp;</li>
+<ol start="1" class="wp-block-list"><!-- wp:list-item -->
+<li>One </li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
-<li>Two&nbsp;</li>
+<li>Two </li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
-<li>Three&nbsp;</li>
+<li>Three </li>
 <!-- /wp:list-item --></ol>
 <!-- /wp:list -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One&nbsp;</td><td>Two&nbsp;</td><td>Three&nbsp;</td></tr><tr><td>1&nbsp;</td><td>2&nbsp;</td><td>3&nbsp;</td></tr><tr><td>I&nbsp;</td><td>II&nbsp;</td><td>III&nbsp;</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One&nbsp;</td><td>Two&nbsp;</td><td>Three&nbsp;</td></tr><tr><td>1&nbsp;</td><td>2&nbsp;</td><td>3&nbsp;</td></tr><tr><td>I&nbsp;</td><td>II&nbsp;</td><td>III&nbsp;</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/fixtures/documents/ms-word-out.html b/test/integration/fixtures/documents/ms-word-out.html
index 9a5d5fdf557a46..81b82b5f9502fe 100644
--- a/test/integration/fixtures/documents/ms-word-out.html
+++ b/test/integration/fixtures/documents/ms-word-out.html
@@ -7,11 +7,11 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:heading {"level":1} -->
-<h1>This is a heading level 1</h1>
+<h1 class="wp-block-heading">This is a heading level 1</h1>
 <!-- /wp:heading -->
 
 <!-- wp:heading -->
-<h2>This is a heading level 2</h2>
+<h2 class="wp-block-heading">This is a heading level 2</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -19,13 +19,13 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>A</li>
 <!-- /wp:list-item -->
 
 <!-- wp:list-item -->
 <li>Bulleted<!-- wp:list -->
-<ul><!-- wp:list-item -->
+<ul class="wp-block-list"><!-- wp:list-item -->
 <li>Indented</li>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list --></li>
@@ -36,8 +36,8 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:list-item --></ul>
 <!-- /wp:list -->
 
-<!-- wp:list {"ordered":true,"type":"1"} -->
-<ol type="1"><!-- wp:list-item -->
+<!-- wp:list {"ordered":true} -->
+<ol class="wp-block-list"><!-- wp:list-item -->
 <li>One</li>
 <!-- /wp:list-item -->
 
@@ -51,7 +51,7 @@ <h2>This is a heading level 2</h2>
 <!-- /wp:list -->
 
 <!-- wp:table -->
-<figure class="wp-block-table"><table><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
+<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td>One</td><td>Two</td><td>Three</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>I</td><td>II</td><td>III</td></tr></tbody></table></figure>
 <!-- /wp:table -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/fixtures/documents/windows.html b/test/integration/fixtures/documents/windows.html
index 022cc8f53b0fa3..1d6125160ec081 100644
--- a/test/integration/fixtures/documents/windows.html
+++ b/test/integration/fixtures/documents/windows.html
@@ -1,6 +1,6 @@
 <html><body>
 <!--StartFragment--><!-- wp:heading -->
-<h2>Heading Win</h2>
+<h2 class="wp-block-heading">Heading Win</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
diff --git a/test/integration/fixtures/documents/wordpress-out.html b/test/integration/fixtures/documents/wordpress-out.html
index 03ab224fa10285..a0ac4b89ec5520 100644
--- a/test/integration/fixtures/documents/wordpress-out.html
+++ b/test/integration/fixtures/documents/wordpress-out.html
@@ -1,5 +1,5 @@
 <!-- wp:heading -->
-<h2>Howdy</h2>
+<h2 class="wp-block-heading">Howdy</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -7,7 +7,7 @@ <h2>Howdy</h2>
 <!-- /wp:paragraph -->
 
 <!-- wp:heading {"level":3} -->
-<h3>More tag</h3>
+<h3 class="wp-block-heading">More tag</h3>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -15,7 +15,7 @@ <h3>More tag</h3>
 <!-- /wp:more -->
 
 <!-- wp:heading {"level":3} -->
-<h3>Shortcode</h3>
+<h3 class="wp-block-heading">Shortcode</h3>
 <!-- /wp:heading -->
 
 <!-- wp:gallery {"columns":3,"linkTo":"none"} -->
@@ -28,7 +28,7 @@ <h3>Shortcode</h3>
 <figure class="wp-block-image"><img src="block.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {"align":"right","id":5114} -->
+<!-- wp:image {"id":5114,"align":"right"} -->
 <figure class="wp-block-image alignright"><img src="aligned.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->
 
diff --git a/test/integration/fixtures/schemas/settings.json b/test/integration/fixtures/schemas/settings.json
new file mode 100644
index 00000000000000..0ed0548aa7b0a2
--- /dev/null
+++ b/test/integration/fixtures/schemas/settings.json
@@ -0,0 +1,7 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"invalidAdditionalProperty": true
+	}
+}
diff --git a/test/integration/fixtures/schemas/settingsPropertiesComplete.json b/test/integration/fixtures/schemas/settingsPropertiesComplete.json
new file mode 100644
index 00000000000000..e70019cc266977
--- /dev/null
+++ b/test/integration/fixtures/schemas/settingsPropertiesComplete.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"blocks": {
+			"core/button": {
+				"invalidAdditionalProperty": true
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/styles.json b/test/integration/fixtures/schemas/styles.json
new file mode 100644
index 00000000000000..50635d3de7e929
--- /dev/null
+++ b/test/integration/fixtures/schemas/styles.json
@@ -0,0 +1,7 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"invalidAdditionalProperty": true
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_button.json b/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_button.json
new file mode 100644
index 00000000000000..8c596653abcb00
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_button.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"elements": {
+			"button": {
+				"invalidAdditionalProperty": true
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_link.json b/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_link.json
new file mode 100644
index 00000000000000..b8bbd11910d506
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesElementsPropertiesComplete_link.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"elements": {
+			"link": {
+				"invalidAdditionalProperty": true
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesPropertiesAndElementsComplete.json b/test/integration/fixtures/schemas/stylesPropertiesAndElementsComplete.json
new file mode 100644
index 00000000000000..cf9e2c5689534f
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesPropertiesAndElementsComplete.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"blocks": {
+			"core/button": {
+				"invalidAdditionalProperty": true
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesPropertiesComplete.json b/test/integration/fixtures/schemas/stylesPropertiesComplete.json
new file mode 100644
index 00000000000000..0727fb2abdbe13
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesPropertiesComplete.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"elements": {
+			"button": {
+				":hover": {
+					"invalidAdditionalProperty": true
+				}
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesVariationBlockPropertiesComplete.json b/test/integration/fixtures/schemas/stylesVariationBlockPropertiesComplete.json
new file mode 100644
index 00000000000000..42b3e4b2174f50
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesVariationBlockPropertiesComplete.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"variations": {
+			"custom-variation": {
+				"blocks": {
+					"core/button": {
+						"invalidAdditionalProperty": true
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesVariationProperties.json b/test/integration/fixtures/schemas/stylesVariationProperties.json
new file mode 100644
index 00000000000000..a8a28550dbeee1
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesVariationProperties.json
@@ -0,0 +1,11 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"variations": {
+			"custom-variation": {
+				"invalidAdditionalProperty": true
+			}
+		}
+	}
+}
diff --git a/test/integration/fixtures/schemas/stylesVariationPropertiesComplete.json b/test/integration/fixtures/schemas/stylesVariationPropertiesComplete.json
new file mode 100644
index 00000000000000..4fc448a22a0165
--- /dev/null
+++ b/test/integration/fixtures/schemas/stylesVariationPropertiesComplete.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "../../../../schemas/json/theme.json",
+	"version": 3,
+	"styles": {
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"custom-variation": {
+						"invalidAdditionalProperty": true
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js
index 8066d3b7eb8347..4522dd7b88e451 100644
--- a/test/integration/full-content/full-content.test.js
+++ b/test/integration/full-content/full-content.test.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import glob from 'fast-glob';
-import { get } from 'lodash';
 import { format } from 'util';
 
 /**
@@ -36,6 +35,13 @@ import {
 	writeBlockFixtureSerializedHTML,
 } from '../fixtures';
 
+/* eslint-disable no-restricted-syntax */
+import * as form from '@wordpress/block-library/src/form';
+import * as formInput from '@wordpress/block-library/src/form-input';
+import * as formSubmitButton from '@wordpress/block-library/src/form-submit-button';
+import * as formSubmissionNotification from '@wordpress/block-library/src/form-submission-notification';
+/* eslint-enable no-restricted-syntax */
+
 const blockBasenames = getAvailableBlockFixturesBasenames();
 
 /**
@@ -65,7 +71,18 @@ describe( 'full post content fixture', () => {
 		);
 		unstable__bootstrapServerSideBlockDefinitions( blockDefinitions );
 		registerCoreBlocks();
-		if ( process.env.IS_GUTENBERG_PLUGIN ) {
+
+		// Form-related blocks will not be registered unless they are opted
+		// in on the experimental settings page. Therefore, these blocks
+		// must be explicitly registered.
+		registerCoreBlocks( [
+			form,
+			formInput,
+			formSubmitButton,
+			formSubmissionNotification,
+		] );
+
+		if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 			__experimentalRegisterExperimentalCoreBlocks( {
 				enableFSEBlocks: true,
 			} );
@@ -221,76 +238,77 @@ describe( 'full post content fixture', () => {
 	} );
 
 	it( 'should be present for each block', () => {
-		const errors = [];
-
-		getBlockTypes()
-			.map( ( block ) => block.name )
-			// We don't want tests for each oembed provider, which all have the same
-			// `save` functions and attributes.
-			// The `core/template` is not worth testing here because it's never saved, it's covered better in e2e tests.
-			.filter(
-				( name ) => ! [ 'core/embed', 'core/template' ].includes( name )
-			)
-			.forEach( ( name ) => {
-				const nameToFilename = blockNameToFixtureBasename( name );
-				const foundFixtures = blockBasenames
-					.filter(
-						( basename ) =>
-							basename === nameToFilename ||
-							basename.startsWith( nameToFilename + '__' )
-					)
-					.map( ( basename ) => {
-						const { filename: htmlFixtureFileName } =
-							getBlockFixtureHTML( basename );
-						const { file: jsonFixtureContent } =
-							getBlockFixtureJSON( basename );
-						// The parser output for this test.  For missing files,
-						// JSON.parse( null ) === null.
-						const parserOutput = JSON.parse( jsonFixtureContent );
-						// The name of the first block that this fixture file
-						// contains (if any).
-						const firstBlock = get(
-							parserOutput,
-							[ '0', 'name' ],
-							null
-						);
-						return {
-							filename: htmlFixtureFileName,
-							parserOutput,
-							firstBlock,
-						};
-					} )
-					.filter( ( fixture ) => fixture.parserOutput !== null );
+		expect( () => {
+			const errors = [];
 
-				if ( ! foundFixtures.length ) {
-					errors.push(
-						format(
-							"Expected a fixture file called '%s.html' or '%s__*.html' in `test/integration/fixtures/blocks/` " +
-								'\n\n' +
-								'For more information on how to create test fixtures see https://github.com/WordPress/gutenberg/blob/1f75f8f6f500a20df5b9d6e317b4d72dd5af4ede/test/integration/fixtures/blocks/README.md\n\n',
-							nameToFilename,
-							nameToFilename
+			getBlockTypes()
+				.map( ( block ) => block.name )
+				// We don't want tests for each oembed provider, which all have the same
+				// `save` functions and attributes.
+				// The `core/template` is not worth testing here because it's never saved, it's covered better in e2e tests.
+				.filter(
+					( name ) =>
+						! [ 'core/embed', 'core/template' ].includes( name )
+				)
+				.forEach( ( name ) => {
+					const nameToFilename = blockNameToFixtureBasename( name );
+					const foundFixtures = blockBasenames
+						.filter(
+							( basename ) =>
+								basename === nameToFilename ||
+								basename.startsWith( nameToFilename + '__' )
 						)
-					);
-				}
+						.map( ( basename ) => {
+							const { filename: htmlFixtureFileName } =
+								getBlockFixtureHTML( basename );
+							const { file: jsonFixtureContent } =
+								getBlockFixtureJSON( basename );
+							// The parser output for this test.  For missing files,
+							// JSON.parse( null ) === null.
+							const parserOutput =
+								JSON.parse( jsonFixtureContent );
+							// The name of the first block that this fixture file
+							// contains (if any).
+							const firstBlock =
+								parserOutput?.[ '0' ]?.name ?? null;
+							return {
+								filename: htmlFixtureFileName,
+								parserOutput,
+								firstBlock,
+							};
+						} )
+						.filter( ( fixture ) => fixture.parserOutput !== null );
 
-				foundFixtures.forEach( ( fixture ) => {
-					if ( name !== fixture.firstBlock ) {
+					if ( ! foundFixtures.length ) {
 						errors.push(
 							format(
-								"Expected fixture file '%s' to test the '%s' block.",
-								fixture.filename,
-								name
+								"Expected a fixture file called '%s.html' or '%s__*.html' in `test/integration/fixtures/blocks/` " +
+									'\n\n' +
+									'For more information on how to create test fixtures see https://github.com/WordPress/gutenberg/blob/1f75f8f6f500a20df5b9d6e317b4d72dd5af4ede/test/integration/fixtures/blocks/README.md\n\n',
+								nameToFilename,
+								nameToFilename
 							)
 						);
 					}
+
+					foundFixtures.forEach( ( fixture ) => {
+						if ( name !== fixture.firstBlock ) {
+							errors.push(
+								format(
+									"Expected fixture file '%s' to test the '%s' block.",
+									fixture.filename,
+									name
+								)
+							);
+						}
+					} );
 				} );
-			} );
 
-		if ( errors.length ) {
-			throw new Error(
-				'Problem(s) with fixture files:\n\n' + errors.join( '\n' )
-			);
-		}
+			if ( errors.length ) {
+				throw new Error(
+					'Problem(s) with fixture files:\n\n' + errors.join( '\n' )
+				);
+			}
+		} ).not.toThrow();
 	} );
 } );
diff --git a/test/integration/helpers/integration-test-editor.js b/test/integration/helpers/integration-test-editor.js
new file mode 100644
index 00000000000000..bc2e6f71a954fc
--- /dev/null
+++ b/test/integration/helpers/integration-test-editor.js
@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import {
+	BlockEditorProvider,
+	BlockInspector,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
+import {
+	createBlock,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+import {
+	store as richTextStore,
+	unregisterFormatType,
+} from '@wordpress/rich-text';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { waitForStoreResolvers } from './wait-for-store-resolvers';
+import { unlock } from '../../../packages/block-library/src/lock-unlock';
+
+const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
+	blockEditorPrivateApis
+);
+
+// Polyfill for String.prototype.replaceAll until CI is runnig Node 15 or higher.
+if ( ! String.prototype.replaceAll ) {
+	String.prototype.replaceAll = function ( str, newStr ) {
+		// If a regex pattern
+		if (
+			Object.prototype.toString.call( str ).toLowerCase() ===
+			'[object regexp]'
+		) {
+			return this.replace( str, newStr );
+		}
+
+		// If a string
+		return this.replace( new RegExp( str, 'g' ), newStr );
+	};
+}
+
+/**
+ * Selects the block to be tested by the aria-label on the block wrapper, eg. "Block: Cover".
+ *
+ * @param {string} name
+ */
+export async function selectBlock( name ) {
+	await userEvent.click( screen.getByLabelText( name ) );
+}
+
+export function Editor( { testBlocks, settings = {} } ) {
+	const [ currentBlocks, updateBlocks ] = useState( testBlocks );
+	const { getFormatTypes } = useSelect( richTextStore );
+
+	useEffect( () => {
+		return () => {
+			getBlockTypes().forEach( ( { name } ) =>
+				unregisterBlockType( name )
+			);
+			getFormatTypes().forEach( ( { name } ) =>
+				unregisterFormatType( name )
+			);
+		};
+	}, [ getFormatTypes ] );
+
+	return (
+		<BlockEditorProvider
+			value={ currentBlocks }
+			onInput={ updateBlocks }
+			onChange={ updateBlocks }
+			settings={ settings }
+		>
+			<BlockInspector />
+			<BlockCanvas height="100%" shouldIframe={ false } />
+		</BlockEditorProvider>
+	);
+}
+
+/**
+ * Registers the core block, creates the test block instances, and then instantiates the Editor.
+ *
+ * @param {Object | Array} testBlocks    Block or array of block settings for blocks to be tested.
+ * @param {boolean}        useCoreBlocks Defaults to true. If false, core blocks will not be registered.
+ * @param {Object}         settings      Any additional editor settings to be passed to the editor.
+ */
+export async function initializeEditor(
+	testBlocks,
+	useCoreBlocks = true,
+	settings
+) {
+	if ( useCoreBlocks ) {
+		registerCoreBlocks();
+	}
+	const blocks = Array.isArray( testBlocks ) ? testBlocks : [ testBlocks ];
+	const newBlocks = blocks.map( ( testBlock ) =>
+		createBlock(
+			testBlock.name,
+			testBlock.attributes,
+			testBlock.innerBlocks
+		)
+	);
+	return waitForStoreResolvers( () => {
+		return render(
+			<Editor testBlocks={ newBlocks } settings={ settings } />
+		);
+	} );
+}
diff --git a/test/integration/helpers/wait-for-store-resolvers.js b/test/integration/helpers/wait-for-store-resolvers.js
new file mode 100644
index 00000000000000..fbb35c4e734612
--- /dev/null
+++ b/test/integration/helpers/wait-for-store-resolvers.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { act } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { withFakeTimers } from './with-fake-timers';
+
+/**
+ * Executes a function that triggers store resolvers and waits for them to be finished.
+ *
+ * Asynchronous store resolvers leverage `setTimeout` to run at the end of
+ * the current JavaScript block execution. In order to prevent "act" warnings
+ * triggered by updates to the React tree, we manually tick fake timers and
+ * await the resolution of the current block execution before proceeding.
+ *
+ * @param {Function} fn Function that to trigger.
+ *
+ * @return {*} The result of the function call.
+ */
+export async function waitForStoreResolvers( fn ) {
+	return withFakeTimers( async () => {
+		const result = fn();
+
+		// Advance all timers allowing store resolvers to resolve.
+		act( () => jest.runAllTimers() );
+
+		// The store resolvers perform several API fetches during editor
+		// initialization. The most straightforward approach to ensure all of them
+		// resolve before we consider the editor initialized is to flush micro tasks,
+		// similar to the approach found in `@testing-library/react`.
+		// https://github.com/callstack/react-native-testing-library/blob/a010ffdbca906615279ecc3abee423525e528101/src/flushMicroTasks.js#L15-L23.
+		// eslint-disable-next-line testing-library/no-unnecessary-act
+		await act( async () => {} );
+
+		return result;
+	} );
+}
diff --git a/test/integration/helpers/with-fake-timers.js b/test/integration/helpers/with-fake-timers.js
new file mode 100644
index 00000000000000..91e3ead0a2bf00
--- /dev/null
+++ b/test/integration/helpers/with-fake-timers.js
@@ -0,0 +1,30 @@
+/**
+ * Set up fake timers for executing a function and restores them afterwards.
+ *
+ * @param {Function} fn Function to trigger.
+ *
+ * @return {*} The result of the function call.
+ */
+export async function withFakeTimers( fn ) {
+	const usingFakeTimers = jest.isMockFunction( setTimeout );
+
+	// Portions of the React Native Animation API rely upon these APIs. However,
+	// Jest's 'legacy' fake timers mutate these globals, which breaks the Animated
+	// API. We preserve the original implementations to restore them later.
+	const requestAnimationFrameCopy = global.requestAnimationFrame;
+	const cancelAnimationFrameCopy = global.cancelAnimationFrame;
+
+	if ( ! usingFakeTimers ) {
+		jest.useFakeTimers( { legacyFakeTimers: true } );
+	}
+
+	const result = await fn();
+
+	if ( ! usingFakeTimers ) {
+		jest.useRealTimers();
+
+		global.requestAnimationFrame = requestAnimationFrameCopy;
+		global.cancelAnimationFrame = cancelAnimationFrameCopy;
+	}
+	return result;
+}
diff --git a/test/integration/non-matched-tags-handling.test.js b/test/integration/non-matched-tags-handling.test.js
index 67438192f13680..451a628c329775 100644
--- a/test/integration/non-matched-tags-handling.test.js
+++ b/test/integration/non-matched-tags-handling.test.js
@@ -19,9 +19,9 @@ describe( 'Handling of non matched tags in block transforms', () => {
 
 		expect( simplePreformattedResult ).toHaveLength( 1 );
 		expect( simplePreformattedResult[ 0 ].name ).toBe( 'core/paragraph' );
-		expect( simplePreformattedResult[ 0 ].attributes.content ).toBe(
-			'Pre'
-		);
+		expect(
+			simplePreformattedResult[ 0 ].attributes.content.valueOf()
+		).toBe( 'Pre' );
 
 		const codeResult = pasteHandler( {
 			HTML: '<pre><code>code</code></pre>',
@@ -30,7 +30,7 @@ describe( 'Handling of non matched tags in block transforms', () => {
 
 		expect( codeResult ).toHaveLength( 1 );
 		expect( codeResult[ 0 ].name ).toBe( 'core/code' );
-		expect( codeResult[ 0 ].attributes.content ).toBe( 'code' );
+		expect( codeResult[ 0 ].attributes.content.valueOf() ).toBe( 'code' );
 		expect( console ).toHaveLogged();
 	} );
 } );
diff --git a/test/integration/shortcode-converter.test.js b/test/integration/shortcode-converter.test.js
index 255287eb7c235e..318a6b017dfcbd 100644
--- a/test/integration/shortcode-converter.test.js
+++ b/test/integration/shortcode-converter.test.js
@@ -106,18 +106,14 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 <p>Bar</p>`;
 		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
 		expect( transformed ).toHaveLength( 3 );
-		expect( transformed[ 0 ] ).toBe( `<p>Foo</p>
-
-` );
+		expect( transformed[ 0 ] ).toBe( `<p>Foo</p>` );
 		const expectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo bar="apple"]',
 		} );
 		// clientId will always be random.
 		expectedBlock.clientId = transformed[ 1 ].clientId;
 		expect( transformed[ 1 ] ).toEqual( expectedBlock );
-		expect( transformed[ 2 ] ).toBe( `
-
-<p>Bar</p>` );
+		expect( transformed[ 2 ] ).toBe( `<p>Bar</p>` );
 	} );
 
 	it( 'should convert a shortcode to a block type with a passing `isMatch`', () => {
@@ -165,22 +161,22 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 <p>[foo two]</p>`;
 
 		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
-		expect( transformed[ 0 ] ).toEqual( '<p>' );
+		expect( transformed[ 0 ] ).toEqual( '' );
 		const firstExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo one]',
 		} );
 		// clientId will always be random.
 		firstExpectedBlock.clientId = transformed[ 1 ].clientId;
 		expect( transformed[ 1 ] ).toEqual( firstExpectedBlock );
-		expect( transformed[ 2 ] ).toEqual( `</p>
-<p>` );
+		expect( transformed[ 2 ] ).toEqual( `
+` );
 		const secondExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo two]',
 		} );
 		// clientId will always be random.
 		secondExpectedBlock.clientId = transformed[ 3 ].clientId;
 		expect( transformed[ 3 ] ).toEqual( secondExpectedBlock );
-		expect( transformed[ 4 ] ).toEqual( '</p>' );
+		expect( transformed[ 4 ] ).toEqual( '' );
 		expect( transformed ).toHaveLength( 5 );
 	} );
 
@@ -191,38 +187,38 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 <p>[foo four]</p>`;
 
 		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
-		expect( transformed[ 0 ] ).toEqual( '<p>' );
+		expect( transformed[ 0 ] ).toEqual( '' );
 		const firstExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo one]',
 		} );
 		// clientId will always be random.
 		firstExpectedBlock.clientId = transformed[ 1 ].clientId;
 		expect( transformed[ 1 ] ).toEqual( firstExpectedBlock );
-		expect( transformed[ 2 ] ).toEqual( `</p>
-<p>` );
+		expect( transformed[ 2 ] ).toEqual( `
+` );
 		const secondExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo two]',
 		} );
 		// clientId will always be random.
 		secondExpectedBlock.clientId = transformed[ 3 ].clientId;
 		expect( transformed[ 3 ] ).toEqual( secondExpectedBlock );
-		expect( transformed[ 4 ] ).toEqual( `</p>
-<p>` );
+		expect( transformed[ 4 ] ).toEqual( `
+` );
 		const thirdExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo three]',
 		} );
 		// clientId will always be random.
 		thirdExpectedBlock.clientId = transformed[ 5 ].clientId;
 		expect( transformed[ 5 ] ).toEqual( thirdExpectedBlock );
-		expect( transformed[ 6 ] ).toEqual( `</p>
-<p>` );
+		expect( transformed[ 6 ] ).toEqual( `
+` );
 		const fourthExpectedBlock = createBlock( 'core/shortcode', {
 			text: '[foo four]',
 		} );
 		// clientId will always be random.
 		fourthExpectedBlock.clientId = transformed[ 7 ].clientId;
 		expect( transformed[ 7 ] ).toEqual( fourthExpectedBlock );
-		expect( transformed[ 8 ] ).toEqual( '</p>' );
+		expect( transformed[ 8 ] ).toEqual( '' );
 		expect( transformed ).toHaveLength( 9 );
 	} );
 
@@ -242,11 +238,11 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 		const original = `<p>[my-gallery ids="1,2,3"]</p>
 <p>[my-bunch-of-images ids="4,5,6"]</p>`;
 		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
-		expect( transformed[ 0 ] ).toBe( '<p>' );
+		expect( transformed[ 0 ] ).toBe( '' );
 		expect( transformed[ 1 ] ).toHaveProperty( 'name', 'test/gallery' );
-		expect( transformed[ 2 ] ).toBe( '</p>\n<p>' );
+		expect( transformed[ 2 ] ).toBe( '\n' );
 		expect( transformed[ 3 ] ).toHaveProperty( 'name', 'test/gallery' );
-		expect( transformed[ 4 ] ).toBe( '</p>' );
+		expect( transformed[ 4 ] ).toBe( '' );
 	} );
 
 	it( 'should convert regardless of shortcode order', () => {
@@ -255,7 +251,7 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 
 		const transformed = segmentHTMLToShortcodeBlock( original, 0 );
 
-		expect( transformed[ 0 ] ).toBe( '<p>' );
+		expect( transformed[ 0 ] ).toBe( '' );
 
 		let firstExpectedBlock = createBlock( 'test/gallery', {
 			ids: [ 4, 5, 6 ],
@@ -264,14 +260,14 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 		firstExpectedBlock.clientId = transformed[ 1 ].clientId;
 		expect( transformed[ 1 ] ).toEqual( firstExpectedBlock );
 
-		expect( transformed[ 2 ] ).toBe( '</p>\n<p>' );
+		expect( transformed[ 2 ] ).toBe( '\n' );
 
 		let secondExpectedBlock = createBlock( 'test/broccoli', { id: 42 } );
 		// clientId will always be random.
 		secondExpectedBlock.clientId = transformed[ 3 ].clientId;
 		expect( transformed[ 3 ] ).toEqual( secondExpectedBlock );
 
-		expect( transformed[ 4 ] ).toBe( '</p>' );
+		expect( transformed[ 4 ] ).toBe( '' );
 		expect( transformed ).toHaveLength( 5 );
 
 		// Flip the order of the shortcodes.
@@ -280,14 +276,14 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 
 		const reverseTransformed = segmentHTMLToShortcodeBlock( reversed, 0 );
 
-		expect( reverseTransformed[ 0 ] ).toBe( '<p>' );
+		expect( reverseTransformed[ 0 ] ).toBe( '' );
 
 		firstExpectedBlock = createBlock( 'test/broccoli', { id: 42 } );
 		// clientId will always be random.
 		firstExpectedBlock.clientId = reverseTransformed[ 1 ].clientId;
 		expect( reverseTransformed[ 1 ] ).toEqual( firstExpectedBlock );
 
-		expect( reverseTransformed[ 2 ] ).toBe( '</p>\n<p>' );
+		expect( reverseTransformed[ 2 ] ).toBe( '\n' );
 
 		secondExpectedBlock = createBlock( 'test/gallery', {
 			ids: [ 4, 5, 6 ],
@@ -296,7 +292,7 @@ describe( 'segmentHTMLToShortcodeBlock', () => {
 		secondExpectedBlock.clientId = reverseTransformed[ 3 ].clientId;
 		expect( reverseTransformed[ 3 ] ).toEqual( secondExpectedBlock );
 
-		expect( reverseTransformed[ 4 ] ).toBe( '</p>' );
+		expect( reverseTransformed[ 4 ] ).toBe( '' );
 		expect( reverseTransformed ).toHaveLength( 5 );
 	} );
 } );
diff --git a/test/integration/theme-schema.test.js b/test/integration/theme-schema.test.js
index 0e5ed88a1441eb..01c95ddaefadce 100644
--- a/test/integration/theme-schema.test.js
+++ b/test/integration/theme-schema.test.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import Ajv from 'ajv-draft-04';
+import Ajv from 'ajv';
+import glob from 'fast-glob';
 
 /**
  * Internal dependencies
@@ -9,13 +10,21 @@ import Ajv from 'ajv-draft-04';
 import themeSchema from '../../schemas/json/theme.json';
 
 describe( 'theme.json schema', () => {
+	const jsonFiles = glob.sync(
+		[ 'packages/*/src/**/theme.json', '{lib,phpunit,test}/**/theme.json' ],
+		{ onlyFiles: true }
+	);
+	const invalidFiles = glob.sync(
+		[ 'test/integration/fixtures/schemas/*.json' ],
+		{ onlyFiles: true }
+	);
 	const ajv = new Ajv( {
 		// Used for matching unknown blocks without repeating core blocks names
 		// with patternProperties in settings.blocks and settings.styles
 		allowMatchingProperties: true,
 	} );
 
-	it( 'strictly adheres to the draft-04 meta schema', () => {
+	it( 'strictly adheres to the draft-07 meta schema', () => {
 		// Use ajv.compile instead of ajv.validateSchema to validate the schema
 		// because validateSchema only checks syntax, whereas, compile checks
 		// if the schema is semantically correct with strict mode.
@@ -24,4 +33,29 @@ describe( 'theme.json schema', () => {
 
 		expect( result.errors ).toBe( null );
 	} );
+
+	test( 'found theme.json files', () => {
+		expect( jsonFiles.length ).toBeGreaterThan( 0 );
+	} );
+
+	test.each( jsonFiles )( 'validates schema for `%s`', ( filepath ) => {
+		// We want to validate the theme.json file using the local schema.
+		const { $schema, ...metadata } = require( filepath );
+
+		// we expect the $schema property to be present in the theme.json file
+		expect( $schema ).toBeTruthy();
+
+		const result = ajv.validate( themeSchema, metadata ) || ajv.errors;
+
+		expect( result ).toBe( true );
+	} );
+
+	test.each( invalidFiles )( 'invalidates schema for `%s`', ( filepath ) => {
+		// We want to validate the theme.json file using the local schema.
+		const { $schema, ...metadata } = require( filepath );
+
+		const result = ajv.validate( themeSchema, metadata );
+
+		expect( result ).toBe( false );
+	} );
 } );
diff --git a/test/integration/wp-env-schema.test.js b/test/integration/wp-env-schema.test.js
new file mode 100644
index 00000000000000..48ef039a8fb0d5
--- /dev/null
+++ b/test/integration/wp-env-schema.test.js
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import Ajv from 'ajv';
+
+/**
+ * Internal dependencies
+ */
+import wpEnvSchema from '../../schemas/json/wp-env.json';
+import wpEnvJsonFile from '../../.wp-env.json';
+
+describe( '.wp-env.json schema', () => {
+	const ajv = new Ajv( {
+		allowMatchingProperties: true,
+	} );
+
+	test( 'strictly adheres to the draft-07 meta schema', () => {
+		// Use ajv.compile instead of ajv.validateSchema to validate the schema
+		// because validateSchema only checks syntax, whereas, compile checks
+		// if the schema is semantically correct with strict mode.
+		// See https://github.com/ajv-validator/ajv/issues/1434#issuecomment-822982571
+		const result = ajv.compile( wpEnvSchema );
+
+		expect( result.errors ).toBe( null );
+	} );
+
+	test( 'validates schema for .wp-env.json', () => {
+		// We want to validate the .wp-env.json file using the local schema.
+		const { $schema, ...metadata } = wpEnvJsonFile;
+
+		// we expect the $schema property to be present in the .wp-env.json file
+		expect( $schema ).toBeTruthy();
+
+		const result = ajv.validate( wpEnvSchema, metadata ) || ajv.errors;
+
+		expect( result ).toBe( true );
+	} );
+} );
diff --git a/test/native/__mocks__/@wordpress/react-native-aztec/index.js b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
index f64e93af002952..0c08c17521fc34 100644
--- a/test/native/__mocks__/@wordpress/react-native-aztec/index.js
+++ b/test/native/__mocks__/@wordpress/react-native-aztec/index.js
@@ -2,20 +2,20 @@
  * External dependencies
  */
 import { TextInput } from 'react-native';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
 
-// Preserve the mock of AztecInputState to be exported with the AztecView mock.
+// Preserve the mock of AztecInputState and AztecKeyCodes to be exported with the AztecView mock.
 const AztecInputState = jest.requireActual( '@wordpress/react-native-aztec' )
 	.default.InputState;
-
-const UNSUPPORTED_PROPS = [ 'style' ];
+const AztecKeyCodes = jest.requireActual( '@wordpress/react-native-aztec' )
+	.default.KeyCodes;
 
 const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
+	const { style, ...supportedProps } = rest;
 	const inputRef = useRef();
 
 	useImperativeHandle( ref, () => ( {
@@ -38,7 +38,7 @@ const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
 
 	return (
 		<TextInput
-			{ ...omit( rest, UNSUPPORTED_PROPS ) }
+			{ ...supportedProps }
 			accessibilityLabel={
 				accessibilityLabel || `Text input. ${ text.text || 'Empty' }`
 			}
@@ -50,5 +50,6 @@ const RCTAztecView = ( { accessibilityLabel, text, ...rest }, ref ) => {
 
 const AztecView = forwardRef( RCTAztecView );
 AztecView.InputState = AztecInputState;
+AztecView.KeyCodes = AztecKeyCodes;
 
 export default AztecView;
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index 45517b2204dd4b..55942d977ad00e 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,
@@ -174,4 +175,40 @@ module.exports = {
 	innerAppender: {
 		marginLeft: 8,
 	},
+	mediaAreaPadding: {
+		width: 12,
+	},
+	defaultAppender: {
+		marginLeft: 16,
+	},
+	'components-picker__button-title': {
+		color: 'white',
+	},
+	placeholderColor: {
+		color: 'gray',
+	},
+	'rich-text-selection': {
+		color: 'black',
+	},
+	'header-toolbar__keyboard-hide-shadow--light': {
+		color: 'black',
+	},
+	'header-toolbar__keyboard-hide-shadow--solid': {
+		color: 'black',
+	},
+	'media-placeholder__header-icon': {
+		fill: 'black',
+	},
+	embed__icon: {
+		fill: 'black',
+	},
+	picker: {},
+	pickerPointer: {},
+	columnsContainer: {
+		marginLeft: 16,
+		minWidth: 32,
+	},
+	'unsupported-block-details__icon': {
+		color: 'gray',
+	},
 };
diff --git a/test/native/babel.config.js b/test/native/babel.config.js
index 504b3c324bdb4f..e43fd420a43157 100644
--- a/test/native/babel.config.js
+++ b/test/native/babel.config.js
@@ -1,9 +1,9 @@
 module.exports = ( api ) => {
 	api.cache( true );
 	return {
-		presets: [ 'module:metro-react-native-babel-preset' ],
+		presets: [ 'module:@react-native/babel-preset' ],
 		plugins: [
-			'@babel/plugin-proposal-async-generator-functions',
+			'@babel/plugin-transform-async-generator-functions',
 			'@babel/plugin-transform-runtime',
 			[
 				'react-native-platform-specific-extensions',
@@ -11,6 +11,9 @@ module.exports = ( api ) => {
 					extensions: [ 'css', 'scss', 'sass' ],
 				},
 			],
+			'react-native-reanimated/plugin',
+			'@babel/plugin-transform-export-namespace-from',
+			'@babel/plugin-transform-dynamic-import',
 		],
 		overrides: [
 			{
diff --git a/test/native/helpers.js b/test/native/helpers.js
index 01599d3fac18cb..74c2fce2e45330 100644
--- a/test/native/helpers.js
+++ b/test/native/helpers.js
@@ -1,6 +1,3 @@
 export * from '@testing-library/react-native';
-
+export { measurePerformance } from 'reassure';
 export * from './integration-test-helpers';
-
-// Override `waitFor` export with custom implementation
-export { waitFor } from './integration-test-helpers';
diff --git a/test/native/integration-test-helpers/README.md b/test/native/integration-test-helpers/README.md
index 1818d8845624be..27079abae34f90 100644
--- a/test/native/integration-test-helpers/README.md
+++ b/test/native/integration-test-helpers/README.md
@@ -6,10 +6,6 @@ The following helper functions can be used within integration tests to simplify
 
 Adds a block via the block picker.
 
-### [`advanceAnimationByTime`, `advanceAnimationByFrames` ](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/advance-animation.js)
-
-Advance Reanimated animations by time or frames.
-
 ### [`dismissModal`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/dismiss-block.js)
 
 Dismisses a modal.
@@ -18,6 +14,10 @@ Dismisses a modal.
 
 Gets a block from the root block list.
 
+### [`getBlockTransformOptions`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/get-block-transform-options.js)
+
+Get the block transform options of a block.
+
 ### [`getEditorHtml`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/get-editor-html.js)
 
 Gets the current HTML output of the editor.
@@ -30,6 +30,10 @@ Gets an inner block from another block.
 
 Initialize an editor for test assertions.
 
+### [`openBlockActionsMenu`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/open-block-actions-menu.js)
+
+Opens the block's actions menu of the current selected block.
+
 ### [`openBlockSettings`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/open-block-settings.js)
 
 Opens the block settings of the current selected block.
@@ -46,6 +50,10 @@ Changes the text of a RichText component.
 
 Paste content into a RichText component.
 
+### [`setupApiFetch`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-api-fetch.js)
+
+Sets up the `apiFetch` library for testing by mocking request responses.
+
 ### [`setupCoreBlocks`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-core-blocks.js)
 
 Registers all core blocks or a specific list of blocks before running tests, once the tests are run, all registered blocks are unregistered.
@@ -58,10 +66,18 @@ Sets up Media Picker mock functions.
 
 Sets up the media upload mock functions for testing.
 
+### [`setupPicker`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-picker.js)
+
+Sets up the Picker component for testing.
+
 ### [`changeTextOfTextInput`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/text-input-change-text.js)
 
 Changes the text of a TextInput component.
 
+### [`transformBlock`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/transform-block.js)
+
+Transform the specified block to another block using the Block actions menu.
+
 ### [`triggerBlockListLayout`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/trigger-block-list-layout.js)
 
 Helper for ensuring that all items of a Block List component are rendered.
@@ -74,14 +90,10 @@ Waits for a modal to be visible.
 
 Executes a function that triggers store resolvers and waits for them to be finished.
 
-### [`waitFor`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/wait-for.js)
-
-Custom implementation of the "waitFor" utility from `@testing-library/react-native` library.
-
 ### [`withFakeTimers`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/with-fake-timers.js)
 
 Set up fake timers for executing a function and restores them afterwards.
 
 ### [`withReanimatedTimer`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/with-reanimated-timer.js)
 
-Prepare timers for executing a function that uses the Reanimated APIs.
\ No newline at end of file
+Prepare timers for executing a function that uses the Reanimated APIs.
diff --git a/test/native/integration-test-helpers/add-block.js b/test/native/integration-test-helpers/add-block.js
index 5bc4c5a1ee15a5..eded603829c48a 100644
--- a/test/native/integration-test-helpers/add-block.js
+++ b/test/native/integration-test-helpers/add-block.js
@@ -1,27 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
 /**
  * External dependencies
  */
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent, within } from '@testing-library/react-native';
+import { AccessibilityInfo } from 'react-native';
 
 /**
  * Internal dependencies
  */
-import { waitFor } from './wait-for';
+import { withFakeTimers } from './with-fake-timers';
 
 /**
  * Adds a block via the block picker.
  *
- * @param {import('@testing-library/react-native').RenderAPI} screen    A Testing Library screen.
- * @param {string}                                            blockName Name of the block to be inserted as shown in the block picker.
+ * @param {import('@testing-library/react-native').RenderAPI} screen                   A Testing Library screen.
+ * @param {string}                                            blockName                Name of the block to be inserted as shown in the block picker.
+ * @param {Object}                                            options                  Configuration options for adding a block.
+ * @param {boolean}                                           [options.isPickerOpened] Option to skip opening the inserter picker.
  */
-export const addBlock = async ( screen, blockName ) => {
-	const { getByLabelText, getByTestId, getByText } = screen;
-
-	fireEvent.press( getByLabelText( 'Add block' ) );
+export const addBlock = async (
+	screen,
+	blockName,
+	{ isPickerOpened } = {}
+) => {
+	if ( ! isPickerOpened ) {
+		fireEvent.press( screen.getByLabelText( 'Add block' ) );
+	}
 
-	const blockList = getByTestId( 'InserterUI-Blocks' );
+	const inserterModal = screen.getByTestId( 'InserterUI-Blocks' );
 	// onScroll event used to force the FlatList to render all items
-	fireEvent.scroll( blockList, {
+	fireEvent.scroll( inserterModal, {
 		nativeEvent: {
 			contentOffset: { y: 0, x: 0 },
 			contentSize: { width: 100, height: 100 },
@@ -29,5 +41,25 @@ export const addBlock = async ( screen, blockName ) => {
 		},
 	} );
 
-	fireEvent.press( await waitFor( () => getByText( blockName ) ) );
+	const blockButton = await within( inserterModal ).findByText( blockName );
+	// Blocks can perform belated state updates after they are inserted.
+	// To avoid potential `act` warnings, we ensure that all timers and queued
+	// microtasks are executed.
+	await withFakeTimers( async () => {
+		fireEvent.press( blockButton );
+
+		// On iOS the action for inserting a block is delayed (https://bit.ly/3AVALqH).
+		// Hence, we need to wait for the different steps until the the block is inserted.
+		if ( Platform.isIOS ) {
+			await AccessibilityInfo.isScreenReaderEnabled();
+			act( () => jest.runOnlyPendingTimers() );
+		}
+
+		// Run all timers, in case any performs a state updates.
+		// Column block example: https://t.ly/NjTs
+		act( () => jest.runOnlyPendingTimers() );
+		// Let potential queued microtasks (like Promises) to be executed.
+		// Inner blocks example: https://t.ly/b95nA
+		await act( async () => {} );
+	} );
 };
diff --git a/test/native/integration-test-helpers/advance-animation.js b/test/native/integration-test-helpers/advance-animation.js
index 87492b86912974..98910c27b16669 100644
--- a/test/native/integration-test-helpers/advance-animation.js
+++ b/test/native/integration-test-helpers/advance-animation.js
@@ -3,22 +3,6 @@
  */
 import { FRAME_TIME } from './constants';
 
-/**
- * Advance Reanimated animations by time.
- * This helper should be called within a function invoked by "withReanimatedTimer".
- *
- * NOTE: This code is based on a similar function provided by the Reanimated library.
- * Reference: https://github.com/software-mansion/react-native-reanimated/blob/b4ee4ea9a1f246c461dd1819c6f3d48440a25756/src/reanimated2/jestUtils.ts#L176-L181
- *
- * @param {number} time Time to advance timers.
- */
-export const advanceAnimationByTime = ( time = FRAME_TIME ) => {
-	for ( let i = 0; i <= Math.ceil( time / FRAME_TIME ); i++ ) {
-		jest.advanceTimersByTime( FRAME_TIME );
-	}
-	jest.advanceTimersByTime( FRAME_TIME );
-};
-
 /**
  * Advance Reanimated animations by frames.
  * This helper should be called within a function invoked by "withReanimatedTimer".
@@ -29,8 +13,6 @@ export const advanceAnimationByTime = ( time = FRAME_TIME ) => {
  * @param {number} count Number of frames to advance timers.
  */
 export const advanceAnimationByFrames = ( count ) => {
-	for ( let i = 0; i <= count; i++ ) {
-		jest.advanceTimersByTime( FRAME_TIME );
-	}
-	jest.advanceTimersByTime( FRAME_TIME );
+	jest.advanceTimersByTime( count * FRAME_TIME );
+	jest.runOnlyPendingTimers();
 };
diff --git a/test/native/integration-test-helpers/get-block-transform-options.js b/test/native/integration-test-helpers/get-block-transform-options.js
new file mode 100644
index 00000000000000..02ca81a1d5ccc0
--- /dev/null
+++ b/test/native/integration-test-helpers/get-block-transform-options.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, within } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import { getBlock } from './get-block';
+import { openBlockActionsMenu } from './open-block-actions-menu';
+
+/**
+ * Transforms the selected block to a specified block.
+ *
+ * @param {import('@testing-library/react-native').RenderAPI} screen    A Testing Library screen.
+ * @param {string}                                            blockName Name of the block.
+ * @return {[import('react-test-renderer').ReactTestInstance]} Block transform options.
+ */
+export const getBlockTransformOptions = async ( screen, blockName ) => {
+	const { getByTestId, getByText } = screen;
+
+	fireEvent.press( getBlock( screen, blockName ) );
+	await openBlockActionsMenu( screen );
+	fireEvent.press( getByText( 'Transform block…' ) );
+
+	return within( getByTestId( 'block-transformations-menu' ) ).getAllByRole(
+		'button'
+	);
+};
diff --git a/test/native/integration-test-helpers/get-block.js b/test/native/integration-test-helpers/get-block.js
index 5f618ddbefe8eb..0770a736affbb1 100644
--- a/test/native/integration-test-helpers/get-block.js
+++ b/test/native/integration-test-helpers/get-block.js
@@ -8,8 +8,7 @@
  * @return {import('react-test-renderer').ReactTestInstance} Block instance.
  */
 export const getBlock = ( screen, blockName, { rowIndex = 1 } = {} ) => {
-	const { getByLabelText } = screen;
-	return getByLabelText(
+	return screen.getAllByLabelText(
 		new RegExp( `${ blockName } Block\\. Row ${ rowIndex }` )
-	);
+	)[ 0 ];
 };
diff --git a/test/native/integration-test-helpers/get-editor-content.js b/test/native/integration-test-helpers/get-editor-content.js
new file mode 100644
index 00000000000000..2594382d8ce686
--- /dev/null
+++ b/test/native/integration-test-helpers/get-editor-content.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	subscribeParentGetHtml,
+	provideToNative_Html as provideToNativeHtml,
+} from '@wordpress/react-native-bridge';
+
+// Set up the mocks for getting the HTML output of the editor
+let triggerHtmlSerialization;
+let serializedContent = {};
+subscribeParentGetHtml.mockImplementation( ( callback ) => {
+	if ( ! triggerHtmlSerialization ) {
+		triggerHtmlSerialization = callback;
+		return {
+			remove: () => {
+				triggerHtmlSerialization = undefined;
+			},
+		};
+	}
+} );
+provideToNativeHtml.mockImplementation(
+	( html, title, hasChanges, contentInfo ) => {
+		serializedContent = { html, title, hasChanges, contentInfo };
+	}
+);
+
+/**
+ * Gets the current HTML output of the editor.
+ *
+ * @return {string} HTML output
+ */
+export function getEditorHtml() {
+	if ( ! triggerHtmlSerialization ) {
+		throw new Error( 'HTML serialization trigger is not defined.' );
+	}
+	triggerHtmlSerialization();
+	return serializedContent.html;
+}
+
+/**
+ * Gets the current title of the editor.
+ *
+ * @return {string} Title
+ */
+export function getEditorTitle() {
+	if ( ! triggerHtmlSerialization ) {
+		throw new Error( 'HTML serialization trigger is not defined.' );
+	}
+	triggerHtmlSerialization();
+	return serializedContent.title;
+}
diff --git a/test/native/integration-test-helpers/get-editor-html.js b/test/native/integration-test-helpers/get-editor-html.js
deleted file mode 100644
index eb1a9909895d2c..00000000000000
--- a/test/native/integration-test-helpers/get-editor-html.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	subscribeParentGetHtml,
-	provideToNative_Html as provideToNativeHtml,
-} from '@wordpress/react-native-bridge';
-
-// Set up the mocks for getting the HTML output of the editor
-let triggerHtmlSerialization;
-let serializedHtml;
-subscribeParentGetHtml.mockImplementation( ( callback ) => {
-	if ( ! triggerHtmlSerialization ) {
-		triggerHtmlSerialization = callback;
-		return {
-			remove: () => {
-				triggerHtmlSerialization = undefined;
-			},
-		};
-	}
-} );
-provideToNativeHtml.mockImplementation( ( html ) => {
-	serializedHtml = html;
-} );
-
-/**
- * Gets the current HTML output of the editor.
- *
- * @return {string} HTML output
- */
-export function getEditorHtml() {
-	if ( ! triggerHtmlSerialization ) {
-		throw new Error( 'HTML serialization trigger is not defined.' );
-	}
-	triggerHtmlSerialization();
-	return serializedHtml;
-}
diff --git a/test/native/integration-test-helpers/get-global-styles.js b/test/native/integration-test-helpers/get-global-styles.js
new file mode 100644
index 00000000000000..405b3d93c5d90f
--- /dev/null
+++ b/test/native/integration-test-helpers/get-global-styles.js
@@ -0,0 +1,183 @@
+const GLOBAL_STYLES_RAW_FEATURES = {
+	color: {
+		text: true,
+		background: true,
+		defaultPalette: true,
+		defaultGradients: false,
+		palette: {
+			default: [
+				{
+					color: '#f78da7',
+					name: 'Pale pink',
+					slug: 'pale-pink',
+				},
+				{
+					color: '#cf2e2e',
+					name: 'Vivid red',
+					slug: 'vivid-red',
+				},
+				{
+					color: '#ff6900',
+					name: 'Luminous vivid orange',
+					slug: 'luminous-vivid-orange',
+				},
+			],
+			theme: [
+				{
+					color: '#e2d8ff',
+					name: 'Foreground',
+					slug: 'foreground',
+				},
+				{
+					color: '#2f1ab2',
+					name: 'Background',
+					slug: 'background',
+				},
+				{
+					color: '#2411a4',
+					name: 'Tertiary',
+					slug: 'tertiary',
+				},
+			],
+		},
+	},
+	typography: {
+		fontSizes: {
+			default: [
+				{
+					name: 'Small',
+					size: '13px',
+					slug: 'small',
+				},
+				{
+					name: 'Medium',
+					size: '20px',
+					slug: 'medium',
+				},
+				{
+					name: 'Large',
+					size: '36px',
+					slug: 'large',
+				},
+				{
+					name: 'Extra Large',
+					size: '42px',
+					slug: 'x-large',
+				},
+			],
+			theme: [
+				{
+					fluid: false,
+					name: 'Small',
+					size: '0.9rem',
+					slug: 'small',
+				},
+				{
+					fluid: false,
+					name: 'Medium',
+					size: '1.05rem',
+					slug: 'medium',
+				},
+				{
+					fluid: {
+						max: '1.85rem',
+						min: '1.39rem',
+					},
+					name: 'Large',
+					size: '1.85rem',
+					slug: 'large',
+				},
+				{
+					fluid: {
+						max: '2.5rem',
+						min: '1.85rem',
+					},
+					name: 'Extra Large',
+					size: '2.5rem',
+					slug: 'x-large',
+				},
+				{
+					fluid: {
+						max: '3.27rem',
+						min: '2.5rem',
+					},
+					name: 'Extra Extra Large',
+					size: '3.27rem',
+					slug: 'xx-large',
+				},
+			],
+		},
+	},
+};
+
+const GLOBAL_STYLES_RAW_STYLES = {
+	color: {
+		background: 'var(--wp--preset--color--foreground)',
+		text: 'var(--wp--preset--color--tertiary)',
+	},
+	elements: {
+		h1: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--xx-large)',
+				lineHeight: '1.15',
+			},
+		},
+		h2: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--x-large)',
+			},
+		},
+		h3: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--large)',
+			},
+		},
+		h4: {
+			typography: {
+				fontSize:
+					'clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.767), 1.5rem)',
+			},
+		},
+		h5: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--medium)',
+			},
+		},
+		h6: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--small)',
+			},
+		},
+		heading: {
+			color: {
+				text: 'var(--wp--preset--color--tertiary)',
+			},
+			typography: {
+				fontFamily: 'var(--wp--preset--font-family--heading)',
+				lineHeight: '1.2',
+			},
+		},
+		link: {
+			color: {
+				text: 'var(--wp--preset--color--tertiary)',
+			},
+		},
+	},
+	typography: {
+		fontFamily: 'var(--wp--preset--font-family--body)',
+		fontSize: 'var(--wp--preset--font-size--medium)',
+		lineHeight: '1.55',
+	},
+};
+
+/**
+ * Returns some global styles data to test with the editor.
+ *
+ * @return {Object} Editor features.
+ */
+export function getGlobalStyles() {
+	return {
+		rawFeatures: JSON.stringify( GLOBAL_STYLES_RAW_FEATURES ),
+		rawStyles: JSON.stringify( GLOBAL_STYLES_RAW_STYLES ),
+	};
+}
diff --git a/test/native/integration-test-helpers/get-inner-block.js b/test/native/integration-test-helpers/get-inner-block.js
index 53536c7d2f7eb8..1bb1e6938c2803 100644
--- a/test/native/integration-test-helpers/get-inner-block.js
+++ b/test/native/integration-test-helpers/get-inner-block.js
@@ -17,7 +17,7 @@ export const getInnerBlock = (
 	blockName,
 	{ rowIndex = 1 } = {}
 ) => {
-	return within( parentBlock ).getByLabelText(
+	return within( parentBlock ).getAllByLabelText(
 		new RegExp( `${ blockName } Block\\. Row ${ rowIndex }` )
-	);
+	)[ 0 ];
 };
diff --git a/test/native/integration-test-helpers/index.js b/test/native/integration-test-helpers/index.js
index 9287634e63faed..1ea79e8108ce40 100644
--- a/test/native/integration-test-helpers/index.js
+++ b/test/native/integration-test-helpers/index.js
@@ -1,24 +1,25 @@
 export { addBlock } from './add-block';
-export {
-	advanceAnimationByTime,
-	advanceAnimationByFrames,
-} from './advance-animation';
-export { dismissModal } from './dismiss-modal';
-export { getBlock } from './get-block';
-export { getEditorHtml } from './get-editor-html';
-export { getInnerBlock } from './get-inner-block';
-export { initializeEditor } from './initialize-editor';
-export { openBlockSettings } from './open-block-settings';
-export { changeAndSelectTextOfRichText } from './rich-text-change-and-select-text';
-export { changeTextOfRichText } from './rich-text-change-text';
-export { pasteIntoRichText } from './rich-text-paste';
-export { setupCoreBlocks } from './setup-core-blocks';
-export { setupMediaPicker } from './setup-media-picker';
-export { setupMediaUpload } from './setup-media-upload';
-export { changeTextOfTextInput } from './text-input-change-text';
-export { triggerBlockListLayout } from './trigger-block-list-layout';
-export { waitForModalVisible } from './wait-for-modal-visible';
-export { waitForStoreResolvers } from './wait-for-store-resolvers';
-export { waitFor } from './wait-for';
-export { withFakeTimers } from './with-fake-timers';
-export { withReanimatedTimer } from './with-reanimated-timer';
+export { advanceAnimationByFrames } from './advance-animation';
+export * from './dismiss-modal';
+export * from './get-block';
+export * from './get-block-transform-options';
+export * from './get-editor-content';
+export * from './get-inner-block';
+export * from './initialize-editor';
+export * from './open-block-actions-menu';
+export * from './open-block-settings';
+export * from './rich-text-select-range';
+export * from './rich-text-type';
+export * from './rich-text-paste';
+export * from './setup-api-fetch';
+export * from './setup-core-blocks';
+export * from './setup-media-picker';
+export * from './setup-media-upload';
+export * from './setup-picker';
+export * from './text-input-change-text';
+export * from './transform-block';
+export * from './trigger-block-list-layout';
+export * from './wait-for-modal-visible';
+export * from './wait-for-store-resolvers';
+export * from './with-fake-timers';
+export * from './with-reanimated-timer';
diff --git a/test/native/integration-test-helpers/initialize-editor.js b/test/native/integration-test-helpers/initialize-editor.js
index 16d1372d3533f3..3b89da979aee3a 100644
--- a/test/native/integration-test-helpers/initialize-editor.js
+++ b/test/native/integration-test-helpers/initialize-editor.js
@@ -7,37 +7,64 @@ import { v4 as uuid } from 'uuid';
 /**
  * WordPress dependencies
  */
-import { initializeEditor as internalInitializeEditor } from '@wordpress/edit-post';
 import { createElement, cloneElement } from '@wordpress/element';
+// eslint-disable-next-line no-restricted-imports
+import { initializeEditor as internalInitializeEditor } from '@wordpress/edit-post';
+import { store as coreStore } from '@wordpress/core-data';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { waitForStoreResolvers } from './wait-for-store-resolvers';
+import { getGlobalStyles } from './get-global-styles';
 
 /**
  * Initialize an editor for test assertions.
  *
- * @param {Object}                    props               Properties passed to the editor component.
- * @param {string}                    props.initialHtml   String of block editor HTML to parse and render.
- * @param {Object}                    [options]           Configuration options for the editor.
- * @param {import('react').ReactNode} [options.component] A specific editor component to render.
+ * @param {Object}                    props                  Properties passed to the editor component.
+ * @param {string}                    props.initialHtml      String of block editor HTML to parse and render.
+ * @param {string}                    props.withGlobalStyles Boolean to pass global styles data to the editor.
+ * @param {Object}                    [options]              Configuration options for the editor.
+ * @param {import('react').ReactNode} [options.component]    A specific editor component to render.
  * @return {import('@testing-library/react-native').RenderAPI} A Testing Library screen.
  */
 export async function initializeEditor( props, { component } = {} ) {
+	const resolutionSpy = jest.spyOn(
+		select( coreStore ),
+		'hasFinishedResolution'
+	);
+	const actualResolution = resolutionSpy.getMockImplementation();
+	resolutionSpy.mockImplementation( ( selectorName, args ) => {
+		// The mobile editor only supports the `post-only` rendering mode, so we
+		// presume a resolved `getPostType` selector to unblock editor rendering.
+		if ( 'getPostType' === selectorName ) {
+			return true;
+		}
+
+		return actualResolution( selectorName, args );
+	} );
+
 	const uniqueId = uuid();
 	const postId = `post-id-${ uniqueId }`;
 	const postType = 'post';
 
 	return waitForStoreResolvers( () => {
+		const {
+			screenWidth = 320,
+			withGlobalStyles = false,
+			initialTitle = 'test',
+			...rest
+		} = props || {};
 		const editorElement = component
 			? createElement( component, { postType, postId } )
 			: internalInitializeEditor( uniqueId, postType, postId );
 
 		const screen = render(
 			cloneElement( editorElement, {
-				initialTitle: 'test',
-				...props,
+				initialTitle,
+				...( withGlobalStyles ? getGlobalStyles() : {} ),
+				...rest,
 			} )
 		);
 
@@ -46,7 +73,7 @@ export async function initializeEditor( props, { component } = {} ) {
 		fireEvent( screen.getByTestId( 'block-list-wrapper' ), 'layout', {
 			nativeEvent: {
 				layout: {
-					width: 100,
+					width: screenWidth,
 				},
 			},
 		} );
diff --git a/test/native/integration-test-helpers/open-block-actions-menu.js b/test/native/integration-test-helpers/open-block-actions-menu.js
new file mode 100644
index 00000000000000..b2634c57d3dd42
--- /dev/null
+++ b/test/native/integration-test-helpers/open-block-actions-menu.js
@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { fireEvent } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import { waitForModalVisible } from './wait-for-modal-visible';
+
+/**
+ * Opens the block's actions menu of the current selected block.
+ *
+ * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
+ */
+export const openBlockActionsMenu = async ( screen ) => {
+	const { getByLabelText, getByTestId } = screen;
+	fireEvent.press( getByLabelText( 'Open Block Actions Menu' ) );
+	return waitForModalVisible( getByTestId( 'block-actions-menu' ) );
+};
diff --git a/test/native/integration-test-helpers/rich-text-change-and-select-text.js b/test/native/integration-test-helpers/rich-text-change-and-select-text.js
deleted file mode 100644
index ff01895e09d76f..00000000000000
--- a/test/native/integration-test-helpers/rich-text-change-and-select-text.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent } from '@testing-library/react-native';
-
-/**
- * Changes the text and selection of a RichText component.
- *
- * @param {import('react-test-renderer').ReactTestInstance} richText                 RichText test instance.
- * @param {string}                                          text                     Text to be set.
- * @param {Object}                                          options                  Configuration options for selection.
- * @param {number}                                          [options.selectionStart] Selection start position.
- * @param {number}                                          [options.selectionEnd]   Selection end position.
- */
-export const changeAndSelectTextOfRichText = (
-	richText,
-	text,
-	{ selectionStart = 0, selectionEnd = 0 } = {}
-) => {
-	fireEvent( richText, 'focus' );
-	fireEvent(
-		richText,
-		'onSelectionChange',
-		selectionStart,
-		selectionEnd,
-		text,
-		{
-			nativeEvent: {
-				eventCount: 1,
-				target: undefined,
-				text,
-			},
-		}
-	);
-};
diff --git a/test/native/integration-test-helpers/rich-text-change-text.js b/test/native/integration-test-helpers/rich-text-change-text.js
deleted file mode 100644
index 495fe96dc5fb98..00000000000000
--- a/test/native/integration-test-helpers/rich-text-change-text.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent } from '@testing-library/react-native';
-
-/**
- * Changes the text of a RichText component.
- *
- * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
- * @param {string}                                          text     Text to be set.
- */
-export const changeTextOfRichText = ( richText, text ) => {
-	fireEvent( richText, 'focus' );
-	fireEvent( richText, 'onChange', {
-		nativeEvent: {
-			eventCount: 1,
-			target: undefined,
-			text,
-		},
-	} );
-};
diff --git a/test/native/integration-test-helpers/rich-text-paste.js b/test/native/integration-test-helpers/rich-text-paste.js
index d2c01ed2fb5a72..6d447181e0b8d2 100644
--- a/test/native/integration-test-helpers/rich-text-paste.js
+++ b/test/native/integration-test-helpers/rich-text-paste.js
@@ -6,19 +6,20 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Paste content into a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText       RichText test instance.
- * @param {Object}                                          content        Content to paste.
- * @param {string}                                          content.text   Text format of the content.
- * @param {string}                                          [content.html] HTML format of the content. If not provided, text format will be used.
+ * @param {import('react-test-renderer').ReactTestInstance} richText        RichText test instance.
+ * @param {Object}                                          content         Content to paste.
+ * @param {string}                                          content.text    Text format of the content.
+ * @param {string}                                          [content.html]  HTML format of the content. If not provided, text format will be used.
+ * @param {string}                                          [content.files] Files array to add to the editor.
  */
-export const pasteIntoRichText = ( richText, { text, html } ) => {
+export const pasteIntoRichText = ( richText, { text, html, files = [] } ) => {
 	fireEvent( richText, 'focus' );
 	fireEvent( richText, 'paste', {
 		preventDefault: jest.fn(),
 		nativeEvent: {
 			eventCount: 1,
 			target: undefined,
-			files: [],
+			files,
 			pastedHtml: html || text,
 			pastedText: text,
 		},
diff --git a/test/native/integration-test-helpers/rich-text-select-range.js b/test/native/integration-test-helpers/rich-text-select-range.js
new file mode 100644
index 00000000000000..0e44a5af3a1d2c
--- /dev/null
+++ b/test/native/integration-test-helpers/rich-text-select-range.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { typeInRichText } from './rich-text-type';
+
+/**
+ * Select a range within a RichText component.
+ *
+ * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
+ * @param {number}                                          start    Selection start position.
+ * @param {number}                                          end      Selection end position.
+ */
+export const selectRangeInRichText = ( richText, start, end = start ) => {
+	if ( typeof start !== 'number' ) {
+		throw new Error( 'A numerical range start value must be provided.' );
+	}
+
+	typeInRichText( richText, '', {
+		finalSelectionStart: start,
+		finalSelectionEnd: end,
+	} );
+};
diff --git a/test/native/integration-test-helpers/rich-text-type.js b/test/native/integration-test-helpers/rich-text-type.js
new file mode 100644
index 00000000000000..3be020325c2ed5
--- /dev/null
+++ b/test/native/integration-test-helpers/rich-text-type.js
@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { fireEvent } from '@testing-library/react-native';
+
+let eventCount = 0;
+
+function stripOuterHtmlTags( string ) {
+	return string.replace( /^<[^>]*>|<[^>]*>$/g, '' );
+}
+
+function insertTextAtPosition( text, newText, start, end ) {
+	return text.slice( 0, start ) + newText + text.slice( end );
+}
+
+/**
+ * Changes the text and selection of a RichText component.
+ *
+ * @param {import('react-test-renderer').ReactTestInstance} richText                        RichText test instance.
+ * @param {string}                                          text                            Text to set.
+ * @param {Object}                                          options                         Configuration options for selection.
+ * @param {number}                                          [options.initialSelectionStart] Selection start position before the text is inserted.
+ * @param {number}                                          [options.initialSelectionEnd]   Selection end position before the text is inserted.
+ * @param {number}                                          [options.finalSelectionStart]   Selection start position after the text is inserted.
+ * @param {number}                                          [options.finalSelectionEnd]     Selection end position after the text is inserted.
+ */
+export const typeInRichText = ( richText, text, options = {} ) => {
+	const currentValueSansOuterHtmlTags = stripOuterHtmlTags(
+		richText.props.value
+	);
+	const {
+		initialSelectionStart = currentValueSansOuterHtmlTags.length,
+		initialSelectionEnd = initialSelectionStart,
+		finalSelectionStart = currentValueSansOuterHtmlTags.length +
+			text.length,
+		finalSelectionEnd = finalSelectionStart,
+	} = options;
+
+	fireEvent( richText, 'focus' );
+	// `onSelectionChange` invokes `onChange`; we only need to trigger the former.
+	fireEvent(
+		richText,
+		'onSelectionChange',
+		finalSelectionStart,
+		finalSelectionEnd,
+		text,
+		{
+			nativeEvent: {
+				eventCount: ( eventCount += 101 ), // Avoid Aztec dropping the event.
+				target: undefined,
+				text: insertTextAtPosition(
+					currentValueSansOuterHtmlTags,
+					text,
+					initialSelectionStart,
+					initialSelectionEnd
+				),
+			},
+		}
+	);
+};
diff --git a/test/native/integration-test-helpers/setup-api-fetch.js b/test/native/integration-test-helpers/setup-api-fetch.js
new file mode 100644
index 00000000000000..6a5c5c97a934fd
--- /dev/null
+++ b/test/native/integration-test-helpers/setup-api-fetch.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Sets up the `apiFetch` library for testing by mocking request responses.
+ *
+ * Example:
+ *
+ * const responses = [
+ *     {
+ *         request: {
+ *             path: `/wp/v2/media/1?context=edit`,
+ *         },
+ *         response: {
+ *             source_url: 'https://image-1.jpg',
+ *             id: 1,
+ *         },
+ *     },
+ *     {
+ *         request: {
+ *             path: `/wp/v2/media/2?context=edit`,
+ *         },
+ *         response: {
+ *             source_url: 'https://image-2.jpg',
+ *             id: 2,
+ *         },
+ *     },
+ * ];
+ * setupApiFetch( responses );
+ * ...
+ * expect( apiFetch ).toHaveBeenCalledWith( responses[1].request );
+ *
+ * @param {object[]} responses Array with the potential responses to return upon requests.
+ */
+export function setupApiFetch( responses ) {
+	apiFetch.mockImplementation( async ( options ) => {
+		const matchedResponse = responses.find(
+			( { request: { path, method } } ) => {
+				return (
+					path === options.path &&
+					( ! options.method || method === options.method )
+				);
+			}
+		);
+		return matchedResponse?.response;
+	} );
+}
diff --git a/test/native/integration-test-helpers/setup-media-picker.js b/test/native/integration-test-helpers/setup-media-picker.js
index 72646f0138e087..e99f9189747503 100644
--- a/test/native/integration-test-helpers/setup-media-picker.js
+++ b/test/native/integration-test-helpers/setup-media-picker.js
@@ -20,9 +20,11 @@ import { requestMediaPicker } from '@wordpress/react-native-bridge';
  */
 export const setupMediaPicker = () => {
 	let mediaPickerCallback;
+	let multipleItems;
 	requestMediaPicker.mockImplementation(
 		( source, filter, multiple, callback ) => {
 			mediaPickerCallback = callback;
+			multipleItems = multiple;
 		}
 	);
 	return {
@@ -34,16 +36,25 @@ export const setupMediaPicker = () => {
 				mediaPickerCallback
 			),
 		mediaPickerCallback: async ( ...mediaItems ) =>
-			act( async () =>
+			act( async () => {
+				const items = mediaItems.map(
+					( {
+						localId,
+						localUrl,
+						type = 'image',
+						url,
+						id,
+						metadata,
+					} ) => ( {
+						type,
+						url: url ?? localUrl,
+						id: id ?? localId,
+						metadata,
+					} )
+				);
 				mediaPickerCallback(
-					mediaItems.map(
-						( { localId, localUrl, type = 'image' } ) => ( {
-							type,
-							url: localUrl,
-							id: localId,
-						} )
-					)
-				)
-			),
+					items.length === 1 && ! multipleItems ? items[ 0 ] : items
+				);
+			} ),
 	};
 };
diff --git a/test/native/integration-test-helpers/setup-media-upload.js b/test/native/integration-test-helpers/setup-media-upload.js
index 1adf10bc0e240e..5ce2d19c3e9717 100644
--- a/test/native/integration-test-helpers/setup-media-upload.js
+++ b/test/native/integration-test-helpers/setup-media-upload.js
@@ -50,6 +50,7 @@ export const setupMediaUpload = () => {
 					mediaId: mediaItem.localId,
 					mediaUrl: mediaItem.serverUrl,
 					mediaServerId: mediaItem.serverId,
+					metadata: mediaItem.metadata,
 				} );
 			} ),
 		notifyFailedState: async ( mediaItem ) =>
diff --git a/test/native/integration-test-helpers/setup-picker.js b/test/native/integration-test-helpers/setup-picker.js
new file mode 100644
index 00000000000000..a762070631b4a2
--- /dev/null
+++ b/test/native/integration-test-helpers/setup-picker.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { fireEvent } from '@testing-library/react-native';
+import { ActionSheetIOS } from 'react-native';
+
+/**
+ * Sets up the Picker component for testing.
+ *
+ * @typedef {Object} PickerMockFunctions
+ * @property {Function}                                          selectOption Selects one of the options of the picker.
+ *
+ * @param    {import('@testing-library/react-native').RenderAPI} screen       A Testing Library screen.
+ * @param    {string[]}                                          options      Array with the options of the picker.
+ *
+ * @return {PickerMockFunctions} Picker functions.
+ */
+export function setupPicker( screen, options ) {
+	let selectOption = ( option ) => {
+		fireEvent.press( screen.getByText( option ) );
+	};
+	if ( Platform.isIOS ) {
+		let onOptionSelected;
+		ActionSheetIOS.showActionSheetWithOptions.mockImplementation(
+			( _, callback ) => {
+				onOptionSelected = callback;
+			}
+		);
+		// The index passed is incremented by one as the first
+		// option of the picker is `Cancel`.
+		selectOption = ( option ) =>
+			onOptionSelected( options.indexOf( option ) + 1 );
+	}
+	return { selectOption };
+}
diff --git a/test/native/integration-test-helpers/transform-block.js b/test/native/integration-test-helpers/transform-block.js
new file mode 100644
index 00000000000000..3feb6fbb32827e
--- /dev/null
+++ b/test/native/integration-test-helpers/transform-block.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { act, fireEvent } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import { getBlock } from './get-block';
+import { openBlockActionsMenu } from './open-block-actions-menu';
+import { triggerBlockListLayout } from './trigger-block-list-layout';
+
+const apiFetchPromise = Promise.resolve( {} );
+
+/**
+ * Transforms the selected block to a specified block.
+ *
+ * @param {import('@testing-library/react-native').RenderAPI} screen                   A Testing Library screen.
+ * @param {string}                                            blockName                Name of the block to transform.
+ * @param {string}                                            targetBlockName          Name of the target block to transform to.
+ * @param {Object}                                            [options]                Configuration options for the transformation.
+ * @param {number}                                            [options.isMediaBlock]   True if the block transformation will result in a media block.
+ * @param {number}                                            [options.hasInnerBlocks] True if the block transformation will result in a block that contains inner blocks.
+ * @return {import('react-test-renderer').ReactTestInstance} Block instance after the block transformation result.
+ */
+export const transformBlock = async (
+	screen,
+	blockName,
+	targetBlockName,
+	{ isMediaBlock = false, hasInnerBlocks = false } = {}
+) => {
+	const { getByText } = screen;
+
+	fireEvent.press( getBlock( screen, blockName ) );
+
+	await openBlockActionsMenu( screen );
+	fireEvent.press( getByText( 'Transform block…' ) );
+	fireEvent.press( getByText( targetBlockName ) );
+
+	// For media blocks, we must wait for the media fetch via `getMedia`.
+	if ( isMediaBlock ) {
+		await act( () => apiFetchPromise );
+	}
+
+	const newBlock = getBlock( screen, targetBlockName );
+	// For blocks that contain inner blocks, we must trigger the inner
+	// block list layout to render its content.
+	if ( hasInnerBlocks ) {
+		await triggerBlockListLayout( newBlock );
+	}
+	return newBlock;
+};
diff --git a/test/native/integration-test-helpers/trigger-block-list-layout.js b/test/native/integration-test-helpers/trigger-block-list-layout.js
index bc0ca432065bff..5ccea7722cbf08 100644
--- a/test/native/integration-test-helpers/trigger-block-list-layout.js
+++ b/test/native/integration-test-helpers/trigger-block-list-layout.js
@@ -15,14 +15,20 @@ import { waitForStoreResolvers } from './wait-for-store-resolvers';
  * case any of the inner elements use selectors that are associated with store
  * resolvers.
  *
- * @param {import('react-test-renderer').ReactTestInstance} block           Block test instance to trigger layout event.
- * @param {Object}                                          [options]       Configuration options for the event.
- * @param {number}                                          [options.width] Width value to be passed to the event.
+ * @param {import('react-test-renderer').ReactTestInstance} block                    Block test instance to trigger layout event.
+ * @param {Object}                                          [options]                Configuration options for the event.
+ * @param {number}                                          [options.width]          Width value to be passed to the event.
+ * @param {number}                                          [options.blockListIndex] Block list index, for cases when there is more than one, like in inner blocks.
  */
-export const triggerBlockListLayout = async ( block, { width = 320 } = {} ) =>
+export const triggerBlockListLayout = async (
+	block,
+	{ width = 320, blockListIndex = 0 } = {}
+) =>
 	waitForStoreResolvers( () =>
 		fireEvent(
-			within( block ).getByTestId( 'block-list-wrapper' ),
+			within( block ).getAllByTestId( 'block-list-wrapper' )[
+				blockListIndex
+			],
 			'layout',
 			{
 				nativeEvent: {
diff --git a/test/native/integration-test-helpers/wait-for-modal-visible.js b/test/native/integration-test-helpers/wait-for-modal-visible.js
index 1222fa5748bb9b..045b50a60cdbba 100644
--- a/test/native/integration-test-helpers/wait-for-modal-visible.js
+++ b/test/native/integration-test-helpers/wait-for-modal-visible.js
@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { waitFor } from './wait-for';
+import { waitFor } from '@testing-library/react-native';
 
 /**
  * Waits for a modal to be visible.
@@ -9,5 +9,7 @@ import { waitFor } from './wait-for';
  * @param {import('react-test-renderer').ReactTestInstance} modalInstance Modal test instance.
  */
 export const waitForModalVisible = async ( modalInstance ) => {
-	return waitFor( () => modalInstance.props.isVisible );
+	return waitFor( () =>
+		expect( modalInstance.props.isVisible ).toBe( true )
+	);
 };
diff --git a/test/native/integration-test-helpers/wait-for-store-resolvers.js b/test/native/integration-test-helpers/wait-for-store-resolvers.js
index ce4fa664e1a2c4..ebf2c9cd1a1e74 100644
--- a/test/native/integration-test-helpers/wait-for-store-resolvers.js
+++ b/test/native/integration-test-helpers/wait-for-store-resolvers.js
@@ -25,7 +25,7 @@ export async function waitForStoreResolvers( fn ) {
 		const result = fn();
 
 		// Advance all timers allowing store resolvers to resolve.
-		act( () => jest.runAllTimers() );
+		act( () => jest.runOnlyPendingTimers() );
 
 		// The store resolvers perform several API fetches during editor
 		// initialization. The most straightforward approach to ensure all of them
diff --git a/test/native/integration-test-helpers/wait-for.js b/test/native/integration-test-helpers/wait-for.js
deleted file mode 100644
index 31afcdd1cdb5cf..00000000000000
--- a/test/native/integration-test-helpers/wait-for.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * External dependencies
- */
-import { act } from '@testing-library/react-native';
-
-/**
- * Custom implementation of the "waitFor" utility to
- * prevent the issue: https://git.io/JYYGE
- *
- * @param {Function} cb                 Callback on which to wait.
- * @param {Object}   options            Configuration options for waiting.
- * @param {number}   [options.timeout]  Total time to wait for. If the execution exceeds this time, the call will be considered rejected.
- * @param {number}   [options.interval] Time to wait between calls.
- * @return {*} Result of calling the callback function if it's not rejected.
- */
-export function waitFor(
-	cb,
-	{ timeout, interval } = { timeout: 1000, interval: 50 }
-) {
-	let result;
-	let lastError;
-	const check = ( resolve, reject, time = 0 ) => {
-		try {
-			result = cb();
-		} catch ( error ) {
-			lastError = error;
-		}
-		if ( ! result && time < timeout ) {
-			setTimeout(
-				() => check( resolve, reject, time + interval ),
-				interval
-			);
-			return;
-		}
-		resolve( result );
-	};
-	return new Promise( ( resolve, reject ) =>
-		act(
-			() => new Promise( ( internalResolve ) => check( internalResolve ) )
-		).then( () => {
-			if ( ! result ) {
-				reject(
-					`waitFor timed out after ${ timeout }ms for callback:\n${ cb }\n${ lastError.toString() }`
-				);
-				return;
-			}
-			resolve( result );
-		} )
-	);
-}
diff --git a/test/native/integration-test-helpers/with-fake-timers.js b/test/native/integration-test-helpers/with-fake-timers.js
index bd1e61eeb51cea..bc863e279ddc3a 100644
--- a/test/native/integration-test-helpers/with-fake-timers.js
+++ b/test/native/integration-test-helpers/with-fake-timers.js
@@ -6,7 +6,7 @@
  * @return {*} The result of the function call.
  */
 export async function withFakeTimers( fn ) {
-	const usingFakeTimers = jest.isMockFunction( setTimeout );
+	const usingFakeTimers = getJestFakeTimersType() !== null;
 
 	// Portions of the React Native Animation API rely upon these APIs. However,
 	// Jest's 'legacy' fake timers mutate these globals, which breaks the Animated
@@ -15,7 +15,23 @@ export async function withFakeTimers( fn ) {
 	const cancelAnimationFrameCopy = global.cancelAnimationFrame;
 
 	if ( ! usingFakeTimers ) {
-		jest.useFakeTimers( 'legacy' );
+		jest.useFakeTimers();
+	}
+
+	// `Date.now` returns the real-time even when using fake timers.
+	// Some functions like `debounce` relies on the time returned by this function
+	// for its calculations, which can lead to wrong behaviors when executing timers.
+	// To avoid this, we mock this function and return the time provided Jest fake timers.
+	// Reference: https://jestjs.io/docs/jest-object#jestnow
+	//
+	// Eventually, we could explore using the "modern" fake timers, which would replace
+	// this workaround. However, this won't be possible until upgrading RN to version `0.71`
+	// or above. Once we apply the upgrade, we should consider removing this mock.
+	let dateNowSpy;
+	if ( ! jest.isMockFunction( Date.now ) ) {
+		dateNowSpy = jest
+			.spyOn( Date, 'now' )
+			.mockImplementation( () => jest.now() );
 	}
 
 	const result = await fn();
@@ -26,5 +42,50 @@ export async function withFakeTimers( fn ) {
 		global.requestAnimationFrame = requestAnimationFrameCopy;
 		global.cancelAnimationFrame = cancelAnimationFrameCopy;
 	}
+
+	if ( dateNowSpy ) {
+		dateNowSpy.mockRestore();
+	}
 	return result;
 }
+
+/**
+ * Get the type of Jest fake timers being used.
+ *
+ * @return {string | null} The type of Jest fake timers being used, or null if fake timers are not being used.
+ *
+ * @see https://github.com/callstack/react-native-testing-library/blob/a670b2d4c1fb4df5326a63cb2852f4d6e37756da/src/helpers/timers.ts#L24-L58
+ */
+function getJestFakeTimersType() {
+	if (
+		typeof jest === 'undefined' ||
+		typeof globalObj.setTimeout === 'undefined' ||
+		process.env.RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS
+	) {
+		return null;
+	}
+
+	if (
+		typeof globalObj.setTimeout._isMockFunction !== 'undefined' &&
+		globalObj.setTimeout._isMockFunction
+	) {
+		return 'legacy';
+	}
+
+	if (
+		typeof globalObj.setTimeout.clock !== 'undefined' &&
+		typeof jest.getRealSystemTime !== 'undefined'
+	) {
+		try {
+			// jest.getRealSystemTime is only supported for Jest's `modern` fake timers and otherwise throws
+			jest.getRealSystemTime();
+			return 'modern';
+		} catch {
+			// not using Jest's modern fake timers
+		}
+	}
+
+	return null;
+}
+
+const globalObj = typeof window === 'undefined' ? global : window;
diff --git a/test/native/integration-test-helpers/with-reanimated-timer.js b/test/native/integration-test-helpers/with-reanimated-timer.js
index e9832652d91c6a..9cfb9073ddfedf 100644
--- a/test/native/integration-test-helpers/with-reanimated-timer.js
+++ b/test/native/integration-test-helpers/with-reanimated-timer.js
@@ -6,7 +6,6 @@ import { act } from '@testing-library/react-native';
 /**
  * Internal dependencies
  */
-import { FRAME_TIME } from './constants';
 import { withFakeTimers } from './with-fake-timers';
 
 /**
@@ -21,14 +20,19 @@ import { withFakeTimers } from './with-fake-timers';
  */
 export async function withReanimatedTimer( fn ) {
 	return withFakeTimers( async () => {
-		global.requestAnimationFrame = ( callback ) =>
-			setTimeout( callback, FRAME_TIME );
+		// Reanimated uses a custom `now` function to advance animations. In order to be able to use
+		// Jest timer functions to advance animations we need to set the fake timers' internal clock.
+		// Reference: https://t.ly/0S__f
+		const reanimatedNowMockCopy = global.ReanimatedDataMock.now;
+		global.ReanimatedDataMock.now = jest.now;
 
 		const result = await fn();
 
 		// As part of the clean up, we run all pending timers that might have been derived from animations.
 		act( () => jest.runOnlyPendingTimers() );
 
+		global.ReanimatedDataMock.now = reanimatedNowMockCopy;
+
 		return result;
 	} );
 }
diff --git a/test/native/integration/__snapshots__/blocks-raw-handling.native.js.snap b/test/native/integration/__snapshots__/blocks-raw-handling.native.js.snap
new file mode 100644
index 00000000000000..d55812fa9ff141
--- /dev/null
+++ b/test/native/integration/__snapshots__/blocks-raw-handling.native.js.snap
@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+/*
+exports[`Blocks raw handling pasteHandler apple 1`] = `"<strong>This is a </strong>title<br><br><br><strong>This is a <em>heading</em></strong><br><br><br>This is a <strong>paragraph</strong> with a <a href="https://w.org">link</a>.<br><br><br>A<br>Bulleted<br>Indented<br>List<br><br><br>One<br>Two<br>Three<br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br>An image:<br>"`;
+
+exports[`Blocks raw handling pasteHandler classic 1`] = `"First paragraph<br><br>Second paragraph<br>Third paragraph<br>Fourth paragraph<br>Fifth paragraph<br>Sixth paragraph"`;
+
+exports[`Blocks raw handling pasteHandler evernote 1`] = `"This is a <em>paragraph</em>.<br><br><br>This is a <a href="https://w.org">link</a>.<br><br><br>An<br>Unordered<br>Indented<br>List<br><br><br>One<br>Two<br>Indented<br>Three<br><br><br><br><br><br><br>One<br>Two<br>Three<br>Four<br>Five<br>Six<br><img src="data:image/jpeg;base64,###">"`;
+
+exports[`Blocks raw handling pasteHandler google-docs 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href="https://w.org/">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src="https://lh4.googleusercontent.com/ID" width="544" height="184"><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-list-only 1`] = `"My first list item<br>A sub list item<br>A second sub list item<br>My second list item<br>My third list item"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-colspan 1`] = `"<br><br>Test colspan<br><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-comments 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-table-with-rowspan 1`] = `"<br><br>Test rowspan<br><br>"`;
+
+exports[`Blocks raw handling pasteHandler google-docs-with-comments 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href="https://w.org/">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src="https://lh4.googleusercontent.com/ID" width="544" height="184"><br><br>"`;
+*/
+
+exports[`Blocks raw handling pasteHandler gutenberg 1`] = `"Test"`;
+
+exports[`Blocks raw handling pasteHandler iframe-embed 1`] = `""`;
+
+/*
+exports[`Blocks raw handling pasteHandler markdown 1`] = `"This is a heading with <em>italic</em><br>This is a paragraph with a <a href="https://w.org/">link</a>, <strong>bold</strong>, and <del>strikethrough</del>.<br>Preserve<br>line breaks please.<br>Lists<br>A<br>Bulleted Indented<br>List<br>One<br>Two<br>Three<br>Table<br>First Header<br>Second Header<br>Content from cell 1<br>Content from cell 2<br>Content in the first column<br>Content in the second column<br><br><br><br>Table with empty cells.<br>Quote<br>First<br>Second<br>Code<br>Inline <code>code</code> tags should work.<br><code>This is a code block.</code>"`;
+
+exports[`Blocks raw handling pasteHandler ms-word 1`] = `"This is a title<br>&nbsp;<br>This is a subtitle<br>&nbsp;<br>This is a heading level 1<br>&nbsp;<br>This is a heading level 2<br>&nbsp;<br>This is a <strong>paragraph</strong> with a <a href="https://w.org/">link</a>.<br>&nbsp;<br>A<br>Bulleted<br>Indented<br>List<br>&nbsp;<br>One<br>Two<br>Three<br>&nbsp;<br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br>&nbsp;<br>An image:<br>&nbsp;<br><img width="451" height="338" src="file:LOW-RES.png"><br><a href="#anchor">This is an anchor link</a> that leads to the next paragraph.<br><a id="anchor">This is the paragraph with the anchor.</a><br><a href="#nowhere">This is an anchor link</a> that leads nowhere.<br><a>This is a paragraph with an anchor with no link pointing to it.</a><br>This is a reference to a footnote<a href="#_ftn1" id="_ftnref1">[1]</a>.<br>This is a reference to an endnote<a href="#_edn1" id="_ednref1">[i]</a>.<br><br><br><a href="#_ftnref1" id="_ftn1">[1]</a> This is a footnote.<br><br><br><a href="#_ednref1" id="_edn1">[i]</a> This is an endnote."`;
+
+exports[`Blocks raw handling pasteHandler ms-word-list 1`] = `"<a>This is a headline?</a><br>This is a text:<br>One<br>Two<br>Three<br><a>Lorem Ipsum.</a><br>&nbsp;"`;
+
+exports[`Blocks raw handling pasteHandler ms-word-online 1`] = `"This is a <em>heading</em>&nbsp;<br>This is a <strong>paragraph </strong>with a <a href="https://w.org/" target="_blank" rel="noreferrer noopener">link</a>.&nbsp;<br>A&nbsp;<br>Bulleted&nbsp;<br>Indented&nbsp;<br>List&nbsp;<br>&nbsp;<br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br><br>One&nbsp;<br>Two&nbsp;<br>Three&nbsp;<br>1&nbsp;<br>2&nbsp;<br>3&nbsp;<br>I&nbsp;<br>II&nbsp;<br>III&nbsp;<br>&nbsp;<br>An image:&nbsp;<br><img src="data:image/jpeg;base64,###">&nbsp;"`;
+
+exports[`Blocks raw handling pasteHandler ms-word-styled 1`] = `"<br><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit&nbsp;</strong><br><br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet hendrerit auctor. Nam lobortis, est vel lacinia tincidunt, purus tellus vehicula ex, nec pharetra justo dui sed lorem. Nam congue laoreet massa, quis varius est tincidunt ut."`;
+
+exports[`Blocks raw handling pasteHandler nested-divs 1`] = `"First paragraph<br><br>Second paragraph<br>Third paragraph<br>Fourth paragraph<br>Fifth paragraph<br>Sixth paragraph"`;
+
+exports[`Blocks raw handling pasteHandler one-image 1`] = `"<img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" width="300" height="137">"`;
+
+exports[`Blocks raw handling pasteHandler plain 1`] = `"test<br>test<br><br>test"`;
+
+exports[`Blocks raw handling pasteHandler shortcode-matching 1`] = `"[gallery ids="40,41,42"]<br>[gallery ids="1000"]<br>[gallery ids="42"]"`;
+*/
+
+exports[`Blocks raw handling pasteHandler should remove extra blank lines 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Blocks raw handling pasteHandler should strip HTML formatting space from inline text 1`] = `"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit eget tortor molestie egestas. Donec pretium urna vitae mattis imperdiet. Praesent et lorem iaculis, volutpat odio vitae, ornare lacus. Donec ut felis tristique, pharetra erat id, viverra justo. Integer sit amet elementum arcu, eget pharetra felis. In malesuada enim est, sed placerat nulla feugiat at. Vestibulum feugiat vitae elit sit amet tincidunt. Pellentesque finibus sed dolor non facilisis. Curabitur accumsan ante ac hendrerit vestibulum."`;
+
+exports[`Blocks raw handling pasteHandler should strip some text-level elements 1`] = `
+"<!-- wp:paragraph -->
+<p>This is ncorect</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Blocks raw handling pasteHandler should strip windows data 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Heading Win</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Paragraph Win</p>
+<!-- /wp:paragraph -->"
+`;
+
+/*
+exports[`Blocks raw handling pasteHandler slack-paragraphs 1`] = `"test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a><br>a new line<br><br>a new paragraph<br>another new line<br><br>another paragraph"`;
+
+exports[`Blocks raw handling pasteHandler slack-quote 1`] = `"Test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a>."`;
+
+exports[`Blocks raw handling pasteHandler two-images 1`] = `"<img src="http://localhost/wp-content/uploads/2018/01/Dec-08-2017-15-12-24-17-300x137.gif" alt="" width="300" height="137"> <img src="http://localhost/wp-content/uploads/2018/01/Dec-05-2017-17-52-09-9-300x248.gif" alt="" width="300" height="248">"`;
+
+exports[`Blocks raw handling pasteHandler wordpress 1`] = `"Howdy<br>This is a paragraph.<br>More tag<br><br>Shortcode<br>[gallery ids="1"]<br><img src="block.png" alt=""><br><img src="aligned.png" alt=""> test<br><img src="not-aligned.png" alt=""> test"`;
+*/
+
+exports[`Blocks raw handling should correctly handle quotes with mixed content 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:heading {"level":1,"className":"wp-block-heading"} -->
+<h1 class="wp-block-heading">chicken</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>ribs</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`rawHandler should convert HTML post to blocks with minimal content changes 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Howdy</h2>
+<!-- /wp:heading -->
+
+<!-- wp:image -->
+<figure class="wp-block-image"><img src="https://w.org" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Preserve <span style="color:red">me</span>!</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">More tag</h3>
+<!-- /wp:heading -->
+
+<!-- wp:more -->
+<!--more-->
+<!-- /wp:more -->
+
+<!-- wp:heading {"level":3} -->
+<h3 class="wp-block-heading">Shortcode</h3>
+<!-- /wp:heading -->
+
+<!-- wp:gallery {"columns":3,"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-3 is-cropped"><!-- wp:image {"id":1} -->
+<figure class="wp-block-image"><img alt="" class="wp-image-1"/></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->
+
+<!-- wp:html -->
+<dl>
+	<dt>Term</dt>
+	<dd>
+		Description.
+	</dd>
+</dl>
+<!-- /wp:html -->
+
+<!-- wp:list {"ordered":true} -->
+<ol><!-- wp:list-item -->
+<li>Item</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Text.</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Heading</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Text.</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`rawHandler should convert a caption shortcode 1`] = `
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
+<figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption">test</figcaption></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`rawHandler should convert a caption shortcode with caption 1`] = `
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
+<figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption"><a href="https://w.org">test</a></figcaption></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`rawHandler should convert a caption shortcode with link 1`] = `
+"<!-- wp:image {"id":754,"align":"none"} -->
+<figure class="wp-block-image alignnone"><a href="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg"><img src="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604" alt="Bell on Wharf" class="wp-image-754"/></a><figcaption class="wp-element-caption">Bell on wharf in San Francisco</figcaption></figure>
+<!-- /wp:image -->"
+`;
+
+exports[`rawHandler should convert a list with attributes 1`] = `
+"<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<li>1<!-- wp:list {"ordered":true,"type":"lower-roman","start":2,"reversed":true} -->
+<ol reversed start="2" style="list-style-type:lower-roman"><!-- wp:list-item -->
+<li>1</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`rawHandler should convert to unsupported HTML block when no transformation is available 1`] = `
+"<!-- wp:html -->
+<div><p>Hello world!</p></div>
+<!-- /wp:html -->"
+`;
+
+exports[`rawHandler should not strip any text-level elements 1`] = `
+"<!-- wp:paragraph -->
+<p>This is <u>ncorect</u></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`rawHandler should preserve alignment 1`] = `
+"<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">center</p>
+<!-- /wp:paragraph -->"
+`;
diff --git a/test/native/integration/blocks-raw-handling.native.js b/test/native/integration/blocks-raw-handling.native.js
new file mode 100644
index 00000000000000..6fae0e72be0cac
--- /dev/null
+++ b/test/native/integration/blocks-raw-handling.native.js
@@ -0,0 +1,587 @@
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getBlockContent,
+	pasteHandler,
+	rawHandler,
+	registerBlockType,
+	serialize,
+} from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+function readFile( filePath ) {
+	return fs.existsSync( filePath )
+		? fs.readFileSync( filePath, 'utf8' ).trim()
+		: '';
+}
+
+// Path to the fixtures provided in `gutenberg/test/integration`.
+const fixturesPath = `${ __dirname }/../../integration`;
+
+// NOTE: This file is a clone of the same `blocks-raw-handling.js` file located in
+// `gutenberg/test/integration`. The reason for the separation is that several of
+// the test cases fail in the native version. For now, we are going to skip them, but
+// we'd need to work on them in the future.
+//
+// Once all issues in tests are addressed, we'll remove this file in favor of the
+// original one.
+describe( 'Blocks raw handling', () => {
+	beforeAll( () => {
+		// Load all hooks that modify blocks.
+		require( '../../../packages/editor/src/hooks' );
+		registerCoreBlocks();
+		registerBlockType( 'test/gallery', {
+			title: 'Test Gallery',
+			category: 'text',
+			attributes: {
+				ids: {
+					type: 'array',
+					default: [],
+				},
+			},
+			transforms: {
+				from: [
+					{
+						type: 'shortcode',
+						tag: 'gallery',
+						isMatch( { named: { ids } } ) {
+							return ids.indexOf( 42 ) > -1;
+						},
+						attributes: {
+							ids: {
+								type: 'array',
+								shortcode: ( { named: { ids } } ) =>
+									ids
+										.split( ',' )
+										.map( ( id ) => parseInt( id, 10 ) ),
+							},
+						},
+						priority: 9,
+					},
+				],
+			},
+			save: () => null,
+		} );
+
+		registerBlockType( 'test/non-inline-block', {
+			title: 'Test Non Inline Block',
+			category: 'text',
+			supports: {
+				pasteTextInline: false,
+			},
+			transforms: {
+				from: [
+					{
+						type: 'raw',
+						isMatch: ( node ) => {
+							return (
+								'words to live by' === node.textContent.trim()
+							);
+						},
+						transform: () => {
+							return createBlock( 'core/embed', {
+								url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+							} );
+						},
+					},
+				],
+			},
+			save: () => null,
+		} );
+
+		registerBlockType( 'test/transform-to-multiple-blocks', {
+			title: 'Test Transform to Multiple Blocks',
+			category: 'text',
+			transforms: {
+				from: [
+					{
+						type: 'raw',
+						isMatch: ( node ) => {
+							return node.textContent
+								.split( ' ' )
+								.every( ( chunk ) => /^P\S+?/.test( chunk ) );
+						},
+						transform: ( node ) => {
+							return node.textContent
+								.split( ' ' )
+								.map( ( chunk ) =>
+									createBlock( 'core/paragraph', {
+										content: chunk.substring( 1 ),
+									} )
+								);
+						},
+					},
+				],
+			},
+			save: () => null,
+		} );
+	} );
+
+	it( 'should filter inline content', () => {
+		const filtered = pasteHandler( {
+			HTML: '<h2><em>test</em></h2>',
+			mode: 'INLINE',
+		} );
+
+		expect( filtered ).toBe( '<em>test</em>' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should ignore Google Docs UID tag', () => {
+		const filtered = pasteHandler( {
+			HTML: '<b id="docs-internal-guid-0"><em>test</em></b>',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( '<em>test</em>' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should ignore Google Docs UID tag in inline mode', () => {
+		const filtered = pasteHandler( {
+			HTML: '<b id="docs-internal-guid-0"><em>test</em></b>',
+			mode: 'INLINE',
+		} );
+
+		expect( filtered ).toBe( '<em>test</em>' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should paste special whitespace', () => {
+		const filtered = pasteHandler( {
+			HTML: '<p>&thinsp;</p>',
+			plainText: ' ',
+			mode: 'AUTO',
+		} );
+
+		expect( console ).toHaveLogged();
+		expect( filtered ).toBe( ' ' );
+	} );
+
+	it( 'should paste special whitespace in plain text only', () => {
+		const filtered = pasteHandler( {
+			HTML: '',
+			plainText: ' ',
+			mode: 'AUTO',
+		} );
+
+		expect( console ).toHaveLogged();
+		expect( filtered ).toBe( ' ' );
+	} );
+
+	it( 'should parse Markdown', () => {
+		const filtered = pasteHandler( {
+			HTML: '* one<br>* two<br>* three',
+			plainText: '* one\n* two\n* three',
+			mode: 'AUTO',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( filtered ).toMatchInlineSnapshot( `
+		"<ul class="wp-block-list"><!-- 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>"
+	` );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should parse bulleted list', () => {
+		const filtered = pasteHandler( {
+			HTML: '• one<br>• two<br>• three',
+			plainText: '• one\n• two\n• three',
+			mode: 'AUTO',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( filtered ).toMatchInlineSnapshot( `
+		"<ul class="wp-block-list"><!-- 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>"
+	` );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should parse inline Markdown', () => {
+		const filtered = pasteHandler( {
+			HTML: 'Some **bold** text.',
+			plainText: 'Some **bold** text.',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( 'Some <strong>bold</strong> text.' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should parse HTML in plainText', () => {
+		const filtered = pasteHandler( {
+			HTML: '&lt;p&gt;Some &lt;strong&gt;bold&lt;/strong&gt; text.&lt;/p&gt;',
+			plainText: '<p>Some <strong>bold</strong> text.</p>',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( 'Some <strong>bold</strong> text.' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should parse Markdown with HTML', () => {
+		const filtered = pasteHandler( {
+			HTML: '',
+			plainText: '# Some <em>heading</em>\n\nA paragraph.',
+			mode: 'AUTO',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( filtered ).toBe(
+			'<h1 class="wp-block-heading">Some <em>heading</em></h1><p>A paragraph.</p>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
+	it.skip( 'should break up forced inline content', () => {
+		const filtered = pasteHandler( {
+			HTML: '<p>test</p><p>test</p>',
+			mode: 'INLINE',
+		} );
+
+		expect( filtered ).toBe( 'test<br>test' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should normalize decomposed characters', () => {
+		const filtered = pasteHandler( {
+			HTML: 'schön',
+			mode: 'INLINE',
+		} );
+
+		expect( filtered ).toBe( 'schön' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it.skip( 'should not treat single non-inlineable block as inline text', () => {
+		const filtered = pasteHandler( {
+			HTML: '<p>words to live by</p>',
+			plainText: 'words to live by\n',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toHaveLength( 1 );
+		expect( filtered[ 0 ].name ).toBe( 'core/embed' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should treat single heading as inline text', () => {
+		const filtered = pasteHandler( {
+			HTML: '<h1>FOO</h1>',
+			plainText: 'FOO\n',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( 'FOO' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should treat single list item as inline text', () => {
+		const filtered = pasteHandler( {
+			HTML: '<ul class="wp-block-list"><li>Some <strong>bold</strong> text.</li></ul>',
+			plainText: 'Some <strong>bold</strong> text.\n',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( 'Some <strong>bold</strong> text.' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should treat multiple list items as a block', () => {
+		const filtered = pasteHandler( {
+			HTML: '<ul class="wp-block-list"><li>One</li><li>Two</li><li>Three</li></ul>',
+			plainText: 'One\nTwo\nThree\n',
+			mode: 'AUTO',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( filtered ).toMatchInlineSnapshot( `
+		"<ul class="wp-block-list"><!-- 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>"
+	` );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should correctly handle quotes with mixed content', () => {
+		const filtered = serialize(
+			pasteHandler( {
+				HTML: '<blockquote><h1 class="wp-block-heading">chicken</h1><p>ribs</p></blockquote>',
+				mode: 'AUTO',
+			} )
+		);
+
+		expect( filtered ).toMatchSnapshot();
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should paste gutenberg content from plain text', () => {
+		const block = '<!-- wp:latest-posts /-->';
+		expect(
+			serialize(
+				pasteHandler( {
+					plainText: block,
+					mode: 'AUTO',
+				} )
+			)
+		).toBe( block );
+	} );
+
+	it.skip( 'should handle transforms that return an array of blocks', () => {
+		const transformed = pasteHandler( {
+			HTML: '<p>P1 P2</p>',
+			plainText: 'P1 P2\n',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe( '<p>1</p><p>2</p>' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should convert pre', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre>1\n2</pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-preformatted">1\n2</pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should convert code', () => {
+		const transformed = pasteHandler( {
+			HTML: '<pre><code>1\n2</code></pre>',
+			plainText: '1\n2',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( transformed ).toBe(
+			'<pre class="wp-block-code"><code>1\n2</code></pre>'
+		);
+		expect( console ).toHaveLogged();
+	} );
+
+	describe( 'pasteHandler', () => {
+		// TODO: The cases commented should be eventually addressed and restored.
+		[
+			// 'plain',
+			// 'classic',
+			// 'nested-divs',
+			// 'apple',
+			// 'google-docs',
+			// 'google-docs-list-only',
+			// 'google-docs-table',
+			// 'google-docs-table-with-colspan',
+			// 'google-docs-table-with-rowspan',
+			// 'google-docs-table-with-comments',
+			// 'google-docs-with-comments',
+			// 'ms-word',
+			// 'ms-word-list',
+			// 'ms-word-styled',
+			// 'ms-word-online',
+			// 'evernote',
+			'iframe-embed',
+			// 'one-image',
+			// 'two-images',
+			// 'markdown',
+			// 'wordpress',
+			'gutenberg',
+			// 'shortcode-matching',
+			// 'slack-quote',
+			// 'slack-paragraphs',
+		].forEach( ( type ) => {
+			// eslint-disable-next-line jest/valid-title
+			it( type, () => {
+				const HTML = readFile(
+					path.join(
+						fixturesPath,
+						`fixtures/documents/${ type }-in.html`
+					)
+				);
+				const plainText = readFile(
+					path.join(
+						fixturesPath,
+						`fixtures/documents/${ type }-in.txt`
+					)
+				);
+				const output = readFile(
+					path.join(
+						fixturesPath,
+						`fixtures/documents/${ type }-out.html`
+					)
+				);
+
+				if ( ! ( HTML || plainText ) || ! output ) {
+					throw new Error( `Expected fixtures for type ${ type }` );
+				}
+
+				const converted = pasteHandler( { HTML, plainText } );
+				const serialized =
+					typeof converted === 'string'
+						? converted
+						: serialize( converted );
+
+				expect( serialized ).toBe( output );
+
+				const convertedInline = pasteHandler( {
+					HTML,
+					plainText,
+					mode: 'INLINE',
+				} );
+
+				expect( convertedInline ).toMatchSnapshot();
+				expect( console ).toHaveLogged();
+			} );
+		} );
+
+		it( 'should strip some text-level elements', () => {
+			const HTML = '<p>This is <u>ncorect</u></p>';
+			expect( serialize( pasteHandler( { HTML } ) ) ).toMatchSnapshot();
+			expect( console ).toHaveLogged();
+		} );
+
+		it( 'should remove extra blank lines', () => {
+			const HTML = readFile(
+				path.join(
+					fixturesPath,
+					'fixtures/documents/google-docs-blank-lines.html'
+				)
+			);
+			expect( serialize( pasteHandler( { HTML } ) ) ).toMatchSnapshot();
+			expect( console ).toHaveLogged();
+		} );
+
+		it( 'should strip windows data', () => {
+			const HTML = readFile(
+				path.join( fixturesPath, 'fixtures/documents/windows.html' )
+			);
+			expect( serialize( pasteHandler( { HTML } ) ) ).toMatchSnapshot();
+		} );
+
+		it.skip( 'should strip HTML formatting space from inline text', () => {
+			const HTML = readFile(
+				path.join(
+					fixturesPath,
+					'fixtures/documents/inline-with-html-formatting-space.html'
+				)
+			);
+			expect( pasteHandler( { HTML } ) ).toMatchSnapshot();
+			expect( console ).toHaveLogged();
+		} );
+	} );
+} );
+
+describe( 'rawHandler', () => {
+	it.skip( 'should convert HTML post to blocks with minimal content changes', () => {
+		const HTML = readFile(
+			path.join(
+				fixturesPath,
+				'fixtures/documents/wordpress-convert.html'
+			)
+		);
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should convert a caption shortcode', () => {
+		const HTML = readFile(
+			path.join(
+				fixturesPath,
+				'fixtures/documents/shortcode-caption.html'
+			)
+		);
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should convert a caption shortcode with link', () => {
+		const HTML = readFile(
+			path.join(
+				fixturesPath,
+				'fixtures/documents/shortcode-caption-with-link.html'
+			)
+		);
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should convert a caption shortcode with caption', () => {
+		const HTML = readFile(
+			path.join(
+				fixturesPath,
+				'fixtures/documents/shortcode-caption-with-caption-link.html'
+			)
+		);
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should convert a list with attributes', () => {
+		const HTML = readFile(
+			path.join(
+				fixturesPath,
+				'fixtures/documents/list-with-attributes.html'
+			)
+		);
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should not strip any text-level elements', () => {
+		const HTML = '<p>This is <u>ncorect</u></p>';
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	it.skip( 'should preserve alignment', () => {
+		const HTML = '<p style="text-align:center">center</p>';
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+
+	// This is an extra test added to cover the case fixed in:
+	// `rnmobile/fix/div-tag-convert-to-blocks`.
+	it( 'should convert to unsupported HTML block when no transformation is available', () => {
+		const HTML = '<div><p>Hello world!</p></div>';
+		expect( serialize( rawHandler( { HTML } ) ) ).toMatchSnapshot();
+	} );
+} );
diff --git a/test/native/integration/editor-history.native.js b/test/native/integration/editor-history.native.js
new file mode 100644
index 00000000000000..9b2c212d17ee75
--- /dev/null
+++ b/test/native/integration/editor-history.native.js
@@ -0,0 +1,281 @@
+/**
+ * External dependencies
+ */
+import {
+	act,
+	addBlock,
+	dismissModal,
+	getBlock,
+	typeInRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	selectRangeInRichText,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	subscribeOnUndoPressed,
+	subscribeOnRedoPressed,
+} from '@wordpress/react-native-bridge';
+
+setupCoreBlocks();
+
+describe( 'Editor History', () => {
+	let toggleUndo;
+	let toggleRedo;
+
+	beforeAll( () => {
+		subscribeOnUndoPressed.mockImplementation( ( callback ) => {
+			toggleUndo = () => {
+				act( () => {
+					callback();
+				} );
+			};
+		} );
+		subscribeOnRedoPressed.mockImplementation( ( callback ) => {
+			toggleRedo = () => {
+				act( () => {
+					callback();
+				} );
+			};
+		} );
+	} );
+
+	it( 'should remove and add blocks', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+
+		// Act
+		await addBlock( screen, 'Verse' );
+		await addBlock( screen, 'Image' );
+		await addBlock( screen, 'Paragraph' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:verse -->
+		<pre class="wp-block-verse"></pre>
+		<!-- /wp:verse -->
+
+		<!-- wp:image -->
+		<figure class="wp-block-image"><img alt=""/></figure>
+		<!-- /wp:image -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+		toggleUndo();
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `""` );
+
+		// Act
+		toggleRedo();
+		toggleRedo();
+		toggleRedo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:verse -->
+		<pre class="wp-block-verse"></pre>
+		<!-- /wp:verse -->
+
+		<!-- wp:image -->
+		<figure class="wp-block-image"><img alt=""/></figure>
+		<!-- /wp:image -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should remove and add text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText( paragraphTextInput, 'A quick brown fox' );
+		// Artifical delay to create two history entries for typing
+		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
+		typeInRichText( paragraphTextInput, ' jumps over the lazy dog.' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleRedo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleRedo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should remove and add text formatting', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.',
+			{ finalSelectionStart: 2, finalSelectionEnd: 7 }
+		);
+		// Artifical delay to create two history entries for typing and formatting.
+		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
+		fireEvent.press( screen.getByLabelText( 'Bold' ) );
+		fireEvent.press( screen.getByLabelText( 'Italic' ) );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <strong><em>quick</em></strong> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <strong>quick</strong> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleRedo();
+		toggleRedo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <strong><em>quick</em></strong> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+
+	it( 'should preserve editor history when a link has been added and configured to open in a new tab', async () => {
+		// Arrange
+		const initialHtml = `
+			<!-- wp:paragraph --><p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p><!-- /wp:paragraph -->
+		`;
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		selectRangeInRichText( paragraphTextInput, 2, 7 );
+		fireEvent.press( screen.getByLabelText( 'Link' ) );
+
+		const newTabButton = screen.getByText( 'Open in new tab' );
+		fireEvent.press( newTabButton );
+
+		dismissModal( screen.getByTestId( 'link-settings-modal' ) );
+
+		typeInRichText(
+			paragraphTextInput,
+			' A quick brown fox jumps over the lazy dog.'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">quick</a> brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleUndo();
+		toggleUndo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org">quick</a> brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+
+		// Act
+		toggleRedo();
+		toggleRedo();
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:paragraph -->
+		<p>A <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">quick</a> brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
+} );
diff --git a/test/native/jest.config.js b/test/native/jest.config.js
index a6ccf676882fb2..71232758734feb 100644
--- a/test/native/jest.config.js
+++ b/test/native/jest.config.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 const glob = require( 'glob' ).sync;
+const path = require( 'path' );
 
 const defaultPlatform = 'android';
 const rnPlatform = process.env.TEST_RN_PLATFORM || defaultPlatform;
@@ -13,31 +14,42 @@ if ( process.env.TEST_RN_PLATFORM ) {
 	console.log( 'Setting RN platform to: default (' + defaultPlatform + ')' );
 }
 
-const configPath = 'test/native';
-
-const transpiledPackageNames = glob( '../../packages/*/src/index.{js,ts}' ).map(
-	( fileName ) => fileName.split( '/' )[ 3 ]
+const transpiledPackageNames = glob( 'packages/*/src/index.{js,ts}' ).map(
+	( fileName ) => fileName.split( '/' )[ 1 ]
 );
 
+// The following unit tests related to the `raw-handling` API will be enabled when addressing
+// the various errors we encounter when running them in the native version.
+// Reference: https://github.com/WordPress/gutenberg/issues/55652
+const RAW_HANDLING_UNSUPPORTED_UNIT_TESTS = [
+	'html-formatting-remover',
+	'phrasing-content-reducer',
+	'figure-content-reducer',
+	'normalise-blocks',
+	'image-corrector',
+];
+
 module.exports = {
-	verbose: true,
 	rootDir: '../../',
 	// Automatically clear mock calls and instances between every test.
 	clearMocks: true,
 	preset: 'react-native',
-	setupFiles: [ '<rootDir>/' + configPath + '/setup.js' ],
-	setupFilesAfterEnv: [ '<rootDir>/' + configPath + '/setup-after-env.js' ],
+	setupFiles: [ '<rootDir>/test/native/setup.js' ],
+	setupFilesAfterEnv: [ '<rootDir>/test/native/setup-after-env.js' ],
 	testMatch: [
-		'**/test/!(helper)*.native.[jt]s?(x)',
+		'<rootDir>/test/**/*.native.[jt]s?(x)',
+		'<rootDir>/**/test/!(helper)*.native.[jt]s?(x)',
 		'<rootDir>/packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)',
+		// Enable `raw-handling` API unit tests to check jsdom patches.
+		`<rootDir>/packages/blocks/src/api/raw-handling/**/test/!(${ RAW_HANDLING_UNSUPPORTED_UNIT_TESTS.join(
+			'|'
+		) }).[jt]s?(x)`,
 	],
-	testPathIgnorePatterns: [
-		'/node_modules/',
-		'/__device-tests__/',
-		'<rootDir>/.*/build/',
-		'<rootDir>/.*/build-module/',
-	],
-	testURL: 'http://localhost/',
+	testPathIgnorePatterns: [ '/node_modules/', '/__device-tests__/' ],
+	testEnvironmentOptions: {
+		url: 'http://localhost/',
+	},
+	resolver: '<rootDir>/test/unit/scripts/resolver.js',
 	// Add the `Libraries/Utilities` subfolder to the module directories, otherwise haste/jest doesn't find Platform.js on Travis,
 	// and add it first so https://github.com/facebook/react-native/blob/v0.60.0/Libraries/react-native/react-native-implementation.js#L324-L326 doesn't pick up the Platform npm module.
 	moduleDirectories: [
@@ -45,10 +57,10 @@ module.exports = {
 		'node_modules',
 	],
 	moduleNameMapper: {
-		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
-		'\\.(scss)$': '<rootDir>/' + configPath + '/__mocks__/styleMock.js',
+		// Mock the CSS modules. See https://jestjs.io/docs/webpack#handling-static-assets
+		'\\.(scss)$': '<rootDir>/test/native/__mocks__/styleMock.js',
 		'\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-			'<rootDir>/' + configPath + '/__mocks__/fileMock.js',
+			'<rootDir>/test/native/__mocks__/fileMock.js',
 		[ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]:
 			'<rootDir>/packages/$1/src',
 		'test/helpers$': '<rootDir>/test/native/helpers.js',
@@ -60,6 +72,15 @@ module.exports = {
 		defaultPlatform: rnPlatform,
 		platforms: [ 'android', 'ios', 'native' ],
 	},
+	transform: {
+		'\\.[jt]sx?$': [
+			'babel-jest',
+			// https://git.io/JYiYc
+			{
+				configFile: path.resolve( __dirname, 'babel.config.js' ),
+			},
+		],
+	},
 	transformIgnorePatterns: [
 		// This is required for now to have jest transform some of our modules
 		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/257#discussion_r234978268
@@ -68,5 +89,13 @@ module.exports = {
 		'node_modules/(?!(simple-html-tokenizer|(jest-)?react-native|@react-native|react-clone-referenced-element|@react-navigation))',
 	],
 	snapshotSerializers: [ '@emotion/jest/serializer' ],
+	snapshotFormat: {
+		escapeString: false,
+		printBasicPrototype: false,
+	},
 	reporters: [ 'default', 'jest-junit' ],
+	watchPlugins: [
+		'jest-watch-typeahead/filename',
+		'jest-watch-typeahead/testname',
+	],
 };
diff --git a/test/native/setup-after-env.js b/test/native/setup-after-env.js
index 5e71eb5dbd861f..bddd547faf5b80 100644
--- a/test/native/setup-after-env.js
+++ b/test/native/setup-after-env.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import '@wordpress/jest-console';
+
 /**
  * Internal dependencies
  */
diff --git a/test/native/setup.js b/test/native/setup.js
index d65865e9da395c..e93d2248bd03cb 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import 'react-native-gesture-handler/jestSetup';
-import { Image, NativeModules as RNNativeModules } from 'react-native';
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
+import { Image, Linking } from 'react-native';
 
 // React Native sets up a global navigator, but that is not executed in the
 // testing environment: https://github.com/facebook/react-native/blob/6c19dc3266b84f47a076b647a1c93b3c3b69d2c5/Libraries/Core/setUpNavigator.js#L17
@@ -13,27 +14,43 @@ global.navigator = global.navigator ?? {};
 require( '../../packages/react-native-editor/src/globals' );
 
 // Set up Reanimated library for testing
-require( 'react-native-reanimated/lib/reanimated2/jestUtils' ).setUpTests();
+require( 'react-native-reanimated' ).setUpTests();
 global.__reanimatedWorkletInit = jest.fn();
+global.ReanimatedDataMock = {
+	now: () => 0,
+};
 
-RNNativeModules.UIManager = RNNativeModules.UIManager || {};
-RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
-RNNativeModules.RNGestureHandlerModule =
-	RNNativeModules.RNGestureHandlerModule || {
-		State: {
-			BEGAN: 'BEGAN',
-			FAILED: 'FAILED',
-			ACTIVE: 'ACTIVE',
-			END: 'END',
-		},
-		attachGestureHandler: jest.fn(),
-		createGestureHandler: jest.fn(),
-		dropGestureHandler: jest.fn(),
-		updateGestureHandler: jest.fn(),
+jest.mock( 'react-native', () => {
+	const ReactNative = jest.requireActual( 'react-native' );
+	const RNNativeModules = ReactNative.NativeModules;
+
+	// Mock React Native modules
+	RNNativeModules.UIManager = RNNativeModules.UIManager || {};
+	RNNativeModules.UIManager.RCTView = RNNativeModules.UIManager.RCTView || {};
+	RNNativeModules.RNGestureHandlerModule =
+		RNNativeModules.RNGestureHandlerModule || {
+			State: {
+				BEGAN: 'BEGAN',
+				FAILED: 'FAILED',
+				ACTIVE: 'ACTIVE',
+				END: 'END',
+			},
+			attachGestureHandler: jest.fn(),
+			createGestureHandler: jest.fn(),
+			dropGestureHandler: jest.fn(),
+			updateGestureHandler: jest.fn(),
+		};
+	RNNativeModules.PlatformConstants = RNNativeModules.PlatformConstants || {
+		forceTouchAvailable: false,
 	};
-RNNativeModules.PlatformConstants = RNNativeModules.PlatformConstants || {
-	forceTouchAvailable: false,
-};
+
+	// Mock WebView native module from `react-native-webview`
+	RNNativeModules.RNCWebView = {
+		isFileUploadSupported: jest.fn(),
+	};
+
+	return ReactNative;
+} );
 
 // Mock component to render with props rather than merely a string name so that
 // we may assert against it. ...args is used avoid warnings about ignoring
@@ -64,6 +81,7 @@ jest.mock( '@wordpress/api-fetch', () => {
 jest.mock( '@wordpress/react-native-bridge', () => {
 	return {
 		addEventListener: jest.fn(),
+		logException: jest.fn(),
 		mediaUploadSync: jest.fn(),
 		removeEventListener: jest.fn(),
 		requestBlockTypeImpressions: jest.fn( ( callback ) => {
@@ -79,6 +97,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeSetFocusOnTitle: jest.fn(),
 		subscribeUpdateHtml: jest.fn(),
 		subscribeFeaturedImageIdNativeUpdated: jest.fn(),
+		subscribePostSaveEvent: jest.fn(),
 		subscribeMediaAppend: jest.fn(),
 		subscribeAndroidModalClosed: jest.fn(),
 		subscribeUpdateEditorSettings: jest.fn(),
@@ -87,7 +106,14 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		subscribeShowNotice: jest.fn(),
 		subscribeParentGetHtml: jest.fn(),
 		subscribeShowEditorHelp: jest.fn(),
+		subscribeOnUndoPressed: jest.fn(),
+		subscribeOnRedoPressed: jest.fn(),
+		subscribeConnectionStatus: jest.fn( () => ( { remove: jest.fn() } ) ),
+		subscribeToContentUpdate: jest.fn(),
+		requestConnectionStatus: jest.fn( ( callback ) => callback( true ) ),
 		editorDidMount: jest.fn(),
+		showAndroidSoftKeyboard: jest.fn(),
+		hideAndroidSoftKeyboard: jest.fn(),
 		editorDidAutosave: jest.fn(),
 		subscribeMediaUpload: jest.fn(),
 		subscribeMediaSave: jest.fn(),
@@ -95,8 +121,10 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		provideToNative_Html: jest.fn(),
 		requestImageFailedRetryDialog: jest.fn(),
 		requestImageUploadCancelDialog: jest.fn(),
+		requestImageUploadCancel: jest.fn(),
 		requestMediaEditor: jest.fn(),
 		requestMediaPicker: jest.fn(),
+		requestMediaImport: jest.fn(),
 		requestUnsupportedBlockFallback: jest.fn(),
 		subscribeReplaceBlock: jest.fn(),
 		mediaSources: {
@@ -107,6 +135,12 @@ jest.mock( '@wordpress/react-native-bridge', () => {
 		fetchRequest: jest.fn(),
 		requestPreview: jest.fn(),
 		generateHapticFeedback: jest.fn(),
+		toggleUndoButton: jest.fn(),
+		toggleRedoButton: jest.fn(),
+		sendActionButtonPressedAction: jest.fn(),
+		actionButtons: {
+			missingBlockAlertActionButton: 'missing_block_alert_action_button',
+		},
 	};
 } );
 
@@ -116,19 +150,28 @@ jest.mock(
 		props.isVisible ? mockComponent( 'Modal' )( props ) : null
 );
 
-jest.mock( 'react-native-hr', () => () => 'Hr' );
-
 jest.mock( 'react-native-svg', () => {
+	const { forwardRef } = require( 'react' );
 	return {
-		Svg: () => 'Svg',
+		Svg: forwardRef( mockComponent( 'Svg' ) ),
 		Path: () => 'Path',
 		Circle: () => 'Circle',
 		G: () => 'G',
 		Polygon: () => 'Polygon',
 		Rect: () => 'Rect',
+		SvgXml: jest.fn(),
 	};
 } );
 
+jest.mock(
+	'react-native-video',
+	() => {
+		const { forwardRef } = require( 'react' );
+		return forwardRef( mockComponent( 'ReactNativeVideo' ) );
+	},
+	{ virtual: true }
+);
+
 jest.mock( 'react-native-safe-area', () => {
 	const addEventListener = jest.fn();
 	addEventListener.mockReturnValue( { remove: () => {} } );
@@ -143,21 +186,7 @@ jest.mock( 'react-native-safe-area', () => {
 	};
 } );
 
-// To be replaced with built in mocks when we upgrade to the latest version
-jest.mock( 'react-native-safe-area-context', () => {
-	const inset = { top: 0, right: 0, bottom: 0, left: 0 };
-	const frame = { x: 0, y: 0, width: 0, height: 0 };
-	return {
-		SafeAreaProvider: jest
-			.fn()
-			.mockImplementation( ( { children } ) => children ),
-		SafeAreaConsumer: jest
-			.fn()
-			.mockImplementation( ( { children } ) => children( inset ) ),
-		useSafeAreaInsets: jest.fn().mockImplementation( () => inset ),
-		useSafeAreaFrame: jest.fn().mockImplementation( () => frame ),
-	};
-} );
+jest.mock( 'react-native-safe-area-context', () => mockSafeAreaContext );
 
 jest.mock(
 	'@react-native-community/slider',
@@ -172,9 +201,11 @@ jest.mock( 'react-native-linear-gradient', () => () => 'LinearGradient', {
 	virtual: true,
 } );
 
-jest.mock( 'react-native-hsv-color-picker', () => () => 'HsvColorPicker', {
-	virtual: true,
-} );
+jest.mock(
+	'react-native-hsv-color-picker',
+	() => jest.fn( () => 'HsvColorPicker' ),
+	{ virtual: true }
+);
 
 jest.mock( '@react-native-community/blur', () => () => 'BlurView', {
 	virtual: true,
@@ -214,6 +245,10 @@ jest.mock(
 		},
 	} )
 );
+jest.mock( 'react-native/Libraries/ActionSheetIOS/ActionSheetIOS', () => ( {
+	showActionSheetWithOptions: jest.fn(),
+} ) );
+Linking.addEventListener.mockReturnValue( { remove: jest.fn() } );
 
 // The mock provided by the package itself does not appear to work correctly.
 // Specifically, the mock provides a named export, where the module itself uses
@@ -251,3 +286,17 @@ jest.mock( '@wordpress/compose', () => {
 jest.spyOn( Image, 'getSize' ).mockImplementation( ( url, success ) =>
 	success( 0, 0 )
 );
+
+jest.spyOn( Image, 'prefetch' ).mockImplementation(
+	( url, callback = () => {} ) => {
+		const mockRequestId = `mockRequestId-${ url }`;
+		callback( mockRequestId );
+		return Promise.resolve( true );
+	}
+);
+
+jest.mock( 'react-native/Libraries/Utilities/BackHandler', () => {
+	return jest.requireActual(
+		'react-native/Libraries/Utilities/__mocks__/BackHandler.js'
+	);
+} );
diff --git a/packages/e2e-tests/assets/large-post.html b/test/performance/assets/large-post.html
similarity index 100%
rename from packages/e2e-tests/assets/large-post.html
rename to test/performance/assets/large-post.html
diff --git a/test/performance/assets/small-post-with-containers.html b/test/performance/assets/small-post-with-containers.html
new file mode 100644
index 00000000000000..f5d32011602dcd
--- /dev/null
+++ b/test/performance/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/test/performance/config/global-setup.ts b/test/performance/config/global-setup.ts
new file mode 100644
index 00000000000000..787488ac72fcab
--- /dev/null
+++ b/test/performance/config/global-setup.ts
@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { request } from '@playwright/test';
+import type { FullConfig } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
+
+async function globalSetup( config: FullConfig ) {
+	const { storageState, baseURL } = config.projects[ 0 ].use;
+	const storageStatePath =
+		typeof storageState === 'string' ? storageState : undefined;
+
+	const requestContext = await request.newContext( {
+		baseURL,
+	} );
+
+	const requestUtils = new RequestUtils( requestContext, {
+		storageStatePath,
+	} );
+
+	// Authenticate and save the storageState to disk.
+	await requestUtils.setupRest();
+
+	// Reset the test environment before running the tests.
+	await Promise.all( [
+		requestUtils.activateTheme( 'twentytwentyone' ),
+		// Disable this test plugin as it's conflicting with some of the tests.
+		// We already have reduced motion enabled and Playwright will wait for most of the animations anyway.
+		requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-disables-the-css-animations'
+		),
+		requestUtils.deleteAllPosts(),
+		requestUtils.deleteAllBlocks(),
+		requestUtils.resetPreferences(),
+	] );
+
+	await requestContext.dispose();
+}
+
+export default globalSetup;
diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts
new file mode 100644
index 00000000000000..999047bdb09b53
--- /dev/null
+++ b/test/performance/config/performance-reporter.ts
@@ -0,0 +1,232 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import { writeFileSync } from 'fs';
+import type {
+	Reporter,
+	FullResult,
+	TestCase,
+	TestResult,
+} from '@playwright/test/reporter';
+
+/**
+ * Internal dependencies
+ */
+import { stats, round } from '../utils';
+
+export interface WPRawPerformanceResults {
+	timeToFirstByte: number[];
+	largestContentfulPaint: number[];
+	lcpMinusTtfb: number[];
+	serverResponse: number[];
+	firstPaint: number[];
+	domContentLoaded: number[];
+	loaded: number[];
+	firstContentfulPaint: number[];
+	firstBlock: number[];
+	type: number[];
+	typeWithoutInspector: number[];
+	typeWithTopToolbar: number[];
+	typeContainer: number[];
+	focus: number[];
+	inserterOpen: number[];
+	inserterSearch: number[];
+	inserterHover: number[];
+	loadPatterns: number[];
+	loadPages: number[];
+	listViewOpen: number[];
+	navigate: number[];
+	wpBeforeTemplate: number[];
+	wpTemplate: number[];
+	wpTotal: number[];
+	wpMemoryUsage: number[];
+	wpDbQueries: number[];
+}
+
+type PerformanceStats = {
+	q25: number;
+	q50: number;
+	q75: number;
+	cnt: number; // number of data points
+};
+
+export interface WPPerformanceResults {
+	timeToFirstByte?: PerformanceStats;
+	largestContentfulPaint?: PerformanceStats;
+	lcpMinusTtfb?: PerformanceStats;
+	serverResponse?: PerformanceStats;
+	firstPaint?: PerformanceStats;
+	domContentLoaded?: PerformanceStats;
+	loaded?: PerformanceStats;
+	firstContentfulPaint?: PerformanceStats;
+	firstBlock?: PerformanceStats;
+	type?: PerformanceStats;
+	typeWithoutInspector?: PerformanceStats;
+	typeWithTopToolbar?: PerformanceStats;
+	typeContainer?: PerformanceStats;
+	focus?: PerformanceStats;
+	inserterOpen?: PerformanceStats;
+	inserterSearch?: PerformanceStats;
+	inserterHover?: PerformanceStats;
+	loadPatterns?: PerformanceStats;
+	loadPages?: PerformanceStats;
+	listViewOpen?: PerformanceStats;
+	navigate?: PerformanceStats;
+	wpBeforeTemplate?: PerformanceStats;
+	wpTemplate?: PerformanceStats;
+	wpTotal?: PerformanceStats;
+	wpMemoryUsage?: PerformanceStats;
+	wpDbQueries?: PerformanceStats;
+}
+
+/**
+ * Curate the raw performance results.
+ *
+ * @param results Raw results.
+ * @return Curated statistics for the results.
+ */
+export function curateResults(
+	results: WPRawPerformanceResults
+): WPPerformanceResults {
+	const output = {
+		timeToFirstByte: stats( results.timeToFirstByte ),
+		largestContentfulPaint: stats( results.largestContentfulPaint ),
+		lcpMinusTtfb: stats( results.lcpMinusTtfb ),
+		serverResponse: stats( results.serverResponse ),
+		firstPaint: stats( results.firstPaint ),
+		domContentLoaded: stats( results.domContentLoaded ),
+		loaded: stats( results.loaded ),
+		firstContentfulPaint: stats( results.firstContentfulPaint ),
+		firstBlock: stats( results.firstBlock ),
+		type: stats( results.type ),
+		typeWithoutInspector: stats( results.typeWithoutInspector ),
+		typeWithTopToolbar: stats( results.typeWithTopToolbar ),
+		typeContainer: stats( results.typeContainer ),
+		focus: stats( results.focus ),
+		inserterOpen: stats( results.inserterOpen ),
+		inserterSearch: stats( results.inserterSearch ),
+		inserterHover: stats( results.inserterHover ),
+		loadPatterns: stats( results.loadPatterns ),
+		loadPages: stats( results.loadPages ),
+		listViewOpen: stats( results.listViewOpen ),
+		navigate: stats( results.navigate ),
+		wpBeforeTemplate: stats( results.wpBeforeTemplate ),
+		wpTemplate: stats( results.wpTemplate ),
+		wpTotal: stats( results.wpTotal ),
+		wpMemoryUsage: stats( results.wpMemoryUsage ),
+		wpDbQueries: stats( results.wpDbQueries ),
+	};
+
+	return Object.fromEntries(
+		Object.entries( output )
+			// Reduce the output to contain taken metrics only.
+			.filter( ( [ , value ] ) => value !== undefined )
+	);
+}
+
+function formatValue( metric: string, value: number ) {
+	if ( 'wpMemoryUsage' === metric ) {
+		return `${ ( value / Math.pow( 10, 6 ) ).toFixed( 2 ) } MB`;
+	}
+
+	if ( 'wpDbQueries' === metric ) {
+		return value.toString();
+	}
+
+	return `${ value } ms`;
+}
+
+class PerformanceReporter implements Reporter {
+	private results: Record< string, WPPerformanceResults >;
+
+	constructor() {
+		this.results = {};
+	}
+
+	onTestEnd( test: TestCase, result: TestResult ): void {
+		for ( const attachment of result.attachments ) {
+			if ( attachment.name !== 'results' ) {
+				continue;
+			}
+
+			if ( ! attachment.body ) {
+				throw new Error( 'Empty results attachment' );
+			}
+
+			const testSuite = path.basename( test.location.file, '.spec.js' );
+			const resultsId = process.env.RESULTS_ID || testSuite;
+			const resultsPath = process.env.WP_ARTIFACTS_PATH as string;
+			const resultsBody = attachment.body.toString();
+
+			// Save raw results to file.
+			writeFileSync(
+				path.join(
+					resultsPath,
+					`${ resultsId }.performance-results.raw.json`
+				),
+				resultsBody
+			);
+
+			const curatedResults = curateResults( JSON.parse( resultsBody ) );
+
+			// Save curated results to file.
+			writeFileSync(
+				path.join(
+					resultsPath,
+					`${ resultsId }.performance-results.json`
+				),
+				JSON.stringify( curatedResults, null, 2 )
+			);
+
+			this.results[ testSuite ] = curatedResults;
+		}
+	}
+
+	onEnd( result: FullResult ) {
+		if ( result.status !== 'passed' ) {
+			return;
+		}
+
+		if ( process.env.CI ) {
+			return;
+		}
+
+		// Print the results.
+		for ( const [ testSuite, results ] of Object.entries( this.results ) ) {
+			const printableResults: Record< string, { value: string } > = {};
+
+			for ( const [ metric, value ] of Object.entries( results ) ) {
+				const valueStr = formatValue( metric, value.q50 );
+				const pp = round(
+					( 100 * ( value.q75 - value.q50 ) ) / value.q50
+				);
+				const mp = round(
+					( 100 * ( value.q50 - value.q25 ) ) / value.q50
+				);
+				printableResults[ metric ] = {
+					value: `${ valueStr } +${ pp }% -${ mp }%`,
+				};
+			}
+
+			// eslint-disable-next-line no-console
+			console.log( `\n${ testSuite }\n` );
+			// eslint-disable-next-line no-console
+			console.table( printableResults );
+		}
+	}
+
+	printsToStdio() {
+		return true;
+	}
+
+	onStdOut( chunk: string | Buffer ) {
+		process.stdout.write( chunk );
+	}
+
+	onStdErr( chunk: string | Buffer ) {
+		process.stderr.write( chunk );
+	}
+}
+
+export default PerformanceReporter;
diff --git a/test/performance/fixtures/index.js b/test/performance/fixtures/index.js
new file mode 100644
index 00000000000000..0f68fc5637f5ab
--- /dev/null
+++ b/test/performance/fixtures/index.js
@@ -0,0 +1 @@
+export { PerfUtils } from './perf-utils';
diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts
new file mode 100644
index 00000000000000..8d23d91ff91bfd
--- /dev/null
+++ b/test/performance/fixtures/perf-utils.ts
@@ -0,0 +1,199 @@
+/**
+ * WordPress dependencies
+ */
+import { expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * External dependencies
+ */
+import fs from 'fs';
+import path from 'path';
+import type { Locator, Page } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import { readFile } from '../utils.js';
+
+type PerfUtilsConstructorProps = {
+	page: Page;
+};
+
+export class PerfUtils {
+	page: Page;
+
+	constructor( { page }: PerfUtilsConstructorProps ) {
+		this.page = page;
+	}
+
+	/**
+	 * Returns the locator for the editor canvas element. This supports both the
+	 * legacy and the iframed canvas.
+	 *
+	 * @param canvasLocator
+	 * @return Locator for the editor canvas element.
+	 */
+	async getCanvas(
+		canvasLocator = this.page.locator(
+			'.wp-block-post-content, iframe[name=editor-canvas]'
+		)
+	) {
+		const isFramed = await canvasLocator.evaluate(
+			( node ) => node.tagName === 'IFRAME'
+		);
+
+		if ( isFramed ) {
+			return canvasLocator.frameLocator( ':scope' );
+		}
+
+		return canvasLocator;
+	}
+
+	/**
+	 * Saves the post as a draft and returns its URL.
+	 *
+	 * @return URL of the saved draft.
+	 */
+	async saveDraft() {
+		await this.page.getByRole( 'button', { name: 'Save draft' } ).click();
+		await expect(
+			this.page.getByRole( 'button', { name: 'Saved' } )
+		).toBeDisabled();
+
+		const postId = new URL( this.page.url() ).searchParams.get( 'post' );
+
+		return postId;
+	}
+
+	/**
+	 * Disables the editor autosave function.
+	 */
+	async disableAutosave() {
+		await this.page.waitForFunction( () => window?.wp?.data );
+
+		await this.page.evaluate( () => {
+			return window.wp.data
+				.dispatch( 'core/editor' )
+				.updateEditorSettings( {
+					autosaveInterval: 100000000000,
+					localAutosaveInterval: 100000000000,
+				} );
+		} );
+	}
+
+	/**
+	 * Enters the Site Editor's edit mode.
+	 *
+	 * @return Locator for the editor canvas element.
+	 */
+	async enterSiteEditorEditMode() {
+		const canvas = await this.getCanvas();
+
+		await canvas.locator( 'body' ).click();
+		await canvas
+			.getByRole( 'document', { name: /Block:( Post)? Content/ } )
+			.click();
+
+		return canvas;
+	}
+
+	/**
+	 * Change the rendering mode of the editor.
+	 *
+	 * Setting the rendering mode to something other than the default is sometimes
+	 * needed when for example we want to update the contents of the editor from a
+	 * HTML file. Calling the resetBlocks method of the core/block-editor store will
+	 * replace the contents of the template if the rendering mode is not post-only.
+	 * So this should always be called before the resetBlocks method is used.
+	 *
+	 * @param newRenderingMode Rendering mode to set
+	 *
+	 * @return Promise<void>
+	 */
+	async setRenderingMode( newRenderingMode: string ) {
+		await this.page.evaluate( ( _newRenderingMode ) => {
+			const { dispatch } = window.wp.data;
+			dispatch( 'core/editor' ).setRenderingMode( _newRenderingMode );
+		}, newRenderingMode );
+	}
+
+	/**
+	 * Loads blocks from the small post with containers fixture into the editor
+	 * canvas.
+	 */
+	async loadBlocksForSmallPostWithContainers() {
+		return await this.loadBlocksFromHtml(
+			path.join(
+				process.env.ASSETS_PATH!,
+				'small-post-with-containers.html'
+			)
+		);
+	}
+
+	/**
+	 * Loads blocks from the large post fixture into the editor canvas.
+	 */
+	async loadBlocksForLargePost() {
+		return await this.loadBlocksFromHtml(
+			path.join( process.env.ASSETS_PATH!, 'large-post.html' )
+		);
+	}
+
+	/**
+	 * Loads blocks from an HTML fixture with given path into the editor canvas.
+	 *
+	 * @param filepath Path to the HTML fixture.
+	 */
+	async loadBlocksFromHtml( filepath: string ) {
+		if ( ! fs.existsSync( filepath ) ) {
+			throw new Error( `File not found: ${ filepath }` );
+		}
+
+		await this.page.waitForFunction(
+			() => window?.wp?.blocks && window?.wp?.data
+		);
+
+		return await this.page.evaluate( ( html: string ) => {
+			const { parse } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = parse( html );
+
+			blocks.forEach( ( block: any ) => {
+				if ( block.name === 'core/image' ) {
+					delete block.attributes.id;
+					delete block.attributes.url;
+				}
+			} );
+
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		}, readFile( filepath ) );
+	}
+
+	/**
+	 * Generates and loads a 1000 paragraphs into the editor canvas.
+	 */
+	async load1000Paragraphs() {
+		await this.page.waitForFunction(
+			() => window?.wp?.blocks && window?.wp?.data
+		);
+
+		await this.page.evaluate( () => {
+			const { createBlock } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = Array.from( { length: 1000 } ).map( () =>
+				createBlock( 'core/paragraph', { content: 'paragraph' } )
+			);
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		} );
+	}
+
+	async expectExpandedState( locator: Locator, state: 'true' | 'false' ) {
+		return await Promise.any( [
+			// eslint-disable-next-line playwright/missing-playwright-await
+			expect( locator ).toHaveAttribute( 'aria-expanded', state ),
+			// Legacy selector.
+			// eslint-disable-next-line playwright/missing-playwright-await
+			expect( locator ).toHaveAttribute( 'aria-pressed', state ),
+		] );
+	}
+}
diff --git a/test/performance/playwright.config.ts b/test/performance/playwright.config.ts
new file mode 100644
index 00000000000000..fafca3a589122f
--- /dev/null
+++ b/test/performance/playwright.config.ts
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { defineConfig } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+const baseConfig = require( '@wordpress/scripts/config/playwright.config' );
+
+process.env.ASSETS_PATH = path.join( __dirname, 'assets' );
+
+const config = defineConfig( {
+	...baseConfig,
+	reporter: [ [ 'list' ], [ './config/performance-reporter.ts' ] ],
+	forbidOnly: !! process.env.CI,
+	fullyParallel: false,
+	retries: 0,
+	timeout: parseInt( process.env.TIMEOUT || '', 10 ) || 600_000, // Defaults to 10 minutes.
+	reportSlowTests: null,
+	globalSetup: fileURLToPath(
+		new URL( './config/global-setup.ts', 'file:' + __filename ).href
+	),
+	use: {
+		...baseConfig.use,
+		actionTimeout: 120_000, // 2 minutes.
+		video: 'off',
+	},
+} );
+
+export default config;
diff --git a/test/performance/specs/front-end-block-theme.spec.js b/test/performance/specs/front-end-block-theme.spec.js
new file mode 100644
index 00000000000000..8a0f7b6cf391a2
--- /dev/null
+++ b/test/performance/specs/front-end-block-theme.spec.js
@@ -0,0 +1,67 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
+
+const results = {
+	timeToFirstByte: [],
+	largestContentfulPaint: [],
+	lcpMinusTtfb: [],
+};
+
+test.describe( 'Front End Performance', () => {
+	test.use( {
+		storageState: {}, // User will be logged out.
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentythree' );
+	} );
+
+	test.afterAll( async ( { requestUtils }, testInfo ) => {
+		await testInfo.attach( 'results', {
+			body: JSON.stringify( results, null, 2 ),
+			contentType: 'application/json',
+		} );
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	const samples = 16;
+	const throwaway = 0;
+	const iterations = samples + throwaway;
+	for ( let i = 1; i <= iterations; i++ ) {
+		test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
+			page,
+			metrics,
+		} ) => {
+			// Go to the base URL.
+			// eslint-disable-next-line playwright/no-networkidle
+			await page.goto( '/', { waitUntil: 'networkidle' } );
+
+			// Take the measurements.
+			const ttfb = await metrics.getTimeToFirstByte();
+			const lcp = await metrics.getLargestContentfulPaint();
+
+			// Save the results.
+			if ( i > throwaway ) {
+				results.largestContentfulPaint.push( lcp );
+				results.timeToFirstByte.push( ttfb );
+				results.lcpMinusTtfb.push( lcp - ttfb );
+
+				const serverTiming = await metrics.getServerTiming();
+
+				for ( const [ key, value ] of Object.entries( serverTiming ) ) {
+					results[ key ] ??= [];
+					results[ key ].push( value );
+				}
+			}
+		} );
+	}
+} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/front-end-classic-theme.spec.js b/test/performance/specs/front-end-classic-theme.spec.js
new file mode 100644
index 00000000000000..64929086079fe6
--- /dev/null
+++ b/test/performance/specs/front-end-classic-theme.spec.js
@@ -0,0 +1,66 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
+
+const results = {
+	timeToFirstByte: [],
+	largestContentfulPaint: [],
+	lcpMinusTtfb: [],
+};
+
+test.describe( 'Front End Performance', () => {
+	test.use( {
+		storageState: {}, // User will be logged out.
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterAll( async ( {}, testInfo ) => {
+		await testInfo.attach( 'results', {
+			body: JSON.stringify( results, null, 2 ),
+			contentType: 'application/json',
+		} );
+	} );
+
+	const samples = 16;
+	const throwaway = 0;
+	const iterations = samples + throwaway;
+	for ( let i = 1; i <= iterations; i++ ) {
+		test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ iterations })`, async ( {
+			page,
+			metrics,
+		} ) => {
+			// Go to the base URL.
+			// eslint-disable-next-line playwright/no-networkidle
+			await page.goto( '/', { waitUntil: 'networkidle' } );
+
+			// Take the measurements.
+			const ttfb = await metrics.getTimeToFirstByte();
+			const lcp = await metrics.getLargestContentfulPaint();
+
+			// Save the results.
+			if ( i > throwaway ) {
+				results.largestContentfulPaint.push( lcp );
+				results.timeToFirstByte.push( ttfb );
+				results.lcpMinusTtfb.push( lcp - ttfb );
+
+				const serverTiming = await metrics.getServerTiming();
+
+				for ( const [ key, value ] of Object.entries( serverTiming ) ) {
+					results[ key ] ??= [];
+					results[ key ].push( value );
+				}
+			}
+		} );
+	}
+} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
new file mode 100644
index 00000000000000..85d334749f6f51
--- /dev/null
+++ b/test/performance/specs/post-editor.spec.js
@@ -0,0 +1,720 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { PerfUtils } from '../fixtures';
+import { sum } from '../utils.js';
+
+// See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
+const BROWSER_IDLE_WAIT = 1000;
+
+const results = {
+	serverResponse: [],
+	firstPaint: [],
+	domContentLoaded: [],
+	loaded: [],
+	firstContentfulPaint: [],
+	firstBlock: [],
+	type: [],
+	typeWithoutInspector: [],
+	typeWithTopToolbar: [],
+	typeContainer: [],
+	focus: [],
+	listViewOpen: [],
+	inserterOpen: [],
+	inserterHover: [],
+	inserterSearch: [],
+	loadPatterns: [],
+};
+
+test.describe( 'Post Editor Performance', () => {
+	test.use( {
+		perfUtils: async ( { page }, use ) => {
+			await use( new PerfUtils( { page } ) );
+		},
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
+	test.afterAll( async ( {}, testInfo ) => {
+		await testInfo.attach( 'results', {
+			body: JSON.stringify( results, null, 2 ),
+			contentType: 'application/json',
+		} );
+	} );
+
+	test.describe( 'Loading', () => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		const samples = 10;
+		const throwaway = 1;
+		const iterations = samples + throwaway;
+		for ( let i = 1; i <= iterations; i++ ) {
+			test( `Run the test (${ i } of ${ iterations })`, async ( {
+				admin,
+				perfUtils,
+				metrics,
+			} ) => {
+				// Open the test draft.
+				await admin.editPost( draftId );
+				const canvas = await perfUtils.getCanvas();
+
+				// Wait for the first block.
+				await canvas.locator( '.wp-block' ).first().waitFor();
+
+				// Get the durations.
+				const loadingDurations = await metrics.getLoadingDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					Object.entries( loadingDurations ).forEach(
+						( [ metric, duration ] ) => {
+							if ( metric === 'timeSinceResponseEnd' ) {
+								results.firstBlock.push( duration );
+							} else {
+								results[ metric ].push( duration );
+							}
+						}
+					);
+
+					const serverTiming = await metrics.getServerTiming();
+
+					for ( const [ key, value ] of Object.entries(
+						serverTiming
+					) ) {
+						results[ key ] ??= [];
+						results[ key ].push( value );
+					}
+				}
+			} );
+		}
+	} );
+
+	async function type( target, metrics, key ) {
+		// The first character typed triggers a longer time (isTyping change).
+		// It can impact the stability of the metric, so we exclude it. It
+		// probably deserves a dedicated metric itself, though.
+		const samples = 10;
+		const throwaway = 1;
+		const iterations = samples + throwaway;
+
+		// Start tracing.
+		await metrics.startTracing();
+
+		// Type the testing sequence into the empty paragraph.
+		await target.type( 'x'.repeat( iterations ), {
+			delay: BROWSER_IDLE_WAIT,
+			// The extended timeout is needed because the typing is very slow
+			// and the `delay` value itself does not extend it.
+			timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+		} );
+
+		// Stop tracing.
+		await metrics.stopTracing();
+
+		// Get the durations.
+		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+			metrics.getTypingEventDurations();
+
+		// Save the results.
+		for ( let i = throwaway; i < iterations; i++ ) {
+			results[ key ].push(
+				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+			);
+		}
+	}
+
+	test.describe( 'Typing', () => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { admin, perfUtils, metrics } ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
+
+			await type( paragraph, metrics, 'type' );
+		} );
+	} );
+
+	test.describe( 'Typing (without inspector)', () => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( {
+			admin,
+			perfUtils,
+			metrics,
+			page,
+			editor,
+		} ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const toggleButton = page
+				.getByRole( 'region', { name: 'Editor settings' } )
+				.getByRole( 'button', { name: 'Close Settings' } );
+			await toggleButton.click();
+			const canvas = await perfUtils.getCanvas();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
+
+			await type( paragraph, metrics, 'typeWithoutInspector' );
+
+			// Open the inspector again.
+			await editor.openDocumentSettingsSidebar();
+		} );
+	} );
+
+	test.describe( 'Typing (with top toolbar)', () => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( {
+			admin,
+			perfUtils,
+			metrics,
+			editor,
+		} ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			// Enable fixed toolbar.
+			await editor.setIsFixedToolbar( true );
+			const canvas = await perfUtils.getCanvas();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
+
+			await type( paragraph, metrics, 'typeWithTopToolbar' );
+
+			// Disabled fixed toolbar. Default state.
+			await editor.setIsFixedToolbar( false );
+		} );
+	} );
+
+	test.describe( 'Typing within containers', () => {
+		let draftId = null;
+
+		test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.loadBlocksForSmallPostWithContainers();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { admin, perfUtils, metrics } ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
+
+			// Select the block where we type in.
+			const firstParagraph = canvas
+				.getByRole( 'document', {
+					name: /Paragraph block|Block: Paragraph/,
+				} )
+				.first();
+			await firstParagraph.click();
+
+			await type( firstParagraph, metrics, 'typeContainer' );
+		} );
+	} );
+
+	test.describe( 'Selecting blocks', () => {
+		let draftId = null;
+
+		test( 'Set up the test post', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { admin, page, perfUtils, metrics } ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const canvas = await perfUtils.getCanvas();
+
+			const paragraphs = canvas.getByRole( 'document', {
+				name: /Block: Paragraph/i,
+			} );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Click the next paragraph.
+				await paragraphs.nth( i ).click();
+
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const allDurations = metrics.getSelectionEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.focus.push(
+						allDurations.reduce( ( acc, eventDurations ) => {
+							return acc + sum( eventDurations );
+						}, 0 )
+					);
+				}
+			}
+		} );
+	} );
+
+	test.describe( 'Opening persistent List View', () => {
+		let draftId = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, admin, perfUtils, metrics } ) => {
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+
+			const listViewToggle = page.getByRole( 'button', {
+				name: 'Document Overview',
+			} );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Open List View.
+				await listViewToggle.click();
+				await perfUtils.expectExpandedState( listViewToggle, 'true' );
+
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ mouseClickEvents ] = metrics.getClickEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.listViewOpen.push( mouseClickEvents[ 0 ] );
+				}
+
+				// Close List View
+				await listViewToggle.click();
+				await perfUtils.expectExpandedState( listViewToggle, 'false' );
+			}
+		} );
+	} );
+
+	test.describe( 'Opening Inserter', () => {
+		let draftId = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, admin, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', {
+					name: 'Block Inserter',
+				} );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Open Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'true'
+				);
+
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ mouseClickEvents ] = metrics.getClickEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.inserterOpen.push( mouseClickEvents[ 0 ] );
+				}
+
+				// Close Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'false'
+				);
+			}
+		} );
+	} );
+
+	test.describe( 'Searching Inserter', () => {
+		let draftId = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, admin, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', {
+					name: 'Block Inserter',
+				} );
+			// Open Inserter.
+			await globalInserterToggle.click();
+
+			await page.getByRole( 'searchbox' ).click();
+
+			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Type to trigger search.
+				await page.keyboard.type( 'p' );
+
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+					metrics.getTypingEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.inserterSearch.push(
+						keyDownEvents[ 0 ] +
+							keyPressEvents[ 0 ] +
+							keyUpEvents[ 0 ]
+					);
+				}
+
+				await page.keyboard.press( 'Backspace' );
+			}
+		} );
+	} );
+
+	test.describe( 'Hovering Inserter items', () => {
+		let draftId = null;
+
+		test( 'Set up the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.load1000Paragraphs();
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { page, admin, perfUtils, metrics } ) => {
+			// Go to the test page.
+			await admin.editPost( draftId );
+			await perfUtils.disableAutosave();
+
+			const globalInserterToggle = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', {
+					name: 'Block Inserter',
+				} );
+			const paragraphBlockItem = page.locator(
+				'.block-editor-inserter__menu .editor-block-list-item-paragraph'
+			);
+			const headingBlockItem = page.locator(
+				'.block-editor-inserter__menu .editor-block-list-item-heading'
+			);
+
+			// Open Inserter.
+			await globalInserterToggle.click();
+			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				// Start tracing.
+				await metrics.startTracing();
+
+				// Hover Inserter items.
+				await paragraphBlockItem.hover();
+				await headingBlockItem.hover();
+
+				// Stop tracing.
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ mouseOverEvents, mouseOutEvents ] =
+					metrics.getHoverEventDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					for ( let k = 0; k < mouseOverEvents.length; k++ ) {
+						results.inserterHover.push(
+							mouseOverEvents[ k ] + mouseOutEvents[ k ]
+						);
+					}
+				}
+			}
+		} );
+	} );
+
+	test.describe( 'Loading Patterns', () => {
+		test( 'Run the test', async ( { page, admin, perfUtils } ) => {
+			await admin.createNewPost();
+			await perfUtils.disableAutosave();
+			const globalInserterToggle = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', {
+					name: 'Block Inserter',
+				} );
+
+			const testPatterns = [
+				{
+					name: 'core/query-standard-posts',
+					title: 'Standard',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:separator -->\n\t\t\t\t\t<hr class="wp-block-separator"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-medium-posts',
+					title: 'Image at left',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"33.33%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-small-posts',
+					title: 'Small image and title',
+					content:
+						'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center"} -->\n\t\t\t\t\t<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-grid-posts',
+					title: 'Grid',
+					content:
+						'<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:post-date /--></div>\n\t\t\t\t\t<!-- /wp:group -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-large-title-posts',
+					title: 'Large title',
+					content:
+						'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-offset-posts',
+					title: 'Offset',
+					content:
+						'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/social-links-shared-background-color',
+					title: 'Social links with a shared background color',
+					content:
+						'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
+					viewportWidth: 500,
+					categories: [ 'test' ],
+					blockTypes: [ 'core/social-links' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-large-title-posts-2',
+					title: 'Large title 2',
+					content:
+						'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/query-offset-posts-2',
+					title: 'Offset 2',
+					content:
+						'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
+					categories: [ 'test' ],
+					blockTypes: [ 'core/query' ],
+					source: 'core',
+				},
+				{
+					name: 'core/social-links-shared-background-color-2',
+					title: 'Social links with a shared background color 2',
+					content:
+						'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
+					viewportWidth: 500,
+					categories: [ 'test' ],
+					blockTypes: [ 'core/social-links' ],
+					source: 'core',
+				},
+			];
+
+			await page.evaluate( ( _testPatterns ) => {
+				const settings = window.wp.data
+					.select( 'core/editor' )
+					.getEditorSettings();
+				window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+					...settings,
+					__experimentalAdditionalBlockPatternCategories: [
+						...settings.__experimentalAdditionalBlockPatternCategories,
+						{ name: 'test', label: 'Test' },
+					],
+					__experimentalAdditionalBlockPatterns: [
+						...settings.__experimentalAdditionalBlockPatterns,
+						..._testPatterns,
+					],
+				} );
+			}, testPatterns );
+
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+			for ( let i = 1; i <= iterations; i++ ) {
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'true'
+				);
+				await page.getByRole( 'tab', { name: 'Patterns' } ).click();
+
+				const startTime = performance.now();
+
+				// This is the WP v6.5 and older locator.
+				const oldLocator = page.getByRole( 'button', { name: 'Test' } );
+				// This is the WP v6.6 and newer locator.
+				const newLocator = page.getByRole( 'tab', { name: 'Test' } );
+
+				await oldLocator.or( newLocator ).click();
+
+				await Promise.all(
+					testPatterns.map( async ( pattern ) => {
+						const canvas = await perfUtils.getCanvas(
+							page
+								.getByRole( 'option', {
+									name: pattern.title,
+									exact: true,
+								} )
+								.getByTitle( 'Editor canvas' )
+						);
+
+						// Wait for the first block.
+						await canvas.locator( '.wp-block' ).first().waitFor();
+					} )
+				);
+
+				const endTime = performance.now();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					results.loadPatterns.push( endTime - startTime );
+				}
+
+				// Close Inserter.
+				await globalInserterToggle.click();
+				await perfUtils.expectExpandedState(
+					globalInserterToggle,
+					'false'
+				);
+			}
+		} );
+	} );
+} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
new file mode 100644
index 00000000000000..c09cfe3c67b444
--- /dev/null
+++ b/test/performance/specs/site-editor.spec.js
@@ -0,0 +1,458 @@
+/* eslint-disable playwright/no-conditional-in-test, playwright/expect-expect */
+
+/**
+ * WordPress dependencies
+ */
+import { test, Metrics } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { PerfUtils } from '../fixtures';
+
+// See https://github.com/WordPress/gutenberg/issues/51383#issuecomment-1613460429
+const BROWSER_IDLE_WAIT = 1000;
+
+const results = {
+	serverResponse: [],
+	firstPaint: [],
+	domContentLoaded: [],
+	loaded: [],
+	firstContentfulPaint: [],
+	firstBlock: [],
+	type: [],
+	typeContainer: [],
+	focus: [],
+	inserterOpen: [],
+	inserterHover: [],
+	inserterSearch: [],
+	listViewOpen: [],
+	navigate: [],
+	loadPatterns: [],
+	loadPages: [],
+};
+
+test.describe( 'Site Editor Performance', () => {
+	test.use( {
+		perfUtils: async ( { page }, use ) => {
+			await use( new PerfUtils( { page } ) );
+		},
+		metrics: async ( { page }, use ) => {
+			await use( new Metrics( { page } ) );
+		},
+	} );
+
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+
+	test.afterAll( async ( { requestUtils }, testInfo ) => {
+		await testInfo.attach( 'results', {
+			body: JSON.stringify( results, null, 2 ),
+			contentType: 'application/json',
+		} );
+
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.describe( 'Loading', () => {
+		let draftId = null;
+
+		test( 'Setup the test page', async ( { admin, perfUtils } ) => {
+			await admin.createNewPost( { postType: 'page' } );
+			await perfUtils.setRenderingMode( 'post-only' );
+			await perfUtils.loadBlocksForLargePost();
+
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		const samples = 10;
+		const throwaway = 1;
+		const iterations = samples + throwaway;
+		for ( let i = 1; i <= iterations; i++ ) {
+			test( `Run the test (${ i } of ${ iterations })`, async ( {
+				admin,
+				perfUtils,
+				metrics,
+			} ) => {
+				// Go to the test draft.
+				await admin.visitSiteEditor( {
+					postId: draftId,
+					postType: 'page',
+					canvas: 'edit',
+				} );
+
+				// Wait for the first block.
+				const canvas = await perfUtils.getCanvas();
+				await canvas.locator( '.wp-block' ).first().waitFor();
+
+				// Get the durations.
+				const loadingDurations = await metrics.getLoadingDurations();
+
+				// Save the results.
+				if ( i > throwaway ) {
+					Object.entries( loadingDurations ).forEach(
+						( [ metric, duration ] ) => {
+							if ( metric === 'timeSinceResponseEnd' ) {
+								results.firstBlock.push( duration );
+							} else {
+								results[ metric ].push( duration );
+							}
+						}
+					);
+
+					const serverTiming = await metrics.getServerTiming();
+
+					for ( const [ key, value ] of Object.entries(
+						serverTiming
+					) ) {
+						results[ key ] ??= [];
+						results[ key ].push( value );
+					}
+				}
+			} );
+		}
+	} );
+
+	test.describe( 'Typing', () => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, editor, perfUtils } ) => {
+			await admin.createNewPost( { postType: 'page' } );
+			await perfUtils.setRenderingMode( 'post-only' );
+			await perfUtils.loadBlocksForLargePost();
+			await editor.insertBlock( { name: 'core/paragraph' } );
+
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { admin, perfUtils, metrics, page } ) => {
+			// Go to the test draft.
+			await admin.visitSiteEditor( {
+				postId: draftId,
+				postType: 'page',
+				canvas: 'edit',
+			} );
+
+			// Enter edit mode (second click is needed for the legacy edit mode).
+			const canvas = await perfUtils.getCanvas();
+
+			// Run the test with the sidebar closed
+			const toggleSidebarButton = page
+				.getByRole( 'region', { name: 'Editor top bar' } )
+				.getByRole( 'button', {
+					name: 'Settings',
+					disabled: false,
+				} );
+			const isClosed =
+				( await toggleSidebarButton.getAttribute(
+					'aria-expanded'
+				) ) === 'false';
+			if ( ! isClosed ) {
+				await toggleSidebarButton.click();
+			}
+
+			await canvas
+				.getByRole( 'document', { name: /Block:( Post)? Content/ } )
+				.click();
+
+			const paragraph = canvas.getByRole( 'document', {
+				name: /Empty block/i,
+			} );
+
+			// The first character typed triggers a longer time (isTyping change).
+			// It can impact the stability of the metric, so we exclude it. It
+			// probably deserves a dedicated metric itself, though.
+			const samples = 10;
+			const throwaway = 1;
+			const iterations = samples + throwaway;
+
+			// Start tracing.
+			await metrics.startTracing();
+
+			// Type the testing sequence into the empty paragraph.
+			await paragraph.type( 'x'.repeat( iterations ), {
+				delay: BROWSER_IDLE_WAIT,
+				// The extended timeout is needed because the typing is very slow
+				// and the `delay` value itself does not extend it.
+				timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe.
+			} );
+
+			// Stop tracing.
+			await metrics.stopTracing();
+
+			// Get the durations.
+			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
+				metrics.getTypingEventDurations();
+
+			// Save the results.
+			for ( let i = throwaway; i < iterations; i++ ) {
+				results.type.push(
+					keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+				);
+			}
+		} );
+	} );
+
+	test.describe( 'Navigating', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentythree' );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyone' );
+		} );
+
+		const iterations = 5;
+		for ( let i = 1; i <= iterations; i++ ) {
+			test( `Run the test (${ i } of ${ iterations })`, async ( {
+				admin,
+				page,
+				metrics,
+			} ) => {
+				await admin.visitSiteEditor( {
+					// The old URL is supported in both previous versions and new versions.
+					path: '/wp_template',
+				} );
+
+				// The Templates index page has changed, so we need to know which UI is in use in the branch.
+				// We do so by checking the presence of the dataviews component.
+				// If it's there, switch to the list layout before running the test.
+				// See https://github.com/WordPress/gutenberg/pull/59792
+				const isDataViewsUI = await page
+					.getByRole( 'button', { name: 'Layout' } )
+					.isVisible();
+				if ( isDataViewsUI ) {
+					await page
+						.getByRole( 'button', { name: 'Layout' } )
+						.click();
+					await page
+						.getByRole( 'menuitemradio' )
+						.filter( { has: page.getByText( 'List' ) } )
+						.click();
+				}
+
+				await metrics.startTracing();
+				await page
+					.getByText( 'Single Posts', { exact: true } )
+					.click( { force: true } );
+				await metrics.stopTracing();
+
+				// Get the durations.
+				const [ mouseClickEvents ] = metrics.getClickEventDurations();
+
+				// Save the results.
+				results.navigate.push( mouseClickEvents[ 0 ] );
+			} );
+		}
+	} );
+
+	test.describe( 'Loading Patterns', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		test( 'Run the test', async ( {
+			page,
+			admin,
+			perfUtils,
+			editor,
+			requestUtils,
+		} ) => {
+			await Promise.all(
+				Array.from( { length: 10 }, async () => {
+					const { id } = await requestUtils.createPost( {
+						status: 'publish',
+						title: 'A post',
+						content: `
+<!-- wp:heading -->
+<p>Hello</p>
+<!-- /wp:heading -->
+<!-- wp:paragraph -->
+<p>Post content</p>
+<!-- /wp:paragraph -->`,
+					} );
+
+					return id;
+				} )
+			);
+
+			const samples = 10;
+			for ( let i = 1; i <= samples; i++ ) {
+				// We want to start from a fresh state each time, without
+				// queries or patterns already cached.
+				await admin.visitSiteEditor( {
+					postId: 'twentytwentyfour//home',
+					postType: 'wp_template',
+					canvas: 'edit',
+				} );
+				await editor.openDocumentSettingsSidebar();
+
+				/*
+				 * https://github.com/WordPress/gutenberg/pull/55091 updated the HTML by
+				 * removing the replace template button in sidebar-edit-mode/template-panel/replace-template-button.js
+				 * with a "transform into" list. https://github.com/WordPress/gutenberg/pull/59259 made these tests
+				 * compatible with the new UI, however, the performance tests compare previous versions of the UI.
+				 *
+				 * The following code is a workaround to test the performance of the new UI.
+				 * `actionsButtonElement` is used to check if the old UI is present.
+				 * If there is a Replace template button (old UI), click it, otherwise, click the "transform into" button.
+				 * Once the performance tests are updated to compare compatible versions this code can be removed.
+				 */
+				// eslint-disable-next-line no-restricted-syntax
+				const isActionsButtonVisible = await page
+					.locator(
+						'.edit-site-template-card__actions button[aria-label="Actions"]'
+					)
+					.isVisible();
+
+				if ( isActionsButtonVisible ) {
+					await page
+						.getByRole( 'button', {
+							name: 'Actions',
+						} )
+						.click();
+				}
+
+				// Wait for the browser to be idle before starting the monitoring.
+				// eslint-disable-next-line no-restricted-syntax, playwright/no-wait-for-timeout
+				await page.waitForTimeout( BROWSER_IDLE_WAIT );
+
+				const startTime = performance.now();
+
+				if ( isActionsButtonVisible ) {
+					await page
+						.getByRole( 'menuitem', { name: 'Replace template' } )
+						.click();
+				} else {
+					await page
+						.getByRole( 'button', { name: 'Design' } )
+						.or(
+							// Locator for backward compatibility with the old UI.
+							// The label was updated in https://github.com/WordPress/gutenberg/pull/62161.
+							page.getByRole( 'button', {
+								name: 'Transform into:',
+							} )
+						)
+						.click();
+				}
+
+				const patterns = [
+					'Blogging home template',
+					'Business home template',
+					'Portfolio home template with post featured images',
+					'Blogging index template',
+				];
+
+				await Promise.all(
+					patterns.map( async ( pattern ) => {
+						const canvas = await perfUtils.getCanvas(
+							page
+								.getByRole( 'option', {
+									name: pattern,
+									exact: true,
+								} )
+								.getByTitle( 'Editor canvas' )
+						);
+
+						// Wait until the first block is rendered AND all
+						// patterns are replaced.
+						await Promise.all( [
+							canvas.locator( '.wp-block' ).first().waitFor(),
+							page.waitForFunction(
+								() =>
+									document.querySelectorAll(
+										'[data-type="core/pattern"]'
+									).length === 0
+							),
+						] );
+					} )
+				);
+
+				const endTime = performance.now();
+
+				results.loadPatterns.push( endTime - startTime );
+
+				await page.keyboard.press( 'Escape' );
+			}
+		} );
+	} );
+
+	test.describe( 'Loading Pages', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.activateTheme( 'twentytwentyfour' );
+		} );
+
+		const perPage = 20;
+
+		test( 'Run the test', async ( { page, admin, requestUtils } ) => {
+			await Promise.all(
+				Array.from( { length: perPage }, async ( el, index ) => {
+					const { id } = await requestUtils.createPage( {
+						status: 'publish',
+						title: `Page (${ index })`,
+						content: `
+<!-- wp:heading -->
+<p>Hello</p>
+<!-- /wp:heading -->
+<!-- wp:paragraph -->
+<p>Post content</p>
+<!-- /wp:paragraph -->`,
+					} );
+
+					return id;
+				} )
+			);
+
+			await admin.visitSiteEditor();
+			await page.getByRole( 'button', { name: 'Pages' } ).click();
+
+			// Check if we're dealing with the old URL structure.
+			const path = new URL( page.url() ).searchParams.get( 'path' );
+
+			const samples = 10;
+			for ( let i = 1; i <= samples; i++ ) {
+				// Start from the trash view, then navigate to all pages, so we
+				// test item loading rather than site editor load as a whole.
+				// For some reason `visiSiteEditor` does not work with these
+				// parameters.
+				await admin.visitAdminPage(
+					path
+						? 'site-editor.php?path=%2Fpage&layout=table&activeView=trash'
+						: 'site-editor.php?postType=page&layout=table&activeView=trash'
+				);
+
+				const startTime = performance.now();
+
+				await page.getByRole( 'button', { name: 'All Pages' } ).click();
+
+				// Wait for all pages to be rendered.
+				await Promise.all(
+					Array.from( { length: perPage }, async ( el, index ) => {
+						return await page
+							.getByLabel( `Page (${ index })` )
+							.waitFor( { state: 'attached' } );
+					} )
+				);
+
+				const endTime = performance.now();
+
+				results.loadPages.push( endTime - startTime );
+			}
+		} );
+	} );
+} );
+
+/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */
diff --git a/test/performance/tsconfig.json b/test/performance/tsconfig.json
new file mode 100644
index 00000000000000..28d349fc19bef7
--- /dev/null
+++ b/test/performance/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"noEmit": true,
+		"emitDeclarationOnly": false,
+		"allowJs": true,
+		"checkJs": false
+	},
+	"include": [ "**/*" ],
+	"exclude": []
+}
diff --git a/test/performance/utils.js b/test/performance/utils.js
new file mode 100644
index 00000000000000..b30df24b130f6a
--- /dev/null
+++ b/test/performance/utils.js
@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import { existsSync, readFileSync, unlinkSync } from 'fs';
+
+export function sum( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return array.reduce( ( a, b ) => a + b, 0 );
+}
+
+export function average( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return sum( array ) / array.length;
+}
+
+export function variance( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return Math.sqrt(
+		sum( array.map( ( x ) => x ** 2 ) ) / array.length -
+			( sum( array ) / array.length ) ** 2
+	);
+}
+
+export function median( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	const numbers = [ ...array ].sort( ( a, b ) => a - b );
+	const middleIndex = Math.floor( numbers.length / 2 );
+
+	if ( numbers.length % 2 === 0 ) {
+		return ( numbers[ middleIndex - 1 ] + numbers[ middleIndex ] ) / 2;
+	}
+	return numbers[ middleIndex ];
+}
+
+export function quartiles( array ) {
+	const numbers = array.slice().sort( ( a, b ) => a - b );
+
+	function med( offset, length ) {
+		if ( length % 2 === 0 ) {
+			// even length, average of two middle numbers
+			return (
+				( numbers[ offset + length / 2 - 1 ] +
+					numbers[ offset + length / 2 ] ) /
+				2
+			);
+		}
+
+		// odd length, exact middle point
+		return numbers[ offset + ( length - 1 ) / 2 ];
+	}
+
+	const q50 = med( 0, numbers.length );
+
+	let q25, q75;
+	if ( numbers.length % 2 === 0 ) {
+		// medians of two exact halves
+		const mid = numbers.length / 2;
+		q25 = med( 0, mid );
+		q75 = med( mid, mid );
+	} else {
+		// quartiles are average of medians of the smaller and bigger slice
+		const midl = ( numbers.length - 1 ) / 2;
+		const midh = ( numbers.length + 1 ) / 2;
+		q25 = ( med( 0, midl ) + med( 0, midh ) ) / 2;
+		q75 = ( med( midl, midh ) + med( midh, midl ) ) / 2;
+	}
+	return { q25, q50, q75 };
+}
+
+export function stats( values ) {
+	if ( ! values || values.length === 0 ) {
+		return undefined;
+	}
+	const { q25, q50, q75 } = quartiles( values );
+	const cnt = values.length;
+	return {
+		q25: round( q25 ),
+		q50: round( q50 ),
+		q75: round( q75 ),
+		cnt,
+	};
+}
+
+export function minimum( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return Math.min( ...array );
+}
+
+export function maximum( array ) {
+	if ( ! array || ! array.length ) {
+		return undefined;
+	}
+
+	return Math.max( ...array );
+}
+
+export function round( number, decimalPlaces = 2 ) {
+	const factor = Math.pow( 10, decimalPlaces );
+
+	return Math.round( number * factor ) / factor;
+}
+
+export function readFile( filePath ) {
+	if ( ! existsSync( filePath ) ) {
+		throw new Error( `File does not exist: ${ filePath }` );
+	}
+
+	return readFileSync( filePath, 'utf8' ).trim();
+}
+
+export function deleteFile( filePath ) {
+	if ( existsSync( filePath ) ) {
+		unlinkSync( filePath );
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/.gitignore b/test/php/gutenberg-coding-standards/.gitignore
new file mode 100644
index 00000000000000..bfec4c3c303b1f
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/.gitignore
@@ -0,0 +1,5 @@
+vendor
+composer.lock
+phpunit.xml
+phpcs.xml
+.phpcs.xml
diff --git a/test/php/gutenberg-coding-standards/.phpcs.xml.dist b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
new file mode 100644
index 00000000000000..7ebe60e3d28567
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/.phpcs.xml.dist
@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Gutenberg Coding Standards" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/PHPCSStandards/PHP_CodeSniffer/master/phpcs.xsd">
+
+	<description>The Coding standard for the Gutenberg Coding Standards itself.</description>
+
+	<file>.</file>
+
+	<!-- Exclude Composer vendor directory. -->
+	<exclude-pattern>*/vendor/*</exclude-pattern>
+
+	<!-- Only check PHP files. -->
+	<arg name="extensions" value="php"/>
+
+	<!-- Show progress, show the error codes for each message (source). -->
+	<arg value="ps"/>
+
+	<!-- Strip the filepaths down to the relevant bit. -->
+	<arg name="basepath" value="."/>
+
+	<!-- Check up to 8 files simultaneously. -->
+	<arg name="parallel" value="8"/>
+
+	<!--
+	#############################################################################
+	SET UP THE RULESETS
+	#############################################################################
+	-->
+
+	<rule ref="WordPress">
+		<!-- This project needs to comply with naming standards from PHPCS, not WP. -->
+		<exclude name="WordPress.Files.FileName"/>
+		<exclude name="WordPress.NamingConventions.ValidVariableName"/>
+	</rule>
+
+	<rule ref="Squiz.Commenting.FunctionCommentThrowTag.Missing">
+		<exclude-pattern>/Gutenberg/Tests/.+$</exclude-pattern>
+	</rule>
+
+	<!-- Check code for cross-version PHP compatibility. -->
+	<config name="testVersion" value="7.0-"/>
+
+	<!-- Enforce PSR1 compatible namespaces. -->
+	<rule ref="PSR1.Classes.ClassDeclaration"/>
+</ruleset>
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
new file mode 100644
index 00000000000000..12d388cc378180
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/ForbiddenFunctionsAndClassesSniff.php
@@ -0,0 +1,230 @@
+<?php
+/**
+ * Gutenberg Coding Standards.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
+
+use PHP_CodeSniffer\Files\File;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * This sniff enforces usage restrictions on specific classes and functions within the Gutenberg project.
+ * While it permits the declaration of these classes/functions, their actual usage in code is forbidden based on defined regular expressions.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ *
+ * @since   1.0.0
+ */
+final class ForbiddenFunctionsAndClassesSniff implements Sniff {
+
+	/**
+	 * Holds regular expressions for classes whose usage is forbidden.
+	 * Note that declaring functions with names matching these regular expressions is still permitted.
+	 * Useful for enforcing security or architectural constraints.
+	 *
+	 * @var array Array of regex patterns for forbidden classes.
+	 */
+	public $forbidden_classes = array();
+
+	/**
+	 * Holds regular expressions for classes whose usage is forbidden.
+	 * Note that declaring classes with names matching these regular expressions is still permitted.
+	 * Useful for enforcing security or architectural constraints.
+	 *
+	 * @var array Array of regex patterns for forbidden functions.
+	 */
+	public $forbidden_functions = array();
+
+	/**
+	 * Registers the tokens that this sniff wants to listen for.
+	 *
+	 * @return array
+	 */
+	public function register() {
+		$this->on_register_event();
+
+		return array( T_STRING );
+	}
+
+	/**
+	 * Handles processing tokens.
+	 *
+	 * @param File $phpcsFile The file being scanned.
+	 * @param int  $stackPtr  The position of the current token
+	 *                        in the stack passed in $tokens.
+	 */
+	public function process( File $phpcsFile, $stackPtr ) {
+		$this->process_string_token( $phpcsFile, $stackPtr );
+	}
+
+	/**
+	 * Detects whether a given string token represents a function call or class usage.
+	 * It then delegates further processing based on the type of usage detected.
+	 *
+	 * @param File $phpcs_file The file being scanned.
+	 * @param int  $stack_pointer  The position of the current token in the token stack.
+	 */
+	private function process_string_token( File $phpcs_file, $stack_pointer ) {
+		if ( empty( $this->forbidden_functions ) && empty( $this->forbidden_classes ) ) {
+			// Nothing to process.
+			return;
+		}
+
+		$tokens = $phpcs_file->getTokens();
+
+		$next_token = $phpcs_file->findPrevious( T_WHITESPACE, ( $stack_pointer + 1 ), null, true, null, true );
+		if ( false !== $next_token && ( T_DOUBLE_COLON === $tokens[ $next_token ]['code'] ) ) {
+			// Static class method or a class constant.
+			$this->check_class_usage( $phpcs_file, $stack_pointer );
+
+			return;
+		}
+
+		$previous_token = $phpcs_file->findPrevious( T_WHITESPACE, $stack_pointer - 1, null, true, null, true );
+		if ( false !== $previous_token && ( T_NEW === $tokens[ $previous_token ]['code'] ) ) {
+			// Static method or a constant usage.
+			$this->check_class_usage( $phpcs_file, $stack_pointer );
+
+			return;
+		}
+
+		if ( false !== $next_token && ( T_OPEN_PARENTHESIS === $tokens[ $next_token ]['code'] ) ) {
+			// Function.
+			$this->check_function_usage( $phpcs_file, $stack_pointer );
+		}
+	}
+
+	/**
+	 * Checks for forbidden class usage.
+	 *
+	 * @param File $phpcs_file    File being scanned.
+	 * @param int  $stack_pointer Position of the text token in the token stack.
+	 */
+	private function check_class_usage( File $phpcs_file, $stack_pointer ) {
+		if ( empty( $this->forbidden_classes ) ) {
+			// Nothing to process.
+			return;
+		}
+
+		if ( $this->check_if_token_guarded( $phpcs_file, $stack_pointer ) ) {
+			// The token is guarded. Nothing to process.
+			return;
+		}
+
+		$tokens     = $phpcs_file->getTokens();
+		$class_name = $tokens[ $stack_pointer ]['content'];
+
+		foreach ( $this->forbidden_classes as $forbidden_class ) {
+			$regexp = sprintf( '/^%s$/', $forbidden_class );
+			if ( 1 !== preg_match( $regexp, $class_name ) ) {
+				// The class has a valid name; bypassing further checks.
+				return;
+			}
+		}
+
+		$error_message = 'It\'s not allowed to use the "' . $class_name . '" class as its name matches the forbidden pattern: "' . $regexp . '".';
+		$phpcs_file->addError( $error_message, $stack_pointer, 'ForbiddenClassUsage' );
+	}
+
+	/**
+	 * Checks for forbidden function usage.
+	 *
+	 * @param File $phpcs_file    File being scanned.
+	 * @param int  $stack_pointer Position of the text token in the token stack.
+	 */
+	private function check_function_usage( File $phpcs_file, $stack_pointer ) {
+		if ( empty( $this->forbidden_functions ) ) {
+			// Nothing to process.
+			return;
+		}
+
+		if ( $this->check_if_token_guarded( $phpcs_file, $stack_pointer ) ) {
+			// The token is guarded. Nothing to process.
+			return;
+		}
+
+		$tokens        = $phpcs_file->getTokens();
+		$function_name = $tokens[ $stack_pointer ]['content'];
+
+		foreach ( $this->forbidden_functions as $disallowed_function_call ) {
+			$regexp = sprintf( '/^%s$/', $disallowed_function_call );
+			if ( 1 !== preg_match( $regexp, $function_name ) ) {
+				// The function has a valid name; bypassing further checks.
+				return;
+			}
+		}
+
+		$error_message = 'It\'s not allowed to call the "' . $function_name . '()" function as its name matches the forbidden pattern: "' . $regexp . '".';
+		$phpcs_file->addError( $error_message, $stack_pointer, 'ForbiddenFunctionCall' );
+	}
+
+	/**
+	 * This function looks for a specific if condition that wraps the token
+	 * to determine if it's protected from execution outside of Gutenberg.
+	 *
+	 * Example of a guarded function (works similarly for classes):
+	 * if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	 *     // gutenberg_prefixed_i_am_allowed_to_be_called_since_i_am_guarded_function();
+	 * }
+	 *
+	 * @param File $phpcs_file    File being scanned.
+	 * @param int  $stack_pointer Position of the text token in the token stack.
+	 *
+	 * @return bool               Returns true if the token is guarded.
+	 */
+	private function check_if_token_guarded( File $phpcs_file, $stack_pointer ) {
+		if ( false === $phpcs_file->hasCondition( $stack_pointer, T_IF ) ) {
+			// No wrapping IF tokens. Stop processing.
+			return false;
+		}
+
+		$tokens = $phpcs_file->getTokens();
+
+		// It has to start from the matched condition closest to the passed token.
+		$conditions = array_reverse( $tokens[ $stack_pointer ]['conditions'], true );
+
+		// Matches the "if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN" string.
+		$regexp = '/if\s*\(\s*defined\(\s*(\'|")IS_GUTENBERG_PLUGIN(\'|")\s*\)\s*&&\s*IS_GUTENBERG_PLUGIN/';
+
+		foreach ( $conditions as $wrapping_if_token => $condition ) {
+			if ( T_IF !== $condition ) {
+				continue;
+			}
+
+			$end_of_wrapping_if_token = $phpcs_file->findEndOfStatement( $wrapping_if_token );
+			$content                  = $phpcs_file->getTokensAsString( $wrapping_if_token, $end_of_wrapping_if_token - $wrapping_if_token );
+
+			if ( 1 === preg_match( $regexp, $content ) ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * The purpose of this method is to run callbacks
+	 * after the class properties have been set.
+	 */
+	private function on_register_event() {
+		$this->forbidden_classes   = self::sanitize( $this->forbidden_classes );
+		$this->forbidden_functions = self::sanitize( $this->forbidden_functions );
+	}
+
+	/**
+	 * Sanitize an array of values by trimming each element and removing empty elements.
+	 *
+	 * @param array $values The values being sanitized.
+	 *
+	 * @return array
+	 */
+	private static function sanitize( $values ) {
+		$values = array_map( 'trim', $values );
+
+		return array_filter( $values );
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
new file mode 100644
index 00000000000000..d947d6d9382b35
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/CodeAnalysis/GuardedFunctionAndClassNamesSniff.php
@@ -0,0 +1,218 @@
+<?php
+/**
+ * Gutenberg Coding Standards.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Sniffs\CodeAnalysis;
+
+use PHP_CodeSniffer\Files\File;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * The sniff implements the Gutenberg coding standard to verify whether functions and classes
+ * are enclosed with function_exists() and !class_exists(). This check ensures that the functions
+ * and classes are not already defined, and recommends the use of function_exists() and class_exists()
+ * to prevent fatal errors during the integration of the feature to the Core.
+ *
+ * @link https://github.com/WordPress/gutenberg/blob/trunk/lib/README.md#wrap-functions-and-classes-with--function_exists-and--class_exists
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ *
+ * @since   1.0.0
+ */
+final class GuardedFunctionAndClassNamesSniff implements Sniff {
+	/**
+	 * A list of functions to ignore.
+	 *
+	 * @var integer
+	 */
+	public $functionsWhiteList = array();
+
+	/**
+	 * A list of classes to ignore.
+	 *
+	 * @var integer
+	 */
+	public $classesWhiteList = array();
+
+	/**
+	 * Registers the tokens that this sniff wants to listen for.
+	 *
+	 * @since 3.0.0
+	 *
+	 * @return array
+	 */
+	public function register() {
+		$this->onRegisterEvent();
+
+		return array( T_FUNCTION, T_CLASS );
+	}
+
+	/**
+	 * Processes function and class tokens.
+	 *
+	 * @param File $phpcsFile The file being scanned.
+	 * @param int  $stackPtr  The position of the current token
+	 *                        in the stack passed in $tokens.
+	 *
+	 * @return void
+	 */
+	public function process( File $phpcsFile, $stackPtr ) {
+		$tokens = $phpcsFile->getTokens();
+		$token  = $tokens[ $stackPtr ];
+
+		if ( 'T_FUNCTION' === $token['type'] ) {
+			$this->processFunctionToken( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( 'T_CLASS' === $token['type'] ) {
+			$this->processClassToken( $phpcsFile, $stackPtr );
+		}
+	}
+
+	/**
+	 * Functions should be wrapped with !function_exists() to avoid fatal errors.
+	 * E.g.:
+	 * if ( ! function_exists( 'wp_get_navigation' ) ) {
+	 *     function wp_get_navigation( $slug ) { ... }
+	 * }
+	 *
+	 * @param File $phpcsFile    The file being scanned.
+	 * @param int  $stackPointer The position of the current token
+	 *                           in the stack passed in $tokens.
+	 *
+	 * @return void
+	 */
+	private function processFunctionToken( File $phpcsFile, $stackPointer ) {
+		$tokens        = $phpcsFile->getTokens();
+		$functionToken = $phpcsFile->findNext( T_STRING, $stackPointer );
+
+		$wrappingTokensToCheck = array(
+			T_CLASS,
+			T_INTERFACE,
+			T_TRAIT,
+		);
+
+		foreach ( $wrappingTokensToCheck as $wrappingTokenToCheck ) {
+			if ( false !== $phpcsFile->getCondition( $functionToken, $wrappingTokenToCheck, false ) ) {
+				// This sniff only processes functions, not class methods.
+				return;
+			}
+		}
+
+		$name = $tokens[ $functionToken ]['content'];
+		foreach ( $this->functionsWhiteList as $functionRegExp ) {
+			if ( preg_match( $functionRegExp, $name ) ) {
+				// Ignore whitelisted function names.
+				return;
+			}
+		}
+
+		$errorMessage = sprintf( 'The "%s()" function should be guarded against redeclaration.', $name );
+
+		$wrappingIfToken = $phpcsFile->getCondition( $functionToken, T_IF, false );
+		if ( false === $wrappingIfToken ) {
+			$phpcsFile->addError( $errorMessage, $functionToken, 'FunctionNotGuardedAgainstRedeclaration' );
+
+			return;
+		}
+
+		$content = $phpcsFile->getTokensAsString( $wrappingIfToken, $functionToken - $wrappingIfToken );
+
+		$regexp = sprintf( '/if\s*\(\s*!\s*function_exists\s*\(\s*(\'|")%s(\'|")/', preg_quote( $name, '/' ) );
+		$result = preg_match( $regexp, $content );
+		if ( 1 !== $result ) {
+			$phpcsFile->addError( $errorMessage, $functionToken, 'FunctionNotGuardedAgainstRedeclaration' );
+		}
+	}
+
+	/**
+	 * Classes should be wrapped with !function_exists() to avoid fatal errors.
+	 * E.g.:
+	 * if ( ! class_exists( 'WP_Navigation' ) ) {
+	 *    class WP_Navigation { ... }
+	 * }
+	 *
+	 * @param File $phpcsFile    The file being scanned.
+	 * @param int  $stackPointer The position of the current token
+	 *                           in the stack passed in $tokens.
+	 *
+	 * @return void
+	 */
+	private function processClassToken( File $phpcsFile, $stackPointer ) {
+		$tokens     = $phpcsFile->getTokens();
+		$classToken = $phpcsFile->findNext( T_STRING, $stackPointer );
+		$className  = $tokens[ $classToken ]['content'];
+
+		foreach ( $this->classesWhiteList as $classnameRegExp ) {
+			if ( preg_match( $classnameRegExp, $className ) ) {
+				// Ignore whitelisted class names.
+				return;
+			}
+		}
+
+		$errorMessage = sprintf( 'The "%s" class should be guarded against redeclaration.', $className );
+
+		$wrappingIfToken = $phpcsFile->getCondition( $classToken, T_IF, false );
+		if ( false !== $wrappingIfToken ) {
+			$endOfWrappingIfToken = $phpcsFile->findEndOfStatement( $wrappingIfToken );
+			$content              = $phpcsFile->getTokensAsString( $wrappingIfToken, $endOfWrappingIfToken - $wrappingIfToken );
+			$regexp               = sprintf( '/if\s*\(\s*!\s*class_exists\s*\(\s*(\'|")%s(\'|")/', preg_quote( $className, '/' ) );
+			$result               = preg_match( $regexp, $content );
+			if ( 1 === $result ) {
+				return;
+			}
+		}
+
+		$previousIfToken = $phpcsFile->findPrevious( T_IF, $classToken );
+		if ( false === $previousIfToken ) {
+			$phpcsFile->addError( $errorMessage, $classToken, 'ClassNotGuardedAgainstRedeclaration' );
+
+			return;
+		}
+
+		$endOfPreviousIfToken = $phpcsFile->findEndOfStatement( $previousIfToken );
+		$content              = $phpcsFile->getTokensAsString( $previousIfToken, $endOfPreviousIfToken - $previousIfToken );
+		$regexp               = sprintf( '/if\s*\(\s*class_exists\s*\(\s*(\'|")%s(\'|")/', preg_quote( $className, '/' ) );
+		$result               = preg_match( $regexp, $content );
+
+		if ( 1 === $result ) {
+			$notProperlyGuardedErrorMessage = sprintf(
+				'The class "%s" is not properly guarded against redeclaration. Please ensure the entire class body is wrapped within an "if ( ! class_exists( \'%s\' ) ) {" statement.',
+				$className,
+				$className
+			);
+
+			$phpcsFile->addError( $notProperlyGuardedErrorMessage, $classToken, 'ClassNotProperlyGuardedAgainstRedeclaration' );
+			return;
+		}
+
+		$phpcsFile->addError( $errorMessage, $classToken, 'ClassNotGuardedAgainstRedeclaration' );
+	}
+
+	/**
+	 * The purpose of this method is to sanitize the input data
+	 * after the properties have been set.
+	 */
+	private function onRegisterEvent() {
+		$this->functionsWhiteList = self::sanitize( $this->functionsWhiteList );
+		$this->classesWhiteList   = self::sanitize( $this->classesWhiteList );
+	}
+
+	/**
+	 * Input data needs to be sanitized.
+	 *
+	 * @param array $values The values being sanitized.
+	 *
+	 * @return array
+	 */
+	private static function sanitize( $values ) {
+		$values = array_map( 'trim', $values );
+
+		return array_filter( $values );
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
new file mode 100644
index 00000000000000..20f698954cb267
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/Commenting/SinceTagSniff.php
@@ -0,0 +1,583 @@
+<?php
+/**
+ * Gutenberg Coding Standards.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Sniffs\Commenting;
+
+use PHP_CodeSniffer\Files\File;
+use PHP_CodeSniffer\Sniffs\Sniff;
+use PHP_CodeSniffer\Util\Tokens;
+use PHPCSUtils\Tokens\Collections;
+use PHPCSUtils\Utils\FunctionDeclarations;
+use PHPCSUtils\Utils\GetTokensAsString;
+use PHPCSUtils\Utils\ObjectDeclarations;
+use PHPCSUtils\Utils\Scopes;
+use PHPCSUtils\Utils\Variables;
+
+/**
+ * This sniff verifies the presence of valid `@since` tags in the docblocks of various PHP structures
+ * and WordPress hooks. Supported structures include classes, interfaces, traits, enums, functions, methods and properties.
+ * Files located within the __experimental blocks of the block-library folder are excluded from checks.
+ */
+class SinceTagSniff implements Sniff {
+
+	/**
+	 * Disable the check for functions with a lower visibility than the value given.
+	 *
+	 * Allowed values are public, protected, and private.
+	 *
+	 * @var string
+	 */
+	public $minimumVisibility = 'private';
+
+	/**
+	 * A map of tokens representing an object-oriented programming structure to their human-readable names.
+	 * This map helps in identifying different OO structures such as classes, interfaces, traits, and enums.
+	 *
+	 * @var array
+	 */
+	protected static $oo_tokens = array(
+		T_CLASS     => array(
+			'name' => 'class',
+		),
+		T_INTERFACE => array(
+			'name' => 'interface',
+		),
+		T_TRAIT     => array(
+			'name' => 'trait',
+		),
+		T_ENUM      => array(
+			'name' => 'enum',
+		),
+	);
+
+	/**
+	 * This property is used to store results returned
+	 * by the static::is_experimental_block() method.
+	 *
+	 * @var array
+	 */
+	protected static $cache = array();
+
+	/**
+	 * Returns an array of tokens this test wants to listen for.
+	 *
+	 * @return array<int|string>
+	 */
+	public function register() {
+		return array_merge(
+			array(
+				T_FUNCTION,
+				T_VARIABLE,
+				T_STRING,
+			),
+			array_keys( static::$oo_tokens )
+		);
+	}
+
+	/**
+	 * Processes the tokens that this sniff is interested in.
+	 *
+	 * @param File $phpcsFile The file being scanned.
+	 * @param int  $stackPtr  The position of the current token in the stack passed in $tokens.
+	 */
+	public function process( File $phpcsFile, $stackPtr ) {
+		if ( static::is_experimental_block( $phpcsFile ) ) {
+			// The "@since" tag is not required for experimental blocks since they are not yet included in WordPress Core.
+			return;
+		}
+
+		$tokens = $phpcsFile->getTokens();
+		$token  = $tokens[ $stackPtr ];
+
+		if ( 'T_FUNCTION' === $token['type'] ) {
+			$this->process_function_token( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( isset( static::$oo_tokens[ $token['code'] ] ) ) {
+			$this->process_oo_token( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( 'T_STRING' === $token['type'] && static::is_function_call( $phpcsFile, $stackPtr ) ) {
+			$this->process_hook( $phpcsFile, $stackPtr );
+			return;
+		}
+
+		if ( 'T_VARIABLE' === $token['type'] && Scopes::isOOProperty( $phpcsFile, $stackPtr ) ) {
+			$this->process_property_token( $phpcsFile, $stackPtr );
+		}
+	}
+
+	/**
+	 * Processes a token representing a function call that invokes a WordPress hook,
+	 * checking for a missing `@since` tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the hook token in the stack.
+	 */
+	protected function process_hook( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		// The content of the current token.
+		$hook_function = $tokens[ $stack_pointer ]['content'];
+
+		$hook_invocation_functions = array(
+			'do_action',
+			'do_action_ref_array',
+			'do_action_deprecated',
+			'apply_filters',
+			'apply_filters_ref_array',
+			'apply_filters_deprecated',
+		);
+
+		// Check if the current token content is one of the filter functions.
+		if ( ! in_array( $hook_function, $hook_invocation_functions, true ) ) {
+			// Not a hook.
+			return;
+		}
+
+		$error_message_data = array( $hook_function );
+
+		$violation_codes = static::get_violation_codes( 'Hook' );
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			if ( false !== $docblock ) {
+				$docblock_content = GetTokensAsString::compact( $phpcs_file, $docblock['start_token'], $docblock['end_token'], false );
+				if ( false !== stripos( $docblock_content, 'This filter is documented in ' ) ) {
+					$hook_documented_elsewhere = true;
+				}
+			}
+
+			if ( empty( $hook_documented_elsewhere ) ) {
+				$phpcs_file->addError(
+					'Missing @since tag for the "%s()" hook function.',
+					$stack_pointer,
+					$violation_codes['missing_since_tag'],
+					$error_message_data
+				);
+			}
+
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s()" hook function.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s()" hook function: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a token representing an object-oriented programming structure
+	 * like a class, interface, trait, or enum to check for a missing `@since` tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the OO token in the stack.
+	 */
+	protected function process_oo_token( File $phpcs_file, $stack_pointer ) {
+		$tokens     = $phpcs_file->getTokens();
+		$token_type = static::$oo_tokens[ $tokens[ $stack_pointer ]['code'] ]['name'];
+
+		$token_name         = ObjectDeclarations::getName( $phpcs_file, $stack_pointer );
+		$error_message_data = array(
+			$token_name,
+			$token_type,
+		);
+
+		$violation_codes = static::get_violation_codes( ucfirst( $token_type ) );
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s" %s.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s" %s.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s" %s: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a token representing an object-oriented property to check for a missing @since tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the object-oriented property token in the stack.
+	 */
+	protected function process_property_token( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		$property_name = $tokens[ $stack_pointer ]['content'];
+		$oo_token      = Scopes::validDirectScope( $phpcs_file, $stack_pointer, Collections::ooPropertyScopes() );
+		$class_name    = ObjectDeclarations::getName( $phpcs_file, $oo_token );
+
+		$visibility = Variables::getMemberProperties( $phpcs_file, $stack_pointer )['scope'];
+		if ( $this->check_below_minimum_visibility( $visibility ) ) {
+			return;
+		}
+
+		$violation_codes = static::get_violation_codes( 'Property' );
+
+		$error_message_data = array(
+			$class_name,
+			$property_name,
+		);
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s::%s" property.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s::%s" property.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s::%s" property: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Processes a T_FUNCTION token to check for a missing @since tag in its docblock.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the T_FUNCTION token in the stack.
+	 */
+	protected function process_function_token( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		$oo_token      = Scopes::validDirectScope( $phpcs_file, $stack_pointer, Tokens::$ooScopeTokens );
+		$function_name = ObjectDeclarations::getName( $phpcs_file, $stack_pointer );
+
+		$token_type = 'function';
+		if ( Scopes::isOOMethod( $phpcs_file, $stack_pointer ) ) {
+			$visibility = FunctionDeclarations::getProperties( $phpcs_file, $stack_pointer )['scope'];
+			if ( $this->check_below_minimum_visibility( $visibility ) ) {
+				return;
+			}
+
+			$function_name = ObjectDeclarations::getName( $phpcs_file, $oo_token ) . '::' . $function_name;
+			$token_type    = 'method';
+		}
+
+		$violation_codes = static::get_violation_codes( ucfirst( $token_type ) );
+
+		$error_message_data = array(
+			$function_name,
+			$token_type,
+		);
+
+		$docblock = static::find_docblock( $phpcs_file, $stack_pointer );
+
+		$version_tags = static::parse_since_tags( $phpcs_file, $docblock );
+		if ( empty( $version_tags ) ) {
+			$phpcs_file->addError(
+				'Missing @since tag for the "%s()" %s.',
+				$stack_pointer,
+				$violation_codes['missing_since_tag'],
+				$error_message_data
+			);
+			return;
+		}
+
+		foreach ( $version_tags as $since_tag_token => $version_value_token ) {
+			if ( null === $version_value_token ) {
+				$phpcs_file->addError(
+					'Missing @since tag version value for the "%s()" %s.',
+					$since_tag_token,
+					$violation_codes['missing_version_value'],
+					$error_message_data
+				);
+				continue;
+			}
+
+			$version_value = $tokens[ $version_value_token ]['content'];
+
+			if ( static::validate_version( $version_value ) ) {
+				continue;
+			}
+
+			$phpcs_file->addError(
+				'Invalid @since version value for the "%s()" %s: "%s". Version value must be greater than or equal to 0.0.1.',
+				$version_value_token,
+				$violation_codes['invalid_version_value'],
+				array_merge( $error_message_data, array( $version_value ) )
+			);
+		}
+	}
+
+	/**
+	 * Validates the version value.
+	 *
+	 * @param string $version The version value being checked.
+	 * @return bool True if the version value is valid.
+	 */
+	protected static function validate_version( $version ) {
+		$matches = array();
+		if ( 1 === preg_match( '/^MU \((?<version>.+)\)/', $version, $matches ) ) {
+			$version = $matches['version'];
+		}
+
+		return version_compare( $version, '0.0.1', '>=' );
+	}
+
+
+	/**
+	 * Returns violation codes for a specific token type.
+	 *
+	 * @param string $token_type The type of token (e.g., Function, Property) to retrieve violation codes for.
+	 * @return array An array containing violation codes for missing since tag, missing version value, and invalid version value.
+	 */
+	protected static function get_violation_codes( $token_type ) {
+		return array(
+			'missing_since_tag'     => 'Missing' . $token_type . 'SinceTag',
+			'missing_version_value' => 'Missing' . $token_type . 'VersionValue',
+			'invalid_version_value' => 'Invalid' . $token_type . 'VersionValue',
+		);
+	}
+
+	/**
+	 * Checks if the provided visibility level is below the set minimum visibility level.
+	 *
+	 * @param string $visibility The visibility level to check.
+	 * @return bool Returns true if the provided visibility level is below the minimum visibility level, false otherwise.
+	 */
+	protected function check_below_minimum_visibility( $visibility ) {
+		if ( 'public' === $this->minimumVisibility && in_array( $visibility, array( 'protected', 'private' ), true ) ) {
+			return true;
+		}
+
+		if ( 'protected' === $this->minimumVisibility && 'private' === $visibility ) {
+			return true;
+		}
+
+		return false;
+	}
+
+	/**
+	 * Finds the first token on the previous line relative to the stack pointer passed to the method.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position to find the previous line token from.
+	 * @return int|false The last token on the previous line, or false if not found.
+	 */
+	protected static function find_previous_line_token( File $phpcs_file, $stack_pointer ) {
+		$tokens       = $phpcs_file->getTokens();
+		$current_line = $tokens[ $stack_pointer ]['line'];
+
+		for ( $token = $stack_pointer; $token >= 0; $token-- ) {
+			if ( $tokens[ $token ]['line'] < $current_line ) {
+				return $token;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Finds the docblock preceding a specified position (stack pointer) in a given PHP file.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position (stack pointer) in the token stack from which to start searching backwards.
+	 * @return array|false An associative array containing the start and end tokens of the docblock, or false if not found.
+	 */
+	protected static function find_docblock( File $phpcs_file, $stack_pointer ) {
+		// It can be assumed that the DocBlock should end on the previous line, not the current one.
+		$previous_line_end_token = static::find_previous_line_token( $phpcs_file, $stack_pointer );
+		if ( false === $previous_line_end_token ) {
+			return false;
+		}
+
+		$docblock_end_token = $phpcs_file->findPrevious( array( T_WHITESPACE ), $previous_line_end_token, null, true );
+
+		$tokens = $phpcs_file->getTokens();
+		if ( false === $docblock_end_token || T_DOC_COMMENT_CLOSE_TAG !== $tokens[ $docblock_end_token ]['code'] ) {
+			// Only "/**" style comments are supported.
+			return false;
+		}
+
+		return array(
+			'start_token' => $tokens[ $docblock_end_token ]['comment_opener'],
+			'end_token'   => $docblock_end_token,
+		);
+	}
+
+	/**
+	 * Determines if a T_STRING token represents a function call.
+	 *
+	 * @param File $phpcs_file    The file being scanned.
+	 * @param int  $stack_pointer The position of the T_STRING token in question.
+	 * @return bool True if the token represents a function call, false otherwise.
+	 */
+	protected static function is_function_call( File $phpcs_file, $stack_pointer ) {
+		$tokens = $phpcs_file->getTokens();
+
+		// Find the previous non-empty token.
+		$previous = $phpcs_file->findPrevious( Tokens::$emptyTokens, ( $stack_pointer - 1 ), null, true );
+
+		$previous_tokens_to_ignore = array(
+			T_NEW,             // Creating an object.
+			T_OBJECT_OPERATOR, // Calling an object.
+			T_FUNCTION,        // Function declaration.
+		);
+
+		if ( in_array( $tokens[ $previous ]['code'], $previous_tokens_to_ignore, true ) ) {
+			// This is an object or function declaration.
+			return false;
+		}
+
+		// Find the next non-empty token.
+		$open_bracket = $phpcs_file->findNext( Tokens::$emptyTokens, ( $stack_pointer + 1 ), null, true );
+
+		return ( false !== $open_bracket ) && ( T_OPEN_PARENTHESIS === $tokens[ $open_bracket ]['code'] );
+	}
+
+	/**
+	 * Searches for @since values within a docblock.
+	 *
+	 * @param File        $phpcs_file The file being scanned.
+	 * @param array|false $docblock   An associative array containing the start and end tokens of the docblock, or false if not exists.
+	 * @return array Returns an array of "@since" tokens and their corresponding value tokens.
+	 */
+	protected static function parse_since_tags( File $phpcs_file, $docblock ) {
+		$version_tags = array();
+
+		if ( false === $docblock ) {
+			return $version_tags;
+		}
+
+		$tokens = $phpcs_file->getTokens();
+
+		for ( $i = $docblock['start_token'] + 1; $i < $docblock['end_token']; $i++ ) {
+			if ( ! ( T_DOC_COMMENT_TAG === $tokens[ $i ]['code'] && '@since' === $tokens[ $i ]['content'] ) ) {
+				continue;
+			}
+
+			$version_token = $phpcs_file->findNext( T_DOC_COMMENT_WHITESPACE, $i + 1, $docblock['end_token'], true, null, true );
+			if ( ( false === $version_token ) || ( T_DOC_COMMENT_STRING !== $tokens[ $version_token ]['code'] ) ) {
+				$version_tags[ $i ] = null;
+				continue;
+			}
+
+			$version_tags[ $i ] = $version_token;
+		}
+
+		return $version_tags;
+	}
+
+	/**
+	 * Checks if the current block is experimental.
+	 *
+	 * @param File $phpcs_file The file being scanned.
+	 * @return bool Returns true if the current block is experimental.
+	 */
+	protected static function is_experimental_block( File $phpcs_file ) {
+		$block_json_filepath = dirname( $phpcs_file->getFilename() ) . DIRECTORY_SEPARATOR . 'block.json';
+
+		if ( isset( static::$cache[ $block_json_filepath ] ) ) {
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		if ( ! is_file( $block_json_filepath ) || ! is_readable( $block_json_filepath ) ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		// phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- this Composer package doesn't depend on WordPress.
+		$block_metadata = file_get_contents( $block_json_filepath );
+		if ( false === $block_metadata ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		$block_metadata = json_decode( $block_metadata, true );
+		if ( ! is_array( $block_metadata ) ) {
+			static::$cache[ $block_json_filepath ] = false;
+			return static::$cache[ $block_json_filepath ];
+		}
+
+		$experimental_flag                     = '__experimental';
+		static::$cache[ $block_json_filepath ] = array_key_exists( $experimental_flag, $block_metadata ) && ( false !== $block_metadata[ $experimental_flag ] );
+		return static::$cache[ $block_json_filepath ];
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
new file mode 100644
index 00000000000000..bf7dbc2fd85d3c
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Sniffs/NamingConventions/ValidBlockLibraryFunctionNameSniff.php
@@ -0,0 +1,172 @@
+<?php
+/**
+ * Gutenberg Coding Standards.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Sniffs\NamingConventions;
+
+use PHP_CodeSniffer\Files\File;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ *
+ * This sniff checks function names to ensure they adhere to specified prefixes
+ * determined by the parent directory name. It enforces that function names start
+ * with one of the allowed prefixes defined in the sniffer configuration.
+ *
+ * @link https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/README.md#naming-convention-for-php-functions
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ *
+ * @since   1.0.0
+ */
+final class ValidBlockLibraryFunctionNameSniff implements Sniff {
+	/**
+	 * Target prefixes.
+	 *
+	 * @var array
+	 */
+	public $prefixes = array();
+
+	/**
+	 * These functions are considered permissible and will be ignored by the sniffer.
+	 *
+	 * @var array
+	 */
+	public $allowed_functions = array();
+
+	/**
+	 * Registers the tokens that this sniff wants to listen for.
+	 *
+	 * @return array
+	 */
+	public function register() {
+		$this->onRegisterEvent();
+
+		return array( T_FUNCTION );
+	}
+
+	/**
+	 * Processes function tokens.
+	 *
+	 * @param File $phpcsFile The file being scanned.
+	 * @param int  $stackPtr  The position of the current token
+	 *                        in the stack passed in $tokens.
+	 *
+	 * @return void
+	 */
+	public function process( File $phpcsFile, $stackPtr ) {
+		$tokens = $phpcsFile->getTokens();
+		$token  = $tokens[ $stackPtr ];
+
+		if ( 'T_FUNCTION' !== $token['type'] ) {
+			return;
+		}
+
+		$this->processFunctionToken( $phpcsFile, $stackPtr );
+	}
+
+	/**
+	 * This method analyzes the function token and its name within the provided file.
+	 * It checks if the function name adheres to allowed prefixes based on the parent directory name.
+	 * If the function name is not valid, an error message is added to the code sniffer report.
+	 *
+	 * @param File $phpcsFile    The file being scanned.
+	 * @param int  $stackPointer The position of the current token
+	 *                           in the stack passed in $tokens.
+	 *
+	 * @return void
+	 */
+	private function processFunctionToken( File $phpcsFile, $stackPointer ) {
+
+		if ( empty( $this->prefixes ) ) {
+			// Nothing to process.
+			return;
+		}
+
+		$tokens         = $phpcsFile->getTokens();
+		$function_token = $phpcsFile->findNext( T_STRING, $stackPointer );
+
+		$wrapping_tokens_to_check = array(
+			T_CLASS,
+			T_INTERFACE,
+			T_TRAIT,
+		);
+
+		foreach ( $wrapping_tokens_to_check as $wrapping_token_to_check ) {
+			if ( false !== $phpcsFile->getCondition( $function_token, $wrapping_token_to_check, false ) ) {
+				// This sniff only processes functions, not class methods.
+				return;
+			}
+		}
+
+		$function_name = $tokens[ $function_token ]['content'];
+
+		if ( in_array( $function_name, $this->allowed_functions, true ) ) {
+			// The function name is included in the list of allowed functions; bypassing further checks.
+			return;
+		}
+
+		$parent_directory_name = basename( dirname( $phpcsFile->getFilename() ) );
+
+		$allowed_function_prefixes = array();
+		foreach ( $this->prefixes as $prefix ) {
+			$prefix                      = rtrim( $prefix, '_' );
+			$allowed_function_prefix     = $prefix . '_' . self::sanitize_directory_name( $parent_directory_name );
+			$allowed_function_prefixes[] = $allowed_function_prefix;
+			// Validate the name's correctness and ensure it does not end with an underscore.
+			$regexp = sprintf( '/^%s(|_.+)$/', preg_quote( $allowed_function_prefix, '/' ) );
+
+			if ( 1 === preg_match( $regexp, $function_name ) ) {
+				// The function has a valid prefix; bypassing further checks.
+				return;
+			}
+		}
+
+		$error_message = "The function name '{$function_name}()' is invalid."
+		. ' In this file, PHP function names must either match one of the allowed prefixes exactly or begin with one of them, followed by an underscore.'
+		. " The allowed prefixes are: '" . implode( "', '", $allowed_function_prefixes ) . "'.";
+		$phpcsFile->addError( $error_message, $function_token, 'FunctionNameInvalid' );
+	}
+
+	/**
+	 * The purpose of this method is to run callbacks
+	 * after the class properties have been set.
+	 */
+	private function onRegisterEvent() {
+		$this->prefixes          = self::sanitize( $this->prefixes );
+		$this->allowed_functions = self::sanitize( $this->allowed_functions );
+	}
+
+	/**
+	 * Sanitize a directory name by converting it to lowercase and replacing non-letter
+	 * and non-digit characters with underscores.
+	 *
+	 * @param string $directory_name Directory name.
+	 *
+	 * @return string
+	 */
+	private static function sanitize_directory_name( $directory_name ) {
+		// Convert to lowercase.
+		$directory_name = strtolower( $directory_name );
+
+		// Replace non-letter and non-digit characters with underscores.
+		return preg_replace( '/[^a-z0-9]/', '_', $directory_name );
+	}
+
+	/**
+	 * Sanitize an array of values by trimming each element and removing empty elements.
+	 *
+	 * @param array $values The values being sanitized.
+	 *
+	 * @return array
+	 */
+	private static function sanitize( $values ) {
+		$values = array_map( 'trim', $values );
+
+		return array_filter( $values );
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
new file mode 100644
index 00000000000000..f1be5ab00b0750
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/AbstractSniffUnitTest.php
@@ -0,0 +1,87 @@
+<?php
+/**
+ * An abstract class that all sniff unit tests must extend.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Tests;
+
+use PHP_CodeSniffer\Config;
+use PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest as BaseAbstractSniffUnitTest;
+use PHP_CodeSniffer\Ruleset;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * An abstract test class that contains common methods for all sniff unit tests.
+ */
+abstract class AbstractSniffUnitTest extends BaseAbstractSniffUnitTest {
+
+	/**
+	 * Holds the original Ruleset instance.
+	 *
+	 * @var Ruleset
+	 */
+	protected static $original_ruleset;
+
+	/**
+	 * This method resets the 'Gutenberg' ruleset in the $GLOBALS['PHP_CODESNIFFER_RULESETS']
+	 * to its original state.
+	 */
+	public static function tearDownAfterClass() {
+		parent::tearDownAfterClass();
+
+		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = static::$original_ruleset;
+		static::$original_ruleset                         = null;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	abstract protected function set_sniff_parameters( Sniff $sniff );
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	abstract protected function get_sniff_fqcn();
+
+	/**
+	 * Prepares the environment before executing tests. This is needed since
+	 * PHP_CodeSniffer\Tests\Standards\AbstractSniffUnitTest doesn't apply
+	 * sniff properties from the Gutenberg/ruleset.xml file.
+	 *
+	 * @param string $filename The name of the file being tested.
+	 * @param Config $config   The config data for the run.
+	 */
+	public function setCliValues( $filename, $config ) {
+		parent::setCliValues( $filename, $config );
+
+		$error_message = 'Cannot set sniff parameters required for the unit test.';
+		if ( ! isset( $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] )
+			|| ( ! $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] instanceof Ruleset )
+		) {
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
+		}
+
+		// Backup the original Ruleset instance.
+		static::$original_ruleset = $GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'];
+
+		$current_ruleset                                  = clone static::$original_ruleset;
+		$GLOBALS['PHP_CODESNIFFER_RULESETS']['Gutenberg'] = $current_ruleset;
+
+		$sniff_fqcn = $this->get_sniff_fqcn();
+		if ( ! isset( $current_ruleset->sniffs[ $sniff_fqcn ] ) ) {
+			throw new \RuntimeException( $error_message ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped -- this is non-production code.
+		}
+
+		$sniff = $current_ruleset->sniffs[ $sniff_fqcn ];
+		$this->set_sniff_parameters( $sniff );
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.inc
new file mode 100644
index 00000000000000..b65768541f32ae
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.inc
@@ -0,0 +1,98 @@
+<?php
+
+new Gutenberg_Class();
+new Non_Gutenberg_Class();
+Gutenberg_Class::SOME_CLASS_CONSTANT;
+Non_Gutenberg_Class::SOME_CLASS_CONSTANT;
+Gutenberg_Class::some_static_method();
+Non_Gutenberg_Class::some_static_method();
+Gutenberg_Class::$some_class_property;
+Non_Gutenberg_Class::$some_class_property;
+gutenberg_function();
+non_gutenberg_function();
+
+class Gutenberg_Class {
+	private function foo() {
+		new Gutenberg_Class();
+		new Non_Gutenberg_Class();
+		Gutenberg_Class::SOME_CLASS_CONSTANT;
+		Non_Gutenberg_Class::SOME_CLASS_CONSTANT;
+		Gutenberg_Class::some_static_method();
+		Non_Gutenberg_Class::some_static_method();
+		Gutenberg_Class::$some_class_property;
+		Non_Gutenberg_Class::$some_class_property;
+		gutenberg_function();
+		non_gutenberg_function();
+	}
+}
+
+class Non_Gutenberg_Class {
+	// Some code.
+
+	private function foo() {
+		new Gutenberg_Class();
+		new Non_Gutenberg_Class();
+		Gutenberg_Class::SOME_CLASS_CONSTANT;
+		Non_Gutenberg_Class::SOME_CLASS_CONSTANT;
+		Gutenberg_Class::some_static_method();
+		Non_Gutenberg_Class::some_static_method();
+		Gutenberg_Class::$some_class_property;
+		Non_Gutenberg_Class::$some_class_property;
+		gutenberg_function();
+		non_gutenberg_function();
+	}
+}
+
+gutenberg_prefixed_function();
+Gutenberg_prefixed_function();
+
+if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	gutenberg_prefixed_function();
+	Gutenberg_prefixed_function();
+}
+
+if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	// Nested conditions.
+	if (true) {
+		gutenberg_prefixed_function();
+		Gutenberg_prefixed_function();
+	}
+}
+
+if ( ! defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	// Nested conditions.
+	if (true) {
+		gutenberg_prefixed_function();
+		Gutenberg_prefixed_function();
+	}
+}
+
+$object = new Gutenberg_Prefixed_Class();
+Gutenberg_Prefixed_Class::some_function();
+
+if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	new Gutenberg_Prefixed_Class();
+	Gutenberg_Prefixed_Class::some_function();
+}
+
+if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	// Nested conditions.
+	if (true) {
+		new Gutenberg_Prefixed_Class();
+		Gutenberg_Prefixed_Class::some_function();
+	}
+}
+
+if ( ! defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	// Nested conditions.
+	if (true) {
+		new Gutenberg_Prefixed_Class();
+		Gutenberg_Prefixed_Class::some_function();
+	}
+}
+
+// Gutenberg_Class.
+//Gutenberg_Class.
+
+// Non_Gutenberg_Class.
+//Non_Gutenberg_Class.
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
new file mode 100644
index 00000000000000..79719fba6039db
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/ForbiddenFunctionsAndClassesUnitTest.php
@@ -0,0 +1,91 @@
+<?php
+/**
+ * Unit test class for Gutenberg Coding Standard.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
+
+use GutenbergCS\Gutenberg\Sniffs\CodeAnalysis\ForbiddenFunctionsAndClassesSniff;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * Unit test class for the ForbiddenFunctionsAndClassesSniff sniff.
+ */
+final class ForbiddenFunctionsAndClassesUnitTest extends AbstractSniffUnitTest {
+
+	/**
+	 * Returns the lines where errors should occur.
+	 *
+	 * @return array <int line number> => <int number of errors>
+	 */
+	public function getErrorList() {
+		return array(
+			3  => 1,
+			5  => 1,
+			7  => 1,
+			9  => 1,
+			11 => 1,
+
+			16 => 1,
+			18 => 1,
+			20 => 1,
+			22 => 1,
+			24 => 1,
+
+			33 => 1,
+			35 => 1,
+			37 => 1,
+			39 => 1,
+			41 => 1,
+
+			46 => 1,
+			47 => 1,
+			65 => 1,
+			66 => 1,
+
+			70 => 1,
+			71 => 1,
+			89 => 1,
+			90 => 1,
+		);
+	}
+
+	/**
+	 * Returns the lines where warnings should occur.
+	 *
+	 * @return array <int line number> => <int number of warnings>
+	 */
+	public function getWarningList() {
+		return array();
+	}
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	protected function get_sniff_fqcn() {
+		return ForbiddenFunctionsAndClassesSniff::class;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	public function set_sniff_parameters( Sniff $sniff ) {
+		$sniff->forbidden_functions = array(
+			'[Gg]utenberg.*',
+		);
+
+		$sniff->forbidden_classes = array(
+			'[Gg]utenberg.*',
+		);
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.inc
new file mode 100644
index 00000000000000..5c0677450a1d37
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.inc
@@ -0,0 +1,42 @@
+<?php
+
+if ( class_exists( 'Foo' ) ) {
+	return;
+}
+
+class Foo {
+}
+
+if ( ! class_exists( 'Bar' ) ) {
+	class Bar {
+		public function baz() {
+		}
+	}
+}
+
+class Baz {
+}
+
+if ( ! function_exists( 'quux' ) ) {
+	function quux() {
+	}
+}
+
+function blarg() {
+}
+
+class Gutenberg_Class {
+
+}
+
+class Class_Gutenberg {
+}
+
+class Class_Gutenberg_With_Some_Postifx {
+}
+
+function gutenberg_function() {
+}
+
+function _gutenberg_function() {
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
new file mode 100644
index 00000000000000..b4e26fd2e69c4f
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/CodeAnalysis/GuardedFunctionAndClassNamesUnitTest.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * Unit test class for Gutenberg Coding Standard.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\CodeAnalysis;
+
+use GutenbergCS\Gutenberg\Sniffs\CodeAnalysis\GuardedFunctionAndClassNamesSniff;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * Unit test class for the GuardedFunctionAndClassNames sniff.
+ */
+final class GuardedFunctionAndClassNamesUnitTest extends AbstractSniffUnitTest {
+
+	/**
+	 * Returns the lines where errors should occur.
+	 *
+	 * @return array <int line number> => <int number of errors>
+	 */
+	public function getErrorList() {
+		return array(
+			7  => 1,
+			17 => 1,
+			25 => 1,
+			35 => 1,
+		);
+	}
+
+	/**
+	 * Returns the lines where warnings should occur.
+	 *
+	 * @return array <int line number> => <int number of warnings>
+	 */
+	public function getWarningList() {
+		return array();
+	}
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	protected function get_sniff_fqcn() {
+		return GuardedFunctionAndClassNamesSniff::class;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	public function set_sniff_parameters( Sniff $sniff ) {
+		$sniff->functionsWhiteList = array(
+			'/^_?gutenberg.+/',
+		);
+
+		$sniff->classesWhiteList = array(
+			'/^Gutenberg.+/',
+			'/^.+_Gutenberg$/',
+		);
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc
new file mode 100644
index 00000000000000..aa8593b2e27577
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.inc
@@ -0,0 +1,629 @@
+<?php
+function foo() {
+	$result = do_action( 'some_filter', array() );
+	$result = do_action_ref_array( 'some_filter', array() );
+	$result = apply_filters( 'some_filter', array() );
+	$result = apply_filters_ref_array( 'some_filter', array() );
+
+	/**
+	 * @since
+	 * 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since invalid 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since 123
+	 */
+	$result = apply_filters( 'some_filter', array() );
+
+	$variable = 'some_value'; /** Some comment @since 123 */
+
+	$result = apply_filters( 'some_filter', array() );
+
+	/** @var This filter is documented in foo.php */
+	$result = apply_filters( 'some_filter', array() );
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	$result = apply_filters( 'some_filter', array() );
+}
+
+/**
+ * @since
+ * 123
+ */
+function bar() {
+}
+
+/**
+ * @since invalid 123
+ */
+function baz() {
+}
+
+/**
+ * @since 123
+ */
+function qux() {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+function quux() {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+function grault() {
+}
+
+$result = array_map( function ( $value ) {
+	return $value * 2; // Doubling each value
+}, array( 1, 2, 3, 4, 5 ) );
+
+class Foo {
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	protected function foobar_1() {}
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+class Foo_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+class Foo_2 {
+}
+
+/**
+ * @since 123
+ */
+class Foo_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+class Foo_4 {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+class Foo_5 {
+}
+
+abstract class Bar_Abstract {
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	abstract protected function foo_abstract();
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function apply_filters() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+abstract class Bar_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+abstract class Bar_2 {
+}
+
+/**
+ * @since 123
+ */
+abstract class Bar_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+abstract class Bar_4 {
+}
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+abstract class Bar_5 {
+}
+
+Trait Baz {
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public $foo_property;
+
+	/**
+	 * @since invalid 123
+	 */
+	protected $bar_property;
+
+	/**
+	 * @since 123
+	 */
+	public $baz_property;
+
+	public $qux_property = 'some_value'; /** Some comment @since 123 */
+
+	public $quux_property;
+
+	private $corge_property;
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public $grault_property;
+
+	protected function foobar() {
+		$result = do_action( 'some_filter', array() );
+		$result = do_action_ref_array( 'some_filter', array() );
+		$result = apply_filters( 'some_filter', array() );
+		$result = apply_filters_ref_array( 'some_filter', array() );
+
+		/**
+		 * @since
+		 * 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since invalid 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		/**
+		 * @since 123
+		 */
+		$result = apply_filters( 'some_filter', array() );
+
+		$variable = 'some_value'; /** Some comment @since 123 */
+
+		$result = apply_filters( 'some_filter', array() );
+
+		/** @var This filter is documented in foo.php */
+		$result = apply_filters( 'some_filter', array() );
+	}
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar() {
+	}
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz() {
+	}
+
+	/**
+	 * @since 123
+	 */
+	protected function qux() {
+	}
+
+	/** Some comment @since 123 */
+
+	public function quux() {
+		$result = array_map( function ( $value ) {
+			return $value * 2; // Doubling each value
+		}, array( 1, 2, 3, 4, 5 ) );
+	}
+
+	private function corge() {
+	}
+
+	function no_visibility_modifier() {}
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault() {
+	}
+}
+
+/**
+ * @since
+ * 123
+ */
+trait Baz_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+trait Baz_2 {
+}
+
+/**
+ * @since 123
+ */
+trait Baz_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+trait Baz_4 {
+}
+
+interface Qux {
+	public function foobar();
+
+	/**
+	 * @since
+	 * 123
+	 */
+	public function bar();
+
+	/**
+	 * @since invalid 123
+	 */
+	public function baz();
+
+	/**
+	 * @since 123
+	 */
+	public function qux();
+
+	/** Some comment @since 123 */
+
+	public function quux();
+
+	/**
+	 * @since 3.0.0
+	 * @since
+	 * @since MU (3.0.0)
+	 * @since invalid_value
+	 * @since
+	 */
+	public function grault();
+}
+
+/**
+ * @since
+ * 123
+ */
+interface Qux_1 {
+}
+
+/**
+ * @since invalid 123
+ */
+interface Qux_2 {
+}
+
+/**
+ * @since 123
+ */
+interface Qux_3 {
+}
+
+$variable = 'some_value'; /** Some comment @since 123 */
+
+interface Qux_4 {
+}
+
+$result = do_action( 'some_filter', array() );
+$result = do_action_ref_array( 'some_filter', array() );
+$result = apply_filters( 'some_filter', array() );
+$result = apply_filters_ref_array( 'some_filter', array() );
+
+/**
+ * @since
+ * 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since invalid 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since 123
+ */
+$result = apply_filters( 'some_filter', array() );
+
+$variable = 'some_value'; /** Some comment @since 123 */$
+
+$result = apply_filters( 'some_filter', array() );
+
+/** @var This filter is documented in foo.php */
+$result = apply_filters( 'some_filter', array() );
+
+/**
+ * @since 3.0.0
+ * @since
+ * @since MU (3.0.0)
+ * @since invalid_value
+ * @since
+ */
+$result = apply_filters( 'some_filter', array() );
+
+if ( ! function_exists( 'do_action' ) ) {
+	function do_action() {
+	}
+}
+
+if ( ! function_exists( 'do_action_ref_array' ) ) {
+	function do_action_ref_array() {
+	}
+}
+
+if ( ! function_exists( 'do_action_deprecated' ) ) {
+	function do_action_deprecated() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters' ) ) {
+	function apply_filters() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters_ref_array' ) ) {
+	function apply_filters_ref_array() {
+	}
+}
+
+if ( ! function_exists( 'apply_filters_deprecated' ) ) {
+	function apply_filters_deprecated() {
+	}
+}
+
+$foo = new do_action();
+$foo->do_action();
+$foo = new do_action_ref_array();
+$foo->do_action_ref_array();
+$foo = new do_action_deprecated();
+$foo->do_action_deprecated();
+$foo = new apply_filters();
+$foo->apply_filters();
+$foo = new apply_filters_ref_array();
+$foo->apply_filters_ref_array();
+$foo = new apply_filters_deprecated();
+$foo->apply_filters_deprecated();
+$foo = new non_hook_action();
+$foo->non_hook_action();
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
new file mode 100644
index 00000000000000..1318687768c9dd
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/Commenting/SinceTagUnitTest.php
@@ -0,0 +1,188 @@
+<?php
+/**
+ * Unit test class for Gutenberg Coding Standard.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\Commenting;
+
+use GutenbergCS\Gutenberg\Sniffs\Commenting\SinceTagSniff;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * Unit test class for the SinceTagSniff sniff.
+ */
+final class SinceTagUnitTest extends AbstractSniffUnitTest {
+
+	/**
+	 * Returns the lines where errors should occur.
+	 *
+	 * @return array <int line number> => <int number of errors>
+	 */
+	public function getErrorList() {
+		return array(
+			2   => 1,
+			3   => 1,
+			4   => 1,
+			5   => 1,
+			6   => 1,
+			9   => 1,
+			15  => 1,
+			26  => 1,
+			33  => 1,
+			35  => 1,
+			36  => 1,
+			42  => 1,
+			49  => 1,
+			62  => 1,
+			67  => 1,
+			69  => 1,
+			70  => 1,
+			79  => 1,
+			82  => 1,
+			88  => 1,
+			97  => 1,
+			99  => 1,
+			105 => 1,
+			107 => 1,
+			108 => 1,
+			112 => 1,
+			113 => 1,
+			114 => 1,
+			115 => 1,
+			116 => 1,
+			119 => 1,
+			125 => 1,
+			136 => 1,
+			142 => 1,
+			145 => 1,
+			152 => 1,
+			165 => 1,
+			174 => 1,
+			178 => 1,
+			180 => 1,
+			181 => 1,
+			188 => 1,
+			195 => 1,
+			208 => 1,
+			213 => 1,
+			215 => 1,
+			216 => 1,
+			221 => 1,
+			223 => 1,
+			229 => 1,
+			238 => 1,
+			240 => 1,
+			246 => 1,
+			248 => 1,
+			249 => 1,
+			253 => 1,
+			254 => 1,
+			255 => 1,
+			256 => 1,
+			257 => 1,
+			260 => 1,
+			266 => 1,
+			277 => 1,
+			283 => 1,
+			286 => 1,
+			293 => 1,
+			306 => 1,
+			315 => 1,
+			319 => 1,
+			321 => 1,
+			322 => 1,
+			329 => 1,
+			336 => 1,
+			349 => 1,
+			354 => 1,
+			356 => 1,
+			357 => 1,
+			362 => 1,
+			365 => 1,
+			371 => 1,
+			380 => 1,
+			382 => 1,
+			388 => 1,
+			390 => 1,
+			391 => 1,
+			395 => 1,
+			396 => 1,
+			397 => 1,
+			398 => 1,
+			399 => 1,
+			402 => 1,
+			408 => 1,
+			419 => 1,
+			426 => 1,
+			433 => 1,
+			446 => 1,
+			455 => 1,
+			459 => 1,
+			461 => 1,
+			462 => 1,
+			469 => 1,
+			476 => 1,
+			489 => 1,
+			492 => 1,
+			493 => 1,
+			496 => 1,
+			502 => 1,
+			513 => 1,
+			517 => 1,
+			519 => 1,
+			520 => 1,
+			526 => 1,
+			533 => 1,
+			546 => 1,
+			549 => 1,
+			550 => 1,
+			551 => 1,
+			552 => 1,
+			555 => 1,
+			561 => 1,
+			572 => 1,
+			579 => 1,
+			581 => 1,
+			582 => 1,
+			587 => 1,
+			592 => 1,
+			597 => 1,
+			602 => 1,
+			607 => 1,
+			612 => 1,
+		);
+	}
+
+	/**
+	 * Returns the lines where warnings should occur.
+	 *
+	 * @return array <int line number> => <int number of warnings>
+	 */
+	public function getWarningList() {
+		return array();
+	}
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	protected function get_sniff_fqcn() {
+		return SinceTagSniff::class;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	public function set_sniff_parameters( Sniff $sniff ) {
+		$sniff->minimumVisibility = 'protected';
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
new file mode 100644
index 00000000000000..14a2cb1a97dd71
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/NamingConventions/ValidBlockLibraryFunctionNameUnitTest.php
@@ -0,0 +1,79 @@
+<?php
+/**
+ * Unit test class for Gutenberg Coding Standard.
+ *
+ * @package gutenberg-coding-standards/gbc
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+namespace GutenbergCS\Gutenberg\Tests\NamingConventions;
+
+use GutenbergCS\Gutenberg\Sniffs\NamingConventions\ValidBlockLibraryFunctionNameSniff;
+use GutenbergCS\Gutenberg\Tests\AbstractSniffUnitTest;
+use PHP_CodeSniffer\Sniffs\Sniff;
+
+/**
+ * Unit test class for the ValidBlockLibraryFunctionNameSniff sniff.
+ */
+final class ValidBlockLibraryFunctionNameUnitTest extends AbstractSniffUnitTest {
+
+	/**
+	 * Returns the lines where errors should occur.
+	 *
+	 * @return array <int line number> => <int number of errors>
+	 */
+	public function getErrorList() {
+		return array(
+			8  => 1,
+			17 => 1,
+			26 => 1,
+			35 => 1,
+		);
+	}
+
+	/**
+	 * Returns the lines where warnings should occur.
+	 *
+	 * @return array <int line number> => <int number of warnings>
+	 */
+	public function getWarningList() {
+		return array();
+	}
+
+	/**
+	 * Returns the fully qualified class name (FQCN) of the sniff.
+	 *
+	 * @return string The fully qualified class name of the sniff.
+	 */
+	protected function get_sniff_fqcn() {
+		return ValidBlockLibraryFunctionNameSniff::class;
+	}
+
+	/**
+	 * Sets the parameters for the sniff.
+	 *
+	 * @throws RuntimeException If unable to set the ruleset parameters required for the test.
+	 *
+	 * @param Sniff $sniff The sniff being tested.
+	 */
+	public function set_sniff_parameters( Sniff $sniff ) {
+		$sniff->prefixes = array(
+			'block_core_',
+			'render_block_core_',
+			'register_block_core_',
+		);
+	}
+
+	/**
+	 * Get a list of all test files to check.
+	 *
+	 * @param string $testFileBase The base path that the unit tests files will have.
+	 *
+	 * @return string[]
+	 */
+	protected function getTestFiles( $testFileBase ) {
+		return array(
+			__DIR__ . '/../fixtures/block-library/src/my-block/index.inc',
+		);
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc b/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc
new file mode 100644
index 00000000000000..3f99eb9ca6b8e8
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/Tests/fixtures/block-library/src/my-block/index.inc
@@ -0,0 +1,36 @@
+<?php
+function block_core_my_block() {
+}
+
+function block_core_my_block_with_some_postfix() {
+}
+
+function block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+function render_block_core_my_block() {
+}
+
+function render_block_core_my_block_with_some_postfix() {
+}
+
+function render_block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+function register_block_core_my_block() {
+}
+
+function register_block_core_my_block_with_some_postfix() {
+}
+
+function register_block_core_my_blockwith_no_underscore_after_the_prefix() {
+}
+
+class MyClass {
+	// Represents a non-prefixed method within the class.
+	public function some_non_prefixed_class_method() {
+	}
+}
+
+function foo() {
+}
diff --git a/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml b/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml
new file mode 100644
index 00000000000000..503f7e09b85d70
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Gutenberg/ruleset.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0"?>
+<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Gutenberg" namespace="GutenbergCS\Gutenberg" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/squizlabs/PHP_CodeSniffer/master/phpcs.xsd">
+
+	<description>Gutenberg Coding Standards</description>
+
+	<rule ref="Gutenberg.CodeAnalysis.GuardedFunctionAndClassNames"/>
+	<rule ref="Gutenberg.CodeAnalysis.ForbiddenFunctionsAndClasses"/>
+	<rule ref="Gutenberg.NamingConventions.ValidBlockLibraryFunctionName"/>
+	<rule ref="Gutenberg.Commenting.SinceTag"/>
+
+</ruleset>
diff --git a/test/php/gutenberg-coding-standards/README.md b/test/php/gutenberg-coding-standards/README.md
new file mode 100644
index 00000000000000..500abe2e5b4812
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/README.md
@@ -0,0 +1,9 @@
+# Gutenberg Coding Standards for Gutenberg
+
+This project is a collection of [PHP_CodeSniffer](https://github.com/PHPCSStandards/PHP_CodeSniffer) rules (sniffs) to validate code developed for Gutenberg. It ensures code quality and adherence to coding conventions.
+
+## License
+
+This project is licensed under the same terms as the Gutenberg project.
+
+Please refer to this [LICENSE.md](../../../LICENSE.md) file for detailed license information.
diff --git a/test/php/gutenberg-coding-standards/Tests/bootstrap.php b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
new file mode 100644
index 00000000000000..547a1ce303835f
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/Tests/bootstrap.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Gutenberg Coding Standards (GBCS) Bootstrap File.
+ *
+ * Initializes the environment for running GBCS tests.
+ *
+ * @package gutenberg/gutenberg-coding-standards
+ * @link    https://github.com/WordPress/gutenberg/tree/trunk/test/php/gutenberg-coding-standards
+ */
+
+if ( ! defined( 'PHP_CODESNIFFER_IN_TESTS' ) ) {
+	define( 'PHP_CODESNIFFER_IN_TESTS', true );
+}
+
+$dir_separator = DIRECTORY_SEPARATOR;
+
+// Define the path to the PHPCS directory.
+$phpcs_path            = dirname( __DIR__ ) . $dir_separator . 'vendor' . $dir_separator . 'squizlabs' . $dir_separator . 'php_codesniffer';
+$autoload_script_path  = $phpcs_path . $dir_separator . 'autoload.php';
+$bootstrap_script_path = $phpcs_path . $dir_separator . 'tests' . $dir_separator . 'bootstrap.php';
+
+// Attempt to load the PHPCS autoloader.
+if ( ! file_exists( $autoload_script_path ) || ! file_exists( $bootstrap_script_path ) ) {
+	echo 'PHP_CodeSniffer not found. Please run "composer install".' . PHP_EOL;
+	exit( 1 );
+}
+
+require_once $autoload_script_path;
+require_once $bootstrap_script_path; // Support for PHPUnit 6.x+.
+
+/**
+ * Configure the environment to ignore tests from other coding standards.
+ */
+$available_standards = PHP_CodeSniffer\Util\Standards::getInstalledStandards();
+$ignored_standards   = array( 'Generic' );
+
+foreach ( $available_standards as $available_standard ) {
+	if ( 'Gutenberg' === $available_standard ) {
+		continue;
+	}
+
+	$ignored_standards[] = $available_standard;
+}
+
+$ignore_standards_string = implode( ',', $ignored_standards );
+
+// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.runtime_configuration_putenv -- This is non-production code.
+putenv( "PHPCS_IGNORE_TESTS={$ignore_standards_string}" );
+
+// Cleanup.
+unset( $dir_separator, $phpcs_path, $available_standards, $ignored_standards, $available_standard, $ignore_standards_string );
diff --git a/test/php/gutenberg-coding-standards/composer.json b/test/php/gutenberg-coding-standards/composer.json
new file mode 100644
index 00000000000000..2d79dc906a8d9e
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/composer.json
@@ -0,0 +1,67 @@
+{
+	"name": "gutenberg/gutenberg-coding-standards",
+	"type": "phpcodesniffer-standard",
+	"description": "PHP_CodeSniffer rules (sniffs) to enforce Gutenberg coding conventions",
+	"keywords": [
+		"phpcs",
+		"standards",
+		"static analysis",
+		"Gutenberg"
+	],
+	"license": "GPL-2.0-or-later",
+	"authors": [
+		{
+			"name": "Contributors",
+			"homepage": "https://github.com/WordPress/gutenberg/graphs/contributors"
+		}
+	],
+	"require": {
+		"php": ">=7.0",
+		"ext-libxml": "*",
+		"ext-tokenizer": "*",
+		"ext-xmlreader": "*",
+		"squizlabs/php_codesniffer": "^3.7.2",
+		"phpcsstandards/phpcsutils": "^1.0.8"
+	},
+	"require-dev": {
+		"phpcompatibility/php-compatibility": "^9.0",
+		"phpunit/phpunit": "^5.0 || ^6.0 || ^7.0",
+		"php-parallel-lint/php-parallel-lint": "^1.3.2",
+		"php-parallel-lint/php-console-highlighter": "^1.0.0",
+		"wp-coding-standards/wpcs": "^3.0"
+	},
+	"suggest": {
+		"ext-mbstring": "For improved results"
+	},
+	"config": {
+		"allow-plugins": {
+			"dealerdirect/phpcodesniffer-composer-installer": true
+		}
+	},
+	"scripts": {
+		"lint": [
+			"@php ./vendor/php-parallel-lint/php-parallel-lint/parallel-lint . -e php --show-deprecated --exclude vendor --exclude .git"
+		],
+		"check-cs": [
+			"@php ./vendor/squizlabs/php_codesniffer/bin/phpcs"
+		],
+		"fix-cs": [
+			"@php ./vendor/squizlabs/php_codesniffer/bin/phpcbf"
+		],
+		"run-tests": [
+			"@php ./vendor/phpunit/phpunit/phpunit --filter Gutenberg ./vendor/squizlabs/php_codesniffer/tests/AllTests.php --no-coverage"
+		],
+		"check-all": [
+			"@lint",
+			"@check-cs",
+			"@run-tests"
+		]
+	},
+	"scripts-descriptions": {
+		"lint": "Lint PHP files against parse errors.",
+		"check-cs": "Run the PHPCS script against the entire codebase.",
+		"fix-cs": "Run the PHPCBF script to fix all the autofixable violations on the codebase.",
+		"run-tests": "Run all the unit tests for the Gutenberg Coding Standards sniffs.",
+		"check-all": "Run all checks (lint, phpcs) and tests."
+	}
+}
diff --git a/test/php/gutenberg-coding-standards/phpunit.xml.dist b/test/php/gutenberg-coding-standards/phpunit.xml.dist
new file mode 100644
index 00000000000000..0e9d9cb5b75071
--- /dev/null
+++ b/test/php/gutenberg-coding-standards/phpunit.xml.dist
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit
+		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+		xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/6.3/phpunit.xsd"
+		backupGlobals="true"
+		bootstrap="./Tests/bootstrap.php"
+		beStrictAboutTestsThatDoNotTestAnything="false"
+		colors="true">
+
+	<testsuites>
+		<testsuite name="Gutenberg">
+			<directory suffix="UnitTest.php">./Gutenberg/Tests/</directory>
+		</testsuite>
+	</testsuites>
+
+</phpunit>
diff --git a/test/storybook-playwright/playwright.config.ts b/test/storybook-playwright/playwright.config.ts
index c89f3780c7229e..091398371e902b 100644
--- a/test/storybook-playwright/playwright.config.ts
+++ b/test/storybook-playwright/playwright.config.ts
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	outputDir: 'test-results/output',
 	reporter: [
 		[ 'html', { open: 'on-failure', outputFolder: 'test-results/report' } ],
 	],
+	fullyParallel: true,
 };
 
 export default config;
diff --git a/test/storybook-playwright/specs/button.spec.ts b/test/storybook-playwright/specs/button.spec.ts
new file mode 100644
index 00000000000000..d45fddfec0b5a1
--- /dev/null
+++ b/test/storybook-playwright/specs/button.spec.ts
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { expect, test } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	gotoStoryId,
+	getAllPropsPermutations,
+	testSnapshotForPropsConfig,
+} from '../utils';
+
+test.describe( 'Button', () => {
+	test.describe( 'variant states', () => {
+		test.beforeEach( async ( { page } ) => {
+			gotoStoryId( page, 'components-button--variant-states', {
+				decorators: { customE2EControls: 'show' },
+			} );
+		} );
+
+		getAllPropsPermutations( [
+			{
+				propName: '__next40pxDefaultSize',
+				valuesToTest: [ true, false ],
+			},
+		] ).forEach( ( propsConfig ) => {
+			test( `should render with ${ JSON.stringify(
+				propsConfig
+			) }`, async ( { page } ) => {
+				await testSnapshotForPropsConfig( page, propsConfig );
+			} );
+		} );
+	} );
+
+	test.describe( 'icon', () => {
+		test.beforeEach( async ( { page } ) => {
+			gotoStoryId( page, 'components-button--icon', {
+				decorators: { customE2EControls: 'show' },
+			} );
+		} );
+
+		getAllPropsPermutations( [
+			{
+				propName: '__next40pxDefaultSize',
+				valuesToTest: [ true, false ],
+			},
+		] ).forEach( ( propsConfig ) => {
+			test( `should render with ${ JSON.stringify(
+				propsConfig
+			) }`, async ( { page } ) => {
+				await testSnapshotForPropsConfig( page, propsConfig );
+			} );
+		} );
+	} );
+
+	test.describe( 'dashicon', () => {
+		test.beforeEach( async ( { page } ) => {
+			await gotoStoryId( page, 'components-button--dashicons', {
+				decorators: { css: 'wordpress' },
+			} );
+			// Wait for dashicons font to load
+			await page.waitForFunction( () =>
+				document.fonts.check( '20px dashicons' )
+			);
+		} );
+
+		test( 'should render with correct spacing', async ( { page } ) => {
+			expect( await page.screenshot() ).toMatchSnapshot();
+		} );
+	} );
+} );
diff --git a/test/storybook-playwright/specs/font-size-picker.spec.ts b/test/storybook-playwright/specs/font-size-picker.spec.ts
index 6aa11e89262c93..c2f6fc35806812 100644
--- a/test/storybook-playwright/specs/font-size-picker.spec.ts
+++ b/test/storybook-playwright/specs/font-size-picker.spec.ts
@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import { test, expect } from '@playwright/test';
 
 /**
  * Internal dependencies
diff --git a/test/storybook-playwright/specs/hstack.spec.ts b/test/storybook-playwright/specs/hstack.spec.ts
new file mode 100644
index 00000000000000..f9be20b6c12e0a
--- /dev/null
+++ b/test/storybook-playwright/specs/hstack.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { test } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	gotoStoryId,
+	getAllPropsPermutations,
+	testSnapshotForPropsConfig,
+} from '../utils';
+
+const PROP_VALUES_TO_TEST = [
+	{
+		propName: 'alignment',
+		valuesToTest: [
+			undefined,
+			'top',
+			'topLeft',
+			'topRight',
+			'left',
+			'center',
+			'right',
+			'bottom',
+			'bottomLeft',
+			'bottomRight',
+			'edge',
+			'stretch',
+		],
+	},
+	{
+		propName: 'direction',
+		valuesToTest: [ undefined, 'row', 'column' ],
+	},
+];
+
+test.describe( 'HStack', () => {
+	test.beforeEach( async ( { page } ) => {
+		await gotoStoryId( page, 'components-experimental-hstack--default', {
+			decorators: { marginChecker: 'show', customE2EControls: 'show' },
+		} );
+	} );
+
+	getAllPropsPermutations( PROP_VALUES_TO_TEST ).forEach( ( propsConfig ) => {
+		test( `should render with ${ JSON.stringify( propsConfig ) }`, async ( {
+			page,
+		} ) => {
+			await page.waitForSelector( '.components-h-stack' );
+
+			await testSnapshotForPropsConfig( page, propsConfig );
+		} );
+	} );
+} );
diff --git a/test/storybook-playwright/specs/popover.spec.ts b/test/storybook-playwright/specs/popover.spec.ts
index f11a20538edfc0..247e61ffc8138a 100644
--- a/test/storybook-playwright/specs/popover.spec.ts
+++ b/test/storybook-playwright/specs/popover.spec.ts
@@ -1,7 +1,7 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import { test, expect } from '@playwright/test';
 
 /**
  * Internal dependencies
diff --git a/test/storybook-playwright/specs/vstack.spec.ts b/test/storybook-playwright/specs/vstack.spec.ts
new file mode 100644
index 00000000000000..7a6bad02f79d60
--- /dev/null
+++ b/test/storybook-playwright/specs/vstack.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import { test } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	gotoStoryId,
+	getAllPropsPermutations,
+	testSnapshotForPropsConfig,
+} from '../utils';
+
+const PROP_VALUES_TO_TEST = [
+	{
+		propName: 'alignment',
+		valuesToTest: [
+			undefined,
+			'top',
+			'topLeft',
+			'topRight',
+			'left',
+			'center',
+			'right',
+			'bottom',
+			'bottomLeft',
+			'bottomRight',
+			'edge',
+			'stretch',
+		],
+	},
+	{
+		propName: 'direction',
+		valuesToTest: [ undefined, 'row', 'column' ],
+	},
+];
+
+test.describe( 'VStack', () => {
+	test.beforeEach( async ( { page } ) => {
+		await gotoStoryId( page, 'components-experimental-vstack--default', {
+			decorators: { marginChecker: 'show', customE2EControls: 'show' },
+		} );
+	} );
+
+	getAllPropsPermutations( PROP_VALUES_TO_TEST ).forEach( ( propsConfig ) => {
+		test( `should render with ${ JSON.stringify( propsConfig ) }`, async ( {
+			page,
+		} ) => {
+			await page.waitForSelector( '.components-v-stack' );
+
+			await testSnapshotForPropsConfig( page, propsConfig );
+		} );
+	} );
+} );
diff --git a/test/storybook-playwright/storybook/decorators/with-custom-controls.js b/test/storybook-playwright/storybook/decorators/with-custom-controls.js
new file mode 100644
index 00000000000000..0f8c8e059f0a01
--- /dev/null
+++ b/test/storybook-playwright/storybook/decorators/with-custom-controls.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useId, useState } from '@wordpress/element';
+
+export const WithCustomControls = ( Story, context ) => {
+	const textareaId = useId();
+	const [ partialProps, setPartialProps ] = useState( {} );
+
+	if ( context.globals.customE2EControls === 'hide' ) {
+		return <Story { ...context } />;
+	}
+
+	const contextWithControlledProps = {
+		...context,
+		// override args with the ones set by custom controls
+		args: { ...context.args, ...partialProps },
+	};
+
+	return (
+		<>
+			<Story { ...contextWithControlledProps } />
+
+			<p>Props:</p>
+			<pre>
+				{ JSON.stringify(
+					contextWithControlledProps.args,
+					undefined,
+					4
+				) }
+			</pre>
+
+			<hr />
+
+			<form
+				name="e2e-controls-form"
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+
+					const propsRawText = event.target.elements.props.value;
+
+					const propsParsed = JSON.parse( propsRawText );
+
+					setPartialProps( ( oldProps ) => ( {
+						...oldProps,
+						...propsParsed,
+					} ) );
+				} }
+			>
+				<p>
+					<label htmlFor={ textareaId }>Raw props</label>
+					<textarea name="props" id={ textareaId } />
+				</p>
+				<button type="submit">Set props</button>
+			</form>
+		</>
+	);
+};
diff --git a/test/storybook-playwright/storybook/main.js b/test/storybook-playwright/storybook/main.js
index ba05d2ee1c5693..b80833ca725f96 100644
--- a/test/storybook-playwright/storybook/main.js
+++ b/test/storybook-playwright/storybook/main.js
@@ -6,8 +6,10 @@ const baseConfig = require( '../../../storybook/main' );
 const config = {
 	...baseConfig,
 	addons: [ '@storybook/addon-toolbars' ],
+	docs: undefined,
+	staticDirs: undefined,
 	stories: [
-		'../../../packages/components/src/**/stories/e2e/*.@(js|tsx|mdx)',
+		'../../../packages/components/src/**/stories/e2e/*.story.@(js|tsx|mdx)',
 	],
 };
 
diff --git a/test/storybook-playwright/storybook/preview.js b/test/storybook-playwright/storybook/preview.js
index 911578742e33e1..5a176d59a82e2c 100644
--- a/test/storybook-playwright/storybook/preview.js
+++ b/test/storybook-playwright/storybook/preview.js
@@ -1 +1,28 @@
-export * from '../../../storybook/preview';
+/**
+ * Internal dependencies
+ */
+
+import * as basePreviewConfig from '../../../storybook/preview';
+import { WithCustomControls } from './decorators/with-custom-controls';
+
+export const globalTypes = {
+	...basePreviewConfig.globalTypes,
+	customE2EControls: {
+		name: 'Custom E2E Controls',
+		description:
+			'Shows custom UI used by e2e tests for setting props programmatically',
+		defaultValue: 'hide',
+		toolbar: {
+			icon: 'edit',
+			items: [
+				{ value: 'hide', title: 'Hide' },
+				{ value: 'show', title: 'Show' },
+			],
+		},
+	},
+};
+export const decorators = [
+	...basePreviewConfig.decorators,
+	WithCustomControls,
+];
+export const parameters = { ...basePreviewConfig.parameters };
diff --git a/test/storybook-playwright/storybook/webpack.config.js b/test/storybook-playwright/storybook/webpack.config.js
deleted file mode 100644
index 1c6d2f700bc594..00000000000000
--- a/test/storybook-playwright/storybook/webpack.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-const baseConfig = require( '../../../storybook/webpack.config' );
-
-module.exports = baseConfig;
diff --git a/test/storybook-playwright/utils.ts b/test/storybook-playwright/utils.ts
index 80be7297c88437..61ab7b3552edd2 100644
--- a/test/storybook-playwright/utils.ts
+++ b/test/storybook-playwright/utils.ts
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 const STORYBOOK_PORT = '50241';
 
@@ -9,6 +10,7 @@ type Decorators = {
 	css?: 'none' | 'basic' | 'wordpress';
 	direction?: 'ltr' | 'rtl';
 	marginChecker?: 'show' | 'hide';
+	customE2EControls?: 'show' | 'hide';
 };
 type Options = { decorators?: Decorators };
 
@@ -19,7 +21,7 @@ const buildDecoratorString = ( decorators: Decorators = {} ) => {
 	return decoratorParamStrings.join( ';' );
 };
 
-export const gotoStoryId = (
+export const gotoStoryId = async (
 	page: Page,
 	storyId: string,
 	{ decorators }: Options = {}
@@ -33,8 +35,72 @@ export const gotoStoryId = (
 
 	params.set( 'id', storyId );
 
-	page.goto(
+	await page.goto(
 		`http://localhost:${ STORYBOOK_PORT }/iframe.html?${ params.toString() }`,
 		{ waitUntil: 'load' }
 	);
 };
+
+/**
+ * Generate all possible permutations of those controls.
+ *
+ * @param propsConfig
+ */
+export const getAllPropsPermutations = (
+	propsConfig: {
+		propName: string;
+		valuesToTest: any[];
+	}[]
+) => {
+	const allPropsPermutations: Record< string, any >[] = [];
+
+	const iterateOverNextPropValues = async (
+		remainingProps: typeof propsConfig,
+		accProps: Record< string, any >
+	) => {
+		const [ propObject, ...restProps ] = remainingProps;
+
+		// Test all values for the given prop.
+		for ( const value of propObject.valuesToTest ) {
+			const valueAsString = value === undefined ? 'undefined' : value;
+			const newAccProps = {
+				...accProps,
+				[ propObject.propName ]: valueAsString,
+			};
+
+			if ( restProps.length === 0 ) {
+				// If we exhausted all of the props to set for this specific combination,
+				// let's add this combination to the `allPropsPermutations` array.
+				allPropsPermutations.push( newAccProps );
+			} else {
+				// If there are more props to iterate through, let's do that through
+				// recursively calling this function.
+				iterateOverNextPropValues( restProps, newAccProps );
+			}
+		}
+	};
+
+	// Start!
+	iterateOverNextPropValues( propsConfig, {} );
+
+	return allPropsPermutations;
+};
+
+export const testSnapshotForPropsConfig = async (
+	page: Page,
+	propsConfig: Record< string, any >
+) => {
+	const textarea = await page.getByLabel( 'Raw props', { exact: true } );
+	const submitButton = await page.getByRole( 'button', {
+		name: 'Set props',
+		exact: true,
+	} );
+
+	await textarea.type( JSON.stringify( propsConfig ) );
+
+	await submitButton.click();
+
+	expect(
+		await page.screenshot( { animations: 'disabled' } )
+	).toMatchSnapshot();
+};
diff --git a/test/unit/config/global-mocks.js b/test/unit/config/global-mocks.js
index 8fac04b2151ad6..ce64f03b514be8 100644
--- a/test/unit/config/global-mocks.js
+++ b/test/unit/config/global-mocks.js
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { TextDecoder, TextEncoder } from 'node:util';
+import { Blob as BlobPolyfill, File as FilePolyfill } from 'node:buffer';
+
 jest.mock( '@wordpress/compose', () => {
 	return {
 		...jest.requireActual( '@wordpress/compose' ),
@@ -6,16 +12,40 @@ jest.mock( '@wordpress/compose', () => {
 } );
 
 /**
- * The new gallery block format is not compatible with the use_BalanceTags option
- * so a flag is set in lib/compat.php to allow disabling the new block in this instance.
- * This flag needs to be mocked here to ensure tests and fixtures run with the v2
- * version of the Gallery block enabled.
- *
- * Note: This should be removed when the minimum required WP version is >= 5.9.
+ * client-zip is meant to be used in a browser and is therefore released as an ES6 module only,
+ * in order to use it in node environment, we need to mock it.
+ * See: https://github.com/Touffy/client-zip/issues/28
+ */
+jest.mock( 'client-zip', () => ( {
+	downloadZip: jest.fn(),
+} ) );
+
+global.ResizeObserver = require( 'resize-observer-polyfill' );
+
+/**
+ * The following mock is for block integration tests that might render
+ * components leveraging DOMRect. For example, the Cover block which now renders
+ * its ResizableBox control via the BlockPopover component.
+ */
+if ( ! window.DOMRect ) {
+	window.DOMRect = class DOMRect {};
+}
+
+/**
+ * Polyfill for Element.scrollIntoView().
+ * Necessary because it's not implemented in jsdom, and likely will never be.
  *
+ * @see https://github.com/jsdom/jsdom/issues/1695
  */
-if ( ! window.wp?.galleryBlockV2Enabled ) {
-	window.wp = { ...window.wp, galleryBlockV2Enabled: true };
+global.Element.prototype.scrollIntoView = jest.fn();
+
+if ( ! global.TextDecoder ) {
+	global.TextDecoder = TextDecoder;
+}
+if ( ! global.TextEncoder ) {
+	global.TextEncoder = TextEncoder;
 }
 
-global.ResizeObserver = require( 'resize-observer-polyfill' );
+// Override jsdom built-ins with native node implementation.
+global.Blob = BlobPolyfill;
+global.File = FilePolyfill;
diff --git a/test/unit/config/gutenberg-env.js b/test/unit/config/gutenberg-env.js
new file mode 100644
index 00000000000000..f6ea2d16c1c79d
--- /dev/null
+++ b/test/unit/config/gutenberg-env.js
@@ -0,0 +1,13 @@
+/*
+ * Feature flag guarding features specific to WordPress core.
+ * It's important to set it to "true" in the test environment
+ * to ensure the Gutenberg plugin can be cleanly merged into
+ * WordPress core.
+ */
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_WORDPRESS_CORE = true;
+
+// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
+// eslint-disable-next-line @wordpress/wp-global-usage
+globalThis.IS_GUTENBERG_PLUGIN =
+	String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true';
diff --git a/test/unit/config/is-gutenberg-plugin.js b/test/unit/config/is-gutenberg-plugin.js
deleted file mode 100644
index 7af5e4ad9a8647..00000000000000
--- a/test/unit/config/is-gutenberg-plugin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-global.process.env = {
-	...global.process.env,
-	/*
-	Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-
-	The conversion to boolean is required here. Why? Package.json defines
-	IS_GUTENBERG_PLUGIN as follows:
-
-		"config": {
-			"IS_GUTENBERG_PLUGIN": true
-		}
-
-	Webpack then replaces references to IS_GUTENBERG_PLUGIN with a literal value `true`.
-	The file you are reading right now, however, receives a string value "true":
-
-		"true" === process.env.npm_package_config_IS_GUTENBERG_PLUGIN
-
-	The code can only work consistently in both environments when the value of
-	IS_GUTENBERG_PLUGIN is consistent. For this reason, the line below turns the
-	string representation of IS_GUTENBERG_PLUGIN into a boolean value.
-	*/
-	// eslint-disable-next-line @wordpress/is-gutenberg-plugin
-	IS_GUTENBERG_PLUGIN:
-		String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) === 'true',
-};
diff --git a/test/unit/config/matchers/to-be-positioned-popover.js b/test/unit/config/matchers/to-be-positioned-popover.js
new file mode 100644
index 00000000000000..a7f056623fa891
--- /dev/null
+++ b/test/unit/config/matchers/to-be-positioned-popover.js
@@ -0,0 +1,23 @@
+/**
+ * Asserts that the specified popover has already been positioned.
+ * Necessary because it will be positioned a bit later after it's displayed.
+ *
+ * @param {HTMLElement} element Popover element.
+ */
+function toBePositionedPopover( element ) {
+	const popover = element?.closest( '.components-popover' );
+	const isPopoverPositioned = popover?.classList.contains( 'is-positioned' );
+	const pass = !! isPopoverPositioned;
+
+	return {
+		pass,
+		message: () => {
+			const is = pass ? 'is' : 'is not';
+			return ! popover
+				? `Received element ${ is } a popover element or its descendant.`
+				: `Received element ${ is } positioned`;
+		},
+	};
+}
+
+expect.extend( { toBePositionedPopover } );
diff --git a/test/unit/config/testing-library.js b/test/unit/config/testing-library.js
index dd8c725c6f4ae6..8f8c1bab711ad2 100644
--- a/test/unit/config/testing-library.js
+++ b/test/unit/config/testing-library.js
@@ -1,3 +1,4 @@
 require( '@testing-library/jest-dom' );
 require( 'snapshot-diff/extend-expect' );
 require( './matchers/to-match-style-diff-snapshot' );
+require( './matchers/to-be-positioned-popover' );
diff --git a/test/unit/config/wasm-stub.js b/test/unit/config/wasm-stub.js
new file mode 100644
index 00000000000000..0a77fdcfdd6914
--- /dev/null
+++ b/test/unit/config/wasm-stub.js
@@ -0,0 +1 @@
+// Stub file for Jest.
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 77d7818bacc852..8d363cc46e9157 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -13,14 +13,20 @@ module.exports = {
 	moduleNameMapper: {
 		[ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]:
 			'packages/$1/src',
+		'.+\\.wasm$': '<rootDir>/test/unit/config/wasm-stub.js',
 	},
 	preset: '@wordpress/jest-preset-default',
 	setupFiles: [
 		'<rootDir>/test/unit/config/global-mocks.js',
-		'<rootDir>/test/unit/config/is-gutenberg-plugin.js',
+		'<rootDir>/test/unit/config/gutenberg-env.js',
 	],
-	setupFilesAfterEnv: [ '<rootDir>/test/unit/config/testing-library.js' ],
-	testURL: 'http://localhost',
+	setupFilesAfterEnv: [
+		'<rootDir>/test/unit/config/testing-library.js',
+		'<rootDir>/test/unit/mocks/match-media.js',
+	],
+	testEnvironmentOptions: {
+		url: 'http://localhost/',
+	},
 	testPathIgnorePatterns: [
 		'/.git/',
 		'/node_modules/',
@@ -33,13 +39,22 @@ module.exports = {
 		'<rootDir>/.+.native.js$',
 		'/packages/react-native-*',
 	],
+	resolver: '<rootDir>/test/unit/scripts/resolver.js',
 	transform: {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
+	transformIgnorePatterns: [
+		'/node_modules/(?!(docker-compose|yaml|preact|@preact|parsel-js)/)',
+		'\\.pnp\\.[^\\/]+$',
+	],
 	snapshotSerializers: [
 		'@emotion/jest/serializer',
 		'snapshot-diff/serializer',
 	],
+	snapshotFormat: {
+		escapeString: false,
+		printBasicPrototype: false,
+	},
 	watchPlugins: [
 		'jest-watch-typeahead/filename',
 		'jest-watch-typeahead/testname',
diff --git a/test/unit/mocks/match-media.js b/test/unit/mocks/match-media.js
new file mode 100644
index 00000000000000..3a9ff7b901ff15
--- /dev/null
+++ b/test/unit/mocks/match-media.js
@@ -0,0 +1,22 @@
+// Mock `matchMedia` so that all animations are skipped,
+// since js-dom does not fully support CSS animations.
+// Example: https://github.com/jsdom/jsdom/issues/3239
+const originalMatchMedia = window.matchMedia;
+const mockedMatchMedia = jest.fn( ( query ) => {
+	if ( /prefers-reduced-motion/.test( query ) ) {
+		return {
+			...originalMatchMedia( query ),
+			matches: true,
+		};
+	}
+
+	return originalMatchMedia( query );
+} );
+
+beforeAll( () => {
+	window.matchMedia = jest.fn( mockedMatchMedia );
+} );
+
+afterAll( () => {
+	window.matchMedia = originalMatchMedia;
+} );
diff --git a/test/unit/scripts/resolver.js b/test/unit/scripts/resolver.js
new file mode 100644
index 00000000000000..7672bb723e1248
--- /dev/null
+++ b/test/unit/scripts/resolver.js
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+module.exports = ( path, options ) => {
+	// Call the defaultResolver, so we leverage its cache, error handling, etc.
+	return options.defaultResolver( path, {
+		...options,
+		// Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+		packageFilter: ( pkg ) => {
+			// This is a workaround for https://github.com/uuidjs/uuid/pull/616
+			//
+			// jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+			// but uuid v8 only offers an ESM browser export and not a CommonJS one. Jest does not yet
+			// support ESM modules natively, so this causes a Jest error related to trying to parse
+			// "export" syntax.
+			//
+			// This workaround prevents Jest from considering uuid's module-based exports at all;
+			// it falls back to uuid's CommonJS+node "main" property.
+			//
+			// Once we're able to migrate our Jest config to ESM and a browser crypto
+			// implementation is available for the browser+ESM version of uuid to use (eg, via
+			// https://github.com/jsdom/jsdom/pull/3352 or a similar polyfill), this can go away.
+			if (
+				pkg.name === 'uuid' ||
+				pkg.name === 'react-colorful' ||
+				pkg.name === '@eslint/eslintrc' ||
+				pkg.name === 'expect' ||
+				pkg.name === 'nanoid'
+			) {
+				delete pkg.exports;
+				delete pkg.module;
+			}
+			return pkg;
+		},
+	} );
+};
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index f2c30984141fb2..c05318d5b060f3 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -2,38 +2,34 @@
  * External dependencies
  */
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
-const { join, sep } = require( 'path' );
-const fastGlob = require( 'fast-glob' );
+const { join, sep, basename } = require( 'path' );
+const { realpathSync } = require( 'fs' );
 
 /**
  * WordPress dependencies
  */
-const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+const { PhpFilePathsPlugin } = require( '@wordpress/scripts/utils' );
 
 /**
  * Internal dependencies
  */
 const { baseConfig, plugins, stylesTransform } = require( './shared' );
 
-/*
- * Matches a block's filepaths in the form build-module/<filename>.js
- */
-const blockViewRegex = new RegExp(
-	/build-module\/(?<filename>.*\/view.*).js$/
-);
-
 /**
  * We need to automatically rename some functions when they are called inside block files,
  * but have been declared elsewhere. This way we can call Gutenberg override functions, but
  * the block will still call the core function when updates are back ported.
  */
 const prefixFunctions = [
-	'build_query_vars_from_query_block',
+	'wp_apply_colors_support',
 	'wp_enqueue_block_support_styles',
 	'wp_get_typography_font_size_value',
 	'wp_style_engine_get_styles',
+	'wp_get_global_settings',
 ];
 
+const classesToSuffix = [ 'WP_Navigation_Block_Renderer' ];
+
 /**
  * Escapes the RegExp special characters.
  *
@@ -45,163 +41,183 @@ function escapeRegExp( string ) {
 	return string.replace( /[\\^$.*+?()[\]{}|]/g, '\\$&' );
 }
 
-const createEntrypoints = () => {
-	/*
-	 * Returns an array of paths to block view files within the `@wordpress/block-library` package.
-	 * These paths can be matched by the regex `blockViewRegex` in order to extract
-	 * the block's filename.
-	 *
-	 * Returns an empty array if no files were found.
-	 */
-	const blockViewScriptPaths = fastGlob.sync(
-		'./packages/block-library/build-module/**/view*.js'
-	);
-
-	/*
-	 * Go through the paths found above, in order to define webpack entry points for
-	 * each block's view.js file.
-	 */
-	return blockViewScriptPaths.reduce( ( entries, scriptPath ) => {
-		const result = scriptPath.match( blockViewRegex );
-		if ( ! result?.groups?.filename ) {
-			return entries;
-		}
-
-		return {
-			...entries,
-			[ result.groups.filename ]: scriptPath,
-		};
-	}, {} );
-};
-
-module.exports = {
-	...baseConfig,
-	name: 'blocks',
-	entry: createEntrypoints(),
-	output: {
-		devtoolNamespace: 'wp',
-		filename: './build/block-library/blocks/[name].min.js',
-		path: join( __dirname, '..', '..' ),
-	},
-	plugins: [
-		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
-		new CopyWebpackPlugin( {
-			patterns: [].concat(
-				[
-					'style',
-					'style-rtl',
-					'editor',
-					'editor-rtl',
-					'theme',
-					'theme-rtl',
-				].map( ( filename ) => ( {
-					from: `./packages/block-library/build-style/*/${ filename }.css`,
-					to( { absoluteFilename } ) {
-						const [ , dirname ] = absoluteFilename.match(
-							new RegExp(
-								`([\\w-]+)${ escapeRegExp(
-									sep
-								) }${ filename }\\.css$`
-							)
-						);
-
-						return join(
-							'build/block-library/blocks',
-							dirname,
-							filename + '.css'
-						);
-					},
-					transform: stylesTransform,
-				} ) ),
-				Object.entries( {
-					'./packages/block-library/src/':
-						'build/block-library/blocks/',
-					'./packages/edit-widgets/src/blocks/':
-						'build/edit-widgets/blocks/',
-					'./packages/widgets/src/blocks/': 'build/widgets/blocks/',
-				} ).flatMap( ( [ from, to ] ) => [
-					{
-						from: `${ from }/**/index.php`,
+module.exports = [
+	{
+		...baseConfig,
+		name: 'blocks',
+		entry: {},
+		output: {
+			path: join( __dirname, '..', '..' ),
+		},
+		plugins: [
+			...plugins,
+			new PhpFilePathsPlugin( {
+				context: './packages/block-library/src/',
+				props: [ 'render', 'variations' ],
+			} ),
+			new CopyWebpackPlugin( {
+				patterns: [].concat(
+					[
+						'style',
+						'style-rtl',
+						'editor',
+						'editor-rtl',
+						'theme',
+						'theme-rtl',
+					].map( ( filename ) => ( {
+						from: `./packages/block-library/build-style/*/${ filename }.css`,
 						to( { absoluteFilename } ) {
 							const [ , dirname ] = absoluteFilename.match(
 								new RegExp(
 									`([\\w-]+)${ escapeRegExp(
 										sep
-									) }index\\.php$`
+									) }${ filename }\\.css$`
 								)
 							);
 
-							return join( to, `${ dirname }.php` );
+							return join(
+								'build/block-library/blocks',
+								dirname,
+								filename + '.css'
+							);
 						},
-						transform: ( content ) => {
-							const prefix = 'gutenberg_';
-							content = content.toString();
+						transform: stylesTransform,
+					} ) ),
+					Object.entries( {
+						'./packages/block-library/src/':
+							'build/block-library/blocks/',
+						'./packages/edit-widgets/src/blocks/':
+							'build/edit-widgets/blocks/',
+						'./packages/widgets/src/blocks/':
+							'build/widgets/blocks/',
+					} ).flatMap( ( [ from, to ] ) => [
+						{
+							from: `${ from }/**/*.php`,
+							to( { absoluteFilename } ) {
+								const [ , dirname, fileBasename ] =
+									absoluteFilename.match(
+										new RegExp(
+											`([\\w-]+)${ escapeRegExp(
+												sep
+											) }([\\w-]+)\\.php$`
+										)
+									);
+								if ( fileBasename === 'index' ) {
+									return join( to, `${ dirname }.php` );
+								}
+								return join(
+									to,
+									dirname,
+									`${ fileBasename }.php`
+								);
+							},
+							filter: ( filepath ) => {
+								return (
+									basename( filepath ) === 'index.php' ||
+									PhpFilePathsPlugin.paths.includes(
+										realpathSync( filepath ).replace(
+											/\\/g,
+											'/'
+										)
+									)
+								);
+							},
+							transform: ( content ) => {
+								const prefix = 'gutenberg_';
+								const classSuffix = 'Gutenberg';
+								content = content.toString();
 
-							// Within content, search and prefix any function calls from
-							// `prefixFunctions` list. This is needed because some functions
-							// are called inside block files, but have been declared elsewhere.
-							// So with the rename we can call Gutenberg override functions, but the
-							// block will still call the core function when updates are back ported.
-							content = content.replace(
-								new RegExp( prefixFunctions.join( '|' ), 'g' ),
-								( match ) =>
-									`${ prefix }${ match.replace(
-										/^wp_/,
-										''
-									) }`
-							);
+								// Within content, search and prefix any function calls from the
+								// `prefixFunctions` list. This is needed because some functions
+								// are called inside block files, but have been declared elsewhere.
+								// So with the rename we can call Gutenberg override functions, but the
+								// block will still call the core function when updates are back ported.
+								content = content.replace(
+									new RegExp(
+										prefixFunctions.join( '|' ),
+										'g'
+									),
+									( match ) =>
+										`${ prefix }${ match.replace(
+											/^wp_/,
+											''
+										) }`
+								);
 
-							// Within content, search for any function definitions. For
-							// each, replace every other reference to it in the file.
-							return (
-								Array.from(
-									content.matchAll(
-										/^\s*function ([^\(]+)/gm
-									)
-								)
-									.reduce( ( result, [ , functionName ] ) => {
-										// Prepend the Gutenberg prefix, substituting any
-										// other core prefix (e.g. "wp_").
-										return result.replace(
-											new RegExp( functionName, 'g' ),
-											( match ) =>
-												prefix +
-												match.replace( /^wp_/, '' )
-										);
-									}, content )
-									// The core blocks override procedure takes place in
-									// the init action default priority to ensure that core
-									// blocks would have been registered already. Since the
-									// blocks implementations occur at the default priority
-									// and due to WordPress hooks behavior not considering
-									// mutations to the same priority during another's
-									// callback, the Gutenberg build blocks are modified
-									// to occur at a later priority.
-									.replace(
-										/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
-										'$1, 20'
+								// Within content, search and prefix any classes calls from the
+								// `classesToSuffix` list. This is needed because some classes
+								// are called inside block files, but also exist in core.
+								// With the rename we can use the Gutenberg class in the plugin,
+								// without having to worry about duplicate class names with core.
+								content = content.replace(
+									new RegExp(
+										classesToSuffix.join( '|' ),
+										'g'
+									),
+									( match ) => `${ match }_${ classSuffix }`
+								);
+
+								// Within content, search for any function definitions. For
+								// each, replace every other reference to it in the file.
+								return (
+									Array.from(
+										content.matchAll(
+											/^\s*function ([^\(]+)/gm
+										)
 									)
-							);
+										.reduce(
+											( result, [ , functionName ] ) => {
+												// Prepend the Gutenberg prefix, substituting any
+												// other core prefix (e.g. "wp_").
+												return result.replace(
+													new RegExp(
+														functionName +
+															'(?![a-zA-Z0-9_])',
+														'g'
+													),
+													( match ) =>
+														prefix +
+														match.replace(
+															/^wp_/,
+															''
+														)
+												);
+											},
+											content
+										)
+										// The core blocks override procedure takes place in
+										// the init action default priority to ensure that core
+										// blocks would have been registered already. Since the
+										// blocks implementations occur at the default priority
+										// and due to WordPress hooks behavior not considering
+										// mutations to the same priority during another's
+										// callback, the Gutenberg build blocks are modified
+										// to occur at a later priority.
+										.replace(
+											/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
+											'$1, 20'
+										)
+								);
+							},
+							noErrorOnMissing: true,
 						},
-						noErrorOnMissing: true,
-					},
-					{
-						from: `${ from }/*/block.json`,
-						to( { absoluteFilename } ) {
-							const [ , dirname ] = absoluteFilename.match(
-								new RegExp(
-									`([\\w-]+)${ escapeRegExp(
-										sep
-									) }block\\.json$`
-								)
-							);
+						{
+							from: `${ from }/*/block.json`,
+							to( { absoluteFilename } ) {
+								const [ , dirname ] = absoluteFilename.match(
+									new RegExp(
+										`([\\w-]+)${ escapeRegExp(
+											sep
+										) }block\\.json$`
+									)
+								);
 
-							return join( to, dirname, 'block.json' );
+								return join( to, dirname, 'block.json' );
+							},
 						},
-					},
-				] )
-			),
-		} ),
-	].filter( Boolean ),
-};
+					] )
+				),
+			} ),
+		].filter( Boolean ),
+	},
+];
diff --git a/tools/webpack/development.js b/tools/webpack/development.js
index cbfe9c40f6efcd..88ac4fba42f202 100644
--- a/tools/webpack/development.js
+++ b/tools/webpack/development.js
@@ -33,7 +33,7 @@ module.exports = [
 		name: 'react-refresh-runtime',
 		entry: {
 			'react-refresh-runtime': {
-				import: 'react-refresh/runtime.js',
+				import: 'react-refresh/runtime',
 				library: {
 					name: 'ReactRefreshRuntime',
 					type: 'window',
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 30f73a82fa0da2..4459cc063d0016 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -2,7 +2,9 @@
  * External dependencies
  */
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const MomentTimezoneDataPlugin = require( 'moment-timezone-data-webpack-plugin' );
 const { join } = require( 'path' );
+const { readdirSync } = require( 'node:fs' );
 
 /**
  * WordPress dependencies
@@ -15,7 +17,12 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac
 /**
  * Internal dependencies
  */
-const { dependencies } = require( '../../package' );
+const packageDirs = readdirSync(
+	new URL( '../packages', `file://${ __dirname }` ),
+	{
+		withFileTypes: true,
+	}
+).flatMap( ( dirent ) => ( dirent.isDirectory() ? [ dirent.name ] : [] ) );
 const { baseConfig, plugins, stylesTransform } = require( './shared' );
 
 const WORDPRESS_NAMESPACE = '@wordpress/';
@@ -23,7 +30,19 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // Experimental or other packages that should be private are bundled when used.
 // That way, we can iterate on these package without making them part of the public API.
 // See: https://github.com/WordPress/gutenberg/pull/19809
-const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ];
+//
+// !!
+// This list must be kept in sync with the matching list in packages/dependency-extraction-webpack-plugin/lib/util.js
+// !!
+const BUNDLED_PACKAGES = [
+	'@wordpress/dataviews',
+	'@wordpress/dataviews/wp',
+	'@wordpress/icons',
+	'@wordpress/interface',
+	'@wordpress/sync',
+	'@wordpress/undo-manager',
+	'@wordpress/fields',
+];
 
 // PHP files in packages that have to be copied during build.
 const bundledPackagesPhpConfig = [
@@ -70,14 +89,23 @@ const bundledPackagesPhpConfig = [
 	},
 } ) );
 
-const gutenbergPackages = Object.keys( dependencies )
-	.filter(
-		( packageName ) =>
-			! BUNDLED_PACKAGES.includes( packageName ) &&
-			packageName.startsWith( WORDPRESS_NAMESPACE ) &&
-			! packageName.startsWith( WORDPRESS_NAMESPACE + 'react-native' )
-	)
-	.map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
+/** @type {Array<string>} */
+const gutenbergScripts = [];
+for ( const packageDir of packageDirs ) {
+	const packageJson = require(
+		`${ WORDPRESS_NAMESPACE }${ packageDir }/package.json`
+	);
+
+	if ( ! packageJson.wpScript ) {
+		continue;
+	}
+
+	if ( BUNDLED_PACKAGES.includes( packageJson.name ) ) {
+		continue;
+	}
+
+	gutenbergScripts.push( packageDir );
+}
 
 const exportDefaultPackages = [
 	'api-fetch',
@@ -90,41 +118,20 @@ const exportDefaultPackages = [
 	'warning',
 ];
 
-const vendors = {
-	react: [
-		'react/umd/react.development.js',
-		'react/umd/react.production.min.js',
-	],
-	'react-dom': [
-		'react-dom/umd/react-dom.development.js',
-		'react-dom/umd/react-dom.production.min.js',
-	],
-	'inert-polyfill': [
-		'wicg-inert/dist/inert.js',
-		'wicg-inert/dist/inert.min.js',
-	],
+const copiedVendors = {
+	'react.js': 'react/umd/react.development.js',
+	'react.min.js': 'react/umd/react.production.min.js',
+	'react-dom.js': 'react-dom/umd/react-dom.development.js',
+	'react-dom.min.js': 'react-dom/umd/react-dom.production.min.js',
 };
-const vendorsCopyConfig = Object.entries( vendors ).flatMap(
-	( [ key, [ devFilename, prodFilename ] ] ) => {
-		return [
-			{
-				from: `node_modules/${ devFilename }`,
-				to: `build/vendors/${ key }.js`,
-			},
-			{
-				from: `node_modules/${ prodFilename }`,
-				to: `build/vendors/${ key }.min.js`,
-			},
-		];
-	}
-);
+
 module.exports = {
 	...baseConfig,
 	name: 'packages',
-	entry: gutenbergPackages.reduce( ( memo, packageName ) => {
-		return {
-			...memo,
-			[ packageName ]: {
+	entry: Object.fromEntries(
+		gutenbergScripts.map( ( packageName ) => [
+			packageName,
+			{
 				import: `./packages/${ packageName }`,
 				library: {
 					name: [ 'wp', camelCaseDash( packageName ) ],
@@ -134,18 +141,43 @@ module.exports = {
 						: undefined,
 				},
 			},
-		};
-	}, {} ),
+		] )
+	),
 	output: {
 		devtoolNamespace: 'wp',
 		filename: './build/[name]/index.min.js',
 		path: join( __dirname, '..', '..' ),
+		devtoolModuleFilenameTemplate: ( info ) => {
+			if ( info.resourcePath.includes( '/@wordpress/' ) ) {
+				const resourcePath =
+					info.resourcePath.split( '/@wordpress/' )[ 1 ];
+				return `../../packages/${ resourcePath }`;
+			}
+			return `webpack://${ info.namespace }/${ info.resourcePath }`;
+		},
+	},
+	module: {
+		rules: [
+			...baseConfig.module.rules,
+			{
+				test: /\.wasm$/,
+				type: 'asset/resource',
+				generator: {
+					// FIXME: Do not hardcode path.
+					filename: './build/vips/[name].wasm',
+					publicPath: '',
+				},
+			},
+		],
+	},
+	performance: {
+		hints: false, // disable warnings about package sizes
 	},
 	plugins: [
 		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
 		new CopyWebpackPlugin( {
-			patterns: gutenbergPackages
+			patterns: gutenbergScripts
 				.map( ( packageName ) => ( {
 					from: '*.css',
 					context: `./packages/${ packageName }/build-style`,
@@ -154,7 +186,16 @@ module.exports = {
 					noErrorOnMissing: true,
 				} ) )
 				.concat( bundledPackagesPhpConfig )
-				.concat( vendorsCopyConfig ),
+				.concat(
+					Object.entries( copiedVendors ).map( ( [ to, from ] ) => ( {
+						from: `node_modules/${ from }`,
+						to: `build/vendors/${ to }`,
+					} ) )
+				),
+		} ),
+		new MomentTimezoneDataPlugin( {
+			startYear: 2000,
+			endYear: 2040,
 		} ),
 	].filter( Boolean ),
 };
diff --git a/tools/webpack/script-modules.js b/tools/webpack/script-modules.js
new file mode 100644
index 00000000000000..aac387ee32957a
--- /dev/null
+++ b/tools/webpack/script-modules.js
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+const { readdirSync } = require( 'node:fs' );
+
+/**
+ * WordPress dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const { baseConfig, plugins } = require( './shared' );
+
+const WORDPRESS_NAMESPACE = '@wordpress/';
+
+const packageDirs = readdirSync(
+	new URL( '../packages', `file://${ __dirname }` ),
+	{
+		withFileTypes: true,
+	}
+).flatMap( ( dirent ) => ( dirent.isDirectory() ? [ dirent.name ] : [] ) );
+
+/** @type {Map<string, string>} */
+const gutenbergScriptModules = new Map();
+for ( const packageDir of packageDirs ) {
+	const packageJson = require( `@wordpress/${ packageDir }/package.json` );
+
+	if ( ! Object.hasOwn( packageJson, 'wpScriptModuleExports' ) ) {
+		continue;
+	}
+
+	const moduleName = packageJson.name.substring( WORDPRESS_NAMESPACE.length );
+	let { wpScriptModuleExports } = packageJson;
+
+	// Special handling for { "wpScriptModuleExports": "./build-module/index.js" }.
+	if ( typeof wpScriptModuleExports === 'string' ) {
+		wpScriptModuleExports = { '.': wpScriptModuleExports };
+	}
+
+	if ( Object.getPrototypeOf( wpScriptModuleExports ) !== Object.prototype ) {
+		throw new Error( 'wpScriptModuleExports must be an object' );
+	}
+
+	for ( const [ exportName, exportPath ] of Object.entries(
+		wpScriptModuleExports
+	) ) {
+		if ( typeof exportPath !== 'string' ) {
+			throw new Error( 'wpScriptModuleExports paths must be strings' );
+		}
+
+		if ( ! exportPath.startsWith( './' ) ) {
+			throw new Error(
+				'wpScriptModuleExports paths must start with "./"'
+			);
+		}
+
+		const name =
+			exportName === '.' ? 'index' : exportName.replace( /^\.\/?/, '' );
+
+		gutenbergScriptModules.set(
+			`${ moduleName }/${ name }`,
+			require.resolve( `@wordpress/${ packageDir }/${ exportPath }` )
+		);
+	}
+}
+
+module.exports = {
+	...baseConfig,
+	name: 'script-modules',
+	entry: Object.fromEntries( gutenbergScriptModules.entries() ),
+	experiments: {
+		outputModule: true,
+	},
+	output: {
+		devtoolNamespace: 'wp',
+		filename: '[name].min.js',
+		library: {
+			type: 'module',
+		},
+		path: join( __dirname, '..', '..', 'build-module' ),
+		environment: { module: true },
+		module: true,
+		chunkFormat: 'module',
+		asyncChunks: false,
+	},
+	resolve: {
+		extensions: [ '.js', '.ts', '.tsx' ],
+	},
+	plugins: [
+		...plugins,
+		new DependencyExtractionWebpackPlugin( {
+			combineAssets: true,
+			combinedOutputFile: `./assets.php`,
+		} ),
+	],
+	watchOptions: {
+		ignored: [ '**/node_modules' ],
+		aggregateTimeout: 500,
+	},
+};
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index a8079439528659..f30d3a830f3eb1 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -64,8 +64,15 @@ const plugins = [
 	process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
 	new DefinePlugin( {
 		// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-		'process.env.IS_GUTENBERG_PLUGIN':
-			process.env.npm_package_config_IS_GUTENBERG_PLUGIN,
+		'globalThis.IS_GUTENBERG_PLUGIN': JSON.stringify(
+			Boolean( process.env.npm_package_config_IS_GUTENBERG_PLUGIN )
+		),
+		// Inject the `IS_WORDPRESS_CORE` global, used for feature flagging.
+		'globalThis.IS_WORDPRESS_CORE': JSON.stringify(
+			Boolean( process.env.npm_package_config_IS_WORDPRESS_CORE )
+		),
+		// Inject the `SCRIPT_DEBUG` global, used for dev versions of JavaScript.
+		'globalThis.SCRIPT_DEBUG': JSON.stringify( mode === 'development' ),
 	} ),
 	mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
 ];
diff --git a/tools/webpack/vendors.js b/tools/webpack/vendors.js
new file mode 100644
index 00000000000000..d1b01436f6669b
--- /dev/null
+++ b/tools/webpack/vendors.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+const importedVendors = {
+	'react-jsx-runtime': {
+		import: 'react/jsx-runtime',
+		global: 'ReactJSXRuntime',
+	},
+};
+
+module.exports = [
+	...Object.entries( importedVendors ).flatMap( ( [ name, config ] ) => {
+		return [ 'production', 'development' ].map( ( mode ) => {
+			return {
+				mode,
+				target: 'browserslist',
+				output: {
+					filename:
+						mode === 'development'
+							? `vendors/[name].js`
+							: `vendors/[name].min.js`,
+					path: join( __dirname, '..', '..', 'build' ),
+				},
+				entry: {
+					[ name ]: {
+						import: config.import,
+						library: {
+							name: config.global,
+							type: 'window',
+						},
+					},
+				},
+
+				externals: {
+					react: 'React',
+				},
+			};
+		} );
+	} ),
+];
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 201304f455a131..a766eedaeddcaa 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
 		"checkJs": true,
@@ -6,22 +7,21 @@
 		"jsx": "preserve",
 		"target": "esnext",
 		"module": "esnext",
-		"lib": [ "dom", "esnext" ],
+		"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
 		"declaration": true,
 		"declarationMap": true,
 		"composite": true,
 		"emitDeclarationOnly": true,
 		"isolatedModules": true,
 
+		"skipDefaultLibCheck": true,
+
 		/* Strict Type-Checking Options */
 		"strict": true,
 
 		/* Additional Checks */
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,
-		"importsNotUsedAsValues": "error",
 
 		/* Module Resolution Options */
 		"moduleResolution": "node",
diff --git a/tsconfig.json b/tsconfig.json
index 7618b05fc70f7d..1010054ea512ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"references": [
 		{ "path": "bin" },
 		{ "path": "packages/a11y" },
@@ -6,36 +7,56 @@
 		{ "path": "packages/autop" },
 		{ "path": "packages/blob" },
 		{ "path": "packages/block-editor" },
+		{ "path": "packages/block-library" },
 		{ "path": "packages/block-serialization-default-parser" },
 		{ "path": "packages/components" },
 		{ "path": "packages/compose" },
 		{ "path": "packages/core-data" },
 		{ "path": "packages/data" },
+		{ "path": "packages/dataviews" },
+		{ "path": "packages/data-controls" },
 		{ "path": "packages/date" },
 		{ "path": "packages/deprecated" },
 		{ "path": "packages/docgen" },
 		{ "path": "packages/dom" },
-		{ "path": "packages/element" },
 		{ "path": "packages/dom-ready" },
 		{ "path": "packages/e2e-test-utils-playwright" },
+		{ "path": "packages/editor" },
+		{ "path": "packages/element" },
 		{ "path": "packages/escape-html" },
 		{ "path": "packages/eslint-plugin" },
-		{ "path": "packages/html-entities" },
+		{ "path": "packages/fields" },
 		{ "path": "packages/hooks" },
+		{ "path": "packages/html-entities" },
+		{ "path": "packages/html-entities" },
 		{ "path": "packages/i18n" },
 		{ "path": "packages/icons" },
+		{ "path": "packages/interactivity" },
+		{ "path": "packages/interactivity/tsconfig.test.json" },
+		{ "path": "packages/interactivity-router" },
 		{ "path": "packages/is-shallow-equal" },
 		{ "path": "packages/keycodes" },
 		{ "path": "packages/lazy-import" },
+		{ "path": "packages/media-utils" },
+		{ "path": "packages/notices" },
+		{ "path": "packages/plugins" },
 		{ "path": "packages/prettier-config" },
 		{ "path": "packages/primitives" },
 		{ "path": "packages/priority-queue" },
+		{ "path": "packages/private-apis" },
 		{ "path": "packages/project-management-automation" },
 		{ "path": "packages/react-i18n" },
+		{ "path": "packages/redux-routine" },
 		{ "path": "packages/report-flaky-tests" },
+		{ "path": "packages/rich-text" },
+		{ "path": "packages/router" },
+		{ "path": "packages/shortcode" },
 		{ "path": "packages/style-engine" },
+		{ "path": "packages/sync" },
 		{ "path": "packages/token-list" },
+		{ "path": "packages/undo-manager" },
 		{ "path": "packages/url" },
+		{ "path": "packages/vips" },
 		{ "path": "packages/warning" },
 		{ "path": "packages/wordcount" }
 	],
diff --git a/typings/dom-scroll-into-view/index.d.ts b/typings/dom-scroll-into-view/index.d.ts
deleted file mode 100644
index 0b299a71a27fba..00000000000000
--- a/typings/dom-scroll-into-view/index.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-interface Config {
-	alignWithLeft?: boolean;
-	alignWithTop?: boolean;
-	offsetTop?: number;
-	offsetLeft?: number;
-	offsetBottom?: number;
-	offsetRight?: number;
-	allowHorizontalScroll?: boolean;
-	onlyScrollIfNeeded?: boolean;
-}
-
-declare module 'dom-scroll-into-view' {
-	export default function scrollIntoView(
-		source: HTMLElement,
-		container: HTMLElement,
-		config: Config
-	): void;
-}
diff --git a/typings/gutenberg-env/index.d.ts b/typings/gutenberg-env/index.d.ts
index 7fe6d587446f59..c2bc71ae435ee2 100644
--- a/typings/gutenberg-env/index.d.ts
+++ b/typings/gutenberg-env/index.d.ts
@@ -1,7 +1,25 @@
-interface Environment {
-	NODE_ENV: unknown;
+declare namespace NodeJS {
+	interface ProcessEnv {
+		readonly NODE_ENV?: 'production' | 'development' | 'test';
+	}
+	interface Process {
+		env: NodeJS.ProcessEnv;
+	}
 }
-interface Process {
-	env: Environment;
-}
-declare var process: Process;
+
+declare var process: NodeJS.Process;
+
+/**
+ * Whether the code is running in WordPress with SCRIPT_DEBUG flag.
+ */
+declare var SCRIPT_DEBUG: undefined | boolean;
+
+/**
+ * Whether code is running within the Gutenberg plugin.
+ *
+ * When the codebase is built for the plugin, this variable will be set to `true`.
+ * When building for WordPress Core, it will be set to `false` or `undefined`.
+ */
+declare var IS_GUTENBERG_PLUGIN: undefined | boolean;
+
+declare var IS_WORDPRESS_CORE: undefined | boolean;
diff --git a/webpack.config.js b/webpack.config.js
index 9a29ed7782268d..51889b06d1eb44 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,14 @@
  */
 const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfigs = require( './tools/webpack/development' );
+const scriptModules = require( './tools/webpack/script-modules' );
 const packagesConfig = require( './tools/webpack/packages' );
+const vendorsConfig = require( './tools/webpack/vendors' );
 
-module.exports = [ blocksConfig, packagesConfig, ...developmentConfigs ];
+module.exports = [
+	...blocksConfig,
+	scriptModules,
+	packagesConfig,
+	...developmentConfigs,
+	...vendorsConfig,
+];